@forgedevstack/bear 1.3.2 → 1.3.4

package/dist/components/Chart/BarChart.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),s=require("../../constants/numbers.const.cjs"),l=require("../../utils/cn.cjs");require("react");const c=require("./Chart.const.cjs"),m=require("./Chart.utils.cjs"),B=w=>{const{data:o,height:R=c.CHART.DEFAULT_HEIGHT,showLabels:x=!0,showValues:C=!1,animated:$=!0,color:j,orientation:v="vertical",barRadius:t=c.CHART.DEFAULT_BAR_RADIUS,barGap:y=c.CHART.DEFAULT_BAR_GAP,stacked:b=!1,className:A,...E}=w,u=o.map(a=>m.getStackTotal(a.stacks,a.value)),N=Math.max(...u,s.ONE),e=v==="vertical";return r.jsx("div",{className:l.cn("Bear-Chart Bear-Chart--bar bear-w-full",A),style:{height:R},...E,children:r.jsx("div",{className:l.cn("bear-h-full",e?"bear-flex bear-items-end bear-justify-between":"bear-flex bear-flex-col bear-justify-between"),style:{gap:`${y}rem`},children:o.map((a,h)=>{const d=b&&a.stacks&&a.stacks.length>s.ZERO?a.stacks:[a.value],n=u[h],f=n/N*c.CHART.VIEWBOX;return r.jsxs("div",{className:l.cn(e?"bear-flex-1 bear-flex bear-flex-col bear-items-center bear-gap-1":"bear-flex-1 bear-flex bear-items-center bear-gap-2"),children:[x&&!e&&r.jsx("span",{className:"bear-w-16 bear-truncate bear-text-xs bear-text-gray-600 dark:bear-text-slate-300",children:a.label}),r.jsx("div",{className:l.cn(e?"bear-w-full bear-flex-1 bear-flex bear-items-end":"bear-flex-1 bear-h-full bear-flex bear-items-center"),children:r.jsx("div",{className:l.cn("bear-flex",e?"bear-w-full bear-flex-col-reverse":"bear-h-3/4 bear-flex-row",$&&(e?"animate-grow-up":"animate-grow-right")),style:e?{height:`${f}%`}:{width:`${f}%`},children:d.map((T,i)=>{const k=n>s.ZERO?T/n*c.CHART.VIEWBOX:s.ZERO,O=i===s.ZERO,p=i===d.length-s.ONE,g=b?e?p?`${t}px ${t}px 0 0`:"0":p?`0 ${t}px ${t}px 0`:"0":e?`${t}px ${t}px 0 0`:`0 ${t}px ${t}px 0`;return r.jsx("div",{className:"bear-transition-all bear-duration-500 bear-ease-out",style:{[e?"height":"width"]:`${k}%`,[e?"width":"height"]:"100%",backgroundColor:m.getChartColor(b?i:h,a.color||j),borderRadius:g,opacity:.9}},`${a.label}-${i}`)})})}),C&&r.jsx("span",{className:"bear-text-xs bear-text-gray-500 dark:bear-text-slate-400",children:n}),x&&e&&r.jsx("span",{className:"bear-max-w-full bear-truncate bear-text-xs bear-text-gray-600 dark:bear-text-slate-300",children:a.label})]},a.label)})})})};exports.BarChart=B;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("../../constants/numbers.const.cjs"),p=require("../../utils/cn.cjs");require("react");const V=require("../../utils/generateBearId.utils.cjs"),w=require("../../utils/useBearId.cjs"),c=require("./Chart.const.cjs"),x=require("./Chart.utils.cjs"),z=g=>{const{data:i,height:m=c.CHART.DEFAULT_HEIGHT,showLabels:h=!0,showValues:v=!1,animated:R=!0,color:$,orientation:b="vertical",barRadius:r=c.CHART.DEFAULT_BAR_RADIUS,barGap:A=c.CHART.DEFAULT_BAR_GAP,stacked:l=!1,className:E,id:N,testId:j,...T}=g,O=w.useBearId("BarChart"),k=V.resolveBearId(N,O),d=i.map(a=>x.getStackTotal(a.stacks,a.value)),q=Math.max(...d,s.ONE),t=b==="vertical",y={"--Bear-Chart-height":`${m}px`,"--Bear-Chart-gap":`${A}rem`};return e.jsx("div",{id:k,"data-testid":j,className:p.cn("Bear-Chart Bear-Chart--bar",t?"Bear-Chart--vertical":"Bear-Chart--horizontal",E),style:y,...T,children:e.jsx("div",{className:"Bear-Chart__track",children:i.map((a,u)=>{const C=l&&a.stacks&&a.stacks.length>s.ZERO?a.stacks:[a.value],o=d[u],I={"--Bear-Chart-size":`${o/q*c.CHART.VIEWBOX}%`};return e.jsxs("div",{className:"Bear-Chart__col",children:[h&&!t&&e.jsx("span",{className:"Bear-Chart__label",children:a.label}),e.jsx("div",{className:"Bear-Chart__plot",children:e.jsx("div",{className:p.cn("Bear-Chart__stack",R&&(t?"animate-grow-up":"animate-grow-right")),style:I,children:C.map((H,n)=>{const S=o>s.ZERO?H/o*c.CHART.VIEWBOX:s.ZERO,L=n===s.ZERO,B=n===C.length-s.ONE,_=l?t?B?`${r}px ${r}px 0 0`:"0":B?`0 ${r}px ${r}px 0`:"0":t?`${r}px ${r}px 0 0`:`0 ${r}px ${r}px 0`,P={"--Bear-Chart-segment":`${S}%`,"--Bear-Chart-color":x.getChartColor(l?n:u,a.color||$),"--Bear-Chart-radius":_};return e.jsx("div",{className:"Bear-Chart__segment",style:P},`${a.label}-${n}`)})})}),v&&e.jsx("span",{className:"Bear-Chart__value",children:o}),h&&t&&e.jsx("span",{className:"Bear-Chart__label",children:a.label})]},a.label)})})})};exports.BarChart=z;

package/dist/components/Chart/BarChart.js

@@ -1,85 +1,78 @@
-import { jsx as t, jsxs as V } from "react/jsx-runtime";
-import { ONE as g, ZERO as i } from "../../constants/numbers.const.js";
-import { cn as l } from "../../utils/cn.js";
+import { jsx as t, jsxs as F } from "react/jsx-runtime";
+import { ONE as _, ZERO as h } from "../../constants/numbers.const.js";
+import { cn as u } from "../../utils/cn.js";
 import "react";
+import { resolveBearId as O } from "../../utils/generateBearId.utils.js";
+import { useBearId as P } from "../../utils/useBearId.js";
 import { CHART as s } from "./Chart.const.js";
-import { getStackTotal as _, getChartColor as j } from "./Chart.utils.js";
-const P = (w) => {
+import { getStackTotal as U, getChartColor as G } from "./Chart.utils.js";
+const Q = ($) => {
   const {
     data: n,
-    height: $ = s.DEFAULT_HEIGHT,
-    showLabels: x = !0,
+    height: g = s.DEFAULT_HEIGHT,
+    showLabels: i = !0,
     showValues: v = !1,
     animated: N = !0,
-    color: k,
-    orientation: y = "vertical",
+    color: b,
+    orientation: x = "vertical",
     barRadius: r = s.DEFAULT_BAR_RADIUS,
-    barGap: A = s.DEFAULT_BAR_GAP,
-    stacked: b = !1,
-    className: E,
-    ...B
-  } = w, h = n.map((a) => _(a.stacks, a.value)), C = Math.max(...h, g), e = y === "vertical";
-  return /* @__PURE__ */ t("div", { className: l("Bear-Chart Bear-Chart--bar bear-w-full", E), style: { height: $ }, ...B, children: /* @__PURE__ */ t(
+    barGap: f = s.DEFAULT_BAR_GAP,
+    stacked: l = !1,
+    className: k,
+    id: A,
+    testId: E,
+    ...y
+  } = $, I = P("BarChart"), R = O(A, I), m = n.map((a) => U(a.stacks, a.value)), T = Math.max(...m, _), e = x === "vertical", L = {
+    "--Bear-Chart-height": `${g}px`,
+    "--Bear-Chart-gap": `${f}rem`
+  };
+  return /* @__PURE__ */ t(
     "div",
     {
-      className: l("bear-h-full", e ? "bear-flex bear-items-end bear-justify-between" : "bear-flex bear-flex-col bear-justify-between"),
-      style: { gap: `${A}rem` },
-      children: n.map((a, f) => {
-        const d = b && a.stacks && a.stacks.length > i ? a.stacks : [a.value], c = h[f], p = c / C * s.VIEWBOX;
-        return /* @__PURE__ */ V(
-          "div",
-          {
-            className: l(
-              e ? "bear-flex-1 bear-flex bear-flex-col bear-items-center bear-gap-1" : "bear-flex-1 bear-flex bear-items-center bear-gap-2"
-            ),
-            children: [
-              x && !e && /* @__PURE__ */ t("span", { className: "bear-w-16 bear-truncate bear-text-xs bear-text-gray-600 dark:bear-text-slate-300", children: a.label }),
-              /* @__PURE__ */ t(
-                "div",
-                {
-                  className: l(
-                    e ? "bear-w-full bear-flex-1 bear-flex bear-items-end" : "bear-flex-1 bear-h-full bear-flex bear-items-center"
-                  ),
-                  children: /* @__PURE__ */ t(
-                    "div",
-                    {
-                      className: l(
-                        "bear-flex",
-                        e ? "bear-w-full bear-flex-col-reverse" : "bear-h-3/4 bear-flex-row",
-                        N && (e ? "animate-grow-up" : "animate-grow-right")
-                      ),
-                      style: e ? { height: `${p}%` } : { width: `${p}%` },
-                      children: d.map((R, o) => {
-                        const T = c > i ? R / c * s.VIEWBOX : i, L = o === i, m = o === d.length - g, u = b ? e ? m ? `${r}px ${r}px 0 0` : "0" : m ? `0 ${r}px ${r}px 0` : "0" : e ? `${r}px ${r}px 0 0` : `0 ${r}px ${r}px 0`;
-                        return /* @__PURE__ */ t(
-                          "div",
-                          {
-                            className: "bear-transition-all bear-duration-500 bear-ease-out",
-                            style: {
-                              [e ? "height" : "width"]: `${T}%`,
-                              [e ? "width" : "height"]: "100%",
-                              backgroundColor: j(b ? o : f, a.color || k),
-                              borderRadius: u,
-                              opacity: 0.9
-                            }
-                          },
-                          `${a.label}-${o}`
-                        );
-                      })
-                    }
-                  )
-                }
-              ),
-              v && /* @__PURE__ */ t("span", { className: "bear-text-xs bear-text-gray-500 dark:bear-text-slate-400", children: c }),
-              x && e && /* @__PURE__ */ t("span", { className: "bear-max-w-full bear-truncate bear-text-xs bear-text-gray-600 dark:bear-text-slate-300", children: a.label })
-            ]
-          },
-          a.label
-        );
-      })
+      id: R,
+      "data-testid": E,
+      className: u(
+        "Bear-Chart Bear-Chart--bar",
+        e ? "Bear-Chart--vertical" : "Bear-Chart--horizontal",
+        k
+      ),
+      style: L,
+      ...y,
+      children: /* @__PURE__ */ t("div", { className: "Bear-Chart__track", children: n.map((a, p) => {
+        const d = l && a.stacks && a.stacks.length > h ? a.stacks : [a.value], o = m[p], S = {
+          "--Bear-Chart-size": `${o / T * s.VIEWBOX}%`
+        };
+        return /* @__PURE__ */ F("div", { className: "Bear-Chart__col", children: [
+          i && !e && /* @__PURE__ */ t("span", { className: "Bear-Chart__label", children: a.label }),
+          /* @__PURE__ */ t("div", { className: "Bear-Chart__plot", children: /* @__PURE__ */ t(
+            "div",
+            {
+              className: u("Bear-Chart__stack", N && (e ? "animate-grow-up" : "animate-grow-right")),
+              style: S,
+              children: d.map((V, c) => {
+                const w = o > h ? V / o * s.VIEWBOX : h, z = c === h, B = c === d.length - _, C = l ? e ? B ? `${r}px ${r}px 0 0` : "0" : B ? `0 ${r}px ${r}px 0` : "0" : e ? `${r}px ${r}px 0 0` : `0 ${r}px ${r}px 0`, D = {
+                  "--Bear-Chart-segment": `${w}%`,
+                  "--Bear-Chart-color": G(l ? c : p, a.color || b),
+                  "--Bear-Chart-radius": C
+                };
+                return /* @__PURE__ */ t(
+                  "div",
+                  {
+                    className: "Bear-Chart__segment",
+                    style: D
+                  },
+                  `${a.label}-${c}`
+                );
+              })
+            }
+          ) }),
+          v && /* @__PURE__ */ t("span", { className: "Bear-Chart__value", children: o }),
+          i && e && /* @__PURE__ */ t("span", { className: "Bear-Chart__label", children: a.label })
+        ] }, a.label);
+      }) })
     }
-  ) });
+  );
 };
 export {
-  P as BarChart
+  Q as BarChart
 };

package/dist/components/Chart/Chart.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("./BarChart.cjs"),C=require("./LineChart.cjs"),n=require("./PieChart.cjs"),i=require("./RadarChart.cjs"),A=require("./FunnelChart.cjs"),t=require("./Chart.const.cjs"),s={[t.CHART_TYPES.BAR]:r=>e.jsx(a.BarChart,{...r}),[t.CHART_TYPES.STACKED]:r=>e.jsx(a.BarChart,{...r,stacked:!0}),[t.CHART_TYPES.LINE]:r=>e.jsx(C.LineChart,{...r}),[t.CHART_TYPES.AREA]:r=>e.jsx(C.LineChart,{...r,fill:!0}),[t.CHART_TYPES.PIE]:r=>e.jsx(n.PieChart,{...r}),[t.CHART_TYPES.DONUT]:r=>e.jsx(n.PieChart,{...r,innerRadius:t.CHART.DEFAULT_INNER_RADIUS}),[t.CHART_TYPES.RADAR]:r=>e.jsx(i.RadarChart,{...r}),[t.CHART_TYPES.FUNNEL]:r=>e.jsx(A.FunnelChart,{...r})},E=r=>{const{type:R,...T}=r;return(s[R]??s[t.CHART_TYPES.BAR])(T)};exports.Chart=E;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime");require("react");const A=require("../../utils/generateBearId.utils.cjs"),c=require("../../utils/useBearId.cjs"),a=require("./BarChart.cjs"),s=require("./LineChart.cjs"),n=require("./PieChart.cjs"),E=require("./RadarChart.cjs"),d=require("./FunnelChart.cjs"),e=require("./Chart.const.cjs"),C={[e.CHART_TYPES.BAR]:r=>t.jsx(a.BarChart,{...r}),[e.CHART_TYPES.STACKED]:r=>t.jsx(a.BarChart,{...r,stacked:!0}),[e.CHART_TYPES.LINE]:r=>t.jsx(s.LineChart,{...r}),[e.CHART_TYPES.AREA]:r=>t.jsx(s.LineChart,{...r,fill:!0}),[e.CHART_TYPES.PIE]:r=>t.jsx(n.PieChart,{...r}),[e.CHART_TYPES.DONUT]:r=>t.jsx(n.PieChart,{...r,innerRadius:e.CHART.DEFAULT_INNER_RADIUS}),[e.CHART_TYPES.RADAR]:r=>t.jsx(E.RadarChart,{...r}),[e.CHART_TYPES.FUNNEL]:r=>t.jsx(d.FunnelChart,{...r})},h=r=>{const{type:R=e.CHART_TYPES.BAR,id:i,...T}=r,o=c.useBearId("Chart"),u=A.resolveBearId(i,o);return(C[R]??C[e.CHART_TYPES.BAR])({...T,id:u})};exports.Chart=h;

package/dist/components/Chart/Chart.js

@@ -1,23 +1,26 @@
 import { jsx as o } from "react/jsx-runtime";
-import { BarChart as R } from "./BarChart.js";
-import { LineChart as e } from "./LineChart.js";
-import { PieChart as m } from "./PieChart.js";
-import { RadarChart as A } from "./RadarChart.js";
-import { FunnelChart as E } from "./FunnelChart.js";
-import { CHART_TYPES as t, CHART as p } from "./Chart.const.js";
+import "react";
+import { resolveBearId as s } from "../../utils/generateBearId.utils.js";
+import { useBearId as C } from "../../utils/useBearId.js";
+import { BarChart as e } from "./BarChart.js";
+import { LineChart as m } from "./LineChart.js";
+import { PieChart as i } from "./PieChart.js";
+import { RadarChart as E } from "./RadarChart.js";
+import { FunnelChart as f } from "./FunnelChart.js";
+import { CHART_TYPES as t, CHART as c } from "./Chart.const.js";
 const a = {
-  [t.BAR]: (r) => /* @__PURE__ */ o(R, { ...r }),
-  [t.STACKED]: (r) => /* @__PURE__ */ o(R, { ...r, stacked: !0 }),
-  [t.LINE]: (r) => /* @__PURE__ */ o(e, { ...r }),
-  [t.AREA]: (r) => /* @__PURE__ */ o(e, { ...r, fill: !0 }),
-  [t.PIE]: (r) => /* @__PURE__ */ o(m, { ...r }),
-  [t.DONUT]: (r) => /* @__PURE__ */ o(m, { ...r, innerRadius: p.DEFAULT_INNER_RADIUS }),
-  [t.RADAR]: (r) => /* @__PURE__ */ o(A, { ...r }),
-  [t.FUNNEL]: (r) => /* @__PURE__ */ o(E, { ...r })
-}, d = (r) => {
-  const { type: i, ...n } = r;
-  return (a[i] ?? a[t.BAR])(n);
+  [t.BAR]: (r) => /* @__PURE__ */ o(e, { ...r }),
+  [t.STACKED]: (r) => /* @__PURE__ */ o(e, { ...r, stacked: !0 }),
+  [t.LINE]: (r) => /* @__PURE__ */ o(m, { ...r }),
+  [t.AREA]: (r) => /* @__PURE__ */ o(m, { ...r, fill: !0 }),
+  [t.PIE]: (r) => /* @__PURE__ */ o(i, { ...r }),
+  [t.DONUT]: (r) => /* @__PURE__ */ o(i, { ...r, innerRadius: c.DEFAULT_INNER_RADIUS }),
+  [t.RADAR]: (r) => /* @__PURE__ */ o(E, { ...r }),
+  [t.FUNNEL]: (r) => /* @__PURE__ */ o(f, { ...r })
+}, U = (r) => {
+  const { type: R = t.BAR, id: n, ...d } = r, p = C("Chart"), A = s(n, p);
+  return (a[R] ?? a[t.BAR])({ ...d, id: A });
 };
 export {
-  d as Chart
+  U as Chart
 };

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

@@ -10,7 +10,7 @@ export interface ChartDataPoint {
 }
 export interface ChartProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
     testId?: string;
-    type: ChartType;
+    type?: ChartType;
     data: ChartDataPoint[];
     height?: number;
     showLabels?: boolean;

package/dist/components/Chart/FunnelChart.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),n=require("../../constants/numbers.const.cjs"),o=require("../../utils/cn.cjs");require("react");const b=require("../Box/Box.cjs"),l=require("../Flex/Flex.cjs"),p=require("../Typography/Typography.cjs"),r=require("./Chart.const.cjs"),H=require("./Chart.utils.cjs"),_=s=>{const{data:a,height:c=r.CHART.DEFAULT_HEIGHT,showLabels:u=!0,showValues:i=!0,animated:h=!0,color:d,className:m,...C}=s,g=Math.max(...a.map(e=>e.value),n.ONE);return t.jsx(l.Flex,{direction:"column",gap:1,justify:"center",className:o.cn("Bear-Chart Bear-Chart--funnel bear-w-full",m),style:{height:c},...C,children:a.map((e,x)=>{const N=Math.max(e.value/g*r.CHART.VIEWBOX,r.CHART.FUNNEL_MIN_WIDTH),T=H.getChartColor(x,e.color||d);return t.jsxs(l.Flex,{direction:"column",align:"center",gap:1,className:"bear-w-full",children:[t.jsx(b.Box,{className:o.cn("Bear-Chart__funnel-step bear-rounded-md",h&&"animate-grow-right"),style:{width:`${N}%`,height:`${r.CHART.VIEWBOX/Math.max(a.length,n.ONE)/2}%`,minHeight:r.CHART.FUNNEL_MIN_WIDTH,backgroundColor:T}}),u&&t.jsxs(p.Typography,{variant:"caption",color:"muted",children:[e.label,i?` · ${e.value}`:""]})]},e.label)})})};exports.FunnelChart=_;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),n=require("../../constants/numbers.const.cjs"),s=require("../../utils/cn.cjs");require("react");const N=require("../../utils/generateBearId.utils.cjs"),_=require("../../utils/useBearId.cjs"),b=require("../Box/Box.cjs"),o=require("../Flex/Flex.cjs"),F=require("../Typography/Typography.cjs"),t=require("./Chart.const.cjs"),j=require("./Chart.utils.cjs"),E=l=>{const{data:a,height:c=t.CHART.DEFAULT_HEIGHT,showLabels:u=!0,showValues:i=!0,animated:h=!0,color:d,className:C,id:g,testId:m,...x}=l,B=_.useBearId("FunnelChart"),p=N.resolveBearId(g,B),I=Math.max(...a.map(e=>e.value),n.ONE),q={"--Bear-Chart-height":`${c}px`};return r.jsx(o.Flex,{id:p,"data-testid":m,direction:"column",gap:1,justify:"center",className:s.cn("Bear-Chart Bear-Chart--funnel",C),style:q,...x,children:a.map((e,y)=>{const T={"--Bear-Chart-size":`${Math.max(e.value/I*t.CHART.VIEWBOX,t.CHART.FUNNEL_MIN_WIDTH)}%`,"--Bear-Chart-step-height":`${t.CHART.VIEWBOX/Math.max(a.length,n.ONE)/2}%`,"--Bear-Chart-color":j.getChartColor(y,e.color||d)};return r.jsxs(o.Flex,{direction:"column",align:"center",gap:1,className:"bear-w-full",children:[r.jsx(b.Box,{className:s.cn("Bear-Chart__funnel-step bear-rounded-md",h&&"animate-grow-right"),style:T}),u&&r.jsxs(F.Typography,{variant:"caption",color:"muted",children:[e.label,i?` · ${e.value}`:""]})]},e.label)})})};exports.FunnelChart=E;

package/dist/components/Chart/FunnelChart.js

@@ -1,51 +1,53 @@
-import { jsx as o, jsxs as e } from "react/jsx-runtime";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
 import { ONE as l } from "../../constants/numbers.const.js";
 import { cn as n } from "../../utils/cn.js";
 import "react";
-import { Box as b } from "../Box/Box.js";
-import { Flex as m } from "../Flex/Flex.js";
-import { Typography as w } from "../Typography/Typography.js";
-import { CHART as a } from "./Chart.const.js";
-import { getChartColor as E } from "./Chart.utils.js";
-const L = (c) => {
+import { resolveBearId as E } from "../../utils/generateBearId.utils.js";
+import { useBearId as b } from "../../utils/useBearId.js";
+import { Box as v } from "../Box/Box.js";
+import { Flex as s } from "../Flex/Flex.js";
+import { Typography as F } from "../Typography/Typography.js";
+import { CHART as t } from "./Chart.const.js";
+import { getChartColor as T } from "./Chart.utils.js";
+const S = (m) => {
   const {
-    data: t,
-    height: i = a.DEFAULT_HEIGHT,
-    showLabels: s = !0,
+    data: e,
+    height: i = t.DEFAULT_HEIGHT,
+    showLabels: c = !0,
     showValues: h = !0,
-    animated: u = !0,
+    animated: d = !0,
     color: p,
-    className: d,
-    ...f
-  } = c, g = Math.max(...t.map((r) => r.value), l);
-  return /* @__PURE__ */ o(
-    m,
+    className: u,
+    id: f,
+    testId: g,
+    ...B
+  } = m, C = b("FunnelChart"), x = E(f, C), I = Math.max(...e.map((r) => r.value), l), N = { "--Bear-Chart-height": `${i}px` };
+  return /* @__PURE__ */ a(
+    s,
     {
+      id: x,
+      "data-testid": g,
       direction: "column",
       gap: 1,
       justify: "center",
-      className: n("Bear-Chart Bear-Chart--funnel bear-w-full", d),
-      style: { height: i },
-      ...f,
-      children: t.map((r, N) => {
-        const x = Math.max(r.value / g * a.VIEWBOX, a.FUNNEL_MIN_WIDTH), C = E(N, r.color || p);
-        return /* @__PURE__ */ e(m, { direction: "column", align: "center", gap: 1, className: "bear-w-full", children: [
-          /* @__PURE__ */ o(
-            b,
+      className: n("Bear-Chart Bear-Chart--funnel", u),
+      style: N,
+      ...B,
+      children: e.map((r, y) => {
+        const w = {
+          "--Bear-Chart-size": `${Math.max(r.value / I * t.VIEWBOX, t.FUNNEL_MIN_WIDTH)}%`,
+          "--Bear-Chart-step-height": `${t.VIEWBOX / Math.max(e.length, l) / 2}%`,
+          "--Bear-Chart-color": T(y, r.color || p)
+        };
+        return /* @__PURE__ */ o(s, { direction: "column", align: "center", gap: 1, className: "bear-w-full", children: [
+          /* @__PURE__ */ a(
+            v,
             {
-              className: n(
-                "Bear-Chart__funnel-step bear-rounded-md",
-                u && "animate-grow-right"
-              ),
-              style: {
-                width: `${x}%`,
-                height: `${a.VIEWBOX / Math.max(t.length, l) / 2}%`,
-                minHeight: a.FUNNEL_MIN_WIDTH,
-                backgroundColor: C
-              }
+              className: n("Bear-Chart__funnel-step bear-rounded-md", d && "animate-grow-right"),
+              style: w
             }
           ),
-          s && /* @__PURE__ */ e(w, { variant: "caption", color: "muted", children: [
+          c && /* @__PURE__ */ o(F, { variant: "caption", color: "muted", children: [
             r.label,
             h ? ` · ${r.value}` : ""
           ] })
@@ -55,5 +57,5 @@ const L = (c) => {
   );
 };
 export {
-  L as FunnelChart
+  S as FunnelChart
 };

package/dist/components/Chart/LineChart.cjs

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

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;