{"version":3,"file":"SegmentedControl.cjs","names":[],"sources":["../../../src/components/SegmentedControl/SegmentedControl.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./SegmentedControl.module.css\";\n\nexport interface SegmentedControlOption<TValue extends string = string> {\n    value: TValue;\n    label: ReactNode;\n    icon?: ReactNode;\n    disabled?: boolean;\n}\n\nexport interface SegmentedControlProps<TValue extends string = string> extends Omit<\n    HTMLAttributes<HTMLDivElement>,\n    \"onChange\"\n> {\n    /** Available segments. */\n    options: SegmentedControlOption<TValue>[];\n    /** Selected value. */\n    value: TValue;\n    /** Fires with the new value when a segment is selected. */\n    onChange: (value: TValue) => void;\n    /** Visual size. Default `\"md\"`. */\n    size?: \"sm\" | \"md\" | \"lg\";\n    /** Stretch to full width of container. Default `false`. */\n    fullWidth?: boolean;\n    /** Group label for screen readers. */\n    \"aria-label\"?: string;\n}\n\n/**\n * iOS-style segmented control. Two-to-five mutually-exclusive options\n * rendered as a single connected pill bar.\n *\n * @example\n * <SegmentedControl\n *     value={view}\n *     onChange={setView}\n *     options={[\n *         { value: \"list\", label: \"Lista\" },\n *         { value: \"grid\", label: \"Grade\" },\n *     ]}\n * />\n */\nexport function SegmentedControl<TValue extends string = string>({\n    options,\n    value,\n    onChange,\n    size = \"md\",\n    fullWidth = false,\n    className,\n    \"aria-label\": ariaLabel,\n    ...props\n}: SegmentedControlProps<TValue>) {\n    return (\n        <div\n            role=\"radiogroup\"\n            aria-label={ariaLabel}\n            className={cn(styles.group, styles[size], fullWidth && styles.fullWidth, className)}\n            {...props}\n        >\n            {options.map((option) => {\n                const selected = option.value === value;\n                return (\n                    <button\n                        key={option.value}\n                        type=\"button\"\n                        role=\"radio\"\n                        aria-checked={selected}\n                        disabled={option.disabled}\n                        className={cn(styles.segment, selected && styles.active)}\n                        onClick={() => onChange(option.value)}\n                    >\n                        {option.icon && <span className={styles.icon}>{option.icon}</span>}\n                        <span className={styles.label}>{option.label}</span>\n                    </button>\n                );\n            })}\n        </div>\n    );\n}\n"],"mappings":"oHA2CA,SAAgB,EAAiD,CAC7D,UACA,QACA,WACA,OAAO,KACP,YAAY,GACZ,YACA,aAAc,EACd,GAAG,GAC2B,CAC9B,OACI,EAAA,EAAA,IAAA,CAAC,MAAD,CACI,KAAK,aACL,aAAY,EACZ,UAAW,EAAA,GAAG,EAAA,QAAO,MAAO,EAAA,QAAO,GAAO,GAAa,EAAA,QAAO,UAAW,CAAS,EAClF,GAAI,EAEH,SAAA,EAAQ,IAAK,GAAW,CACrB,IAAM,EAAW,EAAO,QAAU,EAClC,OACI,EAAA,EAAA,KAAA,CAAC,SAAD,CAEI,KAAK,SACL,KAAK,QACL,eAAc,EACd,SAAU,EAAO,SACjB,UAAW,EAAA,GAAG,EAAA,QAAO,QAAS,GAAY,EAAA,QAAO,MAAM,EACvD,YAAe,EAAS,EAAO,KAAK,EAPxC,SAAA,CASK,EAAO,OAAQ,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAW,EAAA,QAAO,KAAO,SAAA,EAAO,IAAW,CAAA,GACjE,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAW,EAAA,QAAO,MAAQ,SAAA,EAAO,KAAY,CAAA,CAC/C,CAVC,EAAA,EAAO,KAUR,CAEhB,CAAC,CACA,CAAA,CAEb"}