@optiaxiom/react 1.0.2 → 1.1.0

package/dist/cjs/unstable.js

@@ -3,87 +3,86 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
-var Skeleton = require('./Skeleton-6yrR3CTz.js');
-require('./assets/src/layers/layers.css.ts.vanilla-6xLEkHBd.css');
-require('./assets/src/breadcrumb-item/BreadcrumbItem.css.ts.vanilla-Wrav6UY7.css');
-require('./assets/src/breadcrumb-link/BreadcrumbLink.css.ts.vanilla-D9fDwi5c.css');
+var Skeleton = require('./Skeleton-C94CfpKC.js');
+require('./assets/src/layers/layers.css.ts.vanilla-vkICs9QI.css');
+require('./assets/src/breadcrumb-item/BreadcrumbItem.css.ts.vanilla-CzM03E0T.css');
+require('./assets/src/breadcrumb-link/BreadcrumbLink.css.ts.vanilla-CW9oXG7L.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-CUPJPb-Q.css');
 var reactSlot = require('@radix-ui/react-slot');
-require('./assets/src/calendar/CalendarDayButton.css.ts.vanilla-BuCPLplF.css');
-require('./assets/src/calendar/CalendarMonths.css.ts.vanilla-Czb1i3AJ.css');
-require('./assets/src/calendar/CalendarNav.css.ts.vanilla-EHFSUN3p.css');
+require('./assets/src/calendar/CalendarDayButton.css.ts.vanilla-CDGpnEQo.css');
+require('./assets/src/calendar/CalendarMonths.css.ts.vanilla-Dg0B9pk6.css');
+require('./assets/src/calendar/CalendarNav.css.ts.vanilla-DEA4bVgm.css');
 var reactId = require('@radix-ui/react-id');
-require('./assets/src/actions-root/ActionsRoot.css.ts.vanilla-Batxd1He.css');
-var reactContext = require('@radix-ui/react-context');
-require('./assets/src/cover/Cover.css.ts.vanilla-VfBrbMf1.css');
-require('./assets/src/link/Link.css.ts.vanilla-DWgR_kLB.css');
-require('./assets/src/card/Card.css.ts.vanilla-jqZb_7_n.css');
-require('./assets/src/actions-content/ActionsContent.css.ts.vanilla-D4gK0Ccv.css');
-require('./assets/src/card-overflow/CardOverflow.css.ts.vanilla-BJFwp3I-.css');
-require('./assets/src/card-actions/CardActions.css.ts.vanilla-rkKkSUIB.css');
+require('./assets/src/actions-root/ActionsRoot.css.ts.vanilla-CJW_goYk.css');
+require('./assets/src/cover/Cover.css.ts.vanilla-BillaUi-.css');
+require('./assets/src/link/Link.css.ts.vanilla-ByffnwI1.css');
+require('./assets/src/card/Card.css.ts.vanilla-DufBvLZH.css');
+require('./assets/src/actions-content/ActionsContent.css.ts.vanilla-v-rhY2uH.css');
+require('./assets/src/card-overflow/CardOverflow.css.ts.vanilla-BpmRlr0X.css');
+require('./assets/src/card-action/CardAction.css.ts.vanilla-D4i-Q7fB.css');
 var reactVisuallyHidden = require('@radix-ui/react-visually-hidden');
 var clsx = require('clsx');
-require('./assets/src/card-image/CardImage.css.ts.vanilla-CdKgrBrx.css');
-require('./assets/src/clock/Clock.css.ts.vanilla-BaVWu3y1.css');
+require('./assets/src/card-image/CardImage.css.ts.vanilla-CCN9Akc4.css');
 var RadixDialog = require('@radix-ui/react-dialog');
-require('./assets/src/command-focusable-item/CommandFocusableItem.css.ts.vanilla-Bk9Sshj3.css');
-var downshift = require('downshift');
+require('./assets/src/command-focusable-item/CommandFocusableItem.css.ts.vanilla-DozsjqdV.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-CR4c6ZJD.css');
-require('./assets/src/data-table-header-cell/DataTableHeaderCell.css.ts.vanilla-CQes1rIJ.css');
-require('./assets/src/table/Table.css.ts.vanilla-C2knp12j.css');
-require('./assets/src/table-body/TableBody.css.ts.vanilla-Cy2iQrvr.css');
-require('./assets/src/table-row/TableRow.css.ts.vanilla-CggMOZ5O.css');
-require('./assets/src/table-cell/TableCell.css.ts.vanilla-CLVXoap2.css');
-require('./assets/src/data-table-body/DataTableBody.css.ts.vanilla-cijPXl7J.css');
-var reactPopper = require('@radix-ui/react-popper');
-var reactPortal = require('@radix-ui/react-portal');
-require('./assets/src/select-content/SelectContent.css.ts.vanilla-C7dom7EC.css');
-require('./assets/src/data-table-footer/DataTableFooter.css.ts.vanilla-DV0TYHds.css');
-require('./assets/src/date-input/DateInput.css.ts.vanilla-B0e6Oo6W.css');
-require('./assets/src/date-picker-content/DatePickerContent.css.ts.vanilla-5QVFlo3i.css');
-require('./assets/src/date-range-picker-content/DateRangePickerContent.css.ts.vanilla-w1iL6nG7.css');
-require('./assets/src/highlight/Highlight.css.ts.vanilla-DlB5ywBV.css');
-require('./assets/src/inline-input/InlineInput.css.ts.vanilla-DDW_L463.css');
-require('./assets/src/pill/Pill.css.ts.vanilla-DTEQ70xM.css');
-require('./assets/src/spotlight-input/SpotlightInput.css.ts.vanilla-4WgqftEf.css');
-require('./assets/src/spotlight-radio-item/SpotlightRadioItem.css.ts.vanilla-CT3QKOG7.css');
-require('./assets/src/badge/Badge.css.ts.vanilla-DW9NourM.css');
-require('./assets/src/spotlight-sub-item/SpotlightSubItem.css.ts.vanilla-D4Goz1uu.css');
-require('./assets/src/backdrop/Backdrop.css.ts.vanilla-B5sSvN1U.css');
-require('./assets/src/dialog-content/DialogContent.css.ts.vanilla-CBpuJlOi.css');
+require('./assets/src/table-header-cell/TableHeaderCell.css.ts.vanilla-8aFaM0Co.css');
+require('./assets/src/data-table-header-cell/DataTableHeaderCell.css.ts.vanilla-BnZgXHK7.css');
+require('./assets/src/table/Table.css.ts.vanilla-CtTF7IAL.css');
+require('./assets/src/table-body/TableBody.css.ts.vanilla-Dyv91Jmu.css');
+require('./assets/src/table-row/TableRow.css.ts.vanilla-C6FlfSZZ.css');
+require('./assets/src/table-cell/TableCell.css.ts.vanilla-BFYKlSW5.css');
+require('./assets/src/data-table-body/DataTableBody.css.ts.vanilla-DkCOv7cr.css');
+require('./assets/src/data-table-footer/DataTableFooter.css.ts.vanilla-B7XSi-el.css');
+require('./assets/src/date-input/DateInput.css.ts.vanilla-COGhbDU6.css');
+require('./assets/src/date-picker-content/DatePickerContent.css.ts.vanilla-C1UbsQ3R.css');
+require('./assets/src/date-range-picker-content/DateRangePickerContent.css.ts.vanilla-BsbkFgoB.css');
+require('./assets/src/highlight/Highlight.css.ts.vanilla-Cu9rnljA.css');
+require('./assets/src/inline-input/InlineInput.css.ts.vanilla-CcZ_-P5w.css');
+require('./assets/src/layout/Layouts.css.ts.vanilla-BrJZ9b48.css');
+require('./assets/src/pill/Pill.css.ts.vanilla-BerLBPwr.css');
+require('./assets/src/spotlight-input/SpotlightInput.css.ts.vanilla-BG50h7Fr.css');
+require('./assets/src/spotlight-radio-item/SpotlightRadioItem.css.ts.vanilla-Cla2d-L6.css');
+require('./assets/src/badge/Badge.css.ts.vanilla-gAONLzWs.css');
+require('./assets/src/spotlight-sub-item/SpotlightSubItem.css.ts.vanilla-DfwAJ8Wz.css');
+require('./assets/src/backdrop/Backdrop.css.ts.vanilla-DH-dqyss.css');
+require('./assets/src/dialog-content/DialogContent.css.ts.vanilla-Bx03v-7N.css');
 require('@radix-ui/react-separator');
-require('./assets/src/separator/Separator.css.ts.vanilla-Dt5coXzs.css');
-require('./assets/src/input-control/InputControl.css.ts.vanilla-CODeJXi7.css');
-require('./assets/src/actions-root/ActionsRoot.css.ts.vanilla-Batxd1He.css');
-require('./assets/src/input-root/InputRoot.css.ts.vanilla-C1aUDOLz.css');
-require('./assets/src/actions-root/ActionsRoot.css.ts.vanilla-Batxd1He.css');
-require('./assets/src/toggle-input/ToggleInput.css.ts.vanilla-BwHzm_lE.css');
-require('./assets/src/toggle-input-control/ToggleInputControl.css.ts.vanilla-DFokRA79.css');
-require('./assets/src/checkbox-control/CheckboxControl.css.ts.vanilla-DrgK3jgJ.css');
-require('./assets/src/listbox-item/ListboxItem.css.ts.vanilla-D_Wh-eb-.css');
+require('./assets/src/separator/Separator.css.ts.vanilla-B4XqOfv3.css');
+require('./assets/src/input-control/InputControl.css.ts.vanilla-BO22HPl9.css');
+require('./assets/src/actions-root/ActionsRoot.css.ts.vanilla-CJW_goYk.css');
+require('./assets/src/input-root/InputRoot.css.ts.vanilla-Cak7u8CN.css');
+require('./assets/src/actions-root/ActionsRoot.css.ts.vanilla-CJW_goYk.css');
+require('./assets/src/toggle-input/ToggleInput.css.ts.vanilla-DUlOrUqH.css');
+require('./assets/src/toggle-input-control/ToggleInputControl.css.ts.vanilla-B1vhYFxv.css');
+require('./assets/src/checkbox-control/CheckboxControl.css.ts.vanilla-DLcEJJNX.css');
+require('./assets/src/listbox-item/ListboxItem.css.ts.vanilla-BH3StrZy.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--BprUCC4.css');
-require('./assets/src/pagination/Pagination.css.ts.vanilla-BjG7sX12.css');
+require('./assets/src/text/Text.css.ts.vanilla-DHt1LDgX.css');
+require('./assets/src/pagination/Pagination.css.ts.vanilla-DbLUh50Y.css');
 require('@radix-ui/react-popover');
-require('./assets/src/menu-listbox/MenuListbox.css.ts.vanilla-D6zofeeh.css');
-require('@radix-ui/react-toggle-group');
-require('./assets/src/button-base/ButtonBase.css.ts.vanilla-CsVNMzoL.css');
-require('./assets/src/button-loadable/ButtonLoadable.css.ts.vanilla-Cdkejac-.css');
-require('./assets/src/spinner/Spinner.css.ts.vanilla-B1TBE6xG.css');
-require('./assets/src/transition/Transition.css.ts.vanilla-CGqIkEMY.css');
+require('./assets/src/menu-listbox/MenuListbox.css.ts.vanilla-CtoX0bQr.css');
+require('./assets/src/button-base/ButtonBase.css.ts.vanilla-DB7Rlj5O.css');
+require('./assets/src/button-loadable/ButtonLoadable.css.ts.vanilla-CBeN_0Yc.css');
+require('./assets/src/spinner/Spinner.css.ts.vanilla-DatXx1Xy.css');
+require('./assets/src/transition/Transition.css.ts.vanilla-_fzqKmJt.css');
 require('@optiaxiom/globals/fonts');
-require('./assets/src/sprinkles/properties.css.ts.vanilla-IQK5Rgk4.css');
-require('./assets/src/box/Box.css.ts.vanilla-CtfynAbO.css');
-require('./assets/src/skeleton/Skeleton.css.ts.vanilla-DVD42p2z.css');
+require('./assets/src/sprinkles/properties.css.ts.vanilla-kIkWJMG2.css');
+require('./assets/src/box/Box.css.ts.vanilla-Dh_7dI_N.css');
+require('./assets/src/skeleton/Skeleton.css.ts.vanilla-B-wYTiAT.css');
 
 function _interopNamespaceDefault(e) {
   var n = Object.create(null);
@@ -104,7 +103,15 @@ function _interopNamespaceDefault(e) {
 
 var RadixDialog__namespace = /*#__PURE__*/_interopNamespaceDefault(RadixDialog);
 
-const toLocalDate = (date) => new Date(date.getTime() - new Date(date).getTimezoneOffset() * 60 * 1e3).toISOString().slice(0, -1);
+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 {
@@ -237,7 +244,7 @@ function BreadcrumbEllipsis({ ...props }) {
 }
 BreadcrumbEllipsis.displayName = "@optiaxiom/react/BreadcrumbEllipsis";
 
-var item$3 = Skeleton.recipeRuntime({base:[{alignItems:'center',display:'inline-flex'},'_1pr0wtp']});
+var item$3 = Skeleton.recipeRuntime({base:[{alignItems:'center',display:'inline-flex'},'_1s4zy74']});
 
 const BreadcrumbItem = React.forwardRef(
   ({ children, className, ...props }, ref) => {
@@ -247,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'},'_1kpvdup']});
+var link = Skeleton.recipeRuntime({base:[{alignItems:'center',display:'flex',fontSize:'md',h:'md',rounded:'md'},'_19mb0tw']});
 
 const BreadcrumbLink = React.forwardRef(({ className, ...props }, ref) => {
   return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Link, { ...link({}, className), ref, ...props });
@@ -261,6 +268,325 @@ 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:['_11mh0s6']});
+
+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(() => {
@@ -295,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'},'_10knug1'],variants:{appearance:{'default':'_1f1c79j',holiday:[{color:'fg.error'},'eqoxcy'],range_middle:'djfph4',selected:[{color:'fg.white'},'_1pz7t5s'],weekend:[{color:'fg.tertiary'},'_10vynvc']},range:{end:['_1aeycoa'],middle:['f84itz'],start:['oo4fp2']}}});
-var today = Skeleton.recipeRuntime({base:[{bg:'current',mx:'auto',rounded:'full'},'hilpb5']});
+var button$1 = Skeleton.recipeRuntime({base:[{color:'fg.default',fontSize:'md',size:'md',transition:'colors'},'_1vap8hj'],variants:{appearance:{'default':'giplgz',holiday:[{color:'fg.error'},'_176mstm'],range_middle:'_15hr68g',selected:[{color:'fg.white'},'_5rvt1o'],weekend:[{color:'fg.tertiary'},'_1fued4w']},range:{end:['fmdxiy'],middle:['s45iho'],start:['_1nokx2h']}}});
+var today = Skeleton.recipeRuntime({base:[{bg:'current',mx:'auto',rounded:'full'},'_7yypfb']});
 
 function CalendarDayButton({
   children,
@@ -365,14 +691,14 @@ function CalendarMonthGrid({
 }
 CalendarMonthGrid.displayName = "@optiaxiom/react/CalendarMonthGrid";
 
-var months = Skeleton.recipeRuntime({base:[{alignItems:'start',flexDirection:'row'},'_1svokqo']});
+var months = Skeleton.recipeRuntime({base:[{alignItems:'start',flexDirection:'row'},'nkx1a1']});
 
 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'},'_1bmk9r1']});
+var nav = Skeleton.recipeRuntime({base:[{display:'flex',justifyContent:'space-between',w:'full'},'onog7q']});
 
 function CalendarNav({ children, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { asChild: true, ...nav(), children: /* @__PURE__ */ jsxRuntime.jsx(reactDayPicker.Nav, { ...props, children }) });
@@ -397,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,
@@ -412,7 +751,9 @@ const components = {
   Nav: CalendarNav,
   NextMonthButton: CalendarNextMonthButton,
   PreviousMonthButton: CalendarPreviousMonthButton,
-  Weekday: CalendarWeekday
+  Week: CalendarWeek,
+  Weekday: CalendarWeekday,
+  Weekdays: CalendarWeekdays
 };
 const Calendar = React.forwardRef(
   ({
@@ -423,7 +764,9 @@ const Calendar = React.forwardRef(
     mode = "single",
     onHeightChange,
     onValueChange,
+    step,
     today,
+    type = "date",
     value: valueProp,
     weekend,
     ...props
@@ -433,6 +776,7 @@ const Calendar = React.forwardRef(
       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
@@ -453,40 +797,65 @@ const Calendar = React.forwardRef(
       observer.observe(innerRef.current);
       return () => observer.disconnect();
     }, [onHeightChangeStable]);
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      Skeleton.Box,
+    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,
-            disabled: [
-              ...min ? [{ before: min }] : [],
-              ...max ? [{ after: max }] : []
-            ],
-            mode,
-            modifiers: { holiday, weekend },
-            numberOfMonths: mode === "range" ? numberOfMonths : 1,
-            onSelect: setValue,
-            required: true,
-            selected: value,
-            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:'_95huea'});
+var root = Skeleton.recipeRuntime({base:'_8e4v72'});
 
 const ActionsRoot = React.forwardRef(
   ({ children, className, ...props }, ref) => {
@@ -495,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:['sw28nd',{border:'1',borderColor:'border.tertiary',color:'fg.default',gap:'12',p:'16',transition:'transform'},'_1kiyjmj']});
+var card = Skeleton.recipeRuntime({base:['dwgynt',{border:'1',borderColor:'border.tertiary',color:'fg.default',gap:'12',p:'16',transition:'transform'},'_1g79nyr']});
 
 const mapOrientationToFlexDirection = {
   horizontal: "row",
@@ -508,7 +877,7 @@ const Card = React.forwardRef(
     const descriptionId = reactId.useId();
     const labelId = reactId.useId();
     return /* @__PURE__ */ jsxRuntime.jsx(
-      CardContextProvider,
+      CardProvider,
       {
         descriptionId,
         labelId,
@@ -529,28 +898,28 @@ const Card = React.forwardRef(
 );
 Card.displayName = "@optiaxiom/react/Card";
 
-var content$2 = Skeleton.recipeRuntime({base:[{display:'flex',justifyContent:'space-between'},'_9h6tbk'],variants:{visible:{false:'_10pykq8',true:'_1mi6vpt'}}});
+var content$1 = Skeleton.recipeRuntime({base:[{display:'flex',justifyContent:'space-between'},'nrfvuw'],variants:{visible:{false:'_2i8qyc',true:'_1dr91yd'}}});
 
 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:['dp909n']});
+var action = Skeleton.recipeRuntime({base:['_1er1c2g']});
 
-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
@@ -593,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,
     {
@@ -608,11 +977,11 @@ const CardDescription = React.forwardRef(({ children, ...props }, ref) => {
 });
 CardDescription.displayName = "@optiaxiom/react/CardDescription";
 
-var cardImage = Skeleton.recipeRuntime({base:[{h:'full',rounded:'inherit'},'_13swnz9'],variants:{orientation:{horizontal:[{w:'auto'},'_8r39l3'],vertical:[{w:'full'},'_1y1df8o']}}});
+var cardImage = Skeleton.recipeRuntime({base:[{h:'full',rounded:'inherit'},'_1plr2j9'],variants:{orientation:{horizontal:[{w:'auto'},'vn1esz'],vertical:[{w:'full'},'kotdbi']}}});
 
 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,
       {
@@ -634,11 +1003,11 @@ const CardLink = React.forwardRef(
 );
 CardLink.displayName = "@optiaxiom/react/CardLink";
 
-var cardOverflow = Skeleton.recipeRuntime({base:['rhlxpg',{alignSelf:'stretch'},'aanpp1'],variants:{orientation:{horizontal:['_1vdtv4p'],vertical:['_1kol0hh']}}});
+var cardOverflow = Skeleton.recipeRuntime({base:['_1etn66z',{alignSelf:'stretch'},'_6v7ldk'],variants:{orientation:{horizontal:['_5g053c'],vertical:['_1tzs4xu']}}});
 
 const CardOverflow = React.forwardRef(
   ({ children, className, ...props }, ref) => {
-    const { orientation } = useCardContext("CardOverflow");
+    const { orientation } = useCardContext("@optiaxiom/react/CardOverflow");
     return /* @__PURE__ */ jsxRuntime.jsx(
       Skeleton.Box,
       {
@@ -655,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,
       {
@@ -672,162 +1041,7 @@ const CardTitle = React.forwardRef(
 );
 CardTitle.displayName = "@optiaxiom/react/CardTitle";
 
-var wheel = Skeleton.recipeRuntime({base:[{flexDirection:'column',gap:'2',justifyContent:'flex-start',overflow:'auto',px:'4'},'v9ht2q']});
-
-const format$1 = ({
-  hour,
-  meridiem,
-  minute
-}) => {
-  const formattedHour = parseInt(hour) === 12 ? 0 : parseInt(hour);
-  return (formattedHour + (meridiem === "PM" ? 12 : 0)).toString().padStart(2, "0") + ":" + minute;
-};
-const parse$1 = (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 parsed = parse$1(value, parseInt(step) / 60);
-    const hourRef = React.useRef(null);
-    const minuteRef = React.useRef(null);
-    React.useEffect(() => {
-      if (hourRef.current?.parentElement) {
-        hourRef.current.parentElement.style.overflow = "hidden";
-        hourRef.current?.scrollIntoView();
-        hourRef.current.parentElement.style.overflow = "";
-      }
-      if (minuteRef.current?.parentElement) {
-        minuteRef.current.parentElement.style.overflow = "hidden";
-        minuteRef.current?.scrollIntoView();
-        minuteRef.current.parentElement.style.overflow = "";
-      }
-    }, []);
-    return /* @__PURE__ */ jsxRuntime.jsxs(
-      Skeleton.Flex,
-      {
-        alignItems: "stretch",
-        flexDirection: "row",
-        gap: "0",
-        onKeyDown: (event) => {
-          if (!(event.target instanceof HTMLButtonElement)) {
-            return;
-          }
-          const parent = event.target.parentElement;
-          if (!parent) {
-            return;
-          }
-          const grandParent = parent.parentElement;
-          if (!grandParent) {
-            return;
-          }
-          const sibling = event.key === "ArrowRight" ? parent.nextElementSibling ?? grandParent.firstElementChild : event.key === "ArrowLeft" ? parent.previousElementSibling ?? grandParent.lastElementChild : void 0;
-          if (!sibling) {
-            return;
-          }
-          const focusable = sibling.querySelector('[tabindex="0"]') ?? sibling.querySelector('[aria-checked="true"]');
-          if (focusable instanceof HTMLButtonElement) {
-            focusable.focus();
-          }
-        },
-        ref,
-        ...props,
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            Skeleton.SegmentedControl,
-            {
-              "aria-label": "Select hour",
-              loop: true,
-              onValueChange: (hour) => hour && setValue(format$1({ ...parsed, hour })),
-              orientation: "vertical",
-              role: "radiogroup",
-              value: parsed.hour,
-              ...wheel(),
-              children: range(1, 12).map((hour) => /* @__PURE__ */ jsxRuntime.jsx(
-                Skeleton.SegmentedControlItem,
-                {
-                  appearance: "subtle",
-                  flex: "none",
-                  ref: hour === parsed.hour ? hourRef : void 0,
-                  square: true,
-                  value: hour,
-                  children: hour
-                },
-                hour
-              ))
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            Skeleton.SegmentedControl,
-            {
-              "aria-label": "Select minute",
-              loop: true,
-              onValueChange: (minute) => minute && setValue(format$1({ ...parsed, minute })),
-              orientation: "vertical",
-              role: "radiogroup",
-              value: parsed.minute,
-              ...wheel(),
-              children: range(0, 59, parseInt(step) / 60).map((minute) => minute.padStart(2, "0")).map((minute) => /* @__PURE__ */ jsxRuntime.jsx(
-                Skeleton.SegmentedControlItem,
-                {
-                  appearance: "subtle",
-                  "aria-label": `${parseInt(minute)}`,
-                  flex: "none",
-                  ref: minute === parsed.minute ? minuteRef : void 0,
-                  square: true,
-                  value: minute,
-                  children: minute
-                },
-                minute
-              ))
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            Skeleton.SegmentedControl,
-            {
-              "aria-label": "Select AM or PM",
-              onValueChange: (meridiem) => meridiem && setValue(format$1({ ...parsed, meridiem })),
-              orientation: "vertical",
-              role: "radiogroup",
-              value: parsed.meridiem,
-              ...wheel(),
-              children: ["AM", "PM"].map((meridiem) => /* @__PURE__ */ jsxRuntime.jsx(
-                Skeleton.SegmentedControlItem,
-                {
-                  appearance: "subtle",
-                  flex: "none",
-                  square: true,
-                  value: meridiem,
-                  children: meridiem
-                },
-                meridiem
-              ))
-            }
-          )
-        ]
-      }
-    );
-  }
-);
-Clock.displayName = "@optiaxiom/react/Clock";
-
-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: [
@@ -892,7 +1106,7 @@ function Combobox({
     }
   }, [open, onInputValueChangeStable]);
   return /* @__PURE__ */ jsxRuntime.jsx(components.Root, { onOpenChange: setOpen, open, children: /* @__PURE__ */ jsxRuntime.jsx(
-    ComboboxContextProvider,
+    ComboboxProvider,
     {
       components,
       inputValue,
@@ -911,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:'_1xqzlpu'});
+var item$2 = Skeleton.recipeRuntime({base:'_1qxaypg'});
 
 const CommandFocusableItem = React.forwardRef(({ children, className, ...props }, ref) => {
-  const { lastInteractionSource } = useCommandContext("CommandFocusableItem");
+  const { lastInteractionSource } = useCommandContext(
+    "@optiaxiom/react/CommandFocusableItem"
+  );
   return /* @__PURE__ */ jsxRuntime.jsx(
     Skeleton.Box,
     {
@@ -932,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,
@@ -957,36 +1175,12 @@ 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
-  ];
-}
+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({
@@ -1055,7 +1249,7 @@ function Command({
       }
     },
     onSelectedItemChange({ selectedItem: selectedItem2, type }) {
-      if (type !== downshift.useCombobox.stateChangeTypes.InputBlur) {
+      if (type !== downshift.useCombobox.stateChangeTypes.InputBlur && selectedItem2) {
         onItemSelect?.(selectedItem2);
       }
     },
@@ -1063,7 +1257,7 @@ function Command({
   });
   downshift$1.getMenuProps({}, { suppressRefError: true });
   return /* @__PURE__ */ jsxRuntime.jsx(
-    CommandContextProvider,
+    CommandProvider,
     {
       downshift: downshift$1,
       highlightedItem: items[downshift$1.highlightedIndex],
@@ -1091,7 +1285,9 @@ Command.displayName = "@optiaxiom/react/Command";
 
 const CommandListbox = React.forwardRef(
   ({ children, size, ...props }, ref) => {
-    const { downshift, setPlaced } = useCommandContext("CommandListbox");
+    const { downshift, setPlaced } = useCommandContext(
+      "@optiaxiom/react/CommandListbox"
+    );
     React.useEffect(() => {
       setPlaced(true);
     }, [setPlaced]);
@@ -1117,7 +1313,7 @@ const ComboboxContent = React.forwardRef(
       onInputValueChange,
       onItemSelect,
       value
-    } = useComboboxContext("ComboboxContent");
+    } = useComboboxContext("@optiaxiom/react/ComboboxContent");
     return /* @__PURE__ */ jsxRuntime.jsx(
       components.Content,
       {
@@ -1194,7 +1390,7 @@ const CommandInput = React.forwardRef(
       itemToSubItems,
       setHighlightedSubIndex,
       setInputValue
-    } = useCommandContext("CommandInput");
+    } = useCommandContext("@optiaxiom/react/CommandInput");
     return /* @__PURE__ */ jsxRuntime.jsx(
       Skeleton.Input,
       {
@@ -1244,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(() => {
@@ -1298,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,
@@ -1329,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]
@@ -1375,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
       ))
@@ -1410,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) => {
@@ -1423,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 })
       }
     );
   }
@@ -1475,17 +1683,17 @@ const IconSortUp = Skeleton.withIcon(
   )
 );
 
-var cell$2 = Skeleton.recipeRuntime({base:'_1t6es8j'});
-var content$1 = Skeleton.recipeRuntime({base:[{alignItems:'center',bg:'bg.default',color:'fg.tertiary',display:'flex',fontSize:'sm',fontWeight:'400',size:'full'},'jpo0c5']});
+var cell$2 = Skeleton.recipeRuntime({base:'_8l8mo8'});
+var content = Skeleton.recipeRuntime({base:[{alignItems:'center',bg:'bg.default',color:'fg.tertiary',display:'flex',fontSize:'sm',fontWeight:'400',size:'full'},'vaoz1s']});
 
 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'},'i36ohh']});
-var handle = Skeleton.recipeRuntime({base:[{h:'full',z:'10'},'tft6v7'],variants:{resizing:{false:{},true:{borderColor:'border.focus'}}}});
-var icon = Skeleton.recipeRuntime({base:[{h:'12',mx:'2',transition:'opacity'},'_76b24g'],variants:{active:{false:'dds9wk',true:'iweeh1'}}});
+var button = Skeleton.recipeRuntime({base:[{alignItems:'center',display:'flex',gap:'4',justifyContent:'flex-start',rounded:'md',textAlign:'start',transition:'colors',w:'full'},'_1n20p99']});
+var handle = Skeleton.recipeRuntime({base:[{h:'full',z:'10'},'bad435'],variants:{resizing:{false:{},true:{borderColor:'border.focus'}}}});
+var icon = Skeleton.recipeRuntime({base:[{h:'12',mx:'2',transition:'opacity'},'j2cnd9'],variants:{active:{false:'_1a5sce4',true:'dg1py2'}}});
 
 const DataTableHeaderCell = React.forwardRef(({ children, header, ...props }, ref) => {
   const sortDir = header.column.getIsSorted();
@@ -1538,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'},'_1f225ne'],variants:{layout:{auto:['o8uu7m'],fixed:[{display:'grid'},'_12s5nxe']}}});
-var wrapper = Skeleton.recipeRuntime({base:[{bg:'bg.default',border:'1',borderColor:'border.tertiary',maxW:'full',overflow:'auto',rounded:'lg'},'_19znkp8']});
+var table$1 = Skeleton.recipeRuntime({base:[{color:'fg.default',fontSize:'md',w:'full'},'q0holg'],variants:{layout:{auto:['_1ggsht7'],fixed:[{display:'grid'},'_1quwmfv']}}});
+var wrapper = Skeleton.recipeRuntime({base:[{bg:'bg.default',border:'1',borderColor:'border.tertiary',maxW:'full',overflow:'auto',rounded:'lg'},'_118482a']});
 
 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:['yjuixr']});
+var body = Skeleton.recipeRuntime({base:['_1socatb']});
 
 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'},'_4hbdk0']});
+var cell$1 = Skeleton.recipeRuntime({base:[{borderColor:'border.tertiary',p:'16'},'sq55b8']});
 
 const TableCell = React.forwardRef(
   ({ children, className, colSpan, ...props }, ref) => {
@@ -1565,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:['neabsm',{transition:'colors',w:'full'},'_1c33ogq']});
+var row = Skeleton.recipeRuntime({base:['wyz3iu',{transition:'colors',w:'full'},'_1yd1o42']});
 
 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'},'vhvrs2'],variants:{pinned:{left:'_12le3yj',right:'_4h3ij'},pinnedType:{body:'psuqw8',header:{}}}});
-var cellOffsetVar = 'var(--_10jvtdq)';
-var cellSizeVar = 'var(--_1cv9ezw)';
-var header = Skeleton.recipeRuntime({base:[{display:'grid'},'_1pnzk2v']});
-var leftTotalSizeVar = 'var(--_14y88du)';
-var rightTotalSizeVar = 'var(--_1udkrwj)';
-var table = Skeleton.recipeRuntime({base:'_1y8bhl5',variants:{pinned:{both:'_1cfhjth',left:'_17a6ok',none:{},right:'_1gmnqvo'}}});
+var cell = Skeleton.recipeRuntime({base:[{alignItems:'start',display:'flex'},'_8sf1a2'],variants:{pinned:{left:'_1p093rt',right:'_18bc52u'},pinnedType:{body:'glube',header:{}}}});
+var cellOffsetVar = 'var(--_15w1brq)';
+var cellSizeVar = 'var(--k2xsiu)';
+var header = Skeleton.recipeRuntime({base:[{display:'grid'},'y7rd5h']});
+var leftTotalSizeVar = 'var(--_1nxkbss)';
+var rightTotalSizeVar = 'var(--_1th7wfd)';
+var table = Skeleton.recipeRuntime({base:'lojb8x',variants:{pinned:{both:'_1sxcvpq',left:'bvoidh',none:{},right:'_1b6if6m'}}});
 
 const COL_VIRTUALIZATION_THRESHOLD = 20;
 const ROW_VIRTUALIZATION_THRESHOLD = 20;
@@ -1586,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({
@@ -1756,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:['_1btiqej']});
-
-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:'_17o6sfb',variants:{position:{end:{textAlign:'end'},start:{}}}});
+var addon = Skeleton.recipeRuntime({base:'bxd4en',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(
@@ -1948,6 +1977,7 @@ const DataTableFooter = React.forwardRef(
       {
         alignSelf: "stretch",
         flexDirection: "row",
+        fontSize: "md",
         justifyContent: "space-between",
         mt: "auto",
         ref,
@@ -2016,26 +2046,34 @@ const IconCalendar = Skeleton.withIcon(
   )
 );
 
-var picker = Skeleton.recipeRuntime({base:'_114qqkw'});
+var picker = Skeleton.recipeRuntime({base:'_1ru8rxk'});
 
-function format(date) {
-  return toLocalDate(date).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() + new Date(rawDate).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;
@@ -2051,6 +2089,7 @@ const DateInput = React.forwardRef(
               "aria-label": "Show date picker",
               hasCustomAnchor: true,
               icon: /* @__PURE__ */ jsxRuntime.jsx(IconCalendar, {}),
+              ref: pickerRef,
               size: "sm",
               ...picker()
             }
@@ -2072,7 +2111,8 @@ const DateInput = React.forwardRef(
             }
           },
           ref,
-          type: "date",
+          step,
+          type,
           ...props
         }
       ) }),
@@ -2081,8 +2121,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(
@@ -2096,27 +2145,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" })
+            ] })
           ]
         }
       )
@@ -2125,7 +2185,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,
@@ -2151,7 +2211,7 @@ function DatePicker({
     prop: valueProp
   });
   return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Popover, { onOpenChange: setOpen, open, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(
-    DatePickerContextProvider,
+    DatePickerProvider,
     {
       disabled,
       setValue,
@@ -2164,7 +2224,7 @@ function DatePicker({
 }
 DatePicker.displayName = "@optiaxiom/react/DatePicker";
 
-var panels$1 = Skeleton.recipeRuntime({base:[{alignItems:'stretch',flexDirection:'row',gap:'0'},'_179iirr'],variants:{height:{sm:'_38aklq',lg:'_3286bq'}}});
+var panels$1 = Skeleton.recipeRuntime({base:[{alignItems:'stretch',flexDirection:'row',gap:'0'},'_1o3h4ao']});
 
 const DatePickerContent = React.forwardRef(
   ({
@@ -2178,17 +2238,12 @@ const DatePickerContent = React.forwardRef(
     weekend,
     ...props
   }, ref) => {
-    const { open } = Skeleton.usePopoverContext("DatePickerContent");
-    const { setValue, step, type, value } = useDatePickerContext("DatePickerContent");
-    const [height, setHeight] = React.useState("sm");
-    const [time, setTime] = React.useState();
-    React.useEffect(() => {
-      setTime(
-        type === "date" ? "00:00" : formatTime(value ?? /* @__PURE__ */ new Date(), parseInt(step) / 60)
-      );
-    }, [open, step, type, value]);
+    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({ height }), children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(Skeleton.Flex, { ref: panelRef, ...panels$1(), children: [
         addonBefore,
         /* @__PURE__ */ jsxRuntime.jsx(
           Calendar,
@@ -2197,31 +2252,19 @@ const DatePickerContent = React.forwardRef(
             holiday,
             max,
             min,
-            onHeightChange: (height2) => {
-              setHeight(height2 > 300 ? "lg" : "sm");
+            onHeightChange: (height) => {
+              if (panelRef.current) {
+                panelRef.current.style.height = `${height}px`;
+              }
             },
-            onValueChange: (value2) => setValue(
-              value2 ? /* @__PURE__ */ new Date(formatDate(value2) + "T" + (time ?? "00:00")) : void 0
-            ),
+            onValueChange: setValue,
+            step,
             today,
+            type,
             value,
             weekend
           }
         ),
-        type === "datetime-local" && /* @__PURE__ */ jsxRuntime.jsx(
-          Clock,
-          {
-            ml: "8",
-            onValueChange: (time2) => {
-              setTime(time2);
-              if (value) {
-                setValue(/* @__PURE__ */ new Date(formatDate(value) + "T" + time2));
-              }
-            },
-            step,
-            value: time
-          }
-        ),
         addonAfter
       ] }),
       children
@@ -2229,13 +2272,6 @@ const DatePickerContent = React.forwardRef(
   }
 );
 DatePickerContent.displayName = "@optiaxiom/react/DatePickerContent";
-function formatDate(date) {
-  return toLocalDate(date).split("T")[0];
-}
-function formatTime(date, step = 1) {
-  const [hour, minute] = toLocalDate(date).split("T")[1].slice(0, 5).split(":");
-  return hour + ":" + (Math.floor(parseInt(minute) / step) * step).toString().padStart(2, "0");
-}
 
 const dateFormatter = new Intl.DateTimeFormat(void 0, {
   day: "numeric",
@@ -2257,7 +2293,9 @@ const DatePickerTrigger = React.forwardRef(
     placeholder = "Pick a date",
     ...props
   }, outerRef) => {
-    const { disabled, type, 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);
@@ -2277,7 +2315,7 @@ const DatePickerTrigger = React.forwardRef(
 );
 DatePickerTrigger.displayName = "@optiaxiom/react/DatePickerTrigger";
 
-const [DateRangePickerContextProvider, useDateRangePickerContext] = reactContext.createContext("DateRangePicker");
+const [DateRangePickerProvider, useDateRangePickerContext] = reactContext.createContext("@optiaxiom/react/DateRangePicker");
 
 function DateRangePicker({
   children,
@@ -2301,7 +2339,7 @@ function DateRangePicker({
     prop: valueProp
   });
   return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Popover, { onOpenChange: setOpen, open, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(
-    DateRangePickerContextProvider,
+    DateRangePickerProvider,
     {
       disabled,
       setValue,
@@ -2312,7 +2350,7 @@ function DateRangePicker({
 }
 DateRangePicker.displayName = "@optiaxiom/react/DateRangePicker";
 
-var panels = Skeleton.recipeRuntime({base:[{alignItems:'stretch',flexDirection:'row',gap:'0'},'_180nydb']});
+var panels = Skeleton.recipeRuntime({base:[{alignItems:'stretch',flexDirection:'row',gap:'0'},'_1l2apsc']});
 
 const DateRangePickerContent = React.forwardRef(
   ({
@@ -2327,7 +2365,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: [
@@ -2371,7 +2409,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);
@@ -2391,7 +2429,7 @@ const DateRangePickerTrigger = React.forwardRef(
 );
 DateRangePickerTrigger.displayName = "@optiaxiom/react/DateRangePickerTrigger";
 
-var mark = Skeleton.recipeRuntime({base:'_4pq1t7'});
+var mark = Skeleton.recipeRuntime({base:'zjkqbk'});
 
 const useHighlightedChunks = (content, query) => {
   const terms = React.useMemo(
@@ -2423,8 +2461,8 @@ const Highlight = React.forwardRef(
 );
 Highlight.displayName = "@optiaxiom/react/Highlight";
 
-var editor = Skeleton.recipeRuntime({base:'_1asojwf',variants:{empty:{false:{},true:'bl0opc'}}});
-var input$1 = Skeleton.recipeRuntime({base:'_11k2ce5'});
+var editor = Skeleton.recipeRuntime({base:'_1cggmp5',variants:{empty:{false:{},true:'_1m9hc0t'}}});
+var input$1 = Skeleton.recipeRuntime({base:'_3dsyy2'});
 
 const InlineInput = React.forwardRef(
   ({
@@ -2504,20 +2542,23 @@ function getText(element) {
   return text;
 }
 
+var layout = Skeleton.recipeRuntime({base:[{bg:'bg.page',display:'flex',flexDirection:'column',fontSize:'md'},'sdn7n6']});
+
 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 })
           ]
         }
       )
@@ -2526,7 +2567,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'},'lun9je'],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'},'dvhitc'],variants:{size:{xs:{h:'xs'},sm:{h:'sm'}}}});
 
 const Pill = React.forwardRef(
   ({ asChild, children, className, disabled, size = "sm", ...props }, ref) => {
@@ -2540,7 +2581,7 @@ const Pill = React.forwardRef(
         ...pill({ size }, className),
         ...boxProps,
         children: /* @__PURE__ */ jsxRuntime.jsxs(Comp, { disabled, ref, ...restProps, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Text, { fontSize: "inherit", truncate: true, children }),
+          /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Text, { truncate: true, children }),
           /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Icon, { asChild: true, h: "12", ml: "auto", children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton.IconX, {}) })
         ] })
       }
@@ -2577,7 +2618,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,
@@ -2608,7 +2649,7 @@ function Spotlight({
     }
   }, [open, onInputValueChangeStable]);
   return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Dialog, { onOpenChange: setOpen, open, children: /* @__PURE__ */ jsxRuntime.jsx(
-    SpotlightContextProvider,
+    SpotlightProvider,
     {
       inputValue,
       isItemDisabled,
@@ -2636,7 +2677,7 @@ const SpotlightContent = React.forwardRef(({ "aria-label": ariaLabel, children,
     itemToSubItems,
     onInputValueChange,
     onItemSelect
-  } = useSpotlightContext("SpotlightContent");
+  } = useSpotlightContext("@optiaxiom/react/SpotlightContent");
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Skeleton.DialogContent,
     {
@@ -2693,7 +2734,7 @@ const SpotlightEmpty = React.forwardRef(
 );
 SpotlightEmpty.displayName = "@optiaxiom/react/SpotlightEmpty";
 
-var input = Skeleton.recipeRuntime({base:[{border:'0',borderB:'1',borderColor:'border.secondary',rounded:'none'},'_1k8oong']});
+var input = Skeleton.recipeRuntime({base:[{border:'0',borderB:'1',borderColor:'border.secondary',rounded:'none'},'t9ddfa']});
 
 const SpotlightInput = React.forwardRef(
   ({ addonAfter, className, ...props }, ref) => {
@@ -2750,7 +2791,7 @@ const SpotlightLabel = React.forwardRef(
 );
 SpotlightLabel.displayName = "@optiaxiom/react/SpotlightLabel";
 
-var item$1 = Skeleton.recipeRuntime({base:[{fontWeight:'500',mx:'24',px:'16',py:'12'},'_1rmbstf']});
+var item$1 = Skeleton.recipeRuntime({base:[{fontWeight:'500',mx:'24',px:'16',py:'12'},'_1dgec1g']});
 
 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(
@@ -2767,11 +2808,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";
@@ -2795,8 +2836,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);
@@ -2847,7 +2890,7 @@ const CommandSubItem = React.forwardRef(
 );
 CommandSubItem.displayName = "@optiaxiom/react/CommandSubItem";
 
-var item = Skeleton.recipeRuntime({base:[{cursor:'pointer'}],variants:{active:{false:'_3pxevc',true:'axw71g'}}});
+var item = Skeleton.recipeRuntime({base:[{cursor:'pointer'}],variants:{active:{false:'lhbseo',true:'_2kjk4'}}});
 
 const SpotlightSubItem = React.forwardRef(({ children, className, selected, ...props }, ref) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -2873,18 +2916,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;
@@ -2893,7 +2938,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;
@@ -2955,7 +3000,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;