ui-ingredients 0.0.1 → 0.0.3

package/README.md

@@ -71,3 +71,5 @@ npm install ui-ingredients
 - 🟢 Toast
 - 🟢 ToggleGroup
 - 🟢 Tooltip
+
+View components demo [here](https://ui-ingredients.vercel.app/)

package/dist/accordion/root.svelte

@@ -1,10 +1,10 @@
 <script lang="ts" context="module"></script>
 
-<script lang="ts">import { mergeProps } from "@zag-js/svelte";
-import { nanoid } from "nanoid/non-secure";
+<script lang="ts">import { uuid } from "../utils.svelte.js";
+import { mergeProps } from "@zag-js/svelte";
 import { createAccordionContext, setAccordionContext } from "./context.svelte.js";
 let {
-  id = nanoid(),
+  id = uuid(),
   ids,
   dir,
   value,

package/dist/avatar/root.svelte

@@ -1,11 +1,11 @@
 <script lang="ts" context="module">import {} from "./context.svelte.js";
 </script>
 
-<script lang="ts">import { mergeProps } from "@zag-js/svelte";
-import { nanoid } from "nanoid/non-secure";
+<script lang="ts">import { uuid } from "../utils.svelte.js";
+import { mergeProps } from "@zag-js/svelte";
 import { createAvatarContext, setAvatarContext } from "./context.svelte.js";
 let {
-  id = nanoid(),
+  id = uuid(),
   ids,
   dir,
   getRootNode,

package/dist/carousel/root.svelte

@@ -1,10 +1,10 @@
 <script lang="ts" context="module"></script>
 
-<script lang="ts">import { mergeProps } from "@zag-js/svelte";
-import { nanoid } from "nanoid/non-secure";
+<script lang="ts">import { uuid } from "../utils.svelte.js";
+import { mergeProps } from "@zag-js/svelte";
 import { createCarouselContext, setCarouselContext } from "./context.svelte.js";
 let {
-  id = nanoid(),
+  id = uuid(),
   ids,
   dir,
   loop,

package/dist/checkbox/root.svelte

@@ -1,10 +1,10 @@
 <script lang="ts" context="module"></script>
 
-<script lang="ts">import { mergeProps } from "@zag-js/svelte";
-import { nanoid } from "nanoid/non-secure";
+<script lang="ts">import { uuid } from "../utils.svelte.js";
+import { mergeProps } from "@zag-js/svelte";
 import { createCheckboxContext, setCheckboxContext } from "./context.svelte.js";
 let {
-  id = nanoid(),
+  id = uuid(),
   ids,
   dir,
   form,

package/dist/clipboard/root.svelte

@@ -1,10 +1,10 @@
 <script lang="ts" context="module"></script>
 
-<script lang="ts">import { mergeProps } from "@zag-js/svelte";
-import { nanoid } from "nanoid/non-secure";
+<script lang="ts">import { uuid } from "../utils.svelte.js";
+import { mergeProps } from "@zag-js/svelte";
 import { createClipboardContext, setClipboardContext } from "./context.svelte.js";
 let {
-  id = nanoid(),
+  id = uuid(),
   ids,
   value,
   timeout,

package/dist/collapsible/root.svelte

@@ -1,10 +1,10 @@
 <script lang="ts" context="module"></script>
 
-<script lang="ts">import { mergeProps } from "@zag-js/svelte";
-import { nanoid } from "nanoid/non-secure";
+<script lang="ts">import { uuid } from "../utils.svelte.js";
+import { mergeProps } from "@zag-js/svelte";
 import { createCollapsibleContext, setCollapsibleContext } from "./context.svelte.js";
 let {
-  id = nanoid(),
+  id = uuid(),
   ids,
   dir,
   open,

package/dist/combobox/item-group.svelte

@@ -1,9 +1,9 @@
 <script lang="ts" context="module"></script>
 
-<script lang="ts">import { mergeProps } from "@zag-js/svelte";
-import { nanoid } from "nanoid/non-secure";
+<script lang="ts">import { uuid } from "../utils.svelte.js";
+import { mergeProps } from "@zag-js/svelte";
 import { setComboboxItemGroupContext, useComboboxContext } from "./context.svelte.js";
-let { id = nanoid(), children, ...props } = $props();
+let { id = uuid(), children, ...props } = $props();
 let context = useComboboxContext();
 let attrs = $derived(mergeProps(props, context.getItemGroupProps({ id })));
 setComboboxItemGroupContext({ id });

package/dist/combobox/root.svelte

@@ -1,10 +1,10 @@
 <script lang="ts" context="module"></script>
 
-<script lang="ts" generics="T">import { mergeProps } from "@zag-js/svelte";
-import { nanoid } from "nanoid/non-secure";
+<script lang="ts" generics="T">import { uuid } from "../utils.svelte.js";
+import { mergeProps } from "@zag-js/svelte";
 import { createComboboxContext, setComboboxContext } from "./context.svelte.js";
 let {
-  id = nanoid(),
+  id = uuid(),
   ids,
   dir,
   name,

package/dist/dialog/root.svelte

@@ -1,8 +1,8 @@
 <script lang="ts" context="module"></script>
 
-<script lang="ts">import { nanoid } from "nanoid/non-secure";
+<script lang="ts">import { uuid } from "../utils.svelte.js";
 import { createDialogContext, setDialogContext } from "./context.svelte.js";
-let { id = nanoid(), children, ...props } = $props();
+let { id = uuid(), children, ...props } = $props();
 let context = createDialogContext({ id, ...props });
 setDialogContext(context);
 </script>

package/dist/hover-card/root.svelte

@@ -1,8 +1,8 @@
 <script lang="ts" context="module"></script>
 
-<script lang="ts">import { nanoid } from "nanoid/non-secure";
+<script lang="ts">import { uuid } from "../utils.svelte.js";
 import { createHoverCardContext, setHoverCardContext } from "./context.svelte.js";
-let { id = nanoid(), children, ...props } = $props();
+let { id = uuid(), children, ...props } = $props();
 let context = createHoverCardContext({ id, ...props });
 setHoverCardContext(context);
 </script>

package/dist/number-input/root.svelte

@@ -1,10 +1,10 @@
 <script lang="ts" context="module"></script>
 
-<script lang="ts">import { mergeProps } from "@zag-js/svelte";
-import { nanoid } from "nanoid/non-secure";
+<script lang="ts">import { uuid } from "../utils.svelte.js";
+import { mergeProps } from "@zag-js/svelte";
 import { createNumberInputContext, setNumberInputContext } from "./context.svelte.js";
 let {
-  id = nanoid(),
+  id = uuid(),
   ids,
   dir,
   max,

package/dist/pagination/root.svelte

@@ -1,10 +1,10 @@
 <script lang="ts" context="module"></script>
 
-<script lang="ts">import { mergeProps } from "@zag-js/svelte";
-import { nanoid } from "nanoid/non-secure";
+<script lang="ts">import { uuid } from "../utils.svelte.js";
+import { mergeProps } from "@zag-js/svelte";
 import { createPaginationContext, setPaginationContext } from "./context.svelte.js";
 let {
-  id = nanoid(),
+  id = uuid(),
   ids,
   dir,
   type,

package/dist/pin-input/root.svelte

@@ -1,10 +1,10 @@
 <script lang="ts" context="module"></script>
 
-<script lang="ts">import { mergeProps } from "@zag-js/svelte";
-import { nanoid } from "nanoid/non-secure";
+<script lang="ts">import { uuid } from "../utils.svelte.js";
+import { mergeProps } from "@zag-js/svelte";
 import { createPinInputContext, setPinInputContext } from "./context.svelte.js";
 let {
-  id = nanoid(),
+  id = uuid(),
   ids,
   dir,
   otp,

package/dist/popover/root.svelte

@@ -1,8 +1,8 @@
 <script lang="ts" context="module"></script>
 
-<script lang="ts">import { nanoid } from "nanoid/non-secure";
+<script lang="ts">import { uuid } from "../utils.svelte.js";
 import { createPopoverContext, setPopoverContext } from "./context.svelte.js";
-let { id = nanoid(), children, ...props } = $props();
+let { id = uuid(), children, ...props } = $props();
 let context = createPopoverContext({ id, ...props });
 setPopoverContext(context);
 </script>

package/dist/progress/root.svelte

@@ -1,10 +1,10 @@
 <script lang="ts" context="module"></script>
 
-<script lang="ts">import { mergeProps } from "@zag-js/svelte";
-import { nanoid } from "nanoid/non-secure";
+<script lang="ts">import { uuid } from "../utils.svelte.js";
+import { mergeProps } from "@zag-js/svelte";
 import { createProgressContext, setProgressContext } from "./context.svelte.js";
 let {
-  id = nanoid(),
+  id = uuid(),
   ids,
   dir,
   max,

package/dist/radio-group/root.svelte

@@ -1,10 +1,10 @@
 <script lang="ts" context="module"></script>
 
-<script lang="ts">import { mergeProps } from "@zag-js/svelte";
-import { nanoid } from "nanoid/non-secure";
+<script lang="ts">import { uuid } from "../utils.svelte.js";
+import { mergeProps } from "@zag-js/svelte";
 import { createRadioGroupContext, setRadioGroupContext } from "./context.svelte.js";
 let {
-  id = nanoid(),
+  id = uuid(),
   ids,
   dir,
   form,

package/dist/select/item-group.svelte

@@ -1,9 +1,9 @@
 <script lang="ts" context="module"></script>
 
-<script lang="ts">import { mergeProps } from "@zag-js/svelte";
-import { nanoid } from "nanoid/non-secure";
+<script lang="ts">import { uuid } from "../utils.svelte.js";
+import { mergeProps } from "@zag-js/svelte";
 import { setSelectItemGroupContext, useSelectContext } from "./context.svelte.js";
-let { id = nanoid(), children, ...props } = $props();
+let { id = uuid(), children, ...props } = $props();
 let context = useSelectContext();
 let attrs = $derived(mergeProps(props, context.getItemGroupProps({ id })));
 setSelectItemGroupContext({ id });

package/dist/select/root.svelte

@@ -1,10 +1,10 @@
 <script lang="ts" context="module"></script>
 
-<script lang="ts" generics="T">import { mergeProps } from "@zag-js/svelte";
-import { nanoid } from "nanoid/non-secure";
+<script lang="ts" generics="T">import { uuid } from "../utils.svelte.js";
+import { mergeProps } from "@zag-js/svelte";
 import { createSelectContext, setSelectContext } from "./context.svelte.js";
 let {
-  id = nanoid(),
+  id = uuid(),
   ids,
   dir,
   form,

package/dist/slider/root.svelte

@@ -1,10 +1,10 @@
 <script lang="ts" context="module"></script>
 
-<script lang="ts">import { mergeProps } from "@zag-js/svelte";
-import { nanoid } from "nanoid/non-secure";
+<script lang="ts">import { uuid } from "../utils.svelte.js";
+import { mergeProps } from "@zag-js/svelte";
 import { createSliderContext, setSliderContext } from "./context.svelte.js";
 let {
-  id = nanoid(),
+  id = uuid(),
   ids,
   dir,
   max,

package/dist/switch/root.svelte

@@ -1,10 +1,10 @@
 <script lang="ts" context="module"></script>
 
-<script lang="ts">import { mergeProps } from "@zag-js/svelte";
-import { nanoid } from "nanoid/non-secure";
+<script lang="ts">import { uuid } from "../utils.svelte.js";
+import { mergeProps } from "@zag-js/svelte";
 import { createSwitchContext, setSwitchContext } from "./context.svelte.js";
 let {
-  id = nanoid(),
+  id = uuid(),
   ids,
   dir,
   form,

package/dist/tabs/root.svelte

@@ -1,10 +1,10 @@
 <script lang="ts" context="module"></script>
 
-<script lang="ts">import { mergeProps } from "@zag-js/svelte";
-import { nanoid } from "nanoid/non-secure";
+<script lang="ts">import { uuid } from "../utils.svelte.js";
+import { mergeProps } from "@zag-js/svelte";
 import { createTabsContext, setTabsContext } from "./context.svelte.js";
 let {
-  id = nanoid(),
+  id = uuid(),
   ids,
   dir,
   value,

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

@@ -1,8 +1,8 @@
+import { uuid } from '../utils.svelte.js';
 import { normalizeProps, reflect } from '@zag-js/svelte';
 import * as toast from '@zag-js/toast';
-import { nanoid } from 'nanoid/non-secure';
 export default function createToaster(props) {
-    const id = $derived(props?.id ?? nanoid());
+    const id = $derived(props?.id ?? uuid());
     const machine = $derived(toast.group.machine({ ...props, id }));
     const api = $derived(reflect(() => ({
         machine,

package/dist/toggle-group/root.svelte

@@ -1,10 +1,10 @@
 <script lang="ts" context="module"></script>
 
-<script lang="ts">import { mergeProps } from "@zag-js/svelte";
-import { nanoid } from "nanoid/non-secure";
+<script lang="ts">import { uuid } from "../utils.svelte.js";
+import { mergeProps } from "@zag-js/svelte";
 import { createToggleGroupContext, setToggleGroupContext } from "./context.svelte.js";
 let {
-  id = nanoid(),
+  id = uuid(),
   ids,
   dir,
   value,
@@ -19,7 +19,7 @@ let {
   ...props
 } = $props();
 let context = createToggleGroupContext({
-  id: nanoid(),
+  id,
   ids,
   dir,
   value: $state.snapshot(value),

package/dist/tooltip/root.svelte

@@ -1,8 +1,8 @@
 <script lang="ts" context="module"></script>
 
-<script lang="ts">import { nanoid } from "nanoid/non-secure";
+<script lang="ts">import { uuid } from "../utils.svelte.js";
 import { createTooltipContext, setTooltipContext } from "./context.svelte.js";
-let { id = nanoid(), children, ...props } = $props();
+let { id = uuid(), children, ...props } = $props();
 let context = createTooltipContext({ id, ...props });
 setTooltipContext(context);
 </script>

package/dist/types.d.ts

@@ -1,5 +1,4 @@
 export type Assign<T, U> = Omit<T, keyof U> & U;
-export type ContextGetter<T> = () => T;
 export type OptionalId<T> = Assign<T, {
     id?: string;
 }>;

package/dist/utils.svelte.d.ts

@@ -1,2 +1 @@
-export declare function makeFieldsGetterSetterIfNotFunc<T extends Record<string, any>>(o: T): T;
-export declare function splitProps(): void;
+export declare const uuid: () => string;

package/dist/utils.svelte.js

@@ -1,24 +1,3 @@
-export function makeFieldsGetterSetterIfNotFunc(o) {
-    let r = {};
-    for (const k in o) {
-        const v = o[k];
-        if (typeof v === 'function') {
-            r = Object.assign(r, {
-                [k](...args) {
-                    return v(...args);
-                },
-            });
-            continue;
-        }
-        r = Object.assign(r, {
-            get [k]() {
-                return v;
-            },
-            set [k](v) {
-                o[k] = v;
-            },
-        });
-    }
-    return r;
-}
-export function splitProps() { }
+import hyperid from 'hyperid';
+const h = hyperid();
+export const uuid = () => h.uuid;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ui-ingredients",
   "type": "module",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "packageManager": "pnpm@9.7.0",
   "svelte": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -24,6 +24,10 @@
     "type": "git",
     "url": "git@github.com:calvo-jp/ui-ingredients.git"
   },
+  "bugs": {
+    "url": "https://github.com/calvo-jp/ui-ingredients/issues",
+    "email": "calvojp92@gmail.com"
+  },
   "description": "Headless component library for Svelte powered by zag",
   "keywords": [
     "Svelte",
@@ -118,7 +122,7 @@
     "@zag-js/toast": "0.65.0",
     "@zag-js/toggle-group": "0.65.0",
     "@zag-js/tooltip": "0.65.0",
-    "nanoid": "5.0.7"
+    "hyperid": "3.2.0"
   },
   "peerDependencies": {
     "svelte": ">=5.0.0-next.200"