@forgedevstack/bear 1.1.3 → 1.1.4

package/dist/components/Input/Input.js

@@ -1,94 +1,127 @@
-import { jsxs as a, jsx as r } from "react/jsx-runtime";
-import { forwardRef as H, useContext as J } from "react";
-import { cn as l } from "../../utils/cn.js";
-import { BearContext as K } from "../../context/BearProvider.js";
-import { ClearIcon as N } from "./components/ClearIcon/ClearIcon.js";
-const P = {
+import { jsxs as s, jsx as t } from "react/jsx-runtime";
+import { forwardRef as ae, useContext as te, useState as se, useRef as be, useCallback as B, useEffect as le } from "react";
+import { cn as f } from "../../utils/cn.js";
+import { BearContext as ne } from "../../context/BearProvider.js";
+import { ClearIcon as D } from "./components/ClearIcon/ClearIcon.js";
+import { applyAutoFormat as ce } from "./Input.utils.js";
+import { validateFieldValue as ie } from "../Form/Form.utils.js";
+const ue = {
   sm: "bear-h-8 bear-text-sm bear-px-3",
   md: "bear-h-10 bear-text-base bear-px-4",
   lg: "bear-h-12 bear-text-lg bear-px-5"
-}, Q = H(
+}, oe = ae(
   ({
-    label: p,
-    helperText: w,
-    error: g,
-    success: x,
-    size: v = "md",
-    leftAddon: n,
-    rightAddon: t,
-    fullWidth: C = !1,
-    clearable: j = !1,
-    onClear: _,
-    showCharCount: h = !1,
-    charCountMax: M,
-    className: z,
-    disabled: i,
-    value: o,
-    defaultValue: c,
-    maxLength: y,
-    ...E
-  }, L) => {
-    var k;
-    const d = J(K), e = (k = d == null ? void 0 : d.components) == null ? void 0 : k.Input, O = e == null ? void 0 : e.root, R = e == null ? void 0 : e.input, q = e == null ? void 0 : e.label, D = e == null ? void 0 : e.helper, F = e == null ? void 0 : e.prefix, m = e == null ? void 0 : e.suffix, b = !!g, I = !!x && !b, s = M ?? y, u = typeof o == "string" ? o.length : typeof c == "string" ? c.length : 0, G = s != null && u > s, f = j && !i && u > 0, B = g || x || w;
-    return /* @__PURE__ */ a("div", { className: l("Bear-Input bear-flex bear-flex-col bear-gap-1.5", C && "bear-w-full"), style: O, children: [
-      p && /* @__PURE__ */ r("label", { className: "Bear-Input__label bear-text-sm bear-font-medium bear-text-gray-700 dark:bear-text-gray-300", style: q, children: p }),
-      /* @__PURE__ */ a("div", { className: "Bear-Input__wrapper bear-relative bear-flex bear-items-center", children: [
-        n && /* @__PURE__ */ r("div", { className: "Bear-Input__addon Bear-Input__addon--left bear-absolute bear-left-3 bear-text-gray-500 dark:bear-text-gray-400", style: F, children: n }),
-        /* @__PURE__ */ r(
+    label: k,
+    helperText: F,
+    error: d,
+    success: N,
+    size: G = "md",
+    leftAddon: p,
+    rightAddon: b,
+    fullWidth: H = !1,
+    clearable: J = !1,
+    onClear: w,
+    showCharCount: v = !1,
+    charCountMax: K,
+    autoFormat: g,
+    validation: a,
+    validateOnBlur: Q,
+    validateOnChange: E = !1,
+    className: T,
+    disabled: x,
+    value: _,
+    defaultValue: y,
+    maxLength: j,
+    onChange: l,
+    onBlur: n,
+    ...U
+  }, W) => {
+    var q;
+    const h = te(ne), e = (q = h == null ? void 0 : h.components) == null ? void 0 : q.Input, X = e == null ? void 0 : e.root, Y = e == null ? void 0 : e.input, Z = e == null ? void 0 : e.label, $ = e == null ? void 0 : e.helper, P = e == null ? void 0 : e.prefix, M = e == null ? void 0 : e.suffix, [S, R] = se(null), z = be(!1), C = a ? Q ?? !0 : !1, L = d || S, c = !!L, O = !!N && !c, i = K ?? j, m = typeof _ == "string" ? _.length : typeof y == "string" ? y.length : 0, A = i != null && m > i, I = J && !x && m > 0, V = L || N || F, u = B(async (r) => {
+      if (!a) return;
+      z.current = !0;
+      const o = await ie(r, a);
+      z.current = !1, R(o);
+    }, [a]);
+    le(() => {
+      d && R(null);
+    }, [d]);
+    const ee = B(
+      (r) => {
+        if (g) {
+          const o = ce(r.target.value, g);
+          o !== r.target.value && (r.target.value = o);
+        }
+        l == null || l(r), E && a && u(r.target.value);
+      },
+      [g, l, E, a, u]
+    ), re = B(
+      (r) => {
+        n == null || n(r), C && a && u(r.target.value);
+      },
+      [n, C, a, u]
+    );
+    return /* @__PURE__ */ s("div", { className: f("Bear-Input bear-flex bear-flex-col bear-gap-1.5", H && "bear-w-full"), style: X, children: [
+      k && /* @__PURE__ */ t("label", { className: "Bear-Input__label bear-text-sm bear-font-medium bear-text-gray-700 dark:bear-text-gray-300", style: Z, children: k }),
+      /* @__PURE__ */ s("div", { className: "Bear-Input__wrapper bear-relative bear-flex bear-items-center", children: [
+        p && /* @__PURE__ */ t("div", { className: "Bear-Input__addon Bear-Input__addon--left bear-absolute bear-left-3 bear-text-gray-500 dark:bear-text-gray-400", style: P, children: p }),
+        /* @__PURE__ */ t(
           "input",
           {
-            ref: L,
-            disabled: i,
-            value: o,
-            defaultValue: c,
-            maxLength: y,
-            "aria-invalid": b || void 0,
-            className: l(
+            ref: W,
+            disabled: x,
+            value: _,
+            defaultValue: y,
+            maxLength: j,
+            "aria-invalid": c || void 0,
+            onChange: ee,
+            onBlur: re,
+            className: f(
               "Bear-Input__field",
               "bear-w-full bear-rounded-lg bear-border bear-outline-none bear-transition-all bear-duration-200",
               "bear-bg-white bear-text-gray-900 placeholder:bear-text-gray-400",
               "bear-border-gray-300 focus:bear-ring-2 focus:bear-ring-offset-2 focus:bear-ring-offset-white",
               "dark:bear-bg-gray-800 dark:bear-text-white dark:placeholder:bear-text-gray-500 dark:bear-border-gray-600 dark:focus:bear-ring-offset-gray-900",
-              b ? "Bear-Input__field--error bear-border-red-500 focus:bear-ring-red-500" : I ? "Bear-Input__field--success bear-border-green-500 focus:bear-ring-green-500" : "focus:bear-border-bear-500 focus:bear-ring-bear-500 dark:focus:bear-border-bear-500 dark:focus:bear-ring-bear-500",
-              i && "Bear-Input__field--disabled bear-opacity-50 bear-cursor-not-allowed",
-              n && "bear-pl-10",
-              (t || f) && "bear-pr-10",
-              P[v],
-              z
+              c ? "Bear-Input__field--error bear-border-red-500 focus:bear-ring-red-500" : O ? "Bear-Input__field--success bear-border-green-500 focus:bear-ring-green-500" : "focus:bear-border-bear-500 focus:bear-ring-bear-500 dark:focus:bear-border-bear-500 dark:focus:bear-ring-bear-500",
+              x && "Bear-Input__field--disabled bear-opacity-50 bear-cursor-not-allowed",
+              p && "bear-pl-10",
+              (b || I) && "bear-pr-10",
+              ue[G],
+              T
             ),
-            style: R,
-            ...E
+            style: Y,
+            ...U
           }
         ),
-        f && !t && /* @__PURE__ */ r("div", { className: "Bear-Input__addon Bear-Input__addon--right bear-absolute bear-right-3 bear-text-gray-500 dark:bear-text-gray-400", style: m, children: /* @__PURE__ */ r(N, { onClick: _ }) }),
-        t && /* @__PURE__ */ a("div", { className: "Bear-Input__addon Bear-Input__addon--right bear-absolute bear-right-3 bear-flex bear-items-center bear-gap-1.5 bear-text-gray-500 dark:bear-text-gray-400", style: m, children: [
-          f && /* @__PURE__ */ r(N, { onClick: _ }),
-          t
+        I && !b && /* @__PURE__ */ t("div", { className: "Bear-Input__addon Bear-Input__addon--right bear-absolute bear-right-3 bear-text-gray-500 dark:bear-text-gray-400", style: M, children: /* @__PURE__ */ t(D, { onClick: w }) }),
+        b && /* @__PURE__ */ s("div", { className: "Bear-Input__addon Bear-Input__addon--right bear-absolute bear-right-3 bear-flex bear-items-center bear-gap-1.5 bear-text-gray-500 dark:bear-text-gray-400", style: M, children: [
+          I && /* @__PURE__ */ t(D, { onClick: w }),
+          b
         ] })
       ] }),
-      /* @__PURE__ */ a("div", { className: "Bear-Input__footer bear-flex bear-items-center bear-justify-between bear-gap-2", children: [
-        B ? /* @__PURE__ */ r(
+      /* @__PURE__ */ s("div", { className: "Bear-Input__footer bear-flex bear-items-center bear-justify-between bear-gap-2", children: [
+        V ? /* @__PURE__ */ t(
           "p",
           {
-            className: l(
+            className: f(
               "Bear-Input__helper bear-text-sm bear-flex-1",
-              b ? "Bear-Input__helper--error bear-text-red-500" : I ? "Bear-Input__helper--success bear-text-green-500" : "bear-text-gray-500 dark:bear-text-gray-400"
+              c ? "Bear-Input__helper--error bear-text-red-500" : O ? "Bear-Input__helper--success bear-text-green-500" : "bear-text-gray-500 dark:bear-text-gray-400"
             ),
-            style: D,
-            children: B
+            style: $,
+            children: V
           }
-        ) : h ? /* @__PURE__ */ r("span", {}) : null,
-        h && s != null && /* @__PURE__ */ a(
+        ) : v ? /* @__PURE__ */ t("span", {}) : null,
+        v && i != null && /* @__PURE__ */ s(
           "span",
           {
-            className: l(
+            className: f(
               "Bear-Input__char-count bear-text-xs bear-tabular-nums bear-shrink-0",
-              G ? "bear-text-red-500" : "bear-text-gray-400 dark:bear-text-gray-500"
+              A ? "bear-text-red-500" : "bear-text-gray-400 dark:bear-text-gray-500"
             ),
             children: [
-              u,
+              m,
               "/",
-              s
+              i
             ]
           }
         )
@@ -96,7 +129,7 @@ const P = {
     ] });
   }
 );
-Q.displayName = "Input";
+oe.displayName = "Input";
 export {
-  Q as Input
+  oe as Input
 };

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

@@ -1,4 +1,6 @@
 import { InputHTMLAttributes, ReactNode } from 'react';
+import { ValidationRule } from '../Form/Form.types';
+export type AutoFormatType = 'capitalize' | 'uppercase' | 'lowercase' | 'titleCase' | 'sentenceCase' | 'none';
 export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
     /** Input label */
     label?: string;
@@ -24,4 +26,12 @@ export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>,
     showCharCount?: boolean;
     /** Max chars for counter display (alternative to maxLength when you don't want native enforcement) */
     charCountMax?: number;
+    /** Auto-format text on change using Anvil string utils */
+    autoFormat?: AutoFormatType;
+    /** Validation rules (reuses Form's ValidationRule) */
+    validation?: ValidationRule;
+    /** Run validation on blur (default true when validation is set) */
+    validateOnBlur?: boolean;
+    /** Run validation on change */
+    validateOnChange?: boolean;
 }

package/dist/components/Input/Input.utils.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("@forgedevstack/anvil"),n=e=>e.toUpperCase(),a=e=>e.toLowerCase(),r={capitalize:o.capitalize,uppercase:n,lowercase:a,titleCase:o.titleCase,sentenceCase:o.sentenceCase},c=(e,t)=>{if(!t||t==="none")return e;const s=r[t];return s?s(e):e};exports.applyAutoFormat=c;

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

@@ -0,0 +1,2 @@
+import { AutoFormatType } from './Input.types';
+export declare const applyAutoFormat: (value: string, format: AutoFormatType | undefined) => string;

package/dist/components/Input/Input.utils.js

@@ -0,0 +1,15 @@
+import { sentenceCase as s, titleCase as n, capitalize as r } from "@forgedevstack/anvil";
+const p = (e) => e.toUpperCase(), c = (e) => e.toLowerCase(), a = {
+  capitalize: r,
+  uppercase: p,
+  lowercase: c,
+  titleCase: n,
+  sentenceCase: s
+}, i = (e, t) => {
+  if (!t || t === "none") return e;
+  const o = a[t];
+  return o ? o(e) : e;
+};
+export {
+  i as applyAutoFormat
+};

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

@@ -1,2 +1,2 @@
 export { Input } from './Input';
-export type { InputProps } from './Input.types';
+export type { InputProps, AutoFormatType } from './Input.types';

package/dist/components/LoadingOverlay/LoadingOverlay.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),u=require("../../utils/cn.cjs");require("react");const y=require("../Typography/Typography.cjs"),A=require("../Spinner/Spinner.cjs"),e=require("./LoadingOverlay.const.cjs"),S={sm:"sm",md:"md",lg:"lg"},_=({visible:a,loader:t,overlayOpacity:n=e.DEFAULT_OVERLAY_OPACITY,overlayBlur:i=e.DEFAULT_OVERLAY_BLUR,zIndex:c=e.DEFAULT_Z_INDEX,loaderSize:o="md",label:s,children:d,className:l,testId:p,...L})=>r.jsxs("div",{className:u.cn(e.ROOT_CLASS,l),"data-testid":p,...L,children:[d,a&&r.jsxs("div",{className:e.OVERLAY_CLASS,style:{opacity:n,backdropFilter:`blur(${i}px)`,WebkitBackdropFilter:`blur(${i}px)`,zIndex:c},"aria-busy":!0,"aria-live":"polite",children:[t??r.jsx(A.Spinner,{size:S[o],className:"bear-text-pink-500 dark:bear-text-pink-400"}),s&&r.jsx(y.Typography,{variant:"body2",color:"secondary",className:e.LABEL_CLASS,children:s})]})]});exports.LoadingOverlay=_;

package/dist/components/LoadingOverlay/LoadingOverlay.const.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=.5,a=2,r=10,L="Bear-LoadingOverlay bear-relative",t="bear-absolute bear-inset-0 bear-flex bear-flex-col bear-items-center bear-justify-center bear-transition-opacity bear-duration-200 bear-bg-white/50 dark:bear-bg-zinc-900/50",A="Bear-LoadingOverlay__label bear-mt-2";exports.DEFAULT_OVERLAY_BLUR=a;exports.DEFAULT_OVERLAY_OPACITY=e;exports.DEFAULT_Z_INDEX=r;exports.LABEL_CLASS=A;exports.OVERLAY_CLASS=t;exports.ROOT_CLASS=L;

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

@@ -0,0 +1,6 @@
+export declare const DEFAULT_OVERLAY_OPACITY = 0.5;
+export declare const DEFAULT_OVERLAY_BLUR = 2;
+export declare const DEFAULT_Z_INDEX = 10;
+export declare const ROOT_CLASS = "Bear-LoadingOverlay bear-relative";
+export declare const OVERLAY_CLASS = "bear-absolute bear-inset-0 bear-flex bear-flex-col bear-items-center bear-justify-center bear-transition-opacity bear-duration-200 bear-bg-white/50 dark:bear-bg-zinc-900/50";
+export declare const LABEL_CLASS = "Bear-LoadingOverlay__label bear-mt-2";

package/dist/components/LoadingOverlay/LoadingOverlay.const.js

@@ -0,0 +1,9 @@
+const e = 0.5, a = 2, r = 10, t = "Bear-LoadingOverlay bear-relative", b = "bear-absolute bear-inset-0 bear-flex bear-flex-col bear-items-center bear-justify-center bear-transition-opacity bear-duration-200 bear-bg-white/50 dark:bear-bg-zinc-900/50", n = "Bear-LoadingOverlay__label bear-mt-2";
+export {
+  a as DEFAULT_OVERLAY_BLUR,
+  e as DEFAULT_OVERLAY_OPACITY,
+  r as DEFAULT_Z_INDEX,
+  n as LABEL_CLASS,
+  b as OVERLAY_CLASS,
+  t as ROOT_CLASS
+};

package/dist/components/LoadingOverlay/LoadingOverlay.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { LoadingOverlayProps } from './LoadingOverlay.types';
+export declare const LoadingOverlay: FC<LoadingOverlayProps>;
+export default LoadingOverlay;

package/dist/components/LoadingOverlay/LoadingOverlay.js

@@ -0,0 +1,42 @@
+import { jsxs as t, jsx as a } from "react/jsx-runtime";
+import { cn as L } from "../../utils/cn.js";
+import "react";
+import { Typography as A } from "../Typography/Typography.js";
+import { Spinner as _ } from "../Spinner/Spinner.js";
+import { DEFAULT_Z_INDEX as E, DEFAULT_OVERLAY_BLUR as S, DEFAULT_OVERLAY_OPACITY as b, OVERLAY_CLASS as x, LABEL_CLASS as y, ROOT_CLASS as N } from "./LoadingOverlay.const.js";
+const O = { sm: "sm", md: "md", lg: "lg" }, h = ({
+  visible: e,
+  loader: o,
+  overlayOpacity: m = b,
+  overlayBlur: r = S,
+  zIndex: s = E,
+  loaderSize: p = "md",
+  label: i,
+  children: d,
+  className: c,
+  testId: l,
+  ...n
+}) => /* @__PURE__ */ t("div", { className: L(N, c), "data-testid": l, ...n, children: [
+  d,
+  e && /* @__PURE__ */ t(
+    "div",
+    {
+      className: x,
+      style: {
+        opacity: m,
+        backdropFilter: `blur(${r}px)`,
+        WebkitBackdropFilter: `blur(${r}px)`,
+        zIndex: s
+      },
+      "aria-busy": !0,
+      "aria-live": "polite",
+      children: [
+        o ?? /* @__PURE__ */ a(_, { size: O[p], className: "bear-text-pink-500 dark:bear-text-pink-400" }),
+        i && /* @__PURE__ */ a(A, { variant: "body2", color: "secondary", className: y, children: i })
+      ]
+    }
+  )
+] });
+export {
+  h as LoadingOverlay
+};

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

@@ -0,0 +1,11 @@
+import { ReactNode, HTMLAttributes } from 'react';
+export interface LoadingOverlayProps extends HTMLAttributes<HTMLDivElement> {
+    visible: boolean;
+    loader?: ReactNode;
+    overlayOpacity?: number;
+    overlayBlur?: number;
+    zIndex?: number;
+    loaderSize?: 'sm' | 'md' | 'lg';
+    label?: string;
+    testId?: string;
+}

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

@@ -0,0 +1,2 @@
+export { LoadingOverlay, default } from './LoadingOverlay';
+export type { LoadingOverlayProps } from './LoadingOverlay.types';

package/dist/components/NumberFormatter/NumberFormatter.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const S=require("react/jsx-runtime"),r=require("react"),T=require("../../utils/cn.cjs"),u=require("./NumberFormatter.const.cjs"),_=require("./NumberFormatter.utils.cjs"),g=t=>{const{value:e,prefix:A="",suffix:F="",animated:c=!1,animationDuration:o=u.DEFAULT_ANIMATION_DURATION,className:N,testId:y,...D}=t,M=r.useMemo(()=>_.buildFormatter(t),[t.formatStyle,t.locale,t.currency,t.currencyDisplay,t.unit,t.unitDisplay,t.notation,t.minimumFractionDigits,t.maximumFractionDigits,t.signDisplay]),[R,n]=r.useState(e),a=r.useRef(e),i=r.useRef(0);r.useEffect(()=>{if(!c){n(e),a.current=e;return}const m=a.current,l=e-m;if(l===0)return;const f=Math.max(1,Math.round(o/u.ANIMATION_FRAME_RATE));let s=0;const d=()=>{s++;const q=s/f,I=1-Math.pow(1-q,3);n(m+l*I),s<f?i.current=requestAnimationFrame(d):(n(e),a.current=e)};return i.current=requestAnimationFrame(d),()=>cancelAnimationFrame(i.current)},[e,c,o]);const b=M.format(R);return S.jsxs("span",{className:T.cn(u.ROOT_CLASSES,N),"data-testid":y,...D,children:[A,b,F]})};exports.NumberFormatter=g;

package/dist/components/NumberFormatter/NumberFormatter.const.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const A="en-US",T="USD",E=400,e=16,t="Bear-NumberFormatter bear-inline bear-tabular-nums";exports.ANIMATION_FRAME_RATE=e;exports.DEFAULT_ANIMATION_DURATION=E;exports.DEFAULT_CURRENCY=T;exports.DEFAULT_LOCALE=A;exports.ROOT_CLASSES=t;

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

@@ -0,0 +1,5 @@
+export declare const DEFAULT_LOCALE = "en-US";
+export declare const DEFAULT_CURRENCY = "USD";
+export declare const DEFAULT_ANIMATION_DURATION = 400;
+export declare const ANIMATION_FRAME_RATE = 16;
+export declare const ROOT_CLASSES = "Bear-NumberFormatter bear-inline bear-tabular-nums";

package/dist/components/NumberFormatter/NumberFormatter.const.js

@@ -0,0 +1,8 @@
+const A = "en-US", n = "USD", t = 400, e = 16, r = "Bear-NumberFormatter bear-inline bear-tabular-nums";
+export {
+  e as ANIMATION_FRAME_RATE,
+  t as DEFAULT_ANIMATION_DURATION,
+  n as DEFAULT_CURRENCY,
+  A as DEFAULT_LOCALE,
+  r as ROOT_CLASSES
+};

package/dist/components/NumberFormatter/NumberFormatter.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { NumberFormatterProps } from './NumberFormatter.types';
+export declare const NumberFormatter: FC<NumberFormatterProps>;
+export default NumberFormatter;

package/dist/components/NumberFormatter/NumberFormatter.js

@@ -0,0 +1,53 @@
+import { jsxs as E } from "react/jsx-runtime";
+import { useMemo as O, useState as R, useRef as l, useEffect as S } from "react";
+import { cn as _ } from "../../utils/cn.js";
+import { DEFAULT_ANIMATION_DURATION as g, ROOT_CLASSES as h, ANIMATION_FRAME_RATE as V } from "./NumberFormatter.const.js";
+import { buildFormatter as b } from "./NumberFormatter.utils.js";
+const k = (t) => {
+  const {
+    value: e,
+    prefix: d = "",
+    suffix: A = "",
+    animated: m = !1,
+    animationDuration: s = g,
+    className: D,
+    testId: F,
+    ...y
+  } = t, N = O(() => b(t), [
+    t.formatStyle,
+    t.locale,
+    t.currency,
+    t.currencyDisplay,
+    t.unit,
+    t.unitDisplay,
+    t.notation,
+    t.minimumFractionDigits,
+    t.maximumFractionDigits,
+    t.signDisplay
+  ]), [I, r] = R(e), n = l(e), a = l(0);
+  S(() => {
+    if (!m) {
+      r(e), n.current = e;
+      return;
+    }
+    const c = n.current, o = e - c;
+    if (o === 0) return;
+    const u = Math.max(1, Math.round(s / V));
+    let i = 0;
+    const f = () => {
+      i++;
+      const x = i / u, T = 1 - Math.pow(1 - x, 3);
+      r(c + o * T), i < u ? a.current = requestAnimationFrame(f) : (r(e), n.current = e);
+    };
+    return a.current = requestAnimationFrame(f), () => cancelAnimationFrame(a.current);
+  }, [e, m, s]);
+  const M = N.format(I);
+  return /* @__PURE__ */ E("span", { className: _(h, D), "data-testid": F, ...y, children: [
+    d,
+    M,
+    A
+  ] });
+};
+export {
+  k as NumberFormatter
+};

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

@@ -0,0 +1,20 @@
+import { HTMLAttributes } from 'react';
+export type NumberFormatStyle = 'decimal' | 'currency' | 'percent' | 'compact' | 'unit';
+export interface NumberFormatterProps extends HTMLAttributes<HTMLSpanElement> {
+    value: number;
+    formatStyle?: NumberFormatStyle;
+    locale?: string;
+    currency?: string;
+    currencyDisplay?: 'symbol' | 'code' | 'name' | 'narrowSymbol';
+    unit?: string;
+    unitDisplay?: 'short' | 'long' | 'narrow';
+    notation?: 'standard' | 'scientific' | 'engineering' | 'compact';
+    minimumFractionDigits?: number;
+    maximumFractionDigits?: number;
+    signDisplay?: 'auto' | 'never' | 'always' | 'exceptZero';
+    prefix?: string;
+    suffix?: string;
+    animated?: boolean;
+    animationDuration?: number;
+    testId?: string;
+}

package/dist/components/NumberFormatter/NumberFormatter.utils.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("./NumberFormatter.const.cjs"),p=m=>{const{formatStyle:t="decimal",locale:s=u.DEFAULT_LOCALE,currency:l=u.DEFAULT_CURRENCY,currencyDisplay:e,unit:n,unitDisplay:r,notation:c,minimumFractionDigits:o,maximumFractionDigits:a,signDisplay:y}=m,i={signDisplay:y};return t==="currency"?(i.style="currency",i.currency=l,e&&(i.currencyDisplay=e)):t==="percent"?i.style="percent":t==="compact"?i.notation="compact":t==="unit"&&n&&(i.style="unit",i.unit=n,r&&(i.unitDisplay=r)),c&&t!=="compact"&&(i.notation=c),o!==void 0&&(i.minimumFractionDigits=o),a!==void 0&&(i.maximumFractionDigits=a),new Intl.NumberFormat(s,i)};exports.buildFormatter=p;

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

@@ -0,0 +1,2 @@
+import { NumberFormatterProps } from './NumberFormatter.types';
+export declare const buildFormatter: (props: NumberFormatterProps) => Intl.NumberFormat;

package/dist/components/NumberFormatter/NumberFormatter.utils.js

@@ -0,0 +1,19 @@
+import { DEFAULT_LOCALE as y, DEFAULT_CURRENCY as p } from "./NumberFormatter.const.js";
+const D = (m) => {
+  const {
+    formatStyle: t = "decimal",
+    locale: s = y,
+    currency: u = p,
+    currencyDisplay: n,
+    unit: c,
+    unitDisplay: r,
+    notation: e,
+    minimumFractionDigits: o,
+    maximumFractionDigits: a,
+    signDisplay: l
+  } = m, i = { signDisplay: l };
+  return t === "currency" ? (i.style = "currency", i.currency = u, n && (i.currencyDisplay = n)) : t === "percent" ? i.style = "percent" : t === "compact" ? i.notation = "compact" : t === "unit" && c && (i.style = "unit", i.unit = c, r && (i.unitDisplay = r)), e && t !== "compact" && (i.notation = e), o !== void 0 && (i.minimumFractionDigits = o), a !== void 0 && (i.maximumFractionDigits = a), new Intl.NumberFormat(s, i);
+};
+export {
+  D as buildFormatter
+};

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

@@ -0,0 +1,2 @@
+export { NumberFormatter } from './NumberFormatter';
+export type { NumberFormatterProps, NumberFormatStyle } from './NumberFormatter.types';

package/dist/components/Popconfirm/Popconfirm.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),c=require("react"),d=require("../../utils/cn.cjs"),S=require("../Typography/Typography.cjs"),n=require("./Popconfirm.const.cjs"),j=e.jsx("svg",{className:"bear-w-4 bear-h-4",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",children:e.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"})}),O=C=>{const{title:N,description:u,onConfirm:a,onCancel:o,confirmText:h=n.DEFAULT_CONFIRM_TEXT,cancelText:T=n.DEFAULT_CANCEL_TEXT,icon:p=j,placement:L="bottom",disabled:m=!1,children:_,variant:f="default",testId:b}=C,[s,E]=c.useState(!1),i=c.useRef(null),t=c.useCallback(()=>E(!1),[]);c.useEffect(()=>{const r=l=>{i.current&&!i.current.contains(l.target)&&t()};return s&&document.addEventListener("mousedown",r),()=>document.removeEventListener("mousedown",r)},[s,t]),c.useEffect(()=>{const r=l=>{l.key==="Escape"&&t()};return s&&document.addEventListener("keydown",r),()=>document.removeEventListener("keydown",r)},[s,t]);const v=()=>{m||E(!s)},A=()=>{a==null||a(),t()},x=()=>{o==null||o(),t()},y=f==="danger"?n.CONFIRM_BTN_DANGER_CLASSES:n.CONFIRM_BTN_DEFAULT_CLASSES;return e.jsxs("div",{ref:i,className:d.cn(n.ROOT_CLASS,"bear-relative bear-inline-block"),"data-testid":b,children:[e.jsx("div",{onClick:v,className:d.cn("bear-cursor-pointer",m&&"bear-opacity-50 bear-cursor-not-allowed bear-pointer-events-none"),children:_}),s&&e.jsxs("div",{className:d.cn(n.POPUP_CLASSES,n.PLACEMENT_OFFSETS[L]),children:[e.jsxs("div",{className:n.ICON_AREA_CLASSES,children:[e.jsx("div",{className:n.ICON_WRAPPER_CLASSES,children:p}),e.jsxs("div",{className:n.CONTENT_CLASSES,children:[e.jsx(S.Typography,{variant:"body2",className:"bear-text-gray-900 dark:bear-text-zinc-100",children:N}),u&&e.jsx(S.Typography,{variant:"caption",color:"secondary",className:"bear-mt-0.5",children:u})]})]}),e.jsxs("div",{className:n.BUTTONS_WRAPPER_CLASSES,children:[e.jsx("button",{type:"button",className:n.CANCEL_BTN_CLASSES,onClick:x,children:T}),e.jsx("button",{type:"button",className:y,onClick:A,children:h})]})]})]})};exports.Popconfirm=O;

package/dist/components/Popconfirm/Popconfirm.const.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e="Bear-Popconfirm",r="bear-absolute bear-z-[9999] bear-bg-white dark:bear-bg-zinc-800 bear-border bear-border-gray-200 dark:bear-border-zinc-700 bear-rounded-lg bear-shadow-xl bear-p-4 bear-min-w-[220px] bear-max-w-[320px]",a={top:"bear-bottom-full bear-left-1/2 -bear-translate-x-1/2 bear-mb-2",bottom:"bear-top-full bear-left-1/2 -bear-translate-x-1/2 bear-mt-2",left:"bear-right-full bear-top-1/2 -bear-translate-y-1/2 bear-mr-2",right:"bear-left-full bear-top-1/2 -bear-translate-y-1/2 bear-ml-2"},b="bear-flex bear-items-center bear-gap-3 bear-mb-3",t="bear-flex-shrink-0 bear-w-8 bear-h-8 bear-flex bear-items-center bear-justify-center bear-rounded-full bear-bg-amber-100 dark:bear-bg-amber-900/30 bear-text-amber-600 dark:bear-text-amber-400",S="bear-flex-1 bear-min-w-0",o="bear-flex bear-justify-end bear-gap-2 bear-mt-4",n="bear-px-3 bear-py-1.5 bear-text-sm bear-font-medium bear-rounded-md bear-transition-colors bear-bg-pink-500 bear-text-white hover:bear-bg-pink-600 dark:hover:bear-bg-pink-600",E="bear-px-3 bear-py-1.5 bear-text-sm bear-font-medium bear-rounded-md bear-transition-colors bear-bg-red-500 bear-text-white hover:bear-bg-red-600 dark:hover:bear-bg-red-600",_="bear-px-3 bear-py-1.5 bear-text-sm bear-font-medium bear-rounded-md bear-transition-colors bear-bg-white dark:bear-bg-zinc-700 bear-text-gray-700 dark:bear-text-zinc-300 bear-border bear-border-gray-300 dark:bear-border-zinc-600 hover:bear-bg-gray-50 dark:hover:bear-bg-zinc-600",C="Confirm",A="Cancel";exports.BUTTONS_WRAPPER_CLASSES=o;exports.CANCEL_BTN_CLASSES=_;exports.CONFIRM_BTN_DANGER_CLASSES=E;exports.CONFIRM_BTN_DEFAULT_CLASSES=n;exports.CONTENT_CLASSES=S;exports.DEFAULT_CANCEL_TEXT=A;exports.DEFAULT_CONFIRM_TEXT=C;exports.ICON_AREA_CLASSES=b;exports.ICON_WRAPPER_CLASSES=t;exports.PLACEMENT_OFFSETS=a;exports.POPUP_CLASSES=r;exports.ROOT_CLASS=e;

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

@@ -0,0 +1,13 @@
+import { PopconfirmPlacement } from './Popconfirm.types';
+export declare const ROOT_CLASS = "Bear-Popconfirm";
+export declare const POPUP_CLASSES = "bear-absolute bear-z-[9999] bear-bg-white dark:bear-bg-zinc-800 bear-border bear-border-gray-200 dark:bear-border-zinc-700 bear-rounded-lg bear-shadow-xl bear-p-4 bear-min-w-[220px] bear-max-w-[320px]";
+export declare const PLACEMENT_OFFSETS: Record<PopconfirmPlacement, string>;
+export declare const ICON_AREA_CLASSES = "bear-flex bear-items-center bear-gap-3 bear-mb-3";
+export declare const ICON_WRAPPER_CLASSES = "bear-flex-shrink-0 bear-w-8 bear-h-8 bear-flex bear-items-center bear-justify-center bear-rounded-full bear-bg-amber-100 dark:bear-bg-amber-900/30 bear-text-amber-600 dark:bear-text-amber-400";
+export declare const CONTENT_CLASSES = "bear-flex-1 bear-min-w-0";
+export declare const BUTTONS_WRAPPER_CLASSES = "bear-flex bear-justify-end bear-gap-2 bear-mt-4";
+export declare const CONFIRM_BTN_DEFAULT_CLASSES = "bear-px-3 bear-py-1.5 bear-text-sm bear-font-medium bear-rounded-md bear-transition-colors bear-bg-pink-500 bear-text-white hover:bear-bg-pink-600 dark:hover:bear-bg-pink-600";
+export declare const CONFIRM_BTN_DANGER_CLASSES = "bear-px-3 bear-py-1.5 bear-text-sm bear-font-medium bear-rounded-md bear-transition-colors bear-bg-red-500 bear-text-white hover:bear-bg-red-600 dark:hover:bear-bg-red-600";
+export declare const CANCEL_BTN_CLASSES = "bear-px-3 bear-py-1.5 bear-text-sm bear-font-medium bear-rounded-md bear-transition-colors bear-bg-white dark:bear-bg-zinc-700 bear-text-gray-700 dark:bear-text-zinc-300 bear-border bear-border-gray-300 dark:bear-border-zinc-600 hover:bear-bg-gray-50 dark:hover:bear-bg-zinc-600";
+export declare const DEFAULT_CONFIRM_TEXT = "Confirm";
+export declare const DEFAULT_CANCEL_TEXT = "Cancel";

package/dist/components/Popconfirm/Popconfirm.const.js

@@ -0,0 +1,20 @@
+const e = "Bear-Popconfirm", r = "bear-absolute bear-z-[9999] bear-bg-white dark:bear-bg-zinc-800 bear-border bear-border-gray-200 dark:bear-border-zinc-700 bear-rounded-lg bear-shadow-xl bear-p-4 bear-min-w-[220px] bear-max-w-[320px]", a = {
+  top: "bear-bottom-full bear-left-1/2 -bear-translate-x-1/2 bear-mb-2",
+  bottom: "bear-top-full bear-left-1/2 -bear-translate-x-1/2 bear-mt-2",
+  left: "bear-right-full bear-top-1/2 -bear-translate-y-1/2 bear-mr-2",
+  right: "bear-left-full bear-top-1/2 -bear-translate-y-1/2 bear-ml-2"
+}, b = "bear-flex bear-items-center bear-gap-3 bear-mb-3", t = "bear-flex-shrink-0 bear-w-8 bear-h-8 bear-flex bear-items-center bear-justify-center bear-rounded-full bear-bg-amber-100 dark:bear-bg-amber-900/30 bear-text-amber-600 dark:bear-text-amber-400", o = "bear-flex-1 bear-min-w-0", n = "bear-flex bear-justify-end bear-gap-2 bear-mt-4", d = "bear-px-3 bear-py-1.5 bear-text-sm bear-font-medium bear-rounded-md bear-transition-colors bear-bg-pink-500 bear-text-white hover:bear-bg-pink-600 dark:hover:bear-bg-pink-600", i = "bear-px-3 bear-py-1.5 bear-text-sm bear-font-medium bear-rounded-md bear-transition-colors bear-bg-red-500 bear-text-white hover:bear-bg-red-600 dark:hover:bear-bg-red-600", s = "bear-px-3 bear-py-1.5 bear-text-sm bear-font-medium bear-rounded-md bear-transition-colors bear-bg-white dark:bear-bg-zinc-700 bear-text-gray-700 dark:bear-text-zinc-300 bear-border bear-border-gray-300 dark:bear-border-zinc-600 hover:bear-bg-gray-50 dark:hover:bear-bg-zinc-600", l = "Confirm", m = "Cancel";
+export {
+  n as BUTTONS_WRAPPER_CLASSES,
+  s as CANCEL_BTN_CLASSES,
+  i as CONFIRM_BTN_DANGER_CLASSES,
+  d as CONFIRM_BTN_DEFAULT_CLASSES,
+  o as CONTENT_CLASSES,
+  m as DEFAULT_CANCEL_TEXT,
+  l as DEFAULT_CONFIRM_TEXT,
+  b as ICON_AREA_CLASSES,
+  t as ICON_WRAPPER_CLASSES,
+  a as PLACEMENT_OFFSETS,
+  r as POPUP_CLASSES,
+  e as ROOT_CLASS
+};

package/dist/components/Popconfirm/Popconfirm.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { PopconfirmProps } from './Popconfirm.types';
+export declare const Popconfirm: FC<PopconfirmProps>;
+export default Popconfirm;

package/dist/components/Popconfirm/Popconfirm.js

@@ -0,0 +1,65 @@
+import { jsxs as a, jsx as e } from "react/jsx-runtime";
+import { useState as R, useRef as y, useCallback as F, useEffect as C } from "react";
+import { cn as l } from "../../utils/cn.js";
+import { Typography as S } from "../Typography/Typography.js";
+import { DEFAULT_CONFIRM_TEXT as P, DEFAULT_CANCEL_TEXT as x, ICON_AREA_CLASSES as I, ICON_WRAPPER_CLASSES as g, CONTENT_CLASSES as w, BUTTONS_WRAPPER_CLASSES as B, CANCEL_BTN_CLASSES as U, CONFIRM_BTN_DANGER_CLASSES as D, CONFIRM_BTN_DEFAULT_CLASSES as M, PLACEMENT_OFFSETS as j, POPUP_CLASSES as W, ROOT_CLASS as z } from "./Popconfirm.const.js";
+const X = /* @__PURE__ */ e("svg", { className: "bear-w-4 bear-h-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ e("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" }) }), Q = (N) => {
+  const {
+    title: u,
+    description: d,
+    onConfirm: o,
+    onCancel: s,
+    confirmText: h = P,
+    cancelText: L = x,
+    icon: f = X,
+    placement: p = "bottom",
+    disabled: m = !1,
+    children: _,
+    variant: T = "default",
+    testId: v
+  } = N, [n, E] = R(!1), c = y(null), t = F(() => E(!1), []);
+  C(() => {
+    const r = (i) => {
+      c.current && !c.current.contains(i.target) && t();
+    };
+    return n && document.addEventListener("mousedown", r), () => document.removeEventListener("mousedown", r);
+  }, [n, t]), C(() => {
+    const r = (i) => {
+      i.key === "Escape" && t();
+    };
+    return n && document.addEventListener("keydown", r), () => document.removeEventListener("keydown", r);
+  }, [n, t]);
+  const A = () => {
+    m || E(!n);
+  }, b = () => {
+    o == null || o(), t();
+  }, k = () => {
+    s == null || s(), t();
+  }, O = T === "danger" ? D : M;
+  return /* @__PURE__ */ a("div", { ref: c, className: l(z, "bear-relative bear-inline-block"), "data-testid": v, children: [
+    /* @__PURE__ */ e(
+      "div",
+      {
+        onClick: A,
+        className: l("bear-cursor-pointer", m && "bear-opacity-50 bear-cursor-not-allowed bear-pointer-events-none"),
+        children: _
+      }
+    ),
+    n && /* @__PURE__ */ a("div", { className: l(W, j[p]), children: [
+      /* @__PURE__ */ a("div", { className: I, children: [
+        /* @__PURE__ */ e("div", { className: g, children: f }),
+        /* @__PURE__ */ a("div", { className: w, children: [
+          /* @__PURE__ */ e(S, { variant: "body2", className: "bear-text-gray-900 dark:bear-text-zinc-100", children: u }),
+          d && /* @__PURE__ */ e(S, { variant: "caption", color: "secondary", className: "bear-mt-0.5", children: d })
+        ] })
+      ] }),
+      /* @__PURE__ */ a("div", { className: B, children: [
+        /* @__PURE__ */ e("button", { type: "button", className: U, onClick: k, children: L }),
+        /* @__PURE__ */ e("button", { type: "button", className: O, onClick: b, children: h })
+      ] })
+    ] })
+  ] });
+};
+export {
+  Q as Popconfirm
+};