ui-ingredients 0.4.1 → 0.4.3

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