@fanvue/ui 3.9.0 → 3.11.0

package/dist/components/DatePicker/DatePicker.mjs

@@ -7,16 +7,17 @@ import { Button } from "../Button/Button.mjs";
 import { ChevronLeftIcon } from "../Icons/ChevronLeftIcon.mjs";
 import { ChevronRightIcon } from "../Icons/ChevronRightIcon.mjs";
 function Day({ day, modifiers, className, ...divProps }) {
-  const { range_start, range_end } = modifiers;
+  const { range_start, range_end, range_middle } = modifiers;
   const isSingleDayRange = range_start && range_end;
+  const inRange = (range_start || range_end || range_middle) && !isSingleDayRange;
   return /* @__PURE__ */ jsx(
     "div",
     {
       className: cn(
         className,
-        (range_start || range_end) && !isSingleDayRange && "from-50% from-transparent to-50%",
-        range_start && !isSingleDayRange && "bg-linear-to-r to-brand-primary-muted",
-        range_end && !isSingleDayRange && "bg-linear-to-l to-brand-primary-muted"
+        inRange && "bg-inputs-calendar-range",
+        inRange && range_start && "rounded-l-sm",
+        inRange && range_end && "rounded-r-sm"
       ),
       ...divProps
     }
@@ -27,21 +28,23 @@ function DayButton({ day, modifiers, className, ...buttonProps }) {
   useEffect(() => {
     if (modifiers.focused) ref.current?.focus();
   }, [modifiers.focused]);
+  const isSelected = modifiers.selected && !modifiers.range_middle;
   return /* @__PURE__ */ jsx(
     "button",
     {
       ref,
       type: "button",
       className: cn(
-        "relative z-10 inline-flex size-10 cursor-pointer items-center justify-center rounded-xs",
-        "typography-body-small-14px-regular",
-        "transition-colors hover:bg-brand-primary-muted not-disabled:active:bg-brand-primary-muted",
-        "focus-visible:outline-2 focus-visible:outline-brand-secondary-default focus-visible:outline-offset-[-2px]",
-        "disabled:cursor-not-allowed disabled:opacity-50",
-        modifiers.today && !modifiers.selected && "border border-brand-primary-default",
-        modifiers.selected && !modifiers.range_middle ? "bg-brand-primary-default text-content-always-black hover:bg-brand-primary-default" : "text-content-primary",
-        modifiers.range_middle && "rounded-none bg-transparent",
-        modifiers.outside && "pointer-events-none opacity-50"
+        "relative z-10 inline-flex size-10 cursor-pointer items-center justify-center rounded-sm text-content-primary",
+        "transition-colors hover:bg-inputs-calendar-range not-disabled:active:bg-inputs-calendar-range",
+        "focus-visible:shadow-focus-ring focus-visible:outline-none",
+        "disabled:cursor-not-allowed",
+        isSelected ? "typography-body-small-14px-semibold" : "typography-body-small-14px-regular",
+        modifiers.today && !isSelected && "bg-inputs-calendar-today text-content-always-white hover:bg-inputs-calendar-today",
+        isSelected && "bg-inputs-calendar-selected text-content-primary-inverted hover:bg-inputs-calendar-selected",
+        modifiers.range_middle && "bg-transparent hover:bg-transparent",
+        modifiers.disabled && "bg-inputs-calendar-disabled text-content-disabled hover:bg-inputs-calendar-disabled",
+        modifiers.outside && "pointer-events-none text-content-disabled"
       ),
       ...buttonProps
     }
@@ -89,7 +92,7 @@ const DatePicker = forwardRef(
       {
         ref,
         className: cn(
-          "inline-flex flex-col rounded-md border border-neutral-alphas-200 bg-background-primary shadow-blur-menu backdrop-blur-sm",
+          "inline-flex flex-col rounded-xl border border-modal-stroke bg-modal-background p-6 shadow-blur-menu backdrop-blur-sm",
           className
         ),
         children: [
@@ -99,29 +102,23 @@ const DatePicker = forwardRef(
               showOutsideDays: true,
               numberOfMonths,
               formatters: {
-                formatCaption: (date) => date.toLocaleDateString("en-US", { month: "short", year: "numeric" }),
+                formatCaption: (date) => date.toLocaleDateString("en-US", { month: "long", year: "numeric" }),
                 ...formatters
               },
               classNames: {
                 root: "w-full",
-                months: "relative flex",
+                months: cn("relative flex", isMulti && "gap-6"),
                 month: "flex flex-1 flex-col",
-                month_caption: cn("flex items-center py-4", isMulti ? "justify-center px-2" : "px-5"),
-                caption_label: "typography-body-default-16px-semibold text-content-primary",
-                nav: cn(
-                  "absolute top-4 z-20 flex",
-                  isMulti ? "pointer-events-none inset-x-3 justify-between" : "right-3 gap-1"
-                ),
-                button_previous: "pointer-events-auto inline-flex size-8 cursor-pointer items-center justify-center rounded-full text-content-primary transition-colors hover:bg-brand-primary-muted not-disabled:active:bg-brand-primary-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-secondary-default disabled:cursor-not-allowed disabled:opacity-50",
-                // !TODO https://linear.app/fanvue/issue/ENG-7301/swap-out-typography-tailwind-utility-classes
-                button_next: "pointer-events-auto inline-flex size-8 cursor-pointer items-center justify-center rounded-full text-content-primary transition-colors hover:bg-brand-primary-muted not-disabled:active:bg-brand-primary-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-secondary-default disabled:cursor-not-allowed disabled:opacity-50",
-                // !TODO https://linear.app/fanvue/issue/ENG-7301/swap-out-typography-tailwind-utility-classes
-                month_grid: cn("mb-4", isMulti ? "mx-2" : "mx-4"),
+                month_caption: "mb-4 flex h-8 items-center justify-center",
+                caption_label: "typography-body-default-16px-regular text-content-primary",
+                nav: "absolute inset-x-0 top-0 z-20 flex justify-between",
+                button_previous: "pointer-events-auto inline-flex size-8 cursor-pointer items-center justify-center rounded-full bg-buttons-secondary-default text-content-primary transition-colors hover:bg-buttons-secondary-hover focus-visible:shadow-focus-ring focus-visible:outline-none disabled:cursor-not-allowed disabled:bg-buttons-disabled-default disabled:text-content-disabled [&>svg]:size-4",
+                button_next: "pointer-events-auto inline-flex size-8 cursor-pointer items-center justify-center rounded-full bg-buttons-secondary-default text-content-primary transition-colors hover:bg-buttons-secondary-hover focus-visible:shadow-focus-ring focus-visible:outline-none disabled:cursor-not-allowed disabled:bg-buttons-disabled-default disabled:text-content-disabled [&>svg]:size-4",
+                month_grid: "w-full",
                 weekdays: "flex",
                 weekday: "flex h-[30px] w-10 flex-1 items-center justify-center typography-body-small-14px-regular text-content-secondary",
-                week: "flex overflow-hidden rounded-xs",
+                week: "flex",
                 day: "relative flex w-10 flex-1 items-center justify-center",
-                range_middle: "bg-brand-primary-muted",
                 hidden: "hidden"
               },
               components: {
@@ -140,8 +137,8 @@ const DatePicker = forwardRef(
               ...resolvedDayPickerProps
             }
           ),
-          showFooter && /* @__PURE__ */ jsxs("div", { className: "flex gap-4 px-5 pb-4", children: [
-            /* @__PURE__ */ jsx(Button, { variant: "secondary", size: "40", className: "flex-1", onClick: onCancel, children: cancelLabel }),
+          showFooter && /* @__PURE__ */ jsxs("div", { className: "flex gap-2 pt-6", children: [
+            /* @__PURE__ */ jsx(Button, { variant: "outline", size: "40", className: "flex-1", onClick: onCancel, children: cancelLabel }),
             /* @__PURE__ */ jsx(Button, { variant: "primary", size: "40", className: "flex-1", onClick: onApply, children: applyLabel })
           ] })
         ]

package/dist/components/DatePicker/DatePicker.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.mjs","sources":["../../../src/components/DatePicker/DatePicker.tsx"],"sourcesContent":["import { forwardRef, useEffect, useRef } from \"react\";\nimport {\n  type ChevronProps,\n  type DateRange,\n  type DayButtonProps,\n  DayPicker,\n  type DayPickerProps,\n  type DayProps,\n  type Modifiers,\n  type MonthGridProps,\n  type WeekdayProps,\n  type WeekdaysProps,\n  type WeekProps,\n  type WeeksProps,\n} from \"react-day-picker\";\nimport { cn } from \"../../utils/cn\";\nimport type { OmitDistributed } from \"../../utils/types\";\nimport { Button } from \"../Button/Button\";\nimport { ChevronLeftIcon } from \"../Icons/ChevronLeftIcon\";\nimport { ChevronRightIcon } from \"../Icons/ChevronRightIcon\";\n\nexport type { DateRange }; // Needed by consumers when passing props\n\n/** Layout variant — single or side-by-side month display. */\nexport type DatePickerVariant = \"single\" | \"double\";\n\n/** Props specific to the DatePicker wrapper (not inherited from react-day-picker). */\nexport interface DatePickerOwnProps {\n  /** Display one month or two side-by-side. @default \"single\" */\n  variant?: DatePickerVariant;\n  /** Callback fired when the Apply button is clicked. */\n  onApply?: () => void;\n  /** Callback fired when the Cancel button is clicked. */\n  onCancel?: () => void;\n  /** Label for the cancel button. @default \"Cancel\" */\n  cancelLabel?: string;\n  /** Label for the apply button. @default \"Apply\" */\n  applyLabel?: string;\n  /** Whether to render the cancel / apply footer buttons. @default true */\n  showFooter?: boolean;\n  /** Additional CSS class name for the outer container. */\n  className?: string;\n}\n\nfunction Day({ day, modifiers, className, ...divProps }: DayProps) {\n  const { range_start, range_end } = modifiers;\n  const isSingleDayRange = range_start && range_end;\n\n  return (\n    <div\n      className={cn(\n        className,\n        (range_start || range_end) && !isSingleDayRange && \"from-50% from-transparent to-50%\",\n        range_start && !isSingleDayRange && \"bg-linear-to-r to-brand-primary-muted\",\n        range_end && !isSingleDayRange && \"bg-linear-to-l to-brand-primary-muted\",\n      )}\n      {...divProps}\n    />\n  );\n}\n\nfunction DayButton({ day, modifiers, className, ...buttonProps }: DayButtonProps) {\n  const ref = useRef<HTMLButtonElement>(null);\n\n  useEffect(() => {\n    if (modifiers.focused) ref.current?.focus();\n  }, [modifiers.focused]);\n\n  return (\n    <button\n      ref={ref}\n      type=\"button\"\n      className={cn(\n        \"relative z-10 inline-flex size-10 cursor-pointer items-center justify-center rounded-xs\",\n        \"typography-body-small-14px-regular\",\n        \"transition-colors hover:bg-brand-primary-muted not-disabled:active:bg-brand-primary-muted\",\n        \"focus-visible:outline-2 focus-visible:outline-brand-secondary-default focus-visible:outline-offset-[-2px]\",\n        \"disabled:cursor-not-allowed disabled:opacity-50\",\n        modifiers.today && !modifiers.selected && \"border border-brand-primary-default\",\n        modifiers.selected && !modifiers.range_middle\n          ? \"bg-brand-primary-default text-content-always-black hover:bg-brand-primary-default\"\n          : \"text-content-primary\",\n        modifiers.range_middle && \"rounded-none bg-transparent\",\n        modifiers.outside && \"pointer-events-none opacity-50\",\n      )}\n      {...buttonProps}\n    />\n  );\n}\n\n/** Combined props — own DatePicker options plus all react-day-picker props (except `numberOfMonths`). */\nexport type DatePickerProps = DatePickerOwnProps &\n  OmitDistributed<DayPickerProps, \"numberOfMonths\">;\n\n/**\n * A calendar date picker supporting single-date and date-range selection with\n * optional side-by-side month display and footer action buttons.\n *\n * Built on top of [react-day-picker](https://react-day-picker.js.org/) — all\n * `DayPickerProps` (except `numberOfMonths`) are forwarded.\n *\n * @example\n * ```tsx\n * <DatePicker\n *   mode=\"range\"\n *   type=\"double\"\n *   selected={range}\n *   onSelect={setRange}\n *   onApply={save}\n *   onCancel={close}\n * />\n * ```\n */\nexport const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(\n  (\n    {\n      variant = \"single\",\n      onApply,\n      onCancel,\n      cancelLabel = \"Cancel\",\n      applyLabel = \"Apply\",\n      showFooter = true,\n      className,\n      formatters,\n      ...dayPickerProps\n    },\n    ref,\n  ) => {\n    const numberOfMonths = variant === \"double\" ? 2 : 1;\n    const isMulti = numberOfMonths > 1;\n\n    // Wrap onSelect for range mode: when clicking inside a complete range,\n    // move the nearest boundary instead of always resetting the end date.\n    const resolvedDayPickerProps = (() => {\n      if (dayPickerProps.mode !== \"range\") return dayPickerProps;\n\n      const { selected, onSelect } = dayPickerProps as {\n        selected?: DateRange;\n        onSelect?: (\n          range: DateRange | undefined,\n          triggerDate: Date,\n          modifiers: Modifiers,\n          e: React.MouseEvent | React.KeyboardEvent,\n        ) => void;\n      };\n\n      if (!onSelect || !selected?.from || !selected?.to) return dayPickerProps;\n\n      const { from, to } = selected;\n\n      return {\n        ...dayPickerProps,\n        onSelect: (\n          range: DateRange | undefined,\n          triggerDate: Date,\n          modifiers: Modifiers,\n          e: React.MouseEvent | React.KeyboardEvent,\n        ) => {\n          const clickedTime = triggerDate.getTime();\n          const fromTime = from.getTime();\n          const toTime = to.getTime();\n\n          if (clickedTime > fromTime && clickedTime < toTime) {\n            if (clickedTime - fromTime <= toTime - clickedTime) {\n              onSelect({ from: triggerDate, to }, triggerDate, modifiers, e);\n            } else {\n              onSelect({ from, to: triggerDate }, triggerDate, modifiers, e);\n            }\n            return;\n          }\n\n          onSelect(range, triggerDate, modifiers, e);\n        },\n      } as typeof dayPickerProps;\n    })();\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          \"inline-flex flex-col rounded-md border border-neutral-alphas-200 bg-background-primary shadow-blur-menu backdrop-blur-sm\",\n          className,\n        )}\n      >\n        <DayPicker\n          showOutsideDays\n          numberOfMonths={numberOfMonths}\n          formatters={{\n            formatCaption: (date: Date) =>\n              date.toLocaleDateString(\"en-US\", { month: \"short\", year: \"numeric\" }),\n            ...formatters,\n          }}\n          classNames={{\n            root: \"w-full\",\n            months: \"relative flex\",\n            month: \"flex flex-1 flex-col\",\n            month_caption: cn(\"flex items-center py-4\", isMulti ? \"justify-center px-2\" : \"px-5\"),\n            caption_label: \"typography-body-default-16px-semibold text-content-primary\",\n            nav: cn(\n              \"absolute top-4 z-20 flex\",\n              isMulti ? \"pointer-events-none inset-x-3 justify-between\" : \"right-3 gap-1\",\n            ),\n            button_previous:\n              \"pointer-events-auto inline-flex size-8 cursor-pointer items-center justify-center rounded-full text-content-primary transition-colors hover:bg-brand-primary-muted not-disabled:active:bg-brand-primary-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-secondary-default disabled:cursor-not-allowed disabled:opacity-50\", // !TODO https://linear.app/fanvue/issue/ENG-7301/swap-out-typography-tailwind-utility-classes\n            button_next:\n              \"pointer-events-auto inline-flex size-8 cursor-pointer items-center justify-center rounded-full text-content-primary transition-colors hover:bg-brand-primary-muted not-disabled:active:bg-brand-primary-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-secondary-default disabled:cursor-not-allowed disabled:opacity-50\", // !TODO https://linear.app/fanvue/issue/ENG-7301/swap-out-typography-tailwind-utility-classes\n            month_grid: cn(\"mb-4\", isMulti ? \"mx-2\" : \"mx-4\"),\n            weekdays: \"flex\",\n            weekday:\n              \"flex h-[30px] w-10 flex-1 items-center justify-center typography-body-small-14px-regular text-content-secondary\",\n            week: \"flex overflow-hidden rounded-xs\",\n            day: \"relative flex w-10 flex-1 items-center justify-center\",\n            range_middle: \"bg-brand-primary-muted\",\n            hidden: \"hidden\",\n          }}\n          components={{\n            /**\n             * !NOTE: We're unable to use semantic elements for the grid due to rdp, as such we've disabled the a11y lint rules for these elements in biome.json.\n             */\n            Chevron: ({ orientation }: ChevronProps) =>\n              orientation === \"left\" ? <ChevronLeftIcon /> : <ChevronRightIcon />,\n            MonthGrid: (props: MonthGridProps) => <div role=\"grid\" {...props} />,\n            Weekdays: (props: WeekdaysProps) => <div role=\"row\" {...props} />,\n            Weekday: (props: WeekdayProps) => <div role=\"columnheader\" {...props} />,\n            Weeks: (props: WeeksProps) => <div role=\"rowgroup\" {...props} />,\n            Week: ({ week, ...props }: WeekProps) => <div role=\"row\" {...props} />,\n            Day,\n            DayButton,\n          }}\n          {...resolvedDayPickerProps}\n        />\n\n        {showFooter && (\n          <div className=\"flex gap-4 px-5 pb-4\">\n            <Button variant=\"secondary\" size=\"40\" className=\"flex-1\" onClick={onCancel}>\n              {cancelLabel}\n            </Button>\n            <Button variant=\"primary\" size=\"40\" className=\"flex-1\" onClick={onApply}>\n              {applyLabel}\n            </Button>\n          </div>\n        )}\n      </div>\n    );\n  },\n);\n\nDatePicker.displayName = \"DatePicker\";\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"DatePicker.mjs","sources":["../../../src/components/DatePicker/DatePicker.tsx"],"sourcesContent":["import { forwardRef, useEffect, useRef } from \"react\";\nimport {\n  type ChevronProps,\n  type DateRange,\n  type DayButtonProps,\n  DayPicker,\n  type DayPickerProps,\n  type DayProps,\n  type Modifiers,\n  type MonthGridProps,\n  type WeekdayProps,\n  type WeekdaysProps,\n  type WeekProps,\n  type WeeksProps,\n} from \"react-day-picker\";\nimport { cn } from \"../../utils/cn\";\nimport type { OmitDistributed } from \"../../utils/types\";\nimport { Button } from \"../Button/Button\";\nimport { ChevronLeftIcon } from \"../Icons/ChevronLeftIcon\";\nimport { ChevronRightIcon } from \"../Icons/ChevronRightIcon\";\n\nexport type { DateRange }; // Needed by consumers when passing props\n\n/** Layout variant — single or side-by-side month display. */\nexport type DatePickerVariant = \"single\" | \"double\";\n\n/** Props specific to the DatePicker wrapper (not inherited from react-day-picker). */\nexport interface DatePickerOwnProps {\n  /** Display one month or two side-by-side. @default \"single\" */\n  variant?: DatePickerVariant;\n  /** Callback fired when the Apply button is clicked. */\n  onApply?: () => void;\n  /** Callback fired when the Cancel button is clicked. */\n  onCancel?: () => void;\n  /** Label for the cancel button. @default \"Cancel\" */\n  cancelLabel?: string;\n  /** Label for the apply button. @default \"Apply\" */\n  applyLabel?: string;\n  /** Whether to render the cancel / apply footer buttons. @default true */\n  showFooter?: boolean;\n  /** Additional CSS class name for the outer container. */\n  className?: string;\n}\n\nfunction Day({ day, modifiers, className, ...divProps }: DayProps) {\n  const { range_start, range_end, range_middle } = modifiers;\n  const isSingleDayRange = range_start && range_end;\n  const inRange = (range_start || range_end || range_middle) && !isSingleDayRange;\n\n  return (\n    <div\n      className={cn(\n        className,\n        inRange && \"bg-inputs-calendar-range\",\n        inRange && range_start && \"rounded-l-sm\",\n        inRange && range_end && \"rounded-r-sm\",\n      )}\n      {...divProps}\n    />\n  );\n}\n\nfunction DayButton({ day, modifiers, className, ...buttonProps }: DayButtonProps) {\n  const ref = useRef<HTMLButtonElement>(null);\n\n  useEffect(() => {\n    if (modifiers.focused) ref.current?.focus();\n  }, [modifiers.focused]);\n\n  const isSelected = modifiers.selected && !modifiers.range_middle;\n\n  return (\n    <button\n      ref={ref}\n      type=\"button\"\n      className={cn(\n        \"relative z-10 inline-flex size-10 cursor-pointer items-center justify-center rounded-sm text-content-primary\",\n        \"transition-colors hover:bg-inputs-calendar-range not-disabled:active:bg-inputs-calendar-range\",\n        \"focus-visible:shadow-focus-ring focus-visible:outline-none\",\n        \"disabled:cursor-not-allowed\",\n        isSelected ? \"typography-body-small-14px-semibold\" : \"typography-body-small-14px-regular\",\n        modifiers.today &&\n          !isSelected &&\n          \"bg-inputs-calendar-today text-content-always-white hover:bg-inputs-calendar-today\",\n        isSelected &&\n          \"bg-inputs-calendar-selected text-content-primary-inverted hover:bg-inputs-calendar-selected\",\n        modifiers.range_middle && \"bg-transparent hover:bg-transparent\",\n        modifiers.disabled &&\n          \"bg-inputs-calendar-disabled text-content-disabled hover:bg-inputs-calendar-disabled\",\n        modifiers.outside && \"pointer-events-none text-content-disabled\",\n      )}\n      {...buttonProps}\n    />\n  );\n}\n\n/** Combined props — own DatePicker options plus all react-day-picker props (except `numberOfMonths`). */\nexport type DatePickerProps = DatePickerOwnProps &\n  OmitDistributed<DayPickerProps, \"numberOfMonths\">;\n\n/**\n * A calendar date picker supporting single-date and date-range selection with\n * optional side-by-side month display and footer action buttons.\n *\n * Built on top of [react-day-picker](https://react-day-picker.js.org/) — all\n * `DayPickerProps` (except `numberOfMonths`) are forwarded.\n *\n * @example\n * ```tsx\n * <DatePicker\n *   mode=\"range\"\n *   variant=\"double\"\n *   selected={range}\n *   onSelect={setRange}\n *   onApply={save}\n *   onCancel={close}\n * />\n * ```\n */\nexport const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(\n  (\n    {\n      variant = \"single\",\n      onApply,\n      onCancel,\n      cancelLabel = \"Cancel\",\n      applyLabel = \"Apply\",\n      showFooter = true,\n      className,\n      formatters,\n      ...dayPickerProps\n    },\n    ref,\n  ) => {\n    const numberOfMonths = variant === \"double\" ? 2 : 1;\n    const isMulti = numberOfMonths > 1;\n\n    // Wrap onSelect for range mode: when clicking inside a complete range,\n    // move the nearest boundary instead of always resetting the end date.\n    const resolvedDayPickerProps = (() => {\n      if (dayPickerProps.mode !== \"range\") return dayPickerProps;\n\n      const { selected, onSelect } = dayPickerProps as {\n        selected?: DateRange;\n        onSelect?: (\n          range: DateRange | undefined,\n          triggerDate: Date,\n          modifiers: Modifiers,\n          e: React.MouseEvent | React.KeyboardEvent,\n        ) => void;\n      };\n\n      if (!onSelect || !selected?.from || !selected?.to) return dayPickerProps;\n\n      const { from, to } = selected;\n\n      return {\n        ...dayPickerProps,\n        onSelect: (\n          range: DateRange | undefined,\n          triggerDate: Date,\n          modifiers: Modifiers,\n          e: React.MouseEvent | React.KeyboardEvent,\n        ) => {\n          const clickedTime = triggerDate.getTime();\n          const fromTime = from.getTime();\n          const toTime = to.getTime();\n\n          if (clickedTime > fromTime && clickedTime < toTime) {\n            if (clickedTime - fromTime <= toTime - clickedTime) {\n              onSelect({ from: triggerDate, to }, triggerDate, modifiers, e);\n            } else {\n              onSelect({ from, to: triggerDate }, triggerDate, modifiers, e);\n            }\n            return;\n          }\n\n          onSelect(range, triggerDate, modifiers, e);\n        },\n      } as typeof dayPickerProps;\n    })();\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          \"inline-flex flex-col rounded-xl border border-modal-stroke bg-modal-background p-6 shadow-blur-menu backdrop-blur-sm\",\n          className,\n        )}\n      >\n        <DayPicker\n          showOutsideDays\n          numberOfMonths={numberOfMonths}\n          formatters={{\n            formatCaption: (date: Date) =>\n              date.toLocaleDateString(\"en-US\", { month: \"long\", year: \"numeric\" }),\n            ...formatters,\n          }}\n          classNames={{\n            root: \"w-full\",\n            months: cn(\"relative flex\", isMulti && \"gap-6\"),\n            month: \"flex flex-1 flex-col\",\n            month_caption: \"mb-4 flex h-8 items-center justify-center\",\n            caption_label: \"typography-body-default-16px-regular text-content-primary\",\n            nav: \"absolute inset-x-0 top-0 z-20 flex justify-between\",\n            button_previous:\n              \"pointer-events-auto inline-flex size-8 cursor-pointer items-center justify-center rounded-full bg-buttons-secondary-default text-content-primary transition-colors hover:bg-buttons-secondary-hover focus-visible:shadow-focus-ring focus-visible:outline-none disabled:cursor-not-allowed disabled:bg-buttons-disabled-default disabled:text-content-disabled [&>svg]:size-4\",\n            button_next:\n              \"pointer-events-auto inline-flex size-8 cursor-pointer items-center justify-center rounded-full bg-buttons-secondary-default text-content-primary transition-colors hover:bg-buttons-secondary-hover focus-visible:shadow-focus-ring focus-visible:outline-none disabled:cursor-not-allowed disabled:bg-buttons-disabled-default disabled:text-content-disabled [&>svg]:size-4\",\n            month_grid: \"w-full\",\n            weekdays: \"flex\",\n            weekday:\n              \"flex h-[30px] w-10 flex-1 items-center justify-center typography-body-small-14px-regular text-content-secondary\",\n            week: \"flex\",\n            day: \"relative flex w-10 flex-1 items-center justify-center\",\n            hidden: \"hidden\",\n          }}\n          components={{\n            /**\n             * !NOTE: We're unable to use semantic elements for the grid due to rdp, as such we've disabled the a11y lint rules for these elements in biome.json.\n             */\n            Chevron: ({ orientation }: ChevronProps) =>\n              orientation === \"left\" ? <ChevronLeftIcon /> : <ChevronRightIcon />,\n            MonthGrid: (props: MonthGridProps) => <div role=\"grid\" {...props} />,\n            Weekdays: (props: WeekdaysProps) => <div role=\"row\" {...props} />,\n            Weekday: (props: WeekdayProps) => <div role=\"columnheader\" {...props} />,\n            Weeks: (props: WeeksProps) => <div role=\"rowgroup\" {...props} />,\n            Week: ({ week, ...props }: WeekProps) => <div role=\"row\" {...props} />,\n            Day,\n            DayButton,\n          }}\n          {...resolvedDayPickerProps}\n        />\n\n        {showFooter && (\n          <div className=\"flex gap-2 pt-6\">\n            <Button variant=\"outline\" size=\"40\" className=\"flex-1\" onClick={onCancel}>\n              {cancelLabel}\n            </Button>\n            <Button variant=\"primary\" size=\"40\" className=\"flex-1\" onClick={onApply}>\n              {applyLabel}\n            </Button>\n          </div>\n        )}\n      </div>\n    );\n  },\n);\n\nDatePicker.displayName = \"DatePicker\";\n"],"names":[],"mappings":";;;;;;;;AA4CA,SAAS,IAAI,EAAE,KAAK,WAAW,WAAW,GAAG,YAAsB;AACjE,QAAM,EAAE,aAAa,WAAW,aAAA,IAAiB;AACjD,QAAM,mBAAmB,eAAe;AACxC,QAAM,WAAW,eAAe,aAAa,iBAAiB,CAAC;AAE/D,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA,WAAW;AAAA,QACX,WAAW,eAAe;AAAA,QAC1B,WAAW,aAAa;AAAA,MAAA;AAAA,MAEzB,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV;AAEA,SAAS,UAAU,EAAE,KAAK,WAAW,WAAW,GAAG,eAA+B;AAChF,QAAM,MAAM,OAA0B,IAAI;AAE1C,YAAU,MAAM;AACd,QAAI,UAAU,QAAS,KAAI,SAAS,MAAA;AAAA,EACtC,GAAG,CAAC,UAAU,OAAO,CAAC;AAEtB,QAAM,aAAa,UAAU,YAAY,CAAC,UAAU;AAEpD,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,MAAK;AAAA,MACL,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,aAAa,wCAAwC;AAAA,QACrD,UAAU,SACR,CAAC,cACD;AAAA,QACF,cACE;AAAA,QACF,UAAU,gBAAgB;AAAA,QAC1B,UAAU,YACR;AAAA,QACF,UAAU,WAAW;AAAA,MAAA;AAAA,MAEtB,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV;AAyBO,MAAM,aAAa;AAAA,EACxB,CACE;AAAA,IACE,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA,cAAc;AAAA,IACd,aAAa;AAAA,IACb,aAAa;AAAA,IACb;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,iBAAiB,YAAY,WAAW,IAAI;AAClD,UAAM,UAAU,iBAAiB;AAIjC,UAAM,0BAA0B,MAAM;AACpC,UAAI,eAAe,SAAS,QAAS,QAAO;AAE5C,YAAM,EAAE,UAAU,SAAA,IAAa;AAU/B,UAAI,CAAC,YAAY,CAAC,UAAU,QAAQ,CAAC,UAAU,GAAI,QAAO;AAE1D,YAAM,EAAE,MAAM,GAAA,IAAO;AAErB,aAAO;AAAA,QACL,GAAG;AAAA,QACH,UAAU,CACR,OACA,aACA,WACA,MACG;AACH,gBAAM,cAAc,YAAY,QAAA;AAChC,gBAAM,WAAW,KAAK,QAAA;AACtB,gBAAM,SAAS,GAAG,QAAA;AAElB,cAAI,cAAc,YAAY,cAAc,QAAQ;AAClD,gBAAI,cAAc,YAAY,SAAS,aAAa;AAClD,uBAAS,EAAE,MAAM,aAAa,MAAM,aAAa,WAAW,CAAC;AAAA,YAC/D,OAAO;AACL,uBAAS,EAAE,MAAM,IAAI,eAAe,aAAa,WAAW,CAAC;AAAA,YAC/D;AACA;AAAA,UACF;AAEA,mBAAS,OAAO,aAAa,WAAW,CAAC;AAAA,QAC3C;AAAA,MAAA;AAAA,IAEJ,GAAA;AAEA,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAW;AAAA,UACT;AAAA,UACA;AAAA,QAAA;AAAA,QAGF,UAAA;AAAA,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,iBAAe;AAAA,cACf;AAAA,cACA,YAAY;AAAA,gBACV,eAAe,CAAC,SACd,KAAK,mBAAmB,SAAS,EAAE,OAAO,QAAQ,MAAM,WAAW;AAAA,gBACrE,GAAG;AAAA,cAAA;AAAA,cAEL,YAAY;AAAA,gBACV,MAAM;AAAA,gBACN,QAAQ,GAAG,iBAAiB,WAAW,OAAO;AAAA,gBAC9C,OAAO;AAAA,gBACP,eAAe;AAAA,gBACf,eAAe;AAAA,gBACf,KAAK;AAAA,gBACL,iBACE;AAAA,gBACF,aACE;AAAA,gBACF,YAAY;AAAA,gBACZ,UAAU;AAAA,gBACV,SACE;AAAA,gBACF,MAAM;AAAA,gBACN,KAAK;AAAA,gBACL,QAAQ;AAAA,cAAA;AAAA,cAEV,YAAY;AAAA;AAAA;AAAA;AAAA,gBAIV,SAAS,CAAC,EAAE,YAAA,MACV,gBAAgB,SAAS,oBAAC,iBAAA,CAAA,CAAgB,IAAK,oBAAC,kBAAA,CAAA,CAAiB;AAAA,gBACnE,WAAW,CAAC,UAA0B,oBAAC,SAAI,MAAK,QAAQ,GAAG,OAAO;AAAA,gBAClE,UAAU,CAAC,UAAyB,oBAAC,SAAI,MAAK,OAAO,GAAG,OAAO;AAAA,gBAC/D,SAAS,CAAC,UAAwB,oBAAC,SAAI,MAAK,gBAAgB,GAAG,OAAO;AAAA,gBACtE,OAAO,CAAC,UAAsB,oBAAC,SAAI,MAAK,YAAY,GAAG,OAAO;AAAA,gBAC9D,MAAM,CAAC,EAAE,MAAM,GAAG,MAAA,MAAuB,oBAAC,OAAA,EAAI,MAAK,OAAO,GAAG,MAAA,CAAO;AAAA,gBACpE;AAAA,gBACA;AAAA,cAAA;AAAA,cAED,GAAG;AAAA,YAAA;AAAA,UAAA;AAAA,UAGL,cACC,qBAAC,OAAA,EAAI,WAAU,mBACb,UAAA;AAAA,YAAA,oBAAC,QAAA,EAAO,SAAQ,WAAU,MAAK,MAAK,WAAU,UAAS,SAAS,UAC7D,UAAA,YAAA,CACH;AAAA,YACA,oBAAC,QAAA,EAAO,SAAQ,WAAU,MAAK,MAAK,WAAU,UAAS,SAAS,SAC7D,UAAA,WAAA,CACH;AAAA,UAAA,EAAA,CACF;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF;AAEA,WAAW,cAAc;"}

package/dist/components/Icons/CogIcon.mjs

@@ -0,0 +1,57 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { BaseIcon } from "./BaseIcon.mjs";
+const VARIANTS = {
+  16: {
+    outlined: [
+      {
+        d: "M7.168 9.748c-.66 0-1.32-.253-1.826-.753a2.587 2.587 0 0 1 0-3.653 2.587 2.587 0 0 1 3.653 0 2.587 2.587 0 0 1 0 3.653 2.57 2.57 0 0 1-1.827.753m0-4.166a1.58 1.58 0 0 0-1.12.46 1.594 1.594 0 0 0 0 2.24c.62.613 1.62.613 2.24 0a1.581 1.581 0 0 0-1.12-2.7"
+      },
+      {
+        d: "M9.188 14.335c-.413 0-.82-.16-1.126-.467l-.494-.493a.594.594 0 0 0-.826-.007l-.507.48a1.59 1.59 0 0 1-1.6.36l-.487-.16a1.58 1.58 0 0 1-1.086-1.507v-.7a.58.58 0 0 0-.58-.586l-.7-.014a1.58 1.58 0 0 1-1.387-.88l-.227-.46a1.58 1.58 0 0 1 .3-1.833l.494-.493a.594.594 0 0 0 .006-.827l-.486-.506a1.58 1.58 0 0 1-.36-1.607l.16-.487c.22-.653.82-1.086 1.506-1.086h.7a.58.58 0 0 0 .587-.58l.013-.7a1.58 1.58 0 0 1 .88-1.387l.46-.227a1.58 1.58 0 0 1 1.834.3l.493.494a.594.594 0 0 0 .827.006l.506-.486a1.6 1.6 0 0 1 1.607-.36l.487.16a1.59 1.59 0 0 1 1.086 1.506v.7c0 .327.254.587.58.594l.7.013a1.57 1.57 0 0 1 1.387.88l.227.46a1.58 1.58 0 0 1-.3 1.833l-.494.494a.594.594 0 0 0-.006.826l.486.507c.407.427.547 1.04.36 1.6l-.16.486a1.58 1.58 0 0 1-1.506 1.087h-.7a.58.58 0 0 0-.587.58l-.013.7a1.57 1.57 0 0 1-.88 1.387l-.46.226a1.6 1.6 0 0 1-.714.167zm-2.033-2.127c.407 0 .82.153 1.127.46l.493.494a.59.59 0 0 0 .68.113l.46-.227c.193-.1.32-.293.327-.513l.013-.7c.02-.86.733-1.554 1.587-1.554h.7c.253 0 .48-.16.56-.406l.16-.487a.59.59 0 0 0-.134-.593l-.486-.507c-.594-.62-.58-1.62.026-2.226l.494-.494a.59.59 0 0 0 .113-.68l-.227-.46a.6.6 0 0 0-.513-.326l-.7-.014a1.6 1.6 0 0 1-1.553-1.593v-.7c0-.253-.16-.48-.407-.56l-.487-.16a.59.59 0 0 0-.593.133l-.507.48c-.62.594-1.62.58-2.226-.026l-.494-.494a.59.59 0 0 0-.68-.113l-.46.227a.6.6 0 0 0-.326.513l-.014.7a1.597 1.597 0 0 1-1.586 1.553h-.7c-.254 0-.48.16-.56.407l-.16.487a.59.59 0 0 0 .133.593l.487.507c.593.62.58 1.62-.027 2.226l-.493.494a.59.59 0 0 0-.114.68l.227.46c.1.193.293.32.513.326l.7.014c.86.02 1.554.733 1.554 1.586v.7c0 .253.16.48.406.56l.487.16c.207.067.44.02.593-.133l.507-.48c.307-.293.7-.44 1.1-.44z"
+      }
+    ],
+    filled: [
+      {
+        d: "M12.52 7.433a1.095 1.095 0 0 1 .013-1.526l.494-.494c.333-.333.413-.84.206-1.26l-.226-.46a1.09 1.09 0 0 0-.954-.6l-.7-.013a1.093 1.093 0 0 1-1.066-1.093v-.7c0-.467-.3-.887-.747-1.034l-.487-.16a1.1 1.1 0 0 0-1.1.247l-.506.487c-.427.413-1.107.4-1.527-.014L5.427.32a1.1 1.1 0 0 0-1.26-.207l-.46.227c-.36.18-.594.547-.607.953l-.013.7A1.093 1.093 0 0 1 1.993 3.06h-.7c-.466 0-.886.3-1.033.747l-.16.486c-.127.38-.033.807.247 1.1l.48.507c.413.427.4 1.107-.014 1.527L.32 7.92c-.333.333-.413.84-.207 1.26l.227.46c.18.36.547.593.953.6l.7.013a1.09 1.09 0 0 1 1.067 1.094v.7c0 .466.3.886.747 1.033l.486.16c.387.127.807.033 1.1-.247l.507-.486a1.095 1.095 0 0 1 1.527.02l.493.493c.333.333.84.413 1.26.207L9.64 13c.36-.18.593-.547.6-.953l.013-.7a1.09 1.09 0 0 1 1.094-1.067h.7c.466 0 .886-.3 1.033-.747l.16-.486a1.09 1.09 0 0 0-.247-1.1l-.486-.507zm-4.367.707a2.084 2.084 0 1 1-2.946-2.949A2.084 2.084 0 0 1 8.153 8.14"
+      }
+    ]
+  },
+  24: {
+    outlined: [
+      {
+        d: "M10.752 14.622c-.99 0-1.98-.38-2.74-1.13a3.88 3.88 0 0 1 0-5.48 3.88 3.88 0 0 1 5.48 0 3.88 3.88 0 0 1 0 5.48c-.76.76-1.75 1.13-2.74 1.13m0-6.25c-.61 0-1.22.23-1.68.69a2.39 2.39 0 0 0 0 3.36c.93.92 2.43.92 3.36 0a2.372 2.372 0 0 0-1.68-4.05"
+      },
+      {
+        d: "M13.782 21.502c-.62 0-1.23-.24-1.69-.7l-.74-.74a.89.89 0 0 0-1.24-.01l-.76.72c-.64.61-1.56.82-2.4.54l-.73-.24a2.375 2.375 0 0 1-1.63-2.26v-1.05c0-.49-.38-.88-.87-.88l-1.05-.02c-.89-.02-1.68-.52-2.08-1.32l-.34-.69c-.46-.92-.28-2.03.45-2.75l.74-.74a.89.89 0 0 0 .01-1.24l-.73-.76c-.62-.64-.82-1.56-.54-2.41l.24-.73c.33-.98 1.23-1.63 2.26-1.63h1.05c.49 0 .88-.38.88-.87l.02-1.05c.02-.89.53-1.69 1.32-2.08l.69-.34c.92-.46 2.03-.28 2.75.45l.74.74c.34.34.89.34 1.24.01l.76-.73c.64-.61 1.56-.82 2.41-.54l.73.24c.98.33 1.63 1.24 1.63 2.26v1.05c0 .49.38.88.87.89l1.05.02c.89.02 1.69.52 2.08 1.32l.34.69c.46.92.28 2.03-.45 2.75l-.74.74a.89.89 0 0 0-.01 1.24l.73.76c.61.64.82 1.56.54 2.4l-.24.73c-.33.98-1.23 1.63-2.26 1.63h-1.05c-.49 0-.88.38-.88.87l-.02 1.05c-.02.89-.52 1.69-1.32 2.08l-.69.34c-.34.17-.71.25-1.07.25zm-3.05-3.19c.61 0 1.23.23 1.69.69l.74.74c.27.27.68.34 1.02.17l.69-.34c.29-.15.48-.44.49-.77l.02-1.05c.03-1.29 1.1-2.33 2.38-2.33h1.05c.38 0 .72-.24.84-.61l.24-.73c.1-.31.03-.65-.2-.89l-.73-.76c-.89-.93-.87-2.43.04-3.34l.74-.74c.27-.27.34-.68.17-1.02l-.34-.69a.9.9 0 0 0-.77-.49l-1.05-.02a2.4 2.4 0 0 1-2.33-2.39v-1.05a.88.88 0 0 0-.61-.84l-.73-.24a.89.89 0 0 0-.89.2l-.76.72c-.93.89-2.43.87-3.34-.04l-.74-.74a.88.88 0 0 0-1.02-.17l-.69.34c-.29.15-.48.44-.49.77l-.02 1.05a2.395 2.395 0 0 1-2.38 2.33h-1.05a.88.88 0 0 0-.84.61l-.24.73c-.1.31-.03.66.2.89l.73.76c.89.93.87 2.43-.04 3.34l-.74.74c-.27.27-.34.68-.17 1.02l.34.69c.15.29.44.48.77.49l1.05.02c1.29.03 2.33 1.1 2.33 2.38v1.05c0 .38.24.72.61.84l.73.24c.31.1.66.03.89-.2l.76-.72c.46-.44 1.05-.66 1.65-.66z"
+      }
+    ],
+    filled: [
+      {
+        d: "M18.78 11.15c-.62-.64-.6-1.66.02-2.29l.74-.74c.5-.5.62-1.26.31-1.89l-.34-.69a1.63 1.63 0 0 0-1.43-.9l-1.05-.02a1.64 1.64 0 0 1-1.6-1.64V1.93c0-.7-.45-1.33-1.12-1.55l-.73-.24a1.64 1.64 0 0 0-1.65.37l-.76.73c-.64.62-1.66.6-2.29-.02L8.14.48c-.5-.5-1.26-.62-1.89-.31l-.69.34c-.54.27-.89.82-.91 1.43l-.02 1.05c-.02.89-.75 1.6-1.64 1.6H1.94c-.7 0-1.33.45-1.55 1.12l-.24.73c-.19.57-.05 1.21.37 1.65l.72.76c.62.64.6 1.66-.02 2.29l-.74.74c-.5.5-.62 1.26-.31 1.89l.34.69c.27.54.82.89 1.43.9l1.05.02c.89.02 1.6.74 1.6 1.64v1.05c0 .7.45 1.33 1.12 1.55l.73.24c.58.19 1.21.05 1.65-.37l.76-.73c.64-.61 1.66-.6 2.29.03l.74.74c.5.5 1.26.62 1.89.31l.69-.34c.54-.27.89-.82.9-1.43l.02-1.05c.02-.89.74-1.6 1.64-1.6h1.05c.7 0 1.33-.45 1.55-1.12l.24-.73c.19-.58.05-1.21-.37-1.65l-.73-.76zm-6.55 1.06a3.126 3.126 0 0 1-4.42-4.42 3.126 3.126 0 0 1 4.42 4.42"
+      }
+    ]
+  },
+  32: {
+    outlined: [
+      {
+        d: "M14.336 19.496a5.2 5.2 0 0 1-3.653-1.506 5.174 5.174 0 0 1 0-7.307 5.174 5.174 0 0 1 7.307 0 5.174 5.174 0 0 1 0 7.307 5.14 5.14 0 0 1-3.654 1.506m0-8.333c-.813 0-1.626.307-2.24.92a3.187 3.187 0 0 0 0 4.48 3.187 3.187 0 0 0 4.48 0 3.158 3.158 0 0 0-2.24-5.4"
+      },
+      {
+        d: "M18.377 28.67a3.18 3.18 0 0 1-2.254-.934l-.987-.986a1.187 1.187 0 0 0-1.653-.014l-1.013.96a3.18 3.18 0 0 1-3.2.72l-.974-.32a3.17 3.17 0 0 1-2.173-3.013v-1.4c0-.653-.507-1.173-1.16-1.173l-1.4-.027a3.16 3.16 0 0 1-2.773-1.76l-.454-.92a3.16 3.16 0 0 1 .6-3.667l.987-.986a1.19 1.19 0 0 0 .013-1.654l-.973-1.013a3.17 3.17 0 0 1-.72-3.213l.32-.974a3.17 3.17 0 0 1 3.013-2.173h1.4c.654 0 1.174-.507 1.174-1.16l.026-1.4A3.17 3.17 0 0 1 7.936.79l.92-.454a3.16 3.16 0 0 1 3.667.6l.987.987a1.187 1.187 0 0 0 1.653.013l1.014-.973a3.19 3.19 0 0 1 3.213-.72l.973.32a3.18 3.18 0 0 1 2.174 3.013v1.4c0 .654.506 1.174 1.16 1.187l1.4.027a3.14 3.14 0 0 1 2.773 1.76l.453.92a3.16 3.16 0 0 1-.6 3.666l-.986.987a1.187 1.187 0 0 0-.014 1.653l.974 1.014a3.18 3.18 0 0 1 .72 3.2l-.32.973a3.17 3.17 0 0 1-3.014 2.173h-1.4c-.653 0-1.173.507-1.173 1.16l-.027 1.4a3.14 3.14 0 0 1-1.76 2.774l-.92.453a3.2 3.2 0 0 1-1.427.333zm-4.067-4.254c.813 0 1.64.307 2.253.92l.987.987c.36.36.906.453 1.36.227l.92-.454c.387-.2.64-.586.653-1.026l.027-1.4a3.194 3.194 0 0 1 3.173-3.107h1.4c.507 0 .96-.32 1.12-.813l.32-.974a1.18 1.18 0 0 0-.267-1.186l-.973-1.014c-1.187-1.24-1.16-3.24.053-4.453l.987-.987c.36-.36.453-.906.227-1.36l-.454-.92c-.2-.386-.586-.64-1.026-.653l-1.4-.027a3.197 3.197 0 0 1-3.107-3.186v-1.4c0-.507-.32-.96-.813-1.12l-.974-.32a1.18 1.18 0 0 0-1.186.266l-1.014.96c-1.24 1.187-3.24 1.16-4.453-.053l-.987-.987a1.18 1.18 0 0 0-1.36-.226l-.92.453c-.386.2-.64.587-.653 1.027l-.027 1.4a3.194 3.194 0 0 1-3.173 3.106h-1.4c-.507 0-.96.32-1.12.814l-.32.973c-.133.413-.04.88.267 1.187l.973 1.013c1.187 1.24 1.16 3.24-.053 4.453l-.987.987a1.18 1.18 0 0 0-.227 1.36l.454.92c.2.387.586.64 1.026.653l1.4.027a3.194 3.194 0 0 1 3.107 3.173v1.4c0 .507.32.96.813 1.12l.974.32c.413.134.88.04 1.186-.266l1.014-.96a3.16 3.16 0 0 1 2.2-.88z"
+      }
+    ],
+    filled: [
+      {
+        d: "M25.04 14.867c-.827-.854-.8-2.214.027-3.054l.986-.986c.667-.667.827-1.68.414-2.52l-.454-.92a2.17 2.17 0 0 0-1.906-1.2l-1.4-.027a2.186 2.186 0 0 1-2.134-2.187v-1.4c0-.933-.6-1.773-1.493-2.066l-.973-.32a2.19 2.19 0 0 0-2.2.493l-1.014.973c-.853.827-2.213.8-3.053-.026L10.853.64a2.19 2.19 0 0 0-2.52-.413l-.92.453A2.21 2.21 0 0 0 6.2 2.587l-.027 1.4A2.186 2.186 0 0 1 3.987 6.12h-1.4c-.934 0-1.774.6-2.067 1.493l-.32.974a2.2 2.2 0 0 0 .493 2.2l.96 1.013c.827.853.8 2.213-.026 3.053l-.987.987a2.19 2.19 0 0 0-.413 2.52l.453.92a2.17 2.17 0 0 0 1.907 1.2l1.4.027a2.177 2.177 0 0 1 2.133 2.186v1.4c0 .934.6 1.774 1.493 2.067l.974.32a2.19 2.19 0 0 0 2.2-.493l1.013-.974a2.19 2.19 0 0 1 3.053.04l.987.987a2.19 2.19 0 0 0 2.52.413l.92-.453a2.17 2.17 0 0 0 1.2-1.907l.027-1.4a2.177 2.177 0 0 1 2.186-2.133h1.4c.934 0 1.774-.6 2.067-1.493l.32-.974a2.19 2.19 0 0 0-.493-2.2l-.974-1.013zm-8.733 1.413a4.168 4.168 0 0 1-5.894-5.893 4.17 4.17 0 0 1 5.894 0 4.17 4.17 0 0 1 0 5.893"
+      }
+    ]
+  }
+};
+const CogIcon = React.forwardRef((props, ref) => /* @__PURE__ */ jsx(BaseIcon, { ref, variants: VARIANTS, ...props }));
+CogIcon.displayName = "CogIcon";
+export {
+  CogIcon
+};
+//# sourceMappingURL=CogIcon.mjs.map

package/dist/components/Icons/CogIcon.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"CogIcon.mjs","sources":["../../../src/components/Icons/CogIcon.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { BaseIcon } from \"./BaseIcon\";\nimport type { BaseIconProps, IconVariants } from \"./types\";\n\nconst VARIANTS: IconVariants = {\n  16: {\n    outlined: [\n      {\n        d: \"M7.168 9.748c-.66 0-1.32-.253-1.826-.753a2.587 2.587 0 0 1 0-3.653 2.587 2.587 0 0 1 3.653 0 2.587 2.587 0 0 1 0 3.653 2.57 2.57 0 0 1-1.827.753m0-4.166a1.58 1.58 0 0 0-1.12.46 1.594 1.594 0 0 0 0 2.24c.62.613 1.62.613 2.24 0a1.581 1.581 0 0 0-1.12-2.7\",\n      },\n      {\n        d: \"M9.188 14.335c-.413 0-.82-.16-1.126-.467l-.494-.493a.594.594 0 0 0-.826-.007l-.507.48a1.59 1.59 0 0 1-1.6.36l-.487-.16a1.58 1.58 0 0 1-1.086-1.507v-.7a.58.58 0 0 0-.58-.586l-.7-.014a1.58 1.58 0 0 1-1.387-.88l-.227-.46a1.58 1.58 0 0 1 .3-1.833l.494-.493a.594.594 0 0 0 .006-.827l-.486-.506a1.58 1.58 0 0 1-.36-1.607l.16-.487c.22-.653.82-1.086 1.506-1.086h.7a.58.58 0 0 0 .587-.58l.013-.7a1.58 1.58 0 0 1 .88-1.387l.46-.227a1.58 1.58 0 0 1 1.834.3l.493.494a.594.594 0 0 0 .827.006l.506-.486a1.6 1.6 0 0 1 1.607-.36l.487.16a1.59 1.59 0 0 1 1.086 1.506v.7c0 .327.254.587.58.594l.7.013a1.57 1.57 0 0 1 1.387.88l.227.46a1.58 1.58 0 0 1-.3 1.833l-.494.494a.594.594 0 0 0-.006.826l.486.507c.407.427.547 1.04.36 1.6l-.16.486a1.58 1.58 0 0 1-1.506 1.087h-.7a.58.58 0 0 0-.587.58l-.013.7a1.57 1.57 0 0 1-.88 1.387l-.46.226a1.6 1.6 0 0 1-.714.167zm-2.033-2.127c.407 0 .82.153 1.127.46l.493.494a.59.59 0 0 0 .68.113l.46-.227c.193-.1.32-.293.327-.513l.013-.7c.02-.86.733-1.554 1.587-1.554h.7c.253 0 .48-.16.56-.406l.16-.487a.59.59 0 0 0-.134-.593l-.486-.507c-.594-.62-.58-1.62.026-2.226l.494-.494a.59.59 0 0 0 .113-.68l-.227-.46a.6.6 0 0 0-.513-.326l-.7-.014a1.6 1.6 0 0 1-1.553-1.593v-.7c0-.253-.16-.48-.407-.56l-.487-.16a.59.59 0 0 0-.593.133l-.507.48c-.62.594-1.62.58-2.226-.026l-.494-.494a.59.59 0 0 0-.68-.113l-.46.227a.6.6 0 0 0-.326.513l-.014.7a1.597 1.597 0 0 1-1.586 1.553h-.7c-.254 0-.48.16-.56.407l-.16.487a.59.59 0 0 0 .133.593l.487.507c.593.62.58 1.62-.027 2.226l-.493.494a.59.59 0 0 0-.114.68l.227.46c.1.193.293.32.513.326l.7.014c.86.02 1.554.733 1.554 1.586v.7c0 .253.16.48.406.56l.487.16c.207.067.44.02.593-.133l.507-.48c.307-.293.7-.44 1.1-.44z\",\n      },\n    ],\n    filled: [\n      {\n        d: \"M12.52 7.433a1.095 1.095 0 0 1 .013-1.526l.494-.494c.333-.333.413-.84.206-1.26l-.226-.46a1.09 1.09 0 0 0-.954-.6l-.7-.013a1.093 1.093 0 0 1-1.066-1.093v-.7c0-.467-.3-.887-.747-1.034l-.487-.16a1.1 1.1 0 0 0-1.1.247l-.506.487c-.427.413-1.107.4-1.527-.014L5.427.32a1.1 1.1 0 0 0-1.26-.207l-.46.227c-.36.18-.594.547-.607.953l-.013.7A1.093 1.093 0 0 1 1.993 3.06h-.7c-.466 0-.886.3-1.033.747l-.16.486c-.127.38-.033.807.247 1.1l.48.507c.413.427.4 1.107-.014 1.527L.32 7.92c-.333.333-.413.84-.207 1.26l.227.46c.18.36.547.593.953.6l.7.013a1.09 1.09 0 0 1 1.067 1.094v.7c0 .466.3.886.747 1.033l.486.16c.387.127.807.033 1.1-.247l.507-.486a1.095 1.095 0 0 1 1.527.02l.493.493c.333.333.84.413 1.26.207L9.64 13c.36-.18.593-.547.6-.953l.013-.7a1.09 1.09 0 0 1 1.094-1.067h.7c.466 0 .886-.3 1.033-.747l.16-.486a1.09 1.09 0 0 0-.247-1.1l-.486-.507zm-4.367.707a2.084 2.084 0 1 1-2.946-2.949A2.084 2.084 0 0 1 8.153 8.14\",\n      },\n    ],\n  },\n  24: {\n    outlined: [\n      {\n        d: \"M10.752 14.622c-.99 0-1.98-.38-2.74-1.13a3.88 3.88 0 0 1 0-5.48 3.88 3.88 0 0 1 5.48 0 3.88 3.88 0 0 1 0 5.48c-.76.76-1.75 1.13-2.74 1.13m0-6.25c-.61 0-1.22.23-1.68.69a2.39 2.39 0 0 0 0 3.36c.93.92 2.43.92 3.36 0a2.372 2.372 0 0 0-1.68-4.05\",\n      },\n      {\n        d: \"M13.782 21.502c-.62 0-1.23-.24-1.69-.7l-.74-.74a.89.89 0 0 0-1.24-.01l-.76.72c-.64.61-1.56.82-2.4.54l-.73-.24a2.375 2.375 0 0 1-1.63-2.26v-1.05c0-.49-.38-.88-.87-.88l-1.05-.02c-.89-.02-1.68-.52-2.08-1.32l-.34-.69c-.46-.92-.28-2.03.45-2.75l.74-.74a.89.89 0 0 0 .01-1.24l-.73-.76c-.62-.64-.82-1.56-.54-2.41l.24-.73c.33-.98 1.23-1.63 2.26-1.63h1.05c.49 0 .88-.38.88-.87l.02-1.05c.02-.89.53-1.69 1.32-2.08l.69-.34c.92-.46 2.03-.28 2.75.45l.74.74c.34.34.89.34 1.24.01l.76-.73c.64-.61 1.56-.82 2.41-.54l.73.24c.98.33 1.63 1.24 1.63 2.26v1.05c0 .49.38.88.87.89l1.05.02c.89.02 1.69.52 2.08 1.32l.34.69c.46.92.28 2.03-.45 2.75l-.74.74a.89.89 0 0 0-.01 1.24l.73.76c.61.64.82 1.56.54 2.4l-.24.73c-.33.98-1.23 1.63-2.26 1.63h-1.05c-.49 0-.88.38-.88.87l-.02 1.05c-.02.89-.52 1.69-1.32 2.08l-.69.34c-.34.17-.71.25-1.07.25zm-3.05-3.19c.61 0 1.23.23 1.69.69l.74.74c.27.27.68.34 1.02.17l.69-.34c.29-.15.48-.44.49-.77l.02-1.05c.03-1.29 1.1-2.33 2.38-2.33h1.05c.38 0 .72-.24.84-.61l.24-.73c.1-.31.03-.65-.2-.89l-.73-.76c-.89-.93-.87-2.43.04-3.34l.74-.74c.27-.27.34-.68.17-1.02l-.34-.69a.9.9 0 0 0-.77-.49l-1.05-.02a2.4 2.4 0 0 1-2.33-2.39v-1.05a.88.88 0 0 0-.61-.84l-.73-.24a.89.89 0 0 0-.89.2l-.76.72c-.93.89-2.43.87-3.34-.04l-.74-.74a.88.88 0 0 0-1.02-.17l-.69.34c-.29.15-.48.44-.49.77l-.02 1.05a2.395 2.395 0 0 1-2.38 2.33h-1.05a.88.88 0 0 0-.84.61l-.24.73c-.1.31-.03.66.2.89l.73.76c.89.93.87 2.43-.04 3.34l-.74.74c-.27.27-.34.68-.17 1.02l.34.69c.15.29.44.48.77.49l1.05.02c1.29.03 2.33 1.1 2.33 2.38v1.05c0 .38.24.72.61.84l.73.24c.31.1.66.03.89-.2l.76-.72c.46-.44 1.05-.66 1.65-.66z\",\n      },\n    ],\n    filled: [\n      {\n        d: \"M18.78 11.15c-.62-.64-.6-1.66.02-2.29l.74-.74c.5-.5.62-1.26.31-1.89l-.34-.69a1.63 1.63 0 0 0-1.43-.9l-1.05-.02a1.64 1.64 0 0 1-1.6-1.64V1.93c0-.7-.45-1.33-1.12-1.55l-.73-.24a1.64 1.64 0 0 0-1.65.37l-.76.73c-.64.62-1.66.6-2.29-.02L8.14.48c-.5-.5-1.26-.62-1.89-.31l-.69.34c-.54.27-.89.82-.91 1.43l-.02 1.05c-.02.89-.75 1.6-1.64 1.6H1.94c-.7 0-1.33.45-1.55 1.12l-.24.73c-.19.57-.05 1.21.37 1.65l.72.76c.62.64.6 1.66-.02 2.29l-.74.74c-.5.5-.62 1.26-.31 1.89l.34.69c.27.54.82.89 1.43.9l1.05.02c.89.02 1.6.74 1.6 1.64v1.05c0 .7.45 1.33 1.12 1.55l.73.24c.58.19 1.21.05 1.65-.37l.76-.73c.64-.61 1.66-.6 2.29.03l.74.74c.5.5 1.26.62 1.89.31l.69-.34c.54-.27.89-.82.9-1.43l.02-1.05c.02-.89.74-1.6 1.64-1.6h1.05c.7 0 1.33-.45 1.55-1.12l.24-.73c.19-.58.05-1.21-.37-1.65l-.73-.76zm-6.55 1.06a3.126 3.126 0 0 1-4.42-4.42 3.126 3.126 0 0 1 4.42 4.42\",\n      },\n    ],\n  },\n  32: {\n    outlined: [\n      {\n        d: \"M14.336 19.496a5.2 5.2 0 0 1-3.653-1.506 5.174 5.174 0 0 1 0-7.307 5.174 5.174 0 0 1 7.307 0 5.174 5.174 0 0 1 0 7.307 5.14 5.14 0 0 1-3.654 1.506m0-8.333c-.813 0-1.626.307-2.24.92a3.187 3.187 0 0 0 0 4.48 3.187 3.187 0 0 0 4.48 0 3.158 3.158 0 0 0-2.24-5.4\",\n      },\n      {\n        d: \"M18.377 28.67a3.18 3.18 0 0 1-2.254-.934l-.987-.986a1.187 1.187 0 0 0-1.653-.014l-1.013.96a3.18 3.18 0 0 1-3.2.72l-.974-.32a3.17 3.17 0 0 1-2.173-3.013v-1.4c0-.653-.507-1.173-1.16-1.173l-1.4-.027a3.16 3.16 0 0 1-2.773-1.76l-.454-.92a3.16 3.16 0 0 1 .6-3.667l.987-.986a1.19 1.19 0 0 0 .013-1.654l-.973-1.013a3.17 3.17 0 0 1-.72-3.213l.32-.974a3.17 3.17 0 0 1 3.013-2.173h1.4c.654 0 1.174-.507 1.174-1.16l.026-1.4A3.17 3.17 0 0 1 7.936.79l.92-.454a3.16 3.16 0 0 1 3.667.6l.987.987a1.187 1.187 0 0 0 1.653.013l1.014-.973a3.19 3.19 0 0 1 3.213-.72l.973.32a3.18 3.18 0 0 1 2.174 3.013v1.4c0 .654.506 1.174 1.16 1.187l1.4.027a3.14 3.14 0 0 1 2.773 1.76l.453.92a3.16 3.16 0 0 1-.6 3.666l-.986.987a1.187 1.187 0 0 0-.014 1.653l.974 1.014a3.18 3.18 0 0 1 .72 3.2l-.32.973a3.17 3.17 0 0 1-3.014 2.173h-1.4c-.653 0-1.173.507-1.173 1.16l-.027 1.4a3.14 3.14 0 0 1-1.76 2.774l-.92.453a3.2 3.2 0 0 1-1.427.333zm-4.067-4.254c.813 0 1.64.307 2.253.92l.987.987c.36.36.906.453 1.36.227l.92-.454c.387-.2.64-.586.653-1.026l.027-1.4a3.194 3.194 0 0 1 3.173-3.107h1.4c.507 0 .96-.32 1.12-.813l.32-.974a1.18 1.18 0 0 0-.267-1.186l-.973-1.014c-1.187-1.24-1.16-3.24.053-4.453l.987-.987c.36-.36.453-.906.227-1.36l-.454-.92c-.2-.386-.586-.64-1.026-.653l-1.4-.027a3.197 3.197 0 0 1-3.107-3.186v-1.4c0-.507-.32-.96-.813-1.12l-.974-.32a1.18 1.18 0 0 0-1.186.266l-1.014.96c-1.24 1.187-3.24 1.16-4.453-.053l-.987-.987a1.18 1.18 0 0 0-1.36-.226l-.92.453c-.386.2-.64.587-.653 1.027l-.027 1.4a3.194 3.194 0 0 1-3.173 3.106h-1.4c-.507 0-.96.32-1.12.814l-.32.973c-.133.413-.04.88.267 1.187l.973 1.013c1.187 1.24 1.16 3.24-.053 4.453l-.987.987a1.18 1.18 0 0 0-.227 1.36l.454.92c.2.387.586.64 1.026.653l1.4.027a3.194 3.194 0 0 1 3.107 3.173v1.4c0 .507.32.96.813 1.12l.974.32c.413.134.88.04 1.186-.266l1.014-.96a3.16 3.16 0 0 1 2.2-.88z\",\n      },\n    ],\n    filled: [\n      {\n        d: \"M25.04 14.867c-.827-.854-.8-2.214.027-3.054l.986-.986c.667-.667.827-1.68.414-2.52l-.454-.92a2.17 2.17 0 0 0-1.906-1.2l-1.4-.027a2.186 2.186 0 0 1-2.134-2.187v-1.4c0-.933-.6-1.773-1.493-2.066l-.973-.32a2.19 2.19 0 0 0-2.2.493l-1.014.973c-.853.827-2.213.8-3.053-.026L10.853.64a2.19 2.19 0 0 0-2.52-.413l-.92.453A2.21 2.21 0 0 0 6.2 2.587l-.027 1.4A2.186 2.186 0 0 1 3.987 6.12h-1.4c-.934 0-1.774.6-2.067 1.493l-.32.974a2.2 2.2 0 0 0 .493 2.2l.96 1.013c.827.853.8 2.213-.026 3.053l-.987.987a2.19 2.19 0 0 0-.413 2.52l.453.92a2.17 2.17 0 0 0 1.907 1.2l1.4.027a2.177 2.177 0 0 1 2.133 2.186v1.4c0 .934.6 1.774 1.493 2.067l.974.32a2.19 2.19 0 0 0 2.2-.493l1.013-.974a2.19 2.19 0 0 1 3.053.04l.987.987a2.19 2.19 0 0 0 2.52.413l.92-.453a2.17 2.17 0 0 0 1.2-1.907l.027-1.4a2.177 2.177 0 0 1 2.186-2.133h1.4c.934 0 1.774-.6 2.067-1.493l.32-.974a2.19 2.19 0 0 0-.493-2.2l-.974-1.013zm-8.733 1.413a4.168 4.168 0 0 1-5.894-5.893 4.17 4.17 0 0 1 5.894 0 4.17 4.17 0 0 1 0 5.893\",\n      },\n    ],\n  },\n};\n\n/** Props for {@link CogIcon}. See {@link BaseIconProps} for the shared shape. */\nexport type CogIconProps = BaseIconProps;\n\n/**\n * Cog icon. Renders at sizes 16, 24, or 32 px with outlined and filled variants.\n *\n * @example\n * ```tsx\n * <CogIcon size={24} filled />\n * ```\n */\nexport const CogIcon = React.forwardRef<SVGSVGElement, CogIconProps>((props, ref) => (\n  <BaseIcon ref={ref} variants={VARIANTS} {...props} />\n));\n\nCogIcon.displayName = \"CogIcon\";\n"],"names":[],"mappings":";;;;AAIA,MAAM,WAAyB;AAAA,EAC7B,IAAI;AAAA,IACF,UAAU;AAAA,MACR;AAAA,QACE,GAAG;AAAA,MAAA;AAAA,MAEL;AAAA,QACE,GAAG;AAAA,MAAA;AAAA,IACL;AAAA,IAEF,QAAQ;AAAA,MACN;AAAA,QACE,GAAG;AAAA,MAAA;AAAA,IACL;AAAA,EACF;AAAA,EAEF,IAAI;AAAA,IACF,UAAU;AAAA,MACR;AAAA,QACE,GAAG;AAAA,MAAA;AAAA,MAEL;AAAA,QACE,GAAG;AAAA,MAAA;AAAA,IACL;AAAA,IAEF,QAAQ;AAAA,MACN;AAAA,QACE,GAAG;AAAA,MAAA;AAAA,IACL;AAAA,EACF;AAAA,EAEF,IAAI;AAAA,IACF,UAAU;AAAA,MACR;AAAA,QACE,GAAG;AAAA,MAAA;AAAA,MAEL;AAAA,QACE,GAAG;AAAA,MAAA;AAAA,IACL;AAAA,IAEF,QAAQ;AAAA,MACN;AAAA,QACE,GAAG;AAAA,MAAA;AAAA,IACL;AAAA,EACF;AAEJ;AAaO,MAAM,UAAU,MAAM,WAAwC,CAAC,OAAO,QAC3E,oBAAC,UAAA,EAAS,KAAU,UAAU,UAAW,GAAG,OAAO,CACpD;AAED,QAAQ,cAAc;"}

package/dist/components/SegmentedControl/SegmentedControl.mjs

@@ -0,0 +1,104 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../utils/cn.mjs";
+const sizeClasses = {
+  "32": "px-2 py-1 typography-description-12px-semibold",
+  "40": "px-3 py-1.75 typography-body-small-14px-semibold",
+  "48": "px-4 py-2 typography-body-default-16px-semibold"
+};
+function warnMissingAccessibleName(ariaLabel, ariaLabelledBy) {
+  if (process.env.NODE_ENV !== "production") {
+    if (!ariaLabel && !ariaLabelledBy) {
+      console.warn(
+        "SegmentedControl: no accessible name provided. Pass an `aria-label` or `aria-labelledby` prop."
+      );
+    }
+  }
+}
+const SegmentedControl = React.forwardRef(
+  ({
+    className,
+    size = "32",
+    variant = "hug",
+    options,
+    value: controlledValue,
+    defaultValue,
+    onChange,
+    disabled = false,
+    ...props
+  }, ref) => {
+    warnMissingAccessibleName(props["aria-label"], props["aria-labelledby"]);
+    const [internalValue, setInternalValue] = React.useState(defaultValue ?? options[0]?.value);
+    const isControlled = controlledValue !== void 0;
+    const currentValue = isControlled ? controlledValue : internalValue;
+    const anySelected = options.some((o) => o.value === currentValue);
+    const buttonRefs = React.useRef([]);
+    const handleSelect = (optionValue) => {
+      if (disabled || optionValue === currentValue) return;
+      if (!isControlled) {
+        setInternalValue(optionValue);
+      }
+      onChange?.(optionValue);
+    };
+    const handleKeyDown = (e, index) => {
+      const nextIndex = e.key === "ArrowRight" || e.key === "ArrowDown" ? (index + 1) % options.length : e.key === "ArrowLeft" || e.key === "ArrowUp" ? (index - 1 + options.length) % options.length : null;
+      if (nextIndex === null) return;
+      e.preventDefault();
+      const nextOption = options[nextIndex];
+      handleSelect(nextOption.value);
+      buttonRefs.current[nextIndex]?.focus();
+    };
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        role: "radiogroup",
+        className: cn(
+          "relative items-center rounded-full bg-surface-tertiary p-1",
+          variant === "fill" ? "flex w-full" : "inline-flex",
+          disabled && "cursor-not-allowed opacity-50",
+          className
+        ),
+        ...props,
+        children: options.map((option, index) => {
+          const isSelected = currentValue === option.value;
+          return (
+            // biome-ignore lint/a11y/useSemanticElements: native radio inputs only allow Tab-focus on the checked item; buttons with roving tabindex give full keyboard navigation
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                ref: (el) => {
+                  buttonRefs.current[index] = el;
+                },
+                type: "button",
+                role: "radio",
+                "aria-checked": isSelected,
+                tabIndex: isSelected || !anySelected && index === 0 ? 0 : -1,
+                disabled,
+                onClick: () => handleSelect(option.value),
+                onKeyDown: (e) => handleKeyDown(e, index),
+                className: cn(
+                  "relative inline-flex min-w-0 cursor-pointer items-center justify-center rounded-full",
+                  "motion-safe:transition-colors motion-safe:duration-150 motion-safe:ease-in-out",
+                  "focus-visible:shadow-focus-ring focus-visible:outline-none",
+                  variant === "fill" ? "flex-1" : "shrink-0",
+                  sizeClasses[size],
+                  isSelected ? "bg-buttons-primary-default text-content-primary-inverted shadow-sm" : "text-content-primary hover:bg-buttons-switch-hover",
+                  disabled && "pointer-events-none"
+                ),
+                children: /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate", children: option.label })
+              },
+              option.value
+            )
+          );
+        })
+      }
+    );
+  }
+);
+SegmentedControl.displayName = "SegmentedControl";
+export {
+  SegmentedControl
+};
+//# sourceMappingURL=SegmentedControl.mjs.map

package/dist/components/SegmentedControl/SegmentedControl.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SegmentedControl.mjs","sources":["../../../src/components/SegmentedControl/SegmentedControl.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\n/** Height of the segmented control in pixels. */\nexport type SegmentedControlSize = \"32\" | \"40\" | \"48\";\n\n/**\n * Segment layout.\n * - `\"hug\"`: each segment is sized to its content.\n * - `\"fill\"`: the control spans the full width of its container and each segment grows equally.\n */\nexport type SegmentedControlVariant = \"hug\" | \"fill\";\n\n/** Describes one selectable segment. */\nexport interface SegmentedControlOption {\n  /** Display label for the segment. */\n  label: string;\n  /** Value identifier returned via `onChange`. */\n  value: string;\n}\n\nexport interface SegmentedControlProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n  /** Height of the control in pixels. @default \"32\" */\n  size?: SegmentedControlSize;\n  /** Segment layout. @default \"hug\" */\n  variant?: SegmentedControlVariant;\n  /** The selectable segments. Designed for two or three mutually exclusive options. */\n  options: SegmentedControlOption[];\n  /** Currently selected value (controlled). */\n  value?: string;\n  /** Initially selected value (uncontrolled). Defaults to the first option. */\n  defaultValue?: string;\n  /** Callback fired when the selected value changes. */\n  onChange?: (value: string) => void;\n  /** Whether the control is disabled. @default false */\n  disabled?: boolean;\n}\n\n/** Padding and typography per size. Combined with the container's `p-1` these hit the 32/40/48px heights. */\nconst sizeClasses: Record<SegmentedControlSize, string> = {\n  \"32\": \"px-2 py-1 typography-description-12px-semibold\",\n  \"40\": \"px-3 py-1.75 typography-body-small-14px-semibold\",\n  \"48\": \"px-4 py-2 typography-body-default-16px-semibold\",\n};\n\nfunction warnMissingAccessibleName(ariaLabel?: string, ariaLabelledBy?: string) {\n  if (process.env.NODE_ENV !== \"production\") {\n    if (!ariaLabel && !ariaLabelledBy) {\n      console.warn(\n        \"SegmentedControl: no accessible name provided. Pass an `aria-label` or `aria-labelledby` prop.\",\n      );\n    }\n  }\n}\n\n/**\n * A compact selector for choosing between two or three mutually exclusive\n * options where the choice affects the content immediately below it. Use\n * instead of tabs when the options are more like settings or filters than\n * navigation, such as toggling a list/grid view or a monthly/annual price.\n *\n * Rendered as a `radiogroup` with roving-tabindex keyboard navigation. Supports\n * both controlled and uncontrolled usage.\n *\n * @example\n * ```tsx\n * <SegmentedControl\n *   options={[\n *     { label: \"Net\", value: \"net\" },\n *     { label: \"Gross\", value: \"gross\" },\n *   ]}\n *   value={amount}\n *   onChange={setAmount}\n *   aria-label=\"Amount type\"\n * />\n * ```\n */\nexport const SegmentedControl = React.forwardRef<HTMLDivElement, SegmentedControlProps>(\n  (\n    {\n      className,\n      size = \"32\",\n      variant = \"hug\",\n      options,\n      value: controlledValue,\n      defaultValue,\n      onChange,\n      disabled = false,\n      ...props\n    },\n    ref,\n  ) => {\n    warnMissingAccessibleName(props[\"aria-label\"], props[\"aria-labelledby\"]);\n\n    // Tracks selection for uncontrolled usage; ignored when `value` prop is provided\n    const [internalValue, setInternalValue] = React.useState(defaultValue ?? options[0]?.value);\n    const isControlled = controlledValue !== undefined;\n    const currentValue = isControlled ? controlledValue : internalValue;\n    const anySelected = options.some((o) => o.value === currentValue);\n    const buttonRefs = React.useRef<(HTMLButtonElement | null)[]>([]);\n\n    const handleSelect = (optionValue: string) => {\n      if (disabled || optionValue === currentValue) return;\n      if (!isControlled) {\n        setInternalValue(optionValue);\n      }\n      onChange?.(optionValue);\n    };\n\n    const handleKeyDown = (e: React.KeyboardEvent, index: number) => {\n      const nextIndex =\n        e.key === \"ArrowRight\" || e.key === \"ArrowDown\"\n          ? (index + 1) % options.length\n          : e.key === \"ArrowLeft\" || e.key === \"ArrowUp\"\n            ? (index - 1 + options.length) % options.length\n            : null;\n      if (nextIndex === null) return;\n      e.preventDefault();\n      const nextOption = options[nextIndex] as SegmentedControlOption;\n      handleSelect(nextOption.value);\n      buttonRefs.current[nextIndex]?.focus();\n    };\n\n    return (\n      <div\n        ref={ref}\n        role=\"radiogroup\"\n        className={cn(\n          \"relative items-center rounded-full bg-surface-tertiary p-1\",\n          variant === \"fill\" ? \"flex w-full\" : \"inline-flex\",\n          disabled && \"cursor-not-allowed opacity-50\",\n          className,\n        )}\n        {...props}\n      >\n        {options.map((option, index) => {\n          const isSelected = currentValue === option.value;\n          return (\n            // biome-ignore lint/a11y/useSemanticElements: native radio inputs only allow Tab-focus on the checked item; buttons with roving tabindex give full keyboard navigation\n            <button\n              key={option.value}\n              ref={(el) => {\n                buttonRefs.current[index] = el;\n              }}\n              type=\"button\"\n              role=\"radio\"\n              aria-checked={isSelected}\n              tabIndex={isSelected || (!anySelected && index === 0) ? 0 : -1}\n              disabled={disabled}\n              onClick={() => handleSelect(option.value)}\n              onKeyDown={(e) => handleKeyDown(e, index)}\n              className={cn(\n                \"relative inline-flex min-w-0 cursor-pointer items-center justify-center rounded-full\",\n                \"motion-safe:transition-colors motion-safe:duration-150 motion-safe:ease-in-out\",\n                \"focus-visible:shadow-focus-ring focus-visible:outline-none\",\n                variant === \"fill\" ? \"flex-1\" : \"shrink-0\",\n                sizeClasses[size],\n                isSelected\n                  ? \"bg-buttons-primary-default text-content-primary-inverted shadow-sm\"\n                  : \"text-content-primary hover:bg-buttons-switch-hover\",\n                disabled && \"pointer-events-none\",\n              )}\n            >\n              <span className=\"min-w-0 truncate\">{option.label}</span>\n            </button>\n          );\n        })}\n      </div>\n    );\n  },\n);\n\nSegmentedControl.displayName = \"SegmentedControl\";\n"],"names":[],"mappings":";;;;AAwCA,MAAM,cAAoD;AAAA,EACxD,MAAM;AAAA,EACN,MAAM;AAAA,EACN,MAAM;AACR;AAEA,SAAS,0BAA0B,WAAoB,gBAAyB;AAC9E,MAAI,QAAQ,IAAI,aAAa,cAAc;AACzC,QAAI,CAAC,aAAa,CAAC,gBAAgB;AACjC,cAAQ;AAAA,QACN;AAAA,MAAA;AAAA,IAEJ;AAAA,EACF;AACF;AAwBO,MAAM,mBAAmB,MAAM;AAAA,EACpC,CACE;AAAA,IACE;AAAA,IACA,OAAO;AAAA,IACP,UAAU;AAAA,IACV;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX,GAAG;AAAA,EAAA,GAEL,QACG;AACH,8BAA0B,MAAM,YAAY,GAAG,MAAM,iBAAiB,CAAC;AAGvE,UAAM,CAAC,eAAe,gBAAgB,IAAI,MAAM,SAAS,gBAAgB,QAAQ,CAAC,GAAG,KAAK;AAC1F,UAAM,eAAe,oBAAoB;AACzC,UAAM,eAAe,eAAe,kBAAkB;AACtD,UAAM,cAAc,QAAQ,KAAK,CAAC,MAAM,EAAE,UAAU,YAAY;AAChE,UAAM,aAAa,MAAM,OAAqC,EAAE;AAEhE,UAAM,eAAe,CAAC,gBAAwB;AAC5C,UAAI,YAAY,gBAAgB,aAAc;AAC9C,UAAI,CAAC,cAAc;AACjB,yBAAiB,WAAW;AAAA,MAC9B;AACA,iBAAW,WAAW;AAAA,IACxB;AAEA,UAAM,gBAAgB,CAAC,GAAwB,UAAkB;AAC/D,YAAM,YACJ,EAAE,QAAQ,gBAAgB,EAAE,QAAQ,eAC/B,QAAQ,KAAK,QAAQ,SACtB,EAAE,QAAQ,eAAe,EAAE,QAAQ,aAChC,QAAQ,IAAI,QAAQ,UAAU,QAAQ,SACvC;AACR,UAAI,cAAc,KAAM;AACxB,QAAE,eAAA;AACF,YAAM,aAAa,QAAQ,SAAS;AACpC,mBAAa,WAAW,KAAK;AAC7B,iBAAW,QAAQ,SAAS,GAAG,MAAA;AAAA,IACjC;AAEA,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,MAAK;AAAA,QACL,WAAW;AAAA,UACT;AAAA,UACA,YAAY,SAAS,gBAAgB;AAAA,UACrC,YAAY;AAAA,UACZ;AAAA,QAAA;AAAA,QAED,GAAG;AAAA,QAEH,UAAA,QAAQ,IAAI,CAAC,QAAQ,UAAU;AAC9B,gBAAM,aAAa,iBAAiB,OAAO;AAC3C;AAAA;AAAA,YAEE;AAAA,cAAC;AAAA,cAAA;AAAA,gBAEC,KAAK,CAAC,OAAO;AACX,6BAAW,QAAQ,KAAK,IAAI;AAAA,gBAC9B;AAAA,gBACA,MAAK;AAAA,gBACL,MAAK;AAAA,gBACL,gBAAc;AAAA,gBACd,UAAU,cAAe,CAAC,eAAe,UAAU,IAAK,IAAI;AAAA,gBAC5D;AAAA,gBACA,SAAS,MAAM,aAAa,OAAO,KAAK;AAAA,gBACxC,WAAW,CAAC,MAAM,cAAc,GAAG,KAAK;AAAA,gBACxC,WAAW;AAAA,kBACT;AAAA,kBACA;AAAA,kBACA;AAAA,kBACA,YAAY,SAAS,WAAW;AAAA,kBAChC,YAAY,IAAI;AAAA,kBAChB,aACI,uEACA;AAAA,kBACJ,YAAY;AAAA,gBAAA;AAAA,gBAGd,UAAA,oBAAC,QAAA,EAAK,WAAU,oBAAoB,iBAAO,MAAA,CAAM;AAAA,cAAA;AAAA,cAvB5C,OAAO;AAAA,YAAA;AAAA;AAAA,QA0BlB,CAAC;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAEA,iBAAiB,cAAc;"}

package/dist/components/Tabs/TabsTrigger.mjs

@@ -3,32 +3,41 @@ import { jsx } from "react/jsx-runtime";
 import * as TabsPrimitive from "@radix-ui/react-tabs";
 import * as React from "react";
 import { cn } from "../../utils/cn.mjs";
-const TabsTrigger = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(
-  TabsPrimitive.Trigger,
-  {
-    ref,
-    className: cn(
-      "inline-flex min-w-0 items-center justify-center",
-      "typography-body-default-16px-semibold cursor-pointer",
-      "motion-safe:transition-colors motion-safe:duration-150 motion-safe:ease-in-out",
-      "data-[orientation=horizontal]:px-4 data-[orientation=horizontal]:py-3",
-      "data-[orientation=vertical]:justify-start data-[orientation=vertical]:px-4 data-[orientation=vertical]:py-3",
-      "data-[state=active]:text-content-primary",
-      "data-[state=inactive]:text-content-tertiary",
-      "data-[state=active]:hover:text-content-primary/70",
-      "data-[state=inactive]:hover:text-content-primary",
-      "data-[state=active]:active:text-content-primary/70",
-      "data-[state=inactive]:active:text-content-primary",
-      "data-disabled:pointer-events-none",
-      "data-disabled:data-[state=active]:text-content-tertiary",
-      "data-disabled:data-[state=inactive]:text-neutral-alphas-200",
-      "focus-visible:shadow-focus-ring focus-visible:outline-none",
-      className
-    ),
-    ...props,
-    children: /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate", children })
-  }
-));
+const TabsTrigger = React.forwardRef(({ className, children, asChild, ...props }, ref) => {
+  const label = /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate", children });
+  const content = asChild && React.isValidElement(children) ? React.cloneElement(
+    children,
+    void 0,
+    /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate", children: children.props.children })
+  ) : label;
+  return /* @__PURE__ */ jsx(
+    TabsPrimitive.Trigger,
+    {
+      ref,
+      asChild,
+      className: cn(
+        "inline-flex min-w-0 items-center justify-center",
+        "typography-body-default-16px-semibold cursor-pointer",
+        "motion-safe:transition-colors motion-safe:duration-150 motion-safe:ease-in-out",
+        "data-[orientation=horizontal]:px-4 data-[orientation=horizontal]:py-3",
+        "data-[orientation=vertical]:justify-start data-[orientation=vertical]:px-4 data-[orientation=vertical]:py-3",
+        "data-[state=active]:text-content-primary",
+        "data-[state=inactive]:text-content-tertiary",
+        "data-[state=active]:hover:text-content-primary/70",
+        "data-[state=inactive]:hover:text-content-primary",
+        "data-[state=active]:active:text-content-primary/70",
+        "data-[state=inactive]:active:text-content-primary",
+        "data-disabled:pointer-events-none",
+        "data-disabled:data-[state=active]:text-content-tertiary",
+        "data-disabled:data-[state=inactive]:text-neutral-alphas-200",
+        "focus-visible:shadow-focus-ring focus-visible:outline-none",
+        className
+      ),
+      ...props,
+      children: content
+    }
+  );
+});
 TabsTrigger.displayName = "TabsTrigger";
 export {
   TabsTrigger

package/dist/components/Tabs/TabsTrigger.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"TabsTrigger.mjs","sources":["../../../src/components/Tabs/TabsTrigger.tsx"],"sourcesContent":["import * as TabsPrimitive from \"@radix-ui/react-tabs\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\n/** Props for the {@link TabsTrigger} button component. */\nexport type TabsTriggerProps = React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>;\n\n/** An interactive tab button that activates its associated {@link TabsContent} panel when clicked. */\nexport const TabsTrigger = React.forwardRef<\n  React.ComponentRef<typeof TabsPrimitive.Trigger>,\n  TabsTriggerProps\n>(({ className, children, ...props }, ref) => (\n  <TabsPrimitive.Trigger\n    ref={ref}\n    className={cn(\n      \"inline-flex min-w-0 items-center justify-center\",\n      \"typography-body-default-16px-semibold cursor-pointer\",\n      \"motion-safe:transition-colors motion-safe:duration-150 motion-safe:ease-in-out\",\n      \"data-[orientation=horizontal]:px-4 data-[orientation=horizontal]:py-3\",\n      \"data-[orientation=vertical]:justify-start data-[orientation=vertical]:px-4 data-[orientation=vertical]:py-3\",\n      \"data-[state=active]:text-content-primary\",\n      \"data-[state=inactive]:text-content-tertiary\",\n      \"data-[state=active]:hover:text-content-primary/70\",\n      \"data-[state=inactive]:hover:text-content-primary\",\n      \"data-[state=active]:active:text-content-primary/70\",\n      \"data-[state=inactive]:active:text-content-primary\",\n      \"data-disabled:pointer-events-none\",\n      \"data-disabled:data-[state=active]:text-content-tertiary\",\n      \"data-disabled:data-[state=inactive]:text-neutral-alphas-200\",\n      \"focus-visible:shadow-focus-ring focus-visible:outline-none\",\n      className,\n    )}\n    {...props}\n  >\n    <span className=\"min-w-0 truncate\">{children}</span>\n  </TabsPrimitive.Trigger>\n));\n\nTabsTrigger.displayName = \"TabsTrigger\";\n"],"names":[],"mappings":";;;;;AAQO,MAAM,cAAc,MAAM,WAG/B,CAAC,EAAE,WAAW,UAAU,GAAG,SAAS,QACpC;AAAA,EAAC,cAAc;AAAA,EAAd;AAAA,IACC;AAAA,IACA,WAAW;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,IAED,GAAG;AAAA,IAEJ,UAAA,oBAAC,QAAA,EAAK,WAAU,oBAAoB,SAAA,CAAS;AAAA,EAAA;AAC/C,CACD;AAED,YAAY,cAAc;"}
+{"version":3,"file":"TabsTrigger.mjs","sources":["../../../src/components/Tabs/TabsTrigger.tsx"],"sourcesContent":["import * as TabsPrimitive from \"@radix-ui/react-tabs\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\n/** Props for the {@link TabsTrigger} button component. */\nexport type TabsTriggerProps = React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>;\n\n/**\n * An interactive tab that activates its associated {@link TabsContent} panel.\n *\n * Renders a `<button>` by default. Pass `asChild` to render the tab as another\n * element — e.g. a router link for navigation tabs (`<TabsTrigger asChild><Link\n * href=\"…\">…</Link></TabsTrigger>`). With `asChild` the child element becomes\n * the tab itself (receiving `role=\"tab\"` and focus management), so the tab\n * stays a single interactive control rather than nesting one inside the other.\n */\nexport const TabsTrigger = React.forwardRef<\n  React.ComponentRef<typeof TabsPrimitive.Trigger>,\n  TabsTriggerProps\n>(({ className, children, asChild, ...props }, ref) => {\n  const label = <span className=\"min-w-0 truncate\">{children}</span>;\n\n  // The `min-w-0 truncate` span keeps long labels ellipsised and lets\n  // TabsList measure the active indicator against the label width. With\n  // `asChild` the consumer's element becomes the tab, so wrap *its* children\n  // in that span (rather than wrapping the element) — the tab stays a single\n  // interactive control (no nested link/button) while behaviour matches the\n  // default button tab.\n  const content =\n    asChild && React.isValidElement(children)\n      ? React.cloneElement(\n          children,\n          undefined,\n          <span className=\"min-w-0 truncate\">\n            {(children.props as { children?: React.ReactNode }).children}\n          </span>,\n        )\n      : label;\n\n  return (\n    <TabsPrimitive.Trigger\n      ref={ref}\n      asChild={asChild}\n      className={cn(\n        \"inline-flex min-w-0 items-center justify-center\",\n        \"typography-body-default-16px-semibold cursor-pointer\",\n        \"motion-safe:transition-colors motion-safe:duration-150 motion-safe:ease-in-out\",\n        \"data-[orientation=horizontal]:px-4 data-[orientation=horizontal]:py-3\",\n        \"data-[orientation=vertical]:justify-start data-[orientation=vertical]:px-4 data-[orientation=vertical]:py-3\",\n        \"data-[state=active]:text-content-primary\",\n        \"data-[state=inactive]:text-content-tertiary\",\n        \"data-[state=active]:hover:text-content-primary/70\",\n        \"data-[state=inactive]:hover:text-content-primary\",\n        \"data-[state=active]:active:text-content-primary/70\",\n        \"data-[state=inactive]:active:text-content-primary\",\n        \"data-disabled:pointer-events-none\",\n        \"data-disabled:data-[state=active]:text-content-tertiary\",\n        \"data-disabled:data-[state=inactive]:text-neutral-alphas-200\",\n        \"focus-visible:shadow-focus-ring focus-visible:outline-none\",\n        className,\n      )}\n      {...props}\n    >\n      {content}\n    </TabsPrimitive.Trigger>\n  );\n});\n\nTabsTrigger.displayName = \"TabsTrigger\";\n"],"names":[],"mappings":";;;;;AAgBO,MAAM,cAAc,MAAM,WAG/B,CAAC,EAAE,WAAW,UAAU,SAAS,GAAG,MAAA,GAAS,QAAQ;AACrD,QAAM,QAAQ,oBAAC,QAAA,EAAK,WAAU,oBAAoB,UAAS;AAQ3D,QAAM,UACJ,WAAW,MAAM,eAAe,QAAQ,IACpC,MAAM;AAAA,IACJ;AAAA,IACA;AAAA,wBACC,QAAA,EAAK,WAAU,oBACZ,UAAA,SAAS,MAAyC,SAAA,CACtD;AAAA,EAAA,IAEF;AAEN,SACE;AAAA,IAAC,cAAc;AAAA,IAAd;AAAA,MACC;AAAA,MACA;AAAA,MACA,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,MAED,GAAG;AAAA,MAEH,UAAA;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;AAED,YAAY,cAAc;"}

package/dist/date-picker.d.ts

@@ -14,7 +14,7 @@ import { RefAttributes } from 'react';
  * ```tsx
  * <DatePicker
  *   mode="range"
- *   type="double"
+ *   variant="double"
  *   selected={range}
  *   onSelect={setRange}
  *   onApply={save}

package/dist/index.d.ts

@@ -1416,6 +1416,19 @@ export declare const CodeIcon: React_2.ForwardRefExoticComponent<BaseIconProps &
 /** Props for {@link CodeIcon}. See {@link BaseIconProps} for the shared shape. */
 export declare type CodeIconProps = BaseIconProps;
 
+/**
+ * Cog icon. Renders at sizes 16, 24, or 32 px with outlined and filled variants.
+ *
+ * @example
+ * ```tsx
+ * <CogIcon size={24} filled />
+ * ```
+ */
+export declare const CogIcon: React_2.ForwardRefExoticComponent<BaseIconProps & React_2.RefAttributes<SVGSVGElement>>;
+
+/** Props for {@link CogIcon}. See {@link BaseIconProps} for the shared shape. */
+export declare type CogIconProps = BaseIconProps;
+
 /**
  * Coin icon. Renders at sizes 16, 24, or 32 px with outlined and filled variants.
  *
@@ -3917,6 +3930,65 @@ export declare const SearchIcon: React_2.ForwardRefExoticComponent<BaseIconProps
 /** Props for {@link SearchIcon}. See {@link BaseIconProps} for the shared shape. */
 export declare type SearchIconProps = BaseIconProps;
 
+/**
+ * A compact selector for choosing between two or three mutually exclusive
+ * options where the choice affects the content immediately below it. Use
+ * instead of tabs when the options are more like settings or filters than
+ * navigation, such as toggling a list/grid view or a monthly/annual price.
+ *
+ * Rendered as a `radiogroup` with roving-tabindex keyboard navigation. Supports
+ * both controlled and uncontrolled usage.
+ *
+ * @example
+ * ```tsx
+ * <SegmentedControl
+ *   options={[
+ *     { label: "Net", value: "net" },
+ *     { label: "Gross", value: "gross" },
+ *   ]}
+ *   value={amount}
+ *   onChange={setAmount}
+ *   aria-label="Amount type"
+ * />
+ * ```
+ */
+export declare const SegmentedControl: React_2.ForwardRefExoticComponent<SegmentedControlProps & React_2.RefAttributes<HTMLDivElement>>;
+
+/** Describes one selectable segment. */
+export declare interface SegmentedControlOption {
+    /** Display label for the segment. */
+    label: string;
+    /** Value identifier returned via `onChange`. */
+    value: string;
+}
+
+export declare interface SegmentedControlProps extends Omit<React_2.HTMLAttributes<HTMLDivElement>, "onChange"> {
+    /** Height of the control in pixels. @default "32" */
+    size?: SegmentedControlSize;
+    /** Segment layout. @default "hug" */
+    variant?: SegmentedControlVariant;
+    /** The selectable segments. Designed for two or three mutually exclusive options. */
+    options: SegmentedControlOption[];
+    /** Currently selected value (controlled). */
+    value?: string;
+    /** Initially selected value (uncontrolled). Defaults to the first option. */
+    defaultValue?: string;
+    /** Callback fired when the selected value changes. */
+    onChange?: (value: string) => void;
+    /** Whether the control is disabled. @default false */
+    disabled?: boolean;
+}
+
+/** Height of the segmented control in pixels. */
+export declare type SegmentedControlSize = "32" | "40" | "48";
+
+/**
+ * Segment layout.
+ * - `"hug"`: each segment is sized to its content.
+ * - `"fill"`: the control spans the full width of its container and each segment grows equally.
+ */
+export declare type SegmentedControlVariant = "hug" | "fill";
+
 /**
  * A select field with optional label, helper/error text, and an icon slot,
  * built on Radix UI Select for full accessibility and keyboard navigation.
@@ -4813,7 +4885,15 @@ export declare type TabsListProps = React_2.ComponentPropsWithoutRef<typeof Tabs
 /** Props for the {@link Tabs} root component. Extends Radix `Tabs.Root` props. */
 export declare type TabsProps = React_2.ComponentPropsWithoutRef<typeof TabsPrimitive.Root>;
 
-/** An interactive tab button that activates its associated {@link TabsContent} panel when clicked. */
+/**
+ * An interactive tab that activates its associated {@link TabsContent} panel.
+ *
+ * Renders a `<button>` by default. Pass `asChild` to render the tab as another
+ * element — e.g. a router link for navigation tabs (`<TabsTrigger asChild><Link
+ * href="…">…</Link></TabsTrigger>`). With `asChild` the child element becomes
+ * the tab itself (receiving `role="tab"` and focus management), so the tab
+ * stays a single interactive control rather than nesting one inside the other.
+ */
 export declare const TabsTrigger: React_2.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsTriggerProps & React_2.RefAttributes<HTMLButtonElement>, "ref"> & React_2.RefAttributes<HTMLButtonElement>>;
 
 /** Props for the {@link TabsTrigger} button component. */