cooterlabs 1.0.2 → 2.1.0

package/bin/index.js

@@ -14,6 +14,116 @@ const __dirname = path.dirname(__filename);
 const cwd = process.cwd();
 
 const REGISTRY = {
+  alert: {
+    name: "Alert",
+    dependencies: ["lucide-react", "clsx", "tailwind-merge"],
+    dev_dependencies: [],
+  },
+  "action-sheet": {
+    name: "ActionSheet",
+    dependencies: ["@radix-ui/react-dialog", "clsx", "tailwind-merge"],
+    dev_dependencies: [],
+  },
+  breadcrumb: {
+    name: "Breadcrumb",
+    dependencies: ["lucide-react", "clsx", "tailwind-merge"],
+    dev_dependencies: [],
+  },
+  "button-group": {
+    name: "ButtonGroup",
+    dependencies: ["clsx", "tailwind-merge"],
+    dev_dependencies: [],
+  },
+  "context-menu": {
+    name: "ContextMenu",
+    dependencies: [
+      "@radix-ui/react-context-menu",
+      "lucide-react",
+      "clsx",
+      "tailwind-merge",
+    ],
+    dev_dependencies: [],
+  },
+  dialog: {
+    name: "Dialog",
+    dependencies: [
+      "@radix-ui/react-dialog",
+      "lucide-react",
+      "clsx",
+      "tailwind-merge",
+    ],
+    dev_dependencies: [],
+  },
+  dropdown: {
+    name: "Dropdown",
+    dependencies: [
+      "@radix-ui/react-dropdown-menu",
+      "lucide-react",
+      "clsx",
+      "tailwind-merge",
+    ],
+    dev_dependencies: [],
+  },
+  list: {
+    name: "List",
+    dependencies: ["lucide-react", "clsx", "tailwind-merge"],
+    dev_dependencies: [],
+  },
+  loader: {
+    name: "Loader",
+    dependencies: ["clsx", "tailwind-merge"],
+    dev_dependencies: [],
+  },
+  "navbar-bottom": {
+    name: "NavbarBottom",
+    dependencies: ["lucide-react", "clsx", "tailwind-merge"],
+    dev_dependencies: [],
+  },
+  "navbar-top": {
+    name: "NavbarTop",
+    dependencies: ["lucide-react", "clsx", "tailwind-merge"],
+    dev_dependencies: [],
+  },
+  "page-control": {
+    name: "PageControl",
+    dependencies: ["clsx", "tailwind-merge"],
+    dev_dependencies: [],
+  },
+  pagination: {
+    name: "Pagination",
+    dependencies: ["lucide-react", "clsx", "tailwind-merge"],
+    dev_dependencies: [],
+  },
+  progress: {
+    name: "Progress",
+    dependencies: ["@radix-ui/react-progress", "clsx", "tailwind-merge"],
+    dev_dependencies: [],
+  },
+  radio: {
+    name: "Radio",
+    dependencies: ["@radix-ui/react-radio-group", "clsx", "tailwind-merge"],
+    dev_dependencies: [],
+  },
+  stepper: {
+    name: "Stepper",
+    dependencies: ["lucide-react", "clsx", "tailwind-merge"],
+    dev_dependencies: [],
+  },
+  tabs: {
+    name: "Tabs",
+    dependencies: ["@radix-ui/react-tabs", "clsx", "tailwind-merge"],
+    dev_dependencies: [],
+  },
+  toggle: {
+    name: "Toggle",
+    dependencies: ["@radix-ui/react-switch", "clsx", "tailwind-merge"],
+    dev_dependencies: [],
+  },
+  tooltip: {
+    name: "Tooltip",
+    dependencies: ["@radix-ui/react-tooltip", "clsx", "tailwind-merge"],
+    dev_dependencies: [],
+  },
   button: {
     name: "Button",
     dependencies: [
@@ -56,12 +166,219 @@ const REGISTRY = {
   },
   checkbox: {
     name: "Checkbox",
-    dependencies: ["lucide-react", "clsx", "tailwind-merge"],
+    dependencies: [
+      "@radix-ui/react-checkbox",
+      "lucide-react",
+      "clsx",
+      "tailwind-merge",
+    ],
+    dev_dependencies: [],
+  },
+  select: {
+    name: "Select",
+    dependencies: [
+      "@radix-ui/react-select",
+      "lucide-react",
+      "clsx",
+      "tailwind-merge",
+    ],
     dev_dependencies: [],
+    requires: ["input"], // select.tsx imports shared variants from ./input
   },
 };
 
+// Shared cn() helper scaffolded to src/lib/utils — components import it
+// from "../../lib/utils" instead of inlining it per file.
+const UTILS_TEMPLATE = fs.readFileSync(
+  path.join(__dirname, "../templates/_lib/utils.ts"),
+  "utf-8",
+);
+
 const THEMES = {
+  aeon: `@theme static {
+  /* ——— Aeon Product Design System ——— */
+  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
+
+  /* Semantic colors */
+  --color-background: #ffffff;
+  --color-foreground: #1c222a;
+  --color-card: #ffffff;
+  --color-card-foreground: #1c222a;
+  --color-popover: #ffffff;
+  --color-popover-foreground: #1c222a;
+  --color-primary: #0d3435;
+  --color-primary-foreground: #ffffff;
+  --color-secondary: #f4f5f6;
+  --color-secondary-foreground: #1c222a;
+  --color-muted: #e7e9ec;
+  --color-muted-foreground: #475569;
+  --color-accent: #f1f3f3;
+  --color-accent-foreground: #0a2b2b;
+  --color-destructive: #821717;
+  --color-destructive-foreground: #ffffff;
+  --color-border: #cbcfd5;
+  --color-input: #cbcfd5;
+  --color-ring: #0d3435;
+  --color-success: #14532d;
+  --color-success-foreground: #ffffff;
+  --color-info: #075985;
+  --color-info-foreground: #ffffff;
+  --color-warning: #713f12;
+  --color-warning-foreground: #ffffff;
+  --color-error: #991b1b;
+  --color-error-foreground: #ffffff;
+
+  /* Primitive scales */
+  --color-primary-50: #f1f3f3;
+  --color-primary-100: #e0e6e6;
+  --color-primary-200: #bcc9c9;
+  --color-primary-300: #93a8a8;
+  --color-primary-400: #577778;
+  --color-primary-500: #0f3d3e;
+  --color-primary-600: #0d3435;
+  --color-primary-700: #0a2b2b;
+  --color-primary-800: #082222;
+  --color-primary-900: #061819;
+  --color-grey-50: #f4f5f6;
+  --color-grey-100: #e7e9ec;
+  --color-grey-200: #cbcfd5;
+  --color-grey-300: #acb2bc;
+  --color-grey-400: #7e8896;
+  --color-grey-500: #475569;
+  --color-grey-600: #3c4859;
+  --color-grey-700: #323c4a;
+  --color-grey-800: #272f3a;
+  --color-grey-900: #1c222a;
+  --color-success-50: #f1f5f2;
+  --color-success-100: #e0e9e4;
+  --color-success-200: #bdcfc4;
+  --color-success-300: #95b2a0;
+  --color-success-400: #5a876c;
+  --color-success-500: #14532d;
+  --color-success-600: #114726;
+  --color-success-700: #0e3a20;
+  --color-success-800: #0b2e19;
+  --color-success-900: #082112;
+  --color-error-50: #f9f1f1;
+  --color-error-100: #f2e1e1;
+  --color-error-200: #e2bfbf;
+  --color-error-300: #d19898;
+  --color-error-400: #b85f5f;
+  --color-error-500: #991b1b;
+  --color-error-600: #821717;
+  --color-error-700: #6b1313;
+  --color-error-800: #540f0f;
+  --color-error-900: #3d0b0b;
+  --color-warning-50: #f6f3f1;
+  --color-warning-100: #ede6e0;
+  --color-warning-200: #d7c9bd;
+  --color-warning-300: #bfa994;
+  --color-warning-400: #9c7959;
+  --color-warning-500: #713f12;
+  --color-warning-600: #60360f;
+  --color-warning-700: #4f2c0d;
+  --color-warning-800: #3e230a;
+  --color-warning-900: #2d1907;
+  --color-info-50: #f0f5f8;
+  --color-info-100: #dfe9ef;
+  --color-info-200: #bad1dd;
+  --color-info-300: #8fb4c8;
+  --color-info-400: #518baa;
+  --color-info-500: #075985;
+  --color-info-600: #064c71;
+  --color-info-700: #053e5d;
+  --color-info-800: #04314a;
+  --color-info-900: #032435;
+
+  /* Typography — Aeon text ramp (text-h1 … text-c3, text-label, text-btn-*) */
+  --text-h1: 3rem;
+  --text-h1--line-height: 3.625rem;
+  --text-h1--font-weight: 600;
+  --text-h2: 2.5rem;
+  --text-h2--line-height: 3rem;
+  --text-h2--font-weight: 600;
+  --text-h3: 2rem;
+  --text-h3--line-height: 2.375rem;
+  --text-h3--font-weight: 600;
+  --text-h4: 1.75rem;
+  --text-h4--line-height: 2.125rem;
+  --text-h4--font-weight: 600;
+  --text-h5: 1.5rem;
+  --text-h5--line-height: 1.75rem;
+  --text-h5--font-weight: 600;
+  --text-s1: 1.125rem;
+  --text-s1--line-height: 1.75rem;
+  --text-s1--font-weight: 600;
+  --text-s2: 1rem;
+  --text-s2--line-height: 1.5rem;
+  --text-s2--font-weight: 600;
+  --text-b1: 1rem;
+  --text-b1--line-height: 1.5rem;
+  --text-b1--font-weight: 400;
+  --text-b2: 1rem;
+  --text-b2--line-height: 1.5rem;
+  --text-b2--font-weight: 500;
+  --text-b3: 0.875rem;
+  --text-b3--line-height: 1.25rem;
+  --text-b3--font-weight: 400;
+  --text-b4: 0.875rem;
+  --text-b4--line-height: 1.25rem;
+  --text-b4--font-weight: 500;
+  --text-c1: 0.75rem;
+  --text-c1--line-height: 1rem;
+  --text-c1--font-weight: 400;
+  --text-c2: 0.75rem;
+  --text-c2--line-height: 1rem;
+  --text-c2--font-weight: 500;
+  --text-c3: 0.625rem;
+  --text-c3--line-height: 0.875rem;
+  --text-c3--font-weight: 500;
+  --text-label: 0.75rem;
+  --text-label--line-height: 1rem;
+  --text-label--font-weight: 500;
+  --text-btn-giant: 1.125rem;
+  --text-btn-giant--line-height: 1.5rem;
+  --text-btn-giant--font-weight: 600;
+  --text-btn-large: 1rem;
+  --text-btn-large--line-height: 1.25rem;
+  --text-btn-large--font-weight: 600;
+  --text-btn-medium: 0.875rem;
+  --text-btn-medium--line-height: 1rem;
+  --text-btn-medium--font-weight: 600;
+  --text-btn-small: 0.75rem;
+  --text-btn-small--line-height: 1rem;
+  --text-btn-small--font-weight: 600;
+  --text-btn-tiny: 0.625rem;
+  --text-btn-tiny--line-height: 0.75rem;
+  --text-btn-tiny--font-weight: 600;
+
+  /* Radius scale — rounded-xxs … rounded-xl */
+  --radius-xxs: 0.25rem;
+  --radius-xs: 0.5rem;
+  --radius-sm: 0.75rem;
+  --radius-md: 1rem;
+  --radius-lg: 1.25rem;
+  --radius-xl: 1.5rem;
+
+  /* Elevation — shadow-100 … shadow-800 */
+  --shadow-100: 0 4px 4px -2px #13192714, 0 2px 4px -2px #1319271f;
+  --shadow-200: 0 8px 8px -4px #13192714, 0 4px 6px -4px #1319271f;
+  --shadow-300: 0 8px 16px -6px #13192714, 0 6px 8px -6px #1319271f;
+  --shadow-400: 0 8px 24px -4px #13192714, 0 6px 12px -6px #1319271f;
+  --shadow-500: 0 10px 32px -4px #1319271a, 0 6px 14px -6px #1319271f;
+  --shadow-600: 0 12px 42px -4px #1319271f, 0 8px 18px -6px #1319271f;
+  --shadow-700: 0 14px 64px -4px #1319271f, 0 8px 22px -6px #1319271f;
+  --shadow-800: 0 18px 88px -4px #13192724, 0 8px 28px -6px #1319271f;
+
+  /* Focus ring — shared by every interactive component (focus-visible:shadow-focus) */
+  --shadow-focus: 0px 0px 0px 3px #c2f5f6;
+}
+
+/* Alert auto-dismiss timeline */
+@keyframes alert-timer {
+  from { width: 100%; }
+  to { width: 0%; }
+}`,
   zinc: `:root {
   --background: 0 0% 100%;
   --foreground: 240 10% 3.9%;
@@ -226,24 +543,35 @@ const main = async () => {
   if (fs.existsSync(templatesDir)) {
     const dirs = fs
       .readdirSync(templatesDir)
+      .filter((f) => !f.startsWith("_")) // _lib etc. are support files, not components
       .filter((f) => fs.statSync(path.join(templatesDir, f)).isDirectory());
     if (dirs.length > 0) availableComponents = dirs;
   }
 
   if (command === "init") {
-    const response = await prompts({
-      type: "select",
-      name: "theme",
-      message: "Which theme would you like to use?",
-      choices: Object.keys(THEMES).map((t) => ({ title: t, value: t })),
-    });
-
-    if (!response.theme) {
-      console.log(chalk.red("❌ Theme selection cancelled."));
-      process.exit(1);
+    let theme = componentName; // support `cooterlabs init aeon`
+    if (!THEMES[theme]) {
+      const response = await prompts({
+        type: "select",
+        name: "theme",
+        message: "Which theme would you like to use?",
+        choices: Object.keys(THEMES).map((t) => ({
+          title: t === "aeon" ? "aeon (default)" : t,
+          value: t,
+        })),
+      });
+
+      if (!response.theme) {
+        console.log(chalk.red("❌ Theme selection cancelled."));
+        process.exit(1);
+      }
+      theme = response.theme;
     }
 
-    const themeCSS = THEMES[response.theme];
+    // aeon is a Tailwind v4 @theme block appended at top level;
+    // legacy themes are :root vars wrapped in @layer base.
+    const isV4Theme = theme === "aeon";
+    const themeCSS = THEMES[theme];
     let cssPath = path.join(cwd, "src", "index.css");
 
     if (env.framework === "next") {
@@ -277,24 +605,29 @@ const main = async () => {
       cssContent.includes("@tailwind base") ||
       cssContent.includes('@import "tailwindcss');
     if (!hasTailwindDirectives) {
-      cssContent = `@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n${cssContent}`;
+      cssContent = isV4Theme
+        ? `@import "tailwindcss";\n\n${cssContent}`
+        : `@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n${cssContent}`;
     }
 
-    if (
-      cssContent.includes(":root {") ||
-      cssContent.includes("--background:")
-    ) {
+    const themeBlock = isV4Theme
+      ? `\n${themeCSS}\n`
+      : `\n@layer base {\n${themeCSS}\n}\n`;
+
+    const hasExistingVars = isV4Theme
+      ? cssContent.includes("@theme")
+      : cssContent.includes(":root {") || cssContent.includes("--background:");
+
+    if (hasExistingVars) {
       console.log(
         chalk.yellow(
-          `⚠️  CSS variables may already exist in ${cssPath}. Please append them manually if needed:\n\n@layer base {\n${themeCSS}\n}\n`,
+          `⚠️  Theme variables may already exist in ${cssPath}. Please append them manually if needed:\n${themeBlock}`,
         ),
       );
     } else {
-      cssContent = `${cssContent}\n@layer base {\n${themeCSS}\n}\n`;
+      cssContent = `${cssContent}${themeBlock}`;
       fs.writeFileSync(cssPath, cssContent);
-      console.log(
-        chalk.green(`✅ Theme '${response.theme}' initialized in ${cssPath}`),
-      );
+      console.log(chalk.green(`✅ Theme '${theme}' initialized in ${cssPath}`));
     }
   } else if (command === "add") {
     let componentsToAdd = [];
@@ -328,12 +661,33 @@ const main = async () => {
       process.exit(1);
     }
 
+    // Pull in components required by selected ones (e.g. select imports from ./input)
+    for (const comp of [...componentsToAdd]) {
+      for (const req of REGISTRY[comp]?.requires || []) {
+        if (!componentsToAdd.includes(req)) componentsToAdd.push(req);
+      }
+    }
+
     // Create target dir
     const targetDir = path.join(cwd, env.componentsDir);
     if (!fs.existsSync(targetDir)) {
       fs.mkdirSync(targetDir, { recursive: true });
     }
 
+    // Components import cn() from "../../lib/utils" — scaffold it once
+    const utilsPath = path.join(
+      targetDir,
+      "../../lib",
+      `utils.${env.typescript ? "ts" : "js"}`,
+    );
+    if (!fs.existsSync(utilsPath)) {
+      fs.mkdirSync(path.dirname(utilsPath), { recursive: true });
+      fs.writeFileSync(utilsPath, UTILS_TEMPLATE, "utf-8");
+      console.log(
+        chalk.green(`✅ Created ${path.relative(cwd, utilsPath)}`),
+      );
+    }
+
     let allDependencies = new Set();
 
     for (const comp of componentsToAdd) {

package/package.json

@@ -1,19 +1,24 @@
 {
   "name": "cooterlabs",
-  "version": "1.0.2",
+  "version": "2.1.0",
   "description": "Component library CLI for CooterLabs apps",
   "files": [
     "bin",
     "templates"
   ],
-  "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "bin": {
-    "cooterlabs": "./bin/index.js"
+    "cooterlabs": "bin/index.js"
   },
-  "keywords": [],
+  "keywords": [
+    "aeon",
+    "react",
+    "typescript",
+    "cli",
+    "component-library"
+  ],
   "author": "",
   "license": "ISC",
   "type": "module",
@@ -25,5 +30,8 @@
     "prettier": "^3.8.1",
     "prompts": "^2.4.2",
     "tailwind-merge": "^3.5.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.14"
   }
 }

package/templates/_lib/utils.ts

@@ -0,0 +1,28 @@
+import { clsx, type ClassValue } from "clsx"
+import { extendTailwindMerge } from "tailwind-merge"
+
+// The custom font-size ramp from index.css (--text-h1 … --text-btn-tiny) is
+// unknown to tailwind-merge, so it treats text-b4 etc. as text COLORS and
+// silently drops real color classes like text-white. Teach it the ramp.
+const twMerge = extendTailwindMerge({
+    extend: {
+        classGroups: {
+            "font-size": [
+                {
+                    text: [
+                        "h1", "h2", "h3", "h4", "h5",
+                        "s1", "s2",
+                        "b1", "b2", "b3", "b4",
+                        "c1", "c2", "c3",
+                        "label",
+                        "btn-giant", "btn-large", "btn-medium", "btn-small", "btn-tiny",
+                    ],
+                },
+            ],
+        },
+    },
+})
+
+export function cn(...inputs: ClassValue[]) {
+    return twMerge(clsx(inputs))
+}

package/templates/action-sheet/action-sheet.tsx

@@ -0,0 +1,108 @@
+import * as React from "react"
+import * as DialogPrimitive from "@radix-ui/react-dialog"
+import { cn } from "../../lib/utils"
+
+const ActionSheet = DialogPrimitive.Root
+
+const ActionSheetTrigger = DialogPrimitive.Trigger
+
+const ActionSheetPortal = DialogPrimitive.Portal
+
+const ActionSheetOverlay = React.forwardRef<
+    React.ElementRef<typeof DialogPrimitive.Overlay>,
+    React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+    <DialogPrimitive.Overlay
+        ref={ref}
+        className={cn(
+            "fixed inset-0 z-50 bg-black/50 transition-opacity data-[state=closed]:opacity-0",
+            className
+        )}
+        {...props}
+    />
+))
+ActionSheetOverlay.displayName = "ActionSheetOverlay"
+
+const ActionSheetContent = React.forwardRef<
+    React.ElementRef<typeof DialogPrimitive.Content>,
+    React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+    <ActionSheetPortal>
+        <ActionSheetOverlay />
+        <DialogPrimitive.Content
+            ref={ref}
+            className={cn(
+                "fixed inset-x-0 bottom-0 z-50 flex w-full flex-col bg-background rounded-t-lg px-4 pb-4 pt-2 transition-transform data-[state=closed]:translate-y-full",
+                className
+            )}
+            {...props}
+        >
+            <div className="mx-auto mb-2 h-1 w-10 rounded-full bg-grey-200" />
+            {children}
+        </DialogPrimitive.Content>
+    </ActionSheetPortal>
+))
+ActionSheetContent.displayName = "ActionSheetContent"
+
+const ActionSheetHeader = ({
+    className,
+    ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+    <div
+        className={cn(
+            "flex flex-col gap-1 px-4 py-3 text-center text-c1 text-muted-foreground",
+            className
+        )}
+        {...props}
+    />
+)
+ActionSheetHeader.displayName = "ActionSheetHeader"
+
+export interface ActionSheetItemProps
+    extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: "default" | "destructive"
+}
+
+const ActionSheetItem = React.forwardRef<
+    HTMLButtonElement,
+    ActionSheetItemProps
+>(({ className, variant = "default", ...props }, ref) => (
+    <button
+        ref={ref}
+        className={cn(
+            "flex h-12 w-full items-center justify-center gap-2 text-b2 transition-colors hover:bg-secondary active:bg-muted focus-visible:outline-none focus-visible:shadow-focus disabled:pointer-events-none disabled:opacity-50 [&_svg]:size-5 [&_svg]:shrink-0",
+            variant === "destructive" ? "text-error" : "text-foreground",
+            className
+        )}
+        {...props}
+    />
+))
+ActionSheetItem.displayName = "ActionSheetItem"
+
+const ActionSheetCancel = React.forwardRef<
+    HTMLButtonElement,
+    React.ButtonHTMLAttributes<HTMLButtonElement>
+>(({ className, ...props }, ref) => (
+    <DialogPrimitive.Close asChild>
+        <button
+            ref={ref}
+            className={cn(
+                "mt-2 flex h-12 w-full items-center justify-center rounded-xs border border-border bg-background text-b2 text-foreground transition-colors hover:bg-secondary active:bg-muted focus-visible:outline-none focus-visible:shadow-focus",
+                className
+            )}
+            {...props}
+        />
+    </DialogPrimitive.Close>
+))
+ActionSheetCancel.displayName = "ActionSheetCancel"
+
+export {
+    ActionSheet,
+    ActionSheetTrigger,
+    ActionSheetPortal,
+    ActionSheetOverlay,
+    ActionSheetContent,
+    ActionSheetHeader,
+    ActionSheetItem,
+    ActionSheetCancel,
+}