acai-ui-library 0.1.11

package/dist/components/date-picker.cjs

@@ -0,0 +1,278 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/date-picker.tsx
+var date_picker_exports = {};
+__export(date_picker_exports, {
+  DatePicker: () => DatePicker
+});
+module.exports = __toCommonJS(date_picker_exports);
+var React3 = __toESM(require("react"), 1);
+var import_lucide_react3 = require("lucide-react");
+
+// src/lib/utils.ts
+var import_clsx = require("clsx");
+var import_tailwind_merge = require("tailwind-merge");
+function cn(...inputs) {
+  return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
+}
+
+// src/components/button.tsx
+var React = __toESM(require("react"), 1);
+var import_react_slot = require("@radix-ui/react-slot");
+var import_class_variance_authority = require("class-variance-authority");
+var import_lucide_react = require("lucide-react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var buttonVariants = (0, import_class_variance_authority.cva)(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary-hover",
+        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive-hover",
+        outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary-hover",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+        success: "bg-success text-success-foreground hover:bg-success-hover"
+      },
+      size: {
+        xs: "h-7 px-2.5 text-xs",
+        sm: "h-9 px-3",
+        default: "h-10 px-4 py-2",
+        lg: "h-11 px-8",
+        icon: "h-10 w-10",
+        "icon-sm": "h-8 w-8"
+      },
+      shape: {
+        default: "rounded-md",
+        rounded: "rounded-lg",
+        pill: "rounded-full",
+        square: "rounded-none"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+      shape: "default"
+    }
+  }
+);
+var Button = React.forwardRef(
+  ({
+    className,
+    variant,
+    size,
+    shape,
+    asChild = false,
+    loading = false,
+    prefixIcon,
+    suffixIcon,
+    children,
+    disabled,
+    ...props
+  }, ref) => {
+    const Comp = asChild ? import_react_slot.Slot : "button";
+    const isDisabled = disabled || loading;
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      Comp,
+      {
+        className: cn(buttonVariants({ variant, size, shape, className })),
+        ref,
+        disabled: isDisabled,
+        ...props,
+        children: [
+          loading && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Loader2, { className: "animate-spin" }),
+          !loading && prefixIcon,
+          children,
+          suffixIcon
+        ]
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+
+// src/components/calendar.tsx
+var import_react_day_picker = require("react-day-picker");
+var import_lucide_react2 = require("lucide-react");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function Calendar({ className, classNames, showOutsideDays = true, captionLayout = "dropdown", ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    import_react_day_picker.DayPicker,
+    {
+      showOutsideDays,
+      className: cn("w-[260px] rounded-lg p-3", className),
+      classNames: {
+        months: "flex flex-col",
+        month: "space-y-3",
+        month_caption: "relative flex h-8 items-center justify-center",
+        caption_label: "text-sm font-medium hidden",
+        nav: "flex items-center",
+        button_previous: cn(
+          "absolute start-0 inline-flex size-7 items-center justify-center rounded-md bg-transparent p-0 text-muted-foreground hover:bg-[var(--hc-color-border-subtle)] hover:text-foreground transition-colors cursor-pointer border-none"
+        ),
+        button_next: cn(
+          "absolute end-0 inline-flex size-7 items-center justify-center rounded-md bg-transparent p-0 text-muted-foreground hover:bg-[var(--hc-color-border-subtle)] hover:text-foreground transition-colors cursor-pointer border-none"
+        ),
+        month_grid: "w-full border-collapse",
+        weekdays: "flex w-full",
+        weekday: "flex-1 h-8 flex items-center justify-center text-[11px] font-medium text-muted-foreground uppercase tracking-wider",
+        week: "flex w-full mt-1",
+        day: "flex-1 h-8 p-0 relative focus-within:z-20 flex items-center justify-center text-sm",
+        day_button: cn(
+          "inline-flex size-8 items-center justify-center rounded-md bg-transparent text-sm font-normal cursor-pointer border-none hover:bg-[var(--hc-color-border-subtle)] transition-colors"
+        ),
+        range_end: "day-range-end",
+        selected: "[&>button]:bg-[var(--hc-primary-600)] [&>button]:text-white [&>button]:hover:bg-[var(--hc-primary-600)] [&>button]:hover:text-white [&>button]:font-medium",
+        today: "[&>button]:font-semibold [&>button]:text-[var(--hc-primary-600)]",
+        outside: "day-outside [&>button]:bg-transparent [&>button]:text-[var(--hc-grey-200)]",
+        disabled: "[&>button]:text-[var(--hc-grey-200)] [&>button]:opacity-50 [&>button]:cursor-default",
+        range_middle: "[&>button]:bg-[var(--hc-primary-100)] [&>button]:text-foreground [&>button]:rounded-none",
+        range_start: "[&>button]:rounded-e-none",
+        dropdowns: "flex items-center gap-1.5 justify-center [&>select]:flex-1",
+        dropdown: "h-7 w-[88px] rounded-md border border-[var(--hc-color-border-subtle)] bg-background px-2 text-xs font-medium text-foreground cursor-pointer outline-none accent-[var(--hc-primary-600)] focus:border-[var(--hc-primary-500)] focus:ring-[2px] focus:ring-[var(--hc-primary-500)]/20 [&>option:checked]:bg-[var(--hc-primary-600)] [&>option:checked]:text-white [&>option]:py-1",
+        hidden: "invisible",
+        ...classNames
+      },
+      captionLayout,
+      components: {
+        Chevron: ({ orientation }) => {
+          const Icon = orientation === "left" ? import_lucide_react2.ChevronLeft : import_lucide_react2.ChevronRight;
+          return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon, { className: "size-4" });
+        }
+      },
+      ...props
+    }
+  );
+}
+Calendar.displayName = "Calendar";
+
+// src/components/popover.tsx
+var React2 = __toESM(require("react"), 1);
+var PopoverPrimitive = __toESM(require("@radix-ui/react-popover"), 1);
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var Popover = PopoverPrimitive.Root;
+var PopoverTrigger = PopoverPrimitive.Trigger;
+var PopoverContent = React2.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(PopoverPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  PopoverPrimitive.Content,
+  {
+    ref,
+    align,
+    sideOffset,
+    className: cn(
+      "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-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",
+      className
+    ),
+    ...props
+  }
+) }));
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+
+// src/components/date-picker.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function formatDate(d) {
+  return d.toLocaleDateString();
+}
+function DatePicker({
+  date,
+  onDateChange,
+  mode = "single",
+  placeholder = "Pick a date",
+  className,
+  presets,
+  disabled
+}) {
+  const label = React3.useMemo(() => {
+    if (!date) return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: placeholder });
+    if (mode === "range") {
+      const range = date;
+      if (range.from && range.to) {
+        return `${formatDate(range.from)} \u2013 ${formatDate(range.to)}`;
+      }
+      if (range.from) return formatDate(range.from);
+      return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: placeholder });
+    }
+    return date.toLocaleDateString();
+  }, [date, mode, placeholder]);
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(Popover, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+      Button,
+      {
+        variant: "outline",
+        className: cn(
+          "w-[280px] justify-start text-left font-normal",
+          !date && "text-muted-foreground",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react3.CalendarIcon, { className: "me-2 h-4 w-4" }),
+          label
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(PopoverContent, { className: "w-auto p-0", align: "start", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex", children: [
+      presets && presets.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "flex flex-col gap-1 border-e p-2 min-w-[140px]", children: presets.map((preset) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        Button,
+        {
+          variant: "ghost",
+          size: "sm",
+          className: "justify-start font-normal",
+          onClick: () => onDateChange?.(preset.value),
+          children: preset.label
+        },
+        preset.label
+      )) }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { children: mode === "range" ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        Calendar,
+        {
+          mode: "range",
+          selected: date,
+          onSelect: (value) => onDateChange?.(value),
+          disabled,
+          autoFocus: true
+        }
+      ) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        Calendar,
+        {
+          mode: "single",
+          selected: date,
+          onSelect: (value) => onDateChange?.(value),
+          disabled,
+          autoFocus: true
+        }
+      ) })
+    ] }) })
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  DatePicker
+});
+//# sourceMappingURL=date-picker.cjs.map

package/dist/components/date-picker.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/date-picker.tsx","../../src/lib/utils.ts","../../src/components/button.tsx","../../src/components/calendar.tsx","../../src/components/popover.tsx"],"sourcesContent":["import * as React from \"react\"\nimport { CalendarIcon } from \"lucide-react\"\nimport type { DateRange, Matcher } from \"react-day-picker\"\nimport { cn } from \"../lib/utils\"\nimport { Button } from \"./button\"\nimport { Calendar } from \"./calendar\"\nimport { Popover, PopoverContent, PopoverTrigger } from \"./popover\"\n\nexport type DatePickerPreset =\n  | { label: string; value: Date }\n  | { label: string; value: { from: Date; to: Date } }\n\nexport interface DatePickerProps {\n  /** Selected value. For `mode=\"single\"` this is a Date, for `mode=\"range\"` this is a range object. */\n  date?: Date | DateRange\n  /** Called with the new selection. */\n  onDateChange?: (date: Date | DateRange | undefined) => void\n  /** Selection mode. Defaults to \"single\". */\n  mode?: \"single\" | \"range\"\n  /** Placeholder for the trigger when no date is picked. */\n  placeholder?: string\n  /** Classname applied to the trigger button. */\n  className?: string\n  /** Optional date format string — reserved for future use. */\n  formatStr?: string\n  /** Optional preset list rendered in a sidebar to the left of the calendar. */\n  presets?: DatePickerPreset[]\n  /** Passed through to the underlying Calendar. */\n  disabled?: Matcher | Matcher[]\n}\n\nfunction formatDate(d: Date): string {\n  return d.toLocaleDateString()\n}\n\nfunction DatePicker({\n  date,\n  onDateChange,\n  mode = \"single\",\n  placeholder = \"Pick a date\",\n  className,\n  presets,\n  disabled,\n}: DatePickerProps) {\n  const label = React.useMemo(() => {\n    if (!date) return <span>{placeholder}</span>\n    if (mode === \"range\") {\n      const range = date as DateRange\n      if (range.from && range.to) {\n        return `${formatDate(range.from)} – ${formatDate(range.to)}`\n      }\n      if (range.from) return formatDate(range.from)\n      return <span>{placeholder}</span>\n    }\n    return (date as Date).toLocaleDateString()\n  }, [date, mode, placeholder])\n\n  return (\n    <Popover>\n      <PopoverTrigger asChild>\n        <Button\n          variant=\"outline\"\n          className={cn(\n            \"w-[280px] justify-start text-left font-normal\",\n            !date && \"text-muted-foreground\",\n            className\n          )}\n        >\n          <CalendarIcon className=\"me-2 h-4 w-4\" />\n          {label}\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent className=\"w-auto p-0\" align=\"start\">\n        <div className=\"flex\">\n          {presets && presets.length > 0 && (\n            <div className=\"flex flex-col gap-1 border-e p-2 min-w-[140px]\">\n              {presets.map((preset) => (\n                <Button\n                  key={preset.label}\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  className=\"justify-start font-normal\"\n                  onClick={() => onDateChange?.(preset.value as Date | DateRange)}\n                >\n                  {preset.label}\n                </Button>\n              ))}\n            </div>\n          )}\n          <div>\n            {mode === \"range\" ? (\n              <Calendar\n                mode=\"range\"\n                selected={date as DateRange | undefined}\n                onSelect={(value) => onDateChange?.(value)}\n                disabled={disabled}\n                autoFocus\n              />\n            ) : (\n              <Calendar\n                mode=\"single\"\n                selected={date as Date | undefined}\n                onSelect={(value) => onDateChange?.(value)}\n                disabled={disabled}\n                autoFocus\n              />\n            )}\n          </div>\n        </div>\n      </PopoverContent>\n    </Popover>\n  )\n}\n\nexport { DatePicker }\n","import { type ClassValue, clsx } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n","\nimport * as React from \"react\"\nimport { Slot } from \"@radix-ui/react-slot\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { Loader2 } from \"lucide-react\"\nimport { cn } from \"../lib/utils\"\n\nconst buttonVariants = cva(\n  \"inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:size-4\",\n  {\n    variants: {\n      variant: {\n        default:\n          \"bg-primary text-primary-foreground hover:bg-primary-hover\",\n        destructive:\n          \"bg-destructive text-destructive-foreground hover:bg-destructive-hover\",\n        outline:\n          \"border border-input bg-background hover:bg-accent hover:text-accent-foreground\",\n        secondary:\n          \"bg-secondary text-secondary-foreground hover:bg-secondary-hover\",\n        ghost:\n          \"hover:bg-accent hover:text-accent-foreground\",\n        link:\n          \"text-primary underline-offset-4 hover:underline\",\n        success:\n          \"bg-success text-success-foreground hover:bg-success-hover\",\n      },\n      size: {\n        xs: \"h-7 px-2.5 text-xs\",\n        sm: \"h-9 px-3\",\n        default: \"h-10 px-4 py-2\",\n        lg: \"h-11 px-8\",\n        icon: \"h-10 w-10\",\n        \"icon-sm\": \"h-8 w-8\",\n      },\n      shape: {\n        default: \"rounded-md\",\n        rounded: \"rounded-lg\",\n        pill: \"rounded-full\",\n        square: \"rounded-none\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n      shape: \"default\",\n    },\n  }\n)\n\nexport interface ButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n    VariantProps<typeof buttonVariants> {\n  asChild?: boolean\n  loading?: boolean\n  prefixIcon?: React.ReactNode\n  suffixIcon?: React.ReactNode\n}\n\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  (\n    {\n      className,\n      variant,\n      size,\n      shape,\n      asChild = false,\n      loading = false,\n      prefixIcon,\n      suffixIcon,\n      children,\n      disabled,\n      ...props\n    },\n    ref\n  ) => {\n    const Comp = asChild ? Slot : \"button\"\n    const isDisabled = disabled || loading\n\n    return (\n      <Comp\n        className={cn(buttonVariants({ variant, size, shape, className }))}\n        ref={ref}\n        disabled={isDisabled}\n        {...props}\n      >\n        {loading && <Loader2 className=\"animate-spin\" />}\n        {!loading && prefixIcon}\n        {children}\n        {suffixIcon}\n      </Comp>\n    )\n  }\n)\nButton.displayName = \"Button\"\n\nexport { Button, buttonVariants }\n","import * as React from \"react\"\nimport { DayPicker } from \"react-day-picker\"\nimport { ChevronLeft, ChevronRight } from \"lucide-react\"\nimport { cn } from \"../lib/utils\"\n\nexport type CalendarProps = React.ComponentProps<typeof DayPicker>\n\nfunction Calendar({ className, classNames, showOutsideDays = true, captionLayout = \"dropdown\", ...props }: CalendarProps) {\n  return (\n    <DayPicker\n      showOutsideDays={showOutsideDays}\n      className={cn(\"w-[260px] rounded-lg p-3\", className)}\n      classNames={{\n        months: \"flex flex-col\",\n        month: \"space-y-3\",\n        month_caption: \"relative flex h-8 items-center justify-center\",\n        caption_label: \"text-sm font-medium hidden\",\n        nav: \"flex items-center\",\n        button_previous: cn(\n          \"absolute start-0 inline-flex size-7 items-center justify-center rounded-md bg-transparent p-0 text-muted-foreground hover:bg-[var(--hc-color-border-subtle)] hover:text-foreground transition-colors cursor-pointer border-none\"\n        ),\n        button_next: cn(\n          \"absolute end-0 inline-flex size-7 items-center justify-center rounded-md bg-transparent p-0 text-muted-foreground hover:bg-[var(--hc-color-border-subtle)] hover:text-foreground transition-colors cursor-pointer border-none\"\n        ),\n        month_grid: \"w-full border-collapse\",\n        weekdays: \"flex w-full\",\n        weekday:\n          \"flex-1 h-8 flex items-center justify-center text-[11px] font-medium text-muted-foreground uppercase tracking-wider\",\n        week: \"flex w-full mt-1\",\n        day: \"flex-1 h-8 p-0 relative focus-within:z-20 flex items-center justify-center text-sm\",\n        day_button: cn(\n          \"inline-flex size-8 items-center justify-center rounded-md bg-transparent text-sm font-normal cursor-pointer border-none hover:bg-[var(--hc-color-border-subtle)] transition-colors\"\n        ),\n        range_end: \"day-range-end\",\n        selected:\n          \"[&>button]:bg-[var(--hc-primary-600)] [&>button]:text-white [&>button]:hover:bg-[var(--hc-primary-600)] [&>button]:hover:text-white [&>button]:font-medium\",\n        today: \"[&>button]:font-semibold [&>button]:text-[var(--hc-primary-600)]\",\n        outside:\n          \"day-outside [&>button]:bg-transparent [&>button]:text-[var(--hc-grey-200)]\",\n        disabled: \"[&>button]:text-[var(--hc-grey-200)] [&>button]:opacity-50 [&>button]:cursor-default\",\n        range_middle:\n          \"[&>button]:bg-[var(--hc-primary-100)] [&>button]:text-foreground [&>button]:rounded-none\",\n        range_start: \"[&>button]:rounded-e-none\",\n        dropdowns: \"flex items-center gap-1.5 justify-center [&>select]:flex-1\",\n        dropdown:\n          \"h-7 w-[88px] rounded-md border border-[var(--hc-color-border-subtle)] bg-background px-2 text-xs font-medium text-foreground cursor-pointer outline-none accent-[var(--hc-primary-600)] focus:border-[var(--hc-primary-500)] focus:ring-[2px] focus:ring-[var(--hc-primary-500)]/20 [&>option:checked]:bg-[var(--hc-primary-600)] [&>option:checked]:text-white [&>option]:py-1\",\n        hidden: \"invisible\",\n        ...classNames,\n      }}\n      captionLayout={captionLayout}\n      components={{\n        Chevron: ({ orientation }) => {\n          const Icon = orientation === \"left\" ? ChevronLeft : ChevronRight\n          return <Icon className=\"size-4\" />\n        },\n      }}\n      {...props}\n    />\n  )\n}\nCalendar.displayName = \"Calendar\"\n\nexport { Calendar }\n","import * as React from \"react\"\nimport * as PopoverPrimitive from \"@radix-ui/react-popover\"\nimport { cn } from \"../lib/utils\"\n\nconst Popover = PopoverPrimitive.Root\nconst PopoverTrigger = PopoverPrimitive.Trigger\n\nconst PopoverContent = React.forwardRef<\n  React.ElementRef<typeof PopoverPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>\n>(({ className, align = \"center\", sideOffset = 4, ...props }, ref) => (\n  <PopoverPrimitive.Portal>\n    <PopoverPrimitive.Content\n      ref={ref}\n      align={align}\n      sideOffset={sideOffset}\n      className={cn(\n        \"z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-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\",\n        className\n      )}\n      {...props}\n    />\n  </PopoverPrimitive.Portal>\n))\nPopoverContent.displayName = PopoverPrimitive.Content.displayName\n\nexport { Popover, PopoverTrigger, PopoverContent }\n"],"mappings":"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","names":["React","import_lucide_react","import_lucide_react","import_jsx_runtime","React","import_jsx_runtime","import_jsx_runtime"]}

package/dist/components/date-picker.d.cts

@@ -0,0 +1,34 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { DateRange, Matcher } from 'react-day-picker';
+
+type DatePickerPreset = {
+    label: string;
+    value: Date;
+} | {
+    label: string;
+    value: {
+        from: Date;
+        to: Date;
+    };
+};
+interface DatePickerProps {
+    /** Selected value. For `mode="single"` this is a Date, for `mode="range"` this is a range object. */
+    date?: Date | DateRange;
+    /** Called with the new selection. */
+    onDateChange?: (date: Date | DateRange | undefined) => void;
+    /** Selection mode. Defaults to "single". */
+    mode?: "single" | "range";
+    /** Placeholder for the trigger when no date is picked. */
+    placeholder?: string;
+    /** Classname applied to the trigger button. */
+    className?: string;
+    /** Optional date format string — reserved for future use. */
+    formatStr?: string;
+    /** Optional preset list rendered in a sidebar to the left of the calendar. */
+    presets?: DatePickerPreset[];
+    /** Passed through to the underlying Calendar. */
+    disabled?: Matcher | Matcher[];
+}
+declare function DatePicker({ date, onDateChange, mode, placeholder, className, presets, disabled, }: DatePickerProps): react_jsx_runtime.JSX.Element;
+
+export { DatePicker, type DatePickerPreset, type DatePickerProps };

package/dist/components/date-picker.d.ts

@@ -0,0 +1,34 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { DateRange, Matcher } from 'react-day-picker';
+
+type DatePickerPreset = {
+    label: string;
+    value: Date;
+} | {
+    label: string;
+    value: {
+        from: Date;
+        to: Date;
+    };
+};
+interface DatePickerProps {
+    /** Selected value. For `mode="single"` this is a Date, for `mode="range"` this is a range object. */
+    date?: Date | DateRange;
+    /** Called with the new selection. */
+    onDateChange?: (date: Date | DateRange | undefined) => void;
+    /** Selection mode. Defaults to "single". */
+    mode?: "single" | "range";
+    /** Placeholder for the trigger when no date is picked. */
+    placeholder?: string;
+    /** Classname applied to the trigger button. */
+    className?: string;
+    /** Optional date format string — reserved for future use. */
+    formatStr?: string;
+    /** Optional preset list rendered in a sidebar to the left of the calendar. */
+    presets?: DatePickerPreset[];
+    /** Passed through to the underlying Calendar. */
+    disabled?: Matcher | Matcher[];
+}
+declare function DatePicker({ date, onDateChange, mode, placeholder, className, presets, disabled, }: DatePickerProps): react_jsx_runtime.JSX.Element;
+
+export { DatePicker, type DatePickerPreset, type DatePickerProps };

package/dist/components/date-picker.js

@@ -0,0 +1,243 @@
+// src/components/date-picker.tsx
+import * as React3 from "react";
+import { CalendarIcon } from "lucide-react";
+
+// src/lib/utils.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/components/button.tsx
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+import { Loader2 } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary-hover",
+        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive-hover",
+        outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary-hover",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+        success: "bg-success text-success-foreground hover:bg-success-hover"
+      },
+      size: {
+        xs: "h-7 px-2.5 text-xs",
+        sm: "h-9 px-3",
+        default: "h-10 px-4 py-2",
+        lg: "h-11 px-8",
+        icon: "h-10 w-10",
+        "icon-sm": "h-8 w-8"
+      },
+      shape: {
+        default: "rounded-md",
+        rounded: "rounded-lg",
+        pill: "rounded-full",
+        square: "rounded-none"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+      shape: "default"
+    }
+  }
+);
+var Button = React.forwardRef(
+  ({
+    className,
+    variant,
+    size,
+    shape,
+    asChild = false,
+    loading = false,
+    prefixIcon,
+    suffixIcon,
+    children,
+    disabled,
+    ...props
+  }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    const isDisabled = disabled || loading;
+    return /* @__PURE__ */ jsxs(
+      Comp,
+      {
+        className: cn(buttonVariants({ variant, size, shape, className })),
+        ref,
+        disabled: isDisabled,
+        ...props,
+        children: [
+          loading && /* @__PURE__ */ jsx(Loader2, { className: "animate-spin" }),
+          !loading && prefixIcon,
+          children,
+          suffixIcon
+        ]
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+
+// src/components/calendar.tsx
+import { DayPicker } from "react-day-picker";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+function Calendar({ className, classNames, showOutsideDays = true, captionLayout = "dropdown", ...props }) {
+  return /* @__PURE__ */ jsx2(
+    DayPicker,
+    {
+      showOutsideDays,
+      className: cn("w-[260px] rounded-lg p-3", className),
+      classNames: {
+        months: "flex flex-col",
+        month: "space-y-3",
+        month_caption: "relative flex h-8 items-center justify-center",
+        caption_label: "text-sm font-medium hidden",
+        nav: "flex items-center",
+        button_previous: cn(
+          "absolute start-0 inline-flex size-7 items-center justify-center rounded-md bg-transparent p-0 text-muted-foreground hover:bg-[var(--hc-color-border-subtle)] hover:text-foreground transition-colors cursor-pointer border-none"
+        ),
+        button_next: cn(
+          "absolute end-0 inline-flex size-7 items-center justify-center rounded-md bg-transparent p-0 text-muted-foreground hover:bg-[var(--hc-color-border-subtle)] hover:text-foreground transition-colors cursor-pointer border-none"
+        ),
+        month_grid: "w-full border-collapse",
+        weekdays: "flex w-full",
+        weekday: "flex-1 h-8 flex items-center justify-center text-[11px] font-medium text-muted-foreground uppercase tracking-wider",
+        week: "flex w-full mt-1",
+        day: "flex-1 h-8 p-0 relative focus-within:z-20 flex items-center justify-center text-sm",
+        day_button: cn(
+          "inline-flex size-8 items-center justify-center rounded-md bg-transparent text-sm font-normal cursor-pointer border-none hover:bg-[var(--hc-color-border-subtle)] transition-colors"
+        ),
+        range_end: "day-range-end",
+        selected: "[&>button]:bg-[var(--hc-primary-600)] [&>button]:text-white [&>button]:hover:bg-[var(--hc-primary-600)] [&>button]:hover:text-white [&>button]:font-medium",
+        today: "[&>button]:font-semibold [&>button]:text-[var(--hc-primary-600)]",
+        outside: "day-outside [&>button]:bg-transparent [&>button]:text-[var(--hc-grey-200)]",
+        disabled: "[&>button]:text-[var(--hc-grey-200)] [&>button]:opacity-50 [&>button]:cursor-default",
+        range_middle: "[&>button]:bg-[var(--hc-primary-100)] [&>button]:text-foreground [&>button]:rounded-none",
+        range_start: "[&>button]:rounded-e-none",
+        dropdowns: "flex items-center gap-1.5 justify-center [&>select]:flex-1",
+        dropdown: "h-7 w-[88px] rounded-md border border-[var(--hc-color-border-subtle)] bg-background px-2 text-xs font-medium text-foreground cursor-pointer outline-none accent-[var(--hc-primary-600)] focus:border-[var(--hc-primary-500)] focus:ring-[2px] focus:ring-[var(--hc-primary-500)]/20 [&>option:checked]:bg-[var(--hc-primary-600)] [&>option:checked]:text-white [&>option]:py-1",
+        hidden: "invisible",
+        ...classNames
+      },
+      captionLayout,
+      components: {
+        Chevron: ({ orientation }) => {
+          const Icon = orientation === "left" ? ChevronLeft : ChevronRight;
+          return /* @__PURE__ */ jsx2(Icon, { className: "size-4" });
+        }
+      },
+      ...props
+    }
+  );
+}
+Calendar.displayName = "Calendar";
+
+// src/components/popover.tsx
+import * as React2 from "react";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var Popover = PopoverPrimitive.Root;
+var PopoverTrigger = PopoverPrimitive.Trigger;
+var PopoverContent = React2.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx3(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx3(
+  PopoverPrimitive.Content,
+  {
+    ref,
+    align,
+    sideOffset,
+    className: cn(
+      "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-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",
+      className
+    ),
+    ...props
+  }
+) }));
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+
+// src/components/date-picker.tsx
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+function formatDate(d) {
+  return d.toLocaleDateString();
+}
+function DatePicker({
+  date,
+  onDateChange,
+  mode = "single",
+  placeholder = "Pick a date",
+  className,
+  presets,
+  disabled
+}) {
+  const label = React3.useMemo(() => {
+    if (!date) return /* @__PURE__ */ jsx4("span", { children: placeholder });
+    if (mode === "range") {
+      const range = date;
+      if (range.from && range.to) {
+        return `${formatDate(range.from)} \u2013 ${formatDate(range.to)}`;
+      }
+      if (range.from) return formatDate(range.from);
+      return /* @__PURE__ */ jsx4("span", { children: placeholder });
+    }
+    return date.toLocaleDateString();
+  }, [date, mode, placeholder]);
+  return /* @__PURE__ */ jsxs2(Popover, { children: [
+    /* @__PURE__ */ jsx4(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs2(
+      Button,
+      {
+        variant: "outline",
+        className: cn(
+          "w-[280px] justify-start text-left font-normal",
+          !date && "text-muted-foreground",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsx4(CalendarIcon, { className: "me-2 h-4 w-4" }),
+          label
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx4(PopoverContent, { className: "w-auto p-0", align: "start", children: /* @__PURE__ */ jsxs2("div", { className: "flex", children: [
+      presets && presets.length > 0 && /* @__PURE__ */ jsx4("div", { className: "flex flex-col gap-1 border-e p-2 min-w-[140px]", children: presets.map((preset) => /* @__PURE__ */ jsx4(
+        Button,
+        {
+          variant: "ghost",
+          size: "sm",
+          className: "justify-start font-normal",
+          onClick: () => onDateChange?.(preset.value),
+          children: preset.label
+        },
+        preset.label
+      )) }),
+      /* @__PURE__ */ jsx4("div", { children: mode === "range" ? /* @__PURE__ */ jsx4(
+        Calendar,
+        {
+          mode: "range",
+          selected: date,
+          onSelect: (value) => onDateChange?.(value),
+          disabled,
+          autoFocus: true
+        }
+      ) : /* @__PURE__ */ jsx4(
+        Calendar,
+        {
+          mode: "single",
+          selected: date,
+          onSelect: (value) => onDateChange?.(value),
+          disabled,
+          autoFocus: true
+        }
+      ) })
+    ] }) })
+  ] });
+}
+export {
+  DatePicker
+};
+//# sourceMappingURL=date-picker.js.map