ui-ingredients 0.0.24 → 0.0.26

package/dist/slider/thumb.svelte

@@ -1,15 +1,18 @@
 <script lang="ts" module>
-  import type {Assign, HtmlProps} from '../types.js';
+  import type {Assign, GenericHtmlProps, HtmlProps} from '../types.js';
   import type {ThumbProps} from '@zag-js/slider';
+  import type {Snippet} from 'svelte';
 
-  export interface SliderThumbProps extends Assign<HtmlProps<'div'>, ThumbProps> {}
+  export interface SliderThumbProps extends Assign<HtmlProps<'div'>, ThumbProps> {
+    asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>]>;
+  }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {sliderContext, sliderThumbPropsContext} from './context.svelte.js';
 
-  let {name, index, children, ...props}: SliderThumbProps = $props();
+  let {name, index, asChild, children, ...props}: SliderThumbProps = $props();
 
   let slider = sliderContext.get();
   let thumbProps = $derived({
@@ -22,6 +25,10 @@
   sliderThumbPropsContext.set(() => thumbProps);
 </script>
 
-<div {...attrs}>
-  {@render children?.()}
-</div>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <div {...attrs}>
+    {@render children?.()}
+  </div>
+{/if}

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

package/dist/slider/value-text.svelte

@@ -1,24 +1,31 @@
 <script lang="ts" module>
-  import type {HtmlProps} from '../types.js';
+  import type {GenericHtmlProps, HtmlProps} from '../types.js';
+  import type {Snippet} from 'svelte';
 
-  export interface SliderValueTextProps extends HtmlProps<'span'> {}
+  export interface SliderValueTextProps 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 {sliderContext} from './context.svelte.js';
 
-  let {children, ...props}: SliderValueTextProps = $props();
+  let {asChild, children, ...props}: SliderValueTextProps = $props();
 
   let slider = sliderContext.get();
 
   let attrs = $derived(mergeProps(props, slider.getValueTextProps()));
 </script>
 
-<span {...attrs}>
-  {#if children}
-    {@render children()}
-  {:else}
-    {slider.value.join(', ')}
-  {/if}
-</span>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <div {...attrs}>
+    {#if children}
+      {@render children()}
+    {:else}
+      {slider.value.join(', ')}
+    {/if}
+  </div>
+{/if}

package/dist/splitter/context.svelte.d.ts

@@ -0,0 +1,3 @@
+import { Context } from '../utils.svelte.js';
+import type { CreateSplitterReturn } from './create-splitter.svelte.js';
+export declare const splitterContext: Context<CreateSplitterReturn>;

package/dist/splitter/context.svelte.js

@@ -0,0 +1,2 @@
+import { Context } from '../utils.svelte.js';
+export const splitterContext = new Context('Splitter');

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

@@ -0,0 +1,7 @@
+import * as splitter from '@zag-js/splitter';
+export interface CreateSplitterProps extends Omit<splitter.Context, 'id' | 'dir' | 'getRootNode'> {
+    id?: string | null;
+}
+export interface CreateSplitterReturn extends splitter.Api {
+}
+export declare function createSplitter(props: CreateSplitterProps): CreateSplitterReturn;

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

@@ -0,0 +1,17 @@
+import { getEnvironmentContext } from '../environment-provider/context.svelte.js';
+import { getLocaleContext } from '../locale-provider/context.svelte.js';
+import { createUniqueId } from '../utils.svelte.js';
+import * as splitter from '@zag-js/splitter';
+import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
+export function createSplitter(props) {
+    const locale = getLocaleContext();
+    const environment = getEnvironmentContext();
+    const [state, send] = useMachine(splitter.machine({
+        ...props,
+        id: props.id ?? createUniqueId(),
+        dir: locale?.dir,
+        getRootNode: environment?.getRootNode,
+    }));
+    const api = $derived(reflect(() => splitter.connect(state, send, normalizeProps)));
+    return api;
+}

package/dist/splitter/index.d.ts

@@ -0,0 +1,4 @@
+export * as Splitter from './splitter.js';
+export type { SplitterPanelProps } from './panel.svelte';
+export type { SplitterResizeTriggerProps } from './resize-trigger.svelte';
+export type { SplitterProps } from './root.svelte';

package/dist/splitter/index.js

@@ -0,0 +1 @@
+export * as Splitter from './splitter.js';

package/dist/splitter/panel.svelte

@@ -0,0 +1,36 @@
+<script lang="ts" module>
+  import type {Assign, GenericHtmlProps, HtmlProps} from '../types.js';
+  import type {PanelProps} from '@zag-js/splitter';
+  import type {Snippet} from 'svelte';
+
+  export interface SplitterPanelProps extends Assign<HtmlProps<'div'>, PanelProps> {
+    asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>]>;
+  }
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../utils.svelte.js';
+  import {splitterContext} from './context.svelte.js';
+
+  let {id, snapSize, asChild, children, ...props}: SplitterPanelProps = $props();
+
+  let splitter = splitterContext.get();
+
+  let attrs = $derived(
+    mergeProps(
+      props,
+      splitter.getPanelProps({
+        id,
+        snapSize,
+      }),
+    ),
+  );
+</script>
+
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <div {...attrs}>
+    {@render children?.()}
+  </div>
+{/if}

package/dist/splitter/panel.svelte.d.ts

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Panel: $$__sveltets_2_IsomorphicComponent<SplitterPanelProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type Panel = InstanceType<typeof Panel>;
+export default Panel;

package/dist/splitter/resize-trigger.svelte

@@ -0,0 +1,46 @@
+<script lang="ts" module>
+  import type {Assign, GenericHtmlProps, HtmlProps} from '../types.js';
+  import type {ResizeTriggerProps} from '@zag-js/splitter';
+
+  /* Currently not exported in zag */
+  interface ResizeTriggerState {
+    min: number | undefined;
+    max: number | undefined;
+    value: number;
+    focused: boolean;
+    disabled: boolean;
+    panelIds: string[];
+  }
+
+  export interface SplitterResizeTriggerProps
+    extends Assign<Omit<HtmlProps<'div'>, 'children'>, ResizeTriggerProps> {
+    asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>, state: ResizeTriggerState]>;
+    children?: Snippet<[state: ResizeTriggerState]>;
+  }
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../utils.svelte.js';
+  import type {Snippet} from 'svelte';
+  import {splitterContext} from './context.svelte.js';
+
+  let {id, step, disabled, asChild, children, ...props}: SplitterResizeTriggerProps = $props();
+
+  let splitter = splitterContext.get();
+  let resizeTriggerProps: ResizeTriggerProps = $derived({
+    id,
+    step,
+    disabled,
+  });
+
+  let attrs = $derived(mergeProps(props, splitter.getResizeTriggerProps(resizeTriggerProps)));
+  let state = $derived(splitter.getResizeTriggerState(resizeTriggerProps));
+</script>
+
+{#if asChild}
+  {@render asChild(attrs, state)}
+{:else}
+  <div {...attrs}>
+    {@render children?.(state)}
+  </div>
+{/if}

package/dist/splitter/resize-trigger.svelte.d.ts

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const ResizeTrigger: $$__sveltets_2_IsomorphicComponent<SplitterResizeTriggerProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type ResizeTrigger = InstanceType<typeof ResizeTrigger>;
+export default ResizeTrigger;

package/dist/splitter/root.svelte

@@ -0,0 +1,50 @@
+<script lang="ts" module>
+  import type {Assign, GenericHtmlProps, HtmlProps} from '../types.js';
+  import type {Snippet} from 'svelte';
+  import type {CreateSplitterProps, CreateSplitterReturn} from './create-splitter.svelte.js';
+
+  export interface SplitterProps
+    extends Assign<Omit<HtmlProps<'div'>, 'children'>, CreateSplitterProps> {
+    asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>, splitter: CreateSplitterReturn]>;
+    children?: Snippet<[splitter: CreateSplitterReturn]>;
+  }
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../utils.svelte.js';
+  import {splitterContext} from './context.svelte.js';
+  import {createSplitter} from './create-splitter.svelte.js';
+
+  let {
+    id,
+    ids,
+    size,
+    orientation,
+    onSizeChange,
+    onSizeChangeEnd,
+    asChild,
+    children,
+    ...props
+  }: SplitterProps = $props();
+
+  let splitter = createSplitter({
+    id,
+    ids,
+    size,
+    orientation,
+    onSizeChange,
+    onSizeChangeEnd,
+  });
+
+  let attrs = $derived(mergeProps(props, splitter.getRootProps()));
+
+  splitterContext.set(splitter);
+</script>
+
+{#if asChild}
+  {@render asChild(attrs, splitter)}
+{:else}
+  <div {...attrs}>
+    {@render children?.(splitter)}
+  </div>
+{/if}

package/dist/splitter/root.svelte.d.ts

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Root: $$__sveltets_2_IsomorphicComponent<SplitterProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type Root = InstanceType<typeof Root>;
+export default Root;

package/dist/splitter/splitter.d.ts

@@ -0,0 +1,4 @@
+export { anatomy } from '@zag-js/splitter';
+export { default as Panel } from './panel.svelte';
+export { default as ResizeTrigger } from './resize-trigger.svelte';
+export { default as Root } from './root.svelte';

package/dist/splitter/splitter.js

@@ -0,0 +1,4 @@
+export { anatomy } from '@zag-js/splitter';
+export { default as Panel } from './panel.svelte';
+export { default as ResizeTrigger } from './resize-trigger.svelte';
+export { default as Root } from './root.svelte';

package/dist/steps/completed-content.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 StepsCompletedContentProps extends HtmlProps<'div'> {}
+  export interface StepsCompletedContentProps 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 {stepsContext} from './context.svelte.js';
 
-  let {children, ...props}: StepsCompletedContentProps = $props();
+  let {asChild, children, ...props}: StepsCompletedContentProps = $props();
 
   let steps = stepsContext.get();
 
@@ -22,6 +25,10 @@
   );
 </script>
 
-<div {...attrs}>
-  {@render children?.()}
-</div>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <div {...attrs}>
+    {@render children?.()}
+  </div>
+{/if}

package/dist/steps/content.svelte

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

package/dist/steps/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 StepsIndicatorProps extends HtmlProps<'div'> {}
+  export interface StepsIndicatorProps 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 {stepsContext, stepsItemPropsContext} from './context.svelte.js';
 
-  let {children, ...props}: StepsIndicatorProps = $props();
+  let {asChild, children, ...props}: StepsIndicatorProps = $props();
 
   let steps = stepsContext.get();
   let itemProps = stepsItemPropsContext.get();
@@ -16,6 +19,10 @@
   let attrs = $derived(mergeProps(props, steps.getIndicatorProps(itemProps)));
 </script>
 
-<div {...attrs}>
-  {@render children?.()}
-</div>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <div {...attrs}>
+    {@render children?.()}
+  </div>
+{/if}

package/dist/steps/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/steps';
   import type {Snippet} from 'svelte';
 
   export interface StepsItemProps 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 {stepsContext, stepsItemPropsContext} from './context.svelte.js';
 
-  let {index, children, ...props}: StepsItemProps = $props();
+  let {index, asChild, children, ...props}: StepsItemProps = $props();
 
   let steps = stepsContext.get();
   let itemProps = $derived({
@@ -25,6 +26,10 @@
   stepsItemPropsContext.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/steps/list.svelte

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

package/dist/steps/next-trigger.svelte

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

package/dist/steps/prev-trigger.svelte

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

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