@ark-ui/svelte 0.4.0 → 5.0.0-0

package/dist/components/listbox/listbox-input.svelte

@@ -0,0 +1,22 @@
+<script module lang="ts">
+  import type { InputProps } from '@zag-js/listbox'
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types.js'
+
+  export interface ListboxInputBaseProps extends InputProps, PolymorphicProps<'input'> {}
+  export interface ListboxInputProps extends Assign<HTMLProps<'input'>, ListboxInputBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { createSplitProps } from '../../utils/create-split-props.js'
+  import { Ark } from '../factory/index.js'
+  import { useListboxContext } from './use-listbox-context.js'
+
+  const props: ListboxInputProps = $props()
+
+  const [inputProps, localProps] = $derived(createSplitProps<InputProps>()(props, ['autoHighlight']))
+  const listbox = useListboxContext()
+  const mergedProps = $derived(mergeProps(listbox().getInputProps(inputProps), localProps))
+</script>
+
+<Ark as="input" {...mergedProps} />

package/dist/components/listbox/listbox-input.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { InputProps } from '@zag-js/listbox';
+import type { Assign, HTMLProps, PolymorphicProps } from '../../types.js';
+export interface ListboxInputBaseProps extends InputProps, PolymorphicProps<'input'> {
+}
+export interface ListboxInputProps extends Assign<HTMLProps<'input'>, ListboxInputBaseProps> {
+}
+declare const ListboxInput: import("svelte").Component<ListboxInputProps, {}, "">;
+type ListboxInput = ReturnType<typeof ListboxInput>;
+export default ListboxInput;

package/dist/components/listbox/listbox-item-group-label.svelte

@@ -0,0 +1,21 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types.js'
+
+  export interface ListboxItemGroupLabelBaseProps extends PolymorphicProps<'div'> {}
+  export interface ListboxItemGroupLabelProps extends Assign<HTMLProps<'div'>, ListboxItemGroupLabelBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory/index.js'
+  import { useListboxContext } from './use-listbox-context.js'
+  import { useListboxItemGroupPropsContext } from './use-listbox-item-group-props.js'
+
+  const props: ListboxItemGroupLabelProps = $props()
+
+  const listbox = useListboxContext()
+  const groupProps = useListboxItemGroupPropsContext()
+  const mergedProps = $derived(mergeProps(listbox().getItemGroupLabelProps({ htmlFor: groupProps().id }), props))
+</script>
+
+<Ark as="div" {...mergedProps} />

package/dist/components/listbox/listbox-item-group-label.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Assign, HTMLProps, PolymorphicProps } from '../../types.js';
+export interface ListboxItemGroupLabelBaseProps extends PolymorphicProps<'div'> {
+}
+export interface ListboxItemGroupLabelProps extends Assign<HTMLProps<'div'>, ListboxItemGroupLabelBaseProps> {
+}
+declare const ListboxItemGroupLabel: import("svelte").Component<ListboxItemGroupLabelProps, {}, "">;
+type ListboxItemGroupLabel = ReturnType<typeof ListboxItemGroupLabel>;
+export default ListboxItemGroupLabel;

package/dist/components/listbox/listbox-item-group.svelte

@@ -0,0 +1,25 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types.js'
+
+  export interface ListboxItemGroupBaseProps extends PolymorphicProps<'div'> {}
+  export interface ListboxItemGroupProps extends Assign<HTMLProps<'div'>, ListboxItemGroupBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory/index.js'
+  import { useListboxContext } from './use-listbox-context.js'
+  import { ListboxItemGroupPropsProvider } from './use-listbox-item-group-props.js'
+
+  const props: ListboxItemGroupProps = $props()
+  const providedId = $props.id()
+
+  const listbox = useListboxContext()
+
+  const groupProps = $derived({ id: providedId })
+  const mergedProps = $derived(mergeProps(listbox().getItemGroupProps(groupProps), props))
+
+  ListboxItemGroupPropsProvider(() => groupProps)
+</script>
+
+<Ark as="div" {...mergedProps} />

package/dist/components/listbox/listbox-item-group.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Assign, HTMLProps, PolymorphicProps } from '../../types.js';
+export interface ListboxItemGroupBaseProps extends PolymorphicProps<'div'> {
+}
+export interface ListboxItemGroupProps extends Assign<HTMLProps<'div'>, ListboxItemGroupBaseProps> {
+}
+declare const ListboxItemGroup: import("svelte").Component<ListboxItemGroupProps, {}, "">;
+type ListboxItemGroup = ReturnType<typeof ListboxItemGroup>;
+export default ListboxItemGroup;

package/dist/components/listbox/listbox-item-indicator.svelte

@@ -0,0 +1,21 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types.js'
+
+  export interface ListboxItemIndicatorBaseProps extends PolymorphicProps<'div'> {}
+  export interface ListboxItemIndicatorProps extends Assign<HTMLProps<'div'>, ListboxItemIndicatorBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory/index.js'
+  import { useListboxContext } from './use-listbox-context.js'
+  import { useListboxItemPropsContext } from './use-listbox-item-props-context.js'
+
+  const props: ListboxItemIndicatorProps = $props()
+
+  const listbox = useListboxContext()
+  const itemProps = useListboxItemPropsContext()
+  const mergedProps = $derived(mergeProps(listbox().getItemIndicatorProps(itemProps()), props))
+</script>
+
+<Ark as="div" {...mergedProps} />

package/dist/components/listbox/listbox-item-indicator.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Assign, HTMLProps, PolymorphicProps } from '../../types.js';
+export interface ListboxItemIndicatorBaseProps extends PolymorphicProps<'div'> {
+}
+export interface ListboxItemIndicatorProps extends Assign<HTMLProps<'div'>, ListboxItemIndicatorBaseProps> {
+}
+declare const ListboxItemIndicator: import("svelte").Component<ListboxItemIndicatorProps, {}, "">;
+type ListboxItemIndicator = ReturnType<typeof ListboxItemIndicator>;
+export default ListboxItemIndicator;

package/dist/components/listbox/listbox-item-text.svelte

@@ -0,0 +1,21 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types.js'
+
+  export interface ListboxItemTextBaseProps extends PolymorphicProps<'span'> {}
+  export interface ListboxItemTextProps extends Assign<HTMLProps<'span'>, ListboxItemTextBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory/index.js'
+  import { useListboxContext } from './use-listbox-context.js'
+  import { useListboxItemPropsContext } from './use-listbox-item-props-context.js'
+
+  const props: ListboxItemTextProps = $props()
+
+  const listbox = useListboxContext()
+  const itemProps = useListboxItemPropsContext()
+  const mergedProps = $derived(mergeProps(listbox().getItemTextProps(itemProps()), props))
+</script>
+
+<Ark as="span" {...mergedProps} />

package/dist/components/listbox/listbox-item-text.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Assign, HTMLProps, PolymorphicProps } from '../../types.js';
+export interface ListboxItemTextBaseProps extends PolymorphicProps<'span'> {
+}
+export interface ListboxItemTextProps extends Assign<HTMLProps<'span'>, ListboxItemTextBaseProps> {
+}
+declare const ListboxItemText: import("svelte").Component<ListboxItemTextProps, {}, "">;
+type ListboxItemText = ReturnType<typeof ListboxItemText>;
+export default ListboxItemText;

package/dist/components/listbox/listbox-item.svelte

@@ -0,0 +1,28 @@
+<script module lang="ts">
+  import type { ItemProps } from '@zag-js/listbox'
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types.js'
+
+  export interface ListboxItemBaseProps extends ItemProps, PolymorphicProps<'div'> {}
+  export interface ListboxItemProps extends Assign<HTMLProps<'div'>, ListboxItemBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { createSplitProps } from '../../utils/create-split-props.js'
+  import { Ark } from '../factory/index.js'
+  import { useListboxContext } from './use-listbox-context.js'
+  import { ListboxItemProvider } from './use-listbox-item-context.js'
+  import { ListboxItemPropsProvider } from './use-listbox-item-props-context.js'
+
+  const props: ListboxItemProps = $props()
+
+  const [itemProps, localProps] = $derived(createSplitProps<ItemProps>()(props, ['item', 'highlightOnHover']))
+  const listbox = useListboxContext()
+  const mergedProps = $derived(mergeProps(listbox().getItemProps(itemProps), localProps))
+  const itemState = $derived(listbox().getItemState(itemProps))
+
+  ListboxItemPropsProvider(() => itemProps)
+  ListboxItemProvider(() => itemState)
+</script>
+
+<Ark as="div" {...mergedProps} />

package/dist/components/listbox/listbox-item.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { ItemProps } from '@zag-js/listbox';
+import type { Assign, HTMLProps, PolymorphicProps } from '../../types.js';
+export interface ListboxItemBaseProps extends ItemProps, PolymorphicProps<'div'> {
+}
+export interface ListboxItemProps extends Assign<HTMLProps<'div'>, ListboxItemBaseProps> {
+}
+declare const ListboxItem: import("svelte").Component<ListboxItemProps, {}, "">;
+type ListboxItem = ReturnType<typeof ListboxItem>;
+export default ListboxItem;

package/dist/components/listbox/listbox-label.svelte

@@ -0,0 +1,19 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types.js'
+
+  export interface ListboxLabelBaseProps extends PolymorphicProps<'label'> {}
+  export interface ListboxLabelProps extends Assign<HTMLProps<'label'>, ListboxLabelBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory/index.js'
+  import { useListboxContext } from './use-listbox-context.js'
+
+  const props: ListboxLabelProps = $props()
+
+  const listbox = useListboxContext()
+  const mergedProps = $derived(mergeProps(listbox().getLabelProps(), props))
+</script>
+
+<Ark as="label" {...mergedProps} />

package/dist/components/listbox/listbox-label.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Assign, HTMLProps, PolymorphicProps } from '../../types.js';
+export interface ListboxLabelBaseProps extends PolymorphicProps<'label'> {
+}
+export interface ListboxLabelProps extends Assign<HTMLProps<'label'>, ListboxLabelBaseProps> {
+}
+declare const ListboxLabel: import("svelte").Component<ListboxLabelProps, {}, "">;
+type ListboxLabel = ReturnType<typeof ListboxLabel>;
+export default ListboxLabel;

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

@@ -0,0 +1,28 @@
+<script lang="ts" module>
+  interface RootProviderProps<T extends CollectionItem> {
+    value: UseListboxReturn<T>
+  }
+
+  export interface ListboxRootProviderBaseProps<T extends CollectionItem>
+    extends PolymorphicProps<'div'>,
+      RootProviderProps<T> {}
+  export interface ListboxRootProviderProps<T extends CollectionItem>
+    extends Assign<HTMLProps<'div'>, ListboxRootProviderBaseProps<T>> {}
+</script>
+
+<script lang="ts" generics="T extends CollectionItem">
+  import { mergeProps } from '@zag-js/svelte'
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types.js'
+  import { Ark } from '../factory/index.js'
+  import type { CollectionItem } from '../collection/index.js'
+  import type { UseListboxReturn } from './use-listbox.svelte.js'
+  import { ListboxProvider } from './use-listbox-context.js'
+
+  let { value, ...props }: ListboxRootProviderProps<T> = $props()
+
+  const mergedProps = $derived(mergeProps(value().getRootProps(), props))
+
+  ListboxProvider(value)
+</script>
+
+<Ark as="div" {...mergedProps} />

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

@@ -0,0 +1,27 @@
+interface RootProviderProps<T extends CollectionItem> {
+    value: UseListboxReturn<T>;
+}
+export interface ListboxRootProviderBaseProps<T extends CollectionItem> extends PolymorphicProps<'div'>, RootProviderProps<T> {
+}
+export interface ListboxRootProviderProps<T extends CollectionItem> extends Assign<HTMLProps<'div'>, ListboxRootProviderBaseProps<T>> {
+}
+import type { Assign, HTMLProps, PolymorphicProps } from '../../types.js';
+import type { CollectionItem } from '../collection/index.js';
+import type { UseListboxReturn } from './use-listbox.svelte.js';
+declare class __sveltets_Render<T extends CollectionItem> {
+    props(): ListboxRootProviderProps<T>;
+    events(): {};
+    slots(): {};
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends CollectionItem>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T extends CollectionItem>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const ListboxRootProvider: $$IsomorphicComponent;
+type ListboxRootProvider<T extends CollectionItem> = InstanceType<typeof ListboxRootProvider<T>>;
+export default ListboxRootProvider;

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

@@ -0,0 +1,60 @@
+<script lang="ts" generics="T extends CollectionItem">
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types.js'
+  import { mergeProps } from '@zag-js/svelte'
+  import type { CollectionItem } from '../collection/index.js'
+  import { Ark } from '../factory/index.js'
+  import { ListboxProvider } from './use-listbox-context.js'
+  import { type UseListboxProps, useListbox } from './use-listbox.svelte.js'
+  import { createSplitProps } from '../../utils/create-split-props.js'
+
+  export interface ListboxRootBaseProps<T extends CollectionItem> extends UseListboxProps<T>, PolymorphicProps<'div'> {}
+  export interface ListboxRootProps<T extends CollectionItem>
+    extends Assign<HTMLProps<'div'>, ListboxRootBaseProps<T>> {}
+
+  let { highlightedValue = $bindable(), value = $bindable(), ...props }: ListboxRootProps<T> = $props()
+  const providedId = $props.id()
+
+  const [listboxProps, localProps] = createSplitProps<UseListboxProps<T>>()(props, [
+    'collection',
+    'defaultHighlightedValue',
+    'defaultValue',
+    'deselectable',
+    'disabled',
+    'disallowSelectAll',
+    'highlightedValue',
+    'id',
+    'ids',
+    'loopFocus',
+    'onHighlightChange',
+    'onSelect',
+    'onValueChange',
+    'orientation',
+    'scrollToIndexFn',
+    'selectionMode',
+    'selectOnHighlight',
+    'typeahead',
+    'value',
+  ])
+
+  const resolvedProps = $derived<UseListboxProps<T>>({
+    ...listboxProps,
+    id: listboxProps.id ?? providedId,
+    highlightedValue,
+    onHighlightChange(details) {
+      listboxProps.onHighlightChange?.(details)
+      if (highlightedValue !== undefined) highlightedValue = details.highlightedValue
+    },
+    value,
+    onValueChange(details) {
+      listboxProps.onValueChange?.(details)
+      if (value !== undefined) value = details.value
+    },
+  })
+
+  const listbox = useListbox(() => resolvedProps)
+  const mergedProps = $derived(mergeProps(listbox().getRootProps(), localProps))
+
+  ListboxProvider(listbox)
+</script>
+
+<Ark as="div" {...mergedProps} />

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

@@ -0,0 +1,24 @@
+import type { Assign, HTMLProps, PolymorphicProps } from '../../types.js';
+import type { CollectionItem } from '../collection/index.js';
+import { type UseListboxProps } from './use-listbox.svelte.js';
+export interface ListboxRootBaseProps<T extends CollectionItem> extends UseListboxProps<T>, PolymorphicProps<'div'> {
+}
+export interface ListboxRootProps<T extends CollectionItem> extends Assign<HTMLProps<'div'>, ListboxRootBaseProps<T>> {
+}
+declare class __sveltets_Render<T extends CollectionItem> {
+    props(): ListboxRootProps<T>;
+    events(): {};
+    slots(): {};
+    bindings(): "value" | "highlightedValue";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends CollectionItem>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T extends CollectionItem>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const ListboxRoot: $$IsomorphicComponent;
+type ListboxRoot<T extends CollectionItem> = InstanceType<typeof ListboxRoot<T>>;
+export default ListboxRoot;

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

@@ -0,0 +1,30 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types.js'
+
+  export interface ListboxValueTextBaseProps extends PolymorphicProps<'span'> {
+    /**
+     * Text to display when no value is selected.
+     */
+    placeholder?: string
+  }
+  export interface ListboxValueTextProps extends Assign<HTMLProps<'span'>, ListboxValueTextBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory/index.js'
+  import { useListboxContext } from './use-listbox-context.js'
+
+  const { children, placeholder, ...localProps }: ListboxValueTextProps = $props()
+
+  const listbox = useListboxContext()
+  const mergedProps = $derived(mergeProps(listbox().getValueTextProps(), localProps))
+</script>
+
+<Ark as="span" {...mergedProps}>
+  {#if children}
+    {@render children()}
+  {:else}
+    {listbox().valueAsString || placeholder}
+  {/if}
+</Ark>

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

@@ -0,0 +1,12 @@
+import type { Assign, HTMLProps, PolymorphicProps } from '../../types.js';
+export interface ListboxValueTextBaseProps extends PolymorphicProps<'span'> {
+    /**
+     * Text to display when no value is selected.
+     */
+    placeholder?: string;
+}
+export interface ListboxValueTextProps extends Assign<HTMLProps<'span'>, ListboxValueTextBaseProps> {
+}
+declare const ListboxValueText: import("svelte").Component<ListboxValueTextProps, {}, "">;
+type ListboxValueText = ReturnType<typeof ListboxValueText>;
+export default ListboxValueText;

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

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

package/dist/components/listbox/listbox.anatomy.js

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

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

@@ -0,0 +1,12 @@
+export { default as Content, type ListboxContentBaseProps as ContentBaseProps, type ListboxContentProps as ContentProps, } from './listbox-content.svelte';
+export { default as Context, type ListboxContextProps as ContextProps } from './listbox-context.svelte';
+export { default as Input, type ListboxInputBaseProps as InputBaseProps, type ListboxInputProps as InputProps, } from './listbox-input.svelte';
+export { default as Item, type ListboxItemBaseProps as ItemBaseProps, type ListboxItemProps as ItemProps, } from './listbox-item.svelte';
+export { default as ItemGroup, type ListboxItemGroupBaseProps as ItemGroupBaseProps, type ListboxItemGroupProps as ItemGroupProps, } from './listbox-item-group.svelte';
+export { default as ItemGroupLabel, type ListboxItemGroupLabelBaseProps as ItemGroupLabelBaseProps, type ListboxItemGroupLabelProps as ItemGroupLabelProps, } from './listbox-item-group-label.svelte';
+export { default as ItemIndicator, type ListboxItemIndicatorBaseProps as ItemIndicatorBaseProps, type ListboxItemIndicatorProps as ItemIndicatorProps, } from './listbox-item-indicator.svelte';
+export { default as ItemText, type ListboxItemTextBaseProps as ItemTextBaseProps, type ListboxItemTextProps as ItemTextProps, } from './listbox-item-text.svelte';
+export { default as Label, type ListboxLabelBaseProps as LabelBaseProps, type ListboxLabelProps as LabelProps, } from './listbox-label.svelte';
+export { default as Root, type ListboxRootBaseProps as RootBaseProps, type ListboxRootProps as RootProps, } from './listbox-root.svelte';
+export { default as RootProvider, type ListboxRootProviderBaseProps as RootProviderBaseProps, type ListboxRootProviderProps as RootProviderProps, } from './listbox-root-provider.svelte';
+export { default as ValueText, type ListboxValueTextBaseProps as ValueTextBaseProps, type ListboxValueTextProps as ValueTextProps, } from './listbox-value-text.svelte';

package/dist/components/listbox/listbox.js

@@ -0,0 +1,12 @@
+export { default as Content, } from './listbox-content.svelte';
+export { default as Context } from './listbox-context.svelte';
+export { default as Input, } from './listbox-input.svelte';
+export { default as Item, } from './listbox-item.svelte';
+export { default as ItemGroup, } from './listbox-item-group.svelte';
+export { default as ItemGroupLabel, } from './listbox-item-group-label.svelte';
+export { default as ItemIndicator, } from './listbox-item-indicator.svelte';
+export { default as ItemText, } from './listbox-item-text.svelte';
+export { default as Label, } from './listbox-label.svelte';
+export { default as Root, } from './listbox-root.svelte';
+export { default as RootProvider, } from './listbox-root-provider.svelte';
+export { default as ValueText, } from './listbox-value-text.svelte';

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

@@ -0,0 +1,7 @@
+import type { Accessor } from '../../types.js';
+import type * as listbox from '@zag-js/listbox';
+import type { PropTypes } from '@zag-js/svelte';
+import type { CollectionItem } from '../collection/index.js';
+export interface UseListboxContext<T extends CollectionItem> extends Accessor<listbox.Api<PropTypes, T>> {
+}
+export declare const ListboxProvider: (opts: UseListboxContext<any>) => void, useListboxContext: (fallback?: UseListboxContext<any> | undefined) => UseListboxContext<any>;

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

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

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

@@ -0,0 +1,5 @@
+import type { Accessor } from '../../types.js';
+import type * as listbox from '@zag-js/listbox';
+export interface UseListboxItemContext extends Accessor<listbox.ItemState> {
+}
+export declare const ListboxItemProvider: (opts: UseListboxItemContext) => void, useListboxItemContext: (fallback?: UseListboxItemContext | undefined) => UseListboxItemContext;

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

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

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

@@ -0,0 +1,5 @@
+import type { Accessor } from '../../types.js';
+import type { ItemGroupProps } from '@zag-js/listbox';
+export interface UseListboxItemGroupPropsContext extends Accessor<ItemGroupProps> {
+}
+export declare const ListboxItemGroupPropsProvider: (opts: UseListboxItemGroupPropsContext) => void, useListboxItemGroupPropsContext: (fallback?: UseListboxItemGroupPropsContext | undefined) => UseListboxItemGroupPropsContext;

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

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

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

@@ -0,0 +1,5 @@
+import type { Accessor } from '../../types.js';
+import type { ItemProps } from '@zag-js/listbox';
+export interface UseListboxItemPropsContext extends Accessor<ItemProps> {
+}
+export declare const ListboxItemPropsProvider: (opts: UseListboxItemPropsContext) => void, useListboxItemPropsContext: (fallback?: UseListboxItemPropsContext | undefined) => UseListboxItemPropsContext;

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

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

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

@@ -0,0 +1,14 @@
+import type { Accessor, Optional } from '../../types.js';
+import * as listbox from '@zag-js/listbox';
+import { type PropTypes } from '@zag-js/svelte';
+import { type MaybeFunction } from '@zag-js/utils';
+import type { CollectionItem, ListCollection } from '../collection/index.js';
+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 Accessor<listbox.Api<PropTypes, T>> {
+}
+export declare const useListbox: <T extends CollectionItem>(props: MaybeFunction<UseListboxProps<T>>) => UseListboxReturn<T>;

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

@@ -0,0 +1,19 @@
+import * as listbox from '@zag-js/listbox';
+import { normalizeProps, useMachine } from '@zag-js/svelte';
+import { runIfFn } from '@zag-js/utils';
+import { useEnvironmentContext, useLocaleContext } from '../../providers/index.js';
+export const useListbox = (props) => {
+    const env = useEnvironmentContext();
+    const locale = useLocaleContext();
+    const machineProps = $derived.by(() => {
+        const resolvedProps = runIfFn(props);
+        return {
+            dir: locale().dir,
+            getRootNode: env().getRootNode,
+            ...resolvedProps,
+        };
+    });
+    const service = useMachine(listbox.machine, () => machineProps);
+    const api = $derived(listbox.connect(service, normalizeProps));
+    return () => api;
+};

package/dist/components/menu/index.d.ts

@@ -0,0 +1,28 @@
+export type { HighlightChangeDetails as MenuHighlightChangeDetails, OpenChangeDetails as MenuOpenChangeDetails, SelectionDetails as MenuSelectionDetails, } from '@zag-js/menu';
+export { default as MenuArrowTip, type MenuArrowTipBaseProps, type MenuArrowTipProps } from './menu-arrow-tip.svelte';
+export { default as MenuArrow, type MenuArrowBaseProps, type MenuArrowProps } from './menu-arrow.svelte';
+export { default as MenuCheckboxItem, type MenuCheckboxItemBaseProps, type MenuCheckboxItemProps, } from './menu-checkbox-item.svelte';
+export { default as MenuContent, type MenuContentBaseProps, type MenuContentProps } from './menu-content.svelte';
+export { default as MenuContextTrigger, type MenuContextTriggerBaseProps, type MenuContextTriggerProps, } from './menu-context-trigger.svelte';
+export { default as MenuContext, type MenuContextProps } from './menu-context.svelte';
+export { default as MenuIndicator, type MenuIndicatorBaseProps, type MenuIndicatorProps } from './menu-indicator.svelte';
+export { default as MenuItemContext, type MenuItemContextProps } from './menu-item-context.svelte';
+export { default as MenuItemGroupLabel, type MenuItemGroupLabelBaseProps, type MenuItemGroupLabelProps, } from './menu-item-group-label.svelte';
+export { default as MenuItemGroup, type MenuItemGroupBaseProps, type MenuItemGroupProps, } from './menu-item-group.svelte';
+export { default as MenuItemIndicator, type MenuItemIndicatorBaseProps, type MenuItemIndicatorProps, } from './menu-item-indicator.svelte';
+export { default as MenuItemText, type MenuItemTextBaseProps, type MenuItemTextProps } from './menu-item-text.svelte';
+export { default as MenuItem, type MenuItemBaseProps, type MenuItemProps } from './menu-item.svelte';
+export { default as MenuPositioner, type MenuPositionerBaseProps, type MenuPositionerProps, } from './menu-positioner.svelte';
+export { default as MenuRadioItemGroup, type MenuRadioItemGroupBaseProps, type MenuRadioItemGroupProps, } from './menu-radio-item-group.svelte';
+export { default as MenuRadioItem, type MenuRadioItemBaseProps, type MenuRadioItemProps, } from './menu-radio-item.svelte';
+export { default as MenuRootProvider, type MenuRootProviderBaseProps, type MenuRootProviderProps, } from './menu-root-provider.svelte';
+export { default as MenuRoot, type MenuRootBaseProps, type MenuRootProps } from './menu-root.svelte';
+export { default as MenuSeparator, type MenuSeparatorBaseProps, type MenuSeparatorProps } from './menu-separator.svelte';
+export { default as MenuTriggerItem, type MenuTriggerItemBaseProps, type MenuTriggerItemProps, } from './menu-trigger-item.svelte';
+export { default as MenuTrigger, type MenuTriggerBaseProps, type MenuTriggerProps } from './menu-trigger.svelte';
+export { menuAnatomy } from './menu.anatomy';
+export { useMenuContext, type UseMenuContext } from './use-menu-context';
+export { useMenuItemContext, type UseMenuItemContext } from './use-menu-item-context';
+export type { ValueChangeDetails as MenuValueChangeDetails } from './use-menu-item-group-context';
+export { useMenu, type UseMenuProps, type UseMenuReturn } from './use-menu.svelte';
+export * as Menu from './menu';

package/dist/components/menu/index.js

@@ -0,0 +1,26 @@
+export { default as MenuArrowTip } from './menu-arrow-tip.svelte';
+export { default as MenuArrow } from './menu-arrow.svelte';
+export { default as MenuCheckboxItem, } from './menu-checkbox-item.svelte';
+export { default as MenuContent } from './menu-content.svelte';
+export { default as MenuContextTrigger, } from './menu-context-trigger.svelte';
+export { default as MenuContext } from './menu-context.svelte';
+export { default as MenuIndicator } from './menu-indicator.svelte';
+export { default as MenuItemContext } from './menu-item-context.svelte';
+export { default as MenuItemGroupLabel, } from './menu-item-group-label.svelte';
+export { default as MenuItemGroup, } from './menu-item-group.svelte';
+export { default as MenuItemIndicator, } from './menu-item-indicator.svelte';
+export { default as MenuItemText } from './menu-item-text.svelte';
+export { default as MenuItem } from './menu-item.svelte';
+export { default as MenuPositioner, } from './menu-positioner.svelte';
+export { default as MenuRadioItemGroup, } from './menu-radio-item-group.svelte';
+export { default as MenuRadioItem, } from './menu-radio-item.svelte';
+export { default as MenuRootProvider, } from './menu-root-provider.svelte';
+export { default as MenuRoot } from './menu-root.svelte';
+export { default as MenuSeparator } from './menu-separator.svelte';
+export { default as MenuTriggerItem, } from './menu-trigger-item.svelte';
+export { default as MenuTrigger } from './menu-trigger.svelte';
+export { menuAnatomy } from './menu.anatomy';
+export { useMenuContext } from './use-menu-context';
+export { useMenuItemContext } from './use-menu-item-context';
+export { useMenu } from './use-menu.svelte';
+export * as Menu from './menu';