@alxgrn/telefrag-ui 0.0.62 → 0.0.64

package/dist/assets/Content.css

@@ -1 +1 @@
-.Content{display:flex;align-items:stretch;gap:var(--alxgrn-unit-half);max-width:var(--alxgrn-layout-width);margin:0 auto;margin-top:var(--alxgrn-layout-header-height)}.Content .ContentMain{flex:0 0 auto;width:calc(var(--alxgrn-layout-width) - var(--alxgrn-layout-menu-width) - var(--alxgrn-unit-half))}.Content .ContentMenu{flex:0 0 auto;width:var(--alxgrn-layout-menu-width);max-height:calc(100vh - var(--alxgrn-unit) - var(--alxgrn-layout-header-height));overflow-y:auto;margin:var(--alxgrn-unit-half) 0;position:sticky;top:var(--alxgrn-layout-header-height)}.Content .ContentMenu::-webkit-scrollbar{width:var(--alxgrn-unit-small);height:var(--alxgrn-unit-small)}.Content .ContentMenu::-webkit-scrollbar-corner{background-color:transparent}.Content .ContentMenu::-webkit-scrollbar-track{background-color:transparent;border-radius:var(--alxgrn-unit-small)}.Content .ContentMenu::-webkit-scrollbar-thumb{background-color:transparent;border-radius:var(--alxgrn-unit-small)}.Content .ContentMenu:hover::-webkit-scrollbar-thumb{background-color:var(--alxgrn-color-scroll);border-radius:var(--alxgrn-unit-small)}@media (max-width: 1024px){.Content .ContentMenu{display:none}.Content .ContentMain{width:100%}}
+.Content{display:flex;align-items:stretch;gap:var(--alxgrn-unit-half);max-width:var(--alxgrn-layout-width);margin:0 auto;margin-top:var(--alxgrn-layout-header-height)}.Content .ContentMain{flex:0 0 auto;width:calc(var(--alxgrn-layout-width) - var(--alxgrn-layout-menu-width) - var(--alxgrn-unit-half))}.Content .ContentMenu{flex:0 0 auto;width:var(--alxgrn-layout-menu-width);max-height:calc(100vh - var(--alxgrn-layout-header-height));overflow-y:auto;position:sticky;top:var(--alxgrn-layout-header-height)}.Content .ContentMenu::-webkit-scrollbar{width:var(--alxgrn-unit-small);height:var(--alxgrn-unit-small)}.Content .ContentMenu::-webkit-scrollbar-corner{background-color:transparent}.Content .ContentMenu::-webkit-scrollbar-track{background-color:transparent;border-radius:var(--alxgrn-unit-small)}.Content .ContentMenu::-webkit-scrollbar-thumb{background-color:transparent;border-radius:var(--alxgrn-unit-small)}.Content .ContentMenu:hover::-webkit-scrollbar-thumb{background-color:var(--alxgrn-color-scroll);border-radius:var(--alxgrn-unit-small)}@media (max-width: 1024px){.Content .ContentMenu{display:none}.Content .ContentMain{width:100%}}

package/dist/assets/Expandable.css

@@ -0,0 +1 @@
+.Expandable{position:relative;overflow:hidden}.ExpandableExpanded,.ExpandableCollapsed{transition:max-height .5s ease;overflow:hidden}.ExpandableShadow{position:absolute;width:100%;height:50px;background:linear-gradient(rgba(255,255,255,.001),var(--alxgrn-bg-panel));bottom:calc(var(--alxgrn-font-size) * var(--alxgrn-line-height) + var(--alxgrn-unit))}.ExpandableButton{display:inline-block;margin-top:var(--alxgrn-unit);color:var(--alxgrn-color-accent);cursor:pointer;border-bottom:1px solid transparent}.ExpandableButton:hover{border-bottom:1px solid var(--alxgrn-color-accent)}

package/dist/assets/MainMenu.css

@@ -1 +1 @@
-.MainMenu{margin-top:var(--alxgrn-unit-small);margin-right:var(--alxgrn-unit-half)}.Sidebar .MainMenu{margin-top:0}.MainMenu .MainMenuAlternative{display:flex;align-items:center;gap:var(--alxgrn-unit-half);cursor:pointer;padding:var(--alxgrn-unit-half);border-radius:var(--alxgrn-unit-half)}.MainMenu .MainMenuAlternative:hover{background-color:var(--alxgrn-bg-panel)}.MainMenu .MainMenuAlternative:hover *{color:var(--alxgrn-color-accent)}.MainMenu .MainMenuAlternative svg{color:var(--alxgrn-color-accent);font-size:var(--alxgrn-font-size-big)}.MainMenu .MainMenuAlternative img{width:var(--alxgrn-font-size-big);height:var(--alxgrn-font-size-big);border-radius:50%;flex:0 0 auto}.MainMenu .MainMenuAlternative span{font-size:var(--alxgrn-font-size);overflow-wrap:break-word;display:-webkit-box;line-clamp:1;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;flex:1 1 auto}.MainMenu .MainMenuAlternative span.MainMenuCheck{display:block;width:var(--alxgrn-unit-half);height:var(--alxgrn-unit-half);border-radius:50%;background-color:var(--alxgrn-color-accent);flex:0 0 auto}.MainMenu .MainMenuNode,.MainMenu .MainMenuTitle{padding:var(--alxgrn-unit-half)}.MainMenu .MainMenuTitle span{text-transform:uppercase;font-size:var(--alxgrn-font-size-small);font-weight:600;color:var(--alxgrn-color-light)}
+.MainMenu{margin-top:var(--alxgrn-unit);margin-right:var(--alxgrn-unit-half)}.Sidebar .MainMenu{margin-top:0}.MainMenu .MainMenuAlternative{display:flex;align-items:center;gap:var(--alxgrn-unit-half);cursor:pointer;padding:var(--alxgrn-unit-half);border-radius:var(--alxgrn-unit-half)}.MainMenu .MainMenuAlternative:hover{background-color:var(--alxgrn-bg-panel)}.MainMenu .MainMenuAlternative:hover *{color:var(--alxgrn-color-accent)}.MainMenu .MainMenuAlternative svg{color:var(--alxgrn-color-accent);font-size:var(--alxgrn-font-size-big)}.MainMenu .MainMenuAlternative img{width:var(--alxgrn-font-size-big);height:var(--alxgrn-font-size-big);border-radius:50%;flex:0 0 auto}.MainMenu .MainMenuAlternative span{font-size:var(--alxgrn-font-size);overflow-wrap:break-word;display:-webkit-box;line-clamp:1;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;flex:1 1 auto}.MainMenu .MainMenuAlternative span.MainMenuCheck{display:block;width:var(--alxgrn-unit-half);height:var(--alxgrn-unit-half);border-radius:50%;background-color:var(--alxgrn-color-accent);flex:0 0 auto}.MainMenu .MainMenuNode,.MainMenu .MainMenuTitle{padding:var(--alxgrn-unit-half)}.MainMenu .MainMenuTitle span{text-transform:uppercase;font-size:var(--alxgrn-font-size-small);font-weight:600;color:var(--alxgrn-color-light)}

package/dist/components/form/form/Form.js

@@ -4,7 +4,7 @@ import { deepForEach as y } from "react-children-utilities";
 import x, { isValidDate as R } from "../date/Date.js";
 import { Select as F } from "../select/Select.js";
 import { Button as C } from "../button/Button.js";
-import '../../../assets/Content.css';import '../../../assets/MainMenu.css';import '../../../assets/Header.css';import '../../../assets/Editable.css';import '../../../assets/Toolbar.css';import '../../../assets/Sidebar.css';import '../../../assets/Scroll.css';import '../../../assets/Message.css';import '../../../assets/Modal.css';import '../../../assets/Overlay.css';import '../../../assets/Panel.css';import '../../../assets/Menu.css';import '../../../assets/Popup.css';import '../../../assets/Fieldset.css';import '../../../assets/Label.css';import '../../../assets/RequiredMark.css';import '../../../assets/DatePicker.css';import '../../../assets/TelefragLogo.css';import '../../../assets/TelefragSymbol.css';import '../../../assets/FormCol.css';import '../../../assets/FormRow.css';import '../../../assets/PageHeader.css';/* empty css                           */
+import '../../../assets/Content.css';import '../../../assets/MainMenu.css';import '../../../assets/Header.css';import '../../../assets/Expandable.css';import '../../../assets/Editable.css';import '../../../assets/Toolbar.css';import '../../../assets/Sidebar.css';import '../../../assets/Scroll.css';import '../../../assets/Message.css';import '../../../assets/Modal.css';import '../../../assets/Overlay.css';import '../../../assets/Panel.css';import '../../../assets/Menu.css';import '../../../assets/Popup.css';import '../../../assets/Fieldset.css';import '../../../assets/Label.css';import '../../../assets/RequiredMark.css';import '../../../assets/DatePicker.css';import '../../../assets/TelefragLogo.css';import '../../../assets/TelefragSymbol.css';import '../../../assets/FormCol.css';import '../../../assets/FormRow.css';import '../../../assets/PageHeader.css';/* empty css                           */
 /* empty css                        */
 /* empty css                        */
 /* empty css                               */
@@ -34,10 +34,11 @@ import l from "../../ui/block/Block.js";
 /* empty css                        */
 /* empty css                        */
 /* empty css                         */
+/* empty css                           */
 /* empty css                       */
 /* empty css                         */
 /* empty css                        */
-const ge = ({
+const De = ({
   info: d,
   error: k,
   success: b,
@@ -67,14 +68,14 @@ const ge = ({
             break;
           case F:
             {
-              const a = e.value;
-              e.options.findIndex((p) => p.value === a) < 0 && i(!0);
+              const p = e.value;
+              e.options.findIndex((a) => a.value === p) < 0 && i(!0);
             }
             break;
           case D:
             {
-              const a = e.value;
-              e.options.findIndex((p) => p.value === a) < 0 && i(!0);
+              const p = e.value;
+              e.options.findIndex((a) => a.value === p) < 0 && i(!0);
             }
             break;
           case E:
@@ -141,10 +142,10 @@ const ge = ({
                   break;
                 case S:
                   {
-                    const a = [];
-                    t.options.forEach((p) => {
-                      p.checked && a.push(p.value);
-                    }), o(t.id, a);
+                    const p = [];
+                    t.options.forEach((a) => {
+                      a.checked && p.push(a.value);
+                    }), o(t.id, p);
                   }
                   break;
               }
@@ -164,6 +165,6 @@ const ge = ({
   ] });
 };
 export {
-  ge as Form,
-  ge as default
+  De as Form,
+  De as default
 };

package/dist/components/form/image/Image.js

@@ -1,7 +1,7 @@
 import { jsx as r, jsxs as F, Fragment as C } from "react/jsx-runtime";
 import { useState as n, useEffect as d } from "react";
 import E from "../label/Label.js";
-import '../../../assets/Content.css';import '../../../assets/MainMenu.css';import '../../../assets/Header.css';import '../../../assets/Editable.css';import '../../../assets/Toolbar.css';import '../../../assets/Sidebar.css';import '../../../assets/Scroll.css';import '../../../assets/Message.css';import '../../../assets/Modal.css';import '../../../assets/Overlay.css';import '../../../assets/Panel.css';import '../../../assets/Block.css';import '../../../assets/RadioLabel.css';import '../../../assets/Input.css';import '../../../assets/Files.css';import '../../../assets/Fieldset.css';import '../../../assets/RequiredMark.css';import '../../../assets/Menu.css';import '../../../assets/FormCol.css';import '../../../assets/FormRow.css';import '../../../assets/Button.css';import '../../../assets/DatePicker.css';import '../../../assets/TelefragLogo.css';import '../../../assets/TelefragSymbol.css';import '../../../assets/Popup.css';import '../../../assets/PageHeader.css';/* empty css                           */
+import '../../../assets/Content.css';import '../../../assets/MainMenu.css';import '../../../assets/Header.css';import '../../../assets/Expandable.css';import '../../../assets/Editable.css';import '../../../assets/Toolbar.css';import '../../../assets/Sidebar.css';import '../../../assets/Scroll.css';import '../../../assets/Message.css';import '../../../assets/Modal.css';import '../../../assets/Overlay.css';import '../../../assets/Panel.css';import '../../../assets/Block.css';import '../../../assets/RadioLabel.css';import '../../../assets/Input.css';import '../../../assets/Files.css';import '../../../assets/Fieldset.css';import '../../../assets/RequiredMark.css';import '../../../assets/Menu.css';import '../../../assets/FormCol.css';import '../../../assets/FormRow.css';import '../../../assets/Button.css';import '../../../assets/DatePicker.css';import '../../../assets/TelefragLogo.css';import '../../../assets/TelefragSymbol.css';import '../../../assets/Popup.css';import '../../../assets/PageHeader.css';/* empty css                           */
 import "react-children-utilities";
 import "react-transition-group";
 import "react-dom";
@@ -30,10 +30,11 @@ import j from "../../icons/Trash.js";
 /* empty css                        */
 /* empty css                        */
 /* empty css                         */
+/* empty css                           */
 /* empty css                       */
 /* empty css                         */
 /* empty css                        */
-const cr = ({
+const gr = ({
   id: u,
   value: o,
   text: l,
@@ -100,6 +101,6 @@ const cr = ({
   ) });
 };
 export {
-  cr as Image,
-  cr as default
+  gr as Image,
+  gr as default
 };

package/dist/components/form/select/Select.js

@@ -1,7 +1,7 @@
 import { jsx as r, jsxs as u } from "react/jsx-runtime";
 import { useRef as S, useState as a, useEffect as O } from "react";
 import V from "../label/Label.js";
-import '../../../assets/Content.css';import '../../../assets/MainMenu.css';import '../../../assets/Header.css';import '../../../assets/Editable.css';import '../../../assets/Toolbar.css';import '../../../assets/Sidebar.css';import '../../../assets/Scroll.css';import '../../../assets/Message.css';import '../../../assets/Modal.css';import '../../../assets/Overlay.css';import '../../../assets/Panel.css';import '../../../assets/Block.css';import '../../../assets/RadioLabel.css';import '../../../assets/Input.css';import '../../../assets/Files.css';import '../../../assets/Fieldset.css';import '../../../assets/RequiredMark.css';import '../../../assets/FormCol.css';import '../../../assets/FormRow.css';import '../../../assets/Button.css';import '../../../assets/DatePicker.css';import '../../../assets/TelefragLogo.css';import '../../../assets/TelefragSymbol.css';import '../../../assets/Popup.css';import '../../../assets/PageHeader.css';/* empty css                           */
+import '../../../assets/Content.css';import '../../../assets/MainMenu.css';import '../../../assets/Header.css';import '../../../assets/Expandable.css';import '../../../assets/Editable.css';import '../../../assets/Toolbar.css';import '../../../assets/Sidebar.css';import '../../../assets/Scroll.css';import '../../../assets/Message.css';import '../../../assets/Modal.css';import '../../../assets/Overlay.css';import '../../../assets/Panel.css';import '../../../assets/Block.css';import '../../../assets/RadioLabel.css';import '../../../assets/Input.css';import '../../../assets/Files.css';import '../../../assets/Fieldset.css';import '../../../assets/RequiredMark.css';import '../../../assets/FormCol.css';import '../../../assets/FormRow.css';import '../../../assets/Button.css';import '../../../assets/DatePicker.css';import '../../../assets/TelefragLogo.css';import '../../../assets/TelefragSymbol.css';import '../../../assets/Popup.css';import '../../../assets/PageHeader.css';/* empty css                           */
 import "react-children-utilities";
 import "react-transition-group";
 import "react-dom";
@@ -29,10 +29,11 @@ import { Menu as E } from "../../ui/menu/Menu.js";
 /* empty css                        */
 /* empty css                        */
 /* empty css                         */
+/* empty css                           */
 /* empty css                       */
 /* empty css                         */
 /* empty css                        */
-const cr = ({
+const ur = ({
   id: f,
   value: o,
   onChange: d,
@@ -108,6 +109,6 @@ const cr = ({
   ] });
 };
 export {
-  cr as Select,
-  cr as default
+  ur as Select,
+  ur as default
 };

package/dist/components/form/time/Time.js

@@ -2,7 +2,7 @@ import { jsxs as y, jsx as e } from "react/jsx-runtime";
 import { useRef as k, useState as s, useEffect as H } from "react";
 import R from "../label/Label.js";
 import { Menu as N } from "../../ui/menu/Menu.js";
-import '../../../assets/Content.css';import '../../../assets/MainMenu.css';import '../../../assets/Header.css';import '../../../assets/Editable.css';import '../../../assets/Toolbar.css';import '../../../assets/Sidebar.css';import '../../../assets/Scroll.css';import '../../../assets/Message.css';import '../../../assets/Modal.css';import '../../../assets/Overlay.css';import '../../../assets/Panel.css';import '../../../assets/Block.css';import '../../../assets/RadioLabel.css';import '../../../assets/Input.css';import '../../../assets/Files.css';import '../../../assets/Fieldset.css';import '../../../assets/RequiredMark.css';import '../../../assets/FormCol.css';import '../../../assets/FormRow.css';import '../../../assets/Button.css';import '../../../assets/DatePicker.css';import '../../../assets/TelefragLogo.css';import '../../../assets/TelefragSymbol.css';import '../../../assets/Popup.css';import '../../../assets/PageHeader.css';/* empty css                           */
+import '../../../assets/Content.css';import '../../../assets/MainMenu.css';import '../../../assets/Header.css';import '../../../assets/Expandable.css';import '../../../assets/Editable.css';import '../../../assets/Toolbar.css';import '../../../assets/Sidebar.css';import '../../../assets/Scroll.css';import '../../../assets/Message.css';import '../../../assets/Modal.css';import '../../../assets/Overlay.css';import '../../../assets/Panel.css';import '../../../assets/Block.css';import '../../../assets/RadioLabel.css';import '../../../assets/Input.css';import '../../../assets/Files.css';import '../../../assets/Fieldset.css';import '../../../assets/RequiredMark.css';import '../../../assets/FormCol.css';import '../../../assets/FormRow.css';import '../../../assets/Button.css';import '../../../assets/DatePicker.css';import '../../../assets/TelefragLogo.css';import '../../../assets/TelefragSymbol.css';import '../../../assets/Popup.css';import '../../../assets/PageHeader.css';/* empty css                           */
 import "react-children-utilities";
 import "react-transition-group";
 import "react-dom";
@@ -28,12 +28,13 @@ import O from "../../icons/Check.js";
 /* empty css                        */
 /* empty css                        */
 /* empty css                         */
+/* empty css                           */
 /* empty css                       */
 /* empty css                         */
 /* empty css                        */
-const hr = ({
+const vr = ({
   id: d,
-  value: m,
+  value: l,
   step: x = 1,
   onChange: o,
   label: g,
@@ -42,13 +43,13 @@ const hr = ({
   required: $ = !1,
   disabled: p = !1
 }) => {
-  const a = k(null), c = k(null), [n, C] = s(""), [l, I] = s(""), [j, w] = s([]), [z, E] = s([]), [S, u] = s(!1), [T, f] = s(!1);
+  const a = k(null), c = k(null), [n, C] = s(""), [m, I] = s(""), [j, w] = s([]), [z, E] = s([]), [S, u] = s(!1), [T, f] = s(!1);
   H(() => {
-    let [r, t] = m.split(":");
+    let [r, t] = l.split(":");
     r = parseInt(r), t = parseInt(t), (isNaN(r) || r < 0 || r > 23) && (r = 0), (isNaN(t) || t < 0 || t > 59) && (t = 0), r = `0${r}`.slice(-2), t = `0${t}`.slice(-2), C(r), I(t);
     const i = `${r}:${t}`;
-    i !== m && o && o(i);
-  }, [m, o]), H(() => {
+    i !== l && o && o(i);
+  }, [l, o]), H(() => {
     const r = [], t = [];
     for (let i = 0; i < 24; i++)
       r.push(`0${i}`.slice(-2));
@@ -56,14 +57,14 @@ const hr = ({
       t.push(`0${i}`.slice(-2));
     w(r), E(t);
   }, [x]);
-  const h = () => !!($ && (!n || !l)), v = () => {
+  const h = () => !!($ && (!n || !m)), v = () => {
     if (h()) return {
       caretColor: "var(--alxgrn-input-border-error)",
       borderColor: "var(--alxgrn-input-border-error)",
       backgroundColor: "var(--alxgrn-input-bg-error)"
     };
   }, F = (r) => {
-    u(!1), o && o(`${r.text ?? ""}:${l}`);
+    u(!1), o && o(`${r.text ?? ""}:${m}`);
   }, L = (r) => {
     f(!1), o && o(`${n}:${r.text ?? ""}`);
   };
@@ -98,7 +99,7 @@ const hr = ({
               id: `${d}-min`,
               ref: c,
               type: "text",
-              value: l,
+              value: m,
               style: v(),
               disabled: !!p,
               onClick: () => f(!0),
@@ -130,7 +131,7 @@ const hr = ({
         onClose: () => f(!1),
         horizontal: "inner-right",
         margin: "var(--alxgrn-unit-small)",
-        items: z.map((r) => ({ id: r, text: r, icon: r === l ? /* @__PURE__ */ e(O, {}) : /* @__PURE__ */ e("div", { className: "empty" }) })),
+        items: z.map((r) => ({ id: r, text: r, icon: r === m ? /* @__PURE__ */ e(O, {}) : /* @__PURE__ */ e("div", { className: "empty" }) })),
         onClick: L,
         maxHeight: "auto",
         width: "auto"
@@ -139,5 +140,5 @@ const hr = ({
   ] });
 };
 export {
-  hr as default
+  vr as default
 };

package/dist/components/layout/Layout.js

@@ -2,7 +2,7 @@ import { jsxs as f, jsx as o } from "react/jsx-runtime";
 import { useState as n } from "react";
 import l from "./Header.js";
 import u from "./Content.js";
-import '../../assets/Editable.css';import '../../assets/Toolbar.css';import '../../assets/Scroll.css';import '../../assets/Message.css';import '../../assets/Modal.css';import '../../assets/Overlay.css';import '../../assets/Panel.css';import '../../assets/Block.css';import '../../assets/RadioLabel.css';import '../../assets/Input.css';import '../../assets/Files.css';import '../../assets/Fieldset.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/TelefragLogo.css';import '../../assets/TelefragSymbol.css';import '../../assets/Popup.css';import '../../assets/PageHeader.css';/* empty css                        */
+import '../../assets/Expandable.css';import '../../assets/Editable.css';import '../../assets/Toolbar.css';import '../../assets/Scroll.css';import '../../assets/Message.css';import '../../assets/Modal.css';import '../../assets/Overlay.css';import '../../assets/Panel.css';import '../../assets/Block.css';import '../../assets/RadioLabel.css';import '../../assets/Input.css';import '../../assets/Files.css';import '../../assets/Fieldset.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/TelefragLogo.css';import '../../assets/TelefragSymbol.css';import '../../assets/Popup.css';import '../../assets/PageHeader.css';/* empty css                        */
 import "react-children-utilities";
 import "react-transition-group";
 import "react-dom";
@@ -29,8 +29,9 @@ import "react-dom";
 import { Sidebar as d } from "../ui/sidebar/Sidebar.js";
 /* empty css                     */
 /* empty css                      */
+/* empty css                        */
 import c from "./MainMenu.js";
-const W = ({ children: p, mainMenu: m, userMenu: e, onLogoClick: s, onMenuClick: t }) => {
+const X = ({ children: p, mainMenu: m, userMenu: e, onLogoClick: s, onMenuClick: t }) => {
   const [a, r] = n(!1);
   return /* @__PURE__ */ f("div", { className: "Layout", children: [
     /* @__PURE__ */ o(
@@ -61,5 +62,5 @@ const W = ({ children: p, mainMenu: m, userMenu: e, onLogoClick: s, onMenuClick:
   ] });
 };
 export {
-  W as default
+  X as default
 };

package/dist/components/layout/Page.js

@@ -1,5 +1,5 @@
 import { jsxs as m, jsx as r, Fragment as a } from "react/jsx-runtime";
-import '../../assets/Content.css';import '../../assets/MainMenu.css';import '../../assets/Header.css';import '../../assets/Editable.css';import '../../assets/Toolbar.css';import '../../assets/Scroll.css';import '../../assets/Message.css';import '../../assets/Modal.css';import '../../assets/Overlay.css';import '../../assets/Panel.css';import '../../assets/Block.css';import '../../assets/RadioLabel.css';import '../../assets/Input.css';import '../../assets/Files.css';import '../../assets/Fieldset.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/TelefragLogo.css';import '../../assets/TelefragSymbol.css';import '../../assets/Popup.css';import '../../assets/PageHeader.css';/* empty css                        */
+import '../../assets/Content.css';import '../../assets/MainMenu.css';import '../../assets/Header.css';import '../../assets/Expandable.css';import '../../assets/Editable.css';import '../../assets/Toolbar.css';import '../../assets/Scroll.css';import '../../assets/Message.css';import '../../assets/Modal.css';import '../../assets/Overlay.css';import '../../assets/Panel.css';import '../../assets/Block.css';import '../../assets/RadioLabel.css';import '../../assets/Input.css';import '../../assets/Files.css';import '../../assets/Fieldset.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/TelefragLogo.css';import '../../assets/TelefragSymbol.css';import '../../assets/Popup.css';import '../../assets/PageHeader.css';/* empty css                        */
 import "react";
 import "react-children-utilities";
 import "react-transition-group";
@@ -27,10 +27,11 @@ import "react-dom";
 import { Sidebar as n } from "../ui/sidebar/Sidebar.js";
 /* empty css                     */
 /* empty css                      */
+/* empty css                        */
 /* empty css                    */
 /* empty css                      */
 /* empty css                     */
-const K = ({ header: o, children: p, sidebar: i, isSidebarVisible: e = !1, onSidebarClose: t }) => /* @__PURE__ */ m("div", { className: "Page", children: [
+const L = ({ header: o, children: p, sidebar: i, isSidebarVisible: e = !1, onSidebarClose: t }) => /* @__PURE__ */ m("div", { className: "Page", children: [
   o && /* @__PURE__ */ r(a, { children: o }),
   /* @__PURE__ */ m("div", { className: i ? "PageBody" : "PageBody Wide", children: [
     /* @__PURE__ */ r("div", { className: "PageContent", children: p }),
@@ -49,5 +50,5 @@ const K = ({ header: o, children: p, sidebar: i, isSidebarVisible: e = !1, onSid
   )
 ] });
 export {
-  K as default
+  L as default
 };

package/dist/components/layout/PageHeader.js

@@ -1,6 +1,6 @@
 import { jsxs as a, jsx as e } from "react/jsx-runtime";
 import f from "../icons/Image.js";
-import '../../assets/Content.css';import '../../assets/MainMenu.css';import '../../assets/Header.css';import '../../assets/Editable.css';import '../../assets/Sidebar.css';import '../../assets/Scroll.css';import '../../assets/Message.css';import '../../assets/Modal.css';import '../../assets/Overlay.css';import '../../assets/Panel.css';import '../../assets/Block.css';import '../../assets/RadioLabel.css';import '../../assets/Input.css';import '../../assets/Files.css';import '../../assets/Fieldset.css';import '../../assets/Menu.css';import '../../assets/FormCol.css';import '../../assets/FormRow.css';import '../../assets/DatePicker.css';import '../../assets/Label.css';import '../../assets/RequiredMark.css';import '../../assets/Popup.css';import '../../assets/PageHeader.css';import '../../assets/TelefragLogo.css';import '../../assets/TelefragSymbol.css';/* empty css                            */
+import '../../assets/Content.css';import '../../assets/MainMenu.css';import '../../assets/Header.css';import '../../assets/Expandable.css';import '../../assets/Editable.css';import '../../assets/Sidebar.css';import '../../assets/Scroll.css';import '../../assets/Message.css';import '../../assets/Modal.css';import '../../assets/Overlay.css';import '../../assets/Panel.css';import '../../assets/Block.css';import '../../assets/RadioLabel.css';import '../../assets/Input.css';import '../../assets/Files.css';import '../../assets/Fieldset.css';import '../../assets/Menu.css';import '../../assets/FormCol.css';import '../../assets/FormRow.css';import '../../assets/DatePicker.css';import '../../assets/Label.css';import '../../assets/RequiredMark.css';import '../../assets/Popup.css';import '../../assets/PageHeader.css';import '../../assets/TelefragLogo.css';import '../../assets/TelefragSymbol.css';/* empty css                            */
 /* empty css                          */
 import k from "../icons/Trash.js";
 /* empty css                        */
@@ -29,10 +29,11 @@ import { Button as b } from "../form/button/Button.js";
 /* empty css                     */
 import x from "../ui/toolbar/Toolbar.js";
 /* empty css                      */
+/* empty css                        */
 /* empty css                    */
 /* empty css                      */
 /* empty css                     */
-const de = ({
+const te = ({
   menu: d,
   title: C,
   subtitle: T,
@@ -106,5 +107,5 @@ const de = ({
   ] });
 };
 export {
-  de as default
+  te as default
 };

package/dist/components/ui/expandable/Expandable.d.ts

@@ -0,0 +1,17 @@
+import { default as React, PropsWithChildren } from 'react';
+type PropsWithMaxHeight = {
+    maxHeight?: number;
+    aspectRatio?: never;
+};
+type PropsWithAspectRatio = {
+    maxHeight?: never;
+    aspectRatio?: '1x1' | '16x9';
+};
+type Props = (PropsWithAspectRatio | PropsWithMaxHeight) & {
+    expand?: string;
+    collapse?: string;
+    isCollapsable?: boolean;
+    noShadow?: boolean;
+};
+declare const Expandable: React.FC<PropsWithChildren<Props>>;
+export default Expandable;

package/dist/components/ui/expandable/Expandable.js

@@ -0,0 +1,78 @@
+import { jsxs as i, jsx as a, Fragment as h } from "react/jsx-runtime";
+import { useState as f, useRef as E, useCallback as C, useEffect as I } from "react";
+import '../../../assets/Expandable.css';/* empty css                           */
+const M = 50, b = 300, j = ({
+  children: m,
+  maxHeight: l,
+  aspectRatio: d = "1x1",
+  expand: H = "Показать целиком...",
+  collapse: g = "Свернуть...",
+  isCollapsable: v = !0,
+  noShadow: N
+}) => {
+  var x;
+  const [t, u] = f(!1), [w, p] = f(!1), e = E(null), c = E(null), o = C(() => {
+    if (l) return Math.max(l, M);
+    const n = e.current;
+    if (!n) return b;
+    const r = n.clientWidth;
+    switch (d) {
+      case "1x1":
+        return r;
+      case "16x9":
+        return Math.ceil(r / 16 * 9);
+      default:
+        return b;
+    }
+  }, [l, d, e]);
+  return I(() => {
+    const n = e.current;
+    if (!n) return;
+    const r = o();
+    c.current && c.current.disconnect();
+    const s = new ResizeObserver(() => {
+      p(n.scrollHeight > r);
+    });
+    return s.observe(n), c.current = s, p(n.scrollHeight > r), () => {
+      s && s.disconnect();
+    };
+  }, [o]), /* @__PURE__ */ i("div", { className: "Expandable", children: [
+    /* @__PURE__ */ a(
+      "div",
+      {
+        ref: e,
+        className: t ? "ExpandableExpanded" : "ExpandableCollapsed",
+        style: { maxHeight: t ? (x = e == null ? void 0 : e.current) != null && x.scrollHeight ? e.current.scrollHeight + "px" : "none" : `${o()}px` },
+        children: m
+      }
+    ),
+    w && /* @__PURE__ */ i(h, { children: [
+      t && v && /* @__PURE__ */ a(
+        "span",
+        {
+          className: "ExpandableButton",
+          onClick: () => u(!1),
+          "aria-expanded": t,
+          "aria-controls": "collapsible-content",
+          children: g
+        }
+      ),
+      !t && /* @__PURE__ */ i(h, { children: [
+        !N && /* @__PURE__ */ a("div", { className: "ExpandableShadow" }),
+        /* @__PURE__ */ a(
+          "span",
+          {
+            className: "ExpandableButton",
+            onClick: () => u(!0),
+            "aria-expanded": t,
+            "aria-controls": "collapsible-content",
+            children: H
+          }
+        )
+      ] })
+    ] })
+  ] });
+};
+export {
+  j as default
+};

package/dist/main.d.ts

@@ -30,10 +30,11 @@ import { default as Scroll } from './components/ui/scroll/Scroll';
 import { default as Sidebar } from './components/ui/sidebar/Sidebar';
 import { default as Toolbar, ToolbarItem } from './components/ui/toolbar/Toolbar';
 import { default as Editable } from './components/ui/editable/Editable';
+import { default as Expandable } from './components/ui/expandable/Expandable';
 import { default as Layout } from './components/layout/Layout';
 import { MainMenuItem } from './components/layout/MainMenu';
 import { default as Page } from './components/layout/Page';
 import { default as PageHeader } from './components/layout/PageHeader';
 import * as Icons from './components/icons';
-export { Form, Date, Time, Files, Image, Input, Label, RadioList, Button, Select, Hidden, Checkbox, CheckboxList, Fieldset, FormRow, FormCol, DatePicker, Menu, Block, Panel, Modal, Overlay, Popup, Portal, Message, Alert, Confirm, Prompt, Scroll, Sidebar, Toolbar, Editable, Layout, Page, PageHeader, Icons, };
+export { Form, Date, Time, Files, Image, Input, Label, RadioList, Button, Select, Hidden, Checkbox, CheckboxList, Fieldset, FormRow, FormCol, DatePicker, Menu, Block, Panel, Modal, Overlay, Popup, Portal, Message, Alert, Confirm, Prompt, Scroll, Sidebar, Toolbar, Editable, Expandable, Layout, Page, PageHeader, Icons, };
 export type { FormData, MainMenuItem, MenuItem, ModalProps, ButtonType, CheckboxListOption, RadioListOption, RadioListValue, SelectOption, ToolbarItem, };

package/dist/main.js

@@ -5,17 +5,17 @@ import { default as p } from "./components/form/form/FormCol.js";
 import { default as x } from "./components/form/date/Date.js";
 import { default as s } from "./components/form/date/DatePicker.js";
 import { default as i } from "./components/form/time/Time.js";
-import { Files as n } from "./components/form/files/Files.js";
-import { Image as b } from "./components/form/image/Image.js";
+import { Files as b } from "./components/form/files/Files.js";
+import { Image as P } from "./components/form/image/Image.js";
 import { default as g } from "./components/form/input/Input.js";
 import { default as C } from "./components/form/label/Label.js";
 import { RadioList as I } from "./components/form/radio/RadioList.js";
 import { Button as S } from "./components/form/button/Button.js";
 import { Select as y } from "./components/form/select/Select.js";
 import { default as D } from "./components/form/hidden/Hidden.js";
-import { default as R } from "./components/form/checkbox/Checkbox.js";
-import { CheckboxList as v } from "./components/form/checkbox/CheckboxList.js";
-import { default as A } from "./components/form/fieldset/Fieldset.js";
+import { default as H } from "./components/form/checkbox/Checkbox.js";
+import { CheckboxList as T } from "./components/form/checkbox/CheckboxList.js";
+import { default as w } from "./components/form/fieldset/Fieldset.js";
 import { Menu as O } from "./components/ui/menu/Menu.js";
 import { default as q } from "./components/ui/block/Block.js";
 import { default as G } from "./components/ui/panel/Panel.js";
@@ -25,34 +25,36 @@ import { Popup as V } from "./components/ui/popup/Popup.js";
 import { default as X } from "./components/ui/portal/Portal.js";
 import { default as Z } from "./components/ui/message/Message.js";
 import { default as $ } from "./components/ui/alert/Alert.js";
-import { default as ro } from "./components/ui/confirm/Confirm.js";
+import { default as eo } from "./components/ui/confirm/Confirm.js";
 import { default as to } from "./components/ui/prompt/Prompt.js";
 import { default as fo } from "./components/ui/scroll/Scroll.js";
 import { Sidebar as po } from "./components/ui/sidebar/Sidebar.js";
 import { default as xo } from "./components/ui/toolbar/Toolbar.js";
 import { default as uo } from "./components/ui/editable/Editable.js";
+import { default as no } from "./components/ui/expandable/Expandable.js";
 import { default as co } from "./components/layout/Layout.js";
-import { default as Po } from "./components/layout/Page.js";
-import { default as Fo } from "./components/layout/PageHeader.js";
-import { i as ko } from "./index-D12KbdVs.js";
+import { default as Fo } from "./components/layout/Page.js";
+import { default as ko } from "./components/layout/PageHeader.js";
+import { i as Lo } from "./index-D12KbdVs.js";
 export {
   $ as Alert,
   q as Block,
   S as Button,
-  R as Checkbox,
-  v as CheckboxList,
-  ro as Confirm,
+  H as Checkbox,
+  T as CheckboxList,
+  eo as Confirm,
   x as Date,
   s as DatePicker,
   uo as Editable,
-  A as Fieldset,
-  n as Files,
+  no as Expandable,
+  w as Fieldset,
+  b as Files,
   t as Form,
   p as FormCol,
   f as FormRow,
   D as Hidden,
-  ko as Icons,
-  b as Image,
+  Lo as Icons,
+  P as Image,
   g as Input,
   C as Label,
   co as Layout,
@@ -60,8 +62,8 @@ export {
   Z as Message,
   K as Modal,
   Q as Overlay,
-  Po as Page,
-  Fo as PageHeader,
+  Fo as Page,
+  ko as PageHeader,
   G as Panel,
   V as Popup,
   X as Portal,

package/package.json

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