@alxgrn/telefrag-ui 0.0.3 → 0.0.4

package/dist/assets/DatePicker.css

@@ -1 +1 @@
-:root{--alxgrn-datepicker-bg: transparent;--alxgrn-datepicker-bg-day: var(--alxgrn-bg-light);--alxgrn-datepicker-bg-menu: var(--alxgrn-bg-light);--alxgrn-datepicker-bg-hover: var(--alxgrn-bg-active);--alxgrn-datepicker-bg-select: var(--alxgrn-bg-dark);--alxgrn-datepicker-color: var(--alxgrn-color-text);--alxgrn-datepicker-color-accent: var(--alxgrn-color-accent);--alxgrn-datepicker-color-select: white;--alxgrn-datepicker-border: transparent}.FormDatePicker{display:grid;gap:var(--alxgrn-unit-smallest);width:fit-content;overflow:hidden;border:1px solid var(--alxgrn-datepicker-border);border-radius:var(--alxgrn-unit-small);padding:var(--alxgrn-unit-small)}.FormDatePicker *{margin:0;padding:0;text-align:center;color:var(--alxgrn-datepicker-color);background-color:var(--alxgrn-datepicker-bg);line-height:var(--alxgrn-unit-double);-webkit-user-select:none;user-select:none}.FormDatePicker .FormDatePickerMenu{display:grid;grid-template-columns:repeat(7,var(--alxgrn-unit-double));text-transform:capitalize;background-color:var(--alxgrn-datepicker-bg-menu);gap:var(--alxgrn-unit-smallest);border-radius:var(--alxgrn-unit-small);overflow:hidden}.FormDatePicker .FormDatePickerMenu .FormDatePickerText{grid-column:span 5;font-size:smaller}.FormDatePicker .FormDatePickerMenu .FormDatePickerPrev,.FormDatePicker .FormDatePickerMenu .FormDatePickerNext{color:var(--alxgrn-datepicker-color-accent);cursor:pointer}.FormDatePicker .FormDatePickerMenu .FormDatePickerPrev:hover,.FormDatePicker .FormDatePickerMenu .FormDatePickerNext:hover{background-color:var(--alxgrn-datepicker-bg-hover)}.FormDatePicker .FormDatePickerDays{display:grid;grid-template-columns:repeat(7,var(--alxgrn-unit-double));gap:var(--alxgrn-unit-smallest);font-size:smaller}.FormDatePicker .FormDatePickerDays span{background-color:var(--alxgrn-datepicker-bg-day);overflow:hidden;cursor:pointer;border-radius:var(--alxgrn-unit-small)}.FormDatePicker .FormDatePickerDays span:hover{background-color:var(--alxgrn-datepicker-bg-hover)}.FormDatePicker .FormDatePickerDays span.Empty{cursor:default;background-color:var(--alxgrn-datepicker-bg)}.FormDatePicker .FormDatePickerDays span.Selected{color:var(--alxgrn-datepicker-color-select);background-color:var(--alxgrn-datepicker-bg-select)}.FormDatePicker .FormDatePickerDays span.Current{color:var(--alxgrn-datepicker-color-accent);font-weight:700}
+:root{--alxgrn-datepicker-bg: transparent;--alxgrn-datepicker-bg-day: var(--alxgrn-bg-light);--alxgrn-datepicker-bg-menu: var(--alxgrn-bg-light);--alxgrn-datepicker-bg-hover: var(--alxgrn-bg-active);--alxgrn-datepicker-bg-select: var(--alxgrn-bg-dark);--alxgrn-datepicker-color: var(--alxgrn-color-text);--alxgrn-datepicker-color-accent: var(--alxgrn-color-accent);--alxgrn-datepicker-color-select: white;--alxgrn-datepicker-border: transparent}.FormDatePicker{display:grid;gap:var(--alxgrn-unit-smallest);width:fit-content;overflow:hidden;border:1px solid var(--alxgrn-datepicker-border);border-radius:var(--alxgrn-unit-small);padding:var(--alxgrn-unit-small)}.FormDatePicker *{margin:0;padding:0;text-align:center;color:var(--alxgrn-datepicker-color);background-color:var(--alxgrn-datepicker-bg);line-height:var(--alxgrn-unit-double);-webkit-user-select:none;user-select:none}.FormDatePicker .FormDatePickerMenu{display:grid;grid-template-columns:repeat(7,var(--alxgrn-unit-double));text-transform:capitalize;background-color:var(--alxgrn-datepicker-bg-menu);gap:var(--alxgrn-unit-smallest);border-radius:var(--alxgrn-unit-small);overflow:hidden}.FormDatePicker .FormDatePickerMenu .FormDatePickerText{grid-column:span 5;font-size:smaller}.FormDatePicker .FormDatePickerMenu .FormDatePickerPrev,.FormDatePicker .FormDatePickerMenu .FormDatePickerNext{color:var(--alxgrn-datepicker-color-accent);cursor:pointer;display:flex;align-items:center;justify-content:center}.FormDatePicker .FormDatePickerMenu .FormDatePickerPrev:hover,.FormDatePicker .FormDatePickerMenu .FormDatePickerNext:hover{background-color:var(--alxgrn-datepicker-bg-hover)}.FormDatePicker .FormDatePickerDays{display:grid;grid-template-columns:repeat(7,var(--alxgrn-unit-double));gap:var(--alxgrn-unit-smallest);font-size:smaller}.FormDatePicker .FormDatePickerDays span{background-color:var(--alxgrn-datepicker-bg-day);overflow:hidden;cursor:pointer;border-radius:var(--alxgrn-unit-small)}.FormDatePicker .FormDatePickerDays span:hover{background-color:var(--alxgrn-datepicker-bg-hover)}.FormDatePicker .FormDatePickerDays span.Empty{cursor:default;background-color:var(--alxgrn-datepicker-bg)}.FormDatePicker .FormDatePickerDays span.Selected{color:var(--alxgrn-datepicker-color-select);background-color:var(--alxgrn-datepicker-bg-select)}.FormDatePicker .FormDatePickerDays span.Current{color:var(--alxgrn-datepicker-color-accent);font-weight:700}

package/dist/assets/Fieldset.css

@@ -1 +1 @@
-:root{--alxgrn-fieldset-color: var(--alxgrn-color-accent);--alxgrn-fieldset-color-error: var(--alxgrn-color-error);--alxgrn-fieldset-color-top: var(--alxgrn-color-light);--alxgrn-fieldset-color-bottom: var(--alxgrn-color-light);--alxgrn-fieldset-color-disabled: var(--alxgrn-color-light);--alxgrn-fieldset-border: var(--alxgrn-border-accent);--alxgrn-fieldset-border-error: var(--alxgrn-border-error);--alxgrn-fieldset-border-disabled: var(--alxgrn-border-light)}.Form .Fieldset{display:block;margin:var(--alxgrn-unit) 0}.Form .Fieldset .FormItem{margin:0 0 var(--alxgrn-unit-half) 0}.Form .Fieldset .FormItem:last-child{margin-bottom:0}.Form .Fieldset .Label{color:var(--alxgrn-fieldset-color);margin-bottom:var(--alxgrn-unit-small)}.Form .Fieldset .Inner{border:1px solid var(--alxgrn-fieldset-border);padding:var(--alxgrn-unit-half);border-radius:var(--alxgrn-unit-small)}.Form .Fieldset .Top,.Form .Fieldset .Bottom{font-size:smaller}.Form .Fieldset .Top{color:var(--alxgrn-fieldset-color-top);margin-bottom:var(--alxgrn-unit-small)}.Form .Fieldset .Bottom{color:var(--alxgrn-fieldset-color-bottom);margin-top:var(--alxgrn-unit-small)}.Form .Fieldset.Disabled .Label,.Form .Fieldset.Disabled .Top,.Form .Fieldset.Disabled .Bottom{color:var(--alxgrn-fieldset-color-disabled)}.Form .Fieldset.Disabled .Inner{border-color:var(--alxgrn-fieldset-border-disabled)}.Form .Fieldset.Error .Label,.Form .Fieldset.Error .Top,.Form .Fieldset.Error .Bottom{color:var(--alxgrn-fieldset-color-error)}.Form .Fieldset.Error .Inner{border-color:var(--alxgrn-fieldset-border-error)}
+:root{--alxgrn-fieldset-color: var(--alxgrn-color-accent);--alxgrn-fieldset-color-error: var(--alxgrn-color-error);--alxgrn-fieldset-color-top: var(--alxgrn-color-light);--alxgrn-fieldset-color-bottom: var(--alxgrn-color-light);--alxgrn-fieldset-color-disabled: var(--alxgrn-color-light);--alxgrn-fieldset-border: var(--alxgrn-border-accent);--alxgrn-fieldset-border-error: var(--alxgrn-border-error);--alxgrn-fieldset-border-disabled: var(--alxgrn-border-light)}.Form .Fieldset{display:block;margin:var(--alxgrn-unit) 0;overflow:hidden}.Form .Fieldset .FormItem{margin:0 0 var(--alxgrn-unit-half) 0}.Form .Fieldset .FormItem:last-child{margin-bottom:0}.Form .Fieldset .Label{display:flex;align-items:center;color:var(--alxgrn-fieldset-color);margin-bottom:var(--alxgrn-unit-small)}.Form .Fieldset .Inner{border:1px solid var(--alxgrn-fieldset-border);padding:var(--alxgrn-unit-half);border-radius:var(--alxgrn-unit-small)}.Form .Fieldset .Top,.Form .Fieldset .Bottom{font-size:smaller}.Form .Fieldset .Top{color:var(--alxgrn-fieldset-color-top);margin-bottom:var(--alxgrn-unit-small)}.Form .Fieldset .Bottom{color:var(--alxgrn-fieldset-color-bottom);margin-top:var(--alxgrn-unit-small)}.Form .Fieldset.Disabled .Label,.Form .Fieldset.Disabled .Top,.Form .Fieldset.Disabled .Bottom{color:var(--alxgrn-fieldset-color-disabled)}.Form .Fieldset.Disabled .Inner{border-color:var(--alxgrn-fieldset-border-disabled)}.Form .Fieldset.Error .Label,.Form .Fieldset.Error .Top,.Form .Fieldset.Error .Bottom{color:var(--alxgrn-fieldset-color-error)}.Form .Fieldset.Error .Inner{border-color:var(--alxgrn-fieldset-border-error)}

package/dist/assets/Label.css

@@ -1 +1 @@
-:root{--alxgrn-label-color: var(--alxgrn-color-accent);--alxgrn-label-color-error: var(--alxgrn-color-error);--alxgrn-label-color-top: var(--alxgrn-color-light);--alxgrn-label-color-bottom: var(--alxgrn-color-light);--alxgrn-label-color-disabled: var(--alxgrn-color-light)}.FormItem label{color:var(--alxgrn-label-color);display:block;-webkit-user-select:none;user-select:none;padding:0}.FormItem label .Label{margin-bottom:var(--alxgrn-unit-small)}.FormItem label .Top,.FormItem label .Bottom{font-size:smaller}.FormItem label .Top{color:var(--alxgrn-label-color-top);margin-bottom:var(--alxgrn-unit-small)}.FormItem label .Bottom{color:var(--alxgrn-label-color-bottom);margin-top:var(--alxgrn-unit-small)}.FormItem label.Disabled,.FormItem label.Disabled .Top,.FormItem label.Disabled .Bottom{color:var(--alxgrn-label-color-disabled)}.FormItem label.Error,.FormItem label.Error .Top,.FormItem label.Error .Bottom{color:var(--alxgrn-label-color-error)}
+:root{--alxgrn-label-color: var(--alxgrn-color-accent);--alxgrn-label-color-error: var(--alxgrn-color-error);--alxgrn-label-color-top: var(--alxgrn-color-light);--alxgrn-label-color-bottom: var(--alxgrn-color-light);--alxgrn-label-color-disabled: var(--alxgrn-color-light)}.FormItem label{color:var(--alxgrn-label-color);display:block;-webkit-user-select:none;user-select:none;padding:0}.FormItem label .Label{display:flex;align-items:center;margin-bottom:var(--alxgrn-unit-small)}.FormItem label .Top,.FormItem label .Bottom{font-size:smaller}.FormItem label .Top{color:var(--alxgrn-label-color-top);margin-bottom:var(--alxgrn-unit-small)}.FormItem label .Bottom{color:var(--alxgrn-label-color-bottom);margin-top:var(--alxgrn-unit-small)}.FormItem label.Disabled,.FormItem label.Disabled .Top,.FormItem label.Disabled .Bottom{color:var(--alxgrn-label-color-disabled)}.FormItem label.Error,.FormItem label.Error .Top,.FormItem label.Error .Bottom{color:var(--alxgrn-label-color-error)}

package/dist/assets/RadioLabel.css

@@ -1 +1 @@
-.Form label.Radio{color:var(--alxgrn-color-text);width:auto;display:block;-webkit-user-select:none;user-select:none;padding:0;cursor:pointer;margin-bottom:var(--alxgrn-unit-half)}.Form label.Radio:last-child{margin-bottom:0}.Form label.Radio .Bottom{font-size:smaller;color:var(--alxgrn-color-light);cursor:default}.Form label.Radio.Disabled,.Form label.Radio.Disabled .Bottom{color:var(--alxgrn-color-light);cursor:default}.Form label.Radio.Error,.Form label.Radio.Error .Bottom{color:var(--alxgrn-color-error)}.Form label.Radio{display:flex;width:fit-content;align-items:flex-start}.Form label.Radio s,.Form label.Radio input{flex:0 0 auto}.Form label.Radio div{flex:1 1 auto}.Form label.Radio input{display:none}.Form label.Radio s{width:var(--alxgrn-unit);height:var(--alxgrn-unit);border:1px solid var(--alxgrn-color-accent);padding:2px;background-clip:content-box;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;margin:var(--alxgrn-unit-smallest) var(--alxgrn-unit-half) 0 0;text-decoration:none}.Form label.Radio input[type=radio]+s{border-radius:50%}.Form label.Radio input[type=checkbox]+s{border-radius:var(--alxgrn-unit-small)}.Form label.Radio.Disabled s{opacity:.5;border:1px solid var(--alxgrn-color-light)}.Form label.Radio.Disabled.Checked s{background-color:var(--alxgrn-color-light)}.Form label.Radio.Checked s{background-color:var(--alxgrn-color-accent)}.Form label.Radio.Error s{border:1px solid var(--alxgrn-color-error)}.Form label.Radio.Error.Checked s{background-color:var(--alxgrn-color-error)}
+.Form label.Radio{color:var(--alxgrn-color-text);width:auto;display:block;-webkit-user-select:none;user-select:none;padding:0;cursor:pointer;margin-bottom:var(--alxgrn-unit-half)}.Form label.Radio:last-child{margin-bottom:0}.Form label.Radio .Label{display:flex;align-items:center}.Form label.Radio .Bottom{font-size:smaller;color:var(--alxgrn-color-light);cursor:default}.Form label.Radio.Disabled,.Form label.Radio.Disabled .Bottom{color:var(--alxgrn-color-light);cursor:default}.Form label.Radio.Error,.Form label.Radio.Error .Bottom{color:var(--alxgrn-color-error)}.Form label.Radio{display:flex;width:fit-content;align-items:flex-start}.Form label.Radio s,.Form label.Radio input{flex:0 0 auto}.Form label.Radio div{flex:1 1 auto}.Form label.Radio input{display:none}.Form label.Radio s{width:var(--alxgrn-unit);height:var(--alxgrn-unit);border:1px solid var(--alxgrn-color-accent);padding:2px;background-clip:content-box;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;margin:var(--alxgrn-unit-smallest) var(--alxgrn-unit-half) 0 0;text-decoration:none}.Form label.Radio input[type=radio]+s{border-radius:50%}.Form label.Radio input[type=checkbox]+s{border-radius:var(--alxgrn-unit-small)}.Form label.Radio.Disabled s{opacity:.5;border:1px solid var(--alxgrn-color-light)}.Form label.Radio.Disabled.Checked s{background-color:var(--alxgrn-color-light)}.Form label.Radio.Checked s{background-color:var(--alxgrn-color-accent)}.Form label.Radio.Error s{border:1px solid var(--alxgrn-color-error)}.Form label.Radio.Error.Checked s{background-color:var(--alxgrn-color-error)}

package/dist/assets/RequiredMark.css

@@ -0,0 +1 @@
+.RequiredMark{display:flex;color:var(--alxgrn-color-error)}

package/dist/components/{button → form/button}/Button.js

@@ -1,5 +1,5 @@
 import { jsx as f } from "react/jsx-runtime";
-import '../../assets/Button.css';const u = ({ label: t, type: o = "Default", size: a = "Normal", disabled: n = !1, onClick: s }) => /* @__PURE__ */ f(
+import '../../../assets/Button.css';const u = ({ label: t, type: o = "Default", size: a = "Normal", disabled: n = !1, onClick: s }) => /* @__PURE__ */ f(
   "span",
   {
     className: n ? `Button ${o} ${a} Disabled` : `Button ${o} ${a}`,

package/dist/components/{date → form/date}/Date.js

@@ -1,6 +1,6 @@
 import { jsxs as b, jsx as l } from "react/jsx-runtime";
 import { useRef as C, useState as k } from "react";
-import { Popup as I } from "../ui/popup/Popup.js";
+import { Popup as I } from "../../ui/popup/Popup.js";
 import $ from "../label/Label.js";
 import D from "./DatePicker.js";
 const z = ({

package/dist/components/form/date/DatePicker.js

@@ -0,0 +1,60 @@
+import { jsxs as u, jsx as n } from "react/jsx-runtime";
+import { useState as m, useEffect as v } from "react";
+import y from "../../icons/ChevronLeft.js";
+import C from "../../icons/ChevronRight.js";
+import '../../../assets/DatePicker.css';const B = ({ year: o, month: i, day: l, onChange: N }) => {
+  const Y = R(), D = /* @__PURE__ */ new Date(), f = D.getDate(), d = D.getMonth(), h = D.getFullYear(), [a, p] = m(h), [c, g] = m(d), [x, S] = m([]), [w, k] = m(0), [I, M] = m(0), [L, F] = m(0);
+  v(() => {
+    let e = o, t = i, r = l;
+    typeof e == "string" && (e = parseInt(e)), typeof t == "string" && (t = parseInt(t)), typeof r == "string" && (r = parseInt(r)), e !== void 0 && isNaN(e) && (e = h), t !== void 0 && isNaN(t) && (t = d), r !== void 0 && isNaN(r) && (r = f);
+    const s = new Date(e ?? h, t ? t - 1 : d, r ?? f);
+    p(s.getFullYear()), g(s.getMonth()), k(s.getDate()), M(s.getMonth()), F(s.getFullYear());
+  }, [o, i, l, h, d, f]), v(() => {
+    const e = T(c, a);
+    let t = new Date(a, c, 1).getDay();
+    t === 0 && (t = 7);
+    const r = [];
+    for (let s = 1; s < t; s++) r.push(0);
+    for (let s = 1; s <= e; s++) r.push(s);
+    S(r);
+  }, [c, a]);
+  const P = (e) => {
+    let t = c + e;
+    t < 0 && (t = 11), t > 11 && (t = 0), g(t);
+  }, j = (e) => {
+    e && (k(e), M(c), F(a), N && N({ day: e, month: c + 1, year: a }));
+  }, E = (e) => {
+    if (!e) return "Empty";
+    if (e === w && c === I && a === L) return "Selected";
+    if (e === f && c === d && a === h) return "Current";
+  };
+  return /* @__PURE__ */ u("div", { className: "FormDatePicker", children: [
+    /* @__PURE__ */ u("div", { className: "FormDatePickerMenu", children: [
+      /* @__PURE__ */ n("span", { className: "FormDatePickerPrev", onClick: () => P(-1), children: /* @__PURE__ */ n(y, {}) }),
+      /* @__PURE__ */ n("span", { className: "FormDatePickerText", children: Y[c] }),
+      /* @__PURE__ */ n("span", { className: "FormDatePickerNext", onClick: () => P(1), children: /* @__PURE__ */ n(C, {}) })
+    ] }),
+    /* @__PURE__ */ n("div", { className: "FormDatePickerDays", children: x.map((e, t) => /* @__PURE__ */ n(
+      "span",
+      {
+        className: E(e),
+        onClick: () => j(e),
+        children: e || ""
+      },
+      t
+    )) }),
+    /* @__PURE__ */ u("div", { className: "FormDatePickerMenu", children: [
+      /* @__PURE__ */ n("span", { className: "FormDatePickerPrev", onClick: () => p(a - 1), children: /* @__PURE__ */ n(y, {}) }),
+      /* @__PURE__ */ n("span", { className: "FormDatePickerText", children: a }),
+      /* @__PURE__ */ n("span", { className: "FormDatePickerNext", onClick: () => p(a + 1), children: /* @__PURE__ */ n(C, {}) })
+    ] })
+  ] });
+}, T = (o, i) => new Date(i, o + 1, 0).getDate(), R = () => {
+  let o = new Date(2e3, 0), i = [];
+  for (let l = 0; l < 12; l++)
+    i.push(o.toLocaleString("default", { month: "long" })), o.setMonth(l + 1);
+  return i;
+};
+export {
+  B as default
+};

package/dist/components/{fieldset → form/fieldset}/Fieldset.js

@@ -1,6 +1,6 @@
 import { jsxs as i, jsx as e } from "react/jsx-runtime";
 import t from "../required/RequiredMark.js";
-import '../../assets/Fieldset.css';const h = ({
+import '../../../assets/Fieldset.css';const h = ({
   label: a,
   top: r,
   bottom: l,

package/dist/components/{files → form/files}/Files.js

@@ -1,7 +1,7 @@
 import { jsxs as i, jsx as l } from "react/jsx-runtime";
 import { useState as L, useEffect as M } from "react";
 import $ from "../fieldset/Fieldset.js";
-import '../../assets/Files.css';const h = (t) => t > 1024 * 1024 ? Math.round(t / (1024 * 1024)) + " Mb" : t > 1024 ? Math.round(t / 1024) + " Kb" : t + " bytes", D = ({
+import '../../../assets/Files.css';const h = (t) => t > 1024 * 1024 ? Math.round(t / (1024 * 1024)) + " Mb" : t > 1024 ? Math.round(t / 1024) + " Kb" : t + " bytes", D = ({
   id: t,
   files: n,
   onChange: c,

package/dist/components/form/{Form.js → form/Form.js}

@@ -3,9 +3,13 @@ import { useState as g, useEffect as q } from "react";
 import { deepForEach as y } from "react-children-utilities";
 import x, { isValidDate as H } from "../date/Date.js";
 import F from "../button/Button.js";
+import '../../../assets/Editable.css';import '../../../assets/Message.css';import '../../../assets/Modal.css';import '../../../assets/Panel.css';import '../../../assets/FormCol.css';import '../../../assets/FormRow.css';import '../../../assets/Form.css';/* empty css                        */
+/* empty css                        */
+import "../date/DatePicker.js";
 import R from "../time/Time.js";
 import { Files as C } from "../files/Files.js";
 import E from "../input/Input.js";
+import "../required/RequiredMark.js";
 import "../label/Label.js";
 import { RadioList as D } from "../radio/RadioList.js";
 import { Select as I } from "../select/Select.js";
@@ -13,19 +17,16 @@ import T from "../hidden/Hidden.js";
 import B from "../checkbox/Checkbox.js";
 import { CheckboxList as S } from "../checkbox/CheckboxList.js";
 import "../fieldset/Fieldset.js";
-import '../../assets/Editable.css';import '../../assets/Message.css';import '../../assets/Modal.css';import '../../assets/Panel.css';import '../../assets/FormCol.css';import '../../assets/FormRow.css';import '../../assets/Form.css';/* empty css                     */
-/* empty css                     */
-import "../date/DatePicker.js";
 import "react-transition-group";
 import "react-dom";
-import "../ui/popup/Popup.js";
-import "../ui/menu/Menu.js";
-import l from "../ui/block/Block.js";
-/* empty css                   */
-/* empty css                   */
-/* empty css                     */
+import "../../ui/popup/Popup.js";
+import "../../ui/menu/Menu.js";
+import l from "../../ui/block/Block.js";
+/* empty css                      */
 /* empty css                      */
-const le = ({
+/* empty css                        */
+/* empty css                         */
+const ue = ({
   info: u,
   error: d,
   success: k,
@@ -146,6 +147,6 @@ const le = ({
   ] });
 };
 export {
-  le as Form,
-  le as default
+  ue as Form,
+  ue as default
 };

package/dist/components/form/{FormCol.js → form/FormCol.js}

@@ -1,5 +1,5 @@
 import { jsx as m } from "react/jsx-runtime";
-import '../../assets/FormCol.css';/* empty css                     */
+import '../../../assets/FormCol.css';/* empty css                        */
 const t = ({ children: o }) => /* @__PURE__ */ m("div", { className: "FormCol", children: o });
 export {
   t as default

package/dist/components/form/{FormRow.js → form/FormRow.js}

@@ -1,5 +1,5 @@
 import { jsx as m } from "react/jsx-runtime";
-import '../../assets/FormRow.css';/* empty css                     */
+import '../../../assets/FormRow.css';/* empty css                        */
 const t = ({ children: o }) => /* @__PURE__ */ m("div", { className: "FormRow", children: o });
 export {
   t as default

package/dist/components/{input → form/input}/Input.js

@@ -1,6 +1,6 @@
 import { jsx as a, jsxs as b } from "react/jsx-runtime";
 import C from "../label/Label.js";
-import '../../assets/Input.css';const F = ({
+import '../../../assets/Input.css';const F = ({
   id: s,
   type: e = "text",
   value: t,

package/dist/components/{label → form/label}/Label.js

@@ -1,6 +1,6 @@
 import { jsxs as c, jsx as e } from "react/jsx-runtime";
 import f from "../required/RequiredMark.js";
-import '../../assets/Label.css';const h = ({
+import '../../../assets/Label.css';const h = ({
   label: a,
   top: l,
   bottom: r,

package/dist/components/form/radio/RadioLabel.js

@@ -0,0 +1,27 @@
+import { jsxs as s, jsx as a } from "react/jsx-runtime";
+import f from "../required/RequiredMark.js";
+import '../../../assets/RadioLabel.css';const v = ({
+  label: l,
+  bottom: r,
+  required: c = !1,
+  error: i = !1,
+  disabled: d = !1,
+  checked: o = !1,
+  children: n
+}) => /* @__PURE__ */ s("label", { className: (() => {
+  let e = "Radio";
+  return i && (e += " Error"), d && (e += " Disabled"), o && (e += " Checked"), e;
+})(), children: [
+  n,
+  /* @__PURE__ */ a("s", {}),
+  /* @__PURE__ */ s("div", { children: [
+    l && /* @__PURE__ */ s("div", { className: "Label", children: [
+      /* @__PURE__ */ a(f, { required: c }),
+      /* @__PURE__ */ a("span", { style: i ? { color: "var(--alxgrn-color-error)" } : void 0, children: l })
+    ] }),
+    r && /* @__PURE__ */ a("div", { className: "Bottom", children: r })
+  ] })
+] });
+export {
+  v as default
+};

package/dist/components/form/required/RequiredMark.js

@@ -0,0 +1,6 @@
+import { jsx as r } from "react/jsx-runtime";
+import s from "../../icons/Asterisk.js";
+import '../../../assets/RequiredMark.css';const i = ({ required: e = !1 }) => e ? /* @__PURE__ */ r("span", { className: "RequiredMark", children: /* @__PURE__ */ r(s, {}) }) : null;
+export {
+  i as default
+};

package/dist/components/{select → form/select}/Select.js

@@ -1,6 +1,6 @@
 import { jsx as e, jsxs as b } from "react/jsx-runtime";
 import m from "../label/Label.js";
-import '../../assets/Select.css';const y = ({
+import '../../../assets/Select.css';const y = ({
   id: d,
   value: o,
   onChange: c,

package/dist/components/{time → form/time}/Time.js

@@ -1,8 +1,8 @@
 import { jsxs as H, jsx as i } from "react/jsx-runtime";
 import { useRef as O, useState as n, useEffect as k } from "react";
 import L from "../label/Label.js";
-import { Menu as y } from "../ui/menu/Menu.js";
-import '../../assets/Time.css';const G = ({
+import { Menu as y } from "../../ui/menu/Menu.js";
+import '../../../assets/Time.css';const G = ({
   id: u,
   value: m,
   step: p = 1,

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

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

package/dist/components/icons/Asterisk.js

@@ -0,0 +1,23 @@
+import { jsxs as e, jsx as t } from "react/jsx-runtime";
+const r = () => /* @__PURE__ */ e(
+  "svg",
+  {
+    stroke: "currentColor",
+    fill: "none",
+    strokeWidth: "2",
+    viewBox: "0 0 24 24",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    height: "1em",
+    width: "1em",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: [
+      /* @__PURE__ */ t("path", { d: "M12 6v12" }),
+      /* @__PURE__ */ t("path", { d: "M17.196 9 6.804 15" }),
+      /* @__PURE__ */ t("path", { d: "m6.804 9 10.392 6" })
+    ]
+  }
+);
+export {
+  r as default
+};

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

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

package/dist/components/icons/ChevronLeft.js

@@ -0,0 +1,19 @@
+import { jsx as e } from "react/jsx-runtime";
+const t = () => /* @__PURE__ */ e(
+  "svg",
+  {
+    stroke: "currentColor",
+    fill: "none",
+    strokeWidth: "2",
+    viewBox: "0 0 24 24",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    height: "1em",
+    width: "1em",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: /* @__PURE__ */ e("path", { d: "m15 18-6-6 6-6" })
+  }
+);
+export {
+  t as default
+};

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

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

package/dist/components/icons/ChevronRight.js

@@ -0,0 +1,19 @@
+import { jsx as o } from "react/jsx-runtime";
+const t = () => /* @__PURE__ */ o(
+  "svg",
+  {
+    stroke: "currentColor",
+    fill: "none",
+    strokeWidth: "2",
+    viewBox: "0 0 24 24",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    height: "1em",
+    width: "1em",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: /* @__PURE__ */ o("path", { d: "m9 18 6-6-6-6" })
+  }
+);
+export {
+  t as default
+};

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

@@ -0,0 +1,4 @@
+import { default as Asterisk } from './Asterisk';
+import { default as ChevronLeft } from './ChevronLeft';
+import { default as ChevronRight } from './ChevronRight';
+export { Asterisk, ChevronLeft, ChevronRight, };

package/dist/components/icons/index.js

@@ -0,0 +1,8 @@
+import { default as t } from "./Asterisk.js";
+import { default as f } from "./ChevronLeft.js";
+import { default as s } from "./ChevronRight.js";
+export {
+  t as Asterisk,
+  f as ChevronLeft,
+  s as ChevronRight
+};

package/dist/components/ui/alert/Alert.d.ts

@@ -1,6 +1,6 @@
 import { default as React } from 'react';
 import { MessageIconType } from '../message/Message';
-import { ButtonType } from '../../button/Button';
+import { ButtonType } from '../../form/button/Button';
 export interface AlertProps {
     icon?: string | null;
     type?: MessageIconType;

package/dist/components/ui/alert/Alert.js

@@ -1,7 +1,7 @@
 import { jsxs as u, jsx as t } from "react/jsx-runtime";
 import a from "../message/Message.js";
 import n from "../modal/Modal.js";
-import { Form as b } from "../../form/Form.js";
+import { Form as b } from "../../form/form/Form.js";
 const c = "Ok", M = ({ icon: m, type: o, title: s, message: i, close: e, closeType: p, isOpen: f, onClose: r }) => /* @__PURE__ */ u(n, { isOpen: f, onClose: r, children: [
   /* @__PURE__ */ t(
     a,

package/dist/components/ui/confirm/Confirm.d.ts

@@ -1,6 +1,6 @@
 import { default as React } from 'react';
 import { MessageIconType } from '../message/Message';
-import { ButtonType } from '../../button/Button';
+import { ButtonType } from '../../form/button/Button';
 export interface ModalConfirmProps {
     icon?: string | null;
     type?: MessageIconType;

package/dist/components/ui/confirm/Confirm.js

@@ -1,7 +1,7 @@
 import { jsxs as a, jsx as r } from "react/jsx-runtime";
 import l from "../message/Message.js";
 import u from "../modal/Modal.js";
-import { Form as b } from "../../form/Form.js";
+import { Form as b } from "../../form/form/Form.js";
 const d = "Cancel", x = "Confirm", g = ({
   icon: m,
   type: t,

package/dist/components/ui/prompt/Prompt.d.ts

@@ -1,5 +1,5 @@
 import { default as React, FC } from 'react';
-import { ButtonType } from '../../button/Button';
+import { ButtonType } from '../../form/button/Button';
 export interface PromptProps {
     value?: string | null;
     title?: string | null;

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

@@ -1,8 +1,8 @@
 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 { Form as b } from "../../form/Form.js";
-import j from "../../input/Input.js";
+import { Form as b } from "../../form/form/Form.js";
+import j from "../../form/input/Input.js";
 const g = ({
   value: o,
   title: e,

package/dist/main.d.ts

@@ -1,19 +1,19 @@
-import { Form, FormData } from './components/form/Form';
-import { default as Date } from './components/date/Date';
-import { default as Time } from './components/time/Time';
-import { default as Files } from './components/files/Files';
-import { default as Input } from './components/input/Input';
-import { default as Label } from './components/label/Label';
-import { default as RadioList } from './components/radio/RadioList';
-import { default as Button } from './components/button/Button';
-import { default as Select } from './components/select/Select';
-import { default as Hidden } from './components/hidden/Hidden';
-import { default as Checkbox } from './components/checkbox/Checkbox';
-import { default as CheckboxList } from './components/checkbox/CheckboxList';
-import { default as Fieldset } from './components/fieldset/Fieldset';
-import { default as FormRow } from './components/form/FormRow';
-import { default as FormCol } from './components/form/FormCol';
-import { default as DatePicker } from './components/date/DatePicker';
+import { Form, FormData } from './components/form/form/Form';
+import { default as FormRow } from './components/form/form/FormRow';
+import { default as FormCol } from './components/form/form/FormCol';
+import { default as Date } from './components/form/date/Date';
+import { default as DatePicker } from './components/form/date/DatePicker';
+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 { 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';
+import { default as CheckboxList } from './components/form/checkbox/CheckboxList';
+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';

package/dist/main.js

@@ -1,19 +1,19 @@
-import { Form as r } from "./components/form/Form.js";
-import { default as a } from "./components/date/Date.js";
-import { default as m } from "./components/time/Time.js";
-import { Files as p } from "./components/files/Files.js";
-import { default as d } from "./components/input/Input.js";
-import { default as u } from "./components/label/Label.js";
-import { RadioList as n } from "./components/radio/RadioList.js";
-import { default as F } from "./components/button/Button.js";
-import { Select as b } from "./components/select/Select.js";
-import { default as C } from "./components/hidden/Hidden.js";
-import { default as M } from "./components/checkbox/Checkbox.js";
-import { CheckboxList as B } from "./components/checkbox/CheckboxList.js";
-import { default as R } from "./components/fieldset/Fieldset.js";
-import { default as w } from "./components/form/FormRow.js";
-import { default as E } from "./components/form/FormCol.js";
-import { default as I } from "./components/date/DatePicker.js";
+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";
@@ -28,21 +28,21 @@ import { default as oo } from "./components/ui/editable/Editable.js";
 export {
   W as Alert,
   q as Block,
-  F as Button,
-  M as Checkbox,
-  B as CheckboxList,
+  M as Button,
+  w as Checkbox,
+  E as CheckboxList,
   Y as Confirm,
-  a as Date,
-  I as DatePicker,
+  p as Date,
+  d as DatePicker,
   oo as Editable,
-  R as Fieldset,
-  p as Files,
+  I as Fieldset,
+  n as Files,
   r as Form,
-  E as FormCol,
-  w as FormRow,
-  C as Hidden,
-  d as Input,
-  u as Label,
+  m as FormCol,
+  a as FormRow,
+  R as Hidden,
+  F as Input,
+  b as Label,
   T as Menu,
   U as Message,
   G as Modal,
@@ -50,7 +50,7 @@ export {
   K as Popup,
   O as Portal,
   _ as Prompt,
-  n as RadioList,
-  b as Select,
-  m as Time
+  C as RadioList,
+  B as Select,
+  u as Time
 };

package/package.json

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

package/dist/components/date/DatePicker.js

@@ -1,58 +0,0 @@
-import { jsxs as u, jsx as c } from "react/jsx-runtime";
-import { useState as m, useEffect as y } from "react";
-import '../../assets/DatePicker.css';const q = ({ year: o, month: i, day: l, onChange: N }) => {
-  const v = L(), f = /* @__PURE__ */ new Date(), D = f.getDate(), d = f.getMonth(), h = f.getFullYear(), [a, p] = m(h), [r, g] = m(d), [Y, x] = m([]), [C, k] = m(0), [S, M] = m(0), [w, F] = m(0);
-  y(() => {
-    let e = o, t = i, n = l;
-    typeof e == "string" && (e = parseInt(e)), typeof t == "string" && (t = parseInt(t)), typeof n == "string" && (n = parseInt(n)), e !== void 0 && isNaN(e) && (e = h), t !== void 0 && isNaN(t) && (t = d), n !== void 0 && isNaN(n) && (n = D);
-    const s = new Date(e ?? h, t ? t - 1 : d, n ?? D);
-    p(s.getFullYear()), g(s.getMonth()), k(s.getDate()), M(s.getMonth()), F(s.getFullYear());
-  }, [o, i, l, h, d, D]), y(() => {
-    const e = E(r, a);
-    let t = new Date(a, r, 1).getDay();
-    t === 0 && (t = 7);
-    const n = [];
-    for (let s = 1; s < t; s++) n.push(0);
-    for (let s = 1; s <= e; s++) n.push(s);
-    x(n);
-  }, [r, a]);
-  const P = (e) => {
-    let t = r + e;
-    t < 0 && (t = 11), t > 11 && (t = 0), g(t);
-  }, I = (e) => {
-    e && (k(e), M(r), F(a), N && N({ day: e, month: r + 1, year: a }));
-  }, j = (e) => {
-    if (!e) return "Empty";
-    if (e === C && r === S && a === w) return "Selected";
-    if (e === D && r === d && a === h) return "Current";
-  };
-  return /* @__PURE__ */ u("div", { className: "FormDatePicker", children: [
-    /* @__PURE__ */ u("div", { className: "FormDatePickerMenu", children: [
-      /* @__PURE__ */ c("span", { className: "FormDatePickerPrev", onClick: () => P(-1), children: "«" }),
-      /* @__PURE__ */ c("span", { className: "FormDatePickerText", children: v[r] }),
-      /* @__PURE__ */ c("span", { className: "FormDatePickerNext", onClick: () => P(1), children: "»" })
-    ] }),
-    /* @__PURE__ */ c("div", { className: "FormDatePickerDays", children: Y.map((e, t) => /* @__PURE__ */ c(
-      "span",
-      {
-        className: j(e),
-        onClick: () => I(e),
-        children: e || ""
-      },
-      t
-    )) }),
-    /* @__PURE__ */ u("div", { className: "FormDatePickerMenu", children: [
-      /* @__PURE__ */ c("span", { className: "FormDatePickerPrev", onClick: () => p(a - 1), children: "«" }),
-      /* @__PURE__ */ c("span", { className: "FormDatePickerText", children: a }),
-      /* @__PURE__ */ c("span", { className: "FormDatePickerNext", onClick: () => p(a + 1), children: "»" })
-    ] })
-  ] });
-}, E = (o, i) => new Date(i, o + 1, 0).getDate(), L = () => {
-  let o = new Date(2e3, 0), i = [];
-  for (let l = 0; l < 12; l++)
-    i.push(o.toLocaleString("default", { month: "long" })), o.setMonth(l + 1);
-  return i;
-};
-export {
-  q as default
-};

package/dist/components/radio/RadioLabel.js

@@ -1,27 +0,0 @@
-import { jsxs as a, jsx as r } from "react/jsx-runtime";
-import f from "../required/RequiredMark.js";
-import '../../assets/RadioLabel.css';const v = ({
-  label: s,
-  bottom: l,
-  required: c = !1,
-  error: i = !1,
-  disabled: d = !1,
-  checked: o = !1,
-  children: n
-}) => /* @__PURE__ */ a("label", { className: (() => {
-  let e = "Radio";
-  return i && (e += " Error"), d && (e += " Disabled"), o && (e += " Checked"), e;
-})(), children: [
-  n,
-  /* @__PURE__ */ r("s", {}),
-  /* @__PURE__ */ a("div", { children: [
-    s && /* @__PURE__ */ a("div", { children: [
-      /* @__PURE__ */ r(f, { required: c }),
-      /* @__PURE__ */ r("span", { style: i ? { color: "var(--alxgrn-color-error)" } : void 0, children: s })
-    ] }),
-    l && /* @__PURE__ */ r("div", { className: "Bottom", children: l })
-  ] })
-] });
-export {
-  v as default
-};

package/dist/components/required/RequiredMark.js

@@ -1,5 +0,0 @@
-import { jsx as e } from "react/jsx-runtime";
-const l = ({ required: r = !1 }) => r ? /* @__PURE__ */ e("span", { className: "RequiredMark", style: { color: "var(--alxgrn-color-error)" }, children: "✱ " }) : null;
-export {
-  l as default
-};