mainbase-ui 3.36.0 → 3.37.1

package/dist/cjs/components/circle/index.cjs

@@ -1,13 +1,14 @@
 "use client";
 'use strict';
 
-var React$1 = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
 var index = require('../square/index.cjs');
 
-const Circle = React$1.forwardRef(
+const Circle = React.forwardRef(
   function Circle2(props, ref) {
     const { size, ...rest } = props;
-    return /* @__PURE__ */ React.createElement(index.Square, { size, ref, borderRadius: "9999px", ...rest });
+    return /* @__PURE__ */ jsxRuntime.jsx(index.Square, { size, ref, borderRadius: "9999px", ...rest });
   }
 );
 Circle.displayName = "Circle";

package/dist/cjs/components/client-only/client-only.cjs

@@ -1,16 +1,17 @@
 "use client";
 'use strict';
 
-var React$1 = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
 var show = require('../show/show.cjs');
 
 const ClientOnly = (props) => {
   const { children, fallback } = props;
-  const [hasMounted, setHasMounted] = React$1.useState(false);
-  React$1.useEffect(() => {
+  const [hasMounted, setHasMounted] = React.useState(false);
+  React.useEffect(() => {
     setHasMounted(true);
   }, []);
-  return /* @__PURE__ */ React.createElement(show.Show, { when: hasMounted, fallback }, children);
+  return /* @__PURE__ */ jsxRuntime.jsx(show.Show, { when: hasMounted, fallback, children });
 };
 
 exports.ClientOnly = ClientOnly;

package/dist/cjs/components/clipboard/clipboard.cjs

@@ -1,8 +1,9 @@
 "use client";
 'use strict';
 
+var jsxRuntime = require('react/jsx-runtime');
 var clipboard = require('@ark-ui/react/clipboard');
-var React$1 = require('react');
+var React = require('react');
 var createSlotRecipeContext = require('../../styled-system/create-slot-recipe-context.cjs');
 var icons = require('../icons.cjs');
 
@@ -24,16 +25,16 @@ const ClipboardControl = withContext(clipboard.Clipboard.Control, "control", { f
 const ClipboardIndicator = withContext(clipboard.Clipboard.Indicator, "indicator", {
   forwardAsChild: true,
   defaultProps: {
-    copied: /* @__PURE__ */ React.createElement(icons.CheckIcon, { boxSize: "1em" }),
-    children: /* @__PURE__ */ React.createElement(icons.CopyIcon, { boxSize: "1em" })
+    copied: /* @__PURE__ */ jsxRuntime.jsx(icons.CheckIcon, { boxSize: "1em" }),
+    children: /* @__PURE__ */ jsxRuntime.jsx(icons.CopyIcon, { boxSize: "1em" })
   }
 });
 const ClipboardInput = withContext(clipboard.Clipboard.Input, "input", { forwardAsChild: true });
 const ClipboardLabel = withContext(clipboard.Clipboard.Label, "label", { forwardAsChild: true });
 const ClipboardContext = clipboard.Clipboard.Context;
 const ClipboardValueText = withContext(clipboard.Clipboard.ValueText, "valueText", { forwardAsChild: true });
-const ClipboardCopyText = React$1.forwardRef(function ClipboardCopyText2(props, ref) {
-  return /* @__PURE__ */ React.createElement(ClipboardIndicator, { copied: "Copied", ...props, ref }, "Copy");
+const ClipboardCopyText = React.forwardRef(function ClipboardCopyText2(props, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx(ClipboardIndicator, { copied: "Copied", ...props, ref, children: "Copy" });
 });
 
 exports.ClipboardContext = ClipboardContext;

package/dist/cjs/components/code-block/code-block-adapter-provider.cjs

@@ -1,13 +1,14 @@
 "use client";
 'use strict';
 
+var jsxRuntime = require('react/jsx-runtime');
 var codeBlockAdapterContext = require('./code-block-adapter-context.cjs');
 var useCodeHighlight = require('./use-code-highlight.cjs');
 
 function CodeBlockAdapterProvider(props) {
   const { children, value } = props;
   const context = useCodeHighlight.useCodeHighlight(value);
-  return /* @__PURE__ */ React.createElement(codeBlockAdapterContext.CodeBlockAdapterContextProvider, { value: context }, children);
+  return /* @__PURE__ */ jsxRuntime.jsx(codeBlockAdapterContext.CodeBlockAdapterContextProvider, { value: context, children });
 }
 
 exports.CodeBlockAdapterProvider = CodeBlockAdapterProvider;

package/dist/cjs/components/code-block/code-block.cjs

@@ -1,17 +1,15 @@
 "use client";
 'use strict';
 
+var jsxRuntime = require('react/jsx-runtime');
 var clipboard = require('@ark-ui/react/clipboard');
 var factory = require('@ark-ui/react/factory');
-var React$1 = require('react');
-var createSlotRecipeContext = require('../../styled-system/create-slot-recipe-context.cjs');
+var React = require('react');
 var useControllableState = require('../../hooks/use-controllable-state.cjs');
-require('@ark-ui/react');
-require('@ark-ui/react/collection');
+var mergeProps = require('../../merge-props.cjs');
+var createSlotRecipeContext = require('../../styled-system/create-slot-recipe-context.cjs');
 var attr = require('../../utils/attr.cjs');
 var cx = require('../../utils/cx.cjs');
-require('../../utils/unit.cjs');
-var mergeProps = require('../../merge-props.cjs');
 var icons = require('../icons.cjs');
 var codeBlockAdapterContext = require('./code-block-adapter-context.cjs');
 var codeBlockContext = require('./code-block-context.cjs');
@@ -24,7 +22,7 @@ const {
 } = createSlotRecipeContext.createSlotRecipeContext({
   key: "codeBlock"
 });
-const RootBase = React$1.forwardRef(
+const RootBase = React.forwardRef(
   function RootBase2(props, ref) {
     const {
       children,
@@ -37,7 +35,7 @@ const RootBase = React$1.forwardRef(
       onCopy,
       ...rest
     } = props;
-    const meta = React$1.useMemo(
+    const meta = React.useMemo(
       () => ({
         ...metaProp,
         colorScheme: metaProp?.colorScheme ?? defaultColorScheme
@@ -56,8 +54,8 @@ const RootBase = React$1.forwardRef(
     const [collapsed, setCollapsed] = useControllableState.useControllableState({
       defaultValue: maxLines != null ? codeLines > maxLines : false
     });
-    const uid = React$1.useId();
-    const collapsible = React$1.useMemo(
+    const uid = React.useId();
+    const collapsible = React.useMemo(
       () => ({
         contentId: `${uid}-content`,
         collapsed,
@@ -66,7 +64,7 @@ const RootBase = React$1.forwardRef(
       }),
       [collapsed, setCollapsed, uid]
     );
-    const context = React$1.useMemo(
+    const context = React.useMemo(
       () => ({
         code,
         language,
@@ -76,7 +74,7 @@ const RootBase = React$1.forwardRef(
       }),
       [code, language, clipboard$1, collapsible, meta]
     );
-    return /* @__PURE__ */ React.createElement(codeBlockContext.CodeBlockContextProvider, { value: context }, /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsxRuntime.jsx(codeBlockContext.CodeBlockContextProvider, { value: context, children: /* @__PURE__ */ jsxRuntime.jsx(
       factory.ark.div,
       {
         ref,
@@ -90,10 +88,10 @@ const RootBase = React$1.forwardRef(
         style: {
           ...rest.style,
           ["--code-block-line-length"]: `${String(codeLines).length}ch`
-        }
-      },
-      children
-    ));
+        },
+        children
+      }
+    ) });
   }
 );
 const CodeBlockRoot = withProvider(
@@ -102,20 +100,20 @@ const CodeBlockRoot = withProvider(
   { forwardAsChild: true, forwardProps: ["maxLines"] }
 );
 const CodeBlockPropsProvider = PropsProvider;
-const ContentBase = React$1.forwardRef(
+const ContentBase = React.forwardRef(
   function ContentBase2(props, ref) {
     const { children, ...restProps } = props;
     const { collapsible } = codeBlockContext.useCodeBlockContext();
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsxRuntime.jsx(
       factory.ark.div,
       {
         ref,
         id: collapsible.contentId,
         "data-expanded": attr.dataAttr(!collapsible.collapsed),
         "aria-expanded": !collapsible.collapsed,
-        ...restProps
-      },
-      children
+        ...restProps,
+        children
+      }
     );
   }
 );
@@ -134,13 +132,13 @@ const CodeBlockCode = withContext(
     }
   }
 );
-const CodeText = React$1.forwardRef(
+const CodeText = React.forwardRef(
   function CodeText2(props, ref) {
     const { code, language, meta } = codeBlockContext.useCodeBlockContext();
     const { highlight } = codeBlockAdapterContext.useCodeBlockAdapterContext();
     const highlighted = highlight?.({ code, language, meta });
     const codeContentProps = highlighted?.highlighted ? { dangerouslySetInnerHTML: { __html: highlighted.code } } : { children: code };
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsxRuntime.jsx(
       factory.ark.code,
       {
         "data-plaintext": attr.dataAttr(!highlighted?.highlighted),
@@ -158,39 +156,39 @@ const CodeText = React$1.forwardRef(
   }
 );
 const CodeBlockCodeText = withContext(CodeText, "codeText", { forwardAsChild: true });
-const BaseCopyTrigger = React$1.forwardRef(
+const BaseCopyTrigger = React.forwardRef(
   function BaseCopyTrigger2(props, ref) {
     const { children, ...restProps } = props;
     const { clipboard } = codeBlockContext.useCodeBlockContext();
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsxRuntime.jsx(
       factory.ark.button,
       {
         ref,
-        ...mergeProps.mergeProps(clipboard.getTriggerProps(), restProps)
-      },
-      children
+        ...mergeProps.mergeProps(clipboard.getTriggerProps(), restProps),
+        children
+      }
     );
   }
 );
 const CodeBlockCopyTrigger = withContext(BaseCopyTrigger, "copyTrigger", { forwardAsChild: true });
-const BaseCopyIndicator = React$1.forwardRef(
+const BaseCopyIndicator = React.forwardRef(
   function BaseCopyIndicator2(props, ref) {
     const { children, copied, ...restProps } = props;
     const { clipboard } = codeBlockContext.useCodeBlockContext();
-    return /* @__PURE__ */ React.createElement(factory.ark.span, { ref, ...restProps }, clipboard.copied ? copied : children);
+    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.span, { ref, ...restProps, children: clipboard.copied ? copied : children });
   }
 );
 const CodeBlockCopyIndicator = withContext(BaseCopyIndicator, "copyIndicator", {
   forwardAsChild: true,
   defaultProps: {
-    copied: /* @__PURE__ */ React.createElement(icons.CheckIcon, { boxSize: "1em" }),
-    children: /* @__PURE__ */ React.createElement(icons.CopyIcon, { boxSize: "1em" })
+    copied: /* @__PURE__ */ jsxRuntime.jsx(icons.CheckIcon, { boxSize: "1em" }),
+    children: /* @__PURE__ */ jsxRuntime.jsx(icons.CopyIcon, { boxSize: "1em" })
   }
 });
-const BaseCollapseTrigger = React$1.forwardRef(function BaseCollapseTrigger2(props, ref) {
+const BaseCollapseTrigger = React.forwardRef(function BaseCollapseTrigger2(props, ref) {
   const { children, ...restProps } = props;
   const { collapsible } = codeBlockContext.useCodeBlockContext();
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxRuntime.jsx(
     factory.ark.button,
     {
       type: "button",
@@ -202,33 +200,33 @@ const BaseCollapseTrigger = React$1.forwardRef(function BaseCollapseTrigger2(pro
       onClick: (e) => {
         restProps.onClick?.(e);
         collapsible.toggleCollapsed();
-      }
-    },
-    children
+      },
+      children
+    }
   );
 });
 const CodeBlockCollapseTrigger = withContext(BaseCollapseTrigger, "collapseTrigger", { forwardAsChild: true });
-const BaseCollapseIndicator = React$1.forwardRef(function BaseCollapseIndicator2(props, ref) {
+const BaseCollapseIndicator = React.forwardRef(function BaseCollapseIndicator2(props, ref) {
   const { children, collapsed, ...restProps } = props;
   const { collapsible } = codeBlockContext.useCodeBlockContext();
-  return /* @__PURE__ */ React.createElement(factory.ark.span, { ref, ...restProps }, collapsible.collapsed ? collapsed : children);
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.span, { ref, ...restProps, children: collapsible.collapsed ? collapsed : children });
 });
 const CodeBlockCollapseIndicator = withContext(BaseCollapseIndicator, "collapseIndicator", {
   forwardAsChild: true,
   defaultProps: {
-    collapsed: /* @__PURE__ */ React.createElement(icons.ChevronDownIcon, { boxSize: "1em" }),
-    children: /* @__PURE__ */ React.createElement(icons.ChevronUpIcon, { boxSize: "1em" })
+    collapsed: /* @__PURE__ */ jsxRuntime.jsx(icons.ChevronDownIcon, { boxSize: "1em" }),
+    children: /* @__PURE__ */ jsxRuntime.jsx(icons.ChevronUpIcon, { boxSize: "1em" })
   }
 });
-const CodeBlockCollapseText = React$1.forwardRef(function CodeBlockCollapseText2(props, ref) {
-  return /* @__PURE__ */ React.createElement(CodeBlockCollapseIndicator, { ref, ...props, collapsed: "Expand code" }, props.children || "Collapse code");
+const CodeBlockCollapseText = React.forwardRef(function CodeBlockCollapseText2(props, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx(CodeBlockCollapseIndicator, { ref, ...props, collapsed: "Expand code", children: props.children || "Collapse code" });
 });
 const CodeBlockFooter = withContext("footer", "footer");
 const CodeBlockControl = withContext("div", "control");
-const BaseOverlay = React$1.forwardRef(
+const BaseOverlay = React.forwardRef(
   function BaseOverlay2(props, ref) {
     const { collapsible } = codeBlockContext.useCodeBlockContext();
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsxRuntime.jsx(
       factory.ark.div,
       {
         ref,

package/dist/cjs/components/color-picker/color-picker.cjs

@@ -1,8 +1,9 @@
 "use client";
 'use strict';
 
+var jsxRuntime = require('react/jsx-runtime');
 var colorPicker = require('@ark-ui/react/color-picker');
-var React$1 = require('react');
+var React = require('react');
 var mergeProps = require('../../merge-props.cjs');
 var createSlotRecipeContext = require('../../styled-system/create-slot-recipe-context.cjs');
 require('../button/button.cjs');
@@ -30,7 +31,7 @@ const ColorPickerValueSwatch = withContext(colorPicker.ColorPicker.ValueSwatch,
 const ColorPickerTrigger = withContext(colorPicker.ColorPicker.Trigger, "trigger", {
   forwardAsChild: true,
   defaultProps: {
-    children: /* @__PURE__ */ React.createElement(ColorPickerValueSwatch, null)
+    children: /* @__PURE__ */ jsxRuntime.jsx(ColorPickerValueSwatch, {})
   }
 });
 const ColorPickerPositioner = withContext(colorPicker.ColorPicker.Positioner, "positioner", { forwardAsChild: true });
@@ -40,7 +41,10 @@ const ColorPickerAreaThumb = withContext(colorPicker.ColorPicker.AreaThumb, "are
 const ColorPickerArea = withContext(colorPicker.ColorPicker.Area, "area", {
   forwardAsChild: true,
   defaultProps: {
-    children: /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(ColorPickerAreaBackground, null), /* @__PURE__ */ React.createElement(ColorPickerAreaThumb, null))
+    children: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(ColorPickerAreaBackground, {}),
+      /* @__PURE__ */ jsxRuntime.jsx(ColorPickerAreaThumb, {})
+    ] })
   }
 });
 const ColorPickerChannelSliderTrack = withContext(colorPicker.ColorPicker.ChannelSliderTrack, "channelSliderTrack", {
@@ -53,17 +57,24 @@ const ColorPickerTransparencyGrid = withContext(colorPicker.ColorPicker.Transpar
 const ColorPickerChannelSlider = withContext(colorPicker.ColorPicker.ChannelSlider, "channelSlider", {
   forwardAsChild: true,
   defaultProps: {
-    children: /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(ColorPickerTransparencyGrid, { size: "0.6rem" }), /* @__PURE__ */ React.createElement(ColorPickerChannelSliderTrack, null), /* @__PURE__ */ React.createElement(ColorPickerChannelSliderThumb, null))
+    children: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(ColorPickerTransparencyGrid, { size: "0.6rem" }),
+      /* @__PURE__ */ jsxRuntime.jsx(ColorPickerChannelSliderTrack, {}),
+      /* @__PURE__ */ jsxRuntime.jsx(ColorPickerChannelSliderThumb, {})
+    ] })
   }
 });
-const ColorPickerSliders = React$1.forwardRef(
+const ColorPickerSliders = React.forwardRef(
   function ColorPickerSliders2(props, ref) {
-    return /* @__PURE__ */ React.createElement(stack.Stack, { gap: "1", flex: "1", px: "1", ref, ...props }, /* @__PURE__ */ React.createElement(ColorPickerChannelSlider, { channel: "hue" }), /* @__PURE__ */ React.createElement(ColorPickerChannelSlider, { channel: "alpha" }));
+    return /* @__PURE__ */ jsxRuntime.jsxs(stack.Stack, { gap: "1", flex: "1", px: "1", ref, ...props, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(ColorPickerChannelSlider, { channel: "hue" }),
+      /* @__PURE__ */ jsxRuntime.jsx(ColorPickerChannelSlider, { channel: "alpha" })
+    ] });
   }
 );
 const ColorPickerChannelInput = withContext(colorPicker.ColorPicker.ChannelInput, "channelInput", { forwardAsChild: true });
-const ColorPickerInput = React$1.forwardRef(function ColorHexInput(props, ref) {
-  return /* @__PURE__ */ React.createElement(ColorPickerChannelInput, { channel: "hex", ref, ...props });
+const ColorPickerInput = React.forwardRef(function ColorHexInput(props, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx(ColorPickerChannelInput, { channel: "hex", ref, ...props });
 });
 const ColorPickerSwatchGroup = withContext(colorPicker.ColorPicker.SwatchGroup, "swatchGroup", { forwardAsChild: true });
 const ColorPickerSwatchTrigger = withContext(colorPicker.ColorPicker.SwatchTrigger, "swatchTrigger", { forwardAsChild: true });
@@ -76,11 +87,11 @@ const ColorPickerFormatSelect = withContext(colorPicker.ColorPicker.FormatSelect
 const ColorPickerEyeDropperTrigger = withContext(colorPicker.ColorPicker.EyeDropperTrigger, "eyeDropperTrigger", {
   forwardAsChild: true
 });
-const ColorPickerEyeDropper = React$1.forwardRef(function ColorPickerEyeDropper2(props, ref) {
-  const { children = /* @__PURE__ */ React.createElement(icons.PipetteIcon, null), ...rest } = props;
+const ColorPickerEyeDropper = React.forwardRef(function ColorPickerEyeDropper2(props, ref) {
+  const { children = /* @__PURE__ */ jsxRuntime.jsx(icons.PipetteIcon, {}), ...rest } = props;
   const picker = colorPicker.useColorPickerContext();
   const localProps = mergeProps.mergeProps(picker.getEyeDropperTriggerProps(), rest);
-  return /* @__PURE__ */ React.createElement(iconButton.IconButton, { ref, ...localProps }, children);
+  return /* @__PURE__ */ jsxRuntime.jsx(iconButton.IconButton, { ref, ...localProps, children });
 });
 const ColorPickerChannelSliderValueText = withContext(colorPicker.ColorPicker.ChannelSliderValueText, "channelSliderValueText", {
   forwardAsChild: true
@@ -88,8 +99,8 @@ const ColorPickerChannelSliderValueText = withContext(colorPicker.ColorPicker.Ch
 const ColorPickerChannelSliderLabel = withContext(colorPicker.ColorPicker.ChannelSliderLabel, "channelSliderLabel", {
   forwardAsChild: true
 });
-const ColorPickerHiddenInput = React$1.forwardRef(function ColorPickerHiddenInput2(props, ref) {
-  return /* @__PURE__ */ React.createElement(colorPicker.ColorPicker.HiddenInput, { tabIndex: -1, ref, ...props });
+const ColorPickerHiddenInput = React.forwardRef(function ColorPickerHiddenInput2(props, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx(colorPicker.ColorPicker.HiddenInput, { tabIndex: -1, ref, ...props });
 });
 const ColorPickerContext = colorPicker.ColorPicker.Context;
 const ColorPickerChannelText = withContext("span", "channelText", {

package/dist/cjs/components/color-swatch/index.cjs

@@ -1,22 +1,22 @@
 "use client";
 'use strict';
 
-var React$1 = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
 var createRecipeContext = require('../../styled-system/create-recipe-context.cjs');
 var factory = require('../../styled-system/factory.cjs');
 var cx = require('../../utils/cx.cjs');
-require('../../utils/unit.cjs');
 var grid = require('../grid/grid.cjs');
 require('../grid/grid-item.cjs');
 
 const { withPropsProvider, useRecipeResult } = createRecipeContext.createRecipeContext({
   key: "colorSwatch"
 });
-const ColorSwatch = React$1.forwardRef(
+const ColorSwatch = React.forwardRef(
   function ColorSwatch2(props, ref) {
     const { value, ...restProps } = props;
     const { styles, className, props: localProps } = useRecipeResult(restProps);
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsxRuntime.jsx(
       factory.mainbase.span,
       {
         ...localProps,
@@ -35,21 +35,21 @@ const ColorSwatchMix = (props) => {
     throw new Error("ColorSwatchMix doesn't support more than 4 colors");
   }
   const isThreeColors = items.length === 3;
-  return /* @__PURE__ */ React.createElement(ColorSwatch, { overflow: "hidden", ...restProps, value: "transparent" }, /* @__PURE__ */ React.createElement(grid.Grid, { templateColumns: "var(--swatch-size) var(--swatch-size)" }, items.map((item, index) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(ColorSwatch, { overflow: "hidden", ...restProps, value: "transparent", children: /* @__PURE__ */ jsxRuntime.jsx(grid.Grid, { templateColumns: "var(--swatch-size) var(--swatch-size)", children: items.map((item, index) => {
     const isLast = index === items.length - 1;
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsxRuntime.jsx(
       ColorSwatch,
       {
         size: "inherit",
-        key: item,
         rounded: "none",
         value: item,
         boxShadow: "none",
         gridColumn: isThreeColors && isLast ? "span 2 / span 2" : void 0,
         width: isThreeColors && isLast ? "unset" : void 0
-      }
+      },
+      item
     );
-  })));
+  }) }) });
 };
 
 exports.ColorSwatch = ColorSwatch;

package/dist/cjs/components/combobox/combobox.cjs

@@ -1,6 +1,7 @@
 "use client";
 'use strict';
 
+var jsxRuntime = require('react/jsx-runtime');
 var combobox = require('@ark-ui/react/combobox');
 var createSlotRecipeContext = require('../../styled-system/create-slot-recipe-context.cjs');
 var icons = require('../icons.cjs');
@@ -24,7 +25,7 @@ const ComboboxTrigger = withContext(combobox.Combobox.Trigger, "trigger", {
   forwardAsChild: true,
   forwardProps: ["focusable"],
   defaultProps: {
-    children: /* @__PURE__ */ React.createElement(icons.ChevronDownIcon, null)
+    children: /* @__PURE__ */ jsxRuntime.jsx(icons.ChevronDownIcon, {})
   }
 });
 const ComboboxPositioner = withContext(combobox.Combobox.Positioner, "positioner", { forwardAsChild: true });
@@ -42,7 +43,7 @@ const ComboboxInput = withContext(
 const ComboboxClearTrigger = withContext(combobox.Combobox.ClearTrigger, "clearTrigger", {
   forwardAsChild: true,
   defaultProps: {
-    children: /* @__PURE__ */ React.createElement(icons.CloseIcon, null)
+    children: /* @__PURE__ */ jsxRuntime.jsx(icons.CloseIcon, {})
   }
 });
 const ComboboxIndicatorGroup = withContext("div", "indicatorGroup");
@@ -57,7 +58,7 @@ const ComboboxItemText = withContext(combobox.Combobox.ItemText, "itemText", { f
 const ComboboxItemIndicator = withContext(combobox.Combobox.ItemIndicator, "itemIndicator", {
   forwardAsChild: true,
   defaultProps: {
-    children: /* @__PURE__ */ React.createElement(icons.CheckIcon, null)
+    children: /* @__PURE__ */ jsxRuntime.jsx(icons.CheckIcon, {})
   }
 });
 const ComboboxControl = withContext(combobox.Combobox.Control, "control", { forwardAsChild: true });

package/dist/cjs/components/date-picker/date-picker.cjs

@@ -1,8 +1,9 @@
 "use client";
 'use strict';
 
+var jsxRuntime = require('react/jsx-runtime');
 var datePicker = require('@ark-ui/react/date-picker');
-var React$1 = require('react');
+var React = require('react');
 var createSlotRecipeContext = require('../../styled-system/create-slot-recipe-context.cjs');
 var factory = require('../../styled-system/factory.cjs');
 var button = require('../button/button.cjs');
@@ -26,7 +27,7 @@ const DatePickerPropsProvider = PropsProvider;
 const DatePickerClearTrigger = withContext(datePicker.DatePicker.ClearTrigger, "clearTrigger", {
   forwardAsChild: true,
   defaultProps: {
-    children: /* @__PURE__ */ React.createElement(icons.CloseIcon, null)
+    children: /* @__PURE__ */ jsxRuntime.jsx(icons.CloseIcon, {})
   }
 });
 const DatePickerContent = withContext(datePicker.DatePicker.Content, "content", { forwardAsChild: true });
@@ -37,7 +38,7 @@ const DatePickerMonthSelect = withContext(datePicker.DatePicker.MonthSelect, "mo
 const DatePickerNextTrigger = withContext(datePicker.DatePicker.NextTrigger, "nextTrigger", {
   forwardAsChild: true,
   defaultProps: {
-    children: /* @__PURE__ */ React.createElement(icons.ChevronRightIcon, null)
+    children: /* @__PURE__ */ jsxRuntime.jsx(icons.ChevronRightIcon, {})
   }
 });
 const DatePickerPositioner = withContext(datePicker.DatePicker.Positioner, "positioner", { forwardAsChild: true });
@@ -45,7 +46,7 @@ const DatePickerPresetTrigger = withContext(datePicker.DatePicker.PresetTrigger,
 const DatePickerPrevTrigger = withContext(datePicker.DatePicker.PrevTrigger, "prevTrigger", {
   forwardAsChild: true,
   defaultProps: {
-    children: /* @__PURE__ */ React.createElement(icons.ChevronLeftIcon, null)
+    children: /* @__PURE__ */ jsxRuntime.jsx(icons.ChevronLeftIcon, {})
   }
 });
 const DatePickerRangeText = withContext(datePicker.DatePicker.RangeText, "rangeText", { forwardAsChild: true });
@@ -84,62 +85,75 @@ const DatePickerWeekNumberCellText = withContext("span", "tableCellTrigger", {
   forwardAsChild: true
 });
 const DatePickerHeader = (props) => {
-  return /* @__PURE__ */ React.createElement(DatePickerViewControl, { ...props }, /* @__PURE__ */ React.createElement(DatePickerPrevTrigger, null), /* @__PURE__ */ React.createElement(DatePickerViewTrigger, null, /* @__PURE__ */ React.createElement(DatePickerRangeText, null)), /* @__PURE__ */ React.createElement(DatePickerNextTrigger, null));
+  return /* @__PURE__ */ jsxRuntime.jsxs(DatePickerViewControl, { ...props, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(DatePickerPrevTrigger, {}),
+    /* @__PURE__ */ jsxRuntime.jsx(DatePickerViewTrigger, { children: /* @__PURE__ */ jsxRuntime.jsx(DatePickerRangeText, {}) }),
+    /* @__PURE__ */ jsxRuntime.jsx(DatePickerNextTrigger, {})
+  ] });
 };
 const DatePickerDayTable = (props) => {
   const { offset, weekNumberLabel = "#", ...rest } = props;
   const ctx = datePicker.useDatePickerContext();
   const offsetDays = offset ? ctx.getOffset({ months: offset }) : void 0;
   const weeks = offsetDays ? offsetDays.weeks : ctx.weeks;
-  return /* @__PURE__ */ React.createElement(DatePickerTable, { ...rest }, /* @__PURE__ */ React.createElement(DatePickerTableHead, null, /* @__PURE__ */ React.createElement(DatePickerTableRow, null, ctx.showWeekNumbers && /* @__PURE__ */ React.createElement(DatePickerWeekNumberHeaderCell, null, weekNumberLabel), ctx.weekDays.map((weekDay, id) => /* @__PURE__ */ React.createElement(DatePickerTableHeader, { key: id }, weekDay.narrow)))), /* @__PURE__ */ React.createElement(DatePickerTableBody, null, weeks.map((week, weekIndex) => /* @__PURE__ */ React.createElement(DatePickerTableRow, { key: weekIndex }, ctx.showWeekNumbers && /* @__PURE__ */ React.createElement(DatePickerWeekNumberCell, { weekIndex, week }, /* @__PURE__ */ React.createElement(DatePickerWeekNumberCellText, null, ctx.getWeekNumber(week))), week.map((day, id) => /* @__PURE__ */ React.createElement(
-    DatePickerTableCell,
-    {
-      key: id,
-      value: day,
-      visibleRange: offsetDays?.visibleRange
-    },
-    /* @__PURE__ */ React.createElement(DatePickerTableCellTrigger, null, day.day)
-  ))))));
+  return /* @__PURE__ */ jsxRuntime.jsxs(DatePickerTable, { ...rest, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(DatePickerTableHead, { children: /* @__PURE__ */ jsxRuntime.jsxs(DatePickerTableRow, { children: [
+      ctx.showWeekNumbers && /* @__PURE__ */ jsxRuntime.jsx(DatePickerWeekNumberHeaderCell, { children: weekNumberLabel }),
+      ctx.weekDays.map((weekDay, id) => /* @__PURE__ */ jsxRuntime.jsx(DatePickerTableHeader, { children: weekDay.narrow }, id))
+    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(DatePickerTableBody, { children: weeks.map((week, weekIndex) => /* @__PURE__ */ jsxRuntime.jsxs(DatePickerTableRow, { children: [
+      ctx.showWeekNumbers && /* @__PURE__ */ jsxRuntime.jsx(DatePickerWeekNumberCell, { weekIndex, week, children: /* @__PURE__ */ jsxRuntime.jsx(DatePickerWeekNumberCellText, { children: ctx.getWeekNumber(week) }) }),
+      week.map((day, id) => /* @__PURE__ */ jsxRuntime.jsx(
+        DatePickerTableCell,
+        {
+          value: day,
+          visibleRange: offsetDays?.visibleRange,
+          children: /* @__PURE__ */ jsxRuntime.jsx(DatePickerTableCellTrigger, { children: day.day })
+        },
+        id
+      ))
+    ] }, weekIndex)) })
+  ] });
 };
 const DatePickerMonthTable = (props) => {
   const datePicker$1 = datePicker.useDatePickerContext();
   const { columns = 4, format = "short", ...rest } = props;
-  return /* @__PURE__ */ React.createElement(DatePickerTable, { ...rest }, /* @__PURE__ */ React.createElement(DatePickerTableBody, null, datePicker$1.getMonthsGrid({ columns, format }).map((months, id) => /* @__PURE__ */ React.createElement(DatePickerTableRow, { key: id }, months.map((month, id2) => /* @__PURE__ */ React.createElement(DatePickerTableCell, { key: id2, value: month.value }, /* @__PURE__ */ React.createElement(DatePickerTableCellTrigger, null, month.label)))))));
+  return /* @__PURE__ */ jsxRuntime.jsx(DatePickerTable, { ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(DatePickerTableBody, { children: datePicker$1.getMonthsGrid({ columns, format }).map((months, id) => /* @__PURE__ */ jsxRuntime.jsx(DatePickerTableRow, { children: months.map((month, id2) => /* @__PURE__ */ jsxRuntime.jsx(DatePickerTableCell, { value: month.value, children: /* @__PURE__ */ jsxRuntime.jsx(DatePickerTableCellTrigger, { children: month.label }) }, id2)) }, id)) }) });
 };
 const DatePickerYearTable = (props) => {
   const datePicker$1 = datePicker.useDatePickerContext();
   const { columns = 4, ...rest } = props;
-  return /* @__PURE__ */ React.createElement(DatePickerTable, { ...rest }, /* @__PURE__ */ React.createElement(DatePickerTableBody, null, datePicker$1.getYearsGrid({ columns }).map((years, id) => /* @__PURE__ */ React.createElement(DatePickerTableRow, { key: id }, years.map((year, id2) => /* @__PURE__ */ React.createElement(DatePickerTableCell, { key: id2, value: year.value }, /* @__PURE__ */ React.createElement(DatePickerTableCellTrigger, null, year.label)))))));
+  return /* @__PURE__ */ jsxRuntime.jsx(DatePickerTable, { ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(DatePickerTableBody, { children: datePicker$1.getYearsGrid({ columns }).map((years, id) => /* @__PURE__ */ jsxRuntime.jsx(DatePickerTableRow, { children: years.map((year, id2) => /* @__PURE__ */ jsxRuntime.jsx(DatePickerTableCell, { value: year.value, children: /* @__PURE__ */ jsxRuntime.jsx(DatePickerTableCellTrigger, { children: year.label }) }, id2)) }, id)) }) });
 };
 const DatePickerValue = (props) => {
   const { placeholder, value, ...rest } = props;
   const ctx = datePicker.useDatePickerContext();
-  return /* @__PURE__ */ React.createElement(DatePickerTrigger, { asChild: true, unstyled: true, ...rest }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxRuntime.jsx(DatePickerTrigger, { asChild: true, unstyled: true, ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(
     button.Button,
     {
       variant: "outline",
       width: "full",
       justifyContent: "flex-start",
-      textAlign: "start"
-    },
-    ctx.value.length ? ctx.value[0].toDate("UTC").toLocaleDateString() : placeholder ?? "Select date"
-  ));
+      textAlign: "start",
+      children: ctx.value.length ? ctx.value[0].toDate("UTC").toLocaleDateString() : placeholder ?? "Select date"
+    }
+  ) });
 };
-const DatePickerValueText = React$1.forwardRef((props, ref) => {
+const DatePickerValueText = React.forwardRef((props, ref) => {
   const { children, placeholder, separator = ", ", ...localProps } = props;
   const ctx = datePicker.useDatePickerContext();
   const hasValue = ctx.value.length > 0;
   if (typeof children === "function") {
-    return /* @__PURE__ */ React.createElement(React$1.Fragment, null, hasValue ? ctx.value.map((value, index) => /* @__PURE__ */ React.createElement(React$1.Fragment, { key: index }, children({
+    return /* @__PURE__ */ jsxRuntime.jsx(React.Fragment, { children: hasValue ? ctx.value.map((value, index) => /* @__PURE__ */ jsxRuntime.jsx(React.Fragment, { children: children({
       value,
       index,
       valueAsString: ctx.valueAsString[index],
       remove: () => {
         ctx.setValue(ctx.value.filter((_, i) => i !== index));
       }
-    }))) : placeholder);
+    }) }, index)) : placeholder });
   }
-  return /* @__PURE__ */ React.createElement(factory.mainbase.span, { ...localProps, ref }, hasValue ? ctx.valueAsString.join(separator) : placeholder);
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.mainbase.span, { ...localProps, ref, children: hasValue ? ctx.valueAsString.join(separator) : placeholder });
 });
 DatePickerValueText.displayName = "DatePickerValueText";