@forgedevstack/bear 1.1.3 → 1.1.8

package/dist/components/Button/Button.js

@@ -1,136 +1,124 @@
-import { jsxs as C, jsx as a } from "react/jsx-runtime";
-import { forwardRef as se, useContext as le, useRef as ce, useState as A, useCallback as B, useMemo as be } from "react";
-import { cn as u } from "../../utils/cn.js";
-import { Spinner as ue } from "../Spinner/Spinner.js";
-import { Typography as E } from "../Typography/Typography.js";
-import { useBearStyles as de } from "../../hooks/useBearStyles.js";
+import { jsxs as h, jsx as o } from "react/jsx-runtime";
+import { forwardRef as Q, useContext as X, useMemo as ee, useCallback as re } from "react";
+import { cn as n } from "../../utils/cn.js";
+import { Spinner as te } from "../Spinner/Spinner.js";
+import { Typography as S } from "../Typography/Typography.js";
+import { useBearStyles as ae } from "../../hooks/useBearStyles.js";
 import "../../hooks/useBearComponent/useBearComponent.js";
-import { BearContext as fe } from "../../context/BearProvider.js";
-import { VARIANT_DEFAULTS as P, BUTTON_ICON_SIZE as O, BUTTON_VARIANT as j, BUTTON_SIZE as me } from "./Button.constants.js";
-const U = (y) => y in j, ge = se(
-  (y, i) => {
-    var z, M;
+import { BearContext as oe } from "../../context/BearProvider.js";
+import { VARIANT_DEFAULTS as w, BUTTON_ICON_SIZE as O, BUTTON_VARIANT as ne, BUTTON_ICON_ONLY_SIZE as ie, BUTTON_SIZE as se } from "./Button.constants.js";
+import { isBuiltInVariant as V } from "./Button.utils.js";
+import { useSpotlight as le } from "./useSpotlight.js";
+const be = Q(
+  (E, i) => {
+    var T, $;
     const {
       variant: e = "primary",
-      size: d = "md",
-      loading: s = !1,
-      loadingText: v,
-      fullWidth: D = !1,
-      icon: f,
-      iconPosition: $ = "left",
-      leftIcon: H,
-      rightIcon: L,
-      textVariant: S = "inherit",
-      spotlight: l = !1,
-      spotlightColor: X = "rgba(255, 255, 255, 0.35)",
-      spotlightSize: m = 150,
-      disabled: Y,
-      className: Z,
-      children: F,
-      testId: W,
-      bis: q,
-      style: G,
-      onMouseMove: g,
-      onMouseEnter: p,
-      onMouseLeave: h,
-      ...J
-    } = y, K = Y || s, x = de(q, G), T = H ?? (f && $ === "left" ? f : void 0), R = L ?? (f && $ === "right" ? f : void 0), n = le(fe), _ = ((M = (z = n == null ? void 0 : n.components) == null ? void 0 : z.Button) == null ? void 0 : M.root) || {}, w = (n == null ? void 0 : n.customVariants) || {}, N = !U(e) && e in w, r = N ? w[e] : null, c = ce(null), [V, I] = A({ x: -1e3, y: -1e3 }), [Q, k] = A(!1), ee = B((t) => {
-      if (l && c.current) {
-        const b = c.current.getBoundingClientRect(), ae = t.clientX - b.left, ie = t.clientY - b.top;
-        I({ x: ae, y: ie });
-      }
-      g == null || g(t);
-    }, [l, g]), te = B((t) => {
-      if (l && (k(!0), c.current)) {
-        const b = c.current.getBoundingClientRect();
-        I({
-          x: t.clientX - b.left,
-          y: t.clientY - b.top
-        });
-      }
-      p == null || p(t);
-    }, [l, p]), re = B((t) => {
-      k(!1), I({ x: -1e3, y: -1e3 }), h == null || h(t);
-    }, [h]), o = P[e] || P.primary, ne = be(() => N && r ? {
+      size: s = "md",
+      loading: l = !1,
+      loadingText: d,
+      fullWidth: k = !1,
+      icon: b,
+      iconPosition: B = "left",
+      leftIcon: z,
+      rightIcon: A,
+      textVariant: v = "inherit",
+      iconOnly: _ = !1,
+      spotlight: y = !1,
+      spotlightColor: L = "rgba(255, 255, 255, 0.35)",
+      spotlightSize: c = 150,
+      disabled: R,
+      className: U,
+      children: j,
+      testId: P,
+      bis: Z,
+      style: D,
+      onMouseMove: F,
+      onMouseEnter: H,
+      onMouseLeave: W,
+      ...Y
+    } = E, q = R || l, m = ae(Z, D), x = z ?? (b && B === "left" ? b : void 0), N = A ?? (b && B === "right" ? b : void 0), t = X(oe), f = (($ = (T = t == null ? void 0 : t.components) == null ? void 0 : T.Button) == null ? void 0 : $.root) || {}, I = (t == null ? void 0 : t.customVariants) || {}, p = !V(e) && e in I, r = p ? I[e] : null, { spotlightRef: M, position: C, isHovered: G, handlers: g } = le({
+      enabled: y,
+      onMouseMove: F,
+      onMouseEnter: H,
+      onMouseLeave: W
+    }), a = w[e] || w.primary, J = ee(() => p && r ? {
       backgroundColor: `var(--bear-${e}-bg, ${r.bg})`,
       color: r.text || "#ffffff",
       borderColor: r.border,
       "--bear-ring-color": r.ring || r.bg,
-      ..._,
-      ...x
+      ...f,
+      ...m
     } : {
-      backgroundColor: `var(--bear-btn-${e}-bg, ${o.bg})`,
-      color: e === "outline" || e === "ghost" ? `var(--bear-btn-${e}-text, ${o.text || "inherit"})` : "white",
-      borderColor: e === "outline" ? `var(--bear-btn-${e}-border, ${o.border || o.bg})` : void 0,
-      "--bear-ring-color": `var(--bear-btn-${e}-ring, ${o.ring})`,
-      ..._,
-      ...x
-    }, [e, o, _, x, N, r]), oe = B((t) => {
-      c.current = t, typeof i == "function" ? i(t) : i && (i.current = t);
-    }, [i]);
-    return /* @__PURE__ */ C(
+      backgroundColor: `var(--bear-btn-${e}-bg, ${a.bg})`,
+      color: e === "outline" || e === "ghost" ? `var(--bear-btn-${e}-text, ${a.text || "inherit"})` : "white",
+      borderColor: e === "outline" ? `var(--bear-btn-${e}-border, ${a.border || a.bg})` : void 0,
+      "--bear-ring-color": `var(--bear-btn-${e}-ring, ${a.ring})`,
+      ...f,
+      ...m
+    }, [e, a, f, m, p, r]), K = re((u) => {
+      M.current = u, typeof i == "function" ? i(u) : i && (i.current = u);
+    }, [i, M]);
+    return /* @__PURE__ */ h(
       "button",
       {
-        ref: oe,
-        disabled: K,
-        "aria-busy": s || void 0,
-        style: ne,
-        className: u(
+        ref: K,
+        disabled: q,
+        "aria-busy": l || void 0,
+        style: J,
+        className: n(
           "Bear-Button",
           "bear-inline-flex bear-items-center bear-justify-center bear-font-medium bear-rounded-lg bear-transition-all bear-duration-200 bear-outline-none bear-relative bear-overflow-hidden",
-          me[d],
-          // Use built-in variant classes or custom variant base classes
-          U(e) ? j[e] : "bear-btn-custom bear-text-white focus:bear-ring-2 focus:bear-ring-offset-2 disabled:bear-opacity-50 disabled:bear-cursor-not-allowed hover:bear-brightness-110 active:bear-brightness-95",
-          D && "bear-w-full",
-          s && "bear-cursor-wait",
-          Z
+          _ ? ie[s] : se[s],
+          _ && "bear-rounded-lg",
+          V(e) ? ne[e] : "bear-btn-custom bear-text-white focus:bear-ring-2 focus:bear-ring-offset-2 disabled:bear-opacity-50 disabled:bear-cursor-not-allowed hover:bear-brightness-110 active:bear-brightness-95",
+          k && "bear-w-full",
+          l && "bear-cursor-wait",
+          U
         ),
-        "data-testid": W,
-        onMouseMove: ee,
-        onMouseEnter: te,
-        onMouseLeave: re,
-        ...J,
+        "data-testid": P,
+        onMouseMove: g.handleMouseMove,
+        onMouseEnter: g.handleMouseEnter,
+        onMouseLeave: g.handleMouseLeave,
+        ...Y,
         children: [
-          l && /* @__PURE__ */ a(
+          y && /* @__PURE__ */ o(
             "span",
             {
-              className: "Bear-Button__spotlight",
+              className: n(
+                "Bear-Button__spotlight",
+                "bear-absolute bear-left-0 bear-top-0 bear-rounded-full bear-pointer-events-none bear-z-[1]",
+                "bear-transition-opacity bear-duration-150 bear-ease-out",
+                G ? "bear-opacity-100" : "bear-opacity-0"
+              ),
               "aria-hidden": "true",
               style: {
-                position: "absolute",
-                pointerEvents: "none",
-                left: 0,
-                top: 0,
-                width: m,
-                height: m,
-                borderRadius: "50%",
-                background: `radial-gradient(circle at center, ${X} 0%, transparent 70%)`,
-                opacity: Q ? 1 : 0,
-                transform: `translate(${V.x - m / 2}px, ${V.y - m / 2}px)`,
-                transition: "opacity 0.15s ease-out",
-                zIndex: 1,
+                width: c,
+                height: c,
+                background: `radial-gradient(circle at center, ${L} 0%, transparent 70%)`,
+                transform: `translate(${C.x - c / 2}px, ${C.y - c / 2}px)`,
                 mixBlendMode: "overlay"
               }
             }
           ),
-          s && /* @__PURE__ */ C("span", { className: u(
+          l && /* @__PURE__ */ h("span", { className: n(
             "Bear-Button__loading bear-inline-flex bear-items-center bear-gap-2 bear-relative bear-z-10",
-            !v && "bear-absolute"
+            !d && "bear-absolute"
           ), children: [
-            /* @__PURE__ */ a(ue, { size: d === "xs" ? "xs" : "sm", className: "Bear-Button__spinner" }),
-            v && /* @__PURE__ */ a(E, { variant: S, className: "Bear-Button__text", children: v })
+            /* @__PURE__ */ o(te, { size: s === "xs" ? "xs" : "sm", className: "Bear-Button__spinner" }),
+            d && /* @__PURE__ */ o(S, { variant: v, className: "Bear-Button__text", children: d })
           ] }),
-          /* @__PURE__ */ C(
+          /* @__PURE__ */ h(
             "span",
             {
-              className: u(
+              className: n(
                 "Bear-Button__content bear-inline-flex bear-items-center bear-gap-inherit bear-relative bear-z-10",
-                s && "bear-invisible"
+                l && "bear-invisible"
               ),
               children: [
-                T && /* @__PURE__ */ a("span", { className: u("Bear-Button__icon Bear-Button__icon--left bear-inline-flex bear-shrink-0", O[d]), children: T }),
-                /* @__PURE__ */ a(E, { variant: S, className: "Bear-Button__text", children: F }),
-                R && /* @__PURE__ */ a("span", { className: u("Bear-Button__icon Bear-Button__icon--right bear-inline-flex bear-shrink-0", O[d]), children: R })
+                x && /* @__PURE__ */ o("span", { className: n("Bear-Button__icon Bear-Button__icon--left bear-inline-flex bear-shrink-0", O[s]), children: x }),
+                /* @__PURE__ */ o(S, { variant: v, className: "Bear-Button__text", children: j }),
+                N && /* @__PURE__ */ o("span", { className: n("Bear-Button__icon Bear-Button__icon--right bear-inline-flex bear-shrink-0", O[s]), children: N })
               ]
             }
           )
@@ -139,7 +127,7 @@ const U = (y) => y in j, ge = se(
     );
   }
 );
-ge.displayName = "Button";
+be.displayName = "Button";
 export {
-  ge as Button
+  be as Button
 };

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

@@ -45,6 +45,7 @@ export interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement
     spotlightColor?: string;
     /** Spotlight size in pixels (default: 120) */
     spotlightSize?: number;
+    iconOnly?: boolean;
     /** Test ID for testing */
     testId?: string;
     /** Bear Inner Style - sx-like overrides */

package/dist/components/Button/Button.utils.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("./Button.constants.cjs"),i=t=>t in n.BUTTON_VARIANT;exports.isBuiltInVariant=i;

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

@@ -0,0 +1,2 @@
+import { BearVariant } from '../../types';
+export declare const isBuiltInVariant: (variant: string) => variant is BearVariant;

package/dist/components/Button/Button.utils.js

@@ -0,0 +1,5 @@
+import { BUTTON_VARIANT as t } from "./Button.constants.js";
+const n = (r) => r in t;
+export {
+  n as isBuiltInVariant
+};

package/dist/components/Button/useSpotlight.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react"),f=-1e3;function y({enabled:r,onMouseMove:s,onMouseEnter:e,onMouseLeave:n}){const l=c.useRef(null),[g,a]=c.useState({x:f,y:f}),[d,u]=c.useState(!1),h=c.useCallback(t=>{if(r&&l.current){const i=l.current.getBoundingClientRect();a({x:t.clientX-i.left,y:t.clientY-i.top})}s==null||s(t)},[r,s]),p=c.useCallback(t=>{if(r&&(u(!0),l.current)){const i=l.current.getBoundingClientRect();a({x:t.clientX-i.left,y:t.clientY-i.top})}e==null||e(t)},[r,e]),S=c.useCallback(t=>{u(!1),a({x:f,y:f}),n==null||n(t)},[n]);return{spotlightRef:l,position:g,isHovered:d,handlers:{handleMouseMove:h,handleMouseEnter:p,handleMouseLeave:S}}}exports.useSpotlight=y;

package/dist/components/Button/useSpotlight.d.ts

@@ -0,0 +1,21 @@
+interface SpotlightPosition {
+    x: number;
+    y: number;
+}
+interface UseSpotlightOptions {
+    enabled: boolean;
+    onMouseMove?: React.MouseEventHandler<HTMLButtonElement>;
+    onMouseEnter?: React.MouseEventHandler<HTMLButtonElement>;
+    onMouseLeave?: React.MouseEventHandler<HTMLButtonElement>;
+}
+export declare function useSpotlight({ enabled, onMouseMove, onMouseEnter, onMouseLeave }: UseSpotlightOptions): {
+    spotlightRef: import('react').MutableRefObject<HTMLButtonElement | null>;
+    position: SpotlightPosition;
+    isHovered: boolean;
+    handlers: {
+        handleMouseMove: (e: React.MouseEvent<HTMLButtonElement>) => void;
+        handleMouseEnter: (e: React.MouseEvent<HTMLButtonElement>) => void;
+        handleMouseLeave: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    };
+};
+export {};

package/dist/components/Button/useSpotlight.js

@@ -0,0 +1,28 @@
+import { useRef as S, useState as d, useCallback as g } from "react";
+const s = -1e3;
+function m({ enabled: l, onMouseMove: r, onMouseEnter: f, onMouseLeave: n }) {
+  const c = S(null), [x, p] = d({ x: s, y: s }), [R, h] = d(!1), y = g((t) => {
+    if (l && c.current) {
+      const i = c.current.getBoundingClientRect();
+      p({ x: t.clientX - i.left, y: t.clientY - i.top });
+    }
+    r == null || r(t);
+  }, [l, r]), C = g((t) => {
+    if (l && (h(!0), c.current)) {
+      const i = c.current.getBoundingClientRect();
+      p({ x: t.clientX - i.left, y: t.clientY - i.top });
+    }
+    f == null || f(t);
+  }, [l, f]), e = g((t) => {
+    h(!1), p({ x: s, y: s }), n == null || n(t);
+  }, [n]);
+  return {
+    spotlightRef: c,
+    position: x,
+    isHovered: R,
+    handlers: { handleMouseMove: y, handleMouseEnter: C, handleMouseLeave: e }
+  };
+}
+export {
+  m as useSpotlight
+};

package/dist/components/Chart/Chart.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),b=require("react"),d=require("../../utils/cn.cjs"),R=["#ec4899","#8b5cf6","#3b82f6","#10b981","#f59e0b","#ef4444","#06b6d4","#84cc16"],w=(r,x)=>x||R[r%R.length],M=({data:r,height:x=200,showLabels:y=!0,showValues:m=!1,animated:h=!0,color:f,orientation:p="vertical",barRadius:o=4,barGap:$=.2,className:j,...v})=>{const n=Math.max(...r.map(l=>l.value));return e.jsx("div",{className:d.cn("w-full",j),style:{height:x},...v,children:p==="vertical"?e.jsx("div",{className:"flex items-end justify-between h-full gap-2",children:r.map((l,a)=>{const s=l.value/n*100,t=w(a,l.color||f);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:d.cn("w-full transition-all duration-500 ease-out",h&&"animate-grow-up"),style:{height:`${s}%`,backgroundColor:t,borderRadius:`${o}px ${o}px 0 0`,opacity:.9}})}),m&&e.jsx("span",{className:"text-xs text-gray-500 dark:text-slate-400",children:l.value}),y&&e.jsx("span",{className:"text-xs text-gray-600 dark:text-slate-300 truncate max-w-full",children:l.label})]},a)})}):e.jsx("div",{className:"flex flex-col justify-between h-full gap-2",children:r.map((l,a)=>{const s=l.value/n*100,t=w(a,l.color||f);return e.jsxs("div",{className:"flex-1 flex items-center gap-2",children:[y&&e.jsx("span",{className:"text-xs text-gray-600 dark:text-slate-300 w-16 truncate",children:l.label}),e.jsx("div",{className:"flex-1 h-full flex items-center",children:e.jsx("div",{className:d.cn("h-3/4 transition-all duration-500 ease-out",h&&"animate-grow-right"),style:{width:`${s}%`,backgroundColor:t,borderRadius:`0 ${o}px ${o}px 0`,opacity:.9}})}),m&&e.jsx("span",{className:"text-xs text-gray-500 dark:text-slate-400 w-10 text-right",children:l.value})]},a)})})})},L=({data:r,height:x=200,showLabels:y=!0,showDots:m=!0,smooth:h=!0,fill:f=!1,strokeWidth:p=2,color:o="#ec4899",animated:$=!0,className:j,...v})=>{const n=b.useMemo(()=>{const s=Math.max(...r.map(c=>c.value)),t=Math.min(...r.map(c=>c.value)),i=s-t||1;return r.map((c,u)=>({x:u/(r.length-1||1)*100,y:100-(c.value-t)/i*80-10,...c}))},[r]),l=b.useMemo(()=>n.length===0?"":h?n.reduce((s,t,i,c)=>{if(i===0)return`M ${t.x},${t.y}`;const u=c[i-1],g=u.x+(t.x-u.x)/3,N=t.x-(t.x-u.x)/3;return`${s} C ${g},${u.y} ${N},${t.y} ${t.x},${t.y}`},""):n.reduce((s,t,i)=>`${s} ${i===0?"M":"L"} ${t.x},${t.y}`,""),[n,h]),a=b.useMemo(()=>n.length===0?"":`${l} L 100,100 L 0,100 Z`,[l,n]);return e.jsxs("div",{className:d.cn("w-full",j),style:{height:x},...v,children:[e.jsxs("svg",{viewBox:"0 0 100 100",preserveAspectRatio:"none",className:"w-full h-full",children:[e.jsx("defs",{children:e.jsxs("linearGradient",{id:"line-gradient",x1:"0%",y1:"0%",x2:"0%",y2:"100%",children:[e.jsx("stop",{offset:"0%",stopColor:o,stopOpacity:"0.3"}),e.jsx("stop",{offset:"100%",stopColor:o,stopOpacity:"0"})]})}),f&&e.jsx("path",{d:a,fill:"url(#line-gradient)",className:d.cn($&&"animate-fade-in")}),e.jsx("path",{d:l,fill:"none",stroke:o,strokeWidth:p/10,strokeLinecap:"round",strokeLinejoin:"round",className:d.cn($&&"animate-draw-line")}),m&&n.map((s,t)=>e.jsx("circle",{cx:s.x,cy:s.y,r:1.5,fill:o,className:d.cn($&&"animate-scale-in"),style:{animationDelay:`${t*50}ms`}},t))]}),y&&e.jsx("div",{className:"flex justify-between mt-2",children:r.map((s,t)=>e.jsx("span",{className:"text-xs text-gray-600 dark:text-slate-300",children:s.label},t))})]})},k=({data:r,height:x=200,showLabels:y=!0,innerRadius:m=0,startAngle:h=-90,padAngle:f=2,animated:p=!0,className:o,...$})=>{const j=r.reduce((a,s)=>a+s.value,0),v=b.useMemo(()=>{let a=h;return r.map((s,t)=>{const i=s.value/j*360-f,c={startAngle:a,endAngle:a+i,color:w(t,s.color),...s};return a+=i+f,c})},[r,j,h,f]),n=(a,s)=>{const t=a*Math.PI/180;return{x:50+s*Math.cos(t),y:50+s*Math.sin(t)}},l=(a,s)=>{const i=m*45,c=n(a,45),u=n(s,45),g=n(a,i),N=n(s,i),C=s-a>180?1:0;return m>0?`M ${c.x},${c.y} A 45,45 0 ${C},1 ${u.x},${u.y} L ${N.x},${N.y} A ${i},${i} 0 ${C},0 ${g.x},${g.y} Z`:`M 50,50 L ${c.x},${c.y} A 45,45 0 ${C},1 ${u.x},${u.y} Z`};return e.jsxs("div",{className:d.cn("flex items-center gap-4",o),...$,children:[e.jsx("div",{style:{width:x,height:x},children:e.jsx("svg",{viewBox:"0 0 100 100",className:"w-full h-full",children:v.map((a,s)=>e.jsx("path",{d:l(a.startAngle,a.endAngle),fill:a.color,className:d.cn("transition-opacity hover:opacity-80",p&&"animate-scale-in"),style:{animationDelay:`${s*100}ms`}},s))})}),y&&e.jsx("div",{className:"flex flex-col gap-2",children:r.map((a,s)=>e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx("div",{className:"w-3 h-3 rounded-full",style:{backgroundColor:w(s,a.color)}}),e.jsx("span",{className:"text-sm text-gray-600 dark:text-slate-300",children:a.label}),e.jsxs("span",{className:"text-sm text-gray-400 dark:text-slate-500",children:[Math.round(a.value/j*100),"%"]})]},s))})]})},A=({type:r,...x})=>{switch(r){case"bar":return e.jsx(M,{...x});case"line":case"area":return e.jsx(L,{...x,fill:r==="area"});case"pie":return e.jsx(k,{...x});case"donut":return e.jsx(k,{...x,innerRadius:.6});default:return e.jsx(M,{...x})}};exports.BarChart=M;exports.Chart=A;exports.LineChart=L;exports.PieChart=k;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),C=require("react"),d=require("../../utils/cn.cjs"),w=require("./Chart.utils.cjs"),M=({data:r,height:o=200,showLabels:y=!0,showValues:f=!1,animated:h=!0,color:m,orientation:p="vertical",barRadius:i=4,barGap:$=.2,className:j,...v})=>{const n=Math.max(...r.map(l=>l.value));return e.jsx("div",{className:d.cn("w-full",j),style:{height:o},...v,children:p==="vertical"?e.jsx("div",{className:"flex items-end justify-between h-full gap-2",children:r.map((l,a)=>{const t=l.value/n*100,s=w.getChartColor(a,l.color||m);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:d.cn("w-full transition-all duration-500 ease-out",h&&"animate-grow-up"),style:{height:`${t}%`,backgroundColor:s,borderRadius:`${i}px ${i}px 0 0`,opacity:.9}})}),f&&e.jsx("span",{className:"text-xs text-gray-500 dark:text-slate-400",children:l.value}),y&&e.jsx("span",{className:"text-xs text-gray-600 dark:text-slate-300 truncate max-w-full",children:l.label})]},a)})}):e.jsx("div",{className:"flex flex-col justify-between h-full gap-2",children:r.map((l,a)=>{const t=l.value/n*100,s=w.getChartColor(a,l.color||m);return e.jsxs("div",{className:"flex-1 flex items-center gap-2",children:[y&&e.jsx("span",{className:"text-xs text-gray-600 dark:text-slate-300 w-16 truncate",children:l.label}),e.jsx("div",{className:"flex-1 h-full flex items-center",children:e.jsx("div",{className:d.cn("h-3/4 transition-all duration-500 ease-out",h&&"animate-grow-right"),style:{width:`${t}%`,backgroundColor:s,borderRadius:`0 ${i}px ${i}px 0`,opacity:.9}})}),f&&e.jsx("span",{className:"text-xs text-gray-500 dark:text-slate-400 w-10 text-right",children:l.value})]},a)})})})},R=({data:r,height:o=200,showLabels:y=!0,showDots:f=!0,smooth:h=!0,fill:m=!1,strokeWidth:p=2,color:i="#ec4899",animated:$=!0,className:j,...v})=>{const n=C.useMemo(()=>{const t=Math.max(...r.map(c=>c.value)),s=Math.min(...r.map(c=>c.value)),x=t-s||1;return r.map((c,u)=>({x:u/(r.length-1||1)*100,y:100-(c.value-s)/x*80-10,...c}))},[r]),l=C.useMemo(()=>n.length===0?"":h?n.reduce((t,s,x,c)=>{if(x===0)return`M ${s.x},${s.y}`;const u=c[x-1],g=u.x+(s.x-u.x)/3,N=s.x-(s.x-u.x)/3;return`${t} C ${g},${u.y} ${N},${s.y} ${s.x},${s.y}`},""):n.reduce((t,s,x)=>`${t} ${x===0?"M":"L"} ${s.x},${s.y}`,""),[n,h]),a=C.useMemo(()=>n.length===0?"":`${l} L 100,100 L 0,100 Z`,[l,n]);return e.jsxs("div",{className:d.cn("w-full",j),style:{height:o},...v,children:[e.jsxs("svg",{viewBox:"0 0 100 100",preserveAspectRatio:"none",className:"w-full h-full",children:[e.jsx("defs",{children:e.jsxs("linearGradient",{id:"line-gradient",x1:"0%",y1:"0%",x2:"0%",y2:"100%",children:[e.jsx("stop",{offset:"0%",stopColor:i,stopOpacity:"0.3"}),e.jsx("stop",{offset:"100%",stopColor:i,stopOpacity:"0"})]})}),m&&e.jsx("path",{d:a,fill:"url(#line-gradient)",className:d.cn($&&"animate-fade-in")}),e.jsx("path",{d:l,fill:"none",stroke:i,strokeWidth:p/10,strokeLinecap:"round",strokeLinejoin:"round",className:d.cn($&&"animate-draw-line")}),f&&n.map((t,s)=>e.jsx("circle",{cx:t.x,cy:t.y,r:1.5,fill:i,className:d.cn($&&"animate-scale-in"),style:{animationDelay:`${s*50}ms`}},s))]}),y&&e.jsx("div",{className:"flex justify-between mt-2",children:r.map((t,s)=>e.jsx("span",{className:"text-xs text-gray-600 dark:text-slate-300",children:t.label},s))})]})},k=({data:r,height:o=200,showLabels:y=!0,innerRadius:f=0,startAngle:h=-90,padAngle:m=2,animated:p=!0,className:i,...$})=>{const j=r.reduce((a,t)=>a+t.value,0),v=C.useMemo(()=>{let a=h;return r.map((t,s)=>{const x=t.value/j*360-m,c={startAngle:a,endAngle:a+x,color:w.getChartColor(s,t.color),...t};return a+=x+m,c})},[r,j,h,m]),n=(a,t)=>{const s=a*Math.PI/180;return{x:50+t*Math.cos(s),y:50+t*Math.sin(s)}},l=(a,t)=>{const x=f*45,c=n(a,45),u=n(t,45),g=n(a,x),N=n(t,x),b=t-a>180?1:0;return f>0?`M ${c.x},${c.y} A 45,45 0 ${b},1 ${u.x},${u.y} L ${N.x},${N.y} A ${x},${x} 0 ${b},0 ${g.x},${g.y} Z`:`M 50,50 L ${c.x},${c.y} A 45,45 0 ${b},1 ${u.x},${u.y} Z`};return e.jsxs("div",{className:d.cn("flex items-center gap-4",i),...$,children:[e.jsx("div",{style:{width:o,height:o},children:e.jsx("svg",{viewBox:"0 0 100 100",className:"w-full h-full",children:v.map((a,t)=>e.jsx("path",{d:l(a.startAngle,a.endAngle),fill:a.color,className:d.cn("transition-opacity hover:opacity-80",p&&"animate-scale-in"),style:{animationDelay:`${t*100}ms`}},t))})}),y&&e.jsx("div",{className:"flex flex-col gap-2",children:r.map((a,t)=>e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx("div",{className:"w-3 h-3 rounded-full",style:{backgroundColor:w.getChartColor(t,a.color)}}),e.jsx("span",{className:"text-sm text-gray-600 dark:text-slate-300",children:a.label}),e.jsxs("span",{className:"text-sm text-gray-400 dark:text-slate-500",children:[Math.round(a.value/j*100),"%"]})]},t))})]})},L=({type:r,...o})=>{switch(r){case"bar":return e.jsx(M,{...o});case"line":case"area":return e.jsx(R,{...o,fill:r==="area"});case"pie":return e.jsx(k,{...o});case"donut":return e.jsx(k,{...o,innerRadius:.6});default:return e.jsx(M,{...o})}};exports.BarChart=M;exports.Chart=L;exports.LineChart=R;exports.PieChart=k;

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=["#ec4899","#8b5cf6","#3b82f6","#10b981","#f59e0b","#ef4444","#06b6d4","#84cc16"];exports.DEFAULT_COLORS=e;

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

@@ -0,0 +1,21 @@
+const b = [
+  "#ec4899",
+  // pink
+  "#8b5cf6",
+  // purple
+  "#3b82f6",
+  // blue
+  "#10b981",
+  // emerald
+  "#f59e0b",
+  // amber
+  "#ef4444",
+  // red
+  "#06b6d4",
+  // cyan
+  "#84cc16"
+  // lime
+];
+export {
+  b as DEFAULT_COLORS
+};

package/dist/components/Chart/Chart.js

@@ -1,30 +1,14 @@
-import { jsx as t, jsxs as h } from "react/jsx-runtime";
-import { useMemo as C } from "react";
+import { jsx as t, jsxs as f } from "react/jsx-runtime";
+import { useMemo as b } from "react";
 import { cn as d } from "../../utils/cn.js";
-const L = [
-  "#ec4899",
-  // pink
-  "#8b5cf6",
-  // purple
-  "#3b82f6",
-  // blue
-  "#10b981",
-  // emerald
-  "#f59e0b",
-  // amber
-  "#ef4444",
-  // red
-  "#06b6d4",
-  // cyan
-  "#84cc16"
-  // lime
-], k = (l, o) => o || L[l % L.length], R = ({
+import { getChartColor as k } from "./Chart.utils.js";
+const R = ({
   data: l,
-  height: o = 200,
+  height: i = 200,
   showLabels: p = !0,
   showValues: $ = !1,
-  animated: f = !0,
-  color: m,
+  animated: m = !0,
+  color: h,
   orientation: g = "vertical",
   barRadius: u = 4,
   barGap: v = 0.2,
@@ -32,15 +16,15 @@ const L = [
   ...N
 }) => {
   const n = Math.max(...l.map((s) => s.value));
-  return /* @__PURE__ */ t("div", { className: d("w-full", y), style: { height: o }, ...N, children: g === "vertical" ? /* @__PURE__ */ t("div", { className: "flex items-end justify-between h-full gap-2", children: l.map((s, r) => {
-    const e = s.value / n * 100, a = k(r, s.color || m);
-    return /* @__PURE__ */ h("div", { className: "flex-1 flex flex-col items-center gap-1", children: [
+  return /* @__PURE__ */ t("div", { className: d("w-full", y), style: { height: i }, ...N, children: g === "vertical" ? /* @__PURE__ */ t("div", { className: "flex items-end justify-between h-full gap-2", children: l.map((s, r) => {
+    const e = s.value / n * 100, a = k(r, s.color || h);
+    return /* @__PURE__ */ f("div", { className: "flex-1 flex flex-col items-center gap-1", children: [
       /* @__PURE__ */ t("div", { className: "w-full flex-1 flex items-end", children: /* @__PURE__ */ t(
         "div",
         {
           className: d(
             "w-full transition-all duration-500 ease-out",
-            f && "animate-grow-up"
+            m && "animate-grow-up"
           ),
           style: {
             height: `${e}%`,
@@ -54,15 +38,15 @@ const L = [
       p && /* @__PURE__ */ t("span", { className: "text-xs text-gray-600 dark:text-slate-300 truncate max-w-full", children: s.label })
     ] }, r);
   }) }) : /* @__PURE__ */ t("div", { className: "flex flex-col justify-between h-full gap-2", children: l.map((s, r) => {
-    const e = s.value / n * 100, a = k(r, s.color || m);
-    return /* @__PURE__ */ h("div", { className: "flex-1 flex items-center gap-2", children: [
+    const e = s.value / n * 100, a = k(r, s.color || h);
+    return /* @__PURE__ */ f("div", { className: "flex-1 flex items-center gap-2", children: [
       p && /* @__PURE__ */ t("span", { className: "text-xs text-gray-600 dark:text-slate-300 w-16 truncate", children: s.label }),
       /* @__PURE__ */ t("div", { className: "flex-1 h-full flex items-center", children: /* @__PURE__ */ t(
         "div",
         {
           className: d(
             "h-3/4 transition-all duration-500 ease-out",
-            f && "animate-grow-right"
+            m && "animate-grow-right"
           ),
           style: {
             width: `${e}%`,
@@ -75,38 +59,38 @@ const L = [
       $ && /* @__PURE__ */ t("span", { className: "text-xs text-gray-500 dark:text-slate-400 w-10 text-right", children: s.value })
     ] }, r);
   }) }) });
-}, A = ({
+}, j = ({
   data: l,
-  height: o = 200,
+  height: i = 200,
   showLabels: p = !0,
   showDots: $ = !0,
-  smooth: f = !0,
-  fill: m = !1,
+  smooth: m = !0,
+  fill: h = !1,
   strokeWidth: g = 2,
   color: u = "#ec4899",
   animated: v = !0,
   className: y,
   ...N
 }) => {
-  const n = C(() => {
-    const e = Math.max(...l.map((c) => c.value)), a = Math.min(...l.map((c) => c.value)), i = e - a || 1;
+  const n = b(() => {
+    const e = Math.max(...l.map((c) => c.value)), a = Math.min(...l.map((c) => c.value)), o = e - a || 1;
     return l.map((c, x) => ({
       x: x / (l.length - 1 || 1) * 100,
-      y: 100 - (c.value - a) / i * 80 - 10,
+      y: 100 - (c.value - a) / o * 80 - 10,
       ...c
     }));
-  }, [l]), s = C(() => n.length === 0 ? "" : f ? n.reduce((e, a, i, c) => {
-    if (i === 0) return `M ${a.x},${a.y}`;
-    const x = c[i - 1], b = x.x + (a.x - x.x) / 3, w = a.x - (a.x - x.x) / 3;
-    return `${e} C ${b},${x.y} ${w},${a.y} ${a.x},${a.y}`;
-  }, "") : n.reduce((e, a, i) => `${e} ${i === 0 ? "M" : "L"} ${a.x},${a.y}`, ""), [n, f]), r = C(() => n.length === 0 ? "" : `${s} L 100,100 L 0,100 Z`, [s, n]);
-  return /* @__PURE__ */ h("div", { className: d("w-full", y), style: { height: o }, ...N, children: [
-    /* @__PURE__ */ h("svg", { viewBox: "0 0 100 100", preserveAspectRatio: "none", className: "w-full h-full", children: [
-      /* @__PURE__ */ t("defs", { children: /* @__PURE__ */ h("linearGradient", { id: "line-gradient", x1: "0%", y1: "0%", x2: "0%", y2: "100%", children: [
+  }, [l]), s = b(() => n.length === 0 ? "" : m ? n.reduce((e, a, o, c) => {
+    if (o === 0) return `M ${a.x},${a.y}`;
+    const x = c[o - 1], w = x.x + (a.x - x.x) / 3, C = a.x - (a.x - x.x) / 3;
+    return `${e} C ${w},${x.y} ${C},${a.y} ${a.x},${a.y}`;
+  }, "") : n.reduce((e, a, o) => `${e} ${o === 0 ? "M" : "L"} ${a.x},${a.y}`, ""), [n, m]), r = b(() => n.length === 0 ? "" : `${s} L 100,100 L 0,100 Z`, [s, n]);
+  return /* @__PURE__ */ f("div", { className: d("w-full", y), style: { height: i }, ...N, children: [
+    /* @__PURE__ */ f("svg", { viewBox: "0 0 100 100", preserveAspectRatio: "none", className: "w-full h-full", children: [
+      /* @__PURE__ */ t("defs", { children: /* @__PURE__ */ f("linearGradient", { id: "line-gradient", x1: "0%", y1: "0%", x2: "0%", y2: "100%", children: [
         /* @__PURE__ */ t("stop", { offset: "0%", stopColor: u, stopOpacity: "0.3" }),
         /* @__PURE__ */ t("stop", { offset: "100%", stopColor: u, stopOpacity: "0" })
       ] }) }),
-      m && /* @__PURE__ */ t(
+      h && /* @__PURE__ */ t(
         "path",
         {
           d: r,
@@ -141,40 +125,40 @@ const L = [
     ] }),
     p && /* @__PURE__ */ t("div", { className: "flex justify-between mt-2", children: l.map((e, a) => /* @__PURE__ */ t("span", { className: "text-xs text-gray-600 dark:text-slate-300", children: e.label }, a)) })
   ] });
-}, j = ({
+}, L = ({
   data: l,
-  height: o = 200,
+  height: i = 200,
   showLabels: p = !0,
   innerRadius: $ = 0,
-  startAngle: f = -90,
-  padAngle: m = 2,
+  startAngle: m = -90,
+  padAngle: h = 2,
   animated: g = !0,
   className: u,
   ...v
 }) => {
-  const y = l.reduce((r, e) => r + e.value, 0), N = C(() => {
-    let r = f;
+  const y = l.reduce((r, e) => r + e.value, 0), N = b(() => {
+    let r = m;
     return l.map((e, a) => {
-      const i = e.value / y * 360 - m, c = {
+      const o = e.value / y * 360 - h, c = {
         startAngle: r,
-        endAngle: r + i,
+        endAngle: r + o,
         color: k(a, e.color),
         ...e
       };
-      return r += i + m, c;
+      return r += o + h, c;
     });
-  }, [l, y, f, m]), n = (r, e) => {
+  }, [l, y, m, h]), n = (r, e) => {
     const a = r * Math.PI / 180;
     return {
       x: 50 + e * Math.cos(a),
       y: 50 + e * Math.sin(a)
     };
   }, s = (r, e) => {
-    const i = $ * 45, c = n(r, 45), x = n(e, 45), b = n(r, i), w = n(e, i), M = e - r > 180 ? 1 : 0;
-    return $ > 0 ? `M ${c.x},${c.y} A 45,45 0 ${M},1 ${x.x},${x.y} L ${w.x},${w.y} A ${i},${i} 0 ${M},0 ${b.x},${b.y} Z` : `M 50,50 L ${c.x},${c.y} A 45,45 0 ${M},1 ${x.x},${x.y} Z`;
+    const o = $ * 45, c = n(r, 45), x = n(e, 45), w = n(r, o), C = n(e, o), M = e - r > 180 ? 1 : 0;
+    return $ > 0 ? `M ${c.x},${c.y} A 45,45 0 ${M},1 ${x.x},${x.y} L ${C.x},${C.y} A ${o},${o} 0 ${M},0 ${w.x},${w.y} Z` : `M 50,50 L ${c.x},${c.y} A 45,45 0 ${M},1 ${x.x},${x.y} Z`;
   };
-  return /* @__PURE__ */ h("div", { className: d("flex items-center gap-4", u), ...v, children: [
-    /* @__PURE__ */ t("div", { style: { width: o, height: o }, children: /* @__PURE__ */ t("svg", { viewBox: "0 0 100 100", className: "w-full h-full", children: N.map((r, e) => /* @__PURE__ */ t(
+  return /* @__PURE__ */ f("div", { className: d("flex items-center gap-4", u), ...v, children: [
+    /* @__PURE__ */ t("div", { style: { width: i, height: i }, children: /* @__PURE__ */ t("svg", { viewBox: "0 0 100 100", className: "w-full h-full", children: N.map((r, e) => /* @__PURE__ */ t(
       "path",
       {
         d: s(r.startAngle, r.endAngle),
@@ -187,7 +171,7 @@ const L = [
       },
       e
     )) }) }),
-    p && /* @__PURE__ */ t("div", { className: "flex flex-col gap-2", children: l.map((r, e) => /* @__PURE__ */ h("div", { className: "flex items-center gap-2", children: [
+    p && /* @__PURE__ */ t("div", { className: "flex flex-col gap-2", children: l.map((r, e) => /* @__PURE__ */ f("div", { className: "flex items-center gap-2", children: [
       /* @__PURE__ */ t(
         "div",
         {
@@ -196,30 +180,30 @@ const L = [
         }
       ),
       /* @__PURE__ */ t("span", { className: "text-sm text-gray-600 dark:text-slate-300", children: r.label }),
-      /* @__PURE__ */ h("span", { className: "text-sm text-gray-400 dark:text-slate-500", children: [
+      /* @__PURE__ */ f("span", { className: "text-sm text-gray-400 dark:text-slate-500", children: [
         Math.round(r.value / y * 100),
         "%"
       ] })
     ] }, e)) })
   ] });
-}, I = ({ type: l, ...o }) => {
+}, P = ({ type: l, ...i }) => {
   switch (l) {
     case "bar":
-      return /* @__PURE__ */ t(R, { ...o });
+      return /* @__PURE__ */ t(R, { ...i });
     case "line":
     case "area":
-      return /* @__PURE__ */ t(A, { ...o, fill: l === "area" });
+      return /* @__PURE__ */ t(j, { ...i, fill: l === "area" });
     case "pie":
-      return /* @__PURE__ */ t(j, { ...o });
+      return /* @__PURE__ */ t(L, { ...i });
     case "donut":
-      return /* @__PURE__ */ t(j, { ...o, innerRadius: 0.6 });
+      return /* @__PURE__ */ t(L, { ...i, innerRadius: 0.6 });
     default:
-      return /* @__PURE__ */ t(R, { ...o });
+      return /* @__PURE__ */ t(R, { ...i });
   }
 };
 export {
   R as BarChart,
-  I as Chart,
-  A as LineChart,
-  j as PieChart
+  P as Chart,
+  j as LineChart,
+  L as PieChart
 };

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

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

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

@@ -0,0 +1,5 @@
+import { DEFAULT_COLORS as r } from "./Chart.const.js";
+const n = (t, o) => o || r[t % r.length];
+export {
+  n as getChartColor
+};