@luminescent/ui 0.3.5 → 0.4.0

package/lib/index.qwik.cjs

@@ -226,6 +226,10 @@ const Card = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl((
     "row",
     "blobs"
   ]);
+  qwik.useStylesQrl(/* @__PURE__ */ qwik.inlinedQrl(`
+    .-animation-delay-5 { animation-delay: -5s; }
+    .-animation-delay-10 { animation-delay: -10s; }
+  `, "Card_component_useStyles_POiiuoB0EmE"));
   const blob = Math.round(Math.random() * 6);
   const button = !!props1.onClick$ || props.hoverable;
   return /* @__PURE__ */ qwik._jsxS("div", {
@@ -352,14 +356,12 @@ const TextInput = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlined
       for: qwik._fnSignal((p0) => p0.id, [
         props
       ], "p0.id")
-    }, qwik._fnSignal((p0) => p0.label, [
-      props
-    ], "p0.label"), 3, null),
+    }, /* @__PURE__ */ qwik._jsxC(qwik.Slot, null, 3, "dC_0"), 1, null),
     /* @__PURE__ */ qwik._jsxC(TextInputRaw, {
       ...props,
       children: void 0
-    }, 0, "dC_0")
-  ], 1, "dC_1");
+    }, 0, "dC_1")
+  ], 1, "dC_2");
 }, "TextInput_component_AXp2j5aulZI"));
 const TextInputRaw = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl((props) => {
   return /* @__PURE__ */ qwik._jsxS("input", {
@@ -368,7 +370,7 @@ const TextInputRaw = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inli
       "transition ease-in-out text-lg border border-gray-700 bg-gray-800 text-gray-50 hover:bg-gray-700 focus:bg-gray-700 rounded-md px-3 py-2": true,
       ...props.class
     }
-  }, null, 0, "dC_2");
+  }, null, 0, "dC_3");
 }, "TextInputRaw_component_ssloWlmBB4w"));
 const clamp = (value, min, max) => Math.min(Math.max(value, min), max);
 function getMousePosition(e) {
@@ -876,15 +878,103 @@ const ColorInput = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inline
     "value",
     "presetColors"
   ]);
+  qwik.useStylesQrl(/* @__PURE__ */ qwik.inlinedQrl(`
+    .color-picker {
+      display: flex;
+      gap: 12px;
+      height: 185px !important;
+      width: 100% !important;
+      padding: 15px;
+      border-radius: 10px;
+      border: 1px solid rgb(31 41 55);
+      filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.5));
+      background: rgba(31 41 55 / 40%);
+      backdrop-filter: blur(10px);
+      user-select: none;
+      position: relative;
+    }
+
+    .color-picker-saturation {
+      position: relative;
+      height: 100%;
+      width: 100%;
+      background: linear-gradient(to right, #FFFFFF, #FF0000);
+      float: left;
+      border-radius: 5px;
+      border: 1px solid rgb(31 41 55);
+    }
+
+    .color-picker-brightness {
+      width: 100%;
+      height: 100%;
+      background: linear-gradient(rgba(255, 255, 255, 0), rgba(0, 0, 0, 1));
+    }
+
+    .color-picker-sbSelector {
+      border: 1px solid white;
+      position: absolute;
+      width: 14px;
+      height: 14px;
+      background: white;
+      border-radius: 10px;
+      top: -7px;
+      left: -7px;
+      box-sizing: border-box;
+      z-index: 10;
+    }
+
+    .color-picker-hue {
+      width: 8px;
+      border-radius: 5px;
+      height: 100%;
+      position: relative;
+      float: left;
+      background: linear-gradient(rgb(255, 0, 0) 0%, rgb(255, 0, 255) 17%, rgb(0, 0, 255) 34%, rgb(0, 255, 255) 50%, rgb(0, 255, 0) 67%, rgb(255, 255, 0) 84%, rgb(255, 0, 0) 100%);
+      border: 1px solid rgb(31 41 55);
+    }
+
+    .color-picker-colors {
+      height: 100%;
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      gap: 5px;
+      float: left;
+      justify-content: space-evenly;
+      flex-wrap: wrap;
+    }
+
+    .color-picker-color {
+      height: 25px;
+      width: 25px;
+      border-radius: 5px;
+      position: relative;
+      background: red;
+      border: 1px solid rgb(31 41 55);
+    }
+
+    .color-picker-hSelector {
+      border: 1px solid white;
+      position: absolute;
+      width: 14px;
+      height: 14px;
+      background: white;
+      border-radius: 10px;
+      top: -6px;
+      left: -4px;
+      box-sizing: border-box;
+      z-index: 10;
+    }
+  `, "ColorInput_component_useStyles_SMNFl4Oy0IA"));
   const store = qwik.useStore({
     value: (props.value ?? "#FFFFFF") || "#FFFFFF"
   });
   return /* @__PURE__ */ qwik._jsxQ("div", null, null, [
-    props1.label && /* @__PURE__ */ qwik._jsxQ("label", {
+    /* @__PURE__ */ qwik._jsxQ("label", {
       for: qwik._wrapSignal(props1, "id")
     }, {
       class: "mb-2 flex"
-    }, qwik._wrapSignal(props1, "label"), 1, "0s_0"),
+    }, /* @__PURE__ */ qwik._jsxC(qwik.Slot, null, 3, "0s_0"), 1, null),
     /* @__PURE__ */ qwik._jsxC(TextInputRaw, {
       ...props1,
       get value() {
@@ -1006,13 +1096,12 @@ const NumberInput = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlin
       for: qwik._fnSignal((p0) => p0.id, [
         props
       ], "p0.id")
-    }, qwik._fnSignal((p0) => p0.label, [
-      props
-    ], "p0.label"), 3, null),
+    }, /* @__PURE__ */ qwik._jsxC(qwik.Slot, null, 3, "gk_0"), 1, null),
     /* @__PURE__ */ qwik._jsxC(NumberInputRaw, {
-      ...props
-    }, 0, "gk_0")
-  ], 1, "gk_1");
+      ...props,
+      children: void 0
+    }, 0, "gk_1")
+  ], 1, "gk_2");
 }, "NumberInput_component_1NmuE0VG00M"));
 const NumberInputRaw = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl((props) => {
   const props1 = qwik._restProps(props, [
@@ -1059,7 +1148,7 @@ const NumberInputRaw = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.in
         class: qwik._IMMUTABLE,
         width: qwik._IMMUTABLE
       }
-    }, 3, "gk_2"), 1, null),
+    }, 3, "gk_3"), 1, null),
     props.input && /* @__PURE__ */ qwik._jsxS("input", {
       ...props1,
       class: {
@@ -1074,7 +1163,7 @@ const NumberInputRaw = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.in
       value: qwik._fnSignal((p0) => p0.value, [
         store
       ], "p0.value")
-    }, 0, "gk_3"),
+    }, 0, "gk_4"),
     /* @__PURE__ */ qwik._jsxQ("button", {
       class: {
         "flex justify-center items-center transition ease-in-out border border-gray-700 bg-gray-800 text-2xl hover:bg-gray-600 h-full py-1.5 cursor-pointer": true,
@@ -1101,8 +1190,8 @@ const NumberInputRaw = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.in
         class: qwik._IMMUTABLE,
         width: qwik._IMMUTABLE
       }
-    }, 3, "gk_4"), 1, null)
-  ], 1, "gk_5");
+    }, 3, "gk_5"), 1, null)
+  ], 1, "gk_6");
 }, "NumberInputRaw_component_8sGf0eS1rvo"));
 const OutputField = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl((props) => {
   return /* @__PURE__ */ qwik._jsxQ("div", null, {
@@ -1113,13 +1202,12 @@ const OutputField = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlin
       for: qwik._fnSignal((p0) => p0.id, [
         props
       ], "p0.id")
-    }, qwik._fnSignal((p0) => p0.label, [
-      props
-    ], "p0.label"), 3, null),
+    }, /* @__PURE__ */ qwik._jsxC(qwik.Slot, null, 3, "ze_0"), 1, null),
     /* @__PURE__ */ qwik._jsxC(OutputFieldRaw, {
-      ...props
-    }, 0, "ze_0")
-  ], 1, "ze_1");
+      ...props,
+      children: void 0
+    }, 0, "ze_1")
+  ], 1, "ze_2");
 }, "OutputField_component_6Kc38ThYgF4"));
 const OutputFieldRaw = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl((props) => {
   const props1 = qwik._restProps(props, [
@@ -1166,7 +1254,7 @@ const OutputFieldRaw = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.in
         dangerouslySetInnerHTML: qwik._wrapSignal(alert, "text")
       }, null, null, 3, `output-alert${i}`))
     ]
-  }, 1, "ze_2");
+  }, 1, "ze_3");
 }, "OutputFieldRaw_component_OxiM0W3AR0o"));
 const SelectInput = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl((props) => {
   return /* @__PURE__ */ qwik._jsxQ("div", null, {
@@ -1177,14 +1265,17 @@ const SelectInput = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlin
       for: qwik._fnSignal((p0) => p0.id, [
         props
       ], "p0.id")
-    }, qwik._fnSignal((p0) => p0.label, [
-      props
-    ], "p0.label"), 3, null),
+    }, /* @__PURE__ */ qwik._jsxC(qwik.Slot, {
+      name: "label",
+      [qwik._IMMUTABLE]: {
+        name: qwik._IMMUTABLE
+      }
+    }, 3, "cA_0"), 1, null),
     /* @__PURE__ */ qwik._jsxC(SelectInputRaw, {
       ...props,
-      children: /* @__PURE__ */ qwik._jsxC(qwik.Slot, null, 3, "cA_0")
-    }, 0, "cA_1")
-  ], 1, "cA_2");
+      children: /* @__PURE__ */ qwik._jsxC(qwik.Slot, null, 3, "cA_1")
+    }, 0, "cA_2")
+  ], 1, "cA_3");
 }, "SelectInput_component_m80ag1KuJSk"));
 const SelectInputRaw = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl((props) => {
   const props1 = qwik._restProps(props, [
@@ -1192,13 +1283,13 @@ const SelectInputRaw = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.in
   ]);
   return /* @__PURE__ */ qwik._jsxS("select", {
     ...props1,
-    children: /* @__PURE__ */ qwik._jsxC(qwik.Slot, null, 3, "cA_3"),
+    children: /* @__PURE__ */ qwik._jsxC(qwik.Slot, null, 3, "cA_4"),
     class: {
       "transition ease-in-out text-lg border border-gray-700 bg-gray-800 text-gray-50 hover:bg-gray-700 focus:bg-gray-700 rounded-md px-2 py-3": true,
       "border-0 bg-transparent": props.transparent,
       ...props1.class
     }
-  }, null, 0, "cA_4");
+  }, null, 0, "cA_5");
 }, "SelectInputRaw_component_Itdx5yPeQd4"));
 const TextAreaInput = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl((props) => {
   return /* @__PURE__ */ qwik._jsxQ("div", null, {
@@ -1209,13 +1300,11 @@ const TextAreaInput = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inl
       for: qwik._fnSignal((p0) => p0.id, [
         props
       ], "p0.id")
-    }, qwik._fnSignal((p0) => p0.label, [
-      props
-    ], "p0.label"), 3, null),
+    }, /* @__PURE__ */ qwik._jsxC(qwik.Slot, null, 3, "8U_0"), 1, null),
     /* @__PURE__ */ qwik._jsxC(TextAreaInputRaw, {
       ...props
-    }, 0, "8U_0")
-  ], 1, "8U_1");
+    }, 0, "8U_1")
+  ], 1, "8U_2");
 }, "TextAreaInput_component_5hzQkVgFVlw"));
 const TextAreaInputRaw = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl((props) => {
   return /* @__PURE__ */ qwik._jsxS("textarea", {
@@ -1224,11 +1313,10 @@ const TextAreaInputRaw = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.
       "transition ease-in-out text-lg border border-gray-700 bg-gray-800 text-gray-50 hover:bg-gray-700 focus:bg-gray-700 rounded-md px-3 py-2 resize-y w-full h-32": true,
       ...props.class
     }
-  }, null, 0, "8U_2");
+  }, null, 0, "8U_3");
 }, "TextAreaInputRaw_component_CupRtuvzbEs"));
 const Toggle = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl((props) => {
   const props1 = qwik._restProps(props, [
-    "label",
     "center"
   ]);
   return /* @__PURE__ */ qwik._jsxQ("div", null, {
@@ -1260,13 +1348,11 @@ const Toggle = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl
         }
       }, null, 3, null)
     ], 1, null),
-    props.label && /* @__PURE__ */ qwik._jsxQ("label", {
+    /* @__PURE__ */ qwik._jsxQ("label", {
       for: qwik._wrapSignal(props1, "id")
     }, {
       class: "text-gray-100"
-    }, qwik._fnSignal((p0) => p0.label, [
-      props
-    ], "p0.label"), 3, "yu_0")
+    }, /* @__PURE__ */ qwik._jsxC(qwik.Slot, null, 3, "yu_0"), 1, null)
   ], 1, "yu_1");
 }, "Toggle_component_ujuOvR082hY"));
 const LogoBirdflop = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl((props) => {

package/lib/index.qwik.mjs

@@ -1,4 +1,4 @@
-import { componentQrl, inlinedQrl, _jsxQ, _fnSignal, _restProps, _jsxS, _jsxC, Slot, _jsxBranch, _IMMUTABLE, useStore, _wrapSignal, useLexicalScope } from "@builder.io/qwik";
+import { componentQrl, inlinedQrl, _jsxQ, _fnSignal, _restProps, _jsxS, _jsxC, Slot, useStylesQrl, _jsxBranch, _IMMUTABLE, useStore, _wrapSignal, useLexicalScope } from "@builder.io/qwik";
 import { isServer } from "@builder.io/qwik/build";
 import { Fragment } from "@builder.io/qwik/jsx-runtime";
 const Anchor = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => /* @__PURE__ */ _jsxQ("span", null, {
@@ -224,6 +224,10 @@ const Card = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) =>
     "row",
     "blobs"
   ]);
+  useStylesQrl(/* @__PURE__ */ inlinedQrl(`
+    .-animation-delay-5 { animation-delay: -5s; }
+    .-animation-delay-10 { animation-delay: -10s; }
+  `, "Card_component_useStyles_POiiuoB0EmE"));
   const blob = Math.round(Math.random() * 6);
   const button = !!props1.onClick$ || props.hoverable;
   return /* @__PURE__ */ _jsxS("div", {
@@ -350,14 +354,12 @@ const TextInput = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props
       for: _fnSignal((p0) => p0.id, [
         props
       ], "p0.id")
-    }, _fnSignal((p0) => p0.label, [
-      props
-    ], "p0.label"), 3, null),
+    }, /* @__PURE__ */ _jsxC(Slot, null, 3, "dC_0"), 1, null),
     /* @__PURE__ */ _jsxC(TextInputRaw, {
       ...props,
       children: void 0
-    }, 0, "dC_0")
-  ], 1, "dC_1");
+    }, 0, "dC_1")
+  ], 1, "dC_2");
 }, "TextInput_component_AXp2j5aulZI"));
 const TextInputRaw = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
   return /* @__PURE__ */ _jsxS("input", {
@@ -366,7 +368,7 @@ const TextInputRaw = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pr
       "transition ease-in-out text-lg border border-gray-700 bg-gray-800 text-gray-50 hover:bg-gray-700 focus:bg-gray-700 rounded-md px-3 py-2": true,
       ...props.class
     }
-  }, null, 0, "dC_2");
+  }, null, 0, "dC_3");
 }, "TextInputRaw_component_ssloWlmBB4w"));
 const clamp = (value, min, max) => Math.min(Math.max(value, min), max);
 function getMousePosition(e) {
@@ -874,15 +876,103 @@ const ColorInput = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((prop
     "value",
     "presetColors"
   ]);
+  useStylesQrl(/* @__PURE__ */ inlinedQrl(`
+    .color-picker {
+      display: flex;
+      gap: 12px;
+      height: 185px !important;
+      width: 100% !important;
+      padding: 15px;
+      border-radius: 10px;
+      border: 1px solid rgb(31 41 55);
+      filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.5));
+      background: rgba(31 41 55 / 40%);
+      backdrop-filter: blur(10px);
+      user-select: none;
+      position: relative;
+    }
+
+    .color-picker-saturation {
+      position: relative;
+      height: 100%;
+      width: 100%;
+      background: linear-gradient(to right, #FFFFFF, #FF0000);
+      float: left;
+      border-radius: 5px;
+      border: 1px solid rgb(31 41 55);
+    }
+
+    .color-picker-brightness {
+      width: 100%;
+      height: 100%;
+      background: linear-gradient(rgba(255, 255, 255, 0), rgba(0, 0, 0, 1));
+    }
+
+    .color-picker-sbSelector {
+      border: 1px solid white;
+      position: absolute;
+      width: 14px;
+      height: 14px;
+      background: white;
+      border-radius: 10px;
+      top: -7px;
+      left: -7px;
+      box-sizing: border-box;
+      z-index: 10;
+    }
+
+    .color-picker-hue {
+      width: 8px;
+      border-radius: 5px;
+      height: 100%;
+      position: relative;
+      float: left;
+      background: linear-gradient(rgb(255, 0, 0) 0%, rgb(255, 0, 255) 17%, rgb(0, 0, 255) 34%, rgb(0, 255, 255) 50%, rgb(0, 255, 0) 67%, rgb(255, 255, 0) 84%, rgb(255, 0, 0) 100%);
+      border: 1px solid rgb(31 41 55);
+    }
+
+    .color-picker-colors {
+      height: 100%;
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      gap: 5px;
+      float: left;
+      justify-content: space-evenly;
+      flex-wrap: wrap;
+    }
+
+    .color-picker-color {
+      height: 25px;
+      width: 25px;
+      border-radius: 5px;
+      position: relative;
+      background: red;
+      border: 1px solid rgb(31 41 55);
+    }
+
+    .color-picker-hSelector {
+      border: 1px solid white;
+      position: absolute;
+      width: 14px;
+      height: 14px;
+      background: white;
+      border-radius: 10px;
+      top: -6px;
+      left: -4px;
+      box-sizing: border-box;
+      z-index: 10;
+    }
+  `, "ColorInput_component_useStyles_SMNFl4Oy0IA"));
   const store = useStore({
     value: (props.value ?? "#FFFFFF") || "#FFFFFF"
   });
   return /* @__PURE__ */ _jsxQ("div", null, null, [
-    props1.label && /* @__PURE__ */ _jsxQ("label", {
+    /* @__PURE__ */ _jsxQ("label", {
       for: _wrapSignal(props1, "id")
     }, {
       class: "mb-2 flex"
-    }, _wrapSignal(props1, "label"), 1, "0s_0"),
+    }, /* @__PURE__ */ _jsxC(Slot, null, 3, "0s_0"), 1, null),
     /* @__PURE__ */ _jsxC(TextInputRaw, {
       ...props1,
       get value() {
@@ -1004,13 +1094,12 @@ const NumberInput = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pro
       for: _fnSignal((p0) => p0.id, [
         props
       ], "p0.id")
-    }, _fnSignal((p0) => p0.label, [
-      props
-    ], "p0.label"), 3, null),
+    }, /* @__PURE__ */ _jsxC(Slot, null, 3, "gk_0"), 1, null),
     /* @__PURE__ */ _jsxC(NumberInputRaw, {
-      ...props
-    }, 0, "gk_0")
-  ], 1, "gk_1");
+      ...props,
+      children: void 0
+    }, 0, "gk_1")
+  ], 1, "gk_2");
 }, "NumberInput_component_1NmuE0VG00M"));
 const NumberInputRaw = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
   const props1 = _restProps(props, [
@@ -1057,7 +1146,7 @@ const NumberInputRaw = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((
         class: _IMMUTABLE,
         width: _IMMUTABLE
       }
-    }, 3, "gk_2"), 1, null),
+    }, 3, "gk_3"), 1, null),
     props.input && /* @__PURE__ */ _jsxS("input", {
       ...props1,
       class: {
@@ -1072,7 +1161,7 @@ const NumberInputRaw = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((
       value: _fnSignal((p0) => p0.value, [
         store
       ], "p0.value")
-    }, 0, "gk_3"),
+    }, 0, "gk_4"),
     /* @__PURE__ */ _jsxQ("button", {
       class: {
         "flex justify-center items-center transition ease-in-out border border-gray-700 bg-gray-800 text-2xl hover:bg-gray-600 h-full py-1.5 cursor-pointer": true,
@@ -1099,8 +1188,8 @@ const NumberInputRaw = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((
         class: _IMMUTABLE,
         width: _IMMUTABLE
       }
-    }, 3, "gk_4"), 1, null)
-  ], 1, "gk_5");
+    }, 3, "gk_5"), 1, null)
+  ], 1, "gk_6");
 }, "NumberInputRaw_component_8sGf0eS1rvo"));
 const OutputField = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
   return /* @__PURE__ */ _jsxQ("div", null, {
@@ -1111,13 +1200,12 @@ const OutputField = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pro
       for: _fnSignal((p0) => p0.id, [
         props
       ], "p0.id")
-    }, _fnSignal((p0) => p0.label, [
-      props
-    ], "p0.label"), 3, null),
+    }, /* @__PURE__ */ _jsxC(Slot, null, 3, "ze_0"), 1, null),
     /* @__PURE__ */ _jsxC(OutputFieldRaw, {
-      ...props
-    }, 0, "ze_0")
-  ], 1, "ze_1");
+      ...props,
+      children: void 0
+    }, 0, "ze_1")
+  ], 1, "ze_2");
 }, "OutputField_component_6Kc38ThYgF4"));
 const OutputFieldRaw = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
   const props1 = _restProps(props, [
@@ -1164,7 +1252,7 @@ const OutputFieldRaw = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((
         dangerouslySetInnerHTML: _wrapSignal(alert, "text")
       }, null, null, 3, `output-alert${i}`))
     ]
-  }, 1, "ze_2");
+  }, 1, "ze_3");
 }, "OutputFieldRaw_component_OxiM0W3AR0o"));
 const SelectInput = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
   return /* @__PURE__ */ _jsxQ("div", null, {
@@ -1175,14 +1263,17 @@ const SelectInput = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pro
       for: _fnSignal((p0) => p0.id, [
         props
       ], "p0.id")
-    }, _fnSignal((p0) => p0.label, [
-      props
-    ], "p0.label"), 3, null),
+    }, /* @__PURE__ */ _jsxC(Slot, {
+      name: "label",
+      [_IMMUTABLE]: {
+        name: _IMMUTABLE
+      }
+    }, 3, "cA_0"), 1, null),
     /* @__PURE__ */ _jsxC(SelectInputRaw, {
       ...props,
-      children: /* @__PURE__ */ _jsxC(Slot, null, 3, "cA_0")
-    }, 0, "cA_1")
-  ], 1, "cA_2");
+      children: /* @__PURE__ */ _jsxC(Slot, null, 3, "cA_1")
+    }, 0, "cA_2")
+  ], 1, "cA_3");
 }, "SelectInput_component_m80ag1KuJSk"));
 const SelectInputRaw = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
   const props1 = _restProps(props, [
@@ -1190,13 +1281,13 @@ const SelectInputRaw = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((
   ]);
   return /* @__PURE__ */ _jsxS("select", {
     ...props1,
-    children: /* @__PURE__ */ _jsxC(Slot, null, 3, "cA_3"),
+    children: /* @__PURE__ */ _jsxC(Slot, null, 3, "cA_4"),
     class: {
       "transition ease-in-out text-lg border border-gray-700 bg-gray-800 text-gray-50 hover:bg-gray-700 focus:bg-gray-700 rounded-md px-2 py-3": true,
       "border-0 bg-transparent": props.transparent,
       ...props1.class
     }
-  }, null, 0, "cA_4");
+  }, null, 0, "cA_5");
 }, "SelectInputRaw_component_Itdx5yPeQd4"));
 const TextAreaInput = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
   return /* @__PURE__ */ _jsxQ("div", null, {
@@ -1207,13 +1298,11 @@ const TextAreaInput = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((p
       for: _fnSignal((p0) => p0.id, [
         props
       ], "p0.id")
-    }, _fnSignal((p0) => p0.label, [
-      props
-    ], "p0.label"), 3, null),
+    }, /* @__PURE__ */ _jsxC(Slot, null, 3, "8U_0"), 1, null),
     /* @__PURE__ */ _jsxC(TextAreaInputRaw, {
       ...props
-    }, 0, "8U_0")
-  ], 1, "8U_1");
+    }, 0, "8U_1")
+  ], 1, "8U_2");
 }, "TextAreaInput_component_5hzQkVgFVlw"));
 const TextAreaInputRaw = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
   return /* @__PURE__ */ _jsxS("textarea", {
@@ -1222,11 +1311,10 @@ const TextAreaInputRaw = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl
       "transition ease-in-out text-lg border border-gray-700 bg-gray-800 text-gray-50 hover:bg-gray-700 focus:bg-gray-700 rounded-md px-3 py-2 resize-y w-full h-32": true,
       ...props.class
     }
-  }, null, 0, "8U_2");
+  }, null, 0, "8U_3");
 }, "TextAreaInputRaw_component_CupRtuvzbEs"));
 const Toggle = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
   const props1 = _restProps(props, [
-    "label",
     "center"
   ]);
   return /* @__PURE__ */ _jsxQ("div", null, {
@@ -1258,13 +1346,11 @@ const Toggle = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) =
         }
       }, null, 3, null)
     ], 1, null),
-    props.label && /* @__PURE__ */ _jsxQ("label", {
+    /* @__PURE__ */ _jsxQ("label", {
       for: _wrapSignal(props1, "id")
     }, {
       class: "text-gray-100"
-    }, _fnSignal((p0) => p0.label, [
-      props
-    ], "p0.label"), 3, "yu_0")
+    }, /* @__PURE__ */ _jsxC(Slot, null, 3, "yu_0"), 1, null)
   ], 1, "yu_1");
 }, "Toggle_component_ujuOvR082hY"));
 const LogoBirdflop = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {

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

@@ -1,9 +1,8 @@
 import type { QRL } from '@builder.io/qwik';
 import type { TextInputRawProps } from './TextInput';
-interface ColorInputProps extends Omit<TextInputRawProps, 'onInput$'> {
+interface ColorInputProps extends Omit<TextInputRawProps, 'onInput$' | 'children'> {
     onInput$?: QRL<(color: string, element: HTMLInputElement) => void>;
     value?: string;
-    label?: string;
     presetColors?: string[];
 }
 export declare const ColorInput: import("@builder.io/qwik").Component<ColorInputProps>;

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

@@ -1,4 +1,4 @@
-import type { PropsOf, QRL } from '@builder.io/qwik';
+import type { JSXChildren, PropsOf, QRL } from '@builder.io/qwik';
 interface NumberInputRawProps extends Omit<(PropsOf<'input'> & {
     type: 'number';
 }), 'class' | 'type'> {
@@ -17,9 +17,9 @@ interface NumberInputRawProps extends Omit<(PropsOf<'input'> & {
     max?: number;
     step?: number;
 }
-interface NumberInputProps extends NumberInputRawProps {
+interface NumberInputProps extends Omit<NumberInputRawProps, 'children'> {
     id: string;
-    label: string;
+    children?: JSXChildren;
 }
 export declare const NumberInput: import("@builder.io/qwik").Component<NumberInputProps>;
 export declare const NumberInputRaw: import("@builder.io/qwik").Component<NumberInputRawProps>;

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

@@ -11,9 +11,8 @@ interface OutputFieldRawProps extends Omit<PropsOf<'textarea'>, 'class' | 'onCha
     };
     onChange$?: QRL<(event: Event, element: HTMLTextAreaElement, alertsStore: alertsStore) => any>;
 }
-interface OutputFieldProps extends OutputFieldRawProps {
+interface OutputFieldProps extends Omit<OutputFieldRawProps, 'children'> {
     id: string;
-    label: string;
 }
 export declare const OutputField: import("@builder.io/qwik").Component<OutputFieldProps>;
 export declare const OutputFieldRaw: import("@builder.io/qwik").Component<OutputFieldRawProps>;

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

@@ -7,7 +7,6 @@ interface SelectInputRawProps extends Omit<PropsOf<'select'>, 'class'> {
 }
 interface SelectInputProps extends SelectInputRawProps {
     id: string;
-    label: string;
 }
 export declare const SelectInput: import("@builder.io/qwik").Component<SelectInputProps>;
 export declare const SelectInputRaw: import("@builder.io/qwik").Component<SelectInputRawProps>;

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

@@ -4,9 +4,8 @@ export interface TextAreaRawProps extends Omit<PropsOf<'textarea'>, 'class'> {
         [key: string]: boolean;
     };
 }
-interface TextAreaProps extends TextAreaRawProps {
+interface TextAreaProps extends Omit<TextAreaRawProps, 'children'> {
     id: string;
-    label: string;
 }
 export declare const TextAreaInput: import("@builder.io/qwik").Component<TextAreaProps>;
 export declare const TextAreaInputRaw: import("@builder.io/qwik").Component<TextAreaRawProps>;

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

@@ -8,7 +8,6 @@ export interface TextInputRawProps extends Omit<(PropsOf<'input'> & {
 }
 interface TextInputProps extends Omit<TextInputRawProps, 'children'> {
     id: string;
-    label: string;
 }
 export declare const TextInput: import("@builder.io/qwik").Component<TextInputProps>;
 export declare const TextInputRaw: import("@builder.io/qwik").Component<TextInputRawProps>;

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

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

package/package.json

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