twico-ui 0.1.0 → 1.0.0

package/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2026 Twico UI
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+MIT License
+
+Copyright (c) 2026 Twico UI
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,182 +1,233 @@
-# Twico UI
-
-A **free**, modern, themeable **React** component library — 53 components with **dark mode**, motion, and accessibility built in. No runtime CSS framework required: components are styled with CSS custom properties (design tokens), so they theme by overriding variables and work great alongside Tailwind or plain CSS.
-
-```bash
-npm install twico-ui
-```
-
-> Requires **React 18+** (`react` and `react-dom` are peer dependencies).
-
-## Framework setup
-
-Twico UI works in any React 18+ app. Every component ships with a `"use client"` boundary, so it drops straight into **Next.js App Router** Server Components without extra wrapping.
-
-### React (Vite / CRA)
-
-Import the stylesheet once at your entry, then use components anywhere:
-
-```jsx
-// main.jsx
-import "twico-ui/styles.css";
-```
-
-```jsx
-// App.jsx
-import { Button, Datatable } from "twico-ui";
-```
-
-### Next.js — App Router (`app/`)
-
-Import the CSS once in the root layout. Components can be used directly in Server **or** Client Components (they self-mark as client):
-
-```tsx
-// app/layout.tsx
-import "twico-ui/styles.css";
-
-export default function RootLayout({ children }: { children: React.ReactNode }) {
-  return (
-    <html lang="en">
-      <body>{children}</body>
-    </html>
-  );
-}
-```
-
-```tsx
-// app/page.tsx  (a Server Component — no "use client" needed)
-import { Stat, Button } from "twico-ui";
-
-export default function Page() {
-  return (
-    <main>
-      <Stat label="Revenue" value="$48,200" delta="+12.5%" />
-      <Button>Get started</Button>
-    </main>
-  );
-}
-```
-
-For dark mode in the App Router, toggle the class on `<html>` from a Client Component (e.g. a theme button) or set it server-side via the `className` on `<html>`.
-
-### Next.js — Pages Router (`pages/`)
-
-Import the CSS once in the custom `_app`:
-
-```tsx
-// pages/_app.tsx
-import "twico-ui/styles.css";
-import type { AppProps } from "next/app";
-
-export default function App({ Component, pageProps }: AppProps) {
-  return <Component {...pageProps} />;
-}
-```
-
-### SSR / hydration notes
-
-- Components are **SSR-safe** — nothing touches `window`/`document` during render; all browser access is inside effects and event handlers.
-- The global stylesheet (`twico-ui/styles.css`) provides the design tokens, base reset, and self-hosted fonts at first paint. Each component also injects its own scoped CSS on mount, so styles settle immediately after hydration.
-- Overlays (Menu, Popover, Select, CommandPalette, Drawer, Dialog) render through React **portals** to `document.body` only while open, so they never run on the server.
-
-## Quick start
-
-Import the stylesheet **once** at your app root, then use any component:
-
-```jsx
-import "twico-ui/styles.css";
-import { Button, Datatable, Input, Switch } from "twico-ui";
-
-export default function App() {
-  return (
-    <div style={{ padding: 24 }}>
-      <Input label="Email" placeholder="you@example.com" />
-      <Button>Save changes</Button>
-
-      <Datatable
-        rows={[
-          { id: 1, name: "Jane Cooper", role: "Admin", mrr: 480 },
-          { id: 2, name: "Wade Warren", role: "Editor", mrr: 48 },
-        ]}
-        rowKey={(r) => r.id}
-        columns={[
-          { field: "name", headerName: "Member", width: 200 },
-          { field: "role", headerName: "Role", valueOptions: ["Admin", "Editor"] },
-          { field: "mrr", headerName: "MRR", type: "number", valueFormatter: (v) => `$${v}` },
-        ]}
-      />
-    </div>
-  );
-}
-```
-
-## Dark mode
-
-Dark tokens live on the document root. Add `class="dark"` (or `data-theme="dark"`) to `<html>`:
-
-```js
-document.documentElement.classList.toggle("dark");
-```
-
-Everything — including portaled menus, popovers, and the command palette — re-themes together.
-
-## Theming
-
-All visuals derive from CSS custom properties. Override them in your own CSS to rebrand without touching components:
-
-```css
-:root {
-  --color-primary: #7c3aed;        /* brand color */
-  --radius-md: 10px;               /* corner radius */
-  --font-sans: "Inter", sans-serif;/* typeface */
-}
-```
-
-See `styles/twico-ui.css` for the full token set (colors, typography, spacing, radius, motion). The bundled stylesheet also self-hosts the default fonts (Plus Jakarta Sans + JetBrains Mono, OFL) under `twico-ui/styles/fonts/`.
-
-## Components
-
-**Buttons & actions:** Button, IconButton
-**Inputs:** Input, Textarea, Currency, CurrencyField, Select, MultiSelect, Combobox, Checkbox, Radio, Switch, Slider, Rating, FileUpload, DatePicker, DateRangePicker, ColorPicker
-**Data display:** Card, Avatar, AvatarMenu, Badge, Tag, Stat, List, Timeline, Chart, Table, Pagination, Datatable, Kanban
-**Navigation:** Tabs, Accordion, Breadcrumb, Stepper, Navbar, Sidebar, TreeView
-**Overlay:** Tooltip, Popover, Menu, Dialog, Drawer, CommandPalette
-**Feedback:** Alert, Spinner, Progress, Skeleton, Toast (+ ToastViewport), EmptyState, Divider, Carousel
-
-Every component ships full TypeScript types (e.g. `import type { DatatableProps } from "twico-ui"`).
-
-## Building & publishing (maintainers)
-
-This repo is both the Twico UI **design system** and the source of the npm package. The published package contains only the built output (`dist/` + `styles/`).
-
-```bash
-npm install          # install build tooling (tsup, typescript)
-npm run build        # bundle src/index.ts -> dist (ESM + CJS + .d.ts)
-npm publish          # prepublishOnly runs the build automatically
-```
-
-- `src/index.ts` is an auto-generated barrel that re-exports every component from `components/`.
-- `tsup` bundles the JSX to `dist/index.mjs` / `dist/index.cjs` and rolls the hand-written `.d.ts` props contracts into `dist/index.d.ts`.
-- A post-build step (`scripts/add-use-client.mjs`) prepends the `"use client"` directive to the bundles (a tsup `banner` is stripped by esbuild), so the package imports cleanly into Next.js App Router Server Components.
-- `react` / `react-dom` stay external (peer deps).
-
-See [`DESIGN-SYSTEM.md`](./DESIGN-SYSTEM.md) for the full design guide (tokens, voice, visual foundations, iconography).
-
-### Branching & releases
-
-Twico UI follows **[semantic versioning](https://semver.org/)** (`MAJOR.MINOR.PATCH`):
-
-- **`dev`** — the integration branch. All day-to-day work happens here or on `feat/*` / `fix/*` branches that merge into it. Every push and PR runs **CI** (`.github/workflows/ci.yml`): type-check, build, and an assertion that the `"use client"` banner survived bundling.
-- **`main`** — the release branch. It is the **only** branch wired to publish (`.github/workflows/publish.yml`). Merging `dev → main` triggers a release.
-
-To cut a release:
-
-1. On `dev`, bump the version in `package.json` per semver (`patch` = fixes, `minor` = new components/props, `major` = breaking changes).
-2. Open a PR from `dev` into `main` and merge it.
-3. The publish workflow builds, publishes to npm with provenance, and tags the commit `vX.Y.Z`. It is **idempotent** — if `package.json`'s version is already on npm, the publish step is skipped, so an accidental merge without a version bump never errors.
-
-> Publishing requires an `NPM_TOKEN` repository secret (an npm automation token with publish rights).
-
-## License
-
-MIT © Twico UI. Free for any use — personal or commercial.
+# Twico UI
+
+A **free**, modern, themeable **React** component library — 61 components with **dark mode**, motion, and accessibility built in. No runtime CSS framework required: components are styled with CSS custom properties (design tokens), so they theme by overriding variables and work great alongside Tailwind or plain CSS.
+
+```bash
+npm install twico-ui
+```
+
+> Requires **React 18+** (`react` and `react-dom` are peer dependencies).
+
+📖 **Documentation, live examples & API reference:** **https://encryptionl.github.io/twico-ui/**
+
+## Framework setup
+
+Twico UI works in any React 18+ app. Every component ships with a `"use client"` boundary, so it drops straight into **Next.js App Router** Server Components without extra wrapping.
+
+### React (Vite / CRA)
+
+Import the stylesheet once at your entry, then use components anywhere:
+
+```jsx
+// main.jsx
+import "twico-ui/styles.css";
+```
+
+```jsx
+// App.jsx
+import { Button, Datatable } from "twico-ui";
+```
+
+### Next.js — App Router (`app/`)
+
+Import the CSS once in the root layout. Components can be used directly in Server **or** Client Components (they self-mark as client):
+
+```tsx
+// app/layout.tsx
+import "twico-ui/styles.css";
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  );
+}
+```
+
+```tsx
+// app/page.tsx  (a Server Component — no "use client" needed)
+import { Stat, Button } from "twico-ui";
+
+export default function Page() {
+  return (
+    <main>
+      <Stat label="Revenue" value="$48,200" delta="+12.5%" />
+      <Button>Get started</Button>
+    </main>
+  );
+}
+```
+
+For dark mode in the App Router, toggle the class on `<html>` from a Client Component (e.g. a theme button) or set it server-side via the `className` on `<html>`.
+
+### Next.js — Pages Router (`pages/`)
+
+Import the CSS once in the custom `_app`:
+
+```tsx
+// pages/_app.tsx
+import "twico-ui/styles.css";
+import type { AppProps } from "next/app";
+
+export default function App({ Component, pageProps }: AppProps) {
+  return <Component {...pageProps} />;
+}
+```
+
+### SSR / hydration notes
+
+- Components are **SSR-safe** — nothing touches `window`/`document` during render; all browser access is inside effects and event handlers.
+- The global stylesheet (`twico-ui/styles.css`) provides the design tokens, base reset, and self-hosted fonts at first paint. Each component also injects its own scoped CSS on mount, so styles settle immediately after hydration.
+- Overlays (Menu, Popover, Select, CommandPalette, Drawer, Dialog) render through React **portals** to `document.body` only while open, so they never run on the server.
+
+## TypeScript & JavaScript
+
+Twico UI ships as a dual **ESM + CommonJS** package with bundled type declarations, so it works identically in a plain JavaScript project or a TypeScript one:
+
+- **TypeScript** — every component and hook ships full types; `import { Button, type ButtonProps } from "twico-ui"` resolves and is fully checked. Verified across `node16` (CJS **and** ESM) and `bundler` resolution with [are-the-types-wrong](https://github.com/arethetypeswrong/arethetypeswrong.github.io) (`npm run check:exports`). The `twico-ui/colors` subpath uses `exports`, a Node 12.7+ feature, so it requires `node16`-style resolution (the main entry also resolves under legacy `node10`).
+- **JavaScript (ESM)** — `import { Button } from "twico-ui"`.
+- **JavaScript (CommonJS)** — `const { Button } = require("twico-ui")`.
+
+```tsx
+// TypeScript — full prop types + autocomplete
+import { Button } from "twico-ui";
+import type { ButtonProps } from "twico-ui";
+
+const props: ButtonProps = { variant: "soft", size: "sm" };
+```
+
+## Quick start
+
+Import the stylesheet **once** at your app root, then use any component:
+
+```jsx
+import "twico-ui/styles.css";
+import { Button, Datatable, Input, Switch } from "twico-ui";
+
+export default function App() {
+  return (
+    <div style={{ padding: 24 }}>
+      <Input label="Email" placeholder="you@example.com" />
+      <Button>Save changes</Button>
+
+      <Datatable
+        rows={[
+          { id: 1, name: "Jane Cooper", role: "Admin", mrr: 480 },
+          { id: 2, name: "Wade Warren", role: "Editor", mrr: 48 },
+        ]}
+        rowKey={(r) => r.id}
+        columns={[
+          { field: "name", headerName: "Member", width: 200 },
+          { field: "role", headerName: "Role", valueOptions: ["Admin", "Editor"] },
+          { field: "mrr", headerName: "MRR", type: "number", valueFormatter: (v) => `$${v}` },
+        ]}
+      />
+    </div>
+  );
+}
+```
+
+## Dark mode
+
+Dark tokens live on the document root. Add `class="dark"` (or `data-theme="dark"`) to `<html>`:
+
+```js
+document.documentElement.classList.toggle("dark");
+```
+
+Everything — including portaled menus, popovers, and the command palette — re-themes together.
+
+## Theming
+
+All visuals derive from CSS custom properties. Override them in your own CSS to rebrand without touching components:
+
+```css
+:root {
+  --color-primary: #7c3aed;        /* brand color */
+  --radius-md: 10px;               /* corner radius */
+  --font-sans: "Inter", sans-serif;/* typeface */
+}
+```
+
+See `styles/twico-ui.css` for the full token set (colors, typography, spacing, radius, motion). The bundled stylesheet also self-hosts the default fonts (Plus Jakarta Sans + JetBrains Mono, OFL) under `twico-ui/styles/fonts/`.
+
+### Colors in JavaScript
+
+For app theming prefer the semantic CSS variables above. When a token is awkward (charts, canvas, inline maths), the **primitive scales** are also available as JS — `import { red } from '@mui/material/colors'`–style:
+
+```js
+import { indigo, slate, emerald, amber, rose, sky } from "twico-ui/colors";
+
+const brand = indigo[500]; // "#6366f1"
+```
+
+Each hue is an object keyed by shade — a full `50`–`950` ramp (`50, 100, 200, … 900, 950`). These are static values — unlike the `--color-*` aliases, they do not flip in dark mode.
+
+## Components
+
+**Buttons & actions:** Button, IconButton
+**Layout:** Box, Stack, Grid, Container
+**Typography:** Heading, Text, Code
+**Inputs:** Input, Textarea, Currency, CurrencyField, Select, MultiSelect, Combobox, Checkbox, Radio, Switch, Slider, Rating, FileUpload, DatePicker, DateRangePicker, ColorPicker
+**Data display:** Card, Avatar, AvatarMenu, Badge, Tag, Stat, List, Timeline, Chart, Table, Pagination, Datatable, Kanban
+**Navigation:** Tabs, Accordion, Breadcrumb, Stepper, Navbar, Sidebar, TreeView
+**Overlay:** Tooltip, Popover, Menu, Dialog, Drawer, CommandPalette
+**Feedback:** Alert, Spinner, Progress, Skeleton, Toast (+ ToastViewport), EmptyState, Divider, Carousel
+
+Every component ships full TypeScript types (e.g. `import type { DatatableProps } from "twico-ui"`).
+
+## Hooks
+
+The same SSR-safe, fully-typed React hooks the components are built on are exported from the package:
+
+```jsx
+import { useMediaQuery, useDisclosure, useColorScheme, useCopyToClipboard } from "twico-ui";
+```
+
+**State:** `useDisclosure`, `useToggle`, `useControllableState`, `useLocalStorage`, `usePrevious`
+**Responsive & theme:** `useMediaQuery`, `usePrefersReducedMotion`, `useColorScheme`, `useWindowSize`
+**Events & DOM:** `useEventListener`, `useClickOutside`, `useKeyPress`, `useHover`, `useIntersectionObserver`, `useScrollLock`
+**Timing:** `useDebouncedValue`, `useDebouncedCallback`, `useInterval`, `useTimeout`
+**Utilities:** `useCopyToClipboard`, `useId`, `useMounted`, `useIsomorphicLayoutEffect`
+
+## Building & publishing (maintainers)
+
+This repo is both the Twico UI **design system** and the source of the npm package. The published package contains only the built output (`dist/` + `styles/`).
+
+```bash
+npm install          # install build tooling (tsup, typescript)
+npm run build        # bundle src/index.ts -> dist (ESM + CJS + .d.ts)
+npm publish          # prepublishOnly runs the build automatically
+```
+
+- `src/index.ts` is an auto-generated barrel that re-exports every component from `components/`.
+- `tsup` bundles the JSX to `dist/index.mjs` / `dist/index.cjs` and rolls the hand-written `.d.ts` props contracts into `dist/index.d.ts`.
+- A post-build step (`scripts/add-use-client.mjs`) prepends the `"use client"` directive to the bundles (a tsup `banner` is stripped by esbuild), so the package imports cleanly into Next.js App Router Server Components.
+- `react` / `react-dom` stay external (peer deps).
+
+See [`DESIGN-SYSTEM.md`](./DESIGN-SYSTEM.md) for the full design guide (tokens, voice, visual foundations, iconography). Contributor/developer docs (architecture, releases, security, the docs site) live in [`docs/`](./docs/); the security policy is in [`SECURITY.md`](./SECURITY.md).
+
+### Versioning & releases
+
+Releases are **fully automated** with [semantic-release](https://semantic-release.gitbook.io/) following **[semantic versioning](https://semver.org/)** — there are **no manual version bumps**.
+
+- **`dev`** — the integration branch. Day-to-day work happens here or on `feat/*` / `fix/*` branches. Every push and PR runs **CI** (`.github/workflows/ci.yml`): type-check, build, and a check that the `"use client"` banner survived bundling.
+- **`main`** — the release branch. **Every push to `main`** runs `.github/workflows/release.yml`, which computes the next version from the commit history and releases it.
+
+Write [Conventional Commits](https://www.conventionalcommits.org/) and the version takes care of itself:
+
+| Commit | Example | Release |
+| --- | --- | --- |
+| `fix:` | `fix: clamp datatable menu to viewport` | **patch** — `x.y.Z` |
+| `feat:` | `feat: add Calendar component` | **minor** — `x.Y.0` |
+| `feat!:` / `BREAKING CHANGE:` | `feat!: rename Datatable props` | **major** — `X.0.0` |
+| `docs:` / `chore:` / `refactor:` / `test:` | — | no release |
+
+On each push to `main`, semantic-release picks the next version, publishes to **npm** (with provenance), tags **`vX.Y.Z`**, writes **`CHANGELOG.md`**, bumps `package.json`, and opens a **GitHub Release**. A push with no release-worthy commits does nothing.
+
+> **Version stays in sync automatically.** On every release the bot commits the bumped `package.json` (and `CHANGELOG.md`) back to `main`, so the `package.json` version on `main` always matches the latest version published to npm — they never drift. Requires an `NPM_TOKEN` repository secret (an npm automation token). If you enable branch protection on `main`, allow the release bot to push the changelog commit (or run semantic-release with a personal access token).
+
+## License
+
+MIT © Twico UI. Free for any use — personal or commercial.

package/dist/colors.cjs

@@ -0,0 +1,98 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+// src/colors.ts
+var indigo = {
+  50: "#eef2ff",
+  100: "#e0e7ff",
+  200: "#c7d2fe",
+  300: "#a5b4fc",
+  400: "#818cf8",
+  500: "#6366f1",
+  600: "#4f46e5",
+  700: "#4338ca",
+  800: "#3730a3",
+  900: "#312e81",
+  950: "#1e1b4b"
+};
+var slate = {
+  50: "#f8fafc",
+  100: "#f1f5f9",
+  200: "#e2e8f0",
+  300: "#cbd5e1",
+  400: "#94a3b8",
+  500: "#64748b",
+  600: "#475569",
+  700: "#334155",
+  800: "#1e293b",
+  900: "#0f172a",
+  950: "#020617"
+};
+var emerald = {
+  50: "#ecfdf5",
+  100: "#d1fae5",
+  200: "#a7f3d0",
+  300: "#6ee7b7",
+  400: "#34d399",
+  500: "#10b981",
+  600: "#059669",
+  700: "#047857",
+  800: "#065f46",
+  900: "#064e3b",
+  950: "#022c22"
+};
+var amber = {
+  50: "#fffbeb",
+  100: "#fef3c7",
+  200: "#fde68a",
+  300: "#fcd34d",
+  400: "#fbbf24",
+  500: "#f59e0b",
+  600: "#d97706",
+  700: "#b45309",
+  800: "#92400e",
+  900: "#78350f",
+  950: "#451a03"
+};
+var rose = {
+  50: "#fff1f2",
+  100: "#ffe4e6",
+  200: "#fecdd3",
+  300: "#fda4af",
+  400: "#fb7185",
+  500: "#f43f5e",
+  600: "#e11d48",
+  700: "#be123c",
+  800: "#9f1239",
+  900: "#881337",
+  950: "#4c0519"
+};
+var sky = {
+  50: "#f0f9ff",
+  100: "#e0f2fe",
+  200: "#bae6fd",
+  300: "#7dd3fc",
+  400: "#38bdf8",
+  500: "#0ea5e9",
+  600: "#0284c7",
+  700: "#0369a1",
+  800: "#075985",
+  900: "#0c4a6e",
+  950: "#082f49"
+};
+var brand = indigo;
+var colors = { indigo, slate, emerald, amber, rose, sky };
+var colors_default = colors;
+
+exports.amber = amber;
+exports.brand = brand;
+exports.colors = colors;
+exports.default = colors_default;
+exports.emerald = emerald;
+exports.indigo = indigo;
+exports.rose = rose;
+exports.sky = sky;
+exports.slate = slate;
+//# sourceMappingURL=colors.cjs.map
+//# sourceMappingURL=colors.cjs.map

package/dist/colors.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/colors.ts"],"names":[],"mappings":";;;;;AAeO,IAAM,MAAA,GAAS;AAAA,EACpB,EAAA,EAAI,SAAA;AAAA,EACJ,GAAA,EAAK,SAAA;AAAA,EACL,GAAA,EAAK,SAAA;AAAA,EACL,GAAA,EAAK,SAAA;AAAA,EACL,GAAA,EAAK,SAAA;AAAA,EACL,GAAA,EAAK,SAAA;AAAA,EACL,GAAA,EAAK,SAAA;AAAA,EACL,GAAA,EAAK,SAAA;AAAA,EACL,GAAA,EAAK,SAAA;AAAA,EACL,GAAA,EAAK,SAAA;AAAA,EACL,GAAA,EAAK;AACP;AAGO,IAAM,KAAA,GAAQ;AAAA,EACnB,EAAA,EAAI,SAAA;AAAA,EACJ,GAAA,EAAK,SAAA;AAAA,EACL,GAAA,EAAK,SAAA;AAAA,EACL,GAAA,EAAK,SAAA;AAAA,EACL,GAAA,EAAK,SAAA;AAAA,EACL,GAAA,EAAK,SAAA;AAAA,EACL,GAAA,EAAK,SAAA;AAAA,EACL,GAAA,EAAK,SAAA;AAAA,EACL,GAAA,EAAK,SAAA;AAAA,EACL,GAAA,EAAK,SAAA;AAAA,EACL,GAAA,EAAK;AACP;AAGO,IAAM,OAAA,GAAU;AAAA,EACrB,EAAA,EAAI,SAAA;AAAA,EACJ,GAAA,EAAK,SAAA;AAAA,EACL,GAAA,EAAK,SAAA;AAAA,EACL,GAAA,EAAK,SAAA;AAAA,EACL,GAAA,EAAK,SAAA;AAAA,EACL,GAAA,EAAK,SAAA;AAAA,EACL,GAAA,EAAK,SAAA;AAAA,EACL,GAAA,EAAK,SAAA;AAAA,EACL,GAAA,EAAK,SAAA;AAAA,EACL,GAAA,EAAK,SAAA;AAAA,EACL,GAAA,EAAK;AACP;AAGO,IAAM,KAAA,GAAQ;AAAA,EACnB,EAAA,EAAI,SAAA;AAAA,EACJ,GAAA,EAAK,SAAA;AAAA,EACL,GAAA,EAAK,SAAA;AAAA,EACL,GAAA,EAAK,SAAA;AAAA,EACL,GAAA,EAAK,SAAA;AAAA,EACL,GAAA,EAAK,SAAA;AAAA,EACL,GAAA,EAAK,SAAA;AAAA,EACL,GAAA,EAAK,SAAA;AAAA,EACL,GAAA,EAAK,SAAA;AAAA,EACL,GAAA,EAAK,SAAA;AAAA,EACL,GAAA,EAAK;AACP;AAGO,IAAM,IAAA,GAAO;AAAA,EAClB,EAAA,EAAI,SAAA;AAAA,EACJ,GAAA,EAAK,SAAA;AAAA,EACL,GAAA,EAAK,SAAA;AAAA,EACL,GAAA,EAAK,SAAA;AAAA,EACL,GAAA,EAAK,SAAA;AAAA,EACL,GAAA,EAAK,SAAA;AAAA,EACL,GAAA,EAAK,SAAA;AAAA,EACL,GAAA,EAAK,SAAA;AAAA,EACL,GAAA,EAAK,SAAA;AAAA,EACL,GAAA,EAAK,SAAA;AAAA,EACL,GAAA,EAAK;AACP;AAGO,IAAM,GAAA,GAAM;AAAA,EACjB,EAAA,EAAI,SAAA;AAAA,EACJ,GAAA,EAAK,SAAA;AAAA,EACL,GAAA,EAAK,SAAA;AAAA,EACL,GAAA,EAAK,SAAA;AAAA,EACL,GAAA,EAAK,SAAA;AAAA,EACL,GAAA,EAAK,SAAA;AAAA,EACL,GAAA,EAAK,SAAA;AAAA,EACL,GAAA,EAAK,SAAA;AAAA,EACL,GAAA,EAAK,SAAA;AAAA,EACL,GAAA,EAAK,SAAA;AAAA,EACL,GAAA,EAAK;AACP;AAGO,IAAM,KAAA,GAAQ;AAGd,IAAM,SAAS,EAAE,MAAA,EAAQ,OAAO,OAAA,EAAS,KAAA,EAAO,MAAM,GAAA;AAE7D,IAAO,cAAA,GAAQ","file":"colors.cjs","sourcesContent":["// twico-ui/colors — the primitive color scales as plain JS objects.\n//\n// Mirrors Material UI's `@mui/material/colors`: given a HUE and a SHADE you can\n// import a hex string directly —\n//\n//   import { indigo } from \"twico-ui/colors\";\n//   const color = indigo[500]; // \"#6366f1\"\n//\n// These are the same raw values declared as `--indigo-*` / `--slate-*` / … in\n// tokens/colors.css; tests/colors.test.ts asserts the two never drift. Use these\n// when a CSS custom property is awkward (charts, canvas, inline style maths, JS\n// theme objects). For app theming prefer the SEMANTIC aliases (`var(--color-primary)`,\n// `var(--color-surface)`, …) which also flip under dark mode — JS primitives do not.\n\n/** Indigo — the brand scale. Remap `--brand-*` (CSS) to reskin the library. */\nexport const indigo = {\n  50: \"#eef2ff\",\n  100: \"#e0e7ff\",\n  200: \"#c7d2fe\",\n  300: \"#a5b4fc\",\n  400: \"#818cf8\",\n  500: \"#6366f1\",\n  600: \"#4f46e5\",\n  700: \"#4338ca\",\n  800: \"#3730a3\",\n  900: \"#312e81\",\n  950: \"#1e1b4b\",\n} as const;\n\n/** Slate — the neutral scale (surfaces, borders, text). */\nexport const slate = {\n  50: \"#f8fafc\",\n  100: \"#f1f5f9\",\n  200: \"#e2e8f0\",\n  300: \"#cbd5e1\",\n  400: \"#94a3b8\",\n  500: \"#64748b\",\n  600: \"#475569\",\n  700: \"#334155\",\n  800: \"#1e293b\",\n  900: \"#0f172a\",\n  950: \"#020617\",\n} as const;\n\n/** Emerald — the success hue. */\nexport const emerald = {\n  50: \"#ecfdf5\",\n  100: \"#d1fae5\",\n  200: \"#a7f3d0\",\n  300: \"#6ee7b7\",\n  400: \"#34d399\",\n  500: \"#10b981\",\n  600: \"#059669\",\n  700: \"#047857\",\n  800: \"#065f46\",\n  900: \"#064e3b\",\n  950: \"#022c22\",\n} as const;\n\n/** Amber — the warning hue. */\nexport const amber = {\n  50: \"#fffbeb\",\n  100: \"#fef3c7\",\n  200: \"#fde68a\",\n  300: \"#fcd34d\",\n  400: \"#fbbf24\",\n  500: \"#f59e0b\",\n  600: \"#d97706\",\n  700: \"#b45309\",\n  800: \"#92400e\",\n  900: \"#78350f\",\n  950: \"#451a03\",\n} as const;\n\n/** Rose — the danger hue. */\nexport const rose = {\n  50: \"#fff1f2\",\n  100: \"#ffe4e6\",\n  200: \"#fecdd3\",\n  300: \"#fda4af\",\n  400: \"#fb7185\",\n  500: \"#f43f5e\",\n  600: \"#e11d48\",\n  700: \"#be123c\",\n  800: \"#9f1239\",\n  900: \"#881337\",\n  950: \"#4c0519\",\n} as const;\n\n/** Sky — the info hue. */\nexport const sky = {\n  50: \"#f0f9ff\",\n  100: \"#e0f2fe\",\n  200: \"#bae6fd\",\n  300: \"#7dd3fc\",\n  400: \"#38bdf8\",\n  500: \"#0ea5e9\",\n  600: \"#0284c7\",\n  700: \"#0369a1\",\n  800: \"#075985\",\n  900: \"#0c4a6e\",\n  950: \"#082f49\",\n} as const;\n\n/** Alias of {@link indigo} — mirrors the CSS `--brand-*` → `--indigo-*` aliasing. */\nexport const brand = indigo;\n\n/** Every primitive scale, keyed by hue name. */\nexport const colors = { indigo, slate, emerald, amber, rose, sky } as const;\n\nexport default colors;\n"]}