@optiaxiom/react 1.5.5 → 1.5.7

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

@@ -1,14 +1,14 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DKXh4Gs6.css';
-import './../../../../assets/src/table/TableRow.css.ts.vanilla-anJXMUPf.css';
-import './../../../../assets/src/data-table/DataTableBody.css.ts.vanilla-4R5f6osf.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-CoWjorU5.css';
+import './../../../../assets/src/table/TableRow.css.ts.vanilla-DUuHeFsV.css';
+import './../../../../assets/src/data-table/DataTableBody.css.ts.vanilla-D7cAE-Us.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var cell = recipeRuntime({base:[{alignItems:'start',display:'flex'},'_1lgb8kk'],variants:{pinned:{left:'_2aj9hg',right:'n9ycjp'},pinnedType:{body:'_1omzxs',header:{}}}});
-var cellOffsetVar = 'var(--_1r0zo2y)';
-var cellSizeVar = 'var(--_1mf60le)';
-var leftTotalSizeVar = 'var(--_1seegsg)';
-var rightTotalSizeVar = 'var(--_5by9wn)';
-var table = recipeRuntime({base:'_1h0p6bz',variants:{pinned:{both:'_1vzgfca',left:'_9ju9rv',none:{},right:'_1em6p67'}}});
-var totalSizeVar = 'var(--_1qkw0pt)';
+var cell = recipeRuntime({base:[{alignItems:'start',display:'flex'},'_4bsrw9'],variants:{pinned:{left:'_6qeenl',right:'a1b9n1'},pinnedType:{body:'io6zd7',header:{}}}});
+var cellOffsetVar = 'var(--rq5acm)';
+var cellSizeVar = 'var(--h2xt9o)';
+var leftTotalSizeVar = 'var(--ilpdan)';
+var rightTotalSizeVar = 'var(--_1835fbp)';
+var table = recipeRuntime({base:'_1hsd9ja',variants:{pinned:{both:'_19hn2nc',left:'swl1zg',none:{},right:'_1s6clyf'}}});
+var totalSizeVar = 'var(--_1sfbdzx)';
 
 export { cell, cellOffsetVar, cellSizeVar, leftTotalSizeVar, rightTotalSizeVar, table, totalSizeVar };

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

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DKXh4Gs6.css';
-import './../../../../assets/src/data-table/DataTableFooter.css.ts.vanilla-BsnnP5ap.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-CoWjorU5.css';
+import './../../../../assets/src/data-table/DataTableFooter.css.ts.vanilla-CaLfEAl9.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var addon = recipeRuntime({base:'_1wq08y1',variants:{position:{end:{textAlign:'end'},start:{}}}});
+var addon = recipeRuntime({base:'tscn7a',variants:{position:{end:{textAlign:'end'},start:{}}}});
 
 export { addon };

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

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DKXh4Gs6.css';
-import './../../../../assets/src/data-table/DataTableHeaderCell.css.ts.vanilla-DtgF1usX.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-CoWjorU5.css';
+import './../../../../assets/src/data-table/DataTableHeaderCell.css.ts.vanilla-DfZe4S8I.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var button = recipeRuntime({base:[{alignItems:'center',display:'flex',gap:'4',justifyContent:'flex-start',rounded:'md',textAlign:'start',transition:'colors',w:'full'},'_17afriu']});
-var handle = recipeRuntime({base:[{h:'full',z:'10'},'aj84pj'],variants:{resizing:{false:{},true:{borderColor:'border.focus'}}}});
-var icon = recipeRuntime({base:[{h:'12',mx:'2',transition:'opacity'},'cti50e'],variants:{active:{false:'_1upanzp',true:'_1916psf'}}});
+var button = recipeRuntime({base:[{alignItems:'center',display:'flex',gap:'4',justifyContent:'flex-start',rounded:'md',textAlign:'start',transition:'colors',w:'full'},'aucoke']});
+var handle = recipeRuntime({base:[{h:'full',z:'10'},'_1uwlzqy'],variants:{resizing:{false:{},true:{borderColor:'border.focus'}}}});
+var icon = recipeRuntime({base:[{h:'12',mx:'2',transition:'opacity'},'_1glhjgd'],variants:{active:{false:'_2adlw7',true:'usqnlv'}}});
 
 export { button, handle, icon };

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

@@ -1,10 +1,10 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DKXh4Gs6.css';
-import './../../../../assets/src/date-input/DateInput.css.ts.vanilla-BnhpsOC2.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-CoWjorU5.css';
+import './../../../../assets/src/date-input/DateInput.css.ts.vanilla-BlgUX0VZ.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var clear = recipeRuntime({base:[{size:'sm'},'_1n1i1qf']});
-var date = recipeRuntime({base:'azjr1g'});
-var input = recipeRuntime({base:'luzuw0'});
-var picker = recipeRuntime({base:'_1nisry9'});
+var clear = recipeRuntime({base:[{size:'sm'},'_15wlc96']});
+var date = recipeRuntime({base:'zczpmy'});
+var input = recipeRuntime({base:'_1bx84bh'});
+var picker = recipeRuntime({base:'_7i0ykc'});
 
 export { clear, date, input, picker };

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

@@ -1,12 +1,14 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useComposedRefs } from '@radix-ui/react-compose-refs';
+import { useId } from '@radix-ui/react-id';
 import { useControllableState } from '@radix-ui/react-use-controllable-state';
+import clsx from 'clsx';
 import { forwardRef, useState, useRef } from 'react';
 import { Button } from '../button/Button.js';
 import '../button/ButtonGroup.js';
 import { Calendar } from '../calendar/Calendar.js';
-import '../field/FieldContext.js';
+import { useFieldContext } from '../field/FieldContext.js';
 import { useObserveValue } from '../hooks/useObserveValue.js';
 import '../utils/conditions.js';
 import '../utils/isHoverSupported.js';
@@ -22,6 +24,7 @@ import { Popover } from '../popover/Popover.js';
 import { PopoverAnchor } from '../popover/PopoverAnchor.js';
 import { PopoverContent } from '../popover/PopoverContent.js';
 import { PopoverTrigger } from '../popover/PopoverTrigger.js';
+import { VisuallyHidden } from '../visually-hidden/VisuallyHidden.js';
 import { date, input, picker, clear } from './DateInput-css.js';
 import { toInstant } from './utils.js';
 
@@ -38,6 +41,10 @@ const DateInput = forwardRef(
     weekend,
     ...props
   }, outerRef) => {
+    const { labelId: fieldLabelId } = useFieldContext(
+      "@optiaxiom/react/DateInput"
+    );
+    const labelId = useId();
     const [open, setOpen] = useState(false);
     const hasInteractedOutsideRef = useRef(false);
     const pickerRef = useRef(null);
@@ -119,6 +126,7 @@ const DateInput = forwardRef(
       /* @__PURE__ */ jsxs(
         PopoverContent,
         {
+          "aria-labelledby": clsx(labelId, fieldLabelId),
           gap: "8",
           onCloseAutoFocus: (event) => {
             if (hasInteractedOutsideRef.current) {
@@ -134,6 +142,7 @@ const DateInput = forwardRef(
             }
           },
           children: [
+            /* @__PURE__ */ jsx(VisuallyHidden, { asChild: true, id: labelId, children: /* @__PURE__ */ jsx("h2", { children: "Calendar" }) }),
             /* @__PURE__ */ jsx(
               Calendar,
               {

package/dist/esm/packages/react/src/date-range-picker/DateRangePicker.js

@@ -1,6 +1,7 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
 import { useControllableState } from '@radix-ui/react-use-controllable-state';
+import { useRef } from 'react';
 import { Popover } from '../popover/Popover.js';
 import '../popover/PopoverAnchor.js';
 import '../popover/PopoverContent.js';
@@ -18,6 +19,7 @@ function DateRangePicker({
   value: valueProp,
   ...props
 }) {
+  const triggerRef = useRef(null);
   const [open, setOpen] = useControllableState({
     caller: "@optiaxiom/react/DateRangePicker",
     defaultProp: defaultOpen,
@@ -36,6 +38,7 @@ function DateRangePicker({
       disabled,
       setOpen,
       setValue,
+      triggerRef,
       value,
       children
     }

package/dist/esm/packages/react/src/date-range-picker/DateRangePickerContent-css.js

@@ -1,4 +1,4 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DKXh4Gs6.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-CoWjorU5.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
 var panels = recipeRuntime({base:[{alignItems:'stretch',flexDirection:'row',gap:'0'}]});

package/dist/esm/packages/react/src/date-range-picker/DateRangePickerContent.js

@@ -1,12 +1,16 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
+import { useId } from '@radix-ui/react-id';
+import clsx from 'clsx';
 import { forwardRef } from 'react';
 import { Calendar } from '../calendar/Calendar.js';
+import { useFieldContext } from '../field/FieldContext.js';
 import { Flex } from '../flex/Flex.js';
 import '../popover/Popover.js';
 import '../popover/PopoverAnchor.js';
 import { PopoverContent } from '../popover/PopoverContent.js';
 import '../popover/PopoverTrigger.js';
+import { VisuallyHidden } from '../visually-hidden/VisuallyHidden.js';
 import { panels } from './DateRangePickerContent-css.js';
 import { useDateRangePickerContext } from './DateRangePickerContext.js';
 
@@ -14,6 +18,7 @@ const DateRangePickerContent = forwardRef(
   ({
     addonAfter,
     addonBefore,
+    "aria-label": ariaLabel,
     children,
     holiday,
     max,
@@ -22,33 +27,48 @@ const DateRangePickerContent = forwardRef(
     weekend,
     ...props
   }, ref) => {
-    const { setOpen, setValue, value } = useDateRangePickerContext(
+    const { labelId: fieldLabelId } = useFieldContext(
       "@optiaxiom/react/DateRangePickerContent"
     );
-    return /* @__PURE__ */ jsxs(PopoverContent, { gap: "8", maxW: void 0, ref, ...props, children: [
-      /* @__PURE__ */ jsxs(Flex, { ...panels(), children: [
-        addonBefore,
-        /* @__PURE__ */ jsx(
-          Calendar,
-          {
-            alignSelf: "start",
-            holiday,
-            max,
-            min,
-            mode: "range",
-            onValueChange: (value2) => {
-              setValue(value2);
-              setOpen(false);
-            },
-            today,
-            value,
-            weekend
-          }
-        ),
-        addonAfter
-      ] }),
-      children
-    ] });
+    const { setOpen, setValue, triggerRef, value } = useDateRangePickerContext(
+      "@optiaxiom/react/DateRangePickerContent"
+    );
+    const labelId = useId();
+    return /* @__PURE__ */ jsxs(
+      PopoverContent,
+      {
+        "aria-labelledby": clsx(fieldLabelId ?? triggerRef.current?.id, labelId),
+        gap: "8",
+        maxW: void 0,
+        ref,
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx(VisuallyHidden, { id: labelId, children: ariaLabel || "Calendar" }),
+          /* @__PURE__ */ jsxs(Flex, { ...panels(), children: [
+            addonBefore,
+            /* @__PURE__ */ jsx(
+              Calendar,
+              {
+                alignSelf: "start",
+                holiday,
+                max,
+                min,
+                mode: "range",
+                onValueChange: (value2) => {
+                  setValue(value2);
+                  setOpen(false);
+                },
+                today,
+                value,
+                weekend
+              }
+            ),
+            addonAfter
+          ] }),
+          children
+        ]
+      }
+    );
   }
 );
 DateRangePickerContent.displayName = "@optiaxiom/react/DateRangePickerContent";

package/dist/esm/packages/react/src/date-range-picker/DateRangePickerTrigger.js

@@ -1,7 +1,8 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
 import { useComposedRefs } from '@radix-ui/react-compose-refs';
-import { forwardRef, useRef } from 'react';
+import { useId } from '@radix-ui/react-id';
+import { forwardRef } from 'react';
 import { Box } from '../box/Box.js';
 import '../sprinkles/sprinkles.js';
 import '../sprinkles/sprinklesMerge.js';
@@ -28,19 +29,20 @@ const DateRangePickerTrigger = forwardRef(
     placeholder = "Pick a date",
     ...props
   }, outerRef) => {
-    const { disabled, value } = useDateRangePickerContext(
+    const { disabled, triggerRef, value } = useDateRangePickerContext(
       "@optiaxiom/react/DateRangePickerTrigger"
     );
+    const id = useId();
+    const ref = useComposedRefs(outerRef, triggerRef);
+    const labelId = useFieldLabelTrigger(triggerRef, ariaLabelledBy);
     const formatter = formatRange ? { formatRange } : dateFormatter;
-    const buttonRef = useRef(null);
-    const ref = useComposedRefs(outerRef, buttonRef);
-    const labelId = useFieldLabelTrigger(buttonRef, ariaLabelledBy);
     return /* @__PURE__ */ jsx(
       PopoverTrigger,
       {
         "aria-labelledby": labelId,
         disabled,
         icon: /* @__PURE__ */ jsx(IconCalendar, {}),
+        id,
         ref,
         ...props,
         children: children ?? (value ? formatter.formatRange(value.from, value.to) : /* @__PURE__ */ jsx(Box, { color: "fg.tertiary", children: placeholder }))

package/dist/esm/packages/react/src/dialog/Dialog.js

@@ -2,6 +2,7 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import * as RadixDialog from '@radix-ui/react-dialog';
 import { useControllableState } from '@radix-ui/react-use-controllable-state';
+import { useRef } from 'react';
 import '../focus-bookmark/FocusBookmarkProvider.js';
 import { FocusBookmarkRestore } from '../focus-bookmark/FocusBookmarkRestore.js';
 import { NestedDialogProvider } from '../nested-dialog-context/NestedDialogContext.js';
@@ -25,10 +26,21 @@ function Dialog({
     "Dialog",
     open
   );
-  return /* @__PURE__ */ jsx(NestedDialogProvider, { onCountChange: setNestedDialogCount, children: /* @__PURE__ */ jsx(RadixDialog.Root, { onOpenChange: setOpen, open, ...props, children: /* @__PURE__ */ jsxs(DialogProvider, { nestedDialogCount, open, children: [
-    /* @__PURE__ */ jsx(RadixDialog.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(FocusBookmarkRestore, {}) }),
-    children
-  ] }) }) });
+  const headerRef = useRef(null);
+  const footerRef = useRef(null);
+  return /* @__PURE__ */ jsx(NestedDialogProvider, { onCountChange: setNestedDialogCount, children: /* @__PURE__ */ jsx(RadixDialog.Root, { onOpenChange: setOpen, open, ...props, children: /* @__PURE__ */ jsxs(
+    DialogProvider,
+    {
+      footerRef,
+      headerRef,
+      nestedDialogCount,
+      open,
+      children: [
+        /* @__PURE__ */ jsx(RadixDialog.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(FocusBookmarkRestore, {}) }),
+        children
+      ]
+    }
+  ) }) });
 }
 Dialog.displayName = "@optiaxiom/react/Dialog";
 

package/dist/esm/packages/react/src/dialog/DialogBody-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DKXh4Gs6.css';
-import './../../../../assets/src/dialog/DialogBody.css.ts.vanilla-DJOUUhpP.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-CoWjorU5.css';
+import './../../../../assets/src/dialog/DialogBody.css.ts.vanilla-0EgqGIul.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var body = recipeRuntime({base:[{flex:'1',fontSize:'md',justifyContent:'flex-start',overflow:'auto',px:'24',py:'16'},'bchk2x']});
+var body = recipeRuntime({base:[{flex:'1',fontSize:'md',justifyContent:'flex-start',px:'24',py:'16',z:'0'},'_17h82rp']});
 
 export { body };

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

@@ -1,9 +1,12 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DKXh4Gs6.css';
-import './../../../../assets/src/dialog/DialogContent.css.ts.vanilla-HoKkPIKV.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-CoWjorU5.css';
+import './../../../../assets/src/dialog/DialogBody.css.ts.vanilla-0EgqGIul.css';
+import './../../../../assets/src/dialog/DialogContent.css.ts.vanilla-Ci1Zxe5U.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var backdrop = recipeRuntime({variants:{hidden:{false:{},true:'jz1xfl'}}});
-var content = recipeRuntime({base:[{color:'fg.default',display:'flex',flexDirection:'column'},'_1uvw3cj'],variants:{size:{sm:'_1lubas1',md:'_1ab11yp',lg:'q5ub8t',fullscreen:'_1vbeqsn'}}});
-var nestedDialogCountVar = 'var(--movd9y)';
+var backdrop = recipeRuntime({variants:{hidden:{false:{},true:'_6v4xac'}}});
+var content = recipeRuntime({base:[{color:'fg.default',display:'flex',flexDirection:'column',overflow:'auto'},'_156hzi1'],variants:{size:{sm:'q33o1n',md:'hxu1rk',lg:'_1646am9',fullscreen:'_1d9x06x'}}});
+var nestedDialogCountVar = 'var(--vaq6yt)';
+var scrollPaddingBottomVar = 'var(--_18i35c9)';
+var scrollPaddingTopVar = 'var(--_1qctxd6)';
 
-export { backdrop, content, nestedDialogCountVar };
+export { backdrop, content, nestedDialogCountVar, scrollPaddingBottomVar, scrollPaddingTopVar };

package/dist/esm/packages/react/src/dialog/DialogContent.js

@@ -17,6 +17,7 @@ import '../utils/conditions.js';
 import '../utils/isHoverSupported.js';
 import { onReactSelectInputBlur } from '../utils/onReactSelectInputBlur.js';
 import { backdrop, content, nestedDialogCountVar } from './DialogContent-css.js';
+import { DialogContentImpl } from './DialogContentImpl.js';
 import { useDialogContext } from './DialogContext.js';
 
 const DialogContent = forwardRef(
@@ -49,7 +50,7 @@ const DialogContent = forwardRef(
           },
           ...content({ size }, className),
           ...props,
-          children: /* @__PURE__ */ jsx(RadixDialog.Content, { forceMount: true, ref, children: /* @__PURE__ */ jsx(ModalProvider, { shardRef: innerRef, children: /* @__PURE__ */ jsx(FocusBookmarkProvider, { containerRef: innerRef, children }) }) })
+          children: /* @__PURE__ */ jsx(RadixDialog.Content, { asChild: true, forceMount: true, ref, children: /* @__PURE__ */ jsx(DialogContentImpl, { children: /* @__PURE__ */ jsx(ModalProvider, { shardRef: innerRef, children: /* @__PURE__ */ jsx(FocusBookmarkProvider, { containerRef: innerRef, children }) }) }) })
         }
       ) }) })
     ] });

package/dist/esm/packages/react/src/dialog/DialogContentImpl.js

@@ -0,0 +1,43 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { useComposedRefs } from '@radix-ui/react-compose-refs';
+import { setElementVars } from '@vanilla-extract/dynamic';
+import { forwardRef, useRef, useEffect } from 'react';
+import { Box } from '../box/Box.js';
+import '../sprinkles/sprinkles.js';
+import '../sprinkles/sprinklesMerge.js';
+import * as DialogContent_css from './DialogContent-css.js';
+import { useDialogContext } from './DialogContext.js';
+
+const DialogContentImpl = forwardRef(({ children, ...props }, outerRef) => {
+  const { footerRef, headerRef } = useDialogContext(
+    "@optiaxiom/react/DialogContentImpl"
+  );
+  const innerRef = useRef(null);
+  const ref = useComposedRefs(innerRef, outerRef);
+  useEffect(() => {
+    const observer = new ResizeObserver((entries) => {
+      if (!innerRef.current) {
+        return;
+      }
+      const padding = 16;
+      const vars = {};
+      for (const entry of entries) {
+        const side = entry.target === headerRef.current ? "Top" : "Bottom";
+        vars[DialogContent_css[`scrollPadding${side}Var`]] = `${entry.borderBoxSize[0].blockSize + padding}px`;
+      }
+      setElementVars(innerRef.current, vars);
+    });
+    if (headerRef.current) {
+      observer.observe(headerRef.current);
+    }
+    if (footerRef.current) {
+      observer.observe(footerRef.current);
+    }
+    return () => observer.disconnect();
+  }, [footerRef, headerRef]);
+  return /* @__PURE__ */ jsx(Box, { ref, ...props, children });
+});
+DialogContentImpl.displayName = "@optiaxiom/react/DialogContentImpl";
+
+export { DialogContentImpl };

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

@@ -1,6 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DKXh4Gs6.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-CoWjorU5.css';
+import './../../../../assets/src/dialog/DialogFooter.css.ts.vanilla-Cdb_sOf-.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var footer = recipeRuntime({base:[{borderColor:'border.secondary',borderT:'1',flexDirection:'row',gap:'16',justifyContent:'flex-end',px:'24',py:'20'}]});
+var footer = recipeRuntime({base:[{bg:'bg.default',borderColor:'border.secondary',borderT:'1',flexDirection:'row',gap:'16',justifyContent:'flex-end',px:'24',py:'20'},'uk68bc']});
 
 export { footer };

package/dist/esm/packages/react/src/dialog/DialogFooter.js

@@ -1,12 +1,16 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
+import { useComposedRefs } from '@radix-ui/react-compose-refs';
 import { forwardRef } from 'react';
 import { ButtonProvider } from '../button/ButtonContext.js';
 import { Flex } from '../flex/Flex.js';
+import { useDialogContext } from './DialogContext.js';
 import { footer } from './DialogFooter-css.js';
 
 const DialogFooter = forwardRef(
-  ({ children, className, ...props }, ref) => {
+  ({ children, className, ...props }, outerRef) => {
+    const { footerRef } = useDialogContext("@optiaxiom/react/DialogFooter");
+    const ref = useComposedRefs(footerRef, outerRef);
     return /* @__PURE__ */ jsx(Flex, { ref, ...footer({}, className), ...props, children: /* @__PURE__ */ jsx(ButtonProvider, { size: "lg", children }) });
   }
 );

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

@@ -1,10 +1,11 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DKXh4Gs6.css';
-import './../../../../assets/src/dialog/DialogHeader.css.ts.vanilla-DD3VWZYl.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-CoWjorU5.css';
+import './../../../../assets/src/dialog/DialogHeader.css.ts.vanilla-BtW7ujiM.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var actions = recipeRuntime({base:[{flexDirection:'row',gap:'8'},'_17oqenm']});
-var close = recipeRuntime({base:['_8fx9sn']});
-var description = recipeRuntime({base:[{color:'fg.secondary',fontSize:'md',fontWeight:'400',w:'full'},'e15kay']});
-var title = recipeRuntime({base:[{flex:'1',fontWeight:'500'},'_1pxsq3o']});
+var actions = recipeRuntime({base:[{flexDirection:'row',gap:'8'},'_1mcsp8b']});
+var close = recipeRuntime({base:['_1c0pbd0']});
+var description = recipeRuntime({base:[{color:'fg.secondary',fontSize:'md',fontWeight:'400',w:'full'},'aq4uch']});
+var header = recipeRuntime({base:[{bg:'bg.default',display:'flex',flexWrap:'wrap',gap:'8',p:'24',pb:'16',z:'10'},'_1ewma8a']});
+var title = recipeRuntime({base:[{flex:'1',fontWeight:'500'},'_2li492']});
 
-export { actions, close, description, title };
+export { actions, close, description, header, title };

package/dist/esm/packages/react/src/dialog/DialogHeader.js

@@ -1,5 +1,6 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
+import { useComposedRefs } from '@radix-ui/react-compose-refs';
 import * as RadixDialog from '@radix-ui/react-dialog';
 import { forwardRef } from 'react';
 import { Box } from '../box/Box.js';
@@ -12,38 +13,29 @@ import { Heading } from '../heading/Heading.js';
 import { IconX } from '../icons/IconX.js';
 import { Text } from '../text/Text.js';
 import { VisuallyHidden } from '../visually-hidden/VisuallyHidden.js';
-import { close, title, actions, description } from './DialogHeader-css.js';
+import { useDialogContext } from './DialogContext.js';
+import { header, close, title, actions, description } from './DialogHeader-css.js';
 
 const DialogHeader = forwardRef(
-  ({ addonAfter, children, description: description$1, ...props }, ref) => {
-    return /* @__PURE__ */ jsxs(
-      Box,
-      {
-        display: "flex",
-        flexWrap: "wrap",
-        gap: "8",
-        p: "24",
-        pb: "16",
-        ref,
-        ...props,
-        children: [
-          /* @__PURE__ */ jsx(
-            Button,
-            {
-              appearance: "subtle",
-              "aria-label": "Close",
-              asChild: true,
-              icon: /* @__PURE__ */ jsx(IconX, {}),
-              ...close(),
-              children: /* @__PURE__ */ jsx(RadixDialog.Close, {})
-            }
-          ),
-          /* @__PURE__ */ jsx(Heading, { asChild: true, level: "3", ...title(), children: /* @__PURE__ */ jsx(RadixDialog.Title, { children }) }),
-          addonAfter && /* @__PURE__ */ jsx(Flex, { ...actions(), children: addonAfter }),
-          description$1 ? /* @__PURE__ */ jsx(Text, { asChild: true, ...description(), children: /* @__PURE__ */ jsx(RadixDialog.Description, { children: description$1 }) }) : /* @__PURE__ */ jsx(VisuallyHidden, { children: /* @__PURE__ */ jsx(RadixDialog.Description, {}) })
-        ]
-      }
-    );
+  ({ addonAfter, children, className, description: description$1, ...props }, outerRef) => {
+    const { headerRef } = useDialogContext("@optiaxiom/react/DialogHeader");
+    const ref = useComposedRefs(headerRef, outerRef);
+    return /* @__PURE__ */ jsxs(Box, { ref, ...header({}, className), ...props, children: [
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          appearance: "subtle",
+          "aria-label": "Close",
+          asChild: true,
+          icon: /* @__PURE__ */ jsx(IconX, {}),
+          ...close(),
+          children: /* @__PURE__ */ jsx(RadixDialog.Close, {})
+        }
+      ),
+      /* @__PURE__ */ jsx(Heading, { asChild: true, level: "3", ...title(), children: /* @__PURE__ */ jsx(RadixDialog.Title, { children }) }),
+      addonAfter && /* @__PURE__ */ jsx(Flex, { ...actions(), children: addonAfter }),
+      description$1 ? /* @__PURE__ */ jsx(Text, { asChild: true, ...description(), children: /* @__PURE__ */ jsx(RadixDialog.Description, { children: description$1 }) }) : /* @__PURE__ */ jsx(VisuallyHidden, { children: /* @__PURE__ */ jsx(RadixDialog.Description, {}) })
+    ] });
   }
 );
 DialogHeader.displayName = "@optiaxiom/react/DialogHeader";

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

@@ -1,8 +1,8 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DKXh4Gs6.css';
-import './../../../../assets/src/disclosure/DisclosureContent.css.ts.vanilla-BnzxuUnk.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-CoWjorU5.css';
+import './../../../../assets/src/disclosure/DisclosureContent.css.ts.vanilla-SX-R3iE7.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var inner = recipeRuntime({base:['qzgcx0']});
-var outer = recipeRuntime({base:[{display:'grid'},'la36fp'],variants:{scale:{false:'_11j8juu',true:{}}}});
+var inner = recipeRuntime({base:['_14k2j9d']});
+var outer = recipeRuntime({base:[{display:'grid'},'_2mxdc1'],variants:{scale:{false:'dl4wf3',true:{}}}});
 
 export { inner, outer };

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

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DKXh4Gs6.css';
-import './../../../../assets/src/disclosure/DisclosureTrigger.css.ts.vanilla-DPPrLc45.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-CoWjorU5.css';
+import './../../../../assets/src/disclosure/DisclosureTrigger.css.ts.vanilla-CFHR-Pol.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var icon = recipeRuntime({base:[{flex:'none',transition:'transform'}],variants:{chevronPosition:{end:'c8qson',start:'ztw7kd'}}});
-var root = recipeRuntime({base:[{flexDirection:'row',fontSize:'md',gap:'8',py:'8',transition:'colors'},'dvbikr']});
-var trigger = recipeRuntime({base:[{flexDirection:'row',fontSize:'inherit',fontWeight:'inherit',gap:'4',rounded:'md',textAlign:'start',w:'full'},'hv7k0l']});
+var icon = recipeRuntime({base:[{flex:'none',transition:'transform'}],variants:{chevronPosition:{end:'_15i8g1y',start:'qnni86'}}});
+var root = recipeRuntime({base:[{flexDirection:'row',fontSize:'md',gap:'8',py:'8',transition:'colors'},'_1mujf54']});
+var trigger = recipeRuntime({base:[{flexDirection:'row',fontSize:'inherit',fontWeight:'inherit',gap:'4',rounded:'md',textAlign:'start',w:'full'},'lst00o']});
 
 export { icon, root, trigger };

package/dist/esm/packages/react/src/downshift/useHighlightedIndex.js

@@ -0,0 +1,31 @@
+"use client";
+import { useState, useEffect } from 'react';
+import { useEffectEvent } from '../hooks/useEffectEvent.js';
+import '../field/FieldContext.js';
+import '../utils/conditions.js';
+import 'react/jsx-runtime';
+import '../utils/isHoverSupported.js';
+
+function useHighlightedIndex(open, getInitialHighlightedIndex) {
+  const [highlightedIndex, setHighlightedIndex] = useState(-1);
+  const getInitialHighlightedIndexStable = useEffectEvent(
+    getInitialHighlightedIndex
+  );
+  useEffect(() => {
+    if (!open) {
+      setHighlightedIndex(-1);
+    } else if (open) {
+      setHighlightedIndex(getInitialHighlightedIndexStable);
+    }
+  }, [getInitialHighlightedIndexStable, open]);
+  return [
+    /**
+     * Downshift resets highlightedIndex to -1 when isOpen is set to false so
+     * we fallback to the initial value when that is the case.
+     */
+    highlightedIndex === -1 ? getInitialHighlightedIndex() : highlightedIndex,
+    setHighlightedIndex
+  ];
+}
+
+export { useHighlightedIndex };

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

@@ -5,7 +5,6 @@ import { forwardRef } from 'react';
 import '../listbox/Listbox.js';
 import '../listbox/ListboxCheckboxItem.js';
 import '../listbox/ListboxEmpty.js';
-import '../listbox/ListboxFooter.js';
 import '../listbox/ListboxGroup.js';
 import '../listbox/ListboxItem.js';
 import '../listbox/ListboxItemIndicator.js';

package/dist/esm/packages/react/src/dropdown-menu/DropdownMenuContent.js

@@ -33,7 +33,7 @@ const DropdownMenuContent = forwardRef(({ align = "start", children, loading, ..
           },
           ref,
           sideOffset: 4,
-          children: loading ? /* @__PURE__ */ jsx(Box, { display: "flex", justifyContent: "center", p: "16", children: /* @__PURE__ */ jsx(Spinner, {}) }) : children
+          children: loading ? /* @__PURE__ */ jsx(Box, { "aria-hidden": true, display: "flex", justifyContent: "center", p: "16", children: /* @__PURE__ */ jsx(Spinner, {}) }) : children
         }
       ) }) })
     }