@luminescent/ui 0.18.2 → 0.19.1

package/lib/index.qwik.cjs

@@ -291,9 +291,15 @@ const buttonColorClasses = {
     bg: "bg-rose-700/90 border-rose-600"
   }
 };
-const sizeClasses = {
+const mobileSizeClasses = {
+  xs: {
+    base: "text-sm gap-1",
+    round: "rounded-md",
+    pad: "px-2 py-1",
+    equal: "p-1"
+  },
   sm: {
-    base: "text-base gap-2",
+    base: "text-sm gap-2",
     round: "rounded-md",
     pad: "px-2.5 py-1.5",
     equal: "p-1.5"
@@ -317,12 +323,45 @@ const sizeClasses = {
     equal: "p-4"
   }
 };
+const sizeClasses = {
+  xs: {
+    base: "sm:text-sm sm:gap-1",
+    round: "sm:rounded-md",
+    pad: "sm:px-2 sm:py-1",
+    equal: "sm:p-1"
+  },
+  sm: {
+    base: "sm:text-base sm:gap-2",
+    round: "sm:rounded-md",
+    pad: "sm:px-2.5 sm:py-1.5",
+    equal: "sm:p-1.5"
+  },
+  md: {
+    base: "sm:text-base sm:gap-3",
+    round: "sm:rounded-md",
+    pad: "sm:px-4 sm:py-2",
+    equal: "sm:p-2"
+  },
+  lg: {
+    base: "sm:text-lg sm:gap-3",
+    round: "sm:rounded-lg",
+    pad: "sm:px-6 sm:py-3",
+    equal: "sm:p-3"
+  },
+  xl: {
+    base: "sm:text-lg sm:gap-4",
+    round: "sm:rounded-xl",
+    pad: "sm:px-8 sm:py-4",
+    equal: "sm:p-4"
+  }
+};
 const buttonClass = "relative flex items-center gap-3 motion-safe:transition ease-in-out border text-gray-50 fill-gray-50 disabled:opacity-50 hover:shadow-lg motion-safe:active:scale-95 whitespace-nowrap touch-manipulation select-none text-center";
 const Button = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl((props) => {
   const props1 = qwik._restProps(props, [
     "color",
     "transparent",
     "size",
+    "mobilesize",
     "round",
     "square"
   ]);
@@ -331,10 +370,14 @@ const Button = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl
     [buttonColorClasses[props.color ?? "darkgray"].bg]: !props.transparent,
     "border-transparent": props.transparent,
     [buttonColorClasses[props.color ?? "darkgray"].hover]: true,
+    [mobileSizeClasses[props.mobilesize ? props.mobilesize : (props.size ?? "md") == "xs" ? "xs" : (props.size ?? "md") == "sm" ? "xs" : (props.size ?? "md") == "md" ? "sm" : (props.size ?? "md") == "lg" ? "md" : (props.size ?? "md") == "xl" ? "lg" : "md"].base]: true,
     [sizeClasses[props.size ?? "md"].base]: true,
+    [mobileSizeClasses[props.mobilesize ? props.mobilesize : (props.size ?? "md") == "xs" ? "xs" : (props.size ?? "md") == "sm" ? "xs" : (props.size ?? "md") == "md" ? "sm" : (props.size ?? "md") == "lg" ? "md" : (props.size ?? "md") == "xl" ? "lg" : "md"].round]: !props.round,
     [sizeClasses[props.size ?? "md"].round]: !props.round,
     "rounded-full": props.round,
+    [mobileSizeClasses[props.mobilesize ? props.mobilesize : (props.size ?? "md") == "xs" ? "xs" : (props.size ?? "md") == "sm" ? "xs" : (props.size ?? "md") == "md" ? "sm" : (props.size ?? "md") == "lg" ? "md" : (props.size ?? "md") == "xl" ? "lg" : "md"].pad]: !props.square,
     [sizeClasses[props.size ?? "md"].pad]: !props.square,
+    [mobileSizeClasses[props.mobilesize ? props.mobilesize : (props.size ?? "md") == "xs" ? "xs" : (props.size ?? "md") == "sm" ? "xs" : (props.size ?? "md") == "md" ? "sm" : (props.size ?? "md") == "lg" ? "md" : (props.size ?? "md") == "xl" ? "lg" : "md"].equal]: props.square,
     [sizeClasses[props.size ?? "md"].equal]: props.square,
     ...props1.class
   };
@@ -348,6 +391,7 @@ const ButtonAnchor = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inli
     "color",
     "transparent",
     "size",
+    "mobilesize",
     "round",
     "square"
   ]);
@@ -356,10 +400,14 @@ const ButtonAnchor = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inli
     [buttonColorClasses[props.color ?? "darkgray"].bg]: !props.transparent,
     "border-transparent": props.transparent,
     [buttonColorClasses[props.color ?? "darkgray"].hover]: true,
+    [mobileSizeClasses[props.mobilesize ? props.mobilesize : (props.size ?? "md") == "xs" ? "xs" : (props.size ?? "md") == "sm" ? "xs" : (props.size ?? "md") == "md" ? "sm" : (props.size ?? "md") == "lg" ? "md" : (props.size ?? "md") == "xl" ? "lg" : "md"].base]: true,
     [sizeClasses[props.size ?? "md"].base]: true,
+    [mobileSizeClasses[props.mobilesize ? props.mobilesize : (props.size ?? "md") == "xs" ? "xs" : (props.size ?? "md") == "sm" ? "xs" : (props.size ?? "md") == "md" ? "sm" : (props.size ?? "md") == "lg" ? "md" : (props.size ?? "md") == "xl" ? "lg" : "md"].round]: !props.round,
     [sizeClasses[props.size ?? "md"].round]: !props.round,
     "rounded-full": props.round,
+    [mobileSizeClasses[props.mobilesize ? props.mobilesize : (props.size ?? "md") == "xs" ? "xs" : (props.size ?? "md") == "sm" ? "xs" : (props.size ?? "md") == "md" ? "sm" : (props.size ?? "md") == "lg" ? "md" : (props.size ?? "md") == "xl" ? "lg" : "md"].pad]: !props.square,
     [sizeClasses[props.size ?? "md"].pad]: !props.square,
+    [mobileSizeClasses[props.mobilesize ? props.mobilesize : (props.size ?? "md") == "xs" ? "xs" : (props.size ?? "md") == "sm" ? "xs" : (props.size ?? "md") == "md" ? "sm" : (props.size ?? "md") == "lg" ? "md" : (props.size ?? "md") == "xl" ? "lg" : "md"].equal]: props.square,
     [sizeClasses[props.size ?? "md"].equal]: props.square,
     ...props1.class
   };
@@ -797,7 +845,8 @@ const ColorPicker = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlin
   });
   const setColor = /* @__PURE__ */ qwik.inlinedQrl((color) => {
     const [maxHue2, props2, store2, width2] = qwik.useLexicalScope();
-    if (!color.match(/^#[0-9A-F]{6}$/i)) return;
+    if (!color.match(/^#[0-9A-F]{6}$/i))
+      return;
     const number = hexStringToNumber(color);
     const hsv = rgbToHsv(hexNumberToRgb(number));
     store2.hue.position = hsv.h * maxHue2;
@@ -903,7 +952,8 @@ const ColorPicker = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlin
     ], "p0.id"),
     onInput$: /* @__PURE__ */ qwik.inlinedQrl((e, el) => {
       const [setColor2] = qwik.useLexicalScope();
-      if (!el.dataset.value) return;
+      if (!el.dataset.value)
+        return;
       setColor2(el.dataset.value);
     }, "ColorPicker_component_div_onInput_61AfRqNB51A", [
       setColor
@@ -1082,182 +1132,6 @@ const ColorPicker = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlin
     ], 1, null)
   ], 1, "sj_4");
 }, "ColorPicker_component_D1OSB6ycLrI"));
-const ColorInput = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl((props) => {
-  const props1 = qwik._restProps(props, [
-    "onInput$",
-    "value",
-    "color",
-    "colors",
-    "preview",
-    "horizontal",
-    "class",
-    "showInput"
-  ]);
-  const store = qwik.useStore({
-    opened: false
-  });
-  return /* @__PURE__ */ qwik._jsxQ("div", null, {
-    class: "relative"
-  }, [
-    /* @__PURE__ */ qwik._jsxQ("label", {
-      for: qwik._wrapSignal(props1, "id")
-    }, {
-      class: "text-gray-300 pb-1 flex select-none"
-    }, /* @__PURE__ */ qwik._jsxC(qwik.Slot, null, 3, "0s_0"), 1, null),
-    /* @__PURE__ */ qwik._jsxQ("div", {
-      class: {
-        "flex": true,
-        "flex-row gap-1": (props.preview ?? "left") == "left",
-        "flex-row-reverse gap-1": (props.preview ?? "left") == "right",
-        "flex-col": (props.preview ?? "left") == "top",
-        "flex-col-reverse": (props.preview ?? "left") == "bottom"
-      }
-    }, null, [
-      (props.preview ?? "left") != "full" && /* @__PURE__ */ qwik._jsxQ("div", {
-        id: `${props1.id}-preview`,
-        class: {
-          "border border-gray-700": true,
-          "w-9 rounded-md": (props.preview ?? "left") == "left" || (props.preview ?? "left") == "right",
-          "w-full h-3": (props.preview ?? "left") == "top" || (props.preview ?? "left") == "bottom",
-          "rounded-t-md": (props.preview ?? "left") == "top",
-          "rounded-b-md": (props.preview ?? "left") == "bottom"
-        }
-      }, {
-        style: qwik._fnSignal((p0) => ({
-          backgroundColor: `${p0.value ?? "#000000"}`
-        }), [
-          props
-        ], '{backgroundColor:`${p0.value??"#000000"}`}')
-      }, null, 3, "0s_1"),
-      /* @__PURE__ */ qwik._jsxC(TextInputRaw, {
-        get class() {
-          return {
-            "border-t-0 rounded-t-none": (props.preview ?? "left") == "top",
-            "border-b-0 rounded-b-none": (props.preview ?? "left") == "bottom",
-            ...props.class
-          };
-        },
-        ...props1,
-        get value() {
-          return props.value ?? "#000000";
-        },
-        get color() {
-          return props.color;
-        },
-        onFocus$: /* @__PURE__ */ qwik.inlinedQrl(() => {
-          const [props12, store2] = qwik.useLexicalScope();
-          const abortController = new AbortController();
-          document.addEventListener("click", (e) => {
-            if (e.target instanceof HTMLElement && !e.target.closest(`#${props12.id}-popup`) && !e.target.closest(`#${props12.id}`)) {
-              store2.opened = false;
-              abortController.abort();
-            }
-          }, {
-            signal: abortController.signal
-          });
-          store2.opened = true;
-        }, "ColorInput_component_div_div_TextInputRaw_onFocus_Vqaw9AH9HEM", [
-          props1,
-          store
-        ]),
-        onInput$: /* @__PURE__ */ qwik.inlinedQrl((e, el) => {
-          const [props12] = qwik.useLexicalScope();
-          const div = document.getElementById(`${props12.id}-popup`);
-          div.dataset.value = el.value;
-          div.dispatchEvent(new Event("input"));
-        }, "ColorInput_component_div_div_TextInputRaw_onInput_Z1LFYfy6bG8", [
-          props1
-        ]),
-        style: (props.preview ?? "left") == "full" ? {
-          backgroundColor: `${props.value ?? "#000000"}`,
-          color: getBrightness(hexNumberToRgb(hexStringToNumber(props.value ?? "#000000"))) > 0.5 ? "black" : "white"
-        } : {},
-        [qwik._IMMUTABLE]: {
-          class: qwik._fnSignal((p0) => ({
-            "border-t-0 rounded-t-none": (p0.preview ?? "left") == "top",
-            "border-b-0 rounded-b-none": (p0.preview ?? "left") == "bottom",
-            ...p0.class
-          }), [
-            props
-          ], '{"border-t-0 rounded-t-none":(p0.preview??"left")=="top","border-b-0 rounded-b-none":(p0.preview??"left")=="bottom",...p0.class}'),
-          value: qwik._fnSignal((p0) => p0.value ?? "#000000", [
-            props
-          ], 'p0.value??"#000000"'),
-          color: qwik._fnSignal((p0) => p0.color, [
-            props
-          ], "p0.color")
-        }
-      }, 0, "0s_2")
-    ], 1, null),
-    /* @__PURE__ */ qwik._jsxC(ColorPicker, {
-      id: `${props1.id}-popup`,
-      get value() {
-        return props.value ?? "#000000";
-      },
-      get color() {
-        return props.color;
-      },
-      get colors() {
-        return props.colors;
-      },
-      get preview() {
-        return props.preview ?? "left";
-      },
-      get horizontal() {
-        return props.horizontal;
-      },
-      get showInput() {
-        return props.showInput ?? false;
-      },
-      get class() {
-        return {
-          "motion-safe:transition-all absolute top-full mt-2 left-0 gap-1 z-[1000]": true,
-          "opacity-0 scale-95 pointer-events-none": !store.opened
-        };
-      },
-      onInput$: /* @__PURE__ */ qwik.inlinedQrl((color) => {
-        const [props12, props2] = qwik.useLexicalScope();
-        const el = document.getElementById(props12.id);
-        const previewel = document.getElementById(`${props12.id}-preview`);
-        el.value = color;
-        if ((props2.preview ?? "left") == "full") {
-          el.style.backgroundColor = color;
-          el.style.color = getBrightness(hexNumberToRgb(hexStringToNumber(color))) > 0.5 ? "black" : "white";
-        } else previewel.style.backgroundColor = color;
-        props2.onInput$?.(color);
-      }, "ColorInput_component_div_ColorPicker_onInput_iZguRdHILBQ", [
-        props1,
-        props
-      ]),
-      [qwik._IMMUTABLE]: {
-        value: qwik._fnSignal((p0) => p0.value ?? "#000000", [
-          props
-        ], 'p0.value??"#000000"'),
-        color: qwik._fnSignal((p0) => p0.color, [
-          props
-        ], "p0.color"),
-        colors: qwik._fnSignal((p0) => p0.colors, [
-          props
-        ], "p0.colors"),
-        preview: qwik._fnSignal((p0) => p0.preview ?? "left", [
-          props
-        ], 'p0.preview??"left"'),
-        horizontal: qwik._fnSignal((p0) => p0.horizontal, [
-          props
-        ], "p0.horizontal"),
-        showInput: qwik._fnSignal((p0) => p0.showInput ?? false, [
-          props
-        ], "p0.showInput??false"),
-        class: qwik._fnSignal((p0) => ({
-          "motion-safe:transition-all absolute top-full mt-2 left-0 gap-1 z-[1000]": true,
-          "opacity-0 scale-95 pointer-events-none": !p0.opened
-        }), [
-          store
-        ], '{"motion-safe:transition-all absolute top-full mt-2 left-0 gap-1 z-[1000]":true,"opacity-0 scale-95 pointer-events-none":!p0.opened}')
-      }
-    }, 3, "0s_3")
-  ], 1, "0s_4");
-}, "ColorInput_component_jilGo0Bn3Ps"));
 const ChevronDown = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl((props) => {
   return /* @__PURE__ */ qwik._jsxS("svg", {
     xmlns: "http://www.w3.org/2000/svg",
@@ -1600,35 +1474,37 @@ const Header = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl
       }, 3, "dL_2"), 1, "dL_3")
     ], 1, null)
   }, 1, "dL_4");
-  if (props.subheader) Component = /* @__PURE__ */ qwik._jsxQ("div", null, {
-    class: "flex flex-col gap-1"
-  }, [
-    Component,
-    /* @__PURE__ */ qwik._jsxQ("h3", null, {
-      class: "flex items-center text-gray-400 text-sm"
-    }, qwik._fnSignal((p0) => p0.subheader, [
-      props
-    ], "p0.subheader"), 3, null)
-  ], 1, "dL_5");
-  if (props.loading !== void 0) Component = /* @__PURE__ */ qwik._jsxQ("div", null, {
-    class: "flex"
-  }, [
-    Component,
-    /* @__PURE__ */ qwik._jsxQ("div", null, {
-      class: qwik._fnSignal((p0) => ({
-        "motion-safe:transition-all duration-200": true,
-        "opacity-0": !p0.loading,
-        "opacity-100": p0.loading
-      }), [
+  if (props.subheader)
+    Component = /* @__PURE__ */ qwik._jsxQ("div", null, {
+      class: "flex flex-col gap-1"
+    }, [
+      Component,
+      /* @__PURE__ */ qwik._jsxQ("h3", null, {
+        class: "flex items-center text-gray-400 text-sm"
+      }, qwik._fnSignal((p0) => p0.subheader, [
         props
-      ], '{"motion-safe: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_6"), 1, null)
-  ], 1, "dL_7");
+      ], "p0.subheader"), 3, null)
+    ], 1, "dL_5");
+  if (props.loading !== void 0)
+    Component = /* @__PURE__ */ qwik._jsxQ("div", null, {
+      class: "flex"
+    }, [
+      Component,
+      /* @__PURE__ */ qwik._jsxQ("div", null, {
+        class: qwik._fnSignal((p0) => ({
+          "motion-safe:transition-all duration-200": true,
+          "opacity-0": !p0.loading,
+          "opacity-100": p0.loading
+        }), [
+          props
+        ], '{"motion-safe: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_6"), 1, null)
+    ], 1, "dL_7");
   return Component;
 }, "Header_component_FfGOhhBNG5k"));
 const navColorClasses = {
@@ -1676,9 +1552,9 @@ const Nav = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl((p
     children: [
       /* @__PURE__ */ qwik._jsxQ("div", {
         class: {
-          "sm:hidden motion-safe:transition-all flex flex-col px-2 items-center absolute w-full": true,
-          "top-full mt-2": menu.value,
-          "opacity-0 top-0 scale-95 pointer-events-none": !menu.value,
+          "sm:hidden motion-safe:transition-all flex flex-col px-2 items-center absolute w-full top-full": true,
+          "mt-2": menu.value,
+          "opacity-0 pointer-events-none": !menu.value,
           "before:backdrop-blur-lg": props.color !== "transparent",
           'before:absolute before:content-[""] before:w-full before:h-full before:drop-shadow-xl before:-z-10 before:rounded-lg': true
         }
@@ -2816,7 +2692,6 @@ exports.Blobs = Blobs;
 exports.Button = Button;
 exports.ButtonAnchor = ButtonAnchor;
 exports.Card = Card;
-exports.ColorInput = ColorInput;
 exports.ColorPicker = ColorPicker;
 exports.Dropdown = Dropdown;
 exports.DropdownRaw = DropdownRaw;
@@ -2848,6 +2723,7 @@ exports._auto_buttonClass = buttonClass;
 exports.blobColorClasses = blobColorClasses;
 exports.buttonColorClasses = buttonColorClasses;
 exports.cardColorClasses = cardColorClasses;
+exports.mobileSizeClasses = mobileSizeClasses;
 exports.navColorClasses = navColorClasses;
 exports.sizeClasses = sizeClasses;
 exports.toggleOffColorClasses = toggleOffColorClasses;

package/lib/index.qwik.mjs

@@ -289,9 +289,15 @@ const buttonColorClasses = {
     bg: "bg-rose-700/90 border-rose-600"
   }
 };
-const sizeClasses = {
+const mobileSizeClasses = {
+  xs: {
+    base: "text-sm gap-1",
+    round: "rounded-md",
+    pad: "px-2 py-1",
+    equal: "p-1"
+  },
   sm: {
-    base: "text-base gap-2",
+    base: "text-sm gap-2",
     round: "rounded-md",
     pad: "px-2.5 py-1.5",
     equal: "p-1.5"
@@ -315,12 +321,45 @@ const sizeClasses = {
     equal: "p-4"
   }
 };
+const sizeClasses = {
+  xs: {
+    base: "sm:text-sm sm:gap-1",
+    round: "sm:rounded-md",
+    pad: "sm:px-2 sm:py-1",
+    equal: "sm:p-1"
+  },
+  sm: {
+    base: "sm:text-base sm:gap-2",
+    round: "sm:rounded-md",
+    pad: "sm:px-2.5 sm:py-1.5",
+    equal: "sm:p-1.5"
+  },
+  md: {
+    base: "sm:text-base sm:gap-3",
+    round: "sm:rounded-md",
+    pad: "sm:px-4 sm:py-2",
+    equal: "sm:p-2"
+  },
+  lg: {
+    base: "sm:text-lg sm:gap-3",
+    round: "sm:rounded-lg",
+    pad: "sm:px-6 sm:py-3",
+    equal: "sm:p-3"
+  },
+  xl: {
+    base: "sm:text-lg sm:gap-4",
+    round: "sm:rounded-xl",
+    pad: "sm:px-8 sm:py-4",
+    equal: "sm:p-4"
+  }
+};
 const buttonClass = "relative flex items-center gap-3 motion-safe:transition ease-in-out border text-gray-50 fill-gray-50 disabled:opacity-50 hover:shadow-lg motion-safe:active:scale-95 whitespace-nowrap touch-manipulation select-none text-center";
 const Button = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
   const props1 = _restProps(props, [
     "color",
     "transparent",
     "size",
+    "mobilesize",
     "round",
     "square"
   ]);
@@ -329,10 +368,14 @@ const Button = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) =
     [buttonColorClasses[props.color ?? "darkgray"].bg]: !props.transparent,
     "border-transparent": props.transparent,
     [buttonColorClasses[props.color ?? "darkgray"].hover]: true,
+    [mobileSizeClasses[props.mobilesize ? props.mobilesize : (props.size ?? "md") == "xs" ? "xs" : (props.size ?? "md") == "sm" ? "xs" : (props.size ?? "md") == "md" ? "sm" : (props.size ?? "md") == "lg" ? "md" : (props.size ?? "md") == "xl" ? "lg" : "md"].base]: true,
     [sizeClasses[props.size ?? "md"].base]: true,
+    [mobileSizeClasses[props.mobilesize ? props.mobilesize : (props.size ?? "md") == "xs" ? "xs" : (props.size ?? "md") == "sm" ? "xs" : (props.size ?? "md") == "md" ? "sm" : (props.size ?? "md") == "lg" ? "md" : (props.size ?? "md") == "xl" ? "lg" : "md"].round]: !props.round,
     [sizeClasses[props.size ?? "md"].round]: !props.round,
     "rounded-full": props.round,
+    [mobileSizeClasses[props.mobilesize ? props.mobilesize : (props.size ?? "md") == "xs" ? "xs" : (props.size ?? "md") == "sm" ? "xs" : (props.size ?? "md") == "md" ? "sm" : (props.size ?? "md") == "lg" ? "md" : (props.size ?? "md") == "xl" ? "lg" : "md"].pad]: !props.square,
     [sizeClasses[props.size ?? "md"].pad]: !props.square,
+    [mobileSizeClasses[props.mobilesize ? props.mobilesize : (props.size ?? "md") == "xs" ? "xs" : (props.size ?? "md") == "sm" ? "xs" : (props.size ?? "md") == "md" ? "sm" : (props.size ?? "md") == "lg" ? "md" : (props.size ?? "md") == "xl" ? "lg" : "md"].equal]: props.square,
     [sizeClasses[props.size ?? "md"].equal]: props.square,
     ...props1.class
   };
@@ -346,6 +389,7 @@ const ButtonAnchor = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pr
     "color",
     "transparent",
     "size",
+    "mobilesize",
     "round",
     "square"
   ]);
@@ -354,10 +398,14 @@ const ButtonAnchor = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pr
     [buttonColorClasses[props.color ?? "darkgray"].bg]: !props.transparent,
     "border-transparent": props.transparent,
     [buttonColorClasses[props.color ?? "darkgray"].hover]: true,
+    [mobileSizeClasses[props.mobilesize ? props.mobilesize : (props.size ?? "md") == "xs" ? "xs" : (props.size ?? "md") == "sm" ? "xs" : (props.size ?? "md") == "md" ? "sm" : (props.size ?? "md") == "lg" ? "md" : (props.size ?? "md") == "xl" ? "lg" : "md"].base]: true,
     [sizeClasses[props.size ?? "md"].base]: true,
+    [mobileSizeClasses[props.mobilesize ? props.mobilesize : (props.size ?? "md") == "xs" ? "xs" : (props.size ?? "md") == "sm" ? "xs" : (props.size ?? "md") == "md" ? "sm" : (props.size ?? "md") == "lg" ? "md" : (props.size ?? "md") == "xl" ? "lg" : "md"].round]: !props.round,
     [sizeClasses[props.size ?? "md"].round]: !props.round,
     "rounded-full": props.round,
+    [mobileSizeClasses[props.mobilesize ? props.mobilesize : (props.size ?? "md") == "xs" ? "xs" : (props.size ?? "md") == "sm" ? "xs" : (props.size ?? "md") == "md" ? "sm" : (props.size ?? "md") == "lg" ? "md" : (props.size ?? "md") == "xl" ? "lg" : "md"].pad]: !props.square,
     [sizeClasses[props.size ?? "md"].pad]: !props.square,
+    [mobileSizeClasses[props.mobilesize ? props.mobilesize : (props.size ?? "md") == "xs" ? "xs" : (props.size ?? "md") == "sm" ? "xs" : (props.size ?? "md") == "md" ? "sm" : (props.size ?? "md") == "lg" ? "md" : (props.size ?? "md") == "xl" ? "lg" : "md"].equal]: props.square,
     [sizeClasses[props.size ?? "md"].equal]: props.square,
     ...props1.class
   };
@@ -795,7 +843,8 @@ const ColorPicker = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pro
   });
   const setColor = /* @__PURE__ */ inlinedQrl((color) => {
     const [maxHue2, props2, store2, width2] = useLexicalScope();
-    if (!color.match(/^#[0-9A-F]{6}$/i)) return;
+    if (!color.match(/^#[0-9A-F]{6}$/i))
+      return;
     const number = hexStringToNumber(color);
     const hsv = rgbToHsv(hexNumberToRgb(number));
     store2.hue.position = hsv.h * maxHue2;
@@ -901,7 +950,8 @@ const ColorPicker = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pro
     ], "p0.id"),
     onInput$: /* @__PURE__ */ inlinedQrl((e, el) => {
       const [setColor2] = useLexicalScope();
-      if (!el.dataset.value) return;
+      if (!el.dataset.value)
+        return;
       setColor2(el.dataset.value);
     }, "ColorPicker_component_div_onInput_61AfRqNB51A", [
       setColor
@@ -1080,182 +1130,6 @@ const ColorPicker = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pro
     ], 1, null)
   ], 1, "sj_4");
 }, "ColorPicker_component_D1OSB6ycLrI"));
-const ColorInput = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
-  const props1 = _restProps(props, [
-    "onInput$",
-    "value",
-    "color",
-    "colors",
-    "preview",
-    "horizontal",
-    "class",
-    "showInput"
-  ]);
-  const store = useStore({
-    opened: false
-  });
-  return /* @__PURE__ */ _jsxQ("div", null, {
-    class: "relative"
-  }, [
-    /* @__PURE__ */ _jsxQ("label", {
-      for: _wrapSignal(props1, "id")
-    }, {
-      class: "text-gray-300 pb-1 flex select-none"
-    }, /* @__PURE__ */ _jsxC(Slot, null, 3, "0s_0"), 1, null),
-    /* @__PURE__ */ _jsxQ("div", {
-      class: {
-        "flex": true,
-        "flex-row gap-1": (props.preview ?? "left") == "left",
-        "flex-row-reverse gap-1": (props.preview ?? "left") == "right",
-        "flex-col": (props.preview ?? "left") == "top",
-        "flex-col-reverse": (props.preview ?? "left") == "bottom"
-      }
-    }, null, [
-      (props.preview ?? "left") != "full" && /* @__PURE__ */ _jsxQ("div", {
-        id: `${props1.id}-preview`,
-        class: {
-          "border border-gray-700": true,
-          "w-9 rounded-md": (props.preview ?? "left") == "left" || (props.preview ?? "left") == "right",
-          "w-full h-3": (props.preview ?? "left") == "top" || (props.preview ?? "left") == "bottom",
-          "rounded-t-md": (props.preview ?? "left") == "top",
-          "rounded-b-md": (props.preview ?? "left") == "bottom"
-        }
-      }, {
-        style: _fnSignal((p0) => ({
-          backgroundColor: `${p0.value ?? "#000000"}`
-        }), [
-          props
-        ], '{backgroundColor:`${p0.value??"#000000"}`}')
-      }, null, 3, "0s_1"),
-      /* @__PURE__ */ _jsxC(TextInputRaw, {
-        get class() {
-          return {
-            "border-t-0 rounded-t-none": (props.preview ?? "left") == "top",
-            "border-b-0 rounded-b-none": (props.preview ?? "left") == "bottom",
-            ...props.class
-          };
-        },
-        ...props1,
-        get value() {
-          return props.value ?? "#000000";
-        },
-        get color() {
-          return props.color;
-        },
-        onFocus$: /* @__PURE__ */ inlinedQrl(() => {
-          const [props12, store2] = useLexicalScope();
-          const abortController = new AbortController();
-          document.addEventListener("click", (e) => {
-            if (e.target instanceof HTMLElement && !e.target.closest(`#${props12.id}-popup`) && !e.target.closest(`#${props12.id}`)) {
-              store2.opened = false;
-              abortController.abort();
-            }
-          }, {
-            signal: abortController.signal
-          });
-          store2.opened = true;
-        }, "ColorInput_component_div_div_TextInputRaw_onFocus_Vqaw9AH9HEM", [
-          props1,
-          store
-        ]),
-        onInput$: /* @__PURE__ */ inlinedQrl((e, el) => {
-          const [props12] = useLexicalScope();
-          const div = document.getElementById(`${props12.id}-popup`);
-          div.dataset.value = el.value;
-          div.dispatchEvent(new Event("input"));
-        }, "ColorInput_component_div_div_TextInputRaw_onInput_Z1LFYfy6bG8", [
-          props1
-        ]),
-        style: (props.preview ?? "left") == "full" ? {
-          backgroundColor: `${props.value ?? "#000000"}`,
-          color: getBrightness(hexNumberToRgb(hexStringToNumber(props.value ?? "#000000"))) > 0.5 ? "black" : "white"
-        } : {},
-        [_IMMUTABLE]: {
-          class: _fnSignal((p0) => ({
-            "border-t-0 rounded-t-none": (p0.preview ?? "left") == "top",
-            "border-b-0 rounded-b-none": (p0.preview ?? "left") == "bottom",
-            ...p0.class
-          }), [
-            props
-          ], '{"border-t-0 rounded-t-none":(p0.preview??"left")=="top","border-b-0 rounded-b-none":(p0.preview??"left")=="bottom",...p0.class}'),
-          value: _fnSignal((p0) => p0.value ?? "#000000", [
-            props
-          ], 'p0.value??"#000000"'),
-          color: _fnSignal((p0) => p0.color, [
-            props
-          ], "p0.color")
-        }
-      }, 0, "0s_2")
-    ], 1, null),
-    /* @__PURE__ */ _jsxC(ColorPicker, {
-      id: `${props1.id}-popup`,
-      get value() {
-        return props.value ?? "#000000";
-      },
-      get color() {
-        return props.color;
-      },
-      get colors() {
-        return props.colors;
-      },
-      get preview() {
-        return props.preview ?? "left";
-      },
-      get horizontal() {
-        return props.horizontal;
-      },
-      get showInput() {
-        return props.showInput ?? false;
-      },
-      get class() {
-        return {
-          "motion-safe:transition-all absolute top-full mt-2 left-0 gap-1 z-[1000]": true,
-          "opacity-0 scale-95 pointer-events-none": !store.opened
-        };
-      },
-      onInput$: /* @__PURE__ */ inlinedQrl((color) => {
-        const [props12, props2] = useLexicalScope();
-        const el = document.getElementById(props12.id);
-        const previewel = document.getElementById(`${props12.id}-preview`);
-        el.value = color;
-        if ((props2.preview ?? "left") == "full") {
-          el.style.backgroundColor = color;
-          el.style.color = getBrightness(hexNumberToRgb(hexStringToNumber(color))) > 0.5 ? "black" : "white";
-        } else previewel.style.backgroundColor = color;
-        props2.onInput$?.(color);
-      }, "ColorInput_component_div_ColorPicker_onInput_iZguRdHILBQ", [
-        props1,
-        props
-      ]),
-      [_IMMUTABLE]: {
-        value: _fnSignal((p0) => p0.value ?? "#000000", [
-          props
-        ], 'p0.value??"#000000"'),
-        color: _fnSignal((p0) => p0.color, [
-          props
-        ], "p0.color"),
-        colors: _fnSignal((p0) => p0.colors, [
-          props
-        ], "p0.colors"),
-        preview: _fnSignal((p0) => p0.preview ?? "left", [
-          props
-        ], 'p0.preview??"left"'),
-        horizontal: _fnSignal((p0) => p0.horizontal, [
-          props
-        ], "p0.horizontal"),
-        showInput: _fnSignal((p0) => p0.showInput ?? false, [
-          props
-        ], "p0.showInput??false"),
-        class: _fnSignal((p0) => ({
-          "motion-safe:transition-all absolute top-full mt-2 left-0 gap-1 z-[1000]": true,
-          "opacity-0 scale-95 pointer-events-none": !p0.opened
-        }), [
-          store
-        ], '{"motion-safe:transition-all absolute top-full mt-2 left-0 gap-1 z-[1000]":true,"opacity-0 scale-95 pointer-events-none":!p0.opened}')
-      }
-    }, 3, "0s_3")
-  ], 1, "0s_4");
-}, "ColorInput_component_jilGo0Bn3Ps"));
 const ChevronDown = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
   return /* @__PURE__ */ _jsxS("svg", {
     xmlns: "http://www.w3.org/2000/svg",
@@ -1598,35 +1472,37 @@ const Header = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) =
       }, 3, "dL_2"), 1, "dL_3")
     ], 1, null)
   }, 1, "dL_4");
-  if (props.subheader) Component = /* @__PURE__ */ _jsxQ("div", null, {
-    class: "flex flex-col gap-1"
-  }, [
-    Component,
-    /* @__PURE__ */ _jsxQ("h3", null, {
-      class: "flex items-center text-gray-400 text-sm"
-    }, _fnSignal((p0) => p0.subheader, [
-      props
-    ], "p0.subheader"), 3, null)
-  ], 1, "dL_5");
-  if (props.loading !== void 0) Component = /* @__PURE__ */ _jsxQ("div", null, {
-    class: "flex"
-  }, [
-    Component,
-    /* @__PURE__ */ _jsxQ("div", null, {
-      class: _fnSignal((p0) => ({
-        "motion-safe:transition-all duration-200": true,
-        "opacity-0": !p0.loading,
-        "opacity-100": p0.loading
-      }), [
+  if (props.subheader)
+    Component = /* @__PURE__ */ _jsxQ("div", null, {
+      class: "flex flex-col gap-1"
+    }, [
+      Component,
+      /* @__PURE__ */ _jsxQ("h3", null, {
+        class: "flex items-center text-gray-400 text-sm"
+      }, _fnSignal((p0) => p0.subheader, [
         props
-      ], '{"motion-safe:transition-all duration-200":true,"opacity-0":!p0.loading,"opacity-100":p0.loading}')
-    }, /* @__PURE__ */ _jsxC(LoadingIcon, {
-      width: 24,
-      [_IMMUTABLE]: {
-        width: _IMMUTABLE
-      }
-    }, 3, "dL_6"), 1, null)
-  ], 1, "dL_7");
+      ], "p0.subheader"), 3, null)
+    ], 1, "dL_5");
+  if (props.loading !== void 0)
+    Component = /* @__PURE__ */ _jsxQ("div", null, {
+      class: "flex"
+    }, [
+      Component,
+      /* @__PURE__ */ _jsxQ("div", null, {
+        class: _fnSignal((p0) => ({
+          "motion-safe:transition-all duration-200": true,
+          "opacity-0": !p0.loading,
+          "opacity-100": p0.loading
+        }), [
+          props
+        ], '{"motion-safe:transition-all duration-200":true,"opacity-0":!p0.loading,"opacity-100":p0.loading}')
+      }, /* @__PURE__ */ _jsxC(LoadingIcon, {
+        width: 24,
+        [_IMMUTABLE]: {
+          width: _IMMUTABLE
+        }
+      }, 3, "dL_6"), 1, null)
+    ], 1, "dL_7");
   return Component;
 }, "Header_component_FfGOhhBNG5k"));
 const navColorClasses = {
@@ -1674,9 +1550,9 @@ const Nav = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
     children: [
       /* @__PURE__ */ _jsxQ("div", {
         class: {
-          "sm:hidden motion-safe:transition-all flex flex-col px-2 items-center absolute w-full": true,
-          "top-full mt-2": menu.value,
-          "opacity-0 top-0 scale-95 pointer-events-none": !menu.value,
+          "sm:hidden motion-safe:transition-all flex flex-col px-2 items-center absolute w-full top-full": true,
+          "mt-2": menu.value,
+          "opacity-0 pointer-events-none": !menu.value,
           "before:backdrop-blur-lg": props.color !== "transparent",
           'before:absolute before:content-[""] before:w-full before:h-full before:drop-shadow-xl before:-z-10 before:rounded-lg': true
         }
@@ -2815,7 +2691,6 @@ export {
   Button,
   ButtonAnchor,
   Card,
-  ColorInput,
   ColorPicker,
   Dropdown,
   DropdownRaw,
@@ -2847,6 +2722,7 @@ export {
   blobColorClasses,
   buttonColorClasses,
   cardColorClasses,
+  mobileSizeClasses,
   navColorClasses,
   sizeClasses,
   toggleOffColorClasses,

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

@@ -0,0 +1,2 @@
+declare const _default: import("@builder.io/qwik").Component<unknown>;
+export default _default;

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

@@ -97,7 +97,45 @@ export declare const buttonColorClasses: {
         bg: string;
     };
 };
+export declare const mobileSizeClasses: {
+    xs: {
+        base: string;
+        round: string;
+        pad: string;
+        equal: string;
+    };
+    sm: {
+        base: string;
+        round: string;
+        pad: string;
+        equal: string;
+    };
+    md: {
+        base: string;
+        round: string;
+        pad: string;
+        equal: string;
+    };
+    lg: {
+        base: string;
+        round: string;
+        pad: string;
+        equal: string;
+    };
+    xl: {
+        base: string;
+        round: string;
+        pad: string;
+        equal: string;
+    };
+};
 export declare const sizeClasses: {
+    xs: {
+        base: string;
+        round: string;
+        pad: string;
+        equal: string;
+    };
     sm: {
         base: string;
         round: string;
@@ -127,6 +165,7 @@ interface GenericButtonProps {
     color?: keyof typeof buttonColorClasses;
     transparent?: boolean;
     size?: keyof typeof sizeClasses;
+    mobilesize?: keyof typeof mobileSizeClasses;
     round?: boolean;
     square?: boolean;
     class?: {

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

@@ -2,7 +2,6 @@ export * from './elements/Anchor';
 export * from './elements/Blobs';
 export * from './elements/Button';
 export * from './elements/Card';
-export * from './elements/ColorInput';
 export * from './elements/ColorPicker';
 export * from './elements/Dropdown';
 export * from './elements/Header';

package/package.json

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