U

Author: Onlylonger

package.json

@@ -1,8 +1,8 @@
 {
-  "name": "@shilong/ui",
+  "name": "@shilong/react",
   "version": "0.0.0",
   "packageManager": "pnpm@10.6.3",
-  "description": "A starter for creating a React component library.",
+  "description": "A simple react ui component",
   "type": "module",
   "license": "MIT",
   "homepage": "https://github.com/author/library#readme",
@@ -61,9 +61,12 @@
     "typescript": "^5.8.3",
     "vite": "^7.1.1",
     "vite-plugin-dts": "^4.5.4",
-    "vitest": "^3.1.3"
+    "vitest": "^3.1.3",
+    "prettier": "^3.6.2",
+    "prettier-plugin-tailwindcss": "^0.6.14"
   },
   "dependencies": {
+    "@floating-ui/react": "^0.27.15",
     "@shilong/utils": "^0.0.9",
     "sonner": "^2.0.7"
   },

playground/src/App.tsx

@@ -1,11 +1,24 @@
-import { Button, Input, Toaster, toast } from '@shilong/ui'
+import { Button, Input, Popover, Toaster, Tooltip, toast } from '@shilong/ui'
 
 export function App() {
   return (
     <>
       <Input />
       <Button onClick={() => toast('nih')}>Toast</Button>
       <Toaster position="top-center" />
+      <Popover trigger={<Button>Trigger</Button>}>
+        <div>nihao</div>
+      </Popover>
+
+      <Popover trigger={<Button>Trigger1</Button>}>
+        <>nihao</>
+      </Popover>
+
+      <Tooltip trigger={<Button variant="outline">E</Button>} arrow>
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores minus
+        suscipit distinctio asperiores vero molestias, quos rerum aliquid? Et
+        nulla ducimus, qui repudiandae culpa quod pariatur ipsam aut magni sint.
+      </Tooltip>
     </>
   )
 }

pnpm-lock.yaml

@@ -0,0 +1,23 @@
+import React, { type PropsWithChildren } from 'react'
+
+export const Activity = (
+  props: PropsWithChildren<{ mode: 'visible' | 'hidden' }>,
+) => {
+  const { mode, ...reset } = props
+
+  const Comp = Reflect.get(React, 'unstable_Activity')
+
+  if (Comp) {
+    return <Comp {...props} />
+  }
+
+  return (
+    <div
+      data-slot="sl-activity"
+      style={{
+        display: mode === 'visible' ? 'block' : 'none',
+      }}
+      {...reset}
+    />
+  )
+}

src/components/activity/index.tsx

@@ -1,7 +1,7 @@
 import { cva, type VariantProps } from '@shilong/utils'
-import './index.css'
+import './style.css'
 
-const getBtnClx = cva( {
+const getBtnClx = cva({
   base: 'slButtonBase',
   variants: {
     variant: {
@@ -32,6 +32,10 @@ export const Button = (props: ButtonProps) => {
   const { className, variant, size, ...reset } = props
 
   return (
-    <button {...reset} className={getBtnClx({ variant, size, className })} />
+    <button
+      data-slot="sl-button"
+      className={getBtnClx({ variant, size, className })}
+      {...reset}
+    />
   )
 }

src/components/button/index.tsx

@@ -1,7 +1,7 @@
 @reference "../../global.css";
 
 .slButtonBase {
-  @apply cursor-pointer inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive;
+  @apply focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex shrink-0 cursor-pointer items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4;
 }
 
 .slButtonVariantDefault {
@@ -13,6 +13,7 @@
 }
 
 .slButtonVariantOutline {
+  /* @apply bg-background hover:bg-accent text-foreground hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 border shadow-xs; */
   @apply bg-background hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 border shadow-xs;
 }
 

src/components/button/index.css src/components/button/style.csssrc/components/button/index.css renamed to src/components/button/style.css

@@ -1,18 +1,15 @@
 import { clsx } from '@shilong/utils'
 import * as React from 'react'
-import './index.css'
+import './style.css'
+
+export function Input(props: React.ComponentProps<'input'>) {
+  const { className, ...reset } = props
 
-export function Input({
-  className,
-  type,
-  ...props
-}: React.ComponentProps<'input'>) {
   return (
     <input
-      type={type}
-      data-slot="input"
+      data-slot="sl-input"
       className={clsx('slInput', className)}
-      {...props}
+      {...reset}
     />
   )
 }