cooterlabs 1.0.1 → 2.0.0

package/README.md

@@ -17,15 +17,42 @@ It brings components directly to you. We do not provide a generic NPM library pa
 
 1. Open your terminal at the root of your project directory.
 2. Ensure you have `tailwind-merge` and `clsx` properly configured in a central utility path or installed manually (some components will auto-detect and install these).
-3. Run the CLI tool:
+
+### Initialization (Themes & CSS Base)
+
+To swiftly set up a cohesive Tailwind theme and properly configure your base CSS file (e.g. `index.css` or `globals.css`), run:
 
 ```bash
-npx cooterlabs add
+npx cooterlabs init
 ```
 
-### Direct Component Install
+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
 
-If you know exactly what component you want, just bypass the interactive wizard and supply the name:
+Run the CLI tool without arguments to get an interactive autocomplete prompt:
+
+```bash
+npx cooterlabs add
+```
+
+If you know exactly what component you want, bypass the interactive wizard and supply the name:
 
 ```bash
 # Example: Adding a Button
@@ -35,18 +62,54 @@ npx cooterlabs add button
 npx cooterlabs add avatar
 ```
 
-## Available Components
+### Install All Components At Once
 
-Currently, the CooterLabs Library ships with the following carefully designed boilerplate components:
+Need a complete starting block? Add the `--all` flag to scaffold the entire library in one go:
+
+```bash
+npx cooterlabs add --all
+```
+
+## Available 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