agentic-ds-kit 0.1.0 → 0.2.0

package/dist/ui/PieChart/PieChart.js

@@ -0,0 +1,254 @@
+"use client";
+import e from "../shared/ChartFrame.module.js";
+import { ChartFrame as t } from "../shared/ChartFrame.js";
+import { TAU as n, formatValue as r, pointOnCircle as i, prepareSegments as a, ringPath as o, wedgePath as s } from "../shared/chartMath.js";
+import c from "./PieChart.module.js";
+import { useId as l, useMemo as u, useState as d } from "react";
+import { jsx as f, jsxs as p } from "react/jsx-runtime";
+//#region ui/PieChart/PieChart.tsx
+function m({ segments: t, total: n }) {
+	return /* @__PURE__ */ f("div", {
+		className: e.tableScroll,
+		children: /* @__PURE__ */ p("table", {
+			className: e.table,
+			children: [/* @__PURE__ */ f("thead", { children: /* @__PURE__ */ p("tr", { children: [
+				/* @__PURE__ */ f("th", {
+					scope: "col",
+					children: "Segment"
+				}),
+				/* @__PURE__ */ f("th", {
+					scope: "col",
+					children: "Value"
+				}),
+				/* @__PURE__ */ f("th", {
+					scope: "col",
+					children: "Share"
+				})
+			] }) }), /* @__PURE__ */ p("tbody", { children: [t.map((e) => /* @__PURE__ */ p("tr", { children: [
+				/* @__PURE__ */ f("th", {
+					scope: "row",
+					children: e.label
+				}),
+				/* @__PURE__ */ f("td", { children: r(e.value) }),
+				/* @__PURE__ */ f("td", { children: `${Math.round(e.share * 100)}%` })
+			] }, e.label)), /* @__PURE__ */ p("tr", { children: [
+				/* @__PURE__ */ f("th", {
+					scope: "row",
+					children: "Total"
+				}),
+				/* @__PURE__ */ f("td", { children: r(n) }),
+				/* @__PURE__ */ f("td", { children: "100%" })
+			] })] })]
+		})
+	});
+}
+function h({ segments: t, active: n, orientation: r, onActivate: i, onClear: a }) {
+	return /* @__PURE__ */ f("ul", {
+		className: `${e.legend} ${e.legendInteractive}${r === "vertical" ? ` ${e.legendVertical}` : ""}`,
+		children: t.map((t) => {
+			let o = !!n && n !== t.label, s = `${Math.round(t.share * 100)}%`;
+			return /* @__PURE__ */ f("li", { children: /* @__PURE__ */ p("button", {
+				type: "button",
+				className: `${e.legendItem} ${e.legendButton}${o ? ` ${e.legendItemDimmed}` : ""}`,
+				onMouseEnter: () => i(t.label),
+				onMouseLeave: a,
+				onFocus: () => i(t.label),
+				onBlur: a,
+				children: [
+					/* @__PURE__ */ f("span", {
+						className: `${e.legendSwatch} ${e.legendSwatchPill}`,
+						style: { background: t.color },
+						"aria-hidden": !0
+					}),
+					/* @__PURE__ */ f("span", { children: t.label }),
+					/* @__PURE__ */ f("span", {
+						className: r === "vertical" ? e.legendPercent : e.legendMeta,
+						children: s
+					})
+				]
+			}) }, t.label);
+		})
+	});
+}
+function g({ data: g = [], title: _, description: v, variant: y = "donut", layout: b = "split", size: x = 240, maxSegments: S = 6, sort: C = !0, otherLabel: w = "Other", centerLabel: T = "Total", showCenterTotal: E = !0, showTable: D = !0, emptyLabel: O = "No data for this range", isLoading: k = !1, className: A = "" }) {
+	let [j, M] = d(null), N = `pie-glow-${l().replace(/:/g, "")}`, P = y === "donut", F = b === "split", I = u(() => a(g, {
+		maxSegments: S,
+		sort: C,
+		otherLabel: w
+	}), [
+		g,
+		S,
+		C,
+		w
+	]), L = u(() => I.reduce((e, t) => e + t.value, 0), [I]), R = !I.length || L <= 0, z = u(() => {
+		let e = x / 2, t = x / 2, r = x / 2 - 4, a = P ? r * .34 : 0, c = P ? Math.max(0, r - a) : 0, l = P ? (c + r) / 2 : r * .55;
+		if (R) return {
+			cx: e,
+			cy: t,
+			slices: []
+		};
+		let u = 0;
+		return {
+			cx: e,
+			cy: t,
+			slices: I.map((a) => {
+				let d = a.share * n, f = u, p = u + d;
+				u = p;
+				let m = (f + p) / 2, h = i(e, t, l, m);
+				return {
+					...a,
+					path: P ? o({
+						cx: e,
+						cy: t,
+						innerRadius: c,
+						outerRadius: r,
+						startAngle: f,
+						endAngle: p
+					}) : s({
+						cx: e,
+						cy: t,
+						radius: r,
+						startAngle: f,
+						endAngle: p
+					}),
+					midX: h.x,
+					midY: h.y,
+					percent: Math.round(a.share * 100)
+				};
+			})
+		};
+	}, [
+		P,
+		R,
+		I,
+		x
+	]), B = z.slices.find((e) => e.label === j) ?? null, V = r(L), H = x * .14, U = x * .07, W = R ? void 0 : /* @__PURE__ */ f(h, {
+		segments: I,
+		active: j,
+		orientation: F ? "vertical" : "horizontal",
+		onActivate: M,
+		onClear: () => M(null)
+	}), G = /* @__PURE__ */ p("div", {
+		className: c.plot,
+		style: {
+			width: x,
+			height: x
+		},
+		children: [/* @__PURE__ */ p("svg", {
+			className: c.chart,
+			width: x,
+			height: x,
+			viewBox: `0 0 ${x} ${x}`,
+			overflow: "visible",
+			children: [
+				/* @__PURE__ */ f("defs", { children: /* @__PURE__ */ f("filter", {
+					id: N,
+					x: "-40%",
+					y: "-40%",
+					width: "180%",
+					height: "180%",
+					children: /* @__PURE__ */ f("feGaussianBlur", { stdDeviation: "2.2" })
+				}) }),
+				z.slices.map((e) => {
+					let t = j === e.label, n = !!j && !t;
+					return /* @__PURE__ */ p("g", {
+						className: `${c.slice}${t ? ` ${c.sliceActive}` : ""}${n ? ` ${c.sliceDimmed}` : ""}`,
+						children: [/* @__PURE__ */ f("path", {
+							className: c.glow,
+							d: e.path,
+							fill: e.color,
+							filter: `url(#${N})`
+						}), /* @__PURE__ */ f("path", {
+							className: c.mark,
+							d: e.path,
+							fill: e.color
+						})]
+					}, e.label);
+				}),
+				P && E && !R ? /* @__PURE__ */ p("text", {
+					className: c.center,
+					textAnchor: "middle",
+					children: [/* @__PURE__ */ f("tspan", {
+						className: c.centerValue,
+						x: z.cx,
+						y: z.cy,
+						dy: "-0.15em",
+						fontSize: H,
+						children: V
+					}), /* @__PURE__ */ f("tspan", {
+						className: c.centerLabel,
+						x: z.cx,
+						dy: "1.45em",
+						fontSize: U,
+						children: T
+					})]
+				}) : null,
+				z.slices.map((e) => /* @__PURE__ */ f("path", {
+					className: c.hit,
+					d: e.path,
+					fill: "transparent",
+					tabIndex: 0,
+					role: "button",
+					"aria-label": `${e.label}: ${r(e.value)}, ${e.percent} percent`,
+					onMouseEnter: () => M(e.label),
+					onMouseLeave: () => M(null),
+					onFocus: () => M(e.label),
+					onBlur: () => M(null)
+				}, `hit-${e.label}`))
+			]
+		}), B ? /* @__PURE__ */ p("div", {
+			className: `${e.tooltip}${B.midX > x * .6 ? ` ${e.tooltipFlip}` : ""}`,
+			style: {
+				left: B.midX,
+				top: B.midY
+			},
+			role: "status",
+			"aria-live": "polite",
+			children: [/* @__PURE__ */ f("p", {
+				className: e.tooltipTitle,
+				children: B.label
+			}), /* @__PURE__ */ p("div", {
+				className: e.tooltipRow,
+				children: [
+					/* @__PURE__ */ f("span", {
+						className: e.tooltipKey,
+						style: { background: B.color },
+						"aria-hidden": !0
+					}),
+					/* @__PURE__ */ f("span", {
+						className: e.tooltipShare,
+						children: `${B.percent}% of ${V}`
+					}),
+					/* @__PURE__ */ f("span", {
+						className: e.tooltipValue,
+						children: r(B.value)
+					})
+				]
+			})]
+		}) : null]
+	});
+	return /* @__PURE__ */ f(t, {
+		title: _,
+		description: v,
+		legend: F ? void 0 : W,
+		table: D ? /* @__PURE__ */ f(m, {
+			segments: I,
+			total: L
+		}) : void 0,
+		isEmpty: R,
+		emptyLabel: O,
+		isLoading: k,
+		className: `pie-chart pie-chart--${b} ${c.root} ${A}`.trim(),
+		children: F ? /* @__PURE__ */ p("div", {
+			className: c.split,
+			children: [G, W]
+		}) : /* @__PURE__ */ f("div", {
+			className: c.stackPlot,
+			children: G
+		})
+	});
+}
+//#endregion
+export { g as PieChart };
+
+//# sourceMappingURL=PieChart.js.map

package/dist/ui/PieChart/PieChart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PieChart.js","names":[],"sources":["../../../ui/PieChart/PieChart.tsx"],"sourcesContent":["\"use client\";\n\nimport { useId, useMemo, useState } from \"react\";\nimport { ChartFrame } from \"../shared/ChartFrame\";\nimport frameStyles from \"../shared/ChartFrame.module.css\";\nimport {\n  formatValue,\n  pointOnCircle,\n  prepareSegments,\n  ringPath,\n  TAU,\n  wedgePath,\n  type PreparedSegment,\n} from \"../shared/chartMath\";\nimport type { PieChartProps } from \"./PieChart.types\";\nimport styles from \"./PieChart.module.css\";\n\nexport type { PieChartLayout, PieChartProps, PieChartVariant } from \"./PieChart.types\";\n\ntype SliceGeom = PreparedSegment & {\n  path: string;\n  midX: number;\n  midY: number;\n  percent: number;\n};\n\nfunction ChartTable({ segments, total }: { segments: PreparedSegment[]; total: number }) {\n  return (\n    <div className={frameStyles.tableScroll}>\n      <table className={frameStyles.table}>\n        <thead>\n          <tr>\n            <th scope=\"col\">Segment</th>\n            <th scope=\"col\">Value</th>\n            <th scope=\"col\">Share</th>\n          </tr>\n        </thead>\n        <tbody>\n          {segments.map((segment) => (\n            <tr key={segment.label}>\n              <th scope=\"row\">{segment.label}</th>\n              <td>{formatValue(segment.value)}</td>\n              <td>{`${Math.round(segment.share * 100)}%`}</td>\n            </tr>\n          ))}\n          <tr>\n            <th scope=\"row\">Total</th>\n            <td>{formatValue(total)}</td>\n            <td>100%</td>\n          </tr>\n        </tbody>\n      </table>\n    </div>\n  );\n}\n\nfunction Legend({\n  segments,\n  active,\n  orientation,\n  onActivate,\n  onClear,\n}: {\n  segments: PreparedSegment[];\n  active: string | null;\n  orientation: \"vertical\" | \"horizontal\";\n  onActivate: (label: string) => void;\n  onClear: () => void;\n}) {\n  return (\n    <ul\n      className={`${frameStyles.legend} ${frameStyles.legendInteractive}${orientation === \"vertical\" ? ` ${frameStyles.legendVertical}` : \"\"}`}\n    >\n      {segments.map((segment) => {\n        const dimmed = Boolean(active) && active !== segment.label;\n        const percent = `${Math.round(segment.share * 100)}%`;\n        return (\n          <li key={segment.label}>\n            <button\n              type=\"button\"\n              className={`${frameStyles.legendItem} ${frameStyles.legendButton}${dimmed ? ` ${frameStyles.legendItemDimmed}` : \"\"}`}\n              onMouseEnter={() => onActivate(segment.label)}\n              onMouseLeave={onClear}\n              onFocus={() => onActivate(segment.label)}\n              onBlur={onClear}\n            >\n              <span\n                className={`${frameStyles.legendSwatch} ${frameStyles.legendSwatchPill}`}\n                style={{ background: segment.color }}\n                aria-hidden\n              />\n              <span>{segment.label}</span>\n              <span className={orientation === \"vertical\" ? frameStyles.legendPercent : frameStyles.legendMeta}>\n                {percent}\n              </span>\n            </button>\n          </li>\n        );\n      })}\n    </ul>\n  );\n}\n\nexport function PieChart({\n  data = [],\n  title,\n  description,\n  variant = \"donut\",\n  layout = \"split\",\n  size = 240,\n  maxSegments = 6,\n  sort = true,\n  otherLabel = \"Other\",\n  centerLabel = \"Total\",\n  showCenterTotal = true,\n  showTable = true,\n  emptyLabel = \"No data for this range\",\n  isLoading = false,\n  className = \"\",\n}: PieChartProps) {\n  const [active, setActive] = useState<string | null>(null);\n  const rawId = useId();\n  const glowId = `pie-glow-${rawId.replace(/:/g, \"\")}`;\n  const isDonut = variant === \"donut\";\n  const isSplit = layout === \"split\";\n\n  const segments = useMemo(\n    () => prepareSegments(data, { maxSegments, sort, otherLabel }),\n    [data, maxSegments, sort, otherLabel],\n  );\n\n  const total = useMemo(() => segments.reduce((sum, entry) => sum + entry.value, 0), [segments]);\n  const isEmpty = !segments.length || total <= 0;\n\n  const geometry = useMemo(() => {\n    const cx = size / 2;\n    const cy = size / 2;\n    const pad = 4;\n    const outerRadius = size / 2 - pad;\n    const thickness = isDonut ? outerRadius * 0.34 : 0;\n    const innerRadius = isDonut ? Math.max(0, outerRadius - thickness) : 0;\n    const midRadius = isDonut ? (innerRadius + outerRadius) / 2 : outerRadius * 0.55;\n\n    if (isEmpty) {\n      return { cx, cy, slices: [] as SliceGeom[] };\n    }\n\n    let cursor = 0;\n    const slices: SliceGeom[] = segments.map((segment) => {\n      const sweep = segment.share * TAU;\n      const start = cursor;\n      const end = cursor + sweep;\n      cursor = end;\n      const mid = (start + end) / 2;\n      const point = pointOnCircle(cx, cy, midRadius, mid);\n      return {\n        ...segment,\n        path: isDonut\n          ? ringPath({ cx, cy, innerRadius, outerRadius, startAngle: start, endAngle: end })\n          : wedgePath({ cx, cy, radius: outerRadius, startAngle: start, endAngle: end }),\n        midX: point.x,\n        midY: point.y,\n        percent: Math.round(segment.share * 100),\n      };\n    });\n\n    return { cx, cy, slices };\n  }, [isDonut, isEmpty, segments, size]);\n\n  const activeSlice = geometry.slices.find((slice) => slice.label === active) ?? null;\n  const compactTotal = formatValue(total);\n  const valueSize = size * 0.14;\n  const labelSize = size * 0.07;\n\n  const legend = !isEmpty ? (\n    <Legend\n      segments={segments}\n      active={active}\n      orientation={isSplit ? \"vertical\" : \"horizontal\"}\n      onActivate={setActive}\n      onClear={() => setActive(null)}\n    />\n  ) : undefined;\n\n  const plot = (\n    <div className={styles.plot} style={{ width: size, height: size }}>\n      <svg\n        className={styles.chart}\n        width={size}\n        height={size}\n        viewBox={`0 0 ${size} ${size}`}\n        overflow=\"visible\"\n      >\n        <defs>\n          <filter id={glowId} x=\"-40%\" y=\"-40%\" width=\"180%\" height=\"180%\">\n            <feGaussianBlur stdDeviation=\"2.2\" />\n          </filter>\n        </defs>\n        {geometry.slices.map((slice) => {\n          const isActive = active === slice.label;\n          const isDimmed = Boolean(active) && !isActive;\n          return (\n            <g\n              key={slice.label}\n              className={`${styles.slice}${isActive ? ` ${styles.sliceActive}` : \"\"}${isDimmed ? ` ${styles.sliceDimmed}` : \"\"}`}\n            >\n              <path\n                className={styles.glow}\n                d={slice.path}\n                fill={slice.color}\n                filter={`url(#${glowId})`}\n              />\n              <path className={styles.mark} d={slice.path} fill={slice.color} />\n            </g>\n          );\n        })}\n        {isDonut && showCenterTotal && !isEmpty ? (\n          <text className={styles.center} textAnchor=\"middle\">\n            <tspan\n              className={styles.centerValue}\n              x={geometry.cx}\n              y={geometry.cy}\n              dy=\"-0.15em\"\n              fontSize={valueSize}\n            >\n              {compactTotal}\n            </tspan>\n            <tspan\n              className={styles.centerLabel}\n              x={geometry.cx}\n              dy=\"1.45em\"\n              fontSize={labelSize}\n            >\n              {centerLabel}\n            </tspan>\n          </text>\n        ) : null}\n        {geometry.slices.map((slice) => (\n          <path\n            key={`hit-${slice.label}`}\n            className={styles.hit}\n            d={slice.path}\n            fill=\"transparent\"\n            tabIndex={0}\n            role=\"button\"\n            aria-label={`${slice.label}: ${formatValue(slice.value)}, ${slice.percent} percent`}\n            onMouseEnter={() => setActive(slice.label)}\n            onMouseLeave={() => setActive(null)}\n            onFocus={() => setActive(slice.label)}\n            onBlur={() => setActive(null)}\n          />\n        ))}\n      </svg>\n      {activeSlice ? (\n        <div\n          className={`${frameStyles.tooltip}${activeSlice.midX > size * 0.6 ? ` ${frameStyles.tooltipFlip}` : \"\"}`}\n          style={{ left: activeSlice.midX, top: activeSlice.midY }}\n          role=\"status\"\n          aria-live=\"polite\"\n        >\n          <p className={frameStyles.tooltipTitle}>{activeSlice.label}</p>\n          <div className={frameStyles.tooltipRow}>\n            <span className={frameStyles.tooltipKey} style={{ background: activeSlice.color }} aria-hidden />\n            <span className={frameStyles.tooltipShare}>{`${activeSlice.percent}% of ${compactTotal}`}</span>\n            <span className={frameStyles.tooltipValue}>{formatValue(activeSlice.value)}</span>\n          </div>\n        </div>\n      ) : null}\n    </div>\n  );\n\n  return (\n    <ChartFrame\n      title={title}\n      description={description}\n      legend={!isSplit ? legend : undefined}\n      table={showTable ? <ChartTable segments={segments} total={total} /> : undefined}\n      isEmpty={isEmpty}\n      emptyLabel={emptyLabel}\n      isLoading={isLoading}\n      className={`pie-chart pie-chart--${layout} ${styles.root} ${className}`.trim()}\n    >\n      {isSplit ? (\n        <div className={styles.split}>\n          {plot}\n          {legend}\n        </div>\n      ) : (\n        <div className={styles.stackPlot}>{plot}</div>\n      )}\n    </ChartFrame>\n  );\n}\n"],"mappings":"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"}

package/{ui → dist/ui}/PieChart/PieChart.module.css

@@ -1,14 +1,14 @@
-.root {
+._root_1onyy_1 {
   container-type: inline-size;
   overflow: visible;
 }
 
-.stackPlot {
+._stackPlot_1onyy_6 {
   display: grid;
   place-items: center;
 }
 
-.split {
+._split_1onyy_11 {
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -17,18 +17,18 @@
   margin-inline: auto;
 }
 
-.plot {
+._plot_1onyy_20 {
   position: relative;
   flex: none;
   overflow: visible;
 }
 
-.chart {
+._chart_1onyy_26 {
   display: block;
   overflow: visible;
 }
 
-.slice {
+._slice_1onyy_31 {
   transform-box: view-box;
   transform-origin: center;
   transition:
@@ -37,52 +37,52 @@
     filter 0.56s cubic-bezier(0.22, 1, 0.36, 1);
 }
 
-.sliceActive {
+._sliceActive_1onyy_40 {
   transform: scale(1.015);
 }
 
-.sliceDimmed {
+._sliceDimmed_1onyy_44 {
   opacity: 0.45;
   filter: blur(1.5px);
 }
 
-.glow {
+._glow_1onyy_49 {
   pointer-events: none;
   opacity: 0;
   transition: opacity 0.56s cubic-bezier(0.22, 1, 0.36, 1);
 }
 
-.sliceActive .glow {
+._sliceActive_1onyy_40 ._glow_1onyy_49 {
   opacity: 0.38;
 }
 
-.mark {
+._mark_1onyy_59 {
   pointer-events: none;
 }
 
-.hit {
+._hit_1onyy_63 {
   fill: transparent;
   cursor: pointer;
   outline: none;
 }
 
-.hit:focus-visible {
+._hit_1onyy_63:focus-visible {
   outline: var(--border-focus-width) solid var(--focus-ring);
   outline-offset: var(--space-inset-2xs);
 }
 
-.center {
+._center_1onyy_74 {
   pointer-events: none;
 }
 
-.centerValue {
+._centerValue_1onyy_78 {
   fill: var(--text-primary);
   font-family: var(--font-sans);
   font-weight: var(--type-weight-heading);
   font-variant-numeric: tabular-nums;
 }
 
-.centerLabel {
+._centerLabel_1onyy_85 {
   fill: var(--text-muted);
   font-family: var(--font-sans);
   font-weight: var(--type-weight-caption);
@@ -90,27 +90,27 @@
 
 
 @container (max-width: 30rem) {
-  .split {
+  ._split_1onyy_11 {
     flex-direction: column;
     align-items: center;
   }
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .slice,
-  .glow {
+  ._slice_1onyy_31,
+  ._glow_1onyy_49 {
     transition: opacity var(--motion-interaction-duration) var(--motion-interaction-easing);
   }
 
-  .sliceActive {
+  ._sliceActive_1onyy_40 {
     transform: none;
   }
 
-  .sliceDimmed {
+  ._sliceDimmed_1onyy_44 {
     filter: none;
   }
 
-  .sliceActive .glow {
+  ._sliceActive_1onyy_40 ._glow_1onyy_49 {
     opacity: 0;
   }
 }

package/dist/ui/PieChart/PieChart.module.js

@@ -0,0 +1,22 @@
+import "./PieChart.module.css";
+//#region ui/PieChart/PieChart.module.css
+var e = "_root_1onyy_1", t = "_stackPlot_1onyy_6", n = "_split_1onyy_11", r = "_plot_1onyy_20", i = "_chart_1onyy_26", a = "_slice_1onyy_31", o = "_sliceActive_1onyy_40", s = "_sliceDimmed_1onyy_44", c = "_glow_1onyy_49", l = "_mark_1onyy_59", u = "_hit_1onyy_63", d = "_center_1onyy_74", f = "_centerValue_1onyy_78", p = "_centerLabel_1onyy_85", m = {
+	root: e,
+	stackPlot: t,
+	split: n,
+	plot: r,
+	chart: i,
+	slice: a,
+	sliceActive: o,
+	sliceDimmed: s,
+	glow: c,
+	mark: l,
+	hit: u,
+	center: d,
+	centerValue: f,
+	centerLabel: p
+};
+//#endregion
+export { d as center, p as centerLabel, f as centerValue, i as chart, m as default, c as glow, u as hit, l as mark, r as plot, e as root, a as slice, o as sliceActive, s as sliceDimmed, n as split, t as stackPlot };
+
+//# sourceMappingURL=PieChart.module.js.map

package/dist/ui/PieChart/PieChart.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PieChart.module.js","names":[],"sources":["../../../ui/PieChart/PieChart.module.css"],"sourcesContent":[".root {\n  container-type: inline-size;\n  overflow: visible;\n}\n\n.stackPlot {\n  display: grid;\n  place-items: center;\n}\n\n.split {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: var(--space-6);\n  width: fit-content;\n  margin-inline: auto;\n}\n\n.plot {\n  position: relative;\n  flex: none;\n  overflow: visible;\n}\n\n.chart {\n  display: block;\n  overflow: visible;\n}\n\n.slice {\n  transform-box: view-box;\n  transform-origin: center;\n  transition:\n    transform 0.56s cubic-bezier(0.22, 1, 0.36, 1),\n    opacity 0.56s cubic-bezier(0.22, 1, 0.36, 1),\n    filter 0.56s cubic-bezier(0.22, 1, 0.36, 1);\n}\n\n.sliceActive {\n  transform: scale(1.015);\n}\n\n.sliceDimmed {\n  opacity: 0.45;\n  filter: blur(1.5px);\n}\n\n.glow {\n  pointer-events: none;\n  opacity: 0;\n  transition: opacity 0.56s cubic-bezier(0.22, 1, 0.36, 1);\n}\n\n.sliceActive .glow {\n  opacity: 0.38;\n}\n\n.mark {\n  pointer-events: none;\n}\n\n.hit {\n  fill: transparent;\n  cursor: pointer;\n  outline: none;\n}\n\n.hit:focus-visible {\n  outline: var(--border-focus-width) solid var(--focus-ring);\n  outline-offset: var(--space-inset-2xs);\n}\n\n.center {\n  pointer-events: none;\n}\n\n.centerValue {\n  fill: var(--text-primary);\n  font-family: var(--font-sans);\n  font-weight: var(--type-weight-heading);\n  font-variant-numeric: tabular-nums;\n}\n\n.centerLabel {\n  fill: var(--text-muted);\n  font-family: var(--font-sans);\n  font-weight: var(--type-weight-caption);\n}\n\n\n@container (max-width: 30rem) {\n  .split {\n    flex-direction: column;\n    align-items: center;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .slice,\n  .glow {\n    transition: opacity var(--motion-interaction-duration) var(--motion-interaction-easing);\n  }\n\n  .sliceActive {\n    transform: none;\n  }\n\n  .sliceDimmed {\n    filter: none;\n  }\n\n  .sliceActive .glow {\n    opacity: 0;\n  }\n}\n"],"mappings":""}

package/dist/ui/PieChart/PieChart.types.d.ts

@@ -0,0 +1,20 @@
+import { ChartDatum } from '../shared/chartMath';
+export type PieChartVariant = "donut" | "pie";
+export type PieChartLayout = "split" | "stack";
+export interface PieChartProps {
+    data?: ChartDatum[];
+    title?: string;
+    description?: string;
+    variant?: PieChartVariant;
+    layout?: PieChartLayout;
+    size?: number;
+    maxSegments?: number;
+    sort?: boolean;
+    otherLabel?: string;
+    centerLabel?: string;
+    showCenterTotal?: boolean;
+    showTable?: boolean;
+    emptyLabel?: string;
+    isLoading?: boolean;
+    className?: string;
+}

package/{ui/PieChart/index.ts → dist/ui/PieChart/index.d.ts}

@@ -1,2 +1,2 @@
-export { PieChart } from "./PieChart";
-export type { PieChartLayout, PieChartProps, PieChartVariant } from "./PieChart.types";
+export { PieChart } from './PieChart';
+export type { PieChartLayout, PieChartProps, PieChartVariant } from './PieChart.types';

package/dist/ui/Progress/Progress.d.ts

@@ -0,0 +1,3 @@
+import { ProgressProps } from './Progress.types';
+export type { ProgressProps, ProgressShape, ProgressSize, ProgressValuePosition, ProgressTone, } from './Progress.types';
+export declare function Progress({ value, size, shape, label, showValue, valuePosition, tone, ariaLabel, }: ProgressProps): import("react").JSX.Element;

package/dist/ui/Progress/Progress.js

@@ -0,0 +1,117 @@
+import e from "./Progress.module.js";
+import { useId as t } from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region ui/Progress/Progress.tsx
+var i = {
+	sm: {
+		size: 56,
+		stroke: 5
+	},
+	md: {
+		size: 96,
+		stroke: 8
+	},
+	lg: {
+		size: 196,
+		stroke: 16
+	}
+};
+function a(e) {
+	return Number.isFinite(e) ? Math.min(100, Math.max(0, e)) : 0;
+}
+function o({ value: o = 0, size: s = "md", shape: c = "bar", label: l, showValue: u = !1, valuePosition: d = "end", tone: f = "brand", ariaLabel: p }) {
+	let m = t(), h = a(o), g = Math.round(h), _ = l ? `${m}-label` : void 0, v = c === "circle" || c === "semicircle", y = c === "semicircle", b = !v && u && d === "overlay", x = !v && u && d === "end" && !!l, S = !v && u && d === "end" && !l, C = v && u, w = !!l || x, T = p || `${g}%`, E = {
+		role: "progressbar",
+		"aria-valuemin": 0,
+		"aria-valuemax": 100,
+		"aria-valuenow": g,
+		"aria-valuetext": `${g}%`,
+		"aria-labelledby": _,
+		"aria-label": l ? void 0 : T
+	}, D = /* @__PURE__ */ r("div", {
+		className: e.track,
+		...E,
+		children: [/* @__PURE__ */ n("div", {
+			className: e.fill,
+			style: { width: `${h}%` }
+		}), b ? /* @__PURE__ */ r("span", {
+			className: e.overlayValue,
+			children: [g, "%"]
+		}) : null]
+	}), O = null;
+	if (v) {
+		let t = i[s], a = t.size, o = t.stroke, c = (a - o) / 2, l = 2 * Math.PI * c, u = y ? l / 2 : l, d = u * (1 - h / 100), f = a / 2, p = a / 2, m = y ? `0 ${a / 2} ${a} ${a / 2}` : `0 0 ${a} ${a}`, _ = y ? a / 2 : a, v = `${l / 2} ${l}`, b = y ? `translate(${f} ${p}) scale(-1 1) translate(${-f} ${-p})` : `rotate(-90 ${f} ${p})`, x = {
+			"--progress-c": `${u}`,
+			"--progress-offset": `${d}`
+		};
+		O = /* @__PURE__ */ r("div", {
+			className: e.meter,
+			style: { "--progress-size": `${a}px` },
+			...E,
+			children: [/* @__PURE__ */ n("svg", {
+				className: e.ring,
+				width: a,
+				height: _,
+				viewBox: m,
+				overflow: "hidden",
+				"aria-hidden": "true",
+				focusable: "false",
+				children: /* @__PURE__ */ r("g", {
+					transform: b,
+					children: [/* @__PURE__ */ n("circle", {
+						className: e.trackArc,
+						cx: f,
+						cy: p,
+						r: c,
+						fill: "none",
+						strokeWidth: o,
+						strokeDasharray: y ? v : void 0
+					}), /* @__PURE__ */ n("circle", {
+						className: e.valueArc,
+						cx: f,
+						cy: p,
+						r: c,
+						fill: "none",
+						strokeWidth: o,
+						strokeDasharray: y ? v : l,
+						style: x
+					})]
+				})
+			}), C ? /* @__PURE__ */ r("span", {
+				className: e.holeValue,
+				children: [g, "%"]
+			}) : null]
+		});
+	}
+	let k = [
+		e.root,
+		e[s],
+		e[f],
+		e[c],
+		b ? e.overlay : ""
+	].filter(Boolean).join(" ");
+	return /* @__PURE__ */ r("div", {
+		className: k,
+		children: [w ? /* @__PURE__ */ r("div", {
+			className: e.meta,
+			children: [l ? /* @__PURE__ */ n("span", {
+				id: _,
+				className: e.label,
+				children: l
+			}) : /* @__PURE__ */ n("span", {}), x ? /* @__PURE__ */ r("span", {
+				className: e.value,
+				children: [g, "%"]
+			}) : null]
+		}) : null, v ? O : S ? /* @__PURE__ */ r("div", {
+			className: e.row,
+			children: [D, /* @__PURE__ */ r("span", {
+				className: e.value,
+				children: [g, "%"]
+			})]
+		}) : D]
+	});
+}
+//#endregion
+export { o as Progress };
+
+//# sourceMappingURL=Progress.js.map

package/dist/ui/Progress/Progress.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Progress.js","names":[],"sources":["../../../ui/Progress/Progress.tsx"],"sourcesContent":["import type { CSSProperties } from \"react\";\nimport { useId } from \"react\";\nimport type { ProgressProps } from \"./Progress.types\";\nimport styles from \"./Progress.module.css\";\n\nexport type {\n  ProgressProps,\n  ProgressShape,\n  ProgressSize,\n  ProgressValuePosition,\n  ProgressTone,\n} from \"./Progress.types\";\n\nconst RING = {\n  sm: { size: 56, stroke: 5 },\n  md: { size: 96, stroke: 8 },\n  lg: { size: 196, stroke: 16 },\n} as const;\n\nfunction clamp(value: number): number {\n  if (!Number.isFinite(value)) return 0;\n  return Math.min(100, Math.max(0, value));\n}\n\nexport function Progress({\n  value = 0,\n  size = \"md\",\n  shape = \"bar\",\n  label,\n  showValue = false,\n  valuePosition = \"end\",\n  tone = \"brand\",\n  ariaLabel,\n}: ProgressProps) {\n  const uid = useId();\n  const percent = clamp(value);\n  const rounded = Math.round(percent);\n  const labelId = label ? `${uid}-label` : undefined;\n  const isRing = shape === \"circle\" || shape === \"semicircle\";\n  const isSemi = shape === \"semicircle\";\n  const overlay = !isRing && showValue && valuePosition === \"overlay\";\n  const metaValue = !isRing && showValue && valuePosition === \"end\" && Boolean(label);\n  const endBeside = !isRing && showValue && valuePosition === \"end\" && !label;\n  const holeValue = isRing && showValue;\n  const showMeta = Boolean(label) || metaValue;\n  const unnamed = ariaLabel || `${rounded}%`;\n\n  const a11y = {\n    role: \"progressbar\" as const,\n    \"aria-valuemin\": 0,\n    \"aria-valuemax\": 100,\n    \"aria-valuenow\": rounded,\n    \"aria-valuetext\": `${rounded}%`,\n    \"aria-labelledby\": labelId,\n    \"aria-label\": label ? undefined : unnamed,\n  };\n\n  const track = (\n    <div className={styles.track} {...a11y}>\n      <div className={styles.fill} style={{ width: `${percent}%` }} />\n      {overlay ? <span className={styles.overlayValue}>{rounded}%</span> : null}\n    </div>\n  );\n\n  let meter = null;\n  if (isRing) {\n    const ring = RING[size];\n    const ringSize = ring.size;\n    const stroke = ring.stroke;\n    const radius = (ringSize - stroke) / 2;\n    const circumference = 2 * Math.PI * radius;\n    const visible = isSemi ? circumference / 2 : circumference;\n    const dashOffset = visible * (1 - percent / 100);\n    const cx = ringSize / 2;\n    const cy = ringSize / 2;\n    const viewBox = isSemi\n      ? `0 ${ringSize / 2} ${ringSize} ${ringSize / 2}`\n      : `0 0 ${ringSize} ${ringSize}`;\n    const svgH = isSemi ? ringSize / 2 : ringSize;\n    const semiDash = `${circumference / 2} ${circumference}`;\n    const groupTransform = isSemi\n      ? `translate(${cx} ${cy}) scale(-1 1) translate(${-cx} ${-cy})`\n      : `rotate(-90 ${cx} ${cy})`;\n    const arcStyle = {\n      \"--progress-c\": `${visible}`,\n      \"--progress-offset\": `${dashOffset}`,\n    } as CSSProperties;\n\n    meter = (\n      <div\n        className={styles.meter}\n        style={{ \"--progress-size\": `${ringSize}px` } as CSSProperties}\n        {...a11y}\n      >\n        <svg\n          className={styles.ring}\n          width={ringSize}\n          height={svgH}\n          viewBox={viewBox}\n          overflow=\"hidden\"\n          aria-hidden=\"true\"\n          focusable=\"false\"\n        >\n          <g transform={groupTransform}>\n            <circle\n              className={styles.trackArc}\n              cx={cx}\n              cy={cy}\n              r={radius}\n              fill=\"none\"\n              strokeWidth={stroke}\n              strokeDasharray={isSemi ? semiDash : undefined}\n            />\n            <circle\n              className={styles.valueArc}\n              cx={cx}\n              cy={cy}\n              r={radius}\n              fill=\"none\"\n              strokeWidth={stroke}\n              strokeDasharray={isSemi ? semiDash : circumference}\n              style={arcStyle}\n            />\n          </g>\n        </svg>\n        {holeValue ? <span className={styles.holeValue}>{rounded}%</span> : null}\n      </div>\n    );\n  }\n\n  const rootClass = [\n    styles.root,\n    styles[size],\n    styles[tone],\n    styles[shape],\n    overlay ? styles.overlay : \"\",\n  ]\n    .filter(Boolean)\n    .join(\" \");\n\n  return (\n    <div className={rootClass}>\n      {showMeta ? (\n        <div className={styles.meta}>\n          {label ? (\n            <span id={labelId} className={styles.label}>\n              {label}\n            </span>\n          ) : (\n            <span />\n          )}\n          {metaValue ? <span className={styles.value}>{rounded}%</span> : null}\n        </div>\n      ) : null}\n      {isRing ? (\n        meter\n      ) : endBeside ? (\n        <div className={styles.row}>\n          {track}\n          <span className={styles.value}>{rounded}%</span>\n        </div>\n      ) : (\n        track\n      )}\n    </div>\n  );\n}\n"],"mappings":"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"}