@optiaxiom/react 1.0.1 → 1.0.3

package/dist/cjs/unstable.js

@@ -3,85 +3,86 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
-var Skeleton = require('./Skeleton-CNaCmefy.js');
-require('./assets/src/layers/layers.css.ts.vanilla-DyTVL2_3.css');
-require('./assets/src/breadcrumb-item/BreadcrumbItem.css.ts.vanilla-DgoYAqCh.css');
-require('./assets/src/breadcrumb-link/BreadcrumbLink.css.ts.vanilla-Cn47ANq0.css');
+var Skeleton = require('./Skeleton-CPJVm2Ss.js');
+require('./assets/src/layers/layers.css.ts.vanilla-DVLeQtFY.css');
+require('./assets/src/breadcrumb-item/BreadcrumbItem.css.ts.vanilla-CKeegiae.css');
+require('./assets/src/breadcrumb-link/BreadcrumbLink.css.ts.vanilla-D0g-SbhU.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 reactContext = require('@radix-ui/react-context');
+var reactPortal = require('@radix-ui/react-portal');
+require('./assets/src/select-content/SelectContent.css.ts.vanilla-DG6eCtjF.css');
 var reactSlot = require('@radix-ui/react-slot');
-require('./assets/src/calendar/CalendarDayButton.css.ts.vanilla-D6-K-88g.css');
-require('./assets/src/calendar/CalendarMonths.css.ts.vanilla-BHHNwfNe.css');
-require('./assets/src/calendar/CalendarNav.css.ts.vanilla-Ce40rb_k.css');
+require('./assets/src/calendar/CalendarDayButton.css.ts.vanilla-b4S0bozI.css');
+require('./assets/src/calendar/CalendarMonths.css.ts.vanilla-BSMIxZr7.css');
+require('./assets/src/calendar/CalendarNav.css.ts.vanilla-DNgDmHQz.css');
 var reactId = require('@radix-ui/react-id');
-require('./assets/src/actions-root/ActionsRoot.css.ts.vanilla-DHJpw9Sq.css');
-var reactContext = require('@radix-ui/react-context');
-require('./assets/src/cover/Cover.css.ts.vanilla-v48zCqNX.css');
-require('./assets/src/link/Link.css.ts.vanilla-DeqtSkPy.css');
-require('./assets/src/card/Card.css.ts.vanilla-Ouqcmc7O.css');
-require('./assets/src/actions-content/ActionsContent.css.ts.vanilla-CNSt4eb-.css');
-require('./assets/src/card-overflow/CardOverflow.css.ts.vanilla-Bjtrsl2l.css');
-require('./assets/src/card-actions/CardActions.css.ts.vanilla-BND_UtEt.css');
+require('./assets/src/actions-root/ActionsRoot.css.ts.vanilla-5weXmjJ7.css');
+require('./assets/src/cover/Cover.css.ts.vanilla-2WyhKF__.css');
+require('./assets/src/link/Link.css.ts.vanilla-B7Ubxpmv.css');
+require('./assets/src/card/Card.css.ts.vanilla-CEvWY43O.css');
+require('./assets/src/actions-content/ActionsContent.css.ts.vanilla-CA5T1ci3.css');
+require('./assets/src/card-overflow/CardOverflow.css.ts.vanilla-fRKjpbqF.css');
+require('./assets/src/card-action/CardAction.css.ts.vanilla-DZJLp_d6.css');
 var reactVisuallyHidden = require('@radix-ui/react-visually-hidden');
 var clsx = require('clsx');
-require('./assets/src/card-image/CardImage.css.ts.vanilla-_YBViqmQ.css');
+require('./assets/src/card-image/CardImage.css.ts.vanilla-DyXsUGQN.css');
 var RadixDialog = require('@radix-ui/react-dialog');
-require('./assets/src/command-focusable-item/CommandFocusableItem.css.ts.vanilla-K5WlJduF.css');
-var downshift = require('downshift');
-var reactComposeRefs = require('@radix-ui/react-compose-refs');
+require('./assets/src/command-focusable-item/CommandFocusableItem.css.ts.vanilla-COhGgawe.css');
 var reactVirtual = require('@tanstack/react-virtual');
 var reactTable = require('@tanstack/react-table');
 var dynamic = require('@vanilla-extract/dynamic');
-require('./assets/src/table-header-cell/TableHeaderCell.css.ts.vanilla-B6_iBtM8.css');
-require('./assets/src/data-table-header-cell/DataTableHeaderCell.css.ts.vanilla-CfXLzb22.css');
-require('./assets/src/table/Table.css.ts.vanilla-m_5amuaM.css');
-require('./assets/src/table-body/TableBody.css.ts.vanilla-EjrS2W7k.css');
-require('./assets/src/table-row/TableRow.css.ts.vanilla-CL49XjrM.css');
-require('./assets/src/table-cell/TableCell.css.ts.vanilla-BsFSemxF.css');
-require('./assets/src/data-table-body/DataTableBody.css.ts.vanilla-B5wqjvSM.css');
-var reactPopper = require('@radix-ui/react-popper');
-var reactPortal = require('@radix-ui/react-portal');
-require('./assets/src/select-content/SelectContent.css.ts.vanilla-DLuO9EyO.css');
-require('./assets/src/data-table-footer/DataTableFooter.css.ts.vanilla-B8M3YGIh.css');
-require('./assets/src/date-input/DateInput.css.ts.vanilla-Dh7Ttbc1.css');
-require('./assets/src/date-picker-content/DatePickerContent.css.ts.vanilla-Bw17SkGI.css');
-require('./assets/src/date-range-picker-content/DateRangePickerContent.css.ts.vanilla-MGfoUcbA.css');
-require('./assets/src/highlight/Highlight.css.ts.vanilla-C8LHP3AM.css');
-require('./assets/src/inline-input/InlineInput.css.ts.vanilla-SynEjQCL.css');
-require('./assets/src/pill/Pill.css.ts.vanilla-DHaE_1ux.css');
-require('./assets/src/spotlight-input/SpotlightInput.css.ts.vanilla-DddXlyav.css');
-require('./assets/src/spotlight-radio-item/SpotlightRadioItem.css.ts.vanilla-C1yCu1O5.css');
-require('./assets/src/badge/Badge.css.ts.vanilla-Bx8EXi5x.css');
-require('./assets/src/spotlight-sub-item/SpotlightSubItem.css.ts.vanilla-D9lw7VBw.css');
-require('./assets/src/backdrop/Backdrop.css.ts.vanilla-BjD8bwE3.css');
-require('./assets/src/dialog-content/DialogContent.css.ts.vanilla-CiyPX0lq.css');
+require('./assets/src/table-header-cell/TableHeaderCell.css.ts.vanilla-BA2UHgjZ.css');
+require('./assets/src/data-table-header-cell/DataTableHeaderCell.css.ts.vanilla-4Ki8cozo.css');
+require('./assets/src/table/Table.css.ts.vanilla-CpRGDMDN.css');
+require('./assets/src/table-body/TableBody.css.ts.vanilla-CAXFA-2C.css');
+require('./assets/src/table-row/TableRow.css.ts.vanilla-B1YWGfFN.css');
+require('./assets/src/table-cell/TableCell.css.ts.vanilla-BftHpLE1.css');
+require('./assets/src/data-table-body/DataTableBody.css.ts.vanilla-NehT-bUe.css');
+require('./assets/src/data-table-footer/DataTableFooter.css.ts.vanilla-BBV3D3MS.css');
+require('./assets/src/date-input/DateInput.css.ts.vanilla-iSIgi9uS.css');
+require('./assets/src/date-picker-content/DatePickerContent.css.ts.vanilla-obBMUM8-.css');
+require('./assets/src/date-range-picker-content/DateRangePickerContent.css.ts.vanilla-CW_fG4pc.css');
+require('./assets/src/highlight/Highlight.css.ts.vanilla-CJPCQckm.css');
+require('./assets/src/inline-input/InlineInput.css.ts.vanilla--SgFZPFK.css');
+require('./assets/src/layout/Layouts.css.ts.vanilla-KTj0kQeR.css');
+require('./assets/src/pill/Pill.css.ts.vanilla-CEBGgfpR.css');
+require('./assets/src/spotlight-input/SpotlightInput.css.ts.vanilla-D1k1vkLA.css');
+require('./assets/src/spotlight-radio-item/SpotlightRadioItem.css.ts.vanilla-B9B3hYqI.css');
+require('./assets/src/badge/Badge.css.ts.vanilla-CnNAuAF5.css');
+require('./assets/src/spotlight-sub-item/SpotlightSubItem.css.ts.vanilla-CCzEd24A.css');
+require('./assets/src/backdrop/Backdrop.css.ts.vanilla-ziUyXpin.css');
+require('./assets/src/dialog-content/DialogContent.css.ts.vanilla-Cu1TmZGG.css');
 require('@radix-ui/react-separator');
-require('./assets/src/separator/Separator.css.ts.vanilla-B8GQ6mxo.css');
-require('./assets/src/input-control/InputControl.css.ts.vanilla-La8ieGPk.css');
-require('./assets/src/actions-root/ActionsRoot.css.ts.vanilla-DHJpw9Sq.css');
-require('./assets/src/input-root/InputRoot.css.ts.vanilla-BwPh9WNi.css');
-require('./assets/src/actions-root/ActionsRoot.css.ts.vanilla-DHJpw9Sq.css');
-require('./assets/src/toggle-input/ToggleInput.css.ts.vanilla-Cv1vG0-L.css');
-require('./assets/src/toggle-input-control/ToggleInputControl.css.ts.vanilla-BrEwoQht.css');
-require('./assets/src/checkbox-control/CheckboxControl.css.ts.vanilla-kkzyyTIa.css');
-require('./assets/src/listbox-item/ListboxItem.css.ts.vanilla-DncbBP2k.css');
+require('./assets/src/separator/Separator.css.ts.vanilla-CK7ilmRH.css');
+require('./assets/src/input-control/InputControl.css.ts.vanilla-BjLXAT_t.css');
+require('./assets/src/actions-root/ActionsRoot.css.ts.vanilla-5weXmjJ7.css');
+require('./assets/src/input-root/InputRoot.css.ts.vanilla-Dzj_Gux4.css');
+require('./assets/src/actions-root/ActionsRoot.css.ts.vanilla-5weXmjJ7.css');
+require('./assets/src/toggle-input/ToggleInput.css.ts.vanilla-DQ4H7ykl.css');
+require('./assets/src/toggle-input-control/ToggleInputControl.css.ts.vanilla-_1F3C9Rj.css');
+require('./assets/src/checkbox-control/CheckboxControl.css.ts.vanilla-CkDCH_wt.css');
+require('./assets/src/listbox-item/ListboxItem.css.ts.vanilla-nGgdT1Xu.css');
 require('@radix-ui/react-dismissable-layer');
 require('@radix-ui/react-focus-guards');
 require('react-remove-scroll');
 require('@optiaxiom/globals');
 require('@radix-ui/react-tooltip');
-require('./assets/src/text/Text.css.ts.vanilla-CEyXqH38.css');
-require('./assets/src/pagination/Pagination.css.ts.vanilla-SgNxURt9.css');
+require('./assets/src/text/Text.css.ts.vanilla-CS_BCRaJ.css');
+require('./assets/src/pagination/Pagination.css.ts.vanilla-8t4DndA7.css');
 require('@radix-ui/react-popover');
-require('./assets/src/menu-listbox/MenuListbox.css.ts.vanilla-Cl6e7RIA.css');
-require('./assets/src/button-base/ButtonBase.css.ts.vanilla-DTUlp8SE.css');
-require('./assets/src/button-loadable/ButtonLoadable.css.ts.vanilla-DZpVyRyv.css');
-require('./assets/src/spinner/Spinner.css.ts.vanilla-xZ0NwOuS.css');
-require('./assets/src/transition/Transition.css.ts.vanilla-Cftj80jO.css');
+require('./assets/src/menu-listbox/MenuListbox.css.ts.vanilla-CNFumDy8.css');
+require('./assets/src/button-base/ButtonBase.css.ts.vanilla-DrQkyKY6.css');
+require('./assets/src/button-loadable/ButtonLoadable.css.ts.vanilla-C0KdnzNv.css');
+require('./assets/src/spinner/Spinner.css.ts.vanilla-BqDTfUxp.css');
+require('./assets/src/transition/Transition.css.ts.vanilla-BZVHMidV.css');
 require('@optiaxiom/globals/fonts');
-require('./assets/src/sprinkles/properties.css.ts.vanilla-UR1vRDLw.css');
-require('./assets/src/box/Box.css.ts.vanilla-C7tRNYsu.css');
-require('./assets/src/skeleton/Skeleton.css.ts.vanilla-CYViS28a.css');
+require('./assets/src/sprinkles/properties.css.ts.vanilla-B1HErXb1.css');
+require('./assets/src/box/Box.css.ts.vanilla-CeerNWEh.css');
+require('./assets/src/skeleton/Skeleton.css.ts.vanilla-CoBgbbbC.css');
 
 function _interopNamespaceDefault(e) {
   var n = Object.create(null);
@@ -102,6 +103,16 @@ function _interopNamespaceDefault(e) {
 
 var RadixDialog__namespace = /*#__PURE__*/_interopNamespaceDefault(RadixDialog);
 
+const toPlainDateTime = (date) => new Date(date.getTime() - new Date(date).getTimezoneOffset() * 60 * 1e3).toISOString().slice(0, -1);
+
+const toPlainDate = (date) => toPlainDateTime(date).split("T")[0];
+
+const toPlainTime = (date, step = "60") => {
+  const stepInMinutes = (typeof step === "string" ? parseInt(step) : step) / 60;
+  const [hour, minute] = toPlainDateTime(date).split("T")[1].slice(0, 5).split(":");
+  return hour + ":" + (Math.floor(parseInt(minute) / stepInMinutes) * stepInMinutes).toString().padStart(2, "0");
+};
+
 function attachMediaListener(query, callback) {
   try {
     query.addEventListener("change", callback);
@@ -233,7 +244,7 @@ function BreadcrumbEllipsis({ ...props }) {
 }
 BreadcrumbEllipsis.displayName = "@optiaxiom/react/BreadcrumbEllipsis";
 
-var item$3 = Skeleton.recipeRuntime({base:[{alignItems:'center',display:'inline-flex'},'_102s0zx']});
+var item$3 = Skeleton.recipeRuntime({base:[{alignItems:'center',display:'inline-flex'},'_1f86mql']});
 
 const BreadcrumbItem = React.forwardRef(
   ({ children, className, ...props }, ref) => {
@@ -243,7 +254,7 @@ const BreadcrumbItem = React.forwardRef(
 );
 BreadcrumbItem.displayName = "@optiaxiom/react/BreadcrumbItem";
 
-var link = Skeleton.recipeRuntime({base:[{alignItems:'center',display:'flex',fontSize:'md',h:'md',rounded:'md'},'_1whzku']});
+var link = Skeleton.recipeRuntime({base:[{alignItems:'center',display:'flex',fontSize:'md',h:'md',rounded:'md'},'_1csj2r9']});
 
 const BreadcrumbLink = React.forwardRef(({ className, ...props }, ref) => {
   return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Link, { ...link({}, className), ref, ...props });
@@ -257,6 +268,335 @@ const BreadcrumbPage = React.forwardRef(
 );
 BreadcrumbPage.displayName = "@optiaxiom/react/BreadcrumbPage";
 
+function usePortalPatch(open, initialHighlightedIndex = -1) {
+  const [placed, setPlaced] = React.useState(false);
+  React.useEffect(() => {
+    return () => setPlaced(false);
+  }, [open]);
+  const [highlightedIndex, setHighlightedIndex] = React.useState(
+    initialHighlightedIndex
+  );
+  return [
+    /**
+     * Downshift attempts to scroll to the currently selected item when the menu
+     * opens. But since we don't render the menu until it is open the `ref` will
+     * not be available yet.
+     *
+     * So we only return the index when it has been placed and return -1
+     * otherwise.
+     */
+    placed ? highlightedIndex : -1,
+    setHighlightedIndex,
+    placed,
+    setPlaced
+  ];
+}
+
+const [SelectProvider, useSelectContext] = reactContext.createContext("@optiaxiom/react/Select");
+
+function Select({
+  children,
+  defaultOpen = false,
+  defaultValue,
+  disabled,
+  items,
+  itemToKey = (value2) => value2,
+  itemToString = (value2) => value2 ? String(value2) : "",
+  onOpenChange,
+  onValueChange,
+  open,
+  value,
+  ...props
+}) {
+  const [selectedItem, setSelectedItem] = reactUseControllableState.useControllableState({
+    defaultProp: defaultValue,
+    onChange: onValueChange,
+    prop: value
+  });
+  const [isOpen, setIsOpen] = reactUseControllableState.useControllableState({
+    defaultProp: defaultOpen,
+    onChange: onOpenChange,
+    prop: open
+  });
+  const [highlightedIndex, setHighlightedIndex, placed, setPlaced] = usePortalPatch(
+    isOpen,
+    selectedItem ? items.findIndex((item) => itemToKey(selectedItem) === itemToKey(item)) : -1
+  );
+  const downshift$1 = downshift.useSelect({
+    ...props,
+    highlightedIndex,
+    isOpen: placed,
+    items,
+    itemToKey,
+    itemToString,
+    onHighlightedIndexChange(changes) {
+      setHighlightedIndex(changes.highlightedIndex);
+    },
+    onIsOpenChange({ isOpen: isOpen2 }) {
+      setIsOpen(isOpen2);
+    },
+    onSelectedItemChange({ selectedItem: selectedItem2 }) {
+      setSelectedItem(selectedItem2);
+    },
+    selectedItem: selectedItem ?? null
+  });
+  downshift$1.getMenuProps({}, { suppressRefError: true });
+  return /* @__PURE__ */ jsxRuntime.jsx(reactPopper.Popper, { children: /* @__PURE__ */ jsxRuntime.jsx(
+    SelectProvider,
+    {
+      disabled,
+      downshift: downshift$1,
+      highlightedItem: items[highlightedIndex],
+      isOpen,
+      items,
+      itemToKey,
+      itemToString,
+      placed,
+      selectedItem,
+      setPlaced,
+      children
+    }
+  ) });
+}
+Select.displayName = "@optiaxiom/react/Select";
+
+var content$2 = Skeleton.recipeRuntime({base:['_1v8c39f']});
+
+const SelectContent = React.forwardRef(
+  ({
+    align = "start",
+    children,
+    className,
+    loading,
+    side = "bottom",
+    ...props
+  }, ref) => {
+    const { boxProps, restProps } = Skeleton.extractBoxProps(props);
+    const { downshift, isOpen, placed, setPlaced } = useSelectContext(
+      "@optiaxiom/react/SelectContent"
+    );
+    return isOpen && /* @__PURE__ */ jsxRuntime.jsx(reactPortal.Portal, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton.ModalLayer, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+      Skeleton.MenuListbox,
+      {
+        asChild: true,
+        maxH: "sm",
+        minW: loading ? "trigger" : void 0,
+        provider: "popper",
+        ...content$2({}, className),
+        ...boxProps,
+        ...downshift.getMenuProps(
+          { ref, ...restProps },
+          { suppressRefError: !placed }
+        ),
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          reactPopper.PopperContent,
+          {
+            align,
+            onPlaced: () => setPlaced(true),
+            side,
+            sideOffset: 5,
+            children: loading ? /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { display: "flex", justifyContent: "center", p: "16", children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Spinner, {}) }) : children
+          }
+        )
+      }
+    ) }) });
+  }
+);
+SelectContent.displayName = "@optiaxiom/react/SelectContent";
+
+const SelectItem = React.forwardRef(
+  ({ children, item, size, ...props }, ref) => {
+    const { downshift, highlightedItem, selectedItem } = useSelectContext(
+      "@optiaxiom/react/SelectItem"
+    );
+    const itemProps = downshift.getItemProps({ item, ref, ...props });
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Skeleton.Box,
+      {
+        "data-disabled": itemProps["aria-disabled"] ? "" : void 0,
+        "data-highlighted": highlightedItem === item ? "" : void 0,
+        "data-selected": selectedItem === item ? "" : void 0,
+        size,
+        ...itemProps,
+        children
+      }
+    );
+  }
+);
+SelectItem.displayName = "@optiaxiom/react/SelectItem";
+
+const SelectRadioItem = React.forwardRef(
+  ({ children, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { asChild: true, ref, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton.ListboxRadioItem, { children }) });
+  }
+);
+SelectRadioItem.displayName = "@optiaxiom/react/SelectRadioItem";
+
+const useFieldLabelTrigger = (ref, ariaLabelledBy) => {
+  const { labelId = ariaLabelledBy } = Skeleton.useFieldContext();
+  React.useEffect(() => {
+    if (!labelId || !ref.current) {
+      return;
+    }
+    const button = ref.current;
+    const label = document.getElementById(labelId);
+    if (!label) {
+      return;
+    }
+    const onLabelClick = () => button.focus();
+    label.addEventListener("click", onLabelClick);
+    return () => label.removeEventListener("click", onLabelClick);
+  }, [labelId, ref]);
+  return labelId;
+};
+
+const SelectTrigger = React.forwardRef(
+  ({
+    "aria-labelledby": ariaLabelledBy,
+    asChild,
+    children,
+    onKeyDown,
+    placeholder,
+    ...props
+  }, ref) => {
+    const { disabled, downshift, isOpen, itemToString, selectedItem } = useSelectContext("@optiaxiom/react/SelectTrigger");
+    const { boxProps, restProps } = Skeleton.extractBoxProps(props);
+    const buttonRef = React.useRef(null);
+    const labelId = useFieldLabelTrigger(buttonRef, ariaLabelledBy);
+    const [focusOnOpen] = React.useState(isOpen);
+    React.useEffect(
+      function() {
+        if (focusOnOpen && buttonRef.current) {
+          buttonRef.current.focus();
+        }
+      },
+      [focusOnOpen]
+    );
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      reactPopper.PopperAnchor,
+      {
+        asChild: true,
+        ...boxProps,
+        ...downshift.getToggleButtonProps({
+          ...restProps,
+          "aria-labelledby": labelId,
+          disabled,
+          onKeyDown: (event) => {
+            onKeyDown?.(event);
+            document.dispatchEvent(new Event("tooltip.open"));
+          }
+        }),
+        children: /* @__PURE__ */ jsxRuntime.jsx(reactSlot.Slot, { ref, children: asChild ? children : /* @__PURE__ */ jsxRuntime.jsx(Skeleton.AngleMenuButton, { ref: buttonRef, children: children ?? (selectedItem ? itemToString(selectedItem) : placeholder) }) })
+      }
+    );
+  }
+);
+SelectTrigger.displayName = "@optiaxiom/react/SelectTrigger";
+
+const format = ({
+  hour,
+  meridiem,
+  minute
+}) => {
+  const formattedHour = parseInt(hour) === 12 ? 0 : parseInt(hour);
+  return (formattedHour + (meridiem === "PM" ? 12 : 0)).toString().padStart(2, "0") + ":" + minute;
+};
+const parse = (value, step = 1) => {
+  const now = /* @__PURE__ */ new Date();
+  const [hour, minute] = (value ? value : `${now.getHours()}:${now.getMinutes()}`).split(":");
+  const parsedHour = parseInt(hour) % 12 === 0 ? 12 : parseInt(hour) % 12;
+  return {
+    hour: parsedHour.toString(),
+    meridiem: parseInt(hour) < 12 ? "AM" : "PM",
+    minute: (Math.floor(parseInt(minute) / step) * step).toString().padStart(2, "0")
+  };
+};
+const range = (min, max, step = 1) => Array.from(
+  { length: Math.floor((max - min) / step) + 1 },
+  (_, index) => (min + index * step).toString()
+);
+
+const Clock = React.forwardRef(
+  ({ defaultValue, onValueChange, step = "60", value: valueProp, ...props }, ref) => {
+    const [value, setValue] = reactUseControllableState.useControllableState({
+      defaultProp: defaultValue,
+      onChange: onValueChange,
+      prop: valueProp
+    });
+    const stepInMinutes = (typeof step === "string" ? parseInt(step) : step) / 60;
+    const parsed = parse(value, stepInMinutes);
+    const hours = range(1, 12);
+    const minutes = range(0, 59, stepInMinutes).map(
+      (minute) => minute.padStart(2, "0")
+    );
+    const periods = ["AM", "PM"];
+    return /* @__PURE__ */ jsxRuntime.jsxs(Skeleton.Flex, { flexDirection: "row", gap: "4", ref, ...props, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        Select,
+        {
+          items: hours,
+          onValueChange: (hour) => hour && setValue(format({ ...parsed, hour })),
+          value: parsed.hour,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(SelectTrigger, { "aria-label": "Select hour", flex: "1", placeholder: "HH" }),
+            /* @__PURE__ */ jsxRuntime.jsx(SelectContent, { children: hours.map((hour) => /* @__PURE__ */ jsxRuntime.jsx(SelectRadioItem, { item: hour, children: hour }, hour)) })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        Select,
+        {
+          items: minutes,
+          onValueChange: (minute) => minute && setValue(format({ ...parsed, minute })),
+          value: parsed.minute,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(SelectTrigger, { "aria-label": "Select minute", flex: "1", placeholder: "MM" }),
+            /* @__PURE__ */ jsxRuntime.jsx(SelectContent, { children: minutes.map((minute) => /* @__PURE__ */ jsxRuntime.jsx(
+              SelectRadioItem,
+              {
+                "aria-label": `${parseInt(minute)}`,
+                item: minute,
+                children: minute
+              },
+              minute
+            )) })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        Select,
+        {
+          items: periods,
+          onValueChange: (meridiem) => meridiem && setValue(format({ ...parsed, meridiem })),
+          value: parsed.meridiem,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              SelectTrigger,
+              {
+                "aria-label": "Select AM or PM",
+                flex: "1",
+                placeholder: "--"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(SelectContent, { children: periods.map((meridiem) => /* @__PURE__ */ jsxRuntime.jsx(SelectRadioItem, { item: meridiem, children: meridiem }, meridiem)) })
+          ]
+        }
+      )
+    ] });
+  }
+);
+Clock.displayName = "@optiaxiom/react/Clock";
+
+function useEffectEvent(callback) {
+  const callbackRef = React.useRef(callback);
+  React.useEffect(() => {
+    callbackRef.current = callback;
+  });
+  return React.useCallback((...args) => {
+    return callbackRef.current(...args);
+  }, []);
+}
+
 const list = ["md", "sm"];
 const useResponsiveMatches = (config) => {
   const matches = {
@@ -281,12 +621,12 @@ function CalendarChevron({
 CalendarChevron.displayName = "@optiaxiom/react/CalendarChevron";
 
 function CalendarDay({ children, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(reactDayPicker.Day, { ...props, children }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { asChild: true, flex: "1", children: /* @__PURE__ */ jsxRuntime.jsx(reactDayPicker.Day, { ...props, children }) });
 }
 CalendarDay.displayName = "@optiaxiom/react/CalendarDay";
 
-var button$1 = Skeleton.recipeRuntime({base:[{color:'fg.default',fontSize:'md',mt:'8',size:'md',transition:'colors'},'_188m4i0'],variants:{appearance:{'default':'fm70be',holiday:[{color:'fg.error'},'_1lfksty'],range_middle:'_1b14rcc',selected:[{color:'fg.white'},'v555q7'],weekend:{color:'fg.tertiary'}},range:{end:['r0s06c'],middle:['derbi9'],start:['_27owlc']}}});
-var today = Skeleton.recipeRuntime({base:[{bg:'current',mx:'auto',rounded:'full'},'a7xyli']});
+var button$1 = Skeleton.recipeRuntime({base:[{color:'fg.default',fontSize:'md',size:'md',transition:'colors'},'_1qpdyow'],variants:{appearance:{'default':'_1pyw366',holiday:[{color:'fg.error'},'_1y5wbvb'],range_middle:'_1lcvfzj',selected:[{color:'fg.white'},'_1sqcpe3'],weekend:[{color:'fg.tertiary'},'u41ecl']},range:{end:['_1e3fua0'],middle:['_1fjcw9m'],start:['amrc65']}}});
+var today = Skeleton.recipeRuntime({base:[{bg:'current',mx:'auto',rounded:'full'},'_13y86ts']});
 
 function CalendarDayButton({
   children,
@@ -351,14 +691,14 @@ function CalendarMonthGrid({
 }
 CalendarMonthGrid.displayName = "@optiaxiom/react/CalendarMonthGrid";
 
-var months = Skeleton.recipeRuntime({base:[{alignItems:'start',flexDirection:'row'},'_1qt1lh1']});
+var months = Skeleton.recipeRuntime({base:[{alignItems:'start',flexDirection:'row'},'zjnsb5']});
 
 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'},'_1407c4p']});
+var nav = Skeleton.recipeRuntime({base:[{display:'flex',justifyContent:'space-between',w:'full'},'_1ljd6m8']});
 
 function CalendarNav({ children, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { asChild: true, ...nav(), children: /* @__PURE__ */ jsxRuntime.jsx(reactDayPicker.Nav, { ...props, children }) });
@@ -383,11 +723,24 @@ function CalendarPreviousMonthButton({
 }
 CalendarPreviousMonthButton.displayName = "@optiaxiom/react/CalendarPreviousMonthButton";
 
+function CalendarWeek({ children, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { asChild: true, display: "flex", gap: "2", children: /* @__PURE__ */ jsxRuntime.jsx(reactDayPicker.Week, { ...props, children }) });
+}
+CalendarWeek.displayName = "@optiaxiom/react/CalendarWeek";
+
 function CalendarWeekday({ children, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { asChild: true, color: "fg.tertiary", fontSize: "sm", fontWeight: "400", children: /* @__PURE__ */ jsxRuntime.jsx(reactDayPicker.Weekday, { ...props, children }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { asChild: true, color: "fg.tertiary", flex: "1", fontSize: "sm", fontWeight: "400", children: /* @__PURE__ */ jsxRuntime.jsx(reactDayPicker.Weekday, { ...props, children }) });
 }
 CalendarWeekday.displayName = "@optiaxiom/react/CalendarWeekday";
 
+function CalendarWeekdays({
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { asChild: true, display: "flex", flexDirection: "column", mb: "6", children: /* @__PURE__ */ jsxRuntime.jsx("thead", { "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { asChild: true, display: "flex", gap: "2", children: /* @__PURE__ */ jsxRuntime.jsx("tr", { ...props, children }) }) }) });
+}
+CalendarWeekdays.displayName = "@optiaxiom/react/CalendarWeekdays";
+
 const components = {
   Chevron: CalendarChevron,
   Day: CalendarDay,
@@ -398,7 +751,9 @@ const components = {
   Nav: CalendarNav,
   NextMonthButton: CalendarNextMonthButton,
   PreviousMonthButton: CalendarPreviousMonthButton,
-  Weekday: CalendarWeekday
+  Week: CalendarWeek,
+  Weekday: CalendarWeekday,
+  Weekdays: CalendarWeekdays
 };
 const Calendar = React.forwardRef(
   ({
@@ -407,53 +762,100 @@ const Calendar = React.forwardRef(
     max,
     min,
     mode = "single",
+    onHeightChange,
     onValueChange,
+    step,
     today,
+    type = "date",
     value: valueProp,
     weekend,
     ...props
-  }, ref) => {
+  }, outerRef) => {
     const [value, setValue] = reactUseControllableState.useControllableState({
       defaultProp: defaultValue,
       onChange: onValueChange,
       prop: valueProp
     });
+    const time = type === "date" ? "00:00" : toPlainTime(value instanceof Date ? value : /* @__PURE__ */ new Date(), step);
     const numberOfMonths = useResponsiveMatches({
       base: 1,
       sm: 2
     });
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      Skeleton.Box,
+    const innerRef = React.useRef(null);
+    const ref = reactComposeRefs.useComposedRefs(innerRef, outerRef);
+    const onHeightChangeStable = useEffectEvent(onHeightChange ?? (() => {
+    }));
+    React.useEffect(() => {
+      if (!innerRef.current) {
+        return;
+      }
+      const observer = new ResizeObserver((entries) => {
+        for (const entry of entries) {
+          onHeightChangeStable(entry.contentRect.height);
+        }
+      });
+      observer.observe(innerRef.current);
+      return () => observer.disconnect();
+    }, [onHeightChangeStable]);
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      Skeleton.Flex,
       {
         bg: "bg.default",
         color: "fg.default",
         fontSize: "md",
+        gap: "4",
         ref,
         ...props,
-        children: /* @__PURE__ */ jsxRuntime.jsx(
-          reactDayPicker.DayPicker,
-          {
-            autoFocus: true,
-            components,
-            defaultMonth: value && typeof value === "object" && "from" in value ? value.from : value,
-            endMonth: max,
-            mode,
-            modifiers: { holiday, weekend },
-            numberOfMonths: mode === "range" ? numberOfMonths : 1,
-            onSelect: setValue,
-            required: true,
-            selected: value,
-            startMonth: min,
-            today
-          }
-        )
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            reactDayPicker.DayPicker,
+            {
+              autoFocus: true,
+              components,
+              defaultMonth: value && typeof value === "object" && "from" in value ? value.from : value,
+              disabled: [
+                ...min ? [{ before: min }] : [],
+                ...max ? [{ after: max }] : []
+              ],
+              mode,
+              modifiers: { holiday, weekend },
+              numberOfMonths: mode === "range" ? numberOfMonths : 1,
+              onSelect: (value2) => {
+                setValue(
+                  value2 instanceof Date ? /* @__PURE__ */ new Date(toPlainDate(value2) + "T" + (time ?? "00:00")) : value2
+                );
+              },
+              required: true,
+              selected: value,
+              today
+            }
+          ),
+          type === "datetime-local" && mode == "single" && /* @__PURE__ */ jsxRuntime.jsxs(Skeleton.Flex, { gap: "8", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Separator, { mb: "4" }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              Clock,
+              {
+                onValueChange: (time2) => {
+                  setValue(
+                    /* @__PURE__ */ new Date(
+                      toPlainDate(value instanceof Date ? value : /* @__PURE__ */ new Date()) + "T" + time2
+                    )
+                  );
+                },
+                step,
+                value: time
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Text, { color: "fg.tertiary", fontSize: "sm", w: "full", children: (value instanceof Date ? value : /* @__PURE__ */ new Date()).toTimeString().slice(9) })
+          ] })
+        ]
       }
     );
   }
 );
 Calendar.displayName = "@optiaxiom/react/Calendar";
 
-var root = Skeleton.recipeRuntime({base:'_170d0ll'});
+var root = Skeleton.recipeRuntime({base:'_15tjkjn'});
 
 const ActionsRoot = React.forwardRef(
   ({ children, className, ...props }, ref) => {
@@ -462,9 +864,9 @@ const ActionsRoot = React.forwardRef(
 );
 ActionsRoot.displayName = "@optiaxiom/react/ActionsRoot";
 
-const [CardContextProvider, useCardContext] = reactContext.createContext("Card");
+const [CardProvider, useCardContext] = reactContext.createContext("@optiaxiom/react/Card");
 
-var card = Skeleton.recipeRuntime({base:['_19zhyx0',{border:'1',borderColor:'border.tertiary',color:'fg.default',gap:'12',p:'16',transition:'transform'},'_16p3qmt']});
+var card = Skeleton.recipeRuntime({base:['_1x3bgue',{border:'1',borderColor:'border.tertiary',color:'fg.default',gap:'12',p:'16',transition:'transform'},'ht0sif']});
 
 const mapOrientationToFlexDirection = {
   horizontal: "row",
@@ -475,7 +877,7 @@ const Card = React.forwardRef(
     const descriptionId = reactId.useId();
     const labelId = reactId.useId();
     return /* @__PURE__ */ jsxRuntime.jsx(
-      CardContextProvider,
+      CardProvider,
       {
         descriptionId,
         labelId,
@@ -496,28 +898,28 @@ const Card = React.forwardRef(
 );
 Card.displayName = "@optiaxiom/react/Card";
 
-var content$2 = Skeleton.recipeRuntime({base:[{display:'flex',justifyContent:'space-between'},'haqolb'],variants:{visible:{false:'_1rqo7qr',true:'_19bybqw'}}});
+var content$1 = Skeleton.recipeRuntime({base:[{display:'flex',justifyContent:'space-between'},'_10qqj1q'],variants:{visible:{false:'_7tt5wy',true:'_1y2d3tw'}}});
 
 const ActionsContent = React.forwardRef(
   ({ children, className, visible = false, ...props }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { ref, ...content$2({ visible }, className), ...props, children });
+    return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { ref, ...content$1({ visible }, className), ...props, children });
   }
 );
 ActionsContent.displayName = "@optiaxiom/react/ActionsContent";
 
-var actions = Skeleton.recipeRuntime({base:['xlfttp']});
+var action = Skeleton.recipeRuntime({base:['c6cchr']});
 
-const CardActions = React.forwardRef(
+const CardAction = React.forwardRef(
   ({ children, className, ...props }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(ActionsContent, { ref, ...actions({}, className), ...props, children });
+    return /* @__PURE__ */ jsxRuntime.jsx(ActionsContent, { ref, ...action({}, className), ...props, children });
   }
 );
-CardActions.displayName = "@optiaxiom/react/CardActions";
+CardAction.displayName = "@optiaxiom/react/CardAction";
 
 const CardCheckbox = React.forwardRef(
   ({ children, indeterminate, onChange, ...props }, ref) => {
     const labelPrefixId = reactId.useId();
-    const { labelId } = useCardContext("CardCheckbox");
+    const { labelId } = useCardContext("@optiaxiom/react/CardCheckbox");
     const [checked, setChecked] = reactUseControllableState.useControllableState({
       defaultProp: props.defaultChecked,
       prop: props.checked
@@ -560,7 +962,7 @@ const CardContent = React.forwardRef(
 CardContent.displayName = "@optiaxiom/react/CardContent";
 
 const CardDescription = React.forwardRef(({ children, ...props }, ref) => {
-  const { descriptionId } = useCardContext("CardDescription");
+  const { descriptionId } = useCardContext("@optiaxiom/react/CardDescription");
   return /* @__PURE__ */ jsxRuntime.jsx(
     Skeleton.Text,
     {
@@ -575,11 +977,11 @@ const CardDescription = React.forwardRef(({ children, ...props }, ref) => {
 });
 CardDescription.displayName = "@optiaxiom/react/CardDescription";
 
-var cardImage = Skeleton.recipeRuntime({base:[{h:'full',rounded:'inherit'},'_1eik5sy'],variants:{orientation:{horizontal:[{w:'auto'},'vht29a'],vertical:[{w:'full'},'fgxlcv']}}});
+var cardImage = Skeleton.recipeRuntime({base:[{h:'full',rounded:'inherit'},'lz9x0t'],variants:{orientation:{horizontal:[{w:'auto'},'hor8ji'],vertical:[{w:'full'},'wtikoc']}}});
 
 const CardImage = React.forwardRef(
   ({ alt = "", asChild, children, className, src, ...props }, ref) => {
-    const { orientation } = useCardContext("CardImage");
+    const { orientation } = useCardContext("@optiaxiom/react/CardImage");
     return /* @__PURE__ */ jsxRuntime.jsx(
       Skeleton.Box,
       {
@@ -601,11 +1003,11 @@ const CardLink = React.forwardRef(
 );
 CardLink.displayName = "@optiaxiom/react/CardLink";
 
-var cardOverflow = Skeleton.recipeRuntime({base:['_4i53d9',{alignSelf:'stretch'},'_1dv7paz'],variants:{orientation:{horizontal:['_4h9eim'],vertical:['_15769s9']}}});
+var cardOverflow = Skeleton.recipeRuntime({base:['txcsg6',{alignSelf:'stretch'},'z2o45x'],variants:{orientation:{horizontal:['fk6yx6'],vertical:['_1fnh3ts']}}});
 
 const CardOverflow = React.forwardRef(
   ({ children, className, ...props }, ref) => {
-    const { orientation } = useCardContext("CardOverflow");
+    const { orientation } = useCardContext("@optiaxiom/react/CardOverflow");
     return /* @__PURE__ */ jsxRuntime.jsx(
       Skeleton.Box,
       {
@@ -622,7 +1024,7 @@ CardOverflow.displayName = "@optiaxiom/react/CardOverflow";
 const CardTitle = React.forwardRef(
   ({ asChild, children, ...props }, ref) => {
     const Comp = asChild ? reactSlot.Slot : "h2";
-    const { labelId } = useCardContext("CardTitle");
+    const { labelId } = useCardContext("@optiaxiom/react/CardTitle");
     return /* @__PURE__ */ jsxRuntime.jsx(
       Skeleton.Heading,
       {
@@ -639,7 +1041,7 @@ const CardTitle = React.forwardRef(
 );
 CardTitle.displayName = "@optiaxiom/react/CardTitle";
 
-const [ComboboxContextProvider, useComboboxContext] = reactContext.createContext("Combobox");
+const [ComboboxProvider, useComboboxContext] = reactContext.createContext("@optiaxiom/react/Combobox");
 
 const ComboboxDialogContent = React.forwardRef(({ "aria-label": ariaLabel, children, minW: _minW, ...props }, ref) => {
   return /* @__PURE__ */ jsxRuntime.jsxs(Skeleton.DialogContent, { ref, ...props, children: [
@@ -659,16 +1061,6 @@ const ComboboxPopoverContent = React.forwardRef((props, ref) => {
 });
 ComboboxPopoverContent.displayName = "@optiaxiom/react/ComboboxPopoverContent";
 
-function useEffectEvent(callback) {
-  const callbackRef = React.useRef(callback);
-  React.useEffect(() => {
-    callbackRef.current = callback;
-  });
-  return React.useCallback((...args) => {
-    return callbackRef.current(...args);
-  }, []);
-}
-
 function Combobox({
   children,
   defaultOpen = false,
@@ -714,7 +1106,7 @@ function Combobox({
     }
   }, [open, onInputValueChangeStable]);
   return /* @__PURE__ */ jsxRuntime.jsx(components.Root, { onOpenChange: setOpen, open, children: /* @__PURE__ */ jsxRuntime.jsx(
-    ComboboxContextProvider,
+    ComboboxProvider,
     {
       components,
       inputValue,
@@ -733,12 +1125,14 @@ function Combobox({
 }
 Combobox.displayName = "@optiaxiom/react/Combobox";
 
-const [CommandContextProvider, useCommandContext] = reactContext.createContext("Command");
+const [CommandProvider, useCommandContext] = reactContext.createContext("@optiaxiom/react/Command");
 
-var item$2 = Skeleton.recipeRuntime({base:'yqkgaw'});
+var item$2 = Skeleton.recipeRuntime({base:'h03uup'});
 
 const CommandFocusableItem = React.forwardRef(({ children, className, ...props }, ref) => {
-  const { lastInteractionSource } = useCommandContext("CommandFocusableItem");
+  const { lastInteractionSource } = useCommandContext(
+    "@optiaxiom/react/CommandFocusableItem"
+  );
   return /* @__PURE__ */ jsxRuntime.jsx(
     Skeleton.Box,
     {
@@ -754,7 +1148,9 @@ CommandFocusableItem.displayName = "@optiaxiom/react/CommandFocusableItem";
 
 const CommandItem = React.forwardRef(
   ({ children, item, selected, size, ...props }, ref) => {
-    const { downshift, highlightedItem, value } = useCommandContext("CommandItem");
+    const { downshift, highlightedItem, value } = useCommandContext(
+      "@optiaxiom/react/CommandItem"
+    );
     const itemProps = downshift.getItemProps({
       "aria-selected": selected ?? value?.has(item),
       item,
@@ -771,44 +1167,20 @@ const CommandItem = React.forwardRef(
         ...itemProps,
         children
       }
-    );
-  }
-);
-CommandItem.displayName = "@optiaxiom/react/CommandItem";
-
-const ComboboxItem = React.forwardRef(
-  (props, ref) => /* @__PURE__ */ jsxRuntime.jsx(CommandItem, { ref, ...props })
-);
-ComboboxItem.displayName = "@optiaxiom/react/ComboboxItem";
-
-const ComboboxCheckboxItem = React.forwardRef(({ children, ...props }, ref) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(ComboboxItem, { asChild: true, ref, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton.ListboxCheckboxItem, { children }) });
-});
-ComboboxCheckboxItem.displayName = "@optiaxiom/react/ComboboxCheckboxItem";
-
-function usePortalPatch(open, initialHighlightedIndex = -1) {
-  const [placed, setPlaced] = React.useState(false);
-  React.useEffect(() => {
-    return () => setPlaced(false);
-  }, [open]);
-  const [highlightedIndex, setHighlightedIndex] = React.useState(
-    initialHighlightedIndex
-  );
-  return [
-    /**
-     * Downshift attempts to scroll to the currently selected item when the menu
-     * opens. But since we don't render the menu until it is open the `ref` will
-     * not be available yet.
-     *
-     * So we only return the index when it has been placed and return -1
-     * otherwise.
-     */
-    placed ? highlightedIndex : -1,
-    setHighlightedIndex,
-    placed,
-    setPlaced
-  ];
-}
+    );
+  }
+);
+CommandItem.displayName = "@optiaxiom/react/CommandItem";
+
+const ComboboxItem = React.forwardRef(
+  (props, ref) => /* @__PURE__ */ jsxRuntime.jsx(CommandItem, { ref, ...props })
+);
+ComboboxItem.displayName = "@optiaxiom/react/ComboboxItem";
+
+const ComboboxCheckboxItem = React.forwardRef(({ children, ...props }, ref) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(ComboboxItem, { asChild: true, ref, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton.ListboxCheckboxItem, { children }) });
+});
+ComboboxCheckboxItem.displayName = "@optiaxiom/react/ComboboxCheckboxItem";
 
 const isHoverSupported = typeof window !== "undefined" && window.matchMedia("(hover: hover)").matches;
 function Command({
@@ -885,7 +1257,7 @@ function Command({
   });
   downshift$1.getMenuProps({}, { suppressRefError: true });
   return /* @__PURE__ */ jsxRuntime.jsx(
-    CommandContextProvider,
+    CommandProvider,
     {
       downshift: downshift$1,
       highlightedItem: items[downshift$1.highlightedIndex],
@@ -913,7 +1285,9 @@ Command.displayName = "@optiaxiom/react/Command";
 
 const CommandListbox = React.forwardRef(
   ({ children, size, ...props }, ref) => {
-    const { downshift, setPlaced } = useCommandContext("CommandList");
+    const { downshift, setPlaced } = useCommandContext(
+      "@optiaxiom/react/CommandListbox"
+    );
     React.useEffect(() => {
       setPlaced(true);
     }, [setPlaced]);
@@ -939,7 +1313,7 @@ const ComboboxContent = React.forwardRef(
       onInputValueChange,
       onItemSelect,
       value
-    } = useComboboxContext("ComboboxContent");
+    } = useComboboxContext("@optiaxiom/react/ComboboxContent");
     return /* @__PURE__ */ jsxRuntime.jsx(
       components.Content,
       {
@@ -1016,7 +1390,7 @@ const CommandInput = React.forwardRef(
       itemToSubItems,
       setHighlightedSubIndex,
       setInputValue
-    } = useCommandContext("CommandInput");
+    } = useCommandContext("@optiaxiom/react/CommandInput");
     return /* @__PURE__ */ jsxRuntime.jsx(
       Skeleton.Input,
       {
@@ -1066,8 +1440,10 @@ CommandInput.displayName = "@optiaxiom/react/CommandInput";
 
 const ComboboxInput = React.forwardRef(
   (props, ref) => {
-    const { downshift, highlightedItem } = useCommandContext("ComboboxInput");
-    const { open } = useComboboxContext("ComboboxInput");
+    const { downshift, highlightedItem } = useCommandContext(
+      "@optiaxiom/react/ComboboxInput"
+    );
+    const { open } = useComboboxContext("@optiaxiom/react/ComboboxInput");
     const [minWidth, setMinWidth] = React.useState(160);
     const containerRef = React.useRef(null);
     React.useEffect(() => {
@@ -1120,24 +1496,6 @@ const ComboboxSeparator = React.forwardRef((props, ref) => {
 });
 ComboboxSeparator.displayName = "@optiaxiom/react/ComboboxSeparator";
 
-const useFieldLabelTrigger = (ref, ariaLabelledBy) => {
-  const { labelId = ariaLabelledBy } = Skeleton.useFieldContext();
-  React.useEffect(() => {
-    if (!labelId || !ref.current) {
-      return;
-    }
-    const button = ref.current;
-    const label = document.getElementById(labelId);
-    if (!label) {
-      return;
-    }
-    const onLabelClick = () => button.focus();
-    label.addEventListener("click", onLabelClick);
-    return () => label.removeEventListener("click", onLabelClick);
-  }, [labelId, ref]);
-  return labelId;
-};
-
 const ComboboxTrigger = React.forwardRef(
   ({
     "aria-labelledby": ariaLabelledBy,
@@ -1151,7 +1509,7 @@ const ComboboxTrigger = React.forwardRef(
       itemToString,
       setOpen,
       value: valueContext
-    } = useComboboxContext("ComboboxTrigger");
+    } = useComboboxContext("@optiaxiom/react/ComboboxTrigger");
     const value = React.useMemo(
       () => valueContext instanceof Set ? [...valueContext] : valueContext,
       [valueContext]
@@ -1197,33 +1555,61 @@ const ComboboxVirtualized = React.forwardRef(({ children, items, ...props }, out
     estimateSize: () => 40,
     getScrollElement: () => innerRef.current
   });
-  const { downshift } = useCommandContext("ComboboxVirtualized");
+  const { highlightedItem } = useCommandContext(
+    "@optiaxiom/react/ComboboxVirtualized"
+  );
+  const itemToIndexMap = React.useMemo(
+    () => new Map(items.map((item, index) => [item, index])),
+    [items]
+  );
   React.useEffect(() => {
-    rowVirtualizer.scrollToIndex(downshift.highlightedIndex);
-  }, [downshift.highlightedIndex, enabled, rowVirtualizer]);
+    const index = itemToIndexMap.get(highlightedItem);
+    if (typeof index !== "number") {
+      return;
+    }
+    rowVirtualizer.scrollToIndex(index);
+  }, [enabled, highlightedItem, itemToIndexMap, rowVirtualizer]);
+  const virtualItems = rowVirtualizer.getVirtualItems();
+  const [paddingTop, paddingBottom] = virtualItems.length > 0 ? [
+    Math.max(0, virtualItems[0].start),
+    Math.max(
+      0,
+      rowVirtualizer.getTotalSize() - virtualItems[virtualItems.length - 1].end
+    )
+  ] : [0, 0];
+  const [minWidth, setMinWidth] = React.useState(0);
+  React.useEffect(() => {
+    if (!innerRef.current) {
+      return;
+    }
+    const observer = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        setMinWidth(entry.contentRect.width);
+      }
+    });
+    observer.observe(innerRef.current);
+    return () => observer.disconnect();
+  }, []);
   return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.ListboxScrollArea, { ref, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(
     Skeleton.Box,
     {
-      display: "flex",
       flex: "none",
-      flexDirection: "column",
-      gap: "2",
       style: {
-        height: `${rowVirtualizer.getTotalSize()}px`,
-        position: "relative"
+        height: `${rowVirtualizer.getTotalSize() - paddingTop - paddingBottom}px`,
+        minHeight: Math.min(items.length, 8) * 40,
+        minWidth,
+        paddingBottom,
+        paddingTop
       },
-      children: rowVirtualizer.getVirtualItems().map((virtualItem) => /* @__PURE__ */ jsxRuntime.jsx(
+      children: rowVirtualizer.getVirtualItems().map((virtualItem) => /* @__PURE__ */ jsxRuntime.jsxs(
         Skeleton.Box,
         {
-          style: {
-            height: virtualItem.size,
-            left: 0,
-            position: "absolute",
-            top: 0,
-            transform: `translateY(${virtualItem.start}px)`
-          },
-          w: "full",
-          children: children(items[virtualItem.index])
+          "data-index": virtualItem.index,
+          ref: rowVirtualizer.measureElement,
+          children: [
+            children(items[virtualItem.index]),
+            virtualItem.index < items.length - 1 && /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { pb: "2" })
+          ]
         },
         virtualItem.key
       ))
@@ -1232,7 +1618,7 @@ const ComboboxVirtualized = React.forwardRef(({ children, items, ...props }, out
 });
 ComboboxVirtualized.displayName = "@optiaxiom/react/ComboboxVirtualized";
 
-const [DataTableContextProvider, useDataTableContext] = reactContext.createContext("DataTable");
+const [DataTableProvider, useDataTableContext] = reactContext.createContext("@optiaxiom/react/DataTable");
 
 const DataTable = React.forwardRef(
   ({ children, table, ...props }, ref) => {
@@ -1245,7 +1631,7 @@ const DataTable = React.forwardRef(
         maxW: "full",
         ref,
         ...props,
-        children: /* @__PURE__ */ jsxRuntime.jsx(DataTableContextProvider, { table, children })
+        children: /* @__PURE__ */ jsxRuntime.jsx(DataTableProvider, { table, children })
       }
     );
   }
@@ -1297,17 +1683,17 @@ const IconSortUp = Skeleton.withIcon(
   )
 );
 
-var cell$2 = Skeleton.recipeRuntime({base:'w81vm0'});
-var content$1 = Skeleton.recipeRuntime({base:[{alignItems:'center',bg:'bg.default',color:'fg.tertiary',display:'flex',fontSize:'sm',fontWeight:'400',size:'full'},'_1yb58wq']});
+var cell$2 = Skeleton.recipeRuntime({base:'_1bgwqsl'});
+var content = Skeleton.recipeRuntime({base:[{alignItems:'center',bg:'bg.default',color:'fg.tertiary',display:'flex',fontSize:'sm',fontWeight:'400',size:'full'},'_1myo606']});
 
 const TableHeaderCell = React.forwardRef(
-  ({ children, className, colSpan, p, px = "16", py = "12", ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { asChild: true, ...cell$2({}, className), ...props, children: /* @__PURE__ */ jsxRuntime.jsx("th", { colSpan, ref, children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { ...content$1(), px: p ?? px, py: p ?? py, children }) }) })
+  ({ children, className, colSpan, p, px = "16", py = "12", ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { asChild: true, ...cell$2({}, className), ...props, children: /* @__PURE__ */ jsxRuntime.jsx("th", { colSpan, ref, children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { ...content(), px: p ?? px, py: p ?? py, children }) }) })
 );
 TableHeaderCell.displayName = "@optiaxiom/react/TableHeaderCell";
 
-var button = Skeleton.recipeRuntime({base:[{alignItems:'center',display:'flex',gap:'4',justifyContent:'flex-start',rounded:'md',textAlign:'start',transition:'colors',w:'full'},'hvhqj2']});
-var handle = Skeleton.recipeRuntime({base:[{h:'full',z:'10'},'jtursu'],variants:{resizing:{false:{},true:{borderColor:'border.focus'}}}});
-var icon = Skeleton.recipeRuntime({base:[{h:'12',mx:'2',transition:'opacity'},'_1wio9g1'],variants:{active:{false:'_1dmyoop',true:'_1r8vtd5'}}});
+var button = Skeleton.recipeRuntime({base:[{alignItems:'center',display:'flex',gap:'4',justifyContent:'flex-start',rounded:'md',textAlign:'start',transition:'colors',w:'full'},'_14fta0m']});
+var handle = Skeleton.recipeRuntime({base:[{h:'full',z:'10'},'qt76u1'],variants:{resizing:{false:{},true:{borderColor:'border.focus'}}}});
+var icon = Skeleton.recipeRuntime({base:[{h:'12',mx:'2',transition:'opacity'},'_1f6kwd5'],variants:{active:{false:'_1hmc7qr',true:'_4xt40z'}}});
 
 const DataTableHeaderCell = React.forwardRef(({ children, header, ...props }, ref) => {
   const sortDir = header.column.getIsSorted();
@@ -1360,22 +1746,22 @@ const DataTableHeaderCell = React.forwardRef(({ children, header, ...props }, re
 });
 DataTableHeaderCell.displayName = "@optiaxiom/react/DataTableHeaderCell";
 
-var table$1 = Skeleton.recipeRuntime({base:[{color:'fg.default',fontSize:'md',w:'full'},'p6ro1'],variants:{layout:{auto:['oxuz2z'],fixed:[{display:'grid'},'_1as0gob']}}});
-var wrapper = Skeleton.recipeRuntime({base:[{bg:'bg.default',border:'1',borderColor:'border.tertiary',maxW:'full',overflow:'auto',rounded:'lg'},'_1u3cehj']});
+var table$1 = Skeleton.recipeRuntime({base:[{color:'fg.default',fontSize:'md',w:'full'},'_27zc9t'],variants:{layout:{auto:['_3mfpgt'],fixed:[{display:'grid'},'nc3mqp']}}});
+var wrapper = Skeleton.recipeRuntime({base:[{bg:'bg.default',border:'1',borderColor:'border.tertiary',maxW:'full',overflow:'auto',rounded:'lg'},'_112u1wq']});
 
 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 }) }) })
 );
 Table.displayName = "@optiaxiom/react/Table";
 
-var body = Skeleton.recipeRuntime({base:['_1fwpmjv']});
+var body = Skeleton.recipeRuntime({base:['s96511']});
 
 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$1 = Skeleton.recipeRuntime({base:[{borderColor:'border.tertiary',p:'16'},'_16a1mvd']});
+var cell$1 = Skeleton.recipeRuntime({base:[{borderColor:'border.tertiary',p:'16'},'qkucic']});
 
 const TableCell = React.forwardRef(
   ({ children, className, colSpan, ...props }, ref) => {
@@ -1387,20 +1773,20 @@ 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 row = Skeleton.recipeRuntime({base:['_1uoznr5',{transition:'colors',w:'full'},'a0elfj']});
+var row = Skeleton.recipeRuntime({base:['_1kh5xud',{transition:'colors',w:'full'},'_1615gwv']});
 
 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'},'gr72lo'],variants:{pinned:{left:'_1mb3x24',right:'_1actnno'},pinnedType:{body:'iei9eq',header:{}}}});
-var cellOffsetVar = 'var(--n7w79i)';
-var cellSizeVar = 'var(--_11dy6lt)';
-var header = Skeleton.recipeRuntime({base:[{display:'grid'},'mmqhby']});
-var leftTotalSizeVar = 'var(--rg4yhu)';
-var rightTotalSizeVar = 'var(--_5x43cz)';
-var table = Skeleton.recipeRuntime({base:'_1ng16i2',variants:{pinned:{both:'_13tygco',left:'_1qy99sb',none:{},right:'kh6i6k'}}});
+var cell = Skeleton.recipeRuntime({base:[{alignItems:'start',display:'flex'},'_4y7e2g'],variants:{pinned:{left:'_2yiss0',right:'y22tz5'},pinnedType:{body:'_1jhrhcu',header:{}}}});
+var cellOffsetVar = 'var(--_1fsmgap)';
+var cellSizeVar = 'var(--_1iys1kv)';
+var header = Skeleton.recipeRuntime({base:[{display:'grid'},'qnkfch']});
+var leftTotalSizeVar = 'var(--_1xsqfi4)';
+var rightTotalSizeVar = 'var(--_1w1eulk)';
+var table = Skeleton.recipeRuntime({base:'_75a2ut',variants:{pinned:{both:'k6nroh',left:'_1qxhg17',none:{},right:'osrlg5'}}});
 
 const COL_VIRTUALIZATION_THRESHOLD = 20;
 const ROW_VIRTUALIZATION_THRESHOLD = 20;
@@ -1408,7 +1794,7 @@ const DataTableBody = React.forwardRef(
   ({ className, estimatedRowHeight = 52, loading, ...props }, outerRef) => {
     const innerRef = React.useRef(null);
     const ref = reactComposeRefs.useComposedRefs(innerRef, outerRef);
-    const { table: table$1 } = useDataTableContext("DataTableBody");
+    const { table: table$1 } = useDataTableContext("@optiaxiom/react/DataTableBody");
     const { rows } = table$1.getRowModel();
     const centerColumns = table$1.getCenterVisibleLeafColumns();
     const columnVirtualizer = reactVirtual.useVirtualizer({
@@ -1578,191 +1964,12 @@ const fakeRow = (table, rowIndex) => ({
   id: "loading" + rowIndex
 });
 
-const [SelectContextProvider, useSelectContext] = reactContext.createContext("Select");
-
-function Select({
-  children,
-  defaultOpen = false,
-  defaultValue,
-  disabled,
-  items,
-  itemToKey = (value2) => value2,
-  itemToString = (value2) => value2 ? String(value2) : "",
-  onOpenChange,
-  onValueChange,
-  open,
-  value,
-  ...props
-}) {
-  const [selectedItem, setSelectedItem] = reactUseControllableState.useControllableState({
-    defaultProp: defaultValue,
-    onChange: onValueChange,
-    prop: value
-  });
-  const [isOpen, setIsOpen] = reactUseControllableState.useControllableState({
-    defaultProp: defaultOpen,
-    onChange: onOpenChange,
-    prop: open
-  });
-  const [highlightedIndex, setHighlightedIndex, placed, setPlaced] = usePortalPatch(
-    isOpen,
-    selectedItem ? items.findIndex((item) => itemToKey(selectedItem) === itemToKey(item)) : -1
-  );
-  const downshift$1 = downshift.useSelect({
-    ...props,
-    highlightedIndex,
-    isOpen: placed,
-    items,
-    itemToKey,
-    itemToString,
-    onHighlightedIndexChange(changes) {
-      setHighlightedIndex(changes.highlightedIndex);
-    },
-    onIsOpenChange({ isOpen: isOpen2 }) {
-      setIsOpen(isOpen2);
-    },
-    onSelectedItemChange({ selectedItem: selectedItem2 }) {
-      setSelectedItem(selectedItem2);
-    },
-    selectedItem: selectedItem ?? null
-  });
-  downshift$1.getMenuProps({}, { suppressRefError: true });
-  return /* @__PURE__ */ jsxRuntime.jsx(reactPopper.Popper, { children: /* @__PURE__ */ jsxRuntime.jsx(
-    SelectContextProvider,
-    {
-      disabled,
-      downshift: downshift$1,
-      highlightedItem: items[highlightedIndex],
-      isOpen,
-      items,
-      itemToKey,
-      itemToString,
-      placed,
-      selectedItem,
-      setPlaced,
-      children
-    }
-  ) });
-}
-Select.displayName = "@optiaxiom/react/Select";
-
-var content = Skeleton.recipeRuntime({base:['_1h194kj']});
-
-const SelectContent = React.forwardRef(
-  ({
-    align = "start",
-    children,
-    className,
-    loading,
-    side = "bottom",
-    ...props
-  }, ref) => {
-    const { boxProps, restProps } = Skeleton.extractBoxProps(props);
-    const { downshift, isOpen, placed, setPlaced } = useSelectContext("SelectContent");
-    return isOpen && /* @__PURE__ */ jsxRuntime.jsx(reactPortal.Portal, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton.ModalLayer, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
-      Skeleton.MenuListbox,
-      {
-        asChild: true,
-        maxH: "sm",
-        minW: loading ? "trigger" : void 0,
-        provider: "popper",
-        ...content({}, className),
-        ...boxProps,
-        ...downshift.getMenuProps(
-          { ref, ...restProps },
-          { suppressRefError: !placed }
-        ),
-        children: /* @__PURE__ */ jsxRuntime.jsx(
-          reactPopper.PopperContent,
-          {
-            align,
-            onPlaced: () => setPlaced(true),
-            side,
-            sideOffset: 5,
-            children: loading ? /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { display: "flex", justifyContent: "center", p: "16", children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Spinner, {}) }) : children
-          }
-        )
-      }
-    ) }) });
-  }
-);
-SelectContent.displayName = "@optiaxiom/react/SelectContent";
-
-const SelectItem = React.forwardRef(
-  ({ children, item, size, ...props }, ref) => {
-    const { downshift, highlightedItem, selectedItem } = useSelectContext("SelectItem");
-    const itemProps = downshift.getItemProps({ item, ref, ...props });
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      Skeleton.Box,
-      {
-        "data-disabled": itemProps["aria-disabled"] ? "" : void 0,
-        "data-highlighted": highlightedItem === item ? "" : void 0,
-        "data-selected": selectedItem === item ? "" : void 0,
-        size,
-        ...itemProps,
-        children
-      }
-    );
-  }
-);
-SelectItem.displayName = "@optiaxiom/react/SelectItem";
-
-const SelectRadioItem = React.forwardRef(
-  ({ children, ...props }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { asChild: true, ref, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton.ListboxRadioItem, { children }) });
-  }
-);
-SelectRadioItem.displayName = "@optiaxiom/react/SelectRadioItem";
-
-const SelectTrigger = React.forwardRef(
-  ({
-    "aria-labelledby": ariaLabelledBy,
-    asChild,
-    children,
-    onKeyDown,
-    placeholder,
-    ...props
-  }, ref) => {
-    const { disabled, downshift, isOpen, itemToString, selectedItem } = useSelectContext("SelectTrigger");
-    const { boxProps, restProps } = Skeleton.extractBoxProps(props);
-    const buttonRef = React.useRef(null);
-    const labelId = useFieldLabelTrigger(buttonRef, ariaLabelledBy);
-    const [focusOnOpen] = React.useState(isOpen);
-    React.useEffect(
-      function() {
-        if (focusOnOpen && buttonRef.current) {
-          buttonRef.current.focus();
-        }
-      },
-      [focusOnOpen]
-    );
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      reactPopper.PopperAnchor,
-      {
-        asChild: true,
-        ...boxProps,
-        ...downshift.getToggleButtonProps({
-          ...restProps,
-          "aria-labelledby": labelId,
-          disabled,
-          onKeyDown: (event) => {
-            onKeyDown?.(event);
-            document.dispatchEvent(new Event("tooltip.open"));
-          }
-        }),
-        children: /* @__PURE__ */ jsxRuntime.jsx(reactSlot.Slot, { ref, children: asChild ? children : /* @__PURE__ */ jsxRuntime.jsx(Skeleton.AngleMenuButton, { ref: buttonRef, children: children ?? (selectedItem ? itemToString(selectedItem) : placeholder) }) })
-      }
-    );
-  }
-);
-SelectTrigger.displayName = "@optiaxiom/react/SelectTrigger";
-
-var addon = Skeleton.recipeRuntime({base:'_1s3o15y',variants:{position:{end:{textAlign:'end'},start:{}}}});
+var addon = Skeleton.recipeRuntime({base:'_10coot3',variants:{position:{end:{textAlign:'end'},start:{}}}});
 
 const DEFAULT_PAGE_SIZES = ["10", "20", "30", "50", "100"];
 const DataTableFooter = React.forwardRef(
   ({ pageSizeOptions = DEFAULT_PAGE_SIZES, showPageSizeOptions, ...props }, ref) => {
-    const { table } = useDataTableContext("DataTableFooter");
+    const { table } = useDataTableContext("@optiaxiom/react/DataTableFooter");
     const { pagination } = table.getState();
     const pageSizeId = reactId.useId();
     return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -1838,24 +2045,34 @@ const IconCalendar = Skeleton.withIcon(
   )
 );
 
-var picker = Skeleton.recipeRuntime({base:'_1l9hcoo'});
+var picker = Skeleton.recipeRuntime({base:'_1tbpcko'});
 
-function format(date) {
-  return new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate())).toISOString().split("T")[0];
-}
-function parse(str) {
+function toInstant(str) {
   const rawDate = str && typeof str === "string" ? new Date(str) : void 0;
-  return isValidDate(rawDate) ? new Date(rawDate.getTime() + (/* @__PURE__ */ new Date()).getTimezoneOffset() * 60 * 1e3) : void 0;
+  return isValidDate(rawDate) ? rawDate : void 0;
 }
 const isValidDate = (date) => date ? !isNaN(+date) : false;
 
 const DateInput = React.forwardRef(
-  ({ disabled, holiday, max, min, onChange, weekend, ...props }, outerRef) => {
+  ({
+    disabled,
+    holiday,
+    max,
+    min,
+    onChange,
+    step,
+    type = "date",
+    weekend,
+    ...props
+  }, outerRef) => {
     const [open, setOpen] = React.useState(false);
+    const hasInteractedOutsideRef = React.useRef(false);
+    const pickerRef = React.useRef(null);
     const [value, setValue] = reactUseControllableState.useControllableState({
       defaultProp: props.defaultValue,
       prop: props.value
     });
+    const instant = typeof value === "string" ? toInstant(value.includes("T") ? value : value + "T00:00") : void 0;
     const innerRef = React.useRef(null);
     const ref = reactComposeRefs.useComposedRefs(innerRef, outerRef);
     const maxDate = max ? new Date(max) : void 0;
@@ -1871,6 +2088,7 @@ const DateInput = React.forwardRef(
               "aria-label": "Show date picker",
               hasCustomAnchor: true,
               icon: /* @__PURE__ */ jsxRuntime.jsx(IconCalendar, {}),
+              ref: pickerRef,
               size: "sm",
               ...picker()
             }
@@ -1892,7 +2110,8 @@ const DateInput = React.forwardRef(
             }
           },
           ref,
-          type: "date",
+          step,
+          type,
           ...props
         }
       ) }),
@@ -1901,8 +2120,17 @@ const DateInput = React.forwardRef(
         {
           gap: "8",
           onCloseAutoFocus: (event) => {
-            event.preventDefault();
-            innerRef.current?.focus();
+            if (hasInteractedOutsideRef.current) {
+              hasInteractedOutsideRef.current = false;
+            } else {
+              event.preventDefault();
+              innerRef.current?.focus();
+            }
+          },
+          onInteractOutside: (event) => {
+            if (!(event.target instanceof Node && pickerRef.current?.contains(event.target))) {
+              hasInteractedOutsideRef.current = true;
+            }
           },
           children: [
             /* @__PURE__ */ jsxRuntime.jsx(
@@ -1916,27 +2144,38 @@ const DateInput = React.forwardRef(
                     return;
                   }
                   if (innerRef.current) {
-                    Skeleton.forceValueChange(innerRef?.current, format(date));
+                    Skeleton.forceValueChange(
+                      innerRef?.current,
+                      type === "datetime-local" ? toPlainDateTime(date) : toPlainDate(date)
+                    );
+                  }
+                  if (type === "date") {
+                    setOpen(false);
                   }
-                  setOpen(false);
                 },
-                value: parse(value),
+                step,
+                type,
+                value: instant,
                 weekend
               }
             ),
-            /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Flex, { flexDirection: "row", children: /* @__PURE__ */ jsxRuntime.jsx(
-              Skeleton.Button,
-              {
-                appearance: "subtle",
-                onClick: () => {
-                  if (innerRef.current) {
-                    Skeleton.forceValueChange(innerRef.current, "");
-                  }
-                  setOpen(false);
-                },
-                children: "Clear"
-              }
-            ) })
+            /* @__PURE__ */ jsxRuntime.jsxs(Skeleton.Flex, { flexDirection: "row", justifyContent: "space-between", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                Skeleton.Button,
+                {
+                  onClick: () => {
+                    if (innerRef.current) {
+                      Skeleton.forceValueChange(innerRef.current, "");
+                    }
+                    if (type === "date") {
+                      setOpen(false);
+                    }
+                  },
+                  children: "Clear"
+                }
+              ),
+              type === "datetime-local" && /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Button, { appearance: "primary", onClick: () => setOpen(false), children: "Done" })
+            ] })
           ]
         }
       )
@@ -1945,7 +2184,7 @@ const DateInput = React.forwardRef(
 );
 DateInput.displayName = "@optiaxiom/react/DateInput";
 
-const [DatePickerContextProvider, useDatePickerContext] = reactContext.createContext("DatePicker");
+const [DatePickerProvider, useDatePickerContext] = reactContext.createContext("@optiaxiom/react/DatePicker");
 
 function DatePicker({
   children,
@@ -1955,6 +2194,8 @@ function DatePicker({
   onOpenChange,
   onValueChange,
   open: openProp,
+  step,
+  type = "date",
   value: valueProp,
   ...props
 }) {
@@ -1969,10 +2210,12 @@ function DatePicker({
     prop: valueProp
   });
   return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Popover, { onOpenChange: setOpen, open, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(
-    DatePickerContextProvider,
+    DatePickerProvider,
     {
       disabled,
       setValue,
+      step,
+      type,
       value,
       children
     }
@@ -1980,7 +2223,7 @@ function DatePicker({
 }
 DatePicker.displayName = "@optiaxiom/react/DatePicker";
 
-var panels$1 = Skeleton.recipeRuntime({base:[{alignItems:'stretch',flexDirection:'row',gap:'0'},'hhvo11']});
+var panels$1 = Skeleton.recipeRuntime({base:[{alignItems:'stretch',flexDirection:'row',gap:'0'},'_1b918su']});
 
 const DatePickerContent = React.forwardRef(
   ({
@@ -1994,18 +2237,29 @@ const DatePickerContent = React.forwardRef(
     weekend,
     ...props
   }, ref) => {
-    const { setValue, value } = useDatePickerContext("DatePickerContent");
+    const { setValue, step, type, value } = useDatePickerContext(
+      "@optiaxiom/react/DatePickerContent"
+    );
+    const panelRef = React.useRef(null);
     return /* @__PURE__ */ jsxRuntime.jsxs(Skeleton.PopoverContent, { gap: "8", maxW: void 0, ref, ...props, children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(Skeleton.Flex, { ...panels$1(), children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(Skeleton.Flex, { ref: panelRef, ...panels$1(), children: [
         addonBefore,
         /* @__PURE__ */ jsxRuntime.jsx(
           Calendar,
           {
+            alignSelf: "start",
             holiday,
             max,
             min,
+            onHeightChange: (height) => {
+              if (panelRef.current) {
+                panelRef.current.style.height = `${height}px`;
+              }
+            },
             onValueChange: setValue,
+            step,
             today,
+            type,
             value,
             weekend
           }
@@ -2018,8 +2272,15 @@ const DatePickerContent = React.forwardRef(
 );
 DatePickerContent.displayName = "@optiaxiom/react/DatePickerContent";
 
-const DEFAULT_FORMATTER$1 = (date) => date.toLocaleDateString(void 0, {
+const dateFormatter = new Intl.DateTimeFormat(void 0, {
+  day: "numeric",
+  month: "short",
+  year: "numeric"
+});
+const dateTimeFormatter = new Intl.DateTimeFormat(void 0, {
   day: "numeric",
+  hour: "numeric",
+  minute: "numeric",
   month: "short",
   year: "numeric"
 });
@@ -2027,11 +2288,14 @@ const DatePickerTrigger = React.forwardRef(
   ({
     "aria-labelledby": ariaLabelledBy,
     children,
-    format = DEFAULT_FORMATTER$1,
+    format,
     placeholder = "Pick a date",
     ...props
   }, outerRef) => {
-    const { disabled, value } = useDatePickerContext("DatePickerTrigger");
+    const { disabled, type, value } = useDatePickerContext(
+      "@optiaxiom/react/DatePickerTrigger"
+    );
+    const formatter = format ? { format } : type === "datetime-local" ? dateTimeFormatter : dateFormatter;
     const buttonRef = React.useRef(null);
     const ref = reactComposeRefs.useComposedRefs(outerRef, buttonRef);
     const labelId = useFieldLabelTrigger(buttonRef, ariaLabelledBy);
@@ -2043,14 +2307,14 @@ const DatePickerTrigger = React.forwardRef(
         icon: /* @__PURE__ */ jsxRuntime.jsx(IconCalendar, {}),
         ref,
         ...props,
-        children: children ?? (value ? format(value) : /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { color: "fg.tertiary", children: placeholder }))
+        children: children ?? (value ? formatter.format(value) : /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { color: "fg.tertiary", children: placeholder }))
       }
     );
   }
 );
 DatePickerTrigger.displayName = "@optiaxiom/react/DatePickerTrigger";
 
-const [DateRangePickerContextProvider, useDateRangePickerContext] = reactContext.createContext("DateRangePicker");
+const [DateRangePickerProvider, useDateRangePickerContext] = reactContext.createContext("@optiaxiom/react/DateRangePicker");
 
 function DateRangePicker({
   children,
@@ -2074,7 +2338,7 @@ function DateRangePicker({
     prop: valueProp
   });
   return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Popover, { onOpenChange: setOpen, open, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(
-    DateRangePickerContextProvider,
+    DateRangePickerProvider,
     {
       disabled,
       setValue,
@@ -2085,7 +2349,7 @@ function DateRangePicker({
 }
 DateRangePicker.displayName = "@optiaxiom/react/DateRangePicker";
 
-var panels = Skeleton.recipeRuntime({base:[{alignItems:'stretch',flexDirection:'row',gap:'0'},'ynn8r2']});
+var panels = Skeleton.recipeRuntime({base:[{alignItems:'stretch',flexDirection:'row',gap:'0'},'ptn1qq']});
 
 const DateRangePickerContent = React.forwardRef(
   ({
@@ -2100,7 +2364,7 @@ const DateRangePickerContent = React.forwardRef(
     ...props
   }, ref) => {
     const { setValue, value } = useDateRangePickerContext(
-      "DateRangePickerContent"
+      "@optiaxiom/react/DateRangePickerContent"
     );
     return /* @__PURE__ */ jsxRuntime.jsxs(Skeleton.PopoverContent, { gap: "8", maxW: void 0, ref, ...props, children: [
       /* @__PURE__ */ jsxRuntime.jsxs(Skeleton.Flex, { ...panels(), children: [
@@ -2144,7 +2408,7 @@ const DateRangePickerTrigger = React.forwardRef(
     ...props
   }, outerRef) => {
     const { disabled, value } = useDateRangePickerContext(
-      "DateRangePickerTrigger"
+      "@optiaxiom/react/DateRangePickerTrigger"
     );
     const buttonRef = React.useRef(null);
     const ref = reactComposeRefs.useComposedRefs(outerRef, buttonRef);
@@ -2164,7 +2428,7 @@ const DateRangePickerTrigger = React.forwardRef(
 );
 DateRangePickerTrigger.displayName = "@optiaxiom/react/DateRangePickerTrigger";
 
-var mark = Skeleton.recipeRuntime({base:'_1p0h2fj'});
+var mark = Skeleton.recipeRuntime({base:'_17zepbd'});
 
 const useHighlightedChunks = (content, query) => {
   const terms = React.useMemo(
@@ -2196,8 +2460,8 @@ const Highlight = React.forwardRef(
 );
 Highlight.displayName = "@optiaxiom/react/Highlight";
 
-var editor = Skeleton.recipeRuntime({base:'_1ox14s6',variants:{empty:{false:{},true:'_4wc2ox'}}});
-var input$1 = Skeleton.recipeRuntime({base:'ec9n1y'});
+var editor = Skeleton.recipeRuntime({base:'fdpf9k',variants:{empty:{false:{},true:'j08cm8'}}});
+var input$1 = Skeleton.recipeRuntime({base:'_1kkz7do'});
 
 const InlineInput = React.forwardRef(
   ({
@@ -2277,20 +2541,23 @@ function getText(element) {
   return text;
 }
 
+var layout = Skeleton.recipeRuntime({base:[{bg:'bg.page',display:'flex',flexDirection:'column'},'_6v1wqn']});
+
 const Layout = React.forwardRef(
-  ({ children, header, sidenav, ...props }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsxs(Skeleton.Flex, { gap: "0", h: "full", ref, ...props, children: [
+  ({ children, className, header, sidebar, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsxs(Skeleton.Box, { ref, ...layout({}, className), ...props, children: [
       header,
       /* @__PURE__ */ jsxRuntime.jsxs(
-        Skeleton.Flex,
+        Skeleton.Box,
         {
-          alignItems: "start",
+          alignItems: "stretch",
+          display: "flex",
+          flex: "1",
           flexDirection: "row",
-          gap: "0",
-          justifyContent: "flex-start",
+          overflow: "auto",
           children: [
-            sidenav,
-            /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { flex: "1", h: "full", children })
+            sidebar,
+            /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { flex: "1", overflow: "auto", px: "32", py: "24", children })
           ]
         }
       )
@@ -2299,7 +2566,7 @@ const Layout = React.forwardRef(
 );
 Layout.displayName = "@optiaxiom/react/Layout";
 
-var pill = Skeleton.recipeRuntime({base:[{alignItems:'center',color:'fg.default',display:'flex',fontSize:'sm',gap:'4',px:'6',rounded:'md',whiteSpace:'nowrap'},'_19ae8g5'],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'},'_1r5yg2a'],variants:{size:{xs:{h:'xs'},sm:{h:'sm'}}}});
 
 const Pill = React.forwardRef(
   ({ asChild, children, className, disabled, size = "sm", ...props }, ref) => {
@@ -2350,7 +2617,7 @@ const SelectSeparator = React.forwardRef(
 );
 SelectSeparator.displayName = "@optiaxiom/react/SelectSeparator";
 
-const [SpotlightContextProvider, useSpotlightContext] = reactContext.createContext("Spotlight");
+const [SpotlightProvider, useSpotlightContext] = reactContext.createContext("@optiaxiom/react/Spotlight");
 
 function Spotlight({
   children,
@@ -2381,7 +2648,7 @@ function Spotlight({
     }
   }, [open, onInputValueChangeStable]);
   return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Dialog, { onOpenChange: setOpen, open, children: /* @__PURE__ */ jsxRuntime.jsx(
-    SpotlightContextProvider,
+    SpotlightProvider,
     {
       inputValue,
       isItemDisabled,
@@ -2409,7 +2676,7 @@ const SpotlightContent = React.forwardRef(({ "aria-label": ariaLabel, children,
     itemToSubItems,
     onInputValueChange,
     onItemSelect
-  } = useSpotlightContext("SpotlightContent");
+  } = useSpotlightContext("@optiaxiom/react/SpotlightContent");
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Skeleton.DialogContent,
     {
@@ -2466,7 +2733,7 @@ const SpotlightEmpty = React.forwardRef(
 );
 SpotlightEmpty.displayName = "@optiaxiom/react/SpotlightEmpty";
 
-var input = Skeleton.recipeRuntime({base:[{border:'0',borderB:'1',borderColor:'border.secondary',rounded:'none'},'_1q9pl28']});
+var input = Skeleton.recipeRuntime({base:[{border:'0',borderB:'1',borderColor:'border.secondary',rounded:'none'},'_10qdqkc']});
 
 const SpotlightInput = React.forwardRef(
   ({ addonAfter, className, ...props }, ref) => {
@@ -2523,7 +2790,7 @@ const SpotlightLabel = React.forwardRef(
 );
 SpotlightLabel.displayName = "@optiaxiom/react/SpotlightLabel";
 
-var item$1 = Skeleton.recipeRuntime({base:[{fontWeight:'500',mx:'24',px:'16',py:'12'},'wm8ww6']});
+var item$1 = Skeleton.recipeRuntime({base:[{fontWeight:'500',mx:'24',px:'16',py:'12'},'_1tamhs1']});
 
 const SpotlightRadioItem = React.forwardRef(({ addonAfter, children, className, description, ...props }, ref) => {
   return /* @__PURE__ */ jsxRuntime.jsx(SpotlightItem, { asChild: true, ref, ...item$1({}, className), ...props, children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -2540,11 +2807,11 @@ SpotlightRadioItem.displayName = "@optiaxiom/react/SpotlightRadioItem";
 const SpotlightScrollArea = React.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(Skeleton.ListboxScrollArea, { gap: "8", ref, ...props }));
 SpotlightScrollArea.displayName = "@optiaxiom/react/SpotlightScrollArea";
 
-const [CommandSubContextProvider, useCommandSubContext] = reactContext.createContext("CommandSub");
+const [CommandSubProvider, useCommandSubContext] = reactContext.createContext("@optiaxiom/react/CommandSub");
 
 const CommandSub = React.forwardRef(
   ({ children, item, ...props }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(CommandSubContextProvider, { item, children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { ref, role: "group", ...props, children }) });
+    return /* @__PURE__ */ jsxRuntime.jsx(CommandSubProvider, { item, children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { ref, role: "group", ...props, children }) });
   }
 );
 CommandSub.displayName = "@optiaxiom/react/CommandSub";
@@ -2568,8 +2835,10 @@ const CommandSubItem = React.forwardRef(
       setHighlightedIndex,
       setHighlightedSubIndex,
       value
-    } = useCommandContext("CommandSubItem");
-    const { item: parentItem } = useCommandSubContext("CommandSubItem");
+    } = useCommandContext("@optiaxiom/react/CommandSubItem");
+    const { item: parentItem } = useCommandSubContext(
+      "@optiaxiom/react/CommandSubItem"
+    );
     const subItems = itemToSubItems?.(parentItem) ?? [];
     const highlightedSubItem = highlightedItem === parentItem && highlightedSubIndex !== -1 ? subItems[highlightedSubIndex] : null;
     const subIndex = subItems.indexOf(item);
@@ -2620,7 +2889,7 @@ const CommandSubItem = React.forwardRef(
 );
 CommandSubItem.displayName = "@optiaxiom/react/CommandSubItem";
 
-var item = Skeleton.recipeRuntime({base:[{cursor:'pointer'}],variants:{active:{false:'v7xksb',true:'uqg0x5'}}});
+var item = Skeleton.recipeRuntime({base:[{cursor:'pointer'}],variants:{active:{false:'fc3p48',true:'pt70ii'}}});
 
 const SpotlightSubItem = React.forwardRef(({ children, className, selected, ...props }, ref) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -2646,18 +2915,20 @@ SpotlightSubItem.displayName = "@optiaxiom/react/SpotlightSubItem";
 
 const DEFAULT_HOTKEY = "mod+K";
 const SpotlightTrigger = React.forwardRef(({ children, hotkey = DEFAULT_HOTKEY, ...props }, ref) => {
-  const { open, setOpen } = useSpotlightContext("SpotlightTrigger");
+  const { open, setOpen } = useSpotlightContext(
+    "@optiaxiom/react/SpotlightTrigger"
+  );
   useHotkeys([[hotkey, () => setOpen(!open)]]);
   return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.DialogTrigger, { icon: /* @__PURE__ */ jsxRuntime.jsx(Skeleton.IconMagnifyingGlass, {}), ref, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { color: "fg.tertiary", children }) });
 });
 SpotlightTrigger.displayName = "@optiaxiom/react/SpotlightTrigger";
 
-const TableActions = React.forwardRef(
+const TableAction = React.forwardRef(
   (props, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsx(ActionsContent, { ref, ...props });
   }
 );
-TableActions.displayName = "@optiaxiom/react/TableActions";
+TableAction.displayName = "@optiaxiom/react/TableAction";
 
 exports.Breadcrumb = Breadcrumb;
 exports.BreadcrumbEllipsis = BreadcrumbEllipsis;
@@ -2666,7 +2937,7 @@ exports.BreadcrumbLink = BreadcrumbLink;
 exports.BreadcrumbPage = BreadcrumbPage;
 exports.Calendar = Calendar;
 exports.Card = Card;
-exports.CardActions = CardActions;
+exports.CardAction = CardAction;
 exports.CardCheckbox = CardCheckbox;
 exports.CardContent = CardContent;
 exports.CardDescription = CardDescription;
@@ -2674,6 +2945,7 @@ exports.CardImage = CardImage;
 exports.CardLink = CardLink;
 exports.CardOverflow = CardOverflow;
 exports.CardTitle = CardTitle;
+exports.Clock = Clock;
 exports.Combobox = Combobox;
 exports.ComboboxCheckboxItem = ComboboxCheckboxItem;
 exports.ComboboxContent = ComboboxContent;
@@ -2727,7 +2999,7 @@ exports.SpotlightSub = SpotlightSub;
 exports.SpotlightSubItem = SpotlightSubItem;
 exports.SpotlightTrigger = SpotlightTrigger;
 exports.Table = Table;
-exports.TableActions = TableActions;
+exports.TableAction = TableAction;
 exports.TableBody = TableBody;
 exports.TableCell = TableCell;
 exports.TableHeader = TableHeader;