@luminescent/ui 0.8.2 → 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}`;
@@ -918,6 +918,7 @@ 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";
       },
@@ -955,7 +956,8 @@ const NumberInputRaw = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.in
         color: qwik._fnSignal((p0) => p0.input ? "gray" : "darkgray", [
           props
         ], 'p0.input?"gray":"darkgray"'),
-        "data-action": qwik._IMMUTABLE
+        "data-action": qwik._IMMUTABLE,
+        size: qwik._IMMUTABLE
       }
     }, 0, "gk_4"),
     props.input && /* @__PURE__ */ qwik._jsxS("input", {
@@ -975,6 +977,7 @@ const NumberInputRaw = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.in
       ], "p0.value??0")
     }, 0, "gk_5"),
     /* @__PURE__ */ qwik._jsxC(Button, {
+      size: "sm",
       get color() {
         return props.input ? "gray" : "darkgray";
       },
@@ -1012,7 +1015,8 @@ const NumberInputRaw = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.in
         color: qwik._fnSignal((p0) => p0.input ? "gray" : "darkgray", [
           props
         ], 'p0.input?"gray":"darkgray"'),
-        "data-action": qwik._IMMUTABLE
+        "data-action": qwik._IMMUTABLE,
+        size: qwik._IMMUTABLE
       }
     }, 0, "gk_7")
   ], 1, "gk_8");
@@ -1101,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,
@@ -1146,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", {
@@ -1276,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}`;
@@ -916,6 +916,7 @@ 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";
       },
@@ -953,7 +954,8 @@ const NumberInputRaw = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((
         color: _fnSignal((p0) => p0.input ? "gray" : "darkgray", [
           props
         ], 'p0.input?"gray":"darkgray"'),
-        "data-action": _IMMUTABLE
+        "data-action": _IMMUTABLE,
+        size: _IMMUTABLE
       }
     }, 0, "gk_4"),
     props.input && /* @__PURE__ */ _jsxS("input", {
@@ -973,6 +975,7 @@ const NumberInputRaw = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((
       ], "p0.value??0")
     }, 0, "gk_5"),
     /* @__PURE__ */ _jsxC(Button, {
+      size: "sm",
       get color() {
         return props.input ? "gray" : "darkgray";
       },
@@ -1010,7 +1013,8 @@ const NumberInputRaw = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((
         color: _fnSignal((p0) => p0.input ? "gray" : "darkgray", [
           props
         ], 'p0.input?"gray":"darkgray"'),
-        "data-action": _IMMUTABLE
+        "data-action": _IMMUTABLE,
+        size: _IMMUTABLE
       }
     }, 0, "gk_7")
   ], 1, "gk_8");
@@ -1099,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,
@@ -1144,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", {
@@ -1274,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/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.2",
+  "version": "0.9.0",
   "description": "Luminescent UI library",
   "main": "./lib/index.qwik.mjs",
   "qwik": "./lib/index.qwik.mjs",