From 82b6071b06ecfda3c04b563b80b1f3f0eb6c32ff Mon Sep 17 00:00:00 2001
From: jp calvo <calvojp92@gmail.com>
Date: Sat, 12 Oct 2024 21:18:05 +0800
Subject: [PATCH] chore: expose createUniqueId and createContext

---
 packages/core/package.json                           |  8 ++++++++
 .../src/lib/accordion/create-accordion.svelte.ts     |  8 ++++----
 .../lib/alert-dialog/create-alert-dialog.svelte.ts   |  6 +++---
 packages/core/src/lib/avatar/create-avatar.svelte.ts |  8 ++++----
 .../core/src/lib/carousel/create-carousel.svelte.ts  |  8 ++++----
 .../core/src/lib/checkbox/create-checkbox.svelte.ts  | 10 +++++-----
 .../src/lib/clipboard/create-clipboard.svelte.ts     |  8 ++++----
 .../src/lib/collapsible/create-collapsible.svelte.ts |  6 +++---
 .../lib/color-picker/create-color-picker.svelte.ts   |  4 ++--
 .../core/src/lib/combobox/combobox-item-group.svelte |  4 ++--
 .../core/src/lib/combobox/create-combobox.svelte.ts  |  4 ++--
 packages/core/src/lib/create-unique-id.ts            |  3 +++
 .../src/lib/date-picker/create-date-picker.svelte.ts |  7 ++++---
 packages/core/src/lib/dialog/create-dialog.svelte.ts |  6 +++---
 packages/core/src/lib/drawer/create-drawer.svelte.ts |  6 +++---
 .../core/src/lib/editable/create-editable.svelte.ts  |  6 +++---
 packages/core/src/lib/field/create-field.svelte.ts   |  4 ++--
 .../src/lib/file-upload/create-file-upload.svelte.ts | 12 ++++++------
 .../floating-panel/create-floating-panel.svelte.ts   |  8 ++++----
 .../src/lib/hover-card/create-hover-card.svelte.ts   |  6 +++---
 packages/core/src/lib/index.ts                       |  5 ++++-
 packages/core/src/lib/menu/create-menu.svelte.ts     |  6 +++---
 packages/core/src/lib/menu/menu-item-group.svelte    |  4 ++--
 .../lib/number-input/create-number-input.svelte.ts   | 12 ++++++------
 .../src/lib/pagination/create-pagination.svelte.ts   |  8 ++++----
 .../src/lib/pin-input/create-pin-input.svelte.ts     | 10 +++++-----
 .../core/src/lib/popover/create-popover.svelte.ts    |  6 +++---
 .../core/src/lib/progress/create-progress.svelte.ts  |  8 ++++----
 .../core/src/lib/qr-code/create-qr-code.svelte.ts    |  8 ++++----
 .../src/lib/radio-group/create-radio-group.svelte.ts |  8 ++++----
 .../lib/rating-group/create-rating-group.svelte.ts   | 10 +++++-----
 .../lib/segment-group/create-segment-group.svelte.ts |  8 ++++----
 packages/core/src/lib/select/create-select.svelte.ts |  4 ++--
 .../core/src/lib/select/select-item-group.svelte     |  4 ++--
 .../lib/signature-pad/create-signature-pad.svelte.ts |  8 ++++----
 packages/core/src/lib/slider/create-slider.svelte.ts |  8 ++++----
 .../core/src/lib/splitter/create-splitter.svelte.ts  |  8 +++++---
 packages/core/src/lib/steps/create-steps.svelte.ts   |  8 ++++----
 packages/core/src/lib/switch/create-switch.svelte.ts | 10 +++++-----
 packages/core/src/lib/tabs/create-tabs.svelte.ts     |  8 ++++----
 .../src/lib/tags-input/create-tags-input.svelte.ts   | 10 +++++-----
 .../src/lib/time-picker/create-time-picker.svelte.ts |  6 +++---
 packages/core/src/lib/timer/create-timer.svelte.ts   |  8 ++++----
 packages/core/src/lib/toast/create-toaster.svelte.ts |  8 +++-----
 .../lib/toggle-group/create-toggle-group.svelte.ts   |  8 ++++----
 .../core/src/lib/tooltip/create-tooltip.svelte.ts    |  6 +++---
 packages/core/src/lib/tour/create-tour.svelte.ts     |  6 +++---
 .../src/lib/tree-view/create-tree-view.svelte.ts     |  8 ++++----
 48 files changed, 179 insertions(+), 164 deletions(-)
 create mode 100644 packages/core/src/lib/create-unique-id.ts

diff --git a/packages/core/package.json b/packages/core/package.json
index 6f4df04c..f32aef9d 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -214,6 +214,14 @@
     "./merge-props": {
       "types": "./dist/merge-props.d.ts",
       "import": "./dist/merge-props.js"
+    },
+    "./create-context": {
+      "types": "./dist/create-context.d.ts",
+      "import": "./dist/create-context.js"
+    },
+    "./create-unique-id": {
+      "types": "./dist/create-unique-id.d.ts",
+      "import": "./dist/create-unique-id.js"
     }
   },
   "files": [
diff --git a/packages/core/src/lib/accordion/create-accordion.svelte.ts b/packages/core/src/lib/accordion/create-accordion.svelte.ts
index 0cc81049..e11dd59a 100644
--- a/packages/core/src/lib/accordion/create-accordion.svelte.ts
+++ b/packages/core/src/lib/accordion/create-accordion.svelte.ts
@@ -1,8 +1,8 @@
+import {createUniqueId} from '$lib/create-unique-id.js';
 import {getEnvironmentContext} from '$lib/environment-provider/enviroment-provider-context.svelte.js';
 import {getLocaleContext} from '$lib/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 interface CreateAccordionProps
   extends Omit<accordion.Context, 'id' | 'dir' | 'getRootNode'> {
@@ -17,13 +17,13 @@ export function createAccordion(
   const locale = getLocaleContext();
   const environment = getEnvironmentContext();
 
-  const id = uid();
+  const id = createUniqueId();
 
   const context: accordion.Context = reflect(() => ({
-    ...props,
-    id: props.id ?? id,
+    id,
     dir: locale?.dir,
     getRootNode: environment?.getRootNode,
+    ...props,
   }));
 
   const [state, send] = useMachine(accordion.machine(context), {context});
diff --git a/packages/core/src/lib/alert-dialog/create-alert-dialog.svelte.ts b/packages/core/src/lib/alert-dialog/create-alert-dialog.svelte.ts
index b2540c87..ea2c6380 100644
--- a/packages/core/src/lib/alert-dialog/create-alert-dialog.svelte.ts
+++ b/packages/core/src/lib/alert-dialog/create-alert-dialog.svelte.ts
@@ -1,9 +1,9 @@
+import {createUniqueId} from '$lib/create-unique-id.js';
 import {getEnvironmentContext} from '$lib/environment-provider/enviroment-provider-context.svelte.js';
 import {getLocaleContext} from '$lib/locale-provider/local-provider-context.svelte.js';
 import {mergeProps} from '$lib/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 interface CreateAlertDialogProps
@@ -23,15 +23,15 @@ export function createAlertDialog(
   const locale = getLocaleContext();
   const environment = getEnvironmentContext();
 
-  const id = uid();
+  const id = createUniqueId();
 
   const context: dialog.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});
diff --git a/packages/core/src/lib/avatar/create-avatar.svelte.ts b/packages/core/src/lib/avatar/create-avatar.svelte.ts
index 950052ea..e7595718 100644
--- a/packages/core/src/lib/avatar/create-avatar.svelte.ts
+++ b/packages/core/src/lib/avatar/create-avatar.svelte.ts
@@ -1,8 +1,8 @@
+import {createUniqueId} from '$lib/create-unique-id.js';
 import {getEnvironmentContext} from '$lib/environment-provider/enviroment-provider-context.svelte.js';
 import {getLocaleContext} from '$lib/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 interface CreateAvatarProps
   extends Omit<avatar.Context, 'id' | 'dir' | 'getRootNode'> {
@@ -15,13 +15,13 @@ export function createAvatar(props: CreateAvatarProps): CreateAvatarReturn {
   const locale = getLocaleContext();
   const environment = getEnvironmentContext();
 
-  const id = uid();
+  const id = createUniqueId();
 
   const context: avatar.Context = reflect(() => ({
-    ...props,
-    id: props.id ?? id,
+    id,
     dir: locale?.dir,
     getRootNode: environment?.getRootNode,
+    ...props,
   }));
 
   const [state, send] = useMachine(avatar.machine(context), {context});
diff --git a/packages/core/src/lib/carousel/create-carousel.svelte.ts b/packages/core/src/lib/carousel/create-carousel.svelte.ts
index dee1e7da..e481971c 100644
--- a/packages/core/src/lib/carousel/create-carousel.svelte.ts
+++ b/packages/core/src/lib/carousel/create-carousel.svelte.ts
@@ -1,8 +1,8 @@
+import {createUniqueId} from '$lib/create-unique-id.js';
 import {getEnvironmentContext} from '$lib/environment-provider/enviroment-provider-context.svelte.js';
 import {getLocaleContext} from '$lib/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 interface CreateCarouselProps
   extends Omit<carousel.Context, 'id' | 'dir' | 'getRootNode'> {
@@ -17,13 +17,13 @@ export function createCarousel(
   const locale = getLocaleContext();
   const environment = getEnvironmentContext();
 
-  const id = uid();
+  const id = createUniqueId();
 
   const context: carousel.Context = reflect(() => ({
-    ...props,
-    id: props.id ?? id,
+    id,
     dir: locale?.dir,
     getRootNode: environment?.getRootNode,
+    ...props,
   }));
 
   const [state, send] = useMachine(carousel.machine(context), {context});
diff --git a/packages/core/src/lib/checkbox/create-checkbox.svelte.ts b/packages/core/src/lib/checkbox/create-checkbox.svelte.ts
index b0e7b49a..9dea14c9 100644
--- a/packages/core/src/lib/checkbox/create-checkbox.svelte.ts
+++ b/packages/core/src/lib/checkbox/create-checkbox.svelte.ts
@@ -1,9 +1,9 @@
+import {createUniqueId} from '$lib/create-unique-id.js';
 import {getEnvironmentContext} from '$lib/environment-provider/enviroment-provider-context.svelte.js';
 import {getFieldContext} from '$lib/field/field-context.svelte.js';
 import {getLocaleContext} from '$lib/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 interface CreateCheckboxProps
   extends Omit<checkbox.Context, 'id' | 'dir' | 'getRootNode'> {
@@ -19,9 +19,11 @@ export function createCheckbox(
   const locale = getLocaleContext();
   const environment = getEnvironmentContext();
 
-  const id = uid();
+  const id = createUniqueId();
 
   const context: checkbox.Context = reflect(() => ({
+    id,
+    dir: locale?.dir,
     ids: {
       label: field?.ids.label,
       hiddenInput: field?.ids.control,
@@ -30,10 +32,8 @@ export function createCheckbox(
     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});
diff --git a/packages/core/src/lib/clipboard/create-clipboard.svelte.ts b/packages/core/src/lib/clipboard/create-clipboard.svelte.ts
index 66ff98c0..03f44cc2 100644
--- a/packages/core/src/lib/clipboard/create-clipboard.svelte.ts
+++ b/packages/core/src/lib/clipboard/create-clipboard.svelte.ts
@@ -1,7 +1,7 @@
+import {createUniqueId} from '$lib/create-unique-id.js';
 import {getEnvironmentContext} from '$lib/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 interface CreateClipboardProps
   extends Omit<clipboard.Context, 'id' | 'getRootNode'> {
@@ -15,12 +15,12 @@ export function createClipboard(
 ): CreateClipboardReturn {
   const environment = getEnvironmentContext();
 
-  const id = uid();
+  const id = createUniqueId();
 
   const context: clipboard.Context = reflect(() => ({
-    ...props,
-    id: props.id ?? id,
+    id,
     getRootNode: environment?.getRootNode,
+    ...props,
   }));
 
   const [state, send] = useMachine(clipboard.machine(context), {context});
diff --git a/packages/core/src/lib/collapsible/create-collapsible.svelte.ts b/packages/core/src/lib/collapsible/create-collapsible.svelte.ts
index fb8036d7..a568b2d2 100644
--- a/packages/core/src/lib/collapsible/create-collapsible.svelte.ts
+++ b/packages/core/src/lib/collapsible/create-collapsible.svelte.ts
@@ -1,8 +1,8 @@
+import {createUniqueId} from '$lib/create-unique-id.js';
 import {getEnvironmentContext} from '$lib/environment-provider/enviroment-provider-context.svelte.js';
 import {getLocaleContext} from '$lib/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 interface CreateCollapsibleProps
   extends Omit<
@@ -21,14 +21,14 @@ export function createCollapsible(
   const locale = getLocaleContext();
   const environment = getEnvironmentContext();
 
-  const id = uid();
+  const id = createUniqueId();
 
   const context: collapsible.Context = reflect(() => ({
     id,
     dir: locale?.dir,
-    ...props,
     getRootNode: environment?.getRootNode,
     'open.controlled': props.openControlled,
+    ...props,
   }));
 
   const [state, send] = useMachine(collapsible.machine(context), {context});
diff --git a/packages/core/src/lib/color-picker/create-color-picker.svelte.ts b/packages/core/src/lib/color-picker/create-color-picker.svelte.ts
index da6cc59e..16fd5cbc 100644
--- a/packages/core/src/lib/color-picker/create-color-picker.svelte.ts
+++ b/packages/core/src/lib/color-picker/create-color-picker.svelte.ts
@@ -1,9 +1,9 @@
+import {createUniqueId} from '$lib/create-unique-id.js';
 import {getEnvironmentContext} from '$lib/environment-provider/enviroment-provider-context.svelte.js';
 import {getLocaleContext} from '$lib/locale-provider/local-provider-context.svelte.js';
 import type {GenericObject} from '$lib/types.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';
 
 type Omitted = 'id' | 'dir' | 'value' | 'getRootNode' | 'open.controlled';
@@ -26,7 +26,7 @@ export function createColorPicker(
   const locale = getLocaleContext();
   const environment = getEnvironmentContext();
 
-  const id = uid();
+  const id = createUniqueId();
 
   const context: colorPicker.Context = $derived.by(() => ({
     id,
diff --git a/packages/core/src/lib/combobox/combobox-item-group.svelte b/packages/core/src/lib/combobox/combobox-item-group.svelte
index 74a90499..32a02492 100644
--- a/packages/core/src/lib/combobox/combobox-item-group.svelte
+++ b/packages/core/src/lib/combobox/combobox-item-group.svelte
@@ -6,8 +6,8 @@
 </script>
 
 <script lang="ts">
+  import {createUniqueId} from '$lib/create-unique-id.js';
   import {mergeProps} from '$lib/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_,
diff --git a/packages/core/src/lib/combobox/create-combobox.svelte.ts b/packages/core/src/lib/combobox/create-combobox.svelte.ts
index dc3641e4..7ed38bb6 100644
--- a/packages/core/src/lib/combobox/create-combobox.svelte.ts
+++ b/packages/core/src/lib/combobox/create-combobox.svelte.ts
@@ -1,10 +1,10 @@
+import {createUniqueId} from '$lib/create-unique-id.js';
 import {getEnvironmentContext} from '$lib/environment-provider/enviroment-provider-context.svelte.js';
 import {getFieldContext} from '$lib/field/field-context.svelte.js';
 import {getLocaleContext} from '$lib/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';
 
 type Omitted = 'id' | 'dir' | 'collection' | 'getRootNode' | 'open.controlled';
 
@@ -35,7 +35,7 @@ export function createCombobox<T>(
   const locale = getLocaleContext();
   const environment = getEnvironmentContext();
 
-  const id = uid();
+  const id = createUniqueId();
 
   const context: combobox.Context = reflect(() => ({
     id,
diff --git a/packages/core/src/lib/create-unique-id.ts b/packages/core/src/lib/create-unique-id.ts
new file mode 100644
index 00000000..dbf442f1
--- /dev/null
+++ b/packages/core/src/lib/create-unique-id.ts
@@ -0,0 +1,3 @@
+import {uid} from 'uid';
+
+export const createUniqueId = () => uid();
diff --git a/packages/core/src/lib/date-picker/create-date-picker.svelte.ts b/packages/core/src/lib/date-picker/create-date-picker.svelte.ts
index 6605a5f4..2c02e84f 100644
--- a/packages/core/src/lib/date-picker/create-date-picker.svelte.ts
+++ b/packages/core/src/lib/date-picker/create-date-picker.svelte.ts
@@ -1,9 +1,10 @@
+import {createUniqueId} from '$lib/create-unique-id.js';
 import {getEnvironmentContext} from '$lib/environment-provider/enviroment-provider-context.svelte.js';
 import {getLocaleContext} from '$lib/locale-provider/local-provider-context.svelte.js';
 import type {GenericObject} from '$lib/types.js';
 import * as datePicker from '@zag-js/date-picker';
 import {normalizeProps, reflect, useMachine} from '@zag-js/svelte';
-import {uid} from 'uid';
+import type {HTMLAttributes} from 'svelte/elements';
 import {parts} from './date-picker-anatomy.js';
 
 type Omitted =
@@ -27,7 +28,7 @@ export interface CreateDatePickerProps
 }
 
 export interface CreateDatePickerReturn extends datePicker.Api {
-  getViewProps(props: datePicker.ViewProps): GenericObject;
+  getViewProps(props: datePicker.ViewProps): HTMLAttributes<HTMLElement>;
 }
 
 export function createDatePicker(
@@ -36,7 +37,7 @@ export function createDatePicker(
   const locale = getLocaleContext();
   const environment = getEnvironmentContext();
 
-  const id = uid();
+  const id = createUniqueId();
 
   /* FIXME: use reflect */
   const context: datePicker.Context = $derived.by(() => ({
diff --git a/packages/core/src/lib/dialog/create-dialog.svelte.ts b/packages/core/src/lib/dialog/create-dialog.svelte.ts
index 1043dbb1..b3a9c7d7 100644
--- a/packages/core/src/lib/dialog/create-dialog.svelte.ts
+++ b/packages/core/src/lib/dialog/create-dialog.svelte.ts
@@ -1,8 +1,8 @@
+import {createUniqueId} from '$lib/create-unique-id.js';
 import {getEnvironmentContext} from '$lib/environment-provider/enviroment-provider-context.svelte.js';
 import {getLocaleContext} from '$lib/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 interface CreateDialogProps
   extends Omit<
@@ -19,15 +19,15 @@ export function createDialog(props: CreateDialogProps): CreateDialogReturn {
   const locale = getLocaleContext();
   const environment = getEnvironmentContext();
 
-  const id = uid();
+  const id = createUniqueId();
 
   const context: dialog.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});
diff --git a/packages/core/src/lib/drawer/create-drawer.svelte.ts b/packages/core/src/lib/drawer/create-drawer.svelte.ts
index a025a286..7c6911f3 100644
--- a/packages/core/src/lib/drawer/create-drawer.svelte.ts
+++ b/packages/core/src/lib/drawer/create-drawer.svelte.ts
@@ -1,10 +1,10 @@
+import {createUniqueId} from '$lib/create-unique-id.js';
 import {getEnvironmentContext} from '$lib/environment-provider/enviroment-provider-context.svelte.js';
 import {getLocaleContext} from '$lib/locale-provider/local-provider-context.svelte.js';
 import {mergeProps} from '$lib/merge-props.js';
 import * as dialog from '@zag-js/dialog';
 import {normalizeProps, reflect, useMachine} from '@zag-js/svelte';
 import type {HTMLAttributes} from 'svelte/elements';
-import {uid} from 'uid';
 import {parts} from './drawer-anatomy.js';
 
 export interface CreateDrawerProps
@@ -26,15 +26,15 @@ export function createDrawer(props: CreateDrawerProps): CreateDrawerReturn {
   const locale = getLocaleContext();
   const environment = getEnvironmentContext();
 
-  const id = uid();
+  const id = createUniqueId();
 
   const context: dialog.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});
diff --git a/packages/core/src/lib/editable/create-editable.svelte.ts b/packages/core/src/lib/editable/create-editable.svelte.ts
index 4a809a65..3cc10551 100644
--- a/packages/core/src/lib/editable/create-editable.svelte.ts
+++ b/packages/core/src/lib/editable/create-editable.svelte.ts
@@ -1,9 +1,9 @@
+import {createUniqueId} from '$lib/create-unique-id.js';
 import {getEnvironmentContext} from '$lib/environment-provider/enviroment-provider-context.svelte.js';
 import {getFieldContext} from '$lib/field/field-context.svelte.js';
 import {getLocaleContext} from '$lib/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 interface CreateEditableProps
   extends Omit<
@@ -23,7 +23,7 @@ export function createEditable(
   const locale = getLocaleContext();
   const environment = getEnvironmentContext();
 
-  const id = uid();
+  const id = createUniqueId();
 
   const context: editable.Context = reflect(() => ({
     id,
@@ -36,9 +36,9 @@ export function createEditable(
     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});
diff --git a/packages/core/src/lib/field/create-field.svelte.ts b/packages/core/src/lib/field/create-field.svelte.ts
index 8c637042..a1ae31f9 100644
--- a/packages/core/src/lib/field/create-field.svelte.ts
+++ b/packages/core/src/lib/field/create-field.svelte.ts
@@ -1,3 +1,4 @@
+import {createUniqueId} from '$lib/create-unique-id.js';
 import {getEnvironmentContext} from '$lib/environment-provider/enviroment-provider-context.svelte.js';
 import {ariaAttr, dataAttr, getDocument, getWindow} from '@zag-js/dom-query';
 import {reflect} from '@zag-js/svelte';
@@ -8,7 +9,6 @@ import type {
   HTMLSelectAttributes,
   HTMLTextareaAttributes,
 } from 'svelte/elements';
-import {uid} from 'uid';
 import {parts} from './field-anatomy.js';
 
 interface ElementIds {
@@ -48,7 +48,7 @@ export interface CreateFieldReturn {
 export function createField(props: CreateFieldProps): CreateFieldReturn {
   const environment = getEnvironmentContext();
 
-  const id_ = uid();
+  const id_ = createUniqueId();
 
   const {
     /**/
diff --git a/packages/core/src/lib/file-upload/create-file-upload.svelte.ts b/packages/core/src/lib/file-upload/create-file-upload.svelte.ts
index 2e53fd6e..590ad97f 100644
--- a/packages/core/src/lib/file-upload/create-file-upload.svelte.ts
+++ b/packages/core/src/lib/file-upload/create-file-upload.svelte.ts
@@ -1,9 +1,9 @@
+import {createUniqueId} from '$lib/create-unique-id.js';
 import {getEnvironmentContext} from '$lib/environment-provider/enviroment-provider-context.svelte.js';
 import {getFieldContext} from '$lib/field/field-context.svelte.js';
 import {getLocaleContext} from '$lib/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 interface CreateFileUploadProps
   extends Omit<fileUpload.Context, 'id' | 'dir' | 'getRootNode'> {
@@ -19,21 +19,21 @@ export function createFileUpload(
   const locale = getLocaleContext();
   const environment = getEnvironmentContext();
 
-  const id = uid();
+  const id = createUniqueId();
 
   const context: fileUpload.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});
diff --git a/packages/core/src/lib/floating-panel/create-floating-panel.svelte.ts b/packages/core/src/lib/floating-panel/create-floating-panel.svelte.ts
index 7176459f..7800b635 100644
--- a/packages/core/src/lib/floating-panel/create-floating-panel.svelte.ts
+++ b/packages/core/src/lib/floating-panel/create-floating-panel.svelte.ts
@@ -1,8 +1,8 @@
+import {createUniqueId} from '$lib/create-unique-id.js';
 import {getEnvironmentContext} from '$lib/environment-provider/enviroment-provider-context.svelte.js';
 import {getLocaleContext} from '$lib/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 interface CreateFloatingPanelProps
   extends Omit<floatingPanel.Context, 'id' | 'dir' | 'getRootNode'> {
@@ -17,13 +17,13 @@ export function createFloatingPanel(
   const locale = getLocaleContext();
   const environment = getEnvironmentContext();
 
-  const id = uid();
+  const id = createUniqueId();
 
   const context: floatingPanel.Context = reflect(() => ({
-    ...props,
-    id: props.id ?? id,
+    id,
     dir: locale?.dir,
     getRootNode: environment?.getRootNode,
+    ...props,
   }));
 
   const [state, send] = useMachine(floatingPanel.machine(context), {context});
diff --git a/packages/core/src/lib/hover-card/create-hover-card.svelte.ts b/packages/core/src/lib/hover-card/create-hover-card.svelte.ts
index 8f89d814..379bd748 100644
--- a/packages/core/src/lib/hover-card/create-hover-card.svelte.ts
+++ b/packages/core/src/lib/hover-card/create-hover-card.svelte.ts
@@ -1,8 +1,8 @@
+import {createUniqueId} from '$lib/create-unique-id.js';
 import {getEnvironmentContext} from '$lib/environment-provider/enviroment-provider-context.svelte.js';
 import {getLocaleContext} from '$lib/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 interface CreateHoverCardProps
   extends Omit<
@@ -21,14 +21,14 @@ export function createHoverCard(
   const locale = getLocaleContext();
   const environment = getEnvironmentContext();
 
-  const id = uid();
+  const id = createUniqueId();
 
   const context: hoverCard.Context = reflect(() => ({
     id,
     dir: locale?.dir,
-    ...props,
     getRootNode: environment?.getRootNode,
     'open.controlled': props.openControlled,
+    ...props,
   }));
 
   const [state, send] = useMachine(hoverCard.machine(context), {context});
diff --git a/packages/core/src/lib/index.ts b/packages/core/src/lib/index.ts
index 34ae8d39..8a47b375 100644
--- a/packages/core/src/lib/index.ts
+++ b/packages/core/src/lib/index.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,7 @@ 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';
diff --git a/packages/core/src/lib/menu/create-menu.svelte.ts b/packages/core/src/lib/menu/create-menu.svelte.ts
index b3493c4d..df723629 100644
--- a/packages/core/src/lib/menu/create-menu.svelte.ts
+++ b/packages/core/src/lib/menu/create-menu.svelte.ts
@@ -1,8 +1,8 @@
+import {createUniqueId} from '$lib/create-unique-id.js';
 import {getEnvironmentContext} from '$lib/environment-provider/enviroment-provider-context.svelte.js';
 import {getLocaleContext} from '$lib/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 interface CreateMenuProps
   extends Omit<menu.Context, 'id' | 'dir' | 'getRootNode' | 'open.controlled'> {
@@ -18,14 +18,14 @@ export function createMenu(props: CreateMenuProps): CreateMenuReturn {
   const locale = getLocaleContext();
   const environment = getEnvironmentContext();
 
-  const id = uid();
+  const id = createUniqueId();
 
   const context: menu.Context = reflect(() => ({
     id,
     dir: locale?.dir,
-    ...props,
     getRootNode: environment?.getRootNode,
     'open.controlled': props.openControlled,
+    ...props,
   }));
 
   const [state, send, machine] = useMachine(menu.machine(context), {context});
diff --git a/packages/core/src/lib/menu/menu-item-group.svelte b/packages/core/src/lib/menu/menu-item-group.svelte
index ec25a2c0..69697877 100644
--- a/packages/core/src/lib/menu/menu-item-group.svelte
+++ b/packages/core/src/lib/menu/menu-item-group.svelte
@@ -6,8 +6,8 @@
 </script>
 
 <script lang="ts">
+  import {createUniqueId} from '$lib/create-unique-id.js';
   import {mergeProps} from '$lib/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_,
diff --git a/packages/core/src/lib/number-input/create-number-input.svelte.ts b/packages/core/src/lib/number-input/create-number-input.svelte.ts
index 51bb41bc..c3b7a3b2 100644
--- a/packages/core/src/lib/number-input/create-number-input.svelte.ts
+++ b/packages/core/src/lib/number-input/create-number-input.svelte.ts
@@ -1,9 +1,9 @@
+import {createUniqueId} from '$lib/create-unique-id.js';
 import {getEnvironmentContext} from '$lib/environment-provider/enviroment-provider-context.svelte.js';
 import {getFieldContext} from '$lib/field/field-context.svelte.js';
 import {getLocaleContext} from '$lib/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 interface CreateNumberInputProps
   extends Omit<numberInput.Context, 'id' | 'dir' | 'getRootNode'> {
@@ -19,22 +19,22 @@ export function createNumberInput(
   const locale = getLocaleContext();
   const environment = getEnvironmentContext();
 
-  const id = uid();
+  const id = createUniqueId();
 
   const context: numberInput.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});
diff --git a/packages/core/src/lib/pagination/create-pagination.svelte.ts b/packages/core/src/lib/pagination/create-pagination.svelte.ts
index b24ae8ad..b655f2e6 100644
--- a/packages/core/src/lib/pagination/create-pagination.svelte.ts
+++ b/packages/core/src/lib/pagination/create-pagination.svelte.ts
@@ -1,8 +1,8 @@
+import {createUniqueId} from '$lib/create-unique-id.js';
 import {getEnvironmentContext} from '$lib/environment-provider/enviroment-provider-context.svelte.js';
 import {getLocaleContext} from '$lib/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 interface CreatePaginationProps
   extends Omit<pagination.Context, 'id' | 'dir' | 'getRootNode'> {
@@ -17,13 +17,13 @@ export function createPagination(
   const locale = getLocaleContext();
   const environment = getEnvironmentContext();
 
-  const id = uid();
+  const id = createUniqueId();
 
   const context: pagination.Context = reflect(() => ({
-    ...props,
-    id: props.id ?? id,
+    id,
     dir: locale?.dir,
     getRootNode: environment?.getRootNode,
+    ...props,
   }));
 
   const [state, send] = useMachine(pagination.machine(context), {context});
diff --git a/packages/core/src/lib/pin-input/create-pin-input.svelte.ts b/packages/core/src/lib/pin-input/create-pin-input.svelte.ts
index 149c47ea..624e58ce 100644
--- a/packages/core/src/lib/pin-input/create-pin-input.svelte.ts
+++ b/packages/core/src/lib/pin-input/create-pin-input.svelte.ts
@@ -1,3 +1,4 @@
+import {createUniqueId} from '$lib/create-unique-id.js';
 import {getEnvironmentContext} from '$lib/environment-provider/enviroment-provider-context.svelte.js';
 import {getFieldContext} from '$lib/field/field-context.svelte.js';
 import {getLocaleContext} from '$lib/locale-provider/local-provider-context.svelte.js';
@@ -5,7 +6,6 @@ import type {HtmlProps} from '$lib/types.js';
 import * as pinInput from '@zag-js/pin-input';
 import {normalizeProps, reflect, useMachine} from '@zag-js/svelte';
 import type {HTMLButtonAttributes} from 'svelte/elements';
-import {uid} from 'uid';
 
 export interface CreatePinInputProps
   extends Omit<pinInput.Context, 'id' | 'dir' | 'getRootNode'> {
@@ -23,9 +23,11 @@ export function createPinInputContext(
   const locale = getLocaleContext();
   const environment = getEnvironmentContext();
 
-  const id = uid();
+  const id = createUniqueId();
 
   const context: pinInput.Context = reflect(() => ({
+    id,
+    dir: locale?.dir,
     ids: {
       label: field?.ids.label,
       hiddenInput: field?.ids.control,
@@ -34,10 +36,8 @@ export function createPinInputContext(
     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});
diff --git a/packages/core/src/lib/popover/create-popover.svelte.ts b/packages/core/src/lib/popover/create-popover.svelte.ts
index ff46be7f..7f4a9c72 100644
--- a/packages/core/src/lib/popover/create-popover.svelte.ts
+++ b/packages/core/src/lib/popover/create-popover.svelte.ts
@@ -1,8 +1,8 @@
+import {createUniqueId} from '$lib/create-unique-id.js';
 import {getEnvironmentContext} from '$lib/environment-provider/enviroment-provider-context.svelte.js';
 import {getLocaleContext} from '$lib/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 interface CreatePopoverProps
   extends Omit<
@@ -19,14 +19,14 @@ export function createPopover(props: CreatePopoverProps): CreatePopoverReturn {
   const locale = getLocaleContext();
   const environment = getEnvironmentContext();
 
-  const id = uid();
+  const id = createUniqueId();
 
   const context: popover.Context = reflect(() => ({
     id,
     dir: locale?.dir,
-    ...props,
     getRootNode: environment?.getRootNode,
     'open.controlled': props.openControlled,
+    ...props,
   }));
 
   const [state, send] = useMachine(popover.machine(context), {context});
diff --git a/packages/core/src/lib/progress/create-progress.svelte.ts b/packages/core/src/lib/progress/create-progress.svelte.ts
index e12098d5..2411fb13 100644
--- a/packages/core/src/lib/progress/create-progress.svelte.ts
+++ b/packages/core/src/lib/progress/create-progress.svelte.ts
@@ -1,8 +1,8 @@
+import {createUniqueId} from '$lib/create-unique-id.js';
 import {getEnvironmentContext} from '$lib/environment-provider/enviroment-provider-context.svelte.js';
 import {getLocaleContext} from '$lib/locale-provider/local-provider-context.svelte.js';
 import * as progress from '@zag-js/progress';
 import {normalizeProps, reflect, useMachine} from '@zag-js/svelte';
-import {uid} from 'uid';
 
 export interface CreateProgressProps
   extends Omit<progress.Context, 'id' | 'dir' | 'getRootNode'> {
@@ -17,13 +17,13 @@ export function createProgress(
   const locale = getLocaleContext();
   const environment = getEnvironmentContext();
 
-  const id = uid();
+  const id = createUniqueId();
 
   const context: progress.Context = reflect(() => ({
-    ...props,
-    id: props.id ?? id,
+    id,
     dir: locale?.dir,
     getRootNode: environment?.getRootNode,
+    ...props,
   }));
 
   const [state, send] = useMachine(progress.machine(context), {context});
diff --git a/packages/core/src/lib/qr-code/create-qr-code.svelte.ts b/packages/core/src/lib/qr-code/create-qr-code.svelte.ts
index 1de9b456..3df51700 100644
--- a/packages/core/src/lib/qr-code/create-qr-code.svelte.ts
+++ b/packages/core/src/lib/qr-code/create-qr-code.svelte.ts
@@ -1,8 +1,8 @@
+import {createUniqueId} from '$lib/create-unique-id.js';
 import {getEnvironmentContext} from '$lib/environment-provider/enviroment-provider-context.svelte.js';
 import {getLocaleContext} from '$lib/locale-provider/local-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 interface CreateQrCodeProps
   extends Omit<qrCode.Context, 'id' | 'dir' | 'getRootNode'> {
@@ -15,13 +15,13 @@ export function createQRCode(props: CreateQrCodeProps): CreateQrCodeReturn {
   const locale = getLocaleContext();
   const environment = getEnvironmentContext();
 
-  const id = uid();
+  const id = createUniqueId();
 
   const context: qrCode.Context = reflect(() => ({
-    ...props,
-    id: props.id ?? id,
+    id,
     dir: locale?.dir,
     getRootNode: environment?.getRootNode,
+    ...props,
   }));
 
   const [state, send] = useMachine(qrCode.machine(context), {context});
diff --git a/packages/core/src/lib/radio-group/create-radio-group.svelte.ts b/packages/core/src/lib/radio-group/create-radio-group.svelte.ts
index ce6f9019..ce2e76e7 100644
--- a/packages/core/src/lib/radio-group/create-radio-group.svelte.ts
+++ b/packages/core/src/lib/radio-group/create-radio-group.svelte.ts
@@ -1,8 +1,8 @@
+import {createUniqueId} from '$lib/create-unique-id.js';
 import {getEnvironmentContext} from '$lib/environment-provider/enviroment-provider-context.svelte.js';
 import {getLocaleContext} from '$lib/locale-provider/local-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 interface CreateRadioGroupProps
   extends Omit<radioGroup.Context, 'id' | 'dir' | 'getRootNode'> {
@@ -17,13 +17,13 @@ export function createRadioGroup(
   const locale = getLocaleContext();
   const environment = getEnvironmentContext();
 
-  const id = uid();
+  const id = createUniqueId();
 
   const context: radioGroup.Context = reflect(() => ({
-    ...props,
-    id: props.id ?? id,
+    id,
     dir: locale?.dir,
     getRootNode: environment?.getRootNode,
+    ...props,
   }));
 
   const [state, send] = useMachine(radioGroup.machine(context), {context});
diff --git a/packages/core/src/lib/rating-group/create-rating-group.svelte.ts b/packages/core/src/lib/rating-group/create-rating-group.svelte.ts
index 7f2775c4..021bcd8a 100644
--- a/packages/core/src/lib/rating-group/create-rating-group.svelte.ts
+++ b/packages/core/src/lib/rating-group/create-rating-group.svelte.ts
@@ -1,9 +1,9 @@
+import {createUniqueId} from '$lib/create-unique-id.js';
 import {getEnvironmentContext} from '$lib/environment-provider/enviroment-provider-context.svelte.js';
 import {getFieldContext} from '$lib/field/field-context.svelte.js';
 import {getLocaleContext} from '$lib/locale-provider/local-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 interface CreateRatingGroupProps
   extends Omit<ratingGroup.Context, 'id' | 'dir' | 'getRootNode'> {
@@ -19,9 +19,11 @@ export function createRatingGroup(
   const locale = getLocaleContext();
   const environment = getEnvironmentContext();
 
-  const id = uid();
+  const id = createUniqueId();
 
   const context: ratingGroup.Context = reflect(() => ({
+    id,
+    dir: locale?.dir,
     ids: {
       label: field?.ids.label,
       hiddenInput: field?.ids.control,
@@ -29,10 +31,8 @@ export function createRatingGroup(
     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(ratingGroup.machine(context), {context});
diff --git a/packages/core/src/lib/segment-group/create-segment-group.svelte.ts b/packages/core/src/lib/segment-group/create-segment-group.svelte.ts
index 419e37c5..0a0a9acd 100644
--- a/packages/core/src/lib/segment-group/create-segment-group.svelte.ts
+++ b/packages/core/src/lib/segment-group/create-segment-group.svelte.ts
@@ -1,8 +1,8 @@
+import {createUniqueId} from '$lib/create-unique-id.js';
 import {getEnvironmentContext} from '$lib/environment-provider/enviroment-provider-context.svelte.js';
 import {getLocaleContext} from '$lib/locale-provider/local-provider-context.svelte.js';
 import * as segmentGroup from '@zag-js/radio-group';
 import {normalizeProps, reflect, useMachine} from '@zag-js/svelte';
-import {uid} from 'uid';
 
 export interface CreateSegmentGroupProps
   extends Omit<segmentGroup.Context, 'id' | 'dir' | 'getRootNode'> {
@@ -17,13 +17,13 @@ export function createSegmentGroup(
   const locale = getLocaleContext();
   const environment = getEnvironmentContext();
 
-  const id = uid();
+  const id = createUniqueId();
 
   const context: segmentGroup.Context = reflect(() => ({
-    ...props,
-    id: props.id ?? id,
+    id,
     dir: locale?.dir,
     getRootNode: environment?.getRootNode,
+    ...props,
   }));
 
   const [state, send] = useMachine(segmentGroup.machine(context));
diff --git a/packages/core/src/lib/select/create-select.svelte.ts b/packages/core/src/lib/select/create-select.svelte.ts
index 6114f55d..06f3f536 100644
--- a/packages/core/src/lib/select/create-select.svelte.ts
+++ b/packages/core/src/lib/select/create-select.svelte.ts
@@ -1,10 +1,10 @@
+import {createUniqueId} from '$lib/create-unique-id.js';
 import {getEnvironmentContext} from '$lib/environment-provider/enviroment-provider-context.svelte.js';
 import {getFieldContext} from '$lib/field/field-context.svelte.js';
 import {getLocaleContext} from '$lib/locale-provider/local-provider-context.svelte.js';
 import * as select from '@zag-js/select';
 import {normalizeProps, reflect, useMachine} from '@zag-js/svelte';
 import {createSplitProps} from '@zag-js/utils';
-import {uid} from 'uid';
 
 type Omitted = 'id' | 'dir' | 'getRootNode' | 'collection' | 'open.controlled';
 
@@ -35,7 +35,7 @@ export function createSelect<T>(
   const locale = getLocaleContext();
   const environment = getEnvironmentContext();
 
-  const id = uid();
+  const id = createUniqueId();
 
   const context: select.Context = reflect(() => ({
     id,
diff --git a/packages/core/src/lib/select/select-item-group.svelte b/packages/core/src/lib/select/select-item-group.svelte
index fdcb3c8e..3ee54e21 100644
--- a/packages/core/src/lib/select/select-item-group.svelte
+++ b/packages/core/src/lib/select/select-item-group.svelte
@@ -6,8 +6,8 @@
 </script>
 
 <script lang="ts">
+  import {createUniqueId} from '$lib/create-unique-id.js';
   import {mergeProps} from '$lib/merge-props.js';
-  import {uid} from 'uid';
   import {
     getSelectContext,
     setSelectItemGroupPropsContext,
@@ -23,7 +23,7 @@
 
   let select = getSelectContext();
 
-  let id_ = uid();
+  let id_ = createUniqueId();
 
   let itemGroupProps = $derived({
     id: id ?? id_,
diff --git a/packages/core/src/lib/signature-pad/create-signature-pad.svelte.ts b/packages/core/src/lib/signature-pad/create-signature-pad.svelte.ts
index 9a649910..6da58461 100644
--- a/packages/core/src/lib/signature-pad/create-signature-pad.svelte.ts
+++ b/packages/core/src/lib/signature-pad/create-signature-pad.svelte.ts
@@ -1,8 +1,8 @@
+import {createUniqueId} from '$lib/create-unique-id.js';
 import {getEnvironmentContext} from '$lib/environment-provider/enviroment-provider-context.svelte.js';
 import {getLocaleContext} from '$lib/locale-provider/local-provider-context.svelte.js';
 import * as signaturePad from '@zag-js/signature-pad';
 import {normalizeProps, reflect, useMachine} from '@zag-js/svelte';
-import {uid} from 'uid';
 
 export interface CreateSignaturePadProps
   extends Omit<signaturePad.Context, 'id' | 'dir' | 'getRootNode'> {
@@ -17,13 +17,13 @@ export function createSignaturePad(
   const locale = getLocaleContext();
   const environment = getEnvironmentContext();
 
-  const id = uid();
+  const id = createUniqueId();
 
   const context: signaturePad.Context = reflect(() => ({
-    ...props,
-    id: props.id ?? id,
+    id,
     dir: locale?.dir,
     getRootNode: environment?.getRootNode,
+    ...props,
   }));
 
   const [state, send] = useMachine(signaturePad.machine(context), {context});
diff --git a/packages/core/src/lib/slider/create-slider.svelte.ts b/packages/core/src/lib/slider/create-slider.svelte.ts
index 3e4820a1..1ca66148 100644
--- a/packages/core/src/lib/slider/create-slider.svelte.ts
+++ b/packages/core/src/lib/slider/create-slider.svelte.ts
@@ -1,8 +1,8 @@
+import {createUniqueId} from '$lib/create-unique-id.js';
 import {getEnvironmentContext} from '$lib/environment-provider/enviroment-provider-context.svelte.js';
 import {getLocaleContext} from '$lib/locale-provider/local-provider-context.svelte.js';
 import * as slider from '@zag-js/slider';
 import {normalizeProps, reflect, useMachine} from '@zag-js/svelte';
-import {uid} from 'uid';
 
 export interface CreateSliderProps
   extends Omit<slider.Context, 'id' | 'dir' | 'getRootNode'> {
@@ -15,13 +15,13 @@ export function createSlider(props: CreateSliderProps): CreateSliderReturn {
   const locale = getLocaleContext();
   const environment = getEnvironmentContext();
 
-  const id = uid();
+  const id = createUniqueId();
 
   const context: slider.Context = reflect(() => ({
-    ...props,
-    id: props.id ?? id,
+    id,
     dir: locale?.dir,
     getRootNode: environment?.getRootNode,
+    ...props,
   }));
 
   const [state, send] = useMachine(slider.machine(context), {context});
diff --git a/packages/core/src/lib/splitter/create-splitter.svelte.ts b/packages/core/src/lib/splitter/create-splitter.svelte.ts
index 47e3634d..5d4ff711 100644
--- a/packages/core/src/lib/splitter/create-splitter.svelte.ts
+++ b/packages/core/src/lib/splitter/create-splitter.svelte.ts
@@ -1,8 +1,8 @@
+import {createUniqueId} from '$lib/create-unique-id.js';
 import {getEnvironmentContext} from '$lib/environment-provider/enviroment-provider-context.svelte.js';
 import {getLocaleContext} from '$lib/locale-provider/local-provider-context.svelte.js';
 import * as splitter from '@zag-js/splitter';
 import {normalizeProps, reflect, useMachine} from '@zag-js/svelte';
-import {uid} from 'uid';
 
 export interface CreateSplitterProps
   extends Omit<splitter.Context, 'id' | 'dir' | 'getRootNode'> {
@@ -17,11 +17,13 @@ export function createSplitter(
   const locale = getLocaleContext();
   const environment = getEnvironmentContext();
 
+  const id = createUniqueId();
+
   const context: splitter.Context = reflect(() => ({
-    ...props,
-    id: props.id ?? uid(),
+    id,
     dir: locale?.dir,
     getRootNode: environment?.getRootNode,
+    ...props,
   }));
 
   const [state, send] = useMachine(splitter.machine(context), {context});
diff --git a/packages/core/src/lib/steps/create-steps.svelte.ts b/packages/core/src/lib/steps/create-steps.svelte.ts
index 055bd58e..471d3daa 100644
--- a/packages/core/src/lib/steps/create-steps.svelte.ts
+++ b/packages/core/src/lib/steps/create-steps.svelte.ts
@@ -1,8 +1,8 @@
+import {createUniqueId} from '$lib/create-unique-id.js';
 import {getEnvironmentContext} from '$lib/environment-provider/enviroment-provider-context.svelte.js';
 import {getLocaleContext} from '$lib/locale-provider/local-provider-context.svelte.js';
 import * as steps from '@zag-js/steps';
 import {normalizeProps, reflect, useMachine} from '@zag-js/svelte';
-import {uid} from 'uid';
 
 export interface CreateStepsProps
   extends Omit<steps.Context, 'id' | 'dir' | 'getRootNode'> {
@@ -15,13 +15,13 @@ export function createSteps(props: CreateStepsProps): CreateStepsReturn {
   const locale = getLocaleContext();
   const environment = getEnvironmentContext();
 
-  const id = uid();
+  const id = createUniqueId();
 
   const context: steps.Context = reflect(() => ({
-    ...props,
-    id: props.id ?? id,
+    id,
     dir: locale?.dir,
     getRootNode: environment?.getRootNode,
+    ...props,
   }));
 
   const [state, send] = useMachine(steps.machine(context), {context});
diff --git a/packages/core/src/lib/switch/create-switch.svelte.ts b/packages/core/src/lib/switch/create-switch.svelte.ts
index e0e698c6..895d8b4a 100644
--- a/packages/core/src/lib/switch/create-switch.svelte.ts
+++ b/packages/core/src/lib/switch/create-switch.svelte.ts
@@ -1,9 +1,9 @@
+import {createUniqueId} from '$lib/create-unique-id.js';
 import {getEnvironmentContext} from '$lib/environment-provider/enviroment-provider-context.svelte.js';
 import {getFieldContext} from '$lib/field/field-context.svelte.js';
 import {getLocaleContext} from '$lib/locale-provider/local-provider-context.svelte.js';
 import {normalizeProps, reflect, useMachine} from '@zag-js/svelte';
 import * as switch_ from '@zag-js/switch';
-import {uid} from 'uid';
 
 export interface CreateSwitchProps
   extends Omit<switch_.Context, 'id' | 'dir' | 'getRootNode'> {
@@ -17,9 +17,11 @@ export function createSwitch(props: CreateSwitchProps): CreateSwitchReturn {
   const locale = getLocaleContext();
   const environment = getEnvironmentContext();
 
-  const id = uid();
+  const id = createUniqueId();
 
   const context: switch_.Context = reflect(() => ({
+    id,
+    dir: locale?.dir,
     ids: {
       label: field?.ids.label,
       hiddenInput: field?.ids.control,
@@ -28,10 +30,8 @@ export function createSwitch(props: CreateSwitchProps): CreateSwitchReturn {
     readOnly: field?.readOnly,
     invalid: field?.invalid,
     required: field?.required,
-    ...props,
-    id: props.id ?? id,
-    dir: locale?.dir,
     getRootNode: environment?.getRootNode,
+    ...props,
   }));
 
   const [state, send] = useMachine(switch_.machine(context), {context});
diff --git a/packages/core/src/lib/tabs/create-tabs.svelte.ts b/packages/core/src/lib/tabs/create-tabs.svelte.ts
index 0fb90e00..c4c0bf9d 100644
--- a/packages/core/src/lib/tabs/create-tabs.svelte.ts
+++ b/packages/core/src/lib/tabs/create-tabs.svelte.ts
@@ -1,8 +1,8 @@
+import {createUniqueId} from '$lib/create-unique-id.js';
 import {getEnvironmentContext} from '$lib/environment-provider/enviroment-provider-context.svelte.js';
 import {getLocaleContext} from '$lib/locale-provider/local-provider-context.svelte.js';
 import {normalizeProps, reflect, useMachine} from '@zag-js/svelte';
 import * as tabs from '@zag-js/tabs';
-import {uid} from 'uid';
 
 export interface CreateTabsProps
   extends Omit<tabs.Context, 'id' | 'dir' | 'getRootNode'> {
@@ -15,13 +15,13 @@ export function createTabs(props: CreateTabsProps): CreateTabsReturn {
   const locale = getLocaleContext();
   const environment = getEnvironmentContext();
 
-  const id = uid();
+  const id = createUniqueId();
 
   const context: tabs.Context = reflect(() => ({
-    ...props,
-    id: props.id ?? id,
+    id,
     dir: locale?.dir,
     getRootNode: environment?.getRootNode,
+    ...props,
   }));
 
   const [state, send] = useMachine(tabs.machine(context), {context});
diff --git a/packages/core/src/lib/tags-input/create-tags-input.svelte.ts b/packages/core/src/lib/tags-input/create-tags-input.svelte.ts
index 286accbf..1ebf884a 100644
--- a/packages/core/src/lib/tags-input/create-tags-input.svelte.ts
+++ b/packages/core/src/lib/tags-input/create-tags-input.svelte.ts
@@ -1,9 +1,9 @@
+import {createUniqueId} from '$lib/create-unique-id.js';
 import {getEnvironmentContext} from '$lib/environment-provider/enviroment-provider-context.svelte.js';
 import {getFieldContext} from '$lib/field/field-context.svelte.js';
 import {getLocaleContext} from '$lib/locale-provider/local-provider-context.svelte.js';
 import {normalizeProps, reflect, useMachine} from '@zag-js/svelte';
 import * as tagsInput from '@zag-js/tags-input';
-import {uid} from 'uid';
 
 export interface CreateTagsInputProps
   extends Omit<tagsInput.Context, 'id' | 'dir' | 'getRootNode'> {
@@ -19,9 +19,11 @@ export function createTagsInput(
   const locale = getLocaleContext();
   const environment = getEnvironmentContext();
 
-  const id = uid();
+  const id = createUniqueId();
 
   const context: tagsInput.Context = reflect(() => ({
+    id,
+    dir: locale?.dir,
     ids: {
       label: field?.ids.label,
       hiddenInput: field?.ids.control,
@@ -30,10 +32,8 @@ export function createTagsInput(
     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(tagsInput.machine(context), {context});
diff --git a/packages/core/src/lib/time-picker/create-time-picker.svelte.ts b/packages/core/src/lib/time-picker/create-time-picker.svelte.ts
index d90b973a..13591e20 100644
--- a/packages/core/src/lib/time-picker/create-time-picker.svelte.ts
+++ b/packages/core/src/lib/time-picker/create-time-picker.svelte.ts
@@ -1,8 +1,8 @@
+import {createUniqueId} from '$lib/create-unique-id.js';
 import {getEnvironmentContext} from '$lib/environment-provider/enviroment-provider-context.svelte.js';
 import {getLocaleContext} from '$lib/locale-provider/local-provider-context.svelte.js';
 import {normalizeProps, reflect, useMachine} from '@zag-js/svelte';
 import * as timePicker from '@zag-js/time-picker';
-import {uid} from 'uid';
 
 export interface CreateTimePickerProps
   extends Omit<
@@ -21,15 +21,15 @@ export function createTimePicker(
   const locale = getLocaleContext();
   const environment = getEnvironmentContext();
 
-  const id = uid();
+  const id = createUniqueId();
 
   const context: timePicker.Context = reflect(() => ({
     id,
     dir: locale?.dir,
     locale: locale?.locale,
-    ...props,
     getRootNode: environment?.getRootNode,
     'open.controlled': props.openControlled,
+    ...props,
   }));
 
   const [state, send] = useMachine(timePicker.machine(context), {context});
diff --git a/packages/core/src/lib/timer/create-timer.svelte.ts b/packages/core/src/lib/timer/create-timer.svelte.ts
index 658e0793..60ece78f 100644
--- a/packages/core/src/lib/timer/create-timer.svelte.ts
+++ b/packages/core/src/lib/timer/create-timer.svelte.ts
@@ -1,7 +1,7 @@
+import {createUniqueId} from '$lib/create-unique-id.js';
 import {getEnvironmentContext} from '$lib/environment-provider/enviroment-provider-context.svelte.js';
 import {normalizeProps, reflect, useMachine} from '@zag-js/svelte';
 import * as timer from '@zag-js/timer';
-import {uid} from 'uid';
 
 export interface CreateTimerProps
   extends Omit<timer.Context, 'id' | 'getRootNode'> {
@@ -13,12 +13,12 @@ export interface CreateTimerReturn extends timer.Api {}
 export function createTimer(props: CreateTimerProps): CreateTimerReturn {
   const environment = getEnvironmentContext();
 
-  const id = uid();
+  const id = createUniqueId();
 
   const context: timer.Context = reflect(() => ({
-    ...props,
-    id: props.id ?? id,
+    id,
     getRootNode: environment?.getRootNode,
+    ...props,
   }));
 
   const [state, send] = useMachine(timer.machine(context), {context});
diff --git a/packages/core/src/lib/toast/create-toaster.svelte.ts b/packages/core/src/lib/toast/create-toaster.svelte.ts
index 753f5c72..7182f534 100644
--- a/packages/core/src/lib/toast/create-toaster.svelte.ts
+++ b/packages/core/src/lib/toast/create-toaster.svelte.ts
@@ -1,7 +1,7 @@
+import {createUniqueId} from '$lib/create-unique-id.js';
 import type {Machine, StateMachine} from '@zag-js/core';
 import {normalizeProps, reflect} from '@zag-js/svelte';
 import * as toast from '@zag-js/toast';
-import {uid} from 'uid';
 
 export interface CreateToasterProps {
   id?: string;
@@ -27,10 +27,8 @@ export interface CreateToasterReturn extends toast.GroupApi {
 }
 
 export function createToaster(props?: CreateToasterProps): CreateToasterReturn {
-  const id_ = uid();
-  const id = $derived(props?.id ?? id_);
-
-  const machine = $derived(toast.group.machine({...props, id}));
+  const id = createUniqueId();
+  const machine = $derived(toast.group.machine({id, ...props}));
 
   return reflect(() => ({
     machine,
diff --git a/packages/core/src/lib/toggle-group/create-toggle-group.svelte.ts b/packages/core/src/lib/toggle-group/create-toggle-group.svelte.ts
index ed2a3a8d..879f1e0d 100644
--- a/packages/core/src/lib/toggle-group/create-toggle-group.svelte.ts
+++ b/packages/core/src/lib/toggle-group/create-toggle-group.svelte.ts
@@ -1,8 +1,8 @@
+import {createUniqueId} from '$lib/create-unique-id.js';
 import {getEnvironmentContext} from '$lib/environment-provider/enviroment-provider-context.svelte.js';
 import {getLocaleContext} from '$lib/locale-provider/local-provider-context.svelte.js';
 import {normalizeProps, reflect, useMachine} from '@zag-js/svelte';
 import * as toggleGroup from '@zag-js/toggle-group';
-import {uid} from 'uid';
 
 export interface CreateToggleGroupProps
   extends Omit<toggleGroup.Context, 'id' | 'dir' | 'getRootNode'> {
@@ -17,13 +17,13 @@ export function createToggleGroup(
   const locale = getLocaleContext();
   const environment = getEnvironmentContext();
 
-  const id = uid();
+  const id = createUniqueId();
 
   const context: toggleGroup.Context = reflect(() => ({
-    ...props,
-    id: props.id ?? id,
+    id,
     dir: locale?.dir,
     getRootNode: environment?.getRootNode,
+    ...props,
   }));
 
   const [state, send] = useMachine(toggleGroup.machine(context), {context});
diff --git a/packages/core/src/lib/tooltip/create-tooltip.svelte.ts b/packages/core/src/lib/tooltip/create-tooltip.svelte.ts
index 1d6a8a74..d5d4a3db 100644
--- a/packages/core/src/lib/tooltip/create-tooltip.svelte.ts
+++ b/packages/core/src/lib/tooltip/create-tooltip.svelte.ts
@@ -1,8 +1,8 @@
+import {createUniqueId} from '$lib/create-unique-id.js';
 import {getEnvironmentContext} from '$lib/environment-provider/enviroment-provider-context.svelte.js';
 import {getLocaleContext} from '$lib/locale-provider/local-provider-context.svelte.js';
 import {normalizeProps, reflect, useMachine} from '@zag-js/svelte';
 import * as tooltip from '@zag-js/tooltip';
-import {uid} from 'uid';
 
 export interface CreateTooltipProps
   extends Omit<
@@ -19,14 +19,14 @@ export function createTooltip(props: CreateTooltipProps): CreateTooltipReturn {
   const locale = getLocaleContext();
   const environment = getEnvironmentContext();
 
-  const id = uid();
+  const id = createUniqueId();
 
   const context: tooltip.Context = reflect(() => ({
     id,
     dir: locale?.dir,
-    ...props,
     getRootNode: environment?.getRootNode,
     'open.controlled': props.openControlled,
+    ...props,
   }));
 
   const [state, send] = useMachine(tooltip.machine(context), {context});
diff --git a/packages/core/src/lib/tour/create-tour.svelte.ts b/packages/core/src/lib/tour/create-tour.svelte.ts
index 8b26a00b..579d59ef 100644
--- a/packages/core/src/lib/tour/create-tour.svelte.ts
+++ b/packages/core/src/lib/tour/create-tour.svelte.ts
@@ -1,9 +1,9 @@
+import {createUniqueId} from '$lib/create-unique-id.js';
 import {getEnvironmentContext} from '$lib/environment-provider/enviroment-provider-context.svelte.js';
 import {getLocaleContext} from '$lib/locale-provider/local-provider-context.svelte.js';
 import {normalizeProps, reflect, useMachine} from '@zag-js/svelte';
 import * as tour from '@zag-js/tour';
 import type {HTMLButtonAttributes} from 'svelte/elements';
-import {uid} from 'uid';
 import {parts} from './tour-anatomy.js';
 
 export interface TourStepDetails extends Omit<tour.StepDetails, 'id'> {}
@@ -22,11 +22,11 @@ export function createTour(props: CreateTourProps): CreateTourReturn {
   const locale = getLocaleContext();
   const environment = getEnvironmentContext();
 
-  const id = uid();
+  const id = createUniqueId();
 
   const steps = $derived.by(() => {
     return props.steps?.map((step) => ({
-      id: uid(),
+      id: createUniqueId(),
       ...step,
     }));
   });
diff --git a/packages/core/src/lib/tree-view/create-tree-view.svelte.ts b/packages/core/src/lib/tree-view/create-tree-view.svelte.ts
index 80ba57e7..91e983b7 100644
--- a/packages/core/src/lib/tree-view/create-tree-view.svelte.ts
+++ b/packages/core/src/lib/tree-view/create-tree-view.svelte.ts
@@ -1,8 +1,8 @@
+import {createUniqueId} from '$lib/create-unique-id.js';
 import {getEnvironmentContext} from '$lib/environment-provider/enviroment-provider-context.svelte.js';
 import {getLocaleContext} from '$lib/locale-provider/local-provider-context.svelte.js';
 import {normalizeProps, reflect, useMachine} from '@zag-js/svelte';
 import * as treeView from '@zag-js/tree-view';
-import {uid} from 'uid';
 
 export interface CreateTreeViewProps
   extends Omit<treeView.Context, 'id' | 'dir' | 'getRootNode'> {
@@ -17,13 +17,13 @@ export function createTreeView(
   const locale = getLocaleContext();
   const environment = getEnvironmentContext();
 
-  const id = uid();
+  const id = createUniqueId();
 
   const context: treeView.Context = reflect(() => ({
-    ...props,
-    id: props.id ?? id,
+    id,
     dir: locale?.dir,
     getRootNode: environment?.getRootNode,
+    ...props,
   }));
 
   const [state, send] = useMachine(treeView.machine(context), {context});