@forgedevstack/bear 1.1.1 → 1.1.3

package/dist/components/AlertDialog/AlertDialog.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),d=require("react"),v=require("react-dom"),a=require("../../utils/cn.cjs"),u=require("../Button/Button.cjs"),_=require("../Typography/Typography.cjs"),t=require("./AlertDialog.const.cjs"),C=b=>{const{isOpen:o,onClose:i,onConfirm:A,title:g,description:l,confirmText:m="Confirm",cancelText:y="Cancel",confirmVariant:f="danger",loading:r=!1,loadingText:E,closeOnBackdrop:p=!1,closeOnEscape:s=!0,icon:n,className:x,testId:D}=b,c=d.useCallback(S=>{s&&S.key==="Escape"&&!r&&i()},[s,i,r]);if(d.useEffect(()=>(o&&(document.addEventListener("keydown",c),document.body.style.overflow="hidden"),()=>{document.removeEventListener("keydown",c),document.body.style.overflow=""}),[o,c]),!o)return null;const L=e.jsxs("div",{className:"Bear-AlertDialog bear-fixed bear-inset-0 bear-z-50 bear-flex bear-items-center bear-justify-center bear-p-4","data-testid":D,children:[e.jsx("div",{className:a.cn("Bear-AlertDialog__backdrop",t.ALERT_DIALOG_BACKDROP_CLASSES),onClick:p&&!r?i:void 0,"aria-hidden":"true"}),e.jsxs("div",{role:"alertdialog","aria-modal":"true","aria-labelledby":"alert-dialog-title","aria-describedby":l?"alert-dialog-description":void 0,className:a.cn("Bear-AlertDialog__container",t.ALERT_DIALOG_CONTAINER_CLASSES,"bear-p-6",x),children:[n&&e.jsx("div",{className:"Bear-AlertDialog__icon bear-mb-4 bear-flex bear-justify-center",children:n}),e.jsx(_.Typography,{variant:"h6",id:"alert-dialog-title",className:a.cn("Bear-AlertDialog__title",t.ALERT_DIALOG_TITLE_CLASSES,n&&"bear-text-center"),children:g}),l&&e.jsx(_.Typography,{variant:"body2",id:"alert-dialog-description",className:a.cn("Bear-AlertDialog__description",t.ALERT_DIALOG_DESCRIPTION_CLASSES,n&&"bear-text-center"),children:l}),e.jsxs("div",{className:a.cn("Bear-AlertDialog__footer",t.ALERT_DIALOG_FOOTER_CLASSES),children:[e.jsx(u.Button,{variant:"ghost",onClick:i,disabled:r,children:y}),e.jsx(u.Button,{variant:f,onClick:A,loading:r,loadingText:E,children:m})]})]})]});return v.createPortal(L,document.body)};exports.AlertDialog=C;

package/dist/components/AlertDialog/AlertDialog.const.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e="bear-absolute bear-inset-0 bear-bg-black/60 bear-backdrop-blur-sm bear-transition-opacity",r="bear-relative bear-w-full bear-max-w-md bear-bg-white dark:bear-bg-zinc-900 bear-rounded-xl bear-shadow-2xl bear-border bear-border-gray-200 dark:bear-border-zinc-700 bear-transform bear-transition-all bear-animate-in bear-fade-in bear-zoom-in-95",a="bear-text-lg bear-font-semibold bear-text-gray-900 dark:bear-text-white",b="bear-text-sm bear-text-gray-600 dark:bear-text-gray-400 bear-mt-2",t="bear-flex bear-items-center bear-justify-end bear-gap-3 bear-pt-6";exports.ALERT_DIALOG_BACKDROP_CLASSES=e;exports.ALERT_DIALOG_CONTAINER_CLASSES=r;exports.ALERT_DIALOG_DESCRIPTION_CLASSES=b;exports.ALERT_DIALOG_FOOTER_CLASSES=t;exports.ALERT_DIALOG_TITLE_CLASSES=a;

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

@@ -0,0 +1,5 @@
+export declare const ALERT_DIALOG_BACKDROP_CLASSES = "bear-absolute bear-inset-0 bear-bg-black/60 bear-backdrop-blur-sm bear-transition-opacity";
+export declare const ALERT_DIALOG_CONTAINER_CLASSES = "bear-relative bear-w-full bear-max-w-md bear-bg-white dark:bear-bg-zinc-900 bear-rounded-xl bear-shadow-2xl bear-border bear-border-gray-200 dark:bear-border-zinc-700 bear-transform bear-transition-all bear-animate-in bear-fade-in bear-zoom-in-95";
+export declare const ALERT_DIALOG_TITLE_CLASSES = "bear-text-lg bear-font-semibold bear-text-gray-900 dark:bear-text-white";
+export declare const ALERT_DIALOG_DESCRIPTION_CLASSES = "bear-text-sm bear-text-gray-600 dark:bear-text-gray-400 bear-mt-2";
+export declare const ALERT_DIALOG_FOOTER_CLASSES = "bear-flex bear-items-center bear-justify-end bear-gap-3 bear-pt-6";

package/dist/components/AlertDialog/AlertDialog.const.js

@@ -0,0 +1,8 @@
+const e = "bear-absolute bear-inset-0 bear-bg-black/60 bear-backdrop-blur-sm bear-transition-opacity", r = "bear-relative bear-w-full bear-max-w-md bear-bg-white dark:bear-bg-zinc-900 bear-rounded-xl bear-shadow-2xl bear-border bear-border-gray-200 dark:bear-border-zinc-700 bear-transform bear-transition-all bear-animate-in bear-fade-in bear-zoom-in-95", a = "bear-text-lg bear-font-semibold bear-text-gray-900 dark:bear-text-white", b = "bear-text-sm bear-text-gray-600 dark:bear-text-gray-400 bear-mt-2", t = "bear-flex bear-items-center bear-justify-end bear-gap-3 bear-pt-6";
+export {
+  e as ALERT_DIALOG_BACKDROP_CLASSES,
+  r as ALERT_DIALOG_CONTAINER_CLASSES,
+  b as ALERT_DIALOG_DESCRIPTION_CLASSES,
+  t as ALERT_DIALOG_FOOTER_CLASSES,
+  a as ALERT_DIALOG_TITLE_CLASSES
+};

package/dist/components/AlertDialog/AlertDialog.d.ts

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

package/dist/components/AlertDialog/AlertDialog.js

@@ -0,0 +1,107 @@
+import { jsxs as d, jsx as e } from "react/jsx-runtime";
+import { useCallback as y, useEffect as D } from "react";
+import { createPortal as h } from "react-dom";
+import { cn as a } from "../../utils/cn.js";
+import { Button as s } from "../Button/Button.js";
+import { Typography as m } from "../Typography/Typography.js";
+import { ALERT_DIALOG_BACKDROP_CLASSES as T, ALERT_DIALOG_TITLE_CLASSES as O, ALERT_DIALOG_DESCRIPTION_CLASSES as x, ALERT_DIALOG_FOOTER_CLASSES as N, ALERT_DIALOG_CONTAINER_CLASSES as B } from "./AlertDialog.const.js";
+const z = (_) => {
+  const {
+    isOpen: o,
+    onClose: t,
+    onConfirm: f,
+    title: b,
+    description: l,
+    confirmText: A = "Confirm",
+    cancelText: p = "Cancel",
+    confirmVariant: E = "danger",
+    loading: r = !1,
+    loadingText: g,
+    closeOnBackdrop: L = !1,
+    closeOnEscape: c = !0,
+    icon: i,
+    className: u,
+    testId: C
+  } = _, n = y(
+    (S) => {
+      c && S.key === "Escape" && !r && t();
+    },
+    [c, t, r]
+  );
+  if (D(() => (o && (document.addEventListener("keydown", n), document.body.style.overflow = "hidden"), () => {
+    document.removeEventListener("keydown", n), document.body.style.overflow = "";
+  }), [o, n]), !o) return null;
+  const v = /* @__PURE__ */ d(
+    "div",
+    {
+      className: "Bear-AlertDialog bear-fixed bear-inset-0 bear-z-50 bear-flex bear-items-center bear-justify-center bear-p-4",
+      "data-testid": C,
+      children: [
+        /* @__PURE__ */ e(
+          "div",
+          {
+            className: a("Bear-AlertDialog__backdrop", T),
+            onClick: L && !r ? t : void 0,
+            "aria-hidden": "true"
+          }
+        ),
+        /* @__PURE__ */ d(
+          "div",
+          {
+            role: "alertdialog",
+            "aria-modal": "true",
+            "aria-labelledby": "alert-dialog-title",
+            "aria-describedby": l ? "alert-dialog-description" : void 0,
+            className: a("Bear-AlertDialog__container", B, "bear-p-6", u),
+            children: [
+              i && /* @__PURE__ */ e("div", { className: "Bear-AlertDialog__icon bear-mb-4 bear-flex bear-justify-center", children: i }),
+              /* @__PURE__ */ e(
+                m,
+                {
+                  variant: "h6",
+                  id: "alert-dialog-title",
+                  className: a("Bear-AlertDialog__title", O, i && "bear-text-center"),
+                  children: b
+                }
+              ),
+              l && /* @__PURE__ */ e(
+                m,
+                {
+                  variant: "body2",
+                  id: "alert-dialog-description",
+                  className: a("Bear-AlertDialog__description", x, i && "bear-text-center"),
+                  children: l
+                }
+              ),
+              /* @__PURE__ */ d("div", { className: a("Bear-AlertDialog__footer", N), children: [
+                /* @__PURE__ */ e(
+                  s,
+                  {
+                    variant: "ghost",
+                    onClick: t,
+                    disabled: r,
+                    children: p
+                  }
+                ),
+                /* @__PURE__ */ e(
+                  s,
+                  {
+                    variant: E,
+                    onClick: f,
+                    loading: r,
+                    loadingText: g,
+                    children: A
+                  }
+                )
+              ] })
+            ]
+          }
+        )
+      ]
+    }
+  );
+  return h(v, document.body);
+};
+export {
+  z as AlertDialog
+};

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

@@ -0,0 +1,34 @@
+import { ReactNode } from 'react';
+import { BearVariant } from '../../types';
+export interface AlertDialogProps {
+    /** Whether the dialog is open */
+    isOpen: boolean;
+    /** Callback when dialog should close (cancel/backdrop/escape) */
+    onClose: () => void;
+    /** Callback when confirm action is triggered */
+    onConfirm: () => void;
+    /** Dialog title */
+    title: string;
+    /** Dialog description / body text */
+    description?: string | ReactNode;
+    /** Confirm button text */
+    confirmText?: string;
+    /** Cancel button text */
+    cancelText?: string;
+    /** Variant for the confirm button */
+    confirmVariant?: BearVariant | (string & {});
+    /** Whether confirm action is in progress */
+    loading?: boolean;
+    /** Loading text for confirm button */
+    loadingText?: string;
+    /** Whether clicking backdrop closes the dialog */
+    closeOnBackdrop?: boolean;
+    /** Whether pressing Escape closes the dialog */
+    closeOnEscape?: boolean;
+    /** Optional icon to show above the title */
+    icon?: ReactNode;
+    /** Additional class name */
+    className?: string;
+    /** Test ID */
+    testId?: string;
+}

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

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

package/dist/components/AspectRatio/AspectRatio.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),l=require("react"),b=require("../../utils/cn.cjs"),r=l.forwardRef(({ratio:a=16/9,maxWidth:e,children:s,className:i,style:c,...n},o)=>t.jsx("div",{ref:o,className:b.cn("Bear-AspectRatio bear-relative bear-w-full bear-overflow-hidden",i),style:{maxWidth:typeof e=="number"?`${e}px`:e,...c},...n,children:t.jsx("div",{className:"Bear-AspectRatio__inner bear-w-full bear-relative",style:{paddingBottom:`${1/a*100}%`},children:t.jsx("div",{className:"Bear-AspectRatio__content bear-absolute bear-inset-0 bear-flex bear-items-center bear-justify-center",children:s})})}));r.displayName="AspectRatio";exports.AspectRatio=r;

package/dist/components/AspectRatio/AspectRatio.d.ts

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

package/dist/components/AspectRatio/AspectRatio.js

@@ -0,0 +1,29 @@
+import { jsx as r } from "react/jsx-runtime";
+import { forwardRef as c } from "react";
+import { cn as n } from "../../utils/cn.js";
+const p = c(
+  ({ ratio: a = 16 / 9, maxWidth: e, children: t, className: i, style: o, ...s }, l) => /* @__PURE__ */ r(
+    "div",
+    {
+      ref: l,
+      className: n("Bear-AspectRatio bear-relative bear-w-full bear-overflow-hidden", i),
+      style: {
+        maxWidth: typeof e == "number" ? `${e}px` : e,
+        ...o
+      },
+      ...s,
+      children: /* @__PURE__ */ r(
+        "div",
+        {
+          className: "Bear-AspectRatio__inner bear-w-full bear-relative",
+          style: { paddingBottom: `${1 / a * 100}%` },
+          children: /* @__PURE__ */ r("div", { className: "Bear-AspectRatio__content bear-absolute bear-inset-0 bear-flex bear-items-center bear-justify-center", children: t })
+        }
+      )
+    }
+  )
+);
+p.displayName = "AspectRatio";
+export {
+  p as AspectRatio
+};

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

@@ -0,0 +1,9 @@
+import { HTMLAttributes, ReactNode } from 'react';
+export interface AspectRatioProps extends HTMLAttributes<HTMLDivElement> {
+    /** Aspect ratio as a number (width / height). E.g. 16/9, 4/3, 1 */
+    ratio?: number;
+    /** Maximum width constraint */
+    maxWidth?: string | number;
+    /** Content to render inside the aspect ratio container */
+    children?: ReactNode;
+}

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

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

package/dist/components/Button/Button.cjs

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

package/dist/components/Button/Button.constants.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r={xs:"bear-px-2 bear-py-1 bear-text-xs bear-gap-1",sm:"bear-px-3 bear-py-1.5 bear-text-sm bear-gap-1.5",md:"bear-px-4 bear-py-2 bear-text-sm bear-gap-2",lg:"bear-px-5 bear-py-2.5 bear-text-base bear-gap-2",xl:"bear-px-6 bear-py-3 bear-text-lg bear-gap-2.5"},e={primary:`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r={xs:"bear-px-2 bear-py-1 bear-text-xs bear-gap-1",sm:"bear-px-3 bear-py-1.5 bear-text-sm bear-gap-1.5",md:"bear-px-4 bear-py-2 bear-text-sm bear-gap-2",lg:"bear-px-5 bear-py-2.5 bear-text-base bear-gap-2",xl:"bear-px-6 bear-py-3 bear-text-lg bear-gap-2.5"},e={xs:"[&_svg]:bear-w-3 [&_svg]:bear-h-3",sm:"[&_svg]:bear-w-4 [&_svg]:bear-h-4",md:"[&_svg]:bear-w-5 [&_svg]:bear-h-5",lg:"[&_svg]:bear-w-5 [&_svg]:bear-h-5",xl:"[&_svg]:bear-w-6 [&_svg]:bear-h-6"},a={primary:`
     bear-btn-primary
     bear-text-white bear-relative bear-overflow-hidden
     focus:bear-ring-2 focus:bear-ring-offset-2
@@ -44,4 +44,4 @@
     bear-text-white bear-relative bear-overflow-hidden
     focus:bear-ring-2 focus:bear-ring-offset-2
     disabled:bear-opacity-50 disabled:bear-cursor-not-allowed
-  `},a={primary:{bg:"var(--bear-primary-500)",hover:"var(--bear-primary-600)",active:"var(--bear-primary-700)",ring:"var(--bear-primary-500)"},secondary:{bg:"var(--bear-secondary-500)",hover:"var(--bear-secondary-600)",active:"var(--bear-secondary-700)",ring:"var(--bear-secondary-500)"},success:{bg:"var(--bear-success-500)",hover:"var(--bear-success-600)",active:"var(--bear-success-700)",ring:"var(--bear-success-500)"},warning:{bg:"var(--bear-warning-500)",hover:"var(--bear-warning-600)",active:"var(--bear-warning-700)",ring:"var(--bear-warning-500)"},danger:{bg:"var(--bear-danger-500)",hover:"var(--bear-danger-600)",active:"var(--bear-danger-700)",ring:"var(--bear-danger-500)"},info:{bg:"var(--bear-info-500)",hover:"var(--bear-info-600)",active:"var(--bear-info-700)",ring:"var(--bear-info-500)"},error:{bg:"var(--bear-danger-500)",hover:"var(--bear-danger-600)",active:"var(--bear-danger-700)",ring:"var(--bear-danger-500)"},ghost:{bg:"transparent",hover:"var(--bear-neutral-100)",active:"var(--bear-neutral-200)",text:"var(--bear-text-primary)",ring:"var(--bear-neutral-500)"},outline:{bg:"transparent",hover:"var(--bear-primary-50)",active:"var(--bear-primary-100)",border:"var(--bear-primary-500)",text:"var(--bear-primary-500)",ring:"var(--bear-primary-500)"}};exports.BUTTON_SIZE=r;exports.BUTTON_VARIANT=e;exports.VARIANT_DEFAULTS=a;
+  `},b={primary:{bg:"var(--bear-primary-500)",hover:"var(--bear-primary-600)",active:"var(--bear-primary-700)",ring:"var(--bear-primary-500)"},secondary:{bg:"var(--bear-secondary-500)",hover:"var(--bear-secondary-600)",active:"var(--bear-secondary-700)",ring:"var(--bear-secondary-500)"},success:{bg:"var(--bear-success-500)",hover:"var(--bear-success-600)",active:"var(--bear-success-700)",ring:"var(--bear-success-500)"},warning:{bg:"var(--bear-warning-500)",hover:"var(--bear-warning-600)",active:"var(--bear-warning-700)",ring:"var(--bear-warning-500)"},danger:{bg:"var(--bear-danger-500)",hover:"var(--bear-danger-600)",active:"var(--bear-danger-700)",ring:"var(--bear-danger-500)"},info:{bg:"var(--bear-info-500)",hover:"var(--bear-info-600)",active:"var(--bear-info-700)",ring:"var(--bear-info-500)"},error:{bg:"var(--bear-danger-500)",hover:"var(--bear-danger-600)",active:"var(--bear-danger-700)",ring:"var(--bear-danger-500)"},ghost:{bg:"transparent",hover:"var(--bear-neutral-100)",active:"var(--bear-neutral-200)",text:"var(--bear-text-primary)",ring:"var(--bear-neutral-500)"},outline:{bg:"transparent",hover:"var(--bear-primary-50)",active:"var(--bear-primary-100)",border:"var(--bear-primary-500)",text:"var(--bear-primary-500)",ring:"var(--bear-primary-500)"}};exports.BUTTON_ICON_SIZE=e;exports.BUTTON_SIZE=r;exports.BUTTON_VARIANT=a;exports.VARIANT_DEFAULTS=b;

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

@@ -1,5 +1,6 @@
 import { BearSize, BearVariant } from '../../types';
 export declare const BUTTON_SIZE: Record<BearSize, string>;
+export declare const BUTTON_ICON_SIZE: Record<BearSize, string>;
 /**
  * Button variants using CSS variables for full customization
  * Colors can be overridden via:

package/dist/components/Button/Button.constants.js

@@ -5,6 +5,12 @@ const r = {
   lg: "bear-px-5 bear-py-2.5 bear-text-base bear-gap-2",
   xl: "bear-px-6 bear-py-3 bear-text-lg bear-gap-2.5"
 }, e = {
+  xs: "[&_svg]:bear-w-3 [&_svg]:bear-h-3",
+  sm: "[&_svg]:bear-w-4 [&_svg]:bear-h-4",
+  md: "[&_svg]:bear-w-5 [&_svg]:bear-h-5",
+  lg: "[&_svg]:bear-w-5 [&_svg]:bear-h-5",
+  xl: "[&_svg]:bear-w-6 [&_svg]:bear-h-6"
+}, a = {
   primary: `
     bear-btn-primary
     bear-text-white bear-relative bear-overflow-hidden
@@ -60,7 +66,7 @@ const r = {
     focus:bear-ring-2 focus:bear-ring-offset-2
     disabled:bear-opacity-50 disabled:bear-cursor-not-allowed
   `
-}, a = {
+}, b = {
   primary: { bg: "var(--bear-primary-500)", hover: "var(--bear-primary-600)", active: "var(--bear-primary-700)", ring: "var(--bear-primary-500)" },
   secondary: { bg: "var(--bear-secondary-500)", hover: "var(--bear-secondary-600)", active: "var(--bear-secondary-700)", ring: "var(--bear-secondary-500)" },
   success: { bg: "var(--bear-success-500)", hover: "var(--bear-success-600)", active: "var(--bear-success-700)", ring: "var(--bear-success-500)" },
@@ -72,7 +78,8 @@ const r = {
   outline: { bg: "transparent", hover: "var(--bear-primary-50)", active: "var(--bear-primary-100)", border: "var(--bear-primary-500)", text: "var(--bear-primary-500)", ring: "var(--bear-primary-500)" }
 };
 export {
+  e as BUTTON_ICON_SIZE,
   r as BUTTON_SIZE,
-  e as BUTTON_VARIANT,
-  a as VARIANT_DEFAULTS
+  a as BUTTON_VARIANT,
+  b as VARIANT_DEFAULTS
 };

package/dist/components/Button/Button.js

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

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

@@ -21,6 +21,8 @@ export interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement
     size?: BearSize;
     /** Whether button is in loading state */
     loading?: boolean;
+    /** Text to display while loading (replaces children during loading) */
+    loadingText?: string;
     /** Whether button takes full width */
     fullWidth?: boolean;
     /** Icon (shorthand for leftIcon or rightIcon based on iconPosition) */

package/dist/components/FormField/FormField.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),t=require("react"),r=require("../../utils/cn.cjs"),U=require("./FormField.const.cjs"),W=require("../../context/BearProvider.cjs"),q=t.forwardRef(({label:R,helperText:E,error:_,success:k,size:I="md",leftAddon:l,rightAddon:c,fullWidth:z=!1,required:M=!1,variant:m="outlined",className:L,disabled:g,value:x,defaultValue:u,placeholder:O,onFocus:s,onBlur:o,...p},P)=>{var C;const F=m==="filled",i=m==="standard",y=t.useContext(W.BearContext),e=(C=y==null?void 0:y.components)==null?void 0:C.FormField,D=e==null?void 0:e.root,T=e==null?void 0:e.input,Z=e==null?void 0:e.label,G=e==null?void 0:e.helper,j=e==null?void 0:e.addon,H=F?e==null?void 0:e.filled:i?e==null?void 0:e.standard:e==null?void 0:e.outlined,[n,B]=t.useState(!1),J=t.useId(),v=p.id??J,K=x!=null&&x!==""||u!=null&&u!=="",N=n||K,b=!!_,d=!!k&&!b,f=U.FORMFIELD_SIZE_CLASSES[I],w=_||k||E,Q=t.useCallback(h=>{B(!0),s==null||s(h)},[s]),S=t.useCallback(h=>{B(!1),o==null||o(h)},[o]);return a.jsxs("div",{className:r.cn("Bear-FormField bear-flex bear-flex-col bear-gap-1",z&&"bear-w-full"),style:D,children:[a.jsxs("div",{className:"Bear-FormField__wrapper bear-relative bear-flex bear-items-center",children:[l&&a.jsx("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:j,children:l}),a.jsx("input",{ref:P,id:v,disabled:g,value:x,defaultValue:u,placeholder:N?O:void 0,"aria-invalid":b||void 0,onFocus:Q,onBlur:S,className:r.cn("Bear-FormField__input bear-peer bear-w-full bear-rounded-lg bear-border bear-outline-none bear-transition-all bear-duration-200",F?r.cn("bear-bg-gray-100 bear-border-transparent bear-rounded-t-lg bear-rounded-b-none bear-border-b-2","dark:bear-bg-gray-800",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?r.cn("bear-bg-transparent bear-rounded-none bear-border-0 bear-border-b-2",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"):r.cn("bear-bg-white dark:bear-bg-gray-900",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":r.cn("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",l&&"bear-pl-10",c&&"bear-pr-10",f.field,i&&"focus:bear-ring-0",L),style:{...H,...T},...p}),a.jsxs("label",{htmlFor:v,className:r.cn("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",l?"bear-ml-10":"bear-ml-4",N?r.cn(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"):r.cn(f.labelRest,"bear--translate-y-1/2","bear-text-gray-500 dark:bear-text-gray-400"),g&&"bear-opacity-50"),style:Z,children:[R,M&&a.jsx("span",{className:"bear-text-red-500 bear-ml-0.5",children:"*"})]}),c&&a.jsx("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:j,children:c})]}),w&&a.jsx("p",{className:r.cn("Bear-FormField__helper bear-text-xs bear-ml-4",b?"bear-text-red-500":d?"bear-text-green-500":"bear-text-gray-500 dark:bear-text-gray-400"),style:G,children:w})]})});q.displayName="FormField";exports.FormField=q;

package/dist/components/FormField/FormField.const.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e={sm:{field:"bear-h-10 bear-text-sm bear-px-3 bear-pt-4 bear-pb-1",label:"bear-text-xs",labelFloat:"bear-top-1 bear-text-[10px]",labelRest:"bear-top-1/2 bear-text-sm"},md:{field:"bear-h-14 bear-text-base bear-px-4 bear-pt-5 bear-pb-2",label:"bear-text-sm",labelFloat:"bear-top-1.5 bear-text-xs",labelRest:"bear-top-1/2 bear-text-base"},lg:{field:"bear-h-16 bear-text-lg bear-px-5 bear-pt-6 bear-pb-2",label:"bear-text-base",labelFloat:"bear-top-2 bear-text-xs",labelRest:"bear-top-1/2 bear-text-lg"}};exports.FORMFIELD_SIZE_CLASSES=e;

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

@@ -0,0 +1,20 @@
+export declare const FORMFIELD_SIZE_CLASSES: {
+    readonly sm: {
+        readonly field: "bear-h-10 bear-text-sm bear-px-3 bear-pt-4 bear-pb-1";
+        readonly label: "bear-text-xs";
+        readonly labelFloat: "bear-top-1 bear-text-[10px]";
+        readonly labelRest: "bear-top-1/2 bear-text-sm";
+    };
+    readonly md: {
+        readonly field: "bear-h-14 bear-text-base bear-px-4 bear-pt-5 bear-pb-2";
+        readonly label: "bear-text-sm";
+        readonly labelFloat: "bear-top-1.5 bear-text-xs";
+        readonly labelRest: "bear-top-1/2 bear-text-base";
+    };
+    readonly lg: {
+        readonly field: "bear-h-16 bear-text-lg bear-px-5 bear-pt-6 bear-pb-2";
+        readonly label: "bear-text-base";
+        readonly labelFloat: "bear-top-2 bear-text-xs";
+        readonly labelRest: "bear-top-1/2 bear-text-lg";
+    };
+};