@vadimcomanescu/nadicode-design-system 2.0.0

package/dist/chunk-TSVN5A2F.js

@@ -0,0 +1,65 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/components/logos/Gemini.tsx
+function Gemini(props) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      height: "1em",
+      style: {
+        flex: "none",
+        lineHeight: 1
+      },
+      viewBox: "0 0 24 24",
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "1em",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("title", { children: "Gemini" }),
+        /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs(
+          "linearGradient",
+          {
+            id: "lobe-icons-gemini-fill",
+            x1: "0%",
+            x2: "68.73%",
+            y1: "100%",
+            y2: "30.395%",
+            children: [
+              /* @__PURE__ */ jsx(
+                "stop",
+                {
+                  offset: "0%",
+                  stopColor: "#1C7DFF"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "stop",
+                {
+                  offset: "52.021%",
+                  stopColor: "#1C69FF"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "stop",
+                {
+                  offset: "100%",
+                  stopColor: "#F0DCD6"
+                }
+              )
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M12 24A14.304 14.304 0 000 12 14.304 14.304 0 0012 0a14.305 14.305 0 0012 12 14.305 14.305 0 00-12 12",
+            fill: "url(#lobe-icons-gemini-fill)",
+            fillRule: "nonzero"
+          }
+        )
+      ]
+    }
+  );
+}
+
+export { Gemini };

package/dist/chunk-TV4RSQH4.js

@@ -0,0 +1,33 @@
+import { useAnimatedIcon } from './chunk-ASKFAYYR.js';
+import { cn } from './chunk-QYZT24TS.js';
+import { useAnimation, motion } from 'motion/react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var DEFAULT_TRANSITION = {
+  type: "spring",
+  stiffness: 160,
+  damping: 17,
+  mass: 1
+};
+function CopyIcon({
+  onMouseEnter,
+  onMouseLeave,
+  className,
+  size = 28,
+  ref,
+  ...props
+}) {
+  const controls = useAnimation();
+  const { handleMouseEnter, handleMouseLeave } = useAnimatedIcon(ref, {
+    onMouseEnter,
+    onMouseLeave,
+    animate: () => controls.start("animate"),
+    reset: () => controls.start("normal")
+  });
+  return /* @__PURE__ */ jsx("div", { className: cn(className), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, ...props, children: /* @__PURE__ */ jsxs("svg", { fill: "none", height: size, stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", viewBox: "0 0 24 24", width: size, xmlns: "http://www.w3.org/2000/svg", children: [
+    /* @__PURE__ */ jsx(motion.rect, { animate: controls, height: "14", rx: "2", ry: "2", transition: DEFAULT_TRANSITION, variants: { normal: { translateY: 0, translateX: 0 }, animate: { translateY: -3, translateX: -3 } }, width: "14", x: "8", y: "8" }),
+    /* @__PURE__ */ jsx(motion.path, { animate: controls, d: "M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2", transition: DEFAULT_TRANSITION, variants: { normal: { x: 0, y: 0 }, animate: { x: 3, y: 3 } } })
+  ] }) });
+}
+
+export { CopyIcon };

package/dist/chunk-TXGANOAX.js

@@ -0,0 +1,37 @@
+import { useAnimatedIcon } from './chunk-ASKFAYYR.js';
+import { cn } from './chunk-QYZT24TS.js';
+import { useAnimation, motion } from 'motion/react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var PATH_VARIANTS = {
+  normal: { pathLength: 1, opacity: 1 },
+  animate: {
+    pathLength: [0, 1],
+    opacity: [0, 1],
+    transition: { duration: 0.4, ease: "linear", opacity: { duration: 0.1 } }
+  }
+};
+function Settings2Icon({
+  onMouseEnter,
+  onMouseLeave,
+  className,
+  size = 28,
+  ref,
+  ...props
+}) {
+  const controls = useAnimation();
+  const { handleMouseEnter, handleMouseLeave } = useAnimatedIcon(ref, {
+    onMouseEnter,
+    onMouseLeave,
+    animate: () => controls.start("animate"),
+    reset: () => controls.start("normal")
+  });
+  return /* @__PURE__ */ jsx("div", { className: cn(className), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, ...props, children: /* @__PURE__ */ jsxs("svg", { fill: "none", height: size, stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", viewBox: "0 0 24 24", width: size, xmlns: "http://www.w3.org/2000/svg", children: [
+    /* @__PURE__ */ jsx(motion.path, { animate: controls, d: "M14 17H5", initial: "normal", variants: PATH_VARIANTS }),
+    /* @__PURE__ */ jsx(motion.path, { animate: controls, d: "M19 7h-9", initial: "normal", variants: { ...PATH_VARIANTS, animate: { ...PATH_VARIANTS.animate, transition: { duration: 0.4, delay: 0.1, ease: "linear", opacity: { duration: 0.1, delay: 0.1 } } } } }),
+    /* @__PURE__ */ jsx(motion.circle, { animate: controls, cx: "17", cy: "17", r: "3", initial: "normal", variants: { normal: { pathLength: 1, opacity: 1 }, animate: { pathLength: [0, 1], opacity: [0, 1], transition: { duration: 0.5, delay: 0.2 } } } }),
+    /* @__PURE__ */ jsx(motion.circle, { animate: controls, cx: "7", cy: "7", r: "3", initial: "normal", variants: { normal: { pathLength: 1, opacity: 1 }, animate: { pathLength: [0, 1], opacity: [0, 1], transition: { duration: 0.5, delay: 0.3 } } } })
+  ] }) });
+}
+
+export { Settings2Icon };

package/dist/chunk-U7V6TREO.js

@@ -0,0 +1,55 @@
+import { ChartContainer, ChartTooltip, ChartTooltipContent, ChartLegend, ChartLegendContent } from './chunk-WSU2PCA2.js';
+import { cn } from './chunk-QYZT24TS.js';
+import { PieChart as PieChart$1, Pie, Cell } from 'recharts';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function PieChart({
+  data,
+  config,
+  dataKey,
+  nameKey,
+  variant = "donut",
+  className,
+  showLegend = true,
+  innerRadius,
+  outerRadius = "80%",
+  label = false
+}) {
+  const finalInnerRadius = innerRadius ?? (variant === "donut" ? "60%" : 0);
+  return /* @__PURE__ */ jsx(ChartContainer, { config, className: cn("mx-auto aspect-square max-h-[300px]", className), children: /* @__PURE__ */ jsxs(PieChart$1, { children: [
+    /* @__PURE__ */ jsx(
+      ChartTooltip,
+      {
+        cursor: false,
+        content: /* @__PURE__ */ jsx(ChartTooltipContent, { hideLabel: true })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Pie,
+      {
+        data,
+        dataKey,
+        nameKey,
+        innerRadius: finalInnerRadius,
+        outerRadius,
+        strokeWidth: 0,
+        label,
+        children: data.map((entry, index) => {
+          const key = String(entry[nameKey]);
+          const configColor = config[key]?.color;
+          return /* @__PURE__ */ jsx(
+            Cell,
+            {
+              fill: entry.fill || configColor || `var(--color-${key})`,
+              stroke: "transparent"
+            },
+            `cell-${index}`
+          );
+        })
+      }
+    ),
+    !!showLegend && /* @__PURE__ */ jsx(ChartLegend, { content: /* @__PURE__ */ jsx(ChartLegendContent, {}), className: "-translate-y-2 flex-wrap gap-2 [&>*]:basis-1/4 [&>*]:justify-center" })
+  ] }) });
+}
+
+export { PieChart };

package/dist/chunk-UBIGDGOP.js

@@ -0,0 +1,52 @@
+import { useAnimatedIcon } from './chunk-ASKFAYYR.js';
+import { cn } from './chunk-QYZT24TS.js';
+import { useAnimation, motion } from 'motion/react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var PATH_VARIANTS = {
+  normal: { pathLength: 1, opacity: 1 },
+  animate: {
+    pathLength: [0, 1],
+    opacity: [0, 1],
+    transition: { duration: 0.5, ease: "linear", opacity: { duration: 0.1 } }
+  }
+};
+var AMOUNT_VARIANTS = {
+  normal: { pathLength: 1, opacity: 1 },
+  animate: {
+    pathLength: [0, 1],
+    opacity: [0, 1],
+    transition: { duration: 0.4, delay: 0.3, ease: "linear", opacity: { duration: 0.1, delay: 0.3 } }
+  }
+};
+var LINE_VARIANTS = {
+  normal: { pathLength: 1, opacity: 1 },
+  animate: {
+    pathLength: [0, 1],
+    opacity: [0, 1],
+    transition: { duration: 0.3, delay: 0.5, ease: "linear", opacity: { duration: 0.1, delay: 0.5 } }
+  }
+};
+function ReceiptIcon({
+  onMouseEnter,
+  onMouseLeave,
+  className,
+  size = 28,
+  ref,
+  ...props
+}) {
+  const controls = useAnimation();
+  const { handleMouseEnter, handleMouseLeave } = useAnimatedIcon(ref, {
+    onMouseEnter,
+    onMouseLeave,
+    animate: () => controls.start("animate"),
+    reset: () => controls.start("normal")
+  });
+  return /* @__PURE__ */ jsx("div", { className: cn(className), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, ...props, children: /* @__PURE__ */ jsxs("svg", { fill: "none", height: size, stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", viewBox: "0 0 24 24", width: size, xmlns: "http://www.w3.org/2000/svg", children: [
+    /* @__PURE__ */ jsx(motion.path, { animate: controls, d: "M4 2v20l2-1 2 1 2-1 2 1 2-1 2 1 2-1 2 1V2l-2 1-2-1-2 1-2-1-2 1-2-1-2 1Z", initial: "normal", variants: PATH_VARIANTS }),
+    /* @__PURE__ */ jsx(motion.path, { animate: controls, d: "M16 8h-6a2 2 0 1 0 0 4h4a2 2 0 1 1 0 4H8", initial: "normal", variants: AMOUNT_VARIANTS }),
+    /* @__PURE__ */ jsx(motion.path, { animate: controls, d: "M12 17.5v-11", initial: "normal", variants: LINE_VARIANTS })
+  ] }) });
+}
+
+export { ReceiptIcon };

package/dist/chunk-UEG2LI7Z.js

@@ -0,0 +1,43 @@
+import { useAnimatedIcon } from './chunk-ASKFAYYR.js';
+import { cn } from './chunk-QYZT24TS.js';
+import { useAnimation, motion } from 'motion/react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var AXIS_VARIANTS = {
+  normal: { pathLength: 1, opacity: 1 },
+  animate: {
+    pathLength: [0, 1],
+    opacity: [0, 1],
+    transition: { duration: 0.4, ease: "linear", opacity: { duration: 0.1 } }
+  }
+};
+var LINE_VARIANTS = {
+  normal: { pathLength: 1, opacity: 1 },
+  animate: {
+    pathLength: [0, 1],
+    opacity: [0, 1],
+    transition: { duration: 0.4, delay: 0.3, ease: "linear", opacity: { duration: 0.1, delay: 0.3 } }
+  }
+};
+function ChartLineIcon({
+  onMouseEnter,
+  onMouseLeave,
+  className,
+  size = 28,
+  ref,
+  ...props
+}) {
+  const controls = useAnimation();
+  const { handleMouseEnter, handleMouseLeave } = useAnimatedIcon(ref, {
+    onMouseEnter,
+    onMouseLeave,
+    animate: () => controls.start("animate"),
+    reset: () => controls.start("normal")
+  });
+  return /* @__PURE__ */ jsx("div", { className: cn(className), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, ...props, children: /* @__PURE__ */ jsxs("svg", { fill: "none", height: size, stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", viewBox: "0 0 24 24", width: size, xmlns: "http://www.w3.org/2000/svg", children: [
+    /* @__PURE__ */ jsx(motion.path, { animate: controls, d: "M3 3v16a2 2 0 0 0 2 2h16", initial: "normal", variants: AXIS_VARIANTS }),
+    /* @__PURE__ */ jsx(motion.path, { animate: controls, d: "m19 9-5 5-4-4-3 3", initial: "normal", variants: LINE_VARIANTS })
+  ] }) });
+}
+
+export { ChartLineIcon };

package/dist/chunk-UHXGBV5N.js

@@ -0,0 +1,35 @@
+import { useAnimatedIcon } from './chunk-ASKFAYYR.js';
+import { cn } from './chunk-QYZT24TS.js';
+import { useAnimation, motion } from 'motion/react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var PATH_VARIANT = {
+  normal: { pathLength: 1, opacity: 1, pathOffset: 0 },
+  animate: { pathLength: [0, 1], opacity: [0, 1], pathOffset: [1, 0] }
+};
+var CIRCLE_VARIANT = {
+  normal: { pathLength: 1, pathOffset: 0, scale: 1 },
+  animate: { pathLength: [0, 1], pathOffset: [1, 0], scale: [0.5, 1] }
+};
+function UserIcon({
+  onMouseEnter,
+  onMouseLeave,
+  className,
+  size = 28,
+  ref,
+  ...props
+}) {
+  const controls = useAnimation();
+  const { handleMouseEnter, handleMouseLeave } = useAnimatedIcon(ref, {
+    onMouseEnter,
+    onMouseLeave,
+    animate: () => controls.start("animate"),
+    reset: () => controls.start("normal")
+  });
+  return /* @__PURE__ */ jsx("div", { className: cn(className), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, ...props, children: /* @__PURE__ */ jsxs("svg", { fill: "none", height: size, stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", viewBox: "0 0 24 24", width: size, xmlns: "http://www.w3.org/2000/svg", children: [
+    /* @__PURE__ */ jsx(motion.circle, { animate: controls, cx: "12", cy: "8", r: "5", variants: CIRCLE_VARIANT }),
+    /* @__PURE__ */ jsx(motion.path, { animate: controls, d: "M20 21a8 8 0 0 0-16 0", transition: { delay: 0.2, duration: 0.4 }, variants: PATH_VARIANT })
+  ] }) });
+}
+
+export { UserIcon };

package/dist/chunk-UIUMTURU.js

@@ -0,0 +1,31 @@
+import { useAnimatedIcon } from './chunk-ASKFAYYR.js';
+import { cn } from './chunk-QYZT24TS.js';
+import { useAnimation, motion } from 'motion/react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var PATH_VARIANTS = {
+  normal: { opacity: 1, pathLength: 1 },
+  animate: { opacity: [0, 1], pathLength: [0, 1] }
+};
+function XIcon({
+  onMouseEnter,
+  onMouseLeave,
+  className,
+  size = 28,
+  ref,
+  ...props
+}) {
+  const controls = useAnimation();
+  const { handleMouseEnter, handleMouseLeave } = useAnimatedIcon(ref, {
+    onMouseEnter,
+    onMouseLeave,
+    animate: () => controls.start("animate"),
+    reset: () => controls.start("normal")
+  });
+  return /* @__PURE__ */ jsx("div", { className: cn(className), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, ...props, children: /* @__PURE__ */ jsxs("svg", { fill: "none", height: size, stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", viewBox: "0 0 24 24", width: size, xmlns: "http://www.w3.org/2000/svg", children: [
+    /* @__PURE__ */ jsx(motion.path, { animate: controls, d: "M18 6 6 18", variants: PATH_VARIANTS }),
+    /* @__PURE__ */ jsx(motion.path, { animate: controls, d: "m6 6 12 12", transition: { delay: 0.2 }, variants: PATH_VARIANTS })
+  ] }) });
+}
+
+export { XIcon };

package/dist/chunk-UJDEGCCZ.js

@@ -0,0 +1,49 @@
+import { inputVariants } from './chunk-AP3XXYAY.js';
+import { Label } from './chunk-LIBXYD5Q.js';
+import { EyeOffIcon } from './chunk-666N6OTL.js';
+import { EyeIcon } from './chunk-FMH55OKV.js';
+import { cn } from './chunk-QYZT24TS.js';
+import * as React from 'react';
+import { useTranslations } from 'next-intl';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function PasswordInput({ className, label, error, id, size, ref, ...props }) {
+  const t = useTranslations("components.passwordInput");
+  const [visible, setVisible] = React.useState(false);
+  const generatedId = React.useId();
+  const inputId = id || generatedId;
+  return /* @__PURE__ */ jsxs("div", { className: "w-full space-y-2", children: [
+    !!label && /* @__PURE__ */ jsx(Label, { htmlFor: inputId, children: label }),
+    /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          ref,
+          type: visible ? "text" : "password",
+          id: inputId,
+          className: cn(
+            inputVariants({ size }),
+            "pr-10",
+            error && "border-destructive focus-visible:ring-destructive",
+            className
+          ),
+          ...props
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "absolute right-3 top-1/2 -translate-y-1/2 text-text-tertiary hover:text-text-primary transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent rounded-sm flex h-9 w-9 items-center justify-center touch-target-44",
+          onClick: () => setVisible((v) => !v),
+          "aria-label": visible ? t("hidePassword") : t("showPassword"),
+          tabIndex: -1,
+          children: visible ? /* @__PURE__ */ jsx(EyeOffIcon, { size: 16 }) : /* @__PURE__ */ jsx(EyeIcon, { size: 16 })
+        }
+      )
+    ] }),
+    typeof error === "string" && /* @__PURE__ */ jsx("p", { className: "text-xs font-medium text-destructive", children: error })
+  ] });
+}
+
+export { PasswordInput };

package/dist/chunk-ULLTRLBD.js

@@ -0,0 +1,268 @@
+import { useIsInView } from './chunk-4O6L5YWT.js';
+import { m } from './chunk-PD2YEH3H.js';
+import * as React from 'react';
+import { useReducedMotion, useMotionValue, useSpring, useTransform } from 'motion/react';
+import useMeasure from 'react-use-measure';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+function SlidingNumberRoller({
+  prevValue,
+  value,
+  place,
+  transition,
+  delay = 0
+}) {
+  const prefersReduced = useReducedMotion();
+  const startNumber = Math.floor(prevValue / place) % 10;
+  const targetNumber = Math.floor(value / place) % 10;
+  const animatedValue = useSpring(startNumber, transition);
+  React.useEffect(() => {
+    if (prefersReduced) {
+      animatedValue.jump(targetNumber);
+      return;
+    }
+    const timeoutId = setTimeout(() => {
+      animatedValue.set(targetNumber);
+    }, delay);
+    return () => clearTimeout(timeoutId);
+  }, [prefersReduced, targetNumber, animatedValue, delay]);
+  const [measureRef, { height }] = useMeasure();
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      ref: measureRef,
+      "data-slot": "sliding-number-roller",
+      style: {
+        position: "relative",
+        display: "inline-block",
+        width: "1ch",
+        overflowX: "visible",
+        overflowY: "clip",
+        lineHeight: 1,
+        fontVariantNumeric: "tabular-nums"
+      },
+      children: [
+        /* @__PURE__ */ jsx("span", { style: { visibility: "hidden" }, children: "0" }),
+        Array.from({ length: 10 }, (_, i) => /* @__PURE__ */ jsx(
+          SlidingNumberDisplay,
+          {
+            motionValue: animatedValue,
+            number: i,
+            height,
+            transition
+          },
+          i
+        ))
+      ]
+    }
+  );
+}
+function SlidingNumberDisplay({
+  motionValue,
+  number,
+  height
+}) {
+  const y = useTransform(motionValue, (latest) => {
+    if (!height) return 0;
+    const currentNumber = latest % 10;
+    const offset = (10 + number - currentNumber) % 10;
+    let translateY = offset * height;
+    if (offset > 5) translateY -= 10 * height;
+    return translateY;
+  });
+  if (!height) {
+    return /* @__PURE__ */ jsx("span", { style: { visibility: "hidden", position: "absolute" }, children: number });
+  }
+  return /* @__PURE__ */ jsx(
+    m.span,
+    {
+      "data-slot": "sliding-number-display",
+      style: {
+        y,
+        position: "absolute",
+        inset: 0,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center"
+      },
+      children: number
+    }
+  );
+}
+var DEFAULT_SLIDING_TRANSITION = { stiffness: 200, damping: 20, mass: 0.4 };
+function SlidingNumber({
+  ref,
+  number,
+  fromNumber,
+  onNumberChange,
+  inView = false,
+  inViewMargin = "0px",
+  inViewOnce = true,
+  padStart = false,
+  decimalSeparator = ".",
+  decimalPlaces = 0,
+  thousandSeparator,
+  transition = DEFAULT_SLIDING_TRANSITION,
+  delay = 0,
+  initiallyStable = false,
+  ...props
+}) {
+  const prefersReduced = useReducedMotion();
+  const { ref: localRef, isInView } = useIsInView(
+    ref,
+    {
+      inView,
+      inViewOnce,
+      inViewMargin
+    }
+  );
+  const initialNumeric = Math.abs(Number(number));
+  const prevNumberRef = React.useRef(
+    initiallyStable ? initialNumeric : 0
+  );
+  const hasAnimated = fromNumber !== void 0;
+  const motionVal = useMotionValue(
+    initiallyStable ? initialNumeric : fromNumber ?? 0
+  );
+  const springVal = useSpring(motionVal, { stiffness: 90, damping: 50 });
+  const skippedInitialWhenStable = React.useRef(false);
+  React.useEffect(() => {
+    if (!hasAnimated) return;
+    if (prefersReduced) {
+      motionVal.set(number);
+      return;
+    }
+    if (initiallyStable && !skippedInitialWhenStable.current) {
+      skippedInitialWhenStable.current = true;
+      return;
+    }
+    const timeoutId = setTimeout(() => {
+      if (isInView) motionVal.set(number);
+    }, delay);
+    return () => clearTimeout(timeoutId);
+  }, [prefersReduced, hasAnimated, initiallyStable, isInView, number, motionVal, delay]);
+  const [effectiveNumber, setEffectiveNumber] = React.useState(
+    initiallyStable ? initialNumeric : 0
+  );
+  React.useEffect(() => {
+    if (hasAnimated) {
+      const inferredDecimals = typeof decimalPlaces === "number" && decimalPlaces >= 0 ? decimalPlaces : (() => {
+        const s = String(number);
+        const idx = s.indexOf(".");
+        return idx >= 0 ? s.length - idx - 1 : 0;
+      })();
+      const factor = Math.pow(10, inferredDecimals);
+      const unsubscribe = springVal.on("change", (latest) => {
+        const newValue = inferredDecimals > 0 ? Math.round(latest * factor) / factor : Math.round(latest);
+        if (effectiveNumber !== newValue) {
+          setEffectiveNumber(newValue);
+          onNumberChange?.(newValue);
+        }
+      });
+      return () => unsubscribe();
+    } else {
+      setEffectiveNumber(
+        initiallyStable ? initialNumeric : !isInView ? 0 : initialNumeric
+      );
+    }
+  }, [
+    hasAnimated,
+    springVal,
+    isInView,
+    number,
+    decimalPlaces,
+    onNumberChange,
+    effectiveNumber,
+    initiallyStable,
+    initialNumeric
+  ]);
+  const formatNumber = React.useCallback(
+    (num) => decimalPlaces != null ? num.toFixed(decimalPlaces) : num.toString(),
+    [decimalPlaces]
+  );
+  const numberStr = formatNumber(effectiveNumber);
+  const [newIntStrRaw, newDecStrRaw = ""] = numberStr.split(".");
+  const finalIntLength = padStart ? Math.max(
+    Math.floor(Math.abs(number)).toString().length,
+    newIntStrRaw.length
+  ) : newIntStrRaw.length;
+  const newIntStr = padStart ? newIntStrRaw.padStart(finalIntLength, "0") : newIntStrRaw;
+  const prevFormatted = formatNumber(prevNumberRef.current);
+  const [prevIntStrRaw = "", prevDecStrRaw = ""] = prevFormatted.split(".");
+  const prevIntStr = padStart ? prevIntStrRaw.padStart(finalIntLength, "0") : prevIntStrRaw;
+  const adjustedPrevInt = React.useMemo(() => {
+    return prevIntStr.length > finalIntLength ? prevIntStr.slice(-finalIntLength) : prevIntStr.padStart(finalIntLength, "0");
+  }, [prevIntStr, finalIntLength]);
+  const adjustedPrevDec = React.useMemo(() => {
+    if (!newDecStrRaw) return "";
+    return prevDecStrRaw.length > newDecStrRaw.length ? prevDecStrRaw.slice(0, newDecStrRaw.length) : prevDecStrRaw.padEnd(newDecStrRaw.length, "0");
+  }, [prevDecStrRaw, newDecStrRaw]);
+  React.useEffect(() => {
+    if (isInView || initiallyStable) {
+      prevNumberRef.current = effectiveNumber;
+    }
+  }, [effectiveNumber, isInView, initiallyStable]);
+  const intPlaces = React.useMemo(
+    () => Array.from(
+      { length: finalIntLength },
+      (_, i) => Math.pow(10, finalIntLength - i - 1)
+    ),
+    [finalIntLength]
+  );
+  const decPlaces = React.useMemo(
+    () => newDecStrRaw ? Array.from(
+      { length: newDecStrRaw.length },
+      (_, i) => Math.pow(10, newDecStrRaw.length - i - 1)
+    ) : [],
+    [newDecStrRaw]
+  );
+  const newDecValue = newDecStrRaw ? parseInt(newDecStrRaw, 10) : 0;
+  const prevDecValue = adjustedPrevDec ? parseInt(adjustedPrevDec, 10) : 0;
+  return /* @__PURE__ */ jsxs(
+    m.span,
+    {
+      ref: localRef,
+      "data-slot": "sliding-number",
+      style: {
+        display: "inline-flex",
+        alignItems: "center"
+      },
+      ...props,
+      children: [
+        isInView && Number(number) < 0 && /* @__PURE__ */ jsx("span", { className: "mr-1.5", children: "-" }),
+        intPlaces.map((place, idx) => {
+          const digitsToRight = intPlaces.length - idx - 1;
+          const isSeparatorPosition = typeof thousandSeparator !== "undefined" && digitsToRight > 0 && digitsToRight % 3 === 0;
+          return /* @__PURE__ */ jsxs(React.Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              SlidingNumberRoller,
+              {
+                prevValue: parseInt(adjustedPrevInt, 10),
+                value: parseInt(newIntStr ?? "0", 10),
+                place,
+                transition
+              }
+            ),
+            isSeparatorPosition && /* @__PURE__ */ jsx("span", { children: thousandSeparator })
+          ] }, `int-${place}`);
+        }),
+        !!newDecStrRaw && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("span", { children: decimalSeparator }),
+          decPlaces.map((place) => /* @__PURE__ */ jsx(
+            SlidingNumberRoller,
+            {
+              prevValue: prevDecValue,
+              value: newDecValue,
+              place,
+              transition,
+              delay
+            },
+            `dec-${place}`
+          ))
+        ] })
+      ]
+    }
+  );
+}
+
+export { SlidingNumber };