@spark-ui/components 17.2.3 → 17.2.4

package/dist/circular-meter/index.mjs

@@ -1,316 +1,361 @@
-import { jsx as o, jsxs as V } from "react/jsx-runtime";
-import { Meter as C } from "@base-ui/react/meter";
-import { cva as b, cx as k } from "class-variance-authority";
-import { createContext as L, useContext as R, useState as T, useMemo as A, useRef as g, useEffect as w, useId as O, useCallback as $ } from "react";
-import { useMergeRefs as D } from "@spark-ui/hooks/use-merge-refs";
-const P = b(["focus-visible:u-outline gap-md flex items-center"], {
-  variants: {
-    orientation: {
-      vertical: ["default:flex-col"],
-      horizontal: ["default:flex-row"]
-    }
-  },
-  defaultVariants: {
-    orientation: "vertical"
-  }
-}), E = L(null), _ = ":circular-meter", h = () => {
-  const r = R(E);
-  if (!r)
-    throw new Error("useCircularMeter must be used within a CircularMeter provider");
-  return r;
-}, F = {
-  sm: { diameter: 24, strokeWidth: 4 },
-  md: { diameter: 64, strokeWidth: 8 },
-  lg: { diameter: 96, strokeWidth: 8 },
-  xl: { diameter: 128, strokeWidth: 8 }
-}, S = ({
-  className: r,
-  value: t,
-  max: a = 100,
-  min: s = 0,
-  size: n = "lg",
-  intent: i = "support",
-  orientation: l = "vertical",
-  children: e,
-  ref: d,
-  ...c
-}) => {
-  const [u, m] = T(), { diameter: f, strokeWidth: p } = F[n], x = f / 2 - p / 2, y = 2 * Math.PI * x, M = A(() => ({
-    value: t ?? 0,
-    max: a,
-    min: s,
-    intent: i,
-    onLabelId: m,
-    sizeProp: n,
-    orientation: l,
-    size: f,
-    radius: x,
-    circumference: y,
-    strokeWidth: p
-  }), [
-    a,
-    s,
-    t,
-    i,
-    m,
-    n,
-    l,
-    f,
-    x,
-    y,
-    p
-  ]);
-  return /* @__PURE__ */ o(E.Provider, { value: M, children: /* @__PURE__ */ o(
-    C.Root,
-    {
-      "data-spark-component": "circular-meter",
-      ref: d,
-      className: k(P({ orientation: l }), r),
-      style: c.style,
-      value: t,
-      max: a,
-      min: s,
-      "aria-labelledby": u,
-      ...c,
-      children: e
-    }
-  ) });
+import { cva as e, cx as t } from "class-variance-authority";
+import { createContext as n, useCallback as r, useContext as i, useEffect as a, useId as o, useMemo as s, useRef as c, useState as l } from "react";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
+import { useMergeRefs as f } from "@spark-ui/hooks/use-merge-refs";
+import { Meter as p } from "@base-ui/react/meter";
+//#region src/circular-meter/CircularMeter.styles.ts
+var m = e(["focus-visible:u-outline gap-md flex items-center"], {
+	variants: { orientation: {
+		vertical: ["default:flex-col"],
+		horizontal: ["default:flex-row"]
+	} },
+	defaultVariants: { orientation: "vertical" }
+}), h = n(null), g = ":circular-meter", _ = () => {
+	let e = i(h);
+	if (!e) throw Error("useCircularMeter must be used within a CircularMeter provider");
+	return e;
+}, v = {
+	sm: {
+		diameter: 24,
+		strokeWidth: 4
+	},
+	md: {
+		diameter: 64,
+		strokeWidth: 8
+	},
+	lg: {
+		diameter: 96,
+		strokeWidth: 8
+	},
+	xl: {
+		diameter: 128,
+		strokeWidth: 8
+	}
+}, y = ({ className: e, value: n, max: r = 100, min: i = 0, size: a = "lg", intent: o = "support", orientation: c = "vertical", children: d, ref: f, ...g }) => {
+	let [_, y] = l(), { diameter: b, strokeWidth: x } = v[a], S = b / 2 - x / 2, C = 2 * Math.PI * S, w = s(() => ({
+		value: n ?? 0,
+		max: r,
+		min: i,
+		intent: o,
+		onLabelId: y,
+		sizeProp: a,
+		orientation: c,
+		size: b,
+		radius: S,
+		circumference: C,
+		strokeWidth: x
+	}), [
+		r,
+		i,
+		n,
+		o,
+		y,
+		a,
+		c,
+		b,
+		S,
+		C,
+		x
+	]);
+	return /* @__PURE__ */ u(h.Provider, {
+		value: w,
+		children: /* @__PURE__ */ u(p.Root, {
+			"data-spark-component": "circular-meter",
+			ref: f,
+			className: t(m({ orientation: c }), e),
+			style: g.style,
+			value: n,
+			max: r,
+			min: i,
+			"aria-labelledby": _,
+			...g,
+			children: d
+		})
+	});
 };
-S.displayName = "CircularMeter";
-const v = ({
-  className: r,
-  children: t,
-  ...a
-}) => {
-  const { orientation: s } = h();
-  return /* @__PURE__ */ o(
-    "div",
-    {
-      "data-spark-component": "circular-meter-content",
-      className: k(
-        "gap-xs flex default:flex-col",
-        s === "vertical" && "default:text-center",
-        r
-      ),
-      ...a,
-      children: t
-    }
-  );
+y.displayName = "CircularMeter";
+//#endregion
+//#region src/circular-meter/CircularMeterContent.tsx
+var b = ({ className: e, children: n, ...r }) => {
+	let { orientation: i } = _();
+	return /* @__PURE__ */ u("div", {
+		"data-spark-component": "circular-meter-content",
+		className: t("gap-xs flex default:flex-col", i === "vertical" && "default:text-center", e),
+		...r,
+		children: n
+	});
 };
-v.displayName = "CircularMeter.Content";
-function q(r, t, a = {}) {
-  const { threshold: s = 0.1, rootMargin: n } = a, i = g(!1), l = g(t);
-  return w(() => {
-    l.current = t;
-  }, [t]), w(() => {
-    const e = r.current;
-    if (!e || i.current) return;
-    const d = new IntersectionObserver(
-      (c) => {
-        c.forEach((u) => {
-          u.isIntersecting && !i.current && requestAnimationFrame(() => {
-            i.current || (i.current = !0, l.current(), d.disconnect());
-          });
-        });
-      },
-      {
-        threshold: s,
-        rootMargin: n
-      }
-    );
-    return d.observe(e), () => {
-      d.disconnect();
-    };
-  }, [r, s, n]), i.current;
+b.displayName = "CircularMeter.Content";
+//#endregion
+//#region src/circular-meter/useIntersectionAnimation.ts
+function x(e, t, n = {}) {
+	let { threshold: r = .1, rootMargin: i } = n, o = c(!1), s = c(t);
+	return a(() => {
+		s.current = t;
+	}, [t]), a(() => {
+		let t = e.current;
+		if (!t || o.current) return;
+		let n = new IntersectionObserver((e) => {
+			e.forEach((e) => {
+				e.isIntersecting && !o.current && requestAnimationFrame(() => {
+					o.current || (o.current = !0, s.current(), n.disconnect());
+				});
+			});
+		}, {
+			threshold: r,
+			rootMargin: i
+		});
+		return n.observe(t), () => {
+			n.disconnect();
+		};
+	}, [
+		e,
+		r,
+		i
+	]), o.current;
 }
-const W = L(!1), j = () => R(W), B = b([], {
-  variants: {
-    intent: {
-      main: ["text-main/dim-4"],
-      support: ["text-support/dim-4"],
-      success: ["text-success/dim-4"],
-      alert: ["text-alert/dim-4"],
-      danger: ["text-error/dim-4"],
-      info: ["text-info/dim-4"]
-    }
-  }
-}), G = b([], {
-  variants: {
-    intent: {
-      main: ["text-main"],
-      support: ["text-support"],
-      success: ["text-success"],
-      alert: ["text-alert"],
-      danger: ["text-error"],
-      info: ["text-info"]
-    }
-  }
-}), z = ({ className: r, children: t, ...a }) => {
-  const { value: s, max: n, min: i, intent: l, size: e, radius: d, circumference: c, strokeWidth: u } = h(), m = (s - i) / (n - i) * 100, f = c - m / 100 * c, p = G({ intent: l }), x = g(null), [y, M] = T(!1);
-  return q(x, () => {
-    M(!0);
-  }), /* @__PURE__ */ o(C.Track, { "data-spark-component": "circular-meter-track", className: r, ...a, children: /* @__PURE__ */ o(W.Provider, { value: !0, children: /* @__PURE__ */ V("svg", { ref: x, width: e, height: e, viewBox: `0 0 ${e} ${e}`, children: [
-    /* @__PURE__ */ V("g", { style: { transform: "rotate(-90deg)", transformOrigin: "center" }, children: [
-      /* @__PURE__ */ o(
-        "circle",
-        {
-          cx: e / 2,
-          cy: e / 2,
-          r: d,
-          fill: "none",
-          stroke: "currentColor",
-          strokeWidth: u,
-          className: B({ intent: l })
-        }
-      ),
-      /* @__PURE__ */ o(
-        "circle",
-        {
-          "data-spark-component": "circular-meter-indicator",
-          cx: e / 2,
-          cy: e / 2,
-          r: d,
-          fill: "none",
-          stroke: "currentColor",
-          strokeWidth: u,
-          strokeLinecap: "round",
-          className: k(
-            p,
-            "ease-standard transition-[stroke-dashoffset] duration-700",
-            "motion-reduce:transition-none"
-          ),
-          style: {
-            strokeDasharray: c,
-            // Start at circumference (0% filled) for initial animation, then use offset for subsequent changes
-            strokeDashoffset: y ? f : c
-          }
-        }
-      )
-    ] }),
-    t && /* @__PURE__ */ o("foreignObject", { x: 8, y: 8, width: e - 16, height: e - 16, children: /* @__PURE__ */ o(
-      "div",
-      {
-        className: "p-md flex h-full w-full flex-col items-center justify-center rounded-full text-center",
-        style: { width: e - 16, height: e - 16 },
-        children: t
-      }
-    ) })
-  ] }) }) });
+//#endregion
+//#region src/circular-meter/CircularMeterTrack.tsx
+var S = n(!1), C = () => i(S), w = e([], { variants: { intent: {
+	main: ["text-main/dim-4"],
+	support: ["text-support/dim-4"],
+	success: ["text-success/dim-4"],
+	alert: ["text-alert/dim-4"],
+	danger: ["text-error/dim-4"],
+	info: ["text-info/dim-4"]
+} } }), T = e([], { variants: { intent: {
+	main: ["text-main"],
+	support: ["text-support"],
+	success: ["text-success"],
+	alert: ["text-alert"],
+	danger: ["text-error"],
+	info: ["text-info"]
+} } }), E = ({ className: e, children: n, ...r }) => {
+	let { value: i, max: a, min: o, intent: s, size: f, radius: m, circumference: h, strokeWidth: g } = _(), v = h - (i - o) / (a - o) * 100 / 100 * h, y = T({ intent: s }), b = c(null), [C, E] = l(!1);
+	return x(b, () => {
+		E(!0);
+	}), /* @__PURE__ */ u(p.Track, {
+		"data-spark-component": "circular-meter-track",
+		className: e,
+		...r,
+		children: /* @__PURE__ */ u(S.Provider, {
+			value: !0,
+			children: /* @__PURE__ */ d("svg", {
+				ref: b,
+				width: f,
+				height: f,
+				viewBox: `0 0 ${f} ${f}`,
+				children: [/* @__PURE__ */ d("g", {
+					style: {
+						transform: "rotate(-90deg)",
+						transformOrigin: "center"
+					},
+					children: [/* @__PURE__ */ u("circle", {
+						cx: f / 2,
+						cy: f / 2,
+						r: m,
+						fill: "none",
+						stroke: "currentColor",
+						strokeWidth: g,
+						className: w({ intent: s })
+					}), /* @__PURE__ */ u("circle", {
+						"data-spark-component": "circular-meter-indicator",
+						cx: f / 2,
+						cy: f / 2,
+						r: m,
+						fill: "none",
+						stroke: "currentColor",
+						strokeWidth: g,
+						strokeLinecap: "round",
+						className: t(y, "ease-standard transition-[stroke-dashoffset] duration-700", "motion-reduce:transition-none"),
+						style: {
+							strokeDasharray: h,
+							strokeDashoffset: C ? v : h
+						}
+					})]
+				}), n && /* @__PURE__ */ u("foreignObject", {
+					x: 8,
+					y: 8,
+					width: f - 16,
+					height: f - 16,
+					children: /* @__PURE__ */ u("div", {
+						className: "p-md flex h-full w-full flex-col items-center justify-center rounded-full text-center",
+						style: {
+							width: f - 16,
+							height: f - 16
+						},
+						children: n
+					})
+				})]
+			})
+		})
+	});
 };
-z.displayName = "CircularMeter.Track";
-const H = b([], {
-  variants: {
-    size: {
-      sm: "",
-      md: "",
-      lg: "",
-      xl: ""
-    },
-    inside: {
-      true: ["default:text-on-surface/dim-1"],
-      false: ["default:text-on-surface"]
-    }
-  },
-  compoundVariants: [
-    // Inside the track
-    { size: "sm", inside: !0, class: "default:text-small" },
-    { size: "md", inside: !0, class: "default:text-small " },
-    { size: "lg", inside: !0, class: "default:text-caption" },
-    { size: "xl", inside: !0, class: "default:text-body-2" },
-    // Outside the track
-    { size: "sm", inside: !1, class: "default:text-body-1" },
-    { size: "md", inside: !1, class: "default:text-body-1" },
-    { size: "lg", inside: !1, class: "default:text-body-1" },
-    { size: "xl", inside: !1, class: "default:text-body-1" }
-  ],
-  defaultVariants: {
-    size: "lg",
-    inside: !0
-  }
-}), N = ({
-  id: r,
-  children: t,
-  className: a,
-  ref: s,
-  ...n
-}) => {
-  const i = `${_}-label-${O()}`, l = r || i, { onLabelId: e, sizeProp: d } = h(), c = j(), u = $(
-    (f) => {
-      e(f ? l : void 0);
-    },
-    [l, e]
-  ), m = D(s, u);
-  return /* @__PURE__ */ o(
-    C.Label,
-    {
-      "data-spark-component": "circular-meter-label",
-      id: l,
-      className: H({ size: d, inside: c, className: a }),
-      ref: m,
-      ...n,
-      children: t
-    }
-  );
+E.displayName = "CircularMeter.Track";
+//#endregion
+//#region src/circular-meter/CircularMeterLabel.tsx
+var D = e([], {
+	variants: {
+		size: {
+			sm: "",
+			md: "",
+			lg: "",
+			xl: ""
+		},
+		inside: {
+			true: ["default:text-on-surface/dim-1"],
+			false: ["default:text-on-surface"]
+		}
+	},
+	compoundVariants: [
+		{
+			size: "sm",
+			inside: !0,
+			class: "default:text-small"
+		},
+		{
+			size: "md",
+			inside: !0,
+			class: "default:text-small "
+		},
+		{
+			size: "lg",
+			inside: !0,
+			class: "default:text-caption"
+		},
+		{
+			size: "xl",
+			inside: !0,
+			class: "default:text-body-2"
+		},
+		{
+			size: "sm",
+			inside: !1,
+			class: "default:text-body-1"
+		},
+		{
+			size: "md",
+			inside: !1,
+			class: "default:text-body-1"
+		},
+		{
+			size: "lg",
+			inside: !1,
+			class: "default:text-body-1"
+		},
+		{
+			size: "xl",
+			inside: !1,
+			class: "default:text-body-1"
+		}
+	],
+	defaultVariants: {
+		size: "lg",
+		inside: !0
+	}
+}), O = ({ id: e, children: t, className: n, ref: i, ...a }) => {
+	let s = `${g}-label-${o()}`, c = e || s, { onLabelId: l, sizeProp: d } = _(), m = C(), h = f(i, r((e) => {
+		l(e ? c : void 0);
+	}, [c, l]));
+	return /* @__PURE__ */ u(p.Label, {
+		"data-spark-component": "circular-meter-label",
+		id: c,
+		className: D({
+			size: d,
+			inside: m,
+			className: n
+		}),
+		ref: h,
+		...a,
+		children: t
+	});
 };
-N.displayName = "CircularMeter.Label";
-const U = b(["default:text-on-surface default:font-bold"], {
-  variants: {
-    size: {
-      sm: "",
-      md: "",
-      lg: "",
-      xl: ""
-    },
-    inside: {
-      true: [],
-      false: []
-    }
-  },
-  compoundVariants: [
-    // Inside the track
-    { size: "sm", inside: !0, class: "default:text-body-2 default:font-bold" },
-    { size: "md", inside: !0, class: "default:text-body-2 default:font-bold" },
-    { size: "lg", inside: !0, class: "default:text-body-1 default:font-bold" },
-    { size: "xl", inside: !0, class: "default:text-display-3" },
-    // Outside the track
-    { size: "sm", inside: !1, class: "default:text-body-1 default:font-bold" },
-    { size: "md", inside: !1, class: "default:text-headline-2" },
-    { size: "lg", inside: !1, class: "default:text-headline-2" },
-    { size: "xl", inside: !1, class: "default:text-display-3" }
-  ],
-  defaultVariants: {
-    size: "lg",
-    inside: !0
-  }
-}), I = ({
-  className: r,
-  children: t,
-  ...a
-}) => {
-  const { sizeProp: s } = h(), n = j();
-  return /* @__PURE__ */ o(
-    C.Value,
-    {
-      "data-spark-component": "circular-meter-value",
-      className: U({ size: s, inside: n, className: r }),
-      ...a,
-      children: t
-    }
-  );
+O.displayName = "CircularMeter.Label";
+//#endregion
+//#region src/circular-meter/CircularMeterValue.tsx
+var k = e(["default:text-on-surface default:font-bold"], {
+	variants: {
+		size: {
+			sm: "",
+			md: "",
+			lg: "",
+			xl: ""
+		},
+		inside: {
+			true: [],
+			false: []
+		}
+	},
+	compoundVariants: [
+		{
+			size: "sm",
+			inside: !0,
+			class: "default:text-body-2 default:font-bold"
+		},
+		{
+			size: "md",
+			inside: !0,
+			class: "default:text-body-2 default:font-bold"
+		},
+		{
+			size: "lg",
+			inside: !0,
+			class: "default:text-body-1 default:font-bold"
+		},
+		{
+			size: "xl",
+			inside: !0,
+			class: "default:text-display-3"
+		},
+		{
+			size: "sm",
+			inside: !1,
+			class: "default:text-body-1 default:font-bold"
+		},
+		{
+			size: "md",
+			inside: !1,
+			class: "default:text-headline-2"
+		},
+		{
+			size: "lg",
+			inside: !1,
+			class: "default:text-headline-2"
+		},
+		{
+			size: "xl",
+			inside: !1,
+			class: "default:text-display-3"
+		}
+	],
+	defaultVariants: {
+		size: "lg",
+		inside: !0
+	}
+}), A = ({ className: e, children: t, ...n }) => {
+	let { sizeProp: r } = _(), i = C();
+	return /* @__PURE__ */ u(p.Value, {
+		"data-spark-component": "circular-meter-value",
+		className: k({
+			size: r,
+			inside: i,
+			className: e
+		}),
+		...n,
+		children: t
+	});
 };
-I.displayName = "CircularMeter.Value";
-const X = Object.assign(S, {
-  Content: v,
-  Label: N,
-  Track: z,
-  Value: I
+A.displayName = "CircularMeter.Value";
+//#endregion
+//#region src/circular-meter/index.ts
+var j = Object.assign(y, {
+	Content: b,
+	Label: O,
+	Track: E,
+	Value: A
 });
-X.displayName = "CircularMeter";
-v.displayName = "CircularMeter.Content";
-N.displayName = "CircularMeter.Label";
-z.displayName = "CircularMeter.Track";
-I.displayName = "CircularMeter.Value";
-export {
-  X as CircularMeter
-};
-//# sourceMappingURL=index.mjs.map
+j.displayName = "CircularMeter", b.displayName = "CircularMeter.Content", O.displayName = "CircularMeter.Label", E.displayName = "CircularMeter.Track", A.displayName = "CircularMeter.Value";
+//#endregion
+export { j as CircularMeter };
+
+//# sourceMappingURL=index.mjs.map