@optiaxiom/react 0.11.1 → 0.12.1

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

@@ -2,10 +2,10 @@
 import { jsx } from 'react/jsx-runtime';
 import { useComposedRefs } from '@radix-ui/react-compose-refs';
 import { forwardRef, useRef, useEffect } from 'react';
+import { AngleMenuButton } from '../angle-menu-button/AngleMenuButton.js';
 import { useComboboxContext } from '../combobox-context/ComboboxContext.js';
 import '../field-context/FieldContext.js';
 import { useFieldContext } from '../field-context/useFieldContext.js';
-import { MenuButton } from '../menu-button/MenuButton.js';
 
 const ComboboxTrigger = forwardRef(({ asChild, children, ...props }, outerRef) => {
   const { components, setOpen } = useComboboxContext("ComboboxTrigger");
@@ -40,7 +40,7 @@ const ComboboxTrigger = forwardRef(({ asChild, children, ...props }, outerRef) =
       ref,
       role: "combobox",
       ...props,
-      children: asChild ? children : /* @__PURE__ */ jsx(MenuButton, { children })
+      children: asChild ? children : /* @__PURE__ */ jsx(AngleMenuButton, { children })
     }
   );
 });

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

@@ -19,6 +19,7 @@ function Command({
   onItemSelect,
   onOpenChange,
   open,
+  selectedItem,
   value: valueProp,
   ...props
 }) {
@@ -32,14 +33,17 @@ function Command({
     prop: inputValueProp
   });
   const [lastInteractionSource, setLastInteractionSource] = useState("pointer");
-  const [highlightedIndex, setHighlightedIndex] = usePortalPatch(open);
+  const [highlightedIndex, setHighlightedIndex, placed, setPlaced] = usePortalPatch(
+    open,
+    selectedItem ? items.findIndex((item) => itemToKey(selectedItem) === itemToKey(item)) : -1
+  );
   const [highlightedSubIndex, setHighlightedSubIndex] = useState(-1);
   const downshift = useCombobox({
     ...props,
     highlightedIndex: highlightedIndex === -1 && isHoverSupported ? items.findIndex((item, index) => !isItemDisabled(item, index)) : highlightedIndex,
     inputValue,
     isItemDisabled,
-    isOpen: open,
+    isOpen: placed,
     items,
     itemToKey,
     itemToString,
@@ -61,18 +65,19 @@ function Command({
     onIsOpenChange({ isOpen, type }) {
       onOpenChange?.(isOpen);
       if (isOpen) {
-        if (type === useCombobox.stateChangeTypes.InputClick) {
+        if (type === useCombobox.stateChangeTypes.InputClick || type === useCombobox.stateChangeTypes.ToggleButtonClick) {
           setLastInteractionSource("pointer");
         } else {
           setLastInteractionSource("keyboard");
         }
       }
     },
-    onSelectedItemChange({ selectedItem, type }) {
+    onSelectedItemChange({ selectedItem: selectedItem2, type }) {
       if (type !== useCombobox.stateChangeTypes.InputBlur) {
-        onItemSelect?.(selectedItem);
+        onItemSelect?.(selectedItem2);
       }
-    }
+    },
+    selectedItem
   });
   downshift.getMenuProps({}, { suppressRefError: true });
   return /* @__PURE__ */ jsx(
@@ -94,6 +99,7 @@ function Command({
         setLastInteractionSource(source);
       },
       setInputValue,
+      setPlaced,
       value,
       children
     }

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

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

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

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-CUZzNcnS.css';
-import './../../../../assets/src/command-focusable-item/CommandFocusableItem.css.ts.vanilla-B8An9C20.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-xcn_ZlL-.css';
+import './../../../../assets/src/command-focusable-item/CommandFocusableItem.css.ts.vanilla-BNOFzvUx.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var item = recipeRuntime({base:'_1vwi51b'});
+var item = recipeRuntime({base:'ayqewm'});
 
 export { item };

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

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

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

@@ -1,14 +1,14 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-CUZzNcnS.css';
-import './../../../../assets/src/table-row/TableRow.css.ts.vanilla-BnQw0DZh.css';
-import './../../../../assets/src/data-table/DataTable.css.ts.vanilla-CWh_8ymD.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-xcn_ZlL-.css';
+import './../../../../assets/src/table-row/TableRow.css.ts.vanilla-B0zLWMvn.css';
+import './../../../../assets/src/data-table/DataTable.css.ts.vanilla-DpJ_X2-k.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var cell = recipeRuntime({base:['_4m27ax'],variants:{pinned:{left:'paszyd',right:'_1dm1abn'},pinnedType:{body:'_17sga4l',header:{}}}});
-var cellOffsetVar = 'var(--_17idwm2)';
-var cellSizeVar = 'var(--x2a302)';
-var header = recipeRuntime({base:['_1bjt6bj']});
-var leftTotalSizeVar = 'var(--_1irxq94)';
-var rightTotalSizeVar = 'var(--_1sk0dq)';
-var table = recipeRuntime({base:'_7t3ca',variants:{pinned:{both:'_7yy4ga',left:'wvh4gw',none:{},right:'_15rh7vb'}}});
+var cell = recipeRuntime({base:['_79sc0z'],variants:{pinned:{left:'rudqyc',right:'w9kzb1'},pinnedType:{body:'_1dag7mj',header:{}}}});
+var cellOffsetVar = 'var(--_1a24kue)';
+var cellSizeVar = 'var(--_2gwxtu)';
+var header = recipeRuntime({base:['_6x6qiy']});
+var leftTotalSizeVar = 'var(--_13edba9)';
+var rightTotalSizeVar = 'var(--_1x53yc5)';
+var table = recipeRuntime({base:'_11ok1kq',variants:{pinned:{both:'_275dco',left:'_134jpyu',none:{},right:'_1jdr1vj'}}});
 
 export { cell, cellOffsetVar, cellSizeVar, header, leftTotalSizeVar, rightTotalSizeVar, table };

package/dist/packages/react/src/data-table-header-cell/DataTableHeaderCell-css.js

@@ -1,8 +1,8 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-CUZzNcnS.css';
-import './../../../../assets/src/data-table-header-cell/DataTableHeaderCell.css.ts.vanilla-DSVKgE80.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-xcn_ZlL-.css';
+import './../../../../assets/src/data-table-header-cell/DataTableHeaderCell.css.ts.vanilla-BAqAdAvl.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var button = recipeRuntime({base:[{alignItems:'center',display:'flex',gap:'4',justifyContent:'start',textAlign:'start',transition:'colors',w:'full'},'yklalk','_1968wtg']});
-var icon = recipeRuntime({base:[{h:'12',mx:'2',transition:'opacity'},'_1afnu4g'],variants:{active:{false:'_1869cgz',true:'hwxf3d'},muted:{false:{},true:'_6005q2'}}});
+var button = recipeRuntime({base:[{alignItems:'center',display:'flex',gap:'4',justifyContent:'start',textAlign:'start',transition:'colors',w:'full'},'_7zyndd','rsq1qv']});
+var icon = recipeRuntime({base:[{h:'12',mx:'2',transition:'opacity'},'_16udcty'],variants:{active:{false:'ffc04k',true:'v9l030'},muted:{false:{},true:'_1a3flp3'}}});
 
 export { button, icon };

package/dist/packages/react/src/date-input/DateInput.js

@@ -0,0 +1,112 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useComposedRefs } from '@radix-ui/react-compose-refs';
+import { useControllableState } from '@radix-ui/react-use-controllable-state';
+import { forwardRef, useState, useRef } from 'react';
+import { Calendar } from '../calendar/Calendar.js';
+import { IconCalendar } from '../icons/IconCalendar.js';
+import { Input } from '../input/Input.js';
+import { Popover } from '../popover/Popover.js';
+import { PopoverAnchor } from '../popover-anchor/PopoverAnchor.js';
+import { PopoverContent } from '../popover-content/PopoverContent.js';
+import { PopoverTrigger } from '../popover-trigger/PopoverTrigger.js';
+import '../utils/conditions.js';
+import '@radix-ui/react-slot';
+import { forceValueChange } from '../utils/forceValueChange.js';
+import { useCalendarSupported } from './useCalendarSupported.js';
+import { format, parse } from './utils.js';
+
+const DateInput = forwardRef(
+  ({ disabled, max, min, onChange, ...props }, outerRef) => {
+    const [open, setOpen] = useState(false);
+    const [value, setValue] = useControllableState({
+      defaultProp: props.defaultValue,
+      prop: props.value
+    });
+    const innerRef = useRef(null);
+    const ref = useComposedRefs(innerRef, outerRef);
+    const maxDate = max ? new Date(max) : undefined;
+    const minDate = min ? new Date(min) : undefined;
+    const supported = useCalendarSupported();
+    if (supported === null) {
+      return null;
+    } else if (!supported) {
+      return /* @__PURE__ */ jsx(
+        Input,
+        {
+          disabled,
+          max,
+          min,
+          onChange,
+          ref,
+          type: "date",
+          ...props
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxs(Popover, { onOpenChange: setOpen, open: !disabled && open, children: [
+      /* @__PURE__ */ jsx(PopoverAnchor, { children: /* @__PURE__ */ jsx(
+        Input,
+        {
+          addonAfter: !disabled && /* @__PURE__ */ jsx(
+            PopoverTrigger,
+            {
+              appearance: "subtle",
+              "aria-label": "Show date picker",
+              icon: /* @__PURE__ */ jsx(IconCalendar, {}),
+              size: "sm"
+            }
+          ),
+          disabled,
+          max,
+          min,
+          onChange: (event) => {
+            onChange?.(event);
+            setValue(event.target.value);
+          },
+          onClick: (e) => {
+            e.preventDefault();
+          },
+          onKeyDown: (e) => {
+            if (e.key === " ") {
+              e.preventDefault();
+              setOpen(true);
+            }
+          },
+          ref,
+          type: "date",
+          ...props
+        }
+      ) }),
+      /* @__PURE__ */ jsx(
+        PopoverContent,
+        {
+          onCloseAutoFocus: (event) => {
+            event.preventDefault();
+            innerRef.current?.focus();
+          },
+          children: /* @__PURE__ */ jsx(
+            Calendar,
+            {
+              max: maxDate,
+              min: minDate,
+              onValueChange: (date) => {
+                if (!date) {
+                  return;
+                }
+                if (innerRef.current) {
+                  forceValueChange(innerRef?.current, format(date));
+                }
+                setOpen(false);
+              },
+              value: parse(value)
+            }
+          )
+        }
+      )
+    ] });
+  }
+);
+DateInput.displayName = "@optiaxiom/react/DateInput";
+
+export { DateInput };

package/dist/packages/react/src/date-input/useCalendarSupported.js

@@ -0,0 +1,12 @@
+"use client";
+import { useState, useEffect } from 'react';
+
+const useCalendarSupported = () => {
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+  return mounted ? CSS.supports("selector(::-webkit-datetime-edit)") : null;
+};
+
+export { useCalendarSupported };

package/dist/packages/react/src/date-input/utils.js

@@ -0,0 +1,10 @@
+function format(date) {
+  return new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate())).toISOString().split("T")[0];
+}
+function parse(str) {
+  const rawDate = str && typeof str === "string" ? new Date(str) : undefined;
+  return isValidDate(rawDate) ? new Date(rawDate.getTime() + (/* @__PURE__ */ new Date()).getTimezoneOffset() * 60 * 1e3) : undefined;
+}
+const isValidDate = (date) => date ? !isNaN(+date) : false;
+
+export { format, parse };

package/dist/packages/react/src/dialog-content/DialogContent-css.js

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-CUZzNcnS.css';
-import './../../../../assets/src/dialog-content/DialogContent.css.ts.vanilla-BKE0Sz8w.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-xcn_ZlL-.css';
+import './../../../../assets/src/dialog-content/DialogContent.css.ts.vanilla-BZ49ODZk.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var backdrop = recipeRuntime({variants:{hidden:{false:{},true:'viwg1g'}}});
-var content = recipeRuntime({base:[{color:'fg.default',display:'flex',flexDirection:'column'},'_1vwfpya'],variants:{size:{sm:'_1y37woc',md:'ajy1yq',lg:'_1pk35m',fullscreen:'_1u3kd1d'}}});
-var nestedDialogCountVar = 'var(--_18wp3zr)';
+var backdrop = recipeRuntime({variants:{hidden:{false:{},true:'_1m4hzyj'}}});
+var content = recipeRuntime({base:[{color:'fg.default',display:'flex',flexDirection:'column'},'_95t99d'],variants:{size:{sm:'wp4du9',md:'_1b8t21d',lg:'_1fv7kgf',fullscreen:'t95tqv'}}});
+var nestedDialogCountVar = 'var(--p9bui3)';
 
 export { backdrop, content, nestedDialogCountVar };

package/dist/packages/react/src/dialog-context/DialogContext.js

@@ -1,3 +1,4 @@
+"use client";
 import { createContext } from '@radix-ui/react-context';
 
 const [DialogContextProvider, useDialogContext] = createContext("Dialog");

package/dist/packages/react/src/dialog-footer/DialogFooter-css.js

@@ -1,4 +1,4 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-CUZzNcnS.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-xcn_ZlL-.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
 var footer = recipeRuntime({base:[{borderColor:'border.secondary',borderT:'1',flexDirection:'row',gap:'16',justifyContent:'end',px:'24',py:'20'}]});

package/dist/packages/react/src/dialog-header/DialogHeader-css.js

@@ -1,10 +1,10 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-CUZzNcnS.css';
-import './../../../../assets/src/dialog-header/DialogHeader.css.ts.vanilla-DikiQIxl.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-xcn_ZlL-.css';
+import './../../../../assets/src/dialog-header/DialogHeader.css.ts.vanilla-CFcql3jI.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var actions = recipeRuntime({base:[{flexDirection:'row',gap:'8'},'_1palvyx']});
-var close = recipeRuntime({base:['w0y6lf']});
-var description = recipeRuntime({base:[{color:'fg.secondary',fontWeight:'400',w:'full'},'_1r7jwf3']});
-var title = recipeRuntime({base:[{flex:'1',fontWeight:'500'},'_16fgu3r']});
+var actions = recipeRuntime({base:[{flexDirection:'row',gap:'8'},'_1bhfbjb']});
+var close = recipeRuntime({base:['pkgee5']});
+var description = recipeRuntime({base:[{color:'fg.secondary',fontWeight:'400',w:'full'},'_4em622']});
+var title = recipeRuntime({base:[{flex:'1',fontWeight:'500'},'_1dgsnf9']});
 
 export { actions, close, description, title };

package/dist/packages/react/src/disclosure/Disclosure.js

@@ -1,6 +1,7 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
 import * as RadixCollapsible from '@radix-ui/react-collapsible';
+import { useControllableState } from '@radix-ui/react-use-controllable-state';
 import { forwardRef } from 'react';
 import { Box } from '../box/Box.js';
 import '../sprinkles/sprinkles.js';
@@ -8,8 +9,13 @@ import '../sprinkles/sprinklesMerge.js';
 import { DisclosureContextProvider } from '../disclosure-context/DisclosureContext.js';
 
 const Disclosure = forwardRef(
-  ({ children, ...props }, ref) => {
-    return /* @__PURE__ */ jsx(Box, { asChild: true, ref, ...props, children: /* @__PURE__ */ jsx(RadixCollapsible.Root, { children: /* @__PURE__ */ jsx(DisclosureContextProvider, { children }) }) });
+  ({ children, defaultOpen, onOpenChange, open: openProp, ...props }, ref) => {
+    const [open, setOpen] = useControllableState({
+      defaultProp: defaultOpen,
+      onChange: onOpenChange,
+      prop: openProp
+    });
+    return /* @__PURE__ */ jsx(Box, { asChild: true, color: "fg.default", fontSize: "md", ref, ...props, children: /* @__PURE__ */ jsx(RadixCollapsible.Root, { onOpenChange: setOpen, open, children: /* @__PURE__ */ jsx(DisclosureContextProvider, { open, children }) }) });
   }
 );
 Disclosure.displayName = "@optiaxiom/react/Disclosure";

package/dist/packages/react/src/disclosure-content/DisclosureContent-css.js

@@ -1,7 +1,8 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-CUZzNcnS.css';
-import './../../../../assets/src/disclosure-content/DisclosureContent.css.ts.vanilla-D_A2cJEg.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-xcn_ZlL-.css';
+import './../../../../assets/src/disclosure-content/DisclosureContent.css.ts.vanilla-DkoPFgEq.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var content = recipeRuntime({base:['rqu9a3']});
+var inner = recipeRuntime({base:['_1ipckxi']});
+var outer = recipeRuntime({base:[{display:'grid'},'dmqo33']});
 
-export { content };
+export { inner, outer };

package/dist/packages/react/src/disclosure-content/DisclosureContent.js

@@ -1,16 +1,32 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
 import * as RadixCollapsible from '@radix-ui/react-collapsible';
-import { forwardRef } from 'react';
+import { forwardRef, useState, useEffect } from 'react';
 import { Box } from '../box/Box.js';
 import '../sprinkles/sprinkles.js';
 import '../sprinkles/sprinklesMerge.js';
 import { useDisclosureContext } from '../disclosure-context/DisclosureContext.js';
-import { content } from './DisclosureContent-css.js';
+import { Transition } from '../transition/Transition.js';
+import { TransitionGroup } from '../transition-group/TransitionGroup.js';
+import { outer, inner } from './DisclosureContent-css.js';
 
-const DisclosureContent = forwardRef(({ children, className, ...props }, ref) => {
-  useDisclosureContext("DisclosureContent");
-  return /* @__PURE__ */ jsx(Box, { asChild: true, ref, ...content({}, className), ...props, children: /* @__PURE__ */ jsx(RadixCollapsible.Content, { children: /* @__PURE__ */ jsx(Box, { color: "fg.default", fontSize: "md", p: "8", pt: "0", children }) }) });
+const DisclosureContent = forwardRef(({ children, ...props }, ref) => {
+  const { open } = useDisclosureContext("DisclosureContent");
+  const [skipAnimations, setSkipAnimations] = useState(Boolean(open));
+  useEffect(() => {
+    if (skipAnimations) {
+      requestAnimationFrame(() => setSkipAnimations(false));
+    }
+  }, [skipAnimations]);
+  return /* @__PURE__ */ jsx(TransitionGroup, { open, children: /* @__PURE__ */ jsx(
+    Transition,
+    {
+      "data-side": "bottom",
+      skipAnimations,
+      type: "slide",
+      children: /* @__PURE__ */ jsx(Box, { ...outer(), children: /* @__PURE__ */ jsx(Box, { asChild: true, ...inner(), children: /* @__PURE__ */ jsx(RadixCollapsible.Content, { forceMount: true, children: /* @__PURE__ */ jsx(Box, { p: "8", pt: "0", ref, ...props, children }) }) }) })
+    }
+  ) });
 });
 DisclosureContent.displayName = "@optiaxiom/react/DisclosureContent";
 

package/dist/packages/react/src/disclosure-context/DisclosureContext.js

@@ -1,3 +1,4 @@
+"use client";
 import { createContext } from '@radix-ui/react-context';
 
 const [DisclosureContextProvider, useDisclosureContext] = createContext("Disclosure");

package/dist/packages/react/src/disclosure-trigger/DisclosureTrigger-css.js

@@ -1,8 +1,8 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-CUZzNcnS.css';
-import './../../../../assets/src/disclosure-trigger/DisclosureTrigger.css.ts.vanilla-BHLZGx7H.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-xcn_ZlL-.css';
+import './../../../../assets/src/disclosure-trigger/DisclosureTrigger.css.ts.vanilla-BkIHQCpx.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var icon = recipeRuntime({base:[{transition:'transform'}],variants:{chevronPosition:{end:'ddl8fk',start:'xh9dhj'}}});
-var trigger = recipeRuntime({base:[{flexDirection:'row',fontSize:'md',fontWeight:'500',gap:'4',p:'8',px:'4',rounded:'md',textAlign:'start',w:'full'},'ocpkvi']});
+var icon = recipeRuntime({base:[{transition:'transform'}],variants:{chevronPosition:{end:'bg0m8',start:'_1gcvml2'}}});
+var trigger = recipeRuntime({base:[{flexDirection:'row',fontSize:'md',fontWeight:'500',gap:'4',p:'8',px:'4',rounded:'md',textAlign:'start',w:'full',z:'10'},'rvtlcu']});
 
 export { icon, trigger };

package/dist/packages/react/src/downshift/usePortalPatch.js

@@ -1,10 +1,28 @@
-import { useDelayedState } from './useDelayedState.js';
-import { useForceRerender } from './useForceRerender.js';
+"use client";
+import { useState, useEffect } from 'react';
 
-function usePortalPatch(open) {
-  const [highlightedIndex, setHighlightedIndex] = useDelayedState(-1, open);
-  useForceRerender(open);
-  return [highlightedIndex, setHighlightedIndex];
+function usePortalPatch(open, initialHighlightedIndex = -1) {
+  const [placed, setPlaced] = useState(false);
+  useEffect(() => {
+    return () => setPlaced(false);
+  }, [open]);
+  const [highlightedIndex, setHighlightedIndex] = 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
+  ];
 }
 
 export { usePortalPatch };

package/dist/packages/react/src/drawer-actions/DrawerActions-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-CUZzNcnS.css';
-import './../../../../assets/src/drawer-actions/DrawerActions.css.ts.vanilla-Bn68lKHp.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-xcn_ZlL-.css';
+import './../../../../assets/src/drawer-actions/DrawerActions.css.ts.vanilla-WRfZ0uS8.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var actions = recipeRuntime({base:[{flexDirection:'row-reverse',gap:'8'},'_8miiwo']});
+var actions = recipeRuntime({base:[{flexDirection:'row-reverse',gap:'8'},'_9hdxzf']});
 
 export { actions };

package/dist/packages/react/src/drawer-content/DrawerContent-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-CUZzNcnS.css';
-import './../../../../assets/src/drawer-content/DrawerContent.css.ts.vanilla-CdqWvwMZ.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-xcn_ZlL-.css';
+import './../../../../assets/src/drawer-content/DrawerContent.css.ts.vanilla-BtkJUc2Z.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var content = recipeRuntime({base:[{color:'fg.default',display:'flex',flexDirection:'column'},'_1v7674c'],variants:{position:{bottom:[{borderT:'1'},'g07z95'],left:[{borderR:'1',h:'full',maxW:['full','lg'],w:['full','3/4']},'nzox81'],right:[{borderL:'1',h:'full',maxW:['full','lg'],w:['full','3/4']},'_1lcy0gx']}}});
+var content = recipeRuntime({base:[{color:'fg.default',display:'flex',flexDirection:'column'},'fjjj2v'],variants:{position:{bottom:[{borderT:'1'},'_1us7vxz'],left:[{borderR:'1',h:'full',maxW:['full','lg'],w:['full','3/4']},'_1hyxgui'],right:[{borderL:'1',h:'full',maxW:['full','lg'],w:['full','3/4']},'cu0p6t']}}});
 
 export { content };

package/dist/packages/react/src/drawer-context/DrawerContext.js

@@ -1,3 +1,4 @@
+"use client";
 import { createContext } from '@radix-ui/react-context';
 
 const [DrawerContextProvider, useDrawerContext] = createContext("Drawer");

package/dist/packages/react/src/drawer-description/DrawerDescription-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-CUZzNcnS.css';
-import './../../../../assets/src/drawer-description/DrawerDescription.css.ts.vanilla-BXsu_1ao.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-xcn_ZlL-.css';
+import './../../../../assets/src/drawer-description/DrawerDescription.css.ts.vanilla-CvKcovQs.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var description = recipeRuntime({base:[{color:'fg.secondary',fontWeight:'400',w:'full'},'_1gjyx94']});
+var description = recipeRuntime({base:[{color:'fg.secondary',fontWeight:'400',w:'full'},'_1k5obcd']});
 
 export { description };

package/dist/packages/react/src/drawer-title/DrawerTitle-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-CUZzNcnS.css';
-import './../../../../assets/src/drawer-title/DrawerTitle.css.ts.vanilla-Djn5G86K.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-xcn_ZlL-.css';
+import './../../../../assets/src/drawer-title/DrawerTitle.css.ts.vanilla-CLGLl0zi.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var title = recipeRuntime({base:[{flex:'1'},'fr2zhz']});
+var title = recipeRuntime({base:[{flex:'1'},'t6btdz']});
 
 export { title };

package/dist/packages/react/src/dropdown-menu-checkbox-item/DropdownMenuCheckboxItem.js

@@ -0,0 +1,12 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import * as RadixMenu from '@radix-ui/react-dropdown-menu';
+import { forwardRef } from 'react';
+import { ListboxCheckboxItem } from '../listbox-checkbox-item/ListboxCheckboxItem.js';
+
+const DropdownMenuCheckboxItem = forwardRef(({ children, ...props }, ref) => {
+  return /* @__PURE__ */ jsx(RadixMenu.CheckboxItem, { asChild: true, ref, ...props, children: /* @__PURE__ */ jsx(ListboxCheckboxItem, { children }) });
+});
+DropdownMenuCheckboxItem.displayName = "@optiaxiom/react/DropdownMenuCheckboxItem";
+
+export { DropdownMenuCheckboxItem };

package/dist/packages/react/src/dropdown-menu-context/DropdownMenuContext.js

@@ -1,3 +1,4 @@
+"use client";
 import { createContext } from '@radix-ui/react-context';
 
 const [DropdownMenuContextProvider, useDropdownMenuContext] = createContext("DropdownMenu");

package/dist/packages/react/src/dropdown-menu-sub-context/DropdownMenuSubContext.js

@@ -1,3 +1,4 @@
+"use client";
 import { createContext } from '@radix-ui/react-context';
 
 const [DropdownMenuSubContextProvider, useDropdownMenuSubContext] = createContext("DropdownMenuSub");

package/dist/packages/react/src/dropdown-menu-trigger/DropdownMenuTrigger.js

@@ -2,10 +2,10 @@
 import { jsx } from 'react/jsx-runtime';
 import * as RadixMenu from '@radix-ui/react-dropdown-menu';
 import { forwardRef } from 'react';
-import { MenuButton } from '../menu-button/MenuButton.js';
+import { AngleMenuButton } from '../angle-menu-button/AngleMenuButton.js';
 
 const DropdownMenuTrigger = forwardRef(({ asChild, children, ...props }, ref) => {
-  return /* @__PURE__ */ jsx(RadixMenu.Trigger, { asChild: true, ref, ...props, children: asChild ? children : /* @__PURE__ */ jsx(MenuButton, { children }) });
+  return /* @__PURE__ */ jsx(RadixMenu.Trigger, { asChild: true, ref, ...props, children: asChild ? children : /* @__PURE__ */ jsx(AngleMenuButton, { children }) });
 });
 DropdownMenuTrigger.displayName = "@optiaxiom/react/DropdownMenuTrigger";
 

package/dist/packages/react/src/ellipsis-menu-button/EllipsisMenuButton.js

@@ -0,0 +1,21 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Button } from '../button/Button.js';
+import { IconEllipsisSolid } from '../icons/IconEllipsisSolid.js';
+
+const EllipsisMenuButton = forwardRef(({ children, ...props }, ref) => {
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      icon: /* @__PURE__ */ jsx(IconEllipsisSolid, {}),
+      iconPosition: "end",
+      ref,
+      ...props,
+      children
+    }
+  );
+});
+EllipsisMenuButton.displayName = "@optiaxiom/react/EllipsisMenuButton";
+
+export { EllipsisMenuButton };

package/dist/packages/react/src/field-context/FieldContext.js

@@ -1,3 +1,4 @@
+"use client";
 import { createContext } from 'react';
 
 const FieldContext = createContext(undefined);

package/dist/packages/react/src/field-context/useFieldContext.js

@@ -1,3 +1,4 @@
+"use client";
 import { useContext } from 'react';
 import { FieldContext } from './FieldContext.js';
 

package/dist/packages/react/src/highlight/Highlight-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-CUZzNcnS.css';
-import './../../../../assets/src/highlight/Highlight.css.ts.vanilla-RUwRZEaM.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-xcn_ZlL-.css';
+import './../../../../assets/src/highlight/Highlight.css.ts.vanilla-_aRp6QYI.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var mark = recipeRuntime({base:'_1vv9vub'});
+var mark = recipeRuntime({base:'efems8'});
 
 export { mark };

package/dist/packages/react/src/highlight/useHighlightedChunks.js

@@ -1,3 +1,4 @@
+"use client";
 import { useMemo } from 'react';
 
 const useHighlightedChunks = (content, query) => {