@alxgrn/telefrag-ui 0.0.1

package/dist/components/date/DatePicker.js

@@ -0,0 +1,58 @@
+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/fieldset/Fieldset.d.ts

@@ -0,0 +1,11 @@
+import { default as React, FC, PropsWithChildren } from 'react';
+export type FieldsetProps = {
+    top?: string | null | React.ReactNode;
+    bottom?: string | null | React.ReactNode;
+    label?: string | null;
+    error?: boolean | null;
+    disabled?: boolean | null;
+    required?: boolean | null;
+};
+declare const Fieldset: FC<PropsWithChildren<FieldsetProps>>;
+export default Fieldset;

package/dist/components/fieldset/Fieldset.js

@@ -0,0 +1,25 @@
+import { jsxs as i, jsx as e } from "react/jsx-runtime";
+import t from "../required/RequiredMark.js";
+import '../../assets/Fieldset.css';const h = ({
+  label: a,
+  top: r,
+  bottom: l,
+  required: c = !1,
+  error: d = !1,
+  disabled: n = !1,
+  children: m
+}) => /* @__PURE__ */ i("div", { className: (() => {
+  let s = "Fieldset";
+  return d && (s += " Error"), n && (s += " Disabled"), s;
+})(), children: [
+  a && /* @__PURE__ */ i("div", { className: "Label", children: [
+    /* @__PURE__ */ e(t, { required: c }),
+    /* @__PURE__ */ e("span", { children: a })
+  ] }),
+  r && /* @__PURE__ */ e("div", { className: "Top", children: r }),
+  /* @__PURE__ */ e("div", { className: "Inner", children: m }),
+  l && /* @__PURE__ */ e("div", { className: "Bottom", children: l })
+] });
+export {
+  h as default
+};

package/dist/components/files/Files.d.ts

@@ -0,0 +1,17 @@
+import { default as React, FC } from 'react';
+export interface FilesProps {
+    id: string;
+    files: File[];
+    onChange: (files: File[]) => void;
+    label?: string | null;
+    text: string | null | React.ReactNode;
+    top?: string | null | React.ReactNode;
+    bottom?: string | null | React.ReactNode;
+    accept?: string | null;
+    multiple?: boolean | null;
+    required?: boolean | null;
+    disabled?: boolean | null;
+}
+export declare const bytes2string: (bytes: number) => string;
+export declare const Files: FC<FilesProps>;
+export default Files;

package/dist/components/files/Files.js

@@ -0,0 +1,71 @@
+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 = ({
+  id: t,
+  files: n,
+  onChange: c,
+  label: m,
+  text: p,
+  top: d,
+  bottom: g,
+  accept: F,
+  multiple: v = !1,
+  required: o = !1,
+  disabled: s = !1
+}) => {
+  const [f, u] = L(!1);
+  M(() => {
+    o && n.length < 1 ? u(!0) : u(!1);
+  }, [n, o]);
+  const x = () => {
+    const e = n.reduce((r, a) => r += a.size, 0);
+    return e ? h(e) : "";
+  }, z = (e) => {
+    if (s) return;
+    const r = [...n];
+    r.splice(e, 1), c(r);
+  }, E = (e) => {
+    const r = e.target, a = Array.from(r.files);
+    c(a);
+  };
+  return /* @__PURE__ */ i(
+    $,
+    {
+      label: m,
+      error: f,
+      disabled: s,
+      required: o,
+      top: d,
+      bottom: g,
+      children: [
+        n.length > 0 && /* @__PURE__ */ l("ul", { className: `FileList ${s ? "Disabled" : ""}`, children: n.map((e, r) => /* @__PURE__ */ l("li", { onClick: () => z(r), children: /* @__PURE__ */ i("div", { children: [
+          /* @__PURE__ */ l("span", { children: e.name }),
+          /* @__PURE__ */ l("span", { children: h(e.size) })
+        ] }) }, r)) }),
+        /* @__PURE__ */ i("div", { className: `FileLabel ${s ? "Disabled" : ""} ${f ? "Error" : ""}`, children: [
+          /* @__PURE__ */ i("label", { children: [
+            p,
+            /* @__PURE__ */ l(
+              "input",
+              {
+                id: t,
+                type: "file",
+                accept: F ?? void 0,
+                onChange: (e) => E(e),
+                multiple: v ?? void 0,
+                disabled: !!s
+              }
+            )
+          ] }),
+          /* @__PURE__ */ l("span", { children: x() })
+        ] })
+      ]
+    }
+  );
+};
+export {
+  D as Files,
+  h as bytes2string,
+  D as default
+};

package/dist/components/form/Form.d.ts

@@ -0,0 +1,19 @@
+import { default as React, PropsWithChildren } from 'react';
+import { ButtonType } from '../button/Button';
+export type FormProps = {
+    info?: string | null;
+    error?: string | null;
+    success?: string | null;
+    submit?: string | null;
+    cancel?: string | null;
+    submitType?: ButtonType;
+    cancelType?: ButtonType;
+    wide?: boolean | null;
+    onSubmit?: (d: FormData) => void;
+    onCancel?: () => void;
+};
+export type FormData = {
+    [i: string]: string | number | boolean | File[] | any[];
+};
+export declare const Form: React.FC<PropsWithChildren<FormProps>>;
+export default Form;

package/dist/components/form/Form.js

@@ -0,0 +1,149 @@
+import { jsxs as b, jsx as c } from "react/jsx-runtime";
+import { useState as L, useEffect as g } from "react";
+import { deepForEach as h } from "react-children-utilities";
+import F, { isValidDate as q } from "../date/Date.js";
+import y from "../button/Button.js";
+import H from "../time/Time.js";
+import { Files as x } from "../files/Files.js";
+import C from "../input/Input.js";
+import "../label/Label.js";
+import { RadioList as E } from "../radio/RadioList.js";
+import { Select as I } from "../select/Select.js";
+import R from "../hidden/Hidden.js";
+import N from "../checkbox/Checkbox.js";
+import { CheckboxList as D } from "../checkbox/CheckboxList.js";
+import "../fieldset/Fieldset.js";
+import '../../assets/Editable.css';import '../../assets/Message.css';import '../../assets/Modal.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";
+/* empty css                   */
+/* empty css                     */
+/* empty css                      */
+const pe = ({
+  info: l,
+  error: u,
+  success: d,
+  submit: n,
+  cancel: f,
+  submitType: S = "Accent",
+  cancelType: j = "Error",
+  wide: w,
+  onSubmit: k,
+  onCancel: A,
+  children: p
+}) => {
+  const [B, i] = L(!1);
+  return g(() => {
+    n && (i(!1), h(p, (t) => {
+      if (!t) return;
+      const r = t;
+      if (typeof r.type != "function") return;
+      const e = r.props;
+      if (e.required)
+        switch (r.type) {
+          case C:
+            e.value.trim() || i(!0);
+            break;
+          case N:
+            e.checked || i(!0);
+            break;
+          case I:
+            {
+              const o = e.value;
+              e.options.findIndex((m) => m.value === o) < 0 && i(!0);
+            }
+            break;
+          case E:
+            {
+              const o = e.value;
+              e.options.findIndex((m) => m.value === o) < 0 && i(!0);
+            }
+            break;
+          case x:
+            e.files.length < 1 && i(!0);
+            break;
+          case F:
+            q(e.value.trim()) || i(!0);
+            break;
+          case D:
+            e.options.findIndex((a) => a.checked === !0) < 0 && i(!0);
+            break;
+        }
+    }));
+  }, [p, n]), /* @__PURE__ */ b("div", { className: w ? "Form FormWide" : "Form", children: [
+    d && /* @__PURE__ */ c("div", { className: "FormSuccess", children: d }),
+    u && /* @__PURE__ */ c("div", { className: "FormError", children: u }),
+    l && /* @__PURE__ */ c("div", { className: "FormInfo", children: l }),
+    p,
+    (n || f) && /* @__PURE__ */ b("div", { className: "FormSubmitButtons", children: [
+      n && /* @__PURE__ */ c(
+        y,
+        {
+          type: S,
+          label: n,
+          disabled: B,
+          onClick: () => {
+            if (!k) return;
+            const t = {}, r = (e, s) => {
+              if (!t[e]) {
+                t[e] = s;
+                return;
+              }
+              t[e] instanceof Array ? t[e].push(s) : t[e] = [t[e], s];
+            };
+            h(p, (e) => {
+              if (!e) return;
+              const s = e;
+              if (typeof s.type != "function") return;
+              const o = s.props;
+              switch (s.type) {
+                case F:
+                case H:
+                case C:
+                  r(o.id, o.value.trim());
+                  break;
+                case N:
+                  r(o.id, o.checked ? o.value : void 0);
+                  break;
+                case I:
+                case E:
+                  r(o.id, o.value);
+                  break;
+                case x:
+                  r(o.id, o.files);
+                  break;
+                case R:
+                  r(o.id, o.value);
+                  break;
+                case D:
+                  {
+                    const a = [];
+                    o.options.forEach((v) => {
+                      v.checked && a.push(v.value);
+                    }), r(o.id, a);
+                  }
+                  break;
+              }
+            }), k(t);
+          }
+        }
+      ),
+      f && /* @__PURE__ */ c(
+        y,
+        {
+          type: j,
+          label: f,
+          onClick: A
+        }
+      )
+    ] })
+  ] });
+};
+export {
+  pe as Form,
+  pe as default
+};

package/dist/components/form/FormCol.d.ts

@@ -0,0 +1,3 @@
+import { default as React, PropsWithChildren } from 'react';
+declare const FormCol: React.FC<PropsWithChildren>;
+export default FormCol;

package/dist/components/form/FormCol.js

@@ -0,0 +1,6 @@
+import { jsx as m } from "react/jsx-runtime";
+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.d.ts

@@ -0,0 +1,3 @@
+import { default as React, PropsWithChildren } from 'react';
+declare const FormRow: React.FC<PropsWithChildren>;
+export default FormRow;

package/dist/components/form/FormRow.js

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

package/dist/components/hidden/Hidden.d.ts

@@ -0,0 +1,7 @@
+import { default as React } from 'react';
+export interface HiddenProps {
+    id: string;
+    value: string | number;
+}
+declare const Hidden: React.FC<HiddenProps>;
+export default Hidden;

package/dist/components/hidden/Hidden.js

@@ -0,0 +1,12 @@
+import { jsx as e } from "react/jsx-runtime";
+const n = ({ id: t, value: d }) => /* @__PURE__ */ e(
+  "input",
+  {
+    id: t,
+    type: "hidden",
+    value: d
+  }
+);
+export {
+  n as default
+};

package/dist/components/input/Input.d.ts

@@ -0,0 +1,18 @@
+import { default as React, FC } from 'react';
+export type InputProps = {
+    id: string;
+    type?: 'text' | 'password' | 'textarea';
+    value: string;
+    onChange: (s: string) => void;
+    label?: string | null;
+    placeholder?: string | null;
+    top?: string | null | React.ReactNode;
+    bottom?: string | null | React.ReactNode;
+    required?: boolean | null;
+    disabled?: boolean | null;
+    limit?: number | null;
+    rows?: number | null;
+    autoFocus?: boolean;
+};
+declare const Input: FC<InputProps>;
+export default Input;

package/dist/components/input/Input.js

@@ -0,0 +1,69 @@
+import { jsx as a, jsxs as p } from "react/jsx-runtime";
+import C from "../label/Label.js";
+import '../../assets/Input.css';const F = ({
+  id: s,
+  type: e = "text",
+  value: t,
+  onChange: x,
+  label: b,
+  placeholder: n,
+  rows: l = 5,
+  top: h,
+  bottom: m,
+  autoFocus: u = !1,
+  required: f = !1,
+  disabled: o = !1,
+  limit: g
+}) => {
+  const i = () => !!(f && !t.trim().length), c = () => {
+    if (i()) return {
+      caretColor: "var(--alxgrn-input-border-error)",
+      borderColor: "var(--alxgrn-input-border-error)",
+      backgroundColor: "var(--alxgrn-input-bg-error)"
+    };
+  }, d = (r) => {
+    g && (r = r.substring(0, g)), x(r);
+  };
+  return /* @__PURE__ */ a("div", { className: "FormItem", children: /* @__PURE__ */ p(
+    C,
+    {
+      top: h,
+      bottom: m,
+      label: b,
+      required: f,
+      disabled: o,
+      error: i(),
+      children: [
+        (e === "text" || e === "password") && /* @__PURE__ */ a(
+          "input",
+          {
+            id: s,
+            type: e,
+            value: t,
+            onChange: (r) => d(r.target.value),
+            placeholder: n ?? void 0,
+            style: c(),
+            disabled: !!o,
+            autoFocus: !!u
+          }
+        ),
+        e === "textarea" && /* @__PURE__ */ a(
+          "textarea",
+          {
+            id: s,
+            rows: l || 5,
+            value: t,
+            onChange: (r) => d(r.target.value),
+            placeholder: n ?? void 0,
+            style: c(),
+            disabled: !!o,
+            autoFocus: !!u
+          }
+        )
+      ]
+    }
+  ) });
+};
+export {
+  F as default
+};

package/dist/components/label/Label.d.ts

@@ -0,0 +1,11 @@
+import { default as React, FC, PropsWithChildren } from 'react';
+export type LabelProps = {
+    top?: string | null | React.ReactNode;
+    bottom?: string | null | React.ReactNode;
+    label?: string | null;
+    error?: boolean | null;
+    disabled?: boolean | null;
+    required?: boolean | null;
+};
+declare const Label: FC<PropsWithChildren<LabelProps>>;
+export default Label;

package/dist/components/label/Label.js

@@ -0,0 +1,25 @@
+import { jsxs as c, jsx as e } from "react/jsx-runtime";
+import f from "../required/RequiredMark.js";
+import '../../assets/Label.css';const h = ({
+  label: a,
+  top: l,
+  bottom: r,
+  required: i = !1,
+  error: d = !1,
+  disabled: m = !1,
+  children: n
+}) => /* @__PURE__ */ c("label", { className: (() => {
+  let s = "";
+  return d && (s += " Error"), m && (s += " Disabled"), s;
+})(), children: [
+  a && /* @__PURE__ */ c("div", { className: "Label", children: [
+    /* @__PURE__ */ e(f, { required: i }),
+    /* @__PURE__ */ e("span", { children: a })
+  ] }),
+  l && /* @__PURE__ */ e("div", { className: "Top", children: l }),
+  n,
+  r && /* @__PURE__ */ e("div", { className: "Bottom", children: r })
+] });
+export {
+  h as default
+};

package/dist/components/radio/Radio.d.ts

@@ -0,0 +1,22 @@
+import { default as React } from 'react';
+/**
+ * Одиночный radio-элемент не имеет особого смысла, но он
+ * используется как базовый и для checkbox. Также на его основе
+ * работает списочный элемент RadioList.
+ * Суть работы состоит в следующем: элементу передается значение
+ * value которое возвращается в функции onChange вместе со статусом
+ * отметки элемента.
+ */
+export interface RadioProps {
+    type?: 'radio' | 'checkbox';
+    value: string | number;
+    error?: boolean;
+    onChange: (checked: boolean, value: string | number) => void;
+    label?: string | null;
+    bottom?: string | null;
+    required?: boolean | null;
+    disabled?: boolean | null;
+    checked?: boolean | null;
+}
+export declare const Radio: React.FC<RadioProps>;
+export default Radio;

package/dist/components/radio/Radio.js

@@ -0,0 +1,37 @@
+import { jsx as t } from "react/jsx-runtime";
+import n from "./RadioLabel.js";
+const p = ({
+  type: l = "radio",
+  value: s,
+  onChange: f,
+  label: o,
+  bottom: u,
+  error: d = !1,
+  required: e = !1,
+  disabled: r = !1,
+  checked: a = !1
+}) => /* @__PURE__ */ t(
+  n,
+  {
+    label: o,
+    bottom: u,
+    required: !!e,
+    error: d || e && !a,
+    disabled: !!r,
+    checked: !!a,
+    children: /* @__PURE__ */ t(
+      "input",
+      {
+        type: l,
+        onChange: (i) => f(i.target.checked, s),
+        checked: !!a,
+        disabled: !!r,
+        required: !!e
+      }
+    )
+  }
+);
+export {
+  p as Radio,
+  p as default
+};

package/dist/components/radio/RadioLabel.d.ts

@@ -0,0 +1,11 @@
+import { default as React, PropsWithChildren } from 'react';
+export interface RadioLabelProps {
+    label?: string | null;
+    bottom?: string | null;
+    error?: boolean | null;
+    disabled?: boolean | null;
+    required?: boolean | null;
+    checked?: boolean | null;
+}
+declare const RadioLabel: React.FC<PropsWithChildren<RadioLabelProps>>;
+export default RadioLabel;

package/dist/components/radio/RadioLabel.js

@@ -0,0 +1,27 @@
+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/radio/RadioList.d.ts

@@ -0,0 +1,23 @@
+import { default as React } from 'react';
+/**
+ * Список из Radio-элементов.
+ * По сути это аналог Select, но представленный в виде Radio.
+ */
+export type RadioListValue = string | number;
+export interface RadioListOption {
+    label: string;
+    value: RadioListValue;
+    bottom?: string | null;
+    disabled?: boolean | null;
+    required?: boolean | null;
+}
+export interface RadioListProps {
+    label?: string | null;
+    value: RadioListValue;
+    options: RadioListOption[];
+    onChange: (value: RadioListValue, checked?: boolean) => void;
+    disabled?: boolean | null;
+    required?: boolean | null;
+}
+export declare const RadioList: React.FC<RadioListProps>;
+export default RadioList;