@kanzo-tech/ui 0.10.0 → 0.12.0

package/dist/simples/segment-group.js

@@ -1,21 +1,23 @@
-import { jsxs as l, jsx as n } from "react/jsx-runtime";
-import { useSegmentGroupContext as c, SegmentGroup as o } from "@ark-ui/react/segment-group";
-import { cn as i } from "../lib/cn.js";
-const N = c, w = (e) => {
+"use client";
+import { jsxs as u, jsx as o } from "react/jsx-runtime";
+import { useFieldContext as v } from "@ark-ui/react/field";
+import { useSegmentGroupContext as h, SegmentGroup as i } from "@ark-ui/react/segment-group";
+import { cn as d } from "../lib/cn.js";
+const G = h, S = (a) => {
   const {
-    orientation: a = "horizontal",
-    variant: r = "default",
-    options: t,
-    itemClassName: s,
-    className: u,
-    children: p,
-    slot: g,
-    ...m
-  } = e;
-  return /* @__PURE__ */ l(
-    o.Root,
+    orientation: r = "horizontal",
+    variant: n = "default",
+    options: e,
+    itemClassName: l,
+    className: p,
+    children: g,
+    slot: m,
+    ...c
+  } = a, t = v();
+  return /* @__PURE__ */ u(
+    i.Root,
     {
-      className: i(
+      className: d(
         "group/segment-group relative",
         "flex gap-2",
         "isolate",
@@ -30,34 +32,38 @@ const N = c, w = (e) => {
         // (ΔE 0.00–1.65), and step 5 is `--accent`. `--border` moved from 5 to 6 precisely so a
         // border and a hover surface would stop being the same colour.
         "data-[variant=solid]:rounded-field data-[variant=solid]:border data-[variant=solid]:border-border data-[variant=solid]:bg-muted data-[variant=solid]:p-1",
-        u
+        p
       ),
-      "data-variant": r,
-      orientation: a,
-      ...m,
-      "data-slot": g ?? "segment-group",
+      "data-variant": n,
+      disabled: t == null ? void 0 : t.disabled,
+      invalid: t == null ? void 0 : t.invalid,
+      orientation: r,
+      readOnly: t == null ? void 0 : t.readOnly,
+      required: t == null ? void 0 : t.required,
+      ...c,
+      "data-slot": m ?? "segment-group",
       children: [
-        /* @__PURE__ */ n(b, {}),
-        t == null ? void 0 : t.map((d) => /* @__PURE__ */ n(
-          v,
+        /* @__PURE__ */ o(f, {}),
+        e == null ? void 0 : e.map((s) => /* @__PURE__ */ o(
+          b,
           {
-            value: d.value,
-            disabled: d.disabled,
-            className: i("px-3 py-1.5", s),
-            children: /* @__PURE__ */ n(h, { className: "flex items-center justify-center gap-2 text-sm font-medium", children: d.label })
+            value: s.value,
+            disabled: s.disabled,
+            className: d("px-3 py-1.5", l),
+            children: /* @__PURE__ */ o(x, { className: "flex items-center justify-center gap-2 text-sm font-medium", children: s.label })
           },
-          d.value
+          s.value
         )),
-        p
+        g
       ]
     }
   );
-}, v = (e) => {
-  const { className: a, children: r, slot: t, ...s } = e;
-  return /* @__PURE__ */ l(
-    o.Item,
+}, b = (a) => {
+  const { className: r, children: n, slot: e, ...l } = a;
+  return /* @__PURE__ */ u(
+    i.Item,
     {
-      className: i(
+      className: d(
         "relative z-1",
         "inline-flex items-center justify-center",
         "cursor-pointer select-none",
@@ -68,33 +74,33 @@ const N = c, w = (e) => {
         "rounded-[inherit] border border-transparent",
         "outline-none data-focus-visible:border-primary data-focus-visible:ring-[3px] data-focus-visible:ring-ring",
         "data-disabled:pointer-events-none data-disabled:opacity-64",
-        a
+        r
       ),
-      ...s,
-      "data-slot": t ?? "segment-group-item",
+      ...l,
+      "data-slot": e ?? "segment-group-item",
       children: [
-        r,
-        /* @__PURE__ */ n(o.ItemControl, {}),
-        /* @__PURE__ */ n(o.ItemHiddenInput, {})
+        n,
+        /* @__PURE__ */ o(i.ItemControl, {}),
+        /* @__PURE__ */ o(i.ItemHiddenInput, {})
       ]
     }
   );
-}, h = (e) => {
-  const { className: a, slot: r, ...t } = e;
-  return /* @__PURE__ */ n(
-    o.ItemText,
+}, x = (a) => {
+  const { className: r, slot: n, ...e } = a;
+  return /* @__PURE__ */ o(
+    i.ItemText,
     {
-      className: i("relative z-1", a),
-      ...t,
-      "data-slot": r ?? "segment-group-item-text"
+      className: d("relative z-1", r),
+      ...e,
+      "data-slot": n ?? "segment-group-item-text"
     }
   );
-}, b = (e) => {
-  const { className: a, slot: r, ...t } = e;
-  return /* @__PURE__ */ n(
-    o.Indicator,
+}, f = (a) => {
+  const { className: r, slot: n, ...e } = a;
+  return /* @__PURE__ */ o(
+    i.Indicator,
     {
-      className: i(
+      className: d(
         "absolute top-(--top) left-(--left) z-0",
         "h-(--height) w-(--width)",
         "rounded-[inherit]",
@@ -112,18 +118,18 @@ const N = c, w = (e) => {
         "data-[orientation=horizontal]:group-data-[variant=underline]/segment-group:h-0.5",
         "data-[orientation=vertical]:group-data-[variant=underline]/segment-group:w-0.5",
         "motion-reduce:transition-none!",
-        a
+        r
       ),
-      ...t,
-      "data-slot": r ?? "segment-group-indicator"
+      ...e,
+      "data-slot": n ?? "segment-group-indicator"
     }
   );
 };
 export {
-  w as SegmentGroup,
-  b as SegmentGroupIndicator,
-  v as SegmentGroupItem,
-  h as SegmentGroupItemText,
-  N as useSegmentGroup
+  S as SegmentGroup,
+  f as SegmentGroupIndicator,
+  b as SegmentGroupItem,
+  x as SegmentGroupItemText,
+  G as useSegmentGroup
 };
 //# sourceMappingURL=segment-group.js.map

package/dist/simples/segment-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"segment-group.js","sources":["../../src/simples/segment-group.tsx"],"sourcesContent":["import {\n  SegmentGroup as ArkSegmentGroup,\n  useSegmentGroupContext,\n} from \"@ark-ui/react/segment-group\";\nimport type React from \"react\";\nimport { cn } from \"../lib/cn\";\n\nexport const useSegmentGroup = useSegmentGroupContext;\n\ntype SegmentGroupVariant = \"default\" | \"underline\" | \"solid\";\n\nexport interface SegmentGroupOption {\n  value: string;\n  label: React.ReactNode;\n  disabled?: boolean;\n}\n\ninterface SegmentGroupProps\n  extends React.ComponentProps<typeof ArkSegmentGroup.Root> {\n  /**\n   * The visual variant of the segment group.\n   *\n   * @default \"default\"\n   */\n  variant?: SegmentGroupVariant;\n  /** Data-driven items rendered before `children` (additive with the compound API). */\n  options?: readonly SegmentGroupOption[];\n  /** Extra classes applied to each `options`-rendered item. */\n  itemClassName?: string;\n}\n\nexport const SegmentGroup = (props: SegmentGroupProps) => {\n  const {\n    orientation = \"horizontal\",\n    variant = \"default\",\n    options,\n    itemClassName,\n    className,\n    children,\n    slot,\n    ...rest\n  } = props;\n\n  return (\n    <ArkSegmentGroup.Root\n      className={cn(\n        \"group/segment-group relative\",\n        \"flex gap-2\",\n        \"isolate\",\n        \"data-[orientation=vertical]:flex-col\",\n        \"data-disabled:opacity-64\",\n        \"data-[variant=underline]:gap-1 data-[variant=underline]:border-input\",\n        \"data-[orientation=horizontal]:data-[variant=underline]:border-b\",\n        \"data-[orientation=vertical]:data-[variant=underline]:border-l\",\n        // `solid`: a filled `bg-muted` track with equal-width segments — the contained\n        // \"segmented control\" look, so consumers stop hand-rolling the track each time.\n        // The track border is solid: diluted, it composited to ramp step 5 on every backdrop\n        // (ΔE 0.00–1.65), and step 5 is `--accent`. `--border` moved from 5 to 6 precisely so a\n        // border and a hover surface would stop being the same colour.\n        \"data-[variant=solid]:rounded-field data-[variant=solid]:border data-[variant=solid]:border-border data-[variant=solid]:bg-muted data-[variant=solid]:p-1\",\n        className\n      )}\n      data-variant={variant}\n      orientation={orientation}\n      {...rest}\n      data-slot={slot ?? \"segment-group\"}\n    >\n      <SegmentGroupIndicator />\n\n      {options?.map((o) => (\n        <SegmentGroupItem\n          key={o.value}\n          value={o.value}\n          disabled={o.disabled}\n          className={cn(\"px-3 py-1.5\", itemClassName)}\n        >\n          <SegmentGroupItemText className=\"flex items-center justify-center gap-2 text-sm font-medium\">\n            {o.label}\n          </SegmentGroupItemText>\n        </SegmentGroupItem>\n      ))}\n\n      {children}\n    </ArkSegmentGroup.Root>\n  );\n};\n\nexport const SegmentGroupItem = (\n  props: React.ComponentProps<typeof ArkSegmentGroup.Item>\n) => {\n  const { className, children, slot, ...rest } = props;\n\n  return (\n    <ArkSegmentGroup.Item\n      className={cn(\n        \"relative z-1\",\n        \"inline-flex items-center justify-center\",\n        \"cursor-pointer select-none\",\n        \"text-sm font-medium text-muted-foreground transition-colors\",\n        \"hover:text-foreground data-[state=checked]:text-foreground\",\n        \"data-[orientation=vertical]:w-full data-[orientation=vertical]:justify-start\",\n        \"group-data-[variant=solid]/segment-group:flex-1 group-data-[variant=solid]/segment-group:justify-center\",\n        \"rounded-[inherit] border border-transparent\",\n        \"outline-none data-focus-visible:border-primary data-focus-visible:ring-[3px] data-focus-visible:ring-ring\",\n        \"data-disabled:pointer-events-none data-disabled:opacity-64\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"segment-group-item\"}\n    >\n      {children}\n\n      <ArkSegmentGroup.ItemControl />\n      <ArkSegmentGroup.ItemHiddenInput />\n    </ArkSegmentGroup.Item>\n  );\n};\n\nexport const SegmentGroupItemText = (\n  props: React.ComponentProps<typeof ArkSegmentGroup.ItemText>\n) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ArkSegmentGroup.ItemText\n      className={cn(\"relative z-1\", className)}\n      {...rest}\n      data-slot={slot ?? \"segment-group-item-text\"}\n    />\n  );\n};\n\nexport const SegmentGroupIndicator = (\n  props: React.ComponentProps<typeof ArkSegmentGroup.Indicator>\n) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ArkSegmentGroup.Indicator\n      className={cn(\n        \"absolute top-(--top) left-(--left) z-0\",\n        \"h-(--height) w-(--width)\",\n        \"rounded-[inherit]\",\n        // The moving \"pill\": an elevated surface with a hairline border and a soft shadow, so\n        // the selected segment reads as a raised chip on the muted track (crisp, not flat).\n        // Solid for the same reason as the track — diluted it landed on step 5, `--accent`.\n        \"border border-border bg-background shadow-sm\",\n        \"transition-[width,height,left,top] duration-150 ease-out\",\n        \"[transition-property:var(--transition-property,width,height,left,top)]\",\n        // `underline` is a bar, not a pill: drop the chrome and paint the accent.\n        \"group-data-[variant=underline]/segment-group:border-transparent group-data-[variant=underline]/segment-group:bg-primary group-data-[variant=underline]/segment-group:shadow-none\",\n        \"data-[orientation=horizontal]:group-data-[variant=underline]/segment-group:top-[calc(var(--top)+var(--height)-1px)]\",\n        \"data-[orientation=vertical]:group-data-[variant=underline]/segment-group:right-[calc(var(--left)+var(--width)-1px)]\",\n        \"data-[orientation=vertical]:group-data-[variant=underline]/segment-group:-translate-x-px\",\n        \"data-[orientation=horizontal]:group-data-[variant=underline]/segment-group:h-0.5\",\n        \"data-[orientation=vertical]:group-data-[variant=underline]/segment-group:w-0.5\",\n        \"motion-reduce:transition-none!\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"segment-group-indicator\"}\n    />\n  );\n};\n"],"names":["useSegmentGroup","useSegmentGroupContext","SegmentGroup","props","orientation","variant","options","itemClassName","className","children","slot","rest","jsxs","ArkSegmentGroup","cn","jsx","SegmentGroupIndicator","o","SegmentGroupItem","SegmentGroupItemText"],"mappings":";;;AAOO,MAAMA,IAAkBC,GAwBlBC,IAAe,CAACC,MAA6B;AACxD,QAAM;AAAA,IACJ,aAAAC,IAAc;AAAA,IACd,SAAAC,IAAU;AAAA,IACV,SAAAC;AAAA,IACA,eAAAC;AAAA,IACA,WAAAC;AAAA,IACA,UAAAC;AAAA,IACA,MAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACDR;AAEJ,SACE,gBAAAS;AAAA,IAACC,EAAgB;AAAA,IAAhB;AAAA,MACC,WAAWC;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAMA;AAAA,QACAN;AAAA,MAAA;AAAA,MAEF,gBAAcH;AAAA,MACd,aAAAD;AAAA,MACC,GAAGO;AAAA,MACJ,aAAWD,KAAQ;AAAA,MAEnB,UAAA;AAAA,QAAA,gBAAAK,EAACC,GAAA,EAAsB;AAAA,QAEtBV,KAAA,gBAAAA,EAAS,IAAI,CAACW,MACb,gBAAAF;AAAA,UAACG;AAAA,UAAA;AAAA,YAEC,OAAOD,EAAE;AAAA,YACT,UAAUA,EAAE;AAAA,YACZ,WAAWH,EAAG,eAAeP,CAAa;AAAA,YAE1C,UAAA,gBAAAQ,EAACI,GAAA,EAAqB,WAAU,8DAC7B,YAAE,MAAA,CACL;AAAA,UAAA;AAAA,UAPKF,EAAE;AAAA,QAAA;AAAA,QAWVR;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGP,GAEaS,IAAmB,CAC9Bf,MACG;AACH,QAAM,EAAE,WAAAK,GAAW,UAAAC,GAAU,MAAAC,GAAM,GAAGC,MAASR;AAE/C,SACE,gBAAAS;AAAA,IAACC,EAAgB;AAAA,IAAhB;AAAA,MACC,WAAWC;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACAN;AAAA,MAAA;AAAA,MAED,GAAGG;AAAA,MACJ,aAAWD,KAAQ;AAAA,MAElB,UAAA;AAAA,QAAAD;AAAA,QAED,gBAAAM,EAACF,EAAgB,aAAhB,EAA4B;AAAA,QAC7B,gBAAAE,EAACF,EAAgB,iBAAhB,CAAA,CAAgC;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGvC,GAEaM,IAAuB,CAClChB,MACG;AACH,QAAM,EAAE,WAAAK,GAAW,MAAAE,GAAM,GAAGC,MAASR;AAErC,SACE,gBAAAY;AAAA,IAACF,EAAgB;AAAA,IAAhB;AAAA,MACC,WAAWC,EAAG,gBAAgBN,CAAS;AAAA,MACtC,GAAGG;AAAA,MACJ,aAAWD,KAAQ;AAAA,IAAA;AAAA,EAAA;AAGzB,GAEaM,IAAwB,CACnCb,MACG;AACH,QAAM,EAAE,WAAAK,GAAW,MAAAE,GAAM,GAAGC,MAASR;AAErC,SACE,gBAAAY;AAAA,IAACF,EAAgB;AAAA,IAAhB;AAAA,MACC,WAAWC;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA;AAAA;AAAA;AAAA,QAIA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,QAEA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACAN;AAAA,MAAA;AAAA,MAED,GAAGG;AAAA,MACJ,aAAWD,KAAQ;AAAA,IAAA;AAAA,EAAA;AAGzB;"}
+{"version":3,"file":"segment-group.js","sources":["../../src/simples/segment-group.tsx"],"sourcesContent":["\"use client\";\n\nimport { type UseFieldContext, useFieldContext } from \"@ark-ui/react/field\";\nimport {\n  SegmentGroup as ArkSegmentGroup,\n  useSegmentGroupContext,\n} from \"@ark-ui/react/segment-group\";\nimport type React from \"react\";\nimport { cn } from \"../lib/cn\";\n\nexport const useSegmentGroup = useSegmentGroupContext;\n\ntype SegmentGroupVariant = \"default\" | \"underline\" | \"solid\";\n\nexport interface SegmentGroupOption {\n  value: string;\n  label: React.ReactNode;\n  disabled?: boolean;\n}\n\ninterface SegmentGroupProps\n  extends React.ComponentProps<typeof ArkSegmentGroup.Root> {\n  /**\n   * The visual variant of the segment group.\n   *\n   * @default \"default\"\n   */\n  variant?: SegmentGroupVariant;\n  /** Data-driven items rendered before `children` (additive with the compound API). */\n  options?: readonly SegmentGroupOption[];\n  /** Extra classes applied to each `options`-rendered item. */\n  itemClassName?: string;\n}\n\n// Ark's `useSegmentGroup` reads no `useFieldContext`, so a `Field disabled` left the segments\n// clickable. Bridged here the way `RadioGroup` does it — state flags only, explicit props win, and\n// with no `Field` ancestor every flag is `undefined`, which Ark strips before the machine sees it.\nexport const SegmentGroup = (props: SegmentGroupProps) => {\n  const {\n    orientation = \"horizontal\",\n    variant = \"default\",\n    options,\n    itemClassName,\n    className,\n    children,\n    slot,\n    ...rest\n  } = props;\n\n  const field: UseFieldContext | undefined = useFieldContext();\n\n  return (\n    <ArkSegmentGroup.Root\n      className={cn(\n        \"group/segment-group relative\",\n        \"flex gap-2\",\n        \"isolate\",\n        \"data-[orientation=vertical]:flex-col\",\n        \"data-disabled:opacity-64\",\n        \"data-[variant=underline]:gap-1 data-[variant=underline]:border-input\",\n        \"data-[orientation=horizontal]:data-[variant=underline]:border-b\",\n        \"data-[orientation=vertical]:data-[variant=underline]:border-l\",\n        // `solid`: a filled `bg-muted` track with equal-width segments — the contained\n        // \"segmented control\" look, so consumers stop hand-rolling the track each time.\n        // The track border is solid: diluted, it composited to ramp step 5 on every backdrop\n        // (ΔE 0.00–1.65), and step 5 is `--accent`. `--border` moved from 5 to 6 precisely so a\n        // border and a hover surface would stop being the same colour.\n        \"data-[variant=solid]:rounded-field data-[variant=solid]:border data-[variant=solid]:border-border data-[variant=solid]:bg-muted data-[variant=solid]:p-1\",\n        className\n      )}\n      data-variant={variant}\n      disabled={field?.disabled}\n      invalid={field?.invalid}\n      orientation={orientation}\n      readOnly={field?.readOnly}\n      required={field?.required}\n      {...rest}\n      data-slot={slot ?? \"segment-group\"}\n    >\n      <SegmentGroupIndicator />\n\n      {options?.map((o) => (\n        <SegmentGroupItem\n          key={o.value}\n          value={o.value}\n          disabled={o.disabled}\n          className={cn(\"px-3 py-1.5\", itemClassName)}\n        >\n          <SegmentGroupItemText className=\"flex items-center justify-center gap-2 text-sm font-medium\">\n            {o.label}\n          </SegmentGroupItemText>\n        </SegmentGroupItem>\n      ))}\n\n      {children}\n    </ArkSegmentGroup.Root>\n  );\n};\n\nexport const SegmentGroupItem = (\n  props: React.ComponentProps<typeof ArkSegmentGroup.Item>\n) => {\n  const { className, children, slot, ...rest } = props;\n\n  return (\n    <ArkSegmentGroup.Item\n      className={cn(\n        \"relative z-1\",\n        \"inline-flex items-center justify-center\",\n        \"cursor-pointer select-none\",\n        \"text-sm font-medium text-muted-foreground transition-colors\",\n        \"hover:text-foreground data-[state=checked]:text-foreground\",\n        \"data-[orientation=vertical]:w-full data-[orientation=vertical]:justify-start\",\n        \"group-data-[variant=solid]/segment-group:flex-1 group-data-[variant=solid]/segment-group:justify-center\",\n        \"rounded-[inherit] border border-transparent\",\n        \"outline-none data-focus-visible:border-primary data-focus-visible:ring-[3px] data-focus-visible:ring-ring\",\n        \"data-disabled:pointer-events-none data-disabled:opacity-64\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"segment-group-item\"}\n    >\n      {children}\n\n      <ArkSegmentGroup.ItemControl />\n      <ArkSegmentGroup.ItemHiddenInput />\n    </ArkSegmentGroup.Item>\n  );\n};\n\nexport const SegmentGroupItemText = (\n  props: React.ComponentProps<typeof ArkSegmentGroup.ItemText>\n) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ArkSegmentGroup.ItemText\n      className={cn(\"relative z-1\", className)}\n      {...rest}\n      data-slot={slot ?? \"segment-group-item-text\"}\n    />\n  );\n};\n\nexport const SegmentGroupIndicator = (\n  props: React.ComponentProps<typeof ArkSegmentGroup.Indicator>\n) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ArkSegmentGroup.Indicator\n      className={cn(\n        \"absolute top-(--top) left-(--left) z-0\",\n        \"h-(--height) w-(--width)\",\n        \"rounded-[inherit]\",\n        // The moving \"pill\": an elevated surface with a hairline border and a soft shadow, so\n        // the selected segment reads as a raised chip on the muted track (crisp, not flat).\n        // Solid for the same reason as the track — diluted it landed on step 5, `--accent`.\n        \"border border-border bg-background shadow-sm\",\n        \"transition-[width,height,left,top] duration-150 ease-out\",\n        \"[transition-property:var(--transition-property,width,height,left,top)]\",\n        // `underline` is a bar, not a pill: drop the chrome and paint the accent.\n        \"group-data-[variant=underline]/segment-group:border-transparent group-data-[variant=underline]/segment-group:bg-primary group-data-[variant=underline]/segment-group:shadow-none\",\n        \"data-[orientation=horizontal]:group-data-[variant=underline]/segment-group:top-[calc(var(--top)+var(--height)-1px)]\",\n        \"data-[orientation=vertical]:group-data-[variant=underline]/segment-group:right-[calc(var(--left)+var(--width)-1px)]\",\n        \"data-[orientation=vertical]:group-data-[variant=underline]/segment-group:-translate-x-px\",\n        \"data-[orientation=horizontal]:group-data-[variant=underline]/segment-group:h-0.5\",\n        \"data-[orientation=vertical]:group-data-[variant=underline]/segment-group:w-0.5\",\n        \"motion-reduce:transition-none!\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"segment-group-indicator\"}\n    />\n  );\n};\n"],"names":[],"mappings":";;;;;AAUO;AA4BL;AAAM;AACU;AACJ;AACV;AACA;AACA;AACA;AACA;AACG;AAKL;AACE;AAAiB;AAAhB;AACY;AACT;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAMA;AACA;AAAA;AAEY;AACG;AACD;AAChB;AACiB;AACA;AACb;AACe;AAEnB;AAAuB;AAGrB;AAAC;AAAA;AAEU;AACG;AAC8B;AAI1C;AAAA;AAPO;AAAA;AAWV;AAAA;AAAA;AAGP;AAKE;AAEA;AACE;AAAiB;AAAhB;AACY;AACT;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAEE;AACe;AAElB;AAAA;AAE4B;AACI;AAAA;AAAA;AAGvC;AAKE;AAEA;AACE;AAAiB;AAAhB;AACwC;AACnC;AACe;AAAA;AAGzB;AAKE;AAEA;AACE;AAAiB;AAAhB;AACY;AACT;AACA;AACA;AAAA;AAAA;AAAA;AAIA;AACA;AACA;AAAA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAEE;AACe;AAAA;AAGzB;;;;;;;;"}

package/dist/simples/stat.d.ts

@@ -0,0 +1,45 @@
+import { ark } from '@ark-ui/react/factory';
+import { Card } from './card';
+export interface StatRootProps extends React.ComponentProps<typeof Card> {
+    /** The status family, written to `data-variant` and read by `StatIndicator`. */
+    variant?: "default" | "success" | "info" | "warning" | "destructive";
+}
+/**
+ * One dashboard number. A `Card`, so `asChild` makes the anchor *be* the tile — one tab stop, and
+ * the router seam. The link styles key on the element (`[a&]`, as `Badge` does) rather than on a
+ * prop, so they cannot disagree with what was rendered.
+ */
+export declare const StatRoot: (props: StatRootProps) => import("react").JSX.Element;
+export declare const StatIndicator: (props: React.ComponentProps<typeof ark.div>) => import("react").JSX.Element;
+/** Sentence case, no trailing colon. */
+export declare const StatLabel: (props: React.ComponentProps<typeof ark.span>) => import("react").JSX.Element;
+export interface StatValueProps extends React.ComponentProps<typeof ark.div> {
+    /** Swaps the figure for a skeleton of its size, so the tile does not jump when it lands. */
+    loading?: boolean;
+}
+/**
+ * The figure, as the host formats it — `FormatNumber` with `notation="compact"` is the dashboard
+ * reading. Proportional figures on purpose: a lone headline number is not a column to align.
+ */
+export declare const StatValue: (props: StatValueProps) => import("react").JSX.Element;
+export interface StatDeltaProps extends React.ComponentProps<typeof ark.div> {
+    /** Signed change. Its sign draws the direction icon; with `goodWhenUp`, it picks the colour. */
+    value: number;
+    /**
+     * Against the magnitude, before the comparison — `"%"`, `"pp"`, `"ms"`. "+8.2 vs last week" is a
+     * different claim from "+8.2% vs last week".
+     */
+    unit?: string;
+    /** Whether a rise is good. Two more failed runs and two more members are both `+2`. @default true */
+    goodWhenUp?: boolean;
+}
+/** The comparison period is the children: `<StatDelta value={4.2} unit="%">vs last month</StatDelta>`. */
+export declare const StatDelta: (props: StatDeltaProps) => import("react").JSX.Element;
+export interface StatTrendProps extends Omit<React.ComponentProps<typeof ark.svg>, "values"> {
+    /** About a dozen points, oldest first. Fewer than two draws nothing. */
+    values: readonly number[];
+}
+/** A sparkline with its last value marked — unlabelled, because a reader who needs the values needs a chart. */
+export declare const StatTrend: (props: StatTrendProps) => import("react").JSX.Element | null;
+export declare const StatDescription: (props: React.ComponentProps<typeof ark.p>) => import("react").JSX.Element;
+//# sourceMappingURL=stat.d.ts.map

package/dist/simples/stat.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"stat.d.ts","sourceRoot":"","sources":["../../src/simples/stat.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,uBAAuB,CAAC;AAK5C,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAG9B,MAAM,WAAW,aAAc,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC;IACtE,gFAAgF;IAChF,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,aAAa,CAAC;CACtE;AAED;;;;GAIG;AACH,eAAO,MAAM,QAAQ,GAAI,OAAO,aAAa,gCAkB5C,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,GAAG,CAAC,gCAoBxE,CAAC;AAEF,wCAAwC;AACxC,eAAO,MAAM,SAAS,GAAI,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,gCAarE,CAAC;AAEF,MAAM,WAAW,cAAe,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,GAAG,CAAC;IAC1E,4FAA4F;IAC5F,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED;;;GAGG;AACH,eAAO,MAAM,SAAS,GAAI,OAAO,cAAc,gCAgB9C,CAAC;AAcF,MAAM,WAAW,cAAe,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,GAAG,CAAC;IAC1E,gGAAgG;IAChG,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,qGAAqG;IACrG,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,0GAA0G;AAC1G,eAAO,MAAM,SAAS,GAAI,OAAO,cAAc,gCAsB9C,CAAC;AAGF,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,GAAG,CAAC,EAAE,QAAQ,CAAC;IAC1F,wEAAwE;IACxE,MAAM,EAAE,SAAS,MAAM,EAAE,CAAC;CAC3B;AAED,gHAAgH;AAChH,eAAO,MAAM,SAAS,GAAI,OAAO,cAAc,uCAqC9C,CAAC;AAEF,eAAO,MAAM,eAAe,GAAI,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,CAAC,CAAC,gCAUxE,CAAC"}

package/dist/simples/stat.js

@@ -0,0 +1,155 @@
+import { jsxs as v, jsx as o } from "react/jsx-runtime";
+import { ark as d } from "@ark-ui/react/factory";
+import { FormatNumber as w } from "@ark-ui/react/format";
+import { MinusIcon as k, TrendingDownIcon as S, TrendingUpIcon as y } from "lucide-react";
+import { tv as D } from "tailwind-variants";
+import { cn as i } from "../lib/cn.js";
+import { Card as I } from "./card.js";
+import { Skeleton as _ } from "./skeleton.js";
+const V = (a) => {
+  const { variant: t = "default", className: s, slot: e, ...n } = a;
+  return /* @__PURE__ */ o(
+    I,
+    {
+      className: i(
+        "group/stat [--space:--spacing(4)] px-(--space)",
+        // Indicator and label share the first row; the value and the trend share the second.
+        "grid grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-0 gap-y-1",
+        "outline-none transition-colors focus-visible:ring-[3px] focus-visible:ring-ring",
+        "[a&]:hover:border-primary/40",
+        s
+      ),
+      "data-variant": t,
+      ...n,
+      slot: e ?? "stat-root"
+    }
+  );
+}, W = (a) => {
+  const { className: t, slot: s, ...e } = a;
+  return /* @__PURE__ */ o(
+    d.div,
+    {
+      "aria-hidden": !0,
+      className: i(
+        "col-start-1 me-2 shrink-0 rounded-full p-1.5 [&_svg]:size-3.5",
+        // The soft status pair `Badge` measured: step-11 ink on a 7% wash.
+        "bg-muted text-muted-foreground",
+        "group-data-[variant=success]/stat:bg-success/7 group-data-[variant=success]/stat:text-success-foreground",
+        "group-data-[variant=info]/stat:bg-info/7 group-data-[variant=info]/stat:text-info-foreground",
+        "group-data-[variant=warning]/stat:bg-warning/7 group-data-[variant=warning]/stat:text-warning-foreground",
+        "group-data-[variant=destructive]/stat:bg-destructive/7 group-data-[variant=destructive]/stat:text-destructive-foreground",
+        t
+      ),
+      ...e,
+      "data-slot": s ?? "stat-indicator"
+    }
+  );
+}, B = (a) => {
+  const { className: t, slot: s, ...e } = a;
+  return /* @__PURE__ */ o(
+    d.span,
+    {
+      className: i(
+        "col-start-2 col-end-[-1] truncate font-medium text-muted-foreground text-sm",
+        t
+      ),
+      ...e,
+      "data-slot": s ?? "stat-label"
+    }
+  );
+}, R = (a) => {
+  const { loading: t = !1, className: s, children: e, slot: n, ...r } = a;
+  return /* @__PURE__ */ o(
+    d.div,
+    {
+      "aria-busy": t || void 0,
+      className: i(
+        "col-start-1 col-end-3 pt-2 font-semibold text-2xl text-foreground leading-none tracking-tight",
+        s
+      ),
+      ...r,
+      "data-slot": n ?? "stat-value",
+      children: t ? /* @__PURE__ */ o(_, { className: "h-6 w-20" }) : e
+    }
+  );
+}, $ = D({
+  base: "col-span-full flex items-center gap-1 font-medium text-xs [&_svg]:size-3.5 [&_svg]:shrink-0",
+  variants: {
+    // Step-11 ink: a delta is 12px text and owes 4.5:1, which the step-9 fill does not reach.
+    tone: {
+      good: "text-success-foreground",
+      bad: "text-destructive-foreground",
+      flat: "text-muted-foreground"
+    }
+  }
+}), X = (a) => {
+  const { value: t, unit: s, goodWhenUp: e = !0, className: n, children: r, slot: c, ...m } = a, l = t > 0 ? "up" : t < 0 ? "down" : "flat", g = l === "flat" ? "flat" : l === "up" === e ? "good" : "bad", u = { up: y, down: S, flat: k }[l];
+  return /* @__PURE__ */ v(
+    d.div,
+    {
+      className: i($({ tone: g }), n),
+      "data-direction": l,
+      ...m,
+      "data-slot": c ?? "stat-delta",
+      children: [
+        /* @__PURE__ */ o(u, { "aria-hidden": !0 }),
+        /* @__PURE__ */ v("span", { children: [
+          /* @__PURE__ */ o(w, { maximumFractionDigits: 1, signDisplay: "exceptZero", value: t }),
+          s
+        ] }),
+        r != null && /* @__PURE__ */ o("span", { className: "font-normal text-muted-foreground", children: r })
+      ]
+    }
+  );
+}, Y = (a) => {
+  const { values: t, className: s, slot: e, ...n } = a;
+  if (t.length < 2) return null;
+  const r = 72, c = 22, m = Math.min(...t), l = Math.max(...t) - m || 1, g = r / (t.length - 1), u = t.map((p, f) => [f * g, c - (p - m) / l * c]), x = u.map(([p, f], b) => `${b ? "L" : "M"}${p.toFixed(1)},${f.toFixed(1)}`).join(" "), [h, N] = u[u.length - 1] ?? [0, 0];
+  return /* @__PURE__ */ v(
+    d.svg,
+    {
+      "aria-hidden": !0,
+      className: i("col-start-3 ms-3 self-end overflow-visible", s),
+      height: c,
+      viewBox: `0 0 ${r} ${c}`,
+      width: r,
+      ...n,
+      "data-slot": e ?? "stat-trend",
+      children: [
+        /* @__PURE__ */ o(
+          "path",
+          {
+            className: "text-muted-foreground",
+            d: x,
+            fill: "none",
+            stroke: "currentColor",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            strokeWidth: 1.5
+          }
+        ),
+        /* @__PURE__ */ o("circle", { className: "fill-primary", cx: h, cy: N, r: 2.5 })
+      ]
+    }
+  );
+}, Z = (a) => {
+  const { className: t, slot: s, ...e } = a;
+  return /* @__PURE__ */ o(
+    d.p,
+    {
+      className: i("col-span-full text-muted-foreground text-sm", t),
+      ...e,
+      "data-slot": s ?? "stat-description"
+    }
+  );
+};
+export {
+  X as StatDelta,
+  Z as StatDescription,
+  W as StatIndicator,
+  B as StatLabel,
+  V as StatRoot,
+  Y as StatTrend,
+  R as StatValue
+};
+//# sourceMappingURL=stat.js.map

package/dist/simples/stat.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stat.js","sources":["../../src/simples/stat.tsx"],"sourcesContent":["import { ark } from \"@ark-ui/react/factory\";\nimport { FormatNumber } from \"@ark-ui/react/format\";\nimport { MinusIcon, TrendingDownIcon, TrendingUpIcon } from \"lucide-react\";\nimport { tv } from \"tailwind-variants\";\nimport { cn } from \"../lib/cn\";\nimport { Card } from \"./card\";\nimport { Skeleton } from \"./skeleton\";\n\nexport interface StatRootProps extends React.ComponentProps<typeof Card> {\n  /** The status family, written to `data-variant` and read by `StatIndicator`. */\n  variant?: \"default\" | \"success\" | \"info\" | \"warning\" | \"destructive\";\n}\n\n/**\n * One dashboard number. A `Card`, so `asChild` makes the anchor *be* the tile — one tab stop, and\n * the router seam. The link styles key on the element (`[a&]`, as `Badge` does) rather than on a\n * prop, so they cannot disagree with what was rendered.\n */\nexport const StatRoot = (props: StatRootProps) => {\n  const { variant = \"default\", className, slot, ...rest } = props;\n\n  return (\n    <Card\n      className={cn(\n        \"group/stat [--space:--spacing(4)] px-(--space)\",\n        // Indicator and label share the first row; the value and the trend share the second.\n        \"grid grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-0 gap-y-1\",\n        \"outline-none transition-colors focus-visible:ring-[3px] focus-visible:ring-ring\",\n        \"[a&]:hover:border-primary/40\",\n        className\n      )}\n      data-variant={variant}\n      {...rest}\n      slot={slot ?? \"stat-root\"}\n    />\n  );\n};\n\nexport const StatIndicator = (props: React.ComponentProps<typeof ark.div>) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ark.div\n      aria-hidden\n      className={cn(\n        \"col-start-1 me-2 shrink-0 rounded-full p-1.5 [&_svg]:size-3.5\",\n        // The soft status pair `Badge` measured: step-11 ink on a 7% wash.\n        \"bg-muted text-muted-foreground\",\n        \"group-data-[variant=success]/stat:bg-success/7 group-data-[variant=success]/stat:text-success-foreground\",\n        \"group-data-[variant=info]/stat:bg-info/7 group-data-[variant=info]/stat:text-info-foreground\",\n        \"group-data-[variant=warning]/stat:bg-warning/7 group-data-[variant=warning]/stat:text-warning-foreground\",\n        \"group-data-[variant=destructive]/stat:bg-destructive/7 group-data-[variant=destructive]/stat:text-destructive-foreground\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"stat-indicator\"}\n    />\n  );\n};\n\n/** Sentence case, no trailing colon. */\nexport const StatLabel = (props: React.ComponentProps<typeof ark.span>) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ark.span\n      className={cn(\n        \"col-start-2 col-end-[-1] truncate font-medium text-muted-foreground text-sm\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"stat-label\"}\n    />\n  );\n};\n\nexport interface StatValueProps extends React.ComponentProps<typeof ark.div> {\n  /** Swaps the figure for a skeleton of its size, so the tile does not jump when it lands. */\n  loading?: boolean;\n}\n\n/**\n * The figure, as the host formats it — `FormatNumber` with `notation=\"compact\"` is the dashboard\n * reading. Proportional figures on purpose: a lone headline number is not a column to align.\n */\nexport const StatValue = (props: StatValueProps) => {\n  const { loading = false, className, children, slot, ...rest } = props;\n\n  return (\n    <ark.div\n      aria-busy={loading || undefined}\n      className={cn(\n        \"col-start-1 col-end-3 pt-2 font-semibold text-2xl text-foreground leading-none tracking-tight\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"stat-value\"}\n    >\n      {loading ? <Skeleton className=\"h-6 w-20\" /> : children}\n    </ark.div>\n  );\n};\n\nconst statDeltaVariants = tv({\n  base: \"col-span-full flex items-center gap-1 font-medium text-xs [&_svg]:size-3.5 [&_svg]:shrink-0\",\n  variants: {\n    // Step-11 ink: a delta is 12px text and owes 4.5:1, which the step-9 fill does not reach.\n    tone: {\n      good: \"text-success-foreground\",\n      bad: \"text-destructive-foreground\",\n      flat: \"text-muted-foreground\",\n    },\n  },\n});\n\nexport interface StatDeltaProps extends React.ComponentProps<typeof ark.div> {\n  /** Signed change. Its sign draws the direction icon; with `goodWhenUp`, it picks the colour. */\n  value: number;\n  /**\n   * Against the magnitude, before the comparison — `\"%\"`, `\"pp\"`, `\"ms\"`. \"+8.2 vs last week\" is a\n   * different claim from \"+8.2% vs last week\".\n   */\n  unit?: string;\n  /** Whether a rise is good. Two more failed runs and two more members are both `+2`. @default true */\n  goodWhenUp?: boolean;\n}\n\n/** The comparison period is the children: `<StatDelta value={4.2} unit=\"%\">vs last month</StatDelta>`. */\nexport const StatDelta = (props: StatDeltaProps) => {\n  const { value, unit, goodWhenUp = true, className, children, slot, ...rest } = props;\n  const direction = value > 0 ? \"up\" : value < 0 ? \"down\" : \"flat\";\n  const tone = direction === \"flat\" ? \"flat\" : (direction === \"up\") === goodWhenUp ? \"good\" : \"bad\";\n  // Never colour alone: the icon carries the direction and the sign carries it in text.\n  const Icon = { up: TrendingUpIcon, down: TrendingDownIcon, flat: MinusIcon }[direction];\n\n  return (\n    <ark.div\n      className={cn(statDeltaVariants({ tone }), className)}\n      data-direction={direction}\n      {...rest}\n      data-slot={slot ?? \"stat-delta\"}\n    >\n      <Icon aria-hidden />\n      <span>\n        <FormatNumber maximumFractionDigits={1} signDisplay=\"exceptZero\" value={value} />\n        {unit}\n      </span>\n      {children != null && <span className=\"font-normal text-muted-foreground\">{children}</span>}\n    </ark.div>\n  );\n};\n\n// `values` is also an SVG animation attribute, meaningless on an `<svg>`; the series takes the name.\nexport interface StatTrendProps extends Omit<React.ComponentProps<typeof ark.svg>, \"values\"> {\n  /** About a dozen points, oldest first. Fewer than two draws nothing. */\n  values: readonly number[];\n}\n\n/** A sparkline with its last value marked — unlabelled, because a reader who needs the values needs a chart. */\nexport const StatTrend = (props: StatTrendProps) => {\n  const { values, className, slot, ...rest } = props;\n  if (values.length < 2) return null;\n\n  const w = 72;\n  const h = 22;\n  const min = Math.min(...values);\n  const range = Math.max(...values) - min || 1;\n  const step = w / (values.length - 1);\n  const points = values.map((v, i) => [i * step, h - ((v - min) / range) * h] as const);\n  const d = points.map(([x, y], i) => `${i ? \"L\" : \"M\"}${x.toFixed(1)},${y.toFixed(1)}`).join(\" \");\n  const [lastX, lastY] = points[points.length - 1] ?? [0, 0];\n\n  return (\n    <ark.svg\n      aria-hidden\n      className={cn(\"col-start-3 ms-3 self-end overflow-visible\", className)}\n      height={h}\n      viewBox={`0 0 ${w} ${h}`}\n      width={w}\n      {...rest}\n      data-slot={slot ?? \"stat-trend\"}\n    >\n      {/* A 1.5px trend line is a graphical object carrying information, so it owes 3:1. Diluted it\n          measured 2.91:1 on the light page (3.33–3.35 in dark); step 11 solid is 9.19 and 8.52. */}\n      <path\n        className=\"text-muted-foreground\"\n        d={d}\n        fill=\"none\"\n        stroke=\"currentColor\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        strokeWidth={1.5}\n      />\n      <circle className=\"fill-primary\" cx={lastX} cy={lastY} r={2.5} />\n    </ark.svg>\n  );\n};\n\nexport const StatDescription = (props: React.ComponentProps<typeof ark.p>) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ark.p\n      className={cn(\"col-span-full text-muted-foreground text-sm\", className)}\n      {...rest}\n      data-slot={slot ?? \"stat-description\"}\n    />\n  );\n};\n"],"names":["StatRoot","props","variant","className","slot","rest","jsx","Card","cn","StatIndicator","ark","StatLabel","StatValue","loading","children","Skeleton","statDeltaVariants","tv","StatDelta","value","unit","goodWhenUp","direction","tone","Icon","TrendingUpIcon","TrendingDownIcon","MinusIcon","jsxs","FormatNumber","StatTrend","values","w","h","min","range","step","points","v","i","d","x","y","lastX","lastY","StatDescription"],"mappings":"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"}

package/dist/table/actions-column.d.ts

@@ -0,0 +1,20 @@
+import { ColumnDef, Row } from '@tanstack/react-table';
+import { ReactNode } from 'react';
+export interface ActionsColumnOptions<TData> {
+    /** Visually hidden header text, so the column is not an empty `<th>`. Default "Actions". */
+    headerLabel?: string;
+    /** Column id. Default "actions". */
+    id?: string;
+    /** aria-label for a row's trigger. It names the row — the icon has no text to borrow. */
+    label: (row: Row<TData>) => string;
+    /** The row's menu items — `MenuItem`, `MenuSeparator`, `MenuGroup`. `null` renders no trigger. */
+    menu: (row: Row<TData>) => ReactNode;
+}
+/**
+ * A trailing row-menu column. A row with nothing permitted gets no trigger rather than an empty
+ * menu. The trigger and the menu both stop click propagation so neither fires
+ * `DataTableContent`'s `onRowClick` — the menu too, because a portal's events bubble through the
+ * React tree to the row regardless of where the DOM put them.
+ */
+export declare function actionsColumn<TData>(options: ActionsColumnOptions<TData>): ColumnDef<TData, unknown>;
+//# sourceMappingURL=actions-column.d.ts.map

package/dist/table/actions-column.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"actions-column.d.ts","sourceRoot":"","sources":["../../src/table/actions-column.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,uBAAuB,CAAC;AAE5D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC,MAAM,WAAW,oBAAoB,CAAC,KAAK;IACzC,4FAA4F;IAC5F,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,oCAAoC;IACpC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,yFAAyF;IACzF,KAAK,EAAE,CAAC,GAAG,EAAE,GAAG,CAAC,KAAK,CAAC,KAAK,MAAM,CAAC;IACnC,kGAAkG;IAClG,IAAI,EAAE,CAAC,GAAG,EAAE,GAAG,CAAC,KAAK,CAAC,KAAK,SAAS,CAAC;CACtC;AAMD;;;;;GAKG;AACH,wBAAgB,aAAa,CAAC,KAAK,EACjC,OAAO,EAAE,oBAAoB,CAAC,KAAK,CAAC,GACnC,SAAS,CAAC,KAAK,EAAE,OAAO,CAAC,CAkC3B"}

package/dist/table/actions-column.js

@@ -0,0 +1,38 @@
+"use client";
+import { jsx as n, jsxs as m } from "react/jsx-runtime";
+import { EllipsisIcon as u } from "lucide-react";
+import { Button as d } from "../simples/button.js";
+import { Menu as p, MenuTrigger as f, MenuContent as h } from "../simples/menu.js";
+const i = 44;
+function z(r) {
+  const { headerLabel: t = "Actions", id: s = "actions", label: a, menu: c } = r;
+  return {
+    cell: ({ row: l }) => {
+      const o = c(l);
+      return o == null ? null : /* @__PURE__ */ n("div", { className: "flex justify-end", children: /* @__PURE__ */ m(p, { children: [
+        /* @__PURE__ */ n(f, { asChild: !0, children: /* @__PURE__ */ n(
+          d,
+          {
+            "aria-label": a(l),
+            onClick: (e) => e.stopPropagation(),
+            size: "icon-sm",
+            variant: "ghost",
+            children: /* @__PURE__ */ n(u, {})
+          }
+        ) }),
+        /* @__PURE__ */ n(h, { onClick: (e) => e.stopPropagation(), children: o })
+      ] }) });
+    },
+    enableHiding: !1,
+    enableSorting: !1,
+    header: () => /* @__PURE__ */ n("span", { className: "sr-only", children: t }),
+    id: s,
+    maxSize: i,
+    minSize: i,
+    size: i
+  };
+}
+export {
+  z as actionsColumn
+};
+//# sourceMappingURL=actions-column.js.map

package/dist/table/actions-column.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"actions-column.js","sources":["../../src/table/actions-column.tsx"],"sourcesContent":["\"use client\";\n\nimport type { ColumnDef, Row } from \"@tanstack/react-table\";\nimport { EllipsisIcon } from \"lucide-react\";\nimport type { ReactNode } from \"react\";\nimport { Button } from \"../simples/button.js\";\nimport { Menu, MenuContent, MenuTrigger } from \"../simples/menu.js\";\n\nexport interface ActionsColumnOptions<TData> {\n  /** Visually hidden header text, so the column is not an empty `<th>`. Default \"Actions\". */\n  headerLabel?: string;\n  /** Column id. Default \"actions\". */\n  id?: string;\n  /** aria-label for a row's trigger. It names the row — the icon has no text to borrow. */\n  label: (row: Row<TData>) => string;\n  /** The row's menu items — `MenuItem`, `MenuSeparator`, `MenuGroup`. `null` renders no trigger. */\n  menu: (row: Row<TData>) => ReactNode;\n}\n\n// The trigger at `--size-field: 0.25rem` (28px) plus the cell's `p-2`. A floor, not a clamp: in\n// an auto-layout table a wider density's trigger still wins, and the column takes no slack.\nconst WIDTH = 44;\n\n/**\n * A trailing row-menu column. A row with nothing permitted gets no trigger rather than an empty\n * menu. The trigger and the menu both stop click propagation so neither fires\n * `DataTableContent`'s `onRowClick` — the menu too, because a portal's events bubble through the\n * React tree to the row regardless of where the DOM put them.\n */\nexport function actionsColumn<TData>(\n  options: ActionsColumnOptions<TData>,\n): ColumnDef<TData, unknown> {\n  const { headerLabel = \"Actions\", id = \"actions\", label, menu } = options;\n\n  return {\n    cell: ({ row }) => {\n      const items = menu(row);\n      if (items == null) return null;\n\n      return (\n        <div className=\"flex justify-end\">\n          <Menu>\n            <MenuTrigger asChild>\n              <Button\n                aria-label={label(row)}\n                onClick={(event) => event.stopPropagation()}\n                size=\"icon-sm\"\n                variant=\"ghost\"\n              >\n                <EllipsisIcon />\n              </Button>\n            </MenuTrigger>\n            <MenuContent onClick={(event) => event.stopPropagation()}>{items}</MenuContent>\n          </Menu>\n        </div>\n      );\n    },\n    enableHiding: false,\n    enableSorting: false,\n    header: () => <span className=\"sr-only\">{headerLabel}</span>,\n    id,\n    maxSize: WIDTH,\n    minSize: WIDTH,\n    size: WIDTH,\n  };\n}\n"],"names":[],"mappings":";;;;;AAqBA;AAQO;AAGL;AAEA;AAAO;AAEH;AACA;AAKM;AACE;AAAC;AAAA;AACsB;AACK;AACrB;AACG;AAEM;AAAA;AAElB;AACiE;AAErE;AAEJ;AACc;AACC;AACsC;AACrD;AACS;AACA;AACH;AAEV;;;;"}

package/dist/table/data-table-content.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"data-table-content.d.ts","sourceRoot":"","sources":["../../src/table/data-table-content.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EACL,KAAK,EAON,MAAM,qBAAqB,CAAC;AAG7B,MAAM,WAAW,qBAAqB,CAAC,KAAK,GAAG,OAAO,CACpD,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,KAAK,CAAC,EAAE,UAAU,CAAC;IAC5D,yDAAyD;IACzD,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,6DAA6D;IAC7D,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,KAAK,KAAK,IAAI,CAAC;IAClC,4EAA4E;IAC5E,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAYD;;;;;GAKG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,GAAG,OAAO,EAAE,KAAK,EAAE,qBAAqB,CAAC,KAAK,CAAC,qBAkGpF"}
+{"version":3,"file":"data-table-content.d.ts","sourceRoot":"","sources":["../../src/table/data-table-content.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EACL,KAAK,EAON,MAAM,qBAAqB,CAAC;AAG7B,MAAM,WAAW,qBAAqB,CAAC,KAAK,GAAG,OAAO,CACpD,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,KAAK,CAAC,EAAE,UAAU,CAAC;IAC5D,yDAAyD;IACzD,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,6DAA6D;IAC7D,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,KAAK,KAAK,IAAI,CAAC;IAClC,4EAA4E;IAC5E,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAYD;;;;;GAKG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,GAAG,OAAO,EAAE,KAAK,EAAE,qBAAqB,CAAC,KAAK,CAAC,qBA4GpF"}

package/dist/table/data-table-content.js

@@ -1,28 +1,39 @@
 "use client";
-import { jsx as t, jsxs as x } from "react/jsx-runtime";
-import { flexRender as i } from "@tanstack/react-table";
-import { cn as C } from "../lib/cn.js";
-import { Table as T, TableHeader as D, TableRow as n, TableHead as v, TableBody as w, TableCell as d, TableFooter as y } from "../simples/table.js";
-import { useDataTableContext as k } from "./data-table-root.js";
-const H = (a) => a ? "overflow-clip" : "overflow-hidden";
-function j(a) {
+import { jsx as t, jsxs as C } from "react/jsx-runtime";
+import { flexRender as a } from "@tanstack/react-table";
+import { cn as D } from "../lib/cn.js";
+import { Table as T, TableHeader as v, TableRow as r, TableHead as w, TableBody as y, TableCell as c, TableFooter as k } from "../simples/table.js";
+import { useDataTableContext as H } from "./data-table-root.js";
+const N = (i) => i ? "overflow-clip" : "overflow-hidden";
+function j(i) {
   const {
     empty: u = "No results.",
     onRowClick: l,
     className: f,
-    stickyHeader: c = !1,
-    maxHeight: s,
-    ...h
-  } = a, r = k(), p = c && s === void 0, m = r.getRowModel().rows, b = r.getVisibleLeafColumns().length || 1, g = r.getFooterGroups().some((o) => o.headers.some((e) => e.column.columnDef.footer));
+    stickyHeader: s = !1,
+    maxHeight: d,
+    ...g
+  } = i, n = H(), h = s && d === void 0, m = n.getRowModel().rows, p = n._getDefaultColumnDef().size, b = n.getVisibleLeafColumns().length || 1, x = n.getFooterGroups().some((o) => o.headers.some((e) => e.column.columnDef.footer));
   return /* @__PURE__ */ t(
     "div",
     {
-      className: C(H(p), "rounded-lg border border-border", f),
+      className: D(N(h), "rounded-lg border border-border", f),
       "data-slot": "data-table-content",
-      children: /* @__PURE__ */ x(T, { maxHeight: s, stickyHeader: c, ...h, children: [
-        /* @__PURE__ */ t(D, { children: r.getHeaderGroups().map((o) => /* @__PURE__ */ t(n, { children: o.headers.map((e) => /* @__PURE__ */ t(v, { children: e.isPlaceholder ? null : i(e.column.columnDef.header, e.getContext()) }, e.id)) }, o.id)) }),
-        /* @__PURE__ */ t(w, { children: m.length ? m.map((o) => /* @__PURE__ */ t(
-          n,
+      children: /* @__PURE__ */ C(T, { maxHeight: d, stickyHeader: s, ...g, children: [
+        /* @__PURE__ */ t(v, { children: n.getHeaderGroups().map((o) => /* @__PURE__ */ t(r, { children: o.headers.map((e) => (
+          // Only a column that declares its own `size` gets a width. TanStack merges a
+          // default of 150 into every column, and applying that would fix the whole table.
+          /* @__PURE__ */ t(
+            w,
+            {
+              style: e.column.columnDef.size === p ? void 0 : { width: e.getSize() },
+              children: e.isPlaceholder ? null : a(e.column.columnDef.header, e.getContext())
+            },
+            e.id
+          )
+        )) }, o.id)) }),
+        /* @__PURE__ */ t(y, { children: m.length ? m.map((o) => /* @__PURE__ */ t(
+          r,
           {
             className: l ? "cursor-pointer" : void 0,
             "data-state": o.getIsSelected() ? "selected" : void 0,
@@ -31,18 +42,18 @@ function j(a) {
               e.target === e.currentTarget && (e.key !== "Enter" && e.key !== " " || (e.preventDefault(), l(o.original)));
             } : void 0,
             tabIndex: l ? 0 : void 0,
-            children: o.getVisibleCells().map((e) => /* @__PURE__ */ t(d, { children: i(e.column.columnDef.cell, e.getContext()) }, e.id))
+            children: o.getVisibleCells().map((e) => /* @__PURE__ */ t(c, { children: a(e.column.columnDef.cell, e.getContext()) }, e.id))
           },
           o.id
-        )) : /* @__PURE__ */ t(n, { children: /* @__PURE__ */ t(
-          d,
+        )) : /* @__PURE__ */ t(r, { children: /* @__PURE__ */ t(
+          c,
           {
             className: "h-24 whitespace-normal text-center text-muted-foreground",
             colSpan: b,
             children: u
           }
         ) }) }),
-        g && /* @__PURE__ */ t(y, { children: r.getFooterGroups().map((o) => /* @__PURE__ */ t(n, { children: o.headers.map((e) => /* @__PURE__ */ t(d, { children: e.isPlaceholder ? null : i(e.column.columnDef.footer, e.getContext()) }, e.id)) }, o.id)) })
+        x && /* @__PURE__ */ t(k, { children: n.getFooterGroups().map((o) => /* @__PURE__ */ t(r, { children: o.headers.map((e) => /* @__PURE__ */ t(c, { children: e.isPlaceholder ? null : a(e.column.columnDef.footer, e.getContext()) }, e.id)) }, o.id)) })
       ] })
     }
   );