@forgedevstack/bear 1.3.2 → 1.3.3

package/dist/components/Chart/LineChart.js

@@ -1,69 +1,83 @@
 import { jsxs as c, jsx as e } from "react/jsx-runtime";
-import { ZERO as I, TEN as N, FIFTY as T } from "../../constants/numbers.const.js";
+import { ZERO as v, TEN as W, FIFTY as b } from "../../constants/numbers.const.js";
 import { cn as s } from "../../utils/cn.js";
 import "react";
+import { resolveBearId as x } from "../../utils/generateBearId.utils.js";
+import { useBearId as k } from "../../utils/useBearId.js";
 import { CHART as a } from "./Chart.const.js";
-import { calculateLinePoints as B, generateLinePath as W } from "./Chart.utils.js";
-const A = (f) => {
+import { calculateLinePoints as A, generateLinePath as R } from "./Chart.utils.js";
+const G = (I) => {
   const {
-    data: l,
-    height: h = a.DEFAULT_HEIGHT,
-    showLabels: b = !0,
-    showDots: u = !0,
-    smooth: y = !0,
-    fill: x = !1,
-    stepped: m = !1,
-    strokeWidth: E = a.DEFAULT_STROKE_WIDTH,
+    data: o,
+    height: B = a.DEFAULT_HEIGHT,
+    showLabels: y = !0,
+    showDots: C = !0,
+    smooth: E = !0,
+    fill: L = !1,
+    stepped: d = !1,
+    strokeWidth: u = a.DEFAULT_STROKE_WIDTH,
     color: r = "var(--bear-primary-500, #ec4899)",
-    animated: o = !0,
-    className: L,
-    ...O
-  } = f, i = B(l), p = W(i, y && !m, m), D = i.length === I ? "" : `${p} L ${a.VIEWBOX},${a.VIEWBOX} L 0,${a.VIEWBOX} Z`;
-  return /* @__PURE__ */ c("div", { className: s("Bear-Chart Bear-Chart--line bear-w-full", L), style: { height: h }, ...O, children: [
-    /* @__PURE__ */ c("svg", { viewBox: `0 0 ${a.VIEWBOX} ${a.VIEWBOX}`, preserveAspectRatio: "none", className: "bear-h-full bear-w-full", children: [
-      /* @__PURE__ */ e("defs", { children: /* @__PURE__ */ c("linearGradient", { id: "line-gradient", x1: "0%", y1: "0%", x2: "0%", y2: "100%", children: [
-        /* @__PURE__ */ e("stop", { offset: "0%", stopColor: r, stopOpacity: "0.3" }),
-        /* @__PURE__ */ e("stop", { offset: "100%", stopColor: r, stopOpacity: "0" })
-      ] }) }),
-      x && /* @__PURE__ */ e(
-        "path",
-        {
-          d: D,
-          fill: "url(#line-gradient)",
-          className: s(o && "animate-fade-in")
-        }
-      ),
-      /* @__PURE__ */ e(
-        "path",
-        {
-          d: p,
-          fill: "none",
-          stroke: r,
-          strokeWidth: E / N,
-          strokeLinecap: "round",
-          strokeLinejoin: "round",
-          className: s(o && "animate-draw-line")
-        }
-      ),
-      u && i.map((t, n) => {
-        var d;
-        return /* @__PURE__ */ e(
-          "circle",
-          {
-            cx: t.x,
-            cy: t.y,
-            r: a.DOT_RADIUS,
-            fill: r,
-            className: s(o && "animate-scale-in"),
-            style: { animationDelay: `${n * T}ms` }
-          },
-          ((d = l[n]) == null ? void 0 : d.label) ?? n
-        );
-      })
-    ] }),
-    b && /* @__PURE__ */ e("div", { className: "bear-mt-2 bear-flex bear-justify-between", children: l.map((t) => /* @__PURE__ */ e("span", { className: "bear-text-xs bear-text-gray-600 dark:bear-text-slate-300", children: t.label }, t.label)) })
-  ] });
+    animated: i = !0,
+    className: O,
+    id: _,
+    testId: $,
+    ...g
+  } = I, D = k("LineChart"), m = x(_, D), p = `${m}-gradient`, l = A(o), h = R(l, E && !d, d), N = l.length === v ? "" : `${h} L ${a.VIEWBOX},${a.VIEWBOX} L 0,${a.VIEWBOX} Z`, T = { "--Bear-Chart-height": `${B}px` };
+  return /* @__PURE__ */ c(
+    "div",
+    {
+      id: m,
+      "data-testid": $,
+      className: s("Bear-Chart Bear-Chart--line", O),
+      style: T,
+      ...g,
+      children: [
+        /* @__PURE__ */ c("svg", { viewBox: `0 0 ${a.VIEWBOX} ${a.VIEWBOX}`, preserveAspectRatio: "none", className: "Bear-Chart__svg", children: [
+          /* @__PURE__ */ e("defs", { children: /* @__PURE__ */ c("linearGradient", { id: p, x1: "0%", y1: "0%", x2: "0%", y2: "100%", children: [
+            /* @__PURE__ */ e("stop", { offset: "0%", stopColor: r, stopOpacity: "0.3" }),
+            /* @__PURE__ */ e("stop", { offset: "100%", stopColor: r, stopOpacity: "0" })
+          ] }) }),
+          L && /* @__PURE__ */ e(
+            "path",
+            {
+              d: N,
+              fill: `url(#${p})`,
+              className: s(i && "animate-fade-in")
+            }
+          ),
+          /* @__PURE__ */ e(
+            "path",
+            {
+              d: h,
+              fill: "none",
+              stroke: r,
+              strokeWidth: u / W,
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              className: s(i && "animate-draw-line")
+            }
+          ),
+          C && l.map((t, n) => {
+            var f;
+            return /* @__PURE__ */ e(
+              "circle",
+              {
+                cx: t.x,
+                cy: t.y,
+                r: a.DOT_RADIUS,
+                fill: r,
+                className: s(i && "animate-scale-in"),
+                style: { animationDelay: `${n * b}ms` }
+              },
+              ((f = o[n]) == null ? void 0 : f.label) ?? n
+            );
+          })
+        ] }),
+        y && /* @__PURE__ */ e("div", { className: "Bear-Chart__labels", children: o.map((t) => /* @__PURE__ */ e("span", { className: "Bear-Chart__label", children: t.label }, t.label)) })
+      ]
+    }
+  );
 };
 export {
-  A as LineChart
+  G as LineChart
 };

package/dist/components/Chart/PieChart.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),k=require("react"),d=require("../../constants/numbers.const.cjs"),j=require("../../utils/cn.cjs"),Y=require("../Portal/Portal.cjs"),g=require("../Card/Card.cjs"),b=require("../Flex/Flex.cjs"),w=require("../Box/Box.cjs"),N=require("../Typography/Typography.cjs"),a=require("./Chart.const.cjs"),R=require("./Chart.utils.cjs"),z=f=>{const{data:n,height:C=a.CHART.DEFAULT_HEIGHT,showLabels:P=!0,innerRadius:B=d.ZERO,startAngle:D,padAngle:x=a.CHART.DEFAULT_PAD_ANGLE,animated:F=!0,pieView:_=a.PIE_VIEW_FULL,explodeIndex:S,legendPosition:y="right",onSliceClick:u,onSliceHover:i,showSliceTooltip:m=!0,sliceTooltipTitle:A,sliceTooltipDescription:E,sliceTooltipContent:p,className:M,...q}=f,h=n.reduce((e,r)=>e+r.value,d.ZERO),[s,H]=k.useState(null),I=_===a.PIE_VIEW_HALF,O=_===a.PIE_VIEW_ROSE,L=I?a.CHART.HALF_SWEEP:a.CHART.FULL_SWEEP,U=D??(I?a.CHART.HALF_PIE_START:a.CHART.DEFAULT_START_ANGLE),V=Math.max(...n.map(e=>e.value),d.ONE),W=y===a.CHART_LEGEND_NONE||!P,X=y===a.CHART_LEGEND_BOTTOM,v=(e,r,c)=>{const o=n[c];if(i==null||i(o,c),!m)return;const l=Math.round(o.value/h*a.CHART.VIEWBOX);H({x:e,y:r,index:c,label:o.label,value:o.value,pct:l})},$=()=>{H(null),i==null||i(null,null)};let T=U;const G=n.map((e,r)=>{const c=O?L/n.length-x:e.value/h*L-x,o=T,l=T+c;T+=c+x;const Z=O?a.CHART.ROSE_MIN_RADIUS+e.value/V*(a.CHART.OUTER_RADIUS-a.CHART.ROSE_MIN_RADIUS):a.CHART.OUTER_RADIUS;return{startAngle:o,endAngle:l,color:R.getChartColor(r,e.color),outerRadius:Z,...e}});return t.jsxs(b.Flex,{direction:X?"column":"row",align:"center",gap:4,wrap:"wrap",className:j.cn("Bear-Chart Bear-Chart--pie bear-relative bear-max-w-full",M),...q,children:[t.jsx(w.Box,{style:{width:C,height:C},className:"bear-min-w-0 bear-shrink-0",children:t.jsx("svg",{viewBox:`0 0 ${a.CHART.VIEWBOX} ${a.CHART.VIEWBOX}`,className:"bear-h-full bear-w-full",children:G.map((e,r)=>{const c=(e.startAngle+e.endAngle)/2,o=S===r?R.polarOffset(c,a.CHART.EXPLODE_OFFSET):{x:d.ZERO,y:d.ZERO};return t.jsx("g",{transform:`translate(${o.x} ${o.y})`,children:t.jsx("path",{d:R.createArcPath(e.startAngle,e.endAngle,B,e.outerRadius),fill:e.color,className:j.cn(u&&"bear-cursor-pointer","bear-transition-opacity hover:bear-opacity-80",F&&"animate-scale-in"),style:{animationDelay:`${r*a.CHART.SLICE_DELAY_MS}ms`},onClick:()=>u==null?void 0:u(n[r],r),tabIndex:0,role:"button","aria-label":`${n[r].label} ${Math.round(n[r].value/h*a.CHART.VIEWBOX)}%`,onKeyDown:l=>{(l.key==="Enter"||l.key===" ")&&(l.preventDefault(),u==null||u(n[r],r))},onMouseEnter:l=>v(l.clientX,l.clientY,r),onMouseMove:l=>v(l.clientX,l.clientY,r),onMouseLeave:$})},e.label)})})}),!W&&t.jsx(b.Flex,{direction:"column",gap:2,children:n.map((e,r)=>t.jsxs(b.Flex,{align:"center",gap:2,children:[t.jsx(w.Box,{className:"bear-h-3 bear-w-3 bear-rounded-full",style:{backgroundColor:R.getChartColor(r,e.color)}}),t.jsx(N.Typography,{variant:"body2",color:"muted",children:e.label}),t.jsxs(N.Typography,{variant:"body2",color:"muted",children:[Math.round(e.value/h*a.CHART.VIEWBOX),"%"]})]},e.label))}),s&&m&&t.jsx(Y.Portal,{children:t.jsx("div",{className:"pointer-events-none fixed z-[11500] w-56 max-w-[calc(100vw-24px)]",style:{left:s.x+12,top:s.y+12},children:t.jsxs(g.Card,{variant:"elevated",padding:"none",children:[(A||E)&&t.jsx(g.CardHeader,{title:(A==null?void 0:A(n[s.index],s.index))??s.label,subtitle:E==null?void 0:E(n[s.index],s.index)}),t.jsx(g.CardBody,{className:"bear-text-xs bear-text-gray-500 dark:bear-text-slate-400",children:(p==null?void 0:p(n[s.index],s.index))??t.jsxs("span",{children:[s.value," (",s.pct,"%)"]})})]})})})]})};exports.PieChart=z;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),J=require("react"),d=require("../../constants/numbers.const.cjs"),_=require("../../utils/cn.cjs"),Q=require("../../utils/generateBearId.utils.cjs"),ee=require("../../utils/useBearId.cjs"),te=require("../Portal/Portal.cjs"),T=require("../Card/Card.cjs"),p=require("../Flex/Flex.cjs"),w=require("../Box/Box.cjs"),D=require("../Typography/Typography.cjs"),t=require("./Chart.const.cjs"),R=require("./Chart.utils.cjs"),ae=S=>{const{data:s,height:y=t.CHART.DEFAULT_HEIGHT,showLabels:f=!0,innerRadius:q=d.ZERO,startAngle:M,padAngle:x=t.CHART.DEFAULT_PAD_ANGLE,animated:U=!0,pieView:I=t.PIE_VIEW_FULL,explodeIndex:V,legendPosition:B="right",onSliceClick:i,onSliceHover:u,showSliceTooltip:m=!0,sliceTooltipTitle:A,sliceTooltipDescription:E,sliceTooltipContent:C,className:O,id:W,testId:b,...H}=S,$=ee.useBearId("PieChart"),v=Q.resolveBearId(W,$),h=s.reduce((e,a)=>e+a.value,d.ZERO),[l,j]=J.useState(null),L=I===t.PIE_VIEW_HALF,N=I===t.PIE_VIEW_ROSE,P=L?t.CHART.HALF_SWEEP:t.CHART.FULL_SWEEP,X=M??(L?t.CHART.HALF_PIE_START:t.CHART.DEFAULT_START_ANGLE),Z=Math.max(...s.map(e=>e.value),d.ONE),G=B===t.CHART_LEGEND_NONE||!f,Y=B===t.CHART_LEGEND_BOTTOM,F=(e,a,c)=>{const o=s[c];if(u==null||u(o,c),!m)return;const n=Math.round(o.value/h*t.CHART.VIEWBOX);j({x:e,y:a,index:c,label:o.label,value:o.value,pct:n})},k=()=>{j(null),u==null||u(null,null)};if(s.length===d.ZERO||h===d.ZERO)return r.jsx(p.Flex,{id:v,"data-testid":b,align:"center",justify:"center",className:_.cn("Bear-Chart Bear-Chart--pie Bear-Chart--empty",O),style:{"--Bear-Chart-height":`${y}px`},...H});let g=X;const z=s.map((e,a)=>{const c=N?P/s.length-x:e.value/h*P-x,o=g,n=g+c;g+=c+x;const K=N?t.CHART.ROSE_MIN_RADIUS+e.value/Z*(t.CHART.OUTER_RADIUS-t.CHART.ROSE_MIN_RADIUS):t.CHART.OUTER_RADIUS;return{startAngle:o,endAngle:n,color:R.getChartColor(a,e.color),outerRadius:K,...e}});return r.jsxs(p.Flex,{id:v,"data-testid":b,direction:Y?"column":"row",align:"center",gap:4,wrap:"wrap",className:_.cn("Bear-Chart Bear-Chart--pie",O),style:{"--Bear-Chart-height":`${y}px`},...H,children:[r.jsx(w.Box,{className:"Bear-Chart__pie-canvas",children:r.jsx("svg",{viewBox:`0 0 ${t.CHART.VIEWBOX} ${t.CHART.VIEWBOX}`,className:"Bear-Chart__svg",children:z.map((e,a)=>{const c=(e.startAngle+e.endAngle)/2,o=V===a?R.polarOffset(c,t.CHART.EXPLODE_OFFSET):{x:d.ZERO,y:d.ZERO};return r.jsx("g",{transform:`translate(${o.x} ${o.y})`,children:r.jsx("path",{d:R.createArcPath(e.startAngle,e.endAngle,q,e.outerRadius),fill:e.color,className:_.cn(i&&"bear-cursor-pointer","bear-transition-opacity hover:bear-opacity-80",U&&"animate-scale-in"),style:{animationDelay:`${a*t.CHART.SLICE_DELAY_MS}ms`},onClick:()=>i==null?void 0:i(s[a],a),tabIndex:0,role:"button","aria-label":`${s[a].label} ${Math.round(s[a].value/h*t.CHART.VIEWBOX)}%`,onKeyDown:n=>{(n.key==="Enter"||n.key===" ")&&(n.preventDefault(),i==null||i(s[a],a))},onMouseEnter:n=>F(n.clientX,n.clientY,a),onMouseMove:n=>F(n.clientX,n.clientY,a),onMouseLeave:k})},e.label)})})}),!G&&r.jsx(p.Flex,{direction:"column",gap:2,children:s.map((e,a)=>r.jsxs(p.Flex,{align:"center",gap:2,children:[r.jsx(w.Box,{className:"Bear-Chart__swatch",style:{"--Bear-Chart-color":R.getChartColor(a,e.color)}}),r.jsx(D.Typography,{variant:"body2",color:"muted",children:e.label}),r.jsxs(D.Typography,{variant:"body2",color:"muted",children:[Math.round(e.value/h*t.CHART.VIEWBOX),"%"]})]},e.label))}),l&&m&&r.jsx(te.Portal,{children:r.jsx("div",{className:"pointer-events-none fixed z-[11500] w-56 max-w-[calc(100vw-24px)]",style:{left:l.x+12,top:l.y+12},children:r.jsxs(T.Card,{variant:"elevated",padding:"none",children:[(A||E)&&r.jsx(T.CardHeader,{title:(A==null?void 0:A(s[l.index],l.index))??l.label,subtitle:E==null?void 0:E(s[l.index],l.index)}),r.jsx(T.CardBody,{className:"bear-text-xs bear-text-gray-500 dark:bear-text-slate-400",children:(C==null?void 0:C(s[l.index],l.index))??r.jsxs("span",{children:[l.value," (",l.pct,"%)"]})})]})})})]})};exports.PieChart=ae;

package/dist/components/Chart/PieChart.js

@@ -1,118 +1,138 @@
-import { jsxs as u, jsx as o } from "react/jsx-runtime";
-import { useState as z } from "react";
-import { ZERO as h, ONE as K } from "../../constants/numbers.const.js";
-import { cn as N } from "../../utils/cn.js";
-import { Portal as Z } from "../Portal/Portal.js";
-import { Card as q, CardHeader as J, CardBody as Q } from "../Card/Card.js";
-import { Flex as _ } from "../Flex/Flex.js";
-import { Box as T } from "../Box/Box.js";
-import { Typography as D } from "../Typography/Typography.js";
-import { CHART as r, PIE_VIEW_FULL as ee, PIE_VIEW_ROSE as ae, CHART_LEGEND_NONE as re, CHART_LEGEND_BOTTOM as te, PIE_VIEW_HALF as le } from "./Chart.const.js";
-import { getChartColor as B, createArcPath as ne, polarOffset as oe } from "./Chart.utils.js";
-const ge = (M) => {
+import { jsx as l, jsxs as h } from "react/jsx-runtime";
+import { useState as J } from "react";
+import { ZERO as p, ONE as Q } from "../../constants/numbers.const.js";
+import { cn as f } from "../../utils/cn.js";
+import { resolveBearId as ee } from "../../utils/generateBearId.utils.js";
+import { useBearId as ae } from "../../utils/useBearId.js";
+import { Portal as te } from "../Portal/Portal.js";
+import { Card as re, CardHeader as ne, CardBody as oe } from "../Card/Card.js";
+import { Flex as g } from "../Flex/Flex.js";
+import { Box as P } from "../Box/Box.js";
+import { Typography as M } from "../Typography/Typography.js";
+import { CHART as t, PIE_VIEW_FULL as le, PIE_VIEW_ROSE as se, CHART_LEGEND_NONE as ce, CHART_LEGEND_BOTTOM as ie, PIE_VIEW_HALF as de } from "./Chart.const.js";
+import { getChartColor as S, createArcPath as pe, polarOffset as me } from "./Chart.utils.js";
+const Le = (F) => {
   const {
-    data: t,
-    height: f = r.DEFAULT_HEIGHT,
-    showLabels: P = !0,
-    innerRadius: S = h,
-    startAngle: F,
-    padAngle: A = r.DEFAULT_PAD_ANGLE,
-    animated: U = !0,
-    pieView: I = ee,
-    explodeIndex: C,
-    legendPosition: y = "right",
-    onSliceClick: d,
-    onSliceHover: i,
-    showSliceTooltip: L = !0,
-    sliceTooltipTitle: m,
-    sliceTooltipDescription: p,
-    sliceTooltipContent: b,
-    className: V,
-    ...W
-  } = M, E = t.reduce((e, a) => e + a.value, h), [n, x] = z(null), R = I === le, v = I === ae, w = R ? r.HALF_SWEEP : r.FULL_SWEEP, X = F ?? (R ? r.HALF_PIE_START : r.DEFAULT_START_ANGLE), H = Math.max(...t.map((e) => e.value), K), $ = y === re || !P, G = y === te, O = (e, a, c) => {
-    const s = t[c];
-    if (i == null || i(s, c), !L)
+    data: r,
+    height: y = t.DEFAULT_HEIGHT,
+    showLabels: U = !0,
+    innerRadius: V = p,
+    startAngle: W,
+    padAngle: _ = t.DEFAULT_PAD_ANGLE,
+    animated: $ = !0,
+    pieView: B = le,
+    explodeIndex: X,
+    legendPosition: b = "right",
+    onSliceClick: i,
+    onSliceHover: d,
+    showSliceTooltip: v = !0,
+    sliceTooltipTitle: u,
+    sliceTooltipDescription: E,
+    sliceTooltipContent: A,
+    className: x,
+    id: H,
+    testId: L,
+    ...C
+  } = F, G = ae("PieChart"), R = ee(H, G), m = r.reduce((e, a) => e + a.value, p), [o, N] = J(null), O = B === de, T = B === se, w = O ? t.HALF_SWEEP : t.FULL_SWEEP, j = W ?? (O ? t.HALF_PIE_START : t.DEFAULT_START_ANGLE), Y = Math.max(...r.map((e) => e.value), Q), k = b === ce || !U, z = b === ie, D = (e, a, c) => {
+    const s = r[c];
+    if (d == null || d(s, c), !v)
       return;
-    const l = Math.round(s.value / E * r.VIEWBOX);
-    x({ x: e, y: a, index: c, label: s.label, value: s.value, pct: l });
-  }, k = () => {
-    x(null), i == null || i(null, null);
+    const n = Math.round(s.value / m * t.VIEWBOX);
+    N({ x: e, y: a, index: c, label: s.label, value: s.value, pct: n });
+  }, K = () => {
+    N(null), d == null || d(null, null);
   };
-  let g = X;
-  const Y = t.map((e, a) => {
-    const c = v ? w / t.length - A : e.value / E * w - A, s = g, l = g + c;
-    g += c + A;
-    const j = v ? r.ROSE_MIN_RADIUS + e.value / H * (r.OUTER_RADIUS - r.ROSE_MIN_RADIUS) : r.OUTER_RADIUS;
+  if (r.length === p || m === p)
+    return /* @__PURE__ */ l(
+      g,
+      {
+        id: R,
+        "data-testid": L,
+        align: "center",
+        justify: "center",
+        className: f("Bear-Chart Bear-Chart--pie Bear-Chart--empty", x),
+        style: { "--Bear-Chart-height": `${y}px` },
+        ...C
+      }
+    );
+  let I = j;
+  const Z = r.map((e, a) => {
+    const c = T ? w / r.length - _ : e.value / m * w - _, s = I, n = I + c;
+    I += c + _;
+    const q = T ? t.ROSE_MIN_RADIUS + e.value / Y * (t.OUTER_RADIUS - t.ROSE_MIN_RADIUS) : t.OUTER_RADIUS;
     return {
       startAngle: s,
-      endAngle: l,
-      color: B(a, e.color),
-      outerRadius: j,
+      endAngle: n,
+      color: S(a, e.color),
+      outerRadius: q,
       ...e
     };
   });
-  return /* @__PURE__ */ u(
-    _,
+  return /* @__PURE__ */ h(
+    g,
     {
-      direction: G ? "column" : "row",
+      id: R,
+      "data-testid": L,
+      direction: z ? "column" : "row",
       align: "center",
       gap: 4,
       wrap: "wrap",
-      className: N("Bear-Chart Bear-Chart--pie bear-relative bear-max-w-full", V),
-      ...W,
+      className: f("Bear-Chart Bear-Chart--pie", x),
+      style: { "--Bear-Chart-height": `${y}px` },
+      ...C,
       children: [
-        /* @__PURE__ */ o(T, { style: { width: f, height: f }, className: "bear-min-w-0 bear-shrink-0", children: /* @__PURE__ */ o("svg", { viewBox: `0 0 ${r.VIEWBOX} ${r.VIEWBOX}`, className: "bear-h-full bear-w-full", children: Y.map((e, a) => {
-          const c = (e.startAngle + e.endAngle) / 2, s = C === a ? oe(c, r.EXPLODE_OFFSET) : { x: h, y: h };
-          return /* @__PURE__ */ o("g", { transform: `translate(${s.x} ${s.y})`, children: /* @__PURE__ */ o(
+        /* @__PURE__ */ l(P, { className: "Bear-Chart__pie-canvas", children: /* @__PURE__ */ l("svg", { viewBox: `0 0 ${t.VIEWBOX} ${t.VIEWBOX}`, className: "Bear-Chart__svg", children: Z.map((e, a) => {
+          const c = (e.startAngle + e.endAngle) / 2, s = X === a ? me(c, t.EXPLODE_OFFSET) : { x: p, y: p };
+          return /* @__PURE__ */ l("g", { transform: `translate(${s.x} ${s.y})`, children: /* @__PURE__ */ l(
             "path",
             {
-              d: ne(e.startAngle, e.endAngle, S, e.outerRadius),
+              d: pe(e.startAngle, e.endAngle, V, e.outerRadius),
               fill: e.color,
-              className: N(
-                d && "bear-cursor-pointer",
+              className: f(
+                i && "bear-cursor-pointer",
                 "bear-transition-opacity hover:bear-opacity-80",
-                U && "animate-scale-in"
+                $ && "animate-scale-in"
               ),
-              style: { animationDelay: `${a * r.SLICE_DELAY_MS}ms` },
-              onClick: () => d == null ? void 0 : d(t[a], a),
+              style: { animationDelay: `${a * t.SLICE_DELAY_MS}ms` },
+              onClick: () => i == null ? void 0 : i(r[a], a),
               tabIndex: 0,
               role: "button",
-              "aria-label": `${t[a].label} ${Math.round(t[a].value / E * r.VIEWBOX)}%`,
-              onKeyDown: (l) => {
-                (l.key === "Enter" || l.key === " ") && (l.preventDefault(), d == null || d(t[a], a));
+              "aria-label": `${r[a].label} ${Math.round(r[a].value / m * t.VIEWBOX)}%`,
+              onKeyDown: (n) => {
+                (n.key === "Enter" || n.key === " ") && (n.preventDefault(), i == null || i(r[a], a));
               },
-              onMouseEnter: (l) => O(l.clientX, l.clientY, a),
-              onMouseMove: (l) => O(l.clientX, l.clientY, a),
-              onMouseLeave: k
+              onMouseEnter: (n) => D(n.clientX, n.clientY, a),
+              onMouseMove: (n) => D(n.clientX, n.clientY, a),
+              onMouseLeave: K
             }
           ) }, e.label);
         }) }) }),
-        !$ && /* @__PURE__ */ o(_, { direction: "column", gap: 2, children: t.map((e, a) => /* @__PURE__ */ u(_, { align: "center", gap: 2, children: [
-          /* @__PURE__ */ o(
-            T,
+        !k && /* @__PURE__ */ l(g, { direction: "column", gap: 2, children: r.map((e, a) => /* @__PURE__ */ h(g, { align: "center", gap: 2, children: [
+          /* @__PURE__ */ l(
+            P,
             {
-              className: "bear-h-3 bear-w-3 bear-rounded-full",
-              style: { backgroundColor: B(a, e.color) }
+              className: "Bear-Chart__swatch",
+              style: { "--Bear-Chart-color": S(a, e.color) }
             }
           ),
-          /* @__PURE__ */ o(D, { variant: "body2", color: "muted", children: e.label }),
-          /* @__PURE__ */ u(D, { variant: "body2", color: "muted", children: [
-            Math.round(e.value / E * r.VIEWBOX),
+          /* @__PURE__ */ l(M, { variant: "body2", color: "muted", children: e.label }),
+          /* @__PURE__ */ h(M, { variant: "body2", color: "muted", children: [
+            Math.round(e.value / m * t.VIEWBOX),
             "%"
           ] })
         ] }, e.label)) }),
-        n && L && /* @__PURE__ */ o(Z, { children: /* @__PURE__ */ o("div", { className: "pointer-events-none fixed z-[11500] w-56 max-w-[calc(100vw-24px)]", style: { left: n.x + 12, top: n.y + 12 }, children: /* @__PURE__ */ u(q, { variant: "elevated", padding: "none", children: [
-          (m || p) && /* @__PURE__ */ o(
-            J,
+        o && v && /* @__PURE__ */ l(te, { children: /* @__PURE__ */ l("div", { className: "pointer-events-none fixed z-[11500] w-56 max-w-[calc(100vw-24px)]", style: { left: o.x + 12, top: o.y + 12 }, children: /* @__PURE__ */ h(re, { variant: "elevated", padding: "none", children: [
+          (u || E) && /* @__PURE__ */ l(
+            ne,
             {
-              title: (m == null ? void 0 : m(t[n.index], n.index)) ?? n.label,
-              subtitle: p == null ? void 0 : p(t[n.index], n.index)
+              title: (u == null ? void 0 : u(r[o.index], o.index)) ?? o.label,
+              subtitle: E == null ? void 0 : E(r[o.index], o.index)
             }
           ),
-          /* @__PURE__ */ o(Q, { className: "bear-text-xs bear-text-gray-500 dark:bear-text-slate-400", children: (b == null ? void 0 : b(t[n.index], n.index)) ?? /* @__PURE__ */ u("span", { children: [
-            n.value,
+          /* @__PURE__ */ l(oe, { className: "bear-text-xs bear-text-gray-500 dark:bear-text-slate-400", children: (A == null ? void 0 : A(r[o.index], o.index)) ?? /* @__PURE__ */ h("span", { children: [
+            o.value,
             " (",
-            n.pct,
+            o.pct,
             "%)"
           ] }) })
         ] }) }) })
@@ -121,5 +141,5 @@ const ge = (M) => {
   );
 };
 export {
-  ge as PieChart
+  Le as PieChart
 };

package/dist/components/Chart/RadarChart.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),c=require("../../constants/numbers.const.cjs"),C=require("../../utils/cn.cjs");require("react");const r=require("./Chart.const.cjs"),o=require("./Chart.utils.cjs"),f=u=>{const{data:s,height:E=r.CHART.DEFAULT_HEIGHT,showLabels:d=!0,showValues:h=!1,animated:_=!0,color:A,className:m,...x}=u,i=s.length;if(i===c.ZERO)return null;const b=Math.max(...s.map(e=>e.value),c.ONE),R=r.CHART.FULL_SWEEP/i,T=s.map((e,a)=>{const t=r.CHART.DEFAULT_START_ANGLE+a*R,l=e.value/b*r.CHART.OUTER_RADIUS;return o.polarToCartesian(t,l)}),g=T.map(e=>`${e.x},${e.y}`).join(" "),H=Array.from({length:r.CHART.RADAR_RINGS},(e,a)=>{const t=(a+c.ONE)/r.CHART.RADAR_RINGS*r.CHART.OUTER_RADIUS;return Array.from({length:i},(l,y)=>{const p=r.CHART.DEFAULT_START_ANGLE+y*R;return o.polarToCartesian(p,t)})});return n.jsx("div",{className:C.cn("Bear-Chart Bear-Chart--radar bear-flex bear-flex-col bear-items-center",m),style:{height:E},...x,children:n.jsxs("svg",{viewBox:`0 0 ${r.CHART.VIEWBOX} ${r.CHART.VIEWBOX}`,className:"bear-h-full bear-w-full",children:[H.map((e,a)=>n.jsx("polygon",{points:e.map(t=>`${t.x},${t.y}`).join(" "),fill:"none",stroke:"var(--bear-border-default, #e5e5e5)",strokeWidth:.4},a)),s.map((e,a)=>{const t=r.CHART.DEFAULT_START_ANGLE+a*R,l=o.polarToCartesian(t,r.CHART.OUTER_RADIUS);return n.jsx("line",{x1:r.CHART.CENTER,y1:r.CHART.CENTER,x2:l.x,y2:l.y,stroke:"var(--bear-border-default, #e5e5e5)",strokeWidth:.4},e.label)}),n.jsx("polygon",{points:g,fill:o.getChartColor(c.ZERO,A),fillOpacity:.25,stroke:o.getChartColor(c.ZERO,A),strokeWidth:.8,className:C.cn(_&&"animate-scale-in")}),T.map((e,a)=>n.jsx("circle",{cx:e.x,cy:e.y,r:r.CHART.DOT_RADIUS,fill:o.getChartColor(a,s[a].color||A)},s[a].label)),d&&s.map((e,a)=>{const t=r.CHART.DEFAULT_START_ANGLE+a*R,l=o.polarToCartesian(t,r.CHART.OUTER_RADIUS+r.CHART.RADAR_LABEL_OFFSET);return n.jsxs("text",{x:l.x,y:l.y,textAnchor:"middle",dominantBaseline:"middle",className:"bear-fill-[var(--bear-text-secondary)]",fontSize:4,children:[e.label,h?` ${e.value}`:""]},`${e.label}-label`)})]})})};exports.RadarChart=f;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),c=require("../../constants/numbers.const.cjs"),T=require("../../utils/cn.cjs");require("react");const U=require("../../utils/generateBearId.utils.cjs"),D=require("../../utils/useBearId.cjs"),a=require("./Chart.const.cjs"),l=require("./Chart.utils.cjs"),L=m=>{const{data:n,height:g=a.CHART.DEFAULT_HEIGHT,showLabels:x=!0,showValues:y=!1,animated:p=!0,color:R,className:d,id:H,testId:C,...u}=m,S=D.useBearId("RadarChart"),h=U.resolveBearId(H,S),A=n.length,E={"--Bear-Chart-height":`${g}px`};if(A===c.ZERO)return o.jsx("div",{id:h,"data-testid":C,className:T.cn("Bear-Chart Bear-Chart--radar Bear-Chart--empty",d),style:E,...u});const I=Math.max(...n.map(e=>e.value),c.ONE),i=a.CHART.FULL_SWEEP/A,_=n.map((e,r)=>{const t=a.CHART.DEFAULT_START_ANGLE+r*i,s=e.value/I*a.CHART.OUTER_RADIUS;return l.polarToCartesian(t,s)}),b=_.map(e=>`${e.x},${e.y}`).join(" "),B=Array.from({length:a.CHART.RADAR_RINGS},(e,r)=>{const t=(r+c.ONE)/a.CHART.RADAR_RINGS*a.CHART.OUTER_RADIUS;return Array.from({length:A},(s,N)=>{const O=a.CHART.DEFAULT_START_ANGLE+N*i;return l.polarToCartesian(O,t)})});return o.jsx("div",{id:h,"data-testid":C,className:T.cn("Bear-Chart Bear-Chart--radar",d),style:E,...u,children:o.jsxs("svg",{viewBox:`0 0 ${a.CHART.VIEWBOX} ${a.CHART.VIEWBOX}`,className:"Bear-Chart__svg",children:[B.map((e,r)=>o.jsx("polygon",{points:e.map(t=>`${t.x},${t.y}`).join(" "),fill:"none",stroke:"var(--bear-border-default, #e5e5e5)",strokeWidth:.4},r)),n.map((e,r)=>{const t=a.CHART.DEFAULT_START_ANGLE+r*i,s=l.polarToCartesian(t,a.CHART.OUTER_RADIUS);return o.jsx("line",{x1:a.CHART.CENTER,y1:a.CHART.CENTER,x2:s.x,y2:s.y,stroke:"var(--bear-border-default, #e5e5e5)",strokeWidth:.4},e.label)}),o.jsx("polygon",{points:b,fill:l.getChartColor(c.ZERO,R),fillOpacity:.25,stroke:l.getChartColor(c.ZERO,R),strokeWidth:.8,className:T.cn(p&&"animate-scale-in")}),_.map((e,r)=>o.jsx("circle",{cx:e.x,cy:e.y,r:a.CHART.DOT_RADIUS,fill:l.getChartColor(r,n[r].color||R)},n[r].label)),x&&n.map((e,r)=>{const t=a.CHART.DEFAULT_START_ANGLE+r*i,s=l.polarToCartesian(t,a.CHART.OUTER_RADIUS+a.CHART.RADAR_LABEL_OFFSET);return o.jsxs("text",{x:s.x,y:s.y,textAnchor:"middle",dominantBaseline:"middle",className:"bear-fill-[var(--bear-text-secondary)]",fontSize:4,children:[e.label,y?` ${e.value}`:""]},`${e.label}-label`)})]})})};exports.RadarChart=L;

package/dist/components/Chart/RadarChart.d.ts

@@ -1,2 +1,2 @@
 import { RadarChartProps } from './Chart.types';
-export declare const RadarChart: (props: RadarChartProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const RadarChart: (props: RadarChartProps) => import("react/jsx-runtime").JSX.Element;