@alxgrn/telefrag-ui 0.0.4 → 0.0.7

package/dist/components/ui/popup/Popup.js

@@ -1,20 +1,22 @@
 import { jsx as a } from "react/jsx-runtime";
 import { useRef as v, useState as y, useEffect as m } from "react";
-import { CSSTransition as S } from "react-transition-group";
-import L from "../portal/Portal.js";
-import '../../../assets/Popup.css';const P = 100, I = ({
+import { CSSTransition as L } from "react-transition-group";
+import S from "../portal/Portal.js";
+import { ANIMATION_LENGTH as T } from "../../../config.js";
+import '../../../assets/Popup.css';/* empty css                      */
+const N = T, M = ({
   parent: s,
   isOpen: d,
-  onClose: i,
+  onClose: c,
   vertical: p = "auto",
   horizontal: f = "auto",
   margin: o = "0",
   maxHeight: h = "none",
   width: b = "auto",
   position: l = "absolute",
-  children: w
+  children: E
 }) => {
-  const u = v(null), [E, g] = y({}), [x, k] = y({});
+  const u = v(null), [w, g] = y({}), [x, k] = y({});
   return m(() => {
     if (!d) return;
     if (!s.current) {
@@ -32,25 +34,25 @@ import '../../../assets/Popup.css';const P = 100, I = ({
     const t = {
       width: b === "parent" ? e.width : "auto"
     };
-    let c = 0;
+    let i = 0;
     switch (p) {
       case "top":
-        t.bottom = "100%", t.marginBottom = o, c = e.top;
+        t.bottom = "100%", t.marginBottom = o, i = e.top;
         break;
       case "bottom":
-        t.top = "100%", t.marginTop = o, c = n - e.bottom;
+        t.top = "100%", t.marginTop = o, i = n - e.bottom;
         break;
       case "inner-top":
-        t.top = 0, c = n - e.top;
+        t.top = 0, i = n - e.top;
         break;
       case "inner-bottom":
-        t.bottom = 0, c = e.bottom;
+        t.bottom = 0, i = e.bottom;
         break;
       default:
-        e.top < n - e.bottom ? (t.top = "100%", t.marginTop = o, c = n - e.bottom) : (t.bottom = "100%", t.marginBottom = o, c = e.top);
+        e.top < n - e.bottom ? (t.top = "100%", t.marginTop = o, i = n - e.bottom) : (t.bottom = "100%", t.marginBottom = o, i = e.top);
         break;
     }
-    switch (h === "auto" && (t.maxHeight = `calc(${c}px - 2 * ${o})`), f) {
+    switch (h === "auto" && (t.maxHeight = `calc(${i}px - 2 * ${o})`), f) {
       case "left":
         t.right = "100%", t.marginRight = o;
         break;
@@ -70,31 +72,31 @@ import '../../../assets/Popup.css';const P = 100, I = ({
     g(t);
   }, [s, d, o, p, f, h, b, l]), m(() => {
     const r = (n) => {
-      u.current && !u.current.contains(n.target) && i();
+      u.current && !u.current.contains(n.target) && c();
     };
     return document.addEventListener("click", r, !0), () => {
       document.removeEventListener("click", r, !0);
     };
-  }, [i]), m(() => {
+  }, [c]), m(() => {
     const r = (n) => {
-      n.key === "Escape" && i();
+      n.key === "Escape" && c();
     };
     return document.body.addEventListener("keydown", r), () => {
       document.body.removeEventListener("keydown", r);
     };
-  }, [i]), /* @__PURE__ */ a(L, { id: "alxgrn-popup", children: /* @__PURE__ */ a(
-    S,
+  }, [c]), /* @__PURE__ */ a(S, { id: "alxgrn-popup", children: /* @__PURE__ */ a(
+    L,
     {
       in: d,
-      timeout: P,
+      timeout: N,
       unmountOnExit: !0,
       classNames: "Popup",
       nodeRef: u,
-      children: /* @__PURE__ */ a("div", { className: "Popup", style: x, children: /* @__PURE__ */ a("div", { className: "PopupInner", ref: u, style: E, children: w }) })
+      children: /* @__PURE__ */ a("div", { className: "Popup", style: x, children: /* @__PURE__ */ a("div", { className: "PopupInner", ref: u, style: w, children: E }) })
     }
   ) });
 };
 export {
-  I as Popup,
-  I as default
+  M as Popup,
+  M as default
 };

package/dist/components/ui/prompt/Prompt.js

@@ -1,6 +1,6 @@
 import { jsxs as d, jsx as r } from "react/jsx-runtime";
 import { useState as p, useEffect as h } from "react";
-import x from "../modal/Modal.js";
+import { Modal as x } from "../modal/Modal.js";
 import { Form as b } from "../../form/form/Form.js";
 import j from "../../form/input/Input.js";
 const g = ({

package/dist/components/ui/sidebar/Sidebar.d.ts

@@ -0,0 +1,8 @@
+import { FC, PropsWithChildren } from 'react';
+export type Props = {
+    position?: 'Left' | 'Right';
+    isOpen: boolean;
+    onClose: () => void;
+};
+export declare const Sidebar: FC<PropsWithChildren<Props>>;
+export default Sidebar;

package/dist/components/ui/sidebar/Sidebar.js

@@ -0,0 +1,24 @@
+import { jsx as o } from "react/jsx-runtime";
+import { useEffect as i } from "react";
+import { Overlay as n } from "../overlay/Overlay.js";
+import '../../../assets/Sidebar.css';/* empty css                        */
+const y = ({ children: d, position: a = "Left", isOpen: e, onClose: t }) => (i(() => {
+  const r = (c) => {
+    c.key === "Escape" && t();
+  };
+  return e && document.body.addEventListener("keydown", r), () => {
+    e && document.body.removeEventListener("keydown", r);
+  };
+}, [e, t]), /* @__PURE__ */ o(
+  n,
+  {
+    isOpen: e,
+    onClick: t,
+    hAlign: a,
+    children: /* @__PURE__ */ o("div", { className: `Sidebar ${a}`, onClick: (r) => r.stopPropagation(), children: /* @__PURE__ */ o("div", { className: "SidebarInner Scrollbar", children: d }) })
+  }
+));
+export {
+  y as Sidebar,
+  y as default
+};

package/dist/config.d.ts

@@ -0,0 +1 @@
+export declare const ANIMATION_LENGTH = 150;

package/dist/config.js

@@ -0,0 +1,4 @@
+const N = 150;
+export {
+  N as ANIMATION_LENGTH
+};

package/dist/main.d.ts

@@ -7,8 +7,8 @@ import { default as Time } from './components/form/time/Time';
 import { default as Files } from './components/form/files/Files';
 import { default as Input } from './components/form/input/Input';
 import { default as Label } from './components/form/label/Label';
-import { default as RadioList } from './components/form/radio/RadioList';
-import { default as Button } from './components/form/button/Button';
+import { RadioList, RadioListOption, RadioListValue } from './components/form/radio/RadioList';
+import { Button, ButtonType } from './components/form/button/Button';
 import { default as Select } from './components/form/select/Select';
 import { default as Hidden } from './components/form/hidden/Hidden';
 import { default as Checkbox } from './components/form/checkbox/Checkbox';
@@ -17,13 +17,17 @@ import { default as Fieldset } from './components/form/fieldset/Fieldset';
 import { Menu, MenuItem } from './components/ui/menu/Menu';
 import { default as Block } from './components/ui/block/Block';
 import { default as Panel } from './components/ui/panel/Panel';
-import { default as Modal } from './components/ui/modal/Modal';
+import { Modal, ModalProps } from './components/ui/modal/Modal';
+import { default as Overlay } from './components/ui/overlay/Overlay';
 import { default as Popup } from './components/ui/popup/Popup';
 import { default as Portal } from './components/ui/portal/Portal';
 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 Sidebar } from './components/ui/sidebar/Sidebar';
 import { default as Editable } from './components/ui/editable/Editable';
-export { Form, Date, Time, Files, Input, Label, RadioList, Button, Select, Hidden, Checkbox, CheckboxList, Fieldset, FormRow, FormCol, DatePicker, Menu, Block, Panel, Modal, Popup, Portal, Message, Alert, Confirm, Prompt, Editable, };
-export type { FormData, MenuItem, };
+import { default as Layout } from './components/layout/Layout';
+import { default as Page } from './components/layout/Page';
+export { Form, Date, Time, Files, 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, };
+export type { FormData, MenuItem, ModalProps, ButtonType, RadioListOption, RadioListValue, };

package/dist/main.js

@@ -1,56 +1,65 @@
-import { Form as r } from "./components/form/form/Form.js";
-import { default as a } from "./components/form/form/FormRow.js";
-import { default as m } from "./components/form/form/FormCol.js";
-import { default as p } from "./components/form/date/Date.js";
-import { default as d } from "./components/form/date/DatePicker.js";
-import { default as u } from "./components/form/time/Time.js";
-import { Files as n } from "./components/form/files/Files.js";
-import { default as F } from "./components/form/input/Input.js";
-import { default as b } from "./components/form/label/Label.js";
-import { RadioList as C } from "./components/form/radio/RadioList.js";
-import { default as M } from "./components/form/button/Button.js";
-import { Select as B } from "./components/form/select/Select.js";
-import { default as R } from "./components/form/hidden/Hidden.js";
-import { default as w } from "./components/form/checkbox/Checkbox.js";
-import { CheckboxList as E } from "./components/form/checkbox/CheckboxList.js";
-import { default as I } from "./components/form/fieldset/Fieldset.js";
-import { Menu as T } from "./components/ui/menu/Menu.js";
-import { default as q } from "./components/ui/block/Block.js";
-import { default as y } from "./components/ui/panel/Panel.js";
-import { default as G } from "./components/ui/modal/Modal.js";
-import { Popup as K } from "./components/ui/popup/Popup.js";
-import { default as O } from "./components/ui/portal/Portal.js";
-import { default as U } from "./components/ui/message/Message.js";
-import { default as W } from "./components/ui/alert/Alert.js";
-import { default as Y } from "./components/ui/confirm/Confirm.js";
-import { default as _ } from "./components/ui/prompt/Prompt.js";
-import { default as oo } from "./components/ui/editable/Editable.js";
+import './assets/Page.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 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 { default as c } from "./components/form/input/Input.js";
+import { default as k } from "./components/form/label/Label.js";
+import { RadioList as L } from "./components/form/radio/RadioList.js";
+import { Button as g } 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 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 I } from "./components/ui/menu/Menu.js";
+import { default as T } from "./components/ui/block/Block.js";
+import { default as q } from "./components/ui/panel/Panel.js";
+import { Modal as G } from "./components/ui/modal/Modal.js";
+import { Overlay as K } from "./components/ui/overlay/Overlay.js";
+import { Popup as Q } from "./components/ui/popup/Popup.js";
+import { default as V } from "./components/ui/portal/Portal.js";
+import { default as X } from "./components/ui/message/Message.js";
+import { default as Z } from "./components/ui/alert/Alert.js";
+import { default as $ } from "./components/ui/confirm/Confirm.js";
+import { default as eo } from "./components/ui/prompt/Prompt.js";
+import { Sidebar as to } from "./components/ui/sidebar/Sidebar.js";
+import { default as fo } from "./components/ui/editable/Editable.js";
+import { default as po } from "./components/layout/Layout.js";
+import { default as lo } from "./components/layout/Page.js";
 export {
-  W as Alert,
-  q as Block,
-  M as Button,
-  w as Checkbox,
-  E as CheckboxList,
-  Y as Confirm,
-  p as Date,
-  d as DatePicker,
-  oo as Editable,
-  I as Fieldset,
-  n as Files,
-  r as Form,
-  m as FormCol,
-  a as FormRow,
-  R as Hidden,
-  F as Input,
-  b as Label,
-  T as Menu,
-  U as Message,
+  Z as Alert,
+  T as Block,
+  g as Button,
+  S as Checkbox,
+  w as CheckboxList,
+  $ as Confirm,
+  l as Date,
+  s as DatePicker,
+  fo as Editable,
+  E as Fieldset,
+  P as Files,
+  t as Form,
+  p as FormCol,
+  f as FormRow,
+  D as Hidden,
+  c as Input,
+  k as Label,
+  po as Layout,
+  I as Menu,
+  X as Message,
   G as Modal,
-  y as Panel,
-  K as Popup,
-  O as Portal,
-  _ as Prompt,
-  C as RadioList,
-  B as Select,
-  u as Time
+  K as Overlay,
+  lo as Page,
+  q as Panel,
+  Q as Popup,
+  V as Portal,
+  eo as Prompt,
+  L as RadioList,
+  y as Select,
+  to as Sidebar,
+  i as Time
 };

package/package.json

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

package/dist/assets/Form.css

@@ -1 +0,0 @@
-*{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-font-size: 16px;--alxgrn-font-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-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: rgba(70, 130, 180, .1);--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-bg-main: #111;--alxgrn-bg-panel: #222;--alxgrn-bg-modal: #222;--alxgrn-bg-popup: #333;--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)}: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)}