@quan-erp/shared-ui 1.0.0

package/dist/es/components/ui/breadcrumb.js

@@ -0,0 +1,93 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { MoreHorizontal, ChevronRight } from "lucide-react";
+import { cn } from "../../lib/utils.js";
+const Breadcrumb = React.forwardRef(({ ...props }, ref) => /* @__PURE__ */ jsx("nav", { ref, "aria-label": "breadcrumb", ...props }));
+Breadcrumb.displayName = "Breadcrumb";
+const BreadcrumbList = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "ol",
+  {
+    ref,
+    className: cn(
+      "shared:flex shared:flex-wrap shared:items-center shared:gap-1.5 shared:break-words shared:text-sm shared:text-muted-foreground shared:sm:gap-2.5",
+      className
+    ),
+    ...props
+  }
+));
+BreadcrumbList.displayName = "BreadcrumbList";
+const BreadcrumbItem = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "li",
+  {
+    ref,
+    className: cn("shared:inline-flex shared:items-center shared:gap-1.5", className),
+    ...props
+  }
+));
+BreadcrumbItem.displayName = "BreadcrumbItem";
+const BreadcrumbLink = React.forwardRef(({ asChild, className, ...props }, ref) => {
+  const Comp = asChild ? Slot : "a";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      ref,
+      className: cn("shared:transition-colors shared:hover:text-foreground", className),
+      ...props
+    }
+  );
+});
+BreadcrumbLink.displayName = "BreadcrumbLink";
+const BreadcrumbPage = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "span",
+  {
+    ref,
+    role: "link",
+    "aria-disabled": "true",
+    "aria-current": "page",
+    className: cn("shared:font-normal shared:text-foreground", className),
+    ...props
+  }
+));
+BreadcrumbPage.displayName = "BreadcrumbPage";
+const BreadcrumbSeparator = ({
+  children,
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "li",
+  {
+    role: "presentation",
+    "aria-hidden": "true",
+    className: cn("shared:[&>svg]:w-3.5 shared:[&>svg]:h-3.5", className),
+    ...props,
+    children: children ?? /* @__PURE__ */ jsx(ChevronRight, {})
+  }
+);
+BreadcrumbSeparator.displayName = "BreadcrumbSeparator";
+const BreadcrumbEllipsis = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsxs(
+  "span",
+  {
+    role: "presentation",
+    "aria-hidden": "true",
+    className: cn("shared:flex shared:h-9 shared:w-9 shared:items-center shared:justify-center", className),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx(MoreHorizontal, { className: "shared:h-4 shared:w-4" }),
+      /* @__PURE__ */ jsx("span", { className: "shared:sr-only", children: "More" })
+    ]
+  }
+);
+BreadcrumbEllipsis.displayName = "BreadcrumbElipssis";
+export {
+  Breadcrumb,
+  BreadcrumbEllipsis,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator
+};

package/dist/es/components/ui/button-group.js

@@ -0,0 +1,76 @@
+import { jsx } from "react/jsx-runtime";
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+import { cn } from "../../lib/utils.js";
+import { Separator } from "./separator.js";
+const buttonGroupVariants = cva(
+  "shared:flex shared:w-fit shared:items-stretch has-[>shared:[data-slot=button-group]]:gap-2 [&>shared:*]:focus-visible:relative [&>shared:*]:focus-visible:z-10 has-[select[aria-hidden=true]:last-child]:[&>shared:[data-slot=select-trigger]:last-of-type]:rounded-r-md [&>[data-slot=select-trigger]:not([class*='w-'])shared:]:w-fit shared:[&>input]:flex-1",
+  {
+    variants: {
+      orientation: {
+        horizontal: "shared:[&>*:not(:first-child)]:rounded-l-none shared:[&>*:not(:first-child)]:border-l-0 shared:[&>*:not(:last-child)]:rounded-r-none",
+        vertical: "shared:flex-col shared:[&>*:not(:first-child)]:rounded-t-none shared:[&>*:not(:first-child)]:border-t-0 shared:[&>*:not(:last-child)]:rounded-b-none"
+      }
+    },
+    defaultVariants: {
+      orientation: "horizontal"
+    }
+  }
+);
+function ButtonGroup({
+  className,
+  orientation,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "group",
+      "data-slot": "button-group",
+      "data-orientation": orientation,
+      className: cn(buttonGroupVariants({ orientation }), className),
+      ...props
+    }
+  );
+}
+function ButtonGroupText({
+  className,
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? Slot : "div";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      className: cn(
+        "shared:bg-muted shared:shadow-xs shared:flex shared:items-center shared:gap-2 shared:rounded-md shared:border shared:px-4 shared:text-sm shared:font-medium shared:[&_svg:not([class*='size-'])]:size-4 shared:[&_svg]:pointer-events-none",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function ButtonGroupSeparator({
+  className,
+  orientation = "vertical",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Separator,
+    {
+      "data-slot": "button-group-separator",
+      orientation,
+      className: cn(
+        "shared:bg-input shared:relative !shared:m-0 shared:self-stretch shared:data-[orientation=vertical]:h-auto",
+        className
+      ),
+      ...props
+    }
+  );
+}
+export {
+  ButtonGroup,
+  ButtonGroupSeparator,
+  ButtonGroupText,
+  buttonGroupVariants
+};

package/dist/es/components/ui/button.js

@@ -0,0 +1,57 @@
+import { jsx } from "react/jsx-runtime";
+import "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+import { cn } from "../../lib/utils.js";
+const buttonVariants = cva(
+  "shared:inline-flex shared:items-center shared:justify-center shared:gap-2 shared:whitespace-nowrap shared:cupertino-corner shared:rounded-full shared:text-md shared:md:text-sm shared:font-medium shared:transition-all shared:cursor-pointer shared:disabled:cursor-not-allowed shared:disabled:pointer-events-none shared:disabled:opacity-50 shared:[&_svg]:pointer-events-none shared:[&_svg:not([class*='size-'])]:size-4 shared:shrink-0 shared:[&_svg]:shrink-0 shared:outline-none shared:focus-visible:border-ring shared:focus-visible:ring-ring/50 shared:focus-visible:ring-[3px] shared:aria-invalid:ring-destructive/20 shared:dark:aria-invalid:ring-destructive/40 shared:aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default: "shared:bg-primary shared:text-white shared:hover:bg-primary/90",
+        default2: "shared:bg-primary/10 shared:text-primary shared:hover:bg-primary/30 shared:font-bold",
+        destructive: "shared:bg-destructive shared:text-white shared:hover:bg-destructive/90 shared:focus-visible:ring-destructive/20 shared:dark:focus-visible:ring-destructive/40 shared:dark:bg-destructive/60",
+        destructive2: "shared:bg-destructive/10 shared:text-destructive shared:hover:bg-destructive/30 shared:font-bold",
+        outline: "shared:border shared:border-primary shared:text-primary shared:bg-background shared:shadow-xs shared:hover:bg-accent shared:hover:text-accent-foreground shared:dark:bg-input/30 shared:dark:border-input shared:dark:hover:bg-input/50",
+        secondary: "shared:bg-secondary shared:text-secondary-foreground shared:hover:bg-secondary/80",
+        ghost: "shared:hover:bg-accent shared:hover:text-accent-foreground shared:dark:hover:bg-accent/50",
+        link: "shared:text-primary shared:underline-offset-4 shared:hover:underline",
+        input: "shared:file:text-foreground shared:placeholder:text-muted-foreground shared:selection:bg-primary shared:selection:text-primary-foreground shared:dark:bg-input/30 shared:border-input shared:h-12 shared:md:h-9 shared:px-4 shared:md:px-2 shared:md:py-1 shared:w-full shared:min-w-0 shared:cupertino-corner shared:border shared:bg-transparent shared:px-3 shared:py-1 shared:text-base shared:shadow-xs shared:transition-[color,box-shadow] shared:outline-none shared:file:inline-flex shared:file:h-7 shared:file:border-0 shared:file:bg-transparent shared:file:text-sm shared:file:font-medium shared:disabled:pointer-events-none shared:disabled:cursor-not-allowed shared:disabled:opacity-50 shared:md:text-sm shared:focus-visible:border-ring shared:focus-visible:ring-ring/50 shared:focus-visible:ring-[3px] shared:aria-invalid:ring-destructive/20 shared:dark:aria-invalid:ring-destructive/40 shared:aria-invalid:border-destructive shared:items-flex shared:justify-start",
+        select: "shared:file:text-foreground shared:placeholder:text-muted-foreground shared:selection:bg-primary shared:selection:text-primary-foreground shared:dark:bg-input/30 shared:border-input shared:h-12 shared:md:h-9 shared:px-4 shared:md:px-2 shared:md:py-1 shared:w-full shared:min-w-0 shared:cupertino-corner shared:border shared:bg-transparent shared:px-3 shared:py-1 shared:text-base shared:shadow-xs shared:transition-[color,box-shadow] shared:outline-none shared:file:inline-flex shared:file:h-7 shared:file:border-0 shared:file:bg-transparent shared:file:text-sm shared:file:font-medium shared:disabled:pointer-events-none shared:disabled:cursor-not-allowed shared:disabled:opacity-50 shared:md:text-sm shared:focus-visible:border-ring shared:focus-visible:ring-ring/50 shared:focus-visible:ring-[3px] shared:aria-invalid:ring-destructive/20 shared:dark:aria-invalid:ring-destructive/40 shared:aria-invalid:border-destructive shared:items-flex shared:justify-between"
+      },
+      size: {
+        default: "shared:h-12 shared:md:h-9 shared:px-4 shared:md:px-2 shared:md:py-1 shared:has-[>svg]:px-3",
+        sm: "shared:h-8 shared:px-2 shared:gap-1.5 shared:px-3 shared:has-[>svg]:px-2.5",
+        lg: "shared:h-12 shared:px-6 shared:py-3 shared:md:h-9 shared:md:px-4 shared:md:py-2 shared:has-[>svg]:px-3",
+        icon: "shared:size-12 shared:md:size-9",
+        "icon-sm": "shared:size-8",
+        "icon-lg": "shared:size-10"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+function Button({
+  className,
+  variant,
+  size,
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? Slot : "button";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      "data-slot": "button",
+      className: cn(buttonVariants({ variant, size, className })),
+      ...props
+    }
+  );
+}
+export {
+  Button,
+  buttonVariants
+};

package/dist/es/components/ui/calendar.js

@@ -0,0 +1,402 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { ChevronLeftIcon, ChevronRightIcon, ChevronDownIcon } from "lucide-react";
+import { getDefaultClassNames, DayPicker } from "react-day-picker";
+import { cn } from "../../lib/utils.js";
+import { Button, buttonVariants } from "./button.js";
+import { Popover, PopoverTrigger, PopoverContent } from "./popover.js";
+import { Drawer, DrawerTrigger, DrawerContent, DrawerFooter, DrawerClose } from "./drawer.js";
+import "./select.js";
+import { useMediaQuery } from "../../hooks/use-mobile.js";
+import { useMobileBackDialog } from "../../hooks/use-mobile-back-dialog.js";
+import "@quan-erp/shared-frontend-core";
+import { Calendar as Calendar$1 } from "@icon-park/react";
+function Calendar({
+  className,
+  classNames,
+  showOutsideDays = true,
+  captionLayout = "label",
+  buttonVariant = "ghost",
+  formatters,
+  components,
+  type = "raw",
+  trigger,
+  label,
+  ...props
+}) {
+  const defaultClassNames = getDefaultClassNames();
+  const isMobile = useMediaQuery();
+  const [open, setOpen] = React.useState(false);
+  const isDrawer = type === "drawer" || type === "automatic" && isMobile;
+  const [internalMonth, setInternalMonth] = React.useState(props.defaultMonth || props.month || /* @__PURE__ */ new Date());
+  useMobileBackDialog({
+    open,
+    enable: open && isDrawer,
+    onOpenChange: setOpen
+  });
+  React.useEffect(() => {
+    if (props.month) {
+      setInternalMonth(props.month);
+    }
+  }, [props.month]);
+  const [showMonthYearPicker, setShowMonthYearPicker] = React.useState(false);
+  const selectedMonthRef = React.useRef(null);
+  const selectedYearRef = React.useRef(null);
+  const internalMonthRef = React.useRef(internalMonth);
+  internalMonthRef.current = internalMonth;
+  const scrollTimeoutMonthRef = React.useRef(void 0);
+  const scrollTimeoutYearRef = React.useRef(void 0);
+  const handleScroll = (e, type2, timeoutRef) => {
+    const container = e.currentTarget;
+    if (timeoutRef.current) clearTimeout(timeoutRef.current);
+    timeoutRef.current = setTimeout(() => {
+      const children = Array.from(container.children);
+      const center = container.scrollTop + container.clientHeight / 2;
+      let closest = null;
+      let minDiff = Infinity;
+      for (const child of children) {
+        if (child.tagName !== "BUTTON") continue;
+        const htmlChild = child;
+        const childCenter = htmlChild.offsetTop + htmlChild.offsetHeight / 2;
+        const diff = Math.abs(childCenter - center);
+        if (diff < minDiff) {
+          minDiff = diff;
+          closest = htmlChild;
+        }
+      }
+      if (closest) {
+        const val = parseInt(closest.getAttribute(`data-${type2}`) || "0", 10);
+        const newDate = new Date(internalMonthRef.current);
+        if (type2 === "month") {
+          if (newDate.getMonth() !== val) {
+            newDate.setMonth(val);
+            handleMonthChange(newDate);
+          }
+        } else {
+          if (newDate.getFullYear() !== val) {
+            newDate.setFullYear(val);
+            handleMonthChange(newDate);
+          }
+        }
+      }
+    }, 100);
+  };
+  React.useEffect(() => {
+    if (showMonthYearPicker) {
+      setTimeout(() => {
+        selectedMonthRef.current?.scrollIntoView({ block: "center", behavior: "smooth" });
+        selectedYearRef.current?.scrollIntoView({ block: "center", behavior: "smooth" });
+      }, 10);
+    }
+  }, [showMonthYearPicker]);
+  const startYear = props.startMonth?.getFullYear() || 1970;
+  const endYear = props.endMonth?.getFullYear() || 2050;
+  const years = React.useMemo(() => Array.from({ length: endYear - startYear + 1 }, (_, i) => startYear + i), [startYear, endYear]);
+  const months = React.useMemo(() => Array.from({ length: 12 }, (_, i) => {
+    const d = /* @__PURE__ */ new Date();
+    d.setMonth(i);
+    return d.toLocaleString("default", { month: "long" });
+  }), []);
+  const handleMonthChange = (newMonth) => {
+    setInternalMonth(newMonth);
+    props.onMonthChange?.(newMonth);
+  };
+  const handleTodayClick = () => {
+    const today = /* @__PURE__ */ new Date();
+    setInternalMonth(today);
+    props.onMonthChange?.(today);
+    if (props.mode === "single" && props.onSelect) {
+      props.onSelect(today, today, { selected: false }, {});
+    }
+  };
+  const CalendarContent = /* @__PURE__ */ jsxs("div", { className: "shared:flex shared:flex-col shared:gap-2 shared:w-full shared:overflow-hidden shared:md:h-[26.5rem] shared:h-[31.5rem] shared:md:mt-0 shared:mt-5", children: [
+    showMonthYearPicker ? /* @__PURE__ */ jsxs("div", { className: "shared:relative shared:flex shared:gap-2 shared:md:h-[23rem] shared:h-[26.5rem] shared:p-2 shared:w-full shared:md:w-[var(--radix-popover-trigger-width)]", children: [
+      /* @__PURE__ */ jsx("div", { className: "shared:absolute shared:top-0 shared:inset-x-0 shared:h-16 shared:bg-gradient-to-b shared:from-popover shared:from-[40%] shared:to-transparent shared:pointer-events-none shared:z-10" }),
+      /* @__PURE__ */ jsx("div", { className: "shared:absolute shared:bottom-0 shared:inset-x-0 shared:h-16 shared:bg-gradient-to-t shared:from-popover shared:from-[40%] shared:to-transparent shared:pointer-events-none shared:z-10" }),
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "shared:relative shared:flex-1 shared:overflow-y-auto shared:overscroll-contain shared:h-full shared:flex shared:flex-col shared:gap-1 shared:snap-y shared:snap-mandatory hide-scrollbar",
+          onScroll: (e) => handleScroll(e, "month", scrollTimeoutMonthRef),
+          onWheel: (e) => e.stopPropagation(),
+          onTouchMove: (e) => e.stopPropagation(),
+          children: [
+            /* @__PURE__ */ jsx("div", { className: "shared:h-[calc(50%-1rem)] shared:shrink-0 shared:pointer-events-none" }),
+            months.map((month, i) => {
+              const isSelected = internalMonth.getMonth() === i;
+              return /* @__PURE__ */ jsx(
+                Button,
+                {
+                  "data-month": i,
+                  ref: isSelected ? selectedMonthRef : null,
+                  variant: isSelected ? "default" : "ghost",
+                  className: "shared:w-full shared:justify-center shared:snap-center",
+                  onClick: (e) => {
+                    const newDate = new Date(internalMonth);
+                    newDate.setMonth(i);
+                    handleMonthChange(newDate);
+                    e.currentTarget.scrollIntoView({ block: "center", behavior: "smooth" });
+                  },
+                  children: month
+                },
+                month
+              );
+            }),
+            /* @__PURE__ */ jsx("div", { className: "shared:h-[calc(50%-1rem)] shared:shrink-0 shared:pointer-events-none" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "shared:relative shared:flex-1 shared:overflow-y-auto shared:overscroll-contain shared:flex shared:flex-col shared:gap-1 shared:snap-y shared:snap-mandatory hide-scrollbar",
+          onScroll: (e) => handleScroll(e, "year", scrollTimeoutYearRef),
+          onWheel: (e) => e.stopPropagation(),
+          onTouchMove: (e) => e.stopPropagation(),
+          children: [
+            /* @__PURE__ */ jsx("div", { className: "shared:h-[calc(50%-1rem)] shared:shrink-0 shared:pointer-events-none" }),
+            years.map((year) => {
+              const isSelected = internalMonth.getFullYear() === year;
+              return /* @__PURE__ */ jsx(
+                Button,
+                {
+                  "data-year": year,
+                  ref: isSelected ? selectedYearRef : null,
+                  variant: isSelected ? "default" : "ghost",
+                  className: "shared:w-full shared:justify-center shared:snap-center",
+                  onClick: (e) => {
+                    const newDate = new Date(internalMonth);
+                    newDate.setFullYear(year);
+                    handleMonthChange(newDate);
+                    e.currentTarget.scrollIntoView({ block: "center", behavior: "smooth" });
+                  },
+                  children: year
+                },
+                year
+              );
+            }),
+            /* @__PURE__ */ jsx("div", { className: "shared:h-[calc(50%-1rem)] shared:shrink-0 shared:pointer-events-none" })
+          ]
+        }
+      )
+    ] }) : /* @__PURE__ */ jsx(
+      DayPicker,
+      {
+        month: internalMonth,
+        onMonthChange: handleMonthChange,
+        showOutsideDays,
+        fixedWeeks: showOutsideDays,
+        className: cn(
+          "shared:w-full shared:group/calendar shared:p-0 shared:md:p-3 shared:[--cell-size:2rem] shared:[[data-slot=card-content]_&]:bg-transparent shared:[[data-slot=popover-content]_&]:bg-transparent calendar",
+          String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
+          String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
+          className
+        ),
+        captionLayout: "label",
+        formatters: {
+          formatMonthDropdown: (date) => date.toLocaleString("default", { month: "short" }),
+          ...formatters
+        },
+        classNames: {
+          root: cn("shared:p-2 shared:pb-0", isDrawer ? "shared:w-full shared:[&_.calendar]:w-full shared:p-0 shared:md:h-[20rem]" : "shared:w-fit", defaultClassNames.root),
+          months: cn(
+            "shared:relative shared:flex shared:flex-col shared:gap-4 shared:md:flex-row",
+            defaultClassNames.months
+          ),
+          month: cn("shared:flex shared:w-full shared:flex-col shared:gap-4", defaultClassNames.month),
+          nav: cn(
+            "shared:absolute shared:inset-x-0 shared:top-0 shared:flex shared:w-full shared:items-center shared:justify-between shared:gap-1 shared:pointer-events-none",
+            defaultClassNames.nav
+          ),
+          button_previous: cn(
+            buttonVariants({ variant: buttonVariant }),
+            "shared:h-[var(--cell-size)] shared:w-[var(--cell-size)] shared:select-none shared:p-0 shared:aria-disabled:opacity-50 shared:pointer-events-auto",
+            defaultClassNames.button_previous
+          ),
+          button_next: cn(
+            buttonVariants({ variant: buttonVariant }),
+            "shared:h-[var(--cell-size)] shared:w-[var(--cell-size)] shared:select-none shared:p-0 shared:aria-disabled:opacity-50 shared:pointer-events-auto",
+            defaultClassNames.button_next
+          ),
+          month_caption: cn(
+            "shared:flex shared:h-[var(--cell-size)] shared:w-full shared:items-center shared:justify-center shared:px-[var(--cell-size)]",
+            defaultClassNames.month_caption
+          ),
+          dropdowns: cn(
+            "shared:flex shared:h-[var(--cell-size)] shared:w-full shared:items-center shared:justify-center shared:gap-1.5 shared:text-sm shared:font-medium",
+            defaultClassNames.dropdowns
+          ),
+          dropdown_root: cn(
+            "shared:has-focus:border-ring shared:border-input shared:shadow-xs shared:has-focus:ring-ring/50 shared:has-focus:ring-[3px] shared:relative shared:rounded-md shared:border",
+            defaultClassNames.dropdown_root
+          ),
+          dropdown: cn(
+            "shared:bg-popover shared:absolute shared:inset-0 shared:opacity-0",
+            defaultClassNames.dropdown
+          ),
+          caption_label: cn(
+            "shared:select-none shared:font-medium",
+            captionLayout === "label" ? "shared:text-sm" : "shared:[&>svg]:text-muted-foreground shared:flex shared:h-8 shared:items-center shared:gap-1 shared:rounded-md shared:pl-2 shared:pr-1 shared:text-sm shared:[&>svg]:size-3.5",
+            defaultClassNames.caption_label
+          ),
+          table: "shared:w-full shared:border-collapse",
+          weekdays: cn("shared:flex", defaultClassNames.weekdays),
+          weekday: cn(
+            "shared:text-muted-foreground shared:flex-1 shared:select-none shared:rounded-md shared:text-[0.8rem] shared:font-normal",
+            defaultClassNames.weekday
+          ),
+          week: cn("shared:mt-2 shared:flex shared:w-full", defaultClassNames.week),
+          week_number_header: cn(
+            "shared:w-[var(--cell-size)] shared:select-none",
+            defaultClassNames.week_number_header
+          ),
+          week_number: cn(
+            "shared:text-muted-foreground shared:select-none shared:text-[0.8rem]",
+            defaultClassNames.week_number
+          ),
+          day: cn(
+            "shared:group/day shared:relative shared:flex shared:items-center shared:justify-center shared:aspect-square shared:h-full shared:w-full shared:text-md shared:md:text-base shared:select-none shared:p-0 shared:text-center shared:[&:first-child[data-selected=true]_button]:rounded-l-full shared:[&:last-child[data-selected=true]_button]:rounded-r-full",
+            defaultClassNames.day
+          ),
+          range_start: cn(
+            "shared:bg-accent shared:rounded-l-full",
+            defaultClassNames.range_start
+          ),
+          range_middle: cn("shared:rounded-none", defaultClassNames.range_middle),
+          range_end: cn("shared:bg-accent shared:rounded-r-full", defaultClassNames.range_end),
+          today: cn(
+            "shared:bg-red-500 shared:text-white shared:text-center shared:rounded-full shared:[&:not([data-selected=true])_button:hover]:bg-red-600 shared:[&:not([data-selected=true])_button:hover]:text-white shared:data-[selected=true]:bg-transparent",
+            defaultClassNames.today
+          ),
+          outside: cn(
+            "shared:text-muted-foreground shared:aria-selected:text-muted-foreground",
+            defaultClassNames.outside
+          ),
+          disabled: cn(
+            "shared:text-muted-foreground shared:opacity-50",
+            defaultClassNames.disabled
+          ),
+          hidden: cn("shared:invisible", defaultClassNames.hidden),
+          ...classNames
+        },
+        components: {
+          CaptionLabel: (props2) => {
+            return /* @__PURE__ */ jsxs(
+              Button,
+              {
+                variant: "secondary",
+                size: "default",
+                className: "shared:text-sm shared:font-medium shared:hover:bg-accent shared:hover:text-accent-foreground",
+                onClick: () => setShowMonthYearPicker((prev) => !prev),
+                children: [
+                  internalMonth.toLocaleString("default", { month: "long" }),
+                  " ",
+                  internalMonth.getFullYear()
+                ]
+              }
+            );
+          },
+          Root: ({ className: className2, rootRef, ...props2 }) => {
+            return /* @__PURE__ */ jsx(
+              "div",
+              {
+                "data-slot": "calendar",
+                ref: rootRef,
+                className: cn(className2),
+                ...props2
+              }
+            );
+          },
+          Chevron: ({ className: className2, orientation, ...props2 }) => {
+            if (orientation === "left") {
+              return /* @__PURE__ */ jsx(ChevronLeftIcon, { className: cn("shared:size-10 shared:p-2 shared:bg-muted/50 shared:rounded-full", className2), ...props2 });
+            }
+            if (orientation === "right") {
+              return /* @__PURE__ */ jsx(
+                ChevronRightIcon,
+                {
+                  className: cn("shared:size-10 shared:p-2 shared:bg-muted/50 shared:rounded-full", className2),
+                  ...props2
+                }
+              );
+            }
+            return /* @__PURE__ */ jsx(ChevronDownIcon, { className: cn("shared:size-4", className2), ...props2 });
+          },
+          DayButton: CalendarDayButton,
+          WeekNumber: ({ children, ...props2 }) => {
+            return /* @__PURE__ */ jsx("td", { ...props2, children: /* @__PURE__ */ jsx("div", { className: "shared:flex shared:size-[var(--cell-size)] shared:items-center shared:justify-center shared:text-center", children }) });
+          },
+          ...components
+        },
+        ...props
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: "shared:px-2 shared:pb-2 shared:mt-[-4px] shared:min-h-min shared:flex shared:justify-end", children: showMonthYearPicker ? /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "default2",
+        onClick: () => setShowMonthYearPicker(false),
+        children: "Done"
+      }
+    ) : /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "default2",
+        onClick: handleTodayClick,
+        children: "Today"
+      }
+    ) })
+  ] });
+  if (type === "raw") return CalendarContent;
+  if (isDrawer) {
+    return /* @__PURE__ */ jsxs(Drawer, { open, onOpenChange: setOpen, shouldScaleBackground: false, children: [
+      /* @__PURE__ */ jsx(DrawerTrigger, { asChild: true, children: trigger || /* @__PURE__ */ jsxs(Button, { type: "button", variant: "input", children: [
+        label,
+        /* @__PURE__ */ jsx(Calendar$1, { theme: "outline", size: "19", fill: "#000000" })
+      ] }) }),
+      /* @__PURE__ */ jsxs(DrawerContent, { className: "shared:p-2 shared:flex shared:flex-col shared:justify-center shared:items-center", children: [
+        CalendarContent,
+        /* @__PURE__ */ jsx(DrawerFooter, { className: "shared:w-full shared:pt-0 shared:max-w-sm shared:px-0 shared:pb-0", children: /* @__PURE__ */ jsx(DrawerClose, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "secondary", size: "lg", className: "shared:w-full", children: "Close" }) }) })
+      ] })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(Popover, { children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: trigger }),
+    /* @__PURE__ */ jsx(PopoverContent, { className: "shared:w-auto shared:p-0", align: "start", children: CalendarContent })
+  ] });
+}
+function CalendarDayButton({
+  className,
+  day,
+  modifiers,
+  ...props
+}) {
+  const defaultClassNames = getDefaultClassNames();
+  const ref = React.useRef(null);
+  React.useEffect(() => {
+    if (modifiers.focused) ref.current?.focus();
+  }, [modifiers.focused]);
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      ref,
+      variant: "ghost",
+      size: "icon",
+      "data-day": day.date.toLocaleDateString(),
+      "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(
+        "shared:rounded-full shared:cupertino-corner shared:data-[selected-single=true]:bg-primary shared:data-[selected-single=true]:text-primary-foreground shared:data-[range-middle=true]:bg-accent shared:data-[range-middle=true]:text-accent-foreground shared:data-[range-start=true]:bg-primary shared:data-[range-start=true]:text-primary-foreground shared:data-[range-end=true]:bg-primary shared:data-[range-end=true]:text-primary-foreground shared:focus-visible:border-ring shared:focus-visible:ring-ring/50 shared:flex shared:items-center shared:justify-center shared:aspect-square shared:h-12 shared:md:h-9 shared:min-w-[--cell-size] shared:flex-col shared:gap-1 shared:font-normal shared:leading-none shared:data-[range-end=true]:rounded-full shared:data-[range-end=true]:cupertino-corner shared:data-[range-middle=true]:rounded-none shared:data-[range-start=true]:rounded-full shared:data-[range-start=true]:cupertino-corner shared:focus-visible:relative shared:focus-visible:z-10 shared:focus-visible:ring-[3px] shared:[&>span]:text-xs shared:[&>span]:opacity-70 shared:hover:text-black shared:data-[selected-single=true]:hover:text-primary-foreground shared:data-[selected-single=true]:hover:bg-primary shared:data-[range-start=true]:hover:text-primary-foreground shared:data-[range-start=true]:hover:bg-primary shared:data-[range-end=true]:hover:text-primary-foreground shared:data-[range-end=true]:hover:bg-primary",
+        defaultClassNames.day,
+        className
+      ),
+      ...props
+    }
+  );
+}
+export {
+  Calendar,
+  CalendarDayButton
+};