@fanvue/ui 3.11.0 → 3.12.0

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

@@ -120,7 +120,7 @@ const DatePicker = React.forwardRef(
                 weekdays: "flex",
                 weekday: "flex h-[30px] w-10 flex-1 items-center justify-center typography-body-small-14px-regular text-content-secondary",
                 week: "flex",
-                day: "relative flex w-10 flex-1 items-center justify-center",
+                day: "relative flex flex-1 items-center justify-center p-0.5",
                 hidden: "hidden"
               },
               components: {

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, range_middle } = modifiers;\n  const isSingleDayRange = range_start && range_end;\n  const inRange = (range_start || range_end || range_middle) && !isSingleDayRange;\n\n  return (\n    <div\n      className={cn(\n        className,\n        inRange && \"bg-inputs-calendar-range\",\n        inRange && range_start && \"rounded-l-sm\",\n        inRange && range_end && \"rounded-r-sm\",\n      )}\n      {...divProps}\n    />\n  );\n}\n\nfunction DayButton({ day, modifiers, className, ...buttonProps }: DayButtonProps) {\n  const ref = useRef<HTMLButtonElement>(null);\n\n  useEffect(() => {\n    if (modifiers.focused) ref.current?.focus();\n  }, [modifiers.focused]);\n\n  const isSelected = modifiers.selected && !modifiers.range_middle;\n\n  return (\n    <button\n      ref={ref}\n      type=\"button\"\n      className={cn(\n        \"relative z-10 inline-flex size-10 cursor-pointer items-center justify-center rounded-sm text-content-primary\",\n        \"transition-colors hover:bg-inputs-calendar-range not-disabled:active:bg-inputs-calendar-range\",\n        \"focus-visible:shadow-focus-ring focus-visible:outline-none\",\n        \"disabled:cursor-not-allowed\",\n        isSelected ? \"typography-body-small-14px-semibold\" : \"typography-body-small-14px-regular\",\n        modifiers.today &&\n          !isSelected &&\n          \"bg-inputs-calendar-today text-content-always-white hover:bg-inputs-calendar-today\",\n        isSelected &&\n          \"bg-inputs-calendar-selected text-content-primary-inverted hover:bg-inputs-calendar-selected\",\n        modifiers.range_middle && \"bg-transparent hover:bg-transparent\",\n        modifiers.disabled &&\n          \"bg-inputs-calendar-disabled text-content-disabled hover:bg-inputs-calendar-disabled\",\n        modifiers.outside && \"pointer-events-none text-content-disabled\",\n      )}\n      {...buttonProps}\n    />\n  );\n}\n\n/** Combined props — own DatePicker options plus all react-day-picker props (except `numberOfMonths`). */\nexport type DatePickerProps = DatePickerOwnProps &\n  OmitDistributed<DayPickerProps, \"numberOfMonths\">;\n\n/**\n * A calendar date picker supporting single-date and date-range selection with\n * optional side-by-side month display and footer action buttons.\n *\n * Built on top of [react-day-picker](https://react-day-picker.js.org/) — all\n * `DayPickerProps` (except `numberOfMonths`) are forwarded.\n *\n * @example\n * ```tsx\n * <DatePicker\n *   mode=\"range\"\n *   variant=\"double\"\n *   selected={range}\n *   onSelect={setRange}\n *   onApply={save}\n *   onCancel={close}\n * />\n * ```\n */\nexport const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(\n  (\n    {\n      variant = \"single\",\n      onApply,\n      onCancel,\n      cancelLabel = \"Cancel\",\n      applyLabel = \"Apply\",\n      showFooter = true,\n      className,\n      formatters,\n      ...dayPickerProps\n    },\n    ref,\n  ) => {\n    const numberOfMonths = variant === \"double\" ? 2 : 1;\n    const isMulti = numberOfMonths > 1;\n\n    // Wrap onSelect for range mode: when clicking inside a complete range,\n    // move the nearest boundary instead of always resetting the end date.\n    const resolvedDayPickerProps = (() => {\n      if (dayPickerProps.mode !== \"range\") return dayPickerProps;\n\n      const { selected, onSelect } = dayPickerProps as {\n        selected?: DateRange;\n        onSelect?: (\n          range: DateRange | undefined,\n          triggerDate: Date,\n          modifiers: Modifiers,\n          e: React.MouseEvent | React.KeyboardEvent,\n        ) => void;\n      };\n\n      if (!onSelect || !selected?.from || !selected?.to) return dayPickerProps;\n\n      const { from, to } = selected;\n\n      return {\n        ...dayPickerProps,\n        onSelect: (\n          range: DateRange | undefined,\n          triggerDate: Date,\n          modifiers: Modifiers,\n          e: React.MouseEvent | React.KeyboardEvent,\n        ) => {\n          const clickedTime = triggerDate.getTime();\n          const fromTime = from.getTime();\n          const toTime = to.getTime();\n\n          if (clickedTime > fromTime && clickedTime < toTime) {\n            if (clickedTime - fromTime <= toTime - clickedTime) {\n              onSelect({ from: triggerDate, to }, triggerDate, modifiers, e);\n            } else {\n              onSelect({ from, to: triggerDate }, triggerDate, modifiers, e);\n            }\n            return;\n          }\n\n          onSelect(range, triggerDate, modifiers, e);\n        },\n      } as typeof dayPickerProps;\n    })();\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          \"inline-flex flex-col rounded-xl border border-modal-stroke bg-modal-background p-6 shadow-blur-menu backdrop-blur-sm\",\n          className,\n        )}\n      >\n        <DayPicker\n          showOutsideDays\n          numberOfMonths={numberOfMonths}\n          formatters={{\n            formatCaption: (date: Date) =>\n              date.toLocaleDateString(\"en-US\", { month: \"long\", year: \"numeric\" }),\n            ...formatters,\n          }}\n          classNames={{\n            root: \"w-full\",\n            months: cn(\"relative flex\", isMulti && \"gap-6\"),\n            month: \"flex flex-1 flex-col\",\n            month_caption: \"mb-4 flex h-8 items-center justify-center\",\n            caption_label: \"typography-body-default-16px-regular text-content-primary\",\n            nav: \"absolute inset-x-0 top-0 z-20 flex justify-between\",\n            button_previous:\n              \"pointer-events-auto inline-flex size-8 cursor-pointer items-center justify-center rounded-full bg-buttons-secondary-default text-content-primary transition-colors hover:bg-buttons-secondary-hover focus-visible:shadow-focus-ring focus-visible:outline-none disabled:cursor-not-allowed disabled:bg-buttons-disabled-default disabled:text-content-disabled [&>svg]:size-4\",\n            button_next:\n              \"pointer-events-auto inline-flex size-8 cursor-pointer items-center justify-center rounded-full bg-buttons-secondary-default text-content-primary transition-colors hover:bg-buttons-secondary-hover focus-visible:shadow-focus-ring focus-visible:outline-none disabled:cursor-not-allowed disabled:bg-buttons-disabled-default disabled:text-content-disabled [&>svg]:size-4\",\n            month_grid: \"w-full\",\n            weekdays: \"flex\",\n            weekday:\n              \"flex h-[30px] w-10 flex-1 items-center justify-center typography-body-small-14px-regular text-content-secondary\",\n            week: \"flex\",\n            day: \"relative flex w-10 flex-1 items-center justify-center\",\n            hidden: \"hidden\",\n          }}\n          components={{\n            /**\n             * !NOTE: We're unable to use semantic elements for the grid due to rdp, as such we've disabled the a11y lint rules for these elements in biome.json.\n             */\n            Chevron: ({ orientation }: ChevronProps) =>\n              orientation === \"left\" ? <ChevronLeftIcon /> : <ChevronRightIcon />,\n            MonthGrid: (props: MonthGridProps) => <div role=\"grid\" {...props} />,\n            Weekdays: (props: WeekdaysProps) => <div role=\"row\" {...props} />,\n            Weekday: (props: WeekdayProps) => <div role=\"columnheader\" {...props} />,\n            Weeks: (props: WeeksProps) => <div role=\"rowgroup\" {...props} />,\n            Week: ({ week, ...props }: WeekProps) => <div role=\"row\" {...props} />,\n            Day,\n            DayButton,\n          }}\n          {...resolvedDayPickerProps}\n        />\n\n        {showFooter && (\n          <div className=\"flex gap-2 pt-6\">\n            <Button variant=\"outline\" size=\"40\" className=\"flex-1\" onClick={onCancel}>\n              {cancelLabel}\n            </Button>\n            <Button variant=\"primary\" size=\"40\" className=\"flex-1\" onClick={onApply}>\n              {applyLabel}\n            </Button>\n          </div>\n        )}\n      </div>\n    );\n  },\n);\n\nDatePicker.displayName = \"DatePicker\";\n"],"names":["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/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");
@@ -492,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;

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

@@ -118,7 +118,7 @@ const DatePicker = forwardRef(
                 weekdays: "flex",
                 weekday: "flex h-[30px] w-10 flex-1 items-center justify-center typography-body-small-14px-regular text-content-secondary",
                 week: "flex",
-                day: "relative flex w-10 flex-1 items-center justify-center",
+                day: "relative flex flex-1 items-center justify-center p-0.5",
                 hidden: "hidden"
               },
               components: {

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, range_middle } = modifiers;\n  const isSingleDayRange = range_start && range_end;\n  const inRange = (range_start || range_end || range_middle) && !isSingleDayRange;\n\n  return (\n    <div\n      className={cn(\n        className,\n        inRange && \"bg-inputs-calendar-range\",\n        inRange && range_start && \"rounded-l-sm\",\n        inRange && range_end && \"rounded-r-sm\",\n      )}\n      {...divProps}\n    />\n  );\n}\n\nfunction DayButton({ day, modifiers, className, ...buttonProps }: DayButtonProps) {\n  const ref = useRef<HTMLButtonElement>(null);\n\n  useEffect(() => {\n    if (modifiers.focused) ref.current?.focus();\n  }, [modifiers.focused]);\n\n  const isSelected = modifiers.selected && !modifiers.range_middle;\n\n  return (\n    <button\n      ref={ref}\n      type=\"button\"\n      className={cn(\n        \"relative z-10 inline-flex size-10 cursor-pointer items-center justify-center rounded-sm text-content-primary\",\n        \"transition-colors hover:bg-inputs-calendar-range not-disabled:active:bg-inputs-calendar-range\",\n        \"focus-visible:shadow-focus-ring focus-visible:outline-none\",\n        \"disabled:cursor-not-allowed\",\n        isSelected ? \"typography-body-small-14px-semibold\" : \"typography-body-small-14px-regular\",\n        modifiers.today &&\n          !isSelected &&\n          \"bg-inputs-calendar-today text-content-always-white hover:bg-inputs-calendar-today\",\n        isSelected &&\n          \"bg-inputs-calendar-selected text-content-primary-inverted hover:bg-inputs-calendar-selected\",\n        modifiers.range_middle && \"bg-transparent hover:bg-transparent\",\n        modifiers.disabled &&\n          \"bg-inputs-calendar-disabled text-content-disabled hover:bg-inputs-calendar-disabled\",\n        modifiers.outside && \"pointer-events-none text-content-disabled\",\n      )}\n      {...buttonProps}\n    />\n  );\n}\n\n/** Combined props — own DatePicker options plus all react-day-picker props (except `numberOfMonths`). */\nexport type DatePickerProps = DatePickerOwnProps &\n  OmitDistributed<DayPickerProps, \"numberOfMonths\">;\n\n/**\n * A calendar date picker supporting single-date and date-range selection with\n * optional side-by-side month display and footer action buttons.\n *\n * Built on top of [react-day-picker](https://react-day-picker.js.org/) — all\n * `DayPickerProps` (except `numberOfMonths`) are forwarded.\n *\n * @example\n * ```tsx\n * <DatePicker\n *   mode=\"range\"\n *   variant=\"double\"\n *   selected={range}\n *   onSelect={setRange}\n *   onApply={save}\n *   onCancel={close}\n * />\n * ```\n */\nexport const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(\n  (\n    {\n      variant = \"single\",\n      onApply,\n      onCancel,\n      cancelLabel = \"Cancel\",\n      applyLabel = \"Apply\",\n      showFooter = true,\n      className,\n      formatters,\n      ...dayPickerProps\n    },\n    ref,\n  ) => {\n    const numberOfMonths = variant === \"double\" ? 2 : 1;\n    const isMulti = numberOfMonths > 1;\n\n    // Wrap onSelect for range mode: when clicking inside a complete range,\n    // move the nearest boundary instead of always resetting the end date.\n    const resolvedDayPickerProps = (() => {\n      if (dayPickerProps.mode !== \"range\") return dayPickerProps;\n\n      const { selected, onSelect } = dayPickerProps as {\n        selected?: DateRange;\n        onSelect?: (\n          range: DateRange | undefined,\n          triggerDate: Date,\n          modifiers: Modifiers,\n          e: React.MouseEvent | React.KeyboardEvent,\n        ) => void;\n      };\n\n      if (!onSelect || !selected?.from || !selected?.to) return dayPickerProps;\n\n      const { from, to } = selected;\n\n      return {\n        ...dayPickerProps,\n        onSelect: (\n          range: DateRange | undefined,\n          triggerDate: Date,\n          modifiers: Modifiers,\n          e: React.MouseEvent | React.KeyboardEvent,\n        ) => {\n          const clickedTime = triggerDate.getTime();\n          const fromTime = from.getTime();\n          const toTime = to.getTime();\n\n          if (clickedTime > fromTime && clickedTime < toTime) {\n            if (clickedTime - fromTime <= toTime - clickedTime) {\n              onSelect({ from: triggerDate, to }, triggerDate, modifiers, e);\n            } else {\n              onSelect({ from, to: triggerDate }, triggerDate, modifiers, e);\n            }\n            return;\n          }\n\n          onSelect(range, triggerDate, modifiers, e);\n        },\n      } as typeof dayPickerProps;\n    })();\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          \"inline-flex flex-col rounded-xl border border-modal-stroke bg-modal-background p-6 shadow-blur-menu backdrop-blur-sm\",\n          className,\n        )}\n      >\n        <DayPicker\n          showOutsideDays\n          numberOfMonths={numberOfMonths}\n          formatters={{\n            formatCaption: (date: Date) =>\n              date.toLocaleDateString(\"en-US\", { month: \"long\", year: \"numeric\" }),\n            ...formatters,\n          }}\n          classNames={{\n            root: \"w-full\",\n            months: cn(\"relative flex\", isMulti && \"gap-6\"),\n            month: \"flex flex-1 flex-col\",\n            month_caption: \"mb-4 flex h-8 items-center justify-center\",\n            caption_label: \"typography-body-default-16px-regular text-content-primary\",\n            nav: \"absolute inset-x-0 top-0 z-20 flex justify-between\",\n            button_previous:\n              \"pointer-events-auto inline-flex size-8 cursor-pointer items-center justify-center rounded-full bg-buttons-secondary-default text-content-primary transition-colors hover:bg-buttons-secondary-hover focus-visible:shadow-focus-ring focus-visible:outline-none disabled:cursor-not-allowed disabled:bg-buttons-disabled-default disabled:text-content-disabled [&>svg]:size-4\",\n            button_next:\n              \"pointer-events-auto inline-flex size-8 cursor-pointer items-center justify-center rounded-full bg-buttons-secondary-default text-content-primary transition-colors hover:bg-buttons-secondary-hover focus-visible:shadow-focus-ring focus-visible:outline-none disabled:cursor-not-allowed disabled:bg-buttons-disabled-default disabled:text-content-disabled [&>svg]:size-4\",\n            month_grid: \"w-full\",\n            weekdays: \"flex\",\n            weekday:\n              \"flex h-[30px] w-10 flex-1 items-center justify-center typography-body-small-14px-regular text-content-secondary\",\n            week: \"flex\",\n            day: \"relative flex w-10 flex-1 items-center justify-center\",\n            hidden: \"hidden\",\n          }}\n          components={{\n            /**\n             * !NOTE: We're unable to use semantic elements for the grid due to rdp, as such we've disabled the a11y lint rules for these elements in biome.json.\n             */\n            Chevron: ({ orientation }: ChevronProps) =>\n              orientation === \"left\" ? <ChevronLeftIcon /> : <ChevronRightIcon />,\n            MonthGrid: (props: MonthGridProps) => <div role=\"grid\" {...props} />,\n            Weekdays: (props: WeekdaysProps) => <div role=\"row\" {...props} />,\n            Weekday: (props: WeekdayProps) => <div role=\"columnheader\" {...props} />,\n            Weeks: (props: WeeksProps) => <div role=\"rowgroup\" {...props} />,\n            Week: ({ week, ...props }: WeekProps) => <div role=\"row\" {...props} />,\n            Day,\n            DayButton,\n          }}\n          {...resolvedDayPickerProps}\n        />\n\n        {showFooter && (\n          <div className=\"flex gap-2 pt-6\">\n            <Button variant=\"outline\" size=\"40\" className=\"flex-1\" onClick={onCancel}>\n              {cancelLabel}\n            </Button>\n            <Button variant=\"primary\" size=\"40\" className=\"flex-1\" onClick={onApply}>\n              {applyLabel}\n            </Button>\n          </div>\n        )}\n      </div>\n    );\n  },\n);\n\nDatePicker.displayName = \"DatePicker\";\n"],"names":[],"mappings":"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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":"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"}

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/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

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";
@@ -421,6 +422,7 @@ export {
   NewMessageIcon,
   OnlineBlinkingIcon,
   OpenIcon,
+  PageSelector,
   Pagination,
   PasswordField,
   PauseIcon,

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.11.0",
+  "version": "3.12.0",
   "description": "React component library built with Tailwind CSS for Fanvue ecosystem",
   "publishConfig": {
     "registry": "https://registry.npmjs.org",