@ark-ui/react 5.5.0 → 5.7.0

package/dist/components/listbox/listbox-root-provider.d.cts

@@ -0,0 +1,14 @@
+import { JSX } from 'react';
+import { CollectionItem } from '../collection';
+import { HTMLProps, PolymorphicProps } from '../factory';
+import { UseListboxReturn } from './use-listbox';
+interface RootProviderProps<T extends CollectionItem> {
+    value: UseListboxReturn<T>;
+}
+export interface ListboxRootProviderBaseProps<T extends CollectionItem> extends RootProviderProps<T>, PolymorphicProps {
+}
+export interface ListboxRootProviderProps<T extends CollectionItem> extends HTMLProps<'div'>, ListboxRootProviderBaseProps<T> {
+}
+export type ListboxComponent = <T extends CollectionItem>(props: ListboxRootProviderProps<T> & React.RefAttributes<HTMLDivElement>) => JSX.Element;
+export declare const ListboxRootProvider: ListboxComponent;
+export {};

package/dist/components/listbox/listbox-root-provider.d.ts

@@ -0,0 +1,14 @@
+import { JSX } from 'react';
+import { CollectionItem } from '../collection';
+import { HTMLProps, PolymorphicProps } from '../factory';
+import { UseListboxReturn } from './use-listbox';
+interface RootProviderProps<T extends CollectionItem> {
+    value: UseListboxReturn<T>;
+}
+export interface ListboxRootProviderBaseProps<T extends CollectionItem> extends RootProviderProps<T>, PolymorphicProps {
+}
+export interface ListboxRootProviderProps<T extends CollectionItem> extends HTMLProps<'div'>, ListboxRootProviderBaseProps<T> {
+}
+export type ListboxComponent = <T extends CollectionItem>(props: ListboxRootProviderProps<T> & React.RefAttributes<HTMLDivElement>) => JSX.Element;
+export declare const ListboxRootProvider: ListboxComponent;
+export {};

package/dist/components/listbox/listbox-root-provider.js

@@ -0,0 +1,16 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { mergeProps } from '@zag-js/react';
+import { forwardRef } from 'react';
+import { createSplitProps } from '../../utils/create-split-props.js';
+import { ark } from '../factory.js';
+import { ListboxProvider } from './use-listbox-context.js';
+
+const ListboxImpl = (props, ref) => {
+  const [{ value: listbox }, localProps] = createSplitProps()(props, ["value"]);
+  const mergedProps = mergeProps(listbox.getRootProps(), localProps);
+  return /* @__PURE__ */ jsx(ListboxProvider, { value: listbox, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref }) });
+};
+const ListboxRootProvider = forwardRef(ListboxImpl);
+
+export { ListboxRootProvider };

package/dist/components/listbox/listbox-root.cjs

@@ -0,0 +1,42 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const react$1 = require('@zag-js/react');
+const react = require('react');
+const createSplitProps = require('../../utils/create-split-props.cjs');
+const factory = require('../factory.cjs');
+const useListbox = require('./use-listbox.cjs');
+const useListboxContext = require('./use-listbox-context.cjs');
+
+const ListboxImpl = (props, ref) => {
+  const [useListboxProps, localProps] = createSplitProps.createSplitProps()(props, [
+    "collection",
+    "defaultHighlightedValue",
+    "defaultValue",
+    "deselectable",
+    "disabled",
+    "disallowSelectAll",
+    "highlightedValue",
+    "id",
+    "ids",
+    "loopFocus",
+    "onHighlightChange",
+    "onSelect",
+    "onValueChange",
+    "orientation",
+    "scrollToIndexFn",
+    "selectionMode",
+    "selectOnHighlight",
+    "typeahead",
+    "value"
+  ]);
+  const listbox = useListbox.useListbox(useListboxProps);
+  const mergedProps = react$1.mergeProps(listbox.getRootProps(), localProps);
+  return /* @__PURE__ */ jsxRuntime.jsx(useListboxContext.ListboxProvider, { value: listbox, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref }) });
+};
+const ListboxRoot = react.forwardRef(ListboxImpl);
+
+exports.ListboxRoot = ListboxRoot;

package/dist/components/listbox/listbox-root.d.cts

@@ -0,0 +1,11 @@
+import { JSX } from 'react';
+import { Assign } from '../../types';
+import { CollectionItem } from '../collection';
+import { HTMLProps, PolymorphicProps } from '../factory';
+import { UseListboxProps } from './use-listbox';
+export interface ListboxRootBaseProps<T extends CollectionItem> extends UseListboxProps<T>, PolymorphicProps {
+}
+export interface ListboxRootProps<T extends CollectionItem> extends Assign<HTMLProps<'div'>, ListboxRootBaseProps<T>> {
+}
+export type ListboxComponent = <T extends CollectionItem>(props: ListboxRootProps<T> & React.RefAttributes<HTMLDivElement>) => JSX.Element;
+export declare const ListboxRoot: ListboxComponent;

package/dist/components/listbox/listbox-root.d.ts

@@ -0,0 +1,11 @@
+import { JSX } from 'react';
+import { Assign } from '../../types';
+import { CollectionItem } from '../collection';
+import { HTMLProps, PolymorphicProps } from '../factory';
+import { UseListboxProps } from './use-listbox';
+export interface ListboxRootBaseProps<T extends CollectionItem> extends UseListboxProps<T>, PolymorphicProps {
+}
+export interface ListboxRootProps<T extends CollectionItem> extends Assign<HTMLProps<'div'>, ListboxRootBaseProps<T>> {
+}
+export type ListboxComponent = <T extends CollectionItem>(props: ListboxRootProps<T> & React.RefAttributes<HTMLDivElement>) => JSX.Element;
+export declare const ListboxRoot: ListboxComponent;

package/dist/components/listbox/listbox-root.js

@@ -0,0 +1,38 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { mergeProps } from '@zag-js/react';
+import { forwardRef } from 'react';
+import { createSplitProps } from '../../utils/create-split-props.js';
+import { ark } from '../factory.js';
+import { useListbox } from './use-listbox.js';
+import { ListboxProvider } from './use-listbox-context.js';
+
+const ListboxImpl = (props, ref) => {
+  const [useListboxProps, localProps] = createSplitProps()(props, [
+    "collection",
+    "defaultHighlightedValue",
+    "defaultValue",
+    "deselectable",
+    "disabled",
+    "disallowSelectAll",
+    "highlightedValue",
+    "id",
+    "ids",
+    "loopFocus",
+    "onHighlightChange",
+    "onSelect",
+    "onValueChange",
+    "orientation",
+    "scrollToIndexFn",
+    "selectionMode",
+    "selectOnHighlight",
+    "typeahead",
+    "value"
+  ]);
+  const listbox = useListbox(useListboxProps);
+  const mergedProps = mergeProps(listbox.getRootProps(), localProps);
+  return /* @__PURE__ */ jsx(ListboxProvider, { value: listbox, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref }) });
+};
+const ListboxRoot = forwardRef(ListboxImpl);
+
+export { ListboxRoot };

package/dist/components/listbox/listbox-value-text.cjs

@@ -0,0 +1,20 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const react$1 = require('@zag-js/react');
+const react = require('react');
+const factory = require('../factory.cjs');
+const useListboxContext = require('./use-listbox-context.cjs');
+
+const ListboxValueText = react.forwardRef((props, ref) => {
+  const { children, placeholder, ...localprops } = props;
+  const listbox = useListboxContext.useListboxContext();
+  const mergedProps = react$1.mergeProps(listbox.getValueTextProps(), localprops);
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.span, { ...mergedProps, ref, children: children || listbox.valueAsString || placeholder });
+});
+ListboxValueText.displayName = "ListboxValueText";
+
+exports.ListboxValueText = ListboxValueText;

package/dist/components/listbox/listbox-value-text.d.cts

@@ -0,0 +1,11 @@
+import { HTMLProps, PolymorphicProps } from '../factory';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+export interface ListboxValueTextBaseProps extends PolymorphicProps {
+    /**
+     * Text to display when no value is listboxed.
+     */
+    placeholder?: string;
+}
+export interface ListboxValueTextProps extends HTMLProps<'span'>, ListboxValueTextBaseProps {
+}
+export declare const ListboxValueText: ForwardRefExoticComponent<ListboxValueTextProps & RefAttributes<HTMLSpanElement>>;

package/dist/components/listbox/listbox-value-text.d.ts

@@ -0,0 +1,11 @@
+import { HTMLProps, PolymorphicProps } from '../factory';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+export interface ListboxValueTextBaseProps extends PolymorphicProps {
+    /**
+     * Text to display when no value is listboxed.
+     */
+    placeholder?: string;
+}
+export interface ListboxValueTextProps extends HTMLProps<'span'>, ListboxValueTextBaseProps {
+}
+export declare const ListboxValueText: ForwardRefExoticComponent<ListboxValueTextProps & RefAttributes<HTMLSpanElement>>;

package/dist/components/listbox/listbox-value-text.js

@@ -0,0 +1,16 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { mergeProps } from '@zag-js/react';
+import { forwardRef } from 'react';
+import { ark } from '../factory.js';
+import { useListboxContext } from './use-listbox-context.js';
+
+const ListboxValueText = forwardRef((props, ref) => {
+  const { children, placeholder, ...localprops } = props;
+  const listbox = useListboxContext();
+  const mergedProps = mergeProps(listbox.getValueTextProps(), localprops);
+  return /* @__PURE__ */ jsx(ark.span, { ...mergedProps, ref, children: children || listbox.valueAsString || placeholder });
+});
+ListboxValueText.displayName = "ListboxValueText";
+
+export { ListboxValueText };

package/dist/components/listbox/listbox.anatomy.d.cts

@@ -0,0 +1 @@
+export { anatomy as listboxAnatomy } from '@zag-js/listbox';

package/dist/components/listbox/listbox.anatomy.d.ts

@@ -0,0 +1 @@
+export { anatomy as listboxAnatomy } from '@zag-js/listbox';

package/dist/components/listbox/listbox.cjs

@@ -0,0 +1,29 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const listboxContent = require('./listbox-content.cjs');
+const listboxInput = require('./listbox-input.cjs');
+const listboxItem = require('./listbox-item.cjs');
+const listboxItemGroup = require('./listbox-item-group.cjs');
+const listboxItemGroupLabel = require('./listbox-item-group-label.cjs');
+const listboxItemIndicator = require('./listbox-item-indicator.cjs');
+const listboxItemText = require('./listbox-item-text.cjs');
+const listboxLabel = require('./listbox-label.cjs');
+const listboxRoot = require('./listbox-root.cjs');
+const listboxRootProvider = require('./listbox-root-provider.cjs');
+const listboxValueText = require('./listbox-value-text.cjs');
+
+
+
+exports.Content = listboxContent.ListboxContent;
+exports.Input = listboxInput.ListboxInput;
+exports.Item = listboxItem.ListboxItem;
+exports.ItemGroup = listboxItemGroup.ListboxItemGroup;
+exports.ItemGroupLabel = listboxItemGroupLabel.ListboxItemGroupLabel;
+exports.ItemIndicator = listboxItemIndicator.ListboxItemIndicator;
+exports.ItemText = listboxItemText.ListboxItemText;
+exports.Label = listboxLabel.ListboxLabel;
+exports.Root = listboxRoot.ListboxRoot;
+exports.RootProvider = listboxRootProvider.ListboxRootProvider;
+exports.ValueText = listboxValueText.ListboxValueText;

package/dist/components/listbox/listbox.d.cts

@@ -0,0 +1,12 @@
+export type { HighlightChangeDetails, ScrollToIndexDetails, SelectionDetails, SelectionMode, ValueChangeDetails, } from '@zag-js/listbox';
+export { ListboxContent as Content, type ListboxContentBaseProps as ContentBaseProps, type ListboxContentProps as ContentProps, } from './listbox-content';
+export { ListboxInput as Input, type ListboxInputBaseProps as InputBaseProps, type ListboxInputProps as InputProps, } from './listbox-input';
+export { ListboxItem as Item, type ListboxItemBaseProps as ItemBaseProps, type ListboxItemProps as ItemProps, } from './listbox-item';
+export { ListboxItemGroup as ItemGroup, type ListboxItemGroupBaseProps as ItemGroupBaseProps, type ListboxItemGroupProps as ItemGroupProps, } from './listbox-item-group';
+export { ListboxItemGroupLabel as ItemGroupLabel, type ListboxItemGroupLabelBaseProps as ItemGroupLabelBaseProps, type ListboxItemGroupLabelProps as ItemGroupLabelProps, } from './listbox-item-group-label';
+export { ListboxItemIndicator as ItemIndicator, type ListboxItemIndicatorBaseProps as ItemIndicatorBaseProps, type ListboxItemIndicatorProps as ItemIndicatorProps, } from './listbox-item-indicator';
+export { ListboxItemText as ItemText, type ListboxItemTextBaseProps as ItemTextBaseProps, type ListboxItemTextProps as ItemTextProps, } from './listbox-item-text';
+export { ListboxLabel as Label, type ListboxLabelBaseProps as LabelBaseProps, type ListboxLabelProps as LabelProps, } from './listbox-label';
+export { ListboxRoot as Root, type ListboxRootBaseProps as RootBaseProps, type ListboxRootProps as RootProps, } from './listbox-root';
+export { ListboxRootProvider as RootProvider, type ListboxRootProviderBaseProps as RootProviderBaseProps, type ListboxRootProviderProps as RootProviderProps, } from './listbox-root-provider';
+export { ListboxValueText as ValueText, type ListboxValueTextBaseProps as ValueTextBaseProps, type ListboxValueTextProps as ValueTextProps, } from './listbox-value-text';

package/dist/components/listbox/listbox.d.ts

@@ -0,0 +1,12 @@
+export type { HighlightChangeDetails, ScrollToIndexDetails, SelectionDetails, SelectionMode, ValueChangeDetails, } from '@zag-js/listbox';
+export { ListboxContent as Content, type ListboxContentBaseProps as ContentBaseProps, type ListboxContentProps as ContentProps, } from './listbox-content';
+export { ListboxInput as Input, type ListboxInputBaseProps as InputBaseProps, type ListboxInputProps as InputProps, } from './listbox-input';
+export { ListboxItem as Item, type ListboxItemBaseProps as ItemBaseProps, type ListboxItemProps as ItemProps, } from './listbox-item';
+export { ListboxItemGroup as ItemGroup, type ListboxItemGroupBaseProps as ItemGroupBaseProps, type ListboxItemGroupProps as ItemGroupProps, } from './listbox-item-group';
+export { ListboxItemGroupLabel as ItemGroupLabel, type ListboxItemGroupLabelBaseProps as ItemGroupLabelBaseProps, type ListboxItemGroupLabelProps as ItemGroupLabelProps, } from './listbox-item-group-label';
+export { ListboxItemIndicator as ItemIndicator, type ListboxItemIndicatorBaseProps as ItemIndicatorBaseProps, type ListboxItemIndicatorProps as ItemIndicatorProps, } from './listbox-item-indicator';
+export { ListboxItemText as ItemText, type ListboxItemTextBaseProps as ItemTextBaseProps, type ListboxItemTextProps as ItemTextProps, } from './listbox-item-text';
+export { ListboxLabel as Label, type ListboxLabelBaseProps as LabelBaseProps, type ListboxLabelProps as LabelProps, } from './listbox-label';
+export { ListboxRoot as Root, type ListboxRootBaseProps as RootBaseProps, type ListboxRootProps as RootProps, } from './listbox-root';
+export { ListboxRootProvider as RootProvider, type ListboxRootProviderBaseProps as RootProviderBaseProps, type ListboxRootProviderProps as RootProviderProps, } from './listbox-root-provider';
+export { ListboxValueText as ValueText, type ListboxValueTextBaseProps as ValueTextBaseProps, type ListboxValueTextProps as ValueTextProps, } from './listbox-value-text';

package/dist/components/listbox/listbox.js

@@ -0,0 +1,11 @@
+export { ListboxContent as Content } from './listbox-content.js';
+export { ListboxInput as Input } from './listbox-input.js';
+export { ListboxItem as Item } from './listbox-item.js';
+export { ListboxItemGroup as ItemGroup } from './listbox-item-group.js';
+export { ListboxItemGroupLabel as ItemGroupLabel } from './listbox-item-group-label.js';
+export { ListboxItemIndicator as ItemIndicator } from './listbox-item-indicator.js';
+export { ListboxItemText as ItemText } from './listbox-item-text.js';
+export { ListboxLabel as Label } from './listbox-label.js';
+export { ListboxRoot as Root } from './listbox-root.js';
+export { ListboxRootProvider as RootProvider } from './listbox-root-provider.js';
+export { ListboxValueText as ValueText } from './listbox-value-text.js';

package/dist/components/listbox/use-listbox-context.cjs

@@ -0,0 +1,15 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const createContext = require('../../utils/create-context.cjs');
+
+const [ListboxProvider, useListboxContext] = createContext.createContext({
+  name: "ListboxContext",
+  hookName: "useListboxContext",
+  providerName: "<ListboxProvider />"
+});
+
+exports.ListboxProvider = ListboxProvider;
+exports.useListboxContext = useListboxContext;

package/dist/components/listbox/use-listbox-context.d.cts

@@ -0,0 +1,6 @@
+import { CollectionItem } from '../collection';
+import { UseListboxReturn } from './use-listbox';
+import { Provider } from 'react';
+export interface UseListboxContext<T extends CollectionItem> extends UseListboxReturn<T> {
+}
+export declare const ListboxProvider: Provider<UseListboxContext<any>>, useListboxContext: () => UseListboxContext<any>;

package/dist/components/listbox/use-listbox-context.d.ts

@@ -0,0 +1,6 @@
+import { CollectionItem } from '../collection';
+import { UseListboxReturn } from './use-listbox';
+import { Provider } from 'react';
+export interface UseListboxContext<T extends CollectionItem> extends UseListboxReturn<T> {
+}
+export declare const ListboxProvider: Provider<UseListboxContext<any>>, useListboxContext: () => UseListboxContext<any>;

package/dist/components/listbox/use-listbox-context.js

@@ -0,0 +1,10 @@
+'use client';
+import { createContext } from '../../utils/create-context.js';
+
+const [ListboxProvider, useListboxContext] = createContext({
+  name: "ListboxContext",
+  hookName: "useListboxContext",
+  providerName: "<ListboxProvider />"
+});
+
+export { ListboxProvider, useListboxContext };

package/dist/components/listbox/use-listbox-item-context.cjs

@@ -0,0 +1,15 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const createContext = require('../../utils/create-context.cjs');
+
+const [ListboxItemProvider, useListboxItemContext] = createContext.createContext({
+  name: "ListboxItemContext",
+  hookName: "useListboxItemContext",
+  providerName: "<ListboxItemProvider />"
+});
+
+exports.ListboxItemProvider = ListboxItemProvider;
+exports.useListboxItemContext = useListboxItemContext;

package/dist/components/listbox/use-listbox-item-context.d.cts

@@ -0,0 +1,5 @@
+import { ItemState } from '@zag-js/listbox';
+import { Provider } from 'react';
+export interface UseListboxItemContext extends ItemState {
+}
+export declare const ListboxItemProvider: Provider<UseListboxItemContext>, useListboxItemContext: () => UseListboxItemContext;

package/dist/components/listbox/use-listbox-item-context.d.ts

@@ -0,0 +1,5 @@
+import { ItemState } from '@zag-js/listbox';
+import { Provider } from 'react';
+export interface UseListboxItemContext extends ItemState {
+}
+export declare const ListboxItemProvider: Provider<UseListboxItemContext>, useListboxItemContext: () => UseListboxItemContext;

package/dist/components/listbox/use-listbox-item-context.js

@@ -0,0 +1,10 @@
+'use client';
+import { createContext } from '../../utils/create-context.js';
+
+const [ListboxItemProvider, useListboxItemContext] = createContext({
+  name: "ListboxItemContext",
+  hookName: "useListboxItemContext",
+  providerName: "<ListboxItemProvider />"
+});
+
+export { ListboxItemProvider, useListboxItemContext };

package/dist/components/listbox/use-listbox-item-group-props.cjs

@@ -0,0 +1,15 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const createContext = require('../../utils/create-context.cjs');
+
+const [ListboxItemGroupPropsProvider, useListboxItemGroupPropsContext] = createContext.createContext({
+  name: "ListboxItemGroupPropsContext",
+  hookName: "useListboxItemGroupPropsContext",
+  providerName: "<ListboxItemGroupPropsProvider />"
+});
+
+exports.ListboxItemGroupPropsProvider = ListboxItemGroupPropsProvider;
+exports.useListboxItemGroupPropsContext = useListboxItemGroupPropsContext;

package/dist/components/listbox/use-listbox-item-group-props.d.cts

@@ -0,0 +1,5 @@
+import { ItemGroupProps } from '@zag-js/listbox';
+import { Provider } from 'react';
+export interface UseListboxItemGroupPropsContext extends ItemGroupProps {
+}
+export declare const ListboxItemGroupPropsProvider: Provider<ItemGroupProps>, useListboxItemGroupPropsContext: () => ItemGroupProps;

package/dist/components/listbox/use-listbox-item-group-props.d.ts

@@ -0,0 +1,5 @@
+import { ItemGroupProps } from '@zag-js/listbox';
+import { Provider } from 'react';
+export interface UseListboxItemGroupPropsContext extends ItemGroupProps {
+}
+export declare const ListboxItemGroupPropsProvider: Provider<ItemGroupProps>, useListboxItemGroupPropsContext: () => ItemGroupProps;

package/dist/components/listbox/use-listbox-item-group-props.js

@@ -0,0 +1,10 @@
+'use client';
+import { createContext } from '../../utils/create-context.js';
+
+const [ListboxItemGroupPropsProvider, useListboxItemGroupPropsContext] = createContext({
+  name: "ListboxItemGroupPropsContext",
+  hookName: "useListboxItemGroupPropsContext",
+  providerName: "<ListboxItemGroupPropsProvider />"
+});
+
+export { ListboxItemGroupPropsProvider, useListboxItemGroupPropsContext };

package/dist/components/listbox/use-listbox-item-props-context.cjs

@@ -0,0 +1,15 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const createContext = require('../../utils/create-context.cjs');
+
+const [ListboxItemPropsProvider, useListboxItemPropsContext] = createContext.createContext({
+  name: "ListboxItemPropsContext",
+  hookName: "useListboxItemPropsContext",
+  providerName: "<ListboxItemPropsProvider />"
+});
+
+exports.ListboxItemPropsProvider = ListboxItemPropsProvider;
+exports.useListboxItemPropsContext = useListboxItemPropsContext;

package/dist/components/listbox/use-listbox-item-props-context.d.cts

@@ -0,0 +1,3 @@
+import { ItemProps } from '@zag-js/listbox';
+import { Provider } from 'react';
+export declare const ListboxItemPropsProvider: Provider<ItemProps<any>>, useListboxItemPropsContext: () => ItemProps<any>;

package/dist/components/listbox/use-listbox-item-props-context.d.ts

@@ -0,0 +1,3 @@
+import { ItemProps } from '@zag-js/listbox';
+import { Provider } from 'react';
+export declare const ListboxItemPropsProvider: Provider<ItemProps<any>>, useListboxItemPropsContext: () => ItemProps<any>;

package/dist/components/listbox/use-listbox-item-props-context.js

@@ -0,0 +1,10 @@
+'use client';
+import { createContext } from '../../utils/create-context.js';
+
+const [ListboxItemPropsProvider, useListboxItemPropsContext] = createContext({
+  name: "ListboxItemPropsContext",
+  hookName: "useListboxItemPropsContext",
+  providerName: "<ListboxItemPropsProvider />"
+});
+
+export { ListboxItemPropsProvider, useListboxItemPropsContext };

package/dist/components/listbox/use-listbox.cjs

@@ -0,0 +1,45 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const listbox = require('@zag-js/listbox');
+const react$1 = require('@zag-js/react');
+const react = require('react');
+const useEnvironmentContext = require('../../providers/environment/use-environment-context.cjs');
+const useLocaleContext = require('../../providers/locale/use-locale-context.cjs');
+
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
+  if (e) {
+    for (const k in e) {
+      if (k !== 'default') {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+const listbox__namespace = /*#__PURE__*/_interopNamespaceDefault(listbox);
+
+const useListbox = (props) => {
+  const id = react.useId();
+  const { dir } = useLocaleContext.useLocaleContext();
+  const { getRootNode } = useEnvironmentContext.useEnvironmentContext();
+  const machineProps = {
+    id,
+    dir,
+    getRootNode,
+    ...props
+  };
+  const service = react$1.useMachine(listbox__namespace.machine, machineProps);
+  return listbox__namespace.connect(service, react$1.normalizeProps);
+};
+
+exports.useListbox = useListbox;

package/dist/components/listbox/use-listbox.d.cts

@@ -0,0 +1,13 @@
+import { PropTypes } from '@zag-js/react';
+import { Optional } from '../../types';
+import { CollectionItem, ListCollection } from '../collection';
+import * as listbox from '@zag-js/listbox';
+export interface UseListboxProps<T extends CollectionItem> extends Optional<Omit<listbox.Props<T>, 'dir' | 'getRootNode' | 'collection'>, 'id'> {
+    /**
+     * The collection of items
+     */
+    collection: ListCollection<T>;
+}
+export interface UseListboxReturn<T extends CollectionItem> extends listbox.Api<PropTypes, T> {
+}
+export declare const useListbox: <T extends CollectionItem>(props: UseListboxProps<T>) => UseListboxReturn<T>;

package/dist/components/listbox/use-listbox.d.ts

@@ -0,0 +1,13 @@
+import { PropTypes } from '@zag-js/react';
+import { Optional } from '../../types';
+import { CollectionItem, ListCollection } from '../collection';
+import * as listbox from '@zag-js/listbox';
+export interface UseListboxProps<T extends CollectionItem> extends Optional<Omit<listbox.Props<T>, 'dir' | 'getRootNode' | 'collection'>, 'id'> {
+    /**
+     * The collection of items
+     */
+    collection: ListCollection<T>;
+}
+export interface UseListboxReturn<T extends CollectionItem> extends listbox.Api<PropTypes, T> {
+}
+export declare const useListbox: <T extends CollectionItem>(props: UseListboxProps<T>) => UseListboxReturn<T>;

package/dist/components/listbox/use-listbox.js

@@ -0,0 +1,22 @@
+'use client';
+import * as listbox from '@zag-js/listbox';
+import { useMachine, normalizeProps } from '@zag-js/react';
+import { useId } from 'react';
+import { useEnvironmentContext } from '../../providers/environment/use-environment-context.js';
+import { useLocaleContext } from '../../providers/locale/use-locale-context.js';
+
+const useListbox = (props) => {
+  const id = useId();
+  const { dir } = useLocaleContext();
+  const { getRootNode } = useEnvironmentContext();
+  const machineProps = {
+    id,
+    dir,
+    getRootNode,
+    ...props
+  };
+  const service = useMachine(listbox.machine, machineProps);
+  return listbox.connect(service, normalizeProps);
+};
+
+export { useListbox };

package/dist/components/toast/toaster.cjs

@@ -47,10 +47,12 @@ const Toaster = react.forwardRef((props, ref) => {
 });
 Toaster.displayName = "Toaster";
 const ToastActor = (props) => {
+  const env = useEnvironmentContext.useEnvironmentContext();
   const localProps = {
     ...props.value,
     parent: props.parent,
-    index: props.index
+    index: props.index,
+    getRootNode: env.getRootNode
   };
   const service = react$1.useMachine(toast__namespace.machine, { ...localProps });
   const api = toast__namespace.connect(service, react$1.normalizeProps);

package/dist/components/toast/toaster.js

@@ -24,10 +24,12 @@ const Toaster = forwardRef((props, ref) => {
 });
 Toaster.displayName = "Toaster";
 const ToastActor = (props) => {
+  const env = useEnvironmentContext();
   const localProps = {
     ...props.value,
     parent: props.parent,
-    index: props.index
+    index: props.index,
+    getRootNode: env.getRootNode
   };
   const service = useMachine(toast.machine, { ...localProps });
   const api = toast.connect(service, normalizeProps);

package/dist/components/toggle-group/toggle-group-root.cjs

@@ -14,6 +14,7 @@ const useToggleGroupContext = require('./use-toggle-group-context.cjs');
 const ToggleGroupRoot = react.forwardRef((props, ref) => {
   const [useToggleGroupProps, localProps] = createSplitProps.createSplitProps()(props, [
     "defaultValue",
+    "deselectable",
     "disabled",
     "id",
     "ids",

package/dist/components/toggle-group/toggle-group-root.js

@@ -10,6 +10,7 @@ import { ToggleGroupProvider } from './use-toggle-group-context.js';
 const ToggleGroupRoot = forwardRef((props, ref) => {
   const [useToggleGroupProps, localProps] = createSplitProps()(props, [
     "defaultValue",
+    "deselectable",
     "disabled",
     "id",
     "ids",