@fanvue/ui 3.10.0 → 3.12.0

package/dist/cjs/components/DatePicker/DatePicker.cjs

@@ -9,16 +9,17 @@ const Button = require("../Button/Button.cjs");
 const ChevronLeftIcon = require("../Icons/ChevronLeftIcon.cjs");
 const ChevronRightIcon = require("../Icons/ChevronRightIcon.cjs");
 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__ */ jsxRuntime.jsx(
     "div",
     {
       className: cn.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
     }
@@ -29,21 +30,23 @@ function DayButton({ day, modifiers, className, ...buttonProps }) {
   React.useEffect(() => {
     if (modifiers.focused) ref.current?.focus();
   }, [modifiers.focused]);
+  const isSelected = modifiers.selected && !modifiers.range_middle;
   return /* @__PURE__ */ jsxRuntime.jsx(
     "button",
     {
       ref,
       type: "button",
       className: cn.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
     }
@@ -91,7 +94,7 @@ const DatePicker = React.forwardRef(
       {
         ref,
         className: cn.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: [
@@ -101,29 +104,23 @@ const DatePicker = React.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.cn("relative flex", isMulti && "gap-6"),
                 month: "flex flex-1 flex-col",
-                month_caption: cn.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.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.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",
-                day: "relative flex w-10 flex-1 items-center justify-center",
-                range_middle: "bg-brand-primary-muted",
+                week: "flex",
+                day: "relative flex flex-1 items-center justify-center p-0.5",
                 hidden: "hidden"
               },
               components: {
@@ -142,8 +139,8 @@ const DatePicker = React.forwardRef(
               ...resolvedDayPickerProps
             }
           ),
-          showFooter && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-4 px-5 pb-4", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(Button.Button, { variant: "secondary", size: "40", className: "flex-1", onClick: onCancel, children: cancelLabel }),
+          showFooter && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2 pt-6", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(Button.Button, { variant: "outline", size: "40", className: "flex-1", onClick: onCancel, children: cancelLabel }),
             /* @__PURE__ */ jsxRuntime.jsx(Button.Button, { variant: "primary", size: "40", className: "flex-1", onClick: onApply, children: applyLabel })
           ] })
         ]

package/dist/cjs/components/DatePicker/DatePicker.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.cjs","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":["jsx","cn","useRef","useEffect","forwardRef","jsxs","DayPicker","ChevronLeftIcon","ChevronRightIcon","Button"],"mappings":"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"}
+{"version":3,"file":"DatePicker.cjs","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 flex-1 items-center justify-center p-0.5\",\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":["jsx","cn","useRef","useEffect","forwardRef","jsxs","DayPicker","ChevronLeftIcon","ChevronRightIcon","Button"],"mappings":"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"}

package/dist/cjs/components/PageSelector/PageSelector.cjs

@@ -0,0 +1,102 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const cn = require("../../utils/cn.cjs");
+const ChevronLeftIcon = require("../Icons/ChevronLeftIcon.cjs");
+const ChevronRightIcon = require("../Icons/ChevronRightIcon.cjs");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+const arrowClasses = cn.cn(
+  "flex shrink-0 cursor-pointer items-center justify-center rounded-xs p-1 text-content-primary [&>svg]:size-4",
+  "hover:bg-brand-primary-muted disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-transparent",
+  "focus-visible:shadow-focus-ring focus-visible:outline-none motion-safe:transition-colors motion-safe:duration-150"
+);
+const PageSelector = React__namespace.forwardRef(
+  ({
+    className,
+    totalPages,
+    currentPage,
+    onPageChange,
+    loop = false,
+    disabled = false,
+    ariaLabel = "Page selector",
+    previousLabel = "Previous page",
+    nextLabel = "Next page",
+    formatLabel = (current, total) => `${current} of ${total}`,
+    ...props
+  }, ref) => {
+    const atStart = currentPage <= 1;
+    const atEnd = currentPage >= totalPages;
+    const prevDisabled = disabled || atStart && !loop;
+    const nextDisabled = disabled || atEnd && !loop;
+    const goTo = (page) => {
+      const wrapped = loop ? (page - 1 + totalPages) % totalPages + 1 : page;
+      if (wrapped < 1 || wrapped > totalPages || wrapped === currentPage) return;
+      onPageChange?.(wrapped);
+    };
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "nav",
+      {
+        ref,
+        "aria-label": ariaLabel,
+        className: cn.cn(
+          "inline-flex items-center gap-1 rounded-sm border border-border-primary bg-surface-secondary p-1",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              "aria-label": previousLabel,
+              disabled: prevDisabled,
+              onClick: () => goTo(currentPage - 1),
+              className: arrowClasses,
+              children: /* @__PURE__ */ jsxRuntime.jsx(ChevronLeftIcon.ChevronLeftIcon, {})
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              "aria-live": "polite",
+              className: "typography-description-12px-semibold px-2 py-1 text-center text-content-primary tabular-nums",
+              children: formatLabel(currentPage, totalPages)
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              "aria-label": nextLabel,
+              disabled: nextDisabled,
+              onClick: () => goTo(currentPage + 1),
+              className: arrowClasses,
+              children: /* @__PURE__ */ jsxRuntime.jsx(ChevronRightIcon.ChevronRightIcon, {})
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+PageSelector.displayName = "PageSelector";
+exports.PageSelector = PageSelector;
+//# sourceMappingURL=PageSelector.cjs.map

package/dist/cjs/components/PageSelector/PageSelector.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageSelector.cjs","sources":["../../../../src/components/PageSelector/PageSelector.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { ChevronLeftIcon } from \"../Icons/ChevronLeftIcon\";\nimport { ChevronRightIcon } from \"../Icons/ChevronRightIcon\";\n\nexport interface PageSelectorProps extends Omit<React.HTMLAttributes<HTMLElement>, \"onChange\"> {\n  /** Total number of pages. */\n  totalPages: number;\n  /** Current active page (1-indexed). */\n  currentPage: number;\n  /** Callback fired when the active page changes. Receives the new 1-indexed page number. */\n  onPageChange?: (page: number) => void;\n  /** Whether reaching either end wraps around to the other. @default false */\n  loop?: boolean;\n  /** Whether the control is disabled. @default false */\n  disabled?: boolean;\n  /** Accessible label for the `<nav>` landmark. @default \"Page selector\" */\n  ariaLabel?: string;\n  /** Accessible label for the previous-page button. @default \"Previous page\" */\n  previousLabel?: string;\n  /** Accessible label for the next-page button. @default \"Next page\" */\n  nextLabel?: string;\n  /** Formats the indicator between the arrows. @default (current, total) => \\`${current} of ${total}\\` */\n  formatLabel?: (currentPage: number, totalPages: number) => string;\n}\n\nconst arrowClasses = cn(\n  \"flex shrink-0 cursor-pointer items-center justify-center rounded-xs p-1 text-content-primary [&>svg]:size-4\",\n  \"hover:bg-brand-primary-muted disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-transparent\",\n  \"focus-visible:shadow-focus-ring focus-visible:outline-none motion-safe:transition-colors motion-safe:duration-150\",\n);\n\n/**\n * A compact control for stepping through a small, known set of pages one at a\n * time, showing the position as \"current of total\" between a back and forward\n * arrow. Use when the total is small and the exact page number matters less\n * than moving between them, such as flicking through generated variants or a\n * short carousel. Reach for `Pagination` instead when consumers need to jump\n * to a specific numbered page.\n *\n * @example\n * ```tsx\n * <PageSelector totalPages={3} currentPage={page} onPageChange={setPage} />\n * ```\n */\nexport const PageSelector = React.forwardRef<HTMLElement, PageSelectorProps>(\n  (\n    {\n      className,\n      totalPages,\n      currentPage,\n      onPageChange,\n      loop = false,\n      disabled = false,\n      ariaLabel = \"Page selector\",\n      previousLabel = \"Previous page\",\n      nextLabel = \"Next page\",\n      formatLabel = (current, total) => `${current} of ${total}`,\n      ...props\n    },\n    ref,\n  ) => {\n    const atStart = currentPage <= 1;\n    const atEnd = currentPage >= totalPages;\n    const prevDisabled = disabled || (atStart && !loop);\n    const nextDisabled = disabled || (atEnd && !loop);\n\n    const goTo = (page: number) => {\n      const wrapped = loop ? ((page - 1 + totalPages) % totalPages) + 1 : page;\n      if (wrapped < 1 || wrapped > totalPages || wrapped === currentPage) return;\n      onPageChange?.(wrapped);\n    };\n\n    return (\n      <nav\n        ref={ref}\n        aria-label={ariaLabel}\n        className={cn(\n          \"inline-flex items-center gap-1 rounded-sm border border-border-primary bg-surface-secondary p-1\",\n          className,\n        )}\n        {...props}\n      >\n        <button\n          type=\"button\"\n          aria-label={previousLabel}\n          disabled={prevDisabled}\n          onClick={() => goTo(currentPage - 1)}\n          className={arrowClasses}\n        >\n          <ChevronLeftIcon />\n        </button>\n\n        <span\n          aria-live=\"polite\"\n          className=\"typography-description-12px-semibold px-2 py-1 text-center text-content-primary tabular-nums\"\n        >\n          {formatLabel(currentPage, totalPages)}\n        </span>\n\n        <button\n          type=\"button\"\n          aria-label={nextLabel}\n          disabled={nextDisabled}\n          onClick={() => goTo(currentPage + 1)}\n          className={arrowClasses}\n        >\n          <ChevronRightIcon />\n        </button>\n      </nav>\n    );\n  },\n);\n\nPageSelector.displayName = \"PageSelector\";\n"],"names":["cn","React","jsxs","jsx","ChevronLeftIcon","ChevronRightIcon"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AA0BA,MAAM,eAAeA,GAAAA;AAAAA,EACnB;AAAA,EACA;AAAA,EACA;AACF;AAeO,MAAM,eAAeC,iBAAM;AAAA,EAChC,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,YAAY;AAAA,IACZ,cAAc,CAAC,SAAS,UAAU,GAAG,OAAO,OAAO,KAAK;AAAA,IACxD,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,UAAU,eAAe;AAC/B,UAAM,QAAQ,eAAe;AAC7B,UAAM,eAAe,YAAa,WAAW,CAAC;AAC9C,UAAM,eAAe,YAAa,SAAS,CAAC;AAE5C,UAAM,OAAO,CAAC,SAAiB;AAC7B,YAAM,UAAU,QAAS,OAAO,IAAI,cAAc,aAAc,IAAI;AACpE,UAAI,UAAU,KAAK,UAAU,cAAc,YAAY,YAAa;AACpE,qBAAe,OAAO;AAAA,IACxB;AAEA,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,cAAY;AAAA,QACZ,WAAWF,GAAAA;AAAAA,UACT;AAAA,UACA;AAAA,QAAA;AAAA,QAED,GAAG;AAAA,QAEJ,UAAA;AAAA,UAAAG,2BAAAA;AAAAA,YAAC;AAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,cAAY;AAAA,cACZ,UAAU;AAAA,cACV,SAAS,MAAM,KAAK,cAAc,CAAC;AAAA,cACnC,WAAW;AAAA,cAEX,yCAACC,gBAAAA,iBAAA,CAAA,CAAgB;AAAA,YAAA;AAAA,UAAA;AAAA,UAGnBD,2BAAAA;AAAAA,YAAC;AAAA,YAAA;AAAA,cACC,aAAU;AAAA,cACV,WAAU;AAAA,cAET,UAAA,YAAY,aAAa,UAAU;AAAA,YAAA;AAAA,UAAA;AAAA,UAGtCA,2BAAAA;AAAAA,YAAC;AAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,cAAY;AAAA,cACZ,UAAU;AAAA,cACV,SAAS,MAAM,KAAK,cAAc,CAAC;AAAA,cACnC,WAAW;AAAA,cAEX,yCAACE,iBAAAA,kBAAA,CAAA,CAAiB;AAAA,YAAA;AAAA,UAAA;AAAA,QACpB;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AACF;AAEA,aAAa,cAAc;;"}

package/dist/cjs/components/SegmentedControl/SegmentedControl.cjs

@@ -0,0 +1,121 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const cn = require("../../utils/cn.cjs");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+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__namespace.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__namespace.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__namespace.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__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        role: "radiogroup",
+        className: cn.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__ */ jsxRuntime.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.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__ */ jsxRuntime.jsx("span", { className: "min-w-0 truncate", children: option.label })
+              },
+              option.value
+            )
+          );
+        })
+      }
+    );
+  }
+);
+SegmentedControl.displayName = "SegmentedControl";
+exports.SegmentedControl = SegmentedControl;
+//# sourceMappingURL=SegmentedControl.cjs.map

package/dist/cjs/components/SegmentedControl/SegmentedControl.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SegmentedControl.cjs","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":["React","jsx","cn"],"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,mBAAmBA,iBAAM;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,IAAIA,iBAAM,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,aAAaA,iBAAM,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,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,MAAK;AAAA,QACL,WAAWC,GAAAA;AAAAA,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,YAEED,2BAAAA;AAAAA,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,WAAWC,GAAAA;AAAAA,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,UAAAD,2BAAAA,IAAC,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/cjs/index.cjs

@@ -204,6 +204,7 @@ const Loader = require("./components/Loader/Loader.cjs");
 const Logo = require("./components/Logo/Logo.cjs");
 const MobileStepper = require("./components/MobileStepper/MobileStepper.cjs");
 const OnlineBlinkingIcon = require("./components/OnlineBlinkingIcon/OnlineBlinkingIcon.cjs");
+const PageSelector = require("./components/PageSelector/PageSelector.cjs");
 const Pagination = require("./components/Pagination/Pagination.cjs");
 const PasswordField = require("./components/PasswordField/PasswordField.cjs");
 const Pill = require("./components/Pill/Pill.cjs");
@@ -215,6 +216,7 @@ const RadioGroup = require("./components/RadioGroup/RadioGroup.cjs");
 const RatingSummary = require("./components/RatingSummary/RatingSummary.cjs");
 const ReviewCard = require("./components/ReviewCard/ReviewCard.cjs");
 const SearchField = require("./components/SearchField/SearchField.cjs");
+const SegmentedControl = require("./components/SegmentedControl/SegmentedControl.cjs");
 const Select = require("./components/Select/Select.cjs");
 const Skeleton = require("./components/Skeleton/Skeleton.cjs");
 const Slider = require("./components/Slider/Slider.cjs");
@@ -491,6 +493,7 @@ exports.Loader = Loader.Loader;
 exports.Logo = Logo.Logo;
 exports.MobileStepper = MobileStepper.MobileStepper;
 exports.OnlineBlinkingIcon = OnlineBlinkingIcon.OnlineBlinkingIcon;
+exports.PageSelector = PageSelector.PageSelector;
 exports.Pagination = Pagination.Pagination;
 exports.PasswordField = PasswordField.PasswordField;
 exports.Pill = Pill.Pill;
@@ -502,6 +505,7 @@ exports.RadioGroup = RadioGroup.RadioGroup;
 exports.RatingSummary = RatingSummary.RatingSummary;
 exports.ReviewCard = ReviewCard.ReviewCard;
 exports.SearchField = SearchField.SearchField;
+exports.SegmentedControl = SegmentedControl.SegmentedControl;
 exports.Select = Select.Select;
 exports.SelectContent = Select.SelectContent;
 exports.SelectGroup = Select.SelectGroup;

package/dist/cjs/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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",
-                day: "relative flex w-10 flex-1 items-center justify-center",
-                range_middle: "bg-brand-primary-muted",
+                week: "flex",
+                day: "relative flex flex-1 items-center justify-center p-0.5",
                 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 flex-1 items-center justify-center p-0.5\",\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/PageSelector/PageSelector.mjs

@@ -0,0 +1,85 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../utils/cn.mjs";
+import { ChevronLeftIcon } from "../Icons/ChevronLeftIcon.mjs";
+import { ChevronRightIcon } from "../Icons/ChevronRightIcon.mjs";
+const arrowClasses = cn(
+  "flex shrink-0 cursor-pointer items-center justify-center rounded-xs p-1 text-content-primary [&>svg]:size-4",
+  "hover:bg-brand-primary-muted disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-transparent",
+  "focus-visible:shadow-focus-ring focus-visible:outline-none motion-safe:transition-colors motion-safe:duration-150"
+);
+const PageSelector = React.forwardRef(
+  ({
+    className,
+    totalPages,
+    currentPage,
+    onPageChange,
+    loop = false,
+    disabled = false,
+    ariaLabel = "Page selector",
+    previousLabel = "Previous page",
+    nextLabel = "Next page",
+    formatLabel = (current, total) => `${current} of ${total}`,
+    ...props
+  }, ref) => {
+    const atStart = currentPage <= 1;
+    const atEnd = currentPage >= totalPages;
+    const prevDisabled = disabled || atStart && !loop;
+    const nextDisabled = disabled || atEnd && !loop;
+    const goTo = (page) => {
+      const wrapped = loop ? (page - 1 + totalPages) % totalPages + 1 : page;
+      if (wrapped < 1 || wrapped > totalPages || wrapped === currentPage) return;
+      onPageChange?.(wrapped);
+    };
+    return /* @__PURE__ */ jsxs(
+      "nav",
+      {
+        ref,
+        "aria-label": ariaLabel,
+        className: cn(
+          "inline-flex items-center gap-1 rounded-sm border border-border-primary bg-surface-secondary p-1",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              "aria-label": previousLabel,
+              disabled: prevDisabled,
+              onClick: () => goTo(currentPage - 1),
+              className: arrowClasses,
+              children: /* @__PURE__ */ jsx(ChevronLeftIcon, {})
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-live": "polite",
+              className: "typography-description-12px-semibold px-2 py-1 text-center text-content-primary tabular-nums",
+              children: formatLabel(currentPage, totalPages)
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              "aria-label": nextLabel,
+              disabled: nextDisabled,
+              onClick: () => goTo(currentPage + 1),
+              className: arrowClasses,
+              children: /* @__PURE__ */ jsx(ChevronRightIcon, {})
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+PageSelector.displayName = "PageSelector";
+export {
+  PageSelector
+};
+//# sourceMappingURL=PageSelector.mjs.map

package/dist/components/PageSelector/PageSelector.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageSelector.mjs","sources":["../../../src/components/PageSelector/PageSelector.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { ChevronLeftIcon } from \"../Icons/ChevronLeftIcon\";\nimport { ChevronRightIcon } from \"../Icons/ChevronRightIcon\";\n\nexport interface PageSelectorProps extends Omit<React.HTMLAttributes<HTMLElement>, \"onChange\"> {\n  /** Total number of pages. */\n  totalPages: number;\n  /** Current active page (1-indexed). */\n  currentPage: number;\n  /** Callback fired when the active page changes. Receives the new 1-indexed page number. */\n  onPageChange?: (page: number) => void;\n  /** Whether reaching either end wraps around to the other. @default false */\n  loop?: boolean;\n  /** Whether the control is disabled. @default false */\n  disabled?: boolean;\n  /** Accessible label for the `<nav>` landmark. @default \"Page selector\" */\n  ariaLabel?: string;\n  /** Accessible label for the previous-page button. @default \"Previous page\" */\n  previousLabel?: string;\n  /** Accessible label for the next-page button. @default \"Next page\" */\n  nextLabel?: string;\n  /** Formats the indicator between the arrows. @default (current, total) => \\`${current} of ${total}\\` */\n  formatLabel?: (currentPage: number, totalPages: number) => string;\n}\n\nconst arrowClasses = cn(\n  \"flex shrink-0 cursor-pointer items-center justify-center rounded-xs p-1 text-content-primary [&>svg]:size-4\",\n  \"hover:bg-brand-primary-muted disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-transparent\",\n  \"focus-visible:shadow-focus-ring focus-visible:outline-none motion-safe:transition-colors motion-safe:duration-150\",\n);\n\n/**\n * A compact control for stepping through a small, known set of pages one at a\n * time, showing the position as \"current of total\" between a back and forward\n * arrow. Use when the total is small and the exact page number matters less\n * than moving between them, such as flicking through generated variants or a\n * short carousel. Reach for `Pagination` instead when consumers need to jump\n * to a specific numbered page.\n *\n * @example\n * ```tsx\n * <PageSelector totalPages={3} currentPage={page} onPageChange={setPage} />\n * ```\n */\nexport const PageSelector = React.forwardRef<HTMLElement, PageSelectorProps>(\n  (\n    {\n      className,\n      totalPages,\n      currentPage,\n      onPageChange,\n      loop = false,\n      disabled = false,\n      ariaLabel = \"Page selector\",\n      previousLabel = \"Previous page\",\n      nextLabel = \"Next page\",\n      formatLabel = (current, total) => `${current} of ${total}`,\n      ...props\n    },\n    ref,\n  ) => {\n    const atStart = currentPage <= 1;\n    const atEnd = currentPage >= totalPages;\n    const prevDisabled = disabled || (atStart && !loop);\n    const nextDisabled = disabled || (atEnd && !loop);\n\n    const goTo = (page: number) => {\n      const wrapped = loop ? ((page - 1 + totalPages) % totalPages) + 1 : page;\n      if (wrapped < 1 || wrapped > totalPages || wrapped === currentPage) return;\n      onPageChange?.(wrapped);\n    };\n\n    return (\n      <nav\n        ref={ref}\n        aria-label={ariaLabel}\n        className={cn(\n          \"inline-flex items-center gap-1 rounded-sm border border-border-primary bg-surface-secondary p-1\",\n          className,\n        )}\n        {...props}\n      >\n        <button\n          type=\"button\"\n          aria-label={previousLabel}\n          disabled={prevDisabled}\n          onClick={() => goTo(currentPage - 1)}\n          className={arrowClasses}\n        >\n          <ChevronLeftIcon />\n        </button>\n\n        <span\n          aria-live=\"polite\"\n          className=\"typography-description-12px-semibold px-2 py-1 text-center text-content-primary tabular-nums\"\n        >\n          {formatLabel(currentPage, totalPages)}\n        </span>\n\n        <button\n          type=\"button\"\n          aria-label={nextLabel}\n          disabled={nextDisabled}\n          onClick={() => goTo(currentPage + 1)}\n          className={arrowClasses}\n        >\n          <ChevronRightIcon />\n        </button>\n      </nav>\n    );\n  },\n);\n\nPageSelector.displayName = \"PageSelector\";\n"],"names":[],"mappings":";;;;;;AA0BA,MAAM,eAAe;AAAA,EACnB;AAAA,EACA;AAAA,EACA;AACF;AAeO,MAAM,eAAe,MAAM;AAAA,EAChC,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,YAAY;AAAA,IACZ,cAAc,CAAC,SAAS,UAAU,GAAG,OAAO,OAAO,KAAK;AAAA,IACxD,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,UAAU,eAAe;AAC/B,UAAM,QAAQ,eAAe;AAC7B,UAAM,eAAe,YAAa,WAAW,CAAC;AAC9C,UAAM,eAAe,YAAa,SAAS,CAAC;AAE5C,UAAM,OAAO,CAAC,SAAiB;AAC7B,YAAM,UAAU,QAAS,OAAO,IAAI,cAAc,aAAc,IAAI;AACpE,UAAI,UAAU,KAAK,UAAU,cAAc,YAAY,YAAa;AACpE,qBAAe,OAAO;AAAA,IACxB;AAEA,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,cAAY;AAAA,QACZ,WAAW;AAAA,UACT;AAAA,UACA;AAAA,QAAA;AAAA,QAED,GAAG;AAAA,QAEJ,UAAA;AAAA,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,cAAY;AAAA,cACZ,UAAU;AAAA,cACV,SAAS,MAAM,KAAK,cAAc,CAAC;AAAA,cACnC,WAAW;AAAA,cAEX,8BAAC,iBAAA,CAAA,CAAgB;AAAA,YAAA;AAAA,UAAA;AAAA,UAGnB;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,aAAU;AAAA,cACV,WAAU;AAAA,cAET,UAAA,YAAY,aAAa,UAAU;AAAA,YAAA;AAAA,UAAA;AAAA,UAGtC;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,cAAY;AAAA,cACZ,UAAU;AAAA,cACV,SAAS,MAAM,KAAK,cAAc,CAAC;AAAA,cACnC,WAAW;AAAA,cAEX,8BAAC,kBAAA,CAAA,CAAiB;AAAA,YAAA;AAAA,UAAA;AAAA,QACpB;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AACF;AAEA,aAAa,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/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

@@ -3419,6 +3419,42 @@ export declare const OpenIcon: React_2.ForwardRefExoticComponent<React_2.SVGAttr
     className?: string;
 } & React_2.RefAttributes<SVGSVGElement>>;
 
+/**
+ * A compact control for stepping through a small, known set of pages one at a
+ * time, showing the position as "current of total" between a back and forward
+ * arrow. Use when the total is small and the exact page number matters less
+ * than moving between them, such as flicking through generated variants or a
+ * short carousel. Reach for `Pagination` instead when consumers need to jump
+ * to a specific numbered page.
+ *
+ * @example
+ * ```tsx
+ * <PageSelector totalPages={3} currentPage={page} onPageChange={setPage} />
+ * ```
+ */
+export declare const PageSelector: React_2.ForwardRefExoticComponent<PageSelectorProps & React_2.RefAttributes<HTMLElement>>;
+
+export declare interface PageSelectorProps extends Omit<React_2.HTMLAttributes<HTMLElement>, "onChange"> {
+    /** Total number of pages. */
+    totalPages: number;
+    /** Current active page (1-indexed). */
+    currentPage: number;
+    /** Callback fired when the active page changes. Receives the new 1-indexed page number. */
+    onPageChange?: (page: number) => void;
+    /** Whether reaching either end wraps around to the other. @default false */
+    loop?: boolean;
+    /** Whether the control is disabled. @default false */
+    disabled?: boolean;
+    /** Accessible label for the `<nav>` landmark. @default "Page selector" */
+    ariaLabel?: string;
+    /** Accessible label for the previous-page button. @default "Previous page" */
+    previousLabel?: string;
+    /** Accessible label for the next-page button. @default "Next page" */
+    nextLabel?: string;
+    /** Formats the indicator between the arrows. @default (current, total) => \`${current} of ${total}\` */
+    formatLabel?: (currentPage: number, totalPages: number) => string;
+}
+
 /**
  * Page navigation control with previous/next buttons and numbered page
  * indicators. Supports a numbered-buttons layout (`"default"`) and a compact
@@ -3930,6 +3966,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.

package/dist/index.mjs

@@ -202,6 +202,7 @@ import { Loader } from "./components/Loader/Loader.mjs";
 import { Logo } from "./components/Logo/Logo.mjs";
 import { MobileStepper } from "./components/MobileStepper/MobileStepper.mjs";
 import { OnlineBlinkingIcon } from "./components/OnlineBlinkingIcon/OnlineBlinkingIcon.mjs";
+import { PageSelector } from "./components/PageSelector/PageSelector.mjs";
 import { Pagination } from "./components/Pagination/Pagination.mjs";
 import { PasswordField } from "./components/PasswordField/PasswordField.mjs";
 import { Pill } from "./components/Pill/Pill.mjs";
@@ -213,6 +214,7 @@ import { RadioGroup } from "./components/RadioGroup/RadioGroup.mjs";
 import { RatingSummary } from "./components/RatingSummary/RatingSummary.mjs";
 import { ReviewCard } from "./components/ReviewCard/ReviewCard.mjs";
 import { SearchField } from "./components/SearchField/SearchField.mjs";
+import { SegmentedControl } from "./components/SegmentedControl/SegmentedControl.mjs";
 import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator } from "./components/Select/Select.mjs";
 import { Skeleton } from "./components/Skeleton/Skeleton.mjs";
 import { Slider } from "./components/Slider/Slider.mjs";
@@ -420,6 +422,7 @@ export {
   NewMessageIcon,
   OnlineBlinkingIcon,
   OpenIcon,
+  PageSelector,
   Pagination,
   PasswordField,
   PauseIcon,
@@ -446,6 +449,7 @@ export {
   ReviewCard,
   SearchField,
   SearchIcon,
+  SegmentedControl,
   Select,
   SelectContent,
   SelectGroup,

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fanvue/ui",
-  "version": "3.10.0",
+  "version": "3.12.0",
   "description": "React component library built with Tailwind CSS for Fanvue ecosystem",
   "publishConfig": {
     "registry": "https://registry.npmjs.org",