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

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

@@ -1,27 +1,12 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("@qwik.dev/core/jsx-runtime");
-const core = require("@qwik.dev/core");
-const Plus = require("../../svg/Plus.qwik.cjs");
-const Minus = require("../../svg/Minus.qwik.cjs");
-const NumberInput = core.component$((props) => {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", {
-    class: "flex flex-col",
-    children: [
-      /* @__PURE__ */ jsxRuntime.jsx("label", {
-        for: props.id,
-        class: "pb-1 text-lum-text select-none",
-        children: /* @__PURE__ */ jsxRuntime.jsx(core.Slot, {})
-      }),
-      /* @__PURE__ */ jsxRuntime.jsx(NumberInputRaw, {
-        ...props,
-        children: void 0
-      })
-    ]
-  });
-});
-const NumberInputRaw = core.component$(({ input, onDecrement$, onIncrement$, value = 0, step = 1, ...props }) => {
-  core.useStyles$(`
+const require_functions = require("../functions.qwik.cjs");
+const require_Plus = require("../../svg/Plus.qwik.cjs");
+const require_Minus = require("../../svg/Minus.qwik.cjs");
+let _qwik_dev_core = require("@qwik.dev/core");
+//#region src/components/elements/NumberInput.tsx
+var _hf0 = (p0, p1) => p0.min ? p1 <= p0.min : false;
+var _hf1 = (p0, p1) => p0.max ? p1 >= p0.max : false;
+var NumberInput = /* @__PURE__ */ (0, _qwik_dev_core.componentQrl)(/* @__PURE__ */ (0, _qwik_dev_core.inlinedQrl)(({ input, class: Class, onDecrement$, onIncrement$, value = 0, step = 1, ...props }) => {
+	(0, _qwik_dev_core.useStylesQrl)(/* @__PURE__ */ (0, _qwik_dev_core.inlinedQrl)(`
     input::-webkit-outer-spin-button,
     input::-webkit-inner-spin-button {
       -webkit-appearance: none;
@@ -30,58 +15,47 @@ const NumberInputRaw = core.component$(({ input, onDecrement$, onIncrement$, val
     input[type=number] {
       -moz-appearance: textfield;
     }
-  `);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", {
-    class: {
-      "flex touch-manipulation gap-1 text-lum-text": true
-    },
-    children: [
-      /* @__PURE__ */ jsxRuntime.jsx("button", {
-        type: "button",
-        class: {
-          "lum-btn p-2 rounded-r-sm": true
-        },
-        "data-action": "decrement",
-        "aria-label": "Decrement",
-        disabled: props.min ? value <= props.min : false,
-        onClick$: input ? core.$(async (event, element) => {
-          const siblingInput = element.nextElementSibling;
-          siblingInput.stepDown();
-          await onDecrement$(event, element, siblingInput);
-        }) : onDecrement$,
-        children: /* @__PURE__ */ jsxRuntime.jsx(Minus.Minus, {
-          size: 20
-        })
-      }),
-      input && /* @__PURE__ */ jsxRuntime.jsx("input", {
-        ...props,
-        type: "number",
-        value,
-        step,
-        class: {
-          "lum-input text-center rounded-sm lum-input-p-1": true,
-          ...props.class
-        }
-      }),
-      /* @__PURE__ */ jsxRuntime.jsx("button", {
-        type: "button",
-        class: {
-          "lum-btn p-2 rounded-l-sm": true
-        },
-        "data-action": "increment",
-        "aria-label": "Increment",
-        disabled: props.max ? value >= props.max : false,
-        onClick$: input ? core.$(async (event, element) => {
-          const siblingInput = element.previousElementSibling;
-          siblingInput.stepUp();
-          await onIncrement$(event, element, siblingInput);
-        }) : onIncrement$,
-        children: /* @__PURE__ */ jsxRuntime.jsx(Plus.Plus, {
-          size: 20
-        })
-      })
-    ]
-  });
-});
+  `, "NumberInput_component_useStyles_9gV0k9qgkUU"));
+	return /* @__PURE__ */ (0, _qwik_dev_core._jsxSorted)("div", null, { class: { "flex touch-manipulation gap-1 text-lum-text": true } }, [
+		/* @__PURE__ */ (0, _qwik_dev_core._jsxSorted)("button", {
+			disabled: (0, _qwik_dev_core._fnSignal)(_hf0, [props, value]),
+			"q-e:click": input ? /* @__PURE__ */ (0, _qwik_dev_core.inlinedQrl)(async (event, element) => {
+				const onDecrement$ = _qwik_dev_core._captures[0];
+				const siblingInput = element.nextElementSibling;
+				siblingInput.stepDown();
+				await onDecrement$?.(event, element, siblingInput);
+			}, "NumberInput_component_div_button_q_e_click_x56P4mcwT0M", [onDecrement$]) : onDecrement$
+		}, {
+			type: "button",
+			class: { "lum-btn p-2 rounded-r-sm": true },
+			"data-action": "decrement",
+			"aria-label": "Decrement"
+		}, /* @__PURE__ */ (0, _qwik_dev_core._jsxSorted)(require_Minus.Minus, null, { size: 20 }, null, 3, "kR_0"), 0, null),
+		input && /* @__PURE__ */ (0, _qwik_dev_core._jsxSplit)("input", {
+			...(0, _qwik_dev_core._getVarProps)(props),
+			...(0, _qwik_dev_core._getConstProps)(props),
+			value,
+			step,
+			class: {
+				"lum-input text-center rounded-sm lum-input-p-1": true,
+				...require_functions.getClassObject(Class)
+			}
+		}, { type: "number" }, null, 0, "kR_1"),
+		/* @__PURE__ */ (0, _qwik_dev_core._jsxSorted)("button", {
+			disabled: (0, _qwik_dev_core._fnSignal)(_hf1, [props, value]),
+			"q-e:click": input ? /* @__PURE__ */ (0, _qwik_dev_core.inlinedQrl)(async (event, element) => {
+				const onIncrement$ = _qwik_dev_core._captures[0];
+				const siblingInput = element.previousElementSibling;
+				siblingInput.stepUp();
+				await onIncrement$?.(event, element, siblingInput);
+			}, "NumberInput_component_div_button_q_e_click_1_oHOVxz0RzY0", [onIncrement$]) : onIncrement$
+		}, {
+			type: "button",
+			class: { "lum-btn p-2 rounded-l-sm": true },
+			"data-action": "increment",
+			"aria-label": "Increment"
+		}, /* @__PURE__ */ (0, _qwik_dev_core._jsxSorted)(require_Plus.Plus, null, { size: 20 }, null, 3, "kR_2"), 0, null)
+	], 1, "kR_3");
+}, "NumberInput_component_2YJwSaeO64g"));
+//#endregion
 exports.NumberInput = NumberInput;
-exports.NumberInputRaw = NumberInputRaw;

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

@@ -1,25 +1,12 @@
-import { jsxs, jsx } from "@qwik.dev/core/jsx-runtime";
-import { component$, Slot, useStyles$, $ } from "@qwik.dev/core";
+import { getClassObject } from "../functions.qwik.mjs";
 import { Plus } from "../../svg/Plus.qwik.mjs";
 import { Minus } from "../../svg/Minus.qwik.mjs";
-const NumberInput = component$((props) => {
-  return /* @__PURE__ */ jsxs("div", {
-    class: "flex flex-col",
-    children: [
-      /* @__PURE__ */ jsx("label", {
-        for: props.id,
-        class: "pb-1 text-lum-text select-none",
-        children: /* @__PURE__ */ jsx(Slot, {})
-      }),
-      /* @__PURE__ */ jsx(NumberInputRaw, {
-        ...props,
-        children: void 0
-      })
-    ]
-  });
-});
-const NumberInputRaw = component$(({ input, onDecrement$, onIncrement$, value = 0, step = 1, ...props }) => {
-  useStyles$(`
+import { _captures, _fnSignal, _getConstProps, _getVarProps, _jsxSorted, _jsxSplit, componentQrl, inlinedQrl, useStylesQrl } from "@qwik.dev/core";
+//#region src/components/elements/NumberInput.tsx
+var _hf0 = (p0, p1) => p0.min ? p1 <= p0.min : false;
+var _hf1 = (p0, p1) => p0.max ? p1 >= p0.max : false;
+var NumberInput = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl(({ input, class: Class, onDecrement$, onIncrement$, value = 0, step = 1, ...props }) => {
+	useStylesQrl(/* @__PURE__ */ inlinedQrl(`
     input::-webkit-outer-spin-button,
     input::-webkit-inner-spin-button {
       -webkit-appearance: none;
@@ -28,60 +15,47 @@ const NumberInputRaw = component$(({ input, onDecrement$, onIncrement$, value =
     input[type=number] {
       -moz-appearance: textfield;
     }
-  `);
-  return /* @__PURE__ */ jsxs("div", {
-    class: {
-      "flex touch-manipulation gap-1 text-lum-text": true
-    },
-    children: [
-      /* @__PURE__ */ jsx("button", {
-        type: "button",
-        class: {
-          "lum-btn p-2 rounded-r-sm": true
-        },
-        "data-action": "decrement",
-        "aria-label": "Decrement",
-        disabled: props.min ? value <= props.min : false,
-        onClick$: input ? $(async (event, element) => {
-          const siblingInput = element.nextElementSibling;
-          siblingInput.stepDown();
-          await onDecrement$(event, element, siblingInput);
-        }) : onDecrement$,
-        children: /* @__PURE__ */ jsx(Minus, {
-          size: 20
-        })
-      }),
-      input && /* @__PURE__ */ jsx("input", {
-        ...props,
-        type: "number",
-        value,
-        step,
-        class: {
-          "lum-input text-center rounded-sm lum-input-p-1": true,
-          ...props.class
-        }
-      }),
-      /* @__PURE__ */ jsx("button", {
-        type: "button",
-        class: {
-          "lum-btn p-2 rounded-l-sm": true
-        },
-        "data-action": "increment",
-        "aria-label": "Increment",
-        disabled: props.max ? value >= props.max : false,
-        onClick$: input ? $(async (event, element) => {
-          const siblingInput = element.previousElementSibling;
-          siblingInput.stepUp();
-          await onIncrement$(event, element, siblingInput);
-        }) : onIncrement$,
-        children: /* @__PURE__ */ jsx(Plus, {
-          size: 20
-        })
-      })
-    ]
-  });
-});
-export {
-  NumberInput,
-  NumberInputRaw
-};
+  `, "NumberInput_component_useStyles_9gV0k9qgkUU"));
+	return /* @__PURE__ */ _jsxSorted("div", null, { class: { "flex touch-manipulation gap-1 text-lum-text": true } }, [
+		/* @__PURE__ */ _jsxSorted("button", {
+			disabled: _fnSignal(_hf0, [props, value]),
+			"q-e:click": input ? /* @__PURE__ */ inlinedQrl(async (event, element) => {
+				const onDecrement$ = _captures[0];
+				const siblingInput = element.nextElementSibling;
+				siblingInput.stepDown();
+				await onDecrement$?.(event, element, siblingInput);
+			}, "NumberInput_component_div_button_q_e_click_x56P4mcwT0M", [onDecrement$]) : onDecrement$
+		}, {
+			type: "button",
+			class: { "lum-btn p-2 rounded-r-sm": true },
+			"data-action": "decrement",
+			"aria-label": "Decrement"
+		}, /* @__PURE__ */ _jsxSorted(Minus, null, { size: 20 }, null, 3, "kR_0"), 0, null),
+		input && /* @__PURE__ */ _jsxSplit("input", {
+			..._getVarProps(props),
+			..._getConstProps(props),
+			value,
+			step,
+			class: {
+				"lum-input text-center rounded-sm lum-input-p-1": true,
+				...getClassObject(Class)
+			}
+		}, { type: "number" }, null, 0, "kR_1"),
+		/* @__PURE__ */ _jsxSorted("button", {
+			disabled: _fnSignal(_hf1, [props, value]),
+			"q-e:click": input ? /* @__PURE__ */ inlinedQrl(async (event, element) => {
+				const onIncrement$ = _captures[0];
+				const siblingInput = element.previousElementSibling;
+				siblingInput.stepUp();
+				await onIncrement$?.(event, element, siblingInput);
+			}, "NumberInput_component_div_button_q_e_click_1_oHOVxz0RzY0", [onIncrement$]) : onIncrement$
+		}, {
+			type: "button",
+			class: { "lum-btn p-2 rounded-l-sm": true },
+			"data-action": "increment",
+			"aria-label": "Increment"
+		}, /* @__PURE__ */ _jsxSorted(Plus, null, { size: 20 }, null, 3, "kR_2"), 0, null)
+	], 1, "kR_3");
+}, "NumberInput_component_2YJwSaeO64g"));
+//#endregion
+export { NumberInput };

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

@@ -1,18 +1,11 @@
 import type { PropsOf, QRL } from '@qwik.dev/core';
-interface RangeInputRawProps extends Omit<PropsOf<'input'> & {
+interface RangeInputProps extends Omit<PropsOf<'input'> & {
     type: 'number';
-}, 'class' | 'type'> {
+}, 'type'> {
     onInput$?: QRL<(event: InputEvent, element: HTMLInputElement) => void>;
-    class?: {
-        [key: string]: boolean;
-    };
     value?: number;
     min?: number;
     max?: number;
 }
-interface RangeInputProps extends Omit<RangeInputRawProps, 'children'> {
-    id: string;
-}
 export declare const RangeInput: import("@qwik.dev/core").Component<RangeInputProps>;
-export declare const RangeInputRaw: import("@qwik.dev/core").Component<RangeInputRawProps>;
 export {};

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

@@ -1,77 +1,46 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("@qwik.dev/core/jsx-runtime");
-const core = require("@qwik.dev/core");
-const RangeInput = core.component$((props) => {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", {
-    class: "flex flex-col",
-    children: [
-      /* @__PURE__ */ jsxRuntime.jsx("label", {
-        for: props.id,
-        class: "pb-1 text-lum-text select-none",
-        children: /* @__PURE__ */ jsxRuntime.jsx(core.Slot, {})
-      }),
-      /* @__PURE__ */ jsxRuntime.jsx(RangeInputRaw, {
-        ...props,
-        children: void 0
-      })
-    ]
-  });
-});
-const RangeInputRaw = core.component$(({ value, min = 0, max = 10, onInput$, ...props }) => {
-  const valueSignal = core.useSignal(value ?? min);
-  const filledPercentage = core.useComputed$(() => (valueSignal.value - min) / (max - min) * 100);
-  const tickCount = max - min - 1;
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", {
-    class: {
-      "group relative flex touch-manipulation gap-1 text-lum-text lum-input p-0": true
-    },
-    children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", {
-        class: "absolute w-full flex justify-evenly",
-        children: tickCount > 0 && [
-          ...Array(tickCount)
-        ].map((_, i) => {
-          return /* @__PURE__ */ jsxRuntime.jsx("div", {
-            class: "border-l border-l-lum-border/20 h-1 my-0.5"
-          }, i);
-        })
-      }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", {
-        class: "h-2 lum-bg-lum-accent group-hover:lum-bg-lum-accent rounded-lum",
-        style: {
-          width: `${filledPercentage.value}%`
-        }
-      }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", {
-        class: "absolute -top-1 flex flex-col gap-4 items-center",
-        style: {
-          left: `calc(${filledPercentage.value}% - 0.5rem)`
-        },
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", {
-            class: "w-4 h-4 lum-bg-lum-accent group-hover:lum-bg-lum-accent rounded-full"
-          }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", {
-            class: "absolute top-6 lum-bg-lum-card-bg lum-btn-p-2 text-center rounded-lum opacity-0 group-hover:opacity-100 transition-all z-50",
-            children: valueSignal.value
-          })
-        ]
-      }),
-      /* @__PURE__ */ jsxRuntime.jsx("input", {
-        ...props,
-        min,
-        max,
-        type: "range",
-        value: valueSignal.value,
-        class: "absolute top-0 h-2 w-full opacity-0 cursor-pointer",
-        onInput$: async (event, element) => {
-          valueSignal.value = parseFloat(element.value);
-          if (onInput$) await onInput$(event, element);
-        }
-      })
-    ]
-  });
-});
+let _qwik_dev_core = require("@qwik.dev/core");
+//#region src/components/elements/RangeInput.tsx
+var _hf0 = (p0) => ({ width: `${p0.value}%` });
+var _hf1 = (p0) => ({ left: `calc(${p0.value}% - 0.5rem)` });
+var RangeInput = /* @__PURE__ */ (0, _qwik_dev_core.componentQrl)(/* @__PURE__ */ (0, _qwik_dev_core.inlinedQrl)(({ value, min = 0, max = 10, onInput$, ...props }) => {
+	const valueSignal = (0, _qwik_dev_core.useSignal)(value ?? min);
+	const filledPercentage = (0, _qwik_dev_core.useComputedQrl)(/* @__PURE__ */ (0, _qwik_dev_core.inlinedQrl)(() => {
+		const max = _qwik_dev_core._captures[0], min = _qwik_dev_core._captures[1];
+		return (_qwik_dev_core._captures[2].value - min) / (max - min) * 100;
+	}, "RangeInput_component_filledPercentage_useComputed_Vta9t9J9C4k", [
+		max,
+		min,
+		valueSignal
+	]));
+	const tickCount = max - min - 1;
+	return /* @__PURE__ */ (0, _qwik_dev_core._jsxSorted)("div", null, { class: { "group relative flex touch-manipulation gap-1 text-lum-text lum-input p-0": true } }, [
+		/* @__PURE__ */ (0, _qwik_dev_core._jsxSorted)("div", null, { class: "absolute w-full flex justify-evenly" }, tickCount > 0 && [...Array(tickCount)].map((_, i) => {
+			return /* @__PURE__ */ (0, _qwik_dev_core._jsxSorted)("div", null, { class: "border-l border-l-lum-border/20 h-1 my-0.5" }, null, 3, i);
+		}), 1, null),
+		/* @__PURE__ */ (0, _qwik_dev_core._jsxSorted)("div", null, {
+			class: "h-2 lum-bg-lum-accent group-hover:lum-bg-lum-accent rounded-lum",
+			style: (0, _qwik_dev_core._fnSignal)(_hf0, [filledPercentage])
+		}, null, 3, null),
+		/* @__PURE__ */ (0, _qwik_dev_core._jsxSorted)("div", null, {
+			class: "absolute -top-1 flex flex-col gap-4 items-center",
+			style: (0, _qwik_dev_core._fnSignal)(_hf1, [filledPercentage])
+		}, [/* @__PURE__ */ (0, _qwik_dev_core._jsxSorted)("div", null, { class: "w-4 h-4 lum-bg-lum-accent group-hover:lum-bg-lum-accent rounded-full" }, null, 3, null), /* @__PURE__ */ (0, _qwik_dev_core._jsxSorted)("div", null, { class: "absolute top-6 lum-bg-lum-card-bg lum-btn-p-2 text-center rounded-lum opacity-0 group-hover:opacity-100 transition-all z-50" }, (0, _qwik_dev_core._wrapProp)(valueSignal), 3, null)], 3, null),
+		/* @__PURE__ */ (0, _qwik_dev_core._jsxSplit)("input", {
+			...(0, _qwik_dev_core._getVarProps)(props),
+			...(0, _qwik_dev_core._getConstProps)(props),
+			min,
+			max,
+			"q-e:input": /* @__PURE__ */ (0, _qwik_dev_core.inlinedQrl)(async (event, element, onInput$, valueSignal) => {
+				valueSignal.value = parseFloat(element.value);
+				if (onInput$) await onInput$(event, element);
+			}, "RangeInput_component_div_input_q_e_input_0hUtvpnN79M"),
+			"q:ps": [onInput$, valueSignal]
+		}, {
+			type: "range",
+			value: (0, _qwik_dev_core._wrapProp)(valueSignal),
+			class: "absolute top-0 h-2 w-full opacity-0 cursor-pointer"
+		}, null, 4, null)
+	], 1, "Wb_0");
+}, "RangeInput_component_wN5xjLYsT00"));
+//#endregion
 exports.RangeInput = RangeInput;
-exports.RangeInputRaw = RangeInputRaw;

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

@@ -1,77 +1,46 @@
-import { jsxs, jsx } from "@qwik.dev/core/jsx-runtime";
-import { component$, Slot, useSignal, useComputed$ } from "@qwik.dev/core";
-const RangeInput = component$((props) => {
-  return /* @__PURE__ */ jsxs("div", {
-    class: "flex flex-col",
-    children: [
-      /* @__PURE__ */ jsx("label", {
-        for: props.id,
-        class: "pb-1 text-lum-text select-none",
-        children: /* @__PURE__ */ jsx(Slot, {})
-      }),
-      /* @__PURE__ */ jsx(RangeInputRaw, {
-        ...props,
-        children: void 0
-      })
-    ]
-  });
-});
-const RangeInputRaw = component$(({ value, min = 0, max = 10, onInput$, ...props }) => {
-  const valueSignal = useSignal(value ?? min);
-  const filledPercentage = useComputed$(() => (valueSignal.value - min) / (max - min) * 100);
-  const tickCount = max - min - 1;
-  return /* @__PURE__ */ jsxs("div", {
-    class: {
-      "group relative flex touch-manipulation gap-1 text-lum-text lum-input p-0": true
-    },
-    children: [
-      /* @__PURE__ */ jsx("div", {
-        class: "absolute w-full flex justify-evenly",
-        children: tickCount > 0 && [
-          ...Array(tickCount)
-        ].map((_, i) => {
-          return /* @__PURE__ */ jsx("div", {
-            class: "border-l border-l-lum-border/20 h-1 my-0.5"
-          }, i);
-        })
-      }),
-      /* @__PURE__ */ jsx("div", {
-        class: "h-2 lum-bg-lum-accent group-hover:lum-bg-lum-accent rounded-lum",
-        style: {
-          width: `${filledPercentage.value}%`
-        }
-      }),
-      /* @__PURE__ */ jsxs("div", {
-        class: "absolute -top-1 flex flex-col gap-4 items-center",
-        style: {
-          left: `calc(${filledPercentage.value}% - 0.5rem)`
-        },
-        children: [
-          /* @__PURE__ */ jsx("div", {
-            class: "w-4 h-4 lum-bg-lum-accent group-hover:lum-bg-lum-accent rounded-full"
-          }),
-          /* @__PURE__ */ jsx("div", {
-            class: "absolute top-6 lum-bg-lum-card-bg lum-btn-p-2 text-center rounded-lum opacity-0 group-hover:opacity-100 transition-all z-50",
-            children: valueSignal.value
-          })
-        ]
-      }),
-      /* @__PURE__ */ jsx("input", {
-        ...props,
-        min,
-        max,
-        type: "range",
-        value: valueSignal.value,
-        class: "absolute top-0 h-2 w-full opacity-0 cursor-pointer",
-        onInput$: async (event, element) => {
-          valueSignal.value = parseFloat(element.value);
-          if (onInput$) await onInput$(event, element);
-        }
-      })
-    ]
-  });
-});
-export {
-  RangeInput,
-  RangeInputRaw
-};
+import { _captures, _fnSignal, _getConstProps, _getVarProps, _jsxSorted, _jsxSplit, _wrapProp, componentQrl, inlinedQrl, useComputedQrl, useSignal } from "@qwik.dev/core";
+//#region src/components/elements/RangeInput.tsx
+var _hf0 = (p0) => ({ width: `${p0.value}%` });
+var _hf1 = (p0) => ({ left: `calc(${p0.value}% - 0.5rem)` });
+var RangeInput = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl(({ value, min = 0, max = 10, onInput$, ...props }) => {
+	const valueSignal = useSignal(value ?? min);
+	const filledPercentage = useComputedQrl(/* @__PURE__ */ inlinedQrl(() => {
+		const max = _captures[0], min = _captures[1];
+		return (_captures[2].value - min) / (max - min) * 100;
+	}, "RangeInput_component_filledPercentage_useComputed_Vta9t9J9C4k", [
+		max,
+		min,
+		valueSignal
+	]));
+	const tickCount = max - min - 1;
+	return /* @__PURE__ */ _jsxSorted("div", null, { class: { "group relative flex touch-manipulation gap-1 text-lum-text lum-input p-0": true } }, [
+		/* @__PURE__ */ _jsxSorted("div", null, { class: "absolute w-full flex justify-evenly" }, tickCount > 0 && [...Array(tickCount)].map((_, i) => {
+			return /* @__PURE__ */ _jsxSorted("div", null, { class: "border-l border-l-lum-border/20 h-1 my-0.5" }, null, 3, i);
+		}), 1, null),
+		/* @__PURE__ */ _jsxSorted("div", null, {
+			class: "h-2 lum-bg-lum-accent group-hover:lum-bg-lum-accent rounded-lum",
+			style: _fnSignal(_hf0, [filledPercentage])
+		}, null, 3, null),
+		/* @__PURE__ */ _jsxSorted("div", null, {
+			class: "absolute -top-1 flex flex-col gap-4 items-center",
+			style: _fnSignal(_hf1, [filledPercentage])
+		}, [/* @__PURE__ */ _jsxSorted("div", null, { class: "w-4 h-4 lum-bg-lum-accent group-hover:lum-bg-lum-accent rounded-full" }, null, 3, null), /* @__PURE__ */ _jsxSorted("div", null, { class: "absolute top-6 lum-bg-lum-card-bg lum-btn-p-2 text-center rounded-lum opacity-0 group-hover:opacity-100 transition-all z-50" }, _wrapProp(valueSignal), 3, null)], 3, null),
+		/* @__PURE__ */ _jsxSplit("input", {
+			..._getVarProps(props),
+			..._getConstProps(props),
+			min,
+			max,
+			"q-e:input": /* @__PURE__ */ inlinedQrl(async (event, element, onInput$, valueSignal) => {
+				valueSignal.value = parseFloat(element.value);
+				if (onInput$) await onInput$(event, element);
+			}, "RangeInput_component_div_input_q_e_input_0hUtvpnN79M"),
+			"q:ps": [onInput$, valueSignal]
+		}, {
+			type: "range",
+			value: _wrapProp(valueSignal),
+			class: "absolute top-0 h-2 w-full opacity-0 cursor-pointer"
+		}, null, 4, null)
+	], 1, "Wb_0");
+}, "RangeInput_component_wN5xjLYsT00"));
+//#endregion
+export { RangeInput };

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

@@ -1,20 +1,17 @@
-import type { JSXChildren, PropsOf } from '@qwik.dev/core';
-interface SelectMenuProps extends Omit<PropsOf<'select'>, 'class' | 'size'> {
-    class?: {
-        [key: string]: boolean;
-    };
-    panelClass?: string;
-    btnClass?: string;
+import type { ClassList, JSXChildren, PropsOf, QRL } from '@qwik.dev/core';
+interface SelectMenuProps extends Omit<PropsOf<'select'>, 'onChange$'> {
+    panelClass?: ClassList;
+    btnClass?: ClassList;
     noblur?: boolean;
     nocloseonclick?: boolean;
     customDropdown?: boolean;
     hover?: boolean;
     align?: 'left' | 'right' | 'center';
+    onChange$?: QRL<(event: Event, element: HTMLSelectElement) => void>;
     values?: {
         name: JSXChildren;
         value: string | number;
     }[];
 }
 export declare const SelectMenu: import("@qwik.dev/core").Component<SelectMenuProps>;
-export declare const SelectMenuRaw: import("@qwik.dev/core").Component<SelectMenuProps>;
 export {};