@sixthshift/design-system 0.3.0 → 0.4.0

package/src/theme/recipes/tabs.css

@@ -0,0 +1,41 @@
+/**
+ * TabsTrigger recipe — the component-token layer for TabsTrigger.
+ *
+ * This is the mapping from `selected` to a semantic token. It used to live in
+ * the two branches of a `cva` `selected` variant inside TabsTrigger.tsx,
+ * compiled into class-name literals and unreachable from outside. Here it is
+ * data, so a consumer can re-point a cell or scope a change to a subtree.
+ *
+ * The grammar is `--tabs-trigger-{context}[-{state}]` — the same `context`
+ * and `state` words the semantic layer uses (src/theme/schema.ts). `selected`
+ * never appears in a token name: it selects, via the `data-selected`
+ * attribute below. Putting it in the name (`--tabs-trigger-bg-selected`)
+ * would restore the combinatorial explosion this layer exists to remove.
+ *
+ * `@layer components` is load-bearing, not tidiness — see button.css for the
+ * cascade reasoning.
+ */
+
+@layer components {
+  /* The floor, and also the unselected look: quiet text on no surface. A
+     trigger a consumer forgot to mark selected renders as a legible inactive
+     tab rather than something broken. */
+  .tabs-trigger {
+    --tabs-trigger-bg: transparent;
+    --tabs-trigger-bg-hovered: var(--bg-subtle-hovered);
+    --tabs-trigger-fg: var(--fg-subtle);
+    --tabs-trigger-fg-hovered: var(--fg-normal);
+    --tabs-trigger-ring: var(--focus-ring);
+  }
+
+  /* selected — a filled surface, reversed text on top of it. The old code
+     emitted no `hover:` classes at all for the selected branch, so the
+     hovered cells here point straight back at the resting ones: no shift on
+     hover, preserved rather than newly invented. */
+  .tabs-trigger[data-selected="true"] {
+    --tabs-trigger-bg: var(--bg-brand-pressed);
+    --tabs-trigger-bg-hovered: var(--tabs-trigger-bg);
+    --tabs-trigger-fg: var(--fg-on-brand-pressed);
+    --tabs-trigger-fg-hovered: var(--tabs-trigger-fg);
+  }
+}

package/src/theme/recipes/tag-chip.css

@@ -0,0 +1,27 @@
+/**
+ * TagChip recipe — the component-token layer for TagChip.
+ *
+ * TagChip's surface (background, border, foreground) is entirely Badge's:
+ * it renders `<Badge variant="outline" intent="muted">`, so that colour
+ * already comes from `.badge`'s tokens in badge.css — duplicating it here
+ * would just be a second name for the same cell. The only colours TagChip
+ * contributes itself are the muted namespace prefix and the remove ("×")
+ * button, which is why this file covers just those two.
+ *
+ * The grammar is `--tag-chip-{part}-{context}[-{state}]`. Both tokens live
+ * on `.tag-chip` (the root Badge element) and are read by its descendants via
+ * ordinary CSS custom-property inheritance — the namespace `<span>` and the
+ * remove `<button>` need no class hooks of their own for that.
+ *
+ * `@layer components` is load-bearing, not tidiness — see button.css for the
+ * cascade reasoning.
+ */
+
+@layer components {
+  .tag-chip {
+    --tag-chip-namespace-fg: var(--fg-subtle);
+    --tag-chip-remove-fg: var(--fg-subtle);
+    --tag-chip-remove-fg-hovered: var(--fg-normal);
+    --tag-chip-remove-ring: var(--focus-ring);
+  }
+}

package/src/theme/recipes/textarea.css

@@ -0,0 +1,20 @@
+/**
+ * Textarea recipe — the component-token layer for Textarea.
+ *
+ * Same shape as input.css: no variant/intent axis, one floor block. See
+ * button.css's header for why `@layer components` is load-bearing.
+ *
+ * Textarea's background is literal `bg-transparent` in the markup, not a
+ * semantic token today — there is nothing in tier 2 to point a `--textarea-bg`
+ * at, so no such token is introduced here. Border, placeholder and focus ring
+ * are the tokens that existed as semantic classes before this file, and are
+ * the ones made overridable.
+ */
+
+@layer components {
+  .textarea {
+    --textarea-border: var(--border-normal);
+    --textarea-ring: var(--focus-ring);
+    --textarea-placeholder-fg: var(--fg-subtle);
+  }
+}

package/src/theme/recipes/toggle.css

@@ -0,0 +1,92 @@
+/**
+ * Toggle recipe — the pressed-state layer for Toggle and ToggleGroupItem.
+ *
+ * These cells target `.btn`, not a `.toggle` class of their own, because both
+ * components render Button's class and read Button's `--button-*` tokens
+ * (via `buttonRecipe`) — a toggle is a button with a third axis, `state`, not
+ * a different look. Reusing `.btn` here is deliberate, not a shortcut.
+ *
+ * The grammar extends button.css's `(variant, intent)` with a third selector,
+ * `[data-state="on"]` — the same attribute Toggle already renders
+ * (`data-state={pressed ? "on" : "off"}`) and ToggleGroupItem now renders for
+ * `selected`, rather than a new attribute invented for this file. `state`
+ * never appears in a token *name* any more than `intent` does — see
+ * button.css's header for why: it selects, via the attribute, which existing
+ * `--button-bg`/`--button-bg-hovered` values apply.
+ *
+ * Only solid, outline and ghost get cells: a link toggle has no surface to
+ * press, so "on" carries no colour change.
+ *
+ * Every cell repeats its own resting value into `--button-bg-hovered`: the old
+ * classes paired `bg-*` with an identical `hover:bg-*`, i.e. a pressed toggle
+ * deliberately does not shift on hover. Restating it here (rather than relying
+ * on button.css's floor, which chains `-hovered` from `--button-bg`) keeps
+ * that "no shift" behaviour explicit and correct regardless of cascade order
+ * against the button.css cells these compound with.
+ */
+
+@layer components {
+  /* solid — the main -pressed background carries through as both resting and
+     hovered, so pressing never lightens or darkens further on hover. */
+  .btn[data-state="on"][data-variant="solid"][data-intent="brand"] {
+    --button-bg: var(--bg-brand-pressed);
+    --button-bg-hovered: var(--bg-brand-pressed);
+  }
+
+  .btn[data-state="on"][data-variant="solid"][data-intent="neutral"] {
+    --button-bg: var(--bg-strong-pressed);
+    --button-bg-hovered: var(--bg-strong-pressed);
+  }
+
+  .btn[data-state="on"][data-variant="solid"][data-intent="danger"] {
+    --button-bg: var(--bg-danger-pressed);
+    --button-bg-hovered: var(--bg-danger-pressed);
+  }
+
+  .btn[data-state="on"][data-variant="solid"][data-intent="success"] {
+    --button-bg: var(--bg-success-pressed);
+    --button-bg-hovered: var(--bg-success-pressed);
+  }
+
+  .btn[data-state="on"][data-variant="solid"][data-intent="warning"] {
+    --button-bg: var(--bg-warning-pressed);
+    --button-bg-hovered: var(--bg-warning-pressed);
+  }
+
+  /* outline and ghost — same subtle-pressed background and foreground per
+     intent, matching button.css's own pairing of these two variants. */
+  .btn[data-state="on"][data-variant="outline"][data-intent="neutral"],
+  .btn[data-state="on"][data-variant="ghost"][data-intent="neutral"] {
+    --button-bg: var(--bg-subtle-pressed);
+    --button-bg-hovered: var(--bg-subtle-pressed);
+    --button-fg: var(--fg-normal);
+  }
+
+  .btn[data-state="on"][data-variant="outline"][data-intent="brand"],
+  .btn[data-state="on"][data-variant="ghost"][data-intent="brand"] {
+    --button-bg: var(--bg-brand-subtle-pressed);
+    --button-bg-hovered: var(--bg-brand-subtle-pressed);
+    --button-fg: var(--fg-on-brand-subtle-pressed);
+  }
+
+  .btn[data-state="on"][data-variant="outline"][data-intent="danger"],
+  .btn[data-state="on"][data-variant="ghost"][data-intent="danger"] {
+    --button-bg: var(--bg-danger-subtle-pressed);
+    --button-bg-hovered: var(--bg-danger-subtle-pressed);
+    --button-fg: var(--fg-on-danger-subtle-pressed);
+  }
+
+  .btn[data-state="on"][data-variant="outline"][data-intent="success"],
+  .btn[data-state="on"][data-variant="ghost"][data-intent="success"] {
+    --button-bg: var(--bg-success-subtle-pressed);
+    --button-bg-hovered: var(--bg-success-subtle-pressed);
+    --button-fg: var(--fg-on-success-subtle-pressed);
+  }
+
+  .btn[data-state="on"][data-variant="outline"][data-intent="warning"],
+  .btn[data-state="on"][data-variant="ghost"][data-intent="warning"] {
+    --button-bg: var(--bg-warning-subtle-pressed);
+    --button-bg-hovered: var(--bg-warning-subtle-pressed);
+    --button-fg: var(--fg-on-warning-subtle-pressed);
+  }
+}

package/src/theme/schema.ts

@@ -28,14 +28,6 @@
 /** Hex color value, e.g., "#6366f1" */
 export type HexValue = string;
 
-/**
- * HSL color value without wrapper, e.g., "239 84% 67%"
- *
- * @deprecated Tokens hold hex values and palette references, never bare HSL
- * triples. Kept only so the export surface stays stable.
- */
-export type HSLValue = string;
-
 /** Color mode */
 export type ColorMode = "light" | "dark";
 
@@ -106,15 +98,6 @@ export type ColorToken = TokenName;
 /** CSS variable name format */
 export type CSSVarName = `--${ColorToken}`;
 
-/** @deprecated Use {@link BgToken}. */
-export type BgKey = BgToken;
-/** @deprecated Use {@link FgToken}. */
-export type FgKey = FgToken;
-/** @deprecated Use {@link BorderToken}. */
-export type BorderKey = BorderToken;
-/** @deprecated Use {@link TokenName}. */
-export type TokenKey = TokenName;
-
 // =============================================================================
 // THEME SHAPE
 // =============================================================================
@@ -138,13 +121,3 @@ export type ThemeSchema = {
 export function cssVar(token: ColorToken): string {
   return `var(--${token})`;
 }
-
-/**
- * Type-safe HSL wrapper for Tailwind
- *
- * @deprecated Token values are hex and palette references, so wrapping one in
- * `hsl()` yields invalid CSS. Use {@link cssVar}.
- */
-export function hsl(token: ColorToken): string {
-  return `hsl(var(--${token}))`;
-}

package/src/theme/tokens.css

@@ -1,16 +1,27 @@
 /**
  * Design tokens — the single source of truth for the design system.
  *
- * Hand-edited. Four layers, in order:
+ * Hand-edited. Three token tiers, each answering a different question, and each
+ * with a different editor:
  *
- *   1. Palette — raw scales. Never referenced by components.
- *   2. Semantic — what components actually use, one block per mode. Every
- *      value points at a palette entry, so a re-skin edits layer 1 only.
- *   3. `@theme` — tells Tailwind which utilities exist. Every semantic token
- *      needs an entry here or its class does not compile.
- *   4. `@layer base` — the few global rules the components genuinely need. App
- *      opinions (page background, scroll behaviour) are deliberately not here:
- *      a library has no business restyling its consumer's page.
+ *   1. Palette — raw scales. What colours exist. Never referenced by
+ *      components; a new hue is added here and nowhere else.
+ *   2. Semantic — what a colour *means*, one block per mode. Every value points
+ *      at a palette entry, so a re-skin edits tier 1 only. This tier is what
+ *      collapses the light/dark axis: 145 of its tokens remap between modes, so
+ *      nothing downstream has to know a mode exists.
+ *   3. Component — which meaning a given component part uses, per variant and
+ *      state. Lives in `recipes/`, imported below. This is the consumer's
+ *      override surface: tier 2 is edited to re-skin, tier 3 to re-wire.
+ *
+ * Two emitters carry the tiers into the build:
+ *
+ *   - `@theme` tells Tailwind which utilities exist. Every semantic token needs
+ *     an entry here or its class does not compile. Component tokens do not —
+ *     tier 3 is read as plain `var()` in CSS, never through a utility.
+ *   - `@layer base` holds the few global rules the components genuinely need.
+ *     App opinions (page background, scroll behaviour) are deliberately not
+ *     here: a library has no business restyling its consumer's page.
  *
  * Nothing verifies any of that, so when you add a token: put it in *both* mode
  * blocks and give it a `@theme` entry. Miss the dark block and it is undefined
@@ -18,6 +29,12 @@
  * failure raises an error anywhere.
  */
 
+/* Tier 3. Imported here rather than from each component's `.tsx` so it reaches
+   consumers through the `theme.css` import they already have — the build is
+   `tsc` only, which does not copy `.css` into `dist/`. `@import` must precede
+   every rule in this file, so this stays at the top. */
+@import "./recipes/index.css";
+
 /* =============================================================================
    1. PALETTE
    ============================================================================= */

package/dist/components/Avatar/Avatar.d.ts

@@ -1,6 +0,0 @@
-import * as React from "react";
-declare const Avatar: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & React.RefAttributes<HTMLSpanElement>>;
-declare const AvatarImage: React.ForwardRefExoticComponent<React.ImgHTMLAttributes<HTMLImageElement> & React.RefAttributes<HTMLImageElement>>;
-declare const AvatarFallback: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & React.RefAttributes<HTMLSpanElement>>;
-export { Avatar, AvatarFallback, AvatarImage };
-//# sourceMappingURL=Avatar.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../src/components/Avatar/Avatar.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,QAAA,MAAM,MAAM,+GAEV,CAAC;AAGH,QAAA,MAAM,WAAW,oHAEf,CAAC;AAGH,QAAA,MAAM,cAAc,+GAElB,CAAC;AAGH,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,WAAW,EAAE,CAAC"}

package/dist/components/Avatar/Avatar.js

@@ -1,11 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { cn } from "@sixthshift/design-system/utils";
-import * as React from "react";
-const Avatar = React.forwardRef(({ className, ...props }, ref) => (_jsx("span", { ref: ref, className: cn("relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full", className), ...props })));
-Avatar.displayName = "Avatar";
-const AvatarImage = React.forwardRef(({ className, alt, ...props }, ref) => (_jsx("img", { ref: ref, alt: alt, className: cn("aspect-square h-full w-full", className), ...props })));
-AvatarImage.displayName = "AvatarImage";
-const AvatarFallback = React.forwardRef(({ className, ...props }, ref) => (_jsx("span", { ref: ref, className: cn("flex h-full w-full items-center justify-center rounded-full bg-bg-subtle font-medium text-sm", className), ...props })));
-AvatarFallback.displayName = "AvatarFallback";
-export { Avatar, AvatarFallback, AvatarImage };
-//# sourceMappingURL=Avatar.js.map

package/dist/components/Avatar/Avatar.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Avatar.js","sourceRoot":"","sources":["../../../src/components/Avatar/Avatar.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,iCAAiC,CAAC;AACrD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,MAAM,GAAG,KAAK,CAAC,UAAU,CAAyD,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,CACxH,eAAM,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,EAAE,CAAC,+DAA+D,EAAE,SAAS,CAAC,KAAM,KAAK,GAAI,CACzH,CAAC,CAAC;AACH,MAAM,CAAC,WAAW,GAAG,QAAQ,CAAC;AAE9B,MAAM,WAAW,GAAG,KAAK,CAAC,UAAU,CAA8D,CAAC,EAAE,SAAS,EAAE,GAAG,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,CACvI,cAAK,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,EAAE,CAAC,6BAA6B,EAAE,SAAS,CAAC,KAAM,KAAK,GAAI,CAChG,CAAC,CAAC;AACH,WAAW,CAAC,WAAW,GAAG,aAAa,CAAC;AAExC,MAAM,cAAc,GAAG,KAAK,CAAC,UAAU,CAAyD,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,CAChI,eAAM,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,EAAE,CAAC,8FAA8F,EAAE,SAAS,CAAC,KAAM,KAAK,GAAI,CACxJ,CAAC,CAAC;AACH,cAAc,CAAC,WAAW,GAAG,gBAAgB,CAAC;AAE9C,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,WAAW,EAAE,CAAC"}

package/dist/components/Avatar/index.d.ts

@@ -1,2 +0,0 @@
-export { Avatar, AvatarFallback, AvatarImage } from "./Avatar.js";
-//# sourceMappingURL=index.d.ts.map

package/dist/components/Avatar/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Avatar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC"}

package/dist/components/Avatar/index.js

@@ -1,2 +0,0 @@
-export { Avatar, AvatarFallback, AvatarImage } from "./Avatar.js";
-//# sourceMappingURL=index.js.map

package/dist/components/Avatar/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Avatar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC"}

package/dist/components/Breadcrumb/Breadcrumb.d.ts

@@ -1,12 +0,0 @@
-import { type ComponentPropsWithoutRef, type ReactNode } from "react";
-export type BreadcrumbItem = {
-    label: ReactNode;
-    href?: string;
-};
-export type BreadcrumbProps = Omit<ComponentPropsWithoutRef<"nav">, "children"> & {
-    items: BreadcrumbItem[];
-};
-export declare const Breadcrumb: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "ref">, "children"> & {
-    items: BreadcrumbItem[];
-} & import("react").RefAttributes<HTMLElement>>;
-//# sourceMappingURL=Breadcrumb.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"Breadcrumb.d.ts","sourceRoot":"","sources":["../../../src/components/Breadcrumb/Breadcrumb.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,wBAAwB,EAAc,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAElF,MAAM,MAAM,cAAc,GAAG;IAC3B,KAAK,EAAE,SAAS,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,GAAG;IAChF,KAAK,EAAE,cAAc,EAAE,CAAC;CACzB,CAAC;AAEF,eAAO,MAAM,UAAU;WAHd,cAAc,EAAE;+CAkCvB,CAAC"}

package/dist/components/Breadcrumb/Breadcrumb.js

@@ -1,19 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useComponents } from "@sixthshift/design-system/components";
-import { cn } from "@sixthshift/design-system/utils";
-import { ChevronRight } from "lucide-react";
-import { forwardRef } from "react";
-export const Breadcrumb = forwardRef(({ className, items, ...props }, ref) => {
-    const { Link } = useComponents();
-    if (items.length === 0)
-        return null;
-    return (_jsx("nav", { ref: ref, "aria-label": "breadcrumb", className: cn("", className), ...props, children: _jsx("ol", { className: "flex flex-wrap items-center gap-1.5 text-sm sm:gap-2.5", children: items.map((item, index) => {
-                const isLast = index === items.length - 1;
-                const isClickable = !isLast && item.href;
-                return (
-                // biome-ignore lint/suspicious/noArrayIndexKey: Breadcrumb path items maintain stable order
-                _jsxs("li", { className: "inline-flex items-center gap-1.5", children: [isClickable ? (_jsx(Link, { href: item.href, className: "text-fg-subtle transition-colors hover:text-fg-normal", children: item.label })) : (_jsx("span", { className: cn(isLast ? "font-medium text-fg-normal" : "text-fg-subtle"), "aria-current": isLast ? "page" : undefined, children: item.label })), !isLast && _jsx(ChevronRight, { className: "size-3.5 text-fg-subtle", "aria-hidden": "true" })] }, index));
-            }) }) }));
-});
-Breadcrumb.displayName = "Breadcrumb";
-//# sourceMappingURL=Breadcrumb.js.map

package/dist/components/Breadcrumb/Breadcrumb.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Breadcrumb.js","sourceRoot":"","sources":["../../../src/components/Breadcrumb/Breadcrumb.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,sCAAsC,CAAC;AACrE,OAAO,EAAE,EAAE,EAAE,MAAM,iCAAiC,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAC5C,OAAO,EAAiC,UAAU,EAAkB,MAAM,OAAO,CAAC;AAWlF,MAAM,CAAC,MAAM,UAAU,GAAG,UAAU,CAA+B,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IACzG,MAAM,EAAE,IAAI,EAAE,GAAG,aAAa,EAAE,CAAC;IAEjC,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC;QAAE,OAAO,IAAI,CAAC;IAEpC,OAAO,CACL,cAAK,GAAG,EAAE,GAAG,gBAAa,YAAY,EAAC,SAAS,EAAE,EAAE,CAAC,EAAE,EAAE,SAAS,CAAC,KAAM,KAAK,YAC5E,aAAI,SAAS,EAAC,wDAAwD,YACnE,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;gBACzB,MAAM,MAAM,GAAG,KAAK,KAAK,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC;gBAC1C,MAAM,WAAW,GAAG,CAAC,MAAM,IAAI,IAAI,CAAC,IAAI,CAAC;gBAEzC,OAAO;gBACL,4FAA4F;gBAC5F,cAAgB,SAAS,EAAC,kCAAkC,aACzD,WAAW,CAAC,CAAC,CAAC,CACb,KAAC,IAAI,IAAC,IAAI,EAAE,IAAI,CAAC,IAAK,EAAE,SAAS,EAAC,uDAAuD,YACtF,IAAI,CAAC,KAAK,GACN,CACR,CAAC,CAAC,CAAC,CACF,eAAM,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,4BAA4B,CAAC,CAAC,CAAC,gBAAgB,CAAC,kBAAgB,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,YACrH,IAAI,CAAC,KAAK,GACN,CACR,EACA,CAAC,MAAM,IAAI,KAAC,YAAY,IAAC,SAAS,EAAC,yBAAyB,iBAAa,MAAM,GAAG,KAV5E,KAAK,CAWT,CACN,CAAC;YACJ,CAAC,CAAC,GACC,GACD,CACP,CAAC;AACJ,CAAC,CAAC,CAAC;AACH,UAAU,CAAC,WAAW,GAAG,YAAY,CAAC"}

package/dist/components/Breadcrumb/index.d.ts

@@ -1,2 +0,0 @@
-export { Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, } from "./Breadcrumb.js";
-//# sourceMappingURL=index.d.ts.map

package/dist/components/Breadcrumb/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Breadcrumb/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,UAAU,EACV,KAAK,cAAc,EACnB,KAAK,eAAe,GACrB,MAAM,cAAc,CAAC"}

package/dist/components/Breadcrumb/index.js

@@ -1,2 +0,0 @@
-export { Breadcrumb, } from "./Breadcrumb.js";
-//# sourceMappingURL=index.js.map

package/dist/components/Breadcrumb/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Breadcrumb/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,UAAU,GAGX,MAAM,cAAc,CAAC"}

package/dist/components/ColorDot/ColorDot.d.ts

@@ -1,19 +0,0 @@
-import { type VariantProps } from "class-variance-authority";
-import * as React from "react";
-declare const colorDotVariants: (props?: ({
-    size?: "sm" | "lg" | "md" | null | undefined;
-    pulse?: boolean | null | undefined;
-} & import("class-variance-authority/types").ClassProp) | undefined) => string;
-export type ColorDotProps = React.HTMLAttributes<HTMLSpanElement> & VariantProps<typeof colorDotVariants> & {
-    /** Intent name (neutral, brand, success, warning, danger) or arbitrary CSS color */
-    color: string;
-};
-export declare const ColorDot: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & VariantProps<(props?: ({
-    size?: "sm" | "lg" | "md" | null | undefined;
-    pulse?: boolean | null | undefined;
-} & import("class-variance-authority/types").ClassProp) | undefined) => string> & {
-    /** Intent name (neutral, brand, success, warning, danger) or arbitrary CSS color */
-    color: string;
-} & React.RefAttributes<HTMLSpanElement>>;
-export { colorDotVariants };
-//# sourceMappingURL=ColorDot.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"ColorDot.d.ts","sourceRoot":"","sources":["../../../src/components/ColorDot/ColorDot.tsx"],"names":[],"mappings":"AACA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAW/B,QAAA,MAAM,gBAAgB;;;8EAgBpB,CAAC;AAEH,MAAM,MAAM,aAAa,GAAG,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,GAC/D,YAAY,CAAC,OAAO,gBAAgB,CAAC,GAAG;IACtC,oFAAoF;IACpF,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEJ,eAAO,MAAM,QAAQ;;;;IAJjB,oFAAoF;WAC7E,MAAM;yCAcf,CAAC;AAGH,OAAO,EAAE,gBAAgB,EAAE,CAAC"}

package/dist/components/ColorDot/ColorDot.js

@@ -1,36 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { cn } from "@sixthshift/design-system/utils";
-import { cva } from "class-variance-authority";
-import * as React from "react";
-const INTENT_CLASSES = {
-    neutral: "bg-fg-subtle",
-    brand: "bg-bg-brand",
-    primary: "bg-bg-brand",
-    success: "bg-bg-success",
-    warning: "bg-bg-warning",
-    danger: "bg-bg-danger",
-};
-const colorDotVariants = cva("inline-block shrink-0 rounded-full", {
-    variants: {
-        size: {
-            sm: "h-1.5 w-1.5",
-            md: "h-2 w-2",
-            lg: "h-2.5 w-2.5",
-        },
-        pulse: {
-            true: "animate-pulse",
-            false: "",
-        },
-    },
-    defaultVariants: {
-        size: "md",
-        pulse: false,
-    },
-});
-export const ColorDot = React.forwardRef(({ color, size, pulse, className, style, ...props }, ref) => {
-    const intentClass = INTENT_CLASSES[color];
-    return (_jsx("span", { ref: ref, className: cn(colorDotVariants({ size, pulse }), intentClass, className), style: intentClass ? style : { ...style, backgroundColor: color }, ...props }));
-});
-ColorDot.displayName = "ColorDot";
-export { colorDotVariants };
-//# sourceMappingURL=ColorDot.js.map

package/dist/components/ColorDot/ColorDot.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ColorDot.js","sourceRoot":"","sources":["../../../src/components/ColorDot/ColorDot.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,iCAAiC,CAAC;AACrD,OAAO,EAAE,GAAG,EAAqB,MAAM,0BAA0B,CAAC;AAClE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,cAAc,GAA2B;IAC7C,OAAO,EAAE,cAAc;IACvB,KAAK,EAAE,aAAa;IACpB,OAAO,EAAE,aAAa;IACtB,OAAO,EAAE,eAAe;IACxB,OAAO,EAAE,eAAe;IACxB,MAAM,EAAE,cAAc;CACvB,CAAC;AAEF,MAAM,gBAAgB,GAAG,GAAG,CAAC,oCAAoC,EAAE;IACjE,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,EAAE,EAAE,aAAa;YACjB,EAAE,EAAE,SAAS;YACb,EAAE,EAAE,aAAa;SAClB;QACD,KAAK,EAAE;YACL,IAAI,EAAE,eAAe;YACrB,KAAK,EAAE,EAAE;SACV;KACF;IACD,eAAe,EAAE;QACf,IAAI,EAAE,IAAI;QACV,KAAK,EAAE,KAAK;KACb;CACF,CAAC,CAAC;AAQH,MAAM,CAAC,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CAAiC,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IACnI,MAAM,WAAW,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC;IAE1C,OAAO,CACL,eACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,gBAAgB,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,EAAE,WAAW,EAAE,SAAS,CAAC,EACxE,KAAK,EAAE,WAAW,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,GAAG,KAAK,EAAE,eAAe,EAAE,KAAK,EAAE,KAC7D,KAAK,GACT,CACH,CAAC;AACJ,CAAC,CAAC,CAAC;AACH,QAAQ,CAAC,WAAW,GAAG,UAAU,CAAC;AAElC,OAAO,EAAE,gBAAgB,EAAE,CAAC"}

package/dist/components/ColorDot/index.d.ts

@@ -1,2 +0,0 @@
-export { ColorDot, type ColorDotProps, colorDotVariants } from "./ColorDot.js";
-//# sourceMappingURL=index.d.ts.map

package/dist/components/ColorDot/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ColorDot/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC"}

package/dist/components/ColorDot/index.js

@@ -1,2 +0,0 @@
-export { ColorDot, colorDotVariants } from "./ColorDot.js";
-//# sourceMappingURL=index.js.map

package/dist/components/ColorDot/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/ColorDot/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAsB,gBAAgB,EAAE,MAAM,YAAY,CAAC"}

package/dist/components/EmptyState/EmptyState.d.ts

@@ -1,26 +0,0 @@
-import * as React from "react";
-export type EmptyStateProps = React.HTMLAttributes<HTMLDivElement> & {
-    /** Optional icon to display */
-    icon?: React.ReactNode;
-    /** Message to display */
-    message: string;
-    /** Optional description for more context */
-    description?: string;
-    /** Optional action button or element */
-    action?: React.ReactNode;
-    /** Additional CSS classes */
-    className?: string;
-};
-export declare const EmptyState: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
-    /** Optional icon to display */
-    icon?: React.ReactNode;
-    /** Message to display */
-    message: string;
-    /** Optional description for more context */
-    description?: string;
-    /** Optional action button or element */
-    action?: React.ReactNode;
-    /** Additional CSS classes */
-    className?: string;
-} & React.RefAttributes<HTMLDivElement>>;
-//# sourceMappingURL=EmptyState.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"EmptyState.d.ts","sourceRoot":"","sources":["../../../src/components/EmptyState/EmptyState.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,MAAM,eAAe,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,GAAG;IACnE,+BAA+B;IAC/B,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,yBAAyB;IACzB,OAAO,EAAE,MAAM,CAAC;IAChB,4CAA4C;IAC5C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,wCAAwC;IACxC,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,UAAU;IAZrB,+BAA+B;WACxB,KAAK,CAAC,SAAS;IACtB,yBAAyB;aAChB,MAAM;IACf,4CAA4C;kBAC9B,MAAM;IACpB,wCAAwC;aAC/B,KAAK,CAAC,SAAS;IACxB,6BAA6B;gBACjB,MAAM;wCAclB,CAAC"}

package/dist/components/EmptyState/EmptyState.js

@@ -1,9 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Muted } from "@sixthshift/design-system/muted";
-import { cn } from "@sixthshift/design-system/utils";
-import * as React from "react";
-export const EmptyState = React.forwardRef(({ icon, message, description, action, className, ...props }, ref) => {
-    return (_jsxs("div", { ref: ref, className: cn("flex flex-col items-center justify-center gap-3 p-8 text-center", className), ...props, children: [icon && _jsx("div", { className: "text-fg-subtle", children: icon }), _jsxs("div", { className: "flex flex-col gap-1", children: [_jsx(Muted, { children: message }), description && _jsx("span", { className: "text-fg-subtle text-xs", children: description })] }), action && _jsx("div", { className: "mt-2", children: action })] }));
-});
-EmptyState.displayName = "EmptyState";
-//# sourceMappingURL=EmptyState.js.map

package/dist/components/EmptyState/EmptyState.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"EmptyState.js","sourceRoot":"","sources":["../../../src/components/EmptyState/EmptyState.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,iCAAiC,CAAC;AACxD,OAAO,EAAE,EAAE,EAAE,MAAM,iCAAiC,CAAC;AACrD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAe/B,MAAM,CAAC,MAAM,UAAU,GAAG,KAAK,CAAC,UAAU,CAAkC,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IAC/I,OAAO,CACL,eAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,EAAE,CAAC,iEAAiE,EAAE,SAAS,CAAC,KAAM,KAAK,aAClH,IAAI,IAAI,cAAK,SAAS,EAAC,gBAAgB,YAAE,IAAI,GAAO,EACrD,eAAK,SAAS,EAAC,qBAAqB,aAClC,KAAC,KAAK,cAAE,OAAO,GAAS,EACvB,WAAW,IAAI,eAAM,SAAS,EAAC,wBAAwB,YAAE,WAAW,GAAQ,IACzE,EACL,MAAM,IAAI,cAAK,SAAS,EAAC,MAAM,YAAE,MAAM,GAAO,IAC3C,CACP,CAAC;AACJ,CAAC,CAAC,CAAC;AACH,UAAU,CAAC,WAAW,GAAG,YAAY,CAAC"}

package/dist/components/EmptyState/index.d.ts

@@ -1,2 +0,0 @@
-export { EmptyState, type EmptyStateProps } from "./EmptyState.js";
-//# sourceMappingURL=index.d.ts.map

package/dist/components/EmptyState/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/EmptyState/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,cAAc,CAAC"}

package/dist/components/EmptyState/index.js

@@ -1,2 +0,0 @@
-export { EmptyState } from "./EmptyState.js";
-//# sourceMappingURL=index.js.map

package/dist/components/EmptyState/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/EmptyState/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAwB,MAAM,cAAc,CAAC"}

package/dist/components/HeatMap/HeatMapCalendar.d.ts

@@ -1,11 +0,0 @@
-import type * as React from "react";
-import { type HeatMapCell } from "./heat-map.utils.js";
-export type HeatMapCalendarProps = React.HTMLAttributes<HTMLDivElement> & {
-    data: HeatMapCell[];
-    colorScale?: string[];
-    cellSize?: number;
-    cellGap?: number;
-    formatTooltip?: (cell: HeatMapCell) => string;
-};
-export declare const HeatMapCalendar: ({ data, colorScale, cellSize, cellGap, formatTooltip, className, ...rest }: HeatMapCalendarProps) => React.JSX.Element | null;
-//# sourceMappingURL=HeatMapCalendar.d.ts.map

package/dist/components/HeatMap/HeatMapCalendar.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"HeatMapCalendar.d.ts","sourceRoot":"","sources":["../../../src/components/HeatMap/HeatMapCalendar.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAEpC,OAAO,EAA2D,KAAK,WAAW,EAAe,MAAM,kBAAkB,CAAC;AAE1H,MAAM,MAAM,oBAAoB,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,GAAG;IACxE,IAAI,EAAE,WAAW,EAAE,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,MAAM,CAAC;CAC/C,CAAC;AAgEF,eAAO,MAAM,eAAe,+EAQzB,oBAAoB,6BA2CtB,CAAC"}

package/dist/components/HeatMap/HeatMapCalendar.js

@@ -1,68 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cn } from "@sixthshift/design-system/utils";
-import { Temporal } from "../../date-time/index.js";
-import { DAY_KEYS, DAY_LABELS, DEFAULT_COLOR_SCALE, getIntensity, MONTH_NAMES } from "./heat-map.utils.js";
-function buildMonthGrids(data) {
-    const dataMap = new Map(data.map((d) => [d.date, d.value]));
-    const dates = data.map((d) => Temporal.PlainDate.from(d.date)).sort(Temporal.PlainDate.compare);
-    const minDate = dates[0];
-    const maxDate = dates[dates.length - 1];
-    const months = [];
-    let cursor = Temporal.PlainDate.from({ year: minDate.year, month: minDate.month, day: 1 });
-    const endMonth = Temporal.PlainDate.from({ year: maxDate.year, month: maxDate.month, day: 1 });
-    while (Temporal.PlainDate.compare(cursor, endMonth) <= 0) {
-        const year = cursor.year;
-        const month = cursor.month;
-        const daysInMonth = cursor.daysInMonth;
-        const weeks = [];
-        let currentWeek = [];
-        const firstDow = cursor.dayOfWeek - 1;
-        for (let i = 0; i < firstDow; i++) {
-            currentWeek.push(null);
-        }
-        for (let day = 1; day <= daysInMonth; day++) {
-            const date = Temporal.PlainDate.from({ year, month, day });
-            const dateStr = date.toString();
-            const col = date.dayOfWeek - 1;
-            currentWeek.push({ date: dateStr, value: dataMap.get(dateStr) ?? 0, col });
-            if (col === 6 || day === daysInMonth) {
-                if (day === daysInMonth && col < 6) {
-                    for (let i = col + 1; i <= 6; i++) {
-                        currentWeek.push(null);
-                    }
-                }
-                weeks.push(currentWeek);
-                currentWeek = [];
-            }
-        }
-        months.push({
-            year,
-            month,
-            label: `${MONTH_NAMES[month - 1]} ${year}`,
-            weeks,
-        });
-        cursor = month === 12 ? Temporal.PlainDate.from({ year: year + 1, month: 1, day: 1 }) : Temporal.PlainDate.from({ year, month: month + 1, day: 1 });
-    }
-    return months;
-}
-export const HeatMapCalendar = ({ data, colorScale = DEFAULT_COLOR_SCALE, cellSize = 12, cellGap = 2, formatTooltip, className, ...rest }) => {
-    if (data.length === 0)
-        return null;
-    const maxValue = Math.max(...data.map((d) => d.value), 1);
-    const months = buildMonthGrids(data);
-    const step = cellSize + cellGap;
-    const gridWidth = 7 * step;
-    return (_jsx("div", { ...rest, className: cn("flex flex-wrap gap-4", className), children: months.map((month) => {
-            const headerHeight = 24;
-            const dayLabelHeight = 14;
-            const svgHeight = headerHeight + dayLabelHeight + month.weeks.length * step;
-            return (_jsxs("svg", { width: gridWidth, height: svgHeight, className: "overflow-visible", role: "img", children: [_jsx("title", { children: month.label }), _jsx("text", { x: 0, y: 14, className: "fill-fg-normal", fontSize: 12, fontWeight: 500, children: month.label }), DAY_LABELS.map((label, i) => (_jsx("text", { x: i * step + cellSize / 2, y: headerHeight + 10, textAnchor: "middle", className: "fill-fg-subtle", fontSize: 9, children: label }, `day-${DAY_KEYS[i]}`))), month.weeks.map((week, wi) => week.map((cell) => {
-                        if (!cell)
-                            return null;
-                        const intensity = getIntensity(cell.value, maxValue, colorScale.length);
-                        const fill = cell.value > 0 ? colorScale[intensity] : colorScale[0];
-                        return (_jsx("rect", { x: cell.col * step, y: headerHeight + dayLabelHeight + wi * step, width: cellSize, height: cellSize, rx: 2, fill: fill, children: formatTooltip && _jsx("title", { children: formatTooltip({ date: cell.date, value: cell.value }) }) }, cell.date));
-                    }))] }, month.label));
-        }) }));
-};
-//# sourceMappingURL=HeatMapCalendar.js.map