@luminescent/ui 0.15.0 → 0.16.1

package/lib/index.qwik.cjs

@@ -293,22 +293,26 @@ const buttonColorClasses = {
 };
 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"
   }
@@ -319,6 +323,7 @@ const Button = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl
     "color",
     "transparent",
     "size",
+    "round",
     "square"
   ]);
   props1.class = {
@@ -327,6 +332,8 @@ const Button = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl
     "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
@@ -341,6 +348,7 @@ const ButtonAnchor = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inli
     "color",
     "transparent",
     "size",
+    "round",
     "square"
   ]);
   props1.class = {
@@ -349,6 +357,8 @@ const ButtonAnchor = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inli
     "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
@@ -713,12 +723,47 @@ function rgbToHsv(color) {
     v
   };
 }
+const Shuffle = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl((props) => {
+  return /* @__PURE__ */ qwik._jsxS("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 512 512",
+    ...props,
+    get height() {
+      return props.width;
+    },
+    children: [
+      /* @__PURE__ */ qwik._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__ */ qwik._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: qwik._IMMUTABLE,
+    viewBox: qwik._IMMUTABLE,
+    height: qwik._fnSignal((p0) => p0.width, [
+      props
+    ], "p0.width")
+  }, 0, "zt_0");
+}, "Shuffle_component_DnmmsuyAgDE"));
 const ColorInput = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl((props) => {
   const props1 = qwik._restProps(props, [
     "onInput$",
     "value",
     "presetColors",
-    "preview"
+    "preview",
+    "class"
   ]);
   const store = qwik.useStore({
     opened: false
@@ -732,6 +777,12 @@ const ColorInput = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inline
       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";
@@ -771,6 +822,12 @@ const ColorInput = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inline
         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"'),
@@ -785,21 +842,23 @@ const ColorInput = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inline
       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,
@@ -838,21 +897,6 @@ const ColorInput = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inline
         color: qwik._fnSignal((p0) => p0.value ?? "#000000", [
           props
         ], 'p0.value??"#000000"'),
-        colors: qwik._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: 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
@@ -1052,30 +1096,56 @@ const ColorPickerRaw = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.in
     ], 3, null),
     /* @__PURE__ */ qwik._jsxQ("div", null, {
       class: "w-[150px] flex flex-wrap gap-1 justify-evenly"
-    }, props.colors.map((color, i) => {
-      return /* @__PURE__ */ qwik._jsxQ("button", {
-        style: `background: ${color}`,
+    }, [
+      props.colors.map((color, i) => {
+        return /* @__PURE__ */ qwik._jsxQ("button", {
+          style: `background: ${color}`,
+          onMouseDown$: /* @__PURE__ */ qwik.inlinedQrl(() => {
+            const [color2, setColor2] = qwik.useLexicalScope();
+            setColor2(color2);
+          }, "ColorPickerRaw_component_div_div_button_onMouseDown_C5tqQYvx7wA", [
+            color,
+            setColor
+          ]),
+          onTouchStart$: /* @__PURE__ */ qwik.inlinedQrl(() => {
+            const [color2, setColor2] = qwik.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__ */ qwik._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__ */ qwik.inlinedQrl(() => {
-          const [color2, setColor2] = qwik.useLexicalScope();
-          setColor2(color2);
-        }, "ColorPickerRaw_component_div_div_button_onMouseDown_C5tqQYvx7wA", [
-          color,
+          const [setColor2] = qwik.useLexicalScope();
+          const color = `#${Math.floor(Math.random() * 16777215).toString(16)}`;
+          setColor2(color);
+        }, "ColorPickerRaw_component_div_div_button_onMouseDown_1_30vaDl3iDKc", [
           setColor
         ]),
         onTouchStart$: /* @__PURE__ */ qwik.inlinedQrl(() => {
-          const [color2, setColor2] = qwik.useLexicalScope();
-          setColor2(color2);
-        }, "ColorPickerRaw_component_div_div_button_onTouchStart_qgiiO8Blb88", [
-          color,
+          const [setColor2] = qwik.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__ */ qwik._jsxC(Shuffle, {
+        class: "fill-current text-gray-300 pl-0.5 p-0.5",
+        [qwik._IMMUTABLE]: {
+          class: qwik._IMMUTABLE
+        }
+      }, 3, "0s_4"), 1, null)
+    ], 1, null)
+  ], 1, "0s_5");
 }, "ColorPickerRaw_component_CWQPPcezhyA"));
 const ChevronDown = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl((props) => {
   return /* @__PURE__ */ qwik._jsxS("svg", {
@@ -1123,6 +1193,7 @@ const DropdownRaw = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlin
     "class",
     "display",
     "color",
+    "round",
     "transparent",
     "size",
     "hover"
@@ -1181,6 +1252,9 @@ const DropdownRaw = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlin
       class: qwik._IMMUTABLE
     }, 0, "Zz_3"),
     /* @__PURE__ */ qwik._jsxC(Button, {
+      get round() {
+        return props.round;
+      },
       get color() {
         return props.color;
       },
@@ -1235,6 +1309,9 @@ const DropdownRaw = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlin
         }, 3, "Zz_5")
       ],
       [qwik._IMMUTABLE]: {
+        round: qwik._fnSignal((p0) => p0.round, [
+          props
+        ], "p0.round"),
         color: qwik._fnSignal((p0) => p0.color, [
           props
         ], "p0.color"),
@@ -1259,16 +1336,22 @@ const DropdownRaw = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlin
         "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__ */ qwik._jsxQ("div", null, {
-      id: qwik._fnSignal((p0) => `lui-${p0.id}-opts`, [
-        props
-      ], "`lui-${p0.id}-opts`"),
+    }, null, /* @__PURE__ */ qwik._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: qwik._fnSignal((p0) => `lui-${p0.id}-opts`, [
+        props
+      ], "`lui-${p0.id}-opts`")
     }, [
       props.values?.map(({ name, value, color: valueColor }, i) => {
         return /* @__PURE__ */ qwik._jsxC(Button, {
+          get round() {
+            return props.round;
+          },
           color: valueColor ?? props.color,
           transparent: true,
           get size() {
@@ -1290,6 +1373,9 @@ const DropdownRaw = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlin
           ]),
           children: name,
           [qwik._IMMUTABLE]: {
+            round: qwik._fnSignal((p0) => p0.round, [
+              props
+            ], "p0.round"),
             transparent: qwik._IMMUTABLE,
             size: qwik._fnSignal((p0) => p0.size ?? "sm", [
               props
@@ -1336,17 +1422,42 @@ const LoadingIcon = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlin
     ], '{borderWidth:p0.width/8,width:p0.width,height:p0.width,animation:`spin ${p0.speed??"0.6s"} ease-in-out infinite`}')
   }, 0, "1A_0");
 }, "LoadingIcon_component_QMsA9D0RcAM"));
+const Link = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl((props) => {
+  return /* @__PURE__ */ qwik._jsxS("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 512 512",
+    ...props,
+    get height() {
+      return props.width;
+    },
+    children: /* @__PURE__ */ qwik._jsxQ("path", null, {
+      d: "M208 352h-64a96 96 0 010-192h64M304 160h64a96 96 0 010 192h-64M163.29 256h187.42",
+      fill: "none",
+      stroke: "currentColor",
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round",
+      "stroke-width": "36"
+    }, null, 3, null)
+  }, {
+    xmlns: qwik._IMMUTABLE,
+    viewBox: qwik._IMMUTABLE,
+    height: qwik._fnSignal((p0) => p0.width, [
+      props
+    ], "p0.width")
+  }, 0, "jn_0");
+}, "Link_component_qTbVd8bIKcc"));
 const Header = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl((props) => {
   qwik._jsxBranch();
   const props1 = qwik._restProps(props, [
     "id",
+    "anchor",
     "loading",
     "subheader"
   ]);
   let Component = /* @__PURE__ */ qwik._jsxC(jsxRuntime.Fragment, {
     children: /* @__PURE__ */ qwik._jsxQ("h2", {
       class: {
-        "flex gap-2 flex-1 items-center font-bold text-xl sm:text-2xl whitespace-nowrap text-white": true,
+        "flex gap-2 flex-1 group items-center font-bold text-xl sm:text-2xl whitespace-nowrap text-white": true,
         ...props1.class
       }
     }, null, [
@@ -1360,9 +1471,24 @@ const Header = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl
             props
           ], "p0.id")
         }
-      }, 3, "dL_1")
+      }, 3, "dL_1"),
+      props.anchor && props.id && /* @__PURE__ */ qwik._jsxQ("a", null, {
+        href: qwik._fnSignal((p0) => `#${p0.id}`, [
+          props
+        ], "`#${p0.id}`"),
+        onClick$: /* @__PURE__ */ qwik.inlinedQrl(() => {
+          navigator.clipboard.writeText(window.location.href);
+        }, "Header_component_Component__Fragment_h2_a_onClick_rVkO8eotENE")
+      }, /* @__PURE__ */ qwik._jsxC(Link, {
+        class: "transition-all opacity-10 group-hover:opacity-100 active:scale-75",
+        width: 24,
+        [qwik._IMMUTABLE]: {
+          class: qwik._IMMUTABLE,
+          width: qwik._IMMUTABLE
+        }
+      }, 3, "dL_2"), 1, "dL_3")
     ], 1, null)
-  }, 1, "dL_2");
+  }, 1, "dL_4");
   if (props.subheader)
     Component = /* @__PURE__ */ qwik._jsxQ("div", null, {
       class: "flex flex-1 flex-col gap-1"
@@ -1373,7 +1499,7 @@ const Header = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl
       }, qwik._fnSignal((p0) => p0.subheader, [
         props
       ], "p0.subheader"), 3, null)
-    ], 1, "dL_3");
+    ], 1, "dL_5");
   if (props.loading !== void 0)
     Component = /* @__PURE__ */ qwik._jsxQ("div", null, {
       class: "flex"
@@ -1392,8 +1518,8 @@ const Header = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl
         [qwik._IMMUTABLE]: {
           width: qwik._IMMUTABLE
         }
-      }, 3, "dL_4"), 1, null)
-    ], 1, "dL_5");
+      }, 3, "dL_6"), 1, null)
+    ], 1, "dL_7");
   return Component;
 }, "Header_component_FfGOhhBNG5k"));
 const navColorClasses = {
@@ -1999,6 +2125,8 @@ const toggleOffColorClasses = {
 };
 const Toggle = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl((props) => {
   const props1 = qwik._restProps(props, [
+    "checkbox",
+    "round",
     "center",
     "label",
     "onColor",
@@ -2027,9 +2155,12 @@ const Toggle = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl
       }, 0, null),
       /* @__PURE__ */ qwik._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,

package/lib/index.qwik.mjs

@@ -291,22 +291,26 @@ const buttonColorClasses = {
 };
 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"
   }
@@ -317,6 +321,7 @@ const Button = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) =
     "color",
     "transparent",
     "size",
+    "round",
     "square"
   ]);
   props1.class = {
@@ -325,6 +330,8 @@ const Button = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) =
     "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
@@ -339,6 +346,7 @@ const ButtonAnchor = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pr
     "color",
     "transparent",
     "size",
+    "round",
     "square"
   ]);
   props1.class = {
@@ -347,6 +355,8 @@ const ButtonAnchor = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pr
     "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
@@ -711,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
@@ -730,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";
@@ -769,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"'),
@@ -783,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,
@@ -836,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
@@ -1050,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", {
@@ -1121,6 +1191,7 @@ const DropdownRaw = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pro
     "class",
     "display",
     "color",
+    "round",
     "transparent",
     "size",
     "hover"
@@ -1179,6 +1250,9 @@ 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;
       },
@@ -1233,6 +1307,9 @@ 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"),
@@ -1257,16 +1334,22 @@ 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: valueColor }, i) => {
         return /* @__PURE__ */ _jsxC(Button, {
+          get round() {
+            return props.round;
+          },
           color: valueColor ?? props.color,
           transparent: true,
           get size() {
@@ -1288,6 +1371,9 @@ 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
@@ -1334,17 +1420,42 @@ const LoadingIcon = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pro
     ], '{borderWidth:p0.width/8,width:p0.width,height:p0.width,animation:`spin ${p0.speed??"0.6s"} ease-in-out infinite`}')
   }, 0, "1A_0");
 }, "LoadingIcon_component_QMsA9D0RcAM"));
+const Link = /* @__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, {
+      d: "M208 352h-64a96 96 0 010-192h64M304 160h64a96 96 0 010 192h-64M163.29 256h187.42",
+      fill: "none",
+      stroke: "currentColor",
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round",
+      "stroke-width": "36"
+    }, null, 3, null)
+  }, {
+    xmlns: _IMMUTABLE,
+    viewBox: _IMMUTABLE,
+    height: _fnSignal((p0) => p0.width, [
+      props
+    ], "p0.width")
+  }, 0, "jn_0");
+}, "Link_component_qTbVd8bIKcc"));
 const Header = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
   _jsxBranch();
   const props1 = _restProps(props, [
     "id",
+    "anchor",
     "loading",
     "subheader"
   ]);
   let Component = /* @__PURE__ */ _jsxC(Fragment, {
     children: /* @__PURE__ */ _jsxQ("h2", {
       class: {
-        "flex gap-2 flex-1 items-center font-bold text-xl sm:text-2xl whitespace-nowrap text-white": true,
+        "flex gap-2 flex-1 group items-center font-bold text-xl sm:text-2xl whitespace-nowrap text-white": true,
         ...props1.class
       }
     }, null, [
@@ -1358,9 +1469,24 @@ const Header = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) =
             props
           ], "p0.id")
         }
-      }, 3, "dL_1")
+      }, 3, "dL_1"),
+      props.anchor && props.id && /* @__PURE__ */ _jsxQ("a", null, {
+        href: _fnSignal((p0) => `#${p0.id}`, [
+          props
+        ], "`#${p0.id}`"),
+        onClick$: /* @__PURE__ */ inlinedQrl(() => {
+          navigator.clipboard.writeText(window.location.href);
+        }, "Header_component_Component__Fragment_h2_a_onClick_rVkO8eotENE")
+      }, /* @__PURE__ */ _jsxC(Link, {
+        class: "transition-all opacity-10 group-hover:opacity-100 active:scale-75",
+        width: 24,
+        [_IMMUTABLE]: {
+          class: _IMMUTABLE,
+          width: _IMMUTABLE
+        }
+      }, 3, "dL_2"), 1, "dL_3")
     ], 1, null)
-  }, 1, "dL_2");
+  }, 1, "dL_4");
   if (props.subheader)
     Component = /* @__PURE__ */ _jsxQ("div", null, {
       class: "flex flex-1 flex-col gap-1"
@@ -1371,7 +1497,7 @@ const Header = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) =
       }, _fnSignal((p0) => p0.subheader, [
         props
       ], "p0.subheader"), 3, null)
-    ], 1, "dL_3");
+    ], 1, "dL_5");
   if (props.loading !== void 0)
     Component = /* @__PURE__ */ _jsxQ("div", null, {
       class: "flex"
@@ -1390,8 +1516,8 @@ const Header = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) =
         [_IMMUTABLE]: {
           width: _IMMUTABLE
         }
-      }, 3, "dL_4"), 1, null)
-    ], 1, "dL_5");
+      }, 3, "dL_6"), 1, null)
+    ], 1, "dL_7");
   return Component;
 }, "Header_component_FfGOhhBNG5k"));
 const navColorClasses = {
@@ -1997,6 +2123,8 @@ const toggleOffColorClasses = {
 };
 const Toggle = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
   const props1 = _restProps(props, [
+    "checkbox",
+    "round",
     "center",
     "label",
     "onColor",
@@ -2025,9 +2153,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,

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

@@ -100,21 +100,25 @@ export declare const buttonColorClasses: {
 export declare const sizeClasses: {
     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;
     };
@@ -123,6 +127,7 @@ interface GenericButtonProps {
     color?: keyof typeof buttonColorClasses;
     transparent?: boolean;
     size?: keyof typeof sizeClasses;
+    round?: boolean;
     square?: boolean;
     class?: {
         [key: string]: boolean | undefined;

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

@@ -6,6 +6,7 @@ interface DropdownProps extends Omit<PropsOf<'select'>, 'class' | 'size'> {
     };
     display?: JSXChildren;
     color?: keyof typeof buttonColorClasses;
+    round?: boolean;
     transparent?: boolean;
     size?: keyof typeof sizeClasses;
     hover?: boolean;

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

@@ -4,6 +4,7 @@ interface HeaderProps extends Omit<PropsOf<'h2'>, 'class'> {
         [key: string]: boolean;
     };
     id?: string;
+    anchor?: boolean;
     loading?: boolean;
     subheader?: string | JSXOutput;
 }

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

@@ -5,6 +5,8 @@ interface ToggleProps extends Omit<(PropsOf<'input'> & {
     class?: {
         [key: string]: boolean;
     };
+    checkbox?: boolean;
+    round?: boolean;
     onColor?: keyof typeof toggleOnColorClasses;
     offColor?: keyof typeof toggleOffColorClasses;
     center?: boolean;

package/lib-types/svg/Link.d.ts

@@ -0,0 +1,2 @@
+import type { IconProps } from '../components/logos/IconProps';
+export declare const Link: import("@builder.io/qwik").Component<IconProps>;

package/lib-types/svg/Shuffle.d.ts

@@ -0,0 +1,2 @@
+import type { IconProps } from '../components/logos/IconProps';
+export declare const Shuffle: import("@builder.io/qwik").Component<IconProps>;

package/package.json

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