@optiaxiom/react 1.9.37 → 1.9.38

package/dist/esm/packages/react/src/search-input/SearchInput.js

@@ -1,71 +1,63 @@
 "use client";
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { useComposedRefs } from '@radix-ui/react-compose-refs';
-import { useControllableState } from '@radix-ui/react-use-controllable-state';
-import { forwardRef, useRef } from 'react';
-import { Button } from '../button/Button.js';
-import '../button/ButtonGroup.js';
-import { Group } from '../group/Group.js';
-import '../field/FieldContext.js';
-import { useObserveValue } from '../hooks/useObserveValue.js';
-import '../utils/conditions.js';
-import '../utils/isHoverSupported.js';
-import { IconMagnifyingGlass } from '../icons/IconMagnifyingGlass.js';
-import { IconX } from '../icons/IconX.js';
-import { Input } from '../input/Input.js';
-import '../input/InputAddon.js';
-import '../input/InputControl.js';
-import '../input/InputRoot.js';
-import { input, search, clear } from './SearchInput-css.js';
-
-const SearchInput = forwardRef(
-  ({ addonBefore, className, onChange, onValueClear, ...props }, outerRef) => {
-    const innerRef = useRef(null);
-    const ref = useComposedRefs(innerRef, outerRef);
-    const [value, setValue] = useControllableState({
-      caller: "@optiaxiom/react/SearchInput",
-      defaultProp: props.defaultValue,
-      prop: props.value
-    });
-    const forceValueChange = useObserveValue(innerRef, setValue);
-    return /* @__PURE__ */ jsx(
-      Input,
-      {
-        addonAfter: value && /* @__PURE__ */ jsx(
-          Button,
-          {
-            appearance: "subtle",
-            "aria-label": "Clear",
-            icon: value && /* @__PURE__ */ jsx(IconX, {}),
-            onPointerDown: (event) => {
-              event.preventDefault();
-              forceValueChange("");
-              onValueClear?.();
-            },
-            tabIndex: -1,
-            ...clear()
-          }
-        ),
-        addonBefore: /* @__PURE__ */ jsxs(Group, { gap: "8", children: [
-          /* @__PURE__ */ jsx(IconMagnifyingGlass, {}),
-          addonBefore
-        ] }),
-        addonPointerEvents: "none",
-        asChild: true,
-        autoComplete: "off",
-        onChange: (event) => {
-          onChange?.(event);
-          setValue(event.target.value);
-        },
-        ref,
-        type: "search",
-        ...search({}, className),
-        ...props,
-        children: /* @__PURE__ */ jsx("input", { ...input() })
-      }
-    );
-  }
-);
+import { Group } from "../group/Group.js";
+import { Button } from "../button/Button.js";
+import { IconX } from "../icons/IconX.js";
+import { useObserveValue } from "../hooks/useObserveValue.js";
+import { IconMagnifyingGlass } from "../icons/IconMagnifyingGlass.js";
+import { Input } from "../input/Input.js";
+import { clear, input, search } from "./SearchInput-css.js";
+import { forwardRef, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useComposedRefs } from "@radix-ui/react-compose-refs";
+import { useControllableState } from "@radix-ui/react-use-controllable-state";
+//#region src/search-input/SearchInput.tsx
+/**
+* Basic search input field with clear button.
+*
+* @category form
+* @since 0.1.0
+* @extends Input
+*/
+const SearchInput = forwardRef(({ addonBefore, className, onChange, onValueClear, ...props }, outerRef) => {
+	const innerRef = useRef(null);
+	const ref = useComposedRefs(innerRef, outerRef);
+	const [value, setValue] = useControllableState({
+		caller: "@optiaxiom/react/SearchInput",
+		defaultProp: props.defaultValue,
+		prop: props.value
+	});
+	const forceValueChange = useObserveValue(innerRef, setValue);
+	return /* @__PURE__ */ jsx(Input, {
+		addonAfter: value && /* @__PURE__ */ jsx(Button, {
+			appearance: "subtle",
+			"aria-label": "Clear",
+			icon: value && /* @__PURE__ */ jsx(IconX, {}),
+			onPointerDown: (event) => {
+				event.preventDefault();
+				forceValueChange("");
+				onValueClear?.();
+			},
+			tabIndex: -1,
+			...clear()
+		}),
+		addonBefore: /* @__PURE__ */ jsxs(Group, {
+			gap: "8",
+			children: [/* @__PURE__ */ jsx(IconMagnifyingGlass, {}), addonBefore]
+		}),
+		addonPointerEvents: "none",
+		asChild: true,
+		autoComplete: "off",
+		onChange: (event) => {
+			onChange?.(event);
+			setValue(event.target.value);
+		},
+		ref,
+		type: "search",
+		...search({}, className),
+		...props,
+		children: /* @__PURE__ */ jsx("input", { ...input() })
+	});
+});
 SearchInput.displayName = "@optiaxiom/react/SearchInput";
-
+//#endregion
 export { SearchInput };

package/dist/esm/packages/react/src/segmented-control/SegmentedControl.js

@@ -1,13 +1,30 @@
 "use client";
-import { jsx } from 'react/jsx-runtime';
-import * as RadixSegmentedControl from '@radix-ui/react-toggle-group';
-import { forwardRef } from 'react';
-import { Group } from '../group/Group.js';
-import { SegmentedControlProvider } from './SegmentedControlContext.js';
-
+import { Group } from "../group/Group.js";
+import { SegmentedControlProvider } from "./SegmentedControlContext.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import * as RadixSegmentedControl from "@radix-ui/react-toggle-group";
+//#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 = forwardRef(({ children, type = "single", ...props }, ref) => {
-  return /* @__PURE__ */ jsx(Group, { asChild: true, gap: "0", ...props, children: /* @__PURE__ */ jsx(RadixSegmentedControl.Root, { ref, type, children: /* @__PURE__ */ jsx(SegmentedControlProvider, { children }) }) });
+	return /* @__PURE__ */ jsx(Group, {
+		asChild: true,
+		gap: "0",
+		...props,
+		children: /* @__PURE__ */ jsx(RadixSegmentedControl.Root, {
+			ref,
+			type,
+			children: /* @__PURE__ */ jsx(SegmentedControlProvider, { children })
+		})
+	});
 });
 SegmentedControl.displayName = "@optiaxiom/react/SegmentedControl";
-
+//#endregion
 export { SegmentedControl };

package/dist/esm/packages/react/src/segmented-control/SegmentedControlContext.js

@@ -1,6 +1,7 @@
 "use client";
-import { createContext } from '@radix-ui/react-context';
-
+"use client";
+import { createContext } from "@radix-ui/react-context";
+//#region src/segmented-control/SegmentedControlContext.ts
 const [SegmentedControlProvider, useSegmentedControlContext] = createContext("@optiaxiom/react/SegmentedControl");
-
+//#endregion
 export { SegmentedControlProvider, useSegmentedControlContext };

package/dist/esm/packages/react/src/segmented-control/SegmentedControlItem.js

@@ -1,24 +1,27 @@
 "use client";
-import { jsx } from 'react/jsx-runtime';
-import * as RadixSegmentedControl from '@radix-ui/react-toggle-group';
-import { forwardRef } from 'react';
-import { Button } from '../button/Button.js';
-import '../button/ButtonGroup.js';
-import { useSegmentedControlContext } from './SegmentedControlContext.js';
-
+import { Button } from "../button/Button.js";
+import { useSegmentedControlContext } from "./SegmentedControlContext.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import * as RadixSegmentedControl from "@radix-ui/react-toggle-group";
+//#region src/segmented-control/SegmentedControlItem.tsx
+/**
+* @group SegmentedControl
+* @extends Button
+*/
 const SegmentedControlItem = forwardRef(({ asChild, children, ...props }, ref) => {
-  useSegmentedControlContext("@optiaxiom/react/SegmentedControlItem");
-  return /* @__PURE__ */ jsx(
-    RadixSegmentedControl.Item,
-    {
-      appearance: "subtle",
-      asChild: true,
-      ref,
-      ...props,
-      children: /* @__PURE__ */ jsx(Button, { asChild, children })
-    }
-  );
+	useSegmentedControlContext("@optiaxiom/react/SegmentedControlItem");
+	return /* @__PURE__ */ jsx(RadixSegmentedControl.Item, {
+		appearance: "subtle",
+		asChild: true,
+		ref,
+		...props,
+		children: /* @__PURE__ */ jsx(Button, {
+			asChild,
+			children
+		})
+	});
 });
 SegmentedControlItem.displayName = "@optiaxiom/react/SegmentedControlItem";
-
+//#endregion
 export { SegmentedControlItem };

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

@@ -1,183 +1,158 @@
 "use client";
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { useComposedRefs } from '@radix-ui/react-compose-refs';
-import { Popper } from '@radix-ui/react-popper';
-import { useControllableState } from '@radix-ui/react-use-controllable-state';
-import { useSelect } from 'downshift';
-import { forwardRef, useRef, useMemo, useState, useEffect } from 'react';
-import { Avatar } from '../avatar/Avatar.js';
-import '../avatar/AvatarGroup.js';
-import { useHighlightedIndex } from '../downshift/useHighlightedIndex.js';
-import '../field/FieldContext.js';
-import { useObserveValue } from '../hooks/useObserveValue.js';
-import '../utils/conditions.js';
-import '../utils/isHoverSupported.js';
-import '@optiaxiom/globals';
-import { useSurface } from '../surface/useSurface.js';
-import { useSuggestions } from '../surface/useSuggestions.js';
-import { SelectProvider } from './SelectContext.js';
-import { SelectHiddenSelect } from './SelectHiddenSelect.js';
-import { useObserveReset } from './useObserveReset.js';
-
-const Select = forwardRef(
-  ({
-    children,
-    defaultOpen = false,
-    defaultValue,
-    disabled,
-    loading,
-    name,
-    onBlur,
-    onChange,
-    onOpenChange,
-    onValueChange,
-    open,
-    options,
-    required,
-    value
-  }, outerRef) => {
-    const innerRef = useRef(null);
-    const ref = useComposedRefs(innerRef, outerRef);
-    const surface = useSurface("property");
-    const suggestions = useSuggestions("property", "value");
-    const suggestion = suggestions?.[0];
-    const [shadowValue, setShadowValue] = 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 = useObserveValue(innerRef, setShadowValue);
-    useObserveReset(innerRef, setShadowValue);
-    const items = useMemo(() => {
-      return options.map(
-        (option) => option.value === suggestion?.value ? {
-          ...option,
-          detail: /* @__PURE__ */ jsx(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 = useMemo(
-      () => shadowValue !== void 0 ? items.find((item) => item.value === shadowValue) : void 0,
-      [items, shadowValue]
-    );
-    const [isOpen, setIsOpen] = useControllableState({
-      caller: "@optiaxiom/react/Select",
-      defaultProp: defaultOpen,
-      onChange: onOpenChange,
-      prop: open
-    });
-    const [highlightedIndex, setHighlightedIndex] = useHighlightedIndex(
-      isOpen,
-      () => selectedItem ? items.findIndex(
-        (item) => !item.disabledReason && selectedItem.value === item.value
-      ) : -1
-    );
-    const highlightedItemRef = useRef(null);
-    const [focusVisible, setFocusVisible] = useState(false);
-    useEffect(() => {
-      if (!isOpen) {
-        setFocusVisible(false);
-      }
-    }, [isOpen]);
-    const 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 === useSelect.stateChangeTypes.MenuMouseLeave) {
-          return;
-        }
-        if (changes.type === useSelect.stateChangeTypes.ItemMouseMove && isOpen || changes.isOpen) {
-          setHighlightedIndex(changes.highlightedIndex);
-        }
-        if (!(changes.type === useSelect.stateChangeTypes.ItemMouseMove || changes.type === useSelect.stateChangeTypes.ToggleButtonClick)) {
-          setFocusVisible(true);
-        }
-      },
-      onIsOpenChange({ isOpen: isOpen2, type }) {
-        setIsOpen(isOpen2);
-        if (isOpen2 && (type === useSelect.stateChangeTypes.ToggleButtonKeyDownArrowDown || type === useSelect.stateChangeTypes.ToggleButtonKeyDownArrowUp)) {
-          setFocusVisible(true);
-        }
-      },
-      onSelectedItemChange({ selectedItem: selectedItem2 }) {
-        forceValueChange(selectedItem2?.value ?? "");
-      },
-      selectedItem: selectedItem ?? null,
-      stateReducer: (state, actionAndChanges) => {
-        const { changes, type } = actionAndChanges;
-        switch (type) {
-          case 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;
-        }
-      }
-    });
-    downshift.getToggleButtonProps({}, { suppressRefError: true });
-    downshift.getMenuProps({}, { suppressRefError: true });
-    return /* @__PURE__ */ jsx(Popper, { children: /* @__PURE__ */ jsxs(
-      SelectProvider,
-      {
-        disabled,
-        downshift,
-        focusVisible,
-        highlightedItem: items[downshift.highlightedIndex],
-        highlightedItemRef,
-        isOpen,
-        items,
-        loading,
-        onBlur,
-        selectedItem,
-        setFocusVisible,
-        children: [
-          /* @__PURE__ */ jsx(
-            SelectHiddenSelect,
-            {
-              defaultValue,
-              disabled,
-              name,
-              onChange: (event) => {
-                onChange?.(event);
-              },
-              ref,
-              required,
-              value
-            }
-          ),
-          children
-        ]
-      }
-    ) });
-  }
-);
+import { useSurface } from "../surface/useSurface.js";
+import { useObserveValue } from "../hooks/useObserveValue.js";
+import { Avatar } from "../avatar/Avatar.js";
+import { useHighlightedIndex } from "../downshift/useHighlightedIndex.js";
+import { useSuggestions } from "../surface/useSuggestions.js";
+import { SelectProvider } from "./SelectContext.js";
+import { SelectHiddenSelect } from "./SelectHiddenSelect.js";
+import { useObserveReset } from "./useObserveReset.js";
+import { forwardRef, useEffect, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useComposedRefs } from "@radix-ui/react-compose-refs";
+import { useControllableState } from "@radix-ui/react-use-controllable-state";
+import { useSelect } from "downshift";
+import { Popper } from "@radix-ui/react-popper";
+//#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 = forwardRef(({ children, defaultOpen = false, defaultValue, disabled, loading, name, onBlur, onChange, onOpenChange, onValueChange, open, options, required, value }, outerRef) => {
+	const innerRef = useRef(null);
+	const ref = useComposedRefs(innerRef, outerRef);
+	const surface = useSurface("property");
+	const suggestion = useSuggestions("property", "value")?.[0];
+	const [shadowValue, setShadowValue] = 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 = useObserveValue(innerRef, setShadowValue);
+	useObserveReset(innerRef, setShadowValue);
+	const items = useMemo(() => {
+		return options.map((option) => option.value === suggestion?.value ? {
+			...option,
+			detail: /* @__PURE__ */ jsx(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 = useMemo(() => shadowValue !== void 0 ? items.find((item) => item.value === shadowValue) : void 0, [items, shadowValue]);
+	const [isOpen, setIsOpen] = useControllableState({
+		caller: "@optiaxiom/react/Select",
+		defaultProp: defaultOpen,
+		onChange: onOpenChange,
+		prop: open
+	});
+	const [highlightedIndex, setHighlightedIndex] = useHighlightedIndex(isOpen, () => selectedItem ? items.findIndex((item) => !item.disabledReason && selectedItem.value === item.value) : -1);
+	const highlightedItemRef = useRef(null);
+	const [focusVisible, setFocusVisible] = useState(false);
+	useEffect(() => {
+		if (!isOpen) setFocusVisible(false);
+	}, [isOpen]);
+	const 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 === useSelect.stateChangeTypes.MenuMouseLeave) return;
+			if (changes.type === useSelect.stateChangeTypes.ItemMouseMove && isOpen || changes.isOpen) setHighlightedIndex(changes.highlightedIndex);
+			if (!(changes.type === useSelect.stateChangeTypes.ItemMouseMove || changes.type === useSelect.stateChangeTypes.ToggleButtonClick)) setFocusVisible(true);
+		},
+		onIsOpenChange({ isOpen, type }) {
+			setIsOpen(isOpen);
+			if (isOpen && (type === useSelect.stateChangeTypes.ToggleButtonKeyDownArrowDown || type === useSelect.stateChangeTypes.ToggleButtonKeyDownArrowUp)) setFocusVisible(true);
+		},
+		onSelectedItemChange({ selectedItem }) {
+			forceValueChange(selectedItem?.value ?? "");
+		},
+		selectedItem: selectedItem ?? null,
+		stateReducer: (state, actionAndChanges) => {
+			const { changes, type } = actionAndChanges;
+			switch (type) {
+				case 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.getToggleButtonProps({}, { suppressRefError: true });
+	downshift.getMenuProps({}, { suppressRefError: true });
+	return /* @__PURE__ */ jsx(Popper, { children: /* @__PURE__ */ jsxs(SelectProvider, {
+		disabled,
+		downshift,
+		focusVisible,
+		highlightedItem: items[downshift.highlightedIndex],
+		highlightedItemRef,
+		isOpen,
+		items,
+		loading,
+		onBlur,
+		selectedItem,
+		setFocusVisible,
+		children: [/* @__PURE__ */ 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
 export { Select };