ui-ingredients 0.0.24 → 0.0.26

package/dist/combobox/item-indicator.svelte

@@ -1,14 +1,17 @@
 <script lang="ts" module>
-  import type {HtmlProps} from '../types.js';
+  import type {GenericHtmlProps, HtmlProps} from '../types.js';
+  import type {Snippet} from 'svelte';
 
-  export interface ComboboxItemIndicatorProps extends HtmlProps<'span'> {}
+  export interface ComboboxItemIndicatorProps extends HtmlProps<'div'> {
+    asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>]>;
+  }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {comboboxContext, comboboxItemPropsContext} from './context.svelte.js';
 
-  let {children, ...props}: ComboboxItemIndicatorProps = $props();
+  let {asChild, children, ...props}: ComboboxItemIndicatorProps = $props();
 
   let combobox = comboboxContext.get();
   let itemProps = comboboxItemPropsContext.get();
@@ -16,6 +19,10 @@
   let attrs = $derived(mergeProps(props, combobox.getItemIndicatorProps(itemProps)));
 </script>
 
-<span {...attrs}>
-  {@render children?.()}
-</span>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <div {...attrs}>
+    {@render children?.()}
+  </div>
+{/if}

package/dist/combobox/item-text.svelte

@@ -1,14 +1,17 @@
 <script lang="ts" module>
-  import type {HtmlProps} from '../types.js';
+  import type {GenericHtmlProps, HtmlProps} from '../types.js';
+  import type {Snippet} from 'svelte';
 
-  export interface ComboboxItemTextProps extends HtmlProps<'span'> {}
+  export interface ComboboxItemTextProps extends HtmlProps<'div'> {
+    asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>]>;
+  }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {comboboxContext, comboboxItemPropsContext} from './context.svelte.js';
 
-  let {children, ...props}: ComboboxItemTextProps = $props();
+  let {asChild, children, ...props}: ComboboxItemTextProps = $props();
 
   let combobox = comboboxContext.get();
   let itemProps = comboboxItemPropsContext.get();
@@ -16,10 +19,14 @@
   let attrs = $derived(mergeProps(props, combobox.getItemTextProps(itemProps)));
 </script>
 
-<span {...attrs}>
-  {#if children}
-    {@render children?.()}
-  {:else}
-    {combobox.collection.stringifyItem(itemProps.item)}
-  {/if}
-</span>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <div {...attrs}>
+    {#if children}
+      {@render children?.()}
+    {:else}
+      {combobox.collection.stringifyItem(itemProps.item)}
+    {/if}
+  </div>
+{/if}

package/dist/combobox/item.svelte

@@ -1,18 +1,19 @@
 <script lang="ts" module>
-  import type {Assign, HtmlProps} from '../types.js';
+  import type {Assign, GenericHtmlProps, HtmlProps} from '../types.js';
   import type {ItemProps, ItemState} from '@zag-js/combobox';
   import type {Snippet} from 'svelte';
 
   export interface ComboboxItemProps extends Assign<Omit<HtmlProps<'div'>, 'children'>, ItemProps> {
+    asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>, state: ItemState]>;
     children?: Snippet<[state: ItemState]>;
   }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {comboboxContext, comboboxItemPropsContext} from './context.svelte.js';
 
-  let {children, item, persistFocus, ...props}: ComboboxItemProps = $props();
+  let {item, persistFocus, asChild, children, ...props}: ComboboxItemProps = $props();
 
   let combobox = comboboxContext.get();
   let itemProps = $derived({
@@ -26,6 +27,10 @@
   comboboxItemPropsContext.set(() => itemProps);
 </script>
 
-<div {...attrs}>
-  {@render children?.(state)}
-</div>
+{#if asChild}
+  {@render asChild(attrs, state)}
+{:else}
+  <div {...attrs}>
+    {@render children?.(state)}
+  </div>
+{/if}

package/dist/combobox/label.svelte

@@ -1,20 +1,27 @@
 <script lang="ts" module>
   import type {HtmlProps} from '../types.js';
+  import type {Snippet} from 'svelte';
 
-  export interface ComboboxLabelProps extends HtmlProps<'label'> {}
+  export interface ComboboxLabelProps extends HtmlProps<'label'> {
+    asChild?: Snippet<[attrs: Omit<HtmlProps<'label'>, 'children'>]>;
+  }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {comboboxContext} from './context.svelte.js';
 
-  let {children, ...props}: ComboboxLabelProps = $props();
+  let {asChild, children, ...props}: ComboboxLabelProps = $props();
 
   let combobox = comboboxContext.get();
 
   let attrs = $derived(mergeProps(props, combobox.getLabelProps()));
 </script>
 
-<label {...attrs}>
-  {@render children?.()}
-</label>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <label {...attrs}>
+    {@render children?.()}
+  </label>
+{/if}

package/dist/combobox/list.svelte

@@ -1,20 +1,27 @@
 <script lang="ts" module>
-  import type {HtmlProps} from '../types.js';
+  import type {GenericHtmlProps, HtmlProps} from '../types.js';
+  import type {Snippet} from 'svelte';
 
-  export interface ComboboxListProps extends HtmlProps<'div'> {}
+  export interface ComboboxListProps extends HtmlProps<'div'> {
+    asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>]>;
+  }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {comboboxContext} from './context.svelte.js';
 
-  let {children, ...props}: ComboboxListProps = $props();
+  let {asChild, children, ...props}: ComboboxListProps = $props();
 
   let combobox = comboboxContext.get();
 
   let attrs = $derived(mergeProps(props, combobox.getListProps()));
 </script>
 
-<div {...attrs}>
-  {@render children?.()}
-</div>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <div {...attrs}>
+    {@render children?.()}
+  </div>
+{/if}

package/dist/combobox/positioner.svelte

@@ -1,20 +1,27 @@
 <script lang="ts" module>
-  import type {HtmlProps} from '../types.js';
+  import type {GenericHtmlProps, HtmlProps} from '../types.js';
+  import type {Snippet} from 'svelte';
 
-  export interface ComboboxPositionerProps extends HtmlProps<'div'> {}
+  export interface ComboboxPositionerProps extends HtmlProps<'div'> {
+    asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>]>;
+  }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {comboboxContext} from './context.svelte.js';
 
-  let {children, ...props}: ComboboxPositionerProps = $props();
+  let {asChild, children, ...props}: ComboboxPositionerProps = $props();
 
   let combobox = comboboxContext.get();
 
   let attrs = $derived(mergeProps(props, combobox.getPositionerProps()));
 </script>
 
-<div {...attrs}>
-  {@render children?.()}
-</div>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <div {...attrs}>
+    {@render children?.()}
+  </div>
+{/if}

package/dist/combobox/root.svelte

@@ -1,16 +1,17 @@
 <script lang="ts" module>
-  import type {Assign, HtmlProps} from '../types.js';
+  import type {Assign, GenericHtmlProps, HtmlProps} from '../types.js';
   import type {Snippet} from 'svelte';
   import type {CreateComboboxProps, CreateComboboxReturn} from './create-combobox.svelte.js';
 
   export interface ComboboxProps<T>
     extends Assign<Omit<HtmlProps<'div'>, 'children'>, CreateComboboxProps<T>> {
+    asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>, combobox: CreateComboboxReturn]>;
     children?: Snippet<[combobox: CreateComboboxReturn]>;
   }
 </script>
 
 <script lang="ts" generics="T">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {comboboxContext} from './context.svelte.js';
   import {createCombobox} from './create-combobox.svelte.js';
 
@@ -56,6 +57,7 @@
     onPointerDownOutside,
     getSelectionValue,
     scrollToIndexFn,
+    asChild,
     children,
     ...props
   }: ComboboxProps<T> = $props();
@@ -109,6 +111,10 @@
   comboboxContext.set(combobox);
 </script>
 
-<div {...attrs}>
-  {@render children?.(combobox)}
-</div>
+{#if asChild}
+  {@render asChild(attrs, combobox)}
+{:else}
+  <div {...attrs}>
+    {@render children?.(combobox)}
+  </div>
+{/if}

package/dist/combobox/trigger.svelte

@@ -1,20 +1,27 @@
 <script lang="ts" module>
   import type {HtmlProps} from '../types.js';
+  import type {Snippet} from 'svelte';
 
-  export interface ComboboxTriggerProps extends HtmlProps<'button'> {}
+  export interface ComboboxTriggerProps extends HtmlProps<'button'> {
+    asChild?: Snippet<[attrs: Omit<HtmlProps<'button'>, 'children'>]>;
+  }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {comboboxContext} from './context.svelte.js';
 
-  let {children, ...props}: ComboboxTriggerProps = $props();
+  let {asChild, children, ...props}: ComboboxTriggerProps = $props();
 
   let combobox = comboboxContext.get();
 
   let attrs = $derived(mergeProps(props, combobox.getTriggerProps()));
 </script>
 
-<button type="button" {...attrs}>
-  {@render children?.()}
-</button>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <button type="button" {...attrs}>
+    {@render children?.()}
+  </button>
+{/if}

package/dist/date-picker/clear-trigger.svelte

@@ -1,20 +1,27 @@
 <script lang="ts" module>
   import type {HtmlProps} from '../types.js';
+  import type {Snippet} from 'svelte';
 
-  export interface DatePickerClearTriggerProps extends HtmlProps<'button'> {}
+  export interface DatePickerClearTriggerProps extends HtmlProps<'button'> {
+    asChild?: Snippet<[attrs: Omit<HtmlProps<'button'>, 'children'>]>;
+  }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {datePickerContext} from './context.svelte.js';
 
-  let {children, ...props}: DatePickerClearTriggerProps = $props();
+  let {asChild, children, ...props}: DatePickerClearTriggerProps = $props();
 
   let datePicker = datePickerContext.get();
 
   let attrs = $derived(mergeProps(props, datePicker.getClearTriggerProps()));
 </script>
 
-<button type="button" {...attrs}>
-  {@render children?.()}
-</button>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <button type="button" {...attrs}>
+    {@render children?.()}
+  </button>
+{/if}

package/dist/date-picker/content.svelte

@@ -1,20 +1,27 @@
 <script lang="ts" module>
-  import type {HtmlProps} from '../types.js';
+  import type {GenericHtmlProps, HtmlProps} from '../types.js';
+  import type {Snippet} from 'svelte';
 
-  export interface DatePickerContentProps extends HtmlProps<'div'> {}
+  export interface DatePickerContentProps extends HtmlProps<'div'> {
+    asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>]>;
+  }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {datePickerContext} from './context.svelte.js';
 
-  let {children, ...props}: DatePickerContentProps = $props();
+  let {asChild, children, ...props}: DatePickerContentProps = $props();
 
   let datePicker = datePickerContext.get();
 
   let attrs = $derived(mergeProps(props, datePicker.getContentProps()));
 </script>
 
-<div {...attrs}>
-  {@render children?.()}
-</div>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <div {...attrs}>
+    {@render children?.()}
+  </div>
+{/if}

package/dist/date-picker/control.svelte

@@ -1,20 +1,27 @@
 <script lang="ts" module>
-  import type {HtmlProps} from '../types.js';
+  import type {GenericHtmlProps, HtmlProps} from '../types.js';
+  import type {Snippet} from 'svelte';
 
-  export interface DatePickerControlProps extends HtmlProps<'div'> {}
+  export interface DatePickerControlProps extends HtmlProps<'div'> {
+    asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>]>;
+  }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {datePickerContext} from './context.svelte.js';
 
-  let {children, ...props}: DatePickerControlProps = $props();
+  let {asChild, children, ...props}: DatePickerControlProps = $props();
 
   let datePicker = datePickerContext.get();
 
   let attrs = $derived(mergeProps(props, datePicker.getControlProps()));
 </script>
 
-<div {...attrs}>
-  {@render children?.()}
-</div>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <div {...attrs}>
+    {@render children?.()}
+  </div>
+{/if}

package/dist/date-picker/create-date-picker.svelte.d.ts

@@ -1,3 +1,4 @@
+import type { GenericHtmlProps } from '../types.js';
 import * as datePicker from '@zag-js/date-picker';
 type Omitted = 'id' | 'dir' | 'min' | 'max' | 'value' | 'focusedValue' | 'getRootNode' | 'open.controlled';
 export interface CreateDatePickerProps extends Omit<datePicker.Context, Omitted> {
@@ -9,6 +10,7 @@ export interface CreateDatePickerProps extends Omit<datePicker.Context, Omitted>
     defaultOpen?: boolean;
 }
 export interface CreateDatePickerReturn extends datePicker.Api {
+    getViewProps(props: datePicker.ViewProps): GenericHtmlProps;
 }
 export declare function createDatePicker(props: CreateDatePickerProps): CreateDatePickerReturn;
 export {};

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

@@ -19,6 +19,16 @@ export function createDatePicker(props) {
         locale: props.locale ?? locale?.locale,
         getRootNode: environment?.getRootNode,
     }));
-    const api = $derived(reflect(() => datePicker.connect(state, send, normalizeProps)));
+    const api = $derived(reflect(() => {
+        const o = datePicker.connect(state, send, normalizeProps);
+        return {
+            ...o,
+            getViewProps(props) {
+                return {
+                    hidden: o.view !== props.view,
+                };
+            },
+        };
+    }));
     return api;
 }

package/dist/date-picker/date-picker.d.ts

@@ -23,6 +23,7 @@ export { default as TableRow } from './table-row.svelte';
 export { default as Table } from './table.svelte';
 export { default as Trigger } from './trigger.svelte';
 export { default as ViewControl } from './view-control.svelte';
+export { default as ViewTrigger } from './view-trigger.svelte';
 export { default as View } from './view.svelte';
 export { default as YearSelect } from './year-select.svelte';
 export { default as YearTableCellTrigger } from './year-table-cell-trigger.svelte';

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

@@ -23,6 +23,7 @@ export { default as TableRow } from './table-row.svelte';
 export { default as Table } from './table.svelte';
 export { default as Trigger } from './trigger.svelte';
 export { default as ViewControl } from './view-control.svelte';
+export { default as ViewTrigger } from './view-trigger.svelte';
 export { default as View } from './view.svelte';
 export { default as YearSelect } from './year-select.svelte';
 export { default as YearTableCellTrigger } from './year-table-cell-trigger.svelte';

package/dist/date-picker/day-table-cell-trigger.svelte

@@ -1,14 +1,17 @@
 <script lang="ts" module>
   import type {HtmlProps} from '../types.js';
+  import type {Snippet} from 'svelte';
 
-  export interface DatePickerDayTableCellTriggerProps extends HtmlProps<'button'> {}
+  export interface DatePickerDayTableCellTriggerProps extends HtmlProps<'button'> {
+    asChild?: Snippet<[attrs: Omit<HtmlProps<'button'>, 'children'>]>;
+  }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {datePickerContext, datePickerDayTableCellPropsContext} from './context.svelte.js';
 
-  let {children, ...props}: DatePickerDayTableCellTriggerProps = $props();
+  let {asChild, children, ...props}: DatePickerDayTableCellTriggerProps = $props();
 
   let datePicker = datePickerContext.get();
   let tableCellProps = datePickerDayTableCellPropsContext.get();
@@ -16,6 +19,10 @@
   let attrs = $derived(mergeProps(props, datePicker.getDayTableCellTriggerProps(tableCellProps)));
 </script>
 
-<button type="button" {...attrs}>
-  {@render children?.()}
-</button>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <button type="button" {...attrs}>
+    {@render children?.()}
+  </button>
+{/if}

package/dist/date-picker/day-table-cell.svelte

@@ -1,26 +1,21 @@
 <script lang="ts" module>
-  import type {Assign, HtmlProps} from '../types.js';
+  import type {Assign, GenericHtmlProps, HtmlProps} from '../types.js';
   import type {DayTableCellProps, DayTableCellState} from '@zag-js/date-picker';
   import type {Snippet} from 'svelte';
 
   export interface DatePickerDayTableCellProps
     extends Assign<Omit<HtmlProps<'div'>, 'children'>, DayTableCellProps> {
+    asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>, state: DayTableCellState]>;
     children?: Snippet<[state: DayTableCellState]>;
   }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {datePickerContext, datePickerDayTableCellPropsContext} from './context.svelte.js';
 
-  let {
-    /**/
-    value,
-    disabled,
-    visibleRange,
-    children,
-    ...props
-  }: DatePickerDayTableCellProps = $props();
+  let {value, disabled, visibleRange, asChild, children, ...props}: DatePickerDayTableCellProps =
+    $props();
 
   let datePicker = datePickerContext.get();
   let tableCellProps: DayTableCellProps = $derived({
@@ -35,6 +30,10 @@
   datePickerDayTableCellPropsContext.set(() => tableCellProps);
 </script>
 
-<div {...attrs}>
-  {@render children?.(state)}
-</div>
+{#if asChild}
+  {@render asChild(attrs, state)}
+{:else}
+  <div {...attrs}>
+    {@render children?.(state)}
+  </div>
+{/if}

package/dist/date-picker/index.d.ts

@@ -22,6 +22,7 @@ export type { DatePickerTableRowProps } from './table-row.svelte';
 export type { DatePickerTableProps } from './table.svelte';
 export type { DatePickerTriggerProps } from './trigger.svelte';
 export type { DatePickerViewControlProps } from './view-control.svelte';
+export type { DatePickerViewTriggerProps } from './view-trigger.svelte';
 export type { DatePickerViewProps } from './view.svelte';
 export type { DatePickerYearSelectProps } from './year-select.svelte';
 export type { DatePickerYearTableCellTriggerProps } from './year-table-cell-trigger.svelte';

package/dist/date-picker/input.svelte

@@ -1,19 +1,26 @@
 <script lang="ts" module>
   import type {Assign, HtmlProps} from '../types.js';
   import type {InputProps} from '@zag-js/date-picker';
+  import type {Snippet} from 'svelte';
 
-  export interface DatePickerInputProps extends Assign<HtmlProps<'input'>, InputProps> {}
+  export interface DatePickerInputProps extends Assign<HtmlProps<'input'>, InputProps> {
+    asChild?: Snippet<[attrs: Omit<HtmlProps<'input'>, 'children'>]>;
+  }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {datePickerContext} from './context.svelte.js';
 
-  let {index, children, ...props}: DatePickerInputProps = $props();
+  let {index, asChild, children, ...props}: DatePickerInputProps = $props();
 
   let datePicker = datePickerContext.get();
 
   let attrs = $derived(mergeProps(props, datePicker.getInputProps({index})));
 </script>
 
-<input {...attrs} />
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <input {...attrs} />
+{/if}

package/dist/date-picker/label.svelte

@@ -1,21 +1,28 @@
 <script lang="ts" module>
   import type {Assign, HtmlProps} from '../types.js';
   import type {LabelProps} from '@zag-js/date-picker';
+  import type {Snippet} from 'svelte';
 
-  export interface DatePickerLabelProps extends Assign<HtmlProps<'label'>, LabelProps> {}
+  export interface DatePickerLabelProps extends Assign<HtmlProps<'label'>, LabelProps> {
+    asChild?: Snippet<[attrs: Omit<HtmlProps<'label'>, 'children'>]>;
+  }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {datePickerContext} from './context.svelte.js';
 
-  let {index, children, ...props}: DatePickerLabelProps = $props();
+  let {index, asChild, children, ...props}: DatePickerLabelProps = $props();
 
   let datePicker = datePickerContext.get();
 
   let attrs = $derived(mergeProps(props, datePicker.getLabelProps({index})));
 </script>
 
-<label {...attrs}>
-  {@render children?.()}
-</label>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <label {...attrs}>
+    {@render children?.()}
+  </label>
+{/if}