@nqlib/nqui 0.1.0

package/package.json

@@ -0,0 +1,128 @@
+{
+  "name": "@nqlib/nqui",
+  "version": "0.1.0",
+  "description": "A React component library with enhanced UI components and developer tools",
+  "type": "module",
+  "main": "./dist/nqui.cjs.js",
+  "module": "./dist/nqui.es.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/nqui.es.js",
+      "require": "./dist/nqui.cjs.js"
+    },
+    "./styles": {
+      "import": "./dist/styles.css",
+      "require": "./dist/styles.css",
+      "default": "./dist/styles.css"
+    },
+    "./debug.css": "./dist/nqui.css"
+  },
+  "files": [
+    "dist",
+    "scripts",
+    "README.md",
+    "INSTALLATION.md"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "publishConfig": {
+    "registry": "https://registry.npmjs.com",
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/nqlib/nqui.git"
+  },
+  "keywords": [
+    "ui",
+    "components",
+    "react",
+    "typescript",
+    "nextjs",
+    "vite",
+    "tailwind",
+    "shadcn",
+    "radix-ui"
+  ],
+  "author": "",
+  "license": "MIT",
+  "scripts": {
+    "dev": "vite",
+    "build": "npm run build:lib",
+    "build:lib": "vite build --mode library && npm run build:types && npm run build:styles && npm run copy:css",
+    "build:types": "tsc -p tsconfig.lib.json",
+    "build:styles": "node scripts/build-styles.js",
+    "copy:css": "cp src/components/debug/debug.css dist/nqui.css",
+    "build:app": "tsc -b && vite build",
+    "build:all": "npm run build:lib && npm run build:app",
+    "prepublishOnly": "npm run build:lib",
+    "publish:github": "npm publish --registry=https://npm.pkg.github.com",
+    "publish:npm": "node scripts/publish-npmjs.js",
+    "publish:both": "npm run publish:github && npm run publish:npm",
+    "lint": "eslint .",
+    "preview": "vite preview",
+    "preview:app": "vite preview --outDir dist-app",
+    "init-debug-css": "node scripts/init-debug-css.js"
+  },
+  "bin": {
+    "nqui": "./scripts/init-css.js",
+    "nqui-init-css": "./scripts/init-css.js",
+    "nqui-init-debug": "./scripts/init-debug-css.js"
+  },
+  "dependencies": {
+    "@base-ui/react": "^1.0.0",
+    "@fontsource-variable/inter": "^5.2.8",
+    "@hugeicons/core-free-icons": "^3.1.1",
+    "@hugeicons/react": "^1.1.4",
+    "@radix-ui/react-avatar": "^1.1.11",
+    "@radix-ui/react-collapsible": "^1.1.12",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@radix-ui/react-label": "^2.1.8",
+    "@radix-ui/react-separator": "^1.1.8",
+    "@radix-ui/react-slot": "^1.2.4",
+    "@radix-ui/react-switch": "^1.2.6",
+    "@radix-ui/react-tooltip": "^1.2.8",
+    "@tailwindcss/vite": "^4.1.17",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
+    "date-fns": "^4.1.0",
+    "embla-carousel-react": "^8.6.0",
+    "html2canvas-pro": "^1.6.3",
+    "input-otp": "^1.4.2",
+    "lucide-react": "^0.562.0",
+    "next-themes": "^0.4.6",
+    "package": "^1.0.1",
+    "radix-ui": "^1.4.3",
+    "react": "^19.2.0",
+    "react-day-picker": "^9.13.0",
+    "react-dom": "^19.2.0",
+    "react-resizable-panels": "^4.2.1",
+    "react-router-dom": "^7.11.0",
+    "recharts": "^2.15.4",
+    "sonner": "^2.0.7",
+    "tailwind-merge": "^3.4.0",
+    "tailwindcss": "^4.1.17",
+    "tw-animate-css": "^1.4.0",
+    "vaul": "^1.1.2"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.1",
+    "@types/node": "^24.10.1",
+    "@types/react": "^19.2.5",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.1.1",
+    "eslint": "^9.39.1",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.4.24",
+    "globals": "^16.5.0",
+    "shadcn": "^3.6.2",
+    "typescript": "~5.9.3",
+    "typescript-eslint": "^8.46.4",
+    "vite": "^7.2.4"
+  }
+}

package/scripts/build-styles.js

@@ -0,0 +1,205 @@
+#!/usr/bin/env node
+
+/**
+ * Build script to extract CSS for package export
+ *
+ * Generates dist/styles.css with only nqui CSS variables (no framework-specific directives)
+ * This file is used for package export: import "@nqlib/nqui/styles"
+ */
+
+import { readFileSync, writeFileSync, existsSync } from 'fs';
+import { join, dirname, resolve } from 'path';
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+// Get the project root
+const projectRoot = resolve(__dirname, '..');
+const indexCssPath = join(projectRoot, 'src', 'index.css');
+const colorsCssPath = join(projectRoot, 'src', 'styles', 'colors.css');
+const outputPath = join(projectRoot, 'dist', 'styles.css');
+
+function extractStandaloneCSS() {
+  // Read the source CSS files
+  if (!existsSync(indexCssPath)) {
+    throw new Error(`Source CSS file not found: ${indexCssPath}`);
+  }
+  if (!existsSync(colorsCssPath)) {
+    throw new Error(`Colors CSS file not found: ${colorsCssPath}`);
+  }
+
+  let indexCss = readFileSync(indexCssPath, 'utf-8');
+  let colorsCss = readFileSync(colorsCssPath, 'utf-8');
+
+  // Extract :root and .dark blocks from colors.css (they're wrapped in @layer base)
+  const colorsRootMatch = colorsCss.match(/@layer base\s*\{\s*:root\s*\{([^}]+(?:\{[^}]*\}[^}]*)*)\}\s*\.dark\s*\{([^}]+(?:\{[^}]*\}[^}]*)*)\}\s*\}/s);
+
+  let colorsRootContent = '';
+  let colorsDarkContent = '';
+
+  if (colorsRootMatch) {
+    colorsRootContent = colorsRootMatch[1].trim();
+    colorsDarkContent = colorsRootMatch[2].trim();
+  } else {
+    // Fallback: try to extract without @layer base wrapper
+    const rootMatch = colorsCss.match(/:root\s*\{([^}]+(?:\{[^}]*\}[^}]*)*)\}/s);
+    const darkMatch = colorsCss.match(/\.dark\s*\{([^}]+(?:\{[^}]*\}[^}]*)*)\}/s);
+    if (rootMatch) colorsRootContent = rootMatch[1].trim();
+    if (darkMatch) colorsDarkContent = darkMatch[1].trim();
+  }
+
+  // Remove imports that require build tools (users should handle these in their own setup)
+  indexCss = indexCss
+    .replace(/@import\s+["']tailwindcss["'];?\s*\n/g, '')
+    .replace(/@import\s+["']tw-animate-css["'];?\s*\n/g, '')
+    .replace(/@import\s+["']shadcn\/tailwind\.css["'];?\s*\n/g, '')
+    .replace(/@import\s+["']@fontsource-variable\/inter["'];?\s*\n/g, '')
+    .replace(/@import\s+["']\.\/styles\/colors\.css["'];?\s*\n/g, '')
+    .replace(/\/\*\s*Import enhanced color system\s*\*\//g, '')
+    .replace(/@source\s+[^;]+;?\s*\n/g, '')
+    .replace(/@custom-variant\s+[^;]+;?\s*\n/g, '');
+
+  // Extract :root and .dark blocks from index.css
+  const indexRootMatch = indexCss.match(/:root\s*\{([^}]+(?:\{[^}]*\}[^}]*)*)\}/s);
+  const indexDarkMatch = indexCss.match(/\.dark\s*\{([^}]+(?:\{[^}]*\}[^}]*)*)\}/s);
+
+  let indexRootContent = '';
+  let indexDarkContent = '';
+
+  if (indexRootMatch) indexRootContent = indexRootMatch[1].trim();
+  if (indexDarkMatch) indexDarkContent = indexDarkMatch[1].trim();
+
+  // Merge :root blocks (colors.css first, then index.css)
+  const mergedRootContent = colorsRootContent
+    ? colorsRootContent + '\n\n    /* Additional variables from index.css */\n    ' + indexRootContent
+    : indexRootContent;
+
+  // Merge .dark blocks (colors.css first, then index.css)
+  const mergedDarkContent = colorsDarkContent
+    ? colorsDarkContent + '\n\n    /* Additional variables from index.css */\n    ' + indexDarkContent
+    : indexDarkContent;
+
+  // Replace :root and .dark in index.css with merged versions
+  if (indexRootMatch) {
+    indexCss = indexCss.replace(/:root\s*\{[^}]+(?:\{[^}]*\}[^}]*)*\}/s, `:root {\n    ${mergedRootContent}\n}`);
+  }
+
+  if (indexDarkMatch) {
+    indexCss = indexCss.replace(/\.dark\s*\{[^}]+(?:\{[^}]*\}[^}]*)*\}/s, `.dark {\n    ${mergedDarkContent}\n}`);
+  }
+
+  // Remove duplicate @layer base blocks
+  const lines = indexCss.split('\n');
+  let inLayerBase = false;
+  let layerBaseStart = -1;
+  let braceCount = 0;
+  const layerBaseBlocks = [];
+
+  for (let i = 0; i < lines.length; i++) {
+    const line = lines[i];
+    if (line.includes('@layer base')) {
+      if (!inLayerBase) {
+        inLayerBase = true;
+        layerBaseStart = i;
+        braceCount = (line.match(/\{/g) || []).length - (line.match(/\}/g) || []).length;
+      } else {
+        braceCount += (line.match(/\{/g) || []).length - (line.match(/\}/g) || []).length;
+      }
+    } else if (inLayerBase) {
+      braceCount += (line.match(/\{/g) || []).length - (line.match(/\}/g) || []).length;
+      if (braceCount === 0) {
+        layerBaseBlocks.push({ start: layerBaseStart, end: i });
+        inLayerBase = false;
+      }
+    }
+  }
+
+  // If we found duplicate @layer base blocks, remove all but the first
+  if (layerBaseBlocks.length > 1) {
+    const firstBlock = layerBaseBlocks[0];
+    const firstBlockContent = lines.slice(firstBlock.start, firstBlock.end + 1).join('\n');
+
+    const allIdentical = layerBaseBlocks.every(block => {
+      const blockContent = lines.slice(block.start, block.end + 1).join('\n');
+      return blockContent === firstBlockContent;
+    });
+
+    if (allIdentical) {
+      for (let i = layerBaseBlocks.length - 1; i > 0; i--) {
+        const block = layerBaseBlocks[i];
+        lines.splice(block.start, block.end - block.start + 1);
+      }
+      indexCss = lines.join('\n');
+    }
+  }
+
+  // Add comment before :root if it doesn't already have one
+  let combinedCss = indexCss;
+  if (combinedCss.includes(':root') && !combinedCss.includes('nqui Color System')) {
+    const rootIndex = combinedCss.indexOf(':root');
+    combinedCss = combinedCss.slice(0, rootIndex) +
+                  '/* ============================================\n' +
+                  '   nqui Color System & Design Tokens\n' +
+                  '   ============================================ */\n\n' +
+                  combinedCss.slice(rootIndex);
+  }
+
+  // Clean up extra blank lines
+  combinedCss = combinedCss.replace(/\n{4,}/g, '\n\n\n');
+
+  // Add header comment
+  const header = `/* 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 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
+ * - Light and dark mode support
+ * - Base layer styles
+ * - Utility animations
+ *
+ * Generated by: npm run build:lib
+ * Do not edit manually
+ */
+
+`;
+
+  return header + combinedCss;
+}
+
+function main() {
+  try {
+    // Ensure dist directory exists
+    const distDir = dirname(outputPath);
+    if (!existsSync(distDir)) {
+      throw new Error(`Dist directory not found: ${distDir}. Run build first.`);
+    }
+
+    // Extract and write CSS
+    const standaloneCss = extractStandaloneCSS();
+    writeFileSync(outputPath, standaloneCss, 'utf-8');
+    console.log(`✅ Generated ${outputPath}`);
+  } catch (error) {
+    console.error('❌ Error generating styles.css:', error.message);
+    process.exit(1);
+  }
+}
+
+main();
+

package/scripts/examples/nextjs-layout.tsx

@@ -0,0 +1,30 @@
+import type { Metadata } from "next";
+import { ThemeProvider } from "next-themes";
+import "./globals.css";
+
+export const metadata: Metadata = {
+  title: "nqui Example App",
+  description: "Example app using nqui component library",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en" suppressHydrationWarning>
+      <body>
+        <ThemeProvider
+          attribute="class"
+          defaultTheme="system"
+          enableSystem
+          disableTransitionOnChange
+        >
+          {children}
+        </ThemeProvider>
+      </body>
+    </html>
+  );
+}
+

package/scripts/examples/nextjs-page.tsx

@@ -0,0 +1,66 @@
+"use client";
+
+import { Button } from "@nqlib/nqui";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@nqlib/nqui";
+import { Input } from "@nqlib/nqui";
+import { Label } from "@nqlib/nqui";
+import { Checkbox } from "@nqlib/nqui";
+import { Separator } from "@nqlib/nqui";
+
+export default function Home() {
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-background p-8">
+      <main className="w-full max-w-2xl space-y-8">
+        <div className="text-center space-y-2">
+          <h1 className="text-4xl font-bold tracking-tight">
+            Welcome to nqui
+          </h1>
+          <p className="text-muted-foreground">
+            A React component library with enhanced UI components
+          </p>
+        </div>
+
+        <Card>
+          <CardHeader>
+            <CardTitle>Example Form</CardTitle>
+            <CardDescription>
+              This demonstrates some of the nqui components
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <div className="space-y-2">
+              <Label htmlFor="name">Name</Label>
+              <Input id="name" placeholder="Enter your name" />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="email">Email</Label>
+              <Input id="email" type="email" placeholder="Enter your email" />
+            </div>
+            <Checkbox id="terms">
+              Accept terms and conditions
+            </Checkbox>
+            <Separator />
+            <div className="flex gap-2">
+              <Button variant="default">Submit</Button>
+              <Button variant="outline">Cancel</Button>
+              <Button variant="success">Success</Button>
+            </div>
+          </CardContent>
+        </Card>
+
+        <div className="text-center text-sm text-muted-foreground">
+          <p>
+            Edit <code className="rounded bg-muted px-1 py-0.5">app/page.tsx</code> to get started
+          </p>
+        </div>
+      </main>
+    </div>
+  );
+}
+