ui-ingredients 0.0.7 → 0.0.9

package/dist/progress/range.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 ProgressRangeProps extends Assign<SvelteHTMLElements['div'], {}> {}
+  export interface ProgressRangeProps extends SvelteHtmlProps<'div'> {}
 </script>
 
 <script lang="ts">

package/dist/progress/range.svelte.d.ts

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

@@ -1,15 +1,17 @@
 <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 {CreateProgressContextProps, CreateProgressContextReturn} from './context.svelte.js';
+  import type {
+    CreateProgressContextProps,
+    CreateProgressContextReturn,
+  } from './context.svelte.js';
 
   export interface ProgressProps
     extends Assign<
-      WithoutChildren<SvelteHTMLElements['div']>,
-      OptionalId<CreateProgressContextProps>
+      Omit<SvelteHtmlProps<'div'>, 'children'>,
+      Omit<CreateProgressContextProps, 'id'>
     > {
-    children?: Snippet<[CreateProgressContextReturn]>;
+    children?: Snippet<[context: CreateProgressContextReturn]>;
   }
 </script>
 
@@ -19,7 +21,7 @@
   import {createProgressContext, setProgressContext} from './context.svelte.js';
 
   let {
-    id = uuid(),
+    id,
     ids,
     dir,
     max,
@@ -33,7 +35,7 @@
   }: ProgressProps = $props();
 
   let context = createProgressContext({
-    id,
+    id: id ?? uuid(),
     ids,
     dir,
     max,

package/dist/progress/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 { CreateProgressContextProps, CreateProgressContextReturn } from './context.svelte.js';
-export interface ProgressProps extends Assign<WithoutChildren<SvelteHTMLElements['div']>, OptionalId<CreateProgressContextProps>> {
-    children?: Snippet<[CreateProgressContextReturn]>;
+export interface ProgressProps extends Assign<Omit<SvelteHtmlProps<'div'>, 'children'>, Omit<CreateProgressContextProps, 'id'>> {
+    children?: Snippet<[context: CreateProgressContextReturn]>;
 }
 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/progress/track.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 ProgressTrackProps extends Assign<SvelteHTMLElements['div'], {}> {}
+  export interface ProgressTrackProps extends SvelteHtmlProps<'div'> {}
 </script>
 
 <script lang="ts">

package/dist/progress/track.svelte.d.ts

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

@@ -0,0 +1,8 @@
+import * as qrCode from '@zag-js/qr-code';
+export interface CreateQRCodeContextProps extends qrCode.Context {
+}
+export interface CreateQRCodeContextReturn extends ReturnType<typeof createQRCodeContext> {
+}
+export declare function createQRCodeContext(props: CreateQRCodeContextProps): any;
+export declare function setQRCodeContext(value: CreateQRCodeContextReturn): void;
+export declare function useQRCodeContext(): CreateQRCodeContextReturn;

package/dist/qr-code/context.svelte.js

@@ -0,0 +1,14 @@
+import * as qrCode from '@zag-js/qr-code';
+import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
+import { getContext, setContext } from 'svelte';
+export function createQRCodeContext(props) {
+    const [state, send] = useMachine(qrCode.machine(props));
+    const api = $derived(reflect(() => qrCode.connect(state, send, normalizeProps)));
+    return api;
+}
+export function setQRCodeContext(value) {
+    setContext('QRCode', value);
+}
+export function useQRCodeContext() {
+    return getContext('QRCode');
+}

package/dist/qr-code/frame.svelte

@@ -0,0 +1,20 @@
+<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

@@ -0,0 +1,21 @@
+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> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Frame: $$__sveltets_2_IsomorphicComponent<QRCodeFrameProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type Frame = InstanceType<typeof Frame>;
+export default Frame;

package/dist/qr-code/index.d.ts

@@ -0,0 +1,4 @@
+export { default as Frame, type QRCodeFrameProps } from './frame.svelte';
+export { default as Overlay, type QRCodeOverlayProps } from './overlay.svelte';
+export { default as Pattern, type QRCodePatternProps } from './pattern.svelte';
+export { default as Root, type QRCodeProps } from './root.svelte';

package/dist/qr-code/index.js

@@ -0,0 +1,4 @@
+export { default as Frame } from './frame.svelte';
+export { default as Overlay } from './overlay.svelte';
+export { default as Pattern } from './pattern.svelte';
+export { default as Root } from './root.svelte';

package/dist/qr-code/overlay.svelte

@@ -0,0 +1,20 @@
+<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

@@ -0,0 +1,21 @@
+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> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Overlay: $$__sveltets_2_IsomorphicComponent<QRCodeOverlayProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type Overlay = InstanceType<typeof Overlay>;
+export default Overlay;

package/dist/qr-code/pattern.svelte

@@ -0,0 +1,20 @@
+<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

@@ -0,0 +1,21 @@
+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> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Pattern: $$__sveltets_2_IsomorphicComponent<QRCodePatternProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type Pattern = InstanceType<typeof Pattern>;
+export default Pattern;

package/dist/qr-code/root.svelte

@@ -0,0 +1,50 @@
+<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

@@ -0,0 +1,24 @@
+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]>;
+}
+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> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Root: $$__sveltets_2_IsomorphicComponent<QRCodeProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type Root = InstanceType<typeof Root>;
+export default Root;

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> & {