@prokodo/ui 0.0.26 → 0.0.28

package/dist/components/slider/Slider.js

@@ -1,104 +1,113 @@
-import { jsxs as E, jsx as c } from "react/jsx-runtime";
-import { memo as T, useState as b, useCallback as p, useEffect as V } from "react";
-import { create as $ } from "../../helpers/bem.js";
-import q from "./Slider.module.scss.js";
-import { Slider as z } 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/Slider/Slider.js";
-import { Label as A } from "../label/Label.js";
-const a = $(q, "Slider"), D = T(
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { jsxs, jsx } from "react/jsx-runtime";
+import { memo, useState, useCallback, useEffect } from "react";
+import { create } from "../../helpers/bem.js";
+import styles from "./Slider.module.scss.js";
+import { Slider as Slider$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/Slider/Slider.js";
+import { Label } from "../label/Label.js";
+const bem = create(styles, "Slider");
+const Slider = memo(
   ({
-    id: d,
-    className: u,
-    required: v,
-    value: s,
-    label: o,
-    labelProps: m,
-    valueLabelProps: h,
-    disabled: N,
-    onFocus: t,
-    onBlur: r,
-    onChange: l,
-    ...x
+    id,
+    className,
+    required,
+    value,
+    label,
+    labelProps,
+    valueLabelProps,
+    disabled,
+    onFocus,
+    onBlur,
+    onChange,
+    ...props
   }) => {
-    const [L, f] = b(
-      Number(s) ?? 0
-    ), [i, j] = b(!1), k = p(
+    const [Value, setValue] = useState(
+      Number(value) ?? 0
+    );
+    const [focused, setFocused] = useState(false);
+    const handleChangeFocus = useCallback(
       (e) => {
-        j(!i), i ? r == null || r(e) : t == null || t(e);
+        setFocused(!focused);
+        !focused ? onFocus == null ? void 0 : onFocus(e) : onBlur == null ? void 0 : onBlur(e);
       },
-      [i, t, r]
+      [focused, onFocus, onBlur]
     );
-    V(() => {
-      s !== void 0 && f(Number(s));
-    }, [s]);
-    const y = p(
-      (e, S, _) => {
-        f(S), l == null || l(e, S, _);
+    useEffect(() => {
+      if (value !== void 0) {
+        setValue(Number(value));
+      }
+    }, [value]);
+    const handleSliderChange = useCallback(
+      (e, newValue, activeThumb) => {
+        setValue(newValue);
+        onChange == null ? void 0 : onChange(e, newValue, activeThumb);
       },
-      [l]
+      [onChange]
     );
-    return /* @__PURE__ */ E("div", { className: a(void 0, void 0, u), children: [
-      /* @__PURE__ */ c(
-        A,
+    return /* @__PURE__ */ jsxs("div", { className: bem(void 0, void 0, className), children: [
+      /* @__PURE__ */ jsx(
+        Label,
         {
-          ...m,
-          className: a("label"),
-          htmlFor: d,
-          label: o,
-          required: v
+          ...labelProps,
+          className: bem("label"),
+          htmlFor: id,
+          label,
+          required
         }
       ),
-      /* @__PURE__ */ c(
-        z,
+      /* @__PURE__ */ jsx(
+        Slider$1,
         {
-          marks: !0,
-          "aria-label": o,
-          id: d,
-          ...x,
-          disabled: N,
-          value: L,
+          marks: true,
+          "aria-label": label,
+          id,
+          ...props,
+          disabled,
+          value: Value,
           slotProps: {
             root: {
-              className: a("root", {
-                disabled: !!N
+              className: bem("root", {
+                disabled: Boolean(disabled)
               })
             },
             rail: {
-              className: a("rail")
+              className: bem("rail")
             },
             track: {
-              className: a("track")
+              className: bem("track")
             },
             thumb: {
-              className: a("thumb", {
-                focused: i
+              className: bem("thumb", {
+                focused
               })
             },
             mark: {
-              className: a("mark")
+              className: bem("mark")
             },
             markLabel: {
-              className: a("mark__label")
+              className: bem("mark__label")
             }
           },
           slots: {
-            valueLabel: ({ children: e }) => /* @__PURE__ */ c(
+            valueLabel: /* @__PURE__ */ __name(({ children }) => /* @__PURE__ */ jsx(
               "span",
               {
-                ...h,
-                className: a("valueText", void 0, m == null ? void 0 : m.className),
-                children: e
+                ...valueLabelProps,
+                className: bem("valueText", void 0, labelProps == null ? void 0 : labelProps.className),
+                children
               }
-            )
+            ), "valueLabel")
           },
-          onBlur: k,
-          onChange: y,
-          onFocus: k
+          onBlur: handleChangeFocus,
+          onChange: handleSliderChange,
+          onFocus: handleChangeFocus
         }
       )
     ] });
   }
 );
-D.displayName = "Slider";
+Slider.displayName = "Slider";
 export {
-  D as Slider
+  Slider
 };

package/dist/components/slider/Slider.module.scss.js

@@ -1,4 +1,6 @@
-const o = "gradientMove", r = "fadeInKeyframe", d = {
+const gradientMove = "gradientMove";
+const fadeInKeyframe = "fadeInKeyframe";
+const styles = {
   "prokodo-Slider": "prokodo-Slider",
   "prokodo-Slider__label": "prokodo-Slider__label",
   "prokodo-Slider__root": "prokodo-Slider__root",
@@ -10,11 +12,11 @@ const o = "gradientMove", r = "fadeInKeyframe", d = {
   "prokodo-Slider__mark": "prokodo-Slider__mark",
   "prokodo-Slider__mark__label": "prokodo-Slider__mark__label",
   "prokodo-Slider__valueText": "prokodo-Slider__valueText",
-  gradientMove: o,
-  fadeInKeyframe: r
+  gradientMove,
+  fadeInKeyframe
 };
 export {
-  d as default,
-  r as fadeInKeyframe,
-  o as gradientMove
+  styles as default,
+  fadeInKeyframe,
+  gradientMove
 };

package/dist/components/slider/index.js

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

package/dist/components/stepper/Stepper.js

@@ -1,119 +1,135 @@
-import { jsx as d, jsxs as w } from "react/jsx-runtime";
-import { useRef as x, useState as A, useImperativeHandle as D } from "react";
-import { create as K } from "../../helpers/bem.js";
-import { isString as R } from "../../helpers/validations.js";
-import T from "./Stepper.module.scss.js";
-import { Icon as h } from "../icon/Icon.js";
-const m = K(T, "Stepper"), L = ({
-  ref: _,
-  className: N,
-  steps: y,
-  initialStep: $,
-  onChangeStep: p,
-  translations: c,
-  ...k
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useRef, useState, useImperativeHandle } from "react";
+import { create } from "../../helpers/bem.js";
+import { isString } from "../../helpers/validations.js";
+import styles from "./Stepper.module.scss.js";
+import { Icon } from "../icon/Icon.js";
+const bem = create(styles, "Stepper");
+const Stepper = /* @__PURE__ */ __name(({
+  ref,
+  className,
+  steps,
+  initialStep,
+  onChangeStep,
+  translations,
+  ...props
 }) => {
-  const f = x([]), [l, b] = A($ ?? 1);
-  D(
-    _,
+  const stepRefs = useRef([]);
+  const [activeStep, setActiveStep] = useState(initialStep ?? 1);
+  useImperativeHandle(
+    ref,
     () => ({
-      jumpToStep: (o) => b(o)
+      jumpToStep: /* @__PURE__ */ __name((index) => setActiveStep(index), "jumpToStep")
     }),
     []
   );
-  const j = (o, e) => {
-    var s;
-    o.key === "ArrowLeft" && e > 0 && (b(e - 1), (s = f.current[e - 1]) == null || s.focus(), p == null || p(e - 1));
-  };
-  return /* @__PURE__ */ d(
+  const handleKeyDown = /* @__PURE__ */ __name((event, stepIndex) => {
+    var _a;
+    if (event.key === "ArrowLeft") {
+      if (stepIndex > 0) {
+        setActiveStep(stepIndex - 1);
+        (_a = stepRefs.current[stepIndex - 1]) == null ? void 0 : _a.focus();
+        onChangeStep == null ? void 0 : onChangeStep(stepIndex - 1);
+      }
+    }
+  }, "handleKeyDown");
+  return /* @__PURE__ */ jsx(
     "ol",
     {
-      ...k,
-      "aria-label": (c == null ? void 0 : c.stepper) ?? "Stepper Navigation",
-      className: m(void 0, void 0, N),
-      children: y.map((o, e) => {
-        const { key: s, label: a, labelProps: u, ...v } = o, r = e === l, i = l > e;
-        return /* @__PURE__ */ d(
+      ...props,
+      "aria-label": (translations == null ? void 0 : translations.stepper) ?? "Stepper Navigation",
+      className: bem(void 0, void 0, className),
+      children: steps.map((step, i) => {
+        const { key, label, labelProps, ...rest } = step;
+        const active = i === activeStep;
+        const completed = activeStep > i;
+        return /* @__PURE__ */ jsx(
           "li",
           {
-            "aria-current": r ? "step" : void 0,
-            "aria-disabled": !i && !r ? "true" : void 0,
-            className: m(
+            "aria-current": active ? "step" : void 0,
+            "aria-disabled": !completed && !active ? "true" : void 0,
+            className: bem(
               "step",
               {
-                "is-active": r || i
+                "is-active": active || completed
               },
-              v == null ? void 0 : v.className
+              rest == null ? void 0 : rest.className
             ),
-            ...v,
-            children: R(a) && /* @__PURE__ */ w(
+            ...rest,
+            children: isString(label) && /* @__PURE__ */ jsxs(
               "div",
               {
-                ...u,
-                "aria-describedby": `step-${e}-description`,
-                "aria-labelledby": `step-${e}-label`,
-                className: m(
+                ...labelProps,
+                "aria-describedby": `step-${i}-description`,
+                "aria-labelledby": `step-${i}-label`,
+                className: bem(
                   "label",
                   {
-                    "is-active": !!r
+                    "is-active": Boolean(active)
                   },
-                  u == null ? void 0 : u.className
+                  labelProps == null ? void 0 : labelProps.className
                 ),
                 children: [
-                  /* @__PURE__ */ d(
+                  /* @__PURE__ */ jsx(
                     "div",
                     {
-                      ref: (t) => {
-                        t && (f.current[e] = t);
-                      },
+                      ref: /* @__PURE__ */ __name((el) => {
+                        if (el) stepRefs.current[i] = el;
+                      }, "ref"),
                       role: "button",
-                      tabIndex: r ? 0 : -1,
-                      "aria-label": `${(c == null ? void 0 : c.step) ?? "Step"} ${e + 1} ${a}. ${i ? (c == null ? void 0 : c.status.completed) ?? "Completed. Press Enter to jump back to this step." : (c == null ? void 0 : c.status.open) ?? "Open. Future step and therefore deactivated."}`,
-                      className: m("icon__container", {
-                        "is-active": r || i
+                      tabIndex: active ? 0 : -1,
+                      "aria-label": `${(translations == null ? void 0 : translations.step) ?? "Step"} ${i + 1} ${label}. ${completed ? (translations == null ? void 0 : translations.status.completed) ?? "Completed. Press Enter to jump back to this step." : (translations == null ? void 0 : translations.status.open) ?? "Open. Future step and therefore deactivated."}`,
+                      className: bem("icon__container", {
+                        "is-active": active || completed
                       }),
-                      onKeyDown: (t) => j(t, e),
-                      onClick: () => {
-                        var t;
-                        l !== e && l > e && (b(e), (t = f.current[e]) == null || t.focus(), p == null || p(e));
-                      },
-                      children: /* @__PURE__ */ d(
+                      onKeyDown: /* @__PURE__ */ __name((event) => handleKeyDown(event, i), "onKeyDown"),
+                      onClick: /* @__PURE__ */ __name(() => {
+                        var _a;
+                        if (activeStep !== i && activeStep > i) {
+                          setActiveStep(i);
+                          (_a = stepRefs.current[i]) == null ? void 0 : _a.focus();
+                          onChangeStep == null ? void 0 : onChangeStep(i);
+                        }
+                      }, "onClick"),
+                      children: /* @__PURE__ */ jsx(
                         "span",
                         {
-                          className: m("icon__label", {
-                            "is-active": r || i
+                          className: bem("icon__label", {
+                            "is-active": active || completed
                           }),
-                          children: i ? /* @__PURE__ */ d("div", { className: m("icon__completed__container"), children: /* @__PURE__ */ d(
-                            h,
+                          children: completed ? /* @__PURE__ */ jsx("div", { className: bem("icon__completed__container"), children: /* @__PURE__ */ jsx(
+                            Icon,
                             {
-                              className: m("icon__completed"),
+                              className: bem("icon__completed"),
                               name: "Tick01Icon",
                               size: "md"
                             }
-                          ) }) : e + 1
+                          ) }) : i + 1
                         }
                       )
                     }
                   ),
-                  /* @__PURE__ */ d(
+                  /* @__PURE__ */ jsx(
                     "span",
                     {
-                      className: m("label__text", {
-                        "is-active": r || i
+                      className: bem("label__text", {
+                        "is-active": active || completed
                       }),
-                      children: a
+                      children: label
                     }
                   )
                 ]
               }
             )
           },
-          a ?? `step-${s}`
+          label ?? `step-${key}`
         );
       })
     }
   );
-};
+}, "Stepper");
 export {
-  L as Stepper
+  Stepper
 };

package/dist/components/stepper/Stepper.module.scss.js

@@ -1,4 +1,6 @@
-const e = "gradientMove", o = "fadeInKeyframe", p = {
+const gradientMove = "gradientMove";
+const fadeInKeyframe = "fadeInKeyframe";
+const styles = {
   "prokodo-Stepper": "prokodo-Stepper",
   "prokodo-Stepper__step": "prokodo-Stepper__step",
   "prokodo-Stepper__step--is-active": "prokodo-Stepper__step--is-active",
@@ -13,11 +15,11 @@ const e = "gradientMove", o = "fadeInKeyframe", p = {
   "prokodo-Stepper__label--is-active": "prokodo-Stepper__label--is-active",
   "prokodo-Stepper__label__text": "prokodo-Stepper__label__text",
   "prokodo-Stepper__label__text--is-active": "prokodo-Stepper__label__text--is-active",
-  gradientMove: e,
-  fadeInKeyframe: o
+  gradientMove,
+  fadeInKeyframe
 };
 export {
-  p as default,
-  o as fadeInKeyframe,
-  e as gradientMove
+  styles as default,
+  fadeInKeyframe,
+  gradientMove
 };

package/dist/components/stepper/index.js

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

package/dist/components/switch/Switch.js

@@ -1,102 +1,108 @@
-import { jsx as r, jsxs as _ } from "react/jsx-runtime";
-import { useState as x, useCallback as h } from "react";
-import { create as v } from "../../helpers/bem.js";
-import y from "./Switch.module.scss.js";
-import { Switch as C } 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/Switch/Switch.js";
-import { Icon as B } from "../icon/Icon.js";
-import { Label as P } from "../label/Label.js";
-const e = v(y, "Switch"), j = ({
-  variant: p = "primary",
-  required: l,
-  name: s,
-  label: u,
-  labelProps: N,
-  icon: n,
-  checked: b,
-  disabled: i,
-  checkedIcon: m,
-  className: k,
-  onChange: o,
-  ...f
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState, useCallback } from "react";
+import { create } from "../../helpers/bem.js";
+import styles from "./Switch.module.scss.js";
+import { Switch as Switch$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/Switch/Switch.js";
+import { Icon } from "../icon/Icon.js";
+import { Label } from "../label/Label.js";
+const bem = create(styles, "Switch");
+const Switch = /* @__PURE__ */ __name(({
+  variant = "primary",
+  required,
+  name,
+  label,
+  labelProps,
+  icon,
+  checked,
+  disabled,
+  checkedIcon,
+  className,
+  onChange,
+  ...props
 }) => {
-  const [a, w] = x(b ?? !1), S = h(
-    (t) => {
-      const c = t.target.checked;
-      w(c), o && o(t, c);
+  const [isChecked, setIsChecked] = useState(checked ?? false);
+  const handleChange = useCallback(
+    (event) => {
+      const newChecked = event.target.checked;
+      setIsChecked(newChecked);
+      if (onChange) onChange(event, newChecked);
     },
-    [o]
-  ), d = h(
-    (t, c) => /* @__PURE__ */ r("span", { "aria-hidden": "true", className: e("icon__wrapper"), children: /* @__PURE__ */ r(
-      B,
+    [onChange]
+  );
+  const renderIcon = useCallback(
+    (name2, isActive) => /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: bem("icon__wrapper"), children: /* @__PURE__ */ jsx(
+      Icon,
       {
-        className: e("icon", { isActive: !!c }),
-        name: t,
+        className: bem("icon", { isActive: Boolean(isActive) }),
+        name: name2,
         size: "sm"
       }
     ) }),
     []
   );
-  return /* @__PURE__ */ r("div", { className: e(void 0, { [p]: !0 }, k), children: /* @__PURE__ */ _(
-    P,
+  return /* @__PURE__ */ jsx("div", { className: bem(void 0, { [variant]: true }, className), children: /* @__PURE__ */ jsxs(
+    Label,
     {
-      ...N,
-      className: e("label"),
-      htmlFor: s,
-      label: u,
-      required: l,
+      ...labelProps,
+      className: bem("label"),
+      htmlFor: name,
+      label,
+      required,
       contentProps: {
-        className: e("label__content")
+        className: bem("label__content")
       },
       textProps: {
         "aria-hidden": "true"
       },
       children: [
-        /* @__PURE__ */ r(
-          C,
+        /* @__PURE__ */ jsx(
+          Switch$1,
           {
-            "aria-checked": a,
-            "aria-disabled": i,
-            "aria-labelledby": `${s}-label-text`,
-            "aria-required": l ? "true" : void 0,
-            checked: a,
-            disabled: i,
-            id: s,
+            "aria-checked": isChecked,
+            "aria-disabled": disabled,
+            "aria-labelledby": `${name}-label-text`,
+            "aria-required": Boolean(required) ? "true" : void 0,
+            checked: isChecked,
+            disabled,
+            id: name,
             role: "switch",
-            ...f,
-            className: e("control", {
-              checked: a,
-              disabled: !!i
+            ...props,
+            className: bem("control", {
+              checked: isChecked,
+              disabled: Boolean(disabled)
             }),
             slotProps: {
               track: {
-                className: e("track")
+                className: bem("track")
               },
               thumb: {
-                className: e("thumb")
+                className: bem("thumb")
               },
               input: {
-                className: e("input"),
-                "aria-hidden": !0
+                className: bem("input"),
+                "aria-hidden": true
               }
             },
-            onChange: S
+            onChange: handleChange
           }
         ),
-        n && m && /* @__PURE__ */ r(
+        icon && checkedIcon && /* @__PURE__ */ jsx(
           "div",
           {
             "aria-hidden": "true",
-            className: e("icon__container", {
-              checked: a
+            className: bem("icon__container", {
+              checked: isChecked
             }),
-            children: d(a ? m : n, a)
+            children: isChecked ? renderIcon(checkedIcon, isChecked) : renderIcon(icon, isChecked)
           }
         )
       ]
     }
   ) });
-};
-j.displayName = "Switch";
+}, "Switch");
+Switch.displayName = "Switch";
 export {
-  j as Switch
+  Switch
 };

package/dist/components/switch/Switch.module.scss.js

@@ -1,4 +1,6 @@
-const o = "gradientMove", c = "fadeInKeyframe", _ = {
+const gradientMove = "gradientMove";
+const fadeInKeyframe = "fadeInKeyframe";
+const styles = {
   "prokodo-Switch": "prokodo-Switch",
   "prokodo-Switch__label": "prokodo-Switch__label",
   "prokodo-Switch__label__content": "prokodo-Switch__label__content",
@@ -20,11 +22,11 @@ const o = "gradientMove", c = "fadeInKeyframe", _ = {
   "prokodo-Switch__track": "prokodo-Switch__track",
   "prokodo-Switch__track--checked": "prokodo-Switch__track--checked",
   "prokodo-Switch__track--disabled": "prokodo-Switch__track--disabled",
-  gradientMove: o,
-  fadeInKeyframe: c
+  gradientMove,
+  fadeInKeyframe
 };
 export {
-  _ as default,
-  c as fadeInKeyframe,
-  o as gradientMove
+  styles as default,
+  fadeInKeyframe,
+  gradientMove
 };