@vritti/quantum-ui 0.2.9 → 0.3.0

package/dist/DatePicker.js

@@ -1,29 +1,13 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import * as React from 'react';
-import React__default, { createContext, useContext, useCallback, useRef, useLayoutEffect, useState, useEffect, useMemo } from 'react';
+import React__default, { createContext, useContext, useCallback, useRef, useLayoutEffect, useState, useEffect, useMemo, forwardRef } from 'react';
 import { c as cn } from './utils.js';
 import { L as Label } from './Label.js';
-import { u as useControllableState, P as Primitive, a as composeEventHandlers, c as createSlot } from './index13.js';
-import { u as useComposedRefs } from './index5.js';
-import { c as createContextScope } from './index12.js';
-import { c as createPopperScope, R as Root2$1, u as useId, A as Anchor, P as Portal$1, h as hideOthers, b as ReactRemoveScroll, a as useFocusGuards, F as FocusScope, D as DismissableLayer, C as Content, d as Arrow } from './Combination.js';
-import { P as Presence } from './index4.js';
+import { P as Popover, a as PopoverTrigger, b as PopoverContent } from './popover.js';
 import { b as buttonVariants, B as Button$1 } from './Button2.js';
-import { C as ChevronDown } from './chevron-down.js';
-import { c as createLucideIcon } from './createLucideIcon.js';
+import { C as ChevronDown } from './index4.js';
+import { C as ChevronLeft } from './chevron-left.js';
 import { C as ChevronRight } from './chevron-right.js';
 
-/**
- * @license lucide-react v0.562.0 - ISC
- *
- * This source code is licensed under the ISC license.
- * See the LICENSE file in the root directory of this source tree.
- */
-
-
-const __iconNode = [["path", { d: "m15 18-6-6 6-6", key: "1wnfg3" }]];
-const ChevronLeft = createLucideIcon("chevron-left", __iconNode);
-
 /**
  * Time zone name format.
  */
@@ -5013,7 +4997,7 @@ var UI;
     /** The dropdown with the years. */
     UI["YearsDropdown"] = "years_dropdown";
 })(UI || (UI = {}));
-/** Enum representing flags for the {@link UI.Day} element. */
+/** Enum representing flags for the {@link UI | UI.Day} element. */
 var DayFlag;
 (function (DayFlag) {
     /** The day is disabled. */
@@ -5028,8 +5012,8 @@ var DayFlag;
     DayFlag["today"] = "today";
 })(DayFlag || (DayFlag = {}));
 /**
- * Enum representing selection states that can be applied to the {@link UI.Day}
- * element in selection mode.
+ * Enum representing selection states that can be applied to the
+ * {@link UI | UI.Day} element in selection mode.
  */
 var SelectionState;
 (function (SelectionState) {
@@ -7458,15 +7442,33 @@ function rangeContainsModifiers(range, modifiers, dateLib = defaultDateLib) {
  *   range, and a function to check if a date is within the range.
  */
 function useRange(props, dateLib) {
-    const { disabled, excludeDisabled, selected: initiallySelected, required, onSelect, } = props;
+    const { disabled, excludeDisabled, resetOnSelect, selected: initiallySelected, required, onSelect, } = props;
     const [internallySelected, setSelected] = useControlledValue(initiallySelected, onSelect ? initiallySelected : undefined);
     const selected = !onSelect ? internallySelected : initiallySelected;
     const isSelected = (date) => selected && rangeIncludesDate(selected, date, false, dateLib);
     const select = (triggerDate, modifiers, e) => {
         const { min, max } = props;
-        const newRange = triggerDate
-            ? addToRange(triggerDate, selected, min, max, required, dateLib)
-            : undefined;
+        let newRange;
+        if (triggerDate) {
+            const selectedFrom = selected?.from;
+            const selectedTo = selected?.to;
+            const hasFullRange = !!selectedFrom && !!selectedTo;
+            const isClickingSingleDayRange = !!selectedFrom &&
+                !!selectedTo &&
+                dateLib.isSameDay(selectedFrom, selectedTo) &&
+                dateLib.isSameDay(triggerDate, selectedFrom);
+            if (resetOnSelect && (hasFullRange || !selected?.from)) {
+                if (!required && isClickingSingleDayRange) {
+                    newRange = undefined;
+                }
+                else {
+                    newRange = { from: triggerDate, to: undefined };
+                }
+            }
+            else {
+                newRange = addToRange(triggerDate, selected, min, max, required, dateLib);
+            }
+        }
         if (excludeDisabled && disabled && newRange?.from && newRange.to) {
             if (rangeContainsModifiers({ from: newRange.from, to: newRange.to }, disabled, dateLib)) {
                 // if a disabled days is found, the range is reset
@@ -7843,7 +7845,7 @@ function DayPicker(initialProps) {
         formatters,
     };
     return (React__default.createElement(dayPickerContext.Provider, { value: contextValue },
-        React__default.createElement(components.Root, { rootRef: props.animate ? rootElRef : undefined, className: className, style: style, dir: props.dir, id: props.id, lang: props.lang, nonce: props.nonce, title: props.title, role: props.role, "aria-label": props["aria-label"], "aria-labelledby": props["aria-labelledby"], ...dataAttributes },
+        React__default.createElement(components.Root, { rootRef: props.animate ? rootElRef : undefined, className: className, style: style, dir: props.dir, id: props.id, lang: props.lang ?? locale.code, nonce: props.nonce, title: props.title, role: props.role, "aria-label": props["aria-label"], "aria-labelledby": props["aria-labelledby"], ...dataAttributes },
             React__default.createElement(components.Months, { className: classNames[UI.Months], style: styles?.[UI.Months] },
                 !props.hideNavigation && !navLayout && (React__default.createElement(components.Nav, { "data-animated-nav": props.animate ? "true" : undefined, className: classNames[UI.Nav], style: styles?.[UI.Nav], "aria-label": labelNav(), onPreviousClick: handlePreviousClick, onNextClick: handleNextClick, previousMonth: previousMonth, nextMonth: nextMonth })),
                 months.map((calendarMonth, displayIndex) => {
@@ -8040,8 +8042,8 @@ function Calendar({
 }
 function CalendarDayButton({ className, day, modifiers, ...props }) {
   const defaultClassNames = getDefaultClassNames();
-  const ref = React.useRef(null);
-  React.useEffect(() => {
+  const ref = useRef(null);
+  useEffect(() => {
     if (modifiers.focused) ref.current?.focus();
   }, [modifiers.focused]);
   return /* @__PURE__ */ jsx(
@@ -8066,313 +8068,7 @@ function CalendarDayButton({ className, day, modifiers, ...props }) {
 }
 Calendar.displayName = "Calendar";
 
-var POPOVER_NAME = "Popover";
-var [createPopoverContext] = createContextScope(POPOVER_NAME, [
-  createPopperScope
-]);
-var usePopperScope = createPopperScope();
-var [PopoverProvider, usePopoverContext] = createPopoverContext(POPOVER_NAME);
-var Popover$1 = (props) => {
-  const {
-    __scopePopover,
-    children,
-    open: openProp,
-    defaultOpen,
-    onOpenChange,
-    modal = false
-  } = props;
-  const popperScope = usePopperScope(__scopePopover);
-  const triggerRef = React.useRef(null);
-  const [hasCustomAnchor, setHasCustomAnchor] = React.useState(false);
-  const [open, setOpen] = useControllableState({
-    prop: openProp,
-    defaultProp: defaultOpen ?? false,
-    onChange: onOpenChange,
-    caller: POPOVER_NAME
-  });
-  return /* @__PURE__ */ jsx(Root2$1, { ...popperScope, children: /* @__PURE__ */ jsx(
-    PopoverProvider,
-    {
-      scope: __scopePopover,
-      contentId: useId(),
-      triggerRef,
-      open,
-      onOpenChange: setOpen,
-      onOpenToggle: React.useCallback(() => setOpen((prevOpen) => !prevOpen), [setOpen]),
-      hasCustomAnchor,
-      onCustomAnchorAdd: React.useCallback(() => setHasCustomAnchor(true), []),
-      onCustomAnchorRemove: React.useCallback(() => setHasCustomAnchor(false), []),
-      modal,
-      children
-    }
-  ) });
-};
-Popover$1.displayName = POPOVER_NAME;
-var ANCHOR_NAME = "PopoverAnchor";
-var PopoverAnchor = React.forwardRef(
-  (props, forwardedRef) => {
-    const { __scopePopover, ...anchorProps } = props;
-    const context = usePopoverContext(ANCHOR_NAME, __scopePopover);
-    const popperScope = usePopperScope(__scopePopover);
-    const { onCustomAnchorAdd, onCustomAnchorRemove } = context;
-    React.useEffect(() => {
-      onCustomAnchorAdd();
-      return () => onCustomAnchorRemove();
-    }, [onCustomAnchorAdd, onCustomAnchorRemove]);
-    return /* @__PURE__ */ jsx(Anchor, { ...popperScope, ...anchorProps, ref: forwardedRef });
-  }
-);
-PopoverAnchor.displayName = ANCHOR_NAME;
-var TRIGGER_NAME = "PopoverTrigger";
-var PopoverTrigger$1 = React.forwardRef(
-  (props, forwardedRef) => {
-    const { __scopePopover, ...triggerProps } = props;
-    const context = usePopoverContext(TRIGGER_NAME, __scopePopover);
-    const popperScope = usePopperScope(__scopePopover);
-    const composedTriggerRef = useComposedRefs(forwardedRef, context.triggerRef);
-    const trigger = /* @__PURE__ */ jsx(
-      Primitive.button,
-      {
-        type: "button",
-        "aria-haspopup": "dialog",
-        "aria-expanded": context.open,
-        "aria-controls": context.contentId,
-        "data-state": getState(context.open),
-        ...triggerProps,
-        ref: composedTriggerRef,
-        onClick: composeEventHandlers(props.onClick, context.onOpenToggle)
-      }
-    );
-    return context.hasCustomAnchor ? trigger : /* @__PURE__ */ jsx(Anchor, { asChild: true, ...popperScope, children: trigger });
-  }
-);
-PopoverTrigger$1.displayName = TRIGGER_NAME;
-var PORTAL_NAME = "PopoverPortal";
-var [PortalProvider, usePortalContext] = createPopoverContext(PORTAL_NAME, {
-  forceMount: void 0
-});
-var PopoverPortal = (props) => {
-  const { __scopePopover, forceMount, children, container } = props;
-  const context = usePopoverContext(PORTAL_NAME, __scopePopover);
-  return /* @__PURE__ */ jsx(PortalProvider, { scope: __scopePopover, forceMount, children: /* @__PURE__ */ jsx(Presence, { present: forceMount || context.open, children: /* @__PURE__ */ jsx(Portal$1, { asChild: true, container, children }) }) });
-};
-PopoverPortal.displayName = PORTAL_NAME;
-var CONTENT_NAME = "PopoverContent";
-var PopoverContent$1 = React.forwardRef(
-  (props, forwardedRef) => {
-    const portalContext = usePortalContext(CONTENT_NAME, props.__scopePopover);
-    const { forceMount = portalContext.forceMount, ...contentProps } = props;
-    const context = usePopoverContext(CONTENT_NAME, props.__scopePopover);
-    return /* @__PURE__ */ jsx(Presence, { present: forceMount || context.open, children: context.modal ? /* @__PURE__ */ jsx(PopoverContentModal, { ...contentProps, ref: forwardedRef }) : /* @__PURE__ */ jsx(PopoverContentNonModal, { ...contentProps, ref: forwardedRef }) });
-  }
-);
-PopoverContent$1.displayName = CONTENT_NAME;
-var Slot = createSlot("PopoverContent.RemoveScroll");
-var PopoverContentModal = React.forwardRef(
-  (props, forwardedRef) => {
-    const context = usePopoverContext(CONTENT_NAME, props.__scopePopover);
-    const contentRef = React.useRef(null);
-    const composedRefs = useComposedRefs(forwardedRef, contentRef);
-    const isRightClickOutsideRef = React.useRef(false);
-    React.useEffect(() => {
-      const content = contentRef.current;
-      if (content) return hideOthers(content);
-    }, []);
-    return /* @__PURE__ */ jsx(ReactRemoveScroll, { as: Slot, allowPinchZoom: true, children: /* @__PURE__ */ jsx(
-      PopoverContentImpl,
-      {
-        ...props,
-        ref: composedRefs,
-        trapFocus: context.open,
-        disableOutsidePointerEvents: true,
-        onCloseAutoFocus: composeEventHandlers(props.onCloseAutoFocus, (event) => {
-          event.preventDefault();
-          if (!isRightClickOutsideRef.current) context.triggerRef.current?.focus();
-        }),
-        onPointerDownOutside: composeEventHandlers(
-          props.onPointerDownOutside,
-          (event) => {
-            const originalEvent = event.detail.originalEvent;
-            const ctrlLeftClick = originalEvent.button === 0 && originalEvent.ctrlKey === true;
-            const isRightClick = originalEvent.button === 2 || ctrlLeftClick;
-            isRightClickOutsideRef.current = isRightClick;
-          },
-          { checkForDefaultPrevented: false }
-        ),
-        onFocusOutside: composeEventHandlers(
-          props.onFocusOutside,
-          (event) => event.preventDefault(),
-          { checkForDefaultPrevented: false }
-        )
-      }
-    ) });
-  }
-);
-var PopoverContentNonModal = React.forwardRef(
-  (props, forwardedRef) => {
-    const context = usePopoverContext(CONTENT_NAME, props.__scopePopover);
-    const hasInteractedOutsideRef = React.useRef(false);
-    const hasPointerDownOutsideRef = React.useRef(false);
-    return /* @__PURE__ */ jsx(
-      PopoverContentImpl,
-      {
-        ...props,
-        ref: forwardedRef,
-        trapFocus: false,
-        disableOutsidePointerEvents: false,
-        onCloseAutoFocus: (event) => {
-          props.onCloseAutoFocus?.(event);
-          if (!event.defaultPrevented) {
-            if (!hasInteractedOutsideRef.current) context.triggerRef.current?.focus();
-            event.preventDefault();
-          }
-          hasInteractedOutsideRef.current = false;
-          hasPointerDownOutsideRef.current = false;
-        },
-        onInteractOutside: (event) => {
-          props.onInteractOutside?.(event);
-          if (!event.defaultPrevented) {
-            hasInteractedOutsideRef.current = true;
-            if (event.detail.originalEvent.type === "pointerdown") {
-              hasPointerDownOutsideRef.current = true;
-            }
-          }
-          const target = event.target;
-          const targetIsTrigger = context.triggerRef.current?.contains(target);
-          if (targetIsTrigger) event.preventDefault();
-          if (event.detail.originalEvent.type === "focusin" && hasPointerDownOutsideRef.current) {
-            event.preventDefault();
-          }
-        }
-      }
-    );
-  }
-);
-var PopoverContentImpl = React.forwardRef(
-  (props, forwardedRef) => {
-    const {
-      __scopePopover,
-      trapFocus,
-      onOpenAutoFocus,
-      onCloseAutoFocus,
-      disableOutsidePointerEvents,
-      onEscapeKeyDown,
-      onPointerDownOutside,
-      onFocusOutside,
-      onInteractOutside,
-      ...contentProps
-    } = props;
-    const context = usePopoverContext(CONTENT_NAME, __scopePopover);
-    const popperScope = usePopperScope(__scopePopover);
-    useFocusGuards();
-    return /* @__PURE__ */ jsx(
-      FocusScope,
-      {
-        asChild: true,
-        loop: true,
-        trapped: trapFocus,
-        onMountAutoFocus: onOpenAutoFocus,
-        onUnmountAutoFocus: onCloseAutoFocus,
-        children: /* @__PURE__ */ jsx(
-          DismissableLayer,
-          {
-            asChild: true,
-            disableOutsidePointerEvents,
-            onInteractOutside,
-            onEscapeKeyDown,
-            onPointerDownOutside,
-            onFocusOutside,
-            onDismiss: () => context.onOpenChange(false),
-            children: /* @__PURE__ */ jsx(
-              Content,
-              {
-                "data-state": getState(context.open),
-                role: "dialog",
-                id: context.contentId,
-                ...popperScope,
-                ...contentProps,
-                ref: forwardedRef,
-                style: {
-                  ...contentProps.style,
-                  // re-namespace exposed content custom properties
-                  ...{
-                    "--radix-popover-content-transform-origin": "var(--radix-popper-transform-origin)",
-                    "--radix-popover-content-available-width": "var(--radix-popper-available-width)",
-                    "--radix-popover-content-available-height": "var(--radix-popper-available-height)",
-                    "--radix-popover-trigger-width": "var(--radix-popper-anchor-width)",
-                    "--radix-popover-trigger-height": "var(--radix-popper-anchor-height)"
-                  }
-                }
-              }
-            )
-          }
-        )
-      }
-    );
-  }
-);
-var CLOSE_NAME = "PopoverClose";
-var PopoverClose = React.forwardRef(
-  (props, forwardedRef) => {
-    const { __scopePopover, ...closeProps } = props;
-    const context = usePopoverContext(CLOSE_NAME, __scopePopover);
-    return /* @__PURE__ */ jsx(
-      Primitive.button,
-      {
-        type: "button",
-        ...closeProps,
-        ref: forwardedRef,
-        onClick: composeEventHandlers(props.onClick, () => context.onOpenChange(false))
-      }
-    );
-  }
-);
-PopoverClose.displayName = CLOSE_NAME;
-var ARROW_NAME = "PopoverArrow";
-var PopoverArrow = React.forwardRef(
-  (props, forwardedRef) => {
-    const { __scopePopover, ...arrowProps } = props;
-    const popperScope = usePopperScope(__scopePopover);
-    return /* @__PURE__ */ jsx(Arrow, { ...popperScope, ...arrowProps, ref: forwardedRef });
-  }
-);
-PopoverArrow.displayName = ARROW_NAME;
-function getState(open) {
-  return open ? "open" : "closed";
-}
-var Root2 = Popover$1;
-var Trigger = PopoverTrigger$1;
-var Portal = PopoverPortal;
-var Content2 = PopoverContent$1;
-
-function Popover({ ...props }) {
-  return /* @__PURE__ */ jsx(Root2, { "data-slot": "popover", ...props });
-}
-function PopoverTrigger({ ...props }) {
-  return /* @__PURE__ */ jsx(Trigger, { "data-slot": "popover-trigger", ...props });
-}
-function PopoverContent({
-  className,
-  align = "center",
-  sideOffset = 4,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(
-    Content2,
-    {
-      "data-slot": "popover-content",
-      align,
-      sideOffset,
-      className: cn(
-        "bg-popover text-popover-foreground 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 z-50 w-72 rounded-md border p-4 shadow-md outline-none",
-        className
-      ),
-      ...props
-    }
-  ) });
-}
-
-const DatePicker = React.forwardRef(
+const DatePicker = forwardRef(
   ({
     label,
     description,
@@ -8387,13 +8083,13 @@ const DatePicker = React.forwardRef(
     id = "date",
     ...props
   }, ref) => {
-    const [internalOpen, setInternalOpen] = React.useState(false);
-    const [internalDate, setInternalDate] = React.useState(value);
+    const [internalOpen, setInternalOpen] = useState(false);
+    const [internalDate, setInternalDate] = useState(value);
     const isControlled = controlledOpen !== void 0;
     const open = isControlled ? controlledOpen : internalOpen;
     const setOpen = isControlled ? onOpenChange || (() => {
     }) : setInternalOpen;
-    React.useEffect(() => {
+    useEffect(() => {
       if (value !== void 0) {
         setInternalDate(value);
       }