@alxgrn/telefrag-ui 0.0.1

package/dist/components/radio/RadioList.js

@@ -0,0 +1,36 @@
+import { jsx as d } from "react/jsx-runtime";
+import { useState as m, useEffect as b } from "react";
+import { Radio as x } from "./Radio.js";
+import p from "../fieldset/Fieldset.js";
+const g = ({ label: n, value: r, onChange: i, required: o = !1, disabled: l = !1, options: a }) => {
+  const [t, s] = m(!1);
+  return b(() => {
+    s(!1), o && a.findIndex((f) => f.value === r) < 0 && s(!0);
+  }, [r, o, a]), /* @__PURE__ */ d(
+    p,
+    {
+      label: n,
+      error: t,
+      disabled: l,
+      required: o,
+      children: a.map((e, f) => /* @__PURE__ */ d(
+        x,
+        {
+          label: e.label,
+          value: e.value,
+          error: t,
+          bottom: e.bottom,
+          disabled: e.disabled || l,
+          required: e.required,
+          checked: e.value === r,
+          onChange: (c, u) => i(u, c)
+        },
+        f
+      ))
+    }
+  );
+};
+export {
+  g as RadioList,
+  g as default
+};

package/dist/components/required/RequiredMark.d.ts

@@ -0,0 +1,6 @@
+import { default as React } from 'react';
+export interface RequiredMarkProps {
+    required?: boolean | null;
+}
+declare const RequiredMark: React.FC<RequiredMarkProps>;
+export default RequiredMark;

package/dist/components/required/RequiredMark.js

@@ -0,0 +1,5 @@
+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
+};

package/dist/components/select/Select.d.ts

@@ -0,0 +1,20 @@
+import { default as React } from 'react';
+export interface SelectOption {
+    option: string;
+    value: string;
+    disabled?: boolean;
+}
+export interface SelectProps {
+    id: string;
+    value: string;
+    options: SelectOption[];
+    onChange: (b: string) => void;
+    label?: string | null;
+    top?: string | null;
+    bottom?: string | null;
+    placeholder?: string | null;
+    required?: boolean | null;
+    disabled?: boolean | null;
+}
+export declare const Select: React.FC<SelectProps>;
+export default Select;

package/dist/components/select/Select.js

@@ -0,0 +1,61 @@
+import { jsx as e, jsxs as b } from "react/jsx-runtime";
+import m from "../label/Label.js";
+import '../../assets/Select.css';const y = ({
+  id: d,
+  value: o,
+  onChange: c,
+  label: f,
+  placeholder: a,
+  top: u,
+  required: i = !1,
+  disabled: t = !1,
+  bottom: p,
+  options: s
+}) => {
+  const l = () => !!(i && s.findIndex((n) => n.value === o) < 0), g = () => {
+    if (l()) return {
+      borderColor: "var(--alxgrn-input-border-error)",
+      backgroundColor: "var(--alxgrn-input-bg-error)"
+    };
+  }, x = () => {
+    let r = "SelectWrap";
+    return t && (r += " Disabled"), l() && (r += " Error"), r;
+  };
+  return /* @__PURE__ */ e("div", { className: "FormItem", children: /* @__PURE__ */ e(
+    m,
+    {
+      top: u,
+      bottom: p,
+      label: f,
+      required: i,
+      disabled: t,
+      error: l(),
+      children: /* @__PURE__ */ e("div", { className: x(), children: /* @__PURE__ */ b(
+        "select",
+        {
+          id: d,
+          value: o,
+          onChange: (r) => c(r.target.value),
+          style: g(),
+          disabled: !!t,
+          children: [
+            a && /* @__PURE__ */ e("option", { children: a }),
+            s.map((r, n) => /* @__PURE__ */ e(
+              "option",
+              {
+                value: r.value,
+                disabled: r.disabled,
+                children: r.option
+              },
+              n
+            ))
+          ]
+        }
+      ) })
+    }
+  ) });
+};
+export {
+  y as Select,
+  y as default
+};

package/dist/components/time/Time.d.ts

@@ -0,0 +1,17 @@
+import { default as React, FC } from 'react';
+/**
+ * TODO: Добавить выбор секунд
+ */
+export interface TimeProps {
+    id: string;
+    value: string;
+    step?: number;
+    onChange?: (s: string) => void;
+    label?: string | null;
+    top?: string | null | React.ReactNode;
+    bottom?: string | null | React.ReactNode;
+    required?: boolean | null;
+    disabled?: boolean | null;
+}
+declare const Time: FC<TimeProps>;
+export default Time;

package/dist/components/time/Time.js

@@ -0,0 +1,112 @@
+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 = ({
+  id: u,
+  value: m,
+  step: p = 1,
+  onChange: t,
+  label: M,
+  top: b,
+  bottom: g,
+  required: d = !1,
+  disabled: o = !1
+}) => {
+  const x = O(null), $ = O(null), [l, N] = n(""), [a, C] = n(""), [I, j] = n([]), [w, z] = n([]), [E, c] = n(!1), [S, f] = n(!1);
+  k(() => {
+    let [e, r] = m.split(":");
+    e = parseInt(e), r = parseInt(r), (isNaN(e) || e < 0 || e > 23) && (e = 0), (isNaN(r) || r < 0 || r > 59) && (r = 0), e = `0${e}`.slice(-2), r = `0${r}`.slice(-2), N(e), C(r), t && t(`${e}:${r}`);
+  }, [m, t]), k(() => {
+    const e = [], r = [];
+    for (let s = 0; s < 24; s++)
+      e.push(`0${s}`.slice(-2));
+    for (let s = 0; s < 60; s += p)
+      r.push(`0${s}`.slice(-2));
+    j(e), z(r);
+  }, [p]);
+  const h = () => !!(d && (!l || !a)), v = () => {
+    if (h()) return {
+      caretColor: "var(--alxgrn-input-border-error)",
+      borderColor: "var(--alxgrn-input-border-error)",
+      backgroundColor: "var(--alxgrn-input-bg-error)"
+    };
+  }, T = (e) => {
+    c(!1), t && t(`${e.text ?? ""}:${a}`);
+  }, F = (e) => {
+    f(!1), t && t(`${l}:${e.text ?? ""}`);
+  };
+  return /* @__PURE__ */ H("div", { className: "FormItem", children: [
+    /* @__PURE__ */ i(
+      L,
+      {
+        top: b,
+        bottom: g,
+        label: M,
+        required: d,
+        disabled: o,
+        error: h(),
+        children: /* @__PURE__ */ H("div", { className: "Time", children: [
+          /* @__PURE__ */ i(
+            "input",
+            {
+              id: `${u}-hor`,
+              ref: x,
+              type: "text",
+              value: l,
+              style: v(),
+              disabled: !!o,
+              onClick: () => c(!0),
+              readOnly: !0
+            }
+          ),
+          /* @__PURE__ */ i("div", { children: ":" }),
+          /* @__PURE__ */ i(
+            "input",
+            {
+              id: `${u}-min`,
+              ref: $,
+              type: "text",
+              value: a,
+              style: v(),
+              disabled: !!o,
+              onClick: () => f(!0),
+              readOnly: !0
+            }
+          )
+        ] })
+      }
+    ),
+    /* @__PURE__ */ i(
+      y,
+      {
+        parent: x,
+        isOpen: E,
+        onClose: () => c(!1),
+        horizontal: "inner-left",
+        margin: "var(--alxgrn-unit-small)",
+        items: I.map((e) => ({ id: e, text: e })),
+        onClick: T,
+        maxHeight: "auto",
+        width: "parent"
+      }
+    ),
+    /* @__PURE__ */ i(
+      y,
+      {
+        parent: $,
+        isOpen: S,
+        onClose: () => f(!1),
+        horizontal: "inner-left",
+        margin: "var(--alxgrn-unit-small)",
+        items: w.map((e) => ({ id: e, text: e })),
+        onClick: F,
+        maxHeight: "auto",
+        width: "parent"
+      }
+    )
+  ] });
+};
+export {
+  G as default
+};

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

@@ -0,0 +1,15 @@
+import { default as React } from 'react';
+import { MessageIconType } from '../message/Message';
+import { ButtonType } from '../../button/Button';
+export interface AlertProps {
+    icon?: string | null;
+    type?: MessageIconType;
+    title?: string | null;
+    message: string | React.ReactNode;
+    close?: string;
+    closeType?: ButtonType;
+    isOpen: boolean;
+    onClose: () => void;
+}
+declare const Alert: React.FC<AlertProps>;
+export default Alert;

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

@@ -0,0 +1,26 @@
+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";
+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,
+    {
+      icon: m,
+      title: s,
+      message: i,
+      type: o
+    }
+  ),
+  /* @__PURE__ */ t(
+    b,
+    {
+      submit: e ?? c,
+      submitType: p,
+      onSubmit: r
+    }
+  )
+] });
+export {
+  M as default
+};

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

@@ -0,0 +1,18 @@
+import { default as React } from 'react';
+import { MessageIconType } from '../message/Message';
+import { ButtonType } from '../../button/Button';
+export interface ModalConfirmProps {
+    icon?: string | null;
+    type?: MessageIconType;
+    title?: string | null;
+    message: string | React.ReactNode;
+    cancel?: string;
+    confirm?: string;
+    cancelType?: ButtonType;
+    confirmType?: ButtonType;
+    isOpen: boolean;
+    onCancel: () => void;
+    onConfirm: () => void;
+}
+declare const Confirm: React.FC<ModalConfirmProps>;
+export default Confirm;

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

@@ -0,0 +1,41 @@
+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";
+const d = "Cancel", x = "Confirm", g = ({
+  icon: m,
+  type: t,
+  title: s,
+  message: i,
+  cancel: e,
+  confirm: n,
+  confirmType: f,
+  cancelType: c,
+  isOpen: p,
+  onCancel: o,
+  onConfirm: C
+}) => /* @__PURE__ */ a(u, { isOpen: p, onClose: o, children: [
+  /* @__PURE__ */ r(
+    l,
+    {
+      icon: m,
+      title: s,
+      message: i,
+      type: t
+    }
+  ),
+  /* @__PURE__ */ r(
+    b,
+    {
+      cancel: e ?? d,
+      submit: n ?? x,
+      cancelType: c,
+      submitType: f,
+      onCancel: o,
+      onSubmit: C
+    }
+  )
+] });
+export {
+  g as default
+};

package/dist/components/ui/editable/Editable.d.ts

@@ -0,0 +1,12 @@
+import { CSSProperties, FC } from 'react';
+type Props = {
+    value: string;
+    empty?: boolean;
+    onblur?: 'Enter' | 'Esc';
+    newline?: boolean;
+    placeholder?: string;
+    onChange: (value: string) => void;
+    style?: CSSProperties;
+};
+declare const Editable: FC<Props>;
+export default Editable;

package/dist/components/ui/editable/Editable.js

@@ -0,0 +1,53 @@
+import { jsx as f } from "react/jsx-runtime";
+import { useRef as I, useState as u, useEffect as g } from "react";
+import '../../../assets/Editable.css';/* empty css                         */
+const V = ({ value: t, empty: d, newline: a, onblur: E = "Enter", placeholder: c, onChange: h, style: m }) => {
+  const r = I(null), [n, s] = u(!1), [i, o] = u(a ? t : t.replace(/[\n\r]+/g, " "));
+  g(() => {
+    const e = (x) => {
+      x.key === "Escape" && (s(!1), o(t));
+    };
+    return n && document.body.addEventListener("keydown", e), () => {
+      n && document.body.removeEventListener("keydown", e);
+    };
+  }, [n, t]), g(() => {
+    !n || !r.current || (r.current.style.height = "0px", r.current.style.height = r.current.scrollHeight + "px");
+  }, [n, i]);
+  const l = () => {
+    var e = i.trim();
+    !e && !d && (e = t), s(!1), h(e);
+  }, p = (e) => {
+    e.key === "Enter" && e.shiftKey === !1 && (e.preventDefault(), l());
+  }, y = (e) => {
+    o(a ? e.target.value : e.target.value.replace(/[\n\r]+/g, " "));
+  }, b = () => {
+    E === "Enter" ? l() : (o(a ? t : t.replace(/[\n\r]+/g, " ")), s(!1));
+  }, k = (e) => {
+    o(t), e.target.setSelectionRange(e.target.value.length, e.target.value.length);
+  };
+  return n ? /* @__PURE__ */ f(
+    "textarea",
+    {
+      ref: r,
+      className: "Editable",
+      value: i,
+      onKeyDown: p,
+      onChange: y,
+      onBlur: b,
+      onFocus: k,
+      placeholder: c,
+      style: m,
+      autoFocus: !0
+    }
+  ) : /* @__PURE__ */ f(
+    "div",
+    {
+      className: t ? "Editable" : c ? "Editable Placeholder" : "Editable",
+      onClick: () => s(!0),
+      children: t || (c ?? "")
+    }
+  );
+};
+export {
+  V as default
+};

package/dist/components/ui/info/Info.js

@@ -0,0 +1,8 @@
+import { jsxs as l, jsx as o } from "react/jsx-runtime";
+const s = ({ type: n, header: a, children: i }) => /* @__PURE__ */ l("div", { className: n ? `alxgrn-info alxgrn-info-${n}` : "alxgrn-info", children: [
+  a && /* @__PURE__ */ o("div", { className: "alxgrn-info-header", children: a }),
+  i
+] });
+export {
+  s as default
+};

package/dist/components/ui/menu/Menu.d.ts

@@ -0,0 +1,23 @@
+import { default as React } from 'react';
+import { PopupProps } from '../popup/Popup';
+export type MenuSeparator = {
+    id?: never;
+    separator: true;
+    text?: never;
+    icon?: never;
+    disabled?: never;
+};
+export type MenuAlternative = {
+    id: number | string;
+    separator?: never;
+    text?: string;
+    icon?: React.ReactNode;
+    disabled?: boolean | null;
+};
+export type MenuItem = MenuAlternative | MenuSeparator;
+interface MenuProps extends PopupProps {
+    items: MenuItem[];
+    onClick: (item: MenuItem) => void;
+}
+export declare const Menu: React.FC<MenuProps>;
+export default Menu;

package/dist/components/ui/menu/Menu.js

@@ -0,0 +1,23 @@
+import { jsx as r, jsxs as p, Fragment as d } from "react/jsx-runtime";
+import { Popup as i } from "../popup/Popup.js";
+import '../../../assets/Menu.css';const u = (s) => {
+  const { items: o, onClick: n, ...e } = s;
+  return /* @__PURE__ */ r(i, { ...e, children: /* @__PURE__ */ r("div", { className: "Menu", children: /* @__PURE__ */ r("ul", { children: o.map((a, l) => /* @__PURE__ */ r(
+    "li",
+    {
+      className: `${a.separator ? "Separator" : ""} ${a.disabled ? "Disabled" : ""}`,
+      onClick: (c) => {
+        c.stopPropagation(), !a.disabled && !a.separator && n(a);
+      },
+      children: !a.separator && /* @__PURE__ */ p(d, { children: [
+        a.icon && /* @__PURE__ */ r("span", { className: "Icon", children: a.icon }),
+        a.text && /* @__PURE__ */ r("span", { className: "Text", children: a.text })
+      ] })
+    },
+    l
+  )) }) }) });
+};
+export {
+  u as Menu,
+  u as default
+};

package/dist/components/ui/message/Message.d.ts

@@ -0,0 +1,10 @@
+import { default as React } from 'react';
+export type MessageIconType = 'square' | 'round';
+type Props = {
+    icon?: string | null;
+    type?: MessageIconType;
+    title?: string | null;
+    message: string | React.ReactNode;
+};
+declare const Message: React.FC<Props>;
+export default Message;

package/dist/components/ui/message/Message.js

@@ -0,0 +1,19 @@
+import { jsxs as r, jsx as s } from "react/jsx-runtime";
+import '../../../assets/Message.css';/* empty css                        */
+const m = ({ icon: e, type: c = "square", title: a, message: d }) => /* @__PURE__ */ r("div", { className: "Message", children: [
+  e && /* @__PURE__ */ s(
+    "img",
+    {
+      alt: "",
+      src: e,
+      className: `MessageIcon ${c}`
+    }
+  ),
+  /* @__PURE__ */ r("div", { className: "MessageText", children: [
+    a && /* @__PURE__ */ s("h1", { children: a }),
+    /* @__PURE__ */ s("div", { children: d })
+  ] })
+] });
+export {
+  m as default
+};

package/dist/components/ui/modal/Modal.d.ts

@@ -0,0 +1,8 @@
+import { FC, PropsWithChildren } from 'react';
+export type ModalProps = {
+    isOpen: boolean;
+    onClose: () => void;
+    close?: boolean;
+};
+declare const Modal: FC<PropsWithChildren<ModalProps>>;
+export default Modal;

package/dist/components/ui/modal/Modal.js

@@ -0,0 +1,39 @@
+import { jsx as e, jsxs as d } from "react/jsx-runtime";
+import { useRef as c, useEffect as m } from "react";
+import { CSSTransition as f } from "react-transition-group";
+import u from "../portal/Portal.js";
+import '../../../assets/Modal.css';/* empty css                      */
+const p = 100, h = ({ children: s, isOpen: t, onClose: n, close: i = !0 }) => {
+  const r = c(null);
+  m(() => {
+    const o = (l) => {
+      l.key === "Escape" && n();
+    };
+    return t && document.body.addEventListener("keydown", o), () => {
+      t && document.body.removeEventListener("keydown", o);
+    };
+  }, [t, n]);
+  const a = (o) => {
+    o.stopPropagation(), n();
+  };
+  return /* @__PURE__ */ e(u, { id: "alxgrn-modal", fixBody: !0, children: /* @__PURE__ */ e(
+    f,
+    {
+      in: t,
+      timeout: p,
+      unmountOnExit: !0,
+      classNames: "Modal",
+      nodeRef: r,
+      children: /* @__PURE__ */ e("div", { className: "Modal", ref: r, onClick: a, children: /* @__PURE__ */ d("div", { className: "ModalInner", onClick: (o) => o.stopPropagation(), children: [
+        i && /* @__PURE__ */ d("div", { className: "ModalClose", onClick: a, children: [
+          /* @__PURE__ */ e("span", {}),
+          /* @__PURE__ */ e("span", {})
+        ] }),
+        /* @__PURE__ */ e("div", { className: "ModalContent", children: s })
+      ] }) })
+    }
+  ) });
+};
+export {
+  h as default
+};

package/dist/components/ui/popup/Popup.d.ts

@@ -0,0 +1,14 @@
+import { default as React, FC, PropsWithChildren } from 'react';
+export interface PopupProps {
+    parent: React.RefObject<HTMLElement>;
+    isOpen: boolean;
+    onClose: () => void;
+    margin?: string;
+    vertical?: 'auto' | 'top' | 'bottom' | 'inner-top' | 'inner-bottom';
+    horizontal?: 'auto' | 'left' | 'right' | 'inner-left' | 'inner-right';
+    maxHeight?: 'auto' | 'none';
+    width?: 'auto' | 'parent';
+    position?: 'absolute' | 'fixed';
+}
+export declare const Popup: FC<PropsWithChildren<PopupProps>>;
+export default Popup;