@clidey/ux 0.2.0 → 0.4.0

package/README.md

@@ -25,7 +25,6 @@ pnpm add @clidey/ux
 
 ```tsx
 import { Button, Card, ThemeProvider } from '@clidey/ux'
-import '@clidey/ux/styles'
 
 function App() {
   return (
@@ -43,6 +42,8 @@ function App() {
 }
 ```
 
+**Note:** Styles are automatically included when you import components. No additional CSS imports are required.
+
 ## Components
 
 ### Layout Components
@@ -192,71 +193,64 @@ function App() {
 
 ## Styling
 
-The components are built with Tailwind CSS. To use them properly, make sure you have Tailwind CSS configured in your project.
+The components are built with Tailwind CSS v4 and include all necessary styles automatically. When you import any component, the styles are automatically included in your bundle.
+
+### Requirements
+
+To use the components properly, you need to have Tailwind CSS v4 installed in your project:
+
+```bash
+npm install tailwindcss@next
+```
 
-### Required Tailwind CSS Configuration
+### Configuration
 
-Add the following to your `tailwind.config.js`:
+Configure your build tool to process CSS. For example, with Vite:
 
 ```js
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-  darkMode: ["class"],
-  content: [
-    './pages/**/*.{ts,tsx}',
-    './components/**/*.{ts,tsx}',
-    './app/**/*.{ts,tsx}',
-    './src/**/*.{ts,tsx}',
-    './node_modules/@clidey/ux/**/*.{js,ts,jsx,tsx}',
-  ],
-  theme: {
-    extend: {
-      colors: {
-        border: "hsl(var(--border))",
-        input: "hsl(var(--input))",
-        ring: "hsl(var(--ring))",
-        background: "hsl(var(--background))",
-        foreground: "hsl(var(--foreground))",
-        primary: {
-          DEFAULT: "hsl(var(--primary))",
-          foreground: "hsl(var(--primary-foreground))",
-        },
-        secondary: {
-          DEFAULT: "hsl(var(--secondary))",
-          foreground: "hsl(var(--secondary-foreground))",
-        },
-        destructive: {
-          DEFAULT: "hsl(var(--destructive))",
-          foreground: "hsl(var(--destructive-foreground))",
-        },
-        muted: {
-          DEFAULT: "hsl(var(--muted))",
-          foreground: "hsl(var(--muted-foreground))",
-        },
-        accent: {
-          DEFAULT: "hsl(var(--accent))",
-          foreground: "hsl(var(--accent-foreground))",
-        },
-        popover: {
-          DEFAULT: "hsl(var(--popover))",
-          foreground: "hsl(var(--popover-foreground))",
-        },
-        card: {
-          DEFAULT: "hsl(var(--card))",
-          foreground: "hsl(var(--card-foreground))",
-        },
-      },
-      borderRadius: {
-        lg: "var(--radius)",
-        md: "calc(var(--radius) - 2px)",
-        sm: "calc(var(--radius) - 4px)",
-      },
+// vite.config.js
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+export default defineConfig({
+  plugins: [react()],
+  css: {
+    postcss: {
+      plugins: [
+        require('tailwindcss'),
+      ],
     },
   },
-  plugins: [],
+})
+```
+
+### CSS Variables
+
+The package provides CSS custom properties for theming that are automatically included:
+
+```css
+:root {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  /* ... more variables */
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  /* ... dark mode variables */
 }
 ```
 
+### Troubleshooting
+
+If the styles aren't loading properly:
+
+1. **Check your build tool configuration** - Make sure CSS imports are being processed
+2. **Verify Tailwind CSS version** - Ensure you're using Tailwind CSS v4
+3. **Clear cache** - Try clearing your build cache and node_modules
+
 ## Dependencies
 
 This package has the following peer dependencies:

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@clidey/ux",
   "private": false,
-  "version": "0.2.0",
+  "version": "0.4.0",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -11,8 +11,7 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js",
       "require": "./dist/index.js"
-    },
-    "./styles": "./dist/styles.css"
+    }
   },
   "files": [
     "dist",
@@ -36,6 +35,7 @@
     "@radix-ui/react-dropdown-menu": "^2.1.15",
     "@radix-ui/react-label": "^2.1.7",
     "@radix-ui/react-popover": "^1.1.14",
+    "@radix-ui/react-separator": "^1.1.7",
     "@radix-ui/react-slot": "^1.2.3",
     "@radix-ui/react-tabs": "^1.1.12",
     "@radix-ui/react-tooltip": "^1.2.7",
@@ -49,24 +49,24 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.30.1",
+    "@tailwindcss/vite": "^4.1.11",
     "@types/node": "^24.1.0",
     "@types/react": "^19.1.8",
     "@types/react-dom": "^19.1.6",
+    "@vitejs/plugin-react": "^4.7.0",
     "@vitejs/plugin-react-swc": "^3.10.2",
     "eslint": "^9.30.1",
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-react-refresh": "^0.4.20",
     "globals": "^16.3.0",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "tailwindcss": "^4.1.11",
     "tw-animate-css": "^1.3.6",
     "typescript": "~5.8.3",
     "typescript-eslint": "^8.35.1",
     "vite": "^7.0.4",
-    "vite-plugin-dts": "^4.0.0",
-    "react": "^19.1.0",
-    "react-dom": "^19.1.0",
-    "@tailwindcss/vite": "^4.1.11",
-    "@vitejs/plugin-react": "^4.7.0",
-    "tailwindcss": "^4.1.11"
+    "vite-plugin-dts": "^4.0.0"
   },
   "keywords": [
     "react",