@prokodo/ui 0.0.26 → 0.0.28

package/dist/components/select/Select.js

@@ -1,178 +1,199 @@
-import { jsxs as e, jsx as d } from "react/jsx-runtime";
-import { memo as q, useState as R, useEffect as w, useCallback as V } from "react";
-import { create as I } from "../../helpers/bem.js";
-import { isString as z, isTrue as C, isNull as D } from "../../helpers/validations.js";
-import P from "./Select.module.scss.js";
-import { Select as m } from "../../node_modules/.pnpm/@mui_base@5.0.0-beta.58_@types_react@19.1.0_react-dom@19.1.0_react@19.1.0__react@19.1.0/node_modules/@mui/base/Select/Select.js";
-import { Option as G } from "../../node_modules/.pnpm/@mui_base@5.0.0-beta.58_@types_react@19.1.0_react-dom@19.1.0_react@19.1.0__react@19.1.0/node_modules/@mui/base/Option/Option.js";
-import { Label as aa } from "../label/Label.js";
-const n = I(P, "Select"), ra = q(
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { jsxs, jsx } from "react/jsx-runtime";
+import { memo, useState, useEffect, useCallback } from "react";
+import { create } from "../../helpers/bem.js";
+import { isString, isTrue, isNull } from "../../helpers/validations.js";
+import styles from "./Select.module.scss.js";
+import { Select as Select$1 } from "../../node_modules/.pnpm/@mui_base@5.0.0-beta.58_@types_react@19.1.0_react-dom@19.1.0_react@19.1.0__react@19.1.0/node_modules/@mui/base/Select/Select.js";
+import { Option } from "../../node_modules/.pnpm/@mui_base@5.0.0-beta.58_@types_react@19.1.0_react-dom@19.1.0_react@19.1.0__react@19.1.0/node_modules/@mui/base/Option/Option.js";
+import { Label } from "../label/Label.js";
+const bem = create(styles, "Select");
+const Select = memo(
   ({
-    id: f,
-    iconVisible: j,
-    required: h,
-    multiple: t,
-    value: p,
-    placeholder: J,
-    color: g = "primary",
-    label: K,
-    labelProps: Q = {},
-    hideLabel: E,
-    className: U,
-    classNameSelect: W,
-    items: o,
-    slotProps: c,
-    errorText: O,
-    helperText: M,
-    onChange: v,
-    ...X
+    id,
+    iconVisible,
+    required,
+    multiple,
+    value,
+    placeholder,
+    color = "primary",
+    label,
+    labelProps = {},
+    hideLabel,
+    className,
+    classNameSelect,
+    items,
+    slotProps,
+    errorText,
+    helperText,
+    onChange,
+    ...props
   }) => {
-    const [i, T] = R(
+    const [Value, setValue] = useState(
       // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
-      p ?? t ? [] : "default"
+      value ?? multiple ? [] : "default"
     );
-    w(() => {
-      p !== void 0 && T(p);
-    }, [p, i]);
-    const Y = V(
-      (a, r) => {
-        r !== null && (T(r), v == null || v(a, r));
+    useEffect(() => {
+      if (value !== void 0) {
+        setValue(value);
+      }
+    }, [value, Value]);
+    const handleChange = useCallback(
+      (e, newValue) => {
+        if (newValue !== null) {
+          setValue(newValue);
+          onChange == null ? void 0 : onChange(e, newValue);
+        }
       },
-      [v]
-    ), y = `${f}-label`, B = `${f}-error`, F = `${f}-helper`, [S, Z] = R(!1);
-    if (Array.isArray(o) ? o.length === 0 : Object.keys(o).length === 0)
+      [onChange]
+    );
+    const labelId = `${id}-label`;
+    const errorId = `${id}-error`;
+    const helperId = `${id}-helper`;
+    const [expanded, setExpanded] = useState(false);
+    if (Array.isArray(items) ? items.length === 0 : Object.keys(items).length === 0) {
       return null;
-    const x = {
-      expanded: S
-    }, _ = J ?? "-- Please choose --", u = z(O), k = h === !0, b = t === !0, H = z(M);
-    return /* @__PURE__ */ e("div", { className: n(void 0, void 0, U), children: [
-      (E === void 0 || E === !1) && /* @__PURE__ */ d(
-        aa,
+    }
+    const expandedModifier = {
+      expanded
+    };
+    const Placeholder = placeholder ?? "-- Please choose --";
+    const isError = isString(errorText);
+    const isRequired = required === true;
+    const isMultiple = multiple === true;
+    const hasHelperText = isString(helperText);
+    return /* @__PURE__ */ jsxs("div", { className: bem(void 0, void 0, className), children: [
+      (hideLabel === void 0 || hideLabel === false) && /* @__PURE__ */ jsx(
+        Label,
         {
-          ...Q,
-          error: u,
-          htmlFor: y,
-          label: K,
-          required: h
+          ...labelProps,
+          error: isError,
+          htmlFor: labelId,
+          label,
+          required
         }
       ),
-      /* @__PURE__ */ d(
+      /* @__PURE__ */ jsx(
         "div",
         {
-          className: n("field", {
-            ...x,
-            [g]: !!g
+          className: bem("field", {
+            ...expandedModifier,
+            [color]: !!color
           }),
-          children: /* @__PURE__ */ e(
-            m,
+          children: /* @__PURE__ */ jsxs(
+            Select$1,
             {
-              ...X,
-              "aria-invalid": u,
-              "aria-labelledby": y,
-              "aria-required": h ? "true" : void 0,
-              className: n("select", void 0, W),
-              id: f,
-              multiple: t,
-              required: h,
+              ...props,
+              "aria-invalid": isError,
+              "aria-labelledby": labelId,
+              "aria-required": Boolean(required) ? "true" : void 0,
+              className: bem("select", void 0, classNameSelect),
+              id,
+              multiple,
+              required,
               slots: { root: "button", listbox: "ul", popup: "div" },
-              value: i,
-              "aria-describedby": u ? B : H ? F : void 0,
-              renderValue: (a) => {
-                var N, A, s, L;
-                if (a === null && (k || b) || Array.isArray(a) && a.length === 0 && (k || b))
-                  return /* @__PURE__ */ d(
+              value: Value,
+              "aria-describedby": isError ? errorId : hasHelperText ? helperId : void 0,
+              renderValue: /* @__PURE__ */ __name((selected) => {
+                var _a, _b, _c, _d;
+                if (selected === null && (isRequired || isMultiple) || Array.isArray(selected) && selected.length === 0 && (isRequired || isMultiple)) {
+                  return /* @__PURE__ */ jsx(
                     "span",
                     {
-                      className: n("button__inner", {
-                        "is-placeholder": !0
+                      className: bem("button__inner", {
+                        "is-placeholder": true
                       }),
-                      children: _
+                      children: Placeholder
                     }
                   );
-                if (Array.isArray(a)) {
-                  const l = o == null ? void 0 : o.find(($) => $.value === p);
-                  return /* @__PURE__ */ e("span", { className: n("button__inner", x), children: [
-                    C(j) && !D((N = l == null ? void 0 : l.icon) == null ? void 0 : N.call(l)) && ((A = l == null ? void 0 : l.icon) == null ? void 0 : A.call(l)),
-                    a.map(($) => $.label).join(", ")
+                }
+                if (Array.isArray(selected)) {
+                  const selectedItem2 = items == null ? void 0 : items.find((el) => el.value === value);
+                  return /* @__PURE__ */ jsxs("span", { className: bem("button__inner", expandedModifier), children: [
+                    isTrue(iconVisible) && !isNull((_a = selectedItem2 == null ? void 0 : selectedItem2.icon) == null ? void 0 : _a.call(selectedItem2)) && ((_b = selectedItem2 == null ? void 0 : selectedItem2.icon) == null ? void 0 : _b.call(selectedItem2)),
+                    selected.map((option) => option.label).join(", ")
                   ] });
                 }
-                const r = o == null ? void 0 : o.find(
-                  (l) => l.value === (a == null ? void 0 : a.value)
+                const selectedItem = items == null ? void 0 : items.find(
+                  (el) => el.value === (selected == null ? void 0 : selected.value)
                 );
-                return /* @__PURE__ */ e("span", { className: n("button__inner", x), children: [
-                  C(j) && !D((s = r == null ? void 0 : r.icon) == null ? void 0 : s.call(r)) && ((L = r == null ? void 0 : r.icon) == null ? void 0 : L.call(r)),
-                  a == null ? void 0 : a.label
+                return /* @__PURE__ */ jsxs("span", { className: bem("button__inner", expandedModifier), children: [
+                  isTrue(iconVisible) && !isNull((_c = selectedItem == null ? void 0 : selectedItem.icon) == null ? void 0 : _c.call(selectedItem)) && ((_d = selectedItem == null ? void 0 : selectedItem.icon) == null ? void 0 : _d.call(selectedItem)),
+                  selected == null ? void 0 : selected.label
                 ] });
-              },
+              }, "renderValue"),
               slotProps: {
-                ...c,
+                ...slotProps,
                 root: {
-                  ...c == null ? void 0 : c.root,
-                  className: n("button", x),
+                  ...slotProps == null ? void 0 : slotProps.root,
+                  className: bem("button", expandedModifier),
                   role: "button",
                   "aria-haspopup": "listbox",
-                  "aria-expanded": S ? "true" : "false"
+                  "aria-expanded": expanded ? "true" : "false"
                 },
                 listbox: {
-                  ...c == null ? void 0 : c.listbox,
-                  className: n("listbox"),
+                  ...slotProps == null ? void 0 : slotProps.listbox,
+                  className: bem("listbox"),
                   role: "listbox"
                 },
                 popup: {
-                  ...c == null ? void 0 : c.popup,
-                  disablePortal: !0,
-                  className: n("popup", {
-                    "is-expanded": S
+                  ...slotProps == null ? void 0 : slotProps.popup,
+                  disablePortal: true,
+                  className: bem("popup", {
+                    "is-expanded": expanded
                   })
                 }
               },
-              onChange: Y,
-              onListboxOpenChange: (a) => Z(a),
+              onChange: handleChange,
+              onListboxOpenChange: /* @__PURE__ */ __name((isOpen) => setExpanded(isOpen), "onListboxOpenChange"),
               children: [
-                !k && !b && /* @__PURE__ */ d(
-                  G,
+                !isRequired && !isMultiple && /* @__PURE__ */ jsx(
+                  Option,
                   {
-                    "aria-label": _.toString(),
-                    "aria-selected": i === "default" ? "true" : "false",
+                    "aria-label": Placeholder.toString(),
+                    "aria-selected": "default" === Value ? "true" : "false",
                     value: "default",
-                    className: n("item", {
-                      selected: i === "default"
+                    className: bem("item", {
+                      selected: "default" === Value
                     }),
-                    children: _
+                    children: Placeholder
                   }
                 ),
-                o.map((a) => {
-                  const { icon: r, ...N } = a, s = ((a == null ? void 0 : a.value) === i || (i == null ? void 0 : i.includes(a == null ? void 0 : a.value))) === !0;
-                  return /* @__PURE__ */ e(
-                    G,
+                items.map((item) => {
+                  const { icon, ...rest } = item;
+                  const selected = (item == null ? void 0 : item.value) === Value || (Value == null ? void 0 : Value.includes(item == null ? void 0 : item.value));
+                  const isSelected = selected === true;
+                  return /* @__PURE__ */ jsxs(
+                    Option,
                     {
-                      className: n(
+                      className: bem(
                         "item",
                         {
-                          selected: s && !b
+                          selected: isSelected && !isMultiple
                         },
-                        a == null ? void 0 : a.className
+                        item == null ? void 0 : item.className
                       ),
-                      ...N,
-                      "aria-label": a == null ? void 0 : a.label,
-                      "aria-selected": s ? "true" : "false",
+                      ...rest,
+                      "aria-label": item == null ? void 0 : item.label,
+                      "aria-selected": isSelected ? "true" : "false",
                       children: [
-                        b && /* @__PURE__ */ d(
+                        isMultiple && /* @__PURE__ */ jsx(
                           "input",
                           {
                             "aria-hidden": "true",
-                            defaultChecked: s,
+                            defaultChecked: isSelected,
                             type: "checkbox",
-                            className: n("checkbox", {
-                              checked: s
+                            className: bem("checkbox", {
+                              checked: isSelected
                             })
                           }
                         ),
-                        r && r(),
-                        a == null ? void 0 : a.label
+                        icon && icon(),
+                        item == null ? void 0 : item.label
                       ]
                     },
-                    `${y}-item-${a == null ? void 0 : a.value}`
+                    `${labelId}-item-${item == null ? void 0 : item.value}`
                   );
                 })
               ]
@@ -180,20 +201,20 @@ const n = I(P, "Select"), ra = q(
           )
         }
       ),
-      (u || H) && /* @__PURE__ */ d(
+      (isError || hasHelperText) && /* @__PURE__ */ jsx(
         "div",
         {
-          "aria-live": u ? "assertive" : "polite",
-          className: n("helperText", { "is-error": u }),
-          id: u ? B : F,
-          role: u ? "alert" : void 0,
-          children: /* @__PURE__ */ d("span", { className: n("helperText__content"), children: O ?? M })
+          "aria-live": isError ? "assertive" : "polite",
+          className: bem("helperText", { "is-error": isError }),
+          id: isError ? errorId : helperId,
+          role: isError ? "alert" : void 0,
+          children: /* @__PURE__ */ jsx("span", { className: bem("helperText__content"), children: errorText ?? helperText })
         }
       )
     ] });
   }
 );
-ra.displayName = "Select";
+Select.displayName = "Select";
 export {
-  ra as Select
+  Select
 };

package/dist/components/select/Select.module.scss.js

@@ -1,4 +1,9 @@
-const e = "open", o = "closed", t = "disabled", d = "gradientMove", c = "fadeInKeyframe", l = {
+const open = "open";
+const closed = "closed";
+const disabled = "disabled";
+const gradientMove = "gradientMove";
+const fadeInKeyframe = "fadeInKeyframe";
+const styles = {
   "prokodo-Select": "prokodo-Select",
   "prokodo-Select__field": "prokodo-Select__field",
   "prokodo-Select__field--expanded": "prokodo-Select__field--expanded",
@@ -6,14 +11,14 @@ const e = "open", o = "closed", t = "disabled", d = "gradientMove", c = "fadeInK
   "prokodo-Select__button__inner": "prokodo-Select__button__inner",
   "prokodo-Select__button--expanded": "prokodo-Select__button--expanded",
   "prokodo-Select__listbox": "prokodo-Select__listbox",
-  open: e,
+  open,
   "fade-in": "fade-in",
-  closed: o,
+  closed,
   "fade-out": "fade-out",
   "placement-top": "placement-top",
   "placement-bottom": "placement-bottom",
   "prokodo-Select__item": "prokodo-Select__item",
-  disabled: t,
+  disabled,
   "prokodo-Select__item--selected": "prokodo-Select__item--selected",
   "base-Option-highlighted": "base-Option-highlighted",
   "base--selected": "base--selected",
@@ -21,14 +26,14 @@ const e = "open", o = "closed", t = "disabled", d = "gradientMove", c = "fadeInK
   "prokodo-Select__popup": "prokodo-Select__popup",
   "prokodo-Select__checkbox": "prokodo-Select__checkbox",
   "prokodo-Select__checkbox--checked": "prokodo-Select__checkbox--checked",
-  gradientMove: d,
-  fadeInKeyframe: c
+  gradientMove,
+  fadeInKeyframe
 };
 export {
-  o as closed,
-  l as default,
-  t as disabled,
-  c as fadeInKeyframe,
-  d as gradientMove,
-  e as open
+  closed,
+  styles as default,
+  disabled,
+  fadeInKeyframe,
+  gradientMove,
+  open
 };

package/dist/components/select/index.js

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

package/dist/components/skeleton/Skeleton.js

@@ -1,29 +1,32 @@
-import { jsx as s } from "react/jsx-runtime";
-import { create as a } from "../../helpers/bem.js";
-import l from "./Skeleton.module.scss.js";
-const c = a(l, "Skeleton"), f = ({
-  width: e = "100%",
-  height: t = "16px",
-  variant: o = "rectangular",
-  animation: r = "wave",
-  className: m
-}) => /* @__PURE__ */ s(
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { jsx } from "react/jsx-runtime";
+import { create } from "../../helpers/bem.js";
+import styles from "./Skeleton.module.scss.js";
+const bem = create(styles, "Skeleton");
+const Skeleton = /* @__PURE__ */ __name(({
+  width = "100%",
+  height = "16px",
+  variant = "rectangular",
+  animation = "wave",
+  className
+}) => /* @__PURE__ */ jsx(
   "div",
   {
-    className: c(
+    className: bem(
       void 0,
       {
-        [o]: !0,
-        [r]: !0
+        [variant]: true,
+        [animation]: true
       },
-      m
+      className
     ),
     style: {
-      width: e,
-      height: t
+      width,
+      height
     }
   }
-);
+), "Skeleton");
 export {
-  f as Skeleton
+  Skeleton
 };

package/dist/components/skeleton/Skeleton.module.scss.js

@@ -1,4 +1,6 @@
-const o = "gradientMove", e = "fadeInKeyframe", n = {
+const gradientMove = "gradientMove";
+const fadeInKeyframe = "fadeInKeyframe";
+const styles = {
   "prokodo-Skeleton": "prokodo-Skeleton",
   "prokodo-Skeleton--text": "prokodo-Skeleton--text",
   "prokodo-Skeleton--rectangular": "prokodo-Skeleton--rectangular",
@@ -8,11 +10,11 @@ const o = "gradientMove", e = "fadeInKeyframe", n = {
   "prokodo-Skeleton--wave": "prokodo-Skeleton--wave",
   "skeleton-wave": "skeleton-wave",
   "prokodo-Skeleton--none": "prokodo-Skeleton--none",
-  gradientMove: o,
-  fadeInKeyframe: e
+  gradientMove,
+  fadeInKeyframe
 };
 export {
-  n as default,
-  e as fadeInKeyframe,
-  o as gradientMove
+  styles as default,
+  fadeInKeyframe,
+  gradientMove
 };

package/dist/components/skeleton/index.js

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