@optiaxiom/react 3.4.2 → 3.5.0

package/dist/cjs/search-input.js

@@ -0,0 +1,3 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_search_input = require("./search-input-D2X1UQ1r.js");
+exports.SearchInput = require_search_input.SearchInput;

package/dist/cjs/segmented-control-DVSAXbQi.js

@@ -0,0 +1,67 @@
+"use client";
+const require_rolldown_runtime = require("./rolldown-runtime-C0BPl7ul.js");
+const require_button = require("./button-BO_WcwyT.js");
+const require_group = require("./group.js");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _radix_ui_react_context = require("@radix-ui/react-context");
+let _radix_ui_react_toggle_group = require("@radix-ui/react-toggle-group");
+_radix_ui_react_toggle_group = require_rolldown_runtime.__toESM(_radix_ui_react_toggle_group, 1);
+//#region src/segmented-control/SegmentedControlContext.ts
+const [SegmentedControlProvider, useSegmentedControlContext] = (0, _radix_ui_react_context.createContext)("@optiaxiom/react/SegmentedControl");
+//#endregion
+//#region src/segmented-control/SegmentedControl.tsx
+/**
+* Toggle buttons for switching between different values or views.
+*
+* @group SegmentedControl
+* @category actions
+* @category form
+* @since 0.2.0
+*/
+const SegmentedControl = (0, react.forwardRef)(({ children, type = "single", ...props }, ref) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_group.Group, {
+		asChild: true,
+		gap: "0",
+		...props,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_toggle_group.Root, {
+			ref,
+			type,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SegmentedControlProvider, { children })
+		})
+	});
+});
+SegmentedControl.displayName = "@optiaxiom/react/SegmentedControl";
+//#endregion
+//#region src/segmented-control/SegmentedControlItem.tsx
+/**
+* @group SegmentedControl
+* @extends Button
+*/
+const SegmentedControlItem = (0, react.forwardRef)(({ asChild, children, ...props }, ref) => {
+	useSegmentedControlContext("@optiaxiom/react/SegmentedControlItem");
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_toggle_group.Item, {
+		appearance: "subtle",
+		asChild: true,
+		ref,
+		...props,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_button.Button, {
+			asChild,
+			children
+		})
+	});
+});
+SegmentedControlItem.displayName = "@optiaxiom/react/SegmentedControlItem";
+//#endregion
+Object.defineProperty(exports, "SegmentedControl", {
+	enumerable: true,
+	get: function() {
+		return SegmentedControl;
+	}
+});
+Object.defineProperty(exports, "SegmentedControlItem", {
+	enumerable: true,
+	get: function() {
+		return SegmentedControlItem;
+	}
+});

package/dist/cjs/segmented-control.js

@@ -0,0 +1,4 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_segmented_control = require("./segmented-control-DVSAXbQi.js");
+exports.SegmentedControl = require_segmented_control.SegmentedControl;
+exports.SegmentedControlItem = require_segmented_control.SegmentedControlItem;

package/dist/cjs/select-4Cy3SWkh.js

@@ -0,0 +1,439 @@
+"use client";
+const require_rolldown_runtime = require("./rolldown-runtime-C0BPl7ul.js");
+const require_box = require("./box-B2PXBdH7.js");
+const require_useSurface = require("./useSurface-Dy0GdyeS.js");
+const require_decorateChildren = require("./decorateChildren-BuXnWpNx.js");
+const require_button = require("./button-BO_WcwyT.js");
+const require_SuggestionPopover = require("./SuggestionPopover-Bu_sY4dq.js");
+const require_text = require("./text-BWyl3PQL.js");
+const require_transition = require("./transition-tqiyzYYq.js");
+const require_Portal = require("./Portal-DI9aR5XU.js");
+const require_VisuallyHidden = require("./VisuallyHidden-DK0Wtj7A.js");
+const require_angle_menu_button = require("./angle-menu-button.js");
+const require_FieldContext = require("./FieldContext-MRvFQT4y.js");
+const require_utils = require("./utils-Dt_U6NjH.js");
+const require_useObserveValue = require("./useObserveValue-B_tuG44C.js");
+const require_avatar = require("./avatar-QYjj8itt.js");
+const require_tooltip = require("./tooltip-DgIDNGYv.js");
+const require_useSuggestions = require("./useSuggestions-BqrBlpWi.js");
+const require_modal = require("./modal.js");
+let _radix_ui_react_id = require("@radix-ui/react-id");
+let react = require("react");
+let _radix_ui_react_slot = require("@radix-ui/react-slot");
+let clsx = require("clsx");
+clsx = require_rolldown_runtime.__toESM(clsx, 1);
+let react_jsx_runtime = require("react/jsx-runtime");
+let _radix_ui_react_context = require("@radix-ui/react-context");
+let _radix_ui_react_compose_refs = require("@radix-ui/react-compose-refs");
+let _radix_ui_react_use_controllable_state = require("@radix-ui/react-use-controllable-state");
+let downshift = require("downshift");
+let _radix_ui_react_popper = require("@radix-ui/react-popper");
+//#region src/select/SelectContext.ts
+const resolveItemProperty = (property, ...context) => typeof property === "function" ? property(...context) : property;
+const [SelectProvider, useSelectContext] = (0, _radix_ui_react_context.createContext)("@optiaxiom/react/Select");
+//#endregion
+//#region src/select/SelectHiddenSelect.tsx
+const SelectHiddenSelect = (0, react.forwardRef)(({ defaultValue, disabled, name, onChange, required, value }, ref) => {
+	const { items } = useSelectContext("@optiaxiom/react/SelectHiddenSelect");
+	const options = (0, react.useMemo)(() => items.map((item) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+		value: item.value,
+		children: item.value
+	}, item.value)), [items]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_VisuallyHidden.VisuallyHidden, {
+		"aria-hidden": true,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("select", {
+			defaultValue,
+			disabled,
+			name,
+			onChange,
+			ref,
+			required,
+			tabIndex: -1,
+			value,
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", { value: "" }), options]
+		})
+	});
+});
+SelectHiddenSelect.displayName = "@optiaxiom/react/SelectHiddenSelect";
+//#endregion
+//#region src/select/useObserveReset.ts
+const useObserveReset = (inputRef, setValue) => {
+	(0, react.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
+//#region src/select/Select.tsx
+/**
+* Single-select form input for choosing one value from a dropdown list.
+* Works like a native `<select>` — supports `name`, `value`, `onChange`,
+* and works with `<form>` submissions.
+*
+* Must be used with SelectTrigger and SelectContent sub-components.
+*
+* Use Select when: single value selection in a form, controlled/uncontrolled
+* form input, you need form submission support.
+*
+* Use Menu instead when: you need multi-select, actions (edit/delete),
+* links, filtering/search, nested sub-menus, or checkbox/radio items.
+*
+* @group Select
+* @category form
+* @since 1.4.0
+*/
+const Select = (0, react.forwardRef)(({ children, defaultOpen = false, defaultValue, disabled, loading, name, onBlur, onChange, onOpenChange, onValueChange, open, options, required, value }, outerRef) => {
+	const innerRef = (0, react.useRef)(null);
+	const ref = (0, _radix_ui_react_compose_refs.useComposedRefs)(innerRef, outerRef);
+	const surface = require_useSurface.useSurface("property");
+	const suggestion = require_useSuggestions.useSuggestions("property", "value")?.[0];
+	const [shadowValue, setShadowValue] = (0, _radix_ui_react_use_controllable_state.useControllableState)({
+		caller: "@optiaxiom/react/Select",
+		defaultProp: defaultValue ?? "",
+		onChange: (newValue) => {
+			surface?.track({
+				name: "changed",
+				value: newValue
+			});
+			if (suggestion && newValue === suggestion.value) surface?.accept(suggestion.id);
+			onValueChange?.(newValue);
+		},
+		prop: value
+	});
+	const forceValueChange = require_useObserveValue.useObserveValue(innerRef, setShadowValue);
+	useObserveReset(innerRef, setShadowValue);
+	const items = (0, react.useMemo)(() => {
+		return options.map((option) => option.value === suggestion?.value ? {
+			...option,
+			detail: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_avatar.Avatar, {
+				fallback: "opal",
+				size: "2xs"
+			}),
+			group: {
+				hidden: true,
+				label: "Suggested",
+				priority: 1e3
+			}
+		} : option).sort((a, b) => {
+			return (b.group?.priority ?? 0) - (a.group?.priority ?? 0);
+		});
+	}, [options, suggestion]);
+	const selectedItem = (0, react.useMemo)(() => shadowValue !== void 0 ? items.find((item) => item.value === shadowValue) : void 0, [items, shadowValue]);
+	const [isOpen, setIsOpen] = (0, _radix_ui_react_use_controllable_state.useControllableState)({
+		caller: "@optiaxiom/react/Select",
+		defaultProp: defaultOpen,
+		onChange: onOpenChange,
+		prop: open
+	});
+	const [highlightedIndex, setHighlightedIndex] = require_utils.useHighlightedIndex(isOpen, () => selectedItem ? items.findIndex((item) => !item.disabledReason && selectedItem.value === item.value) : -1);
+	const highlightedItemRef = (0, react.useRef)(null);
+	const [focusVisible, setFocusVisible] = (0, react.useState)(false);
+	(0, react.useEffect)(() => {
+		if (!isOpen) setFocusVisible(false);
+	}, [isOpen]);
+	const downshift$1 = (0, downshift.useSelect)({
+		highlightedIndex: highlightedIndex === -1 ? items.findIndex((item) => !item.disabledReason) : highlightedIndex,
+		isItemDisabled: (item) => !!item.disabledReason,
+		isOpen,
+		items,
+		itemToKey: (item) => item !== null ? item.value : item,
+		itemToString: (item) => item !== null ? item.label : "",
+		onHighlightedIndexChange(changes) {
+			if (changes.type === downshift.useSelect.stateChangeTypes.MenuMouseLeave) return;
+			if (changes.type === downshift.useSelect.stateChangeTypes.ItemMouseMove && isOpen || changes.isOpen) setHighlightedIndex(changes.highlightedIndex);
+			if (!(changes.type === downshift.useSelect.stateChangeTypes.ItemMouseMove || changes.type === downshift.useSelect.stateChangeTypes.ToggleButtonClick)) setFocusVisible(true);
+		},
+		onIsOpenChange({ isOpen, type }) {
+			setIsOpen(isOpen);
+			if (isOpen && (type === downshift.useSelect.stateChangeTypes.ToggleButtonKeyDownArrowDown || type === downshift.useSelect.stateChangeTypes.ToggleButtonKeyDownArrowUp)) setFocusVisible(true);
+		},
+		onSelectedItemChange({ selectedItem }) {
+			forceValueChange(selectedItem?.value ?? "");
+		},
+		selectedItem: selectedItem ?? null,
+		stateReducer: (state, actionAndChanges) => {
+			const { changes, type } = actionAndChanges;
+			switch (type) {
+				case downshift.useSelect.stateChangeTypes.ToggleButtonBlur: return {
+					...changes,
+					/**
+					* Do not select highlighted item when tabbing out of clicking
+					* outside to close the menu.
+					*/
+					selectedItem: state.selectedItem
+				};
+				default: return changes;
+			}
+		}
+	});
+	/**
+	* Dummy calls to suppress warning from downshift
+	*/
+	downshift$1.getToggleButtonProps({}, { suppressRefError: true });
+	downshift$1.getMenuProps({}, { suppressRefError: true });
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_popper.Popper, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(SelectProvider, {
+		disabled,
+		downshift: downshift$1,
+		focusVisible,
+		highlightedItem: items[downshift$1.highlightedIndex],
+		highlightedItemRef,
+		isOpen,
+		items,
+		loading,
+		onBlur,
+		selectedItem,
+		setFocusVisible,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SelectHiddenSelect, {
+			defaultValue,
+			disabled,
+			name,
+			onChange: (event) => {
+				/**
+				* Explicit wrapper needed to satisfy React's controlled component
+				* requirement. When `value` prop is provided, React expects an
+				* onChange handler to avoid "controlled without onChange"
+				* warnings. Actual value changes are driven by Downshift and the
+				* shadow value system (onValueChange), not by this onChange
+				* handler.
+				*/
+				onChange?.(event);
+			},
+			ref,
+			required,
+			value
+		}), children]
+	}) });
+});
+Select.displayName = "@optiaxiom/react/Select";
+//#endregion
+//#region src/select/SelectItem.tsx
+const SelectItem = (0, react.forwardRef)(({ children, index, item, onMouseMove, size, ...props }, outerRef) => {
+	const { downshift, focusVisible, highlightedItem, highlightedItemRef, isOpen, items, selectedItem } = useSelectContext("@optiaxiom/react/SelectItem");
+	const ref = (0, _radix_ui_react_compose_refs.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__ */ (0, react_jsx_runtime.jsx)(require_box.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
+//#region src/select/SelectRadioItem.tsx
+const SelectRadioItem = (0, react.forwardRef)(({ children, ...props }, ref) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SelectItem, {
+		asChild: true,
+		ref,
+		...props,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_SuggestionPopover.ListboxRadioItem, { children })
+	});
+});
+SelectRadioItem.displayName = "@optiaxiom/react/SelectRadioItem";
+//#endregion
+//#region src/select/SelectContent.tsx
+/**
+* @group Select
+*/
+const SelectContent = (0, react.forwardRef)(({ align = "start", "aria-label": ariaLabel, children, onPointerDown, side = "bottom", size, ...props }, ref) => {
+	const { labelId: fieldLabelId } = require_FieldContext.useFieldContext("@optiaxiom/react/SelectContent");
+	const { downshift, highlightedItem, highlightedItemRef, isOpen, items, loading } = useSelectContext("@optiaxiom/react/SelectContent");
+	const labelId = (0, _radix_ui_react_id.useId)();
+	const [placed, setPlaced] = (0, react.useState)(false);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_transition.TransitionGroup, {
+		open: isOpen,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Portal.Portal, {
+			asChild: true,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_modal.ModalLayer, {
+				asChild: true,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_SuggestionPopover.ModalListbox, {
+					"aria-label": ariaLabel || "Menu",
+					asChild: true,
+					maxH: "sm",
+					minW: "trigger",
+					onPointerDown: (event) => {
+						onPointerDown?.(event);
+						if (event.defaultPrevented) return;
+						if (event.target instanceof Element && event.target.closest("[role=\"option\"]")) return;
+						event.preventDefault();
+					},
+					ref,
+					role: "dialog",
+					size,
+					...props,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_popper.PopperContent, {
+						align,
+						"aria-labelledby": (0, clsx.default)(fieldLabelId, labelId),
+						collisionPadding: 16,
+						side,
+						sideOffset: 4,
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_SuggestionPopover.ListboxItemized, {
+							highlightedItem,
+							items,
+							itemToKey: (item) => item.value,
+							loading: loading ? "skeleton" : void 0,
+							onPlacedChange: (placed) => {
+								setPlaced(placed);
+								if (placed && highlightedItemRef.current) highlightedItemRef.current.scrollIntoView({ block: "nearest" });
+							},
+							...downshift.getMenuProps({ "aria-labelledby": fieldLabelId }, { suppressRefError: !placed }),
+							children: children ?? ((item, index, prevItem) => {
+								const group = item.group;
+								return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+									require_utils.shouldShowSeparator(group, prevItem) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_SuggestionPopover.ListboxSeparator, {}),
+									require_utils.shouldShowGroup(group, prevItem) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_SuggestionPopover.ListboxLabel, { children: group.label }),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_tooltip.Tooltip, {
+										content: resolveItemProperty(item.disabledReason),
+										children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(SelectRadioItem, {
+											addonBefore: item.addon,
+											"aria-label": item["aria-label"],
+											description: item.description,
+											index,
+											item,
+											children: [item.label, item.detail && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text.Text, {
+												asChild: true,
+												color: "fg.secondary",
+												truncate: true,
+												children: require_button.fallbackSpan(item.detail)
+											})]
+										}, item.value)
+									})
+								] });
+							})
+						})
+					})
+				})
+			})
+		})
+	});
+});
+SelectContent.displayName = "@optiaxiom/react/SelectContent";
+//#endregion
+//#region src/select/SelectTrigger.tsx
+const Slot = (0, _radix_ui_react_slot.createSlot)("@optiaxiom/react/SelectTrigger");
+/**
+* @group Select
+* @extends Button
+*/
+const SelectTrigger = (0, react.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 } = require_box.extractBoxProps(props);
+	const buttonRef = (0, react.useRef)(null);
+	const labelId = require_utils.useFieldLabelTrigger(buttonRef, ariaLabelledBy);
+	const valueId = (0, _radix_ui_react_id.useId)();
+	const [focusOnOpen] = (0, react.useState)(isOpen);
+	(0, react.useEffect)(function() {
+		if (focusOnOpen && buttonRef.current) buttonRef.current.focus();
+	}, [focusOnOpen]);
+	const value = selectedItem?.value ? selectedItem.label || placeholder : placeholder;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_popper.PopperAnchor, {
+		asChild: true,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Slot, {
+			"data-state": isOpen ? "open" : "closed",
+			ref,
+			...boxProps,
+			...downshift.getToggleButtonProps({
+				...restProps,
+				"aria-labelledby": labelId ? (0, clsx.default)(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 ? require_decorateChildren.decorateChildren({
+				asChild,
+				children
+			}, (children) => (children ?? value) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text.Text, {
+				asChild: true,
+				truncate: true,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					id: valueId,
+					children: children ?? value
+				})
+			})) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_angle_menu_button.AngleMenuButton, {
+				ref: buttonRef,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text.Text, {
+					asChild: true,
+					truncate: true,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						id: valueId,
+						children: children ?? value
+					})
+				})
+			})
+		})
+	});
+});
+SelectTrigger.displayName = "@optiaxiom/react/SelectTrigger";
+//#endregion
+Object.defineProperty(exports, "Select", {
+	enumerable: true,
+	get: function() {
+		return Select;
+	}
+});
+Object.defineProperty(exports, "SelectContent", {
+	enumerable: true,
+	get: function() {
+		return SelectContent;
+	}
+});
+Object.defineProperty(exports, "SelectTrigger", {
+	enumerable: true,
+	get: function() {
+		return SelectTrigger;
+	}
+});

package/dist/cjs/select.js

@@ -0,0 +1,5 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_select = require("./select-4Cy3SWkh.js");
+exports.Select = require_select.Select;
+exports.SelectContent = require_select.SelectContent;
+exports.SelectTrigger = require_select.SelectTrigger;

package/dist/cjs/separator-DYd80dzd.js

@@ -0,0 +1,146 @@
+"use client";
+const require_rolldown_runtime = require("./rolldown-runtime-C0BPl7ul.js");
+const require_box = require("./box-B2PXBdH7.js");
+const require_sprinkles = require("./sprinkles-COrycuH3.js");
+const require_mapValues = require("./mapValues-BdSCiF8F.js");
+const require_recipeRuntime = require("./recipeRuntime-BV5B1H9r.js");
+let react = require("react");
+require("./assets/layers.css.ts.vanilla-CTOkUrdE.css");
+let clsx = require("clsx");
+clsx = require_rolldown_runtime.__toESM(clsx, 1);
+let react_jsx_runtime = require("react/jsx-runtime");
+let _optiaxiom_globals = require("@optiaxiom/globals");
+let _radix_ui_react_separator = require("@radix-ui/react-separator");
+_radix_ui_react_separator = require_rolldown_runtime.__toESM(_radix_ui_react_separator, 1);
+require("./assets/Separator.css.ts.vanilla-OUVdbtND.css");
+//#region src/utils/conditions.ts
+const conditions = {
+	conditions: {
+		...require_mapValues.mapValues(_optiaxiom_globals.tokens.screens, (width) => ({ "@media": `screen and (min-width: ${width})` })),
+		base: {}
+	},
+	defaultCondition: "base",
+	responsiveArray: [
+		"base",
+		"sm",
+		"md"
+	]
+};
+//#endregion
+//#region ../../node_modules/.pnpm/@mantine+hooks@8.3.18_react@18.3.1/node_modules/@mantine/hooks/esm/use-media-query/use-media-query.mjs
+function attachMediaListener(query, callback) {
+	try {
+		query.addEventListener("change", callback);
+		return () => query.removeEventListener("change", callback);
+	} catch (e) {
+		query.addListener(callback);
+		return () => query.removeListener(callback);
+	}
+}
+function getInitialValue(query, initialValue) {
+	if (typeof window !== "undefined" && "matchMedia" in window) return window.matchMedia(query).matches;
+	return false;
+}
+function useMediaQuery(query, initialValue, { getInitialValueInEffect } = { getInitialValueInEffect: true }) {
+	const [matches, setMatches] = (0, react.useState)(getInitialValueInEffect ? initialValue : getInitialValue(query));
+	(0, react.useEffect)(() => {
+		try {
+			const mediaQuery = window.matchMedia(query);
+			setMatches(mediaQuery.matches);
+			return attachMediaListener(mediaQuery, (event) => setMatches(event.matches));
+		} catch (e) {
+			return;
+		}
+	}, [query]);
+	return matches || false;
+}
+//#endregion
+//#region src/hooks/useResponsiveMatches.ts
+const list = ["md", "sm"];
+const useResponsiveMatches = (config) => {
+	const matches = {
+		base: true,
+		sm: useMediaQuery(conditions.conditions.sm["@media"], true),
+		md: useMediaQuery(conditions.conditions.md["@media"])
+	};
+	for (const name of list) if (config[name] && matches[name]) return config[name];
+	return config.base;
+};
+//#endregion
+//#region src/separator/Separator.css.ts
+var base = require_recipeRuntime.recipeRuntime({ base: { borderColor: "border.secondary" } });
+var separator = require_sprinkles.createSprinkles(function() {
+	var x = {
+		conditions: {
+			defaultCondition: "base",
+			conditionNames: [
+				"sm",
+				"md",
+				"base"
+			],
+			responsiveArray: [
+				"base",
+				"sm",
+				"md"
+			]
+		},
+		styles: { orientation: {
+			values: {
+				horizontal: {
+					conditions: {
+						sm: "gucmuk",
+						md: "_163n1ug",
+						base: "_1ud90u3"
+					},
+					defaultClass: "_1ud90u3"
+				},
+				vertical: {
+					conditions: {
+						sm: "_1wbo52p",
+						md: "_1ttaprs",
+						base: "_174x2r6"
+					},
+					defaultClass: "_174x2r6"
+				}
+			},
+			responsiveArray: void 0
+		} }
+	};
+	x.styles.orientation.responsiveArray = x.conditions.responsiveArray;
+	return x;
+}());
+//#endregion
+//#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 = (0, react.forwardRef)(({ className, orientation = "horizontal", ...props }, ref) => {
+	const resolvedOrientation = useResponsiveMatches({
+		base: "horizontal",
+		...require_sprinkles.normalizeResponsiveValue(orientation)
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_box.Box, {
+		asChild: true,
+		ref,
+		...base({}, (0, clsx.default)(separator({ orientation }), className)),
+		...props,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_separator.Root, { orientation: resolvedOrientation })
+	});
+});
+Separator.displayName = "@optiaxiom/react/Separator";
+//#endregion
+Object.defineProperty(exports, "Separator", {
+	enumerable: true,
+	get: function() {
+		return Separator;
+	}
+});
+Object.defineProperty(exports, "useResponsiveMatches", {
+	enumerable: true,
+	get: function() {
+		return useResponsiveMatches;
+	}
+});

package/dist/cjs/separator.js

@@ -0,0 +1,3 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_separator = require("./separator-DYd80dzd.js");
+exports.Separator = require_separator.Separator;