ui-ingredients 0.0.30 → 0.0.32

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

@@ -0,0 +1,162 @@
+import { getEnvironmentContext } from '../environment-provider/context.svelte.js';
+import { ariaAttr, dataAttr, getDocument, getWindow } from '@zag-js/dom-query';
+import { uid } from 'uid';
+import { parts } from './anatomy.js';
+export function createField(props) {
+    const environment = getEnvironmentContext();
+    const id_ = uid();
+    const { 
+    /**/
+    ids, invalid, disabled, required, readOnly, } = $derived.by(() => {
+        const id = props.id ?? id_;
+        const ids = {
+            root: props.ids?.root ?? `field:${id}`,
+            label: props.ids?.label ?? `field:${id}:label`,
+            control: props.ids?.control ?? `field:${id}:control`,
+            errorText: props.ids?.errorText ?? `field:${id}:error-text`,
+            helperText: props.ids?.helperText ?? `field:${id}:helper-text`,
+        };
+        return {
+            ids,
+            invalid: props.invalid ?? false,
+            required: props.required ?? false,
+            disabled: props.disabled ?? false,
+            readOnly: props.readOnly ?? false,
+        };
+    });
+    let hasErrorText = $state(false);
+    let hasHelperText = $state(false);
+    const ariaDescribedby = $derived.by(() => {
+        const l = [];
+        if (hasErrorText) {
+            l.push(ids.errorText);
+        }
+        if (hasHelperText) {
+            l.push(ids.helperText);
+        }
+        return l.join(' ');
+    });
+    $effect(() => {
+        const rootNode = environment?.getRootNode() ?? document;
+        const doc = getDocument(rootNode);
+        const win = getWindow(rootNode);
+        function handler() {
+            hasErrorText = invalid && doc.getElementById(ids.errorText) !== null;
+            hasHelperText = doc.getElementById(ids.helperText) !== null;
+        }
+        handler();
+        const observer = new win.MutationObserver(handler);
+        observer.observe(rootNode, { childList: true, subtree: true });
+        return () => observer.disconnect();
+    });
+    function getRootProps() {
+        return {
+            ...parts.root.attrs,
+            id: ids.root,
+            role: 'group',
+            'data-invalid': dataAttr(invalid),
+            'data-disabled': dataAttr(disabled),
+            'data-required': dataAttr(required),
+            'data-readonly': dataAttr(readOnly),
+        };
+    }
+    function getLabelProps() {
+        return {
+            ...parts.label.attrs,
+            id: ids.label,
+            for: ids.control,
+            'data-invalid': dataAttr(invalid),
+            'data-disabled': dataAttr(disabled),
+            'data-required': dataAttr(required),
+            'data-readonly': dataAttr(readOnly),
+        };
+    }
+    function getErrorTextProps() {
+        return {
+            ...parts.errorText.attrs,
+            id: ids.errorText,
+            hidden: !hasErrorText,
+            'data-invalid': dataAttr(invalid),
+            'data-disabled': dataAttr(disabled),
+            'data-required': dataAttr(required),
+            'data-readonly': dataAttr(readOnly),
+        };
+    }
+    function getHelperTextProps() {
+        return {
+            id: ids.helperText,
+            'data-invalid': dataAttr(invalid),
+            'data-disabled': dataAttr(disabled),
+            'data-required': dataAttr(required),
+            'data-readonly': dataAttr(readOnly),
+        };
+    }
+    function getInputProps() {
+        return {
+            ...parts.input.attrs,
+            id: ids.control,
+            disabled,
+            required,
+            readonly: readOnly,
+            'aria-invalid': ariaAttr(invalid),
+            'aria-describedby': ariaDescribedby,
+            'data-invalid': dataAttr(invalid),
+            'data-disabled': dataAttr(disabled),
+            'data-required': dataAttr(required),
+            'data-readonly': dataAttr(readOnly),
+        };
+    }
+    function getSelectProps() {
+        return {
+            ...parts.select.attrs,
+            id: ids.control,
+            disabled,
+            required,
+            'aria-invalid': ariaAttr(invalid),
+            'aria-readonly': ariaAttr(readOnly),
+            'aria-describedby': ariaDescribedby,
+            'data-invalid': dataAttr(invalid),
+            'data-disabled': dataAttr(disabled),
+            'data-required': dataAttr(required),
+            'data-readonly': dataAttr(readOnly),
+        };
+    }
+    function getTextareaProps() {
+        return {
+            ...parts.textarea.attrs,
+            id: ids.control,
+            disabled,
+            required,
+            readonly: readOnly,
+            'aria-describedby': ariaDescribedby,
+            'data-invalid': dataAttr(invalid),
+            'data-disabled': dataAttr(disabled),
+            'data-required': dataAttr(required),
+            'data-readonly': dataAttr(readOnly),
+        };
+    }
+    return {
+        get ids() {
+            return ids;
+        },
+        get disabled() {
+            return disabled;
+        },
+        get required() {
+            return required;
+        },
+        get readOnly() {
+            return readOnly;
+        },
+        get invalid() {
+            return invalid;
+        },
+        getRootProps,
+        getLabelProps,
+        getErrorTextProps,
+        getHelperTextProps,
+        getInputProps,
+        getSelectProps,
+        getTextareaProps,
+    };
+}

package/dist/field/error-text.svelte

@@ -0,0 +1,26 @@
+<script lang="ts" module>
+  import type {AsChild, HTMLProps} from '../types.js';
+
+  export interface FieldErrorTextProps extends HTMLProps<'div'> {
+    asChild?: AsChild;
+  }
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {fieldContext} from './context.svelte.js';
+
+  let {asChild, children, ...props}: FieldErrorTextProps = $props();
+
+  let field = fieldContext.get();
+
+  let mergedProps = $derived(mergeProps(props, field.getErrorTextProps()));
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps)}
+{:else}
+  <div {...mergedProps}>
+    {@render children?.()}
+  </div>
+{/if}

package/dist/field/error-text.svelte.d.ts

@@ -0,0 +1,18 @@
+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 ErrorText: $$__sveltets_2_IsomorphicComponent<FieldErrorTextProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type ErrorText = InstanceType<typeof ErrorText>;
+export default ErrorText;

package/dist/field/field.d.ts

@@ -0,0 +1,7 @@
+export { default as ErrorText } from './error-text.svelte';
+export { default as HelperText } from './helper-text.svelte';
+export { default as Input } from './input.svelte';
+export { default as Label } from './label.svelte';
+export { default as Root } from './root.svelte';
+export { default as Select } from './select.svelte';
+export { default as Textarea } from './textarea.svelte';

package/dist/field/field.js

@@ -0,0 +1,7 @@
+export { default as ErrorText } from './error-text.svelte';
+export { default as HelperText } from './helper-text.svelte';
+export { default as Input } from './input.svelte';
+export { default as Label } from './label.svelte';
+export { default as Root } from './root.svelte';
+export { default as Select } from './select.svelte';
+export { default as Textarea } from './textarea.svelte';

package/dist/field/helper-text.svelte

@@ -0,0 +1,26 @@
+<script lang="ts" module>
+  import type {AsChild, HTMLProps} from '../types.js';
+
+  export interface FieldHelperTextProps extends HTMLProps<'div'> {
+    asChild?: AsChild;
+  }
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {fieldContext} from './context.svelte.js';
+
+  let {asChild, children, ...props}: FieldHelperTextProps = $props();
+
+  let field = fieldContext.get();
+
+  let mergedProps = $derived(mergeProps(props, field.getHelperTextProps()));
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps)}
+{:else}
+  <div {...mergedProps}>
+    {@render children?.()}
+  </div>
+{/if}

package/dist/field/helper-text.svelte.d.ts

@@ -0,0 +1,18 @@
+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 HelperText: $$__sveltets_2_IsomorphicComponent<FieldHelperTextProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type HelperText = InstanceType<typeof HelperText>;
+export default HelperText;

package/dist/field/index.d.ts

@@ -0,0 +1,9 @@
+export { anatomy as fieldAnatomy } from './anatomy.js';
+export type { FieldErrorTextProps } from './error-text.svelte';
+export type { FieldHelperTextProps } from './helper-text.svelte';
+export type { FieldInputProps } from './input.svelte';
+export type { FieldLabelProps } from './label.svelte';
+export type { FieldProps } from './root.svelte';
+export type { FieldSelectProps } from './select.svelte';
+export type { FieldTextareaProps } from './textarea.svelte';
+export * as Field from './field.js';

package/dist/field/index.js

@@ -0,0 +1,2 @@
+export { anatomy as fieldAnatomy } from './anatomy.js';
+export * as Field from './field.js';

package/dist/field/input.svelte

@@ -0,0 +1,24 @@
+<script lang="ts" module>
+  import type {AsChild, HTMLProps} from '../types.js';
+
+  export interface FieldInputProps extends HTMLProps<'input'> {
+    asChild?: AsChild;
+  }
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {fieldContext} from './context.svelte.js';
+
+  let {asChild, ...props}: FieldInputProps = $props();
+
+  let field = fieldContext.get();
+
+  let mergedProps = $derived(mergeProps(props, field.getInputProps()));
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps)}
+{:else}
+  <input {...mergedProps} />
+{/if}

package/dist/field/input.svelte.d.ts

@@ -0,0 +1,18 @@
+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 Input: $$__sveltets_2_IsomorphicComponent<FieldInputProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type Input = InstanceType<typeof Input>;
+export default Input;

package/dist/field/label.svelte

@@ -0,0 +1,26 @@
+<script lang="ts" module>
+  import type {AsChild, HTMLProps} from '../types.js';
+
+  export interface FieldLabelProps extends HTMLProps<'label'> {
+    asChild?: AsChild;
+  }
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {fieldContext} from './context.svelte.js';
+
+  let {children, asChild, ...props}: FieldLabelProps = $props();
+
+  let field = fieldContext.get();
+
+  let mergedProps = $derived(mergeProps(props, field.getLabelProps()));
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps)}
+{:else}
+  <label {...mergedProps}>
+    {@render children?.()}
+  </label>
+{/if}

package/dist/field/label.svelte.d.ts

@@ -0,0 +1,18 @@
+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<FieldLabelProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type Label = InstanceType<typeof Label>;
+export default Label;

package/dist/field/root.svelte

@@ -0,0 +1,44 @@
+<script lang="ts" module>
+  import type {AsChild, Assign, HTMLProps} from '../types.js';
+  import type {
+    CreateFieldProps,
+    CreateFieldReturn,
+  } from './create-field.svelte.js';
+
+  export interface FieldProps
+    extends Assign<HTMLProps<'div'>, CreateFieldProps> {
+    asChild?: AsChild<CreateFieldReturn>;
+  }
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {createSplitProps} from '@zag-js/utils';
+  import {fieldContext} from './context.svelte.js';
+  import {createField} from './create-field.svelte.js';
+
+  let {asChild, children, ...props}: FieldProps = $props();
+
+  let [fieldProps, otherProps] = createSplitProps<CreateFieldProps>([
+    'id',
+    'ids',
+    'invalid',
+    'disabled',
+    'readOnly',
+    'required',
+  ])(props);
+
+  let field = createField(fieldProps);
+
+  let mergedProps = $derived(mergeProps(otherProps, field.getRootProps()));
+
+  fieldContext.set(field);
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps, field)}
+{:else}
+  <div {...mergedProps}>
+    {@render children?.()}
+  </div>
+{/if}

package/dist/field/root.svelte.d.ts

@@ -0,0 +1,18 @@
+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<FieldProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type Root = InstanceType<typeof Root>;
+export default Root;

package/dist/field/select.svelte

@@ -0,0 +1,24 @@
+<script lang="ts" module>
+  import type {AsChild, HTMLProps} from '../types.js';
+
+  export interface FieldSelectProps extends HTMLProps<'select'> {
+    asChild?: AsChild;
+  }
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {fieldContext} from './context.svelte.js';
+
+  let {children, asChild, ...props}: FieldSelectProps = $props();
+
+  let field = fieldContext.get();
+
+  let mergedProps = $derived(mergeProps(props, field.getSelectProps()));
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps)}
+{:else}
+  <select {...mergedProps}>{@render children?.()}</select>
+{/if}

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

@@ -0,0 +1,18 @@
+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 Select: $$__sveltets_2_IsomorphicComponent<FieldSelectProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type Select = InstanceType<typeof Select>;
+export default Select;

package/dist/field/textarea.svelte

@@ -0,0 +1,24 @@
+<script lang="ts" module>
+  import type {AsChild, HTMLProps} from '../types.js';
+
+  export interface FieldTextareaProps extends HTMLProps<'textarea'> {
+    asChild?: AsChild;
+  }
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {fieldContext} from './context.svelte.js';
+
+  let {asChild, ...props}: FieldTextareaProps = $props();
+
+  let field = fieldContext.get();
+
+  let mergedProps = $derived(mergeProps(props, field.getTextareaProps()));
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps)}
+{:else}
+  <textarea {...mergedProps}></textarea>
+{/if}

package/dist/field/textarea.svelte.d.ts

@@ -0,0 +1,18 @@
+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 Textarea: $$__sveltets_2_IsomorphicComponent<FieldTextareaProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type Textarea = InstanceType<typeof Textarea>;
+export default Textarea;

package/dist/file-upload/create-file-upload.svelte.js

@@ -1,14 +1,22 @@
-import { createUniqueId } from '../create-unique-id.js';
 import { getEnvironmentContext } from '../environment-provider/context.svelte.js';
+import { getFieldContext } from '../field/context.svelte.js';
 import { getLocaleContext } from '../locale-provider/context.svelte.js';
 import * as fileUpload from '@zag-js/file-upload';
 import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
+import { uid } from 'uid';
 export function createFileUpload(props) {
+    const field = getFieldContext();
     const locale = getLocaleContext();
     const environment = getEnvironmentContext();
     const [state, send] = useMachine(fileUpload.machine({
+        ids: {
+            label: field?.ids.label,
+            hiddenInput: field?.ids.control,
+        },
+        disabled: field?.disabled,
+        required: field?.required,
         ...props,
-        id: props.id ?? createUniqueId(),
+        id: props.id ?? uid(),
         dir: locale?.dir,
         locale: props.locale ?? locale?.locale,
         getRootNode: environment?.getRootNode,

package/dist/file-upload/file-upload.d.ts

@@ -1,4 +1,3 @@
-export { anatomy } from '@zag-js/file-upload';
 export { default as Dropzone } from './dropzone.svelte';
 export { default as HiddenInput } from './hidden-input.svelte';
 export { default as ItemDeleteTrigger } from './item-delete-trigger.svelte';

package/dist/file-upload/file-upload.js

@@ -1,4 +1,3 @@
-export { anatomy } from '@zag-js/file-upload';
 export { default as Dropzone } from './dropzone.svelte';
 export { default as HiddenInput } from './hidden-input.svelte';
 export { default as ItemDeleteTrigger } from './item-delete-trigger.svelte';

package/dist/file-upload/index.d.ts

@@ -11,3 +11,4 @@ export type { FileUploadItemProps } from './item.svelte';
 export type { FileUploadLabelProps } from './label.svelte';
 export type { FileUploadProps } from './root.svelte';
 export type { FileUploadTriggerProps } from './trigger.svelte';
+export { anatomy as fileUploadAnatomy } from '@zag-js/file-upload';

package/dist/file-upload/index.js

@@ -1 +1,2 @@
 export * as FileUpload from './file-upload.js';
+export { anatomy as fileUploadAnatomy } from '@zag-js/file-upload';

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,