@optiaxiom/react 0.5.3 → 0.6.0

package/dist/packages/react/src/combobox-popover-content/ComboboxPopoverContent.js

@@ -0,0 +1,10 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { PopoverContent } from '../popover-content/PopoverContent.js';
+
+const ComboboxPopoverContent = forwardRef((props, ref) => {
+  return /* @__PURE__ */ jsx(PopoverContent, { minW: "trigger", ref, ...props });
+});
+ComboboxPopoverContent.displayName = "@optiaxiom/react/ComboboxPopoverContent";
+
+export { ComboboxPopoverContent };

package/dist/packages/react/src/combobox-radio-item/ComboboxRadioItem.js

@@ -0,0 +1,11 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { ComboboxItem } from '../combobox-item/ComboboxItem.js';
+import { ListboxRadioItem } from '../listbox-radio-item/ListboxRadioItem.js';
+
+const ComboboxRadioItem = forwardRef(({ children, ...props }, ref) => {
+  return /* @__PURE__ */ jsx(ComboboxItem, { asChild: true, ref, ...props, children: /* @__PURE__ */ jsx(ListboxRadioItem, { children }) });
+});
+ComboboxRadioItem.displayName = "@optiaxiom/react/ComboboxRadioItem";
+
+export { ComboboxRadioItem };

package/dist/packages/react/src/combobox-scroll-area/ComboboxScrollArea.js

@@ -0,0 +1,10 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { ListboxScrollArea } from '../listbox-scroll-area/ListboxScrollArea.js';
+
+const ComboboxScrollArea = forwardRef((props, ref) => {
+  return /* @__PURE__ */ jsx(ListboxScrollArea, { ref, ...props });
+});
+ComboboxScrollArea.displayName = "@optiaxiom/react/ComboboxScrollArea";
+
+export { ComboboxScrollArea };

package/dist/packages/react/src/combobox-separator/ComboboxSeparator.js

@@ -0,0 +1,10 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { ListboxSeparator } from '../listbox-separator/ListboxSeparator.js';
+
+const ComboboxSeparator = forwardRef((props, ref) => {
+  return /* @__PURE__ */ jsx(ListboxSeparator, { ref, ...props });
+});
+ComboboxSeparator.displayName = "@optiaxiom/react/ComboboxSeparator";
+
+export { ComboboxSeparator };

package/dist/{src → packages/react/src}/combobox-value/ComboboxValue.js

@@ -1,34 +1,19 @@
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import { forwardRef, useMemo } from 'react';
-import { Badge } from '../badge/Badge.js';
 import { useComboboxContext } from '../combobox-context/ComboboxContext.js';
 import { Flex } from '../flex/Flex.js';
 
-const maxDisplayedItems = 2;
 const ComboboxValue = forwardRef(
   ({ children, placeholder, ...props }, ref) => {
-    const {
-      itemToKey,
-      itemToString,
-      value: valueContext
-    } = useComboboxContext("ComboboxValue");
+    const { itemToString, value: valueContext } = useComboboxContext("ComboboxValue");
     const value = useMemo(
       () => valueContext instanceof Set ? [...valueContext] : valueContext,
       [valueContext]
     );
-    return /* @__PURE__ */ jsx(Flex, { flexDirection: "row", flexWrap: "wrap", gap: "2", ref, ...props, children: Array.isArray(value) && value.length > 0 ? children ?? /* @__PURE__ */ jsx(Fragment, { children: value.length > maxDisplayedItems ? /* @__PURE__ */ jsxs(Badge, { children: [
+    return /* @__PURE__ */ jsx(Flex, { flexDirection: "row", flexWrap: "wrap", gap: "2", ref, ...props, children: Array.isArray(value) && value.length > 0 ? children ?? /* @__PURE__ */ jsx(Fragment, { children: value.length === 1 ? itemToString(value[0]) : /* @__PURE__ */ jsxs(Fragment, { children: [
       value.length,
       " selected"
-    ] }) : value.slice(0, maxDisplayedItems).map((item) => /* @__PURE__ */ jsx(
-      Badge,
-      {
-        display: "inline-block",
-        flex: "1",
-        truncate: true,
-        children: itemToString(item)
-      },
-      itemToKey(item)
-    )) }) : placeholder });
+    ] }) }) : placeholder });
   }
 );
 ComboboxValue.displayName = "@optiaxiom/react/ComboboxValue";

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

@@ -0,0 +1,93 @@
+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 { usePortalPatch } from '../downshift/usePortalPatch.js';
+
+function Command({
+  children,
+  inputValue: inputValueProp,
+  isItemDisabled = () => false,
+  items,
+  itemToKey = (value) => value,
+  itemToString = (value) => value ? String(value) : "",
+  itemToSubItems,
+  onInputValueChange,
+  onItemSelect,
+  onOpenChange,
+  open,
+  value: valueProp,
+  ...props
+}) {
+  const value = useMemo(
+    () => Array.isArray(valueProp) ? new Set(valueProp) : valueProp,
+    [valueProp]
+  );
+  const [inputValue, setInputValue] = useControllableState({
+    defaultProp: "",
+    onChange: onInputValueChange,
+    prop: inputValueProp
+  });
+  const [lastInteractionSource, setLastInteractionSource] = useState("keyboard");
+  const [highlightedIndex, setHighlightedIndex] = usePortalPatch(open);
+  const [highlightedSubIndex, setHighlightedSubIndex] = useState(-1);
+  const downshift = useCombobox({
+    ...props,
+    highlightedIndex,
+    inputValue,
+    isItemDisabled,
+    isOpen: open,
+    items,
+    itemToKey,
+    itemToString,
+    onHighlightedIndexChange({ highlightedIndex: highlightedIndex2, type }) {
+      setHighlightedIndex(highlightedIndex2);
+      if (type === useCombobox.stateChangeTypes.InputKeyDownArrowDown || type === useCombobox.stateChangeTypes.InputKeyDownArrowUp) {
+        setLastInteractionSource("keyboard");
+      } else {
+        setLastInteractionSource("pointer");
+      }
+      if (highlightedIndex2 !== -1 && itemToSubItems?.(items[highlightedIndex2])?.length) {
+        setHighlightedSubIndex(0);
+      } else {
+        setHighlightedSubIndex(-1);
+      }
+    },
+    onIsOpenChange({ isOpen }) {
+      onOpenChange?.(isOpen);
+    },
+    onSelectedItemChange({ selectedItem, type }) {
+      if (type !== useCombobox.stateChangeTypes.InputBlur) {
+        onItemSelect?.(selectedItem);
+      }
+    }
+  });
+  downshift.getMenuProps({}, { suppressRefError: true });
+  return /* @__PURE__ */ jsx(
+    CommandContextProvider,
+    {
+      downshift,
+      highlightedItem: items[downshift.highlightedIndex],
+      highlightedSubIndex,
+      isItemDisabled,
+      items,
+      itemToSubItems,
+      lastInteractionSource,
+      setHighlightedIndex: (index, source) => {
+        setHighlightedIndex(index);
+        setLastInteractionSource(source);
+      },
+      setHighlightedSubIndex: (index, source) => {
+        setHighlightedSubIndex(index);
+        setLastInteractionSource(source);
+      },
+      setInputValue,
+      value,
+      children
+    }
+  );
+}
+Command.displayName = "@optiaxiom/react/Command";
+
+export { Command };

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

@@ -0,0 +1,7 @@
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BYJE1gjQ.css';
+import './../../../../assets/src/command-focusable-item/CommandFocusableItem.css.ts.vanilla-CSZpzhhg.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var item = recipeRuntime({base:'xs897k'});
+
+export { item };

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

@@ -0,0 +1,22 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Box } from '../box/Box.js';
+import { useCommandContext } from '../command-context/CommandContext.js';
+import { item } from './CommandFocusableItem-css.js';
+
+const CommandFocusableItem = forwardRef(({ children, className, ...props }, ref) => {
+  const { lastInteractionSource } = useCommandContext("CommandFocusableItem");
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      "data-focus-visible": lastInteractionSource === "keyboard" ? "" : void 0,
+      ref,
+      ...item({}, className),
+      ...props,
+      children
+    }
+  );
+});
+CommandFocusableItem.displayName = "@optiaxiom/react/CommandFocusableItem";
+
+export { CommandFocusableItem };

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

@@ -0,0 +1,68 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { useCommandContext } from '../command-context/CommandContext.js';
+import { IconMagnifyingGlass } from '../icons/IconMagnifyingGlass.js';
+import { Input } from '../input/Input.js';
+import { extractSprinkles } from '../sprinkles/extractSprinkles.js';
+import '../sprinkles/sprinkles.js';
+import '../sprinkles/sprinklesMerge.js';
+
+const CommandInput = forwardRef(
+  ({ onKeyDown, ...props }, ref) => {
+    const { restProps, sprinkleProps } = extractSprinkles(props);
+    const {
+      downshift,
+      highlightedItem,
+      highlightedSubIndex,
+      itemToSubItems,
+      setHighlightedSubIndex,
+      setInputValue
+    } = useCommandContext("CommandInput");
+    return /* @__PURE__ */ jsx(
+      Input,
+      {
+        addonBefore: /* @__PURE__ */ jsx(IconMagnifyingGlass, {}),
+        ...sprinkleProps,
+        ...downshift.getInputProps({
+          ...restProps,
+          onChange: (event) => {
+            setInputValue("value" in event.target ? event.target.value : "");
+          },
+          onKeyDown: (event) => {
+            onKeyDown?.(event);
+            if (event.defaultPrevented) {
+              return;
+            }
+            if (highlightedItem && highlightedSubIndex !== -1 && (event.key === "ArrowLeft" || event.key === "ArrowRight" || event.key === "Enter")) {
+              const subItems = itemToSubItems?.(highlightedItem) ?? [];
+              if (subItems.length === 0) {
+                return;
+              }
+              event.preventDefault();
+              Object.assign(event.nativeEvent, {
+                preventDownshiftDefault: true
+              });
+              if (event.key === "ArrowRight") {
+                setHighlightedSubIndex(
+                  highlightedSubIndex === subItems.length - 1 ? 0 : highlightedSubIndex + 1,
+                  "keyboard"
+                );
+              } else if (event.key === "ArrowLeft") {
+                setHighlightedSubIndex(
+                  highlightedSubIndex === 0 ? subItems.length - 1 : highlightedSubIndex - 1,
+                  "keyboard"
+                );
+              } else if (event.key === "Enter") {
+                downshift.selectItem(subItems[highlightedSubIndex]);
+              }
+            }
+          },
+          ref
+        })
+      }
+    );
+  }
+);
+CommandInput.displayName = "@optiaxiom/react/CommandInput";
+
+export { CommandInput };

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

@@ -0,0 +1,34 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { useCommandContext } from '../command-context/CommandContext.js';
+import { CommandFocusableItem } from '../command-focusable-item/CommandFocusableItem.js';
+import { extractSprinkles } from '../sprinkles/extractSprinkles.js';
+import '../sprinkles/sprinkles.js';
+import '../sprinkles/sprinklesMerge.js';
+
+const CommandItem = forwardRef(
+  ({ children, item, selected, ...props }, ref) => {
+    const { restProps, sprinkleProps } = extractSprinkles(props);
+    const { downshift, highlightedItem, value } = useCommandContext("CommandItem");
+    const itemProps = downshift.getItemProps({
+      "aria-selected": selected ?? value?.has(item),
+      item,
+      ...restProps
+    });
+    return /* @__PURE__ */ jsx(
+      CommandFocusableItem,
+      {
+        "data-disabled": itemProps["aria-disabled"] ? "" : void 0,
+        "data-highlighted": highlightedItem === item ? "" : void 0,
+        ref,
+        tabIndex: -1,
+        ...sprinkleProps,
+        ...itemProps,
+        children
+      }
+    );
+  }
+);
+CommandItem.displayName = "@optiaxiom/react/CommandItem";
+
+export { CommandItem };

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

@@ -0,0 +1,25 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { useCommandContext } from '../command-context/CommandContext.js';
+import { Listbox } from '../listbox/Listbox.js';
+import { extractSprinkles } from '../sprinkles/extractSprinkles.js';
+import '../sprinkles/sprinkles.js';
+import '../sprinkles/sprinklesMerge.js';
+
+const CommandListbox = forwardRef(
+  ({ children, ...props }, ref) => {
+    const { restProps, sprinkleProps } = extractSprinkles(props);
+    const { downshift } = useCommandContext("CommandList");
+    return /* @__PURE__ */ jsx(
+      Listbox,
+      {
+        ...sprinkleProps,
+        ...downshift.getMenuProps({ ref, ...restProps }),
+        children
+      }
+    );
+  }
+);
+CommandListbox.displayName = "@optiaxiom/react/CommandListbox";
+
+export { CommandListbox };

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

@@ -0,0 +1,13 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Box } from '../box/Box.js';
+import { CommandSubContextProvider } 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 }) });
+  }
+);
+CommandSub.displayName = "@optiaxiom/react/CommandSub";
+
+export { CommandSub };

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

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

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

@@ -0,0 +1,72 @@
+import { jsx } from 'react/jsx-runtime';
+import { useComposedRefs } from '@radix-ui/react-compose-refs';
+import { forwardRef, useRef, useEffect } from 'react';
+import { useCommandContext } from '../command-context/CommandContext.js';
+import { CommandFocusableItem } from '../command-focusable-item/CommandFocusableItem.js';
+import { useCommandSubContext } from '../command-sub-context/CommandSubContext.js';
+
+const CommandSubItem = forwardRef(
+  ({ children, item, onClick, onMouseDown, onMouseMove, selected, ...props }, outerRef) => {
+    const {
+      downshift,
+      highlightedItem,
+      highlightedSubIndex,
+      isItemDisabled,
+      items,
+      itemToSubItems,
+      setHighlightedIndex,
+      setHighlightedSubIndex,
+      value
+    } = useCommandContext("CommandSubItem");
+    const { item: parentItem } = useCommandSubContext("CommandSubItem");
+    const subItems = itemToSubItems?.(parentItem) ?? [];
+    const highlightedSubItem = highlightedItem === parentItem && highlightedSubIndex !== -1 ? subItems[highlightedSubIndex] : null;
+    const subIndex = subItems.indexOf(item);
+    const disabled = isItemDisabled(item, subIndex);
+    const highlighted = highlightedSubItem === item;
+    const isSelected = selected ?? value?.has(item);
+    const innerRef = useRef(null);
+    const ref = useComposedRefs(innerRef, outerRef);
+    useEffect(() => {
+      if (innerRef.current && isSelected) {
+        innerRef.current.scrollIntoView({ block: "nearest" });
+      }
+    }, [isSelected]);
+    return /* @__PURE__ */ jsx(
+      CommandFocusableItem,
+      {
+        "aria-disabled": disabled,
+        "aria-selected": isSelected,
+        "data-disabled": disabled ? "" : void 0,
+        "data-highlighted": highlighted ? "" : void 0,
+        onClick: (event) => {
+          onClick?.(event);
+          if (event.defaultPrevented) {
+            return;
+          }
+          event.preventDefault();
+          downshift.selectItem(item);
+        },
+        onMouseDown: (event) => {
+          onMouseDown?.(event);
+          event.preventDefault();
+        },
+        onMouseMove: (event) => {
+          onMouseMove?.(event);
+          if (event.defaultPrevented) {
+            return;
+          }
+          setHighlightedIndex(items.indexOf(parentItem), "pointer");
+          setHighlightedSubIndex(subIndex, "pointer");
+        },
+        ref,
+        role: "option",
+        ...props,
+        children
+      }
+    );
+  }
+);
+CommandSubItem.displayName = "@optiaxiom/react/CommandSubItem";
+
+export { CommandSubItem };

package/dist/packages/react/src/command-toggle-button/CommandToggleButton.js

@@ -0,0 +1,16 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Box } from '../box/Box.js';
+import { useCommandContext } from '../command-context/CommandContext.js';
+import { extractSprinkles } from '../sprinkles/extractSprinkles.js';
+import '../sprinkles/sprinkles.js';
+import '../sprinkles/sprinklesMerge.js';
+
+const CommandToggleButton = forwardRef(({ children, ...props }, ref) => {
+  const { restProps, sprinkleProps } = extractSprinkles(props);
+  const { downshift } = useCommandContext("CommandToggleButton");
+  return /* @__PURE__ */ jsx(Box, { asChild: true, ...sprinkleProps, children: /* @__PURE__ */ jsx("button", { ref, ...downshift.getToggleButtonProps(restProps), children }) });
+});
+CommandToggleButton.displayName = "@optiaxiom/react/CommandToggleButton";
+
+export { CommandToggleButton };

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

@@ -0,0 +1,11 @@
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BYJE1gjQ.css';
+import './../../../../assets/src/data-table/DataTable.css.ts.vanilla-DS6U2gJy.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var cellOffsetVar = 'var(--lq38ie)';
+var columnWidthVar = 'var(--qc9kgs)';
+var tableCell = recipeRuntime({base:[{bg:'bg.default'},'mpkv2e'],variants:{pinned:{false:{},left:'tygmq7',right:{}}}});
+var tableHead = recipeRuntime({base:[{bg:'bg.default'},'_1cym3hq'],variants:{pinned:{false:{},left:'_1ow76le',right:{}}}});
+var tableHeader = recipeRuntime({base:[{bg:'bg.default'},'_2zar8g']});
+
+export { cellOffsetVar, columnWidthVar, tableCell, tableHead, tableHeader };

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

@@ -0,0 +1,8 @@
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BYJE1gjQ.css';
+import './../../../../assets/src/data-table-header/DataTableHeader.css.ts.vanilla-Dfaxcy6y.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var header = recipeRuntime({base:[{gap:'4'},'jrfj1l'],variants:{sortable:{false:'_1garn18',true:'sau0qk'},variant:{number:{flexDirection:'row-reverse',justifyContent:'end'},text:{flexDirection:'row'}}}});
+var icon = recipeRuntime({base:[{border:'0',color:'fg.tertiary'}],variants:{sorted:{false:'_1wqgdx7',true:{}}}});
+
+export { header, icon };

package/dist/packages/react/src/dialog-actions/DialogActions-css.js

@@ -0,0 +1,7 @@
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BYJE1gjQ.css';
+import './../../../../assets/src/dialog-actions/DialogActions.css.ts.vanilla-BVanfu8y.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var actions = recipeRuntime({base:[{flexDirection:'row-reverse',gap:'xs'},'olwe49']});
+
+export { actions };

package/dist/packages/react/src/dialog-actions/DialogActions.js

@@ -0,0 +1,19 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import * as RadixDialog from '@radix-ui/react-dialog';
+import { forwardRef } from 'react';
+import { Button } from '../button/Button.js';
+import { Flex } from '../flex/Flex.js';
+import { IconX } from '../icons/IconX.js';
+import { actions } from './DialogActions-css.js';
+
+const DialogActions = forwardRef(
+  ({ children, className, ...props }, ref) => {
+    return /* @__PURE__ */ jsxs(Flex, { ref, ...actions({}, className), ...props, children: [
+      /* @__PURE__ */ jsx(Button, { appearance: "subtle", "aria-label": "Close", asChild: true, icon: /* @__PURE__ */ jsx(IconX, {}), children: /* @__PURE__ */ jsx(RadixDialog.Close, {}) }),
+      /* @__PURE__ */ jsx(Flex, { flexDirection: "row", gap: "xs", children })
+    ] });
+  }
+);
+DialogActions.displayName = "@optiaxiom/react/DialogActions";
+
+export { DialogActions };

package/dist/packages/react/src/dialog-body/DialogBody.js

@@ -0,0 +1,24 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Box } from '../box/Box.js';
+
+const DialogBody = forwardRef(
+  ({ children, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      Box,
+      {
+        flex: "1",
+        fontSize: "md",
+        overflow: "auto",
+        pb: "md",
+        px: "lg",
+        ref,
+        ...props,
+        children
+      }
+    );
+  }
+);
+DialogBody.displayName = "@optiaxiom/react/DialogBody";
+
+export { DialogBody };

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

@@ -0,0 +1,7 @@
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BYJE1gjQ.css';
+import './../../../../assets/src/dialog-content/DialogContent.css.ts.vanilla-CAXaqfYm.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var content = recipeRuntime({base:[{display:'flex',flexDirection:'column'},'_736n39'],variants:{size:{sm:'_1084kc5',md:'_1y9c1mx',lg:'_6d5lix',fullscreen:'_17s26tg'}}});
+
+export { content };

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

@@ -0,0 +1,31 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import * as RadixDialog from '@radix-ui/react-dialog';
+import { forwardRef } from 'react';
+import { AnimatePresence } from '../animate-presence/AnimatePresence.js';
+import { Backdrop } from '../backdrop/Backdrop.js';
+import { useDialogContext } from '../dialog-context/DialogContext.js';
+import { Paper } from '../paper/Paper.js';
+import { Transition } from '../transition/Transition.js';
+import { content } from './DialogContent-css.js';
+
+const DialogContent = forwardRef(
+  ({ children, className, size = "md", transitionType = "fade", ...props }, ref) => {
+    const { open } = useDialogContext("DialogContent");
+    return /* @__PURE__ */ jsx(AnimatePresence, { children: open && /* @__PURE__ */ jsxs(RadixDialog.Portal, { forceMount: true, children: [
+      /* @__PURE__ */ jsx(Transition, { children: /* @__PURE__ */ jsx(Backdrop, { asChild: true, children: /* @__PURE__ */ jsx(RadixDialog.Overlay, {}) }) }),
+      /* @__PURE__ */ jsx(Transition, { "data-side": "bottom", type: transitionType, children: /* @__PURE__ */ jsx(
+        Paper,
+        {
+          asChild: true,
+          elevation: size === "fullscreen" ? "drawer" : "dialog",
+          ...content({ size }, className),
+          ...props,
+          children: /* @__PURE__ */ jsx(RadixDialog.Content, { ref, children })
+        }
+      ) })
+    ] }) });
+  }
+);
+DialogContent.displayName = "@optiaxiom/react/DialogContent";
+
+export { DialogContent };

package/dist/packages/react/src/dialog-description/DialogDescription-css.js

@@ -0,0 +1,7 @@
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BYJE1gjQ.css';
+import './../../../../assets/src/dialog-description/DialogDescription.css.ts.vanilla-rUcR0rJA.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var description = recipeRuntime({base:[{color:'fg.secondary',fontWeight:'400',w:'full'},'vlx8qu']});
+
+export { description };

package/dist/packages/react/src/dialog-description/DialogDescription.js

@@ -0,0 +1,12 @@
+import { jsx } from 'react/jsx-runtime';
+import * as RadixDialog from '@radix-ui/react-dialog';
+import { forwardRef } from 'react';
+import { Text } from '../text/Text.js';
+import { description } from './DialogDescription-css.js';
+
+const DialogDescription = forwardRef(({ children, className, ...props }, ref) => {
+  return /* @__PURE__ */ jsx(Text, { asChild: true, ref, ...description({}, className), ...props, children: /* @__PURE__ */ jsx(RadixDialog.Description, { children }) });
+});
+DialogDescription.displayName = "@optiaxiom/react/DialogDescription";
+
+export { DialogDescription };

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

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

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

@@ -0,0 +1,24 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Box } from '../box/Box.js';
+
+const DialogHeader = forwardRef(
+  ({ children, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      Box,
+      {
+        display: "flex",
+        flexWrap: "wrap",
+        gap: "xs",
+        p: "lg",
+        pb: "md",
+        ref,
+        ...props,
+        children
+      }
+    );
+  }
+);
+DialogHeader.displayName = "@optiaxiom/react/DialogHeader";
+
+export { DialogHeader };

package/dist/packages/react/src/dialog-title/DialogTitle-css.js

@@ -0,0 +1,7 @@
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BYJE1gjQ.css';
+import './../../../../assets/src/dialog-title/DialogTitle.css.ts.vanilla-DlSdDz1n.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var title = recipeRuntime({base:[{flex:'1',fontWeight:'500'},'_6fv3jl']});
+
+export { title };