@forgedevstack/bear 1.3.3 → 1.3.5

package/dist/components/Calendar/Calendar.js

@@ -1,128 +1,128 @@
-import { jsxs as s, Fragment as ge, jsx as t } from "react/jsx-runtime";
-import { useMemo as L, useCallback as m } from "react";
-import { ZERO as Be } from "../../constants/numbers.const.js";
-import { BOOLEAN_TRUE as Ee } from "../../constants/generals.const.js";
-import { cn as R } from "../../utils/cn.js";
-import { useBearStyles as De } from "../../hooks/useBearStyles.js";
+import { jsxs as c, Fragment as we, jsx as a } from "react/jsx-runtime";
+import { useMemo as A, useCallback as m } from "react";
+import { ZERO as oe } from "../../constants/numbers.const.js";
+import { BOOLEAN_TRUE as De } from "../../constants/generals.const.js";
+import { cn as M } from "../../utils/cn.js";
+import { useBearStyles as Oe } from "../../hooks/useBearStyles.js";
 import "../../hooks/useBearComponent/useBearComponent.js";
 import "../../context/BearProvider.js";
 import { OVERLAY_OPEN_EFFECT_NONE as l } from "../../hooks/useFixedAnchorPosition/useFixedAnchorPosition.const.js";
-import { resolveOverlayEffects as we } from "../../hooks/useFixedAnchorPosition/useFixedAnchorPosition.utils.js";
+import { resolveOverlayEffects as Te } from "../../hooks/useFixedAnchorPosition/useFixedAnchorPosition.utils.js";
 import "../FormControl/FormControl.context.js";
-import { ChevronsLeftIcon as Oe, ChevronLeftIcon as Te, ChevronRightIcon as Pe, ChevronsRightIcon as Le } from "@forgedevstack/bear-icons";
-import { OVERLAY_EFFECT_TRANSITION as Y } from "../OverlayPortal/OverlayPortal.const.js";
-import { Transition as Re } from "../Transition/Transition.js";
-import { DEFAULT_DURATION as Ye } from "../Transition/Transition.const.js";
+import { ChevronsLeftIcon as Pe, ChevronLeftIcon as Le, ChevronRightIcon as Re, ChevronsRightIcon as Ye } from "@forgedevstack/bear-icons";
+import { OVERLAY_EFFECT_TRANSITION as S } from "../OverlayPortal/OverlayPortal.const.js";
+import { Transition as ie } from "../Transition/Transition.js";
+import { DEFAULT_DURATION as be } from "../Transition/Transition.const.js";
 import { DEFAULT_WEEKDAYS as Ae, NUMBER as d, CALENDAR_DROPDOWN_Z_INDEX as Me, MONTHS as Se, WEEKEND_LABELS as We } from "./Calendar.const.js";
 import { isSameDay as _, buildCalendarGrid as Fe, reorderWeekdays as Ie, isWeekendDay as je } from "./Calendar.utils.js";
 import { DefaultHeaderLabel as He } from "./Calendar.helpers.js";
-const sr = (A) => {
+const cr = (W) => {
   const {
-    viewDate: M,
-    value: S = null,
+    viewDate: F,
+    value: I = null,
     onSelect: C,
     onViewChange: n,
     minDate: z,
     maxDate: g,
-    disabledDates: W = [],
-    highlightedDates: F = [],
-    weekdayLabels: I = Ae,
-    firstDayOfWeek: k = d.ZERO,
+    disabledDates: j = [],
+    highlightedDates: H = [],
+    weekdayLabels: U = Ae,
+    firstDayOfWeek: x = d.ZERO,
     showWeekNumbers: Ue = !1,
     slots: e = {},
-    clearable: te = !0,
+    clearable: de = !0,
     onClear: h,
-    showTodayButton: ne = !0,
+    showTodayButton: se = !0,
     onToday: u,
-    bis: oe,
-    style: ie,
-    inline: j = !1,
-    className: be,
-    open: H
-  } = A, { openEffect: y, closeEffect: v } = we(A), i = M.getFullYear(), U = De(oe, ie), b = M.getMonth(), de = L(() => /* @__PURE__ */ new Date(), []), B = m(() => {
+    bis: ce,
+    style: le,
+    inline: G = !1,
+    className: me,
+    open: Z
+  } = W, { openEffect: y, closeEffect: v } = Te(W), i = F.getFullYear(), K = Oe(ce, le), b = F.getMonth(), he = A(() => /* @__PURE__ */ new Date(), []), B = m(() => {
     n == null || n(new Date(i - d.ONE, b, d.ONE));
-  }, [i, b, n]), G = m(() => {
+  }, [i, b, n]), X = m(() => {
     n == null || n(new Date(i, b - d.ONE, d.ONE));
-  }, [i, b, n]), Z = m(() => {
+  }, [i, b, n]), q = m(() => {
     n == null || n(new Date(i, b + d.ONE, d.ONE));
   }, [i, b, n]), E = m(() => {
     n == null || n(new Date(i + d.ONE, b, d.ONE));
-  }, [i, b, n]), D = G, w = Z, ce = {
+  }, [i, b, n]), w = X, D = q, ue = {
     onPrevYear: B,
-    onPrevMonth: G,
-    onNextMonth: Z,
+    onPrevMonth: X,
+    onNextMonth: q,
     onNextYear: E
-  }, se = m(
-    (a) => z && a < z || g && a > g ? !0 : W.some((r) => _(r, a)),
-    [z, g, W]
-  ), le = m(
-    (a) => F.some((r) => _(r, a)),
-    [F]
-  ), me = L(
-    () => Fe(i, b, k),
-    [i, b, k]
-  ), K = L(
-    () => Ie(I, k),
-    [I, k]
-  ), X = Se[b], O = S != null, he = j ? "Bear-Calendar Bear-Calendar--inline bear-block bear-w-full bear-bg-white dark:bear-bg-zinc-900 bear-rounded-xl bear-shadow-none bear-border bear-border-zinc-200 dark:bear-border-zinc-700 bear-p-4 bear-text-zinc-900 dark:bear-text-zinc-100" : "Bear-Calendar Bear-Calendar--dropdown bear-mt-2 bear-bg-white dark:bear-bg-zinc-900 bear-rounded-xl bear-shadow-xl bear-border bear-border-zinc-200 dark:bear-border-zinc-700 bear-p-4 bear-w-80 bear-text-zinc-900 dark:bear-text-zinc-100", q = j ? void 0 : { zIndex: Me }, ue = () => {
+  }, ye = m(
+    (t) => z && t < z || g && t > g ? !0 : j.some((r) => _(r, t)),
+    [z, g, j]
+  ), ve = m(
+    (t) => H.some((r) => _(r, t)),
+    [H]
+  ), pe = A(
+    () => Fe(i, b, x),
+    [i, b, x]
+  ), J = A(
+    () => Ie(U, x),
+    [U, x]
+  ), Q = Se[b], O = I != null, ke = G ? "Bear-Calendar Bear-Calendar--inline bear-block bear-w-full bear-bg-white dark:bear-bg-zinc-900 bear-rounded-xl bear-shadow-none bear-border bear-border-zinc-200 dark:bear-border-zinc-700 bear-p-4 bear-text-zinc-900 dark:bear-text-zinc-100" : "Bear-Calendar Bear-Calendar--dropdown bear-mt-2 bear-bg-white dark:bear-bg-zinc-900 bear-rounded-xl bear-shadow-xl bear-border bear-border-zinc-200 dark:bear-border-zinc-700 bear-p-4 bear-w-80 bear-text-zinc-900 dark:bear-text-zinc-100", $ = G ? void 0 : { zIndex: Me }, xe = () => {
     if (e.header)
-      return e.header({ month: X, year: i, onPrev: D, onNext: w, nav: ce });
-    const a = e.navPrevYear, r = e.navPrev, o = e.navNext, c = e.navNextYear, f = e.headerLabel || He;
-    return /* @__PURE__ */ s("div", { className: "Bear-Calendar__header bear-flex bear-items-center bear-justify-between bear-gap-1 bear-mb-4", children: [
-      /* @__PURE__ */ s("div", { className: "Bear-Calendar__nav-left bear-flex bear-items-center bear-gap-0.5", children: [
-        a ? a({ onClick: B }) : /* @__PURE__ */ t(
+      return e.header({ month: Q, year: i, onPrev: w, onNext: D, nav: ue });
+    const t = e.navPrevYear, r = e.navPrev, o = e.navNext, s = e.navNextYear, f = e.headerLabel || He;
+    return /* @__PURE__ */ c("div", { className: "Bear-Calendar__header bear-flex bear-items-center bear-justify-between bear-gap-1 bear-mb-4", children: [
+      /* @__PURE__ */ c("div", { className: "Bear-Calendar__nav-left bear-flex bear-items-center bear-gap-0.5", children: [
+        t ? t({ onClick: B }) : /* @__PURE__ */ a(
           "button",
           {
             type: "button",
             onClick: B,
             className: "Bear-Calendar__nav-btn bear-p-1.5 bear-rounded bear-text-zinc-500 dark:bear-text-zinc-400 hover:bear-bg-zinc-100 dark:hover:bear-bg-zinc-800 bear-transition-colors",
             "aria-label": "Previous year",
-            children: /* @__PURE__ */ t(Oe, { size: 16 })
+            children: /* @__PURE__ */ a(Pe, { size: 16 })
           }
         ),
-        r ? r({ onClick: D }) : /* @__PURE__ */ t(
+        r ? r({ onClick: w }) : /* @__PURE__ */ a(
           "button",
           {
             type: "button",
-            onClick: D,
+            onClick: w,
             className: "Bear-Calendar__nav-btn bear-p-1.5 bear-rounded bear-text-zinc-500 dark:bear-text-zinc-400 hover:bear-bg-zinc-100 dark:hover:bear-bg-zinc-800 bear-transition-colors",
             "aria-label": "Previous month",
-            children: /* @__PURE__ */ t(Te, { size: 16 })
+            children: /* @__PURE__ */ a(Le, { size: 16 })
           }
         )
       ] }),
-      f({ month: X, year: i }),
-      /* @__PURE__ */ s("div", { className: "Bear-Calendar__nav-right bear-flex bear-items-center bear-gap-0.5", children: [
-        o ? o({ onClick: w }) : /* @__PURE__ */ t(
+      f({ month: Q, year: i }),
+      /* @__PURE__ */ c("div", { className: "Bear-Calendar__nav-right bear-flex bear-items-center bear-gap-0.5", children: [
+        o ? o({ onClick: D }) : /* @__PURE__ */ a(
           "button",
           {
             type: "button",
-            onClick: w,
+            onClick: D,
             className: "Bear-Calendar__nav-btn bear-p-1.5 bear-rounded bear-text-zinc-500 dark:bear-text-zinc-400 hover:bear-bg-zinc-100 dark:hover:bear-bg-zinc-800 bear-transition-colors",
             "aria-label": "Next month",
-            children: /* @__PURE__ */ t(Pe, { size: 16 })
+            children: /* @__PURE__ */ a(Re, { size: 16 })
           }
         ),
-        c ? c({ onClick: E }) : /* @__PURE__ */ t(
+        s ? s({ onClick: E }) : /* @__PURE__ */ a(
           "button",
           {
             type: "button",
             onClick: E,
             className: "Bear-Calendar__nav-btn bear-p-1.5 bear-rounded bear-text-zinc-500 dark:bear-text-zinc-400 hover:bear-bg-zinc-100 dark:hover:bear-bg-zinc-800 bear-transition-colors",
             "aria-label": "Next year",
-            children: /* @__PURE__ */ t(Le, { size: 16 })
+            children: /* @__PURE__ */ a(Ye, { size: 16 })
           }
         )
       ] })
     ] });
-  }, ye = () => {
-    if (e.weekdays) return e.weekdays({ days: K });
-    const a = e.weekday;
-    return /* @__PURE__ */ t("div", { className: "Bear-Calendar__weekdays bear-grid bear-grid-cols-7 bear-gap-1 bear-mb-2", children: K.map(
-      (r) => a ? /* @__PURE__ */ t("div", { children: a({ label: r }) }, r) : /* @__PURE__ */ t(
+  }, fe = () => {
+    if (e.weekdays) return e.weekdays({ days: J });
+    const t = e.weekday;
+    return /* @__PURE__ */ a("div", { className: "Bear-Calendar__weekdays bear-grid bear-grid-cols-7 bear-gap-1 bear-mb-2", children: J.map(
+      (r) => t ? /* @__PURE__ */ a("div", { children: t({ label: r }) }, r) : /* @__PURE__ */ a(
         "div",
         {
-          className: R(
+          className: M(
             "Bear-Calendar__weekday bear-text-center bear-text-xs bear-font-medium bear-uppercase bear-text-zinc-500 dark:bear-text-zinc-400",
             We.includes(r) && "bear-text-red-500"
           ),
@@ -131,78 +131,88 @@ const sr = (A) => {
         r
       )
     ) });
-  }, ve = (a, r) => {
-    const { date: o, isCurrentMonth: c } = a, f = o.getDate(), _e = o.getDay(), Ce = je(_e), p = _(S, o), P = _(de, o), N = se(o), re = le(o), ae = () => {
+  }, Ne = (t, r) => {
+    const { date: o, isCurrentMonth: s } = t, f = o.getDate(), ge = o.getDay(), Be = je(ge), k = _(I, o), Y = _(he, o), N = ye(o), te = ve(o), ne = () => {
       N || C == null || C(o);
-    }, ze = {
+    }, Ee = {
       date: o,
       day: f,
-      isCurrentMonth: c,
-      isSelected: p,
-      isToday: P,
+      isCurrentMonth: s,
+      isSelected: k,
+      isToday: Y,
       isDisabled: N,
-      isHighlighted: re,
-      onClick: ae
+      isHighlighted: te,
+      onClick: ne
     };
-    return e.day ? /* @__PURE__ */ t("span", { children: e.day(ze) }, r) : /* @__PURE__ */ t(
+    return e.day ? /* @__PURE__ */ a("span", { children: e.day(Ee) }, r) : /* @__PURE__ */ a(
       "button",
       {
         type: "button",
-        onClick: ae,
+        onClick: ne,
         disabled: N,
-        className: R(
+        className: M(
           "Bear-Calendar__day bear-w-8 bear-h-8 bear-rounded-full bear-text-sm bear-font-medium bear-transition-colors bear-flex bear-items-center bear-justify-center",
-          p && "Bear-Calendar__day--selected bear-bg-primary-500 bear-text-white hover:bear-bg-primary-600",
-          !p && P && "Bear-Calendar__day--today bear-ring-2 bear-ring-primary-500/50 bear-bg-transparent",
-          !p && !P && (c ? Ce ? "Bear-Calendar__day--weekend bear-text-red-500 dark:bear-text-red-400 hover:bear-bg-zinc-100 dark:hover:bear-bg-zinc-800" : "bear-text-zinc-700 dark:bear-text-zinc-300 hover:bear-bg-zinc-100 dark:hover:bear-bg-zinc-800" : "Bear-Calendar__day--other bear-text-zinc-500 dark:bear-text-zinc-600 hover:bear-bg-zinc-50 dark:hover:bear-bg-zinc-800/50"),
-          re && !p && "Bear-Calendar__day--highlighted bear-bg-primary-500/15",
+          k && "Bear-Calendar__day--selected bear-bg-primary-500 bear-text-white hover:bear-bg-primary-600",
+          !k && Y && "Bear-Calendar__day--today bear-ring-2 bear-ring-primary-500/50 bear-bg-transparent",
+          !k && !Y && (s ? Be ? "Bear-Calendar__day--weekend bear-text-red-500 dark:bear-text-red-400 hover:bear-bg-zinc-100 dark:hover:bear-bg-zinc-800" : "bear-text-zinc-700 dark:bear-text-zinc-300 hover:bear-bg-zinc-100 dark:hover:bear-bg-zinc-800" : "Bear-Calendar__day--other bear-text-zinc-500 dark:bear-text-zinc-600 hover:bear-bg-zinc-50 dark:hover:bear-bg-zinc-800/50"),
+          te && !k && "Bear-Calendar__day--highlighted bear-bg-primary-500/15",
           N && "Bear-Calendar__day--disabled bear-opacity-40 bear-cursor-not-allowed"
         ),
         children: f
       },
       r
     );
-  }, pe = () => {
-    const a = me.map((r, o) => ve(r, o));
-    return e.daysGrid ? e.daysGrid({ children: a, className: "Bear-Calendar__grid bear-grid bear-grid-cols-7 bear-gap-1" }) : /* @__PURE__ */ t("div", { className: "Bear-Calendar__grid bear-grid bear-grid-cols-7 bear-gap-1", children: a });
-  }, ke = () => {
-    const a = te && O && h, r = ne && u;
-    if (!a && !r) return null;
+  }, _e = () => {
+    const t = pe.map((r, o) => Ne(r, o));
+    return e.daysGrid ? e.daysGrid({ children: t, className: "Bear-Calendar__grid bear-grid bear-grid-cols-7 bear-gap-1" }) : /* @__PURE__ */ a("div", { className: "Bear-Calendar__grid bear-grid bear-grid-cols-7 bear-gap-1", children: t });
+  }, Ce = () => {
+    const t = de && O && h, r = se && u;
+    if (!t && !r) return null;
     if (e.footer) {
-      const o = e.clearButton, c = e.todayButton;
+      const o = e.clearButton, s = e.todayButton;
       return e.footer({
-        children: /* @__PURE__ */ s("div", { className: "Bear-Calendar__footer bear-flex bear-justify-between bear-gap-2 bear-mt-4 bear-pt-3 bear-border-t bear-border-zinc-200 dark:bear-border-zinc-700", children: [
-          a && o ? o({ onClick: h, hasSelection: O }) : a ? /* @__PURE__ */ t("button", { type: "button", onClick: h, className: "Bear-Calendar__clear-btn bear-text-sm bear-text-zinc-500 dark:bear-text-zinc-400 hover:bear-text-zinc-700 dark:hover:bear-text-zinc-200 bear-transition-colors", children: "Clear" }) : /* @__PURE__ */ t("span", {}),
-          r && c ? c({ onClick: u }) : r ? /* @__PURE__ */ t("button", { type: "button", onClick: u, className: "Bear-Calendar__today-btn bear-text-sm bear-text-primary-600 dark:bear-text-primary-400 hover:bear-text-primary-700 dark:hover:bear-text-primary-300 bear-font-medium", children: "Today" }) : null
+        children: /* @__PURE__ */ c("div", { className: "Bear-Calendar__footer bear-flex bear-justify-between bear-gap-2 bear-mt-4 bear-pt-3 bear-border-t bear-border-zinc-200 dark:bear-border-zinc-700", children: [
+          t && o ? o({ onClick: h, hasSelection: O }) : t ? /* @__PURE__ */ a("button", { type: "button", onClick: h, className: "Bear-Calendar__clear-btn bear-text-sm bear-text-zinc-500 dark:bear-text-zinc-400 hover:bear-text-zinc-700 dark:hover:bear-text-zinc-200 bear-transition-colors", children: "Clear" }) : /* @__PURE__ */ a("span", {}),
+          r && s ? s({ onClick: u }) : r ? /* @__PURE__ */ a("button", { type: "button", onClick: u, className: "Bear-Calendar__today-btn bear-text-sm bear-text-primary-600 dark:bear-text-primary-400 hover:bear-text-primary-700 dark:hover:bear-text-primary-300 bear-font-medium", children: "Today" }) : null
         ] })
       });
     }
-    return e.clearButton && e.todayButton ? /* @__PURE__ */ s("div", { className: "Bear-Calendar__footer bear-flex bear-justify-between bear-gap-2 bear-mt-4 bear-pt-3 bear-border-t bear-border-zinc-200 dark:bear-border-zinc-700", children: [
-      a && e.clearButton({ onClick: h, hasSelection: O }),
+    return e.clearButton && e.todayButton ? /* @__PURE__ */ c("div", { className: "Bear-Calendar__footer bear-flex bear-justify-between bear-gap-2 bear-mt-4 bear-pt-3 bear-border-t bear-border-zinc-200 dark:bear-border-zinc-700", children: [
+      t && e.clearButton({ onClick: h, hasSelection: O }),
       r && e.todayButton({ onClick: u })
-    ] }) : /* @__PURE__ */ s("div", { className: "Bear-Calendar__footer bear-flex bear-justify-between bear-gap-2 bear-mt-4 bear-pt-3 bear-border-t bear-border-zinc-200 dark:bear-border-zinc-700", children: [
-      a ? /* @__PURE__ */ t("button", { type: "button", onClick: h, className: "Bear-Calendar__clear-btn bear-text-sm bear-text-zinc-500 dark:bear-text-zinc-400 hover:bear-text-zinc-700 dark:hover:bear-text-zinc-200 bear-transition-colors", children: "Clear" }) : /* @__PURE__ */ t("span", {}),
-      r ? /* @__PURE__ */ t("button", { type: "button", onClick: u, className: "Bear-Calendar__today-btn bear-text-sm bear-text-primary-400 hover:bear-text-primary-300 bear-font-medium bear-transition-colors", children: "Today" }) : null
+    ] }) : /* @__PURE__ */ c("div", { className: "Bear-Calendar__footer bear-flex bear-justify-between bear-gap-2 bear-mt-4 bear-pt-3 bear-border-t bear-border-zinc-200 dark:bear-border-zinc-700", children: [
+      t ? /* @__PURE__ */ a("button", { type: "button", onClick: h, className: "Bear-Calendar__clear-btn bear-text-sm bear-text-zinc-500 dark:bear-text-zinc-400 hover:bear-text-zinc-700 dark:hover:bear-text-zinc-200 bear-transition-colors", children: "Clear" }) : /* @__PURE__ */ a("span", {}),
+      r ? /* @__PURE__ */ a("button", { type: "button", onClick: u, className: "Bear-Calendar__today-btn bear-text-sm bear-text-primary-400 hover:bear-text-primary-300 bear-font-medium bear-transition-colors", children: "Today" }) : null
     ] });
-  }, J = /* @__PURE__ */ s(ge, { children: [
-    ue(),
-    ye(),
-    pe(),
-    ke()
-  ] }), Q = R(he, be), $ = Object.keys(U).length ? U : void 0, xe = q ? { ...$, ...q } : $, T = e.root ? e.root({ children: J, className: Q }) : /* @__PURE__ */ t("div", { className: Q, style: xe, children: J }), fe = H !== void 0, x = H ?? Ee;
-  if (!(fe && (y !== l || v !== l)))
-    return T;
-  const V = x ? y : v, ee = V === l ? y === l ? v === l ? void 0 : Y[v] : Y[y] : Y[V], Ne = x && y === l || !x && v === l;
-  return ee ? /* @__PURE__ */ t(
-    Re,
+  }, T = /* @__PURE__ */ c(we, { children: [
+    xe(),
+    fe(),
+    _e(),
+    Ce()
+  ] }), P = M(ke, me), V = Object.keys(K).length ? K : void 0, ee = $ ? { ...V, ...$ } : V, L = e.root ? e.root({ children: T, className: P }) : /* @__PURE__ */ a("div", { className: P, style: ee, children: T }), ze = Z !== void 0, p = Z ?? De;
+  if (!(ze && (y !== l || v !== l)))
+    return L;
+  const re = p ? y : v, R = re === l ? y === l ? v === l ? void 0 : S[v] : S[y] : S[re], ae = p && y === l || !p && v === l;
+  return R ? e.root ? /* @__PURE__ */ a(
+    ie,
+    {
+      show: p,
+      name: R,
+      duration: ae ? oe : be,
+      children: L
+    }
+  ) : /* @__PURE__ */ a(
+    ie,
     {
-      show: x,
-      name: ee,
-      duration: Ne ? Be : Ye,
+      show: p,
+      name: R,
+      duration: ae ? oe : be,
+      className: P,
+      style: ee,
       children: T
     }
-  ) : T;
+  ) : L;
 };
 export {
-  sr as Calendar
+  cr as Calendar
 };

package/dist/components/Chart/BarChart.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("../../constants/numbers.const.cjs"),p=require("../../utils/cn.cjs");require("react");const V=require("../../utils/generateBearId.utils.cjs"),w=require("../../utils/useBearId.cjs"),c=require("./Chart.const.cjs"),x=require("./Chart.utils.cjs"),z=g=>{const{data:i,height:m=c.CHART.DEFAULT_HEIGHT,showLabels:h=!0,showValues:v=!1,animated:R=!0,color:$,orientation:b="vertical",barRadius:r=c.CHART.DEFAULT_BAR_RADIUS,barGap:A=c.CHART.DEFAULT_BAR_GAP,stacked:l=!1,className:E,id:N,testId:j,...T}=g,O=w.useBearId("BarChart"),k=V.resolveBearId(N,O),d=i.map(a=>x.getStackTotal(a.stacks,a.value)),q=Math.max(...d,s.ONE),t=b==="vertical",y={"--Bear-Chart-height":`${m}px`,"--Bear-Chart-gap":`${A}rem`};return e.jsx("div",{id:k,"data-testid":j,className:p.cn("Bear-Chart Bear-Chart--bar",t?"Bear-Chart--vertical":"Bear-Chart--horizontal",E),style:y,...T,children:e.jsx("div",{className:"Bear-Chart__track",children:i.map((a,u)=>{const C=l&&a.stacks&&a.stacks.length>s.ZERO?a.stacks:[a.value],o=d[u],I={"--Bear-Chart-size":`${o/q*c.CHART.VIEWBOX}%`};return e.jsxs("div",{className:"Bear-Chart__col",children:[h&&!t&&e.jsx("span",{className:"Bear-Chart__label",children:a.label}),e.jsx("div",{className:"Bear-Chart__plot",children:e.jsx("div",{className:p.cn("Bear-Chart__stack",R&&(t?"animate-grow-up":"animate-grow-right")),style:I,children:C.map((H,n)=>{const S=o>s.ZERO?H/o*c.CHART.VIEWBOX:s.ZERO,L=n===s.ZERO,B=n===C.length-s.ONE,_=l?t?B?`${r}px ${r}px 0 0`:"0":B?`0 ${r}px ${r}px 0`:"0":t?`${r}px ${r}px 0 0`:`0 ${r}px ${r}px 0`,P={"--Bear-Chart-segment":`${S}%`,"--Bear-Chart-color":x.getChartColor(l?n:u,a.color||$),"--Bear-Chart-radius":_};return e.jsx("div",{className:"Bear-Chart__segment",style:P},`${a.label}-${n}`)})})}),v&&e.jsx("span",{className:"Bear-Chart__value",children:o}),h&&t&&e.jsx("span",{className:"Bear-Chart__label",children:a.label})]},a.label)})})})};exports.BarChart=z;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("../../constants/numbers.const.cjs"),m=require("../../utils/cn.cjs");require("react");const w=require("../../utils/generateBearId.utils.cjs"),z=require("../../utils/useBearId.cjs"),c=require("./Chart.const.cjs"),i=require("./Chart.utils.cjs"),D=x=>{const{data:h,height:g=c.CHART.DEFAULT_HEIGHT,showLabels:d=!0,showValues:v=!1,animated:R=!0,motion:$,color:b,orientation:A="vertical",barRadius:r=c.CHART.DEFAULT_BAR_RADIUS,barGap:E=c.CHART.DEFAULT_BAR_GAP,stacked:l=!1,className:N,id:j,testId:T,...O}=x,k=z.useBearId("BarChart"),q=w.resolveBearId(j,k),u=h.map(a=>i.getStackTotal(a.stacks,a.value)),y=Math.max(...u,s.ONE),t=A==="vertical",I={"--Bear-Chart-height":`${g}px`,"--Bear-Chart-gap":`${E}rem`};return e.jsx("div",{id:q,"data-testid":T,className:m.cn("Bear-Chart Bear-Chart--bar",t?"Bear-Chart--vertical":"Bear-Chart--horizontal",N),style:I,...O,children:e.jsx("div",{className:"Bear-Chart__track",children:h.map((a,C)=>{const B=l&&a.stacks&&a.stacks.length>s.ZERO?a.stacks:[a.value],o=u[C],H={"--Bear-Chart-size":`${o/y*c.CHART.VIEWBOX}%`};return e.jsxs("div",{className:"Bear-Chart__col",children:[d&&!t&&e.jsx("span",{className:"Bear-Chart__label",children:a.label}),e.jsx("div",{className:"Bear-Chart__plot",children:e.jsx("div",{className:m.cn("Bear-Chart__stack",i.chartMotionClass(R,$,t?"animate-grow-up":"animate-grow-right")),style:H,children:B.map((S,n)=>{const L=o>s.ZERO?S/o*c.CHART.VIEWBOX:s.ZERO,P=n===s.ZERO,_=n===B.length-s.ONE,p=l?t?_?`${r}px ${r}px 0 0`:"0":_?`0 ${r}px ${r}px 0`:"0":t?`${r}px ${r}px 0 0`:`0 ${r}px ${r}px 0`,V={"--Bear-Chart-segment":`${L}%`,"--Bear-Chart-color":i.getChartColor(l?n:C,a.color||b),"--Bear-Chart-radius":p};return e.jsx("div",{className:"Bear-Chart__segment",style:V},`${a.label}-${n}`)})})}),v&&e.jsx("span",{className:"Bear-Chart__value",children:o}),d&&t&&e.jsx("span",{className:"Bear-Chart__label",children:a.label})]},a.label)})})})};exports.BarChart=D;

package/dist/components/Chart/BarChart.js

@@ -1,65 +1,66 @@
-import { jsx as t, jsxs as F } from "react/jsx-runtime";
+import { jsx as t, jsxs as O } from "react/jsx-runtime";
 import { ONE as _, ZERO as h } from "../../constants/numbers.const.js";
 import { cn as u } from "../../utils/cn.js";
 import "react";
-import { resolveBearId as O } from "../../utils/generateBearId.utils.js";
-import { useBearId as P } from "../../utils/useBearId.js";
-import { CHART as s } from "./Chart.const.js";
-import { getStackTotal as U, getChartColor as G } from "./Chart.utils.js";
-const Q = ($) => {
+import { resolveBearId as P } from "../../utils/generateBearId.utils.js";
+import { useBearId as U } from "../../utils/useBearId.js";
+import { CHART as e } from "./Chart.const.js";
+import { getStackTotal as G, getChartColor as H, chartMotionClass as j } from "./Chart.utils.js";
+const aa = ($) => {
   const {
     data: n,
-    height: g = s.DEFAULT_HEIGHT,
+    height: g = e.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,
+    motion: b,
+    color: x,
+    orientation: f = "vertical",
+    barRadius: r = e.DEFAULT_BAR_RADIUS,
+    barGap: k = e.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 = {
+    className: A,
+    id: E,
+    testId: y,
+    ...I
+  } = $, R = U("BarChart"), T = P(E, R), m = n.map((a) => G(a.stacks, a.value)), L = Math.max(...m, _), s = f === "vertical", S = {
     "--Bear-Chart-height": `${g}px`,
-    "--Bear-Chart-gap": `${f}rem`
+    "--Bear-Chart-gap": `${k}rem`
   };
   return /* @__PURE__ */ t(
     "div",
     {
-      id: R,
-      "data-testid": E,
+      id: T,
+      "data-testid": y,
       className: u(
         "Bear-Chart Bear-Chart--bar",
-        e ? "Bear-Chart--vertical" : "Bear-Chart--horizontal",
-        k
+        s ? "Bear-Chart--vertical" : "Bear-Chart--horizontal",
+        A
       ),
-      style: L,
-      ...y,
+      style: S,
+      ...I,
       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}%`
+        const d = l && a.stacks && a.stacks.length > h ? a.stacks : [a.value], o = m[p], V = {
+          "--Bear-Chart-size": `${o / L * e.VIEWBOX}%`
         };
-        return /* @__PURE__ */ F("div", { className: "Bear-Chart__col", children: [
-          i && !e && /* @__PURE__ */ t("span", { className: "Bear-Chart__label", children: a.label }),
+        return /* @__PURE__ */ O("div", { className: "Bear-Chart__col", children: [
+          i && !s && /* @__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),
+              className: u("Bear-Chart__stack", j(N, b, s ? "animate-grow-up" : "animate-grow-right")),
+              style: V,
+              children: d.map((w, c) => {
+                const z = o > h ? w / o * e.VIEWBOX : h, D = c === h, B = c === d.length - _, C = l ? s ? B ? `${r}px ${r}px 0 0` : "0" : B ? `0 ${r}px ${r}px 0` : "0" : s ? `${r}px ${r}px 0 0` : `0 ${r}px ${r}px 0`, F = {
+                  "--Bear-Chart-segment": `${z}%`,
+                  "--Bear-Chart-color": H(l ? c : p, a.color || x),
                   "--Bear-Chart-radius": C
                 };
                 return /* @__PURE__ */ t(
                   "div",
                   {
                     className: "Bear-Chart__segment",
-                    style: D
+                    style: F
                   },
                   `${a.label}-${c}`
                 );
@@ -67,12 +68,12 @@ const Q = ($) => {
             }
           ) }),
           v && /* @__PURE__ */ t("span", { className: "Bear-Chart__value", children: o }),
-          i && e && /* @__PURE__ */ t("span", { className: "Bear-Chart__label", children: a.label })
+          i && s && /* @__PURE__ */ t("span", { className: "Bear-Chart__label", children: a.label })
         ] }, a.label);
       }) })
     }
   );
 };
 export {
-  Q as BarChart
+  aa as BarChart
 };

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

@@ -2,6 +2,7 @@ import { HTMLAttributes, ReactNode } from 'react';
 export type ChartType = 'bar' | 'line' | 'area' | 'pie' | 'donut' | 'radar' | 'funnel' | 'stacked';
 export type PieView = 'full' | 'half' | 'rose';
 export type ChartLegendPosition = 'right' | 'bottom' | 'none';
+export type ChartMotion = 'grow' | 'fade' | 'scale' | 'none';
 export interface ChartDataPoint {
     label: string;
     value: number;
@@ -16,6 +17,7 @@ export interface ChartProps extends Omit<HTMLAttributes<HTMLDivElement>, 'childr
     showLabels?: boolean;
     showValues?: boolean;
     animated?: boolean;
+    motion?: ChartMotion;
     color?: string;
     showGrid?: boolean;
     pieView?: PieView;

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

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

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

@@ -1,3 +1,5 @@
+import { ChartMotion } from './Chart.types';
+export declare const chartMotionClass: (animated: boolean, motion: ChartMotion | undefined, fallback: string) => string;
 export declare const getChartColor: (index: number, customColor?: string) => string;
 export declare const polarToCartesian: (angle: number, radius: number, center?: number) => {
     x: number;

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

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

package/dist/components/Chart/FunnelChart.cjs

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