@devalok/shilp-sutra 0.39.0 → 0.40.0

package/dist/ui/oauth-button/oauth-button.d.ts

@@ -0,0 +1,208 @@
+"use client";
+import { ButtonProps } from '../button';
+import { IconInput } from '../lib/icon-input';
+import * as React from 'react';
+export type OAuthProvider = 'google' | 'apple' | 'github' | 'microsoft' | 'x' | 'linkedin' | 'facebook' | 'discord' | 'slack' | 'gitlab' | 'sso' | 'email' | 'passkey';
+export type OAuthIntent = 'continue' | 'signin' | 'signup';
+/**
+ * Visual treatment — 1:1 with Button's variant axis. OAuthButton is a thin
+ * wrapper over Button, so every variant renders pixel-for-pixel identical
+ * to a regular Button at the same variant + size. Brand identity lives in
+ * the glyph (override via `icon` for a brand-multicolour SVG), not the
+ * button surface.
+ *
+ * - `solid` (default) | `soft` | `outline` | `ghost`
+ */
+export type OAuthVariant = 'solid' | 'soft' | 'outline' | 'ghost';
+/** @deprecated Use `OAuthVariant`. brand/dark map to solid; outline passes through. */
+export type OAuthAppearance = 'brand' | 'outline' | 'dark';
+/**
+ * Props for `OAuthButton` — a brand-aware sign-in button for OAuth providers.
+ *
+ * Composes on top of `<Button>`, inheriting `size`, `loading`, `onClickAsync`,
+ * `fullWidth`, and async state machinery. The provider's icon, label, and
+ * brand-coloured styling are derived from the `provider` prop.
+ *
+ * **Provider** (required): includes 10 social providers + 3 generic
+ * identifiers (`sso` enterprise, `email` magic-link, `passkey` WebAuthn).
+ *
+ * **Intent**: drives the verb in the label.
+ * - `continue` (default) — "Continue with Google" — works on login and signup.
+ * - `signin` — "Sign in with Google".
+ * - `signup` — "Sign up with Google".
+ *
+ * **Appearance**: visual treatment.
+ * - `brand` (default) — provider's brand background colour.
+ * - `outline` — DS-neutral outline with monochrome glyph. Best for uniform rows.
+ * - `dark` — unified Apple-style across all providers for visual consistency.
+ *
+ * **icon**: override the default Tabler glyph (e.g. drop in the provider's
+ * official multicolour SVG downloaded from their brand page).
+ *
+ * **iconOnly**: render a square icon button. Provider name kept in `aria-label`.
+ *
+ * **lastUsed**: shows a small "Last used" pill above the button — high-converting
+ * UX hint. Consumer tracks which provider the user picked previously.
+ *
+ * **helperText**: optional reassurance copy rendered below the button.
+ *
+ * @example
+ * <OAuthButton provider="google" intent="continue" fullWidth onClickAsync={signInWithGoogle} />
+ *
+ * @example
+ * // True brand-multicolour glyph:
+ * <OAuthButton provider="google" icon={<GoogleGSvg />} />
+ *
+ * @example
+ * <OAuthGroup>
+ *   <OAuthButton provider="google" appearance="dark" />
+ *   <OAuthButton provider="apple"  appearance="dark" />
+ *   <OAuthButton provider="github" appearance="dark" />
+ * </OAuthGroup>
+ */
+export interface OAuthButtonProps extends Omit<ButtonProps, 'variant' | 'color' | 'startIcon' | 'endIcon' | 'shape' | 'children'> {
+    /** OAuth provider this button represents */
+    provider: OAuthProvider;
+    /** Verb in the default label. Default: `continue` */
+    intent?: OAuthIntent;
+    /**
+     * Visual treatment. Default: `solid`. Mirrors Button's variant axis with
+     * an extra `dark` for row coherence across providers.
+     */
+    variant?: OAuthVariant;
+    /** @deprecated Use `variant`. `appearance="brand"` maps to `variant="solid"`. */
+    appearance?: OAuthAppearance;
+    /** Override the default glyph (e.g. brand-multicolour SVG). Accepts any `IconInput`. */
+    icon?: IconInput;
+    /** Render a compact icon-only button (provider name kept in aria-label) */
+    iconOnly?: boolean;
+    /**
+     * Short label — renders just the provider name ("Google") instead of the
+     * full "Continue with Google". Use under an explicit "Or sign in with"
+     * divider where the verb is already established. aria-label still gets the
+     * full long form for screen readers.
+     */
+    compact?: boolean;
+    /**
+     * Show "Last used" hint — a small pill anchored to the top-right corner of
+     * the button (sits ON the corner, half outside the button bounds).
+     */
+    lastUsed?: boolean;
+    /**
+     * Customise the "Last used" badge. Pass a ReactNode to replace the entire
+     * pill (use this for custom copy, icons, or styling), or a render fn that
+     * receives the default props for tweaks. Only rendered when `lastUsed` is
+     * also set so the wrapper / aria augmentation logic stays consistent.
+     *
+     * @example
+     * <OAuthButton provider="google" lastUsed lastUsedSlot={<MyBadge />} />
+     */
+    lastUsedSlot?: React.ReactNode | ((defaults: {
+        label: string;
+    }) => React.ReactNode);
+    /** Override the visible badge label text. Default: "Last used". */
+    lastUsedLabel?: string;
+    /** Reassurance copy rendered below the button */
+    helperText?: React.ReactNode;
+    /** Override the default label entirely (i18n / custom copy) */
+    children?: React.ReactNode;
+}
+declare const OAuthButton: React.ForwardRefExoticComponent<OAuthButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export { OAuthButton };
+export interface OAuthGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Layout. `vertical` (default) stacks full-width buttons. */
+    orientation?: 'vertical' | 'horizontal';
+    /** Gap token between buttons. Default: `ds-03` */
+    gap?: 'ds-02' | 'ds-03' | 'ds-04';
+    /** Stretch children to fill width (vertical only). Default: true */
+    fullWidth?: boolean;
+    /**
+     * Move any child with `lastUsed` to position 0. Stripe-style ordering — the
+     * provider the user picked last time becomes the top option, which gives a
+     * stronger conversion lift than a "Last used" badge does on its own.
+     * Default: false (preserve source order).
+     */
+    reorderLastUsedFirst?: boolean;
+}
+/**
+ * Stacked layout wrapper for OAuth buttons with consistent spacing. Defaults to
+ * vertical, full-width children — the dominant sign-in pattern. For an icon-only
+ * row, set `orientation="horizontal"` and use `<OAuthButton iconOnly />`.
+ */
+declare const OAuthGroup: React.ForwardRefExoticComponent<OAuthGroupProps & React.RefAttributes<HTMLDivElement>>;
+export { OAuthGroup };
+export interface OAuthDividerProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Text between the rules. Default: "or" */
+    label?: React.ReactNode;
+}
+declare const OAuthDivider: React.ForwardRefExoticComponent<OAuthDividerProps & React.RefAttributes<HTMLDivElement>>;
+export { OAuthDivider };
+export interface OAuthConnectionRowProps extends React.HTMLAttributes<HTMLDivElement> {
+    provider: OAuthProvider;
+    /** Optional account identifier shown next to the provider name (e.g. email) */
+    accountLabel?: React.ReactNode;
+    /** Whether the provider is currently linked */
+    connected: boolean;
+    /** Click handler for the connect/disconnect action */
+    onAction?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    /** Promise-returning click handler — uses Button's async state machine */
+    onActionAsync?: (e: React.MouseEvent<HTMLButtonElement>) => Promise<void>;
+    /** Override the action label */
+    actionLabel?: React.ReactNode;
+    /** Disable the action button */
+    disabled?: boolean;
+    /** Override the default glyph. Accepts any `IconInput`. */
+    icon?: IconInput;
+}
+/**
+ * Settings-page row representing a linked OAuth provider. Different surface
+ * from sign-in: this is an existing connection the user can disconnect or
+ * (re-)connect. Renders glyph + provider name + optional account label + a
+ * connect/disconnect button.
+ */
+declare const OAuthConnectionRow: React.ForwardRefExoticComponent<OAuthConnectionRowProps & React.RefAttributes<HTMLDivElement>>;
+export { OAuthConnectionRow };
+export interface OAuthGlyphProps extends Omit<React.SVGAttributes<SVGElement>, 'children'> {
+    provider: OAuthProvider;
+    /** Glyph pixel size. Default 18. */
+    size?: number;
+}
+/**
+ * Render just the provider glyph — useful when building a custom OAuth
+ * trigger (e.g. an icon-button inside a Tooltip, or a provider chip on a
+ * profile card). Defaults to the Tabler glyph; the icon prop on
+ * `OAuthButton` is the right escape hatch for the brand multi-colour mark.
+ */
+declare const OAuthGlyph: React.ForwardRefExoticComponent<OAuthGlyphProps & React.RefAttributes<SVGSVGElement>>;
+export { OAuthGlyph };
+/**
+ * Resolve the visible label for a provider × intent combo. Useful when
+ * rendering OAuth UIs outside of `OAuthButton` (e.g. a Confirm dialog
+ * "Disconnect from Google?" title).
+ */
+export declare function getOAuthLabel(provider: OAuthProvider, intent?: OAuthIntent, compact?: boolean): string;
+/** Display name for a provider, ready for sentence interpolation. */
+export declare function getOAuthName(provider: OAuthProvider): string;
+/**
+ * Namespaced API — drop-in alternative to importing each piece separately.
+ *
+ * @example
+ * import { OAuth } from '@devalok/shilp-sutra/ui/oauth-button'
+ *
+ * <OAuth.Group reorderLastUsedFirst>
+ *   <OAuth.Button provider="google" lastUsed />
+ *   <OAuth.Button provider="passkey" />
+ *   <OAuth.Divider />
+ *   <OAuth.Button provider="sso" variant="ghost" />
+ * </OAuth.Group>
+ */
+export declare const OAuth: {
+    readonly Button: React.ForwardRefExoticComponent<OAuthButtonProps & React.RefAttributes<HTMLButtonElement>>;
+    readonly Group: React.ForwardRefExoticComponent<OAuthGroupProps & React.RefAttributes<HTMLDivElement>>;
+    readonly Divider: React.ForwardRefExoticComponent<OAuthDividerProps & React.RefAttributes<HTMLDivElement>>;
+    readonly ConnectionRow: React.ForwardRefExoticComponent<OAuthConnectionRowProps & React.RefAttributes<HTMLDivElement>>;
+    readonly Glyph: React.ForwardRefExoticComponent<OAuthGlyphProps & React.RefAttributes<SVGSVGElement>>;
+    readonly getLabel: typeof getOAuthLabel;
+    readonly getName: typeof getOAuthName;
+};
+//# sourceMappingURL=oauth-button.d.ts.map

package/dist/ui/oauth-button/oauth-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"oauth-button.d.ts","sourceRoot":"","sources":["../../../src/ui/oauth-button/oauth-button.tsx"],"names":[],"mappings":"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"}

package/dist/ui/progress.js

@@ -1,5 +1,5 @@
 "use client";
-import { F as e, P as t } from "../_chunks/primitives.js";
+import { A as e, k as t } from "../_chunks/primitives.js";
 import { springs as n } from "./lib/motion.js";
 import { t as r } from "../_chunks/vendor-utils.js";
 import { cn as i } from "./lib/utils.js";

package/dist/ui/segmented-control.d.ts

@@ -1,14 +1,13 @@
 "use client";
+import { IconInput } from './lib/icon-input';
 import * as React from 'react';
 export type SegmentedControlSize = 'sm' | 'md' | 'lg';
 export type SegmentedControlVariant = 'default' | 'solid';
 export interface SegmentedControlOption {
     id: string;
     text: string;
-    /** Optional icon component rendered before the text label. */
-    icon?: React.ComponentType<{
-        className?: string;
-    }>;
+    /** Optional icon rendered before the text label. Accepts any `IconInput`. */
+    icon?: IconInput;
 }
 export interface SegmentedControlProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect'> {
     size?: SegmentedControlSize;

package/dist/ui/segmented-control.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"segmented-control.d.ts","sourceRoot":"","sources":["../../src/ui/segmented-control.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,MAAM,MAAM,oBAAoB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;AACrD,MAAM,MAAM,uBAAuB,GAAG,SAAS,GAAG,OAAO,CAAA;AAEzD,MAAM,WAAW,sBAAsB;IACrC,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,MAAM,CAAA;IACZ,8DAA8D;IAC9D,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAA;CACnD;AAED,MAAM,WAAW,qBAAsB,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC;IACnG,IAAI,CAAC,EAAE,oBAAoB,CAAA;IAC3B,OAAO,CAAC,EAAE,uBAAuB,CAAA;IACjC,OAAO,EAAE,sBAAsB,EAAE,CAAA;IACjC,UAAU,EAAE,MAAM,CAAA;IAClB,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AA6BD,QAAA,MAAM,gBAAgB,8FA+HrB,CAAA;AAKD,OAAO,EAAE,gBAAgB,EAAE,CAAA"}
+{"version":3,"file":"segmented-control.d.ts","sourceRoot":"","sources":["../../src/ui/segmented-control.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAA;AAMjD,MAAM,MAAM,oBAAoB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;AACrD,MAAM,MAAM,uBAAuB,GAAG,SAAS,GAAG,OAAO,CAAA;AAEzD,MAAM,WAAW,sBAAsB;IACrC,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,MAAM,CAAA;IACZ,6EAA6E;IAC7E,IAAI,CAAC,EAAE,SAAS,CAAA;CACjB;AAED,MAAM,WAAW,qBAAsB,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC;IACnG,IAAI,CAAC,EAAE,oBAAoB,CAAA;IAC3B,OAAO,CAAC,EAAE,uBAAuB,CAAA;IACjC,OAAO,EAAE,sBAAsB,EAAE,CAAA;IACjC,UAAU,EAAE,MAAM,CAAA;IAClB,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AA6BD,QAAA,MAAM,gBAAgB,8FAkIrB,CAAA;AAKD,OAAO,EAAE,gBAAgB,EAAE,CAAA"}

package/dist/ui/segmented-control.js

@@ -1,10 +1,12 @@
 "use client";
-import { cn as e } from "./lib/utils.js";
-import * as t from "react";
-import { jsx as n, jsxs as r } from "react/jsx-runtime";
-import { LayoutGroup as i, motion as a } from "framer-motion";
+import { IconProvider as e } from "./icon-context.js";
+import { cn as t } from "./lib/utils.js";
+import { t as n } from "../_chunks/normalize-icon.js";
+import * as r from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { LayoutGroup as o, motion as s } from "framer-motion";
 //#region src/ui/segmented-control.tsx
-var o = {
+var c = {
 	sm: {
 		button: "h-7 px-ds-04 text-ds-sm",
 		icon: "h-3.5 w-3.5"
@@ -17,78 +19,84 @@ var o = {
 		button: "h-10 px-ds-06 text-ds-md",
 		icon: "h-4 w-4"
 	}
-}, s = {
+}, l = {
 	default: "bg-surface-overlay shadow-raised",
 	solid: "bg-accent-9"
-}, c = {
+}, u = {
 	default: "text-surface-fg",
 	solid: "text-accent-fg"
-}, l = {
+}, d = {
 	type: "spring",
 	stiffness: 400,
 	damping: 30
-}, u = t.forwardRef(function({ size: u = "md", variant: d = "default", options: f, selectedId: p, onSelect: m, disabled: h = !1, className: g, ..._ }, v) {
-	let y = t.useId(), b = t.useRef(null), x = t.useCallback((e) => {
-		b.current = e, typeof v == "function" ? v(e) : v && (v.current = e);
-	}, [v]), S = (e) => {
-		if (h) return;
-		let t = f.findIndex((e) => e.id === p), n = t;
+}, f = r.forwardRef(function({ size: f = "md", variant: p = "default", options: m, selectedId: h, onSelect: g, disabled: _ = !1, className: v, ...y }, b) {
+	let x = r.useId(), S = r.useRef(null), C = r.useCallback((e) => {
+		S.current = e, typeof b == "function" ? b(e) : b && (b.current = e);
+	}, [b]), w = (e) => {
+		if (_) return;
+		let t = m.findIndex((e) => e.id === h), n = t;
 		switch (e.key) {
 			case "ArrowLeft":
-				e.preventDefault(), n = t > 0 ? t - 1 : f.length - 1;
+				e.preventDefault(), n = t > 0 ? t - 1 : m.length - 1;
 				break;
 			case "ArrowRight":
-				e.preventDefault(), n = t < f.length - 1 ? t + 1 : 0;
+				e.preventDefault(), n = t < m.length - 1 ? t + 1 : 0;
 				break;
 			case "Home":
 				e.preventDefault(), n = 0;
 				break;
 			case "End":
-				e.preventDefault(), n = f.length - 1;
+				e.preventDefault(), n = m.length - 1;
 				break;
 			default: return;
 		}
-		m(f[n].id), requestAnimationFrame(() => {
-			(b.current?.querySelectorAll("[role=\"tab\"]"))?.[n]?.focus();
+		g(m[n].id), requestAnimationFrame(() => {
+			(S.current?.querySelectorAll("[role=\"tab\"]"))?.[n]?.focus();
 		});
-	}, { button: C, icon: w } = o[u];
-	return /* @__PURE__ */ n("div", {
-		ref: x,
+	}, { button: T, icon: E } = c[f];
+	return /* @__PURE__ */ i("div", {
+		ref: C,
 		role: "tablist",
 		tabIndex: -1,
-		"aria-label": _["aria-label"] ?? "Segmented control",
-		onKeyDown: S,
-		className: e("inline-flex p-[3px] rounded-pill", "bg-surface-raised-hover border border-surface-border-subtle shadow-inset", h && "opacity-action-disabled pointer-events-none", g),
-		..._,
-		children: /* @__PURE__ */ n(i, {
-			id: y,
-			children: f.map((t) => {
-				let i = t.id === p, o = t.icon;
-				return /* @__PURE__ */ r("button", {
+		"aria-label": y["aria-label"] ?? "Segmented control",
+		onKeyDown: w,
+		className: t("inline-flex p-[3px] rounded-pill", "bg-surface-raised-hover border border-surface-border-subtle shadow-inset", _ && "opacity-action-disabled pointer-events-none", v),
+		...y,
+		children: /* @__PURE__ */ i(o, {
+			id: x,
+			children: m.map((r) => {
+				let o = r.id === h;
+				return /* @__PURE__ */ a("button", {
 					type: "button",
 					role: "tab",
-					"aria-selected": i,
-					tabIndex: i ? 0 : -1,
-					disabled: h,
-					onClick: () => m(t.id),
-					className: e("relative inline-flex items-center justify-center gap-ds-02 rounded-pill", "font-medium transition-colors duration-fast-02 ease-productive-standard", "outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2", C, i ? c[d] : "text-surface-fg-muted hover:text-surface-fg"),
+					"aria-selected": o,
+					tabIndex: o ? 0 : -1,
+					disabled: _,
+					onClick: () => g(r.id),
+					className: t("relative inline-flex items-center justify-center gap-ds-02 rounded-pill", "font-medium transition-colors duration-fast-02 ease-productive-standard", "outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2", T, o ? u[p] : "text-surface-fg-muted hover:text-surface-fg"),
 					children: [
-						i && /* @__PURE__ */ n(a.span, {
+						o && /* @__PURE__ */ i(s.span, {
 							layoutId: "segment-pill",
-							className: e("absolute inset-0 rounded-pill pointer-events-none", s[d]),
-							transition: l
+							className: t("absolute inset-0 rounded-pill pointer-events-none", l[p]),
+							transition: d
+						}),
+						r.icon && /* @__PURE__ */ i("span", {
+							className: t("relative z-[1] shrink-0 inline-flex items-center justify-center", E),
+							children: /* @__PURE__ */ i(e, {
+								size: f === "lg" ? "sm" : "xs",
+								children: n(r.icon)
+							})
 						}),
-						o && /* @__PURE__ */ n(o, { className: e("relative z-[1] shrink-0", w) }),
-						/* @__PURE__ */ n("span", {
+						/* @__PURE__ */ i("span", {
 							className: "relative z-[1]",
-							children: t.text
+							children: r.text
 						})
 					]
-				}, t.id);
+				}, r.id);
 			})
 		})
 	});
 });
-u.displayName = "SegmentedControl";
+f.displayName = "SegmentedControl";
 //#endregion
-export { u as SegmentedControl };
+export { f as SegmentedControl };

package/dist/ui/segmented-control.js.map

@@ -1 +1 @@
-{"version":3,"file":"segmented-control.js","names":[],"sources":["../../src/ui/segmented-control.tsx"],"sourcesContent":["'use client'\n\nimport { LayoutGroup,motion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { cn } from './lib/utils'\n\n/* ── Types ─────────────────────────────────────────────────── */\n\nexport type SegmentedControlSize = 'sm' | 'md' | 'lg'\nexport type SegmentedControlVariant = 'default' | 'solid'\n\nexport interface SegmentedControlOption {\n  id: string\n  text: string\n  /** Optional icon component rendered before the text label. */\n  icon?: React.ComponentType<{ className?: string }>\n}\n\nexport interface SegmentedControlProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect'> {\n  size?: SegmentedControlSize\n  variant?: SegmentedControlVariant\n  options: SegmentedControlOption[]\n  selectedId: string\n  onSelect: (id: string) => void\n  disabled?: boolean\n}\n\n/* ── Size config ───────────────────────────────────────────── */\n\nconst sizeConfig = {\n  sm: { button: 'h-7 px-ds-04 text-ds-sm', icon: 'h-3.5 w-3.5' },\n  md: { button: 'h-8 px-ds-05 text-ds-md', icon: 'h-4 w-4' },\n  lg: { button: 'h-10 px-ds-06 text-ds-md', icon: 'h-4 w-4' },\n} as const\n\n/* ── Pill styles per variant ───────────────────────────────── */\n\nconst pillStyles = {\n  default: 'bg-surface-overlay shadow-raised',\n  solid: 'bg-accent-9',\n} as const\n\nconst selectedTextStyles = {\n  default: 'text-surface-fg',\n  solid: 'text-accent-fg',\n} as const\n\n/* ── Spring config (snappy, minimal overshoot) ─────────────── */\n/* Intentionally softer than springs.snappy (500/30/0.5) for pill slide feel */\n\nconst pillSpring = { type: 'spring' as const, stiffness: 400, damping: 30 }\n\n/* ── SegmentedControl ──────────────────────────────────────── */\n\nconst SegmentedControl = React.forwardRef<HTMLDivElement, SegmentedControlProps>(\n  function SegmentedControl(\n    {\n      size = 'md',\n      variant = 'default',\n      options,\n      selectedId,\n      onSelect,\n      disabled = false,\n      className,\n      ...props\n    },\n    ref,\n  ) {\n    const instanceId = React.useId()\n    const tablistRef = React.useRef<HTMLDivElement | null>(null)\n\n    // Compose refs\n    const mergedRef = React.useCallback(\n      (node: HTMLDivElement | null) => {\n        tablistRef.current = node\n        if (typeof ref === 'function') ref(node)\n        else if (ref) (ref as React.MutableRefObject<HTMLDivElement | null>).current = node\n      },\n      [ref],\n    )\n\n    // Keyboard navigation\n    const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n      if (disabled) return\n\n      const currentIndex = options.findIndex((o) => o.id === selectedId)\n      let nextIndex = currentIndex\n\n      switch (e.key) {\n        case 'ArrowLeft':\n          e.preventDefault()\n          nextIndex = currentIndex > 0 ? currentIndex - 1 : options.length - 1\n          break\n        case 'ArrowRight':\n          e.preventDefault()\n          nextIndex = currentIndex < options.length - 1 ? currentIndex + 1 : 0\n          break\n        case 'Home':\n          e.preventDefault()\n          nextIndex = 0\n          break\n        case 'End':\n          e.preventDefault()\n          nextIndex = options.length - 1\n          break\n        default:\n          return\n      }\n\n      onSelect(options[nextIndex].id)\n      requestAnimationFrame(() => {\n        const buttons = tablistRef.current?.querySelectorAll<HTMLButtonElement>('[role=\"tab\"]')\n        buttons?.[nextIndex]?.focus()\n      })\n    }\n\n    const { button: buttonSize, icon: iconSize } = sizeConfig[size]\n\n    return (\n      <div\n        ref={mergedRef}\n        role=\"tablist\"\n        tabIndex={-1}\n        aria-label={props['aria-label'] ?? 'Segmented control'}\n        onKeyDown={handleKeyDown}\n        className={cn(\n          'inline-flex p-[3px] rounded-pill',\n          'bg-surface-raised-hover border border-surface-border-subtle shadow-inset',\n          disabled && 'opacity-action-disabled pointer-events-none',\n          className,\n        )}\n        {...props}\n      >\n        <LayoutGroup id={instanceId}>\n          {options.map((option) => {\n            const isSelected = option.id === selectedId\n            const OptionIcon = option.icon\n\n            return (\n              <button\n                key={option.id}\n                type=\"button\"\n                role=\"tab\"\n                aria-selected={isSelected}\n                tabIndex={isSelected ? 0 : -1}\n                disabled={disabled}\n                onClick={() => onSelect(option.id)}\n                className={cn(\n                  'relative inline-flex items-center justify-center gap-ds-02 rounded-pill',\n                  'font-medium transition-colors duration-fast-02 ease-productive-standard',\n                  'outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2',\n                  buttonSize,\n                  isSelected\n                    ? selectedTextStyles[variant]\n                    : 'text-surface-fg-muted hover:text-surface-fg',\n                )}\n              >\n                {/* Sliding pill indicator */}\n                {isSelected && (\n                  <motion.span\n                    layoutId=\"segment-pill\"\n                    className={cn(\n                      'absolute inset-0 rounded-pill pointer-events-none',\n                      pillStyles[variant],\n                    )}\n                    transition={pillSpring}\n                  />\n                )}\n\n                {/* Content (above pill via z-index) */}\n                {OptionIcon && (\n                  <OptionIcon className={cn('relative z-[1] shrink-0', iconSize)} />\n                )}\n                <span className=\"relative z-[1]\">{option.text}</span>\n              </button>\n            )\n          })}\n        </LayoutGroup>\n      </div>\n    )\n  },\n)\nSegmentedControl.displayName = 'SegmentedControl'\n\n/* ── Exports ───────────────────────────────────────────────── */\n\nexport { SegmentedControl }\n"],"mappings":";;;;;;AA8BA,IAAM,IAAa;CACjB,IAAI;EAAE,QAAQ;EAA2B,MAAM;EAAe;CAC9D,IAAI;EAAE,QAAQ;EAA2B,MAAM;EAAW;CAC1D,IAAI;EAAE,QAAQ;EAA4B,MAAM;EAAW;CAC5D,EAIK,IAAa;CACjB,SAAS;CACT,OAAO;CACR,EAEK,IAAqB;CACzB,SAAS;CACT,OAAO;CACR,EAKK,IAAa;CAAE,MAAM;CAAmB,WAAW;CAAK,SAAS;CAAI,EAIrE,IAAmB,EAAM,WAC7B,SACE,EACE,UAAO,MACP,aAAU,WACV,YACA,eACA,aACA,cAAW,IACX,cACA,GAAG,KAEL,GACA;CACA,IAAM,IAAa,EAAM,OAAO,EAC1B,IAAa,EAAM,OAA8B,KAAK,EAGtD,IAAY,EAAM,aACrB,MAAgC;AAE/B,EADA,EAAW,UAAU,GACjB,OAAO,KAAQ,aAAY,EAAI,EAAK,GAC/B,MAAM,EAAsD,UAAU;IAEjF,CAAC,EAAI,CACN,EAGK,KAAiB,MAA2C;AAChE,MAAI,EAAU;EAEd,IAAM,IAAe,EAAQ,WAAW,MAAM,EAAE,OAAO,EAAW,EAC9D,IAAY;AAEhB,UAAQ,EAAE,KAAV;GACE,KAAK;AAEH,IADA,EAAE,gBAAgB,EAClB,IAAY,IAAe,IAAI,IAAe,IAAI,EAAQ,SAAS;AACnE;GACF,KAAK;AAEH,IADA,EAAE,gBAAgB,EAClB,IAAY,IAAe,EAAQ,SAAS,IAAI,IAAe,IAAI;AACnE;GACF,KAAK;AAEH,IADA,EAAE,gBAAgB,EAClB,IAAY;AACZ;GACF,KAAK;AAEH,IADA,EAAE,gBAAgB,EAClB,IAAY,EAAQ,SAAS;AAC7B;GACF,QACE;;AAIJ,EADA,EAAS,EAAQ,GAAW,GAAG,EAC/B,4BAA4B;AAE1B,IADgB,EAAW,SAAS,iBAAoC,iBAAe,IAC7E,IAAY,OAAO;IAC7B;IAGE,EAAE,QAAQ,GAAY,MAAM,MAAa,EAAW;AAE1D,QACE,kBAAC,OAAD;EACE,KAAK;EACL,MAAK;EACL,UAAU;EACV,cAAY,EAAM,iBAAiB;EACnC,WAAW;EACX,WAAW,EACT,oCACA,4EACA,KAAY,+CACZ,EACD;EACD,GAAI;YAEJ,kBAAC,GAAD;GAAa,IAAI;aACd,EAAQ,KAAK,MAAW;IACvB,IAAM,IAAa,EAAO,OAAO,GAC3B,IAAa,EAAO;AAE1B,WACE,kBAAC,UAAD;KAEE,MAAK;KACL,MAAK;KACL,iBAAe;KACf,UAAU,IAAa,IAAI;KACjB;KACV,eAAe,EAAS,EAAO,GAAG;KAClC,WAAW,EACT,2EACA,2EACA,+FACA,GACA,IACI,EAAmB,KACnB,8CACL;eAhBH;MAmBG,KACC,kBAAC,EAAO,MAAR;OACE,UAAS;OACT,WAAW,EACT,qDACA,EAAW,GACZ;OACD,YAAY;OACZ,CAAA;MAIH,KACC,kBAAC,GAAD,EAAY,WAAW,EAAG,2BAA2B,EAAS,EAAI,CAAA;MAEpE,kBAAC,QAAD;OAAM,WAAU;iBAAkB,EAAO;OAAY,CAAA;MAC9C;OAlCF,EAAO,GAkCL;KAEX;GACU,CAAA;EACV,CAAA;EAGX;AACD,EAAiB,cAAc"}
+{"version":3,"file":"segmented-control.js","names":[],"sources":["../../src/ui/segmented-control.tsx"],"sourcesContent":["'use client'\n\nimport { LayoutGroup,motion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { IconProvider } from './icon-context'\nimport type { IconInput } from './lib/icon-input'\nimport { normalizeIcon } from './lib/normalize-icon'\nimport { cn } from './lib/utils'\n\n/* ── Types ─────────────────────────────────────────────────── */\n\nexport type SegmentedControlSize = 'sm' | 'md' | 'lg'\nexport type SegmentedControlVariant = 'default' | 'solid'\n\nexport interface SegmentedControlOption {\n  id: string\n  text: string\n  /** Optional icon rendered before the text label. Accepts any `IconInput`. */\n  icon?: IconInput\n}\n\nexport interface SegmentedControlProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect'> {\n  size?: SegmentedControlSize\n  variant?: SegmentedControlVariant\n  options: SegmentedControlOption[]\n  selectedId: string\n  onSelect: (id: string) => void\n  disabled?: boolean\n}\n\n/* ── Size config ───────────────────────────────────────────── */\n\nconst sizeConfig = {\n  sm: { button: 'h-7 px-ds-04 text-ds-sm', icon: 'h-3.5 w-3.5' },\n  md: { button: 'h-8 px-ds-05 text-ds-md', icon: 'h-4 w-4' },\n  lg: { button: 'h-10 px-ds-06 text-ds-md', icon: 'h-4 w-4' },\n} as const\n\n/* ── Pill styles per variant ───────────────────────────────── */\n\nconst pillStyles = {\n  default: 'bg-surface-overlay shadow-raised',\n  solid: 'bg-accent-9',\n} as const\n\nconst selectedTextStyles = {\n  default: 'text-surface-fg',\n  solid: 'text-accent-fg',\n} as const\n\n/* ── Spring config (snappy, minimal overshoot) ─────────────── */\n/* Intentionally softer than springs.snappy (500/30/0.5) for pill slide feel */\n\nconst pillSpring = { type: 'spring' as const, stiffness: 400, damping: 30 }\n\n/* ── SegmentedControl ──────────────────────────────────────── */\n\nconst SegmentedControl = React.forwardRef<HTMLDivElement, SegmentedControlProps>(\n  function SegmentedControl(\n    {\n      size = 'md',\n      variant = 'default',\n      options,\n      selectedId,\n      onSelect,\n      disabled = false,\n      className,\n      ...props\n    },\n    ref,\n  ) {\n    const instanceId = React.useId()\n    const tablistRef = React.useRef<HTMLDivElement | null>(null)\n\n    // Compose refs\n    const mergedRef = React.useCallback(\n      (node: HTMLDivElement | null) => {\n        tablistRef.current = node\n        if (typeof ref === 'function') ref(node)\n        else if (ref) (ref as React.MutableRefObject<HTMLDivElement | null>).current = node\n      },\n      [ref],\n    )\n\n    // Keyboard navigation\n    const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n      if (disabled) return\n\n      const currentIndex = options.findIndex((o) => o.id === selectedId)\n      let nextIndex = currentIndex\n\n      switch (e.key) {\n        case 'ArrowLeft':\n          e.preventDefault()\n          nextIndex = currentIndex > 0 ? currentIndex - 1 : options.length - 1\n          break\n        case 'ArrowRight':\n          e.preventDefault()\n          nextIndex = currentIndex < options.length - 1 ? currentIndex + 1 : 0\n          break\n        case 'Home':\n          e.preventDefault()\n          nextIndex = 0\n          break\n        case 'End':\n          e.preventDefault()\n          nextIndex = options.length - 1\n          break\n        default:\n          return\n      }\n\n      onSelect(options[nextIndex].id)\n      requestAnimationFrame(() => {\n        const buttons = tablistRef.current?.querySelectorAll<HTMLButtonElement>('[role=\"tab\"]')\n        buttons?.[nextIndex]?.focus()\n      })\n    }\n\n    const { button: buttonSize, icon: iconSize } = sizeConfig[size]\n\n    return (\n      <div\n        ref={mergedRef}\n        role=\"tablist\"\n        tabIndex={-1}\n        aria-label={props['aria-label'] ?? 'Segmented control'}\n        onKeyDown={handleKeyDown}\n        className={cn(\n          'inline-flex p-[3px] rounded-pill',\n          'bg-surface-raised-hover border border-surface-border-subtle shadow-inset',\n          disabled && 'opacity-action-disabled pointer-events-none',\n          className,\n        )}\n        {...props}\n      >\n        <LayoutGroup id={instanceId}>\n          {options.map((option) => {\n            const isSelected = option.id === selectedId\n\n            return (\n              <button\n                key={option.id}\n                type=\"button\"\n                role=\"tab\"\n                aria-selected={isSelected}\n                tabIndex={isSelected ? 0 : -1}\n                disabled={disabled}\n                onClick={() => onSelect(option.id)}\n                className={cn(\n                  'relative inline-flex items-center justify-center gap-ds-02 rounded-pill',\n                  'font-medium transition-colors duration-fast-02 ease-productive-standard',\n                  'outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2',\n                  buttonSize,\n                  isSelected\n                    ? selectedTextStyles[variant]\n                    : 'text-surface-fg-muted hover:text-surface-fg',\n                )}\n              >\n                {/* Sliding pill indicator */}\n                {isSelected && (\n                  <motion.span\n                    layoutId=\"segment-pill\"\n                    className={cn(\n                      'absolute inset-0 rounded-pill pointer-events-none',\n                      pillStyles[variant],\n                    )}\n                    transition={pillSpring}\n                  />\n                )}\n\n                {/* Content (above pill via z-index) */}\n                {option.icon && (\n                  <span className={cn('relative z-[1] shrink-0 inline-flex items-center justify-center', iconSize)}>\n                    <IconProvider size={size === 'lg' ? 'sm' : 'xs'}>\n                      {normalizeIcon(option.icon)}\n                    </IconProvider>\n                  </span>\n                )}\n                <span className=\"relative z-[1]\">{option.text}</span>\n              </button>\n            )\n          })}\n        </LayoutGroup>\n      </div>\n    )\n  },\n)\nSegmentedControl.displayName = 'SegmentedControl'\n\n/* ── Exports ───────────────────────────────────────────────── */\n\nexport { SegmentedControl }\n"],"mappings":";;;;;;;;AAiCA,IAAM,IAAa;CACjB,IAAI;EAAE,QAAQ;EAA2B,MAAM;EAAe;CAC9D,IAAI;EAAE,QAAQ;EAA2B,MAAM;EAAW;CAC1D,IAAI;EAAE,QAAQ;EAA4B,MAAM;EAAW;CAC5D,EAIK,IAAa;CACjB,SAAS;CACT,OAAO;CACR,EAEK,IAAqB;CACzB,SAAS;CACT,OAAO;CACR,EAKK,IAAa;CAAE,MAAM;CAAmB,WAAW;CAAK,SAAS;CAAI,EAIrE,IAAmB,EAAM,WAC7B,SACE,EACE,UAAO,MACP,aAAU,WACV,YACA,eACA,aACA,cAAW,IACX,cACA,GAAG,KAEL,GACA;CACA,IAAM,IAAa,EAAM,OAAO,EAC1B,IAAa,EAAM,OAA8B,KAAK,EAGtD,IAAY,EAAM,aACrB,MAAgC;AAE/B,EADA,EAAW,UAAU,GACjB,OAAO,KAAQ,aAAY,EAAI,EAAK,GAC/B,MAAM,EAAsD,UAAU;IAEjF,CAAC,EAAI,CACN,EAGK,KAAiB,MAA2C;AAChE,MAAI,EAAU;EAEd,IAAM,IAAe,EAAQ,WAAW,MAAM,EAAE,OAAO,EAAW,EAC9D,IAAY;AAEhB,UAAQ,EAAE,KAAV;GACE,KAAK;AAEH,IADA,EAAE,gBAAgB,EAClB,IAAY,IAAe,IAAI,IAAe,IAAI,EAAQ,SAAS;AACnE;GACF,KAAK;AAEH,IADA,EAAE,gBAAgB,EAClB,IAAY,IAAe,EAAQ,SAAS,IAAI,IAAe,IAAI;AACnE;GACF,KAAK;AAEH,IADA,EAAE,gBAAgB,EAClB,IAAY;AACZ;GACF,KAAK;AAEH,IADA,EAAE,gBAAgB,EAClB,IAAY,EAAQ,SAAS;AAC7B;GACF,QACE;;AAIJ,EADA,EAAS,EAAQ,GAAW,GAAG,EAC/B,4BAA4B;AAE1B,IADgB,EAAW,SAAS,iBAAoC,iBAAe,IAC7E,IAAY,OAAO;IAC7B;IAGE,EAAE,QAAQ,GAAY,MAAM,MAAa,EAAW;AAE1D,QACE,kBAAC,OAAD;EACE,KAAK;EACL,MAAK;EACL,UAAU;EACV,cAAY,EAAM,iBAAiB;EACnC,WAAW;EACX,WAAW,EACT,oCACA,4EACA,KAAY,+CACZ,EACD;EACD,GAAI;YAEJ,kBAAC,GAAD;GAAa,IAAI;aACd,EAAQ,KAAK,MAAW;IACvB,IAAM,IAAa,EAAO,OAAO;AAEjC,WACE,kBAAC,UAAD;KAEE,MAAK;KACL,MAAK;KACL,iBAAe;KACf,UAAU,IAAa,IAAI;KACjB;KACV,eAAe,EAAS,EAAO,GAAG;KAClC,WAAW,EACT,2EACA,2EACA,+FACA,GACA,IACI,EAAmB,KACnB,8CACL;eAhBH;MAmBG,KACC,kBAAC,EAAO,MAAR;OACE,UAAS;OACT,WAAW,EACT,qDACA,EAAW,GACZ;OACD,YAAY;OACZ,CAAA;MAIH,EAAO,QACN,kBAAC,QAAD;OAAM,WAAW,EAAG,mEAAmE,EAAS;iBAC9F,kBAAC,GAAD;QAAc,MAAM,MAAS,OAAO,OAAO;kBACxC,EAAc,EAAO,KAAK;QACd,CAAA;OACV,CAAA;MAET,kBAAC,QAAD;OAAM,WAAU;iBAAkB,EAAO;OAAY,CAAA;MAC9C;OAtCF,EAAO,GAsCL;KAEX;GACU,CAAA;EACV,CAAA;EAGX;AACD,EAAiB,cAAc"}

package/dist/ui/stack.d.ts

@@ -10,6 +10,11 @@ type StackProps<T extends React.ElementType = 'div'> = {
     className?: string;
     children?: React.ReactNode;
 } & Omit<React.ComponentPropsWithRef<T>, 'as' | 'className' | 'children'>;
-declare const Stack: React.ForwardRefExoticComponent<Omit<StackProps<"div">, "ref"> & React.RefAttributes<HTMLElement>>;
+type StackComponent = (<T extends React.ElementType = 'div'>(props: StackProps<T> & {
+    ref?: React.ComponentPropsWithRef<T>['ref'];
+}) => React.ReactElement | null) & {
+    displayName?: string;
+};
+declare const Stack: StackComponent;
 export { type SpacingToken, Stack, type StackProps };
 //# sourceMappingURL=stack.d.ts.map

package/dist/ui/stack.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"stack.d.ts","sourceRoot":"","sources":["../../src/ui/stack.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,KAAK,YAAY,GACb,OAAO,GACP,OAAO,GACP,QAAQ,GACR,OAAO,GACP,OAAO,GACP,OAAO,GACP,QAAQ,GACR,OAAO,GACP,OAAO,GACP,OAAO,GACP,OAAO,GACP,OAAO,GACP,OAAO,GACP,OAAO,GACP,OAAO,CAAA;AAEX,KAAK,UAAU,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,KAAK,IAAI;IACrD,EAAE,CAAC,EAAE,CAAC,CAAA;IACN,SAAS,CAAC,EAAE,UAAU,GAAG,YAAY,GAAG,KAAK,GAAG,QAAQ,CAAA;IACxD,GAAG,CAAC,EAAE,YAAY,GAAG,MAAM,CAAA;IAC3B,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,GAAG,UAAU,CAAA;IAC3D,OAAO,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,GAAG,QAAQ,GAAG,QAAQ,CAAA;IACtE,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B,GAAG,IAAI,CAAC,KAAK,CAAC,qBAAqB,CAAC,CAAC,CAAC,EAAE,IAAI,GAAG,WAAW,GAAG,UAAU,CAAC,CAAA;AAmDzE,QAAA,MAAM,KAAK,oGAqBV,CAAA;AAGD,OAAO,EAAE,KAAK,YAAY,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,CAAA"}
+{"version":3,"file":"stack.d.ts","sourceRoot":"","sources":["../../src/ui/stack.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,KAAK,YAAY,GACb,OAAO,GACP,OAAO,GACP,QAAQ,GACR,OAAO,GACP,OAAO,GACP,OAAO,GACP,QAAQ,GACR,OAAO,GACP,OAAO,GACP,OAAO,GACP,OAAO,GACP,OAAO,GACP,OAAO,GACP,OAAO,GACP,OAAO,CAAA;AAEX,KAAK,UAAU,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,KAAK,IAAI;IACrD,EAAE,CAAC,EAAE,CAAC,CAAA;IACN,SAAS,CAAC,EAAE,UAAU,GAAG,YAAY,GAAG,KAAK,GAAG,QAAQ,CAAA;IACxD,GAAG,CAAC,EAAE,YAAY,GAAG,MAAM,CAAA;IAC3B,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,GAAG,UAAU,CAAA;IAC3D,OAAO,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,GAAG,QAAQ,GAAG,QAAQ,CAAA;IACtE,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B,GAAG,IAAI,CAAC,KAAK,CAAC,qBAAqB,CAAC,CAAC,CAAC,EAAE,IAAI,GAAG,WAAW,GAAG,UAAU,CAAC,CAAA;AAsDzE,KAAK,cAAc,GAAG,CAAC,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,KAAK,EACzD,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,qBAAqB,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAA;CAAE,KACnE,KAAK,CAAC,YAAY,GAAG,IAAI,CAAC,GAAG;IAAE,WAAW,CAAC,EAAE,MAAM,CAAA;CAAE,CAAA;AA0B1D,QAAA,MAAM,KAAK,EAA2B,cAAc,CAAA;AAEpD,OAAO,EAAE,KAAK,YAAY,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,CAAA"}

package/dist/ui/stack.js

@@ -53,5 +53,6 @@ var n = {
 	}, f);
 });
 a.displayName = "Stack";
+var o = a;
 //#endregion
-export { a as Stack };
+export { o as Stack };

package/dist/ui/stack.js.map

@@ -1 +1 @@
-{"version":3,"file":"stack.js","names":[],"sources":["../../src/ui/stack.tsx"],"sourcesContent":["// @server-safe\nimport * as React from 'react'\n\nimport { cn } from './lib/utils'\n\ntype SpacingToken =\n  | 'ds-01'\n  | 'ds-02'\n  | 'ds-02b'\n  | 'ds-03'\n  | 'ds-04'\n  | 'ds-05'\n  | 'ds-05b'\n  | 'ds-06'\n  | 'ds-07'\n  | 'ds-08'\n  | 'ds-09'\n  | 'ds-10'\n  | 'ds-11'\n  | 'ds-12'\n  | 'ds-13'\n\ntype StackProps<T extends React.ElementType = 'div'> = {\n  as?: T\n  direction?: 'vertical' | 'horizontal' | 'row' | 'column'\n  gap?: SpacingToken | number\n  align?: 'start' | 'center' | 'end' | 'stretch' | 'baseline'\n  justify?: 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly'\n  wrap?: boolean\n  className?: string\n  children?: React.ReactNode\n} & Omit<React.ComponentPropsWithRef<T>, 'as' | 'className' | 'children'>\n\nconst alignMap = {\n  start: 'items-start',\n  center: 'items-center',\n  end: 'items-end',\n  stretch: 'items-stretch',\n  baseline: 'items-baseline',\n} as const\n\nconst justifyMap = {\n  start: 'justify-start',\n  center: 'justify-center',\n  end: 'justify-end',\n  between: 'justify-between',\n  around: 'justify-around',\n  evenly: 'justify-evenly',\n} as const\n\nconst gapMap: Record<string, string> = {\n  '0': 'gap-0',\n  '1': 'gap-ds-01',\n  '2': 'gap-ds-02',\n  '3': 'gap-ds-03',\n  '4': 'gap-ds-04',\n  '5': 'gap-ds-05',\n  '6': 'gap-ds-06',\n  '7': 'gap-ds-07',\n  '8': 'gap-ds-08',\n  '9': 'gap-ds-09',\n  '10': 'gap-ds-10',\n  '11': 'gap-ds-11',\n  '12': 'gap-ds-12',\n  '13': 'gap-ds-13',\n  'ds-01': 'gap-ds-01',\n  'ds-02': 'gap-ds-02',\n  'ds-02b': 'gap-ds-02b',\n  'ds-03': 'gap-ds-03',\n  'ds-04': 'gap-ds-04',\n  'ds-05': 'gap-ds-05',\n  'ds-05b': 'gap-ds-05b',\n  'ds-06': 'gap-ds-06',\n  'ds-07': 'gap-ds-07',\n  'ds-08': 'gap-ds-08',\n  'ds-09': 'gap-ds-09',\n  'ds-10': 'gap-ds-10',\n  'ds-11': 'gap-ds-11',\n  'ds-12': 'gap-ds-12',\n  'ds-13': 'gap-ds-13',\n} as const\n\nconst Stack = React.forwardRef<HTMLElement, StackProps>(\n  ({ as, direction = 'vertical', gap, align, justify, wrap, className, children, ...props }, ref) => {\n    const Component = as || 'div'\n    return React.createElement(\n      Component,\n      {\n        ref,\n        className: cn(\n          'flex',\n          (direction === 'vertical' || direction === 'column') ? 'flex-col' : 'flex-row',\n          gap != null && gapMap[String(gap)],\n          align && alignMap[align],\n          justify && justifyMap[justify],\n          wrap && 'flex-wrap',\n          className,\n        ),\n        ...props,\n      },\n      children,\n    )\n  },\n)\nStack.displayName = 'Stack'\n\nexport { type SpacingToken, Stack, type StackProps }\n"],"mappings":";;;AAiCA,IAAM,IAAW;CACf,OAAO;CACP,QAAQ;CACR,KAAK;CACL,SAAS;CACT,UAAU;CACX,EAEK,IAAa;CACjB,OAAO;CACP,QAAQ;CACR,KAAK;CACL,SAAS;CACT,QAAQ;CACR,QAAQ;CACT,EAEK,IAAiC;CACrC,GAAK;CACL,GAAK;CACL,GAAK;CACL,GAAK;CACL,GAAK;CACL,GAAK;CACL,GAAK;CACL,GAAK;CACL,GAAK;CACL,GAAK;CACL,IAAM;CACN,IAAM;CACN,IAAM;CACN,IAAM;CACN,SAAS;CACT,SAAS;CACT,UAAU;CACV,SAAS;CACT,SAAS;CACT,SAAS;CACT,UAAU;CACV,SAAS;CACT,SAAS;CACT,SAAS;CACT,SAAS;CACT,SAAS;CACT,SAAS;CACT,SAAS;CACT,SAAS;CACV,EAEK,IAAQ,EAAM,YACjB,EAAE,OAAI,eAAY,YAAY,QAAK,UAAO,YAAS,SAAM,cAAW,aAAU,GAAG,KAAS,MAAQ;CACjG,IAAM,IAAY,KAAM;AACxB,QAAO,EAAM,cACX,GACA;EACE;EACA,WAAW,EACT,QACC,MAAc,cAAc,MAAc,WAAY,aAAa,YACpE,KAAO,QAAQ,EAAO,OAAO,EAAI,GACjC,KAAS,EAAS,IAClB,KAAW,EAAW,IACtB,KAAQ,aACR,EACD;EACD,GAAG;EACJ,EACD,EACD;EAEJ;AACD,EAAM,cAAc"}
+{"version":3,"file":"stack.js","names":[],"sources":["../../src/ui/stack.tsx"],"sourcesContent":["// @server-safe\nimport * as React from 'react'\n\nimport { cn } from './lib/utils'\n\ntype SpacingToken =\n  | 'ds-01'\n  | 'ds-02'\n  | 'ds-02b'\n  | 'ds-03'\n  | 'ds-04'\n  | 'ds-05'\n  | 'ds-05b'\n  | 'ds-06'\n  | 'ds-07'\n  | 'ds-08'\n  | 'ds-09'\n  | 'ds-10'\n  | 'ds-11'\n  | 'ds-12'\n  | 'ds-13'\n\ntype StackProps<T extends React.ElementType = 'div'> = {\n  as?: T\n  direction?: 'vertical' | 'horizontal' | 'row' | 'column'\n  gap?: SpacingToken | number\n  align?: 'start' | 'center' | 'end' | 'stretch' | 'baseline'\n  justify?: 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly'\n  wrap?: boolean\n  className?: string\n  children?: React.ReactNode\n} & Omit<React.ComponentPropsWithRef<T>, 'as' | 'className' | 'children'>\n\nconst alignMap = {\n  start: 'items-start',\n  center: 'items-center',\n  end: 'items-end',\n  stretch: 'items-stretch',\n  baseline: 'items-baseline',\n} as const\n\nconst justifyMap = {\n  start: 'justify-start',\n  center: 'justify-center',\n  end: 'justify-end',\n  between: 'justify-between',\n  around: 'justify-around',\n  evenly: 'justify-evenly',\n} as const\n\nconst gapMap: Record<string, string> = {\n  '0': 'gap-0',\n  '1': 'gap-ds-01',\n  '2': 'gap-ds-02',\n  '3': 'gap-ds-03',\n  '4': 'gap-ds-04',\n  '5': 'gap-ds-05',\n  '6': 'gap-ds-06',\n  '7': 'gap-ds-07',\n  '8': 'gap-ds-08',\n  '9': 'gap-ds-09',\n  '10': 'gap-ds-10',\n  '11': 'gap-ds-11',\n  '12': 'gap-ds-12',\n  '13': 'gap-ds-13',\n  'ds-01': 'gap-ds-01',\n  'ds-02': 'gap-ds-02',\n  'ds-02b': 'gap-ds-02b',\n  'ds-03': 'gap-ds-03',\n  'ds-04': 'gap-ds-04',\n  'ds-05': 'gap-ds-05',\n  'ds-05b': 'gap-ds-05b',\n  'ds-06': 'gap-ds-06',\n  'ds-07': 'gap-ds-07',\n  'ds-08': 'gap-ds-08',\n  'ds-09': 'gap-ds-09',\n  'ds-10': 'gap-ds-10',\n  'ds-11': 'gap-ds-11',\n  'ds-12': 'gap-ds-12',\n  'ds-13': 'gap-ds-13',\n} as const\n\n// Polymorphic component type — preserves T across the call site so element-\n// specific props (e.g. `<Stack as=\"ul\">` accepting `<ul>` props) typecheck.\n// Standard polymorphic-component pattern; see text.tsx for the same shape.\ntype StackComponent = (<T extends React.ElementType = 'div'>(\n  props: StackProps<T> & { ref?: React.ComponentPropsWithRef<T>['ref'] },\n) => React.ReactElement | null) & { displayName?: string }\n\nconst StackImpl = React.forwardRef<HTMLElement, StackProps>(\n  ({ as, direction = 'vertical', gap, align, justify, wrap, className, children, ...props }, ref) => {\n    const Component = as || 'div'\n    return React.createElement(\n      Component,\n      {\n        ref,\n        className: cn(\n          'flex',\n          (direction === 'vertical' || direction === 'column') ? 'flex-col' : 'flex-row',\n          gap != null && gapMap[String(gap)],\n          align && alignMap[align],\n          justify && justifyMap[justify],\n          wrap && 'flex-wrap',\n          className,\n        ),\n        ...props,\n      },\n      children,\n    )\n  },\n)\nStackImpl.displayName = 'Stack'\n\nconst Stack = StackImpl as unknown as StackComponent\n\nexport { type SpacingToken, Stack, type StackProps }\n"],"mappings":";;;AAiCA,IAAM,IAAW;CACf,OAAO;CACP,QAAQ;CACR,KAAK;CACL,SAAS;CACT,UAAU;CACX,EAEK,IAAa;CACjB,OAAO;CACP,QAAQ;CACR,KAAK;CACL,SAAS;CACT,QAAQ;CACR,QAAQ;CACT,EAEK,IAAiC;CACrC,GAAK;CACL,GAAK;CACL,GAAK;CACL,GAAK;CACL,GAAK;CACL,GAAK;CACL,GAAK;CACL,GAAK;CACL,GAAK;CACL,GAAK;CACL,IAAM;CACN,IAAM;CACN,IAAM;CACN,IAAM;CACN,SAAS;CACT,SAAS;CACT,UAAU;CACV,SAAS;CACT,SAAS;CACT,SAAS;CACT,UAAU;CACV,SAAS;CACT,SAAS;CACT,SAAS;CACT,SAAS;CACT,SAAS;CACT,SAAS;CACT,SAAS;CACT,SAAS;CACV,EASK,IAAY,EAAM,YACrB,EAAE,OAAI,eAAY,YAAY,QAAK,UAAO,YAAS,SAAM,cAAW,aAAU,GAAG,KAAS,MAAQ;CACjG,IAAM,IAAY,KAAM;AACxB,QAAO,EAAM,cACX,GACA;EACE;EACA,WAAW,EACT,QACC,MAAc,cAAc,MAAc,WAAY,aAAa,YACpE,KAAO,QAAQ,EAAO,OAAO,EAAI,GACjC,KAAS,EAAS,IAClB,KAAW,EAAW,IACtB,KAAQ,aACR,EACD;EACD,GAAG;EACJ,EACD,EACD;EAEJ;AACD,EAAU,cAAc;AAExB,IAAM,IAAQ"}

package/dist/ui/stat-card.d.ts

@@ -1,4 +1,5 @@
 "use client";
+import { IconInput } from './lib/icon-input';
 import * as React from 'react';
 /**
  * Props for StatCard — a dashboard metric tile displaying a label, a large numeric value,
@@ -54,9 +55,7 @@ export interface StatCardProps extends React.HTMLAttributes<HTMLDivElement> {
         value: string;
         direction: 'up' | 'down' | 'neutral';
     };
-    icon?: React.ReactNode | React.ComponentType<{
-        className?: string;
-    }>;
+    icon?: IconInput;
     loading?: boolean;
     /** Comparison period label shown after delta, e.g. "vs last month" */
     comparisonLabel?: string;

package/dist/ui/stat-card.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"stat-card.d.ts","sourceRoot":"","sources":["../../src/ui/stat-card.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAO9B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AACH,MAAM,WAAW,aAAc,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACzE,oEAAoE;IACpE,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,uDAAuD;IACvD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,EAAE,MAAM,GAAG,MAAM,CAAA;IACtB,oCAAoC;IACpC,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,uCAAuC;IACvC,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,KAAK,CAAC,EAAE;QACN,KAAK,EAAE,MAAM,CAAA;QACb,SAAS,EAAE,IAAI,GAAG,MAAM,GAAG,SAAS,CAAA;KACrC,CAAA;IACD,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,aAAa,CAAC;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAA;IACpE,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,sEAAsE;IACtE,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,kEAAkE;IAClE,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,qFAAqF;IACrF,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,kDAAkD;IAClD,MAAM,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,CAAA;IAC7D,wEAAwE;IACxE,SAAS,CAAC,EAAE,MAAM,EAAE,CAAA;IACpB,+CAA+C;IAC/C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,yEAAyE;IACzE,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,yEAAyE;IACzE,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CACzB;AAuGD,QAAA,MAAM,QAAQ,sFA0Nb,CAAA;AAID,OAAO,EAAE,QAAQ,EAAE,CAAA"}
+{"version":3,"file":"stat-card.d.ts","sourceRoot":"","sources":["../../src/ui/stat-card.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAA;AAMjD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AACH,MAAM,WAAW,aAAc,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACzE,oEAAoE;IACpE,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,uDAAuD;IACvD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,EAAE,MAAM,GAAG,MAAM,CAAA;IACtB,oCAAoC;IACpC,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,uCAAuC;IACvC,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,KAAK,CAAC,EAAE;QACN,KAAK,EAAE,MAAM,CAAA;QACb,SAAS,EAAE,IAAI,GAAG,MAAM,GAAG,SAAS,CAAA;KACrC,CAAA;IACD,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,sEAAsE;IACtE,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,kEAAkE;IAClE,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,qFAAqF;IACrF,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,kDAAkD;IAClD,MAAM,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,CAAA;IAC7D,wEAAwE;IACxE,SAAS,CAAC,EAAE,MAAM,EAAE,CAAA;IACpB,+CAA+C;IAC/C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,yEAAyE;IACzE,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,yEAAyE;IACzE,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CACzB;AAuGD,QAAA,MAAM,QAAQ,sFAwNb,CAAA;AAID,OAAO,EAAE,QAAQ,EAAE,CAAA"}