ui-ingredients 0.4.1 → 0.4.3

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

@@ -1,17 +1,17 @@
+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 * as accordion from '@zag-js/accordion';
 import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
-import { uid } from 'uid';
 export function createAccordion(props) {
     const locale = getLocaleContext();
     const environment = getEnvironmentContext();
-    const id = uid();
+    const id = createUniqueId();
     const context = reflect(() => ({
-        ...props,
-        id: props.id ?? id,
+        id,
         dir: locale?.dir,
         getRootNode: environment?.getRootNode,
+        ...props,
     }));
     const [state, send] = useMachine(accordion.machine(context), { context });
     return reflect(() => accordion.connect(state, send, normalizeProps));

package/dist/alert-dialog/create-alert-dialog.svelte.js

@@ -1,21 +1,21 @@
+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 { mergeProps } from '../merge-props.js';
 import * as dialog from '@zag-js/dialog';
 import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
-import { uid } from 'uid';
 import { parts } from './alert-dialog-anatomy.js';
 export function createAlertDialog(props) {
     const locale = getLocaleContext();
     const environment = getEnvironmentContext();
-    const id = uid();
+    const id = createUniqueId();
     const context = reflect(() => ({
         id,
         dir: locale?.dir,
         role: 'alertdialog',
-        ...props,
         getRootNode: environment?.getRootNode,
         'open.controlled': props.openControlled,
+        ...props,
     }));
     const [state, send] = useMachine(dialog.machine(context), { context });
     return reflect(() => {

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

@@ -1,17 +1,17 @@
+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 * as avatar from '@zag-js/avatar';
 import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
-import { uid } from 'uid';
 export function createAvatar(props) {
     const locale = getLocaleContext();
     const environment = getEnvironmentContext();
-    const id = uid();
+    const id = createUniqueId();
     const context = reflect(() => ({
-        ...props,
-        id: props.id ?? id,
+        id,
         dir: locale?.dir,
         getRootNode: environment?.getRootNode,
+        ...props,
     }));
     const [state, send] = useMachine(avatar.machine(context), { context });
     return reflect(() => avatar.connect(state, send, normalizeProps));

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

@@ -1,17 +1,17 @@
+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 * as carousel from '@zag-js/carousel';
 import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
-import { uid } from 'uid';
 export function createCarousel(props) {
     const locale = getLocaleContext();
     const environment = getEnvironmentContext();
-    const id = uid();
+    const id = createUniqueId();
     const context = reflect(() => ({
-        ...props,
-        id: props.id ?? id,
+        id,
         dir: locale?.dir,
         getRootNode: environment?.getRootNode,
+        ...props,
     }));
     const [state, send] = useMachine(carousel.machine(context), { context });
     return reflect(() => carousel.connect(state, send, normalizeProps));

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

@@ -1,15 +1,17 @@
+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 * as checkbox from '@zag-js/checkbox';
 import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
-import { uid } from 'uid';
 export function createCheckbox(props) {
     const field = getFieldContext();
     const locale = getLocaleContext();
     const environment = getEnvironmentContext();
-    const id = uid();
+    const id = createUniqueId();
     const context = reflect(() => ({
+        id,
+        dir: locale?.dir,
         ids: {
             label: field?.ids.label,
             hiddenInput: field?.ids.control,
@@ -18,10 +20,8 @@ export function createCheckbox(props) {
         disabled: field?.disabled,
         readOnly: field?.readOnly,
         required: field?.required,
-        ...props,
-        id: props.id ?? id,
-        dir: locale?.dir,
         getRootNode: environment?.getRootNode,
+        ...props,
     }));
     const [state, send] = useMachine(checkbox.machine(context), { context });
     return reflect(() => {

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

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

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

@@ -1,18 +1,18 @@
+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 * as collapsible from '@zag-js/collapsible';
 import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
-import { uid } from 'uid';
 export function createCollapsible(props) {
     const locale = getLocaleContext();
     const environment = getEnvironmentContext();
-    const id = uid();
+    const id = createUniqueId();
     const context = reflect(() => ({
         id,
         dir: locale?.dir,
-        ...props,
         getRootNode: environment?.getRootNode,
         'open.controlled': props.openControlled,
+        ...props,
     }));
     const [state, send] = useMachine(collapsible.machine(context), { context });
     return reflect(() => collapsible.connect(state, send, normalizeProps));

package/dist/color-picker/create-color-picker.svelte.js

@@ -1,13 +1,13 @@
+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 * as colorPicker from '@zag-js/color-picker';
 import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
-import { uid } from 'uid';
 import { parts } from './color-picker-anatomy.js';
 export function createColorPicker(props) {
     const locale = getLocaleContext();
     const environment = getEnvironmentContext();
-    const id = uid();
+    const id = createUniqueId();
     const context = $derived.by(() => ({
         id,
         dir: locale?.dir,

package/dist/combobox/combobox-item-group.svelte

@@ -6,8 +6,8 @@
 </script>
 
 <script lang="ts">
+  import {createUniqueId} from '../create-unique-id.js';
   import {mergeProps} from '../merge-props.js';
-  import {uid} from 'uid';
   import {
     getComboboxContext,
     setComboboxItemGroupPropsContext,
@@ -23,7 +23,7 @@
 
   let combobox = getComboboxContext();
 
-  let id_ = uid();
+  let id_ = createUniqueId();
 
   let comboboxItemGroupProps = $derived({
     id: id ?? id_,

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

@@ -1,10 +1,10 @@
+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 * as combobox from '@zag-js/combobox';
 import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
 import { createSplitProps } from '@zag-js/utils';
-import { uid } from 'uid';
 export function createCombobox(props) {
     const [collectionProps, comboboxProps] = $derived(createSplitProps([
         'items',
@@ -16,7 +16,7 @@ export function createCombobox(props) {
     const field = getFieldContext();
     const locale = getLocaleContext();
     const environment = getEnvironmentContext();
-    const id = uid();
+    const id = createUniqueId();
     const context = reflect(() => ({
         id,
         ids: {

package/dist/create-unique-id.d.ts

@@ -0,0 +1 @@
+export declare const createUniqueId: () => string;

package/dist/create-unique-id.js

@@ -0,0 +1,2 @@
+import { uid } from 'uid';
+export const createUniqueId = () => uid();

package/dist/date-picker/create-date-picker.svelte.d.ts

@@ -1,5 +1,5 @@
-import type { GenericObject } from '../types.js';
 import * as datePicker from '@zag-js/date-picker';
+import type { HTMLAttributes } from 'svelte/elements';
 type Omitted = 'id' | 'dir' | 'min' | 'max' | 'value' | 'focusedValue' | 'getRootNode' | 'open.controlled';
 export interface CreateDatePickerProps extends Omit<datePicker.Context, Omitted> {
     id?: string;
@@ -10,7 +10,7 @@ export interface CreateDatePickerProps extends Omit<datePicker.Context, Omitted>
     openControlled?: boolean;
 }
 export interface CreateDatePickerReturn extends datePicker.Api {
-    getViewProps(props: datePicker.ViewProps): GenericObject;
+    getViewProps(props: datePicker.ViewProps): HTMLAttributes<HTMLElement>;
 }
 export declare function createDatePicker(props: CreateDatePickerProps): CreateDatePickerReturn;
 export {};

package/dist/date-picker/create-date-picker.svelte.js

@@ -1,13 +1,13 @@
+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 * as datePicker from '@zag-js/date-picker';
 import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
-import { uid } from 'uid';
 import { parts } from './date-picker-anatomy.js';
 export function createDatePicker(props) {
     const locale = getLocaleContext();
     const environment = getEnvironmentContext();
-    const id = uid();
+    const id = createUniqueId();
     /* FIXME: use reflect */
     const context = $derived.by(() => ({
         id,

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

@@ -1,19 +1,19 @@
+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 * as dialog from '@zag-js/dialog';
 import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
-import { uid } from 'uid';
 export function createDialog(props) {
     const locale = getLocaleContext();
     const environment = getEnvironmentContext();
-    const id = uid();
+    const id = createUniqueId();
     const context = reflect(() => ({
         id,
         dir: locale?.dir,
         role: 'dialog',
-        ...props,
         getRootNode: environment?.getRootNode,
         'open.controlled': props.openControlled,
+        ...props,
     }));
     const [state, send] = useMachine(dialog.machine(context), { context });
     return reflect(() => dialog.connect(state, send, normalizeProps));

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

@@ -1,21 +1,21 @@
+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 { mergeProps } from '../merge-props.js';
 import * as dialog from '@zag-js/dialog';
 import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
-import { uid } from 'uid';
 import { parts } from './drawer-anatomy.js';
 export function createDrawer(props) {
     const locale = getLocaleContext();
     const environment = getEnvironmentContext();
-    const id = uid();
+    const id = createUniqueId();
     const context = reflect(() => ({
         id,
         dir: locale?.dir,
         role: 'dialog',
-        ...props,
         getRootNode: environment?.getRootNode,
         'open.controlled': props.openControlled,
+        ...props,
     }));
     const [state, send] = useMachine(dialog.machine(context), { context });
     return reflect(() => {

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

@@ -1,14 +1,14 @@
+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 * as editable from '@zag-js/editable';
 import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
-import { uid } from 'uid';
 export function createEditable(props) {
     const field = getFieldContext();
     const locale = getLocaleContext();
     const environment = getEnvironmentContext();
-    const id = uid();
+    const id = createUniqueId();
     const context = reflect(() => ({
         id,
         ids: {
@@ -20,9 +20,9 @@ export function createEditable(props) {
         disabled: field?.disabled,
         readOnly: field?.readOnly,
         required: field?.required,
-        ...props,
         getRootNode: environment?.getRootNode,
         'edit.controlled': props.editControlled,
+        ...props,
     }));
     const [state, send] = useMachine(editable.machine(context), { context });
     return reflect(() => {

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

@@ -1,11 +1,11 @@
+import { createUniqueId } from '../create-unique-id.js';
 import { getEnvironmentContext } from '../environment-provider/enviroment-provider-context.svelte.js';
 import { ariaAttr, dataAttr, getDocument, getWindow } from '@zag-js/dom-query';
 import { reflect } from '@zag-js/svelte';
-import { uid } from 'uid';
 import { parts } from './field-anatomy.js';
 export function createField(props) {
     const environment = getEnvironmentContext();
-    const id_ = uid();
+    const id_ = createUniqueId();
     const { 
     /**/
     ids, invalid, disabled, required, readOnly, } = $derived.by(() => {

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

@@ -1,27 +1,27 @@
+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 * 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 id = uid();
+    const id = createUniqueId();
     const context = reflect(() => ({
+        id,
+        dir: locale?.dir,
         ids: {
             label: field?.ids.label,
             hiddenInput: field?.ids.control,
         },
+        locale: locale?.locale,
         invalid: field?.invalid,
         disabled: field?.disabled,
         required: field?.required,
-        ...props,
-        id: props.id ?? id,
-        dir: locale?.dir,
-        locale: props.locale ?? locale?.locale,
         getRootNode: environment?.getRootNode,
+        ...props,
     }));
     const [state, send] = useMachine(fileUpload.machine(context), { context });
     return reflect(() => {

package/dist/floating-panel/create-floating-panel.svelte.js

@@ -1,17 +1,17 @@
+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 * as floatingPanel from '@zag-js/floating-panel';
 import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
-import { uid } from 'uid';
 export function createFloatingPanel(props) {
     const locale = getLocaleContext();
     const environment = getEnvironmentContext();
-    const id = uid();
+    const id = createUniqueId();
     const context = reflect(() => ({
-        ...props,
-        id: props.id ?? id,
+        id,
         dir: locale?.dir,
         getRootNode: environment?.getRootNode,
+        ...props,
     }));
     const [state, send] = useMachine(floatingPanel.machine(context), { context });
     return reflect(() => floatingPanel.connect(state, send, normalizeProps));

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

@@ -1,18 +1,18 @@
+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 * 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 id = uid();
+    const id = createUniqueId();
     const context = reflect(() => ({
         id,
         dir: locale?.dir,
-        ...props,
         getRootNode: environment?.getRootNode,
         'open.controlled': props.openControlled,
+        ...props,
     }));
     const [state, send] = useMachine(hoverCard.machine(context), { context });
     return reflect(() => hoverCard.connect(state, send, normalizeProps));

package/dist/index.d.ts

@@ -21,7 +21,6 @@ export * from './highlight/index.js';
 export * from './hover-card/index.js';
 export * from './locale-provider/index.js';
 export * from './menu/index.js';
-export * from './merge-props.js';
 export * from './number-input/index.js';
 export * from './pagination/index.js';
 export * from './pin-input/index.js';
@@ -49,3 +48,6 @@ export * from './toggle/index.js';
 export * from './tooltip/index.js';
 export * from './tour/index.js';
 export * from './tree-view/index.js';
+export * from './create-context.svelte.js';
+export * from './create-unique-id.js';
+export * from './merge-props.js';

package/dist/index.js

@@ -21,7 +21,6 @@ export * from './highlight/index.js';
 export * from './hover-card/index.js';
 export * from './locale-provider/index.js';
 export * from './menu/index.js';
-export * from './merge-props.js';
 export * from './number-input/index.js';
 export * from './pagination/index.js';
 export * from './pin-input/index.js';
@@ -49,3 +48,6 @@ export * from './toggle/index.js';
 export * from './tooltip/index.js';
 export * from './tour/index.js';
 export * from './tree-view/index.js';
+export * from './create-context.svelte.js';
+export * from './create-unique-id.js';
+export * from './merge-props.js';

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

@@ -1,18 +1,18 @@
+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 * 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 id = uid();
+    const id = createUniqueId();
     const context = reflect(() => ({
         id,
         dir: locale?.dir,
-        ...props,
         getRootNode: environment?.getRootNode,
         'open.controlled': props.openControlled,
+        ...props,
     }));
     const [state, send, machine] = useMachine(menu.machine(context), { context });
     return reflect(() => ({

package/dist/menu/menu-item-group.svelte

@@ -6,8 +6,8 @@
 </script>
 
 <script lang="ts">
+  import {createUniqueId} from '../create-unique-id.js';
   import {mergeProps} from '../merge-props.js';
-  import {uid} from 'uid';
   import {
     getMenuContext,
     setMenuItemGroupPropsContext,
@@ -23,7 +23,7 @@
 
   let menu = getMenuContext();
 
-  let id_ = uid();
+  let id_ = createUniqueId();
 
   let itemGroupProps = $derived({
     id: id ?? id_,

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

@@ -1,28 +1,28 @@
+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 * as numberInput from '@zag-js/number-input';
 import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
-import { uid } from 'uid';
 export function createNumberInput(props) {
     const field = getFieldContext();
     const locale = getLocaleContext();
     const environment = getEnvironmentContext();
-    const id = uid();
+    const id = createUniqueId();
     const context = reflect(() => ({
+        id,
+        dir: locale?.dir,
         ids: {
             label: field?.ids.label,
             input: field?.ids.control,
         },
+        locale: locale?.locale,
         invalid: field?.invalid,
         disabled: field?.disabled,
         readOnly: field?.readOnly,
         required: field?.required,
-        ...props,
-        id: props.id ?? id,
-        dir: locale?.dir,
-        locale: props.locale ?? locale?.locale,
         getRootNode: environment?.getRootNode,
+        ...props,
     }));
     const [state, send] = useMachine(numberInput.machine(context), { context });
     return reflect(() => {

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

@@ -1,17 +1,17 @@
+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 * 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 id = uid();
+    const id = createUniqueId();
     const context = reflect(() => ({
-        ...props,
-        id: props.id ?? id,
+        id,
         dir: locale?.dir,
         getRootNode: environment?.getRootNode,
+        ...props,
     }));
     const [state, send] = useMachine(pagination.machine(context), { context });
     return reflect(() => pagination.connect(state, send, normalizeProps));

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

@@ -1,15 +1,17 @@
+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 * as pinInput from '@zag-js/pin-input';
 import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
-import { uid } from 'uid';
 export function createPinInputContext(props) {
     const field = getFieldContext();
     const locale = getLocaleContext();
     const environment = getEnvironmentContext();
-    const id = uid();
+    const id = createUniqueId();
     const context = reflect(() => ({
+        id,
+        dir: locale?.dir,
         ids: {
             label: field?.ids.label,
             hiddenInput: field?.ids.control,
@@ -18,10 +20,8 @@ export function createPinInputContext(props) {
         required: field?.required,
         disabled: field?.disabled,
         readOnly: field?.readOnly,
-        ...props,
-        id: props.id ?? id,
-        dir: locale?.dir,
         getRootNode: environment?.getRootNode,
+        ...props,
     }));
     const [state, send] = useMachine(pinInput.machine(context), { context });
     return reflect(() => {

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

@@ -1,18 +1,18 @@
+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 * 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 id = uid();
+    const id = createUniqueId();
     const context = reflect(() => ({
         id,
         dir: locale?.dir,
-        ...props,
         getRootNode: environment?.getRootNode,
         'open.controlled': props.openControlled,
+        ...props,
     }));
     const [state, send] = useMachine(popover.machine(context), { context });
     return reflect(() => popover.connect(state, send, normalizeProps));