ui-ingredients 0.4.2 → 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));

package/dist/progress/create-progress.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 progress from '@zag-js/progress';
 import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
-import { uid } from 'uid';
 export function createProgress(props) {
     const locale = getLocaleContext();
     const environment = getEnvironmentContext();
-    const 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(progress.machine(context), { context });
     return reflect(() => progress.connect(state, send, normalizeProps));

package/dist/qr-code/create-qr-code.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 qrCode from '@zag-js/qr-code';
 import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
-import { uid } from 'uid';
 export function createQRCode(props) {
     const locale = getLocaleContext();
     const environment = getEnvironmentContext();
-    const 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(qrCode.machine(context), { context });
     return reflect(() => qrCode.connect(state, send, normalizeProps));

package/dist/radio-group/create-radio-group.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 radioGroup from '@zag-js/radio-group';
 import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
-import { uid } from 'uid';
 export function createRadioGroup(props) {
     const locale = getLocaleContext();
     const environment = getEnvironmentContext();
-    const 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(radioGroup.machine(context), { context });
     return reflect(() => radioGroup.connect(state, send, normalizeProps));

package/dist/rating-group/create-rating-group.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 ratingGroup from '@zag-js/rating-group';
 import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
-import { uid } from 'uid';
 export function createRatingGroup(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,
@@ -17,10 +19,8 @@ export function createRatingGroup(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(ratingGroup.machine(context), { context });
     return reflect(() => {

package/dist/segment-group/create-segment-group.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 segmentGroup from '@zag-js/radio-group';
 import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
-import { uid } from 'uid';
 export function createSegmentGroup(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(segmentGroup.machine(context));
     return reflect(() => segmentGroup.connect(state, send, normalizeProps));

package/dist/select/create-select.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 select from '@zag-js/select';
 import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
 import { createSplitProps } from '@zag-js/utils';
-import { uid } from 'uid';
 export function createSelect(props) {
     const [collectionProps, selectProps] = $derived(createSplitProps([
         'items',
@@ -16,7 +16,7 @@ export function createSelect(props) {
     const field = getFieldContext();
     const locale = getLocaleContext();
     const environment = getEnvironmentContext();
-    const id = uid();
+    const id = createUniqueId();
     const context = reflect(() => ({
         id,
         ids: {

package/dist/select/select-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 {
     getSelectContext,
     setSelectItemGroupPropsContext,
@@ -23,7 +23,7 @@
 
   let select = getSelectContext();
 
-  let id_ = uid();
+  let id_ = createUniqueId();
 
   let itemGroupProps = $derived({
     id: id ?? id_,

package/dist/signature-pad/create-signature-pad.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 signaturePad from '@zag-js/signature-pad';
 import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
-import { uid } from 'uid';
 export function createSignaturePad(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(signaturePad.machine(context), { context });
     return reflect(() => signaturePad.connect(state, send, normalizeProps));

package/dist/slider/create-slider.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 slider from '@zag-js/slider';
 import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
-import { uid } from 'uid';
 export function createSlider(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(slider.machine(context), { context });
     return reflect(() => slider.connect(state, send, normalizeProps));

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

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

package/dist/steps/create-steps.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 steps from '@zag-js/steps';
 import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
-import { uid } from 'uid';
 export function createSteps(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(steps.machine(context), { context });
     return reflect(() => steps.connect(state, send, normalizeProps));

package/dist/switch/create-switch.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 { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
 import * as switch_ from '@zag-js/switch';
-import { uid } from 'uid';
 export function createSwitch(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 createSwitch(props) {
         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 });
     return reflect(() => {

package/dist/tabs/create-tabs.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 { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
 import * as tabs from '@zag-js/tabs';
-import { uid } from 'uid';
 export function createTabs(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(tabs.machine(context), { context });
     return reflect(() => tabs.connect(state, send, normalizeProps));

package/dist/tags-input/create-tags-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 { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
 import * as tagsInput from '@zag-js/tags-input';
-import { uid } from 'uid';
 export function createTagsInput(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 createTagsInput(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(tagsInput.machine(context), { context });
     return reflect(() => {

package/dist/time-picker/create-time-picker.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 { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
 import * as timePicker from '@zag-js/time-picker';
-import { uid } from 'uid';
 export function createTimePicker(props) {
     const locale = getLocaleContext();
     const environment = getEnvironmentContext();
-    const id = uid();
+    const id = createUniqueId();
     const 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 });
     return reflect(() => timePicker.connect(state, send, normalizeProps));

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

@@ -1,14 +1,14 @@
+import { createUniqueId } from '../create-unique-id.js';
 import { getEnvironmentContext } from '../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 function createTimer(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(timer.machine(context), { context });
     return reflect(() => timer.connect(state, send, normalizeProps));

package/dist/toast/create-toaster.svelte.js

@@ -1,10 +1,9 @@
+import { createUniqueId } from '../create-unique-id.js';
 import { normalizeProps, reflect } from '@zag-js/svelte';
 import * as toast from '@zag-js/toast';
-import { uid } from 'uid';
 export function createToaster(props) {
-    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,
         ...toast.group.connect(machine, machine.send, normalizeProps),

package/dist/toggle-group/create-toggle-group.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 { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
 import * as toggleGroup from '@zag-js/toggle-group';
-import { uid } from 'uid';
 export function createToggleGroup(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(toggleGroup.machine(context), { context });
     return reflect(() => toggleGroup.connect(state, send, normalizeProps));

package/dist/tooltip/create-tooltip.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 { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
 import * as tooltip from '@zag-js/tooltip';
-import { uid } from 'uid';
 export function createTooltip(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(tooltip.machine(context), { context });
     return reflect(() => tooltip.connect(state, send, normalizeProps));

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

@@ -1,16 +1,16 @@
+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 { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
 import * as tour from '@zag-js/tour';
-import { uid } from 'uid';
 import { parts } from './tour-anatomy.js';
 export function createTour(props) {
     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,
         }));
     });

package/dist/tree-view/create-tree-view.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 { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
 import * as treeView from '@zag-js/tree-view';
-import { uid } from 'uid';
 export function createTreeView(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(treeView.machine(context), { context });
     return reflect(() => treeView.connect(state, send, normalizeProps));

package/package.json

@@ -2,7 +2,7 @@
   "name": "ui-ingredients",
   "type": "module",
   "license": "MIT",
-  "version": "0.4.2",
+  "version": "0.4.3",
   "packageManager": "pnpm@9.7.0",
   "svelte": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -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": [