ui-ingredients 0.0.24 → 0.0.26

package/dist/index.d.ts

@@ -4,6 +4,7 @@ export * from './carousel/index.js';
 export * from './checkbox/index.js';
 export * from './clipboard/index.js';
 export * from './collapsible/index.js';
+export * from './color-picker/index.js';
 export * from './combobox/index.js';
 export * from './date-picker/index.js';
 export * from './dialog/index.js';
@@ -27,12 +28,15 @@ export * from './segment-group/index.js';
 export * from './select/index.js';
 export * from './signature-pad/index.js';
 export * from './slider/index.js';
+export * from './splitter/index.js';
 export * from './steps/index.js';
 export * from './switch/index.js';
 export * from './tabs/index.js';
 export * from './tags-input/index.js';
+export * from './time-picker/index.js';
 export * from './timer/index.js';
 export * from './toast/index.js';
 export * from './toggle-group/index.js';
 export * from './tooltip/index.js';
 export * from './tree-view/index.js';
+export { mergeProps } from './utils.svelte.js';

package/dist/index.js

@@ -4,6 +4,7 @@ export * from './carousel/index.js';
 export * from './checkbox/index.js';
 export * from './clipboard/index.js';
 export * from './collapsible/index.js';
+export * from './color-picker/index.js';
 export * from './combobox/index.js';
 export * from './date-picker/index.js';
 export * from './dialog/index.js';
@@ -27,12 +28,15 @@ export * from './segment-group/index.js';
 export * from './select/index.js';
 export * from './signature-pad/index.js';
 export * from './slider/index.js';
+export * from './splitter/index.js';
 export * from './steps/index.js';
 export * from './switch/index.js';
 export * from './tabs/index.js';
 export * from './tags-input/index.js';
+export * from './time-picker/index.js';
 export * from './timer/index.js';
 export * from './toast/index.js';
 export * from './toggle-group/index.js';
 export * from './tooltip/index.js';
 export * from './tree-view/index.js';
+export { mergeProps } from './utils.svelte.js';

package/dist/menu/arrow-tip.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 MenuArrowTipProps extends HtmlProps<'div'> {}
+  export interface MenuArrowTipProps 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 {menuContext} from './context.svelte.js';
 
-  let {children, ...props}: MenuArrowTipProps = $props();
+  let {asChild, children, ...props}: MenuArrowTipProps = $props();
 
   let menu = menuContext.get();
 
   let attrs = $derived(mergeProps(props, menu.getArrowTipProps()));
 </script>
 
-<div {...attrs}>
-  {@render children?.()}
-</div>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <div {...attrs}>
+    {@render children?.()}
+  </div>
+{/if}

package/dist/menu/arrow.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 MenuArrowProps extends HtmlProps<'div'> {}
+  export interface MenuArrowProps 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 {menuContext} from './context.svelte.js';
 
-  let {children, ...props}: MenuArrowProps = $props();
+  let {asChild, children, ...props}: MenuArrowProps = $props();
 
   let menu = menuContext.get();
 
   let attrs = $derived(mergeProps(props, menu.getArrowProps()));
 </script>
 
-<div {...attrs}>
-  {@render children?.()}
-</div>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <div {...attrs}>
+    {@render children?.()}
+  </div>
+{/if}

package/dist/menu/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 MenuContentProps extends HtmlProps<'div'> {}
+  export interface MenuContentProps 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 {menuContext} from './context.svelte.js';
 
-  let {children, ...props}: MenuContentProps = $props();
+  let {asChild, children, ...props}: MenuContentProps = $props();
 
   let context = menuContext.get();
 
   let attrs = $derived(mergeProps(props, context.getContentProps()));
 </script>
 
-<div {...attrs}>
-  {@render children?.()}
-</div>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <div {...attrs}>
+    {@render children?.()}
+  </div>
+{/if}

package/dist/menu/context-trigger.svelte

@@ -1,20 +1,27 @@
 <script lang="ts" module>
   import type {HtmlProps} from '../types.js';
+  import type {Snippet} from 'svelte';
 
-  export interface MenuContextTriggerProps extends HtmlProps<'button'> {}
+  export interface MenuContextTriggerProps 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 {menuContext} from './context.svelte.js';
 
-  let {children, ...props}: MenuContextTriggerProps = $props();
+  let {asChild, children, ...props}: MenuContextTriggerProps = $props();
 
   let menu = menuContext.get();
 
   let attrs = $derived(mergeProps(props, menu.getContextTriggerProps()));
 </script>
 
-<button type="button" {...attrs}>
-  {@render children?.()}
-</button>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <button type="button" {...attrs}>
+    {@render children?.()}
+  </button>
+{/if}

package/dist/menu/indicator.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 MenuIndicatorProps extends HtmlProps<'span'> {}
+  export interface MenuIndicatorProps 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 {menuContext} from './context.svelte.js';
 
-  let {children, ...props}: MenuIndicatorProps = $props();
+  let {asChild, children, ...props}: MenuIndicatorProps = $props();
 
   let menu = menuContext.get();
 
   let attrs = $derived(mergeProps(props, menu.getIndicatorProps()));
 </script>
 
-<span {...attrs}>
-  {@render children?.()}
-</span>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <div {...attrs}>
+    {@render children?.()}
+  </div>
+{/if}

package/dist/menu/item-group-label.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 MenuItemGroupLabelProps extends HtmlProps<'span'> {}
+  export interface MenuItemGroupLabelProps 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 {menuContext, menuItemGroupPropsContext} from './context.svelte.js';
 
-  let {children, ...props}: MenuItemGroupLabelProps = $props();
+  let {asChild, children, ...props}: MenuItemGroupLabelProps = $props();
 
   let menu = menuContext.get();
   let itemGroupProps = menuItemGroupPropsContext.get();
@@ -23,6 +26,10 @@
   );
 </script>
 
-<span {...attrs}>
-  {@render children?.()}
-</span>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <div {...attrs}>
+    {@render children?.()}
+  </div>
+{/if}

package/dist/menu/item-group.svelte

@@ -1,17 +1,19 @@
 <script lang="ts" module>
-  import type {Assign, HtmlProps} from '../types.js';
+  import type {Snippet} from 'svelte';
+
+  import type {Assign, GenericHtmlProps, HtmlProps} from '../types.js';
   import type {ItemGroupProps} from '@zag-js/menu';
 
-  export interface MenuItemGroupProps
-    extends Assign<HtmlProps<'div'>, Omit<ItemGroupProps, 'id'>> {}
+  export interface MenuItemGroupProps extends Assign<HtmlProps<'div'>, Omit<ItemGroupProps, 'id'>> {
+    asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>]>;
+  }
 </script>
 
 <script lang="ts">
-  import {createUniqueId} from '../utils.svelte.js';
-  import {mergeProps} from '@zag-js/svelte';
+  import {createUniqueId, mergeProps} from '../utils.svelte.js';
   import {menuContext, menuItemGroupPropsContext} from './context.svelte.js';
 
-  let {id, children, ...props}: MenuItemGroupProps = $props();
+  let {id, asChild, children, ...props}: MenuItemGroupProps = $props();
 
   let menu = menuContext.get();
 
@@ -26,6 +28,10 @@
   menuItemGroupPropsContext.set(() => itemGroupProps);
 </script>
 
-<div {...attrs}>
-  {@render children?.()}
-</div>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <div {...attrs}>
+    {@render children?.()}
+  </div>
+{/if}

package/dist/menu/item.svelte

@@ -9,7 +9,7 @@
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {menuContext} from './context.svelte.js';
 
   let {value, valueText, disabled, closeOnSelect, children, ...props}: MenuItemProps = $props();

package/dist/menu/option-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 MenuOptionItemIndicatorProps extends HtmlProps<'span'> {}
+  export interface MenuOptionItemIndicatorProps 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 {menuContext, menuOptionItemPropsContext} from './context.svelte.js';
 
-  let {children, ...props}: MenuOptionItemIndicatorProps = $props();
+  let {asChild, children, ...props}: MenuOptionItemIndicatorProps = $props();
 
   let menu = menuContext.get();
   let optionItemProps = menuOptionItemPropsContext.get();
@@ -16,6 +19,10 @@
   let attrs = $derived(mergeProps(props, menu.getItemIndicatorProps(optionItemProps)));
 </script>
 
-<span {...attrs}>
-  {@render children?.()}
-</span>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <div {...attrs}>
+    {@render children?.()}
+  </div>
+{/if}

package/dist/menu/option-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 MenuOptionItemTextProps extends HtmlProps<'span'> {}
+  export interface MenuOptionItemTextProps 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 {menuContext, menuOptionItemPropsContext} from './context.svelte.js';
 
-  let {children, ...props}: MenuOptionItemTextProps = $props();
+  let {asChild, children, ...props}: MenuOptionItemTextProps = $props();
 
   let menu = menuContext.get();
   let optionItemProps = menuOptionItemPropsContext.get();
@@ -16,10 +19,14 @@
   let attrs = $derived(mergeProps(props, menu.getItemTextProps(optionItemProps)));
 </script>
 
-<span {...attrs}>
-  {#if children}
-    {@render children()}
-  {:else}
-    {optionItemProps.valueText}
-  {/if}
-</span>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <div {...attrs}>
+    {#if children}
+      {@render children()}
+    {:else}
+      {optionItemProps.valueText}
+    {/if}
+  </div>
+{/if}

package/dist/menu/option-item.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 {OptionItemProps, OptionItemState} from '@zag-js/menu';
   import type {Snippet} from 'svelte';
 
   export interface MenuOptionItemProps
     extends Assign<Omit<HtmlProps<'div'>, 'children'>, OptionItemProps> {
+    asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>, state: OptionItemState]>;
     children?: Snippet<[state: OptionItemState]>;
   }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {menuContext, menuOptionItemPropsContext} from './context.svelte.js';
 
   let {
@@ -21,6 +22,7 @@
     valueText,
     closeOnSelect,
     onCheckedChange,
+    asChild,
     children,
     ...props
   }: MenuOptionItemProps = $props();
@@ -42,6 +44,10 @@
   menuOptionItemPropsContext.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/menu/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 MenuPositionerProps extends HtmlProps<'div'> {}
+  export interface MenuPositionerProps 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 {menuContext} from './context.svelte.js';
 
-  let {children, ...props}: MenuPositionerProps = $props();
+  let {asChild, children, ...props}: MenuPositionerProps = $props();
 
   let menu = menuContext.get();
 
   let attrs = $derived(mergeProps(props, menu.getPositionerProps()));
 </script>
 
-<div {...attrs}>
-  {@render children?.()}
-</div>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <div {...attrs}>
+    {@render children?.()}
+  </div>
+{/if}

package/dist/menu/separator.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 MenuSeparatorProps extends HtmlProps<'div'> {}
+  export interface MenuSeparatorProps 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 {menuContext} from './context.svelte.js';
 
-  let {children, ...props}: MenuSeparatorProps = $props();
+  let {asChild, children, ...props}: MenuSeparatorProps = $props();
 
   let menu = menuContext.get();
 
   let attrs = $derived(mergeProps(props, menu.getSeparatorProps()));
 </script>
 
-<div {...attrs}>
-  {@render children?.()}
-</div>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <div {...attrs}>
+    {@render children?.()}
+  </div>
+{/if}

package/dist/menu/trigger-item.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 MenuTriggerItemIndicatorProps extends HtmlProps<'button'> {}
+  export interface MenuTriggerItemIndicatorProps extends HtmlProps<'button'> {
+    asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>]>;
+  }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {menuContext} from './context.svelte.js';
 
-  let {children, ...props}: MenuTriggerItemIndicatorProps = $props();
+  let {asChild, children, ...props}: MenuTriggerItemIndicatorProps = $props();
 
   let menu = menuContext.get();
 
   let attrs = $derived(mergeProps(props, menu.getTriggerItemProps(menu)));
 </script>
 
-<button type="button" {...attrs}>
-  {@render children?.()}
-</button>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <button type="button" {...attrs}>
+    {@render children?.()}
+  </button>
+{/if}

package/dist/menu/trigger.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 MenuTriggerProps extends HtmlProps<'button'> {}
+  export interface MenuTriggerProps extends HtmlProps<'button'> {
+    asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>]>;
+  }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {menuContext} from './context.svelte.js';
 
-  let {children, ...props}: MenuTriggerProps = $props();
+  let {asChild, children, ...props}: MenuTriggerProps = $props();
 
   let menu = menuContext.get();
 
   let attrs = $derived(mergeProps(props, menu.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/number-input/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 NumberInputControlTriggerProps extends HtmlProps<'div'> {}
+  export interface NumberInputControlTriggerProps 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 {numberInputContext} from './context.svelte.js';
 
-  let {children, ...props}: NumberInputControlTriggerProps = $props();
+  let {asChild, children, ...props}: NumberInputControlTriggerProps = $props();
 
   let numberInput = numberInputContext.get();
 
   let attrs = $derived(mergeProps(props, numberInput.getControlProps()));
 </script>
 
-<div {...attrs}>
-  {@render children?.()}
-</div>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <div {...attrs}>
+    {@render children?.()}
+  </div>
+{/if}

package/dist/number-input/decrement-trigger.svelte

@@ -1,20 +1,27 @@
 <script lang="ts" module>
   import type {HtmlProps} from '../types.js';
+  import type {Snippet} from 'svelte';
 
-  export interface NumberInputDecrementTriggerProps extends HtmlProps<'button'> {}
+  export interface NumberInputDecrementTriggerProps 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 {numberInputContext} from './context.svelte.js';
 
-  let {children, ...props}: NumberInputDecrementTriggerProps = $props();
+  let {asChild, children, ...props}: NumberInputDecrementTriggerProps = $props();
 
   let numberInput = numberInputContext.get();
 
   let attrs = $derived(mergeProps(props, numberInput.getDecrementTriggerProps()));
 </script>
 
-<button type="button" {...attrs}>
-  {@render children?.()}
-</button>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <button type="button" {...attrs}>
+    {@render children?.()}
+  </button>
+{/if}