@forgedevstack/bear 1.2.3 → 1.2.4

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;

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

@@ -0,0 +1,42 @@
+import { useMemo as l, useState as p, useLayoutEffect as D } from "react";
+import { GAUGE_DEFAULT_MIN as F, GAUGE_DEFAULT_MAX as g, GAUGE_DEFAULT_ARC_ANGLE as h, GAUGE_DEFAULT_FILL_DURATION_MS as I, GAUGE_VIEWBOX_CENTER as T } from "../Gauge.const.js";
+const R = (A) => {
+  const {
+    value: u,
+    min: s = F,
+    max: f = g,
+    strokeWidth: i = 10,
+    arcAngle: a = h,
+    animated: t = !0,
+    fillDurationMs: E = I
+  } = A, { percentage: _, circumference: e, offset: r, startAngle: G, radius: U } = l(() => {
+    const n = Math.min(Math.max((u - s) / (f - s) * 100, 0), 100), m = T - i / 2, o = 2 * Math.PI * m * (a / 360), L = o - n / 100 * o, M = 90 + (360 - a) / 2;
+    return {
+      percentage: n,
+      circumference: o,
+      offset: L,
+      startAngle: M,
+      radius: m
+    };
+  }, [u, s, f, a, i]), [d, c] = p(() => t ? e : r);
+  return D(() => {
+    if (!t) {
+      c(r);
+      return;
+    }
+    c(e);
+    const n = requestAnimationFrame(() => c(r));
+    return () => cancelAnimationFrame(n);
+  }, [t, e, r]), {
+    percentage: _,
+    circumference: e,
+    dashOffset: d,
+    startAngle: G,
+    radius: U,
+    fillDurationMs: E,
+    animated: t
+  };
+};
+export {
+  R as useGauge
+};

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

@@ -1,6 +1,7 @@
 import { HTMLAttributes, ReactNode } from 'react';
 export type GlowEffect = 'ambient' | 'border' | 'spotlight' | 'pulse' | 'wave';
 export interface GlowCardProps extends HTMLAttributes<HTMLDivElement> {
+    id?: string;
     children?: ReactNode;
     /** Glow color (CSS color value) */
     glowColor?: string;

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

@@ -2,6 +2,7 @@ import { ReactNode } from 'react';
 export type GradientDirection = 'to-r' | 'to-l' | 'to-t' | 'to-b' | 'to-tr' | 'to-tl' | 'to-br' | 'to-bl';
 export type GradientPreset = 'primary' | 'sunset' | 'ocean' | 'forest' | 'fire' | 'purple' | 'neon' | 'candy' | 'aurora' | 'midnight';
 export interface GradientTextProps {
+    id?: string;
     /** Content to render with gradient */
     children: ReactNode;
     /** Gradient preset name */

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

@@ -0,0 +1 @@
+export declare const G_R_I_D_ROOT_CLASS = "Bear-Grid";

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

@@ -4,6 +4,7 @@ export type GridCols = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 'none'
 export type GridGap = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 16;
 export type GridFlow = 'row' | 'column' | 'dense' | 'row-dense' | 'column-dense';
 export interface GridProps extends HTMLAttributes<HTMLDivElement> {
+    id?: string;
     /** Number of columns */
     cols?: ResponsiveProp<GridCols>;
     /** Gap between items */

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

@@ -5,6 +5,7 @@ export interface HeatmapCell {
     label?: string;
 }
 export interface HeatmapProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    id?: string;
     /** Data points with date strings (YYYY-MM-DD) and values */
     data: HeatmapCell[];
     /** Start date (defaults to 1 year ago) */

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

@@ -1,6 +1,7 @@
 import { HTMLAttributes, ReactNode } from 'react';
 export type HighlightColor = 'primary' | 'yellow' | 'pink' | 'blue' | 'green' | 'purple' | 'orange' | 'red' | 'cyan';
 export interface HighlightProps extends HTMLAttributes<HTMLSpanElement> {
+    id?: string;
     /** Content to highlight */
     children?: ReactNode;
     /** Highlight color — 'primary' uses theme color from BearProvider */

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

@@ -0,0 +1 @@
+export declare const H_O_V_E_R_C_A_R_D_ROOT_CLASS = "Bear-HoverCard";

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

@@ -1,5 +1,7 @@
 import { HTMLAttributes, ReactNode } from 'react';
 export interface HoverCardProps extends Omit<HTMLAttributes<HTMLDivElement>, 'content'> {
+    testId?: string;
+    id?: string;
     children: ReactNode;
     cardContent: ReactNode;
     side?: 'top' | 'right' | 'bottom' | 'left';

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

@@ -0,0 +1 @@
+export declare const I_C_O_N_ROOT_CLASS = "Bear-Icon";

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

@@ -1,6 +1,7 @@
 import { SVGAttributes, ReactNode } from 'react';
 import { BearSize } from '../../types';
 export interface IconProps extends SVGAttributes<SVGElement> {
+    id?: string;
     /** Icon size */
     size?: BearSize | number;
     /** Icon color (CSS color value) */