@prokodo/ui 0.0.37 → 0.0.39

package/dist/components/stepper/Stepper.js

@@ -1,135 +1,12 @@
 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 stepRefs = useRef([]);
-  const [activeStep, setActiveStep] = useState(initialStep ?? 1);
-  useImperativeHandle(
-    ref,
-    () => ({
-      jumpToStep: /* @__PURE__ */ __name((index) => setActiveStep(index), "jumpToStep")
-    }),
-    []
-  );
-  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",
-    {
-      ...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": active ? "step" : void 0,
-            "aria-disabled": !completed && !active ? "true" : void 0,
-            className: bem(
-              "step",
-              {
-                "is-active": active || completed
-              },
-              rest == null ? void 0 : rest.className
-            ),
-            ...rest,
-            children: isString(label) && /* @__PURE__ */ jsxs(
-              "div",
-              {
-                ...labelProps,
-                "aria-describedby": `step-${i}-description`,
-                "aria-labelledby": `step-${i}-label`,
-                className: bem(
-                  "label",
-                  {
-                    "is-active": Boolean(active)
-                  },
-                  labelProps == null ? void 0 : labelProps.className
-                ),
-                children: [
-                  /* @__PURE__ */ jsx(
-                    "div",
-                    {
-                      ref: /* @__PURE__ */ __name((el) => {
-                        if (el) stepRefs.current[i] = el;
-                      }, "ref"),
-                      role: "button",
-                      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: /* @__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: bem("icon__label", {
-                            "is-active": active || completed
-                          }),
-                          children: completed ? /* @__PURE__ */ jsx("div", { className: bem("icon__completed__container"), children: /* @__PURE__ */ jsx(
-                            Icon,
-                            {
-                              className: bem("icon__completed"),
-                              name: "Tick01Icon",
-                              size: "md"
-                            }
-                          ) }) : i + 1
-                        }
-                      )
-                    }
-                  ),
-                  /* @__PURE__ */ jsx(
-                    "span",
-                    {
-                      className: bem("label__text", {
-                        "is-active": active || completed
-                      }),
-                      children: label
-                    }
-                  )
-                ]
-              }
-            )
-          },
-          label ?? `step-${key}`
-        );
-      })
-    }
-  );
-}, "Stepper");
+import { createIsland } from "../../helpers/createIsland.js";
+import StepperServer from "./Stepper.server.js";
+const Stepper = createIsland({
+  name: "Stepper",
+  Server: StepperServer,
+  loadLazy: /* @__PURE__ */ __name(() => import("./Stepper.lazy.js"), "loadLazy")
+});
 export {
   Stepper
 };

package/dist/components/stepper/Stepper.lazy.js

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

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

@@ -5,6 +5,7 @@ const styles = {
   "prokodo-Stepper__step": "prokodo-Stepper__step",
   "prokodo-Stepper__step--is-active": "prokodo-Stepper__step--is-active",
   "prokodo-Stepper__icon": "prokodo-Stepper__icon",
+  "prokodo-Stepper__icon__sr__only": "prokodo-Stepper__icon__sr__only",
   "prokodo-Stepper__icon__container": "prokodo-Stepper__icon__container",
   "prokodo-Stepper__icon__container--is-active": "prokodo-Stepper__icon__container--is-active",
   "prokodo-Stepper__icon__label": "prokodo-Stepper__icon__label",

package/dist/components/stepper/Stepper.server.js

@@ -0,0 +1,33 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { jsx } from "react/jsx-runtime";
+import { StepperView } from "./Stepper.view.js";
+function StepperServer({
+  steps,
+  initialStep = 0,
+  translations,
+  className,
+  ...rootProps
+}) {
+  const serverSteps = steps.map((step) => ({
+    ...step,
+    // no innerContainerProps at all on the server
+    innerContainerProps: {}
+  }));
+  const emptyStepRefs = { current: [] };
+  return /* @__PURE__ */ jsx(
+    StepperView,
+    {
+      ...rootProps,
+      activeStep: initialStep,
+      className,
+      stepRefs: emptyStepRefs,
+      steps: serverSteps,
+      translations
+    }
+  );
+}
+__name(StepperServer, "StepperServer");
+export {
+  StepperServer as default
+};

package/dist/components/stepper/Stepper.view.js

@@ -0,0 +1,132 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { create } from "../../helpers/bem.js";
+import styles from "./Stepper.module.scss.js";
+import { Icon } from "../icon/Icon.js";
+const bem = create(styles, "Stepper");
+const StepperView = /* @__PURE__ */ __name(({
+  steps,
+  activeStep,
+  translations,
+  className,
+  ...rootProps
+}) => {
+  const t = translations ?? {
+    stepper: "Stepper Navigation",
+    step: "Step",
+    status: {
+      open: "Open. Future step and therefore disabled.",
+      completed: "Completed. Press Enter to jump back to this step."
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    "ol",
+    {
+      ...rootProps,
+      "aria-label": t.stepper,
+      className: bem(void 0, void 0, className),
+      children: steps.map((step, i) => {
+        const {
+          key,
+          label,
+          labelProps = {},
+          className: liClass,
+          ...liRest
+        } = step;
+        const isActive = i === activeStep;
+        const isCompleted = activeStep > i;
+        return /* @__PURE__ */ jsx(
+          "li",
+          {
+            "aria-current": isActive ? "step" : void 0,
+            "aria-disabled": !isCompleted && !isActive ? "true" : void 0,
+            className: bem(
+              "step",
+              { "is-active": isActive || isCompleted },
+              liClass
+            ),
+            ...liRest,
+            children: typeof label === "string" && /* @__PURE__ */ jsxs(
+              "div",
+              {
+                ...labelProps,
+                "aria-describedby": `step-${i}-description`,
+                "aria-labelledby": `step-${i}-label`,
+                className: bem(
+                  "label",
+                  { "is-active": isActive },
+                  labelProps.className
+                ),
+                children: [
+                  /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      id: `step-${i}-label`,
+                      role: "button",
+                      tabIndex: isActive ? 0 : -1,
+                      "aria-label": `${t.step} ${i + 1} ${label}. ${isCompleted ? t.status.completed : t.status.open}`,
+                      className: bem("icon__container", {
+                        "is-active": isActive || isCompleted
+                      }),
+                      ...step == null ? void 0 : step.innerContainerProps,
+                      children: /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          className: bem("icon__label", {
+                            "is-active": isActive || isCompleted
+                          }),
+                          children: isCompleted ? /* @__PURE__ */ jsxs("div", { className: bem("icon__completed__container"), children: [
+                            /* @__PURE__ */ jsx(
+                              "span",
+                              {
+                                className: bem("icon__sr__only"),
+                                id: `step-${i}-description`,
+                                children: t.status.completed
+                              }
+                            ),
+                            /* @__PURE__ */ jsx(
+                              Icon,
+                              {
+                                className: bem("icon__completed"),
+                                name: "Tick01Icon",
+                                size: "md"
+                              }
+                            )
+                          ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                            /* @__PURE__ */ jsx(
+                              "span",
+                              {
+                                className: bem("icon__sr__only"),
+                                id: `step-${i}-description`,
+                                children: t.status.open
+                              }
+                            ),
+                            i + 1
+                          ] })
+                        }
+                      )
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: bem("label__text", {
+                        "is-active": isActive || isCompleted
+                      }),
+                      children: label
+                    }
+                  )
+                ]
+              }
+            )
+          },
+          key ?? `step-${i}`
+        );
+      })
+    }
+  );
+}, "StepperView");
+export {
+  StepperView
+};

package/dist/components/switch/Switch.client.js

@@ -0,0 +1,62 @@
+"use client";
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { jsx } from "react/jsx-runtime";
+import { memo, useState, useEffect, useCallback } from "react";
+import { SwitchView } from "./Switch.view.js";
+function SwitchClient(props) {
+  const {
+    checked: controlledChecked,
+    onChange,
+    onFocus,
+    onBlur
+  } = props;
+  const [isChecked, setIsChecked] = useState(
+    controlledChecked ?? false
+  );
+  useEffect(() => {
+    if (controlledChecked !== void 0) {
+      setIsChecked(controlledChecked);
+    }
+  }, [controlledChecked]);
+  const handleChange = useCallback(
+    (e) => {
+      const newValue = e.target.checked;
+      setIsChecked(newValue);
+      onChange == null ? void 0 : onChange(e, newValue);
+    },
+    [onChange]
+  );
+  const [isFocused, setIsFocused] = useState(false);
+  const handleFocus = useCallback(
+    (e) => {
+      setIsFocused(true);
+      onFocus == null ? void 0 : onFocus(e);
+    },
+    [onFocus]
+  );
+  const handleBlur = useCallback(
+    (e) => {
+      setIsFocused(false);
+      onBlur == null ? void 0 : onBlur(e);
+    },
+    [onBlur]
+  );
+  return /* @__PURE__ */ jsx(
+    SwitchView,
+    {
+      ...props,
+      checked: void 0,
+      isChecked,
+      isFocused,
+      onBlurInternal: handleBlur,
+      onChangeInternal: handleChange,
+      onFocusInternal: handleFocus
+    }
+  );
+}
+__name(SwitchClient, "SwitchClient");
+const SwitchClient$1 = memo(SwitchClient);
+export {
+  SwitchClient$1 as default
+};

package/dist/components/switch/Switch.js

@@ -1,108 +1,12 @@
 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 [isChecked, setIsChecked] = useState(checked ?? false);
-  const handleChange = useCallback(
-    (event) => {
-      const newChecked = event.target.checked;
-      setIsChecked(newChecked);
-      if (onChange) onChange(event, newChecked);
-    },
-    [onChange]
-  );
-  const renderIcon = useCallback(
-    (name2, isActive) => /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: bem("icon__wrapper"), children: /* @__PURE__ */ jsx(
-      Icon,
-      {
-        className: bem("icon", { isActive: Boolean(isActive) }),
-        name: name2,
-        size: "sm"
-      }
-    ) }),
-    []
-  );
-  return /* @__PURE__ */ jsx("div", { className: bem(void 0, { [variant]: true }, className), children: /* @__PURE__ */ jsxs(
-    Label,
-    {
-      ...labelProps,
-      className: bem("label"),
-      htmlFor: name,
-      label,
-      required,
-      contentProps: {
-        className: bem("label__content")
-      },
-      textProps: {
-        "aria-hidden": "true"
-      },
-      children: [
-        /* @__PURE__ */ jsx(
-          Switch$1,
-          {
-            "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",
-            ...props,
-            className: bem("control", {
-              checked: isChecked,
-              disabled: Boolean(disabled)
-            }),
-            slotProps: {
-              track: {
-                className: bem("track")
-              },
-              thumb: {
-                className: bem("thumb")
-              },
-              input: {
-                className: bem("input"),
-                "aria-hidden": true
-              }
-            },
-            onChange: handleChange
-          }
-        ),
-        icon && checkedIcon && /* @__PURE__ */ jsx(
-          "div",
-          {
-            "aria-hidden": "true",
-            className: bem("icon__container", {
-              checked: isChecked
-            }),
-            children: isChecked ? renderIcon(checkedIcon, isChecked) : renderIcon(icon, isChecked)
-          }
-        )
-      ]
-    }
-  ) });
-}, "Switch");
-Switch.displayName = "Switch";
+import { createIsland } from "../../helpers/createIsland.js";
+import SwitchServer from "./Switch.server.js";
+const Switch = createIsland({
+  name: "Switch",
+  Server: SwitchServer,
+  loadLazy: /* @__PURE__ */ __name(() => import("./Switch.lazy.js"), "loadLazy")
+});
 export {
   Switch
 };

package/dist/components/switch/Switch.lazy.js

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

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

@@ -8,7 +8,9 @@ const styles = {
   "prokodo-Switch__control--checked": "prokodo-Switch__control--checked",
   "prokodo-Switch__control--disabled": "prokodo-Switch__control--disabled",
   "prokodo-Switch__input": "prokodo-Switch__input",
-  "prokodo-Switch__icon": "prokodo-Switch__icon",
+  "prokodo-Switch__thumb": "prokodo-Switch__thumb",
+  "prokodo-Switch__thumb--checked": "prokodo-Switch__thumb--checked",
+  "prokodo-Switch__thumb--disabled": "prokodo-Switch__thumb--disabled",
   "prokodo-Switch__icon__wrapper": "prokodo-Switch__icon__wrapper",
   "prokodo-Switch__icon--primary": "prokodo-Switch__icon--primary",
   "prokodo-Switch__icon--secondary": "prokodo-Switch__icon--secondary",
@@ -16,9 +18,6 @@ const styles = {
   "prokodo-Switch__icon--error": "prokodo-Switch__icon--error",
   "prokodo-Switch__icon--info": "prokodo-Switch__icon--info",
   "prokodo-Switch__icon--warning": "prokodo-Switch__icon--warning",
-  "prokodo-Switch__icon__container": "prokodo-Switch__icon__container",
-  "prokodo-Switch__icon__container--checked": "prokodo-Switch__icon__container--checked",
-  "prokodo-Switch__thumb": "prokodo-Switch__thumb",
   "prokodo-Switch__track": "prokodo-Switch__track",
   "prokodo-Switch__track--checked": "prokodo-Switch__track--checked",
   "prokodo-Switch__track--disabled": "prokodo-Switch__track--disabled",

package/dist/components/switch/Switch.server.js

@@ -0,0 +1,26 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { jsx } from "react/jsx-runtime";
+import { SwitchView } from "./Switch.view.js";
+function SwitchServer(props) {
+  const {
+    checked: controlledChecked
+  } = props;
+  const isChecked = typeof controlledChecked === "boolean" ? controlledChecked : false;
+  return /* @__PURE__ */ jsx(
+    SwitchView,
+    {
+      ...props,
+      checked: void 0,
+      isChecked,
+      isFocused: false,
+      onBlurInternal: /* @__PURE__ */ __name(() => void 0, "onBlurInternal"),
+      onChangeInternal: /* @__PURE__ */ __name(() => void 0, "onChangeInternal"),
+      onFocusInternal: /* @__PURE__ */ __name(() => void 0, "onFocusInternal")
+    }
+  );
+}
+__name(SwitchServer, "SwitchServer");
+export {
+  SwitchServer as default
+};

package/dist/components/switch/Switch.view.js

@@ -0,0 +1,101 @@
+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 "./Switch.module.scss.js";
+import { Label } from "../label/Label.js";
+import { Icon } from "../icon/Icon.js";
+const bem = create(styles, "Switch");
+const SwitchView = /* @__PURE__ */ __name(({
+  name,
+  label,
+  labelProps = {},
+  required = false,
+  variant = "primary",
+  icon,
+  checkedIcon,
+  isChecked,
+  disabled = false,
+  hideLabel = false,
+  className,
+  onChangeInternal,
+  onFocusInternal,
+  onBlurInternal
+}) => {
+  const hasLabel = typeof label === "string" && label.length > 0;
+  return /* @__PURE__ */ jsxs("div", { className: bem(void 0, { [variant]: true }, className), children: [
+    hasLabel && /* @__PURE__ */ jsx(
+      Label,
+      {
+        ...labelProps,
+        htmlFor: name,
+        label,
+        required,
+        className: bem(
+          "label",
+          void 0,
+          hideLabel ? "visually-hidden" : void 0
+        )
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: bem("control", {
+          checked: isChecked,
+          disabled: Boolean(disabled)
+        }),
+        children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: bem("track", {
+                checked: isChecked,
+                disabled: Boolean(disabled)
+              })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              "aria-checked": isChecked,
+              "aria-disabled": disabled || void 0,
+              "aria-required": required || void 0,
+              checked: isChecked,
+              disabled,
+              id: name,
+              name,
+              role: "switch",
+              type: "checkbox",
+              ...hasLabel && !hideLabel ? { "aria-labelledby": `${name}-label-text` } : { "aria-label": label },
+              className: bem("input"),
+              onBlur: onBlurInternal,
+              onChange: onChangeInternal,
+              onFocus: onFocusInternal
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: bem("thumb", {
+                checked: isChecked,
+                disabled: Boolean(disabled)
+              }),
+              children: (icon || checkedIcon) && /* @__PURE__ */ jsx("span", { className: bem("icon__wrapper"), children: /* @__PURE__ */ jsx(
+                Icon,
+                {
+                  className: bem("icon", { isActive: isChecked }),
+                  name: isChecked ? checkedIcon : icon,
+                  size: "sm"
+                }
+              ) })
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}, "SwitchView");
+export {
+  SwitchView
+};