@optiaxiom/react 3.0.0 → 3.0.1

package/dist/esm/packages/react/src/select/SelectHiddenSelect.js

@@ -1,33 +1,30 @@
 "use client";
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { forwardRef, useMemo } from 'react';
-import { VisuallyHidden } from '../visually-hidden/VisuallyHidden.js';
-import { useSelectContext } from './SelectContext.js';
-
+import { VisuallyHidden } from "../visually-hidden/VisuallyHidden.js";
+import { useSelectContext } from "./SelectContext.js";
+import { forwardRef, useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/select/SelectHiddenSelect.tsx
 const SelectHiddenSelect = forwardRef(({ defaultValue, disabled, name, onChange, required, value }, ref) => {
-  const { items } = useSelectContext("@optiaxiom/react/SelectHiddenSelect");
-  const options = useMemo(
-    () => items.map((item) => /* @__PURE__ */ jsx("option", { value: item.value, children: item.value }, item.value)),
-    [items]
-  );
-  return /* @__PURE__ */ jsx(VisuallyHidden, { "aria-hidden": true, children: /* @__PURE__ */ jsxs(
-    "select",
-    {
-      defaultValue,
-      disabled,
-      name,
-      onChange,
-      ref,
-      required,
-      tabIndex: -1,
-      value,
-      children: [
-        /* @__PURE__ */ jsx("option", { value: "" }),
-        options
-      ]
-    }
-  ) });
+	const { items } = useSelectContext("@optiaxiom/react/SelectHiddenSelect");
+	const options = useMemo(() => items.map((item) => /* @__PURE__ */ jsx("option", {
+		value: item.value,
+		children: item.value
+	}, item.value)), [items]);
+	return /* @__PURE__ */ jsx(VisuallyHidden, {
+		"aria-hidden": true,
+		children: /* @__PURE__ */ jsxs("select", {
+			defaultValue,
+			disabled,
+			name,
+			onChange,
+			ref,
+			required,
+			tabIndex: -1,
+			value,
+			children: [/* @__PURE__ */ jsx("option", { value: "" }), options]
+		})
+	});
 });
 SelectHiddenSelect.displayName = "@optiaxiom/react/SelectHiddenSelect";
-
+//#endregion
 export { SelectHiddenSelect };

package/dist/esm/packages/react/src/select/SelectItem.js

@@ -1,61 +1,47 @@
 "use client";
-import { jsx } from 'react/jsx-runtime';
-import { useComposedRefs } from '@radix-ui/react-compose-refs';
-import { forwardRef } from 'react';
-import { Box } from '../box/Box.js';
-import '../sprinkles/sprinkles.js';
-import '../sprinkles/sprinklesMerge.js';
-import { useSelectContext } from './SelectContext.js';
-
-const SelectItem = forwardRef(
-  ({ children, index, item, onMouseMove, size, ...props }, outerRef) => {
-    const {
-      downshift,
-      focusVisible,
-      highlightedItem,
-      highlightedItemRef,
-      isOpen,
-      items,
-      selectedItem
-    } = useSelectContext("@optiaxiom/react/SelectItem");
-    const ref = useComposedRefs(
-      highlightedItem === item ? highlightedItemRef : void 0,
-      outerRef
-    );
-    const itemProps = downshift.getItemProps({
-      "aria-posinset": index + 1,
-      "aria-setsize": items.length,
-      index,
-      item,
-      onMouseMove: (event) => {
-        onMouseMove?.(event);
-        if (event.defaultPrevented) {
-          return;
-        }
-        if (!isOpen) {
-          event.preventDefault();
-          Object.assign(event.nativeEvent, {
-            preventDownshiftDefault: true
-          });
-        }
-      },
-      ref,
-      ...props
-    });
-    return /* @__PURE__ */ jsx(
-      Box,
-      {
-        "data-disabled": itemProps["aria-disabled"] ? "" : void 0,
-        "data-focus-visible": focusVisible && highlightedItem === item ? "" : void 0,
-        "data-highlighted": highlightedItem === item ? "" : void 0,
-        "data-selected": selectedItem === item ? "" : void 0,
-        size,
-        ...itemProps,
-        children
-      }
-    );
-  }
-);
+import { Box } from "../box/Box.js";
+import { useSelectContext } from "./SelectContext.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import { useComposedRefs } from "@radix-ui/react-compose-refs";
+//#region src/select/SelectItem.tsx
+const SelectItem = forwardRef(({ children, index, item, onMouseMove, size, ...props }, outerRef) => {
+	const { downshift, focusVisible, highlightedItem, highlightedItemRef, isOpen, items, selectedItem } = useSelectContext("@optiaxiom/react/SelectItem");
+	const ref = useComposedRefs(highlightedItem === item ? highlightedItemRef : void 0, outerRef);
+	const itemProps = downshift.getItemProps({
+		"aria-posinset": index + 1,
+		"aria-setsize": items.length,
+		index,
+		item,
+		onMouseMove: (event) => {
+			onMouseMove?.(event);
+			if (event.defaultPrevented) return;
+			/**
+			* Downshift listens to mousemove on items and disables scrolling to
+			* highlighted items (since should only scroll when using keyboard).
+			*
+			* But since we use exit animations downshift menu is present in DOM
+			* while closing - and we need to prevent triggering mousemove during
+			* that time.
+			*/
+			if (!isOpen) {
+				event.preventDefault();
+				Object.assign(event.nativeEvent, { preventDownshiftDefault: true });
+			}
+		},
+		ref,
+		...props
+	});
+	return /* @__PURE__ */ jsx(Box, {
+		"data-disabled": itemProps["aria-disabled"] ? "" : void 0,
+		"data-focus-visible": focusVisible && highlightedItem === item ? "" : void 0,
+		"data-highlighted": highlightedItem === item ? "" : void 0,
+		"data-selected": selectedItem === item ? "" : void 0,
+		size,
+		...itemProps,
+		children
+	});
+});
 SelectItem.displayName = "@optiaxiom/react/SelectItem";
-
+//#endregion
 export { SelectItem };

package/dist/esm/packages/react/src/select/SelectRadioItem.js

@@ -1,24 +1,17 @@
 "use client";
-import { jsx } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
-import '../listbox/Listbox.js';
-import '../listbox/ListboxCheckboxItem.js';
-import '../listbox/ListboxEmpty.js';
-import '../listbox/ListboxGroup.js';
-import '../listbox/ListboxItem.js';
-import '../listbox/ListboxItemIndicator.js';
-import '../listbox/ListboxItemized.js';
-import '../listbox/ListboxLabel.js';
-import { ListboxRadioItem } from '../listbox/ListboxRadioItem.js';
-import '../listbox/ListboxSeparator.js';
-import '../listbox/ListboxSwitchItem.js';
-import { SelectItem } from './SelectItem.js';
-
-const SelectRadioItem = forwardRef(
-  ({ children, ...props }, ref) => {
-    return /* @__PURE__ */ jsx(SelectItem, { asChild: true, ref, ...props, children: /* @__PURE__ */ jsx(ListboxRadioItem, { children }) });
-  }
-);
+import { ListboxRadioItem } from "../listbox/ListboxRadioItem.js";
+import { SelectItem } from "./SelectItem.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/select/SelectRadioItem.tsx
+const SelectRadioItem = forwardRef(({ children, ...props }, ref) => {
+	return /* @__PURE__ */ jsx(SelectItem, {
+		asChild: true,
+		ref,
+		...props,
+		children: /* @__PURE__ */ jsx(ListboxRadioItem, { children })
+	});
+});
 SelectRadioItem.displayName = "@optiaxiom/react/SelectRadioItem";
-
+//#endregion
 export { SelectRadioItem };

package/dist/esm/packages/react/src/select/SelectTrigger.js

@@ -1,103 +1,92 @@
 "use client";
-import { jsx } from 'react/jsx-runtime';
-import { useId } from '@radix-ui/react-id';
-import { PopperAnchor } from '@radix-ui/react-popper';
-import { createSlot } from '@radix-ui/react-slot';
-import clsx from 'clsx';
-import { forwardRef, useRef, useState, useEffect } from 'react';
-import { AngleMenuButton } from '../angle-menu-button/AngleMenuButton.js';
-import '../box/Box.js';
-import { extractBoxProps } from '../box/extractBoxProps.js';
-import { useFieldLabelTrigger } from '../hooks/useFieldLabelTrigger.js';
-import '../utils/conditions.js';
-import { decorateChildren } from '../utils/decorateChildren.js';
-import '../utils/isHoverSupported.js';
-import { Text } from '../text/Text.js';
-import { useSelectContext } from './SelectContext.js';
-
+import { extractBoxProps } from "../box/extractBoxProps.js";
+import { decorateChildren } from "../utils/decorateChildren.js";
+import { Text } from "../text/Text.js";
+import { AngleMenuButton } from "../angle-menu-button/AngleMenuButton.js";
+import { useFieldLabelTrigger } from "../hooks/useFieldLabelTrigger.js";
+import { useSelectContext } from "./SelectContext.js";
+import { useId } from "@radix-ui/react-id";
+import { forwardRef, useEffect, useRef, useState } from "react";
+import { createSlot } from "@radix-ui/react-slot";
+import clsx from "clsx";
+import { jsx } from "react/jsx-runtime";
+import { PopperAnchor } from "@radix-ui/react-popper";
+//#region src/select/SelectTrigger.tsx
 const Slot = createSlot("@optiaxiom/react/SelectTrigger");
-const SelectTrigger = forwardRef(
-  ({
-    "aria-labelledby": ariaLabelledBy,
-    asChild,
-    children,
-    onBlur: onBlurProp,
-    onKeyDown,
-    placeholder,
-    ...props
-  }, ref) => {
-    const { disabled, downshift, isOpen, items, onBlur, selectedItem } = useSelectContext("@optiaxiom/react/SelectTrigger");
-    const { boxProps, restProps } = extractBoxProps(props);
-    const buttonRef = useRef(null);
-    const labelId = useFieldLabelTrigger(buttonRef, ariaLabelledBy);
-    const valueId = useId();
-    const [focusOnOpen] = useState(isOpen);
-    useEffect(
-      function() {
-        if (focusOnOpen && buttonRef.current) {
-          buttonRef.current.focus();
-        }
-      },
-      [focusOnOpen]
-    );
-    const value = selectedItem?.value ? selectedItem.label || placeholder : placeholder;
-    return /* @__PURE__ */ jsx(PopperAnchor, { asChild: true, children: /* @__PURE__ */ jsx(
-      Slot,
-      {
-        ref,
-        ...boxProps,
-        ...downshift.getToggleButtonProps({
-          ...restProps,
-          "aria-labelledby": labelId ? clsx(labelId, valueId) : valueId,
-          disabled,
-          onBlur: (event) => {
-            onBlurProp?.(event);
-            onBlur?.(event);
-          },
-          onKeyDown: (event) => {
-            onKeyDown?.(event);
-            document.dispatchEvent(new Event("tooltip.open"));
-            if (isOpen) {
-              return;
-            }
-            const selectedItemIndex = downshift.selectedItem ? items.indexOf(downshift.selectedItem) : -1;
-            switch (event.key) {
-              case "ArrowLeft": {
-                let prevItemIndex = selectedItemIndex;
-                for (prevItemIndex--; prevItemIndex >= 0; prevItemIndex--) {
-                  const item = items[prevItemIndex];
-                  if (!item.disabledReason) {
-                    break;
-                  }
-                }
-                downshift.selectItem(items[Math.max(0, prevItemIndex)]);
-                break;
-              }
-              case "ArrowRight": {
-                let nextItemIndex = selectedItemIndex;
-                for (nextItemIndex++; nextItemIndex < items.length; nextItemIndex++) {
-                  const item = items[nextItemIndex];
-                  if (!item.disabledReason) {
-                    break;
-                  }
-                }
-                downshift.selectItem(
-                  items[Math.min(nextItemIndex, items.length - 1)]
-                );
-                break;
-              }
-            }
-          },
-          type: "button"
-        }),
-        children: asChild ? decorateChildren(
-          { asChild, children },
-          (children2) => (children2 ?? value) && /* @__PURE__ */ jsx(Text, { asChild: true, truncate: true, children: /* @__PURE__ */ jsx("span", { id: valueId, children: children2 ?? value }) })
-        ) : /* @__PURE__ */ jsx(AngleMenuButton, { ref: buttonRef, children: /* @__PURE__ */ jsx(Text, { asChild: true, truncate: true, children: /* @__PURE__ */ jsx("span", { id: valueId, children: children ?? value }) }) })
-      }
-    ) });
-  }
-);
+/**
+* @group Select
+* @extends Button
+*/
+const SelectTrigger = forwardRef(({ "aria-labelledby": ariaLabelledBy, asChild, children, onBlur: onBlurProp, onKeyDown, placeholder, ...props }, ref) => {
+	const { disabled, downshift, isOpen, items, onBlur, selectedItem } = useSelectContext("@optiaxiom/react/SelectTrigger");
+	const { boxProps, restProps } = extractBoxProps(props);
+	const buttonRef = useRef(null);
+	const labelId = useFieldLabelTrigger(buttonRef, ariaLabelledBy);
+	const valueId = useId();
+	const [focusOnOpen] = useState(isOpen);
+	useEffect(function() {
+		if (focusOnOpen && buttonRef.current) buttonRef.current.focus();
+	}, [focusOnOpen]);
+	const value = selectedItem?.value ? selectedItem.label || placeholder : placeholder;
+	return /* @__PURE__ */ jsx(PopperAnchor, {
+		asChild: true,
+		children: /* @__PURE__ */ jsx(Slot, {
+			ref,
+			...boxProps,
+			...downshift.getToggleButtonProps({
+				...restProps,
+				"aria-labelledby": labelId ? clsx(labelId, valueId) : valueId,
+				disabled,
+				onBlur: (event) => {
+					onBlurProp?.(event);
+					onBlur?.(event);
+				},
+				onKeyDown: (event) => {
+					onKeyDown?.(event);
+					document.dispatchEvent(new Event("tooltip.open"));
+					if (isOpen) return;
+					const selectedItemIndex = downshift.selectedItem ? items.indexOf(downshift.selectedItem) : -1;
+					switch (event.key) {
+						case "ArrowLeft": {
+							let prevItemIndex = selectedItemIndex;
+							for (prevItemIndex--; prevItemIndex >= 0; prevItemIndex--) if (!items[prevItemIndex].disabledReason) break;
+							downshift.selectItem(items[Math.max(0, prevItemIndex)]);
+							break;
+						}
+						case "ArrowRight": {
+							let nextItemIndex = selectedItemIndex;
+							for (nextItemIndex++; nextItemIndex < items.length; nextItemIndex++) if (!items[nextItemIndex].disabledReason) break;
+							downshift.selectItem(items[Math.min(nextItemIndex, items.length - 1)]);
+							break;
+						}
+					}
+				},
+				type: "button"
+			}),
+			children: asChild ? decorateChildren({
+				asChild,
+				children
+			}, (children) => (children ?? value) && /* @__PURE__ */ jsx(Text, {
+				asChild: true,
+				truncate: true,
+				children: /* @__PURE__ */ jsx("span", {
+					id: valueId,
+					children: children ?? value
+				})
+			})) : /* @__PURE__ */ jsx(AngleMenuButton, {
+				ref: buttonRef,
+				children: /* @__PURE__ */ jsx(Text, {
+					asChild: true,
+					truncate: true,
+					children: /* @__PURE__ */ jsx("span", {
+						id: valueId,
+						children: children ?? value
+					})
+				})
+			})
+		})
+	});
+});
 SelectTrigger.displayName = "@optiaxiom/react/SelectTrigger";
-
+//#endregion
 export { SelectTrigger };

package/dist/esm/packages/react/src/select/useObserveReset.js

@@ -1,19 +1,15 @@
-import { useEffect } from 'react';
-
+import { useEffect } from "react";
+//#region src/select/useObserveReset.ts
 const useObserveReset = (inputRef, setValue) => {
-  useEffect(() => {
-    const input = inputRef.current;
-    if (!input) {
-      return;
-    }
-    const form = input.closest("form");
-    if (!form) {
-      return;
-    }
-    const listener = () => setValue("");
-    form.addEventListener("reset", listener);
-    return () => form.removeEventListener("reset", listener);
-  }, [inputRef, setValue]);
+	useEffect(() => {
+		const input = inputRef.current;
+		if (!input) return;
+		const form = input.closest("form");
+		if (!form) return;
+		const listener = () => setValue("");
+		form.addEventListener("reset", listener);
+		return () => form.removeEventListener("reset", listener);
+	}, [inputRef, setValue]);
 };
-
+//#endregion
 export { useObserveReset };

package/dist/esm/packages/react/src/separator/Separator-css.js

@@ -1,9 +1,48 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-BnNnDBQ3.css';
-import './../../../../assets/src/separator/Separator.css.ts.vanilla-BPwS4DP0.css';
-import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
-import { createAtomsFn as createSprinkles } from '../../../../node_modules/.pnpm/@vanilla-extract_sprinkles@1.6.5_patch_hash_530004842e1937cf2ffe2728e2a18629c5dd638aa44_2d8dc8a2e1437882c3e115bf7a65883f/node_modules/@vanilla-extract/sprinkles/createRuntimeSprinkles/dist/vanilla-extract-sprinkles-createRuntimeSprinkles.esm.js';
-
-var base = recipeRuntime({base:{borderColor:'border.secondary'}});
-var separator = createSprinkles((function(){var x={conditions:{defaultCondition:'base',conditionNames:['sm','md','base'],responsiveArray:['base','sm','md']},styles:{orientation:{values:{horizontal:{conditions:{sm:'wff226',md:'_19aulzx',base:'_1m9dkcl'},defaultClass:'_1m9dkcl'},vertical:{conditions:{sm:'_6zvf5s',md:'zchz67',base:'qqb4c7'},defaultClass:'qqb4c7'}},responsiveArray:undefined}}};x.styles.orientation.responsiveArray=x.conditions.responsiveArray;return x;}()));
-
+import { createSprinkles } from "../../../../node_modules/.pnpm/@vanilla-extract_sprinkles@1.6.5_patch_hash_530004842e1937cf2ffe2728e2a18629c5dd638aa44_2d8dc8a2e1437882c3e115bf7a65883f/node_modules/@vanilla-extract/sprinkles/createRuntimeSprinkles/dist/vanilla-extract-sprinkles-createRuntimeSprinkles.esm.js";
+import { recipeRuntime } from "../vanilla-extract/recipeRuntime.js";
+import "./../../../../assets/src/layers/layers.css.ts.vanilla-mKFUr5lc.css";
+import "./../../../../assets/src/separator/Separator.css.ts.vanilla-BJ_CZowJ.css";
+//#region src/separator/Separator.css.ts
+var base = recipeRuntime({ base: { borderColor: "border.secondary" } });
+var separator = createSprinkles(function() {
+	var x = {
+		conditions: {
+			defaultCondition: "base",
+			conditionNames: [
+				"sm",
+				"md",
+				"base"
+			],
+			responsiveArray: [
+				"base",
+				"sm",
+				"md"
+			]
+		},
+		styles: { orientation: {
+			values: {
+				horizontal: {
+					conditions: {
+						sm: "_1ssmpmf",
+						md: "_1bhwllt",
+						base: "_1pb2g73"
+					},
+					defaultClass: "_1pb2g73"
+				},
+				vertical: {
+					conditions: {
+						sm: "yfiker",
+						md: "_2k9jo7",
+						base: "_15i57qw"
+					},
+					defaultClass: "_15i57qw"
+				}
+			},
+			responsiveArray: void 0
+		} }
+	};
+	x.styles.orientation.responsiveArray = x.conditions.responsiveArray;
+	return x;
+}());
+//#endregion
 export { base, separator };

package/dist/esm/packages/react/src/separator/Separator.js

@@ -1,33 +1,32 @@
 "use client";
-import { jsx } from 'react/jsx-runtime';
-import * as RadixSeparator from '@radix-ui/react-separator';
-import clsx from 'clsx';
-import { forwardRef } from 'react';
-import { Box } from '../box/Box.js';
-import { normalizeResponsiveValue } from '../sprinkles/sprinkles.js';
-import '../sprinkles/sprinklesMerge.js';
-import '../field/FieldContext.js';
-import { useResponsiveMatches } from '../hooks/useResponsiveMatches.js';
-import { base, separator } from './Separator-css.js';
-
-const Separator = forwardRef(
-  ({ className, orientation = "horizontal", ...props }, ref) => {
-    const resolvedOrientation = useResponsiveMatches({
-      base: "horizontal",
-      ...normalizeResponsiveValue(orientation)
-    });
-    return /* @__PURE__ */ jsx(
-      Box,
-      {
-        asChild: true,
-        ref,
-        ...base({}, clsx(separator({ orientation }), className)),
-        ...props,
-        children: /* @__PURE__ */ jsx(RadixSeparator.Root, { orientation: resolvedOrientation })
-      }
-    );
-  }
-);
+import { normalizeResponsiveValue } from "../sprinkles/sprinkles.js";
+import { Box } from "../box/Box.js";
+import { useResponsiveMatches } from "../hooks/useResponsiveMatches.js";
+import { base, separator } from "./Separator-css.js";
+import { forwardRef } from "react";
+import clsx from "clsx";
+import { jsx } from "react/jsx-runtime";
+import * as RadixSeparator from "@radix-ui/react-separator";
+//#region src/separator/Separator.tsx
+/**
+* `Separator` component is used to visually separate items in a list or group. By default the orientation is set to `horizontal`.
+*
+* @since 0.1.0
+* @category layout
+*/
+const Separator = forwardRef(({ className, orientation = "horizontal", ...props }, ref) => {
+	const resolvedOrientation = useResponsiveMatches({
+		base: "horizontal",
+		...normalizeResponsiveValue(orientation)
+	});
+	return /* @__PURE__ */ jsx(Box, {
+		asChild: true,
+		ref,
+		...base({}, clsx(separator({ orientation }), className)),
+		...props,
+		children: /* @__PURE__ */ jsx(RadixSeparator.Root, { orientation: resolvedOrientation })
+	});
+});
 Separator.displayName = "@optiaxiom/react/Separator";
-
+//#endregion
 export { Separator };

package/dist/esm/packages/react/src/sidebar/Sidebar.js

@@ -1,50 +1,41 @@
 "use client";
-import { jsx } from 'react/jsx-runtime';
-import { useId } from '@radix-ui/react-id';
-import { useControllableState } from '@radix-ui/react-use-controllable-state';
-import { forwardRef } from 'react';
-import { Box } from '../box/Box.js';
-import '../sprinkles/sprinkles.js';
-import '../sprinkles/sprinklesMerge.js';
-import { SidebarProvider } from './SidebarContext.js';
-
-const Sidebar = forwardRef(
-  ({
-    children,
-    defaultExpanded = false,
-    expanded: expandedProp,
-    onExpandedChange,
-    ...props
-  }, ref) => {
-    const [expanded, setExpanded] = useControllableState({
-      caller: "@optiaxiom/react/Sidebar",
-      defaultProp: defaultExpanded,
-      onChange: onExpandedChange,
-      prop: expandedProp
-    });
-    return /* @__PURE__ */ jsx(
-      SidebarProvider,
-      {
-        expanded,
-        navId: useId(),
-        onExpandedChange: setExpanded,
-        spacing: "8",
-        children: /* @__PURE__ */ jsx(
-          Box,
-          {
-            alignItems: "stretch",
-            display: "flex",
-            gap: "0",
-            h: "full",
-            ref,
-            ...props,
-            children
-          }
-        )
-      }
-    );
-  }
-);
+import { Box } from "../box/Box.js";
+import { SidebarProvider } from "./SidebarContext.js";
+import { useId } from "@radix-ui/react-id";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import { useControllableState } from "@radix-ui/react-use-controllable-state";
+//#region src/sidebar/Sidebar.tsx
+/**
+* Primary navigation menu for left side of the page that includes support for branding, links, etc.
+*
+* @group Sidebar
+* @category navigation
+* @since 0.4.0
+*/
+const Sidebar = forwardRef(({ children, defaultExpanded = false, expanded: expandedProp, onExpandedChange, ...props }, ref) => {
+	const [expanded, setExpanded] = useControllableState({
+		caller: "@optiaxiom/react/Sidebar",
+		defaultProp: defaultExpanded,
+		onChange: onExpandedChange,
+		prop: expandedProp
+	});
+	return /* @__PURE__ */ jsx(SidebarProvider, {
+		expanded,
+		navId: useId(),
+		onExpandedChange: setExpanded,
+		spacing: "8",
+		children: /* @__PURE__ */ jsx(Box, {
+			alignItems: "stretch",
+			display: "flex",
+			gap: "0",
+			h: "full",
+			ref,
+			...props,
+			children
+		})
+	});
+});
 Sidebar.displayName = "@optiaxiom/react/Sidebar";
-
+//#endregion
 export { Sidebar };