@luminescent/ui 0.14.0 → 0.16.0

package/lib/index.qwik.mjs

@@ -192,65 +192,146 @@ const Blobs = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) =>
   ], 1, "OL_0");
 }, "Blobs_component_246Oa50YM60"));
 const buttonColorClasses = {
-  slate: "bg-slate-700/90 border-slate-600 hover:bg-slate-600 active:bg-slate-500 focus:border-slate-500",
-  gray: "bg-gray-700/90 border-gray-600 hover:bg-gray-600 active:bg-gray-500 focus:border-gray-500",
-  darkgray: "bg-gray-800/90 border-gray-700 hover:bg-gray-700 active:bg-gray-600 focus:border-gray-600",
-  darkergray: "bg-gray-900/90 border-gray-800 hover:bg-gray-800 active:bg-gray-700 focus:border-gray-700",
-  zinc: "bg-zinc-700/90 border-zinc-600 hover:bg-zinc-600 active:bg-zinc-500 focus:border-zinc-500",
-  neutral: "bg-neutral-700/90 border-neutral-600 hover:bg-neutral-600 active:bg-neutral-500 focus:border-neutral-500",
-  stone: "bg-stone-700/90 border-stone-600 hover:bg-stone-600 active:bg-stone-500 focus:border-stone-500",
-  red: "bg-red-700/90 border-red-600 hover:bg-red-600 active:bg-red-500 focus:border-red-500",
-  orange: "bg-orange-700/90 border-orange-600 hover:bg-orange-600 active:bg-orange-500 focus:border-orange-500",
-  amber: "bg-amber-700/90 border-amber-600 hover:bg-amber-600 active:bg-amber-500 focus:border-amber-500",
-  yellow: "bg-yellow-700/90 border-yellow-600 hover:bg-yellow-600 active:bg-yellow-500 focus:border-yellow-500",
-  lime: "bg-lime-700/90 border-lime-600 hover:bg-lime-600 active:bg-lime-500 focus:border-lime-500",
-  green: "bg-green-700/90 border-green-600 hover:bg-green-600 active:bg-green-500 focus:border-green-500",
-  emerald: "bg-emerald-700/90 border-emerald-600 hover:bg-emerald-600 active:bg-emerald-500 focus:border-emerald-500",
-  teal: "bg-teal-700/90 border-teal-600 hover:bg-teal-600 active:bg-teal-500 focus:border-teal-500",
-  cyan: "bg-cyan-700/90 border-cyan-600 hover:bg-cyan-600 active:bg-cyan-500 focus:border-cyan-500",
-  sky: "bg-sky-700/90 border-sky-600 hover:bg-sky-600 active:bg-sky-500 focus:border-sky-500",
-  blue: "bg-blue-700/90 border-blue-600 hover:bg-blue-600 active:bg-blue-500 focus:border-blue-500",
-  indigo: "bg-indigo-700/90 border-indigo-600 hover:bg-indigo-600 active:bg-indigo-500 focus:border-indigo-500",
-  violet: "bg-violet-700/90 border-violet-600 hover:bg-violet-600 active:bg-violet-500 focus:border-violet-500",
-  purple: "bg-purple-700/90 border-purple-600 hover:bg-purple-600 active:bg-purple-500 focus:border-purple-500",
-  fuchsia: "bg-fuchsia-700/90 border-fuchsia-600 hover:bg-fuchsia-600 active:bg-fuchsia-500 focus:border-fuchsia-500",
-  pink: "bg-pink-700/90 border-pink-600 hover:bg-pink-600 active:bg-pink-500 focus:border-pink-500",
-  rose: "bg-rose-700/90 border-rose-600 hover:bg-rose-600 active:bg-rose-500 focus:border-rose-500",
-  transparent: "bg-transparent border-transparent hover:bg-gray-600/50 active:bg-gray-600/60 focus:border-gray-600/60"
+  slate: {
+    hover: "hover:bg-slate-600 active:bg-slate-500 focus:border-slate-500",
+    bg: "bg-slate-700/90 border-slate-600"
+  },
+  gray: {
+    hover: "hover:bg-gray-600 active:bg-gray-500 focus:border-gray-500",
+    bg: "bg-gray-700/90 border-gray-600"
+  },
+  darkgray: {
+    hover: "hover:bg-gray-700 active:bg-gray-600 focus:border-gray-600",
+    bg: "bg-gray-800/90 border-gray-700"
+  },
+  darkergray: {
+    hover: "hover:bg-gray-800 active:bg-gray-700 focus:border-gray-700",
+    bg: "bg-gray-900/90 border-gray-800"
+  },
+  zinc: {
+    hover: "hover:bg-zinc-600 active:bg-zinc-500 focus:border-zinc-500",
+    bg: "bg-zinc-700/90 border-zinc-600"
+  },
+  neutral: {
+    hover: "hover:bg-neutral-600 active:bg-neutral-500 focus:border-neutral-500",
+    bg: "bg-neutral-700/90 border-neutral-600"
+  },
+  stone: {
+    hover: "hover:bg-stone-600 active:bg-stone-500 focus:border-stone-500",
+    bg: "bg-stone-700/90 border-stone-600"
+  },
+  red: {
+    hover: "hover:bg-red-600 active:bg-red-500 focus:border-red-500",
+    bg: "bg-red-700/90 border-red-600"
+  },
+  orange: {
+    hover: "hover:bg-orange-600 active:bg-orange-500 focus:border-orange-500",
+    bg: "bg-orange-700/90 border-orange-600"
+  },
+  amber: {
+    hover: "hover:bg-amber-600 active:bg-amber-500 focus:border-amber-500",
+    bg: "bg-amber-700/90 border-amber-600"
+  },
+  yellow: {
+    hover: "hover:bg-yellow-600 active:bg-yellow-500 focus:border-yellow-500",
+    bg: "bg-yellow-700/90 border-yellow-600"
+  },
+  lime: {
+    hover: "hover:bg-lime-600 active:bg-lime-500 focus:border-lime-500",
+    bg: "bg-lime-700/90 border-lime-600"
+  },
+  green: {
+    hover: "hover:bg-green-600 active:bg-green-500 focus:border-green-500",
+    bg: "bg-green-700/90 border-green-600"
+  },
+  emerald: {
+    hover: "hover:bg-emerald-600 active:bg-emerald-500 focus:border-emerald-500",
+    bg: "bg-emerald-700/90 border-emerald-600"
+  },
+  teal: {
+    hover: "hover:bg-teal-600 active:bg-teal-500 focus:border-teal-500",
+    bg: "bg-teal-700/90 border-teal-600"
+  },
+  cyan: {
+    hover: "hover:bg-cyan-600 active:bg-cyan-500 focus:border-cyan-500",
+    bg: "bg-cyan-700/90 border-cyan-600"
+  },
+  sky: {
+    hover: "hover:bg-sky-600 active:bg-sky-500 focus:border-sky-500",
+    bg: "bg-sky-700/90 border-sky-600"
+  },
+  blue: {
+    hover: "hover:bg-blue-600 active:bg-blue-500 focus:border-blue-500",
+    bg: "bg-blue-700/90 border-blue-600"
+  },
+  indigo: {
+    hover: "hover:bg-indigo-600 active:bg-indigo-500 focus:border-indigo-500",
+    bg: "bg-indigo-700/90 border-indigo-600"
+  },
+  violet: {
+    hover: "hover:bg-violet-600 active:bg-violet-500 focus:border-violet-500",
+    bg: "bg-violet-700/90 border-violet-600"
+  },
+  purple: {
+    hover: "hover:bg-purple-600 active:bg-purple-500 focus:border-purple-500",
+    bg: "bg-purple-700/90 border-purple-600"
+  },
+  fuchsia: {
+    hover: "hover:bg-fuchsia-600 active:bg-fuchsia-500 focus:border-fuchsia-500",
+    bg: "bg-fuchsia-700/90 border-fuchsia-600"
+  },
+  pink: {
+    hover: "hover:bg-pink-600 active:bg-pink-500 focus:border-pink-500",
+    bg: "bg-pink-700/90 border-pink-600"
+  },
+  rose: {
+    hover: "hover:bg-rose-600 active:bg-rose-500 focus:border-rose-500",
+    bg: "bg-rose-700/90 border-rose-600"
+  }
 };
 const sizeClasses = {
   sm: {
-    base: "text-base rounded-md gap-2",
+    base: "text-base gap-2",
+    round: "rounded-md",
     pad: "px-2.5 py-1.5",
     equal: "p-1.5"
   },
   md: {
-    base: "text-base rounded-md gap-3",
+    base: "text-base gap-3",
+    round: "rounded-md",
     pad: "px-4 py-2",
     equal: "p-2"
   },
   lg: {
-    base: "text-lg rounded-lg gap-3",
+    base: "text-lg gap-3",
+    round: "rounded-lg",
     pad: "px-6 py-3",
     equal: "p-3"
   },
   xl: {
-    base: "text-lg rounded-xl gap-4",
+    base: "text-lg gap-4",
+    round: "rounded-xl",
     pad: "px-8 py-4",
     equal: "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";
+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",
+    "round",
     "square"
   ]);
   props1.class = {
     [buttonClass]: true,
-    [buttonColorClasses[props.color ?? "darkgray"]]: true,
+    [buttonColorClasses[props.color ?? "darkgray"].bg]: !props.transparent,
+    "border-transparent": props.transparent,
+    [buttonColorClasses[props.color ?? "darkgray"].hover]: true,
     [sizeClasses[props.size ?? "md"].base]: true,
+    [sizeClasses[props.size ?? "md"].round]: !props.round,
+    "rounded-full": props.round,
     [sizeClasses[props.size ?? "md"].pad]: !props.square,
     [sizeClasses[props.size ?? "md"].equal]: props.square,
     ...props1.class
@@ -263,13 +344,19 @@ const Button = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) =
 const ButtonAnchor = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
   const props1 = _restProps(props, [
     "color",
+    "transparent",
     "size",
+    "round",
     "square"
   ]);
   props1.class = {
     [buttonClass]: true,
-    [buttonColorClasses[props.color ?? "darkgray"]]: true,
+    [buttonColorClasses[props.color ?? "darkgray"].bg]: !props.transparent,
+    "border-transparent": props.transparent,
+    [buttonColorClasses[props.color ?? "darkgray"].hover]: true,
     [sizeClasses[props.size ?? "md"].base]: true,
+    [sizeClasses[props.size ?? "md"].round]: !props.round,
+    "rounded-full": props.round,
     [sizeClasses[props.size ?? "md"].pad]: !props.square,
     [sizeClasses[props.size ?? "md"].equal]: props.square,
     ...props1.class
@@ -493,7 +580,7 @@ const InputColorClasses = {
   fuchsia: "bg-fuchsia-700/90 border-fuchsia-600 hover:bg-fuchsia-600 active:bg-fuchsia-500 focus:border-fuchsia-300",
   pink: "bg-pink-700/90 border-pink-600 hover:bg-pink-600 active:bg-pink-500 focus:border-pink-300",
   rose: "bg-rose-700/90 border-rose-600 hover:bg-rose-600 active:bg-rose-500 focus:border-rose-300",
-  transparent: "bg-transparent border-transparent hover:bg-gray-600/50 active:bg-gray-600/60 focus:border-gray-300/60"
+  transparent: "bg-transparent border-transparent hover:bg-gray-600/50 active:bg-gray-600/60 focus:border-gray-600/60"
 };
 const InputClasses = "motion-safe:transition ease-in-out border text-gray-50 hover:shadow-lg focus:outline-none rounded-md px-2.5 py-1.5 touch-manipulation";
 const TextInput = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
@@ -634,12 +721,47 @@ function rgbToHsv(color) {
     v
   };
 }
+const Shuffle = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
+  return /* @__PURE__ */ _jsxS("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 512 512",
+    ...props,
+    get height() {
+      return props.width;
+    },
+    children: [
+      /* @__PURE__ */ _jsxQ("path", null, {
+        fill: "none",
+        stroke: "currentColor",
+        "stroke-linecap": "round",
+        "stroke-linejoin": "round",
+        "stroke-width": "32",
+        d: "M400 304l48 48-48 48M400 112l48 48-48 48M64 352h85.19a80 80 0 0066.56-35.62L256 256"
+      }, null, 3, null),
+      /* @__PURE__ */ _jsxQ("path", null, {
+        d: "M64 160h85.19a80 80 0 0166.56 35.62l80.5 120.76A80 80 0 00362.81 352H416M416 160h-53.19a80 80 0 00-66.56 35.62L288 208",
+        fill: "none",
+        stroke: "currentColor",
+        "stroke-linecap": "round",
+        "stroke-linejoin": "round",
+        "stroke-width": "32"
+      }, null, 3, null)
+    ]
+  }, {
+    xmlns: _IMMUTABLE,
+    viewBox: _IMMUTABLE,
+    height: _fnSignal((p0) => p0.width, [
+      props
+    ], "p0.width")
+  }, 0, "zt_0");
+}, "Shuffle_component_DnmmsuyAgDE"));
 const ColorInput = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
   const props1 = _restProps(props, [
     "onInput$",
     "value",
     "presetColors",
-    "preview"
+    "preview",
+    "class"
   ]);
   const store = useStore({
     opened: false
@@ -653,6 +775,12 @@ const ColorInput = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((prop
       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";
@@ -692,6 +820,12 @@ const ColorInput = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((prop
         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"'),
@@ -706,21 +840,23 @@ const ColorInput = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((prop
       get color() {
         return props.value ?? "#000000";
       },
-      get colors() {
-        return [
-          "#FAEDCB",
-          "#C9E4DE",
-          "#C6DEF1",
-          "#DBCDF0",
-          "#F2C6DE",
-          "#FCD05C",
-          "#5FE2C5",
-          "#4498DB",
-          "#9863E7",
-          "#E43A96",
-          ...props.presetColors ?? []
-        ];
-      },
+      colors: [
+        "#FAEDCB",
+        "#C9E4DE",
+        "#C6DEF1",
+        "#DBCDF0",
+        "#F2C6DE",
+        "#FCD05C",
+        "#5FE2C5",
+        "#4498DB",
+        "#9863E7",
+        "#E43A96",
+        "#000000",
+        "#555555",
+        "#AAAAAA",
+        "#FFFFFF",
+        ...props.presetColors ?? []
+      ],
       get class() {
         return {
           "motion-safe:transition-all absolute top-full mt-2 left-0 gap-1 z-[1000]": true,
@@ -759,21 +895,6 @@ const ColorInput = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((prop
         color: _fnSignal((p0) => p0.value ?? "#000000", [
           props
         ], 'p0.value??"#000000"'),
-        colors: _fnSignal((p0) => [
-          "#FAEDCB",
-          "#C9E4DE",
-          "#C6DEF1",
-          "#DBCDF0",
-          "#F2C6DE",
-          "#FCD05C",
-          "#5FE2C5",
-          "#4498DB",
-          "#9863E7",
-          "#E43A96",
-          ...p0.presetColors ?? []
-        ], [
-          props
-        ], '["#FAEDCB","#C9E4DE","#C6DEF1","#DBCDF0","#F2C6DE","#FCD05C","#5FE2C5","#4498DB","#9863E7","#E43A96",...p0.presetColors??[]]'),
         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
@@ -973,30 +1094,56 @@ const ColorPickerRaw = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((
     ], 3, null),
     /* @__PURE__ */ _jsxQ("div", null, {
       class: "w-[150px] flex flex-wrap gap-1 justify-evenly"
-    }, props.colors.map((color, i) => {
-      return /* @__PURE__ */ _jsxQ("button", {
-        style: `background: ${color}`,
+    }, [
+      props.colors.map((color, i) => {
+        return /* @__PURE__ */ _jsxQ("button", {
+          style: `background: ${color}`,
+          onMouseDown$: /* @__PURE__ */ inlinedQrl(() => {
+            const [color2, setColor2] = useLexicalScope();
+            setColor2(color2);
+          }, "ColorPickerRaw_component_div_div_button_onMouseDown_C5tqQYvx7wA", [
+            color,
+            setColor
+          ]),
+          onTouchStart$: /* @__PURE__ */ inlinedQrl(() => {
+            const [color2, setColor2] = useLexicalScope();
+            setColor2(color2);
+          }, "ColorPickerRaw_component_div_div_button_onTouchStart_qgiiO8Blb88", [
+            color,
+            setColor
+          ])
+        }, {
+          class: "w-[1.6rem] h-[1.6rem] border border-gray-700 rounded-md hover:scale-110 motion-safe:transition-all",
+          "preventdefault:mousedown": true,
+          "preventdefault:touchstart": true
+        }, null, 2, i);
+      }),
+      /* @__PURE__ */ _jsxQ("button", null, {
+        class: "w-[1.6rem] h-[1.6rem] border border-gray-700 rounded-md hover:scale-110 motion-safe:transition-all",
+        "preventdefault:mousedown": true,
+        "preventdefault:touchstart": true,
         onMouseDown$: /* @__PURE__ */ inlinedQrl(() => {
-          const [color2, setColor2] = useLexicalScope();
-          setColor2(color2);
-        }, "ColorPickerRaw_component_div_div_button_onMouseDown_C5tqQYvx7wA", [
-          color,
+          const [setColor2] = useLexicalScope();
+          const color = `#${Math.floor(Math.random() * 16777215).toString(16)}`;
+          setColor2(color);
+        }, "ColorPickerRaw_component_div_div_button_onMouseDown_1_30vaDl3iDKc", [
           setColor
         ]),
         onTouchStart$: /* @__PURE__ */ inlinedQrl(() => {
-          const [color2, setColor2] = useLexicalScope();
-          setColor2(color2);
-        }, "ColorPickerRaw_component_div_div_button_onTouchStart_qgiiO8Blb88", [
-          color,
+          const [setColor2] = useLexicalScope();
+          const color = `#${Math.floor(Math.random() * 16777215).toString(16)}`;
+          setColor2(color);
+        }, "ColorPickerRaw_component_div_div_button_onTouchStart_1_w30s4j6SxyE", [
           setColor
         ])
-      }, {
-        class: "w-[25px] h-[25px] border border-gray-700 rounded-md hover:scale-110 motion-safe:transition-all",
-        "preventdefault:mousedown": true,
-        "preventdefault:touchstart": true
-      }, null, 2, i);
-    }), 1, null)
-  ], 1, "0s_4");
+      }, /* @__PURE__ */ _jsxC(Shuffle, {
+        class: "fill-current text-gray-300 pl-0.5 p-0.5",
+        [_IMMUTABLE]: {
+          class: _IMMUTABLE
+        }
+      }, 3, "0s_4"), 1, null)
+    ], 1, null)
+  ], 1, "0s_5");
 }, "ColorPickerRaw_component_CWQPPcezhyA"));
 const ChevronDown = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
   return /* @__PURE__ */ _jsxS("svg", {
@@ -1044,6 +1191,8 @@ const DropdownRaw = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pro
     "class",
     "display",
     "color",
+    "round",
+    "transparent",
     "size",
     "hover"
   ]);
@@ -1101,9 +1250,15 @@ const DropdownRaw = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pro
       class: _IMMUTABLE
     }, 0, "Zz_3"),
     /* @__PURE__ */ _jsxC(Button, {
+      get round() {
+        return props.round;
+      },
       get color() {
         return props.color;
       },
+      get transparent() {
+        return props.transparent;
+      },
       get size() {
         return props.size ?? "sm";
       },
@@ -1152,9 +1307,15 @@ const DropdownRaw = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pro
         }, 3, "Zz_5")
       ],
       [_IMMUTABLE]: {
+        round: _fnSignal((p0) => p0.round, [
+          props
+        ], "p0.round"),
         color: _fnSignal((p0) => p0.color, [
           props
         ], "p0.color"),
+        transparent: _fnSignal((p0) => p0.transparent, [
+          props
+        ], "p0.transparent"),
         size: _fnSignal((p0) => p0.size ?? "sm", [
           props
         ], 'p0.size??"sm"'),
@@ -1173,17 +1334,24 @@ const DropdownRaw = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pro
         "opacity-0 scale-95 pointer-events-none": !store.opened,
         "group-hover:pointer-events-auto group-hover:opacity-100 group-hover:scale-100": props.hover
       }
-    }, null, /* @__PURE__ */ _jsxQ("div", null, {
-      id: _fnSignal((p0) => `lui-${p0.id}-opts`, [
-        props
-      ], "`lui-${p0.id}-opts`"),
+    }, null, /* @__PURE__ */ _jsxQ("div", {
       class: {
-        "motion-safe:transition-all p-1.5 gap-1 bg-gray-800/50 backdrop-blur-xl flex flex-col rounded-lg border border-gray-700 max-h-72 lui-scroll overflow-auto select-none": true
+        "motion-safe:transition-all p-1 gap-1 bg-gray-800/50 backdrop-blur-xl flex flex-col border border-gray-700 max-h-72 lui-scroll overflow-auto select-none": true,
+        "rounded-lg": !props.round,
+        "rounded-3xl": props.round
       }
+    }, {
+      id: _fnSignal((p0) => `lui-${p0.id}-opts`, [
+        props
+      ], "`lui-${p0.id}-opts`")
     }, [
-      props.values?.map(({ name, value, color = "transparent" }, i) => {
+      props.values?.map(({ name, value, color: valueColor }, i) => {
         return /* @__PURE__ */ _jsxC(Button, {
-          color,
+          get round() {
+            return props.round;
+          },
+          color: valueColor ?? props.color,
+          transparent: true,
           get size() {
             return props.size ?? "sm";
           },
@@ -1203,6 +1371,10 @@ const DropdownRaw = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pro
           ]),
           children: name,
           [_IMMUTABLE]: {
+            round: _fnSignal((p0) => p0.round, [
+              props
+            ], "p0.round"),
+            transparent: _IMMUTABLE,
             size: _fnSignal((p0) => p0.size ?? "sm", [
               props
             ], 'p0.size??"sm"')
@@ -1355,14 +1527,14 @@ const Nav = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
         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
+          "opacity-0 top-0 scale-95 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
         }
       }, null, /* @__PURE__ */ _jsxQ("div", {
         class: {
           [navColorClasses[props.color ?? "darkgray"]]: true,
-          "flex flex-col gap-2 motion-safe:transition-all max-w-7xl w-full px-2 py-4 border rounded-lg": true,
-          "before:backdrop-blur-lg": props.color !== "transparent",
-          'before:absolute before:content-[""] before:w-full before:h-full before:drop-shadow-xl before:-z-10': true
+          "flex flex-col gap-2 motion-safe:transition-all max-w-7xl w-full px-2 py-4 border rounded-lg": true
         }
       }, null, /* @__PURE__ */ _jsxC(Slot, {
         name: "mobile",
@@ -1413,7 +1585,7 @@ const Nav = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
             }
           }, 3, "8r_3"),
           /* @__PURE__ */ _jsxC(Button, {
-            color: "transparent",
+            transparent: true,
             square: true,
             class: {
               "sm:hidden": true
@@ -1437,7 +1609,7 @@ const Nav = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
               d: "M4 6h16M4 12h16m-7 6h7"
             }, null, 3, null), 3, null),
             [_IMMUTABLE]: {
-              color: _IMMUTABLE,
+              transparent: _IMMUTABLE,
               square: _IMMUTABLE,
               class: _IMMUTABLE,
               onClick$: _IMMUTABLE
@@ -1542,7 +1714,10 @@ const NumberInputRaw = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((
     /* @__PURE__ */ _jsxC(Button, {
       size: "sm",
       get color() {
-        return (props.color ?? "darkgray") == "darkgray" ? props.input ? "gray" : "darkgray" : props.color ?? "darkgray";
+        return (props.color ?? "darkgray") == "darkgray" || (props.color ?? "darkgray") == "transparent" ? props.input ? "gray" : "darkgray" : props.color ?? "darkgray";
+      },
+      get transparent() {
+        return (props.color ?? "darkgray") == "transparent";
       },
       "data-action": "decrement",
       "aria-label": "Decrement",
@@ -1570,9 +1745,12 @@ const NumberInputRaw = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((
       }, 3, "gk_3"),
       [_IMMUTABLE]: {
         size: _IMMUTABLE,
-        color: _fnSignal((p0) => (p0.color ?? "darkgray") == "darkgray" ? p0.input ? "gray" : "darkgray" : p0.color ?? "darkgray", [
+        color: _fnSignal((p0) => (p0.color ?? "darkgray") == "darkgray" || (p0.color ?? "darkgray") == "transparent" ? p0.input ? "gray" : "darkgray" : p0.color ?? "darkgray", [
           props
-        ], '(p0.color??"darkgray")=="darkgray"?p0.input?"gray":"darkgray":p0.color??"darkgray"'),
+        ], '(p0.color??"darkgray")=="darkgray"||(p0.color??"darkgray")=="transparent"?p0.input?"gray":"darkgray":p0.color??"darkgray"'),
+        transparent: _fnSignal((p0) => (p0.color ?? "darkgray") == "transparent", [
+          props
+        ], '(p0.color??"darkgray")=="transparent"'),
         "data-action": _IMMUTABLE,
         "aria-label": _IMMUTABLE,
         class: _fnSignal((p0) => ({
@@ -1609,7 +1787,10 @@ const NumberInputRaw = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((
     /* @__PURE__ */ _jsxC(Button, {
       size: "sm",
       get color() {
-        return (props.color ?? "darkgray") == "darkgray" ? props.input ? "gray" : "darkgray" : props.color ?? "darkgray";
+        return (props.color ?? "darkgray") == "darkgray" || (props.color ?? "darkgray") == "transparent" ? props.input ? "gray" : "darkgray" : props.color ?? "darkgray";
+      },
+      get transparent() {
+        return (props.color ?? "darkgray") == "transparent";
       },
       "data-action": "increment",
       "aria-label": "Increment",
@@ -1637,9 +1818,12 @@ const NumberInputRaw = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((
       }, 3, "gk_6"),
       [_IMMUTABLE]: {
         size: _IMMUTABLE,
-        color: _fnSignal((p0) => (p0.color ?? "darkgray") == "darkgray" ? p0.input ? "gray" : "darkgray" : p0.color ?? "darkgray", [
+        color: _fnSignal((p0) => (p0.color ?? "darkgray") == "darkgray" || (p0.color ?? "darkgray") == "transparent" ? p0.input ? "gray" : "darkgray" : p0.color ?? "darkgray", [
+          props
+        ], '(p0.color??"darkgray")=="darkgray"||(p0.color??"darkgray")=="transparent"?p0.input?"gray":"darkgray":p0.color??"darkgray"'),
+        transparent: _fnSignal((p0) => (p0.color ?? "darkgray") == "transparent", [
           props
-        ], '(p0.color??"darkgray")=="darkgray"?p0.input?"gray":"darkgray":p0.color??"darkgray"'),
+        ], '(p0.color??"darkgray")=="transparent"'),
         "data-action": _IMMUTABLE,
         "aria-label": _IMMUTABLE,
         class: _fnSignal((p0) => ({
@@ -1899,6 +2083,8 @@ const toggleOffColorClasses = {
 };
 const Toggle = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
   const props1 = _restProps(props, [
+    "checkbox",
+    "round",
     "center",
     "label",
     "onColor",
@@ -1927,9 +2113,12 @@ const Toggle = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) =
       }, 0, null),
       /* @__PURE__ */ _jsxQ("div", {
         class: {
-          "motion-safe:transition ease-in-out w-12 h-7 rounded-md peer border hover:shadow-lg": true,
-          "after:content-[''] after:absolute after:top-[4px] after:left-[4px] after:border after:rounded-[0.2rem] after:h-5 after:w-5 after:motion-safe:transition-all after:ease-in-out": true,
-          "peer-checked:after:translate-x-full": true,
+          "motion-safe:transition ease-in-out h-7 peer border hover:shadow-lg": true,
+          "after:content-[''] after:absolute after:top-[4px] after:left-[4px] after:border after:h-5 after:w-5 after:motion-safe:transition-all after:ease-in-out": true,
+          "rounded-md after:rounded-[0.2rem]": !props.round,
+          "rounded-full after:rounded-full": props.round,
+          "w-12 peer-checked:after:translate-x-full": !props.checkbox,
+          "w-7 after:opacity-0 peer-checked:after:opacity-100": props.checkbox,
           [toggleOnColorClasses[props.onColor ?? "blue"].checked]: true,
           [toggleOnColorClasses[props.onColor ?? "blue"].checkedAfter]: true,
           [toggleOffColorClasses[props.offColor ?? "darkgray"].unchecked]: true,