@cloudraker/reki 2.6.1

package/dist/chunks/switch-bigo96fyjlh7ivbi.js

@@ -0,0 +1,256 @@
+"use client";
+import { jsx as e, jsxs as z } from "react/jsx-runtime";
+import { forwardRef as A, useContext as V, createContext as W } from "react";
+import { c as n } from "./cn-ct4n7r74mh8y0f48.js";
+import { F as M } from "./field-fe5m8z3vbpvtctbe.js";
+import { Q as L, U as O, bf as P } from "./vendor-base-ui-bgl9g5nkvqy3tn36.js";
+const re = {
+  size: {
+    sm: {
+      classes: "h-5.5 w-8.5",
+      description: "Small switch for compact UIs"
+    },
+    base: {
+      classes: "h-6.5 w-10.5",
+      description: "Default switch size"
+    },
+    lg: {
+      classes: "h-7.5 w-12.5",
+      description: "Large switch for prominent toggles"
+    }
+  },
+  variant: {
+    default: {
+      classes: "",
+      description: "Default switch with squircle shape and brand blue color"
+    },
+    neutral: {
+      classes: "",
+      description: "Monochrome switch with squircle shape for subtle toggles"
+    }
+  }
+}, te = {
+  size: "base",
+  variant: "default"
+}, T = W({
+  controlFirst: !0
+}), j = A(
+  ({
+    className: a,
+    checked: i,
+    disabled: o,
+    size: c = "base",
+    variant: l = "default",
+    label: s,
+    labelTooltip: d,
+    required: f,
+    controlFirst: w = !0,
+    onCheckedChange: x,
+    transitioning: N,
+    id: r,
+    ...u
+  }, S) => {
+    const v = typeof s == "string" ? s : "Switch", _ = /* @__PURE__ */ e(
+      P,
+      {
+        ref: S,
+        id: r,
+        checked: i,
+        disabled: o,
+        onCheckedChange: x,
+        nativeButton: !0,
+        render: (R, t) => {
+          const {
+            ref: h,
+            className: k,
+            role: I,
+            "aria-checked": m,
+            "aria-pressed": q,
+            ...y
+          } = R, p = l === "neutral", g = "rounded-[5px] supports-[corner-shape:squircle]:rounded-[10px] [corner-shape:squircle]", b = {
+            sm: { track: "h-4 w-8", thumb: "w-4", slide: "left-4" },
+            base: { track: "h-4.5 w-9", thumb: "w-4.5", slide: "left-4.5" },
+            lg: { track: "h-5 w-10", thumb: "w-5", slide: "left-5" }
+          }[c], E = p ? t.checked ? "bg-neutral-500 dark:bg-reki-base ring-neutral-600 dark:ring-neutral-700" : "bg-neutral-150 dark:bg-reki-base ring-reki-hairline" : t.checked ? "bg-reki-brand ring-reki-brand-hover" : "bg-neutral-200 dark:bg-neutral-700 ring-neutral-300 dark:ring-neutral-600", G = p ? t.checked ? "bg-reki-base dark:bg-neutral-400" : "bg-reki-base dark:bg-neutral-850" : t.checked ? "bg-reki-base dark:bg-reki-base" : "bg-reki-base dark:bg-neutral-850", U = n(
+            "relative inline-flex items-center ring cursor-pointer border-none p-0",
+            "focus:outline-none focus-visible:ring-2 focus-visible:ring-reki-brand",
+            "transition-colors duration-150 ease-out motion-reduce:transition-none",
+            "disabled:cursor-not-allowed disabled:opacity-50",
+            b.track,
+            g,
+            E,
+            a,
+            k
+          ), H = n(
+            "absolute top-0 bottom-0 shadow-[0_0_1px_0.5px_var(--color-reki-shadow-edge),0_1px_2px_var(--color-reki-shadow-drop)]",
+            b.thumb,
+            g,
+            G,
+            "transition-all duration-150 ease-out motion-reduce:transition-none",
+            t.checked ? b.slide : "left-0"
+          ), F = u.role ?? I ?? "switch", K = F === "switch" ? { "aria-checked": t.checked } : { "aria-pressed": t.checked };
+          return /* @__PURE__ */ e(
+            "button",
+            {
+              ...y,
+              ...u,
+              ref: h,
+              "data-reki-component": "Switch",
+              type: "button",
+              role: F,
+              ...K,
+              "aria-busy": N || void 0,
+              "aria-label": u["aria-label"] ?? v,
+              className: U,
+              children: /* @__PURE__ */ e("div", { className: H })
+            }
+          );
+        }
+      }
+    );
+    return s ? /* @__PURE__ */ e(
+      M,
+      {
+        label: s,
+        required: f,
+        labelTooltip: d,
+        controlFirst: w,
+        children: _
+      }
+    ) : _;
+  }
+);
+j.displayName = "Switch";
+const B = A(
+  ({
+    className: a,
+    checked: i,
+    disabled: o,
+    size: c = "base",
+    variant: l = "default",
+    label: s,
+    onCheckedChange: d,
+    transitioning: f
+  }, w) => {
+    const { controlFirst: x } = V(T);
+    return /* @__PURE__ */ z(
+      "label",
+      {
+        "data-reki-component": "Switch",
+        "data-reki-part": "item-label",
+        className: n(
+          "m-0 relative inline-flex items-center gap-2",
+          // Control first (default): switch before label
+          // Label first: label before switch using flex-row-reverse
+          !x && "flex-row-reverse justify-end",
+          o ? "cursor-not-allowed opacity-50" : "cursor-pointer",
+          a
+        ),
+        children: [
+          /* @__PURE__ */ e(
+            P,
+            {
+              ref: w,
+              checked: i,
+              disabled: o,
+              onCheckedChange: d,
+              nativeButton: !0,
+              render: (N, r) => {
+                const {
+                  ref: u,
+                  className: S,
+                  role: v,
+                  "aria-checked": _,
+                  "aria-pressed": R,
+                  ...t
+                } = N, h = l === "neutral", k = "rounded-[5px] supports-[corner-shape:squircle]:rounded-[10px] [corner-shape:squircle]", m = {
+                  sm: { track: "h-4 w-8", thumb: "w-4", slide: "left-4" },
+                  base: { track: "h-4.5 w-9", thumb: "w-4.5", slide: "left-4.5" },
+                  lg: { track: "h-5 w-10", thumb: "w-5", slide: "left-5" }
+                }[c], q = h ? r.checked ? "bg-neutral-500 dark:bg-reki-base ring-neutral-600 dark:ring-neutral-700" : "bg-neutral-150 dark:bg-reki-base ring-reki-hairline" : r.checked ? "bg-blue-500 dark:bg-blue-600 ring-blue-600 dark:ring-blue-500" : "bg-neutral-200 dark:bg-neutral-700 ring-neutral-300 dark:ring-neutral-600", y = h ? r.checked ? "bg-reki-base dark:bg-neutral-400" : "bg-reki-base dark:bg-neutral-850" : r.checked ? "bg-reki-base dark:bg-blue-300" : "bg-reki-base dark:bg-neutral-850", p = n(
+                  "relative inline-flex items-center ring cursor-pointer border-none p-0",
+                  "focus:outline-none focus:ring-reki-focus/50 focus-visible:ring-2 focus-visible:ring-reki-brand",
+                  "transition-colors duration-150 ease-out motion-reduce:transition-none",
+                  "disabled:cursor-not-allowed disabled:opacity-50",
+                  m.track,
+                  k,
+                  q,
+                  S
+                ), g = n(
+                  "absolute top-0 bottom-0 shadow-[0_0_1px_0.5px_var(--color-reki-shadow-edge),0_1px_2px_var(--color-reki-shadow-drop)]",
+                  m.thumb,
+                  k,
+                  y,
+                  "transition-all duration-150 ease-out motion-reduce:transition-none",
+                  r.checked ? m.slide : "left-0"
+                ), C = v ?? "switch", b = C === "switch" ? { "aria-checked": r.checked } : { "aria-pressed": r.checked };
+                return /* @__PURE__ */ e(
+                  "button",
+                  {
+                    ...t,
+                    ref: u,
+                    "data-reki-component": "Switch",
+                    "data-reki-part": "item",
+                    type: "button",
+                    role: C,
+                    ...b,
+                    "aria-busy": f || void 0,
+                    className: p,
+                    children: /* @__PURE__ */ e("div", { className: g })
+                  }
+                );
+              }
+            }
+          ),
+          /* @__PURE__ */ e("span", { className: "text-base font-medium text-reki-default", children: s })
+        ]
+      }
+    );
+  }
+);
+B.displayName = "Switch.Item";
+function D({ children: a, className: i }) {
+  return /* @__PURE__ */ e(
+    L,
+    {
+      className: n("text-base font-medium text-reki-default", i),
+      children: a
+    }
+  );
+}
+D.displayName = "Switch.Legend";
+function Q({
+  legend: a,
+  children: i,
+  error: o,
+  description: c,
+  disabled: l,
+  controlFirst: s = !0,
+  className: d
+}) {
+  return /* @__PURE__ */ e(T.Provider, { value: { controlFirst: s }, children: /* @__PURE__ */ z(
+    O,
+    {
+      className: n("flex flex-col gap-4", d),
+      disabled: l,
+      children: [
+        a && /* @__PURE__ */ e(L, { className: "text-base font-medium text-reki-default", children: a }),
+        /* @__PURE__ */ e("div", { className: "flex flex-col gap-2", children: i }),
+        o && /* @__PURE__ */ e("p", { className: "text-sm text-reki-danger", children: o }),
+        c && /* @__PURE__ */ e("p", { className: "text-sm text-reki-subtle", children: c })
+      ]
+    }
+  ) });
+}
+const J = Object.assign(j, {
+  Item: B,
+  Group: Q,
+  Legend: D
+});
+J.displayName = "Switch";
+export {
+  te as R,
+  J as S,
+  re as a
+};
+//# sourceMappingURL=switch-bigo96fyjlh7ivbi.js.map

package/dist/chunks/switch-bigo96fyjlh7ivbi.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"switch-bigo96fyjlh7ivbi.js","sources":["../../src/components/switch/switch.tsx"],"sourcesContent":["import { Switch as BaseSwitch } from \"@base-ui/react/switch\";\nimport {\n  forwardRef,\n  type ButtonHTMLAttributes,\n  type Ref,\n  type ReactNode,\n  createContext,\n  useContext,\n} from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { resolveVariant } from \"../../utils/resolve-variant\";\nimport { Field } from \"../field/field\";\nimport { Fieldset } from \"@base-ui/react/fieldset\";\n\n/** Switch size and variant definitions mapping names to their Tailwind classes. */\nexport const REKI_SWITCH_VARIANTS = {\n  size: {\n    sm: {\n      classes: \"h-5.5 w-8.5\",\n      description: \"Small switch for compact UIs\",\n    },\n    base: {\n      classes: \"h-6.5 w-10.5\",\n      description: \"Default switch size\",\n    },\n    lg: {\n      classes: \"h-7.5 w-12.5\",\n      description: \"Large switch for prominent toggles\",\n    },\n  },\n  variant: {\n    default: {\n      classes: \"\",\n      description: \"Default switch with squircle shape and brand blue color\",\n    },\n    neutral: {\n      classes: \"\",\n      description: \"Monochrome switch with squircle shape for subtle toggles\",\n    },\n  },\n} as const;\n\nexport const REKI_SWITCH_DEFAULT_VARIANTS = {\n  size: \"base\",\n  variant: \"default\",\n} as const;\n\n// Derived types from REKI_SWITCH_VARIANTS\nexport type RekiSwitchSize = keyof typeof REKI_SWITCH_VARIANTS.size;\nexport type RekiSwitchVariant = keyof typeof REKI_SWITCH_VARIANTS.variant;\n\nexport interface RekiSwitchVariantsProps {\n  /**\n   * Switch size.\n   * - `\"sm\"` — Small for compact UIs\n   * - `\"base\"` — Default size\n   * - `\"lg\"` — Large for prominent toggles\n   * @default \"base\"\n   */\n  size?: RekiSwitchSize;\n  /**\n   * Visual variant.\n   * - `\"default\"` — Standard switch appearance\n   * - `\"error\"` — Error state for validation failures\n   * @default \"default\"\n   */\n  variant?: RekiSwitchVariant;\n}\n\nexport function switchVariants({\n  size = REKI_SWITCH_DEFAULT_VARIANTS.size,\n  variant = REKI_SWITCH_DEFAULT_VARIANTS.variant,\n}: RekiSwitchVariantsProps = {}) {\n  const sizeConfig = resolveVariant(REKI_SWITCH_VARIANTS.size, size, REKI_SWITCH_DEFAULT_VARIANTS.size);\n  const variantConfig = resolveVariant(REKI_SWITCH_VARIANTS.variant, variant, REKI_SWITCH_DEFAULT_VARIANTS.variant);\n  return cn(sizeConfig.classes, variantConfig.classes);\n}\n\n// Legacy type aliases for backwards compatibility\nexport type SwitchSize = RekiSwitchSize;\nexport type SwitchVariant = RekiSwitchVariant;\n\n// Context for passing controlFirst from Group to Items\nconst SwitchGroupContext = createContext<{ controlFirst: boolean }>({\n  controlFirst: true,\n});\n\n/**\n * Single switch component props (with built-in Field)\n *\n * Usage patterns:\n *\n * Basic usage:\n * ```tsx\n * <Switch label=\"Enable notifications\" checked={true} onCheckedChange={setChecked} />\n * ```\n *\n * Label first layout:\n * ```tsx\n * <Switch label=\"Dark mode\" checked={false} onCheckedChange={setChecked} controlFirst={false} />\n * ```\n *\n * Neutral variant (monochrome, squircle shape):\n * ```tsx\n * <Switch label=\"Setting\" variant=\"neutral\" checked={false} onCheckedChange={setChecked} />\n * ```\n *\n * @property {string} label - Label text for the switch (Field wrapper is built-in)\n * @property {boolean} [controlFirst] - When true (default), switch appears before label\n */\nexport type SwitchProps = Omit<\n  ButtonHTMLAttributes<HTMLButtonElement>,\n  \"children\"\n> & {\n  /** Visual variant: \"default\" (pill, brand color) or \"neutral\" (squircle, monochrome) */\n  variant?: SwitchVariant;\n  /** Label content for the switch (Field wrapper is built-in) - can be a string or any React node. Optional when used standalone for visual-only purposes. */\n  label?: ReactNode;\n  /** Tooltip content to display next to the label via an info icon */\n  labelTooltip?: ReactNode;\n  /**\n   * Whether the switch is required.\n   * When explicitly false, shows \"(optional)\" text after the label.\n   */\n  required?: boolean;\n  /** When true (default), switch appears before label. When false, label appears before switch. */\n  controlFirst?: boolean;\n  size?: RekiSwitchSize;\n  checked?: boolean;\n  disabled?: boolean;\n  onCheckedChange?: (checked: boolean) => void;\n  transitioning?: boolean;\n};\n\n/**\n * Switch group component props (with built-in Fieldset)\n *\n * Usage:\n * ```tsx\n * <Switch.Group\n *   legend=\"Notification settings\"\n *   error=\"You must enable at least one notification type\"\n * >\n *   <Switch.Item label=\"Email notifications\" value=\"email\" />\n *   <Switch.Item label=\"SMS notifications\" value=\"sms\" />\n * </Switch.Group>\n * ```\n */\n/**\n * Props for Switch.Legend — a composable sub-component for labeling a Switch.Group.\n *\n * Place as a direct child of `<Switch.Group>` to provide a styled, accessible legend.\n * Accepts `className` for full styling control (e.g. `className=\"sr-only\"` to visually hide).\n *\n * @example\n * ```tsx\n * <Switch.Group>\n *   <Switch.Legend className=\"sr-only\">Notification settings</Switch.Legend>\n *   <Switch.Item label=\"Email\" value=\"email\" />\n * </Switch.Group>\n * ```\n */\nexport interface SwitchLegendProps {\n  /** Legend content */\n  children: ReactNode;\n  /** Additional CSS classes (e.g. \"sr-only\" to visually hide the legend) */\n  className?: string;\n}\n\nexport interface SwitchGroupProps {\n  /**\n   * Legend text for the group.\n   * For more control over legend styling, omit this prop and use `<Switch.Legend>` as a child instead.\n   */\n  legend?: string;\n  /** Child Switch.Item components (and optionally a Switch.Legend) */\n  children: ReactNode;\n  /** Error message for the group (only appears in groups, not single switches) */\n  error?: string;\n  /** Helper text for the group */\n  description?: ReactNode;\n  /** Whether all switches in the group are disabled */\n  disabled?: boolean;\n  /** When true (default), switch appears before label. When false, label appears before switch. */\n  controlFirst?: boolean;\n  /** Additional CSS classes */\n  className?: string;\n}\n\n/**\n * Individual switch item within a group\n */\nexport type SwitchItemProps = {\n  /** Visual variant: \"default\" or \"error\" for validation failures */\n  variant?: SwitchVariant;\n  /** Label text displayed next to switch */\n  label: string;\n  /** Additional CSS classes for the label wrapper */\n  className?: string;\n  checked?: boolean;\n  disabled?: boolean;\n  onCheckedChange?: (checked: boolean) => void;\n  size?: RekiSwitchSize;\n  transitioning?: boolean;\n};\n\n// Single switch with built-in Field\nconst SwitchBase = forwardRef<HTMLButtonElement, SwitchProps>(\n  (\n    {\n      className,\n      checked,\n      disabled,\n      size = \"base\",\n      variant = \"default\",\n      label,\n      labelTooltip,\n      required,\n      controlFirst = true,\n      onCheckedChange,\n      transitioning,\n      id,\n      ...props\n    },\n    ref,\n  ) => {\n    // For aria-label, only use string labels (ReactNode labels can't be used for aria-label)\n    const ariaLabelFallback = typeof label === \"string\" ? label : \"Switch\";\n    const switchControl = (\n      <BaseSwitch.Root\n        ref={ref}\n        id={id}\n        checked={checked}\n        disabled={disabled}\n        onCheckedChange={onCheckedChange}\n        nativeButton\n        render={(rootProps, state) => {\n          const {\n            ref: rootRef,\n            className: baseClassName,\n            role: baseRole,\n            \"aria-checked\": _ariaChecked,\n            \"aria-pressed\": _ariaPressed,\n            ...restRootProps\n          } = rootProps as typeof rootProps & {\n            ref?: Ref<HTMLButtonElement>;\n            className?: string;\n            role?: string;\n            \"aria-checked\"?: boolean;\n            \"aria-pressed\"?: boolean;\n          };\n\n          const isNeutral = variant === \"neutral\";\n\n          // Squircle-aware border-radius (used by both variants)\n          const squircleRadius =\n            \"rounded-[5px] supports-[corner-shape:squircle]:rounded-[10px] [corner-shape:squircle]\";\n\n          // Size styles matching Kyle's stratus implementation\n          const sizeStyles = {\n            sm: { track: \"h-4 w-8\", thumb: \"w-4\", slide: \"left-4\" },\n            base: { track: \"h-4.5 w-9\", thumb: \"w-4.5\", slide: \"left-4.5\" },\n            lg: { track: \"h-5 w-10\", thumb: \"w-5\", slide: \"left-5\" },\n          };\n          const s = sizeStyles[size];\n\n          // Track colors based on variant\n          const trackColors = isNeutral\n            ? state.checked\n              ? \"bg-neutral-500 dark:bg-reki-base ring-neutral-600 dark:ring-neutral-700\"\n              : \"bg-neutral-150 dark:bg-reki-base ring-reki-hairline\"\n            : state.checked\n              ? \"bg-reki-brand ring-reki-brand-hover\"\n              : \"bg-neutral-200 dark:bg-neutral-700 ring-neutral-300 dark:ring-neutral-600\";\n\n          // Thumb colors based on variant\n          const thumbColors = isNeutral\n            ? state.checked\n              ? \"bg-reki-base dark:bg-neutral-400\"\n              : \"bg-reki-base dark:bg-neutral-850\"\n            : state.checked\n              ? \"bg-reki-base dark:bg-reki-base\"\n              : \"bg-reki-base dark:bg-neutral-850\";\n\n          const trackClassName = cn(\n            \"relative inline-flex items-center ring cursor-pointer border-none p-0\",\n            \"focus:outline-none focus-visible:ring-2 focus-visible:ring-reki-brand\",\n            \"transition-colors duration-150 ease-out motion-reduce:transition-none\",\n            \"disabled:cursor-not-allowed disabled:opacity-50\",\n            s.track,\n            squircleRadius,\n            trackColors,\n            className,\n            baseClassName,\n          );\n\n          const thumbClassName = cn(\n            \"absolute top-0 bottom-0 shadow-[0_0_1px_0.5px_var(--color-reki-shadow-edge),0_1px_2px_var(--color-reki-shadow-drop)]\",\n            s.thumb,\n            squircleRadius,\n            thumbColors,\n            \"transition-all duration-150 ease-out motion-reduce:transition-none\",\n            state.checked ? s.slide : \"left-0\",\n          );\n\n          const role =\n            (props.role as string | undefined) ?? baseRole ?? \"switch\";\n          const checkedA11yProps =\n            role === \"switch\"\n              ? { \"aria-checked\": state.checked }\n              : { \"aria-pressed\": state.checked };\n\n          return (\n            <button\n              {...restRootProps}\n              {...props}\n              ref={rootRef}\n              data-reki-component=\"Switch\"\n              type=\"button\"\n              role={role}\n              {...checkedA11yProps}\n              aria-busy={transitioning || undefined}\n              aria-label={props[\"aria-label\"] ?? ariaLabelFallback}\n              className={trackClassName}\n            >\n              <div className={thumbClassName} />\n            </button>\n          );\n        }}\n      />\n    );\n\n    // Wrap in Field (built-in) - no description for single switches\n    // If no label provided, return bare switch (for use in other components)\n    if (!label) {\n      return switchControl;\n    }\n\n    return (\n      <Field\n        label={label}\n        required={required}\n        labelTooltip={labelTooltip}\n        controlFirst={controlFirst}\n      >\n        {switchControl}\n      </Field>\n    );\n  },\n);\n\nSwitchBase.displayName = \"Switch\";\n\n// Switch.Item for use within Switch.Group\nconst SwitchItem = forwardRef<HTMLButtonElement, SwitchItemProps>(\n  (\n    {\n      className,\n      checked,\n      disabled,\n      size = \"base\",\n      variant = \"default\",\n      label,\n      onCheckedChange,\n      transitioning,\n    },\n    ref,\n  ) => {\n    const { controlFirst } = useContext(SwitchGroupContext);\n\n    return (\n      <label\n        data-reki-component=\"Switch\"\n        data-reki-part=\"item-label\"\n        className={cn(\n          \"m-0 relative inline-flex items-center gap-2\",\n          // Control first (default): switch before label\n          // Label first: label before switch using flex-row-reverse\n          !controlFirst && \"flex-row-reverse justify-end\",\n          disabled ? \"cursor-not-allowed opacity-50\" : \"cursor-pointer\",\n          className,\n        )}\n      >\n        <BaseSwitch.Root\n          ref={ref}\n          checked={checked}\n          disabled={disabled}\n          onCheckedChange={onCheckedChange}\n          nativeButton\n          render={(rootProps, state) => {\n            const {\n              ref: rootRef,\n              className: baseClassName,\n              role: baseRole,\n              \"aria-checked\": _ariaChecked,\n              \"aria-pressed\": _ariaPressed,\n              ...restRootProps\n            } = rootProps as typeof rootProps & {\n              ref?: Ref<HTMLButtonElement>;\n              className?: string;\n              role?: string;\n              \"aria-checked\"?: boolean;\n              \"aria-pressed\"?: boolean;\n            };\n\n            const isNeutral = variant === \"neutral\";\n\n            // Squircle-aware border-radius (used by both variants)\n            const squircleRadius =\n              \"rounded-[5px] supports-[corner-shape:squircle]:rounded-[10px] [corner-shape:squircle]\";\n\n            // Size styles matching Kyle's stratus implementation\n            const sizeStyles = {\n              sm: { track: \"h-4 w-8\", thumb: \"w-4\", slide: \"left-4\" },\n              base: { track: \"h-4.5 w-9\", thumb: \"w-4.5\", slide: \"left-4.5\" },\n              lg: { track: \"h-5 w-10\", thumb: \"w-5\", slide: \"left-5\" },\n            };\n            const s = sizeStyles[size];\n\n            // Track colors based on variant\n            const trackColors = isNeutral\n              ? state.checked\n                ? \"bg-neutral-500 dark:bg-reki-base ring-neutral-600 dark:ring-neutral-700\"\n                : \"bg-neutral-150 dark:bg-reki-base ring-reki-hairline\"\n              : state.checked\n                ? \"bg-blue-500 dark:bg-blue-600 ring-blue-600 dark:ring-blue-500\"\n                : \"bg-neutral-200 dark:bg-neutral-700 ring-neutral-300 dark:ring-neutral-600\";\n\n            // Thumb colors based on variant\n            const thumbColors = isNeutral\n              ? state.checked\n                ? \"bg-reki-base dark:bg-neutral-400\"\n                : \"bg-reki-base dark:bg-neutral-850\"\n              : state.checked\n                ? \"bg-reki-base dark:bg-blue-300\"\n                : \"bg-reki-base dark:bg-neutral-850\";\n\n            const trackClassName = cn(\n              \"relative inline-flex items-center ring cursor-pointer border-none p-0\",\n              \"focus:outline-none focus:ring-reki-focus/50 focus-visible:ring-2 focus-visible:ring-reki-brand\",\n              \"transition-colors duration-150 ease-out motion-reduce:transition-none\",\n              \"disabled:cursor-not-allowed disabled:opacity-50\",\n              s.track,\n              squircleRadius,\n              trackColors,\n              baseClassName,\n            );\n\n            const thumbClassName = cn(\n              \"absolute top-0 bottom-0 shadow-[0_0_1px_0.5px_var(--color-reki-shadow-edge),0_1px_2px_var(--color-reki-shadow-drop)]\",\n              s.thumb,\n              squircleRadius,\n              thumbColors,\n              \"transition-all duration-150 ease-out motion-reduce:transition-none\",\n              state.checked ? s.slide : \"left-0\",\n            );\n\n            const role = baseRole ?? \"switch\";\n            const checkedA11yProps =\n              role === \"switch\"\n                ? { \"aria-checked\": state.checked }\n                : { \"aria-pressed\": state.checked };\n\n            return (\n              <button\n                {...restRootProps}\n                ref={rootRef}\n                data-reki-component=\"Switch\"\n                data-reki-part=\"item\"\n                type=\"button\"\n                role={role}\n                {...checkedA11yProps}\n                aria-busy={transitioning || undefined}\n                className={trackClassName}\n              >\n                <div className={thumbClassName} />\n              </button>\n            );\n          }}\n        />\n        <span className=\"text-base font-medium text-reki-default\">{label}</span>\n      </label>\n    );\n  },\n);\n\nSwitchItem.displayName = \"Switch.Item\";\n\n// Switch.Legend — composable legend sub-component for Switch.Group\nfunction SwitchLegend({ children, className }: SwitchLegendProps) {\n  return (\n    <Fieldset.Legend\n      className={cn(\"text-base font-medium text-reki-default\", className)}\n    >\n      {children}\n    </Fieldset.Legend>\n  );\n}\n\nSwitchLegend.displayName = \"Switch.Legend\";\n\n// Switch.Group with built-in Fieldset\nfunction SwitchGroup({\n  legend,\n  children,\n  error,\n  description,\n  disabled,\n  controlFirst = true,\n  className,\n}: SwitchGroupProps) {\n  return (\n    <SwitchGroupContext.Provider value={{ controlFirst }}>\n      <Fieldset.Root\n        className={cn(\"flex flex-col gap-4\", className)}\n        disabled={disabled}\n      >\n        {legend && (\n          <Fieldset.Legend className=\"text-base font-medium text-reki-default\">\n            {legend}\n          </Fieldset.Legend>\n        )}\n        <div className=\"flex flex-col gap-2\">{children}</div>\n        {error && <p className=\"text-sm text-reki-danger\">{error}</p>}\n        {description && (\n          <p className=\"text-sm text-reki-subtle\">{description}</p>\n        )}\n      </Fieldset.Root>\n    </SwitchGroupContext.Provider>\n  );\n}\n\n// Compound component\nexport const Switch = Object.assign(SwitchBase, {\n  Item: SwitchItem,\n  Group: SwitchGroup,\n  Legend: SwitchLegend,\n});\n\nSwitch.displayName = \"Switch\";\n"],"names":["REKI_SWITCH_VARIANTS","REKI_SWITCH_DEFAULT_VARIANTS","SwitchGroupContext","createContext","SwitchBase","forwardRef","className","checked","disabled","size","variant","label","labelTooltip","required","controlFirst","onCheckedChange","transitioning","id","props","ref","ariaLabelFallback","switchControl","jsx","BaseSwitch.Root","rootProps","state","rootRef","baseClassName","baseRole","_ariaChecked","_ariaPressed","restRootProps","isNeutral","squircleRadius","s","trackColors","thumbColors","trackClassName","cn","thumbClassName","role","checkedA11yProps","Field","SwitchItem","useContext","jsxs","SwitchLegend","children","Fieldset.Legend","SwitchGroup","legend","error","description","Fieldset.Root","Switch"],"mappings":"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"}

package/dist/chunks/table-mwcmwp6a80zvyrxw.js

@@ -0,0 +1,208 @@
+"use client";
+import { jsx as r } from "react/jsx-runtime";
+import { forwardRef as l } from "react";
+import { c as s } from "./cn-ct4n7r74mh8y0f48.js";
+import { r as u } from "./resolve-variant-t8jcltsizeg29ege.js";
+import { C as k } from "./checkbox-g2661n3eodgoispq.js";
+const h = {
+  layout: {
+    auto: {
+      classes: "",
+      description: "Auto table layout - columns resize based on content"
+    },
+    fixed: {
+      classes: "table-fixed",
+      description: "Fixed table layout - columns have equal width, controlled via colgroup"
+    }
+  },
+  variant: {
+    default: {
+      classes: "",
+      description: "Default row variant"
+    },
+    selected: {
+      classes: "bg-reki-tint",
+      description: "Selected row variant"
+    }
+  },
+  sticky: {
+    left: {
+      classes: "sticky left-0",
+      description: "Pin column to the left edge of the scroll container"
+    },
+    right: {
+      classes: "sticky right-0",
+      description: "Pin column to the right edge of the scroll container"
+    }
+  }
+}, N = (e, a) => {
+  const t = u(h.sticky, e, "left").classes, o = a === "head" ? "z-2" : "z-1", n = e === "right" ? "before:-left-6" : "before:-right-6", i = "before:pointer-events-none before:absolute before:inset-y-0 before:w-6";
+  return a === "cell" ? s(t, o, "bg-reki-base", i, n, e === "right" ? "before:bg-gradient-to-r before:from-transparent before:to-reki-base" : "before:bg-gradient-to-l before:from-transparent before:to-reki-base") : s(t, o, "bg-reki-base group-data-[compact]/header:bg-reki-elevated", i, n, e === "right" ? "before:bg-gradient-to-r before:from-transparent before:to-reki-base group-data-[compact]/header:before:to-reki-elevated" : "before:bg-gradient-to-l before:from-transparent before:to-reki-base group-data-[compact]/header:before:to-reki-elevated");
+}, m = {
+  layout: "auto",
+  variant: "default"
+}, y = l(({ layout: e = "auto", ...a }, t) => {
+  const o = s(
+    "isolate w-full",
+    // isolate creates a stacking context so z-0/z-1/z-2 never leak out
+    u(h.layout, e, m.layout).classes,
+    "[&_td]:border-b [&_td]:border-reki-fill [&_tr:last-child_td]:border-b-0",
+    // Row border
+    "[&_td]:p-3",
+    // Cell padding
+    "[&_th]:border-b [&_th]:border-reki-fill [&_th]:p-3 [&_th]:font-semibold [&_th]:text-base",
+    // Header styles
+    "[&_th]:bg-reki-base",
+    // Header background color
+    "text-base text-left text-reki-default",
+    a.className
+  );
+  return /* @__PURE__ */ r("table", { ref: t, ...a, className: o });
+}), T = l(({ variant: e = "default", sticky: a, ...t }, o) => {
+  const n = e === "compact", i = s(
+    "group/header",
+    n && "[&_th]:bg-reki-elevated [&_th]:py-2 text-xs text-reki-strong",
+    a && "[&_th]:sticky [&_th]:top-0 [&_th]:z-1",
+    t.className
+  );
+  return /* @__PURE__ */ r(
+    "thead",
+    {
+      ref: o,
+      ...t,
+      className: i,
+      ...n && { "data-compact": "" }
+    }
+  );
+}), g = l(({ sticky: e, ...a }, t) => {
+  const o = s(
+    "group relative",
+    e && N(e, "head"),
+    a.className
+  );
+  return /* @__PURE__ */ r("th", { ref: t, ...a, className: o });
+}), v = l(({ variant: e = m.variant, ...a }, t) => {
+  const o = s(
+    u(h.variant, e, m.variant).classes,
+    a.className
+  );
+  return /* @__PURE__ */ r("tr", { ref: t, ...a, className: o });
+}), _ = l((e, a) => /* @__PURE__ */ r("tbody", { ref: a, ...e })), p = l(({ sticky: e, ...a }, t) => {
+  const o = s(
+    e && N(e, "cell"),
+    a.className
+  );
+  return /* @__PURE__ */ r("td", { ref: t, ...a, className: o });
+}), C = l((e, a) => /* @__PURE__ */ r("tfoot", { ref: a, ...e })), x = l((e, a) => /* @__PURE__ */ r(
+  "button",
+  {
+    ref: a,
+    ...e,
+    type: "button",
+    "aria-label": "Resize column",
+    className: s(
+      "invisible h-full group-hover:visible",
+      // Make the handle invisible by default
+      "w-[10px]",
+      // Hitting area
+      "flex items-center justify-center",
+      // Center the handle
+      "cursor-col-resize touch-none select-none",
+      // Prevent selection and touch events
+      "absolute top-0 right-0",
+      // Position the handle
+      "m-0 bg-reki-base p-0",
+      // Override the stratus button styles
+      "focus-visible:ring-2 focus-visible:ring-reki-brand"
+      // Consistent keyboard focus styling
+    ),
+    children: /* @__PURE__ */ r("span", { className: "h-5 w-[2px] rounded bg-reki-hairline" })
+  }
+)), R = l(
+  ({
+    checked: e,
+    indeterminate: a,
+    onCheckedChange: t,
+    onValueChange: o,
+    label: n,
+    disabled: i,
+    ...c
+  }, d) => /* @__PURE__ */ r(
+    p,
+    {
+      ref: d,
+      ...c,
+      className: s("w-10 leading-none", c.className),
+      children: /* @__PURE__ */ r(
+        k,
+        {
+          checked: e,
+          indeterminate: a,
+          onCheckedChange: (b, f) => {
+            t?.(b, f), o?.(b);
+          },
+          "aria-label": n ?? "Select row",
+          disabled: i,
+          className: "relative before:absolute before:-inset-3 before:content-['']"
+        }
+      )
+    }
+  )
+), w = l(
+  ({
+    checked: e,
+    indeterminate: a,
+    onCheckedChange: t,
+    onValueChange: o,
+    label: n,
+    disabled: i,
+    ...c
+  }, d) => /* @__PURE__ */ r(
+    g,
+    {
+      ref: d,
+      ...c,
+      className: s("w-10 leading-none", c.className),
+      children: /* @__PURE__ */ r(
+        k,
+        {
+          checked: e,
+          indeterminate: a,
+          onCheckedChange: (b, f) => {
+            t?.(b, f), o?.(b);
+          },
+          "aria-label": n ?? "Select all rows",
+          disabled: i,
+          className: "relative before:absolute before:-inset-3 before:content-['']"
+        }
+      )
+    }
+  )
+);
+y.displayName = "Table";
+_.displayName = "Table.Body";
+g.displayName = "Table.Head";
+v.displayName = "Table.Row";
+p.displayName = "Table.Cell";
+C.displayName = "Table.Footer";
+T.displayName = "Table.Header";
+x.displayName = "Table.ResizeHandle";
+R.displayName = "Table.CheckCell";
+w.displayName = "Table.CheckHead";
+const F = Object.assign(y, {
+  Header: T,
+  Head: g,
+  Row: v,
+  Body: _,
+  Cell: p,
+  CheckCell: R,
+  CheckHead: w,
+  Footer: C,
+  ResizeHandle: x
+});
+export {
+  m as R,
+  F as T,
+  h as a
+};
+//# sourceMappingURL=table-mwcmwp6a80zvyrxw.js.map

package/dist/chunks/table-mwcmwp6a80zvyrxw.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"table-mwcmwp6a80zvyrxw.js","sources":["../../src/components/table/table.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport { cn } from \"../../utils\";\nimport { resolveVariant } from \"../../utils/resolve-variant\";\nimport { Checkbox, type CheckboxChangeEventDetails } from \"../checkbox\";\n\n/** Table layout and row variant definitions mapping names to their Tailwind classes. */\nexport const REKI_TABLE_VARIANTS = {\n  layout: {\n    auto: {\n      classes: \"\",\n      description: \"Auto table layout - columns resize based on content\",\n    },\n    fixed: {\n      classes: \"table-fixed\",\n      description:\n        \"Fixed table layout - columns have equal width, controlled via colgroup\",\n    },\n  },\n  variant: {\n    default: {\n      classes: \"\",\n      description: \"Default row variant\",\n    },\n    selected: {\n      classes: \"bg-reki-tint\",\n      description: \"Selected row variant\",\n    },\n  },\n  sticky: {\n    left: {\n      classes: \"sticky left-0\",\n      description: \"Pin column to the left edge of the scroll container\",\n    },\n    right: {\n      classes: \"sticky right-0\",\n      description: \"Pin column to the right edge of the scroll container\",\n    },\n  },\n} as const;\n\nexport type RekiTableStickyColumn = keyof typeof REKI_TABLE_VARIANTS.sticky;\n\n/**\n * Shared sticky-column styles for `<th>` and `<td>`.\n *\n * - Opaque background so scrolling content doesn't show through.\n * - Gradient fade on the inner edge so the sticky boundary isn't a hard clip.\n * - z-index kept to z-0/z-1/z-2 within the table's `isolate` stacking context:\n *   - `z-0` — normal cells (default)\n *   - `z-1` — sticky body cells (`<td>`)\n *   - `z-2` — sticky header cells (`<th>`) so they sit above sticky body cells\n *\n * Header cells use `:has()` to detect if they're in a compact header (which has\n * `bg-reki-elevated`) and adjust both the background and gradient fade colors.\n */\nconst stickyColumnClasses = (\n  side: RekiTableStickyColumn,\n  /** \"head\" renders at z-2, \"cell\" at z-1 */\n  element: \"head\" | \"cell\",\n) => {\n  const base = resolveVariant(REKI_TABLE_VARIANTS.sticky, side, \"left\").classes;\n  const z = element === \"head\" ? \"z-2\" : \"z-1\";\n\n  const fadePosition = side === \"right\" ? \"before:-left-6\" : \"before:-right-6\";\n  const fadeBase =\n    \"before:pointer-events-none before:absolute before:inset-y-0 before:w-6\";\n\n  if (element === \"cell\") {\n    // Body cells always use reki-base\n    const fade =\n      side === \"right\"\n        ? \"before:bg-gradient-to-r before:from-transparent before:to-reki-base\"\n        : \"before:bg-gradient-to-l before:from-transparent before:to-reki-base\";\n    return cn(base, z, \"bg-reki-base\", fadeBase, fadePosition, fade);\n  }\n\n  // Header cells: use reki-base by default, reki-elevated when in compact header\n  // The compact header applies a data attribute we can target with :has()\n  const bg = \"bg-reki-base group-data-[compact]/header:bg-reki-elevated\";\n  const fade =\n    side === \"right\"\n      ? \"before:bg-gradient-to-r before:from-transparent before:to-reki-base group-data-[compact]/header:before:to-reki-elevated\"\n      : \"before:bg-gradient-to-l before:from-transparent before:to-reki-base group-data-[compact]/header:before:to-reki-elevated\";\n\n  return cn(base, z, bg, fadeBase, fadePosition, fade);\n};\n\nexport const REKI_TABLE_DEFAULT_VARIANTS = {\n  layout: \"auto\",\n  variant: \"default\",\n} as const;\n\nexport type RekiTableRowVariant = keyof typeof REKI_TABLE_VARIANTS.variant;\nexport type RekiTableLayout = keyof typeof REKI_TABLE_VARIANTS.layout;\n\n/**\n * Table root — applies layout, borders, padding, and header styles.\n *\n * @example\n * ```tsx\n * <Table layout=\"fixed\">\n *   <Table.Header>\n *     <Table.Row>\n *       <Table.Head>Name</Table.Head>\n *       <Table.Head>Status</Table.Head>\n *     </Table.Row>\n *   </Table.Header>\n *   <Table.Body>\n *     <Table.Row>\n *       <Table.Cell>Worker A</Table.Cell>\n *       <Table.Cell>Active</Table.Cell>\n *     </Table.Row>\n *   </Table.Body>\n * </Table>\n * ```\n */\nconst TableRoot = forwardRef<\n  HTMLTableElement,\n  React.HTMLAttributes<HTMLTableElement> & {\n    /**\n     * Table layout algorithm.\n     * - `\"auto\"` — columns resize based on content\n     * - `\"fixed\"` — equal-width columns, controlled via `<colgroup>`\n     * @default \"auto\"\n     */\n    layout?: RekiTableLayout;\n  }\n>(({ layout = \"auto\", ...props }, ref) => {\n  const className = cn(\n    \"isolate w-full\", // isolate creates a stacking context so z-0/z-1/z-2 never leak out\n    resolveVariant(REKI_TABLE_VARIANTS.layout, layout, REKI_TABLE_DEFAULT_VARIANTS.layout).classes,\n    \"[&_td]:border-b [&_td]:border-reki-fill [&_tr:last-child_td]:border-b-0\", // Row border\n    \"[&_td]:p-3\", // Cell padding\n    \"[&_th]:border-b [&_th]:border-reki-fill [&_th]:p-3 [&_th]:font-semibold [&_th]:text-base\", // Header styles\n    \"[&_th]:bg-reki-base\", // Header background color\n    \"text-base text-left text-reki-default\",\n    props.className,\n  );\n\n  return <table ref={ref} {...props} className={className} />;\n});\n\nconst TableHeader = forwardRef<\n  HTMLTableSectionElement,\n  React.HTMLAttributes<HTMLTableSectionElement> & {\n    variant?: \"default\" | \"compact\";\n    /**\n     * Make the header row stick to the top of the scroll container.\n     * Requires the table's parent to have a constrained height with\n     * `overflow-y: auto`.\n     */\n    sticky?: boolean;\n  }\n>(({ variant = \"default\", sticky, ...props }, ref) => {\n  const isCompact = variant === \"compact\";\n  const className = cn(\n    \"group/header\",\n    isCompact && \"[&_th]:bg-reki-elevated [&_th]:py-2 text-xs text-reki-strong\",\n    sticky && \"[&_th]:sticky [&_th]:top-0 [&_th]:z-1\",\n    props.className,\n  );\n\n  return (\n    <thead\n      ref={ref}\n      {...props}\n      className={className}\n      {...(isCompact && { \"data-compact\": \"\" })}\n    />\n  );\n});\n\nconst TableHead = forwardRef<\n  HTMLTableCellElement,\n  React.HTMLAttributes<HTMLTableCellElement> & {\n    /**\n     * Pin this header cell to the left or right edge of the scroll container.\n     * Adds `position: sticky`, an opaque background, and a gradient fade on the\n     * inner edge. Sticky header columns render at `z-2` so they sit above both\n     * normal cells and sticky body cells (`z-1`).\n     */\n    sticky?: RekiTableStickyColumn;\n  }\n>(({ sticky, ...props }, ref) => {\n  const className = cn(\n    \"group relative\",\n    sticky && stickyColumnClasses(sticky, \"head\"),\n    props.className,\n  );\n  return <th ref={ref} {...props} className={className} />;\n});\n\nconst TableRow = forwardRef<\n  HTMLTableRowElement,\n  React.HTMLAttributes<HTMLTableRowElement> & {\n    variant?: RekiTableRowVariant;\n  }\n>(({ variant = REKI_TABLE_DEFAULT_VARIANTS.variant, ...props }, ref) => {\n  const className = cn(\n    resolveVariant(REKI_TABLE_VARIANTS.variant, variant, REKI_TABLE_DEFAULT_VARIANTS.variant).classes,\n    props.className,\n  );\n\n  return <tr ref={ref} {...props} className={className} />;\n});\n\nconst TableBody = forwardRef<\n  HTMLTableSectionElement,\n  React.HTMLAttributes<HTMLTableSectionElement>\n>((props, ref) => {\n  return <tbody ref={ref} {...props} />;\n});\n\nconst TableCell = forwardRef<\n  HTMLTableCellElement,\n  React.TdHTMLAttributes<HTMLTableCellElement> & {\n    /**\n     * Pin this cell to the left or right edge of the scroll container.\n     * Adds `position: sticky`, an opaque background, and a gradient fade on\n     * the inner edge. Requires the table's parent to have `overflow-x: auto`.\n     */\n    sticky?: RekiTableStickyColumn;\n  }\n>(({ sticky, ...props }, ref) => {\n  const className = cn(\n    sticky && stickyColumnClasses(sticky, \"cell\"),\n    props.className,\n  );\n  return <td ref={ref} {...props} className={className} />;\n});\n\nconst TableFooter = forwardRef<\n  HTMLTableSectionElement,\n  React.HTMLAttributes<HTMLTableSectionElement>\n>((props, ref) => {\n  return <tfoot ref={ref} {...props} />;\n});\n\nconst TableResizeHandle = forwardRef<\n  HTMLButtonElement,\n  React.HTMLAttributes<HTMLButtonElement>\n>((props, ref) => {\n  return (\n    <button\n      ref={ref}\n      {...props}\n      type=\"button\"\n      aria-label=\"Resize column\"\n      className={cn(\n        \"invisible h-full group-hover:visible\", // Make the handle invisible by default\n        \"w-[10px]\", // Hitting area\n        \"flex items-center justify-center\", // Center the handle\n        \"cursor-col-resize touch-none select-none\", // Prevent selection and touch events\n        \"absolute top-0 right-0\", // Position the handle\n        \"m-0 bg-reki-base p-0\", // Override the stratus button styles\n        \"focus-visible:ring-2 focus-visible:ring-reki-brand\", // Consistent keyboard focus styling\n      )}\n    >\n      <span className=\"h-5 w-[2px] rounded bg-reki-hairline\" />\n    </button>\n  );\n});\n\n/**\n * Special cell that makes the entire cell area a hit target for the checkbox.\n */\n\nconst TableCheckCell = forwardRef<\n  HTMLTableCellElement,\n  React.TdHTMLAttributes<HTMLTableCellElement> & {\n    checked?: boolean;\n    indeterminate?: boolean;\n    /**\n     * Called when the checkbox's checked state changes. The optional second\n     * argument exposes event details from the underlying Checkbox, matching\n     * the Checkbox component's signature.\n     */\n    onCheckedChange?: (\n      checked: boolean,\n      eventDetails?: CheckboxChangeEventDetails,\n    ) => void;\n    /** @deprecated Use `onCheckedChange` instead. Will be removed in a future major version. */\n    onValueChange?: (checked: boolean) => void;\n    label?: string;\n    disabled?: boolean;\n  }\n>(\n  (\n    {\n      checked,\n      indeterminate,\n      onCheckedChange,\n      onValueChange,\n      label,\n      disabled,\n      ...props\n    },\n    ref,\n  ) => {\n    return (\n      <TableCell\n        ref={ref}\n        {...props}\n        className={cn(\"w-10 leading-none\", props.className)}\n      >\n        <Checkbox\n          checked={checked}\n          indeterminate={indeterminate}\n          onCheckedChange={(newChecked, eventDetails) => {\n            onCheckedChange?.(newChecked, eventDetails);\n            onValueChange?.(newChecked);\n          }}\n          aria-label={label ?? \"Select row\"}\n          disabled={disabled}\n          className=\"relative before:absolute before:-inset-3 before:content-['']\"\n        />\n      </TableCell>\n    );\n  },\n);\n\nconst TableCheckHead = forwardRef<\n  HTMLTableCellElement,\n  React.ThHTMLAttributes<HTMLTableCellElement> & {\n    checked?: boolean;\n    indeterminate?: boolean;\n    /**\n     * Called when the checkbox's checked state changes. The optional second\n     * argument exposes event details from the underlying Checkbox, matching\n     * the Checkbox component's signature.\n     */\n    onCheckedChange?: (\n      checked: boolean,\n      eventDetails?: CheckboxChangeEventDetails,\n    ) => void;\n    /** @deprecated Use `onCheckedChange` instead. Will be removed in a future major version. */\n    onValueChange?: (checked: boolean) => void;\n    label?: string;\n    disabled?: boolean;\n  }\n>(\n  (\n    {\n      checked,\n      indeterminate,\n      onCheckedChange,\n      onValueChange,\n      label,\n      disabled,\n      ...props\n    },\n    ref,\n  ) => {\n    return (\n      <TableHead\n        ref={ref}\n        {...props}\n        className={cn(\"w-10 leading-none\", props.className)}\n      >\n        <Checkbox\n          checked={checked}\n          indeterminate={indeterminate}\n          onCheckedChange={(newChecked, eventDetails) => {\n            onCheckedChange?.(newChecked, eventDetails);\n            onValueChange?.(newChecked);\n          }}\n          aria-label={label ?? \"Select all rows\"}\n          disabled={disabled}\n          className=\"relative before:absolute before:-inset-3 before:content-['']\"\n        />\n      </TableHead>\n    );\n  },\n);\n\nTableRoot.displayName = \"Table\";\nTableBody.displayName = \"Table.Body\";\nTableHead.displayName = \"Table.Head\";\nTableRow.displayName = \"Table.Row\";\nTableCell.displayName = \"Table.Cell\";\nTableFooter.displayName = \"Table.Footer\";\nTableHeader.displayName = \"Table.Header\";\nTableResizeHandle.displayName = \"Table.ResizeHandle\";\nTableCheckCell.displayName = \"Table.CheckCell\";\nTableCheckHead.displayName = \"Table.CheckHead\";\n\n/**\n * Table — semantic HTML table with styled rows, cells, and selection support.\n *\n * Compound component: `Table` (Root), `.Header`, `.Head`, `.Body`, `.Row`,\n * `.Cell`, `.Footer`, `.CheckCell`, `.CheckHead`, `.ResizeHandle`.\n *\n * @example\n * ```tsx\n * <Table>\n *   <Table.Header>\n *     <Table.Row>\n *       <Table.CheckHead checked={allSelected} onCheckedChange={toggleAll} />\n *       <Table.Head>Name</Table.Head>\n *     </Table.Row>\n *   </Table.Header>\n *   <Table.Body>\n *     {rows.map((row) => (\n *       <Table.Row key={row.id} variant={selected.has(row.id) ? \"selected\" : \"default\"}>\n *         <Table.CheckCell checked={selected.has(row.id)} onCheckedChange={() => toggle(row.id)} />\n *         <Table.Cell>{row.name}</Table.Cell>\n *       </Table.Row>\n *     ))}\n *   </Table.Body>\n * </Table>\n * ```\n */\nexport const Table = Object.assign(TableRoot, {\n  Header: TableHeader,\n  Head: TableHead,\n  Row: TableRow,\n  Body: TableBody,\n  Cell: TableCell,\n  CheckCell: TableCheckCell,\n  CheckHead: TableCheckHead,\n  Footer: TableFooter,\n  ResizeHandle: TableResizeHandle,\n});\n"],"names":["REKI_TABLE_VARIANTS","stickyColumnClasses","side","element","base","resolveVariant","z","fadePosition","fadeBase","cn","REKI_TABLE_DEFAULT_VARIANTS","TableRoot","forwardRef","layout","props","ref","className","jsx","TableHeader","variant","sticky","isCompact","TableHead","TableRow","TableBody","TableCell","TableFooter","TableResizeHandle","TableCheckCell","checked","indeterminate","onCheckedChange","onValueChange","label","disabled","Checkbox","newChecked","eventDetails","TableCheckHead","Table"],"mappings":"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"}