@cloudflare/kumo 1.0.0

package/dist/switch-D4duMhJ0.js

@@ -0,0 +1,257 @@
+"use client";
+import { jsx as o, jsxs as R } from "react/jsx-runtime";
+import { forwardRef as _, createContext as U, useContext as B } from "react";
+import { c as u } from "./cn-Bhsu1vx2.js";
+import { F as D } from "./field-V3J0Ql_V.js";
+import { N as G, O as K, aM as F, aN as I } from "./vendor-base-ui-DWIDNgE1.js";
+const y = {
+  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 appearance"
+    },
+    error: {
+      classes: "ring-kumo-danger",
+      description: "Error state for validation failures"
+    }
+  }
+}, C = {
+  size: "base",
+  variant: "default"
+};
+function A({
+  size: a = C.size,
+  variant: l = C.variant
+} = {}) {
+  return u(
+    y.size[a].classes,
+    y.variant[l].classes
+  );
+}
+const P = U({
+  controlFirst: !0
+}), T = _(
+  ({
+    className: a,
+    checked: l,
+    disabled: e,
+    size: d = "base",
+    variant: r = "default",
+    label: t,
+    labelTooltip: h,
+    required: n,
+    controlFirst: f = !0,
+    onCheckedChange: k,
+    transitioning: i,
+    ...c
+  }, w) => {
+    const b = typeof t == "string" ? t : "Switch", m = /* @__PURE__ */ o(
+      F,
+      {
+        ref: w,
+        checked: l,
+        disabled: e,
+        onCheckedChange: k,
+        nativeButton: !0,
+        render: (N, s) => {
+          const {
+            ref: g,
+            className: x,
+            role: p,
+            "aria-checked": v,
+            "aria-pressed": q,
+            ...j
+          } = N, L = u(
+            "interactive flex items-center gap-2 rounded-full border border-transparent bg-kumo-recessed p-1 transition-colors",
+            A({ size: d, variant: r }),
+            {
+              "bg-kumo-brand": s.checked && !e && r !== "error",
+              "bg-kumo-danger": s.checked && !e && r === "error",
+              "hover:bg-kumo-brand-hover": s.checked && !i && !e && r !== "error",
+              "hover:bg-kumo-danger/90": s.checked && !i && !e && r === "error",
+              "hover:bg-kumo-interact": !s.checked && !i && !e,
+              "cursor-not-allowed opacity-50": e
+            },
+            i ? "cursor-wait" : e ? "" : "cursor-pointer",
+            a,
+            x
+          ), S = c.role ?? p ?? "switch", O = S === "switch" ? { "aria-checked": s.checked } : { "aria-pressed": s.checked };
+          return /* @__PURE__ */ o(
+            "button",
+            {
+              ...j,
+              ...c,
+              ref: g,
+              type: "button",
+              role: S,
+              ...O,
+              "aria-busy": i || void 0,
+              "aria-label": c["aria-label"] ?? b,
+              className: L,
+              children: /* @__PURE__ */ o(
+                I,
+                {
+                  className: u(
+                    "pointer-events-none aspect-square h-full rounded-full bg-white transition-all",
+                    {
+                      "translate-x-full rtl:translate-x-[-100%]": s.checked
+                    }
+                  )
+                }
+              )
+            }
+          );
+        }
+      }
+    );
+    return t ? /* @__PURE__ */ o(
+      D,
+      {
+        label: t,
+        required: n,
+        labelTooltip: h,
+        controlFirst: f,
+        children: m
+      }
+    ) : m;
+  }
+);
+T.displayName = "Switch";
+const z = _(
+  ({
+    className: a,
+    checked: l,
+    disabled: e,
+    size: d = "base",
+    variant: r = "default",
+    label: t,
+    onCheckedChange: h,
+    transitioning: n
+  }, f) => {
+    const { controlFirst: k } = B(P);
+    return /* @__PURE__ */ R(
+      "label",
+      {
+        className: u(
+          "relative inline-flex items-center gap-2",
+          // Control first (default): switch before label
+          // Label first: label before switch using flex-row-reverse
+          !k && "flex-row-reverse justify-end",
+          e ? "cursor-not-allowed opacity-50" : "cursor-pointer",
+          a
+        ),
+        children: [
+          /* @__PURE__ */ o(
+            F,
+            {
+              ref: f,
+              checked: l,
+              disabled: e,
+              onCheckedChange: h,
+              nativeButton: !0,
+              render: (i, c) => {
+                const {
+                  ref: w,
+                  className: b,
+                  role: m,
+                  "aria-checked": N,
+                  "aria-pressed": s,
+                  ...g
+                } = i, x = u(
+                  "interactive flex items-center gap-2 rounded-full border border-transparent bg-kumo-recessed p-1 transition-colors",
+                  A({ size: d, variant: r }),
+                  {
+                    "bg-kumo-brand": c.checked && !e && r !== "error",
+                    "bg-kumo-danger": c.checked && !e && r === "error",
+                    "hover:bg-kumo-brand-hover": c.checked && !n && !e && r !== "error",
+                    "hover:bg-kumo-danger/90": c.checked && !n && !e && r === "error",
+                    "hover:bg-kumo-interact": !c.checked && !n && !e,
+                    "cursor-not-allowed opacity-50": e
+                  },
+                  n ? "cursor-wait" : e ? "" : "cursor-pointer",
+                  b
+                ), p = m ?? "switch", v = p === "switch" ? { "aria-checked": c.checked } : { "aria-pressed": c.checked };
+                return /* @__PURE__ */ o(
+                  "button",
+                  {
+                    ...g,
+                    ref: w,
+                    type: "button",
+                    role: p,
+                    ...v,
+                    "aria-busy": n || void 0,
+                    className: x,
+                    children: /* @__PURE__ */ o(
+                      I,
+                      {
+                        className: u(
+                          "pointer-events-none aspect-square h-full rounded-full bg-white transition-all",
+                          {
+                            "translate-x-full rtl:translate-x-[-100%]": c.checked
+                          }
+                        )
+                      }
+                    )
+                  }
+                );
+              }
+            }
+          ),
+          /* @__PURE__ */ o("span", { className: "text-base font-medium text-kumo-default", children: t })
+        ]
+      }
+    );
+  }
+);
+z.displayName = "Switch.Item";
+function M({
+  legend: a,
+  children: l,
+  error: e,
+  description: d,
+  disabled: r,
+  controlFirst: t = !0,
+  className: h
+}) {
+  return /* @__PURE__ */ o(P.Provider, { value: { controlFirst: t }, children: /* @__PURE__ */ R(
+    G,
+    {
+      className: u(
+        "flex flex-col gap-4 rounded-lg border border-kumo-line p-4",
+        h
+      ),
+      disabled: r,
+      children: [
+        /* @__PURE__ */ o(K, { className: "text-lg font-medium text-kumo-default", children: a }),
+        /* @__PURE__ */ o("div", { className: "flex flex-col gap-2", children: l }),
+        e && /* @__PURE__ */ o("p", { className: "text-sm text-kumo-danger", children: e }),
+        d && /* @__PURE__ */ o("p", { className: "text-sm text-kumo-subtle", children: d })
+      ]
+    }
+  ) });
+}
+const V = Object.assign(T, {
+  Item: z,
+  Group: M
+});
+V.displayName = "Switch";
+export {
+  y as K,
+  V as S,
+  C as a
+};
+//# sourceMappingURL=switch-D4duMhJ0.js.map

package/dist/switch-D4duMhJ0.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"switch-D4duMhJ0.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 { Field } from \"../field/field\";\nimport { Fieldset } from \"@base-ui/react/fieldset\";\n\nexport const KUMO_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 appearance\",\n    },\n    error: {\n      classes: \"ring-kumo-danger\",\n      description: \"Error state for validation failures\",\n    },\n  },\n} as const;\n\nexport const KUMO_SWITCH_DEFAULT_VARIANTS = {\n  size: \"base\",\n  variant: \"default\",\n} as const;\n\n// Derived types from KUMO_SWITCH_VARIANTS\nexport type KumoSwitchSize = keyof typeof KUMO_SWITCH_VARIANTS.size;\nexport type KumoSwitchVariant = keyof typeof KUMO_SWITCH_VARIANTS.variant;\n\nexport interface KumoSwitchVariantsProps {\n  size?: KumoSwitchSize;\n  variant?: KumoSwitchVariant;\n}\n\nexport function switchVariants({\n  size = KUMO_SWITCH_DEFAULT_VARIANTS.size,\n  variant = KUMO_SWITCH_DEFAULT_VARIANTS.variant,\n}: KumoSwitchVariantsProps = {}) {\n  return cn(\n    KUMO_SWITCH_VARIANTS.size[size].classes,\n    KUMO_SWITCH_VARIANTS.variant[variant].classes,\n  );\n}\n\n// Legacy type aliases for backwards compatibility\nexport type SwitchSize = KumoSwitchSize;\nexport type SwitchVariant = KumoSwitchVariant;\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 * Error variant (visual only, no error text):\n * ```tsx\n * <Switch label=\"Required setting\" variant=\"error\" 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\" or \"error\" for validation failures (visual only, no error text) */\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?: KumoSwitchSize;\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 */\nexport interface SwitchGroupProps {\n  /** Legend text for the group */\n  legend: string;\n  /** Child Switch.Item components */\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?: KumoSwitchSize;\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      ...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        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 mergedClassName = cn(\n            \"interactive flex items-center gap-2 rounded-full border border-transparent bg-kumo-recessed p-1 transition-colors\",\n            switchVariants({ size, variant }),\n            {\n              \"bg-kumo-brand\": state.checked && !disabled && variant !== \"error\",\n              \"bg-kumo-danger\": state.checked && !disabled && variant === \"error\",\n              \"hover:bg-kumo-brand-hover\":\n                state.checked &&\n                !transitioning &&\n                !disabled &&\n                variant !== \"error\",\n              \"hover:bg-kumo-danger/90\":\n                state.checked &&\n                !transitioning &&\n                !disabled &&\n                variant === \"error\",\n              \"hover:bg-kumo-interact\": !state.checked && !transitioning && !disabled,\n              \"cursor-not-allowed opacity-50\": disabled,\n            },\n            transitioning ? \"cursor-wait\" : !disabled ? \"cursor-pointer\" : \"\",\n            className,\n            baseClassName,\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              type=\"button\"\n              role={role}\n              {...checkedA11yProps}\n              aria-busy={transitioning || undefined}\n              aria-label={props[\"aria-label\"] ?? ariaLabelFallback}\n              className={mergedClassName}\n            >\n              <BaseSwitch.Thumb\n                className={cn(\n                  \"pointer-events-none aspect-square h-full rounded-full bg-white transition-all\",\n                  {\n                    \"translate-x-full rtl:translate-x-[-100%]\": state.checked,\n                  },\n                )}\n              />\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        className={cn(\n          \"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 mergedClassName = cn(\n              \"interactive flex items-center gap-2 rounded-full border border-transparent bg-kumo-recessed p-1 transition-colors\",\n              switchVariants({ size, variant }),\n              {\n                \"bg-kumo-brand\": state.checked && !disabled && variant !== \"error\",\n                \"bg-kumo-danger\": state.checked && !disabled && variant === \"error\",\n                \"hover:bg-kumo-brand-hover\":\n                  state.checked &&\n                  !transitioning &&\n                  !disabled &&\n                  variant !== \"error\",\n                \"hover:bg-kumo-danger/90\":\n                  state.checked &&\n                  !transitioning &&\n                  !disabled &&\n                  variant === \"error\",\n                \"hover:bg-kumo-interact\": !state.checked && !transitioning && !disabled,\n                \"cursor-not-allowed opacity-50\": disabled,\n              },\n              transitioning ? \"cursor-wait\" : !disabled ? \"cursor-pointer\" : \"\",\n              baseClassName,\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                type=\"button\"\n                role={role}\n                {...checkedA11yProps}\n                aria-busy={transitioning || undefined}\n                className={mergedClassName}\n              >\n                <BaseSwitch.Thumb\n                  className={cn(\n                    \"pointer-events-none aspect-square h-full rounded-full bg-white transition-all\",\n                    {\n                      \"translate-x-full rtl:translate-x-[-100%]\": state.checked,\n                    },\n                  )}\n                />\n              </button>\n            );\n          }}\n        />\n        <span className=\"text-base font-medium text-kumo-default\">{label}</span>\n      </label>\n    );\n  },\n);\n\nSwitchItem.displayName = \"Switch.Item\";\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(\n          \"flex flex-col gap-4 rounded-lg border border-kumo-line p-4\",\n          className,\n        )}\n        disabled={disabled}\n      >\n        <Fieldset.Legend className=\"text-lg font-medium text-kumo-default\">\n          {legend}\n        </Fieldset.Legend>\n        <div className=\"flex flex-col gap-2\">{children}</div>\n        {error && <p className=\"text-sm text-kumo-danger\">{error}</p>}\n        {description && <p className=\"text-sm text-kumo-subtle\">{description}</p>}\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});\n\nSwitch.displayName = \"Switch\";\n"],"names":["KUMO_SWITCH_VARIANTS","KUMO_SWITCH_DEFAULT_VARIANTS","switchVariants","size","variant","cn","SwitchGroupContext","createContext","SwitchBase","forwardRef","className","checked","disabled","label","labelTooltip","required","controlFirst","onCheckedChange","transitioning","props","ref","ariaLabelFallback","switchControl","jsx","BaseSwitch.Root","rootProps","state","rootRef","baseClassName","baseRole","_ariaChecked","_ariaPressed","restRootProps","mergedClassName","role","checkedA11yProps","BaseSwitch.Thumb","Field","SwitchItem","useContext","jsxs","SwitchGroup","legend","children","error","description","Fieldset.Root","Fieldset.Legend","Switch"],"mappings":"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"}

package/dist/table-KuvHGpL8.js

@@ -0,0 +1,153 @@
+"use client";
+import { jsx as t } from "react/jsx-runtime";
+import { forwardRef as o } from "react";
+import { c as n } from "./cn-Bhsu1vx2.js";
+import { C as b } from "./checkbox-BexIU_lZ.js";
+const m = {
+  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-kumo-tint",
+      description: "Selected row variant"
+    }
+  }
+}, k = {
+  layout: "auto",
+  variant: "default"
+}, p = o(({ layout: a = "auto", ...e }, s) => {
+  const l = n(
+    "w-full",
+    m.layout[a].classes,
+    "[&_tr_td]:border-b [&_tr_td]:border-kumo-fill [&_tr:last-child_td]:border-b-0",
+    // Row border
+    "[&_tr_td]:p-3",
+    // Cell padding
+    "[&_tr_th]:border-b [&_tr_th]:border-kumo-fill [&_tr_th]:p-3 [&_tr_th]:font-semibold",
+    // Header styles
+    "[&_tr_th]:bg-kumo-base",
+    // Header background color
+    "text-left text-kumo-default",
+    e.className
+  );
+  return /* @__PURE__ */ t("table", { ref: s, ...e, className: l });
+}), T = o((a, e) => /* @__PURE__ */ t("thead", { ref: e, ...a })), d = o((a, e) => {
+  const s = n("group relative", a.className);
+  return /* @__PURE__ */ t("th", { ref: e, ...a, className: s });
+}), f = o(({ variant: a = k.variant, ...e }, s) => {
+  const l = n(
+    m.variant[a].classes,
+    e.className
+  );
+  return /* @__PURE__ */ t("tr", { ref: s, ...e, className: l });
+}), h = o((a, e) => /* @__PURE__ */ t("tbody", { ref: e, ...a })), u = o((a, e) => /* @__PURE__ */ t("td", { ref: e, ...a })), N = o((a, e) => /* @__PURE__ */ t("tfoot", { ref: e, ...a })), _ = o((a, e) => /* @__PURE__ */ t(
+  "button",
+  {
+    ref: e,
+    ...a,
+    type: "button",
+    "aria-label": "Resize column",
+    className: n(
+      "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-kumo-base p-0"
+      // Override the stratus button styles
+    ),
+    children: /* @__PURE__ */ t("span", { className: "h-5 w-[2px] rounded bg-kumo-ring" })
+  }
+)), y = o(({ checked: a, onValueChange: e, label: s, disabled: l, ...c }, i) => /* @__PURE__ */ t(
+  u,
+  {
+    ref: i,
+    ...c,
+    className: n(
+      "cursor-pointer p-0 leading-none",
+      l && "cursor-default",
+      c.className
+    ),
+    onClick: (r) => {
+      r.stopPropagation(), l || e?.(!a);
+    },
+    children: /* @__PURE__ */ t(
+      b,
+      {
+        checked: a,
+        onClick: (r) => r.stopPropagation(),
+        onCheckedChange: e,
+        "aria-label": s ?? "Select row",
+        disabled: l
+      }
+    )
+  }
+)), C = o(({ checked: a, onValueChange: e, label: s, disabled: l, ...c }, i) => /* @__PURE__ */ t(
+  d,
+  {
+    ref: i,
+    ...c,
+    className: n(
+      "cursor-pointer p-0 leading-none",
+      l && "cursor-default",
+      c.className
+    ),
+    onClick: (r) => {
+      r.stopPropagation(), l || e?.(!a);
+    },
+    children: /* @__PURE__ */ t(
+      b,
+      {
+        checked: a,
+        onClick: (r) => r.stopPropagation(),
+        onCheckedChange: e,
+        "aria-label": s ?? "Select all rows",
+        disabled: l
+      }
+    )
+  }
+));
+p.displayName = "Table";
+h.displayName = "Table.Body";
+d.displayName = "Table.Head";
+f.displayName = "Table.Row";
+u.displayName = "Table.Cell";
+N.displayName = "Table.Footer";
+T.displayName = "Table.Header";
+_.displayName = "Table.ResizeHandle";
+y.displayName = "Table.CheckCell";
+C.displayName = "Table.CheckHead";
+const x = Object.assign(p, {
+  Header: T,
+  Head: d,
+  Row: f,
+  Body: h,
+  Cell: u,
+  CheckCell: y,
+  CheckHead: C,
+  Footer: N,
+  ResizeHandle: _
+});
+export {
+  k as K,
+  x as T,
+  m as a
+};
+//# sourceMappingURL=table-KuvHGpL8.js.map

package/dist/table-KuvHGpL8.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"table-KuvHGpL8.js","sources":["../src/components/table/table.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport { cn } from \"../../utils\";\nimport { Checkbox } from \"../checkbox\";\n\nexport const KUMO_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-kumo-tint\",\n      description: \"Selected row variant\",\n    },\n  },\n} as const;\n\nexport const KUMO_TABLE_DEFAULT_VARIANTS = {\n  layout: \"auto\",\n  variant: \"default\",\n} as const;\n\nexport type KumoTableRowVariant = keyof typeof KUMO_TABLE_VARIANTS.variant;\nexport type KumoTableLayout = keyof typeof KUMO_TABLE_VARIANTS.layout;\n\nconst TableRoot = forwardRef<\n  HTMLTableElement,\n  React.HTMLAttributes<HTMLTableElement> & {\n    layout?: KumoTableLayout;\n  }\n>(({ layout = \"auto\", ...props }, ref) => {\n  const className = cn(\n    \"w-full\",\n    KUMO_TABLE_VARIANTS.layout[layout].classes,\n    \"[&_tr_td]:border-b [&_tr_td]:border-kumo-fill [&_tr:last-child_td]:border-b-0\", // Row border\n    \"[&_tr_td]:p-3\", // Cell padding\n    \"[&_tr_th]:border-b [&_tr_th]:border-kumo-fill [&_tr_th]:p-3 [&_tr_th]:font-semibold\", // Header styles\n    \"[&_tr_th]:bg-kumo-base\", // Header background color\n    \"text-left text-kumo-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>((props, ref) => {\n  return <thead ref={ref} {...props} />;\n});\n\nconst TableHead = forwardRef<\n  HTMLTableCellElement,\n  React.HTMLAttributes<HTMLTableCellElement>\n>((props, ref) => {\n  const className = cn(\"group relative\", props.className);\n  return <th ref={ref} {...props} className={className} />;\n});\n\nconst TableRow = forwardRef<\n  HTMLTableRowElement,\n  React.HTMLAttributes<HTMLTableRowElement> & {\n    variant?: KumoTableRowVariant;\n  }\n>(({ variant = KUMO_TABLE_DEFAULT_VARIANTS.variant, ...props }, ref) => {\n  const className = cn(\n    KUMO_TABLE_VARIANTS.variant[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>((props, ref) => {\n  return <td ref={ref} {...props} />;\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-kumo-base p-0\", // Override the stratus button styles\n      )}\n    >\n      <span className=\"h-5 w-[2px] rounded bg-kumo-ring\" />\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    onValueChange?: (checked: boolean) => void;\n    label?: string;\n    disabled?: boolean;\n  }\n>(({ checked, onValueChange, label, disabled, ...props }, ref) => {\n  return (\n    <TableCell\n      ref={ref}\n      {...props}\n      className={cn(\n        \"cursor-pointer p-0 leading-none\",\n        disabled && \"cursor-default\",\n        props.className,\n      )}\n      onClick={(e) => {\n        e.stopPropagation();\n        if (!disabled) {\n          onValueChange?.(!checked);\n        }\n      }}\n    >\n      <Checkbox\n        checked={checked}\n        onClick={(e) => e.stopPropagation()}\n        onCheckedChange={onValueChange}\n        aria-label={label ?? \"Select row\"}\n        disabled={disabled}\n      />\n    </TableCell>\n  );\n});\n\nconst TableCheckHead = forwardRef<\n  HTMLTableCellElement,\n  React.ThHTMLAttributes<HTMLTableCellElement> & {\n    checked?: boolean;\n    onValueChange?: (checked: boolean) => void;\n    label?: string;\n    disabled?: boolean;\n  }\n>(({ checked, onValueChange, label, disabled, ...props }, ref) => {\n  return (\n    <TableHead\n      ref={ref}\n      {...props}\n      className={cn(\n        \"cursor-pointer p-0 leading-none\",\n        disabled && \"cursor-default\",\n        props.className,\n      )}\n      onClick={(e) => {\n        e.stopPropagation();\n        if (!disabled) {\n          onValueChange?.(!checked);\n        }\n      }}\n    >\n      <Checkbox\n        checked={checked}\n        onClick={(e) => e.stopPropagation()}\n        onCheckedChange={onValueChange}\n        aria-label={label ?? \"Select all rows\"}\n        disabled={disabled}\n      />\n    </TableHead>\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\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":["KUMO_TABLE_VARIANTS","KUMO_TABLE_DEFAULT_VARIANTS","TableRoot","forwardRef","layout","props","ref","className","cn","jsx","TableHeader","TableHead","TableRow","variant","TableBody","TableCell","TableFooter","TableResizeHandle","TableCheckCell","checked","onValueChange","label","disabled","e","Checkbox","TableCheckHead","Table"],"mappings":"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"}

package/dist/tabs-lQup-IbT.js

@@ -0,0 +1,85 @@
+"use client";
+import { jsxs as d, jsx as r } from "react/jsx-runtime";
+import { c as a } from "./cn-Bhsu1vx2.js";
+import { aO as k, aP as T, aQ as w, aR as N } from "./vendor-base-ui-DWIDNgE1.js";
+const V = {
+  variant: "segmented"
+};
+function z({
+  tabs: u,
+  value: n,
+  selectedValue: m,
+  onValueChange: c,
+  activateOnFocus: b,
+  className: f,
+  listClassName: g,
+  indicatorClassName: v,
+  variant: i = V.variant
+}) {
+  const o = u ?? [];
+  if (o.length === 0)
+    return null;
+  const h = o[0]?.value, l = n !== void 0, p = {
+    value: l ? n : void 0,
+    defaultValue: l ? void 0 : m ?? h
+  }, t = i === "segmented", s = i === "underline";
+  return /* @__PURE__ */ d(
+    k,
+    {
+      ...p,
+      className: a("relative min-w-0 font-medium", f),
+      onValueChange: (e) => {
+        const x = String(e);
+        c?.(x);
+      },
+      children: [
+        t && /* @__PURE__ */ r("div", { className: "absolute inset-x-0 top-1/2 -z-10 h-8.5 -translate-y-1/2 rounded-lg bg-kumo-tint" }),
+        /* @__PURE__ */ d(
+          T,
+          {
+            activateOnFocus: b,
+            className: a(
+              "scrollbar-hide relative flex min-w-0 shrink items-stretch",
+              t && "h-8.5 rounded-lg bg-kumo-tint px-px",
+              s && "h-7 gap-4 border-b border-kumo-line pb-2",
+              g
+            ),
+            children: [
+              o.map((e) => /* @__PURE__ */ r(
+                w,
+                {
+                  value: e.value,
+                  className: a(
+                    "relative z-10 flex cursor-pointer items-center rounded bg-transparent text-base whitespace-nowrap hover:border-kumo-tint focus-visible:rounded-none focus-visible:ring-kumo-ring focus-visible:outline-offset-3",
+                    t && "my-px rounded-lg px-2.5 text-kumo-strong aria-selected:text-kumo-default",
+                    s && "mb-2 text-kumo-strong hover:text-kumo-subtle aria-selected:font-medium aria-selected:text-kumo-default",
+                    e.className
+                  ),
+                  children: e.label
+                },
+                e.value
+              )),
+              /* @__PURE__ */ r(
+                N,
+                {
+                  className: a(
+                    "absolute z-0 transition-[left,width,transform] duration-200 ease-out",
+                    "data-[rendered=false]:scale-90 data-[rendered=false]:opacity-0",
+                    "left-(--active-tab-left) w-(--active-tab-width)",
+                    t && "top-(--active-tab-top) h-(--active-tab-height) rounded-lg bg-kumo-overlay shadow-sm ring ring-kumo-fill-hover",
+                    s && "bottom-0 h-0.5 bg-kumo-brand",
+                    v
+                  )
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  z as T
+};
+//# sourceMappingURL=tabs-lQup-IbT.js.map

package/dist/tabs-lQup-IbT.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs-lQup-IbT.js","sources":["../src/components/tabs/tabs.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { Tabs as TabsPrimitive } from \"@base-ui/react/tabs\";\nimport { cn } from \"../../utils/cn\";\n\nexport const KUMO_TABS_VARIANTS = {\n  variant: [\"segmented\", \"underline\"],\n} as const;\n\nexport const KUMO_TABS_DEFAULT_VARIANTS = {\n  variant: \"segmented\",\n} as const;\n\nexport const KUMO_TABS_STYLING = {\n  container: {\n    height: 34,\n    borderRadius: 8,\n    background: \"color-accent\",\n    padding: 1,\n  },\n  tab: {\n    paddingX: 10,\n    verticalMargin: 1,\n    fontSize: 16,\n    fontWeight: 500,\n    borderRadius: 8,\n    activeColor: \"text-color-surface\",\n    inactiveColor: \"text-color-label\",\n  },\n  indicator: {\n    background: \"color-surface-secondary\",\n    ring: \"color-color-2\",\n    borderRadius: 6,\n    shadow: \"shadow-sm\",\n  },\n} as const;\n\n// Derived types from KUMO_TABS_VARIANTS\nexport interface KumoTabsVariantsProps {\n  variant?: (typeof KUMO_TABS_VARIANTS.variant)[number];\n}\n\nexport type TabsItem = {\n  value: string;\n  label: ReactNode;\n  className?: string;\n  /** Optional render function to customize the tab element (e.g., for links) */\n  render?: (props: Record<string, unknown>) => React.ReactElement;\n};\n\nexport type TabsProps = KumoTabsVariantsProps & {\n  /** Array of tab items to render */\n  tabs?: TabsItem[];\n  /** Controlled value. When set, component becomes controlled. */\n  value?: string;\n  /** Default selected value for uncontrolled mode. Ignored when `value` is set. */\n  selectedValue?: string;\n  /** Callback fired when the active tab changes */\n  onValueChange?: (value: string) => void;\n  /**\n   * When true, tabs are activated immediately upon receiving focus via arrow keys.\n   * When false (default), tabs receive focus but require Enter/Space to activate.\n   * Set to true for better keyboard UX in most cases.\n   */\n  activateOnFocus?: boolean;\n  /** Additional class name for the root element */\n  className?: string;\n  /** Additional class name for the tab list element */\n  listClassName?: string;\n  /** Additional class name for the indicator element */\n  indicatorClassName?: string;\n};\n\nexport function Tabs({\n  tabs,\n  value,\n  selectedValue,\n  onValueChange,\n  activateOnFocus,\n  className,\n  listClassName,\n  indicatorClassName,\n  variant = KUMO_TABS_DEFAULT_VARIANTS.variant,\n}: TabsProps) {\n  const items: TabsItem[] = tabs ?? [];\n\n  if (items.length === 0) {\n    return null;\n  }\n\n  const fallbackValue = items[0]?.value;\n  const isControlled = value !== undefined;\n  const rootProps = {\n    value: isControlled ? value : undefined,\n    defaultValue: isControlled ? undefined : (selectedValue ?? fallbackValue),\n  };\n\n  const isSegmented = variant === \"segmented\";\n  const isUnderline = variant === \"underline\";\n\n  return (\n    <TabsPrimitive.Root\n      {...rootProps}\n      className={cn(\"relative min-w-0 font-medium\", className)}\n      onValueChange={(nextValue) => {\n        const stringValue = String(nextValue);\n        onValueChange?.(stringValue);\n      }}\n    >\n      {/* Background element for segmented variant */}\n      {isSegmented && (\n        <div className=\"absolute inset-x-0 top-1/2 -z-10 h-8.5 -translate-y-1/2 rounded-lg bg-kumo-tint\" />\n      )}\n      <TabsPrimitive.List\n        activateOnFocus={activateOnFocus}\n        className={cn(\n          \"scrollbar-hide relative flex min-w-0 shrink items-stretch\",\n          isSegmented && \"h-8.5 rounded-lg bg-kumo-tint px-px\",\n          isUnderline && \"h-7 gap-4 border-b border-kumo-line pb-2\",\n          listClassName,\n        )}\n      >\n        {items.map((tab) => (\n          <TabsPrimitive.Tab\n            key={tab.value}\n            value={tab.value}\n            className={cn(\n              \"relative z-10 flex cursor-pointer items-center rounded bg-transparent text-base whitespace-nowrap hover:border-kumo-tint focus-visible:rounded-none focus-visible:ring-kumo-ring focus-visible:outline-offset-3\",\n              isSegmented &&\n                \"my-px rounded-lg px-2.5 text-kumo-strong aria-selected:text-kumo-default\",\n              isUnderline &&\n                \"mb-2 text-kumo-strong hover:text-kumo-subtle aria-selected:font-medium aria-selected:text-kumo-default\",\n              tab.className,\n            )}\n          >\n            {tab.label}\n          </TabsPrimitive.Tab>\n        ))}\n        <TabsPrimitive.Indicator\n          className={cn(\n            \"absolute z-0 transition-[left,width,transform] duration-200 ease-out\",\n            \"data-[rendered=false]:scale-90 data-[rendered=false]:opacity-0\",\n            \"left-(--active-tab-left) w-(--active-tab-width)\",\n            isSegmented &&\n              \"top-(--active-tab-top) h-(--active-tab-height) rounded-lg bg-kumo-overlay shadow-sm ring ring-kumo-fill-hover\",\n            isUnderline && \"bottom-0 h-0.5 bg-kumo-brand\",\n            indicatorClassName,\n          )}\n        />\n      </TabsPrimitive.List>\n    </TabsPrimitive.Root>\n  );\n}\n"],"names":["KUMO_TABS_DEFAULT_VARIANTS","Tabs","tabs","value","selectedValue","onValueChange","activateOnFocus","className","listClassName","indicatorClassName","variant","items","fallbackValue","isControlled","rootProps","isSegmented","isUnderline","jsxs","TabsPrimitive.Root","cn","nextValue","stringValue","jsx","TabsPrimitive.List","tab","TabsPrimitive.Tab","TabsPrimitive.Indicator"],"mappings":";;;;AAQO,MAAMA,IAA6B;AAAA,EACxC,SAAS;AACX;AA8DO,SAASC,EAAK;AAAA,EACnB,MAAAC;AAAA,EACA,OAAAC;AAAA,EACA,eAAAC;AAAA,EACA,eAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,WAAAC;AAAA,EACA,eAAAC;AAAA,EACA,oBAAAC;AAAA,EACA,SAAAC,IAAUV,EAA2B;AACvC,GAAc;AACZ,QAAMW,IAAoBT,KAAQ,CAAA;AAElC,MAAIS,EAAM,WAAW;AACnB,WAAO;AAGT,QAAMC,IAAgBD,EAAM,CAAC,GAAG,OAC1BE,IAAeV,MAAU,QACzBW,IAAY;AAAA,IAChB,OAAOD,IAAeV,IAAQ;AAAA,IAC9B,cAAcU,IAAe,SAAaT,KAAiBQ;AAAA,EAAA,GAGvDG,IAAcL,MAAY,aAC1BM,IAAcN,MAAY;AAEhC,SACE,gBAAAO;AAAA,IAACC;AAAAA,IAAA;AAAA,MACE,GAAGJ;AAAA,MACJ,WAAWK,EAAG,gCAAgCZ,CAAS;AAAA,MACvD,eAAe,CAACa,MAAc;AAC5B,cAAMC,IAAc,OAAOD,CAAS;AACpC,QAAAf,IAAgBgB,CAAW;AAAA,MAC7B;AAAA,MAGC,UAAA;AAAA,QAAAN,KACC,gBAAAO,EAAC,OAAA,EAAI,WAAU,kFAAA,CAAkF;AAAA,QAEnG,gBAAAL;AAAA,UAACM;AAAAA,UAAA;AAAA,YACC,iBAAAjB;AAAA,YACA,WAAWa;AAAA,cACT;AAAA,cACAJ,KAAe;AAAA,cACfC,KAAe;AAAA,cACfR;AAAA,YAAA;AAAA,YAGD,UAAA;AAAA,cAAAG,EAAM,IAAI,CAACa,MACV,gBAAAF;AAAA,gBAACG;AAAAA,gBAAA;AAAA,kBAEC,OAAOD,EAAI;AAAA,kBACX,WAAWL;AAAA,oBACT;AAAA,oBACAJ,KACE;AAAA,oBACFC,KACE;AAAA,oBACFQ,EAAI;AAAA,kBAAA;AAAA,kBAGL,UAAAA,EAAI;AAAA,gBAAA;AAAA,gBAXAA,EAAI;AAAA,cAAA,CAaZ;AAAA,cACD,gBAAAF;AAAA,gBAACI;AAAAA,gBAAA;AAAA,kBACC,WAAWP;AAAA,oBACT;AAAA,oBACA;AAAA,oBACA;AAAA,oBACAJ,KACE;AAAA,oBACFC,KAAe;AAAA,oBACfP;AAAA,kBAAA;AAAA,gBACF;AAAA,cAAA;AAAA,YACF;AAAA,UAAA;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAAA;AAGN;"}