@avenue-ticketing/ui 0.12.0-beta.7 → 0.12.0-beta.8

package/dist/react/date-picker.js

@@ -0,0 +1,879 @@
+import { createContext, useMemo, useState, useEffect, isValidElement, useContext, Fragment as Fragment$1, useLayoutEffect } from 'react';
+import { today, getLocalTimeZone, getDayOfWeek, isToday } from '@internationalized/date';
+import { useControlledState } from '@react-stately/utils';
+import { CalendarBlankIcon } from '@phosphor-icons/react/dist/csr/CalendarBlank';
+import { useDateFormatter } from 'react-aria';
+import { DatePicker as DatePicker$1, Group, Dialog, Link, Button as Button$1, OverlayTriggerStateContext, Popover, useSlottedContext, CalendarContext, Calendar as Calendar$1, Heading, CalendarGrid, CalendarGridHeader, CalendarHeaderCell, CalendarGridBody, DateInput, DateSegment, useLocale, RangeCalendarContext, CalendarCell as CalendarCell$1, TooltipTrigger as TooltipTrigger$1, Tooltip as Tooltip$1, OverlayArrow } from 'react-aria-components';
+import { extendTailwindMerge } from 'tailwind-merge';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { CaretLeftIcon } from '@phosphor-icons/react/dist/csr/CaretLeft';
+import { CaretRightIcon } from '@phosphor-icons/react/dist/csr/CaretRight';
+import { QuestionIcon } from '@phosphor-icons/react/dist/csr/Question';
+import { InfoIcon } from '@phosphor-icons/react/dist/csr/Info';
+import '@phosphor-icons/react/dist/csr/Eye';
+import '@phosphor-icons/react/dist/csr/EyeSlash';
+import { XIcon } from '@phosphor-icons/react/dist/csr/X';
+
+var twMerge = extendTailwindMerge({
+  extend: {
+    theme: {
+      text: ["display-xs", "display-sm", "display-md", "display-lg", "display-xl", "display-2xl"]
+    }
+  }
+});
+var cx = twMerge;
+function sortCx(classes) {
+  return classes;
+}
+
+// ../../utils/is-react-component.ts
+var isFunctionComponent = (component) => {
+  return typeof component === "function";
+};
+var isClassComponent = (component) => {
+  return typeof component === "function" && component.prototype && (!!component.prototype.isReactComponent || !!component.prototype.render);
+};
+var isForwardRefComponent = (component) => {
+  return typeof component === "object" && component !== null && component.$$typeof.toString() === "Symbol(react.forward_ref)";
+};
+var isReactComponent = (component) => {
+  return isFunctionComponent(component) || isForwardRefComponent(component) || isClassComponent(component);
+};
+var focusShadowPlain = "focus-visible:outline-none focus-visible:[box-shadow:0px_0px_0px_2px_var(--color-bg-primary),0px_0px_0px_4px_var(--color-focus-ring)]";
+var focusShadowSkeuomorphic = "focus-visible:outline-none focus-visible:[box-shadow:var(--shadow-xs-skeuomorphic),0px_0px_0px_2px_var(--color-bg-primary),0px_0px_0px_4px_var(--color-focus-ring)]";
+var skeuomorphicGradientBorderClass = [
+  "ring-1 ring-inset ring-transparent",
+  "before:pointer-events-none before:absolute before:inset-px before:rounded-[inherit] before:border before:border-[#ffffff1f] before:content-['']",
+  "before:[mask-image:linear-gradient(to_bottom,#000,transparent)]"
+].join(" ");
+var skeuomorphicShadowClass = ["shadow-xs-skeuomorphic", focusShadowSkeuomorphic, "overflow-hidden"].join(" ");
+var focusShadowSecondary = "focus-visible:outline-none focus-visible:[box-shadow:0px_1px_2px_0px_rgba(0,0,0,0.05),0px_0px_0px_2px_var(--color-bg-primary),0px_0px_0px_4px_var(--color-focus-ring)]";
+var secondaryInnerShadow = "after:pointer-events-none after:absolute after:inset-0 after:rounded-[inherit] after:content-[''] after:[box-shadow:inset_0px_-1px_0px_0px_rgba(0,0,0,0.05)]";
+var secondaryShadowClass = ["relative overflow-hidden shadow-xs", secondaryInnerShadow, focusShadowSecondary].join(" ");
+var inputNumberButtonClass = [
+  "in-data-number-input:border-0 in-data-number-input:shadow-none in-data-number-input:!rounded-none in-data-number-input:!h-full in-data-number-input:!min-h-0 in-data-number-input:self-stretch in-data-number-input:overflow-hidden",
+  "in-data-number-input:before:hidden in-data-number-input:after:hidden",
+  "in-data-number-input:focus-visible:outline-none in-data-number-input:focus-visible:shadow-none in-data-number-input:focus-visible:ring-0 in-data-number-input:focus-visible:![box-shadow:none]"
+].join(" ");
+var inputAddonButtonClass = [
+  "in-data-input-wrapper:border-0 in-data-input-wrapper:shadow-none in-data-input-wrapper:!rounded-none in-data-input-wrapper:overflow-hidden",
+  "in-data-input-wrapper:in-data-trailing:border-l in-data-input-wrapper:in-data-trailing:border-solid in-data-input-wrapper:in-data-trailing:border-primary",
+  "in-data-input-wrapper:in-data-leading:border-r in-data-input-wrapper:in-data-leading:border-solid in-data-input-wrapper:in-data-leading:border-primary",
+  "in-data-input-wrapper:group-invalid:in-data-trailing:border-error_subtle in-data-input-wrapper:group-invalid:in-data-leading:border-error_subtle",
+  "in-data-input-wrapper:before:hidden in-data-input-wrapper:after:hidden",
+  "in-data-input-wrapper:focus-visible:outline-none in-data-input-wrapper:focus-visible:shadow-none in-data-input-wrapper:focus-visible:ring-0 in-data-input-wrapper:focus-visible:![box-shadow:none]"
+].join(" ");
+var styles = sortCx({
+  common: {
+    root: [
+      "group relative inline-flex shrink-0 cursor-pointer items-center justify-center whitespace-nowrap rounded-full font-body outline-none before:absolute",
+      "font-semibold transition-[color,background-color,border-color,box-shadow,opacity,transform] duration-150 ease-out",
+      "pressed:scale-[0.985] pressed:duration-100 pressed:ease-linear motion-reduce:pressed:scale-100",
+      "disabled:pointer-events-none disabled:cursor-not-allowed in-data-input-wrapper:disabled:opacity-100",
+      inputAddonButtonClass,
+      inputNumberButtonClass,
+      // Stretch to InputGroup row height; padding/typography follow `data-input-size` on the field (Figma 85:1269).
+      "in-data-input-wrapper:!h-full in-data-input-wrapper:!min-h-0 in-data-input-wrapper:self-stretch",
+      "in-data-input-wrapper:in-data-[input-size=sm]:gap-1 in-data-input-wrapper:in-data-[input-size=sm]:px-3 in-data-input-wrapper:in-data-[input-size=sm]:py-2 in-data-input-wrapper:in-data-[input-size=sm]:text-sm",
+      "in-data-input-wrapper:in-data-[input-size=md]:gap-1 in-data-input-wrapper:in-data-[input-size=md]:px-3.5 in-data-input-wrapper:in-data-[input-size=md]:py-2.5 in-data-input-wrapper:in-data-[input-size=md]:text-sm",
+      "in-data-input-wrapper:in-data-[input-size=lg]:gap-1.5 in-data-input-wrapper:in-data-[input-size=lg]:px-4 in-data-input-wrapper:in-data-[input-size=lg]:py-2.5 in-data-input-wrapper:in-data-[input-size=lg]:text-md",
+      "*:data-icon:pointer-events-none *:data-icon:shrink-0 *:data-icon:transition-inherit-all"
+    ].join(" "),
+    icon: "pointer-events-none shrink-0 transition-inherit-all"
+  },
+  sizes: {
+    xs: {
+      root: [
+        "h-8 min-h-8 gap-1 px-[0.625rem] py-1.5 text-sm data-icon-only:size-8 data-icon-only:min-h-8 data-icon-only:min-w-8 data-icon-only:p-2",
+        "in-data-input-wrapper:data-icon-only:p-2.5",
+        "*:data-icon:size-4"
+      ].join(" "),
+      linkRoot: "h-auto min-h-0 gap-1 px-0! py-0! text-sm *:data-text:underline-offset-3"
+    },
+    sm: {
+      root: [
+        "h-9 min-h-9 gap-1 px-3 py-2 text-sm data-icon-only:size-9 data-icon-only:min-h-9 data-icon-only:min-w-9 data-icon-only:p-2",
+        "in-data-input-wrapper:data-icon-only:p-2.5",
+        "*:data-icon:size-5"
+      ].join(" "),
+      linkRoot: "h-auto min-h-0 gap-1 px-0! py-0! text-sm *:data-text:underline-offset-3"
+    },
+    md: {
+      root: [
+        "h-10 min-h-10 gap-1 px-3.5 py-2.5 text-sm data-icon-only:size-10 data-icon-only:min-h-10 data-icon-only:min-w-10 data-icon-only:p-2.5",
+        "in-data-input-wrapper:data-icon-only:p-3",
+        "*:data-icon:size-5"
+      ].join(" "),
+      linkRoot: "h-auto min-h-0 gap-1 px-0! py-0! text-sm *:data-text:underline-offset-4"
+    },
+    lg: {
+      root: "h-11 min-h-11 gap-1.5 px-4 py-2.5 text-md data-icon-only:size-11 data-icon-only:min-h-11 data-icon-only:min-w-11 data-icon-only:p-3 *:data-icon:size-5",
+      linkRoot: "h-auto min-h-0 gap-1.5 px-0! py-0! text-md *:data-text:underline-offset-4"
+    },
+    xl: {
+      root: "h-12 min-h-12 gap-1.5 px-[1.125rem] py-3 text-md data-icon-only:size-12 data-icon-only:min-h-12 data-icon-only:min-w-12 data-icon-only:p-3 data-icon-only:*:data-icon:size-6 *:data-icon:size-5",
+      linkRoot: "h-auto min-h-0 gap-1.5 px-0! py-0! text-md *:data-text:underline-offset-4"
+    }
+  },
+  colors: {
+    /** Figma Hierarchy=Primary — dark neutral solid; hover lightens to fg-tertiary_hover (#404040). */
+    primary: {
+      root: [
+        "bg-primary-solid text-white",
+        skeuomorphicShadowClass,
+        skeuomorphicGradientBorderClass,
+        "hover:bg-fg-tertiary_hover dark:hover:bg-quaternary",
+        "disabled:opacity-30",
+        "data-loading:bg-fg-tertiary_hover dark:data-loading:bg-quaternary",
+        "*:data-icon:not([data-icon=loading]):text-white/70"
+      ].join(" ")
+    },
+    /** Figma Hierarchy=Brand — purple solid; hover darkens to bg-brand-solid_hover (#6d28d9). */
+    brand: {
+      root: [
+        "bg-brand-solid text-primary_on-brand",
+        skeuomorphicShadowClass,
+        skeuomorphicGradientBorderClass,
+        "hover:bg-brand-solid_hover",
+        "disabled:opacity-50",
+        "data-loading:bg-brand-solid_hover",
+        "*:data-icon:not([data-icon=loading]):text-primary_on-brand"
+      ].join(" ")
+    },
+    /** Figma Hierarchy=Secondary — border-primary + shadow-xs + skeuomorphic inner rim overlay. */
+    secondary: {
+      root: [
+        "border border-solid border-primary bg-primary text-secondary",
+        secondaryShadowClass,
+        "hover:bg-primary_hover hover:text-secondary_hover",
+        "disabled:opacity-50",
+        "data-loading:bg-primary_hover",
+        "*:data-icon:text-fg-secondary"
+      ].join(" ")
+    },
+    /** Figma Hierarchy=Tertiary */
+    tertiary: {
+      root: [
+        "border border-transparent bg-transparent text-tertiary",
+        focusShadowPlain,
+        "hover:bg-primary_hover hover:text-tertiary_hover",
+        "disabled:opacity-50",
+        "*:data-icon:text-fg-tertiary"
+      ].join(" ")
+    },
+    /** Figma Hierarchy=Link color — text + icons share brand-secondary; hover underlines with fg-brand-secondary. */
+    "link-color": {
+      root: [
+        "h-auto min-h-0 border-0 bg-transparent px-0! py-0! text-brand-secondary shadow-none",
+        focusShadowPlain,
+        "hover:text-brand-secondary_hover",
+        "disabled:opacity-50",
+        "*:data-text:underline *:data-text:decoration-transparent *:data-text:decoration-solid hover:*:data-text:decoration-fg-brand-secondary"
+      ].join(" ")
+    },
+    /** Figma Hierarchy=Link gray — text + icons share tertiary; hover underlines with fg-quaternary. */
+    "link-gray": {
+      root: [
+        "h-auto min-h-0 border-0 bg-transparent px-0! py-0! text-tertiary shadow-none",
+        focusShadowPlain,
+        "hover:text-tertiary_hover",
+        "disabled:opacity-50",
+        "*:data-text:underline *:data-text:decoration-transparent *:data-text:decoration-solid hover:*:data-text:decoration-fg-quaternary"
+      ].join(" ")
+    },
+    "primary-destructive": {
+      root: [
+        "bg-error-solid text-white",
+        skeuomorphicShadowClass,
+        skeuomorphicGradientBorderClass,
+        "hover:bg-error-solid_hover",
+        "disabled:opacity-50",
+        "data-loading:bg-error-solid_hover",
+        "*:data-icon:not([data-icon=loading]):text-white/70"
+      ].join(" ")
+    },
+    "secondary-destructive": {
+      root: [
+        "border border-solid border-primary bg-primary text-error-primary",
+        secondaryShadowClass,
+        "hover:bg-error-primary hover:text-error-primary_hover",
+        "disabled:opacity-50",
+        "data-loading:bg-error-primary",
+        "*:data-icon:text-fg-error-secondary hover:*:data-icon:text-fg-error-primary"
+      ].join(" ")
+    },
+    "tertiary-destructive": {
+      root: [
+        "border border-transparent bg-transparent text-error-primary",
+        focusShadowPlain,
+        "hover:bg-error-primary hover:text-error-primary_hover",
+        "disabled:opacity-50",
+        "*:data-icon:text-fg-error-secondary hover:*:data-icon:text-fg-error-primary"
+      ].join(" ")
+    },
+    /** Figma Hierarchy=Link (destructive) — text + icons share error-primary; hover underlines. */
+    "link-destructive": {
+      root: [
+        "h-auto min-h-0 border-0 bg-transparent px-0! py-0! text-error-primary shadow-none",
+        focusShadowPlain,
+        "hover:text-error-primary_hover",
+        "disabled:opacity-50",
+        "*:data-text:underline *:data-text:decoration-transparent *:data-text:decoration-solid hover:*:data-text:decoration-current"
+      ].join(" ")
+    }
+  }
+});
+var Button = ({
+  size = "md",
+  color = "primary",
+  children,
+  className,
+  noTextPadding,
+  iconLeading: IconLeading,
+  iconTrailing: IconTrailing,
+  isDisabled: disabled,
+  isLoading: loading,
+  showTextWhileLoading,
+  ...props
+}) => {
+  const href = "href" in props ? props.href : void 0;
+  const isIcon = (IconLeading || IconTrailing) && !children;
+  const isLinkType = ["link-gray", "link-color", "link-destructive"].includes(color);
+  noTextPadding = isLinkType || noTextPadding;
+  const commonChildren = /* @__PURE__ */ jsxs(Fragment, { children: [
+    isValidElement(IconLeading) && IconLeading,
+    isReactComponent(IconLeading) && /* @__PURE__ */ jsx(IconLeading, { "data-icon": "leading", className: styles.common.icon }),
+    loading && /* @__PURE__ */ jsx(
+      "svg",
+      {
+        fill: "none",
+        "data-icon": "loading",
+        viewBox: "0 0 256 256",
+        "aria-hidden": true,
+        className: cx(
+          styles.common.icon,
+          "size-5 animate-spin",
+          !showTextWhileLoading && "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"
+        ),
+        children: /* @__PURE__ */ jsx(
+          "path",
+          {
+            fill: "currentColor",
+            d: "M232,128a104,104,0,0,1-208,0c0-41,23.81-78.36,60.66-95.27a8,8,0,0,1,6.68,14.54C60,61.46,40,93.27,40,128a88,88,0,0,0,176,0c0-34.73-20-66.54-51.34-80.73a8,8,0,0,1,6.68-14.54C208.19,49.64,232,87,232,128Z"
+          }
+        )
+      }
+    ),
+    children && /* @__PURE__ */ jsx("span", { "data-text": true, className: cx("transition-inherit-all", !noTextPadding && !isLinkType && "px-0.5"), children }),
+    isValidElement(IconTrailing) && IconTrailing,
+    isReactComponent(IconTrailing) && /* @__PURE__ */ jsx(IconTrailing, { "data-icon": "trailing", className: styles.common.icon })
+  ] });
+  const commonProps = {
+    "data-icon-only": isIcon ? true : void 0,
+    "data-loading": loading ? true : void 0,
+    ...props,
+    isDisabled: disabled || loading,
+    className: cx(
+      styles.common.root,
+      styles.sizes[size].root,
+      styles.colors[color].root,
+      isLinkType && styles.sizes[size].linkRoot,
+      (loading || href && (disabled || loading)) && "pointer-events-none",
+      loading && (showTextWhileLoading ? "[&>*:not([data-icon=loading]):not([data-text])]:hidden" : "[&>*:not([data-icon=loading])]:invisible"),
+      className
+    ),
+    children: commonChildren
+  };
+  if ("href" in commonProps) {
+    return /* @__PURE__ */ jsx(Link, { ...commonProps, href: disabled || loading ? void 0 : href });
+  }
+  return /* @__PURE__ */ jsx(Button$1, { ...commonProps, type: commonProps.type || "button", isPending: loading });
+};
+var MOBILE_SHEET_MAX_PX = 1024;
+function useIsMobile(breakpoint = MOBILE_SHEET_MAX_PX + 1) {
+  const [isMobile, setIsMobile] = useState(() => {
+    if (typeof window === "undefined") return false;
+    return window.matchMedia(`(max-width: ${breakpoint - 1}px)`).matches;
+  });
+  useEffect(() => {
+    const mq = window.matchMedia(`(max-width: ${breakpoint - 1}px)`);
+    const handler = (e) => setIsMobile(e.matches);
+    mq.addEventListener("change", handler);
+    return () => mq.removeEventListener("change", handler);
+  }, [breakpoint]);
+  return isMobile;
+}
+var Tooltip = ({
+  title,
+  description,
+  children,
+  arrow = false,
+  delay = 100,
+  closeDelay = 0,
+  trigger,
+  isDisabled,
+  isOpen,
+  defaultOpen,
+  offset = 6,
+  crossOffset,
+  placement = "top",
+  onOpenChange,
+  ...tooltipProps
+}) => {
+  const isTopOrBottomLeft = ["top left", "top end", "bottom left", "bottom end"].includes(placement);
+  const isTopOrBottomRight = ["top right", "top start", "bottom right", "bottom start"].includes(placement);
+  const calculatedCrossOffset = isTopOrBottomLeft ? -12 : isTopOrBottomRight ? 12 : 0;
+  return /* @__PURE__ */ jsxs(TooltipTrigger$1, { ...{ trigger, delay, closeDelay, isDisabled, isOpen, defaultOpen, onOpenChange }, children: [
+    children,
+    /* @__PURE__ */ jsx(
+      Tooltip$1,
+      {
+        ...tooltipProps,
+        offset,
+        placement,
+        crossOffset: crossOffset ?? calculatedCrossOffset,
+        className: ({ isEntering, isExiting }) => cx(isEntering && "ease-out animate-in", isExiting && "ease-in animate-out"),
+        children: ({ isEntering, isExiting }) => /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cx(
+              "z-50 flex max-w-xs origin-(--trigger-anchor-point) flex-col items-start gap-1 rounded-lg bg-primary-solid px-3 shadow-lg will-change-transform",
+              description ? "py-3" : "py-2",
+              isEntering && "ease-out animate-in fade-in zoom-in-95 in-placement-left:slide-in-from-right-0.5 in-placement-right:slide-in-from-left-0.5 in-placement-top:slide-in-from-bottom-0.5 in-placement-bottom:slide-in-from-top-0.5",
+              isExiting && "ease-in animate-out fade-out zoom-out-95 in-placement-left:slide-out-to-right-0.5 in-placement-right:slide-out-to-left-0.5 in-placement-top:slide-out-to-bottom-0.5 in-placement-bottom:slide-out-to-top-0.5"
+            ),
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "text-xs font-semibold text-white", children: title }),
+              description && /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-tooltip-supporting-text", children: description }),
+              arrow && /* @__PURE__ */ jsx(OverlayArrow, { children: /* @__PURE__ */ jsx(
+                "svg",
+                {
+                  viewBox: "0 0 100 100",
+                  className: "size-2.5 fill-bg-primary-solid in-placement-left:-rotate-90 in-placement-right:rotate-90 in-placement-top:rotate-0 in-placement-bottom:rotate-180",
+                  children: /* @__PURE__ */ jsx("path", { d: "M0,0 L35.858,35.858 Q50,50 64.142,35.858 L100,0 Z" })
+                }
+              ) })
+            ]
+          }
+        )
+      }
+    )
+  ] });
+};
+var TooltipTrigger = ({ children, className, ...buttonProps }) => {
+  return /* @__PURE__ */ jsx(Button$1, { ...buttonProps, className: (values) => cx("h-max w-max outline-hidden", typeof className === "function" ? className(values) : className), children });
+};
+var inputFocusRingShadow = "border-brand ring-1 ring-inset ring-brand";
+var inputErrorFocusRingShadow = "border-error ring-1 ring-inset ring-error";
+createContext({});
+var DateFieldContext = createContext({});
+var InputDateBase = ({
+  tooltip,
+  shortcut,
+  groupRef,
+  size = "md",
+  isInvalid,
+  isDisabled,
+  icon: Icon,
+  wrapperClassName,
+  tooltipClassName,
+  iconClassName,
+  ...inputProps
+}) => {
+  const hasTrailingIcon = tooltip || isInvalid;
+  const hasLeadingIcon = Icon;
+  const context = useContext(DateFieldContext);
+  const inputSize = context?.size || size;
+  const sizes = sortCx({
+    sm: {
+      root: cx("px-3 py-2 text-sm", hasTrailingIcon && "pr-9", hasLeadingIcon && "pl-8.5"),
+      iconLeading: "left-3 size-4 stroke-[2.25px]",
+      iconTrailing: "right-3",
+      shortcut: "pr-2.5"
+    },
+    md: {
+      root: cx("px-3 py-2 text-md", hasTrailingIcon && "pr-9", hasLeadingIcon && "pl-10"),
+      iconLeading: "left-3 size-5",
+      iconTrailing: "right-3",
+      shortcut: "pr-2.5"
+    },
+    lg: {
+      root: cx("px-3.5 py-2.5 text-md", hasTrailingIcon && "pr-9.5", hasLeadingIcon && "pl-10.5"),
+      iconLeading: "left-3.5 size-5",
+      iconTrailing: "right-3.5",
+      shortcut: "pr-3"
+    }
+  });
+  return /* @__PURE__ */ jsxs(
+    Group,
+    {
+      ...{ isDisabled, isInvalid },
+      ref: groupRef,
+      className: ({ isFocusWithin, isDisabled: isDisabled2, isInvalid: isInvalid2 }) => cx(
+        "group/input relative flex w-full flex-row place-content-center place-items-center rounded-lg border border-solid border-primary bg-primary shadow-xs transition-[border-color,box-shadow] duration-100 ease-linear",
+        isFocusWithin && !isDisabled2 && !isInvalid2 && inputFocusRingShadow,
+        // Disabled state styles
+        isDisabled2 && "cursor-not-allowed opacity-50 in-data-input-wrapper:opacity-100",
+        "group-disabled:cursor-not-allowed group-disabled:opacity-50 in-data-input-wrapper:group-disabled:opacity-100",
+        // Invalid state styles
+        isInvalid2 && !isFocusWithin && "border-error_subtle",
+        "group-invalid:border-error_subtle",
+        "group-invalid:focus-within:border-error group-invalid:focus-within:ring-1 group-invalid:focus-within:ring-inset group-invalid:focus-within:ring-error",
+        isInvalid2 && isFocusWithin && inputErrorFocusRingShadow,
+        context?.wrapperClassName,
+        wrapperClassName
+      ),
+      children: [
+        Icon && /* @__PURE__ */ jsx(Icon, { className: cx("pointer-events-none absolute text-fg-quaternary", sizes[inputSize].iconLeading, context?.iconClassName, iconClassName) }),
+        /* @__PURE__ */ jsx(DateInput, { ...inputProps, className: cx("flex w-full", sizes[size].root, typeof inputProps.className === "string" && inputProps.className), children: (segment) => /* @__PURE__ */ jsx(
+          DateSegment,
+          {
+            segment,
+            className: cx(
+              "rounded px-0.5 text-primary tabular-nums caret-transparent focus:bg-brand-solid focus:font-medium focus:text-white focus:outline-hidden",
+              // The placeholder segment.
+              segment.isPlaceholder && "text-placeholder uppercase",
+              // The separator "/" segment.
+              segment.type === "literal" && "text-fg-quaternary"
+            )
+          }
+        ) }),
+        tooltip && /* @__PURE__ */ jsx(Tooltip, { title: tooltip, placement: "top", children: /* @__PURE__ */ jsx(
+          TooltipTrigger,
+          {
+            className: cx(
+              "absolute cursor-pointer text-fg-quaternary transition duration-200 group-invalid/input:hidden hover:text-fg-quaternary_hover focus:text-fg-quaternary_hover",
+              sizes[inputSize].iconTrailing,
+              context?.tooltipClassName,
+              tooltipClassName
+            ),
+            children: /* @__PURE__ */ jsx(QuestionIcon, { className: "size-4 stroke-[2.25px]" })
+          }
+        ) }),
+        /* @__PURE__ */ jsx(
+          InfoIcon,
+          {
+            className: cx(
+              "pointer-events-none absolute hidden size-4 stroke-[2.25px] text-fg-error-secondary group-invalid/input:block",
+              sizes[inputSize].iconTrailing,
+              context?.tooltipClassName,
+              tooltipClassName
+            )
+          }
+        ),
+        shortcut && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cx(
+              "pointer-events-none absolute inset-y-0.5 right-0.5 z-10 flex items-center rounded-r-[inherit] bg-linear-to-r from-transparent to-bg-primary to-40% pl-8",
+              sizes[inputSize].shortcut
+            ),
+            children: /* @__PURE__ */ jsx(
+              "span",
+              {
+                "aria-hidden": "true",
+                className: "pointer-events-none rounded px-1 py-px text-xs font-medium text-quaternary ring-1 ring-secondary select-none ring-inset",
+                children: typeof shortcut === "string" ? shortcut : "\u2318K"
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+};
+var CalendarCell = ({ date, isHighlighted, showOutOfRangeDates = false, fluid = false, ...props }) => {
+  const { locale } = useLocale();
+  const dayOfWeek = getDayOfWeek(date, locale);
+  const rangeCalendarContext = useSlottedContext(RangeCalendarContext);
+  const isRangeCalendar = !!rangeCalendarContext;
+  const start = rangeCalendarContext?.value?.start;
+  const end = rangeCalendarContext?.value?.end;
+  const isAfterStart = start ? date.compare(start) > 0 : true;
+  const isBeforeEnd = end ? date.compare(end) < 0 : true;
+  const isAfterOrOnStart = start && date.compare(start) >= 0;
+  const isBeforeOrOnEnd = end && date.compare(end) <= 0;
+  const isInRange = isAfterOrOnStart && isBeforeOrOnEnd;
+  const lastDayOfMonth = new Date(date.year, date.month, 0).getDate();
+  const isLastDayOfMonth = date.day === lastDayOfMonth;
+  const isFirstDayOfMonth = date.day === 1;
+  const isTodayDate = isToday(date, getLocalTimeZone());
+  return /* @__PURE__ */ jsx(
+    CalendarCell$1,
+    {
+      ...props,
+      date,
+      className: ({ isDisabled, isFocusVisible, isSelectionStart, isSelectionEnd, isSelected, isOutsideMonth }) => {
+        const isRoundedLeft = isSelectionStart || dayOfWeek === 0;
+        const isRoundedRight = isSelectionEnd || dayOfWeek === 6;
+        return cx(
+          "relative focus:outline-hidden",
+          fluid ? "aspect-square w-full" : "size-10",
+          isRoundedLeft && "rounded-l-full",
+          isRoundedRight && "rounded-r-full",
+          isInRange && isDisabled && "bg-secondary",
+          isSelected && isRangeCalendar && "bg-secondary",
+          isDisabled ? "pointer-events-none" : "cursor-pointer",
+          isFocusVisible ? "z-10" : "z-0",
+          isOutsideMonth && "opacity-50",
+          isRangeCalendar && isOutsideMonth && !showOutOfRangeDates && "hidden",
+          // Show gradient on last day of month if it's within the selected range.
+          isLastDayOfMonth && isSelected && isBeforeEnd && isRangeCalendar && "after:absolute after:inset-0 after:translate-x-full after:bg-gradient-to-l after:from-transparent after:to-bg-secondary in-[[role=gridcell]:last-child]:after:hidden",
+          // Show gradient on first day of month if it's within the selected range.
+          isFirstDayOfMonth && isSelected && isAfterStart && isRangeCalendar && "after:absolute after:inset-0 after:-translate-x-full after:bg-gradient-to-r after:from-transparent after:to-bg-secondary in-[[role=gridcell]:first-child]:after:hidden"
+        );
+      },
+      children: ({ isDisabled, isFocusVisible, isSelectionStart, isSelectionEnd, isSelected, formattedDate }) => {
+        const markedAsSelected = isSelectionStart || isSelectionEnd || isSelected && !isDisabled && !isRangeCalendar;
+        return /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cx(
+              "relative flex size-full items-center justify-center rounded-full text-sm text-secondary hover:text-secondary_hover",
+              // Disabled state.
+              isDisabled && "text-secondary/50",
+              // Focus ring, visible while the cell has keyboard focus.
+              isFocusVisible ? "outline-2 outline-offset-2 outline-focus-ring" : "",
+              // Hover state for cells in the middle of the range.
+              isSelected && !isDisabled && isRangeCalendar ? "font-medium" : "",
+              markedAsSelected && "bg-brand-solid font-medium text-white hover:bg-brand-solid_hover hover:text-white",
+              // Hover state for non-selected cells.
+              !isSelected && !isDisabled ? "hover:bg-primary_hover hover:font-medium!" : "",
+              !isSelected && isTodayDate ? "bg-secondary font-medium hover:bg-secondary_hover" : ""
+            ),
+            children: [
+              formattedDate,
+              (isHighlighted || isTodayDate) && /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: cx(
+                    "absolute bottom-1 left-1/2 size-1.25 -translate-x-1/2 rounded-full",
+                    markedAsSelected ? "bg-fg-white" : "bg-fg-brand-primary",
+                    isDisabled && "opacity-50"
+                  )
+                }
+              )
+            ]
+          }
+        );
+      }
+    }
+  );
+};
+var CalendarContextProvider = ({ children }) => {
+  const [value, setValue] = useState(null);
+  const [focusedValue, onFocusChange] = useState();
+  const onChange = (next) => {
+    if (Array.isArray(next)) return;
+    setValue(next);
+  };
+  return /* @__PURE__ */ jsx(CalendarContext.Provider, { value: { value, onChange, focusedValue, onFocusChange }, children });
+};
+var Calendar = ({ highlightedDates: highlightedDates2, fluid = false, className, children, ...props }) => {
+  const context = useSlottedContext(CalendarContext);
+  const ContextWrapper = context ? Fragment$1 : CalendarContextProvider;
+  return /* @__PURE__ */ jsx(ContextWrapper, { children: /* @__PURE__ */ jsx(
+    Calendar$1,
+    {
+      ...props,
+      className: (state) => cx("flex flex-col gap-3", fluid && "w-full", typeof className === "function" ? className(state) : className),
+      children: ({ state }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs("header", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ jsx(Button, { slot: "previous", iconLeading: CaretLeftIcon, size: "sm", color: "tertiary", className: "size-8" }),
+          /* @__PURE__ */ jsx(Heading, { className: "text-sm font-semibold text-fg-secondary" }),
+          /* @__PURE__ */ jsx(Button, { slot: "next", iconLeading: CaretRightIcon, size: "sm", color: "tertiary", className: "size-8" })
+        ] }),
+        children || /* @__PURE__ */ jsxs("div", { className: "flex gap-3", children: [
+          /* @__PURE__ */ jsx(InputDateBase, { "aria-label": "Date", size: "sm", className: "flex-1" }),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              slot: null,
+              size: "sm",
+              color: "secondary",
+              onClick: () => {
+                state.setValue(today(getLocalTimeZone()));
+                state.setFocusedDate(today(getLocalTimeZone()));
+              },
+              children: "Today"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs(CalendarGrid, { weekdayStyle: "short", className: cx(fluid ? "w-full table-fixed" : "w-max"), children: [
+          /* @__PURE__ */ jsx(CalendarGridHeader, { className: "border-b-4 border-transparent", children: (day) => /* @__PURE__ */ jsx(CalendarHeaderCell, { className: "p-0", children: /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cx(
+                "flex items-center justify-center text-sm font-medium text-secondary",
+                fluid ? "h-10 w-full" : "size-10"
+              ),
+              children: day.slice(0, 2)
+            }
+          ) }) }),
+          /* @__PURE__ */ jsx(CalendarGridBody, { className: "[&_td]:p-0 [&_tr]:border-b-4 [&_tr]:border-transparent [&_tr:last-of-type]:border-none", children: (date) => /* @__PURE__ */ jsx(
+            CalendarCell,
+            {
+              date,
+              fluid,
+              isHighlighted: highlightedDates2?.some((highlightedDate) => date.compare(highlightedDate) === 0)
+            }
+          ) })
+        ] })
+      ] })
+    }
+  ) });
+};
+
+// ../../components/application/date-picker/date-picker-mobile-overlay.ts
+function resolveDatePickerMobileOptions(mobileOptions) {
+  return {
+    fullScreen: mobileOptions?.fullScreen ?? true,
+    title: mobileOptions?.title,
+    panelClassName: mobileOptions?.className,
+    contentClassName: mobileOptions?.contentClassName
+  };
+}
+var MOBILE_SHEET_MOTION_MS = 175;
+var MOBILE_SHEET_ENTRY_EASING = "cubic-bezier(0.85, 0, 0.15, 1)";
+var MOBILE_SHEET_EXIT_EASING = "cubic-bezier(0.85, 0, 1, 0.15)";
+var MOBILE_SHEET_SLIDE_ENTRANCE_OFFSET_PX = 120;
+function useMobileSheetAnimation(open, enabled, slideEntrance = true, slideOffsetPx = MOBILE_SHEET_SLIDE_ENTRANCE_OFFSET_PX) {
+  const [shouldRender, setShouldRender] = useState(open);
+  const [isAnimating, setIsAnimating] = useState(false);
+  useLayoutEffect(() => {
+    if (!enabled) {
+      setShouldRender(open);
+      return;
+    }
+    if (open) {
+      setShouldRender(true);
+    }
+  }, [open, enabled]);
+  useEffect(() => {
+    if (!enabled || open) return;
+    const timer = setTimeout(() => setShouldRender(false), MOBILE_SHEET_MOTION_MS);
+    return () => clearTimeout(timer);
+  }, [open, enabled]);
+  useLayoutEffect(() => {
+    if (!enabled || open || !shouldRender) return;
+    setIsAnimating(false);
+  }, [enabled, open, shouldRender]);
+  useEffect(() => {
+    if (!enabled || !shouldRender || !open) return;
+    let raf2 = 0;
+    const raf1 = requestAnimationFrame(() => {
+      raf2 = requestAnimationFrame(() => setIsAnimating(true));
+    });
+    return () => {
+      cancelAnimationFrame(raf1);
+      if (raf2) cancelAnimationFrame(raf2);
+    };
+  }, [shouldRender, open, enabled]);
+  const motionEasing = open ? MOBILE_SHEET_ENTRY_EASING : MOBILE_SHEET_EXIT_EASING;
+  const hiddenTransform = slideEntrance ? `translateY(${slideOffsetPx}px)` : "translateY(100%)";
+  const panelStyle = enabled ? {
+    transform: isAnimating ? "translateY(0)" : hiddenTransform,
+    opacity: isAnimating ? 1 : 0,
+    transitionProperty: "transform, opacity",
+    transitionDuration: `${MOBILE_SHEET_MOTION_MS}ms`,
+    transitionTimingFunction: motionEasing
+  } : void 0;
+  const backdropStyle = enabled ? {
+    opacity: isAnimating ? 1 : 0,
+    transitionProperty: "opacity",
+    transitionDuration: `${MOBILE_SHEET_MOTION_MS}ms`,
+    transitionTimingFunction: motionEasing
+  } : void 0;
+  return { shouldRender, isAnimating, panelStyle, backdropStyle };
+}
+function MobileFullScreenCloseButton({ onClose }) {
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      onClick: (e) => {
+        e.stopPropagation();
+        onClose();
+      },
+      className: "relative z-20 flex size-12 shrink-0 cursor-pointer items-center justify-center rounded-full bg-primary text-fg-primary transition duration-100 ease-linear hover:bg-primary_hover active:scale-[0.96] focus-visible:outline-none focus-visible:[box-shadow:0px_0px_0px_2px_var(--color-bg-primary),0px_0px_0px_4px_var(--color-focus-ring)]",
+      children: [
+        /* @__PURE__ */ jsx(XIcon, { className: "size-5", "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
+      ]
+    }
+  );
+}
+function MobileFullScreenChrome({
+  title,
+  contentClassName,
+  onClose,
+  children
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex min-h-0 flex-1 flex-col overflow-hidden", children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cx(
+          "flex w-full shrink-0 items-center py-2 pl-4 pr-2",
+          title ? "justify-between gap-3" : "justify-end"
+        ),
+        children: [
+          title ? /* @__PURE__ */ jsx("p", { className: "min-w-0 flex-1 truncate text-base font-semibold text-primary", children: title }) : null,
+          /* @__PURE__ */ jsx(MobileFullScreenCloseButton, { onClose })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: cx("flex min-h-0 w-full flex-1 flex-col overflow-x-hidden overflow-y-auto", contentClassName), children })
+  ] });
+}
+var DatePickerOverlay = ({ mobileOptions, children, className, style, offset, ...props }) => {
+  const isMobile = useIsMobile();
+  const resolvedMobile = useMemo(() => resolveDatePickerMobileOptions(mobileOptions), [mobileOptions]);
+  const useMobileFullScreen = isMobile && resolvedMobile.fullScreen;
+  const overlayState = useContext(OverlayTriggerStateContext);
+  const open = overlayState?.isOpen ?? false;
+  const { shouldRender, panelStyle } = useMobileSheetAnimation(open, useMobileFullScreen);
+  useEffect(() => {
+    if (!useMobileFullScreen || !open) return;
+    const prev = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = prev;
+    };
+  }, [useMobileFullScreen, open]);
+  const close = () => overlayState?.close();
+  const showMobileFullScreen = useMobileFullScreen && shouldRender;
+  const isMobileFullScreenExiting = showMobileFullScreen && !open;
+  return /* @__PURE__ */ jsx(
+    Popover,
+    {
+      placement: "bottom",
+      containerPadding: 0,
+      isNonModal: useMobileFullScreen,
+      ...props,
+      offset: useMobileFullScreen ? 0 : offset ?? 8,
+      isExiting: isMobileFullScreenExiting,
+      ...useMobileFullScreen ? { "data-date-picker-mobile-overlay": true } : {},
+      style: useMobileFullScreen ? void 0 : style,
+      className: (state) => cx(
+        "outline-hidden",
+        useMobileFullScreen && "pointer-events-none fixed! inset-0! z-50 size-full! max-w-none! border-0 bg-transparent shadow-none",
+        !useMobileFullScreen && (typeof className === "function" ? className(state) : className)
+      ),
+      children: (state) => {
+        const content = typeof children === "function" ? children(state) : children;
+        if (useMobileFullScreen) {
+          return /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: panelStyle,
+              className: cx(
+                "pointer-events-auto fixed inset-0 z-50 flex h-dvh min-h-dvh w-full will-change-transform flex-col overflow-hidden rounded-none border-0 bg-primary shadow-none",
+                resolvedMobile.panelClassName
+              ),
+              children: /* @__PURE__ */ jsx(
+                MobileFullScreenChrome,
+                {
+                  title: resolvedMobile.title,
+                  contentClassName: resolvedMobile.contentClassName,
+                  onClose: close,
+                  children: content
+                }
+              )
+            }
+          );
+        }
+        return content;
+      }
+    }
+  );
+};
+var highlightedDates = [today(getLocalTimeZone())];
+var DatePicker = ({
+  value: valueProp,
+  defaultValue,
+  onChange,
+  onApply,
+  onCancel,
+  size = "sm",
+  mobileOptions,
+  ...props
+}) => {
+  const isMobile = useIsMobile();
+  const resolvedMobile = useMemo(() => resolveDatePickerMobileOptions(mobileOptions), [mobileOptions]);
+  const useMobileFullScreen = isMobile && resolvedMobile.fullScreen;
+  const formatter = useDateFormatter({
+    month: "short",
+    day: "numeric",
+    year: "numeric"
+  });
+  const [value, setValue] = useControlledState(valueProp, defaultValue || null, onChange);
+  const formattedDate = value ? formatter.format(value.toDate(getLocalTimeZone())) : "Select date";
+  return /* @__PURE__ */ jsxs(DatePicker$1, { "aria-label": "Date picker", shouldCloseOnSelect: false, ...props, value, onChange: setValue, children: [
+    /* @__PURE__ */ jsx(Group, { children: /* @__PURE__ */ jsx(Button, { size, color: "secondary", iconLeading: CalendarBlankIcon, children: formattedDate }) }),
+    /* @__PURE__ */ jsx(
+      DatePickerOverlay,
+      {
+        placement: "bottom right",
+        offset: 8,
+        mobileOptions: { title: "Select date", ...mobileOptions },
+        className: ({ isEntering, isExiting }) => cx(
+          "origin-(--trigger-anchor-point) will-change-transform",
+          isEntering && "duration-150 ease-out animate-in fade-in placement-right:slide-in-from-left-0.5 placement-top:slide-in-from-bottom-0.5 placement-bottom:slide-in-from-top-0.5",
+          isExiting && "duration-100 ease-in animate-out fade-out placement-right:slide-out-to-left-0.5 placement-top:slide-out-to-bottom-0.5 placement-bottom:slide-out-to-top-0.5"
+        ),
+        children: /* @__PURE__ */ jsx(
+          Dialog,
+          {
+            "aria-label": "Date picker",
+            className: cx(
+              useMobileFullScreen ? "flex min-h-0 flex-1 flex-col overflow-hidden bg-primary outline-hidden" : "rounded-2xl bg-primary shadow-xl ring ring-secondary_alt"
+            ),
+            children: ({ close }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("div", { className: cx("flex", useMobileFullScreen ? "min-h-0 w-full flex-1 flex-col overflow-x-hidden overflow-y-auto px-4 pt-1 pb-4" : "px-6 py-5"), children: /* @__PURE__ */ jsx(Calendar, { fluid: useMobileFullScreen, highlightedDates }) }),
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: cx(
+                    "grid grid-cols-2 gap-3 border-t border-secondary p-4",
+                    useMobileFullScreen && "shrink-0 pb-[max(1rem,env(safe-area-inset-bottom))]"
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      Button,
+                      {
+                        size: "md",
+                        color: "secondary",
+                        onClick: () => {
+                          onCancel?.();
+                          close();
+                        },
+                        children: "Cancel"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      Button,
+                      {
+                        size: "md",
+                        color: "primary",
+                        onClick: () => {
+                          onApply?.();
+                          close();
+                        },
+                        children: "Apply"
+                      }
+                    )
+                  ]
+                }
+              )
+            ] })
+          }
+        )
+      }
+    )
+  ] });
+};
+
+export { DatePicker };
+//# sourceMappingURL=date-picker.js.map
+//# sourceMappingURL=date-picker.js.map