@forgedevstack/bear 1.0.3 → 1.0.4-alpha

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

@@ -0,0 +1,37 @@
+import { HTMLAttributes } from 'react';
+export interface SignPadProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    /** Callback when signature changes - receives base64 image data */
+    onChange?: (signature: string | null) => void;
+    /** Width of the canvas */
+    width?: number;
+    /** Height of the canvas */
+    height?: number;
+    /** Stroke color */
+    strokeColor?: string;
+    /** Stroke width */
+    strokeWidth?: number;
+    /** Background color */
+    backgroundColor?: string;
+    /** Placeholder text */
+    placeholder?: string;
+    /** Disabled state */
+    disabled?: boolean;
+    /** Read-only state */
+    readOnly?: boolean;
+    /** Show clear button */
+    showClear?: boolean;
+    /** Show save button */
+    showSave?: boolean;
+    /** Clear button text */
+    clearText?: string;
+    /** Save button text */
+    saveText?: string;
+    /** Output format */
+    outputFormat?: 'image/png' | 'image/jpeg' | 'image/webp';
+    /** Output quality (0-1 for jpeg/webp) */
+    outputQuality?: number;
+    /** Test ID */
+    testId?: string;
+    /** Unique ID */
+    id?: string;
+}

package/dist/components/SignPad/index.d.ts

@@ -0,0 +1,3 @@
+export { SignPad, default } from './SignPad';
+export type { SignPadProps } from './SignPad.types';
+export * from './SignPad.const';

package/dist/components/Skeleton/Skeleton.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),c=require("../../utils/cn.cjs"),b={text:"bear-rounded",circular:"bear-rounded-full",rectangular:"bear-rounded-none",rounded:"bear-rounded-lg"},g={pulse:"bear-animate-pulse",wave:"bear-skeleton-wave",none:""},a=({variant:t="text",animation:r="pulse",width:s,height:d,count:l=1,gap:j=8,className:i,testId:o,style:m,...u})=>{const n={width:s||(t==="circular"?40:"100%"),height:(()=>{if(d)return d;switch(t){case"text":return"1em";case"circular":return s||40;default:return"auto"}})(),...m};return l>1&&t==="text"?e.jsx("div",{className:"bear-flex bear-flex-col",style:{gap:j},"data-testid":o,children:Array.from({length:l}).map((v,x)=>e.jsx("div",{className:c.cn("bear-bg-gray-200 dark:bear-bg-gray-700",b[t],g[r],i),style:{...n,width:x===l-1?"80%":n.width},...u},x))}):e.jsx("div",{className:c.cn("bear-bg-gray-200 dark:bear-bg-gray-700",b[t],g[r],i),style:n,"data-testid":o,...u})},h=({size:t=40,className:r})=>e.jsx(a,{variant:"circular",width:t,height:t,className:r}),S=({lines:t=3,width:r="100%",className:s})=>e.jsx(a,{variant:"text",count:t,width:r,className:s}),f=({className:t})=>e.jsxs("div",{className:c.cn("bear-p-4 bear-space-y-4",t),children:[e.jsx(a,{variant:"rectangular",height:200}),e.jsxs("div",{className:"bear-flex bear-items-center bear-gap-3",children:[e.jsx(h,{}),e.jsxs("div",{className:"bear-flex-1",children:[e.jsx(a,{variant:"text",width:"60%"}),e.jsx(a,{variant:"text",width:"40%",className:"bear-mt-2"})]})]}),e.jsx(S,{lines:3})]});exports.Skeleton=a;exports.SkeletonAvatar=h;exports.SkeletonCard=f;exports.SkeletonText=S;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),c=require("react"),T=require("../../utils/cn.cjs"),d=require("./Skeleton.const.cjs"),_=()=>{const e="bear-skeleton-styles";if(typeof document<"u"&&!document.getElementById(e)){const t=document.createElement("style");t.id=e,t.textContent=d.SKELETON_WAVE_STYLES,document.head.appendChild(t)}},a=c.forwardRef(({variant:e="text",animation:t="pulse",width:l,height:s,borderRadius:n,count:i=1,gap:E=8,className:o,style:f,testId:y,...h},p)=>{c.useEffect(()=>{t==="wave"&&_()},[t]);const x=S=>{if(S!==void 0)return typeof S=="number"?`${S}px`:S},N={width:x(l),height:x(s)||(e==="text"?d.SKELETON_TEXT_HEIGHT:void 0),borderRadius:n?x(n):void 0,...f},k=T.cn(d.SKELETON_BASE_CLASSES,d.SKELETON_VARIANT_CLASSES[e],d.SKELETON_ANIMATION_CLASSES[t],d.SKELETON_BG_CLASSES,o);return i>1?r.jsx("div",{className:"Bear-Skeleton__group flex flex-col",style:{gap:x(E)},"data-testid":y,children:Array.from({length:i}).map((S,g)=>r.jsx("div",{ref:g===0?p:void 0,className:k,style:N,...h},g))}):r.jsx("div",{ref:p,className:k,style:N,"data-testid":y,...h})});a.displayName="Skeleton";const u=c.forwardRef(({lines:e=3,lastLineWidth:t="80%",gap:l=8,animation:s="pulse",...n},i)=>{c.useEffect(()=>{s==="wave"&&_()},[s]);const E=o=>{if(o!==void 0)return typeof o=="number"?`${o}px`:o};return r.jsx("div",{ref:i,className:"Bear-SkeletonText flex flex-col",style:{gap:E(l)},children:Array.from({length:e}).map((o,f)=>r.jsx(a,{variant:"text",animation:s,width:f===e-1?t:"100%",...n},f))})});u.displayName="SkeletonText";const m=c.forwardRef(({size:e="md",animation:t="pulse",...l},s)=>{const n=typeof e=="number"?e:d.SKELETON_AVATAR_SIZES[e];return r.jsx(a,{ref:s,variant:"circular",animation:t,width:n,height:n,...l})});m.displayName="SkeletonAvatar";const A=c.forwardRef(({animation:e="pulse",className:t,...l},s)=>r.jsxs("div",{ref:s,className:T.cn("Bear-SkeletonCard p-4 rounded-lg border border-gray-200 dark:border-zinc-700 bg-white dark:bg-zinc-900",t),...l,children:[r.jsxs("div",{className:"flex items-center gap-3 mb-4",children:[r.jsx(m,{animation:e}),r.jsxs("div",{className:"flex-1",children:[r.jsx(a,{animation:e,width:"60%",height:16,className:"mb-2"}),r.jsx(a,{animation:e,width:"40%",height:12})]})]}),r.jsx(u,{animation:e,lines:3})]}));A.displayName="SkeletonCard";exports.Skeleton=a;exports.SkeletonAvatar=m;exports.SkeletonCard=A;exports.SkeletonText=u;

package/dist/components/Skeleton/Skeleton.const.cjs

@@ -0,0 +1,36 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e="Bear-Skeleton relative overflow-hidden",n={text:"rounded",circular:"rounded-full",rectangular:"rounded-none",rounded:"rounded-lg"},a={pulse:"animate-pulse",wave:"Bear-Skeleton--wave",none:""},r="bg-gray-200 dark:bg-zinc-700",S=`
+  @keyframes Bear-Skeleton-wave {
+    0% {
+      transform: translateX(-100%);
+    }
+    50% {
+      transform: translateX(100%);
+    }
+    100% {
+      transform: translateX(100%);
+    }
+  }
+  
+  .Bear-Skeleton--wave::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    transform: translateX(-100%);
+    background: linear-gradient(
+      90deg,
+      transparent,
+      rgba(255, 255, 255, 0.3),
+      transparent
+    );
+    animation: Bear-Skeleton-wave 1.6s linear 0.5s infinite;
+  }
+  
+  .dark .Bear-Skeleton--wave::after {
+    background: linear-gradient(
+      90deg,
+      transparent,
+      rgba(255, 255, 255, 0.1),
+      transparent
+    );
+  }
+`,t="1em",E={sm:32,md:40,lg:56};exports.SKELETON_ANIMATION_CLASSES=a;exports.SKELETON_AVATAR_SIZES=E;exports.SKELETON_BASE_CLASSES=e;exports.SKELETON_BG_CLASSES=r;exports.SKELETON_TEXT_HEIGHT=t;exports.SKELETON_VARIANT_CLASSES=n;exports.SKELETON_WAVE_STYLES=S;

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

@@ -0,0 +1,12 @@
+import { SkeletonVariant, SkeletonAnimation } from './Skeleton.types';
+export declare const SKELETON_BASE_CLASSES = "Bear-Skeleton relative overflow-hidden";
+export declare const SKELETON_VARIANT_CLASSES: Record<SkeletonVariant, string>;
+export declare const SKELETON_ANIMATION_CLASSES: Record<SkeletonAnimation, string>;
+export declare const SKELETON_BG_CLASSES = "bg-gray-200 dark:bg-zinc-700";
+export declare const SKELETON_WAVE_STYLES = "\n  @keyframes Bear-Skeleton-wave {\n    0% {\n      transform: translateX(-100%);\n    }\n    50% {\n      transform: translateX(100%);\n    }\n    100% {\n      transform: translateX(100%);\n    }\n  }\n  \n  .Bear-Skeleton--wave::after {\n    content: '';\n    position: absolute;\n    inset: 0;\n    transform: translateX(-100%);\n    background: linear-gradient(\n      90deg,\n      transparent,\n      rgba(255, 255, 255, 0.3),\n      transparent\n    );\n    animation: Bear-Skeleton-wave 1.6s linear 0.5s infinite;\n  }\n  \n  .dark .Bear-Skeleton--wave::after {\n    background: linear-gradient(\n      90deg,\n      transparent,\n      rgba(255, 255, 255, 0.1),\n      transparent\n    );\n  }\n";
+export declare const SKELETON_TEXT_HEIGHT = "1em";
+export declare const SKELETON_AVATAR_SIZES: {
+    sm: number;
+    md: number;
+    lg: number;
+};

package/dist/components/Skeleton/Skeleton.const.js

@@ -0,0 +1,58 @@
+const e = "Bear-Skeleton relative overflow-hidden", n = {
+  text: "rounded",
+  circular: "rounded-full",
+  rectangular: "rounded-none",
+  rounded: "rounded-lg"
+}, a = {
+  pulse: "animate-pulse",
+  wave: "Bear-Skeleton--wave",
+  none: ""
+}, r = "bg-gray-200 dark:bg-zinc-700", t = `
+  @keyframes Bear-Skeleton-wave {
+    0% {
+      transform: translateX(-100%);
+    }
+    50% {
+      transform: translateX(100%);
+    }
+    100% {
+      transform: translateX(100%);
+    }
+  }
+  
+  .Bear-Skeleton--wave::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    transform: translateX(-100%);
+    background: linear-gradient(
+      90deg,
+      transparent,
+      rgba(255, 255, 255, 0.3),
+      transparent
+    );
+    animation: Bear-Skeleton-wave 1.6s linear 0.5s infinite;
+  }
+  
+  .dark .Bear-Skeleton--wave::after {
+    background: linear-gradient(
+      90deg,
+      transparent,
+      rgba(255, 255, 255, 0.1),
+      transparent
+    );
+  }
+`, o = "1em", S = {
+  sm: 32,
+  md: 40,
+  lg: 56
+};
+export {
+  a as SKELETON_ANIMATION_CLASSES,
+  S as SKELETON_AVATAR_SIZES,
+  e as SKELETON_BASE_CLASSES,
+  r as SKELETON_BG_CLASSES,
+  o as SKELETON_TEXT_HEIGHT,
+  n as SKELETON_VARIANT_CLASSES,
+  t as SKELETON_WAVE_STYLES
+};

package/dist/components/Skeleton/Skeleton.d.ts

@@ -1,27 +1,18 @@
-import { FC } from 'react';
-import { SkeletonProps } from './Skeleton.types';
+import { SkeletonProps, SkeletonTextProps, SkeletonAvatarProps } from './Skeleton.types';
 /**
- * Skeleton component for loading placeholders
- *
- * @example
- * ```tsx
- * <Skeleton variant="text" width={200} />
- * <Skeleton variant="circular" width={40} height={40} />
- * <Skeleton variant="rectangular" width="100%" height={200} />
- * <Skeleton variant="text" count={3} />
- * ```
+ * Skeleton - Loading placeholder with animation
  */
-export declare const Skeleton: FC<SkeletonProps>;
-export declare const SkeletonAvatar: FC<{
-    size?: number;
-    className?: string;
-}>;
-export declare const SkeletonText: FC<{
-    lines?: number;
-    width?: number | string;
-    className?: string;
-}>;
-export declare const SkeletonCard: FC<{
-    className?: string;
-}>;
+export declare const Skeleton: import('react').ForwardRefExoticComponent<SkeletonProps & import('react').RefAttributes<HTMLDivElement>>;
+/**
+ * SkeletonText - Text placeholder with multiple lines
+ */
+export declare const SkeletonText: import('react').ForwardRefExoticComponent<SkeletonTextProps & import('react').RefAttributes<HTMLDivElement>>;
+/**
+ * SkeletonAvatar - Circular avatar placeholder
+ */
+export declare const SkeletonAvatar: import('react').ForwardRefExoticComponent<SkeletonAvatarProps & import('react').RefAttributes<HTMLDivElement>>;
+/**
+ * SkeletonCard - Card placeholder
+ */
+export declare const SkeletonCard: import('react').ForwardRefExoticComponent<SkeletonProps & import('react').RefAttributes<HTMLDivElement>>;
 export default Skeleton;

package/dist/components/Skeleton/Skeleton.js

@@ -1,116 +1,145 @@
-import { jsx as r, jsxs as c } from "react/jsx-runtime";
-import { cn as d } from "../../utils/cn.js";
-const h = {
-  text: "bear-rounded",
-  circular: "bear-rounded-full",
-  rectangular: "bear-rounded-none",
-  rounded: "bear-rounded-lg"
-}, m = {
-  pulse: "bear-animate-pulse",
-  wave: "bear-skeleton-wave",
-  none: ""
-}, a = ({
-  variant: e = "text",
-  animation: t = "pulse",
-  width: l,
-  height: i,
-  count: n = 1,
-  gap: x = 8,
-  className: o,
-  testId: u,
-  style: f,
-  ...b
-}) => {
-  const s = {
-    width: l || (e === "circular" ? 40 : "100%"),
-    height: (() => {
-      if (i) return i;
-      switch (e) {
-        case "text":
-          return "1em";
-        case "circular":
-          return l || 40;
-        default:
-          return "auto";
+import { jsx as r, jsxs as f } from "react/jsx-runtime";
+import { forwardRef as m, useEffect as _ } from "react";
+import { cn as A } from "../../utils/cn.js";
+import { SKELETON_BG_CLASSES as v, SKELETON_ANIMATION_CLASSES as L, SKELETON_VARIANT_CLASSES as b, SKELETON_BASE_CLASSES as C, SKELETON_TEXT_HEIGHT as w, SKELETON_AVATAR_SIZES as O, SKELETON_WAVE_STYLES as K } from "./Skeleton.const.js";
+const T = () => {
+  const e = "bear-skeleton-styles";
+  if (typeof document < "u" && !document.getElementById(e)) {
+    const t = document.createElement("style");
+    t.id = e, t.textContent = K, document.head.appendChild(t);
+  }
+}, i = m(
+  ({
+    variant: e = "text",
+    animation: t = "pulse",
+    width: l,
+    height: s,
+    borderRadius: d,
+    count: S = 1,
+    gap: E = 8,
+    className: o,
+    style: a,
+    testId: p,
+    ...h
+  }, y) => {
+    _(() => {
+      t === "wave" && T();
+    }, [t]);
+    const c = (n) => {
+      if (n !== void 0)
+        return typeof n == "number" ? `${n}px` : n;
+    }, N = {
+      width: c(l),
+      height: c(s) || (e === "text" ? w : void 0),
+      borderRadius: d ? c(d) : void 0,
+      ...a
+    }, g = A(
+      C,
+      b[e],
+      L[t],
+      v,
+      o
+    );
+    return S > 1 ? /* @__PURE__ */ r(
+      "div",
+      {
+        className: "Bear-Skeleton__group flex flex-col",
+        style: { gap: c(E) },
+        "data-testid": p,
+        children: Array.from({ length: S }).map((n, u) => /* @__PURE__ */ r(
+          "div",
+          {
+            ref: u === 0 ? y : void 0,
+            className: g,
+            style: N,
+            ...h
+          },
+          u
+        ))
+      }
+    ) : /* @__PURE__ */ r(
+      "div",
+      {
+        ref: y,
+        className: g,
+        style: N,
+        "data-testid": p,
+        ...h
       }
-    })(),
-    ...f
-  };
-  return n > 1 && e === "text" ? /* @__PURE__ */ r(
+    );
+  }
+);
+i.displayName = "Skeleton";
+const k = m(
+  ({ lines: e = 3, lastLineWidth: t = "80%", gap: l = 8, animation: s = "pulse", ...d }, S) => (_(() => {
+    s === "wave" && T();
+  }, [s]), /* @__PURE__ */ r(
     "div",
     {
-      className: "bear-flex bear-flex-col",
-      style: { gap: x },
-      "data-testid": u,
-      children: Array.from({ length: n }).map((N, g) => /* @__PURE__ */ r(
-        "div",
+      ref: S,
+      className: "Bear-SkeletonText flex flex-col",
+      style: { gap: ((o) => {
+        if (o !== void 0)
+          return typeof o == "number" ? `${o}px` : o;
+      })(l) },
+      children: Array.from({ length: e }).map((o, a) => /* @__PURE__ */ r(
+        i,
         {
-          className: d(
-            "bear-bg-gray-200 dark:bear-bg-gray-700",
-            h[e],
-            m[t],
-            o
-          ),
-          style: {
-            ...s,
-            width: g === n - 1 ? "80%" : s.width
-          },
-          ...b
+          variant: "text",
+          animation: s,
+          width: a === e - 1 ? t : "100%",
+          ...d
         },
-        g
+        a
       ))
     }
-  ) : /* @__PURE__ */ r(
+  ))
+);
+k.displayName = "SkeletonText";
+const x = m(
+  ({ size: e = "md", animation: t = "pulse", ...l }, s) => {
+    const d = typeof e == "number" ? e : O[e];
+    return /* @__PURE__ */ r(
+      i,
+      {
+        ref: s,
+        variant: "circular",
+        animation: t,
+        width: d,
+        height: d,
+        ...l
+      }
+    );
+  }
+);
+x.displayName = "SkeletonAvatar";
+const B = m(
+  ({ animation: e = "pulse", className: t, ...l }, s) => /* @__PURE__ */ f(
     "div",
     {
-      className: d(
-        "bear-bg-gray-200 dark:bear-bg-gray-700",
-        h[e],
-        m[t],
-        o
+      ref: s,
+      className: A(
+        "Bear-SkeletonCard p-4 rounded-lg border border-gray-200 dark:border-zinc-700 bg-white dark:bg-zinc-900",
+        t
       ),
-      style: s,
-      "data-testid": u,
-      ...b
+      ...l,
+      children: [
+        /* @__PURE__ */ f("div", { className: "flex items-center gap-3 mb-4", children: [
+          /* @__PURE__ */ r(x, { animation: e }),
+          /* @__PURE__ */ f("div", { className: "flex-1", children: [
+            /* @__PURE__ */ r(i, { animation: e, width: "60%", height: 16, className: "mb-2" }),
+            /* @__PURE__ */ r(i, { animation: e, width: "40%", height: 12 })
+          ] })
+        ] }),
+        /* @__PURE__ */ r(k, { animation: e, lines: 3 })
+      ]
     }
-  );
-}, S = ({
-  size: e = 40,
-  className: t
-}) => /* @__PURE__ */ r(
-  a,
-  {
-    variant: "circular",
-    width: e,
-    height: e,
-    className: t
-  }
-), v = ({
-  lines: e = 3,
-  width: t = "100%",
-  className: l
-}) => /* @__PURE__ */ r(
-  a,
-  {
-    variant: "text",
-    count: e,
-    width: t,
-    className: l
-  }
-), w = ({ className: e }) => /* @__PURE__ */ c("div", { className: d("bear-p-4 bear-space-y-4", e), children: [
-  /* @__PURE__ */ r(a, { variant: "rectangular", height: 200 }),
-  /* @__PURE__ */ c("div", { className: "bear-flex bear-items-center bear-gap-3", children: [
-    /* @__PURE__ */ r(S, {}),
-    /* @__PURE__ */ c("div", { className: "bear-flex-1", children: [
-      /* @__PURE__ */ r(a, { variant: "text", width: "60%" }),
-      /* @__PURE__ */ r(a, { variant: "text", width: "40%", className: "bear-mt-2" })
-    ] })
-  ] }),
-  /* @__PURE__ */ r(v, { lines: 3 })
-] });
+  )
+);
+B.displayName = "SkeletonCard";
 export {
-  a as Skeleton,
-  S as SkeletonAvatar,
-  w as SkeletonCard,
-  v as SkeletonText
+  i as Skeleton,
+  x as SkeletonAvatar,
+  B as SkeletonCard,
+  k as SkeletonText
 };

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

@@ -2,20 +2,30 @@ import { HTMLAttributes } from 'react';
 export type SkeletonVariant = 'text' | 'circular' | 'rectangular' | 'rounded';
 export type SkeletonAnimation = 'pulse' | 'wave' | 'none';
 export interface SkeletonProps extends HTMLAttributes<HTMLDivElement> {
-    /** The variant of the skeleton */
+    /** Variant type */
     variant?: SkeletonVariant;
     /** Animation type */
     animation?: SkeletonAnimation;
-    /** Width of the skeleton */
+    /** Width (number = px, string = any CSS unit) */
     width?: number | string;
-    /** Height of the skeleton */
+    /** Height (number = px, string = any CSS unit) */
     height?: number | string;
-    /** Number of skeleton lines to render (for text variant) */
+    /** Border radius for rounded variant */
+    borderRadius?: number | string;
+    /** Number of skeleton lines to show */
     count?: number;
-    /** Gap between skeleton lines */
+    /** Gap between lines when count > 1 */
     gap?: number | string;
-    /** Additional CSS class */
-    className?: string;
-    /** Test ID for testing */
+    /** Test ID */
     testId?: string;
 }
+export interface SkeletonTextProps extends Omit<SkeletonProps, 'variant'> {
+    /** Number of lines */
+    lines?: number;
+    /** Make last line shorter */
+    lastLineWidth?: number | string;
+}
+export interface SkeletonAvatarProps extends Omit<SkeletonProps, 'variant' | 'width' | 'height'> {
+    /** Size of avatar */
+    size?: 'sm' | 'md' | 'lg' | number;
+}

package/dist/components/Skeleton/index.d.ts

@@ -1,2 +1,2 @@
-export { Skeleton, SkeletonAvatar, SkeletonText, SkeletonCard } from './Skeleton';
-export type { SkeletonProps, SkeletonVariant, SkeletonAnimation } from './Skeleton.types';
+export { Skeleton, SkeletonText, SkeletonAvatar, SkeletonCard } from './Skeleton';
+export type { SkeletonProps, SkeletonTextProps, SkeletonAvatarProps, SkeletonVariant, SkeletonAnimation } from './Skeleton.types';

package/dist/components/Sparkline/Sparkline.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),N=require("react"),i=require("../../utils/cn.cjs"),t=require("./Sparkline.const.cjs"),S=require("./Sparkline.utils.cjs"),L=d=>{const{data:a,width:I=t.SPARKLINE.DEFAULT_WIDTH,height:f=t.SPARKLINE.DEFAULT_HEIGHT,color:s=t.SPARKLINE.DEFAULT_COLOR,fill:p=!1,strokeWidth:R=t.SPARKLINE.DEFAULT_STROKE_WIDTH,showExtremes:o=!1,animated:c=!0,className:x,...A}=d,{path:u,areaPath:E,minPoint:n,maxPoint:r}=N.useMemo(()=>S.calculateSparklinePathData(a),[a]),l=`sparkline-gradient-${s.replace("#","")}`;return e.jsx("div",{className:i.cn("inline-block",x),style:{width:I,height:f},...A,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:l,x1:"0%",y1:"0%",x2:"0%",y2:"100%",children:[e.jsx("stop",{offset:"0%",stopColor:s,stopOpacity:"0.4"}),e.jsx("stop",{offset:"100%",stopColor:s,stopOpacity:"0"})]})}),p&&e.jsx("path",{d:E,fill:`url(#${l})`,className:i.cn(c&&"animate-fade-in")}),e.jsx("path",{d:u,fill:"none",stroke:s,strokeWidth:R,strokeLinecap:"round",strokeLinejoin:"round",vectorEffect:"non-scaling-stroke",className:i.cn(c&&"animate-draw-line")}),o&&n&&e.jsx("circle",{cx:n.x,cy:n.y,r:t.SPARKLINE.INDICATOR_RADIUS,fill:t.SPARKLINE.MIN_INDICATOR_COLOR,vectorEffect:"non-scaling-stroke"}),o&&r&&e.jsx("circle",{cx:r.x,cy:r.y,r:t.SPARKLINE.INDICATOR_RADIUS,fill:t.SPARKLINE.MAX_INDICATOR_COLOR,vectorEffect:"non-scaling-stroke"})]})})};exports.Sparkline=L;

package/dist/components/Sparkline/Sparkline.const.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const I={DEFAULT_WIDTH:100,DEFAULT_HEIGHT:32,DEFAULT_COLOR:"#ec4899",DEFAULT_STROKE_WIDTH:2,VIEWBOX_SIZE:100,Y_PADDING:10,Y_RANGE:80,CONTROL_POINT_FACTOR:3,MIN_INDICATOR_COLOR:"#ef4444",MAX_INDICATOR_COLOR:"#10b981",INDICATOR_RADIUS:3};exports.SPARKLINE=I;

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

@@ -0,0 +1,16 @@
+/**
+ * Sparkline constants
+ */
+export declare const SPARKLINE: {
+    readonly DEFAULT_WIDTH: 100;
+    readonly DEFAULT_HEIGHT: 32;
+    readonly DEFAULT_COLOR: "#ec4899";
+    readonly DEFAULT_STROKE_WIDTH: 2;
+    readonly VIEWBOX_SIZE: 100;
+    readonly Y_PADDING: 10;
+    readonly Y_RANGE: 80;
+    readonly CONTROL_POINT_FACTOR: 3;
+    readonly MIN_INDICATOR_COLOR: "#ef4444";
+    readonly MAX_INDICATOR_COLOR: "#10b981";
+    readonly INDICATOR_RADIUS: 3;
+};

package/dist/components/Sparkline/Sparkline.const.js

@@ -0,0 +1,16 @@
+const I = {
+  DEFAULT_WIDTH: 100,
+  DEFAULT_HEIGHT: 32,
+  DEFAULT_COLOR: "#ec4899",
+  DEFAULT_STROKE_WIDTH: 2,
+  VIEWBOX_SIZE: 100,
+  Y_PADDING: 10,
+  Y_RANGE: 80,
+  CONTROL_POINT_FACTOR: 3,
+  MIN_INDICATOR_COLOR: "#ef4444",
+  MAX_INDICATOR_COLOR: "#10b981",
+  INDICATOR_RADIUS: 3
+};
+export {
+  I as SPARKLINE
+};

package/dist/components/Sparkline/Sparkline.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { SparklineProps } from './Sparkline.types';
+export declare const Sparkline: FC<SparklineProps>;

package/dist/components/Sparkline/Sparkline.js

@@ -0,0 +1,80 @@
+import { jsx as e, jsxs as f } from "react/jsx-runtime";
+import { useMemo as R } from "react";
+import { cn as i } from "../../utils/cn.js";
+import { SPARKLINE as t } from "./Sparkline.const.js";
+import { calculateSparklinePathData as T } from "./Sparkline.utils.js";
+const u = (p) => {
+  const {
+    data: s,
+    width: m = t.DEFAULT_WIDTH,
+    height: d = t.DEFAULT_HEIGHT,
+    color: o = t.DEFAULT_COLOR,
+    fill: I = !1,
+    strokeWidth: h = t.DEFAULT_STROKE_WIDTH,
+    showExtremes: l = !1,
+    animated: n = !0,
+    className: A,
+    ...D
+  } = p, { path: O, areaPath: x, minPoint: r, maxPoint: a } = R(
+    () => T(s),
+    [s]
+  ), c = `sparkline-gradient-${o.replace("#", "")}`;
+  return /* @__PURE__ */ e(
+    "div",
+    {
+      className: i("inline-block", A),
+      style: { width: m, height: d },
+      ...D,
+      children: /* @__PURE__ */ f("svg", { viewBox: "0 0 100 100", preserveAspectRatio: "none", className: "w-full h-full", children: [
+        /* @__PURE__ */ e("defs", { children: /* @__PURE__ */ f("linearGradient", { id: c, x1: "0%", y1: "0%", x2: "0%", y2: "100%", children: [
+          /* @__PURE__ */ e("stop", { offset: "0%", stopColor: o, stopOpacity: "0.4" }),
+          /* @__PURE__ */ e("stop", { offset: "100%", stopColor: o, stopOpacity: "0" })
+        ] }) }),
+        I && /* @__PURE__ */ e(
+          "path",
+          {
+            d: x,
+            fill: `url(#${c})`,
+            className: i(n && "animate-fade-in")
+          }
+        ),
+        /* @__PURE__ */ e(
+          "path",
+          {
+            d: O,
+            fill: "none",
+            stroke: o,
+            strokeWidth: h,
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            vectorEffect: "non-scaling-stroke",
+            className: i(n && "animate-draw-line")
+          }
+        ),
+        l && r && /* @__PURE__ */ e(
+          "circle",
+          {
+            cx: r.x,
+            cy: r.y,
+            r: t.INDICATOR_RADIUS,
+            fill: t.MIN_INDICATOR_COLOR,
+            vectorEffect: "non-scaling-stroke"
+          }
+        ),
+        l && a && /* @__PURE__ */ e(
+          "circle",
+          {
+            cx: a.x,
+            cy: a.y,
+            r: t.INDICATOR_RADIUS,
+            fill: t.MAX_INDICATOR_COLOR,
+            vectorEffect: "non-scaling-stroke"
+          }
+        )
+      ] })
+    }
+  );
+};
+export {
+  u as Sparkline
+};

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

@@ -0,0 +1,19 @@
+import { HTMLAttributes } from 'react';
+export interface SparklineProps extends HTMLAttributes<HTMLDivElement> {
+    /** Data points (array of numbers) */
+    data: number[];
+    /** Width of the sparkline */
+    width?: number;
+    /** Height of the sparkline */
+    height?: number;
+    /** Line color */
+    color?: string;
+    /** Fill area under the line */
+    fill?: boolean;
+    /** Line width */
+    strokeWidth?: number;
+    /** Show min/max indicators */
+    showExtremes?: boolean;
+    /** Animate on render */
+    animated?: boolean;
+}