@optiaxiom/react 0.11.1 → 0.12.1

package/dist/packages/react/src/calendar/CalendarDayButton-css.js

@@ -0,0 +1,7 @@
+import './../../../../assets/src/layers/layers.css.ts.vanilla-xcn_ZlL-.css';
+import './../../../../assets/src/calendar/CalendarDayButton.css.ts.vanilla-CUUTx8Jk.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var button = recipeRuntime({base:{mt:'8'},variants:{outside:{false:{},true:'opsur'}}});
+
+export { button };

package/dist/packages/react/src/calendar/CalendarDayButton.js

@@ -0,0 +1,36 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { useRef, useEffect } from 'react';
+import { Button } from '../button/Button.js';
+import { button } from './CalendarDayButton-css.js';
+
+function CalendarDayButton({
+  children,
+  className,
+  color: _color,
+  day: _day,
+  modifiers,
+  ...props
+}) {
+  const ref = useRef(null);
+  useEffect(() => {
+    if (modifiers.focused) {
+      ref.current?.focus();
+    }
+  }, [modifiers.focused]);
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      appearance: modifiers.selected ? "primary" : "subtle",
+      "data-state": modifiers.today ? "active" : undefined,
+      ref,
+      square: true,
+      ...button({ outside: modifiers.outside }, className),
+      ...props,
+      children
+    }
+  );
+}
+CalendarDayButton.displayName = "@optiaxiom/react/CalendarDayButton";
+
+export { CalendarDayButton };

package/dist/packages/react/src/calendar/CalendarMonthCaption.js

@@ -0,0 +1,29 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { MonthCaption } from 'react-day-picker';
+import { Box } from '../box/Box.js';
+import '../sprinkles/sprinkles.js';
+import '../sprinkles/sprinklesMerge.js';
+
+function CalendarMonthCaption({
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      alignItems: "center",
+      asChild: true,
+      display: "flex",
+      fontSize: "lg",
+      fontWeight: "500",
+      h: "md",
+      justifyContent: "center",
+      mb: "16",
+      children: /* @__PURE__ */ jsx(MonthCaption, { ...props, children })
+    }
+  );
+}
+CalendarMonthCaption.displayName = "@optiaxiom/react/CalendarMonthCaption";
+
+export { CalendarMonthCaption };

package/dist/packages/react/src/calendar/CalendarMonthGrid.js

@@ -0,0 +1,16 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { MonthGrid } from 'react-day-picker';
+import { Box } from '../box/Box.js';
+import '../sprinkles/sprinkles.js';
+import '../sprinkles/sprinklesMerge.js';
+
+function CalendarMonthGrid({
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(Box, { asChild: true, children: /* @__PURE__ */ jsx(MonthGrid, { ...props, children }) });
+}
+CalendarMonthGrid.displayName = "@optiaxiom/react/CalendarMonthGrid";
+
+export { CalendarMonthGrid };

package/dist/packages/react/src/calendar/CalendarMonths-css.js

@@ -0,0 +1,7 @@
+import './../../../../assets/src/layers/layers.css.ts.vanilla-xcn_ZlL-.css';
+import './../../../../assets/src/calendar/CalendarMonths.css.ts.vanilla-w1O5QHbX.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var months = recipeRuntime({base:'_1yn9zy2'});
+
+export { months };

package/dist/packages/react/src/calendar/CalendarMonths.js

@@ -0,0 +1,14 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { Months } from 'react-day-picker';
+import { Box } from '../box/Box.js';
+import '../sprinkles/sprinkles.js';
+import '../sprinkles/sprinklesMerge.js';
+import { months } from './CalendarMonths-css.js';
+
+function CalendarMonths({ children, ...props }) {
+  return /* @__PURE__ */ jsx(Box, { asChild: true, ...months(), children: /* @__PURE__ */ jsx(Months, { ...props, children }) });
+}
+CalendarMonths.displayName = "@optiaxiom/react/CalendarMonths";
+
+export { CalendarMonths };

package/dist/packages/react/src/calendar/CalendarNextMonthButton-css.js

@@ -0,0 +1,7 @@
+import './../../../../assets/src/layers/layers.css.ts.vanilla-xcn_ZlL-.css';
+import './../../../../assets/src/calendar/CalendarNextMonthButton.css.ts.vanilla--u5FE0aq.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var button = recipeRuntime({base:'v70pl2'});
+
+export { button };

package/dist/packages/react/src/calendar/CalendarNextMonthButton.js

@@ -0,0 +1,27 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { NextMonthButton } from 'react-day-picker';
+import { Button } from '../button/Button.js';
+import { button } from './CalendarNextMonthButton-css.js';
+
+function CalendarNextMonthButton({
+  children,
+  className,
+  color: _color,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      appearance: "subtle",
+      asChild: true,
+      icon: children,
+      ...button({}, className),
+      ...props,
+      children: /* @__PURE__ */ jsx(NextMonthButton, {})
+    }
+  );
+}
+CalendarNextMonthButton.displayName = "@optiaxiom/react/CalendarNextMonthButton";
+
+export { CalendarNextMonthButton };

package/dist/packages/react/src/calendar/CalendarPreviousMonthButton-css.js

@@ -0,0 +1,7 @@
+import './../../../../assets/src/layers/layers.css.ts.vanilla-xcn_ZlL-.css';
+import './../../../../assets/src/calendar/CalendarPreviousMonthButton.css.ts.vanilla-eaPm9Eu9.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var button = recipeRuntime({base:'g4v075'});
+
+export { button };

package/dist/packages/react/src/calendar/CalendarPreviousMonthButton.js

@@ -0,0 +1,27 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { PreviousMonthButton } from 'react-day-picker';
+import { Button } from '../button/Button.js';
+import { button } from './CalendarPreviousMonthButton-css.js';
+
+function CalendarPreviousMonthButton({
+  children,
+  className,
+  color: _color,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      appearance: "subtle",
+      asChild: true,
+      icon: children,
+      ...button({}, className),
+      ...props,
+      children: /* @__PURE__ */ jsx(PreviousMonthButton, {})
+    }
+  );
+}
+CalendarPreviousMonthButton.displayName = "@optiaxiom/react/CalendarPreviousMonthButton";
+
+export { CalendarPreviousMonthButton };

package/dist/packages/react/src/calendar/CalendarWeekday.js

@@ -0,0 +1,13 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { Weekday } from 'react-day-picker';
+import { Box } from '../box/Box.js';
+import '../sprinkles/sprinkles.js';
+import '../sprinkles/sprinklesMerge.js';
+
+function CalendarWeekday({ children, ...props }) {
+  return /* @__PURE__ */ jsx(Box, { asChild: true, color: "fg.tertiary", fontSize: "sm", fontWeight: "400", children: /* @__PURE__ */ jsx(Weekday, { ...props, children }) });
+}
+CalendarWeekday.displayName = "@optiaxiom/react/CalendarWeekday";
+
+export { CalendarWeekday };

package/dist/packages/react/src/card/Card-css.js

@@ -0,0 +1,9 @@
+import './../../../../assets/src/layers/layers.css.ts.vanilla-xcn_ZlL-.css';
+import './../../../../assets/src/card-checkbox/CardCheckbox.css.ts.vanilla-CvqM8C7k.css';
+import './../../../../assets/src/link/Link.css.ts.vanilla-CN29HUK1.css';
+import './../../../../assets/src/card/Card.css.ts.vanilla-Bv7zejRh.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var card = recipeRuntime({base:['_15o8zzj',{border:'1',color:'fg.default',gap:'12',p:'16',transition:'transform'},'f4jas2']});
+
+export { card };

package/dist/packages/react/src/card/Card.js

@@ -0,0 +1,41 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { useId } from '@radix-ui/react-id';
+import { forwardRef } from 'react';
+import { CardContextProvider } from '../card-context/CardContext.js';
+import { Flex } from '../flex/Flex.js';
+import { card } from './Card-css.js';
+
+const mapOrientationToFlexDirection = {
+  horizontal: "row",
+  vertical: "column"
+};
+const Card = forwardRef(
+  ({ children, className, orientation = "vertical", ...props }, ref) => {
+    const descriptionId = useId();
+    const labelId = useId();
+    return /* @__PURE__ */ jsx(
+      CardContextProvider,
+      {
+        descriptionId,
+        labelId,
+        orientation,
+        children: /* @__PURE__ */ jsx(
+          Flex,
+          {
+            "aria-describedby": descriptionId,
+            "aria-labelledby": labelId,
+            flexDirection: mapOrientationToFlexDirection[orientation],
+            ref,
+            ...card({}, className),
+            ...props,
+            children
+          }
+        )
+      }
+    );
+  }
+);
+Card.displayName = "@optiaxiom/react/Card";
+
+export { Card };

package/dist/packages/react/src/card-checkbox/CardCheckbox-css.js

@@ -0,0 +1,10 @@
+import './../../../../assets/src/layers/layers.css.ts.vanilla-xcn_ZlL-.css';
+import './../../../../assets/src/link/Link.css.ts.vanilla-CN29HUK1.css';
+import './../../../../assets/src/card/Card.css.ts.vanilla-Bv7zejRh.css';
+import './../../../../assets/src/card-checkbox/CardCheckbox.css.ts.vanilla-CvqM8C7k.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var control = recipeRuntime({base:['_1a74xf1']});
+var root = recipeRuntime({base:['_1yrb2r9',{rounded:'inherit',transition:'opacity'},'_13qb09j']});
+
+export { control, root };

package/dist/packages/react/src/card-checkbox/CardCheckbox.js

@@ -0,0 +1,35 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { CheckboxContent } from '../checkbox-content/CheckboxContent.js';
+import { CheckboxControl } from '../checkbox-control/CheckboxControl.js';
+import { CheckboxRoot } from '../checkbox-root/CheckboxRoot.js';
+import { root, control } from './CardCheckbox-css.js';
+
+const CardCheckbox = forwardRef(
+  ({ children, className, description, indeterminate, ...props }, ref) => {
+    return /* @__PURE__ */ jsxs(
+      CheckboxRoot,
+      {
+        description: !!description,
+        ref,
+        ...root({}, className),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx(
+            CheckboxControl,
+            {
+              indeterminate,
+              shift: Boolean(children),
+              ...control({}, className)
+            }
+          ),
+          /* @__PURE__ */ jsx(CheckboxContent, { description, children })
+        ]
+      }
+    );
+  }
+);
+CardCheckbox.displayName = "@optiaxiom/react/CardCheckbox";
+
+export { CardCheckbox };

package/dist/packages/react/src/card-content/CardContent.js

@@ -0,0 +1,13 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Flex } from '../flex/Flex.js';
+
+const CardContent = forwardRef(
+  ({ children, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(Flex, { gap: "4", ref, ...props, children });
+  }
+);
+CardContent.displayName = "@optiaxiom/react/CardContent";
+
+export { CardContent };

package/dist/packages/react/src/card-context/CardContext.js

@@ -0,0 +1,6 @@
+"use client";
+import { createContext } from '@radix-ui/react-context';
+
+const [CardContextProvider, useCardContext] = createContext("Card");
+
+export { CardContextProvider, useCardContext };

package/dist/packages/react/src/card-description/CardDescription.js

@@ -0,0 +1,23 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { useCardContext } from '../card-context/CardContext.js';
+import { Text } from '../text/Text.js';
+
+const CardDescription = forwardRef(({ children, ...props }, ref) => {
+  const { descriptionId } = useCardContext("CardDescription");
+  return /* @__PURE__ */ jsx(
+    Text,
+    {
+      color: "fg.tertiary",
+      fontSize: "sm",
+      id: descriptionId,
+      ref,
+      ...props,
+      children
+    }
+  );
+});
+CardDescription.displayName = "@optiaxiom/react/CardDescription";
+
+export { CardDescription };

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

@@ -0,0 +1,7 @@
+import './../../../../assets/src/layers/layers.css.ts.vanilla-xcn_ZlL-.css';
+import './../../../../assets/src/card-image/CardImage.css.ts.vanilla-BmI8cxvJ.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var cardImage = recipeRuntime({base:[{h:'full',rounded:'inherit'},'tvp61s'],variants:{orientation:{horizontal:[{w:'auto'},'_162b98e'],vertical:[{w:'full'},'oe1hmn']}}});
+
+export { cardImage };

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-xcn_ZlL-.css';
+import './../../../../assets/src/card-overflow/CardOverflow.css.ts.vanilla-BzYFjK3J.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var cardOverflow = recipeRuntime({base:[{alignSelf:'stretch'},'_15sasvw'],variants:{orientation:{horizontal:['_19f75zn'],vertical:['t9okd3']}}});
+
+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-xcn_ZlL-.css';
+import './../../../../assets/src/avatar-group/AvatarGroup.css.ts.vanilla-BgJJG2w1.css';
+import './../../../../assets/src/toggle-input/ToggleInput.css.ts.vanilla-DWjnMxMo.css';
+import './../../../../assets/src/checkbox-control/CheckboxControl.css.ts.vanilla-B6wwNXPr.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var control = recipeRuntime({base:[{color:'fg.default.inverse',display:'grid',rounded:'xs',size:'2xs'},'xibr5e'],variants:{shift:{false:{},true:{mt:'2'}}}});
+var icon = recipeRuntime({base:[{transition:'all'},'_11g568u']});
+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-CUZzNcnS.css';
-import './../../../../assets/src/code/Code.css.ts.vanilla-Sg-h-vBg.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-xcn_ZlL-.css';
+import './../../../../assets/src/code/Code.css.ts.vanilla-y2R0caVb.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var code = recipeRuntime({base:[{fontWeight:'600'},'_16mdvel']});
+var code = recipeRuntime({base:[{fontWeight:'600'},'_1iabexy']});
 
 export { code };

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

@@ -4,10 +4,10 @@ import { useCombobox } from 'downshift';
 import { forwardRef } from 'react';
 import { useComboboxContext } from '../combobox-context/ComboboxContext.js';
 import { Command } from '../command/Command.js';
-import { CommandListbox } from '../command-listbox/CommandListbox.js';
 import '../field-context/FieldContext.js';
 import { useFieldContext } from '../field-context/useFieldContext.js';
 import { useResponsiveMatches } from '../use-responsive-matches/useResponsiveMatches.js';
+import { ComboboxContentImpl } from './ComboboxContentImpl.js';
 
 const ComboboxContent = forwardRef(
   ({ children, ...props }, ref) => {
@@ -62,7 +62,7 @@ const ComboboxContent = forwardRef(
               }
             },
             value,
-            children: /* @__PURE__ */ jsx(CommandListbox, { children })
+            children: /* @__PURE__ */ jsx(ComboboxContentImpl, { children })
           }
         )
       }

package/dist/packages/react/src/combobox-content/ComboboxContentImpl.js

@@ -0,0 +1,16 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useEffect } from 'react';
+import { useCommandContext } from '../command-context/CommandContext.js';
+import { CommandListbox } from '../command-listbox/CommandListbox.js';
+
+const ComboboxContentImpl = forwardRef(({ children, ...props }, ref) => {
+  const { setPlaced } = useCommandContext("ComboboxContentImpl");
+  useEffect(() => {
+    setPlaced(true);
+  }, [setPlaced]);
+  return /* @__PURE__ */ jsx(CommandListbox, { ref, ...props, children });
+});
+ComboboxContentImpl.displayName = "@optiaxiom/react/ComboboxContentImpl";
+
+export { ComboboxContentImpl };

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

@@ -1,3 +1,4 @@
+"use client";
 import { createContext } from '@radix-ui/react-context';
 
 const [ComboboxContextProvider, useComboboxContext] = createContext("Combobox");