@optiaxiom/react 1.3.1 → 1.3.3

package/dist/esm/packages/react/src/{nav-group → nav}/NavGroup.js

@@ -3,7 +3,9 @@ import { jsx } from 'react/jsx-runtime';
 import { useId } from '@radix-ui/react-id';
 import { forwardRef } from 'react';
 import { Disclosure } from '../disclosure/Disclosure.js';
-import { NavGroupProvider } from '../nav-group-context/NavGroupContext.js';
+import '../disclosure/DisclosureContent.js';
+import '../disclosure/DisclosureTrigger.js';
+import { NavGroupProvider } from './NavGroupContext.js';
 
 const NavGroup = forwardRef(
   ({ children, ...props }, ref) => {

package/dist/esm/packages/react/src/{nav-group-content → nav}/NavGroupContent.js

@@ -1,7 +1,9 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
-import { DisclosureContent } from '../disclosure-content/DisclosureContent.js';
+import '../disclosure/Disclosure.js';
+import { DisclosureContent } from '../disclosure/DisclosureContent.js';
+import '../disclosure/DisclosureTrigger.js';
 
 const NavGroupContent = forwardRef(({ children, ...props }, ref) => {
   return /* @__PURE__ */ jsx(

package/dist/esm/packages/react/src/{nav-group-trigger → nav}/NavGroupTrigger.js

@@ -1,8 +1,10 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
-import { DisclosureTrigger } from '../disclosure-trigger/DisclosureTrigger.js';
-import { useNavGroupContext } from '../nav-group-context/NavGroupContext.js';
+import '../disclosure/Disclosure.js';
+import '../disclosure/DisclosureContent.js';
+import { DisclosureTrigger } from '../disclosure/DisclosureTrigger.js';
+import { useNavGroupContext } from './NavGroupContext.js';
 
 const NavGroupTrigger = forwardRef(
   ({ children, ...props }, ref) => {

package/dist/esm/packages/react/src/{nav-header → nav}/NavHeader.js

@@ -2,7 +2,7 @@
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { Flex } from '../flex/Flex.js';
-import { useSidebarContext } from '../sidebar-context/SidebarContext.js';
+import { useSidebarContext } from '../sidebar/SidebarContext.js';
 
 const NavHeader = forwardRef(
   ({ children, ...props }, ref) => {

package/dist/esm/packages/react/src/nav/NavItem-css.js

@@ -0,0 +1,10 @@
+import './../../../../assets/src/layers/layers.css.ts.vanilla-COmxedfZ.css';
+import './../../../../assets/src/avatar/AvatarGroup.css.ts.vanilla-DGq2XZIM.css';
+import './../../../../assets/src/button/ButtonRoot.css.ts.vanilla-BnswEL8I.css';
+import './../../../../assets/src/nav/NavItem.css.ts.vanilla-BrhBE5HW.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var item = recipeRuntime({base:[{alignItems:'center',display:'flex',fontSize:'md',fontWeight:'500',h:'lg',justifyContent:'flex-start',rounded:'md',textAlign:'start',transition:'colors'},'jdxvwc']});
+var label = recipeRuntime({base:[{alignItems:'center',display:'flex',flex:'1',gap:'10',justifyContent:'space-between',mr:'10',overflow:'hidden'},'ipmpf9'],variants:{expanded:{false:'rqbghb',true:'_1cgz0i8'}}});
+
+export { item, label };

package/dist/esm/packages/react/src/{nav-item → nav}/NavItem.js

@@ -1,20 +1,25 @@
 "use client";
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { Slot } from '@radix-ui/react-slot';
+import { createSlot } from '@radix-ui/react-slot';
 import { forwardRef } from 'react';
 import { Box } from '../box/Box.js';
 import { extractBoxProps } from '../box/extractBoxProps.js';
 import { Flex } from '../flex/Flex.js';
 import { Icon } from '../icon/Icon.js';
-import { useSidebarContext } from '../sidebar-context/SidebarContext.js';
+import { useSidebarContext } from '../sidebar/SidebarContext.js';
 import { Text } from '../text/Text.js';
 import { Tooltip } from '../tooltip/Tooltip.js';
+import '../tooltip/TooltipContent.js';
+import '../tooltip/TooltipProvider.js';
+import '../tooltip/TooltipRoot.js';
+import '../tooltip/TooltipTrigger.js';
 import '../utils/conditions.js';
 import { decorateChildren } from '../utils/decorateChildren.js';
 import { fallbackSpan } from '../utils/fallbackSpan.js';
 import '../utils/isHoverSupported.js';
 import { label, item } from './NavItem-css.js';
 
+const Slot = createSlot("@optiaxiom/react/NavItem");
 const NavItem = forwardRef(
   ({
     active,

package/dist/esm/packages/react/src/{nav-list → nav}/NavList.js

@@ -4,7 +4,7 @@ import { forwardRef } from 'react';
 import { Box } from '../box/Box.js';
 import '../sprinkles/sprinkles.js';
 import '../sprinkles/sprinklesMerge.js';
-import { useNavGroupContext } from '../nav-group-context/NavGroupContext.js';
+import { useNavGroupContext } from './NavGroupContext.js';
 
 const NavList = forwardRef(
   ({ children, ...props }, ref) => {

package/dist/esm/packages/react/src/pagination/Pagination-css.js

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-D2iWt029.css';
-import './../../../../assets/src/pagination/Pagination.css.ts.vanilla-ZIE8tgBJ.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-COmxedfZ.css';
+import './../../../../assets/src/pagination/Pagination.css.ts.vanilla-BuhaMNMY.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var button = recipeRuntime({base:[{justifyContent:'center'},'rhpcsk']});
-var cursor = recipeRuntime({base:[{justifyContent:'center',z:'10'},'fuo7b1'],variants:{animation:{false:{},true:{transition:'transform'}}}});
-var list = recipeRuntime({base:[{flexDirection:'row',gap:'2'},'e4ivib']});
+var button = recipeRuntime({base:[{justifyContent:'center'},'g1hloj']});
+var cursor = recipeRuntime({base:[{justifyContent:'center',z:'10'},'wycdop'],variants:{animation:{false:{},true:{transition:'transform'}}}});
+var list = recipeRuntime({base:[{flexDirection:'row',gap:'2'},'_1qufs7g']});
 
 export { button, cursor, list };

package/dist/esm/packages/react/src/pagination/Pagination.js

@@ -1,25 +1,38 @@
 "use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { useControllableState } from '@radix-ui/react-use-controllable-state';
-import { VisuallyHidden } from '@radix-ui/react-visually-hidden';
 import { forwardRef, useState, useRef, useEffect } from 'react';
 import { Box } from '../box/Box.js';
 import '../sprinkles/sprinkles.js';
 import '../sprinkles/sprinklesMerge.js';
 import { Button } from '../button/Button.js';
-import { ButtonBase } from '../button-base/ButtonBase.js';
+import '../button/ButtonGroup.js';
+import { ButtonRoot } from '../button/ButtonRoot.js';
 import { Flex } from '../flex/Flex.js';
 import { Icon } from '../icon/Icon.js';
 import { IconAngleLeft } from '../icons/IconAngleLeft.js';
 import { IconAngleRight } from '../icons/IconAngleRight.js';
 import { IconEllipsis } from '../icons/IconEllipsis.js';
 import { Tooltip } from '../tooltip/Tooltip.js';
+import '../tooltip/TooltipContent.js';
+import '../tooltip/TooltipProvider.js';
+import '../tooltip/TooltipRoot.js';
+import '../tooltip/TooltipTrigger.js';
+import { VisuallyHidden } from '../visually-hidden/VisuallyHidden.js';
 import { list, cursor, button } from './Pagination-css.js';
-import { usePagination } from '../../../../node_modules/.pnpm/@mantine_hooks@7.17.2_react@18.3.1/node_modules/@mantine/hooks/esm/use-pagination/use-pagination.js';
+import { usePagination } from '../../../../node_modules/.pnpm/@mantine_hooks@7.17.4_react@18.3.1/node_modules/@mantine/hooks/esm/use-pagination/use-pagination.js';
 
 const Pagination = forwardRef(
-  ({ defaultPage, disabled, onPageChange, page: pageProp, total, ...props }, ref) => {
+  ({
+    defaultPage = 1,
+    disabled,
+    onPageChange,
+    page: pageProp,
+    total,
+    ...props
+  }, ref) => {
     const [value, setValue] = useControllableState({
+      caller: "@optiaxiom/react/Pagination",
       defaultProp: defaultPage,
       onChange: onPageChange,
       prop: pageProp
@@ -43,7 +56,7 @@ const Pagination = forwardRef(
     }, [active]);
     return /* @__PURE__ */ jsx(Box, { asChild: true, ...props, children: /* @__PURE__ */ jsx("nav", { "aria-label": "pagination", ref, children: /* @__PURE__ */ jsx(Flex, { asChild: true, ...list(), children: /* @__PURE__ */ jsxs("ul", { children: [
       /* @__PURE__ */ jsx(
-        ButtonBase,
+        ButtonRoot,
         {
           appearance: "subtle",
           "aria-hidden": true,
@@ -88,7 +101,7 @@ const Pagination = forwardRef(
               )
             }
           ) : /* @__PURE__ */ jsxs(
-            ButtonBase,
+            ButtonRoot,
             {
               appearance: "subtle",
               "aria-current": active === page ? "page" : void 0,

package/dist/esm/packages/react/src/paper/Paper-css.js

@@ -1,4 +1,4 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-D2iWt029.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-COmxedfZ.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
 var paper = recipeRuntime({base:{bg:'bg.default',color:'fg.default',shadow:'md',z:'popover'},variants:{elevation:{dialog:{rounded:'lg'},menu:{border:'1',borderColor:'border.secondary',rounded:'lg'},screen:{}}}});

package/dist/esm/packages/react/src/pill/Pill-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-D2iWt029.css';
-import './../../../../assets/src/pill/Pill.css.ts.vanilla-D2bvjE-M.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-COmxedfZ.css';
+import './../../../../assets/src/pill/Pill.css.ts.vanilla-D1Dp0lEq.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var pill = recipeRuntime({base:[{alignItems:'center',color:'fg.default',display:'flex',fontSize:'sm',gap:'4',px:'6',rounded:'md',whiteSpace:'nowrap'},'_1vmftfb'],variants:{size:{xs:{h:'xs'},sm:{h:'sm'}}}});
+var pill = recipeRuntime({base:[{alignItems:'center',color:'fg.default',display:'flex',fontSize:'sm',gap:'4',px:'6',rounded:'md',whiteSpace:'nowrap'},'_1hj6b35'],variants:{size:{xs:{h:'xs'},sm:{h:'sm'}}}});
 
 export { pill };

package/dist/esm/packages/react/src/pill/Pill.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { Slot } from '@radix-ui/react-slot';
+import { createSlot } from '@radix-ui/react-slot';
 import { forwardRef } from 'react';
 import { Box } from '../box/Box.js';
 import { extractBoxProps } from '../box/extractBoxProps.js';
@@ -9,6 +9,7 @@ import { IconX } from '../icons/IconX.js';
 import { Text } from '../text/Text.js';
 import { pill } from './Pill-css.js';
 
+const Slot = createSlot("@optiaxiom/react/Pill");
 const Pill = forwardRef(
   ({ asChild, children, className, disabled, size = "sm", ...props }, ref) => {
     const Comp = asChild ? Slot : "button";

package/dist/esm/packages/react/src/popover/Popover.js

@@ -3,21 +3,22 @@ import { jsx } from 'react/jsx-runtime';
 import * as RadixPopover from '@radix-ui/react-popover';
 import { useControllableState } from '@radix-ui/react-use-controllable-state';
 import { useState } from 'react';
-import { PopoverProvider } from '../popover-context/PopoverContext.js';
+import { PopoverProvider } from './PopoverContext.js';
 
 function Popover({
   children,
-  defaultOpen,
+  defaultOpen = false,
   onOpenChange,
   open: openProp,
   ...props
 }) {
   const [open, setOpen] = useControllableState({
+    caller: "@optiaxiom/react/Popover",
     defaultProp: defaultOpen,
     onChange: onOpenChange,
     prop: openProp
   });
-  const [presence, setPresence] = useState();
+  const [presence, setPresence] = useState(false);
   return /* @__PURE__ */ jsx(
     RadixPopover.Root,
     {

package/dist/esm/packages/react/src/{popover-content → popover}/PopoverContent.js

@@ -4,14 +4,15 @@ import { theme } from '@optiaxiom/globals';
 import { useComposedRefs } from '@radix-ui/react-compose-refs';
 import * as RadixPopover from '@radix-ui/react-popover';
 import { forwardRef, useRef } from 'react';
-import { ModalProvider } from '../modal-context/ModalContext.js';
-import { OverlayListbox } from '../overlay-listbox/OverlayListbox.js';
-import { usePopoverContext } from '../popover-context/PopoverContext.js';
-import { TransitionGroup } from '../transition-group/TransitionGroup.js';
+import { ModalProvider } from '../modal/ModalContext.js';
+import '../modal/ModalLayer.js';
+import { ModalListbox } from '../modal/ModalListbox.js';
+import '../transition/Transition.js';
+import { TransitionGroup } from '../transition/TransitionGroup.js';
 import '../utils/conditions.js';
-import '@radix-ui/react-slot';
 import '../utils/isHoverSupported.js';
 import { onReactSelectInputBlur } from '../utils/onReactSelectInputBlur.js';
+import { usePopoverContext } from './PopoverContext.js';
 
 const PopoverContent = forwardRef(
   ({ align = "start", children, sideOffset = 2, withArrow, ...props }, outerRef) => {
@@ -27,7 +28,7 @@ const PopoverContent = forwardRef(
         open,
         presence,
         children: /* @__PURE__ */ jsx(RadixPopover.Portal, { forceMount: true, children: /* @__PURE__ */ jsx(
-          OverlayListbox,
+          ModalListbox,
           {
             asChild: true,
             onBlur: onReactSelectInputBlur,

package/dist/esm/packages/react/src/{popover-trigger → popover}/PopoverTrigger.js

@@ -3,6 +3,7 @@ import { jsx } from 'react/jsx-runtime';
 import * as RadixPopover from '@radix-ui/react-popover';
 import { forwardRef, useState, useEffect } from 'react';
 import { Button } from '../button/Button.js';
+import '../button/ButtonGroup.js';
 
 const PopoverTrigger = forwardRef(({ asChild, children, hasCustomAnchor, ...props }, ref) => {
   const [shouldRender, setShouldRender] = useState(!hasCustomAnchor);

package/dist/esm/packages/react/src/progress/Progress-css.js

@@ -1,8 +1,8 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-D2iWt029.css';
-import './../../../../assets/src/progress/Progress.css.ts.vanilla-BA_AaWWC.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-COmxedfZ.css';
+import './../../../../assets/src/progress/Progress.css.ts.vanilla-BIk4-33y.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
 var indicator = recipeRuntime({base:[{h:'full',transition:'all'}],variants:{intent:{danger:{bg:'bg.error'},primary:{bg:'bg.accent'},success:{bg:'bg.success'}}}});
-var progress = recipeRuntime({base:[{bg:'bg.tertiary',overflow:'hidden',rounded:'full'},'_1dtqxyg']});
+var progress = recipeRuntime({base:[{bg:'bg.tertiary',overflow:'hidden',rounded:'full'},'_1grqs5e']});
 
 export { indicator, progress };

package/dist/esm/packages/react/src/radio/Radio-css.js

@@ -1,12 +1,12 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-D2iWt029.css';
-import './../../../../assets/src/actions-root/ActionsRoot.css.ts.vanilla-CDv_HSCK.css';
-import './../../../../assets/src/toggle-input/ToggleInput.css.ts.vanilla-ByPjrct_.css';
-import './../../../../assets/src/radio/Radio.css.ts.vanilla-upB5JH7-.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-COmxedfZ.css';
+import './../../../../assets/src/avatar/AvatarGroup.css.ts.vanilla-DGq2XZIM.css';
+import './../../../../assets/src/toggle-input/ToggleInput.css.ts.vanilla-Cud_bjK9.css';
+import './../../../../assets/src/radio/Radio.css.ts.vanilla-DzBEF66t.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var control = recipeRuntime({base:[{bg:'bg.default',border:'1',p:'2',rounded:'full',size:'2xs'},'_1ejsrc'],variants:{shift:{false:{},true:{mt:'2'}}}});
-var indicator = recipeRuntime({base:[{rounded:'inherit',size:'full',transition:'transform'},'_17k4vhe']});
-var input = recipeRuntime({base:'_20pn64'});
-var radio = recipeRuntime({base:'_5l9it2'});
+var control = recipeRuntime({base:[{bg:'bg.default',border:'1',p:'2',rounded:'full',size:'2xs'},'_1ocqtbp'],variants:{shift:{false:{},true:{mt:'2'}}}});
+var indicator = recipeRuntime({base:[{rounded:'inherit',size:'full',transition:'transform'},'_6y3i26']});
+var input = recipeRuntime({base:'emb7tk'});
+var radio = recipeRuntime({base:'_88cwk3'});
 
 export { control, indicator, input, radio };

package/dist/esm/packages/react/src/radio/Radio.js

@@ -3,14 +3,14 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { Box } from '../box/Box.js';
 import { extractBoxProps } from '../box/extractBoxProps.js';
-import { useRadioGroupContext } from '../radio-group-context/RadioGroupContext.js';
 import { ToggleInput } from '../toggle-input/ToggleInput.js';
-import { ToggleInputContent } from '../toggle-input-content/ToggleInputContent.js';
-import { ToggleInputControl } from '../toggle-input-control/ToggleInputControl.js';
-import { ToggleInputDescription } from '../toggle-input-description/ToggleInputDescription.js';
-import { ToggleInputHiddenInput } from '../toggle-input-hidden-input/ToggleInputHiddenInput.js';
-import { ToggleInputLabel } from '../toggle-input-label/ToggleInputLabel.js';
+import { ToggleInputContent } from '../toggle-input/ToggleInputContent.js';
+import { ToggleInputControl } from '../toggle-input/ToggleInputControl.js';
+import { ToggleInputDescription } from '../toggle-input/ToggleInputDescription.js';
+import { ToggleInputHiddenInput } from '../toggle-input/ToggleInputHiddenInput.js';
+import { ToggleInputLabel } from '../toggle-input/ToggleInputLabel.js';
 import { radio, input, control, indicator } from './Radio-css.js';
+import { useRadioGroupContext } from './RadioGroupContext.js';
 
 const Radio = forwardRef(
   ({

package/dist/esm/packages/react/src/{radio-group → radio}/RadioGroup.js

@@ -2,9 +2,9 @@
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { Flex } from '../flex/Flex.js';
-import { RadioGroupProvider } from '../radio-group-context/RadioGroupContext.js';
 import { mapResponsiveValue } from '../sprinkles/sprinkles.js';
 import '../sprinkles/sprinklesMerge.js';
+import { RadioGroupProvider } from './RadioGroupContext.js';
 
 const mapGapToOrientation = {
   column: "12",

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

@@ -1,8 +1,8 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-D2iWt029.css';
-import './../../../../assets/src/search-input/SearchInput.css.ts.vanilla-CxLuqyqz.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-COmxedfZ.css';
+import './../../../../assets/src/search-input/SearchInput.css.ts.vanilla-CGmG8qg1.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var clear = recipeRuntime({base:[{size:'sm'},'hzymj1']});
-var search = recipeRuntime({base:'_13um1e3'});
+var clear = recipeRuntime({base:[{size:'sm'},'_195qfn8']});
+var search = recipeRuntime({base:'_1ik2j77'});
 
 export { clear, search };

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

@@ -4,11 +4,18 @@ 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 { Flex } from '../flex/Flex.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 { useObserveValue } from '../use-observe-value/useObserveValue.js';
+import '../input/InputAddon.js';
+import '../input/InputControl.js';
+import '../input/InputRoot.js';
 import { search, clear } from './SearchInput-css.js';
 
 const SearchInput = forwardRef(
@@ -16,6 +23,7 @@ const SearchInput = forwardRef(
     const innerRef = useRef(null);
     const ref = useComposedRefs(innerRef, outerRef);
     const [value, setValue] = useControllableState({
+      caller: "@optiaxiom/react/SearchInput",
       defaultProp: props.defaultValue,
       prop: props.value
     });

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

@@ -3,7 +3,7 @@ import { jsx } from 'react/jsx-runtime';
 import * as RadixSegmentedControl from '@radix-ui/react-toggle-group';
 import { forwardRef } from 'react';
 import { Flex } from '../flex/Flex.js';
-import { SegmentedControlProvider } from '../segmented-control-context/SegmentedControlContext.js';
+import { SegmentedControlProvider } from './SegmentedControlContext.js';
 
 const SegmentedControl = forwardRef(({ children, type = "single", ...props }, ref) => {
   return /* @__PURE__ */ jsx(Flex, { asChild: true, flexDirection: "row", gap: "0", ...props, children: /* @__PURE__ */ jsx(RadixSegmentedControl.Root, { ref, type, children: /* @__PURE__ */ jsx(SegmentedControlProvider, { children }) }) });

package/dist/esm/packages/react/src/{segmented-control-item → segmented-control}/SegmentedControlItem.js

@@ -3,7 +3,8 @@ 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 { useSegmentedControlContext } from '../segmented-control-context/SegmentedControlContext.js';
+import '../button/ButtonGroup.js';
+import { useSegmentedControlContext } from './SegmentedControlContext.js';
 
 const SegmentedControlItem = forwardRef(({ children, ...props }, ref) => {
   useSegmentedControlContext("@optiaxiom/react/SegmentedControlItem");

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

@@ -6,9 +6,12 @@ import { useControllableState } from '@radix-ui/react-use-controllable-state';
 import { useSelect } from 'downshift';
 import { forwardRef, useRef, useMemo } from 'react';
 import { usePortalPatch } from '../downshift/usePortalPatch.js';
-import { SelectProvider } from '../select-context/SelectContext.js';
-import { SelectHiddenSelect } from '../select-hidden-select/SelectHiddenSelect.js';
-import { useObserveValue } from '../use-observe-value/useObserveValue.js';
+import '../field/FieldContext.js';
+import { useObserveValue } from '../hooks/useObserveValue.js';
+import '../utils/conditions.js';
+import '../utils/isHoverSupported.js';
+import { SelectProvider } from './SelectContext.js';
+import { SelectHiddenSelect } from './SelectHiddenSelect.js';
 import { useObserveReset } from './useObserveReset.js';
 
 const Select = forwardRef(
@@ -31,7 +34,8 @@ const Select = forwardRef(
     const innerRef = useRef(null);
     const ref = useComposedRefs(innerRef, outerRef);
     const [shadowValue, setShadowValue] = useControllableState({
-      defaultProp: defaultValue,
+      caller: "@optiaxiom/react/Select",
+      defaultProp: defaultValue ?? "",
       onChange: onValueChange,
       prop: value
     });
@@ -42,15 +46,19 @@ const Select = forwardRef(
       [items, shadowValue]
     );
     const [isOpen, setIsOpen] = useControllableState({
+      caller: "@optiaxiom/react/Select",
       defaultProp: defaultOpen,
       onChange: onOpenChange,
       prop: open
     });
-    const [highlightedIndex, setHighlightedIndex, placed, setPlaced] = usePortalPatch(
-      () => selectedItem ? items.findIndex((item) => selectedItem.value === item.value) : -1
+    const [highlightedIndex, setHighlightedIndex, placed] = usePortalPatch(
+      isOpen,
+      () => selectedItem ? items.findIndex(
+        (item) => !item.disabledReason && selectedItem.value === item.value
+      ) : -1
     );
     const downshift = useSelect({
-      highlightedIndex,
+      highlightedIndex: highlightedIndex === -1 && placed ? items.findIndex((item) => !item.disabledReason) : highlightedIndex,
       isItemDisabled: (item) => !!item.disabledReason,
       isOpen: placed,
       // @ts-expect-error -- no harm in supporting read only arrays
@@ -68,7 +76,23 @@ const Select = forwardRef(
       onSelectedItemChange({ selectedItem: selectedItem2 }) {
         forceValueChange(selectedItem2?.value ?? "");
       },
-      selectedItem: selectedItem ?? null
+      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.getMenuProps({}, { suppressRefError: true });
     return /* @__PURE__ */ jsx(Popper, { children: /* @__PURE__ */ jsxs(
@@ -76,14 +100,12 @@ const Select = forwardRef(
       {
         disabled,
         downshift,
-        highlightedItem: items[highlightedIndex],
+        highlightedItem: items[downshift.highlightedIndex],
         isOpen,
         items,
         loading,
         onBlur,
-        placed,
         selectedItem,
-        setPlaced,
         children: [
           /* @__PURE__ */ jsx(
             SelectHiddenSelect,

package/dist/esm/packages/react/src/{select-content → select}/SelectContent.js

@@ -2,27 +2,32 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { PopperContent } from '@radix-ui/react-popper';
 import { Portal } from '@radix-ui/react-portal';
-import { forwardRef } from 'react';
-import { ListboxItemized } from '../listbox-itemized/ListboxItemized.js';
-import { ListboxLabel } from '../listbox-label/ListboxLabel.js';
-import { ListboxSeparator } from '../listbox-separator/ListboxSeparator.js';
-import { ModalLayer } from '../modal-layer/ModalLayer.js';
-import { OverlayListbox } from '../overlay-listbox/OverlayListbox.js';
-import { useSelectContext } from '../select-context/SelectContext.js';
-import { SelectRadioItem } from '../select-radio-item/SelectRadioItem.js';
-import { TransitionGroup } from '../transition-group/TransitionGroup.js';
+import { forwardRef, useState } from 'react';
+import '../listbox/Listbox.js';
+import '../listbox/ListboxCheckboxItem.js';
+import '../listbox/ListboxEmpty.js';
+import '../listbox/ListboxFooter.js';
+import '../listbox/ListboxGroup.js';
+import '../listbox/ListboxItem.js';
+import '../listbox/ListboxItemIndicator.js';
+import { ListboxItemized } from '../listbox/ListboxItemized.js';
+import { ListboxLabel } from '../listbox/ListboxLabel.js';
+import '../listbox/ListboxRadioItem.js';
+import { ListboxSeparator } from '../listbox/ListboxSeparator.js';
+import '../listbox/ListboxSwitchItem.js';
+import '../listbox/ListboxVirtualized.js';
+import '../modal/ModalContext.js';
+import { ModalLayer } from '../modal/ModalLayer.js';
+import { ModalListbox } from '../modal/ModalListbox.js';
+import '../transition/Transition.js';
+import { TransitionGroup } from '../transition/TransitionGroup.js';
+import { useSelectContext } from './SelectContext.js';
+import { SelectRadioItem } from './SelectRadioItem.js';
 
 const SelectContent = forwardRef(
   ({ align = "start", children, side = "bottom", size, ...props }, ref) => {
-    const {
-      downshift,
-      highlightedItem,
-      isOpen,
-      items,
-      loading,
-      placed,
-      setPlaced
-    } = useSelectContext("@optiaxiom/react/SelectContent");
+    const { downshift, highlightedItem, isOpen, items, loading } = useSelectContext("@optiaxiom/react/SelectContent");
+    const [placed, setPlaced] = useState(false);
     let isFirstItem = true;
     let lastGroup = void 0;
     const shouldShowSeparator = (group) => {
@@ -33,10 +38,10 @@ const SelectContent = forwardRef(
     const shouldShowGroup = (group) => {
       const show = group !== lastGroup;
       lastGroup = group;
-      return show && !group?.hidden;
+      return show && !!group && !group?.hidden;
     };
     return /* @__PURE__ */ jsx(TransitionGroup, { open: isOpen, children: /* @__PURE__ */ jsx(Portal, { asChild: true, children: /* @__PURE__ */ jsx(ModalLayer, { asChild: true, children: /* @__PURE__ */ jsx(
-      OverlayListbox,
+      ModalListbox,
       {
         asChild: true,
         maxH: "sm",

package/dist/esm/packages/react/src/{select-hidden-select → select}/SelectHiddenSelect.js

@@ -1,8 +1,8 @@
 "use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { VisuallyHidden } from '@radix-ui/react-visually-hidden';
 import { forwardRef, useMemo } from 'react';
-import { useSelectContext } from '../select-context/SelectContext.js';
+import { VisuallyHidden } from '../visually-hidden/VisuallyHidden.js';
+import { useSelectContext } from './SelectContext.js';
 
 const SelectHiddenSelect = forwardRef(({ defaultValue, disabled, name, onChange, required, value }, ref) => {
   const { items } = useSelectContext("@optiaxiom/react/SelectHiddenSelect");

package/dist/esm/packages/react/src/{select-item → select}/SelectItem.js

@@ -4,7 +4,7 @@ import { forwardRef } from 'react';
 import { Box } from '../box/Box.js';
 import '../sprinkles/sprinkles.js';
 import '../sprinkles/sprinklesMerge.js';
-import { useSelectContext } from '../select-context/SelectContext.js';
+import { useSelectContext } from './SelectContext.js';
 
 const SelectItem = forwardRef(
   ({ children, item, onMouseMove, size, ...props }, ref) => {

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

@@ -0,0 +1,26 @@
+"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/ListboxFooter.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 '../listbox/ListboxVirtualized.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 }) });
+  }
+);
+SelectRadioItem.displayName = "@optiaxiom/react/SelectRadioItem";
+
+export { SelectRadioItem };