ui-ingredients 0.0.10 → 0.0.12

package/dist/slider/thumb.svelte

@@ -1,35 +1,38 @@
-<script lang="ts" context="module">
-  import type {Assign, SvelteHtmlProps} from '../types.js';
-  import type {ThumbProps} from '@zag-js/slider';
-
-  export interface SliderThumbProps
-    extends Assign<SvelteHtmlProps<'div'>, ThumbProps> {}
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
-  import {setSliderThumbContext, useSliderContext} from './context.svelte.js';
-
-  let {name, index, children, ...props}: SliderThumbProps = $props();
-
-  let context = useSliderContext();
-
-  let attrs = $derived(
-    mergeProps(
-      props,
-      context.getThumbProps({
-        name,
-        index,
-      }),
-    ),
-  );
-
-  setSliderThumbContext({
-    name,
-    index,
-  });
-</script>
-
-<div {...attrs}>
-  {@render children?.()}
-</div>
+<script lang="ts" context="module">
+  import type {Assign, HtmlIngredientProps} from '../types.js';
+  import type {ThumbProps} from '@zag-js/slider';
+
+  export interface SliderThumbProps
+    extends Assign<HtmlIngredientProps<'div'>, ThumbProps> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {
+    setSliderThumbPropsContext,
+    useSliderContext,
+  } from './context.svelte.js';
+
+  let {name, index, children, ...props}: SliderThumbProps = $props();
+
+  let context = useSliderContext();
+
+  let attrs = $derived(
+    mergeProps(
+      props,
+      context.getThumbProps({
+        name,
+        index,
+      }),
+    ),
+  );
+
+  setSliderThumbPropsContext({
+    name,
+    index,
+  });
+</script>
+
+<div {...attrs}>
+  {@render children?.()}
+</div>

package/dist/slider/thumb.svelte.d.ts

@@ -1,6 +1,6 @@
-import type { Assign, SvelteHtmlProps } from '../types.js';
+import type { Assign, HtmlIngredientProps } from '../types.js';
 import type { ThumbProps } from '@zag-js/slider';
-export interface SliderThumbProps extends Assign<SvelteHtmlProps<'div'>, ThumbProps> {
+export interface SliderThumbProps extends Assign<HtmlIngredientProps<'div'>, ThumbProps> {
 }
 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> & {

package/dist/slider/track.svelte

@@ -1,20 +1,20 @@
-<script lang="ts" context="module">
-  import type {SvelteHtmlProps} from '../types.js';
-
-  export interface SliderTrackProps extends SvelteHtmlProps<'div'> {}
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
-  import {useSliderContext} from './context.svelte.js';
-
-  let {children, ...props}: SliderTrackProps = $props();
-
-  let context = useSliderContext();
-
-  let attrs = $derived(mergeProps(props, context.getTrackProps()));
-</script>
-
-<div {...attrs}>
-  {@render children?.()}
-</div>
+<script lang="ts" context="module">
+  import type {HtmlIngredientProps} from '../types.js';
+
+  export interface SliderTrackProps extends HtmlIngredientProps<'div'> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {useSliderContext} from './context.svelte.js';
+
+  let {children, ...props}: SliderTrackProps = $props();
+
+  let context = useSliderContext();
+
+  let attrs = $derived(mergeProps(props, context.getTrackProps()));
+</script>
+
+<div {...attrs}>
+  {@render children?.()}
+</div>

package/dist/slider/track.svelte.d.ts

@@ -1,5 +1,5 @@
-import type { SvelteHtmlProps } from '../types.js';
-export interface SliderTrackProps extends SvelteHtmlProps<'div'> {
+import type { HtmlIngredientProps } from '../types.js';
+export interface SliderTrackProps extends HtmlIngredientProps<'div'> {
 }
 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> & {

package/dist/slider/value-text.svelte

@@ -1,24 +1,24 @@
-<script lang="ts" context="module">
-  import type {SvelteHtmlProps} from '../types.js';
-
-  export interface SliderValueTextProps extends SvelteHtmlProps<'span'> {}
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
-  import {useSliderContext} from './context.svelte.js';
-
-  let {children, ...props}: SliderValueTextProps = $props();
-
-  let context = useSliderContext();
-
-  let attrs = $derived(mergeProps(props, context.getValueTextProps()));
-</script>
-
-<span {...attrs}>
-  {#if children}
-    {@render children()}
-  {:else}
-    {context.value.join(', ')}
-  {/if}
-</span>
+<script lang="ts" context="module">
+  import type {HtmlIngredientProps} from '../types.js';
+
+  export interface SliderValueTextProps extends HtmlIngredientProps<'span'> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {useSliderContext} from './context.svelte.js';
+
+  let {children, ...props}: SliderValueTextProps = $props();
+
+  let context = useSliderContext();
+
+  let attrs = $derived(mergeProps(props, context.getValueTextProps()));
+</script>
+
+<span {...attrs}>
+  {#if children}
+    {@render children()}
+  {:else}
+    {context.value.join(', ')}
+  {/if}
+</span>

package/dist/slider/value-text.svelte.d.ts

@@ -1,5 +1,5 @@
-import type { SvelteHtmlProps } from '../types.js';
-export interface SliderValueTextProps extends SvelteHtmlProps<'span'> {
+import type { HtmlIngredientProps } from '../types.js';
+export interface SliderValueTextProps extends HtmlIngredientProps<'span'> {
 }
 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> & {

package/dist/steps/content.svelte

@@ -1,22 +1,22 @@
-<script lang="ts" context="module">
-  import type {Assign, SvelteHtmlProps} from '../types.js';
-  import type {ItemProps} from '@zag-js/steps';
-
-  export interface StepsContentProps
-    extends Assign<SvelteHtmlProps<'div'>, ItemProps> {}
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
-  import {useStepsContext} from './context.svelte.js';
-
-  let {index, children, ...props}: StepsContentProps = $props();
-
-  let context = useStepsContext();
-
-  let attrs = $derived(mergeProps(props, context.getContentProps({index})));
-</script>
-
-<div {...attrs}>
-  {@render children?.()}
-</div>
+<script lang="ts" context="module">
+  import type {Assign, HtmlIngredientProps} from '../types.js';
+  import type {ItemProps} from '@zag-js/steps';
+
+  export interface StepsContentProps
+    extends Assign<HtmlIngredientProps<'div'>, ItemProps> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {useStepsContext} from './context.svelte.js';
+
+  let {index, children, ...props}: StepsContentProps = $props();
+
+  let context = useStepsContext();
+
+  let attrs = $derived(mergeProps(props, context.getContentProps({index})));
+</script>
+
+<div {...attrs}>
+  {@render children?.()}
+</div>

package/dist/steps/content.svelte.d.ts

@@ -1,6 +1,6 @@
-import type { Assign, SvelteHtmlProps } from '../types.js';
+import type { Assign, HtmlIngredientProps } from '../types.js';
 import type { ItemProps } from '@zag-js/steps';
-export interface StepsContentProps extends Assign<SvelteHtmlProps<'div'>, ItemProps> {
+export interface StepsContentProps extends Assign<HtmlIngredientProps<'div'>, ItemProps> {
 }
 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> & {

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

@@ -6,5 +6,5 @@ export interface CreateStepsContextReturn extends ReturnType<typeof createStepsC
 export declare function createStepsContext(props: CreateStepsContextProps): any;
 export declare function setStepsContext(value: CreateStepsContextReturn): void;
 export declare function useStepsContext(): CreateStepsContextReturn;
-export declare function setStepsItemContext(value: steps.ItemProps): void;
-export declare function useStepsItemContext(): steps.ItemProps;
+export declare function setStepsItemPropsContext(value: steps.ItemProps): void;
+export declare function useStepsItemPropsContext(): steps.ItemProps;

package/dist/steps/context.svelte.js

@@ -12,9 +12,9 @@ export function setStepsContext(value) {
 export function useStepsContext() {
     return getContext('Steps');
 }
-export function setStepsItemContext(value) {
+export function setStepsItemPropsContext(value) {
     setContext('StepsItem', value);
 }
-export function useStepsItemContext() {
+export function useStepsItemPropsContext() {
     return getContext('StepsItem');
 }

package/dist/steps/index.d.ts

@@ -1,10 +1,12 @@
-export { default as Content, type StepsContentProps } from './content.svelte';
-export { default as Indicator, type StepsIndicatorProps, } from './indicator.svelte';
-export { default as Item, type StepsItemProps } from './item.svelte';
-export { default as List, type StepsListProps } from './list.svelte';
-export { default as NextTrigger, type StepsNextTriggerProps, } from './next-trigger.svelte';
-export { default as PrevTrigger, type StepsPrevTriggerProps, } from './prev-trigger.svelte';
-export { default as Progress, type StepsProgressProps } from './progress.svelte';
-export { default as Root, type StepsProps } from './root.svelte';
-export { default as Separator, type StepsSeparatorProps, } from './separator.svelte';
-export { default as Trigger, type StepsTriggerProps } from './trigger.svelte';
+export { anatomy as stepsAnatomy } from '@zag-js/steps';
+export type { StepsContentProps } from './content.svelte';
+export type { StepsIndicatorProps } from './indicator.svelte';
+export type { StepsItemProps } from './item.svelte';
+export type { StepsListProps } from './list.svelte';
+export type { StepsNextTriggerProps } from './next-trigger.svelte';
+export type { StepsPrevTriggerProps } from './prev-trigger.svelte';
+export type { StepsProgressProps } from './progress.svelte';
+export type { StepsProps } from './root.svelte';
+export type { StepsSeparatorProps } from './separator.svelte';
+export * as Steps from './steps.js';
+export type { StepsTriggerProps } from './trigger.svelte';

package/dist/steps/index.js

@@ -1,10 +1,2 @@
-export { default as Content } from './content.svelte';
-export { default as Indicator, } from './indicator.svelte';
-export { default as Item } from './item.svelte';
-export { default as List } from './list.svelte';
-export { default as NextTrigger, } from './next-trigger.svelte';
-export { default as PrevTrigger, } from './prev-trigger.svelte';
-export { default as Progress } from './progress.svelte';
-export { default as Root } from './root.svelte';
-export { default as Separator, } from './separator.svelte';
-export { default as Trigger } from './trigger.svelte';
+export { anatomy as stepsAnatomy } from '@zag-js/steps';
+export * as Steps from './steps.js';

package/dist/steps/indicator.svelte

@@ -1,23 +1,22 @@
-<script lang="ts" context="module">
-  import type {SvelteHtmlProps} from '../types.js';
-
-  export interface StepsIndicatorProps extends SvelteHtmlProps<'div'> {}
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
-  import {useStepsContext, useStepsItemContext} from './context.svelte.js';
-
-  let {children, ...props}: StepsIndicatorProps = $props();
-
-  let context = useStepsContext();
-  let itemContext = useStepsItemContext();
-
-  let attrs = $derived(
-    mergeProps(props, context.getIndicatorProps(itemContext)),
-  );
-</script>
-
-<div {...attrs}>
-  {@render children?.()}
-</div>
+<script lang="ts" context="module">
+  import type {HtmlIngredientProps} from '../types.js';
+
+  export interface StepsIndicatorProps extends HtmlIngredientProps<'div'> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {useStepsContext, useStepsItemPropsContext} from './context.svelte.js';
+
+  let {children, ...props}: StepsIndicatorProps = $props();
+
+  let context = useStepsContext();
+
+  let itemProps = useStepsItemPropsContext();
+
+  let attrs = $derived(mergeProps(props, context.getIndicatorProps(itemProps)));
+</script>
+
+<div {...attrs}>
+  {@render children?.()}
+</div>

package/dist/steps/indicator.svelte.d.ts

@@ -1,5 +1,5 @@
-import type { SvelteHtmlProps } from '../types.js';
-export interface StepsIndicatorProps extends SvelteHtmlProps<'div'> {
+import type { HtmlIngredientProps } from '../types.js';
+export interface StepsIndicatorProps extends HtmlIngredientProps<'div'> {
 }
 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> & {

package/dist/steps/item.svelte

@@ -1,29 +1,29 @@
-<script lang="ts" context="module">
-  import type {Assign, SvelteHtmlProps} from '../types.js';
-  import type {ItemProps, ItemState} from '@zag-js/steps';
-  import type {Snippet} from 'svelte';
-
-  export interface StepsItemProps
-    extends Assign<Omit<SvelteHtmlProps<'div'>, 'children'>, ItemProps> {
-    children?: Snippet<[state: ItemState]>;
-  }
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
-  import {setStepsItemContext, useStepsContext} from './context.svelte.js';
-
-  let {index, children, ...props}: StepsItemProps = $props();
-
-  let context = useStepsContext();
-
-  let state = $derived(context.getItemState({index}));
-
-  let attrs = $derived(mergeProps(props, context.getItemProps({index})));
-
-  setStepsItemContext({index});
-</script>
-
-<div {...attrs}>
-  {@render children?.(state)}
-</div>
+<script lang="ts" context="module">
+  import type {Assign, HtmlIngredientProps} from '../types.js';
+  import type {ItemProps, ItemState} from '@zag-js/steps';
+  import type {Snippet} from 'svelte';
+
+  export interface StepsItemProps
+    extends Assign<Omit<HtmlIngredientProps<'div'>, 'children'>, ItemProps> {
+    children?: Snippet<[state: ItemState]>;
+  }
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {setStepsItemPropsContext, useStepsContext} from './context.svelte.js';
+
+  let {index, children, ...props}: StepsItemProps = $props();
+
+  let context = useStepsContext();
+
+  let state = $derived(context.getItemState({index}));
+
+  let attrs = $derived(mergeProps(props, context.getItemProps({index})));
+
+  setStepsItemPropsContext({index});
+</script>
+
+<div {...attrs}>
+  {@render children?.(state)}
+</div>

package/dist/steps/item.svelte.d.ts

@@ -1,7 +1,7 @@
-import type { Assign, SvelteHtmlProps } from '../types.js';
+import type { Assign, HtmlIngredientProps } from '../types.js';
 import type { ItemProps, ItemState } from '@zag-js/steps';
 import type { Snippet } from 'svelte';
-export interface StepsItemProps extends Assign<Omit<SvelteHtmlProps<'div'>, 'children'>, ItemProps> {
+export interface StepsItemProps extends Assign<Omit<HtmlIngredientProps<'div'>, 'children'>, ItemProps> {
     children?: Snippet<[state: ItemState]>;
 }
 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> {

package/dist/steps/list.svelte

@@ -1,20 +1,20 @@
-<script lang="ts" context="module">
-  import type {SvelteHtmlProps} from '../types.js';
-
-  export interface StepsListProps extends SvelteHtmlProps<'div'> {}
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
-  import {useStepsContext} from './context.svelte.js';
-
-  let {children, ...props}: StepsListProps = $props();
-
-  let context = useStepsContext();
-
-  let attrs = $derived(mergeProps(props, context.getListProps()));
-</script>
-
-<div {...attrs}>
-  {@render children?.()}
-</div>
+<script lang="ts" context="module">
+  import type {HtmlIngredientProps} from '../types.js';
+
+  export interface StepsListProps extends HtmlIngredientProps<'div'> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {useStepsContext} from './context.svelte.js';
+
+  let {children, ...props}: StepsListProps = $props();
+
+  let context = useStepsContext();
+
+  let attrs = $derived(mergeProps(props, context.getListProps()));
+</script>
+
+<div {...attrs}>
+  {@render children?.()}
+</div>

package/dist/steps/list.svelte.d.ts

@@ -1,5 +1,5 @@
-import type { SvelteHtmlProps } from '../types.js';
-export interface StepsListProps extends SvelteHtmlProps<'div'> {
+import type { HtmlIngredientProps } from '../types.js';
+export interface StepsListProps extends HtmlIngredientProps<'div'> {
 }
 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> & {

package/dist/steps/next-trigger.svelte

@@ -1,20 +1,21 @@
-<script lang="ts" context="module">
-  import type {SvelteHtmlProps} from '../types.js';
-
-  export interface StepsNextTriggerProps extends SvelteHtmlProps<'button'> {}
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
-  import {useStepsContext} from './context.svelte.js';
-
-  let {children, ...props}: StepsNextTriggerProps = $props();
-
-  let context = useStepsContext();
-
-  let attrs = $derived(mergeProps(props, context.getNextTriggerProps()));
-</script>
-
-<button type="button" {...attrs}>
-  {@render children?.()}
-</button>
+<script lang="ts" context="module">
+  import type {HtmlIngredientProps} from '../types.js';
+
+  export interface StepsNextTriggerProps
+    extends HtmlIngredientProps<'button'> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {useStepsContext} from './context.svelte.js';
+
+  let {children, ...props}: StepsNextTriggerProps = $props();
+
+  let context = useStepsContext();
+
+  let attrs = $derived(mergeProps(props, context.getNextTriggerProps()));
+</script>
+
+<button type="button" {...attrs}>
+  {@render children?.()}
+</button>

package/dist/steps/next-trigger.svelte.d.ts

@@ -1,5 +1,5 @@
-import type { SvelteHtmlProps } from '../types.js';
-export interface StepsNextTriggerProps extends SvelteHtmlProps<'button'> {
+import type { HtmlIngredientProps } from '../types.js';
+export interface StepsNextTriggerProps extends HtmlIngredientProps<'button'> {
 }
 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> & {

package/dist/steps/prev-trigger.svelte

@@ -1,20 +1,21 @@
-<script lang="ts" context="module">
-  import type {SvelteHtmlProps} from '../types.js';
-
-  export interface StepsPrevTriggerProps extends SvelteHtmlProps<'button'> {}
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
-  import {useStepsContext} from './context.svelte.js';
-
-  let {children, ...props}: StepsPrevTriggerProps = $props();
-
-  let context = useStepsContext();
-
-  let attrs = $derived(mergeProps(props, context.getPrevTriggerProps()));
-</script>
-
-<button type="button" {...attrs}>
-  {@render children?.()}
-</button>
+<script lang="ts" context="module">
+  import type {HtmlIngredientProps} from '../types.js';
+
+  export interface StepsPrevTriggerProps
+    extends HtmlIngredientProps<'button'> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {useStepsContext} from './context.svelte.js';
+
+  let {children, ...props}: StepsPrevTriggerProps = $props();
+
+  let context = useStepsContext();
+
+  let attrs = $derived(mergeProps(props, context.getPrevTriggerProps()));
+</script>
+
+<button type="button" {...attrs}>
+  {@render children?.()}
+</button>

package/dist/steps/prev-trigger.svelte.d.ts

@@ -1,5 +1,5 @@
-import type { SvelteHtmlProps } from '../types.js';
-export interface StepsPrevTriggerProps extends SvelteHtmlProps<'button'> {
+import type { HtmlIngredientProps } from '../types.js';
+export interface StepsPrevTriggerProps extends HtmlIngredientProps<'button'> {
 }
 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> & {

package/dist/steps/progress.svelte

@@ -1,20 +1,20 @@
-<script lang="ts" context="module">
-  import type {SvelteHtmlProps} from '../types.js';
-
-  export interface StepsProgressProps extends SvelteHtmlProps<'div'> {}
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
-  import {useStepsContext} from './context.svelte.js';
-
-  let {children, ...props}: StepsProgressProps = $props();
-
-  let context = useStepsContext();
-
-  let attrs = $derived(mergeProps(props, context.getProgressProps()));
-</script>
-
-<div {...attrs}>
-  {@render children?.()}
-</div>
+<script lang="ts" context="module">
+  import type {HtmlIngredientProps} from '../types.js';
+
+  export interface StepsProgressProps extends HtmlIngredientProps<'div'> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {useStepsContext} from './context.svelte.js';
+
+  let {children, ...props}: StepsProgressProps = $props();
+
+  let context = useStepsContext();
+
+  let attrs = $derived(mergeProps(props, context.getProgressProps()));
+</script>
+
+<div {...attrs}>
+  {@render children?.()}
+</div>