@fab1o978/react-ui 0.1.3 → 0.1.5

package/dist/components/SlidingCounter/index.cjs

@@ -0,0 +1,181 @@
+'use strict';
+
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/components/SlidingCounter/SlidingCounter.tsx
+
+// src/components/SlidingCounter/SlidingCounter.module.scss
+var SlidingCounter_module_default = {
+  counter: "SlidingCounter_module_counter2",
+  sign: "SlidingCounter_module_sign2",
+  separator: "SlidingCounter_module_separator2",
+  reelWindow: "SlidingCounter_module_reelWindow2",
+  sm: "SlidingCounter_module_sm2",
+  md: "SlidingCounter_module_md2",
+  lg: "SlidingCounter_module_lg2",
+  reel: "SlidingCounter_module_reel2",
+  digitCell: "SlidingCounter_module_digitCell2"
+};
+
+// src/utils/color.ts
+function hexToHsl(hex) {
+  const r = parseInt(hex.slice(1, 3), 16) / 255;
+  const g = parseInt(hex.slice(3, 5), 16) / 255;
+  const b = parseInt(hex.slice(5, 7), 16) / 255;
+  const max = Math.max(r, g, b);
+  const min = Math.min(r, g, b);
+  const l = (max + min) / 2;
+  let h = 0;
+  let s = 0;
+  if (max !== min) {
+    const d = max - min;
+    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+    switch (max) {
+      case r:
+        h = ((g - b) / d + (g < b ? 6 : 0)) / 6;
+        break;
+      case g:
+        h = ((b - r) / d + 2) / 6;
+        break;
+      case b:
+        h = ((r - g) / d + 4) / 6;
+        break;
+    }
+  }
+  return [h * 360, s * 100, l * 100];
+}
+function hslToHex(h, s, l) {
+  const sl = s / 100;
+  const ll = l / 100;
+  const a = sl * Math.min(ll, 1 - ll);
+  const f = (n) => {
+    const k = (n + h / 30) % 12;
+    const color = ll - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
+    return Math.round(255 * color).toString(16).padStart(2, "0");
+  };
+  return `#${f(0)}${f(8)}${f(4)}`;
+}
+function hslToRgb(h, s, l) {
+  const sl = s / 100;
+  const ll = l / 100;
+  const a = sl * Math.min(ll, 1 - ll);
+  const f = (n) => {
+    const k = (n + h / 30) % 12;
+    return Math.round(255 * (ll - a * Math.max(Math.min(k - 3, 9 - k, 1), -1)));
+  };
+  return { r: f(0), g: f(8), b: f(4) };
+}
+function hslToRgba(h, s, l, alpha) {
+  const { r, g, b } = hslToRgb(h, s, l);
+  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+}
+function deriveAccent(hex) {
+  const [h, s, l] = hexToHsl(hex);
+  return {
+    base: hex,
+    dot: hslToHex(h, s, Math.min(l + 12, 95)),
+    track: hex,
+    ring: hex,
+    glow: hslToRgba(h, s, l, 0.3),
+    light: hslToHex(h, Math.max(s - 20, 0), Math.min(l + 45, 96))
+  };
+}
+function accentToCssVars(tokens, prefix) {
+  return {
+    [`--${prefix}-accent`]: tokens.base,
+    [`--${prefix}-accent-dot`]: tokens.dot,
+    [`--${prefix}-accent-track`]: tokens.track,
+    [`--${prefix}-accent-ring`]: tokens.ring,
+    [`--${prefix}-accent-glow`]: tokens.glow,
+    [`--${prefix}-accent-light`]: tokens.light
+  };
+}
+var COPIES = 3;
+var TOTAL = COPIES * 10;
+var DigitReel = ({ digit, direction, size }) => {
+  const posRef = react.useRef(10 + digit);
+  const prevDigitRef = react.useRef(digit);
+  const [pos, setPos] = react.useState(10 + digit);
+  const [animate, setAnimate] = react.useState(true);
+  react.useEffect(() => {
+    if (prevDigitRef.current === digit) return;
+    const prev = prevDigitRef.current;
+    let next = posRef.current;
+    if (direction === "up") {
+      next += digit > prev ? digit - prev : 10 - prev + digit;
+    } else {
+      next -= digit < prev ? prev - digit : prev + 10 - digit;
+    }
+    posRef.current = next;
+    prevDigitRef.current = digit;
+    setAnimate(true);
+    setPos(next);
+  }, [digit, direction]);
+  const handleTransitionEnd = () => {
+    const normalized = 10 + (posRef.current % 10 + 10) % 10;
+    posRef.current = normalized;
+    setAnimate(false);
+    setPos(normalized);
+  };
+  const translateY = -(pos / TOTAL) * 100;
+  const cells = Array.from(
+    { length: COPIES },
+    () => [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
+  ).flat();
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${SlidingCounter_module_default.reelWindow} ${SlidingCounter_module_default[size]}`, children: /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: SlidingCounter_module_default.reel,
+      style: {
+        transform: `translateY(${translateY}%)`,
+        transition: animate ? void 0 : "none"
+      },
+      onTransitionEnd: handleTransitionEnd,
+      children: cells.map((d, i) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: SlidingCounter_module_default.digitCell, children: d }, i))
+    }
+  ) });
+};
+function splitDigits(value, minDigits, decimals) {
+  const abs = Math.abs(value);
+  const fixed = abs.toFixed(decimals);
+  const [intPart, decPart = ""] = fixed.split(".");
+  const intDigits = intPart.split("").map(Number);
+  const padded = intDigits.length < minDigits ? [...Array(minDigits - intDigits.length).fill(0), ...intDigits] : intDigits;
+  const decDigits = decPart.split("").map(Number);
+  return { intDigits: padded, decDigits };
+}
+var SlidingCounter = ({
+  value,
+  minDigits = 1,
+  decimals = 0,
+  decimalSeparator = ".",
+  size = "md",
+  accent,
+  className
+}) => {
+  const accentVars = accent ? accentToCssVars(deriveAccent(accent), "sliding-counter") : {};
+  const safeValue = isFinite(value) ? value : 0;
+  const prevValueRef = react.useRef(safeValue);
+  const direction = safeValue >= prevValueRef.current ? "up" : "down";
+  prevValueRef.current = safeValue;
+  const { intDigits, decDigits } = splitDigits(safeValue, minDigits, decimals);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: [SlidingCounter_module_default.counter, SlidingCounter_module_default[size], className ?? ""].filter(Boolean).join(" "),
+      style: accentVars,
+      "aria-label": safeValue.toFixed(decimals),
+      children: [
+        safeValue < 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: SlidingCounter_module_default.sign, children: "\u2212" }),
+        intDigits.map((digit, i) => /* @__PURE__ */ jsxRuntime.jsx(DigitReel, { digit, direction, size }, `int-${intDigits.length - i}`)),
+        decimals > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: SlidingCounter_module_default.separator, children: decimalSeparator }),
+        decDigits.map((digit, i) => /* @__PURE__ */ jsxRuntime.jsx(DigitReel, { digit, direction, size }, `dec-${i}`))
+      ]
+    }
+  );
+};
+
+exports.SlidingCounter = SlidingCounter;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map

package/dist/components/SlidingCounter/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/SlidingCounter/SlidingCounter.module.scss","../../../src/utils/color.ts","../../../src/components/SlidingCounter/SlidingCounter.tsx"],"names":["counter","sign","separator","reelWindow","sm","md","lg","reel","digitCell","useRef","useState","useEffect","jsx","jsxs"],"mappings":"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","file":"index.cjs","sourcesContent":["@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap\");\n:root {\n  --accent: #3b82f6;\n  --accent-dot: rgb(82.52, 145, 247.08);\n  --accent-track: #3b82f6;\n  --accent-ring: #3b82f6;\n  --accent-glow: rgba(59, 130, 246, 0.3);\n  --accent-light: rgb(157.485, 188.725, 239.765);\n  --color-primary-50: rgb(169.3455, 194.6925, 236.1045);\n  --color-primary-100: rgb(149.4545, 184.4575, 241.6455);\n  --color-primary-400: rgb(82.52, 145, 247.08);\n  --color-primary-500: #3b82f6;\n  --color-primary-600: rgb(29.8390243902, 111.4024390244, 244.6609756098);\n  --color-primary-700: rgb(10.712195122, 95.2195121951, 233.287804878);\n  --color-neutral-0: #ffffff;\n  --color-neutral-100: #f3f4f6;\n  --color-neutral-200: #e5e7eb;\n  --color-neutral-400: #9ca3af;\n  --color-neutral-600: #4b5563;\n  --color-neutral-900: #111827;\n  --color-success-500: #22c55e;\n  --color-success-600: #16a34a;\n  --color-danger-500: #ef4444;\n  --color-danger-600: #dc2626;\n  --color-warning-500: #f59e0b;\n  --color-warning-600: #d97706;\n  --font-family-base: \"Inter\", system-ui, -apple-system, sans-serif;\n  --font-size-xs: 0.75rem;\n  --font-size-sm: 0.875rem;\n  --font-size-md: 1rem;\n  --font-size-lg: 1.125rem;\n  --spacing-1: 0.25rem;\n  --spacing-2: 0.5rem;\n  --spacing-3: 0.75rem;\n  --spacing-4: 1rem;\n  --radius-sm: 0.25rem;\n  --radius-md: 0.375rem;\n  --radius-lg: 0.5rem;\n  --radius-full: 9999px;\n  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);\n  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);\n  --transition-fast: 150ms ease;\n  --color-surface: #ffffff;\n  --color-surface-elevated: #ffffff;\n}\n\n[data-theme=dark] {\n  --color-neutral-0: #0f172a;\n  --color-neutral-100: #1e293b;\n  --color-neutral-200: #334155;\n  --color-neutral-400: #94a3b8;\n  --color-neutral-600: #cbd5e1;\n  --color-neutral-900: #f8fafc;\n  --color-surface: #1e293b;\n  --color-surface-elevated: #273549;\n  --color-primary-50: #172554;\n  --color-primary-100: #1e3a8a;\n  --accent-light: #172554;\n  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.4);\n  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.5), 0 2px 4px -2px rgb(0 0 0 / 0.4);\n}\n\n.counter {\n  display: inline-flex;\n  align-items: center;\n  gap: 1px;\n  font-family: var(--font-family-base);\n  font-weight: 600;\n  font-variant-numeric: tabular-nums;\n  color: var(--sliding-counter-accent-dot, var(--accent-dot));\n  user-select: none;\n}\n\n.sign {\n  line-height: 1;\n  margin-right: 2px;\n}\n\n.separator {\n  line-height: 1;\n  margin: 0 1px;\n  opacity: 0.5;\n  align-self: flex-end;\n  padding-bottom: 0.5em;\n}\n\n.reelWindow {\n  overflow: hidden;\n  position: relative;\n}\n.reelWindow.sm {\n  height: 1.6rem;\n  width: 0.85rem;\n  font-size: 1.25rem;\n  line-height: 1.6rem;\n}\n.reelWindow.md {\n  height: 2.6rem;\n  width: 1.35rem;\n  font-size: 2rem;\n  line-height: 2.6rem;\n}\n.reelWindow.lg {\n  height: 3.8rem;\n  width: 2rem;\n  font-size: 3rem;\n  line-height: 3.8rem;\n}\n\n.reel {\n  display: flex;\n  flex-direction: column;\n  transition: transform 420ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.digitCell {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n}\n.reelWindow.sm .digitCell {\n  height: 1.6rem;\n  width: 0.85rem;\n}\n.reelWindow.md .digitCell {\n  height: 2.6rem;\n  width: 1.35rem;\n}\n.reelWindow.lg .digitCell {\n  height: 3.8rem;\n  width: 2rem;\n}\n/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3N0eWxlcy90b2tlbnMuc2NzcyIsIlNsaWRpbmdDb3VudGVyLm1vZHVsZS5zY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUVRO0FBS1I7RUFFRTtFQUNBO0VBQ0E7RUFDQTtFQUNBO0VBQ0E7RUFHQTtFQUNBO0VBQ0E7RUFDQTtFQUNBO0VBQ0E7RUFHQTtFQUNBO0VBQ0E7RUFDQTtFQUNBO0VBQ0E7RUFHQTtFQUNBO0VBQ0E7RUFDQTtFQUNBO0VBQ0E7RUFHQTtFQUNBO0VBQ0E7RUFDQTtFQUNBO0VBR0E7RUFDQTtFQUNBO0VBQ0E7RUFHQTtFQUNBO0VBQ0E7RUFDQTtFQUdBO0VBQ0E7RUFHQTtFQUdBO0VBQ0E7OztBQVFGO0VBRUU7RUFDQTtFQUNBO0VBQ0E7RUFDQTtFQUNBO0VBR0E7RUFDQTtFQUdBO0VBQ0E7RUFJQTtFQUdBO0VBQ0E7OztBQ3pGRjtFQUNFO0VBQ0E7RUFDQTtFQUNBO0VBQ0E7RUFDQTtFQUNBO0VBQ0E7OztBQUlGO0VBQ0U7RUFDQTs7O0FBR0Y7RUFDRTtFQUNBO0VBQ0E7RUFDQTtFQUNBOzs7QUFJRjtFQUNFO0VBQ0E7O0FBR0U7RUFDRTtFQUNBO0VBQ0E7RUFDQTs7QUFKRjtFQUNFO0VBQ0E7RUFDQTtFQUNBOztBQUpGO0VBQ0U7RUFDQTtFQUNBO0VBQ0E7OztBQU1OO0VBQ0U7RUFDQTtFQUNBOzs7QUFJRjtFQUNFO0VBQ0E7RUFDQTtFQUNBOztBQUdFO0VBQ0U7RUFDQTs7QUFGRjtFQUNFO0VBQ0E7O0FBRkY7RUFDRTtFQUNBIiwic291cmNlc0NvbnRlbnQiOlsiQHVzZSBcInNhc3M6Y29sb3JcIjtcblxuQGltcG9ydCB1cmwoXCJodHRwczovL2ZvbnRzLmdvb2dsZWFwaXMuY29tL2NzczI/ZmFtaWx5PUludGVyOndnaHRANDAwOzUwMDs2MDAmZGlzcGxheT1zd2FwXCIpO1xuXG4vLyBBY2NlbnQgZGkgZGVmYXVsdCDigJQgY2FtYmlhIHF1aSBwZXIgYWdnaW9ybmFyZSB0dXR0YSBsYSBsaWJyZXJpYVxuJGFjY2VudDogIzNiODJmNjtcblxuOnJvb3Qge1xuICAvLyBBY2NlbnQgc2NhbGUg4oCUIGRlcml2YXRhIGRhICRhY2NlbnQgYSBjb21waWxlIHRpbWVcbiAgLS1hY2NlbnQ6ICAgICAgICAjeyRhY2NlbnR9O1xuICAtLWFjY2VudC1kb3Q6ICAgICN7Y29sb3Iuc2NhbGUoJGFjY2VudCwgJGxpZ2h0bmVzczogMTIlKX07XG4gIC0tYWNjZW50LXRyYWNrOiAgI3skYWNjZW50fTtcbiAgLS1hY2NlbnQtcmluZzogICAjeyRhY2NlbnR9O1xuICAtLWFjY2VudC1nbG93OiAgICN7Y29sb3IuY2hhbmdlKCRhY2NlbnQsICRhbHBoYTogMC4zKX07XG4gIC0tYWNjZW50LWxpZ2h0OiAgI3tjb2xvci5zY2FsZSgkYWNjZW50LCAkbGlnaHRuZXNzOiA0NSUsICRzYXR1cmF0aW9uOiAtMjAlKX07XG5cbiAgLy8gUHJpbWFyeSBzY2FsZSAobWFudGVudXRhIHBlciByZXRyb2NvbXBhdGliaWxpdMOgIGNvbiBCdXR0b24sIEJhZGdlLCBJbnB1dClcbiAgLS1jb2xvci1wcmltYXJ5LTUwOiAgI3tjb2xvci5zY2FsZSgkYWNjZW50LCAkbGlnaHRuZXNzOiA0OSUsICRzYXR1cmF0aW9uOiAtMzAlKX07XG4gIC0tY29sb3ItcHJpbWFyeS0xMDA6ICN7Y29sb3Iuc2NhbGUoJGFjY2VudCwgJGxpZ2h0bmVzczogNDIlLCAkc2F0dXJhdGlvbjogLTE1JSl9O1xuICAtLWNvbG9yLXByaW1hcnktNDAwOiAje2NvbG9yLnNjYWxlKCRhY2NlbnQsICRsaWdodG5lc3M6IDEyJSl9O1xuICAtLWNvbG9yLXByaW1hcnktNTAwOiAjeyRhY2NlbnR9O1xuICAtLWNvbG9yLXByaW1hcnktNjAwOiAje2NvbG9yLnNjYWxlKCRhY2NlbnQsICRsaWdodG5lc3M6IC0xMCUpfTtcbiAgLS1jb2xvci1wcmltYXJ5LTcwMDogI3tjb2xvci5zY2FsZSgkYWNjZW50LCAkbGlnaHRuZXNzOiAtMjAlKX07XG5cbiAgLy8gTmV1dHJhbFxuICAtLWNvbG9yLW5ldXRyYWwtMDogICAjZmZmZmZmO1xuICAtLWNvbG9yLW5ldXRyYWwtMTAwOiAjZjNmNGY2O1xuICAtLWNvbG9yLW5ldXRyYWwtMjAwOiAjZTVlN2ViO1xuICAtLWNvbG9yLW5ldXRyYWwtNDAwOiAjOWNhM2FmO1xuICAtLWNvbG9yLW5ldXRyYWwtNjAwOiAjNGI1NTYzO1xuICAtLWNvbG9yLW5ldXRyYWwtOTAwOiAjMTExODI3O1xuXG4gIC8vIFNlbWFudGljXG4gIC0tY29sb3Itc3VjY2Vzcy01MDA6ICMyMmM1NWU7XG4gIC0tY29sb3Itc3VjY2Vzcy02MDA6ICMxNmEzNGE7XG4gIC0tY29sb3ItZGFuZ2VyLTUwMDogICNlZjQ0NDQ7XG4gIC0tY29sb3ItZGFuZ2VyLTYwMDogICNkYzI2MjY7XG4gIC0tY29sb3Itd2FybmluZy01MDA6ICNmNTllMGI7XG4gIC0tY29sb3Itd2FybmluZy02MDA6ICNkOTc3MDY7XG5cbiAgLy8gVHlwb2dyYXBoeVxuICAtLWZvbnQtZmFtaWx5LWJhc2U6IFwiSW50ZXJcIiwgc3lzdGVtLXVpLCAtYXBwbGUtc3lzdGVtLCBzYW5zLXNlcmlmO1xuICAtLWZvbnQtc2l6ZS14czogMC43NXJlbTtcbiAgLS1mb250LXNpemUtc206IDAuODc1cmVtO1xuICAtLWZvbnQtc2l6ZS1tZDogMXJlbTtcbiAgLS1mb250LXNpemUtbGc6IDEuMTI1cmVtO1xuXG4gIC8vIFNwYWNpbmdcbiAgLS1zcGFjaW5nLTE6IDAuMjVyZW07XG4gIC0tc3BhY2luZy0yOiAwLjVyZW07XG4gIC0tc3BhY2luZy0zOiAwLjc1cmVtO1xuICAtLXNwYWNpbmctNDogMXJlbTtcblxuICAvLyBSYWRpdXNcbiAgLS1yYWRpdXMtc206ICAgMC4yNXJlbTtcbiAgLS1yYWRpdXMtbWQ6ICAgMC4zNzVyZW07XG4gIC0tcmFkaXVzLWxnOiAgIDAuNXJlbTtcbiAgLS1yYWRpdXMtZnVsbDogOTk5OXB4O1xuXG4gIC8vIFNoYWRvd3NcbiAgLS1zaGFkb3ctc206IDAgMXB4IDJweCAwIHJnYigwIDAgMCAvIDAuMDUpO1xuICAtLXNoYWRvdy1tZDogMCA0cHggNnB4IC0xcHggcmdiKDAgMCAwIC8gMC4xKSwgMCAycHggNHB4IC0ycHggcmdiKDAgMCAwIC8gMC4xKTtcblxuICAvLyBUcmFuc2l0aW9uc1xuICAtLXRyYW5zaXRpb24tZmFzdDogMTUwbXMgZWFzZTtcblxuICAvLyBTdXJmYWNlIChiYWNrZ3JvdW5kIGRpIGNhcmQvcGFuZWwpXG4gIC0tY29sb3Itc3VyZmFjZTogICAgICAgICAgI2ZmZmZmZjtcbiAgLS1jb2xvci1zdXJmYWNlLWVsZXZhdGVkOiAjZmZmZmZmO1xufVxuXG4vLyDilIDilIDilIAgRGFyayB0aGVtZSDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIBcbi8vIEFwcGxpY2F0byB2aWEgZGF0YS10aGVtZT1cImRhcmtcIiBzdWxsJ2VsZW1lbnRvIHJvb3QgKGdlc3RpdG8gZGEgU3Rvcnlib29rIGRlY29yYXRvclxuLy8gZSBkYWxsJ2FwcCBjb25zdW1lcikuIEkgY29tcG9uZW50aSBub24gZGV2b25vIGZhcmUgbnVsbGEgZGkgc3BlY2lhbGU6IGJhc3RhIGNoZVxuLy8gdXNpbm8gaSB0b2tlbiB2YXIoKSBlIHJpY2V2ZXJhbm5vIGF1dG9tYXRpY2FtZW50ZSBpIHZhbG9yaSBkYXJrLlxuXG5bZGF0YS10aGVtZT1cImRhcmtcIl0ge1xuICAvLyBOZXV0cmFsIChzY2FsYSBpbnZlcnRpdGEpXG4gIC0tY29sb3ItbmV1dHJhbC0wOiAgICMwZjE3MmE7XG4gIC0tY29sb3ItbmV1dHJhbC0xMDA6ICMxZTI5M2I7XG4gIC0tY29sb3ItbmV1dHJhbC0yMDA6ICMzMzQxNTU7XG4gIC0tY29sb3ItbmV1dHJhbC00MDA6ICM5NGEzYjg7XG4gIC0tY29sb3ItbmV1dHJhbC02MDA6ICNjYmQ1ZTE7XG4gIC0tY29sb3ItbmV1dHJhbC05MDA6ICNmOGZhZmM7XG5cbiAgLy8gU3VyZmFjZVxuICAtLWNvbG9yLXN1cmZhY2U6ICAgICAgICAgICMxZTI5M2I7XG4gIC0tY29sb3Itc3VyZmFjZS1lbGV2YXRlZDogIzI3MzU0OTtcblxuICAvLyBQcmltYXJ5IHNjYWxlIGRhcmsgKHBlciBpbCBkZWZhdWx0IGFjY2VudCBibHUg4oCUIGxlIHNmdW1hdHVyZSBjaGlhcmUgZGl2ZW50YW5vIHNjdXJlKVxuICAtLWNvbG9yLXByaW1hcnktNTA6ICAjMTcyNTU0O1xuICAtLWNvbG9yLXByaW1hcnktMTAwOiAjMWUzYThhO1xuICAvLyA0MDAgLyA1MDAgLyA2MDAgLyA3MDAgcmltYW5nb25vIGludmFyaWF0aSAoYWJiYXN0YW56YSBzYXR1cmkgc3UgYmcgc2N1cm8pXG5cbiAgLy8gQWNjZW50IGxpZ2h0OiB2YXJpYW50ZSBzY3VyYVxuICAtLWFjY2VudC1saWdodDogIzE3MjU1NDtcblxuICAvLyBTaGFkb3dzIChwacO5IGZvcnRpIHN1IGJnIHNjdXJvKVxuICAtLXNoYWRvdy1zbTogMCAxcHggMnB4IDAgcmdiKDAgMCAwIC8gMC40KTtcbiAgLS1zaGFkb3ctbWQ6IDAgNHB4IDZweCAtMXB4IHJnYigwIDAgMCAvIDAuNSksIDAgMnB4IDRweCAtMnB4IHJnYigwIDAgMCAvIDAuNCk7XG59XG4iLCJAdXNlIFwiLi4vLi4vc3R5bGVzL3Rva2Vuc1wiO1xuXG4vLyDilIDilIAgU2l6ZSBtYXAg4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSAXG4kc2l6ZXM6IChcbiAgc206IChmb250OiAxLjI1cmVtLCBjZWxsOiAxLjZyZW0sIHdpZHRoOiAwLjg1cmVtKSxcbiAgbWQ6IChmb250OiAycmVtLCAgICBjZWxsOiAyLjZyZW0sIHdpZHRoOiAxLjM1cmVtKSxcbiAgbGc6IChmb250OiAzcmVtLCAgICBjZWxsOiAzLjhyZW0sIHdpZHRoOiAycmVtKSxcbik7XG5cbi8vIOKUgOKUgCBDb3VudGVyIHdyYXBwZXIg4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSAXG4uY291bnRlciB7XG4gIGRpc3BsYXk6IGlubGluZS1mbGV4O1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xuICBnYXA6IDFweDtcbiAgZm9udC1mYW1pbHk6IHZhcigtLWZvbnQtZmFtaWx5LWJhc2UpO1xuICBmb250LXdlaWdodDogNjAwO1xuICBmb250LXZhcmlhbnQtbnVtZXJpYzogdGFidWxhci1udW1zO1xuICBjb2xvcjogdmFyKC0tc2xpZGluZy1jb3VudGVyLWFjY2VudC1kb3QsIHZhcigtLWFjY2VudC1kb3QpKTtcbiAgdXNlci1zZWxlY3Q6IG5vbmU7XG59XG5cbi8vIOKUgOKUgCBTaWduIChtaW51cykgYW5kIGRlY2ltYWwgc2VwYXJhdG9yIOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgOKUgFxuLnNpZ24ge1xuICBsaW5lLWhlaWdodDogMTtcbiAgbWFyZ2luLXJpZ2h0OiAycHg7XG59XG5cbi5zZXBhcmF0b3Ige1xuICBsaW5lLWhlaWdodDogMTtcbiAgbWFyZ2luOiAwIDFweDtcbiAgb3BhY2l0eTogMC41O1xuICBhbGlnbi1zZWxmOiBmbGV4LWVuZDtcbiAgcGFkZGluZy1ib3R0b206IDAuNWVtO1xufVxuXG4vLyDilIDilIAgUmVlbCB3aW5kb3cg4oCUIGNsaXBzIHRvIG9uZSBkaWdpdCBoZWlnaHQg4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSA4pSAXG4ucmVlbFdpbmRvdyB7XG4gIG92ZXJmbG93OiBoaWRkZW47XG4gIHBvc2l0aW9uOiByZWxhdGl2ZTtcblxuICBAZWFjaCAkbmFtZSwgJG1hcCBpbiAkc2l6ZXMge1xuICAgICYuI3skbmFtZX0ge1xuICAgICAgaGVpZ2h0OiBtYXAtZ2V0KCRtYXAsIGNlbGwpO1xuICAgICAgd2lkdGg6IG1hcC1nZXQoJG1hcCwgd2lkdGgpO1xuICAgICAgZm9udC1zaXplOiBtYXAtZ2V0KCRtYXAsIGZvbnQpO1xuICAgICAgbGluZS1oZWlnaHQ6IG1hcC1nZXQoJG1hcCwgY2VsbCk7XG4gICAgfVxuICB9XG59XG5cbi8vIOKUgOKUgCBUaGUgc2Nyb2xsaW5nIGNvbHVtbiDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIBcbi5yZWVsIHtcbiAgZGlzcGxheTogZmxleDtcbiAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcbiAgdHJhbnNpdGlvbjogdHJhbnNmb3JtIDQyMG1zIGN1YmljLWJlemllcigwLjQsIDAsIDAuMiwgMSk7XG59XG5cbi8vIOKUgOKUgCBTaW5nbGUgZGlnaXQgY2VsbCDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIBcbi5kaWdpdENlbGwge1xuICBkaXNwbGF5OiBmbGV4O1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xuICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcbiAgZmxleC1zaHJpbms6IDA7XG5cbiAgQGVhY2ggJG5hbWUsICRtYXAgaW4gJHNpemVzIHtcbiAgICAucmVlbFdpbmRvdy4jeyRuYW1lfSAmIHtcbiAgICAgIGhlaWdodDogbWFwLWdldCgkbWFwLCBjZWxsKTtcbiAgICAgIHdpZHRoOiBtYXAtZ2V0KCRtYXAsIHdpZHRoKTtcbiAgICB9XG4gIH1cbn1cbiJdfQ== */","export function hexToHsl(hex: string): [number, number, number] {\n  const r = parseInt(hex.slice(1, 3), 16) / 255;\n  const g = parseInt(hex.slice(3, 5), 16) / 255;\n  const b = parseInt(hex.slice(5, 7), 16) / 255;\n\n  const max = Math.max(r, g, b);\n  const min = Math.min(r, g, b);\n  const l = (max + min) / 2;\n  let h = 0;\n  let s = 0;\n\n  if (max !== min) {\n    const d = max - min;\n    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);\n    switch (max) {\n      case r: h = ((g - b) / d + (g < b ? 6 : 0)) / 6; break;\n      case g: h = ((b - r) / d + 2) / 6; break;\n      case b: h = ((r - g) / d + 4) / 6; break;\n    }\n  }\n\n  return [h * 360, s * 100, l * 100];\n}\n\nexport function hslToHex(h: number, s: number, l: number): string {\n  const sl = s / 100;\n  const ll = l / 100;\n  const a = sl * Math.min(ll, 1 - ll);\n  const f = (n: number) => {\n    const k = (n + h / 30) % 12;\n    const color = ll - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n    return Math.round(255 * color).toString(16).padStart(2, \"0\");\n  };\n  return `#${f(0)}${f(8)}${f(4)}`;\n}\n\nexport function hslToRgb(h: number, s: number, l: number): { r: number; g: number; b: number } {\n  const sl = s / 100;\n  const ll = l / 100;\n  const a = sl * Math.min(ll, 1 - ll);\n  const f = (n: number) => {\n    const k = (n + h / 30) % 12;\n    return Math.round(255 * (ll - a * Math.max(Math.min(k - 3, 9 - k, 1), -1)));\n  };\n  return { r: f(0), g: f(8), b: f(4) };\n}\n\nexport function rgbToHsl(r: number, g: number, b: number): [number, number, number] {\n  const rr = r / 255, gg = g / 255, bb = b / 255;\n  const max = Math.max(rr, gg, bb);\n  const min = Math.min(rr, gg, bb);\n  const l = (max + min) / 2;\n  let h = 0, s = 0;\n  if (max !== min) {\n    const d = max - min;\n    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);\n    switch (max) {\n      case rr: h = ((gg - bb) / d + (gg < bb ? 6 : 0)) / 6; break;\n      case gg: h = ((bb - rr) / d + 2) / 6; break;\n      case bb: h = ((rr - gg) / d + 4) / 6; break;\n    }\n  }\n  return [h * 360, s * 100, l * 100];\n}\n\nfunction hslToRgba(h: number, s: number, l: number, alpha: number): string {\n  const { r, g, b } = hslToRgb(h, s, l);\n  return `rgba(${r}, ${g}, ${b}, ${alpha})`;\n}\n\nexport interface AccentTokens {\n  base: string;\n  dot: string;\n  track: string;\n  ring: string;\n  glow: string;\n  light: string;\n}\n\nexport interface ColorValue {\n  hex: string;\n  hexa: string;\n  hsl: string;\n  hsla: string;\n  rgb: string;\n  rgba: string;\n  h: number;\n  s: number;\n  l: number;\n  a: number;\n}\n\nexport function buildColorValue(h: number, s: number, l: number, a: number): ColorValue {\n  const { r, g, b } = hslToRgb(h, s, l);\n  const hex = hslToHex(h, s, l);\n  const alphaHex = Math.round(a * 255).toString(16).padStart(2, \"0\");\n  const hR = Math.round(h), sR = Math.round(s), lR = Math.round(l);\n  const aR = Math.round(a * 100) / 100;\n  return {\n    hex,\n    hexa: `${hex}${alphaHex}`,\n    hsl: `hsl(${hR}, ${sR}%, ${lR}%)`,\n    hsla: `hsla(${hR}, ${sR}%, ${lR}%, ${aR})`,\n    rgb: `rgb(${r}, ${g}, ${b})`,\n    rgba: `rgba(${r}, ${g}, ${b}, ${aR})`,\n    h, s, l, a,\n  };\n}\n\nexport function deriveAccent(hex: string): AccentTokens {\n  const [h, s, l] = hexToHsl(hex);\n  return {\n    base:  hex,\n    dot:   hslToHex(h, s, Math.min(l + 12, 95)),\n    track: hex,\n    ring:  hex,\n    glow:  hslToRgba(h, s, l, 0.3),\n    light: hslToHex(h, Math.max(s - 20, 0), Math.min(l + 45, 96)),\n  };\n}\n\nexport function accentToCssVars(\n  tokens: AccentTokens,\n  prefix: string\n): Record<string, string> {\n  return {\n    [`--${prefix}-accent`]:       tokens.base,\n    [`--${prefix}-accent-dot`]:   tokens.dot,\n    [`--${prefix}-accent-track`]: tokens.track,\n    [`--${prefix}-accent-ring`]:  tokens.ring,\n    [`--${prefix}-accent-glow`]:  tokens.glow,\n    [`--${prefix}-accent-light`]: tokens.light,\n  };\n}\n","import React, { useEffect, useRef, useState } from \"react\";\nimport styles from \"./SlidingCounter.module.scss\";\nimport { deriveAccent, accentToCssVars } from \"../../utils/color\";\n\nexport type SlidingCounterSize = \"sm\" | \"md\" | \"lg\";\n\nexport interface SlidingCounterProps {\n  value: number;\n  /** Minimum integer digits shown (zero-padded on the left) */\n  minDigits?: number;\n  /** Number of decimal digits to display. 0 = no decimals. */\n  decimals?: number;\n  /** Decimal separator character */\n  decimalSeparator?: string;\n  size?: SlidingCounterSize;\n  /** Custom accent color — overrides the global theme for this instance */\n  accent?: string;\n  className?: string;\n}\n\ninterface DigitReelProps {\n  digit: number;\n  direction: \"up\" | \"down\";\n  size: SlidingCounterSize;\n}\n\n// 3 copies of 0-9: [0-9 | 0-9 | 0-9] — middle copy is the \"home\" position.\n// After each transition we silently snap back to middle to keep the range usable indefinitely.\nconst COPIES = 3;\nconst TOTAL = COPIES * 10; // 30 cells\n\nconst DigitReel: React.FC<DigitReelProps> = ({ digit, direction, size }) => {\n  const posRef = useRef(10 + digit);\n  const prevDigitRef = useRef(digit);\n  const [pos, setPos] = useState(10 + digit);\n  const [animate, setAnimate] = useState(true);\n\n  useEffect(() => {\n    if (prevDigitRef.current === digit) return;\n\n    const prev = prevDigitRef.current;\n    let next = posRef.current;\n\n    if (direction === \"up\") {\n      next += digit > prev ? digit - prev : 10 - prev + digit;\n    } else {\n      next -= digit < prev ? prev - digit : prev + 10 - digit;\n    }\n\n    posRef.current = next;\n    prevDigitRef.current = digit;\n    setAnimate(true);\n    setPos(next);\n  }, [digit, direction]);\n\n  const handleTransitionEnd = () => {\n    const normalized = 10 + (((posRef.current % 10) + 10) % 10);\n    posRef.current = normalized;\n    setAnimate(false);\n    setPos(normalized);\n  };\n\n  const translateY = -(pos / TOTAL) * 100;\n\n  const cells = Array.from({ length: COPIES }, () =>\n    [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]\n  ).flat();\n\n  return (\n    <div className={`${styles.reelWindow} ${styles[size]}`}>\n      <div\n        className={styles.reel}\n        style={{\n          transform: `translateY(${translateY}%)`,\n          transition: animate ? undefined : \"none\",\n        }}\n        onTransitionEnd={handleTransitionEnd}\n      >\n        {cells.map((d, i) => (\n          <div key={i} className={styles.digitCell}>\n            {d}\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n};\n\n/** Split a number into integer and decimal digit arrays with explicit decimal places. */\nfunction splitDigits(\n  value: number,\n  minDigits: number,\n  decimals: number\n): { intDigits: number[]; decDigits: number[] } {\n  const abs = Math.abs(value);\n  const fixed = abs.toFixed(decimals);\n  const [intPart, decPart = \"\"] = fixed.split(\".\");\n\n  const intDigits = intPart.split(\"\").map(Number);\n  const padded =\n    intDigits.length < minDigits\n      ? [...Array(minDigits - intDigits.length).fill(0), ...intDigits]\n      : intDigits;\n\n  const decDigits = decPart.split(\"\").map(Number);\n\n  return { intDigits: padded, decDigits };\n}\n\nexport const SlidingCounter: React.FC<SlidingCounterProps> = ({\n  value,\n  minDigits = 1,\n  decimals = 0,\n  decimalSeparator = \".\",\n  size = \"md\",\n  accent,\n  className,\n}) => {\n  const accentVars = accent\n    ? accentToCssVars(deriveAccent(accent), \"sliding-counter\")\n    : {};\n\n  const safeValue = isFinite(value) ? value : 0;\n\n  const prevValueRef = useRef(safeValue);\n  const direction = safeValue >= prevValueRef.current ? \"up\" : \"down\";\n  prevValueRef.current = safeValue;\n\n  const { intDigits, decDigits } = splitDigits(safeValue, minDigits, decimals);\n\n  return (\n    <div\n      className={[styles.counter, styles[size], className ?? \"\"]\n        .filter(Boolean)\n        .join(\" \")}\n      style={accentVars as React.CSSProperties}\n      aria-label={safeValue.toFixed(decimals)}\n    >\n      {safeValue < 0 && <span className={styles.sign}>−</span>}\n\n      {intDigits.map((digit, i) => (\n        <DigitReel key={`int-${intDigits.length - i}`} digit={digit} direction={direction} size={size} />\n      ))}\n\n      {decimals > 0 && (\n        <span className={styles.separator}>{decimalSeparator}</span>\n      )}\n\n      {decDigits.map((digit, i) => (\n        <DigitReel key={`dec-${i}`} digit={digit} direction={direction} size={size} />\n      ))}\n    </div>\n  );\n};\n"]}

package/dist/components/SlidingCounter/index.css

@@ -0,0 +1,133 @@
+@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap";
+
+/* src/components/SlidingCounter/SlidingCounter.module.scss */
+:root {
+  --accent: #3b82f6;
+  --accent-dot: rgb(82.52, 145, 247.08);
+  --accent-track: #3b82f6;
+  --accent-ring: #3b82f6;
+  --accent-glow: rgba(59, 130, 246, 0.3);
+  --accent-light: rgb(157.485, 188.725, 239.765);
+  --color-primary-50: rgb(169.3455, 194.6925, 236.1045);
+  --color-primary-100: rgb(149.4545, 184.4575, 241.6455);
+  --color-primary-400: rgb(82.52, 145, 247.08);
+  --color-primary-500: #3b82f6;
+  --color-primary-600: rgb(29.8390243902, 111.4024390244, 244.6609756098);
+  --color-primary-700: rgb(10.712195122, 95.2195121951, 233.287804878);
+  --color-neutral-0: #ffffff;
+  --color-neutral-100: #f3f4f6;
+  --color-neutral-200: #e5e7eb;
+  --color-neutral-400: #9ca3af;
+  --color-neutral-600: #4b5563;
+  --color-neutral-900: #111827;
+  --color-success-500: #22c55e;
+  --color-success-600: #16a34a;
+  --color-danger-500: #ef4444;
+  --color-danger-600: #dc2626;
+  --color-warning-500: #f59e0b;
+  --color-warning-600: #d97706;
+  --font-family-base:
+    "Inter",
+    system-ui,
+    -apple-system,
+    sans-serif;
+  --font-size-xs: 0.75rem;
+  --font-size-sm: 0.875rem;
+  --font-size-md: 1rem;
+  --font-size-lg: 1.125rem;
+  --spacing-1: 0.25rem;
+  --spacing-2: 0.5rem;
+  --spacing-3: 0.75rem;
+  --spacing-4: 1rem;
+  --radius-sm: 0.25rem;
+  --radius-md: 0.375rem;
+  --radius-lg: 0.5rem;
+  --radius-full: 9999px;
+  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --transition-fast: 150ms ease;
+  --color-surface: #ffffff;
+  --color-surface-elevated: #ffffff;
+}
+[data-theme=dark] {
+  --color-neutral-0: #0f172a;
+  --color-neutral-100: #1e293b;
+  --color-neutral-200: #334155;
+  --color-neutral-400: #94a3b8;
+  --color-neutral-600: #cbd5e1;
+  --color-neutral-900: #f8fafc;
+  --color-surface: #1e293b;
+  --color-surface-elevated: #273549;
+  --color-primary-50: #172554;
+  --color-primary-100: #1e3a8a;
+  --accent-light: #172554;
+  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.4);
+  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.5), 0 2px 4px -2px rgb(0 0 0 / 0.4);
+}
+.SlidingCounter_module_counter2 {
+  display: inline-flex;
+  align-items: center;
+  gap: 1px;
+  font-family: var(--font-family-base);
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+  color: var(--sliding-counter-accent-dot, var(--accent-dot));
+  user-select: none;
+}
+.SlidingCounter_module_sign2 {
+  line-height: 1;
+  margin-right: 2px;
+}
+.SlidingCounter_module_separator2 {
+  line-height: 1;
+  margin: 0 1px;
+  opacity: 0.5;
+  align-self: flex-end;
+  padding-bottom: 0.5em;
+}
+.SlidingCounter_module_reelWindow2 {
+  overflow: hidden;
+  position: relative;
+}
+.SlidingCounter_module_reelWindow2.SlidingCounter_module_sm2 {
+  height: 1.6rem;
+  width: 0.85rem;
+  font-size: 1.25rem;
+  line-height: 1.6rem;
+}
+.SlidingCounter_module_reelWindow2.SlidingCounter_module_md2 {
+  height: 2.6rem;
+  width: 1.35rem;
+  font-size: 2rem;
+  line-height: 2.6rem;
+}
+.SlidingCounter_module_reelWindow2.SlidingCounter_module_lg2 {
+  height: 3.8rem;
+  width: 2rem;
+  font-size: 3rem;
+  line-height: 3.8rem;
+}
+.SlidingCounter_module_reel2 {
+  display: flex;
+  flex-direction: column;
+  transition: transform 420ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+.SlidingCounter_module_digitCell2 {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+.SlidingCounter_module_reelWindow2.SlidingCounter_module_sm2 .SlidingCounter_module_digitCell2 {
+  height: 1.6rem;
+  width: 0.85rem;
+}
+.SlidingCounter_module_reelWindow2.SlidingCounter_module_md2 .SlidingCounter_module_digitCell2 {
+  height: 2.6rem;
+  width: 1.35rem;
+}
+.SlidingCounter_module_reelWindow2.SlidingCounter_module_lg2 .SlidingCounter_module_digitCell2 {
+  height: 3.8rem;
+  width: 2rem;
+}
+/*# sourceMappingURL=index.css.map */

package/dist/components/SlidingCounter/index.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/styles/tokens.scss","../../../src/components/SlidingCounter/SlidingCounter.module.scss"],"sourcesContent":["@use \"sass:color\";\n\n@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap\");\n\n// Accent di default — cambia qui per aggiornare tutta la libreria\n$accent: #3b82f6;\n\n:root {\n  // Accent scale — derivata da $accent a compile time\n  --accent:        #{$accent};\n  --accent-dot:    #{color.scale($accent, $lightness: 12%)};\n  --accent-track:  #{$accent};\n  --accent-ring:   #{$accent};\n  --accent-glow:   #{color.change($accent, $alpha: 0.3)};\n  --accent-light:  #{color.scale($accent, $lightness: 45%, $saturation: -20%)};\n\n  // Primary scale (mantenuta per retrocompatibilità con Button, Badge, Input)\n  --color-primary-50:  #{color.scale($accent, $lightness: 49%, $saturation: -30%)};\n  --color-primary-100: #{color.scale($accent, $lightness: 42%, $saturation: -15%)};\n  --color-primary-400: #{color.scale($accent, $lightness: 12%)};\n  --color-primary-500: #{$accent};\n  --color-primary-600: #{color.scale($accent, $lightness: -10%)};\n  --color-primary-700: #{color.scale($accent, $lightness: -20%)};\n\n  // Neutral\n  --color-neutral-0:   #ffffff;\n  --color-neutral-100: #f3f4f6;\n  --color-neutral-200: #e5e7eb;\n  --color-neutral-400: #9ca3af;\n  --color-neutral-600: #4b5563;\n  --color-neutral-900: #111827;\n\n  // Semantic\n  --color-success-500: #22c55e;\n  --color-success-600: #16a34a;\n  --color-danger-500:  #ef4444;\n  --color-danger-600:  #dc2626;\n  --color-warning-500: #f59e0b;\n  --color-warning-600: #d97706;\n\n  // Typography\n  --font-family-base: \"Inter\", system-ui, -apple-system, sans-serif;\n  --font-size-xs: 0.75rem;\n  --font-size-sm: 0.875rem;\n  --font-size-md: 1rem;\n  --font-size-lg: 1.125rem;\n\n  // Spacing\n  --spacing-1: 0.25rem;\n  --spacing-2: 0.5rem;\n  --spacing-3: 0.75rem;\n  --spacing-4: 1rem;\n\n  // Radius\n  --radius-sm:   0.25rem;\n  --radius-md:   0.375rem;\n  --radius-lg:   0.5rem;\n  --radius-full: 9999px;\n\n  // Shadows\n  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);\n  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);\n\n  // Transitions\n  --transition-fast: 150ms ease;\n\n  // Surface (background di card/panel)\n  --color-surface:          #ffffff;\n  --color-surface-elevated: #ffffff;\n}\n\n// ─── Dark theme ────────────────────────────────────────────────────────────────\n// Applicato via data-theme=\"dark\" sull'elemento root (gestito da Storybook decorator\n// e dall'app consumer). I componenti non devono fare nulla di speciale: basta che\n// usino i token var() e riceveranno automaticamente i valori dark.\n\n[data-theme=\"dark\"] {\n  // Neutral (scala invertita)\n  --color-neutral-0:   #0f172a;\n  --color-neutral-100: #1e293b;\n  --color-neutral-200: #334155;\n  --color-neutral-400: #94a3b8;\n  --color-neutral-600: #cbd5e1;\n  --color-neutral-900: #f8fafc;\n\n  // Surface\n  --color-surface:          #1e293b;\n  --color-surface-elevated: #273549;\n\n  // Primary scale dark (per il default accent blu — le sfumature chiare diventano scure)\n  --color-primary-50:  #172554;\n  --color-primary-100: #1e3a8a;\n  // 400 / 500 / 600 / 700 rimangono invariati (abbastanza saturi su bg scuro)\n\n  // Accent light: variante scura\n  --accent-light: #172554;\n\n  // Shadows (più forti su bg scuro)\n  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.4);\n  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.5), 0 2px 4px -2px rgb(0 0 0 / 0.4);\n}\n","@use \"../../styles/tokens\";\n\n// ── Size map ────────────────────────────────────────────────────────────────\n$sizes: (\n  sm: (font: 1.25rem, cell: 1.6rem, width: 0.85rem),\n  md: (font: 2rem,    cell: 2.6rem, width: 1.35rem),\n  lg: (font: 3rem,    cell: 3.8rem, width: 2rem),\n);\n\n// ── Counter wrapper ─────────────────────────────────────────────────────────\n.counter {\n  display: inline-flex;\n  align-items: center;\n  gap: 1px;\n  font-family: var(--font-family-base);\n  font-weight: 600;\n  font-variant-numeric: tabular-nums;\n  color: var(--sliding-counter-accent-dot, var(--accent-dot));\n  user-select: none;\n}\n\n// ── Sign (minus) and decimal separator ──────────────────────────────────────\n.sign {\n  line-height: 1;\n  margin-right: 2px;\n}\n\n.separator {\n  line-height: 1;\n  margin: 0 1px;\n  opacity: 0.5;\n  align-self: flex-end;\n  padding-bottom: 0.5em;\n}\n\n// ── Reel window — clips to one digit height ─────────────────────────────────\n.reelWindow {\n  overflow: hidden;\n  position: relative;\n\n  @each $name, $map in $sizes {\n    &.#{$name} {\n      height: map-get($map, cell);\n      width: map-get($map, width);\n      font-size: map-get($map, font);\n      line-height: map-get($map, cell);\n    }\n  }\n}\n\n// ── The scrolling column ─────────────────────────────────────────────────────\n.reel {\n  display: flex;\n  flex-direction: column;\n  transition: transform 420ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n// ── Single digit cell ────────────────────────────────────────────────────────\n.digitCell {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n\n  @each $name, $map in $sizes {\n    .reelWindow.#{$name} & {\n      height: map-get($map, cell);\n      width: map-get($map, width);\n    }\n  }\n}\n"],"mappings":";;;AAOA;AAEE,YAAA;AACA,gBAAA,IAAA,KAAA,EAAA,GAAA,EAAA;AACA,kBAAA;AACA,iBAAA;AACA,iBAAA,KAAA,EAAA,EAAA,GAAA,EAAA,GAAA,EAAA;AACA,kBAAA,IAAA,OAAA,EAAA,OAAA,EAAA;AAGA,sBAAA,IAAA,QAAA,EAAA,QAAA,EAAA;AACA,uBAAA,IAAA,QAAA,EAAA,QAAA,EAAA;AACA,uBAAA,IAAA,KAAA,EAAA,GAAA,EAAA;AACA,uBAAA;AACA,uBAAA,IAAA,aAAA,EAAA,cAAA,EAAA;AACA,uBAAA,IAAA,YAAA,EAAA,aAAA,EAAA;AAGA,qBAAA;AACA,uBAAA;AACA,uBAAA;AACA,uBAAA;AACA,uBAAA;AACA,uBAAA;AAGA,uBAAA;AACA,uBAAA;AACA,sBAAA;AACA,sBAAA;AACA,uBAAA;AACA,uBAAA;AAGA;IAAA,OAAA;IAAA,SAAA;IAAA,aAAA;IAAA;AACA,kBAAA;AACA,kBAAA;AACA,kBAAA;AACA,kBAAA;AAGA,eAAA;AACA,eAAA;AACA,eAAA;AACA,eAAA;AAGA,eAAA;AACA,eAAA;AACA,eAAA;AACA,iBAAA;AAGA,eAAA,EAAA,IAAA,IAAA,EAAA,IAAA,EAAA,EAAA,EAAA,EAAA;AACA,eAAA,EAAA,IAAA,IAAA,KAAA,IAAA,EAAA,EAAA,EAAA,EAAA,IAAA,EAAA,EAAA,IAAA,IAAA,KAAA,IAAA,EAAA,EAAA,EAAA,EAAA;AAGA,qBAAA,MAAA;AAGA,mBAAA;AACA,4BAAA;;AAQF,CAAA;AAEE,qBAAA;AACA,uBAAA;AACA,uBAAA;AACA,uBAAA;AACA,uBAAA;AACA,uBAAA;AAGA,mBAAA;AACA,4BAAA;AAGA,sBAAA;AACA,uBAAA;AAIA,kBAAA;AAGA,eAAA,EAAA,IAAA,IAAA,EAAA,IAAA,EAAA,EAAA,EAAA,EAAA;AACA,eAAA,EAAA,IAAA,IAAA,KAAA,IAAA,EAAA,EAAA,EAAA,EAAA,IAAA,EAAA,EAAA,IAAA,IAAA,KAAA,IAAA,EAAA,EAAA,EAAA,EAAA;;ACzFF,CAAAA;AACE,WAAA;AACA,eAAA;AACA,OAAA;AACA,eAAA,IAAA;AACA,eAAA;AACA,wBAAA;AACA,SAAA,IAAA,4BAAA,EAAA,IAAA;AACA,eAAA;;AAIF,CAAAC;AACE,eAAA;AACA,gBAAA;;AAGF,CAAAC;AACE,eAAA;AACA,UAAA,EAAA;AACA,WAAA;AACA,cAAA;AACA,kBAAA;;AAIF,CAAAC;AACE,YAAA;AACA,YAAA;;AAGE,CALJA,iCAKI,CAAAC;AACE,UAAA;AACA,SAAA;AACA,aAAA;AACA,eAAA;;AAJF,CALJD,iCAKI,CAAAE;AACE,UAAA;AACA,SAAA;AACA,aAAA;AACA,eAAA;;AAJF,CALJF,iCAKI,CAAAG;AACE,UAAA;AACA,SAAA;AACA,aAAA;AACA,eAAA;;AAMN,CAAAC;AACE,WAAA;AACA,kBAAA;AACA,cAAA,UAAA,MAAA,aAAA,GAAA,EAAA,CAAA,EAAA,GAAA,EAAA;;AAIF,CAAAC;AACE,WAAA;AACA,eAAA;AACA,mBAAA;AACA,eAAA;;AAGE,CA7BJL,iCA6BI,CAxBAC,0BAwBA,CAPJI;AAQM,UAAA;AACA,SAAA;;AAFF,CA7BJL,iCA6BI,CAxBAE,0BAwBA,CAPJG;AAQM,UAAA;AACA,SAAA;;AAFF,CA7BJL,iCA6BI,CAxBAG,0BAwBA,CAPJE;AAQM,UAAA;AACA,SAAA;;","names":["counter","sign","separator","reelWindow","sm","md","lg","reel","digitCell"]}

package/dist/components/SlidingCounter/index.d.cts

@@ -0,0 +1,19 @@
+import React from 'react';
+
+type SlidingCounterSize = "sm" | "md" | "lg";
+interface SlidingCounterProps {
+    value: number;
+    /** Minimum integer digits shown (zero-padded on the left) */
+    minDigits?: number;
+    /** Number of decimal digits to display. 0 = no decimals. */
+    decimals?: number;
+    /** Decimal separator character */
+    decimalSeparator?: string;
+    size?: SlidingCounterSize;
+    /** Custom accent color — overrides the global theme for this instance */
+    accent?: string;
+    className?: string;
+}
+declare const SlidingCounter: React.FC<SlidingCounterProps>;
+
+export { SlidingCounter, type SlidingCounterProps, type SlidingCounterSize };

package/dist/components/SlidingCounter/index.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+
+type SlidingCounterSize = "sm" | "md" | "lg";
+interface SlidingCounterProps {
+    value: number;
+    /** Minimum integer digits shown (zero-padded on the left) */
+    minDigits?: number;
+    /** Number of decimal digits to display. 0 = no decimals. */
+    decimals?: number;
+    /** Decimal separator character */
+    decimalSeparator?: string;
+    size?: SlidingCounterSize;
+    /** Custom accent color — overrides the global theme for this instance */
+    accent?: string;
+    className?: string;
+}
+declare const SlidingCounter: React.FC<SlidingCounterProps>;
+
+export { SlidingCounter, type SlidingCounterProps, type SlidingCounterSize };

package/dist/components/SlidingCounter/index.js

@@ -0,0 +1,179 @@
+import { useRef, useState, useEffect } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/components/SlidingCounter/SlidingCounter.tsx
+
+// src/components/SlidingCounter/SlidingCounter.module.scss
+var SlidingCounter_module_default = {
+  counter: "SlidingCounter_module_counter2",
+  sign: "SlidingCounter_module_sign2",
+  separator: "SlidingCounter_module_separator2",
+  reelWindow: "SlidingCounter_module_reelWindow2",
+  sm: "SlidingCounter_module_sm2",
+  md: "SlidingCounter_module_md2",
+  lg: "SlidingCounter_module_lg2",
+  reel: "SlidingCounter_module_reel2",
+  digitCell: "SlidingCounter_module_digitCell2"
+};
+
+// src/utils/color.ts
+function hexToHsl(hex) {
+  const r = parseInt(hex.slice(1, 3), 16) / 255;
+  const g = parseInt(hex.slice(3, 5), 16) / 255;
+  const b = parseInt(hex.slice(5, 7), 16) / 255;
+  const max = Math.max(r, g, b);
+  const min = Math.min(r, g, b);
+  const l = (max + min) / 2;
+  let h = 0;
+  let s = 0;
+  if (max !== min) {
+    const d = max - min;
+    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+    switch (max) {
+      case r:
+        h = ((g - b) / d + (g < b ? 6 : 0)) / 6;
+        break;
+      case g:
+        h = ((b - r) / d + 2) / 6;
+        break;
+      case b:
+        h = ((r - g) / d + 4) / 6;
+        break;
+    }
+  }
+  return [h * 360, s * 100, l * 100];
+}
+function hslToHex(h, s, l) {
+  const sl = s / 100;
+  const ll = l / 100;
+  const a = sl * Math.min(ll, 1 - ll);
+  const f = (n) => {
+    const k = (n + h / 30) % 12;
+    const color = ll - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
+    return Math.round(255 * color).toString(16).padStart(2, "0");
+  };
+  return `#${f(0)}${f(8)}${f(4)}`;
+}
+function hslToRgb(h, s, l) {
+  const sl = s / 100;
+  const ll = l / 100;
+  const a = sl * Math.min(ll, 1 - ll);
+  const f = (n) => {
+    const k = (n + h / 30) % 12;
+    return Math.round(255 * (ll - a * Math.max(Math.min(k - 3, 9 - k, 1), -1)));
+  };
+  return { r: f(0), g: f(8), b: f(4) };
+}
+function hslToRgba(h, s, l, alpha) {
+  const { r, g, b } = hslToRgb(h, s, l);
+  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+}
+function deriveAccent(hex) {
+  const [h, s, l] = hexToHsl(hex);
+  return {
+    base: hex,
+    dot: hslToHex(h, s, Math.min(l + 12, 95)),
+    track: hex,
+    ring: hex,
+    glow: hslToRgba(h, s, l, 0.3),
+    light: hslToHex(h, Math.max(s - 20, 0), Math.min(l + 45, 96))
+  };
+}
+function accentToCssVars(tokens, prefix) {
+  return {
+    [`--${prefix}-accent`]: tokens.base,
+    [`--${prefix}-accent-dot`]: tokens.dot,
+    [`--${prefix}-accent-track`]: tokens.track,
+    [`--${prefix}-accent-ring`]: tokens.ring,
+    [`--${prefix}-accent-glow`]: tokens.glow,
+    [`--${prefix}-accent-light`]: tokens.light
+  };
+}
+var COPIES = 3;
+var TOTAL = COPIES * 10;
+var DigitReel = ({ digit, direction, size }) => {
+  const posRef = useRef(10 + digit);
+  const prevDigitRef = useRef(digit);
+  const [pos, setPos] = useState(10 + digit);
+  const [animate, setAnimate] = useState(true);
+  useEffect(() => {
+    if (prevDigitRef.current === digit) return;
+    const prev = prevDigitRef.current;
+    let next = posRef.current;
+    if (direction === "up") {
+      next += digit > prev ? digit - prev : 10 - prev + digit;
+    } else {
+      next -= digit < prev ? prev - digit : prev + 10 - digit;
+    }
+    posRef.current = next;
+    prevDigitRef.current = digit;
+    setAnimate(true);
+    setPos(next);
+  }, [digit, direction]);
+  const handleTransitionEnd = () => {
+    const normalized = 10 + (posRef.current % 10 + 10) % 10;
+    posRef.current = normalized;
+    setAnimate(false);
+    setPos(normalized);
+  };
+  const translateY = -(pos / TOTAL) * 100;
+  const cells = Array.from(
+    { length: COPIES },
+    () => [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
+  ).flat();
+  return /* @__PURE__ */ jsx("div", { className: `${SlidingCounter_module_default.reelWindow} ${SlidingCounter_module_default[size]}`, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: SlidingCounter_module_default.reel,
+      style: {
+        transform: `translateY(${translateY}%)`,
+        transition: animate ? void 0 : "none"
+      },
+      onTransitionEnd: handleTransitionEnd,
+      children: cells.map((d, i) => /* @__PURE__ */ jsx("div", { className: SlidingCounter_module_default.digitCell, children: d }, i))
+    }
+  ) });
+};
+function splitDigits(value, minDigits, decimals) {
+  const abs = Math.abs(value);
+  const fixed = abs.toFixed(decimals);
+  const [intPart, decPart = ""] = fixed.split(".");
+  const intDigits = intPart.split("").map(Number);
+  const padded = intDigits.length < minDigits ? [...Array(minDigits - intDigits.length).fill(0), ...intDigits] : intDigits;
+  const decDigits = decPart.split("").map(Number);
+  return { intDigits: padded, decDigits };
+}
+var SlidingCounter = ({
+  value,
+  minDigits = 1,
+  decimals = 0,
+  decimalSeparator = ".",
+  size = "md",
+  accent,
+  className
+}) => {
+  const accentVars = accent ? accentToCssVars(deriveAccent(accent), "sliding-counter") : {};
+  const safeValue = isFinite(value) ? value : 0;
+  const prevValueRef = useRef(safeValue);
+  const direction = safeValue >= prevValueRef.current ? "up" : "down";
+  prevValueRef.current = safeValue;
+  const { intDigits, decDigits } = splitDigits(safeValue, minDigits, decimals);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: [SlidingCounter_module_default.counter, SlidingCounter_module_default[size], className ?? ""].filter(Boolean).join(" "),
+      style: accentVars,
+      "aria-label": safeValue.toFixed(decimals),
+      children: [
+        safeValue < 0 && /* @__PURE__ */ jsx("span", { className: SlidingCounter_module_default.sign, children: "\u2212" }),
+        intDigits.map((digit, i) => /* @__PURE__ */ jsx(DigitReel, { digit, direction, size }, `int-${intDigits.length - i}`)),
+        decimals > 0 && /* @__PURE__ */ jsx("span", { className: SlidingCounter_module_default.separator, children: decimalSeparator }),
+        decDigits.map((digit, i) => /* @__PURE__ */ jsx(DigitReel, { digit, direction, size }, `dec-${i}`))
+      ]
+    }
+  );
+};
+
+export { SlidingCounter };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map