ui-ingredients 0.0.10 → 0.0.12

package/dist/dialog/close-trigger.svelte

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

package/dist/dialog/close-trigger.svelte.d.ts

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

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

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

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

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

package/dist/dialog/description.svelte.d.ts

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

@@ -0,0 +1,8 @@
+export { default as Backdrop } from './backdrop.svelte';
+export { default as CloseTrigger } from './close-trigger.svelte';
+export { default as Content } from './content.svelte';
+export { default as Description } from './description.svelte';
+export { default as Positioner } from './positioner.svelte';
+export { default as Root } from './root.svelte';
+export { default as Title } from './title.svelte';
+export { default as Trigger } from './trigger.svelte';

package/dist/dialog/dialog.js

@@ -0,0 +1,8 @@
+export { default as Backdrop } from './backdrop.svelte';
+export { default as CloseTrigger } from './close-trigger.svelte';
+export { default as Content } from './content.svelte';
+export { default as Description } from './description.svelte';
+export { default as Positioner } from './positioner.svelte';
+export { default as Root } from './root.svelte';
+export { default as Title } from './title.svelte';
+export { default as Trigger } from './trigger.svelte';

package/dist/dialog/index.d.ts

@@ -1,8 +1,10 @@
-export { default as Backdrop, type DialogBackdropProps } from './backdrop.svelte';
-export { default as CloseTrigger, type DialogCloseTriggerProps, } from './close-trigger.svelte';
-export { default as Content, type DialogContentProps } from './content.svelte';
-export { default as Description, type DialogDescriptionProps, } from './description.svelte';
-export { default as Positioner, type DialogPositionerProps, } from './positioner.svelte';
-export { default as Root, type DialogProps } from './root.svelte';
-export { default as Title, type DialogTitleProps } from './title.svelte';
-export { default as Trigger, type DialogTriggerProps } from './trigger.svelte';
+export { anatomy as dialogAnatomy } from '@zag-js/dialog';
+export type { DialogBackdropProps } from './backdrop.svelte';
+export type { DialogCloseTriggerProps } from './close-trigger.svelte';
+export type { DialogContentProps } from './content.svelte';
+export type { DialogDescriptionProps } from './description.svelte';
+export * as Dialog from './dialog.js';
+export type { DialogPositionerProps } from './positioner.svelte';
+export type { DialogProps } from './root.svelte';
+export type { DialogTitleProps } from './title.svelte';
+export type { DialogTriggerProps } from './trigger.svelte';

package/dist/dialog/index.js

@@ -1,8 +1,2 @@
-export { default as Backdrop } from './backdrop.svelte';
-export { default as CloseTrigger, } from './close-trigger.svelte';
-export { default as Content } from './content.svelte';
-export { default as Description, } from './description.svelte';
-export { default as Positioner, } from './positioner.svelte';
-export { default as Root } from './root.svelte';
-export { default as Title } from './title.svelte';
-export { default as Trigger } from './trigger.svelte';
+export { anatomy as dialogAnatomy } from '@zag-js/dialog';
+export * as Dialog from './dialog.js';

package/dist/dialog/positioner.svelte

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

package/dist/dialog/positioner.svelte.d.ts

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

@@ -1,28 +1,35 @@
-<script lang="ts" context="module">
-  import type {Snippet} from 'svelte';
-  import type {
-    CreateDialogContextProps,
-    CreateDialogContextReturn,
-  } from './context.svelte.js';
-
-  export interface DialogProps extends Omit<CreateDialogContextProps, 'id'> {
-    id?: string | null;
-    children?: Snippet<[CreateDialogContextReturn]>;
-  }
-</script>
-
-<script lang="ts">
-  import {uuid} from '../utils.svelte.js';
-  import {createDialogContext, setDialogContext} from './context.svelte.js';
-
-  let {id, children, ...props}: DialogProps = $props();
-
-  let context = createDialogContext({
-    id: id ?? uuid(),
-    ...props,
-  });
-
-  setDialogContext(context);
-</script>
-
-{@render children?.(context)}
+<script lang="ts" context="module">
+  import type {Snippet} from 'svelte';
+  import type {
+    CreateDialogContextProps,
+    CreateDialogContextReturn,
+  } from './context.svelte.js';
+
+  export interface DialogProps extends Omit<CreateDialogContextProps, 'id'> {
+    id?: string | null;
+    children?: Snippet<[CreateDialogContextReturn]>;
+  }
+</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 {createDialogContext, setDialogContext} from './context.svelte.js';
+
+  let {id, dir, getRootNode, children, ...props}: DialogProps = $props();
+
+  let localeContext = useLocaleContext();
+  let environmentContext = useEnvironmentContext();
+
+  let context = createDialogContext({
+    id: id ?? uuid(),
+    dir: dir ?? localeContext?.dir,
+    getRootNode: getRootNode ?? environmentContext?.getRootNode,
+    ...props,
+  });
+
+  setDialogContext(context);
+</script>
+
+{@render children?.(context)}

package/dist/dialog/title.svelte

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

package/dist/dialog/title.svelte.d.ts

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

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

package/dist/dialog/trigger.svelte.d.ts

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

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

package/dist/editable/area.svelte.d.ts

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

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

package/dist/editable/cancel-trigger.svelte.d.ts

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

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

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

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

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

package/dist/editable/edit-trigger.svelte.d.ts

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