@forgedevstack/bear 1.2.3 → 1.2.5

package/dist/components/FormField/FormField.js

@@ -1,127 +1,130 @@
-import { jsxs as m, jsx as t } from "react/jsx-runtime";
-import { forwardRef as W, useContext as X, useState as Y, useId as $, useCallback as I } from "react";
+import { jsxs as h, jsx as t } from "react/jsx-runtime";
+import { forwardRef as V, useContext as S, useState as A, useCallback as z } from "react";
 import { cn as e } from "../../utils/cn.js";
-import { FORMFIELD_SIZE_CLASSES as V } from "./FormField.const.js";
-import { BearContext as S } from "../../context/BearProvider.js";
-const A = W(
+import { resolveBearId as rr } from "../../utils/generateBearId.utils.js";
+import { useBearId as er } from "../../utils/useBearId.js";
+import { FORMFIELD_SIZE_CLASSES as ar } from "./FormField.const.js";
+import { BearContext as br } from "../../context/BearProvider.js";
+import { useFormControl as dr } from "../../hooks/useFormControl/useFormControl.js";
+const tr = V(
   ({
-    label: z,
-    helperText: R,
-    error: h,
-    success: p,
-    size: j = "md",
-    leftAddon: d,
-    rightAddon: n,
+    label: j,
+    helperText: q,
+    error: p,
+    success: _,
+    size: D = "md",
+    leftAddon: l,
+    rightAddon: g,
     fullWidth: L = !1,
     required: M = !1,
-    variant: _ = "outlined",
-    className: D,
-    disabled: g,
-    value: c,
-    defaultValue: x,
+    variant: k = "outlined",
+    className: C,
+    disabled: c,
+    value: x,
+    defaultValue: m,
     placeholder: O,
-    onFocus: l,
-    onBlur: o,
-    ...k
+    onFocus: o,
+    onBlur: s,
+    ...B
   }, Z) => {
-    var E;
-    const f = _ === "filled", s = _ === "standard", F = X(S), r = (E = F == null ? void 0 : F.components) == null ? void 0 : E.FormField, q = r == null ? void 0 : r.root, G = r == null ? void 0 : r.input, H = r == null ? void 0 : r.label, J = r == null ? void 0 : r.helper, B = r == null ? void 0 : r.addon, K = f ? r == null ? void 0 : r.filled : s ? r == null ? void 0 : r.standard : r == null ? void 0 : r.outlined, [i, N] = Y(!1), P = $(), w = k.id ?? P, Q = c != null && c !== "" || x != null && x !== "", v = i || Q, a = !!h, b = !!p && !a, u = V[j], C = h || p || R, T = I(
+    var R;
+    const a = dr(), F = k === "filled", i = k === "standard", u = S(br), r = (R = u == null ? void 0 : u.components) == null ? void 0 : R.FormField, G = r == null ? void 0 : r.root, H = r == null ? void 0 : r.input, J = r == null ? void 0 : r.label, K = r == null ? void 0 : r.helper, N = r == null ? void 0 : r.addon, P = F ? r == null ? void 0 : r.filled : i ? r == null ? void 0 : r.standard : r == null ? void 0 : r.outlined, [n, v] = A(!1), Q = er("FormField"), w = rr(B.id, Q), T = c ?? (a == null ? void 0 : a.disabled), U = M ?? (a == null ? void 0 : a.required), W = !!p || (a == null ? void 0 : a.error), X = x != null && x !== "" || m != null && m !== "", I = n || X, b = W, d = !!_ && !b, f = ar[D], E = p || _ || q, Y = z(
       (y) => {
-        N(!0), l == null || l(y);
+        v(!0), o == null || o(y);
       },
-      [l]
-    ), U = I(
+      [o]
+    ), $ = z(
       (y) => {
-        N(!1), o == null || o(y);
+        v(!1), s == null || s(y);
       },
-      [o]
+      [s]
     );
-    return /* @__PURE__ */ m("div", { className: e("Bear-FormField bear-flex bear-flex-col bear-gap-1", L && "bear-w-full"), style: q, children: [
-      /* @__PURE__ */ m("div", { className: "Bear-FormField__wrapper bear-relative bear-flex bear-items-center", children: [
-        d && /* @__PURE__ */ t("div", { className: "Bear-FormField__addon Bear-FormField__addon--left bear-absolute bear-left-3 bear-z-10 bear-text-gray-500 dark:bear-text-gray-400", style: B, children: d }),
+    return /* @__PURE__ */ h("div", { className: e("Bear-FormField bear-flex bear-flex-col bear-gap-1", L && "bear-w-full"), style: G, children: [
+      /* @__PURE__ */ h("div", { className: "Bear-FormField__wrapper bear-relative bear-flex bear-items-center", children: [
+        l && /* @__PURE__ */ t("div", { className: "Bear-FormField__addon Bear-FormField__addon--left bear-absolute bear-left-3 bear-z-10 bear-text-gray-500 dark:bear-text-gray-400", style: N, children: l }),
         /* @__PURE__ */ t(
           "input",
           {
             ref: Z,
             id: w,
-            disabled: g,
-            value: c,
-            defaultValue: x,
-            placeholder: v ? O : void 0,
-            "aria-invalid": a || void 0,
-            onFocus: T,
-            onBlur: U,
+            disabled: T,
+            value: x,
+            defaultValue: m,
+            placeholder: I ? O : void 0,
+            "aria-invalid": b || void 0,
+            onFocus: Y,
+            onBlur: $,
             className: e(
               "Bear-FormField__input bear-peer bear-w-full bear-rounded-lg bear-border bear-outline-none bear-transition-all bear-duration-200",
-              f ? e(
+              F ? e(
                 "bear-bg-gray-100 bear-border-transparent bear-rounded-t-lg bear-rounded-b-none bear-border-b-2",
                 "dark:bear-bg-gray-800",
-                a ? "bear-border-b-red-500" : b ? "bear-border-b-green-500" : i ? "bear-border-b-bear-500" : "bear-border-b-gray-400 dark:bear-border-b-gray-500"
-              ) : s ? e(
+                b ? "bear-border-b-red-500" : d ? "bear-border-b-green-500" : n ? "bear-border-b-bear-500" : "bear-border-b-gray-400 dark:bear-border-b-gray-500"
+              ) : i ? e(
                 "bear-bg-transparent bear-rounded-none bear-border-0 bear-border-b-2",
-                a ? "bear-border-b-red-500" : b ? "bear-border-b-green-500" : i ? "bear-border-b-bear-500" : "bear-border-b-gray-300 dark:bear-border-b-gray-600"
+                b ? "bear-border-b-red-500" : d ? "bear-border-b-green-500" : n ? "bear-border-b-bear-500" : "bear-border-b-gray-300 dark:bear-border-b-gray-600"
               ) : e(
                 "bear-bg-white dark:bear-bg-gray-900",
-                a ? "bear-border-red-500 focus:bear-ring-2 focus:bear-ring-red-500/30" : b ? "bear-border-green-500 focus:bear-ring-2 focus:bear-ring-green-500/30" : e(
+                b ? "bear-border-red-500 focus:bear-ring-2 focus:bear-ring-red-500/30" : d ? "bear-border-green-500 focus:bear-ring-2 focus:bear-ring-green-500/30" : e(
                   "bear-border-gray-300 dark:bear-border-gray-600",
                   "focus:bear-border-bear-500 focus:bear-ring-2 focus:bear-ring-bear-500/30",
                   "dark:focus:bear-border-bear-400"
                 )
               ),
               "bear-text-gray-900 dark:bear-text-white placeholder:bear-text-gray-400 dark:placeholder:bear-text-gray-500",
-              g && "bear-opacity-50 bear-cursor-not-allowed",
-              d && "bear-pl-10",
-              n && "bear-pr-10",
-              u.field,
-              s && "focus:bear-ring-0",
-              D
+              c && "bear-opacity-50 bear-cursor-not-allowed",
+              l && "bear-pl-10",
+              g && "bear-pr-10",
+              f.field,
+              i && "focus:bear-ring-0",
+              C
             ),
-            style: { ...K, ...G },
-            ...k
+            style: { ...P, ...H },
+            ...B
           }
         ),
-        /* @__PURE__ */ m(
+        /* @__PURE__ */ h(
           "label",
           {
             htmlFor: w,
             className: e(
               "Bear-FormField__label bear-absolute bear-left-0 bear-pointer-events-none bear-origin-top-left",
               "bear-transition-all bear-duration-200 bear-select-none",
-              d ? "bear-ml-10" : "bear-ml-4",
-              v ? e(
-                f ? u.labelFloat : s ? "bear-top-0 bear--translate-y-1/2 bear-text-xs" : "bear-top-0 bear--translate-y-1/2 bear-text-xs bear-px-1 bear-bg-white dark:bear-bg-gray-900",
-                a ? "bear-text-red-500" : b ? "bear-text-green-500" : i ? "bear-text-bear-500 dark:bear-text-bear-400" : "bear-text-gray-500 dark:bear-text-gray-400"
+              l ? "bear-ml-10" : "bear-ml-4",
+              I ? e(
+                F ? f.labelFloat : i ? "bear-top-0 bear--translate-y-1/2 bear-text-xs" : "bear-top-0 bear--translate-y-1/2 bear-text-xs bear-px-1 bear-bg-white dark:bear-bg-gray-900",
+                b ? "bear-text-red-500" : d ? "bear-text-green-500" : n ? "bear-text-bear-500 dark:bear-text-bear-400" : "bear-text-gray-500 dark:bear-text-gray-400"
               ) : e(
-                u.labelRest,
+                f.labelRest,
                 "bear--translate-y-1/2",
                 "bear-text-gray-500 dark:bear-text-gray-400"
               ),
-              g && "bear-opacity-50"
+              c && "bear-opacity-50"
             ),
-            style: H,
+            style: J,
             children: [
-              z,
-              M && /* @__PURE__ */ t("span", { className: "bear-text-red-500 bear-ml-0.5", children: "*" })
+              j,
+              U && /* @__PURE__ */ t("span", { className: "bear-text-red-500 bear-ml-0.5", children: "*" })
             ]
           }
         ),
-        n && /* @__PURE__ */ t("div", { className: "Bear-FormField__addon Bear-FormField__addon--right bear-absolute bear-right-3 bear-z-10 bear-text-gray-500 dark:bear-text-gray-400", style: B, children: n })
+        g && /* @__PURE__ */ t("div", { className: "Bear-FormField__addon Bear-FormField__addon--right bear-absolute bear-right-3 bear-z-10 bear-text-gray-500 dark:bear-text-gray-400", style: N, children: g })
       ] }),
-      C && /* @__PURE__ */ t(
+      E && /* @__PURE__ */ t(
         "p",
         {
           className: e(
             "Bear-FormField__helper bear-text-xs bear-ml-4",
-            a ? "bear-text-red-500" : b ? "bear-text-green-500" : "bear-text-gray-500 dark:bear-text-gray-400"
+            b ? "bear-text-red-500" : d ? "bear-text-green-500" : "bear-text-gray-500 dark:bear-text-gray-400"
           ),
-          style: J,
-          children: C
+          style: K,
+          children: E
         }
       )
     ] });
   }
 );
-A.displayName = "FormField";
+tr.displayName = "FormField";
 export {
-  A as FormField
+  tr as FormField
 };

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

@@ -1,5 +1,7 @@
 import { InputHTMLAttributes, ReactNode } from 'react';
 export interface FormFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
+    testId?: string;
+    id?: string;
     /** Floating label text */
     label: string;
     /** Helper text below the field */

package/dist/components/FormSkeleton/FormSkeleton.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),c=require("../../utils/cn.cjs");require("react");const S=require("../../utils/generateBearId.utils.cjs"),E=require("../../utils/useBearId.cjs"),o=require("../Skeleton/Skeleton.cjs"),e=require("./FormSkeleton.const.cjs"),u=({fields:s=e.FORM_SKELETON_DEFAULT_FIELDS,animation:t="pulse",id:l,testId:n,className:_})=>{const a=E.useBearId("FormSkeleton"),i=S.resolveBearId(l,a);return r.jsx("div",{id:i,"data-testid":n,className:c.cn(e.FORM_SKELETON_ROOT_CLASS,"bear-flex bear-flex-col",_),style:{gap:e.FORM_SKELETON_FIELD_GAP_PX},children:Array.from({length:s}).map((F,d)=>r.jsxs("div",{className:"Bear-FormSkeleton__field bear-flex bear-flex-col bear-gap-2",children:[r.jsx(o.Skeleton,{animation:t,width:"30%",height:e.FORM_SKELETON_LABEL_HEIGHT_PX}),r.jsx(o.Skeleton,{animation:t,width:"100%",height:e.FORM_SKELETON_FIELD_HEIGHT_PX})]},`field-${d}`))})};exports.FormSkeleton=u;

package/dist/components/FormSkeleton/FormSkeleton.const.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const _="Bear-FormSkeleton",E=3,O=14,L=40,F=16;exports.FORM_SKELETON_DEFAULT_FIELDS=E;exports.FORM_SKELETON_FIELD_GAP_PX=F;exports.FORM_SKELETON_FIELD_HEIGHT_PX=L;exports.FORM_SKELETON_LABEL_HEIGHT_PX=O;exports.FORM_SKELETON_ROOT_CLASS=_;

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

@@ -0,0 +1,5 @@
+export declare const FORM_SKELETON_ROOT_CLASS = "Bear-FormSkeleton";
+export declare const FORM_SKELETON_DEFAULT_FIELDS = 3;
+export declare const FORM_SKELETON_LABEL_HEIGHT_PX = 14;
+export declare const FORM_SKELETON_FIELD_HEIGHT_PX = 40;
+export declare const FORM_SKELETON_FIELD_GAP_PX = 16;

package/dist/components/FormSkeleton/FormSkeleton.const.js

@@ -0,0 +1,8 @@
+const _ = "Bear-FormSkeleton", E = 3, L = 14, O = 40, F = 16;
+export {
+  E as FORM_SKELETON_DEFAULT_FIELDS,
+  F as FORM_SKELETON_FIELD_GAP_PX,
+  O as FORM_SKELETON_FIELD_HEIGHT_PX,
+  L as FORM_SKELETON_LABEL_HEIGHT_PX,
+  _ as FORM_SKELETON_ROOT_CLASS
+};

package/dist/components/FormSkeleton/FormSkeleton.d.ts

@@ -0,0 +1,2 @@
+import { FormSkeletonProps } from './FormSkeleton.types';
+export declare const FormSkeleton: ({ fields, animation, id, testId, className, }: FormSkeletonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/FormSkeleton/FormSkeleton.js

@@ -0,0 +1,32 @@
+import { jsx as e, jsxs as E } from "react/jsx-runtime";
+import { cn as s } from "../../utils/cn.js";
+import "react";
+import { resolveBearId as f } from "../../utils/generateBearId.utils.js";
+import { useBearId as p } from "../../utils/useBearId.js";
+import { Skeleton as o } from "../Skeleton/Skeleton.js";
+import { FORM_SKELETON_FIELD_GAP_PX as F, FORM_SKELETON_DEFAULT_FIELDS as L, FORM_SKELETON_LABEL_HEIGHT_PX as O, FORM_SKELETON_FIELD_HEIGHT_PX as S, FORM_SKELETON_ROOT_CLASS as n } from "./FormSkeleton.const.js";
+const b = ({
+  fields: t = L,
+  animation: r = "pulse",
+  id: _,
+  testId: l,
+  className: m
+}) => {
+  const a = p("FormSkeleton"), d = f(_, a);
+  return /* @__PURE__ */ e(
+    "div",
+    {
+      id: d,
+      "data-testid": l,
+      className: s(n, "bear-flex bear-flex-col", m),
+      style: { gap: F },
+      children: Array.from({ length: t }).map((c, i) => /* @__PURE__ */ E("div", { className: "Bear-FormSkeleton__field bear-flex bear-flex-col bear-gap-2", children: [
+        /* @__PURE__ */ e(o, { animation: r, width: "30%", height: O }),
+        /* @__PURE__ */ e(o, { animation: r, width: "100%", height: S })
+      ] }, `field-${i}`))
+    }
+  );
+};
+export {
+  b as FormSkeleton
+};

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

@@ -0,0 +1,8 @@
+import { SkeletonAnimation } from '../Skeleton/Skeleton.types';
+export interface FormSkeletonProps {
+    fields?: number;
+    animation?: SkeletonAnimation;
+    id?: string;
+    testId?: string;
+    className?: string;
+}

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

@@ -0,0 +1,2 @@
+export { FormSkeleton } from './FormSkeleton';
+export type { FormSkeletonProps } from './FormSkeleton.types';

package/dist/components/Gauge/Gauge.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("react"),g=require("../../utils/cn.cjs"),F=({value:x,min:i=0,max:d=100,size:h=120,strokeWidth:s=10,color:p="var(--bear-primary-500, #ec4899)",trackColor:v,showLabel:b=!0,label:k,animated:t=!0,fillDurationMs:D=900,arcAngle:f=270,gradient:n,className:M,...N})=>{const m=a.useId(),{percentage:O,circumference:r,offset:o,startAngle:y}=a.useMemo(()=>{const c=Math.min(Math.max((x-i)/(d-i)*100,0),100),w=50-s/2,u=2*Math.PI*w*(f/360),$=u-c/100*u,C=90+(360-f)/2;return{percentage:c,circumference:u,offset:$,startAngle:C}},[x,i,d,f,s]),[q,l]=a.useState(()=>t?r:o);a.useLayoutEffect(()=>{if(!t){l(o);return}l(r);const c=requestAnimationFrame(()=>l(o));return()=>cancelAnimationFrame(c)},[t,r,o]);const j=50-s/2;return e.jsxs("div",{className:g.cn("relative inline-flex items-center justify-center",M),style:{width:h,height:h},...N,children:[e.jsxs("svg",{viewBox:"0 0 100 100",className:"h-full w-full -rotate-90",children:[e.jsx("defs",{children:n&&e.jsxs("linearGradient",{id:m,x1:"0%",y1:"0%",x2:"100%",y2:"0%",children:[e.jsx("stop",{offset:"0%",stopColor:n[0]}),e.jsx("stop",{offset:"100%",stopColor:n[1]})]})}),e.jsx("circle",{cx:"50",cy:"50",r:j,fill:"none",stroke:v||"currentColor",strokeWidth:s,strokeLinecap:"round",strokeDasharray:r,strokeDashoffset:0,className:g.cn("text-gray-200 dark:text-slate-700"),style:{transformOrigin:"center",transform:`rotate(${y}deg)`}}),e.jsx("circle",{cx:"50",cy:"50",r:j,fill:"none",stroke:n?`url(#${m})`:p,strokeWidth:s,strokeLinecap:"round",strokeDasharray:r,strokeDashoffset:q,style:{transformOrigin:"center",transform:`rotate(${y}deg)`,transitionProperty:t?"stroke-dashoffset":void 0,transitionDuration:t?`${D}ms`:void 0,transitionTimingFunction:t?"cubic-bezier(0.4, 0, 0.2, 1)":void 0}})]}),b&&e.jsx("div",{className:"absolute inset-0 flex items-center justify-center",children:k||e.jsxs("span",{className:"text-2xl font-semibold text-gray-800 dark:text-white",children:[Math.round(O),"%"]})})]})};exports.Gauge=F;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),T=require("../../utils/cn.cjs");require("react");const x=require("../../utils/useBearId.cjs"),D=require("../Typography/Typography.cjs"),i=require("../Flex/Flex.cjs"),r=require("./Gauge.const.cjs"),L=require("./hooks/useGauge.cjs"),b=require("./helpers/GaugeArcSvg.cjs"),F=u=>{const{value:c,min:l=r.GAUGE_DEFAULT_MIN,max:o=r.GAUGE_DEFAULT_MAX,size:t=r.GAUGE_DEFAULT_SIZE,strokeWidth:s=r.GAUGE_DEFAULT_STROKE_WIDTH,color:g=r.GAUGE_DEFAULT_COLOR,trackColor:d,showLabel:A=!0,label:G,animated:_=!0,fillDurationMs:E=r.GAUGE_DEFAULT_FILL_DURATION_MS,arcAngle:U=r.GAUGE_DEFAULT_ARC_ANGLE,gradient:n,className:h,...m}=u,f=x.useBearId("Gauge","gradient"),e=L.useGauge({value:c,min:l,max:o,strokeWidth:s,arcAngle:U,animated:_,fillDurationMs:E});return a.jsxs(i.Flex,{align:"center",justify:"center",className:T.cn("bear-relative bear-inline-flex",h),style:{width:t,height:t},...m,children:[a.jsx(b.GaugeArcSvg,{radius:e.radius,strokeWidth:s,circumference:e.circumference,dashOffset:e.dashOffset,startAngle:e.startAngle,color:g,trackColor:d,gradientId:n?f:void 0,gradient:n,animated:e.animated,fillDurationMs:e.fillDurationMs}),A&&a.jsx(i.Flex,{align:"center",justify:"center",className:"bear-absolute bear-inset-0",children:G||a.jsxs(D.Typography,{variant:"h4",className:"bear-text-[var(--bear-text-primary)]",children:[Math.round(e.percentage),"%"]})})]})};exports.Gauge=F;

package/dist/components/Gauge/Gauge.const.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const A=0,E=100,_=120,G=10,U="var(--bear-primary-500, #ec4899)",T=270,L=900,D=50,I="cubic-bezier(0.4, 0, 0.2, 1)";exports.GAUGE_ANIMATION_EASING=I;exports.GAUGE_DEFAULT_ARC_ANGLE=T;exports.GAUGE_DEFAULT_COLOR=U;exports.GAUGE_DEFAULT_FILL_DURATION_MS=L;exports.GAUGE_DEFAULT_MAX=E;exports.GAUGE_DEFAULT_MIN=A;exports.GAUGE_DEFAULT_SIZE=_;exports.GAUGE_DEFAULT_STROKE_WIDTH=G;exports.GAUGE_VIEWBOX_CENTER=D;

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

@@ -0,0 +1,9 @@
+export declare const GAUGE_DEFAULT_MIN = 0;
+export declare const GAUGE_DEFAULT_MAX = 100;
+export declare const GAUGE_DEFAULT_SIZE = 120;
+export declare const GAUGE_DEFAULT_STROKE_WIDTH = 10;
+export declare const GAUGE_DEFAULT_COLOR = "var(--bear-primary-500, #ec4899)";
+export declare const GAUGE_DEFAULT_ARC_ANGLE = 270;
+export declare const GAUGE_DEFAULT_FILL_DURATION_MS = 900;
+export declare const GAUGE_VIEWBOX_CENTER = 50;
+export declare const GAUGE_ANIMATION_EASING = "cubic-bezier(0.4, 0, 0.2, 1)";

package/dist/components/Gauge/Gauge.const.js

@@ -0,0 +1,12 @@
+const A = 0, E = 100, _ = 120, G = 10, U = "var(--bear-primary-500, #ec4899)", c = 270, T = 900, L = 50, o = "cubic-bezier(0.4, 0, 0.2, 1)";
+export {
+  o as GAUGE_ANIMATION_EASING,
+  c as GAUGE_DEFAULT_ARC_ANGLE,
+  U as GAUGE_DEFAULT_COLOR,
+  T as GAUGE_DEFAULT_FILL_DURATION_MS,
+  E as GAUGE_DEFAULT_MAX,
+  A as GAUGE_DEFAULT_MIN,
+  _ as GAUGE_DEFAULT_SIZE,
+  G as GAUGE_DEFAULT_STROKE_WIDTH,
+  L as GAUGE_VIEWBOX_CENTER
+};

package/dist/components/Gauge/Gauge.js

@@ -1,103 +1,79 @@
-import { jsxs as a, jsx as t } from "react/jsx-runtime";
-import { useId as I, useMemo as L, useState as A, useLayoutEffect as G } from "react";
-import { cn as g } from "../../utils/cn.js";
-const E = ({
-  value: m,
-  min: i = 0,
-  max: d = 100,
-  size: h = 120,
-  strokeWidth: r = 10,
-  color: v = "var(--bear-primary-500, #ec4899)",
-  trackColor: k,
-  showLabel: D = !0,
-  label: b,
-  animated: e = !0,
-  fillDurationMs: M = 900,
-  arcAngle: f = 270,
-  gradient: o,
-  className: N,
-  ...j
-}) => {
-  const p = I(), { percentage: w, circumference: s, offset: n, startAngle: x } = L(() => {
-    const c = Math.min(Math.max((m - i) / (d - i) * 100, 0), 100), $ = 50 - r / 2, u = 2 * Math.PI * $ * (f / 360), C = u - c / 100 * u, F = 90 + (360 - f) / 2;
-    return {
-      percentage: c,
-      circumference: u,
-      offset: C,
-      startAngle: F
-    };
-  }, [m, i, d, f, r]), [O, l] = A(() => e ? s : n);
-  G(() => {
-    if (!e) {
-      l(n);
-      return;
-    }
-    l(s);
-    const c = requestAnimationFrame(() => l(n));
-    return () => cancelAnimationFrame(c);
-  }, [e, s, n]);
-  const y = 50 - r / 2;
-  return /* @__PURE__ */ a(
-    "div",
+import { jsxs as i, jsx as n } from "react/jsx-runtime";
+import { cn as h } from "../../utils/cn.js";
+import "react";
+import { useBearId as D } from "../../utils/useBearId.js";
+import { Typography as L } from "../Typography/Typography.js";
+import { Flex as s } from "../Flex/Flex.js";
+import { GAUGE_DEFAULT_MIN as T, GAUGE_DEFAULT_MAX as b, GAUGE_DEFAULT_SIZE as F, GAUGE_DEFAULT_STROKE_WIDTH as x, GAUGE_DEFAULT_COLOR as I, GAUGE_DEFAULT_FILL_DURATION_MS as M, GAUGE_DEFAULT_ARC_ANGLE as N } from "./Gauge.const.js";
+import { useGauge as v } from "./hooks/useGauge.js";
+import { GaugeArcSvg as y } from "./helpers/GaugeArcSvg.js";
+const B = (o) => {
+  const {
+    value: l,
+    min: m = T,
+    max: c = b,
+    size: r = F,
+    strokeWidth: a = x,
+    color: u = I,
+    trackColor: A,
+    showLabel: d = !0,
+    label: f,
+    animated: g = !0,
+    fillDurationMs: G = M,
+    arcAngle: _ = N,
+    gradient: t,
+    className: E,
+    ...U
+  } = o, p = D("Gauge", "gradient"), e = v({
+    value: l,
+    min: m,
+    max: c,
+    strokeWidth: a,
+    arcAngle: _,
+    animated: g,
+    fillDurationMs: G
+  });
+  return /* @__PURE__ */ i(
+    s,
     {
-      className: g("relative inline-flex items-center justify-center", N),
-      style: { width: h, height: h },
-      ...j,
+      align: "center",
+      justify: "center",
+      className: h("bear-relative bear-inline-flex", E),
+      style: { width: r, height: r },
+      ...U,
       children: [
-        /* @__PURE__ */ a("svg", { viewBox: "0 0 100 100", className: "h-full w-full -rotate-90", children: [
-          /* @__PURE__ */ t("defs", { children: o && /* @__PURE__ */ a("linearGradient", { id: p, x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: [
-            /* @__PURE__ */ t("stop", { offset: "0%", stopColor: o[0] }),
-            /* @__PURE__ */ t("stop", { offset: "100%", stopColor: o[1] })
-          ] }) }),
-          /* @__PURE__ */ t(
-            "circle",
-            {
-              cx: "50",
-              cy: "50",
-              r: y,
-              fill: "none",
-              stroke: k || "currentColor",
-              strokeWidth: r,
-              strokeLinecap: "round",
-              strokeDasharray: s,
-              strokeDashoffset: 0,
-              className: g("text-gray-200 dark:text-slate-700"),
-              style: {
-                transformOrigin: "center",
-                transform: `rotate(${x}deg)`
-              }
-            }
-          ),
-          /* @__PURE__ */ t(
-            "circle",
-            {
-              cx: "50",
-              cy: "50",
-              r: y,
-              fill: "none",
-              stroke: o ? `url(#${p})` : v,
-              strokeWidth: r,
-              strokeLinecap: "round",
-              strokeDasharray: s,
-              strokeDashoffset: O,
-              style: {
-                transformOrigin: "center",
-                transform: `rotate(${x}deg)`,
-                transitionProperty: e ? "stroke-dashoffset" : void 0,
-                transitionDuration: e ? `${M}ms` : void 0,
-                transitionTimingFunction: e ? "cubic-bezier(0.4, 0, 0.2, 1)" : void 0
-              }
-            }
-          )
-        ] }),
-        D && /* @__PURE__ */ t("div", { className: "absolute inset-0 flex items-center justify-center", children: b || /* @__PURE__ */ a("span", { className: "text-2xl font-semibold text-gray-800 dark:text-white", children: [
-          Math.round(w),
-          "%"
-        ] }) })
+        /* @__PURE__ */ n(
+          y,
+          {
+            radius: e.radius,
+            strokeWidth: a,
+            circumference: e.circumference,
+            dashOffset: e.dashOffset,
+            startAngle: e.startAngle,
+            color: u,
+            trackColor: A,
+            gradientId: t ? p : void 0,
+            gradient: t,
+            animated: e.animated,
+            fillDurationMs: e.fillDurationMs
+          }
+        ),
+        d && /* @__PURE__ */ n(
+          s,
+          {
+            align: "center",
+            justify: "center",
+            className: "bear-absolute bear-inset-0",
+            children: f || /* @__PURE__ */ i(L, { variant: "h4", className: "bear-text-[var(--bear-text-primary)]", children: [
+              Math.round(e.percentage),
+              "%"
+            ] })
+          }
+        )
       ]
     }
   );
 };
 export {
-  E as Gauge
+  B as Gauge
 };

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

@@ -1,5 +1,7 @@
 import { HTMLAttributes, ReactNode } from 'react';
 export interface GaugeProps extends HTMLAttributes<HTMLDivElement> {
+    testId?: string;
+    id?: string;
     /** Current value (0-100 or within min/max) */
     value: number;
     /** Minimum value */

package/dist/components/Gauge/helpers/GaugeArcSvg.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),x=require("../../../utils/cn.cjs");require("react");const y=require("../Gauge.const.cjs"),j=({radius:t,strokeWidth:n,circumference:c,dashOffset:a,startAngle:i,color:l,trackColor:f,gradientId:o,gradient:e,animated:s,fillDurationMs:u})=>r.jsxs("svg",{viewBox:"0 0 100 100",className:"h-full w-full -rotate-90",children:[r.jsx("defs",{children:e&&o&&r.jsxs("linearGradient",{id:o,x1:"0%",y1:"0%",x2:"100%",y2:"0%",children:[r.jsx("stop",{offset:"0%",stopColor:e[0]}),r.jsx("stop",{offset:"100%",stopColor:e[1]})]})}),r.jsx("circle",{cx:"50",cy:"50",r:t,fill:"none",stroke:f||"currentColor",strokeWidth:n,strokeLinecap:"round",strokeDasharray:c,strokeDashoffset:0,className:x.cn("bear-text-[var(--bear-border-default)]"),style:{transformOrigin:"center",transform:`rotate(${i}deg)`}}),r.jsx("circle",{cx:"50",cy:"50",r:t,fill:"none",stroke:e&&o?`url(#${o})`:l,strokeWidth:n,strokeLinecap:"round",strokeDasharray:c,strokeDashoffset:a,style:{transformOrigin:"center",transform:`rotate(${i}deg)`,transitionProperty:s?"stroke-dashoffset":void 0,transitionDuration:s?`${u}ms`:void 0,transitionTimingFunction:s?y.GAUGE_ANIMATION_EASING:void 0}})]});exports.GaugeArcSvg=j;

package/dist/components/Gauge/helpers/GaugeArcSvg.d.ts

@@ -0,0 +1,14 @@
+export interface GaugeArcSvgProps {
+    radius: number;
+    strokeWidth: number;
+    circumference: number;
+    dashOffset: number;
+    startAngle: number;
+    color: string;
+    trackColor?: string;
+    gradientId?: string;
+    gradient?: [string, string];
+    animated: boolean;
+    fillDurationMs: number;
+}
+export declare const GaugeArcSvg: ({ radius, strokeWidth, circumference, dashOffset, startAngle, color, trackColor, gradientId, gradient, animated, fillDurationMs, }: GaugeArcSvgProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Gauge/helpers/GaugeArcSvg.js

@@ -0,0 +1,65 @@
+import { jsxs as l, jsx as o } from "react/jsx-runtime";
+import { cn as x } from "../../../utils/cn.js";
+import "react";
+import { GAUGE_ANIMATION_EASING as y } from "../Gauge.const.js";
+const D = ({
+  radius: e,
+  strokeWidth: n,
+  circumference: i,
+  dashOffset: a,
+  startAngle: f,
+  color: c,
+  trackColor: m,
+  gradientId: r,
+  gradient: s,
+  animated: t,
+  fillDurationMs: p
+}) => /* @__PURE__ */ l("svg", { viewBox: "0 0 100 100", className: "h-full w-full -rotate-90", children: [
+  /* @__PURE__ */ o("defs", { children: s && r && /* @__PURE__ */ l("linearGradient", { id: r, x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: [
+    /* @__PURE__ */ o("stop", { offset: "0%", stopColor: s[0] }),
+    /* @__PURE__ */ o("stop", { offset: "100%", stopColor: s[1] })
+  ] }) }),
+  /* @__PURE__ */ o(
+    "circle",
+    {
+      cx: "50",
+      cy: "50",
+      r: e,
+      fill: "none",
+      stroke: m || "currentColor",
+      strokeWidth: n,
+      strokeLinecap: "round",
+      strokeDasharray: i,
+      strokeDashoffset: 0,
+      className: x("bear-text-[var(--bear-border-default)]"),
+      style: {
+        transformOrigin: "center",
+        transform: `rotate(${f}deg)`
+      }
+    }
+  ),
+  /* @__PURE__ */ o(
+    "circle",
+    {
+      cx: "50",
+      cy: "50",
+      r: e,
+      fill: "none",
+      stroke: s && r ? `url(#${r})` : c,
+      strokeWidth: n,
+      strokeLinecap: "round",
+      strokeDasharray: i,
+      strokeDashoffset: a,
+      style: {
+        transformOrigin: "center",
+        transform: `rotate(${f}deg)`,
+        transitionProperty: t ? "stroke-dashoffset" : void 0,
+        transitionDuration: t ? `${p}ms` : void 0,
+        transitionTimingFunction: t ? y : void 0
+      }
+    }
+  )
+] });
+export {
+  D as GaugeArcSvg
+};

package/dist/components/Gauge/hooks/useGauge.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react"),e=require("../Gauge.const.cjs"),D=G=>{const{value:f,min:a=e.GAUGE_DEFAULT_MIN,max:A=e.GAUGE_DEFAULT_MAX,strokeWidth:m=10,arcAngle:c=e.GAUGE_DEFAULT_ARC_ANGLE,animated:t=!0,fillDurationMs:_=e.GAUGE_DEFAULT_FILL_DURATION_MS}=G,{percentage:d,circumference:r,offset:s,startAngle:g,radius:l}=i.useMemo(()=>{const n=Math.min(Math.max((f-a)/(A-a)*100,0),100),E=e.GAUGE_VIEWBOX_CENTER-m/2,o=2*Math.PI*E*(c/360),M=o-n/100*o,L=90+(360-c)/2;return{percentage:n,circumference:o,offset:M,startAngle:L,radius:E}},[f,a,A,c,m]),[U,u]=i.useState(()=>t?r:s);return i.useLayoutEffect(()=>{if(!t){u(s);return}u(r);const n=requestAnimationFrame(()=>u(s));return()=>cancelAnimationFrame(n)},[t,r,s]),{percentage:d,circumference:r,dashOffset:U,startAngle:g,radius:l,fillDurationMs:_,animated:t}};exports.useGauge=D;

package/dist/components/Gauge/hooks/useGauge.d.ts

@@ -0,0 +1,14 @@
+import { GaugeProps } from '../Gauge.types';
+export interface UseGaugeResult {
+    percentage: number;
+    circumference: number;
+    dashOffset: number;
+    startAngle: number;
+    radius: number;
+    fillDurationMs: number;
+    animated: boolean;
+}
+/**
+ * Computes arc geometry and animated stroke offset for {@link Gauge}.
+ */
+export declare const useGauge: (props: GaugeProps) => UseGaugeResult;