@sixthshift/design-system 0.2.1 → 0.4.0

package/dist/components/BarChart/BarChart.js

@@ -1,14 +1,28 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from "@sixthshift/design-system/utils";
+import * as React from "react";
 const DEFAULT_COLORS = ["var(--fg-brand)", "var(--fg-success)", "var(--fg-warning)", "var(--fg-danger)", "var(--fg-subtle)"];
-export const BarChart = ({ data, showValues = true, maxValue: maxValueProp, formatValue = (v) => String(v), barHeight = 24, className, ...rest }) => {
+/**
+ * Horizontal bar chart, rendered as plain `<div>` bars rather than SVG — each
+ * row is a label, a track, and a colored fill sized to the item's percentage
+ * of `maxValue` (auto-detected from the data when omitted).
+ *
+ * Colour is per-item: pass a CSS color string via `color` on a
+ * `BarChartItem` (typically a `var(--fg-*)` token), or omit it to cycle
+ * through the built-in `DEFAULT_COLORS` list by index. There is no
+ * chart-level accessible name — the only text exposed to assistive tech is
+ * the visible label and, when `showValues` is true (the default), the
+ * formatted value next to each bar.
+ */
+export const BarChart = React.forwardRef(({ data, showValues = true, maxValue: maxValueProp, formatValue = (v) => String(v), barHeight = 24, className, ...rest }, ref) => {
     const maxValue = maxValueProp ?? Math.max(...data.map((d) => d.value), 1);
-    return (_jsx("div", { ...rest, className: cn("flex flex-col gap-2", className), children: data.map((item, i) => {
+    return (_jsx("div", { ref: ref, ...rest, className: cn("flex flex-col gap-2", className), children: data.map((item, i) => {
             // Clamp both ends: a negative value would otherwise emit an invalid
             // `width: -n%`, whose rendering is undefined.
             const percent = Math.min(Math.max((item.value / maxValue) * 100, 0), 100);
             const color = item.color ?? DEFAULT_COLORS[i % DEFAULT_COLORS.length];
             return (_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("span", { className: "w-20 shrink-0 truncate text-right text-fg-subtle text-sm", children: item.label }), _jsx("div", { className: "flex-1 overflow-hidden rounded-sm bg-bg-subtle", style: { height: barHeight }, children: _jsx("div", { className: "h-full rounded-sm transition-all duration-300", style: { width: `${percent}%`, backgroundColor: color } }) }), showValues && _jsx("span", { className: "w-12 shrink-0 text-right font-medium text-fg-normal text-sm", children: formatValue(item.value) })] }, item.label));
         }) }));
-};
+});
+BarChart.displayName = "BarChart";
 //# sourceMappingURL=BarChart.js.map

package/dist/components/BarChart/BarChart.js.map

@@ -1 +1 @@
-{"version":3,"file":"BarChart.js","sourceRoot":"","sources":["../../../src/components/BarChart/BarChart.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,iCAAiC,CAAC;AAiBrD,MAAM,cAAc,GAAG,CAAC,iBAAiB,EAAE,mBAAmB,EAAE,mBAAmB,EAAE,kBAAkB,EAAE,kBAAkB,CAAC,CAAC;AAE7H,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,EACvB,IAAI,EACJ,UAAU,GAAG,IAAI,EACjB,QAAQ,EAAE,YAAY,EACtB,WAAW,GAAG,CAAC,CAAC,EAAE,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,EAC9B,SAAS,GAAG,EAAE,EACd,SAAS,EACT,GAAG,IAAI,EACO,EAAE,EAAE;IAClB,MAAM,QAAQ,GAAG,YAAY,IAAI,IAAI,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,CAAC;IAE1E,OAAO,CACL,iBAAS,IAAI,EAAE,SAAS,EAAE,EAAE,CAAC,qBAAqB,EAAE,SAAS,CAAC,YAC3D,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE;YACpB,oEAAoE;YACpE,8CAA8C;YAC9C,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,KAAK,GAAG,QAAQ,CAAC,GAAG,GAAG,EAAE,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC;YAC1E,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,IAAI,cAAc,CAAC,CAAC,GAAG,cAAc,CAAC,MAAM,CAAC,CAAC;YAEtE,OAAO,CACL,eAAsB,SAAS,EAAC,yBAAyB,aACvD,eAAM,SAAS,EAAC,0DAA0D,YAAE,IAAI,CAAC,KAAK,GAAQ,EAC9F,cAAK,SAAS,EAAC,gDAAgD,EAAC,KAAK,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,YAC1F,cAAK,SAAS,EAAC,+CAA+C,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,GAAG,OAAO,GAAG,EAAE,eAAe,EAAE,KAAK,EAAE,GAAI,GACtH,EACL,UAAU,IAAI,eAAM,SAAS,EAAC,6DAA6D,YAAE,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,GAAQ,KALrH,IAAI,CAAC,KAAK,CAMd,CACP,CAAC;QACJ,CAAC,CAAC,GACE,CACP,CAAC;AACJ,CAAC,CAAC"}
+{"version":3,"file":"BarChart.js","sourceRoot":"","sources":["../../../src/components/BarChart/BarChart.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,iCAAiC,CAAC;AACrD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAgB/B,MAAM,cAAc,GAAG,CAAC,iBAAiB,EAAE,mBAAmB,EAAE,mBAAmB,EAAE,kBAAkB,EAAE,kBAAkB,CAAC,CAAC;AAE7H;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CACtC,CAAC,EAAE,IAAI,EAAE,UAAU,GAAG,IAAI,EAAE,QAAQ,EAAE,YAAY,EAAE,WAAW,GAAG,CAAC,CAAC,EAAE,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,SAAS,GAAG,EAAE,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG,EAAE,EAAE;IAC/H,MAAM,QAAQ,GAAG,YAAY,IAAI,IAAI,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,CAAC;IAE1E,OAAO,CACL,cAAK,GAAG,EAAE,GAAG,KAAM,IAAI,EAAE,SAAS,EAAE,EAAE,CAAC,qBAAqB,EAAE,SAAS,CAAC,YACrE,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE;YACpB,oEAAoE;YACpE,8CAA8C;YAC9C,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,KAAK,GAAG,QAAQ,CAAC,GAAG,GAAG,EAAE,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC;YAC1E,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,IAAI,cAAc,CAAC,CAAC,GAAG,cAAc,CAAC,MAAM,CAAC,CAAC;YAEtE,OAAO,CACL,eAAsB,SAAS,EAAC,yBAAyB,aACvD,eAAM,SAAS,EAAC,0DAA0D,YAAE,IAAI,CAAC,KAAK,GAAQ,EAC9F,cAAK,SAAS,EAAC,gDAAgD,EAAC,KAAK,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,YAC1F,cAAK,SAAS,EAAC,+CAA+C,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,GAAG,OAAO,GAAG,EAAE,eAAe,EAAE,KAAK,EAAE,GAAI,GACtH,EACL,UAAU,IAAI,eAAM,SAAS,EAAC,6DAA6D,YAAE,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,GAAQ,KALrH,IAAI,CAAC,KAAK,CAMd,CACP,CAAC;QACJ,CAAC,CAAC,GACE,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AACF,QAAQ,CAAC,WAAW,GAAG,UAAU,CAAC"}

package/dist/components/Button/Button.d.ts

@@ -1,19 +1,98 @@
 import { type VariantProps } from "class-variance-authority";
 import * as React from "react";
+/**
+ * Geometry and behaviour only.
+ *
+ * Every colour reads a `--button-*` component token whose value is decided by
+ * src/theme/recipes/button.css. That file is the mapping from
+ * `(variant, intent, state)` to a semantic token — the layer that used to be
+ * `compoundVariants` here, where it was compiled into class-name literals and
+ * unreachable from outside. Nothing in this file names a colour, which is the
+ * point: the semantics are now configurable without a release.
+ */
 declare const buttonVariants: (props?: ({
-    variant?: "link" | "solid" | "outline" | "ghost" | null | undefined;
-    intent?: "neutral" | "danger" | "success" | "warning" | null | undefined;
-    size?: "default" | "xs" | "sm" | "lg" | "xl" | "icon" | null | undefined;
+    size?: "xs" | "sm" | "md" | "lg" | "xl" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/**
+ * Widened deliberately. Adding a variant or an intent is a CSS change in the
+ * consuming app, not a release here — so the type has to admit values this file
+ * has never heard of, while still autocompleting the ones it ships.
+ *
+ * The closed unions are exported alongside, because widening a type gives up the
+ * ability to narrow it downstream: once `string` is in the union,
+ * `Exclude<ButtonVariant, "link">` can no longer remove `link`. ToggleGroup
+ * relies on exactly that exclusion, so it builds on the closed names.
+ */
+type Loose<T extends string> = T | (string & {});
+export type ButtonVariantName = "solid" | "outline" | "ghost" | "link";
+export type ButtonIntentName = "neutral" | "brand" | "danger" | "success" | "warning";
+export type ButtonVariant = Loose<ButtonVariantName>;
+export type ButtonIntent = Loose<ButtonIntentName>;
+export type ButtonRecipeProps = VariantProps<typeof buttonVariants> & {
+    variant?: ButtonVariant | undefined;
+    intent?: ButtonIntent | undefined;
+    iconOnly?: boolean | undefined;
+    className?: string | undefined;
+};
+/**
+ * The class string plus the two attributes the recipe selects on.
+ *
+ * Shared with Toggle and ToggleGroupItem, which are built on Button's look. The
+ * data attributes are half the contract now, so anything reusing that look has
+ * to emit them as well or it lands on the recipe's floor instead of a cell.
+ */
+export declare function buttonRecipe({ variant, intent, size, iconOnly, className }: ButtonRecipeProps): {
+    className: string;
+    "data-variant": ButtonVariant;
+    "data-intent": ButtonIntent;
+};
 export type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & VariantProps<typeof buttonVariants> & {
+    variant?: ButtonVariant | undefined;
+    intent?: ButtonIntent | undefined;
+    /** Square the button at its current size, for an icon with no label. */
+    iconOnly?: boolean;
     asChild?: boolean;
     loading?: boolean;
 };
+/**
+ * A single action the user can take.
+ *
+ * Appearance is three independent axes, so every combination is expressible:
+ * `variant` is the fill and shape (`solid`, `outline`, `ghost`, `link`),
+ * `intent` is what the action *means* (`brand` — the default — plus `neutral`,
+ * `danger`, `success`, `warning`), and `size` is the height scale. Reach for
+ * `intent="danger"` on a destructive action rather than a red `variant` — that
+ * is the distinction that keeps "outline danger" possible.
+ *
+ * `neutral` means *no colour family*: a grey button, the same thing the word
+ * means on Badge and Message. A brand-coloured button is
+ * `intent="brand"` — an affirmative choice, which is why `neutral` is the
+ * default: omitting the prop means "no particular meaning", so it should not
+ * quietly hand back the brand colour. Button used to spell brand as `neutral`
+ * for `solid` and `link` while `outline` and `ghost` were already grey, so a
+ * primary action now needs `intent="brand"` said out loud.
+ *
+ * Colour is not decided here. Each pairing resolves through a `--button-*`
+ * component token, so a consumer can re-point any cell — or add an intent this
+ * library never shipped — from their own stylesheet. See the Component tokens
+ * story below.
+ *
+ * `iconOnly` squares the box at whatever `size` is set and drops the
+ * horizontal padding, for a button whose whole content is an icon — give it an
+ * `aria-label`, since there is no text to name it. It is a separate prop rather
+ * than a size, so `size="sm" iconOnly` is expressible.
+ *
+ * `asChild` renders the child element with Button's styling instead of a
+ * `<button>`, for links that should look like buttons. `loading` shows a spinner
+ * and disables the control, so it does not need `disabled` as well.
+ */
 declare const Button: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & VariantProps<(props?: ({
-    variant?: "link" | "solid" | "outline" | "ghost" | null | undefined;
-    intent?: "neutral" | "danger" | "success" | "warning" | null | undefined;
-    size?: "default" | "xs" | "sm" | "lg" | "xl" | "icon" | null | undefined;
+    size?: "xs" | "sm" | "md" | "lg" | "xl" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string> & {
+    variant?: ButtonVariant | undefined;
+    intent?: ButtonIntent | undefined;
+    /** Square the button at its current size, for an icon with no label. */
+    iconOnly?: boolean;
     asChild?: boolean;
     loading?: boolean;
 } & React.RefAttributes<HTMLButtonElement>>;

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

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AACA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,QAAA,MAAM,cAAc;;;;8EAqHnB,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,GACrE,YAAY,CAAC,OAAO,cAAc,CAAC,GAAG;IACpC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEJ,QAAA,MAAM,MAAM;;;;;cAJE,OAAO;cACP,OAAO;2CA0BpB,CAAC;AAGF,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,CAAC"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AACA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B;;;;;;;;;GASG;AACH,QAAA,MAAM,cAAc;;8EAoBnB,CAAC;AAiCF;;;;;;;;;GASG;AACH,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,GAAG,MAAM,CAAC;AACvE,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,iBAAiB,GAAG,YAAY,CAAC,OAAO,cAAc,CAAC,GAAG;IACpE,OAAO,CAAC,EAAE,aAAa,GAAG,SAAS,CAAC;IACpC,MAAM,CAAC,EAAE,YAAY,GAAG,SAAS,CAAC;IAClC,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC/B,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CAChC,CAAC;AAEF;;;;;;GAMG;AACH,wBAAgB,YAAY,CAAC,EAAE,OAAiB,EAAE,MAAkB,EAAE,IAAI,EAAE,QAAgB,EAAE,SAAS,EAAE,EAAE,iBAAiB;;;;EAU3H;AAED,MAAM,MAAM,WAAW,GAAG,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,GACrE,YAAY,CAAC,OAAO,cAAc,CAAC,GAAG;IACpC,OAAO,CAAC,EAAE,aAAa,GAAG,SAAS,CAAC;IACpC,MAAM,CAAC,EAAE,YAAY,GAAG,SAAS,CAAC;IAClC,wEAAwE;IACxE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,QAAA,MAAM,MAAM;;;cAxCE,aAAa,GAAG,SAAS;aAC1B,YAAY,GAAG,SAAS;IACjC,wEAAwE;eAC7D,OAAO;cACR,OAAO;cACP,OAAO;2CA0DpB,CAAC;AAGF,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,CAAC"}

package/dist/components/Button/Button.js

@@ -3,124 +3,115 @@ import { cn } from "@sixthshift/design-system/utils";
 import { cva } from "class-variance-authority";
 import * as React from "react";
 import { Slot } from "../../internal/Slot.js";
-const buttonVariants = cva("inline-flex cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-md font-medium text-sm transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", {
+/**
+ * Geometry and behaviour only.
+ *
+ * Every colour reads a `--button-*` component token whose value is decided by
+ * src/theme/recipes/button.css. That file is the mapping from
+ * `(variant, intent, state)` to a semantic token — the layer that used to be
+ * `compoundVariants` here, where it was compiled into class-name literals and
+ * unreachable from outside. Nothing in this file names a colour, which is the
+ * point: the semantics are now configurable without a release.
+ */
+const buttonVariants = cva(
+// One literal, deliberately: `useSortedClasses --unsafe` strips the trailing
+// space before a `+`, silently welding the last class of one fragment to the
+// first of the next. The screenshots catch it, but a single string means the
+// sorter has nothing to break.
+"btn border-(color:--button-border) focus-visible:ring-(color:--button-ring) inline-flex cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-md bg-(--button-bg) font-medium text-(--button-fg) text-sm transition-colors hover:bg-(--button-bg-hovered) focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-offset-2 active:bg-(--button-bg-pressed) disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", {
     variants: {
-        variant: {
-            solid: "shadow",
-            outline: "border bg-bg-normal shadow-xs",
-            ghost: "",
-            link: "underline-offset-4 hover:underline",
-        },
-        intent: {
-            neutral: "",
-            danger: "",
-            success: "",
-            warning: "",
-        },
         size: {
-            default: "h-9 px-4 py-2",
             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",
-            icon: "h-9 w-9",
         },
     },
-    compoundVariants: [
-        // Solid variants
-        {
-            variant: "solid",
-            intent: "neutral",
-            className: "bg-bg-brand text-fg-on-brand hover:bg-bg-brand-hovered active:bg-bg-brand-pressed",
-        },
-        {
-            variant: "solid",
-            intent: "danger",
-            className: "bg-bg-danger text-fg-on-danger hover:bg-bg-danger-hovered active:bg-bg-danger-pressed",
-        },
-        {
-            variant: "solid",
-            intent: "success",
-            className: "bg-bg-success text-fg-on-success hover:bg-bg-success-hovered active:bg-bg-success-pressed",
-        },
-        {
-            variant: "solid",
-            intent: "warning",
-            className: "bg-bg-warning text-fg-on-warning hover:bg-bg-warning-hovered active:bg-bg-warning-pressed",
-        },
-        // Outline variants
-        {
-            variant: "outline",
-            intent: "neutral",
-            className: "border-border-normal text-fg-normal hover:bg-bg-subtle-hovered active:bg-bg-subtle-pressed",
-        },
-        {
-            variant: "outline",
-            intent: "danger",
-            className: "border-border-danger text-fg-danger hover:bg-bg-danger-subtle-hovered active:bg-bg-danger-subtle-pressed",
-        },
-        {
-            variant: "outline",
-            intent: "success",
-            className: "border-border-success text-fg-success hover:bg-bg-success-subtle-hovered active:bg-bg-success-subtle-pressed",
-        },
-        {
-            variant: "outline",
-            intent: "warning",
-            className: "border-border-warning text-fg-warning hover:bg-bg-warning-subtle-hovered active:bg-bg-warning-subtle-pressed",
-        },
-        // Ghost variants
-        {
-            variant: "ghost",
-            intent: "neutral",
-            className: "text-fg-normal hover:bg-bg-subtle-hovered active:bg-bg-subtle-pressed",
-        },
-        {
-            variant: "ghost",
-            intent: "danger",
-            className: "text-fg-danger hover:bg-bg-danger-subtle-hovered active:bg-bg-danger-subtle-pressed",
-        },
-        {
-            variant: "ghost",
-            intent: "success",
-            className: "text-fg-success hover:bg-bg-success-subtle-hovered active:bg-bg-success-subtle-pressed",
-        },
-        {
-            variant: "ghost",
-            intent: "warning",
-            className: "text-fg-warning hover:bg-bg-warning-subtle-hovered active:bg-bg-warning-subtle-pressed",
-        },
-        // Link variants
-        {
-            variant: "link",
-            intent: "neutral",
-            className: "text-fg-brand",
-        },
-        {
-            variant: "link",
-            intent: "danger",
-            className: "text-fg-danger",
-        },
-        {
-            variant: "link",
-            intent: "success",
-            className: "text-fg-success",
-        },
-        {
-            variant: "link",
-            intent: "warning",
-            className: "text-fg-warning",
-        },
-    ],
     defaultVariants: {
-        variant: "solid",
-        intent: "neutral",
-        size: "default",
+        size: "md",
     },
 });
-const Button = React.forwardRef(({ className, variant, intent, size, asChild = false, loading = false, children, disabled, ...props }, ref) => {
+/**
+ * The non-colour half of `variant` — border width, elevation, underline.
+ *
+ * A plain lookup rather than a CVA variant so an unrecognised variant stays a
+ * legal value that contributes no structure, leaving a consumer's CSS free to
+ * define it. `intent` needs no equivalent: it was never anything but colour.
+ */
+const variantStructure = {
+    solid: "shadow",
+    outline: "border shadow-xs",
+    ghost: "",
+    link: "underline-offset-4 hover:underline",
+};
+/**
+ * Squares the box at whatever size is set, and drops the horizontal padding.
+ *
+ * Shape, kept off the size union deliberately. A single axis carrying both a
+ * scale and a shape cannot express a *small* icon button, which is what a fixed
+ * `icon: "h-9 w-9"` size amounted to. Keyed by size rather than folded into the
+ * size classes so the two stay orthogonal; `cn` (tailwind-merge) resolves
+ * `px-0` against the size's own `px-*`, last write winning.
+ */
+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",
+};
+/**
+ * The class string plus the two attributes the recipe selects on.
+ *
+ * Shared with Toggle and ToggleGroupItem, which are built on Button's look. The
+ * data attributes are half the contract now, so anything reusing that look has
+ * to emit them as well or it lands on the recipe's floor instead of a cell.
+ */
+export function buttonRecipe({ variant = "solid", intent = "neutral", size, iconOnly = false, className }) {
+    return {
+        className: cn(variantStructure[variant], 
+        // `className` stays last so a caller still outranks the icon geometry.
+        buttonVariants({ size, className: cn(iconOnly ? iconOnlyGeometry[size ?? "md"] : undefined, className) })),
+        "data-variant": variant,
+        "data-intent": intent,
+    };
+}
+/**
+ * A single action the user can take.
+ *
+ * Appearance is three independent axes, so every combination is expressible:
+ * `variant` is the fill and shape (`solid`, `outline`, `ghost`, `link`),
+ * `intent` is what the action *means* (`brand` — the default — plus `neutral`,
+ * `danger`, `success`, `warning`), and `size` is the height scale. Reach for
+ * `intent="danger"` on a destructive action rather than a red `variant` — that
+ * is the distinction that keeps "outline danger" possible.
+ *
+ * `neutral` means *no colour family*: a grey button, the same thing the word
+ * means on Badge and Message. A brand-coloured button is
+ * `intent="brand"` — an affirmative choice, which is why `neutral` is the
+ * default: omitting the prop means "no particular meaning", so it should not
+ * quietly hand back the brand colour. Button used to spell brand as `neutral`
+ * for `solid` and `link` while `outline` and `ghost` were already grey, so a
+ * primary action now needs `intent="brand"` said out loud.
+ *
+ * Colour is not decided here. Each pairing resolves through a `--button-*`
+ * component token, so a consumer can re-point any cell — or add an intent this
+ * library never shipped — from their own stylesheet. See the Component tokens
+ * story below.
+ *
+ * `iconOnly` squares the box at whatever `size` is set and drops the
+ * horizontal padding, for a button whose whole content is an icon — give it an
+ * `aria-label`, since there is no text to name it. It is a separate prop rather
+ * than a size, so `size="sm" iconOnly` is expressible.
+ *
+ * `asChild` renders the child element with Button's styling instead of a
+ * `<button>`, for links that should look like buttons. `loading` shows a spinner
+ * and disables the control, so it does not need `disabled` as well.
+ */
+const Button = React.forwardRef(({ className, variant = "solid", intent = "neutral", size, iconOnly = false, asChild = false, loading = false, children, disabled, ...props }, ref) => {
     const Comp = asChild ? Slot : "button";
-    return (_jsx(Comp, { className: cn(buttonVariants({ variant, intent, size, className })), ref: ref, disabled: disabled || loading, ...props, children: loading ? (_jsxs(_Fragment, { children: [_jsxs("svg", { className: "animate-spin", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", "aria-hidden": "true", children: [_jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }), _jsx("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" })] }), children] })) : (children) }));
+    return (_jsx(Comp, { ...buttonRecipe({ variant, intent, size, iconOnly, className }), ref: ref, disabled: disabled || loading, ...props, children: loading ? (_jsxs(_Fragment, { children: [_jsxs("svg", { className: "animate-spin", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", "aria-hidden": "true", children: [_jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }), _jsx("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" })] }), children] })) : (children) }));
 });
 Button.displayName = "Button";
 export { Button, buttonVariants };

package/dist/components/Button/Button.js.map

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

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

@@ -1,2 +1,2 @@
-export { Button, type ButtonProps, buttonVariants } from "./Button.js";
+export { Button, type ButtonIntent, type ButtonIntentName, type ButtonProps, type ButtonVariant, type ButtonVariantName, buttonRecipe, buttonVariants, } from "./Button.js";
 //# sourceMappingURL=index.d.ts.map

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

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

package/dist/components/Button/index.js

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

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

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

package/dist/components/Calendar/Calendar.d.ts

@@ -1,4 +1,34 @@
+import * as React from "react";
 import type { CalendarProps } from "./calendar.types.js";
 export type { CalendarProps };
-export declare const Calendar: (props: CalendarProps) => import("react").JSX.Element;
+/**
+ * Inline month grid for picking one date, a range, or several dates — the
+ * building block `DatePicker` puts behind a popover trigger. Reach for
+ * `Calendar` directly when the grid should be always visible rather than
+ * opened on demand.
+ *
+ * `mode` (`"single" | "range" | "multiple"`) decides the shape of `value` and
+ * `onSelect`: an `ISODate` string, an `ISODateRange` (`{ from?, to? }`), or an
+ * `ISODate[]` respectively. There is no uncontrolled form — `value` and
+ * `onSelect` are both required, so the caller always owns the selection.
+ *
+ * `minDate`/`maxDate` bound the selectable range inclusively; `disabled` takes
+ * a single date, a list, or a declarative matcher (before/after/range/weekday)
+ * or predicate — see `DisabledDates`. Day cells form a roving-tabindex grid:
+ * arrow keys move by day, Home/End jump to the start/end of the week, and
+ * PageUp/PageDown request a month change.
+ *
+ * A thin adapter over {@link CalendarView}: it parses incoming ISO strings and
+ * serialises outgoing selections. All the behaviour lives in CalendarView.
+ *
+ * Every conversion is memoised on the string it came from, and every handler is
+ * stable. Temporal objects have no value identity — `PlainDate.from("2026-08-26")`
+ * is never `===` another PlainDate for the same day — and CalendarView keys
+ * `useMemo`/`useCallback` on these values directly, so converting unmemoised
+ * would invalidate the whole grid on every render.
+ *
+ * Props are read with `"key" in props` rather than destructured per mode,
+ * because every hook here has to run unconditionally.
+ */
+export declare const Calendar: React.ForwardRefExoticComponent<CalendarProps & React.RefAttributes<HTMLDivElement>>;
 //# sourceMappingURL=Calendar.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Calendar.d.ts","sourceRoot":"","sources":["../../../src/components/Calendar/Calendar.tsx"],"names":[],"mappings":"AA2BA,OAAO,KAAK,EAAE,aAAa,EAAoE,MAAM,kBAAkB,CAAC;AAExH,YAAY,EAAE,aAAa,EAAE,CAAC;AAyB9B,eAAO,MAAM,QAAQ,UAAW,aAAa,gCA0X5C,CAAC"}
+{"version":3,"file":"Calendar.d.ts","sourceRoot":"","sources":["../../../src/components/Calendar/Calendar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAe/B,OAAO,KAAK,EAAE,aAAa,EAAmD,MAAM,kBAAkB,CAAC;AAEvG,YAAY,EAAE,aAAa,EAAE,CAAC;AAE9B;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,eAAO,MAAM,QAAQ,sFAsFnB,CAAC"}