@optiaxiom/react 0.1.0-next.9 → 0.2.0

package/dist/src/checkbox/Checkbox-css.js

@@ -0,0 +1,13 @@
+import './../../assets/src/layers/layers.css.ts.vanilla-79mCcHcb.css';
+import './../../assets/src/table-row/TableRow.css.ts.vanilla-BwAVjqZ1.css';
+import './../../assets/src/toggle-input/ToggleInput.css.ts.vanilla-7tBLQzKd.css';
+import './../../assets/src/checkbox/Checkbox.css.ts.vanilla-BLLzwfIm.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var checkbox = recipeRuntime({base:'_1u0qnhf'});
+var control = recipeRuntime({base:[{color:'fg.default.inverse',mt:'2',rounded:'xs',size:'16'},'lih270']});
+var icon = recipeRuntime({base:['mnra9w']});
+var indicator = recipeRuntime({base:[{alignItems:'center',display:'flex',justifyContent:'center',p:'2',size:'full'}]});
+var input = recipeRuntime({base:'kr6c2a'});
+
+export { checkbox, control, icon, indicator, input };

package/dist/src/checkbox/Checkbox.js

@@ -0,0 +1,40 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Box } from '../box/Box.js';
+import { IconCheck } from '../icons/IconCheck.js';
+import { IconMinus } from '../icons/IconMinus.js';
+import { extractSprinkles } from '../sprinkles/extractSprinkles.js';
+import '../sprinkles/sprinkles.js';
+import '../sprinkles/sprinklesMerge.js';
+import { ToggleInput } from '../toggle-input/ToggleInput.js';
+import { ToggleInputContent } from '../toggle-input-content/ToggleInputContent.js';
+import { ToggleInputControl } from '../toggle-input-control/ToggleInputControl.js';
+import { ToggleInputDescription } from '../toggle-input-description/ToggleInputDescription.js';
+import { ToggleInputHiddenInput } from '../toggle-input-hidden-input/ToggleInputHiddenInput.js';
+import { ToggleInputLabel } from '../toggle-input-label/ToggleInputLabel.js';
+import { checkbox, input, control, indicator, icon } from './Checkbox-css.js';
+
+const Checkbox = forwardRef(
+  ({ children, className, description, indeterminate, ...props }, ref) => {
+    const { restProps, sprinkleProps } = extractSprinkles(props);
+    return /* @__PURE__ */ jsxs(
+      ToggleInput,
+      {
+        description: !!description,
+        ...checkbox({}, className),
+        ...sprinkleProps,
+        children: [
+          /* @__PURE__ */ jsx(ToggleInputHiddenInput, { ref, ...input(), ...restProps }),
+          /* @__PURE__ */ jsx(ToggleInputControl, { ...control(), children: /* @__PURE__ */ jsx(Box, { ...indicator(), children: /* @__PURE__ */ jsx(Box, { asChild: true, ...icon(), children: indeterminate ? /* @__PURE__ */ jsx(IconMinus, {}) : /* @__PURE__ */ jsx(IconCheck, {}) }) }) }),
+          /* @__PURE__ */ jsxs(ToggleInputContent, { children: [
+            /* @__PURE__ */ jsx(ToggleInputLabel, { children }),
+            description && /* @__PURE__ */ jsx(ToggleInputDescription, { children: description })
+          ] })
+        ]
+      }
+    );
+  }
+);
+Checkbox.displayName = "@optiaxiom/react/Checkbox";
+
+export { Checkbox };

package/dist/src/code/Code-css.js

@@ -0,0 +1,7 @@
+import './../../assets/src/layers/layers.css.ts.vanilla-79mCcHcb.css';
+import './../../assets/src/code/Code.css.ts.vanilla-BhMJSr08.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var code = recipeRuntime({base:[{bg:'bg.secondary',display:'inline-block',px:'4',rounded:'sm'},'_12xvi9f']});
+
+export { code };

package/dist/{code → src/code}/Code.js

@@ -3,7 +3,8 @@ import { Slot } from '@radix-ui/react-slot';
 import { forwardRef } from 'react';
 import { Box } from '../box/Box.js';
 import { extractSprinkles } from '../sprinkles/extractSprinkles.js';
-import '../sprinkles/sprinkles-css.js';
+import '../sprinkles/sprinkles.js';
+import '../sprinkles/sprinklesMerge.js';
 import { code } from './Code-css.js';
 
 const Code = forwardRef(

package/dist/src/dialog/Dialog.js

@@ -0,0 +1,22 @@
+import { jsx } from 'react/jsx-runtime';
+import * as RadixDialog from '@radix-ui/react-dialog';
+import { useControllableState } from '@radix-ui/react-use-controllable-state';
+import { DialogContextProvider } from '../dialog-context/DialogContext.js';
+
+function Dialog({
+  children,
+  defaultOpen,
+  onOpenChange,
+  open: openProp,
+  ...props
+}) {
+  const [open, setOpen] = useControllableState({
+    defaultProp: defaultOpen,
+    onChange: onOpenChange,
+    prop: openProp
+  });
+  return /* @__PURE__ */ jsx(RadixDialog.Root, { onOpenChange: setOpen, open, ...props, children: /* @__PURE__ */ jsx(DialogContextProvider, { open, children }) });
+}
+Dialog.displayName = "@optiaxiom/react/Dialog";
+
+export { Dialog };

package/dist/src/dialog-body/DialogBody-css.js

@@ -0,0 +1,6 @@
+import './../../assets/src/layers/layers.css.ts.vanilla-79mCcHcb.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var body = recipeRuntime({base:[{flex:'1',fontSize:'md',overflow:'auto',pb:'md',pt:'lg',px:'lg'}]});
+
+export { body };

package/dist/{dialog-body → src/dialog-body}/DialogBody.js

@@ -4,8 +4,8 @@ import { Box } from '../box/Box.js';
 import { body } from './DialogBody-css.js';
 
 const DialogBody = forwardRef(
-  ({ children, ...props }, ref) => {
-    return /* @__PURE__ */ jsx(Box, { ref, ...body(), ...props, children });
+  ({ children, className, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(Box, { ref, ...body({}, className), ...props, children });
   }
 );
 DialogBody.displayName = "@optiaxiom/react/DialogBody";

package/dist/src/dialog-close/DialogClose.js

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

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

@@ -0,0 +1,9 @@
+import './../../assets/src/layers/layers.css.ts.vanilla-79mCcHcb.css';
+import './../../assets/src/dialog-content/DialogContent.css.ts.vanilla-4xWP5FmU.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var close = recipeRuntime({base:[{rounded:'full'},'_19noatv']});
+var content = recipeRuntime({base:[{bg:'bg.default',display:'flex',flexDirection:'column',rounded:'lg',shadow:'md',z:'popover'},'_19w42s6'],variants:{size:{sm:'qwb8lg',md:'_1mjdcco',lg:'_1jo2441'}}});
+var overlay = recipeRuntime({base:[{bg:'bg.overlay',z:'popover'},'iuyqlh']});
+
+export { close, content, overlay };

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

@@ -0,0 +1,37 @@
+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 { Box } from '../box/Box.js';
+import { Button } from '../button/Button.js';
+import { useDialogContext } from '../dialog-context/DialogContext.js';
+import { IconX } from '../icons/IconX.js';
+import { Transition } from '../transition/Transition.js';
+import { overlay, content, close } from './DialogContent-css.js';
+
+const DialogContent = forwardRef(
+  ({ children, size = "md", withCloseButton = false, ...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(Box, { asChild: true, ...overlay(), children: /* @__PURE__ */ jsx(RadixDialog.Overlay, {}) }) }),
+      /* @__PURE__ */ jsx(Transition, { "data-side": "bottom", type: "fade", children: /* @__PURE__ */ jsx(Box, { asChild: true, ...content({ size }), 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, {})
+          }
+        )
+      ] }) }) })
+    ] }) });
+  }
+);
+DialogContent.displayName = "@optiaxiom/react/DialogContent";
+
+export { DialogContent };

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

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

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

@@ -0,0 +1,23 @@
+import { jsx } from 'react/jsx-runtime';
+import * as RadixDialog from '@radix-ui/react-dialog';
+import { forwardRef } from 'react';
+import { Text } from '../text/Text.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 })
+    }
+  );
+});
+DialogDescription.displayName = "@optiaxiom/react/DialogDescription";
+
+export { DialogDescription };

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

@@ -1,4 +1,4 @@
-import './../assets/src/styles/layers.css.ts.vanilla-D5zCXZwe.css';
+import './../../assets/src/layers/layers.css.ts.vanilla-79mCcHcb.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/{dialog-footer → src/dialog-footer}/DialogFooter.js

@@ -4,8 +4,8 @@ import { Flex } from '../flex/Flex.js';
 import { footer } from './DialogFooter-css.js';
 
 const DialogFooter = forwardRef(
-  ({ children, ...props }, ref) => {
-    return /* @__PURE__ */ jsx(Flex, { ref, ...footer(), ...props, children });
+  ({ children, className, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(Flex, { ref, ...footer({}, className), ...props, children });
   }
 );
 DialogFooter.displayName = "@optiaxiom/react/DialogFooter";

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

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

package/dist/src/dialog-trigger/DialogTrigger.js

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

package/dist/src/disclosure/Disclosure.js

@@ -0,0 +1,13 @@
+import { jsx } from 'react/jsx-runtime';
+import * as RadixCollapsible from '@radix-ui/react-collapsible';
+import { forwardRef } from 'react';
+import { Box } from '../box/Box.js';
+
+const Disclosure = forwardRef(
+  ({ children, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(Box, { asChild: true, ref, ...props, children: /* @__PURE__ */ jsx(RadixCollapsible.Root, { children }) });
+  }
+);
+Disclosure.displayName = "@optiaxiom/react/Disclosure";
+
+export { Disclosure };

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

@@ -0,0 +1,7 @@
+import './../../assets/src/layers/layers.css.ts.vanilla-79mCcHcb.css';
+import './../../assets/src/disclosure-content/DisclosureContent.css.ts.vanilla-5Qn4T1yb.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var content = recipeRuntime({base:[{overflow:'hidden'},'v7ma7m']});
+
+export { content };

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

@@ -0,0 +1,12 @@
+import { jsx } from 'react/jsx-runtime';
+import * as RadixCollapsible from '@radix-ui/react-collapsible';
+import { forwardRef } from 'react';
+import { Box } from '../box/Box.js';
+import { content } from './DisclosureContent-css.js';
+
+const DisclosureContent = forwardRef(({ children, className, ...props }, ref) => {
+  return /* @__PURE__ */ jsx(Box, { asChild: true, ref, ...content({}, className), ...props, children: /* @__PURE__ */ jsx(RadixCollapsible.Content, { children: /* @__PURE__ */ jsx(Box, { color: "fg.default", fontSize: "md", p: "xs", pt: "0", children }) }) });
+});
+DisclosureContent.displayName = "@optiaxiom/react/DisclosureContent";
+
+export { DisclosureContent };

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

@@ -0,0 +1,8 @@
+import './../../assets/src/layers/layers.css.ts.vanilla-79mCcHcb.css';
+import './../../assets/src/disclosure-trigger/DisclosureTrigger.css.ts.vanilla-DO1ghUoN.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var icon = recipeRuntime({base:[{transition:'transform'}],variants:{chevronPosition:{end:'_6jyogq',start:'_1diw4q4'}}});
+var trigger = recipeRuntime({base:[{flexDirection:'row',fontSize:'md',fontWeight:'500',gap:'4',p:'xs',px:'4',rounded:'md',textAlign:'start',w:'full'},'_151yujg']});
+
+export { icon, trigger };

package/dist/src/disclosure-trigger/DisclosureTrigger.js

@@ -0,0 +1,27 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import * as RadixCollapsible from '@radix-ui/react-collapsible';
+import { forwardRef } from 'react';
+import { Box } from '../box/Box.js';
+import { Flex } from '../flex/Flex.js';
+import { IconAngleDown } from '../icons/IconAngleDown.js';
+import { IconAngleRight } from '../icons/IconAngleRight.js';
+import { extractSprinkles } from '../sprinkles/extractSprinkles.js';
+import '../sprinkles/sprinkles.js';
+import '../sprinkles/sprinklesMerge.js';
+import { trigger, icon } from './DisclosureTrigger-css.js';
+
+const DisclosureTrigger = forwardRef(
+  ({ addonAfter, addonBefore, chevronPosition = "start", children, ...props }, ref) => {
+    const { restProps, sprinkleProps } = extractSprinkles(props);
+    const startIcon = addonBefore || chevronPosition === "start" && !addonAfter && /* @__PURE__ */ jsx(IconAngleRight, {});
+    const endIcon = addonAfter || chevronPosition === "end" && /* @__PURE__ */ jsx(IconAngleDown, {});
+    return /* @__PURE__ */ jsx(Flex, { asChild: true, ...trigger(), ...sprinkleProps, children: /* @__PURE__ */ jsxs(RadixCollapsible.Trigger, { ref, ...restProps, children: [
+      startIcon && /* @__PURE__ */ jsx(Box, { asChild: true, ...icon({ chevronPosition }), children: startIcon }),
+      /* @__PURE__ */ jsx(Box, { flex: "1", px: "4", children }),
+      endIcon && /* @__PURE__ */ jsx(Box, { asChild: true, ...icon({ chevronPosition }), children: endIcon })
+    ] }) });
+  }
+);
+DisclosureTrigger.displayName = "@optiaxiom/react/DisclosureTrigger";
+
+export { DisclosureTrigger };

package/dist/src/downshift/useCombobox.js

@@ -0,0 +1,11 @@
+import { useCombobox as useCombobox$1 } from 'downshift';
+import { usePortalPatch } from './usePortalPatch.js';
+
+function useCombobox(props) {
+  return useCombobox$1({
+    ...props,
+    ...usePortalPatch(props)
+  });
+}
+
+export { useCombobox };

package/dist/src/downshift/useDelayedState.js

@@ -0,0 +1,26 @@
+import { useState, useRef, useEffect } from 'react';
+
+function useDelayedState(defaultValue, state) {
+  const [value, setValue] = useState(defaultValue);
+  const valueRef = useRef();
+  useEffect(() => {
+    if (valueRef.current !== void 0) {
+      setValue(valueRef.current);
+      valueRef.current = void 0;
+    }
+  }, [state]);
+  return [
+    value,
+    (value2) => {
+      if (state) {
+        valueRef.current = void 0;
+        setValue(value2);
+      } else {
+        valueRef.current = value2;
+      }
+    },
+    valueRef
+  ];
+}
+
+export { useDelayedState };

package/dist/src/downshift/useForceRerender.js

@@ -0,0 +1,12 @@
+import { useState, useEffect } from 'react';
+
+function useForceRerender(state) {
+  const [, setState] = useState(false);
+  useEffect(() => {
+    if (state) {
+      setState((flag) => !flag);
+    }
+  }, [state]);
+}
+
+export { useForceRerender };

package/dist/src/downshift/usePortalPatch.js

@@ -0,0 +1,18 @@
+import { useDelayedState } from './useDelayedState.js';
+import { useForceRerender } from './useForceRerender.js';
+
+function usePortalPatch(props) {
+  const [highlightedIndex, setHighlightedIndex] = useDelayedState(
+    -1,
+    props.isOpen
+  );
+  useForceRerender(props.isOpen);
+  return {
+    highlightedIndex,
+    onHighlightedIndexChange({ highlightedIndex: highlightedIndex2 }) {
+      setHighlightedIndex(highlightedIndex2);
+    }
+  };
+}
+
+export { usePortalPatch };

package/dist/src/downshift/useSelect.js

@@ -0,0 +1,11 @@
+import { useSelect as useSelect$1 } from 'downshift';
+import { usePortalPatch } from './usePortalPatch.js';
+
+function useSelect(props) {
+  return useSelect$1({
+    ...props,
+    ...usePortalPatch(props)
+  });
+}
+
+export { useSelect };

package/dist/src/drawer/Drawer-css.js

@@ -0,0 +1,9 @@
+import './../../assets/src/layers/layers.css.ts.vanilla-79mCcHcb.css';
+import './../../assets/src/drawer/Drawer.css.ts.vanilla-Cf7PEhhe.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var close = recipeRuntime({base:[{rounded:'full'},'_1en8o14']});
+var content = recipeRuntime({base:[{bg:'bg.default',display:'flex',flexDirection:'column',shadow:'md',z:'popover'},'_1bijq6z'],variants:{position:{bottom:[{borderT:'1'},'_1uhkhmk'],left:[{borderR:'1',h:'full',maxW:['full','lg'],w:['full','3/4']},'_15os8rd'],right:[{borderL:'1',h:'full',maxW:['full','lg'],w:['full','3/4']},'znl702']}}});
+var overlay = recipeRuntime({base:[{bg:'bg.overlay',z:'popover'},'_1864qh5']});
+
+export { close, content, overlay };

package/dist/src/drawer/Drawer.js

@@ -0,0 +1,55 @@
+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 { Box } from '../box/Box.js';
+import { Button } from '../button/Button.js';
+import { IconX } from '../icons/IconX.js';
+import { Transition } from '../transition/Transition.js';
+import { overlay, content, close } from './Drawer-css.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(Box, { asChild: true, ...overlay(), children: /* @__PURE__ */ jsx(RadixDialog.Overlay, {}) }) }),
+      /* @__PURE__ */ jsx(
+        Transition,
+        {
+          "data-side": mapPositionToTransitionSide[position],
+          type: "fade",
+          children: /* @__PURE__ */ jsx(Box, { asChild: true, ...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, {})
+              }
+            )
+          ] }) })
+        }
+      )
+    ] }) }) });
+  }
+);
+Drawer.displayName = "@optiaxiom/react/Drawer";
+
+export { Drawer };

package/dist/src/drawer-body/DrawerBody.js

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

package/dist/src/drawer-footer/DrawerFooter.js

@@ -0,0 +1,24 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Flex } from '../flex/Flex.js';
+
+const DrawerFooter = forwardRef(
+  ({ children, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      Flex,
+      {
+        borderT: "1",
+        flexDirection: "row",
+        gap: "md",
+        justifyContent: "end",
+        p: "md",
+        ref,
+        ...props,
+        children
+      }
+    );
+  }
+);
+DrawerFooter.displayName = "@optiaxiom/react/DrawerFooter";
+
+export { DrawerFooter };

package/dist/src/drawer-title/DrawerTitle.js

@@ -0,0 +1,18 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import * as RadixDialog from '@radix-ui/react-dialog';
+import { forwardRef } from 'react';
+import { Flex } from '../flex/Flex.js';
+import { Heading } from '../heading/Heading.js';
+import { Text } from '../text/Text.js';
+
+const DrawerTitle = forwardRef(
+  ({ children, description, ...props }, ref) => {
+    return /* @__PURE__ */ jsxs(Flex, { gap: "xs", pb: "md", pt: "lg", px: "lg", ref, ...props, children: [
+      /* @__PURE__ */ jsx(Heading, { asChild: true, level: "4", children: /* @__PURE__ */ jsx(RadixDialog.Title, { children }) }),
+      /* @__PURE__ */ jsx(Text, { asChild: true, empty: "hidden", fontWeight: "400", children: /* @__PURE__ */ jsx(RadixDialog.Description, { children: description }) })
+    ] });
+  }
+);
+DrawerTitle.displayName = "@optiaxiom/react/DrawerTitle";
+
+export { DrawerTitle };

package/dist/src/dropdown-menu/DropdownMenu.js

@@ -0,0 +1,22 @@
+import { jsx } from 'react/jsx-runtime';
+import * as RadixMenu from '@radix-ui/react-dropdown-menu';
+import { useControllableState } from '@radix-ui/react-use-controllable-state';
+import { DropdownMenuContextProvider } from '../dropdown-menu-context/DropdownMenuContext.js';
+
+function DropdownMenu({
+  children,
+  defaultOpen,
+  onOpenChange,
+  open: openProp,
+  ...props
+}) {
+  const [open, setOpen] = useControllableState({
+    defaultProp: defaultOpen,
+    onChange: onOpenChange,
+    prop: openProp
+  });
+  return /* @__PURE__ */ jsx(RadixMenu.Root, { onOpenChange: setOpen, open, ...props, children: /* @__PURE__ */ jsx(DropdownMenuContextProvider, { open, children }) });
+}
+DropdownMenu.displayName = "@optiaxiom/react/DropdownMenu";
+
+export { DropdownMenu };

package/dist/src/dropdown-menu-content/DropdownMenuContent.js

@@ -0,0 +1,22 @@
+import { jsx } from 'react/jsx-runtime';
+import * as RadixMenu from '@radix-ui/react-dropdown-menu';
+import { forwardRef } from 'react';
+import { useDropdownMenuContext } from '../dropdown-menu-context/DropdownMenuContext.js';
+import { MenuContentBase } from '../menu-content-base/MenuContentBase.js';
+
+const DropdownMenuContent = forwardRef(({ align = "start", children, sideOffset = 2, ...props }, ref) => {
+  const { open } = useDropdownMenuContext("DropdownMenuContent");
+  return /* @__PURE__ */ jsx(
+    MenuContentBase,
+    {
+      enableExitAnimation: true,
+      open,
+      provider: "dropdown-menu",
+      ...props,
+      children: /* @__PURE__ */ jsx(RadixMenu.Content, { align, ref, sideOffset, children })
+    }
+  );
+});
+DropdownMenuContent.displayName = "@optiaxiom/react/DropdownMenuContent";
+
+export { DropdownMenuContent };

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

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