@forgedevstack/bear 1.3.0 → 1.3.2

package/dist/components/Chart/Chart.const.js

@@ -1,31 +1,54 @@
-const A = {
-  DEFAULT_INNER_RADIUS: 0.6
-}, c = {
+const E = {
+  DEFAULT_HEIGHT: 200,
+  DEFAULT_BAR_RADIUS: 4,
+  DEFAULT_BAR_GAP: 0.2,
+  DEFAULT_STROKE_WIDTH: 2,
+  DEFAULT_INNER_RADIUS: 0.6,
+  DEFAULT_START_ANGLE: -90,
+  DEFAULT_PAD_ANGLE: 2,
+  OUTER_RADIUS: 45,
+  CENTER: 50,
+  HALF_SWEEP: 180,
+  FULL_SWEEP: 360,
+  EXPLODE_OFFSET: 4,
+  ROSE_MIN_RADIUS: 14,
+  RADAR_RINGS: 4,
+  RADAR_LABEL_OFFSET: 8,
+  FUNNEL_MIN_WIDTH: 18,
+  SLICE_DELAY_MS: 100,
+  DOT_RADIUS: 1.5,
+  VIEWBOX: 100,
+  LINE_Y_RANGE: 80,
+  LINE_Y_PAD: 10,
+  BEZIER_DIVISOR: 3,
+  LARGE_ARC_THRESHOLD: 180,
+  HALF_PIE_START: -180
+}, _ = {
   BAR: "bar",
   LINE: "line",
   AREA: "area",
   PIE: "pie",
-  DONUT: "donut"
-}, e = [
+  DONUT: "donut",
+  RADAR: "radar",
+  FUNNEL: "funnel",
+  STACKED: "stacked"
+}, A = "full", R = "half", L = "rose", T = "bottom", D = "none", I = [
   "#ec4899",
-  // pink
   "#8b5cf6",
-  // purple
   "#3b82f6",
-  // blue
   "#10b981",
-  // emerald
   "#f59e0b",
-  // amber
   "#ef4444",
-  // red
   "#06b6d4",
-  // cyan
   "#84cc16"
-  // lime
 ];
 export {
-  A as CHART,
-  c as CHART_TYPES,
-  e as DEFAULT_COLORS
+  E as CHART,
+  T as CHART_LEGEND_BOTTOM,
+  D as CHART_LEGEND_NONE,
+  _ as CHART_TYPES,
+  I as DEFAULT_COLORS,
+  A as PIE_VIEW_FULL,
+  R as PIE_VIEW_HALF,
+  L as PIE_VIEW_ROSE
 };

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

@@ -1,6 +1,2 @@
-import { FC } from 'react';
 import { ChartProps } from './Chart.types';
-/**
- * Main Chart Component
- */
-export declare const Chart: FC<ChartProps>;
+export declare const Chart: (props: ChartProps) => JSX.Element;

package/dist/components/Chart/Chart.js

@@ -1,27 +1,23 @@
-import { jsx as e } from "react/jsx-runtime";
-import { BarChart as i } from "./BarChart.js";
-import { LineChart as n } from "./LineChart.js";
+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 { CHART_TYPES as r, CHART as A } from "./Chart.const.js";
-const C = ({
-  id: o,
-  type: a,
-  ...t
-}) => {
-  switch (a) {
-    case r.BAR:
-      return /* @__PURE__ */ e(i, { ...t });
-    case r.LINE:
-    case r.AREA:
-      return /* @__PURE__ */ e(n, { ...t, fill: a === r.AREA });
-    case r.PIE:
-      return /* @__PURE__ */ e(m, { ...t });
-    case r.DONUT:
-      return /* @__PURE__ */ e(m, { ...t, innerRadius: A.DEFAULT_INNER_RADIUS });
-    default:
-      return /* @__PURE__ */ e(i, { ...t });
-  }
+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";
+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);
 };
 export {
-  C as Chart
+  d as Chart
 };

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

@@ -1,53 +1,43 @@
 import { HTMLAttributes, ReactNode } from 'react';
-export type ChartType = 'bar' | 'line' | 'area' | 'pie' | 'donut';
+export type ChartType = 'bar' | 'line' | 'area' | 'pie' | 'donut' | 'radar' | 'funnel' | 'stacked';
+export type PieView = 'full' | 'half' | 'rose';
+export type ChartLegendPosition = 'right' | 'bottom' | 'none';
 export interface ChartDataPoint {
     label: string;
     value: number;
     color?: string;
+    stacks?: number[];
 }
 export interface ChartProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
     testId?: string;
-    /** Chart type */
     type: ChartType;
-    /** Data points */
     data: ChartDataPoint[];
-    /** Chart height */
     height?: number;
-    /** Show labels */
     showLabels?: boolean;
-    /** Show values */
     showValues?: boolean;
-    /** Animate on render */
     animated?: boolean;
-    /** Primary color (used for single-color charts) */
     color?: string;
-    /** Show grid lines */
     showGrid?: boolean;
+    pieView?: PieView;
+    explodeIndex?: number;
+    legendPosition?: ChartLegendPosition;
+    stepped?: boolean;
+    stacked?: boolean;
 }
 export interface BarChartProps extends Omit<ChartProps, 'type'> {
-    /** Bar orientation */
     orientation?: 'vertical' | 'horizontal';
-    /** Bar border radius */
     barRadius?: number;
-    /** Gap between bars (0-1) */
     barGap?: number;
 }
 export interface LineChartProps extends Omit<ChartProps, 'type'> {
-    /** Show area fill */
     fill?: boolean;
-    /** Line width */
     strokeWidth?: number;
-    /** Show dots at data points */
     showDots?: boolean;
-    /** Smooth curve */
     smooth?: boolean;
 }
 export interface PieChartProps extends Omit<ChartProps, 'type'> {
-    /** Inner radius for donut chart (0-1) */
     innerRadius?: number;
-    /** Start angle in degrees */
     startAngle?: number;
-    /** Padding between slices */
     padAngle?: number;
     onSliceClick?: (item: ChartDataPoint, index: number) => void;
     onSliceHover?: (item: ChartDataPoint | null, index: number | null) => void;
@@ -56,3 +46,5 @@ export interface PieChartProps extends Omit<ChartProps, 'type'> {
     sliceTooltipDescription?: (item: ChartDataPoint, index: number) => ReactNode;
     sliceTooltipContent?: (item: ChartDataPoint, index: number) => ReactNode;
 }
+export type RadarChartProps = Omit<ChartProps, 'type'>;
+export type FunnelChartProps = Omit<ChartProps, 'type'>;

package/dist/components/Chart/Chart.utils.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./Chart.const.cjs"),o=(e,r)=>r||t.DEFAULT_COLORS[e%t.DEFAULT_COLORS.length];exports.getChartColor=o;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const E=require("../../constants/numbers.const.cjs"),a=require("./Chart.const.cjs"),x=(r,c)=>c||a.DEFAULT_COLORS[r%a.DEFAULT_COLORS.length],o=(r,c,$=a.CHART.CENTER)=>{const t=r*Math.PI/a.CHART.HALF_SWEEP;return{x:$+c*Math.cos(t),y:$+c*Math.sin(t)}},T=(r,c)=>{const $=r*Math.PI/a.CHART.HALF_SWEEP;return{x:c*Math.cos($),y:c*Math.sin($)}},A=(r,c,$=E.ZERO,t=a.CHART.OUTER_RADIUS)=>{const e=$*t,n=o(r,t),R=o(c,t),O=o(r,e),s=o(c,e),C=c-r>a.CHART.LARGE_ARC_THRESHOLD?E.ONE:E.ZERO;return $>E.ZERO?`M ${n.x},${n.y} A ${t},${t} 0 ${C},1 ${R.x},${R.y} L ${s.x},${s.y} A ${e},${e} 0 ${C},0 ${O.x},${O.y} Z`:`M ${a.CHART.CENTER},${a.CHART.CENTER} L ${n.x},${n.y} A ${t},${t} 0 ${C},1 ${R.x},${R.y} Z`},l=(r,c=!0,$=!1)=>r.length===E.ZERO?"":$?r.reduce((t,e,n,R)=>{if(n===E.ZERO)return`M ${e.x},${e.y}`;const O=R[n-E.ONE];return`${t} L ${e.x},${O.y} L ${e.x},${e.y}`},""):c?r.reduce((t,e,n,R)=>{if(n===E.ZERO)return`M ${e.x},${e.y}`;const O=R[n-E.ONE],s=O.x+(e.x-O.x)/a.CHART.BEZIER_DIVISOR,C=e.x-(e.x-O.x)/a.CHART.BEZIER_DIVISOR;return`${t} C ${s},${O.y} ${C},${e.y} ${e.x},${e.y}`},""):r.reduce((t,e,n)=>`${t} ${n===E.ZERO?"M":"L"} ${e.x},${e.y}`,""),u=r=>{const c=Math.max(...r.map(n=>n.value)),$=Math.min(...r.map(n=>n.value)),t=c-$||E.ONE,e=r.length-E.ONE||E.ONE;return r.map((n,R)=>({x:R/e*a.CHART.VIEWBOX,y:a.CHART.VIEWBOX-(n.value-$)/t*a.CHART.LINE_Y_RANGE-a.CHART.LINE_Y_PAD}))},h=(r,c)=>!r||r.length===E.ZERO?c:r.reduce(($,t)=>$+t,E.ZERO);exports.calculateLinePoints=u;exports.createArcPath=A;exports.generateLinePath=l;exports.getChartColor=x;exports.getStackTotal=h;exports.polarOffset=T;exports.polarToCartesian=o;

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

@@ -1,31 +1,21 @@
-/**
- * Get color for chart element by index
- */
 export declare const getChartColor: (index: number, customColor?: string) => string;
-/**
- * Convert polar coordinates to cartesian
- */
-export declare const polarToCartesian: (angle: number, radius: number) => {
+export declare const polarToCartesian: (angle: number, radius: number, center?: number) => {
     x: number;
     y: number;
 };
-/**
- * Create SVG arc path for pie/donut charts
- */
-export declare const createArcPath: (startAngle: number, endAngle: number, innerRadius?: number) => string;
-/**
- * Generate smooth bezier line path
- */
+export declare const polarOffset: (angle: number, distance: number) => {
+    x: number;
+    y: number;
+};
+export declare const createArcPath: (startAngle: number, endAngle: number, innerRadius?: number, outerRadius?: number) => string;
 export declare const generateLinePath: (points: Array<{
     x: number;
     y: number;
-}>, smooth?: boolean) => string;
-/**
- * Calculate line chart points from data
- */
+}>, smooth?: boolean, stepped?: boolean) => string;
 export declare const calculateLinePoints: (data: Array<{
     value: number;
 }>) => Array<{
     x: number;
     y: number;
 }>;
+export declare const getStackTotal: (stacks: number[] | undefined, value: number) => number;

package/dist/components/Chart/Chart.utils.js

@@ -1,5 +1,41 @@
-import { DEFAULT_COLORS as r } from "./Chart.const.js";
-const n = (t, o) => o || r[t % r.length];
+import { ZERO as y, ONE as o } from "../../constants/numbers.const.js";
+import { DEFAULT_COLORS as L, CHART as x } from "./Chart.const.js";
+const M = ($, n) => n || L[$ % L.length], h = ($, n, c = x.CENTER) => {
+  const e = $ * Math.PI / x.HALF_SWEEP;
+  return {
+    x: c + n * Math.cos(e),
+    y: c + n * Math.sin(e)
+  };
+}, f = ($, n) => {
+  const c = $ * Math.PI / x.HALF_SWEEP;
+  return {
+    x: n * Math.cos(c),
+    y: n * Math.sin(c)
+  };
+}, _ = ($, n, c = y, e = x.OUTER_RADIUS) => {
+  const r = c * e, t = h($, e), E = h(n, e), a = h($, r), I = h(n, r), s = n - $ > x.LARGE_ARC_THRESHOLD ? o : y;
+  return c > y ? `M ${t.x},${t.y} A ${e},${e} 0 ${s},1 ${E.x},${E.y} L ${I.x},${I.y} A ${r},${r} 0 ${s},0 ${a.x},${a.y} Z` : `M ${x.CENTER},${x.CENTER} L ${t.x},${t.y} A ${e},${e} 0 ${s},1 ${E.x},${E.y} Z`;
+}, m = ($, n = !0, c = !1) => $.length === y ? "" : c ? $.reduce((e, r, t, E) => {
+  if (t === y) return `M ${r.x},${r.y}`;
+  const a = E[t - o];
+  return `${e} L ${r.x},${a.y} L ${r.x},${r.y}`;
+}, "") : n ? $.reduce((e, r, t, E) => {
+  if (t === y) return `M ${r.x},${r.y}`;
+  const a = E[t - o], I = a.x + (r.x - a.x) / x.BEZIER_DIVISOR, s = r.x - (r.x - a.x) / x.BEZIER_DIVISOR;
+  return `${e} C ${I},${a.y} ${s},${r.y} ${r.x},${r.y}`;
+}, "") : $.reduce((e, r, t) => `${e} ${t === y ? "M" : "L"} ${r.x},${r.y}`, ""), O = ($) => {
+  const n = Math.max(...$.map((t) => t.value)), c = Math.min(...$.map((t) => t.value)), e = n - c || o, r = $.length - o || o;
+  return $.map((t, E) => ({
+    x: E / r * x.VIEWBOX,
+    y: x.VIEWBOX - (t.value - c) / e * x.LINE_Y_RANGE - x.LINE_Y_PAD
+  }));
+}, A = ($, n) => !$ || $.length === y ? n : $.reduce((c, e) => c + e, y);
 export {
-  n as getChartColor
+  O as calculateLinePoints,
+  _ as createArcPath,
+  m as generateLinePath,
+  M as getChartColor,
+  A as getStackTotal,
+  f as polarOffset,
+  h as polarToCartesian
 };

package/dist/components/Chart/FunnelChart.cjs

@@ -0,0 +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=_;

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

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

package/dist/components/Chart/FunnelChart.js

@@ -0,0 +1,59 @@
+import { jsx as o, jsxs as e } 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) => {
+  const {
+    data: t,
+    height: i = a.DEFAULT_HEIGHT,
+    showLabels: s = !0,
+    showValues: h = !0,
+    animated: u = !0,
+    color: p,
+    className: d,
+    ...f
+  } = c, g = Math.max(...t.map((r) => r.value), l);
+  return /* @__PURE__ */ o(
+    m,
+    {
+      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__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
+              }
+            }
+          ),
+          s && /* @__PURE__ */ e(w, { variant: "caption", color: "muted", children: [
+            r.label,
+            h ? ` · ${r.value}` : ""
+          ] })
+        ] }, r.label);
+      })
+    }
+  );
+};
+export {
+  L as FunnelChart
+};

package/dist/components/Chart/LineChart.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),m=require("react"),u=require("../../utils/cn.cjs"),N=({data:a,height:y=200,showLabels:d=!0,showDots:h=!0,smooth:f=!0,fill:p=!1,strokeWidth:j=2,color:i="var(--bear-primary-500, #ec4899)",animated:x=!0,className:$,...v})=>{const n=m.useMemo(()=>{const r=Math.max(...a.map(t=>t.value)),e=Math.min(...a.map(t=>t.value)),l=r-e||1;return a.map((t,c)=>({x:c/(a.length-1||1)*100,y:100-(t.value-e)/l*80-10,...t}))},[a]),o=m.useMemo(()=>n.length===0?"":f?n.reduce((r,e,l,t)=>{if(l===0)return`M ${e.x},${e.y}`;const c=t[l-1],M=c.x+(e.x-c.x)/3,L=e.x-(e.x-c.x)/3;return`${r} C ${M},${c.y} ${L},${e.y} ${e.x},${e.y}`},""):n.reduce((r,e,l)=>`${r} ${l===0?"M":"L"} ${e.x},${e.y}`,""),[n,f]),g=m.useMemo(()=>n.length===0?"":`${o} L 100,100 L 0,100 Z`,[o,n]);return s.jsxs("div",{className:u.cn("w-full",$),style:{height:y},...v,children:[s.jsxs("svg",{viewBox:"0 0 100 100",preserveAspectRatio:"none",className:"w-full h-full",children:[s.jsx("defs",{children:s.jsxs("linearGradient",{id:"line-gradient",x1:"0%",y1:"0%",x2:"0%",y2:"100%",children:[s.jsx("stop",{offset:"0%",stopColor:i,stopOpacity:"0.3"}),s.jsx("stop",{offset:"100%",stopColor:i,stopOpacity:"0"})]})}),p&&s.jsx("path",{d:g,fill:"url(#line-gradient)",className:u.cn(x&&"animate-fade-in")}),s.jsx("path",{d:o,fill:"none",stroke:i,strokeWidth:j/10,strokeLinecap:"round",strokeLinejoin:"round",className:u.cn(x&&"animate-draw-line")}),h&&n.map((r,e)=>s.jsx("circle",{cx:r.x,cy:r.y,r:1.5,fill:i,className:u.cn(x&&"animate-scale-in"),style:{animationDelay:`${e*50}ms`}},e))]}),d&&s.jsx("div",{className:"flex justify-between mt-2",children:a.map((r,e)=>s.jsx("span",{className:"text-xs text-gray-600 dark:text-slate-300",children:r.label},e))})]})};exports.LineChart=N;
+"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;

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

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

package/dist/components/Chart/LineChart.js

@@ -1,73 +1,69 @@
-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" })
+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 { cn as s } from "../../utils/cn.js";
+import "react";
+import { CHART as a } from "./Chart.const.js";
+import { calculateLinePoints as B, generateLinePath as W } from "./Chart.utils.js";
+const A = (f) => {
+  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,
+    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" })
       ] }) }),
-      $ && /* @__PURE__ */ s(
+      x && /* @__PURE__ */ e(
         "path",
         {
-          d: L,
+          d: D,
           fill: "url(#line-gradient)",
-          className: u(x && "animate-fade-in")
+          className: s(o && "animate-fade-in")
         }
       ),
-      /* @__PURE__ */ s(
+      /* @__PURE__ */ e(
         "path",
         {
-          d: m,
+          d: p,
           fill: "none",
-          stroke: i,
-          strokeWidth: v / 10,
+          stroke: r,
+          strokeWidth: E / N,
           strokeLinecap: "round",
           strokeLinejoin: "round",
-          className: u(x && "animate-draw-line")
+          className: s(o && "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
-      ))
+      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
+        );
+      })
     ] }),
-    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)) })
+    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)) })
   ] });
 };
 export {
-  b as LineChart
+  A 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 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;

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;