ui-ingredients 0.0.17 → 0.0.19

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">

package/dist/progress/range.svelte

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

package/dist/progress/root.svelte

@@ -1,51 +1,40 @@
 <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 {CreateProgressProps, CreateProgressReturn} from './create-progress.svelte.js';
 
   export interface ProgressProps
-    extends Assign<Omit<HtmlIngredientProps<'div'>, 'children'>, Omit<CreateProgressProps, 'id'>> {
+    extends Assign<Omit<HtmlProps<'div'>, 'children'>, CreateProgressProps> {
     children?: Snippet<[api: CreateProgressReturn]>;
   }
 </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 {progressContext} from './context.svelte.js';
   import {createProgress} from './create-progress.svelte.js';
 
   let {
+    /**/
     id,
     ids,
-    dir,
     max,
     min,
     value,
     orientation,
     translations,
-    getRootNode,
     children,
     ...props
   }: ProgressProps = $props();
 
-  let localeContext = getLocaleContext();
-  let environmentContext = getEnvironmentContext();
-
-  let uid = createUniqueId();
-
   let context = createProgress({
-    id: id ?? uid,
+    id,
     ids,
-    dir: dir ?? localeContext?.dir,
     max,
     min,
     value: $state.snapshot(value),
     orientation,
     translations,
-    getRootNode: getRootNode ?? environmentContext?.getRootNode,
   });
 
   let attrs = $derived(mergeProps(props, context.getRootProps()));

package/dist/progress/track.svelte

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

package/dist/progress/value-text.svelte

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

package/dist/qr-code/create-qr-code.svelte.d.ts

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

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

package/dist/qr-code/frame.svelte

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

package/dist/qr-code/overlay.svelte

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

package/dist/qr-code/pattern.svelte

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

package/dist/qr-code/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 {CreateQRCodeProps, CreateQRCodeReturn} from './create-qr-code.svelte.js';
 
   export interface QRCodeProps
-    extends Assign<Omit<HtmlIngredientProps<'div'>, 'children'>, Omit<CreateQRCodeProps, 'id'>> {
+    extends Assign<Omit<HtmlProps<'div'>, 'children'>, CreateQRCodeProps> {
     children?: Snippet<[api: CreateQRCodeReturn]>;
   }
 </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 {qrCodeContext} from './context.svelte.js';
   import {createQRCode} from './create-qr-code.svelte.js';
@@ -21,26 +18,17 @@
     /**/
     id,
     ids,
-    dir,
     value,
     encoding,
-    getRootNode,
     children,
     ...props
   }: QRCodeProps = $props();
 
-  let localeContext = getLocaleContext();
-  let environmentContext = getEnvironmentContext();
-
-  let uid = createUniqueId();
-
   let context = createQRCode({
-    id: id ?? uid,
+    id,
     ids,
-    dir: dir ?? localeContext?.dir,
     value: $state.snapshot(value),
     encoding,
-    getRootNode: getRootNode ?? environmentContext?.getRootNode,
   });
 
   let attrs = $derived(mergeProps(props, context.getRootProps()));

package/dist/radio-group/create-radio-group.svelte.d.ts

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

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

package/dist/radio-group/indicator.svelte

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

package/dist/radio-group/item-control.svelte

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

package/dist/radio-group/item-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 RadioGroupItemHiddenInputProps extends HtmlIngredientProps<'input'> {}
+  export interface RadioGroupItemHiddenInputProps extends HtmlProps<'input'> {}
 </script>
 
 <script lang="ts">

package/dist/radio-group/item-text.svelte

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

package/dist/radio-group/item.svelte

@@ -1,10 +1,10 @@
 <script lang="ts" module>
-  import type {Assign, HtmlIngredientProps} from '../types.js';
+  import type {Assign, HtmlProps} from '../types.js';
   import type {ItemProps, ItemState} from '@zag-js/radio-group';
   import type {Snippet} from 'svelte';
 
   export interface RadioGroupItemProps
-    extends Assign<Omit<HtmlIngredientProps<'label'>, 'children'>, ItemProps> {
+    extends Assign<Omit<HtmlProps<'label'>, 'children'>, ItemProps> {
     children?: Snippet<[state: ItemState]>;
   }
 </script>

package/dist/radio-group/label.svelte

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

package/dist/radio-group/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 {CreateRadioGroupProps, CreateRadioGroupReturn} from './create-radio-group.svelte.js';
 
   export interface RadioGroupProps
-    extends Assign<
-      Omit<HtmlIngredientProps<'div'>, 'children'>,
-      Omit<CreateRadioGroupProps, 'id'>
-    > {
+    extends Assign<Omit<HtmlProps<'div'>, 'children'>, CreateRadioGroupProps> {
     children?: Snippet<[api: CreateRadioGroupReturn]>;
   }
 </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 {radioGroupContext} from './context.svelte.js';
   import {createRadioGroup} from './create-radio-group.svelte.js';
@@ -23,7 +17,6 @@
   let {
     id,
     ids,
-    dir,
     form,
     name,
     value,
@@ -31,20 +24,13 @@
     readOnly,
     orientation,
     onValueChange,
-    getRootNode,
     children,
     ...props
   }: RadioGroupProps = $props();
 
-  let localeContext = getLocaleContext();
-  let environmentContext = getEnvironmentContext();
-
-  let uid = createUniqueId();
-
   let context = createRadioGroup({
-    id: id ?? uid,
+    id,
     ids,
-    dir: dir ?? localeContext?.dir,
     form,
     name,
     value: $state.snapshot(value),
@@ -52,7 +38,6 @@
     readOnly,
     orientation,
     onValueChange,
-    getRootNode: getRootNode ?? environmentContext?.getRootNode,
   });
 
   let attrs = $derived(mergeProps(props, context.getRootProps()));

package/dist/rating-group/control.svelte

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

package/dist/rating-group/create-rating-group.svelte.d.ts

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

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

package/dist/rating-group/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 RatingGroupHiddenInputProps extends HtmlIngredientProps<'input'> {}
+  export interface RatingGroupHiddenInputProps extends HtmlProps<'input'> {}
 </script>
 
 <script lang="ts">

package/dist/rating-group/item.svelte

@@ -1,10 +1,10 @@
 <script lang="ts" module>
-  import type {Assign, HtmlIngredientProps} from '../types.js';
+  import type {Assign, HtmlProps} from '../types.js';
   import type {ItemProps, ItemState} from '@zag-js/rating-group';
   import type {Snippet} from 'svelte';
 
   export interface RatingGroupItemProps
-    extends Assign<Omit<HtmlIngredientProps<'div'>, 'children'>, ItemProps> {
+    extends Assign<Omit<HtmlProps<'div'>, 'children'>, ItemProps> {
     children: Snippet<[state: ItemState]>;
   }
 </script>

package/dist/rating-group/label.svelte

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

package/dist/rating-group/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 {
     CreateRatingGroupProps,
@@ -7,18 +7,12 @@
   } from './create-rating-group.svelte.js';
 
   export interface RatingGroupProps
-    extends Assign<
-      Omit<HtmlIngredientProps<'div'>, 'children'>,
-      Omit<CreateRatingGroupProps, 'id'>
-    > {
+    extends Assign<Omit<HtmlProps<'div'>, 'children'>, CreateRatingGroupProps> {
     children?: Snippet<[api: CreateRatingGroupReturn]>;
   }
 </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 {ratingGroupContext} from './context.svelte.js';
   import {createRatingGroup} from './create-rating-group.svelte.js';
@@ -26,7 +20,6 @@
   let {
     id,
     ids,
-    dir,
     form,
     name,
     count,
@@ -39,20 +32,13 @@
     translations,
     onHoverChange,
     onValueChange,
-    getRootNode,
     children,
     ...props
   }: RatingGroupProps = $props();
 
-  let localeContext = getLocaleContext();
-  let environmentContext = getEnvironmentContext();
-
-  let uid = createUniqueId();
-
   let context = createRatingGroup({
-    id: id ?? uid,
+    id,
     ids,
-    dir: dir ?? localeContext?.dir,
     form,
     name,
     count,
@@ -65,7 +51,6 @@
     translations,
     onHoverChange,
     onValueChange,
-    getRootNode: getRootNode ?? environmentContext?.getRootNode,
   });
 
   let attrs = $derived(mergeProps(props, context.getRootProps()));

package/dist/segment-group/create-segment-group.svelte.d.ts

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

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

package/dist/segment-group/indicator.svelte

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

package/dist/segment-group/item-control.svelte

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

package/dist/segment-group/item-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 SegmentGroupItemHiddenInputProps extends HtmlIngredientProps<'input'> {}
+  export interface SegmentGroupItemHiddenInputProps extends HtmlProps<'input'> {}
 </script>
 
 <script lang="ts">

package/dist/segment-group/item-text.svelte

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

package/dist/segment-group/item.svelte

@@ -1,10 +1,10 @@
 <script lang="ts" module>
-  import type {Assign, HtmlIngredientProps} from '../types.js';
+  import type {Assign, HtmlProps} from '../types.js';
   import type {ItemProps, ItemState} from '@zag-js/radio-group';
   import type {Snippet} from 'svelte';
 
   export interface SegmentGroupItemProps
-    extends Assign<Omit<HtmlIngredientProps<'label'>, 'children'>, ItemProps> {
+    extends Assign<Omit<HtmlProps<'label'>, 'children'>, ItemProps> {
     children?: Snippet<[state: ItemState]>;
   }
 </script>

package/dist/segment-group/label.svelte

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