ui-ingredients 0.0.10 → 0.0.12

package/dist/carousel/root.svelte

@@ -1,60 +1,65 @@
-<script lang="ts" context="module">
-  import type {Assign, SvelteHtmlProps} from '../types.js';
-  import type {Snippet} from 'svelte';
-  import type {
-    CreateCarouselContextProps,
-    CreateCarouselContextReturn,
-  } from './context.svelte.js';
-
-  export interface CarouselProps
-    extends Assign<
-      Omit<SvelteHtmlProps<'div'>, 'children'>,
-      Omit<CreateCarouselContextProps, 'id'>
-    > {
-    children?: Snippet<[context: CreateCarouselContextReturn]>;
-  }
-</script>
-
-<script lang="ts">
-  import {uuid} from '../utils.svelte.js';
-  import {mergeProps} from '@zag-js/svelte';
-  import {createCarouselContext, setCarouselContext} from './context.svelte.js';
-
-  let {
-    id,
-    ids,
-    dir,
-    loop,
-    align,
-    index,
-    spacing,
-    orientation,
-    slidesPerView,
-    onIndexChange,
-    getRootNode,
-    children,
-    ...props
-  }: CarouselProps = $props();
-
-  let context = createCarouselContext({
-    id: id ?? uuid(),
-    ids,
-    dir,
-    loop,
-    align,
-    index: $state.snapshot(index),
-    spacing,
-    orientation,
-    slidesPerView,
-    onIndexChange,
-    getRootNode,
-  });
-
-  let attrs = $derived(mergeProps(props, context.getRootProps()));
-
-  setCarouselContext(context);
-</script>
-
-<div {...attrs}>
-  {@render children?.(context)}
-</div>
+<script lang="ts" context="module">
+  import type {Assign, HtmlIngredientProps} from '../types.js';
+  import type {Snippet} from 'svelte';
+  import type {
+    CreateCarouselContextProps,
+    CreateCarouselContextReturn,
+  } from './context.svelte.js';
+
+  export interface CarouselProps
+    extends Assign<
+      Omit<HtmlIngredientProps<'div'>, 'children'>,
+      Omit<CreateCarouselContextProps, 'id'>
+    > {
+    children?: Snippet<[context: CreateCarouselContextReturn]>;
+  }
+</script>
+
+<script lang="ts">
+  import {useEnvironmentContext} from '../environment-provider/index.js';
+  import {useLocaleContext} from '../locale-provider/index.js';
+  import {uuid} from '../utils.svelte.js';
+  import {mergeProps} from '@zag-js/svelte';
+  import {createCarouselContext, setCarouselContext} from './context.svelte.js';
+
+  let {
+    id,
+    ids,
+    dir,
+    loop,
+    align,
+    index,
+    spacing,
+    orientation,
+    slidesPerView,
+    onIndexChange,
+    getRootNode,
+    children,
+    ...props
+  }: CarouselProps = $props();
+
+  let localeContext = useLocaleContext();
+  let environmentContext = useEnvironmentContext();
+
+  let context = createCarouselContext({
+    id: id ?? uuid(),
+    ids,
+    dir: dir ?? localeContext?.dir,
+    loop,
+    align,
+    index: $state.snapshot(index),
+    spacing,
+    orientation,
+    slidesPerView,
+    onIndexChange,
+    getRootNode: getRootNode ?? environmentContext?.getRootNode,
+  });
+
+  let attrs = $derived(mergeProps(props, context.getRootProps()));
+
+  setCarouselContext(context);
+</script>
+
+<div {...attrs}>
+  {@render children?.(context)}
+</div>

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

@@ -1,7 +1,7 @@
-import type { Assign, SvelteHtmlProps } from '../types.js';
+import type { Assign, HtmlIngredientProps } from '../types.js';
 import type { Snippet } from 'svelte';
 import type { CreateCarouselContextProps, CreateCarouselContextReturn } from './context.svelte.js';
-export interface CarouselProps extends Assign<Omit<SvelteHtmlProps<'div'>, 'children'>, Omit<CreateCarouselContextProps, 'id'>> {
+export interface CarouselProps extends Assign<Omit<HtmlIngredientProps<'div'>, 'children'>, Omit<CreateCarouselContextProps, 'id'>> {
     children?: Snippet<[context: CreateCarouselContextReturn]>;
 }
 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/carousel/viewport.svelte

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

package/dist/carousel/viewport.svelte.d.ts

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

@@ -0,0 +1,5 @@
+export { default as Control } from './control.svelte';
+export { default as HiddenInput } from './hidden-input.svelte';
+export { default as Indicator } from './indicator.svelte';
+export { default as Label } from './label.svelte';
+export { default as Root } from './root.svelte';

package/dist/checkbox/checkbox.js

@@ -0,0 +1,5 @@
+export { default as Control } from './control.svelte';
+export { default as HiddenInput } from './hidden-input.svelte';
+export { default as Indicator } from './indicator.svelte';
+export { default as Label } from './label.svelte';
+export { default as Root } from './root.svelte';

package/dist/checkbox/control.svelte

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

package/dist/checkbox/control.svelte.d.ts

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

@@ -1,18 +1,19 @@
-<script lang="ts" context="module">
-  import type {SvelteHtmlProps} from '../types.js';
-
-  export interface CheckboxHiddenInputProps extends SvelteHtmlProps<'input'> {}
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
-  import {useCheckboxContext} from './context.svelte.js';
-
-  let {...props}: CheckboxHiddenInputProps = $props();
-
-  let context = useCheckboxContext();
-
-  let attrs = $derived(mergeProps(props, context.getHiddenInputProps()));
-</script>
-
-<input {...attrs} />
+<script lang="ts" context="module">
+  import type {HtmlIngredientProps} from '../types.js';
+
+  export interface CheckboxHiddenInputProps
+    extends HtmlIngredientProps<'input'> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {useCheckboxContext} from './context.svelte.js';
+
+  let {...props}: CheckboxHiddenInputProps = $props();
+
+  let context = useCheckboxContext();
+
+  let attrs = $derived(mergeProps(props, context.getHiddenInputProps()));
+</script>
+
+<input {...attrs} />

package/dist/checkbox/hidden-input.svelte.d.ts

@@ -1,5 +1,5 @@
-import type { SvelteHtmlProps } from '../types.js';
-export interface CheckboxHiddenInputProps extends SvelteHtmlProps<'input'> {
+import type { HtmlIngredientProps } from '../types.js';
+export interface CheckboxHiddenInputProps extends HtmlIngredientProps<'input'> {
 }
 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/checkbox/index.d.ts

@@ -1,5 +1,7 @@
-export { default as Control, type CheckboxControlProps } from './control.svelte';
-export { default as HiddenInput, type CheckboxHiddenInputProps, } from './hidden-input.svelte';
-export { default as Indicator, type CheckboxIndicatorProps, } from './indicator.svelte';
-export { default as Label, type CheckboxLabelProps } from './label.svelte';
-export { default as Root, type CheckboxProps } from './root.svelte';
+export { anatomy as checkboxAnatomy } from '@zag-js/checkbox';
+export * as Checkbox from './checkbox.js';
+export type { CheckboxControlProps } from './control.svelte';
+export type { CheckboxHiddenInputProps } from './hidden-input.svelte';
+export type { CheckboxIndicatorProps } from './indicator.svelte';
+export type { CheckboxLabelProps } from './label.svelte';
+export type { CheckboxProps } from './root.svelte';

package/dist/checkbox/index.js

@@ -1,5 +1,2 @@
-export { default as Control } from './control.svelte';
-export { default as HiddenInput, } from './hidden-input.svelte';
-export { default as Indicator, } from './indicator.svelte';
-export { default as Label } from './label.svelte';
-export { default as Root } from './root.svelte';
+export { anatomy as checkboxAnatomy } from '@zag-js/checkbox';
+export * as Checkbox from './checkbox.js';

package/dist/checkbox/indicator.svelte

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

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

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

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

package/dist/checkbox/label.svelte.d.ts

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

@@ -1,64 +1,69 @@
-<script lang="ts" context="module">
-  import type {Assign, SvelteHtmlProps} from '../types.js';
-  import type {Snippet} from 'svelte';
-  import type {
-    CreateCheckboxContextProps,
-    CreateCheckboxContextReturn,
-  } from './context.svelte.js';
-
-  export interface CheckboxProps
-    extends Assign<
-      Omit<SvelteHtmlProps<'label'>, 'children'>,
-      Omit<CreateCheckboxContextProps, 'id'>
-    > {
-    children?: Snippet<[context: CreateCheckboxContextReturn]>;
-  }
-</script>
-
-<script lang="ts">
-  import {uuid} from '../utils.svelte.js';
-  import {mergeProps} from '@zag-js/svelte';
-  import {createCheckboxContext, setCheckboxContext} from './context.svelte.js';
-
-  let {
-    id,
-    ids,
-    dir,
-    form,
-    name,
-    value,
-    checked,
-    invalid,
-    disabled,
-    readOnly,
-    required,
-    onCheckedChange,
-    getRootNode,
-    children,
-    ...props
-  }: CheckboxProps = $props();
-
-  let context = createCheckboxContext({
-    id: id ?? uuid(),
-    ids,
-    dir,
-    form,
-    name,
-    value: $state.snapshot(value),
-    checked,
-    invalid,
-    disabled,
-    readOnly,
-    required,
-    onCheckedChange,
-    getRootNode,
-  });
-
-  let attrs = $derived(mergeProps(props, context.getRootProps()));
-
-  setCheckboxContext(context);
-</script>
-
-<label {...attrs}>
-  {@render children?.(context)}
-</label>
+<script lang="ts" context="module">
+  import type {Assign, HtmlIngredientProps} from '../types.js';
+  import type {Snippet} from 'svelte';
+  import type {
+    CreateCheckboxContextProps,
+    CreateCheckboxContextReturn,
+  } from './context.svelte.js';
+
+  export interface CheckboxProps
+    extends Assign<
+      Omit<HtmlIngredientProps<'label'>, 'children'>,
+      Omit<CreateCheckboxContextProps, 'id'>
+    > {
+    children?: Snippet<[context: CreateCheckboxContextReturn]>;
+  }
+</script>
+
+<script lang="ts">
+  import {useEnvironmentContext} from '../environment-provider/index.js';
+  import {useLocaleContext} from '../locale-provider/index.js';
+  import {uuid} from '../utils.svelte.js';
+  import {mergeProps} from '@zag-js/svelte';
+  import {createCheckboxContext, setCheckboxContext} from './context.svelte.js';
+
+  let {
+    id,
+    ids,
+    dir,
+    form,
+    name,
+    value,
+    checked,
+    invalid,
+    disabled,
+    readOnly,
+    required,
+    onCheckedChange,
+    getRootNode,
+    children,
+    ...props
+  }: CheckboxProps = $props();
+
+  let localeContext = useLocaleContext();
+  let environmentContext = useEnvironmentContext();
+
+  let context = createCheckboxContext({
+    id: id ?? uuid(),
+    ids,
+    dir: dir ?? localeContext?.dir,
+    form,
+    name,
+    value: $state.snapshot(value),
+    checked,
+    invalid,
+    disabled,
+    readOnly,
+    required,
+    onCheckedChange,
+    getRootNode: getRootNode ?? environmentContext?.getRootNode,
+  });
+
+  let attrs = $derived(mergeProps(props, context.getRootProps()));
+
+  setCheckboxContext(context);
+</script>
+
+<label {...attrs}>
+  {@render children?.(context)}
+</label>

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

@@ -1,7 +1,7 @@
-import type { Assign, SvelteHtmlProps } from '../types.js';
+import type { Assign, HtmlIngredientProps } from '../types.js';
 import type { Snippet } from 'svelte';
 import type { CreateCheckboxContextProps, CreateCheckboxContextReturn } from './context.svelte.js';
-export interface CheckboxProps extends Assign<Omit<SvelteHtmlProps<'label'>, 'children'>, Omit<CreateCheckboxContextProps, 'id'>> {
+export interface CheckboxProps extends Assign<Omit<HtmlIngredientProps<'label'>, 'children'>, Omit<CreateCheckboxContextProps, 'id'>> {
     children?: Snippet<[context: CreateCheckboxContextReturn]>;
 }
 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/clipboard/clipboard.d.ts

@@ -0,0 +1,6 @@
+export { default as Control } from './control.svelte';
+export { default as Indicator } from './indicator.svelte';
+export { default as Input } from './input.svelte';
+export { default as Label } from './label.svelte';
+export { default as Root } from './root.svelte';
+export { default as Trigger } from './trigger.svelte';

package/dist/clipboard/clipboard.js

@@ -0,0 +1,6 @@
+export { default as Control } from './control.svelte';
+export { default as Indicator } from './indicator.svelte';
+export { default as Input } from './input.svelte';
+export { default as Label } from './label.svelte';
+export { default as Root } from './root.svelte';
+export { default as Trigger } from './trigger.svelte';

package/dist/clipboard/control.svelte

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

package/dist/clipboard/control.svelte.d.ts

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