@luminescent/ui-qwik 6.4.26 → 6.6.0-0

package/lib/index.qwik.cjs

@@ -895,6 +895,77 @@ const NumberInputRaw = qwik.component$(({ input, onDecrement$, onIncrement$, val
     ]
   });
 });
+const RangeInput = qwik.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(qwik.Slot, {})
+      }),
+      /* @__PURE__ */ jsxRuntime.jsx(RangeInputRaw, {
+        ...props,
+        children: void 0
+      })
+    ]
+  });
+});
+const RangeInputRaw = qwik.component$(({ value, min = 5, max = 100, onInput$, ...props }) => {
+  const valueSignal = qwik.useSignal(value ?? min);
+  const filledPercentage = qwik.useComputed$(() => (valueSignal.value - min) / (max - min) * 100);
+  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: [
+          ...Array(max - min + 1)
+        ].map((_, i) => {
+          if (i === 0 || i === max - min) return null;
+          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 = parseInt(element.value);
+          if (onInput$) await onInput$(event, element);
+        }
+      })
+    ]
+  });
+});
 const SelectMenu = qwik.component$((props) => {
   return /* @__PURE__ */ jsxRuntime.jsxs("div", {
     class: "flex flex-col",
@@ -1567,6 +1638,8 @@ exports.LogoWaterfall = LogoWaterfall;
 exports.Nav = Nav;
 exports.NumberInput = NumberInput;
 exports.NumberInputRaw = NumberInputRaw;
+exports.RangeInput = RangeInput;
+exports.RangeInputRaw = RangeInputRaw;
 exports.SelectMenu = SelectMenu;
 exports.SelectMenuRaw = SelectMenuRaw;
 exports.Sidebar = Sidebar;

package/lib/index.qwik.mjs

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from "@builder.io/qwik/jsx-runtime";
-import { component$, Slot, useStore, $, useSignal, useTask$, useStyles$ } from "@builder.io/qwik";
+import { component$, Slot, useStore, $, useSignal, useTask$, useStyles$, useComputed$ } from "@builder.io/qwik";
 const Link = component$(({ size, ...props }) => {
   return /* @__PURE__ */ jsxs("svg", {
     xmlns: "http://www.w3.org/2000/svg",
@@ -893,6 +893,77 @@ const NumberInputRaw = component$(({ input, onDecrement$, onIncrement$, value =
     ]
   });
 });
+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 = 5, max = 100, onInput$, ...props }) => {
+  const valueSignal = useSignal(value ?? min);
+  const filledPercentage = useComputed$(() => (valueSignal.value - min) / (max - min) * 100);
+  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: [
+          ...Array(max - min + 1)
+        ].map((_, i) => {
+          if (i === 0 || i === max - min) return null;
+          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 = parseInt(element.value);
+          if (onInput$) await onInput$(event, element);
+        }
+      })
+    ]
+  });
+});
 const SelectMenu = component$((props) => {
   return /* @__PURE__ */ jsxs("div", {
     class: "flex flex-col",
@@ -1566,6 +1637,8 @@ export {
   Nav,
   NumberInput,
   NumberInputRaw,
+  RangeInput,
+  RangeInputRaw,
   SelectMenu,
   SelectMenuRaw,
   Sidebar,

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

@@ -0,0 +1,4 @@
+declare const _default: import("@builder.io/qwik").Component<{
+    id: string;
+}>;
+export default _default;

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

@@ -0,0 +1,18 @@
+import type { PropsOf, QRL } from '@builder.io/qwik';
+interface RangeInputRawProps extends Omit<PropsOf<'input'> & {
+    type: 'number';
+}, 'class' | '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("@builder.io/qwik").Component<RangeInputProps>;
+export declare const RangeInputRaw: import("@builder.io/qwik").Component<RangeInputRawProps>;
+export {};

package/lib-types/components/elements.d.ts

@@ -4,6 +4,7 @@ export * from './elements/ColorPicker';
 export * from './elements/Dropdown';
 export * from './elements/Nav';
 export * from './elements/NumberInput';
+export * from './elements/RangeInput';
 export * from './elements/SelectMenu';
 export * from './elements/Sidebar';
 export * from './elements/Toggle';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@luminescent/ui-qwik",
-  "version": "6.4.26",
+  "version": "6.6.0-0",
   "description": "Luminescent UI library - Qwik",
   "main": "./lib/index.qwik.mjs",
   "qwik": "./lib/index.qwik.mjs",
@@ -50,7 +50,7 @@
     "vite-tsconfig-paths": "^6.0.3"
   },
   "peerDependencies": {
-    "@luminescent/ui": "6.4.26"
+    "@luminescent/ui": "6.6.0-0"
   },
   "scripts": {
     "build": "qwik build",