omniconn-design-system 1.11.0

package/dist/components/Badge.js

@@ -0,0 +1,37 @@
+import { jsx } from "react/jsx-runtime";
+import "react";
+import { cn } from "../lib/cn.js";
+const TONE_CLASSES = {
+  neutral: "bg-surface-subtle border-border text-content-muted",
+  primary: "bg-primary-50 border-primary-100 text-primary-700",
+  success: "bg-success-50 border-success/20 text-success-700",
+  warning: "bg-warning-50 border-warning/20 text-warning-700",
+  error: "bg-error-50 border-error/20 text-error-700",
+  info: "bg-info-50 border-info/20 text-info-700"
+};
+function Badge({
+  children,
+  tone = "neutral",
+  size = "sm",
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn(
+        "inline-flex items-center justify-center font-medium rounded-full border whitespace-nowrap leading-none select-none",
+        size === "sm" ? "px-2 py-0.5 text-caption" : "px-2.5 py-1 text-body",
+        TONE_CLASSES[tone] || TONE_CLASSES.neutral,
+        className
+      ),
+      ...props,
+      children
+    }
+  );
+}
+export {
+  Badge,
+  Badge as default
+};
+//# sourceMappingURL=Badge.js.map

package/dist/components/Badge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.js","sources":["../../src/components/Badge.jsx"],"sourcesContent":["import React from \"react\";\nimport { cn } from \"../lib/cn\"; // Adjust path to your cn utility\n\nconst TONE_CLASSES = {\n  neutral: \"bg-surface-subtle border-border text-content-muted\",\n  primary: \"bg-primary-50 border-primary-100 text-primary-700\",\n  success: \"bg-success-50 border-success/20 text-success-700\",\n  warning: \"bg-warning-50 border-warning/20 text-warning-700\",\n  error: \"bg-error-50 border-error/20 text-error-700\",\n  info: \"bg-info-50 border-info/20 text-info-700\",\n};\n\nexport function Badge({\n  children,\n  tone = \"neutral\",\n  size = \"sm\",\n  className,\n  ...props\n}) {\n  return (\n    <span\n      className={cn(\n        \"inline-flex items-center justify-center font-medium rounded-full border whitespace-nowrap leading-none select-none\",\n        size === \"sm\" ? \"px-2 py-0.5 text-caption\" : \"px-2.5 py-1 text-body\",\n        TONE_CLASSES[tone] || TONE_CLASSES.neutral,\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </span>\n  );\n}\n\nexport default Badge;"],"names":[],"mappings":";;;AAGA,MAAM,eAAe;AAAA,EACnB,SAAS;AAAA,EACT,SAAS;AAAA,EACT,SAAS;AAAA,EACT,SAAS;AAAA,EACT,OAAO;AAAA,EACP,MAAM;AACR;AAEO,SAAS,MAAM;AAAA,EACpB;AAAA,EACA,OAAO;AAAA,EACP,OAAO;AAAA,EACP;AAAA,EACA,GAAG;AACL,GAAG;AACD,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA,SAAS,OAAO,6BAA6B;AAAA,QAC7C,aAAa,IAAI,KAAK,aAAa;AAAA,QACnC;AAAA,MAAA;AAAA,MAED,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/dist/components/Button.js

@@ -0,0 +1,80 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import { CircleNotch } from "@phosphor-icons/react";
+import { cn } from "../lib/cn.js";
+import { resolveTone, shiftToken } from "../lib/tone.js";
+const VARIANTS = {
+  primary: "bg-primary text-white hover:bg-primary-hover",
+  secondary: "bg-secondary text-white hover:bg-secondary-hover",
+  outline: "bg-surface text-content border border-border-strong hover:bg-neutral-50",
+  ghost: "bg-transparent text-content hover:bg-neutral-100",
+  danger: "bg-error text-white hover:bg-error-700",
+  // For use on gradient / brand-colored surfaces (e.g. card headers).
+  inverse: "bg-transparent text-white hover:bg-white/15"
+};
+const SIZES = {
+  sm: "h-8 px-3 text-body gap-1.5",
+  md: "h-10 px-4 text-body-strong gap-2",
+  lg: "h-12 px-6 text-subsection gap-2"
+};
+const ICON_ONLY_SIZES = {
+  sm: "h-8 w-8",
+  md: "h-10 w-10",
+  lg: "h-12 w-12"
+};
+const ICON_PX = { sm: 16, md: 18, lg: 20 };
+function Button({
+  variant = "primary",
+  color,
+  size = "md",
+  icon: Icon,
+  iconOnly = false,
+  loading = false,
+  disabled = false,
+  fullWidth = false,
+  type = "button",
+  className = "",
+  children,
+  ...rest
+}) {
+  const isDisabled = disabled || loading;
+  const px = ICON_PX[size];
+  const [hovered, setHovered] = useState(false);
+  const toned = color ? resolveTone(color, "primary") : null;
+  const hoverHex = color ? shiftToken(color, 1) : null;
+  const tonedStyle = toned ? {
+    backgroundColor: hovered && !isDisabled && hoverHex ? hoverHex : toned.hex,
+    color: toned.textStyle?.color
+  } : void 0;
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type,
+      disabled: isDisabled,
+      "aria-busy": loading || void 0,
+      style: tonedStyle,
+      onMouseEnter: toned ? () => setHovered(true) : void 0,
+      onMouseLeave: toned ? () => setHovered(false) : void 0,
+      className: cn(
+        "inline-flex items-center justify-center rounded-md font-body font-medium",
+        "transition select-none active:scale-[.98]",
+        "focus:outline-none focus-visible:shadow-focus",
+        "disabled:opacity-50 disabled:cursor-not-allowed disabled:active:scale-100",
+        !toned && (VARIANTS[variant] || VARIANTS.primary),
+        iconOnly ? ICON_ONLY_SIZES[size] : SIZES[size],
+        fullWidth && "w-full",
+        className
+      ),
+      ...rest,
+      children: [
+        loading && /* @__PURE__ */ jsx(CircleNotch, { size: px, weight: "bold", className: "animate-spin" }),
+        !loading && Icon && /* @__PURE__ */ jsx(Icon, { size: px, weight: "regular" }),
+        !iconOnly && children
+      ]
+    }
+  );
+}
+export {
+  Button as default
+};
+//# sourceMappingURL=Button.js.map

package/dist/components/Button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.js","sources":["../../src/components/Button.jsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport { CircleNotch } from \"@phosphor-icons/react\";\nimport { cn } from \"../lib/cn\";\nimport { resolveTone, shiftToken } from \"../lib/tone\";\n\n/**\n * Button — the one button for the whole app.\n *\n * Content shapes:\n *   • text only          <Button>Save</Button>\n *   • icon + text (left)  <Button icon={Plus}>Add unit</Button>\n *   • icon only           <Button icon={Plus} iconOnly aria-label=\"Add\" />\n *\n * Props:\n *   variant   'primary'|'secondary'|'outline'|'ghost'|'danger'|'inverse'  (default 'primary')\n *   color     any design-system token — 'success', 'primary-300', 'neutral-800', …\n *             When set it overrides `variant`'s colors: the background is the token,\n *             the label/icon auto-contrast (white on dark, near-black on light), and\n *             hover steps one shade along that token's own ramp. See ./tone.js.\n *   size      'sm' | 'md' | 'lg'                                          (default 'md')\n *   icon      a Phosphor icon component, rendered on the leading side\n *   iconOnly  square icon button (pass an aria-label for accessibility)\n *   loading   shows a spinner and disables the button\n *   disabled  standard disabled state\n *   fullWidth stretches to container width\n *   ...rest   forwarded to <button> (onClick, type, aria-*, …)\n */\n\nconst VARIANTS = {\n  primary: \"bg-primary text-white hover:bg-primary-hover\",\n  secondary: \"bg-secondary text-white hover:bg-secondary-hover\",\n  outline: \"bg-surface text-content border border-border-strong hover:bg-neutral-50\",\n  ghost: \"bg-transparent text-content hover:bg-neutral-100\",\n  danger: \"bg-error text-white hover:bg-error-700\",\n  // For use on gradient / brand-colored surfaces (e.g. card headers).\n  inverse: \"bg-transparent text-white hover:bg-white/15\",\n};\n\nconst SIZES = {\n  sm: \"h-8 px-3 text-body gap-1.5\",\n  md: \"h-10 px-4 text-body-strong gap-2\",\n  lg: \"h-12 px-6 text-subsection gap-2\",\n};\n\nconst ICON_ONLY_SIZES = {\n  sm: \"h-8 w-8\",\n  md: \"h-10 w-10\",\n  lg: \"h-12 w-12\",\n};\n\nconst ICON_PX = { sm: 16, md: 18, lg: 20 };\n\nexport default function Button({\n  variant = \"primary\",\n  color,\n  size = \"md\",\n  icon: Icon,\n  iconOnly = false,\n  loading = false,\n  disabled = false,\n  fullWidth = false,\n  type = \"button\",\n  className = \"\",\n  children,\n  ...rest\n}) {\n  const isDisabled = disabled || loading;\n  const px = ICON_PX[size];\n  const [hovered, setHovered] = useState(false);\n\n  // `color` is opt-in and overrides `variant`. Hover can't be a Tailwind class here\n  // (the token is only known at runtime), so it's a state-driven inline style.\n  const toned = color ? resolveTone(color, \"primary\") : null;\n  const hoverHex = color ? shiftToken(color, 1) : null;\n  const tonedStyle = toned\n    ? {\n        backgroundColor: hovered && !isDisabled && hoverHex ? hoverHex : toned.hex,\n        color: toned.textStyle?.color,\n      }\n    : undefined;\n\n  return (\n    <button\n      type={type}\n      disabled={isDisabled}\n      aria-busy={loading || undefined}\n      style={tonedStyle}\n      onMouseEnter={toned ? () => setHovered(true) : undefined}\n      onMouseLeave={toned ? () => setHovered(false) : undefined}\n      className={cn(\n        \"inline-flex items-center justify-center rounded-md font-body font-medium\",\n        \"transition select-none active:scale-[.98]\",\n        \"focus:outline-none focus-visible:shadow-focus\",\n        \"disabled:opacity-50 disabled:cursor-not-allowed disabled:active:scale-100\",\n        !toned && (VARIANTS[variant] || VARIANTS.primary),\n        iconOnly ? ICON_ONLY_SIZES[size] : SIZES[size],\n        fullWidth && \"w-full\",\n        className\n      )}\n      {...rest}\n    >\n      {loading && <CircleNotch size={px} weight=\"bold\" className=\"animate-spin\" />}\n      {!loading && Icon && <Icon size={px} weight=\"regular\" />}\n      {!iconOnly && children}\n    </button>\n  );\n}\n"],"names":[],"mappings":";;;;;AA4BA,MAAM,WAAW;AAAA,EACf,SAAS;AAAA,EACT,WAAW;AAAA,EACX,SAAS;AAAA,EACT,OAAO;AAAA,EACP,QAAQ;AAAA;AAAA,EAER,SAAS;AACX;AAEA,MAAM,QAAQ;AAAA,EACZ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,MAAM,kBAAkB;AAAA,EACtB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,MAAM,UAAU,EAAE,IAAI,IAAI,IAAI,IAAI,IAAI,GAAA;AAEtC,SAAwB,OAAO;AAAA,EAC7B,UAAU;AAAA,EACV;AAAA,EACA,OAAO;AAAA,EACP,MAAM;AAAA,EACN,WAAW;AAAA,EACX,UAAU;AAAA,EACV,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,OAAO;AAAA,EACP,YAAY;AAAA,EACZ;AAAA,EACA,GAAG;AACL,GAAG;AACD,QAAM,aAAa,YAAY;AAC/B,QAAM,KAAK,QAAQ,IAAI;AACvB,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,KAAK;AAI5C,QAAM,QAAQ,QAAQ,YAAY,OAAO,SAAS,IAAI;AACtD,QAAM,WAAW,QAAQ,WAAW,OAAO,CAAC,IAAI;AAChD,QAAM,aAAa,QACf;AAAA,IACE,iBAAiB,WAAW,CAAC,cAAc,WAAW,WAAW,MAAM;AAAA,IACvE,OAAO,MAAM,WAAW;AAAA,EAAA,IAE1B;AAEJ,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,UAAU;AAAA,MACV,aAAW,WAAW;AAAA,MACtB,OAAO;AAAA,MACP,cAAc,QAAQ,MAAM,WAAW,IAAI,IAAI;AAAA,MAC/C,cAAc,QAAQ,MAAM,WAAW,KAAK,IAAI;AAAA,MAChD,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,CAAC,UAAU,SAAS,OAAO,KAAK,SAAS;AAAA,QACzC,WAAW,gBAAgB,IAAI,IAAI,MAAM,IAAI;AAAA,QAC7C,aAAa;AAAA,QACb;AAAA,MAAA;AAAA,MAED,GAAG;AAAA,MAEH,UAAA;AAAA,QAAA,+BAAY,aAAA,EAAY,MAAM,IAAI,QAAO,QAAO,WAAU,gBAAe;AAAA,QACzE,CAAC,WAAW,QAAQ,oBAAC,QAAK,MAAM,IAAI,QAAO,WAAU;AAAA,QACrD,CAAC,YAAY;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGpB;"}

package/dist/components/Card.js

@@ -0,0 +1,122 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import "react";
+import { ArrowsOut } from "@phosphor-icons/react";
+import Button from "./Button.js";
+import ActionMenu from "./ActionMenu.js";
+import { cn } from "../lib/cn.js";
+import { resolveTone } from "../lib/tone.js";
+import { useBreakpointTier } from "../lib/useBreakpoint.js";
+import { resolveActionLayout } from "../lib/actionVisibility.js";
+const MAX_INLINE_ACTIONS = 3;
+function Card({ className = "", children, ...rest }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "bg-surface border border-border rounded-lg shadow-sm overflow-hidden flex flex-col",
+        className
+      ),
+      ...rest,
+      children
+    }
+  );
+}
+function Header({
+  icon: Icon,
+  title,
+  actions = [],
+  subHeader,
+  onExpand,
+  tone = "gradient",
+  className = ""
+}) {
+  const t = resolveTone(tone, "gradient");
+  const tier = useBreakpointTier();
+  const { inline: inlineActions, menu: menuActions } = resolveActionLayout(actions, tier, {
+    maxInline: MAX_INLINE_ACTIONS,
+    defaultInline: () => "tablet+",
+    overflowInline: "none"
+  });
+  const isPlain = !t.style && !t.textStyle;
+  return /* @__PURE__ */ jsxs("div", { className: cn(t.className, className), style: t.style, children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3 px-4 py-3", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 min-w-0", children: [
+        Icon && /* @__PURE__ */ jsx(
+          Icon,
+          {
+            size: 18,
+            weight: "regular",
+            className: cn("shrink-0", isPlain && "text-primary"),
+            style: t.textStyle
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "h3",
+          {
+            className: cn("text-subsection font-display truncate", isPlain && "text-content"),
+            style: t.textStyle,
+            children: title
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 shrink-0", children: [
+        inlineActions.length > 0 && // Which actions are here vs in the ⋮ is resolved for the current tier,
+        // so nothing is rendered only to be hidden by a class.
+        /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1.5", children: inlineActions.map(
+          (a) => a.render ? a.render() : /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: t.isDark ? "inverse" : "ghost",
+              size: "sm",
+              iconOnly: true,
+              icon: a.icon,
+              "aria-label": a.label,
+              disabled: a.disabled,
+              onClick: a.onClick,
+              style: t.isDark ? void 0 : t.textStyle
+            },
+            a.key
+          )
+        ) }),
+        /* @__PURE__ */ jsx(ActionMenu, { actions: menuActions, isDark: t.isDark }),
+        onExpand && /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: t.isDark ? "inverse" : "ghost",
+            size: "sm",
+            iconOnly: true,
+            icon: ArrowsOut,
+            "aria-label": "Expand",
+            onClick: onExpand,
+            style: t.isDark ? void 0 : t.textStyle
+          }
+        )
+      ] })
+    ] }),
+    subHeader && /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn("px-4 pb-2.5 -mt-1", t.className, isPlain && "text-content-muted"),
+        style: { ...t.style, ...t.mutedTextStyle },
+        children: subHeader
+      }
+    )
+  ] });
+}
+function SubHeader({ start, end, className = "" }) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex items-center justify-between gap-3", className), children: [
+    /* @__PURE__ */ jsx("div", { className: "min-w-0", children: start }),
+    end != null && /* @__PURE__ */ jsx("div", { className: "shrink-0", children: end })
+  ] });
+}
+Header.SubHeader = SubHeader;
+function Body({ className = "", children }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("p-4", className), children });
+}
+Card.Header = Header;
+Card.SubHeader = SubHeader;
+Card.Body = Body;
+export {
+  Card as default
+};
+//# sourceMappingURL=Card.js.map

package/dist/components/Card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card.js","sources":["../../src/components/Card.jsx"],"sourcesContent":["import React from \"react\";\nimport { ArrowsOut } from \"@phosphor-icons/react\";\nimport Button from \"./Button\";\nimport ActionMenu from \"./ActionMenu\";\nimport { cn } from \"../lib/cn\";\nimport { resolveTone } from \"../lib/tone\";\nimport { useBreakpointTier } from \"../lib/useBreakpoint\";\nimport { resolveActionLayout } from \"../lib/actionVisibility\";\n\n/**\n * Card — surface with a mandatory header (icon + title) and a free-form body.\n *\n * Anatomy:\n *   <Card>\n *     <Card.Header\n *       icon={Snowflake}              // required\n *       title=\"AC Units\"              // required\n *       tone=\"gradient\"               // 'gradient' (default) | 'plain' | 'primary' | 'secondary'\n *                                     // | 'success' | 'warning' | 'error' | 'info' | 'neutral'\n *       actions={[                    // optional — array, not raw JSX (see below)\n *         { key: \"export\", label: \"Export\", icon: DownloadSimple, onClick: () => {} },\n *       ]}\n *       onExpand={() => openModal()}  // optional — shows the expand button; you add the modal\n *       subHeader={                   // optional second header row (same header area)\n *         <Card.SubHeader start={…} end={…} />\n *       }\n *     />\n *     <Card.Body> anything </Card.Body>\n *   </Card>\n *\n * `actions` is a list of { key, label, icon, onClick, disabled?, on?, inline? } —\n * not raw buttons — because Card decides how to lay them out: up to 3 render as icon\n * buttons; more than 3 collapse into a single \"⋮\" overflow menu. On narrow (mobile)\n * screens, actions always collapse to the \"⋮\" menu regardless of count, so the header\n * never crowds. The menu is portaled to <body> so it isn't clipped by Card's own\n * overflow-hidden.\n *\n * `on` and `inline` override those defaults per action — same grammar and same\n * meaning as PageHeader (see ./actionVisibility.js). `on` decides where the action\n * exists at all; `inline` decides where it's a button rather than a ⋮ row:\n *\n *   actions={[\n *     { key: \"filter\", label: \"Filter\", icon: Funnel, on: \"desktop\" },  // desktop only\n *     { key: \"info\",   label: \"Info\",   icon: Info,   inline: \"all\" },  // never collapses\n *   ]}\n *\n * Layout is logical (start/end) so it mirrors in RTL. The expand toggle always\n * sits in the outermost end corner. Default header is the brand gradient\n * (bg-gradient-header); pass tone=\"plain\" for a white header, or ANY design-system\n * token — a family ('success') or an explicit shade ('primary-300', 'neutral-800'),\n * or a status gradient ('gradient-success'). Title, icon, sub-header text and the\n * header action buttons all auto-contrast against whatever tone you pick, so light\n * shades get dark text automatically. See ./tone.js.\n */\n\nconst MAX_INLINE_ACTIONS = 3;\n\nfunction Card({ className = \"\", children, ...rest }) {\n  return (\n    <div\n      className={cn(\n        \"bg-surface border border-border rounded-lg shadow-sm overflow-hidden flex flex-col\",\n        className\n      )}\n      {...rest}\n    >\n      {children}\n    </div>\n  );\n}\n\nfunction Header({\n  icon: Icon,\n  title,\n  actions = [],\n  subHeader,\n  onExpand,\n  tone = \"gradient\",\n  className = \"\",\n}) {\n  if (import.meta.env?.DEV && (!Icon || !title)) {\n    console.warn(\"Card.Header: `icon` and `title` are required.\");\n  }\n\n  const t = resolveTone(tone, \"gradient\");\n  const tier = useBreakpointTier();\n  const { inline: inlineActions, menu: menuActions } = resolveActionLayout(actions, tier, {\n    maxInline: MAX_INLINE_ACTIONS,\n    defaultInline: () => \"tablet+\",\n    overflowInline: \"none\",\n  });\n  // `plain` returns no textStyle — it sits on the app surface, so keep the semantic\n  // token classes it has always used (primary icon, content-colored title).\n  const isPlain = !t.style && !t.textStyle;\n\n  return (\n    <div className={cn(t.className, className)} style={t.style}>\n      {/* Main header row */}\n      <div className=\"flex items-center justify-between gap-3 px-4 py-3\">\n        <div className=\"flex items-center gap-2 min-w-0\">\n          {Icon && (\n            <Icon\n              size={18}\n              weight=\"regular\"\n              className={cn(\"shrink-0\", isPlain && \"text-primary\")}\n              style={t.textStyle}\n            />\n          )}\n          <h3\n            className={cn(\"text-subsection font-display truncate\", isPlain && \"text-content\")}\n            style={t.textStyle}\n          >\n            {title}\n          </h3>\n        </div>\n\n        <div className=\"flex items-center gap-1.5 shrink-0\">\n          {inlineActions.length > 0 && (\n            // Which actions are here vs in the ⋮ is resolved for the current tier,\n            // so nothing is rendered only to be hidden by a class.\n            <div className=\"flex items-center gap-1.5\">\n              {inlineActions.map((a) =>\n                a.render ? (\n                  a.render()\n                ) : (\n                  <Button\n                    key={a.key}\n                    variant={t.isDark ? \"inverse\" : \"ghost\"}\n                    size=\"sm\"\n                    iconOnly\n                    icon={a.icon}\n                    aria-label={a.label}\n                    disabled={a.disabled}\n                    onClick={a.onClick}\n                    style={t.isDark ? undefined : t.textStyle}\n                  />\n                )\n              )}\n            </div>\n          )}\n\n          {/* A `render` action can't be re-created as a menu row, so the menu falls\n              back to its label + icon — that's what keeps it reachable on mobile.\n              Renders nothing when the list is empty. */}\n          <ActionMenu actions={menuActions} isDark={t.isDark} />\n\n          {onExpand && (\n            <Button\n              variant={t.isDark ? \"inverse\" : \"ghost\"}\n              size=\"sm\"\n              iconOnly\n              icon={ArrowsOut}\n              aria-label=\"Expand\"\n              onClick={onExpand}\n              style={t.isDark ? undefined : t.textStyle}\n            />\n          )}\n        </div>\n      </div>\n\n      {/* Optional second header row — same tone background; its text color comes from\n          the resolved tone so plain-text content never needs its own color class. */}\n      {subHeader && (\n        <div\n          className={cn(\"px-4 pb-2.5 -mt-1\", t.className, isPlain && \"text-content-muted\")}\n          style={{ ...t.style, ...t.mutedTextStyle }}\n        >\n          {subHeader}\n        </div>\n      )}\n    </div>\n  );\n}\n\nfunction SubHeader({ start, end, className = \"\" }) {\n  return (\n    <div className={cn(\"flex items-center justify-between gap-3\", className)}>\n      <div className=\"min-w-0\">{start}</div>\n      {end != null && <div className=\"shrink-0\">{end}</div>}\n    </div>\n  );\n}\n\nHeader.SubHeader = SubHeader;\n\nfunction Body({ className = \"\", children }) {\n  return <div className={cn(\"p-4\", className)}>{children}</div>;\n}\n\nCard.Header = Header;\nCard.SubHeader = SubHeader;\nCard.Body = Body;\n\nexport default Card;"],"names":[],"mappings":"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"}

package/dist/components/Checkbox.js

@@ -0,0 +1,68 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useRef, useEffect } from "react";
+import { Check, Minus } from "@phosphor-icons/react";
+import { cn } from "../lib/cn.js";
+const SIZES = {
+  sm: { box: "h-4 w-4", icon: 12 },
+  md: { box: "h-5 w-5", icon: 14 }
+};
+function Checkbox({
+  checked = false,
+  indeterminate = false,
+  onChange,
+  label,
+  size = "md",
+  disabled = false,
+  error = false,
+  className = "",
+  ...rest
+}) {
+  const inputRef = useRef(null);
+  const s = SIZES[size] || SIZES.md;
+  useEffect(() => {
+    if (inputRef.current) inputRef.current.indeterminate = indeterminate && !checked;
+  }, [indeterminate, checked]);
+  const active = checked || indeterminate;
+  return /* @__PURE__ */ jsxs(
+    "label",
+    {
+      className: cn(
+        "inline-flex items-center gap-2 select-none",
+        disabled ? "opacity-60 cursor-not-allowed" : "cursor-pointer",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref: inputRef,
+            type: "checkbox",
+            className: "peer sr-only",
+            checked,
+            disabled,
+            onChange: (e) => onChange?.(e.target.checked),
+            ...rest
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: cn(
+              "inline-flex items-center justify-center rounded border transition shrink-0",
+              "peer-focus-visible:shadow-focus",
+              active ? "bg-primary border-primary text-white" : cn("bg-surface", error ? "border-error" : "border-border-strong"),
+              s.box
+            ),
+            children: checked ? /* @__PURE__ */ jsx(Check, { size: s.icon, weight: "bold" }) : indeterminate ? /* @__PURE__ */ jsx(Minus, { size: s.icon, weight: "bold" }) : null
+          }
+        ),
+        label && /* @__PURE__ */ jsx("span", { className: "text-body text-content", children: label })
+      ]
+    }
+  );
+}
+export {
+  Checkbox as default
+};
+//# sourceMappingURL=Checkbox.js.map

package/dist/components/Checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.js","sources":["../../src/components/Checkbox.jsx"],"sourcesContent":["import React, { useEffect, useRef } from \"react\";\nimport { Check, Minus } from \"@phosphor-icons/react\";\nimport { cn } from \"../lib/cn\";\n\n/**\n * Checkbox — custom box backed by a hidden native <input> (keeps keyboard,\n * form, and screen-reader behavior). Field-compatible: an injected `id` lands\n * on the input so Field's <label htmlFor> toggles it.\n *\n * Props:\n *   checked        boolean\n *   indeterminate  boolean (shows a dash; visual only)\n *   onChange       (next: boolean) => void\n *   label          optional text beside the box\n *   size           'sm' | 'md'  (default 'md')\n *   disabled, error, id, required, aria-*   (Field injects these)\n */\n\nconst SIZES = {\n  sm: { box: \"h-4 w-4\", icon: 12 },\n  md: { box: \"h-5 w-5\", icon: 14 },\n};\n\nexport default function Checkbox({\n  checked = false,\n  indeterminate = false,\n  onChange,\n  label,\n  size = \"md\",\n  disabled = false,\n  error = false,\n  className = \"\",\n  ...rest\n}) {\n  const inputRef = useRef(null);\n  const s = SIZES[size] || SIZES.md;\n\n  useEffect(() => {\n    if (inputRef.current) inputRef.current.indeterminate = indeterminate && !checked;\n  }, [indeterminate, checked]);\n\n  const active = checked || indeterminate;\n\n  return (\n    <label\n      className={cn(\n        \"inline-flex items-center gap-2 select-none\",\n        disabled ? \"opacity-60 cursor-not-allowed\" : \"cursor-pointer\",\n        className\n      )}\n    >\n      <input\n        ref={inputRef}\n        type=\"checkbox\"\n        className=\"peer sr-only\"\n        checked={checked}\n        disabled={disabled}\n        onChange={(e) => onChange?.(e.target.checked)}\n        {...rest}\n      />\n      <span\n        aria-hidden=\"true\"\n        className={cn(\n          \"inline-flex items-center justify-center rounded border transition shrink-0\",\n          \"peer-focus-visible:shadow-focus\",\n          active\n            ? \"bg-primary border-primary text-white\"\n            : cn(\"bg-surface\", error ? \"border-error\" : \"border-border-strong\"),\n          s.box\n        )}\n      >\n        {checked ? (\n          <Check size={s.icon} weight=\"bold\" />\n        ) : indeterminate ? (\n          <Minus size={s.icon} weight=\"bold\" />\n        ) : null}\n      </span>\n      {label && <span className=\"text-body text-content\">{label}</span>}\n    </label>\n  );\n}\n"],"names":[],"mappings":";;;;AAkBA,MAAM,QAAQ;AAAA,EACZ,IAAI,EAAE,KAAK,WAAW,MAAM,GAAA;AAAA,EAC5B,IAAI,EAAE,KAAK,WAAW,MAAM,GAAA;AAC9B;AAEA,SAAwB,SAAS;AAAA,EAC/B,UAAU;AAAA,EACV,gBAAgB;AAAA,EAChB;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,WAAW;AAAA,EACX,QAAQ;AAAA,EACR,YAAY;AAAA,EACZ,GAAG;AACL,GAAG;AACD,QAAM,WAAW,OAAO,IAAI;AAC5B,QAAM,IAAI,MAAM,IAAI,KAAK,MAAM;AAE/B,YAAU,MAAM;AACd,QAAI,SAAS,QAAS,UAAS,QAAQ,gBAAgB,iBAAiB,CAAC;AAAA,EAC3E,GAAG,CAAC,eAAe,OAAO,CAAC;AAE3B,QAAM,SAAS,WAAW;AAE1B,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA,WAAW,kCAAkC;AAAA,QAC7C;AAAA,MAAA;AAAA,MAGF,UAAA;AAAA,QAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,KAAK;AAAA,YACL,MAAK;AAAA,YACL,WAAU;AAAA,YACV;AAAA,YACA;AAAA,YACA,UAAU,CAAC,MAAM,WAAW,EAAE,OAAO,OAAO;AAAA,YAC3C,GAAG;AAAA,UAAA;AAAA,QAAA;AAAA,QAEN;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,eAAY;AAAA,YACZ,WAAW;AAAA,cACT;AAAA,cACA;AAAA,cACA,SACI,yCACA,GAAG,cAAc,QAAQ,iBAAiB,sBAAsB;AAAA,cACpE,EAAE;AAAA,YAAA;AAAA,YAGH,oBACC,oBAAC,OAAA,EAAM,MAAM,EAAE,MAAM,QAAO,OAAA,CAAO,IACjC,oCACD,OAAA,EAAM,MAAM,EAAE,MAAM,QAAO,QAAO,IACjC;AAAA,UAAA;AAAA,QAAA;AAAA,QAEL,SAAS,oBAAC,QAAA,EAAK,WAAU,0BAA0B,UAAA,MAAA,CAAM;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGhE;"}