@jiwambe/components 0.2.0

package/dist/components/Section/Section.js

@@ -0,0 +1,48 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import React from "react";
+import { stripSystemProps, renderSystemProps, generateScopeId } from "../../utils/responsive-props.js";
+const SIZE_PADDING = {
+  sm: { base: "var(--space-4)", lg: "var(--space-6)" },
+  md: { base: "var(--space-6)", lg: "var(--space-9)" },
+  lg: { base: "var(--space-9)", lg: "var(--space-16)" },
+  xl: { base: "var(--space-16)", lg: "var(--space-24)" }
+};
+function Section({ size, children, className = "", style, ref, ...allRest }) {
+  const rest = stripSystemProps(allRest);
+  const hasPyOverride = allRest.py !== void 0 || allRest.pt !== void 0 || allRest.pb !== void 0 || allRest.p !== void 0;
+  const sizeStyle = {};
+  let sizeMediaCSS = "";
+  if (size && !hasPyOverride) {
+    const preset = SIZE_PADDING[size];
+    sizeStyle.paddingTop = preset.base;
+    sizeStyle.paddingBottom = preset.base;
+    sizeMediaCSS = `@media(min-width:940px){__SEL__{padding-top:${preset.lg} !important;padding-bottom:${preset.lg} !important}}`;
+  }
+  const mergedStyle = { ...sizeStyle, ...style };
+  const { style: systemStyle, styleTag, dataId } = renderSystemProps(
+    allRest,
+    mergedStyle
+  );
+  const needsSizeMedia = !!sizeMediaCSS;
+  const finalDataId = dataId ?? (needsSizeMedia ? generateScopeId(sizeMediaCSS, "sec") : void 0);
+  const scopedSizeCSS = needsSizeMedia && finalDataId ? sizeMediaCSS.replace(/__SEL__/g, `[data-jds="${finalDataId}"]`) : "";
+  const elementProps = {
+    ref,
+    className: className || void 0,
+    style: systemStyle,
+    ...rest
+  };
+  if (finalDataId) {
+    elementProps["data-jds"] = finalDataId;
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    styleTag,
+    scopedSizeCSS && /* @__PURE__ */ jsx("style", { dangerouslySetInnerHTML: { __html: scopedSizeCSS } }),
+    React.createElement("section", elementProps, children)
+  ] });
+}
+Section.displayName = "Section";
+export {
+  Section
+};
+//# sourceMappingURL=Section.js.map

package/dist/components/Section/Section.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Section.js","sources":["../../../src/components/Section/Section.tsx"],"sourcesContent":["import React from 'react';\nimport {\n  renderSystemProps,\n  stripSystemProps,\n  generateScopeId,\n  type SystemProps,\n} from '../../utils/responsive-props';\n\n/**\n * Vertical padding preset for Section. Controls top/bottom padding at base and lg (940px) breakpoint.\n * Overridden when py or pt/pb are provided via system props.\n */\nexport type SectionSize = 'sm' | 'md' | 'lg' | 'xl';\n\n/**\n * Props for the Section component. Extends system props (responsive spacing, etc.).\n * size applies vertical padding presets unless py/pt/pb are set.\n */\nexport interface SectionProps extends Omit<React.HTMLAttributes<HTMLElement>, 'display'>, SystemProps {\n  /**\n   * Vertical padding preset. Ignored when py or pt/pb are provided.\n   * - 'sm' — base: space-4, lg: space-6\n   * - 'md' — base: space-6, lg: space-9\n   * - 'lg' — base: space-9, lg: space-16\n   * - 'xl' — base: space-16, lg: space-24\n   * @default undefined\n   */\n  size?: SectionSize;\n  /** Forwarded ref for the section element. @default undefined */\n  ref?: React.Ref<HTMLElement>;\n  /** Section content. @default undefined */\n  children?: React.ReactNode;\n}\n\nconst SIZE_PADDING: Record<SectionSize, { base: string; lg: string }> = {\n  sm: { base: 'var(--space-4)', lg: 'var(--space-6)' },\n  md: { base: 'var(--space-6)', lg: 'var(--space-9)' },\n  lg: { base: 'var(--space-9)', lg: 'var(--space-16)' },\n  xl: { base: 'var(--space-16)', lg: 'var(--space-24)' },\n};\n\n/**\n * Semantic section element with optional vertical padding presets (size) and full\n * system props. Use as the wrapper for each major page block; combine with\n * Container for width and gutters. Do not nest Section for inner layout — use Box or Stack.\n *\n * @example\n * <Section size=\"lg\">\n *   <Container>Page content</Container>\n * </Section>\n *\n * @example\n * <Section size=\"md\" py={{ base: 'space-8', xl: 'space-16' }}>Custom spacing</Section>\n */\nexport function Section({ size, children, className = '', style, ref, ...allRest }: SectionProps) {\n  const rest = stripSystemProps(allRest);\n\n  const hasPyOverride =\n    allRest.py !== undefined ||\n    allRest.pt !== undefined ||\n    allRest.pb !== undefined ||\n    allRest.p !== undefined;\n\n  const sizeStyle: React.CSSProperties = {};\n  let sizeMediaCSS = '';\n\n  if (size && !hasPyOverride) {\n    const preset = SIZE_PADDING[size];\n    sizeStyle.paddingTop = preset.base;\n    sizeStyle.paddingBottom = preset.base;\n    sizeMediaCSS = `@media(min-width:940px){__SEL__{padding-top:${preset.lg} !important;padding-bottom:${preset.lg} !important}}`;\n  }\n\n  const mergedStyle = { ...sizeStyle, ...style };\n  const { style: systemStyle, styleTag, dataId } = renderSystemProps(\n    allRest as SystemProps,\n    mergedStyle,\n  );\n\n  const needsSizeMedia = !!sizeMediaCSS;\n  const finalDataId = dataId ?? (needsSizeMedia ? generateScopeId(sizeMediaCSS, 'sec') : undefined);\n  const scopedSizeCSS = needsSizeMedia && finalDataId\n    ? sizeMediaCSS.replace(/__SEL__/g, `[data-jds=\"${finalDataId}\"]`)\n    : '';\n\n  const elementProps: Record<string, unknown> = {\n    ref,\n    className: className || undefined,\n    style: systemStyle,\n    ...rest,\n  };\n\n  if (finalDataId) {\n    elementProps['data-jds'] = finalDataId;\n  }\n\n  return (\n    <>\n      {styleTag}\n      {scopedSizeCSS && <style dangerouslySetInnerHTML={{ __html: scopedSizeCSS }} />}\n      {React.createElement('section', elementProps, children)}\n    </>\n  );\n}\n\nSection.displayName = 'Section';\n"],"names":[],"mappings":";;;AAkCA,MAAM,eAAkE;AAAA,EACtE,IAAI,EAAE,MAAM,kBAAkB,IAAI,iBAAA;AAAA,EAClC,IAAI,EAAE,MAAM,kBAAkB,IAAI,iBAAA;AAAA,EAClC,IAAI,EAAE,MAAM,kBAAkB,IAAI,kBAAA;AAAA,EAClC,IAAI,EAAE,MAAM,mBAAmB,IAAI,kBAAA;AACrC;AAeO,SAAS,QAAQ,EAAE,MAAM,UAAU,YAAY,IAAI,OAAO,KAAK,GAAG,WAAyB;AAChG,QAAM,OAAO,iBAAiB,OAAO;AAErC,QAAM,gBACJ,QAAQ,OAAO,UACf,QAAQ,OAAO,UACf,QAAQ,OAAO,UACf,QAAQ,MAAM;AAEhB,QAAM,YAAiC,CAAA;AACvC,MAAI,eAAe;AAEnB,MAAI,QAAQ,CAAC,eAAe;AAC1B,UAAM,SAAS,aAAa,IAAI;AAChC,cAAU,aAAa,OAAO;AAC9B,cAAU,gBAAgB,OAAO;AACjC,mBAAe,+CAA+C,OAAO,EAAE,8BAA8B,OAAO,EAAE;AAAA,EAChH;AAEA,QAAM,cAAc,EAAE,GAAG,WAAW,GAAG,MAAA;AACvC,QAAM,EAAE,OAAO,aAAa,UAAU,WAAW;AAAA,IAC/C;AAAA,IACA;AAAA,EAAA;AAGF,QAAM,iBAAiB,CAAC,CAAC;AACzB,QAAM,cAAc,WAAW,iBAAiB,gBAAgB,cAAc,KAAK,IAAI;AACvF,QAAM,gBAAgB,kBAAkB,cACpC,aAAa,QAAQ,YAAY,cAAc,WAAW,IAAI,IAC9D;AAEJ,QAAM,eAAwC;AAAA,IAC5C;AAAA,IACA,WAAW,aAAa;AAAA,IACxB,OAAO;AAAA,IACP,GAAG;AAAA,EAAA;AAGL,MAAI,aAAa;AACf,iBAAa,UAAU,IAAI;AAAA,EAC7B;AAEA,SACE,qBAAA,UAAA,EACG,UAAA;AAAA,IAAA;AAAA,IACA,iBAAiB,oBAAC,SAAA,EAAM,yBAAyB,EAAE,QAAQ,iBAAiB;AAAA,IAC5E,MAAM,cAAc,WAAW,cAAc,QAAQ;AAAA,EAAA,GACxD;AAEJ;AAEA,QAAQ,cAAc;"}

package/dist/components/Select/Select.d.ts

@@ -0,0 +1,47 @@
+import { default as React } from 'react';
+/**
+ * Shape of a single select option. value is submitted; label is shown (falls back to value).
+ */
+export interface SelectOption {
+    /** Value submitted with the form. Must be unique. */
+    value: string;
+    /** Visible label. Falls back to value if omitted. @default undefined */
+    label?: string;
+    /** When true, this option cannot be selected. @default undefined */
+    disabled?: boolean;
+}
+/**
+ * Props for the Select component. Native select with label, support text, placeholder,
+ * and error state. Supports controlled (value) or uncontrolled (defaultValue) usage.
+ */
+export interface SelectProps extends Omit<React.SelectHTMLAttributes<HTMLSelectElement>, 'size'> {
+    /** Label text displayed above the select. @default undefined */
+    label?: string;
+    /** Secondary label shown lighter beside the main label. @default undefined */
+    secondaryLabel?: string;
+    /** Supportive text rendered below the label. @default undefined */
+    supportText?: string;
+    /** Placeholder text shown when no value is selected. @default undefined */
+    placeholder?: string;
+    /** Options to render. Each: value, label?, disabled?. @default [] */
+    options?: SelectOption[];
+    /** Places the select in an error state. @default false */
+    error?: boolean;
+    /** Error message shown in the alert below the select when error is true. @default undefined */
+    errorMessage?: string;
+    /** Forwarded ref for the select element. @default undefined */
+    ref?: React.Ref<HTMLSelectElement>;
+}
+/**
+ * Native select dropdown with label, support text, placeholder, and error alert.
+ * Renders a single-choice list; for tab-style single choice (e.g. quantity 1–5) use
+ * SelectTab. Supports controlled (value) or uncontrolled (defaultValue) usage.
+ *
+ * @example
+ * <Select label="Country" placeholder="Choose" options={[{ value: 'ke', label: 'Kenya' }, { value: 'tz', label: 'Tanzania' }]} />
+ *
+ * @example
+ * <Select label="Status" value={status} onChange={(e) => setStatus(e.target.value)} options={statusOptions} error={!!err} errorMessage={err} />
+ */
+export declare function Select({ label, secondaryLabel, supportText, placeholder, options, error, errorMessage, required, disabled, className, id: idProp, value, defaultValue, ref, ...rest }: SelectProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Select.d.ts.map

package/dist/components/Select/Select.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/components/Select/Select.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAgB,MAAM,OAAO,CAAC;AAErC;;GAEG;AACH,MAAM,WAAW,YAAY;IAC3B,qDAAqD;IACrD,KAAK,EAAE,MAAM,CAAC;IACd,wEAAwE;IACxE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oEAAoE;IACpE,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;;GAGG;AACH,MAAM,WAAW,WACf,SAAQ,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IACnE,gEAAgE;IAChE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8EAA8E;IAC9E,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,mEAAmE;IACnE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,2EAA2E;IAC3E,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qEAAqE;IACrE,OAAO,CAAC,EAAE,YAAY,EAAE,CAAC;IACzB,0DAA0D;IAC1D,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,+FAA+F;IAC/F,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,+DAA+D;IAC/D,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;CACpC;AA4CD;;;;;;;;;;GAUG;AACH,wBAAgB,MAAM,CAAC,EACrB,KAAK,EACL,cAAc,EACd,WAAW,EACX,WAAW,EACX,OAAY,EACZ,KAAa,EACb,YAAY,EACZ,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,EAAE,EAAE,MAAM,EACV,KAAK,EACL,YAAY,EACZ,GAAG,EACH,GAAG,IAAI,EACR,EAAE,WAAW,2CAiIb"}

package/dist/components/Select/Select.js

@@ -0,0 +1,153 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useId } from "react";
+function ChevronDown({ className }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      className,
+      viewBox: "0 0 20 20",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx("path", { d: "M6 8l4 4 4-4" })
+    }
+  );
+}
+function ErrorIcon({ className }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      className,
+      viewBox: "0 0 20 20",
+      fill: "currentColor",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          fillRule: "evenodd",
+          d: "M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z",
+          clipRule: "evenodd"
+        }
+      )
+    }
+  );
+}
+function Select({
+  label,
+  secondaryLabel,
+  supportText,
+  placeholder,
+  options = [],
+  error = false,
+  errorMessage,
+  required,
+  disabled,
+  className,
+  id: idProp,
+  value,
+  defaultValue,
+  ref,
+  ...rest
+}) {
+  const autoId = useId();
+  const id = idProp ?? autoId;
+  const hasValue = value !== void 0 ? value !== "" : defaultValue !== void 0 && defaultValue !== "";
+  const selectClasses = [
+    "w-full min-h-[48px] pl-space-4 pr-10 py-space-3 appearance-none",
+    "rounded-rad-md text-form-text outline-none",
+    "transition-all duration-150",
+    hasValue ? "text-text-primary" : "text-text-disabled",
+    // Default border & background
+    !disabled && !error && "border-border-sm border-border-form-primary bg-fill-form-primary",
+    !disabled && error && "border-border-sm border-border-err bg-fill-form-primary",
+    // Hover
+    !disabled && "hover:border-border-md hover:border-border-form-primary-hover",
+    // Focus (click → "Selected" state)
+    !disabled && "focus:border-border-md focus:border-border-form-primary-active focus:text-text-primary",
+    // Focus-visible (keyboard → "Focus" state + ring)
+    !disabled && [
+      "focus-visible:border-border-sm focus-visible:border-border-form-primary-focus",
+      "focus-visible:ring-[1.5px] focus-visible:ring-border-focus focus-visible:ring-offset-[3px]"
+    ].join(" "),
+    // Disabled
+    disabled && "border-border-sm border-border-form-primary-disabled bg-fill-form-primary-disabled text-text-disabled cursor-not-allowed",
+    className
+  ].filter(Boolean).join(" ");
+  const showErrorAlert = error && errorMessage;
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-space-2 w-full", children: [
+    (label || supportText) && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-space-1", children: [
+      label && /* @__PURE__ */ jsxs(
+        "label",
+        {
+          htmlFor: id,
+          className: `text-form-label ${disabled ? "text-text-disabled" : "text-text-primary"}`,
+          children: [
+            label,
+            secondaryLabel && /* @__PURE__ */ jsx("span", { className: "text-text-secondary font-normal ml-1", children: secondaryLabel }),
+            required && /* @__PURE__ */ jsx("span", { className: "text-text-err ml-0.5", children: "*" })
+          ]
+        }
+      ),
+      supportText && /* @__PURE__ */ jsx("p", { className: `text-text-xs ${disabled ? "text-text-disabled" : "text-text-secondary"}`, children: supportText })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "relative w-full", children: [
+      /* @__PURE__ */ jsxs(
+        "select",
+        {
+          ref,
+          id,
+          disabled,
+          required,
+          "aria-invalid": error || void 0,
+          "aria-describedby": showErrorAlert ? `${id}-error` : void 0,
+          value,
+          defaultValue,
+          className: selectClasses,
+          ...rest,
+          children: [
+            placeholder && /* @__PURE__ */ jsx("option", { value: "", disabled: true, hidden: true, children: placeholder }),
+            options.map((opt) => /* @__PURE__ */ jsx("option", { value: opt.value, disabled: opt.disabled, children: opt.label ?? opt.value }, opt.value))
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: `absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none flex items-center ${disabled ? "text-icon-primary-disabled" : "text-icon-primary"}`,
+          children: /* @__PURE__ */ jsx(ChevronDown, { className: "w-5 h-5" })
+        }
+      )
+    ] }),
+    showErrorAlert && /* @__PURE__ */ jsxs(
+      "div",
+      {
+        id: `${id}-error`,
+        role: "alert",
+        className: `flex items-start gap-space-4 p-space-4 rounded-rad-md ${disabled ? "bg-fill-bg-secondary" : "bg-fill-bg-err"}`,
+        children: [
+          /* @__PURE__ */ jsx(
+            ErrorIcon,
+            {
+              className: `w-5 h-5 shrink-0 ${disabled ? "text-icon-primary-disabled" : "text-icon-err"}`
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: `text-text-xs ${disabled ? "text-text-disabled" : "text-text-err"}`,
+              children: errorMessage
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+export {
+  Select
+};
+//# sourceMappingURL=Select.js.map

package/dist/components/Select/Select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.js","sources":["../../../src/components/Select/Select.tsx"],"sourcesContent":["'use client';\n\nimport React, { useId } from 'react';\n\n/**\n * Shape of a single select option. value is submitted; label is shown (falls back to value).\n */\nexport interface SelectOption {\n  /** Value submitted with the form. Must be unique. */\n  value: string;\n  /** Visible label. Falls back to value if omitted. @default undefined */\n  label?: string;\n  /** When true, this option cannot be selected. @default undefined */\n  disabled?: boolean;\n}\n\n/**\n * Props for the Select component. Native select with label, support text, placeholder,\n * and error state. Supports controlled (value) or uncontrolled (defaultValue) usage.\n */\nexport interface SelectProps\n  extends Omit<React.SelectHTMLAttributes<HTMLSelectElement>, 'size'> {\n  /** Label text displayed above the select. @default undefined */\n  label?: string;\n  /** Secondary label shown lighter beside the main label. @default undefined */\n  secondaryLabel?: string;\n  /** Supportive text rendered below the label. @default undefined */\n  supportText?: string;\n  /** Placeholder text shown when no value is selected. @default undefined */\n  placeholder?: string;\n  /** Options to render. Each: value, label?, disabled?. @default [] */\n  options?: SelectOption[];\n  /** Places the select in an error state. @default false */\n  error?: boolean;\n  /** Error message shown in the alert below the select when error is true. @default undefined */\n  errorMessage?: string;\n  /** Forwarded ref for the select element. @default undefined */\n  ref?: React.Ref<HTMLSelectElement>;\n}\n\n// ---------------------------------------------------------------------------\n// Helpers\n// ---------------------------------------------------------------------------\n\nfunction ChevronDown({ className }: { className?: string }) {\n  return (\n    <svg\n      className={className}\n      viewBox=\"0 0 20 20\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"1.5\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      <path d=\"M6 8l4 4 4-4\" />\n    </svg>\n  );\n}\n\nfunction ErrorIcon({ className }: { className?: string }) {\n  return (\n    <svg\n      className={className}\n      viewBox=\"0 0 20 20\"\n      fill=\"currentColor\"\n      aria-hidden=\"true\"\n    >\n      <path\n        fillRule=\"evenodd\"\n        d=\"M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z\"\n        clipRule=\"evenodd\"\n      />\n    </svg>\n  );\n}\n\n// ---------------------------------------------------------------------------\n// Component\n// ---------------------------------------------------------------------------\n\n/**\n * Native select dropdown with label, support text, placeholder, and error alert.\n * Renders a single-choice list; for tab-style single choice (e.g. quantity 1–5) use\n * SelectTab. Supports controlled (value) or uncontrolled (defaultValue) usage.\n *\n * @example\n * <Select label=\"Country\" placeholder=\"Choose\" options={[{ value: 'ke', label: 'Kenya' }, { value: 'tz', label: 'Tanzania' }]} />\n *\n * @example\n * <Select label=\"Status\" value={status} onChange={(e) => setStatus(e.target.value)} options={statusOptions} error={!!err} errorMessage={err} />\n */\nexport function Select({\n  label,\n  secondaryLabel,\n  supportText,\n  placeholder,\n  options = [],\n  error = false,\n  errorMessage,\n  required,\n  disabled,\n  className,\n  id: idProp,\n  value,\n  defaultValue,\n  ref,\n  ...rest\n}: SelectProps) {\n  const autoId = useId();\n  const id = idProp ?? autoId;\n\n  const hasValue =\n    value !== undefined ? value !== '' : defaultValue !== undefined && defaultValue !== '';\n\n  const selectClasses = [\n    'w-full min-h-[48px] pl-space-4 pr-10 py-space-3 appearance-none',\n    'rounded-rad-md text-form-text outline-none',\n    'transition-all duration-150',\n    hasValue ? 'text-text-primary' : 'text-text-disabled',\n\n    // Default border & background\n    !disabled && !error && 'border-border-sm border-border-form-primary bg-fill-form-primary',\n    !disabled && error && 'border-border-sm border-border-err bg-fill-form-primary',\n\n    // Hover\n    !disabled && 'hover:border-border-md hover:border-border-form-primary-hover',\n\n    // Focus (click → \"Selected\" state)\n    !disabled && 'focus:border-border-md focus:border-border-form-primary-active focus:text-text-primary',\n\n    // Focus-visible (keyboard → \"Focus\" state + ring)\n    !disabled && [\n      'focus-visible:border-border-sm focus-visible:border-border-form-primary-focus',\n      'focus-visible:ring-[1.5px] focus-visible:ring-border-focus focus-visible:ring-offset-[3px]',\n    ].join(' '),\n\n    // Disabled\n    disabled && 'border-border-sm border-border-form-primary-disabled bg-fill-form-primary-disabled text-text-disabled cursor-not-allowed',\n\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const showErrorAlert = error && errorMessage;\n\n  return (\n    <div className=\"flex flex-col gap-space-2 w-full\">\n      {/* Label + support text */}\n      {(label || supportText) && (\n        <div className=\"flex flex-col gap-space-1\">\n          {label && (\n            <label\n              htmlFor={id}\n              className={`text-form-label ${disabled ? 'text-text-disabled' : 'text-text-primary'}`}\n            >\n              {label}\n              {secondaryLabel && (\n                <span className=\"text-text-secondary font-normal ml-1\">\n                  {secondaryLabel}\n                </span>\n              )}\n              {required && (\n                <span className=\"text-text-err ml-0.5\">*</span>\n              )}\n            </label>\n          )}\n          {supportText && (\n            <p className={`text-text-xs ${disabled ? 'text-text-disabled' : 'text-text-secondary'}`}>\n              {supportText}\n            </p>\n          )}\n        </div>\n      )}\n\n      {/* Select wrapper */}\n      <div className=\"relative w-full\">\n        <select\n          ref={ref}\n          id={id}\n          disabled={disabled}\n          required={required}\n          aria-invalid={error || undefined}\n          aria-describedby={showErrorAlert ? `${id}-error` : undefined}\n          value={value}\n          defaultValue={defaultValue}\n          className={selectClasses}\n          {...rest}\n        >\n          {placeholder && (\n            <option value=\"\" disabled hidden>\n              {placeholder}\n            </option>\n          )}\n          {options.map((opt) => (\n            <option key={opt.value} value={opt.value} disabled={opt.disabled}>\n              {opt.label ?? opt.value}\n            </option>\n          ))}\n        </select>\n\n        {/* Chevron icon */}\n        <span\n          className={`absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none flex items-center ${\n            disabled ? 'text-icon-primary-disabled' : 'text-icon-primary'\n          }`}\n        >\n          <ChevronDown className=\"w-5 h-5\" />\n        </span>\n      </div>\n\n      {/* Error alert */}\n      {showErrorAlert && (\n        <div\n          id={`${id}-error`}\n          role=\"alert\"\n          className={`flex items-start gap-space-4 p-space-4 rounded-rad-md ${\n            disabled ? 'bg-fill-bg-secondary' : 'bg-fill-bg-err'\n          }`}\n        >\n          <ErrorIcon\n            className={`w-5 h-5 shrink-0 ${\n              disabled ? 'text-icon-primary-disabled' : 'text-icon-err'\n            }`}\n          />\n          <span\n            className={`text-text-xs ${\n              disabled ? 'text-text-disabled' : 'text-text-err'\n            }`}\n          >\n            {errorMessage}\n          </span>\n        </div>\n      )}\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;AA4CA;AACE;AACE;AAAC;AAAA;AACC;AACQ;AACH;AACE;AACK;AACE;AACC;AACH;AAEW;AAAA;AAG7B;AAEA;AACE;AACE;AAAC;AAAA;AACC;AACQ;AACH;AACO;AAEZ;AAAC;AAAA;AACU;AACP;AACO;AAAA;AAAA;AACX;AAGN;AAiBO;AAAgB;AACrB;AACA;AACA;AACA;AACU;AACF;AACR;AACA;AACA;AACA;AACI;AACJ;AACA;AACA;AAEF;AACE;AACA;AAEA;AAGA;AAAsB;AACpB;AACA;AACA;AACiC;AAAA;AAGV;AACD;AAAA;AAGT;AAAA;AAGA;AAAA;AAGA;AACX;AACA;AACQ;AAAA;AAGE;AAEZ;AAKF;AAEA;AAGM;AAEG;AACC;AAAC;AAAA;AACU;AAC0E;AAElF;AAAA;AAIC;AAGwC;AAAA;AAAA;AAAA;AAO5C;AAEJ;AAKA;AAAA;AAAC;AAAA;AACC;AACA;AACA;AACA;AACuB;AAC4B;AACnD;AACA;AACW;AACP;AAEH;AAGC;AAMD;AAAA;AAAA;AAAA;AAIH;AAAC;AAAA;AAGC;AAEiC;AAAA;AAAA;AAErC;AAIE;AAAC;AAAA;AACU;AACJ;AAGL;AAEA;AAAA;AAAC;AAAA;AAGC;AAAA;AAAA;AAEF;AAAC;AAAA;AAGC;AAEC;AAAA;AAAA;AACH;AAAA;AAAA;AAKV;;;;"}

package/dist/components/SelectTab/SelectTab.d.ts

@@ -0,0 +1,62 @@
+import { default as React } from 'react';
+/**
+ * Shape of a single SelectTab option. Rendered as a 48×48 selectable cell.
+ */
+export interface SelectTabOption {
+    /** Value when this option is selected. Must be unique. */
+    value: string;
+    /** Visible label inside the cell. Falls back to value. @default undefined */
+    label?: string;
+    /** When true, this option cannot be selected. @default undefined */
+    disabled?: boolean;
+}
+/**
+ * Props for the SelectTab component. Single selection from a row of 48×48 cells.
+ * Use for small choice sets (e.g. quantity 0–9, size XS–XL) where a dropdown is
+ * overkill. For a traditional dropdown use Select. value/onChange for controlled mode.
+ */
+export interface SelectTabProps {
+    /** Label text displayed above the tab row. @default undefined */
+    label?: string;
+    /** Secondary label shown lighter beside the main label. @default undefined */
+    secondaryLabel?: string;
+    /** Supportive text rendered below the label. @default undefined */
+    supportText?: string;
+    /** Options rendered as selectable 48×48 cells. Each: value, label?, disabled?. @see SelectTabOption */
+    options: SelectTabOption[];
+    /** Controlled selected value. Use with onChange. @default undefined */
+    value?: string;
+    /** Uncontrolled default selected value. @default undefined */
+    defaultValue?: string;
+    /** Called when the selected value changes. @default undefined */
+    onChange?: (value: string) => void;
+    /** Optional label at the end of the row (e.g. "Submit"). @default undefined */
+    submitLabel?: string;
+    /** Called when the submit label is clicked. @default undefined */
+    onSubmit?: () => void;
+    /** Disables all options. @default false */
+    disabled?: boolean;
+    /** Places the component in an error state. @default false */
+    error?: boolean;
+    /** Error message shown in the alert below the row when error is true. @default undefined */
+    errorMessage?: string;
+    /** When true, shows required asterisk next to the label. @default undefined */
+    required?: boolean;
+    /** Additional CSS class names on the outer wrapper. @default undefined */
+    className?: string;
+    /** Forwarded ref for the root div. @default undefined */
+    ref?: React.Ref<HTMLDivElement>;
+}
+/**
+ * Tab-style single-selection row where each option is a 48×48 cell. Use for quantity,
+ * size, or other small choice sets. Only one option can be selected (radio-like);
+ * supports keyboard navigation (arrows, Home, End). For dropdown single-select use Select.
+ *
+ * @example
+ * <SelectTab label="Quantity" options={[{ value: '0', label: '0' }, { value: '1', label: '1' }]} submitLabel="Submit" onSubmit={handleSubmit} />
+ *
+ * @example
+ * <SelectTab label="Size" value={size} onChange={setSize} options={sizeOptions} error={!!err} errorMessage={err} />
+ */
+export declare function SelectTab({ label, secondaryLabel, supportText, options, value: valueProp, defaultValue, onChange, submitLabel, onSubmit, disabled, error, errorMessage, required, className, ref, ...rest }: SelectTabProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SelectTab.d.ts.map

package/dist/components/SelectTab/SelectTab.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectTab.d.ts","sourceRoot":"","sources":["../../../src/components/SelectTab/SelectTab.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAEnD;;GAEG;AACH,MAAM,WAAW,eAAe;IAC9B,0DAA0D;IAC1D,KAAK,EAAE,MAAM,CAAC;IACd,6EAA6E;IAC7E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oEAAoE;IACpE,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;;;GAIG;AACH,MAAM,WAAW,cAAc;IAC7B,iEAAiE;IACjE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8EAA8E;IAC9E,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,mEAAmE;IACnE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,uGAAuG;IACvG,OAAO,EAAE,eAAe,EAAE,CAAC;IAC3B,uEAAuE;IACvE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8DAA8D;IAC9D,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iEAAiE;IACjE,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,+EAA+E;IAC/E,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,kEAAkE;IAClE,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6DAA6D;IAC7D,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,4FAA4F;IAC5F,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,+EAA+E;IAC/E,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,0EAA0E;IAC1E,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yDAAyD;IACzD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;CACjC;AA2BD;;;;;;;;;;GAUG;AACH,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,cAAc,EACd,WAAW,EACX,OAAO,EACP,KAAK,EAAE,SAAS,EAChB,YAAY,EACZ,QAAQ,EACR,WAAW,EACX,QAAQ,EACR,QAAgB,EAChB,KAAa,EACb,YAAY,EACZ,QAAQ,EACR,SAAc,EACd,GAAG,EACH,GAAG,IAAI,EACR,EAAE,cAAc,2CAyLhB"}

package/dist/components/SelectTab/SelectTab.js

@@ -0,0 +1,192 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import React, { useRef, useCallback } from "react";
+function ErrorIcon({ className }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      className,
+      viewBox: "0 0 20 20",
+      fill: "currentColor",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          fillRule: "evenodd",
+          d: "M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z",
+          clipRule: "evenodd"
+        }
+      )
+    }
+  );
+}
+function SelectTab({
+  label,
+  secondaryLabel,
+  supportText,
+  options,
+  value: valueProp,
+  defaultValue,
+  onChange,
+  submitLabel,
+  onSubmit,
+  disabled = false,
+  error = false,
+  errorMessage,
+  required,
+  className = "",
+  ref,
+  ...rest
+}) {
+  const isControlled = valueProp !== void 0;
+  const [internal, setInternal] = React.useState(defaultValue ?? "");
+  const selected = isControlled ? valueProp : internal;
+  const itemRefs = useRef([]);
+  const handleSelect = useCallback(
+    (val) => {
+      if (!isControlled) setInternal(val);
+      onChange == null ? void 0 : onChange(val);
+    },
+    [isControlled, onChange]
+  );
+  const focusItem = (idx) => {
+    var _a;
+    (_a = itemRefs.current[idx]) == null ? void 0 : _a.focus();
+  };
+  const handleKeyDown = (e, idx) => {
+    const enabled = options.map((o, i) => o.disabled || disabled ? -1 : i).filter((i) => i !== -1);
+    const pos = enabled.indexOf(idx);
+    switch (e.key) {
+      case "ArrowRight":
+      case "ArrowDown": {
+        e.preventDefault();
+        const next = enabled[(pos + 1) % enabled.length];
+        focusItem(next);
+        break;
+      }
+      case "ArrowLeft":
+      case "ArrowUp": {
+        e.preventDefault();
+        const prev = enabled[(pos - 1 + enabled.length) % enabled.length];
+        focusItem(prev);
+        break;
+      }
+      case "Home": {
+        e.preventDefault();
+        focusItem(enabled[0]);
+        break;
+      }
+      case "End": {
+        e.preventDefault();
+        focusItem(enabled[enabled.length - 1]);
+        break;
+      }
+    }
+  };
+  const showErrorAlert = error && errorMessage;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      className: `flex flex-col gap-space-2 w-full ${className}`,
+      ...rest,
+      children: [
+        (label || supportText) && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-space-1", children: [
+          label && /* @__PURE__ */ jsxs(
+            "span",
+            {
+              className: `text-form-label ${disabled ? "text-text-disabled" : "text-text-primary"}`,
+              children: [
+                label,
+                secondaryLabel && /* @__PURE__ */ jsx("span", { className: "text-text-secondary font-normal ml-1", children: secondaryLabel }),
+                required && /* @__PURE__ */ jsx("span", { className: "text-text-err ml-0.5", children: "*" })
+              ]
+            }
+          ),
+          supportText && /* @__PURE__ */ jsx("p", { className: `text-text-xs ${disabled ? "text-text-disabled" : "text-text-secondary"}`, children: supportText })
+        ] }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            role: "radiogroup",
+            "aria-label": label,
+            className: "flex items-center gap-space-2 flex-wrap",
+            children: [
+              options.map((opt, i) => {
+                const isSelected = selected === opt.value;
+                const isItemDisabled = disabled || !!opt.disabled;
+                const cellClasses = [
+                  "flex w-[48px] h-[48px] justify-center items-center",
+                  "rounded-rad-md font-mono text-[12px] leading-[1.4]",
+                  "outline-none transition-all duration-150",
+                  isSelected && !isItemDisabled && "bg-green-900 text-neutral-0 border-border-sm border-green-900",
+                  !isSelected && !isItemDisabled && !error && "border-border-sm border-border-form-primary bg-fill-form-primary text-text-primary",
+                  !isSelected && !isItemDisabled && error && "border-border-sm border-border-err bg-fill-form-primary text-text-primary",
+                  !isItemDisabled && !isSelected && "hover:border-border-form-primary-hover active:border-border-form-primary-active",
+                  !isItemDisabled && "focus-visible:ring-[1.5px] focus-visible:ring-border-focus focus-visible:ring-offset-[3px]",
+                  isItemDisabled && !isSelected && "border-border-sm border-border-form-primary-disabled bg-fill-form-primary-disabled text-text-disabled cursor-not-allowed",
+                  isItemDisabled && isSelected && "bg-green-900/50 text-neutral-0/50 border-border-sm border-green-900/50 cursor-not-allowed"
+                ].filter(Boolean).join(" ");
+                return /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    ref: (el) => {
+                      itemRefs.current[i] = el;
+                    },
+                    type: "button",
+                    role: "radio",
+                    "aria-checked": isSelected,
+                    "aria-disabled": isItemDisabled || void 0,
+                    tabIndex: isSelected ? 0 : -1,
+                    disabled: isItemDisabled,
+                    className: cellClasses,
+                    onClick: () => handleSelect(opt.value),
+                    onKeyDown: (e) => handleKeyDown(e, i),
+                    children: opt.label ?? opt.value
+                  },
+                  opt.value
+                );
+              }),
+              submitLabel && /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  disabled,
+                  onClick: onSubmit,
+                  className: `text-text-xs font-medium ml-space-1 ${disabled ? "text-text-disabled cursor-not-allowed" : "text-text-primary hover:text-text-secondary"}`,
+                  children: submitLabel
+                }
+              )
+            ]
+          }
+        ),
+        showErrorAlert && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            role: "alert",
+            className: `flex items-start gap-space-4 p-space-4 rounded-rad-md ${disabled ? "bg-fill-bg-secondary" : "bg-fill-bg-err"}`,
+            children: [
+              /* @__PURE__ */ jsx(
+                ErrorIcon,
+                {
+                  className: `w-5 h-5 shrink-0 ${disabled ? "text-icon-primary-disabled" : "text-icon-err"}`
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: `text-text-xs ${disabled ? "text-text-disabled" : "text-text-err"}`,
+                  children: errorMessage
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  SelectTab
+};
+//# sourceMappingURL=SelectTab.js.map

package/dist/components/SelectTab/SelectTab.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectTab.js","sources":["../../../src/components/SelectTab/SelectTab.tsx"],"sourcesContent":["'use client';\n\nimport React, { useRef, useCallback } from 'react';\n\n/**\n * Shape of a single SelectTab option. Rendered as a 48×48 selectable cell.\n */\nexport interface SelectTabOption {\n  /** Value when this option is selected. Must be unique. */\n  value: string;\n  /** Visible label inside the cell. Falls back to value. @default undefined */\n  label?: string;\n  /** When true, this option cannot be selected. @default undefined */\n  disabled?: boolean;\n}\n\n/**\n * Props for the SelectTab component. Single selection from a row of 48×48 cells.\n * Use for small choice sets (e.g. quantity 0–9, size XS–XL) where a dropdown is\n * overkill. For a traditional dropdown use Select. value/onChange for controlled mode.\n */\nexport interface SelectTabProps {\n  /** Label text displayed above the tab row. @default undefined */\n  label?: string;\n  /** Secondary label shown lighter beside the main label. @default undefined */\n  secondaryLabel?: string;\n  /** Supportive text rendered below the label. @default undefined */\n  supportText?: string;\n  /** Options rendered as selectable 48×48 cells. Each: value, label?, disabled?. @see SelectTabOption */\n  options: SelectTabOption[];\n  /** Controlled selected value. Use with onChange. @default undefined */\n  value?: string;\n  /** Uncontrolled default selected value. @default undefined */\n  defaultValue?: string;\n  /** Called when the selected value changes. @default undefined */\n  onChange?: (value: string) => void;\n  /** Optional label at the end of the row (e.g. \"Submit\"). @default undefined */\n  submitLabel?: string;\n  /** Called when the submit label is clicked. @default undefined */\n  onSubmit?: () => void;\n  /** Disables all options. @default false */\n  disabled?: boolean;\n  /** Places the component in an error state. @default false */\n  error?: boolean;\n  /** Error message shown in the alert below the row when error is true. @default undefined */\n  errorMessage?: string;\n  /** When true, shows required asterisk next to the label. @default undefined */\n  required?: boolean;\n  /** Additional CSS class names on the outer wrapper. @default undefined */\n  className?: string;\n  /** Forwarded ref for the root div. @default undefined */\n  ref?: React.Ref<HTMLDivElement>;\n}\n\n// ---------------------------------------------------------------------------\n// Helpers\n// ---------------------------------------------------------------------------\n\nfunction ErrorIcon({ className }: { className?: string }) {\n  return (\n    <svg\n      className={className}\n      viewBox=\"0 0 20 20\"\n      fill=\"currentColor\"\n      aria-hidden=\"true\"\n    >\n      <path\n        fillRule=\"evenodd\"\n        d=\"M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z\"\n        clipRule=\"evenodd\"\n      />\n    </svg>\n  );\n}\n\n// ---------------------------------------------------------------------------\n// Component\n// ---------------------------------------------------------------------------\n\n/**\n * Tab-style single-selection row where each option is a 48×48 cell. Use for quantity,\n * size, or other small choice sets. Only one option can be selected (radio-like);\n * supports keyboard navigation (arrows, Home, End). For dropdown single-select use Select.\n *\n * @example\n * <SelectTab label=\"Quantity\" options={[{ value: '0', label: '0' }, { value: '1', label: '1' }]} submitLabel=\"Submit\" onSubmit={handleSubmit} />\n *\n * @example\n * <SelectTab label=\"Size\" value={size} onChange={setSize} options={sizeOptions} error={!!err} errorMessage={err} />\n */\nexport function SelectTab({\n  label,\n  secondaryLabel,\n  supportText,\n  options,\n  value: valueProp,\n  defaultValue,\n  onChange,\n  submitLabel,\n  onSubmit,\n  disabled = false,\n  error = false,\n  errorMessage,\n  required,\n  className = '',\n  ref,\n  ...rest\n}: SelectTabProps) {\n  const isControlled = valueProp !== undefined;\n  const [internal, setInternal] = React.useState(defaultValue ?? '');\n  const selected = isControlled ? valueProp : internal;\n\n  const itemRefs = useRef<(HTMLButtonElement | null)[]>([]);\n\n  const handleSelect = useCallback(\n    (val: string) => {\n      if (!isControlled) setInternal(val);\n      onChange?.(val);\n    },\n    [isControlled, onChange],\n  );\n\n  const focusItem = (idx: number) => {\n    itemRefs.current[idx]?.focus();\n  };\n\n  const handleKeyDown = (e: React.KeyboardEvent, idx: number) => {\n    const enabled = options\n      .map((o, i) => (o.disabled || disabled ? -1 : i))\n      .filter((i) => i !== -1);\n    const pos = enabled.indexOf(idx);\n\n    switch (e.key) {\n      case 'ArrowRight':\n      case 'ArrowDown': {\n        e.preventDefault();\n        const next = enabled[(pos + 1) % enabled.length];\n        focusItem(next);\n        break;\n      }\n      case 'ArrowLeft':\n      case 'ArrowUp': {\n        e.preventDefault();\n        const prev = enabled[(pos - 1 + enabled.length) % enabled.length];\n        focusItem(prev);\n        break;\n      }\n      case 'Home': {\n        e.preventDefault();\n        focusItem(enabled[0]);\n        break;\n      }\n      case 'End': {\n        e.preventDefault();\n        focusItem(enabled[enabled.length - 1]);\n        break;\n      }\n    }\n  };\n\n  const showErrorAlert = error && errorMessage;\n\n  return (\n    <div\n      ref={ref}\n      className={`flex flex-col gap-space-2 w-full ${className}`}\n      {...rest}\n    >\n      {/* Label + support text */}\n      {(label || supportText) && (\n        <div className=\"flex flex-col gap-space-1\">\n          {label && (\n            <span\n              className={`text-form-label ${disabled ? 'text-text-disabled' : 'text-text-primary'}`}\n            >\n              {label}\n              {secondaryLabel && (\n                <span className=\"text-text-secondary font-normal ml-1\">\n                  {secondaryLabel}\n                </span>\n              )}\n              {required && (\n                <span className=\"text-text-err ml-0.5\">*</span>\n              )}\n            </span>\n          )}\n          {supportText && (\n            <p className={`text-text-xs ${disabled ? 'text-text-disabled' : 'text-text-secondary'}`}>\n              {supportText}\n            </p>\n          )}\n        </div>\n      )}\n\n      {/* Tab row */}\n      <div\n        role=\"radiogroup\"\n        aria-label={label}\n        className=\"flex items-center gap-space-2 flex-wrap\"\n      >\n        {options.map((opt, i) => {\n          const isSelected = selected === opt.value;\n          const isItemDisabled = disabled || !!opt.disabled;\n\n          const cellClasses = [\n            'flex w-[48px] h-[48px] justify-center items-center',\n            'rounded-rad-md font-mono text-[12px] leading-[1.4]',\n            'outline-none transition-all duration-150',\n\n            isSelected && !isItemDisabled &&\n              'bg-green-900 text-neutral-0 border-border-sm border-green-900',\n\n            !isSelected && !isItemDisabled && !error &&\n              'border-border-sm border-border-form-primary bg-fill-form-primary text-text-primary',\n\n            !isSelected && !isItemDisabled && error &&\n              'border-border-sm border-border-err bg-fill-form-primary text-text-primary',\n\n            !isItemDisabled && !isSelected &&\n              'hover:border-border-form-primary-hover active:border-border-form-primary-active',\n\n            !isItemDisabled &&\n              'focus-visible:ring-[1.5px] focus-visible:ring-border-focus focus-visible:ring-offset-[3px]',\n\n            isItemDisabled && !isSelected &&\n              'border-border-sm border-border-form-primary-disabled bg-fill-form-primary-disabled text-text-disabled cursor-not-allowed',\n\n            isItemDisabled && isSelected &&\n              'bg-green-900/50 text-neutral-0/50 border-border-sm border-green-900/50 cursor-not-allowed',\n          ]\n            .filter(Boolean)\n            .join(' ');\n\n          return (\n            <button\n              key={opt.value}\n              ref={(el) => { itemRefs.current[i] = el; }}\n              type=\"button\"\n              role=\"radio\"\n              aria-checked={isSelected}\n              aria-disabled={isItemDisabled || undefined}\n              tabIndex={isSelected ? 0 : -1}\n              disabled={isItemDisabled}\n              className={cellClasses}\n              onClick={() => handleSelect(opt.value)}\n              onKeyDown={(e) => handleKeyDown(e, i)}\n            >\n              {opt.label ?? opt.value}\n            </button>\n          );\n        })}\n\n        {submitLabel && (\n          <button\n            type=\"button\"\n            disabled={disabled}\n            onClick={onSubmit}\n            className={`text-text-xs font-medium ml-space-1 ${\n              disabled\n                ? 'text-text-disabled cursor-not-allowed'\n                : 'text-text-primary hover:text-text-secondary'\n            }`}\n          >\n            {submitLabel}\n          </button>\n        )}\n      </div>\n\n      {/* Error alert */}\n      {showErrorAlert && (\n        <div\n          role=\"alert\"\n          className={`flex items-start gap-space-4 p-space-4 rounded-rad-md ${\n            disabled ? 'bg-fill-bg-secondary' : 'bg-fill-bg-err'\n          }`}\n        >\n          <ErrorIcon\n            className={`w-5 h-5 shrink-0 ${\n              disabled ? 'text-icon-primary-disabled' : 'text-icon-err'\n            }`}\n          />\n          <span\n            className={`text-text-xs ${\n              disabled ? 'text-text-disabled' : 'text-text-err'\n            }`}\n          >\n            {errorMessage}\n          </span>\n        </div>\n      )}\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;AA0DA;AACE;AACE;AAAC;AAAA;AACC;AACQ;AACH;AACO;AAEZ;AAAC;AAAA;AACU;AACP;AACO;AAAA;AAAA;AACX;AAGN;AAiBO;AAAmB;AACxB;AACA;AACA;AACA;AACO;AACP;AACA;AACA;AACA;AACW;AACH;AACR;AACA;AACY;AACZ;AAEF;AACE;AACA;AACA;AAEA;AAEA;AAAqB;AAEjB;AACA;AAAW;AACb;AACuB;AAGzB;;AACE;AAAuB;AAGzB;AACE;AAGA;AAEA;AAAU;AACH;AAEH;AACA;AACA;AACA;AAAA;AACF;AACK;AAEH;AACA;AACA;AACA;AAAA;AACF;AAEE;AACA;AACA;AAAA;AACF;AAEE;AACA;AACA;AAAA;AACF;AAAA;AAIJ;AAEA;AACE;AAAC;AAAA;AACC;AACwD;AACpD;AAGF;AAEG;AACC;AAAC;AAAA;AACoF;AAElF;AAAA;AAIC;AAGwC;AAAA;AAAA;AAAA;AAO5C;AAEJ;AAIF;AAAC;AAAA;AACM;AACO;AACF;AAET;AACC;AACA;AAEA;AAAoB;AAClB;AACA;AACA;AAGE;AAGA;AAGA;AAGA;AAGA;AAGA;AAGA;AAKJ;AACE;AAAC;AAAA;AAEgB;AAAsB;AAAI;AACpC;AACA;AACS;AACmB;AACN;AACjB;AACC;AAC0B;AACD;AAElB;AAAA;AAZT;AAAA;AAed;AAGC;AAAC;AAAA;AACM;AACL;AACS;AAKT;AAEC;AAAA;AAAA;AACH;AAAA;AAAA;AAMF;AAAC;AAAA;AACM;AAGL;AAEA;AAAA;AAAC;AAAA;AAGC;AAAA;AAAA;AAEF;AAAC;AAAA;AAGC;AAEC;AAAA;AAAA;AACH;AAAA;AAAA;AACF;AAAA;AAIR;;;;"}