@nqlib/nqui 0.1.1 → 0.1.3

package/README.md

@@ -37,7 +37,7 @@ npm install @nqlib/nqui
 @source "./**/*.{js,ts,jsx,tsx,mdx}";
 @source "../components/**/*.{js,ts,jsx,tsx,mdx}";
 @source "../node_modules/@nqlib/nqui/dist/**/*.js";
-@import "../node_modules/tw-animate-css/dist/tw-animate.css";
+@import "tw-animate-css";
 @custom-variant dark (&:is(.dark *));
 
 @import "@nqlib/nqui/styles";
@@ -57,6 +57,16 @@ export default function Page() {
 
 **Note:** Pages using nqui components must include `"use client"` because nqui components use React hooks.
 
+**For Local Development:** If you're using `npm link` or `file:` protocol, you may need to use Webpack instead of Turbopack:
+```json
+{
+  "scripts": {
+    "dev": "next dev --webpack"
+  }
+}
+```
+See [Troubleshooting](#troubleshooting) for more details.
+
 #### For Vite
 
 1. **Import CSS in your `src/main.tsx` or `src/index.css`:**
@@ -64,7 +74,7 @@ export default function Page() {
 ```css
 /* src/index.css */
 @import "tailwindcss";
-@import "../node_modules/tw-animate-css/dist/tw-animate.css";
+@import "tw-animate-css";
 @import "@nqlib/nqui/styles";
 ```
 
@@ -210,6 +220,34 @@ function MyApp() {
 
 All components are framework-agnostic and work with any React setup.
 
+## Troubleshooting
+
+### Module Resolution Issues (Next.js 16+)
+
+If you encounter `Module not found: Can't resolve '@nqlib/nqui'` when using `npm link` or `file:` protocol, switch to Webpack:
+
+**Quick Fix:**
+```json
+{
+  "scripts": {
+    "dev": "next dev --webpack"
+  }
+}
+```
+
+**Or in `next.config.ts`:**
+```typescript
+const nextConfig: NextConfig = {
+  experimental: {
+    turbo: undefined, // Disable Turbopack
+  },
+};
+```
+
+**Why?** Next.js 16 uses Turbopack by default, which has limited symlink support. Webpack handles symlinks better for local development. Production builds always use Webpack, so there's no production impact.
+
+See [instructions.md](./instructions.md) for more troubleshooting tips.
+
 ## Features
 
 - ✨ **Enhanced UI Components** - Button, Checkbox, RadioGroup, Separator, ScrollArea with additional variants

package/dist/styles.css

@@ -6,16 +6,6 @@
  * IMPORTANT: This file does NOT include Tailwind CSS imports or framework-specific directives.
  * You must have Tailwind CSS configured in your project and add the appropriate imports.
  *
- * For Next.js with Tailwind CSS v4:
- *   @import "tailwindcss";
- *   @source "./**/*.{js,ts,jsx,tsx,mdx}";
- *   @source "../node_modules/@nqlib/nqui/dist/**/*.js";
- *   @import "@nqlib/nqui/styles";
- *
- * For Vite with Tailwind CSS v4:
- *   @import "tailwindcss";
- *   @import "@nqlib/nqui/styles";
- *
  * This file includes:
  * - All CSS variables (--primary, --background, --foreground, etc.)
  * - Complete color scales (100-600) for all semantic colors
@@ -28,6 +18,328 @@
  */
 
 
+@theme inline {
+    --font-sans: 'Inter Variable', sans-serif;
+    --color-sidebar-ring: var(--sidebar-ring);
+    --color-sidebar-border: var(--sidebar-border);
+    --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+    --color-sidebar-accent: var(--sidebar-accent);
+    --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+    --color-sidebar-primary: var(--sidebar-primary);
+    --color-sidebar-foreground: var(--sidebar-foreground);
+    --color-sidebar: var(--sidebar);
+    --color-chart-5: var(--chart-5);
+    --color-chart-4: var(--chart-4);
+    --color-chart-3: var(--chart-3);
+    --color-chart-2: var(--chart-2);
+    --color-chart-1: var(--chart-1);
+    --color-ring: var(--ring);
+    --color-input: var(--input);
+    --color-border: var(--border);
+    --color-destructive: var(--destructive);
+    --color-destructive-foreground: var(--destructive-foreground);
+    --color-success: var(--success);
+    --color-success-foreground: var(--success-foreground);
+    --color-warning: var(--warning);
+    --color-warning-foreground: var(--warning-foreground);
+    --color-info: var(--info);
+    --color-info-foreground: var(--info-foreground);
+    --color-accent-foreground: var(--accent-foreground);
+    --color-accent: var(--accent);
+    --color-muted-foreground: var(--muted-foreground);
+    --color-muted: var(--muted);
+    --color-secondary-foreground: var(--secondary-foreground);
+    --color-secondary: var(--secondary);
+    --color-primary-foreground: var(--primary-foreground);
+    --color-primary: var(--primary);
+    --color-popover-foreground: var(--popover-foreground);
+    --color-popover: var(--popover);
+    --color-card-foreground: var(--card-foreground);
+    --color-card: var(--card);
+    --color-foreground: var(--foreground);
+    --color-background: var(--background);
+    --radius-sm: calc(var(--radius) - 4px);
+    --radius-md: calc(var(--radius) - 2px);
+    --radius-lg: var(--radius);
+    --radius-xl: calc(var(--radius) + 4px);
+    --radius-2xl: calc(var(--radius) + 8px);
+    --radius-3xl: calc(var(--radius) + 12px);
+    --radius-4xl: calc(var(--radius) + 16px);
+
+    /* Button enhanced styling */
+    --button-gradient: linear-gradient(to bottom, rgba(255,255,255,0.15), transparent);
+    --button-shadow: 0 1px 0 0 rgba(255,255,255,0.15) inset, 0 1px 1px 0 rgba(0,0,0,0.075);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+    }
+  body {
+    @apply font-sans bg-background text-foreground;
+    }
+  html {
+    @apply font-sans;
+    }
+}
+
+@layer utilities {
+  @keyframes radio-pulse {
+    0% {
+      box-shadow: 0 0 0 0 color-mix(in oklch, var(--primary) 40%, transparent);
+    }
+    70% {
+      box-shadow: 0 0 0 8px color-mix(in oklch, var(--primary) 0%, transparent);
+    }
+    100% {
+      box-shadow: 0 0 0 0 color-mix(in oklch, var(--primary) 0%, transparent);
+    }
+  }
+
+  @keyframes accordion-down {
+    from {
+      height: 0;
+    }
+    to {
+      height: var(--radix-accordion-content-height);
+    }
+  }
+
+  @keyframes accordion-up {
+    from {
+      height: var(--radix-accordion-content-height);
+    }
+    to {
+      height: 0;
+    }
+  }
+
+  /* Separator Decorative Variants */
+  /* Base transparent gradient line for decorative variants */
+  .separator-transparent::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 5%;
+    right: 5%;
+    width: 90%;
+    height: 1px;
+    background-image: linear-gradient(to right, transparent, var(--border), transparent);
+  }
+
+  /* Arrow/Diamond Down - decorative arrow shape in center */
+  .separator-arrow-down::after {
+    content: "";
+    position: absolute;
+    z-index: 1;
+    top: -7px;
+    left: calc(50% - 7px);
+    width: 14px;
+    height: 14px;
+    transform: rotate(45deg);
+    background-color: var(--background);
+    border-bottom: 1px solid var(--border);
+    border-right: 1px solid var(--border);
+  }
+
+  /* Tab Down - rounded tab shape in center */
+  .separator-tab-down::after {
+    content: "";
+    position: absolute;
+    z-index: 1;
+    top: 0;
+    left: calc(50% - 10px);
+    width: 20px;
+    height: 14px;
+    background-color: var(--background);
+    border-bottom: 1px solid var(--border);
+    border-left: 1px solid var(--border);
+    border-right: 1px solid var(--border);
+    border-radius: 0 0 var(--radius) var(--radius);
+  }
+
+  /* Stopper - rectangular stopper in center */
+  .separator-stopper::after {
+    content: "";
+    position: absolute;
+    z-index: 1;
+    top: -6px;
+    left: calc(50% - 7px);
+    width: 14px;
+    height: 12px;
+    background-color: var(--background);
+    border-left: 1px solid var(--border);
+    border-right: 1px solid var(--border);
+  }
+
+  /* Dot - circular dot in center with shadow */
+  .separator-dot::after {
+    content: "";
+    position: absolute;
+    z-index: 1;
+    top: -9px;
+    left: calc(50% - 9px);
+    width: 18px;
+    height: 18px;
+    background-color: var(--primary);
+    border: 1px solid var(--border);
+    border-radius: 50%;
+    box-shadow: inset 0 0 0 2px var(--background), 0 0 0 4px var(--background);
+  }
+
+  /* Text Decoration - text/character decoration in center */
+  .separator-text-decoration {
+    border-top: 1px solid var(--border);
+    background-color: transparent;
+  }
+
+  .separator-text-decoration::before {
+    content: var(--separator-text-content, "j");
+    position: absolute;
+    z-index: 1;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -65%);
+    background-color: var(--background);
+    color: var(--foreground);
+    display: inline-block;
+    font-size: 1rem;
+    line-height: 1rem;
+    padding: 0 0.5rem;
+    text-rendering: geometricPrecision;
+  }
+
+  /* Shiny Corner - lighting effect on 2 edges (left/right for horizontal, top/bottom for vertical) */
+  .separator-shiny-corner {
+    background: linear-gradient(
+      90deg,
+      color-mix(in oklch, var(--foreground) 60%, transparent) 0%,
+      transparent 8%,
+      var(--border) 20%,
+      var(--border) 80%,
+      transparent 92%,
+      color-mix(in oklch, var(--foreground) 60%, transparent) 100%
+    );
+    position: relative;
+  }
+
+  .separator-shiny-corner::before {
+    content: "";
+    position: absolute;
+    inset: -1px;
+    background: linear-gradient(
+      90deg,
+      color-mix(in oklch, var(--foreground) 80%, transparent) 0%,
+      transparent 5%,
+      transparent 95%,
+      color-mix(in oklch, var(--foreground) 80%, transparent) 100%
+    );
+    filter: blur(1px);
+    opacity: 0.7;
+    z-index: -1;
+  }
+
+  /* Vertical orientation support for shiny corner */
+  [aria-orientation="vertical"].separator-shiny-corner {
+    background: linear-gradient(
+      180deg,
+      color-mix(in oklch, var(--foreground) 60%, transparent) 0%,
+      transparent 8%,
+      var(--border) 20%,
+      var(--border) 80%,
+      transparent 92%,
+      color-mix(in oklch, var(--foreground) 60%, transparent) 100%
+    );
+  }
+
+  [aria-orientation="vertical"].separator-shiny-corner::before {
+    background: linear-gradient(
+      180deg,
+      color-mix(in oklch, var(--foreground) 80%, transparent) 0%,
+      transparent 5%,
+      transparent 95%,
+      color-mix(in oklch, var(--foreground) 80%, transparent) 100%
+    );
+  }
+
+  /* Shiny Edge - softer gradient highlight on edges */
+  .separator-shiny-edge {
+    background: linear-gradient(
+      90deg,
+      color-mix(in oklch, var(--foreground) 40%, transparent) 0%,
+      transparent 10%,
+      var(--border) 30%,
+      var(--border) 70%,
+      transparent 90%,
+      color-mix(in oklch, var(--foreground) 40%, transparent) 100%
+    );
+    position: relative;
+  }
+
+  .separator-shiny-edge::before {
+    content: "";
+    position: absolute;
+    inset: -0.5px;
+    background: linear-gradient(
+      90deg,
+      color-mix(in oklch, var(--primary) 50%, transparent) 0%,
+      transparent 8%,
+      transparent 92%,
+      color-mix(in oklch, var(--primary) 50%, transparent) 100%
+    );
+    filter: blur(0.5px);
+    opacity: 0.5;
+    z-index: -1;
+  }
+
+  /* Vertical orientation support for shiny edge */
+  [aria-orientation="vertical"].separator-shiny-edge {
+    background: linear-gradient(
+      180deg,
+      color-mix(in oklch, var(--foreground) 40%, transparent) 0%,
+      transparent 10%,
+      var(--border) 30%,
+      var(--border) 70%,
+      transparent 90%,
+      color-mix(in oklch, var(--foreground) 40%, transparent) 100%
+    );
+  }
+
+  [aria-orientation="vertical"].separator-shiny-edge::before {
+    background: linear-gradient(
+      180deg,
+      color-mix(in oklch, var(--primary) 50%, transparent) 0%,
+      transparent 8%,
+      transparent 92%,
+      color-mix(in oklch, var(--primary) 50%, transparent) 100%
+    );
+  }
+}
+
+/* nqui Design System CSS
+ *
+ * This file contains ALL design tokens, CSS variables, and color scales from nqui.
+ * It includes everything the library needs to style components correctly.
+ *
+ * IMPORTANT: This file does NOT include Tailwind CSS imports.
+ * You must have Tailwind CSS configured in your project.
+ *
+ * For Tailwind CSS v4, add this at the TOP of your CSS file:
+ *    *
+ * For Tailwind CSS v3, configure it in your tailwind.config.js
+ *
+ * This file includes:
+ * - All CSS variables (--primary, --background, --foreground, etc.)
+ * - Complete color scales (100-600) for all semantic colors
+ * - Light and dark mode support
+ * - Base layer styles
+ * - Utility animations
+ *
+ * Generated by: npx nqui init-css
+ * Do not edit manually - regenerate if nqui is updated
+ */
+
+
 /* ============================================
    nqui Color System & Design Tokens
    ============================================ */
@@ -105,6 +417,79 @@
     --info: var(--info-500);
     --info-foreground: oklch(0.98 0 0);
 
+    /* Additional variables from index.css */
+    /* ============================================
+       Primary Color Scale - Light Mode
+       Blue Theme (Hue 240)
+       ============================================ */
+
+    /* Primary Color Scale (Light Mode) - Blue Theme (Hue 240) */
+    --primary-100: oklch(0.95 0.08 240);
+    --primary-200: oklch(0.90 0.10 240);
+    --primary-300: oklch(0.85 0.12 240);
+    --primary-400: oklch(0.80 0.14 240);
+    --primary-500: oklch(0.60 0.25 240); /* Main primary - darker for light mode */
+    --primary-600: oklch(0.50 0.28 240);
+
+    /* ============================================
+       Semantic Color Scales - Light Mode
+       ============================================ */
+
+    /* Success Color Scale (Light Mode) - Green (Hue 142) */
+    --success-100: oklch(0.95 0.08 142);
+    --success-200: oklch(0.90 0.10 142);
+    --success-300: oklch(0.75 0.12 142);
+    --success-400: oklch(0.60 0.14 142);
+    --success-500: oklch(0.50 0.15 142);
+    --success-600: oklch(0.40 0.18 142);
+
+    /* Warning Color Scale (Light Mode) - Orange (Hue 65) */
+    --warning-100: oklch(0.95 0.08 65);
+    --warning-200: oklch(0.90 0.10 65);
+    --warning-300: oklch(0.85 0.12 65);
+    --warning-400: oklch(0.75 0.14 65);
+    --warning-500: oklch(0.70 0.15 65);
+    --warning-600: oklch(0.60 0.18 65);
+
+    /* Destructive Color Scale (Light Mode) - Red (Hue 25) */
+    --danger-100: oklch(0.95 0.08 25);
+    --danger-200: oklch(0.90 0.10 25);
+    --danger-300: oklch(0.80 0.12 25);
+    --danger-400: oklch(0.70 0.14 25);
+    --danger-500: oklch(0.60 0.15 25);
+    --danger-600: oklch(0.50 0.18 25);
+
+    /* Info Color Scale (Light Mode) - Cyan/Teal (Hue 200) */
+    --info-100: oklch(0.95 0.08 200);
+    --info-200: oklch(0.90 0.10 200);
+    --info-300: oklch(0.80 0.12 200);
+    --info-400: oklch(0.70 0.14 200);
+    --info-500: oklch(0.60 0.15 200);
+    --info-600: oklch(0.50 0.18 200);
+
+    /* ============================================
+       System Color Mappings - Light Mode
+       ============================================ */
+
+    /* Primary Colors - Mapped to color scales */
+    --primary: var(--primary-500);
+    --primary-foreground: oklch(0.98 0 0); /* Light text for contrast */
+    --primary-hover: var(--primary-400);
+    --ring: var(--primary-500); /* Focus ring uses primary color */
+
+    /* Semantic Colors - Mapped to color scales */
+    --success: var(--success-500);
+    --success-foreground: oklch(0.98 0 0);
+
+    --warning: var(--warning-500);
+    --warning-foreground: oklch(0.145 0 0);
+
+    --destructive: var(--danger-500);
+    --destructive-foreground: oklch(0.98 0 0);
+
+    --info: var(--info-500);
+    --info-foreground: oklch(0.98 0 0);
+
     /* Additional variables from index.css */
     --background: oklch(1 0 0);
     --foreground: oklch(0.145 0 0);
@@ -212,6 +597,79 @@
     --info: var(--info-500);
     --info-foreground: oklch(0.98 0 0);
 
+    /* Additional variables from index.css */
+    /* ============================================
+       Primary Color Scale - Dark Mode
+       Blue Theme (Hue 240)
+       ============================================ */
+
+    /* Primary Color Scale (Dark Mode) - Blue Theme (Hue 240) */
+    --primary-100: oklch(0.40 0.15 240);
+    --primary-200: oklch(0.45 0.18 240);
+    --primary-300: oklch(0.50 0.20 240);
+    --primary-400: oklch(0.55 0.22 240);
+    --primary-500: oklch(0.65 0.20 240); /* Main primary - lighter for dark mode */
+    --primary-600: oklch(0.70 0.22 240);
+
+    /* ============================================
+       Semantic Color Scales - Dark Mode
+       ============================================ */
+
+    /* Success Color Scale (Dark Mode) - Green (Hue 142) */
+    --success-100: oklch(0.40 0.15 142);
+    --success-200: oklch(0.45 0.18 142);
+    --success-300: oklch(0.50 0.20 142);
+    --success-400: oklch(0.55 0.22 142);
+    --success-500: oklch(0.65 0.20 142);
+    --success-600: oklch(0.70 0.22 142);
+
+    /* Warning Color Scale (Dark Mode) - Orange (Hue 65) */
+    --warning-100: oklch(0.50 0.15 65);
+    --warning-200: oklch(0.55 0.18 65);
+    --warning-300: oklch(0.60 0.20 65);
+    --warning-400: oklch(0.65 0.22 65);
+    --warning-500: oklch(0.75 0.15 65);
+    --warning-600: oklch(0.80 0.18 65);
+
+    /* Destructive Color Scale (Dark Mode) - Red (Hue 25) */
+    --danger-100: oklch(0.40 0.15 25);
+    --danger-200: oklch(0.45 0.18 25);
+    --danger-300: oklch(0.50 0.20 25);
+    --danger-400: oklch(0.55 0.22 25);
+    --danger-500: oklch(0.65 0.15 25);
+    --danger-600: oklch(0.70 0.18 25);
+
+    /* Info Color Scale (Dark Mode) - Cyan/Teal (Hue 200) */
+    --info-100: oklch(0.40 0.15 200);
+    --info-200: oklch(0.45 0.18 200);
+    --info-300: oklch(0.50 0.20 200);
+    --info-400: oklch(0.55 0.22 200);
+    --info-500: oklch(0.65 0.15 200);
+    --info-600: oklch(0.70 0.18 200);
+
+    /* ============================================
+       System Color Mappings - Dark Mode
+       ============================================ */
+
+    /* Primary Colors - Mapped to color scales */
+    --primary: var(--primary-500);
+    --primary-foreground: oklch(0.98 0 0); /* Light text for contrast */
+    --primary-hover: var(--primary-400);
+    --ring: var(--primary-500); /* Focus ring uses primary color */
+
+    /* Semantic Colors - Mapped to color scales */
+    --success: var(--success-500);
+    --success-foreground: oklch(0.98 0 0);
+
+    --warning: var(--warning-500);
+    --warning-foreground: oklch(0.985 0 0);
+
+    --destructive: var(--danger-500);
+    --destructive-foreground: oklch(0.98 0 0);
+
+    --info: var(--info-500);
+    --info-foreground: oklch(0.98 0 0);
+
     /* Additional variables from index.css */
     --background: oklch(0.145 0 0);
     --foreground: oklch(0.985 0 0);
@@ -298,17 +756,6 @@
     --button-shadow: 0 1px 0 0 rgba(255,255,255,0.15) inset, 0 1px 1px 0 rgba(0,0,0,0.075);
 }
 
-@layer base {
-  * {
-    @apply border-border outline-ring/50;
-    }
-  body {
-    @apply font-sans bg-background text-foreground;
-    }
-  html {
-    @apply font-sans;
-    }
-}
 
 @layer utilities {
   @keyframes radio-pulse {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nqlib/nqui",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "description": "A React component library with enhanced UI components and developer tools",
   "type": "module",
   "main": "./dist/nqui.cjs.js",
@@ -95,8 +95,12 @@
     "html2canvas-pro": "^1.6.3",
     "input-otp": "^1.4.2",
     "lucide-react": "^0.562.0",
+    "minimist": "^1.2.8",
     "next-themes": "^0.4.6",
     "package": "^1.0.1",
+    "postcss": "^8.4.0",
+    "postcss-discard-comments": "^7.0.0",
+    "postcss-import": "^16.0.0",
     "radix-ui": "^1.4.3",
     "react": "^19.2.0",
     "react-day-picker": "^9.13.0",

package/scripts/build-styles.js

@@ -157,16 +157,6 @@ function extractStandaloneCSS() {
  * IMPORTANT: This file does NOT include Tailwind CSS imports or framework-specific directives.
  * You must have Tailwind CSS configured in your project and add the appropriate imports.
  *
- * For Next.js with Tailwind CSS v4:
- *   @import "tailwindcss";
- *   @source "./**/*.{js,ts,jsx,tsx,mdx}";
- *   @source "../node_modules/@nqlib/nqui/dist/**/*.js";
- *   @import "@nqlib/nqui/styles";
- *
- * For Vite with Tailwind CSS v4:
- *   @import "tailwindcss";
- *   @import "@nqlib/nqui/styles";
- *
  * This file includes:
  * - All CSS variables (--primary, --background, --foreground, etc.)
  * - Complete color scales (100-600) for all semantic colors

package/scripts/examples/nextjs-layout.tsx

@@ -1,6 +1,8 @@
 import type { Metadata } from "next";
 import { ThemeProvider } from "next-themes";
 import "./globals.css";
+// Note: Make sure globals.css imports nqui.css (via nqui-setup.css content)
+// Required dependencies: npm install @nqlib/nqui tw-animate-css next-themes
 
 export const metadata: Metadata = {
   title: "nqui Example App",