U

Author: Onlylonger

package.json

@@ -1,6 +1,7 @@
 {
   "name": "@shilong/ui",
   "version": "0.0.0",
+  "packageManager": "pnpm@10.6.3",
   "description": "A starter for creating a React component library.",
   "type": "module",
   "license": "MIT",
@@ -20,7 +21,10 @@
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {
-    ".": "./dist/index.js",
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
     "./style": "./dist/global.css",
     "./package.json": "./package.json"
   },
@@ -36,6 +40,10 @@
     "release": "bumpp && pnpm publish",
     "prepublishOnly": "pnpm run build"
   },
+  "peerDependencies": {
+    "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+    "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
+  },
   "devDependencies": {
     "@tailwindcss/vite": "^4.1.11",
     "@testing-library/jest-dom": "^6.6.3",
@@ -49,12 +57,19 @@
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "tailwindcss": "^4.1.11",
+    "tw-animate-css": "^1.3.6",
     "typescript": "^5.8.3",
     "vite": "^7.1.1",
     "vite-plugin-dts": "^4.5.4",
     "vitest": "^3.1.3"
   },
   "dependencies": {
-    "@shilong/utils": "^0.0.9"
+    "@shilong/ui": "link:",
+    "class-variance-authority": "^0.7.1"
+  },
+  "pnpm": {
+    "overrides": {
+      "@shilong/ui": "link:"
+    }
   }
 }

playground/src/App.tsx

@@ -1,9 +1,9 @@
-import { MyButton } from '../../dist/index'
+import { ButtonPage } from './ButtonPage'
 
 export function App() {
   return (
     <>
-      <MyButton type="primary" />
+      <ButtonPage />
     </>
   )
 }

playground/src/ButtonPage.tsx

@@ -0,0 +1,32 @@
+import { Button, type ButtonVariants } from '@shilong/ui'
+
+const variants: ButtonVariants['variant'][] = [
+  'default',
+  'secondary',
+  'ghost',
+  'link',
+  'outline',
+  'destructive',
+]
+
+const sizes: ButtonVariants['size'][] = ['default', 'lg', 'sm']
+
+export const ButtonPage = () => {
+  return (
+    <div>
+      {variants.map((v) => {
+        return (
+          <div key={v}>
+            {sizes.map((v2) =>
+              [true, false].map((v3) => (
+                <Button variant={v} size={v2} disabled={v3}>
+                  {v}-{v2}-{v3 ? 'true' : 'false'}
+                </Button>
+              ))
+            )}
+          </div>
+        )
+      })}
+    </div>
+  )
+}

playground/src/index.tsx

@@ -2,7 +2,7 @@ import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import { App } from './App.tsx'
 import './style.css'
-import '../../dist/global.css'
+import '@shilong/ui/style'
 
 createRoot(document.querySelector('#app')!).render(
   <StrictMode>