@optiaxiom/react 1.3.2 → 1.3.4

package/dist/cjs/unstable.js

@@ -3,106 +3,87 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
-var Skeleton = require('./Skeleton-CWKtGR1f.js');
-require('./assets/src/layers/layers.css.ts.vanilla-CKOpez_X.css');
-require('./assets/src/breadcrumb/BreadcrumbItem.css.ts.vanilla-Dk_HPFzo.css');
-require('./assets/src/breadcrumb/BreadcrumbLink.css.ts.vanilla-UyybgV83.css');
+var Skeleton = require('./Skeleton-BwzEuXRY.js');
+require('./assets/src/layers/layers.css.ts.vanilla-CZC9W9XU.css');
+require('./assets/src/breadcrumb/BreadcrumbItem.css.ts.vanilla-BOZzSJCT.css');
+require('./assets/src/breadcrumb/BreadcrumbLink.css.ts.vanilla-CrnYrajV.css');
 var reactComposeRefs = require('@radix-ui/react-compose-refs');
 var reactUseControllableState = require('@radix-ui/react-use-controllable-state');
 var reactDayPicker = require('react-day-picker');
 var reactPopper = require('@radix-ui/react-popper');
 var downshift = require('downshift');
-var reactSlot = require('@radix-ui/react-slot');
 var reactContext = require('@radix-ui/react-context');
-var RadixVisuallyHidden = require('@radix-ui/react-visually-hidden');
 var reactPortal = require('@radix-ui/react-portal');
-require('./assets/src/calendar/CalendarDayButton.css.ts.vanilla-DTJ-qgEE.css');
-require('./assets/src/calendar/CalendarMonths.css.ts.vanilla-7CBP-dxX.css');
-require('./assets/src/calendar/CalendarNav.css.ts.vanilla-B_yyKqbi.css');
 var reactId = require('@radix-ui/react-id');
-require('./assets/src/avatar/AvatarGroup.css.ts.vanilla-CCIVb4iD.css');
-require('./assets/src/actions/ActionsContent.css.ts.vanilla-DMEwsrsa.css');
-require('./assets/src/cover/Cover.css.ts.vanilla-C2LWvVnD.css');
-require('./assets/src/link/Link.css.ts.vanilla-Bz4ucIQV.css');
-require('./assets/src/card/Card.css.ts.vanilla-CFMBvGPI.css');
-require('./assets/src/card/CardOverflow.css.ts.vanilla-BxEr3QwY.css');
-require('./assets/src/card/CardAction.css.ts.vanilla-BwYecK1h.css');
+var reactSlot = require('@radix-ui/react-slot');
 var clsx = require('clsx');
-require('./assets/src/card/CardImage.css.ts.vanilla-B1rMon9l.css');
+require('./assets/src/calendar/CalendarDayButton.css.ts.vanilla-CloEEnqj.css');
+require('./assets/src/calendar/CalendarMonths.css.ts.vanilla-D9HKgHqG.css');
+require('./assets/src/calendar/CalendarNav.css.ts.vanilla-BH_CEHvg.css');
+require('./assets/src/avatar/AvatarGroup.css.ts.vanilla-CCtVe90o.css');
+require('./assets/src/actions/ActionsContent.css.ts.vanilla-CqKMfhS1.css');
+require('./assets/src/cover/Cover.css.ts.vanilla-C1SX3EWC.css');
+require('./assets/src/link/Link.css.ts.vanilla-B-UzZVPR.css');
+require('./assets/src/card/Card.css.ts.vanilla-undxWMUN.css');
+require('./assets/src/card/CardOverflow.css.ts.vanilla-CfaszGo6.css');
+require('./assets/src/card/CardAction.css.ts.vanilla-DT_sWq0i.css');
+require('./assets/src/card/CardImage.css.ts.vanilla-8K9SYjci.css');
 var reactTable = require('@tanstack/react-table');
 var reactVirtual = require('@tanstack/react-virtual');
 var dynamic = require('@vanilla-extract/dynamic');
-require('./assets/src/table/Table.css.ts.vanilla-DvVXIDQL.css');
-require('./assets/src/table/TableBody.css.ts.vanilla-BDMgNqSD.css');
-require('./assets/src/table/TableRow.css.ts.vanilla-UFa4hpoZ.css');
-require('./assets/src/table/TableCell.css.ts.vanilla-BIzrzFml.css');
-require('./assets/src/table/TableHeaderCell.css.ts.vanilla-B6iMvlAL.css');
-require('./assets/src/data-table/DataTableBody.css.ts.vanilla-BcJ3AJ4f.css');
-require('./assets/src/data-table/DataTableHeaderCell.css.ts.vanilla-D8cocq7n.css');
-require('./assets/src/data-table/DataTableFooter.css.ts.vanilla-B1osU08b.css');
-require('./assets/src/date-input/DateInput.css.ts.vanilla-LFFY0EJf.css');
-require('./assets/src/date-picker/DatePickerContent.css.ts.vanilla-CKtK0qxc.css');
-require('./assets/src/highlight/Highlight.css.ts.vanilla-uXNYWj8m.css');
-require('./assets/src/inline-input/InlineInput.css.ts.vanilla-CJ8Z-RgD.css');
+require('./assets/src/table/Table.css.ts.vanilla-C7nc_IXT.css');
+require('./assets/src/table/TableBody.css.ts.vanilla-DEsOS9NQ.css');
+require('./assets/src/table/TableRow.css.ts.vanilla-CjlpeCcu.css');
+require('./assets/src/table/TableCell.css.ts.vanilla-BPkQXE9u.css');
+require('./assets/src/table/TableHeaderCell.css.ts.vanilla-C7duNQW3.css');
+require('./assets/src/data-table/DataTableBody.css.ts.vanilla-CWOX4ILB.css');
+require('./assets/src/data-table/DataTableHeaderCell.css.ts.vanilla-DccQvM9d.css');
+require('./assets/src/data-table/DataTableFooter.css.ts.vanilla-BUf3z1Xk.css');
+require('./assets/src/date-input/DateInput.css.ts.vanilla-BDCVJo5d.css');
+require('./assets/src/date-picker/DatePickerContent.css.ts.vanilla-Crl_Q15m.css');
+require('./assets/src/highlight/Highlight.css.ts.vanilla-Dj5Z6HzB.css');
+require('./assets/src/inline-input/InlineInput.css.ts.vanilla-BOkwdMCk.css');
 var RadixLabel = require('@radix-ui/react-label');
-require('./assets/src/avatar/AvatarGroup.css.ts.vanilla-CCIVb4iD.css');
-require('./assets/src/button/ButtonRoot.css.ts.vanilla-DOeVqQUF.css');
-require('./assets/src/label-menu-button/LabelMenuButton.css.ts.vanilla-Bk6W_2DW.css');
-require('./assets/src/layout/Layouts.css.ts.vanilla-CY82IFTa.css');
-require('./assets/src/menu/MenuInput.css.ts.vanilla-oNHGAD0Z.css');
-require('./assets/src/pill/Pill.css.ts.vanilla-DBVrbfPg.css');
+require('./assets/src/avatar/AvatarGroup.css.ts.vanilla-CCtVe90o.css');
+require('./assets/src/button/ButtonRoot.css.ts.vanilla-CDi0jeiu.css');
+require('./assets/src/label-menu-button/LabelMenuButton.css.ts.vanilla-DpVFTpc1.css');
+require('./assets/src/layout/Layouts.css.ts.vanilla-Cj6VhCY9.css');
+require('./assets/src/menu/MenuInput.css.ts.vanilla-DWVzyQ5v.css');
+require('./assets/src/pill/Pill.css.ts.vanilla-D8DiYbwQ.css');
 require('@radix-ui/react-dialog');
-require('./assets/src/dialog/DialogBody.css.ts.vanilla-5RfsK_4j.css');
-require('./assets/src/backdrop/Backdrop.css.ts.vanilla-DJRYzxKo.css');
-require('./assets/src/dialog/DialogContent.css.ts.vanilla-BGjpbuoM.css');
-require('./assets/src/dialog/DialogHeader.css.ts.vanilla-ts_Azj3u.css');
-require('./assets/src/input/InputControl.css.ts.vanilla-DdSO1Ry0.css');
-require('./assets/src/input/InputRoot.css.ts.vanilla-B5esYIX6.css');
+require('./assets/src/dialog/DialogBody.css.ts.vanilla-DWBpSYeV.css');
+require('./assets/src/backdrop/Backdrop.css.ts.vanilla-DcYrZKqo.css');
+require('./assets/src/dialog/DialogContent.css.ts.vanilla-80GG_e5W.css');
+require('./assets/src/dialog/DialogHeader.css.ts.vanilla-SBTw-Uwk.css');
+require('./assets/src/input/InputControl.css.ts.vanilla-CgKyyje7.css');
+require('./assets/src/input/InputRoot.css.ts.vanilla-B644yEwo.css');
 require('@optiaxiom/globals');
 require('@radix-ui/react-tooltip');
-require('./assets/src/pagination/Pagination.css.ts.vanilla-DWS6TkqO.css');
+require('./assets/src/pagination/Pagination.css.ts.vanilla-CGer1zmy.css');
 require('@radix-ui/react-popover');
 require('@radix-ui/react-dismissable-layer');
 require('@radix-ui/react-focus-guards');
 require('react-remove-scroll');
-require('./assets/src/avatar/AvatarGroup.css.ts.vanilla-CCIVb4iD.css');
-require('./assets/src/toggle-input/ToggleInput.css.ts.vanilla-DpdhCvOY.css');
-require('./assets/src/toggle-input/ToggleInputControl.css.ts.vanilla-CXob7GP3.css');
-require('./assets/src/checkbox/CheckboxControl.css.ts.vanilla-DxtE4aN4.css');
-require('./assets/src/listbox/ListboxCheckboxItem.css.ts.vanilla-Bii-DWGa.css');
-require('./assets/src/text/Text.css.ts.vanilla-BIXm982x.css');
-require('./assets/src/listbox/ListboxItem.css.ts.vanilla-DAd1XZFa.css');
-require('./assets/src/listbox/ListboxItemIndicator.css.ts.vanilla-BYOk9aay.css');
+require('./assets/src/avatar/AvatarGroup.css.ts.vanilla-CCtVe90o.css');
+require('./assets/src/toggle-input/ToggleInput.css.ts.vanilla-BZzguHzH.css');
+require('./assets/src/toggle-input/ToggleInputControl.css.ts.vanilla-CAchYNAD.css');
+require('@radix-ui/react-visually-hidden');
+require('./assets/src/checkbox/CheckboxControl.css.ts.vanilla-Cn_XcWOI.css');
+require('./assets/src/listbox/ListboxCheckboxItem.css.ts.vanilla-MmiRrm_S.css');
+require('./assets/src/text/Text.css.ts.vanilla--EVicwEp.css');
+require('./assets/src/listbox/ListboxItem.css.ts.vanilla-BvRZcXaa.css');
+require('./assets/src/listbox/ListboxItemIndicator.css.ts.vanilla-hucDfOoh.css');
 require('@radix-ui/react-separator');
-require('./assets/src/separator/Separator.css.ts.vanilla-CFaaASm6.css');
-require('./assets/src/switch/Switch.css.ts.vanilla-2VUUv8TE.css');
-require('./assets/src/modal/ModalListbox.css.ts.vanilla-CXAEMq21.css');
-require('./assets/src/button/ButtonLoadable.css.ts.vanilla-BTH4I9NZ.css');
-require('./assets/src/spinner/Spinner.css.ts.vanilla-iVhwSvsi.css');
-require('./assets/src/transition/Transition.css.ts.vanilla-2Yan675X.css');
+require('./assets/src/separator/Separator.css.ts.vanilla-1uCIDzTk.css');
+require('./assets/src/switch/Switch.css.ts.vanilla-0f4bGCPQ.css');
+require('./assets/src/modal/ModalListbox.css.ts.vanilla-PrfE3sWD.css');
+require('./assets/src/button/ButtonLoadable.css.ts.vanilla-CysVj99D.css');
+require('./assets/src/spinner/Spinner.css.ts.vanilla-D77uLhxE.css');
+require('./assets/src/transition/Transition.css.ts.vanilla-CRqmiPzq.css');
 require('@optiaxiom/globals/fonts');
-require('./assets/src/sprinkles/properties.css.ts.vanilla-DOGkQqDO.css');
-require('./assets/src/box/Box.css.ts.vanilla-DthSPGYm.css');
-require('./assets/src/skeleton/Skeleton.css.ts.vanilla-5OrbeBw-.css');
-
-function _interopNamespaceDefault(e) {
-  var n = Object.create(null);
-  if (e) {
-    Object.keys(e).forEach(function (k) {
-      if (k !== 'default') {
-        var d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: function () { return e[k]; }
-        });
-      }
-    });
-  }
-  n.default = e;
-  return Object.freeze(n);
-}
-
-var RadixVisuallyHidden__namespace = /*#__PURE__*/_interopNamespaceDefault(RadixVisuallyHidden);
+require('./assets/src/sprinkles/properties.css.ts.vanilla-BcqoWQvZ.css');
+require('./assets/src/box/Box.css.ts.vanilla-Dnq424Jf.css');
+require('./assets/src/skeleton/Skeleton.css.ts.vanilla-Dg6aZlKk.css');
 
 const toPlainDateTime = (date) => new Date(date.getTime() - new Date(date).getTimezoneOffset() * 60 * 1e3).toISOString().slice(0, -1);
 
@@ -115,7 +96,7 @@ const toPlainTime = (date, step = "60") => {
 };
 
 const useFieldLabelTrigger = (ref, ariaLabelledBy) => {
-  const { labelId = ariaLabelledBy } = Skeleton.useFieldContext();
+  const { labelId = ariaLabelledBy } = Skeleton.useFieldContext("useFieldLabelTrigger");
   React.useEffect(() => {
     if (!labelId || !ref.current) {
       return;
@@ -278,7 +259,7 @@ function BreadcrumbEllipsis({ ...props }) {
 }
 BreadcrumbEllipsis.displayName = "@optiaxiom/react/BreadcrumbEllipsis";
 
-var item = Skeleton.recipeRuntime({base:[{alignItems:'center',display:'inline-flex'},'_1yzuent']});
+var item = Skeleton.recipeRuntime({base:[{alignItems:'center',display:'inline-flex'},'_1mqeehb']});
 
 const BreadcrumbItem = React.forwardRef(
   ({ children, className, ...props }, ref) => {
@@ -288,22 +269,39 @@ const BreadcrumbItem = React.forwardRef(
 );
 BreadcrumbItem.displayName = "@optiaxiom/react/BreadcrumbItem";
 
-var link = Skeleton.recipeRuntime({base:[{alignItems:'center',display:'flex',fontSize:'md',h:'md',rounded:'md'},'ihb95q']});
+var link = Skeleton.recipeRuntime({base:[{fontSize:'md',overflow:'hidden',rounded:'md'},'zl0xt9']});
 
 const BreadcrumbLink = React.forwardRef(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Link, { ...link({}, className), ref, ...props });
+  return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Tooltip, { auto: true, content: props.children, children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Link, { ...link({}, className), ref, ...props }) });
 });
 BreadcrumbLink.displayName = "@optiaxiom/react/BreadcrumbLink";
 
 const BreadcrumbPage = React.forwardRef(
   ({ ...props }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { "aria-current": "page", asChild: true, color: "fg.default", fontSize: "md", children: /* @__PURE__ */ jsxRuntime.jsx("span", { ref, ...props }) });
+    return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Tooltip, { auto: true, content: props.children, children: /* @__PURE__ */ jsxRuntime.jsx(
+      Skeleton.Text,
+      {
+        "aria-current": "page",
+        asChild: true,
+        color: "fg.default",
+        fontSize: "md",
+        truncate: true,
+        children: /* @__PURE__ */ jsxRuntime.jsx("span", { ref, ...props })
+      }
+    ) });
   }
 );
 BreadcrumbPage.displayName = "@optiaxiom/react/BreadcrumbPage";
 
-function usePortalPatch(initialHighlightedIndex = -1) {
+function usePortalPatch(open, initialHighlightedIndex = -1) {
   const [placed, setPlaced] = React.useState(false);
+  React.useEffect(() => {
+    if (open) {
+      requestAnimationFrame(() => requestAnimationFrame(() => setPlaced(true)));
+    } else {
+      setPlaced(false);
+    }
+  }, [open, setPlaced]);
   const [highlightedIndex, setHighlightedIndex] = React.useState(
     initialHighlightedIndex
   );
@@ -323,8 +321,7 @@ function usePortalPatch(initialHighlightedIndex = -1) {
      */
     placed ? highlightedIndex : -1,
     setHighlightedIndex,
-    placed,
-    setPlaced
+    placed
   ];
 }
 
@@ -336,7 +333,7 @@ const SelectHiddenSelect = React.forwardRef(({ defaultValue, disabled, name, onC
     () => items.map((item) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: item.value, children: item.value }, item.value)),
     [items]
   );
-  return /* @__PURE__ */ jsxRuntime.jsx(RadixVisuallyHidden.VisuallyHidden, { "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsxs(
+  return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.VisuallyHidden, { "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsxs(
     "select",
     {
       defaultValue,
@@ -392,7 +389,8 @@ const Select = React.forwardRef(
     const innerRef = React.useRef(null);
     const ref = reactComposeRefs.useComposedRefs(innerRef, outerRef);
     const [shadowValue, setShadowValue] = reactUseControllableState.useControllableState({
-      defaultProp: defaultValue,
+      caller: "@optiaxiom/react/Select",
+      defaultProp: defaultValue ?? "",
       onChange: onValueChange,
       prop: value
     });
@@ -403,15 +401,19 @@ const Select = React.forwardRef(
       [items, shadowValue]
     );
     const [isOpen, setIsOpen] = reactUseControllableState.useControllableState({
+      caller: "@optiaxiom/react/Select",
       defaultProp: defaultOpen,
       onChange: onOpenChange,
       prop: open
     });
-    const [highlightedIndex, setHighlightedIndex, placed, setPlaced] = usePortalPatch(
-      () => selectedItem ? items.findIndex((item) => selectedItem.value === item.value) : -1
+    const [highlightedIndex, setHighlightedIndex, placed] = usePortalPatch(
+      isOpen,
+      () => selectedItem ? items.findIndex(
+        (item) => !item.disabledReason && selectedItem.value === item.value
+      ) : -1
     );
     const downshift$1 = downshift.useSelect({
-      highlightedIndex,
+      highlightedIndex: highlightedIndex === -1 && placed ? items.findIndex((item) => !item.disabledReason) : highlightedIndex,
       isItemDisabled: (item) => !!item.disabledReason,
       isOpen: placed,
       // @ts-expect-error -- no harm in supporting read only arrays
@@ -429,7 +431,23 @@ const Select = React.forwardRef(
       onSelectedItemChange({ selectedItem: selectedItem2 }) {
         forceValueChange(selectedItem2?.value ?? "");
       },
-      selectedItem: selectedItem ?? null
+      selectedItem: selectedItem ?? null,
+      stateReducer: (state, actionAndChanges) => {
+        const { changes, type } = actionAndChanges;
+        switch (type) {
+          case downshift.useSelect.stateChangeTypes.ToggleButtonBlur:
+            return {
+              ...changes,
+              /**
+               * Do not select highlighted item when tabbing out of clicking
+               * outside to close the menu.
+               */
+              selectedItem: state.selectedItem
+            };
+          default:
+            return changes;
+        }
+      }
     });
     downshift$1.getMenuProps({}, { suppressRefError: true });
     return /* @__PURE__ */ jsxRuntime.jsx(reactPopper.Popper, { children: /* @__PURE__ */ jsxRuntime.jsxs(
@@ -437,14 +455,12 @@ const Select = React.forwardRef(
       {
         disabled,
         downshift: downshift$1,
-        highlightedItem: items[highlightedIndex],
+        highlightedItem: items[downshift$1.highlightedIndex],
         isOpen,
         items,
         loading,
         onBlur,
-        placed,
         selectedItem,
-        setPlaced,
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             SelectHiddenSelect,
@@ -513,15 +529,8 @@ SelectRadioItem.displayName = "@optiaxiom/react/SelectRadioItem";
 
 const SelectContent = React.forwardRef(
   ({ align = "start", children, side = "bottom", size, ...props }, ref) => {
-    const {
-      downshift,
-      highlightedItem,
-      isOpen,
-      items,
-      loading,
-      placed,
-      setPlaced
-    } = useSelectContext("@optiaxiom/react/SelectContent");
+    const { downshift, highlightedItem, isOpen, items, loading } = useSelectContext("@optiaxiom/react/SelectContent");
+    const [placed, setPlaced] = React.useState(false);
     let isFirstItem = true;
     let lastGroup = void 0;
     const shouldShowSeparator = (group) => {
@@ -532,7 +541,7 @@ const SelectContent = React.forwardRef(
     const shouldShowGroup = (group) => {
       const show = group !== lastGroup;
       lastGroup = group;
-      return show && !group?.hidden;
+      return show && !!group && !group?.hidden;
     };
     return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.TransitionGroup, { open: isOpen, children: /* @__PURE__ */ jsxRuntime.jsx(reactPortal.Portal, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton.ModalLayer, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
       Skeleton.ModalListbox,
@@ -585,6 +594,7 @@ const SelectContent = React.forwardRef(
 );
 SelectContent.displayName = "@optiaxiom/react/SelectContent";
 
+const Slot$2 = reactSlot.createSlot("@optiaxiom/react/SelectTrigger");
 const SelectTrigger = React.forwardRef(
   ({
     "aria-labelledby": ariaLabelledBy,
@@ -595,10 +605,11 @@ const SelectTrigger = React.forwardRef(
     placeholder,
     ...props
   }, ref) => {
-    const { disabled, downshift, isOpen, onBlur, selectedItem } = useSelectContext("@optiaxiom/react/SelectTrigger");
+    const { disabled, downshift, isOpen, items, onBlur, selectedItem } = useSelectContext("@optiaxiom/react/SelectTrigger");
     const { boxProps, restProps } = Skeleton.extractBoxProps(props);
     const buttonRef = React.useRef(null);
     const labelId = useFieldLabelTrigger(buttonRef, ariaLabelledBy);
+    const valueId = reactId.useId();
     const [focusOnOpen] = React.useState(isOpen);
     React.useEffect(
       function() {
@@ -616,7 +627,7 @@ const SelectTrigger = React.forwardRef(
         ...boxProps,
         ...downshift.getToggleButtonProps({
           ...restProps,
-          "aria-labelledby": labelId,
+          "aria-labelledby": labelId ? clsx(labelId, valueId) : valueId,
           disabled,
           onBlur: (event) => {
             onBlurProp?.(event);
@@ -625,13 +636,43 @@ const SelectTrigger = React.forwardRef(
           onKeyDown: (event) => {
             onKeyDown?.(event);
             document.dispatchEvent(new Event("tooltip.open"));
+            if (isOpen) {
+              return;
+            }
+            const selectedItemIndex = downshift.selectedItem ? items.indexOf(downshift.selectedItem) : -1;
+            switch (event.key) {
+              case "ArrowLeft": {
+                let prevItemIndex = selectedItemIndex;
+                for (prevItemIndex--; prevItemIndex >= 0; prevItemIndex--) {
+                  const item = items[prevItemIndex];
+                  if (!item.disabledReason) {
+                    break;
+                  }
+                }
+                downshift.selectItem(items[Math.max(0, prevItemIndex)]);
+                break;
+              }
+              case "ArrowRight": {
+                let nextItemIndex = selectedItemIndex;
+                for (nextItemIndex++; nextItemIndex < items.length; nextItemIndex++) {
+                  const item = items[nextItemIndex];
+                  if (!item.disabledReason) {
+                    break;
+                  }
+                }
+                downshift.selectItem(
+                  items[Math.min(nextItemIndex, items.length - 1)]
+                );
+                break;
+              }
+            }
           },
           type: "button"
         }),
-        children: /* @__PURE__ */ jsxRuntime.jsx(reactSlot.Slot, { ref, children: asChild ? Skeleton.decorateChildren(
+        children: /* @__PURE__ */ jsxRuntime.jsx(Slot$2, { ref, children: asChild ? Skeleton.decorateChildren(
           { asChild, children },
-          (children2) => children2 ?? value
-        ) : /* @__PURE__ */ jsxRuntime.jsx(Skeleton.AngleMenuButton, { ref: buttonRef, children: children ?? value }) })
+          (children2) => (children2 ?? value) && /* @__PURE__ */ jsxRuntime.jsx("span", { id: valueId, children: children2 ?? value })
+        ) : /* @__PURE__ */ jsxRuntime.jsx(Skeleton.AngleMenuButton, { ref: buttonRef, children: /* @__PURE__ */ jsxRuntime.jsx("span", { id: valueId, children: children ?? value }) }) })
       }
     );
   }
@@ -662,8 +703,15 @@ const range = (min, max, step = 1) => Array.from(
 );
 
 const Clock = React.forwardRef(
-  ({ defaultValue, onValueChange, step = "60", value: valueProp, ...props }, ref) => {
+  ({
+    defaultValue = "",
+    onValueChange,
+    step = "60",
+    value: valueProp,
+    ...props
+  }, ref) => {
     const [value, setValue] = reactUseControllableState.useControllableState({
+      caller: "@optiaxiom/react/Clock",
       defaultProp: defaultValue,
       onChange: onValueChange,
       prop: valueProp
@@ -728,6 +776,12 @@ const Clock = React.forwardRef(
 );
 Clock.displayName = "@optiaxiom/react/Clock";
 
+function toInstant(str) {
+  const rawDate = str && typeof str === "string" ? new Date(str.includes("T") ? str : str + "T00:00") : void 0;
+  return isValidDate(rawDate) ? rawDate : void 0;
+}
+const isValidDate = (date) => date ? !isNaN(+date) : false;
+
 function CalendarChevron({
   orientation,
   ...props
@@ -741,8 +795,8 @@ function CalendarDay({ children, ...props }) {
 }
 CalendarDay.displayName = "@optiaxiom/react/CalendarDay";
 
-var button$2 = Skeleton.recipeRuntime({base:[{color:'fg.default',fontSize:'md',size:'md',transition:'colors'},'d3bv4l'],variants:{appearance:{'default':'hucvx5',holiday:[{color:'fg.error'},'_658db3'],range_middle:'_6vwj0z',selected:[{color:'fg.white'},'_10x7emu'],weekend:[{color:'fg.tertiary'},'_1l74jx9']},range:{end:['_1e6tfds'],middle:['zqzute'],start:['nq2gnn']}}});
-var today = Skeleton.recipeRuntime({base:[{bg:'current',mx:'auto',rounded:'full'},'gqs6rg']});
+var button$2 = Skeleton.recipeRuntime({base:[{color:'fg.default',fontSize:'md',size:'md',transition:'colors'},'r3rikg'],variants:{appearance:{'default':'zc2y9h',holiday:[{color:'fg.error'},'_1ezz8ma'],range_middle:'_1ceblxj',selected:[{color:'fg.white'},'_1hfxpw4'],weekend:[{color:'fg.tertiary'},'pb4j9a']},range:{end:['kltvxn'],middle:['nhjqo9'],start:['_1bxe8qi']}}});
+var today = Skeleton.recipeRuntime({base:[{bg:'current',mx:'auto',rounded:'full'},'_1gz1uxc']});
 
 function CalendarDayButton({
   children,
@@ -808,14 +862,14 @@ function CalendarMonthGrid({
 }
 CalendarMonthGrid.displayName = "@optiaxiom/react/CalendarMonthGrid";
 
-var months = Skeleton.recipeRuntime({base:[{alignItems:'start',flexDirection:'row'},'e7co3i']});
+var months = Skeleton.recipeRuntime({base:[{alignItems:'start',flexDirection:'row'},'m15xq0']});
 
 function CalendarMonths({ children, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Flex, { asChild: true, ...months(), children: /* @__PURE__ */ jsxRuntime.jsx(reactDayPicker.Months, { ...props, children }) });
 }
 CalendarMonths.displayName = "@optiaxiom/react/CalendarMonths";
 
-var nav = Skeleton.recipeRuntime({base:[{display:'flex',justifyContent:'space-between',w:'full'},'t13yoa']});
+var nav = Skeleton.recipeRuntime({base:[{display:'flex',justifyContent:'space-between',w:'full'},'bk8xwq']});
 
 function CalendarNav({ children, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { asChild: true, ...nav(), children: /* @__PURE__ */ jsxRuntime.jsx(reactDayPicker.Nav, { ...props, children }) });
@@ -869,7 +923,6 @@ const toTimeZoneName = (date) => {
 const components = {
   Chevron: CalendarChevron,
   Day: CalendarDay,
-  DayButton: CalendarDayButton,
   MonthCaption: CalendarMonthCaption,
   MonthGrid: CalendarMonthGrid,
   Months: CalendarMonths,
@@ -882,7 +935,7 @@ const components = {
 };
 const Calendar = React.forwardRef(
   ({
-    defaultValue,
+    defaultValue = null,
     holiday,
     max,
     min,
@@ -897,6 +950,7 @@ const Calendar = React.forwardRef(
     ...props
   }, outerRef) => {
     const [value, setValue] = reactUseControllableState.useControllableState({
+      caller: "@optiaxiom/react/Calendar",
       defaultProp: defaultValue,
       onChange: onValueChange,
       prop: valueProp
@@ -908,6 +962,36 @@ const Calendar = React.forwardRef(
     });
     const innerRef = React.useRef(null);
     const ref = reactComposeRefs.useComposedRefs(innerRef, outerRef);
+    const [from, setFrom] = React.useState();
+    const [to, setTo] = React.useState();
+    const DayButtonMemo = React.useMemo(
+      () => function DayButton({
+        onFocus,
+        onPointerEnter,
+        onPointerLeave,
+        ...props2
+      }) {
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          CalendarDayButton,
+          {
+            onFocus: (event) => {
+              onFocus?.(event);
+              setTo(props2.day.date);
+            },
+            onPointerEnter: (event) => {
+              onPointerEnter?.(event);
+              setTo(props2.day.date);
+            },
+            onPointerLeave: (event) => {
+              onPointerLeave?.(event);
+              setTo(void 0);
+            },
+            ...props2
+          }
+        );
+      },
+      []
+    );
     const onHeightChangeStable = Skeleton.useEffectEvent(onHeightChange ?? (() => {
     }));
     React.useEffect(() => {
@@ -932,28 +1016,68 @@ const Calendar = React.forwardRef(
         ref,
         ...props,
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
+          mode === "single" ? /* @__PURE__ */ jsxRuntime.jsx(
             reactDayPicker.DayPicker,
             {
               autoFocus: true,
-              components,
-              defaultMonth: value && typeof value === "object" && "from" in value ? value.from : value,
+              components: {
+                ...components,
+                DayButton: DayButtonMemo
+              },
+              defaultMonth: value instanceof Date ? value : void 0,
               disabled: [
                 ...min ? [{ before: min }] : [],
                 ...max ? [{ after: max }] : []
               ],
-              fixedWeeks: mode === "range",
-              mode,
+              mode: "single",
               modifiers: { holiday, weekend },
-              numberOfMonths: mode === "range" ? numberOfMonths : 1,
               onSelect: (value2) => {
                 setValue(
-                  value2 instanceof Date ? /* @__PURE__ */ new Date(toPlainDate(value2) + "T" + (time ?? "00:00")) : value2
+                  value2 ? /* @__PURE__ */ new Date(toPlainDate(value2) + "T" + (time ?? "00:00")) : value2 ?? null
                 );
               },
               required: true,
-              selected: value,
-              showOutsideDays: mode === "range",
+              selected: value instanceof Date ? value : void 0,
+              today
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx(
+            reactDayPicker.DayPicker,
+            {
+              autoFocus: true,
+              components: {
+                ...components,
+                DayButton: DayButtonMemo
+              },
+              defaultMonth: value && typeof value === "object" && "from" in value ? value.from : void 0,
+              disabled: [
+                ...min ? [{ before: min }] : [],
+                ...max ? [{ after: max }] : []
+              ],
+              fixedWeeks: true,
+              mode: "range",
+              modifiers: { holiday, weekend },
+              numberOfMonths,
+              onSelect: (newValue) => {
+                if (!from) {
+                  const oldFrom = value && typeof value === "object" && "from" in value ? value.from : void 0;
+                  const newFrom = oldFrom && newValue?.from && newValue.from < oldFrom ? newValue.from : newValue?.to;
+                  setFrom(newFrom);
+                } else {
+                  setFrom(void 0);
+                  setValue(
+                    to && to < from ? {
+                      from: to,
+                      to: toInstant(toPlainDate(from) + "T23:59:59.999")
+                    } : {
+                      from,
+                      to: to ? toInstant(toPlainDate(to) + "T23:59:59.999") : void 0
+                    }
+                  );
+                }
+              },
+              required: true,
+              selected: from ? to && to < from ? { from: to, to: from } : { from, to } : value && typeof value === "object" && "from" in value ? value : void 0,
+              showOutsideDays: true,
               today
             }
           ),
@@ -982,7 +1106,7 @@ const Calendar = React.forwardRef(
 );
 Calendar.displayName = "@optiaxiom/react/Calendar";
 
-var content$2 = Skeleton.recipeRuntime({base:[{display:'flex',justifyContent:'space-between'},'_18fl7wn'],variants:{visible:{false:'_1e6dvs1',true:'gtodt6'}}});
+var content$2 = Skeleton.recipeRuntime({base:[{display:'flex',justifyContent:'space-between'},'_155bz3c'],variants:{visible:{false:'_9p9pyh',true:'_1w2xxnm'}}});
 
 const ActionsContent = React.forwardRef(
   ({ children, className, visible = false, ...props }, ref) => {
@@ -991,7 +1115,7 @@ const ActionsContent = React.forwardRef(
 );
 ActionsContent.displayName = "@optiaxiom/react/ActionsContent";
 
-var root = Skeleton.recipeRuntime({base:'_1t0oph8'});
+var root = Skeleton.recipeRuntime({base:'_1muuout'});
 
 const ActionsRoot = React.forwardRef(
   ({ children, className, ...props }, ref) => {
@@ -1000,7 +1124,7 @@ const ActionsRoot = React.forwardRef(
 );
 ActionsRoot.displayName = "@optiaxiom/react/ActionsRoot";
 
-var card = Skeleton.recipeRuntime({base:['ym82cp',{border:'1',borderColor:'border.tertiary',color:'fg.default',gap:'12',p:'16',transition:'transform'},'_1swxt0d']});
+var card = Skeleton.recipeRuntime({base:['_1nry745',{border:'1',borderColor:'border.tertiary',color:'fg.default',gap:'12',p:'16',transition:'transform'},'_19zrum1']});
 
 const [CardProvider, useCardContext] = reactContext.createContext("@optiaxiom/react/Card");
 
@@ -1034,7 +1158,7 @@ const Card = React.forwardRef(
 );
 Card.displayName = "@optiaxiom/react/Card";
 
-var action = Skeleton.recipeRuntime({base:['_19s5u3s']});
+var action = Skeleton.recipeRuntime({base:['_112gkvg']});
 
 const CardAction = React.forwardRef(
   ({ children, className, ...props }, ref) => {
@@ -1048,6 +1172,7 @@ const CardCheckbox = React.forwardRef(
     const labelPrefixId = reactId.useId();
     const { labelId } = useCardContext("@optiaxiom/react/CardCheckbox");
     const [checked, setChecked] = reactUseControllableState.useControllableState({
+      caller: "@optiaxiom/react/CardCheckbox",
       defaultProp: props.defaultChecked,
       prop: props.checked
     });
@@ -1070,7 +1195,7 @@ const CardCheckbox = React.forwardRef(
               shift: Boolean(children)
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx(RadixVisuallyHidden.VisuallyHidden, { children: /* @__PURE__ */ jsxRuntime.jsxs(Skeleton.Box, { id: labelPrefixId, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Skeleton.VisuallyHidden, { children: /* @__PURE__ */ jsxRuntime.jsxs(Skeleton.Box, { id: labelPrefixId, children: [
             "Check to ",
             checked ? "unselect" : "select"
           ] }) })
@@ -1104,7 +1229,7 @@ const CardDescription = React.forwardRef(({ children, ...props }, ref) => {
 });
 CardDescription.displayName = "@optiaxiom/react/CardDescription";
 
-var cardImage = Skeleton.recipeRuntime({base:[{h:'full',rounded:'inherit'},'_1ackn87'],variants:{orientation:{horizontal:[{w:'auto'},'_1o5zb6v'],vertical:[{w:'full'},'_16vo671']}}});
+var cardImage = Skeleton.recipeRuntime({base:[{h:'full',rounded:'inherit'},'_52lufl'],variants:{orientation:{horizontal:[{w:'auto'},'forjep'],vertical:[{w:'full'},'_1ng2pch']}}});
 
 const CardImage = React.forwardRef(
   ({ alt = "", asChild, children, className, src, ...props }, ref) => {
@@ -1130,7 +1255,7 @@ const CardLink = React.forwardRef(
 );
 CardLink.displayName = "@optiaxiom/react/CardLink";
 
-var cardOverflow = Skeleton.recipeRuntime({base:['_1rn6761',{alignSelf:'stretch'},'_6ngnek'],variants:{orientation:{horizontal:['_1dhrovf'],vertical:['_1ej6l6k']}}});
+var cardOverflow = Skeleton.recipeRuntime({base:['ujrhy8',{alignSelf:'stretch'},'_1200woo'],variants:{orientation:{horizontal:['kof10o'],vertical:['cktmtm']}}});
 
 const CardOverflow = React.forwardRef(
   ({ children, className, ...props }, ref) => {
@@ -1148,9 +1273,10 @@ const CardOverflow = React.forwardRef(
 );
 CardOverflow.displayName = "@optiaxiom/react/CardOverflow";
 
+const Slot$1 = reactSlot.createSlot("@optiaxiom/react/CardTitle");
 const CardTitle = React.forwardRef(
   ({ asChild, children, ...props }, ref) => {
-    const Comp = asChild ? reactSlot.Slot : "h2";
+    const Comp = asChild ? Slot$1 : "h2";
     const { labelId } = useCardContext("@optiaxiom/react/CardTitle");
     return /* @__PURE__ */ jsxRuntime.jsx(
       Skeleton.Heading,
@@ -1229,23 +1355,22 @@ function Command({
   onHover,
   onInputValueChange,
   onSelect: onItemSelect,
+  open,
   options
 }) {
   const [inputValue, setInputValue] = reactUseControllableState.useControllableState({
+    caller: "@optiaxiom/react/Command",
     defaultProp: "",
     onChange: onInputValueChange,
     prop: inputValueProp
   });
   const items = useCommandItems({ inputValue, options });
-  const [highlightedIndex, setHighlightedIndex, placed, setPlaced] = usePortalPatch(
-    () => items.findIndex((item) => resolveItemProperty(item.selected))
+  const [highlightedIndex, setHighlightedIndex, placed] = usePortalPatch(
+    open,
+    () => items.findIndex(
+      (item) => !resolveItemProperty(item.disabledReason) && resolveItemProperty(item.selected) && !item.multi
+    )
   );
-  const setInputValueStable = Skeleton.useEffectEvent(setInputValue);
-  React.useEffect(() => {
-    if (placed) {
-      setInputValueStable("");
-    }
-  }, [placed, setInputValueStable]);
   const pauseInteractionRef = React.useRef({
     isInsideTriangle: null,
     timer: void 0
@@ -1306,10 +1431,8 @@ function Command({
       items,
       loading,
       pauseInteractionRef,
-      placed,
       setHighlightedIndex,
       setInputValue,
-      setPlaced,
       children
     }
   );
@@ -1321,6 +1444,10 @@ const CommandInput = React.forwardRef(
     const { downshift, highlightedItem, setInputValue } = useCommandContext(
       "@optiaxiom/react/CommandInput"
     );
+    const setInputValueStable = Skeleton.useEffectEvent(setInputValue);
+    React.useEffect(() => {
+      setInputValueStable("");
+    }, [setInputValueStable]);
     return /* @__PURE__ */ jsxRuntime.jsx(
       Skeleton.Input,
       {
@@ -1436,7 +1563,10 @@ CommandItem.displayName = "@optiaxiom/react/CommandItem";
 
 const CommandListbox = React.forwardRef(
   ({ children, size, ...props }, ref) => {
-    const { downshift, highlightedItem, inputValue, items, placed, setPlaced } = useCommandContext("@optiaxiom/react/CommandListbox");
+    const { downshift, highlightedItem, inputValue, items } = useCommandContext(
+      "@optiaxiom/react/CommandListbox"
+    );
+    const [placed, setPlaced] = React.useState(false);
     return /* @__PURE__ */ jsxRuntime.jsx(
       Skeleton.ListboxItemized,
       {
@@ -1474,8 +1604,8 @@ const DataTable = React.forwardRef(
 );
 DataTable.displayName = "@optiaxiom/react/DataTable";
 
-var table$1 = Skeleton.recipeRuntime({base:[{color:'fg.default',fontSize:'md',w:'full'},'c4caq4'],variants:{layout:{auto:['b97d0c'],fixed:[{display:'grid'},'_11wvn0v']}}});
-var wrapper = Skeleton.recipeRuntime({base:[{bg:'bg.default',border:'1',borderColor:'border.tertiary',maxW:'full',overflow:'auto',rounded:'lg'},'zsn4ma']});
+var table$1 = Skeleton.recipeRuntime({base:[{color:'fg.default',fontSize:'md',w:'full'},'qq6rz4'],variants:{layout:{auto:['_12hi47r'],fixed:[{display:'grid'},'_19bwhtg']}}});
+var wrapper = Skeleton.recipeRuntime({base:[{bg:'bg.default',border:'1',borderColor:'border.tertiary',maxW:'full',overflow:'auto',rounded:'lg'},'fzpjtk']});
 
 const Table = React.forwardRef(
   ({ children, className, layout = "auto", ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { ...wrapper({}, className), ref, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { asChild: true, ...table$1({ layout }), children: /* @__PURE__ */ jsxRuntime.jsx("table", { children }) }) })
@@ -1489,14 +1619,14 @@ const TableAction = React.forwardRef(
 );
 TableAction.displayName = "@optiaxiom/react/TableAction";
 
-var body = Skeleton.recipeRuntime({base:['yc5fod']});
+var body = Skeleton.recipeRuntime({base:['_1new21k']});
 
 const TableBody = React.forwardRef(
   ({ children, className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { asChild: true, ...body({}, className), ...props, children: /* @__PURE__ */ jsxRuntime.jsx("tbody", { ref, children }) })
 );
 TableBody.displayName = "@optiaxiom/react/TableBody";
 
-var cell$2 = Skeleton.recipeRuntime({base:[{borderColor:'border.tertiary',p:'16'},'_1tec5v']});
+var cell$2 = Skeleton.recipeRuntime({base:[{borderColor:'border.tertiary',p:'16'},'_1u6f0ow']});
 
 const TableCell = React.forwardRef(
   ({ children, className, colSpan, ...props }, ref) => {
@@ -1508,28 +1638,28 @@ TableCell.displayName = "@optiaxiom/react/TableCell";
 const TableHeader = React.forwardRef(({ children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { asChild: true, ...props, children: /* @__PURE__ */ jsxRuntime.jsx("thead", { ref, children }) }));
 TableHeader.displayName = "@optiaxiom/react/TableHeader";
 
-var cell$1 = Skeleton.recipeRuntime({base:'vmjawj'});
-var content$1 = Skeleton.recipeRuntime({base:[{alignItems:'center',bg:'bg.default',color:'fg.tertiary',display:'flex',fontSize:'sm',fontWeight:'400',size:'full'},'_7tw1g3']});
+var cell$1 = Skeleton.recipeRuntime({base:'qbzyso'});
+var content$1 = Skeleton.recipeRuntime({base:[{alignItems:'center',bg:'bg.default',color:'fg.tertiary',display:'flex',fontSize:'sm',fontWeight:'400',size:'full'},'_1116bmw']});
 
 const TableHeaderCell = React.forwardRef(
   ({ children, className, colSpan, p, px = "16", py = "12", ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { asChild: true, ...cell$1({}, className), ...props, children: /* @__PURE__ */ jsxRuntime.jsx("th", { colSpan, ref, children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { ...content$1(), px: p ?? px, py: p ?? py, children }) }) })
 );
 TableHeaderCell.displayName = "@optiaxiom/react/TableHeaderCell";
 
-var row = Skeleton.recipeRuntime({base:['aluo8l',{transition:'colors',w:'full'},'cs3q9j']});
+var row = Skeleton.recipeRuntime({base:['_2hn8n1',{transition:'colors',w:'full'},'zxnmpk']});
 
 const TableRow = React.forwardRef(
   ({ children, className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(ActionsRoot, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { asChild: true, ...row({}, className), ...props, children: /* @__PURE__ */ jsxRuntime.jsx("tr", { ref, children }) }) })
 );
 TableRow.displayName = "@optiaxiom/react/TableRow";
 
-var cell = Skeleton.recipeRuntime({base:[{alignItems:'start',display:'flex'},'fazkac'],variants:{pinned:{left:'_1en8i7t',right:'_1yc5n83'},pinnedType:{body:'_1j40eed',header:{}}}});
-var cellOffsetVar = 'var(--_16uzvor)';
-var cellSizeVar = 'var(--_1el4nm5)';
-var header = Skeleton.recipeRuntime({base:[{display:'grid'},'ejlhak']});
-var leftTotalSizeVar = 'var(--_1kka7rx)';
-var rightTotalSizeVar = 'var(--fqnbt1)';
-var table = Skeleton.recipeRuntime({base:'wjkulz',variants:{pinned:{both:'_1hhlm9p',left:'_168dth2',none:{},right:'_1kon59n'}}});
+var cell = Skeleton.recipeRuntime({base:[{alignItems:'start',display:'flex'},'_1uzy629'],variants:{pinned:{left:'_1n66ba',right:'jt0yf9'},pinnedType:{body:'b1micv',header:{}}}});
+var cellOffsetVar = 'var(--efdz07)';
+var cellSizeVar = 'var(--yy5yw3)';
+var header = Skeleton.recipeRuntime({base:[{display:'grid'},'_13yrt10']});
+var leftTotalSizeVar = 'var(--_1ta7iwa)';
+var rightTotalSizeVar = 'var(--had1uz)';
+var table = Skeleton.recipeRuntime({base:'_1yptylg',variants:{pinned:{both:'_9snfm8',left:'_15n3wvq',none:{},right:'_1v66hvg'}}});
 
 const IconSort = Skeleton.withIcon(
   {
@@ -1576,9 +1706,9 @@ const IconSortUp = Skeleton.withIcon(
   )
 );
 
-var button$1 = Skeleton.recipeRuntime({base:[{alignItems:'center',display:'flex',gap:'4',justifyContent:'flex-start',rounded:'md',textAlign:'start',transition:'colors',w:'full'},'_1t6o3d2']});
-var handle = Skeleton.recipeRuntime({base:[{h:'full',z:'10'},'hakgr2'],variants:{resizing:{false:{},true:{borderColor:'border.focus'}}}});
-var icon = Skeleton.recipeRuntime({base:[{h:'12',mx:'2',transition:'opacity'},'n5dxkl'],variants:{active:{false:'dpli0h',true:'_1lpfuv0'}}});
+var button$1 = Skeleton.recipeRuntime({base:[{alignItems:'center',display:'flex',gap:'4',justifyContent:'flex-start',rounded:'md',textAlign:'start',transition:'colors',w:'full'},'saxa0d']});
+var handle = Skeleton.recipeRuntime({base:[{h:'full',z:'10'},'_6qsxk9'],variants:{resizing:{false:{},true:{borderColor:'border.focus'}}}});
+var icon = Skeleton.recipeRuntime({base:[{h:'12',mx:'2',transition:'opacity'},'_1pce08o'],variants:{active:{false:'_1m42qoo',true:'_1y0nkzn'}}});
 
 const DataTableHeaderCell = React.forwardRef(({ children, header, ...props }, ref) => {
   const sortDir = header.column.getIsSorted();
@@ -1607,7 +1737,7 @@ const DataTableHeaderCell = React.forwardRef(({ children, header, ...props }, re
         ) }),
         header.column.columnDef.enableSorting ? /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Cover, { asChild: true, inset: true, ...button$1(), children: /* @__PURE__ */ jsxRuntime.jsxs("button", { onClick: () => header.column.toggleSorting(), children: [
           children,
-          sortDir && /* @__PURE__ */ jsxRuntime.jsxs(RadixVisuallyHidden.VisuallyHidden, { children: [
+          sortDir && /* @__PURE__ */ jsxRuntime.jsxs(Skeleton.VisuallyHidden, { children: [
             "sorted ",
             sortDir === "asc" ? "ascending" : "descending"
           ] }),
@@ -1807,7 +1937,7 @@ const fakeRow = (table, rowIndex) => ({
   id: "loading" + rowIndex
 });
 
-var addon = Skeleton.recipeRuntime({base:'tafqnq',variants:{position:{end:{textAlign:'end'},start:{}}}});
+var addon = Skeleton.recipeRuntime({base:'l2g92q',variants:{position:{end:{textAlign:'end'},start:{}}}});
 
 const DEFAULT_PAGE_SIZES = ["10", "20", "30", "50", "100"].map((size) => ({
   label: size,
@@ -1892,13 +2022,8 @@ const IconCalendar = Skeleton.withIcon(
   )
 );
 
-var picker = Skeleton.recipeRuntime({base:'_1w47cw6'});
-
-function toInstant(str) {
-  const rawDate = str && typeof str === "string" ? new Date(str.includes("T") ? str : str + "T00:00") : void 0;
-  return isValidDate(rawDate) ? rawDate : void 0;
-}
-const isValidDate = (date) => date ? !isNaN(+date) : false;
+var input$2 = Skeleton.recipeRuntime({base:'_18ijq1u'});
+var picker = Skeleton.recipeRuntime({base:'szk90l'});
 
 const DateInput = React.forwardRef(
   ({
@@ -1918,11 +2043,12 @@ const DateInput = React.forwardRef(
     const innerRef = React.useRef(null);
     const ref = reactComposeRefs.useComposedRefs(innerRef, outerRef);
     const [value, setValue] = reactUseControllableState.useControllableState({
+      caller: "@optiaxiom/react/DateInput",
       defaultProp: props.defaultValue,
       prop: props.value
     });
     const forceValueChange = Skeleton.useObserveValue(innerRef, setValue);
-    const instant = typeof value === "string" ? toInstant(value) : void 0;
+    const instant = typeof value === "string" ? toInstant(value) ?? null : null;
     const maxDate = max ? toInstant(max) : void 0;
     const minDate = min ? toInstant(min) : void 0;
     return /* @__PURE__ */ jsxRuntime.jsxs(Skeleton.Popover, { onOpenChange: setOpen, open: !disabled && open, children: [
@@ -1941,6 +2067,7 @@ const DateInput = React.forwardRef(
               ...picker()
             }
           ),
+          asChild: true,
           disabled,
           max,
           min,
@@ -1949,7 +2076,9 @@ const DateInput = React.forwardRef(
             setValue(event.target.value);
           },
           onClick: (e) => {
-            e.preventDefault();
+            if (CSS.supports("selector(::-webkit-datetime-edit)")) {
+              e.preventDefault();
+            }
           },
           onKeyDown: (e) => {
             if (e.key === " " && CSS.supports("selector(::-webkit-datetime-edit)")) {
@@ -1960,7 +2089,8 @@ const DateInput = React.forwardRef(
           ref,
           step,
           type,
-          ...props
+          ...props,
+          children: /* @__PURE__ */ jsxRuntime.jsx("input", { ...input$2() })
         }
       ) }),
       /* @__PURE__ */ jsxRuntime.jsxs(
@@ -2031,8 +2161,8 @@ const [DatePickerProvider, useDatePickerContext] = reactContext.createContext("@
 
 function DatePicker({
   children,
-  defaultOpen,
-  defaultValue,
+  defaultOpen = false,
+  defaultValue = null,
   disabled,
   onOpenChange,
   onValueChange,
@@ -2043,11 +2173,13 @@ function DatePicker({
   ...props
 }) {
   const [open, setOpen] = reactUseControllableState.useControllableState({
+    caller: "@optiaxiom/react/DatePicker",
     defaultProp: defaultOpen,
     onChange: onOpenChange,
     prop: openProp
   });
   const [value, setValue] = reactUseControllableState.useControllableState({
+    caller: "@optiaxiom/react/DatePicker",
     defaultProp: defaultValue,
     onChange: onValueChange,
     prop: valueProp
@@ -2056,6 +2188,7 @@ function DatePicker({
     DatePickerProvider,
     {
       disabled,
+      setOpen,
       setValue,
       step,
       type,
@@ -2066,7 +2199,7 @@ function DatePicker({
 }
 DatePicker.displayName = "@optiaxiom/react/DatePicker";
 
-var panels$1 = Skeleton.recipeRuntime({base:[{alignItems:'stretch',flexDirection:'row',gap:'0'},'_13mezny']});
+var panels$1 = Skeleton.recipeRuntime({base:[{alignItems:'stretch',flexDirection:'row',gap:'0'},'_1vvuzt9']});
 
 const DatePickerContent = React.forwardRef(
   ({
@@ -2080,7 +2213,7 @@ const DatePickerContent = React.forwardRef(
     weekend,
     ...props
   }, ref) => {
-    const { setValue, step, type, value } = useDatePickerContext(
+    const { setOpen, setValue, step, type, value } = useDatePickerContext(
       "@optiaxiom/react/DatePickerContent"
     );
     const panelRef = React.useRef(null);
@@ -2099,7 +2232,12 @@ const DatePickerContent = React.forwardRef(
                 panelRef.current.style.height = `${height}px`;
               }
             },
-            onValueChange: setValue,
+            onValueChange: (date) => {
+              setValue(date);
+              if (type === "date") {
+                setOpen(false);
+              }
+            },
             step,
             today,
             type,
@@ -2161,8 +2299,8 @@ const [DateRangePickerProvider, useDateRangePickerContext] = reactContext.create
 
 function DateRangePicker({
   children,
-  defaultOpen,
-  defaultValue,
+  defaultOpen = false,
+  defaultValue = null,
   disabled,
   onOpenChange,
   onValueChange,
@@ -2171,11 +2309,13 @@ function DateRangePicker({
   ...props
 }) {
   const [open, setOpen] = reactUseControllableState.useControllableState({
+    caller: "@optiaxiom/react/DateRangePicker",
     defaultProp: defaultOpen,
     onChange: onOpenChange,
     prop: openProp
   });
   const [value, setValue] = reactUseControllableState.useControllableState({
+    caller: "@optiaxiom/react/DateRangePicker",
     defaultProp: defaultValue,
     onChange: onValueChange,
     prop: valueProp
@@ -2207,18 +2347,9 @@ const DateRangePickerContent = React.forwardRef(
     weekend,
     ...props
   }, ref) => {
-    const { open } = Skeleton.usePopoverContext(
-      "@optiaxiom/react/DateRangePickerContent"
-    );
     const { setOpen, setValue, value } = useDateRangePickerContext(
       "@optiaxiom/react/DateRangePickerContent"
     );
-    const [from, setFrom] = React.useState();
-    React.useEffect(() => {
-      if (!open) {
-        setFrom(void 0);
-      }
-    }, [open]);
     return /* @__PURE__ */ jsxRuntime.jsxs(Skeleton.PopoverContent, { gap: "8", maxW: void 0, ref, ...props, children: [
       /* @__PURE__ */ jsxRuntime.jsxs(Skeleton.Flex, { ...panels(), children: [
         addonBefore,
@@ -2230,21 +2361,9 @@ const DateRangePickerContent = React.forwardRef(
             max,
             min,
             mode: "range",
-            onValueChange: (newValue) => {
-              if (!from) {
-                const newFrom = value?.from && newValue?.from && newValue.from < value.from ? newValue.from : newValue?.to;
-                setFrom(newFrom);
-                setValue({
-                  from: newFrom,
-                  to: newFrom ? toInstant(toPlainDate(newFrom) + "T23:59:59.999") : void 0
-                });
-              } else if (newValue?.to) {
-                setValue({
-                  from: newValue.from,
-                  to: toInstant(toPlainDate(newValue.to) + "T23:59:59.999")
-                });
-                setOpen(false);
-              }
+            onValueChange: (value2) => {
+              setValue(value2);
+              setOpen(false);
             },
             today,
             value,
@@ -2297,7 +2416,7 @@ const DateRangePickerTrigger = React.forwardRef(
 );
 DateRangePickerTrigger.displayName = "@optiaxiom/react/DateRangePickerTrigger";
 
-var mark = Skeleton.recipeRuntime({base:'_149qrsl'});
+var mark = Skeleton.recipeRuntime({base:'_1fh7x0c'});
 
 const useHighlightedChunks = (content, query) => {
   const terms = React.useMemo(
@@ -2329,8 +2448,8 @@ const Highlight = React.forwardRef(
 );
 Highlight.displayName = "@optiaxiom/react/Highlight";
 
-var editor = Skeleton.recipeRuntime({base:'_1eno0py',variants:{empty:{false:{},true:'_1jr9e0b'}}});
-var input$1 = Skeleton.recipeRuntime({base:'dy02gb'});
+var editor = Skeleton.recipeRuntime({base:'ezggdp',variants:{empty:{false:{},true:'_147zglj'}}});
+var input$1 = Skeleton.recipeRuntime({base:'_14amwrt'});
 
 const InlineInput = React.forwardRef(
   ({
@@ -2345,6 +2464,7 @@ const InlineInput = React.forwardRef(
     ...props
   }, ref) => {
     const [value, setValue] = reactUseControllableState.useControllableState({
+      caller: "@optiaxiom/react/InlineInput",
       defaultProp: defaultValue,
       onChange: onValueChange,
       prop: valueProp
@@ -2410,7 +2530,7 @@ function getText(element) {
   return text;
 }
 
-var button = Skeleton.recipeRuntime({base:[{justifyContent:'space-between'},'j9asdg']});
+var button = Skeleton.recipeRuntime({base:[{justifyContent:'space-between'},'_165z7ma']});
 var content = Skeleton.recipeRuntime({base:[{fontSize:'sm',transition:'all'}],variants:{filled:{false:{h:'0'},true:{h:'16'}}}});
 var label = Skeleton.recipeRuntime({base:[{color:'fg.secondary',cursor:'pointer',maxW:'full',transition:'all'}],variants:{filled:{false:{fontSize:'md'},true:{fontSize:'xs'}}}});
 
@@ -2422,7 +2542,7 @@ const LabelMenuButton = React.forwardRef(
     return /* @__PURE__ */ jsxRuntime.jsxs(
       Skeleton.ButtonRoot,
       {
-        "aria-labelledby": ariaLabelledBy ?? clsx(labelId, children && valueId),
+        "aria-labelledby": ariaLabelledBy ? clsx(labelId, ariaLabelledBy) : clsx(labelId, children && valueId),
         "data-filled": filled ? "" : void 0,
         ref,
         size: "lg",
@@ -2441,7 +2561,7 @@ const LabelMenuButton = React.forwardRef(
 );
 LabelMenuButton.displayName = "@optiaxiom/react/LabelMenuButton";
 
-var layout = Skeleton.recipeRuntime({base:[{bg:'bg.page',display:'flex',flexDirection:'column',fontSize:'md'},'mavr04']});
+var layout = Skeleton.recipeRuntime({base:[{bg:'bg.page',display:'flex',flexDirection:'column',fontSize:'md'},'_1y6bhal']});
 
 const Layout = React.forwardRef(
   ({ children, className, header, sidebar, ...props }, ref) => {
@@ -2492,11 +2612,13 @@ function Menu({
   });
   const Comp = size === "sm" ? MenuPopover : Skeleton.Dialog;
   const [open, setOpen] = reactUseControllableState.useControllableState({
+    caller: "@optiaxiom/react/Menu",
     defaultProp: defaultOpen,
     onChange: onOpenChange,
     prop: openProp
   });
   const [inputValue, setInputValue] = reactUseControllableState.useControllableState({
+    caller: "@optiaxiom/react/Menu",
     defaultProp: "",
     onChange: onInputValueChange,
     prop: inputValueProp
@@ -2599,6 +2721,7 @@ function Menu({
               }
             }
           },
+          open,
           options,
           ...props,
           children
@@ -2609,13 +2732,6 @@ function Menu({
 }
 Menu.displayName = "@optiaxiom/react/Menu";
 
-const VisuallyHidden = React.forwardRef(
-  ({ children, disabled, ...props }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(RadixVisuallyHidden__namespace.Root, { asChild: true, ref, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton.FilteredSlot, { exclude: disabled ? "style" : void 0, children: /* @__PURE__ */ jsxRuntime.jsx("span", { children }) }) });
-  }
-);
-VisuallyHidden.displayName = "@optiaxiom/react/VisuallyHidden";
-
 const MenuDialogContent = React.forwardRef(
   ({
     align: _align,
@@ -2626,14 +2742,14 @@ const MenuDialogContent = React.forwardRef(
     ...props
   }, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsxs(Skeleton.DialogContent, { ref, transitionType: "pop", ...props, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(RadixVisuallyHidden.VisuallyHidden, { tabIndex: -1, children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton.DialogHeader, { children: ariaLabel }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(Skeleton.VisuallyHidden, { tabIndex: -1, children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton.DialogHeader, { children: ariaLabel }) }),
       children
     ] });
   }
 );
 MenuDialogContent.displayName = "@optiaxiom/react/MenuDialogContent";
 
-var input = Skeleton.recipeRuntime({variants:{size:{sm:{m:'4'},lg:[{border:'0',borderB:'1',borderColor:'border.secondary',rounded:'none'},'_1m3xa98']}}});
+var input = Skeleton.recipeRuntime({variants:{size:{sm:{m:'4'},lg:[{border:'0',borderB:'1',borderColor:'border.secondary',rounded:'none'},'_15n1uf2']}}});
 
 const MenuInput = React.forwardRef(
   ({ className, ...props }, outerRef) => {
@@ -2790,9 +2906,10 @@ const MenuSubContent = React.forwardRef(
                 onSelect(item2, { close });
               }
             },
+            open: true,
             options,
             children: [
-              /* @__PURE__ */ jsxRuntime.jsx(RadixVisuallyHidden.VisuallyHidden, { children: /* @__PURE__ */ jsxRuntime.jsx(
+              /* @__PURE__ */ jsxRuntime.jsx(Skeleton.VisuallyHidden, { children: /* @__PURE__ */ jsxRuntime.jsx(
                 CommandInput,
                 {
                   onKeyDown: (event) => {
@@ -2914,7 +3031,7 @@ const MenuListbox = React.forwardRef(
     const shouldShowGroup = (group) => {
       const show = group !== lastGroup;
       lastGroup = group;
-      return show && !group?.hidden;
+      return show && !!group && !group?.hidden;
     };
     return /* @__PURE__ */ jsxRuntime.jsx(CommandListbox, { ref, ...props, children: children ?? ((item, index) => {
       if (index === 0) {
@@ -2940,7 +3057,7 @@ MenuPopoverContent.displayName = "@optiaxiom/react/MenuPopoverContent";
 
 const MenuContent = React.forwardRef(
   ({ children, ...props }, ref) => {
-    const { labelId } = Skeleton.useFieldContext();
+    const { labelId } = Skeleton.useFieldContext("@optiaxiom/react/MenuContent");
     const { inputVisible, placeholder, size } = useMenuContext(
       "@optiaxiom/react/MenuContent"
     );
@@ -2957,7 +3074,7 @@ const MenuContent = React.forwardRef(
         ref,
         ...props,
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx(VisuallyHidden, { disabled: inputVisible, children: /* @__PURE__ */ jsxRuntime.jsx(MenuInput, { placeholder }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(Skeleton.VisuallyHidden, { disabled: inputVisible, children: /* @__PURE__ */ jsxRuntime.jsx(MenuInput, { placeholder }) }),
           /* @__PURE__ */ jsxRuntime.jsx(
             MenuListbox,
             {
@@ -3002,11 +3119,12 @@ const MenuTrigger = React.forwardRef(
 );
 MenuTrigger.displayName = "@optiaxiom/react/MenuTrigger";
 
-var pill = Skeleton.recipeRuntime({base:[{alignItems:'center',color:'fg.default',display:'flex',fontSize:'sm',gap:'4',px:'6',rounded:'md',whiteSpace:'nowrap'},'upe9zn'],variants:{size:{xs:{h:'xs'},sm:{h:'sm'}}}});
+var pill = Skeleton.recipeRuntime({base:[{alignItems:'center',color:'fg.default',display:'flex',fontSize:'sm',gap:'4',px:'6',rounded:'md',whiteSpace:'nowrap'},'tol3up'],variants:{size:{xs:{h:'xs'},sm:{h:'sm'}}}});
 
+const Slot = reactSlot.createSlot("@optiaxiom/react/Pill");
 const Pill = React.forwardRef(
   ({ asChild, children, className, disabled, size = "sm", ...props }, ref) => {
-    const Comp = asChild ? reactSlot.Slot : "button";
+    const Comp = asChild ? Slot : "button";
     const { boxProps, restProps } = Skeleton.extractBoxProps(props);
     return /* @__PURE__ */ jsxRuntime.jsx(
       Skeleton.Box,
@@ -3073,6 +3191,7 @@ exports.CommandListbox = CommandListbox;
 exports.DataTable = DataTable;
 exports.DataTableBody = DataTableBody;
 exports.DataTableFooter = DataTableFooter;
+exports.DataTableHeaderCell = DataTableHeaderCell;
 exports.DateInput = DateInput;
 exports.DatePicker = DatePicker;
 exports.DatePickerContent = DatePickerContent;