@pibit.ai/cure-design-system 0.6.42 → 0.6.44

package/dist/primitives/donut-chart/donut-chart.d.ts

@@ -0,0 +1,35 @@
+export interface DonutChartDatum {
+    name: string;
+    value: number;
+}
+export interface DonutChartProps {
+    data: DonutChartDatum[];
+    colors: string[];
+    innerRadius?: number;
+    outerRadius?: number;
+    /** Appends % to slice values in the legend. Default true. */
+    isPercentage?: boolean;
+    /** When true, renders a color swatch + label + value to the right of the chart. */
+    showLegend?: boolean;
+    /** When true, shows the numeric total in the donut hole. */
+    showCenterLabel?: boolean;
+    /** Smaller line under the center total (e.g. “Total Public Audit Clients”). */
+    centerSubLabel?: string;
+    /** Title above the chart + legend row (top-left). */
+    title?: string;
+    /**
+     * Pixel width/height of the chart container. Defaults to 240.
+     * Use with `compact` for small inline indicators (e.g. 16px header chips).
+     */
+    size?: number;
+    /**
+     * Compact chrome: no min-height / full-bleed white wrapper, no slice gaps/rounding.
+     * Intended for tiny progress indicators.
+     */
+    compact?: boolean;
+    /** Accessible name for the chart. Defaults to the data, e.g. "Open 60%, Closed 40%". */
+    "aria-label"?: string;
+}
+export declare function DonutChart({ data, colors, innerRadius, outerRadius, isPercentage, showLegend, showCenterLabel, centerSubLabel, title, size, compact, "aria-label": ariaLabel, }: DonutChartProps): import("react/jsx-runtime").JSX.Element;
+export default DonutChart;
+//# sourceMappingURL=donut-chart.d.ts.map

package/dist/primitives/donut-chart/donut-chart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"donut-chart.d.ts","sourceRoot":"","sources":["../../../src/primitives/donut-chart/donut-chart.tsx"],"names":[],"mappings":"AAQA,MAAM,WAAW,eAAe;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,eAAe;IAC5B,IAAI,EAAE,eAAe,EAAE,CAAC;IACxB,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,6DAA6D;IAC7D,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,mFAAmF;IACnF,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,4DAA4D;IAC5D,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,+EAA+E;IAC/E,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,qDAAqD;IACrD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,wFAAwF;IACxF,YAAY,CAAC,EAAE,MAAM,CAAC;CACzB;AAqBD,wBAAgB,UAAU,CAAC,EACvB,IAAI,EACJ,MAAM,EACN,WAAgB,EAChB,WAAiB,EACjB,YAAmB,EACnB,UAAkB,EAClB,eAAuB,EACvB,cAAc,EACd,KAAK,EACL,IAAU,EACV,OAAe,EACf,YAAY,EAAE,SAAS,GAC1B,EAAE,eAAe,2CAyHjB;AAED,eAAe,UAAU,CAAC"}

package/dist/primitives/donut-chart/donut-chart.js

@@ -0,0 +1,121 @@
+import { jsxs as s, jsx as e } from "react/jsx-runtime";
+import { useMemo as p } from "react";
+import { ResponsiveContainer as $ } from "../../node_modules/recharts/es6/component/ResponsiveContainer.js";
+import { PieChart as j } from "../../node_modules/recharts/es6/chart/PieChart.js";
+import { Pie as C } from "../../node_modules/recharts/es6/polar/Pie.js";
+import { Cell as k } from "../../node_modules/recharts/es6/component/Cell.js";
+const A = (a, r) => {
+  if (a <= r.length)
+    return r.slice(0, a);
+  const o = [...r], m = a - r.length;
+  for (let i = 0; i < m; i++) {
+    const d = i * 360 / m, h = 65 + i % 3 * 10, c = 50 + i % 2 * 10;
+    o.push(`hsl(${d}, ${h}%, ${c}%)`);
+  }
+  return o;
+};
+function B({
+  data: a,
+  colors: r,
+  innerRadius: o = 72,
+  outerRadius: m = 120,
+  isPercentage: i = !0,
+  showLegend: d = !1,
+  showCenterLabel: h = !1,
+  centerSubLabel: c,
+  title: g,
+  size: u = 240,
+  compact: f = !1,
+  "aria-label": v
+}) {
+  const l = p(() => [...a], [a]), y = p(() => A(l.length, r), [l, r]), N = p(() => l.reduce((t, n) => t + (Number.isFinite(n.value) ? n.value : 0), 0), [l]), w = (t) => `${Number.isFinite(t) ? t : 0}${i ? "%" : ""}`, b = v ?? l.map((t) => `${String(t.name)} ${w(t.value)}`).join(", "), x = /* @__PURE__ */ s(
+    "div",
+    {
+      className: "pointer-events-none relative",
+      style: { width: u, height: u },
+      role: "img",
+      "aria-label": b,
+      children: [
+        /* @__PURE__ */ e($, { width: "100%", height: "100%", children: /* @__PURE__ */ e(j, { children: /* @__PURE__ */ e(
+          C,
+          {
+            data: l,
+            dataKey: "value",
+            nameKey: "name",
+            cx: "50%",
+            cy: "50%",
+            innerRadius: o,
+            outerRadius: m,
+            startAngle: 90,
+            endAngle: -270,
+            paddingAngle: f ? 0 : 2,
+            strokeWidth: 0,
+            cornerRadius: f ? 0 : 4,
+            style: { outline: "none" },
+            isAnimationActive: !1,
+            children: l.map((t, n) => /* @__PURE__ */ e(
+              k,
+              {
+                fill: y[n],
+                stroke: "none",
+                style: { outline: "none", cursor: "default" }
+              },
+              `cell-${n}`
+            ))
+          }
+        ) }) }),
+        h && /* @__PURE__ */ s(
+          "div",
+          {
+            className: "pointer-events-none absolute inset-0 flex flex-col items-center justify-center px-4 text-center",
+            "aria-hidden": !0,
+            children: [
+              /* @__PURE__ */ e("span", { className: "text-2xl font-semibold tabular-nums text-primary", children: Number.isFinite(N) ? N : 0 }),
+              c ? /* @__PURE__ */ e("span", { className: "mt-1 max-w-[7.5rem] text-sm font-normal leading-snug text-secondary text-center", children: c }) : null
+            ]
+          }
+        )
+      ]
+    }
+  );
+  return d ? /* @__PURE__ */ s("div", { className: "flex w-full min-w-0 max-w-[1100px] flex-col gap-3 bg-primary", style: { outline: "none" }, children: [
+    g ? /* @__PURE__ */ e("h4", { className: "text-sm font-normal text-primary", children: g }) : null,
+    /* @__PURE__ */ s("div", { className: "flex w-full min-w-0 flex-row flex-wrap items-center gap-[60px]", children: [
+      x,
+      l.length > 0 ? /* @__PURE__ */ e("ul", { className: "flex min-h-[2.75rem] min-w-0 flex-1 flex-row flex-wrap content-center items-stretch gap-x-[60px] gap-y-4", children: l.map((t, n) => /* @__PURE__ */ s("li", { className: "flex w-[132px] items-stretch gap-2.5", children: [
+        /* @__PURE__ */ e(
+          "div",
+          {
+            className: "w-1.5 shrink-0 rounded-sm",
+            style: {
+              backgroundColor: y[n],
+              minHeight: "2.75rem"
+            }
+          }
+        ),
+        /* @__PURE__ */ s("div", { className: "flex min-w-0 flex-col justify-center", children: [
+          /* @__PURE__ */ e("span", { className: "text-xs text-secondary", children: t.name }),
+          /* @__PURE__ */ e("span", { className: "text-xl font-semibold tabular-nums text-primary", children: w(t.value) })
+        ] })
+      ] }, `${String(t.name)}-${n}`)) }) : null
+    ] })
+  ] }) : f ? /* @__PURE__ */ e(
+    "div",
+    {
+      className: "flex items-center justify-center",
+      style: { outline: "none", width: u, height: u },
+      children: x
+    }
+  ) : /* @__PURE__ */ e(
+    "div",
+    {
+      className: "flex h-full min-h-[150px] w-full items-center justify-center bg-primary",
+      style: { outline: "none" },
+      children: x
+    }
+  );
+}
+export {
+  B as DonutChart,
+  B as default
+};

package/dist/primitives/donut-chart/index.d.ts

@@ -0,0 +1,2 @@
+export { DonutChart, type DonutChartProps, type DonutChartDatum } from './donut-chart';
+//# sourceMappingURL=index.d.ts.map

package/dist/primitives/donut-chart/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/primitives/donut-chart/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,KAAK,eAAe,EAAE,MAAM,eAAe,CAAC"}