@pie-element/element-theme-daisyui 0.1.0

package/README.md

@@ -0,0 +1,17 @@
+# @pie-element/element-theme-daisyui
+
+DaisyUI-focused theme wrapper package for PIE players.
+
+## Custom element
+
+- `pie-element-theme-daisyui`
+
+## Usage
+
+```html
+<pie-element-theme-daisyui theme="dark">
+  <pie-element-player element-name="hotspot"></pie-element-player>
+</pie-element-theme-daisyui>
+```
+
+This package intentionally ships DaisyUI utilities (`extract`, `convert`, `colors`) and does not include React hooks.

package/dist/pie-element-theme-daisyui.js

@@ -0,0 +1,156 @@
+import { PieElementThemeElement as e } from "@pie-element/element-theme";
+//#region src/theme-element-daisyui.ts
+var t = class extends e {
+	resolveDataTheme(e) {
+		return e;
+	}
+};
+function n() {
+	typeof customElements > "u" || customElements.get("pie-element-theme-daisyui") || customElements.define("pie-element-theme-daisyui", t);
+}
+//#endregion
+//#region src/extract.ts
+function r(e) {
+	if (!(typeof document > "u" || typeof window > "u")) try {
+		let t = e?.element || document.documentElement, n = getComputedStyle(t), r = n.color, i = n.backgroundColor, a = document.createElement("div");
+		a.style.cssText = "position:absolute;visibility:hidden;pointer-events:none", document.body.appendChild(a);
+		let o = (e, t = "color") => (a.className = e, getComputedStyle(a)[t]), s = {
+			"base-content": r,
+			"base-100": i,
+			"base-200": o("bg-base-200", "backgroundColor"),
+			"base-300": o("bg-base-300", "backgroundColor"),
+			primary: o("text-primary"),
+			secondary: o("text-secondary"),
+			accent: o("text-accent"),
+			neutral: o("text-neutral"),
+			success: o("text-success"),
+			error: o("text-error"),
+			warning: o("text-warning"),
+			info: o("text-info")
+		};
+		return document.body.removeChild(a), s;
+	} catch {
+		return;
+	}
+}
+function i(e, t) {
+	if (typeof document > "u" || typeof MutationObserver > "u") return () => {};
+	let n = t?.element || document.documentElement, i = new MutationObserver((t) => {
+		for (let i of t) if (i.type === "attributes" && i.attributeName === "data-theme") {
+			e(r({ element: n }));
+			break;
+		}
+	});
+	return i.observe(n, {
+		attributes: !0,
+		attributeFilter: ["data-theme"]
+	}), () => i.disconnect();
+}
+function a(e) {
+	if (!(typeof document > "u")) return (e || document.documentElement).getAttribute("data-theme") || void 0;
+}
+function o(e, t) {
+	typeof document > "u" || (t || document.documentElement).setAttribute("data-theme", e);
+}
+//#endregion
+//#region src/colors.ts
+function s(e) {
+	let t = e.replace(/^#/, "");
+	return t.length === 3 ? {
+		r: parseInt(t[0] + t[0], 16),
+		g: parseInt(t[1] + t[1], 16),
+		b: parseInt(t[2] + t[2], 16)
+	} : t.length === 6 ? {
+		r: parseInt(t.substring(0, 2), 16),
+		g: parseInt(t.substring(2, 4), 16),
+		b: parseInt(t.substring(4, 6), 16)
+	} : null;
+}
+function c(e) {
+	let t = e.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/);
+	return t ? {
+		r: parseInt(t[1], 10),
+		g: parseInt(t[2], 10),
+		b: parseInt(t[3], 10)
+	} : null;
+}
+function l(e) {
+	let t = e.match(/oklch\(([\d.]+)\s+([\d.]+)\s+([\d.]+)/);
+	if (!t) return null;
+	let n = Math.max(0, Math.min(1, parseFloat(t[1]))), r = parseFloat(t[2]), i = parseFloat(t[3]) % 360;
+	i < 0 && (i += 360);
+	let a = i * Math.PI / 180, o = r * Math.cos(a), s = r * Math.sin(a), c = n + .3963377774 * o + .2158037573 * s, l = n - .1055613458 * o - .0638541728 * s, u = n - .0894841775 * o - 1.291485548 * s, d = c * c * c, f = l * l * l, p = u * u * u, m = 4.0767416621 * d - 3.3077115913 * f + .2309699292 * p, h = -1.2684380046 * d + 2.6097574011 * f - .3413193965 * p, g = -.0041960863 * d - .7034186147 * f + 1.707614701 * p, _ = (e) => (e = Math.max(0, Math.min(1, e)), e <= .0031308 ? 12.92 * e : 1.055 * e ** (1 / 2.4) - .055);
+	return m = Math.round(_(m) * 255), h = Math.round(_(h) * 255), g = Math.round(_(g) * 255), {
+		r: m,
+		g: h,
+		b: g
+	};
+}
+function u(e) {
+	return e.startsWith("#") ? s(e) : e.startsWith("rgb") ? c(e) : e.startsWith("oklch") ? l(e) : null;
+}
+function d(e, t, n) {
+	let r = (e) => {
+		let t = Math.round(Math.max(0, Math.min(255, e))).toString(16);
+		return t.length === 1 ? `0${t}` : t;
+	};
+	return `#${r(e)}${r(t)}${r(n)}`;
+}
+function f(e, t) {
+	let n = u(e);
+	return n ? d(n.r + (255 - n.r) * t, n.g + (255 - n.g) * t, n.b + (255 - n.b) * t) : e;
+}
+function p(e, t) {
+	let n = u(e);
+	return n ? d(n.r * (1 - t), n.g * (1 - t), n.b * (1 - t)) : e;
+}
+function m(e, t) {
+	let n = u(e);
+	return n ? `rgba(${n.r}, ${n.g}, ${n.b}, ${t})` : e;
+}
+function h(e, t) {
+	return t > 0 ? f(e, t * .3) : p(e, -t * .3);
+}
+function g(e, t, n = .5) {
+	let r = u(e), i = u(t);
+	if (!r || !i) return e;
+	let a = Math.max(0, Math.min(1, n));
+	return d(r.r * a + i.r * (1 - a), r.g * a + i.g * (1 - a), r.b * a + i.b * (1 - a));
+}
+//#endregion
+//#region src/convert.ts
+function _(e) {
+	let t = { ...e };
+	e.primary && (t["primary-light"] = f(e.primary, .3), t["primary-dark"] = p(e.primary, .3), t["faded-primary"] = m(e.primary, .15)), e.secondary ? (t["secondary-light"] = f(e.secondary, .3), t["secondary-dark"] = p(e.secondary, .3), t.tertiary = p(e.secondary, .1), t["tertiary-light"] = m(e.secondary, .2)) : e.primary && (t.tertiary = p(e.primary, .15), t["tertiary-light"] = m(e.primary, .2)), e.success && (t["correct-secondary"] = m(e.success, .1), t["correct-tertiary"] = p(e.success, .1), t["correct-icon"] = p(e.success, .2), t["feedback-correct-bg"] = m(e.success, .1), t["annotation-pointer-border-color"] = f(e.success, .2)), e.error && (t.incorrect = e.error, t["incorrect-secondary"] = m(e.error, .1), t["incorrect-icon"] = p(e.error, .2), t["feedback-incorrect-bg"] = m(e.error, .1), t["arrow-color"] = e.error), e.warning && (t.missing = e.warning, t["missing-icon"] = p(e.warning, .2)), e.neutral ? (t.disabled = e.neutral, t["disabled-secondary"] = f(e.neutral, .2), t.border = e.neutral, t["border-light"] = f(e.neutral, .3), t["border-dark"] = p(e.neutral, .3), t["border-gray"] = e.neutral) : e["base-300"] && (t.disabled = e["base-300"], t["disabled-secondary"] = f(e["base-300"], .2)), e["base-200"] && (t["background-dark"] = e["base-200"], t["dropdown-background"] = p(e["base-200"], .05), t["secondary-background"] = e["base-200"]), e.primary && (t["focus-checked"] = m(e.primary, .2), t["focus-checked-border"] = p(e.primary, .2)), e.neutral && (t["focus-unchecked"] = m(e.neutral, .2), t["focus-unchecked-border"] = e.neutral);
+	let n = e.neutral || e["base-content"] || "#7E8494";
+	t["blue-grey-100"] = f(n, .5), t["blue-grey-300"] = f(n, .3), t["blue-grey-600"] = n, t["blue-grey-900"] = p(n, .4), t.black = "#000000", t.white = "#ffffff", e["base-content"] && (t["choice-input-color"] = e["base-content"]), e.primary && (t["choice-input-selected-color"] = e.primary), t.disabled && (t["choice-input-disabled-color"] = t.disabled), e.primary && (t["point-fill"] = e.primary);
+	let r = y(e);
+	return t["tick-color"] = r ? f(n, .4) : p(n, .4), t["line-stroke"] = r ? f(n, .2) : n, t["point-stroke"] = r ? p(n, .5) : "#ffffff", t["correct-answer-toggle-label-color"] = e["base-content"] || "#000000", e["base-content"] && (t["primary-text"] = e["base-content"]), t["annotation-pointer-right"] = "100%", t["annotation-pointer-top"] = "5px", t["annotation-pointer-border-width"] = "7px", t;
+}
+function v(e) {
+	return {
+		primary: e.primary,
+		secondary: e.secondary,
+		accent: e.accent,
+		neutral: e.neutral,
+		"base-100": e["base-100"],
+		"base-200": e["base-200"],
+		"base-300": e["base-300"],
+		"base-content": e["base-content"],
+		info: e.info,
+		success: e.success,
+		warning: e.warning,
+		error: e.error
+	};
+}
+function y(e) {
+	let t = e["base-content"];
+	if (!t) return !1;
+	let n = t.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/);
+	return n ? (parseInt(n[1], 10) + parseInt(n[2], 10) + parseInt(n[3], 10)) / 3 > 128 : !1;
+}
+//#endregion
+//#region src/index.ts
+n();
+//#endregion
+export { t as PieElementThemeDaisyUiElement, h as adjustSaturation, _ as daisyUiToPieTheme, p as darken, n as definePieElementThemeDaisyUi, r as extractDaisyUiTheme, a as getDaisyUiThemeName, y as isDarkTheme, f as lighten, g as mix, v as pieThemeToDaisyUi, m as rgba, o as setDaisyUiTheme, i as watchDaisyUiTheme };

package/dist/src/colors.d.ts

@@ -0,0 +1,6 @@
+export declare function lighten(color: string, amount: number): string;
+export declare function darken(color: string, amount: number): string;
+export declare function rgba(color: string, alpha: number): string;
+export declare function adjustSaturation(color: string, amount: number): string;
+export declare function mix(color1: string, color2: string, weight?: number): string;
+//# sourceMappingURL=colors.d.ts.map

package/dist/src/colors.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"colors.d.ts","sourceRoot":"","sources":["../../src/colors.ts"],"names":[],"mappings":"AAmFA,wBAAgB,OAAO,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,MAAM,CAQ7D;AAED,wBAAgB,MAAM,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,MAAM,CAI5D;AAED,wBAAgB,IAAI,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAIzD;AAED,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,MAAM,CAEtE;AAED,wBAAgB,GAAG,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,SAAM,GAAG,MAAM,CAWxE"}

package/dist/src/convert.d.ts

@@ -0,0 +1,6 @@
+import type { PieTheme } from '@pie-element/shared-types';
+import type { PieThemeExtended } from '@pie-element/shared-theming';
+export declare function daisyUiToPieTheme(daisyTheme: PieTheme): PieThemeExtended;
+export declare function pieThemeToDaisyUi(pieTheme: Partial<PieThemeExtended>): PieTheme;
+export declare function isDarkTheme(theme: Partial<PieTheme>): boolean;
+//# sourceMappingURL=convert.d.ts.map

package/dist/src/convert.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"convert.d.ts","sourceRoot":"","sources":["../../src/convert.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAC1D,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AAGpE,wBAAgB,iBAAiB,CAAC,UAAU,EAAE,QAAQ,GAAG,gBAAgB,CAyFxE;AAED,wBAAgB,iBAAiB,CAAC,QAAQ,EAAE,OAAO,CAAC,gBAAgB,CAAC,GAAG,QAAQ,CAe/E;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,OAAO,CAAC,QAAQ,CAAC,GAAG,OAAO,CAQ7D"}

package/dist/src/extract.d.ts

@@ -0,0 +1,11 @@
+import type { PieTheme } from '@pie-element/shared-types';
+export interface ExtractDaisyUiThemeOptions {
+    element?: HTMLElement;
+}
+export declare function extractDaisyUiTheme(options?: ExtractDaisyUiThemeOptions): PieTheme | undefined;
+export declare function watchDaisyUiTheme(callback: (theme: PieTheme | undefined) => void, options?: {
+    element?: HTMLElement;
+}): () => void;
+export declare function getDaisyUiThemeName(element?: HTMLElement): string | undefined;
+export declare function setDaisyUiTheme(themeName: string, element?: HTMLElement): void;
+//# sourceMappingURL=extract.d.ts.map

package/dist/src/extract.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"extract.d.ts","sourceRoot":"","sources":["../../src/extract.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAE1D,MAAM,WAAW,0BAA0B;IACzC,OAAO,CAAC,EAAE,WAAW,CAAC;CACvB;AAED,wBAAgB,mBAAmB,CAAC,OAAO,CAAC,EAAE,0BAA0B,GAAG,QAAQ,GAAG,SAAS,CAyC9F;AAED,wBAAgB,iBAAiB,CAC/B,QAAQ,EAAE,CAAC,KAAK,EAAE,QAAQ,GAAG,SAAS,KAAK,IAAI,EAC/C,OAAO,CAAC,EAAE;IAAE,OAAO,CAAC,EAAE,WAAW,CAAA;CAAE,GAClC,MAAM,IAAI,CAiBZ;AAED,wBAAgB,mBAAmB,CAAC,OAAO,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,SAAS,CAI7E;AAED,wBAAgB,eAAe,CAAC,SAAS,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,WAAW,GAAG,IAAI,CAI9E"}

package/dist/src/index.d.ts

@@ -0,0 +1,6 @@
+import { definePieElementThemeDaisyUi, PieElementThemeDaisyUiElement } from './theme-element-daisyui.js';
+export { definePieElementThemeDaisyUi, PieElementThemeDaisyUiElement };
+export { extractDaisyUiTheme, watchDaisyUiTheme, getDaisyUiThemeName, setDaisyUiTheme, } from './extract.js';
+export { daisyUiToPieTheme, pieThemeToDaisyUi, isDarkTheme } from './convert.js';
+export { lighten, darken, rgba, adjustSaturation, mix } from './colors.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/src/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,4BAA4B,EAC5B,6BAA6B,EAC9B,MAAM,4BAA4B,CAAC;AAEpC,OAAO,EAAE,4BAA4B,EAAE,6BAA6B,EAAE,CAAC;AACvE,OAAO,EACL,mBAAmB,EACnB,iBAAiB,EACjB,mBAAmB,EACnB,eAAe,GAChB,MAAM,cAAc,CAAC;AACtB,OAAO,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AACjF,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,gBAAgB,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC"}

package/dist/src/theme-element-daisyui.d.ts

@@ -0,0 +1,6 @@
+import { PieElementThemeElement } from '@pie-element/element-theme';
+export declare class PieElementThemeDaisyUiElement extends PieElementThemeElement {
+    protected resolveDataTheme(themeName: 'light' | 'dark'): string;
+}
+export declare function definePieElementThemeDaisyUi(): void;
+//# sourceMappingURL=theme-element-daisyui.d.ts.map

package/dist/src/theme-element-daisyui.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-element-daisyui.d.ts","sourceRoot":"","sources":["../../src/theme-element-daisyui.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,sBAAsB,EAAE,MAAM,4BAA4B,CAAC;AAEpE,qBAAa,6BAA8B,SAAQ,sBAAsB;IACvE,SAAS,CAAC,gBAAgB,CAAC,SAAS,EAAE,OAAO,GAAG,MAAM,GAAG,MAAM;CAGhE;AAED,wBAAgB,4BAA4B,SAO3C"}

package/dist/test/theme-element-daisyui.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=theme-element-daisyui.test.d.ts.map

package/dist/test/theme-element-daisyui.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-element-daisyui.test.d.ts","sourceRoot":"","sources":["../../test/theme-element-daisyui.test.ts"],"names":[],"mappings":""}

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@pie-element/element-theme-daisyui",
+  "version": "0.1.0",
+  "description": "DaisyUI-powered web component theme wrapper for PIE players",
+  "type": "module",
+  "main": "./dist/pie-element-theme-daisyui.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "development": "./src/index.ts",
+      "default": "./dist/pie-element-theme-daisyui.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "vite build && tsc --emitDeclarationOnly",
+    "dev": "vite",
+    "test": "vitest run"
+  },
+  "dependencies": {
+    "@pie-element/element-theme": "0.1.0",
+    "@pie-element/shared-theming": "0.1.0",
+    "@pie-element/shared-types": "0.1.0"
+  },
+  "devDependencies": {
+    "typescript": "^5.9.3",
+    "vite": "^8.0.1",
+    "vitest": "^4.1.0"
+  },
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/pie-framework/pie-elements-ng.git",
+    "directory": "packages/element-theme-daisyui"
+  },
+  "homepage": "https://github.com/pie-framework/pie-elements-ng#readme",
+  "bugs": {
+    "url": "https://github.com/pie-framework/pie-elements-ng/issues"
+  }
+}