@alxgrn/telefrag-ui 0.0.8 → 0.0.10

package/dist/assets/Header.css

@@ -1 +1 @@
-.HeaderWrapper{z-index:100;display:block;position:fixed;top:0;width:100%;padding:0;background-color:var(--alxgrn-bg-main)}.Header{display:flex;align-items:center;gap:var(--alxgrn-unit);padding:0 var(--alxgrn-unit);max-width:var(--alxgrn-layout-width);height:var(--alxgrn-layout-header-height);margin:0 auto}.HeaderLeft{display:none}.HeaderLeft span{cursor:pointer}.HeaderCenter{flex:1 1 auto;display:flex;align-items:center;padding-left:calc(var(--alxgrn-unit) + var(--alxgrn-layout-menu-width))}.HeaderCenter svg{width:auto;height:calc(2 * var(--alxgrn-unit))}@media (max-width: 1024px){.HeaderLeft{flex:0 0 auto;display:flex;align-items:center;justify-content:center}.HeaderCenter{padding-left:0}}@media (max-width: 768px){.Header{padding-left:0;padding-right:0}}
+.HeaderWrapper{z-index:100;display:block;position:fixed;top:0;width:100%;background-color:var(--alxgrn-bg-main)}.Header{display:flex;align-items:center;gap:var(--alxgrn-unit);max-width:var(--alxgrn-layout-width);height:var(--alxgrn-layout-header-height);margin:0 auto}.HeaderLeft{display:none}.HeaderLeft span{cursor:pointer}.HeaderCenter{flex:1 1 auto;display:flex;align-items:center;padding-left:calc(var(--alxgrn-unit) + var(--alxgrn-layout-menu-width))}.HeaderCenter svg{width:auto;height:calc(2 * var(--alxgrn-unit))}@media (max-width: 1024px){.HeaderLeft{flex:0 0 auto;display:flex;align-items:center;justify-content:center}.HeaderCenter{padding-left:0}}

package/dist/assets/Page.css

@@ -1 +1 @@
-*{box-sizing:border-box;overflow-wrap:anywhere}:root{--alxgrn-unit: 16px;--alxgrn-unit-half: 8px;--alxgrn-unit-small: 4px;--alxgrn-unit-double: 32px;--alxgrn-unit-smallest: 2px;--alxgrn-animation-length: .15s;--alxgrn-font-size: 16px;--alxgrn-font-size-small: 12px;--alxgrn-line-height: 1.3;--alxgrn-font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;--alxgrn-color-text: #555;--alxgrn-color-dark: var(--alxgrn-color-text);--alxgrn-color-light: lightslategrey;--alxgrn-color-error: firebrick;--alxgrn-color-accent: steelblue;--alxgrn-color-active: var(--alxgrn-color-text);--alxgrn-color-success: forestgreen;--alxgrn-color-scroll: #ccc;--alxgrn-bg-main: #eee;--alxgrn-bg-panel: #fff;--alxgrn-bg-modal: var(--alxgrn-bg-panel);--alxgrn-bg-popup: var(--alxgrn-bg-panel);--alxgrn-bg-dark: #888;--alxgrn-bg-light: rgba(119, 136, 153, .1);--alxgrn-bg-error: rgba(178, 34, 34, .1);--alxgrn-bg-accent: #ecf2f7;--alxgrn-bg-active: moccasin;--alxgrn-bg-success: rgba(34, 139, 34, .1);--alxgrn-border-dark: rgba(136, 136, 136, 1);--alxgrn-border-light: rgba(119, 136, 153, 1);--alxgrn-border-error: rgba(178, 34, 34, 1);--alxgrn-border-accent: rgba(70, 130, 180, 1);--alxgrn-border-active: moccasin;--alxgrn-border-success: rgba(34, 139, 34, 1)}[data-theme=dark]{--alxgrn-color-text: #999;--alxgrn-color-light: #666;--alxgrn-color-scroll: var(--alxgrn-bg-active);--alxgrn-bg-main: #111;--alxgrn-bg-panel: #222;--alxgrn-bg-modal: #222;--alxgrn-bg-popup: #333;--alxgrn-bg-accent: #333b3f;--alxgrn-bg-active: #444;--alxgrn-border-dark: rgba(136, 136, 136, .5);--alxgrn-border-light: rgba(119, 136, 153, .5);--alxgrn-border-error: rgba(178, 34, 34, .5);--alxgrn-border-accent: rgba(70, 130, 180, .5);--alxgrn-border-active: rgba(255, 228, 181, .5);--alxgrn-border-success: rgba(34, 139, 34, .5)}.Scrollbar::-webkit-scrollbar{width:var(--alxgrn-unit-small);height:var(--alxgrn-unit-small)}.Scrollbar::-webkit-scrollbar-track{background-color:transparent;border-radius:var(--alxgrn-unit-small)}.Scrollbar::-webkit-scrollbar-thumb{background-color:var(--alxgrn-color-scroll);border-radius:var(--alxgrn-unit-small)}.Scrollbar::-webkit-scrollbar-corner{background-color:transparent}:root{--alxgrn-form-width: 512px;--alxgrn-form-width-wide: 1024px}.Form{max-width:var(--alxgrn-form-width)}.Form.FormWide{max-width:var(--alxgrn-form-width-wide)}.Form *{font-size:inherit;line-height:inherit;font-family:inherit;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box}.Form .FormItem{display:block;margin:var(--alxgrn-unit) 0}.FormSubmitButtons{margin-top:var(--alxgrn-unit-double);margin-bottom:0;display:flex;flex-wrap:nowrap;justify-content:space-between;gap:var(--alxgrn-unit)}:root{--alxgrn-layout-width: 1024px;--alxgrn-layout-menu-width: 100px;--alxgrn-layout-sidebar-width: 340px;--alxgrn-layout-header-height: calc(3 * var(--alxgrn-unit))}.LayoutSidebarShow{display:none}@media (max-width: 768px){.LayoutSidebarShow{display:initial}}.Page{display:flex;flex-direction:column;gap:var(--alxgrn-unit)}.Page .PageBody{display:flex;gap:var(--alxgrn-unit);align-items:stretch}.Page .PageBody .PageContent{flex:1 1 auto}.Page .PageBody .PageSidebar{flex:1 1 auto;width:40%;display:flex;align-items:flex-end}.Page .PageBody .PageSidebar .PageSidebarInner{position:sticky;bottom:var(--alxgrn-unit);min-height:calc(100vh - var(--alxgrn-layout-header-height) - var(--alxgrn-unit))}@media (max-width: 768px){.Page .PageBody .PageSidebar{display:none}}
+*{box-sizing:border-box;overflow-wrap:anywhere}:root{--alxgrn-unit: 16px;--alxgrn-unit-half: 8px;--alxgrn-unit-small: 4px;--alxgrn-unit-double: 32px;--alxgrn-unit-smallest: 2px;--alxgrn-animation-length: .15s;--alxgrn-font-size: 16px;--alxgrn-font-size-small: 12px;--alxgrn-line-height: 1.3;--alxgrn-font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;--alxgrn-color-text: #555;--alxgrn-color-dark: var(--alxgrn-color-text);--alxgrn-color-light: lightslategrey;--alxgrn-color-error: firebrick;--alxgrn-color-accent: steelblue;--alxgrn-color-active: var(--alxgrn-color-text);--alxgrn-color-success: forestgreen;--alxgrn-color-scroll: #ccc;--alxgrn-bg-main: #eee;--alxgrn-bg-panel: #fff;--alxgrn-bg-modal: var(--alxgrn-bg-panel);--alxgrn-bg-popup: var(--alxgrn-bg-panel);--alxgrn-bg-dark: #888;--alxgrn-bg-light: rgba(119, 136, 153, .1);--alxgrn-bg-error: rgba(178, 34, 34, .1);--alxgrn-bg-accent: #ecf2f7;--alxgrn-bg-active: moccasin;--alxgrn-bg-success: rgba(34, 139, 34, .1);--alxgrn-border-dark: rgba(136, 136, 136, 1);--alxgrn-border-light: rgba(119, 136, 153, 1);--alxgrn-border-error: rgba(178, 34, 34, 1);--alxgrn-border-accent: rgba(70, 130, 180, 1);--alxgrn-border-active: moccasin;--alxgrn-border-success: rgba(34, 139, 34, 1)}[data-theme=dark]{--alxgrn-color-text: #999;--alxgrn-color-light: #666;--alxgrn-color-scroll: var(--alxgrn-bg-active);--alxgrn-bg-main: #111;--alxgrn-bg-panel: #222;--alxgrn-bg-modal: #222;--alxgrn-bg-popup: #333;--alxgrn-bg-accent: #333b3f;--alxgrn-bg-active: #444;--alxgrn-border-dark: rgba(136, 136, 136, .5);--alxgrn-border-light: rgba(119, 136, 153, .5);--alxgrn-border-error: rgba(178, 34, 34, .5);--alxgrn-border-accent: rgba(70, 130, 180, .5);--alxgrn-border-active: rgba(255, 228, 181, .5);--alxgrn-border-success: rgba(34, 139, 34, .5)}.Scrollbar::-webkit-scrollbar{width:var(--alxgrn-unit-small);height:var(--alxgrn-unit-small)}.Scrollbar::-webkit-scrollbar-track{background-color:transparent;border-radius:var(--alxgrn-unit-small)}.Scrollbar::-webkit-scrollbar-thumb{background-color:var(--alxgrn-color-scroll);border-radius:var(--alxgrn-unit-small)}.Scrollbar::-webkit-scrollbar-corner{background-color:transparent}:root{--alxgrn-form-width: 512px;--alxgrn-form-width-wide: 1024px}.Form{max-width:var(--alxgrn-form-width)}.Form.FormWide{max-width:var(--alxgrn-form-width-wide)}.Form *{font-size:inherit;line-height:inherit;font-family:inherit;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box}.Form .FormItem{display:block;margin:var(--alxgrn-unit) 0}.FormSubmitButtons{margin-top:var(--alxgrn-unit-double);margin-bottom:0;display:flex;flex-wrap:nowrap;justify-content:space-between;gap:var(--alxgrn-unit)}:root{--alxgrn-layout-width: 1024px;--alxgrn-layout-menu-width: 150px;--alxgrn-layout-header-height: calc(3 * var(--alxgrn-unit))}.LayoutSidebarShow{display:none}@media (max-width: 768px){.LayoutSidebarShow{display:initial}}.Page{display:flex;flex-direction:column;gap:var(--alxgrn-unit)}.Page .PageBody{display:flex;gap:var(--alxgrn-unit);align-items:stretch}.Page .PageBody .PageContent{flex:1 1 auto}.Page .PageBody .PageSidebar{flex:0 0 auto;width:33%;display:flex;align-items:flex-end}.Page .PageBody .PageSidebar .PageSidebarInner{width:100%;position:sticky;bottom:var(--alxgrn-unit);min-height:calc(100vh - var(--alxgrn-layout-header-height) - var(--alxgrn-unit))}@media (max-width: 768px){.Page .PageBody .PageSidebar{display:none}}

package/dist/components/icons/TelefragLogo.d.ts

@@ -1,6 +1,7 @@
 import { FC } from 'react';
 type Props = {
     theme?: 'light' | 'dark';
+    onClick?: () => void;
 };
 declare const TelefragLogo: FC<Props>;
 export default TelefragLogo;

package/dist/components/icons/TelefragLogo.js

@@ -1,5 +1,5 @@
 import { jsxs as z, jsx as l } from "react/jsx-runtime";
-import { useState as i, useEffect as a } from "react";
+import { useState as s, useEffect as a } from "react";
 const e = {
   dark: {
     back: "#287BBF",
@@ -11,23 +11,23 @@ const e = {
     fore: "white",
     text: "#555"
   }
-}, u = ({ theme: m }) => {
-  const [t, c] = i("light");
+}, f = ({ theme: m, onClick: r }) => {
+  const [t, c] = s("light");
   return a(() => {
     if (m) {
       c(m);
       return;
     }
-    const o = document.documentElement.getAttribute("data-theme");
-    c(o === "dark" ? "dark" : "light");
-    let r = new MutationObserver(() => {
-      const n = document.documentElement.getAttribute("data-theme");
-      c(n === "dark" ? "dark" : "light");
+    const n = document.documentElement.getAttribute("data-theme");
+    c(n === "dark" ? "dark" : "light");
+    let o = new MutationObserver(() => {
+      const i = document.documentElement.getAttribute("data-theme");
+      c(i === "dark" ? "dark" : "light");
     });
-    return r.observe(document.documentElement, {
+    return o.observe(document.documentElement, {
       attributes: !0
       // наблюдать за изменением атрибутов
-    }), () => r.disconnect();
+    }), () => o.disconnect();
   }, [m]), /* @__PURE__ */ z(
     "svg",
     {
@@ -35,6 +35,10 @@ const e = {
       width: "156.748mm",
       height: "21.7468mm",
       viewBox: "0 0 15503.88 2150.97",
+      onClick: () => {
+        r && r();
+      },
+      style: r ? { cursor: "pointer" } : void 0,
       children: [
         /* @__PURE__ */ l("path", { fill: e[t].back, d: "M7990.87 2137.37c809.18,0 1467.66,-479.95 1467.66,-1071.46 0,-586 -658.48,-1065.91 -1467.66,-1065.91 -809.16,0 -1467.64,479.91 -1467.64,1065.91 0,591.51 658.48,1071.46 1467.64,1071.46z" }),
         /* @__PURE__ */ l("path", { fill: e[t].fore, d: "M8095.54 173.7c649.88,38.52 1162.11,457.13 1162.11,892.25 0,429.58 -380.01,743.54 -908.79,853.7 407.6,-104.67 699.52,-391.06 699.52,-699.48 0,-313.93 -264.38,-567.31 -638.9,-682.98l-60.62 286.42c331.79,120.61 672.43,399.28 253.36,666.43 11.06,-16.19 38.54,-40.29 38.54,-115.68 0,-101.9 -154.17,-203.75 -357.94,-264.35l-187.27 853.67 0 -1663.33 0 -126.66zm-209.34 126.66l0 1663.33 -313.93 -1431.99c-380.01,115.65 -644.39,379.99 -644.39,688.46 0,302.91 258.89,567.29 633.42,682.96 -484.68,-126.7 -837.17,-457.16 -837.17,-837.18 0,-468.16 512.2,-853.73 1162.07,-892.25l0 126.66z" }),
@@ -45,5 +49,5 @@ const e = {
   );
 };
 export {
-  u as default
+  f as default
 };

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

@@ -2,6 +2,7 @@ import { default as React, FC } from 'react';
 type Props = {
     userMenu: React.ReactNode;
     onMenuSwitch: () => void;
+    onLogoClick?: () => void;
 };
 declare const Header: FC<Props>;
 export default Header;

package/dist/components/layout/Header.js

@@ -1,12 +1,12 @@
-import { jsx as e, jsxs as d } from "react/jsx-runtime";
-import i from "../icons/Menu.js";
-import s from "../icons/TelefragLogo.js";
+import { jsx as e, jsxs as i } from "react/jsx-runtime";
+import s from "../icons/Menu.js";
+import l from "../icons/TelefragLogo.js";
 import '../../assets/Header.css';/* empty css                    */
-const o = ({ userMenu: r, onMenuSwitch: a }) => /* @__PURE__ */ e("header", { className: "HeaderWrapper", children: /* @__PURE__ */ d("div", { className: "Header", children: [
-  /* @__PURE__ */ e("div", { className: "HeaderLeft", children: /* @__PURE__ */ e("span", { onClick: a, children: /* @__PURE__ */ e(i, {}) }) }),
-  /* @__PURE__ */ e("div", { className: "HeaderCenter", children: /* @__PURE__ */ e(s, {}) }),
+const t = ({ userMenu: r, onMenuSwitch: a, onLogoClick: d }) => /* @__PURE__ */ e("header", { className: "HeaderWrapper", children: /* @__PURE__ */ i("div", { className: "Header", children: [
+  /* @__PURE__ */ e("div", { className: "HeaderLeft", children: /* @__PURE__ */ e("span", { onClick: a, children: /* @__PURE__ */ e(s, {}) }) }),
+  /* @__PURE__ */ e("div", { className: "HeaderCenter", children: /* @__PURE__ */ e(l, { onClick: d }) }),
   /* @__PURE__ */ e("div", { className: "HeaderRight", children: r })
 ] }) });
 export {
-  o as default
+  t as default
 };

package/dist/components/layout/Layout.d.ts

@@ -2,6 +2,7 @@ import { default as React, FC, PropsWithChildren } from 'react';
 type Props = {
     mainMenu: React.ReactNode;
     userMenu: React.ReactNode;
+    onLogoClick?: () => void;
 };
 declare const Layout: FC<PropsWithChildren<Props>>;
 export default Layout;

package/dist/components/layout/Layout.js

@@ -1,8 +1,8 @@
-import { jsxs as s, jsx as o } from "react/jsx-runtime";
-import { useState as n } from "react";
-import a from "./Header.js";
-import f from "./Footer.js";
-import l from "./Content.js";
+import { jsxs as n, jsx as o } from "react/jsx-runtime";
+import { useState as a } from "react";
+import f from "./Header.js";
+import l from "./Footer.js";
+import u from "./Content.js";
 import '../../assets/Editable.css';import '../../assets/Message.css';import '../../assets/Modal.css';import '../../assets/Overlay.css';import '../../assets/Panel.css';import '../../assets/Block.css';import '../../assets/Select.css';import '../../assets/RadioLabel.css';import '../../assets/Input.css';import '../../assets/Files.css';import '../../assets/Fieldset.css';import '../../assets/Time.css';import '../../assets/Menu.css';import '../../assets/FormCol.css';import '../../assets/FormRow.css';import '../../assets/Button.css';import '../../assets/DatePicker.css';import '../../assets/Label.css';import '../../assets/RequiredMark.css';import '../../assets/Popup.css';import '../../assets/Page.css';/* empty css                  */
 import "react-children-utilities";
 import "react-transition-group";
@@ -26,24 +26,25 @@ import "react-dom";
 /* empty css                     */
 /* empty css                   */
 /* empty css                     */
-import { Sidebar as u } from "../ui/sidebar/Sidebar.js";
+import { Sidebar as c } from "../ui/sidebar/Sidebar.js";
 /* empty css                      */
-const P = ({ children: i, mainMenu: r, userMenu: m }) => {
-  const [p, t] = n(!1);
-  return /* @__PURE__ */ s("div", { className: "Layout", children: [
+const Q = ({ children: i, mainMenu: r, userMenu: m, onLogoClick: p }) => {
+  const [e, t] = a(!1);
+  return /* @__PURE__ */ n("div", { className: "Layout", children: [
     /* @__PURE__ */ o(
-      a,
+      f,
       {
         userMenu: m,
-        onMenuSwitch: () => t((e) => !e)
+        onMenuSwitch: () => t((s) => !s),
+        onLogoClick: p
       }
     ),
-    /* @__PURE__ */ o(l, { menu: r, children: i }),
-    /* @__PURE__ */ o(f, {}),
+    /* @__PURE__ */ o(u, { menu: r, children: i }),
+    /* @__PURE__ */ o(l, {}),
     /* @__PURE__ */ o(
-      u,
+      c,
       {
-        isOpen: p,
+        isOpen: e,
         onClose: () => t(!1),
         children: r
       }
@@ -51,5 +52,5 @@ const P = ({ children: i, mainMenu: r, userMenu: m }) => {
   ] });
 };
 export {
-  P as default
+  Q as default
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@alxgrn/telefrag-ui",
   "description": "UI library for The Daily Telefrag project",
-  "version": "0.0.8",
+  "version": "0.0.10",
   "private": false,
   "author": "Alexander Fedorov <alex@molner.ru>",
   "license": "Apache-2.0",