uisv 0.0.21 → 0.0.23

package/dist/utilities/useRafFn.svelte.js

@@ -0,0 +1,56 @@
+/**
+ * Call function on every `requestAnimationFrame`. With controls of pausing and resuming.
+ *
+ * @see https://vueuse.org/useRafFn
+ * @param fn
+ * @param options
+ */
+export function useRafFn(fn, options = {}) {
+    const { immediate = true, fpslimit = -1, once = false } = options;
+    let is_active = $state(false);
+    const interval_limit = $derived.by(() => {
+        return fpslimit ? 1000 / fpslimit : null;
+    });
+    let previousFrameTimestamp = 0;
+    let rafId = null;
+    function loop(timestamp) {
+        if (!is_active || !window)
+            return;
+        if (!previousFrameTimestamp)
+            previousFrameTimestamp = timestamp;
+        const delta = timestamp - previousFrameTimestamp;
+        if (interval_limit && delta < interval_limit) {
+            rafId = window.requestAnimationFrame(loop);
+            return;
+        }
+        previousFrameTimestamp = timestamp;
+        fn({ delta, timestamp });
+        if (once) {
+            is_active = false;
+            rafId = null;
+            return;
+        }
+        rafId = window.requestAnimationFrame(loop);
+    }
+    function resume() {
+        if (!is_active && window) {
+            is_active = true;
+            previousFrameTimestamp = 0;
+            rafId = window.requestAnimationFrame(loop);
+        }
+    }
+    function pause() {
+        is_active = false;
+        if (rafId != null && window) {
+            window.cancelAnimationFrame(rafId);
+            rafId = null;
+        }
+    }
+    if (immediate)
+        resume();
+    return {
+        is_active,
+        pause,
+        resume,
+    };
+}

package/dist/utilities/useStyle.svelte.d.ts

@@ -0,0 +1,8 @@
+import { type MaybeGetter } from 'runed';
+/**
+ * Inject reactive style element in head.
+ * @param css string
+ */
+export declare function useStyle(css: MaybeGetter<string>): {
+    id: string;
+};

package/dist/utilities/useStyle.svelte.js

@@ -0,0 +1,21 @@
+import { extract } from 'runed';
+let uisv_usestyle_id = 0;
+/**
+ * Inject reactive style element in head.
+ * @param css string
+ */
+export function useStyle(css) {
+    const id = `uisv_styletag_${++uisv_usestyle_id}`;
+    let el = $state();
+    $effect(() => {
+        if (!el) {
+            el = (document.getElementById(id) || document.createElement('style'));
+            if (!el.isConnected) {
+                el.id = id;
+                document.head.appendChild(el);
+            }
+        }
+        el.textContent = extract(css);
+    });
+    return { id };
+}

package/dist/vite.js

@@ -1,8 +1,10 @@
-import uno_plugin from 'unocss/vite';
 import { transformerVariantGroup, transformerCompileClass, transformerDirectives, presetWebFonts, presetIcons, presetWind4, } from 'unocss';
 import {} from '@unocss/preset-web-fonts';
 import { defu } from 'defu';
 import { getColors } from 'theme-colors';
+// import type { Plugin } from 'vite';
+// import { resolve } from 'node:path';
+import uno_plugin from 'unocss/vite';
 export default (options = {}) => {
     const _opts = defu(options, {
         colors: {
@@ -38,17 +40,6 @@ export default (options = {}) => {
             },
         },
     });
-    // const theme_plugin: Plugin = {
-    // 	name: 'vite-plugin-uisv',
-    // 	enforce: 'pre',
-    // 	async configResolved() {
-    // 		const path = resolve('node_modules/uisv/theme.js');
-    // 		console.log(await write(path, `export const button = {}`));
-    // 	},
-    // 	resolveId(source, importer, options) {
-    // 		if (source === '$build') return resolve('node_modules/uisv/theme.js');
-    // 	},
-    // };
     return [
         uno_plugin({
             content: {
@@ -71,12 +62,12 @@ export default (options = {}) => {
                         if (typeof colors.surface !== 'object')
                             return '';
                         const variables = `
-              --colors-base: ${colors.surface['200']};
-      				--colors-dimmed: ${colors.surface['500']};
-      				--colors-muted: ${colors.surface['400']};
-      				--colors-toned: ${colors.surface['300']};
-      				--colors-highlighted: white;
-      				--colors-inverted: ${colors.surface['900']};
+              --colors-label-base: ${colors.surface['200']};
+      				--colors-label-dimmed: ${colors.surface['500']};
+      				--colors-label-muted: ${colors.surface['400']};
+      				--colors-label-toned: ${colors.surface['300']};
+      				--colors-label-highlighted: white;
+      				--colors-label-inverted: ${colors.surface['900']};
 
       				--colors-surface-base: ${colors.surface['900']};
       				--colors-surface-muted: ${colors.surface['800']};
@@ -86,7 +77,7 @@ export default (options = {}) => {
             `;
                         return `
 						body {
-						  background-color: var(--colors-inverted);
+						  background-color: var(--colors-label-inverted);
 						}
 
             .dark {
@@ -109,7 +100,7 @@ export default (options = {}) => {
             transformers: [transformerVariantGroup(), transformerCompileClass(), transformerDirectives()],
             extendTheme: (theme) => {
                 if (!('colors' in theme) || typeof theme.colors !== 'object')
-                    theme.colors = {};
+                    return;
                 const colors = theme.colors;
                 for (const [color, value] of Object.entries(_opts.colors)) {
                     if (typeof value !== 'string') {
@@ -119,21 +110,25 @@ export default (options = {}) => {
                     const in_theme = colors[value];
                     colors[color] = in_theme ? in_theme : getColors(value);
                 }
-                if (typeof colors.surface === 'object') {
-                    colors['base'] = colors.surface['700'];
-                    colors['dimmed'] = colors.surface['400'];
-                    colors['muted'] = colors.surface['500'];
-                    colors['toned'] = colors.surface['600'];
-                    colors['highlighted'] = colors.surface['900'];
-                    colors['inverted'] = 'white';
-                    colors['surface'] = defu(colors.surface, {
-                        base: 'white',
-                        muted: colors.surface['50'],
-                        elevated: colors.surface['100'],
-                        accented: colors.surface['200'],
-                        inverted: colors.surface['900'],
-                    });
-                }
+                if (typeof colors.surface !== 'object')
+                    colors.surface = {};
+                if (typeof colors.label === 'object')
+                    colors.label = {};
+                colors.label = defu(colors.label, {
+                    base: colors.surface['700'],
+                    dimmed: colors.surface['400'],
+                    muted: colors.surface['500'],
+                    toned: colors.surface['600'],
+                    highlighted: colors.surface['900'],
+                    inverted: 'white',
+                });
+                colors['surface'] = defu(colors.surface, {
+                    base: 'white',
+                    muted: colors.surface['50'],
+                    elevated: colors.surface['100'],
+                    accented: colors.surface['200'],
+                    inverted: colors.surface['900'],
+                });
                 if (theme.colors)
                     theme.colors = colors;
             },

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "uisv",
-	"version": "0.0.21",
+	"version": "0.0.23",
 	"description": "ui library for the rest of us",
 	"license": "MIT",
 	"repository": "ui-sv/uisv",
@@ -49,54 +49,66 @@
 			"types": "./dist/mode.d.ts",
 			"svelte": "./dist/mode.js",
 			"default": "./dist/mode.js"
+		},
+		"./contexts": {
+			"types": "./dist/contexts.d.ts",
+			"svelte": "./dist/contexts.js",
+			"default": "./dist/contexts.js"
 		}
 	},
 	"peerDependencies": {
 		"svelte": "^5.0.0"
 	},
 	"devDependencies": {
-		"@eslint/compat": "^2.0.2",
+		"@eslint/compat": "^2.0.5",
 		"@eslint/js": "^10.0.1",
-		"@iconify-json/lucide": "^1.2.90",
+		"@iconify-json/lucide": "^1.2.105",
 		"@sveltejs/adapter-auto": "^7.0.1",
-		"@sveltejs/kit": "^2.52.0",
+		"@sveltejs/kit": "^2.59.1",
 		"@sveltejs/package": "^2.5.7",
 		"@sveltejs/vite-plugin-svelte": "^6.2.4",
-		"@types/node": "^25.2.3",
-		"@vitest/browser": "^4.0.18",
-		"eslint": "^10.0.0",
+		"@types/node": "^25.6.1",
+		"@vitest/browser": "^4.1.5",
+		"eslint": "^10.3.0",
 		"eslint-config-prettier": "^10.1.8",
-		"eslint-plugin-svelte": "^3.15.0",
-		"globals": "^17.3.0",
-		"playwright": "^1.58.2",
-		"prettier": "^3.8.1",
-		"prettier-plugin-svelte": "^3.4.1",
-		"publint": "^0.3.17",
-		"svelte": "^5.51.2",
-		"svelte-check": "^4.4.0",
+		"eslint-plugin-svelte": "^3.17.1",
+		"globals": "^17.6.0",
+		"playwright": "^1.59.1",
+		"prettier": "^3.8.3",
+		"prettier-plugin-svelte": "^3.5.1",
+		"publint": "^0.3.19",
+		"svelte": "^5.55.5",
+		"svelte-check": "^4.4.8",
 		"typescript": "^5.9.3",
-		"typescript-eslint": "^8.55.0",
-		"vite": "^7.3.1",
-		"vitest": "^4.0.18",
-		"vitest-browser-svelte": "^2.0.2"
+		"typescript-eslint": "^8.59.2",
+		"vite": "^7.3.3",
+		"vitest": "^4.1.5",
+		"vitest-browser-svelte": "^2.1.1"
 	},
 	"dependencies": {
-		"@internationalized/date": "^3.11.0",
-		"@unocss/preset-web-fonts": "^66.6.0",
-		"bits-ui": "^2.16.5",
-		"colortranslator": "^5.0.0",
-		"defu": "^6.1.4",
+		"@internationalized/date": "^3.12.1",
+		"@unocss/preset-web-fonts": "^66.6.8",
+		"bits-ui": "^2.18.1",
+		"colortranslator": "^6.1.1",
+		"defu": "^6.1.7",
+		"devalue": "^5.8.0",
 		"maska": "^3.2.0",
+		"mlly": "^1.8.2",
 		"mode-watcher": "^1.1.0",
 		"runed": "^0.37.1",
 		"scule": "^1.3.0",
-		"tailwind-merge": "^3.5.0",
+		"svelte-sonner": "^1.1.1",
+		"svelte-toolbelt": "^0.10.6",
+		"tailwind-merge": "^3.6.0",
 		"tailwind-variants": "^3.2.2",
 		"theme-colors": "^0.1.0",
-		"unocss": "^66.6.0"
+		"unocss": "^66.6.8"
 	},
 	"keywords": [
 		"svelte",
 		"ui"
-	]
+	],
+	"patchedDependencies": {
+		"svelte-sonner@1.1.1": "patches/svelte-sonner@1.1.1.patch"
+	}
 }

package/dist/utilities.svelte.d.ts

@@ -1,31 +0,0 @@
-import type { Component, Snippet } from 'svelte';
-import { type MaybeGetter, type ElementSizeOptions } from 'runed';
-/**
- * Checks if a value is a Svelte component
- * @param v - The value to check
- * @returns true if the value is a component, false otherwise
- */
-export declare function isComponent(v: unknown): v is Component;
-/**
- * Checks if a value is a Svelte snippet
- * @param v - The value to check
- * @returns true if the value is a snippet, false otherwise
- */
-export declare function isSnippet(v: unknown): v is Snippet;
-/**
- * Returns a reactive value holding the dom rect of `node`s.
- *
- * Accepts an `options` object with the following properties:
- * - `initialSize`: The initial size of the element. Defaults to `{ width: 0, height: 0 }`.
- * - `box`: The box model to use. Can be either `"content-box"` or `"border-box"`. Defaults to `"border-box"`.
- *
- * @returns an array of dom rects.
- */
-export declare function useElementRects(nodes: MaybeGetter<HTMLElement[]>, options?: ElementSizeOptions): DOMRect[];
-/**
- * Inject reactive style element in head.
- * @param css string
- */
-export declare function useStyle(css: MaybeGetter<string>): {
-    id: string;
-};