gladvn 0.2.14

package/dist/lib/types.d.ts

@@ -0,0 +1,4 @@
+export type Size = "sm" | "md" | "lg";
+export type Color = "primary" | "secondary" | "destructive" | "success" | "warning" | "info" | "tertiary" | "muted" | "accent";
+export type Variant = "solid" | "outline" | "ghost" | "soft" | "link";
+//# sourceMappingURL=types.d.ts.map

package/dist/lib/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/lib/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEtC,MAAM,MAAM,KAAK,GACb,SAAS,GACT,WAAW,GACX,aAAa,GACb,SAAS,GACT,SAAS,GACT,MAAM,GACN,UAAU,GACV,OAAO,GACP,QAAQ,CAAC;AAEb,MAAM,MAAM,OAAO,GAAG,OAAO,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,MAAM,CAAC"}

package/dist/lib/utils.d.ts

@@ -0,0 +1,3 @@
+import { ClassValue } from 'clsx';
+export declare function cn(...inputs: ClassValue[]): string;
+//# sourceMappingURL=utils.d.ts.map

package/dist/lib/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/lib/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,UAAU,EAAE,MAAM,MAAM,CAAC;AAG7C,wBAAgB,EAAE,CAAC,GAAG,MAAM,EAAE,UAAU,EAAE,UAEzC"}

package/dist/preset.d.ts

@@ -0,0 +1,18 @@
+export * from './components/macro/accordion-preset';
+export * from './components/macro/avatar-preset';
+export * from './components/macro/breadcrumb-preset';
+export * from './components/macro/carousel-preset';
+export * from './components/macro/checkbox-preset';
+export * from './components/macro/combobox-preset';
+export * from './components/macro/field-preset';
+export * from './components/macro/input-otp-preset';
+export * from './components/macro/input-preset';
+export * from './components/macro/pagination-preset';
+export * from './components/macro/progress-preset';
+export * from './components/macro/radio-group-preset';
+export * from './components/macro/select-preset';
+export * from './components/macro/slider-preset';
+export * from './components/macro/switch-preset';
+export * from './components/macro/tabs-preset';
+export * from './components/macro/textarea-preset';
+//# sourceMappingURL=preset.d.ts.map

package/dist/preset.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"preset.d.ts","sourceRoot":"","sources":["../src/preset.ts"],"names":[],"mappings":"AAAA,cAAc,qCAAqC,CAAC;AACpD,cAAc,kCAAkC,CAAC;AACjD,cAAc,sCAAsC,CAAC;AACrD,cAAc,oCAAoC,CAAC;AACnD,cAAc,oCAAoC,CAAC;AACnD,cAAc,oCAAoC,CAAC;AACnD,cAAc,iCAAiC,CAAC;AAChD,cAAc,qCAAqC,CAAC;AACpD,cAAc,iCAAiC,CAAC;AAChD,cAAc,sCAAsC,CAAC;AACrD,cAAc,oCAAoC,CAAC;AACnD,cAAc,uCAAuC,CAAC;AACtD,cAAc,kCAAkC,CAAC;AACjD,cAAc,kCAAkC,CAAC;AACjD,cAAc,kCAAkC,CAAC;AACjD,cAAc,gCAAgC,CAAC;AAC/C,cAAc,oCAAoC,CAAC"}

package/dist/test/setup.d.ts

@@ -0,0 +1 @@
+//# sourceMappingURL=setup.d.ts.map

package/dist/test/setup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"setup.d.ts","sourceRoot":"","sources":["../../src/test/setup.ts"],"names":[],"mappings":"AAAA,OAAO,2BAA2B,CAAC"}

package/llms.txt

@@ -0,0 +1,74 @@
+# gladcn UI - AI Guidelines
+
+You are an AI Coding Assistant helping a developer use the `gladcn` UI library. 
+`gladcn` is a React component library built on top of Radix UI and Tailwind CSS, focusing on beautiful, accessible, and highly composable components.
+
+Follow these strict guidelines when generating or modifying code that uses `gladcn`:
+
+## 1. Imports
+- **Always** import components directly from the package root:
+  `import { Button, Card, Dialog } from "@duongy96/gladcn";`
+- **Never** import from internal paths like `@duongy96/gladcn/dist/...` or `src/components/ui/...`.
+
+## 2. Composition over Configuration
+`gladcn` heavily uses a composable architecture. When building complex UI, always use the provided sub-components rather than passing large configuration objects.
+
+**Correct (Composition):**
+```tsx
+import { Card, CardHeader, CardTitle, CardContent } from "@duongy96/gladcn";
+
+<Card>
+  <CardHeader>
+    <CardTitle>Hello World</CardTitle>
+  </CardHeader>
+  <CardContent>
+    Some content here.
+  </CardContent>
+</Card>
+```
+
+**Incorrect (Do not hallucinate props):**
+```tsx
+// ❌ DO NOT DO THIS
+<Card title="Hello World" content="Some content here" />
+```
+
+## 3. Form Fields
+When building forms, use the `Field` wrapper to automatically handle accessibility, labels, and error messages.
+```tsx
+import { Field, FieldLabel, FieldContent, FieldError, Input } from "@duongy96/gladcn";
+
+<Field error={errors.email?.message}>
+  <FieldLabel>Email Address</FieldLabel>
+  <FieldContent>
+    <Input type="email" placeholder="name@example.com" />
+  </FieldContent>
+  <FieldError>{errors.email?.message}</FieldError>
+</Field>
+```
+
+## 4. Styling
+- Components are fully styled by default.
+- If you need to override or extend styles, pass Tailwind CSS classes via the `className` prop.
+- Example: `<Button className="w-full mt-4" variant="solid" color="primary">Submit</Button>`
+
+## 5. Overlay Components (Dialog, Popover, Sheet, DropdownMenu)
+Overlay components are unmounted by default and use portals.
+Always structure them with their respective Trigger and Content wrappers.
+```tsx
+<Dialog>
+  <DialogTrigger>Open</DialogTrigger>
+  <DialogContent>
+    <DialogHeader>
+      <DialogTitle>Title</DialogTitle>
+    </DialogHeader>
+    Content
+  </DialogContent>
+</Dialog>
+```
+
+## 6. Icons
+`gladcn` does not bundle an icon library by default, but relies on standard SVG icons (like `lucide-react`). When adding icons inside components like `Button` or `Empty`, use standard SVG elements or Lucide components.
+
+---
+*Note to AI: Always prioritize reading the JSDoc/TSDoc definitions of the imported components if you are unsure of the props.*

package/package.json

@@ -0,0 +1,117 @@
+{
+  "name": "gladvn",
+  "version": "0.2.14",
+  "type": "module",
+  "description": "DO NOT 'npm install'. Use 'npx gladvn init' instead! A highly composable React component library built with Tailwind CSS.",
+  "keywords": [
+    "react",
+    "components",
+    "ui",
+    "shadcn",
+    "tailwindcss",
+    "radix-ui"
+  ],
+  "license": "MIT",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "bin": {
+    "gladcn": "bin/cli.js"
+  },
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    },
+    "./gladcn.css": "./src/styles/gladcn.css",
+    "./tokens.css": "./src/styles/tokens.css"
+  },
+  "files": [
+    "dist",
+    "src",
+    "bin",
+    "scripts",
+    "llms.txt"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "oxlint",
+    "preview": "vite preview",
+    "postinstall": "node scripts/postinstall.cjs || true",
+    "prepublishOnly": "npm run build",
+    "build:app": "vite build -c vite.config.app.ts",
+    "test": "vitest run",
+    "prepare": "husky"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18",
+    "tailwindcss": ">=4"
+  },
+  "peerDependenciesMeta": {
+    "tailwindcss": {
+      "optional": false
+    }
+  },
+  "dependencies": {
+    "@base-ui/react": "^1.6.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
+    "date-fns": "^4.4.0",
+    "embla-carousel-react": "^8.6.0",
+    "input-otp": "^1.4.2",
+    "lucide-react": "^1.24.0",
+    "next-themes": "^0.4.6",
+    "react-day-picker": "^10.0.1",
+    "react-resizable-panels": "^4.12.1",
+    "recharts": "^3.9.2",
+    "shiki": "^4.3.1",
+    "sonner": "^2.0.7",
+    "tailwind-merge": "^3.6.0",
+    "tw-animate-css": "^1.4.0",
+    "vaul": "^1.1.2"
+  },
+  "devDependencies": {
+    "@hookform/resolvers": "^5.4.0",
+    "@playwright/test": "^1.61.1",
+    "@radix-ui/react-dialog": "^1.1.18",
+    "@tailwindcss/vite": "^4.3.1",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/node": "^24.13.2",
+    "@types/react": "^19.2.17",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^6.0.2",
+    "husky": "^9.1.7",
+    "jsdom": "^29.1.1",
+    "lint-staged": "^16.4.0",
+    "oxlint": "^1.69.0",
+    "react": "^19.2.7",
+    "react-dom": "^19.2.7",
+    "react-hook-form": "^7.80.0",
+    "tailwindcss": "^4.3.1",
+    "ts-morph": "^28.0.0",
+    "typescript": "~6.0.2",
+    "vite": "^8.1.0",
+    "vite-plugin-dts": "^5.0.3",
+    "vitest": "^4.1.9",
+    "zod": "^4.4.3"
+  },
+  "lint-staged": {
+    "*.{ts,tsx}": [
+      "oxlint"
+    ]
+  }
+}

package/scripts/add-icononly-prop.ts

@@ -0,0 +1,84 @@
+import { Project, SyntaxKind, JsxElement, JsxSelfClosingElement } from "ts-morph";
+
+const project = new Project({
+  tsConfigFilePath: "tsconfig.json",
+});
+
+const sourceFiles = project.getSourceFiles("src/**/*.tsx");
+
+let changed = 0;
+
+for (const sf of sourceFiles) {
+  let fileChanged = false;
+
+  const jsxElements = sf.getDescendantsOfKind(SyntaxKind.JsxElement);
+  
+  for (const jsx of jsxElements) {
+    const opening = jsx.getOpeningElement();
+    const tagName = opening.getTagNameNode().getText();
+    
+    if (tagName === "Button") {
+      // check if it already has iconOnly
+      const hasIconOnly = opening.getAttributes().some(attr => {
+        if (attr.getKind() === SyntaxKind.JsxAttribute) {
+          return attr.asKind(SyntaxKind.JsxAttribute)?.getNameNode().getText() === "iconOnly";
+        }
+        return false;
+      });
+      
+      // also check if it has data-icon="true" manually passed
+      const hasDataIcon = opening.getAttributes().some(attr => {
+        if (attr.getKind() === SyntaxKind.JsxAttribute) {
+          return attr.asKind(SyntaxKind.JsxAttribute)?.getNameNode().getText() === "data-icon";
+        }
+        return false;
+      });
+      
+      if (!hasIconOnly && !hasDataIcon) {
+        // check children
+        const children = jsx.getJsxChildren();
+        // filter out whitespace text
+        const significantChildren = children.filter(c => {
+          if (c.getKind() === SyntaxKind.JsxText) {
+            return c.getText().trim() !== "";
+          }
+          if (c.getKind() === SyntaxKind.JsxExpression) {
+             // Sometimes it's a comment { /* comment */ }, ignore empty expressions if no actual elements.
+             // But actually an expression like {icon} might be an icon.
+             // Let's assume expressions might be text, so we skip auto-adding if there are expressions unless it's just one expression.
+             // Actually, to be safe, only add if the child is explicitly an Icon component.
+          }
+          return true;
+        });
+        
+        if (significantChildren.length === 1) {
+          const child = significantChildren[0];
+          let isIcon = false;
+          
+          if (child.getKind() === SyntaxKind.JsxElement) {
+             const childTag = child.asKind(SyntaxKind.JsxElement)?.getOpeningElement().getTagNameNode().getText();
+             if (childTag && (childTag.endsWith("Icon") || childTag === "svg")) isIcon = true;
+          } else if (child.getKind() === SyntaxKind.JsxSelfClosingElement) {
+             const childTag = child.asKind(SyntaxKind.JsxSelfClosingElement)?.getTagNameNode().getText();
+             if (childTag && (childTag.endsWith("Icon") || childTag === "svg")) isIcon = true;
+          } else if (child.getKind() === SyntaxKind.JsxExpression) {
+             // {icon} or something. We can't safely know if it's an icon. So skip.
+          }
+          
+          if (isIcon) {
+            opening.addAttribute({ name: "iconOnly" });
+            fileChanged = true;
+          }
+        }
+      }
+    }
+  }
+  
+  if (fileChanged) {
+    sf.saveSync();
+    changed++;
+    console.log("Updated", sf.getFilePath());
+  }
+}
+
+console.log(`Updated ${changed} files.`);

package/scripts/audit-best-practices.ts

@@ -0,0 +1,114 @@
+import { Project, SyntaxKind } from "ts-morph";
+import * as fs from "fs";
+import * as path from "path";
+
+const project = new Project({
+  tsConfigFilePath: "tsconfig.json",
+});
+
+const sourceFiles = project.getSourceFiles("src/components/micro/*.tsx");
+
+interface Violation {
+  file: string;
+  type: string;
+  message: string;
+  line: number;
+}
+
+const violations: Violation[] = [];
+
+// Regular expressions for anti-patterns
+const MAGIC_CSS_REGEX =
+  /\[&_?[a-zA-Z0-9\->\+~]\]|\*:\[?[a-zA-Z0-9\->\+~]\]?|has-\[>?[a-zA-Z0-9\->\+~]\]/;
+const ARBITRARY_VAR_REGEX = /var\(--[a-zA-Z0-9-]+\)|-\[--[a-zA-Z0-9-]+\]/;
+// Exclude semantic colors (primary, muted, etc.), find raw colors
+const HARDCODED_COLOR_REGEX =
+  /(bg|text|border|ring)-(slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-[1-9]00/;
+
+for (const sf of sourceFiles) {
+  const fileName = sf.getBaseName();
+
+  // 1. Check for "default" variants/sizes statically
+  const text = sf.getFullText();
+  const lines = text.split("\n");
+
+  lines.forEach((line, index) => {
+    const lineNum = index + 1;
+
+    // Check for Magic CSS
+    if (MAGIC_CSS_REGEX.test(line) && !line.includes("eslint-disable")) {
+      // Small exception for specific radix states if needed, but let's flag them all first
+      violations.push({
+        file: fileName,
+        type: "Magic CSS",
+        message:
+          "Found descendant/magic CSS combinator: " +
+          line.trim().substring(0, 50),
+        line: lineNum,
+      });
+    }
+
+    // Check for Arbitrary Variables
+    if (
+      ARBITRARY_VAR_REGEX.test(line) &&
+      !line.includes("radix-") &&
+      !line.includes("collapsible-") &&
+      !line.includes("accordion-")
+    ) {
+      violations.push({
+        file: fileName,
+        type: "Arbitrary CSS Variable",
+        message:
+          "Found arbitrary CSS variable not from Headless UI: " +
+          line.trim().substring(0, 50),
+        line: lineNum,
+      });
+    }
+
+    // Check for Hardcoded Colors
+    if (HARDCODED_COLOR_REGEX.test(line)) {
+      violations.push({
+        file: fileName,
+        type: "Hardcoded Color",
+        message:
+          "Found raw Tailwind color instead of semantic token: " +
+          line.trim().substring(0, 50),
+        line: lineNum,
+      });
+    }
+
+    // Check for default variants
+    if (/(variant|size|color):\s*["']default["']/.test(line)) {
+      violations.push({
+        file: fileName,
+        type: "Default Variant",
+        message: "Found 'default' as a variant/size/color value",
+        line: lineNum,
+      });
+    }
+  });
+}
+
+// Group violations by file
+const grouped: Record<string, Violation[]> = {};
+for (const v of violations) {
+  if (!grouped[v.file]) grouped[v.file] = [];
+  grouped[v.file].push(v);
+}
+
+console.log("=== COMPONENT BEST PRACTICES AUDIT ===");
+if (violations.length === 0) {
+  console.log(
+    "✅ All components passed the Best Practices Audit with 100% compliance!",
+  );
+} else {
+  console.log(
+    `❌ Found ${violations.length} violations across ${Object.keys(grouped).length} components.\n`,
+  );
+  for (const file of Object.keys(grouped)) {
+    console.log(`\n📄 ${file}`);
+    for (const v of grouped[file]) {
+      console.log(`  - [${v.type}] Line ${v.line}: ${v.message}`);
+    }
+  }
+}