@optiaxiom/react 0.1.0-next.8 → 0.1.0

package/dist/src/checkbox/Checkbox.js

@@ -0,0 +1,30 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import * as RadixCheckbox from '@radix-ui/react-checkbox';
+import { forwardRef } from 'react';
+import { Box } from '../box/Box.js';
+import { ControlBase } from '../control-base/ControlBase.js';
+import { IconCheck } from '../icons/IconCheck.js';
+import { IconMinus } from '../icons/IconMinus.js';
+import { checkbox, indicator, iconChecked, iconIndeterminate } from './Checkbox-css.js';
+
+const Checkbox = forwardRef(
+  ({ children, defaultChecked, description, id, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      ControlBase,
+      {
+        control: /* @__PURE__ */ jsx(Box, { asChild: true, ...checkbox(), children: /* @__PURE__ */ jsx(RadixCheckbox.Root, { defaultChecked, children: /* @__PURE__ */ jsx(Box, { asChild: true, ...indicator(), children: /* @__PURE__ */ jsxs(RadixCheckbox.Indicator, { children: [
+          /* @__PURE__ */ jsx(Box, { asChild: true, ...iconChecked(), children: /* @__PURE__ */ jsx(IconCheck, {}) }),
+          /* @__PURE__ */ jsx(Box, { asChild: true, ...iconIndeterminate(), children: /* @__PURE__ */ jsx(IconMinus, {}) })
+        ] }) }) }) }),
+        description,
+        id,
+        ref,
+        ...props,
+        children
+      }
+    );
+  }
+);
+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-KObJMImw.css';
+import './../../assets/src/code/Code.css.ts.vanilla-CP53j-Jc.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var code = recipeRuntime({base:[{bg:'bg.secondary',display:'inline-block',px:'4',rounded:'sm'},'c8go2']});
+
+export { code };

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

@@ -2,24 +2,16 @@ import { jsx } from 'react/jsx-runtime';
 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.js';
+import '../sprinkles/sprinklesMerge.js';
 import { code } from './Code-css.js';
 
 const Code = forwardRef(
   ({ asChild, children, className, ...props }, ref) => {
     const Comp = asChild ? Slot : "code";
-    return /* @__PURE__ */ jsx(
-      Box,
-      {
-        asChild: true,
-        bg: "bg.neutral",
-        display: "inline-block",
-        px: "4",
-        rounded: "sm",
-        ...code({}, className),
-        ...props,
-        children: /* @__PURE__ */ jsx(Comp, { ref, children })
-      }
-    );
+    const { restProps, sprinkleProps } = extractSprinkles(props);
+    return /* @__PURE__ */ jsx(Box, { asChild: true, ...code({}, className), ...sprinkleProps, children: /* @__PURE__ */ jsx(Comp, { ref, ...restProps, children }) });
   }
 );
 Code.displayName = "@optiaxiom/react/Code";

package/dist/src/combobox/Combobox.js

@@ -0,0 +1,40 @@
+import { jsx } from 'react/jsx-runtime';
+import { useControllableState } from '@radix-ui/react-use-controllable-state';
+import { ComboboxContextProvider } from '../combobox-context/ComboboxContext.js';
+import { Popover } from '../popover/Popover.js';
+
+function Combobox({
+  children,
+  defaultOpen,
+  defaultValue = "",
+  mode = "single",
+  onOpenChange,
+  onValueChange,
+  open: openProp,
+  value: valueProp
+}) {
+  const [open, setOpen] = useControllableState({
+    defaultProp: defaultOpen,
+    onChange: onOpenChange,
+    prop: openProp
+  });
+  const [value, setValue] = useControllableState({
+    defaultProp: defaultValue,
+    onChange: onValueChange,
+    prop: valueProp
+  });
+  return /* @__PURE__ */ jsx(
+    ComboboxContextProvider,
+    {
+      mode,
+      open,
+      setOpen,
+      setValue,
+      value,
+      children: /* @__PURE__ */ jsx(Popover, { onOpenChange: setOpen, open, children })
+    }
+  );
+}
+Combobox.displayName = "@optiaxiom/react/Combobox";
+
+export { Combobox };

package/dist/src/combobox-content/ComboboxContent.js

@@ -0,0 +1,24 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { useComboboxContext } from '../combobox-context/ComboboxContext.js';
+import { Command } from '../command/Command.js';
+import { CommandInput } from '../command-input/CommandInput.js';
+import { CommandSeparator } from '../command-separator/CommandSeparator.js';
+import { PopoverContent } from '../popover-content/PopoverContent.js';
+import { SearchInput } from '../search-input/SearchInput.js';
+
+const ComboboxContent = forwardRef(
+  ({ asChild, children, ...props }, ref) => {
+    const context = useComboboxContext("Combobox");
+    if (!context)
+      throw new Error("ComboboxContent must be used within a Combobox");
+    return /* @__PURE__ */ jsx(PopoverContent, { asChild: true, p: "0", ref, ...props, children: asChild ? children : /* @__PURE__ */ jsxs(Command, { children: [
+      /* @__PURE__ */ jsx(CommandInput, { asChild: true, children: /* @__PURE__ */ jsx(SearchInput, { m: "2" }) }),
+      /* @__PURE__ */ jsx(CommandSeparator, { alwaysRender: true }),
+      children
+    ] }) });
+  }
+);
+ComboboxContent.displayName = "@optiaxiom/react/ComboboxContent";
+
+export { ComboboxContent };

package/dist/src/combobox-context/ComboboxContext.js

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

package/dist/src/combobox-multi-trigger/ComboboxMultiTrigger.js

@@ -0,0 +1,34 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Badge } from '../badge/Badge.js';
+import { Box } from '../box/Box.js';
+import { Button } from '../button/Button.js';
+import { useComboboxContext } from '../combobox-context/ComboboxContext.js';
+import { ComboboxTrigger } from '../combobox-trigger/ComboboxTrigger.js';
+import { Flex } from '../flex/Flex.js';
+import { Text } from '../text/Text.js';
+
+const ComboboxMultiTrigger = forwardRef(({ maxDisplayedItems = 2, title = "Select Items", ...props }, ref) => {
+  const { mode, value } = useComboboxContext("Combobox");
+  return /* @__PURE__ */ jsx(ComboboxTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { alignItems: "center", ref, w: "full", ...props, children: /* @__PURE__ */ jsx(Box, { overflow: "hidden", children: mode === "multiple" && Array.isArray(value) && value.length > 0 ? /* @__PURE__ */ jsxs(
+    Flex,
+    {
+      alignItems: "center",
+      flexDirection: "row",
+      flexWrap: "wrap",
+      gap: "2",
+      overflow: "hidden",
+      children: [
+        value.slice(0, maxDisplayedItems).map((item) => /* @__PURE__ */ jsx(Box, { flex: "none", children: /* @__PURE__ */ jsx(Badge, { children: item }) }, item)),
+        value.length > maxDisplayedItems && /* @__PURE__ */ jsx(Box, { flex: "none", children: /* @__PURE__ */ jsxs(Text, { children: [
+          "+",
+          value.length - maxDisplayedItems,
+          " more"
+        ] }) })
+      ]
+    }
+  ) : /* @__PURE__ */ jsx(Text, { children: title }) }) }) });
+});
+ComboboxMultiTrigger.displayName = "@optiaxiom/react/ComboboxMultiTrigger";
+
+export { ComboboxMultiTrigger };

package/dist/src/combobox-single-trigger/ComboboxSingleTrigger.js

@@ -0,0 +1,13 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { useComboboxContext } from '../combobox-context/ComboboxContext.js';
+import { ComboboxTrigger } from '../combobox-trigger/ComboboxTrigger.js';
+import { MenuButton } from '../menu-button/MenuButton.js';
+
+const ComboboxSingleTrigger = forwardRef(({ title, ...props }, ref) => {
+  const { value } = useComboboxContext("Combobox");
+  return /* @__PURE__ */ jsx(ComboboxTrigger, { asChild: true, ref, ...props, children: /* @__PURE__ */ jsx(MenuButton, { children: value || title }) });
+});
+ComboboxSingleTrigger.displayName = "@optiaxiom/react/ComboboxSingleTrigger";
+
+export { ComboboxSingleTrigger };

package/dist/src/combobox-trigger/ComboboxTrigger.js

@@ -0,0 +1,21 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { useComboboxContext } from '../combobox-context/ComboboxContext.js';
+import { ComboboxMultiTrigger } from '../combobox-multi-trigger/ComboboxMultiTrigger.js';
+import { ComboboxSingleTrigger } from '../combobox-single-trigger/ComboboxSingleTrigger.js';
+import { PopoverTrigger } from '../popover-trigger/PopoverTrigger.js';
+
+const ComboboxTrigger = forwardRef(({ asChild, children, maxDisplayedItems = 2, title, ...props }, ref) => {
+  const { mode } = useComboboxContext("Combobox");
+  return /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, ref, children: asChild ? children : mode === "single" ? /* @__PURE__ */ jsx(ComboboxSingleTrigger, { title, ...props }) : mode === "multiple" ? /* @__PURE__ */ jsx(
+    ComboboxMultiTrigger,
+    {
+      maxDisplayedItems,
+      title,
+      ...props
+    }
+  ) : children });
+});
+ComboboxTrigger.displayName = "@optiaxiom/react/ComboboxTrigger";
+
+export { ComboboxTrigger };

package/dist/src/command/Command.js

@@ -0,0 +1,17 @@
+import { jsx } from 'react/jsx-runtime';
+import { Command as Command$1 } from 'cmdk';
+import { forwardRef } from 'react';
+import { Box } from '../box/Box.js';
+import { extractSprinkles } from '../sprinkles/extractSprinkles.js';
+import '../sprinkles/sprinkles.js';
+import '../sprinkles/sprinklesMerge.js';
+
+const Command = forwardRef(
+  ({ children, ...props }, ref) => {
+    const { restProps, sprinkleProps } = extractSprinkles(props);
+    return /* @__PURE__ */ jsx(Box, { asChild: true, ...sprinkleProps, children: /* @__PURE__ */ jsx(Command$1, { ref, ...restProps, children }) });
+  }
+);
+Command.displayName = "@optiaxiom/react/Command";
+
+export { Command };

package/dist/src/command-checkbox-item/CommandCheckboxItem.js

@@ -0,0 +1,58 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Box } from '../box/Box.js';
+import { Checkbox } from '../checkbox/Checkbox.js';
+import { useComboboxContext } from '../combobox-context/ComboboxContext.js';
+import { CommandItem } from '../command-item/CommandItem.js';
+
+const CommandCheckboxItem = forwardRef(({ children, disabled, onCheckedChange, value, ...props }, ref) => {
+  const {
+    mode,
+    setValue,
+    value: contextValue
+  } = useComboboxContext("ComboboxContext");
+  const isChecked = Array.isArray(contextValue) ? contextValue.includes(value) : contextValue === value;
+  const handleChange = () => {
+    const newChecked = !isChecked;
+    if (mode === "multiple") {
+      if (Array.isArray(contextValue)) {
+        setValue(
+          newChecked ? [...contextValue, value] : contextValue.filter((v) => v !== value)
+        );
+      } else {
+        setValue([value]);
+      }
+    } else {
+      setValue(newChecked ? value : "");
+    }
+    if (onCheckedChange) {
+      onCheckedChange(newChecked);
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    CommandItem,
+    {
+      "data-disabled": disabled ? "" : void 0,
+      "data-selected": isChecked ? "" : void 0,
+      disabled,
+      onSelect: handleChange,
+      ref,
+      value,
+      ...props,
+      children: /* @__PURE__ */ jsxs(Box, { alignItems: "center", display: "flex", w: "full", children: [
+        /* @__PURE__ */ jsx(
+          Checkbox,
+          {
+            checked: isChecked,
+            disabled,
+            onChange: handleChange
+          }
+        ),
+        /* @__PURE__ */ jsx(Box, { mt: "2", children })
+      ] })
+    }
+  );
+});
+CommandCheckboxItem.displayName = "@optiaxiom/react/CommandCheckboxItem";
+
+export { CommandCheckboxItem };

package/dist/src/command-empty/CommandEmpty.js

@@ -0,0 +1,17 @@
+import { jsx } from 'react/jsx-runtime';
+import { CommandEmpty as CommandEmpty$1 } from 'cmdk';
+import { forwardRef } from 'react';
+import { Box } from '../box/Box.js';
+import { extractSprinkles } from '../sprinkles/extractSprinkles.js';
+import '../sprinkles/sprinkles.js';
+import '../sprinkles/sprinklesMerge.js';
+
+const CommandEmpty = forwardRef(
+  ({ children, ...props }, ref) => {
+    const { restProps, sprinkleProps } = extractSprinkles(props);
+    return /* @__PURE__ */ jsx(Box, { asChild: true, ...sprinkleProps, children: /* @__PURE__ */ jsx(CommandEmpty$1, { ref, ...restProps, children: children || "No results found" }) });
+  }
+);
+CommandEmpty.displayName = "@optiaxiom/react/CommandEmpty";
+
+export { CommandEmpty };

package/dist/src/command-footer/CommandFooter-css.js

@@ -0,0 +1,6 @@
+import './../../assets/src/layers/layers.css.ts.vanilla-KObJMImw.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var footer = recipeRuntime({base:[{borderColor:'border.secondary',borderT:'1',flexDirection:'row',gap:'md',justifyContent:'space-between',p:'sm'}]});
+
+export { footer };

package/dist/src/command-footer/CommandFooter.js

@@ -0,0 +1,13 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Flex } from '../flex/Flex.js';
+import { footer } from './CommandFooter-css.js';
+
+const CommandFooter = forwardRef(
+  ({ children, className, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(Flex, { ref, ...footer({}, className), ...props, children });
+  }
+);
+CommandFooter.displayName = "@optiaxiom/react/CommandFooter";
+
+export { CommandFooter };

package/dist/src/command-group/CommandGroup.js

@@ -0,0 +1,17 @@
+import { jsx } from 'react/jsx-runtime';
+import { CommandGroup as CommandGroup$1 } from 'cmdk';
+import { forwardRef } from 'react';
+import { Box } from '../box/Box.js';
+import { extractSprinkles } from '../sprinkles/extractSprinkles.js';
+import '../sprinkles/sprinkles.js';
+import '../sprinkles/sprinklesMerge.js';
+
+const CommandGroup = forwardRef(
+  ({ children, ...props }, ref) => {
+    const { restProps, sprinkleProps } = extractSprinkles(props);
+    return /* @__PURE__ */ jsx(Box, { asChild: true, ...sprinkleProps, children: /* @__PURE__ */ jsx(CommandGroup$1, { ref, ...restProps, children }) });
+  }
+);
+CommandGroup.displayName = "@optiaxiom/react/CommandGroup";
+
+export { CommandGroup };

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

@@ -0,0 +1,17 @@
+import { jsx } from 'react/jsx-runtime';
+import { CommandInput as CommandInput$1 } from 'cmdk';
+import { forwardRef } from 'react';
+import { Box } from '../box/Box.js';
+import { extractSprinkles } from '../sprinkles/extractSprinkles.js';
+import '../sprinkles/sprinkles.js';
+import '../sprinkles/sprinklesMerge.js';
+
+const CommandInput = forwardRef(
+  ({ children, ...props }, ref) => {
+    const { restProps, sprinkleProps } = extractSprinkles(props);
+    return /* @__PURE__ */ jsx(Box, { asChild: true, ...sprinkleProps, children: /* @__PURE__ */ jsx(CommandInput$1, { ref, ...restProps, children }) });
+  }
+);
+CommandInput.displayName = "@optiaxiom/react/CommandInput";
+
+export { CommandInput };

package/dist/src/command-item/CommandItem-css.js

@@ -0,0 +1,7 @@
+import './../../assets/src/layers/layers.css.ts.vanilla-KObJMImw.css';
+import './../../assets/src/command-item/CommandItem.css.ts.vanilla-Uu0_1Rf_.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var item = recipeRuntime({base:[{alignItems:'center',display:'flex',flexDirection:'row',fontSize:'md',gap:'xs',p:'xs',rounded:'sm',transition:'colors'},'_43rr5f']});
+
+export { item };

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

@@ -0,0 +1,42 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { CommandItem as CommandItem$1 } from 'cmdk';
+import { forwardRef } from 'react';
+import { Box } from '../box/Box.js';
+import { useComboboxContext } from '../combobox-context/ComboboxContext.js';
+import { Flex } from '../flex/Flex.js';
+import { IconCheck } from '../icons/IconCheck.js';
+import { extractSprinkles } from '../sprinkles/extractSprinkles.js';
+import '../sprinkles/sprinkles.js';
+import '../sprinkles/sprinklesMerge.js';
+import { item } from './CommandItem-css.js';
+
+const CommandItem = forwardRef(
+  ({ children, className, onSelect, value, ...props }, ref) => {
+    const {
+      mode,
+      setOpen,
+      setValue,
+      value: contextValue
+    } = useComboboxContext("ComboboxContext");
+    const { restProps, sprinkleProps } = extractSprinkles(props);
+    const handleSelect = () => {
+      if (mode === "single") {
+        setOpen(false);
+        setValue(value);
+      } else if (mode === "multiple" && Array.isArray(contextValue)) {
+        const newValue = contextValue.includes(value) ? contextValue.filter((v) => v !== value) : [...contextValue, value];
+        setValue(newValue);
+      }
+      if (onSelect)
+        onSelect(value);
+    };
+    const isSelected = mode === "single" ? contextValue === value : Array.isArray(contextValue) && contextValue.includes(value);
+    return /* @__PURE__ */ jsx(Box, { asChild: true, ...item({}, className), ...sprinkleProps, children: /* @__PURE__ */ jsx(CommandItem$1, { onSelect: handleSelect, ref, ...restProps, children: /* @__PURE__ */ jsxs(Flex, { flexDirection: "row", justifyContent: "space-between", w: "full", children: [
+      children,
+      isSelected && mode === "single" && /* @__PURE__ */ jsx(IconCheck, {})
+    ] }) }) });
+  }
+);
+CommandItem.displayName = "@optiaxiom/react/CommandItem";
+
+export { CommandItem };

package/dist/src/command-list/CommandList-css.js

@@ -0,0 +1,7 @@
+import './../../assets/src/layers/layers.css.ts.vanilla-KObJMImw.css';
+import './../../assets/src/command-list/CommandList.css.ts.vanilla-DCUc2i8R.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var list = recipeRuntime({base:['_19nvkod']});
+
+export { list };

package/dist/src/command-list/CommandList.js

@@ -0,0 +1,18 @@
+import { jsx } from 'react/jsx-runtime';
+import { CommandList as CommandList$1 } from 'cmdk';
+import { forwardRef } from 'react';
+import { Box } from '../box/Box.js';
+import { extractSprinkles } from '../sprinkles/extractSprinkles.js';
+import '../sprinkles/sprinkles.js';
+import '../sprinkles/sprinklesMerge.js';
+import { list } from './CommandList-css.js';
+
+const CommandList = forwardRef(
+  ({ children, className, ...props }, ref) => {
+    const { restProps, sprinkleProps } = extractSprinkles(props);
+    return /* @__PURE__ */ jsx(Box, { asChild: true, ...list({}, className), ...sprinkleProps, children: /* @__PURE__ */ jsx(CommandList$1, { ref, ...restProps, children }) });
+  }
+);
+CommandList.displayName = "@optiaxiom/react/CommandList";
+
+export { CommandList };

package/dist/src/command-separator/CommandSeparator.js

@@ -0,0 +1,17 @@
+import { jsx } from 'react/jsx-runtime';
+import { CommandSeparator as CommandSeparator$1 } from 'cmdk';
+import { forwardRef } from 'react';
+import { Box } from '../box/Box.js';
+import { extractSprinkles } from '../sprinkles/extractSprinkles.js';
+import '../sprinkles/sprinkles.js';
+import '../sprinkles/sprinklesMerge.js';
+
+const CommandSeparator = forwardRef(
+  ({ children, ...props }, ref) => {
+    const { restProps, sprinkleProps } = extractSprinkles(props);
+    return /* @__PURE__ */ jsx(Box, { asChild: true, ...sprinkleProps, children: /* @__PURE__ */ jsx(CommandSeparator$1, { ref, ...restProps, children }) });
+  }
+);
+CommandSeparator.displayName = "@optiaxiom/react/CommandSeparator";
+
+export { CommandSeparator };

package/dist/src/control-base/ControlBase-css.js

@@ -0,0 +1,10 @@
+import './../../assets/src/layers/layers.css.ts.vanilla-KObJMImw.css';
+import './../../assets/src/control-base/ControlBase.css.ts.vanilla-BEz0zQpD.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var controlBase = recipeRuntime({base:[{display:'grid'},'_1k0g4bu']});
+var description = recipeRuntime({base:[{fontSize:'sm',pl:'xs'},'_1jcl9f8']});
+var indicator = recipeRuntime({base:['qndhmh','fr0r1n']});
+var label = recipeRuntime({base:[{alignItems:'center',display:'flex',overflow:'hidden',pl:'xs'},'jy5n0o']});
+
+export { controlBase, description, indicator, label };

package/dist/src/control-base/ControlBase.js

@@ -0,0 +1,38 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import * as RadixLabel from '@radix-ui/react-label';
+import { useId } from '@reach/auto-id';
+import { forwardRef, cloneElement } from 'react';
+import { Box } from '../box/Box.js';
+import { extractSprinkles } from '../sprinkles/extractSprinkles.js';
+import '../sprinkles/sprinkles.js';
+import '../sprinkles/sprinklesMerge.js';
+import { Text } from '../text/Text.js';
+import '../utils/conditions.js';
+import { fallbackSpan } from '../utils/fallbackSpan.js';
+import { controlBase, indicator, label, description } from './ControlBase-css.js';
+
+const ControlBase = forwardRef(
+  ({ children, className, control, description: description$1, id: idProp, ...props }, ref) => {
+    const { restProps, sprinkleProps } = extractSprinkles(props);
+    const id = useId(idProp);
+    return /* @__PURE__ */ jsxs(Box, { ref, ...controlBase({}, className), ...sprinkleProps, children: [
+      /* @__PURE__ */ jsx(Box, { asChild: true, ...indicator(), children: cloneElement(control, {
+        id,
+        ...restProps
+      }) }),
+      /* @__PURE__ */ jsx(Text, { asChild: true, ...label(), children: /* @__PURE__ */ jsx(RadixLabel.Root, { htmlFor: id, children }) }),
+      description$1 && /* @__PURE__ */ jsx(
+        Box,
+        {
+          asChild: true,
+          color: props.disabled ? "fg.disabled" : "fg.secondary",
+          ...description(),
+          children: fallbackSpan(description$1)
+        }
+      )
+    ] });
+  }
+);
+ControlBase.displayName = "@optiaxiom/react/ControlBase";
+
+export { ControlBase };

package/dist/src/dialog/Dialog.js

@@ -0,0 +1,32 @@
+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,
+  modal,
+  onOpenChange,
+  open: openProp,
+  ...props
+}) {
+  const [open, setOpen] = useControllableState({
+    defaultProp: defaultOpen,
+    onChange: onOpenChange,
+    prop: openProp
+  });
+  return /* @__PURE__ */ jsx(
+    RadixDialog.Root,
+    {
+      modal,
+      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,7 @@
+import './../../assets/src/layers/layers.css.ts.vanilla-KObJMImw.css';
+import './../../assets/src/dialog-body/DialogBody.css.ts.vanilla-6I4GFoY3.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var body = recipeRuntime({base:[{fontSize:'md',overflow:'auto',pb:'md',pt:'lg',px:'lg'},'_1spz9s7']});
+
+export { body };

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

@@ -0,0 +1,13 @@
+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 });
+  }
+);
+DialogBody.displayName = "@optiaxiom/react/DialogBody";
+
+export { 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-KObJMImw.css';
+import './../../assets/src/dialog-content/DialogContent.css.ts.vanilla-CuP-Hjp0.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var close = recipeRuntime({base:[{rounded:'full'},'_11ml7mu']});
+var content = recipeRuntime({base:[{bg:'bg.default',rounded:'lg',shadow:'md',z:'popover'},'du6br8'],variants:{size:{sm:'_4tcwt5',md:'_1rt2iib',lg:'zk0wz7'}}});
+var overlay = recipeRuntime({base:[{bg:'bg.overlay',z:'popover'},'fud5pb']});
+
+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 };