@prokodo/ui 0.0.37 → 0.0.39

package/dist/components/sidenav/SideNav.view.js

@@ -0,0 +1,62 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { create } from "../../helpers/bem.js";
+import styles from "./SideNav.module.scss.js";
+import { Icon } from "../icon/Icon.js";
+import { Link } from "../link/Link.js";
+const bem = create(styles, "SideNav");
+function SideNavView({
+  items,
+  collapsed,
+  collapsedLabel = "Expand menu",
+  collapsedIcon = "ArrowRight01Icon",
+  unCollapsedLabel = "Collapse menu",
+  unCollapsedIcon = "ArrowLeft01Icon",
+  iconProps,
+  onToggle,
+  interactive = true,
+  ariaLabel = "Main navigation",
+  className
+}) {
+  const renderItem = /* @__PURE__ */ __name((icon, label) => /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("div", { className: bem("icon__wrapper"), children: /* @__PURE__ */ jsx(Icon, { size: 25, ...icon, className: bem("icon", void 0, icon == null ? void 0 : icon.className) }) }),
+    !collapsed && /* @__PURE__ */ jsx("span", { className: bem("label", { collapsed }), children: label })
+  ] }), "renderItem");
+  return /* @__PURE__ */ jsxs(
+    "aside",
+    {
+      "aria-label": ariaLabel,
+      className: bem(void 0, { collapsed, interactive }, className),
+      children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            "aria-controls": "sidenav",
+            "aria-expanded": !collapsed,
+            className: bem("toggle"),
+            type: "button",
+            onClick: onToggle,
+            children: [
+              /* @__PURE__ */ jsx(Icon, { size: "md", ...iconProps, name: collapsed ? collapsedIcon : unCollapsedIcon }),
+              /* @__PURE__ */ jsx("span", { className: bem("collape__label", { "is-hidden": collapsed }), children: collapsed ? collapsedLabel : unCollapsedLabel })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx("nav", { id: "sidenav", children: /* @__PURE__ */ jsx("ul", { className: bem("list"), children: items.map(({ label, icon, redirect }) => /* @__PURE__ */ jsx("li", { children: (redirect == null ? void 0 : redirect.href) !== void 0 ? /* @__PURE__ */ jsx(
+          Link,
+          {
+            ...redirect,
+            className: bem("link", { collapsed }, redirect == null ? void 0 : redirect.className),
+            href: redirect.href,
+            children: renderItem(icon, label)
+          }
+        ) : /* @__PURE__ */ jsx(Fragment, { children: renderItem(icon, label) }) }, label)) }) })
+      ]
+    }
+  );
+}
+__name(SideNavView, "SideNavView");
+export {
+  SideNavView as default
+};

package/dist/components/sidenav/index.js

@@ -0,0 +1,4 @@
+import { SideNav } from "./SideNav.js";
+export {
+  SideNav
+};

package/dist/components/slider/Slider.client.js

@@ -0,0 +1,65 @@
+"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 { SliderView } from "./Slider.view.js";
+function SliderClient(props) {
+  const {
+    value: controlledValue,
+    onChange,
+    onFocus,
+    onBlur,
+    min = 0,
+    max = 100
+  } = props;
+  const [internalValue, setInternalValue] = useState(() => {
+    const numeric = typeof controlledValue === "number" ? controlledValue : typeof controlledValue === "string" ? Number(controlledValue) : min;
+    return Math.min(Math.max(numeric, min), max);
+  });
+  useEffect(() => {
+    if (controlledValue !== void 0) {
+      const numeric = typeof controlledValue === "number" ? controlledValue : typeof controlledValue === "string" ? Number(controlledValue) : min;
+      setInternalValue(Math.min(Math.max(numeric, min), max));
+    }
+  }, [controlledValue, min, max]);
+  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]
+  );
+  const handleChange = useCallback(
+    (e) => {
+      const newVal = Number(e.target.value);
+      setInternalValue(newVal);
+      onChange == null ? void 0 : onChange(e, newVal);
+    },
+    [onChange]
+  );
+  return /* @__PURE__ */ jsx(
+    SliderView,
+    {
+      ...props,
+      internalValue,
+      isFocused,
+      onBlurInternal: handleBlur,
+      onChangeInternal: handleChange,
+      onFocusInternal: handleFocus
+    }
+  );
+}
+__name(SliderClient, "SliderClient");
+const SliderClient$1 = memo(SliderClient);
+export {
+  SliderClient$1 as default
+};

package/dist/components/slider/Slider.js

@@ -1,113 +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, 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,
-    className,
-    required,
-    value,
-    label,
-    labelProps,
-    valueLabelProps,
-    disabled,
-    onFocus,
-    onBlur,
-    onChange,
-    ...props
-  }) => {
-    const [Value, setValue] = useState(
-      Number(value) ?? 0
-    );
-    const [focused, setFocused] = useState(false);
-    const handleChangeFocus = useCallback(
-      (e) => {
-        setFocused(!focused);
-        !focused ? onFocus == null ? void 0 : onFocus(e) : onBlur == null ? void 0 : onBlur(e);
-      },
-      [focused, onFocus, onBlur]
-    );
-    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);
-      },
-      [onChange]
-    );
-    return /* @__PURE__ */ jsxs("div", { className: bem(void 0, void 0, className), children: [
-      /* @__PURE__ */ jsx(
-        Label,
-        {
-          ...labelProps,
-          className: bem("label"),
-          htmlFor: id,
-          label,
-          required
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        Slider$1,
-        {
-          marks: true,
-          "aria-label": label,
-          id,
-          ...props,
-          disabled,
-          value: Value,
-          slotProps: {
-            root: {
-              className: bem("root", {
-                disabled: Boolean(disabled)
-              })
-            },
-            rail: {
-              className: bem("rail")
-            },
-            track: {
-              className: bem("track")
-            },
-            thumb: {
-              className: bem("thumb", {
-                focused
-              })
-            },
-            mark: {
-              className: bem("mark")
-            },
-            markLabel: {
-              className: bem("mark__label")
-            }
-          },
-          slots: {
-            valueLabel: /* @__PURE__ */ __name(({ children }) => /* @__PURE__ */ jsx(
-              "span",
-              {
-                ...valueLabelProps,
-                className: bem("valueText", void 0, labelProps == null ? void 0 : labelProps.className),
-                children
-              }
-            ), "valueLabel")
-          },
-          onBlur: handleChangeFocus,
-          onChange: handleSliderChange,
-          onFocus: handleChangeFocus
-        }
-      )
-    ] });
-  }
-);
-Slider.displayName = "Slider";
+import { createIsland } from "../../helpers/createIsland.js";
+import SliderServer from "./Slider.server.js";
+const Slider = createIsland({
+  name: "Slider",
+  Server: SliderServer,
+  loadLazy: /* @__PURE__ */ __name(() => import("./Slider.lazy.js"), "loadLazy")
+});
 export {
   Slider
 };

package/dist/components/slider/Slider.lazy.js

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

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

@@ -3,14 +3,16 @@ const fadeInKeyframe = "fadeInKeyframe";
 const styles = {
   "prokodo-Slider": "prokodo-Slider",
   "prokodo-Slider__label": "prokodo-Slider__label",
+  "prokodo-Slider__label--is-hidden": "prokodo-Slider__label--is-hidden",
   "prokodo-Slider__root": "prokodo-Slider__root",
   "prokodo-Slider__root--disabled": "prokodo-Slider__root--disabled",
   "prokodo-Slider__rail": "prokodo-Slider__rail",
   "prokodo-Slider__track": "prokodo-Slider__track",
-  "prokodo-Slider__thumb": "prokodo-Slider__thumb",
-  "prokodo-Slider__thumb--focused": "prokodo-Slider__thumb--focused",
   "prokodo-Slider__mark": "prokodo-Slider__mark",
   "prokodo-Slider__mark__label": "prokodo-Slider__mark__label",
+  "prokodo-Slider__input": "prokodo-Slider__input",
+  "prokodo-Slider__thumb": "prokodo-Slider__thumb",
+  "prokodo-Slider__thumb--focused": "prokodo-Slider__thumb--focused",
   "prokodo-Slider__valueText": "prokodo-Slider__valueText",
   gradientMove,
   fadeInKeyframe

package/dist/components/slider/Slider.server.js

@@ -0,0 +1,23 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { jsx } from "react/jsx-runtime";
+import { SliderView } from "./Slider.view.js";
+function SliderServer(props) {
+  const { value, min = 0 } = props;
+  const numeric = typeof value === "number" ? value : typeof value === "string" ? Number(value) : min;
+  return /* @__PURE__ */ jsx(
+    SliderView,
+    {
+      ...props,
+      internalValue: numeric,
+      isFocused: false,
+      onBlurInternal: /* @__PURE__ */ __name(() => void 0, "onBlurInternal"),
+      onChangeInternal: /* @__PURE__ */ __name(() => void 0, "onChangeInternal"),
+      onFocusInternal: /* @__PURE__ */ __name(() => void 0, "onFocusInternal")
+    }
+  );
+}
+__name(SliderServer, "SliderServer");
+export {
+  SliderServer as default
+};

package/dist/components/slider/Slider.view.js

@@ -0,0 +1,130 @@
+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 { isString } from "../../helpers/validations.js";
+import styles from "./Slider.module.scss.js";
+import { Label } from "../label/Label.js";
+const bem = create(styles, "Slider");
+const SliderView = /* @__PURE__ */ __name(({
+  id,
+  label,
+  hideLabel,
+  labelProps = {},
+  required,
+  disabled,
+  // Defaultwerte für min, max, step:
+  min = 0,
+  max = 100,
+  step = 1,
+  marks = false,
+  valueLabelProps = {},
+  className,
+  internalValue,
+  isFocused,
+  onFocusInternal,
+  onBlurInternal,
+  onChangeInternal
+}) => {
+  var _a;
+  const clamped = internalValue < min ? min : internalValue > max ? max : internalValue;
+  const pct = max > min ? (clamped - min) / (max - min) * 100 : 0;
+  let markPoints = [];
+  if (Array.isArray(marks)) {
+    markPoints = marks;
+  } else if (marks === true) {
+    const pts = [];
+    if (step > 0) {
+      for (let v = min; v <= max; v += step) {
+        pts.push({ value: v });
+      }
+      if (pts.length === 0 || ((_a = pts == null ? void 0 : pts[(pts == null ? void 0 : pts.length) - 1]) == null ? void 0 : _a.value) !== max) {
+        pts.push({ value: max });
+      }
+    }
+    markPoints = pts;
+  }
+  return /* @__PURE__ */ jsxs("div", { className: bem(void 0, void 0, className), children: [
+    isString(label) && /* @__PURE__ */ jsx(
+      Label,
+      {
+        ...labelProps,
+        htmlFor: id,
+        label,
+        required,
+        className: bem("label", {
+          "is-hidden": Boolean(hideLabel)
+        })
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: bem("root", { disabled: Boolean(disabled) }), children: [
+      /* @__PURE__ */ jsx("div", { className: bem("rail") }),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: bem("track"),
+          style: { width: `${pct}%` }
+        }
+      ),
+      markPoints.map((m) => {
+        const leftPct = max > min ? ((m.value < min ? min : m.value > max ? max : m.value) - min) / (max - min) * 100 : 0;
+        return /* @__PURE__ */ jsx(
+          "div",
+          {
+            "aria-hidden": "true",
+            className: bem("mark"),
+            style: { left: `${leftPct}%` },
+            children: typeof m.label === "string" ? /* @__PURE__ */ jsx("span", { className: bem("mark__label"), children: m.label }) : null
+          },
+          m.value
+        );
+      }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          "aria-disabled": Boolean(disabled) || void 0,
+          "aria-label": label,
+          "aria-valuemax": max,
+          "aria-valuemin": min,
+          "aria-valuenow": internalValue,
+          "aria-valuetext": String(internalValue),
+          className: bem("input"),
+          disabled,
+          id,
+          max,
+          min,
+          step,
+          type: "range",
+          value: internalValue,
+          onBlur: onBlurInternal,
+          onChange: onChangeInternal,
+          onFocus: onFocusInternal
+        }
+      ),
+      !Boolean(disabled) && /* @__PURE__ */ jsx(
+        "span",
+        {
+          ...valueLabelProps,
+          className: bem("valueText", { focused: isFocused }),
+          style: {
+            left: `${pct}%`,
+            transform: "translateX(-50%)"
+          },
+          children: internalValue
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: bem("thumb", { focused: isFocused }),
+          style: {
+            left: `${pct}%`
+          }
+        }
+      )
+    ] })
+  ] });
+}, "SliderView");
+export {
+  SliderView
+};

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

@@ -0,0 +1,132 @@
+"use client";
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { jsx } from "react/jsx-runtime";
+import { memo, forwardRef, useState, useRef, useImperativeHandle, useCallback, useEffect, useMemo } from "react";
+import { StepperView } from "./Stepper.view.js";
+const StepperClient = forwardRef((props, ref) => {
+  const {
+    steps,
+    initialStep = 0,
+    onChange,
+    onFocus,
+    onBlur,
+    translations,
+    className,
+    ...rootProps
+  } = props;
+  const [activeStep, setActiveStep] = useState(initialStep);
+  const stepRefs = useRef([]);
+  useImperativeHandle(
+    ref,
+    () => ({
+      jumpToStep: /* @__PURE__ */ __name((index) => {
+        var _a;
+        if (index >= 0 && index < steps.length) {
+          setActiveStep(index);
+          (_a = stepRefs.current[index]) == null ? void 0 : _a.focus();
+        }
+      }, "jumpToStep")
+    }),
+    [steps.length]
+  );
+  const handleStepClick = useCallback(
+    (e, index) => {
+      var _a;
+      setActiveStep(index);
+      (_a = stepRefs.current[index]) == null ? void 0 : _a.focus();
+      onChange == null ? void 0 : onChange(e, index);
+    },
+    [onChange]
+  );
+  const handleStepKeyDown = useCallback(
+    (e, index) => {
+      var _a, _b;
+      const prev = index - 1;
+      const next = index + 1;
+      if (e.key === "ArrowLeft") {
+        if (prev >= 0 && prev < activeStep) {
+          setActiveStep(prev);
+          (_a = stepRefs.current[prev]) == null ? void 0 : _a.focus();
+          onChange == null ? void 0 : onChange(e, prev);
+        }
+        e.preventDefault();
+      } else if (e.key === "ArrowRight") {
+        if (next < steps.length && next < activeStep) {
+          setActiveStep(next);
+          (_b = stepRefs.current[next]) == null ? void 0 : _b.focus();
+          onChange == null ? void 0 : onChange(e, next);
+        }
+        e.preventDefault();
+      }
+    },
+    [onChange, steps.length, activeStep]
+  );
+  useEffect(() => {
+    if (initialStep >= 0 && initialStep < steps.length) {
+      setActiveStep(initialStep);
+    }
+  }, [initialStep, steps.length]);
+  const formattedSteps = useMemo(
+    () => steps.map((step, i) => {
+      const isActive = i === activeStep;
+      const isCompleted = activeStep > i;
+      return {
+        ...step,
+        innerContainerProps: {
+          // If the step is “completed” (activeStep > i) but not current (i !== active), allow click
+          onClick: /* @__PURE__ */ __name((e) => {
+            var _a, _b, _c;
+            if (isCompleted && !isActive) {
+              handleStepClick(e, i);
+            }
+            (_c = (_b = (_a = steps == null ? void 0 : steps[i]) == null ? void 0 : _a.innerContainerProps) == null ? void 0 : _b.onClick) == null ? void 0 : _c.call(_b, e);
+          }, "onClick"),
+          onKeyDown: /* @__PURE__ */ __name((e) => {
+            var _a, _b, _c;
+            handleStepKeyDown(e, i);
+            (_c = (_b = (_a = steps == null ? void 0 : steps[i]) == null ? void 0 : _a.innerContainerProps) == null ? void 0 : _b.onKeyDown) == null ? void 0 : _c.call(_b, e);
+          }, "onKeyDown"),
+          onFocus: /* @__PURE__ */ __name((e) => {
+            var _a, _b, _c;
+            onFocus == null ? void 0 : onFocus(e, i);
+            (_c = (_b = (_a = steps == null ? void 0 : steps[i]) == null ? void 0 : _a.innerContainerProps) == null ? void 0 : _b.onFocus) == null ? void 0 : _c.call(_b, e);
+          }, "onFocus"),
+          onBlur: /* @__PURE__ */ __name((e) => {
+            var _a, _b, _c;
+            onBlur == null ? void 0 : onBlur(e, i);
+            (_c = (_b = (_a = steps == null ? void 0 : steps[i]) == null ? void 0 : _a.innerContainerProps) == null ? void 0 : _b.onBlur) == null ? void 0 : _c.call(_b, e);
+          }, "onBlur"),
+          // Capture the <div role="button"> element in stepRefs.current[i]
+          ref: /* @__PURE__ */ __name((el) => {
+            stepRefs.current[i] = el;
+          }, "ref")
+        }
+      };
+    }),
+    [
+      steps,
+      activeStep,
+      handleStepClick,
+      handleStepKeyDown,
+      onFocus,
+      onBlur
+    ]
+  );
+  return /* @__PURE__ */ jsx(
+    StepperView,
+    {
+      ...rootProps,
+      activeStep,
+      className,
+      stepRefs,
+      steps: formattedSteps,
+      translations
+    }
+  );
+});
+StepperClient.displayName = "StepperClient";
+const StepperClient$1 = memo(StepperClient);
+export {
+  StepperClient$1 as default
+};