@luminescent/ui 0.8.1 → 0.9.0

package/lib/index.qwik.cjs

@@ -19,10 +19,10 @@ const buttonColorClasses = {
   yellow: "bg-yellow-700/90 border-yellow-600 hover:bg-yellow-600 active:bg-yellow-500 focus:border-yellow-500"
 };
 const sizeClasses = {
-  sm: "text-sm px-2 py-1 rounded-md gap-2 active:px-1",
+  sm: "text-sm px-2.5 py-1.5 rounded-md gap-2",
   md: "text-base px-4 py-2 rounded-md gap-3",
-  lg: "text-base px-6 py-3 rounded-lg gap-3",
-  xl: "text-base px-8 py-4 rounded-xl gap-4"
+  lg: "text-lg px-6 py-3 rounded-lg gap-3",
+  xl: "text-lg px-8 py-4 rounded-xl gap-4"
 };
 const buttonClass = "relative flex items-center gap-3 transition ease-in-out border text-gray-50 fill-gray-50 disabled:opacity-50 hover:shadow-lg active:scale-95 whitespace-nowrap";
 const Button = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl((props) => {
@@ -264,7 +264,7 @@ const Card = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl((
     }
   }, null, 0, "OW_3");
 }, "Card_component_DlkkcTEVka4"));
-const InputClasses = "transition ease-in-out text-lg border border-gray-700 bg-gray-800 text-gray-50 hover:bg-gray-700 hover:shadow-lg focus:bg-gray-700 focus:outline-none focus:border-gray-400 rounded-md px-3 py-2";
+const InputClasses = "transition ease-in-out border border-gray-700 bg-gray-800 text-gray-50 hover:bg-gray-700 hover:shadow-lg focus:bg-gray-700 focus:outline-none focus:border-gray-400 rounded-md px-2.5 py-1.5";
 const TextInput = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl((props) => {
   return /* @__PURE__ */ qwik._jsxQ("div", null, {
     class: "flex flex-col"
@@ -448,9 +448,9 @@ const ColorInput = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inline
         backgroundColor: `${props.value ?? "#000000"}`,
         color: getBrightness(hexNumberToRgb(hexStringToNumber(props.value ?? "#000000"))) > 0.5 ? "black" : "white"
       } : (props.preview ?? "left") == "left" ? {
-        borderLeft: `40px solid ${props.value ?? "#000000"}`
+        borderLeft: `35px solid ${props.value ?? "#000000"}`
       } : (props.preview ?? "left") == "right" ? {
-        borderRight: `40px solid ${props.value ?? "#000000"}`
+        borderRight: `35px solid ${props.value ?? "#000000"}`
       } : (props.preview ?? "left") == "top" ? {
         borderTop: `10px solid ${props.value ?? "#000000"}`
       } : (props.preview ?? "left") == "bottom" ? {
@@ -502,10 +502,10 @@ const ColorInput = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inline
             el.style.color = getBrightness(hexNumberToRgb(hexStringToNumber(color))) > 0.5 ? "black" : "white";
             break;
           case "left":
-            el.style.borderLeft = `40px solid ${color}`;
+            el.style.borderLeft = `35px solid ${color}`;
             break;
           case "right":
-            el.style.borderRight = `40px solid ${color}`;
+            el.style.borderRight = `35px solid ${color}`;
             break;
           case "top":
             el.style.borderTop = `10px solid ${color}`;
@@ -909,9 +909,6 @@ const NumberInputRaw = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.in
       -moz-appearance: textfield;
     }
   `, "NumberInputRaw_component_useStyles_v5EsWTMt0DU"));
-  const store = qwik.useStore({
-    value: props.value ?? 0
-  });
   return /* @__PURE__ */ qwik._jsxQ("div", null, {
     class: qwik._fnSignal((p0) => ({
       "flex text-gray-50": true,
@@ -921,20 +918,21 @@ const NumberInputRaw = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.in
     ], '{"flex text-gray-50":true,"gap-2":!p0.input}')
   }, [
     /* @__PURE__ */ qwik._jsxC(Button, {
+      size: "sm",
       get color() {
         return props.input ? "gray" : "darkgray";
       },
       "aria-label": "Decrement",
       "data-action": "decrement",
-      disabled: props1.min ? store.value <= props1.min : false,
-      onClick$: /* @__PURE__ */ qwik.inlinedQrl((event, element) => {
-        const [props2, store2] = qwik.useLexicalScope();
-        store2.value = store2.value - (props2.step ?? 1);
-        props2.onDecrement$(event, element, store2);
+      disabled: props1.min ? (props.value ?? 0) <= props1.min : false,
+      onClick$: props.input ? /* @__PURE__ */ qwik.inlinedQrl((event, element) => {
+        const [props2] = qwik.useLexicalScope();
+        const siblingInput = element.nextElementSibling;
+        siblingInput.stepDown();
+        props2.onDecrement$(event, element, siblingInput);
       }, "NumberInputRaw_component_div_Button_onClick_PgKg57gfX0I", [
-        props,
-        store
-      ]),
+        props
+      ]) : props.onDecrement$,
       get class() {
         return {
           "mr-2": props.input
@@ -959,9 +957,9 @@ const NumberInputRaw = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.in
           props
         ], 'p0.input?"gray":"darkgray"'),
         "data-action": qwik._IMMUTABLE,
-        onClick$: qwik._IMMUTABLE
+        size: qwik._IMMUTABLE
       }
-    }, 1, "gk_4"),
+    }, 0, "gk_4"),
     props.input && /* @__PURE__ */ qwik._jsxS("input", {
       ...props1,
       class: {
@@ -974,25 +972,26 @@ const NumberInputRaw = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.in
         props
       ], "p0.step??1"),
       type: "number",
-      value: qwik._fnSignal((p0) => p0.value, [
-        store
-      ], "p0.value")
+      value: qwik._fnSignal((p0) => p0.value ?? 0, [
+        props
+      ], "p0.value??0")
     }, 0, "gk_5"),
     /* @__PURE__ */ qwik._jsxC(Button, {
+      size: "sm",
       get color() {
         return props.input ? "gray" : "darkgray";
       },
       "aria-label": "Increment",
       "data-action": "increment",
-      disabled: props1.max ? store.value >= props1.max : false,
-      onClick$: /* @__PURE__ */ qwik.inlinedQrl((event, element) => {
-        const [props2, store2] = qwik.useLexicalScope();
-        store2.value = store2.value + (props2.step ?? 1);
-        props2.onIncrement$(event, element, store2);
+      disabled: props1.max ? (props.value ?? 0) >= props1.max : false,
+      onClick$: props.input ? /* @__PURE__ */ qwik.inlinedQrl((event, element) => {
+        const [props2] = qwik.useLexicalScope();
+        const siblingInput = element.previousElementSibling;
+        siblingInput.stepUp();
+        props2.onIncrement$(event, element, siblingInput);
       }, "NumberInputRaw_component_div_Button_onClick_1_UzVlUpg1uGs", [
-        props,
-        store
-      ]),
+        props
+      ]) : props.onIncrement$,
       get class() {
         return {
           "ml-2": props.input
@@ -1017,9 +1016,9 @@ const NumberInputRaw = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.in
           props
         ], 'p0.input?"gray":"darkgray"'),
         "data-action": qwik._IMMUTABLE,
-        onClick$: qwik._IMMUTABLE
+        size: qwik._IMMUTABLE
       }
-    }, 1, "gk_7")
+    }, 0, "gk_7")
   ], 1, "gk_8");
 }, "NumberInputRaw_component_8sGf0eS1rvo"));
 const ChevronDown = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl((props) => {
@@ -1106,6 +1105,7 @@ const SelectInputRaw = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.in
       ], "p0.id")
     }, 0, null),
     /* @__PURE__ */ qwik._jsxC(Button, {
+      size: "sm",
       get class() {
         return {
           "flex focus:bg-gray-700": true,
@@ -1151,7 +1151,8 @@ const SelectInputRaw = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.in
         }), [
           props
         ], '{"flex focus:bg-gray-700":true,...p0.class}'),
-        onClick$: qwik._IMMUTABLE
+        onClick$: qwik._IMMUTABLE,
+        size: qwik._IMMUTABLE
       }
     }, 1, "cA_4"),
     /* @__PURE__ */ qwik._jsxQ("div", {
@@ -1281,7 +1282,7 @@ const Toggle = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl
     props.label && /* @__PURE__ */ qwik._jsxQ("label", {
       for: qwik._wrapSignal(props1, "id")
     }, {
-      class: "text-gray-300"
+      class: "text-gray-300 flex gap-2"
     }, qwik._fnSignal((p0) => p0.label, [
       props
     ], "p0.label"), 3, "yu_0")

package/lib/index.qwik.mjs

@@ -17,10 +17,10 @@ const buttonColorClasses = {
   yellow: "bg-yellow-700/90 border-yellow-600 hover:bg-yellow-600 active:bg-yellow-500 focus:border-yellow-500"
 };
 const sizeClasses = {
-  sm: "text-sm px-2 py-1 rounded-md gap-2 active:px-1",
+  sm: "text-sm px-2.5 py-1.5 rounded-md gap-2",
   md: "text-base px-4 py-2 rounded-md gap-3",
-  lg: "text-base px-6 py-3 rounded-lg gap-3",
-  xl: "text-base px-8 py-4 rounded-xl gap-4"
+  lg: "text-lg px-6 py-3 rounded-lg gap-3",
+  xl: "text-lg px-8 py-4 rounded-xl gap-4"
 };
 const buttonClass = "relative flex items-center gap-3 transition ease-in-out border text-gray-50 fill-gray-50 disabled:opacity-50 hover:shadow-lg active:scale-95 whitespace-nowrap";
 const Button = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
@@ -262,7 +262,7 @@ const Card = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) =>
     }
   }, null, 0, "OW_3");
 }, "Card_component_DlkkcTEVka4"));
-const InputClasses = "transition ease-in-out text-lg border border-gray-700 bg-gray-800 text-gray-50 hover:bg-gray-700 hover:shadow-lg focus:bg-gray-700 focus:outline-none focus:border-gray-400 rounded-md px-3 py-2";
+const InputClasses = "transition ease-in-out border border-gray-700 bg-gray-800 text-gray-50 hover:bg-gray-700 hover:shadow-lg focus:bg-gray-700 focus:outline-none focus:border-gray-400 rounded-md px-2.5 py-1.5";
 const TextInput = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
   return /* @__PURE__ */ _jsxQ("div", null, {
     class: "flex flex-col"
@@ -446,9 +446,9 @@ const ColorInput = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((prop
         backgroundColor: `${props.value ?? "#000000"}`,
         color: getBrightness(hexNumberToRgb(hexStringToNumber(props.value ?? "#000000"))) > 0.5 ? "black" : "white"
       } : (props.preview ?? "left") == "left" ? {
-        borderLeft: `40px solid ${props.value ?? "#000000"}`
+        borderLeft: `35px solid ${props.value ?? "#000000"}`
       } : (props.preview ?? "left") == "right" ? {
-        borderRight: `40px solid ${props.value ?? "#000000"}`
+        borderRight: `35px solid ${props.value ?? "#000000"}`
       } : (props.preview ?? "left") == "top" ? {
         borderTop: `10px solid ${props.value ?? "#000000"}`
       } : (props.preview ?? "left") == "bottom" ? {
@@ -500,10 +500,10 @@ const ColorInput = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((prop
             el.style.color = getBrightness(hexNumberToRgb(hexStringToNumber(color))) > 0.5 ? "black" : "white";
             break;
           case "left":
-            el.style.borderLeft = `40px solid ${color}`;
+            el.style.borderLeft = `35px solid ${color}`;
             break;
           case "right":
-            el.style.borderRight = `40px solid ${color}`;
+            el.style.borderRight = `35px solid ${color}`;
             break;
           case "top":
             el.style.borderTop = `10px solid ${color}`;
@@ -907,9 +907,6 @@ const NumberInputRaw = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((
       -moz-appearance: textfield;
     }
   `, "NumberInputRaw_component_useStyles_v5EsWTMt0DU"));
-  const store = useStore({
-    value: props.value ?? 0
-  });
   return /* @__PURE__ */ _jsxQ("div", null, {
     class: _fnSignal((p0) => ({
       "flex text-gray-50": true,
@@ -919,20 +916,21 @@ const NumberInputRaw = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((
     ], '{"flex text-gray-50":true,"gap-2":!p0.input}')
   }, [
     /* @__PURE__ */ _jsxC(Button, {
+      size: "sm",
       get color() {
         return props.input ? "gray" : "darkgray";
       },
       "aria-label": "Decrement",
       "data-action": "decrement",
-      disabled: props1.min ? store.value <= props1.min : false,
-      onClick$: /* @__PURE__ */ inlinedQrl((event, element) => {
-        const [props2, store2] = useLexicalScope();
-        store2.value = store2.value - (props2.step ?? 1);
-        props2.onDecrement$(event, element, store2);
+      disabled: props1.min ? (props.value ?? 0) <= props1.min : false,
+      onClick$: props.input ? /* @__PURE__ */ inlinedQrl((event, element) => {
+        const [props2] = useLexicalScope();
+        const siblingInput = element.nextElementSibling;
+        siblingInput.stepDown();
+        props2.onDecrement$(event, element, siblingInput);
       }, "NumberInputRaw_component_div_Button_onClick_PgKg57gfX0I", [
-        props,
-        store
-      ]),
+        props
+      ]) : props.onDecrement$,
       get class() {
         return {
           "mr-2": props.input
@@ -957,9 +955,9 @@ const NumberInputRaw = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((
           props
         ], 'p0.input?"gray":"darkgray"'),
         "data-action": _IMMUTABLE,
-        onClick$: _IMMUTABLE
+        size: _IMMUTABLE
       }
-    }, 1, "gk_4"),
+    }, 0, "gk_4"),
     props.input && /* @__PURE__ */ _jsxS("input", {
       ...props1,
       class: {
@@ -972,25 +970,26 @@ const NumberInputRaw = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((
         props
       ], "p0.step??1"),
       type: "number",
-      value: _fnSignal((p0) => p0.value, [
-        store
-      ], "p0.value")
+      value: _fnSignal((p0) => p0.value ?? 0, [
+        props
+      ], "p0.value??0")
     }, 0, "gk_5"),
     /* @__PURE__ */ _jsxC(Button, {
+      size: "sm",
       get color() {
         return props.input ? "gray" : "darkgray";
       },
       "aria-label": "Increment",
       "data-action": "increment",
-      disabled: props1.max ? store.value >= props1.max : false,
-      onClick$: /* @__PURE__ */ inlinedQrl((event, element) => {
-        const [props2, store2] = useLexicalScope();
-        store2.value = store2.value + (props2.step ?? 1);
-        props2.onIncrement$(event, element, store2);
+      disabled: props1.max ? (props.value ?? 0) >= props1.max : false,
+      onClick$: props.input ? /* @__PURE__ */ inlinedQrl((event, element) => {
+        const [props2] = useLexicalScope();
+        const siblingInput = element.previousElementSibling;
+        siblingInput.stepUp();
+        props2.onIncrement$(event, element, siblingInput);
       }, "NumberInputRaw_component_div_Button_onClick_1_UzVlUpg1uGs", [
-        props,
-        store
-      ]),
+        props
+      ]) : props.onIncrement$,
       get class() {
         return {
           "ml-2": props.input
@@ -1015,9 +1014,9 @@ const NumberInputRaw = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((
           props
         ], 'p0.input?"gray":"darkgray"'),
         "data-action": _IMMUTABLE,
-        onClick$: _IMMUTABLE
+        size: _IMMUTABLE
       }
-    }, 1, "gk_7")
+    }, 0, "gk_7")
   ], 1, "gk_8");
 }, "NumberInputRaw_component_8sGf0eS1rvo"));
 const ChevronDown = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
@@ -1104,6 +1103,7 @@ const SelectInputRaw = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((
       ], "p0.id")
     }, 0, null),
     /* @__PURE__ */ _jsxC(Button, {
+      size: "sm",
       get class() {
         return {
           "flex focus:bg-gray-700": true,
@@ -1149,7 +1149,8 @@ const SelectInputRaw = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((
         }), [
           props
         ], '{"flex focus:bg-gray-700":true,...p0.class}'),
-        onClick$: _IMMUTABLE
+        onClick$: _IMMUTABLE,
+        size: _IMMUTABLE
       }
     }, 1, "cA_4"),
     /* @__PURE__ */ _jsxQ("div", {
@@ -1279,7 +1280,7 @@ const Toggle = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) =
     props.label && /* @__PURE__ */ _jsxQ("label", {
       for: _wrapSignal(props1, "id")
     }, {
-      class: "text-gray-300"
+      class: "text-gray-300 flex gap-2"
     }, _fnSignal((p0) => p0.label, [
       props
     ], "p0.label"), 3, "yu_0")

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

@@ -2,12 +2,8 @@ import type { PropsOf, QRL } from '@builder.io/qwik';
 interface NumberInputRawProps extends Omit<(PropsOf<'input'> & {
     type: 'number';
 }), 'class' | 'type'> {
-    onDecrement$: QRL<(event: PointerEvent, element: HTMLButtonElement, store: {
-        value: number;
-    }) => void>;
-    onIncrement$: QRL<(event: PointerEvent, element: HTMLButtonElement, store: {
-        value: number;
-    }) => void>;
+    onDecrement$: QRL<(event: PointerEvent, element: HTMLButtonElement, inputElement?: HTMLInputElement) => void>;
+    onIncrement$: QRL<(event: PointerEvent, element: HTMLButtonElement, inputElement?: HTMLInputElement) => void>;
     input?: boolean;
     class?: {
         [key: string]: boolean;

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

@@ -9,7 +9,7 @@ export interface TextInputRawProps extends Omit<(PropsOf<'input'> & {
 interface TextInputProps extends Omit<TextInputRawProps, 'children'> {
     id: string;
 }
-export declare const InputClasses = "transition ease-in-out text-lg border border-gray-700 bg-gray-800 text-gray-50 hover:bg-gray-700 hover:shadow-lg focus:bg-gray-700 focus:outline-none focus:border-gray-400 rounded-md px-3 py-2";
+export declare const InputClasses = "transition ease-in-out border border-gray-700 bg-gray-800 text-gray-50 hover:bg-gray-700 hover:shadow-lg focus:bg-gray-700 focus:outline-none focus:border-gray-400 rounded-md px-2.5 py-1.5";
 export declare const TextInput: import("@builder.io/qwik").Component<TextInputProps>;
 export declare const TextInputRaw: import("@builder.io/qwik").Component<TextInputRawProps>;
 export {};

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

@@ -1,4 +1,4 @@
-import type { PropsOf } from '@builder.io/qwik';
+import type { JSXOutput, PropsOf } from '@builder.io/qwik';
 interface ToggleProps extends Omit<(PropsOf<'input'> & {
     type: 'checkbox';
 }), 'class' | 'bind:checked' | 'type' | 'children'> {
@@ -6,7 +6,7 @@ interface ToggleProps extends Omit<(PropsOf<'input'> & {
         [key: string]: boolean;
     };
     center?: boolean;
-    label?: string;
+    label?: string | JSXOutput;
 }
 export declare const Toggle: import("@builder.io/qwik").Component<ToggleProps>;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@luminescent/ui",
-  "version": "0.8.1",
+  "version": "0.9.0",
   "description": "Luminescent UI library",
   "main": "./lib/index.qwik.mjs",
   "qwik": "./lib/index.qwik.mjs",