@forgedevstack/bear 1.3.1 → 1.3.3

package/dist/components/Chart/LineChart.js

@@ -1,73 +1,83 @@
-import { jsxs as o, jsx as s } from "react/jsx-runtime";
-import { useMemo as f } from "react";
-import { cn as u } from "../../utils/cn.js";
-const b = ({
-  data: n,
-  height: y = 200,
-  showLabels: d = !0,
-  showDots: h = !0,
-  smooth: p = !0,
-  fill: $ = !1,
-  strokeWidth: v = 2,
-  color: i = "var(--bear-primary-500, #ec4899)",
-  animated: x = !0,
-  className: g,
-  ...N
-}) => {
-  const a = f(() => {
-    const r = Math.max(...n.map((t) => t.value)), e = Math.min(...n.map((t) => t.value)), l = r - e || 1;
-    return n.map((t, c) => ({
-      x: c / (n.length - 1 || 1) * 100,
-      y: 100 - (t.value - e) / l * 80 - 10,
-      ...t
-    }));
-  }, [n]), m = f(() => a.length === 0 ? "" : p ? a.reduce((r, e, l, t) => {
-    if (l === 0) return `M ${e.x},${e.y}`;
-    const c = t[l - 1], k = c.x + (e.x - c.x) / 3, w = e.x - (e.x - c.x) / 3;
-    return `${r} C ${k},${c.y} ${w},${e.y} ${e.x},${e.y}`;
-  }, "") : a.reduce((r, e, l) => `${r} ${l === 0 ? "M" : "L"} ${e.x},${e.y}`, ""), [a, p]), L = f(() => a.length === 0 ? "" : `${m} L 100,100 L 0,100 Z`, [m, a]);
-  return /* @__PURE__ */ o("div", { className: u("w-full", g), style: { height: y }, ...N, children: [
-    /* @__PURE__ */ o("svg", { viewBox: "0 0 100 100", preserveAspectRatio: "none", className: "w-full h-full", children: [
-      /* @__PURE__ */ s("defs", { children: /* @__PURE__ */ o("linearGradient", { id: "line-gradient", x1: "0%", y1: "0%", x2: "0%", y2: "100%", children: [
-        /* @__PURE__ */ s("stop", { offset: "0%", stopColor: i, stopOpacity: "0.3" }),
-        /* @__PURE__ */ s("stop", { offset: "100%", stopColor: i, stopOpacity: "0" })
-      ] }) }),
-      $ && /* @__PURE__ */ s(
-        "path",
-        {
-          d: L,
-          fill: "url(#line-gradient)",
-          className: u(x && "animate-fade-in")
-        }
-      ),
-      /* @__PURE__ */ s(
-        "path",
-        {
-          d: m,
-          fill: "none",
-          stroke: i,
-          strokeWidth: v / 10,
-          strokeLinecap: "round",
-          strokeLinejoin: "round",
-          className: u(x && "animate-draw-line")
-        }
-      ),
-      h && a.map((r, e) => /* @__PURE__ */ s(
-        "circle",
-        {
-          cx: r.x,
-          cy: r.y,
-          r: 1.5,
-          fill: i,
-          className: u(x && "animate-scale-in"),
-          style: { animationDelay: `${e * 50}ms` }
-        },
-        e
-      ))
-    ] }),
-    d && /* @__PURE__ */ s("div", { className: "flex justify-between mt-2", children: n.map((r, e) => /* @__PURE__ */ s("span", { className: "text-xs text-gray-600 dark:text-slate-300", children: r.label }, e)) })
-  ] });
+import { jsxs as c, jsx as e } from "react/jsx-runtime";
+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 A, generateLinePath as R } from "./Chart.utils.js";
+const G = (I) => {
+  const {
+    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: 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 {
-  b 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"),b=require("react"),A=require("../../utils/cn.cjs"),X=require("../Portal/Portal.cjs"),g=require("../Card/Card.cjs"),L=require("./Chart.utils.cjs"),c=45,Y=({data:s,height:N=200,showLabels:R=!0,innerRadius:w=0,startAngle:P=-90,padAngle:f=2,animated:_=!0,onSliceClick:d,onSliceHover:x,showSliceTooltip:j=!0,sliceTooltipTitle:y,sliceTooltipDescription:m,sliceTooltipContent:v,className:B,...C})=>{const h=s.reduce((r,e)=>r+e.value,0),[n,o]=b.useState(null),q=b.useCallback((r,e,a)=>{const u=s[a];if(x==null||x(u,a),!j)return;const l=Math.round(u.value/h*100);o({x:r,y:e,index:a,label:u.label,value:u.value,pct:l})},[s,x,j,h]),E=b.useCallback(()=>{o(null),x==null||x(null,null)},[x]),O=b.useMemo(()=>{let r=P;return s.map((e,a)=>{const u=e.value/h*360-f,l={startAngle:r,endAngle:r+u,color:L.getChartColor(a,e.color),...e};return r+=u+f,l})},[s,h,P,f]),$=(r,e)=>{const a=r*Math.PI/180;return{x:50+e*Math.cos(a),y:50+e*Math.sin(a)}},U=(r,e)=>{const a=w*c,u=$(r,c),l=$(e,c),I=$(r,a),p=$(e,a),M=e-r>180?1:0;return w>0?`M ${u.x},${u.y} A ${c},${c} 0 ${M},1 ${l.x},${l.y} L ${p.x},${p.y} A ${a},${a} 0 ${M},0 ${I.x},${I.y} Z`:`M 50,50 L ${u.x},${u.y} A ${c},${c} 0 ${M},1 ${l.x},${l.y} Z`};return t.jsxs("div",{className:A.cn("relative flex max-w-full flex-wrap items-center gap-4",B),...C,children:[t.jsx("div",{style:{width:N,height:N},className:"min-w-0 shrink-0",children:t.jsx("svg",{viewBox:"0 0 100 100",className:"h-full w-full",children:O.map((r,e)=>t.jsx("path",{d:U(r.startAngle,r.endAngle),fill:r.color,className:A.cn(d&&"cursor-pointer","transition-opacity hover:opacity-80",_&&"animate-scale-in"),style:{animationDelay:`${e*100}ms`},onClick:()=>d==null?void 0:d(s[e],e),tabIndex:0,role:"button","aria-label":`${s[e].label} ${Math.round(s[e].value/h*100)}%`,onKeyDown:a=>{(a.key==="Enter"||a.key===" ")&&(a.preventDefault(),d==null||d(s[e],e))},onMouseEnter:a=>q(a.clientX,a.clientY,e),onMouseMove:a=>q(a.clientX,a.clientY,e),onMouseLeave:E},e))})}),R&&t.jsx("div",{className:"flex flex-col gap-2",children:s.map((r,e)=>t.jsxs("div",{className:"flex items-center gap-2",children:[t.jsx("div",{className:"w-3 h-3 rounded-full",style:{backgroundColor:L.getChartColor(e,r.color)}}),t.jsx("span",{className:"text-sm text-gray-600 dark:text-slate-300",children:r.label}),t.jsxs("span",{className:"text-sm text-gray-400 dark:text-slate-500",children:[Math.round(r.value/h*100),"%"]})]},e))}),n&&j&&t.jsx(X.Portal,{children:t.jsx("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:t.jsxs(g.Card,{variant:"elevated",padding:"none",children:[(y||m)&&t.jsx(g.CardHeader,{title:(y==null?void 0:y(s[n.index],n.index))??n.label,subtitle:m==null?void 0:m(s[n.index],n.index)}),t.jsx(g.CardBody,{className:"bear-text-xs bear-text-gray-500 dark:bear-text-slate-400",children:(v==null?void 0:v(s[n.index],n.index))??t.jsxs("span",{children:[n.value," (",n.pct,"%)"]})})]})})})]})};exports.PieChart=Y;
+"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.d.ts

@@ -1,3 +1,2 @@
-import { FC } from 'react';
 import { PieChartProps } from './Chart.types';
-export declare const PieChart: FC<PieChartProps>;
+export declare const PieChart: (props: PieChartProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Chart/PieChart.js

@@ -1,110 +1,145 @@
-import { jsxs as h, jsx as u } from "react/jsx-runtime";
-import { useState as K, useCallback as L, useMemo as O } from "react";
-import { cn as j } from "../../utils/cn.js";
-import { Portal as R } from "../Portal/Portal.js";
-import { Card as q, CardHeader as F, CardBody as G } from "../Card/Card.js";
-import { getChartColor as B } from "./Chart.utils.js";
-const l = 45, C = ({
-  data: t,
-  height: N = 200,
-  showLabels: E = !0,
-  innerRadius: g = 0,
-  startAngle: w = -90,
-  padAngle: b = 2,
-  animated: U = !0,
-  onSliceClick: d,
-  onSliceHover: x,
-  showSliceTooltip: v = !0,
-  sliceTooltipTitle: y,
-  sliceTooltipDescription: f,
-  sliceTooltipContent: M,
-  className: X,
-  ...Y
-}) => {
-  const $ = t.reduce((e, r) => e + r.value, 0), [n, o] = K(null), I = L(
-    (e, r, a) => {
-      const s = t[a];
-      if (x == null || x(s, a), !v) return;
-      const m = Math.round(s.value / $ * 100);
-      o({ x: e, y: r, index: a, label: s.label, value: s.value, pct: m });
-    },
-    [t, x, v, $]
-  ), Z = L(() => {
-    o(null), x == null || x(null, null);
-  }, [x]), _ = O(() => {
-    let e = w;
-    return t.map((r, a) => {
-      const s = r.value / $ * 360 - b, m = {
-        startAngle: e,
-        endAngle: e + s,
-        color: B(a, r.color),
-        ...r
-      };
-      return e += s + b, m;
-    });
-  }, [t, $, w, b]), c = (e, r) => {
-    const a = e * Math.PI / 180;
-    return { x: 50 + r * Math.cos(a), y: 50 + r * Math.sin(a) };
-  }, z = (e, r) => {
-    const a = g * l, s = c(e, l), m = c(r, l), P = c(e, a), A = c(r, a), p = r - e > 180 ? 1 : 0;
-    return g > 0 ? `M ${s.x},${s.y} A ${l},${l} 0 ${p},1 ${m.x},${m.y} L ${A.x},${A.y} A ${a},${a} 0 ${p},0 ${P.x},${P.y} Z` : `M 50,50 L ${s.x},${s.y} A ${l},${l} 0 ${p},1 ${m.x},${m.y} Z`;
+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: 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 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);
   };
-  return /* @__PURE__ */ h("div", { className: j("relative flex max-w-full flex-wrap items-center gap-4", X), ...Y, children: [
-    /* @__PURE__ */ u("div", { style: { width: N, height: N }, className: "min-w-0 shrink-0", children: /* @__PURE__ */ u("svg", { viewBox: "0 0 100 100", className: "h-full w-full", children: _.map((e, r) => /* @__PURE__ */ u(
-      "path",
+  if (r.length === p || m === p)
+    return /* @__PURE__ */ l(
+      g,
       {
-        d: z(e.startAngle, e.endAngle),
-        fill: e.color,
-        className: j(
-          d && "cursor-pointer",
-          "transition-opacity hover:opacity-80",
-          U && "animate-scale-in"
-        ),
-        style: { animationDelay: `${r * 100}ms` },
-        onClick: () => d == null ? void 0 : d(t[r], r),
-        tabIndex: 0,
-        role: "button",
-        "aria-label": `${t[r].label} ${Math.round(t[r].value / $ * 100)}%`,
-        onKeyDown: (a) => {
-          (a.key === "Enter" || a.key === " ") && (a.preventDefault(), d == null || d(t[r], r));
-        },
-        onMouseEnter: (a) => I(a.clientX, a.clientY, r),
-        onMouseMove: (a) => I(a.clientX, a.clientY, r),
-        onMouseLeave: Z
-      },
-      r
-    )) }) }),
-    E && /* @__PURE__ */ u("div", { className: "flex flex-col gap-2", children: t.map((e, r) => /* @__PURE__ */ h("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ u(
-        "div",
-        {
-          className: "w-3 h-3 rounded-full",
-          style: { backgroundColor: B(r, e.color) }
-        }
-      ),
-      /* @__PURE__ */ u("span", { className: "text-sm text-gray-600 dark:text-slate-300", children: e.label }),
-      /* @__PURE__ */ h("span", { className: "text-sm text-gray-400 dark:text-slate-500", children: [
-        Math.round(e.value / $ * 100),
-        "%"
-      ] })
-    ] }, r)) }),
-    n && v && /* @__PURE__ */ u(R, { children: /* @__PURE__ */ u("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__ */ h(q, { variant: "elevated", padding: "none", children: [
-      (y || f) && /* @__PURE__ */ u(
-        F,
-        {
-          title: (y == null ? void 0 : y(t[n.index], n.index)) ?? n.label,
-          subtitle: f == null ? void 0 : f(t[n.index], n.index)
-        }
-      ),
-      /* @__PURE__ */ u(G, { className: "bear-text-xs bear-text-gray-500 dark:bear-text-slate-400", children: (M == null ? void 0 : M(t[n.index], n.index)) ?? /* @__PURE__ */ h("span", { children: [
-        n.value,
-        " (",
-        n.pct,
-        "%)"
-      ] }) })
-    ] }) }) })
-  ] });
+        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: n,
+      color: S(a, e.color),
+      outerRadius: q,
+      ...e
+    };
+  });
+  return /* @__PURE__ */ h(
+    g,
+    {
+      id: R,
+      "data-testid": L,
+      direction: z ? "column" : "row",
+      align: "center",
+      gap: 4,
+      wrap: "wrap",
+      className: f("Bear-Chart Bear-Chart--pie", x),
+      style: { "--Bear-Chart-height": `${y}px` },
+      ...C,
+      children: [
+        /* @__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: pe(e.startAngle, e.endAngle, V, e.outerRadius),
+              fill: e.color,
+              className: f(
+                i && "bear-cursor-pointer",
+                "bear-transition-opacity hover:bear-opacity-80",
+                $ && "animate-scale-in"
+              ),
+              style: { animationDelay: `${a * t.SLICE_DELAY_MS}ms` },
+              onClick: () => i == null ? void 0 : i(r[a], a),
+              tabIndex: 0,
+              role: "button",
+              "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: (n) => D(n.clientX, n.clientY, a),
+              onMouseMove: (n) => D(n.clientX, n.clientY, a),
+              onMouseLeave: K
+            }
+          ) }, e.label);
+        }) }) }),
+        !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-Chart__swatch",
+              style: { "--Bear-Chart-color": S(a, e.color) }
+            }
+          ),
+          /* @__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)) }),
+        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: (u == null ? void 0 : u(r[o.index], o.index)) ?? o.label,
+              subtitle: E == null ? void 0 : E(r[o.index], o.index)
+            }
+          ),
+          /* @__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,
+            " (",
+            o.pct,
+            "%)"
+          ] }) })
+        ] }) }) })
+      ]
+    }
+  );
 };
 export {
-  C as PieChart
+  Le as PieChart
 };

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

@@ -0,0 +1,8 @@
+export interface SliceTooltipState {
+    x: number;
+    y: number;
+    index: number;
+    label: string;
+    value: number;
+    pct: number;
+}

package/dist/components/Chart/RadarChart.cjs

@@ -0,0 +1 @@
+"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

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

package/dist/components/Chart/RadarChart.js

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

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

@@ -2,4 +2,6 @@ export { Chart } from './Chart';
 export { BarChart } from './BarChart';
 export { LineChart } from './LineChart';
 export { PieChart } from './PieChart';
-export type { ChartProps, BarChartProps, LineChartProps, PieChartProps, ChartDataPoint, ChartType, } from './Chart.types';
+export { RadarChart } from './RadarChart';
+export { FunnelChart } from './FunnelChart';
+export type { ChartProps, BarChartProps, LineChartProps, PieChartProps, RadarChartProps, FunnelChartProps, ChartDataPoint, ChartType, PieView, ChartLegendPosition, } from './Chart.types';