cooterlabs 1.0.2 → 2.0.0

package/README.md

@@ -26,7 +26,23 @@ To swiftly set up a cohesive Tailwind theme and properly configure your base CSS
 npx cooterlabs init
 ```
 
-This will give you a list of carefully curated designer themes (like `zinc`, `slate`) to apply global default variables (background, foreground, primary borders, etc.) out-of-the-box.
+This will give you a list of carefully curated designer themes to apply global default variables (background, foreground, primary borders, etc.) out-of-the-box.
+
+The default theme is **`aeon`** — the complete Aeon Product Design System as a Tailwind CSS v4 `@theme` block. It ships:
+
+- **Semantic colors**: `primary` (deep teal `#0d3435`), `secondary`, `muted`, `accent`, `destructive`, `border`, `ring`, plus `success` / `info` / `warning` / `error` — each with a full 50–900 primitive scale (`primary-50`…`primary-900`, `grey-*`, `success-*`, …).
+- **Text sizes as Tailwind CSS variables**: the full Aeon type ramp is exposed as `--text-*` theme variables, giving you utilities like `text-h1`…`text-h5` (headings), `text-s1`/`text-s2` (subtitles), `text-b1`…`text-b4` (body), `text-c1`…`text-c3` (captions), `text-label`, and button sizes `text-btn-giant`…`text-btn-tiny` — each with the correct size, line-height, and weight baked in.
+- **Radius scale**: `rounded-xxs` (4px) through `rounded-xl` (24px).
+- **Elevation**: `shadow-100` through `shadow-800`.
+- **Font**: Inter.
+
+To apply it non-interactively:
+
+```bash
+npx cooterlabs init aeon
+```
+
+Legacy `zinc` and `slate` themes (Tailwind v3 / shadcn HSL format) remain available.
 
 ### Adding Components
 
@@ -56,16 +72,44 @@ npx cooterlabs add --all
 
 ## Available Components
 
-Currently, the CooterLabs Library ships with the following carefully designed boilerplate components:
-
-- `avatar` - An accessible React image element holding fallback identifiers.
-- `badge` - Tiny status badge elements relying on standard `variant` mappings.
-- `button` - A highly stylized native HTML button leveraging Radix UI primitives (`Slot`).
-- `card` - Content display wrappers comprising headers, footers, body content, and titles.
-- `checkbox` - Robust implementation for accessible `<input type="checkbox"/>` mappings.
-- `input` - Your standard customized HTML `<input />`.
-- `label` - An accessible Radix-backed `<label />`.
-- `textarea` - A matching multiline input variation styling perfectly with standard inputs.
+The full Aeon Product Design System, scaffolded as owned code:
+
+**Form controls**
+- `button` - Filled / outline / clear styles in five sizes (giant → tiny), icon-only mode, Radix `Slot` support.
+- `button-group` - Segmented control matching the button size ramp.
+- `input` - Aeon-styled HTML `<input />` with error and disabled states.
+- `textarea` - Matching multiline input.
+- `label` - Accessible Radix-backed `<label />`.
+- `checkbox` - Radix checkbox with indeterminate support.
+- `radio` - Radix radio group.
+- `toggle` - Radix switch.
+
+**Feedback**
+- `alert` - Filled and soft appearances across default / success / info / warning / error severities.
+- `badge` - Status pills plus dismissible `Chip`.
+- `avatar` - Radix avatar with the Aeon size ramp.
+- `progress` - Radix progress bar.
+- `loader` - CSS spinner in five sizes.
+- `tooltip` - Radix dark tooltip.
+
+**Overlays**
+- `dialog` - Radix dialog (Pop-Up).
+- `action-sheet` - Mobile bottom sheet built on Radix dialog.
+- `context-menu` - Radix context menu.
+- `dropdown` - Radix dropdown menu.
+- `list` - Mobile list rows with leading/trailing slots.
+
+**Navigation**
+- `tabs` - Radix tabs.
+- `breadcrumb` - Accessible breadcrumb trail.
+- `pagination` - Page navigation.
+- `page-control` - Mobile page-indicator dots.
+- `stepper` - Horizontal step indicator.
+- `navbar-top` - Mobile top app bar.
+- `navbar-bottom` - Mobile bottom tab bar.
+
+**Layout**
+- `card` - Header, footer, body, title, and description wrappers.
 
 ## How it works under-the-hood
 

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,192 @@ const REGISTRY = {
   },
   checkbox: {
     name: "Checkbox",
-    dependencies: ["lucide-react", "clsx", "tailwind-merge"],
+    dependencies: [
+      "@radix-ui/react-checkbox",
+      "lucide-react",
+      "clsx",
+      "tailwind-merge",
+    ],
     dev_dependencies: [],
   },
 };
 
 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;
+}`,
   zinc: `:root {
   --background: 0 0% 100%;
   --foreground: 240 10% 3.9%;
@@ -231,19 +521,29 @@ const main = async () => {
   }
 
   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 +577,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 = [];

package/package.json

@@ -1,19 +1,24 @@
 {
   "name": "cooterlabs",
-  "version": "1.0.2",
+  "version": "2.0.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/action-sheet/action-sheet.tsx

@@ -0,0 +1,113 @@
+import * as React from "react"
+import * as DialogPrimitive from "@radix-ui/react-dialog"
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+    return twMerge(clsx(inputs))
+}
+
+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:ring-2 focus-visible:ring-ring 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:ring-2 focus-visible:ring-ring",
+                className
+            )}
+            {...props}
+        />
+    </DialogPrimitive.Close>
+))
+ActionSheetCancel.displayName = "ActionSheetCancel"
+
+export {
+    ActionSheet,
+    ActionSheetTrigger,
+    ActionSheetPortal,
+    ActionSheetOverlay,
+    ActionSheetContent,
+    ActionSheetHeader,
+    ActionSheetItem,
+    ActionSheetCancel,
+}