highsoft-ui 1.0.88 → 1.0.90

package/dist/components/Notification/index.d.ts

@@ -1,10 +1,12 @@
-export type NotificationVariant = 'default' | 'success' | 'danger' | 'attention';
+export type NotificationVariant = 'brand' | 'success' | 'danger' | 'attention';
 export interface NotificationItem {
     title?: string;
     description?: string;
     url?: string;
+    tag?: 'new';
 }
-export declare function Notification({ content, variant, closable, onClose }: {
+export declare function Notification({ id, content, variant, closable, onClose }: {
+    id?: string;
     content: NotificationItem | Array<NotificationItem>;
     variant?: NotificationVariant;
     closable?: boolean;

package/dist/components/Notification/index.js

@@ -1,74 +1,94 @@
-import { jsx as i, jsxs as l, Fragment as m } from "react/jsx-runtime";
-import { useState as p, useEffect as v } from "react";
-import { X as M } from "../../XClose-CCu1vrNS.js";
-import { c as d } from "../../clsx-OuTLNxxd.js";
-import { Button as k } from "../Button/index.js";
-import { Container as W } from "../Container/index.js";
-const _ = "MhRkRW_active", g = "MhRkRW_attention", N = "MhRkRW_carousel", x = "MhRkRW_close", C = "MhRkRW_container", w = "MhRkRW_content", y = "MhRkRW_danger", A = "MhRkRW_description", I = "MhRkRW_notification", b = "MhRkRW_slide", j = "MhRkRW_success", X = "MhRkRW_title", e = {
-  active: _,
-  attention: g,
-  carousel: N,
-  close: x,
-  container: C,
-  content: w,
-  danger: y,
+import { jsx as s, jsxs as l, Fragment as w } from "react/jsx-runtime";
+import { useState as d, useEffect as C } from "react";
+import { X as F } from "../../XClose-CCu1vrNS.js";
+import { c as m } from "../../clsx-OuTLNxxd.js";
+import { Button as y } from "../Button/index.js";
+import { Container as A } from "../Container/index.js";
+import { NewTag as B } from "../NewTag/index.js";
+const E = "MhRkRW_active", j = "MhRkRW_attention", H = "MhRkRW_carousel", L = "MhRkRW_close", P = "MhRkRW_container", X = "MhRkRW_content", $ = "MhRkRW_danger", z = "MhRkRW_description", D = "MhRkRW_notification", S = "MhRkRW_slide", U = "MhRkRW_success", q = "MhRkRW_title", G = "MhRkRW_titleText", e = {
+  active: E,
+  attention: j,
+  carousel: H,
+  close: L,
+  container: P,
+  content: X,
+  danger: $,
   default: "MhRkRW_default",
-  description: A,
-  notification: I,
-  slide: b,
-  success: j,
-  title: X
+  description: z,
+  notification: D,
+  slide: S,
+  success: U,
+  title: q,
+  titleText: G
 };
-function q({
+function et({
+  id: v,
   content: c,
-  variant: o = "default",
-  closable: h = !0,
-  onClose: R
+  variant: r = "brand",
+  closable: M = !0,
+  onClose: g
 }) {
-  const n = Array.isArray(c) ? c : [c], [u, f] = p(
+  const n = Array.isArray(c) ? c : [c], [h, k] = d(
     () => n.length > 1 ? Math.floor(Math.random() * n.length) : 0
-  );
-  v(() => {
-    if (n.length <= 1) return;
+  ), [W, u] = d(!1), [_, f] = d(!1), R = W || _, i = n[h]?.url, N = i ? "a" : "div";
+  C(() => {
+    if (n.length <= 1 || R) return;
     const t = window.setInterval(() => {
-      f((s) => (s + 1) % n.length);
+      k((o) => (o + 1) % n.length);
     }, 15e3);
     return () => window.clearInterval(t);
-  }, [n.length]);
-  const a = (t) => {
-    const s = /* @__PURE__ */ l(m, { children: [
-      t.title && /* @__PURE__ */ i("span", { className: e.title, children: t.title }),
-      t.description && /* @__PURE__ */ i("span", { className: e.description, children: t.description })
+  }, [n.length, R]);
+  const x = () => u(!0), I = (t) => {
+    t.currentTarget.contains(t.relatedTarget) || u(!1);
+  }, b = () => f(!0), T = () => f(!1), p = (t, o = !0) => {
+    const a = /* @__PURE__ */ l(w, { children: [
+      t.title && /* @__PURE__ */ l("span", { className: e.title, children: [
+        t.tag === "new" && /* @__PURE__ */ s(B, { variant: r, icon: !1 }),
+        /* @__PURE__ */ s("span", { className: e.titleText, children: t.title })
+      ] }),
+      t.description && /* @__PURE__ */ s("span", { className: e.description, children: t.description })
     ] });
-    return t.url ? /* @__PURE__ */ i("a", { href: t.url, className: e.content, children: s }) : /* @__PURE__ */ i("div", { className: e.content, children: s });
+    return /* @__PURE__ */ s("div", { className: e.content, "aria-hidden": !o, children: a });
   };
-  return n.length ? /* @__PURE__ */ i(
-    "div",
+  return n.length ? /* @__PURE__ */ s(
+    N,
     {
-      className: d(e.notification, e[o]),
+      className: m(e.notification, e[r]),
       "data-theme": "light",
-      children: /* @__PURE__ */ l(W, { className: e.container, children: [
-        n.length > 1 ? /* @__PURE__ */ i("div", { className: e.carousel, "aria-live": "polite", children: n.map((t, s) => {
-          const r = s === u;
-          return /* @__PURE__ */ i(
+      ...i ? {
+        href: i,
+        "data-track": "header-banner",
+        "data-track-action": "click",
+        "data-track-label": v || i
+      } : {},
+      onFocus: x,
+      onBlur: I,
+      onMouseEnter: b,
+      onMouseLeave: T,
+      children: /* @__PURE__ */ l(A, { className: e.container, children: [
+        n.length > 1 ? /* @__PURE__ */ s("div", { className: e.carousel, "aria-live": "polite", children: n.map((t, o) => {
+          const a = o === h;
+          return /* @__PURE__ */ s(
             "div",
             {
-              className: d(e.slide, { [e.active]: r }),
-              "aria-hidden": !r,
-              children: a(t)
+              className: m(e.slide, { [e.active]: a }),
+              "aria-hidden": !a,
+              children: p(t, a)
             },
-            `${t.title ?? t.description ?? "item"}-${s}`
+            `${t.title ?? t.description ?? "item"}-${o}`
           );
-        }) }) : a(n[0]),
-        h && /* @__PURE__ */ i(
-          k,
+        }) }) : p(n[0]),
+        M && /* @__PURE__ */ s(
+          y,
           {
-            variant: o === "default" ? "brand" : "transparent",
+            variant: r === "brand" ? "brand" : "transparent",
             size: 100,
             className: e.close,
             "aria-label": "Close notification",
-            onClick: () => R?.(),
-            children: /* @__PURE__ */ i(M, {})
+            onClick: (t) => {
+              t.preventDefault(), t.stopPropagation(), g?.();
+            },
+            children: /* @__PURE__ */ s(F, {})
           }
         )
       ] })
@@ -76,5 +96,5 @@ function q({
   ) : null;
 }
 export {
-  q as Notification
+  et as Notification
 };

package/dist/components/ThemeLoader/index.d.ts

@@ -0,0 +1,2 @@
+export declare const themeLoaderScript = "(() => {\n  const THEME_KEY = 'theme';\n  const cookie = document.cookie\n    .split('; ')\n    .find((row) => row.startsWith(`${THEME_KEY}=`));\n\n  if (!cookie) return;\n\n  const value = decodeURIComponent(cookie.split('=')[1] || '');\n  if (!value) return;\n\n  try {\n    const current = localStorage.getItem(THEME_KEY);\n    if (current !== value) {\n      localStorage.setItem(THEME_KEY, value);\n    }\n  } catch (error) {}\n\n  document.documentElement.setAttribute('data-theme', value);\n  document.documentElement.classList.add(value);\n})();";
+export declare function ThemeLoader(): import("react/jsx-runtime").JSX.Element;

package/dist/components/ThemeLoader/index.js

@@ -0,0 +1,29 @@
+import { jsx as e } from "react/jsx-runtime";
+const t = `(() => {
+  const THEME_KEY = 'theme';
+  const cookie = document.cookie
+    .split('; ')
+    .find((row) => row.startsWith(\`\${THEME_KEY}=\`));
+
+  if (!cookie) return;
+
+  const value = decodeURIComponent(cookie.split('=')[1] || '');
+  if (!value) return;
+
+  try {
+    const current = localStorage.getItem(THEME_KEY);
+    if (current !== value) {
+      localStorage.setItem(THEME_KEY, value);
+    }
+  } catch (error) {}
+
+  document.documentElement.setAttribute('data-theme', value);
+  document.documentElement.classList.add(value);
+})();`;
+function r() {
+  return /* @__PURE__ */ e("script", { dangerouslySetInnerHTML: { __html: t } });
+}
+export {
+  r as ThemeLoader,
+  t as themeLoaderScript
+};