@stackone/malachite 2.42.2 → 2.44.0

package/dist/components/SegmentedControl.js

@@ -1,7 +1,7 @@
-import { jsx as g, jsxs as I } from "react/jsx-runtime";
+import { jsx as u, jsxs as I } from "react/jsx-runtime";
 import { useRef as $, useCallback as A } from "react";
 import { FOCUS_RING as E } from "./focusRing.js";
-const D = {
+const N = {
   small: {
     text: "text-[length:var(--malachite-font-size-small,13px)]",
     track: "h-[var(--malachite-control-height-small,28px)]",
@@ -17,81 +17,83 @@ const D = {
     track: "h-[var(--malachite-control-height-large,42px)]",
     item: "h-full px-4"
   }
-}, N = /* @__PURE__ */ new Set(["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown", "Home", "End"]), j = "inline-flex items-center justify-center gap-1.5 rounded-[var(--malachite-radius-10,10px)] border-0 font-medium tracking-[0.13px] whitespace-nowrap transition-colors duration-150 ease-in-out", K = ({
-  options: n,
-  value: s,
+}, D = /* @__PURE__ */ new Set(["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown", "Home", "End"]), j = "inline-flex items-center justify-center gap-1.5 rounded-[var(--malachite-radius-10,10px)] border-0 font-medium tracking-[0.13px] whitespace-nowrap transition-colors duration-150 ease-in-out", B = ({
+  options: s,
+  value: o,
   onChange: d,
   size: b = "medium",
-  fullWidth: u = !1,
-  disabled: o = !1,
+  fullWidth: x = !1,
+  disabled: c = !1,
   "aria-label": p,
   "aria-labelledby": k,
   className: v = ""
 }) => {
-  const x = $([]), m = D[b], f = n.findIndex((e) => e.value === s), w = f >= 0 && !n[f].disabled ? f : n.findIndex((e) => !e.disabled), y = A(
+  const g = $([]), m = N[b], h = s.findIndex((e) => e.value === o), w = h >= 0 && !s[h].disabled ? h : s.findIndex((e) => !e.disabled), y = A(
     (e) => {
-      var c;
-      if (o || !N.has(e.key))
+      var n;
+      if (c || !D.has(e.key))
         return;
-      const t = n.reduce((i, h, S) => (h.disabled || i.push({ option: h, index: S }), i), []);
+      const t = s.reduce((l, f, S) => (f.disabled || l.push({ option: f, index: S }), l), []);
       if (t.length === 0)
         return;
       e.preventDefault();
-      const l = t.findIndex(({ option: i }) => i.value === s);
-      let r;
+      const r = t.findIndex(({ option: l }) => l.value === o);
+      let a;
       if (e.key === "Home")
-        r = 0;
+        a = 0;
       else if (e.key === "End")
-        r = t.length - 1;
+        a = t.length - 1;
       else {
-        const i = e.key === "ArrowLeft" || e.key === "ArrowUp" ? -1 : 1;
-        r = ((l === -1 ? 0 : l) + i + t.length) % t.length;
+        const l = e.key === "ArrowLeft" || e.key === "ArrowUp" ? -1 : 1;
+        a = ((r === -1 ? 0 : r) + l + t.length) % t.length;
       }
-      const a = t[r];
-      a.option.value !== s && d(a.option.value), (c = x.current[a.index]) == null || c.focus();
+      const i = t[a];
+      i.option.value !== o && d(i.option.value), (n = g.current[i.index]) == null || n.focus();
     },
-    [o, d, n, s]
+    [c, d, s, o]
   );
-  return /* @__PURE__ */ g(
+  return /* @__PURE__ */ u(
     "div",
     {
       role: "radiogroup",
       "aria-label": p,
       "aria-labelledby": k,
-      "aria-disabled": o || void 0,
+      "aria-disabled": c || void 0,
       onKeyDown: y,
       className: `${// One display utility, not two: `flex` and `inline-flex` are both plain
       // `display` utilities, so emitting both would resolve by stylesheet order
       // (same hazard as the background above).
-      u ? "flex w-full" : "inline-flex"} ${m.track} items-center gap-1 p-0.5 rounded-xl bg-[var(--malachite-segmented-control-track-background)] ${o ? "opacity-50" : ""} ${v}`,
-      children: n.map((e, t) => {
-        const l = e.value === s, r = o || e.disabled;
-        let a;
-        return l ? a = "bg-[var(--malachite-segmented-control-selected-background)] text-[var(--malachite-segmented-control-selected-foreground)]" : r ? a = "bg-transparent text-[var(--malachite-segmented-control-item-foreground)]" : a = "bg-transparent text-[var(--malachite-segmented-control-item-foreground)] hover:text-[var(--malachite-segmented-control-item-hover-foreground)] cursor-pointer", /* @__PURE__ */ I(
+      x ? "flex w-full" : "inline-flex"} ${m.track} items-center gap-1 p-0.5 rounded-xl bg-[var(--malachite-segmented-control-track-background)] ${c ? "opacity-50" : ""} ${v}`,
+      children: s.map((e, t) => {
+        const r = e.value === o, a = c || e.disabled, i = e.badge !== void 0 && e.badge !== null && e.badge !== !1;
+        let n;
+        return r ? n = "bg-[var(--malachite-segmented-control-selected-background)] text-[var(--malachite-segmented-control-selected-foreground)]" : a ? n = "bg-transparent text-[var(--malachite-segmented-control-item-foreground)]" : n = "bg-transparent text-[var(--malachite-segmented-control-item-foreground)] hover:text-[var(--malachite-segmented-control-item-hover-foreground)] cursor-pointer", /* @__PURE__ */ I(
           "button",
           {
-            ref: (c) => {
-              x.current[t] = c;
+            ref: (l) => {
+              g.current[t] = l;
             },
             type: "button",
             role: "radio",
-            "aria-checked": l,
-            disabled: r,
+            "aria-checked": r,
+            disabled: a,
             tabIndex: t === w ? 0 : -1,
             onClick: () => {
-              !r && !l && d(e.value);
+              !a && !r && d(e.value);
             },
-            className: `${E} ${j} ${m.text} ${m.item} ${a} ${u ? "flex-1" : ""} ${e.disabled && !o ? "opacity-50 cursor-not-allowed" : ""}`,
+            className: `${E} ${j} ${m.text} ${m.item} ${n} ${x ? "flex-1" : ""} ${e.disabled && !c ? "opacity-50 cursor-not-allowed" : ""}`,
             style: {
               // Inline rather than a `shadow-[...]` class: Tailwind's shadow
               // utilities compose `--tw-shadow-*` custom properties that rely on
               // document-level @property registration and silently don't paint
               // inside a shadow root (same caveat as `ring-*`).
-              boxShadow: l ? "var(--malachite-segmented-control-selected-shadow, 0px 1px 5px 0px rgba(0, 0, 0, 0.1))" : void 0
+              boxShadow: r ? "var(--malachite-segmented-control-selected-shadow, 0px 1px 5px 0px rgba(0, 0, 0, 0.1))" : void 0
             },
             children: [
-              e.icon ? /* @__PURE__ */ g("span", { className: "inline-flex items-center justify-center w-4 h-4 shrink-0", children: e.icon }) : null,
-              e.label
+              e.icon ? /* @__PURE__ */ u("span", { className: "inline-flex items-center justify-center w-4 h-4 shrink-0", children: e.icon }) : null,
+              e.label,
+              i ? " " : null,
+              i ? /* @__PURE__ */ u("span", { className: "inline-flex items-center shrink-0", children: e.badge }) : null
             ]
           },
           e.value
@@ -101,7 +103,7 @@ const D = {
   );
 };
 export {
-  K as SegmentedControl,
-  K as default
+  B as SegmentedControl,
+  B as default
 };
 //# sourceMappingURL=SegmentedControl.js.map

package/dist/components/SegmentedControl.js.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControl.js","sources":["../../src/components/SegmentedControl.tsx"],"sourcesContent":["import React, { useCallback, useRef } from 'react';\nimport { FOCUS_RING } from './focusRing';\n\ntype SegmentedControlSize = 'small' | 'medium' | 'large';\n\ninterface SegmentedControlOption<T extends string = string> {\n    value: T;\n    label: string;\n    icon?: React.ReactNode;\n    disabled?: boolean;\n}\n\ninterface SegmentedControlProps<T extends string = string> {\n    options: SegmentedControlOption<T>[];\n    /** The selected option's value. A value not present in `options` renders nothing selected. */\n    value: T;\n    onChange: (value: T) => void;\n    size?: SegmentedControlSize;\n    /** Stretch the track to its container and split it into equal segments. */\n    fullWidth?: boolean;\n    /** Disables every segment. Individual segments can also be disabled via `options`. */\n    disabled?: boolean;\n    'aria-label'?: string;\n    'aria-labelledby'?: string;\n    className?: string;\n}\n\n// The ladder governs a control's outer box. The height therefore sits on the track and\n// the items fill whatever the 4px inset leaves — putting it on the item instead makes a\n// `medium` segmented control 40px tall beside a 32px Dropdown.\nconst SIZE_CLASSES: Record<SegmentedControlSize, { text: string; track: string; item: string }> = {\n    small: {\n        text: 'text-[length:var(--malachite-font-size-small,13px)]',\n        track: 'h-[var(--malachite-control-height-small,28px)]',\n        item: 'h-full px-2.5',\n    },\n    medium: {\n        text: 'text-[length:var(--malachite-font-size-small,13px)]',\n        track: 'h-[var(--malachite-control-height-medium,32px)]',\n        item: 'h-full px-2.5',\n    },\n    large: {\n        text: 'text-[length:var(--malachite-font-size-15,15px)]',\n        track: 'h-[var(--malachite-control-height-large,42px)]',\n        item: 'h-full px-4',\n    },\n};\n\n/** Arrow keys move AND select, per the WAI-ARIA radiogroup pattern. */\nconst NAV_KEYS = new Set(['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Home', 'End']);\n\n// Deliberately no `bg-*` here: each state branch below supplies exactly one\n// background-color utility. Both `bg-transparent` and `bg-[var(--…)]` are plain\n// single-class utilities in the same `@layer utilities`, so an element carrying both\n// resolves by stylesheet order — and the arbitrary value loses, silently rendering the\n// selected thumb transparent.\nconst ITEM_BASE =\n    'inline-flex items-center justify-center gap-1.5 rounded-[var(--malachite-radius-10,10px)] border-0 font-medium tracking-[0.13px] whitespace-nowrap transition-colors duration-150 ease-in-out';\n\n/**\n * A rounded track of mutually-exclusive options — the segmented \"one of these\" control.\n *\n * Owns the track background, the selected-thumb chrome and the radiogroup semantics in\n * one place, so consumers never hand-roll a track around `PillButton` (whose `default`\n * variant tokens are tuned for standalone filter pills, not for a sunken track).\n *\n * Selection is conveyed non-visually via `role=\"radio\"` + `aria-checked`, and by a\n * foreground-colour change as well as the thumb, so it does not rest on background\n * colour alone.\n */\nconst SegmentedControl = <T extends string = string>({\n    options,\n    value,\n    onChange,\n    size = 'medium',\n    fullWidth = false,\n    disabled = false,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    className = '',\n}: SegmentedControlProps<T>) => {\n    const itemRefs = useRef<(HTMLButtonElement | null)[]>([]);\n    const sizeBlock = SIZE_CLASSES[size];\n\n    const selectedIndex = options.findIndex((option) => option.value === value);\n    // Roving tabindex: the group is a single tab stop. When the selected option is\n    // missing or disabled, the first enabled option takes the stop so the control is\n    // still reachable by keyboard.\n    const selectedIsEnabled = selectedIndex >= 0 && !options[selectedIndex].disabled;\n    const tabStopIndex = selectedIsEnabled\n        ? selectedIndex\n        : options.findIndex((option) => !option.disabled);\n\n    const handleKeyDown = useCallback(\n        (event: React.KeyboardEvent) => {\n            if (disabled || !NAV_KEYS.has(event.key)) {\n                return;\n            }\n\n            const enabled = options.reduce<\n                Array<{ option: SegmentedControlOption<T>; index: number }>\n            >((acc, option, index) => {\n                if (!option.disabled) {\n                    acc.push({ option, index });\n                }\n                return acc;\n            }, []);\n            if (enabled.length === 0) {\n                return;\n            }\n\n            // Only once we know we'll act — otherwise Home/End etc. should still scroll.\n            event.preventDefault();\n\n            const currentPosition = enabled.findIndex(({ option }) => option.value === value);\n            let nextPosition: number;\n            if (event.key === 'Home') {\n                nextPosition = 0;\n            } else if (event.key === 'End') {\n                nextPosition = enabled.length - 1;\n            } else {\n                const delta = event.key === 'ArrowLeft' || event.key === 'ArrowUp' ? -1 : 1;\n                const from = currentPosition === -1 ? 0 : currentPosition;\n                nextPosition = (from + delta + enabled.length) % enabled.length;\n            }\n\n            const next = enabled[nextPosition];\n            if (next.option.value !== value) {\n                onChange(next.option.value);\n            }\n            itemRefs.current[next.index]?.focus();\n        },\n        [disabled, onChange, options, value],\n    );\n\n    return (\n        <div\n            role=\"radiogroup\"\n            aria-label={ariaLabel}\n            aria-labelledby={ariaLabelledBy}\n            aria-disabled={disabled || undefined}\n            onKeyDown={handleKeyDown}\n            className={`${\n                // One display utility, not two: `flex` and `inline-flex` are both plain\n                // `display` utilities, so emitting both would resolve by stylesheet order\n                // (same hazard as the background above).\n                fullWidth ? 'flex w-full' : 'inline-flex'\n            } ${sizeBlock.track} items-center gap-1 p-0.5 rounded-xl bg-[var(--malachite-segmented-control-track-background)] ${\n                disabled ? 'opacity-50' : ''\n            } ${className}`}\n        >\n            {options.map((option, index) => {\n                const isSelected = option.value === value;\n                const isDisabled = disabled || option.disabled;\n\n                let colorClasses: string;\n                if (isSelected) {\n                    colorClasses =\n                        'bg-[var(--malachite-segmented-control-selected-background)] text-[var(--malachite-segmented-control-selected-foreground)]';\n                } else if (isDisabled) {\n                    colorClasses =\n                        'bg-transparent text-[var(--malachite-segmented-control-item-foreground)]';\n                } else {\n                    colorClasses =\n                        'bg-transparent text-[var(--malachite-segmented-control-item-foreground)] hover:text-[var(--malachite-segmented-control-item-hover-foreground)] cursor-pointer';\n                }\n\n                return (\n                    <button\n                        key={option.value}\n                        ref={(element) => {\n                            itemRefs.current[index] = element;\n                        }}\n                        type=\"button\"\n                        role=\"radio\"\n                        aria-checked={isSelected}\n                        disabled={isDisabled}\n                        tabIndex={index === tabStopIndex ? 0 : -1}\n                        onClick={() => {\n                            // Radios don't toggle off on re-click.\n                            if (!isDisabled && !isSelected) {\n                                onChange(option.value);\n                            }\n                        }}\n                        className={`${FOCUS_RING} ${ITEM_BASE} ${sizeBlock.text} ${sizeBlock.item} ${colorClasses} ${\n                            fullWidth ? 'flex-1' : ''\n                        } ${option.disabled && !disabled ? 'opacity-50 cursor-not-allowed' : ''}`}\n                        style={{\n                            // Inline rather than a `shadow-[...]` class: Tailwind's shadow\n                            // utilities compose `--tw-shadow-*` custom properties that rely on\n                            // document-level @property registration and silently don't paint\n                            // inside a shadow root (same caveat as `ring-*`).\n                            boxShadow: isSelected\n                                ? 'var(--malachite-segmented-control-selected-shadow, 0px 1px 5px 0px rgba(0, 0, 0, 0.1))'\n                                : undefined,\n                        }}\n                    >\n                        {option.icon ? (\n                            <span className=\"inline-flex items-center justify-center w-4 h-4 shrink-0\">\n                                {option.icon}\n                            </span>\n                        ) : null}\n                        {option.label}\n                    </button>\n                );\n            })}\n        </div>\n    );\n};\n\nexport default SegmentedControl;\nexport { SegmentedControl };\nexport type { SegmentedControlProps, SegmentedControlOption, SegmentedControlSize };\n"],"names":["SIZE_CLASSES","NAV_KEYS","ITEM_BASE","SegmentedControl","options","value","onChange","size","fullWidth","disabled","ariaLabel","ariaLabelledBy","className","itemRefs","useRef","sizeBlock","selectedIndex","option","tabStopIndex","handleKeyDown","useCallback","event","enabled","acc","index","currentPosition","nextPosition","delta","next","_a","jsx","isSelected","isDisabled","colorClasses","jsxs","element","FOCUS_RING"],"mappings":"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"}
+{"version":3,"file":"SegmentedControl.js","sources":["../../src/components/SegmentedControl.tsx"],"sourcesContent":["import React, { useCallback, useRef } from 'react';\nimport { FOCUS_RING } from './focusRing';\n\ntype SegmentedControlSize = 'small' | 'medium' | 'large';\n\ninterface SegmentedControlOption<T extends string = string> {\n    value: T;\n    label: string;\n    icon?: React.ReactNode;\n    /**\n     * Small mark after the label, e.g. a compact `Tag` naming a saving. It renders inside\n     * the segment's `<button>`, so it must not be interactive — no `onClick` or `onRemove`.\n     */\n    badge?: React.ReactNode;\n    disabled?: boolean;\n}\n\ninterface SegmentedControlProps<T extends string = string> {\n    options: SegmentedControlOption<T>[];\n    /** The selected option's value. A value not present in `options` renders nothing selected. */\n    value: T;\n    onChange: (value: T) => void;\n    size?: SegmentedControlSize;\n    /** Stretch the track to its container and split it into equal segments. */\n    fullWidth?: boolean;\n    /** Disables every segment. Individual segments can also be disabled via `options`. */\n    disabled?: boolean;\n    'aria-label'?: string;\n    'aria-labelledby'?: string;\n    className?: string;\n}\n\n// The ladder governs a control's outer box. The height therefore sits on the track and\n// the items fill whatever the 4px inset leaves — putting it on the item instead makes a\n// `medium` segmented control 40px tall beside a 32px Dropdown.\nconst SIZE_CLASSES: Record<SegmentedControlSize, { text: string; track: string; item: string }> = {\n    small: {\n        text: 'text-[length:var(--malachite-font-size-small,13px)]',\n        track: 'h-[var(--malachite-control-height-small,28px)]',\n        item: 'h-full px-2.5',\n    },\n    medium: {\n        text: 'text-[length:var(--malachite-font-size-small,13px)]',\n        track: 'h-[var(--malachite-control-height-medium,32px)]',\n        item: 'h-full px-2.5',\n    },\n    large: {\n        text: 'text-[length:var(--malachite-font-size-15,15px)]',\n        track: 'h-[var(--malachite-control-height-large,42px)]',\n        item: 'h-full px-4',\n    },\n};\n\n/** Arrow keys move AND select, per the WAI-ARIA radiogroup pattern. */\nconst NAV_KEYS = new Set(['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Home', 'End']);\n\n// Deliberately no `bg-*` here: each state branch below supplies exactly one\n// background-color utility. Both `bg-transparent` and `bg-[var(--…)]` are plain\n// single-class utilities in the same `@layer utilities`, so an element carrying both\n// resolves by stylesheet order — and the arbitrary value loses, silently rendering the\n// selected thumb transparent.\nconst ITEM_BASE =\n    'inline-flex items-center justify-center gap-1.5 rounded-[var(--malachite-radius-10,10px)] border-0 font-medium tracking-[0.13px] whitespace-nowrap transition-colors duration-150 ease-in-out';\n\n/**\n * A rounded track of mutually-exclusive options — the segmented \"one of these\" control.\n *\n * Owns the track background, the selected-thumb chrome and the radiogroup semantics in\n * one place, so consumers never hand-roll a track around `PillButton` (whose `default`\n * variant tokens are tuned for standalone filter pills, not for a sunken track).\n *\n * Selection is conveyed non-visually via `role=\"radio\"` + `aria-checked`, and by a\n * foreground-colour change as well as the thumb, so it does not rest on background\n * colour alone.\n */\nconst SegmentedControl = <T extends string = string>({\n    options,\n    value,\n    onChange,\n    size = 'medium',\n    fullWidth = false,\n    disabled = false,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    className = '',\n}: SegmentedControlProps<T>) => {\n    const itemRefs = useRef<(HTMLButtonElement | null)[]>([]);\n    const sizeBlock = SIZE_CLASSES[size];\n\n    const selectedIndex = options.findIndex((option) => option.value === value);\n    // Roving tabindex: the group is a single tab stop. When the selected option is\n    // missing or disabled, the first enabled option takes the stop so the control is\n    // still reachable by keyboard.\n    const selectedIsEnabled = selectedIndex >= 0 && !options[selectedIndex].disabled;\n    const tabStopIndex = selectedIsEnabled\n        ? selectedIndex\n        : options.findIndex((option) => !option.disabled);\n\n    const handleKeyDown = useCallback(\n        (event: React.KeyboardEvent) => {\n            if (disabled || !NAV_KEYS.has(event.key)) {\n                return;\n            }\n\n            const enabled = options.reduce<\n                Array<{ option: SegmentedControlOption<T>; index: number }>\n            >((acc, option, index) => {\n                if (!option.disabled) {\n                    acc.push({ option, index });\n                }\n                return acc;\n            }, []);\n            if (enabled.length === 0) {\n                return;\n            }\n\n            // Only once we know we'll act — otherwise Home/End etc. should still scroll.\n            event.preventDefault();\n\n            const currentPosition = enabled.findIndex(({ option }) => option.value === value);\n            let nextPosition: number;\n            if (event.key === 'Home') {\n                nextPosition = 0;\n            } else if (event.key === 'End') {\n                nextPosition = enabled.length - 1;\n            } else {\n                const delta = event.key === 'ArrowLeft' || event.key === 'ArrowUp' ? -1 : 1;\n                const from = currentPosition === -1 ? 0 : currentPosition;\n                nextPosition = (from + delta + enabled.length) % enabled.length;\n            }\n\n            const next = enabled[nextPosition];\n            if (next.option.value !== value) {\n                onChange(next.option.value);\n            }\n            itemRefs.current[next.index]?.focus();\n        },\n        [disabled, onChange, options, value],\n    );\n\n    return (\n        <div\n            role=\"radiogroup\"\n            aria-label={ariaLabel}\n            aria-labelledby={ariaLabelledBy}\n            aria-disabled={disabled || undefined}\n            onKeyDown={handleKeyDown}\n            className={`${\n                // One display utility, not two: `flex` and `inline-flex` are both plain\n                // `display` utilities, so emitting both would resolve by stylesheet order\n                // (same hazard as the background above).\n                fullWidth ? 'flex w-full' : 'inline-flex'\n            } ${sizeBlock.track} items-center gap-1 p-0.5 rounded-xl bg-[var(--malachite-segmented-control-track-background)] ${\n                disabled ? 'opacity-50' : ''\n            } ${className}`}\n        >\n            {options.map((option, index) => {\n                const isSelected = option.value === value;\n                const isDisabled = disabled || option.disabled;\n                const hasBadge =\n                    option.badge !== undefined && option.badge !== null && option.badge !== false;\n\n                let colorClasses: string;\n                if (isSelected) {\n                    colorClasses =\n                        'bg-[var(--malachite-segmented-control-selected-background)] text-[var(--malachite-segmented-control-selected-foreground)]';\n                } else if (isDisabled) {\n                    colorClasses =\n                        'bg-transparent text-[var(--malachite-segmented-control-item-foreground)]';\n                } else {\n                    colorClasses =\n                        'bg-transparent text-[var(--malachite-segmented-control-item-foreground)] hover:text-[var(--malachite-segmented-control-item-hover-foreground)] cursor-pointer';\n                }\n\n                return (\n                    <button\n                        key={option.value}\n                        ref={(element) => {\n                            itemRefs.current[index] = element;\n                        }}\n                        type=\"button\"\n                        role=\"radio\"\n                        aria-checked={isSelected}\n                        disabled={isDisabled}\n                        tabIndex={index === tabStopIndex ? 0 : -1}\n                        onClick={() => {\n                            // Radios don't toggle off on re-click.\n                            if (!isDisabled && !isSelected) {\n                                onChange(option.value);\n                            }\n                        }}\n                        className={`${FOCUS_RING} ${ITEM_BASE} ${sizeBlock.text} ${sizeBlock.item} ${colorClasses} ${\n                            fullWidth ? 'flex-1' : ''\n                        } ${option.disabled && !disabled ? 'opacity-50 cursor-not-allowed' : ''}`}\n                        style={{\n                            // Inline rather than a `shadow-[...]` class: Tailwind's shadow\n                            // utilities compose `--tw-shadow-*` custom properties that rely on\n                            // document-level @property registration and silently don't paint\n                            // inside a shadow root (same caveat as `ring-*`).\n                            boxShadow: isSelected\n                                ? 'var(--malachite-segmented-control-selected-shadow, 0px 1px 5px 0px rgba(0, 0, 0, 0.1))'\n                                : undefined,\n                        }}\n                    >\n                        {option.icon ? (\n                            <span className=\"inline-flex items-center justify-center w-4 h-4 shrink-0\">\n                                {option.icon}\n                            </span>\n                        ) : null}\n                        {option.label}\n                        {/* The space keeps the name \"Annual Save\" rather than \"AnnualSave\";\n                            the flex gap already spaces the two visually. */}\n                        {hasBadge ? ' ' : null}\n                        {hasBadge ? (\n                            <span className=\"inline-flex items-center shrink-0\">\n                                {option.badge}\n                            </span>\n                        ) : null}\n                    </button>\n                );\n            })}\n        </div>\n    );\n};\n\nexport default SegmentedControl;\nexport { SegmentedControl };\nexport type { SegmentedControlProps, SegmentedControlOption, SegmentedControlSize };\n"],"names":["SIZE_CLASSES","NAV_KEYS","ITEM_BASE","SegmentedControl","options","value","onChange","size","fullWidth","disabled","ariaLabel","ariaLabelledBy","className","itemRefs","useRef","sizeBlock","selectedIndex","option","tabStopIndex","handleKeyDown","useCallback","event","enabled","acc","index","currentPosition","nextPosition","delta","next","_a","jsx","isSelected","isDisabled","hasBadge","colorClasses","jsxs","element","FOCUS_RING"],"mappings":"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"}