@prokodo/ui 0.0.9 → 0.0.11

package/dist/components/carousel/Carousel.js

@@ -0,0 +1,232 @@
+import { j as i } from "../../_virtual/jsx-runtime.js";
+import { useRef as x, useState as f, Children as ae, useEffect as P, useCallback as b, useImperativeHandle as le } from "react";
+import { create as ne } from "../../helpers/bem.js";
+import { Button as J } from "../button/Button.js";
+import { Lottie as ce } from "../lottie/Lottie.js";
+import de from "./Carousel.module.scss.js";
+import { NEXT as p, PREV as R, handleTouchStart as oe, handleTouchMove as fe, handleTouchEnd as me, handleMouseUp as ue, handleMouseDown as xe } from "./Carousel.services.js";
+const l = ne(de, "Carousel"), be = ({
+  ref: L,
+  autoplay: m,
+  enableControl: X,
+  itemsToShow: s = 1,
+  className: O,
+  classNameControls: Q,
+  classNameButtons: y,
+  classNameWrapper: W,
+  classNameItem: Y,
+  classNameDots: V,
+  classNameDot: h,
+  onKeyDown: j,
+  onMouseEnter: v,
+  onMouseLeave: I,
+  onTouchEnd: N,
+  onTouchMove: C,
+  onTouchStart: g,
+  onMouseDown: k,
+  onMouseUp: A,
+  children: Z,
+  ...K
+}) => {
+  const B = x(null), E = x(0), $ = x(0), z = x(0), U = x(0), [w, D] = f(!0), [c, d] = f(s), [M, H] = f(!1), [q, F] = f(!!m), [u, n] = f(!1), o = ae.toArray(Z), [G, T] = f([]), r = o.length;
+  P(() => {
+    const e = [
+      ...o.slice(-s),
+      ...o,
+      ...o.slice(0, s)
+    ];
+    e !== G && (T(e), d(s));
+  }, [s]), P(() => {
+    const e = setTimeout(() => {
+      D(!1);
+    }, 1500);
+    return () => clearTimeout(e);
+  }, []);
+  const a = b(
+    (e) => {
+      if (u) return;
+      n(!0);
+      let t = c;
+      e === p ? t = c + 1 : e === R && (t = c - 1), d(t), setTimeout(() => {
+        t >= r + s ? (d(s), n(!1)) : (t < s && d(r), n(!1));
+      }, 300);
+    },
+    [u, c, s, r]
+  );
+  P(() => {
+    if (typeof m != "number" || m <= 0) return;
+    let e;
+    return q && (e = setInterval(() => {
+      a(p);
+    }, m)), () => {
+      clearInterval(e);
+    };
+  }, [a, q, m]);
+  const _ = b(
+    (e) => {
+      if (u) return;
+      n(!0);
+      const t = e + s;
+      d(t), setTimeout(() => {
+        t >= r + s ? (d(t - r), n(!1)) : (t < s && d(r + t), n(!1));
+      }, 300);
+    },
+    [u, s, r]
+  );
+  le(L, () => ({
+    slidePrev: () => a(R),
+    slideNext: () => a(p),
+    carouselContainer: B.current
+  }));
+  const S = b(
+    (e) => {
+      v == null || v(e), F(!1);
+    },
+    [v]
+  ), ee = b(
+    (e) => {
+      I == null || I(e), F(!0);
+    },
+    [I]
+  ), te = () => `translateX(${-c * (100 / s)}%)`, se = b(
+    () => r > 0 && /* @__PURE__ */ i.jsx("span", { className: l("dots", void 0, V), children: o.map((e, t) => {
+      const re = t === (c - s + r) % r;
+      return /* @__PURE__ */ i.jsx(
+        "button",
+        {
+          tabIndex: 0,
+          className: l(
+            "dots__dot",
+            {
+              "is-active": re
+            },
+            h
+          ),
+          onClick: () => _(t),
+          onKeyDown: (ie) => ie.key === "Enter" && _(t)
+        },
+        `carousel-dot-${t}`
+      );
+    }) }),
+    [
+      r,
+      o,
+      c,
+      V,
+      h,
+      s,
+      _
+    ]
+  );
+  return r === 0 ? null : /* @__PURE__ */ i.jsxs(
+    "div",
+    {
+      "aria-label": "Carousel",
+      role: "button",
+      tabIndex: 0,
+      ...K,
+      ref: B,
+      className: l(
+        void 0,
+        {
+          "is-active": M
+        },
+        O
+      ),
+      onMouseEnter: S,
+      onMouseLeave: ee,
+      onKeyDown: (e) => {
+        switch (j == null || j(e), e.key) {
+          case "ArrowLeft":
+            a("NEXT");
+            break;
+          case "ArrowRight":
+            a("PREV");
+            break;
+        }
+      },
+      onMouseDown: (e) => {
+        k == null || k(e), xe(e, z), H(!0);
+      },
+      onMouseUp: (e) => {
+        A == null || A(e), ue(e, z, U, a), H(!1);
+      },
+      onTouchEnd: (e) => {
+        N == null || N(e), me(E, $, a);
+      },
+      onTouchMove: (e) => {
+        C == null || C(e), fe(e, $);
+      },
+      onTouchStart: (e) => {
+        g == null || g(e), oe(e, E);
+      },
+      children: [
+        /* @__PURE__ */ i.jsx(
+          "div",
+          {
+            className: l("wrapper", void 0, W),
+            style: {
+              transform: te(),
+              transition: u ? "transform 0.3s ease-in-out" : "none"
+            },
+            children: G.map((e, t) => /* @__PURE__ */ i.jsx(
+              "div",
+              {
+                className: l("item", void 0, Y),
+                style: {
+                  width: `${100 / s}%`
+                },
+                children: e
+              },
+              `carousel-item-${t}`
+            ))
+          }
+        ),
+        /* @__PURE__ */ i.jsx(
+          "div",
+          {
+            className: l("mobile__tutorial", {
+              "is-hidden": !w
+            }),
+            children: /* @__PURE__ */ i.jsx("div", { className: l("mobile__tutorial__animation"), children: /* @__PURE__ */ i.jsx(ce, { animationName: "Swipe" }) })
+          }
+        ),
+        /* @__PURE__ */ i.jsxs("footer", { className: l("controls", void 0, Q), children: [
+          !!X && /* @__PURE__ */ i.jsx(
+            J,
+            {
+              "aria-label": "Swipe one slide backwards",
+              className: l("button", void 0, y),
+              variant: "outlined",
+              iconProps: {
+                name: "ArrowLeft01Icon",
+                size: "md",
+                color: "white"
+              },
+              onClick: () => a(R)
+            }
+          ),
+          se(),
+          !!X && /* @__PURE__ */ i.jsx(
+            J,
+            {
+              "aria-label": "Swipe one slide forwards",
+              className: l("button", void 0, y),
+              variant: "outlined",
+              iconProps: {
+                name: "ArrowRight01Icon",
+                size: "md",
+                color: "white"
+              },
+              onClick: () => a(p)
+            }
+          )
+        ] })
+      ]
+    }
+  );
+};
+be.displayName = "Carousel";
+export {
+  be as Carousel
+};

package/dist/components/carousel/Carousel.module.scss.js

@@ -0,0 +1,21 @@
+const o = "gradientMove", r = "fadeInKeyframe", _ = {
+  "prokodo-Carousel": "prokodo-Carousel",
+  "prokodo-Carousel--is-active": "prokodo-Carousel--is-active",
+  "prokodo-Carousel__wrapper": "prokodo-Carousel__wrapper",
+  "prokodo-Carousel__item": "prokodo-Carousel__item",
+  "prokodo-Carousel__mobile__tutorial": "prokodo-Carousel__mobile__tutorial",
+  "prokodo-Carousel__mobile__tutorial__animation": "prokodo-Carousel__mobile__tutorial__animation",
+  "prokodo-Carousel__mobile__tutorial--is-hidden": "prokodo-Carousel__mobile__tutorial--is-hidden",
+  "prokodo-Carousel__controls": "prokodo-Carousel__controls",
+  "prokodo-Carousel__button": "prokodo-Carousel__button",
+  "prokodo-Carousel__dots": "prokodo-Carousel__dots",
+  "prokodo-Carousel__dots__dot": "prokodo-Carousel__dots__dot",
+  "prokodo-Carousel__dots__dot--is-active": "prokodo-Carousel__dots__dot--is-active",
+  gradientMove: o,
+  fadeInKeyframe: r
+};
+export {
+  _ as default,
+  r as fadeInKeyframe,
+  o as gradientMove
+};

package/dist/components/carousel/Carousel.services.js

@@ -0,0 +1,22 @@
+const t = "NEXT", u = "PREV", o = (r, c) => {
+  var n;
+  c.current = ((n = r.targetTouches[0]) == null ? void 0 : n.clientX) ?? 0;
+}, T = (r, c) => {
+  var n;
+  c.current = ((n = r.targetTouches[0]) == null ? void 0 : n.clientX) ?? 0;
+}, h = (r, c, n) => {
+  r.current - c.current > 50 && n("NEXT"), r.current - c.current < -50 && n("PREV");
+}, l = (r, c) => {
+  c.current = r.clientX;
+}, a = (r, c, n, e) => {
+  n.current = r.clientX, c.current - n.current > 50 && e("NEXT"), c.current - n.current < -50 && e("PREV");
+};
+export {
+  t as NEXT,
+  u as PREV,
+  l as handleMouseDown,
+  a as handleMouseUp,
+  h as handleTouchEnd,
+  T as handleTouchMove,
+  o as handleTouchStart
+};

package/dist/components/carousel/index.js

@@ -0,0 +1,4 @@
+import { Carousel as e } from "./Carousel.js";
+export {
+  e as Carousel
+};

package/dist/components/chip/Chip.js

@@ -0,0 +1,61 @@
+import { j as i } from "../../_virtual/jsx-runtime.js";
+import { memo as f, useCallback as h } from "react";
+import { create as u } from "../../helpers/bem.js";
+import x from "./Chip.module.scss.js";
+const m = u(x, "Chip"), j = f(
+  ({
+    label: r,
+    icon: o,
+    variant: p = "filled",
+    color: l = "primary",
+    className: c,
+    onDelete: d,
+    onClick: s,
+    onKeyDown: e
+  }) => {
+    const b = h(
+      (t) => {
+        (t.key === "Enter" || t.key === " ") && (t.preventDefault(), e == null || e(t));
+      },
+      [e]
+    ), a = !!s;
+    return (
+      // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+      /* @__PURE__ */ i.jsxs(
+        "div",
+        {
+          "aria-label": typeof r == "string" ? r : void 0,
+          role: a ? "button" : void 0,
+          tabIndex: a ? 0 : -1,
+          className: m(
+            void 0,
+            { [p]: !!p, [l]: !!l },
+            c
+          ),
+          onClick: (t) => a && (s == null ? void 0 : s(t)),
+          onKeyDown: a || e ? b : void 0,
+          children: [
+            o,
+            /* @__PURE__ */ i.jsx("span", { className: m("label"), children: r }),
+            d && /* @__PURE__ */ i.jsx(
+              "button",
+              {
+                "aria-label": "delete",
+                className: m("delete"),
+                type: "button",
+                onClick: (t) => {
+                  t.stopPropagation(), d(t);
+                },
+                children: "× "
+              }
+            )
+          ]
+        }
+      )
+    );
+  }
+);
+j.displayName = "Chip";
+export {
+  j as Chip
+};

package/dist/components/chip/Chip.module.scss.js

@@ -0,0 +1,26 @@
+const o = "gradientMove", i = "fadeInKeyframe", d = {
+  "prokodo-Chip": "prokodo-Chip",
+  "prokodo-Chip--filled": "prokodo-Chip--filled",
+  "prokodo-Chip--filled--primary": "prokodo-Chip--filled--primary",
+  "prokodo-Chip--filled--secondary": "prokodo-Chip--filled--secondary",
+  "prokodo-Chip--filled--info": "prokodo-Chip--filled--info",
+  "prokodo-Chip--filled--success": "prokodo-Chip--filled--success",
+  "prokodo-Chip--filled--error": "prokodo-Chip--filled--error",
+  "prokodo-Chip--filled--warning": "prokodo-Chip--filled--warning",
+  "prokodo-Chip--outlined": "prokodo-Chip--outlined",
+  "prokodo-Chip--outlined--primary": "prokodo-Chip--outlined--primary",
+  "prokodo-Chip--outlined--secondary": "prokodo-Chip--outlined--secondary",
+  "prokodo-Chip--outlined--info": "prokodo-Chip--outlined--info",
+  "prokodo-Chip--outlined--success": "prokodo-Chip--outlined--success",
+  "prokodo-Chip--outlined--error": "prokodo-Chip--outlined--error",
+  "prokodo-Chip--outlined--warning": "prokodo-Chip--outlined--warning",
+  "prokodo-Chip__label": "prokodo-Chip__label",
+  "prokodo-Chip__delete": "prokodo-Chip__delete",
+  gradientMove: o,
+  fadeInKeyframe: i
+};
+export {
+  d as default,
+  i as fadeInKeyframe,
+  o as gradientMove
+};

package/dist/components/chip/index.js

@@ -0,0 +1,4 @@
+import { Chip as r } from "./Chip.js";
+export {
+  r as Chip
+};

package/dist/components/datePicker/DatePicker.js

@@ -0,0 +1,93 @@
+import { j as G } from "../../_virtual/jsx-runtime.js";
+import y, { isDayjs as w } from "dayjs";
+import { useRef as H, useState as I, useEffect as J } from "react";
+import { Input as K } from "../input/Input.js";
+const L = ({
+  name: D,
+  value: v,
+  // Dayjs | null from parent
+  onChange: f,
+  // (value: Dayjs | null) => void
+  onValidate: u,
+  // (name: string, error?: string) => void
+  label: S,
+  errorText: k,
+  helperText: P,
+  format: i = "YYYY-MM-DD",
+  minDate: $,
+  maxDate: A,
+  errorTranslations: t,
+  ...B
+}) => {
+  const N = H(null), M = (c) => {
+    if (!c) return null;
+    if (w(c)) return c;
+    const s = y(c);
+    return s.isValid() ? s : null;
+  }, x = M($), Y = M(A), [R, p] = I(null), [q, m] = I(k);
+  J(() => {
+    if (!v) {
+      p(null), m(void 0), u == null || u(D, void 0);
+      return;
+    }
+    if (w(v))
+      p(v), m(void 0), u == null || u(D, void 0);
+    else {
+      const c = M(v);
+      if (c)
+        p(c), m(void 0), u == null || u(D, void 0);
+      else {
+        const s = "Invalid initial date.";
+        p(null), m(s), u == null || u(D, s);
+      }
+    }
+  }, [v]);
+  const z = (c) => {
+    if (x && c.isBefore(x, "day"))
+      return x.isSame(y(), "day") ? (t == null ? void 0 : t.minDate) ?? "Date cannot be in the past." : (t == null ? void 0 : t.minDate) ?? `Date cannot be before ${x.format(i)}.`;
+    if (Y && c.isAfter(Y, "day"))
+      return Y.isSame(y(), "day") ? (t == null ? void 0 : t.maxDate) ?? "Date cannot be in the future." : (t == null ? void 0 : t.maxDate) ?? `Date cannot be after ${Y.format(i)}.`;
+  }, F = (c) => {
+    const s = c.target.value.trim();
+    if (!s) {
+      p(null), m(void 0), u == null || u(D, void 0), f == null || f(null);
+      return;
+    }
+    const j = y(s, i, !0);
+    if (!j.isValid()) {
+      const E = "Invalid date format.";
+      p(null), m(E), u == null || u(D, E), f == null || f(null);
+      return;
+    }
+    const b = z(j);
+    if (b !== void 0) {
+      p(null), m(b), u == null || u(D, b), f == null || f(null);
+      return;
+    }
+    p(j), m(void 0), u == null || u(D, void 0), f == null || f(j);
+  };
+  return /* @__PURE__ */ G.jsx(
+    K,
+    {
+      ...B,
+      ref: N,
+      "aria-haspopup": "dialog",
+      errorText: q,
+      helperText: P,
+      id: D,
+      label: S,
+      maxRows: void 0,
+      minRows: void 0,
+      multiline: !1,
+      name: D,
+      rows: void 0,
+      type: "date",
+      value: R ? y(R).format("YYYY-MM-DD") : "",
+      onChange: F
+    }
+  );
+};
+L.displayName = "DatePicker";
+export {
+  L as DatePicker
+};

package/dist/components/datePicker/index.js

@@ -0,0 +1,4 @@
+import { DatePicker as o } from "./DatePicker.js";
+export {
+  o as DatePicker
+};

package/dist/components/dialog/Dialog.js

@@ -0,0 +1,156 @@
+import { j as e } from "../../_virtual/jsx-runtime.js";
+import { Modal as E } from "@mui/base";
+import { useState as u, useCallback as h, useImperativeHandle as K } from "react";
+import { Button as j } from "../button/Button.js";
+import { Headline as M } from "../headline/Headline.js";
+import { create as O } from "../../helpers/bem.js";
+import _ from "./Dialog.module.scss.js";
+const i = O(_, "Dialog"), z = ({
+  actions: t,
+  children: b,
+  className: v,
+  classNameHeader: N,
+  containerChildren: m,
+  contentProps: a = {},
+  contentRef: D,
+  fullScreen: y,
+  hideTitle: C,
+  onClose: c,
+  open: S,
+  ref: k,
+  renderHeader: d,
+  scroll: n = "paper",
+  showCloseButton: B,
+  title: I,
+  titleProps: T = {},
+  translations: l,
+  ...$
+}) => {
+  const [r, x] = u(S ?? !1), [g, f] = u("exiting"), o = h(() => {
+    f("exiting"), setTimeout(() => {
+      x(!1), c && c({}, "backdropClick");
+    }, 300);
+  }, [c]), w = h(
+    (s) => {
+      s.code === "Enter" && o();
+    },
+    [o]
+  );
+  K(
+    k,
+    () => ({
+      openDialog: () => {
+        x(!0), setTimeout(() => {
+          f("entering");
+        }, 300);
+      },
+      closeDialog: o
+    }),
+    [o]
+  );
+  const p = {
+    fullScreen: !!y
+  };
+  return /* @__PURE__ */ e.jsx(
+    E,
+    {
+      ...$,
+      "aria-labelledby": "dialog-title",
+      open: r,
+      className: i(
+        void 0,
+        {
+          ...p,
+          "fade-enter": g === "entering",
+          "fade-exit": g === "exiting"
+        },
+        v
+      ),
+      onClose: o,
+      children: /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+        /* @__PURE__ */ e.jsxs(
+          "div",
+          {
+            className: i("container", {
+              ...p,
+              "is-visible": r,
+              [`scroll-${n}`]: !0
+            }),
+            children: [
+              /* @__PURE__ */ e.jsxs("div", { className: i("header", void 0, N), children: [
+                /* @__PURE__ */ e.jsxs("div", { children: [
+                  /* @__PURE__ */ e.jsx(
+                    M,
+                    {
+                      ...T,
+                      id: "dialog-title",
+                      className: i("title", {
+                        "is-hidden": !!C
+                      }),
+                      children: I
+                    }
+                  ),
+                  d == null ? void 0 : d()
+                ] }),
+                !!B && /* @__PURE__ */ e.jsxs(
+                  "div",
+                  {
+                    "aria-label": (l == null ? void 0 : l.close) ?? "Close dialog",
+                    className: i("close"),
+                    role: "button",
+                    tabIndex: 0,
+                    onClick: o,
+                    onKeyDown: w,
+                    children: [
+                      /* @__PURE__ */ e.jsx("span", { className: i("close__label"), children: (l == null ? void 0 : l.cancel) ?? "Cancel" }),
+                      /* @__PURE__ */ e.jsx(
+                        j,
+                        {
+                          inert: !0,
+                          color: "inherit",
+                          tabIndex: -1,
+                          variant: "text",
+                          iconProps: {
+                            name: "Cancel01Icon",
+                            size: "sm"
+                          }
+                        }
+                      )
+                    ]
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ e.jsx(
+                "div",
+                {
+                  ...a,
+                  ref: D,
+                  className: i(
+                    "content",
+                    {
+                      [`scroll-${n}`]: !0
+                    },
+                    a == null ? void 0 : a.className
+                  ),
+                  children: b
+                }
+              ),
+              t && t.length > 0 && /* @__PURE__ */ e.jsx("div", { className: i("actions"), children: t.map((s) => /* @__PURE__ */ e.jsx(
+                j,
+                {
+                  ...s
+                },
+                `dialog-action-button-${s.id}`
+              )) })
+            ]
+          }
+        ),
+        m !== void 0 && m
+      ] })
+    }
+  );
+};
+z.displayName = "Dialog";
+export {
+  z as Dialog
+};

package/dist/components/dialog/Dialog.module.scss.js

@@ -0,0 +1,23 @@
+const o = "gradientMove", e = "fadeInKeyframe", a = {
+  "prokodo-Dialog": "prokodo-Dialog",
+  "prokodo-Dialog__container": "prokodo-Dialog__container",
+  "prokodo-Dialog__container--scroll-paper": "prokodo-Dialog__container--scroll-paper",
+  "prokodo-Dialog__container--scroll-body": "prokodo-Dialog__container--scroll-body",
+  "prokodo-Dialog__header": "prokodo-Dialog__header",
+  "prokodo-Dialog__close": "prokodo-Dialog__close",
+  "prokodo-Dialog__close__label": "prokodo-Dialog__close__label",
+  "prokodo-Dialog__title--is-hidden": "prokodo-Dialog__title--is-hidden",
+  "prokodo-Dialog__content": "prokodo-Dialog__content",
+  "prokodo-Dialog__content--scroll-body": "prokodo-Dialog__content--scroll-body",
+  "prokodo-Dialog__actions": "prokodo-Dialog__actions",
+  "prokodo-Dialog--fade-enter": "prokodo-Dialog--fade-enter",
+  "prokodo-Dialog--fade-exit": "prokodo-Dialog--fade-exit",
+  "prokodo-Dialog--fullScreen": "prokodo-Dialog--fullScreen",
+  gradientMove: o,
+  fadeInKeyframe: e
+};
+export {
+  a as default,
+  e as fadeInKeyframe,
+  o as gradientMove
+};

package/dist/components/dialog/index.js

@@ -0,0 +1,4 @@
+import { Dialog as a } from "./Dialog.js";
+export {
+  a as Dialog
+};