ui-ingredients 0.0.8 → 0.0.10

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;

package/dist/rating-group/context.svelte.js

@@ -0,0 +1,20 @@
+import * as ratingGroup from '@zag-js/rating-group';
+import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
+import { getContext, setContext } from 'svelte';
+export function createRatingGroupContext(props) {
+    const [state, send] = useMachine(ratingGroup.machine(props));
+    const api = $derived(reflect(() => ratingGroup.connect(state, send, normalizeProps)));
+    return api;
+}
+export function setRatingGroupContext(value) {
+    setContext('RatingGroup', value);
+}
+export function useRatingGroupContext() {
+    return getContext('RatingGroup');
+}
+export function setRatingGroupItemContext(value) {
+    setContext('RatingGroupItem', value);
+}
+export function useRatingGroupItemContext() {
+    return getContext('RatingGroupItem');
+}

package/dist/rating-group/control.svelte

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

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

@@ -0,0 +1,21 @@
+import type { SvelteHtmlProps } from '../types.js';
+export interface RatingGroupControlProps 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 Control: $$__sveltets_2_IsomorphicComponent<RatingGroupControlProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type Control = InstanceType<typeof Control>;
+export default Control;

package/dist/rating-group/hidden-input.svelte

@@ -0,0 +1,19 @@
+<script lang="ts" context="module">
+  import type {SvelteHtmlProps} from '../types.js';
+
+  export interface RatingGroupHiddenInputProps
+    extends SvelteHtmlProps<'input'> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {useRatingGroupContext} from './context.svelte.js';
+
+  let {...props}: RatingGroupHiddenInputProps = $props();
+
+  let context = useRatingGroupContext();
+
+  let attrs = $derived(mergeProps(props, context.getHiddenInputProps()));
+</script>
+
+<input {...attrs} />

package/dist/rating-group/hidden-input.svelte.d.ts

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

package/dist/rating-group/index.d.ts

@@ -0,0 +1,5 @@
+export { default as Control, type RatingGroupControlProps, } from './control.svelte';
+export { default as HiddenInput, type RatingGroupHiddenInputProps, } from './hidden-input.svelte';
+export { default as Item, type RatingGroupItemProps } from './item.svelte';
+export { default as Label, type RatingGroupLabelProps } from './label.svelte';
+export { default as Root, type RatingGroupProps } from './root.svelte';

package/dist/rating-group/index.js

@@ -0,0 +1,5 @@
+export { default as Control, } from './control.svelte';
+export { default as HiddenInput, } from './hidden-input.svelte';
+export { default as Item } from './item.svelte';
+export { default as Label } from './label.svelte';
+export { default as Root } from './root.svelte';

package/dist/rating-group/item.svelte

@@ -0,0 +1,27 @@
+<script lang="ts" context="module">
+  import type {Assign, SvelteHtmlProps} from '../types.js';
+  import type {ItemProps, ItemState} from '@zag-js/rating-group';
+  import type {Snippet} from 'svelte';
+
+  export interface RatingGroupItemProps
+    extends Assign<Omit<SvelteHtmlProps<'div'>, 'children'>, ItemProps> {
+    children: Snippet<[state: ItemState]>;
+  }
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {useRatingGroupContext} from './context.svelte.js';
+
+  let {index, children, ...props}: RatingGroupItemProps = $props();
+
+  let context = useRatingGroupContext();
+
+  let state = $derived(context.getItemState({index}));
+
+  let attrs = $derived(mergeProps(props, context.getItemProps({index})));
+</script>
+
+<div {...attrs}>
+  {@render children?.(state)}
+</div>

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

@@ -0,0 +1,24 @@
+import type { Assign, SvelteHtmlProps } from '../types.js';
+import type { ItemProps, ItemState } from '@zag-js/rating-group';
+import type { Snippet } from 'svelte';
+export interface RatingGroupItemProps extends Assign<Omit<SvelteHtmlProps<'div'>, '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> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Item: $$__sveltets_2_IsomorphicComponent<RatingGroupItemProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type Item = InstanceType<typeof Item>;
+export default Item;

package/dist/rating-group/label.svelte

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

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

@@ -0,0 +1,21 @@
+import type { SvelteHtmlProps } from '../types.js';
+export interface RatingGroupLabelProps extends SvelteHtmlProps<'label'> {
+}
+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 Label: $$__sveltets_2_IsomorphicComponent<RatingGroupLabelProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type Label = InstanceType<typeof Label>;
+export default Label;

package/dist/rating-group/root.svelte

@@ -0,0 +1,73 @@
+<script lang="ts" context="module">
+  import type {Assign, SvelteHtmlProps} from '../types.js';
+  import type {Snippet} from 'svelte';
+  import type {
+    CreateRatingGroupContextProps,
+    CreateRatingGroupContextReturn,
+  } from './context.svelte.js';
+
+  export interface RatingGroupProps
+    extends Assign<
+      Omit<SvelteHtmlProps<'div'>, 'children'>,
+      Omit<CreateRatingGroupContextProps, 'id'>
+    > {
+    children?: Snippet<[context: CreateRatingGroupContextReturn]>;
+  }
+</script>
+
+<script lang="ts">
+  import {uuid} from '../utils.svelte.js';
+  import {mergeProps} from '@zag-js/svelte';
+  import {
+    createRatingGroupContext,
+    setRatingGroupContext,
+  } from './context.svelte.js';
+
+  let {
+    id,
+    ids,
+    dir,
+    form,
+    name,
+    count,
+    value,
+    disabled,
+    readOnly,
+    required,
+    autoFocus,
+    allowHalf,
+    translations,
+    onHoverChange,
+    onValueChange,
+    getRootNode,
+    children,
+    ...props
+  }: RatingGroupProps = $props();
+
+  let context = createRatingGroupContext({
+    id: id ?? uuid(),
+    ids,
+    dir,
+    form,
+    name,
+    count,
+    value: $state.snapshot(value),
+    disabled,
+    readOnly,
+    required,
+    autoFocus,
+    allowHalf,
+    translations,
+    onHoverChange,
+    onValueChange,
+    getRootNode,
+  });
+
+  let attrs = $derived(mergeProps(props, context.getRootProps()));
+
+  setRatingGroupContext(context);
+</script>
+
+<div {...attrs}>
+  {@render children?.(context)}
+</div>

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

@@ -0,0 +1,24 @@
+import type { Assign, SvelteHtmlProps } from '../types.js';
+import type { Snippet } from 'svelte';
+import type { CreateRatingGroupContextProps, CreateRatingGroupContextReturn } from './context.svelte.js';
+export interface RatingGroupProps extends Assign<Omit<SvelteHtmlProps<'div'>, 'children'>, Omit<CreateRatingGroupContextProps, 'id'>> {
+    children?: Snippet<[context: CreateRatingGroupContextReturn]>;
+}
+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<RatingGroupProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type Root = InstanceType<typeof Root>;
+export default Root;

package/dist/segment-group/index.d.ts

@@ -0,0 +1 @@
+export { Indicator, Item, ItemControl, ItemHiddenInput, ItemText, Root, type RadioGroupIndicatorProps as SegmentGroupIndicatorProps, type RadioGroupItemControlProps as SegmentGroupItemControlProps, type RadioGroupItemHiddenInputProps as SegmentGroupItemHiddenInputProps, type RadioGroupItemProps as SegmentGroupItemProps, type RadioGroupItemTextProps as SegmentGroupItemTextProps, type RadioGroupProps as SegmentGroupProps, } from '../radio-group/index.js';

package/dist/segment-group/index.js

@@ -0,0 +1 @@
+export { Indicator, Item, ItemControl, ItemHiddenInput, ItemText, Root, } from '../radio-group/index.js';

package/dist/select/clear-trigger.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 SelectClearTriggerProps extends Assign<SvelteHTMLElements['button'], {}> {}
+  export interface SelectClearTriggerProps extends SvelteHtmlProps<'button'> {}
 </script>
 
 <script lang="ts">

package/dist/select/clear-trigger.svelte.d.ts

@@ -1,6 +1,5 @@
-import type { Assign } from '../types.js';
-import type { SvelteHTMLElements } from 'svelte/elements';
-export interface SelectClearTriggerProps extends Assign<SvelteHTMLElements['button'], {}> {
+import type { SvelteHtmlProps } from '../types.js';
+export interface SelectClearTriggerProps extends SvelteHtmlProps<'button'> {
 }
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {

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

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

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

@@ -4,9 +4,9 @@ import { getContext, setContext } from 'svelte';
 export function createSelectContext(props) {
     const collection = $derived(select.collection({
         items: props.items,
-        itemToValue: (item) => (props.itemToValue ? props.itemToValue(item) : String(item)),
-        itemToString: (item) => (props.itemToString ? props.itemToString(item) : String(item)),
-        isItemDisabled: (item) => (props.isItemDisabled ? props.isItemDisabled(item) : false),
+        itemToValue: (item) => props.itemToValue ? props.itemToValue(item) : String(item),
+        itemToString: (item) => props.itemToString ? props.itemToString(item) : String(item),
+        isItemDisabled: (item) => props.isItemDisabled ? props.isItemDisabled(item) : false,
     }));
     const [state, send] = useMachine(select.machine({
         ...props,

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

package/dist/select/control.svelte.d.ts

@@ -1,6 +1,5 @@
-import type { Assign } from '../types.js';
-import type { SvelteHTMLElements } from 'svelte/elements';
-export interface SelectControlProps extends Assign<SvelteHTMLElements['div'], {}> {
+import type { SvelteHtmlProps } from '../types.js';
+export interface SelectControlProps 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/select/hidden-select.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 SelectHiddenSelectProps extends Assign<SvelteHTMLElements['select'], {}> {}
+  export interface SelectHiddenSelectProps extends SvelteHtmlProps<'select'> {}
 </script>
 
 <script lang="ts">

package/dist/select/hidden-select.svelte.d.ts

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

@@ -1,16 +1,16 @@
-export { default as ClearTrigger, type SelectClearTriggerProps } from './clear-trigger.svelte';
+export { default as ClearTrigger, type SelectClearTriggerProps, } from './clear-trigger.svelte';
 export { default as Content, type SelectContentProps } from './content.svelte';
 export { default as Control, type SelectControlProps } from './control.svelte';
-export { default as HiddenSelect, type SelectHiddenSelectProps } from './hidden-select.svelte';
-export { default as Indicator, type SelectIndicatorProps } from './indicator.svelte';
-export { default as ItemGroupLabel, type SelectItemGroupLabelProps } from './item-group-label.svelte';
-export { default as ItemGroup, type SelectItemGroupProps } from './item-group.svelte';
-export { default as ItemIndicator, type SelectItemIndicatorProps } from './item-indicator.svelte';
-export { default as ItemText, type SelectItemTextProps } from './item-text.svelte';
+export { default as HiddenSelect, type SelectHiddenSelectProps, } from './hidden-select.svelte';
+export { default as Indicator, type SelectIndicatorProps, } from './indicator.svelte';
+export { default as ItemGroupLabel, type SelectItemGroupLabelProps, } from './item-group-label.svelte';
+export { default as ItemGroup, type SelectItemGroupProps, } from './item-group.svelte';
+export { default as ItemIndicator, type SelectItemIndicatorProps, } from './item-indicator.svelte';
+export { default as ItemText, type SelectItemTextProps, } from './item-text.svelte';
 export { default as Item, type SelectItemProps } from './item.svelte';
 export { default as Label, type SelectLabelProps } from './label.svelte';
 export { default as List, type SelectListProps } from './list.svelte';
-export { default as Positioner, type SelectPositionerProps } from './positioner.svelte';
+export { default as Positioner, type SelectPositionerProps, } from './positioner.svelte';
 export { default as Root, type SelectProps } from './root.svelte';
 export { default as Trigger, type SelectTriggerProps } from './trigger.svelte';
-export { default as ValueText, type SelectValueTextProps } from './value-text.svelte';
+export { default as ValueText, type SelectValueTextProps, } from './value-text.svelte';

package/dist/select/index.js

@@ -1,16 +1,16 @@
-export { default as ClearTrigger } from './clear-trigger.svelte';
+export { default as ClearTrigger, } from './clear-trigger.svelte';
 export { default as Content } from './content.svelte';
 export { default as Control } from './control.svelte';
-export { default as HiddenSelect } from './hidden-select.svelte';
-export { default as Indicator } from './indicator.svelte';
-export { default as ItemGroupLabel } from './item-group-label.svelte';
-export { default as ItemGroup } from './item-group.svelte';
-export { default as ItemIndicator } from './item-indicator.svelte';
-export { default as ItemText } from './item-text.svelte';
+export { default as HiddenSelect, } from './hidden-select.svelte';
+export { default as Indicator, } from './indicator.svelte';
+export { default as ItemGroupLabel, } from './item-group-label.svelte';
+export { default as ItemGroup, } from './item-group.svelte';
+export { default as ItemIndicator, } from './item-indicator.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 List } from './list.svelte';
-export { default as Positioner } from './positioner.svelte';
+export { default as Positioner, } from './positioner.svelte';
 export { default as Root } from './root.svelte';
 export { default as Trigger } from './trigger.svelte';
-export { default as ValueText } from './value-text.svelte';
+export { default as ValueText, } from './value-text.svelte';

package/dist/select/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 SelectIndicatorProps extends Assign<SvelteHTMLElements['span'], {}> {}
+  export interface SelectIndicatorProps extends SvelteHtmlProps<'span'> {}
 </script>
 
 <script lang="ts">

package/dist/select/indicator.svelte.d.ts

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

@@ -1,13 +1,15 @@
 <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 SelectItemGroupLabelProps extends Assign<SvelteHTMLElements['span'], {}> {}
+  export interface SelectItemGroupLabelProps extends SvelteHtmlProps<'span'> {}
 </script>
 
 <script lang="ts">
   import {mergeProps} from '@zag-js/svelte';
-  import {useSelectContext, useSelectItemGroupContext} from './context.svelte.js';
+  import {
+    useSelectContext,
+    useSelectItemGroupContext,
+  } from './context.svelte.js';
 
   let {children, ...props}: SelectItemGroupLabelProps = $props();
 
@@ -15,7 +17,10 @@
   let itemGroupContext = useSelectItemGroupContext();
 
   let attrs = $derived(
-    mergeProps(props, context.getItemGroupLabelProps({htmlFor: itemGroupContext.id})),
+    mergeProps(
+      props,
+      context.getItemGroupLabelProps({htmlFor: itemGroupContext.id}),
+    ),
   );
 </script>
 

package/dist/select/item-group-label.svelte.d.ts

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

@@ -1,24 +1,30 @@
 <script lang="ts" context="module">
-  import type {Assign, OptionalId} from '../types.js';
+  import type {Assign, SvelteHtmlProps} from '../types.js';
   import type {ItemGroupProps} from '@zag-js/select';
-  import type {SvelteHTMLElements} from 'svelte/elements';
 
   export interface SelectItemGroupProps
-    extends Assign<SvelteHTMLElements['div'], OptionalId<ItemGroupProps>> {}
+    extends Assign<SvelteHtmlProps<'div'>, Omit<ItemGroupProps, 'id'>> {}
 </script>
 
 <script lang="ts">
   import {uuid} from '../utils.svelte.js';
   import {mergeProps} from '@zag-js/svelte';
-  import {setSelectItemGroupContext, useSelectContext} from './context.svelte.js';
+  import {
+    setSelectItemGroupContext,
+    useSelectContext,
+  } from './context.svelte.js';
 
-  let {id = uuid(), children, ...props}: SelectItemGroupProps = $props();
+  let {id, children, ...props}: SelectItemGroupProps = $props();
 
   let context = useSelectContext();
 
-  let attrs = $derived(mergeProps(props, context.getItemGroupProps({id})));
+  let uid = uuid();
 
-  setSelectItemGroupContext({id});
+  let attrs = $derived(
+    mergeProps(props, context.getItemGroupProps({id: id ?? uid})),
+  );
+
+  setSelectItemGroupContext({id: id ?? uid});
 </script>
 
 <div {...attrs}>

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

@@ -1,7 +1,6 @@
-import type { Assign, OptionalId } from '../types.js';
+import type { Assign, SvelteHtmlProps } from '../types.js';
 import type { ItemGroupProps } from '@zag-js/select';
-import type { SvelteHTMLElements } from 'svelte/elements';
-export interface SelectItemGroupProps extends Assign<SvelteHTMLElements['div'], OptionalId<ItemGroupProps>> {
+export interface SelectItemGroupProps extends Assign<SvelteHtmlProps<'div'>, Omit<ItemGroupProps, 'id'>> {
 }
 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> & {