@optiaxiom/react 1.0.1 → 1.0.3

package/dist/esm/packages/react/src/card-checkbox/CardCheckbox.js

@@ -15,7 +15,7 @@ import { CheckboxRoot } from '../checkbox-root/CheckboxRoot.js';
 const CardCheckbox = forwardRef(
   ({ children, indeterminate, onChange, ...props }, ref) => {
     const labelPrefixId = useId();
-    const { labelId } = useCardContext("CardCheckbox");
+    const { labelId } = useCardContext("@optiaxiom/react/CardCheckbox");
     const [checked, setChecked] = useControllableState({
       defaultProp: props.defaultChecked,
       prop: props.checked

package/dist/esm/packages/react/src/card-context/CardContext.js

@@ -1,6 +1,6 @@
 "use client";
 import { createContext } from '@radix-ui/react-context';
 
-const [CardContextProvider, useCardContext] = createContext("Card");
+const [CardProvider, useCardContext] = createContext("@optiaxiom/react/Card");
 
-export { CardContextProvider, useCardContext };
+export { CardProvider, useCardContext };

package/dist/esm/packages/react/src/card-description/CardDescription.js

@@ -5,7 +5,7 @@ import { useCardContext } from '../card-context/CardContext.js';
 import { Text } from '../text/Text.js';
 
 const CardDescription = forwardRef(({ children, ...props }, ref) => {
-  const { descriptionId } = useCardContext("CardDescription");
+  const { descriptionId } = useCardContext("@optiaxiom/react/CardDescription");
   return /* @__PURE__ */ jsx(
     Text,
     {

package/dist/esm/packages/react/src/card-image/CardImage-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DyTVL2_3.css';
-import './../../../../assets/src/card-image/CardImage.css.ts.vanilla-_YBViqmQ.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DVLeQtFY.css';
+import './../../../../assets/src/card-image/CardImage.css.ts.vanilla-DyXsUGQN.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var cardImage = recipeRuntime({base:[{h:'full',rounded:'inherit'},'_1eik5sy'],variants:{orientation:{horizontal:[{w:'auto'},'vht29a'],vertical:[{w:'full'},'fgxlcv']}}});
+var cardImage = recipeRuntime({base:[{h:'full',rounded:'inherit'},'lz9x0t'],variants:{orientation:{horizontal:[{w:'auto'},'hor8ji'],vertical:[{w:'full'},'wtikoc']}}});
 
 export { cardImage };

package/dist/esm/packages/react/src/card-image/CardImage.js

@@ -9,7 +9,7 @@ import { cardImage } from './CardImage-css.js';
 
 const CardImage = forwardRef(
   ({ alt = "", asChild, children, className, src, ...props }, ref) => {
-    const { orientation } = useCardContext("CardImage");
+    const { orientation } = useCardContext("@optiaxiom/react/CardImage");
     return /* @__PURE__ */ jsx(
       Box,
       {

package/dist/esm/packages/react/src/card-overflow/CardOverflow-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DyTVL2_3.css';
-import './../../../../assets/src/card-overflow/CardOverflow.css.ts.vanilla-Bjtrsl2l.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DVLeQtFY.css';
+import './../../../../assets/src/card-overflow/CardOverflow.css.ts.vanilla-fRKjpbqF.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var cardOverflow = recipeRuntime({base:['_4i53d9',{alignSelf:'stretch'},'_1dv7paz'],variants:{orientation:{horizontal:['_4h9eim'],vertical:['_15769s9']}}});
+var cardOverflow = recipeRuntime({base:['txcsg6',{alignSelf:'stretch'},'z2o45x'],variants:{orientation:{horizontal:['fk6yx6'],vertical:['_1fnh3ts']}}});
 
 export { cardOverflow };

package/dist/esm/packages/react/src/card-overflow/CardOverflow.js

@@ -9,7 +9,7 @@ import { cardOverflow } from './CardOverflow-css.js';
 
 const CardOverflow = forwardRef(
   ({ children, className, ...props }, ref) => {
-    const { orientation } = useCardContext("CardOverflow");
+    const { orientation } = useCardContext("@optiaxiom/react/CardOverflow");
     return /* @__PURE__ */ jsx(
       Box,
       {

package/dist/esm/packages/react/src/card-title/CardTitle.js

@@ -8,7 +8,7 @@ import { Heading } from '../heading/Heading.js';
 const CardTitle = forwardRef(
   ({ asChild, children, ...props }, ref) => {
     const Comp = asChild ? Slot : "h2";
-    const { labelId } = useCardContext("CardTitle");
+    const { labelId } = useCardContext("@optiaxiom/react/CardTitle");
     return /* @__PURE__ */ jsx(
       Heading,
       {

package/dist/esm/packages/react/src/checkbox-control/CheckboxControl-css.js

@@ -1,11 +1,11 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DyTVL2_3.css';
-import './../../../../assets/src/actions-root/ActionsRoot.css.ts.vanilla-DHJpw9Sq.css';
-import './../../../../assets/src/toggle-input/ToggleInput.css.ts.vanilla-Cv1vG0-L.css';
-import './../../../../assets/src/checkbox-control/CheckboxControl.css.ts.vanilla-kkzyyTIa.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DVLeQtFY.css';
+import './../../../../assets/src/actions-root/ActionsRoot.css.ts.vanilla-5weXmjJ7.css';
+import './../../../../assets/src/toggle-input/ToggleInput.css.ts.vanilla-DQ4H7ykl.css';
+import './../../../../assets/src/checkbox-control/CheckboxControl.css.ts.vanilla-CkDCH_wt.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var control = recipeRuntime({base:[{color:'fg.default.inverse',display:'grid',rounded:'xs',size:'2xs'},'_1mfvdfi'],variants:{shift:{false:{},true:{mt:'2'}}}});
-var icon = recipeRuntime({base:[{transition:'all'},'s4fr1x']});
+var control = recipeRuntime({base:[{color:'fg.default.inverse',display:'grid',rounded:'xs',size:'2xs'},'_1jdc7sq'],variants:{shift:{false:{},true:{mt:'2'}}}});
+var icon = recipeRuntime({base:[{transition:'all'},'_1hpakn7']});
 var indicator = recipeRuntime({base:[{alignItems:'center',display:'flex',justifyContent:'center',p:'2',size:'full'}]});
 
 export { control, icon, indicator };

package/dist/esm/packages/react/src/clock/Clock.js

@@ -0,0 +1,83 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useControllableState } from '@radix-ui/react-use-controllable-state';
+import { forwardRef } from 'react';
+import { Flex } from '../flex/Flex.js';
+import { Select } from '../select/Select.js';
+import { SelectContent } from '../select-content/SelectContent.js';
+import { SelectRadioItem } from '../select-radio-item/SelectRadioItem.js';
+import { SelectTrigger } from '../select-trigger/SelectTrigger.js';
+import { parse, range, format } from './utils.js';
+
+const Clock = forwardRef(
+  ({ defaultValue, onValueChange, step = "60", value: valueProp, ...props }, ref) => {
+    const [value, setValue] = 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__ */ jsxs(Flex, { flexDirection: "row", gap: "4", ref, ...props, children: [
+      /* @__PURE__ */ jsxs(
+        Select,
+        {
+          items: hours,
+          onValueChange: (hour) => hour && setValue(format({ ...parsed, hour })),
+          value: parsed.hour,
+          children: [
+            /* @__PURE__ */ jsx(SelectTrigger, { "aria-label": "Select hour", flex: "1", placeholder: "HH" }),
+            /* @__PURE__ */ jsx(SelectContent, { children: hours.map((hour) => /* @__PURE__ */ jsx(SelectRadioItem, { item: hour, children: hour }, hour)) })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        Select,
+        {
+          items: minutes,
+          onValueChange: (minute) => minute && setValue(format({ ...parsed, minute })),
+          value: parsed.minute,
+          children: [
+            /* @__PURE__ */ jsx(SelectTrigger, { "aria-label": "Select minute", flex: "1", placeholder: "MM" }),
+            /* @__PURE__ */ jsx(SelectContent, { children: minutes.map((minute) => /* @__PURE__ */ jsx(
+              SelectRadioItem,
+              {
+                "aria-label": `${parseInt(minute)}`,
+                item: minute,
+                children: minute
+              },
+              minute
+            )) })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        Select,
+        {
+          items: periods,
+          onValueChange: (meridiem) => meridiem && setValue(format({ ...parsed, meridiem })),
+          value: parsed.meridiem,
+          children: [
+            /* @__PURE__ */ jsx(
+              SelectTrigger,
+              {
+                "aria-label": "Select AM or PM",
+                flex: "1",
+                placeholder: "--"
+              }
+            ),
+            /* @__PURE__ */ jsx(SelectContent, { children: periods.map((meridiem) => /* @__PURE__ */ jsx(SelectRadioItem, { item: meridiem, children: meridiem }, meridiem)) })
+          ]
+        }
+      )
+    ] });
+  }
+);
+Clock.displayName = "@optiaxiom/react/Clock";
+
+export { Clock };

package/dist/esm/packages/react/src/clock/utils.js

@@ -0,0 +1,24 @@
+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()
+);
+
+export { format, parse, range };

package/dist/esm/packages/react/src/code/Code-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DyTVL2_3.css';
-import './../../../../assets/src/code/Code.css.ts.vanilla-BHR-AdOr.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DVLeQtFY.css';
+import './../../../../assets/src/code/Code.css.ts.vanilla-Cu5YjR0W.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var code = recipeRuntime({base:[{fontWeight:'600'},'_1eq0fr4']});
+var code = recipeRuntime({base:[{fontWeight:'600'},'_1t5fg5y']});
 
 export { code };

package/dist/esm/packages/react/src/combobox/Combobox.js

@@ -2,7 +2,7 @@
 import { jsx } from 'react/jsx-runtime';
 import { useControllableState } from '@radix-ui/react-use-controllable-state';
 import { useMemo, useEffect } from 'react';
-import { ComboboxContextProvider } from '../combobox-context/ComboboxContext.js';
+import { ComboboxProvider } from '../combobox-context/ComboboxContext.js';
 import { ComboboxDialogContent } from '../combobox-dialog-content/ComboboxDialogContent.js';
 import { ComboboxPopover } from '../combobox-popover/ComboboxPopover.js';
 import { ComboboxPopoverContent } from '../combobox-popover-content/ComboboxPopoverContent.js';
@@ -57,7 +57,7 @@ function Combobox({
     }
   }, [open, onInputValueChangeStable]);
   return /* @__PURE__ */ jsx(components.Root, { onOpenChange: setOpen, open, children: /* @__PURE__ */ jsx(
-    ComboboxContextProvider,
+    ComboboxProvider,
     {
       components,
       inputValue,

package/dist/esm/packages/react/src/combobox-content/ComboboxContent.js

@@ -26,7 +26,7 @@ const ComboboxContent = forwardRef(
       onInputValueChange,
       onItemSelect,
       value
-    } = useComboboxContext("ComboboxContent");
+    } = useComboboxContext("@optiaxiom/react/ComboboxContent");
     return /* @__PURE__ */ jsx(
       components.Content,
       {

package/dist/esm/packages/react/src/combobox-context/ComboboxContext.js

@@ -1,6 +1,6 @@
 "use client";
 import { createContext } from '@radix-ui/react-context';
 
-const [ComboboxContextProvider, useComboboxContext] = createContext("Combobox");
+const [ComboboxProvider, useComboboxContext] = createContext("@optiaxiom/react/Combobox");
 
-export { ComboboxContextProvider, useComboboxContext };
+export { ComboboxProvider, useComboboxContext };

package/dist/esm/packages/react/src/combobox-input/ComboboxInput.js

@@ -10,8 +10,10 @@ import { CommandInput } from '../command-input/CommandInput.js';
 
 const ComboboxInput = 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] = useState(160);
     const containerRef = useRef(null);
     useEffect(() => {

package/dist/esm/packages/react/src/combobox-trigger/ComboboxTrigger.js

@@ -19,7 +19,7 @@ const ComboboxTrigger = forwardRef(
       itemToString,
       setOpen,
       value: valueContext
-    } = useComboboxContext("ComboboxTrigger");
+    } = useComboboxContext("@optiaxiom/react/ComboboxTrigger");
     const value = useMemo(
       () => valueContext instanceof Set ? [...valueContext] : valueContext,
       [valueContext]

package/dist/esm/packages/react/src/combobox-virtualized/ComboboxVirtualized.js

@@ -1,8 +1,8 @@
 "use client";
-import { jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { useComposedRefs } from '@radix-ui/react-compose-refs';
 import { useVirtualizer } from '@tanstack/react-virtual';
-import { forwardRef, useRef, useState, useEffect } from 'react';
+import { forwardRef, useRef, useState, useEffect, useMemo } from 'react';
 import { Box } from '../box/Box.js';
 import '../sprinkles/sprinkles.js';
 import '../sprinkles/sprinklesMerge.js';
@@ -22,33 +22,61 @@ const ComboboxVirtualized = forwardRef(({ children, items, ...props }, outerRef)
     estimateSize: () => 40,
     getScrollElement: () => innerRef.current
   });
-  const { downshift } = useCommandContext("ComboboxVirtualized");
+  const { highlightedItem } = useCommandContext(
+    "@optiaxiom/react/ComboboxVirtualized"
+  );
+  const itemToIndexMap = useMemo(
+    () => new Map(items.map((item, index) => [item, index])),
+    [items]
+  );
   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] = useState(0);
+  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__ */ jsx(ListboxScrollArea, { ref, ...props, children: /* @__PURE__ */ jsx(
     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__ */ jsx(
+      children: rowVirtualizer.getVirtualItems().map((virtualItem) => /* @__PURE__ */ jsxs(
         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__ */ jsx(Box, { pb: "2" })
+          ]
         },
         virtualItem.key
       ))

package/dist/esm/packages/react/src/command/Command.js

@@ -3,7 +3,7 @@ import { jsx } from 'react/jsx-runtime';
 import { useControllableState } from '@radix-ui/react-use-controllable-state';
 import { useCombobox } from 'downshift';
 import { useMemo, useState } from 'react';
-import { CommandContextProvider } from '../command-context/CommandContext.js';
+import { CommandProvider } from '../command-context/CommandContext.js';
 import { usePortalPatch } from '../downshift/usePortalPatch.js';
 
 const isHoverSupported = typeof window !== "undefined" && window.matchMedia("(hover: hover)").matches;
@@ -81,7 +81,7 @@ function Command({
   });
   downshift.getMenuProps({}, { suppressRefError: true });
   return /* @__PURE__ */ jsx(
-    CommandContextProvider,
+    CommandProvider,
     {
       downshift,
       highlightedItem: items[downshift.highlightedIndex],

package/dist/esm/packages/react/src/command-context/CommandContext.js

@@ -1,6 +1,6 @@
 "use client";
 import { createContext } from '@radix-ui/react-context';
 
-const [CommandContextProvider, useCommandContext] = createContext("Command");
+const [CommandProvider, useCommandContext] = createContext("@optiaxiom/react/Command");
 
-export { CommandContextProvider, useCommandContext };
+export { CommandProvider, useCommandContext };

package/dist/esm/packages/react/src/command-focusable-item/CommandFocusableItem-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DyTVL2_3.css';
-import './../../../../assets/src/command-focusable-item/CommandFocusableItem.css.ts.vanilla-K5WlJduF.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DVLeQtFY.css';
+import './../../../../assets/src/command-focusable-item/CommandFocusableItem.css.ts.vanilla-COhGgawe.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var item = recipeRuntime({base:'yqkgaw'});
+var item = recipeRuntime({base:'h03uup'});
 
 export { item };

package/dist/esm/packages/react/src/command-focusable-item/CommandFocusableItem.js

@@ -8,7 +8,9 @@ import { useCommandContext } from '../command-context/CommandContext.js';
 import { item } from './CommandFocusableItem-css.js';
 
 const CommandFocusableItem = forwardRef(({ children, className, ...props }, ref) => {
-  const { lastInteractionSource } = useCommandContext("CommandFocusableItem");
+  const { lastInteractionSource } = useCommandContext(
+    "@optiaxiom/react/CommandFocusableItem"
+  );
   return /* @__PURE__ */ jsx(
     Box,
     {

package/dist/esm/packages/react/src/command-input/CommandInput.js

@@ -14,7 +14,7 @@ const CommandInput = forwardRef(
       itemToSubItems,
       setHighlightedSubIndex,
       setInputValue
-    } = useCommandContext("CommandInput");
+    } = useCommandContext("@optiaxiom/react/CommandInput");
     return /* @__PURE__ */ jsx(
       Input,
       {

package/dist/esm/packages/react/src/command-item/CommandItem.js

@@ -6,7 +6,9 @@ import { CommandFocusableItem } from '../command-focusable-item/CommandFocusable
 
 const CommandItem = 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,

package/dist/esm/packages/react/src/command-listbox/CommandListbox.js

@@ -6,7 +6,9 @@ import { Listbox } from '../listbox/Listbox.js';
 
 const CommandListbox = forwardRef(
   ({ children, size, ...props }, ref) => {
-    const { downshift, setPlaced } = useCommandContext("CommandList");
+    const { downshift, setPlaced } = useCommandContext(
+      "@optiaxiom/react/CommandListbox"
+    );
     useEffect(() => {
       setPlaced(true);
     }, [setPlaced]);

package/dist/esm/packages/react/src/command-sub/CommandSub.js

@@ -4,11 +4,11 @@ import { forwardRef } from 'react';
 import { Box } from '../box/Box.js';
 import '../sprinkles/sprinkles.js';
 import '../sprinkles/sprinklesMerge.js';
-import { CommandSubContextProvider } from '../command-sub-context/CommandSubContext.js';
+import { CommandSubProvider } from '../command-sub-context/CommandSubContext.js';
 
 const CommandSub = forwardRef(
   ({ children, item, ...props }, ref) => {
-    return /* @__PURE__ */ jsx(CommandSubContextProvider, { item, children: /* @__PURE__ */ jsx(Box, { ref, role: "group", ...props, children }) });
+    return /* @__PURE__ */ jsx(CommandSubProvider, { item, children: /* @__PURE__ */ jsx(Box, { ref, role: "group", ...props, children }) });
   }
 );
 CommandSub.displayName = "@optiaxiom/react/CommandSub";

package/dist/esm/packages/react/src/command-sub-context/CommandSubContext.js

@@ -1,6 +1,6 @@
 "use client";
 import { createContext } from '@radix-ui/react-context';
 
-const [CommandSubContextProvider, useCommandSubContext] = createContext("CommandSub");
+const [CommandSubProvider, useCommandSubContext] = createContext("@optiaxiom/react/CommandSub");
 
-export { CommandSubContextProvider, useCommandSubContext };
+export { CommandSubProvider, useCommandSubContext };

package/dist/esm/packages/react/src/command-sub-item/CommandSubItem.js

@@ -18,8 +18,10 @@ const CommandSubItem = 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);

package/dist/esm/packages/react/src/cover/Cover-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DyTVL2_3.css';
-import './../../../../assets/src/cover/Cover.css.ts.vanilla-v48zCqNX.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DVLeQtFY.css';
+import './../../../../assets/src/cover/Cover.css.ts.vanilla-2WyhKF__.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var cover = recipeRuntime({variants:{disabled:{false:['_1yow8m6','_1sn5sfe'],true:{}},inset:{false:'_24pydi',true:'lbv6rx'}}});
+var cover = recipeRuntime({variants:{disabled:{false:['wvy2aj','_1rkk5b4'],true:{}},inset:{false:'_2chvp',true:'ejza5u'}}});
 
 export { cover };

package/dist/esm/packages/react/src/data-table/DataTable.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
-import { DataTableContextProvider } from '../data-table-context/DataTableContext.js';
+import { DataTableProvider } from '../data-table-context/DataTableContext.js';
 import { Flex } from '../flex/Flex.js';
 
 const DataTable = forwardRef(
@@ -15,7 +15,7 @@ const DataTable = forwardRef(
         maxW: "full",
         ref,
         ...props,
-        children: /* @__PURE__ */ jsx(DataTableContextProvider, { table, children })
+        children: /* @__PURE__ */ jsx(DataTableProvider, { table, children })
       }
     );
   }

package/dist/esm/packages/react/src/data-table-body/DataTableBody-css.js

@@ -1,14 +1,14 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DyTVL2_3.css';
-import './../../../../assets/src/table-row/TableRow.css.ts.vanilla-CL49XjrM.css';
-import './../../../../assets/src/data-table-body/DataTableBody.css.ts.vanilla-B5wqjvSM.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DVLeQtFY.css';
+import './../../../../assets/src/table-row/TableRow.css.ts.vanilla-B1YWGfFN.css';
+import './../../../../assets/src/data-table-body/DataTableBody.css.ts.vanilla-NehT-bUe.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var cell = 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 = recipeRuntime({base:[{display:'grid'},'mmqhby']});
-var leftTotalSizeVar = 'var(--rg4yhu)';
-var rightTotalSizeVar = 'var(--_5x43cz)';
-var table = recipeRuntime({base:'_1ng16i2',variants:{pinned:{both:'_13tygco',left:'_1qy99sb',none:{},right:'kh6i6k'}}});
+var cell = 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 = recipeRuntime({base:[{display:'grid'},'qnkfch']});
+var leftTotalSizeVar = 'var(--_1xsqfi4)';
+var rightTotalSizeVar = 'var(--_1w1eulk)';
+var table = recipeRuntime({base:'_75a2ut',variants:{pinned:{both:'k6nroh',left:'_1qxhg17',none:{},right:'osrlg5'}}});
 
 export { cell, cellOffsetVar, cellSizeVar, header, leftTotalSizeVar, rightTotalSizeVar, table };

package/dist/esm/packages/react/src/data-table-body/DataTableBody.js

@@ -22,7 +22,7 @@ const DataTableBody = forwardRef(
   ({ className, estimatedRowHeight = 52, loading, ...props }, outerRef) => {
     const innerRef = useRef(null);
     const ref = 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 = useVirtualizer({

package/dist/esm/packages/react/src/data-table-context/DataTableContext.js

@@ -1,6 +1,6 @@
 "use client";
 import { createContext } from '@radix-ui/react-context';
 
-const [DataTableContextProvider, useDataTableContext] = createContext("DataTable");
+const [DataTableProvider, useDataTableContext] = createContext("@optiaxiom/react/DataTable");
 
-export { DataTableContextProvider, useDataTableContext };
+export { DataTableProvider, useDataTableContext };

package/dist/esm/packages/react/src/data-table-footer/DataTableFooter-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DyTVL2_3.css';
-import './../../../../assets/src/data-table-footer/DataTableFooter.css.ts.vanilla-B8M3YGIh.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DVLeQtFY.css';
+import './../../../../assets/src/data-table-footer/DataTableFooter.css.ts.vanilla-BBV3D3MS.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var addon = recipeRuntime({base:'_1s3o15y',variants:{position:{end:{textAlign:'end'},start:{}}}});
+var addon = recipeRuntime({base:'_10coot3',variants:{position:{end:{textAlign:'end'},start:{}}}});
 
 export { addon };

package/dist/esm/packages/react/src/data-table-footer/DataTableFooter.js

@@ -18,7 +18,7 @@ import { addon } from './DataTableFooter-css.js';
 const DEFAULT_PAGE_SIZES = ["10", "20", "30", "50", "100"];
 const DataTableFooter = forwardRef(
   ({ pageSizeOptions = DEFAULT_PAGE_SIZES, showPageSizeOptions, ...props }, ref) => {
-    const { table } = useDataTableContext("DataTableFooter");
+    const { table } = useDataTableContext("@optiaxiom/react/DataTableFooter");
     const { pagination } = table.getState();
     const pageSizeId = useId();
     return /* @__PURE__ */ jsxs(