@prokodo/ui 0.0.49 → 0.0.50

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

@@ -2,7 +2,7 @@
 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 { memo, useCallback, useMemo, useState, useEffect } from "react";
 import { SliderView } from "./Slider.view.js";
 function SliderClient(props) {
   const {
@@ -11,41 +11,81 @@ function SliderClient(props) {
     onFocus,
     onBlur,
     min = 0,
-    max = 100
+    max = 100,
+    step = 1,
+    marks = false,
+    snap = "none"
   } = props;
-  const [internalValue, setInternalValue] = useState(() => {
+  const clamp = useCallback((v) => Math.min(Math.max(v, min), max), [min, max]);
+  const markValues = useMemo(() => {
+    if (Array.isArray(marks)) {
+      return [...new Set(marks.map((m) => m.value))].filter((v) => typeof v === "number").sort((a, b) => a - b);
+    }
+    if (marks === true) {
+      const pts = [];
+      if (step > 0) {
+        for (let v = min; v <= max; v += step) pts.push(+v.toFixed(4));
+        if (pts.length === 0 || pts[pts.length - 1] !== max) pts.push(max);
+      }
+      return pts;
+    }
+    return [];
+  }, [marks, min, max, step]);
+  const snapToStep = useCallback(
+    (v) => clamp(step > 0 ? Math.round((v - min) / step) * step + min : v),
+    [clamp, step, min]
+  );
+  const snapToMarks = useCallback((v) => {
+    const c = clamp(v);
+    const arr = markValues;
+    if (arr.length === 0) return snapToStep(c);
+    let best = c, bestD = Infinity;
+    for (const mv of arr) {
+      const d = Math.abs(c - mv);
+      if (d < bestD) {
+        best = mv;
+        bestD = d;
+      }
+    }
+    return clamp(best);
+  }, [clamp, markValues, snapToStep]);
+  const quantize = useCallback((v) => {
+    switch (snap) {
+      case "step":
+        return snapToStep(v);
+      case "marks":
+        return snapToMarks(v);
+      default:
+        return clamp(v);
+    }
+  }, [snap, snapToMarks, snapToStep, clamp]);
+  const initial = useMemo(() => {
     const numeric = typeof controlledValue === "number" ? controlledValue : typeof controlledValue === "string" ? Number(controlledValue) : min;
-    return Math.min(Math.max(numeric, min), max);
-  });
+    return quantize(numeric);
+  }, [controlledValue, min, quantize]);
+  const [internalValue, setInternalValue] = useState(initial);
   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));
+      const n = typeof controlledValue === "number" ? controlledValue : typeof controlledValue === "string" ? Number(controlledValue) : min;
+      const q = quantize(n);
+      setInternalValue((prev) => prev === q ? prev : q);
     }
-  }, [controlledValue, min, max]);
+  }, [controlledValue, min, quantize]);
   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]
-  );
+  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 raw = Number(e.currentTarget.value);
+    const q = quantize(raw);
+    setInternalValue((prev) => prev === q ? prev : q);
+    onChange == null ? void 0 : onChange(e, q);
+  }, [onChange, quantize]);
   return /* @__PURE__ */ jsx(
     SliderView,
     {

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

@@ -1,5 +1,3 @@
-const gradientMove = "gradientMove";
-const fadeInKeyframe = "fadeInKeyframe";
 const styles = {
   "prokodo-Slider": "prokodo-Slider",
   "prokodo-Slider__label": "prokodo-Slider__label",
@@ -13,12 +11,8 @@ const styles = {
   "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
+  "prokodo-Slider__valueText": "prokodo-Slider__valueText"
 };
 export {
-  styles as default,
-  fadeInKeyframe,
-  gradientMove
+  styles as default
 };

package/dist/components/snackbar/Snackbar.module.scss.js

@@ -1,5 +1,3 @@
-const gradientMove = "gradientMove";
-const fadeInKeyframe = "fadeInKeyframe";
 const styles = {
   "prokodo-Snackbar": "prokodo-Snackbar",
   "prokodo-Snackbar--success": "prokodo-Snackbar--success",
@@ -19,12 +17,8 @@ const styles = {
   "prokodo-SnackbarProvider__snackbar--is-top": "prokodo-SnackbarProvider__snackbar--is-top",
   "prokodo-SnackbarProvider__snackbar--is-bottom": "prokodo-SnackbarProvider__snackbar--is-bottom",
   "prokodo-SnackbarProvider__snackbar--is-left": "prokodo-SnackbarProvider__snackbar--is-left",
-  "prokodo-SnackbarProvider__snackbar--is-right": "prokodo-SnackbarProvider__snackbar--is-right",
-  gradientMove,
-  fadeInKeyframe
+  "prokodo-SnackbarProvider__snackbar--is-right": "prokodo-SnackbarProvider__snackbar--is-right"
 };
 export {
-  styles as default,
-  fadeInKeyframe,
-  gradientMove
+  styles as default
 };

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

@@ -1,5 +1,3 @@
-const gradientMove = "gradientMove";
-const fadeInKeyframe = "fadeInKeyframe";
 const styles = {
   "prokodo-Stepper": "prokodo-Stepper",
   "prokodo-Stepper__step": "prokodo-Stepper__step",
@@ -15,12 +13,8 @@ const styles = {
   "prokodo-Stepper__label": "prokodo-Stepper__label",
   "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,
-  fadeInKeyframe
+  "prokodo-Stepper__label__text--is-active": "prokodo-Stepper__label__text--is-active"
 };
 export {
-  styles as default,
-  fadeInKeyframe,
-  gradientMove
+  styles as default
 };

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

@@ -1,5 +1,3 @@
-const gradientMove = "gradientMove";
-const fadeInKeyframe = "fadeInKeyframe";
 const styles = {
   "prokodo-Switch": "prokodo-Switch",
   "prokodo-Switch__label": "prokodo-Switch__label",
@@ -20,12 +18,8 @@ const styles = {
   "prokodo-Switch__icon--warning": "prokodo-Switch__icon--warning",
   "prokodo-Switch__track": "prokodo-Switch__track",
   "prokodo-Switch__track--checked": "prokodo-Switch__track--checked",
-  "prokodo-Switch__track--disabled": "prokodo-Switch__track--disabled",
-  gradientMove,
-  fadeInKeyframe
+  "prokodo-Switch__track--disabled": "prokodo-Switch__track--disabled"
 };
 export {
-  styles as default,
-  fadeInKeyframe,
-  gradientMove
+  styles as default
 };

package/dist/components/table/Table.module.scss.js

@@ -1,5 +1,3 @@
-const gradientMove = "gradientMove";
-const fadeInKeyframe = "fadeInKeyframe";
 const styles = {
   "prokodo-Table": "prokodo-Table",
   "prokodo-Table__container": "prokodo-Table__container",
@@ -11,12 +9,8 @@ const styles = {
   "prokodo-Table__head__cell": "prokodo-Table__head__cell",
   "prokodo-Table__body__row": "prokodo-Table__body__row",
   "prokodo-Table__body__row--has-link": "prokodo-Table__body__row--has-link",
-  "prokodo-Table__caption": "prokodo-Table__caption",
-  gradientMove,
-  fadeInKeyframe
+  "prokodo-Table__caption": "prokodo-Table__caption"
 };
 export {
-  styles as default,
-  fadeInKeyframe,
-  gradientMove
+  styles as default
 };

package/dist/components/table/TableCell.module.scss.js

@@ -1,14 +1,8 @@
-const gradientMove = "gradientMove";
-const fadeInKeyframe = "fadeInKeyframe";
 const styles = {
   "prokodo-TableCell": "prokodo-TableCell",
   "prokodo-TableCell__inner": "prokodo-TableCell__inner",
-  "prokodo-TableCell__icon": "prokodo-TableCell__icon",
-  gradientMove,
-  fadeInKeyframe
+  "prokodo-TableCell__icon": "prokodo-TableCell__icon"
 };
 export {
-  styles as default,
-  fadeInKeyframe,
-  gradientMove
+  styles as default
 };

package/dist/components/teaser/Teaser.module.scss.js

@@ -1,5 +1,3 @@
-const gradientMove = "gradientMove";
-const fadeInKeyframe = "fadeInKeyframe";
 const styles = {
   "prokodo-Teaser": "prokodo-Teaser",
   "prokodo-Teaser__card": "prokodo-Teaser__card",
@@ -14,12 +12,8 @@ const styles = {
   "prokodo-Teaser__content--align-left": "prokodo-Teaser__content--align-left",
   "prokodo-Teaser__content--align-right": "prokodo-Teaser__content--align-right",
   "prokodo-Teaser__link": "prokodo-Teaser__link",
-  "prokodo-Teaser__link__icon": "prokodo-Teaser__link__icon",
-  gradientMove,
-  fadeInKeyframe
+  "prokodo-Teaser__link__icon": "prokodo-Teaser__link__icon"
 };
 export {
-  styles as default,
-  fadeInKeyframe,
-  gradientMove
+  styles as default
 };

package/dist/constants/project.js

@@ -1,4 +1,4 @@
-const PROKODO_UI_VERSION = "0.0.49";
+const PROKODO_UI_VERSION = "0.0.50";
 export {
   PROKODO_UI_VERSION
 };

package/dist/hooks/useResponsiveValue.js

@@ -0,0 +1,123 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { useState, useRef, useEffect, useMemo } from "react";
+function addMQChangeListener(mql, handler) {
+  var _a;
+  if ("addEventListener" in mql) {
+    mql.addEventListener("change", handler);
+    return () => mql.removeEventListener("change", handler);
+  }
+  const legacy = mql;
+  (_a = legacy.addListener) == null ? void 0 : _a.call(legacy, handler);
+  return () => {
+    var _a2;
+    return (_a2 = legacy.removeListener) == null ? void 0 : _a2.call(legacy, handler);
+  };
+}
+__name(addMQChangeListener, "addMQChangeListener");
+function useResponsiveValue(opts) {
+  const { fallback } = opts;
+  const [val, setVal] = useState(fallback);
+  const containerRef = useRef(null);
+  const [containerWidth, setContainerWidth] = useState(0);
+  useEffect(() => {
+    const hasContainerRules = Array.isArray(opts.containerRules) && opts.containerRules.length > 0;
+    if (!hasContainerRules) return;
+    const el = containerRef.current;
+    if (!el || typeof ResizeObserver === "undefined") return;
+    const ro = new ResizeObserver((entries) => {
+      var _a, _b;
+      const w = ((_b = (_a = entries[0]) == null ? void 0 : _a.contentRect) == null ? void 0 : _b.width) ?? 0;
+      setContainerWidth(w);
+    });
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, [opts.containerRules]);
+  const queriesKey = useMemo(
+    () => JSON.stringify(opts.valuesByQueries ?? []),
+    [opts.valuesByQueries]
+  );
+  const valuesByBreakpointKey = useMemo(
+    () => JSON.stringify(opts.valuesByBreakpoint ?? {}),
+    [opts.valuesByBreakpoint]
+  );
+  const breakpointsKey = useMemo(
+    () => JSON.stringify(opts.breakpoints ?? {}),
+    [opts.breakpoints]
+  );
+  const containerRulesKey = useMemo(
+    () => JSON.stringify(opts.containerRules ?? []),
+    [opts.containerRules]
+  );
+  useEffect(() => {
+    if (typeof window === "undefined" || !("matchMedia" in window)) return;
+    const disposers = [];
+    const queryPairs = opts.valuesByQueries ?? [];
+    const queryMQLs = queryPairs.map(([q]) => window.matchMedia(q));
+    queryMQLs.forEach((mql) => disposers.push(addMQChangeListener(mql, compute)));
+    const bpOrder = ["xl", "lg", "md", "sm", "xs"];
+    const bps = opts.breakpoints;
+    const valuesByBp = opts.valuesByBreakpoint;
+    const bpMQLs = [];
+    if (bps && valuesByBp) {
+      for (const k of bpOrder) {
+        if (k in valuesByBp && bps[k] != null) {
+          const mql = window.matchMedia(`(min-width:${bps[k]}px)`);
+          bpMQLs.push({ key: k, mql });
+          disposers.push(addMQChangeListener(mql, compute));
+        }
+      }
+    }
+    function compute() {
+      var _a;
+      const rules = opts.containerRules ?? [];
+      if (rules.length) {
+        const hit = rules.find((r) => {
+          const minOk = r.min == null || containerWidth >= r.min;
+          const maxOk = r.max == null || containerWidth < r.max;
+          return minOk && maxOk;
+        });
+        if (hit) {
+          setVal(hit.value);
+          return;
+        }
+      }
+      for (let i = 0; i < queryPairs.length; i++) {
+        const mql = queryMQLs[i];
+        if (mql != null && mql.matches === true) {
+          const v = (_a = queryPairs[i]) == null ? void 0 : _a[1];
+          setVal(v);
+          return;
+        }
+      }
+      if (bps && valuesByBp) {
+        for (const { key, mql } of bpMQLs) {
+          if (mql.matches && key in valuesByBp) {
+            setVal(valuesByBp[key]);
+            return;
+          }
+        }
+      }
+      setVal(fallback);
+    }
+    __name(compute, "compute");
+    compute();
+    return () => disposers.forEach((d) => d());
+  }, [
+    opts.breakpoints,
+    opts.containerRules,
+    opts.valuesByBreakpoint,
+    opts.valuesByQueries,
+    fallback,
+    containerWidth,
+    queriesKey,
+    valuesByBreakpointKey,
+    breakpointsKey,
+    containerRulesKey
+  ]);
+  return useMemo(() => ({ value: val, ref: containerRef }), [val]);
+}
+__name(useResponsiveValue, "useResponsiveValue");
+export {
+  useResponsiveValue
+};