@giddaa-housing/ui 0.1.0 → 1.0.0

package/dist/date-picker.js

@@ -1,434 +1,70 @@
-// src/components/ui/date-picker.tsx
-import { CalendarIcon } from "lucide-react";
-import * as React2 from "react";
-
-// src/lib/cn.ts
-import { clsx } from "clsx";
-import { extendTailwindMerge } from "tailwind-merge";
-var twMerge = extendTailwindMerge({
-  extend: {
-    classGroups: {
-      "font-size": [
-        {
-          text: [
-            "gdt-display",
-            "gdt-h1",
-            "gdt-h2",
-            "gdt-h3",
-            "gdt-h4",
-            "gdt-h5",
-            "gdt-xl",
-            "gdt-lg",
-            "gdt-md",
-            "gdt-sm",
-            "gdt-xs",
-            "gdt-subtext",
-            "gdt-capitalized"
-          ]
-        }
-      ]
-    }
-  }
-});
-function cn(...inputs) {
-  return twMerge(clsx(inputs));
-}
-
-// src/components/ui/button.tsx
-import { Button as ButtonPrimitive } from "@base-ui/react/button";
-import { cva } from "class-variance-authority";
-import { Loader } from "lucide-react";
-
-// src/components/ui/size-context.tsx
-import { createContext, useContext } from "react";
-import { Fragment, jsx } from "react/jsx-runtime";
-var SizeContext = createContext(void 0);
-function SizeProvider({
-  children,
-  size
-}) {
-  if (!size) {
-    return /* @__PURE__ */ jsx(Fragment, { children });
-  }
-  return /* @__PURE__ */ jsx(SizeContext.Provider, { value: size, children });
-}
-function useComponentSize(size, fallback = "md") {
-  const inheritedSize = useContext(SizeContext);
-  return size ?? inheritedSize ?? fallback;
-}
-
-// src/components/ui/button.tsx
-import { jsx as jsx2, jsxs } from "react/jsx-runtime";
-var buttonVariants = cva(
-  "group/button inline-flex shrink-0 items-center justify-center rounded-full bg-clip-padding whitespace-nowrap font-bold transition-[background-color,color,border-color,box-shadow,transform] outline-none select-none focus-visible:border-line-focus focus-visible:shadow-[0px_0px_0px_2px_var(--color-line-focus)] active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-invalid:border-line-danger aria-invalid:ring-3 aria-invalid:ring-destructive/20 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-  {
-    variants: {
-      variant: {
-        primary: "bg-action-primary text-fg-on-brand hover:bg-action-primary-hover active:bg-action-primary-pressed",
-        "primary-outline": "border-2 border-action-primary bg-transparent text-fg-brand hover:bg-surface-brand-subtle active:bg-surface-brand-subtle data-focused:bg-surface-brand-subtle data-pressed:bg-surface-brand-subtle",
-        secondary: "bg-surface-brand-subtle text-fg-brand hover:bg-action-primary-hover hover:text-fg-on-brand active:bg-action-primary-pressed active:text-fg-on-brand data-focused:bg-action-primary-hover data-pressed:bg-action-primary-pressed data-focused:text-fg-on-brand data-pressed:text-fg-on-brand",
-        "secondary-outline": "border-2 border-action-secondary bg-transparent text-fg-brand hover:bg-surface-brand-subtle active:bg-surface-brand-subtle data-focused:bg-surface-brand-subtle data-pressed:bg-surface-brand-subtle",
-        tertiary: "bg-action-tertiary text-fg-primary hover:bg-action-tertiary-hover active:bg-action-tertiary-pressed data-focused:bg-action-tertiary-hover data-pressed:bg-action-tertiary-pressed",
-        "tertiary-outline": "border border-line-strong bg-transparent text-fg-primary hover:bg-surface active:bg-surface-raised data-focused:bg-surface data-pressed:bg-surface-raised",
-        ghost: "bg-transparent text-fg-primary hover:bg-surface active:bg-surface-raised data-focused:bg-surface data-pressed:bg-surface-raised",
-        danger: "bg-action-danger text-fg-on-brand hover:bg-action-danger-hover active:bg-action-danger-pressed data-focused:bg-action-danger-hover data-pressed:bg-action-danger-pressed",
-        "glass-overlay": "bg-surface-glass-overlay-button text-fg-on-brand",
-        "link-brand": "border-transparent bg-transparent px-0 text-fg-brand hover:underline active:underline active:opacity-70",
-        "link-neutral": "border-transparent bg-transparent px-0 text-fg-secondary hover:underline active:underline active:opacity-70"
-      },
-      size: {
-        sm: "h-8 gap-2 px-3.5 text-gdt-xs has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3 [&_svg:not([class*='size-'])]:size-3.5",
-        md: "h-10 gap-2 px-4.5 text-gdt-sm has-data-[icon=inline-end]:pr-4 has-data-[icon=inline-start]:pl-4",
-        lg: "h-12.5 gap-2.5 px-5.5 text-gdt-md has-data-[icon=inline-end]:pr-5 has-data-[icon=inline-start]:pl-5 [&_svg:not([class*='size-'])]:size-4.5",
-        xl: "h-14 gap-3 px-6.5 text-gdt-lg has-data-[icon=inline-end]:pr-6 has-data-[icon=inline-start]:pl-6 [&_svg:not([class*='size-'])]:size-5",
-        icon: "size-10",
-        "icon-xs": "size-6 text-gdt-xs [&_svg:not([class*='size-'])]:size-3",
-        "icon-sm": "size-8 text-gdt-sm [&_svg:not([class*='size-'])]:size-3.5",
-        "icon-lg": "size-12.5 text-gdt-md [&_svg:not([class*='size-'])]:size-4.5",
-        "icon-xl": "size-14 text-gdt-lg [&_svg:not([class*='size-'])]:size-5"
-      }
-    },
-    defaultVariants: {
-      variant: "primary",
-      size: "md"
-    }
-  }
-);
-function Button({
-  className,
-  variant = "primary",
-  size,
-  isLoading = false,
-  children,
-  disabled = false,
-  ...props
-}) {
-  const inheritedSize = useComponentSize();
-  const resolvedSize = size ?? inheritedSize;
-  const _disabled = disabled || isLoading;
-  return /* @__PURE__ */ jsxs(
-    ButtonPrimitive,
-    {
-      "data-slot": "button",
-      className: cn(buttonVariants({ variant, size: resolvedSize, className })),
-      disabled: _disabled,
-      ...props,
-      children: [
-        isLoading && /* @__PURE__ */ jsx2(Loader, { className: "size-4 animate-spin" }),
-        " ",
-        children
-      ]
-    }
-  );
-}
-
-// src/components/ui/calendar.tsx
-import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
-import * as React from "react";
+"use client";
 import {
-  DayPicker,
-  getDefaultClassNames
-} from "react-day-picker";
-import { jsx as jsx3 } from "react/jsx-runtime";
-function Calendar({
-  className,
-  classNames,
-  showOutsideDays = false,
-  weekStartsOn = 1,
-  locale,
-  formatters,
-  components,
-  ...props
-}) {
-  const defaultClassNames = getDefaultClassNames();
-  return /* @__PURE__ */ jsx3(
-    DayPicker,
-    {
-      showOutsideDays,
-      weekStartsOn,
-      className: cn(
-        "group/calendar bg-transparent p-4 [--cell-radius:var(--radius-md)] [--cell-height:36px] [--cell-width:40px]",
-        String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
-        String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
-        className
-      ),
-      locale,
-      formatters: {
-        formatWeekdayName: (date) => date.toLocaleString(locale?.code, { weekday: "narrow" }),
-        ...formatters
-      },
-      classNames: {
-        root: cn("w-fit", defaultClassNames.root),
-        months: cn(
-          "relative flex flex-col gap-4 md:flex-row",
-          defaultClassNames.months
-        ),
-        month: cn("flex w-full flex-col gap-4", defaultClassNames.month),
-        nav: cn(
-          "absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1",
-          defaultClassNames.nav
-        ),
-        button_previous: cn(
-          "flex size-7 items-center justify-center rounded-(--cell-radius) text-fg-secondary transition-colors outline-none select-none hover:bg-surface focus-visible:border-line-focus focus-visible:shadow-[0px_0px_0px_2px_var(--color-line-focus)] aria-disabled:opacity-40",
-          defaultClassNames.button_previous
-        ),
-        button_next: cn(
-          "flex size-7 items-center justify-center rounded-(--cell-radius) text-fg-secondary transition-colors outline-none select-none hover:bg-surface focus-visible:border-line-focus focus-visible:shadow-[0px_0px_0px_2px_var(--color-line-focus)] aria-disabled:opacity-40",
-          defaultClassNames.button_next
-        ),
-        month_caption: cn(
-          "flex h-(--cell-height) w-full items-center justify-center px-(--cell-width)",
-          defaultClassNames.month_caption
-        ),
-        caption_label: cn(
-          "text-gdt-sm font-medium text-fg-primary select-none",
-          defaultClassNames.caption_label
-        ),
-        table: "w-full border-collapse",
-        weekdays: cn("flex", defaultClassNames.weekdays),
-        weekday: cn(
-          "flex-1 text-gdt-xs font-normal text-fg-secondary select-none",
-          defaultClassNames.weekday
-        ),
-        week: cn("mt-1 flex w-full", defaultClassNames.week),
-        day: cn(
-          "group/day relative aspect-square h-full w-full p-0 text-center select-none",
-          defaultClassNames.day
-        ),
-        range_start: cn(
-          "rounded-l-full bg-surface-brand-subtle",
-          defaultClassNames.range_start
-        ),
-        range_middle: cn(
-          "rounded-none bg-surface-brand-subtle",
-          defaultClassNames.range_middle
-        ),
-        range_end: cn(
-          "rounded-r-full bg-surface-brand-subtle",
-          defaultClassNames.range_end
-        ),
-        today: cn(
-          "rounded-full h-(--cell-height) w-(--cell-width) flex items-center justify-center bg-surface-brand-subtle p-0",
-          defaultClassNames.today
-        ),
-        outside: cn(
-          "text-fg-caption-placeholder aria-selected:text-fg-caption-placeholder",
-          defaultClassNames.outside
-        ),
-        disabled: cn(
-          "text-fg-caption-placeholder opacity-50",
-          defaultClassNames.disabled
-        ),
-        hidden: cn("invisible", defaultClassNames.hidden),
-        ...classNames
-      },
-      components: {
-        Root: ({ className: className2, rootRef, ...props2 }) => {
-          return /* @__PURE__ */ jsx3(
-            "div",
-            {
-              "data-slot": "calendar",
-              ref: rootRef,
-              className: cn(className2),
-              ...props2
-            }
-          );
-        },
-        Chevron: ({ className: className2, orientation, ...props2 }) => {
-          if (orientation === "right") {
-            return /* @__PURE__ */ jsx3(
-              ChevronRightIcon,
-              {
-                className: cn("size-4", className2),
-                ...props2
-              }
-            );
-          }
-          return /* @__PURE__ */ jsx3(ChevronLeftIcon, { className: cn("size-4", className2), ...props2 });
-        },
-        DayButton: ({ ...props2 }) => /* @__PURE__ */ jsx3(CalendarDayButton, { locale, ...props2 }),
-        WeekNumber: ({ children, ...props2 }) => {
-          return /* @__PURE__ */ jsx3("td", { ...props2, children: /* @__PURE__ */ jsx3("div", { className: "flex h-(--cell-height) w-(--cell-width) items-center justify-center text-center", children }) });
-        },
-        ...components
-      },
-      ...props
-    }
-  );
-}
-function CalendarDayButton({
-  className,
-  day,
-  modifiers,
-  locale,
-  ...props
-}) {
-  const defaultClassNames = getDefaultClassNames();
-  const ref = React.useRef(null);
-  React.useEffect(() => {
-    if (modifiers.focused) ref.current?.focus();
-  }, [modifiers.focused]);
-  const isEndpoint = modifiers.selected && !modifiers.range_start && !modifiers.range_end && !modifiers.range_middle || modifiers.range_start || modifiers.range_end;
-  return /* @__PURE__ */ jsx3(
-    Button,
-    {
-      ref,
-      variant: "ghost",
-      size: "icon",
-      "data-day": day.date.toLocaleDateString(locale?.code),
-      "data-selected-single": modifiers.selected && !modifiers.range_start && !modifiers.range_end && !modifiers.range_middle,
-      "data-range-start": modifiers.range_start,
-      "data-range-end": modifiers.range_end,
-      "data-range-middle": modifiers.range_middle,
-      className: cn(
-        "relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-width) h-(--cell-height) items-center justify-center rounded-full border-0 text-gdt-sm font-normal leading-none",
-        // Selected single + range endpoints: filled brand circle.
-        "data-[range-end=true]:bg-action-primary data-[range-end=true]:text-fg-on-brand data-[range-end=true]:hover:bg-action-primary-hover data-[range-end=true]:hover:text-fg-on-brand",
-        "data-[range-start=true]:bg-action-primary data-[range-start=true]:text-fg-on-brand data-[range-start=true]:hover:bg-action-primary-hover data-[range-start=true]:hover:text-fg-on-brand",
-        "data-[selected-single=true]:bg-action-primary data-[selected-single=true]:text-fg-on-brand data-[selected-single=true]:hover:bg-action-primary-hover data-[selected-single=true]:hover:text-fg-on-brand",
-        // In-range days: brand wash carried by the cell, brand text on the button.
-        "data-[range-middle=true]:rounded-none data-[range-middle=true]:bg-transparent data-[range-middle=true]:text-fg-brand data-[range-middle=true]:hover:bg-transparent",
-        isEndpoint && "font-medium",
-        "group-data-[focused=true]/day:border-line-focus group-data-[focused=true]/day:shadow-[0px_0px_0px_2px_var(--color-line-focus)]",
-        defaultClassNames.day,
-        className
-      ),
-      ...props
-    }
-  );
-}
-
-// src/components/ui/popover.tsx
-import { Popover as PopoverPrimitive } from "@base-ui/react/popover";
-import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
-function Popover({ ...props }) {
-  return /* @__PURE__ */ jsx4(PopoverPrimitive.Root, { "data-slot": "popover", ...props });
-}
-function PopoverTrigger({ ...props }) {
-  return /* @__PURE__ */ jsx4(PopoverPrimitive.Trigger, { "data-slot": "popover-trigger", ...props });
-}
-function PopoverContent({
-  className,
-  align = "center",
-  alignOffset = 0,
-  side = "bottom",
-  sideOffset = 6,
-  showArrow = true,
-  size = "md",
-  children,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx4(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx4(
-    PopoverPrimitive.Positioner,
-    {
-      align,
-      alignOffset,
-      side,
-      sideOffset,
-      className: "isolate z-50",
-      children: /* @__PURE__ */ jsxs2(
-        PopoverPrimitive.Popup,
-        {
-          "data-slot": "popover-content",
-          className: cn(
-            "z-50 relative flex w-72 max-w-[calc(100vw-2rem)] origin-(--transform-origin) flex-col rounded-lg border-0 bg-surface-overlay py-4 text-gdt-sm text-fg-primary shadow-2 outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 has-[&_[data-slot=popover-footer]]:pb-0",
-            className
-          ),
-          ...props,
-          children: [
-            /* @__PURE__ */ jsx4(SizeProvider, { size, children }),
-            showArrow ? /* @__PURE__ */ jsx4(PopoverPrimitive.Arrow, { className: "relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-surface-overlay before:border before:border-line before:[transform:translate(-50%,50%)_rotate(45deg)]" }) : null
-          ]
-        }
-      )
-    }
-  ) });
-}
+  PickerFooter,
+  PickerTrigger
+} from "./chunk-YDWIHW6Q.js";
+import {
+  Popover,
+  PopoverContent
+} from "./chunk-JVLUBAPB.js";
+import {
+  Calendar
+} from "./chunk-GJOFIJS3.js";
+import "./chunk-VGR4ZWJ3.js";
+import "./chunk-6ZSGQHH2.js";
+import "./chunk-KSMDANKI.js";
+import "./chunk-MEKCCOP5.js";
+import "./chunk-3ACQVT7A.js";
+import "./chunk-B4H6RNDH.js";
+import "./chunk-HL3ZSYES.js";
+import {
+  cn
+} from "./chunk-Y4TTYVNE.js";
 
-// src/components/ui/date-picker.tsx
-import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
-var MONTHS = [
-  "January",
-  "February",
-  "March",
-  "April",
-  "May",
-  "June",
-  "July",
-  "August",
-  "September",
-  "October",
-  "November",
-  "December"
-];
+// src/date-picker.tsx
+import { CalendarIcon } from "lucide-react";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 function formatDate(date) {
-  const day = date.getDate().toString().padStart(2, "0");
-  return `${day} ${MONTHS[date.getMonth()]} ${date.getFullYear()}`;
+  return date.toLocaleDateString("en-GB", {
+    day: "2-digit",
+    month: "long",
+    year: "numeric"
+  });
 }
-function PickerTrigger({
-  displayValue,
-  placeholder,
-  disabled,
-  open,
-  className
-}) {
-  return /* @__PURE__ */ jsxs3(
-    PopoverTrigger,
-    {
-      disabled,
-      className: cn(
-        "flex h-10 w-full items-center justify-between rounded-full border px-3.5 text-gdt-sm transition-[border-color,box-shadow] outline-none",
-        disabled ? "cursor-not-allowed border-line-subtle bg-surface text-fg-caption-placeholder" : open ? "border-line-focus bg-canvas text-fg-primary inset-ring-1 inset-ring-line-focus" : "border-line bg-canvas text-fg-primary hover:border-line-strong",
-        className
-      ),
-      children: [
-        /* @__PURE__ */ jsx5(
-          "span",
-          {
-            className: cn(
-              "min-w-0 truncate",
-              !displayValue && "text-fg-caption-placeholder"
-            ),
-            children: displayValue || placeholder
-          }
-        ),
-        /* @__PURE__ */ jsx5(
-          CalendarIcon,
-          {
-            className: cn(
-              "ml-2 size-4 shrink-0",
-              disabled ? "text-fg-caption-placeholder" : "text-fg-secondary"
-            )
-          }
-        )
-      ]
-    }
-  );
+var PANEL_CLASSES = "flex min-w-(--anchor-width) flex-col items-center gap-0 overflow-hidden rounded-2xl p-0";
+function defaultStartMonth() {
+  return new Date((/* @__PURE__ */ new Date()).getFullYear() - 100, 0);
 }
-function PickerFooter({ onClear, onApply }) {
-  return /* @__PURE__ */ jsxs3("div", { className: "flex items-center justify-end gap-2 border-t border-line-subtle px-4 py-3", children: [
-    /* @__PURE__ */ jsx5(Button, { variant: "tertiary-outline", size: "sm", onClick: onClear, children: "Clear" }),
-    /* @__PURE__ */ jsx5(Button, { size: "sm", onClick: onApply, children: "Apply" })
-  ] });
+function defaultEndMonth() {
+  return new Date((/* @__PURE__ */ new Date()).getFullYear() + 10, 11);
 }
-var PANEL_CLASSES = "min-w-(--anchor-width) gap-0 overflow-hidden rounded-2xl flex flex-col items-center p-0";
 function DatePicker({
   value,
   onChange,
   disabled = false,
   placeholder = "Select date",
-  className
+  className,
+  captionLayout = "dropdown",
+  startMonth,
+  endMonth,
+  disabledDates
 }) {
-  const [open, setOpen] = React2.useState(false);
-  const [pending, setPending] = React2.useState(value);
+  const [open, setOpen] = React.useState(false);
+  const [pending, setPending] = React.useState(value);
+  const [month, setMonth] = React.useState(() => value ?? /* @__PURE__ */ new Date());
   function handleOpenChange(next) {
-    if (next) setPending(value);
+    if (next) {
+      setPending(value);
+      setMonth(value ?? /* @__PURE__ */ new Date());
+    }
     setOpen(next);
   }
-  return /* @__PURE__ */ jsxs3(Popover, { open, onOpenChange: handleOpenChange, children: [
-    /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: handleOpenChange, children: [
+    /* @__PURE__ */ jsx(
       PickerTrigger,
       {
+        icon: CalendarIcon,
         displayValue: value ? formatDate(value) : "",
         placeholder,
         disabled,
@@ -436,19 +72,33 @@ function DatePicker({
         className
       }
     ),
-    /* @__PURE__ */ jsx5(
+    /* @__PURE__ */ jsxs(
       PopoverContent,
       {
         showArrow: false,
         align: "start",
         side: "bottom",
         className: PANEL_CLASSES,
-        children: /* @__PURE__ */ jsxs3("div", { children: [
-          /* @__PURE__ */ jsx5(Calendar, { mode: "single", selected: pending, onSelect: setPending }),
-          /* @__PURE__ */ jsx5(
+        children: [
+          /* @__PURE__ */ jsx(
+            Calendar,
+            {
+              mode: "single",
+              selected: pending,
+              onSelect: setPending,
+              month,
+              onMonthChange: setMonth,
+              captionLayout,
+              startMonth: startMonth ?? defaultStartMonth(),
+              endMonth: endMonth ?? defaultEndMonth(),
+              disabled: disabledDates
+            }
+          ),
+          /* @__PURE__ */ jsx(
             PickerFooter,
             {
-              onClear: () => {
+              secondaryLabel: "Clear",
+              onSecondary: () => {
                 setPending(void 0);
                 onChange?.(void 0);
                 setOpen(false);
@@ -459,7 +109,7 @@ function DatePicker({
               }
             }
           )
-        ] })
+        ]
       }
     )
   ] });
@@ -469,12 +119,22 @@ function DateRangePicker({
   onChange,
   disabled = false,
   placeholder = "Select date range",
-  className
+  className,
+  captionLayout = "dropdown",
+  startMonth,
+  endMonth,
+  disabledDates
 }) {
-  const [open, setOpen] = React2.useState(false);
-  const [pending, setPending] = React2.useState(value);
+  const [open, setOpen] = React.useState(false);
+  const [pending, setPending] = React.useState(value);
+  const [month, setMonth] = React.useState(
+    () => value?.from ?? /* @__PURE__ */ new Date()
+  );
   function handleOpenChange(next) {
-    if (next) setPending(value);
+    if (next) {
+      setPending(value);
+      setMonth(value?.from ?? /* @__PURE__ */ new Date());
+    }
     setOpen(next);
   }
   const displayValue = (() => {
@@ -483,10 +143,11 @@ function DateRangePicker({
     if (value?.from) return formatDate(value.from);
     return "";
   })();
-  return /* @__PURE__ */ jsxs3(Popover, { open, onOpenChange: handleOpenChange, children: [
-    /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: handleOpenChange, children: [
+    /* @__PURE__ */ jsx(
       PickerTrigger,
       {
+        icon: CalendarIcon,
         displayValue,
         placeholder,
         disabled,
@@ -494,18 +155,32 @@ function DateRangePicker({
         className
       }
     ),
-    /* @__PURE__ */ jsxs3(
+    /* @__PURE__ */ jsxs(
       PopoverContent,
       {
         showArrow: false,
         align: "start",
         className: cn(PANEL_CLASSES, "w-auto"),
         children: [
-          /* @__PURE__ */ jsx5(Calendar, { mode: "range", selected: pending, onSelect: setPending }),
-          /* @__PURE__ */ jsx5(
+          /* @__PURE__ */ jsx(
+            Calendar,
+            {
+              mode: "range",
+              selected: pending,
+              onSelect: setPending,
+              month,
+              onMonthChange: setMonth,
+              captionLayout,
+              startMonth: startMonth ?? defaultStartMonth(),
+              endMonth: endMonth ?? defaultEndMonth(),
+              disabled: disabledDates
+            }
+          ),
+          /* @__PURE__ */ jsx(
             PickerFooter,
             {
-              onClear: () => {
+              secondaryLabel: "Clear",
+              onSecondary: () => {
                 setPending(void 0);
                 onChange?.(void 0);
                 setOpen(false);