@vuetify/v0 0.1.9 → 0.1.11

package/dist/{useTheme-Cs79AFNR.mjs → useTheme-QFLbV6tH.mjs}

@@ -1,7 +1,8 @@
-import { o as createPluginContext } from "./useLogger-cGK00Ywd.mjs";
-import { t as createTokens } from "./createTokens-C1gIuKCK.mjs";
-import { t as createSingle } from "./createSingle-CeAJpbXs.mjs";
-import { t as Vuetify0ThemeAdapter } from "./v0-Zu7neOYg.mjs";
+import { foreground } from "./utilities/index.mjs";
+import { o as createPluginContext } from "./useLogger-xp_tiLJ5.mjs";
+import { r as flatten, t as createTokens } from "./createTokens-vyh3quuB.mjs";
+import { t as createSingle } from "./createSingle-CqX-KXFr.mjs";
+import { t as Vuetify0ThemeAdapter } from "./v0-AoEx-7U5.mjs";
 import { computed, shallowRef, toRef } from "vue";
 //#region src/composables/useTheme/index.ts
 /**
@@ -57,7 +58,7 @@ import { computed, shallowRef, toRef } from "vue";
 * ```
 */
 function createTheme(_options = {}) {
-	const { themes = {}, palette = {}, ...options } = _options;
+	const { themes = {}, palette = {}, foreground: genForeground, ...options } = _options;
 	const tokens = createTokens({
 		palette,
 		...themes
@@ -77,7 +78,12 @@ function createTheme(_options = {}) {
 		const resolved = {};
 		for (const theme of registry.values()) {
 			if (theme.lazy && theme.id !== registry.selectedId.value) continue;
-			resolved[theme.id] = resolve(theme.value);
+			const themeColors = resolve(theme.value);
+			if (genForeground) for (const [key, value] of Object.entries(themeColors)) {
+				const onKey = `on-${key}`;
+				if (!key.startsWith("on-") && !(onKey in themeColors)) themeColors[onKey] = foreground(value);
+			}
+			resolved[theme.id] = themeColors;
 		}
 		return resolved;
 	});
@@ -93,10 +99,13 @@ function createTheme(_options = {}) {
 		return resolved;
 	}
 	function register(registration = {}) {
+		const { colors, ...rest } = registration;
+		if (colors && rest.id && !registry.has(rest.id)) tokens.onboard(flatten({ [rest.id]: { colors } }, "", true));
 		const item = {
 			lazy: false,
 			dark: false,
-			...registration
+			...rest,
+			...colors ? { value: colors } : {}
 		};
 		return registry.register(item);
 	}
@@ -125,7 +134,8 @@ function createThemeFallback() {
 }
 const [createThemeContext, createThemePlugin, useTheme] = createPluginContext("v0:theme", (options) => createTheme(options), {
 	fallback: () => createThemeFallback(),
-	setup: (context, app, { adapter = new Vuetify0ThemeAdapter(), target }) => {
+	setup: (context, app, { adapter = new Vuetify0ThemeAdapter(), target, rgb }) => {
+		if (rgb) adapter.rgb = true;
 		adapter.setup(app, context, target);
 	}
 });

package/dist/utilities/index.d.mts

@@ -1,2 +1,2 @@
-import { _ as isUndefined, a as isArray, b as useId, c as isFunction, d as isNullOrUndefined, f as isNumber, g as isSymbol, h as isString, i as debounce, l as isNaN, m as isPrimitive, n as instanceName, o as isBoolean, p as isObject, r as clamp, s as isElement, t as instanceExists, u as isNull, v as mergeDeep, y as range } from "../index-BL4uTXWQ.mjs";
-export { clamp, debounce, instanceExists, instanceName, isArray, isBoolean, isElement, isFunction, isNaN, isNull, isNullOrUndefined, isNumber, isObject, isPrimitive, isString, isSymbol, isUndefined, mergeDeep, range, useId };
+import { C as hexToRgb, S as RGB, _ as mergeDeep, a as isBoolean, b as apca, c as isNaN, d as isNumber, f as isObject, g as isUndefined, h as isSymbol, i as isArray, l as isNull, m as isString, n as instanceName, o as isElement, p as isPrimitive, r as clamp, s as isFunction, t as instanceExists, u as isNullOrUndefined, v as range, w as rgbToHex, x as foreground, y as useId } from "../index-Dlz-FzrC.mjs";
+export { RGB, apca, clamp, foreground, hexToRgb, instanceExists, instanceName, isArray, isBoolean, isElement, isFunction, isNaN, isNull, isNullOrUndefined, isNumber, isObject, isPrimitive, isString, isSymbol, isUndefined, mergeDeep, range, rgbToHex, useId };

package/dist/utilities/index.mjs

@@ -1,6 +1,104 @@
-import { t as IN_BROWSER } from "../globals-3i9umzyz.mjs";
+import { t as IN_BROWSER } from "../globals-TLLuB8XQ.mjs";
 import * as Vue from "vue";
 import { useId as useId$1 } from "vue";
+//#region src/utilities/color.ts
+function hexToRgb(hex) {
+	const clean = hex.startsWith("#") ? hex.slice(1) : hex;
+	if (clean.length === 3 || clean.length === 4) {
+		const r = Number.parseInt(clean[0] + clean[0], 16);
+		const g = Number.parseInt(clean[1] + clean[1], 16);
+		const b = Number.parseInt(clean[2] + clean[2], 16);
+		const a = clean.length === 4 ? Number.parseInt(clean[3] + clean[3], 16) : void 0;
+		return a === void 0 ? {
+			r,
+			g,
+			b
+		} : {
+			r,
+			g,
+			b,
+			a
+		};
+	}
+	const r = Number.parseInt(clean.slice(0, 2), 16);
+	const g = Number.parseInt(clean.slice(2, 4), 16);
+	const b = Number.parseInt(clean.slice(4, 6), 16);
+	const a = clean.length === 8 ? Number.parseInt(clean.slice(6, 8), 16) : void 0;
+	return a === void 0 ? {
+		r,
+		g,
+		b
+	} : {
+		r,
+		g,
+		b,
+		a
+	};
+}
+function rgbToHex({ r, g, b, a }) {
+	const hex = "#" + [
+		r,
+		g,
+		b
+	].map((c) => c.toString(16).padStart(2, "0")).join("");
+	if (a !== void 0) return hex + a.toString(16).padStart(2, "0");
+	return hex;
+}
+//#endregion
+//#region src/utilities/apca.ts
+const Rco = .2126729;
+const Gco = .7151522;
+const Bco = .072175;
+const normBG = .56;
+const normTXT = .57;
+const revBG = .65;
+const revTXT = .62;
+const blkThrs = .022;
+const blkClmp = 1.414;
+const scaleBoW = 1.14;
+const scaleWoB = 1.14;
+const loBoWoffset = .027;
+const loWoBoffset = .027;
+const deltaYmin = 5e-4;
+function linearize(channel) {
+	const val = channel / 255;
+	return val <= .04045 ? val / 12.92 : Math.pow((val + .055) / 1.055, 2.4);
+}
+function luminance(rgb) {
+	return Rco * linearize(rgb.r) + Gco * linearize(rgb.g) + Bco * linearize(rgb.b);
+}
+function clamp$1(y) {
+	return y > blkThrs ? y : y + Math.pow(blkThrs - y, blkClmp);
+}
+function apca(text, background) {
+	const txtY = clamp$1(luminance(text));
+	const bgY = clamp$1(luminance(background));
+	if (Math.abs(bgY - txtY) < deltaYmin) return 0;
+	let contrast;
+	if (bgY > txtY) {
+		contrast = (Math.pow(bgY, normBG) - Math.pow(txtY, normTXT)) * scaleBoW;
+		return contrast < loBoWoffset ? 0 : (contrast - loBoWoffset) * 100;
+	} else {
+		contrast = (Math.pow(bgY, revBG) - Math.pow(txtY, revTXT)) * scaleWoB;
+		return contrast > -loWoBoffset ? 0 : (contrast + loWoBoffset) * 100;
+	}
+}
+const BLACK = {
+	r: 0,
+	g: 0,
+	b: 0
+};
+const WHITE = {
+	r: 255,
+	g: 255,
+	b: 255
+};
+function foreground(hex) {
+	const rgb = hexToRgb(hex);
+	const onWhite = Math.abs(apca(WHITE, rgb));
+	return Math.abs(apca(BLACK, rgb)) > onWhite ? "#000000" : "#ffffff";
+}
+//#endregion
 //#region src/utilities/instance.ts
 /**
 * Vue 3.6+ exposes `currentInstance` for Vapor mode compatibility.
@@ -282,14 +380,14 @@ function isNaN(item) {
 	return /* @__PURE__ */ isNumber(item) && Number.isNaN(item);
 }
 /**
-* Deeply merges source objects into a target object
+* Deeply merges source objects into a target object, returning a new object
 *
-* @param target The target object to merge into (will be mutated)
+* @param target The base object to merge into
 * @param sources One or more source objects to merge from
-* @returns The mutated target object
+* @returns A new merged object (inputs are not mutated)
 *
 * @remarks
-* - Mutates the target object in place
+* - Creates and returns a new object — inputs are never mutated
 * - Nested objects are recursively merged
 * - Arrays are replaced, not merged
 * - Primitives from sources overwrite target values
@@ -297,8 +395,9 @@ function isNaN(item) {
 * @example
 * ```ts
 * const target = { a: 1, b: { c: 2 } }
-* mergeDeep(target, { b: { d: 3 } })
-* // target is now { a: 1, b: { c: 2, d: 3 } }
+* const result = mergeDeep(target, { b: { d: 3 } })
+* // result is { a: 1, b: { c: 2, d: 3 } }
+* // target is unchanged
 *
 * // Multiple sources
 * mergeDeep({}, { a: 1 }, { b: 2 }) // { a: 1, b: 2 }
@@ -314,20 +413,20 @@ const UNSAFE_KEYS = new Set([
 ]);
 /* @__NO_SIDE_EFFECTS__ */
 function mergeDeep(target, ...sources) {
-	if (sources.length === 0) return target;
-	const source = sources.shift();
-	if (/* @__PURE__ */ isObject(target) && /* @__PURE__ */ isObject(source)) for (const key in source) {
-		if (UNSAFE_KEYS.has(key)) continue;
-		if (!Object.prototype.hasOwnProperty.call(source, key)) continue;
-		const sourceValue = source[key];
-		if (/* @__PURE__ */ isUndefined(sourceValue)) continue;
-		const targetValue = target[key];
-		if (/* @__PURE__ */ isObject(sourceValue)) {
-			if (!/* @__PURE__ */ isObject(targetValue)) Object.assign(target, { [key]: {} });
-			target[key];
-		} else Object.assign(target, { [key]: sourceValue });
+	const out = {};
+	for (const key in target) if (Object.prototype.hasOwnProperty.call(target, key)) out[key] = target[key];
+	for (const source of sources) {
+		if (!/* @__PURE__ */ isObject(source)) continue;
+		for (const key in source) {
+			if (UNSAFE_KEYS.has(key)) continue;
+			if (!Object.prototype.hasOwnProperty.call(source, key)) continue;
+			const sourceValue = source[key];
+			if (/* @__PURE__ */ isUndefined(sourceValue)) continue;
+			const targetValue = out[key];
+			out[key] = /* @__PURE__ */ isObject(sourceValue) && /* @__PURE__ */ isObject(targetValue) ? /* @__PURE__ */ mergeDeep(targetValue, sourceValue) : sourceValue;
+		}
 	}
-	return /* @__PURE__ */ mergeDeep(target, ...sources);
+	return out;
 }
 let idCounter = 0;
 /**
@@ -393,35 +492,5 @@ function clamp(value, min = 0, max = 1) {
 function range(length, start = 0) {
 	return Array.from({ length }, (_, index) => start + index);
 }
-/**
-* Debounces a function call by the specified delay
-*
-* @param fn The function to debounce
-* @param delay The delay in milliseconds
-* @returns A debounced function with clear and immediate methods
-*
-* @example
-* ```ts
-* const debouncedFn = debounce(() => console.log('called'), 500)
-* debouncedFn()        // Will call after 500ms
-* debouncedFn.clear()  // Cancel pending call
-* debouncedFn.immediate() // Call immediately
-* ```
-*/
-function debounce(fn, delay) {
-	let timeoutId;
-	function debounced(...args) {
-		if (!/* @__PURE__ */ isUndefined(timeoutId)) clearTimeout(timeoutId);
-		timeoutId = setTimeout(() => fn(...args), delay);
-	}
-	debounced.clear = () => {
-		if (!/* @__PURE__ */ isUndefined(timeoutId)) clearTimeout(timeoutId);
-	};
-	debounced.immediate = (...args) => {
-		debounced.clear();
-		fn(...args);
-	};
-	return debounced;
-}
 //#endregion
-export { clamp, debounce, instanceExists, instanceName, isArray, isBoolean, isElement, isFunction, isNaN, isNull, isNullOrUndefined, isNumber, isObject, isPrimitive, isString, isSymbol, isUndefined, mergeDeep, range, useId };
+export { apca, clamp, foreground, hexToRgb, instanceExists, instanceName, isArray, isBoolean, isElement, isFunction, isNaN, isNull, isNullOrUndefined, isNumber, isObject, isPrimitive, isString, isSymbol, isUndefined, mergeDeep, range, rgbToHex, useId };

package/dist/{v0-Zu7neOYg.mjs → v0-AoEx-7U5.mjs}

@@ -1,10 +1,11 @@
-import { t as IN_BROWSER } from "./globals-3i9umzyz.mjs";
-import { isNull, isString, isUndefined } from "./utilities/index.mjs";
+import { t as IN_BROWSER } from "./globals-TLLuB8XQ.mjs";
+import { hexToRgb, isNull, isString, isUndefined } from "./utilities/index.mjs";
 import { onScopeDispose, watch } from "vue";
 //#region src/composables/useTheme/adapters/adapter.ts
 var ThemeAdapter = class {
 	stylesheetId = "v0-theme-stylesheet";
 	prefix;
+	rgb = false;
 	constructor(prefix) {
 		this.prefix = prefix;
 	}
@@ -13,12 +14,16 @@ var ThemeAdapter = class {
 		for (const theme in colors) {
 			const themeColors = colors[theme];
 			if (!themeColors) continue;
-			const vars = Object.entries(themeColors).map(([key, val]) => `  --${this.prefix}-${key}: ${val};`).join("\n");
+			const vars = Object.entries(themeColors).map(([key, val]) => `  --${this.prefix}-${key}: ${this.rgb ? this.decompose(val) : val};`).join("\n");
 			css += `[data-theme="${theme}"] {\n${vars}\n}\n`;
 		}
 		if (!/* @__PURE__ */ isUndefined(isDark)) css += `:root {\n  color-scheme: ${isDark ? "dark" : "light"};\n}\n`;
 		return css;
 	}
+	decompose(hex) {
+		const { r, g, b, a } = hexToRgb(hex);
+		return /* @__PURE__ */ isUndefined(a) ? `${r}, ${g}, ${b}` : `${r}, ${g}, ${b}, ${a}`;
+	}
 };
 //#endregion
 //#region src/composables/useTheme/adapters/v0.ts

package/dist/{v0-JPf99NKg.d.mts → v0-BdhPBG_p.d.mts}

@@ -1,4 +1,4 @@
-import { t as LoggerAdapter } from "./adapter-CJQav2JB.mjs";
+import { t as LoggerAdapter } from "./adapter-DcJbLnTC.mjs";
 
 //#region src/composables/useLogger/adapters/v0.d.ts
 /**

package/dist/{v0-BdD1F6JK.d.mts → v0-CItl0K-e.d.mts}

@@ -1,4 +1,4 @@
-import { n as LocaleAdapterContext, t as LocaleAdapter } from "./adapter-CWp5eQ6R.mjs";
+import { n as LocaleAdapterContext, t as LocaleAdapter } from "./adapter-CN3E66HY.mjs";
 
 //#region src/composables/useLocale/adapters/v0.d.ts
 /**

package/dist/{v0-CehUknHv.mjs → v0-CkxwC3wm.mjs}

@@ -1,4 +1,4 @@
-import { t as IN_BROWSER } from "./globals-3i9umzyz.mjs";
+import { t as IN_BROWSER } from "./globals-TLLuB8XQ.mjs";
 import { isObject, isString, isUndefined } from "./utilities/index.mjs";
 //#region src/composables/useLocale/adapters/v0.ts
 /**

package/dist/{v0-BJYwZgtp.mjs → v0-Di7YUWAH.mjs}

@@ -1,4 +1,4 @@
-import { t as IN_BROWSER } from "./globals-3i9umzyz.mjs";
+import { t as IN_BROWSER } from "./globals-TLLuB8XQ.mjs";
 import { isFunction } from "./utilities/index.mjs";
 //#region src/composables/useLogger/adapters/v0.ts
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vuetify/v0",
-  "version": "0.1.9",
+  "version": "0.1.11",
   "description": "A meta UI framework for building applications, component libraries, and design systems with Vue 3",
   "license": "MIT",
   "types": "./dist/index.d.mts",

package/dist/v0-DFAgNbvC.d.mts

@@ -1,10 +0,0 @@
-import { o as ID } from "./index-Dor6eAEc.mjs";
-import { en as PermissionContext, in as PermissionTicket, ln as PermissionAdapter } from "./index-D0qnkRbl.mjs";
-
-//#region src/composables/usePermissions/adapters/v0.d.ts
-declare class Vuetify0PermissionAdapter extends PermissionAdapter {
-  constructor();
-  can<Z extends PermissionTicket = PermissionTicket>(role: ID, action: string, subject: string, context: Record<string, any>, permissions: PermissionContext<Z>): boolean;
-}
-//#endregion
-export { Vuetify0PermissionAdapter as t };