@flux-ui/visuals 0.0.0 → 3.2.0-beta.10

package/dist/component/FluxVisualPaneIllustration.vue.d.ts

@@ -0,0 +1,20 @@
+import { VNode, DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
+type __VLS_Props = {
+    readonly animatedColors: string[];
+    readonly animatedOpacity?: number;
+    readonly animatedSeed?: number;
+    readonly aspectRatio?: number;
+    readonly isMasked?: boolean;
+};
+type __VLS_Slots = {
+    default?(): VNode[];
+    controlled?(): VNode[];
+};
+declare const __VLS_base: DefineComponent<__VLS_Props, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/component/index.d.ts

@@ -9,6 +9,7 @@ export { default as FluxVisualHighlighter } from './FluxVisualHighlighter.vue';
 export { default as FluxVisualHighlighterGroup } from './FluxVisualHighlighterGroup.vue';
 export { default as FluxVisualNoise } from './FluxVisualNoise.vue';
 export { default as FluxVisualNumberFlow } from './FluxVisualNumberFlow.vue';
+export { default as FluxVisualPaneIllustration } from './FluxVisualPaneIllustration.vue';
 export { default as FluxVisualPing } from './FluxVisualPing.vue';
 export { default as FluxVisualSlotText } from './FluxVisualSlotText.vue';
 export { default as FluxVisualTextScramble } from './FluxVisualTextScramble.vue';

package/dist/index.css

@@ -998,6 +998,46 @@
   font-variant-numeric: tabular-nums;
   display: inline-block;
   white-space: nowrap;
+}.pane-illustration {
+  --mask: linear-gradient(to bottom, black, transparent);
+  --mask-content: linear-gradient(to bottom, black, rgb(0 0 0 / .75), transparent);
+  position: relative;
+  border-radius: calc(var(--radius) - 1px);
+}
+.pane-illustration:not(:first-child) {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+.pane-illustration:not(:last-child) {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.pane-illustration-content {
+  position: relative;
+  display: flex;
+  height: 100%;
+  align-items: center;
+  justify-content: center;
+}
+
+.pane-illustration-content-controlled {
+  overflow: hidden;
+  -webkit-mask-image: var(--mask-content);
+  mask-image: var(--mask-content);
+}
+
+.pane-illustration-magic {
+  position: absolute;
+  inset: -1px;
+  border-radius: inherit;
+}
+
+.pane-illustration-masked {
+}
+.pane-illustration-masked .pane-illustration-magic {
+  -webkit-mask-image: var(--mask);
+  mask-image: var(--mask);
 }.ping {
   position: relative;
   display: inline-block;

package/dist/index.js

@@ -1,4 +1,4 @@
-import { Fragment, cloneVNode, computed, createCommentVNode, createElementBlock, createElementVNode, customRef, defineComponent, getCurrentInstance, h, inject, markRaw, normalizeClass, normalizeStyle, onBeforeUnmount, onMounted, onScopeDispose, openBlock, provide, ref, renderList, renderSlot, shallowRef, toDisplayString, unref, useId, useTemplateRef, watch, watchEffect } from "vue";
+import { Fragment, cloneVNode, computed, createCommentVNode, createElementBlock, createElementVNode, createVNode, customRef, defineComponent, getCurrentInstance, h, inject, markRaw, normalizeClass, normalizeStyle, onBeforeUnmount, onMounted, onScopeDispose, openBlock, provide, ref, renderList, renderSlot, shallowRef, toDisplayString, unref, useId, useSlots, useTemplateRef, watch, watchEffect } from "vue";
 //#region ../../node_modules/.bun/culori@4.0.2/node_modules/culori/src/rgb/parseNumber.js
 var parseNumber = (color, len) => {
 	if (typeof color !== "number") return;
@@ -910,7 +910,7 @@ var convertLchToLab = ({ l, c, h, alpha }, mode = "lab") => {
 };
 //#endregion
 //#region ../../node_modules/.bun/culori@4.0.2/node_modules/culori/src/xyz65/constants.js
-var k$4 = Math.pow(29, 3) / Math.pow(3, 3);
+var k$5 = Math.pow(29, 3) / Math.pow(3, 3);
 var e$4 = Math.pow(6, 3) / Math.pow(29, 3);
 //#endregion
 //#region ../../node_modules/.bun/culori@4.0.2/node_modules/culori/src/constants.js
@@ -928,7 +928,7 @@ Math.pow(29, 3) / Math.pow(3, 3);
 Math.pow(6, 3) / Math.pow(29, 3);
 //#endregion
 //#region ../../node_modules/.bun/culori@4.0.2/node_modules/culori/src/lab65/convertLab65ToXyz65.js
-var fn$2 = (v) => Math.pow(v, 3) > e$4 ? Math.pow(v, 3) : (116 * v - 16) / k$4;
+var fn$2 = (v) => Math.pow(v, 3) > e$4 ? Math.pow(v, 3) : (116 * v - 16) / k$5;
 var convertLab65ToXyz65 = ({ l, a, b, alpha }) => {
 	if (l === void 0) l = 0;
 	if (a === void 0) a = 0;
@@ -950,7 +950,7 @@ var convertLab65ToXyz65 = ({ l, a, b, alpha }) => {
 var convertLab65ToRgb = (lab) => convertXyz65ToRgb(convertLab65ToXyz65(lab));
 //#endregion
 //#region ../../node_modules/.bun/culori@4.0.2/node_modules/culori/src/lab65/convertXyz65ToLab65.js
-var f$3 = (value) => value > e$4 ? Math.cbrt(value) : (k$4 * value + 16) / 116;
+var f$3 = (value) => value > e$4 ? Math.cbrt(value) : (k$5 * value + 16) / 116;
 var convertXyz65ToLab65 = ({ x, y, z, alpha }) => {
 	if (x === void 0) x = 0;
 	if (y === void 0) y = 0;
@@ -1812,11 +1812,11 @@ var definition$16 = {
 };
 //#endregion
 //#region ../../node_modules/.bun/culori@4.0.2/node_modules/culori/src/xyz50/constants.js
-var k$2 = Math.pow(29, 3) / Math.pow(3, 3);
+var k$3 = Math.pow(29, 3) / Math.pow(3, 3);
 var e$2 = Math.pow(6, 3) / Math.pow(29, 3);
 //#endregion
 //#region ../../node_modules/.bun/culori@4.0.2/node_modules/culori/src/lab/convertLabToXyz50.js
-var fn$1 = (v) => Math.pow(v, 3) > e$2 ? Math.pow(v, 3) : (116 * v - 16) / k$2;
+var fn$1 = (v) => Math.pow(v, 3) > e$2 ? Math.pow(v, 3) : (116 * v - 16) / k$3;
 var convertLabToXyz50 = ({ l, a, b, alpha }) => {
 	if (l === void 0) l = 0;
 	if (a === void 0) a = 0;
@@ -1865,7 +1865,7 @@ var convertRgbToXyz50 = (rgb) => {
 };
 //#endregion
 //#region ../../node_modules/.bun/culori@4.0.2/node_modules/culori/src/lab/convertXyz50ToLab.js
-var f$2 = (value) => value > e$2 ? Math.cbrt(value) : (k$2 * value + 16) / 116;
+var f$2 = (value) => value > e$2 ? Math.cbrt(value) : (k$3 * value + 16) / 116;
 var convertXyz50ToLab = ({ x, y, z, alpha }) => {
 	if (x === void 0) x = 0;
 	if (y === void 0) y = 0;
@@ -2071,7 +2071,7 @@ var u_fn$1 = (x, y, z) => 4 * x / (x + 15 * y + 3 * z);
 var v_fn$1 = (x, y, z) => 9 * y / (x + 15 * y + 3 * z);
 var un$2 = u_fn$1(D50.X, D50.Y, D50.Z);
 var vn$2 = v_fn$1(D50.X, D50.Y, D50.Z);
-var l_fn = (value) => value <= e$2 ? k$2 * value : 116 * Math.cbrt(value) - 16;
+var l_fn = (value) => value <= e$2 ? k$3 * value : 116 * Math.cbrt(value) - 16;
 var convertXyz50ToLuv = ({ x, y, z, alpha }) => {
 	if (x === void 0) x = 0;
 	if (y === void 0) y = 0;
@@ -2111,7 +2111,7 @@ var convertLuvToXyz50 = ({ l, u, v, alpha }) => {
 	if (v === void 0) v = 0;
 	let up = u / (13 * l) + un$1;
 	let vp = v / (13 * l) + vn$1;
-	let y = D50.Y * (l <= 8 ? l / k$2 : Math.pow((l + 16) / 116, 3));
+	let y = D50.Y * (l <= 8 ? l / k$3 : Math.pow((l + 16) / 116, 3));
 	let res = {
 		mode: "xyz50",
 		x: y * (9 * up) / (4 * vp),
@@ -3862,7 +3862,11 @@ var Locale = class Locale {
 	}
 	static create(locale, numberingSystem, outputCalendar, weekSettings, defaultToEN = false) {
 		const specifiedLocale = locale || Settings.defaultLocale;
-		return new Locale(specifiedLocale || (defaultToEN ? "en-US" : systemLocale()), numberingSystem || Settings.defaultNumberingSystem, outputCalendar || Settings.defaultOutputCalendar, validateWeekSettings(weekSettings) || Settings.defaultWeekSettings, specifiedLocale);
+		const localeR = specifiedLocale || (defaultToEN ? "en-US" : systemLocale());
+		const numberingSystemR = numberingSystem || Settings.defaultNumberingSystem;
+		const outputCalendarR = outputCalendar || Settings.defaultOutputCalendar;
+		const weekSettingsR = validateWeekSettings(weekSettings) || Settings.defaultWeekSettings;
+		return new Locale(localeR, numberingSystemR, outputCalendarR, weekSettingsR, specifiedLocale);
 	}
 	static resetCache() {
 		sysLocaleCache = null;
@@ -9257,7 +9261,7 @@ function friendlyDateTime(dateTimeish) {
 	else throw new InvalidArgumentError(`Unknown datetime argument: ${dateTimeish}, of type ${typeof dateTimeish}`);
 }
 //#endregion
-//#region ../../node_modules/.bun/@basmilius+utils@3.45.0+f2ed1ec6a4c7f7fd/node_modules/@basmilius/utils/dist/index.mjs
+//#region ../../node_modules/.bun/@basmilius+utils@3.50.0+f2ed1ec6a4c7f7fd/node_modules/@basmilius/utils/dist/index.mjs
 function x$1(e) {
 	let t = {};
 	do {
@@ -9270,6 +9274,14 @@ function x$1(e) {
 	} while (e = Object.getPrototypeOf(e));
 	return t;
 }
+function j$1(e) {
+	let t = parseInt(e.startsWith(`#`) ? e.substring(1) : e, 16);
+	return [
+		t >> 16 & 255,
+		t >> 8 & 255,
+		t & 255
+	];
+}
 function R$1(e) {
 	return globalThis.document ? e instanceof HTMLElement : !1;
 }
@@ -9299,7 +9311,7 @@ function K$1(e, t, n) {
 	Object.defineProperty(e, t, { value: n });
 }
 //#endregion
-//#region ../../node_modules/.bun/@basmilius+http-client@3.45.0+66382d5e2ea3742d/node_modules/@basmilius/http-client/dist/index.mjs
+//#region ../../node_modules/.bun/@basmilius+http-client@3.50.0+2111c3e180df0f85/node_modules/@basmilius/http-client/dist/index.mjs
 function adapter_default(Parent) {
 	return class extends Parent {
 		constructor(...args) {
@@ -11872,6 +11884,61 @@ var FluxVisualNumberFlow_default = /* @__PURE__ */ defineComponent({
 		};
 	}
 });
+var PaneIllustration_module_default = {
+	paneIllustration: `pane-illustration`,
+	paneIllustrationContent: `pane-illustration-content`,
+	paneIllustrationContentControlled: `pane-illustration-content-controlled pane-illustration-content`,
+	paneIllustrationMagic: `pane-illustration-magic`,
+	paneIllustrationMasked: `pane-illustration-masked pane-illustration`
+};
+//#endregion
+//#region src/component/FluxVisualPaneIllustration.vue
+var FluxVisualPaneIllustration_default = /* @__PURE__ */ defineComponent({
+	__name: "FluxVisualPaneIllustration",
+	props: {
+		animatedColors: {},
+		animatedOpacity: {},
+		animatedSeed: {},
+		aspectRatio: { default: () => 16 / 9 },
+		isMasked: { type: Boolean }
+	},
+	setup(__props) {
+		const slots = useSlots();
+		const borderColor = computed(() => {
+			if (!__props.animatedColors || __props.animatedColors.length === 0) return "transparent";
+			const [r, g, b] = j$1(__props.animatedColors[0]);
+			return `rgb(${r} ${g} ${b} / .15)`;
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				"data-flux-pane-illustration": "",
+				class: normalizeClass(__props.isMasked ? unref(PaneIllustration_module_default).paneIllustrationMasked : unref(PaneIllustration_module_default).paneIllustration),
+				style: normalizeStyle({ aspectRatio: __props.aspectRatio })
+			}, [
+				createElementVNode("div", {
+					class: normalizeClass(unref(PaneIllustration_module_default).paneIllustrationMagic),
+					style: normalizeStyle({ border: `1px solid ${borderColor.value}` })
+				}, [createVNode(FluxVisualGridPattern_default, { "stroke-dasharray": 3 }), createVNode(FluxVisualAnimatedColors_default, {
+					colors: __props.animatedColors,
+					opacity: __props.animatedOpacity,
+					seed: __props.animatedSeed
+				}, null, 8, [
+					"colors",
+					"opacity",
+					"seed"
+				])], 6),
+				slots.controlled ? (openBlock(), createElementBlock("div", {
+					key: 0,
+					class: normalizeClass(unref(PaneIllustration_module_default).paneIllustrationContentControlled)
+				}, [renderSlot(_ctx.$slots, "controlled")], 2)) : createCommentVNode("", true),
+				slots.default ? (openBlock(), createElementBlock("div", {
+					key: 1,
+					class: normalizeClass(unref(PaneIllustration_module_default).paneIllustrationContent)
+				}, [renderSlot(_ctx.$slots, "default")], 2)) : createCommentVNode("", true)
+			], 6);
+		};
+	}
+});
 var Ping_module_default = {
 	ping: `ping`,
 	visualPing: `visual-ping`
@@ -12315,6 +12382,6 @@ var FluxVisualTextShimmer_default = /* @__PURE__ */ defineComponent({
 	}
 });
 //#endregion
-export { FluxVisualAnimatedColors_default as FluxVisualAnimatedColors, FluxVisualAttention_default as FluxVisualAttention, FluxVisualBorderBeam_default as FluxVisualBorderBeam, FluxVisualBorderShine_default as FluxVisualBorderShine, FluxVisualDotPattern_default as FluxVisualDotPattern, FluxVisualFlickeringGrid_default as FluxVisualFlickeringGrid, FluxVisualGridPattern_default as FluxVisualGridPattern, FluxVisualHighlighter_default as FluxVisualHighlighter, FluxVisualHighlighterGroup_default as FluxVisualHighlighterGroup, FluxVisualNoise_default as FluxVisualNoise, FluxVisualNumberFlow_default as FluxVisualNumberFlow, FluxVisualPing_default as FluxVisualPing, FluxVisualSlotText_default as FluxVisualSlotText, FluxVisualTextScramble_default as FluxVisualTextScramble, FluxVisualTextShimmer_default as FluxVisualTextShimmer };
+export { FluxVisualAnimatedColors_default as FluxVisualAnimatedColors, FluxVisualAttention_default as FluxVisualAttention, FluxVisualBorderBeam_default as FluxVisualBorderBeam, FluxVisualBorderShine_default as FluxVisualBorderShine, FluxVisualDotPattern_default as FluxVisualDotPattern, FluxVisualFlickeringGrid_default as FluxVisualFlickeringGrid, FluxVisualGridPattern_default as FluxVisualGridPattern, FluxVisualHighlighter_default as FluxVisualHighlighter, FluxVisualHighlighterGroup_default as FluxVisualHighlighterGroup, FluxVisualNoise_default as FluxVisualNoise, FluxVisualNumberFlow_default as FluxVisualNumberFlow, FluxVisualPaneIllustration_default as FluxVisualPaneIllustration, FluxVisualPing_default as FluxVisualPing, FluxVisualSlotText_default as FluxVisualSlotText, FluxVisualTextScramble_default as FluxVisualTextScramble, FluxVisualTextShimmer_default as FluxVisualTextShimmer };
 
 //# sourceMappingURL=index.js.map