@luminescent/ui 0.18.1 → 0.19.0

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
   };
@@ -797,8 +840,9 @@ const ColorPicker = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlin
   });
   const setColor = /* @__PURE__ */ qwik.inlinedQrl((color) => {
     const [maxHue2, props2, store2, width2] = qwik.useLexicalScope();
-    const hsv = rgbToHsv(hexNumberToRgb(hexStringToNumber(color)));
-    store2.value = rgbToHex(hsvToRgb(hsv));
+    if (!color.match(/^#[0-9A-F]{6}$/i)) return;
+    const number = hexStringToNumber(color);
+    const hsv = rgbToHsv(hexNumberToRgb(number));
     store2.hue.position = hsv.h * maxHue2;
     store2.hue.color = rgbToHex(hsvToRgb({
       h: hsv.h,
@@ -807,6 +851,7 @@ const ColorPicker = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlin
     }));
     store2.sPosition = hsv.s * width2;
     store2.bPosition = (1 - hsv.v) * maxHue2;
+    store2.value = color;
     props2.onInput$?.(store2.value);
   }, "ColorPicker_component_setColor_QqVIlZ9HOqM", [
     maxHue,
@@ -888,35 +933,30 @@ const ColorPicker = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlin
   }, "ColorPicker_component_sbMouseDown_lP7vsjR4o9U", [
     sbChange
   ]);
-  qwik.useOn("change", /* @__PURE__ */ qwik.inlinedQrl(() => {
-    const [props2, setColor2] = qwik.useLexicalScope();
-    if (!props2.id)
-      return;
-    const inputElement = document.getElementById(props2.id);
-    if (!inputElement)
-      return;
-    setColor2(inputElement.value);
-  }, "ColorPicker_component_useOn_U80lAP6qXKg", [
-    props,
-    setColor
-  ]));
   return /* @__PURE__ */ qwik._jsxQ("div", {
     class: {
-      "motion-safe:transition-all p-4 bg-gray-800/50 backdrop-blur-xl flex gap-6 rounded-lg border border-gray-700 touch-none": true,
+      "motion-safe:transition-all p-4 bg-gray-800/50 backdrop-blur-xl flex gap-4 rounded-lg border border-gray-700 touch-none": true,
       "flex": true,
       "flex-col": !props.horizontal,
       ...props1.class
     }
   }, {
-    id: qwik._fnSignal((p0) => p0.id ? `${p0.id}-picker` : void 0, [
+    id: qwik._fnSignal((p0) => p0.id, [
       props
-    ], "p0.id?`${p0.id}-picker`:undefined")
+    ], "p0.id"),
+    onInput$: /* @__PURE__ */ qwik.inlinedQrl((e, el) => {
+      const [setColor2] = qwik.useLexicalScope();
+      if (!el.dataset.value) return;
+      setColor2(el.dataset.value);
+    }, "ColorPicker_component_div_onInput_61AfRqNB51A", [
+      setColor
+    ])
   }, [
     /* @__PURE__ */ qwik._jsxQ("div", null, {
       class: "flex gap-4"
     }, [
       /* @__PURE__ */ qwik._jsxQ("div", null, {
-        class: "w-[125px] h-[150px] border border-gray-700 rounded-md relative",
+        class: "w-[125px] h-[150px] rounded-md relative",
         style: qwik._fnSignal((p0) => ({
           background: `linear-gradient(to right, #FFFFFF, ${p0.hue.color})`
         }), [
@@ -928,7 +968,7 @@ const ColorPicker = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlin
         onTouchStart$: sbMouseDown
       }, [
         /* @__PURE__ */ qwik._jsxQ("div", null, {
-          class: "w-[123px] h-[149px] rounded-[0.3rem] bg-gradient-to-b from-transparent to-black"
+          class: "w-[125px] h-[150px] rounded-[0.3rem] bg-gradient-to-b from-transparent to-black border border-gray-700"
         }, null, 3, null),
         /* @__PURE__ */ qwik._jsxQ("div", {
           class: {
@@ -967,45 +1007,72 @@ const ColorPicker = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlin
     /* @__PURE__ */ qwik._jsxQ("div", null, {
       class: "w-[150px] flex flex-wrap gap-1 justify-between"
     }, [
-      (props.showInput ?? true) && /* @__PURE__ */ qwik._jsxC(TextInputRaw, {
+      (props.showInput ?? true) && /* @__PURE__ */ qwik._jsxQ("div", {
         class: {
-          "w-[150px] mb-4": true
-        },
-        get value() {
-          return store.value;
-        },
-        style: (props.preview ?? "left") == "full" ? {
-          backgroundColor: `${store.value}`,
-          color: getBrightness(hexNumberToRgb(hexStringToNumber(store.value))) > 0.5 ? "black" : "white"
-        } : (props.preview ?? "left") == "left" ? {
-          borderLeft: `35px solid ${store.value}`
-        } : (props.preview ?? "left") == "right" ? {
-          borderRight: `35px solid ${store.value}`
-        } : (props.preview ?? "left") == "top" ? {
-          borderTop: `10px solid ${store.value}`
-        } : (props.preview ?? "left") == "bottom" ? {
-          borderBottom: `10px solid ${store.value}`
-        } : {},
-        get color() {
-          return props.color ?? "gray";
-        },
-        onInput$: /* @__PURE__ */ qwik.inlinedQrl((e, el) => {
-          const [setColor2] = qwik.useLexicalScope();
-          setColor2(el.value);
-        }, "ColorPicker_component_div_div_TextInputRaw_onInput_nhKRhFMCxTk", [
-          setColor
-        ]),
-        [qwik._IMMUTABLE]: {
-          class: qwik._IMMUTABLE,
-          value: qwik._fnSignal((p0) => p0.value, [
-            store
-          ], "p0.value"),
-          color: qwik._fnSignal((p0) => p0.color ?? "gray", [
-            props
-          ], 'p0.color??"gray"'),
-          onInput$: qwik._IMMUTABLE
+          "flex w-[150px] pb-3 mb-2 border-b border-b-gray-700": 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"
         }
-      }, 3, "sj_0"),
+      }, null, [
+        (props.preview ?? "left") != "full" && /* @__PURE__ */ qwik._jsxQ("div", {
+          class: {
+            "border border-gray-700": true,
+            "h-full aspect-square 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}`
+          }), [
+            store
+          ], "{backgroundColor:`${p0.value}`}")
+        }, null, 3, "sj_0"),
+        /* @__PURE__ */ qwik._jsxC(TextInputRaw, {
+          get class() {
+            return {
+              "w-full": true,
+              "border-t-0 rounded-t-none": (props.preview ?? "left") == "top",
+              "border-b-0 rounded-b-none": (props.preview ?? "left") == "bottom"
+            };
+          },
+          get value() {
+            return store.value;
+          },
+          style: (props.preview ?? "left") == "full" ? {
+            backgroundColor: `${store.value}`,
+            color: getBrightness(hexNumberToRgb(hexStringToNumber(store.value))) > 0.5 ? "black" : "white"
+          } : {},
+          get color() {
+            return props.color ?? "gray";
+          },
+          onInput$: /* @__PURE__ */ qwik.inlinedQrl((e, el) => {
+            const [setColor2] = qwik.useLexicalScope();
+            setColor2(el.value);
+          }, "ColorPicker_component_div_div_div_TextInputRaw_onInput_tZr31WTZETw", [
+            setColor
+          ]),
+          [qwik._IMMUTABLE]: {
+            class: qwik._fnSignal((p0) => ({
+              "w-full": true,
+              "border-t-0 rounded-t-none": (p0.preview ?? "left") == "top",
+              "border-b-0 rounded-b-none": (p0.preview ?? "left") == "bottom"
+            }), [
+              props
+            ], '{"w-full":true,"border-t-0 rounded-t-none":(p0.preview??"left")=="top","border-b-0 rounded-b-none":(p0.preview??"left")=="bottom"}'),
+            value: qwik._fnSignal((p0) => p0.value, [
+              store
+            ], "p0.value"),
+            color: qwik._fnSignal((p0) => p0.color ?? "gray", [
+              props
+            ], 'p0.color??"gray"'),
+            onInput$: qwik._IMMUTABLE
+          }
+        }, 3, "sj_1")
+      ], 1, "sj_2"),
       (props.colors ?? [
         "#FAEDCB",
         "#C9E4DE",
@@ -1054,175 +1121,10 @@ const ColorPicker = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlin
         [qwik._IMMUTABLE]: {
           class: qwik._IMMUTABLE
         }
-      }, 3, "sj_1"), 1, null)
+      }, 3, "sj_3"), 1, null)
     ], 1, null)
-  ], 1, "sj_2");
+  ], 1, "sj_4");
 }, "ColorPicker_component_D1OSB6ycLrI"));
-const ColorInput = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl((props) => {
-  const props1 = qwik._restProps(props, [
-    "onInput$",
-    "value",
-    "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._jsxC(TextInputRaw, {
-      get class() {
-        return {
-          "w-full": true,
-          ...props.class
-        };
-      },
-      ...props1,
-      get value() {
-        return props.value ?? "#000000";
-      },
-      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}-picker`) && !e.target.closest(`#${props12.id}`)) {
-            store2.opened = false;
-            abortController.abort();
-          }
-        }, {
-          signal: abortController.signal
-        });
-        store2.opened = true;
-      }, "ColorInput_component_div_TextInputRaw_onFocus_9bHrhSeTgfI", [
-        props1,
-        store
-      ]),
-      onInput$: /* @__PURE__ */ qwik.inlinedQrl((e, el) => {
-        const [props12, props2] = qwik.useLexicalScope();
-        const div = document.getElementById(`${props12.id}-picker`);
-        const event = new Event("change");
-        div.dispatchEvent(event);
-        props2.onInput$?.(el.value);
-      }, "ColorInput_component_div_TextInputRaw_onInput_nsV3cUv0Sxg", [
-        props1,
-        props
-      ]),
-      style: (props.preview ?? "left") == "full" ? {
-        backgroundColor: `${props.value ?? "#000000"}`,
-        color: getBrightness(hexNumberToRgb(hexStringToNumber(props.value ?? "#000000"))) > 0.5 ? "black" : "white"
-      } : (props.preview ?? "left") == "left" ? {
-        borderLeft: `35px solid ${props.value ?? "#000000"}`
-      } : (props.preview ?? "left") == "right" ? {
-        borderRight: `35px solid ${props.value ?? "#000000"}`
-      } : (props.preview ?? "left") == "top" ? {
-        borderTop: `10px solid ${props.value ?? "#000000"}`
-      } : (props.preview ?? "left") == "bottom" ? {
-        borderBottom: `10px solid ${props.value ?? "#000000"}`
-      } : {},
-      [qwik._IMMUTABLE]: {
-        class: qwik._fnSignal((p0) => ({
-          "w-full": true,
-          ...p0.class
-        }), [
-          props
-        ], '{"w-full":true,...p0.class}'),
-        value: qwik._fnSignal((p0) => p0.value ?? "#000000", [
-          props
-        ], 'p0.value??"#000000"')
-      }
-    }, 0, "0s_1"),
-    /* @__PURE__ */ qwik._jsxC(ColorPicker, {
-      get id() {
-        return props1.id;
-      },
-      get value() {
-        return props.value ?? "#000000";
-      },
-      get color() {
-        return props1.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);
-        el.value = color;
-        switch (props2.preview ?? "left") {
-          case "full":
-            el.style.backgroundColor = color;
-            el.style.color = getBrightness(hexNumberToRgb(hexStringToNumber(color))) > 0.5 ? "black" : "white";
-            break;
-          case "left":
-            el.style.borderLeft = `35px solid ${color}`;
-            break;
-          case "right":
-            el.style.borderRight = `35px solid ${color}`;
-            break;
-          case "top":
-            el.style.borderTop = `10px solid ${color}`;
-            break;
-          case "bottom":
-            el.style.borderBottom = `10px solid ${color}`;
-            break;
-        }
-        props2.onInput$?.(color);
-      }, "ColorInput_component_div_ColorPicker_onInput_iZguRdHILBQ", [
-        props1,
-        props
-      ]),
-      [qwik._IMMUTABLE]: {
-        id: qwik._wrapProp(props1, "id"),
-        value: qwik._fnSignal((p0) => p0.value ?? "#000000", [
-          props
-        ], 'p0.value??"#000000"'),
-        color: qwik._wrapProp(props1, "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_2")
-  ], 1, "0s_3");
-}, "ColorInput_component_jilGo0Bn3Ps"));
 const ChevronDown = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl((props) => {
   return /* @__PURE__ */ qwik._jsxS("svg", {
     xmlns: "http://www.w3.org/2000/svg",
@@ -1565,37 +1467,35 @@ 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, [
+  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
+      }), [
         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
-        }), [
-          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");
+      ], '{"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 = {
@@ -1643,9 +1543,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
         }
@@ -2783,7 +2683,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;
@@ -2815,6 +2714,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

@@ -1,4 +1,4 @@
-import { componentQrl, inlinedQrl, _jsxQ, _fnSignal, _restProps, _jsxS, _jsxC, Slot, _jsxBranch, _IMMUTABLE, _wrapSignal, useStore, useOn, useLexicalScope, _wrapProp, useStylesQrl, useSignal } from "@builder.io/qwik";
+import { componentQrl, inlinedQrl, _jsxQ, _fnSignal, _restProps, _jsxS, _jsxC, Slot, _jsxBranch, _IMMUTABLE, _wrapSignal, useStore, useLexicalScope, useStylesQrl, useSignal } from "@builder.io/qwik";
 import { Fragment } from "@builder.io/qwik/jsx-runtime";
 const Anchor = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => /* @__PURE__ */ _jsxQ("span", null, {
   id: _fnSignal((p0) => p0.id, [
@@ -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
   };
@@ -795,8 +838,9 @@ const ColorPicker = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pro
   });
   const setColor = /* @__PURE__ */ inlinedQrl((color) => {
     const [maxHue2, props2, store2, width2] = useLexicalScope();
-    const hsv = rgbToHsv(hexNumberToRgb(hexStringToNumber(color)));
-    store2.value = rgbToHex(hsvToRgb(hsv));
+    if (!color.match(/^#[0-9A-F]{6}$/i)) return;
+    const number = hexStringToNumber(color);
+    const hsv = rgbToHsv(hexNumberToRgb(number));
     store2.hue.position = hsv.h * maxHue2;
     store2.hue.color = rgbToHex(hsvToRgb({
       h: hsv.h,
@@ -805,6 +849,7 @@ const ColorPicker = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pro
     }));
     store2.sPosition = hsv.s * width2;
     store2.bPosition = (1 - hsv.v) * maxHue2;
+    store2.value = color;
     props2.onInput$?.(store2.value);
   }, "ColorPicker_component_setColor_QqVIlZ9HOqM", [
     maxHue,
@@ -886,35 +931,30 @@ const ColorPicker = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pro
   }, "ColorPicker_component_sbMouseDown_lP7vsjR4o9U", [
     sbChange
   ]);
-  useOn("change", /* @__PURE__ */ inlinedQrl(() => {
-    const [props2, setColor2] = useLexicalScope();
-    if (!props2.id)
-      return;
-    const inputElement = document.getElementById(props2.id);
-    if (!inputElement)
-      return;
-    setColor2(inputElement.value);
-  }, "ColorPicker_component_useOn_U80lAP6qXKg", [
-    props,
-    setColor
-  ]));
   return /* @__PURE__ */ _jsxQ("div", {
     class: {
-      "motion-safe:transition-all p-4 bg-gray-800/50 backdrop-blur-xl flex gap-6 rounded-lg border border-gray-700 touch-none": true,
+      "motion-safe:transition-all p-4 bg-gray-800/50 backdrop-blur-xl flex gap-4 rounded-lg border border-gray-700 touch-none": true,
       "flex": true,
       "flex-col": !props.horizontal,
       ...props1.class
     }
   }, {
-    id: _fnSignal((p0) => p0.id ? `${p0.id}-picker` : void 0, [
+    id: _fnSignal((p0) => p0.id, [
       props
-    ], "p0.id?`${p0.id}-picker`:undefined")
+    ], "p0.id"),
+    onInput$: /* @__PURE__ */ inlinedQrl((e, el) => {
+      const [setColor2] = useLexicalScope();
+      if (!el.dataset.value) return;
+      setColor2(el.dataset.value);
+    }, "ColorPicker_component_div_onInput_61AfRqNB51A", [
+      setColor
+    ])
   }, [
     /* @__PURE__ */ _jsxQ("div", null, {
       class: "flex gap-4"
     }, [
       /* @__PURE__ */ _jsxQ("div", null, {
-        class: "w-[125px] h-[150px] border border-gray-700 rounded-md relative",
+        class: "w-[125px] h-[150px] rounded-md relative",
         style: _fnSignal((p0) => ({
           background: `linear-gradient(to right, #FFFFFF, ${p0.hue.color})`
         }), [
@@ -926,7 +966,7 @@ const ColorPicker = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pro
         onTouchStart$: sbMouseDown
       }, [
         /* @__PURE__ */ _jsxQ("div", null, {
-          class: "w-[123px] h-[149px] rounded-[0.3rem] bg-gradient-to-b from-transparent to-black"
+          class: "w-[125px] h-[150px] rounded-[0.3rem] bg-gradient-to-b from-transparent to-black border border-gray-700"
         }, null, 3, null),
         /* @__PURE__ */ _jsxQ("div", {
           class: {
@@ -965,45 +1005,72 @@ const ColorPicker = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pro
     /* @__PURE__ */ _jsxQ("div", null, {
       class: "w-[150px] flex flex-wrap gap-1 justify-between"
     }, [
-      (props.showInput ?? true) && /* @__PURE__ */ _jsxC(TextInputRaw, {
+      (props.showInput ?? true) && /* @__PURE__ */ _jsxQ("div", {
         class: {
-          "w-[150px] mb-4": true
-        },
-        get value() {
-          return store.value;
-        },
-        style: (props.preview ?? "left") == "full" ? {
-          backgroundColor: `${store.value}`,
-          color: getBrightness(hexNumberToRgb(hexStringToNumber(store.value))) > 0.5 ? "black" : "white"
-        } : (props.preview ?? "left") == "left" ? {
-          borderLeft: `35px solid ${store.value}`
-        } : (props.preview ?? "left") == "right" ? {
-          borderRight: `35px solid ${store.value}`
-        } : (props.preview ?? "left") == "top" ? {
-          borderTop: `10px solid ${store.value}`
-        } : (props.preview ?? "left") == "bottom" ? {
-          borderBottom: `10px solid ${store.value}`
-        } : {},
-        get color() {
-          return props.color ?? "gray";
-        },
-        onInput$: /* @__PURE__ */ inlinedQrl((e, el) => {
-          const [setColor2] = useLexicalScope();
-          setColor2(el.value);
-        }, "ColorPicker_component_div_div_TextInputRaw_onInput_nhKRhFMCxTk", [
-          setColor
-        ]),
-        [_IMMUTABLE]: {
-          class: _IMMUTABLE,
-          value: _fnSignal((p0) => p0.value, [
-            store
-          ], "p0.value"),
-          color: _fnSignal((p0) => p0.color ?? "gray", [
-            props
-          ], 'p0.color??"gray"'),
-          onInput$: _IMMUTABLE
+          "flex w-[150px] pb-3 mb-2 border-b border-b-gray-700": 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"
         }
-      }, 3, "sj_0"),
+      }, null, [
+        (props.preview ?? "left") != "full" && /* @__PURE__ */ _jsxQ("div", {
+          class: {
+            "border border-gray-700": true,
+            "h-full aspect-square 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}`
+          }), [
+            store
+          ], "{backgroundColor:`${p0.value}`}")
+        }, null, 3, "sj_0"),
+        /* @__PURE__ */ _jsxC(TextInputRaw, {
+          get class() {
+            return {
+              "w-full": true,
+              "border-t-0 rounded-t-none": (props.preview ?? "left") == "top",
+              "border-b-0 rounded-b-none": (props.preview ?? "left") == "bottom"
+            };
+          },
+          get value() {
+            return store.value;
+          },
+          style: (props.preview ?? "left") == "full" ? {
+            backgroundColor: `${store.value}`,
+            color: getBrightness(hexNumberToRgb(hexStringToNumber(store.value))) > 0.5 ? "black" : "white"
+          } : {},
+          get color() {
+            return props.color ?? "gray";
+          },
+          onInput$: /* @__PURE__ */ inlinedQrl((e, el) => {
+            const [setColor2] = useLexicalScope();
+            setColor2(el.value);
+          }, "ColorPicker_component_div_div_div_TextInputRaw_onInput_tZr31WTZETw", [
+            setColor
+          ]),
+          [_IMMUTABLE]: {
+            class: _fnSignal((p0) => ({
+              "w-full": true,
+              "border-t-0 rounded-t-none": (p0.preview ?? "left") == "top",
+              "border-b-0 rounded-b-none": (p0.preview ?? "left") == "bottom"
+            }), [
+              props
+            ], '{"w-full":true,"border-t-0 rounded-t-none":(p0.preview??"left")=="top","border-b-0 rounded-b-none":(p0.preview??"left")=="bottom"}'),
+            value: _fnSignal((p0) => p0.value, [
+              store
+            ], "p0.value"),
+            color: _fnSignal((p0) => p0.color ?? "gray", [
+              props
+            ], 'p0.color??"gray"'),
+            onInput$: _IMMUTABLE
+          }
+        }, 3, "sj_1")
+      ], 1, "sj_2"),
       (props.colors ?? [
         "#FAEDCB",
         "#C9E4DE",
@@ -1052,175 +1119,10 @@ const ColorPicker = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pro
         [_IMMUTABLE]: {
           class: _IMMUTABLE
         }
-      }, 3, "sj_1"), 1, null)
+      }, 3, "sj_3"), 1, null)
     ], 1, null)
-  ], 1, "sj_2");
+  ], 1, "sj_4");
 }, "ColorPicker_component_D1OSB6ycLrI"));
-const ColorInput = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
-  const props1 = _restProps(props, [
-    "onInput$",
-    "value",
-    "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__ */ _jsxC(TextInputRaw, {
-      get class() {
-        return {
-          "w-full": true,
-          ...props.class
-        };
-      },
-      ...props1,
-      get value() {
-        return props.value ?? "#000000";
-      },
-      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}-picker`) && !e.target.closest(`#${props12.id}`)) {
-            store2.opened = false;
-            abortController.abort();
-          }
-        }, {
-          signal: abortController.signal
-        });
-        store2.opened = true;
-      }, "ColorInput_component_div_TextInputRaw_onFocus_9bHrhSeTgfI", [
-        props1,
-        store
-      ]),
-      onInput$: /* @__PURE__ */ inlinedQrl((e, el) => {
-        const [props12, props2] = useLexicalScope();
-        const div = document.getElementById(`${props12.id}-picker`);
-        const event = new Event("change");
-        div.dispatchEvent(event);
-        props2.onInput$?.(el.value);
-      }, "ColorInput_component_div_TextInputRaw_onInput_nsV3cUv0Sxg", [
-        props1,
-        props
-      ]),
-      style: (props.preview ?? "left") == "full" ? {
-        backgroundColor: `${props.value ?? "#000000"}`,
-        color: getBrightness(hexNumberToRgb(hexStringToNumber(props.value ?? "#000000"))) > 0.5 ? "black" : "white"
-      } : (props.preview ?? "left") == "left" ? {
-        borderLeft: `35px solid ${props.value ?? "#000000"}`
-      } : (props.preview ?? "left") == "right" ? {
-        borderRight: `35px solid ${props.value ?? "#000000"}`
-      } : (props.preview ?? "left") == "top" ? {
-        borderTop: `10px solid ${props.value ?? "#000000"}`
-      } : (props.preview ?? "left") == "bottom" ? {
-        borderBottom: `10px solid ${props.value ?? "#000000"}`
-      } : {},
-      [_IMMUTABLE]: {
-        class: _fnSignal((p0) => ({
-          "w-full": true,
-          ...p0.class
-        }), [
-          props
-        ], '{"w-full":true,...p0.class}'),
-        value: _fnSignal((p0) => p0.value ?? "#000000", [
-          props
-        ], 'p0.value??"#000000"')
-      }
-    }, 0, "0s_1"),
-    /* @__PURE__ */ _jsxC(ColorPicker, {
-      get id() {
-        return props1.id;
-      },
-      get value() {
-        return props.value ?? "#000000";
-      },
-      get color() {
-        return props1.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);
-        el.value = color;
-        switch (props2.preview ?? "left") {
-          case "full":
-            el.style.backgroundColor = color;
-            el.style.color = getBrightness(hexNumberToRgb(hexStringToNumber(color))) > 0.5 ? "black" : "white";
-            break;
-          case "left":
-            el.style.borderLeft = `35px solid ${color}`;
-            break;
-          case "right":
-            el.style.borderRight = `35px solid ${color}`;
-            break;
-          case "top":
-            el.style.borderTop = `10px solid ${color}`;
-            break;
-          case "bottom":
-            el.style.borderBottom = `10px solid ${color}`;
-            break;
-        }
-        props2.onInput$?.(color);
-      }, "ColorInput_component_div_ColorPicker_onInput_iZguRdHILBQ", [
-        props1,
-        props
-      ]),
-      [_IMMUTABLE]: {
-        id: _wrapProp(props1, "id"),
-        value: _fnSignal((p0) => p0.value ?? "#000000", [
-          props
-        ], 'p0.value??"#000000"'),
-        color: _wrapProp(props1, "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_2")
-  ], 1, "0s_3");
-}, "ColorInput_component_jilGo0Bn3Ps"));
 const ChevronDown = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
   return /* @__PURE__ */ _jsxS("svg", {
     xmlns: "http://www.w3.org/2000/svg",
@@ -1563,37 +1465,35 @@ 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, [
+  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
+      }), [
         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
-        }), [
-          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");
+      ], '{"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 = {
@@ -1641,9 +1541,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
         }
@@ -2782,7 +2682,6 @@ export {
   Button,
   ButtonAnchor,
   Card,
-  ColorInput,
   ColorPicker,
   Dropdown,
   DropdownRaw,
@@ -2814,6 +2713,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.1",
+  "version": "0.19.0",
   "description": "Luminescent UI library",
   "main": "./lib/index.qwik.mjs",
   "qwik": "./lib/index.qwik.mjs",