ui-ingredients 0.0.13 → 0.0.15

package/README.md

@@ -60,7 +60,7 @@ npm install ui-ingredients
 - 🟢 RadioGroup
 - 🟢 RatingGroup
 - 🟢 Select
-- 🟡 SegmentGroup
+- 🟢 SegmentGroup
 - ⚪ SignaturePad
 - 🟢 Slider
 - ⚪ Splitter

package/dist/accordion/root.svelte

@@ -18,7 +18,7 @@
 <script lang="ts">
   import {useEnvironmentContext} from '../environment-provider/index.js';
   import {useLocaleContext} from '../locale-provider/index.js';
-  import {uuid} from '../utils.svelte.js';
+  import {createUniqueId} from '../utils.svelte.js';
   import {mergeProps} from '@zag-js/svelte';
   import {
     createAccordionContext,
@@ -45,7 +45,7 @@
   let environmentContext = useEnvironmentContext();
 
   let context = createAccordionContext({
-    id: id ?? uuid(),
+    id: id ?? createUniqueId(),
     ids,
     dir: dir ?? localeContext?.dir,
     value: $state.snapshot(value),

package/dist/avatar/root.svelte

@@ -18,7 +18,7 @@
 <script lang="ts">
   import {useEnvironmentContext} from '../environment-provider/index.js';
   import {useLocaleContext} from '../locale-provider/index.js';
-  import {uuid} from '../utils.svelte.js';
+  import {createUniqueId} from '../utils.svelte.js';
   import {mergeProps} from '@zag-js/svelte';
   import {createAvatarContext, setAvatarContext} from './context.svelte.js';
 
@@ -36,7 +36,7 @@
   let environmentContext = useEnvironmentContext();
 
   let context = createAvatarContext({
-    id: id ?? uuid(),
+    id: id ?? createUniqueId(),
     ids,
     dir: dir ?? localeContext?.dir,
     onStatusChange,

package/dist/carousel/root.svelte

@@ -18,7 +18,7 @@
 <script lang="ts">
   import {useEnvironmentContext} from '../environment-provider/index.js';
   import {useLocaleContext} from '../locale-provider/index.js';
-  import {uuid} from '../utils.svelte.js';
+  import {createUniqueId} from '../utils.svelte.js';
   import {mergeProps} from '@zag-js/svelte';
   import {createCarouselContext, setCarouselContext} from './context.svelte.js';
 
@@ -42,7 +42,7 @@
   let environmentContext = useEnvironmentContext();
 
   let context = createCarouselContext({
-    id: id ?? uuid(),
+    id: id ?? createUniqueId(),
     ids,
     dir: dir ?? localeContext?.dir,
     loop,

package/dist/checkbox/root.svelte

@@ -18,7 +18,7 @@
 <script lang="ts">
   import {useEnvironmentContext} from '../environment-provider/index.js';
   import {useLocaleContext} from '../locale-provider/index.js';
-  import {uuid} from '../utils.svelte.js';
+  import {createUniqueId} from '../utils.svelte.js';
   import {mergeProps} from '@zag-js/svelte';
   import {createCheckboxContext, setCheckboxContext} from './context.svelte.js';
 
@@ -44,7 +44,7 @@
   let environmentContext = useEnvironmentContext();
 
   let context = createCheckboxContext({
-    id: id ?? uuid(),
+    id: id ?? createUniqueId(),
     ids,
     dir: dir ?? localeContext?.dir,
     form,

package/dist/clipboard/root.svelte

@@ -17,7 +17,7 @@
 
 <script lang="ts">
   import {useEnvironmentContext} from '../environment-provider/index.js';
-  import {uuid} from '../utils.svelte.js';
+  import {createUniqueId} from '../utils.svelte.js';
   import {mergeProps} from '@zag-js/svelte';
   import {
     createClipboardContext,
@@ -38,7 +38,7 @@
   let environmentContext = useEnvironmentContext();
 
   let context = createClipboardContext({
-    id: id ?? uuid(),
+    id: id ?? createUniqueId(),
     ids,
     value: $state.snapshot(value),
     timeout,

package/dist/collapsible/root.svelte

@@ -18,7 +18,7 @@
 <script lang="ts">
   import {useEnvironmentContext} from '../environment-provider/index.js';
   import {useLocaleContext} from '../locale-provider/index.js';
-  import {uuid} from '../utils.svelte.js';
+  import {createUniqueId} from '../utils.svelte.js';
   import {mergeProps} from '@zag-js/svelte';
   import {
     createCollapsibleContext,
@@ -43,7 +43,7 @@
   let environmentContext = useEnvironmentContext();
 
   let context = createCollapsibleContext({
-    id: id ?? uuid(),
+    id: id ?? createUniqueId(),
     ids,
     dir: dir ?? localeContext?.dir,
     open,

package/dist/combobox/item-group.svelte

@@ -7,7 +7,7 @@
 </script>
 
 <script lang="ts">
-  import {uuid} from '../utils.svelte.js';
+  import {createUniqueId} from '../utils.svelte.js';
   import {mergeProps} from '@zag-js/svelte';
   import {
     setComboboxItemGroupPropsContext,
@@ -18,7 +18,7 @@
 
   let context = useComboboxContext();
 
-  let uid = uuid();
+  let uid = createUniqueId();
 
   let attrs = $derived(
     mergeProps(props, context.getItemGroupProps({id: id ?? uid})),

package/dist/combobox/root.svelte

@@ -18,7 +18,7 @@
 <script lang="ts" generics="T">
   import {useEnvironmentContext} from '../environment-provider/index.js';
   import {useLocaleContext} from '../locale-provider/index.js';
-  import {uuid} from '../utils.svelte.js';
+  import {createUniqueId} from '../utils.svelte.js';
   import {mergeProps} from '@zag-js/svelte';
   import {createComboboxContext, setComboboxContext} from './context.svelte.js';
 
@@ -74,7 +74,7 @@
   let environmentContext = useEnvironmentContext();
 
   let context = createComboboxContext({
-    id: id ?? uuid(),
+    id: id ?? createUniqueId(),
     ids,
     dir: dir ?? localeContext?.dir,
     name,

package/dist/dialog/root.svelte

@@ -14,7 +14,7 @@
 <script lang="ts">
   import {useEnvironmentContext} from '../environment-provider/index.js';
   import {useLocaleContext} from '../locale-provider/index.js';
-  import {uuid} from '../utils.svelte.js';
+  import {createUniqueId} from '../utils.svelte.js';
   import {createDialogContext, setDialogContext} from './context.svelte.js';
 
   let {id, dir, getRootNode, children, ...props}: DialogProps = $props();
@@ -23,7 +23,7 @@
   let environmentContext = useEnvironmentContext();
 
   let context = createDialogContext({
-    id: id ?? uuid(),
+    id: id ?? createUniqueId(),
     dir: dir ?? localeContext?.dir,
     getRootNode: getRootNode ?? environmentContext?.getRootNode,
     ...props,

package/dist/editable/root.svelte

@@ -15,7 +15,7 @@
 <script lang="ts">
   import {useEnvironmentContext} from '../environment-provider/index.js';
   import {useLocaleContext} from '../locale-provider/index.js';
-  import {uuid} from '../utils.svelte.js';
+  import {createUniqueId} from '../utils.svelte.js';
   import {createEditableContext, setEditableContext} from './context.svelte.js';
 
   let {id, dir, getRootNode, children, ...props}: EditableProps = $props();
@@ -24,7 +24,7 @@
   let environmentContext = useEnvironmentContext();
 
   let context = createEditableContext({
-    id: id ?? uuid(),
+    id: id ?? createUniqueId(),
     dir: dir ?? localeContext?.dir,
     getRootNode: getRootNode ?? environmentContext?.getRootNode,
     ...props,

package/dist/hover-card/root.svelte

@@ -15,7 +15,7 @@
 <script lang="ts">
   import {useEnvironmentContext} from '../environment-provider/index.js';
   import {useLocaleContext} from '../locale-provider/index.js';
-  import {uuid} from '../utils.svelte.js';
+  import {createUniqueId} from '../utils.svelte.js';
   import {
     createHoverCardContext,
     setHoverCardContext,
@@ -27,7 +27,7 @@
   let environmentContext = useEnvironmentContext();
 
   let context = createHoverCardContext({
-    id: id ?? uuid(),
+    id: id ?? createUniqueId(),
     dir: dir ?? localeContext?.dir,
     getRootNode: getRootNode ?? environmentContext?.getRootNode,
     ...props,

package/dist/number-input/root.svelte

@@ -18,7 +18,7 @@
 <script lang="ts">
   import {useEnvironmentContext} from '../environment-provider/index.js';
   import {useLocaleContext} from '../locale-provider/index.js';
-  import {uuid} from '../utils.svelte.js';
+  import {createUniqueId} from '../utils.svelte.js';
   import {mergeProps} from '@zag-js/svelte';
   import {
     createNumberInputContext,
@@ -61,7 +61,7 @@
   let environmentContext = useEnvironmentContext();
 
   let context = createNumberInputContext({
-    id: id ?? uuid(),
+    id: id ?? createUniqueId(),
     ids,
     dir: dir ?? localeContext?.dir,
     max,

package/dist/pagination/root.svelte

@@ -18,7 +18,7 @@
 <script lang="ts">
   import {useEnvironmentContext} from '../environment-provider/index.js';
   import {useLocaleContext} from '../locale-provider/index.js';
-  import {uuid} from '../utils.svelte.js';
+  import {createUniqueId} from '../utils.svelte.js';
   import {mergeProps} from '@zag-js/svelte';
   import {
     createPaginationContext,
@@ -46,7 +46,7 @@
   let environmentContext = useEnvironmentContext();
 
   let context = createPaginationContext({
-    id: id ?? uuid(),
+    id: id ?? createUniqueId(),
     ids,
     dir: dir ?? localeContext?.dir,
     type,

package/dist/pin-input/root.svelte

@@ -18,7 +18,7 @@
 <script lang="ts">
   import {useEnvironmentContext} from '../environment-provider/index.js';
   import {useLocaleContext} from '../locale-provider/index.js';
-  import {uuid} from '../utils.svelte.js';
+  import {createUniqueId} from '../utils.svelte.js';
   import {mergeProps} from '@zag-js/svelte';
   import {createPinInputContext, setPinInputContext} from './context.svelte.js';
 
@@ -54,7 +54,7 @@
   let environmentContext = useEnvironmentContext();
 
   let context = createPinInputContext({
-    id: id ?? uuid(),
+    id: id ?? createUniqueId(),
     ids,
     dir: dir ?? localeContext?.dir,
     otp,

package/dist/popover/root.svelte

@@ -14,7 +14,7 @@
 <script lang="ts">
   import {useEnvironmentContext} from '../environment-provider/index.js';
   import {useLocaleContext} from '../locale-provider/index.js';
-  import {uuid} from '../utils.svelte.js';
+  import {createUniqueId} from '../utils.svelte.js';
   import {createPopoverContext, setPopoverContext} from './context.svelte.js';
 
   let {id, dir, getRootNode, children, ...props}: PopoverProps = $props();
@@ -23,7 +23,7 @@
   let environmentContext = useEnvironmentContext();
 
   let context = createPopoverContext({
-    id: id ?? uuid(),
+    id: id ?? createUniqueId(),
     dir: dir ?? localeContext?.dir,
     getRootNode: getRootNode ?? environmentContext?.getRootNode,
     ...props,

package/dist/presence/root.svelte

@@ -28,16 +28,10 @@
   );
 
   let api = $derived(presence.connect(machineState, send, normalizeProps));
-
-  let node: HTMLElement | null = $state(null);
-
-  $effect(() => {
-    api.setNode(node);
-  });
 </script>
 
 <div
-  bind:this={node}
+  use:api.setNode
   hidden={!api.present}
   data-state={api.skip ? undefined : present ? 'open' : 'closed'}
   {...props}

package/dist/progress/root.svelte

@@ -18,7 +18,7 @@
 <script lang="ts">
   import {useEnvironmentContext} from '../environment-provider/index.js';
   import {useLocaleContext} from '../locale-provider/index.js';
-  import {uuid} from '../utils.svelte.js';
+  import {createUniqueId} from '../utils.svelte.js';
   import {mergeProps} from '@zag-js/svelte';
   import {createProgressContext, setProgressContext} from './context.svelte.js';
 
@@ -40,7 +40,7 @@
   let environmentContext = useEnvironmentContext();
 
   let context = createProgressContext({
-    id: id ?? uuid(),
+    id: id ?? createUniqueId(),
     ids,
     dir: dir ?? localeContext?.dir,
     max,

package/dist/qr-code/root.svelte

@@ -18,7 +18,7 @@
 <script lang="ts">
   import {useEnvironmentContext} from '../environment-provider/index.js';
   import {useLocaleContext} from '../locale-provider/index.js';
-  import {uuid} from '../utils.svelte.js';
+  import {createUniqueId} from '../utils.svelte.js';
   import {mergeProps} from '@zag-js/svelte';
   import {createQRCodeContext, setQRCodeContext} from './context.svelte.js';
 
@@ -37,7 +37,7 @@
   let environmentContext = useEnvironmentContext();
 
   let context = createQRCodeContext({
-    id: id ?? uuid(),
+    id: id ?? createUniqueId(),
     ids,
     dir: dir ?? localeContext?.dir,
     value: $state.snapshot(value),

package/dist/radio-group/root.svelte

@@ -18,7 +18,7 @@
 <script lang="ts">
   import {useEnvironmentContext} from '../environment-provider/index.js';
   import {useLocaleContext} from '../locale-provider/index.js';
-  import {uuid} from '../utils.svelte.js';
+  import {createUniqueId} from '../utils.svelte.js';
   import {mergeProps} from '@zag-js/svelte';
   import {
     createRadioGroupContext,
@@ -45,7 +45,7 @@
   let environmentContext = useEnvironmentContext();
 
   let context = createRadioGroupContext({
-    id: id ?? uuid(),
+    id: id ?? createUniqueId(),
     ids,
     dir: dir ?? localeContext?.dir,
     form,

package/dist/rating-group/root.svelte

@@ -18,7 +18,7 @@
 <script lang="ts">
   import {useEnvironmentContext} from '../environment-provider/index.js';
   import {useLocaleContext} from '../locale-provider/index.js';
-  import {uuid} from '../utils.svelte.js';
+  import {createUniqueId} from '../utils.svelte.js';
   import {mergeProps} from '@zag-js/svelte';
   import {
     createRatingGroupContext,
@@ -50,7 +50,7 @@
   let environmentContext = useEnvironmentContext();
 
   let context = createRatingGroupContext({
-    id: id ?? uuid(),
+    id: id ?? createUniqueId(),
     ids,
     dir: dir ?? localeContext?.dir,
     form,

package/dist/segment-group/anatomy.js

@@ -1,2 +1,3 @@
 import { anatomy } from '@zag-js/radio-group';
 export const segmentGroupAnatomy = anatomy.rename('segment-group');
+export const parts = segmentGroupAnatomy.build();

package/dist/segment-group/context.svelte.js

@@ -1,33 +1,10 @@
 import * as segmentGroup from '@zag-js/radio-group';
-import { mergeProps, normalizeProps, reflect, useMachine } from '@zag-js/svelte';
+import { normalizeProps, useMachine } from '@zag-js/svelte';
 import { getContext, setContext } from 'svelte';
-import { segmentGroupAnatomy } from './anatomy.js';
 export function createSegmentGroupContext(props) {
-    const parts = $derived(segmentGroupAnatomy.build());
     const [state, send] = useMachine(segmentGroup.machine(props));
     const api = $derived(segmentGroup.connect(state, send, normalizeProps));
-    const modified = $derived(reflect(() => ({
-        ...api,
-        getIndicatorProps() {
-            return mergeProps(api.getIndicatorProps(), parts.indicator.attrs);
-        },
-        getItemControlProps(props) {
-            return mergeProps(api.getItemControlProps(props), parts.itemControl.attrs);
-        },
-        getItemProps(props) {
-            return mergeProps(api.getItemProps(props), parts.item.attrs);
-        },
-        getItemTextProps(props) {
-            return mergeProps(api.getItemTextProps(props), parts.itemText.attrs);
-        },
-        getLabelProps() {
-            return mergeProps(api.getLabelProps(), parts.label.attrs);
-        },
-        getRootProps() {
-            return mergeProps(api.getRootProps(), parts.root.attrs);
-        },
-    })));
-    return modified;
+    return api;
 }
 export function setSegmentGroupContext(value) {
     setContext('SegmentGroup', value);

package/dist/segment-group/indicator.svelte

@@ -7,6 +7,7 @@
 
 <script lang="ts">
   import {mergeProps} from '@zag-js/svelte';
+  import {parts} from './anatomy.js';
   import {useSegmentGroupContext} from './context.svelte.js';
 
   let {children, ...props}: SegmentGroupIndicatorProps = $props();
@@ -16,6 +17,6 @@
   let attrs = $derived(mergeProps(props, context.getIndicatorProps()));
 </script>
 
-<span {...attrs}>
+<span {...attrs} {...parts.indicator.attrs}>
   {@render children?.()}
 </span>

package/dist/segment-group/item-control.svelte

@@ -7,6 +7,7 @@
 
 <script lang="ts">
   import {mergeProps} from '@zag-js/svelte';
+  import {parts} from './anatomy.js';
   import {
     useSegmentGroupContext,
     useSegmentGroupItemPropsContext,
@@ -23,6 +24,6 @@
   );
 </script>
 
-<div {...attrs}>
+<div {...attrs} {...parts.itemControl.attrs}>
   {@render children?.()}
 </div>

package/dist/segment-group/item-text.svelte

@@ -7,6 +7,7 @@
 
 <script lang="ts">
   import {mergeProps} from '@zag-js/svelte';
+  import {parts} from './anatomy.js';
   import {
     useSegmentGroupContext,
     useSegmentGroupItemPropsContext,
@@ -21,6 +22,6 @@
   let attrs = $derived(mergeProps(props, context.getItemTextProps(itemProps)));
 </script>
 
-<span {...attrs}>
+<span {...attrs} {...parts.itemText.attrs}>
   {@render children?.()}
 </span>

package/dist/segment-group/item.svelte

@@ -11,6 +11,7 @@
 
 <script lang="ts">
   import {mergeProps} from '@zag-js/svelte';
+  import {parts} from './anatomy.js';
   import {
     setSegmentGroupItemPropsContext,
     useSegmentGroupContext,
@@ -53,6 +54,6 @@
   });
 </script>
 
-<label {...attrs}>
+<label {...attrs} {...parts.item.attrs}>
   {@render children?.(state)}
 </label>

package/dist/segment-group/label.svelte

@@ -6,6 +6,7 @@
 
 <script lang="ts">
   import {mergeProps} from '@zag-js/svelte';
+  import {parts} from './anatomy.js';
   import {useSegmentGroupContext} from './context.svelte.js';
 
   let {children, ...props}: SegmentGroupLabelProps = $props();
@@ -15,6 +16,6 @@
   let attrs = $derived(mergeProps(props, context.getLabelProps()));
 </script>
 
-<span {...attrs}>
+<span {...attrs} {...parts.label.attrs}>
   {@render children?.()}
 </span>

package/dist/segment-group/root.svelte

@@ -18,8 +18,9 @@
 <script lang="ts">
   import {useEnvironmentContext} from '../environment-provider/index.js';
   import {useLocaleContext} from '../locale-provider/index.js';
-  import {uuid} from '../utils.svelte.js';
+  import {createUniqueId} from '../utils.svelte.js';
   import {mergeProps} from '@zag-js/svelte';
+  import {parts} from './anatomy.js';
   import {
     createSegmentGroupContext,
     setSegmentGroupContext,
@@ -45,7 +46,7 @@
   let environmentContext = useEnvironmentContext();
 
   let context = createSegmentGroupContext({
-    id: id ?? uuid(),
+    id: id ?? createUniqueId(),
     ids,
     dir: dir ?? localeContext?.dir,
     form,
@@ -63,6 +64,6 @@
   setSegmentGroupContext(context);
 </script>
 
-<div {...attrs}>
+<div {...attrs} {...parts.root.attrs}>
   {@render children?.(context)}
 </div>

package/dist/select/item-group.svelte

@@ -7,7 +7,7 @@
 </script>
 
 <script lang="ts">
-  import {uuid} from '../utils.svelte.js';
+  import {createUniqueId} from '../utils.svelte.js';
   import {mergeProps} from '@zag-js/svelte';
   import {
     setSelectItemGroupPropsContext,
@@ -18,7 +18,7 @@
 
   let context = useSelectContext();
 
-  let uid = uuid();
+  let uid = createUniqueId();
 
   let attrs = $derived(
     mergeProps(props, context.getItemGroupProps({id: id ?? uid})),

package/dist/select/root.svelte

@@ -18,7 +18,7 @@
 <script lang="ts" generics="T">
   import {useEnvironmentContext} from '../environment-provider/index.js';
   import {useLocaleContext} from '../locale-provider/index.js';
-  import {uuid} from '../utils.svelte.js';
+  import {createUniqueId} from '../utils.svelte.js';
   import {mergeProps} from '@zag-js/svelte';
   import {createSelectContext, setSelectContext} from './context.svelte.js';
 
@@ -61,7 +61,7 @@
   let environmentContext = useEnvironmentContext();
 
   let context = createSelectContext({
-    id: id ?? uuid(),
+    id: id ?? createUniqueId(),
     ids,
     dir: dir ?? localeContext?.dir,
     form,

package/dist/slider/root.svelte

@@ -18,7 +18,7 @@
 <script lang="ts">
   import {useEnvironmentContext} from '../environment-provider/index.js';
   import {useLocaleContext} from '../locale-provider/index.js';
-  import {uuid} from '../utils.svelte.js';
+  import {createUniqueId} from '../utils.svelte.js';
   import {mergeProps} from '@zag-js/svelte';
   import {createSliderContext, setSliderContext} from './context.svelte.js';
 
@@ -55,7 +55,7 @@
   let environmentContext = useEnvironmentContext();
 
   let context = createSliderContext({
-    id: id ?? uuid(),
+    id: id ?? createUniqueId(),
     ids,
     dir: dir ?? localeContext?.dir,
     max,

package/dist/steps/root.svelte

@@ -18,7 +18,7 @@
 <script lang="ts">
   import {useEnvironmentContext} from '../environment-provider/index.js';
   import {useLocaleContext} from '../locale-provider/index.js';
-  import {uuid} from '../utils.svelte.js';
+  import {createUniqueId} from '../utils.svelte.js';
   import {mergeProps} from '@zag-js/svelte';
   import {createStepsContext, setStepsContext} from './context.svelte.js';
 
@@ -40,7 +40,7 @@
   let localeContext = useLocaleContext();
 
   let context = createStepsContext({
-    id: id ?? uuid(),
+    id: id ?? createUniqueId(),
     ids,
     dir: dir ?? localeContext?.dir,
     step,

package/dist/switch/root.svelte

@@ -18,7 +18,7 @@
 <script lang="ts">
   import {useEnvironmentContext} from '../environment-provider/index.js';
   import {useLocaleContext} from '../locale-provider/index.js';
-  import {uuid} from '../utils.svelte.js';
+  import {createUniqueId} from '../utils.svelte.js';
   import {mergeProps} from '@zag-js/svelte';
   import {createSwitchContext, setSwitchContext} from './context.svelte.js';
 
@@ -45,7 +45,7 @@
   let environmentContext = useEnvironmentContext();
 
   let context = createSwitchContext({
-    id: id ?? uuid(),
+    id: id ?? createUniqueId(),
     ids,
     dir: dir ?? localeContext?.dir,
     form,

package/dist/tabs/root.svelte

@@ -18,7 +18,7 @@
 <script lang="ts">
   import {useEnvironmentContext} from '../environment-provider/index.js';
   import {useLocaleContext} from '../locale-provider/index.js';
-  import {uuid} from '../utils.svelte.js';
+  import {createUniqueId} from '../utils.svelte.js';
   import {mergeProps} from '@zag-js/svelte';
   import {createTabsContext, setTabsContext} from './context.svelte.js';
 
@@ -43,7 +43,7 @@
   let environmentContext = useEnvironmentContext();
 
   let context = createTabsContext({
-    id: id ?? uuid(),
+    id: id ?? createUniqueId(),
     ids,
     dir: dir ?? localeContext?.dir,
     value: $state.snapshot(value),

package/dist/tags-input/root.svelte

@@ -18,7 +18,7 @@
 <script lang="ts">
   import {useEnvironmentContext} from '../environment-provider/index.js';
   import {useLocaleContext} from '../locale-provider/index.js';
-  import {uuid} from '../utils.svelte.js';
+  import {createUniqueId} from '../utils.svelte.js';
   import {mergeProps} from '@zag-js/svelte';
   import {
     createTagsInputContext,
@@ -63,7 +63,7 @@
   let environmentContext = useEnvironmentContext();
 
   let context = createTagsInputContext({
-    id: id ?? uuid(),
+    id: id ?? createUniqueId(),
     ids,
     dir: dir ?? localeContext?.dir,
     max,

package/dist/timer/root.svelte

@@ -17,7 +17,7 @@
 
 <script lang="ts">
   import {useEnvironmentContext} from '../environment-provider/index.js';
-  import {uuid} from '../utils.svelte.js';
+  import {createUniqueId} from '../utils.svelte.js';
   import {mergeProps} from '@zag-js/svelte';
   import {createTimerContext, setTimerContext} from './context.svelte.js';
 
@@ -38,7 +38,7 @@
   let environmentContext = useEnvironmentContext();
 
   let context = createTimerContext({
-    id: id ?? uuid(),
+    id: id ?? createUniqueId(),
     startMs,
     targetMs,
     interval,

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

@@ -1,12 +1,12 @@
 import { useEnvironmentContext } from '../environment-provider/index.js';
 import { useLocaleContext } from '../locale-provider/index.js';
-import { uuid } from '../utils.svelte.js';
+import { createUniqueId } from '../utils.svelte.js';
 import { normalizeProps, reflect } from '@zag-js/svelte';
 import * as toast from '@zag-js/toast';
 export default function createToaster(props) {
     const localContext = useLocaleContext();
     const environmentContext = useEnvironmentContext();
-    const id = $derived(props?.id ?? uuid());
+    const id = $derived(props?.id ?? createUniqueId());
     const dir = $derived(props?.dir ?? localContext?.dir);
     const getRootNode = $derived(props?.getRootNode ?? environmentContext?.getRootNode);
     const machine = $derived(toast.group.machine({

package/dist/toggle-group/root.svelte

@@ -18,7 +18,7 @@
 <script lang="ts">
   import {useEnvironmentContext} from '../environment-provider/index.js';
   import {useLocaleContext} from '../locale-provider/index.js';
-  import {uuid} from '../utils.svelte.js';
+  import {createUniqueId} from '../utils.svelte.js';
   import {mergeProps} from '@zag-js/svelte';
   import {
     createToggleGroupContext,
@@ -45,7 +45,7 @@
   let environmentContext = useEnvironmentContext();
 
   let context = createToggleGroupContext({
-    id: id ?? uuid(),
+    id: id ?? createUniqueId(),
     ids,
     dir: dir ?? localeContext?.dir,
     value: $state.snapshot(value),

package/dist/tooltip/root.svelte

@@ -14,7 +14,7 @@
 <script lang="ts">
   import {useEnvironmentContext} from '../environment-provider/index.js';
   import {useLocaleContext} from '../locale-provider/index.js';
-  import {uuid} from '../utils.svelte.js';
+  import {createUniqueId} from '../utils.svelte.js';
   import {createTooltipContext, setTooltipContext} from './context.svelte.js';
 
   let {id, dir, getRootNode, children, ...props}: TooltipProps = $props();
@@ -23,7 +23,7 @@
   let environmentContext = useEnvironmentContext();
 
   let context = createTooltipContext({
-    id: id ?? uuid(),
+    id: id ?? createUniqueId(),
     dir: dir ?? localeContext?.dir,
     getRootNode: getRootNode ?? environmentContext?.getRootNode,
     ...props,

package/dist/utils.svelte.d.ts

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

package/dist/utils.svelte.js

@@ -1,2 +1,2 @@
-import { nanoid } from 'nanoid/non-secure';
-export const uuid = () => nanoid(8);
+import { uid } from 'uid';
+export const createUniqueId = () => uid();

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ui-ingredients",
   "type": "module",
-  "version": "0.0.13",
+  "version": "0.0.15",
   "packageManager": "pnpm@9.7.0",
   "svelte": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -123,7 +123,7 @@
     "@zag-js/toggle-group": "0.65.1",
     "@zag-js/tooltip": "0.65.1",
     "@zag-js/tree-view": "0.65.1",
-    "nanoid": "5.0.7"
+    "uid": "2.0.2"
   },
   "peerDependencies": {
     "svelte": "^5.0.0-next.1"

package/dist/segment-group/context.svelte.d.ts

@@ -1,10 +0,0 @@
-import * as segmentGroup from '@zag-js/radio-group';
-export interface CreateSegmentGroupContextProps extends segmentGroup.Context {
-}
-export interface CreateSegmentGroupContextReturn extends ReturnType<typeof createSegmentGroupContext> {
-}
-export declare function createSegmentGroupContext(props: CreateSegmentGroupContextProps): any;
-export declare function setSegmentGroupContext(value: CreateSegmentGroupContextReturn): void;
-export declare function useSegmentGroupContext(): CreateSegmentGroupContextReturn;
-export declare function setSegmentGroupItemPropsContext(value: segmentGroup.ItemProps): void;
-export declare function useSegmentGroupItemPropsContext(): segmentGroup.ItemProps;