@rio-cloud/rio-uikit 2.5.1 → 3.0.0-beta.1

package/components/circularProgress/CircularProgress.js

@@ -1,197 +1,151 @@
-import { jsxs as x, jsx as d } from "react/jsx-runtime";
-import { useId as _, useMemo as L } from "react";
-import q from "../../utils/classNames.js";
-import { useReducedMotion as G } from "../../node_modules/framer-motion/dist/es/utils/reduced-motion/use-reduced-motion.js";
-import { motion as z } from "../../node_modules/framer-motion/dist/es/render/components/motion/proxy.js";
-const k = (e, r, n) => Math.min(n, Math.max(r, e)), H = (e) => {
-  switch (e) {
-    case "xs":
-      return 32;
-    case "sm":
-      return 48;
-    case "lg":
-      return 80;
-    case "xl":
-      return 120;
-    default:
-      return 64;
-  }
-}, J = (e) => {
-  switch (e) {
-    case "success":
-      return "var(--brand-success)";
-    case "info":
-      return "var(--brand-info)";
-    case "warning":
-      return "var(--brand-warning)";
-    case "danger":
-      return "var(--brand-danger)";
-    case "secondary":
-      return "var(--brand-secondary)";
-    case "default":
-      return "var(--gray)";
-    case "white":
-      return "var(--color-white)";
-    default:
-      return "var(--brand-primary)";
-  }
-}, K = (e) => {
-  switch (e) {
-    case "decent":
-      return "var(--gray-decent)";
-    case "lightest":
-      return "var(--gray-lightest)";
-    case "lighter":
-      return "var(--gray-lighter)";
-    case "light":
-      return "var(--gray-light)";
-    case "gray":
-      return "var(--gray)";
-    case "dark":
-      return "var(--gray-dark)";
-    case "darker":
-      return "var(--gray-darker)";
-    case "darkest":
-      return "var(--gray-darkest)";
-    case "white":
-      return "var(--color-white)";
-  }
-}, Q = (e, r, n, h) => {
-  const u = {
-    maximumFractionDigits: 0,
-    ...h
-  }, t = new Intl.NumberFormat(void 0, u);
-  if (u.style === "percent") {
-    const i = n - r, m = i === 0 ? 0 : (e - r) / i;
-    return t.format(k(m, 0, 1));
-  }
-  return t.format(e);
-}, oe = (e) => {
-  const {
-    label: r,
-    size: n = "md",
-    color: h = "primary",
-    value: u = 0,
-    valueLabel: t,
-    minValue: i = 0,
-    maxValue: m = 100,
-    formatOptions: b,
-    isIndeterminate: s = !1,
-    showValueLabel: w = !0,
-    strokeWidth: c = 8,
-    trackColor: O = "lighter",
-    trackClassName: R,
-    disableAnimation: S = !1,
-    animationDelay: N = 0,
-    className: B,
-    ringWrapClassName: F,
-    valueLabelClassName: T,
-    labelClassName: j
-  } = e, I = `circular-progress-label-${_()}`, A = G(), f = !(S || A), g = H(n), C = J(h), W = K(O), a = Math.min(i, m), o = Math.max(i, m), l = k(u, a, o), { radius: p, circumference: M, strokeDasharray: $, strokeDashoffset: E, ratio: X } = L(() => {
-    const D = (100 - c) / 2, y = 2 * Math.PI * D, P = o - a, Y = P === 0 ? 0 : (l - a) / P, V = k(Y, 0, 1);
-    return {
-      radius: D,
-      circumference: y,
-      strokeDasharray: y,
-      strokeDashoffset: y * (1 - V),
-      ratio: V
-    };
-  }, [o, a, l, c]), v = L(() => w ? t || Q(l, a, o, b) : null, [b, o, a, l, w, t]);
-  return /* @__PURE__ */ x(
-    "div",
-    {
-      className: `display-flex flex-column align-items-center text-center gap-10 ${B ?? ""}`,
-      "aria-labelledby": r ? I : void 0,
-      children: [
-        /* @__PURE__ */ x(
-          "div",
-          {
-            className: F ?? "",
-            role: "progressbar",
-            "aria-busy": s || void 0,
-            "aria-valuemin": s ? void 0 : a,
-            "aria-valuemax": s ? void 0 : o,
-            "aria-valuenow": s ? void 0 : l,
-            "aria-valuetext": !s && typeof v == "string" ? v : void 0,
-            style: {
-              width: g,
-              height: g,
-              position: "relative",
-              display: "grid",
-              placeItems: "center"
-            },
-            children: [
-              /* @__PURE__ */ x("svg", { width: g, height: g, viewBox: "0 0 100 100", style: { transform: "rotate(-90deg)" }, children: [
-                /* @__PURE__ */ d(
-                  "circle",
-                  {
-                    cx: "50",
-                    cy: "50",
-                    r: p,
-                    fill: "none",
-                    stroke: W,
-                    strokeWidth: c,
-                    className: R ?? ""
-                  }
-                ),
-                s ? /* @__PURE__ */ d(
-                  z.circle,
-                  {
-                    cx: "50",
-                    cy: "50",
-                    r: p,
-                    fill: "none",
-                    stroke: C,
-                    strokeWidth: c,
-                    strokeLinecap: "round",
-                    strokeDasharray: M * 0.35,
-                    strokeDashoffset: 0,
-                    animate: f ? { rotate: 360 } : void 0,
-                    transition: f ? {
-                      repeat: Number.POSITIVE_INFINITY,
-                      ease: "linear",
-                      duration: 1,
-                      delay: N
-                    } : void 0,
-                    style: { transformOrigin: "50px 50px" }
-                  }
-                ) : /* @__PURE__ */ d(
-                  z.circle,
-                  {
-                    cx: "50",
-                    cy: "50",
-                    r: p,
-                    fill: "none",
-                    stroke: C,
-                    strokeWidth: c,
-                    strokeLinecap: "round",
-                    strokeDasharray: $,
-                    initial: f ? { strokeDashoffset: M } : !1,
-                    animate: { strokeDashoffset: E },
-                    transition: f ? { duration: 0.6, ease: "easeOut", delay: N } : void 0
-                  }
-                )
-              ] }),
-              v != null && /* @__PURE__ */ d(
-                "div",
-                {
-                  className: q(
-                    "position-absolute",
-                    "display-grid place-items-center",
-                    T
-                  ),
-                  children: v
-                }
-              )
-            ]
-          }
-        ),
-        r != null && /* @__PURE__ */ d("div", { id: I, className: j ?? "", children: r })
-      ]
-    }
-  );
+import e from "../../utils/classNames.js";
+import { motion as t } from "../../node_modules/framer-motion/dist/es/render/components/motion/proxy.js";
+import { useReducedMotion as n } from "../../node_modules/framer-motion/dist/es/utils/reduced-motion/use-reduced-motion.js";
+import { useId as r, useMemo as i } from "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region src/components/circularProgress/CircularProgress.tsx
+var s = (e, t, n) => Math.min(n, Math.max(t, e)), c = (e) => {
+	switch (e) {
+		case "xs": return 32;
+		case "sm": return 48;
+		case "lg": return 80;
+		case "xl": return 120;
+		default: return 64;
+	}
+}, l = (e) => {
+	switch (e) {
+		case "success": return "var(--brand-success)";
+		case "info": return "var(--brand-info)";
+		case "warning": return "var(--brand-warning)";
+		case "danger": return "var(--brand-danger)";
+		case "secondary": return "var(--brand-secondary)";
+		case "default": return "var(--gray)";
+		case "white": return "var(--color-white)";
+		default: return "var(--brand-primary)";
+	}
+}, u = (e) => {
+	switch (e) {
+		case "decent": return "var(--gray-decent)";
+		case "lightest": return "var(--gray-lightest)";
+		case "lighter": return "var(--gray-lighter)";
+		case "light": return "var(--gray-light)";
+		case "gray": return "var(--gray)";
+		case "dark": return "var(--gray-dark)";
+		case "darker": return "var(--gray-darker)";
+		case "darkest": return "var(--gray-darkest)";
+		case "white": return "var(--color-white)";
+	}
+}, d = (e, t, n, r) => {
+	let i = {
+		maximumFractionDigits: 0,
+		...r
+	}, a = new Intl.NumberFormat(void 0, i);
+	if (i.style === "percent") {
+		let r = n - t, i = r === 0 ? 0 : (e - t) / r;
+		return a.format(s(i, 0, 1));
+	}
+	return a.format(e);
+}, f = (f) => {
+	let { label: p, size: m = "md", color: h = "primary", value: g = 0, valueLabel: _, minValue: v = 0, maxValue: y = 100, formatOptions: b, isIndeterminate: x = !1, showValueLabel: S = !0, strokeWidth: C = 8, trackColor: w = "lighter", trackClassName: T, disableAnimation: E = !1, animationDelay: D = 0, className: O, ringWrapClassName: k, valueLabelClassName: A, labelClassName: j } = f, M = `circular-progress-label-${r()}`, N = n(), P = !(E || N), F = c(m), I = l(h), L = u(w), R = Math.min(v, y), z = Math.max(v, y), B = s(g, R, z), { radius: V, circumference: H, strokeDasharray: U, strokeDashoffset: W, ratio: G } = i(() => {
+		let e = (100 - C) / 2, t = 2 * Math.PI * e, n = z - R, r = s(n === 0 ? 0 : (B - R) / n, 0, 1);
+		return {
+			radius: e,
+			circumference: t,
+			strokeDasharray: t,
+			strokeDashoffset: t * (1 - r),
+			ratio: r
+		};
+	}, [
+		z,
+		R,
+		B,
+		C
+	]), K = i(() => S ? _ || d(B, R, z, b) : null, [
+		b,
+		z,
+		R,
+		B,
+		S,
+		_
+	]);
+	return /* @__PURE__ */ o("div", {
+		className: `display-flex flex-column align-items-center text-center gap-10 ${O ?? ""}`,
+		"aria-labelledby": p ? M : void 0,
+		children: [/* @__PURE__ */ o("div", {
+			className: k ?? "",
+			role: "progressbar",
+			"aria-busy": x || void 0,
+			"aria-valuemin": x ? void 0 : R,
+			"aria-valuemax": x ? void 0 : z,
+			"aria-valuenow": x ? void 0 : B,
+			"aria-valuetext": !x && typeof K == "string" ? K : void 0,
+			style: {
+				width: F,
+				height: F,
+				position: "relative",
+				display: "grid",
+				placeItems: "center"
+			},
+			children: [/* @__PURE__ */ o("svg", {
+				width: F,
+				height: F,
+				viewBox: "0 0 100 100",
+				style: { transform: "rotate(-90deg)" },
+				children: [/* @__PURE__ */ a("circle", {
+					cx: "50",
+					cy: "50",
+					r: V,
+					fill: "none",
+					stroke: L,
+					strokeWidth: C,
+					className: T ?? ""
+				}), x ? /* @__PURE__ */ a(t.circle, {
+					cx: "50",
+					cy: "50",
+					r: V,
+					fill: "none",
+					stroke: I,
+					strokeWidth: C,
+					strokeLinecap: "round",
+					strokeDasharray: H * .35,
+					strokeDashoffset: 0,
+					animate: P ? { rotate: 360 } : void 0,
+					transition: P ? {
+						repeat: Infinity,
+						ease: "linear",
+						duration: 1,
+						delay: D
+					} : void 0,
+					style: { transformOrigin: "50px 50px" }
+				}) : /* @__PURE__ */ a(t.circle, {
+					cx: "50",
+					cy: "50",
+					r: V,
+					fill: "none",
+					stroke: I,
+					strokeWidth: C,
+					strokeLinecap: "round",
+					strokeDasharray: U,
+					initial: P ? { strokeDashoffset: H } : !1,
+					animate: { strokeDashoffset: W },
+					transition: P ? {
+						duration: .6,
+						ease: "easeOut",
+						delay: D
+					} : void 0
+				})]
+			}), K != null && /* @__PURE__ */ a("div", {
+				className: e("position-absolute", "display-grid place-items-center", A),
+				children: K
+			})]
+		}), p != null && /* @__PURE__ */ a("div", {
+			id: M,
+			className: j ?? "",
+			children: p
+		})]
+	});
 };
-export {
-  oe as default
-};
-//# sourceMappingURL=CircularProgress.js.map
+//#endregion
+export { f as default };
+
+//# sourceMappingURL=CircularProgress.js.map

package/components/circularProgress/CircularProgress.js.map

@@ -1 +1 @@
-{"version":3,"file":"CircularProgress.js","sources":["../../../src/components/circularProgress/CircularProgress.tsx"],"sourcesContent":["import { useId, useMemo } from 'react';\nimport { motion, useReducedMotion } from 'framer-motion';\n\nimport classNames from '../../utils/classNames';\n\nexport type CircularProgressColor =\n    | 'default'\n    | 'primary'\n    | 'secondary'\n    | 'info'\n    | 'success'\n    | 'warning'\n    | 'danger'\n    | 'white';\n\nexport type CircularProgressSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n\nexport type CircularProgressTrackColor =\n    | 'decent'\n    | 'lightest'\n    | 'lighter'\n    | 'light'\n    | 'gray'\n    | 'dark'\n    | 'darker'\n    | 'darkest'\n    | 'white';\n\nexport type CircularProgressProps = {\n    /**\n     * Optional text or node shown below the ring.\n     */\n    label?: React.ReactNode;\n\n    /**\n     * Preset size for the component.\n     *\n     * Possible values are:\n     *\n     * - `'xs'`\n     * - `'sm'`\n     * - `'md'`\n     * - `'lg'`\n     * - `'xl'`\n     *\n     * @default 'md'\n     */\n    size?: CircularProgressSize;\n\n    /**\n     * Color preset for the progress ring.\n     *\n     * Possible values are:\n     *\n     * - `'default'`\n     * - `'primary'`\n     * - `'secondary'`\n     * - `'info'`\n     * - `'success'`\n     * - `'warning'`\n     * - `'danger'`\n     * - `'white'`\n     *\n     * @default 'primary'\n     */\n    color?: CircularProgressColor;\n\n    /**\n     * Defaults to 0 to avoid indeterminate/spinner visuals.\n     *\n     * @default 0\n     */\n    value?: number;\n\n    /**\n     * Override the rendered value label content.\n     */\n    valueLabel?: React.ReactNode;\n\n    /**\n     * Minimum value for the range.\n     *\n     * @default 0\n     */\n    minValue?: number;\n\n    /**\n     * Maximum value for the range.\n     *\n     * @default 100\n     */\n    maxValue?: number;\n\n    /**\n     * Formatting for the visible value label.\n     * - If style === \"percent\": formats ratio (value-min)/(max-min)\n     * - Otherwise: formats the raw value (e.g. unit)\n     */\n    formatOptions?: Intl.NumberFormatOptions;\n\n    /**\n     * Indeterminate mode is opt-in. Animates the progress indefinitely.\n     * May come in handy when the value still loads to prevent layout shifting.\n     *\n     * @default false\n     */\n    isIndeterminate?: boolean;\n\n    /**\n     * Toggles the value label in the center of the ring.\n     *\n     * @default true\n     */\n    showValueLabel?: boolean;\n\n    /**\n     * Stroke width used for the ring and track.\n     *\n     * @default 8\n     */\n    strokeWidth?: number;\n\n    /**\n     * Track color preset for the background ring.\n     *\n     * Possible values are:\n     *\n     * - `'decent'`\n     * - `'lightest'`\n     * - `'lighter'`\n     * - `'light'`\n     * - `'gray'`\n     * - `'dark'`\n     * - `'darker'`\n     * - `'darkest'`\n     * - `'white'`\n     *\n     * @default 'lighter'\n     */\n    trackColor?: CircularProgressTrackColor;\n\n    /**\n     * Class name for the track (background ring).\n     */\n    trackClassName?: string;\n\n    /**\n     * Disable motion even if the user allows animations.\n     *\n     * @default false\n     */\n    disableAnimation?: boolean;\n\n    /**\n     * Delay before the progress animation starts (in seconds).\n     *\n     * @default 0\n     */\n    animationDelay?: number;\n\n    /**\n     * Class name for the outer wrapper.\n     */\n    className?: string;\n\n    /**\n     * Class name for the ring wrapper.\n     */\n    ringWrapClassName?: string;\n\n    /**\n     * Class name for the center value label.\n     */\n    valueLabelClassName?: string;\n\n    /**\n     * Class name for the label under the ring.\n     */\n    labelClassName?: string;\n};\n\nconst clamp = (value: number, min: number, max: number) => Math.min(max, Math.max(min, value));\n\nconst getSizePx = (size: CircularProgressSize) => {\n    switch (size) {\n        case 'xs':\n            return 32;\n        case 'sm':\n            return 48;\n        case 'lg':\n            return 80;\n        case 'xl':\n            return 120;\n        default:\n            return 64;\n    }\n};\n\nconst getProgressColor = (color: CircularProgressColor) => {\n    switch (color) {\n        case 'success':\n            return 'var(--brand-success)';\n        case 'info':\n            return 'var(--brand-info)';\n        case 'warning':\n            return 'var(--brand-warning)';\n        case 'danger':\n            return 'var(--brand-danger)';\n        case 'secondary':\n            return 'var(--brand-secondary)';\n        case 'default':\n            return 'var(--gray)';\n        case 'white':\n            return 'var(--color-white)';\n        default:\n            return 'var(--brand-primary)';\n    }\n};\n\nconst getTrackColor = (trackColor: CircularProgressTrackColor) => {\n    switch (trackColor) {\n        case 'decent':\n            return 'var(--gray-decent)';\n        case 'lightest':\n            return 'var(--gray-lightest)';\n        case 'lighter':\n            return 'var(--gray-lighter)';\n        case 'light':\n            return 'var(--gray-light)';\n        case 'gray':\n            return 'var(--gray)';\n        case 'dark':\n            return 'var(--gray-dark)';\n        case 'darker':\n            return 'var(--gray-darker)';\n        case 'darkest':\n            return 'var(--gray-darkest)';\n        case 'white':\n            return 'var(--color-white)';\n    }\n};\n\nconst formatValue = (value: number, minValue: number, maxValue: number, formatOptions?: Intl.NumberFormatOptions) => {\n    const options: Intl.NumberFormatOptions = {\n        maximumFractionDigits: 0,\n        ...formatOptions,\n    };\n\n    const formatter = new Intl.NumberFormat(undefined, options);\n\n    if (options.style === 'percent') {\n        const denom = maxValue - minValue;\n        const ratio = denom === 0 ? 0 : (value - minValue) / denom;\n        return formatter.format(clamp(ratio, 0, 1));\n    }\n\n    return formatter.format(value);\n};\n\nconst CircularProgress = (props: CircularProgressProps) => {\n    const {\n        label,\n        size = 'md',\n        color = 'primary',\n\n        value: valueProp = 0,\n        valueLabel,\n\n        minValue = 0,\n        maxValue = 100,\n\n        formatOptions,\n        isIndeterminate = false,\n        showValueLabel = true,\n\n        strokeWidth = 8,\n        trackColor = 'lighter',\n        trackClassName,\n\n        disableAnimation = false,\n        animationDelay = 0,\n\n        className,\n        ringWrapClassName,\n        valueLabelClassName,\n        labelClassName,\n    } = props;\n\n    const reactId = useId();\n    const labelId = `circular-progress-label-${reactId}`;\n\n    const prefersReducedMotion = useReducedMotion();\n    const shouldAnimate = !(disableAnimation || prefersReducedMotion);\n\n    const sizePx = getSizePx(size);\n    const progressColor = getProgressColor(color);\n    const trackColorValue = getTrackColor(trackColor);\n\n    const safeMin = Math.min(minValue, maxValue);\n    const safeMax = Math.max(minValue, maxValue);\n    const safeValue = clamp(valueProp, safeMin, safeMax);\n\n    const { radius, circumference, strokeDasharray, strokeDashoffset, ratio } = useMemo(() => {\n        const viewBoxSize = 100;\n        const r = (viewBoxSize - strokeWidth) / 2;\n        const c = 2 * Math.PI * r;\n\n        const denom = safeMax - safeMin;\n        const progressRatio = denom === 0 ? 0 : (safeValue - safeMin) / denom;\n        const clampedRatio = clamp(progressRatio, 0, 1);\n\n        return {\n            radius: r,\n            circumference: c,\n            strokeDasharray: c,\n            strokeDashoffset: c * (1 - clampedRatio),\n            ratio: clampedRatio,\n        };\n    }, [safeMax, safeMin, safeValue, strokeWidth]);\n\n    const computedValueLabel = useMemo(() => {\n        if (!showValueLabel) {\n            return null;\n        }\n        if (valueLabel) {\n            return valueLabel;\n        }\n        return formatValue(safeValue, safeMin, safeMax, formatOptions);\n    }, [formatOptions, safeMax, safeMin, safeValue, showValueLabel, valueLabel]);\n\n    return (\n        <div\n            className={`display-flex flex-column align-items-center text-center gap-10 ${className ?? ''}`}\n            aria-labelledby={label ? labelId : undefined}\n        >\n            <div\n                className={ringWrapClassName ?? ''}\n                role='progressbar'\n                aria-busy={isIndeterminate || undefined}\n                aria-valuemin={!isIndeterminate ? safeMin : undefined}\n                aria-valuemax={!isIndeterminate ? safeMax : undefined}\n                aria-valuenow={!isIndeterminate ? safeValue : undefined}\n                aria-valuetext={\n                    !isIndeterminate && typeof computedValueLabel === 'string' ? computedValueLabel : undefined\n                }\n                style={{\n                    width: sizePx,\n                    height: sizePx,\n                    position: 'relative',\n                    display: 'grid',\n                    placeItems: 'center',\n                }}\n            >\n                <svg width={sizePx} height={sizePx} viewBox='0 0 100 100' style={{ transform: 'rotate(-90deg)' }}>\n                    <circle\n                        cx='50'\n                        cy='50'\n                        r={radius}\n                        fill='none'\n                        stroke={trackColorValue}\n                        strokeWidth={strokeWidth}\n                        className={trackClassName ?? ''}\n                    />\n\n                    {isIndeterminate ? (\n                        <motion.circle\n                            cx='50'\n                            cy='50'\n                            r={radius}\n                            fill='none'\n                            stroke={progressColor}\n                            strokeWidth={strokeWidth}\n                            strokeLinecap='round'\n                            strokeDasharray={circumference * 0.35}\n                            strokeDashoffset={0}\n                            animate={shouldAnimate ? { rotate: 360 } : undefined}\n                            transition={\n                                shouldAnimate\n                                    ? {\n                                          repeat: Number.POSITIVE_INFINITY,\n                                          ease: 'linear',\n                                          duration: 1,\n                                          delay: animationDelay,\n                                      }\n                                    : undefined\n                            }\n                            style={{ transformOrigin: '50px 50px' }}\n                        />\n                    ) : (\n                        <motion.circle\n                            cx='50'\n                            cy='50'\n                            r={radius}\n                            fill='none'\n                            stroke={progressColor}\n                            strokeWidth={strokeWidth}\n                            strokeLinecap='round'\n                            strokeDasharray={strokeDasharray}\n                            initial={shouldAnimate ? { strokeDashoffset: circumference } : false}\n                            animate={{ strokeDashoffset }}\n                            transition={\n                                shouldAnimate ? { duration: 0.6, ease: 'easeOut', delay: animationDelay } : undefined\n                            }\n                        />\n                    )}\n                </svg>\n\n                {computedValueLabel != null && (\n                    <div\n                        className={classNames(\n                            'position-absolute',\n                            'display-grid place-items-center',\n                            valueLabelClassName\n                        )}\n                    >\n                        {computedValueLabel}\n                    </div>\n                )}\n            </div>\n\n            {label != null && (\n                <div id={labelId} className={labelClassName ?? ''}>\n                    {label}\n                </div>\n            )}\n        </div>\n    );\n};\n\nexport default CircularProgress;\n"],"names":["clamp","value","min","max","getSizePx","size","getProgressColor","color","getTrackColor","trackColor","formatValue","minValue","maxValue","formatOptions","options","formatter","denom","ratio","CircularProgress","props","label","valueProp","valueLabel","isIndeterminate","showValueLabel","strokeWidth","trackClassName","disableAnimation","animationDelay","className","ringWrapClassName","valueLabelClassName","labelClassName","labelId","useId","prefersReducedMotion","useReducedMotion","shouldAnimate","sizePx","progressColor","trackColorValue","safeMin","safeMax","safeValue","radius","circumference","strokeDasharray","strokeDashoffset","useMemo","r","c","progressRatio","clampedRatio","computedValueLabel","jsxs","jsx","motion","classNames"],"mappings":"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"}
+{"version":3,"file":"CircularProgress.js","names":[],"sources":["../../../src/components/circularProgress/CircularProgress.tsx"],"sourcesContent":["import { useId, useMemo } from 'react';\nimport { motion, useReducedMotion } from 'framer-motion';\n\nimport classNames from '../../utils/classNames';\n\nexport type CircularProgressColor =\n    | 'default'\n    | 'primary'\n    | 'secondary'\n    | 'info'\n    | 'success'\n    | 'warning'\n    | 'danger'\n    | 'white';\n\nexport type CircularProgressSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n\nexport type CircularProgressTrackColor =\n    | 'decent'\n    | 'lightest'\n    | 'lighter'\n    | 'light'\n    | 'gray'\n    | 'dark'\n    | 'darker'\n    | 'darkest'\n    | 'white';\n\nexport type CircularProgressProps = {\n    /**\n     * Optional text or node shown below the ring.\n     */\n    label?: React.ReactNode;\n\n    /**\n     * Preset size for the component.\n     *\n     * Possible values are:\n     *\n     * - `'xs'`\n     * - `'sm'`\n     * - `'md'`\n     * - `'lg'`\n     * - `'xl'`\n     *\n     * @default 'md'\n     */\n    size?: CircularProgressSize;\n\n    /**\n     * Color preset for the progress ring.\n     *\n     * Possible values are:\n     *\n     * - `'default'`\n     * - `'primary'`\n     * - `'secondary'`\n     * - `'info'`\n     * - `'success'`\n     * - `'warning'`\n     * - `'danger'`\n     * - `'white'`\n     *\n     * @default 'primary'\n     */\n    color?: CircularProgressColor;\n\n    /**\n     * Defaults to 0 to avoid indeterminate/spinner visuals.\n     *\n     * @default 0\n     */\n    value?: number;\n\n    /**\n     * Override the rendered value label content.\n     */\n    valueLabel?: React.ReactNode;\n\n    /**\n     * Minimum value for the range.\n     *\n     * @default 0\n     */\n    minValue?: number;\n\n    /**\n     * Maximum value for the range.\n     *\n     * @default 100\n     */\n    maxValue?: number;\n\n    /**\n     * Formatting for the visible value label.\n     * - If style === \"percent\": formats ratio (value-min)/(max-min)\n     * - Otherwise: formats the raw value (e.g. unit)\n     */\n    formatOptions?: Intl.NumberFormatOptions;\n\n    /**\n     * Indeterminate mode is opt-in. Animates the progress indefinitely.\n     * May come in handy when the value still loads to prevent layout shifting.\n     *\n     * @default false\n     */\n    isIndeterminate?: boolean;\n\n    /**\n     * Toggles the value label in the center of the ring.\n     *\n     * @default true\n     */\n    showValueLabel?: boolean;\n\n    /**\n     * Stroke width used for the ring and track.\n     *\n     * @default 8\n     */\n    strokeWidth?: number;\n\n    /**\n     * Track color preset for the background ring.\n     *\n     * Possible values are:\n     *\n     * - `'decent'`\n     * - `'lightest'`\n     * - `'lighter'`\n     * - `'light'`\n     * - `'gray'`\n     * - `'dark'`\n     * - `'darker'`\n     * - `'darkest'`\n     * - `'white'`\n     *\n     * @default 'lighter'\n     */\n    trackColor?: CircularProgressTrackColor;\n\n    /**\n     * Class name for the track (background ring).\n     */\n    trackClassName?: string;\n\n    /**\n     * Disable motion even if the user allows animations.\n     *\n     * @default false\n     */\n    disableAnimation?: boolean;\n\n    /**\n     * Delay before the progress animation starts (in seconds).\n     *\n     * @default 0\n     */\n    animationDelay?: number;\n\n    /**\n     * Class name for the outer wrapper.\n     */\n    className?: string;\n\n    /**\n     * Class name for the ring wrapper.\n     */\n    ringWrapClassName?: string;\n\n    /**\n     * Class name for the center value label.\n     */\n    valueLabelClassName?: string;\n\n    /**\n     * Class name for the label under the ring.\n     */\n    labelClassName?: string;\n};\n\nconst clamp = (value: number, min: number, max: number) => Math.min(max, Math.max(min, value));\n\nconst getSizePx = (size: CircularProgressSize) => {\n    switch (size) {\n        case 'xs':\n            return 32;\n        case 'sm':\n            return 48;\n        case 'lg':\n            return 80;\n        case 'xl':\n            return 120;\n        default:\n            return 64;\n    }\n};\n\nconst getProgressColor = (color: CircularProgressColor) => {\n    switch (color) {\n        case 'success':\n            return 'var(--brand-success)';\n        case 'info':\n            return 'var(--brand-info)';\n        case 'warning':\n            return 'var(--brand-warning)';\n        case 'danger':\n            return 'var(--brand-danger)';\n        case 'secondary':\n            return 'var(--brand-secondary)';\n        case 'default':\n            return 'var(--gray)';\n        case 'white':\n            return 'var(--color-white)';\n        default:\n            return 'var(--brand-primary)';\n    }\n};\n\nconst getTrackColor = (trackColor: CircularProgressTrackColor) => {\n    switch (trackColor) {\n        case 'decent':\n            return 'var(--gray-decent)';\n        case 'lightest':\n            return 'var(--gray-lightest)';\n        case 'lighter':\n            return 'var(--gray-lighter)';\n        case 'light':\n            return 'var(--gray-light)';\n        case 'gray':\n            return 'var(--gray)';\n        case 'dark':\n            return 'var(--gray-dark)';\n        case 'darker':\n            return 'var(--gray-darker)';\n        case 'darkest':\n            return 'var(--gray-darkest)';\n        case 'white':\n            return 'var(--color-white)';\n    }\n};\n\nconst formatValue = (value: number, minValue: number, maxValue: number, formatOptions?: Intl.NumberFormatOptions) => {\n    const options: Intl.NumberFormatOptions = {\n        maximumFractionDigits: 0,\n        ...formatOptions,\n    };\n\n    const formatter = new Intl.NumberFormat(undefined, options);\n\n    if (options.style === 'percent') {\n        const denom = maxValue - minValue;\n        const ratio = denom === 0 ? 0 : (value - minValue) / denom;\n        return formatter.format(clamp(ratio, 0, 1));\n    }\n\n    return formatter.format(value);\n};\n\nconst CircularProgress = (props: CircularProgressProps) => {\n    const {\n        label,\n        size = 'md',\n        color = 'primary',\n\n        value: valueProp = 0,\n        valueLabel,\n\n        minValue = 0,\n        maxValue = 100,\n\n        formatOptions,\n        isIndeterminate = false,\n        showValueLabel = true,\n\n        strokeWidth = 8,\n        trackColor = 'lighter',\n        trackClassName,\n\n        disableAnimation = false,\n        animationDelay = 0,\n\n        className,\n        ringWrapClassName,\n        valueLabelClassName,\n        labelClassName,\n    } = props;\n\n    const reactId = useId();\n    const labelId = `circular-progress-label-${reactId}`;\n\n    const prefersReducedMotion = useReducedMotion();\n    const shouldAnimate = !(disableAnimation || prefersReducedMotion);\n\n    const sizePx = getSizePx(size);\n    const progressColor = getProgressColor(color);\n    const trackColorValue = getTrackColor(trackColor);\n\n    const safeMin = Math.min(minValue, maxValue);\n    const safeMax = Math.max(minValue, maxValue);\n    const safeValue = clamp(valueProp, safeMin, safeMax);\n\n    const { radius, circumference, strokeDasharray, strokeDashoffset, ratio } = useMemo(() => {\n        const viewBoxSize = 100;\n        const r = (viewBoxSize - strokeWidth) / 2;\n        const c = 2 * Math.PI * r;\n\n        const denom = safeMax - safeMin;\n        const progressRatio = denom === 0 ? 0 : (safeValue - safeMin) / denom;\n        const clampedRatio = clamp(progressRatio, 0, 1);\n\n        return {\n            radius: r,\n            circumference: c,\n            strokeDasharray: c,\n            strokeDashoffset: c * (1 - clampedRatio),\n            ratio: clampedRatio,\n        };\n    }, [safeMax, safeMin, safeValue, strokeWidth]);\n\n    const computedValueLabel = useMemo(() => {\n        if (!showValueLabel) {\n            return null;\n        }\n        if (valueLabel) {\n            return valueLabel;\n        }\n        return formatValue(safeValue, safeMin, safeMax, formatOptions);\n    }, [formatOptions, safeMax, safeMin, safeValue, showValueLabel, valueLabel]);\n\n    return (\n        <div\n            className={`display-flex flex-column align-items-center text-center gap-10 ${className ?? ''}`}\n            aria-labelledby={label ? labelId : undefined}\n        >\n            <div\n                className={ringWrapClassName ?? ''}\n                role='progressbar'\n                aria-busy={isIndeterminate || undefined}\n                aria-valuemin={!isIndeterminate ? safeMin : undefined}\n                aria-valuemax={!isIndeterminate ? safeMax : undefined}\n                aria-valuenow={!isIndeterminate ? safeValue : undefined}\n                aria-valuetext={\n                    !isIndeterminate && typeof computedValueLabel === 'string' ? computedValueLabel : undefined\n                }\n                style={{\n                    width: sizePx,\n                    height: sizePx,\n                    position: 'relative',\n                    display: 'grid',\n                    placeItems: 'center',\n                }}\n            >\n                <svg width={sizePx} height={sizePx} viewBox='0 0 100 100' style={{ transform: 'rotate(-90deg)' }}>\n                    <circle\n                        cx='50'\n                        cy='50'\n                        r={radius}\n                        fill='none'\n                        stroke={trackColorValue}\n                        strokeWidth={strokeWidth}\n                        className={trackClassName ?? ''}\n                    />\n\n                    {isIndeterminate ? (\n                        <motion.circle\n                            cx='50'\n                            cy='50'\n                            r={radius}\n                            fill='none'\n                            stroke={progressColor}\n                            strokeWidth={strokeWidth}\n                            strokeLinecap='round'\n                            strokeDasharray={circumference * 0.35}\n                            strokeDashoffset={0}\n                            animate={shouldAnimate ? { rotate: 360 } : undefined}\n                            transition={\n                                shouldAnimate\n                                    ? {\n                                          repeat: Number.POSITIVE_INFINITY,\n                                          ease: 'linear',\n                                          duration: 1,\n                                          delay: animationDelay,\n                                      }\n                                    : undefined\n                            }\n                            style={{ transformOrigin: '50px 50px' }}\n                        />\n                    ) : (\n                        <motion.circle\n                            cx='50'\n                            cy='50'\n                            r={radius}\n                            fill='none'\n                            stroke={progressColor}\n                            strokeWidth={strokeWidth}\n                            strokeLinecap='round'\n                            strokeDasharray={strokeDasharray}\n                            initial={shouldAnimate ? { strokeDashoffset: circumference } : false}\n                            animate={{ strokeDashoffset }}\n                            transition={\n                                shouldAnimate ? { duration: 0.6, ease: 'easeOut', delay: animationDelay } : undefined\n                            }\n                        />\n                    )}\n                </svg>\n\n                {computedValueLabel != null && (\n                    <div\n                        className={classNames(\n                            'position-absolute',\n                            'display-grid place-items-center',\n                            valueLabelClassName\n                        )}\n                    >\n                        {computedValueLabel}\n                    </div>\n                )}\n            </div>\n\n            {label != null && (\n                <div id={labelId} className={labelClassName ?? ''}>\n                    {label}\n                </div>\n            )}\n        </div>\n    );\n};\n\nexport default CircularProgress;\n"],"mappings":"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"}

package/components/clearableInput/ClearableInput.d.ts

@@ -59,7 +59,7 @@ export type ClearableInputProps = {
     /**
      * The callback ref for the underlying input. Alternatively, use can use a forward ref.
      */
-    inputRef?: React.RefObject<HTMLInputElement>;
+    inputRef?: React.RefObject<HTMLInputElement | null>;
     /**
      * Sets autocomplete value for autosuggest forms.
      */