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

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

@@ -7,7 +7,8 @@ export interface DonutChartProps {
     colors: string[];
     innerRadius?: number;
     outerRadius?: number;
-    isPercentage: boolean;
+    /** 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. */
@@ -26,7 +27,9 @@ export interface DonutChartProps {
      * 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, }: DonutChartProps): import("react/jsx-runtime").JSX.Element;
+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

@@ -1 +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,YAAY,EAAE,OAAO,CAAC;IACtB,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;CACrB;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,GAClB,EAAE,eAAe,2CAiHjB;AAED,eAAe,UAAU,CAAC"}
+{"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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pibit.ai/cure-design-system",
-  "version": "0.6.43",
+  "version": "0.6.44",
   "description": "CURE Design System - React component library",
   "author": "Pibit",
   "license": "MIT",