@dtsports/design-system 0.2.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 DT Sports
+
+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

@@ -0,0 +1,156 @@
+# @dtsports/design-system
+
+The reusable design system for every DT Sports product — **60+ components, a single-source token system (web + React Native), a marketing tier, and a live documentation page**, all shipped together and gated by accessibility, contrast, and visual-regression tests.
+
+The folder is `dtsports_design-system/` at the repo root; the npm package name is `@dtsports/design-system`.
+
+- **Using it in an app / publishing:** see [`npm.md`](./npm.md)
+- **Version history:** see [`CHANGELOG.md`](./CHANGELOG.md)
+- **Principles & foundations:** see [`design.md`](../design.md)
+
+## Quick start
+
+```sh
+# In a consuming app (see npm.md for the full 3-step Next.js wiring):
+npm install @dtsports/design-system
+```
+
+```tsx
+import "@dtsports/design-system/styles/globals.css";
+import { ThemeProvider, Button, Card } from "@dtsports/design-system";
+```
+
+```sh
+# In this repo, to browse every component live:
+cd dtsports_design-system
+npm install
+npm run dev          # → http://localhost:5199
+```
+
+## What's inside
+
+```
+src/
+├── components/        ← 55 UI component files (Button, Card, Table, Dialog, …)
+├── marketing/         ← marketing-site primitives (Hero, Section, Nav, Footer, …)
+├── tokens/
+│   ├── tokens.json        ← SINGLE SOURCE OF TRUTH for every design token
+│   └── index.ts           ← generated: platform-agnostic tokens (RN / plain JS)
+├── styles/
+│   ├── globals.css        ← generated CSS-variable blocks + base layer
+│   ├── tailwind.preset.ts ← Tailwind theme (consumes generated token data)
+│   └── generated/         ← generated preset data (do not edit)
+├── lib/utils.ts       ← `cn()` for class merging
+├── showcase/          ← the live docs page (mountable)
+│   ├── index.tsx · page.tsx · components/
+├── test/              ← jest-axe accessibility suites
+└── index.ts           ← public API for the library
+
+scripts/               ← build-tokens · check-contrast · fix-extensions
+tests/visual/          ← Playwright screenshots + committed baselines
+```
+
+## Component inventory
+
+- **Forms:** Button, Input, Textarea, Label, Checkbox, RadioGroup, Switch, Select, NumberInput, Slider, Combobox, Calendar, DatePicker, FormField
+- **Display:** Badge, Chip, Card, Table, Avatar, AvatarGroup, Separator, Spec, Pagination, Progress
+- **Feedback:** Alert, Toaster/`toast`, Skeleton (+ SkeletonList/SkeletonTable), Spinner
+- **Overlays:** Dialog, Drawer, Popover, DropdownMenu, Tooltip
+- **Disclosure / nav:** Accordion, Collapsible, Tabs, Breadcrumb
+- **Layout / shell:** AppShell, Sidebar, TopBar, Container, Stack, AspectRatio, ScrollArea
+- **Brand & patterns:** LivePill, StatusPill, MetricTile, CapacityBar, EmptyState, Timestamp, MoneyBreakdown, ThreeState, ConfirmAction
+- **Theming:** ThemeProvider, useTheme, ThemeToggle
+- **Marketing** (`/marketing`): MarketingNav, Hero, Section, Footer, LogoCloud, Prose
+
+## Sub-entries
+
+| Import path                                  | What it gives you                                                |
+| -------------------------------------------- | ---------------------------------------------------------------- |
+| `@dtsports/design-system`                    | The component library (Button, Card, …) + `cn` + `ThemeProvider` |
+| `@dtsports/design-system/showcase`           | The full docs page as a mountable component                      |
+| `@dtsports/design-system/styles/globals.css` | CSS variables + base layer (import once in layout)               |
+| `@dtsports/design-system/tailwind-preset`    | Theme tokens for your `tailwind.config.ts`                       |
+| `@dtsports/design-system/marketing`          | Marketing-site primitives (Hero, Section, Nav, Footer, Prose)    |
+| `@dtsports/design-system/tokens`             | Resolved platform-agnostic tokens (React Native / plain JS)      |
+| `@dtsports/design-system/tokens.json`        | Raw token source (design tools, codegen)                         |
+
+## Editing tokens
+
+`src/tokens/tokens.json` is the single source of truth for colors (light +
+dark), typography, spacing, radii, shadows, motion, z-index, and
+breakpoints. After editing it:
+
+```sh
+npm run build:tokens     # regenerates globals.css vars, preset data, ./tokens
+npm run check:contrast   # WCAG gate — CI runs this too
+```
+
+Never edit the generated blocks (`globals.css` marked region,
+`src/styles/generated/`, `src/tokens/index.ts`) by hand — CI fails if
+they're stale.
+
+## Developing
+
+Run everything from the `dtsports_design-system/` directory.
+
+| Command                           | What it does                                                        |
+| --------------------------------- | ------------------------------------------------------------------- |
+| `npm run dev`                     | Browse the showcase at `localhost:5199` (Vite + real Tailwind)      |
+| `npm test`                        | jest-axe accessibility suite (41 tests, app + marketing tiers)      |
+| `npm run test:visual`             | Playwright screenshots vs the 264 committed baselines               |
+| `npm run test:visual:update`      | Re-baseline after an intentional visual change                      |
+| `npm run build:tokens`            | Regenerate CSS vars, preset data, and `./tokens` from `tokens.json` |
+| `npm run check:tokens`            | Fail if the generated token artifacts are stale                     |
+| `npm run check:contrast`          | WCAG contrast gate against the live tokens                          |
+| `npm run lint` / `npm run format` | ESLint (`jsx-a11y`) / Prettier                                      |
+| `npm run typecheck`               | `tsc --noEmit`                                                      |
+| `npm run build`                   | Compiled ESM + `.d.ts` into `dist/` (the publish artifact)          |
+
+CI (`.github/workflows/ci.yml`) runs the whole set on every push/PR:
+lint → format → typecheck → tokens → tests → contrast → build → publint →
+visual.
+
+Visual baselines are per-platform (`-darwin.png` locally, `-linux.png` in
+CI). After the first CI run on a new platform, download the
+`playwright-visual` artifact and commit the generated `-linux.png` files.
+
+## Consuming from an app & releasing
+
+Full instructions — installing (npm / monorepo / private registry), the
+3-step Next.js wiring, React Native token usage, and the changesets
+publish flow — live in **[`npm.md`](./npm.md)**.
+
+The short version for a Next.js app:
+
+```ts
+// 1. root layout — import styles once
+import "@dtsports/design-system/styles/globals.css";
+
+// 2. tailwind.config.ts — extend the preset
+import preset from "@dtsports/design-system/tailwind-preset";
+export default { presets: [preset], content: [/* …app + DS paths */] };
+
+// 3. mount the live docs (optional, one line)
+export { default } from "@dtsports/design-system/showcase";
+```
+
+## Why the showcase ships with the library
+
+Before consolidation the docs page lived in the consuming app. That meant:
+
+- Every new app had to copy ~1700 lines to get the same docs page.
+- Updates to a component required editing both the component AND the docs in every consuming app.
+- New apps could drift from the canonical docs.
+
+Now the docs page is part of the package. One line in any app mounts the same authoritative reference, and it always reflects the current version of the components.
+
+## Principles
+
+See [`design.md`](../design.md) at the repo root for the full design system
+documentation:
+
+- §2 Visual principles (8 rules)
+- §3 UX principles (19 sub-rules)
+- §4–§9 Foundations (color, type, spacing, radius, elevation, icons)
+- §10 Components · §11 UX pattern components
+- §12 Motion · §13 Theming · §14 Accessibility

package/dist/components/accordion.d.ts

@@ -0,0 +1,19 @@
+import * as React from "react";
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+/**
+ * Accordion — for grouped expandable sections (House rules · Policy ·
+ * About). Use `type="single"` for FAQ-style (one-open-at-a-time) and
+ * `type="multiple"` for settings panels.
+ *
+ *   <Accordion type="single" collapsible>
+ *     <AccordionItem value="a">
+ *       <AccordionTrigger>House rules</AccordionTrigger>
+ *       <AccordionContent>…</AccordionContent>
+ *     </AccordionItem>
+ *   </Accordion>
+ */
+export declare const Accordion: React.ForwardRefExoticComponent<(AccordionPrimitive.AccordionSingleProps | AccordionPrimitive.AccordionMultipleProps) & React.RefAttributes<HTMLDivElement>>;
+export declare const AccordionItem: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const AccordionTrigger: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export declare const AccordionContent: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=accordion.d.ts.map

package/dist/components/accordion.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"accordion.d.ts","sourceRoot":"","sources":["../../src/components/accordion.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,kBAAkB,MAAM,2BAA2B,CAAC;AAIhE;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,SAAS,8JAA0B,CAAC;AAEjD,eAAO,MAAM,aAAa,iKASxB,CAAC;AAGH,eAAO,MAAM,gBAAgB,0KAuB3B,CAAC;AAGH,eAAO,MAAM,gBAAgB,oKAe3B,CAAC"}

package/dist/components/accordion.js

@@ -0,0 +1,26 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import { ChevronDown } from "lucide-react";
+import { cn } from "../lib/utils.js";
+/**
+ * Accordion — for grouped expandable sections (House rules · Policy ·
+ * About). Use `type="single"` for FAQ-style (one-open-at-a-time) and
+ * `type="multiple"` for settings panels.
+ *
+ *   <Accordion type="single" collapsible>
+ *     <AccordionItem value="a">
+ *       <AccordionTrigger>House rules</AccordionTrigger>
+ *       <AccordionContent>…</AccordionContent>
+ *     </AccordionItem>
+ *   </Accordion>
+ */
+export const Accordion = AccordionPrimitive.Root;
+export const AccordionItem = React.forwardRef(({ className, ...props }, ref) => (_jsx(AccordionPrimitive.Item, { ref: ref, className: cn("border-b border-border last:border-b-0", className), ...props })));
+AccordionItem.displayName = "AccordionItem";
+export const AccordionTrigger = React.forwardRef(({ className, children, ...props }, ref) => (_jsx(AccordionPrimitive.Header, { className: "flex", children: _jsxs(AccordionPrimitive.Trigger, { ref: ref, className: cn("flex flex-1 items-center justify-between py-3 text-sm font-medium text-foreground transition-all duration-150", "hover:text-brand-forest", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:rounded-sm", "[&[data-state=open]>svg]:rotate-180", className), ...props, children: [children, _jsx(ChevronDown, { className: "h-3.5 w-3.5 shrink-0 text-text-muted transition-transform duration-150", strokeWidth: 1.75 })] }) })));
+AccordionTrigger.displayName = "AccordionTrigger";
+export const AccordionContent = React.forwardRef(({ className, children, ...props }, ref) => (_jsx(AccordionPrimitive.Content, { ref: ref, className: cn("overflow-hidden text-sm text-foreground", "data-[state=closed]:animate-fade-in data-[state=open]:animate-fade-in", className), ...props, children: _jsx("div", { className: "pb-3 pt-0", children: children }) })));
+AccordionContent.displayName = "AccordionContent";
+//# sourceMappingURL=accordion.js.map

package/dist/components/accordion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"accordion.js","sourceRoot":"","sources":["../../src/components/accordion.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,kBAAkB,MAAM,2BAA2B,CAAC;AAChE,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAC3C,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAElC;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG,kBAAkB,CAAC,IAAI,CAAC;AAEjD,MAAM,CAAC,MAAM,aAAa,GAAG,KAAK,CAAC,UAAU,CAG3C,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,CAClC,KAAC,kBAAkB,CAAC,IAAI,IACtB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,wCAAwC,EAAE,SAAS,CAAC,KAC9D,KAAK,GACT,CACH,CAAC,CAAC;AACH,aAAa,CAAC,WAAW,GAAG,eAAe,CAAC;AAE5C,MAAM,CAAC,MAAM,gBAAgB,GAAG,KAAK,CAAC,UAAU,CAG9C,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,CAC5C,KAAC,kBAAkB,CAAC,MAAM,IAAC,SAAS,EAAC,MAAM,YACzC,MAAC,kBAAkB,CAAC,OAAO,IACzB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACX,+GAA+G,EAC/G,yBAAyB,EACzB,kGAAkG,EAClG,qCAAqC,EACrC,SAAS,CACV,KACG,KAAK,aAER,QAAQ,EACT,KAAC,WAAW,IACV,SAAS,EAAC,wEAAwE,EAClF,WAAW,EAAE,IAAI,GACjB,IACyB,GACH,CAC7B,CAAC,CAAC;AACH,gBAAgB,CAAC,WAAW,GAAG,kBAAkB,CAAC;AAElD,MAAM,CAAC,MAAM,gBAAgB,GAAG,KAAK,CAAC,UAAU,CAG9C,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,CAC5C,KAAC,kBAAkB,CAAC,OAAO,IACzB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACX,yCAAyC,EACzC,uEAAuE,EACvE,SAAS,CACV,KACG,KAAK,YAET,cAAK,SAAS,EAAC,WAAW,YAAE,QAAQ,GAAO,GAChB,CAC9B,CAAC,CAAC;AACH,gBAAgB,CAAC,WAAW,GAAG,kBAAkB,CAAC"}

package/dist/components/alert.d.ts

@@ -0,0 +1,26 @@
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+/**
+ * Alert / inline notice — for status messages that aren't transient.
+ * Pair with the right variant:
+ *   - info     neutral notices
+ *   - success  confirmations that stick (booking saved, etc.)
+ *   - warning  needs attention (below min to run, low credit)
+ *   - danger   error / failure
+ *
+ * Use Toast for transient feedback; use Alert when the message belongs
+ * inline with the content.
+ */
+export declare const alertVariants: (props?: ({
+    variant?: "success" | "warning" | "danger" | "info" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface AlertProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title">, VariantProps<typeof alertVariants> {
+    title?: React.ReactNode;
+    /** Set false to hide the leading status icon */
+    showIcon?: boolean;
+    /** Show a close (×) button. Provide onDismiss to handle the click. */
+    dismissible?: boolean;
+    onDismiss?: () => void;
+}
+export declare function Alert({ className, variant, title, showIcon, dismissible, onDismiss, children, ...props }: AlertProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=alert.d.ts.map

package/dist/components/alert.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert.d.ts","sourceRoot":"","sources":["../../src/components/alert.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAIlE;;;;;;;;;;GAUG;AACH,eAAO,MAAM,aAAa;;8EAazB,CAAC;AAgBF,MAAM,WAAW,UACf,SACE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC,EACnD,YAAY,CAAC,OAAO,aAAa,CAAC;IACpC,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,gDAAgD;IAChD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,sEAAsE;IACtE,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB;AAED,wBAAgB,KAAK,CAAC,EACpB,SAAS,EACT,OAAO,EACP,KAAK,EACL,QAAe,EACf,WAAW,EACX,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,UAAU,2CA8CZ"}

package/dist/components/alert.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert.js","sourceRoot":"","sources":["../../src/components/alert.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,GAAG,EAAqB,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,aAAa,EAAE,YAAY,EAAE,IAAI,EAAE,CAAC,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAC7E,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAElC;;;;;;;;;;GAUG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,GAAG,CAC9B,oDAAoD,EACpD;IACE,QAAQ,EAAE;QACR,OAAO,EAAE;YACP,IAAI,EAAE,0CAA0C;YAChD,OAAO,EAAE,gDAAgD;YACzD,OAAO,EAAE,gDAAgD;YACzD,MAAM,EAAE,8CAA8C;SACvD;KACF;IACD,eAAe,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;CACrC,CACF,CAAC;AAEF,MAAM,QAAQ,GAAG;IACf,IAAI,EAAE,IAAI;IACV,OAAO,EAAE,YAAY;IACrB,OAAO,EAAE,aAAa;IACtB,MAAM,EAAE,OAAO;CACP,CAAC;AAEX,MAAM,cAAc,GAAG;IACrB,IAAI,EAAE,WAAW;IACjB,OAAO,EAAE,cAAc;IACvB,OAAO,EAAE,cAAc;IACvB,MAAM,EAAE,aAAa;CACb,CAAC;AAcX,MAAM,UAAU,KAAK,CAAC,EACpB,SAAS,EACT,OAAO,EACP,KAAK,EACL,QAAQ,GAAG,IAAI,EACf,WAAW,EACX,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACG;IACX,MAAM,CAAC,GAAG,OAAO,IAAI,MAAM,CAAC;IAC5B,MAAM,IAAI,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IACzB,MAAM,SAAS,GAAG,cAAc,CAAC,CAAC,CAAC,CAAC;IACpC,OAAO,CACL,cACE,IAAI,EAAE,CAAC,KAAK,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,EACzC,SAAS,EAAE,EAAE,CAAC,aAAa,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,SAAS,CAAC,KACnD,KAAK,YAET,eAAK,SAAS,EAAC,0BAA0B,aACtC,QAAQ,IAAI,CACX,KAAC,IAAI,IACH,SAAS,EAAE,EAAE,CAAC,yBAAyB,EAAE,SAAS,CAAC,EACnD,WAAW,EAAE,CAAC,iBACF,MAAM,GAClB,CACH,EACD,eAAK,SAAS,EAAC,gBAAgB,aAC5B,KAAK,IAAI,CACR,cAAK,SAAS,EAAC,mCAAmC,YAAE,KAAK,GAAO,CACjE,EACA,QAAQ,IAAI,CACX,cACE,SAAS,EAAE,EAAE,CACX,KAAK,IAAI,MAAM,EACf,gGAAgG,CACjG,YAEA,QAAQ,GACL,CACP,IACG,EACL,WAAW,IAAI,CACd,iBACE,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,SAAS,gBACP,SAAS,EACpB,SAAS,EAAC,6RAA6R,YAEvS,KAAC,CAAC,IAAC,SAAS,EAAC,SAAS,EAAC,WAAW,EAAE,IAAI,GAAI,GACrC,CACV,IACG,GACF,CACP,CAAC;AACJ,CAAC"}

package/dist/components/app-shell.d.ts

@@ -0,0 +1,21 @@
+import * as React from "react";
+/**
+ * AppShell — flex layout for sidebar + main content.
+ * The actual sidebar and content are children; AppShell just provides
+ * the full-height flex frame.
+ *
+ *   <AppShell>
+ *     <Sidebar>…</Sidebar>
+ *     <AppMain>
+ *       <TopBar>…</TopBar>
+ *       <PageContent>…</PageContent>
+ *     </AppMain>
+ *   </AppShell>
+ */
+export declare const AppShell: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+/**
+ * AppMain — main content area, scrollable, takes remaining width.
+ * Pair with TopBar (sticky) and your page content inside.
+ */
+export declare const AppMain: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=app-shell.d.ts.map

package/dist/components/app-shell.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"app-shell.d.ts","sourceRoot":"","sources":["../../src/components/app-shell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,QAAQ,6GASnB,CAAC;AAGH;;;GAGG;AACH,eAAO,MAAM,OAAO,6GASlB,CAAC"}

package/dist/components/app-shell.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../lib/utils.js";
+/**
+ * AppShell — flex layout for sidebar + main content.
+ * The actual sidebar and content are children; AppShell just provides
+ * the full-height flex frame.
+ *
+ *   <AppShell>
+ *     <Sidebar>…</Sidebar>
+ *     <AppMain>
+ *       <TopBar>…</TopBar>
+ *       <PageContent>…</PageContent>
+ *     </AppMain>
+ *   </AppShell>
+ */
+export const AppShell = React.forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, className: cn("flex min-h-screen w-full", className), ...props })));
+AppShell.displayName = "AppShell";
+/**
+ * AppMain — main content area, scrollable, takes remaining width.
+ * Pair with TopBar (sticky) and your page content inside.
+ */
+export const AppMain = React.forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, className: cn("flex-1 min-w-0 flex flex-col", className), ...props })));
+AppMain.displayName = "AppMain";
+//# sourceMappingURL=app-shell.js.map

package/dist/components/app-shell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"app-shell.js","sourceRoot":"","sources":["../../src/components/app-shell.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAElC;;;;;;;;;;;;GAYG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CAGtC,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,CAClC,cACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,0BAA0B,EAAE,SAAS,CAAC,KAChD,KAAK,GACT,CACH,CAAC,CAAC;AACH,QAAQ,CAAC,WAAW,GAAG,UAAU,CAAC;AAElC;;;GAGG;AACH,MAAM,CAAC,MAAM,OAAO,GAAG,KAAK,CAAC,UAAU,CAGrC,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,CAClC,cACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,8BAA8B,EAAE,SAAS,CAAC,KACpD,KAAK,GACT,CACH,CAAC,CAAC;AACH,OAAO,CAAC,WAAW,GAAG,SAAS,CAAC"}

package/dist/components/aspect-ratio.d.ts

@@ -0,0 +1,16 @@
+import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio";
+/**
+ * AspectRatio — locks a region to a given ratio without layout shift.
+ *
+ *   <AspectRatio ratio={16 / 9}>
+ *     <iframe src={…} className="h-full w-full" />
+ *   </AspectRatio>
+ *
+ * Common ratios:
+ *   - 16/9   video
+ *   - 4/3    older video / photos
+ *   - 1/1    square
+ *   - 21/9   ultrawide / banner
+ */
+export declare const AspectRatio: import("react").ForwardRefExoticComponent<AspectRatioPrimitive.AspectRatioProps & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=aspect-ratio.d.ts.map

package/dist/components/aspect-ratio.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"aspect-ratio.d.ts","sourceRoot":"","sources":["../../src/components/aspect-ratio.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,oBAAoB,MAAM,8BAA8B,CAAC;AAErE;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,WAAW,kIAA4B,CAAC"}

package/dist/components/aspect-ratio.js

@@ -0,0 +1,17 @@
+"use client";
+import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio";
+/**
+ * AspectRatio — locks a region to a given ratio without layout shift.
+ *
+ *   <AspectRatio ratio={16 / 9}>
+ *     <iframe src={…} className="h-full w-full" />
+ *   </AspectRatio>
+ *
+ * Common ratios:
+ *   - 16/9   video
+ *   - 4/3    older video / photos
+ *   - 1/1    square
+ *   - 21/9   ultrawide / banner
+ */
+export const AspectRatio = AspectRatioPrimitive.Root;
+//# sourceMappingURL=aspect-ratio.js.map

package/dist/components/aspect-ratio.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"aspect-ratio.js","sourceRoot":"","sources":["../../src/components/aspect-ratio.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,KAAK,oBAAoB,MAAM,8BAA8B,CAAC;AAErE;;;;;;;;;;;;GAYG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,oBAAoB,CAAC,IAAI,CAAC"}

package/dist/components/avatar-group.d.ts

@@ -0,0 +1,31 @@
+import * as React from "react";
+/**
+ * AvatarGroup — stacked overlapping avatars. Shows up to `max` avatars
+ * followed by a "+N" pill for the overflow.
+ *
+ *   <AvatarGroup max={4}>
+ *     <Avatar name="Alex Chen" />
+ *     <Avatar name="Jordan Lee" />
+ *     <Avatar name="Sam Patel" />
+ *     <Avatar name="Maria Garcia" />
+ *     <Avatar name="Danny Tran" />
+ *   </AvatarGroup>
+ *
+ * Use for: roster previews, "8 people booked" inline indicators.
+ */
+declare const SIZE_CLASSES: {
+    readonly sm: "h-6 w-6 text-[10px]";
+    readonly default: "h-8 w-8 text-xs";
+    readonly lg: "h-10 w-10 text-sm";
+};
+export interface AvatarGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Max avatars shown before collapsing to "+N". */
+    max?: number;
+    /** Size of the overflow pill — should match the avatars inside. */
+    size?: keyof typeof SIZE_CLASSES;
+    /** Accessible label for screen readers (e.g. "8 players booked"). */
+    label?: string;
+}
+export declare const AvatarGroup: React.ForwardRefExoticComponent<AvatarGroupProps & React.RefAttributes<HTMLDivElement>>;
+export {};
+//# sourceMappingURL=avatar-group.d.ts.map

package/dist/components/avatar-group.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar-group.d.ts","sourceRoot":"","sources":["../../src/components/avatar-group.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B;;;;;;;;;;;;;GAaG;AACH,QAAA,MAAM,YAAY;;;;CAIR,CAAC;AAEX,MAAM,WAAW,gBAAiB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC5E,mDAAmD;IACnD,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,mEAAmE;IACnE,IAAI,CAAC,EAAE,MAAM,OAAO,YAAY,CAAC;IACjC,qEAAqE;IACrE,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,eAAO,MAAM,WAAW,yFAuCvB,CAAC"}

package/dist/components/avatar.d.ts

@@ -0,0 +1,15 @@
+import * as React from "react";
+/**
+ * Avatar — per design.md §10
+ * Sizes: sm 24 / default 32 / lg 64
+ * Fallback: brand-forest bg, white initials (first letter of first + last)
+ */
+export interface AvatarProps extends React.HTMLAttributes<HTMLDivElement> {
+    name: string;
+    src?: string;
+    size?: "sm" | "default" | "lg";
+    /** Optional status dot: lime = checked-in, gray = booked */
+    status?: "checked-in" | "booked";
+}
+export declare function Avatar({ name, src, size, status, className, ...props }: AvatarProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=avatar.d.ts.map

package/dist/components/avatar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar.d.ts","sourceRoot":"","sources":["../../src/components/avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B;;;;GAIG;AACH,MAAM,WAAW,WAAY,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACvE,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,IAAI,GAAG,SAAS,GAAG,IAAI,CAAC;IAC/B,4DAA4D;IAC5D,MAAM,CAAC,EAAE,YAAY,GAAG,QAAQ,CAAC;CAClC;AAeD,wBAAgB,MAAM,CAAC,EACrB,IAAI,EACJ,GAAG,EACH,IAAgB,EAChB,MAAM,EACN,SAAS,EACT,GAAG,KAAK,EACT,EAAE,WAAW,2CA4Cb"}

package/dist/components/avatar.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../lib/utils.js";
+function initials(name) {
+    const parts = name.trim().split(/\s+/);
+    const first = parts[0]?.[0] ?? "";
+    const last = parts.length > 1 ? parts[parts.length - 1][0] : "";
+    return (first + last).toUpperCase() || "?";
+}
+const sizeMap = {
+    sm: { box: "h-6 w-6", text: "text-[10px]", dot: "h-1.5 w-1.5" },
+    default: { box: "h-8 w-8", text: "text-xs", dot: "h-2 w-2" },
+    lg: { box: "h-16 w-16", text: "text-lg", dot: "h-3 w-3" },
+};
+export function Avatar({ name, src, size = "default", status, className, ...props }) {
+    const s = sizeMap[size];
+    return (_jsxs("div", { role: "img", "aria-label": status
+            ? `${name} (${status === "checked-in" ? "checked in" : "booked"})`
+            : name, className: cn("relative inline-flex shrink-0", className), ...props, children: [src ? (_jsx("img", { src: src, alt: name, className: cn("rounded-full object-cover", s.box) })) : (_jsx("div", { className: cn("flex items-center justify-center rounded-full bg-brand-forest text-brand-forest-foreground font-semibold tabular", s.box, s.text), children: initials(name) })), status && (_jsx("span", { "aria-hidden": "true", className: cn("absolute -bottom-0.5 -right-0.5 rounded-full ring-2 ring-background", s.dot, status === "checked-in" ? "bg-brand-lime" : "bg-text-subtle") }))] }));
+}
+//# sourceMappingURL=avatar.js.map

package/dist/components/avatar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar.js","sourceRoot":"","sources":["../../src/components/avatar.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAelC,SAAS,QAAQ,CAAC,IAAY;IAC5B,MAAM,KAAK,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;IACvC,MAAM,KAAK,GAAG,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC;IAClC,MAAM,IAAI,GAAG,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;IAChE,OAAO,CAAC,KAAK,GAAG,IAAI,CAAC,CAAC,WAAW,EAAE,IAAI,GAAG,CAAC;AAC7C,CAAC;AAED,MAAM,OAAO,GAAG;IACd,EAAE,EAAE,EAAE,GAAG,EAAE,SAAS,EAAE,IAAI,EAAE,aAAa,EAAE,GAAG,EAAE,aAAa,EAAE;IAC/D,OAAO,EAAE,EAAE,GAAG,EAAE,SAAS,EAAE,IAAI,EAAE,SAAS,EAAE,GAAG,EAAE,SAAS,EAAE;IAC5D,EAAE,EAAE,EAAE,GAAG,EAAE,WAAW,EAAE,IAAI,EAAE,SAAS,EAAE,GAAG,EAAE,SAAS,EAAE;CAC1D,CAAC;AAEF,MAAM,UAAU,MAAM,CAAC,EACrB,IAAI,EACJ,GAAG,EACH,IAAI,GAAG,SAAS,EAChB,MAAM,EACN,SAAS,EACT,GAAG,KAAK,EACI;IACZ,MAAM,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACxB,OAAO,CACL,eACE,IAAI,EAAC,KAAK,gBAIR,MAAM;YACJ,CAAC,CAAC,GAAG,IAAI,KAAK,MAAM,KAAK,YAAY,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,QAAQ,GAAG;YAClE,CAAC,CAAC,IAAI,EAEV,SAAS,EAAE,EAAE,CAAC,+BAA+B,EAAE,SAAS,CAAC,KACrD,KAAK,aAER,GAAG,CAAC,CAAC,CAAC,CACL,cACE,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,IAAI,EACT,SAAS,EAAE,EAAE,CAAC,2BAA2B,EAAE,CAAC,CAAC,GAAG,CAAC,GACjD,CACH,CAAC,CAAC,CAAC,CACF,cACE,SAAS,EAAE,EAAE,CACX,kHAAkH,EAClH,CAAC,CAAC,GAAG,EACL,CAAC,CAAC,IAAI,CACP,YAEA,QAAQ,CAAC,IAAI,CAAC,GACX,CACP,EACA,MAAM,IAAI,CACT,8BACc,MAAM,EAClB,SAAS,EAAE,EAAE,CACX,qEAAqE,EACrE,CAAC,CAAC,GAAG,EACL,MAAM,KAAK,YAAY,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,gBAAgB,CAC7D,GACD,CACH,IACG,CACP,CAAC;AACJ,CAAC"}

package/dist/components/badge.d.ts

@@ -0,0 +1,27 @@
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+/**
+ * Badge — per design.md §10
+ * Small uppercase pills used as status markers. Always paired with text
+ * (and optionally an icon) so they are NOT color-only signals.
+ *
+ * Sizes:
+ *  - xs (default): 20px tall, 6px horizontal padding
+ *  - sm:           24px tall, 8px horizontal padding
+ *
+ * Shape:
+ *  - rounded-sm (default): square-ish for inline cell badges
+ *  - rounded-full:         pill, reserved for game status (see StatusPill)
+ */
+declare const badgeVariants: (props?: ({
+    variant?: "neutral" | "outline" | "forest" | "lime" | "success" | "warning" | "danger" | "info" | "muted-outline" | null | undefined;
+    size?: "xs" | "sm" | null | undefined;
+    shape?: "square" | "pill" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement>, VariantProps<typeof badgeVariants> {
+    /** Render as the child element (e.g. a link) with badge styling. */
+    asChild?: boolean;
+}
+export declare function Badge({ className, variant, size, shape, asChild, ...props }: BadgeProps): import("react/jsx-runtime").JSX.Element;
+export { badgeVariants };
+//# sourceMappingURL=badge.d.ts.map

package/dist/components/badge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["../../src/components/badge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAGlE;;;;;;;;;;;;GAYG;AACH,QAAA,MAAM,aAAa;;;;8EA+BlB,CAAC;AAEF,MAAM,WAAW,UACf,SACE,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,EACrC,YAAY,CAAC,OAAO,aAAa,CAAC;IACpC,oEAAoE;IACpE,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,wBAAgB,KAAK,CAAC,EACpB,SAAS,EACT,OAAO,EACP,IAAI,EACJ,KAAK,EACL,OAAe,EACf,GAAG,KAAK,EACT,EAAE,UAAU,2CAQZ;AAED,OAAO,EAAE,aAAa,EAAE,CAAC"}

package/dist/components/badge.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+import { cn } from "../lib/utils.js";
+/**
+ * Badge — per design.md §10
+ * Small uppercase pills used as status markers. Always paired with text
+ * (and optionally an icon) so they are NOT color-only signals.
+ *
+ * Sizes:
+ *  - xs (default): 20px tall, 6px horizontal padding
+ *  - sm:           24px tall, 8px horizontal padding
+ *
+ * Shape:
+ *  - rounded-sm (default): square-ish for inline cell badges
+ *  - rounded-full:         pill, reserved for game status (see StatusPill)
+ */
+const badgeVariants = cva("inline-flex items-center gap-1 font-medium uppercase tracking-[0.04em] whitespace-nowrap", {
+    variants: {
+        variant: {
+            neutral: "bg-bg-muted text-foreground",
+            outline: "border border-border-strong bg-transparent text-foreground",
+            forest: "bg-brand-forest text-brand-forest-foreground",
+            lime: "bg-brand-lime text-brand-lime-foreground",
+            success: "bg-success text-success-foreground",
+            warning: "bg-warning text-warning-foreground",
+            danger: "bg-danger text-danger-foreground",
+            info: "bg-info text-info-foreground",
+            "muted-outline": "border border-border-strong bg-transparent text-text-muted",
+        },
+        size: {
+            xs: "h-5 px-1.5 text-[10px] leading-none",
+            sm: "h-6 px-2 text-xs leading-none",
+        },
+        shape: {
+            square: "rounded-sm",
+            pill: "rounded-full",
+        },
+    },
+    defaultVariants: {
+        variant: "neutral",
+        size: "xs",
+        shape: "square",
+    },
+});
+export function Badge({ className, variant, size, shape, asChild = false, ...props }) {
+    const Comp = asChild ? Slot : "span";
+    return (_jsx(Comp, { className: cn(badgeVariants({ variant, size, shape }), className), ...props }));
+}
+export { badgeVariants };
+//# sourceMappingURL=badge.js.map

package/dist/components/badge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"badge.js","sourceRoot":"","sources":["../../src/components/badge.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAC5C,OAAO,EAAE,GAAG,EAAqB,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAElC;;;;;;;;;;;;GAYG;AACH,MAAM,aAAa,GAAG,GAAG,CACvB,0FAA0F,EAC1F;IACE,QAAQ,EAAE;QACR,OAAO,EAAE;YACP,OAAO,EAAE,6BAA6B;YACtC,OAAO,EAAE,4DAA4D;YACrE,MAAM,EAAE,8CAA8C;YACtD,IAAI,EAAE,0CAA0C;YAChD,OAAO,EAAE,oCAAoC;YAC7C,OAAO,EAAE,oCAAoC;YAC7C,MAAM,EAAE,kCAAkC;YAC1C,IAAI,EAAE,8BAA8B;YACpC,eAAe,EACb,4DAA4D;SAC/D;QACD,IAAI,EAAE;YACJ,EAAE,EAAE,qCAAqC;YACzC,EAAE,EAAE,+BAA+B;SACpC;QACD,KAAK,EAAE;YACL,MAAM,EAAE,YAAY;YACpB,IAAI,EAAE,cAAc;SACrB;KACF;IACD,eAAe,EAAE;QACf,OAAO,EAAE,SAAS;QAClB,IAAI,EAAE,IAAI;QACV,KAAK,EAAE,QAAQ;KAChB;CACF,CACF,CAAC;AAUF,MAAM,UAAU,KAAK,CAAC,EACpB,SAAS,EACT,OAAO,EACP,IAAI,EACJ,KAAK,EACL,OAAO,GAAG,KAAK,EACf,GAAG,KAAK,EACG;IACX,MAAM,IAAI,GAAG,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC;IACrC,OAAO,CACL,KAAC,IAAI,IACH,SAAS,EAAE,EAAE,CAAC,aAAa,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,EAAE,SAAS,CAAC,KAC7D,KAAK,GACT,CACH,CAAC;AACJ,CAAC;AAED,OAAO,EAAE,aAAa,EAAE,CAAC"}

package/dist/components/breadcrumb.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumb.js","sourceRoot":"","sources":["../../src/components/breadcrumb.tsx"],"names":[],"mappings":"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"}

package/dist/components/button.d.ts

@@ -0,0 +1,33 @@
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+/**
+ * Button — per design.md §10
+ *
+ * Variants:
+ *  - accent       The single loudest CTA on the screen (Book, Pay, Go Live). Lime, black text.
+ *  - primary      Default primary action. Forest, white text.
+ *  - secondary    Outline button. Cancel, alt actions.
+ *  - ghost        Toolbar / table row actions.
+ *  - destructive  Cancel game, refund, delete.
+ *  - link         In-flow inline link button.
+ *
+ * Sizes: xs (24px) · sm (28px) · default (32px) · lg (36px) · icon (32px
+ * square) · touch (44px — prominent mobile CTAs)
+ *
+ * Accessibility:
+ *  - Visible focus ring (2px theme ring color) via :focus-visible
+ *  - On touch devices (pointer: coarse) every size grows to a 44px
+ *    minimum hit target; visual density is preserved on desktop
+ *  - Disabled state has aria-friendly opacity drop; not interactive
+ *  - Icon-only buttons require aria-label
+ */
+declare const buttonVariants: (props?: ({
+    variant?: "accent" | "primary" | "secondary" | "ghost" | "destructive" | "link" | null | undefined;
+    size?: "xs" | "sm" | "default" | "lg" | "icon" | "touch" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
+    asChild?: boolean;
+}
+export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export { buttonVariants };
+//# sourceMappingURL=button.d.ts.map

package/dist/components/button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../src/components/button.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAGlE;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,QAAA,MAAM,cAAc;;;8EA8BnB,CAAC;AAEF,MAAM,WAAW,WACf,SACE,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAC7C,YAAY,CAAC,OAAO,cAAc,CAAC;IACrC,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,eAAO,MAAM,MAAM,uFAYlB,CAAC;AAGF,OAAO,EAAE,cAAc,EAAE,CAAC"}