@forgedevstack/bear 1.3.3 → 1.3.5

package/dist/components/Chart/FunnelChart.js

@@ -2,60 +2,61 @@ 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 { 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 { resolveBearId as b } from "../../utils/generateBearId.utils.js";
+import { useBearId as v } from "../../utils/useBearId.js";
+import { Box as F } 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) => {
+import { Typography as M } from "../Typography/Typography.js";
+import { CHART as r } from "./Chart.const.js";
+import { getChartColor as T, chartMotionClass as _ } from "./Chart.utils.js";
+const X = (m) => {
   const {
     data: e,
-    height: i = t.DEFAULT_HEIGHT,
+    height: i = r.DEFAULT_HEIGHT,
     showLabels: c = !0,
     showValues: h = !0,
     animated: d = !0,
-    color: p,
-    className: u,
-    id: f,
+    motion: p,
+    color: u,
+    className: f,
+    id: C,
     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` };
+  } = m, x = v("FunnelChart"), I = b(C, x), N = Math.max(...e.map((t) => t.value), l), y = { "--Bear-Chart-height": `${i}px` };
   return /* @__PURE__ */ a(
     s,
     {
-      id: x,
+      id: I,
       "data-testid": g,
       direction: "column",
       gap: 1,
       justify: "center",
-      className: n("Bear-Chart Bear-Chart--funnel", u),
-      style: N,
+      className: n("Bear-Chart Bear-Chart--funnel", f),
+      style: y,
       ...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)
+      children: e.map((t, w) => {
+        const E = {
+          "--Bear-Chart-size": `${Math.max(t.value / N * r.VIEWBOX, r.FUNNEL_MIN_WIDTH)}%`,
+          "--Bear-Chart-step-height": `${r.VIEWBOX / Math.max(e.length, l) / 2}%`,
+          "--Bear-Chart-color": T(w, t.color || u)
         };
         return /* @__PURE__ */ o(s, { direction: "column", align: "center", gap: 1, className: "bear-w-full", children: [
           /* @__PURE__ */ a(
-            v,
+            F,
             {
-              className: n("Bear-Chart__funnel-step bear-rounded-md", d && "animate-grow-right"),
-              style: w
+              className: n("Bear-Chart__funnel-step bear-rounded-md", _(d, p, "animate-grow-right")),
+              style: E
             }
           ),
-          c && /* @__PURE__ */ o(F, { variant: "caption", color: "muted", children: [
-            r.label,
-            h ? ` · ${r.value}` : ""
+          c && /* @__PURE__ */ o(M, { variant: "caption", color: "muted", children: [
+            t.label,
+            h ? ` · ${t.value}` : ""
           ] })
-        ] }, r.label);
+        ] }, t.label);
       })
     }
   );
 };
 export {
-  S as FunnelChart
+  X 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 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=$;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),d=require("../../constants/numbers.const.cjs"),O=require("../../utils/cn.cjs");require("react");const b=require("../../utils/generateBearId.utils.cjs"),$=require("../../utils/useBearId.cjs"),t=require("./Chart.const.cjs"),a=require("./Chart.utils.cjs"),v=I=>{const{data:n,height:T=t.CHART.DEFAULT_HEIGHT,showLabels:x=!0,showDots:B=!0,smooth:j=!0,fill:_=!1,stepped:h=!1,strokeWidth:f=t.CHART.DEFAULT_STROKE_WIDTH,color:r="var(--bear-primary-500, #ec4899)",animated:o=!0,motion:i,className:y,id:R,testId:g,...A}=I,L=$.useBearId("LineChart"),u=b.resolveBearId(R,L),C=`${u}-gradient`,l=a.calculateLinePoints(n),m=a.generateLinePath(l,j&&!h,h),E=l.length===d.ZERO?"":`${m} L ${t.CHART.VIEWBOX},${t.CHART.VIEWBOX} L 0,${t.CHART.VIEWBOX} Z`,H={"--Bear-Chart-height":`${T}px`};return e.jsxs("div",{id:u,"data-testid":g,className:O.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:C,x1:"0%",y1:"0%",x2:"0%",y2:"100%",children:[e.jsx("stop",{offset:"0%",stopColor:r,stopOpacity:"0.3"}),e.jsx("stop",{offset:"100%",stopColor:r,stopOpacity:"0"})]})}),_&&e.jsx("path",{d:E,fill:`url(#${C})`,className:a.chartMotionClass(o,i,"animate-fade-in")}),e.jsx("path",{d:m,fill:"none",stroke:r,strokeWidth:f/d.TEN,strokeLinecap:"round",strokeLinejoin:"round",className:a.chartMotionClass(o,i,"animate-draw-line")}),B&&l.map((s,c)=>{var p;return e.jsx("circle",{cx:s.x,cy:s.y,r:t.CHART.DOT_RADIUS,fill:r,className:a.chartMotionClass(o,i,"animate-scale-in"),style:{animationDelay:`${c*d.FIFTY}ms`}},((p=n[c])==null?void 0:p.label)??c)})]}),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=v;

package/dist/components/Chart/LineChart.js

@@ -1,83 +1,84 @@
 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 { ZERO as W, TEN as b, FIFTY as x } from "../../constants/numbers.const.js";
+import { cn as k } 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) => {
+import { resolveBearId as A } from "../../utils/generateBearId.utils.js";
+import { useBearId as R } from "../../utils/useBearId.js";
+import { CHART as t } from "./Chart.const.js";
+import { calculateLinePoints as V, generateLinePath as X, chartMotionClass as d } from "./Chart.utils.js";
+const Z = (B) => {
   const {
-    data: o,
-    height: B = a.DEFAULT_HEIGHT,
+    data: s,
+    height: C = t.DEFAULT_HEIGHT,
     showLabels: y = !0,
-    showDots: C = !0,
-    smooth: E = !0,
-    fill: L = !1,
-    stepped: d = !1,
-    strokeWidth: u = a.DEFAULT_STROKE_WIDTH,
+    showDots: E = !0,
+    smooth: L = !0,
+    fill: u = !1,
+    stepped: m = !1,
+    strokeWidth: O = t.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` };
+    animated: o = !0,
+    motion: i,
+    className: _,
+    id: $,
+    testId: g,
+    ...D
+  } = B, N = R("LineChart"), p = A($, N), h = `${p}-gradient`, l = V(s), f = X(l, L && !m, m), T = l.length === W ? "" : `${f} L ${t.VIEWBOX},${t.VIEWBOX} L 0,${t.VIEWBOX} Z`, v = { "--Bear-Chart-height": `${C}px` };
   return /* @__PURE__ */ c(
     "div",
     {
-      id: m,
-      "data-testid": $,
-      className: s("Bear-Chart Bear-Chart--line", O),
-      style: T,
-      ...g,
+      id: p,
+      "data-testid": g,
+      className: k("Bear-Chart Bear-Chart--line", _),
+      style: v,
+      ...D,
       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__ */ c("svg", { viewBox: `0 0 ${t.VIEWBOX} ${t.VIEWBOX}`, preserveAspectRatio: "none", className: "Bear-Chart__svg", children: [
+          /* @__PURE__ */ e("defs", { children: /* @__PURE__ */ c("linearGradient", { id: h, 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(
+          u && /* @__PURE__ */ e(
             "path",
             {
-              d: N,
-              fill: `url(#${p})`,
-              className: s(i && "animate-fade-in")
+              d: T,
+              fill: `url(#${h})`,
+              className: d(o, i, "animate-fade-in")
             }
           ),
           /* @__PURE__ */ e(
             "path",
             {
-              d: h,
+              d: f,
               fill: "none",
               stroke: r,
-              strokeWidth: u / W,
+              strokeWidth: O / b,
               strokeLinecap: "round",
               strokeLinejoin: "round",
-              className: s(i && "animate-draw-line")
+              className: d(o, i, "animate-draw-line")
             }
           ),
-          C && l.map((t, n) => {
-            var f;
+          E && l.map((a, n) => {
+            var I;
             return /* @__PURE__ */ e(
               "circle",
               {
-                cx: t.x,
-                cy: t.y,
-                r: a.DOT_RADIUS,
+                cx: a.x,
+                cy: a.y,
+                r: t.DOT_RADIUS,
                 fill: r,
-                className: s(i && "animate-scale-in"),
-                style: { animationDelay: `${n * b}ms` }
+                className: d(o, i, "animate-scale-in"),
+                style: { animationDelay: `${n * x}ms` }
               },
-              ((f = o[n]) == null ? void 0 : f.label) ?? n
+              ((I = s[n]) == null ? void 0 : I.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)) })
+        y && /* @__PURE__ */ e("div", { className: "Bear-Chart__labels", children: s.map((a) => /* @__PURE__ */ e("span", { className: "Bear-Chart__label", children: a.label }, a.label)) })
       ]
     }
   );
 };
 export {
-  G as LineChart
+  Z as LineChart
 };

package/dist/components/Chart/PieChart.cjs

@@ -1 +1 @@
-"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;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),Q=require("react"),d=require("../../constants/numbers.const.cjs"),_=require("../../utils/cn.cjs"),ee=require("../../utils/generateBearId.utils.cjs"),te=require("../../utils/useBearId.cjs"),ae=require("../Portal/Portal.cjs"),T=require("../Card/Card.cjs"),C=require("../Flex/Flex.cjs"),w=require("../Box/Box.cjs"),D=require("../Typography/Typography.cjs"),t=require("./Chart.const.cjs"),A=require("./Chart.utils.cjs"),re=M=>{const{data:s,height:y=t.CHART.DEFAULT_HEIGHT,showLabels:S=!0,innerRadius:f=d.ZERO,startAngle:q,padAngle:R=t.CHART.DEFAULT_PAD_ANGLE,animated:U=!0,motion:V,pieView:I=t.PIE_VIEW_FULL,explodeIndex:W,legendPosition:m="right",onSliceClick:i,onSliceHover:u,showSliceTooltip:B=!0,sliceTooltipTitle:E,sliceTooltipDescription:p,sliceTooltipContent:x,className:O,id:$,testId:b,...H}=M,X=te.useBearId("PieChart"),v=ee.resolveBearId($,X),h=s.reduce((e,a)=>e+a.value,d.ZERO),[l,j]=Q.useState(null),L=I===t.PIE_VIEW_HALF,N=I===t.PIE_VIEW_ROSE,P=L?t.CHART.HALF_SWEEP:t.CHART.FULL_SWEEP,Z=q??(L?t.CHART.HALF_PIE_START:t.CHART.DEFAULT_START_ANGLE),G=Math.max(...s.map(e=>e.value),d.ONE),Y=m===t.CHART_LEGEND_NONE||!S,k=m===t.CHART_LEGEND_BOTTOM,F=(e,a,c)=>{const o=s[c];if(u==null||u(o,c),!B)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})},z=()=>{j(null),u==null||u(null,null)};if(s.length===d.ZERO||h===d.ZERO)return r.jsx(C.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=Z;const K=s.map((e,a)=>{const c=N?P/s.length-R:e.value/h*P-R,o=g,n=g+c;g+=c+R;const J=N?t.CHART.ROSE_MIN_RADIUS+e.value/G*(t.CHART.OUTER_RADIUS-t.CHART.ROSE_MIN_RADIUS):t.CHART.OUTER_RADIUS;return{startAngle:o,endAngle:n,color:A.getChartColor(a,e.color),outerRadius:J,...e}});return r.jsxs(C.Flex,{id:v,"data-testid":b,direction:k?"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:K.map((e,a)=>{const c=(e.startAngle+e.endAngle)/2,o=W===a?A.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:A.createArcPath(e.startAngle,e.endAngle,f,e.outerRadius),fill:e.color,className:_.cn(i&&"bear-cursor-pointer","bear-transition-opacity hover:bear-opacity-80",A.chartMotionClass(U,V,"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:z})},e.label)})})}),!Y&&r.jsx(C.Flex,{direction:"column",gap:2,children:s.map((e,a)=>r.jsxs(C.Flex,{align:"center",gap:2,children:[r.jsx(w.Box,{className:"Bear-Chart__swatch",style:{"--Bear-Chart-color":A.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&&B&&r.jsx(ae.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:[(E||p)&&r.jsx(T.CardHeader,{title:(E==null?void 0:E(s[l.index],l.index))??l.label,subtitle:p==null?void 0:p(s[l.index],l.index)}),r.jsx(T.CardBody,{className:"bear-text-xs bear-text-gray-500 dark:bear-text-slate-400",children:(x==null?void 0:x(s[l.index],l.index))??r.jsxs("span",{children:[l.value," (",l.pct,"%)"]})})]})})})]})};exports.PieChart=re;

package/dist/components/Chart/PieChart.js

@@ -1,17 +1,17 @@
 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 { useState as Q } from "react";
+import { ZERO as p, ONE as ee } 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 { resolveBearId as ae } from "../../utils/generateBearId.utils.js";
+import { useBearId as te } from "../../utils/useBearId.js";
+import { Portal as re } from "../Portal/Portal.js";
+import { Card as oe, CardHeader as ne, CardBody as le } 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) => {
+import { Box as M } from "../Box/Box.js";
+import { Typography as P } from "../Typography/Typography.js";
+import { CHART as t, PIE_VIEW_FULL as se, PIE_VIEW_ROSE as ce, CHART_LEGEND_NONE as ie, CHART_LEGEND_BOTTOM as de, PIE_VIEW_HALF as pe } from "./Chart.const.js";
+import { getChartColor as S, chartMotionClass as me, createArcPath as he, polarOffset as ue } from "./Chart.utils.js";
+const Re = (F) => {
   const {
     data: r,
     height: y = t.DEFAULT_HEIGHT,
@@ -20,8 +20,9 @@ const Le = (F) => {
     startAngle: W,
     padAngle: _ = t.DEFAULT_PAD_ANGLE,
     animated: $ = !0,
-    pieView: B = le,
-    explodeIndex: X,
+    motion: X,
+    pieView: B = se,
+    explodeIndex: H,
     legendPosition: b = "right",
     onSliceClick: i,
     onSliceHover: d,
@@ -30,16 +31,16 @@ const Le = (F) => {
     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) => {
+    id: G,
+    testId: C,
+    ...L
+  } = F, j = te("PieChart"), R = ae(G, j), m = r.reduce((e, a) => e + a.value, p), [n, N] = Q(null), O = B === pe, T = B === ce, w = O ? t.HALF_SWEEP : t.FULL_SWEEP, Y = W ?? (O ? t.HALF_PIE_START : t.DEFAULT_START_ANGLE), k = Math.max(...r.map((e) => e.value), ee), z = b === ie || !U, K = b === de, 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 = () => {
+    const o = Math.round(s.value / m * t.VIEWBOX);
+    N({ x: e, y: a, index: c, label: s.label, value: s.value, pct: o });
+  }, Z = () => {
     N(null), d == null || d(null, null);
   };
   if (r.length === p || m === p)
@@ -47,24 +48,24 @@ const Le = (F) => {
       g,
       {
         id: R,
-        "data-testid": L,
+        "data-testid": C,
         align: "center",
         justify: "center",
         className: f("Bear-Chart Bear-Chart--pie Bear-Chart--empty", x),
         style: { "--Bear-Chart-height": `${y}px` },
-        ...C
+        ...L
       }
     );
-  let I = j;
-  const Z = r.map((e, a) => {
-    const c = T ? w / r.length - _ : e.value / m * w - _, s = I, n = I + c;
+  let I = Y;
+  const q = r.map((e, a) => {
+    const c = T ? w / r.length - _ : e.value / m * w - _, s = I, o = I + c;
     I += c + _;
-    const q = T ? t.ROSE_MIN_RADIUS + e.value / Y * (t.OUTER_RADIUS - t.ROSE_MIN_RADIUS) : t.OUTER_RADIUS;
+    const J = T ? t.ROSE_MIN_RADIUS + e.value / k * (t.OUTER_RADIUS - t.ROSE_MIN_RADIUS) : t.OUTER_RADIUS;
     return {
       startAngle: s,
-      endAngle: n,
+      endAngle: o,
       color: S(a, e.color),
-      outerRadius: q,
+      outerRadius: J,
       ...e
     };
   });
@@ -72,67 +73,67 @@ const Le = (F) => {
     g,
     {
       id: R,
-      "data-testid": L,
-      direction: z ? "column" : "row",
+      "data-testid": C,
+      direction: K ? "column" : "row",
       align: "center",
       gap: 4,
       wrap: "wrap",
       className: f("Bear-Chart Bear-Chart--pie", x),
       style: { "--Bear-Chart-height": `${y}px` },
-      ...C,
+      ...L,
       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 };
+        /* @__PURE__ */ l(M, { className: "Bear-Chart__pie-canvas", children: /* @__PURE__ */ l("svg", { viewBox: `0 0 ${t.VIEWBOX} ${t.VIEWBOX}`, className: "Bear-Chart__svg", children: q.map((e, a) => {
+          const c = (e.startAngle + e.endAngle) / 2, s = H === a ? ue(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),
+              d: he(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"
+                me($, X, "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));
+              onKeyDown: (o) => {
+                (o.key === "Enter" || o.key === " ") && (o.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
+              onMouseEnter: (o) => D(o.clientX, o.clientY, a),
+              onMouseMove: (o) => D(o.clientX, o.clientY, a),
+              onMouseLeave: Z
             }
           ) }, e.label);
         }) }) }),
-        !k && /* @__PURE__ */ l(g, { direction: "column", gap: 2, children: r.map((e, a) => /* @__PURE__ */ h(g, { align: "center", gap: 2, children: [
+        !z && /* @__PURE__ */ l(g, { direction: "column", gap: 2, children: r.map((e, a) => /* @__PURE__ */ h(g, { align: "center", gap: 2, children: [
           /* @__PURE__ */ l(
-            P,
+            M,
             {
               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: [
+          /* @__PURE__ */ l(P, { variant: "body2", color: "muted", children: e.label }),
+          /* @__PURE__ */ h(P, { 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: [
+        n && v && /* @__PURE__ */ l(re, { children: /* @__PURE__ */ l("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(oe, { 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)
+              title: (u == null ? void 0 : u(r[n.index], n.index)) ?? n.label,
+              subtitle: E == null ? void 0 : E(r[n.index], n.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,
+          /* @__PURE__ */ l(le, { className: "bear-text-xs bear-text-gray-500 dark:bear-text-slate-400", children: (A == null ? void 0 : A(r[n.index], n.index)) ?? /* @__PURE__ */ h("span", { children: [
+            n.value,
             " (",
-            o.pct,
+            n.pct,
             "%)"
           ] }) })
         ] }) }) })
@@ -141,5 +142,5 @@ const Le = (F) => {
   );
 };
 export {
-  Le as PieChart
+  Re as PieChart
 };

package/dist/components/Chart/RadarChart.cjs

@@ -1 +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;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),i=require("../../constants/numbers.const.cjs"),_=require("../../utils/cn.cjs");require("react");const D=require("../../utils/generateBearId.utils.cjs"),L=require("../../utils/useBearId.cjs"),a=require("./Chart.const.cjs"),n=require("./Chart.utils.cjs"),f=m=>{const{data:l,height:g=a.CHART.DEFAULT_HEIGHT,showLabels:x=!0,showValues:y=!1,animated:p=!0,motion:H,color:R,className:T,id:S,testId:d,...C}=m,I=L.useBearId("RadarChart"),u=D.resolveBearId(S,I),A=l.length,h={"--Bear-Chart-height":`${g}px`};if(A===i.ZERO)return o.jsx("div",{id:u,"data-testid":d,className:_.cn("Bear-Chart Bear-Chart--radar Bear-Chart--empty",T),style:h,...C});const b=Math.max(...l.map(e=>e.value),i.ONE),c=a.CHART.FULL_SWEEP/A,E=l.map((e,r)=>{const t=a.CHART.DEFAULT_START_ANGLE+r*c,s=e.value/b*a.CHART.OUTER_RADIUS;return n.polarToCartesian(t,s)}),B=E.map(e=>`${e.x},${e.y}`).join(" "),N=Array.from({length:a.CHART.RADAR_RINGS},(e,r)=>{const t=(r+i.ONE)/a.CHART.RADAR_RINGS*a.CHART.OUTER_RADIUS;return Array.from({length:A},(s,O)=>{const U=a.CHART.DEFAULT_START_ANGLE+O*c;return n.polarToCartesian(U,t)})});return o.jsx("div",{id:u,"data-testid":d,className:_.cn("Bear-Chart Bear-Chart--radar",T),style:h,...C,children:o.jsxs("svg",{viewBox:`0 0 ${a.CHART.VIEWBOX} ${a.CHART.VIEWBOX}`,className:"Bear-Chart__svg",children:[N.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)),l.map((e,r)=>{const t=a.CHART.DEFAULT_START_ANGLE+r*c,s=n.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:n.getChartColor(i.ZERO,R),fillOpacity:.25,stroke:n.getChartColor(i.ZERO,R),strokeWidth:.8,className:n.chartMotionClass(p,H,"animate-scale-in")}),E.map((e,r)=>o.jsx("circle",{cx:e.x,cy:e.y,r:a.CHART.DOT_RADIUS,fill:n.getChartColor(r,l[r].color||R)},l[r].label)),x&&l.map((e,r)=>{const t=a.CHART.DEFAULT_START_ANGLE+r*c,s=n.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=f;