@luminescent/ui-qwik 7.0.0-0 → 7.0.0-2

package/lib/components/docs/Anchor.d.ts

@@ -1,4 +1,3 @@
-declare const _default: import("@qwik.dev/core").Component<{
+export declare const Anchor: import("@qwik.dev/core").Component<{
     id: string;
 }>;
-export default _default;

package/lib/components/docs/Blobs.d.ts

@@ -1,4 +1,3 @@
-declare const _default: import("@qwik.dev/core").Component<{
+export declare const Blobs: import("@qwik.dev/core").Component<{
     id: string;
 }>;
-export default _default;

package/lib/components/docs/ColorPicker.d.ts

@@ -1,4 +1,3 @@
-declare const _default: import("@qwik.dev/core").Component<{
+export declare const ColorPicker: import("@qwik.dev/core").Component<{
     id: string;
 }>;
-export default _default;

package/lib/components/docs/Dropdown.d.ts

@@ -1,4 +1,3 @@
-declare const _default: import("@qwik.dev/core").Component<{
+export declare const Dropdown: import("@qwik.dev/core").Component<{
     id: string;
 }>;
-export default _default;

package/lib/components/docs/Label.d.ts

@@ -1,4 +1,3 @@
-declare const _default: import("@qwik.dev/core").Component<{
+export declare const Label: import("@qwik.dev/core").Component<{
     id: string;
 }>;
-export default _default;

package/lib/components/docs/LumBtn.d.ts

@@ -0,0 +1,3 @@
+export declare const LumBtn: import("@qwik.dev/core").Component<{
+    id: string;
+}>;

package/lib/components/docs/LumCard.d.ts

@@ -0,0 +1,3 @@
+export declare const LumCard: import("@qwik.dev/core").Component<{
+    id: string;
+}>;

package/lib/components/docs/LumClasses.d.ts

@@ -0,0 +1,3 @@
+export declare const LumClasses: import("@qwik.dev/core").Component<{
+    id: string;
+}>;

package/lib/components/docs/LumInput.d.ts

@@ -0,0 +1,3 @@
+export declare const LumInput: import("@qwik.dev/core").Component<{
+    id: string;
+}>;

package/lib/components/docs/Nav.d.ts

@@ -1,4 +1,3 @@
-declare const _default: import("@qwik.dev/core").Component<{
+export declare const Nav: import("@qwik.dev/core").Component<{
     id: string;
 }>;
-export default _default;

package/lib/components/docs/NumberInput.d.ts

@@ -1,4 +1,3 @@
-declare const _default: import("@qwik.dev/core").Component<{
+export declare const NumberInput: import("@qwik.dev/core").Component<{
     id: string;
 }>;
-export default _default;

package/lib/components/docs/RangeInput.d.ts

@@ -1,4 +1,3 @@
-declare const _default: import("@qwik.dev/core").Component<{
+export declare const RangeInput: import("@qwik.dev/core").Component<{
     id: string;
 }>;
-export default _default;

package/lib/components/docs/SelectMenu.d.ts

@@ -1,4 +1,3 @@
-declare const _default: import("@qwik.dev/core").Component<{
+export declare const SelectMenu: import("@qwik.dev/core").Component<{
     id: string;
 }>;
-export default _default;

package/lib/components/docs/Settings.d.ts

@@ -1,2 +1 @@
-declare const _default: import("@qwik.dev/core").Component<unknown>;
-export default _default;
+export declare const Settings: import("@qwik.dev/core").Component<unknown>;

package/lib/components/docs/Sidebar.d.ts

@@ -1,4 +1,3 @@
-declare const _default: import("@qwik.dev/core").Component<{
+export declare const Sidebar: import("@qwik.dev/core").Component<{
     id: string;
 }>;
-export default _default;

package/lib/components/docs/Toggle.d.ts

@@ -1,4 +1,3 @@
-declare const _default: import("@qwik.dev/core").Component<{
+export declare const Toggle: import("@qwik.dev/core").Component<{
     id: string;
 }>;
-export default _default;

package/lib/components/docs/index.d.ts

@@ -0,0 +1,16 @@
+export * from './Anchor';
+export * from './Blobs';
+export * from './ColorPicker';
+export * from './Dropdown';
+export * from './Label';
+export * from './Nav';
+export * from './NumberInput';
+export * from './RangeInput';
+export * from './SelectMenu';
+export * from './Sidebar';
+export * from './Toggle';
+export * from './LumBtn';
+export * from './LumCard';
+export * from './LumClasses';
+export * from './LumInput';
+export * from './Settings';

package/lib/components/elements/Anchor.qwik.cjs

@@ -2,21 +2,24 @@ const require_Link = require("../../svg/Link.qwik.cjs");
 const require_functions = require("../functions.qwik.cjs");
 let _qwik_dev_core = require("@qwik.dev/core");
 //#region src/components/elements/Anchor.tsx
-var Anchor = /* @__PURE__ */ (0, _qwik_dev_core.componentQrl)(/* @__PURE__ */ (0, _qwik_dev_core.inlinedQrl)(({ id, class: Class, ...props }) => /* @__PURE__ */ (0, _qwik_dev_core._jsxSplit)("div", {
-	...(0, _qwik_dev_core._getVarProps)(props),
-	...(0, _qwik_dev_core._getConstProps)(props),
-	class: {
-		"group flex items-center gap-2 scroll-mt-32": true,
-		...require_functions.getClassObject(Class)
-	}
-}, null, [/* @__PURE__ */ (0, _qwik_dev_core._jsxSorted)(_qwik_dev_core.Slot, null, null, null, 3, "mN_0"), id && /* @__PURE__ */ (0, _qwik_dev_core._jsxSorted)("a", {
-	href: `#${id}`,
-	"q-e:click": /* @__PURE__ */ (0, _qwik_dev_core.inlinedQrl)(async () => {
-		await navigator.clipboard.writeText(window.location.href);
-	}, "Anchor_component_div_a_q_e_click_p2vKymvG8LM")
-}, null, /* @__PURE__ */ (0, _qwik_dev_core._jsxSorted)(require_Link.Link, null, {
-	class: "opacity-10 transition-opacity duration-300 group-hover:opacity-100 group-hover:duration-75",
-	size: 20
-}, null, 3, "mN_1"), 0, "mN_2")], 0, "mN_3"), "Anchor_component_dUkqs0yGHwc"));
+var Anchor = /* @__PURE__ */ (0, _qwik_dev_core.componentQrl)(/* @__PURE__ */ (0, _qwik_dev_core.inlinedQrl)((_rawProps) => {
+	const props = (0, _qwik_dev_core._restProps)(_rawProps, ["id", "class"]);
+	return /* @__PURE__ */ (0, _qwik_dev_core._jsxSplit)("div", {
+		...(0, _qwik_dev_core._getVarProps)(props),
+		...(0, _qwik_dev_core._getConstProps)(props),
+		class: {
+			"group flex items-center gap-2 scroll-mt-32": true,
+			...require_functions.getClassObject(_rawProps.class)
+		}
+	}, null, [/* @__PURE__ */ (0, _qwik_dev_core._jsxSorted)(_qwik_dev_core.Slot, null, null, null, 3, "mN_0"), _rawProps.id && /* @__PURE__ */ (0, _qwik_dev_core._jsxSorted)("a", {
+		href: `#${_rawProps.id}`,
+		"q-e:click": /* @__PURE__ */ (0, _qwik_dev_core.inlinedQrl)(async () => {
+			await navigator.clipboard.writeText(window.location.href);
+		}, "Anchor_component_div_a_q_e_click_p2vKymvG8LM")
+	}, null, /* @__PURE__ */ (0, _qwik_dev_core._jsxSorted)(require_Link.Link, null, {
+		class: "opacity-10 transition-opacity duration-300 group-hover:opacity-100 group-hover:duration-75",
+		size: 20
+	}, null, 3, "mN_1"), 0, "mN_2")], 0, "mN_3");
+}, "Anchor_component_dUkqs0yGHwc"));
 //#endregion
 exports.Anchor = Anchor;

package/lib/components/elements/Anchor.qwik.mjs

@@ -1,22 +1,25 @@
 import { Link } from "../../svg/Link.qwik.mjs";
 import { getClassObject } from "../functions.qwik.mjs";
-import { Slot, _getConstProps, _getVarProps, _jsxSorted, _jsxSplit, componentQrl, inlinedQrl } from "@qwik.dev/core";
+import { Slot, _getConstProps, _getVarProps, _jsxSorted, _jsxSplit, _restProps, componentQrl, inlinedQrl } from "@qwik.dev/core";
 //#region src/components/elements/Anchor.tsx
-var Anchor = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl(({ id, class: Class, ...props }) => /* @__PURE__ */ _jsxSplit("div", {
-	..._getVarProps(props),
-	..._getConstProps(props),
-	class: {
-		"group flex items-center gap-2 scroll-mt-32": true,
-		...getClassObject(Class)
-	}
-}, null, [/* @__PURE__ */ _jsxSorted(Slot, null, null, null, 3, "mN_0"), id && /* @__PURE__ */ _jsxSorted("a", {
-	href: `#${id}`,
-	"q-e:click": /* @__PURE__ */ inlinedQrl(async () => {
-		await navigator.clipboard.writeText(window.location.href);
-	}, "Anchor_component_div_a_q_e_click_p2vKymvG8LM")
-}, null, /* @__PURE__ */ _jsxSorted(Link, null, {
-	class: "opacity-10 transition-opacity duration-300 group-hover:opacity-100 group-hover:duration-75",
-	size: 20
-}, null, 3, "mN_1"), 0, "mN_2")], 0, "mN_3"), "Anchor_component_dUkqs0yGHwc"));
+var Anchor = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((_rawProps) => {
+	const props = _restProps(_rawProps, ["id", "class"]);
+	return /* @__PURE__ */ _jsxSplit("div", {
+		..._getVarProps(props),
+		..._getConstProps(props),
+		class: {
+			"group flex items-center gap-2 scroll-mt-32": true,
+			...getClassObject(_rawProps.class)
+		}
+	}, null, [/* @__PURE__ */ _jsxSorted(Slot, null, null, null, 3, "mN_0"), _rawProps.id && /* @__PURE__ */ _jsxSorted("a", {
+		href: `#${_rawProps.id}`,
+		"q-e:click": /* @__PURE__ */ inlinedQrl(async () => {
+			await navigator.clipboard.writeText(window.location.href);
+		}, "Anchor_component_div_a_q_e_click_p2vKymvG8LM")
+	}, null, /* @__PURE__ */ _jsxSorted(Link, null, {
+		class: "opacity-10 transition-opacity duration-300 group-hover:opacity-100 group-hover:duration-75",
+		size: 20
+	}, null, 3, "mN_1"), 0, "mN_2")], 0, "mN_3");
+}, "Anchor_component_dUkqs0yGHwc"));
 //#endregion
 export { Anchor };

package/lib/components/elements/Blobs.qwik.cjs

@@ -136,44 +136,49 @@ var blobClasses = [
 	"animate-blob5",
 	"animate-blob6"
 ];
-var Blobs = /* @__PURE__ */ (0, _qwik_dev_core.componentQrl)(/* @__PURE__ */ (0, _qwik_dev_core.inlinedQrl)(({ class: Class, color = "darkgray", blur = "xl", ...props }) => {
+var Blobs = /* @__PURE__ */ (0, _qwik_dev_core.componentQrl)(/* @__PURE__ */ (0, _qwik_dev_core.inlinedQrl)((_rawProps) => {
+	const props = (0, _qwik_dev_core._restProps)(_rawProps, [
+		"class",
+		"color",
+		"blur"
+	]);
 	const blob = Math.round(Math.random() * 6);
-	const colorClass = typeof color == "string" ? blobColorClasses[color] : color;
+	const colorClass = typeof (_rawProps.color ?? "darkgray") == "string" ? blobColorClasses[_rawProps.color ?? "darkgray"] : _rawProps.color ?? "darkgray";
 	return /* @__PURE__ */ (0, _qwik_dev_core._jsxSorted)("div", {
 		class: {
 			"animate-in fade-in anim-duration-[2s] absolute inset-0 transition-all motion-reduce:hidden": true,
-			...require_functions.getClassObject(Class)
+			...require_functions.getClassObject(_rawProps.class)
 		},
 		style: (0, _qwik_dev_core._fnSignal)(_hf0, [props])
 	}, null, [
 		/* @__PURE__ */ (0, _qwik_dev_core._jsxSorted)("div", { class: {
 			"absolute top-0 h-[30cqw] w-[30cqw] rounded-full opacity-20 ease-in-out": true,
-			"blur-xs": blur === "xs",
-			"blur-sm": blur === "sm",
-			"blur-md": blur === "md",
-			"blur-lg": blur === "lg",
-			"blur-xl": blur === "xl",
+			"blur-xs": (_rawProps.blur ?? "xl") === "xs",
+			"blur-sm": (_rawProps.blur ?? "xl") === "sm",
+			"blur-md": (_rawProps.blur ?? "xl") === "md",
+			"blur-lg": (_rawProps.blur ?? "xl") === "lg",
+			"blur-xl": (_rawProps.blur ?? "xl") === "xl",
 			[blobClasses[blob]]: true,
 			...require_functions.getClassObject(colorClass[0])
 		} }, null, null, 3, null),
 		/* @__PURE__ */ (0, _qwik_dev_core._jsxSorted)("div", { class: {
 			"absolute top-0 h-[30cqw] w-[30cqw] rounded-full opacity-20 ease-in-out": true,
-			"blur-xs": blur === "xs",
-			"blur-sm": blur === "sm",
-			"blur-md": blur === "md",
-			"blur-lg": blur === "lg",
-			"blur-xl": blur === "xl",
+			"blur-xs": (_rawProps.blur ?? "xl") === "xs",
+			"blur-sm": (_rawProps.blur ?? "xl") === "sm",
+			"blur-md": (_rawProps.blur ?? "xl") === "md",
+			"blur-lg": (_rawProps.blur ?? "xl") === "lg",
+			"blur-xl": (_rawProps.blur ?? "xl") === "xl",
 			"anim-delay-[-5s]": true,
 			[blobClasses[blob]]: true,
 			...require_functions.getClassObject(colorClass[1])
 		} }, null, null, 3, null),
 		/* @__PURE__ */ (0, _qwik_dev_core._jsxSorted)("div", { class: {
 			"absolute top-0 h-[30cqw] w-[30cqw] rounded-full opacity-20 ease-in-out": true,
-			"blur-xs": blur === "xs",
-			"blur-sm": blur === "sm",
-			"blur-md": blur === "md",
-			"blur-lg": blur === "lg",
-			"blur-xl": blur === "xl",
+			"blur-xs": (_rawProps.blur ?? "xl") === "xs",
+			"blur-sm": (_rawProps.blur ?? "xl") === "sm",
+			"blur-md": (_rawProps.blur ?? "xl") === "md",
+			"blur-lg": (_rawProps.blur ?? "xl") === "lg",
+			"blur-xl": (_rawProps.blur ?? "xl") === "xl",
 			"anim-delay-[-10s]": true,
 			[blobClasses[blob]]: true,
 			...require_functions.getClassObject(colorClass[2])

package/lib/components/elements/Blobs.qwik.mjs

@@ -1,5 +1,5 @@
 import { getClassObject } from "../functions.qwik.mjs";
-import { _fnSignal, _jsxSorted, componentQrl, inlinedQrl } from "@qwik.dev/core";
+import { _fnSignal, _jsxSorted, _restProps, componentQrl, inlinedQrl } from "@qwik.dev/core";
 //#region src/components/elements/Blobs.tsx
 var _hf0 = (p0) => ({
 	containerType: "size",
@@ -136,44 +136,49 @@ var blobClasses = [
 	"animate-blob5",
 	"animate-blob6"
 ];
-var Blobs = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl(({ class: Class, color = "darkgray", blur = "xl", ...props }) => {
+var Blobs = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((_rawProps) => {
+	const props = _restProps(_rawProps, [
+		"class",
+		"color",
+		"blur"
+	]);
 	const blob = Math.round(Math.random() * 6);
-	const colorClass = typeof color == "string" ? blobColorClasses[color] : color;
+	const colorClass = typeof (_rawProps.color ?? "darkgray") == "string" ? blobColorClasses[_rawProps.color ?? "darkgray"] : _rawProps.color ?? "darkgray";
 	return /* @__PURE__ */ _jsxSorted("div", {
 		class: {
 			"animate-in fade-in anim-duration-[2s] absolute inset-0 transition-all motion-reduce:hidden": true,
-			...getClassObject(Class)
+			...getClassObject(_rawProps.class)
 		},
 		style: _fnSignal(_hf0, [props])
 	}, null, [
 		/* @__PURE__ */ _jsxSorted("div", { class: {
 			"absolute top-0 h-[30cqw] w-[30cqw] rounded-full opacity-20 ease-in-out": true,
-			"blur-xs": blur === "xs",
-			"blur-sm": blur === "sm",
-			"blur-md": blur === "md",
-			"blur-lg": blur === "lg",
-			"blur-xl": blur === "xl",
+			"blur-xs": (_rawProps.blur ?? "xl") === "xs",
+			"blur-sm": (_rawProps.blur ?? "xl") === "sm",
+			"blur-md": (_rawProps.blur ?? "xl") === "md",
+			"blur-lg": (_rawProps.blur ?? "xl") === "lg",
+			"blur-xl": (_rawProps.blur ?? "xl") === "xl",
 			[blobClasses[blob]]: true,
 			...getClassObject(colorClass[0])
 		} }, null, null, 3, null),
 		/* @__PURE__ */ _jsxSorted("div", { class: {
 			"absolute top-0 h-[30cqw] w-[30cqw] rounded-full opacity-20 ease-in-out": true,
-			"blur-xs": blur === "xs",
-			"blur-sm": blur === "sm",
-			"blur-md": blur === "md",
-			"blur-lg": blur === "lg",
-			"blur-xl": blur === "xl",
+			"blur-xs": (_rawProps.blur ?? "xl") === "xs",
+			"blur-sm": (_rawProps.blur ?? "xl") === "sm",
+			"blur-md": (_rawProps.blur ?? "xl") === "md",
+			"blur-lg": (_rawProps.blur ?? "xl") === "lg",
+			"blur-xl": (_rawProps.blur ?? "xl") === "xl",
 			"anim-delay-[-5s]": true,
 			[blobClasses[blob]]: true,
 			...getClassObject(colorClass[1])
 		} }, null, null, 3, null),
 		/* @__PURE__ */ _jsxSorted("div", { class: {
 			"absolute top-0 h-[30cqw] w-[30cqw] rounded-full opacity-20 ease-in-out": true,
-			"blur-xs": blur === "xs",
-			"blur-sm": blur === "sm",
-			"blur-md": blur === "md",
-			"blur-lg": blur === "lg",
-			"blur-xl": blur === "xl",
+			"blur-xs": (_rawProps.blur ?? "xl") === "xs",
+			"blur-sm": (_rawProps.blur ?? "xl") === "sm",
+			"blur-md": (_rawProps.blur ?? "xl") === "md",
+			"blur-lg": (_rawProps.blur ?? "xl") === "lg",
+			"blur-xl": (_rawProps.blur ?? "xl") === "xl",
 			"anim-delay-[-10s]": true,
 			[blobClasses[blob]]: true,
 			...getClassObject(colorClass[2])

package/lib/components/elements/ColorPicker.qwik.cjs

@@ -18,26 +18,10 @@ var _hf5 = (p0, p1) => ({
 	"lum-btn rounded-sm h-[1.6rem] w-[1.6rem] p-0 lum-bg hover:brightness-150": true,
 	"border-lum-accent": p0 === p1.value
 });
-var ColorPicker = /* @__PURE__ */ (0, _qwik_dev_core.componentQrl)(/* @__PURE__ */ (0, _qwik_dev_core.inlinedQrl)(({ id, class: Class, value = "#000000", colors = [
-	"#FAEDCB",
-	"#C9E4DE",
-	"#C6DEF1",
-	"#DBCDF0",
-	"#F2C6DE",
-	"#FCD05C",
-	"#5FE2C5",
-	"#4498DB",
-	"#9863E7",
-	"#E43A96",
-	"#000000",
-	"#555555",
-	"#AAAAAA",
-	"#FFFFFF"
-], onInput$, preview = "left", horizontal, showInput = true, opacity }) => {
-	const height = 150;
-	const width = height - 25;
-	const maxHue = height - 2;
-	const hsvColor = require_color.rgbToHsv(require_color.hexToRgba(value));
+var ColorPicker = /* @__PURE__ */ (0, _qwik_dev_core.componentQrl)(/* @__PURE__ */ (0, _qwik_dev_core.inlinedQrl)((_rawProps) => {
+	const width = 125;
+	const maxHue = 148;
+	const hsvColor = require_color.rgbToHsv(require_color.hexToRgba(_rawProps.value ?? "#000000"));
 	const store = (0, _qwik_dev_core.useStore)({
 		hue: {
 			position: hsvColor.h * maxHue,
@@ -50,10 +34,10 @@ var ColorPicker = /* @__PURE__ */ (0, _qwik_dev_core.componentQrl)(/* @__PURE__
 		opacity: { position: hsvColor.a !== void 0 ? (1 - hsvColor.a) * maxHue : 0 },
 		bPosition: (1 - hsvColor.v) * maxHue,
 		sPosition: hsvColor.s * width,
-		value
+		value: _rawProps.value ?? "#000000"
 	});
 	const setColor = /* @__PURE__ */ (0, _qwik_dev_core.inlinedQrl)(async (color) => {
-		const maxHue = _qwik_dev_core._captures[0], onInput$ = _qwik_dev_core._captures[1], store = _qwik_dev_core._captures[2], width = _qwik_dev_core._captures[3];
+		const _rawProps = _qwik_dev_core._captures[0], maxHue = _qwik_dev_core._captures[1], store = _qwik_dev_core._captures[2], width = _qwik_dev_core._captures[3];
 		if (!/^#[0-9a-f]{0,8}$/i.test(color)) return;
 		const hsv = require_color.rgbToHsv(require_color.hexToRgba(color));
 		store.hue.position = hsv.h * maxHue;
@@ -66,10 +50,10 @@ var ColorPicker = /* @__PURE__ */ (0, _qwik_dev_core.componentQrl)(/* @__PURE__
 		store.sPosition = hsv.s * width;
 		store.bPosition = (1 - hsv.v) * maxHue;
 		store.value = color;
-		await onInput$?.(store.value);
+		await _rawProps.onInput$?.(store.value);
 	}, "ColorPicker_component_setColor_m9tT2MF9iI8", [
+		_rawProps,
 		maxHue,
-		onInput$,
 		store,
 		width
 	]);
@@ -89,7 +73,7 @@ var ColorPicker = /* @__PURE__ */ (0, _qwik_dev_core.componentQrl)(/* @__PURE__
 		window.addEventListener("mouseup", mouseUpListener);
 		window.addEventListener("touchend", mouseUpListener);
 	}, "ColorPicker_component_hueMouseDown_cw08gCPBKtw", [/* @__PURE__ */ (0, _qwik_dev_core.inlinedQrl)(async (e, hOffset) => {
-		const maxHue = _qwik_dev_core._captures[0], onInput$ = _qwik_dev_core._captures[1], store = _qwik_dev_core._captures[2];
+		const _rawProps = _qwik_dev_core._captures[0], maxHue = _qwik_dev_core._captures[1], store = _qwik_dev_core._captures[2];
 		const { y } = require_color.getMousePosition(e);
 		store.hue.position = require_color.clamp(maxHue - (y - hOffset), 0, maxHue);
 		const hsvColor = require_color.rgbToHsv(require_color.hexToRgba(store.value));
@@ -102,10 +86,10 @@ var ColorPicker = /* @__PURE__ */ (0, _qwik_dev_core.componentQrl)(/* @__PURE__
 			a: hsvColor.a
 		}));
 		store.value = require_color.rgbToHex(require_color.hsvToRgb(hsvColor));
-		await onInput$?.(store.value);
+		await _rawProps.onInput$?.(store.value);
 	}, "ColorPicker_component_hueChange_c0i9qwof0Yw", [
+		_rawProps,
 		maxHue,
-		onInput$,
 		store
 	])]);
 	const sbMouseDown = /* @__PURE__ */ (0, _qwik_dev_core.inlinedQrl)(async (e, el) => {
@@ -124,7 +108,7 @@ var ColorPicker = /* @__PURE__ */ (0, _qwik_dev_core.componentQrl)(/* @__PURE__
 		window.addEventListener("mouseup", mouseUpListener);
 		window.addEventListener("touchend", mouseUpListener);
 	}, "ColorPicker_component_sbMouseDown_Vor71dUNt7g", [/* @__PURE__ */ (0, _qwik_dev_core.inlinedQrl)(async (e, hOffset) => {
-		const maxHue = _qwik_dev_core._captures[0], onInput$ = _qwik_dev_core._captures[1], store = _qwik_dev_core._captures[2], width = _qwik_dev_core._captures[3];
+		const _rawProps = _qwik_dev_core._captures[0], maxHue = _qwik_dev_core._captures[1], store = _qwik_dev_core._captures[2], width = _qwik_dev_core._captures[3];
 		const { x, y } = require_color.getMousePosition(e);
 		store.bPosition = require_color.clamp(y - hOffset.top, 0, maxHue);
 		store.sPosition = require_color.clamp(x - hOffset.left, 0, width);
@@ -136,10 +120,10 @@ var ColorPicker = /* @__PURE__ */ (0, _qwik_dev_core.componentQrl)(/* @__PURE__
 			v,
 			a: store.opacity.position !== void 0 ? 1 - store.opacity.position / maxHue : 1
 		}));
-		await onInput$?.(store.value);
+		await _rawProps.onInput$?.(store.value);
 	}, "ColorPicker_component_sbChange_NwrBaY0ccx0", [
+		_rawProps,
 		maxHue,
-		onInput$,
 		store,
 		width
 	])]);
@@ -159,26 +143,26 @@ var ColorPicker = /* @__PURE__ */ (0, _qwik_dev_core.componentQrl)(/* @__PURE__
 		window.addEventListener("mouseup", mouseUpListener);
 		window.addEventListener("touchend", mouseUpListener);
 	}, "ColorPicker_component_opacityMouseDown_U0p127RN2e0", [/* @__PURE__ */ (0, _qwik_dev_core.inlinedQrl)(async (e, hOffset) => {
-		const maxHue = _qwik_dev_core._captures[0], onInput$ = _qwik_dev_core._captures[1], store = _qwik_dev_core._captures[2];
+		const _rawProps = _qwik_dev_core._captures[0], maxHue = _qwik_dev_core._captures[1], store = _qwik_dev_core._captures[2];
 		const { x } = require_color.getMousePosition(e);
 		store.opacity.position = require_color.clamp(x - hOffset.left, 0, maxHue);
 		const a = 1 - store.opacity.position / maxHue;
 		const hsvColor = require_color.rgbToHsv(require_color.hexToRgba(store.value));
 		hsvColor.a = a;
 		store.value = require_color.rgbToHex(require_color.hsvToRgb(hsvColor));
-		await onInput$?.(store.value);
+		await _rawProps.onInput$?.(store.value);
 	}, "ColorPicker_component_opacityChange_WBZtDRHmnMU", [
+		_rawProps,
 		maxHue,
-		onInput$,
 		store
 	])]);
 	return /* @__PURE__ */ (0, _qwik_dev_core._jsxSorted)("div", {
 		class: {
 			"lum-card touch-none p-4": true,
-			"flex-col": !horizontal,
-			...require_functions.getClassObject(Class)
+			"flex-col": !_rawProps.horizontal,
+			...require_functions.getClassObject(_rawProps.class)
 		},
-		id,
+		id: (0, _qwik_dev_core._wrapProp)(_rawProps, "id"),
 		"q-e:input": /* @__PURE__ */ (0, _qwik_dev_core.inlinedQrl)(async (e, el, setColor) => {
 			if (!el.dataset.value) return;
 			await setColor(el.dataset.value);
@@ -206,7 +190,7 @@ var ColorPicker = /* @__PURE__ */ (0, _qwik_dev_core.componentQrl)(/* @__PURE__
 			class: "absolute -bottom-2 -left-1.25 h-4 w-4 rounded-md lum-bg! bg-[#ff0000] ",
 			style: (0, _qwik_dev_core._fnSignal)(_hf2, [store])
 		}, null, 3, null), 3, null)], 3, null),
-		opacity && /* @__PURE__ */ (0, _qwik_dev_core._jsxSorted)("div", null, {
+		_rawProps.opacity && /* @__PURE__ */ (0, _qwik_dev_core._jsxSorted)("div", null, {
 			class: "relative h-2 w-full rounded-md",
 			"q-e:mousedown": opacityMouseDown,
 			"q-e:touchstart": opacityMouseDown,
@@ -239,34 +223,49 @@ var ColorPicker = /* @__PURE__ */ (0, _qwik_dev_core.componentQrl)(/* @__PURE__
 			backgroundPosition: "0 0, 4px 0, 4px -4px, 0 4px"
 		} }, { class: "absolute -bottom-1.25 -left-1.25 h-4 w-4 rounded-md" }, null, 3, null)], 1, "Xr_0"),
 		/* @__PURE__ */ (0, _qwik_dev_core._jsxSorted)("div", null, { class: "flex w-37.5 flex-wrap justify-between gap-1" }, [
-			showInput && /* @__PURE__ */ (0, _qwik_dev_core._jsxSorted)("div", { class: {
+			(_rawProps.showInput ?? true) && /* @__PURE__ */ (0, _qwik_dev_core._jsxSorted)("div", { class: {
 				"mb-2 flex w-37.5 border-b border-b-gray-700 pb-3": true,
-				"flex-row gap-1": preview == "left",
-				"flex-row-reverse gap-1": preview == "right",
-				"flex-col": preview == "top",
-				"flex-col-reverse": preview == "bottom"
-			} }, null, [preview != "full" && /* @__PURE__ */ (0, _qwik_dev_core._jsxSorted)("div", { class: {
+				"flex-row gap-1": (_rawProps.preview ?? "left") == "left",
+				"flex-row-reverse gap-1": (_rawProps.preview ?? "left") == "right",
+				"flex-col": (_rawProps.preview ?? "left") == "top",
+				"flex-col-reverse": (_rawProps.preview ?? "left") == "bottom"
+			} }, null, [(_rawProps.preview ?? "left") != "full" && /* @__PURE__ */ (0, _qwik_dev_core._jsxSorted)("div", { class: {
 				"border border-gray-700 rounded-sm": true,
-				"aspect-square h-full": preview == "left" || preview == "right",
-				"h-3 w-full": preview == "top" || preview == "bottom",
-				"rounded-b-none": preview == "top",
-				"rounded-t-none": preview == "bottom"
+				"aspect-square h-full": (_rawProps.preview ?? "left") == "left" || (_rawProps.preview ?? "left") == "right",
+				"h-3 w-full": (_rawProps.preview ?? "left") == "top" || (_rawProps.preview ?? "left") == "bottom",
+				"rounded-b-none": (_rawProps.preview ?? "left") == "top",
+				"rounded-t-none": (_rawProps.preview ?? "left") == "bottom"
 			} }, { style: (0, _qwik_dev_core._fnSignal)(_hf4, [store]) }, null, 3, "Xr_1"), /* @__PURE__ */ (0, _qwik_dev_core._jsxSorted)("input", {
 				class: {
 					"lum-input w-full p-1 text-xs rounded-sm": true,
-					"rounded-t-none border-t-0": preview == "top",
-					"rounded-b-none border-b-0": preview == "bottom"
+					"rounded-t-none border-t-0": (_rawProps.preview ?? "left") == "top",
+					"rounded-b-none border-b-0": (_rawProps.preview ?? "left") == "bottom"
 				},
 				"q-e:input": /* @__PURE__ */ (0, _qwik_dev_core.inlinedQrl)(async (e, el, setColor) => {
 					await setColor(el.value);
 				}, "ColorPicker_component_div_div_div_input_q_e_input_ExKkgH2ke0g"),
 				"q:p": setColor,
-				style: preview == "full" ? {
+				style: (_rawProps.preview ?? "left") == "full" ? {
 					backgroundColor: `${store.value}`,
 					color: require_color.getBrightness(require_color.hexToRgba(store.value)) > .5 ? "black" : "white"
 				} : {}
 			}, { value: (0, _qwik_dev_core._wrapProp)(store) }, null, 6, null)], 1, "Xr_2"),
-			colors.map((color, i) => {
+			(_rawProps.colors ?? [
+				"#FAEDCB",
+				"#C9E4DE",
+				"#C6DEF1",
+				"#DBCDF0",
+				"#F2C6DE",
+				"#FCD05C",
+				"#5FE2C5",
+				"#4498DB",
+				"#9863E7",
+				"#E43A96",
+				"#000000",
+				"#555555",
+				"#AAAAAA",
+				"#FFFFFF"
+			]).map((color, i) => {
 				const qrl_4294901768 = /* @__PURE__ */ (0, _qwik_dev_core.inlinedQrl)(async (_, _1, color) => {
 					const setColor = _qwik_dev_core._captures[0];
 					await setColor(color);