highsoft-ui 1.0.1 → 1.0.3

package/README.md

@@ -1,5 +1,14 @@
 # Highsoft UI
 
+## Development
+
+```sh
+npm i
+npm run dev
+```
+
+`src` contains a test application using the component library located in `lib`.
+
 ## PHP
 
 1. Build script

package/dist/components/Button/index.js

@@ -1,42 +1,42 @@
-import { jsx as e } from "react/jsx-runtime";
-import { c } from "../../clsx-OuTLNxxd.js";
-const i = "_button_xzze6_17", r = "_content_xzze6_28", x = "_neutral_xzze6_35", u = "_white_xzze6_52", l = "_transparent_xzze6_71", p = "_plain_xzze6_88", b = "_brand_xzze6_110", d = "_success_xzze6_127", m = "_attention_xzze6_142", h = "_danger_xzze6_157", t = {
-  button: i,
-  content: r,
-  neutral: x,
+import { jsx as n } from "react/jsx-runtime";
+import { c as i } from "../../clsx-OuTLNxxd.js";
+const r = "_button_q36f8_17", f = "_content_q36f8_33", q = "_neutral_q36f8_40", u = "_white_q36f8_57", z = "_transparent_q36f8_76", l = "_plain_q36f8_98", p = "_brand_q36f8_123", b = "_success_q36f8_140", d = "_attention_q36f8_155", m = "_danger_q36f8_170", t = {
+  button: r,
+  content: f,
+  neutral: q,
   white: u,
-  transparent: l,
-  plain: p,
-  brand: b,
-  success: d,
-  attention: m,
-  danger: h,
-  "size-50": "_size-50_xzze6_174",
-  "size-100": "_size-100_xzze6_190",
-  "size-200": "_size-200_xzze6_206",
-  "size-300": "_size-300_xzze6_222",
-  "size-400": "_size-400_xzze6_238",
-  "size-500": "_size-500_xzze6_254"
+  transparent: z,
+  plain: l,
+  brand: p,
+  success: b,
+  attention: d,
+  danger: m,
+  "size-50": "_size-50_q36f8_266",
+  "size-100": "_size-100_q36f8_282",
+  "size-200": "_size-200_q36f8_299",
+  "size-300": "_size-300_q36f8_316",
+  "size-400": "_size-400_q36f8_333",
+  "size-500": "_size-500_q36f8_350"
 };
 function w({
-  children: n,
-  variant: _ = "neutral",
-  size: s = 200,
-  as: z = "button",
-  className: o,
-  ...a
+  children: _,
+  variant: s = "neutral",
+  size: e = 200,
+  as: o = "button",
+  className: a,
+  ...c
 }) {
-  return /* @__PURE__ */ e(
-    z,
+  return /* @__PURE__ */ n(
+    o,
     {
-      className: c(
-        o,
+      className: i(
+        a,
         t.button,
-        t[_],
-        t[`size-${s}`]
+        t[s],
+        t[`size-${e}`]
       ),
-      ...a,
-      children: /* @__PURE__ */ e("span", { className: t.content, children: n })
+      ...c,
+      children: /* @__PURE__ */ n("span", { className: t.content, children: _ })
     }
   );
 }

package/dist/components/Container/index.js

@@ -1,6 +1,6 @@
 import { jsx as c } from "react/jsx-runtime";
 import { c as s } from "../../clsx-OuTLNxxd.js";
-const a = "_container_1534h_1", e = {
+const a = "_container_mh6y2_1", e = {
   container: a
 };
 function f({

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

@@ -1,4 +1,11 @@
+import { ButtonHTMLAttributes, ReactNode } from 'react';
+interface GPTButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: "primary" | "secondary";
+    children: ReactNode;
+}
+export default function GPTButton({ variant, className, children, ...props }: GPTButtonProps): import("react/jsx-runtime").JSX.Element;
 export declare function GPTInput({ autoFocus, onSubmit, }: {
     autoFocus?: boolean;
     onSubmit: (prompt: string) => void;
 }): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/GPTInput/index.js

@@ -1,57 +1,88 @@
-import { jsxs as x, jsx as n } from "react/jsx-runtime";
-import { useRef as y, useState as d, useLayoutEffect as _ } from "react";
-import { c as v } from "../../clsx-OuTLNxxd.js";
-import g from "../icons/Bubble.js";
+import { jsx as n, jsxs as l } from "react/jsx-runtime";
+import { useRef as x, useState as h, useLayoutEffect as g } from "react";
+import { c as _ } from "../../clsx-OuTLNxxd.js";
+import v from "../icons/Bubble.js";
 import b from "../icons/Plane.js";
-const k = "_inputWrap_12kfl_17", S = "_active_12kfl_53", K = "_textarea_12kfl_61", a = {
-  inputWrap: k,
-  active: S,
-  textarea: K
+const C = "_inputContainer_1v7xg_17", S = "_bottomFade_1v7xg_20", K = "_inputWrap_1v7xg_23", P = "_textarea_1v7xg_26", N = "_button_1v7xg_92", W = "_primary_1v7xg_127", k = "_secondary_1v7xg_136", D = "_disclaimer_1v7xg_142", r = {
+  inputContainer: C,
+  bottomFade: S,
+  inputWrap: K,
+  textarea: P,
+  button: N,
+  primary: W,
+  secondary: k,
+  disclaimer: D
 };
-function w({
-  autoFocus: r,
-  onSubmit: u
+function F({
+  variant: a = "primary",
+  className: s,
+  children: e,
+  ...o
 }) {
-  const e = y(null), [o, s] = d(""), c = o.trim(), p = !!c;
-  _(() => {
+  return /* @__PURE__ */ n(
+    "button",
+    {
+      className: _(r.button, r[a], s),
+      ...o,
+      children: /* @__PURE__ */ n("span", { children: e })
+    }
+  );
+}
+function I({
+  autoFocus: a,
+  onSubmit: s
+}) {
+  const e = x(null), [o, i] = h(""), c = o.trim(), u = !!c;
+  g(() => {
     var t;
-    r && ((t = e.current) == null || t.focus());
-  }, [r]);
-  const i = () => {
+    a && ((t = e.current) == null || t.focus());
+  }, [a]);
+  const p = () => {
     const t = e.current;
     t && (t.style.height = "64px", t.style.height = `${t.scrollHeight + 4}px`);
+  }, d = (t) => {
+    i(t.target.value), p();
   }, m = (t) => {
-    s(t.target.value), i();
-  }, l = (t) => {
-    t.preventDefault(), u(c), s(""), requestAnimationFrame(i);
+    t.preventDefault(), s(c), i(""), requestAnimationFrame(p);
   }, f = (t) => {
-    t.key === "Enter" && !t.shiftKey && !t.ctrlKey && !t.metaKey && l(t);
-  }, h = () => {
+    t.key === "Enter" && !t.shiftKey && !t.ctrlKey && !t.metaKey && m(t);
+  }, y = () => {
     var t;
     (t = e.current) == null || t.focus();
   };
-  return /* @__PURE__ */ x(
+  return /* @__PURE__ */ l(
     "form",
     {
-      className: v(a.inputWrap, { [a.active]: p }),
+      className: _(r.inputWrap, { [r.active]: u }),
       onKeyDown: f,
-      onSubmit: l,
+      onSubmit: m,
       children: [
-        /* @__PURE__ */ n(g, {}),
+        /* @__PURE__ */ n(v, {}),
         /* @__PURE__ */ n(
           "textarea",
           {
-            className: a.textarea,
+            className: r.textarea,
             ref: e,
             value: o,
-            onChange: m
+            onChange: d
           }
         ),
-        /* @__PURE__ */ n("button", { "aria-label": "Send message", onClick: h, children: /* @__PURE__ */ n(b, {}) })
+        /* @__PURE__ */ l(
+          F,
+          {
+            variant: u ? "primary" : "secondary",
+            onClick: y,
+            children: [
+              /* @__PURE__ */ n(b, {}),
+              /* @__PURE__ */ n("span", { className: "sr-only", children: "Send message" })
+            ]
+          }
+        )
       ]
     }
   );
 }
 export {
-  w as GPTInput
+  I as GPTInput,
+  F as default
 };

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

@@ -1,4 +1,26 @@
-import { ReactNode } from 'react';
-export declare function Header({ children }: {
+import { ElementType, ReactNode } from 'react';
+import { NotificationVariant } from '../Notification';
+export interface SubHeaderItem {
+    title: string;
+    url: string;
+    icon?: ReactNode;
+    tag?: ReactNode;
+    tagVariant?: "success" | "brand";
+    link?: ElementType;
+}
+export declare function SubHeader({ items }: {
+    items: Array<SubHeaderItem>;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function Header({ subItems, children, notifications: initialNotifications, // TODO: Fetch these from the internets
+link: Link, }: {
+    subItems?: Array<SubHeaderItem>;
     children?: ReactNode;
+    notifications?: Array<{
+        id?: string;
+        title?: string;
+        description?: string;
+        variant?: NotificationVariant;
+        closable?: boolean;
+    }>;
+    link?: ElementType;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/components/Header/index.js

@@ -1,49 +1,54 @@
-import { jsx as t, jsxs as n } from "react/jsx-runtime";
-import "react";
-import { _ as i, N as d } from "../../index-B_g_yGPq.js";
-import { Button as o } from "../Button/index.js";
-import { Container as p } from "../Container/index.js";
-import { Logo as g } from "../Logo/index.js";
-var w = function(r) {
-  return /* @__PURE__ */ t("svg", i({
+import { jsx as t, jsxs as s } from "react/jsx-runtime";
+import { useState as k } from "react";
+import { J as x } from "../../index-CMegByeX.js";
+import { _ as c } from "../../extends-hS2Bh-Yp.js";
+import { c as w } from "../../clsx-OuTLNxxd.js";
+import { Button as a } from "../Button/index.js";
+import { Container as _ } from "../Container/index.js";
+import { ThemedLogo as C } from "../Logo/index.js";
+import { Notification as M } from "../Notification/index.js";
+import { PrefPanel as T } from "../PrefPanel/index.js";
+import { useMediaQuery as N } from "../../utils.js";
+var L = function(n) {
+  return /* @__PURE__ */ t("svg", c({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
     fill: "none",
     viewBox: "0 0 24 24"
-  }, r, {
+  }, n, {
     children: /* @__PURE__ */ t("path", {
       stroke: "currentColor",
       strokeLinecap: "round",
       strokeLinejoin: "round",
       strokeWidth: 2,
-      d: "m21 21-4.35-4.35M19 11c0 4.4183-3.5817 8-8 8s-8-3.5817-8-8 3.5817-8 8-8 8 3.5817 8 8"
+      d: "M3 12h12M3 6h18M3 18h18"
     })
   }));
-}, u = function(r) {
-  return /* @__PURE__ */ t("svg", i({
+}, S = function(n) {
+  return /* @__PURE__ */ t("svg", c({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
     fill: "none",
     viewBox: "0 0 24 24"
-  }, r, {
+  }, n, {
     children: /* @__PURE__ */ t("path", {
       stroke: "currentColor",
       strokeLinecap: "round",
       strokeLinejoin: "round",
       strokeWidth: 2,
-      d: "M3 8h12m0 0c0 1.6569 1.3431 3 3 3s3-1.3431 3-3-1.3431-3-3-3-3 1.3431-3 3m-6 8h12M9 16c0 1.6569-1.3431 3-3 3s-3-1.3431-3-3 1.3431-3 3-3 3 1.3431 3 3"
+      d: "m21 21-4.35-4.35M19 11c0 4.4183-3.5817 8-8 8s-8-3.5817-8-8 3.5817-8 8-8 8 3.5817 8 8"
     })
   }));
-}, m = function(r) {
-  return /* @__PURE__ */ t("svg", i({
+}, j = function(n) {
+  return /* @__PURE__ */ t("svg", c({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
     fill: "none",
     viewBox: "0 0 24 24"
-  }, r, {
+  }, n, {
     children: /* @__PURE__ */ t("path", {
       stroke: "currentColor",
       strokeLinecap: "round",
@@ -52,14 +57,14 @@ var w = function(r) {
       d: "M4.5 22v-5m0-10V2M2 4.5h5m-5 15h5M13 3l-1.7342 4.5089c-.282.7332-.423 1.0998-.6423 1.4082a3 3 0 0 1-.7064.7064c-.3084.2193-.675.3603-1.4082.6423L4 12l4.5089 1.7342c.7332.282 1.0998.423 1.4082.6423.2733.1943.5121.4331.7064.7064.2193.3084.3603.675.6423 1.4082L13 21l1.7342-4.5089c.282-.7332.423-1.0998.6423-1.4082a3 3 0 0 1 .7064-.7064c.3084-.2193.675-.3603 1.4082-.6423L22 12l-4.5089-1.7342c-.7332-.282-1.0998-.423-1.4082-.6423a3 3 0 0 1-.7064-.7064c-.2193-.3084-.3603-.675-.6423-1.4082z"
     })
   }));
-}, v = function(r) {
-  return /* @__PURE__ */ t("svg", i({
+}, B = function(n) {
+  return /* @__PURE__ */ t("svg", c({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
     fill: "none",
     viewBox: "0 0 24 24"
-  }, r, {
+  }, n, {
     children: /* @__PURE__ */ t("path", {
       stroke: "currentColor",
       strokeLinecap: "round",
@@ -68,14 +73,14 @@ var w = function(r) {
       d: "m7 15 3-3-3-3m6 6h4m-9.2 6h8.4c1.6802 0 2.5202 0 3.162-.327a3 3 0 0 0 1.311-1.311C21 18.7202 21 17.8802 21 16.2V7.8c0-1.6802 0-2.5202-.327-3.162a3 3 0 0 0-1.311-1.311C18.7202 3 17.8802 3 16.2 3H7.8c-1.6802 0-2.5202 0-3.162.327a3 3 0 0 0-1.311 1.311C3 5.2798 3 6.1198 3 7.8v8.4c0 1.6802 0 2.5202.327 3.162a3 3 0 0 0 1.311 1.311C5.2798 21 6.1198 21 7.8 21"
     })
   }));
-}, f = function(r) {
-  return /* @__PURE__ */ t("svg", i({
+}, P = function(n) {
+  return /* @__PURE__ */ t("svg", c({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
     fill: "none",
     viewBox: "0 0 24 24"
-  }, r, {
+  }, n, {
     children: /* @__PURE__ */ t("path", {
       stroke: "currentColor",
       strokeLinecap: "round",
@@ -85,12 +90,23 @@ var w = function(r) {
     })
   }));
 };
-const k = "_header_40fgp_17", x = "_container_40fgp_29", L = "_logo_40fgp_41", _ = "_gpt_40fgp_49", s = {
-  header: k,
-  container: x,
-  logo: L,
-  gpt: _
-}, C = [
+const W = "_header_1pbhn_17", H = "_outer_1pbhn_28", q = "_main_1pbhn_37", y = "_container_1pbhn_41", z = "_links_1pbhn_47", G = "_buttons_1pbhn_48", U = "_menu_1pbhn_53", V = "_logo_1pbhn_57", $ = "_sub_1pbhn_69", D = "_subContainer_1pbhn_73", J = "_selected_1pbhn_94", Q = "_subTag_1pbhn_106", R = "_gpt_1pbhn_139", r = {
+  header: W,
+  outer: H,
+  main: q,
+  container: y,
+  links: z,
+  buttons: G,
+  menu: U,
+  logo: V,
+  sub: $,
+  subContainer: D,
+  selected: J,
+  subTag: Q,
+  "subTag-success": "_subTag-success_1pbhn_111",
+  "subTag-brand": "_subTag-brand_1pbhn_115",
+  gpt: R
+}, A = [
   {
     title: "Products",
     url: "https://highcharts.com/products/"
@@ -116,43 +132,102 @@ const k = "_header_40fgp_17", x = "_container_40fgp_29", L = "_logo_40fgp_41", _
     url: "https://www.highcharts.com/blog/"
   }
 ];
-function H({ children: e }) {
-  const r = [
-    {
-      title: "Hello",
-      description: "Goodbye"
-    }
-  ];
-  return /* @__PURE__ */ n("header", { className: s.header, children: [
-    r.map(({ title: h, description: a, variant: c }, l) => /* @__PURE__ */ t(d, { description: a, variant: c, children: h }, l)),
-    /* @__PURE__ */ n(p, { as: "nav", className: s.container, children: [
-      /* @__PURE__ */ t(g, { light: !0, className: s.logo }),
-      /* @__PURE__ */ t("div", { children: C.map(({ title: h, url: a }, c) => /* @__PURE__ */ t(o, { variant: "plain", size: 300, as: "a", href: a, children: h }, c)) }),
-      /* @__PURE__ */ n("div", { children: [
-        /* @__PURE__ */ n(
-          o,
+function E({ items: e }) {
+  return /* @__PURE__ */ t("div", { className: w(r.sub, r.outer), children: /* @__PURE__ */ t(_, { className: r.subContainer, as: "ul", children: e.map(
+    ({ title: n, url: l, icon: o, tag: i, tagVariant: d = "success", link: u = "a" }, h) => /* @__PURE__ */ t("li", { children: /* @__PURE__ */ s(u, { href: l, children: [
+      o,
+      /* @__PURE__ */ s("span", { children: [
+        n,
+        i && /* @__PURE__ */ t(
+          "span",
+          {
+            className: w(
+              r.subTag,
+              r[`subTag-${d}`]
+            ),
+            children: i
+          }
+        )
+      ] })
+    ] }) }, h)
+  ) }) });
+}
+function st({
+  subItems: e,
+  children: n,
+  notifications: l,
+  // TODO: Fetch these from the internets
+  link: o = "a"
+}) {
+  const [i, d] = k(l), u = N("(min-width: 850px) and (max-width: 999px)");
+  return /* @__PURE__ */ t(x, { children: /* @__PURE__ */ s("header", { className: r.header, children: [
+    i == null ? void 0 : i.map(
+      ({ id: h, title: p, description: m, variant: b, closable: f }, v) => /* @__PURE__ */ t(
+        M,
+        {
+          description: m,
+          variant: b,
+          closable: f,
+          onClose: () => {
+            d(
+              i.filter((g) => !g.id || g.id !== h)
+            );
+          },
+          children: p
+        },
+        v
+      )
+    ),
+    /* @__PURE__ */ t("div", { className: w(r.main, r.outer), children: /* @__PURE__ */ s(_, { as: "nav", className: r.container, children: [
+      /* @__PURE__ */ t(o, { className: r.logo, href: "https://www.highcharts.com/", children: /* @__PURE__ */ t(C, { showText: !u }) }),
+      /* @__PURE__ */ t("div", { className: r.links, children: A.map(({ title: h, url: p }, m) => /* @__PURE__ */ t(a, { variant: "plain", size: 300, as: o, href: p, children: h }, m)) }),
+      /* @__PURE__ */ s("div", { className: r.buttons, children: [
+        /* @__PURE__ */ s(
+          a,
           {
             variant: "transparent",
-            as: "a",
+            as: o,
             href: "https://www.highcharts.com/chat/gpt/",
             children: [
-              /* @__PURE__ */ t("span", { className: s.gpt, children: "Highcharts GPT" }),
-              /* @__PURE__ */ t(m, {})
+              /* @__PURE__ */ t("span", { className: r.gpt, children: "Highcharts GPT" }),
+              /* @__PURE__ */ t(j, {})
             ]
           }
         ),
-        /* @__PURE__ */ t(o, { variant: "transparent", children: /* @__PURE__ */ t(w, {}) }),
-        /* @__PURE__ */ t(o, { variant: "transparent", children: /* @__PURE__ */ t(u, {}) }),
-        /* @__PURE__ */ t(o, { variant: "brand", children: /* @__PURE__ */ t(f, {}) }),
-        /* @__PURE__ */ n(o, { variant: "success", children: [
-          /* @__PURE__ */ t(v, {}),
-          "Get started"
-        ] })
+        /* @__PURE__ */ t(a, { variant: "transparent", children: /* @__PURE__ */ t(S, {}) }),
+        /* @__PURE__ */ t(T, {}),
+        /* @__PURE__ */ s(a, { variant: "transparent", className: r.menu, children: [
+          "Menu",
+          /* @__PURE__ */ t(L, {})
+        ] }),
+        /* @__PURE__ */ t(
+          a,
+          {
+            variant: "brand",
+            as: o,
+            href: "https://shop.highcharts.com/account",
+            children: /* @__PURE__ */ t(P, {})
+          }
+        ),
+        /* @__PURE__ */ s(
+          a,
+          {
+            variant: "success",
+            as: o,
+            href: "https://www.highcharts.com/download/",
+            children: [
+              /* @__PURE__ */ t(B, {}),
+              "Get started"
+            ]
+          }
+        )
       ] })
-    ] }),
-    e
-  ] });
+    ] }) }),
+    !!(e != null && e.length) && /* @__PURE__ */ t(E, { items: e }),
+    n
+  ] }) });
 }
 export {
-  H as Header
+  st as Header,
+  E as SubHeader
 };

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

@@ -6,3 +6,4 @@ export interface LogoProps extends SVGProps<SVGSVGElement> {
     withLink?: boolean;
 }
 export declare function Logo({ title, light, showText, withLink, ...props }: LogoProps): import("react/jsx-runtime").JSX.Element;
+export declare function ThemedLogo(props: LogoProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Logo/index.js

@@ -1,12 +1,13 @@
 import { jsxs as c, jsx as t } from "react/jsx-runtime";
+import { z as h } from "../../index-CMegByeX.js";
 function d({
-  title: l = "Highcharts",
-  light: f,
-  showText: o = !0,
-  withLink: r = !1,
+  title: o = "Highcharts",
+  light: s,
+  showText: l = !0,
+  withLink: f = !1,
   ...e
 }) {
-  const i = f ? "#18171c" : "#f7f7f8", s = /* @__PURE__ */ c(
+  const i = s ? "#18171c" : "#f7f7f8", r = /* @__PURE__ */ c(
     "svg",
     {
       version: "1.1",
@@ -17,11 +18,11 @@ function d({
       xmlnsXlink: "http://www.w3.org/1999/xlink",
       x: "0px",
       y: "0px",
-      viewBox: o ? "10 10 384 65" : "10 10 69 65",
+      viewBox: l ? "10 10 384 65" : "10 10 69 65",
       xmlSpace: "preserve",
       ...e,
       children: [
-        /* @__PURE__ */ t("title", { id: "logo-highcharts-title", children: l }),
+        /* @__PURE__ */ t("title", { id: "logo-highcharts-title", children: o }),
         /* @__PURE__ */ c("g", { id: "symbol", transform: "translate(10, 10) scale(1)", children: [
           /* @__PURE__ */ t(
             "polygon",
@@ -108,7 +109,7 @@ function d({
             }
           )
         ] }),
-        o && /* @__PURE__ */ c(
+        l && /* @__PURE__ */ c(
           "g",
           {
             id: "text-highcharts",
@@ -242,8 +243,13 @@ function d({
       ]
     }
   );
-  return r ? /* @__PURE__ */ t("a", { href: "https://www.highcharts.com", children: s }) : s;
+  return f ? /* @__PURE__ */ t("a", { href: "https://www.highcharts.com", children: r }) : r;
+}
+function k(o) {
+  const { resolvedTheme: s } = h();
+  return /* @__PURE__ */ t(d, { light: s === "light", ...o });
 }
 export {
-  d as Logo
+  d as Logo,
+  k as ThemedLogo
 };

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

@@ -1,7 +1,9 @@
 import { ReactNode } from 'react';
 export type NotificationVariant = "default" | "success" | "danger" | "attention";
-export declare function Notification({ children, variant, description, }: {
+export declare function Notification({ children, variant, description, closable, onClose, }: {
     children?: ReactNode;
     variant?: NotificationVariant;
     description?: string;
+    closable?: boolean;
+    onClose?: Function;
 }): import("react/jsx-runtime").JSX.Element;