ui-ingredients 0.0.12 → 0.0.14

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/portal/root.svelte

@@ -10,11 +10,19 @@
 </script>
 
 <script lang="ts">
+  import {useEnvironmentContext} from '../environment-provider/index.js';
   import {portal} from '@zag-js/svelte';
 
-  let {children, ...props}: PortalProps = $props();
+  let {container, disabled, getRootNode, children}: PortalProps = $props();
+  let environmentContext = useEnvironmentContext();
 </script>
 
-<div use:portal={props}>
+<div
+  use:portal={{
+    container,
+    disabled,
+    getRootNode: getRootNode ?? environmentContext?.getRootNode,
+  }}
+>
   {@render children?.()}
 </div>

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/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 {
     createSegmentGroupContext,
@@ -45,7 +45,7 @@
   let environmentContext = useEnvironmentContext();
 
   let context = createSegmentGroupContext({
-    id: id ?? uuid(),
+    id: id ?? createUniqueId(),
     ids,
     dir: dir ?? localeContext?.dir,
     form,

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.12",
+  "version": "0.0.14",
   "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"