@sableui/react 0.6.2 → 0.7.1

package/dist/lib/component-guidance.js

@@ -0,0 +1,215 @@
+// src/lib/component-guidance.ts
+function bestPractices(dos, donts) {
+  return [
+    ...dos.map((description) => ({
+      guidance: "do",
+      description
+    })),
+    ...donts.map((description) => ({
+      guidance: "dont",
+      description
+    }))
+  ];
+}
+function anatomy(parts) {
+  return parts.map(([name, required, description]) => ({
+    name,
+    required,
+    description
+  }));
+}
+function guidance({
+  keywords,
+  description,
+  dos,
+  donts,
+  anatomy: parts,
+  related
+}) {
+  return {
+    keywords,
+    usage: {
+      description,
+      bestPractices: bestPractices(dos, donts),
+      ...parts ? { anatomy: anatomy(parts) } : {}
+    },
+    ...related ? { related } : {}
+  };
+}
+var componentGuidance = {
+  // ThemeSelector: guidance now lives in its own meta (usage.bestPractices).
+  // The entry that was here was dead code — see the dual-home check in
+  // build-registry.mjs — and its "use ThemeSwitcher for colour mode" dont was
+  // lost for as long as both existed. Recovered into the meta.
+  Region: guidance({
+    keywords: ["region", "page width", "container", "layout"],
+    description: "Use Region as the page-width primitive that applies fluid page inset and an optional purpose-named max width.",
+    dos: [
+      "Choose the max value by what the person does on the page: read (prose), fill in a form (form), scroll one stream (feed), review one record or settings (content), scan and compare rows or cards (wide).",
+      "Omit max (fluid) for work across panes, a board, an editor or a map, where a flexible part uses the extra width; cap text inside it with --measure-prose.",
+      "Give sibling routes in one nav the same width so the header does not jump between them.",
+      "Review a capped or fluid route at 1920px and 2560px: a cap is a ceiling, so below the cap plus app chrome every choice looks the same.",
+      "Use Region near the route or section boundary so inner layout stays intentional."
+    ],
+    donts: [
+      "Do not use Region as a global wrapper that forces every page into the same max width.",
+      "Do not go fluid when the extra width only widens the gaps between fixed columns; cap it.",
+      "Do not read full as edge to edge: it is the largest cap and keeps the page inset. Use bleed for edge to edge."
+    ],
+    related: { components: ["Page", "Grid", "Columns"] }
+  }),
+  Page: guidance({
+    keywords: ["page", "route shell", "region", "stack"],
+    description: "Use Page as a route content shell that combines Region sizing with vertical rhythm.",
+    dos: [
+      "Use it as the top-level wrapper for route content after application chrome.",
+      "Set max by the page's content role rather than by the current viewport."
+    ],
+    donts: [
+      "Do not confuse Page with AppShell; Page is content, AppShell is the frame around routes."
+    ],
+    related: { components: ["Region", "Stack", "PageHeader", "AppShell"] }
+  }),
+  Grid: guidance({
+    keywords: ["grid", "card grid", "auto fit", "layout"],
+    description: "Use Grid for uniform grid layouts inside a Region, especially card grids that can breathe responsively.",
+    dos: [
+      "Prefer minItemWidth for responsive card grids that do not need breakpoint-specific spans.",
+      'Keep the default track="fill" for collections whose count is data (search results, shelves, galleries): sparse rows keep their empty columns, so one result stays one cell wide.',
+      'Use track="fit" only for a fixed set designed to span the row, such as three KPI cards.',
+      "Use explicit columns only when the design truly needs a fixed track count."
+    ],
+    donts: [
+      "Do not use Grid to set a page's reading width; use Region or Center.",
+      'Do not use track="fit" for results or other data-driven collections: with one or two items the empty columns collapse and each item stretches across the row (a single result rendered as a full-width cover).'
+    ],
+    related: { components: ["Region", "Columns", "Card"] }
+  }),
+  Columns: guidance({
+    keywords: ["columns", "12 column", "span", "layout"],
+    description: "Use Columns and Col for proportioned layouts that need explicit spans, such as list-detail or asymmetric panes.",
+    dos: [
+      "Use breakpoint span maps when the same layout needs to collapse cleanly on smaller screens.",
+      "Use Columns for proportional composition, not for uniform card wrapping."
+    ],
+    donts: [
+      "Do not use column spans as a replacement for Region width or text measure."
+    ],
+    anatomy: [
+      ["Columns", true, "The explicit column track container."],
+      ["Col", true, "A child cell with span and optional start placement."]
+    ],
+    related: { components: ["Grid", "SplitPane", "Region"] }
+  }),
+  Stack: guidance({
+    keywords: ["stack", "vertical rhythm", "layout", "spacing"],
+    description: "Use Stack for vertical flow where child spacing should follow the Sable rhythm scale.",
+    dos: [
+      "Use smaller gaps within a group and larger gaps between sections.",
+      "Use Stack instead of ad hoc margins when siblings form a vertical composition."
+    ],
+    donts: [
+      "Do not use Stack to create page width or grid structure; pair it with Region, Grid, or Columns."
+    ],
+    related: { components: ["Row", "Page", "Fieldset"] }
+  }),
+  Row: guidance({
+    keywords: ["row", "toolbar", "horizontal", "layout"],
+    description: "Use Row for horizontal clusters such as action groups, toolbars, metadata, and inline controls.",
+    dos: [
+      "Use wrap when controls may not fit on smaller screens.",
+      "Use justify and align intentionally so clusters scan as one unit."
+    ],
+    donts: [
+      "Do not use Row for navigation menus or dense tabular structure."
+    ],
+    related: { components: ["Stack", "Button", "Spacer"] }
+  }),
+  Spacer: guidance({
+    keywords: ["spacer", "spacing", "grow", "layout"],
+    description: "Use Spacer for explicit rhythm space or a flex grow pusher between siblings.",
+    dos: [
+      "Use grow inside Row when one side of a cluster should push to the far edge.",
+      "Use fixed size only when the space has semantic rhythm value."
+    ],
+    donts: [
+      "Do not use Spacer to patch broad layout problems that should be solved by Stack, Row, Grid, or Region."
+    ],
+    related: { components: ["Row", "Stack"] }
+  }),
+  Center: guidance({
+    keywords: ["center", "measure", "reading width", "layout"],
+    description: "Use Center to center a block and optionally cap its width inside a wider layout.",
+    dos: [
+      "Use it for reading columns, forms, or compact content inside a broad Region.",
+      "Choose a named max when the content role matches Sable's measure tokens."
+    ],
+    donts: [
+      "Do not use Center for full page inset or app chrome; use Region or AppShell."
+    ],
+    related: { components: ["Region", "Page", "Stack"] }
+  }),
+  AspectBox: guidance({
+    keywords: ["aspect box", "aspect ratio", "media", "layout shift"],
+    description: "Use AspectBox to reserve stable aspect-ratio space for async media, embeds, and responsive previews.",
+    dos: [
+      "Use it around images, video, and embeds that should not shift layout while loading.",
+      "Match the ratio to the expected media or design slot."
+    ],
+    donts: [
+      "Do not use AspectBox for content whose height should grow with text or controls."
+    ],
+    related: { components: ["Video", "Dialog", "Browser"] }
+  }),
+  Bleed: guidance({
+    keywords: ["bleed", "full bleed", "media band", "layout"],
+    description: "Use Bleed to let a band or media element escape an inset or width-capped ancestor while staying within the content area.",
+    dos: [
+      "Use it for hero bands, profile covers, or media that should align beyond a capped page column.",
+      "Keep surrounding content inside Region or Page so the bleed remains intentional."
+    ],
+    donts: [
+      "Do not use Bleed to place content under fixed app chrome or sidebars."
+    ],
+    related: { components: ["Page", "Region", "AspectBox"] }
+  }),
+  SplitPane: guidance({
+    keywords: ["split pane", "two pane", "list detail", "responsive"],
+    description: "Use SplitPane for responsive two-pane layouts where a primary pane and supporting pane stay conceptually linked.",
+    dos: [
+      "Use it for media-detail, list-detail, or editor-preview workflows.",
+      "Pick a ratio that reflects the actual priority of the panes."
+    ],
+    donts: [
+      "Do not use SplitPane for unrelated columns or uniform grids."
+    ],
+    related: { components: ["Columns", "Grid", "Sheet"] }
+  }),
+  SafeArea: guidance({
+    keywords: ["safe area", "notch", "home indicator", "fixed chrome"],
+    description: "Use SafeArea to pad fixed or native-shell surfaces away from device notches and home indicators.",
+    dos: [
+      "Use it around fixed headers, bottom bars, and native-shell surfaces.",
+      "Target only the edges that need device inset padding when possible."
+    ],
+    donts: [
+      "Do not wrap normal document-flow content in SafeArea unless it actually touches unsafe edges."
+    ],
+    related: { components: ["BottomNav", "AppHeader", "AppShell"] }
+  }),
+  GridOverlay: guidance({
+    keywords: ["grid overlay", "debug", "layout visualizer", "docs"],
+    description: "Use GridOverlay only as a development or documentation visualizer for the column structure.",
+    dos: [
+      "Use it inside a position-relative layout while debugging alignment.",
+      "Keep it gated behind docs, debug, or development-only state."
+    ],
+    donts: [
+      "Do not ship GridOverlay as visible product UI."
+    ],
+    related: { components: ["Grid", "Columns", "Region"] }
+  })
+};
+export {
+  componentGuidance
+};

package/dist/lib/density.js

@@ -0,0 +1,54 @@
+"use client";
+
+// src/lib/density.tsx
+import { createContext, useContext } from "react";
+import { jsx } from "react/jsx-runtime";
+var DensityContext = createContext("comfortable");
+var DensityProvider = DensityContext.Provider;
+function useDensity() {
+  return useContext(DensityContext);
+}
+function useAnchoredDensity() {
+  return { "data-density": useDensity() };
+}
+function Density({
+  value,
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(DensityContext.Provider, { value, children: /* @__PURE__ */ jsx("div", { "data-density": value, className, ...props, children }) });
+}
+Density.displayName = "Density";
+function useTypeTier() {
+  return useDensity() === "compact" ? {
+    body: "text-ui-md",
+    label: "text-ui-micro",
+    prose: "text-ui-body",
+    secondary: "text-ui-sm",
+    supporting: "text-ui-sm",
+    control: "text-ui-md",
+    action: "text-ui-md",
+    heading: "text-ui-section"
+  } : {
+    body: "text-body-md",
+    // Group labels. Was `text-label-xs` — the uppercase eyebrow — which put
+    // tracked capitals in every menu, select and command list, against
+    // the typography rule (no uppercase in UI chrome). Sentence-case
+    // caption reads as a quiet heading without shouting.
+    label: "text-caption",
+    prose: "text-body-md",
+    secondary: "text-body-xs",
+    supporting: "text-body-sm",
+    control: "text-label-md",
+    action: "text-label-lg",
+    heading: "text-title-sm"
+  };
+}
+export {
+  Density,
+  DensityProvider,
+  useAnchoredDensity,
+  useDensity,
+  useTypeTier
+};

package/dist/lib/field-shell.js

@@ -0,0 +1,11 @@
+// src/lib/field-shell.ts
+var FIELD_SHELL = "rounded-sm border border-input bg-card motion-interactive placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50";
+var MOBILE_FIELD_TIER = "max-sm:text-body-lg";
+var FIELD_INVALID = "aria-[invalid=true]:border-destructive aria-[invalid=true]:ring-destructive/30";
+var FIELD_SHELL_XS = "rounded-[var(--panel-field-radius,var(--radius-xs))] border-transparent bg-panel-field hover:bg-panel-field-hover";
+export {
+  FIELD_INVALID,
+  FIELD_SHELL,
+  FIELD_SHELL_XS,
+  MOBILE_FIELD_TIER
+};

package/dist/lib/glyphs.js

@@ -0,0 +1,9 @@
+// src/lib/glyphs.tsx
+import { Icon } from "../icon/index.js";
+import { jsx } from "react/jsx-runtime";
+function PlayPauseGlyph({ playing }) {
+  return /* @__PURE__ */ jsx(Icon, { name: playing ? "pause" : "play", variant: "solid", className: "text-base" });
+}
+export {
+  PlayPauseGlyph
+};

package/dist/lib/heading-row.js

@@ -0,0 +1,36 @@
+// src/lib/heading-row.tsx
+import { BLEED_FIRST_START, BLEED_LAST_END } from "./bleed.js";
+import { cn } from "./cn.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+function HeadingRow({
+  as: Title,
+  title,
+  titleId,
+  titleClassName,
+  band,
+  leading,
+  actions
+}) {
+  const hasControls = Boolean(leading || actions);
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-start justify-between gap-x-3 gap-y-2", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 basis-48 items-start gap-2", children: [
+      leading ? /* @__PURE__ */ jsx("div", { className: cn("shrink-0", BLEED_FIRST_START), children: leading }) : null,
+      title ? /* @__PURE__ */ jsx(
+        Title,
+        {
+          id: titleId,
+          className: cn(
+            "min-w-0 text-balance break-words",
+            titleClassName,
+            hasControls && band
+          ),
+          children: title
+        }
+      ) : null
+    ] }),
+    actions ? /* @__PURE__ */ jsx("div", { className: cn("flex shrink-0 flex-wrap items-center gap-2", BLEED_FIRST_START, BLEED_LAST_END), children: actions }) : null
+  ] });
+}
+export {
+  HeadingRow
+};

package/dist/lib/highlight-glide.js

@@ -0,0 +1,84 @@
+"use client";
+
+// src/lib/highlight-glide.tsx
+import { useLayoutEffect, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+function HighlightGlide({ className = "rounded-popup-item bg-accent" }) {
+  const ref = useRef(null);
+  useLayoutEffect(() => {
+    const glide = ref.current;
+    const host = glide?.parentElement;
+    if (!glide || !host) return;
+    host.setAttribute("data-glide", "");
+    let shown = false;
+    let frame = 0;
+    const place = () => {
+      const row = host.querySelector("[data-highlighted]:not([data-highlight-glide])");
+      if (!row) {
+        shown = false;
+        glide.style.opacity = "0";
+        return;
+      }
+      const hostBox = host.getBoundingClientRect();
+      const rowBox = row.getBoundingClientRect();
+      const scale = host.offsetWidth > 0 ? hostBox.width / host.offsetWidth || 1 : 1;
+      const x = (rowBox.left - hostBox.left) / scale + host.scrollLeft - host.clientLeft;
+      const y = (rowBox.top - hostBox.top) / scale + host.scrollTop - host.clientTop;
+      const geometry = (s) => {
+        s.width = `${rowBox.width / scale}px`;
+        s.height = `${rowBox.height / scale}px`;
+        s.transform = `translate(${x}px, ${y}px)`;
+      };
+      if (!shown) {
+        glide.style.transitionProperty = "opacity";
+        geometry(glide.style);
+        cancelAnimationFrame(frame);
+        frame = requestAnimationFrame(() => {
+          glide.style.transitionProperty = "transform, width, height, opacity";
+        });
+        shown = true;
+      } else {
+        geometry(glide.style);
+      }
+      glide.style.opacity = "1";
+    };
+    place();
+    const mutations = new MutationObserver(place);
+    mutations.observe(host, { attributes: true, attributeFilter: ["data-highlighted"], subtree: true, childList: true });
+    const resize = new ResizeObserver(place);
+    resize.observe(host);
+    host.addEventListener("scroll", place, true);
+    host.addEventListener("transitionend", place);
+    host.addEventListener("animationend", place);
+    return () => {
+      cancelAnimationFrame(frame);
+      mutations.disconnect();
+      resize.disconnect();
+      host.removeEventListener("scroll", place, true);
+      host.removeEventListener("transitionend", place);
+      host.removeEventListener("animationend", place);
+      host.removeAttribute("data-glide");
+    };
+  }, []);
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      ref,
+      "aria-hidden": true,
+      "data-highlight-glide": "",
+      className: `pointer-events-none absolute top-0 ${className}`,
+      style: {
+        // Physical, not logical: the translate is measured from
+        // getBoundingClientRect, which is physical in RTL too.
+        left: 0,
+        opacity: 0,
+        transitionProperty: "opacity",
+        transitionDuration: "var(--motion-duration-instant)",
+        transitionTimingFunction: "var(--motion-ease-standard)"
+      }
+    }
+  );
+}
+export {
+  HighlightGlide
+};

package/dist/lib/hit-target.js

@@ -0,0 +1,5 @@
+// src/lib/hit-target.ts
+var hitTargetMin = "relative before:absolute before:left-1/2 before:top-1/2 before:size-(--control-xs) before:-translate-x-1/2 before:-translate-y-1/2 before:content-['']";
+export {
+  hitTargetMin
+};

package/dist/lib/portal-theme-scope.js

@@ -0,0 +1,74 @@
+"use client";
+
+// src/lib/portal-theme-scope.tsx
+import {
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import { mergeRefs } from "./refs.js";
+import { useIsomorphicLayoutEffect } from "./use-isomorphic-layout-effect.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function resolvePortalThemeScope(from) {
+  const root = from.ownerDocument.documentElement;
+  const scope = {};
+  const themeEl = from.closest("[data-sable-theme]");
+  if (themeEl && themeEl !== root) {
+    const theme = themeEl.getAttribute("data-sable-theme");
+    if (theme) scope.theme = theme;
+    const view = from.ownerDocument.defaultView;
+    const fontFamily = view?.getComputedStyle(themeEl).fontFamily;
+    if (fontFamily) scope.fontFamily = fontFamily;
+  }
+  const modeEl = from.closest(".dark, .light");
+  if (modeEl && modeEl !== root) {
+    scope.mode = modeEl.classList.contains("light") ? "light" : "dark";
+  }
+  return scope;
+}
+function applyPortalThemeScope(target, scope) {
+  if (scope.theme) target.setAttribute("data-sable-theme", scope.theme);
+  if (scope.mode) {
+    target.classList.toggle("dark", scope.mode === "dark");
+    target.classList.toggle("light", scope.mode === "light");
+  }
+  if (scope.theme && scope.fontFamily) target.style.fontFamily = scope.fontFamily;
+}
+function usePortalThemeScope() {
+  const [portal, setPortal] = useState(null);
+  const [probed, setProbed] = useState(null);
+  const probeRef = useRef(null);
+  const pending = portal !== null && probed !== portal;
+  useIsomorphicLayoutEffect(() => {
+    if (!pending || !portal) return;
+    const probe = probeRef.current;
+    if (probe) applyPortalThemeScope(portal, resolvePortalThemeScope(probe));
+    setProbed(portal);
+  }, [pending, portal]);
+  return {
+    portalRef: setPortal,
+    probe: pending ? /* @__PURE__ */ jsx("span", { ref: probeRef, hidden: true, "data-sable-portal-probe": "" }) : null
+  };
+}
+function withPortalThemeScope(Portal) {
+  function ScopedPortal(props) {
+    const { ref } = props;
+    const scope = usePortalThemeScope();
+    const merged = useMemo(
+      () => mergeRefs(ref, scope.portalRef),
+      [ref, scope.portalRef]
+    );
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Portal, { ...props, ref: merged }),
+      scope.probe
+    ] });
+  }
+  ScopedPortal.displayName = `ScopedPortal(${Portal.displayName ?? "Portal"})`;
+  return ScopedPortal;
+}
+export {
+  applyPortalThemeScope,
+  resolvePortalThemeScope,
+  usePortalThemeScope,
+  withPortalThemeScope
+};

package/dist/{chunk-FKZXAFIY.js → lib/presentation.js}

@@ -1,6 +1,7 @@
-import { createContext, useContext } from 'react';
+"use client";
 
 // src/lib/presentation.tsx
+import { createContext, useContext } from "react";
 var PresentationContext = createContext("page");
 var PresentationProvider = PresentationContext.Provider;
 function usePresentation() {
@@ -8,5 +9,9 @@ function usePresentation() {
 }
 var CardDepthContext = createContext(0);
 var StackedActionsContext = createContext(false);
-
-export { CardDepthContext, PresentationProvider, StackedActionsContext, usePresentation };
+export {
+  CardDepthContext,
+  PresentationProvider,
+  StackedActionsContext,
+  usePresentation
+};

package/dist/lib/refs.js

@@ -0,0 +1,14 @@
+// src/lib/refs.ts
+function setRef(ref, value) {
+  if (typeof ref === "function") ref(value);
+  else if (ref) ref.current = value;
+}
+function mergeRefs(...refs) {
+  return (value) => {
+    for (const ref of refs) setRef(ref, value);
+  };
+}
+export {
+  mergeRefs,
+  setRef
+};

package/dist/lib/scrub-gesture.js

@@ -0,0 +1,50 @@
+// src/lib/scrub-gesture.ts
+function beginScrub(e, {
+  value,
+  step,
+  clamp,
+  onValueChange,
+  onGestureStart,
+  onGestureEnd,
+  disabled,
+  preventDefaultOnDown = true
+}) {
+  if (disabled) return;
+  if (preventDefaultOnDown) e.preventDefault();
+  const startX = e.clientX;
+  const startValue = value;
+  const target = e.currentTarget;
+  let moved = false;
+  function onMove(ev) {
+    const dx = ev.clientX - startX;
+    if (!moved) {
+      if (Math.abs(dx) < 2) return;
+      moved = true;
+      onGestureStart?.();
+    }
+    ev.preventDefault();
+    onValueChange?.(clamp(startValue + dx * step * (ev.shiftKey ? 0.1 : 1)));
+  }
+  function onUp() {
+    if (moved) {
+      onGestureEnd?.();
+      target.addEventListener(
+        "click",
+        (ev) => {
+          ev.preventDefault();
+          ev.stopPropagation();
+        },
+        { capture: true, once: true }
+      );
+    }
+    window.removeEventListener("pointermove", onMove);
+    window.removeEventListener("pointerup", onUp);
+    window.removeEventListener("pointercancel", onUp);
+  }
+  window.addEventListener("pointermove", onMove);
+  window.addEventListener("pointerup", onUp);
+  window.addEventListener("pointercancel", onUp);
+}
+export {
+  beginScrub
+};

package/dist/lib/segmented.js

@@ -0,0 +1,13 @@
+// src/lib/segmented.ts
+var SEGMENTED_INNER_RADIUS = "rounded-[max(0px,calc(var(--button-radius,9999px)-3px))]";
+var SEGMENTED_TRACK = "relative inline-flex w-fit flex-row items-center gap-0.5 rounded-[var(--button-radius,9999px)] border border-border bg-card p-0.5";
+var SEGMENTED_ITEM = "relative z-10 inline-flex h-7 min-w-7 items-center justify-center rounded-[max(0px,calc(var(--button-radius,9999px)-3px))] text-muted-foreground motion-interactive motion-press hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring";
+var SEGMENTED_ITEM_ON = "bg-accent text-accent-foreground hover:text-accent-foreground";
+var SEGMENTED_STEP = "calc(var(--spacing) * 7.5)";
+export {
+  SEGMENTED_INNER_RADIUS,
+  SEGMENTED_ITEM,
+  SEGMENTED_ITEM_ON,
+  SEGMENTED_STEP,
+  SEGMENTED_TRACK
+};

package/dist/lib/selection-card.js

@@ -0,0 +1,41 @@
+// src/lib/selection-card.ts
+var SELECTION_CARD_SHELL = [
+  "group relative flex cursor-pointer border border-input bg-card p-4 text-start motion-interactive motion-press",
+  "hover:border-ring",
+  // Focus is an OUTLINE, not a ring: the checked state is an inset ring in the
+  // tone colour, and both rings write box-shadow, so a focused checked card
+  // used to lose its tone ring to the focus ring.
+  "focus-within:outline-2 focus-within:outline-solid focus-within:outline-offset-2 focus-within:outline-ring",
+  "data-disabled:cursor-not-allowed data-disabled:opacity-50 data-disabled:hover:border-input"
+].join(" ");
+var SELECTION_CARD_LAYOUT = {
+  row: "items-start gap-3 rounded-md",
+  tile: "flex-col gap-3 rounded-lg"
+};
+var SELECTION_CARD_TILE_HEAD = "flex w-full items-start justify-between gap-3";
+var SELECTION_CARD_GLYPH = "shrink-0 text-2xl leading-none motion-interactive";
+var SELECTION_CARD_TONES = ["neutral", "standard", "collectible", "edition", "info", "warning"];
+var SELECTION_CARD_CHECKED = {
+  neutral: "data-[checked]:border-transparent data-[checked]:ring-[1.5px] data-[checked]:ring-inset data-[checked]:ring-primary data-[checked]:bg-muted",
+  standard: "data-[checked]:border-transparent data-[checked]:ring-[1.5px] data-[checked]:ring-inset data-[checked]:ring-tone-standard",
+  collectible: "data-[checked]:border-transparent data-[checked]:ring-[1.5px] data-[checked]:ring-inset data-[checked]:ring-tone-collectible",
+  edition: "data-[checked]:border-transparent data-[checked]:ring-[1.5px] data-[checked]:ring-inset data-[checked]:ring-tone-edition",
+  info: "data-[checked]:border-transparent data-[checked]:ring-[1.5px] data-[checked]:ring-inset data-[checked]:ring-tone-info",
+  warning: "data-[checked]:border-transparent data-[checked]:ring-[1.5px] data-[checked]:ring-inset data-[checked]:ring-tone-warning"
+};
+var CHECK_BOX = "flex size-4.5 shrink-0 items-center justify-center rounded-xs border border-control-border bg-card motion-interactive";
+var RADIO_RING = "relative inline-flex size-4.5 shrink-0 rounded-full border border-control-border bg-card motion-interactive";
+var RADIO_DOT = "absolute left-1/2 top-1/2 size-2 -translate-x-1/2 -translate-y-1/2 rounded-full motion-interactive ease-spring data-[starting-style]:scale-0 data-[ending-style]:scale-0";
+var CHECK_MARK_SIZE = "text-[length:--spacing(2.75)]";
+export {
+  CHECK_BOX,
+  CHECK_MARK_SIZE,
+  RADIO_DOT,
+  RADIO_RING,
+  SELECTION_CARD_CHECKED,
+  SELECTION_CARD_GLYPH,
+  SELECTION_CARD_LAYOUT,
+  SELECTION_CARD_SHELL,
+  SELECTION_CARD_TILE_HEAD,
+  SELECTION_CARD_TONES
+};

package/dist/lib/status-tone.js

@@ -0,0 +1,13 @@
+// src/lib/status-tone.ts
+var STATUS_TONES = ["neutral", "info", "success", "warning", "destructive"];
+var STATUS_TONE_ICON = {
+  neutral: { name: "info", className: "text-muted-foreground" },
+  info: { name: "info", className: "text-tone-info" },
+  success: { name: "circle-check", className: "text-success" },
+  warning: { name: "warning", className: "text-tone-warning" },
+  destructive: { name: "warning", className: "text-destructive" }
+};
+export {
+  STATUS_TONES,
+  STATUS_TONE_ICON
+};