@optiaxiom/react 1.5.4 → 1.5.6

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

@@ -4,7 +4,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';
@@ -17,15 +16,24 @@ import { useCommandContext, resolveItemProperty } from './CommandContext.js';
 
 const CommandListbox = forwardRef(
   ({ children, size, ...props }, ref) => {
-    const { downshift, highlightedItem, inputValue, items } = useCommandContext(
-      "@optiaxiom/react/CommandListbox"
-    );
+    const {
+      downshift,
+      highlightedItem,
+      highlightedItemRef,
+      inputValue,
+      items
+    } = useCommandContext("@optiaxiom/react/CommandListbox");
     return /* @__PURE__ */ jsx(
       ListboxItemized,
       {
         highlightedItem,
         items,
         itemToKey: (item) => item.key ?? resolveItemProperty(item.label, { inputValue }),
+        onPlacedChange: (placed) => {
+          if (placed && highlightedItemRef.current) {
+            highlightedItemRef.current.scrollIntoView({ block: "nearest" });
+          }
+        },
         size,
         ...downshift.getMenuProps({ ref, ...props }),
         children

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

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-3kSpbNl5.css';
-import './../../../../assets/src/cover/Cover.css.ts.vanilla-Bvm4KJcN.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-nFVu-ZDm.css';
+import './../../../../assets/src/cover/Cover.css.ts.vanilla-Chfa40d3.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var cover = recipeRuntime({variants:{disabled:{false:['_14ti37n','_1aqbcbn'],true:{}},inset:{false:'yj4ity',true:'jdu9km'}}});
+var cover = recipeRuntime({variants:{disabled:{false:['_1sb0o5','_4lo0gb'],true:{}},inset:{false:'_48b4vy',true:'_18asvg4'}}});
 
 export { cover };

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

@@ -1,14 +1,14 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-3kSpbNl5.css';
-import './../../../../assets/src/table/TableRow.css.ts.vanilla-dbNPxr0e.css';
-import './../../../../assets/src/data-table/DataTableBody.css.ts.vanilla-Cf81_Rez.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-nFVu-ZDm.css';
+import './../../../../assets/src/table/TableRow.css.ts.vanilla-CBKKEaC5.css';
+import './../../../../assets/src/data-table/DataTableBody.css.ts.vanilla-itYbVl96.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var cell = recipeRuntime({base:[{alignItems:'start',display:'flex'},'xmzvek'],variants:{pinned:{left:'_1ef5yh5',right:'x5vcht'},pinnedType:{body:'_1ammsao',header:{}}}});
-var cellOffsetVar = 'var(--_1kvydgz)';
-var cellSizeVar = 'var(--_1kz8trt)';
-var leftTotalSizeVar = 'var(--dq8jwm)';
-var rightTotalSizeVar = 'var(--dblnns)';
-var table = recipeRuntime({base:'_4vca8b',variants:{pinned:{both:'_4iyohs',left:'ccrnp4',none:{},right:'_1f09jv6'}}});
-var totalSizeVar = 'var(--_1gw1c77)';
+var cell = recipeRuntime({base:[{alignItems:'start',display:'flex'},'zx5iup'],variants:{pinned:{left:'_1e1phql',right:'znqnw7'},pinnedType:{body:'_17phunv',header:{}}}});
+var cellOffsetVar = 'var(--_1wsra39)';
+var cellSizeVar = 'var(--mhq2ua)';
+var leftTotalSizeVar = 'var(--sxs7wm)';
+var rightTotalSizeVar = 'var(--_1yp6dm6)';
+var table = recipeRuntime({base:'_1u1isfs',variants:{pinned:{both:'_1caoicg',left:'_1v2z96b',none:{},right:'_1rjxvof'}}});
+var totalSizeVar = 'var(--_1afhnne)';
 
 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-3kSpbNl5.css';
-import './../../../../assets/src/data-table/DataTableFooter.css.ts.vanilla-hx3zAqQS.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-nFVu-ZDm.css';
+import './../../../../assets/src/data-table/DataTableFooter.css.ts.vanilla-ya_f3P70.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var addon = recipeRuntime({base:'_1sd88py',variants:{position:{end:{textAlign:'end'},start:{}}}});
+var addon = recipeRuntime({base:'_1iaqzso',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-3kSpbNl5.css';
-import './../../../../assets/src/data-table/DataTableHeaderCell.css.ts.vanilla-M05uOsbn.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-nFVu-ZDm.css';
+import './../../../../assets/src/data-table/DataTableHeaderCell.css.ts.vanilla-BTuZhwZP.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'},'_1lybeni']});
-var handle = recipeRuntime({base:[{h:'full',z:'10'},'z23edm'],variants:{resizing:{false:{},true:{borderColor:'border.focus'}}}});
-var icon = recipeRuntime({base:[{h:'12',mx:'2',transition:'opacity'},'gh9bdv'],variants:{active:{false:'mteow2',true:'_164hsy3'}}});
+var button = recipeRuntime({base:[{alignItems:'center',display:'flex',gap:'4',justifyContent:'flex-start',rounded:'md',textAlign:'start',transition:'colors',w:'full'},'g6x9pj']});
+var handle = recipeRuntime({base:[{h:'full',z:'10'},'q4pecy'],variants:{resizing:{false:{},true:{borderColor:'border.focus'}}}});
+var icon = recipeRuntime({base:[{h:'12',mx:'2',transition:'opacity'},'cn9svn'],variants:{active:{false:'oe1q6l',true:'_1mw2f0z'}}});
 
 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-3kSpbNl5.css';
-import './../../../../assets/src/date-input/DateInput.css.ts.vanilla-C-RApgng.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-nFVu-ZDm.css';
+import './../../../../assets/src/date-input/DateInput.css.ts.vanilla-B6gJ2Usy.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var clear = recipeRuntime({base:[{size:'sm'},'_1epvsho']});
-var date = recipeRuntime({base:'lhgtcp'});
-var input = recipeRuntime({base:'fdejpt'});
-var picker = recipeRuntime({base:'_1g1jxvn'});
+var clear = recipeRuntime({base:[{size:'sm'},'_1mzb6hc']});
+var date = recipeRuntime({base:'k1pjnl'});
+var input = recipeRuntime({base:'_1std4ey'});
+var picker = recipeRuntime({base:'_1t6ko6w'});
 
 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-3kSpbNl5.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-nFVu-ZDm.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,11 +2,9 @@
 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 'react';
-import '../field/FieldContext.js';
-import '../utils/conditions.js';
-import '../utils/isHoverSupported.js';
 import { NestedDialogProvider } from '../nested-dialog-context/NestedDialogContext.js';
 import { useNestedDialogCount } from '../nested-dialog-context/useNestedDialogCount.js';
 import { DialogProvider } from './DialogContext.js';
@@ -28,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-3kSpbNl5.css';
-import './../../../../assets/src/dialog/DialogBody.css.ts.vanilla-B3YkndCa.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-nFVu-ZDm.css';
+import './../../../../assets/src/dialog/DialogBody.css.ts.vanilla-CTpvRnOH.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'},'_11jqom']});
+var body = recipeRuntime({base:[{flex:'1',fontSize:'md',justifyContent:'flex-start',px:'24',py:'16',z:'0'},'_117n4z4']});
 
 export { body };

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

@@ -1,9 +1,12 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-3kSpbNl5.css';
-import './../../../../assets/src/dialog/DialogContent.css.ts.vanilla-Bmlq47OG.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-nFVu-ZDm.css';
+import './../../../../assets/src/dialog/DialogBody.css.ts.vanilla-CTpvRnOH.css';
+import './../../../../assets/src/dialog/DialogContent.css.ts.vanilla-B1B2Yxl2.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var backdrop = recipeRuntime({variants:{hidden:{false:{},true:'_37h34f'}}});
-var content = recipeRuntime({base:[{color:'fg.default',display:'flex',flexDirection:'column'},'_1xcvkho'],variants:{size:{sm:'_18y2146',md:'gp76s',lg:'_1qkq3pq',fullscreen:'_8rtk6a'}}});
-var nestedDialogCountVar = 'var(--rqgco9)';
+var backdrop = recipeRuntime({variants:{hidden:{false:{},true:'cta0em'}}});
+var content = recipeRuntime({base:[{color:'fg.default',display:'flex',flexDirection:'column',overflow:'auto'},'ujx0n7'],variants:{size:{sm:'_1td6avr',md:'_1ftuudl',lg:'zk5ey3',fullscreen:'_1ijwvlu'}}});
+var nestedDialogCountVar = 'var(--_5vka5e)';
+var scrollPaddingBottomVar = 'var(--in7u4r)';
+var scrollPaddingTopVar = 'var(--sdthsk)';
 
-export { backdrop, content, nestedDialogCountVar };
+export { backdrop, content, nestedDialogCountVar, scrollPaddingBottomVar, scrollPaddingTopVar };

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

@@ -5,6 +5,8 @@ import * as RadixDialog from '@radix-ui/react-dialog';
 import { assignInlineVars } from '@vanilla-extract/dynamic';
 import { forwardRef, useRef } from 'react';
 import { Backdrop } from '../backdrop/Backdrop.js';
+import { FocusBookmarkProvider } from '../focus-bookmark/FocusBookmarkProvider.js';
+import '../focus-bookmark/FocusBookmarkRestore.js';
 import { ModalProvider } from '../modal/ModalContext.js';
 import '../modal/ModalLayer.js';
 import { Paper } from '../paper/Paper.js';
@@ -15,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(
@@ -47,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 }) })
+          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-3kSpbNl5.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-nFVu-ZDm.css';
+import './../../../../assets/src/dialog/DialogFooter.css.ts.vanilla-B49qslcR.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'},'_1ilmrh3']});
 
 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-3kSpbNl5.css';
-import './../../../../assets/src/dialog/DialogHeader.css.ts.vanilla-C9YGe-Hw.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-nFVu-ZDm.css';
+import './../../../../assets/src/dialog/DialogHeader.css.ts.vanilla-D8nx5Iyi.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var actions = recipeRuntime({base:[{flexDirection:'row',gap:'8'},'_1ing14u']});
-var close = recipeRuntime({base:['_1sejeyh']});
-var description = recipeRuntime({base:[{color:'fg.secondary',fontSize:'md',fontWeight:'400',w:'full'},'gdz3ju']});
-var title = recipeRuntime({base:[{flex:'1',fontWeight:'500'},'_1n53edu']});
+var actions = recipeRuntime({base:[{flexDirection:'row',gap:'8'},'ukgqg7']});
+var close = recipeRuntime({base:['pi6nub']});
+var description = recipeRuntime({base:[{color:'fg.secondary',fontSize:'md',fontWeight:'400',w:'full'},'_1hqs1jz']});
+var header = recipeRuntime({base:[{bg:'bg.default',display:'flex',flexWrap:'wrap',gap:'8',p:'24',pb:'16',z:'10'},'_1akd1dz']});
+var title = recipeRuntime({base:[{flex:'1',fontWeight:'500'},'_7wshxc']});
 
-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-3kSpbNl5.css';
-import './../../../../assets/src/disclosure/DisclosureContent.css.ts.vanilla-DC-Cz46E.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-nFVu-ZDm.css';
+import './../../../../assets/src/disclosure/DisclosureContent.css.ts.vanilla-DYcqEy0T.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var inner = recipeRuntime({base:['e8k92l']});
-var outer = recipeRuntime({base:[{display:'grid'},'_90yno0'],variants:{scale:{false:'_10a81k7',true:{}}}});
+var inner = recipeRuntime({base:['_1jhv8h7']});
+var outer = recipeRuntime({base:[{display:'grid'},'c28pxz'],variants:{scale:{false:'r8k82l',true:{}}}});
 
 export { inner, outer };