@alxgrn/telefrag-ui 0.0.60 → 0.0.62

package/dist/components/ui/scroll/Scroll.js

@@ -0,0 +1,60 @@
+import { jsxs as g, jsx as n } from "react/jsx-runtime";
+import { useRef as m, useState as d, useEffect as p } from "react";
+import W from "../../icons/ChevronLeft.js";
+import w from "../../icons/ChevronRight.js";
+import '../../../assets/Scroll.css';import '../../../assets/TelefragLogo.css';import '../../../assets/TelefragSymbol.css';/* empty css                               */
+/* empty css                             */
+/* empty css                       */
+const M = ({ items: L, active: s, onActive: f }) => {
+  const r = m(null), c = m([]), [S, i] = d(!1), [N, u] = d(!1), h = (o) => {
+    const t = o.scrollLeft, e = o.offsetWidth, l = o.scrollWidth;
+    l <= e ? (i(!1), u(!1)) : (i(t > 0), u(Math.round(t + e + 0.5) < l));
+  };
+  p(() => {
+    r.current && h(r.current);
+  }, [r]), p(() => {
+    s !== void 0 && c.current[s] && r.current && (r.current.scrollLeft = c.current[s].offsetLeft + c.current[s].clientWidth / 2 - r.current.offsetWidth / 2);
+  }, [s, c, r]);
+  const k = (o) => {
+    h(o.currentTarget);
+  }, v = (o) => {
+    if (o.stopPropagation(), !r.current) return;
+    const t = r.current.scrollLeft;
+    for (let e = c.current.length - 1; e >= 0; e--)
+      if (c.current[e].offsetLeft < t) {
+        r.current.scrollLeft = c.current[e].offsetLeft;
+        break;
+      }
+  }, C = (o) => {
+    if (o.stopPropagation(), !r.current) return;
+    const t = r.current.offsetWidth, e = r.current.scrollLeft + t;
+    for (let l = 0; l < c.current.length; l++) {
+      const a = c.current[l].offsetLeft + c.current[l].clientWidth;
+      if (a > e) {
+        r.current.scrollLeft = a - t;
+        break;
+      }
+    }
+  }, P = (o, t) => {
+    o.stopPropagation(), f && f(t);
+  };
+  return /* @__PURE__ */ g("div", { className: "Scroll", children: [
+    /* @__PURE__ */ n("div", { className: "ScrollList", onScroll: k, ref: r, children: L.map((o, t) => /* @__PURE__ */ n(
+      "div",
+      {
+        className: t === s ? "ScrollItem active" : "ScrollItem",
+        onClick: (e) => P(e, t),
+        ref: (e) => {
+          e && (c.current[t] = e);
+        },
+        children: o
+      },
+      t
+    )) }),
+    S && /* @__PURE__ */ n("div", { className: "ScrollPrev", onClick: v, children: /* @__PURE__ */ n(W, {}) }),
+    N && /* @__PURE__ */ n("div", { className: "ScrollNext", onClick: C, children: /* @__PURE__ */ n(w, {}) })
+  ] });
+};
+export {
+  M as default
+};

package/dist/components/ui/toolbar/Toolbar.d.ts

@@ -0,0 +1,15 @@
+import { default as React, ReactNode } from 'react';
+export type ToolbarItem = {
+    id: string | number;
+    icon?: ReactNode;
+    text?: ReactNode | string;
+};
+type ToolbarProps = {
+    items: ToolbarItem[];
+    panel?: boolean;
+    active?: string | number;
+    className?: string;
+    onActive: (id: string | number) => void;
+};
+declare const Toolbar: React.FC<ToolbarProps>;
+export default Toolbar;

package/dist/components/ui/toolbar/Toolbar.js

@@ -0,0 +1,20 @@
+import { jsxs as x, jsx as l } from "react/jsx-runtime";
+import { useState as e, useEffect as s } from "react";
+import h from "../scroll/Scroll.js";
+import '../../../assets/Toolbar.css';/* empty css                        */
+const T = ({ items: o, panel: a, active: t, className: c, onActive: d }) => {
+  const [i, u] = e(0), [p, f] = e([]);
+  return s(() => {
+    const n = o.findIndex((r) => r.id === t);
+    u(n);
+  }, [o, t]), s(() => {
+    const n = o.map((r) => /* @__PURE__ */ x("div", { className: "ToolbarItem", children: [
+      r.icon ? /* @__PURE__ */ l("span", { children: r.icon }) : null,
+      r.text ? /* @__PURE__ */ l("span", { children: r.text }) : null
+    ] }));
+    f(n);
+  }, [o]), /* @__PURE__ */ l("div", { className: `Toolbar ${a ? "LikePanel" : ""} ${c || ""}`, children: /* @__PURE__ */ l(h, { items: p, active: i, onActive: (n) => d(o[n].id) }) });
+};
+export {
+  T as default
+};

package/dist/{index-BNwZCY3z.js → index-D12KbdVs.js}

@@ -17,17 +17,17 @@ import C from "./components/icons/ChevronLeft.js";
 import u from "./components/icons/ChevronRight.js";
 import c from "./components/icons/Clock.js";
 import A from "./components/icons/Code.js";
-import k from "./components/icons/CodeXml.js";
-import S from "./components/icons/ColumnInsertAfter.js";
+import S from "./components/icons/CodeXml.js";
+import k from "./components/icons/ColumnInsertAfter.js";
 import H from "./components/icons/ColumnInsertBefore.js";
 import I from "./components/icons/Expand.js";
-import L from "./components/icons/Eye.js";
-import M from "./components/icons/Feather.js";
-import R from "./components/icons/Files.js";
-import T from "./components/icons/Film.js";
-import b from "./components/icons/FlipVertical.js";
-import w from "./components/icons/Forum.js";
-import y from "./components/icons/Gamepad.js";
+import T from "./components/icons/Eye.js";
+import b from "./components/icons/Feather.js";
+import y from "./components/icons/Files.js";
+import L from "./components/icons/Film.js";
+import M from "./components/icons/FlipVertical.js";
+import R from "./components/icons/Forum.js";
+import w from "./components/icons/Gamepad.js";
 import B from "./components/icons/Heading.js";
 import F from "./components/icons/Heading1.js";
 import v from "./components/icons/Heading2.js";
@@ -58,13 +58,14 @@ import mo from "./components/icons/Shrink.js";
 import io from "./components/icons/SquareDashed.js";
 import to from "./components/icons/Strikethrough.js";
 import eo from "./components/icons/Table.js";
-import fo from "./components/icons/TelefragLogo.js";
-import po from "./components/icons/Trash.js";
-import no from "./components/icons/Type.js";
-import lo from "./components/icons/Underline.js";
-import ao from "./components/icons/Undo.js";
-import go from "./components/icons/Users.js";
-const Rr = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+import fo from "./components/icons/TelefragSymbol.js";
+import po from "./components/icons/TelefragLogo.js";
+import no from "./components/icons/Trash.js";
+import lo from "./components/icons/Type.js";
+import ao from "./components/icons/Underline.js";
+import go from "./components/icons/Undo.js";
+import so from "./components/icons/Users.js";
+const Mr = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   AlignBottom: o,
   AlignCenter: r,
@@ -85,17 +86,17 @@ const Rr = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   ChevronRight: u,
   Clock: c,
   Code: A,
-  CodeXml: k,
-  ColumnInsertAfter: S,
+  CodeXml: S,
+  ColumnInsertAfter: k,
   ColumnInsertBefore: H,
   Expand: I,
-  Eye: L,
-  Feather: M,
-  Files: R,
-  Film: T,
-  FlipVertical: b,
-  Forum: w,
-  Gamepad: y,
+  Eye: T,
+  Feather: b,
+  Files: y,
+  Film: L,
+  FlipVertical: M,
+  Forum: R,
+  Gamepad: w,
   Heading: B,
   Heading1: F,
   Heading2: v,
@@ -126,13 +127,14 @@ const Rr = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   SquareDashed: io,
   Strikethrough: to,
   Table: eo,
-  TelefragLogo: fo,
-  Trash: po,
-  Type: no,
-  Underline: lo,
-  Undo: ao,
-  Users: go
+  TelefragLogo: po,
+  TelefragSymbol: fo,
+  Trash: no,
+  Type: lo,
+  Underline: ao,
+  Undo: go,
+  Users: so
 }, Symbol.toStringTag, { value: "Module" }));
 export {
-  Rr as i
+  Mr as i
 };

package/dist/main.d.ts

@@ -26,12 +26,14 @@ import { default as Message } from './components/ui/message/Message';
 import { default as Alert } from './components/ui/alert/Alert';
 import { default as Confirm } from './components/ui/confirm/Confirm';
 import { default as Prompt } from './components/ui/prompt/Prompt';
+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 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, Sidebar, Editable, Layout, Page, PageHeader, Icons, };
-export type { FormData, MainMenuItem, MenuItem, ModalProps, ButtonType, CheckboxListOption, RadioListOption, RadioListValue, SelectOption, };
+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 type { FormData, MainMenuItem, MenuItem, ModalProps, ButtonType, CheckboxListOption, RadioListOption, RadioListValue, SelectOption, ToolbarItem, };

package/dist/main.js

@@ -2,21 +2,21 @@ import './assets/PageHeader.css';/* empty css                    */
 import { Form as t } from "./components/form/form/Form.js";
 import { default as f } from "./components/form/form/FormRow.js";
 import { default as p } from "./components/form/form/FormCol.js";
-import { default as l } from "./components/form/date/Date.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 P } from "./components/form/files/Files.js";
+import { Files as n } from "./components/form/files/Files.js";
 import { Image as b } 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 h } from "./components/form/button/Button.js";
-import { Select as B } from "./components/form/select/Select.js";
-import { default as H } from "./components/form/hidden/Hidden.js";
-import { default as S } from "./components/form/checkbox/Checkbox.js";
-import { CheckboxList as w } from "./components/form/checkbox/CheckboxList.js";
-import { default as E } from "./components/form/fieldset/Fieldset.js";
-import { Menu as T } from "./components/ui/menu/Menu.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 { 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";
 import { Modal as K } from "./components/ui/modal/Modal.js";
@@ -25,47 +25,51 @@ 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 eo } from "./components/ui/confirm/Confirm.js";
+import { default as ro } from "./components/ui/confirm/Confirm.js";
 import { default as to } from "./components/ui/prompt/Prompt.js";
-import { Sidebar as fo } from "./components/ui/sidebar/Sidebar.js";
-import { default as po } from "./components/ui/editable/Editable.js";
-import { default as lo } from "./components/layout/Layout.js";
-import { default as uo } from "./components/layout/Page.js";
-import { default as no } from "./components/layout/PageHeader.js";
-import { i as co } from "./index-BNwZCY3z.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 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";
 export {
   $ as Alert,
   q as Block,
-  h as Button,
-  S as Checkbox,
-  w as CheckboxList,
-  eo as Confirm,
-  l as Date,
+  S as Button,
+  R as Checkbox,
+  v as CheckboxList,
+  ro as Confirm,
+  x as Date,
   s as DatePicker,
-  po as Editable,
-  E as Fieldset,
-  P as Files,
+  uo as Editable,
+  A as Fieldset,
+  n as Files,
   t as Form,
   p as FormCol,
   f as FormRow,
-  H as Hidden,
-  co as Icons,
+  D as Hidden,
+  ko as Icons,
   b as Image,
   g as Input,
   C as Label,
-  lo as Layout,
-  T as Menu,
+  co as Layout,
+  O as Menu,
   Z as Message,
   K as Modal,
   Q as Overlay,
-  uo as Page,
-  no as PageHeader,
+  Po as Page,
+  Fo as PageHeader,
   G as Panel,
   V as Popup,
   X as Portal,
   to as Prompt,
   I as RadioList,
-  B as Select,
-  fo as Sidebar,
-  i as Time
+  fo as Scroll,
+  y as Select,
+  po as Sidebar,
+  i as Time,
+  xo as Toolbar
 };

package/package.json

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

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

@@ -1,2 +0,0 @@
-declare const Footer: () => import("react/jsx-runtime").JSX.Element;
-export default Footer;