@optiaxiom/react 0.5.4 → 0.6.0

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

@@ -9,6 +9,7 @@ const ComboboxInput = forwardRef(
     return /* @__PURE__ */ jsx(
       CommandInput,
       {
+        htmlSize: 1,
         m: "4",
         onKeyDown: (event) => {
           if (event.key === " " && highlightedItem) {

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-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.length === 1 ? itemToString(value[0]) : 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-focusable-item/CommandFocusableItem-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-CAta_a7S.css';
-import './../../../../assets/src/command-focusable-item/CommandFocusableItem.css.ts.vanilla-CpuCBp6W.css';
+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:'_14tqnrg'});
+var item = recipeRuntime({base:'xs897k'});
 
 export { item };

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

@@ -7,11 +7,11 @@ import '../sprinkles/sprinkles.js';
 import '../sprinkles/sprinklesMerge.js';
 
 const CommandItem = forwardRef(
-  ({ active, children, item, ...props }, ref) => {
+  ({ children, item, selected, ...props }, ref) => {
     const { restProps, sprinkleProps } = extractSprinkles(props);
     const { downshift, highlightedItem, value } = useCommandContext("CommandItem");
     const itemProps = downshift.getItemProps({
-      "aria-selected": active ?? value?.has(item),
+      "aria-selected": selected ?? value?.has(item),
       item,
       ...restProps
     });

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

@@ -6,7 +6,7 @@ import { CommandFocusableItem } from '../command-focusable-item/CommandFocusable
 import { useCommandSubContext } from '../command-sub-context/CommandSubContext.js';
 
 const CommandSubItem = forwardRef(
-  ({ active, children, item, onClick, onMouseDown, onMouseMove, ...props }, outerRef) => {
+  ({ children, item, onClick, onMouseDown, onMouseMove, selected, ...props }, outerRef) => {
     const {
       downshift,
       highlightedItem,
@@ -24,19 +24,19 @@ const CommandSubItem = forwardRef(
     const subIndex = subItems.indexOf(item);
     const disabled = isItemDisabled(item, subIndex);
     const highlighted = highlightedSubItem === item;
-    const selected = active ?? value?.has(item);
+    const isSelected = selected ?? value?.has(item);
     const innerRef = useRef(null);
     const ref = useComposedRefs(innerRef, outerRef);
     useEffect(() => {
-      if (innerRef.current && selected) {
+      if (innerRef.current && isSelected) {
         innerRef.current.scrollIntoView({ block: "nearest" });
       }
-    }, [selected]);
+    }, [isSelected]);
     return /* @__PURE__ */ jsx(
       CommandFocusableItem,
       {
         "aria-disabled": disabled,
-        "aria-selected": selected,
+        "aria-selected": isSelected,
         "data-disabled": disabled ? "" : void 0,
         "data-highlighted": highlighted ? "" : void 0,
         onClick: (event) => {

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

@@ -1,11 +1,11 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-CAta_a7S.css';
-import './../../../../assets/src/data-table/DataTable.css.ts.vanilla-QI0lU8Bk.css';
+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(--_38sj75)';
-var columnWidthVar = 'var(--_4wlxgj)';
-var tableCell = recipeRuntime({base:[{bg:'bg.default'},'qpyb32'],variants:{pinned:{false:{},left:'lpljk4',right:{}}}});
-var tableHead = recipeRuntime({base:[{bg:'bg.default'},'_1wz5qvd'],variants:{pinned:{false:{},left:'mdjbti',right:{}}}});
-var tableHeader = recipeRuntime({base:[{bg:'bg.default'},'_14r5vty']});
+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

@@ -1,8 +1,8 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-CAta_a7S.css';
-import './../../../../assets/src/data-table-header/DataTableHeader.css.ts.vanilla-DjLzKIFm.css';
+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'},'_13sbvsu'],variants:{sortable:{false:'gza7zx',true:'kdfb9n'},variant:{number:{flexDirection:'row-reverse',justifyContent:'end'},text:{flexDirection:'row'}}}});
-var icon = recipeRuntime({base:[{border:'0',color:'fg.tertiary'}],variants:{sorted:{false:'vlnmuv',true:{}}}});
+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

@@ -1,11 +1,22 @@
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { Box } from '../box/Box.js';
-import { body } from './DialogBody-css.js';
 
 const DialogBody = forwardRef(
-  ({ children, className, ...props }, ref) => {
-    return /* @__PURE__ */ jsx(Box, { ref, ...body({}, className), ...props, children });
+  ({ 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";

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

@@ -1,8 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-CAta_a7S.css';
-import './../../../../assets/src/dialog-content/DialogContent.css.ts.vanilla-ByR8ohpq.css';
+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 close = recipeRuntime({base:[{rounded:'full'},'_1242v3q']});
-var content = recipeRuntime({base:[{display:'flex',flexDirection:'column'},'_67xset'],variants:{size:{sm:'_1srdjui',md:'_10i23sv',lg:'zk3rg2',fullscreen:'_1pefspo'}}});
+var content = recipeRuntime({base:[{display:'flex',flexDirection:'column'},'_736n39'],variants:{size:{sm:'_1084kc5',md:'_1y9c1mx',lg:'_6d5lix',fullscreen:'_17s26tg'}}});
 
-export { close, content };
+export { content };

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

@@ -3,22 +3,13 @@ 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 { Button } from '../button/Button.js';
 import { useDialogContext } from '../dialog-context/DialogContext.js';
-import { IconX } from '../icons/IconX.js';
 import { Paper } from '../paper/Paper.js';
 import { Transition } from '../transition/Transition.js';
-import { content, close } from './DialogContent-css.js';
+import { content } from './DialogContent-css.js';
 
 const DialogContent = forwardRef(
-  ({
-    children,
-    className,
-    size = "md",
-    transitionType = "fade",
-    withCloseButton = false,
-    ...props
-  }, ref) => {
+  ({ 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, {}) }) }),
@@ -29,21 +20,7 @@ const DialogContent = forwardRef(
           elevation: size === "fullscreen" ? "drawer" : "dialog",
           ...content({ size }, className),
           ...props,
-          children: /* @__PURE__ */ jsxs(RadixDialog.Content, { ref, children: [
-            children,
-            withCloseButton && /* @__PURE__ */ jsx(
-              Button,
-              {
-                appearance: "subtle",
-                "aria-label": "Close",
-                asChild: true,
-                icon: /* @__PURE__ */ jsx(IconX, {}),
-                size: "sm",
-                ...close(),
-                children: /* @__PURE__ */ jsx(RadixDialog.Close, {})
-              }
-            )
-          ] })
+          children: /* @__PURE__ */ jsx(RadixDialog.Content, { ref, children })
         }
       ) })
     ] }) });

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

@@ -2,21 +2,10 @@ 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, ...props }, ref) => {
-  return /* @__PURE__ */ jsx(
-    Text,
-    {
-      asChild: true,
-      color: "fg.secondary",
-      fontWeight: "400",
-      pb: "xs",
-      px: "lg",
-      ref,
-      ...props,
-      children: /* @__PURE__ */ jsx(RadixDialog.Description, { children })
-    }
-  );
+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";
 

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

@@ -1,4 +1,4 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-CAta_a7S.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 };

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

@@ -2,20 +2,19 @@ import { jsx } from 'react/jsx-runtime';
 import * as RadixDialog from '@radix-ui/react-dialog';
 import { forwardRef } from 'react';
 import { Heading } from '../heading/Heading.js';
+import { title } from './DialogTitle-css.js';
 
 const DialogTitle = forwardRef(
-  ({ children, ...props }, ref) => {
+  ({ asChild, children, className, ...props }, ref) => {
     return /* @__PURE__ */ jsx(
       Heading,
       {
         asChild: true,
-        fontWeight: "500",
         level: "3",
-        p: "lg",
-        pb: "xs",
         ref,
+        ...title({}, className),
         ...props,
-        children: /* @__PURE__ */ jsx(RadixDialog.Title, { children })
+        children: /* @__PURE__ */ jsx(RadixDialog.Title, { asChild, children })
       }
     );
   }

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

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-CAta_a7S.css';
-import './../../../../assets/src/disclosure-content/DisclosureContent.css.ts.vanilla-CcpLpMtT.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BYJE1gjQ.css';
+import './../../../../assets/src/disclosure-content/DisclosureContent.css.ts.vanilla-CxwwenM9.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var content = recipeRuntime({base:[{overflow:'hidden'},'_17aemfm']});
+var content = recipeRuntime({base:[{overflow:'hidden'},'abzxxf']});
 
 export { content };

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

@@ -1,8 +1,8 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-CAta_a7S.css';
-import './../../../../assets/src/disclosure-trigger/DisclosureTrigger.css.ts.vanilla-iRiBgS10.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BYJE1gjQ.css';
+import './../../../../assets/src/disclosure-trigger/DisclosureTrigger.css.ts.vanilla-DTVLJj-K.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var icon = recipeRuntime({base:[{transition:'transform'}],variants:{chevronPosition:{end:'z60xtg',start:'c2tinv'}}});
-var trigger = recipeRuntime({base:[{flexDirection:'row',fontSize:'md',fontWeight:'500',gap:'4',p:'xs',px:'4',rounded:'md',textAlign:'start',w:'full'},'yigzc6']});
+var icon = recipeRuntime({base:[{transition:'transform'}],variants:{chevronPosition:{end:'k2qjxd',start:'vr7iok'}}});
+var trigger = recipeRuntime({base:[{flexDirection:'row',fontSize:'md',fontWeight:'500',gap:'4',p:'xs',px:'4',rounded:'md',textAlign:'start',w:'full'},'_1m1n5sp']});
 
 export { icon, trigger };

package/dist/packages/react/src/drawer/Drawer.js

@@ -1,64 +1,22 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsx } 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 { Button } from '../button/Button.js';
-import { IconX } from '../icons/IconX.js';
-import { Paper } from '../paper/Paper.js';
-import { Transition } from '../transition/Transition.js';
-import { content, close } from './Drawer-css.js';
+import { useControllableState } from '@radix-ui/react-use-controllable-state';
+import { DrawerContextProvider } from '../drawer-context/DrawerContext.js';
 
-const mapPositionToTransitionSide = {
-  bottom: "top",
-  left: "right",
-  right: "left"
-};
-const Drawer = forwardRef(
-  ({
-    children,
-    modal,
-    onClose,
-    open,
-    position = "right",
-    withCloseButton = false,
-    ...props
-  }, ref) => {
-    return /* @__PURE__ */ jsx(RadixDialog.Root, { modal, onOpenChange: onClose, open, children: /* @__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": mapPositionToTransitionSide[position],
-          type: "fade",
-          children: /* @__PURE__ */ jsx(
-            Paper,
-            {
-              asChild: true,
-              elevation: "drawer",
-              ...content({ position }),
-              children: /* @__PURE__ */ jsxs(RadixDialog.Content, { ref, ...props, children: [
-                children,
-                withCloseButton && /* @__PURE__ */ jsx(
-                  Button,
-                  {
-                    appearance: "subtle",
-                    "aria-label": "Close",
-                    asChild: true,
-                    icon: /* @__PURE__ */ jsx(IconX, {}),
-                    size: "sm",
-                    ...close(),
-                    children: /* @__PURE__ */ jsx(RadixDialog.Close, {})
-                  }
-                )
-              ] })
-            }
-          )
-        }
-      )
-    ] }) }) });
-  }
-);
+function Drawer({
+  children,
+  defaultOpen,
+  modal,
+  onOpenChange,
+  open: openProp
+}) {
+  const [open, setOpen] = useControllableState({
+    defaultProp: defaultOpen,
+    onChange: onOpenChange,
+    prop: openProp
+  });
+  return /* @__PURE__ */ jsx(RadixDialog.Root, { modal, onOpenChange: setOpen, open, children: /* @__PURE__ */ jsx(DrawerContextProvider, { open, children }) });
+}
 Drawer.displayName = "@optiaxiom/react/Drawer";
 
 export { Drawer };

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

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

package/dist/packages/react/src/drawer-actions/DrawerActions.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 './DrawerActions-css.js';
+
+const DrawerActions = 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 })
+    ] });
+  }
+);
+DrawerActions.displayName = "@optiaxiom/react/DrawerActions";
+
+export { DrawerActions };

package/dist/packages/react/src/drawer-close/DrawerClose.js

@@ -0,0 +1,13 @@
+import { jsx } from 'react/jsx-runtime';
+import * as RadixDialog from '@radix-ui/react-dialog';
+import { forwardRef } from 'react';
+import { Button } from '../button/Button.js';
+
+const DrawerClose = forwardRef(
+  ({ asChild, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(RadixDialog.Close, { asChild: true, ref, ...props, children: asChild ? children : /* @__PURE__ */ jsx(Button, { children }) });
+  }
+);
+DrawerClose.displayName = "@optiaxiom/react/DrawerClose";
+
+export { DrawerClose };

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

@@ -0,0 +1,7 @@
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BYJE1gjQ.css';
+import './../../../../assets/src/drawer-content/DrawerContent.css.ts.vanilla-DjDWBK6Y.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var content = recipeRuntime({base:[{color:'fg.default',display:'flex',flexDirection:'column'},'cdej2e'],variants:{position:{bottom:[{borderT:'1'},'f6ax7f'],left:[{borderR:'1',h:'full',maxW:['full','lg'],w:['full','3/4']},'_7j0f1y'],right:[{borderL:'1',h:'full',maxW:['full','lg'],w:['full','3/4']},'_4ufnor']}}});
+
+export { content };

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

@@ -0,0 +1,42 @@
+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 { useDrawerContext } from '../drawer-context/DrawerContext.js';
+import { Paper } from '../paper/Paper.js';
+import { Transition } from '../transition/Transition.js';
+import { content } from './DrawerContent-css.js';
+
+const mapPositionToTransitionSide = {
+  bottom: "top",
+  left: "right",
+  right: "left"
+};
+const DrawerContent = forwardRef(
+  ({ children, position = "right", ...props }, ref) => {
+    const { open } = useDrawerContext("DrawerContent");
+    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": mapPositionToTransitionSide[position],
+          type: "fade",
+          children: /* @__PURE__ */ jsx(
+            Paper,
+            {
+              asChild: true,
+              elevation: "drawer",
+              ...content({ position }),
+              children: /* @__PURE__ */ jsx(RadixDialog.Content, { ref, ...props, children })
+            }
+          )
+        }
+      )
+    ] }) });
+  }
+);
+DrawerContent.displayName = "@optiaxiom/react/DrawerContent";
+
+export { DrawerContent };

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

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

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

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

package/dist/packages/react/src/drawer-description/DrawerDescription.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 './DrawerDescription-css.js';
+
+const DrawerDescription = forwardRef(({ children, className, ...props }, ref) => {
+  return /* @__PURE__ */ jsx(Text, { asChild: true, ref, ...description({}, className), ...props, children: /* @__PURE__ */ jsx(RadixDialog.Description, { children }) });
+});
+DrawerDescription.displayName = "@optiaxiom/react/DrawerDescription";
+
+export { DrawerDescription };