@forgedevstack/bear 1.0.6 → 1.0.8

package/dist/components/BottomSheet/BottomSheet.js

@@ -0,0 +1,103 @@
+import { jsxs as s, jsx as e } from "react/jsx-runtime";
+import { useState as i, useEffect as h, useCallback as I } from "react";
+import { createPortal as A } from "react-dom";
+import { cn as x } from "../../utils/cn.js";
+import { XIcon as E } from "../Icon/index.js";
+const v = 300, M = {
+  sm: "bear-max-h-[40%]",
+  md: "bear-max-h-[60%]",
+  lg: "bear-max-h-[80%]",
+  full: "bear-max-h-[95%]"
+}, F = ({
+  isOpen: o,
+  onClose: t,
+  title: b,
+  children: y,
+  size: k = "md",
+  showCloseButton: d = !0,
+  closeOnBackdrop: p = !0,
+  closeOnEscape: u = !0,
+  showHandle: g = !0,
+  className: w
+}) => {
+  const [r, c] = i(o), [m, n] = i(!1), [N, f] = i(!1);
+  h(() => {
+    if (o) {
+      c(!0), n(!1);
+      const a = requestAnimationFrame(() => f(!0));
+      return () => cancelAnimationFrame(a);
+    }
+    if (r) {
+      f(!1), n(!0);
+      const a = setTimeout(() => {
+        c(!1), n(!1);
+      }, v);
+      return () => clearTimeout(a);
+    }
+  }, [o, r]);
+  const l = I(
+    (a) => {
+      u && a.key === "Escape" && t();
+    },
+    [u, t]
+  );
+  if (h(() => (r && (document.addEventListener("keydown", l), document.body.style.overflow = "hidden"), () => {
+    document.removeEventListener("keydown", l), document.body.style.overflow = "";
+  }), [r, l]), !r) return null;
+  const j = /* @__PURE__ */ s("div", { className: "bear-fixed bear-inset-0 bear-z-50 bear-flex bear-items-end bear-justify-center", children: [
+    /* @__PURE__ */ e(
+      "div",
+      {
+        className: x(
+          "bear-absolute bear-inset-0 bear-bg-black/60 bear-backdrop-blur-sm bear-transition-opacity",
+          m ? "bear-opacity-0" : "bear-opacity-100"
+        ),
+        style: { transitionDuration: `${v}ms` },
+        onClick: p ? t : void 0,
+        "aria-hidden": "true"
+      }
+    ),
+    /* @__PURE__ */ s(
+      "div",
+      {
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-labelledby": b ? "bottom-sheet-title" : void 0,
+        className: x(
+          "Bear-BottomSheet bear-relative bear-w-full bear-rounded-t-2xl bear-shadow-2xl bear-overflow-hidden bear-transition-transform bear-duration-300",
+          "bear-bg-white dark:bear-bg-neutral-900 bear-border-t bear-border-neutral-200 dark:bear-border-neutral-700",
+          M[k],
+          N && !m ? "bear-translate-y-0" : "bear-translate-y-full",
+          w
+        ),
+        children: [
+          g && /* @__PURE__ */ e("div", { className: "bear-flex bear-justify-center bear-pt-2 bear-pb-1", children: /* @__PURE__ */ e("div", { className: "bear-w-12 bear-h-1 bear-rounded-full bear-bg-neutral-300 dark:bear-bg-neutral-600", "aria-hidden": !0 }) }),
+          (b || d) && /* @__PURE__ */ s("div", { className: "bear-flex bear-items-center bear-justify-between bear-px-4 bear-py-3 bear-border-b bear-border-neutral-200 dark:bear-border-neutral-700", children: [
+            b && /* @__PURE__ */ e(
+              "h2",
+              {
+                id: "bottom-sheet-title",
+                className: "bear-text-lg bear-font-semibold bear-text-neutral-900 dark:bear-text-white",
+                children: b
+              }
+            ),
+            d && /* @__PURE__ */ e(
+              "button",
+              {
+                onClick: t,
+                className: "bear-p-1 bear-rounded-lg bear-text-neutral-500 dark:bear-text-neutral-400 hover:bear-text-neutral-900 dark:hover:bear-text-white hover:bear-bg-neutral-100 dark:hover:bear-bg-neutral-700 bear-transition-colors",
+                "aria-label": "Close",
+                children: /* @__PURE__ */ e(E, { className: "bear-w-5 bear-h-5" })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ e("div", { className: "bear-flex-1 bear-overflow-y-auto bear-p-4 bear-text-neutral-700 dark:bear-text-neutral-300", children: y })
+        ]
+      }
+    )
+  ] });
+  return A(j, document.body);
+};
+export {
+  F as BottomSheet
+};

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

@@ -0,0 +1,13 @@
+import { ReactNode } from 'react';
+export interface BottomSheetProps {
+    isOpen: boolean;
+    onClose: () => void;
+    title?: ReactNode;
+    children: ReactNode;
+    size?: 'sm' | 'md' | 'lg' | 'full';
+    showCloseButton?: boolean;
+    closeOnBackdrop?: boolean;
+    closeOnEscape?: boolean;
+    showHandle?: boolean;
+    className?: string;
+}

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

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

package/dist/components/Button/Button.cjs

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

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

@@ -1,57 +1,47 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e={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"},r={primary:`
-    bear-bg-bear-500 bear-text-white
-    hover:bear-bg-bear-600
-    focus:bear-ring-2 focus:bear-ring-bear-500/50 focus:bear-ring-offset-2
-    active:bear-bg-bear-700
-    disabled:bear-bg-bear-300 disabled:bear-cursor-not-allowed
+"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:`
+    bear-btn-primary
+    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
   `,secondary:`
-    bear-bg-forge-500 bear-text-white
-    hover:bear-bg-forge-600
-    focus:bear-ring-2 focus:bear-ring-forge-500/50 focus:bear-ring-offset-2
-    active:bear-bg-forge-700
-    disabled:bear-bg-forge-300 disabled:bear-cursor-not-allowed
+    bear-btn-secondary
+    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
   `,success:`
-    bear-bg-green-500 bear-text-white
-    hover:bear-bg-green-600
-    focus:bear-ring-2 focus:bear-ring-green-500/50 focus:bear-ring-offset-2
-    active:bear-bg-green-700
-    disabled:bear-bg-green-300 disabled:bear-cursor-not-allowed
+    bear-btn-success
+    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
   `,warning:`
-    bear-bg-yellow-500 bear-text-white
-    hover:bear-bg-yellow-600
-    focus:bear-ring-2 focus:bear-ring-yellow-500/50 focus:bear-ring-offset-2
-    active:bear-bg-yellow-700
-    disabled:bear-bg-yellow-300 disabled:bear-cursor-not-allowed
+    bear-btn-warning
+    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
   `,danger:`
-    bear-bg-red-500 bear-text-white
-    hover:bear-bg-red-600
-    focus:bear-ring-2 focus:bear-ring-red-500/50 focus:bear-ring-offset-2
-    active:bear-bg-red-700
-    disabled:bear-bg-red-300 disabled:bear-cursor-not-allowed
+    bear-btn-danger
+    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
   `,info:`
-    bear-bg-blue-500 bear-text-white
-    hover:bear-bg-blue-600
-    focus:bear-ring-2 focus:bear-ring-blue-500/50 focus:bear-ring-offset-2
-    active:bear-bg-blue-700
-    disabled:bear-bg-blue-300 disabled:bear-cursor-not-allowed
+    bear-btn-info
+    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
   `,ghost:`
-    bear-bg-transparent bear-text-gray-700
-    hover:bear-bg-gray-100
-    focus:bear-ring-2 focus:bear-ring-gray-500/50
-    active:bear-bg-gray-200
-    disabled:bear-text-gray-400 disabled:bear-cursor-not-allowed
+    bear-btn-ghost
+    bear-bg-transparent bear-relative bear-overflow-hidden
+    focus:bear-ring-2
+    disabled:bear-opacity-50 disabled:bear-cursor-not-allowed
     dark:bear-text-gray-300 dark:hover:bear-bg-gray-800 dark:active:bear-bg-gray-700
   `,outline:`
-    bear-bg-transparent bear-text-bear-500 bear-border bear-border-bear-500
-    hover:bear-bg-bear-50
-    focus:bear-ring-2 focus:bear-ring-bear-500/50
-    active:bear-bg-bear-100
-    disabled:bear-text-bear-300 disabled:bear-border-bear-300 disabled:bear-cursor-not-allowed
-    dark:bear-text-bear-400 dark:bear-border-bear-400 dark:hover:bear-bg-bear-950 dark:active:bear-bg-bear-900 dark:disabled:bear-border-bear-700 dark:disabled:bear-text-bear-700
+    bear-btn-outline
+    bear-bg-transparent bear-border bear-relative bear-overflow-hidden
+    focus:bear-ring-2
+    disabled:bear-opacity-50 disabled:bear-cursor-not-allowed
   `,error:`
-    bear-bg-red-500 bear-text-white
-    hover:bear-bg-red-600
-    focus:bear-ring-2 focus:bear-ring-red-500/50 focus:bear-ring-offset-2
-    active:bear-bg-red-700
-    disabled:bear-bg-red-300 disabled:bear-cursor-not-allowed
-  `};exports.BUTTON_SIZE=e;exports.BUTTON_VARIANT=r;
+    bear-btn-error
+    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;

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

@@ -1,3 +1,22 @@
-import { EmberSize, EmberVariant } from '../../types';
-export declare const BUTTON_SIZE: Record<EmberSize, string>;
-export declare const BUTTON_VARIANT: Record<EmberVariant, string>;
+import { BearSize, BearVariant } from '../../types';
+export declare const BUTTON_SIZE: Record<BearSize, string>;
+/**
+ * Button variants using CSS variables for full customization
+ * Colors can be overridden via:
+ * 1. BearProvider theme prop: theme={{ colors: { primary: { 500: '#...' } } }}
+ * 2. BearProvider variants prop: variants={{ Button: { primary: { bg: '#...' } } }}
+ * 3. CSS variables: --bear-btn-primary-bg, --bear-primary-500, etc.
+ */
+export declare const BUTTON_VARIANT: Record<BearVariant, string>;
+/**
+ * Default variant colors (used when CSS variables are not set)
+ */
+export interface VariantDefault {
+    bg: string;
+    hover: string;
+    active: string;
+    ring: string;
+    text?: string;
+    border?: string;
+}
+export declare const VARIANT_DEFAULTS: Record<string, VariantDefault>;

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

@@ -1,77 +1,78 @@
-const e = {
+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"
-}, r = {
+}, e = {
   primary: `
-    bear-bg-bear-500 bear-text-white
-    hover:bear-bg-bear-600
-    focus:bear-ring-2 focus:bear-ring-bear-500/50 focus:bear-ring-offset-2
-    active:bear-bg-bear-700
-    disabled:bear-bg-bear-300 disabled:bear-cursor-not-allowed
+    bear-btn-primary
+    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
   `,
   secondary: `
-    bear-bg-forge-500 bear-text-white
-    hover:bear-bg-forge-600
-    focus:bear-ring-2 focus:bear-ring-forge-500/50 focus:bear-ring-offset-2
-    active:bear-bg-forge-700
-    disabled:bear-bg-forge-300 disabled:bear-cursor-not-allowed
+    bear-btn-secondary
+    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
   `,
   success: `
-    bear-bg-green-500 bear-text-white
-    hover:bear-bg-green-600
-    focus:bear-ring-2 focus:bear-ring-green-500/50 focus:bear-ring-offset-2
-    active:bear-bg-green-700
-    disabled:bear-bg-green-300 disabled:bear-cursor-not-allowed
+    bear-btn-success
+    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
   `,
   warning: `
-    bear-bg-yellow-500 bear-text-white
-    hover:bear-bg-yellow-600
-    focus:bear-ring-2 focus:bear-ring-yellow-500/50 focus:bear-ring-offset-2
-    active:bear-bg-yellow-700
-    disabled:bear-bg-yellow-300 disabled:bear-cursor-not-allowed
+    bear-btn-warning
+    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
   `,
   danger: `
-    bear-bg-red-500 bear-text-white
-    hover:bear-bg-red-600
-    focus:bear-ring-2 focus:bear-ring-red-500/50 focus:bear-ring-offset-2
-    active:bear-bg-red-700
-    disabled:bear-bg-red-300 disabled:bear-cursor-not-allowed
+    bear-btn-danger
+    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
   `,
   info: `
-    bear-bg-blue-500 bear-text-white
-    hover:bear-bg-blue-600
-    focus:bear-ring-2 focus:bear-ring-blue-500/50 focus:bear-ring-offset-2
-    active:bear-bg-blue-700
-    disabled:bear-bg-blue-300 disabled:bear-cursor-not-allowed
+    bear-btn-info
+    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
   `,
   ghost: `
-    bear-bg-transparent bear-text-gray-700
-    hover:bear-bg-gray-100
-    focus:bear-ring-2 focus:bear-ring-gray-500/50
-    active:bear-bg-gray-200
-    disabled:bear-text-gray-400 disabled:bear-cursor-not-allowed
+    bear-btn-ghost
+    bear-bg-transparent bear-relative bear-overflow-hidden
+    focus:bear-ring-2
+    disabled:bear-opacity-50 disabled:bear-cursor-not-allowed
     dark:bear-text-gray-300 dark:hover:bear-bg-gray-800 dark:active:bear-bg-gray-700
   `,
   outline: `
-    bear-bg-transparent bear-text-bear-500 bear-border bear-border-bear-500
-    hover:bear-bg-bear-50
-    focus:bear-ring-2 focus:bear-ring-bear-500/50
-    active:bear-bg-bear-100
-    disabled:bear-text-bear-300 disabled:bear-border-bear-300 disabled:bear-cursor-not-allowed
-    dark:bear-text-bear-400 dark:bear-border-bear-400 dark:hover:bear-bg-bear-950 dark:active:bear-bg-bear-900 dark:disabled:bear-border-bear-700 dark:disabled:bear-text-bear-700
+    bear-btn-outline
+    bear-bg-transparent bear-border bear-relative bear-overflow-hidden
+    focus:bear-ring-2
+    disabled:bear-opacity-50 disabled:bear-cursor-not-allowed
   `,
   error: `
-    bear-bg-red-500 bear-text-white
-    hover:bear-bg-red-600
-    focus:bear-ring-2 focus:bear-ring-red-500/50 focus:bear-ring-offset-2
-    active:bear-bg-red-700
-    disabled:bear-bg-red-300 disabled:bear-cursor-not-allowed
+    bear-btn-error
+    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)" }
 };
 export {
-  e as BUTTON_SIZE,
-  r as BUTTON_VARIANT
+  r as BUTTON_SIZE,
+  e as BUTTON_VARIANT,
+  a as VARIANT_DEFAULTS
 };

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

@@ -1,21 +1,28 @@
 import { ButtonProps } from './Button.types';
 /**
- * Button component with multiple variants, sizes, and states.
- * Light and dark mode supported; outline variant has theme-aware borders.
- * Override borders from outside via className (e.g. className="border-2 border-blue-500 dark:border-blue-400").
+ * Button component with multiple variants, sizes, states, and effects.
+ *
+ * Features:
+ * - Fully themeable via BearProvider
+ * - Mouse-follow spotlight hover effect
+ * - CSS variable-based colors for easy customization
+ * - Component overrides via useBearComponent
  *
  * @example
  * ```tsx
+ * // Basic usage
  * <Button variant="primary" size="md">
  *   Click me
  * </Button>
  *
- * <Button variant="outline" loading>
- *   Loading...
+ * // With spotlight hover effect
+ * <Button variant="primary" spotlight>
+ *   Hover me
  * </Button>
  *
- * <Button variant="outline" className="border-2 border-pink-500">
- *   Custom border
+ * // With icons
+ * <Button variant="outline" leftIcon={<Icon />}>
+ *   With Icon
  * </Button>
  * ```
  */

package/dist/components/Button/Button.js

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