@ark-ui/solid 3.0.0-1 → 3.0.0-3

package/dist/esm/index.js

@@ -1,6 +1,6 @@
-import { memo, createComponent, Dynamic, mergeProps, use, template, spread, insert, effect } from 'solid-js/web';
+import { createContext as createContext$1, useContext, splitProps, Show, createSignal, createMemo, createEffect, onCleanup, createUniqueId, mergeProps as mergeProps$2, children, Index, For } from 'solid-js';
+import { memo, createComponent, Dynamic, mergeProps, use, template, insert, effect, spread } from 'solid-js/web';
 import { mergeProps as mergeProps$1, useMachine, normalizeProps, useActor } from '@zag-js/solid';
-import { createContext as createContext$1, useContext, splitProps, Show, createMemo, createUniqueId, createSignal, createEffect, mergeProps as mergeProps$2, children, Index, onCleanup } from 'solid-js';
 import * as collapsible$1 from '@zag-js/collapsible';
 import * as accordion$1 from '@zag-js/accordion';
 import * as avatar$1 from '@zag-js/avatar';
@@ -35,6 +35,7 @@ import * as toast$1 from '@zag-js/toast';
 import * as toggleGroup$1 from '@zag-js/toggle-group';
 import * as tooltip$1 from '@zag-js/tooltip';
 import * as treeView$1 from '@zag-js/tree-view';
+import { getDocument, getWindow } from '@zag-js/dom-query';
 
 function getErrorMessage(hook, provider) {
   return `${hook} returned \`undefined\`. Seems you forgot to wrap component within ${provider}`;
@@ -44,9 +45,10 @@ function createContext(options = {}) {
     strict = true,
     hookName = 'useContext',
     providerName = 'Provider',
-    errorMessage
+    errorMessage,
+    defaultValue
   } = options;
-  const Context = createContext$1(undefined);
+  const Context = createContext$1(defaultValue);
   function useContext$1() {
     const context = useContext(Context);
     if (!context && strict) {
@@ -67,6 +69,14 @@ const [AccordionProvider, useAccordionContext] = createContext({
 
 const AccordionContext = props => props.children(useAccordionContext());
 
+const createSplitProps = () => (props, keys) => splitProps(props, keys);
+
+const [RenderStrategyProvider, useRenderStrategyContext] = createContext({
+  hookName: 'useRenderStrategyContext',
+  providerName: '<RenderStrategyProvider />'
+});
+const splitRenderStrategyProps = props => createSplitProps()(props, ['lazyMount', 'unmountOnExit']);
+
 const withAsProp = Component => {
   const ArkComponent = props => {
     const [localProps, otherProps] = splitProps(props, ['asChild']);
@@ -86,7 +96,7 @@ const withAsProp = Component => {
       return memo(() => otherProps.children(fn));
     }
 
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    // biome-ignore lint/suspicious/noExplicitAny: <explanation>
     return createComponent(Dynamic, mergeProps({
       component: Component
     }, otherProps));
@@ -120,7 +130,7 @@ const CollapsibleContent = props => {
   const mergedProps = mergeProps$1(() => api().contentProps, props);
   return createComponent(Show, {
     get when() {
-      return !api().isUnmounted;
+      return !api().unmounted;
     },
     get children() {
       return createComponent(ark.div, mergedProps);
@@ -130,66 +140,109 @@ const CollapsibleContent = props => {
 
 const CollapsibleContext = props => props.children(useCollapsibleContext());
 
-const createSplitProps = () => (props, keys) => splitProps(props, keys);
+const isFunction = value => typeof value === 'function';
+const runIfFn = (valueOrFn, ...args) => isFunction(valueOrFn) ? valueOrFn(...args) : valueOrFn;
 
 const [EnvironmentProvider, useEnvironmentContext] = createContext({
   hookName: 'useEnvironmentContext',
   providerName: '<EnvironmentProvider />',
-  strict: false
+  strict: false,
+  defaultValue: () => ({
+    getRootNode: () => document,
+    getDocument: () => document,
+    getWindow: () => window
+  })
 });
 
-var _tmpl$$c = /*#__PURE__*/template(`<span hidden>`);
+var _tmpl$$6 = /*#__PURE__*/template(`<span hidden>`);
 const Environment = props => {
-  // eslint-disable-next-line prefer-const
-  let spanRef = undefined;
-
-  // @ts-expect-error TODO fix
-  const currentEnv = createMemo(() => () => props.value ?? spanRef?.ownerDocument ?? document);
+  const [spanRef, setSpanRef] = createSignal();
+  const getRootNode = () => runIfFn(props.value) ?? spanRef()?.ownerDocument ?? document;
+  const environment = createMemo(() => ({
+    getRootNode,
+    getDocument: () => getDocument(getRootNode()),
+    getWindow: () => getWindow(getRootNode())
+  }));
   return createComponent(EnvironmentProvider, {
-    get value() {
-      return currentEnv();
-    },
+    value: environment,
     get children() {
-      return [memo(() => props.children), memo(() => memo(() => !!!props.value)() && (() => {
-        var _el$ = _tmpl$$c();
-        var _ref$ = spanRef;
-        typeof _ref$ === "function" ? use(_ref$, _el$) : spanRef = _el$;
-        return _el$;
-      })())];
+      return [memo(() => props.children), createComponent(Show, {
+        get when() {
+          return !props.value;
+        },
+        get children() {
+          var _el$ = _tmpl$$6();
+          use(setSpanRef, _el$);
+          return _el$;
+        }
+      })];
     }
   });
 };
 
-const [RenderStrategyProvider, useRenderStrategyContext] = createContext({
-  hookName: 'useRenderStrategyContext',
-  providerName: '<RenderStrategyProvider />'
+const [LocaleContextProvider, useLocaleContext] = createContext({
+  hookName: 'useEnvironmentContext',
+  providerName: '<EnvironmentProvider />',
+  strict: false,
+  defaultValue: () => ({
+    dir: 'ltr',
+    locale: 'en-US'
+  })
 });
-const splitRenderStrategyProps = props => createSplitProps()(props, ['lazyMount', 'unmountOnExit']);
+
+const LocaleProvider = props => {
+  const [localeProps, restProps] = splitProps(props, ['locale', 'defaultLocale']);
+  const [locale, setLocale] = createSignal(localeProps.defaultLocale || localeProps.locale || 'en-US');
+  const environment = useEnvironmentContext();
+  createEffect(() => {
+    const cleanup = trackLocale({
+      locale: localeProps.locale,
+      getRootNode: environment().getRootNode,
+      onLocaleChange(locale) {
+        setLocale(locale.locale);
+      }
+    });
+    onCleanup(cleanup);
+  });
+  const context = createMemo(() => ({
+    locale: locale(),
+    dir: isRTL(locale()) ? 'rtl' : 'ltr'
+  }));
+  return createComponent(LocaleContextProvider, {
+    value: context,
+    get children() {
+      return restProps.children;
+    }
+  });
+};
 
 const useCollapsible = props => {
-  const getRootNode = useEnvironmentContext();
+  const locale = useLocaleContext();
+  const environment = useEnvironmentContext();
   const [renderStrategyProps, collapsibleProps] = splitRenderStrategyProps(props);
   const context = mergeProps$1({
     id: createUniqueId(),
-    getRootNode
+    dir: locale().dir,
+    getRootNode: environment().getRootNode,
+    'open.controlled': props.open !== undefined
   }, collapsibleProps);
   const [state, send] = useMachine(collapsible$1.machine(context), {
     context
   });
   const [wasVisible, setWasVisible] = createSignal(false);
   createEffect(() => {
-    const isPresent = api().isVisible;
+    const isPresent = api().visible;
     if (isPresent) setWasVisible(true);
   });
   const api = createMemo(() => collapsible$1.connect(state, send, normalizeProps));
   return createMemo(() => ({
     ...api(),
-    isUnmounted: !api().isVisible && !wasVisible() && renderStrategyProps.lazyMount || renderStrategyProps.unmountOnExit && !api().isVisible && wasVisible()
+    unmounted: !api().visible && !wasVisible() && renderStrategyProps.lazyMount || renderStrategyProps.unmountOnExit && !api().visible && wasVisible()
   }));
 };
 
 const CollapsibleRoot = props => {
-  const [useCollapsibleProps, localProps] = createSplitProps()(props, ['dir', 'disabled', 'getRootNode', 'id', 'ids', 'lazyMount', 'onExitComplete', 'onOpenChange', 'open', 'unmountOnExit']);
+  const [useCollapsibleProps, localProps] = createSplitProps()(props, ['disabled', 'id', 'ids', 'lazyMount', 'onExitComplete', 'onOpenChange', 'open', 'unmountOnExit']);
   const api = useCollapsible(useCollapsibleProps);
   const mergedProps = mergeProps$1(() => api().rootProps, localProps);
   return createComponent(CollapsibleProvider, {
@@ -218,6 +271,7 @@ const [AccordionItemProvider, useAccordionItemContext] = createContext({
   hookName: 'useAccordionItemContext',
   providerName: '<AccordionItemProvider />'
 });
+
 const [AccordionItemPropsProvider, useAccordionItemPropsContext] = createContext({
   hookName: 'useAccordionItemPropsContext',
   providerName: '<AccordionItemPropsProvider />'
@@ -225,11 +279,11 @@ const [AccordionItemPropsProvider, useAccordionItemPropsContext] = createContext
 
 const AccordionItem = props => {
   const [itemProps, localProps] = createSplitProps()(props, ['value', 'disabled']);
-  const context = useAccordionContext();
+  const accordion = useAccordionContext();
   const renderStrategyProps = useRenderStrategyContext();
-  const mergedProps = mergeProps$1(() => context().getItemProps(itemProps), localProps);
-  const itemState = createMemo(() => context().getItemState(itemProps));
-  const itemContentProps = context().getItemContentProps(itemProps);
+  const mergedProps = mergeProps$1(() => accordion().getItemProps(itemProps), localProps);
+  const itemState = createMemo(() => accordion().getItemState(itemProps));
+  const itemContentProps = accordion().getItemContentProps(itemProps);
   return createComponent(AccordionItemPropsProvider, {
     value: itemProps,
     get children() {
@@ -238,7 +292,7 @@ const AccordionItem = props => {
         get children() {
           return createComponent(CollapsibleRoot, mergeProps({
             get open() {
-              return itemState().isOpen;
+              return itemState().expanded;
             },
             get ids() {
               return {
@@ -253,38 +307,42 @@ const AccordionItem = props => {
 };
 
 const AccordionItemContent = props => {
-  const context = useAccordionContext();
+  const accordion = useAccordionContext();
   const itemProps = useAccordionItemPropsContext();
   const itemContentProps = createMemo(() => {
-    const ownProps = context().getItemContentProps(itemProps);
-    delete ownProps.hidden;
+    const ownProps = accordion().getItemContentProps(itemProps);
+    ownProps.hidden = undefined;
     return ownProps;
   });
   const mergedProps = mergeProps$1(itemContentProps, props);
   return createComponent(CollapsibleContent, mergedProps);
 };
 
+const AccordionItemContext = props => props.children(useAccordionItemContext());
+
 const AccordionItemIndicator = props => {
-  const context = useAccordionContext();
+  const accordion = useAccordionContext();
   const itemProps = useAccordionItemPropsContext();
-  const mergedProps = mergeProps$1(() => context().getItemIndicatorProps(itemProps), props);
+  const mergedProps = mergeProps$1(() => accordion().getItemIndicatorProps(itemProps), props);
   return createComponent(ark.div, mergedProps);
 };
 
 const AccordionItemTrigger = props => {
-  const context = useAccordionContext();
+  const accordion = useAccordionContext();
   const itemProps = useAccordionItemPropsContext();
   const collapsible = useCollapsibleContext();
-  const mergedProps = mergeProps$1(() => context().getItemTriggerProps(itemProps), props);
+  const mergedProps = mergeProps$1(() => accordion().getItemTriggerProps(itemProps), props);
   const [ariaControls, buttonProps] = splitProps(mergedProps, ['aria-controls']);
-  return createComponent(ark.button, mergeProps(buttonProps, () => !collapsible().isUnmounted && ariaControls));
+  return createComponent(ark.button, mergeProps(buttonProps, () => !collapsible().unmounted && ariaControls));
 };
 
 const useAccordion = props => {
-  const getRootNode = useEnvironmentContext();
+  const locale = useLocaleContext();
+  const environment = useEnvironmentContext();
   const context = mergeProps$2({
     id: createUniqueId(),
-    getRootNode
+    dir: locale().dir,
+    getRootNode: environment().getRootNode
   }, props);
   const [state, send] = useMachine(accordion$1.machine(context), {
     context
@@ -294,7 +352,7 @@ const useAccordion = props => {
 
 const AccordionRoot = props => {
   const [renderStrategyProps, accordionProps] = splitRenderStrategyProps(props);
-  const [useAccordionProps, localProps] = createSplitProps()(accordionProps, ['collapsible', 'dir', 'disabled', 'getRootNode', 'id', 'ids', 'multiple', 'onFocusChange', 'onValueChange', 'orientation', 'value']);
+  const [useAccordionProps, localProps] = createSplitProps()(accordionProps, ['collapsible', 'disabled', 'id', 'ids', 'multiple', 'onFocusChange', 'onValueChange', 'orientation', 'value']);
   const api = useAccordion(useAccordionProps);
   const mergedProps = mergeProps$1(() => api().rootProps, localProps);
   return createComponent(AccordionProvider, {
@@ -310,8 +368,6 @@ const AccordionRoot = props => {
   });
 };
 
-const AccordionItemContext = props => props.children(useAccordionItemContext());
-
 var accordion = /*#__PURE__*/Object.freeze({
   __proto__: null,
   Context: AccordionContext,
@@ -343,10 +399,12 @@ const AvatarImage = props => {
 };
 
 const useAvatar = props => {
-  const getRootNode = useEnvironmentContext();
+  const locale = useLocaleContext();
+  const environment = useEnvironmentContext();
   const context = mergeProps$1({
     id: createUniqueId(),
-    getRootNode
+    dir: locale().dir,
+    getRootNode: environment().getRootNode
   }, props);
   const [state, send] = useMachine(avatar$1.machine(context), {
     context
@@ -355,7 +413,7 @@ const useAvatar = props => {
 };
 
 const AvatarRoot = props => {
-  const [useAvatarProps, localProps] = createSplitProps()(props, ['dir', 'getRootNode', 'id', 'onLoadingStatusChange']);
+  const [useAvatarProps, localProps] = createSplitProps()(props, ['id', 'ids', 'onStatusChange']);
   const context = useAvatar(useAvatarProps);
   const mergedProps = mergeProps$1(() => context().rootProps, localProps);
   return createComponent(AvatarProvider, {
@@ -425,10 +483,12 @@ const CarouselPrevTrigger = props => {
 };
 
 const useCarousel = props => {
-  const getRootNode = useEnvironmentContext();
+  const locale = useLocaleContext();
+  const environment = useEnvironmentContext();
   const context = mergeProps$1({
     id: createUniqueId(),
-    getRootNode
+    dir: locale().dir,
+    getRootNode: environment().getRootNode
   }, props);
   const [state, send] = useMachine(carousel$1.machine(context), {
     context
@@ -437,7 +497,7 @@ const useCarousel = props => {
 };
 
 const CarouselRoot = props => {
-  const [useCarouselProps, localProps] = createSplitProps()(props, ['align', 'dir', 'getRootNode', 'id', 'ids', 'index', 'loop', 'onIndexChange', 'orientation', 'slidesPerView', 'spacing']);
+  const [useCarouselProps, localProps] = createSplitProps()(props, ['align', 'id', 'ids', 'index', 'loop', 'onIndexChange', 'orientation', 'slidesPerView', 'spacing']);
   const api = useCarousel(useCarouselProps);
   const mergedProps = mergeProps$1(() => api().rootProps, localProps);
   return createComponent(CarouselProvider, {
@@ -475,21 +535,27 @@ const [CheckboxProvider, useCheckboxContext] = createContext({
 
 const CheckboxContext = props => props.children(useCheckboxContext());
 
-var _tmpl$$b = /*#__PURE__*/template(`<input>`);
 const CheckboxControl = props => {
-  const api = useCheckboxContext();
-  const mergedProps = mergeProps$1(() => api().controlProps, props);
-  return [createComponent(ark.div, mergedProps), (() => {
-    var _el$ = _tmpl$$b();
-    spread(_el$, mergeProps(() => api().hiddenInputProps), false, false);
-    return _el$;
-  })()];
+  const checkbox = useCheckboxContext();
+  const mergedProps = mergeProps$1(() => checkbox().controlProps, props);
+  return createComponent(ark.div, mergedProps);
+};
+
+const CheckboxHiddenInput = props => {
+  const checkbox = useCheckboxContext();
+  const mergedProps = mergeProps$1(() => checkbox().hiddenInputProps, props);
+  return createComponent(ark.input, mergedProps);
 };
 
 const CheckboxIndicator = props => {
-  const api = useCheckboxContext();
-  const mergedProps = mergeProps$1(() => api().indicatorProps, props);
-  return createComponent(ark.div, mergedProps);
+  const [indicatorProps, localProps] = createSplitProps()(props, ['indeterminate']);
+  const checkbox = useCheckboxContext();
+  const mergedProps = mergeProps$1(() => checkbox().indicatorProps, localProps);
+  return createComponent(ark.div, mergeProps(mergedProps, {
+    get hidden() {
+      return !(indicatorProps.indeterminate ? checkbox().indeterminate : checkbox().checked);
+    }
+  }));
 };
 
 const CheckboxLabel = props => {
@@ -499,10 +565,12 @@ const CheckboxLabel = props => {
 };
 
 const useCheckbox = props => {
-  const getRootNode = useEnvironmentContext();
+  const locale = useLocaleContext();
+  const environment = useEnvironmentContext();
   const context = mergeProps$1({
     id: createUniqueId(),
-    getRootNode
+    dir: locale().dir,
+    getRootNode: environment().getRootNode
   }, props);
   const [state, send] = useMachine(checkbox$1.machine(context), {
     context
@@ -511,11 +579,11 @@ const useCheckbox = props => {
 };
 
 const CheckboxRoot = props => {
-  const [useCheckboxProps, labelprops] = createSplitProps()(props, ['checked', 'dir', 'disabled', 'form', 'getRootNode', 'id', 'ids', 'invalid', 'name', 'onCheckedChange', 'required', 'value']);
-  const api = useCheckbox(useCheckboxProps);
-  const mergedProps = mergeProps$1(() => api().rootProps, labelprops);
+  const [useCheckboxProps, labelprops] = createSplitProps()(props, ['checked', 'disabled', 'form', 'id', 'ids', 'invalid', 'name', 'onCheckedChange', 'readOnly', 'required', 'value']);
+  const checkbox = useCheckbox(useCheckboxProps);
+  const mergedProps = mergeProps$1(() => checkbox().rootProps, labelprops);
   return createComponent(CheckboxProvider, {
-    value: api,
+    value: checkbox,
     get children() {
       return createComponent(ark.label, mergedProps);
     }
@@ -526,6 +594,7 @@ var checkbox = /*#__PURE__*/Object.freeze({
   __proto__: null,
   Context: CheckboxContext,
   Control: CheckboxControl,
+  HiddenInput: CheckboxHiddenInput,
   Indicator: CheckboxIndicator,
   Label: CheckboxLabel,
   Root: CheckboxRoot
@@ -548,7 +617,7 @@ const ClipboardIndicator = props => {
   const [indicatorProps, localProps] = createSplitProps()(props, ['copied']);
   const api = useClipboardContext();
   const mergedProps = mergeProps$1(api().getIndicatorProps({
-    copied: api().isCopied
+    copied: api().copied
   }), localProps);
   // @ts-expect-error TODO fix
   const getChildren = children(() => localProps.children);
@@ -556,7 +625,7 @@ const ClipboardIndicator = props => {
     get children() {
       return createComponent(Show, {
         get when() {
-          return api().isCopied;
+          return api().copied;
         },
         get fallback() {
           return getChildren();
@@ -582,10 +651,10 @@ const ClipboardLabel = props => {
 };
 
 const useClipboard = props => {
-  const getRootNode = useEnvironmentContext();
+  const environment = useEnvironmentContext();
   const context = mergeProps$1({
     id: createUniqueId(),
-    getRootNode
+    getRootNode: environment().getRootNode
   }, props);
   const [state, send] = useMachine(clipboard$1.machine(context), {
     context
@@ -594,7 +663,7 @@ const useClipboard = props => {
 };
 
 const ClipboardRoot = props => {
-  const [useClipboardProps, localProps] = createSplitProps()(props, ['getRootNode', 'id', 'ids', 'value', 'timeout', 'onCopyStatusChange']);
+  const [useClipboardProps, localProps] = createSplitProps()(props, ['id', 'ids', 'onStatusChange', 'timeout', 'value']);
   const api = useClipboard(useClipboardProps);
   const mergedProps = mergeProps$1(() => api().rootProps, localProps);
   return createComponent(ClipboardProvider, {
@@ -622,7 +691,7 @@ var clipboard = /*#__PURE__*/Object.freeze({
   Trigger: ClipboardTrigger
 });
 
-const [ColorPickerAreaProvider, useColorPickerAreaContext] = createContext({
+const [ColorPickerAreaPropsProvider, useColorPickerAreaPropsContext] = createContext({
   hookName: 'useColorPickerAreaContext',
   providerName: '<ColorPickerAreaProvider />'
 });
@@ -636,7 +705,7 @@ const ColorPickerArea = props => {
   const [channelProps, divprops] = createSplitProps()(props, ['xChannel', 'yChannel']);
   const api = useColorPickerContext();
   const mergedProps = mergeProps$1(() => api().getAreaProps(channelProps), divprops);
-  return createComponent(ColorPickerAreaProvider, {
+  return createComponent(ColorPickerAreaPropsProvider, {
     value: channelProps,
     get children() {
       return createComponent(ark.div, mergedProps);
@@ -645,16 +714,16 @@ const ColorPickerArea = props => {
 };
 
 const ColorPickerAreaBackground = props => {
-  const colorAreaProps = useColorPickerAreaContext();
   const api = useColorPickerContext();
-  const mergedProps = mergeProps$1(() => api().getAreaBackgroundProps(colorAreaProps), props);
+  const areaProps = useColorPickerAreaPropsContext();
+  const mergedProps = mergeProps$1(() => api().getAreaBackgroundProps(areaProps), props);
   return createComponent(ark.div, mergedProps);
 };
 
 const ColorPickerAreaThumb = props => {
-  const colorAreaProps = useColorPickerAreaContext();
   const api = useColorPickerContext();
-  const mergedProps = mergeProps$1(() => api().getAreaThumbProps(colorAreaProps), props);
+  const areaProps = useColorPickerAreaPropsContext();
+  const mergedProps = mergeProps$1(() => api().getAreaThumbProps(areaProps), props);
   return createComponent(ark.div, mergedProps);
 };
 
@@ -665,7 +734,7 @@ const ColorPickerChannelInput = props => {
   return createComponent(ark.input, mergedProps);
 };
 
-const [ColorPickerChannelSliderProvider, useColorPickerChannelSliderContext] = createContext({
+const [ColorPickerChannelPropsProvider, useColorPickerChannelPropsContext] = createContext({
   hookName: 'useColorPickerChannelSliderContext',
   providerName: '<ColorPickerChannelSliderProvider />'
 });
@@ -674,7 +743,7 @@ const ColorPickerChannelSlider = props => {
   const [channelProps, localProps] = createSplitProps()(props, ['channel', 'orientation']);
   const api = useColorPickerContext();
   const mergedProps = mergeProps$1(() => api().getChannelSliderProps(channelProps), localProps);
-  return createComponent(ColorPickerChannelSliderProvider, {
+  return createComponent(ColorPickerChannelPropsProvider, {
     value: channelProps,
     get children() {
       return createComponent(ark.div, mergedProps);
@@ -683,16 +752,16 @@ const ColorPickerChannelSlider = props => {
 };
 
 const ColorPickerChannelSliderThumb = props => {
-  const sliderContext = useColorPickerChannelSliderContext();
   const api = useColorPickerContext();
-  const mergedProps = mergeProps$1(() => api().getChannelSliderThumbProps(sliderContext), props);
+  const channelProps = useColorPickerChannelPropsContext();
+  const mergedProps = mergeProps$1(() => api().getChannelSliderThumbProps(channelProps), props);
   return createComponent(ark.div, mergedProps);
 };
 
 const ColorPickerChannelSliderTrack = props => {
-  const sliderContext = useColorPickerChannelSliderContext();
   const api = useColorPickerContext();
-  const mergedProps = mergeProps$1(() => api().getChannelSliderTrackProps(sliderContext), props);
+  const channelProps = useColorPickerChannelPropsContext();
+  const mergedProps = mergeProps$1(() => api().getChannelSliderTrackProps(channelProps), props);
   return createComponent(ark.div, mergedProps);
 };
 
@@ -706,15 +775,15 @@ const usePresence = props => {
   });
   const api = createMemo(() => presence.connect(state, send, normalizeProps));
   createEffect(() => {
-    const isPresent = api().isPresent;
-    if (isPresent) setWasEverPresent(true);
+    const present = api().present;
+    if (present) setWasEverPresent(true);
   });
   return createMemo(() => ({
-    isUnmounted: !api().isPresent && !wasEverPresent() && renderStrategyProps.lazyMount || renderStrategyProps.unmountOnExit && !api().isPresent && wasEverPresent(),
-    isPresent: api().isPresent,
+    unmounted: !api().present && !wasEverPresent() && renderStrategyProps.lazyMount || renderStrategyProps.unmountOnExit && !api().present && wasEverPresent(),
+    present: api().present,
     presenceProps: {
       ref: api().setNode,
-      hidden: !api().isPresent,
+      hidden: !api().present,
       'data-state': context.present ? 'open' : 'closed'
     }
   }));
@@ -726,7 +795,7 @@ const Presence = props => {
   const mergedProps = mergeProps$1(() => api().presenceProps, localProps);
   return createComponent(Show, {
     get when() {
-      return !api().isUnmounted;
+      return !api().unmounted;
     },
     get children() {
       return createComponent(ark.div, mergeProps(mergedProps, {
@@ -748,7 +817,7 @@ const ColorPickerContent = props => {
   const mergedProps = mergeProps$1(() => api().contentProps, () => presenceApi().presenceProps, props);
   return createComponent(Show, {
     get when() {
-      return !presenceApi().isUnmounted;
+      return !presenceApi().unmounted;
     },
     get children() {
       return createComponent(ark.div, mergedProps);
@@ -796,6 +865,12 @@ const ColorPickerFormatTrigger = props => {
   return createComponent(ark.button, mergedProps);
 };
 
+const ColorPickerHiddenInput = props => {
+  const colorPicker = useColorPickerContext();
+  const mergedProps = mergeProps$1(() => colorPicker().hiddenInputProps, props);
+  return createComponent(ark.input, mergedProps);
+};
+
 const ColorPickerLabel = props => {
   const api = useColorPickerContext();
   const mergedProps = mergeProps$1(() => api().labelProps, props);
@@ -808,7 +883,7 @@ const ColorPickerPositioner = props => {
   const mergedProps = mergeProps$1(() => api().positionerProps, props);
   return createComponent(Show, {
     get when() {
-      return !presenceApi().isUnmounted;
+      return !presenceApi().unmounted;
     },
     get children() {
       return createComponent(ark.div, mergedProps);
@@ -818,10 +893,13 @@ const ColorPickerPositioner = props => {
 
 const useColorPicker = props => {
   const [local, rest] = splitProps(props, ['value']);
-  const getRootNode = useEnvironmentContext();
+  const locale = useLocaleContext();
+  const environment = useEnvironmentContext();
   const context = mergeProps$1(() => ({
     id: createUniqueId(),
-    getRootNode,
+    dir: locale().dir,
+    getRootNode: environment().getRootNode,
+    'open.controlled': props.open !== undefined,
     value: local.value ? colorPicker$1.parse(local.value) : undefined
   }), rest);
   const [state, send] = useMachine(colorPicker$1.machine(context), {
@@ -830,33 +908,28 @@ const useColorPicker = props => {
   return createMemo(() => colorPicker$1.connect(state, send, normalizeProps));
 };
 
-var _tmpl$$a = /*#__PURE__*/template(`<input>`);
 const ColorPickerRoot = props => {
   const [presenceProps, colorPickerProps] = splitPresenceProps(props);
-  const [useColorPickerProps, localProps] = createSplitProps()(colorPickerProps, ['closeOnSelect', 'dir', 'disabled', 'format', 'getRootNode', 'id', 'ids', 'initialFocusEl', 'name', 'name', 'onFocusOutside', 'onFormatChange', 'onInteractOutside', 'onOpenChange', 'onPointerDownOutside', 'onValueChange', 'onValueChangeEnd', 'open', 'positioning', 'readOnly', 'value']);
+  const [useColorPickerProps, localProps] = createSplitProps()(colorPickerProps, ['closeOnSelect', 'disabled', 'format', 'id', 'ids', 'initialFocusEl', 'name', 'name', 'onFocusOutside', 'onFormatChange', 'onInteractOutside', 'onOpenChange', 'onPointerDownOutside', 'onValueChange', 'onValueChangeEnd', 'open', 'positioning', 'readOnly', 'value']);
   const api = useColorPicker(useColorPickerProps);
   const apiPresence = usePresence(mergeProps$1(presenceProps, () => ({
-    present: api().isOpen
+    present: api().open
   })));
   const mergedProps = mergeProps$1(() => api().rootProps, localProps);
   return createComponent(ColorPickerProvider, {
     value: api,
     get children() {
-      return [createComponent(PresenceProvider, {
+      return createComponent(PresenceProvider, {
         value: apiPresence,
         get children() {
           return createComponent(ark.div, mergedProps);
         }
-      }), (() => {
-        var _el$ = _tmpl$$a();
-        spread(_el$, mergeProps(() => api().hiddenInputProps), false, false);
-        return _el$;
-      })()];
+      });
     }
   });
 };
 
-const [ColorPickerSwatchProvider, useColorPickerSwatchContext] = createContext({
+const [ColorPickerSwatchPropsProvider, useColorPickerSwatchPropsContext] = createContext({
   hookName: 'useColorPickerSwatchContext',
   providerName: '<ColorPickerSwatchProvider />'
 });
@@ -865,7 +938,7 @@ const ColorPickerSwatch = props => {
   const [swatchProps, localProps] = createSplitProps()(props, ['respectAlpha', 'value']);
   const api = useColorPickerContext();
   const mergedProps = mergeProps$1(() => api().getSwatchProps(swatchProps), localProps);
-  return createComponent(ColorPickerSwatchProvider, {
+  return createComponent(ColorPickerSwatchPropsProvider, {
     value: swatchProps,
     get children() {
       return createComponent(ark.div, mergedProps);
@@ -881,7 +954,7 @@ const ColorPickerSwatchGroup = props => {
 
 const ColorPickerSwatchIndicator = props => {
   const api = useColorPickerContext();
-  const swatchProps = useColorPickerSwatchContext();
+  const swatchProps = useColorPickerSwatchPropsContext();
   const mergedProps = mergeProps$1(() => api().getSwatchIndicatorProps(swatchProps), props);
   return createComponent(ark.div, mergedProps);
 };
@@ -950,6 +1023,7 @@ var colorPicker = /*#__PURE__*/Object.freeze({
   EyeDropperTrigger: ColorPickerEyeDropperTrigger,
   FormatSelect: ColorPickerFormatSelect,
   FormatTrigger: ColorPickerFormatTrigger,
+  HiddenInput: ColorPickerHiddenInput,
   Label: ColorPickerLabel,
   Positioner: ColorPickerPositioner,
   Root: ColorPickerRoot,
@@ -963,7 +1037,7 @@ var colorPicker = /*#__PURE__*/Object.freeze({
   View: ColorPickerView
 });
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
+// biome-ignore lint/suspicious/noExplicitAny: <explanation>
 const [ComboboxProvider, useComboboxContext] = createContext({
   hookName: 'useComboboxContext',
   providerName: '<ComboboxProvider />'
@@ -981,7 +1055,7 @@ const ComboboxContent = props => {
   const mergedProps = mergeProps$1(() => api().contentProps, () => presenceApi().presenceProps, props);
   return createComponent(Show, {
     get when() {
-      return !presenceApi().isUnmounted;
+      return !presenceApi().unmounted;
     },
     get children() {
       return createComponent(ark.div, mergedProps);
@@ -1007,13 +1081,14 @@ const [ComboboxItemProvider, useComboboxItemContext] = createContext({
   hookName: 'useComboboxItemContext',
   providerName: '<ComboboxItemProvider />'
 });
+
 const [ComboboxItemPropsProvider, useComboboxItemPropsContext] = createContext({
   hookName: 'useComboboxItemPropsContext',
   providerName: '<ComboboxItemPropsProvider />'
 });
 
 const ComboboxItem = props => {
-  const [itemProps, localProps] = createSplitProps()(props, ['item']);
+  const [itemProps, localProps] = createSplitProps()(props, ['item', 'persistFocus']);
   const api = useComboboxContext();
   const mergedProps = mergeProps$1(() => api().getItemProps(itemProps), localProps);
   const itemState = createMemo(() => api().getItemState(itemProps));
@@ -1032,19 +1107,32 @@ const ComboboxItem = props => {
 
 const ComboboxItemContext = props => props.children(useComboboxItemContext());
 
+const [ComboboxItemGroupPropsProvider, useComboboxItemGroupPropsContext] = createContext({
+  hookName: 'useComboboxItemGroupPropsContext',
+  providerName: '<ComboboxItemGroupPropsProvider />'
+});
+
 const ComboboxItemGroup = props => {
-  const [groupProps, localProps] = createSplitProps()(props, ['id']);
+  const [_itemGroupProps, localProps] = createSplitProps()(props, ['id']);
   const combobox = useComboboxContext();
-  const mergedProps = mergeProps$1(() => combobox().getItemGroupProps(groupProps), localProps);
-  return createComponent(ark.div, mergedProps);
+  const itemGroupProps = mergeProps$1({
+    id: createUniqueId()
+  }, _itemGroupProps);
+  const mergedProps = mergeProps$1(() => combobox().getItemGroupProps(itemGroupProps), localProps);
+  return createComponent(ComboboxItemGroupPropsProvider, {
+    value: itemGroupProps,
+    get children() {
+      return createComponent(ark.div, mergedProps);
+    }
+  });
 };
 
 const ComboboxItemGroupLabel = props => {
-  const [labelProps, localProps] = createSplitProps()(props, ['for']);
-  const api = useComboboxContext();
-  const mergedProps = mergeProps$1(() => api().getItemGroupLabelProps({
-    htmlFor: labelProps.for
-  }), localProps);
+  const combobox = useComboboxContext();
+  const itemGroupProps = useComboboxItemGroupPropsContext();
+  const mergedProps = mergeProps$1(() => combobox().getItemGroupLabelProps({
+    htmlFor: itemGroupProps.id
+  }), props);
   return createComponent(ark.div, mergedProps);
 };
 
@@ -1074,7 +1162,7 @@ const ComboboxPositioner = props => {
   const mergedProps = mergeProps$1(() => api().positionerProps, props);
   return createComponent(Show, {
     get when() {
-      return !presenceApi().isUnmounted;
+      return !presenceApi().unmounted;
     },
     get children() {
       return createComponent(ark.div, mergedProps);
@@ -1085,10 +1173,13 @@ const ComboboxPositioner = props => {
 const useCombobox = props => {
   const [collectionOptions, rest] = createSplitProps()(props, ['isItemDisabled', 'itemToValue', 'itemToString', 'items']);
   const collection = () => combobox$1.collection(collectionOptions);
-  const getRootNode = useEnvironmentContext();
+  const locale = useLocaleContext();
+  const environment = useEnvironmentContext();
   const context = mergeProps$1({
     id: createUniqueId(),
-    getRootNode,
+    dir: locale().dir,
+    getRootNode: environment().getRootNode,
+    'open.controlled': props.open !== undefined,
     collection: collection()
   }, rest);
   const [state, send] = useMachine(combobox$1.machine(context), {
@@ -1099,10 +1190,10 @@ const useCombobox = props => {
 
 const ComboboxRoot = props => {
   const [presenceProps, comboboxProps] = splitPresenceProps(props);
-  const [useComboboxProps, localProps] = createSplitProps()(comboboxProps, ['allowCustomValue', 'autoFocus', 'closeOnSelect', 'dir', 'disabled', 'form', 'getRootNode', 'highlightedValue', 'id', 'ids', 'inputBehavior', 'inputValue', 'invalid', 'isItemDisabled', 'items', 'itemToString', 'itemToValue', 'loop', 'multiple', 'name', 'onFocusOutside', 'onHighlightChange', 'onInputValueChange', 'onInteractOutside', 'onOpenChange', 'onOpenChange', 'onPointerDownOutside', 'onValueChange', 'openOnClick', 'placeholder', 'positioning', 'readOnly', 'selectionBehavior', 'selectOnBlur', 'translations', 'value']);
+  const [useComboboxProps, localProps] = createSplitProps()(comboboxProps, ['allowCustomValue', 'autoFocus', 'closeOnSelect', 'disabled', 'dismissable', 'form', 'getSelectionValue', 'highlightedValue', 'id', 'ids', 'inputBehavior', 'inputValue', 'invalid', 'isItemDisabled', 'items', 'itemToString', 'itemToValue', 'loopFocus', 'multiple', 'name', 'onFocusOutside', 'onHighlightChange', 'onInputValueChange', 'onInteractOutside', 'onOpenChange', 'onOpenChange', 'onPointerDownOutside', 'onValueChange', 'open', 'openOnChange', 'openOnClick', 'openOnKeyPress', 'placeholder', 'popup', 'positioning', 'readOnly', 'scrollToIndexFn', 'selectionBehavior', 'translations', 'value']);
   const api = useCombobox(useComboboxProps);
   const apiPresence = usePresence(mergeProps$1(presenceProps, () => ({
-    present: api().isOpen
+    present: api().open
   })));
   const mergedProps = mergeProps$1(() => api().rootProps, localProps);
   return createComponent(ComboboxProvider, {
@@ -1160,7 +1251,7 @@ const DatePickerContent = props => {
   const mergedProps = mergeProps$1(() => api().contentProps, () => presenceApi().presenceProps, props);
   return createComponent(Show, {
     get when() {
-      return !presenceApi().isUnmounted;
+      return !presenceApi().unmounted;
     },
     get children() {
       return createComponent(ark.div, mergedProps);
@@ -1189,14 +1280,14 @@ const DatePickerLabel = props => {
   return createComponent(ark.label, mergedProps);
 };
 
-var _tmpl$$9 = /*#__PURE__*/template(`<option>`);
+var _tmpl$$5 = /*#__PURE__*/template(`<option>`);
 const DatePickerMonthSelect = props => {
   const api = useDatePickerContext();
   const mergedProps = mergeProps$1(() => api().monthSelectProps, props);
   return createComponent(ark.select, mergeProps(mergedProps, {
     get children() {
       return api().getMonths().map(month => (() => {
-        var _el$ = _tmpl$$9();
+        var _el$ = _tmpl$$5();
         insert(_el$, () => month.label);
         effect(() => _el$.value = month.value);
         return _el$;
@@ -1223,7 +1314,7 @@ const DatePickerPositioner = props => {
   const mergedProps = mergeProps$1(() => api().positionerProps, props);
   return createComponent(Show, {
     get when() {
-      return !presenceApi().isUnmounted;
+      return !presenceApi().unmounted;
     },
     get children() {
       return createComponent(ark.div, mergedProps);
@@ -1256,11 +1347,14 @@ const DatePickerRangeText = props => {
 };
 
 const useDatePicker = props => {
-  const getRootNode = useEnvironmentContext();
+  const locale = useLocaleContext();
+  const environment = useEnvironmentContext();
   const [localProps, restProps] = splitProps(props, ['value', 'focusedValue', 'min', 'max']);
   const context = mergeProps$1(() => ({
     id: createUniqueId(),
-    getRootNode,
+    dir: locale().dir,
+    getRootNode: environment().getRootNode,
+    'open.controlled': props.open !== undefined,
     focusedValue: localProps.focusedValue ? datePicker$1.parse(localProps.focusedValue) : undefined,
     value: localProps.value ? datePicker$1.parse(localProps.value) : undefined,
     max: localProps.max ? datePicker$1.parse(localProps.max) : undefined,
@@ -1274,10 +1368,10 @@ const useDatePicker = props => {
 
 const DatePickerRoot = props => {
   const [presenceProps, datePickerProps] = splitPresenceProps(props);
-  const [useDatePickerProps, localProps] = createSplitProps()(datePickerProps, ['closeOnSelect', 'dir', 'disabled', 'fixedWeeks', 'focusedValue', 'format', 'getRootNode', 'id', 'ids', 'isDateUnavailable', 'isDateUnavailable', 'locale', 'max', 'min', 'modal', 'name', 'numOfMonths', 'onFocusChange', 'onOpenChange', 'onValueChange', 'onViewChange', 'open', 'positioning', 'readOnly', 'selectionMode', 'startOfWeek', 'timeZone', 'translations', 'value', 'view']);
+  const [useDatePickerProps, localProps] = createSplitProps()(datePickerProps, ['closeOnSelect', 'disabled', 'fixedWeeks', 'focusedValue', 'format', 'id', 'ids', 'isDateUnavailable', 'isDateUnavailable', 'locale', 'max', 'min', 'modal', 'name', 'numOfMonths', 'onFocusChange', 'onOpenChange', 'onValueChange', 'onViewChange', 'open', 'positioning', 'readOnly', 'selectionMode', 'startOfWeek', 'timeZone', 'translations', 'value', 'view']);
   const api = useDatePicker(useDatePickerProps);
   const apiPresence = usePresence(mergeProps$1(presenceProps, () => ({
-    present: api().isOpen
+    present: api().open
   })));
   const mergedProps = mergeProps$1(() => api().rootProps, localProps);
   return createComponent(DatePickerProvider, {
@@ -1420,7 +1514,7 @@ const DatePickerViewTrigger = props => {
   return createComponent(ark.button, mergedProps);
 };
 
-var _tmpl$$8 = /*#__PURE__*/template(`<option>`);
+var _tmpl$$4 = /*#__PURE__*/template(`<option>`);
 const DatePickerYearSelect = props => {
   const api = useDatePickerContext();
   const mergedProps = mergeProps$1(() => api().yearSelectProps, props);
@@ -1430,7 +1524,7 @@ const DatePickerYearSelect = props => {
         from: 1_000,
         to: 4_000
       }).map(year => (() => {
-        var _el$ = _tmpl$$8();
+        var _el$ = _tmpl$$4();
         _el$.value = year;
         insert(_el$, year);
         return _el$;
@@ -1484,12 +1578,12 @@ const DialogBackdrop = props => {
   const api = useDialogContext();
   const renderStrategyProps = useRenderStrategyContext();
   const presenceApi = usePresence(mergeProps$1(renderStrategyProps, () => ({
-    present: api().isOpen
+    present: api().open
   })));
   const mergedProps = mergeProps$1(() => api().backdropProps, () => presenceApi().presenceProps, props);
   return createComponent(Show, {
     get when() {
-      return !presenceApi().isUnmounted;
+      return !presenceApi().unmounted;
     },
     get children() {
       return createComponent(ark.div, mergedProps);
@@ -1509,7 +1603,7 @@ const DialogContent = props => {
   const mergedProps = mergeProps$1(() => api().contentProps, () => presenceApi().presenceProps, props);
   return createComponent(Show, {
     get when() {
-      return !presenceApi().isUnmounted;
+      return !presenceApi().unmounted;
     },
     get children() {
       return createComponent(ark.div, mergedProps);
@@ -1531,7 +1625,7 @@ const DialogPositioner = props => {
   const mergedProps = mergeProps$1(() => api().positionerProps, props);
   return createComponent(Show, {
     get when() {
-      return !presenceApi().isUnmounted;
+      return !presenceApi().unmounted;
     },
     get children() {
       return createComponent(ark.div, mergedProps);
@@ -1540,10 +1634,13 @@ const DialogPositioner = props => {
 };
 
 const useDialog = props => {
-  const getRootNode = useEnvironmentContext();
+  const locale = useLocaleContext();
+  const environment = useEnvironmentContext();
   const context = mergeProps$1({
     id: createUniqueId(),
-    getRootNode
+    dir: locale().dir,
+    getRootNode: environment().getRootNode,
+    'open.controlled': props.open !== undefined
   }, props);
   const [state, send] = useMachine(dialog$1.machine(context), {
     context
@@ -1554,10 +1651,10 @@ const useDialog = props => {
 const DialogRoot = props => {
   const [presenceProps, dialogProps] = splitPresenceProps(props);
   const [renderStrategyProps] = splitRenderStrategyProps(presenceProps);
-  const [useDialogProps, localProps] = createSplitProps()(dialogProps, ['aria-label', 'closeOnEscapeKeyDown', 'closeOnInteractOutside', 'dir', 'finalFocusEl', 'getRootNode', 'id', 'ids', 'initialFocusEl', 'modal', 'onEscapeKeyDown', 'onFocusOutside', 'onInteractOutside', 'onOpenChange', 'onPointerDownOutside', 'open', 'preventScroll', 'restoreFocus', 'role', 'trapFocus']);
+  const [useDialogProps, localProps] = createSplitProps()(dialogProps, ['aria-label', 'closeOnEscape', 'closeOnInteractOutside', 'finalFocusEl', 'id', 'ids', 'initialFocusEl', 'modal', 'onEscapeKeyDown', 'onFocusOutside', 'onInteractOutside', 'onOpenChange', 'onPointerDownOutside', 'open', 'preventScroll', 'restoreFocus', 'role', 'trapFocus']);
   const api = useDialog(useDialogProps);
   const apiPresence = usePresence(mergeProps$1(presenceProps, () => ({
-    present: api().isOpen
+    present: api().open
   })));
   return createComponent(DialogProvider, {
     value: api,
@@ -1587,7 +1684,7 @@ const DialogTrigger = props => {
   const api = useDialogContext();
   const presenceApi = usePresenceContext();
   const mergedProps = mergeProps$1(() => api().triggerProps, () => ({
-    'aria-controls': presenceApi().isUnmounted && null
+    'aria-controls': presenceApi().unmounted && null
   }), props);
   return createComponent(ark.button, mergedProps);
 };
@@ -1655,10 +1752,12 @@ const EditablePreview = props => {
 };
 
 const useEditable = props => {
-  const getRootNode = useEnvironmentContext();
+  const locale = useLocaleContext();
+  const environment = useEnvironmentContext();
   const context = mergeProps$1({
     id: createUniqueId(),
-    getRootNode
+    dir: locale().dir,
+    getRootNode: environment().getRootNode
   }, props);
   const [state, send] = useMachine(editable$1.machine(context), {
     context
@@ -1667,7 +1766,7 @@ const useEditable = props => {
 };
 
 const EditableRoot = props => {
-  const [useEditableProps, localProps] = createSplitProps()(props, ['activationMode', 'autoResize', 'dir', 'disabled', 'finalFocusEl', 'form', 'getRootNode', 'id', 'ids', 'invalid', 'maxLength', 'name', 'onEdit', 'onFocusOutside', 'onInteractOutside', 'onPointerDownOutside', 'onValueChange', 'onValueCommit', 'onValueRevert', 'placeholder', 'readOnly', 'selectOnFocus', 'startWithEditView', 'submitMode', 'translations', 'value']);
+  const [useEditableProps, localProps] = createSplitProps()(props, ['activationMode', 'autoResize', 'disabled', 'finalFocusEl', 'form', 'id', 'ids', 'invalid', 'maxLength', 'name', 'onEdit', 'onFocusOutside', 'onInteractOutside', 'onPointerDownOutside', 'onValueChange', 'onValueCommit', 'onValueRevert', 'placeholder', 'readOnly', 'selectOnFocus', 'startWithEditView', 'submitMode', 'translations', 'value']);
   const api = useEditable(useEditableProps);
   const mergedProps = mergeProps$1(() => api().rootProps, localProps);
   return createComponent(EditableProvider, {
@@ -1705,27 +1804,22 @@ const [FileUploadProvider, useFileUploadContext] = createContext({
 
 const FileUploadContext = props => props.children(useFileUploadContext());
 
-var _tmpl$$7 = /*#__PURE__*/template(`<input>`);
 const FileUploadDropzone = props => {
-  const api = useFileUploadContext();
-  const mergedProps = mergeProps$1(() => api().dropzoneProps, props);
-  return [createComponent(ark.div, mergedProps), (() => {
-    var _el$ = _tmpl$$7();
-    spread(_el$, mergeProps(() => api().hiddenInputProps), false, false);
-    return _el$;
-  })()];
+  const fileUpload = useFileUploadContext();
+  const mergedProps = mergeProps$1(() => fileUpload().dropzoneProps, props);
+  return createComponent(ark.div, mergedProps);
 };
 
-const [FileUploadItemProvider, useFileUploadItemContext] = createContext({
-  hookName: 'useFileUploadItemContext',
-  providerName: '<FileUploadItemProvider />'
+const [FileUploadItemPropsProvider, useFileUploadItemPropsContext] = createContext({
+  hookName: 'useFileUploadItemPropsContext',
+  providerName: '<FileUploadItemPropsProvider />'
 });
 
 const FileUploadItem = props => {
   const [itemProps, localProps] = createSplitProps()(props, ['file']);
-  const api = useFileUploadContext();
-  const mergedProps = mergeProps$1(() => api().getItemProps(itemProps), localProps);
-  return createComponent(FileUploadItemProvider, {
+  const fileUpload = useFileUploadContext();
+  const mergedProps = mergeProps$1(() => fileUpload().getItemProps(itemProps), localProps);
+  return createComponent(FileUploadItemPropsProvider, {
     value: itemProps,
     get children() {
       return createComponent(ark.li, mergedProps);
@@ -1734,71 +1828,73 @@ const FileUploadItem = props => {
 };
 
 const FileUploadItemDeleteTrigger = props => {
-  const api = useFileUploadContext();
-  const item = useFileUploadItemContext();
-  const mergedProps = mergeProps$1(() => api().getItemDeleteTriggerProps(item), props);
+  const fileUpload = useFileUploadContext();
+  const itemProps = useFileUploadItemPropsContext();
+  const mergedProps = mergeProps$1(() => fileUpload().getItemDeleteTriggerProps(itemProps), props);
   return createComponent(ark.button, mergedProps);
 };
 
 const FileUploadItemGroup = props => {
-  const api = useFileUploadContext();
-  const mergedProps = mergeProps$1(() => api().itemGroupProps, props);
+  const fileUpload = useFileUploadContext();
+  const mergedProps = mergeProps$1(() => fileUpload().itemGroupProps, props);
   return createComponent(ark.ul, mergedProps);
 };
 
 const FileUploadItemName = props => {
-  const api = useFileUploadContext();
-  const item = useFileUploadItemContext();
-  const mergedProps = mergeProps$1(() => api().getItemNameProps(item), props);
+  const fileUpload = useFileUploadContext();
+  const itemProps = useFileUploadItemPropsContext();
+  const mergedProps = mergeProps$1(() => fileUpload().getItemNameProps(itemProps), props);
   return createComponent(ark.div, mergeProps(mergedProps, {
     get children() {
-      return props.children || item.file.name;
+      return props.children || itemProps.file.name;
     }
   }));
 };
 
 const FileUploadItemPreview = props => {
-  const api = useFileUploadContext();
-  const item = useFileUploadItemContext();
-  const mergedProps = mergeProps$1(() => api().getItemPreviewProps(item), props);
-  if (!item.file.type.match(props.type ?? '.*')) return null;
+  const fileUpload = useFileUploadContext();
+  const itemProps = useFileUploadItemPropsContext();
+  const mergedProps = mergeProps$1(() => fileUpload().getItemPreviewProps(itemProps), props);
+  if (!itemProps.file.type.match(props.type ?? '.*')) return null;
   return createComponent(ark.div, mergedProps);
 };
 
 const FileUploadItemPreviewImage = props => {
-  const api = useFileUploadContext();
-  const item = useFileUploadItemContext();
+  const fileUpload = useFileUploadContext();
+  const itemProps = useFileUploadItemPropsContext();
   const [url, setUrl] = createSignal('');
-  api().createFileUrl(item.file, url => setUrl(url));
-  const mergedProps = mergeProps$1(api().getItemPreviewImageProps({
-    ...item,
+  fileUpload().createFileUrl(itemProps.file, url => setUrl(url));
+  const mergedProps = mergeProps$1(fileUpload().getItemPreviewImageProps({
+    ...itemProps,
     url: url()
   }), props);
   return createComponent(ark.img, mergedProps);
 };
 
 const FileUploadItemSizeText = props => {
-  const api = useFileUploadContext();
-  const item = useFileUploadItemContext();
-  const mergedProps = mergeProps$1(() => api().getItemSizeTextProps(item), props);
+  const fileUpload = useFileUploadContext();
+  const itemProps = useFileUploadItemPropsContext();
+  const mergedProps = mergeProps$1(() => fileUpload().getItemSizeTextProps(itemProps), props);
   return createComponent(ark.div, mergeProps(mergedProps, {
     get children() {
-      return props.children || api().getFileSize(item.file);
+      return props.children || fileUpload().getFileSize(itemProps.file);
     }
   }));
 };
 
 const FileUploadLabel = props => {
-  const api = useFileUploadContext();
-  const mergedProps = mergeProps$1(() => api().labelProps, props);
+  const fileUpload = useFileUploadContext();
+  const mergedProps = mergeProps$1(() => fileUpload().labelProps, props);
   return createComponent(ark.label, mergedProps);
 };
 
 const useFileUpload = props => {
-  const getRootNode = useEnvironmentContext();
+  const locale = useLocaleContext();
+  const environment = useEnvironmentContext();
   const context = mergeProps$1({
     id: createUniqueId(),
-    getRootNode
+    dir: locale().dir,
+    getRootNode: environment().getRootNode
   }, props);
   const [state, send] = useMachine(fileUpload$1.machine(context), {
     context
@@ -1807,11 +1903,11 @@ const useFileUpload = props => {
 };
 
 const FileUploadRoot = props => {
-  const [fileUploadProps, localProps] = createSplitProps()(props, ['accept', 'allowDrop', 'capture', 'dir', 'directory', 'disabled', 'getRootNode', 'id', 'ids', 'locale', 'maxFiles', 'maxFileSize', 'minFileSize', 'name', 'onFileAccept', 'onFileChange', 'onFileReject', 'translations', 'validate']);
-  const api = useFileUpload(fileUploadProps);
-  const mergedProps = mergeProps$1(() => api().rootProps, localProps);
+  const [fileUploadProps, localProps] = createSplitProps()(props, ['accept', 'allowDrop', 'capture', 'directory', 'disabled', 'id', 'ids', 'locale', 'maxFiles', 'maxFileSize', 'minFileSize', 'name', 'onFileAccept', 'onFileChange', 'onFileReject', 'translations', 'validate']);
+  const fileUpload = useFileUpload(fileUploadProps);
+  const mergedProps = mergeProps$1(() => fileUpload().rootProps, localProps);
   return createComponent(FileUploadProvider, {
-    value: api,
+    value: fileUpload,
     get children() {
       return createComponent(ark.div, mergedProps);
     }
@@ -1819,15 +1915,22 @@ const FileUploadRoot = props => {
 };
 
 const FileUploadTrigger = props => {
-  const api = useFileUploadContext();
-  const mergedProps = mergeProps$1(() => api().triggerProps, props);
+  const fileUpload = useFileUploadContext();
+  const mergedProps = mergeProps$1(() => fileUpload().triggerProps, props);
   return createComponent(ark.button, mergedProps);
 };
 
+const FileUploadHiddenInput = props => {
+  const fileUpload = useFileUploadContext();
+  const mergedProps = mergeProps$1(() => fileUpload().hiddenInputProps, props);
+  return createComponent(ark.input, mergedProps);
+};
+
 var fileUpload = /*#__PURE__*/Object.freeze({
   __proto__: null,
   Context: FileUploadContext,
   Dropzone: FileUploadDropzone,
+  HiddenInput: FileUploadHiddenInput,
   Item: FileUploadItem,
   ItemDeleteTrigger: FileUploadItemDeleteTrigger,
   ItemGroup: FileUploadItemGroup,
@@ -1840,42 +1943,6 @@ var fileUpload = /*#__PURE__*/Object.freeze({
   Trigger: FileUploadTrigger
 });
 
-const [LocaleContextProvider, useLocaleContext] = createContext({
-  hookName: 'useEnvironmentContext',
-  providerName: '<EnvironmentProvider />',
-  strict: false,
-  defaultValue: () => ({
-    dir: 'ltr',
-    locale: 'en-US'
-  })
-});
-
-const LocaleProvider = props => {
-  const [localeProps, restProps] = splitProps(props, ['locale', 'defaultLocale']);
-  const [locale, setLocale] = createSignal(localeProps.defaultLocale || localeProps.locale || 'en-US');
-  const getRootNode = useEnvironmentContext();
-  createEffect(() => {
-    const cleanup = trackLocale({
-      locale: localeProps.locale,
-      getRootNode,
-      onLocaleChange(locale) {
-        setLocale(locale.locale);
-      }
-    });
-    onCleanup(cleanup);
-  });
-  const context = createMemo(() => ({
-    locale: locale(),
-    dir: isRTL(locale()) ? 'rtl' : 'ltr'
-  }));
-  return createComponent(LocaleContextProvider, {
-    value: context,
-    get children() {
-      return restProps.children;
-    }
-  });
-};
-
 const FormatByte = props => {
   const [valueProps, intlProps] = splitProps(props, ['value']);
   const ctx = useLocaleContext();
@@ -1919,7 +1986,7 @@ const HoverCardContent = props => {
   const mergedProps = mergeProps$1(() => api().contentProps, () => presenceApi().presenceProps, props);
   return createComponent(Show, {
     get when() {
-      return !presenceApi().isUnmounted;
+      return !presenceApi().unmounted;
     },
     get children() {
       return createComponent(ark.div, mergedProps);
@@ -1935,7 +2002,7 @@ const HoverCardPositioner = props => {
   const mergedProps = mergeProps$1(() => api().positionerProps, props);
   return createComponent(Show, {
     get when() {
-      return !presenceApi().isUnmounted;
+      return !presenceApi().unmounted;
     },
     get children() {
       return createComponent(ark.div, mergedProps);
@@ -1944,10 +2011,13 @@ const HoverCardPositioner = props => {
 };
 
 const useHoverCard = props => {
-  const getRootNode = useEnvironmentContext();
+  const locale = useLocaleContext();
+  const environment = useEnvironmentContext();
   const context = mergeProps$1({
     id: createUniqueId(),
-    getRootNode
+    dir: locale().dir,
+    getRootNode: environment().getRootNode,
+    'open.controlled': props.open !== undefined
   }, props);
   const [state, send] = useMachine(hoverCard$1.machine(context), {
     context
@@ -1957,10 +2027,10 @@ const useHoverCard = props => {
 
 const HoverCardRoot = props => {
   const [presenceProps, hoverCardProps] = splitPresenceProps(props);
-  const [useHoverCardProps, localProps] = createSplitProps()(hoverCardProps, ['closeDelay', 'dir', 'getRootNode', 'id', 'ids', 'onOpenChange', 'open', 'openDelay', 'positioning']);
+  const [useHoverCardProps, localProps] = createSplitProps()(hoverCardProps, ['closeDelay', 'id', 'ids', 'onOpenChange', 'open', 'openDelay', 'positioning']);
   const api = useHoverCard(useHoverCardProps);
   const apiPresence = usePresence(mergeProps$1(presenceProps, () => ({
-    present: api().isOpen
+    present: api().open
   })));
   return createComponent(HoverCardProvider, {
     value: api,
@@ -2010,13 +2080,44 @@ const MenuArrowTip = props => {
   return createComponent(ark.div, mergedProps);
 };
 
+const [MenuItemProvider, useMenuItemContext] = createContext({
+  hookName: 'useMenuItemContext',
+  providerName: '<MenuItemProvider />'
+});
+
+const [MenuOptionItemPropsProvider, useMenuOptionItemPropsContext] = createContext({
+  hookName: 'useMenuOptionItemPropsContext',
+  providerName: '<MenuOptionItemPropsProvider />'
+});
+
+const MenuCheckboxItem = props => {
+  const [partialOptionItemProps, localProps] = createSplitProps()(props, ['checked', 'closeOnSelect', 'disabled', 'onCheckedChange', 'value', 'valueText']);
+  const optionItemProps = mergeProps$1(partialOptionItemProps, {
+    type: 'checkbox'
+  });
+  const context = useMenuContext();
+  const mergedProps = mergeProps$1(() => context().getOptionItemProps(optionItemProps), localProps);
+  const itemState = createMemo(() => context().getItemState(optionItemProps));
+  return createComponent(MenuOptionItemPropsProvider, {
+    value: optionItemProps,
+    get children() {
+      return createComponent(MenuItemProvider, {
+        value: itemState,
+        get children() {
+          return createComponent(ark.div, mergedProps);
+        }
+      });
+    }
+  });
+};
+
 const MenuContent = props => {
   const context = useMenuContext();
   const presenceContext = usePresenceContext();
   const mergedProps = mergeProps$1(() => context().contentProps, () => presenceContext().presenceProps, props);
   return createComponent(Show, {
     get when() {
-      return !presenceContext().isUnmounted;
+      return !presenceContext().unmounted;
     },
     get children() {
       return createComponent(ark.div, mergedProps);
@@ -2038,11 +2139,6 @@ const MenuIndicator = props => {
   return createComponent(ark.div, mergedProps);
 };
 
-const [MenuItemProvider, useMenuItemContext] = createContext({
-  hookName: 'useMenuItemContext',
-  providerName: '<MenuItemProvider />'
-});
-
 const MenuItem = props => {
   const [itemProps, localProps] = createSplitProps()(props, ['closeOnSelect', 'disabled', 'value', 'valueText']);
   const context = useMenuContext();
@@ -2087,15 +2183,6 @@ const MenuItemGroupLabel = props => {
   return createComponent(ark.div, mergedProps);
 };
 
-createContext({
-  hookName: 'useMenuOptionItemContext',
-  providerName: '<MenuOptionItemProvider />'
-});
-const [MenuOptionItemPropsProvider, useMenuOptionItemPropsContext] = createContext({
-  hookName: 'useMenuOptionItemPropsContext',
-  providerName: '<MenuOptionItemPropsProvider />'
-});
-
 const MenuItemIndicator = props => {
   const context = useMenuContext();
   const optionItemProps = useMenuOptionItemPropsContext();
@@ -2116,7 +2203,7 @@ const MenuPositioner = props => {
   const mergedProps = mergeProps$1(() => context().positionerProps, props);
   return createComponent(Show, {
     get when() {
-      return !presence().isUnmounted;
+      return !presence().unmounted;
     },
     get children() {
       return createComponent(ark.div, mergedProps);
@@ -2124,11 +2211,55 @@ const MenuPositioner = props => {
   });
 };
 
+const MenuRadioItem = props => {
+  const [partialItemProps, localProps] = createSplitProps()(props, ['closeOnSelect', 'disabled', 'value', 'valueText']);
+  const context = useMenuContext();
+  const itemGroup = useMenuItemGroupContext();
+  const optionItemProps = mergeProps$1(partialItemProps, () => ({
+    type: 'radio',
+    checked: itemGroup.value === partialItemProps.value,
+    onCheckedChange: () => itemGroup.onValueChange?.({
+      value: partialItemProps.value
+    })
+  }));
+  const mergedProps = mergeProps$1(() => context().getOptionItemProps(optionItemProps), localProps);
+  const itemState = createMemo(() => context().getItemState(optionItemProps));
+  return createComponent(MenuOptionItemPropsProvider, {
+    value: optionItemProps,
+    get children() {
+      return createComponent(MenuItemProvider, {
+        value: itemState,
+        get children() {
+          return createComponent(ark.div, mergedProps);
+        }
+      });
+    }
+  });
+};
+
+const MenuRadioItemGroup = props => {
+  const [optionalItemGroupProps, localProps] = createSplitProps()(props, ['id', 'onValueChange', 'value']);
+  const context = useMenuContext();
+  const itemGroupProps = mergeProps$1({
+    id: createUniqueId()
+  }, optionalItemGroupProps);
+  const mergedProps = mergeProps$1(() => context().getItemGroupProps(itemGroupProps), localProps);
+  return createComponent(MenuItemGroupProvider, {
+    value: itemGroupProps,
+    get children() {
+      return createComponent(ark.div, mergedProps);
+    }
+  });
+};
+
 const useMenu = props => {
-  const getRootNode = useEnvironmentContext();
+  const locale = useLocaleContext();
+  const environment = useEnvironmentContext();
   const context = mergeProps$1({
     id: createUniqueId(),
-    getRootNode
+    dir: locale().dir,
+    getRootNode: environment().getRootNode,
+    'open.controlled': props.open !== undefined
   }, props);
   const [state, send, machine] = useMachine(menu$1.machine(context), {
     context
@@ -2154,12 +2285,12 @@ const [MenuTriggerItemProvider, useMenuTriggerItemContext] = createContext({
 
 const MenuRoot = props => {
   const [presenceProps, menuProps] = splitPresenceProps(props);
-  const [useMenuProps, localProps] = createSplitProps()(menuProps, ['anchorPoint', 'aria-label', 'closeOnSelect', 'dir', 'getRootNode', 'highlightedValue', 'id', 'ids', 'loop', 'onEscapeKeyDown', 'onFocusOutside', 'onHighlightChange', 'onInteractOutside', 'onOpenChange', 'onPointerDownOutside', 'onSelect', 'open', 'positioning']);
+  const [useMenuProps, localProps] = createSplitProps()(menuProps, ['anchorPoint', 'aria-label', 'closeOnSelect', 'highlightedValue', 'id', 'ids', 'loopFocus', 'onEscapeKeyDown', 'onFocusOutside', 'onHighlightChange', 'onInteractOutside', 'onOpenChange', 'onPointerDownOutside', 'onSelect', 'open', 'positioning', 'typeahead']);
   const parentApi = useMenuContext();
   const parentMachine = useMenuMachineContext();
   const menu = useMenu(useMenuProps);
   const presenceApi = usePresence(mergeProps$1(presenceProps, () => ({
-    present: menu.api().isOpen
+    present: menu.api().open
   })));
   createEffect(() => {
     if (!parentMachine) return;
@@ -2204,7 +2335,7 @@ const MenuTrigger = props => {
   const api = useMenuContext();
   const presenceApi = usePresenceContext();
   const mergedProps = mergeProps$1(() => api().triggerProps, () => ({
-    'aria-controls': presenceApi().isUnmounted && null
+    'aria-controls': presenceApi().unmounted && null
   }), props);
   return createComponent(ark.button, mergedProps);
 };
@@ -2215,68 +2346,6 @@ const MenuTriggerItem = props => {
   return createComponent(ark.div, mergedProps);
 };
 
-const MenuCheckboxItem = props => {
-  const [partialOptionItemProps, localProps] = createSplitProps()(props, ['checked', 'closeOnSelect', 'disabled', 'onCheckedChange', 'value', 'valueText']);
-  const optionItemProps = mergeProps$1(partialOptionItemProps, {
-    type: 'checkbox'
-  });
-  const context = useMenuContext();
-  const mergedProps = mergeProps$1(() => context().getOptionItemProps(optionItemProps), localProps);
-  const itemState = createMemo(() => context().getItemState(optionItemProps));
-  return createComponent(MenuOptionItemPropsProvider, {
-    value: optionItemProps,
-    get children() {
-      return createComponent(MenuItemProvider, {
-        value: itemState,
-        get children() {
-          return createComponent(ark.div, mergedProps);
-        }
-      });
-    }
-  });
-};
-
-const MenuRadioItem = props => {
-  const [partialItemProps, localProps] = createSplitProps()(props, ['closeOnSelect', 'disabled', 'value', 'valueText']);
-  const context = useMenuContext();
-  const itemGroup = useMenuItemGroupContext();
-  const optionItemProps = mergeProps$1(partialItemProps, () => ({
-    type: 'radio',
-    checked: itemGroup.value === partialItemProps.value,
-    onCheckedChange: () => itemGroup.onValueChange?.({
-      value: partialItemProps.value
-    })
-  }));
-  const mergedProps = mergeProps$1(() => context().getOptionItemProps(optionItemProps), localProps);
-  const itemState = createMemo(() => context().getItemState(optionItemProps));
-  return createComponent(MenuOptionItemPropsProvider, {
-    value: optionItemProps,
-    get children() {
-      return createComponent(MenuItemProvider, {
-        value: itemState,
-        get children() {
-          return createComponent(ark.div, mergedProps);
-        }
-      });
-    }
-  });
-};
-
-const MenuRadioItemGroup = props => {
-  const [optionalItemGroupProps, localProps] = createSplitProps()(props, ['id', 'onValueChange', 'value']);
-  const context = useMenuContext();
-  const itemGroupProps = mergeProps$1({
-    id: createUniqueId()
-  }, optionalItemGroupProps);
-  const mergedProps = mergeProps$1(() => context().getItemGroupProps(itemGroupProps), localProps);
-  return createComponent(MenuItemGroupProvider, {
-    value: itemGroupProps,
-    get children() {
-      return createComponent(ark.div, mergedProps);
-    }
-  });
-};
-
 var menu = /*#__PURE__*/Object.freeze({
   __proto__: null,
   Arrow: MenuArrow,
@@ -2339,10 +2408,12 @@ const NumberInputLabel = props => {
 };
 
 const useNumberInput = props => {
-  const getRootNode = useEnvironmentContext();
+  const locale = useLocaleContext();
+  const environment = useEnvironmentContext();
   const context = mergeProps$1({
     id: createUniqueId(),
-    getRootNode
+    dir: locale().dir,
+    getRootNode: environment().getRootNode
   }, props);
   const [state, send] = useMachine(numberInput$1.machine(context), {
     context
@@ -2351,7 +2422,7 @@ const useNumberInput = props => {
 };
 
 const NumberInputRoot = props => {
-  const [useNumberInputProps, localProps] = createSplitProps()(props, ['allowMouseWheel', 'allowOverflow', 'clampValueOnBlur', 'dir', 'disabled', 'focusInputOnChange', 'form', 'formatOptions', 'getRootNode', 'id', 'ids', 'inputMode', 'invalid', 'locale', 'max', 'min', 'name', 'onFocusChange', 'onValueChange', 'onValueInvalid', 'pattern', 'readOnly', 'spinOnPress', 'step', 'translations', 'value']);
+  const [useNumberInputProps, localProps] = createSplitProps()(props, ['allowMouseWheel', 'allowOverflow', 'clampValueOnBlur', 'disabled', 'focusInputOnChange', 'form', 'formatOptions', 'id', 'ids', 'inputMode', 'invalid', 'locale', 'max', 'min', 'name', 'onFocusChange', 'onValueChange', 'onValueInvalid', 'pattern', 'readOnly', 'spinOnPress', 'step', 'translations', 'value']);
   const api = useNumberInput(useNumberInputProps);
   const mergedProps = mergeProps$1(() => api().rootProps, localProps);
   return createComponent(NumberInputProvider, {
@@ -2414,10 +2485,12 @@ const PaginationPrevTrigger = props => {
 };
 
 const usePagination = props => {
-  const getRootNode = useEnvironmentContext();
+  const locale = useLocaleContext();
+  const environment = useEnvironmentContext();
   const context = mergeProps$1({
     id: createUniqueId(),
-    getRootNode
+    dir: locale().dir,
+    getRootNode: environment().getRootNode
   }, props);
   const [state, send] = useMachine(pagination$1.machine(context), {
     context
@@ -2426,7 +2499,7 @@ const usePagination = props => {
 };
 
 const PaginationRoot = props => {
-  const [usePaginationProps, localProps] = createSplitProps()(props, ['count', 'dir', 'getRootNode', 'id', 'ids', 'onPageChange', 'page', 'pageSize', 'siblingCount', 'translations', 'type']);
+  const [usePaginationProps, localProps] = createSplitProps()(props, ['count', 'id', 'ids', 'onPageChange', 'page', 'pageSize', 'siblingCount', 'translations', 'type']);
   const api = usePagination(usePaginationProps);
   const mergedProps = mergeProps$1(() => api().rootProps, localProps);
   return createComponent(PaginationProvider, {
@@ -2474,10 +2547,12 @@ const PinInputLabel = props => {
 };
 
 const usePinInput = props => {
-  const getRootNode = useEnvironmentContext();
+  const locale = useLocaleContext();
+  const environment = useEnvironmentContext();
   const context = mergeProps$1({
     id: createUniqueId(),
-    getRootNode
+    dir: locale().dir,
+    getRootNode: environment().getRootNode
   }, props);
   const [state, send] = useMachine(pinInput$1.machine(context), {
     context
@@ -2485,27 +2560,29 @@ const usePinInput = props => {
   return createMemo(() => pinInput$1.connect(state, send, normalizeProps));
 };
 
-var _tmpl$$6 = /*#__PURE__*/template(`<input>`);
 const PinInputRoot = props => {
-  const [usePinInputProps, localProps] = createSplitProps()(props, ['autoFocus', 'blurOnComplete', 'dir', 'disabled', 'form', 'getRootNode', 'id', 'ids', 'invalid', 'mask', 'name', 'onValueChange', 'onValueComplete', 'onValueInvalid', 'otp', 'pattern', 'placeholder', 'selectOnFocus', 'translations', 'type', 'value']);
-  const api = usePinInput(usePinInputProps);
-  const mergedProps = mergeProps$1(() => api().rootProps, localProps);
+  const [usePinInputProps, localProps] = createSplitProps()(props, ['autoFocus', 'blurOnComplete', 'disabled', 'form', 'id', 'ids', 'invalid', 'mask', 'name', 'onValueChange', 'onValueComplete', 'onValueInvalid', 'otp', 'pattern', 'placeholder', 'selectOnFocus', 'translations', 'type', 'value']);
+  const pinInput = usePinInput(usePinInputProps);
+  const mergedProps = mergeProps$1(() => pinInput().rootProps, localProps);
   return createComponent(PinInputProvider, {
-    value: api,
+    value: pinInput,
     get children() {
-      return [createComponent(ark.div, mergedProps), (() => {
-        var _el$ = _tmpl$$6();
-        spread(_el$, mergeProps(() => api().hiddenInputProps), false, false);
-        return _el$;
-      })()];
+      return createComponent(ark.div, mergedProps);
     }
   });
 };
 
+const PinInputHiddenInput = props => {
+  const pinInput = usePinInputContext();
+  const mergedProps = mergeProps$1(() => pinInput().hiddenInputProps, props);
+  return createComponent(ark.input, mergedProps);
+};
+
 var pinInput = /*#__PURE__*/Object.freeze({
   __proto__: null,
   Context: PinInputContext,
   Control: PinInputControl,
+  HiddenInput: PinInputHiddenInput,
   Input: PinInputInput,
   Label: PinInputLabel,
   Root: PinInputRoot
@@ -2546,7 +2623,7 @@ const PopoverContent = props => {
   const mergedProps = mergeProps$1(() => api().contentProps, () => presenceApi().presenceProps, props);
   return createComponent(Show, {
     get when() {
-      return !presenceApi().isUnmounted;
+      return !presenceApi().unmounted;
     },
     get children() {
       return createComponent(ark.div, mergedProps);
@@ -2574,7 +2651,7 @@ const PopoverPositioner = props => {
   const mergedProps = mergeProps$1(() => api().positionerProps, props);
   return createComponent(Show, {
     get when() {
-      return !presenceApi().isUnmounted;
+      return !presenceApi().unmounted;
     },
     get children() {
       return createComponent(ark.div, mergedProps);
@@ -2583,10 +2660,13 @@ const PopoverPositioner = props => {
 };
 
 const usePopover = props => {
-  const getRootNode = useEnvironmentContext();
+  const locale = useLocaleContext();
+  const environment = useEnvironmentContext();
   const context = mergeProps$1({
     id: createUniqueId(),
-    getRootNode
+    dir: locale().dir,
+    getRootNode: environment().getRootNode,
+    'open.controlled': props.open !== undefined
   }, props);
   const [state, send] = useMachine(popover$1.machine(context), {
     context
@@ -2596,10 +2676,10 @@ const usePopover = props => {
 
 const PopoverRoot = props => {
   const [presenceProps, popoverProps] = splitPresenceProps(props);
-  const [usePopoverProps, localProps] = createSplitProps()(popoverProps, ['autoFocus', 'closeOnEsc', 'closeOnInteractOutside', 'dir', 'getRootNode', 'id', 'ids', 'initialFocusEl', 'modal', 'onEscapeKeyDown', 'onFocusOutside', 'onInteractOutside', 'onOpenChange', 'onPointerDownOutside', 'open', 'portalled', 'positioning']);
+  const [usePopoverProps, localProps] = createSplitProps()(popoverProps, ['autoFocus', 'closeOnEsc', 'closeOnInteractOutside', 'id', 'ids', 'initialFocusEl', 'modal', 'onEscapeKeyDown', 'onFocusOutside', 'onInteractOutside', 'onOpenChange', 'onPointerDownOutside', 'open', 'portalled', 'positioning']);
   const api = usePopover(usePopoverProps);
   const apiPresence = usePresence(mergeProps$1(presenceProps, () => ({
-    present: api().isOpen
+    present: api().open
   })));
   return createComponent(PopoverProvider, {
     value: api,
@@ -2624,7 +2704,7 @@ const PopoverTrigger = props => {
   const api = usePopoverContext();
   const presenceApi = usePresenceContext();
   const mergedProps = mergeProps$1(() => api().triggerProps, () => ({
-    'aria-controls': presenceApi().isUnmounted && null
+    'aria-controls': presenceApi().unmounted && null
   }), props);
   return createComponent(ark.button, mergedProps);
 };
@@ -2683,10 +2763,12 @@ const ProgressRange = props => {
 };
 
 const useProgress = props => {
-  const getRootNode = useEnvironmentContext();
+  const locale = useLocaleContext();
+  const environment = useEnvironmentContext();
   const context = mergeProps$1({
     id: createUniqueId(),
-    getRootNode
+    dir: locale().dir,
+    getRootNode: environment().getRootNode
   }, props);
   const [state, send] = useMachine(progress$1.machine(context), {
     context
@@ -2695,7 +2777,7 @@ const useProgress = props => {
 };
 
 const ProgressRoot = props => {
-  const [progressProps, localProps] = createSplitProps()(props, ['dir', 'getRootNode', 'id', 'max', 'min', 'orientation', 'translations', 'value']);
+  const [progressProps, localProps] = createSplitProps()(props, ['id', 'ids', 'max', 'min', 'orientation', 'translations', 'value']);
   const api = useProgress(progressProps);
   const mergedProps = mergeProps$1(() => api().rootProps, localProps);
   return createComponent(ProgressProvider, {
@@ -2748,9 +2830,11 @@ const [RadioGroupProvider, useRadioGroupContext] = createContext({
   providerName: '<RadioGroupProvider />'
 });
 
+const RadioGroupContext = props => props.children(useRadioGroupContext());
+
 const RadioGroupIndicator = props => {
-  const api = useRadioGroupContext();
-  const mergedProps = mergeProps$1(() => api().indicatorProps, props);
+  const radioGroup = useRadioGroupContext();
+  const mergedProps = mergeProps$1(() => radioGroup().indicatorProps, props);
   return createComponent(ark.div, mergedProps);
 };
 
@@ -2758,6 +2842,7 @@ const [RadioGroupItemProvider, useRadioGroupItemContext] = createContext({
   hookName: 'useRadioGroupItemContext',
   providerName: '<RadioGroupItemProvider />'
 });
+
 const [RadioGroupItemPropsProvider, useRadioGroupItemPropsContext] = createContext({
   hookName: 'useRadioGroupItemPropsContext',
   providerName: '<RadioGroupItemPropsProvider />'
@@ -2765,14 +2850,14 @@ const [RadioGroupItemPropsProvider, useRadioGroupItemPropsContext] = createConte
 
 const RadioGroupItem = props => {
   const [itemProps, localProps] = createSplitProps()(props, ['value', 'disabled', 'invalid']);
-  const api = useRadioGroupContext();
-  const mergedProps = mergeProps$1(() => api().getItemProps(itemProps), localProps);
-  const itemState = createMemo(() => api().getItemState(itemProps));
-  return createComponent(RadioGroupItemProvider, {
-    value: itemState,
+  const radioGroup = useRadioGroupContext();
+  const mergedProps = mergeProps$1(() => radioGroup().getItemProps(itemProps), localProps);
+  const itemState = createMemo(() => radioGroup().getItemState(itemProps));
+  return createComponent(RadioGroupItemPropsProvider, {
+    value: itemProps,
     get children() {
-      return createComponent(RadioGroupItemPropsProvider, {
-        value: itemProps,
+      return createComponent(RadioGroupItemProvider, {
+        value: itemState,
         get children() {
           return createComponent(ark.label, mergedProps);
         }
@@ -2781,36 +2866,40 @@ const RadioGroupItem = props => {
   });
 };
 
-var _tmpl$$5 = /*#__PURE__*/template(`<input>`);
+const RadioGroupItemContext = props => props.children(useRadioGroupItemContext());
+
+var _tmpl$$3 = /*#__PURE__*/template(`<input>`);
 const RadioGroupItemControl = props => {
-  const api = useRadioGroupContext();
+  const radioGroup = useRadioGroupContext();
   const itemProps = useRadioGroupItemPropsContext();
-  const mergedProps = mergeProps$1(() => api().getItemControlProps(itemProps), props);
+  const mergedProps = mergeProps$1(() => radioGroup().getItemControlProps(itemProps), props);
   return [createComponent(ark.div, mergedProps), (() => {
-    var _el$ = _tmpl$$5();
-    spread(_el$, mergeProps(() => api().getItemHiddenInputProps(itemProps)), false, false);
+    var _el$ = _tmpl$$3();
+    spread(_el$, mergeProps(() => radioGroup().getItemHiddenInputProps(itemProps)), false, false);
     return _el$;
   })()];
 };
 
 const RadioGroupItemText = props => {
-  const api = useRadioGroupContext();
+  const radioGroup = useRadioGroupContext();
   const itemProps = useRadioGroupItemPropsContext();
-  const mergedProps = mergeProps$1(() => api().getItemTextProps(itemProps), props);
+  const mergedProps = mergeProps$1(() => radioGroup().getItemTextProps(itemProps), props);
   return createComponent(ark.span, mergedProps);
 };
 
 const RadioGroupLabel = props => {
-  const api = useRadioGroupContext();
-  const mergedProps = mergeProps$1(() => api().labelProps, props);
+  const radioGroup = useRadioGroupContext();
+  const mergedProps = mergeProps$1(() => radioGroup().labelProps, props);
   return createComponent(ark.label, mergedProps);
 };
 
 const useRadioGroup = props => {
-  const getRootNode = useEnvironmentContext();
+  const locale = useLocaleContext();
+  const environment = useEnvironmentContext();
   const context = mergeProps$1({
     id: createUniqueId(),
-    getRootNode
+    dir: locale().dir,
+    getRootNode: environment().getRootNode
   }, props);
   const [state, send] = useMachine(radio.machine(context), {
     context
@@ -2819,11 +2908,11 @@ const useRadioGroup = props => {
 };
 
 const RadioGroupRoot = props => {
-  const [useRadioGroupProps, localProps] = createSplitProps()(props, ['dir', 'disabled', 'form', 'getRootNode', 'id', 'ids', 'name', 'onValueChange', 'orientation', 'value']);
-  const api = useRadioGroup(useRadioGroupProps);
-  const mergedProps = mergeProps$1(() => api().rootProps, localProps);
+  const [useRadioGroupProps, localProps] = createSplitProps()(props, ['disabled', 'form', 'id', 'ids', 'name', 'onValueChange', 'orientation', 'readOnly', 'value']);
+  const radioGroup = useRadioGroup(useRadioGroupProps);
+  const mergedProps = mergeProps$1(() => radioGroup().rootProps, localProps);
   return createComponent(RadioGroupProvider, {
-    value: api,
+    value: radioGroup,
     get children() {
       return createComponent(ark.div, mergedProps);
     }
@@ -2832,8 +2921,10 @@ const RadioGroupRoot = props => {
 
 var radioGroup = /*#__PURE__*/Object.freeze({
   __proto__: null,
+  Context: RadioGroupContext,
   Indicator: RadioGroupIndicator,
   Item: RadioGroupItem,
+  ItemContext: RadioGroupItemContext,
   ItemControl: RadioGroupItemControl,
   ItemText: RadioGroupItemText,
   Label: RadioGroupLabel,
@@ -2847,15 +2938,10 @@ const [RatingGroupProvider, useRatingGroupContext] = createContext({
 
 const RatingGroupContext = props => props.children(useRatingGroupContext());
 
-var _tmpl$$4 = /*#__PURE__*/template(`<input>`);
 const RatingGroupControl = props => {
-  const api = useRatingGroupContext();
-  const mergedProps = mergeProps$1(() => api().controlProps, props);
-  return [createComponent(ark.div, mergedProps), (() => {
-    var _el$ = _tmpl$$4();
-    spread(_el$, mergeProps(() => api().hiddenInputProps), false, false);
-    return _el$;
-  })()];
+  const ratingGroup = useRatingGroupContext();
+  const mergedProps = mergeProps$1(() => ratingGroup().controlProps, props);
+  return createComponent(ark.div, mergedProps);
 };
 
 const [RatingGroupItemProvider, useRatingGroupItemContext] = createContext({
@@ -2885,10 +2971,12 @@ const RatingGroupLabel = props => {
 };
 
 const useRatingGroup = props => {
-  const getRootNode = useEnvironmentContext();
+  const locale = useLocaleContext();
+  const environment = useEnvironmentContext();
   const context = mergeProps$1({
     id: createUniqueId(),
-    getRootNode
+    dir: locale().dir,
+    getRootNode: environment().getRootNode
   }, props);
   const [state, send] = useMachine(rating.machine(context), {
     context
@@ -2897,7 +2985,7 @@ const useRatingGroup = props => {
 };
 
 const RatingGroupRoot = props => {
-  const [useRatingProps, localProps] = createSplitProps()(props, ['allowHalf', 'autoFocus', 'count', 'dir', 'disabled', 'form', 'getRootNode', 'id', 'ids', 'name', 'onHoverChange', 'onValueChange', 'readOnly', 'translations', 'value']);
+  const [useRatingProps, localProps] = createSplitProps()(props, ['allowHalf', 'autoFocus', 'count', 'disabled', 'form', 'id', 'ids', 'name', 'onHoverChange', 'onValueChange', 'readOnly', 'translations', 'value']);
   const api = useRatingGroup(useRatingProps);
   const mergedProps = mergeProps$1(() => api().rootProps, localProps);
   return createComponent(RatingGroupProvider, {
@@ -2908,10 +2996,17 @@ const RatingGroupRoot = props => {
   });
 };
 
+const RatingGroupHiddenInput = props => {
+  const ratingGroup = useRatingGroupContext();
+  const mergedProps = mergeProps$1(() => ratingGroup().hiddenInputProps, props);
+  return createComponent(ark.input, mergedProps);
+};
+
 var ratingGroup = /*#__PURE__*/Object.freeze({
   __proto__: null,
   Context: RatingGroupContext,
   Control: RatingGroupControl,
+  HiddenInput: RatingGroupHiddenInput,
   Item: RatingGroupItem,
   ItemContext: RatingGroupItemContext,
   Label: RatingGroupLabel,
@@ -2926,8 +3021,8 @@ const [SegmentGroupProvider, useSegmentGroupContext] = createContext({
 const SegmentGroupContext = props => props.children(useSegmentGroupContext());
 
 const SegmentGroupIndicator = props => {
-  const api = useSegmentGroupContext();
-  const mergedProps = mergeProps$1(() => api().indicatorProps, segmentGroupAnatomy.build().indicator.attrs, props);
+  const segmentGroup = useSegmentGroupContext();
+  const mergedProps = mergeProps$1(() => segmentGroup().indicatorProps, segmentGroupAnatomy.build().indicator.attrs, props);
   return createComponent(ark.div, mergedProps);
 };
 
@@ -2935,6 +3030,7 @@ const [SegmentGroupItemProvider, useSegmentGroupItemContext] = createContext({
   hookName: 'useSegmentGroupItemContext',
   providerName: '<SegmentGroupItemProvider />'
 });
+
 const [SegmentGroupItemPropsProvider, useSegmentGroupItemPropsContext] = createContext({
   hookName: 'useSegmentGroupItemPropsContext',
   providerName: '<SegmentGroupItemPropsProvider />'
@@ -2942,9 +3038,9 @@ const [SegmentGroupItemPropsProvider, useSegmentGroupItemPropsContext] = createC
 
 const SegmentGroupItem = props => {
   const [itemProps, localProps] = createSplitProps()(props, ['value', 'disabled', 'invalid']);
-  const api = useSegmentGroupContext();
-  const mergedProps = mergeProps$1(() => api().getItemProps(itemProps), segmentGroupAnatomy.build().item.attrs, localProps);
-  const itemState = createMemo(() => api().getItemState(itemProps));
+  const segmentGroup = useSegmentGroupContext();
+  const mergedProps = mergeProps$1(() => segmentGroup().getItemProps(itemProps), segmentGroupAnatomy.build().item.attrs, localProps);
+  const itemState = createMemo(() => segmentGroup().getItemState(itemProps));
   return createComponent(SegmentGroupItemPropsProvider, {
     value: itemProps,
     get children() {
@@ -2960,36 +3056,38 @@ const SegmentGroupItem = props => {
 
 const SegmentGroupItemContext = props => props.children(useSegmentGroupItemContext());
 
-var _tmpl$$3 = /*#__PURE__*/template(`<input>`);
+var _tmpl$$2 = /*#__PURE__*/template(`<input>`);
 const SegmentGroupItemControl = props => {
-  const api = useSegmentGroupContext();
+  const segmentGroup = useSegmentGroupContext();
   const itemProps = useSegmentGroupItemPropsContext();
-  const mergedProps = mergeProps$1(() => api().getItemControlProps(itemProps), segmentGroupAnatomy.build().itemControl.attrs, props);
+  const mergedProps = mergeProps$1(() => segmentGroup().getItemControlProps(itemProps), segmentGroupAnatomy.build().itemControl.attrs, props);
   return [createComponent(ark.div, mergedProps), (() => {
-    var _el$ = _tmpl$$3();
-    spread(_el$, mergeProps(() => api().getItemHiddenInputProps(itemProps)), false, false);
+    var _el$ = _tmpl$$2();
+    spread(_el$, mergeProps(() => segmentGroup().getItemHiddenInputProps(itemProps)), false, false);
     return _el$;
   })()];
 };
 
 const SegmentGroupItemText = props => {
-  const api = useSegmentGroupContext();
+  const segmentGroup = useSegmentGroupContext();
   const itemProps = useSegmentGroupItemPropsContext();
-  const mergedProps = mergeProps$1(() => api().getItemTextProps(itemProps), segmentGroupAnatomy.build().itemText.attrs, props);
+  const mergedProps = mergeProps$1(() => segmentGroup().getItemTextProps(itemProps), segmentGroupAnatomy.build().itemText.attrs, props);
   return createComponent(ark.span, mergedProps);
 };
 
 const SegmentGroupLabel = props => {
-  const api = useSegmentGroupContext();
-  const mergedProps = mergeProps$1(() => api().labelProps, segmentGroupAnatomy.build().label.attrs, props);
+  const segmentGroup = useSegmentGroupContext();
+  const mergedProps = mergeProps$1(() => segmentGroup().labelProps, segmentGroupAnatomy.build().label.attrs, props);
   return createComponent(ark.label, mergedProps);
 };
 
 const useSegmentGroup = props => {
-  const getRootNode = useEnvironmentContext();
+  const locale = useLocaleContext();
+  const environment = useEnvironmentContext();
   const context = mergeProps$1({
     id: createUniqueId(),
-    getRootNode
+    dir: locale().dir,
+    getRootNode: environment().getRootNode
   }, props);
   const [state, send] = useMachine(radio.machine(context), {
     context
@@ -2998,11 +3096,11 @@ const useSegmentGroup = props => {
 };
 
 const SegmentGroupRoot = props => {
-  const [useSegmentGroupProps, localProps] = createSplitProps()(props, ['dir', 'disabled', 'form', 'getRootNode', 'id', 'ids', 'name', 'onValueChange', 'orientation', 'value']);
-  const api = useSegmentGroup(useSegmentGroupProps);
-  const mergedProps = mergeProps$1(() => api().rootProps, segmentGroupAnatomy.build().root.attrs, localProps);
+  const [useSegmentGroupProps, localProps] = createSplitProps()(props, ['disabled', 'form', 'id', 'ids', 'name', 'onValueChange', 'orientation', 'readOnly', 'value']);
+  const segmentGroup = useSegmentGroup(useSegmentGroupProps);
+  const mergedProps = mergeProps$1(() => segmentGroup().rootProps, segmentGroupAnatomy.build().root.attrs, localProps);
   return createComponent(SegmentGroupProvider, {
-    value: api,
+    value: segmentGroup,
     get children() {
       return createComponent(ark.div, mergedProps);
     }
@@ -3021,25 +3119,25 @@ var segmentGroup = /*#__PURE__*/Object.freeze({
   Root: SegmentGroupRoot
 });
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
+// biome-ignore lint/suspicious/noExplicitAny: <explanation>
 const [SelectProvider, useSelectContext] = createContext({
   hookName: 'useSelectContext',
   providerName: '<SelectProvider />'
 });
 
 const SelectClearTrigger = props => {
-  const api = useSelectContext();
-  const mergedProps = mergeProps$1(() => api().clearTriggerProps, props);
+  const select = useSelectContext();
+  const mergedProps = mergeProps$1(() => select().clearTriggerProps, props);
   return createComponent(ark.button, mergedProps);
 };
 
 const SelectContent = props => {
-  const api = useSelectContext();
+  const select = useSelectContext();
   const presenceApi = usePresenceContext();
-  const mergedProps = mergeProps$1(() => api().contentProps, () => presenceApi().presenceProps, props);
+  const mergedProps = mergeProps$1(() => select().contentProps, () => presenceApi().presenceProps, props);
   return createComponent(Show, {
     get when() {
-      return !presenceApi().isUnmounted;
+      return !presenceApi().unmounted;
     },
     get children() {
       return createComponent(ark.div, mergedProps);
@@ -3047,42 +3145,47 @@ const SelectContent = props => {
   });
 };
 
-var _tmpl$$2 = /*#__PURE__*/template(`<option value="">`),
-  _tmpl$2 = /*#__PURE__*/template(`<select>`),
-  _tmpl$3 = /*#__PURE__*/template(`<option>`);
+const SelectContext = props => props.children(useSelectContext());
+
 const SelectControl = props => {
-  const api = useSelectContext();
-  const mergedProps = mergeProps$1(() => api().controlProps, props);
-  const isValueEmpty = createMemo(() => api().value.length === 0);
-  return [createComponent(ark.div, mergedProps), (() => {
-    var _el$ = _tmpl$2();
-    spread(_el$, mergeProps(() => api().hiddenSelectProps), false, true);
-    insert(_el$, createComponent(Show, {
-      get when() {
-        return isValueEmpty();
-      },
-      get children() {
-        return _tmpl$$2();
-      }
-    }), null);
-    insert(_el$, createComponent(Index, {
-      get each() {
-        return api().collection.toArray();
-      },
-      children: option => (() => {
-        var _el$3 = _tmpl$3();
-        insert(_el$3, () => option().label);
-        effect(() => _el$3.value = option().value);
-        return _el$3;
-      })()
-    }), null);
-    return _el$;
-  })()];
+  const select = useSelectContext();
+  const mergedProps = mergeProps$1(() => select().controlProps, props);
+  return createComponent(ark.div, mergedProps);
+};
+
+var _tmpl$$1 = /*#__PURE__*/template(`<option value="">`),
+  _tmpl$2 = /*#__PURE__*/template(`<option>`);
+const SelectHiddenSelect = props => {
+  const select = useSelectContext();
+  const mergedProps = mergeProps$1(() => select().controlProps, props);
+  const isValueEmpty = createMemo(() => select().value.length === 0);
+  return createComponent(ark.select, mergeProps(mergedProps, {
+    get children() {
+      return [createComponent(Show, {
+        get when() {
+          return isValueEmpty();
+        },
+        get children() {
+          return _tmpl$$1();
+        }
+      }), createComponent(Index, {
+        get each() {
+          return select().collection.toArray();
+        },
+        children: option => (() => {
+          var _el$2 = _tmpl$2();
+          insert(_el$2, () => option().label);
+          effect(() => _el$2.value = option().value);
+          return _el$2;
+        })()
+      })];
+    }
+  }));
 };
 
 const SelectIndicator = props => {
-  const api = useSelectContext();
-  const mergedProps = mergeProps$1(() => api().indicatorProps, props);
+  const select = useSelectContext();
+  const mergedProps = mergeProps$1(() => select().indicatorProps, props);
   return createComponent(ark.div, mergedProps);
 };
 
@@ -3090,6 +3193,7 @@ const [SelectItemProvider, useSelectItemContext] = createContext({
   hookName: 'useSelectItemContext',
   providerName: '<SelectItemProvider />'
 });
+
 const [SelectItemPropsProvider, useSelectItemPropsContext] = createContext({
   hookName: 'useSelectItemPropsContext',
   providerName: '<SelectItemPropsProvider />'
@@ -3097,9 +3201,9 @@ const [SelectItemPropsProvider, useSelectItemPropsContext] = createContext({
 
 const SelectItem = props => {
   const [itemProps, localProps] = createSplitProps()(props, ['item']);
-  const api = useSelectContext();
-  const mergedProps = mergeProps$1(() => api().getItemProps(itemProps), localProps);
-  const itemState = createMemo(() => api().getItemState(itemProps));
+  const select = useSelectContext();
+  const mergedProps = mergeProps$1(() => select().getItemProps(itemProps), localProps);
+  const itemState = createMemo(() => select().getItemState(itemProps));
   return createComponent(SelectItemPropsProvider, {
     value: itemProps,
     get children() {
@@ -3113,49 +3217,64 @@ const SelectItem = props => {
   });
 };
 
+const SelectItemContext = props => props.children(useSelectItemContext());
+
+const [SelectItemGroupPropsProvider, useSelectItemGroupPropsContext] = createContext({
+  hookName: 'useSelectItemGroupPropsContext',
+  providerName: '<SelectItemGroupPropsProvider />'
+});
+
 const SelectItemGroup = props => {
-  const [itemGroupProps, localProps] = createSplitProps()(props, ['id']);
-  const api = useSelectContext();
-  const mergedProps = mergeProps$1(() => api().getItemGroupProps(itemGroupProps), localProps);
-  return createComponent(ark.div, mergedProps);
+  const [_itemGroupProps, localProps] = createSplitProps()(props, ['id']);
+  const select = useSelectContext();
+  const itemGroupProps = mergeProps$1({
+    id: createUniqueId()
+  }, _itemGroupProps);
+  const mergedProps = mergeProps$1(() => select().getItemGroupProps(itemGroupProps), localProps);
+  return createComponent(SelectItemGroupPropsProvider, {
+    value: itemGroupProps,
+    get children() {
+      return createComponent(ark.div, mergedProps);
+    }
+  });
 };
 
 const SelectItemGroupLabel = props => {
-  const [labelProps, localProps] = createSplitProps()(props, ['for']);
-  const api = useSelectContext();
-  const mergedProps = mergeProps$1(() => api().getItemGroupLabelProps({
-    htmlFor: labelProps.for
-  }), localProps);
+  const select = useSelectContext();
+  const itemGroupProps = useSelectItemGroupPropsContext();
+  const mergedProps = mergeProps$1(() => select().getItemGroupLabelProps({
+    htmlFor: itemGroupProps.id
+  }), props);
   return createComponent(ark.div, mergedProps);
 };
 
 const SelectItemIndicator = props => {
-  const api = useSelectContext();
+  const select = useSelectContext();
   const itemProps = useSelectItemPropsContext();
-  const mergedProps = mergeProps$1(() => api().getItemIndicatorProps(itemProps), props);
+  const mergedProps = mergeProps$1(() => select().getItemIndicatorProps(itemProps), props);
   return createComponent(ark.div, mergedProps);
 };
 
 const SelectItemText = props => {
-  const api = useSelectContext();
+  const select = useSelectContext();
   const itemProps = useSelectItemPropsContext();
-  const mergedProps = mergeProps$1(() => api().getItemTextProps(itemProps), props);
+  const mergedProps = mergeProps$1(() => select().getItemTextProps(itemProps), props);
   return createComponent(ark.span, mergedProps);
 };
 
 const SelectLabel = props => {
-  const api = useSelectContext();
-  const mergedProps = mergeProps$1(() => api().labelProps, props);
+  const select = useSelectContext();
+  const mergedProps = mergeProps$1(() => select().labelProps, props);
   return createComponent(ark.label, mergedProps);
 };
 
 const SelectPositioner = props => {
-  const api = useSelectContext();
+  const select = useSelectContext();
   const presenceApi = usePresenceContext();
-  const mergedProps = mergeProps$1(() => api().positionerProps, props);
+  const mergedProps = mergeProps$1(() => select().positionerProps, props);
   return createComponent(Show, {
     get when() {
-      return !presenceApi().isUnmounted;
+      return !presenceApi().unmounted;
     },
     get children() {
       return createComponent(ark.div, mergedProps);
@@ -3166,11 +3285,14 @@ const SelectPositioner = props => {
 const useSelect = props => {
   const [collectionOptions, rest] = createSplitProps()(props, ['isItemDisabled', 'itemToValue', 'itemToString', 'items']);
   const collection = () => select$1.collection(collectionOptions);
-  const getRootNode = useEnvironmentContext();
+  const locale = useLocaleContext();
+  const environment = useEnvironmentContext();
   const context = mergeProps$1({
     id: createUniqueId(),
-    getRootNode,
-    collection: collection()
+    dir: locale().dir,
+    getRootNode: environment().getRootNode,
+    collection: collection(),
+    'open.controlled': props.open !== undefined
   }, rest);
   const [state, send] = useMachine(select$1.machine(context), {
     context
@@ -3180,14 +3302,14 @@ const useSelect = props => {
 
 const SelectRoot = props => {
   const [presenceProps, selectProps] = splitPresenceProps(props);
-  const [useSelectProps, localProps] = createSplitProps()(selectProps, ['closeOnSelect', 'dir', 'disabled', 'form', 'getRootNode', 'highlightedValue', 'id', 'ids', 'invalid', 'isItemDisabled', 'items', 'itemToString', 'itemToValue', 'loop', 'multiple', 'name', 'onFocusOutside', 'onHighlightChange', 'onInteractOutside', 'onOpenChange', 'onPointerDownOutside', 'onValueChange', 'open', 'positioning', 'readOnly', 'scrollToIndexFn', 'selectOnBlur', 'value']);
-  const api = useSelect(useSelectProps);
+  const [useSelectProps, localProps] = createSplitProps()(selectProps, ['closeOnSelect', 'disabled', 'form', 'highlightedValue', 'id', 'ids', 'invalid', 'isItemDisabled', 'items', 'itemToString', 'itemToValue', 'loopFocus', 'multiple', 'name', 'onFocusOutside', 'onHighlightChange', 'onInteractOutside', 'onOpenChange', 'onPointerDownOutside', 'onValueChange', 'open', 'positioning', 'readOnly', 'scrollToIndexFn', 'value']);
+  const select = useSelect(useSelectProps);
   const presenceApi = usePresence(mergeProps$1(() => ({
-    present: api().isOpen
+    present: select().open
   }), presenceProps));
-  const mergedProps = mergeProps$1(() => api().rootProps, localProps);
+  const mergedProps = mergeProps$1(() => select().rootProps, localProps);
   return createComponent(SelectProvider, {
-    value: api,
+    value: select,
     get children() {
       return createComponent(PresenceProvider, {
         value: presenceApi,
@@ -3200,31 +3322,28 @@ const SelectRoot = props => {
 };
 
 const SelectTrigger = props => {
-  const api = useSelectContext();
-  const mergedProps = mergeProps$1(() => api().triggerProps, props);
+  const select = useSelectContext();
+  const mergedProps = mergeProps$1(() => select().triggerProps, props);
   return createComponent(ark.button, mergedProps);
 };
 
 const SelectValueText = props => {
-  const api = useSelectContext();
+  const select = useSelectContext();
   const mergedProps = mergeProps$1(() => selectAnatomy.build().valueText.attrs, props);
   return createComponent(ark.span, mergeProps(mergedProps, {
     get children() {
-      return api().valueAsString || props.placeholder;
+      return select().valueAsString || props.placeholder;
     }
   }));
 };
 
-const SelectContext = props => props.children(useSelectContext());
-
-const SelectItemContext = props => props.children(useSelectItemContext());
-
 var select = /*#__PURE__*/Object.freeze({
   __proto__: null,
   ClearTrigger: SelectClearTrigger,
   Content: SelectContent,
   Context: SelectContext,
   Control: SelectControl,
+  HiddenSelect: SelectHiddenSelect,
   Indicator: SelectIndicator,
   Item: SelectItem,
   ItemContext: SelectItemContext,
@@ -3278,10 +3397,12 @@ const SliderRange = props => {
 };
 
 const useSlider = props => {
-  const getRootNode = useEnvironmentContext();
+  const locale = useLocaleContext();
+  const environment = useEnvironmentContext();
   const context = mergeProps$1({
     id: createUniqueId(),
-    getRootNode
+    dir: locale().dir,
+    getRootNode: environment().getRootNode
   }, props);
   const [state, send] = useMachine(slider$1.machine(context), {
     context
@@ -3290,7 +3411,7 @@ const useSlider = props => {
 };
 
 const SliderRoot = props => {
-  const [useSliderProps, localProps] = createSplitProps()(props, ['aria-label', 'aria-labelledby', 'dir', 'disabled', 'form', 'getAriaValueText', 'getRootNode', 'id', 'ids', 'invalid', 'max', 'min', 'minStepsBetweenThumbs', 'name', 'onFocusChange', 'onValueChange', 'onValueChangeEnd', 'orientation', 'origin', 'readOnly', 'step', 'thumbAlignment', 'thumbAlignment', 'thumbSize', 'value']);
+  const [useSliderProps, localProps] = createSplitProps()(props, ['aria-label', 'aria-labelledby', 'disabled', 'form', 'getAriaValueText', 'id', 'ids', 'invalid', 'max', 'min', 'minStepsBetweenThumbs', 'name', 'onFocusChange', 'onValueChange', 'onValueChangeEnd', 'orientation', 'origin', 'readOnly', 'step', 'thumbAlignment', 'thumbAlignment', 'thumbSize', 'value']);
   const api = useSlider(useSliderProps);
   const mergedProps = mergeProps$1(() => api().rootProps, localProps);
   return createComponent(SliderProvider, {
@@ -3317,7 +3438,7 @@ const SliderTrack = props => {
 const SliderValueText = props => {
   const api = useSliderContext();
   const mergedProps = mergeProps$1(() => api().valueTextProps, props);
-  return createComponent(ark.div, mergeProps(mergedProps, {
+  return createComponent(ark.span, mergeProps(mergedProps, {
     get children() {
       return props.children || api().value.join(',');
     }
@@ -3360,10 +3481,12 @@ const SplitterResizeTrigger = props => {
 };
 
 const useSplitter = props => {
-  const getRootNode = useEnvironmentContext();
+  const locale = useLocaleContext();
+  const environment = useEnvironmentContext();
   const context = mergeProps$1({
     id: createUniqueId(),
-    getRootNode
+    dir: locale().dir,
+    getRootNode: environment().getRootNode
   }, props);
   const [state, send] = useMachine(splitter$1.machine(context), {
     context
@@ -3372,7 +3495,7 @@ const useSplitter = props => {
 };
 
 const SplitterRoot = props => {
-  const [useSplitterProps, localProps] = createSplitProps()(props, ['dir', 'getRootNode', 'id', 'ids', 'onSizeChange', 'onSizeChangeEnd', 'orientation', 'size']);
+  const [useSplitterProps, localProps] = createSplitProps()(props, ['id', 'ids', 'onSizeChange', 'onSizeChangeEnd', 'orientation', 'size']);
   const api = useSplitter(useSplitterProps);
   const mergedProps = mergeProps$1(() => api().rootProps, localProps);
   return createComponent(SplitterProvider, {
@@ -3398,15 +3521,16 @@ const [SwitchProvider, useSwitchContext] = createContext({
 
 const SwitchContext = props => props.children(useSwitchContext());
 
-var _tmpl$$1 = /*#__PURE__*/template(`<input>`);
 const SwitchControl = props => {
   const api = useSwitchContext();
   const mergedProps = mergeProps$1(() => api().controlProps, props);
-  return [createComponent(ark.span, mergedProps), (() => {
-    var _el$ = _tmpl$$1();
-    spread(_el$, mergeProps(() => api().hiddenInputProps), false, false);
-    return _el$;
-  })()];
+  return createComponent(ark.span, mergedProps);
+};
+
+const SwitchHiddenInput = props => {
+  const api = useSwitchContext();
+  const mergedProps = mergeProps$1(() => api().hiddenInputProps, props);
+  return createComponent(ark.input, mergedProps);
 };
 
 const SwitchLabel = props => {
@@ -3416,10 +3540,12 @@ const SwitchLabel = props => {
 };
 
 const useSwitch = props => {
-  const getRootNode = useEnvironmentContext();
+  const locale = useLocaleContext();
+  const environment = useEnvironmentContext();
   const context = mergeProps$1({
     id: createUniqueId(),
-    getRootNode
+    dir: locale().dir,
+    getRootNode: environment().getRootNode
   }, props);
   const [state, send] = useMachine(zagSwitch.machine(context), {
     context
@@ -3428,7 +3554,7 @@ const useSwitch = props => {
 };
 
 const SwitchRoot = props => {
-  const [switchProps, localProps] = createSplitProps()(props, ['checked', 'dir', 'disabled', 'form', 'getRootNode', 'id', 'ids', 'invalid', 'label', 'name', 'onCheckedChange', 'required', 'value']);
+  const [switchProps, localProps] = createSplitProps()(props, ['checked', 'disabled', 'form', 'id', 'ids', 'invalid', 'label', 'name', 'onCheckedChange', 'readOnly', 'required', 'value']);
   const api = useSwitch(switchProps);
   const mergedProps = mergeProps$1(() => api().rootProps, localProps);
   return createComponent(SwitchProvider, {
@@ -3449,6 +3575,7 @@ var _switch = /*#__PURE__*/Object.freeze({
   __proto__: null,
   Context: SwitchContext,
   Control: SwitchControl,
+  HiddenInput: SwitchHiddenInput,
   Label: SwitchLabel,
   Root: SwitchRoot,
   Thumb: SwitchThumb
@@ -3472,7 +3599,7 @@ const TabContent = props => {
     get children() {
       return createComponent(Show, {
         get when() {
-          return !presenceApi().isUnmounted;
+          return !presenceApi().unmounted;
         },
         get children() {
           return createComponent(ark.div, mergedProps);
@@ -3504,10 +3631,12 @@ const TabTrigger = props => {
 const TabsContext = props => props.children(useTabsContext());
 
 const useTabs = props => {
-  const getRootNode = useEnvironmentContext();
+  const locale = useLocaleContext();
+  const environment = useEnvironmentContext();
   const context = mergeProps$1({
     id: createUniqueId(),
-    getRootNode
+    dir: locale().dir,
+    getRootNode: environment().getRootNode
   }, props);
   const [state, send] = useMachine(tabs$1.machine(context), {
     context
@@ -3517,7 +3646,7 @@ const useTabs = props => {
 
 const TabsRoot = props => {
   const [renderStrategyProps, tabsProps] = splitRenderStrategyProps(props);
-  const [useTabsProps, restProps] = createSplitProps()(tabsProps, ['activationMode', 'dir', 'getRootNode', 'id', 'ids', 'loop', 'onFocusChange', 'onValueChange', 'orientation', 'translations', 'value']);
+  const [useTabsProps, restProps] = createSplitProps()(tabsProps, ['activationMode', 'id', 'ids', 'loopFocus', 'onFocusChange', 'onValueChange', 'orientation', 'translations', 'value']);
   const api = useTabs(useTabsProps);
   const mergedProps = mergeProps$1(() => api().rootProps, restProps);
   return createComponent(TabsProvider, {
@@ -3572,6 +3701,7 @@ const [TagsInputItemProvider, useTagsInputItemContext] = createContext({
   hookName: 'useTagsInputItemContext',
   providerName: '<TagsInputItemProvider />'
 });
+
 const [TagsInputItemPropsProvider, useTagsInputItemPropsContext] = createContext({
   hookName: 'useTagsInputItemPropsContext',
   providerName: '<TagsInputItemPropsProvider />'
@@ -3611,6 +3741,12 @@ const TagsInputItemInput = props => {
   return createComponent(ark.input, mergedProps);
 };
 
+const TagsInputHiddenInput = props => {
+  const tagsInput = useTagsInputContext();
+  const mergedProps = mergeProps$1(() => tagsInput().hiddenInputProps, props);
+  return createComponent(ark.input, mergedProps);
+};
+
 const TagsInputItemPreview = props => {
   const api = useTagsInputContext();
   const itemProps = useTagsInputItemPropsContext();
@@ -3632,10 +3768,12 @@ const TagsInputLabel = props => {
 };
 
 const useTagsInput = props => {
-  const getRootNode = useEnvironmentContext();
+  const locale = useLocaleContext();
+  const environment = useEnvironmentContext();
   const context = mergeProps$1({
     id: createUniqueId(),
-    getRootNode
+    dir: locale().dir,
+    getRootNode: environment().getRootNode
   }, props);
   const [state, send] = useMachine(tagsInput$1.machine(context), {
     context
@@ -3643,19 +3781,14 @@ const useTagsInput = props => {
   return createMemo(() => tagsInput$1.connect(state, send, normalizeProps));
 };
 
-var _tmpl$ = /*#__PURE__*/template(`<input>`);
 const TagsInputRoot = props => {
-  const [useTagsInputProps, localProps] = createSplitProps()(props, ['addOnPaste', 'allowEditTag', 'allowOverflow', 'autoFocus', 'blurBehavior', 'delimiter', 'dir', 'disabled', 'form', 'getRootNode', 'id', 'ids', 'inputValue', 'invalid', 'max', 'maxLength', 'name', 'onFocusOutside', 'onHighlightChange', 'onInteractOutside', 'onPointerDownOutside', 'onValueChange', 'onValueInvalid', 'readOnly', 'translations', 'validate', 'value']);
+  const [useTagsInputProps, localProps] = createSplitProps()(props, ['addOnPaste', 'allowOverflow', 'autoFocus', 'blurBehavior', 'delimiter', 'disabled', 'editable', 'form', 'id', 'ids', 'inputValue', 'invalid', 'max', 'maxLength', 'name', 'onFocusOutside', 'onHighlightChange', 'onInputValueChange', 'onInteractOutside', 'onPointerDownOutside', 'onValueChange', 'onValueInvalid', 'readOnly', 'translations', 'validate', 'value']);
   const api = useTagsInput(useTagsInputProps);
   const mergedProps = mergeProps$1(() => api().rootProps, localProps);
   return createComponent(TagsInputProvider, {
     value: api,
     get children() {
-      return [createComponent(ark.div, mergedProps), (() => {
-        var _el$ = _tmpl$();
-        spread(_el$, mergeProps(() => api().hiddenInputProps), false, false);
-        return _el$;
-      })()];
+      return createComponent(ark.div, mergedProps);
     }
   });
 };
@@ -3665,6 +3798,7 @@ var tagsInput = /*#__PURE__*/Object.freeze({
   ClearTrigger: TagsInputClearTrigger,
   Context: TagsInputContext,
   Control: TagsInputControl,
+  HiddenInput: TagsInputHiddenInput,
   Input: TagsInputInput,
   Item: TagsInputItem,
   ItemContext: TagsInputItemContext,
@@ -3676,8 +3810,16 @@ var tagsInput = /*#__PURE__*/Object.freeze({
   Root: TagsInputRoot
 });
 
-const ToastGroup = props => {
-  return createComponent(ark.ol, props);
+const createToaster = props => {
+  const machine = toast$1.group.machine({
+    id: '1',
+    ...props
+  });
+  const api = toast$1.group.connect(machine, machine.send, normalizeProps);
+  return {
+    ...api,
+    machine
+  };
 };
 
 const [ToastProvider, useToastContext] = createContext({
@@ -3685,90 +3827,88 @@ const [ToastProvider, useToastContext] = createContext({
   providerName: '<ToastProvider />'
 });
 
-const createToaster = props => {
-  const service = toast$1.group.machine({
-    id: '1',
-    ...props
-  }).start();
-  const [state, send] = useActor(service);
-  const api = createMemo(() => toast$1.group.connect(state, send, normalizeProps));
-  const subscribe = fn => {
-    // @ts-expect-error FIX LATER IT EXISTS
-    return service.subscribe(state => fn(state.context.toasts));
-  };
-  const Toaster = toasterProps => {
-    const getRootNode = useEnvironmentContext();
-    createEffect(() => {
-      service.setContext({
-        getRootNode
-      });
-      onCleanup(() => service.stop());
-    });
-    const mergedProps = mergeProps$1(() => api().getGroupProps({
-      placement: props.placement
-    }), toasterProps);
-    return createComponent(ToastGroup, mergeProps(mergedProps, {
-      get children() {
-        return createComponent(Index, {
-          get each() {
-            return api().toastsByPlacement[props.placement];
-          },
-          children: toast => createComponent(ToastProviderFactory, {
-            get service() {
-              return toast();
-            }
-          })
-        });
-      }
-    }));
-  };
-  return [Toaster, createMemo(() => Object.assign(api(), {
-    subscribe
-  }))];
-};
-const ToastProviderFactory = props => {
-  const [state, send] = useActor(props.service);
-  const api = createMemo(() => toast$1.connect(state, send, normalizeProps));
-  return createComponent(ToastProvider, {
-    value: api,
-    get children() {
-      return state.context.render?.(api);
-    }
-  });
+const ToastActionTrigger = props => {
+  const toast = useToastContext();
+  const mergedProps = mergeProps$1(() => toast().actionTriggerProps, props);
+  return createComponent(ark.button, mergedProps);
 };
 
 const ToastCloseTrigger = props => {
-  const api = useToastContext();
-  const mergedProps = mergeProps$1(() => api().closeTriggerProps, props);
+  const toast = useToastContext();
+  const mergedProps = mergeProps$1(() => toast().closeTriggerProps, props);
   return createComponent(ark.button, mergedProps);
 };
 
 const ToastContext = props => props.children(useToastContext());
 
 const ToastDescription = props => {
-  const api = useToastContext();
-  const mergedProps = mergeProps$1(() => api().descriptionProps, props);
+  const toast = useToastContext();
+  const mergedProps = mergeProps$1(() => toast().descriptionProps, props);
   return createComponent(ark.div, mergedProps);
 };
 
+var _tmpl$ = /*#__PURE__*/template(`<div><div></div><div>`);
 const ToastRoot = props => {
-  const api = useToastContext();
-  const mergedProps = mergeProps$1(() => api().rootProps, props);
-  return createComponent(ark.li, mergedProps);
+  const toast = useToastContext();
+  return (() => {
+    var _el$ = _tmpl$(),
+      _el$2 = _el$.firstChild,
+      _el$3 = _el$2.nextSibling;
+    spread(_el$, mergeProps(() => toast().rootProps), false, true);
+    spread(_el$2, mergeProps(() => toast().ghostBeforeProps), false, false);
+    insert(_el$, () => props.children, _el$3);
+    spread(_el$3, mergeProps(() => toast().ghostAfterProps), false, false);
+    return _el$;
+  })();
 };
 
 const ToastTitle = props => {
-  const api = useToastContext();
-  const mergedProps = mergeProps$1(() => api().titleProps, props);
+  const toast = useToastContext();
+  const mergedProps = mergeProps$1(() => toast().titleProps, props);
   return createComponent(ark.div, mergedProps);
 };
 
+const Toaster = props => {
+  const [toasterProps, localProps] = splitProps(props, ['toaster', 'children']);
+  const [state, send] = useMachine(toasterProps.toaster.machine);
+  const placement = state.context.placement;
+  const api = createMemo(() => toast$1.group.connect(state, send, normalizeProps));
+  const toasts = createMemo(() => api().getToastsByPlacement(placement));
+  const mergedProps = mergeProps$1(api().getGroupProps({
+    placement
+  }), localProps);
+  return createComponent(ark.div, mergeProps(mergedProps, {
+    get children() {
+      return createComponent(For, {
+        get each() {
+          return toasts();
+        },
+        children: toast => createComponent(ToastActor, {
+          value: toast,
+          children: ctx => toasterProps.children(ctx)
+        })
+      });
+    }
+  }));
+};
+const ToastActor = props => {
+  const [state, send] = useActor(props.value);
+  const api = createMemo(() => toast$1.connect(state, send, normalizeProps));
+  const ctx = createMemo(() => state.context);
+  return createComponent(ToastProvider, {
+    value: api,
+    get children() {
+      return props.children(ctx);
+    }
+  });
+};
+
 var toast = /*#__PURE__*/Object.freeze({
   __proto__: null,
+  ActionTrigger: ToastActionTrigger,
   CloseTrigger: ToastCloseTrigger,
   Context: ToastContext,
   Description: ToastDescription,
-  Group: ToastGroup,
   Root: ToastRoot,
   Title: ToastTitle
 });
@@ -3788,10 +3928,12 @@ const ToggleGroupItem = props => {
 };
 
 const useToggleGroup = props => {
-  const getRootNode = useEnvironmentContext();
+  const locale = useLocaleContext();
+  const environment = useEnvironmentContext();
   const context = mergeProps$1({
     id: createUniqueId(),
-    getRootNode
+    dir: locale().dir,
+    getRootNode: environment().getRootNode
   }, props);
   const [state, send] = useMachine(toggleGroup$1.machine(context), {
     context
@@ -3800,7 +3942,7 @@ const useToggleGroup = props => {
 };
 
 const ToggleGroupRoot = props => {
-  const [useToggleGroupProps, restProps] = createSplitProps()(props, ['dir', 'disabled', 'getRootNode', 'id', 'ids', 'loop', 'multiple', 'onValueChange', 'orientation', 'rovingFocus', 'value']);
+  const [useToggleGroupProps, restProps] = createSplitProps()(props, ['disabled', 'id', 'ids', 'loopFocus', 'multiple', 'onValueChange', 'orientation', 'rovingFocus', 'value']);
   const api = useToggleGroup(useToggleGroupProps);
   const mergedProps = mergeProps$1(() => api().rootProps, restProps);
   return createComponent(ToggleGroupProvider, {
@@ -3841,7 +3983,7 @@ const TooltipContent = props => {
   const mergedProps = mergeProps$1(() => api().contentProps, () => presenceApi().presenceProps, props);
   return createComponent(Show, {
     get when() {
-      return !presenceApi().isUnmounted;
+      return !presenceApi().unmounted;
     },
     get children() {
       return createComponent(ark.div, mergedProps);
@@ -3857,7 +3999,7 @@ const TooltipPositioner = props => {
   const mergedProps = mergeProps$1(() => api().positionerProps, props);
   return createComponent(Show, {
     get when() {
-      return !presenceApi().isUnmounted;
+      return !presenceApi().unmounted;
     },
     get children() {
       return createComponent(ark.div, mergedProps);
@@ -3866,10 +4008,13 @@ const TooltipPositioner = props => {
 };
 
 const useTooltip = props => {
-  const getRootNode = useEnvironmentContext();
+  const locale = useLocaleContext();
+  const environment = useEnvironmentContext();
   const context = mergeProps$1({
     id: createUniqueId(),
-    getRootNode
+    dir: locale().dir,
+    getRootNode: environment().getRootNode,
+    'open.controlled': props.open !== undefined
   }, props);
   const [state, send] = useMachine(tooltip$1.machine(context), {
     context
@@ -3879,10 +4024,10 @@ const useTooltip = props => {
 
 const TooltipRoot = props => {
   const [presenceProps, tooltipProps] = splitPresenceProps(props);
-  const [useTooltipProps, localProps] = createSplitProps()(tooltipProps, ['aria-label', 'closeDelay', 'closeOnEsc', 'closeOnPointerDown', 'dir', 'disabled', 'getRootNode', 'id', 'ids', 'interactive', 'onOpenChange', 'open', 'openDelay', 'positioning']);
+  const [useTooltipProps, localProps] = createSplitProps()(tooltipProps, ['aria-label', 'closeDelay', 'closeOnEsc', 'closeOnPointerDown', 'disabled', 'id', 'ids', 'interactive', 'onOpenChange', 'open', 'openDelay', 'positioning']);
   const api = useTooltip(useTooltipProps);
   const apiPresence = usePresence(mergeProps$1(presenceProps, () => ({
-    present: api().isOpen
+    present: api().open
   })));
   return createComponent(TooltipProvider, {
     value: api,
@@ -3930,7 +4075,7 @@ const [TreeViewDepthProvider, useTreeViewDepthContext] = createContext({
 });
 
 const TreeViewBranch = props => {
-  const [itemProps, localProps] = createSplitProps()(props, ['disabled', 'id']);
+  const [itemProps, localProps] = createSplitProps()(props, ['disabled', 'value']);
   const api = useTreeViewContext();
   const depth = useTreeViewDepthContext();
   const branchProps = mergeProps$1(itemProps, {
@@ -3992,32 +4137,45 @@ const [TreeViewItemProvider, useTreeViewItemContext] = createContext({
   providerName: '<TreeViewItemProvider />'
 });
 
+const [TreeViewItemPropsProvider, useTreeViewItemPropsContext] = createContext({
+  hookName: 'useTreeViewItemPropsContext',
+  providerName: '<TreeViewItemProvider />'
+});
+
 const TreeViewItem = props => {
-  const [_itemProps, localProps] = createSplitProps()(props, ['id', 'disabled']);
+  const [_itemProps, localProps] = createSplitProps()(props, ['disabled', 'value']);
   const api = useTreeViewContext();
   const depth = useTreeViewDepthContext();
   const itemProps = mergeProps$1(_itemProps, {
     depth
   });
+  const itemState = createMemo(() => api().getItemState(itemProps));
   const mergedProps = mergeProps$1(() => api().getItemProps(itemProps), localProps);
-  return createComponent(TreeViewItemProvider, {
+  return createComponent(TreeViewItemPropsProvider, {
     value: itemProps,
     get children() {
-      return createComponent(ark.li, mergedProps);
+      return createComponent(TreeViewItemProvider, {
+        value: itemState,
+        get children() {
+          return createComponent(ark.li, mergedProps);
+        }
+      });
     }
   });
 };
 
+const TreeViewItemContext = props => props.children(useTreeViewItemContext());
+
 const TreeViewItemIndicator = props => {
   const api = useTreeViewContext();
-  const itemProps = useTreeViewItemContext();
+  const itemProps = useTreeViewItemPropsContext();
   const mergedProps = mergeProps$1(() => api().getItemIndicatorProps(itemProps), props);
   return createComponent(ark.div, mergedProps);
 };
 
 const TreeViewItemText = props => {
   const api = useTreeViewContext();
-  const itemProps = useTreeViewItemContext();
+  const itemProps = useTreeViewItemPropsContext();
   const mergedProps = mergeProps$1(() => api().getItemTextProps(itemProps), props);
   return createComponent(ark.span, mergedProps);
 };
@@ -4029,10 +4187,12 @@ const TreeViewLabel = props => {
 };
 
 const useTreeView = props => {
-  const getRootNode = useEnvironmentContext();
+  const locale = useLocaleContext();
+  const environment = useEnvironmentContext();
   const context = mergeProps$1({
     id: createUniqueId(),
-    getRootNode
+    dir: locale().dir,
+    getRootNode: environment().getRootNode
   }, props);
   const [state, send] = useMachine(treeView$1.machine(context), {
     context
@@ -4041,7 +4201,7 @@ const useTreeView = props => {
 };
 
 const TreeViewRoot = props => {
-  const [useTreeViewProps, localProps] = createSplitProps()(props, ['dir', 'expandedIds', 'focusedId', 'getRootNode', 'id', 'onExpandedChange', 'onFocusChange', 'onSelectionChange', 'openOnClick', 'selectedIds', 'selectionMode']);
+  const [useTreeViewProps, localProps] = createSplitProps()(props, ['expandedValue', 'focusedValue', 'id', 'ids', 'onExpandedChange', 'onFocusChange', 'onSelectionChange', 'openOnClick', 'selectedValue', 'selectionMode', 'typeahead']);
   const api = useTreeView(useTreeViewProps);
   const mergedProps = mergeProps$1(() => api().rootProps, localProps);
   return createComponent(TreeViewProvider, {
@@ -4073,6 +4233,7 @@ var treeView = /*#__PURE__*/Object.freeze({
   BranchTrigger: TreeViewBranchTrigger,
   Context: TreeViewContext,
   Item: TreeViewItem,
+  ItemContext: TreeViewItemContext,
   ItemIndicator: TreeViewItemIndicator,
   ItemText: TreeViewItemText,
   Label: TreeViewLabel,
@@ -4080,5 +4241,5 @@ var treeView = /*#__PURE__*/Object.freeze({
   Tree: TreeViewTree
 });
 
-export { accordion as Accordion, AccordionContext, AccordionItem, AccordionItemContent, AccordionItemIndicator, AccordionItemTrigger, AccordionRoot, avatar as Avatar, AvatarContext, AvatarFallback, AvatarImage, AvatarRoot, carousel as Carousel, CarouselContext, CarouselControl, CarouselIndicator, CarouselIndicatorGroup, CarouselItem, CarouselItemGroup, CarouselNextTrigger, CarouselPrevTrigger, CarouselRoot, CarouselViewport, checkbox as Checkbox, CheckboxContext, CheckboxControl, CheckboxIndicator, CheckboxLabel, CheckboxRoot, clipboard as Clipboard, ClipboardContext, ClipboardControl, ClipboardIndicator, ClipboardInput, ClipboardLabel, ClipboardRoot, ClipboardTrigger, collapsible as Collapsible, CollapsibleContent, CollapsibleContext, CollapsibleRoot, CollapsibleTrigger, colorPicker as ColorPicker, ColorPickerArea, ColorPickerAreaBackground, ColorPickerAreaThumb, ColorPickerChannelInput, ColorPickerChannelSlider, ColorPickerChannelSliderThumb, ColorPickerChannelSliderTrack, ColorPickerContent, ColorPickerContext, ColorPickerControl, ColorPickerEyeDropperTrigger, ColorPickerFormatSelect, ColorPickerFormatTrigger, ColorPickerLabel, ColorPickerPositioner, ColorPickerRoot, ColorPickerSwatch, ColorPickerSwatchGroup, ColorPickerSwatchIndicator, ColorPickerSwatchTrigger, ColorPickerTransparencyGrid, ColorPickerTrigger, ColorPickerValueText, ColorPickerView, combobox as Combobox, ComboboxClearTrigger, ComboboxContent, ComboboxContext, ComboboxControl, ComboboxInput, ComboboxItem, ComboboxItemContext, ComboboxItemGroup, ComboboxItemGroupLabel, ComboboxItemIndicator, ComboboxItemText, ComboboxLabel, ComboboxPositioner, ComboboxRoot, ComboboxTrigger, datePicker as DatePicker, DatePickerClearTrigger, DatePickerContent, DatePickerContext, DatePickerControl, DatePickerInput, DatePickerLabel, DatePickerMonthSelect, DatePickerNextTrigger, DatePickerPositioner, DatePickerPresetTrigger, DatePickerPrevTrigger, DatePickerRangeText, DatePickerRoot, DatePickerTable, DatePickerTableBody, DatePickerTableCell, DatePickerTableCellTrigger, DatePickerTableHead, DatePickerTableHeader, DatePickerTableRow, DatePickerTrigger, DatePickerView, DatePickerViewControl, DatePickerViewTrigger, DatePickerYearSelect, dialog as Dialog, DialogBackdrop, DialogCloseTrigger, DialogContent, DialogContext, DialogDescription, DialogPositioner, DialogRoot, DialogTitle, DialogTrigger, editable as Editable, EditableArea, EditableCancelTrigger, EditableContext, EditableControl, EditableEditTrigger, EditableInput, EditableLabel, EditablePreview, EditableRoot, EditableSubmitTrigger, Environment, fileUpload as FileUpload, FileUploadContext, FileUploadDropzone, FileUploadItem, FileUploadItemDeleteTrigger, FileUploadItemGroup, FileUploadItemName, FileUploadItemPreview, FileUploadItemPreviewImage, FileUploadItemSizeText, FileUploadLabel, FileUploadRoot, FileUploadTrigger, format as Format, FormatByte, FormatNumber, hoverCard as HoverCard, HoverCardArrow, HoverCardArrowTip, HoverCardContent, HoverCardContext, HoverCardPositioner, HoverCardRoot, HoverCardTrigger, LocaleProvider, menu as Menu, MenuArrow, MenuArrowTip, MenuContent, MenuContext, MenuContextTrigger, MenuIndicator, MenuItem, MenuItemContext, MenuItemGroup, MenuItemGroupLabel, MenuItemIndicator, MenuItemText, MenuPositioner, MenuRoot, MenuSeparator, MenuTrigger, MenuTriggerItem, numberInput as NumberInput, NumberInputContext, NumberInputControl, NumberInputDecrementTrigger, NumberInputIncrementTrigger, NumberInputInput, NumberInputLabel, NumberInputRoot, NumberInputScrubber, pagination as Pagination, PaginationContext, PaginationEllipsis, PaginationItem, PaginationNextTrigger, PaginationPrevTrigger, PaginationRoot, pinInput as PinInput, PinInputContext, PinInputControl, PinInputInput, PinInputLabel, PinInputRoot, popover as Popover, PopoverAnchor, PopoverArrow, PopoverArrowTip, PopoverCloseTrigger, PopoverContent, PopoverContext, PopoverDescription, PopoverIndicator, PopoverPositioner, PopoverRoot, PopoverTitle, PopoverTrigger, Presence, PresenceProvider, progress as Progress, ProgressCircle, ProgressCircleRange, ProgressCircleTrack, ProgressContext, ProgressLabel, ProgressRange, ProgressRoot, ProgressTrack, ProgressValueText, ProgressView, radioGroup as RadioGroup, RadioGroupIndicator, RadioGroupItem, RadioGroupItemControl, RadioGroupItemText, RadioGroupLabel, RadioGroupRoot, ratingGroup as RatingGroup, RatingGroupContext, RatingGroupControl, RatingGroupItem, RatingGroupItemContext, RatingGroupLabel, RatingGroupRoot, segmentGroup as SegmentGroup, SegmentGroupContext, SegmentGroupIndicator, SegmentGroupItem, SegmentGroupItemContext, SegmentGroupItemControl, SegmentGroupItemText, SegmentGroupLabel, SegmentGroupRoot, select as Select, SelectClearTrigger, SelectContent, SelectControl, SelectIndicator, SelectItem, SelectItemGroup, SelectItemGroupLabel, SelectItemIndicator, SelectItemText, SelectLabel, SelectPositioner, SelectRoot, SelectTrigger, SelectValueText, slider as Slider, SliderContext, SliderControl, SliderLabel, SliderMarker, SliderMarkerGroup, SliderRange, SliderRoot, SliderThumb, SliderTrack, SliderValueText, splitter as Splitter, SplitterContext, SplitterPanel, SplitterResizeTrigger, SplitterRoot, _switch as Switch, SwitchContext, SwitchControl, SwitchLabel, SwitchRoot, SwitchThumb, TabContent, TabIndicator, TabList, TabTrigger, tabs as Tabs, TabsContext, TabsRoot, tagsInput as TagsInput, TagsInputClearTrigger, TagsInputContext, TagsInputControl, TagsInputInput, TagsInputItem, TagsInputItemContext, TagsInputItemDeleteTrigger, TagsInputItemInput, TagsInputItemPreview, TagsInputItemText, TagsInputLabel, TagsInputRoot, toast as Toast, ToastCloseTrigger, ToastContext, ToastDescription, ToastGroup, ToastRoot, ToastTitle, toggleGroup as ToggleGroup, ToggleGroupContext, ToggleGroupItem, ToggleGroupRoot, tooltip as Tooltip, TooltipArrow, TooltipArrowTip, TooltipContent, TooltipContext, TooltipPositioner, TooltipRoot, TooltipTrigger, treeView as TreeView, TreeViewBranch, TreeViewBranchContent, TreeViewBranchControl, TreeViewBranchIndicator, TreeViewBranchText, TreeViewBranchTrigger, TreeViewContext, TreeViewItem, TreeViewItemIndicator, TreeViewItemText, TreeViewLabel, TreeViewRoot, TreeViewTree, ark, createToaster, splitPresenceProps, useAccordionContext, useAccordionItemContext, useAvatarContext, useCarouselContext, useCheckboxContext, useClipboardContext, useCollapsibleContext, useColorPickerContext, useComboboxContext, useComboboxItemContext, useDatePickerContext, useDialogContext, useEditableContext, useEnvironmentContext, useFileUploadContext, useHoverCardContext, useLocaleContext, useMenuContext, useMenuItemContext, useNumberInputContext, usePaginationContext, usePinInputContext, usePopoverContext, usePresence, usePresenceContext, useProgressContext, useRadioGroupContext, useRadioGroupItemContext, useRatingGroupContext, useRatingGroupItemContext, useSegmentGroupContext, useSegmentGroupItemContext, useSelectContext, useSelectItemContext, useSliderContext, useSplitterContext, useSwitchContext, useTabsContext, useTagsInputContext, useTagsInputItemContext, useToastContext, useToggleGroupContext, useTooltipContext, useTreeViewContext };
+export { accordion as Accordion, AccordionContext, AccordionItem, AccordionItemContent, AccordionItemContext, AccordionItemIndicator, AccordionItemTrigger, AccordionRoot, avatar as Avatar, AvatarContext, AvatarFallback, AvatarImage, AvatarRoot, carousel as Carousel, CarouselContext, CarouselControl, CarouselIndicator, CarouselIndicatorGroup, CarouselItem, CarouselItemGroup, CarouselNextTrigger, CarouselPrevTrigger, CarouselRoot, CarouselViewport, checkbox as Checkbox, CheckboxContext, CheckboxControl, CheckboxHiddenInput, CheckboxIndicator, CheckboxLabel, CheckboxRoot, clipboard as Clipboard, ClipboardContext, ClipboardControl, ClipboardIndicator, ClipboardInput, ClipboardLabel, ClipboardRoot, ClipboardTrigger, collapsible as Collapsible, CollapsibleContent, CollapsibleContext, CollapsibleRoot, CollapsibleTrigger, colorPicker as ColorPicker, ColorPickerArea, ColorPickerAreaBackground, ColorPickerAreaThumb, ColorPickerChannelInput, ColorPickerChannelSlider, ColorPickerChannelSliderThumb, ColorPickerChannelSliderTrack, ColorPickerContent, ColorPickerContext, ColorPickerControl, ColorPickerEyeDropperTrigger, ColorPickerFormatSelect, ColorPickerFormatTrigger, ColorPickerHiddenInput, ColorPickerLabel, ColorPickerPositioner, ColorPickerRoot, ColorPickerSwatch, ColorPickerSwatchGroup, ColorPickerSwatchIndicator, ColorPickerSwatchTrigger, ColorPickerTransparencyGrid, ColorPickerTrigger, ColorPickerValueText, ColorPickerView, combobox as Combobox, ComboboxClearTrigger, ComboboxContent, ComboboxContext, ComboboxControl, ComboboxInput, ComboboxItem, ComboboxItemContext, ComboboxItemGroup, ComboboxItemGroupLabel, ComboboxItemIndicator, ComboboxItemText, ComboboxLabel, ComboboxPositioner, ComboboxRoot, ComboboxTrigger, datePicker as DatePicker, DatePickerClearTrigger, DatePickerContent, DatePickerContext, DatePickerControl, DatePickerInput, DatePickerLabel, DatePickerMonthSelect, DatePickerNextTrigger, DatePickerPositioner, DatePickerPresetTrigger, DatePickerPrevTrigger, DatePickerRangeText, DatePickerRoot, DatePickerTable, DatePickerTableBody, DatePickerTableCell, DatePickerTableCellTrigger, DatePickerTableHead, DatePickerTableHeader, DatePickerTableRow, DatePickerTrigger, DatePickerView, DatePickerViewControl, DatePickerViewTrigger, DatePickerYearSelect, dialog as Dialog, DialogBackdrop, DialogCloseTrigger, DialogContent, DialogContext, DialogDescription, DialogPositioner, DialogRoot, DialogTitle, DialogTrigger, editable as Editable, EditableArea, EditableCancelTrigger, EditableContext, EditableControl, EditableEditTrigger, EditableInput, EditableLabel, EditablePreview, EditableRoot, EditableSubmitTrigger, Environment, fileUpload as FileUpload, FileUploadContext, FileUploadDropzone, FileUploadHiddenInput, FileUploadItem, FileUploadItemDeleteTrigger, FileUploadItemGroup, FileUploadItemName, FileUploadItemPreview, FileUploadItemPreviewImage, FileUploadItemSizeText, FileUploadLabel, FileUploadRoot, FileUploadTrigger, format as Format, FormatByte, FormatNumber, hoverCard as HoverCard, HoverCardArrow, HoverCardArrowTip, HoverCardContent, HoverCardContext, HoverCardPositioner, HoverCardRoot, HoverCardTrigger, LocaleProvider, menu as Menu, MenuArrow, MenuArrowTip, MenuCheckboxItem, MenuContent, MenuContext, MenuContextTrigger, MenuIndicator, MenuItem, MenuItemContext, MenuItemGroup, MenuItemGroupLabel, MenuItemIndicator, MenuItemText, MenuPositioner, MenuRadioItem, MenuRadioItemGroup, MenuRoot, MenuSeparator, MenuTrigger, MenuTriggerItem, numberInput as NumberInput, NumberInputContext, NumberInputControl, NumberInputDecrementTrigger, NumberInputIncrementTrigger, NumberInputInput, NumberInputLabel, NumberInputRoot, NumberInputScrubber, pagination as Pagination, PaginationContext, PaginationEllipsis, PaginationItem, PaginationNextTrigger, PaginationPrevTrigger, PaginationRoot, pinInput as PinInput, PinInputContext, PinInputControl, PinInputHiddenInput, PinInputInput, PinInputLabel, PinInputRoot, popover as Popover, PopoverAnchor, PopoverArrow, PopoverArrowTip, PopoverCloseTrigger, PopoverContent, PopoverContext, PopoverDescription, PopoverIndicator, PopoverPositioner, PopoverRoot, PopoverTitle, PopoverTrigger, Presence, PresenceProvider, progress as Progress, ProgressCircle, ProgressCircleRange, ProgressCircleTrack, ProgressContext, ProgressLabel, ProgressRange, ProgressRoot, ProgressTrack, ProgressValueText, ProgressView, radioGroup as RadioGroup, RadioGroupContext, RadioGroupIndicator, RadioGroupItem, RadioGroupItemContext, RadioGroupItemControl, RadioGroupItemText, RadioGroupLabel, RadioGroupRoot, ratingGroup as RatingGroup, RatingGroupContext, RatingGroupControl, RatingGroupHiddenInput, RatingGroupItem, RatingGroupItemContext, RatingGroupLabel, RatingGroupRoot, segmentGroup as SegmentGroup, SegmentGroupContext, SegmentGroupIndicator, SegmentGroupItem, SegmentGroupItemContext, SegmentGroupItemControl, SegmentGroupItemText, SegmentGroupLabel, SegmentGroupRoot, select as Select, SelectClearTrigger, SelectContent, SelectContext, SelectControl, SelectHiddenSelect, SelectIndicator, SelectItem, SelectItemContext, SelectItemGroup, SelectItemGroupLabel, SelectItemIndicator, SelectItemText, SelectLabel, SelectPositioner, SelectRoot, SelectTrigger, SelectValueText, slider as Slider, SliderContext, SliderControl, SliderLabel, SliderMarker, SliderMarkerGroup, SliderRange, SliderRoot, SliderThumb, SliderTrack, SliderValueText, splitter as Splitter, SplitterContext, SplitterPanel, SplitterResizeTrigger, SplitterRoot, _switch as Switch, SwitchContext, SwitchControl, SwitchHiddenInput, SwitchLabel, SwitchRoot, SwitchThumb, TabContent, TabIndicator, TabList, TabTrigger, tabs as Tabs, TabsContext, TabsRoot, tagsInput as TagsInput, TagsInputClearTrigger, TagsInputContext, TagsInputControl, TagsInputHiddenInput, TagsInputInput, TagsInputItem, TagsInputItemContext, TagsInputItemDeleteTrigger, TagsInputItemInput, TagsInputItemPreview, TagsInputItemText, TagsInputLabel, TagsInputRoot, toast as Toast, ToastActionTrigger, ToastCloseTrigger, ToastContext, ToastDescription, ToastRoot, ToastTitle, Toaster, toggleGroup as ToggleGroup, ToggleGroupContext, ToggleGroupItem, ToggleGroupRoot, tooltip as Tooltip, TooltipArrow, TooltipArrowTip, TooltipContent, TooltipContext, TooltipPositioner, TooltipRoot, TooltipTrigger, treeView as TreeView, TreeViewBranch, TreeViewBranchContent, TreeViewBranchControl, TreeViewBranchIndicator, TreeViewBranchText, TreeViewBranchTrigger, TreeViewContext, TreeViewItem, TreeViewItemContext, TreeViewItemIndicator, TreeViewItemText, TreeViewLabel, TreeViewRoot, TreeViewTree, ark, createToaster, splitPresenceProps, useAccordionContext, useAccordionItemContext, useAvatarContext, useCarouselContext, useCheckboxContext, useClipboardContext, useCollapsibleContext, useColorPickerContext, useComboboxContext, useComboboxItemContext, useDatePickerContext, useDialogContext, useEditableContext, useEnvironmentContext, useFileUploadContext, useHoverCardContext, useLocaleContext, useMenuContext, useMenuItemContext, useNumberInputContext, usePaginationContext, usePinInputContext, usePopoverContext, usePresence, usePresenceContext, useProgressContext, useRadioGroupContext, useRadioGroupItemContext, useRatingGroupContext, useRatingGroupItemContext, useSegmentGroupContext, useSegmentGroupItemContext, useSelectContext, useSelectItemContext, useSliderContext, useSplitterContext, useSwitchContext, useTabsContext, useTagsInputContext, useTagsInputItemContext, useToastContext, useToggleGroupContext, useTooltipContext, useTreeViewContext, useTreeViewItemContext };
 //# sourceMappingURL=index.js.map