ui-ingredients 0.0.8 → 0.0.9

package/dist/progress/value-text.svelte

@@ -1,8 +1,7 @@
 <script lang="ts" context="module">
-  import type {Assign} from '../types.js';
-  import type {SvelteHTMLElements} from 'svelte/elements';
+  import type {SvelteHtmlProps} from '../types.js';
 
-  export interface ProgressValueTextProps extends Assign<SvelteHTMLElements['div'], {}> {}
+  export interface ProgressValueTextProps extends SvelteHtmlProps<'div'> {}
 </script>
 
 <script lang="ts">

package/dist/progress/value-text.svelte.d.ts

@@ -1,6 +1,5 @@
-import type { Assign } from '../types.js';
-import type { SvelteHTMLElements } from 'svelte/elements';
-export interface ProgressValueTextProps extends Assign<SvelteHTMLElements['div'], {}> {
+import type { SvelteHtmlProps } from '../types.js';
+export interface ProgressValueTextProps extends SvelteHtmlProps<'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/qr-code/frame.svelte

@@ -1,21 +1,20 @@
-<script lang="ts" context="module">
-  import type {Assign} from '../types.js';
-  import type {SvelteHTMLElements} from 'svelte/elements';
-
-  export interface QRCodeFrameProps extends Assign<SvelteHTMLElements['svg'], {}> {}
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
-  import {useQRCodeContext} from './context.svelte.js';
-
-  let {children, ...props}: QRCodeFrameProps = $props();
-
-  let context = useQRCodeContext();
-
-  let attrs = $derived(mergeProps(props, context.getFrameProps()));
-</script>
-
-<svg {...attrs}>
-  {@render children?.()}
-</svg>
+<script lang="ts" context="module">
+  import type {SvelteHtmlProps} from '../types.js';
+
+  export interface QRCodeFrameProps extends SvelteHtmlProps<'svg'> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {useQRCodeContext} from './context.svelte.js';
+
+  let {children, ...props}: QRCodeFrameProps = $props();
+
+  let context = useQRCodeContext();
+
+  let attrs = $derived(mergeProps(props, context.getFrameProps()));
+</script>
+
+<svg {...attrs}>
+  {@render children?.()}
+</svg>

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

@@ -1,6 +1,5 @@
-import type { Assign } from '../types.js';
-import type { SvelteHTMLElements } from 'svelte/elements';
-export interface QRCodeFrameProps extends Assign<SvelteHTMLElements['svg'], {}> {
+import type { SvelteHtmlProps } from '../types.js';
+export interface QRCodeFrameProps extends SvelteHtmlProps<'svg'> {
 }
 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/qr-code/overlay.svelte

@@ -1,21 +1,20 @@
-<script lang="ts" context="module">
-  import type {Assign} from '../types.js';
-  import type {SvelteHTMLElements} from 'svelte/elements';
-
-  export interface QRCodeOverlayProps extends Assign<SvelteHTMLElements['div'], {}> {}
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
-  import {useQRCodeContext} from './context.svelte.js';
-
-  let {children, ...props}: QRCodeOverlayProps = $props();
-
-  let context = useQRCodeContext();
-
-  let attrs = $derived(mergeProps(props, context.getOverlayProps()));
-</script>
-
-<div {...attrs}>
-  {@render children?.()}
-</div>
+<script lang="ts" context="module">
+  import type {SvelteHtmlProps} from '../types.js';
+
+  export interface QRCodeOverlayProps extends SvelteHtmlProps<'div'> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {useQRCodeContext} from './context.svelte.js';
+
+  let {children, ...props}: QRCodeOverlayProps = $props();
+
+  let context = useQRCodeContext();
+
+  let attrs = $derived(mergeProps(props, context.getOverlayProps()));
+</script>
+
+<div {...attrs}>
+  {@render children?.()}
+</div>

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

@@ -1,6 +1,5 @@
-import type { Assign } from '../types.js';
-import type { SvelteHTMLElements } from 'svelte/elements';
-export interface QRCodeOverlayProps extends Assign<SvelteHTMLElements['div'], {}> {
+import type { SvelteHtmlProps } from '../types.js';
+export interface QRCodeOverlayProps extends SvelteHtmlProps<'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/qr-code/pattern.svelte

@@ -1,21 +1,20 @@
-<script lang="ts" context="module">
-  import type {Assign} from '../types.js';
-  import type {SvelteHTMLElements} from 'svelte/elements';
-
-  export interface QRCodePatternProps extends Assign<SvelteHTMLElements['path'], {}> {}
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
-  import {useQRCodeContext} from './context.svelte.js';
-
-  let {children, ...props}: QRCodePatternProps = $props();
-
-  let context = useQRCodeContext();
-
-  let attrs = $derived(mergeProps(props, context.getPatternProps()));
-</script>
-
-<path {...attrs}>
-  {@render children?.()}
-</path>
+<script lang="ts" context="module">
+  import type {SvelteHtmlProps} from '../types.js';
+
+  export interface QRCodePatternProps extends SvelteHtmlProps<'path'> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {useQRCodeContext} from './context.svelte.js';
+
+  let {children, ...props}: QRCodePatternProps = $props();
+
+  let context = useQRCodeContext();
+
+  let attrs = $derived(mergeProps(props, context.getPatternProps()));
+</script>
+
+<path {...attrs}>
+  {@render children?.()}
+</path>

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

@@ -1,6 +1,5 @@
-import type { Assign } from '../types.js';
-import type { SvelteHTMLElements } from 'svelte/elements';
-export interface QRCodePatternProps extends Assign<SvelteHTMLElements['path'], {}> {
+import type { SvelteHtmlProps } from '../types.js';
+export interface QRCodePatternProps extends SvelteHtmlProps<'path'> {
 }
 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/qr-code/root.svelte

@@ -1,48 +1,50 @@
-<script lang="ts" context="module">
-  import type {Assign, OptionalId, WithoutChildren} from '../types.js';
-  import type {Snippet} from 'svelte';
-  import type {SvelteHTMLElements} from 'svelte/elements';
-  import type {CreateQRCodeContextProps, CreateQRCodeContextReturn} from './context.svelte.js';
-
-  export interface QRCodeProps
-    extends Assign<
-      WithoutChildren<SvelteHTMLElements['div']>,
-      OptionalId<CreateQRCodeContextProps>
-    > {
-    children?: Snippet<[CreateQRCodeContextReturn]>;
-  }
-</script>
-
-<script lang="ts">
-  import {uuid} from '../utils.svelte.js';
-  import {mergeProps} from '@zag-js/svelte';
-  import {createQRCodeContext, setQRCodeContext} from './context.svelte.js';
-
-  let {
-    id = uuid(),
-    ids,
-    dir,
-    value,
-    encoding,
-    getRootNode,
-    children,
-    ...props
-  }: QRCodeProps = $props();
-
-  let context = createQRCodeContext({
-    id,
-    ids,
-    dir,
-    value: $state.snapshot(value),
-    encoding,
-    getRootNode,
-  });
-
-  let attrs = $derived(mergeProps(props, context.getRootProps()));
-
-  setQRCodeContext(context);
-</script>
-
-<div {...attrs}>
-  {@render children?.(context)}
-</div>
+<script lang="ts" context="module">
+  import type {Assign, SvelteHtmlProps} from '../types.js';
+  import type {Snippet} from 'svelte';
+  import type {
+    CreateQRCodeContextProps,
+    CreateQRCodeContextReturn,
+  } from './context.svelte.js';
+
+  export interface QRCodeProps
+    extends Assign<
+      Omit<SvelteHtmlProps<'div'>, 'children'>,
+      Omit<CreateQRCodeContextProps, 'id'>
+    > {
+    children?: Snippet<[context: CreateQRCodeContextReturn]>;
+  }
+</script>
+
+<script lang="ts">
+  import {uuid} from '../utils.svelte.js';
+  import {mergeProps} from '@zag-js/svelte';
+  import {createQRCodeContext, setQRCodeContext} from './context.svelte.js';
+
+  let {
+    id,
+    ids,
+    dir,
+    value,
+    encoding,
+    getRootNode,
+    children,
+    ...props
+  }: QRCodeProps = $props();
+
+  let context = createQRCodeContext({
+    id: id ?? uuid(),
+    ids,
+    dir,
+    value: $state.snapshot(value),
+    encoding,
+    getRootNode,
+  });
+
+  let attrs = $derived(mergeProps(props, context.getRootProps()));
+
+  setQRCodeContext(context);
+</script>
+
+<div {...attrs}>
+  {@render children?.(context)}
+</div>

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

@@ -1,9 +1,8 @@
-import type { Assign, OptionalId, WithoutChildren } from '../types.js';
+import type { Assign, SvelteHtmlProps } from '../types.js';
 import type { Snippet } from 'svelte';
-import type { SvelteHTMLElements } from 'svelte/elements';
 import type { CreateQRCodeContextProps, CreateQRCodeContextReturn } from './context.svelte.js';
-export interface QRCodeProps extends Assign<WithoutChildren<SvelteHTMLElements['div']>, OptionalId<CreateQRCodeContextProps>> {
-    children?: Snippet<[CreateQRCodeContextReturn]>;
+export interface QRCodeProps extends Assign<Omit<SvelteHtmlProps<'div'>, 'children'>, Omit<CreateQRCodeContextProps, 'id'>> {
+    children?: Snippet<[context: CreateQRCodeContextReturn]>;
 }
 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/radio-group/index.d.ts

@@ -1,7 +1,7 @@
-export { default as Indicator, type RadioGroupIndicatorProps } from './indicator.svelte';
-export { default as ItemControl, type RadioGroupItemControlProps } from './item-control.svelte';
+export { default as Indicator, type RadioGroupIndicatorProps, } from './indicator.svelte';
+export { default as ItemControl, type RadioGroupItemControlProps, } from './item-control.svelte';
 export { default as ItemHiddenInput, type RadioGroupItemHiddenInputProps, } from './item-hidden-input.svelte';
-export { default as ItemText, type RadioGroupItemTextProps } from './item-text.svelte';
+export { default as ItemText, type RadioGroupItemTextProps, } from './item-text.svelte';
 export { default as Item, type RadioGroupItemProps } from './item.svelte';
 export { default as Label, type RadioGroupLabelProps } from './label.svelte';
 export { default as Root, type RadioGroupProps } from './root.svelte';

package/dist/radio-group/index.js

@@ -1,7 +1,7 @@
-export { default as Indicator } from './indicator.svelte';
-export { default as ItemControl } from './item-control.svelte';
+export { default as Indicator, } from './indicator.svelte';
+export { default as ItemControl, } from './item-control.svelte';
 export { default as ItemHiddenInput, } from './item-hidden-input.svelte';
-export { default as ItemText } from './item-text.svelte';
+export { default as ItemText, } from './item-text.svelte';
 export { default as Item } from './item.svelte';
 export { default as Label } from './label.svelte';
 export { default as Root } from './root.svelte';

package/dist/radio-group/indicator.svelte

@@ -1,8 +1,7 @@
 <script lang="ts" context="module">
-  import type {Assign} from '../types.js';
-  import type {SvelteHTMLElements} from 'svelte/elements';
+  import type {SvelteHtmlProps} from '../types.js';
 
-  export interface RadioGroupIndicatorProps extends Assign<SvelteHTMLElements['span'], {}> {}
+  export interface RadioGroupIndicatorProps extends SvelteHtmlProps<'span'> {}
 </script>
 
 <script lang="ts">

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

@@ -1,6 +1,5 @@
-import type { Assign } from '../types.js';
-import type { SvelteHTMLElements } from 'svelte/elements';
-export interface RadioGroupIndicatorProps extends Assign<SvelteHTMLElements['span'], {}> {
+import type { SvelteHtmlProps } from '../types.js';
+export interface RadioGroupIndicatorProps extends SvelteHtmlProps<'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/radio-group/item-control.svelte

@@ -1,20 +1,24 @@
 <script lang="ts" context="module">
-  import type {Assign} from '../types.js';
-  import type {SvelteHTMLElements} from 'svelte/elements';
+  import type {SvelteHtmlProps} from '../types.js';
 
-  export interface RadioGroupItemControlProps extends Assign<SvelteHTMLElements['div'], {}> {}
+  export interface RadioGroupItemControlProps extends SvelteHtmlProps<'div'> {}
 </script>
 
 <script lang="ts">
   import {mergeProps} from '@zag-js/svelte';
-  import {useRadioGroupContext, useRadioGroupItemContext} from './context.svelte.js';
+  import {
+    useRadioGroupContext,
+    useRadioGroupItemContext,
+  } from './context.svelte.js';
 
   let {children, ...props}: RadioGroupItemControlProps = $props();
 
   let context = useRadioGroupContext();
   let itemContext = useRadioGroupItemContext();
 
-  let attrs = $derived(mergeProps(props, context.getItemControlProps(itemContext)));
+  let attrs = $derived(
+    mergeProps(props, context.getItemControlProps(itemContext)),
+  );
 </script>
 
 <div {...attrs}>

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

@@ -1,6 +1,5 @@
-import type { Assign } from '../types.js';
-import type { SvelteHTMLElements } from 'svelte/elements';
-export interface RadioGroupItemControlProps extends Assign<SvelteHTMLElements['div'], {}> {
+import type { SvelteHtmlProps } from '../types.js';
+export interface RadioGroupItemControlProps extends SvelteHtmlProps<'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/radio-group/item-hidden-input.svelte

@@ -1,20 +1,25 @@
 <script lang="ts" context="module">
-  import type {Assign} from '../types.js';
-  import type {SvelteHTMLElements} from 'svelte/elements';
+  import type {SvelteHtmlProps} from '../types.js';
 
-  export interface RadioGroupItemHiddenInputProps extends Assign<SvelteHTMLElements['input'], {}> {}
+  export interface RadioGroupItemHiddenInputProps
+    extends SvelteHtmlProps<'input'> {}
 </script>
 
 <script lang="ts">
   import {mergeProps} from '@zag-js/svelte';
-  import {useRadioGroupContext, useRadioGroupItemContext} from './context.svelte.js';
+  import {
+    useRadioGroupContext,
+    useRadioGroupItemContext,
+  } from './context.svelte.js';
 
   let {...props}: RadioGroupItemHiddenInputProps = $props();
 
   let context = useRadioGroupContext();
   let itemContext = useRadioGroupItemContext();
 
-  let attrs = $derived(mergeProps(props, context.getItemHiddenInputProps(itemContext)));
+  let attrs = $derived(
+    mergeProps(props, context.getItemHiddenInputProps(itemContext)),
+  );
 </script>
 
 <input {...attrs} />

package/dist/radio-group/item-hidden-input.svelte.d.ts

@@ -1,6 +1,5 @@
-import type { Assign } from '../types.js';
-import type { SvelteHTMLElements } from 'svelte/elements';
-export interface RadioGroupItemHiddenInputProps extends Assign<SvelteHTMLElements['input'], {}> {
+import type { SvelteHtmlProps } from '../types.js';
+export interface RadioGroupItemHiddenInputProps extends SvelteHtmlProps<'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/radio-group/item-text.svelte

@@ -1,20 +1,24 @@
 <script lang="ts" context="module">
-  import type {Assign} from '../types.js';
-  import type {SvelteHTMLElements} from 'svelte/elements';
+  import type {SvelteHtmlProps} from '../types.js';
 
-  export interface RadioGroupItemTextProps extends Assign<SvelteHTMLElements['span'], {}> {}
+  export interface RadioGroupItemTextProps extends SvelteHtmlProps<'span'> {}
 </script>
 
 <script lang="ts">
   import {mergeProps} from '@zag-js/svelte';
-  import {useRadioGroupContext, useRadioGroupItemContext} from './context.svelte.js';
+  import {
+    useRadioGroupContext,
+    useRadioGroupItemContext,
+  } from './context.svelte.js';
 
   let {children, ...props}: RadioGroupItemTextProps = $props();
 
   let context = useRadioGroupContext();
   let itemContext = useRadioGroupItemContext();
 
-  let attrs = $derived(mergeProps(props, context.getItemTextProps(itemContext)));
+  let attrs = $derived(
+    mergeProps(props, context.getItemTextProps(itemContext)),
+  );
 </script>
 
 <span {...attrs}>

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

@@ -1,6 +1,5 @@
-import type { Assign } from '../types.js';
-import type { SvelteHTMLElements } from 'svelte/elements';
-export interface RadioGroupItemTextProps extends Assign<SvelteHTMLElements['span'], {}> {
+import type { SvelteHtmlProps } from '../types.js';
+export interface RadioGroupItemTextProps extends SvelteHtmlProps<'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/radio-group/item.svelte

@@ -1,19 +1,40 @@
 <script lang="ts" context="module">
-  import type {Assign} from '../types.js';
-  import type {ItemProps} from '@zag-js/radio-group';
-  import type {SvelteHTMLElements} from 'svelte/elements';
+  import type {Assign, SvelteHtmlProps} from '../types.js';
+  import type {ItemProps, ItemState} from '@zag-js/radio-group';
+  import type {Snippet} from 'svelte';
 
-  export interface RadioGroupItemProps extends Assign<SvelteHTMLElements['label'], ItemProps> {}
+  export interface RadioGroupItemProps
+    extends Assign<Omit<SvelteHtmlProps<'label'>, 'children'>, ItemProps> {
+    children?: Snippet<[state: ItemState]>;
+  }
 </script>
 
 <script lang="ts">
   import {mergeProps} from '@zag-js/svelte';
-  import {setRadioGroupItemContext, useRadioGroupContext} from './context.svelte.js';
+  import {
+    setRadioGroupItemContext,
+    useRadioGroupContext,
+  } from './context.svelte.js';
 
-  let {value, invalid, disabled, children, ...props}: RadioGroupItemProps = $props();
+  let {
+    /**/
+    value,
+    invalid,
+    disabled,
+    children,
+    ...props
+  }: RadioGroupItemProps = $props();
 
   let context = useRadioGroupContext();
 
+  let state = $derived(
+    context.getItemState({
+      value,
+      invalid,
+      disabled,
+    }),
+  );
+
   let attrs = $derived(
     mergeProps(
       props,
@@ -33,5 +54,5 @@
 </script>
 
 <label {...attrs}>
-  {@render children?.()}
+  {@render children?.(state)}
 </label>

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

@@ -1,7 +1,8 @@
-import type { Assign } from '../types.js';
-import type { ItemProps } from '@zag-js/radio-group';
-import type { SvelteHTMLElements } from 'svelte/elements';
-export interface RadioGroupItemProps extends Assign<SvelteHTMLElements['label'], ItemProps> {
+import type { Assign, SvelteHtmlProps } from '../types.js';
+import type { ItemProps, ItemState } from '@zag-js/radio-group';
+import type { Snippet } from 'svelte';
+export interface RadioGroupItemProps extends Assign<Omit<SvelteHtmlProps<'label'>, 'children'>, ItemProps> {
+    children?: Snippet<[state: ItemState]>;
 }
 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/radio-group/label.svelte

@@ -1,8 +1,7 @@
 <script lang="ts" context="module">
-  import type {Assign} from '../types.js';
-  import type {SvelteHTMLElements} from 'svelte/elements';
+  import type {SvelteHtmlProps} from '../types.js';
 
-  export interface RadioGroupLabelProps extends Assign<SvelteHTMLElements['span'], {}> {}
+  export interface RadioGroupLabelProps extends SvelteHtmlProps<'span'> {}
 </script>
 
 <script lang="ts">

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

@@ -1,6 +1,5 @@
-import type { Assign } from '../types.js';
-import type { SvelteHTMLElements } from 'svelte/elements';
-export interface RadioGroupLabelProps extends Assign<SvelteHTMLElements['span'], {}> {
+import type { SvelteHtmlProps } from '../types.js';
+export interface RadioGroupLabelProps extends SvelteHtmlProps<'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/radio-group/root.svelte

@@ -1,7 +1,6 @@
 <script lang="ts" context="module">
-  import type {Assign, OptionalId, WithoutChildren} from '../types.js';
+  import type {Assign, SvelteHtmlProps} from '../types.js';
   import type {Snippet} from 'svelte';
-  import type {SvelteHTMLElements} from 'svelte/elements';
   import type {
     CreateRadioGroupContextProps,
     CreateRadioGroupContextReturn,
@@ -9,20 +8,23 @@
 
   export interface RadioGroupProps
     extends Assign<
-      WithoutChildren<SvelteHTMLElements['div']>,
-      OptionalId<CreateRadioGroupContextProps>
+      Omit<SvelteHtmlProps<'div'>, 'children'>,
+      Omit<CreateRadioGroupContextProps, 'id'>
     > {
-    children?: Snippet<[CreateRadioGroupContextReturn]>;
+    children?: Snippet<[context: CreateRadioGroupContextReturn]>;
   }
 </script>
 
 <script lang="ts">
   import {uuid} from '../utils.svelte.js';
   import {mergeProps} from '@zag-js/svelte';
-  import {createRadioGroupContext, setRadioGroupContext} from './context.svelte.js';
+  import {
+    createRadioGroupContext,
+    setRadioGroupContext,
+  } from './context.svelte.js';
 
   let {
-    id = uuid(),
+    id,
     ids,
     dir,
     form,
@@ -38,7 +40,7 @@
   }: RadioGroupProps = $props();
 
   let context = createRadioGroupContext({
-    id,
+    id: id ?? uuid(),
     ids,
     dir,
     form,

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

@@ -1,9 +1,8 @@
-import type { Assign, OptionalId, WithoutChildren } from '../types.js';
+import type { Assign, SvelteHtmlProps } from '../types.js';
 import type { Snippet } from 'svelte';
-import type { SvelteHTMLElements } from 'svelte/elements';
 import type { CreateRadioGroupContextProps, CreateRadioGroupContextReturn } from './context.svelte.js';
-export interface RadioGroupProps extends Assign<WithoutChildren<SvelteHTMLElements['div']>, OptionalId<CreateRadioGroupContextProps>> {
-    children?: Snippet<[CreateRadioGroupContextReturn]>;
+export interface RadioGroupProps extends Assign<Omit<SvelteHtmlProps<'div'>, 'children'>, Omit<CreateRadioGroupContextProps, 'id'>> {
+    children?: Snippet<[context: CreateRadioGroupContextReturn]>;
 }
 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/rating-group/context.svelte.d.ts

@@ -0,0 +1,10 @@
+import * as ratingGroup from '@zag-js/rating-group';
+export interface CreateRatingGroupContextProps extends ratingGroup.Context {
+}
+export interface CreateRatingGroupContextReturn extends ReturnType<typeof createRatingGroupContext> {
+}
+export declare function createRatingGroupContext(props: CreateRatingGroupContextProps): any;
+export declare function setRatingGroupContext(value: CreateRatingGroupContextReturn): void;
+export declare function useRatingGroupContext(): CreateRatingGroupContextReturn;
+export declare function setRatingGroupItemContext(value: ratingGroup.ItemProps): void;
+export declare function useRatingGroupItemContext(): ratingGroup.ItemProps;