ui-ingredients 0.31.2 → 1.0.0

package/dist/pin-input/pin-input-anatomy.d.ts

@@ -1,2 +1 @@
-export declare const anatomy: import("@zag-js/anatomy").AnatomyInstance<"root" | "label" | "control" | "input" | "clearTrigger">;
-export declare const parts: Record<"root" | "label" | "control" | "input" | "clearTrigger", import("@zag-js/anatomy").AnatomyPart>;
+export { anatomy } from '@zag-js/pin-input';

package/dist/pin-input/pin-input-anatomy.js

@@ -1,3 +1 @@
-import { anatomy as _ } from '@zag-js/pin-input';
-export const anatomy = _.extendWith('clearTrigger');
-export const parts = anatomy.build();
+export { anatomy } from '@zag-js/pin-input';

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

@@ -1,5 +1,5 @@
 <script lang="ts" module>
-  import type {Assign, HtmlIngredientProps} from '../types.js';
+  import type {Assign, HtmlIngredientProps, Optional} from '../types.js';
   import type {
     CreatePinInputProps,
     CreatePinInputReturn,
@@ -8,7 +8,7 @@
   export interface PinInputProps
     extends Assign<
       HtmlIngredientProps<'div', HTMLDivElement, CreatePinInputReturn>,
-      CreatePinInputProps
+      Optional<CreatePinInputProps, 'id'>
     > {}
 </script>
 
@@ -20,19 +20,22 @@
   import {setPinInputContext} from './pin-input-context.svelte.js';
 
   let {
+    id,
     ref = $bindable(null),
     asChild,
     children,
     ...props
   }: PinInputProps = $props();
 
+  let uid = $props.id();
+
   let [createPinInputProps, localProps] = $derived(
-    createSplitProps<CreatePinInputProps>([
+    createSplitProps<Omit<CreatePinInputProps, 'id'>>([
       'autoFocus',
       'blurOnComplete',
+      'defaultValue',
       'disabled',
       'form',
-      'id',
       'ids',
       'invalid',
       'mask',
@@ -52,7 +55,10 @@
     ])(props),
   );
 
-  let pinInput = createPinInputContext(reflect(() => createPinInputProps));
+  let pinInput = createPinInputContext(
+    reflect(() => ({...createPinInputProps, id: id ?? uid})),
+  );
+
   let mergedProps = $derived(mergeProps(pinInput.getRootProps(), localProps));
 
   setPinInputContext(pinInput);

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

@@ -1,6 +1,6 @@
-import type { Assign, HtmlIngredientProps } from '../types.js';
+import type { Assign, HtmlIngredientProps, Optional } from '../types.js';
 import type { CreatePinInputProps, CreatePinInputReturn } from './create-pin-input.svelte.js';
-export interface PinInputProps extends Assign<HtmlIngredientProps<'div', HTMLDivElement, CreatePinInputReturn>, CreatePinInputProps> {
+export interface PinInputProps extends Assign<HtmlIngredientProps<'div', HTMLDivElement, CreatePinInputReturn>, Optional<CreatePinInputProps, 'id'>> {
 }
 declare const PinInputRoot: import("svelte").Component<PinInputProps, {}, "ref">;
 type PinInputRoot = ReturnType<typeof PinInputRoot>;

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

@@ -1,4 +1,3 @@
-export { default as ClearTrigger } from './pin-input-clear-trigger.svelte';
 export { default as Control } from './pin-input-control.svelte';
 export { default as HiddenInput } from './pin-input-hidden-input.svelte';
 export { default as Input } from './pin-input-input.svelte';

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

@@ -1,4 +1,3 @@
-export { default as ClearTrigger } from './pin-input-clear-trigger.svelte';
 export { default as Control } from './pin-input-control.svelte';
 export { default as HiddenInput } from './pin-input-hidden-input.svelte';
 export { default as Input } from './pin-input-input.svelte';

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

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

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

@@ -1,19 +1,14 @@
 import * as popover from '@zag-js/popover';
 import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
-import { createUniqueId } from '../create-unique-id.js';
 import { getEnvironmentContext } from '../environment-provider/enviroment-provider-context.svelte.js';
-import { getLocaleContext } from '../locale-provider/local-provider-context.svelte.js';
+import { getLocaleContext } from '../locale-provider/locale-provider-context.svelte.js';
 export function createPopover(props) {
     const locale = getLocaleContext();
     const environment = getEnvironmentContext();
-    const id = createUniqueId();
-    const context = reflect(() => ({
-        id,
+    const service = useMachine(popover.machine, () => ({
         dir: locale?.dir,
         getRootNode: environment?.getRootNode,
-        'open.controlled': props.openControlled,
         ...props,
     }));
-    const [state, send] = useMachine(popover.machine(context), { context });
-    return reflect(() => popover.connect(state, send, normalizeProps));
+    return reflect(() => popover.connect(service, normalizeProps));
 }

package/dist/popover/popover-root.svelte

@@ -1,13 +1,14 @@
 <script lang="ts" module>
   import type {Snippet} from 'svelte';
   import type {PresenceStrategyProps} from '../presence/create-presence.svelte.js';
+  import type {Optional} from '../types.js';
   import type {
     CreatePopoverProps,
     CreatePopoverReturn,
   } from './create-popover.svelte.js';
 
   export interface PopoverProps
-    extends CreatePopoverProps,
+    extends Optional<CreatePopoverProps, 'id'>,
       PresenceStrategyProps {
     children?: Snippet<[CreatePopoverReturn]>;
   }
@@ -21,14 +22,16 @@
   import {createPopover} from './create-popover.svelte.js';
   import {setPopoverContext} from './popover-context.svelte.js';
 
-  let {children, ...props}: PopoverProps = $props();
+  let {id, children, ...props}: PopoverProps = $props();
+
+  let uid = $props.id();
 
   let [createPopoverProps, presenceStrategyProps] = $derived(
-    createSplitProps<CreatePopoverProps>([
+    createSplitProps<Omit<CreatePopoverProps, 'id'>>([
       'autoFocus',
       'closeOnEscape',
       'closeOnInteractOutside',
-      'id',
+      'defaultOpen',
       'ids',
       'initialFocusEl',
       'modal',
@@ -38,14 +41,16 @@
       'onOpenChange',
       'onPointerDownOutside',
       'open',
-      'openControlled',
       'persistentElements',
       'portalled',
       'positioning',
     ])(props),
   );
 
-  let popover = createPopover(reflect(() => createPopoverProps));
+  let popover = createPopover(
+    reflect(() => ({...createPopoverProps, id: id ?? uid})),
+  );
+
   let presence = createPresence(
     reflect(() => ({
       ...presenceStrategyProps,

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

@@ -1,7 +1,8 @@
 import type { Snippet } from 'svelte';
 import type { PresenceStrategyProps } from '../presence/create-presence.svelte.js';
+import type { Optional } from '../types.js';
 import type { CreatePopoverProps, CreatePopoverReturn } from './create-popover.svelte.js';
-export interface PopoverProps extends CreatePopoverProps, PresenceStrategyProps {
+export interface PopoverProps extends Optional<CreatePopoverProps, 'id'>, PresenceStrategyProps {
     children?: Snippet<[CreatePopoverReturn]>;
 }
 declare const PopoverRoot: import("svelte").Component<PopoverProps, {}, "">;

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

@@ -1,3 +1,4 @@
+import * as presence from '@zag-js/presence';
 import type { Action } from 'svelte/action';
 import type { HTMLAttributes } from 'svelte/elements';
 export interface PresenceStrategyProps {
@@ -6,8 +7,7 @@ export interface PresenceStrategyProps {
     /** @default true */
     keepMounted?: boolean;
 }
-export interface CreatePresenceProps extends PresenceStrategyProps {
-    present: boolean;
+export interface CreatePresenceProps extends PresenceStrategyProps, presence.Props {
 }
 export interface CreatePresenceReturn {
     setReference: Action;

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

@@ -1,20 +1,12 @@
 import * as presence from '@zag-js/presence';
 import { normalizeProps, useMachine } from '@zag-js/svelte';
 export function createPresence(props) {
-    const present = $derived(props.present);
-    const lazyMount = $derived(props.lazyMount ?? false);
-    const keepMounted = $derived(props.keepMounted ?? true);
-    const context = $derived({
-        get present() {
-            return present;
-        },
-    });
-    const [state, send] = useMachine(presence.machine(context), { context });
-    const api = $derived(presence.connect(state, send, normalizeProps));
+    const service = useMachine(presence.machine, props);
+    const api = $derived(presence.connect(service, normalizeProps));
     function getPresenceProps() {
         return {
             hidden: !api.present,
-            'data-state': context.present ? 'open' : 'closed',
+            'data-state': props.present ? 'open' : 'closed',
         };
     }
     let wasPresent = $state(false);
@@ -28,9 +20,9 @@ export function createPresence(props) {
     const unmounted = $derived.by(() => {
         if (api.present)
             return false;
-        if (!wasPresent && lazyMount)
+        if (!wasPresent && props.lazyMount)
             return true;
-        if (wasPresent && !keepMounted)
+        if (wasPresent && !props.keepMounted)
             return true;
         return false;
     });

package/dist/presence/presence.svelte

@@ -20,15 +20,24 @@
 
   let [createPresenceProps, localProps] = $derived(
     createSplitProps<CreatePresenceProps>([
+      'immediate',
       'keepMounted',
       'lazyMount',
       'present',
+      'onExitComplete',
     ])(props),
   );
 
   let presence = createPresence(reflect(() => createPresenceProps));
   let mergedProps = $derived(
-    mergeProps(presence.getPresenceProps(), localProps),
+    mergeProps(
+      presence.getPresenceProps(),
+      {
+        'data-scope': 'presence',
+        'data-part': 'root',
+      },
+      localProps,
+    ),
   );
 </script>
 

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

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

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

@@ -1,18 +1,15 @@
 import * as progress from '@zag-js/progress';
 import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
-import { createUniqueId } from '../create-unique-id.js';
 import { getEnvironmentContext } from '../environment-provider/enviroment-provider-context.svelte.js';
-import { getLocaleContext } from '../locale-provider/local-provider-context.svelte.js';
+import { getLocaleContext } from '../locale-provider/locale-provider-context.svelte.js';
 export function createProgress(props) {
     const locale = getLocaleContext();
     const environment = getEnvironmentContext();
-    const id = createUniqueId();
-    const context = reflect(() => ({
-        id,
+    const service = useMachine(progress.machine, () => ({
         dir: locale?.dir,
+        locale: locale?.locale,
         getRootNode: environment?.getRootNode,
         ...props,
     }));
-    const [state, send] = useMachine(progress.machine(context), { context });
-    return reflect(() => progress.connect(state, send, normalizeProps));
+    return reflect(() => progress.connect(service, normalizeProps));
 }

package/dist/progress/progress-root.svelte

@@ -1,5 +1,5 @@
 <script lang="ts" module>
-  import type {Assign, HtmlIngredientProps} from '../types.js';
+  import type {Assign, HtmlIngredientProps, Optional} from '../types.js';
   import type {
     CreateProgressProps,
     CreateProgressReturn,
@@ -8,7 +8,7 @@
   export interface ProgressProps
     extends Assign<
       HtmlIngredientProps<'div', HTMLDivElement, CreateProgressReturn>,
-      CreateProgressProps
+      Optional<CreateProgressProps, 'id'>
     > {}
 </script>
 
@@ -20,16 +20,21 @@
   import {setProgressContext} from './progress-context.svelte.js';
 
   let {
+    id,
     ref = $bindable(null),
     asChild,
     children,
     ...props
   }: ProgressProps = $props();
 
+  let uid = $props.id();
+
   let [createProgressProps, localProps] = $derived(
-    createSplitProps<CreateProgressProps>([
-      'id',
+    createSplitProps<Omit<CreateProgressProps, 'id'>>([
+      'defaultValue',
+      'formatOptions',
       'ids',
+      'locale',
       'max',
       'min',
       'onValueChange',
@@ -39,7 +44,9 @@
     ])(props),
   );
 
-  let progress = createProgress(reflect(() => createProgressProps));
+  let progress = createProgress(
+    reflect(() => ({...createProgressProps, id: id ?? uid})),
+  );
 
   let mergedProps = $derived(mergeProps(progress.getRootProps(), localProps));
 

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

@@ -1,6 +1,6 @@
-import type { Assign, HtmlIngredientProps } from '../types.js';
+import type { Assign, HtmlIngredientProps, Optional } from '../types.js';
 import type { CreateProgressProps, CreateProgressReturn } from './create-progress.svelte.js';
-export interface ProgressProps extends Assign<HtmlIngredientProps<'div', HTMLDivElement, CreateProgressReturn>, CreateProgressProps> {
+export interface ProgressProps extends Assign<HtmlIngredientProps<'div', HTMLDivElement, CreateProgressReturn>, Optional<CreateProgressProps, 'id'>> {
 }
 declare const ProgressRoot: import("svelte").Component<ProgressProps, {}, "ref">;
 type ProgressRoot = ReturnType<typeof ProgressRoot>;

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

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

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

@@ -1,18 +1,14 @@
 import * as qrCode from '@zag-js/qr-code';
 import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
-import { createUniqueId } from '../create-unique-id.js';
 import { getEnvironmentContext } from '../environment-provider/enviroment-provider-context.svelte.js';
-import { getLocaleContext } from '../locale-provider/local-provider-context.svelte.js';
+import { getLocaleContext } from '../locale-provider/locale-provider-context.svelte.js';
 export function createQRCode(props) {
     const locale = getLocaleContext();
     const environment = getEnvironmentContext();
-    const id = createUniqueId();
-    const context = reflect(() => ({
-        id,
+    const service = useMachine(qrCode.machine, () => ({
         dir: locale?.dir,
         getRootNode: environment?.getRootNode,
         ...props,
     }));
-    const [state, send] = useMachine(qrCode.machine(context), { context });
-    return reflect(() => qrCode.connect(state, send, normalizeProps));
+    return reflect(() => qrCode.connect(service, normalizeProps));
 }

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

@@ -1,5 +1,5 @@
 <script lang="ts" module>
-  import type {Assign, HtmlIngredientProps} from '../types.js';
+  import type {Assign, HtmlIngredientProps, Optional} from '../types.js';
   import type {
     CreateQrCodeProps,
     CreateQrCodeReturn,
@@ -8,7 +8,7 @@
   export interface QrCodeProps
     extends Assign<
       HtmlIngredientProps<'div', HTMLDivElement, CreateQrCodeReturn>,
-      CreateQrCodeProps
+      Optional<CreateQrCodeProps, 'id'>
     > {}
 </script>
 
@@ -20,23 +20,29 @@
   import {setQrCodeContext} from './qr-code-context.svelte.js';
 
   let {
+    id,
     ref = $bindable(null),
     asChild,
     children,
     ...props
   }: QrCodeProps = $props();
 
+  let uid = $props.id();
+
   let [createQrCodeProps, localProps] = $derived(
-    createSplitProps<CreateQrCodeProps>([
+    createSplitProps<Omit<CreateQrCodeProps, 'id'>>([
+      'defaultValue',
       'encoding',
-      'id',
       'ids',
       'onValueChange',
+      'pixelSize',
       'value',
     ])(props),
   );
 
-  let qrCode = createQRCode(reflect(() => createQrCodeProps));
+  let qrCode = createQRCode(
+    reflect(() => ({...createQrCodeProps, id: id ?? uid})),
+  );
 
   let mergedProps = $derived(mergeProps(qrCode.getRootProps(), localProps));
 

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

@@ -1,6 +1,6 @@
-import type { Assign, HtmlIngredientProps } from '../types.js';
+import type { Assign, HtmlIngredientProps, Optional } from '../types.js';
 import type { CreateQrCodeProps, CreateQrCodeReturn } from './create-qr-code.svelte.js';
-export interface QrCodeProps extends Assign<HtmlIngredientProps<'div', HTMLDivElement, CreateQrCodeReturn>, CreateQrCodeProps> {
+export interface QrCodeProps extends Assign<HtmlIngredientProps<'div', HTMLDivElement, CreateQrCodeReturn>, Optional<CreateQrCodeProps, 'id'>> {
 }
 declare const QrCodeRoot: import("svelte").Component<QrCodeProps, {}, "ref">;
 type QrCodeRoot = ReturnType<typeof QrCodeRoot>;

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

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

package/dist/radio-group/create-radio-group.svelte.js

@@ -1,18 +1,14 @@
 import * as radioGroup from '@zag-js/radio-group';
 import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
-import { createUniqueId } from '../create-unique-id.js';
 import { getEnvironmentContext } from '../environment-provider/enviroment-provider-context.svelte.js';
-import { getLocaleContext } from '../locale-provider/local-provider-context.svelte.js';
+import { getLocaleContext } from '../locale-provider/locale-provider-context.svelte.js';
 export function createRadioGroup(props) {
     const locale = getLocaleContext();
     const environment = getEnvironmentContext();
-    const id = createUniqueId();
-    const context = reflect(() => ({
-        id,
+    const service = useMachine(radioGroup.machine, () => ({
         dir: locale?.dir,
         getRootNode: environment?.getRootNode,
         ...props,
     }));
-    const [state, send] = useMachine(radioGroup.machine(context), { context });
-    return reflect(() => radioGroup.connect(state, send, normalizeProps));
+    return reflect(() => radioGroup.connect(service, normalizeProps));
 }

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

@@ -1,5 +1,5 @@
 <script lang="ts" module>
-  import type {Assign, HtmlIngredientProps} from '../types.js';
+  import type {Assign, HtmlIngredientProps, Optional} from '../types.js';
   import type {
     CreateRadioGroupProps,
     CreateRadioGroupReturn,
@@ -8,7 +8,7 @@
   export interface RadioGroupProps
     extends Assign<
       HtmlIngredientProps<'div', HTMLDivElement, CreateRadioGroupReturn>,
-      CreateRadioGroupProps
+      Optional<CreateRadioGroupProps, 'id'>
     > {}
 </script>
 
@@ -20,17 +20,20 @@
   import {setRadioGroupContext} from './radio-group-context.svelte.js';
 
   let {
+    id,
     ref = $bindable(null),
     asChild,
     children,
     ...props
   }: RadioGroupProps = $props();
 
+  let uid = $props.id();
+
   let [createRadioGroupProps, localProps] = $derived(
-    createSplitProps<CreateRadioGroupProps>([
+    createSplitProps<Omit<CreateRadioGroupProps, 'id'>>([
+      'defaultValue',
       'disabled',
       'form',
-      'id',
       'ids',
       'name',
       'onValueChange',
@@ -40,7 +43,10 @@
     ])(props),
   );
 
-  let radioGroup = createRadioGroup(reflect(() => createRadioGroupProps));
+  let radioGroup = createRadioGroup(
+    reflect(() => ({...createRadioGroupProps, id: id ?? uid})),
+  );
+
   let mergedProps = $derived(mergeProps(radioGroup.getRootProps(), localProps));
 
   setRadioGroupContext(radioGroup);

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

@@ -1,6 +1,6 @@
-import type { Assign, HtmlIngredientProps } from '../types.js';
+import type { Assign, HtmlIngredientProps, Optional } from '../types.js';
 import type { CreateRadioGroupProps, CreateRadioGroupReturn } from './create-radio-group.svelte.js';
-export interface RadioGroupProps extends Assign<HtmlIngredientProps<'div', HTMLDivElement, CreateRadioGroupReturn>, CreateRadioGroupProps> {
+export interface RadioGroupProps extends Assign<HtmlIngredientProps<'div', HTMLDivElement, CreateRadioGroupReturn>, Optional<CreateRadioGroupProps, 'id'>> {
 }
 declare const RadioGroupRoot: import("svelte").Component<RadioGroupProps, {}, "ref">;
 type RadioGroupRoot = ReturnType<typeof RadioGroupRoot>;

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

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

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

@@ -1,16 +1,13 @@
 import * as ratingGroup from '@zag-js/rating-group';
 import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
-import { createUniqueId } from '../create-unique-id.js';
 import { getEnvironmentContext } from '../environment-provider/enviroment-provider-context.svelte.js';
 import { getFieldContext } from '../field/field-context.svelte.js';
-import { getLocaleContext } from '../locale-provider/local-provider-context.svelte.js';
+import { getLocaleContext } from '../locale-provider/locale-provider-context.svelte.js';
 export function createRatingGroup(props) {
     const field = getFieldContext();
     const locale = getLocaleContext();
     const environment = getEnvironmentContext();
-    const id = createUniqueId();
-    const context = reflect(() => ({
-        id,
+    const service = useMachine(ratingGroup.machine, () => ({
         dir: locale?.dir,
         ids: {
             label: field?.ids.label,
@@ -22,15 +19,14 @@ export function createRatingGroup(props) {
         getRootNode: environment?.getRootNode,
         ...props,
     }));
-    const [state, send] = useMachine(ratingGroup.machine(context), { context });
     return reflect(() => {
-        const o = ratingGroup.connect(state, send, normalizeProps);
+        const api = ratingGroup.connect(service, normalizeProps);
         return {
-            ...o,
+            ...api,
             getHiddenInputProps() {
                 return {
                     'aria-describedby': field?.['aria-describedby'],
-                    ...o.getHiddenInputProps(),
+                    ...api.getHiddenInputProps(),
                 };
             },
         };

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

@@ -1,5 +1,5 @@
 <script lang="ts" module>
-  import type {Assign, HtmlIngredientProps} from '../types.js';
+  import type {Assign, HtmlIngredientProps, Optional} from '../types.js';
   import type {
     CreateRatingGroupProps,
     CreateRatingGroupReturn,
@@ -8,7 +8,7 @@
   export interface RatingGroupProps
     extends Assign<
       HtmlIngredientProps<'div', HTMLDivElement, CreateRatingGroupReturn>,
-      CreateRatingGroupProps
+      Optional<CreateRatingGroupProps, 'id'>
     > {}
 </script>
 
@@ -20,20 +20,23 @@
   import {setRatingGroupContext} from './rating-group-context.svelte.js';
 
   let {
+    id,
     ref = $bindable(null),
     asChild,
     children,
     ...props
   }: RatingGroupProps = $props();
 
+  let uid = $props.id();
+
   let [createRatingGroupProps, localProps] = $derived(
-    createSplitProps<CreateRatingGroupProps>([
+    createSplitProps<Omit<CreateRatingGroupProps, 'id'>>([
       'allowHalf',
       'autoFocus',
       'count',
+      'defaultValue',
       'disabled',
       'form',
-      'id',
       'ids',
       'name',
       'onHoverChange',
@@ -45,7 +48,10 @@
     ])(props),
   );
 
-  let ratingGroup = createRatingGroup(reflect(() => createRatingGroupProps));
+  let ratingGroup = createRatingGroup(
+    reflect(() => ({...createRatingGroupProps, id: id ?? uid})),
+  );
+
   let mergedProps = $derived(
     mergeProps(ratingGroup.getRootProps(), localProps),
   );