@optiaxiom/react 0.12.0 → 0.12.2

package/dist/packages/react/src/card-image/CardImage.js

@@ -0,0 +1,27 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Box } from '../box/Box.js';
+import '../sprinkles/sprinkles.js';
+import '../sprinkles/sprinklesMerge.js';
+import { useCardContext } from '../card-context/CardContext.js';
+import { cardImage } from './CardImage-css.js';
+
+const CardImage = forwardRef(
+  ({ alt, asChild, children, className, src, ...props }, ref) => {
+    const { orientation } = useCardContext("CardImage");
+    return /* @__PURE__ */ jsx(
+      Box,
+      {
+        asChild: true,
+        ref,
+        ...cardImage({ orientation }, className),
+        ...props,
+        children: asChild ? children : /* @__PURE__ */ jsx("img", { alt, src })
+      }
+    );
+  }
+);
+CardImage.displayName = "@optiaxiom/react/CardImage";
+
+export { CardImage };

package/dist/packages/react/src/card-overflow/CardOverflow-css.js

@@ -0,0 +1,7 @@
+import './../../../../assets/src/layers/layers.css.ts.vanilla-NRNXWe4M.css';
+import './../../../../assets/src/card-overflow/CardOverflow.css.ts.vanilla-CjQa7Jnq.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var cardOverflow = recipeRuntime({base:[{alignSelf:'stretch'},'jnqpjh'],variants:{orientation:{horizontal:['_1t2mmr1'],vertical:['_1c5w48l']}}});
+
+export { cardOverflow };

package/dist/packages/react/src/card-overflow/CardOverflow.js

@@ -0,0 +1,26 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Box } from '../box/Box.js';
+import '../sprinkles/sprinkles.js';
+import '../sprinkles/sprinklesMerge.js';
+import { useCardContext } from '../card-context/CardContext.js';
+import { cardOverflow } from './CardOverflow-css.js';
+
+const CardOverflow = forwardRef(
+  ({ children, className, ...props }, ref) => {
+    const { orientation } = useCardContext("CardOverflow");
+    return /* @__PURE__ */ jsx(
+      Box,
+      {
+        ref,
+        ...cardOverflow({ orientation }, className),
+        ...props,
+        children
+      }
+    );
+  }
+);
+CardOverflow.displayName = "@optiaxiom/react/CardOverflow";
+
+export { CardOverflow };

package/dist/packages/react/src/card-title/CardTitle.js

@@ -0,0 +1,28 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { Slot } from '@radix-ui/react-slot';
+import { forwardRef } from 'react';
+import { useCardContext } from '../card-context/CardContext.js';
+import { Heading } from '../heading/Heading.js';
+
+const CardTitle = forwardRef(
+  ({ asChild, children, ...props }, ref) => {
+    const Comp = asChild ? Slot : "h2";
+    const { labelId } = useCardContext("CardTitle");
+    return /* @__PURE__ */ jsx(
+      Heading,
+      {
+        asChild: true,
+        fontWeight: "500",
+        id: labelId,
+        level: "6",
+        ref,
+        ...props,
+        children: /* @__PURE__ */ jsx(Comp, { children })
+      }
+    );
+  }
+);
+CardTitle.displayName = "@optiaxiom/react/CardTitle";
+
+export { CardTitle };

package/dist/packages/react/src/checkbox/Checkbox.js

@@ -1,37 +1,22 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
-import { Box } from '../box/Box.js';
-import { extractBoxProps } from '../box/extractBoxProps.js';
-import { CheckboxCheck } from '../icons/CheckboxCheck.js';
-import { IconMinus } from '../icons/IconMinus.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';
+import { CheckboxContent } from '../checkbox-content/CheckboxContent.js';
+import { CheckboxControl } from '../checkbox-control/CheckboxControl.js';
+import { CheckboxRoot } from '../checkbox-root/CheckboxRoot.js';
 
 const Checkbox = forwardRef(
-  ({ children, className, description, indeterminate, ...props }, ref) => {
-    const { boxProps, restProps } = extractBoxProps(props);
-    return /* @__PURE__ */ jsxs(
-      ToggleInput,
-      {
-        description: !!description,
-        ...checkbox({}, className),
-        ...boxProps,
-        children: [
-          /* @__PURE__ */ jsx(ToggleInputHiddenInput, { ref, ...input(), ...restProps }),
-          /* @__PURE__ */ jsx(ToggleInputControl, { ...control({ shift: Boolean(children) }), children: /* @__PURE__ */ jsx(Box, { ...indicator(), children: /* @__PURE__ */ jsx(Box, { asChild: true, ...icon(), children: indeterminate ? /* @__PURE__ */ jsx(IconMinus, {}) : /* @__PURE__ */ jsx(CheckboxCheck, {}) }) }) }),
-          (children || description) && /* @__PURE__ */ jsxs(ToggleInputContent, { children: [
-            children && /* @__PURE__ */ jsx(ToggleInputLabel, { children }),
-            description && /* @__PURE__ */ jsx(ToggleInputDescription, { children: description })
-          ] })
-        ]
-      }
-    );
+  ({ children, description, indeterminate, ...props }, ref) => {
+    return /* @__PURE__ */ jsxs(CheckboxRoot, { description: !!description, ref, ...props, children: [
+      /* @__PURE__ */ jsx(
+        CheckboxControl,
+        {
+          indeterminate,
+          shift: Boolean(children)
+        }
+      ),
+      (children || description) && /* @__PURE__ */ jsx(CheckboxContent, { description, children })
+    ] });
   }
 );
 Checkbox.displayName = "@optiaxiom/react/Checkbox";

package/dist/packages/react/src/checkbox-content/CheckboxContent.js

@@ -0,0 +1,16 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { ToggleInputContent } from '../toggle-input-content/ToggleInputContent.js';
+import { ToggleInputDescription } from '../toggle-input-description/ToggleInputDescription.js';
+import { ToggleInputLabel } from '../toggle-input-label/ToggleInputLabel.js';
+
+const CheckboxContent = forwardRef(({ children, description, ...props }, ref) => {
+  return /* @__PURE__ */ jsxs(ToggleInputContent, { ref, ...props, children: [
+    children && /* @__PURE__ */ jsx(ToggleInputLabel, { children }),
+    description && /* @__PURE__ */ jsx(ToggleInputDescription, { children: description })
+  ] });
+});
+CheckboxContent.displayName = "@optiaxiom/react/CheckboxContent";
+
+export { CheckboxContent };

package/dist/packages/react/src/checkbox-control/CheckboxControl-css.js

@@ -0,0 +1,11 @@
+import './../../../../assets/src/layers/layers.css.ts.vanilla-NRNXWe4M.css';
+import './../../../../assets/src/avatar-group/AvatarGroup.css.ts.vanilla-Df83DDkl.css';
+import './../../../../assets/src/toggle-input/ToggleInput.css.ts.vanilla-CIa4x7XX.css';
+import './../../../../assets/src/checkbox-control/CheckboxControl.css.ts.vanilla-EUbefBW5.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var control = recipeRuntime({base:[{color:'fg.default.inverse',display:'grid',rounded:'xs',size:'2xs'},'ap866'],variants:{shift:{false:{},true:{mt:'2'}}}});
+var icon = recipeRuntime({base:[{transition:'all'},'nlm02m']});
+var indicator = recipeRuntime({base:[{alignItems:'center',display:'flex',justifyContent:'center',p:'2',size:'full'}]});
+
+export { control, icon, indicator };

package/dist/packages/react/src/checkbox-control/CheckboxControl.js

@@ -0,0 +1,25 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Box } from '../box/Box.js';
+import '../sprinkles/sprinkles.js';
+import '../sprinkles/sprinklesMerge.js';
+import { CheckboxCheck } from '../icons/CheckboxCheck.js';
+import { IconMinus } from '../icons/IconMinus.js';
+import { ToggleInputControl } from '../toggle-input-control/ToggleInputControl.js';
+import { control, indicator, icon } from './CheckboxControl-css.js';
+
+const CheckboxControl = forwardRef(({ className, indeterminate, shift, ...props }, ref) => {
+  return /* @__PURE__ */ jsx(
+    ToggleInputControl,
+    {
+      ref,
+      ...control({ shift }, className),
+      ...props,
+      children: /* @__PURE__ */ jsx(Box, { ...indicator(), children: /* @__PURE__ */ jsx(Box, { asChild: true, ...icon(), children: indeterminate ? /* @__PURE__ */ jsx(IconMinus, {}) : /* @__PURE__ */ jsx(CheckboxCheck, {}) }) })
+    }
+  );
+});
+CheckboxControl.displayName = "@optiaxiom/react/CheckboxControl";
+
+export { CheckboxControl };

package/dist/packages/react/src/checkbox-root/CheckboxRoot.js

@@ -0,0 +1,20 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import '../box/Box.js';
+import { extractBoxProps } from '../box/extractBoxProps.js';
+import { ToggleInput } from '../toggle-input/ToggleInput.js';
+import { ToggleInputHiddenInput } from '../toggle-input-hidden-input/ToggleInputHiddenInput.js';
+
+const CheckboxRoot = forwardRef(
+  ({ children, description, ...props }, ref) => {
+    const { boxProps, restProps } = extractBoxProps(props);
+    return /* @__PURE__ */ jsxs(ToggleInput, { description: !!description, ...boxProps, children: [
+      /* @__PURE__ */ jsx(ToggleInputHiddenInput, { ref, ...restProps }),
+      children
+    ] });
+  }
+);
+CheckboxRoot.displayName = "@optiaxiom/react/CheckboxRoot";
+
+export { CheckboxRoot };

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

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-B-b4u8-T.css';
-import './../../../../assets/src/code/Code.css.ts.vanilla-BXlzYIyA.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-NRNXWe4M.css';
+import './../../../../assets/src/code/Code.css.ts.vanilla-qdMaZfSg.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var code = recipeRuntime({base:[{fontWeight:'600'},'nyrbee']});
+var code = recipeRuntime({base:[{fontWeight:'600'},'_1yn1aw']});
 
 export { code };

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

@@ -2,10 +2,10 @@
 import { jsx } from 'react/jsx-runtime';
 import { useComposedRefs } from '@radix-ui/react-compose-refs';
 import { forwardRef, useRef, useEffect } from 'react';
+import { AngleMenuButton } from '../angle-menu-button/AngleMenuButton.js';
 import { useComboboxContext } from '../combobox-context/ComboboxContext.js';
 import '../field-context/FieldContext.js';
 import { useFieldContext } from '../field-context/useFieldContext.js';
-import { MenuButton } from '../menu-button/MenuButton.js';
 
 const ComboboxTrigger = forwardRef(({ asChild, children, ...props }, outerRef) => {
   const { components, setOpen } = useComboboxContext("ComboboxTrigger");
@@ -40,7 +40,7 @@ const ComboboxTrigger = forwardRef(({ asChild, children, ...props }, outerRef) =
       ref,
       role: "combobox",
       ...props,
-      children: asChild ? children : /* @__PURE__ */ jsx(MenuButton, { children })
+      children: asChild ? children : /* @__PURE__ */ jsx(AngleMenuButton, { children })
     }
   );
 });

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

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-B-b4u8-T.css';
-import './../../../../assets/src/command-focusable-item/CommandFocusableItem.css.ts.vanilla-Detvcg4P.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-NRNXWe4M.css';
+import './../../../../assets/src/command-focusable-item/CommandFocusableItem.css.ts.vanilla-CmfZcWSM.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var item = recipeRuntime({base:'_1ncyxii'});
+var item = recipeRuntime({base:'_15hs8yt'});
 
 export { item };

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

@@ -1,14 +1,14 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-B-b4u8-T.css';
-import './../../../../assets/src/table-row/TableRow.css.ts.vanilla-D4UKMjb1.css';
-import './../../../../assets/src/data-table/DataTable.css.ts.vanilla-C9XygBIH.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-NRNXWe4M.css';
+import './../../../../assets/src/table-row/TableRow.css.ts.vanilla-CltlUTCt.css';
+import './../../../../assets/src/data-table/DataTable.css.ts.vanilla-BW7p7Aza.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var cell = recipeRuntime({base:['_1nzag3n'],variants:{pinned:{left:'_1bnu03o',right:'_10mxbf2'},pinnedType:{body:'_1my72b4',header:{}}}});
-var cellOffsetVar = 'var(--efrrql)';
-var cellSizeVar = 'var(--_1vyyhnm)';
-var header = recipeRuntime({base:['ql4xvg']});
-var leftTotalSizeVar = 'var(--_1lf6yyx)';
-var rightTotalSizeVar = 'var(--_1lrm1a3)';
-var table = recipeRuntime({base:'nn08cv',variants:{pinned:{both:'_1yj37ux',left:'_18d4p1z',none:{},right:'_1e6th1o'}}});
+var cell = recipeRuntime({base:['_12jth8x'],variants:{pinned:{left:'sxorki',right:'_1b2s4tj'},pinnedType:{body:'_1ptclyt',header:{}}}});
+var cellOffsetVar = 'var(--_1a5p9u0)';
+var cellSizeVar = 'var(--_1qq2vdm)';
+var header = recipeRuntime({base:['kb9gxd']});
+var leftTotalSizeVar = 'var(--_796ixj)';
+var rightTotalSizeVar = 'var(--m8bc67)';
+var table = recipeRuntime({base:'qxpcka',variants:{pinned:{both:'_1l1etky',left:'uoqnl1',none:{},right:'t3zkvv'}}});
 
 export { cell, cellOffsetVar, cellSizeVar, header, leftTotalSizeVar, rightTotalSizeVar, table };

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

@@ -1,8 +1,8 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-B-b4u8-T.css';
-import './../../../../assets/src/data-table-header-cell/DataTableHeaderCell.css.ts.vanilla-b6PXu6yy.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-NRNXWe4M.css';
+import './../../../../assets/src/data-table-header-cell/DataTableHeaderCell.css.ts.vanilla-By6j_C-y.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var button = recipeRuntime({base:[{alignItems:'center',display:'flex',gap:'4',justifyContent:'start',textAlign:'start',transition:'colors',w:'full'},'l2wxe2','_1hdrfbd']});
-var icon = recipeRuntime({base:[{h:'12',mx:'2',transition:'opacity'},'zbsuo6'],variants:{active:{false:'_1pquptj',true:'ldfyoa'},muted:{false:{},true:'lmgqte'}}});
+var button = recipeRuntime({base:[{alignItems:'center',display:'flex',gap:'4',justifyContent:'start',textAlign:'start',transition:'colors',w:'full'},'_1e5jpda','_1xe4l5m']});
+var icon = recipeRuntime({base:[{h:'12',mx:'2',transition:'opacity'},'al46u9'],variants:{active:{false:'_8g22qz',true:'_1hwn07s'},muted:{false:{},true:'kynfhs'}}});
 
 export { button, icon };

package/dist/packages/react/src/date-input/DateInput.js

@@ -0,0 +1,112 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useComposedRefs } from '@radix-ui/react-compose-refs';
+import { useControllableState } from '@radix-ui/react-use-controllable-state';
+import { forwardRef, useState, useRef } from 'react';
+import { Calendar } from '../calendar/Calendar.js';
+import { IconCalendar } from '../icons/IconCalendar.js';
+import { Input } from '../input/Input.js';
+import { Popover } from '../popover/Popover.js';
+import { PopoverAnchor } from '../popover-anchor/PopoverAnchor.js';
+import { PopoverContent } from '../popover-content/PopoverContent.js';
+import { PopoverTrigger } from '../popover-trigger/PopoverTrigger.js';
+import '../utils/conditions.js';
+import '@radix-ui/react-slot';
+import { forceValueChange } from '../utils/forceValueChange.js';
+import { useCalendarSupported } from './useCalendarSupported.js';
+import { format, parse } from './utils.js';
+
+const DateInput = forwardRef(
+  ({ disabled, max, min, onChange, ...props }, outerRef) => {
+    const [open, setOpen] = useState(false);
+    const [value, setValue] = useControllableState({
+      defaultProp: props.defaultValue,
+      prop: props.value
+    });
+    const innerRef = useRef(null);
+    const ref = useComposedRefs(innerRef, outerRef);
+    const maxDate = max ? new Date(max) : undefined;
+    const minDate = min ? new Date(min) : undefined;
+    const supported = useCalendarSupported();
+    if (supported === null) {
+      return null;
+    } else if (!supported) {
+      return /* @__PURE__ */ jsx(
+        Input,
+        {
+          disabled,
+          max,
+          min,
+          onChange,
+          ref,
+          type: "date",
+          ...props
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxs(Popover, { onOpenChange: setOpen, open: !disabled && open, children: [
+      /* @__PURE__ */ jsx(PopoverAnchor, { children: /* @__PURE__ */ jsx(
+        Input,
+        {
+          addonAfter: !disabled && /* @__PURE__ */ jsx(
+            PopoverTrigger,
+            {
+              appearance: "subtle",
+              "aria-label": "Show date picker",
+              icon: /* @__PURE__ */ jsx(IconCalendar, {}),
+              size: "sm"
+            }
+          ),
+          disabled,
+          max,
+          min,
+          onChange: (event) => {
+            onChange?.(event);
+            setValue(event.target.value);
+          },
+          onClick: (e) => {
+            e.preventDefault();
+          },
+          onKeyDown: (e) => {
+            if (e.key === " ") {
+              e.preventDefault();
+              setOpen(true);
+            }
+          },
+          ref,
+          type: "date",
+          ...props
+        }
+      ) }),
+      /* @__PURE__ */ jsx(
+        PopoverContent,
+        {
+          onCloseAutoFocus: (event) => {
+            event.preventDefault();
+            innerRef.current?.focus();
+          },
+          children: /* @__PURE__ */ jsx(
+            Calendar,
+            {
+              max: maxDate,
+              min: minDate,
+              onValueChange: (date) => {
+                if (!date) {
+                  return;
+                }
+                if (innerRef.current) {
+                  forceValueChange(innerRef?.current, format(date));
+                }
+                setOpen(false);
+              },
+              value: parse(value)
+            }
+          )
+        }
+      )
+    ] });
+  }
+);
+DateInput.displayName = "@optiaxiom/react/DateInput";
+
+export { DateInput };

package/dist/packages/react/src/date-input/useCalendarSupported.js

@@ -0,0 +1,12 @@
+"use client";
+import { useState, useEffect } from 'react';
+
+const useCalendarSupported = () => {
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+  return mounted ? CSS.supports("selector(::-webkit-datetime-edit)") : null;
+};
+
+export { useCalendarSupported };

package/dist/packages/react/src/date-input/utils.js

@@ -0,0 +1,10 @@
+function format(date) {
+  return new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate())).toISOString().split("T")[0];
+}
+function parse(str) {
+  const rawDate = str && typeof str === "string" ? new Date(str) : undefined;
+  return isValidDate(rawDate) ? new Date(rawDate.getTime() + (/* @__PURE__ */ new Date()).getTimezoneOffset() * 60 * 1e3) : undefined;
+}
+const isValidDate = (date) => date ? !isNaN(+date) : false;
+
+export { format, parse };

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

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-B-b4u8-T.css';
-import './../../../../assets/src/dialog-content/DialogContent.css.ts.vanilla-CpyLSTLv.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-NRNXWe4M.css';
+import './../../../../assets/src/dialog-content/DialogContent.css.ts.vanilla-DvZBl__h.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var backdrop = recipeRuntime({variants:{hidden:{false:{},true:'pvdziy'}}});
-var content = recipeRuntime({base:[{color:'fg.default',display:'flex',flexDirection:'column'},'_1skr6b9'],variants:{size:{sm:'bvhydr',md:'k8oeag',lg:'_12k9f02',fullscreen:'w1wppg'}}});
-var nestedDialogCountVar = 'var(--kwq160)';
+var backdrop = recipeRuntime({variants:{hidden:{false:{},true:'mdq9fv'}}});
+var content = recipeRuntime({base:[{color:'fg.default',display:'flex',flexDirection:'column'},'_18xlw68'],variants:{size:{sm:'hy17aq',md:'_1qos7gv',lg:'_1ysnz5h',fullscreen:'dwoiam'}}});
+var nestedDialogCountVar = 'var(--_18gd7x8)';
 
 export { backdrop, content, nestedDialogCountVar };

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

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

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

@@ -1,10 +1,10 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-B-b4u8-T.css';
-import './../../../../assets/src/dialog-header/DialogHeader.css.ts.vanilla-DzTg90Ah.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-NRNXWe4M.css';
+import './../../../../assets/src/dialog-header/DialogHeader.css.ts.vanilla-PQBmklv5.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var actions = recipeRuntime({base:[{flexDirection:'row',gap:'8'},'_1h2h64o']});
-var close = recipeRuntime({base:['_1ieh5fg']});
-var description = recipeRuntime({base:[{color:'fg.secondary',fontWeight:'400',w:'full'},'sqp5d5']});
-var title = recipeRuntime({base:[{flex:'1',fontWeight:'500'},'_1yr7lzn']});
+var actions = recipeRuntime({base:[{flexDirection:'row',gap:'8'},'r09to9']});
+var close = recipeRuntime({base:['xollim']});
+var description = recipeRuntime({base:[{color:'fg.secondary',fontWeight:'400',w:'full'},'_1q6fmvy']});
+var title = recipeRuntime({base:[{flex:'1',fontWeight:'500'},'h63we6']});
 
 export { actions, close, description, title };

package/dist/packages/react/src/disclosure/Disclosure.js

@@ -1,6 +1,7 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
 import * as RadixCollapsible from '@radix-ui/react-collapsible';
+import { useControllableState } from '@radix-ui/react-use-controllable-state';
 import { forwardRef } from 'react';
 import { Box } from '../box/Box.js';
 import '../sprinkles/sprinkles.js';
@@ -8,8 +9,21 @@ import '../sprinkles/sprinklesMerge.js';
 import { DisclosureContextProvider } from '../disclosure-context/DisclosureContext.js';
 
 const Disclosure = forwardRef(
-  ({ children, ...props }, ref) => {
-    return /* @__PURE__ */ jsx(Box, { asChild: true, ref, ...props, children: /* @__PURE__ */ jsx(RadixCollapsible.Root, { children: /* @__PURE__ */ jsx(DisclosureContextProvider, { children }) }) });
+  ({ asChild, children, defaultOpen, onOpenChange, open: openProp, ...props }, ref) => {
+    const [open, setOpen] = useControllableState({
+      defaultProp: defaultOpen,
+      onChange: onOpenChange,
+      prop: openProp
+    });
+    return /* @__PURE__ */ jsx(DisclosureContextProvider, { open, children: /* @__PURE__ */ jsx(Box, { asChild: true, color: "fg.default", fontSize: "md", ref, ...props, children: /* @__PURE__ */ jsx(
+      RadixCollapsible.Root,
+      {
+        asChild,
+        onOpenChange: setOpen,
+        open,
+        children
+      }
+    ) }) });
   }
 );
 Disclosure.displayName = "@optiaxiom/react/Disclosure";

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

@@ -1,7 +1,8 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-B-b4u8-T.css';
-import './../../../../assets/src/disclosure-content/DisclosureContent.css.ts.vanilla-C5BQR6xg.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-NRNXWe4M.css';
+import './../../../../assets/src/disclosure-content/DisclosureContent.css.ts.vanilla-CpgnONR9.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var content = recipeRuntime({base:['xtlzji']});
+var inner = recipeRuntime({base:['_2552w1']});
+var outer = recipeRuntime({base:[{display:'grid'},'u0bdl0']});
 
-export { content };
+export { inner, outer };

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

@@ -1,16 +1,32 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
 import * as RadixCollapsible from '@radix-ui/react-collapsible';
-import { forwardRef } from 'react';
+import { forwardRef, useState, useEffect } from 'react';
 import { Box } from '../box/Box.js';
 import '../sprinkles/sprinkles.js';
 import '../sprinkles/sprinklesMerge.js';
 import { useDisclosureContext } from '../disclosure-context/DisclosureContext.js';
-import { content } from './DisclosureContent-css.js';
+import { Transition } from '../transition/Transition.js';
+import { TransitionGroup } from '../transition-group/TransitionGroup.js';
+import { outer, inner } from './DisclosureContent-css.js';
 
-const DisclosureContent = forwardRef(({ children, className, ...props }, ref) => {
-  useDisclosureContext("DisclosureContent");
-  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: "8", pt: "0", children }) }) });
+const DisclosureContent = forwardRef(({ children, ...props }, ref) => {
+  const { open } = useDisclosureContext("DisclosureContent");
+  const [skipAnimations, setSkipAnimations] = useState(Boolean(open));
+  useEffect(() => {
+    if (skipAnimations) {
+      requestAnimationFrame(() => setSkipAnimations(false));
+    }
+  }, [skipAnimations]);
+  return /* @__PURE__ */ jsx(TransitionGroup, { open, children: /* @__PURE__ */ jsx(
+    Transition,
+    {
+      "data-side": "bottom",
+      skipAnimations,
+      type: "slide",
+      children: /* @__PURE__ */ jsx(Box, { ...outer(), children: /* @__PURE__ */ jsx(Box, { asChild: true, ...inner(), children: /* @__PURE__ */ jsx(RadixCollapsible.Content, { forceMount: true, children: /* @__PURE__ */ jsx(Box, { p: "8", pt: "0", ref, ...props, children }) }) }) })
+    }
+  ) });
 });
 DisclosureContent.displayName = "@optiaxiom/react/DisclosureContent";
 

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

@@ -1,8 +1,8 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-B-b4u8-T.css';
-import './../../../../assets/src/disclosure-trigger/DisclosureTrigger.css.ts.vanilla-CLB2lqLn.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-NRNXWe4M.css';
+import './../../../../assets/src/disclosure-trigger/DisclosureTrigger.css.ts.vanilla-DW6VBXnj.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var icon = recipeRuntime({base:[{transition:'transform'}],variants:{chevronPosition:{end:'ll8jzi',start:'_1dmdf1j'}}});
-var trigger = recipeRuntime({base:[{flexDirection:'row',fontSize:'md',fontWeight:'500',gap:'4',p:'8',px:'4',rounded:'md',textAlign:'start',w:'full'},'_1ha78yx']});
+var icon = recipeRuntime({base:[{transition:'transform'}],variants:{chevronPosition:{end:'_3samyx',start:'day7ni'}}});
+var trigger = recipeRuntime({base:[{flexDirection:'row',fontSize:'md',fontWeight:'500',gap:'4',p:'8',px:'4',rounded:'md',textAlign:'start',w:'full',z:'10'},'tpjqr0']});
 
 export { icon, trigger };

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

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-B-b4u8-T.css';
-import './../../../../assets/src/drawer-actions/DrawerActions.css.ts.vanilla-D-zF-Km-.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-NRNXWe4M.css';
+import './../../../../assets/src/drawer-actions/DrawerActions.css.ts.vanilla-BY_xKCah.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var actions = recipeRuntime({base:[{flexDirection:'row-reverse',gap:'8'},'_1mbx0n5']});
+var actions = recipeRuntime({base:[{flexDirection:'row-reverse',gap:'8'},'_9ju96i']});
 
 export { actions };

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

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-B-b4u8-T.css';
-import './../../../../assets/src/drawer-content/DrawerContent.css.ts.vanilla-Bo1-a8Vm.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-NRNXWe4M.css';
+import './../../../../assets/src/drawer-content/DrawerContent.css.ts.vanilla-CuKbq0_S.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var content = recipeRuntime({base:[{color:'fg.default',display:'flex',flexDirection:'column'},'p9kroj'],variants:{position:{bottom:[{borderT:'1'},'_10rekng'],left:[{borderR:'1',h:'full',maxW:['full','lg'],w:['full','3/4']},'_10b1jsq'],right:[{borderL:'1',h:'full',maxW:['full','lg'],w:['full','3/4']},'xjjwwd']}}});
+var content = recipeRuntime({base:[{color:'fg.default',display:'flex',flexDirection:'column'},'_14w0qj9'],variants:{position:{bottom:[{borderT:'1'},'_183x200'],left:[{borderR:'1',h:'full',maxW:['full','lg'],w:['full','3/4']},'_1tjgims'],right:[{borderL:'1',h:'full',maxW:['full','lg'],w:['full','3/4']},'_1yk9fuo']}}});
 
 export { content };