@luminescent/ui 0.16.0 → 0.16.1

package/lib/index.qwik.cjs

@@ -1422,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, [
@@ -1446,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"
@@ -1459,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"
@@ -1478,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 = {

package/lib/index.qwik.mjs

@@ -1420,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, [
@@ -1444,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"
@@ -1457,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"
@@ -1476,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 = {

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/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/package.json

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