chore: expose createUniqueId and createContext

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.svelte.d.ts",
+      "import": "./dist/create-context.svelte.js"
+    },
+    "./create-unique-id": {
+      "types": "./dist/create-unique-id.d.ts",
+      "import": "./dist/create-unique-id.js"
     }
   },
   "files": [

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});

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});

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});

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});

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});

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});

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});

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,

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_,

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,

packages/core/src/lib/create-unique-id.ts

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

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(() => ({

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});

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});

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});