U

Author: Onlylonger

package.json

@@ -25,7 +25,7 @@
       "import": "./dist/index.js",
       "types": "./dist/index.d.ts"
     },
-    "./style": "./dist/global.css",
+    "./style.css": "./dist/global.css",
     "./package.json": "./package.json"
   },
   "publishConfig": {
@@ -34,7 +34,7 @@
   "scripts": {
     "build": "vite build",
     "dev": "vite build -w",
-    "playground": "vite --config playground/vite.config.ts",
+    "pg": "vite --config playground/vite.config.ts",
     "test": "vitest",
     "typecheck": "tsc --noEmit",
     "release": "bumpp && pnpm publish",
@@ -64,8 +64,9 @@
     "vitest": "^3.1.3"
   },
   "dependencies": {
-    "@shilong/ui": "link:",
-    "class-variance-authority": "^0.7.1"
+    "@shilong/utils": "^0.0.9",
+    "class-variance-authority": "^0.7.1",
+    "sonner": "^2.0.7"
   },
   "pnpm": {
     "overrides": {

playground/src/App.tsx

@@ -1,9 +1,11 @@
-import { ButtonPage } from './ButtonPage'
+import { Button, Input, Toaster, toast } from '@shilong/ui'
 
 export function App() {
   return (
     <>
-      <ButtonPage />
+      <Input />
+      <Button onClick={() => toast('nih')}>Toast</Button>
+      <Toaster position="top-center" />
     </>
   )
 }

playground/src/ButtonPage.tsx

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

playground/src/index.tsx

@@ -1,7 +1,7 @@
 @reference "../../global.css";
 
 .slButtonBase {
-  @apply inline-flex shrink-0 bg-transparent cursor-pointer items-center justify-center gap-2 rounded-md border-none px-2 py-1 font-medium whitespace-nowrap transition-all outline-none disabled:cursor-not-allowed disabled:opacity-50;
+  @apply 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;
 }
 
 .slButtonVariantDefault {

pnpm-lock.yaml

@@ -0,0 +1,8 @@
+@reference "../../global.css";
+
+.slInput {
+  @apply file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm;
+
+  @apply focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px];
+  @apply aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive;
+}