@neoptocom/neopto-ui 0.5.1 → 0.6.0

package/CONSUMER_SETUP.md

@@ -6,7 +6,7 @@ This component library uses **Tailwind CSS v4 utility classes** directly in the
 
 ---
 
-## 📦 Quick Setup (Recommended)
+## 📦 Installation
 
 ### Step 1: Install dependencies
 
@@ -15,20 +15,39 @@ npm install @neoptocom/neopto-ui
 npm install -D tailwindcss@latest @tailwindcss/postcss
 ```
 
-### Step 2: Run the init command
+### Step 2: Configure PostCSS
 
-After installing the package, run:
+Create `postcss.config.js` in your project root:
 
-```bash
-npx neopto-ui
+```js
+export default {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
+};
 ```
 
-This will automatically:
-- ✅ Create `postcss.config.js` if needed
-- ✅ Update your CSS file with required imports
-- ✅ Configure Tailwind to scan the library components
+### Step 3: Setup your CSS file
 
-### Step 3: Use the components!
+In your main CSS file (e.g., `src/index.css`):
+
+```css
+@import "tailwindcss";
+
+/* Scan the component library source files */
+@source "../node_modules/@neoptocom/neopto-ui/src";
+
+/* Import library tokens and styles */
+@import "@neoptocom/neopto-ui/styles";
+```
+
+Then import your CSS in `src/main.tsx`:
+
+```tsx
+import "./index.css";
+```
+
+### Step 4: Use the components!
 
 ```tsx
 import { Button, Input, Typo } from "@neoptocom/neopto-ui";
@@ -75,51 +94,9 @@ document.documentElement.classList.toggle("dark");
 - `Chip` - Tags and labels
 - `Modal` - Dialog modals
 - `Skeleton` - Loading placeholders
-
----
-
-## 🛠️ Manual Setup (Alternative)
-
-If you prefer to set up manually or the init script didn't work:
-
-### Step 1: Install dependencies
-
-```bash
-npm install @neoptocom/neopto-ui
-npm install -D tailwindcss@latest @tailwindcss/postcss
-```
-
-### Step 2: Configure PostCSS
-
-Create `postcss.config.js` in your project root:
-
-```js
-export default {
-  plugins: {
-    "@tailwindcss/postcss": {},
-  },
-};
-```
-
-### Step 3: Setup your CSS file
-
-In your main CSS file (e.g., `src/index.css`):
-
-```css
-@import "tailwindcss";
-
-/* Scan the component library source files */
-@source "../node_modules/@neoptocom/neopto-ui/src";
-
-/* Import library tokens and styles */
-@import "@neoptocom/neopto-ui/styles";
-```
-
-Then import your CSS in `src/main.tsx`:
-
-```tsx
-import "./index.css";
-```
+- `Counter` - Number stepper
+- `IconButton` - Icon-only buttons
+- `ChatButton` - Animated chat button
 
 ---
 
@@ -131,9 +108,9 @@ import "./index.css";
 
 **Solution:** Make sure you:
 
-1. ✅ Imported the library CSS: `import '@neoptocom/neopto-ui/styles'`
-2. ✅ Added the library path to `tailwind.config.js` content array
-3. ✅ Have Tailwind CSS installed and configured
+1. ✅ Imported the library CSS: `@import "@neoptocom/neopto-ui/styles"`
+2. ✅ Added the `@source` directive to scan the library source files
+3. ✅ Have Tailwind CSS v4 installed and configured with `@tailwindcss/postcss`
 
 ### CSS custom properties not working
 
@@ -141,6 +118,12 @@ import "./index.css";
 
 **Solution:** Make sure the library CSS is imported **before** your app styles so the CSS custom properties are defined.
 
+### Tailwind classes not being generated
+
+**Problem:** Some component styles are missing.
+
+**Solution:** Ensure the `@source` directive points to the library's **source files** (`/src`), not the compiled dist folder. The source files contain all the Tailwind utility classes that need to be scanned.
+
 ---
 
 ## 📚 Full Documentation

package/README.md

@@ -13,28 +13,9 @@ A modern React component library built with Tailwind CSS v4 and TypeScript. Feat
 - **Tree Shakable**: Optimized bundle size with tree shaking
 - **Storybook**: Comprehensive documentation and testing environment
 
-## 📦 Quick Start
+## 📦 Installation
 
-```bash
-# Install the library and Tailwind CSS v4
-npm install @neoptocom/neopto-ui
-npm install -D tailwindcss@latest @tailwindcss/postcss
-
-# Run the init command - it handles everything automatically!
-npx neopto-ui
-```
-
-The init command will:
-- ✅ Create `postcss.config.js` if needed
-- ✅ Update your CSS file with required imports
-- ✅ Configure Tailwind to scan the library components
-
-### Manual Setup (if needed)
-
-<details>
-<summary>Click to expand manual installation steps</summary>
-
-### Step 1: Install dependencies
+### Step 1: Install the library and Tailwind CSS v4
 
 ```bash
 npm install @neoptocom/neopto-ui
@@ -73,8 +54,6 @@ Then import this CSS in your `src/main.tsx`:
 import "./index.css";
 ```
 
-</details>
-
 ## 🎨 Usage
 
 ### Basic Example

package/dist/index.cjs

@@ -3,7 +3,6 @@
 var React2 = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 var reactDom = require('react-dom');
-var tailwindVariants = require('tailwind-variants');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -115,41 +114,40 @@ function Modal({
   const container = document.body;
   return reactDom.createPortal(overlay, container);
 }
-var styles = tailwindVariants.tv({
-  base: "text-current",
-  variants: {
-    variant: {
-      "display-lg": "text-5xl leading-tight",
-      "display-md": "text-4xl leading-tight",
-      "display-sm": "text-4xl leading-tight",
-      "headline-lg": "text-3xl leading-tight",
-      "headline-md": "text-3xl leading-tight",
-      "headline-sm": "text-3xl leading-tight",
-      "title-lg": "text-xl leading-tight",
-      "title-md": "text-lg leading-tight",
-      "title-sm": "text-base leading-tight",
-      "label-lg": "text-sm leading-tight",
-      "label-md": "text-xs leading-tight",
-      "label-sm": "text-xs leading-tight",
-      "body-lg": "text-base leading-relaxed",
-      "body-md": "text-sm leading-relaxed",
-      "body-sm": "text-xs leading-relaxed",
-      "button": "text-base leading-normal"
-    },
-    weight: {
-      normal: "font-normal",
-      medium: "font-medium",
-      semibold: "font-semibold",
-      bold: "font-bold"
-    },
-    muted: {
-      true: "text-[var(--muted-fg)]"
-    }
-  },
-  defaultVariants: {
-    weight: "normal"
-  }
-});
+function getTypoClasses(variant, weight = "normal", muted, className) {
+  const base = "text-current";
+  const variants = {
+    "display-lg": "text-5xl leading-tight",
+    "display-md": "text-4xl leading-tight",
+    "display-sm": "text-4xl leading-tight",
+    "headline-lg": "text-3xl leading-tight",
+    "headline-md": "text-3xl leading-tight",
+    "headline-sm": "text-3xl leading-tight",
+    "title-lg": "text-xl leading-tight",
+    "title-md": "text-lg leading-tight",
+    "title-sm": "text-base leading-tight",
+    "label-lg": "text-sm leading-tight",
+    "label-md": "text-xs leading-tight",
+    "label-sm": "text-xs leading-tight",
+    "body-lg": "text-base leading-relaxed",
+    "body-md": "text-sm leading-relaxed",
+    "body-sm": "text-xs leading-relaxed",
+    "button": "text-base leading-normal"
+  };
+  const weights = {
+    normal: "font-normal",
+    medium: "font-medium",
+    semibold: "font-semibold",
+    bold: "font-bold"
+  };
+  return [
+    base,
+    variants[variant],
+    weights[weight],
+    muted ? "text-[var(--muted-fg)]" : "",
+    className
+  ].filter(Boolean).join(" ");
+}
 function Typo({
   variant,
   bold,
@@ -169,23 +167,21 @@ function Typo({
   return /* @__PURE__ */ jsxRuntime.jsx(
     Component,
     {
-      className: styles({ variant, weight: bold, muted, className }),
+      className: getTypoClasses(variant, bold, muted, className),
       style: { fontFamily: getFontFamily(variant) },
       ...props,
       children
     }
   );
 }
-var avatarStyles = tailwindVariants.tv({
-  base: "relative box-border flex items-center justify-center overflow-hidden rounded-full border border-[var(--border)] bg-[var(--muted)] text-[var(--fg)] select-none",
-  variants: {
-    size: {
-      sm: "w-[28px] h-[28px]",
-      md: "w-[60px] h-[60px]"
-    }
-  },
-  defaultVariants: { size: "sm" }
-});
+function getAvatarClasses(size = "sm", className) {
+  const base = "relative box-border flex items-center justify-center overflow-hidden rounded-full border border-[var(--border)] bg-[var(--muted)] text-[var(--fg)] select-none";
+  const sizes = {
+    sm: "w-[28px] h-[28px]",
+    md: "w-[60px] h-[60px]"
+  };
+  return [base, sizes[size], className].filter(Boolean).join(" ");
+}
 function getInitials(name) {
   if (!name) return "\u2026";
   const words = name.trim().split(/\s+/);
@@ -214,7 +210,7 @@ function Avatar({
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: avatarStyles({ size, className }),
+      className: getAvatarClasses(size, className),
       "aria-label": alt ?? name,
       role: "img",
       ...props,
@@ -326,29 +322,20 @@ function Icon({
     }
   );
 }
-var iconButtonStyles = tailwindVariants.tv({
-  base: [
-    "flex items-center justify-center rounded-full flex-shrink-0",
-    "transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
-    "focus-visible:ring-cyan-500/40 disabled:cursor-not-allowed disabled:opacity-50"
-  ].join(" "),
-  variants: {
-    variant: {
-      ghost: "bg-transparent hover:bg-[var(--muted)] active:bg-[var(--muted)]",
-      primary: "bg-cyan-500 text-white hover:bg-cyan-400 active:bg-cyan-600",
-      secondary: "border border-[var(--border)] bg-[var(--surface)] hover:bg-[var(--muted)] active:bg-[var(--muted)]"
-    },
-    size: {
-      sm: "w-8 h-8",
-      md: "w-10 h-10",
-      lg: "w-12 h-12"
-    }
-  },
-  defaultVariants: {
-    variant: "ghost",
-    size: "md"
-  }
-});
+function getIconButtonClasses(variant = "ghost", size = "md", className) {
+  const base = "flex items-center justify-center rounded-full flex-shrink-0 transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-cyan-500/40 disabled:cursor-not-allowed disabled:opacity-50";
+  const variants = {
+    ghost: "bg-transparent hover:bg-[var(--muted)] active:bg-[var(--muted)]",
+    primary: "bg-cyan-500 text-white hover:bg-cyan-400 active:bg-cyan-600",
+    secondary: "border border-[var(--border)] bg-[var(--surface)] hover:bg-[var(--muted)] active:bg-[var(--muted)]"
+  };
+  const sizes = {
+    sm: "w-8 h-8",
+    md: "w-10 h-10",
+    lg: "w-12 h-12"
+  };
+  return [base, variants[variant], sizes[size], className].filter(Boolean).join(" ");
+}
 var IconButton = React2__namespace.forwardRef(
   ({
     variant,
@@ -368,7 +355,7 @@ var IconButton = React2__namespace.forwardRef(
       "button",
       {
         ref,
-        className: iconButtonStyles({ variant, size, className }),
+        className: getIconButtonClasses(variant, size, className),
         ...props,
         children: /* @__PURE__ */ jsxRuntime.jsx(
           Icon,
@@ -782,35 +769,33 @@ function Search({
     }
   );
 }
-var buttonStyles = tailwindVariants.tv({
-  base: "cursor-pointer inline-flex items-center justify-center gap-2 rounded-[var(--radius-2xl)] px-[18px] h-12 transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-cyan-500/40 disabled:cursor-not-allowed disabled:opacity-50",
-  variants: {
-    variant: {
-      primary: "bg-cyan-500 text-white hover:bg-cyan-400 active:bg-cyan-600 disabled:bg-neutral-400",
-      secondary: "border border-cyan-500 text-cyan-500 bg-transparent hover:bg-cyan-50 active:bg-cyan-100 disabled:border-neutral-400 disabled:text-neutral-400",
-      ghost: "bg-transparent text-cyan-500 hover:bg-cyan-50 active:bg-cyan-100 disabled:text-neutral-400"
-    },
-    size: {
-      sm: "h-9 px-3",
-      md: "h-12 px-[18px]",
-      lg: "h-14 px-6"
-    },
-    fullWidth: {
-      true: "w-full"
-    }
-  },
-  defaultVariants: {
-    variant: "primary",
-    size: "md"
-  }
-});
+function getButtonClasses(variant = "primary", size = "md", fullWidth, className) {
+  const base = "cursor-pointer inline-flex items-center justify-center gap-2 rounded-[var(--radius-2xl)] transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-cyan-500/40 disabled:cursor-not-allowed disabled:opacity-50";
+  const variants = {
+    primary: "bg-cyan-500 text-white hover:bg-cyan-400 active:bg-cyan-600 disabled:bg-neutral-400",
+    secondary: "border border-cyan-500 text-cyan-500 bg-transparent hover:bg-cyan-50 active:bg-cyan-100 disabled:border-neutral-400 disabled:text-neutral-400",
+    ghost: "bg-transparent text-cyan-500 hover:bg-cyan-50 active:bg-cyan-100 disabled:text-neutral-400"
+  };
+  const sizes = {
+    sm: "h-9 px-3",
+    md: "h-12 px-[18px]",
+    lg: "h-14 px-6"
+  };
+  return [
+    base,
+    variants[variant],
+    sizes[size],
+    fullWidth ? "w-full" : "",
+    className
+  ].filter(Boolean).join(" ");
+}
 var Button = React2__namespace.forwardRef(
   ({ variant, size, fullWidth, className, children, icon, ...props }, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsx(
       "button",
       {
         ref,
-        className: buttonStyles({ variant, size, fullWidth, className }),
+        className: getButtonClasses(variant, size, fullWidth, className),
         ...props,
         children
       }