ui-ingredients 1.2.0 → 1.4.0

package/dist/accordion/accordion-context.svelte.js

@@ -1,3 +1,3 @@
 import { createContext } from '../create-context.svelte.js';
 export const [getAccordionContext, setAccordionContext] = createContext('Accordion');
-export const [getAccordionItemPropsContext, setAccordionItemPropsContext] = createContext('AccordionItem  [PROPS]');
+export const [getAccordionItemPropsContext, setAccordionItemPropsContext] = createContext('AccordionItem.props');

package/dist/accordion/accordion-root.svelte

@@ -33,9 +33,11 @@
   let uid = $props.id();
 
   let [presenceStrategyProps, accordionProps] = $derived(
-    createSplitProps<PresenceStrategyProps>(['lazyMount', 'keepMounted'])(
-      props,
-    ),
+    createSplitProps<PresenceStrategyProps>([
+      'lazyMount',
+      'keepMounted',
+      'animateOnMount',
+    ])(props),
   );
 
   let [createAccordionProps, localProps] = $derived(

package/dist/alert-dialog/alert-dialog-root.svelte

@@ -30,9 +30,11 @@
   let uid = $props.id();
 
   let [presenceStrategyProps, createDialogProps] = $derived(
-    createSplitProps<PresenceStrategyProps>(['lazyMount', 'keepMounted'])(
-      props,
-    ),
+    createSplitProps<PresenceStrategyProps>([
+      'lazyMount',
+      'keepMounted',
+      'animateOnMount',
+    ])(props),
   );
 
   let alertDialog = createAlertDialog(

package/dist/anatomy.d.ts

@@ -18,6 +18,7 @@ export { anatomy as fieldAnatomy } from './field/field-anatomy.js';
 export { anatomy as fileUploadAnatomy } from './file-upload/file-upload-anatomy.js';
 export { anatomy as floatingPanelAnatomy } from './floating-panel/floating-panel-anatomy.js';
 export { anatomy as hoverCardAnatomy } from './hover-card/hover-card-anatomy.js';
+export { anatomy as listboxAnatomy } from './listbox/listbox-anatomy.js';
 export { anatomy as menuAnatomy } from './menu/menu-anatomy.js';
 export { anatomy as numberInputAnatomy } from './number-input/number-input-anatomy.js';
 export { anatomy as paginationAnatomy } from './pagination/pagination-anatomy.js';

package/dist/anatomy.js

@@ -18,6 +18,7 @@ export { anatomy as fieldAnatomy } from './field/field-anatomy.js';
 export { anatomy as fileUploadAnatomy } from './file-upload/file-upload-anatomy.js';
 export { anatomy as floatingPanelAnatomy } from './floating-panel/floating-panel-anatomy.js';
 export { anatomy as hoverCardAnatomy } from './hover-card/hover-card-anatomy.js';
+export { anatomy as listboxAnatomy } from './listbox/listbox-anatomy.js';
 export { anatomy as menuAnatomy } from './menu/menu-anatomy.js';
 export { anatomy as numberInputAnatomy } from './number-input/number-input-anatomy.js';
 export { anatomy as paginationAnatomy } from './pagination/pagination-anatomy.js';

package/dist/collapsible/collapsible-root.svelte

@@ -34,9 +34,11 @@
   let uid = $props.id();
 
   let [presenceStrategyProps, collapsibleProps] = $derived(
-    createSplitProps<PresenceStrategyProps>(['lazyMount', 'keepMounted'])(
-      props,
-    ),
+    createSplitProps<PresenceStrategyProps>([
+      'lazyMount',
+      'keepMounted',
+      'animateOnMount',
+    ])(props),
   );
 
   let [createCollapsibleProps, localProps] = $derived(

package/dist/collection.d.ts

@@ -0,0 +1 @@
+export * from '@zag-js/collection';

package/dist/collection.js

@@ -0,0 +1 @@
+export * from '@zag-js/collection';

package/dist/color-picker/color-picker-context.svelte.js

@@ -1,6 +1,6 @@
 import { createContext } from '../create-context.svelte.js';
 export const [getColorPickerContext, setColorPickerContext] = createContext('ColorPicker');
-export const [getColorPickerAreaPropsContext, setColorPickerAreaPropsContext] = createContext('ColorPickerArea [PROPS]');
-export const [getColorPickerSwatchPropsContext, setColorPickerSwatchPropsContext,] = createContext('ColorPickerSwatch [PROPS]');
-export const [getColorPickerFormatPropsContext, setColorPickerFormatPropsContext,] = createContext('ColorPickerFormat [PROPS]', false);
-export const [getColorPickerChannelPropsContext, setColorPickerChannelPropsContext,] = createContext('ColorPickerChannel [PROPS]');
+export const [getColorPickerAreaPropsContext, setColorPickerAreaPropsContext] = createContext('ColorPickerArea.props');
+export const [getColorPickerSwatchPropsContext, setColorPickerSwatchPropsContext,] = createContext('ColorPickerSwatch.props');
+export const [getColorPickerFormatPropsContext, setColorPickerFormatPropsContext,] = createContext('ColorPickerFormat.props', false);
+export const [getColorPickerChannelPropsContext, setColorPickerChannelPropsContext,] = createContext('ColorPickerChannel.props');

package/dist/color-picker/color-picker-root.svelte

@@ -34,9 +34,11 @@
   let uid = $props.id();
 
   let [presenceProps, colorPickerProps] = $derived(
-    createSplitProps<PresenceStrategyProps>(['lazyMount', 'keepMounted'])(
-      props,
-    ),
+    createSplitProps<PresenceStrategyProps>([
+      'lazyMount',
+      'keepMounted',
+      'animateOnMount',
+    ])(props),
   );
 
   let [createColorPickerProps, localProps] = $derived(

package/dist/combobox/combobox-context.svelte.js

@@ -1,4 +1,4 @@
 import { createContext } from '../create-context.svelte.js';
 export const [getComboboxContext, setComboboxContext] = createContext('Combobox');
-export const [getComboboxItemPropsContext, setComboboxItemPropsContext] = createContext('ComboboxItem [PROPS]');
-export const [getComboboxItemGroupPropsContext, setComboboxItemGroupPropsContext,] = createContext('ComboboxItemGroup [PROPS]');
+export const [getComboboxItemPropsContext, setComboboxItemPropsContext] = createContext('ComboboxItem.props');
+export const [getComboboxItemGroupPropsContext, setComboboxItemGroupPropsContext,] = createContext('ComboboxItemGroup.props');

package/dist/combobox/combobox-root.svelte

@@ -34,9 +34,11 @@
   let uid = $props.id();
 
   let [presenceStrategyProps, comboboxProps] = $derived(
-    createSplitProps<PresenceStrategyProps>(['lazyMount', 'keepMounted'])(
-      props,
-    ),
+    createSplitProps<PresenceStrategyProps>([
+      'lazyMount',
+      'keepMounted',
+      'animateOnMount',
+    ])(props),
   );
 
   let [createComboboxProps, localProps] = $derived(

package/dist/date-picker/date-picker-context.svelte.js

@@ -1,6 +1,6 @@
 import { createContext } from '../create-context.svelte.js';
 export const [getDatePickerContext, setDatePickerContext] = createContext('DatePicker');
-export const [getDatePickerViewPropsContext, setDatePickerViewPropsContext] = createContext('DatePickerView [PROPS]');
-export const [getDatePickerTablePropsContext, setDatePickerTablePropsContext] = createContext('DatePickerTable [PROPS]');
-export const [getDatePickerTableCellPropsContext, setDatePickerTableCellPropsContext,] = createContext('DatePickerTableCell [PROPS]');
-export const [getDatePickerDayTableCellPropsContext, setDatePickerDayTableCellPropsContext,] = createContext('DatePickerDayTableCell [PROPS]');
+export const [getDatePickerViewPropsContext, setDatePickerViewPropsContext] = createContext('DatePickerView.props');
+export const [getDatePickerTablePropsContext, setDatePickerTablePropsContext] = createContext('DatePickerTable.props');
+export const [getDatePickerTableCellPropsContext, setDatePickerTableCellPropsContext,] = createContext('DatePickerTableCell.props');
+export const [getDatePickerDayTableCellPropsContext, setDatePickerDayTableCellPropsContext,] = createContext('DatePickerDayTableCell.props');

package/dist/date-picker/date-picker-root.svelte

@@ -34,7 +34,11 @@
   let uid = $props.id();
 
   let [presenceStrategyProps, datePickerProps] = $derived(
-    createSplitProps<PresenceStrategyProps>([])(props),
+    createSplitProps<PresenceStrategyProps>([
+      'lazyMount',
+      'keepMounted',
+      'animateOnMount',
+    ])(props),
   );
 
   let [createDatePickerProps, localProps] = $derived(

package/dist/dialog/dialog-root.svelte

@@ -30,9 +30,11 @@
   let uid = $props.id();
 
   let [presenceStrategyProps, createDialogProps] = $derived(
-    createSplitProps<PresenceStrategyProps>(['lazyMount', 'keepMounted'])(
-      props,
-    ),
+    createSplitProps<PresenceStrategyProps>([
+      'lazyMount',
+      'keepMounted',
+      'animateOnMount',
+    ])(props),
   );
 
   let dialog = createDialog(

package/dist/drawer/drawer-root.svelte

@@ -30,9 +30,11 @@
   let uid = $props.id();
 
   let [presenceStrategyProps, createDialogProps] = $derived(
-    createSplitProps<PresenceStrategyProps>(['lazyMount', 'keepMounted'])(
-      props,
-    ),
+    createSplitProps<PresenceStrategyProps>([
+      'lazyMount',
+      'keepMounted',
+      'animateOnMount',
+    ])(props),
   );
 
   let drawer = createDrawer(

package/dist/field/field-root.svelte

@@ -33,9 +33,11 @@
   let uid = $props.id();
 
   let [presenceStrategyProps, fieldProps] = $derived(
-    createSplitProps<PresenceStrategyProps>(['keepMounted', 'lazyMount'])(
-      props,
-    ),
+    createSplitProps<PresenceStrategyProps>([
+      'keepMounted',
+      'lazyMount',
+      'animateOnMount',
+    ])(props),
   );
 
   let [createFieldProps, localProps] = $derived(

package/dist/file-upload/file-upload-context.svelte.js

@@ -1,3 +1,3 @@
 import { createContext } from '../create-context.svelte.js';
 export const [getFileUploadContext, setFileUploadContext] = createContext('FileUpload');
-export const [getFileUploadItemPropsContext, setFileUploadItemPropsContext] = createContext('FileUploadItem [PROPS]');
+export const [getFileUploadItemPropsContext, setFileUploadItemPropsContext] = createContext('FileUploadItem.props');

package/dist/floating-panel/floating-panel-anatomy.d.ts

@@ -1 +1 @@
-export { floating as anatomy } from '@zag-js/floating-panel';
+export { anatomy } from '@zag-js/floating-panel';

package/dist/floating-panel/floating-panel-anatomy.js

@@ -1 +1 @@
-export { floating as anatomy } from '@zag-js/floating-panel';
+export { anatomy } from '@zag-js/floating-panel';

package/dist/floating-panel/{floating-panel-restore-trigger.svelte → floating-panel-control.svelte}

@@ -1,8 +1,8 @@
 <script lang="ts" module>
   import type {HtmlIngredientProps} from '../types.js';
 
-  export interface FloatingPanelRestoreTriggerProps
-    extends HtmlIngredientProps<'button', HTMLButtonElement> {}
+  export interface FloatingPanelControlProps
+    extends HtmlIngredientProps<'div', HTMLDivElement> {}
 </script>
 
 <script lang="ts">
@@ -14,18 +14,18 @@
     asChild,
     children,
     ...props
-  }: FloatingPanelRestoreTriggerProps = $props();
+  }: FloatingPanelControlProps = $props();
 
   let floatingPanel = getFloatingPanelContext();
   let mergedProps = $derived(
-    mergeProps(floatingPanel.getRestoreTriggerProps(), props),
+    mergeProps(floatingPanel.getControlProps(), props),
   );
 </script>
 
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <button bind:this={ref} {...mergedProps}>
+  <div bind:this={ref} {...mergedProps}>
     {@render children?.()}
-  </button>
+  </div>
 {/if}

package/dist/floating-panel/floating-panel-control.svelte.d.ts

@@ -0,0 +1,6 @@
+import type { HtmlIngredientProps } from '../types.js';
+export interface FloatingPanelControlProps extends HtmlIngredientProps<'div', HTMLDivElement> {
+}
+declare const FloatingPanelControl: import("svelte").Component<FloatingPanelControlProps, {}, "ref">;
+type FloatingPanelControl = ReturnType<typeof FloatingPanelControl>;
+export default FloatingPanelControl;

package/dist/floating-panel/floating-panel-root.svelte

@@ -27,9 +27,11 @@
   let uid = $props.id();
 
   let [presenceStrategyProps, createFloatingPanelProps] = $derived(
-    createSplitProps<PresenceStrategyProps>(['lazyMount', 'keepMounted'])(
-      props,
-    ),
+    createSplitProps<PresenceStrategyProps>([
+      'lazyMount',
+      'keepMounted',
+      'animateOnMount',
+    ])(props),
   );
 
   let floatingPanel = createFloatingPanel(

package/dist/floating-panel/floating-panel-stage-trigger.svelte

@@ -0,0 +1,44 @@
+<script lang="ts" module>
+  import type {StageTriggerProps} from '@zag-js/floating-panel';
+  import type {Assign, HtmlIngredientProps} from '../types.js';
+
+  export interface FloatingPanelStageTriggerProps
+    extends Assign<
+      HtmlIngredientProps<'button', HTMLButtonElement>,
+      StageTriggerProps
+    > {}
+</script>
+
+<script lang="ts">
+  import {createSplitProps} from '../create-split-props.js';
+  import {mergeProps} from '../merge-props.js';
+  import {getFloatingPanelContext} from './floating-panel-context.svelte.js';
+
+  let {
+    ref = $bindable(null),
+    asChild,
+    children,
+    ...props
+  }: FloatingPanelStageTriggerProps = $props();
+
+  let floatingPanel = getFloatingPanelContext();
+
+  let [stageTriggerProps, localProps] = $derived(
+    createSplitProps<StageTriggerProps>(['stage'])(props),
+  );
+
+  let mergedProps = $derived(
+    mergeProps(
+      floatingPanel.getStageTriggerProps(stageTriggerProps),
+      localProps,
+    ),
+  );
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps)}
+{:else}
+  <button bind:this={ref} {...mergedProps}>
+    {@render children?.()}
+  </button>
+{/if}

package/dist/floating-panel/floating-panel-stage-trigger.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { StageTriggerProps } from '@zag-js/floating-panel';
+import type { Assign, HtmlIngredientProps } from '../types.js';
+export interface FloatingPanelStageTriggerProps extends Assign<HtmlIngredientProps<'button', HTMLButtonElement>, StageTriggerProps> {
+}
+declare const FloatingPanelStageTrigger: import("svelte").Component<FloatingPanelStageTriggerProps, {}, "ref">;
+type FloatingPanelStageTrigger = ReturnType<typeof FloatingPanelStageTrigger>;
+export default FloatingPanelStageTrigger;

package/dist/floating-panel/floating-panel.d.ts

@@ -1,13 +1,12 @@
 export { default as Body } from './floating-panel-body.svelte';
 export { default as CloseTrigger } from './floating-panel-close-trigger.svelte';
 export { default as Content } from './floating-panel-content.svelte';
+export { default as Control } from './floating-panel-control.svelte';
 export { default as DragTrigger } from './floating-panel-drag-trigger.svelte';
 export { default as Header } from './floating-panel-header.svelte';
-export { default as MaximizeTrigger } from './floating-panel-maximize-trigger.svelte';
-export { default as MinimizeTrigger } from './floating-panel-minimize-trigger.svelte';
 export { default as Positioner } from './floating-panel-positioner.svelte';
 export { default as ResizeTrigger } from './floating-panel-resize-trigger.svelte';
-export { default as RestoreTrigger } from './floating-panel-restore-trigger.svelte';
 export { default as Root } from './floating-panel-root.svelte';
+export { default as StageTrigger } from './floating-panel-stage-trigger.svelte';
 export { default as Title } from './floating-panel-title.svelte';
-export { default as FloatingPanelTrigger } from './floating-panel-trigger.svelte';
+export { default as Trigger } from './floating-panel-trigger.svelte';

package/dist/floating-panel/floating-panel.js

@@ -1,13 +1,12 @@
 export { default as Body } from './floating-panel-body.svelte';
 export { default as CloseTrigger } from './floating-panel-close-trigger.svelte';
 export { default as Content } from './floating-panel-content.svelte';
+export { default as Control } from './floating-panel-control.svelte';
 export { default as DragTrigger } from './floating-panel-drag-trigger.svelte';
 export { default as Header } from './floating-panel-header.svelte';
-export { default as MaximizeTrigger } from './floating-panel-maximize-trigger.svelte';
-export { default as MinimizeTrigger } from './floating-panel-minimize-trigger.svelte';
 export { default as Positioner } from './floating-panel-positioner.svelte';
 export { default as ResizeTrigger } from './floating-panel-resize-trigger.svelte';
-export { default as RestoreTrigger } from './floating-panel-restore-trigger.svelte';
 export { default as Root } from './floating-panel-root.svelte';
+export { default as StageTrigger } from './floating-panel-stage-trigger.svelte';
 export { default as Title } from './floating-panel-title.svelte';
-export { default as FloatingPanelTrigger } from './floating-panel-trigger.svelte';
+export { default as Trigger } from './floating-panel-trigger.svelte';

package/dist/floating-panel/index.d.ts

@@ -2,14 +2,13 @@ export * as FloatingPanel from './floating-panel.js';
 export type { FloatingPanelBodyProps } from './floating-panel-body.svelte';
 export type { FloatingPanelCloseTriggerProps } from './floating-panel-close-trigger.svelte';
 export type { FloatingPanelContentProps } from './floating-panel-content.svelte';
+export type { FloatingPanelControlProps } from './floating-panel-control.svelte';
 export type { FloatingPanelDragTriggerProps } from './floating-panel-drag-trigger.svelte';
 export type { FloatingPanelHeaderProps } from './floating-panel-header.svelte';
-export type { FloatingPanelMaximizeTriggerProps } from './floating-panel-maximize-trigger.svelte';
-export type { FloatingPanelMinimizeTriggerProps } from './floating-panel-minimize-trigger.svelte';
 export type { FloatingPanelPositionerProps } from './floating-panel-positioner.svelte';
 export type { FloatingPanelResizeTriggerProps } from './floating-panel-resize-trigger.svelte';
-export type { FloatingPanelRestoreTriggerProps } from './floating-panel-restore-trigger.svelte';
 export type { FloatingPanelProps } from './floating-panel-root.svelte';
+export type { FloatingPanelStageTriggerProps } from './floating-panel-stage-trigger.svelte';
 export type { FloatingPanelTitleProps } from './floating-panel-title.svelte';
 export type { FloatingPanelTriggerProps } from './floating-panel-trigger.svelte';
 export { createFloatingPanel, type CreateFloatingPanelProps, type CreateFloatingPanelReturn, } from './create-floating-panel.svelte.js';

package/dist/index.d.ts

@@ -21,6 +21,7 @@ export * from './floating-panel/index.js';
 export * from './focus-trap/index.js';
 export * from './highlight/index.js';
 export * from './hover-card/index.js';
+export * from './listbox/index.js';
 export * from './locale-provider/index.js';
 export * from './menu/index.js';
 export * from './number-input/index.js';

package/dist/index.js

@@ -21,6 +21,7 @@ export * from './floating-panel/index.js';
 export * from './focus-trap/index.js';
 export * from './highlight/index.js';
 export * from './hover-card/index.js';
+export * from './listbox/index.js';
 export * from './locale-provider/index.js';
 export * from './menu/index.js';
 export * from './number-input/index.js';

package/dist/listbox/create-listbox.svelte.d.ts

@@ -0,0 +1,6 @@
+import * as listbox from '@zag-js/listbox';
+export interface CreateListboxProps extends Omit<listbox.Props, 'dir' | 'getRootNode'> {
+}
+export interface CreateListboxReturn extends listbox.Api {
+}
+export declare function createListbox(props: CreateListboxProps): CreateListboxReturn;

package/dist/listbox/create-listbox.svelte.js

@@ -0,0 +1,14 @@
+import * as listbox from '@zag-js/listbox';
+import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
+import { getEnvironmentContext } from '../environment-provider/enviroment-provider-context.svelte.js';
+import { getLocaleContext } from '../locale-provider/locale-provider-context.svelte.js';
+export function createListbox(props) {
+    const locale = getLocaleContext();
+    const environment = getEnvironmentContext();
+    const service = useMachine(listbox.machine, () => ({
+        dir: locale?.dir,
+        getRootNode: environment?.getRootNode,
+        ...props,
+    }));
+    return reflect(() => listbox.connect(service, normalizeProps));
+}

package/dist/listbox/index.d.ts

@@ -0,0 +1,14 @@
+export * as Listbox from './listbox.js';
+export type { ListboxContentProps } from './listbox-content.svelte';
+export type { ListboxInputProps } from './listbox-input.svelte';
+export type { ListboxItemGroupLabelProps } from './listbox-item-group-label.svelte';
+export type { ListboxItemGroupProps } from './listbox-item-group.svelte';
+export type { ListboxItemIndicatorProps } from './listbox-item-indicator.svelte';
+export type { ListboxItemTextProps } from './listbox-item-text.svelte';
+export type { ListboxItemProps } from './listbox-item.svelte';
+export type { ListboxLabelProps } from './listbox-label.svelte';
+export type { ListboxProps } from './listbox-root.svelte';
+export type { ListboxValueTextProps } from './listbox-value-text.svelte';
+export { createListbox, type CreateListboxProps, type CreateListboxReturn, } from './create-listbox.svelte.js';
+export { anatomy as listboxAnatomy } from './listbox-anatomy.js';
+export { getListboxContext, setListboxContext, } from './listbox-context.svelte.js';

package/dist/listbox/index.js

@@ -0,0 +1,4 @@
+export * as Listbox from './listbox.js';
+export { createListbox, } from './create-listbox.svelte.js';
+export { anatomy as listboxAnatomy } from './listbox-anatomy.js';
+export { getListboxContext, setListboxContext, } from './listbox-context.svelte.js';

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

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

package/dist/listbox/listbox-anatomy.js

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

package/dist/listbox/listbox-content.svelte

@@ -0,0 +1,29 @@
+<script lang="ts" module>
+  import type {HtmlIngredientProps} from '../types.js';
+
+  export interface ListboxContentProps
+    extends HtmlIngredientProps<'div', HTMLDivElement> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {getListboxContext} from './listbox-context.svelte.js';
+
+  let {
+    ref = $bindable(null),
+    asChild,
+    children,
+    ...props
+  }: ListboxContentProps = $props();
+
+  let listbox = getListboxContext();
+  let mergedProps = $derived(mergeProps(listbox.getContentProps(), props));
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps)}
+{:else}
+  <div bind:this={ref} {...mergedProps}>
+    {@render children?.()}
+  </div>
+{/if}

package/dist/listbox/listbox-content.svelte.d.ts

@@ -0,0 +1,6 @@
+import type { HtmlIngredientProps } from '../types.js';
+export interface ListboxContentProps extends HtmlIngredientProps<'div', HTMLDivElement> {
+}
+declare const ListboxContent: import("svelte").Component<ListboxContentProps, {}, "ref">;
+type ListboxContent = ReturnType<typeof ListboxContent>;
+export default ListboxContent;

package/dist/listbox/listbox-context.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { ItemGroupProps, ItemProps } from '@zag-js/listbox';
+import type { CreateListboxReturn } from './create-listbox.svelte.js';
+export declare const getListboxContext: () => CreateListboxReturn, setListboxContext: (context: CreateListboxReturn | (() => CreateListboxReturn)) => void;
+export declare const getListboxItemPropsContext: () => ItemProps<any>, setListboxItemPropsContext: (context: ItemProps<any> | (() => ItemProps<any>)) => void;
+export declare const getListboxItemGroupPropsContext: () => ItemGroupProps, setListboxItemGroupPropsContext: (context: ItemGroupProps | (() => ItemGroupProps)) => void;

package/dist/listbox/listbox-context.svelte.js

@@ -0,0 +1,4 @@
+import { createContext } from '../create-context.svelte.js';
+export const [getListboxContext, setListboxContext] = createContext('Listbox');
+export const [getListboxItemPropsContext, setListboxItemPropsContext] = createContext('ListboxItem.props');
+export const [getListboxItemGroupPropsContext, setListboxItemGroupPropsContext,] = createContext('ListboxItemGroup.props');

package/dist/listbox/listbox-input.svelte

@@ -0,0 +1,39 @@
+<script lang="ts" module>
+  import type {InputProps} from '@zag-js/listbox';
+  import type {Assign, HtmlIngredientProps} from '../types.js';
+
+  export interface ListboxInputProps
+    extends Assign<
+      HtmlIngredientProps<'input', HTMLInputElement>,
+      InputProps
+    > {}
+</script>
+
+<script lang="ts">
+  import {createSplitProps} from '../create-split-props.js';
+  import {mergeProps} from '../merge-props.js';
+  import {getListboxContext} from './listbox-context.svelte.js';
+
+  let {
+    ref = $bindable(null),
+    asChild,
+    children,
+    ...props
+  }: ListboxInputProps = $props();
+
+  let [inputProps, localProps] = $derived(
+    createSplitProps<InputProps>(['autoHighlight'])(props),
+  );
+
+  let listbox = getListboxContext();
+
+  let mergedProps = $derived(
+    mergeProps(listbox.getInputProps(inputProps), localProps),
+  );
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps)}
+{:else}
+  <input bind:this={ref} {...mergedProps} />
+{/if}

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

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

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

@@ -0,0 +1,40 @@
+<script lang="ts" module>
+  import type {HtmlIngredientProps} from '../types.js';
+
+  export interface ListboxItemGroupLabelProps
+    extends HtmlIngredientProps<'span', HTMLSpanElement> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {
+    getListboxContext,
+    getListboxItemGroupPropsContext,
+  } from './listbox-context.svelte.js';
+
+  let {
+    ref = $bindable(null),
+    asChild,
+    children,
+    ...props
+  }: ListboxItemGroupLabelProps = $props();
+
+  let listbox = getListboxContext();
+  let itemGroupProps = getListboxItemGroupPropsContext();
+  let mergedProps = $derived(
+    mergeProps(
+      listbox.getItemGroupLabelProps({
+        htmlFor: itemGroupProps.id,
+      }),
+      props,
+    ),
+  );
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps)}
+{:else}
+  <div bind:this={ref} {...mergedProps}>
+    {@render children?.()}
+  </div>
+{/if}

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

@@ -0,0 +1,6 @@
+import type { HtmlIngredientProps } from '../types.js';
+export interface ListboxItemGroupLabelProps extends HtmlIngredientProps<'span', HTMLSpanElement> {
+}
+declare const ListboxItemGroupLabel: import("svelte").Component<ListboxItemGroupLabelProps, {}, "ref">;
+type ListboxItemGroupLabel = ReturnType<typeof ListboxItemGroupLabel>;
+export default ListboxItemGroupLabel;