ui-ingredients 0.0.29 → 0.0.31

package/dist/file-upload/root.svelte

@@ -15,6 +15,7 @@
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
+  import {reflect} from '@zag-js/svelte';
   import {createSplitProps} from '@zag-js/utils';
   import {fileUploadContext} from './context.svelte.js';
   import {createFileUpload} from './create-file-upload.svelte.js';
@@ -44,7 +45,7 @@
     ])(props),
   );
 
-  let fileUpload = createFileUpload(fileUploadProps);
+  let fileUpload = createFileUpload(reflect(() => fileUploadProps));
 
   let mergedProps = $derived(mergeProps(otherProps, fileUpload.getRootProps()));
 

package/dist/hover-card/create-hover-card.svelte.js

@@ -1,14 +1,14 @@
-import { createUniqueId } from '../create-unique-id.js';
 import { getEnvironmentContext } from '../environment-provider/context.svelte.js';
 import { getLocaleContext } from '../locale-provider/context.svelte.js';
 import * as hoverCard from '@zag-js/hover-card';
 import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
+import { uid } from 'uid';
 export function createHoverCard(props) {
     const locale = getLocaleContext();
     const environment = getEnvironmentContext();
     const [state, send] = useMachine(hoverCard.machine({
         ...props,
-        id: props.id ?? createUniqueId(),
+        id: props.id ?? uid(),
         dir: locale?.dir,
         open: props.defaultOpen ?? props.open,
         getRootNode: environment?.getRootNode,

package/dist/hover-card/hover-card.d.ts

@@ -1,4 +1,3 @@
-export { anatomy } from '@zag-js/hover-card';
 export { default as ArrowTip } from './arrow-tip.svelte';
 export { default as Arrow } from './arrow.svelte';
 export { default as Content } from './content.svelte';

package/dist/hover-card/hover-card.js

@@ -1,4 +1,3 @@
-export { anatomy } from '@zag-js/hover-card';
 export { default as ArrowTip } from './arrow-tip.svelte';
 export { default as Arrow } from './arrow.svelte';
 export { default as Content } from './content.svelte';

package/dist/hover-card/index.d.ts

@@ -5,3 +5,4 @@ export type { HoverCardContentProps } from './content.svelte';
 export type { HoverCardPositionerProps } from './positioner.svelte';
 export type { HoverCardProps } from './root.svelte';
 export type { HoverCardTriggerProps } from './trigger.svelte';
+export { anatomy as hoverCardAnatomy } from '@zag-js/hover-card';

package/dist/hover-card/index.js

@@ -1 +1,2 @@
 export * as HoverCard from './hover-card.js';
+export { anatomy as hoverCardAnatomy } from '@zag-js/hover-card';

package/dist/index.d.ts

@@ -10,6 +10,7 @@ export * from './date-picker/index.js';
 export * from './dialog/index.js';
 export * from './editable/index.js';
 export * from './environment-provider/index.js';
+export * from './field/index.js';
 export * from './file-upload/index.js';
 export * from './hover-card/index.js';
 export * from './locale-provider/index.js';

package/dist/index.js

@@ -10,6 +10,7 @@ export * from './date-picker/index.js';
 export * from './dialog/index.js';
 export * from './editable/index.js';
 export * from './environment-provider/index.js';
+export * from './field/index.js';
 export * from './file-upload/index.js';
 export * from './hover-card/index.js';
 export * from './locale-provider/index.js';

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

@@ -1,14 +1,14 @@
-import { createUniqueId } from '../create-unique-id.js';
 import { getEnvironmentContext } from '../environment-provider/context.svelte.js';
 import { getLocaleContext } from '../locale-provider/context.svelte.js';
 import * as menu from '@zag-js/menu';
 import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
+import { uid } from 'uid';
 export function createMenu(props) {
     const locale = getLocaleContext();
     const environment = getEnvironmentContext();
     const [state, send] = useMachine(menu.machine({
         ...props,
-        id: props.id ?? createUniqueId(),
+        id: props.id ?? uid(),
         dir: locale?.dir,
         open: props.defaultOpen ?? props.open,
         getRootNode: environment?.getRootNode,

package/dist/menu/index.d.ts

@@ -15,3 +15,4 @@ export { type MenuRootProps } from './root.svelte';
 export { type MenuSeparatorProps } from './separator.svelte';
 export { type MenuTriggerItemIndicatorProps } from './trigger-item.svelte';
 export { type MenuTriggerProps } from './trigger.svelte';
+export { anatomy as menuAnatomy } from '@zag-js/menu';

package/dist/menu/index.js

@@ -15,3 +15,4 @@ export {} from './root.svelte';
 export {} from './separator.svelte';
 export {} from './trigger-item.svelte';
 export {} from './trigger.svelte';
+export { anatomy as menuAnatomy } from '@zag-js/menu';

package/dist/menu/item-group.svelte

@@ -7,18 +7,18 @@
 </script>
 
 <script lang="ts">
-  import {createUniqueId} from '../create-unique-id.js';
   import {mergeProps} from '../merge-props.js';
+  import {uid} from 'uid';
   import {menuContext, menuItemGroupPropsContext} from './context.svelte.js';
 
   let {id, asChild, children, ...props}: MenuItemGroupProps = $props();
 
   let menu = menuContext.get();
 
-  let uid = createUniqueId();
+  let id_ = uid();
 
   let itemGroupProps = $derived({
-    id: id ?? uid,
+    id: id ?? id_,
   });
 
   let mergedProps = $derived(

package/dist/menu/menu.d.ts

@@ -1,4 +1,3 @@
-export { anatomy } from '@zag-js/menu';
 export { default as ArrowTip } from './arrow-tip.svelte';
 export { default as Arrow } from './arrow.svelte';
 export { default as Content } from './content.svelte';

package/dist/menu/menu.js

@@ -1,4 +1,3 @@
-export { anatomy } from '@zag-js/menu';
 export { default as ArrowTip } from './arrow-tip.svelte';
 export { default as Arrow } from './arrow.svelte';
 export { default as Content } from './content.svelte';

package/dist/number-input/create-number-input.svelte.js

@@ -1,14 +1,14 @@
-import { createUniqueId } from '../create-unique-id.js';
 import { getEnvironmentContext } from '../environment-provider/context.svelte.js';
 import { getLocaleContext } from '../locale-provider/context.svelte.js';
 import * as numberInput from '@zag-js/number-input';
 import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
+import { uid } from 'uid';
 export function createNumberInput(props) {
     const locale = getLocaleContext();
     const environment = getEnvironmentContext();
     const [state, send] = useMachine(numberInput.machine({
         ...props,
-        id: props.id ?? createUniqueId(),
+        id: props.id ?? uid(),
         dir: locale?.dir,
         locale: props.locale ?? locale?.locale,
         getRootNode: environment?.getRootNode,

package/dist/number-input/index.d.ts

@@ -6,3 +6,4 @@ export type { NumberInputInputProps } from './input.svelte';
 export type { NumberInputLabelProps } from './label.svelte';
 export type { NumberInputProps } from './root.svelte';
 export type { NumberInputScrubberProps } from './scrubber.svelte';
+export { anatomy as numberInputAnatomy } from '@zag-js/number-input';

package/dist/number-input/index.js

@@ -1 +1,2 @@
 export * as NumberInput from './number-input.js';
+export { anatomy as numberInputAnatomy } from '@zag-js/number-input';

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

@@ -1,4 +1,3 @@
-export { anatomy } from '@zag-js/number-input';
 export { default as Control } from './control.svelte';
 export { default as DecrementTrigger } from './decrement-trigger.svelte';
 export { default as IncrementTrigger } from './increment-trigger.svelte';

package/dist/number-input/number-input.js

@@ -1,4 +1,3 @@
-export { anatomy } from '@zag-js/number-input';
 export { default as Control } from './control.svelte';
 export { default as DecrementTrigger } from './decrement-trigger.svelte';
 export { default as IncrementTrigger } from './increment-trigger.svelte';

package/dist/number-input/root.svelte

@@ -15,6 +15,7 @@
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
+  import {reflect} from '@zag-js/svelte';
   import {createSplitProps} from '@zag-js/utils';
   import {numberInputContext} from './context.svelte.js';
   import {createNumberInput} from './create-number-input.svelte.js';
@@ -51,7 +52,7 @@
     ])(props),
   );
 
-  let numberInput = createNumberInput(numberInputProps);
+  let numberInput = createNumberInput(reflect(() => numberInputProps));
 
   let mergedProps = $derived(
     mergeProps(otherProps, numberInput.getRootProps()),

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

@@ -1,14 +1,14 @@
-import { createUniqueId } from '../create-unique-id.js';
 import { getEnvironmentContext } from '../environment-provider/context.svelte.js';
 import { getLocaleContext } from '../locale-provider/context.svelte.js';
 import * as pagination from '@zag-js/pagination';
 import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
+import { uid } from 'uid';
 export function createPagination(props) {
     const locale = getLocaleContext();
     const environment = getEnvironmentContext();
     const [state, send] = useMachine(pagination.machine({
         ...props,
-        id: props.id ?? createUniqueId(),
+        id: props.id ?? uid(),
         dir: locale?.dir,
         getRootNode: environment?.getRootNode,
     }));

package/dist/pagination/index.d.ts

@@ -4,3 +4,4 @@ export type { PaginationItemProps } from './item.svelte';
 export type { PaginationNextTriggerProps } from './next-trigger.svelte';
 export type { PaginationPrevTriggerProps } from './prev-trigger.svelte';
 export type { PaginationProps } from './root.svelte';
+export { anatomy as paginationAnatomy } from '@zag-js/pagination';

package/dist/pagination/index.js

@@ -1 +1,2 @@
 export * as Pagination from './pagination.js';
+export { anatomy as paginationAnatomy } from '@zag-js/pagination';

package/dist/pagination/pagination.d.ts

@@ -1,4 +1,3 @@
-export { anatomy } from '@zag-js/pagination';
 export { default as Ellipsis } from './ellipsis.svelte';
 export { default as Item } from './item.svelte';
 export { default as NextTrigger } from './next-trigger.svelte';

package/dist/pagination/pagination.js

@@ -1,4 +1,3 @@
-export { anatomy } from '@zag-js/pagination';
 export { default as Ellipsis } from './ellipsis.svelte';
 export { default as Item } from './item.svelte';
 export { default as NextTrigger } from './next-trigger.svelte';

package/dist/pagination/root.svelte

@@ -15,6 +15,7 @@
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
+  import {reflect} from '@zag-js/svelte';
   import {createSplitProps} from '@zag-js/utils';
   import {paginationContext} from './context.svelte.js';
   import {createPagination} from './create-pagination.svelte.js';
@@ -36,7 +37,7 @@
     ])(props),
   );
 
-  let pagination = createPagination(paginationProps);
+  let pagination = createPagination(reflect(() => paginationProps));
 
   let mergedProps = $derived(mergeProps(otherProps, pagination.getRootProps()));
 

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

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

package/dist/pin-input/clear-trigger.svelte

@@ -11,8 +11,7 @@
   import {parts} from './anatomy.js';
   import {pinInputContext} from './context.svelte.js';
 
-  let {asChild, children, onclick, ...props}: PinInputClearTriggerProps =
-    $props();
+  let {asChild, children, ...props}: PinInputClearTriggerProps = $props();
 
   let pinInput = pinInputContext.get();
 

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

@@ -1,14 +1,14 @@
-import { createUniqueId } from '../create-unique-id.js';
 import { getEnvironmentContext } from '../environment-provider/context.svelte.js';
 import { getLocaleContext } from '../locale-provider/context.svelte.js';
 import * as pinInput from '@zag-js/pin-input';
 import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
+import { uid } from 'uid';
 export function createPinInputContext(props) {
     const locale = getLocaleContext();
     const environment = getEnvironmentContext();
     const [state, send] = useMachine(pinInput.machine({
         ...props,
-        id: props.id ?? createUniqueId(),
+        id: props.id ?? uid(),
         dir: locale?.dir,
         getRootNode: environment?.getRootNode,
     }));

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

@@ -4,3 +4,4 @@ export type { PinInputHiddenInputProps } from './hidden-input.svelte';
 export type { PinInputInputProps } from './input.svelte';
 export type { PinInputLabelProps } from './label.svelte';
 export type { PinInputProps } from './root.svelte';
+export { anatomy as pinInputAnatomy } from './anatomy.js';

package/dist/pin-input/index.js

@@ -1 +1,2 @@
 export * as PinInput from './pin-input.js';
+export { anatomy as pinInputAnatomy } from './anatomy.js';

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

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

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

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

package/dist/pin-input/root.svelte

@@ -15,6 +15,7 @@
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
+  import {reflect} from '@zag-js/svelte';
   import {createSplitProps} from '@zag-js/utils';
   import {pinInputContext} from './context.svelte.js';
   import {createPinInputContext} from './create-pin-input.svelte.js';
@@ -47,7 +48,7 @@
     ])(props),
   );
 
-  let pinInput = createPinInputContext(pinInputProps);
+  let pinInput = createPinInputContext(reflect(() => pinInputProps));
 
   let mergedProps = $derived(mergeProps(otherProps, pinInput.getRootProps()));
 

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

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

package/dist/popover/popover.d.ts

@@ -1,4 +1,3 @@
-export { anatomy } from '@zag-js/popover';
 export { default as ArrowTip } from './arrow-tip.svelte';
 export { default as Arrow } from './arrow.svelte';
 export { default as CloseTrigger } from './close-trigger.svelte';
@@ -8,3 +7,4 @@ export { default as Positioner } from './positioner.svelte';
 export { default as Root } from './root.svelte';
 export { default as Title } from './title.svelte';
 export { default as Trigger } from './trigger.svelte';
+export { anatomy as popoverAnatomy } from '@zag-js/popover';

package/dist/popover/popover.js

@@ -1,4 +1,3 @@
-export { anatomy } from '@zag-js/popover';
 export { default as ArrowTip } from './arrow-tip.svelte';
 export { default as Arrow } from './arrow.svelte';
 export { default as CloseTrigger } from './close-trigger.svelte';
@@ -8,3 +7,4 @@ export { default as Positioner } from './positioner.svelte';
 export { default as Root } from './root.svelte';
 export { default as Title } from './title.svelte';
 export { default as Trigger } from './trigger.svelte';
+export { anatomy as popoverAnatomy } from '@zag-js/popover';

package/dist/presence/root.svelte

@@ -8,6 +8,7 @@
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
+  import {reflect} from '@zag-js/svelte';
   import {createSplitProps} from '@zag-js/utils';
   import {createPresence} from './create-presence.svelte.js';
 
@@ -17,7 +18,7 @@
     createSplitProps<CreatePresenceProps>(['present', 'keepMounted'])(props),
   );
 
-  let presence = createPresence(presenceProps);
+  let presence = createPresence(reflect(() => presenceProps));
 
   let mergedProps = $derived(mergeProps(otherProps, presence.getRootProps()));
 </script>

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

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

package/dist/progress/index.d.ts

@@ -8,3 +8,4 @@ export type { ProgressProps } from './root.svelte';
 export type { ProgressTrackProps } from './track.svelte';
 export type { ProgressValueTextProps } from './value-text.svelte';
 export type { ProgressViewProps } from './view.svelte';
+export { anatomy as progressAnatomy } from '@zag-js/progress';

package/dist/progress/index.js

@@ -1 +1,2 @@
 export * as Progress from './progress.js';
+export { anatomy as progressAnatomy } from '@zag-js/progress';

package/dist/progress/progress.d.ts

@@ -1,4 +1,3 @@
-export { anatomy } from '@zag-js/progress';
 export { default as CircleRange } from './circle-range.svelte';
 export { default as CircleTrack } from './circle-track.svelte';
 export { default as Circle } from './circle.svelte';

package/dist/progress/progress.js

@@ -1,4 +1,3 @@
-export { anatomy } from '@zag-js/progress';
 export { default as CircleRange } from './circle-range.svelte';
 export { default as CircleTrack } from './circle-track.svelte';
 export { default as Circle } from './circle.svelte';

package/dist/progress/root.svelte

@@ -15,6 +15,7 @@
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
+  import {reflect} from '@zag-js/svelte';
   import {createSplitProps} from '@zag-js/utils';
   import {progressContext} from './context.svelte.js';
   import {createProgress} from './create-progress.svelte.js';
@@ -33,7 +34,7 @@
     ])(props),
   );
 
-  let progress = createProgress(progressProps);
+  let progress = createProgress(reflect(() => progressProps));
 
   let mergedProps = $derived(mergeProps(otherProps, progress.getRootProps()));
 

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

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

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

@@ -3,3 +3,4 @@ export type { QRCodeFrameProps } from './frame.svelte';
 export type { QRCodeOverlayProps } from './overlay.svelte';
 export type { QRCodePatternProps } from './pattern.svelte';
 export type { QRCodeProps } from './root.svelte';
+export { anatomy as qrCodeAnatomy } from '@zag-js/qr-code';

package/dist/qr-code/index.js

@@ -1 +1,2 @@
 export * as QRCode from './qr-code.js';
+export { anatomy as qrCodeAnatomy } from '@zag-js/qr-code';

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

@@ -1,4 +1,3 @@
-export { anatomy } from '@zag-js/qr-code';
 export { default as Frame } from './frame.svelte';
 export { default as Overlay } from './overlay.svelte';
 export { default as Pattern } from './pattern.svelte';

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

@@ -1,4 +1,3 @@
-export { anatomy } from '@zag-js/qr-code';
 export { default as Frame } from './frame.svelte';
 export { default as Overlay } from './overlay.svelte';
 export { default as Pattern } from './pattern.svelte';

package/dist/qr-code/root.svelte

@@ -15,6 +15,7 @@
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
+  import {reflect} from '@zag-js/svelte';
   import {createSplitProps} from '@zag-js/utils';
   import {qrCodeContext} from './context.svelte.js';
   import {createQRCode} from './create-qr-code.svelte.js';
@@ -27,7 +28,7 @@
     ),
   );
 
-  let qrCode = createQRCode(qrCodeProps);
+  let qrCode = createQRCode(reflect(() => qrCodeProps));
 
   let mergedProps = $derived(mergeProps(otherProps, qrCode.getRootProps()));
 

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

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

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

@@ -6,3 +6,4 @@ export type { RadioGroupItemTextProps } from './item-text.svelte';
 export type { RadioGroupItemProps } from './item.svelte';
 export type { RadioGroupLabelProps } from './label.svelte';
 export type { RadioGroupProps } from './root.svelte';
+export { anatomy as radioGroupAnatomy } from '@zag-js/radio-group';

package/dist/radio-group/index.js

@@ -1 +1,2 @@
 export * as RadioGroup from './radio-group.js';
+export { anatomy as radioGroupAnatomy } from '@zag-js/radio-group';

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

@@ -1,4 +1,3 @@
-export { anatomy } from '@zag-js/radio-group';
 export { default as Indicator } from './indicator.svelte';
 export { default as ItemControl } from './item-control.svelte';
 export { default as ItemHiddenInput } from './item-hidden-input.svelte';

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

@@ -1,4 +1,3 @@
-export { anatomy } from '@zag-js/radio-group';
 export { default as Indicator } from './indicator.svelte';
 export { default as ItemControl } from './item-control.svelte';
 export { default as ItemHiddenInput } from './item-hidden-input.svelte';

package/dist/radio-group/root.svelte

@@ -15,6 +15,7 @@
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
+  import {reflect} from '@zag-js/svelte';
   import {createSplitProps} from '@zag-js/utils';
   import {radioGroupContext} from './context.svelte.js';
   import {createRadioGroup} from './create-radio-group.svelte.js';
@@ -35,7 +36,7 @@
     ])(props),
   );
 
-  let radioGroup = createRadioGroup(radioGroupProps);
+  let radioGroup = createRadioGroup(reflect(() => radioGroupProps));
 
   let mergedProps = $derived(mergeProps(otherProps, radioGroup.getRootProps()));
 

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

@@ -1,14 +1,14 @@
-import { createUniqueId } from '../create-unique-id.js';
 import { getEnvironmentContext } from '../environment-provider/context.svelte.js';
 import { getLocaleContext } from '../locale-provider/context.svelte.js';
 import * as ratingGroup from '@zag-js/rating-group';
 import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
+import { uid } from 'uid';
 export function createRatingGroup(props) {
     const locale = getLocaleContext();
     const environment = getEnvironmentContext();
     const [state, send] = useMachine(ratingGroup.machine({
         ...props,
-        id: props.id ?? createUniqueId(),
+        id: props.id ?? uid(),
         dir: locale?.dir,
         getRootNode: environment?.getRootNode,
     }));

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

@@ -4,3 +4,4 @@ export type { RatingGroupHiddenInputProps } from './hidden-input.svelte';
 export type { RatingGroupItemProps } from './item.svelte';
 export type { RatingGroupLabelProps } from './label.svelte';
 export type { RatingGroupProps } from './root.svelte';
+export { anatomy as ratingGroupAnatomy } from '@zag-js/rating-group';

package/dist/rating-group/index.js

@@ -1 +1,2 @@
 export * as RatingGroup from './rating-group.js';
+export { anatomy as ratingGroupAnatomy } from '@zag-js/rating-group';

package/dist/rating-group/item.svelte

@@ -6,7 +6,7 @@
   export interface RatingGroupItemProps
     extends Assign<Omit<HTMLProps<'div'>, 'children'>, ItemProps> {
     asChild?: AsChild<ItemState>;
-    children: Snippet<[ItemState]>;
+    children?: Snippet<[ItemState]>;
   }
 </script>
 
@@ -28,6 +28,6 @@
   {@render asChild(mergedProps, itemState)}
 {:else}
   <div {...mergedProps}>
-    {@render children(itemState)}
+    {@render children?.(itemState)}
   </div>
 {/if}

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

@@ -1,4 +1,3 @@
-export { anatomy } from '@zag-js/rating-group';
 export { default as Control } from './control.svelte';
 export { default as HiddenInput } from './hidden-input.svelte';
 export { default as Item } from './item.svelte';