ui-ingredients 0.0.17 → 0.0.18

package/dist/number-input/root.svelte

@@ -1,5 +1,5 @@
 <script lang="ts" module>
-  import type {Assign, HtmlIngredientProps} from '../types.js';
+  import type {Assign, HtmlProps} from '../types.js';
   import type {Snippet} from 'svelte';
   import type {
     CreateNumberInputProps,
@@ -7,18 +7,12 @@
   } from './create-number-input.svelte.js';
 
   export interface NumberInputProps
-    extends Assign<
-      Omit<HtmlIngredientProps<'div'>, 'children'>,
-      Omit<CreateNumberInputProps, 'id'>
-    > {
+    extends Assign<Omit<HtmlProps<'div'>, 'children'>, CreateNumberInputProps> {
     children?: Snippet<[api: CreateNumberInputReturn]>;
   }
 </script>
 
 <script lang="ts">
-  import {getEnvironmentContext} from '../environment-provider/index.js';
-  import {getLocaleContext} from '../locale-provider/index.js';
-  import {createUniqueId} from '../utils.svelte.js';
   import {mergeProps} from '@zag-js/svelte';
   import {numberInputContext} from './context.svelte.js';
   import {createNumberInput} from './create-number-input.svelte.js';
@@ -26,14 +20,12 @@
   let {
     id,
     ids,
-    dir,
     max,
     min,
     step,
     name,
     form,
     value,
-    locale,
     pattern,
     invalid,
     disabled,
@@ -50,27 +42,19 @@
     onFocusChange,
     onValueChange,
     onValueInvalid,
-    getRootNode,
     children,
     ...props
   }: NumberInputProps = $props();
 
-  let localeContext = getLocaleContext();
-  let environmentContext = getEnvironmentContext();
-
-  let uid = createUniqueId();
-
   let context = createNumberInput({
-    id: id ?? uid,
+    id,
     ids,
-    dir: dir ?? localeContext?.dir,
     max,
     min,
     step,
     name,
     form,
     value: $state.snapshot(value),
-    locale: locale ?? localeContext?.locale,
     pattern,
     invalid,
     disabled,
@@ -87,7 +71,6 @@
     onFocusChange,
     onValueChange,
     onValueInvalid,
-    getRootNode: getRootNode ?? environmentContext?.getRootNode,
   });
 
   let attrs = $derived(mergeProps(props, context.getRootProps()));

package/dist/number-input/scrubber.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" module>
-  import type {HtmlIngredientProps} from '../types.js';
+  import type {HtmlProps} from '../types.js';
 
-  export interface NumberInputScrubberProps extends HtmlIngredientProps<'div'> {}
+  export interface NumberInputScrubberProps extends HtmlProps<'div'> {}
 </script>
 
 <script lang="ts">

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

@@ -1,5 +1,6 @@
 import * as pagination from '@zag-js/pagination';
-export interface CreatePaginationProps extends pagination.Context {
+export interface CreatePaginationProps extends Omit<pagination.Context, 'id' | 'dir' | 'getRootNode'> {
+    id?: string | null;
 }
 export interface CreatePaginationReturn extends pagination.Api {
 }

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

@@ -1,7 +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 pagination from '@zag-js/pagination';
 import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
 export function createPagination(props) {
-    const [state, send] = useMachine(pagination.machine(props));
+    const localeContext = getLocaleContext();
+    const environmentContext = getEnvironmentContext();
+    const [state, send] = useMachine(pagination.machine({
+        ...props,
+        id: props.id ?? createUniqueId(),
+        dir: localeContext?.dir,
+        getRootNode: environmentContext?.getRootNode,
+    }));
     const api = $derived(reflect(() => pagination.connect(state, send, normalizeProps)));
     return api;
 }

package/dist/pagination/ellipsis.svelte

@@ -1,9 +1,8 @@
 <script lang="ts" module>
-  import type {Assign, HtmlIngredientProps} from '../types.js';
+  import type {Assign, HtmlProps} from '../types.js';
   import type {EllipsisProps} from '@zag-js/pagination';
 
-  export interface PaginationEllipsisProps
-    extends Assign<HtmlIngredientProps<'span'>, EllipsisProps> {}
+  export interface PaginationEllipsisProps extends Assign<HtmlProps<'span'>, EllipsisProps> {}
 </script>
 
 <script lang="ts">

package/dist/pagination/item.svelte

@@ -1,9 +1,9 @@
 <script lang="ts" module>
-  import type {Assign, HtmlIngredientProps} from '../types.js';
+  import type {Assign, HtmlProps} from '../types.js';
   import type {ItemProps} from '@zag-js/pagination';
 
   export interface PaginationItemProps
-    extends Assign<HtmlIngredientProps<'button'>, Omit<ItemProps, 'type'>> {}
+    extends Assign<HtmlProps<'button'>, Omit<ItemProps, 'type'>> {}
 </script>
 
 <script lang="ts">
@@ -14,14 +14,15 @@
 
   let context = paginationContext.get();
 
-  let itemProps = $derived(
-    context.getItemProps({
-      type: 'page',
-      value,
-    }),
+  let attrs = $derived(
+    mergeProps(
+      props,
+      context.getItemProps({
+        type: 'page',
+        value,
+      }),
+    ),
   );
-
-  let attrs = $derived(mergeProps(props, itemProps));
 </script>
 
 <button type="button" {...attrs}>

package/dist/pagination/next-trigger.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" module>
-  import type {HtmlIngredientProps} from '../types.js';
+  import type {HtmlProps} from '../types.js';
 
-  export interface PaginationNextTriggerProps extends HtmlIngredientProps<'button'> {}
+  export interface PaginationNextTriggerProps extends HtmlProps<'button'> {}
 </script>
 
 <script lang="ts">

package/dist/pagination/prev-trigger.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" module>
-  import type {HtmlIngredientProps} from '../types.js';
+  import type {HtmlProps} from '../types.js';
 
-  export interface PaginationPrevTriggerProps extends HtmlIngredientProps<'button'> {}
+  export interface PaginationPrevTriggerProps extends HtmlProps<'button'> {}
 </script>
 
 <script lang="ts">

package/dist/pagination/root.svelte

@@ -1,21 +1,15 @@
 <script lang="ts" module>
-  import type {Assign, HtmlIngredientProps} from '../types.js';
+  import type {Assign, HtmlProps} from '../types.js';
   import type {Snippet} from 'svelte';
   import type {CreatePaginationProps, CreatePaginationReturn} from './create-pagination.svelte.js';
 
   export interface PaginationProps
-    extends Assign<
-      Omit<HtmlIngredientProps<'div'>, 'children'>,
-      Omit<CreatePaginationProps, 'id'>
-    > {
+    extends Assign<Omit<HtmlProps<'div'>, 'children'>, CreatePaginationProps> {
     children?: Snippet<[api: CreatePaginationReturn]>;
   }
 </script>
 
 <script lang="ts">
-  import {getEnvironmentContext} from '../environment-provider/index.js';
-  import {getLocaleContext} from '../locale-provider/index.js';
-  import {createUniqueId} from '../utils.svelte.js';
   import {mergeProps} from '@zag-js/svelte';
   import {paginationContext} from './context.svelte.js';
   import {createPagination} from './create-pagination.svelte.js';
@@ -23,7 +17,6 @@
   let {
     id,
     ids,
-    dir,
     type,
     page,
     pageSize,
@@ -32,20 +25,13 @@
     translations,
     onPageChange,
     onPageSizeChange,
-    getRootNode,
     children,
     ...props
   }: PaginationProps = $props();
 
-  let localeContext = getLocaleContext();
-  let environmentContext = getEnvironmentContext();
-
-  let uid = createUniqueId();
-
   let context = createPagination({
-    id: id ?? uid,
+    id,
     ids,
-    dir: dir ?? localeContext?.dir,
     type,
     page,
     pageSize,
@@ -54,7 +40,6 @@
     translations,
     onPageChange,
     onPageSizeChange,
-    getRootNode: getRootNode ?? environmentContext?.getRootNode,
   });
 
   let attrs = $derived(mergeProps(props, context.getRootProps()));

package/dist/pin-input/clear-trigger.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" module>
-  import type {HtmlIngredientProps} from '../types.js';
+  import type {HtmlProps} from '../types.js';
 
-  export interface PinInputClearTriggerProps extends HtmlIngredientProps<'button'> {}
+  export interface PinInputClearTriggerProps extends HtmlProps<'button'> {}
 </script>
 
 <script lang="ts">

package/dist/pin-input/create-pin-input.svelte.d.ts

@@ -1,5 +1,6 @@
 import * as pinInput from '@zag-js/pin-input';
-export interface CreatePinInputProps extends pinInput.Context {
+export interface CreatePinInputProps extends Omit<pinInput.Context, 'id' | 'dir' | 'getRootNode'> {
+    id?: string | null;
 }
 export interface CreatePinInputReturn extends pinInput.Api {
 }

package/dist/pin-input/create-pin-input.svelte.js

@@ -1,7 +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 pinInput from '@zag-js/pin-input';
 import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
 export function createPinInputContext(props) {
-    const [state, send] = useMachine(pinInput.machine(props));
+    const localeContext = getLocaleContext();
+    const environmentContext = getEnvironmentContext();
+    const [state, send] = useMachine(pinInput.machine({
+        ...props,
+        id: props.id ?? createUniqueId(),
+        dir: localeContext?.dir,
+        getRootNode: environmentContext?.getRootNode,
+    }));
     const api = $derived(reflect(() => pinInput.connect(state, send, normalizeProps)));
     return api;
 }

package/dist/pin-input/hidden-input.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" module>
-  import type {HtmlIngredientProps} from '../types.js';
+  import type {HtmlProps} from '../types.js';
 
-  export interface PinInputHiddenInputProps extends HtmlIngredientProps<'input'> {}
+  export interface PinInputHiddenInputProps extends HtmlProps<'input'> {}
 </script>
 
 <script lang="ts">

package/dist/pin-input/input.svelte

@@ -1,8 +1,8 @@
 <script lang="ts" module>
-  import type {Assign, HtmlIngredientProps} from '../types.js';
+  import type {Assign, HtmlProps} from '../types.js';
   import type {InputProps} from '@zag-js/pin-input';
 
-  export interface PinInputInputProps extends Assign<HtmlIngredientProps<'input'>, InputProps> {}
+  export interface PinInputInputProps extends Assign<HtmlProps<'input'>, InputProps> {}
 </script>
 
 <script lang="ts">

package/dist/pin-input/label.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" module>
-  import type {HtmlIngredientProps} from '../types.js';
+  import type {HtmlProps} from '../types.js';
 
-  export interface PinInputLabelProps extends HtmlIngredientProps<'label'> {}
+  export interface PinInputLabelProps extends HtmlProps<'label'> {}
 </script>
 
 <script lang="ts">

package/dist/pin-input/root.svelte

@@ -1,18 +1,15 @@
 <script lang="ts" module>
-  import type {Assign, HtmlIngredientProps} from '../types.js';
+  import type {Assign, HtmlProps} from '../types.js';
   import type {Snippet} from 'svelte';
   import type {CreatePinInputProps, CreatePinInputReturn} from './create-pin-input.svelte.js';
 
   export interface PinInputProps
-    extends Assign<Omit<HtmlIngredientProps<'div'>, 'children'>, Omit<CreatePinInputProps, 'id'>> {
+    extends Assign<Omit<HtmlProps<'div'>, 'children'>, CreatePinInputProps> {
     children?: Snippet<[api: CreatePinInputReturn]>;
   }
 </script>
 
 <script lang="ts">
-  import {getEnvironmentContext} from '../environment-provider/index.js';
-  import {getLocaleContext} from '../locale-provider/index.js';
-  import {createUniqueId} from '../utils.svelte.js';
   import {mergeProps} from '@zag-js/svelte';
   import {pinInputContext} from './context.svelte.js';
   import {createPinInputContext} from './create-pin-input.svelte.js';
@@ -20,7 +17,6 @@
   let {
     id,
     ids,
-    dir,
     otp,
     form,
     mask,
@@ -40,20 +36,13 @@
     onValueChange,
     onValueInvalid,
     onValueComplete,
-    getRootNode,
     children,
     ...props
   }: PinInputProps = $props();
 
-  let localeContext = getLocaleContext();
-  let environmentContext = getEnvironmentContext();
-
-  let uid = createUniqueId();
-
   let context = createPinInputContext({
-    id: id ?? uid,
+    id,
     ids,
-    dir: dir ?? localeContext?.dir,
     otp,
     form,
     mask,
@@ -73,7 +62,6 @@
     onValueChange,
     onValueInvalid,
     onValueComplete,
-    getRootNode: getRootNode ?? environmentContext?.getRootNode,
   });
 
   let attrs = $derived(mergeProps(props, context.getRootProps()));

package/dist/popover/arrow-tip.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" module>
-  import type {HtmlIngredientProps} from '../types.js';
+  import type {HtmlProps} from '../types.js';
 
-  export interface PopoverArrowTipProps extends HtmlIngredientProps<'div'> {}
+  export interface PopoverArrowTipProps extends HtmlProps<'div'> {}
 </script>
 
 <script lang="ts">

package/dist/popover/arrow.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" module>
-  import type {HtmlIngredientProps} from '../types.js';
+  import type {HtmlProps} from '../types.js';
 
-  export interface PopoverArrowProps extends HtmlIngredientProps<'div'> {}
+  export interface PopoverArrowProps extends HtmlProps<'div'> {}
 </script>
 
 <script lang="ts">

package/dist/popover/close-trigger.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" module>
-  import type {HtmlIngredientProps} from '../types.js';
+  import type {HtmlProps} from '../types.js';
 
-  export interface PopoverCloseTriggerProps extends HtmlIngredientProps<'button'> {}
+  export interface PopoverCloseTriggerProps extends HtmlProps<'button'> {}
 </script>
 
 <script lang="ts">

package/dist/popover/content.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" module>
-  import type {HtmlIngredientProps} from '../types.js';
+  import type {HtmlProps} from '../types.js';
 
-  export interface PopoverContentProps extends HtmlIngredientProps<'div'> {}
+  export interface PopoverContentProps extends HtmlProps<'div'> {}
 </script>
 
 <script lang="ts">

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

@@ -1,5 +1,6 @@
 import * as popover from '@zag-js/popover';
-export interface CreatePopoverProps extends popover.Context {
+export interface CreatePopoverProps extends Omit<popover.Context, 'id' | 'dir' | 'getRootNode' | 'open.controlled'> {
+    id?: string | null;
 }
 export interface CreatePopoverReturn extends popover.Api {
 }

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

@@ -1,7 +1,18 @@
+import { getEnvironmentContext } from '../environment-provider/context.svelte.js';
+import { getLocaleContext } from '../locale-provider/context.svelte.js';
+import { createUniqueId } from '../utils.svelte.js';
 import * as popover from '@zag-js/popover';
 import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
 export function createPopover(props) {
-    const [state, send] = useMachine(popover.machine(props));
+    const localeContext = getLocaleContext();
+    const environmentContext = getEnvironmentContext();
+    const [state, send] = useMachine(popover.machine({
+        ...props,
+        id: props.id ?? createUniqueId(),
+        dir: localeContext?.dir,
+        getRootNode: environmentContext?.getRootNode,
+        'open.controlled': props.open != null,
+    }));
     const api = $derived(reflect(() => popover.connect(state, send, normalizeProps)));
     return api;
 }

package/dist/popover/description.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" module>
-  import type {HtmlIngredientProps} from '../types.js';
+  import type {HtmlProps} from '../types.js';
 
-  export interface PopoverDescriptionProps extends HtmlIngredientProps<'div'> {}
+  export interface PopoverDescriptionProps extends HtmlProps<'div'> {}
 </script>
 
 <script lang="ts">

package/dist/popover/positioner.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" module>
-  import type {HtmlIngredientProps} from '../types.js';
+  import type {HtmlProps} from '../types.js';
 
-  export interface PopoverPositionerProps extends HtmlIngredientProps<'div'> {}
+  export interface PopoverPositionerProps extends HtmlProps<'div'> {}
 </script>
 
 <script lang="ts">

package/dist/popover/root.svelte

@@ -2,32 +2,18 @@
   import type {Snippet} from 'svelte';
   import type {CreatePopoverProps, CreatePopoverReturn} from './create-popover.svelte.js';
 
-  export interface PopoverProps extends Omit<CreatePopoverProps, 'id'> {
-    id?: string | null;
+  export interface PopoverProps extends CreatePopoverProps {
     children?: Snippet<[api: CreatePopoverReturn]>;
   }
 </script>
 
 <script lang="ts">
-  import {getEnvironmentContext} from '../environment-provider/index.js';
-  import {getLocaleContext} from '../locale-provider/index.js';
-  import {createUniqueId} from '../utils.svelte.js';
   import {popoverContext} from './context.svelte.js';
   import {createPopover} from './create-popover.svelte.js';
 
-  let {id, dir, getRootNode, children, ...props}: PopoverProps = $props();
+  let {children, ...props}: PopoverProps = $props();
 
-  let localeContext = getLocaleContext();
-  let environmentContext = getEnvironmentContext();
-
-  let uid = createUniqueId();
-
-  let context = createPopover({
-    id: id ?? uid,
-    dir: dir ?? localeContext?.dir,
-    getRootNode: getRootNode ?? environmentContext?.getRootNode,
-    ...props,
-  });
+  let context = createPopover(props);
 
   popoverContext.set(context);
 </script>

package/dist/popover/title.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" module>
-  import type {HtmlIngredientProps} from '../types.js';
+  import type {HtmlProps} from '../types.js';
 
-  export interface PopoverTitleProps extends HtmlIngredientProps<'div'> {}
+  export interface PopoverTitleProps extends HtmlProps<'div'> {}
 </script>
 
 <script lang="ts">

package/dist/popover/trigger.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" module>
-  import type {HtmlIngredientProps} from '../types.js';
+  import type {HtmlProps} from '../types.js';
 
-  export interface PopoverTriggerProps extends HtmlIngredientProps<'button'> {}
+  export interface PopoverTriggerProps extends HtmlProps<'button'> {}
 </script>
 
 <script lang="ts">

package/dist/portal/root.svelte

@@ -4,7 +4,6 @@
   export interface PortalProps {
     container?: HTMLElement;
     disabled?: boolean;
-    getRootNode?: () => ShadowRoot | Document | Node;
     children: Snippet;
   }
 </script>
@@ -13,15 +12,16 @@
   import {getEnvironmentContext} from '../environment-provider/index.js';
   import {portal} from '@zag-js/svelte';
 
-  let {container, disabled, getRootNode, children}: PortalProps = $props();
+  let {container, disabled, children}: PortalProps = $props();
+
   let environmentContext = getEnvironmentContext();
 </script>
 
 <div
   use:portal={{
-    container,
     disabled,
-    getRootNode: getRootNode ?? environmentContext?.getRootNode,
+    container,
+    getRootNode: environmentContext?.getRootNode,
   }}
   data-scope="portal"
   data-part="root"

package/dist/presence/root.svelte

@@ -1,9 +1,8 @@
 <script lang="ts" module>
-  import type {Assign, HtmlIngredientProps} from '../types.js';
+  import type {Assign, HtmlProps} from '../types.js';
   import type {Context} from '@zag-js/presence';
 
-  export interface PresenceProps
-    extends Assign<HtmlIngredientProps<'div'>, Context> {}
+  export interface PresenceProps extends Assign<HtmlProps<'div'>, Context> {}
 </script>
 
 <script lang="ts">

package/dist/progress/circle-range.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" module>
-  import type {HtmlIngredientProps} from '../types.js';
+  import type {HtmlProps} from '../types.js';
 
-  export interface ProgressCircleRangeProps extends HtmlIngredientProps<'circle'> {}
+  export interface ProgressCircleRangeProps extends HtmlProps<'circle'> {}
 </script>
 
 <script lang="ts">

package/dist/progress/circle-track.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" module>
-  import type {HtmlIngredientProps} from '../types.js';
+  import type {HtmlProps} from '../types.js';
 
-  export interface ProgressCircleTrackProps extends HtmlIngredientProps<'circle'> {}
+  export interface ProgressCircleTrackProps extends HtmlProps<'circle'> {}
 </script>
 
 <script lang="ts">

package/dist/progress/circle.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" module>
-  import type {HtmlIngredientProps} from '../types.js';
+  import type {HtmlProps} from '../types.js';
 
-  export interface ProgressCircleProps extends HtmlIngredientProps<'svg'> {}
+  export interface ProgressCircleProps extends HtmlProps<'svg'> {}
 </script>
 
 <script lang="ts">

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

@@ -1,5 +1,6 @@
 import * as progress from '@zag-js/progress';
-export interface CreateProgressProps extends progress.Context {
+export interface CreateProgressProps extends Omit<progress.Context, 'id' | 'dir' | 'getRootNode'> {
+    id?: string | null;
 }
 export interface CreateProgressReturn extends progress.Api<any> {
 }

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

@@ -1,7 +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 progress from '@zag-js/progress';
 import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
 export function createProgress(props) {
-    const [state, send] = useMachine(progress.machine(props));
+    const localeContext = getLocaleContext();
+    const environmentContext = getEnvironmentContext();
+    const [state, send] = useMachine(progress.machine({
+        ...props,
+        id: props.id ?? createUniqueId(),
+        dir: localeContext?.dir,
+        getRootNode: environmentContext?.getRootNode,
+    }));
     const api = $derived(reflect(() => progress.connect(state, send, normalizeProps)));
     return api;
 }

package/dist/progress/label.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" module>
-  import type {HtmlIngredientProps} from '../types.js';
+  import type {HtmlProps} from '../types.js';
 
-  export interface ProgressLabelProps extends HtmlIngredientProps<'div'> {}
+  export interface ProgressLabelProps extends HtmlProps<'div'> {}
 </script>
 
 <script lang="ts">