@sixthshift/design-system 0.7.0 → 0.9.0

package/dist/components/Steps/Steps.d.ts

@@ -0,0 +1,65 @@
+import * as React from "react";
+/**
+ * Geometry only. Every colour reads a `--steps-*` component token whose value
+ * is decided by src/components/Steps/steps.recipe.css, selected by the
+ * `data-state` each item renders (`complete`, `current`, `upcoming`).
+ */
+declare const stepsVariants: (props?: ({
+    orientation?: "horizontal" | "vertical" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type StepsOrientation = "horizontal" | "vertical";
+/** Where a step sits relative to `current`. Rendered as `data-state`. */
+export type StepState = "complete" | "current" | "upcoming";
+export type StepItem = {
+    /** Visible step name. */
+    label: React.ReactNode;
+    /** Secondary line under the label. */
+    description?: React.ReactNode;
+};
+export type StepsProps = Omit<React.OlHTMLAttributes<HTMLOListElement>, "children"> & {
+    /** The steps, in order. */
+    steps: readonly StepItem[];
+    /** Zero-based index of the step in progress. `steps.length` marks every step complete. */
+    current: number;
+    /**
+     * Makes completed steps clickable, for going back in a wizard. Upcoming
+     * steps never are — skipping ahead is the flow's decision, not the
+     * indicator's.
+     */
+    onStepClick?: (index: number) => void;
+    /** Layout direction. `horizontal` collapses labels to the current step's on narrow screens. */
+    orientation?: StepsOrientation;
+};
+/**
+ * Progress through a fixed sequence — checkout, onboarding, a multi-page
+ * form. Display-only: the step in progress is the `current` prop, owned by
+ * whatever runs the flow, so there is no internal state to control.
+ *
+ * Renders an `<ol>` (pass `aria-label`, e.g. "Checkout progress"); the
+ * current item carries `aria-current="step"`, and each indicator has a
+ * visually hidden status ("completed", "current") so the sequence reads
+ * correctly without the colours.
+ *
+ * With `onStepClick`, completed steps become buttons. Current and upcoming
+ * steps stay plain text: a step indicator that let you jump forward would be
+ * making the flow's validation decisions for it.
+ *
+ * Horizontally, every label shows from `sm` up; below that only the current
+ * step's label does, so four steps still fit a phone.
+ */
+export declare const Steps: React.ForwardRefExoticComponent<Omit<React.OlHTMLAttributes<HTMLOListElement>, "children"> & {
+    /** The steps, in order. */
+    steps: readonly StepItem[];
+    /** Zero-based index of the step in progress. `steps.length` marks every step complete. */
+    current: number;
+    /**
+     * Makes completed steps clickable, for going back in a wizard. Upcoming
+     * steps never are — skipping ahead is the flow's decision, not the
+     * indicator's.
+     */
+    onStepClick?: (index: number) => void;
+    /** Layout direction. `horizontal` collapses labels to the current step's on narrow screens. */
+    orientation?: StepsOrientation;
+} & React.RefAttributes<HTMLOListElement>>;
+export { stepsVariants };
+//# sourceMappingURL=Steps.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Steps.d.ts","sourceRoot":"","sources":["../../../src/components/Steps/Steps.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B;;;;GAIG;AACH,QAAA,MAAM,aAAa;;8EAUjB,CAAC;AAEH,MAAM,MAAM,gBAAgB,GAAG,YAAY,GAAG,UAAU,CAAC;AAEzD,yEAAyE;AACzE,MAAM,MAAM,SAAS,GAAG,UAAU,GAAG,SAAS,GAAG,UAAU,CAAC;AAE5D,MAAM,MAAM,QAAQ,GAAG;IACrB,yBAAyB;IACzB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,sCAAsC;IACtC,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC/B,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,gBAAgB,CAAC,gBAAgB,CAAC,EAAE,UAAU,CAAC,GAAG;IACpF,2BAA2B;IAC3B,KAAK,EAAE,SAAS,QAAQ,EAAE,CAAC;IAC3B,0FAA0F;IAC1F,OAAO,EAAE,MAAM,CAAC;IAChB;;;;OAIG;IACH,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,+FAA+F;IAC/F,WAAW,CAAC,EAAE,gBAAgB,CAAC;CAChC,CAAC;AAQF;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,KAAK;IArChB,2BAA2B;WACpB,SAAS,QAAQ,EAAE;IAC1B,0FAA0F;aACjF,MAAM;IACf;;;;OAIG;kBACW,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI;IACrC,+FAA+F;kBACjF,gBAAgB;0CAiG9B,CAAC;AAGH,OAAO,EAAE,aAAa,EAAE,CAAC"}

package/dist/components/Steps/Steps.js

@@ -0,0 +1,62 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { cn } from "@sixthshift/design-system/utils";
+import { cva } from "class-variance-authority";
+import { Check } from "lucide-react";
+import * as React from "react";
+/**
+ * Geometry only. Every colour reads a `--steps-*` component token whose value
+ * is decided by src/components/Steps/steps.recipe.css, selected by the
+ * `data-state` each item renders (`complete`, `current`, `upcoming`).
+ */
+const stepsVariants = cva("steps flex", {
+    variants: {
+        orientation: {
+            horizontal: "w-full flex-row items-start",
+            vertical: "flex-col",
+        },
+    },
+    defaultVariants: {
+        orientation: "horizontal",
+    },
+});
+function stateOf(index, current) {
+    if (index < current)
+        return "complete";
+    if (index === current)
+        return "current";
+    return "upcoming";
+}
+/**
+ * Progress through a fixed sequence — checkout, onboarding, a multi-page
+ * form. Display-only: the step in progress is the `current` prop, owned by
+ * whatever runs the flow, so there is no internal state to control.
+ *
+ * Renders an `<ol>` (pass `aria-label`, e.g. "Checkout progress"); the
+ * current item carries `aria-current="step"`, and each indicator has a
+ * visually hidden status ("completed", "current") so the sequence reads
+ * correctly without the colours.
+ *
+ * With `onStepClick`, completed steps become buttons. Current and upcoming
+ * steps stay plain text: a step indicator that let you jump forward would be
+ * making the flow's validation decisions for it.
+ *
+ * Horizontally, every label shows from `sm` up; below that only the current
+ * step's label does, so four steps still fit a phone.
+ */
+export const Steps = React.forwardRef(({ className, steps, current, onStepClick, orientation = "horizontal", ...props }, ref) => {
+    const isHorizontal = orientation === "horizontal";
+    return (_jsx("ol", { ref: ref, "data-orientation": orientation, className: stepsVariants({ orientation, className }), ...props, children: steps.map((step, index) => {
+            const state = stateOf(index, current);
+            const isLast = index === steps.length - 1;
+            const clickable = state === "complete" && onStepClick !== undefined;
+            const indicator = (_jsx("span", { className: "steps-indicator border-(color:--steps-indicator-border) relative z-10 flex size-8 shrink-0 items-center justify-center rounded-full border-2 bg-(--steps-indicator-bg) font-semibold text-(--steps-indicator-fg) text-sm transition-colors", children: state === "complete" ? _jsx(Check, { "aria-hidden": "true", className: "size-4", strokeWidth: 3 }) : index + 1 }));
+            const text = (_jsxs("span", { className: cn("flex min-w-0 flex-col", isHorizontal ? "items-center text-center" : "pt-1", isHorizontal && state !== "current" && "max-sm:sr-only"), children: [_jsx("span", { className: "font-medium text-(--steps-label-fg) text-sm", children: step.label }), step.description !== undefined && _jsx("span", { className: "text-(--steps-description-fg) text-xs", children: step.description }), state !== "upcoming" && _jsx("span", { className: "sr-only", children: state === "complete" ? "(completed)" : "(current)" })] }));
+            const body = (_jsxs(_Fragment, { children: [indicator, text] }));
+            const bodyClass = cn("flex gap-2", isHorizontal ? "flex-col items-center" : "flex-row items-start gap-3");
+            return (_jsxs("li", { "data-state": state, "aria-current": state === "current" ? "step" : undefined, className: cn("steps-item relative", isHorizontal ? "flex flex-1 justify-center" : "flex pb-6 last:pb-0"), children: [!isLast && (_jsx("span", { "aria-hidden": "true", className: cn("steps-connector absolute bg-(--steps-connector-bg)", isHorizontal ? "top-4 left-1/2 h-0.5 w-full -translate-y-1/2" : "top-8 bottom-0 left-4 w-0.5 -translate-x-1/2") })), clickable ? (_jsx("button", { type: "button", onClick: () => onStepClick(index), className: cn(bodyClass, "focus-visible:ring-(color:--steps-ring) cursor-pointer rounded-md focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-offset-2 [&:hover_.steps-indicator]:bg-(--steps-indicator-bg-hovered)"), children: body })) : (_jsx("span", { className: bodyClass, children: body }))] }, index));
+        }) }));
+});
+Steps.displayName = "Steps";
+export { stepsVariants };
+//# sourceMappingURL=Steps.js.map

package/dist/components/Steps/Steps.js.map

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

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

@@ -0,0 +1,2 @@
+export { type StepItem, type StepState, Steps, type StepsOrientation, type StepsProps, stepsVariants } from "./Steps.js";
+//# sourceMappingURL=index.d.ts.map

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

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

package/dist/components/Steps/index.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Steps/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiC,KAAK,EAA0C,aAAa,EAAE,MAAM,SAAS,CAAC"}

package/dist/components/TagChip/TagChip.d.ts

@@ -7,18 +7,5 @@ export type TagChipProps = {
     size?: "sm" | "md";
     className?: string;
 };
-/**
- * One tag, rendered prettily. A `namespace:value` tag (`project:website`)
- * shows the namespace muted; a plain tag (`urgent`) renders as-is.
- *
- * Pure presentation. Entity-reference tags (`person:per_…`) are NOT rendered
- * here — the consuming app is expected to intercept those and resolve them to
- * a name chip; TagChip never shows a raw id.
- *
- * Two disjoint modes, chosen by whether `onRemove` is passed: navigable (no
- * `onRemove`; the caller wraps it in a link) or removable (`onRemove` renders
- * an × — used by `TagInput` and edit surfaces). Built on `Badge`
- * (`variant="outline" intent="muted"`).
- */
 export declare const TagChip: React.ForwardRefExoticComponent<TagChipProps & React.RefAttributes<HTMLSpanElement>>;
 //# sourceMappingURL=TagChip.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"TagChip.d.ts","sourceRoot":"","sources":["../../../src/components/TagChip/TagChip.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,MAAM,YAAY,GAAG;IACzB,GAAG,EAAE,MAAM,CAAC;IACZ,+EAA+E;IAC/E,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,sDAAsD;IACtD,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,OAAO,sFA0BlB,CAAC"}
+{"version":3,"file":"TagChip.d.ts","sourceRoot":"","sources":["../../../src/components/TagChip/TagChip.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,MAAM,YAAY,GAAG;IACzB,GAAG,EAAE,MAAM,CAAC;IACZ,+EAA+E;IAC/E,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,sDAAsD;IACtD,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAuBF,eAAO,MAAM,OAAO,sFA4BlB,CAAC"}

package/dist/components/TagChip/TagChip.js

@@ -1,6 +1,5 @@
 "use client";
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-import { Badge } from "@sixthshift/design-system/badge";
 import { cn } from "@sixthshift/design-system/utils";
 import { X } from "lucide-react";
 import * as React from "react";
@@ -14,14 +13,21 @@ import * as React from "react";
  *
  * Two disjoint modes, chosen by whether `onRemove` is passed: navigable (no
  * `onRemove`; the caller wraps it in a link) or removable (`onRemove` renders
- * an × — used by `TagInput` and edit surfaces). Built on `Badge`
- * (`variant="outline" intent="muted"`).
+ * an × — used by `TagInput` and edit surfaces). It looks like an outline
+ * Badge but is not one: the shape is duplicated here and every colour is its
+ * own `--tag-chip-*` token, so importing TagChip pulls in nothing else. A tag
+ * is metadata, not a status, so it takes no intent.
  */
+/** Duplicated from Badge's sizes, which TagChip used to borrow. */
+const sizeStyles = {
+    sm: "px-1.5 py-0 text-[10px]",
+    md: "px-2.5 py-0.5 text-xs",
+};
 export const TagChip = React.forwardRef(({ tag, onRemove, size = "sm", className }, ref) => {
     const sep = tag.indexOf(":");
     const namespace = sep > 0 ? tag.slice(0, sep) : null;
     const value = sep > 0 ? tag.slice(sep + 1) : tag;
-    return (_jsxs(Badge, { ref: ref, variant: "outline", intent: "muted", className: cn("tag-chip gap-1 font-normal", size === "sm" ? "px-1.5 py-0 text-[10px]" : "px-2 py-0.5 text-xs", className), children: [namespace && _jsxs("span", { className: "text-(--tag-chip-namespace-fg)", children: [namespace, ":"] }), _jsx("span", { children: value }), onRemove && (_jsx("button", { type: "button", onClick: onRemove, "aria-label": `Remove ${tag}`, className: "focus-visible:ring-(color:--tag-chip-remove-ring) -mr-0.5 ml-0.5 rounded-sm text-(--tag-chip-remove-fg) hover:text-(--tag-chip-remove-fg-hovered) focus-visible:outline-none focus-visible:ring-2", children: _jsx(X, { className: "h-3 w-3" }) }))] }));
+    return (_jsxs("span", { ref: ref, className: cn("tag-chip border-(color:--tag-chip-border) focus:ring-(color:--tag-chip-ring) inline-flex items-center gap-1 rounded-md border bg-(--tag-chip-bg) font-normal text-(--tag-chip-fg) transition-colors focus:outline-hidden focus:ring-2 focus:ring-offset-2", sizeStyles[size], className), children: [namespace && _jsxs("span", { className: "text-(--tag-chip-namespace-fg)", children: [namespace, ":"] }), _jsx("span", { children: value }), onRemove && (_jsx("button", { type: "button", onClick: onRemove, "aria-label": `Remove ${tag}`, className: "focus-visible:ring-(color:--tag-chip-remove-ring) -mr-0.5 ml-0.5 rounded-sm text-(--tag-chip-remove-fg) hover:text-(--tag-chip-remove-fg-hovered) focus-visible:outline-none focus-visible:ring-2", children: _jsx(X, { className: "h-3 w-3" }) }))] }));
 });
 TagChip.displayName = "TagChip";
 //# sourceMappingURL=TagChip.js.map

package/dist/components/TagChip/TagChip.js.map

@@ -1 +1 @@
-{"version":3,"file":"TagChip.js","sourceRoot":"","sources":["../../../src/components/TagChip/TagChip.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,KAAK,EAAE,MAAM,iCAAiC,CAAC;AACxD,OAAO,EAAE,EAAE,EAAE,MAAM,iCAAiC,CAAC;AACrD,OAAO,EAAE,CAAC,EAAE,MAAM,cAAc,CAAC;AACjC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAW/B;;;;;;;;;;;;GAYG;AACH,MAAM,CAAC,MAAM,OAAO,GAAG,KAAK,CAAC,UAAU,CAAgC,CAAC,EAAE,GAAG,EAAE,QAAQ,EAAE,IAAI,GAAG,IAAI,EAAE,SAAS,EAAE,EAAE,GAAG,EAAE,EAAE;IACxH,MAAM,GAAG,GAAG,GAAG,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC;IAC7B,MAAM,SAAS,GAAG,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;IACrD,MAAM,KAAK,GAAG,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,KAAK,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC;IAEjD,OAAO,CACL,MAAC,KAAK,IACJ,GAAG,EAAE,GAAG,EACR,OAAO,EAAC,SAAS,EACjB,MAAM,EAAC,OAAO,EACd,SAAS,EAAE,EAAE,CAAC,4BAA4B,EAAE,IAAI,KAAK,IAAI,CAAC,CAAC,CAAC,yBAAyB,CAAC,CAAC,CAAC,qBAAqB,EAAE,SAAS,CAAC,aAExH,SAAS,IAAI,gBAAM,SAAS,EAAC,gCAAgC,aAAE,SAAS,SAAS,EAClF,yBAAO,KAAK,GAAQ,EACnB,QAAQ,IAAI,CACX,iBACE,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,QAAQ,gBACL,UAAU,GAAG,EAAE,EAC3B,SAAS,EAAC,mMAAmM,YAE7M,KAAC,CAAC,IAAC,SAAS,EAAC,SAAS,GAAG,GAClB,CACV,IACK,CACT,CAAC;AACJ,CAAC,CAAC,CAAC;AACH,OAAO,CAAC,WAAW,GAAG,SAAS,CAAC"}
+{"version":3,"file":"TagChip.js","sourceRoot":"","sources":["../../../src/components/TagChip/TagChip.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,EAAE,EAAE,MAAM,iCAAiC,CAAC;AACrD,OAAO,EAAE,CAAC,EAAE,MAAM,cAAc,CAAC;AACjC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAW/B;;;;;;;;;;;;;;GAcG;AACH,mEAAmE;AACnE,MAAM,UAAU,GAAG;IACjB,EAAE,EAAE,yBAAyB;IAC7B,EAAE,EAAE,uBAAuB;CACnB,CAAC;AAEX,MAAM,CAAC,MAAM,OAAO,GAAG,KAAK,CAAC,UAAU,CAAgC,CAAC,EAAE,GAAG,EAAE,QAAQ,EAAE,IAAI,GAAG,IAAI,EAAE,SAAS,EAAE,EAAE,GAAG,EAAE,EAAE;IACxH,MAAM,GAAG,GAAG,GAAG,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC;IAC7B,MAAM,SAAS,GAAG,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;IACrD,MAAM,KAAK,GAAG,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,KAAK,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC;IAEjD,OAAO,CACL,gBACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACX,2PAA2P,EAC3P,UAAU,CAAC,IAAI,CAAC,EAChB,SAAS,CACV,aAEA,SAAS,IAAI,gBAAM,SAAS,EAAC,gCAAgC,aAAE,SAAS,SAAS,EAClF,yBAAO,KAAK,GAAQ,EACnB,QAAQ,IAAI,CACX,iBACE,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,QAAQ,gBACL,UAAU,GAAG,EAAE,EAC3B,SAAS,EAAC,mMAAmM,YAE7M,KAAC,CAAC,IAAC,SAAS,EAAC,SAAS,GAAG,GAClB,CACV,IACI,CACR,CAAC;AACJ,CAAC,CAAC,CAAC;AACH,OAAO,CAAC,WAAW,GAAG,SAAS,CAAC"}

package/dist/components/TextInline/TextInline.d.ts

@@ -1,7 +1,7 @@
 import { type VariantProps } from "class-variance-authority";
 import * as React from "react";
 declare const textInlineVariants: (props?: ({
-    gap?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | null | undefined;
+    gap?: "sm" | "md" | "none" | "xs" | "lg" | "xl" | null | undefined;
     align?: "center" | "start" | "end" | "baseline" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export type TextInlineProps = React.HTMLAttributes<HTMLSpanElement> & VariantProps<typeof textInlineVariants>;
@@ -17,7 +17,7 @@ export type TextInlineProps = React.HTMLAttributes<HTMLSpanElement> & VariantPro
  * inline children, not about styling the text itself.
  */
 declare const TextInline: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & VariantProps<(props?: ({
-    gap?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | null | undefined;
+    gap?: "sm" | "md" | "none" | "xs" | "lg" | "xl" | null | undefined;
     align?: "center" | "start" | "end" | "baseline" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string> & React.RefAttributes<HTMLSpanElement>>;
 export { TextInline, textInlineVariants };

package/dist/components/Toast/Toast.js

@@ -72,7 +72,7 @@ export const Toast = React.forwardRef(({ className, intent = "neutral", brand, t
         return null;
     const isEntering = state === "entering";
     const isExiting = state === "exiting";
-    const content = (_jsx("div", { ref: mergedRef, className: cn("max-w-sm shadow-lg", standalone && "fixed bottom-6 left-1/2 z-toast -translate-x-1/2", isEntering && "animate-fade-in", isExiting && "animate-fade-out", className), "data-brand": brand, ...props, children: _jsxs(Message, { intent: intent, children: [icon && _jsx(MessageIcon, { children: icon }), _jsxs(MessageBody, { children: [title && _jsx(MessageTitle, { children: title }), _jsxs(MessageDescription, { children: [children, action && (_jsx("div", { className: "mt-2", children: _jsx(Button, { variant: "link", size: "sm", className: "h-auto p-0 font-medium", onClick: onAction, children: action }) }))] })] }), onClose && (_jsx(Button, { variant: "ghost", iconOnly: true, className: "h-6 w-6 shrink-0 opacity-70 hover:opacity-100", onClick: handleClose, "aria-label": "Dismiss", children: _jsx(X, { className: "h-4 w-4" }) }))] }) }));
+    const content = (_jsx("div", { ref: mergedRef, className: cn("max-w-sm shadow-lg", standalone && "fixed bottom-6 left-1/2 z-toast -translate-x-1/2", isEntering && "animate-fade-in", isExiting && "animate-fade-out", className), "data-brand": brand, ...props, children: _jsxs(Message, { intent: intent, children: [icon && _jsx(MessageIcon, { children: icon }), _jsxs(MessageBody, { children: [title && _jsx(MessageTitle, { children: title }), _jsxs(MessageDescription, { children: [children, action && (_jsx("div", { className: "mt-2", children: _jsx(Button, { inline: true, size: "sm", className: "font-medium", onClick: onAction, children: action }) }))] })] }), onClose && (_jsx(Button, { variant: "ghost", iconOnly: true, className: "h-6 w-6 shrink-0 opacity-70 hover:opacity-100", onClick: handleClose, "aria-label": "Dismiss", children: _jsx(X, { className: "h-4 w-4" }) }))] }) }));
     if (standalone) {
         return _jsx(FloatingPortal, { ...(root ? { root } : {}), children: content });
     }

package/dist/components/Toast/Toast.js.map

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

package/dist/components/Toggle/Toggle.d.ts

@@ -1,14 +1,25 @@
-import type { VariantProps } from "class-variance-authority";
+import { type VariantProps } from "class-variance-authority";
 import * as React from "react";
-import { type ButtonIntent, type ButtonVariant, type buttonVariants } from "../Button/Button.js";
 /**
- * `variant` and `intent` are no longer CVA variants on `buttonVariants` — they
- * select a recipe cell in CSS — so they are declared here rather than inherited
- * through `VariantProps`, which now yields `size` alone.
+ * Geometry and behaviour only; every colour reads a `--toggle-*` token decided
+ * by src/components/Toggle/toggle.recipe.css.
+ *
+ * Duplicated from Button on purpose, not shared: a toggle looks like a button
+ * but is its own component, so importing Toggle must not pull in Button. The
+ * two start identical and are free to drift.
  */
-export type ToggleProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onChange" | "value"> & VariantProps<typeof buttonVariants> & {
-    variant?: ButtonVariant | undefined;
-    intent?: ButtonIntent | undefined;
+declare const toggleVariants: (props?: ({
+    size?: "sm" | "md" | "xs" | "lg" | "xl" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/** Widened deliberately, as on every component: a consumer adds a variant or intent in CSS. */
+type Loose<T extends string> = T | (string & {});
+export type ToggleVariantName = "solid" | "outline" | "ghost";
+export type ToggleIntentName = "neutral" | "brand" | "danger" | "success" | "warning";
+export type ToggleVariant = Loose<ToggleVariantName>;
+export type ToggleIntent = Loose<ToggleIntentName>;
+export type ToggleProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onChange" | "value"> & VariantProps<typeof toggleVariants> & {
+    variant?: ToggleVariant | undefined;
+    intent?: ToggleIntent | undefined;
     /** Name of a brand the theme defines, rendered as `data-brand`. Omitted, the toggle follows the nearest `data-brand` ancestor. */
     brand?: string | undefined;
     /** Square the toggle at its current size, for an icon with no label. */
@@ -26,21 +37,21 @@ export type ToggleProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "o
  * for a set of mutually exclusive or multi-select options, use `ToggleGroup`
  * instead.
  *
- * Built directly on Button: it calls `buttonRecipe(...)` and takes the same
- * `variant`/`intent`/`size` axes Button does, plus `iconOnly` for a toolbar
- * toggle whose whole content is an icon. The
- * pressed-state colour mapping lives in `src/components/Toggle/toggle.recipe.css`,
- * keyed off the `data-state="on" | "off"` attribute this component renders
- * alongside `aria-pressed`.
+ * Looks like a Button and takes the same `variant`/`intent`/`size` axes, plus
+ * `iconOnly` for a toolbar toggle whose whole content is an icon — but it is
+ * its own component, with its own classes and `--toggle-*` tokens, and
+ * imports nothing from Button. Every colour, pressed state included, lives in
+ * `src/components/Toggle/toggle.recipe.css`, keyed off the `data-state="on" |
+ * "off"` attribute this component renders alongside `aria-pressed`.
  *
  * Controlled via `pressed`/`defaultPressed`/`onPressedChange`
  * (`useControllableState`).
  */
 declare const Toggle: React.ForwardRefExoticComponent<Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onChange" | "value"> & VariantProps<(props?: ({
-    size?: "xs" | "sm" | "md" | "lg" | "xl" | null | undefined;
+    size?: "sm" | "md" | "xs" | "lg" | "xl" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string> & {
-    variant?: ButtonVariant | undefined;
-    intent?: ButtonIntent | undefined;
+    variant?: ToggleVariant | undefined;
+    intent?: ToggleIntent | undefined;
     /** Name of a brand the theme defines, rendered as `data-brand`. Omitted, the toggle follows the nearest `data-brand` ancestor. */
     brand?: string | undefined;
     /** Square the toggle at its current size, for an icon with no label. */
@@ -52,5 +63,5 @@ declare const Toggle: React.ForwardRefExoticComponent<Omit<React.ButtonHTMLAttri
     /** Called when pressed state changes */
     onPressedChange?: (pressed: boolean) => void;
 } & React.RefAttributes<HTMLButtonElement>>;
-export { Toggle };
+export { Toggle, toggleVariants };
 //# sourceMappingURL=Toggle.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Toggle.d.ts","sourceRoot":"","sources":["../../../src/components/Toggle/Toggle.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAC7D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,KAAK,YAAY,EAAE,KAAK,aAAa,EAAgB,KAAK,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAE5G;;;;GAIG;AACH,MAAM,MAAM,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC,GACjG,YAAY,CAAC,OAAO,cAAc,CAAC,GAAG;IACpC,OAAO,CAAC,EAAE,aAAa,GAAG,SAAS,CAAC;IACpC,MAAM,CAAC,EAAE,YAAY,GAAG,SAAS,CAAC;IAClC,kIAAkI;IAClI,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,wEAAwE;IACxE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+BAA+B;IAC/B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,kDAAkD;IAClD,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,wCAAwC;IACxC,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;CAC9C,CAAC;AAEJ;;;;;;;;;;;;;;;GAeG;AACH,QAAA,MAAM,MAAM;;;cA9BE,aAAa,GAAG,SAAS;aAC1B,YAAY,GAAG,SAAS;IACjC,kIAAkI;YAC1H,MAAM,GAAG,SAAS;IAC1B,wEAAwE;eAC7D,OAAO;IAClB,+BAA+B;cACrB,OAAO;IACjB,kDAAkD;qBACjC,OAAO;IACxB,wCAAwC;sBACtB,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI;2CA6D/C,CAAC;AAGF,OAAO,EAAE,MAAM,EAAE,CAAC"}
+{"version":3,"file":"Toggle.d.ts","sourceRoot":"","sources":["../../../src/components/Toggle/Toggle.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B;;;;;;;GAOG;AACH,QAAA,MAAM,cAAc;;8EAiBnB,CAAC;AAkBF,+FAA+F;AAC/F,KAAK,KAAK,CAAC,CAAC,SAAS,MAAM,IAAI,CAAC,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;AAEjD,MAAM,MAAM,iBAAiB,GAAG,OAAO,GAAG,SAAS,GAAG,OAAO,CAAC;AAC9D,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,SAAS,GAAG,SAAS,CAAC;AACtF,MAAM,MAAM,aAAa,GAAG,KAAK,CAAC,iBAAiB,CAAC,CAAC;AACrD,MAAM,MAAM,YAAY,GAAG,KAAK,CAAC,gBAAgB,CAAC,CAAC;AAEnD,MAAM,MAAM,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC,GACjG,YAAY,CAAC,OAAO,cAAc,CAAC,GAAG;IACpC,OAAO,CAAC,EAAE,aAAa,GAAG,SAAS,CAAC;IACpC,MAAM,CAAC,EAAE,YAAY,GAAG,SAAS,CAAC;IAClC,kIAAkI;IAClI,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,wEAAwE;IACxE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+BAA+B;IAC/B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,kDAAkD;IAClD,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,wCAAwC;IACxC,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;CAC9C,CAAC;AAEJ;;;;;;;;;;;;;;;GAeG;AACH,QAAA,MAAM,MAAM;;;cA9BE,aAAa,GAAG,SAAS;aAC1B,YAAY,GAAG,SAAS;IACjC,kIAAkI;YAC1H,MAAM,GAAG,SAAS;IAC1B,wEAAwE;eAC7D,OAAO;IAClB,+BAA+B;cACrB,OAAO;IACjB,kDAAkD;qBACjC,OAAO;IACxB,wCAAwC;sBACtB,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI;2CA8D/C,CAAC;AAGF,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,CAAC"}

package/dist/components/Toggle/Toggle.js

@@ -2,33 +2,70 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useControllableState } from "@sixthshift/design-system/hooks";
 import { cn } from "@sixthshift/design-system/utils";
+import { cva } from "class-variance-authority";
 import * as React from "react";
-import { buttonRecipe } from "../Button/Button.js";
+/**
+ * Geometry and behaviour only; every colour reads a `--toggle-*` token decided
+ * by src/components/Toggle/toggle.recipe.css.
+ *
+ * Duplicated from Button on purpose, not shared: a toggle looks like a button
+ * but is its own component, so importing Toggle must not pull in Button. The
+ * two start identical and are free to drift.
+ */
+const toggleVariants = cva(
+// One literal, deliberately — see Button.tsx for the sorter trap.
+"toggle border-(color:--toggle-border) focus-visible:ring-(color:--toggle-ring) inline-flex cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-md bg-(--toggle-bg) font-medium text-(--toggle-fg) text-sm transition-colors hover:bg-(--toggle-bg-hovered) focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-offset-2 active:bg-(--toggle-bg-pressed) disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", {
+    variants: {
+        size: {
+            xs: "h-7 rounded-md px-2 text-xs",
+            sm: "h-8 rounded-md px-3 text-xs",
+            md: "h-9 px-4 py-2",
+            lg: "h-10 rounded-md px-8",
+            xl: "h-12 rounded-md px-10 text-base",
+        },
+    },
+    defaultVariants: {
+        size: "md",
+    },
+});
+/** The non-colour half of `variant` — border width and elevation. */
+const variantStructure = {
+    solid: "shadow",
+    outline: "border shadow-xs",
+    ghost: "",
+};
+/** Squares the box at whatever size is set, and drops the horizontal padding. */
+const iconOnlyGeometry = {
+    xs: "w-7 px-0",
+    sm: "w-8 px-0",
+    md: "w-9 px-0",
+    lg: "w-10 px-0",
+    xl: "w-12 px-0",
+};
 /**
  * A single button that toggles between pressed and unpressed, for a binary
  * setting styled like an action (e.g. a bold/italic button in a toolbar) —
  * for a set of mutually exclusive or multi-select options, use `ToggleGroup`
  * instead.
  *
- * Built directly on Button: it calls `buttonRecipe(...)` and takes the same
- * `variant`/`intent`/`size` axes Button does, plus `iconOnly` for a toolbar
- * toggle whose whole content is an icon. The
- * pressed-state colour mapping lives in `src/components/Toggle/toggle.recipe.css`,
- * keyed off the `data-state="on" | "off"` attribute this component renders
- * alongside `aria-pressed`.
+ * Looks like a Button and takes the same `variant`/`intent`/`size` axes, plus
+ * `iconOnly` for a toolbar toggle whose whole content is an icon — but it is
+ * its own component, with its own classes and `--toggle-*` tokens, and
+ * imports nothing from Button. Every colour, pressed state included, lives in
+ * `src/components/Toggle/toggle.recipe.css`, keyed off the `data-state="on" |
+ * "off"` attribute this component renders alongside `aria-pressed`.
  *
  * Controlled via `pressed`/`defaultPressed`/`onPressedChange`
  * (`useControllableState`).
  */
-const Toggle = React.forwardRef(({ className, variant, intent, brand, size, iconOnly = false, pressed: controlledPressed, defaultPressed = false, onPressedChange, disabled, children, ...props }, ref) => {
+const Toggle = React.forwardRef(({ className, variant = "solid", intent = "neutral", brand, size, iconOnly = false, pressed: controlledPressed, defaultPressed = false, onPressedChange, disabled, children, ...props }, ref) => {
     const [pressed, setPressed] = useControllableState({
         value: controlledPressed,
         defaultValue: defaultPressed,
         onChange: onPressedChange,
     });
-    const recipe = buttonRecipe({ variant, intent, brand, size, iconOnly });
-    return (_jsx("button", { type: "button", "aria-pressed": pressed, "data-state": pressed ? "on" : "off", disabled: disabled, ref: ref, onClick: () => setPressed(!pressed), ...recipe, className: cn(recipe.className, className), ...props, children: children }));
+    return (_jsx("button", { type: "button", "aria-pressed": pressed, "data-state": pressed ? "on" : "off", "data-variant": variant, "data-intent": intent, "data-brand": brand, disabled: disabled, ref: ref, onClick: () => setPressed(!pressed), className: cn(variantStructure[variant], toggleVariants({ size, className: cn(iconOnly ? iconOnlyGeometry[size ?? "md"] : undefined, className) })), ...props, children: children }));
 });
 Toggle.displayName = "Toggle";
-export { Toggle };
+export { Toggle, toggleVariants };
 //# sourceMappingURL=Toggle.js.map

package/dist/components/Toggle/Toggle.js.map

@@ -1 +1 @@
-{"version":3,"file":"Toggle.js","sourceRoot":"","sources":["../../../src/components/Toggle/Toggle.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,oBAAoB,EAAE,MAAM,iCAAiC,CAAC;AACvE,OAAO,EAAE,EAAE,EAAE,MAAM,iCAAiC,CAAC;AAErD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAyC,YAAY,EAAuB,MAAM,kBAAkB,CAAC;AAuB5G;;;;;;;;;;;;;;;GAeG;AACH,MAAM,MAAM,GAAG,KAAK,CAAC,UAAU,CAC7B,CACE,EACE,SAAS,EACT,OAAO,EACP,MAAM,EACN,KAAK,EACL,IAAI,EACJ,QAAQ,GAAG,KAAK,EAChB,OAAO,EAAE,iBAAiB,EAC1B,cAAc,GAAG,KAAK,EACtB,eAAe,EACf,QAAQ,EACR,QAAQ,EACR,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,oBAAoB,CAAC;QACjD,KAAK,EAAE,iBAAiB;QACxB,YAAY,EAAE,cAAc;QAC5B,QAAQ,EAAE,eAAe;KAC1B,CAAC,CAAC;IAEH,MAAM,MAAM,GAAG,YAAY,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC,CAAC;IAExE,OAAO,CACL,iBACE,IAAI,EAAC,QAAQ,kBACC,OAAO,gBACT,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,EAClC,QAAQ,EAAE,QAAQ,EAClB,GAAG,EAAE,GAAG,EACR,OAAO,EAAE,GAAG,EAAE,CAAC,UAAU,CAAC,CAAC,OAAO,CAAC,KAC/B,MAAM,EACV,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,SAAS,EAAE,SAAS,CAAC,KACtC,KAAK,YAER,QAAQ,GACF,CACV,CAAC;AACJ,CAAC,CACF,CAAC;AACF,MAAM,CAAC,WAAW,GAAG,QAAQ,CAAC;AAE9B,OAAO,EAAE,MAAM,EAAE,CAAC"}
+{"version":3,"file":"Toggle.js","sourceRoot":"","sources":["../../../src/components/Toggle/Toggle.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,oBAAoB,EAAE,MAAM,iCAAiC,CAAC;AACvE,OAAO,EAAE,EAAE,EAAE,MAAM,iCAAiC,CAAC;AACrD,OAAO,EAAE,GAAG,EAAqB,MAAM,0BAA0B,CAAC;AAClE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B;;;;;;;GAOG;AACH,MAAM,cAAc,GAAG,GAAG;AACxB,kEAAkE;AAClE,8eAA8e,EAC9e;IACE,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,EAAE,EAAE,6BAA6B;YACjC,EAAE,EAAE,6BAA6B;YACjC,EAAE,EAAE,eAAe;YACnB,EAAE,EAAE,sBAAsB;YAC1B,EAAE,EAAE,iCAAiC;SACtC;KACF;IACD,eAAe,EAAE;QACf,IAAI,EAAE,IAAI;KACX;CACF,CACF,CAAC;AAEF,qEAAqE;AACrE,MAAM,gBAAgB,GAA2B;IAC/C,KAAK,EAAE,QAAQ;IACf,OAAO,EAAE,kBAAkB;IAC3B,KAAK,EAAE,EAAE;CACV,CAAC;AAEF,iFAAiF;AACjF,MAAM,gBAAgB,GAA2B;IAC/C,EAAE,EAAE,UAAU;IACd,EAAE,EAAE,UAAU;IACd,EAAE,EAAE,UAAU;IACd,EAAE,EAAE,WAAW;IACf,EAAE,EAAE,WAAW;CAChB,CAAC;AA0BF;;;;;;;;;;;;;;;GAeG;AACH,MAAM,MAAM,GAAG,KAAK,CAAC,UAAU,CAC7B,CACE,EACE,SAAS,EACT,OAAO,GAAG,OAAO,EACjB,MAAM,GAAG,SAAS,EAClB,KAAK,EACL,IAAI,EACJ,QAAQ,GAAG,KAAK,EAChB,OAAO,EAAE,iBAAiB,EAC1B,cAAc,GAAG,KAAK,EACtB,eAAe,EACf,QAAQ,EACR,QAAQ,EACR,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,oBAAoB,CAAC;QACjD,KAAK,EAAE,iBAAiB;QACxB,YAAY,EAAE,cAAc;QAC5B,QAAQ,EAAE,eAAe;KAC1B,CAAC,CAAC;IAEH,OAAO,CACL,iBACE,IAAI,EAAC,QAAQ,kBACC,OAAO,gBAET,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,kBACpB,OAAO,iBACR,MAAM,gBACP,KAAK,EACjB,QAAQ,EAAE,QAAQ,EAClB,GAAG,EAAE,GAAG,EACR,OAAO,EAAE,GAAG,EAAE,CAAC,UAAU,CAAC,CAAC,OAAO,CAAC,EACnC,SAAS,EAAE,EAAE,CAAC,gBAAgB,CAAC,OAAO,CAAC,EAAE,cAAc,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,gBAAgB,CAAC,IAAI,IAAI,IAAI,CAAC,CAAC,CAAC,CAAC,SAAS,EAAE,SAAS,CAAC,EAAE,CAAC,CAAC,KAC/I,KAAK,YAER,QAAQ,GACF,CACV,CAAC;AACJ,CAAC,CACF,CAAC;AACF,MAAM,CAAC,WAAW,GAAG,QAAQ,CAAC;AAE9B,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,CAAC"}

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

@@ -1,2 +1,2 @@
-export { Toggle, type ToggleProps } from "./Toggle.js";
+export { Toggle, type ToggleIntent, type ToggleIntentName, type ToggleProps, type ToggleVariant, type ToggleVariantName, toggleVariants, } from "./Toggle.js";
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Toggle/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,UAAU,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Toggle/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,MAAM,EACN,KAAK,YAAY,EACjB,KAAK,gBAAgB,EACrB,KAAK,WAAW,EAChB,KAAK,aAAa,EAClB,KAAK,iBAAiB,EACtB,cAAc,GACf,MAAM,UAAU,CAAC"}

package/dist/components/Toggle/index.js

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

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

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

package/dist/components/ToggleGroup/ToggleGroup.d.ts

@@ -10,10 +10,10 @@ import type { ToggleGroupProps } from "./toggleGroup.types.js";
  * `defaultValue`/`onValueChange` follow `type`: a string for single, a
  * string array for multiple (`useControllableState`).
  *
- * Items are built on the same `buttonRecipe` as `Button`/`Toggle` and take
- * the same `variant`/`intent`, with two differences: `variant` excludes
- * `"link"` (no clear pressed state for an underline in a group) and `size`
- * excludes `"xl"` (too large for grouped toggles) — see
+ * Items look like Toggles but carry their own duplicated styling and
+ * `--toggle-group-item-*` tokens (toggle-group.recipe.css), and take
+ * the same `variant`/`intent`, with one difference: `size` excludes `"xl"`
+ * (too large for grouped toggles) — see
  * `toggleGroup.types.ts`. `appearance` chooses `"segmented"` (items joined
  * into one border) or `"separate"` (individually bordered, gapped) rendering.
  */

package/dist/components/ToggleGroup/ToggleGroup.js

@@ -12,10 +12,10 @@ import { ToggleGroupSingle } from "./ToggleGroupSingle.js";
  * `defaultValue`/`onValueChange` follow `type`: a string for single, a
  * string array for multiple (`useControllableState`).
  *
- * Items are built on the same `buttonRecipe` as `Button`/`Toggle` and take
- * the same `variant`/`intent`, with two differences: `variant` excludes
- * `"link"` (no clear pressed state for an underline in a group) and `size`
- * excludes `"xl"` (too large for grouped toggles) — see
+ * Items look like Toggles but carry their own duplicated styling and
+ * `--toggle-group-item-*` tokens (toggle-group.recipe.css), and take
+ * the same `variant`/`intent`, with one difference: `size` excludes `"xl"`
+ * (too large for grouped toggles) — see
  * `toggleGroup.types.ts`. `appearance` chooses `"segmented"` (items joined
  * into one border) or `"separate"` (individually bordered, gapped) rendering.
  */

package/dist/components/ToggleGroup/ToggleGroupItem.d.ts

@@ -1,6 +1,6 @@
 import * as React from "react";
 import type { ToggleGroupBaseProps, ToggleGroupOption } from "./toggleGroup.types.js";
-declare const ToggleGroupItem: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & Required<Pick<ToggleGroupBaseProps, "variant" | "intent" | "size" | "iconOnly" | "orientation" | "appearance">> & {
+declare const ToggleGroupItem: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & Required<Pick<ToggleGroupBaseProps, "size" | "variant" | "intent" | "iconOnly" | "orientation" | "appearance">> & {
     option: ToggleGroupOption;
     selected: boolean;
     groupDisabled?: boolean | undefined;

package/dist/components/ToggleGroup/ToggleGroupItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleGroupItem.d.ts","sourceRoot":"","sources":["../../../src/components/ToggleGroup/ToggleGroupItem.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,oBAAoB,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAWnF,QAAA,MAAM,eAAe;YAPT,iBAAiB;cACf,OAAO;oBACD,OAAO,GAAG,SAAS;WAC5B,MAAM;WACN,MAAM;2CAyChB,CAAC;AAGF,OAAO,EAAE,eAAe,EAAE,CAAC"}
+{"version":3,"file":"ToggleGroupItem.d.ts","sourceRoot":"","sources":["../../../src/components/ToggleGroup/ToggleGroupItem.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,oBAAoB,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AA+CnF,QAAA,MAAM,eAAe;YAPT,iBAAiB;cACf,OAAO;oBACD,OAAO,GAAG,SAAS;WAC5B,MAAM;WACN,MAAM;2CAwChB,CAAC;AAGF,OAAO,EAAE,eAAe,EAAE,CAAC"}

package/dist/components/ToggleGroup/ToggleGroupItem.js

@@ -1,19 +1,49 @@
 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";
-import { buttonRecipe } from "../Button/Button.js";
+/**
+ * An item's geometry. Duplicated from Button's on purpose — ToggleGroup is its
+ * own component and imports neither Button nor Toggle. Every colour reads a
+ * `--toggle-group-item-*` token from toggle-group.recipe.css.
+ */
+const itemVariants = cva(
+// One literal, deliberately — see Button.tsx for the sorter trap.
+"toggle-group-item border-(color:--toggle-group-item-border) focus-visible:ring-(color:--toggle-group-item-ring) inline-flex cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-md bg-(--toggle-group-item-bg) font-medium text-(--toggle-group-item-fg) text-sm transition-colors hover:bg-(--toggle-group-item-bg-hovered) focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-offset-2 active:bg-(--toggle-group-item-bg-pressed) disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", {
+    variants: {
+        size: {
+            xs: "h-7 rounded-md px-2 text-xs",
+            sm: "h-8 rounded-md px-3 text-xs",
+            md: "h-9 px-4 py-2",
+            lg: "h-10 rounded-md px-8",
+        },
+    },
+    defaultVariants: { size: "md" },
+});
+/** The non-colour half of `variant` — border width and elevation. */
+const variantStructure = {
+    solid: "shadow",
+    outline: "border shadow-xs",
+    ghost: "",
+};
+/** Squares the item at whatever size is set, and drops the horizontal padding. */
+const iconOnlyGeometry = {
+    xs: "w-7 px-0",
+    sm: "w-8 px-0",
+    md: "w-9 px-0",
+    lg: "w-10 px-0",
+};
 const ToggleGroupItem = React.forwardRef(({ option, selected, groupDisabled, appearance, orientation, variant, intent, size, iconOnly, index, total, ...props }, ref) => {
     const isDisabled = groupDisabled || option.disabled;
     const isFirst = index === 0;
     const isLast = index === total - 1;
     const isVertical = orientation === "vertical";
     const isSegmented = appearance === "segmented";
-    // Both modes share the same base: buttonVariants + the pressed-state cells
-    // in recipes/toggle.css. Segmented just overrides border/shadow/rounding
-    // so items join cleanly.
-    const recipe = buttonRecipe({ variant, intent, size, iconOnly });
-    return (_jsx("button", { ref: ref, ...recipe, type: "button", "data-state": selected ? "on" : "off", disabled: isDisabled, "aria-label": option.ariaLabel, className: cn(recipe.className, 
-        // Segmented: only override rounding (let buttonVariants handle border/color).
+    // Both appearances share the same base and the pressed-state cells in
+    // toggle-group.recipe.css. Segmented just overrides the rounding so items
+    // join cleanly.
+    return (_jsx("button", { ref: ref, "data-variant": variant, "data-intent": intent, type: "button", "data-state": selected ? "on" : "off", disabled: isDisabled, "aria-label": option.ariaLabel, className: cn(variantStructure[variant], itemVariants({ size, className: iconOnly ? iconOnlyGeometry[size] : undefined }), 
+        // Segmented: only override rounding (the variant handles border/colour).
         // Negative margin collapses double borders between outline items.
         isSegmented &&
             (isVertical

package/dist/components/ToggleGroup/ToggleGroupItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleGroupItem.js","sourceRoot":"","sources":["../../../src/components/ToggleGroup/ToggleGroupItem.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,iCAAiC,CAAC;AACrD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAYhD,MAAM,eAAe,GAAG,KAAK,CAAC,UAAU,CACtC,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,aAAa,EAAE,UAAU,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IAC7H,MAAM,UAAU,GAAG,aAAa,IAAI,MAAM,CAAC,QAAQ,CAAC;IACpD,MAAM,OAAO,GAAG,KAAK,KAAK,CAAC,CAAC;IAC5B,MAAM,MAAM,GAAG,KAAK,KAAK,KAAK,GAAG,CAAC,CAAC;IACnC,MAAM,UAAU,GAAG,WAAW,KAAK,UAAU,CAAC;IAC9C,MAAM,WAAW,GAAG,UAAU,KAAK,WAAW,CAAC;IAE/C,2EAA2E;IAC3E,yEAAyE;IACzE,yBAAyB;IACzB,MAAM,MAAM,GAAG,YAAY,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC,CAAC;IAEjE,OAAO,CACL,iBACE,GAAG,EAAE,GAAG,KACJ,MAAM,EACV,IAAI,EAAC,QAAQ,gBAGD,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,EACnC,QAAQ,EAAE,UAAU,gBACR,MAAM,CAAC,SAAS,EAC5B,SAAS,EAAE,EAAE,CACX,MAAM,CAAC,SAAS;QAChB,8EAA8E;QAC9E,kEAAkE;QAClE,WAAW;YACT,CAAC,UAAU;gBACT,CAAC,CAAC,EAAE,CAAC,cAAc,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,IAAI,cAAc,EAAE,CAAC,OAAO,IAAI,QAAQ,CAAC;gBAC/F,CAAC,CAAC,EAAE,CAAC,cAAc,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,IAAI,cAAc,EAAE,CAAC,OAAO,IAAI,QAAQ,CAAC,CAAC,CACrG,KACG,KAAK,YAER,MAAM,CAAC,KAAK,GACN,CACV,CAAC;AACJ,CAAC,CACF,CAAC;AACF,eAAe,CAAC,WAAW,GAAG,iBAAiB,CAAC;AAEhD,OAAO,EAAE,eAAe,EAAE,CAAC"}
+{"version":3,"file":"ToggleGroupItem.js","sourceRoot":"","sources":["../../../src/components/ToggleGroup/ToggleGroupItem.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,iCAAiC,CAAC;AACrD,OAAO,EAAE,GAAG,EAAE,MAAM,0BAA0B,CAAC;AAC/C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B;;;;GAIG;AACH,MAAM,YAAY,GAAG,GAAG;AACtB,kEAAkE;AAClE,2jBAA2jB,EAC3jB;IACE,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,EAAE,EAAE,6BAA6B;YACjC,EAAE,EAAE,6BAA6B;YACjC,EAAE,EAAE,eAAe;YACnB,EAAE,EAAE,sBAAsB;SAC3B;KACF;IACD,eAAe,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE;CAChC,CACF,CAAC;AAEF,qEAAqE;AACrE,MAAM,gBAAgB,GAA2B;IAC/C,KAAK,EAAE,QAAQ;IACf,OAAO,EAAE,kBAAkB;IAC3B,KAAK,EAAE,EAAE;CACV,CAAC;AAEF,kFAAkF;AAClF,MAAM,gBAAgB,GAA2B;IAC/C,EAAE,EAAE,UAAU;IACd,EAAE,EAAE,UAAU;IACd,EAAE,EAAE,UAAU;IACd,EAAE,EAAE,WAAW;CAChB,CAAC;AAWF,MAAM,eAAe,GAAG,KAAK,CAAC,UAAU,CACtC,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,aAAa,EAAE,UAAU,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IAC7H,MAAM,UAAU,GAAG,aAAa,IAAI,MAAM,CAAC,QAAQ,CAAC;IACpD,MAAM,OAAO,GAAG,KAAK,KAAK,CAAC,CAAC;IAC5B,MAAM,MAAM,GAAG,KAAK,KAAK,KAAK,GAAG,CAAC,CAAC;IACnC,MAAM,UAAU,GAAG,WAAW,KAAK,UAAU,CAAC;IAC9C,MAAM,WAAW,GAAG,UAAU,KAAK,WAAW,CAAC;IAE/C,sEAAsE;IACtE,0EAA0E;IAC1E,gBAAgB;IAChB,OAAO,CACL,iBACE,GAAG,EAAE,GAAG,kBACM,OAAO,iBACR,MAAM,EACnB,IAAI,EAAC,QAAQ,gBAED,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,EACnC,QAAQ,EAAE,UAAU,gBACR,MAAM,CAAC,SAAS,EAC5B,SAAS,EAAE,EAAE,CACX,gBAAgB,CAAC,OAAO,CAAC,EACzB,YAAY,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,CAAC,CAAC,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,SAAS,EAAE,CAAC;QAChF,yEAAyE;QACzE,kEAAkE;QAClE,WAAW;YACT,CAAC,UAAU;gBACT,CAAC,CAAC,EAAE,CAAC,cAAc,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,IAAI,cAAc,EAAE,CAAC,OAAO,IAAI,QAAQ,CAAC;gBAC/F,CAAC,CAAC,EAAE,CAAC,cAAc,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,IAAI,cAAc,EAAE,CAAC,OAAO,IAAI,QAAQ,CAAC,CAAC,CACrG,KACG,KAAK,YAER,MAAM,CAAC,KAAK,GACN,CACV,CAAC;AACJ,CAAC,CACF,CAAC;AACF,eAAe,CAAC,WAAW,GAAG,iBAAiB,CAAC;AAEhD,OAAO,EAAE,eAAe,EAAE,CAAC"}