@prokodo/ui 0.0.26 → 0.0.28

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

@@ -1,4 +1,6 @@
-const o = "gradientMove", i = "fadeInKeyframe", d = {
+const gradientMove = "gradientMove";
+const fadeInKeyframe = "fadeInKeyframe";
+const styles = {
   "prokodo-Chip": "prokodo-Chip",
   "prokodo-Chip--filled": "prokodo-Chip--filled",
   "prokodo-Chip--filled--primary": "prokodo-Chip--filled--primary",
@@ -16,11 +18,11 @@ const o = "gradientMove", i = "fadeInKeyframe", d = {
   "prokodo-Chip--outlined--warning": "prokodo-Chip--outlined--warning",
   "prokodo-Chip__label": "prokodo-Chip__label",
   "prokodo-Chip__delete": "prokodo-Chip__delete",
-  gradientMove: o,
-  fadeInKeyframe: i
+  gradientMove,
+  fadeInKeyframe
 };
 export {
-  d as default,
-  i as fadeInKeyframe,
-  o as gradientMove
+  styles as default,
+  fadeInKeyframe,
+  gradientMove
 };

package/dist/components/chip/index.js

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

package/dist/components/datePicker/DatePicker.js

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

package/dist/components/datePicker/index.js

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

package/dist/components/dialog/Dialog.js

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

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

@@ -1,4 +1,6 @@
-const o = "gradientMove", e = "fadeInKeyframe", a = {
+const gradientMove = "gradientMove";
+const fadeInKeyframe = "fadeInKeyframe";
+const styles = {
   "prokodo-Dialog": "prokodo-Dialog",
   "prokodo-Dialog__container": "prokodo-Dialog__container",
   "prokodo-Dialog__container--scroll-paper": "prokodo-Dialog__container--scroll-paper",
@@ -13,11 +15,11 @@ const o = "gradientMove", e = "fadeInKeyframe", a = {
   "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
+  gradientMove,
+  fadeInKeyframe
 };
 export {
-  a as default,
-  e as fadeInKeyframe,
-  o as gradientMove
+  styles as default,
+  fadeInKeyframe,
+  gradientMove
 };

package/dist/components/dialog/index.js

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