@grupor5/raya 0.2.1 → 0.2.2

package/dist/molecules/date-picker/index.mjs

@@ -0,0 +1,734 @@
+import * as React2 from 'react';
+import React2__default, { forwardRef, useMemo } from 'react';
+import { format, subDays, endOfMonth, startOfMonth, endOfYear, startOfYear, subMonths, subYears, isEqual, addYears } from 'date-fns';
+import { CalendarIcon } from '@grupor5/raya-icons';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { Slot } from '@radix-ui/react-slot';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { ChevronRight, Check, Circle, ChevronLeftIcon, ChevronRightIcon } from 'lucide-react';
+import { DayPicker, useDayPicker } from 'react-day-picker';
+import { es } from 'date-fns/locale';
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/tokens/buttons.ts
+var buttonSizeClasses = {
+  sm: {
+    base: "h-8 px-2 py-1 text-sm rounded-[10px]",
+    icon: "h-8 w-8 rounded-[10px]",
+    iconSize: "w-4 h-4"
+  },
+  md: {
+    base: "h-10 px-4 py-2 text-base rounded-xl",
+    icon: "h-10 w-10 rounded-xl",
+    iconSize: "w-5 h-5"
+  },
+  lg: {
+    base: "h-12 px-6 py-3 text-lg rounded-2xl",
+    icon: "h-12 w-12 rounded-2xl",
+    iconSize: "w-[22px] h-[22px]"
+  }
+};
+var buttonVariantClasses = {
+  // Primary variants
+  primary: {
+    primary: "bg-primary text-primary-foreground shadow-sm hover:bg-primary/90 active:bg-[hsl(var(--primary-pressed))] disabled:bg-neutral-300 disabled:text-neutral-500",
+    secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/90 active:bg-secondary/80 disabled:bg-neutral-300 disabled:text-neutral-500",
+    success: "bg-emerald-600 text-white shadow-sm hover:bg-emerald-700 active:bg-emerald-800 disabled:bg-neutral-300 disabled:text-neutral-500",
+    warning: "bg-amber-600 text-white shadow-sm hover:bg-amber-700 active:bg-amber-800 disabled:bg-neutral-300 disabled:text-neutral-500",
+    destructive: "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90 active:bg-destructive/80 disabled:bg-neutral-300 disabled:text-neutral-500",
+    neutral: "bg-neutral-700 text-white shadow-sm hover:bg-neutral-800 active:bg-neutral-900 disabled:bg-neutral-300 disabled:text-neutral-500"
+  },
+  // Secondary variants (outlined)
+  secondary: {
+    primary: "border border-primary text-primary bg-transparent hover:bg-primary/10 active:bg-primary/20 disabled:border-neutral-300 disabled:text-neutral-500 disabled:bg-transparent",
+    secondary: "border border-secondary text-secondary bg-transparent hover:bg-secondary/10 active:bg-secondary/20 disabled:border-neutral-300 disabled:text-neutral-500 disabled:bg-transparent",
+    success: "border border-emerald-600 text-emerald-600 bg-transparent hover:bg-emerald-50 active:bg-emerald-100 disabled:border-neutral-300 disabled:text-neutral-500 disabled:bg-transparent",
+    warning: "border border-amber-600 text-amber-600 bg-transparent hover:bg-amber-50 active:bg-amber-100 disabled:border-neutral-300 disabled:text-neutral-500 disabled:bg-transparent",
+    destructive: "border border-destructive text-destructive bg-transparent hover:bg-destructive/10 active:bg-destructive/20 disabled:border-neutral-300 disabled:text-neutral-500 disabled:bg-transparent",
+    neutral: "border border-neutral-700 text-neutral-700 bg-transparent hover:bg-neutral-50 active:bg-neutral-100 disabled:border-neutral-300 disabled:text-neutral-500 disabled:bg-transparent"
+  },
+  // Ghost variants (text only)
+  ghost: {
+    primary: "text-primary bg-transparent hover:bg-primary/10 active:bg-primary/20 disabled:text-neutral-500 disabled:bg-transparent",
+    secondary: "text-secondary bg-transparent hover:bg-secondary/10 active:bg-secondary/20 disabled:text-neutral-500 disabled:bg-transparent",
+    success: "text-emerald-600 bg-transparent hover:bg-emerald-50 active:bg-emerald-100 disabled:text-neutral-500 disabled:bg-transparent",
+    warning: "text-amber-600 bg-transparent hover:bg-amber-50 active:bg-amber-100 disabled:text-neutral-500 disabled:bg-transparent",
+    destructive: "text-destructive bg-transparent hover:bg-destructive/10 active:bg-destructive/20 disabled:text-neutral-500 disabled:bg-transparent",
+    neutral: "text-neutral-700 bg-transparent hover:bg-neutral-100 active:bg-neutral-200 disabled:text-neutral-500 disabled:bg-transparent"
+  }
+};
+var buttonBaseClasses = "inline-flex items-center justify-center gap-2 whitespace-nowrap font-regular transition-all duration-200 focus-visible:outline-none disabled:pointer-events-none disabled:cursor-not-allowed focus-visible:border-2 focus-visible:border-[--stroke-color-focus-border]";
+var buttonLoadingClasses = {
+  spinner: "animate-spin",
+  container: "flex items-center justify-center gap-2",
+  text: "opacity-70"
+};
+var getButtonSizeClasses = (size, isIcon) => {
+  return isIcon ? buttonSizeClasses[size].icon : buttonSizeClasses[size].base;
+};
+var getButtonVariantClasses = (variant, color) => {
+  var _a;
+  if (variant === "icon") {
+    return buttonVariantClasses.ghost[color];
+  }
+  return ((_a = buttonVariantClasses[variant]) == null ? void 0 : _a[color]) || "";
+};
+var getButtonIconSize = (size) => {
+  return buttonSizeClasses[size].iconSize;
+};
+var defaultButtonConfig = {
+  variant: "primary",
+  size: "md",
+  color: "primary",
+  type: "button"
+};
+var LoadingSpinner = ({
+  size,
+  className
+}) => {
+  const sizeClasses = {
+    sm: "w-4 h-4",
+    md: "w-5 h-5",
+    lg: "w-6 h-6"
+  };
+  return /* @__PURE__ */ jsx("div", { className: cn(buttonLoadingClasses.spinner, sizeClasses[size], className), children: /* @__PURE__ */ jsxs("svg", { fill: "none", viewBox: "0 0 24 24", className: "w-full h-full", children: [
+    /* @__PURE__ */ jsx(
+      "circle",
+      {
+        className: "opacity-25",
+        cx: "12",
+        cy: "12",
+        r: "10",
+        stroke: "currentColor"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        className: "opacity-75",
+        fill: "currentColor",
+        d: "m4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+      }
+    )
+  ] }) });
+};
+var Button = forwardRef((_a, ref) => {
+  var _b = _a, {
+    variant = defaultButtonConfig.variant,
+    size = defaultButtonConfig.size,
+    color = defaultButtonConfig.color,
+    disabled = false,
+    loading = false,
+    loadingText,
+    icon,
+    iconLeft,
+    iconRight,
+    className,
+    children,
+    type = defaultButtonConfig.type,
+    "aria-label": ariaLabel,
+    "aria-describedby": ariaDescribedBy,
+    asChild = false,
+    onClick
+  } = _b, props = __objRest(_b, [
+    "variant",
+    "size",
+    "color",
+    "disabled",
+    "loading",
+    "loadingText",
+    "icon",
+    "iconLeft",
+    "iconRight",
+    "className",
+    "children",
+    "type",
+    "aria-label",
+    "aria-describedby",
+    "asChild",
+    "onClick"
+  ]);
+  const isIconOnly = variant === "icon" || !!(!children && (icon || iconLeft || iconRight));
+  const buttonClasses = useMemo(() => {
+    const sizeClasses = getButtonSizeClasses(size, isIconOnly);
+    const variantClasses = getButtonVariantClasses(variant, color);
+    return cn(
+      buttonBaseClasses,
+      sizeClasses,
+      variantClasses,
+      className
+    );
+  }, [variant, size, color, isIconOnly, className]);
+  const buttonContent = useMemo(() => {
+    if (loading) {
+      return /* @__PURE__ */ jsxs("div", { className: buttonLoadingClasses.container, children: [
+        /* @__PURE__ */ jsx(LoadingSpinner, { size }),
+        loadingText && /* @__PURE__ */ jsx("span", { className: buttonLoadingClasses.text, children: loadingText })
+      ] });
+    }
+    const iconSizeClass = getButtonIconSize(size);
+    const renderIcon = (iconNode) => {
+      if (React2__default.isValidElement(iconNode)) {
+        return React2__default.cloneElement(iconNode, {
+          className: cn(iconSizeClass, iconNode.props.className),
+          "aria-hidden": true
+        });
+      }
+      return iconNode;
+    };
+    if (isIconOnly) {
+      return renderIcon(icon || iconLeft || iconRight);
+    }
+    return /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center justify-center gap-2", children: [
+      iconLeft && renderIcon(iconLeft),
+      children && /* @__PURE__ */ jsx("span", { children }),
+      iconRight && renderIcon(iconRight)
+    ] });
+  }, [loading, loadingText, isIconOnly, icon, iconLeft, iconRight, children, size]);
+  const accessibilityProps = useMemo(() => {
+    const props2 = {};
+    if (isIconOnly && !ariaLabel) {
+      console.warn("Icon-only buttons should have an aria-label for accessibility");
+    }
+    if (ariaLabel) {
+      props2["aria-label"] = ariaLabel;
+    }
+    if (ariaDescribedBy) {
+      props2["aria-describedby"] = ariaDescribedBy;
+    }
+    if (loading) {
+      props2["aria-busy"] = true;
+      props2["aria-disabled"] = true;
+    }
+    if (disabled || loading) {
+      props2["aria-disabled"] = true;
+    }
+    return props2;
+  }, [isIconOnly, ariaLabel, ariaDescribedBy, loading, disabled]);
+  const handleClick = (event) => {
+    if (disabled || loading) {
+      event.preventDefault();
+      return;
+    }
+    onClick == null ? void 0 : onClick(event);
+  };
+  if (asChild) {
+    return /* @__PURE__ */ jsx(
+      Slot,
+      __spreadProps(__spreadValues(__spreadValues({
+        ref,
+        className: buttonClasses
+      }, accessibilityProps), props), {
+        children
+      })
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "button",
+    __spreadProps(__spreadValues(__spreadValues({
+      ref,
+      type,
+      className: buttonClasses,
+      disabled: disabled || loading,
+      onClick: handleClick
+    }, accessibilityProps), props), {
+      children: [
+        loading && /* @__PURE__ */ jsxs(
+          "svg",
+          {
+            className: "animate-spin -ml-1 mr-3 h-5 w-5 text-white",
+            xmlns: "http://www.w3.org/2000/svg",
+            fill: "none",
+            viewBox: "0 0 24 24",
+            children: [
+              /* @__PURE__ */ jsx(
+                "circle",
+                {
+                  className: "opacity-25",
+                  cx: "12",
+                  cy: "12",
+                  r: "10",
+                  stroke: "currentColor"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "path",
+                {
+                  className: "opacity-75",
+                  fill: "currentColor",
+                  d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                }
+              )
+            ]
+          }
+        ),
+        loading && loadingText ? /* @__PURE__ */ jsx("span", { className: buttonLoadingClasses.text, children: loadingText }) : buttonContent
+      ]
+    })
+  );
+});
+Button.displayName = "Button";
+function CustomCaption() {
+  const { goToMonth, nextMonth, previousMonth, months } = useDayPicker();
+  const displayMonth = months[0];
+  return /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center w-full mb-4 px-1", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-1", children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          disabled: !previousMonth,
+          onClick: () => previousMonth && goToMonth(previousMonth),
+          className: "p-1 rounded-md hover:bg-accent",
+          children: /* @__PURE__ */ jsx(ChevronLeftIcon, { className: "h-4 w-4" })
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { className: "w-24 text-center text-sm font-medium", children: format(displayMonth.date, "MMMM", { locale: es }) }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          disabled: !nextMonth,
+          onClick: () => nextMonth && goToMonth(nextMonth),
+          className: "p-1 rounded-md hover:bg-accent",
+          children: /* @__PURE__ */ jsx(ChevronRightIcon, { className: "h-4 w-4" })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-1", children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => goToMonth(subYears(displayMonth.date, 1)),
+          className: "p-1 rounded-md hover:bg-accent",
+          children: /* @__PURE__ */ jsx(ChevronLeftIcon, { className: "h-4 w-4" })
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { className: "w-16 text-center text-sm font-medium", children: format(displayMonth.date, "yyyy", { locale: es }) }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => goToMonth(addYears(displayMonth.date, 1)),
+          className: "p-1 rounded-md hover:bg-accent",
+          children: /* @__PURE__ */ jsx(ChevronRightIcon, { className: "h-4 w-4" })
+        }
+      )
+    ] })
+  ] });
+}
+function Calendar(_a) {
+  var _b = _a, {
+    className,
+    classNames,
+    showOutsideDays = true
+  } = _b, props = __objRest(_b, [
+    "className",
+    "classNames",
+    "showOutsideDays"
+  ]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("style", { children: `
+        .day-range-start[aria-selected="true"] {
+          background-color: hsl(var(--primary)) !important;
+          color: #ffffff !important;
+          border-top-left-radius: 0.375rem;
+          border-bottom-left-radius: 0.375rem;
+        }
+        .day-range-start[aria-selected="true"] button {
+          color: #ffffff !important;
+        }
+        .day-range-end[aria-selected="true"] {
+          background-color: hsl(var(--primary)) !important;
+          color: #ffffff !important;
+          border-top-right-radius: 0.375rem;
+          border-bottom-right-radius: 0.375rem;
+        }
+        .day-range-end[aria-selected="true"] button {
+          color: #ffffff !important;
+        }
+        .day-range-middle[aria-selected="true"] {
+          background-color: #eeedf1 !important;
+          color: hsl(var(--primary-900)) !important;
+          border-radius: 0;
+        }
+      ` }),
+    /* @__PURE__ */ jsx(
+      DayPicker,
+      __spreadValues({
+        showOutsideDays,
+        className: cn("p-3", className),
+        classNames: __spreadValues({
+          months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
+          month: "space-y-4",
+          caption_label: "hidden",
+          nav: "hidden",
+          day_button: "relative flex size-9 items-center justify-center whitespace-nowrap rounded-md p-0 text-foreground transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 hover:bg-accent hover:text-accent-foreground",
+          day: "h-9 w-9 p-0 font-normal",
+          range_start: "day-range-start",
+          range_end: "day-range-end",
+          range_middle: "day-range-middle"
+        }, classNames),
+        components: {
+          MonthCaption: CustomCaption
+        }
+      }, props)
+    )
+  ] });
+}
+var DropdownMenu = DropdownMenuPrimitive.Root;
+var DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+var DropdownMenuPortal = DropdownMenuPrimitive.Portal;
+var DropdownMenuSubTrigger = React2.forwardRef((_a, ref) => {
+  var _b = _a, { className, inset, children } = _b, props = __objRest(_b, ["className", "inset", "children"]);
+  return /* @__PURE__ */ jsxs(
+    DropdownMenuPrimitive.SubTrigger,
+    __spreadProps(__spreadValues({
+      ref,
+      className: cn(
+        "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
+        inset && "pl-8",
+        className
+      )
+    }, props), {
+      children: [
+        children,
+        /* @__PURE__ */ jsx(ChevronRight, { className: "ml-auto h-4 w-4" })
+      ]
+    })
+  );
+});
+DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
+var DropdownMenuSubContent = React2.forwardRef((_a, ref) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsx(
+    DropdownMenuPrimitive.SubContent,
+    __spreadValues({
+      ref,
+      className: cn(
+        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg 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)
+  );
+});
+DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
+var DropdownMenuContent = React2.forwardRef((_a, ref) => {
+  var _b = _a, { className, sideOffset = 4 } = _b, props = __objRest(_b, ["className", "sideOffset"]);
+  return /* @__PURE__ */ jsx(DropdownMenuPortal, { children: /* @__PURE__ */ jsx(
+    DropdownMenuPrimitive.Content,
+    __spreadValues({
+      ref,
+      sideOffset,
+      className: cn(
+        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-background p-1 text-popover-foreground shadow-md",
+        "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)
+  ) });
+});
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
+var DropdownMenuItem = React2.forwardRef((_a, ref) => {
+  var _b = _a, { className, inset } = _b, props = __objRest(_b, ["className", "inset"]);
+  return /* @__PURE__ */ jsx(
+    DropdownMenuPrimitive.Item,
+    __spreadValues({
+      ref,
+      className: cn(
+        "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+        inset && "pl-8",
+        className
+      )
+    }, props)
+  );
+});
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
+var DropdownMenuCheckboxItem = React2.forwardRef((_a, ref) => {
+  var _b = _a, { className, children, checked } = _b, props = __objRest(_b, ["className", "children", "checked"]);
+  return /* @__PURE__ */ jsxs(
+    DropdownMenuPrimitive.CheckboxItem,
+    __spreadProps(__spreadValues({
+      ref,
+      className: cn(
+        "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+        className
+      ),
+      checked
+    }, props), {
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, { className: "h-4 w-4" }) }) }),
+        children
+      ]
+    })
+  );
+});
+DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
+var DropdownMenuRadioItem = React2.forwardRef((_a, ref) => {
+  var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
+  return /* @__PURE__ */ jsxs(
+    DropdownMenuPrimitive.RadioItem,
+    __spreadProps(__spreadValues({
+      ref,
+      className: cn(
+        "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+        className
+      )
+    }, props), {
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(Circle, { className: "h-2 w-2 fill-current" }) }) }),
+        children
+      ]
+    })
+  );
+});
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
+var DropdownMenuLabel = React2.forwardRef((_a, ref) => {
+  var _b = _a, { className, inset } = _b, props = __objRest(_b, ["className", "inset"]);
+  return /* @__PURE__ */ jsx(
+    DropdownMenuPrimitive.Label,
+    __spreadValues({
+      ref,
+      className: cn(
+        "px-2 py-1.5 text-sm font-semibold",
+        inset && "pl-8",
+        className
+      )
+    }, props)
+  );
+});
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
+var DropdownMenuSeparator = React2.forwardRef((_a, ref) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsx(
+    DropdownMenuPrimitive.Separator,
+    __spreadValues({
+      ref,
+      className: cn("-mx-1 my-1 h-px bg-muted", className)
+    }, props)
+  );
+});
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
+var Input = React2.forwardRef(
+  (_a, ref) => {
+    var _b = _a, { className, type, error, helperText, label, required, id, icon } = _b, props = __objRest(_b, ["className", "type", "error", "helperText", "label", "required", "id", "icon"]);
+    const inputId = id || `input-${React2.useId()}`;
+    return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+      label && /* @__PURE__ */ jsx(
+        "label",
+        {
+          htmlFor: inputId,
+          className: cn(
+            "text-body-xs font-normal leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+            required && "after:content-['*'] after:text-destructive after:ml-1"
+          ),
+          children: label
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+        icon && /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3", children: icon }),
+        /* @__PURE__ */ jsx(
+          "input",
+          __spreadValues({
+            id: inputId,
+            type,
+            className: cn(
+              "flex h-10 w-full rounded-lg border border-primary-300 bg-background py-2 pr-3",
+              "text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium",
+              "placeholder:text-muted-foreground focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50",
+              "focus-visible:shadow-focus active:shadow-pressed",
+              error && "border-destructive focus-visible:shadow-destructive",
+              icon ? "pl-10" : "pl-3",
+              className
+            ),
+            ref,
+            "aria-invalid": error ? "true" : "false",
+            "aria-describedby": error ? `${inputId}-error` : helperText ? `${inputId}-helper` : void 0
+          }, props)
+        )
+      ] }),
+      helperText && !error && /* @__PURE__ */ jsx("p", { id: `${inputId}-helper`, className: "text-body-xs text-muted-foreground", children: helperText }),
+      error && /* @__PURE__ */ jsx("p", { id: `${inputId}-error`, className: "text-body-xs text-destructive", children: typeof error === "string" ? error : "Este campo tiene errores" })
+    ] });
+  }
+);
+Input.displayName = "Input";
+function DatePickerWithRange({
+  className,
+  date,
+  onDateChange,
+  label
+}) {
+  const [month, setMonth] = React2.useState((date == null ? void 0 : date.from) || /* @__PURE__ */ new Date());
+  const [open, setOpen] = React2.useState(false);
+  const [inputValue, setInputValue] = React2.useState("");
+  React2.useEffect(() => {
+    if (date == null ? void 0 : date.from) {
+      if (date.to) {
+        setInputValue(
+          `${format(date.from, "dd/MM/yyyy")} - ${format(date.to, "dd/MM/yyyy")}`
+        );
+      } else {
+        setInputValue(format(date.from, "dd/MM/yyyy"));
+      }
+    } else {
+      setInputValue("");
+    }
+  }, [date]);
+  const handleInputChange = (e) => {
+    setInputValue(e.target.value);
+  };
+  const handleInputBlur = () => {
+    const parts = inputValue.split(" - ");
+    const from = new Date(parts[0]);
+    const to = parts[1] ? new Date(parts[1]) : from;
+    if (!isNaN(from.getTime())) {
+      onDateChange({ from, to: parts[1] ? to : void 0 });
+    }
+  };
+  const today = /* @__PURE__ */ new Date();
+  const presets = [
+    { label: "Hoy", range: { from: today, to: today } },
+    { label: "Ayer", range: { from: subDays(today, 1), to: subDays(today, 1) } },
+    { label: "La semana pasada", range: { from: subDays(today, 6), to: today } },
+    { label: "El mes pasado", range: { from: subDays(today, 29), to: today } },
+    {
+      label: "Este mes",
+      range: { from: startOfMonth(today), to: endOfMonth(today) }
+    },
+    {
+      label: "El mes anterior",
+      range: {
+        from: startOfMonth(subMonths(today, 1)),
+        to: endOfMonth(subMonths(today, 1))
+      }
+    },
+    { label: "Este a\xF1o", range: { from: startOfYear(today), to: endOfYear(today) } },
+    {
+      label: "El a\xF1o pasado",
+      range: {
+        from: startOfYear(subYears(today, 1)),
+        to: endOfYear(subYears(today, 1))
+      }
+    }
+  ];
+  const handlePresetClick = (range) => {
+    onDateChange(range);
+    setMonth(range.from || /* @__PURE__ */ new Date());
+  };
+  const isCustomDate = React2.useMemo(() => {
+    if (!date || !date.from) return false;
+    return !presets.some(
+      (p) => isEqual(p.range.from, date.from || /* @__PURE__ */ new Date(0)) && isEqual(p.range.to || /* @__PURE__ */ new Date(0), date.to || /* @__PURE__ */ new Date(0))
+    );
+  }, [date, presets]);
+  return /* @__PURE__ */ jsxs("div", { className: cn("grid gap-2", className), children: [
+    label && /* @__PURE__ */ jsx("label", { className: "text-body-xs font-normal text-neutral-900", children: label }),
+    /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          type: "text",
+          value: inputValue,
+          onChange: handleInputChange,
+          onBlur: handleInputBlur,
+          placeholder: "dd/mm/aa - dd/mm/aa",
+          className: "w-[300px] placeholder:text-primary-500"
+        }
+      ),
+      /* @__PURE__ */ jsxs(DropdownMenu, { open, onOpenChange: setOpen, children: [
+        /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => setOpen(true),
+            className: "absolute right-3 top-1/2 -translate-y-1/2",
+            children: /* @__PURE__ */ jsx(CalendarIcon, { className: "h-4 w-4 text-neutral-600" })
+          }
+        ) }),
+        /* @__PURE__ */ jsx(DropdownMenuContent, { className: "w-auto p-0", align: "end", children: /* @__PURE__ */ jsxs("div", { className: "flex rounded-lg border border-neutral-200 bg-white shadow-lg", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col space-y-1 border-r border-neutral-200 p-2 bg-neutral-50", children: [
+            presets.map((preset) => {
+              const isSelected = (date == null ? void 0 : date.from) && (date == null ? void 0 : date.to) && isEqual(preset.range.from, date.from) && isEqual(preset.range.to, date.to);
+              return /* @__PURE__ */ jsx(
+                Button,
+                {
+                  variant: isSelected ? "primary" : "ghost",
+                  size: "sm",
+                  onClick: () => handlePresetClick(preset.range),
+                  className: "w-full justify-start",
+                  children: preset.label
+                },
+                preset.label
+              );
+            }),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: isCustomDate ? "primary" : "ghost",
+                size: "sm",
+                className: "w-full justify-start",
+                onClick: () => {
+                },
+                children: "Personalizado"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx(
+            Calendar,
+            {
+              initialFocus: true,
+              mode: "range",
+              defaultMonth: date == null ? void 0 : date.from,
+              selected: date,
+              onSelect: onDateChange,
+              numberOfMonths: 1,
+              month,
+              onMonthChange: setMonth,
+              className: "border-none"
+            }
+          )
+        ] }) })
+      ] })
+    ] })
+  ] });
+}
+
+export { DatePickerWithRange };