@forgedevstack/bear 1.1.1 → 1.1.4

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/Blockquote/Blockquote.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),c=require("../../utils/cn.cjs");require("react");const n=require("../Typography/Typography.cjs"),s=require("./Blockquote.const.cjs"),b=e.jsx("svg",{className:"bear-w-6 bear-h-6 bear-flex-shrink-0",fill:"currentColor",viewBox:"0 0 24 24","aria-hidden":!0,children:e.jsx("path",{d:"M14.017 21v-7.391c0-5.704 3.731-9.57 8.983-10.609l.995 2.151c-2.432.917-3.995 3.638-3.995 5.849h4v10h-9.983zm-14.017 0v-7.391c0-5.704 3.748-9.57 9-10.609l.996 2.151c-2.433.917-3.996 3.638-3.996 5.849h3.983v10h-9.983z"})}),p=({cite:r,icon:o,color:a="default",children:t,className:l,testId:i,...d})=>{const h=s.BORDER_COLOR_MAP[a],u=s.ICON_COLOR_MAP[a];return e.jsx("blockquote",{className:c.cn(s.ROOT_CLASS,h,l),"data-testid":i,cite:r,...d,children:e.jsxs("div",{className:"bear-flex bear-gap-3",children:[e.jsx("span",{className:u,children:o??b}),e.jsxs("div",{className:"bear-flex-1 bear-min-w-0",children:[e.jsx(n.Typography,{variant:"body1",component:"span",children:t}),r&&e.jsxs(n.Typography,{variant:"caption",color:"secondary",component:"cite",className:c.cn(s.CITE_CLASS,"bear-block"),children:["— ",r]})]})]})})};exports.Blockquote=p;

package/dist/components/Blockquote/Blockquote.const.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r={default:"bear-border-l-gray-300 dark:bear-border-l-zinc-600",primary:"bear-border-l-pink-500 dark:bear-border-l-pink-400",success:"bear-border-l-green-500 dark:bear-border-l-green-400",warning:"bear-border-l-amber-500 dark:bear-border-l-amber-400",error:"bear-border-l-red-500 dark:bear-border-l-red-400"},e={default:"bear-text-gray-500 dark:bear-text-zinc-400",primary:"bear-text-pink-500 dark:bear-text-pink-400",success:"bear-text-green-500 dark:bear-text-green-400",warning:"bear-text-amber-500 dark:bear-text-amber-400",error:"bear-text-red-500 dark:bear-text-red-400"},a="Bear-Blockquote bear-pl-4 bear-py-2 bear-border-l-4 bear-bg-gray-50 dark:bear-bg-zinc-800/50 bear-rounded-r bear-not-italic",b="Bear-Blockquote__cite bear-mt-2";exports.BORDER_COLOR_MAP=r;exports.CITE_CLASS=b;exports.ICON_COLOR_MAP=e;exports.ROOT_CLASS=a;

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

@@ -0,0 +1,5 @@
+import { BlockquoteColor } from './Blockquote.types';
+export declare const BORDER_COLOR_MAP: Record<BlockquoteColor, string>;
+export declare const ICON_COLOR_MAP: Record<BlockquoteColor, string>;
+export declare const ROOT_CLASS = "Bear-Blockquote bear-pl-4 bear-py-2 bear-border-l-4 bear-bg-gray-50 dark:bear-bg-zinc-800/50 bear-rounded-r bear-not-italic";
+export declare const CITE_CLASS = "Bear-Blockquote__cite bear-mt-2";

package/dist/components/Blockquote/Blockquote.const.js

@@ -0,0 +1,19 @@
+const r = {
+  default: "bear-border-l-gray-300 dark:bear-border-l-zinc-600",
+  primary: "bear-border-l-pink-500 dark:bear-border-l-pink-400",
+  success: "bear-border-l-green-500 dark:bear-border-l-green-400",
+  warning: "bear-border-l-amber-500 dark:bear-border-l-amber-400",
+  error: "bear-border-l-red-500 dark:bear-border-l-red-400"
+}, e = {
+  default: "bear-text-gray-500 dark:bear-text-zinc-400",
+  primary: "bear-text-pink-500 dark:bear-text-pink-400",
+  success: "bear-text-green-500 dark:bear-text-green-400",
+  warning: "bear-text-amber-500 dark:bear-text-amber-400",
+  error: "bear-text-red-500 dark:bear-text-red-400"
+}, a = "Bear-Blockquote bear-pl-4 bear-py-2 bear-border-l-4 bear-bg-gray-50 dark:bear-bg-zinc-800/50 bear-rounded-r bear-not-italic", b = "Bear-Blockquote__cite bear-mt-2";
+export {
+  r as BORDER_COLOR_MAP,
+  b as CITE_CLASS,
+  e as ICON_COLOR_MAP,
+  a as ROOT_CLASS
+};

package/dist/components/Blockquote/Blockquote.d.ts

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

package/dist/components/Blockquote/Blockquote.js

@@ -0,0 +1,56 @@
+import { jsx as a, jsxs as e } from "react/jsx-runtime";
+import { cn as c } from "../../utils/cn.js";
+import "react";
+import { Typography as s } from "../Typography/Typography.js";
+import { ICON_COLOR_MAP as p, CITE_CLASS as b, BORDER_COLOR_MAP as v, ROOT_CLASS as C } from "./Blockquote.const.js";
+const O = /* @__PURE__ */ a(
+  "svg",
+  {
+    className: "bear-w-6 bear-h-6 bear-flex-shrink-0",
+    fill: "currentColor",
+    viewBox: "0 0 24 24",
+    "aria-hidden": !0,
+    children: /* @__PURE__ */ a("path", { d: "M14.017 21v-7.391c0-5.704 3.731-9.57 8.983-10.609l.995 2.151c-2.432.917-3.995 3.638-3.995 5.849h4v10h-9.983zm-14.017 0v-7.391c0-5.704 3.748-9.57 9-10.609l.996 2.151c-2.433.917-3.996 3.638-3.996 5.849h3.983v10h-9.983z" })
+  }
+), A = ({
+  cite: r,
+  icon: n,
+  color: o = "default",
+  children: l,
+  className: t,
+  testId: i,
+  ...m
+}) => {
+  const d = v[o], h = p[o];
+  return /* @__PURE__ */ a(
+    "blockquote",
+    {
+      className: c(C, d, t),
+      "data-testid": i,
+      cite: r,
+      ...m,
+      children: /* @__PURE__ */ e("div", { className: "bear-flex bear-gap-3", children: [
+        /* @__PURE__ */ a("span", { className: h, children: n ?? O }),
+        /* @__PURE__ */ e("div", { className: "bear-flex-1 bear-min-w-0", children: [
+          /* @__PURE__ */ a(s, { variant: "body1", component: "span", children: l }),
+          r && /* @__PURE__ */ e(
+            s,
+            {
+              variant: "caption",
+              color: "secondary",
+              component: "cite",
+              className: c(b, "bear-block"),
+              children: [
+                "— ",
+                r
+              ]
+            }
+          )
+        ] })
+      ] })
+    }
+  );
+};
+export {
+  A as Blockquote
+};

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

@@ -0,0 +1,9 @@
+import { ReactNode, HTMLAttributes } from 'react';
+export type BlockquoteColor = 'default' | 'primary' | 'success' | 'warning' | 'error';
+export interface BlockquoteProps extends HTMLAttributes<HTMLElement> {
+    cite?: string;
+    icon?: ReactNode;
+    color?: BlockquoteColor;
+    children: ReactNode;
+    testId?: string;
+}

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

@@ -0,0 +1,2 @@
+export { Blockquote, default } from './Blockquote';
+export type { BlockquoteProps, BlockquoteColor } from './Blockquote.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/CheckboxCard/CheckboxCard.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),i=require("react"),S=require("../../utils/cn.cjs"),A=require("../Typography/Typography.cjs"),c=require("./CheckboxCard.const.cjs"),I=i.createContext(null),G=({className:s})=>r.jsx("svg",{className:s,fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",strokeWidth:"2.5",strokeLinecap:"round",strokeLinejoin:"round",children:r.jsx("polyline",{points:"20 6 9 17 4 12"})}),_=({checked:s,onChange:a,value:t,label:y,description:u,icon:k,disabled:l=!1,variant:m="default",size:x="md",testId:f,className:b,onClick:n,...p})=>{const e=i.useContext(I),v=!!e,[E,T]=i.useState(!1),j=s!==void 0,o=v&&t?e.value.includes(t):j?!!s:E,N=i.useCallback(d=>{if(!(l||((e==null?void 0:e.disabled)??!1)))if(n==null||n(d),v&&t&&e){const h=o?e.value.filter(D=>D!==t):[...e.value,t];e.onChange(h)}else{const h=!o;j||T(h),a==null||a(h)}},[l,e,v,o,j,t,a,n]),C=l||((e==null?void 0:e.disabled)??!1);return r.jsxs("div",{role:"checkbox","aria-checked":o,"aria-disabled":C,tabIndex:C?void 0:0,onKeyDown:d=>{(d.key==="Enter"||d.key===" ")&&(d.preventDefault(),N(d))},className:S.cn(c.ROOT_CLASS,c.SIZE_PADDING_MAP[x],c.VARIANT_CLASSES[m],o&&c.CHECKED_CLASSES,C&&"bear-opacity-50 bear-cursor-not-allowed bear-pointer-events-none",!C&&"hover:bear-border-gray-300 dark:hover:bear-border-gray-600",b),onClick:N,"data-testid":f,...p,children:[r.jsx("div",{className:S.cn("bear-absolute bear-top-3 bear-right-3 bear-flex bear-items-center bear-justify-center bear-rounded-full bear-border-2",o?"bear-border-pink-500 dark:bear-border-pink-400 bear-bg-pink-500 dark:bear-bg-pink-400 bear-text-white":"bear-border-gray-300 dark:bear-border-gray-600",c.CHECKBOX_INDICATOR_SIZE_MAP[x]),children:o&&r.jsx(G,{className:"bear-w-2.5 bear-h-2.5"})}),k&&r.jsx("div",{className:"bear-mb-3 bear-flex bear-items-center bear-justify-center bear-text-gray-500 dark:bear-text-gray-400",children:k}),r.jsx(A.Typography,{variant:"body2",weight:"medium",className:"bear-block",children:y}),u&&r.jsx(A.Typography,{variant:"caption",color:"secondary",className:"bear-mt-1 bear-block",children:u})]})};_.displayName="CheckboxCard";const g=({value:s,onChange:a,children:t,columns:y=c.DEFAULT_COLUMNS,gap:u=c.DEFAULT_GAP,testId:k,className:l,...m})=>{const[x,f]=i.useState([]),b=s!==void 0,n=b?s:x,p=i.useCallback(e=>{b||f(e),a==null||a(e)},[b,a]);return r.jsx(I.Provider,{value:{value:n,onChange:p},children:r.jsx("div",{role:"group",className:S.cn("Bear-CheckboxCardGroup bear-grid",l),style:{gridTemplateColumns:`repeat(${y}, minmax(0, 1fr))`,gap:`${u*.25}rem`},"data-testid":k,...m,children:t})})};g.displayName="CheckboxCardGroup";exports.CheckboxCard=_;exports.CheckboxCardGroup=g;

package/dist/components/CheckboxCard/CheckboxCard.const.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r={sm:"bear-p-3",md:"bear-p-4",lg:"bear-p-5"},e={default:"bear-border bear-border-gray-200 dark:bear-border-gray-700",outline:"bear-border bear-border-dashed bear-border-gray-300 dark:bear-border-gray-600",filled:"bear-bg-gray-50 dark:bear-bg-gray-800/50"},a="bear-border-pink-500 dark:bear-border-pink-400 bear-ring-2 bear-ring-pink-500/30 dark:bear-ring-pink-400/30 bear-bg-pink-50 dark:bear-bg-pink-950/30",b="Bear-CheckboxCard bear-relative bear-rounded-lg bear-transition-all bear-duration-200 bear-cursor-pointer bear-text-left",d={sm:"bear-w-4 bear-h-4",md:"bear-w-5 bear-h-5",lg:"bear-w-6 bear-h-6"},o=1,n=4;exports.CHECKBOX_INDICATOR_SIZE_MAP=d;exports.CHECKED_CLASSES=a;exports.DEFAULT_COLUMNS=o;exports.DEFAULT_GAP=n;exports.ROOT_CLASS=b;exports.SIZE_PADDING_MAP=r;exports.VARIANT_CLASSES=e;

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

@@ -0,0 +1,7 @@
+export declare const SIZE_PADDING_MAP: Record<'sm' | 'md' | 'lg', string>;
+export declare const VARIANT_CLASSES: Record<'default' | 'outline' | 'filled', string>;
+export declare const CHECKED_CLASSES = "bear-border-pink-500 dark:bear-border-pink-400 bear-ring-2 bear-ring-pink-500/30 dark:bear-ring-pink-400/30 bear-bg-pink-50 dark:bear-bg-pink-950/30";
+export declare const ROOT_CLASS = "Bear-CheckboxCard bear-relative bear-rounded-lg bear-transition-all bear-duration-200 bear-cursor-pointer bear-text-left";
+export declare const CHECKBOX_INDICATOR_SIZE_MAP: Record<'sm' | 'md' | 'lg', string>;
+export declare const DEFAULT_COLUMNS = 1;
+export declare const DEFAULT_GAP = 4;

package/dist/components/CheckboxCard/CheckboxCard.const.js

@@ -0,0 +1,22 @@
+const r = {
+  sm: "bear-p-3",
+  md: "bear-p-4",
+  lg: "bear-p-5"
+}, e = {
+  default: "bear-border bear-border-gray-200 dark:bear-border-gray-700",
+  outline: "bear-border bear-border-dashed bear-border-gray-300 dark:bear-border-gray-600",
+  filled: "bear-bg-gray-50 dark:bear-bg-gray-800/50"
+}, a = "bear-border-pink-500 dark:bear-border-pink-400 bear-ring-2 bear-ring-pink-500/30 dark:bear-ring-pink-400/30 bear-bg-pink-50 dark:bear-bg-pink-950/30", b = "Bear-CheckboxCard bear-relative bear-rounded-lg bear-transition-all bear-duration-200 bear-cursor-pointer bear-text-left", d = {
+  sm: "bear-w-4 bear-h-4",
+  md: "bear-w-5 bear-h-5",
+  lg: "bear-w-6 bear-h-6"
+}, o = 1, n = 4;
+export {
+  d as CHECKBOX_INDICATOR_SIZE_MAP,
+  a as CHECKED_CLASSES,
+  o as DEFAULT_COLUMNS,
+  n as DEFAULT_GAP,
+  b as ROOT_CLASS,
+  r as SIZE_PADDING_MAP,
+  e as VARIANT_CLASSES
+};

package/dist/components/CheckboxCard/CheckboxCard.d.ts

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+import { CheckboxCardProps, CheckboxCardGroupProps } from './CheckboxCard.types';
+export declare const CheckboxCard: FC<CheckboxCardProps>;
+export declare const CheckboxCardGroup: FC<CheckboxCardGroupProps>;
+export default CheckboxCard;