@forgedevstack/bear 1.3.0 → 1.3.2

package/dist/components/Calendar/Calendar.js

@@ -1,189 +1,208 @@
-import { jsxs as s, Fragment as ue, jsx as t } from "react/jsx-runtime";
-import { useMemo as D, useCallback as l } from "react";
-import { cn as E } from "../../utils/cn.js";
-import { useBearStyles as ye } from "../../hooks/useBearStyles.js";
+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 "../../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 "../FormControl/FormControl.context.js";
-import { ChevronsLeftIcon as xe, ChevronLeftIcon as ke, ChevronRightIcon as ve, ChevronsRightIcon as pe } from "../Icon/index.js";
-import { DEFAULT_WEEKDAYS as ze, NUMBER as i, CALENDAR_DROPDOWN_Z_INDEX as Ce, MONTHS as _e, WEEKEND_LABELS as ge } from "./Calendar.const.js";
-import { isSameDay as v, buildCalendarGrid as Ne, reorderWeekdays as fe, isWeekendDay as Be } from "./Calendar.utils.js";
-import { DefaultHeaderLabel as we } from "./Calendar.helpers.js";
-const Ae = (Z) => {
+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 { 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 {
-    viewDate: O,
-    value: P = null,
-    onSelect: p,
+    viewDate: M,
+    value: S = null,
+    onSelect: C,
     onViewChange: n,
     minDate: z,
-    maxDate: C,
-    disabledDates: L = [],
-    highlightedDates: W = [],
-    weekdayLabels: S = ze,
-    firstDayOfWeek: y = i.ZERO,
-    showWeekNumbers: De = !1,
+    maxDate: g,
+    disabledDates: W = [],
+    highlightedDates: F = [],
+    weekdayLabels: I = Ae,
+    firstDayOfWeek: k = d.ZERO,
+    showWeekNumbers: Ue = !1,
     slots: e = {},
-    clearable: X = !0,
+    clearable: te = !0,
     onClear: h,
-    showTodayButton: q = !0,
-    onToday: m,
-    bis: J,
-    style: Q,
-    inline: Y = !1,
-    className: $
-  } = Z, b = O.getFullYear(), M = ye(J, Q), d = O.getMonth(), V = D(() => /* @__PURE__ */ new Date(), []), _ = l(() => {
-    n == null || n(new Date(b - i.ONE, d, i.ONE));
-  }, [b, d, n]), T = l(() => {
-    n == null || n(new Date(b, d - i.ONE, i.ONE));
-  }, [b, d, n]), j = l(() => {
-    n == null || n(new Date(b, d + i.ONE, i.ONE));
-  }, [b, d, n]), g = l(() => {
-    n == null || n(new Date(b + i.ONE, d, i.ONE));
-  }, [b, d, n]), N = T, f = j, ee = {
-    onPrevYear: _,
-    onPrevMonth: T,
-    onNextMonth: j,
-    onNextYear: g
-  }, re = l(
-    (a) => z && a < z || C && a > C ? !0 : L.some((r) => v(r, a)),
-    [z, C, L]
-  ), ae = l(
-    (a) => W.some((r) => v(r, a)),
-    [W]
-  ), te = D(
-    () => Ne(b, d, y),
-    [b, d, y]
-  ), I = D(
-    () => fe(S, y),
-    [S, y]
-  ), R = _e[d], B = P != null, ne = Y ? "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", A = Y ? void 0 : { zIndex: Ce }, oe = () => {
+    showTodayButton: ne = !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(() => {
+    n == null || n(new Date(i - d.ONE, b, d.ONE));
+  }, [i, b, n]), G = m(() => {
+    n == null || n(new Date(i, b - d.ONE, d.ONE));
+  }, [i, b, n]), Z = 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 = {
+    onPrevYear: B,
+    onPrevMonth: G,
+    onNextMonth: Z,
+    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 = () => {
     if (e.header)
-      return e.header({ month: R, year: b, onPrev: N, onNext: f, nav: ee });
-    const a = e.navPrevYear, r = e.navPrev, o = e.navNext, c = e.navNextYear, x = e.headerLabel || we;
+      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: _ }) : /* @__PURE__ */ t(
+        a ? a({ onClick: B }) : /* @__PURE__ */ t(
           "button",
           {
             type: "button",
-            onClick: _,
+            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(xe, { size: 16 })
+            children: /* @__PURE__ */ t(Oe, { size: 16 })
           }
         ),
-        r ? r({ onClick: N }) : /* @__PURE__ */ t(
+        r ? r({ onClick: D }) : /* @__PURE__ */ t(
           "button",
           {
             type: "button",
-            onClick: N,
+            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": "Previous month",
-            children: /* @__PURE__ */ t(ke, { size: 16 })
+            children: /* @__PURE__ */ t(Te, { size: 16 })
           }
         )
       ] }),
-      x({ month: R, year: b }),
+      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: f }) : /* @__PURE__ */ t(
+        o ? o({ onClick: w }) : /* @__PURE__ */ t(
           "button",
           {
             type: "button",
-            onClick: f,
+            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": "Next month",
-            children: /* @__PURE__ */ t(ve, { size: 16 })
+            children: /* @__PURE__ */ t(Pe, { size: 16 })
           }
         ),
-        c ? c({ onClick: g }) : /* @__PURE__ */ t(
+        c ? c({ onClick: E }) : /* @__PURE__ */ t(
           "button",
           {
             type: "button",
-            onClick: g,
+            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(pe, { size: 16 })
+            children: /* @__PURE__ */ t(Le, { size: 16 })
           }
         )
       ] })
     ] });
-  }, be = () => {
-    if (e.weekdays) return e.weekdays({ days: I });
+  }, 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: I.map(
+    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(
         "div",
         {
-          className: E(
+          className: R(
             "Bear-Calendar__weekday bear-text-center bear-text-xs bear-font-medium bear-uppercase bear-text-zinc-500 dark:bear-text-zinc-400",
-            ge.includes(r) && "bear-text-red-500"
+            We.includes(r) && "bear-text-red-500"
           ),
           children: r
         },
         r
       )
     ) });
-  }, de = (a, r) => {
-    const { date: o, isCurrentMonth: c } = a, x = o.getDate(), le = o.getDay(), he = Be(le), u = v(P, o), w = v(V, o), k = re(o), K = ae(o), U = () => {
-      k || p == null || p(o);
-    }, me = {
+  }, 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 = () => {
+      N || C == null || C(o);
+    }, ze = {
       date: o,
-      day: x,
+      day: f,
       isCurrentMonth: c,
-      isSelected: u,
-      isToday: w,
-      isDisabled: k,
-      isHighlighted: K,
-      onClick: U
+      isSelected: p,
+      isToday: P,
+      isDisabled: N,
+      isHighlighted: re,
+      onClick: ae
     };
-    return e.day ? /* @__PURE__ */ t("span", { children: e.day(me) }, r) : /* @__PURE__ */ t(
+    return e.day ? /* @__PURE__ */ t("span", { children: e.day(ze) }, r) : /* @__PURE__ */ t(
       "button",
       {
         type: "button",
-        onClick: U,
-        disabled: k,
-        className: E(
+        onClick: ae,
+        disabled: N,
+        className: R(
           "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",
-          u && "Bear-Calendar__day--selected bear-bg-primary-500 bear-text-white hover:bear-bg-primary-600",
-          !u && w && "Bear-Calendar__day--today bear-ring-2 bear-ring-primary-500/50 bear-bg-transparent",
-          !u && !w && (c ? he ? "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"),
-          K && !u && "Bear-Calendar__day--highlighted bear-bg-primary-500/15",
-          k && "Bear-Calendar__day--disabled bear-opacity-40 bear-cursor-not-allowed"
+          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",
+          N && "Bear-Calendar__day--disabled bear-opacity-40 bear-cursor-not-allowed"
         ),
-        children: x
+        children: f
       },
       r
     );
-  }, ie = () => {
-    const a = te.map((r, o) => de(r, o));
+  }, 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 });
-  }, ce = () => {
-    const a = X && B && h, r = q && m;
+  }, ke = () => {
+    const a = te && O && h, r = ne && u;
     if (!a && !r) return null;
     if (e.footer) {
       const o = e.clearButton, c = 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: B }) : 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: m }) : r ? /* @__PURE__ */ t("button", { type: "button", onClick: m, 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
+          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
         ] })
       });
     }
     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: B }),
-      r && e.todayButton({ onClick: m })
+      a && 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: m, 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
+      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
     ] });
-  }, H = /* @__PURE__ */ s(ue, { children: [
-    oe(),
-    be(),
-    ie(),
-    ce()
-  ] }), F = E(ne, $), G = Object.keys(M).length ? M : void 0, se = A ? { ...G, ...A } : G;
-  return e.root ? e.root({ children: H, className: F }) : /* @__PURE__ */ t("div", { className: F, style: se, children: H });
+  }, 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,
+    {
+      show: x,
+      name: ee,
+      duration: Ne ? Be : Ye,
+      children: T
+    }
+  ) : T;
 };
 export {
-  Ae as Calendar
+  sr as Calendar
 };

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

@@ -1,4 +1,6 @@
-import { ReactNode } from 'react';
+import { CSSProperties, ReactNode } from 'react';
+import { BisProp } from '../../types';
+import { OverlayEffectProps } from '../../hooks/useFixedAnchorPosition';
 export interface CalendarDayProps {
     testId?: string;
     date: Date;
@@ -93,7 +95,7 @@ export interface CalendarSlots {
         onClick: () => void;
     }) => ReactNode;
 }
-export interface CalendarProps {
+export interface CalendarProps extends OverlayEffectProps {
     /** Currently viewed month (controls calendar view) */
     viewDate: Date;
     /** Selected date */
@@ -119,11 +121,9 @@ export interface CalendarProps {
     /** Show Today button in footer */
     showTodayButton?: boolean;
     onToday?: () => void;
-    /** Bear Inner Style - sx-like overrides */
-    bis?: import('../../types/bis.types').BisProp;
-    /** Inline styles */
-    style?: React.CSSProperties;
-    /** When true, render as block (no absolute). Use when embedding in DateTimePicker etc. */
+    bis?: BisProp;
+    style?: CSSProperties;
     inline?: boolean;
     className?: string;
+    open?: boolean;
 }

package/dist/components/Chart/BarChart.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),n=require("../../utils/cn.cjs");require("react");const f=require("./Chart.utils.cjs"),v=({data:s,height:m=200,showLabels:x=!0,showValues:i=!1,animated:o=!0,color:u,orientation:g="vertical",barRadius:a=4,barGap:d=.2,className:p,...j})=>{const h=Math.max(...s.map(t=>t.value));return e.jsx("div",{className:n.cn("w-full",p),style:{height:m},...j,children:g==="vertical"?e.jsx("div",{className:"flex items-end justify-between h-full",style:{gap:`${d}rem`},children:s.map((t,l)=>{const r=t.value/h*100,c=f.getChartColor(l,t.color||u);return e.jsxs("div",{className:"flex-1 flex flex-col items-center gap-1",children:[e.jsx("div",{className:"w-full flex-1 flex items-end",children:e.jsx("div",{className:n.cn("w-full transition-all duration-500 ease-out",o&&"animate-grow-up"),style:{height:`${r}%`,backgroundColor:c,borderRadius:`${a}px ${a}px 0 0`,opacity:.9}})}),i&&e.jsx("span",{className:"text-xs text-gray-500 dark:text-slate-400",children:t.value}),x&&e.jsx("span",{className:"text-xs text-gray-600 dark:text-slate-300 truncate max-w-full",children:t.label})]},l)})}):e.jsx("div",{className:"flex flex-col justify-between h-full",style:{gap:`${d}rem`},children:s.map((t,l)=>{const r=t.value/h*100,c=f.getChartColor(l,t.color||u);return e.jsxs("div",{className:"flex-1 flex items-center gap-2",children:[x&&e.jsx("span",{className:"text-xs text-gray-600 dark:text-slate-300 w-16 truncate",children:t.label}),e.jsx("div",{className:"flex-1 h-full flex items-center",children:e.jsx("div",{className:n.cn("h-3/4 transition-all duration-500 ease-out",o&&"animate-grow-right"),style:{width:`${r}%`,backgroundColor:c,borderRadius:`0 ${a}px ${a}px 0`,opacity:.9}})}),i&&e.jsx("span",{className:"text-xs text-gray-500 dark:text-slate-400 w-10 text-right",children:t.value})]},l)})})})};exports.BarChart=v;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),s=require("../../constants/numbers.const.cjs"),l=require("../../utils/cn.cjs");require("react");const c=require("./Chart.const.cjs"),m=require("./Chart.utils.cjs"),B=w=>{const{data:o,height:R=c.CHART.DEFAULT_HEIGHT,showLabels:x=!0,showValues:C=!1,animated:$=!0,color:j,orientation:v="vertical",barRadius:t=c.CHART.DEFAULT_BAR_RADIUS,barGap:y=c.CHART.DEFAULT_BAR_GAP,stacked:b=!1,className:A,...E}=w,u=o.map(a=>m.getStackTotal(a.stacks,a.value)),N=Math.max(...u,s.ONE),e=v==="vertical";return r.jsx("div",{className:l.cn("Bear-Chart Bear-Chart--bar bear-w-full",A),style:{height:R},...E,children:r.jsx("div",{className:l.cn("bear-h-full",e?"bear-flex bear-items-end bear-justify-between":"bear-flex bear-flex-col bear-justify-between"),style:{gap:`${y}rem`},children:o.map((a,h)=>{const d=b&&a.stacks&&a.stacks.length>s.ZERO?a.stacks:[a.value],n=u[h],f=n/N*c.CHART.VIEWBOX;return r.jsxs("div",{className:l.cn(e?"bear-flex-1 bear-flex bear-flex-col bear-items-center bear-gap-1":"bear-flex-1 bear-flex bear-items-center bear-gap-2"),children:[x&&!e&&r.jsx("span",{className:"bear-w-16 bear-truncate bear-text-xs bear-text-gray-600 dark:bear-text-slate-300",children:a.label}),r.jsx("div",{className:l.cn(e?"bear-w-full bear-flex-1 bear-flex bear-items-end":"bear-flex-1 bear-h-full bear-flex bear-items-center"),children:r.jsx("div",{className:l.cn("bear-flex",e?"bear-w-full bear-flex-col-reverse":"bear-h-3/4 bear-flex-row",$&&(e?"animate-grow-up":"animate-grow-right")),style:e?{height:`${f}%`}:{width:`${f}%`},children:d.map((T,i)=>{const k=n>s.ZERO?T/n*c.CHART.VIEWBOX:s.ZERO,O=i===s.ZERO,p=i===d.length-s.ONE,g=b?e?p?`${t}px ${t}px 0 0`:"0":p?`0 ${t}px ${t}px 0`:"0":e?`${t}px ${t}px 0 0`:`0 ${t}px ${t}px 0`;return r.jsx("div",{className:"bear-transition-all bear-duration-500 bear-ease-out",style:{[e?"height":"width"]:`${k}%`,[e?"width":"height"]:"100%",backgroundColor:m.getChartColor(b?i:h,a.color||j),borderRadius:g,opacity:.9}},`${a.label}-${i}`)})})}),C&&r.jsx("span",{className:"bear-text-xs bear-text-gray-500 dark:bear-text-slate-400",children:n}),x&&e&&r.jsx("span",{className:"bear-max-w-full bear-truncate bear-text-xs bear-text-gray-600 dark:bear-text-slate-300",children:a.label})]},a.label)})})})};exports.BarChart=B;

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

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

package/dist/components/Chart/BarChart.js

@@ -1,65 +1,85 @@
-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 V } from "react/jsx-runtime";
+import { ONE as g, ZERO as i } from "../../constants/numbers.const.js";
+import { cn as l } 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 { CHART as s } from "./Chart.const.js";
+import { getStackTotal as _, getChartColor as j } from "./Chart.utils.js";
+const P = (w) => {
+  const {
+    data: n,
+    height: $ = s.DEFAULT_HEIGHT,
+    showLabels: x = !0,
+    showValues: v = !1,
+    animated: N = !0,
+    color: k,
+    orientation: y = "vertical",
+    barRadius: r = s.DEFAULT_BAR_RADIUS,
+    barGap: A = s.DEFAULT_BAR_GAP,
+    stacked: b = !1,
+    className: E,
+    ...B
+  } = w, h = n.map((a) => _(a.stacks, a.value)), C = Math.max(...h, g), e = y === "vertical";
+  return /* @__PURE__ */ t("div", { className: l("Bear-Chart Bear-Chart--bar bear-w-full", E), style: { height: $ }, ...B, children: /* @__PURE__ */ t(
+    "div",
+    {
+      className: l("bear-h-full", e ? "bear-flex bear-items-end bear-justify-between" : "bear-flex bear-flex-col bear-justify-between"),
+      style: { gap: `${A}rem` },
+      children: n.map((a, f) => {
+        const d = b && a.stacks && a.stacks.length > i ? a.stacks : [a.value], c = h[f], p = c / C * s.VIEWBOX;
+        return /* @__PURE__ */ V(
+          "div",
+          {
+            className: l(
+              e ? "bear-flex-1 bear-flex bear-flex-col bear-items-center bear-gap-1" : "bear-flex-1 bear-flex bear-items-center bear-gap-2"
+            ),
+            children: [
+              x && !e && /* @__PURE__ */ t("span", { className: "bear-w-16 bear-truncate bear-text-xs bear-text-gray-600 dark:bear-text-slate-300", children: a.label }),
+              /* @__PURE__ */ t(
+                "div",
+                {
+                  className: l(
+                    e ? "bear-w-full bear-flex-1 bear-flex bear-items-end" : "bear-flex-1 bear-h-full bear-flex bear-items-center"
+                  ),
+                  children: /* @__PURE__ */ t(
+                    "div",
+                    {
+                      className: l(
+                        "bear-flex",
+                        e ? "bear-w-full bear-flex-col-reverse" : "bear-h-3/4 bear-flex-row",
+                        N && (e ? "animate-grow-up" : "animate-grow-right")
+                      ),
+                      style: e ? { height: `${p}%` } : { width: `${p}%` },
+                      children: d.map((R, o) => {
+                        const T = c > i ? R / c * s.VIEWBOX : i, L = o === i, m = o === d.length - g, u = b ? e ? m ? `${r}px ${r}px 0 0` : "0" : m ? `0 ${r}px ${r}px 0` : "0" : e ? `${r}px ${r}px 0 0` : `0 ${r}px ${r}px 0`;
+                        return /* @__PURE__ */ t(
+                          "div",
+                          {
+                            className: "bear-transition-all bear-duration-500 bear-ease-out",
+                            style: {
+                              [e ? "height" : "width"]: `${T}%`,
+                              [e ? "width" : "height"]: "100%",
+                              backgroundColor: j(b ? o : f, a.color || k),
+                              borderRadius: u,
+                              opacity: 0.9
+                            }
+                          },
+                          `${a.label}-${o}`
+                        );
+                      })
+                    }
+                  )
+                }
+              ),
+              v && /* @__PURE__ */ t("span", { className: "bear-text-xs bear-text-gray-500 dark:bear-text-slate-400", children: c }),
+              x && e && /* @__PURE__ */ t("span", { className: "bear-max-w-full bear-truncate bear-text-xs bear-text-gray-600 dark:bear-text-slate-300", children: a.label })
+            ]
+          },
+          a.label
+        );
+      })
+    }
+  ) });
 };
 export {
-  C as BarChart
+  P 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 e=require("react/jsx-runtime"),a=require("./BarChart.cjs"),C=require("./LineChart.cjs"),n=require("./PieChart.cjs"),i=require("./RadarChart.cjs"),A=require("./FunnelChart.cjs"),t=require("./Chart.const.cjs"),s={[t.CHART_TYPES.BAR]:r=>e.jsx(a.BarChart,{...r}),[t.CHART_TYPES.STACKED]:r=>e.jsx(a.BarChart,{...r,stacked:!0}),[t.CHART_TYPES.LINE]:r=>e.jsx(C.LineChart,{...r}),[t.CHART_TYPES.AREA]:r=>e.jsx(C.LineChart,{...r,fill:!0}),[t.CHART_TYPES.PIE]:r=>e.jsx(n.PieChart,{...r}),[t.CHART_TYPES.DONUT]:r=>e.jsx(n.PieChart,{...r,innerRadius:t.CHART.DEFAULT_INNER_RADIUS}),[t.CHART_TYPES.RADAR]:r=>e.jsx(i.RadarChart,{...r}),[t.CHART_TYPES.FUNNEL]:r=>e.jsx(A.FunnelChart,{...r})},E=r=>{const{type:R,...T}=r;return(s[R]??s[t.CHART_TYPES.BAR])(T)};exports.Chart=E;

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"];