@prokodo/ui 0.0.37 → 0.0.39

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

@@ -0,0 +1,58 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Children } from "react";
+import { create } from "../../helpers/bem.js";
+import styles from "./Carousel.module.scss.js";
+import { Skeleton } from "../skeleton/Skeleton.js";
+const bem = create(styles, "Carousel");
+function CarouselView({
+  itemsToShow = 1,
+  className,
+  classNameWrapper,
+  classNameItem,
+  classNameDots,
+  classNameDot,
+  enableControl,
+  children,
+  ...rest
+}) {
+  const items = Children.toArray(children);
+  if (items.length === 0) {
+    return /* @__PURE__ */ jsx(Skeleton, { height: "200px", variant: "rectangular", width: "100%" });
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...rest,
+      ref: void 0,
+      className: bem(void 0, { "is-static": true }, className),
+      children: [
+        /* @__PURE__ */ jsx("div", { className: bem("wrapper", void 0, classNameWrapper), children: items.map((child, i) => /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: bem("item", void 0, classNameItem),
+            style: { width: `${100 / itemsToShow}%` },
+            children: child
+          },
+          `static-carousel-${i}`
+        )) }),
+        items.length > 1 && /* @__PURE__ */ jsx("span", { className: bem("dots", void 0, classNameDots), children: items.map((_, i) => /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: bem("dots__dot", void 0, classNameDot)
+          },
+          `dot-${i}`
+        )) }),
+        Boolean(enableControl) && /* @__PURE__ */ jsxs("footer", { className: bem("controls"), children: [
+          /* @__PURE__ */ jsx("span", { className: bem("button") }),
+          /* @__PURE__ */ jsx("span", { className: bem("button") })
+        ] })
+      ]
+    }
+  );
+}
+__name(CarouselView, "CarouselView");
+export {
+  CarouselView
+};

package/dist/components/chip/Chip.client.js

@@ -0,0 +1,45 @@
+"use client";
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { jsx } from "react/jsx-runtime";
+import { useCallback } from "react";
+import { ChipView } from "./Chip.view.js";
+function ChipClient(props) {
+  const { color, onClick, onKeyDown, onDelete, ...rest } = props;
+  const clickable = typeof onClick === "function";
+  const handleKey = useCallback(
+    (e) => {
+      if ((e.key === "Enter" || e.key === " ") && clickable) {
+        e.preventDefault();
+        onClick == null ? void 0 : onClick(e);
+      }
+      onKeyDown == null ? void 0 : onKeyDown(e);
+    },
+    [clickable, onClick, onKeyDown]
+  );
+  const handleKeyDelete = useCallback(
+    (e) => {
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        onDelete == null ? void 0 : onDelete(e);
+      }
+    },
+    [onDelete]
+  );
+  const dom = clickable ? { role: "button", tabIndex: 0, onClick } : { tabIndex: -1 };
+  return /* @__PURE__ */ jsx(
+    ChipView,
+    {
+      ...rest,
+      ...dom,
+      color,
+      buttonProps: onDelete ? { onClick: onDelete, onKeyDown: handleKeyDelete } : void 0,
+      onDelete,
+      onKeyDown: clickable || onKeyDown ? handleKey : void 0
+    }
+  );
+}
+__name(ChipClient, "ChipClient");
+export {
+  ChipClient as default
+};

package/dist/components/chip/Chip.js

@@ -1,69 +1,12 @@
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-import { jsxs, jsx } from "react/jsx-runtime";
-import { memo, useCallback } from "react";
-import { create } from "../../helpers/bem.js";
-import styles from "./Chip.module.scss.js";
-const bem = create(styles, "Chip");
-const Chip = memo(
-  ({
-    label,
-    icon,
-    variant = "filled",
-    color = "primary",
-    className,
-    onDelete,
-    onClick,
-    onKeyDown
-  }) => {
-    const handleKeyDown = useCallback(
-      (e) => {
-        if (e.key === "Enter" || e.key === " ") {
-          e.preventDefault();
-          onKeyDown == null ? void 0 : onKeyDown(e);
-        }
-      },
-      [onKeyDown]
-    );
-    const isClickable = !!onClick;
-    return (
-      // eslint-disable-next-line jsx-a11y/no-static-element-interactions
-      /* @__PURE__ */ jsxs(
-        "div",
-        {
-          "aria-label": typeof label === "string" ? label : void 0,
-          role: isClickable ? "button" : void 0,
-          tabIndex: isClickable ? 0 : -1,
-          className: bem(
-            void 0,
-            { [variant]: !!variant, [color]: !!color },
-            className
-          ),
-          onClick: /* @__PURE__ */ __name((e) => isClickable && (onClick == null ? void 0 : onClick(e)), "onClick"),
-          onKeyDown: isClickable || onKeyDown ? handleKeyDown : void 0,
-          children: [
-            icon,
-            /* @__PURE__ */ jsx("span", { className: bem("label"), children: label }),
-            onDelete && /* @__PURE__ */ jsx(
-              "button",
-              {
-                "aria-label": "delete",
-                className: bem("delete"),
-                type: "button",
-                onClick: /* @__PURE__ */ __name((e) => {
-                  e.stopPropagation();
-                  onDelete(e);
-                }, "onClick"),
-                children: "× "
-              }
-            )
-          ]
-        }
-      )
-    );
-  }
-);
-Chip.displayName = "Chip";
+import { createIsland } from "../../helpers/createIsland.js";
+import ChipServer from "./Chip.server.js";
+const Chip = createIsland({
+  name: "Chip",
+  Server: ChipServer,
+  loadLazy: /* @__PURE__ */ __name(() => import("./Chip.lazy.js"), "loadLazy")
+});
 export {
   Chip
 };

package/dist/components/chip/Chip.lazy.js

@@ -0,0 +1,12 @@
+"use client";
+import { createLazyWrapper } from "../../helpers/createLazyWrapper.js";
+import ChipClient from "./Chip.client.js";
+import ChipServer from "./Chip.server.js";
+const Chip_lazy = createLazyWrapper({
+  name: "Chip",
+  Client: ChipClient,
+  Server: ChipServer
+});
+export {
+  Chip_lazy as default
+};

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

@@ -2,6 +2,8 @@ const gradientMove = "gradientMove";
 const fadeInKeyframe = "fadeInKeyframe";
 const styles = {
   "prokodo-Chip": "prokodo-Chip",
+  "prokodo-Chip--is-clickable": "prokodo-Chip--is-clickable",
+  "prokodo-Chip--has-icon": "prokodo-Chip--has-icon",
   "prokodo-Chip--filled": "prokodo-Chip--filled",
   "prokodo-Chip--filled--primary": "prokodo-Chip--filled--primary",
   "prokodo-Chip--filled--secondary": "prokodo-Chip--filled--secondary",
@@ -9,6 +11,7 @@ const styles = {
   "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--filled--white": "prokodo-Chip--filled--white",
   "prokodo-Chip--outlined": "prokodo-Chip--outlined",
   "prokodo-Chip--outlined--primary": "prokodo-Chip--outlined--primary",
   "prokodo-Chip--outlined--secondary": "prokodo-Chip--outlined--secondary",
@@ -16,8 +19,15 @@ const styles = {
   "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--outlined--white": "prokodo-Chip--outlined--white",
   "prokodo-Chip__delete": "prokodo-Chip__delete",
+  "prokodo-Chip__delete--primary": "prokodo-Chip__delete--primary",
+  "prokodo-Chip__delete--secondary": "prokodo-Chip__delete--secondary",
+  "prokodo-Chip__delete--info": "prokodo-Chip__delete--info",
+  "prokodo-Chip__delete--success": "prokodo-Chip__delete--success",
+  "prokodo-Chip__delete--error": "prokodo-Chip__delete--error",
+  "prokodo-Chip__delete--white": "prokodo-Chip__delete--white",
+  "prokodo-Chip__delete--warning": "prokodo-Chip__delete--warning",
   gradientMove,
   fadeInKeyframe
 };

package/dist/components/chip/Chip.server.js

@@ -0,0 +1,11 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { jsx } from "react/jsx-runtime";
+import { ChipView } from "./Chip.view.js";
+function ChipServer(props) {
+  return /* @__PURE__ */ jsx(ChipView, { ...props });
+}
+__name(ChipServer, "ChipServer");
+export {
+  ChipServer as default
+};

package/dist/components/chip/Chip.view.js

@@ -0,0 +1,57 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { jsxs, jsx } from "react/jsx-runtime";
+import { create } from "../../helpers/bem.js";
+import styles from "./Chip.module.scss.js";
+import { Icon } from "../icon/Icon.js";
+const bem = create(styles, "Chip");
+function ChipView({
+  buttonProps,
+  label,
+  icon,
+  variant = "filled",
+  color = "primary",
+  className,
+  onClick,
+  onKeyDown,
+  onDelete,
+  ...rest
+}) {
+  const isClickable = typeof onClick === "function" || typeof onKeyDown === "function";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...rest,
+      role: "button",
+      tabIndex: isClickable ? 0 : -1,
+      className: bem(void 0, {
+        [variant]: true,
+        "has-icon": typeof onDelete === "function",
+        "is-clickable": isClickable,
+        [`${variant}--${color}`]: true
+      }, className),
+      onClick,
+      onKeyDown,
+      children: [
+        icon,
+        /* @__PURE__ */ jsx("span", { className: bem("label"), children: label }),
+        typeof onDelete === "function" && /* @__PURE__ */ jsx(
+          "button",
+          {
+            "aria-label": "delete",
+            type: "button",
+            className: bem("delete", {
+              [color]: true
+            }),
+            ...buttonProps,
+            children: /* @__PURE__ */ jsx(Icon, { name: "Delete01Icon" })
+          }
+        )
+      ]
+    }
+  );
+}
+__name(ChipView, "ChipView");
+export {
+  ChipView
+};

package/dist/components/datePicker/DatePicker.client.js

@@ -0,0 +1,99 @@
+"use client";
+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 { useState, useEffect, useCallback } from "react";
+import { isNull } from "../../helpers/validations.js";
+import { DatePickerView } from "./DatePicker.view.js";
+function toDayjs(val) {
+  if (isNull(val)) {
+    return null;
+  }
+  if (isDayjs(val)) {
+    return val;
+  }
+  const d = dayjs(val);
+  return d.isValid() ? d : null;
+}
+__name(toDayjs, "toDayjs");
+const DatePickerClient = /* @__PURE__ */ __name(({
+  name,
+  value,
+  onChange,
+  onValidate,
+  format = "YYYY-MM-DD",
+  minDate,
+  maxDate,
+  translations,
+  label,
+  helperText,
+  ...rest
+}) => {
+  const [date, setDate] = useState(toDayjs(value));
+  const [error, setError] = useState(void 0);
+  useEffect(() => {
+    setDate(toDayjs(value));
+    setError(void 0);
+    onValidate == null ? void 0 : onValidate(name, void 0);
+  }, [value, name, onValidate]);
+  const emitValue = useCallback(
+    (e) => {
+      var _a;
+      const val = (_a = e == null ? void 0 : e.target) == null ? void 0 : _a.value;
+      if (!val) {
+        setDate(null);
+        setError(void 0);
+        onValidate == null ? void 0 : onValidate(name, void 0);
+        onChange == null ? void 0 : onChange(null);
+        return;
+      }
+      const d = dayjs(val, format, true);
+      if (!d.isValid()) {
+        const msg = "Invalid date format.";
+        setError(msg);
+        onValidate == null ? void 0 : onValidate(name, msg);
+        onChange == null ? void 0 : onChange(null);
+        return;
+      }
+      if (!isNull(minDate) && d.isBefore(dayjs(minDate), "day")) {
+        const msg = dayjs(minDate).isSame(dayjs(), "day") ? (translations == null ? void 0 : translations.minDate) ?? "Date cannot be in the past." : (translations == null ? void 0 : translations.minDate) ?? `Date must be ≥ ${dayjs(minDate).format(format)}`;
+        setError(msg);
+        onValidate == null ? void 0 : onValidate(name, msg);
+        onChange == null ? void 0 : onChange(null);
+        return;
+      }
+      if (!isNull(maxDate) && d.isAfter(dayjs(maxDate), "day")) {
+        const msg = dayjs(maxDate).isSame(dayjs(), "day") ? (translations == null ? void 0 : translations.maxDate) ?? "Date cannot be in the future." : (translations == null ? void 0 : translations.maxDate) ?? `Date must be ≤ ${dayjs(maxDate).format(format)}`;
+        setError(msg);
+        onValidate == null ? void 0 : onValidate(name, msg);
+        onChange == null ? void 0 : onChange(null);
+        return;
+      }
+      setDate(d);
+      setError(void 0);
+      onValidate == null ? void 0 : onValidate(name, void 0);
+      onChange == null ? void 0 : onChange(d);
+    },
+    [format, maxDate, minDate, name, onChange, onValidate, translations]
+  );
+  return /* @__PURE__ */ jsx(
+    DatePickerView,
+    {
+      ...rest,
+      errorText: error,
+      format,
+      helperText,
+      label,
+      maxDate,
+      minDate,
+      name,
+      value: date,
+      onChange: /* @__PURE__ */ __name((value2) => emitValue(value2), "onChange"),
+      onValidate
+    }
+  );
+}, "DatePickerClient");
+export {
+  DatePickerClient as default
+};

package/dist/components/datePicker/DatePicker.js

@@ -1,129 +1,12 @@
 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,
-  // (value: Dayjs | null) => void
-  onValidate,
-  // (name: string, error?: string) => void
-  label,
-  errorText,
-  helperText,
-  format = "YYYY-MM-DD",
-  minDate,
-  maxDate,
-  errorTranslations,
-  ...props
-}) => {
-  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 (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);
-      }
-    }
-  }, [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 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 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;
-    }
-    setDate(parsed);
-    setError(void 0);
-    onValidate == null ? void 0 : onValidate(name, void 0);
-    onChange == null ? void 0 : onChange(parsed);
-  }, "handleChange");
-  return /* @__PURE__ */ jsx(
-    Input,
-    {
-      ...props,
-      ref: inputRef,
-      "aria-haspopup": "dialog",
-      errorText: error,
-      helperText,
-      id: name,
-      label,
-      maxRows: void 0,
-      minRows: void 0,
-      multiline: false,
-      name,
-      rows: void 0,
-      type: "date",
-      value: date ? dayjs(date).format("YYYY-MM-DD") : "",
-      onChange: handleChange
-    }
-  );
-}, "DatePicker");
+import { createIsland } from "../../helpers/createIsland.js";
+import DatePickerServer from "./DatePicker.server.js";
+const DatePicker = createIsland({
+  name: "DatePicker",
+  Server: DatePickerServer,
+  loadLazy: /* @__PURE__ */ __name(() => import("./DatePicker.lazy.js"), "loadLazy")
+});
 DatePicker.displayName = "DatePicker";
 export {
   DatePicker

package/dist/components/datePicker/DatePicker.lazy.js

@@ -0,0 +1,12 @@
+"use client";
+import { createLazyWrapper } from "../../helpers/createLazyWrapper.js";
+import DatePickerClient from "./DatePicker.client.js";
+import DatePickerServer from "./DatePicker.server.js";
+const DatePicker_lazy = createLazyWrapper({
+  name: "DatePicker",
+  Client: DatePickerClient,
+  Server: DatePickerServer
+});
+export {
+  DatePicker_lazy as default
+};

package/dist/components/datePicker/DatePicker.server.js

@@ -0,0 +1,8 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { jsx } from "react/jsx-runtime";
+import { DatePickerView } from "./DatePicker.view.js";
+const DatePickerServer = /* @__PURE__ */ __name((props) => /* @__PURE__ */ jsx(DatePickerView, { ...props, readOnly: true, onChange: void 0 }), "DatePickerServer");
+export {
+  DatePickerServer as default
+};

package/dist/components/datePicker/DatePicker.view.js

@@ -0,0 +1,42 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { jsx } from "react/jsx-runtime";
+import dayjs from "dayjs";
+import { isNull } from "../../helpers/validations.js";
+import { InputView } from "../input/Input.view.js";
+function DatePickerView({
+  name,
+  label,
+  value,
+  helperText,
+  errorText,
+  format = "YYYY-MM-DD",
+  placeholder,
+  minDate,
+  maxDate,
+  ...rest
+}) {
+  const displayValue = !isNull(value) ? dayjs(value).format(format) : "";
+  const min = !isNull(minDate) ? dayjs(minDate).format("YYYY-MM-DD") : void 0;
+  const max = !isNull(maxDate) ? dayjs(maxDate).format("YYYY-MM-DD") : void 0;
+  return /* @__PURE__ */ jsx(
+    InputView,
+    {
+      ...rest,
+      errorText,
+      helperText,
+      isFocused: true,
+      label,
+      max,
+      min,
+      name,
+      placeholder,
+      type: "date",
+      value: displayValue
+    }
+  );
+}
+__name(DatePickerView, "DatePickerView");
+export {
+  DatePickerView
+};