@forgedevstack/bear 1.3.1 → 1.3.3

package/dist/components/Chart/BarChart.js

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

package/dist/components/Chart/Chart.cjs

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

package/dist/components/Chart/Chart.const.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e={DEFAULT_INNER_RADIUS:.6},A={BAR:"bar",LINE:"line",AREA:"area",PIE:"pie",DONUT:"donut"},T=["#ec4899","#8b5cf6","#3b82f6","#10b981","#f59e0b","#ef4444","#06b6d4","#84cc16"];exports.CHART=e;exports.CHART_TYPES=A;exports.DEFAULT_COLORS=T;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const E={DEFAULT_HEIGHT:200,DEFAULT_BAR_RADIUS:4,DEFAULT_BAR_GAP:.2,DEFAULT_STROKE_WIDTH:2,DEFAULT_INNER_RADIUS:.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",RADAR:"radar",FUNNEL:"funnel",STACKED:"stacked"},A="full",R="half",T="rose",L="bottom",I="none",D=["#ec4899","#8b5cf6","#3b82f6","#10b981","#f59e0b","#ef4444","#06b6d4","#84cc16"];exports.CHART=E;exports.CHART_LEGEND_BOTTOM=L;exports.CHART_LEGEND_NONE=I;exports.CHART_TYPES=_;exports.DEFAULT_COLORS=D;exports.PIE_VIEW_FULL=A;exports.PIE_VIEW_HALF=R;exports.PIE_VIEW_ROSE=T;

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

@@ -1,6 +1,3 @@
-/**
- * Chart constants
- */
 export declare const CHART: {
     readonly DEFAULT_HEIGHT: 200;
     readonly DEFAULT_BAR_RADIUS: 4;
@@ -11,6 +8,21 @@ export declare const CHART: {
     readonly DEFAULT_PAD_ANGLE: 2;
     readonly OUTER_RADIUS: 45;
     readonly CENTER: 50;
+    readonly HALF_SWEEP: 180;
+    readonly FULL_SWEEP: 360;
+    readonly EXPLODE_OFFSET: 4;
+    readonly ROSE_MIN_RADIUS: 14;
+    readonly RADAR_RINGS: 4;
+    readonly RADAR_LABEL_OFFSET: 8;
+    readonly FUNNEL_MIN_WIDTH: 18;
+    readonly SLICE_DELAY_MS: 100;
+    readonly DOT_RADIUS: 1.5;
+    readonly VIEWBOX: 100;
+    readonly LINE_Y_RANGE: 80;
+    readonly LINE_Y_PAD: 10;
+    readonly BEZIER_DIVISOR: 3;
+    readonly LARGE_ARC_THRESHOLD: 180;
+    readonly HALF_PIE_START: -180;
 };
 export declare const CHART_TYPES: {
     readonly BAR: "bar";
@@ -18,5 +30,14 @@ export declare const CHART_TYPES: {
     readonly AREA: "area";
     readonly PIE: "pie";
     readonly DONUT: "donut";
+    readonly RADAR: "radar";
+    readonly FUNNEL: "funnel";
+    readonly STACKED: "stacked";
 };
+export declare const PIE_VIEW_FULL = "full";
+export declare const PIE_VIEW_HALF = "half";
+export declare const PIE_VIEW_ROSE = "rose";
+export declare const CHART_LEGEND_RIGHT = "right";
+export declare const CHART_LEGEND_BOTTOM = "bottom";
+export declare const CHART_LEGEND_NONE = "none";
 export declare const DEFAULT_COLORS: readonly ["#ec4899", "#8b5cf6", "#3b82f6", "#10b981", "#f59e0b", "#ef4444", "#06b6d4", "#84cc16"];

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,26 @@
-import { jsx as e } from "react/jsx-runtime";
-import { BarChart as i } from "./BarChart.js";
-import { LineChart as n } 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 { jsx as o } from "react/jsx-runtime";
+import "react";
+import { resolveBearId as s } from "../../utils/generateBearId.utils.js";
+import { useBearId as C } from "../../utils/useBearId.js";
+import { BarChart as e } from "./BarChart.js";
+import { LineChart as m } from "./LineChart.js";
+import { PieChart as i } from "./PieChart.js";
+import { RadarChart as E } from "./RadarChart.js";
+import { FunnelChart as f } from "./FunnelChart.js";
+import { CHART_TYPES as t, CHART as c } from "./Chart.const.js";
+const a = {
+  [t.BAR]: (r) => /* @__PURE__ */ o(e, { ...r }),
+  [t.STACKED]: (r) => /* @__PURE__ */ o(e, { ...r, stacked: !0 }),
+  [t.LINE]: (r) => /* @__PURE__ */ o(m, { ...r }),
+  [t.AREA]: (r) => /* @__PURE__ */ o(m, { ...r, fill: !0 }),
+  [t.PIE]: (r) => /* @__PURE__ */ o(i, { ...r }),
+  [t.DONUT]: (r) => /* @__PURE__ */ o(i, { ...r, innerRadius: c.DEFAULT_INNER_RADIUS }),
+  [t.RADAR]: (r) => /* @__PURE__ */ o(E, { ...r }),
+  [t.FUNNEL]: (r) => /* @__PURE__ */ o(f, { ...r })
+}, U = (r) => {
+  const { type: R = t.BAR, id: n, ...d } = r, p = C("Chart"), A = s(n, p);
+  return (a[R] ?? a[t.BAR])({ ...d, id: A });
 };
 export {
-  C as Chart
+  U 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 */
+    type?: ChartType;
     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 r=require("react/jsx-runtime"),n=require("../../constants/numbers.const.cjs"),s=require("../../utils/cn.cjs");require("react");const N=require("../../utils/generateBearId.utils.cjs"),_=require("../../utils/useBearId.cjs"),b=require("../Box/Box.cjs"),o=require("../Flex/Flex.cjs"),F=require("../Typography/Typography.cjs"),t=require("./Chart.const.cjs"),j=require("./Chart.utils.cjs"),E=l=>{const{data:a,height:c=t.CHART.DEFAULT_HEIGHT,showLabels:u=!0,showValues:i=!0,animated:h=!0,color:d,className:C,id:g,testId:m,...x}=l,B=_.useBearId("FunnelChart"),p=N.resolveBearId(g,B),I=Math.max(...a.map(e=>e.value),n.ONE),q={"--Bear-Chart-height":`${c}px`};return r.jsx(o.Flex,{id:p,"data-testid":m,direction:"column",gap:1,justify:"center",className:s.cn("Bear-Chart Bear-Chart--funnel",C),style:q,...x,children:a.map((e,y)=>{const T={"--Bear-Chart-size":`${Math.max(e.value/I*t.CHART.VIEWBOX,t.CHART.FUNNEL_MIN_WIDTH)}%`,"--Bear-Chart-step-height":`${t.CHART.VIEWBOX/Math.max(a.length,n.ONE)/2}%`,"--Bear-Chart-color":j.getChartColor(y,e.color||d)};return r.jsxs(o.Flex,{direction:"column",align:"center",gap:1,className:"bear-w-full",children:[r.jsx(b.Box,{className:s.cn("Bear-Chart__funnel-step bear-rounded-md",h&&"animate-grow-right"),style:T}),u&&r.jsxs(F.Typography,{variant:"caption",color:"muted",children:[e.label,i?` · ${e.value}`:""]})]},e.label)})})};exports.FunnelChart=E;

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

package/dist/components/Chart/LineChart.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;