ui-ingredients 0.0.10 → 0.0.12

package/dist/popover/arrow.svelte

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

package/dist/popover/arrow.svelte.d.ts

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

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

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

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

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

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

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

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

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

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

@@ -1,9 +1,11 @@
-export { default as ArrowTip, type PopoverArrowTipProps, } from './arrow-tip.svelte';
-export { default as Arrow, type PopoverArrowProps } from './arrow.svelte';
-export { default as CloseTrigger, type PopoverCloseTriggerProps, } from './close-trigger.svelte';
-export { default as Content, type PopoverContentProps } from './content.svelte';
-export { default as Description, type PopoverDescriptionProps, } from './description.svelte';
-export { default as Positioner, type PopoverPositionerProps, } from './positioner.svelte';
-export { default as Root, type PopoverProps } from './root.svelte';
-export { default as Title, type PopoverTitleProps } from './title.svelte';
-export { default as Trigger, type PopoverTriggerProps } from './trigger.svelte';
+export { anatomy as popoverAnatomy } from '@zag-js/popover';
+export type { PopoverArrowTipProps } from './arrow-tip.svelte';
+export type { PopoverArrowProps } from './arrow.svelte';
+export type { PopoverCloseTriggerProps } from './close-trigger.svelte';
+export type { PopoverContentProps } from './content.svelte';
+export type { PopoverDescriptionProps } from './description.svelte';
+export * as Popover from './popover.js';
+export type { PopoverPositionerProps } from './positioner.svelte';
+export type { PopoverProps } from './root.svelte';
+export type { PopoverTitleProps } from './title.svelte';
+export type { PopoverTriggerProps } from './trigger.svelte';

package/dist/popover/index.js

@@ -1,9 +1,2 @@
-export { default as ArrowTip, } from './arrow-tip.svelte';
-export { default as Arrow } from './arrow.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 popoverAnatomy } from '@zag-js/popover';
+export * as Popover from './popover.js';

package/dist/popover/popover.d.ts

@@ -0,0 +1,9 @@
+export { default as ArrowTip } from './arrow-tip.svelte';
+export { default as Arrow } from './arrow.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/popover/popover.js

@@ -0,0 +1,9 @@
+export { default as ArrowTip } from './arrow-tip.svelte';
+export { default as Arrow } from './arrow.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/popover/positioner.svelte

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

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

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

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

package/dist/popover/title.svelte

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

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

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

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

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

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

@@ -1,20 +1,20 @@
-<script context="module" lang="ts">
-  import {type Snippet} from 'svelte';
-
-  export interface PortalProps {
-    container?: HTMLElement;
-    disabled?: boolean;
-    getRootNode?: () => ShadowRoot | Document | Node;
-    children: Snippet;
-  }
-</script>
-
-<script lang="ts">
-  import {portal} from '@zag-js/svelte';
-
-  let {children, ...props}: PortalProps = $props();
-</script>
-
-<div use:portal={props}>
-  {@render children?.()}
-</div>
+<script context="module" lang="ts">
+  import {type Snippet} from 'svelte';
+
+  export interface PortalProps {
+    container?: HTMLElement;
+    disabled?: boolean;
+    getRootNode?: () => ShadowRoot | Document | Node;
+    children: Snippet;
+  }
+</script>
+
+<script lang="ts">
+  import {portal} from '@zag-js/svelte';
+
+  let {children, ...props}: PortalProps = $props();
+</script>
+
+<div use:portal={props}>
+  {@render children?.()}
+</div>

package/dist/presence/root.svelte

@@ -1,46 +1,46 @@
-<script lang="ts" context="module">
-  import type {Assign, SvelteHtmlProps} from '../types.js';
-  import type {Context} from '@zag-js/presence';
-
-  export interface PresenceProps
-    extends Assign<SvelteHtmlProps<'div'>, Context> {}
-</script>
-
-<script lang="ts">
-  import * as presence from '@zag-js/presence';
-  import {normalizeProps, useMachine} from '@zag-js/svelte';
-
-  let {
-    /**/
-    present,
-    immediate,
-    onExitComplete,
-    children,
-    ...props
-  }: PresenceProps = $props();
-
-  let [machineState, send] = useMachine(
-    presence.machine({
-      present,
-      immediate,
-      onExitComplete,
-    }),
-  );
-
-  let api = $derived(presence.connect(machineState, send, normalizeProps));
-
-  let node: HTMLElement | null = $state(null);
-
-  $effect(() => {
-    api.setNode(node);
-  });
-</script>
-
-<div
-  bind:this={node}
-  hidden={!api.present}
-  data-state={api.skip ? undefined : present ? 'open' : 'closed'}
-  {...props}
->
-  {@render children?.()}
-</div>
+<script lang="ts" context="module">
+  import type {Assign, HtmlIngredientProps} from '../types.js';
+  import type {Context} from '@zag-js/presence';
+
+  export interface PresenceProps
+    extends Assign<HtmlIngredientProps<'div'>, Context> {}
+</script>
+
+<script lang="ts">
+  import * as presence from '@zag-js/presence';
+  import {normalizeProps, useMachine} from '@zag-js/svelte';
+
+  let {
+    /**/
+    present,
+    immediate,
+    onExitComplete,
+    children,
+    ...props
+  }: PresenceProps = $props();
+
+  let [machineState, send] = useMachine(
+    presence.machine({
+      present,
+      immediate,
+      onExitComplete,
+    }),
+  );
+
+  let api = $derived(presence.connect(machineState, send, normalizeProps));
+
+  let node: HTMLElement | null = $state(null);
+
+  $effect(() => {
+    api.setNode(node);
+  });
+</script>
+
+<div
+  bind:this={node}
+  hidden={!api.present}
+  data-state={api.skip ? undefined : present ? 'open' : 'closed'}
+  {...props}
+>
+  {@render children?.()}
+</div>

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

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