@luminescent/ui 0.6.1 → 0.7.0

package/lib/index.qwik.cjs

@@ -58,28 +58,6 @@ const ButtonAnchor = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inli
     children: /* @__PURE__ */ qwik._jsxC(qwik.Slot, null, 3, "7H_2")
   }, null, 0, "7H_3");
 }, "ButtonAnchor_component_vQT9xS0lqew"));
-const LoadingIcon = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl((props) => {
-  const props1 = qwik._restProps(props, [
-    "width",
-    "speed"
-  ]);
-  return /* @__PURE__ */ qwik._jsxS("div", {
-    ...props1,
-    class: {
-      "animate-spin rounded-full border-transparent border-l-current border-t-current": true,
-      ...props1.class
-    }
-  }, {
-    style: qwik._fnSignal((p0) => ({
-      borderWidth: p0.width / 8,
-      width: p0.width,
-      height: p0.width,
-      animation: `spin ${p0.speed ?? "0.6s"} ease-in-out infinite`
-    }), [
-      props
-    ], '{borderWidth:p0.width/8,width:p0.width,height:p0.width,animation:`spin ${p0.speed??"0.6s"} ease-in-out infinite`}')
-  }, 0, "1A_0");
-}, "LoadingIcon_component_QMsA9D0RcAM"));
 const cardColorClasses = {
   pink: {
     card: {
@@ -187,28 +165,28 @@ const cardColorClasses = {
   },
   darkgray: {
     card: {
-      bg_blobs: "bg-gray-800/10 border-gray-800/20",
+      bg_blobs: "bg-gray-800/10 border-gray-800/40",
       bg: "bg-gray-800/60 border-gray-800",
-      hover: "hover:bg-gray-800/20",
-      click: "active:bg-gray-700/20"
+      hover: "hover:bg-gray-800/40",
+      click: "active:bg-gray-700/40"
     },
     blobs: [
-      "bg-gray-400",
       "bg-gray-500",
-      "bg-gray-600"
+      "bg-gray-600",
+      "bg-gray-700"
     ]
   },
   darkergray: {
     card: {
-      bg_blobs: "bg-gray-900/10 border-gray-900/20",
+      bg_blobs: "bg-gray-900/10 border-gray-900/50",
       bg: "bg-gray-900/60 border-gray-900",
-      hover: "hover:bg-gray-900/20",
-      click: "active:bg-gray-800/20"
+      hover: "hover:bg-gray-900/50",
+      click: "active:bg-gray-800/50"
     },
     blobs: [
-      "bg-gray-400",
-      "bg-gray-500",
-      "bg-gray-600"
+      "bg-gray-600",
+      "bg-gray-700",
+      "bg-gray-800"
     ]
   }
 };
@@ -225,36 +203,30 @@ const Card = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl((
   const props1 = qwik._restProps(props, [
     "color",
     "hover",
-    "href",
     "row",
     "blobs"
   ]);
   const blob = Math.round(Math.random() * 6);
-  return /* @__PURE__ */ qwik._jsxS("div", {
+  let Component = /* @__PURE__ */ qwik._jsxS("div", {
     ...props1,
-    children: /* @__PURE__ */ qwik._jsxQ("div", null, {
-      class: {
-        "p-8": true
-      }
+    children: /* @__PURE__ */ qwik._jsxC(qwik.Slot, null, 3, "OW_0"),
+    class: {
+      "flex gap-4 p-8 border rounded-lg transition-all": true,
+      [cardColorClasses[props.color ?? "darkgray"].card.bg]: !props.blobs,
+      [cardColorClasses[props.color ?? "darkgray"].card.bg_blobs]: props.blobs,
+      [cardColorClasses[props.color ?? "darkgray"].card.hover + " hover:shadow-lg"]: props.hover,
+      [cardColorClasses[props.color ?? "darkgray"].card.click + " active:scale-[99%] cursor-pointer select-none"]: props.hover == "clickable",
+      "flex-col": !props.row,
+      "flex-row items-center": props.row,
+      ...props1.class
+    }
+  }, null, 0, "OW_1");
+  if (props.blobs)
+    Component = /* @__PURE__ */ qwik._jsxQ("div", null, {
+      class: "relative"
     }, [
-      props.href && /* @__PURE__ */ qwik._jsxQ("a", null, {
-        class: "absolute inset-0 z-20",
-        href: qwik._fnSignal((p0) => p0.href, [
-          props
-        ], "p0.href")
-      }, null, 3, "OW_0"),
+      Component,
       /* @__PURE__ */ qwik._jsxQ("div", null, {
-        class: "relative"
-      }, /* @__PURE__ */ qwik._jsxQ("div", null, {
-        class: qwik._fnSignal((p0) => ({
-          "flex gap-4": true,
-          "flex-col": !p0.row,
-          "flex-row items-center": p0.row
-        }), [
-          props
-        ], '{"flex gap-4":true,"flex-col":!p0.row,"flex-row items-center":p0.row}')
-      }, /* @__PURE__ */ qwik._jsxC(qwik.Slot, null, 3, "OW_1"), 1, null), 1, null),
-      props.blobs && /* @__PURE__ */ qwik._jsxQ("div", null, {
         class: "absolute -z-10 inset-0 w-full h-full transition-all overflow-clip animate-in fade-in anim-duration-[2s]",
         style: {
           containerType: "size"
@@ -283,64 +255,14 @@ const Card = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl((
             [cardColorClasses[props.color ?? "darkgray"].blobs[2]]: true
           }
         }, null, null, 3, null)
-      ], 1, "OW_2")
-    ], 1, null),
-    class: {
-      "flex-1 relative border rounded-lg group transition-all": true,
-      [cardColorClasses[props.color ?? "darkgray"].card.bg]: !props.blobs,
-      [cardColorClasses[props.color ?? "darkgray"].card.bg_blobs]: props.blobs,
-      [cardColorClasses[props.color ?? "darkgray"].card.hover + " hover:shadow-lg"]: props.hover,
-      [cardColorClasses[props.color ?? "darkgray"].card.click + " active:scale-[99%] cursor-pointer"]: props.hover == "clickable",
-      ...props1.class
-    }
-  }, null, 0, "OW_3");
+      ], 1, null)
+    ], 1, "OW_2");
+  if (props1.href)
+    Component = /* @__PURE__ */ qwik._jsxQ("a", {
+      href: qwik._wrapSignal(props1, "href")
+    }, null, Component, 1, "OW_3");
+  return Component;
 }, "Card_component_DlkkcTEVka4"));
-const CardHeader = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl((props) => {
-  qwik._jsxBranch();
-  return /* @__PURE__ */ qwik._jsxQ("h1", null, {
-    class: "flex font-bold text-gray-100 text-2xl"
-  }, [
-    props.id && /* @__PURE__ */ qwik._jsxC(Anchor, {
-      get id() {
-        return props.id;
-      },
-      [qwik._IMMUTABLE]: {
-        id: qwik._fnSignal((p0) => p0.id, [
-          props
-        ], "p0.id")
-      }
-    }, 3, "OW_4"),
-    /* @__PURE__ */ qwik._jsxQ("div", null, {
-      class: "flex flex-1"
-    }, /* @__PURE__ */ qwik._jsxQ("div", null, {
-      class: "flex flex-col"
-    }, [
-      /* @__PURE__ */ qwik._jsxQ("div", null, {
-        class: "flex items-center gap-3"
-      }, /* @__PURE__ */ qwik._jsxC(qwik.Slot, null, 3, "OW_5"), 1, null),
-      /* @__PURE__ */ qwik._jsxC(qwik.Slot, {
-        name: "subheader",
-        [qwik._IMMUTABLE]: {
-          name: qwik._IMMUTABLE
-        }
-      }, 3, "OW_6")
-    ], 1, null), 1, null),
-    (props.loading ?? false) && /* @__PURE__ */ qwik._jsxQ("div", null, {
-      class: qwik._fnSignal((p0) => ({
-        "transition-all": true,
-        "opacity-0": !(p0.loading ?? false),
-        "opacity-100": p0.loading ?? false
-      }), [
-        props
-      ], '{"transition-all":true,"opacity-0":!(p0.loading??false),"opacity-100":p0.loading??false}')
-    }, /* @__PURE__ */ qwik._jsxC(LoadingIcon, {
-      width: 24,
-      [qwik._IMMUTABLE]: {
-        width: qwik._IMMUTABLE
-      }
-    }, 3, "OW_7"), 1, "OW_8")
-  ], 1, "OW_9");
-}, "CardHeader_component_2xQZ6Uv7R4A"));
 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 TextInput = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl((props) => {
   return /* @__PURE__ */ qwik._jsxQ("div", null, {
@@ -1050,6 +972,80 @@ const ColorInput = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inline
     }, null, 3, null)
   ], 1, "0s_2");
 }, "ColorInput_component_jilGo0Bn3Ps"));
+const LoadingIcon = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl((props) => {
+  const props1 = qwik._restProps(props, [
+    "width",
+    "speed"
+  ]);
+  return /* @__PURE__ */ qwik._jsxS("div", {
+    ...props1,
+    class: {
+      "animate-spin rounded-full border-transparent border-l-current border-t-current": true,
+      ...props1.class
+    }
+  }, {
+    style: qwik._fnSignal((p0) => ({
+      borderWidth: p0.width / 8,
+      width: p0.width,
+      height: p0.width,
+      animation: `spin ${p0.speed ?? "0.6s"} ease-in-out infinite`
+    }), [
+      props
+    ], '{borderWidth:p0.width/8,width:p0.width,height:p0.width,animation:`spin ${p0.speed??"0.6s"} ease-in-out infinite`}')
+  }, 0, "1A_0");
+}, "LoadingIcon_component_QMsA9D0RcAM"));
+const Header = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl((props) => {
+  qwik._jsxBranch();
+  let Component = /* @__PURE__ */ qwik._jsxC(jsxRuntime.Fragment, {
+    children: /* @__PURE__ */ qwik._jsxQ("h2", null, {
+      class: "flex items-center font-bold text-2xl"
+    }, [
+      props.id && /* @__PURE__ */ qwik._jsxC(Anchor, {
+        get id() {
+          return props.id;
+        },
+        [qwik._IMMUTABLE]: {
+          id: qwik._fnSignal((p0) => p0.id, [
+            props
+          ], "p0.id")
+        }
+      }, 3, "dL_0"),
+      /* @__PURE__ */ qwik._jsxC(qwik.Slot, null, 3, "dL_1")
+    ], 1, null)
+  }, 1, "dL_2");
+  if (props.subheader)
+    Component = /* @__PURE__ */ qwik._jsxQ("div", null, {
+      class: "flex flex-1 flex-col gap-1"
+    }, [
+      Component,
+      /* @__PURE__ */ qwik._jsxQ("h3", null, {
+        class: "flex items-center text-gray-400"
+      }, qwik._fnSignal((p0) => p0.subheader, [
+        props
+      ], "p0.subheader"), 3, null)
+    ], 1, "dL_3");
+  if (props.loading !== void 0)
+    Component = /* @__PURE__ */ qwik._jsxQ("div", null, {
+      class: "flex"
+    }, [
+      Component,
+      /* @__PURE__ */ qwik._jsxQ("div", null, {
+        class: qwik._fnSignal((p0) => ({
+          "transition-all duration-200": true,
+          "opacity-0": !p0.loading,
+          "opacity-100": p0.loading
+        }), [
+          props
+        ], '{"transition-all duration-200":true,"opacity-0":!p0.loading,"opacity-100":p0.loading}')
+      }, /* @__PURE__ */ qwik._jsxC(LoadingIcon, {
+        width: 24,
+        [qwik._IMMUTABLE]: {
+          width: qwik._IMMUTABLE
+        }
+      }, 3, "dL_4"), 1, null)
+    ], 1, "dL_5");
+  return Component;
+}, "Header_component_FfGOhhBNG5k"));
 const Plus = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl((props) => {
   return /* @__PURE__ */ qwik._jsxS("svg", {
     ...props,
@@ -1298,7 +1294,7 @@ const SelectInputRaw = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.in
     /* @__PURE__ */ qwik._jsxC(Button, {
       get class() {
         return {
-          "flex": true,
+          "flex focus:bg-gray-700": true,
           ...props.class
         };
       },
@@ -1336,11 +1332,11 @@ const SelectInputRaw = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.in
       ]),
       [qwik._IMMUTABLE]: {
         class: qwik._fnSignal((p0) => ({
-          "flex": true,
+          "flex focus:bg-gray-700": true,
           ...p0.class
         }), [
           props
-        ], '{"flex":true,...p0.class}'),
+        ], '{"flex focus:bg-gray-700":true,...p0.class}'),
         onClick$: qwik._IMMUTABLE
       }
     }, 1, "cA_4"),
@@ -1434,7 +1430,8 @@ const TextAreaRaw = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlin
 }, "TextAreaRaw_component_PZiPScYxgNk"));
 const Toggle = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl((props) => {
   const props1 = qwik._restProps(props, [
-    "center"
+    "center",
+    "label"
   ]);
   return /* @__PURE__ */ qwik._jsxQ("div", null, {
     class: qwik._fnSignal((p0) => ({
@@ -1467,11 +1464,13 @@ const Toggle = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl
         }
       }, null, 3, null)
     ], 1, null),
-    /* @__PURE__ */ qwik._jsxQ("label", {
+    props.label && /* @__PURE__ */ qwik._jsxQ("label", {
       for: qwik._wrapSignal(props1, "id")
     }, {
       class: "text-gray-100"
-    }, /* @__PURE__ */ qwik._jsxC(qwik.Slot, null, 3, "yu_0"), 1, null)
+    }, qwik._fnSignal((p0) => p0.label, [
+      props
+    ], "p0.label"), 3, "yu_0")
   ], 1, "yu_1");
 }, "Toggle_component_ujuOvR082hY"));
 const LogoBirdflop = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl((props) => {
@@ -1913,8 +1912,8 @@ exports.Anchor = Anchor;
 exports.Button = Button;
 exports.ButtonAnchor = ButtonAnchor;
 exports.Card = Card;
-exports.CardHeader = CardHeader;
 exports.ColorInput = ColorInput;
+exports.Header = Header;
 exports.InputClasses = InputClasses;
 exports.LoadingIcon = LoadingIcon;
 exports.LogoBirdflop = LogoBirdflop;

package/lib/index.qwik.mjs

@@ -1,4 +1,4 @@
-import { componentQrl, inlinedQrl, _jsxQ, _fnSignal, _restProps, _jsxS, _jsxC, Slot, _jsxBranch, _IMMUTABLE, useStylesQrl, _wrapSignal, useLexicalScope, useStore } from "@builder.io/qwik";
+import { componentQrl, inlinedQrl, _jsxQ, _fnSignal, _restProps, _jsxS, _jsxC, Slot, _wrapSignal, useStylesQrl, useLexicalScope, _IMMUTABLE, _jsxBranch, useStore } 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, {
@@ -56,28 +56,6 @@ const ButtonAnchor = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pr
     children: /* @__PURE__ */ _jsxC(Slot, null, 3, "7H_2")
   }, null, 0, "7H_3");
 }, "ButtonAnchor_component_vQT9xS0lqew"));
-const LoadingIcon = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
-  const props1 = _restProps(props, [
-    "width",
-    "speed"
-  ]);
-  return /* @__PURE__ */ _jsxS("div", {
-    ...props1,
-    class: {
-      "animate-spin rounded-full border-transparent border-l-current border-t-current": true,
-      ...props1.class
-    }
-  }, {
-    style: _fnSignal((p0) => ({
-      borderWidth: p0.width / 8,
-      width: p0.width,
-      height: p0.width,
-      animation: `spin ${p0.speed ?? "0.6s"} ease-in-out infinite`
-    }), [
-      props
-    ], '{borderWidth:p0.width/8,width:p0.width,height:p0.width,animation:`spin ${p0.speed??"0.6s"} ease-in-out infinite`}')
-  }, 0, "1A_0");
-}, "LoadingIcon_component_QMsA9D0RcAM"));
 const cardColorClasses = {
   pink: {
     card: {
@@ -185,28 +163,28 @@ const cardColorClasses = {
   },
   darkgray: {
     card: {
-      bg_blobs: "bg-gray-800/10 border-gray-800/20",
+      bg_blobs: "bg-gray-800/10 border-gray-800/40",
       bg: "bg-gray-800/60 border-gray-800",
-      hover: "hover:bg-gray-800/20",
-      click: "active:bg-gray-700/20"
+      hover: "hover:bg-gray-800/40",
+      click: "active:bg-gray-700/40"
     },
     blobs: [
-      "bg-gray-400",
       "bg-gray-500",
-      "bg-gray-600"
+      "bg-gray-600",
+      "bg-gray-700"
     ]
   },
   darkergray: {
     card: {
-      bg_blobs: "bg-gray-900/10 border-gray-900/20",
+      bg_blobs: "bg-gray-900/10 border-gray-900/50",
       bg: "bg-gray-900/60 border-gray-900",
-      hover: "hover:bg-gray-900/20",
-      click: "active:bg-gray-800/20"
+      hover: "hover:bg-gray-900/50",
+      click: "active:bg-gray-800/50"
     },
     blobs: [
-      "bg-gray-400",
-      "bg-gray-500",
-      "bg-gray-600"
+      "bg-gray-600",
+      "bg-gray-700",
+      "bg-gray-800"
     ]
   }
 };
@@ -223,36 +201,30 @@ const Card = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) =>
   const props1 = _restProps(props, [
     "color",
     "hover",
-    "href",
     "row",
     "blobs"
   ]);
   const blob = Math.round(Math.random() * 6);
-  return /* @__PURE__ */ _jsxS("div", {
+  let Component = /* @__PURE__ */ _jsxS("div", {
     ...props1,
-    children: /* @__PURE__ */ _jsxQ("div", null, {
-      class: {
-        "p-8": true
-      }
+    children: /* @__PURE__ */ _jsxC(Slot, null, 3, "OW_0"),
+    class: {
+      "flex gap-4 p-8 border rounded-lg transition-all": true,
+      [cardColorClasses[props.color ?? "darkgray"].card.bg]: !props.blobs,
+      [cardColorClasses[props.color ?? "darkgray"].card.bg_blobs]: props.blobs,
+      [cardColorClasses[props.color ?? "darkgray"].card.hover + " hover:shadow-lg"]: props.hover,
+      [cardColorClasses[props.color ?? "darkgray"].card.click + " active:scale-[99%] cursor-pointer select-none"]: props.hover == "clickable",
+      "flex-col": !props.row,
+      "flex-row items-center": props.row,
+      ...props1.class
+    }
+  }, null, 0, "OW_1");
+  if (props.blobs)
+    Component = /* @__PURE__ */ _jsxQ("div", null, {
+      class: "relative"
     }, [
-      props.href && /* @__PURE__ */ _jsxQ("a", null, {
-        class: "absolute inset-0 z-20",
-        href: _fnSignal((p0) => p0.href, [
-          props
-        ], "p0.href")
-      }, null, 3, "OW_0"),
+      Component,
       /* @__PURE__ */ _jsxQ("div", null, {
-        class: "relative"
-      }, /* @__PURE__ */ _jsxQ("div", null, {
-        class: _fnSignal((p0) => ({
-          "flex gap-4": true,
-          "flex-col": !p0.row,
-          "flex-row items-center": p0.row
-        }), [
-          props
-        ], '{"flex gap-4":true,"flex-col":!p0.row,"flex-row items-center":p0.row}')
-      }, /* @__PURE__ */ _jsxC(Slot, null, 3, "OW_1"), 1, null), 1, null),
-      props.blobs && /* @__PURE__ */ _jsxQ("div", null, {
         class: "absolute -z-10 inset-0 w-full h-full transition-all overflow-clip animate-in fade-in anim-duration-[2s]",
         style: {
           containerType: "size"
@@ -281,64 +253,14 @@ const Card = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) =>
             [cardColorClasses[props.color ?? "darkgray"].blobs[2]]: true
           }
         }, null, null, 3, null)
-      ], 1, "OW_2")
-    ], 1, null),
-    class: {
-      "flex-1 relative border rounded-lg group transition-all": true,
-      [cardColorClasses[props.color ?? "darkgray"].card.bg]: !props.blobs,
-      [cardColorClasses[props.color ?? "darkgray"].card.bg_blobs]: props.blobs,
-      [cardColorClasses[props.color ?? "darkgray"].card.hover + " hover:shadow-lg"]: props.hover,
-      [cardColorClasses[props.color ?? "darkgray"].card.click + " active:scale-[99%] cursor-pointer"]: props.hover == "clickable",
-      ...props1.class
-    }
-  }, null, 0, "OW_3");
+      ], 1, null)
+    ], 1, "OW_2");
+  if (props1.href)
+    Component = /* @__PURE__ */ _jsxQ("a", {
+      href: _wrapSignal(props1, "href")
+    }, null, Component, 1, "OW_3");
+  return Component;
 }, "Card_component_DlkkcTEVka4"));
-const CardHeader = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
-  _jsxBranch();
-  return /* @__PURE__ */ _jsxQ("h1", null, {
-    class: "flex font-bold text-gray-100 text-2xl"
-  }, [
-    props.id && /* @__PURE__ */ _jsxC(Anchor, {
-      get id() {
-        return props.id;
-      },
-      [_IMMUTABLE]: {
-        id: _fnSignal((p0) => p0.id, [
-          props
-        ], "p0.id")
-      }
-    }, 3, "OW_4"),
-    /* @__PURE__ */ _jsxQ("div", null, {
-      class: "flex flex-1"
-    }, /* @__PURE__ */ _jsxQ("div", null, {
-      class: "flex flex-col"
-    }, [
-      /* @__PURE__ */ _jsxQ("div", null, {
-        class: "flex items-center gap-3"
-      }, /* @__PURE__ */ _jsxC(Slot, null, 3, "OW_5"), 1, null),
-      /* @__PURE__ */ _jsxC(Slot, {
-        name: "subheader",
-        [_IMMUTABLE]: {
-          name: _IMMUTABLE
-        }
-      }, 3, "OW_6")
-    ], 1, null), 1, null),
-    (props.loading ?? false) && /* @__PURE__ */ _jsxQ("div", null, {
-      class: _fnSignal((p0) => ({
-        "transition-all": true,
-        "opacity-0": !(p0.loading ?? false),
-        "opacity-100": p0.loading ?? false
-      }), [
-        props
-      ], '{"transition-all":true,"opacity-0":!(p0.loading??false),"opacity-100":p0.loading??false}')
-    }, /* @__PURE__ */ _jsxC(LoadingIcon, {
-      width: 24,
-      [_IMMUTABLE]: {
-        width: _IMMUTABLE
-      }
-    }, 3, "OW_7"), 1, "OW_8")
-  ], 1, "OW_9");
-}, "CardHeader_component_2xQZ6Uv7R4A"));
 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 TextInput = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
   return /* @__PURE__ */ _jsxQ("div", null, {
@@ -1048,6 +970,80 @@ const ColorInput = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((prop
     }, null, 3, null)
   ], 1, "0s_2");
 }, "ColorInput_component_jilGo0Bn3Ps"));
+const LoadingIcon = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
+  const props1 = _restProps(props, [
+    "width",
+    "speed"
+  ]);
+  return /* @__PURE__ */ _jsxS("div", {
+    ...props1,
+    class: {
+      "animate-spin rounded-full border-transparent border-l-current border-t-current": true,
+      ...props1.class
+    }
+  }, {
+    style: _fnSignal((p0) => ({
+      borderWidth: p0.width / 8,
+      width: p0.width,
+      height: p0.width,
+      animation: `spin ${p0.speed ?? "0.6s"} ease-in-out infinite`
+    }), [
+      props
+    ], '{borderWidth:p0.width/8,width:p0.width,height:p0.width,animation:`spin ${p0.speed??"0.6s"} ease-in-out infinite`}')
+  }, 0, "1A_0");
+}, "LoadingIcon_component_QMsA9D0RcAM"));
+const Header = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
+  _jsxBranch();
+  let Component = /* @__PURE__ */ _jsxC(Fragment, {
+    children: /* @__PURE__ */ _jsxQ("h2", null, {
+      class: "flex items-center font-bold text-2xl"
+    }, [
+      props.id && /* @__PURE__ */ _jsxC(Anchor, {
+        get id() {
+          return props.id;
+        },
+        [_IMMUTABLE]: {
+          id: _fnSignal((p0) => p0.id, [
+            props
+          ], "p0.id")
+        }
+      }, 3, "dL_0"),
+      /* @__PURE__ */ _jsxC(Slot, null, 3, "dL_1")
+    ], 1, null)
+  }, 1, "dL_2");
+  if (props.subheader)
+    Component = /* @__PURE__ */ _jsxQ("div", null, {
+      class: "flex flex-1 flex-col gap-1"
+    }, [
+      Component,
+      /* @__PURE__ */ _jsxQ("h3", null, {
+        class: "flex items-center text-gray-400"
+      }, _fnSignal((p0) => p0.subheader, [
+        props
+      ], "p0.subheader"), 3, null)
+    ], 1, "dL_3");
+  if (props.loading !== void 0)
+    Component = /* @__PURE__ */ _jsxQ("div", null, {
+      class: "flex"
+    }, [
+      Component,
+      /* @__PURE__ */ _jsxQ("div", null, {
+        class: _fnSignal((p0) => ({
+          "transition-all duration-200": true,
+          "opacity-0": !p0.loading,
+          "opacity-100": p0.loading
+        }), [
+          props
+        ], '{"transition-all duration-200":true,"opacity-0":!p0.loading,"opacity-100":p0.loading}')
+      }, /* @__PURE__ */ _jsxC(LoadingIcon, {
+        width: 24,
+        [_IMMUTABLE]: {
+          width: _IMMUTABLE
+        }
+      }, 3, "dL_4"), 1, null)
+    ], 1, "dL_5");
+  return Component;
+}, "Header_component_FfGOhhBNG5k"));
 const Plus = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
   return /* @__PURE__ */ _jsxS("svg", {
     ...props,
@@ -1296,7 +1292,7 @@ const SelectInputRaw = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((
     /* @__PURE__ */ _jsxC(Button, {
       get class() {
         return {
-          "flex": true,
+          "flex focus:bg-gray-700": true,
           ...props.class
         };
       },
@@ -1334,11 +1330,11 @@ const SelectInputRaw = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((
       ]),
       [_IMMUTABLE]: {
         class: _fnSignal((p0) => ({
-          "flex": true,
+          "flex focus:bg-gray-700": true,
           ...p0.class
         }), [
           props
-        ], '{"flex":true,...p0.class}'),
+        ], '{"flex focus:bg-gray-700":true,...p0.class}'),
         onClick$: _IMMUTABLE
       }
     }, 1, "cA_4"),
@@ -1432,7 +1428,8 @@ const TextAreaRaw = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pro
 }, "TextAreaRaw_component_PZiPScYxgNk"));
 const Toggle = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
   const props1 = _restProps(props, [
-    "center"
+    "center",
+    "label"
   ]);
   return /* @__PURE__ */ _jsxQ("div", null, {
     class: _fnSignal((p0) => ({
@@ -1465,11 +1462,13 @@ const Toggle = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) =
         }
       }, null, 3, null)
     ], 1, null),
-    /* @__PURE__ */ _jsxQ("label", {
+    props.label && /* @__PURE__ */ _jsxQ("label", {
       for: _wrapSignal(props1, "id")
     }, {
       class: "text-gray-100"
-    }, /* @__PURE__ */ _jsxC(Slot, null, 3, "yu_0"), 1, null)
+    }, _fnSignal((p0) => p0.label, [
+      props
+    ], "p0.label"), 3, "yu_0")
   ], 1, "yu_1");
 }, "Toggle_component_ujuOvR082hY"));
 const LogoBirdflop = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
@@ -1912,8 +1911,8 @@ export {
   Button,
   ButtonAnchor,
   Card,
-  CardHeader,
   ColorInput,
+  Header,
   InputClasses,
   LoadingIcon,
   LogoBirdflop,

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

@@ -9,10 +9,6 @@ interface CardProps extends Omit<PropsOf<'div'>, 'class'> {
         [key: string]: boolean;
     };
 }
-interface CardHeaderProps {
-    id?: string;
-    loading?: boolean;
-}
 export declare const cardColorClasses: {
     pink: {
         card: {
@@ -106,5 +102,4 @@ export declare const cardColorClasses: {
     };
 };
 export declare const Card: import("@builder.io/qwik").Component<CardProps>;
-export declare const CardHeader: import("@builder.io/qwik").Component<CardHeaderProps>;
 export {};

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

@@ -0,0 +1,8 @@
+import type { JSXOutput } from '@builder.io/qwik';
+interface HeaderProps {
+    id?: string;
+    loading?: boolean;
+    subheader?: string | JSXOutput;
+}
+export declare const Header: import("@builder.io/qwik").Component<HeaderProps>;
+export {};

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

@@ -6,6 +6,7 @@ interface ToggleProps extends Omit<(PropsOf<'input'> & {
         [key: string]: boolean;
     };
     center?: boolean;
+    label?: string;
 }
 export declare const Toggle: import("@builder.io/qwik").Component<ToggleProps>;
 export {};

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

@@ -2,6 +2,7 @@ export * from './elements/Anchor';
 export * from './elements/Button';
 export * from './elements/Card';
 export * from './elements/ColorInput';
+export * from './elements/Header';
 export * from './elements/LoadingIcon';
 export * from './elements/NumberInput';
 export * from './elements/SelectInput';

package/package.json

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