@brycks/core-front 0.3.2 → 0.3.4

package/dist/components/primitives/Button/Button.js

@@ -1,19 +1,19 @@
-import { jsxs as v, jsx as e } from "react/jsx-runtime";
-import A, { forwardRef as B, useState as x } from "react";
-import { getButtonStyles as F, sizeConfig as G } from "./Button.styles.js";
-import { cx as J } from "../../../utils/styles.js";
-const K = A.memo(function({ size: o }) {
-  return /* @__PURE__ */ v(
+import { jsxs as b, jsx as t } from "react/jsx-runtime";
+import N, { forwardRef as p } from "react";
+import { sizeConfig as g } from "./Button.styles.js";
+import { cx as j } from "../../../utils/styles.js";
+const D = N.memo(function({ size: n }) {
+  return /* @__PURE__ */ b(
     "svg",
     {
-      width: o,
-      height: o,
+      width: n,
+      height: n,
       viewBox: "0 0 24 24",
       fill: "none",
       className: "brycks-animate-spin",
       "aria-hidden": "true",
       children: [
-        /* @__PURE__ */ e(
+        /* @__PURE__ */ t(
           "circle",
           {
             cx: "12",
@@ -26,7 +26,7 @@ const K = A.memo(function({ size: o }) {
             opacity: "0.25"
           }
         ),
-        /* @__PURE__ */ e(
+        /* @__PURE__ */ t(
           "circle",
           {
             cx: "12",
@@ -43,131 +43,107 @@ const K = A.memo(function({ size: o }) {
       ]
     }
   );
-}), Q = ({
-  as: a,
-  variant: o = "solid",
-  intent: d = "primary",
-  size: l = "md",
-  fullWidth: b,
-  isLoading: t,
-  isDisabled: w,
-  leftIcon: y,
-  rightIcon: p,
+}), $ = ({
+  as: o,
+  variant: n = "solid",
+  intent: h = "primary",
+  size: c = "md",
+  fullWidth: f,
+  isLoading: e,
+  isDisabled: k,
+  leftIcon: a,
+  rightIcon: l,
   isIconOnly: r,
-  className: M,
-  style: z,
-  children: h,
-  testId: C,
-  onMouseEnter: D,
-  onMouseLeave: N,
-  onMouseDown: g,
-  onMouseUp: P,
-  ...m
-}, $) => {
-  const f = a || "button", [j, k] = x(!1), [E, u] = x(!1), s = w || t, c = F({
-    variant: o,
-    intent: d,
-    size: l,
-    fullWidth: b,
-    isIconOnly: r
-  }), H = {
-    ...c.base,
-    ...j && !s ? c.hover : {},
-    ...E && !s ? c.active : {},
-    ...s ? c.disabled : {},
-    ...t ? c.loading : {},
-    ...z
-  }, i = G[l], I = (n) => {
-    k(!0), D?.(n);
-  }, R = (n) => {
-    k(!1), u(!1), N?.(n);
-  }, U = (n) => {
-    u(!0), g?.(n);
-  }, V = (n) => {
-    u(!1), P?.(n);
-  }, W = J(
+  className: x,
+  style: B,
+  children: u,
+  testId: S,
+  ...d
+}, w) => {
+  const y = o || "button", i = k || e, s = g[c], z = {
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    ...B
+  }, C = j(
     "brycks-button",
-    `brycks-button--${o}`,
-    `brycks-button--${d}`,
-    `brycks-button--${l}`,
-    b && "brycks-button--full-width",
+    `brycks-button--${n}`,
+    `brycks-button--${h}`,
+    `brycks-button--${c}`,
+    f && "brycks-button--full-width",
     r && "brycks-button--icon-only",
-    t && "brycks-button--loading",
-    s && "brycks-button--disabled",
-    M
-  ), q = f === "button" || a === void 0 ? {
-    type: m.type ?? "button",
-    disabled: s
+    e && "brycks-button--loading",
+    i && "brycks-button--disabled",
+    x
+  ), v = y === "button" || o === void 0 ? {
+    type: d.type ?? "button",
+    disabled: i
   } : {
-    "aria-disabled": s || void 0,
+    "aria-disabled": i || void 0,
     role: "button",
-    tabIndex: s ? -1 : 0
+    tabIndex: i ? -1 : 0
   };
-  return /* @__PURE__ */ v(
-    f,
+  return /* @__PURE__ */ b(
+    y,
     {
-      ref: $,
-      className: W,
-      style: H,
-      "data-testid": C,
-      onMouseEnter: I,
-      onMouseLeave: R,
-      onMouseDown: U,
-      onMouseUp: V,
-      ...q,
-      ...m,
+      ref: w,
+      className: C,
+      style: z,
+      "data-testid": S,
+      ...v,
+      ...d,
       children: [
-        t && /* @__PURE__ */ e(
+        e && /* @__PURE__ */ t(
           "span",
           {
             style: {
               display: "inline-flex",
               position: r ? "absolute" : "relative"
             },
-            children: /* @__PURE__ */ e(K, { size: i.iconSize })
+            children: /* @__PURE__ */ t(D, { size: s.iconSize })
           }
         ),
-        !t && y && /* @__PURE__ */ e(
+        !e && a && /* @__PURE__ */ t(
           "span",
           {
             style: {
               display: "inline-flex",
-              width: i.iconSize,
-              height: i.iconSize
+              width: s.iconSize,
+              height: s.iconSize
             },
-            children: y
+            children: a
           }
         ),
-        !r && /* @__PURE__ */ e(
+        !r && /* @__PURE__ */ t(
           "span",
           {
             style: {
-              opacity: t && !r ? 0.5 : 1
+              opacity: e && !r ? 0.5 : 1
             },
-            children: h
+            children: u
           }
         ),
-        !t && p && /* @__PURE__ */ e(
+        !e && l && /* @__PURE__ */ t(
           "span",
           {
             style: {
               display: "inline-flex",
-              width: i.iconSize,
-              height: i.iconSize
+              width: s.iconSize,
+              height: s.iconSize
             },
-            children: p
+            children: l
           }
         ),
-        r && !t && h
+        r && !e && u
       ]
     }
   );
-}, S = B(Q);
-S.displayName = "Button";
-const T = (a, o) => /* @__PURE__ */ e(S, { ref: o, isIconOnly: !0, ...a }), X = B(T);
-X.displayName = "IconButton";
+}, m = p($);
+m.displayName = "Button";
+const I = (o, n) => /* @__PURE__ */ t(m, { ref: n, isIconOnly: !0, ...o }), R = p(I);
+R.displayName = "IconButton";
 export {
-  S as Button,
-  X as IconButton
+  m as Button,
+  R as IconButton
 };
 //# sourceMappingURL=Button.js.map

package/dist/components/primitives/Button/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sources":["../../../../src/components/primitives/Button/Button.tsx"],"sourcesContent":["/**\r\n * Button Component\r\n *\r\n * A versatile, polymorphic button component with multiple variants,\r\n * sizes, and states. Designed with Apple-inspired aesthetics -\r\n * smooth transitions, tactile feedback, and refined visual details.\r\n */\r\n\r\nimport React, {\r\n  forwardRef,\r\n  useState,\r\n  type ElementType,\r\n  type ComponentPropsWithRef,\r\n  type CSSProperties,\r\n} from 'react'\r\nimport type { ButtonProps } from './Button.types'\r\nimport { getButtonStyles, sizeConfig } from './Button.styles'\r\nimport { cx } from '../../../utils/styles'\r\n\r\ninterface ButtonComponent {\r\n  <E extends ElementType = 'button'>(\r\n    props: ButtonProps<E> & { ref?: ComponentPropsWithRef<E>['ref'] }\r\n  ): React.JSX.Element | null\r\n  displayName?: string\r\n}\r\n\r\n/** Loading spinner component - uses global CSS keyframes */\r\nconst LoadingSpinner = React.memo(function LoadingSpinner({ size }: { size: number }) {\r\n  return (\r\n    <svg\r\n      width={size}\r\n      height={size}\r\n      viewBox=\"0 0 24 24\"\r\n      fill=\"none\"\r\n      className=\"brycks-animate-spin\"\r\n      aria-hidden=\"true\"\r\n    >\r\n      <circle\r\n        cx=\"12\"\r\n        cy=\"12\"\r\n        r=\"10\"\r\n        stroke=\"currentColor\"\r\n        strokeWidth=\"2\"\r\n        strokeLinecap=\"round\"\r\n        strokeDasharray=\"31.4 31.4\"\r\n        opacity=\"0.25\"\r\n      />\r\n      <circle\r\n        cx=\"12\"\r\n        cy=\"12\"\r\n        r=\"10\"\r\n        stroke=\"currentColor\"\r\n        strokeWidth=\"2\"\r\n        strokeLinecap=\"round\"\r\n        strokeDasharray=\"31.4 31.4\"\r\n        strokeDashoffset=\"62.8\"\r\n        style={{ transform: 'rotate(-90deg)', transformOrigin: 'center' }}\r\n      />\r\n    </svg>\r\n  )\r\n})\r\n\r\nconst ButtonInner = <E extends ElementType = 'button'>(\r\n  {\r\n    as,\r\n    variant = 'solid',\r\n    intent = 'primary',\r\n    size = 'md',\r\n    fullWidth,\r\n    isLoading,\r\n    isDisabled,\r\n    leftIcon,\r\n    rightIcon,\r\n    isIconOnly,\r\n    className,\r\n    style,\r\n    children,\r\n    testId,\r\n    onMouseEnter,\r\n    onMouseLeave,\r\n    onMouseDown,\r\n    onMouseUp,\r\n    ...props\r\n  }: ButtonProps<E>,\r\n  ref: React.ForwardedRef<Element>\r\n) => {\r\n  const Component = (as || 'button') as ElementType\r\n  const [isHovered, setIsHovered] = useState(false)\r\n  const [isPressed, setIsPressed] = useState(false)\r\n\r\n  const disabled = isDisabled || isLoading\r\n\r\n  const styles = getButtonStyles({\r\n    variant,\r\n    intent,\r\n    size,\r\n    fullWidth,\r\n    isIconOnly,\r\n    isDisabled: disabled,\r\n    isLoading,\r\n  })\r\n\r\n  // Build final style object\r\n  const computedStyle: CSSProperties = {\r\n    ...styles.base,\r\n    ...(isHovered && !disabled ? styles.hover : {}),\r\n    ...(isPressed && !disabled ? styles.active : {}),\r\n    ...(disabled ? styles.disabled : {}),\r\n    ...(isLoading ? styles.loading : {}),\r\n    ...style,\r\n  }\r\n\r\n  const sizeValues = sizeConfig[size]\r\n\r\n  const handleMouseEnter = (e: React.MouseEvent) => {\r\n    setIsHovered(true)\r\n    onMouseEnter?.(e as never)\r\n  }\r\n\r\n  const handleMouseLeave = (e: React.MouseEvent) => {\r\n    setIsHovered(false)\r\n    setIsPressed(false)\r\n    onMouseLeave?.(e as never)\r\n  }\r\n\r\n  const handleMouseDown = (e: React.MouseEvent) => {\r\n    setIsPressed(true)\r\n    onMouseDown?.(e as never)\r\n  }\r\n\r\n  const handleMouseUp = (e: React.MouseEvent) => {\r\n    setIsPressed(false)\r\n    onMouseUp?.(e as never)\r\n  }\r\n\r\n  // Build class name\r\n  const buttonClassName = cx(\r\n    'brycks-button',\r\n    `brycks-button--${variant}`,\r\n    `brycks-button--${intent}`,\r\n    `brycks-button--${size}`,\r\n    fullWidth && 'brycks-button--full-width',\r\n    isIconOnly && 'brycks-button--icon-only',\r\n    isLoading && 'brycks-button--loading',\r\n    disabled && 'brycks-button--disabled',\r\n    className\r\n  )\r\n\r\n  const isButton = Component === 'button' || as === undefined\r\n  const buttonProps = isButton\r\n    ? {\r\n        type: (props as { type?: string }).type ?? 'button',\r\n        disabled,\r\n      }\r\n    : {\r\n        'aria-disabled': disabled || undefined,\r\n        role: 'button',\r\n        tabIndex: disabled ? -1 : 0,\r\n      }\r\n\r\n  return (\r\n    <Component\r\n      ref={ref}\r\n      className={buttonClassName}\r\n      style={computedStyle}\r\n      data-testid={testId}\r\n      onMouseEnter={handleMouseEnter}\r\n      onMouseLeave={handleMouseLeave}\r\n      onMouseDown={handleMouseDown}\r\n      onMouseUp={handleMouseUp}\r\n      {...buttonProps}\r\n      {...props}\r\n    >\r\n      {isLoading && (\r\n        <span\r\n          style={{\r\n            display: 'inline-flex',\r\n            position: isIconOnly ? 'absolute' : 'relative',\r\n          }}\r\n        >\r\n          <LoadingSpinner size={sizeValues.iconSize} />\r\n        </span>\r\n      )}\r\n\r\n      {!isLoading && leftIcon && (\r\n        <span\r\n          style={{\r\n            display: 'inline-flex',\r\n            width: sizeValues.iconSize,\r\n            height: sizeValues.iconSize,\r\n          }}\r\n        >\r\n          {leftIcon}\r\n        </span>\r\n      )}\r\n\r\n      {!isIconOnly && (\r\n        <span\r\n          style={{\r\n            opacity: isLoading && !isIconOnly ? 0.5 : 1,\r\n          }}\r\n        >\r\n          {children}\r\n        </span>\r\n      )}\r\n\r\n      {!isLoading && rightIcon && (\r\n        <span\r\n          style={{\r\n            display: 'inline-flex',\r\n            width: sizeValues.iconSize,\r\n            height: sizeValues.iconSize,\r\n          }}\r\n        >\r\n          {rightIcon}\r\n        </span>\r\n      )}\r\n\r\n      {isIconOnly && !isLoading && children}\r\n    </Component>\r\n  )\r\n}\r\n\r\nexport const Button = forwardRef(ButtonInner) as ButtonComponent\r\n\r\nButton.displayName = 'Button'\r\n\r\n/** Icon button shorthand */\r\nconst IconButtonInner = <E extends ElementType = 'button'>(\r\n  props: Omit<ButtonProps<E>, 'isIconOnly'>,\r\n  ref: React.ForwardedRef<Element>\r\n) => {\r\n  return <Button ref={ref as React.ForwardedRef<HTMLButtonElement>} isIconOnly {...(props as ButtonProps<'button'>)} />\r\n}\r\n\r\nexport const IconButton = forwardRef(IconButtonInner) as ButtonComponent\r\n\r\nIconButton.displayName = 'IconButton'\r\n"],"names":["LoadingSpinner","React","size","jsxs","jsx","ButtonInner","as","variant","intent","fullWidth","isLoading","isDisabled","leftIcon","rightIcon","isIconOnly","className","style","children","testId","onMouseEnter","onMouseLeave","onMouseDown","onMouseUp","props","ref","Component","isHovered","setIsHovered","useState","isPressed","setIsPressed","disabled","styles","getButtonStyles","computedStyle","sizeValues","sizeConfig","handleMouseEnter","e","handleMouseLeave","handleMouseDown","handleMouseUp","buttonClassName","cx","buttonProps","Button","forwardRef","IconButtonInner","IconButton"],"mappings":";;;;AA2BA,MAAMA,IAAiBC,EAAM,KAAK,SAAwB,EAAE,MAAAC,KAA0B;AACpF,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,OAAOD;AAAA,MACP,QAAQA;AAAA,MACR,SAAQ;AAAA,MACR,MAAK;AAAA,MACL,WAAU;AAAA,MACV,eAAY;AAAA,MAEZ,UAAA;AAAA,QAAA,gBAAAE;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,IAAG;AAAA,YACH,IAAG;AAAA,YACH,GAAE;AAAA,YACF,QAAO;AAAA,YACP,aAAY;AAAA,YACZ,eAAc;AAAA,YACd,iBAAgB;AAAA,YAChB,SAAQ;AAAA,UAAA;AAAA,QAAA;AAAA,QAEV,gBAAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,IAAG;AAAA,YACH,IAAG;AAAA,YACH,GAAE;AAAA,YACF,QAAO;AAAA,YACP,aAAY;AAAA,YACZ,eAAc;AAAA,YACd,iBAAgB;AAAA,YAChB,kBAAiB;AAAA,YACjB,OAAO,EAAE,WAAW,kBAAkB,iBAAiB,SAAA;AAAA,UAAS;AAAA,QAAA;AAAA,MAClE;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC,GAEKC,IAAc,CAClB;AAAA,EACE,IAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,QAAAC,IAAS;AAAA,EACT,MAAAN,IAAO;AAAA,EACP,WAAAO;AAAA,EACA,WAAAC;AAAA,EACA,YAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,YAAAC;AAAA,EACA,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,QAAAC;AAAA,EACA,cAAAC;AAAA,EACA,cAAAC;AAAA,EACA,aAAAC;AAAA,EACA,WAAAC;AAAA,EACA,GAAGC;AACL,GACAC,MACG;AACH,QAAMC,IAAanB,KAAM,UACnB,CAACoB,GAAWC,CAAY,IAAIC,EAAS,EAAK,GAC1C,CAACC,GAAWC,CAAY,IAAIF,EAAS,EAAK,GAE1CG,IAAWpB,KAAcD,GAEzBsB,IAASC,EAAgB;AAAA,IAC7B,SAAA1B;AAAA,IACA,QAAAC;AAAA,IACA,MAAAN;AAAA,IACA,WAAAO;AAAA,IACA,YAAAK;AAAA,EAGF,CAAC,GAGKoB,IAA+B;AAAA,IACnC,GAAGF,EAAO;AAAA,IACV,GAAIN,KAAa,CAACK,IAAWC,EAAO,QAAQ,CAAA;AAAA,IAC5C,GAAIH,KAAa,CAACE,IAAWC,EAAO,SAAS,CAAA;AAAA,IAC7C,GAAID,IAAWC,EAAO,WAAW,CAAA;AAAA,IACjC,GAAItB,IAAYsB,EAAO,UAAU,CAAA;AAAA,IACjC,GAAGhB;AAAA,EAAA,GAGCmB,IAAaC,EAAWlC,CAAI,GAE5BmC,IAAmB,CAACC,MAAwB;AAChD,IAAAX,EAAa,EAAI,GACjBR,IAAemB,CAAU;AAAA,EAC3B,GAEMC,IAAmB,CAACD,MAAwB;AAChD,IAAAX,EAAa,EAAK,GAClBG,EAAa,EAAK,GAClBV,IAAekB,CAAU;AAAA,EAC3B,GAEME,IAAkB,CAACF,MAAwB;AAC/C,IAAAR,EAAa,EAAI,GACjBT,IAAciB,CAAU;AAAA,EAC1B,GAEMG,IAAgB,CAACH,MAAwB;AAC7C,IAAAR,EAAa,EAAK,GAClBR,IAAYgB,CAAU;AAAA,EACxB,GAGMI,IAAkBC;AAAA,IACtB;AAAA,IACA,kBAAkBpC,CAAO;AAAA,IACzB,kBAAkBC,CAAM;AAAA,IACxB,kBAAkBN,CAAI;AAAA,IACtBO,KAAa;AAAA,IACbK,KAAc;AAAA,IACdJ,KAAa;AAAA,IACbqB,KAAY;AAAA,IACZhB;AAAA,EAAA,GAII6B,IADWnB,MAAc,YAAYnB,MAAO,SAE9C;AAAA,IACE,MAAOiB,EAA4B,QAAQ;AAAA,IAC3C,UAAAQ;AAAA,EAAA,IAEF;AAAA,IACE,iBAAiBA,KAAY;AAAA,IAC7B,MAAM;AAAA,IACN,UAAUA,IAAW,KAAK;AAAA,EAAA;AAGhC,SACE,gBAAA5B;AAAA,IAACsB;AAAA,IAAA;AAAA,MACC,KAAAD;AAAA,MACA,WAAWkB;AAAA,MACX,OAAOR;AAAA,MACP,eAAahB;AAAA,MACb,cAAcmB;AAAA,MACd,cAAcE;AAAA,MACd,aAAaC;AAAA,MACb,WAAWC;AAAA,MACV,GAAGG;AAAA,MACH,GAAGrB;AAAA,MAEH,UAAA;AAAA,QAAAb,KACC,gBAAAN;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,OAAO;AAAA,cACL,SAAS;AAAA,cACT,UAAUU,IAAa,aAAa;AAAA,YAAA;AAAA,YAGtC,UAAA,gBAAAV,EAACJ,GAAA,EAAe,MAAMmC,EAAW,SAAA,CAAU;AAAA,UAAA;AAAA,QAAA;AAAA,QAI9C,CAACzB,KAAaE,KACb,gBAAAR;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,OAAO;AAAA,cACL,SAAS;AAAA,cACT,OAAO+B,EAAW;AAAA,cAClB,QAAQA,EAAW;AAAA,YAAA;AAAA,YAGpB,UAAAvB;AAAA,UAAA;AAAA,QAAA;AAAA,QAIJ,CAACE,KACA,gBAAAV;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,OAAO;AAAA,cACL,SAASM,KAAa,CAACI,IAAa,MAAM;AAAA,YAAA;AAAA,YAG3C,UAAAG;AAAA,UAAA;AAAA,QAAA;AAAA,QAIJ,CAACP,KAAaG,KACb,gBAAAT;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,OAAO;AAAA,cACL,SAAS;AAAA,cACT,OAAO+B,EAAW;AAAA,cAClB,QAAQA,EAAW;AAAA,YAAA;AAAA,YAGpB,UAAAtB;AAAA,UAAA;AAAA,QAAA;AAAA,QAIJC,KAAc,CAACJ,KAAaO;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGnC,GAEa4B,IAASC,EAAWzC,CAAW;AAE5CwC,EAAO,cAAc;AAGrB,MAAME,IAAkB,CACtBxB,GACAC,wBAEQqB,GAAA,EAAO,KAAArB,GAAmD,YAAU,IAAE,GAAID,GAAiC,GAGxGyB,IAAaF,EAAWC,CAAe;AAEpDC,EAAW,cAAc;"}
+{"version":3,"file":"Button.js","sources":["../../../../src/components/primitives/Button/Button.tsx"],"sourcesContent":["/**\r\n * Button Component\r\n *\r\n * A versatile, polymorphic button component with multiple variants,\r\n * sizes, and states. Designed with Apple-inspired aesthetics -\r\n * smooth transitions, tactile feedback, and refined visual details.\r\n *\r\n * All color styles are handled via CSS classes for easy customization.\r\n * Layout styles (display, alignment) use inline styles for flexibility.\r\n */\r\n\r\nimport React, {\r\n  forwardRef,\r\n  type ElementType,\r\n  type ComponentPropsWithRef,\r\n  type CSSProperties,\r\n} from 'react'\r\nimport type { ButtonProps } from './Button.types'\r\nimport { sizeConfig } from './Button.styles'\r\nimport { cx } from '../../../utils/styles'\r\n\r\ninterface ButtonComponent {\r\n  <E extends ElementType = 'button'>(\r\n    props: ButtonProps<E> & { ref?: ComponentPropsWithRef<E>['ref'] }\r\n  ): React.JSX.Element | null\r\n  displayName?: string\r\n}\r\n\r\n/** Loading spinner component - uses global CSS keyframes */\r\nconst LoadingSpinner = React.memo(function LoadingSpinner({ size }: { size: number }) {\r\n  return (\r\n    <svg\r\n      width={size}\r\n      height={size}\r\n      viewBox=\"0 0 24 24\"\r\n      fill=\"none\"\r\n      className=\"brycks-animate-spin\"\r\n      aria-hidden=\"true\"\r\n    >\r\n      <circle\r\n        cx=\"12\"\r\n        cy=\"12\"\r\n        r=\"10\"\r\n        stroke=\"currentColor\"\r\n        strokeWidth=\"2\"\r\n        strokeLinecap=\"round\"\r\n        strokeDasharray=\"31.4 31.4\"\r\n        opacity=\"0.25\"\r\n      />\r\n      <circle\r\n        cx=\"12\"\r\n        cy=\"12\"\r\n        r=\"10\"\r\n        stroke=\"currentColor\"\r\n        strokeWidth=\"2\"\r\n        strokeLinecap=\"round\"\r\n        strokeDasharray=\"31.4 31.4\"\r\n        strokeDashoffset=\"62.8\"\r\n        style={{ transform: 'rotate(-90deg)', transformOrigin: 'center' }}\r\n      />\r\n    </svg>\r\n  )\r\n})\r\n\r\nconst ButtonInner = <E extends ElementType = 'button'>(\r\n  {\r\n    as,\r\n    variant = 'solid',\r\n    intent = 'primary',\r\n    size = 'md',\r\n    fullWidth,\r\n    isLoading,\r\n    isDisabled,\r\n    leftIcon,\r\n    rightIcon,\r\n    isIconOnly,\r\n    className,\r\n    style,\r\n    children,\r\n    testId,\r\n    ...props\r\n  }: ButtonProps<E>,\r\n  ref: React.ForwardedRef<Element>\r\n) => {\r\n  const Component = (as || 'button') as ElementType\r\n\r\n  const disabled = isDisabled || isLoading\r\n\r\n  const sizeValues = sizeConfig[size]\r\n\r\n  // Layout-only inline styles (colors handled by CSS classes)\r\n  const layoutStyle: CSSProperties = {\r\n    display: 'inline-flex',\r\n    alignItems: 'center',\r\n    justifyContent: 'center',\r\n    ...style,\r\n  }\r\n\r\n  // Build class name - CSS handles all colors and states\r\n  const buttonClassName = cx(\r\n    'brycks-button',\r\n    `brycks-button--${variant}`,\r\n    `brycks-button--${intent}`,\r\n    `brycks-button--${size}`,\r\n    fullWidth && 'brycks-button--full-width',\r\n    isIconOnly && 'brycks-button--icon-only',\r\n    isLoading && 'brycks-button--loading',\r\n    disabled && 'brycks-button--disabled',\r\n    className\r\n  )\r\n\r\n  const isButton = Component === 'button' || as === undefined\r\n  const buttonProps = isButton\r\n    ? {\r\n        type: (props as { type?: string }).type ?? 'button',\r\n        disabled,\r\n      }\r\n    : {\r\n        'aria-disabled': disabled || undefined,\r\n        role: 'button',\r\n        tabIndex: disabled ? -1 : 0,\r\n      }\r\n\r\n  return (\r\n    <Component\r\n      ref={ref}\r\n      className={buttonClassName}\r\n      style={layoutStyle}\r\n      data-testid={testId}\r\n      {...buttonProps}\r\n      {...props}\r\n    >\r\n      {isLoading && (\r\n        <span\r\n          style={{\r\n            display: 'inline-flex',\r\n            position: isIconOnly ? 'absolute' : 'relative',\r\n          }}\r\n        >\r\n          <LoadingSpinner size={sizeValues.iconSize} />\r\n        </span>\r\n      )}\r\n\r\n      {!isLoading && leftIcon && (\r\n        <span\r\n          style={{\r\n            display: 'inline-flex',\r\n            width: sizeValues.iconSize,\r\n            height: sizeValues.iconSize,\r\n          }}\r\n        >\r\n          {leftIcon}\r\n        </span>\r\n      )}\r\n\r\n      {!isIconOnly && (\r\n        <span\r\n          style={{\r\n            opacity: isLoading && !isIconOnly ? 0.5 : 1,\r\n          }}\r\n        >\r\n          {children}\r\n        </span>\r\n      )}\r\n\r\n      {!isLoading && rightIcon && (\r\n        <span\r\n          style={{\r\n            display: 'inline-flex',\r\n            width: sizeValues.iconSize,\r\n            height: sizeValues.iconSize,\r\n          }}\r\n        >\r\n          {rightIcon}\r\n        </span>\r\n      )}\r\n\r\n      {isIconOnly && !isLoading && children}\r\n    </Component>\r\n  )\r\n}\r\n\r\nexport const Button = forwardRef(ButtonInner) as ButtonComponent\r\n\r\nButton.displayName = 'Button'\r\n\r\n/** Icon button shorthand */\r\nconst IconButtonInner = <E extends ElementType = 'button'>(\r\n  props: Omit<ButtonProps<E>, 'isIconOnly'>,\r\n  ref: React.ForwardedRef<Element>\r\n) => {\r\n  return <Button ref={ref as React.ForwardedRef<HTMLButtonElement>} isIconOnly {...(props as ButtonProps<'button'>)} />\r\n}\r\n\r\nexport const IconButton = forwardRef(IconButtonInner) as ButtonComponent\r\n\r\nIconButton.displayName = 'IconButton'\r\n"],"names":["LoadingSpinner","React","size","jsxs","jsx","ButtonInner","as","variant","intent","fullWidth","isLoading","isDisabled","leftIcon","rightIcon","isIconOnly","className","style","children","testId","props","ref","Component","disabled","sizeValues","sizeConfig","layoutStyle","buttonClassName","cx","buttonProps","Button","forwardRef","IconButtonInner","IconButton"],"mappings":"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"}

package/dist/components/primitives/Button/Button.styles.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../../../design-system/primitives/sizing.cjs"),h=require("../../../design-system/primitives/transitions.cjs"),d=require("../../../design-system/primitives/typography.cjs"),v=require("../../../design-system/primitives/opacity.cjs"),g={xs:{height:e.componentHeights.xs,paddingX:e.componentPaddingX.xs,fontSize:"var(--brycks-fs-ui-xs)",iconSize:e.iconSizes.xs,gap:e.componentGap.xs,radius:"var(--brycks-radius-md)"},sm:{height:e.componentHeights.sm,paddingX:e.componentPaddingX.sm,fontSize:"var(--brycks-fs-ui-sm)",iconSize:e.iconSizes.sm,gap:e.componentGap.sm,radius:"var(--brycks-radius-md)"},md:{height:e.componentHeights.md,paddingX:e.componentPaddingX.md,fontSize:"var(--brycks-fs-ui-md)",iconSize:e.iconSizes.md,gap:e.componentGap.md,radius:"var(--brycks-radius-default)"},lg:{height:e.componentHeights.lg,paddingX:e.componentPaddingX.lg,fontSize:"var(--brycks-fs-ui-lg)",iconSize:e.iconSizes.lg,gap:e.componentGap.md,radius:"var(--brycks-radius-lg)"},xl:{height:e.componentHeights.xl,paddingX:e.componentPaddingX.xl,fontSize:"var(--brycks-fs-ui-xl)",iconSize:e.iconSizes.xl,gap:e.componentGap.lg,radius:"var(--brycks-radius-xl)"}},f={primary:{solid:{bg:"var(--brycks-primary-default)",hoverBg:"var(--brycks-primary-hover)",activeBg:"var(--brycks-primary-active)",text:"var(--brycks-primary-foreground)"},outline:{border:"var(--brycks-primary-default)",hoverBg:"var(--brycks-primary-muted)",text:"var(--brycks-primary-default)"},ghost:{hoverBg:"var(--brycks-primary-muted)",text:"var(--brycks-primary-default)"},soft:{bg:"var(--brycks-primary-muted)",hoverBg:"var(--brycks-primary-soft-hover)",text:"var(--brycks-primary-default)"},link:{text:"var(--brycks-primary-default)",hoverText:"var(--brycks-primary-hover)"}},accent:{solid:{bg:"var(--brycks-accent-default)",hoverBg:"var(--brycks-accent-hover)",activeBg:"var(--brycks-accent-active)",text:"var(--brycks-accent-foreground)"},outline:{border:"var(--brycks-accent-default)",hoverBg:"var(--brycks-accent-muted)",text:"var(--brycks-accent-default)"},ghost:{hoverBg:"var(--brycks-accent-muted)",text:"var(--brycks-accent-default)"},soft:{bg:"var(--brycks-accent-muted)",hoverBg:"var(--brycks-accent-soft-hover)",text:"var(--brycks-accent-default)"},link:{text:"var(--brycks-accent-default)",hoverText:"var(--brycks-accent-hover)"}},neutral:{solid:{bg:"var(--brycks-foreground-default)",hoverBg:"var(--brycks-foreground-muted)",activeBg:"var(--brycks-foreground-subtle)",text:"var(--brycks-background-app)"},outline:{border:"var(--brycks-border-strong)",hoverBg:"var(--brycks-background-muted)",text:"var(--brycks-foreground-default)"},ghost:{hoverBg:"var(--brycks-background-muted)",text:"var(--brycks-foreground-default)"},soft:{bg:"var(--brycks-background-muted)",hoverBg:"var(--brycks-background-subtle)",text:"var(--brycks-foreground-default)"},link:{text:"var(--brycks-foreground-default)",hoverText:"var(--brycks-foreground-muted)"}},success:{solid:{bg:"var(--brycks-success-default)",hoverBg:"var(--brycks-success-hover)",activeBg:"var(--brycks-success-hover)",text:"var(--brycks-success-foreground)"},outline:{border:"var(--brycks-success-default)",hoverBg:"var(--brycks-success-muted)",text:"var(--brycks-success-default)"},ghost:{hoverBg:"var(--brycks-success-muted)",text:"var(--brycks-success-default)"},soft:{bg:"var(--brycks-success-muted)",hoverBg:"var(--brycks-success-soft-hover)",text:"var(--brycks-success-default)"},link:{text:"var(--brycks-success-default)",hoverText:"var(--brycks-success-hover)"}},warning:{solid:{bg:"var(--brycks-warning-default)",hoverBg:"var(--brycks-warning-hover)",activeBg:"var(--brycks-warning-hover)",text:"var(--brycks-warning-foreground)"},outline:{border:"var(--brycks-warning-default)",hoverBg:"var(--brycks-warning-muted)",text:"var(--brycks-warning-default)"},ghost:{hoverBg:"var(--brycks-warning-muted)",text:"var(--brycks-warning-default)"},soft:{bg:"var(--brycks-warning-muted)",hoverBg:"var(--brycks-warning-soft-hover)",text:"var(--brycks-warning-default)"},link:{text:"var(--brycks-warning-default)",hoverText:"var(--brycks-warning-hover)"}},error:{solid:{bg:"var(--brycks-error-default)",hoverBg:"var(--brycks-error-hover)",activeBg:"var(--brycks-error-hover)",text:"var(--brycks-error-foreground)"},outline:{border:"var(--brycks-error-default)",hoverBg:"var(--brycks-error-muted)",text:"var(--brycks-error-default)"},ghost:{hoverBg:"var(--brycks-error-muted)",text:"var(--brycks-error-default)"},soft:{bg:"var(--brycks-error-muted)",hoverBg:"var(--brycks-error-soft-hover)",text:"var(--brycks-error-default)"},link:{text:"var(--brycks-error-default)",hoverText:"var(--brycks-error-hover)"}}};function m(b){const{variant:c,intent:u,size:l,fullWidth:k,isIconOnly:i}=b,s=g[l],o=f[u][c],a={display:"inline-flex",alignItems:"center",justifyContent:"center",gap:s.gap,height:s.height,minWidth:i?s.height:void 0,width:k?"100%":void 0,padding:i?0:`0 ${s.paddingX}px`,fontSize:s.fontSize,fontWeight:d.componentFontWeight.medium,fontFamily:"var(--brycks-font-sans)",lineHeight:d.componentLineHeight.none,borderRadius:s.radius,border:"none",outline:"none",cursor:"pointer",userSelect:"none",textDecoration:"none",transition:h.transition.quick,WebkitTapHighlightColor:"transparent"};switch(c){case"solid":{const r=o;Object.assign(a,{backgroundColor:r.bg,color:r.text,boxShadow:"var(--brycks-shadow-xs)"});break}case"outline":{const r=o;Object.assign(a,{backgroundColor:"transparent",color:r.text,border:`1px solid ${r.border}`});break}case"ghost":{Object.assign(a,{backgroundColor:"transparent",color:o.text});break}case"soft":{const r=o;Object.assign(a,{backgroundColor:r.bg,color:r.text});break}case"link":{Object.assign(a,{backgroundColor:"transparent",color:o.text,height:"auto",padding:0,borderRadius:0});break}}const t={};switch(c){case"solid":{const r=o;t.backgroundColor=r.hoverBg,t.boxShadow="var(--brycks-shadow-sm)";break}case"outline":{const r=o;t.backgroundColor=r.hoverBg;break}case"ghost":{const r=o;t.backgroundColor=r.hoverBg;break}case"soft":{const r=o;t.backgroundColor=r.hoverBg;break}case"link":{const r=o;t.color=r.hoverText,t.textDecoration="underline";break}}const n={transform:c!=="link"?`scale(${v.scale.pressed})`:void 0};if(c==="solid"){const r=o;n.backgroundColor=r.activeBg,n.boxShadow="var(--brycks-shadow-xs)"}const y={opacity:v.stateOpacity.disabled,cursor:"not-allowed",pointerEvents:"none"};return{base:a,hover:t,active:n,disabled:y,loading:{cursor:"wait",pointerEvents:"none"}}}exports.getButtonStyles=m;exports.sizeConfig=g;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("../../../design-system/primitives/sizing.cjs"),e={xs:{iconSize:i.iconSizes.xs},sm:{iconSize:i.iconSizes.sm},md:{iconSize:i.iconSizes.md},lg:{iconSize:i.iconSizes.lg},xl:{iconSize:i.iconSizes.xl}};exports.sizeConfig=e;
 //# sourceMappingURL=Button.styles.cjs.map

package/dist/components/primitives/Button/Button.styles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Button.styles.cjs","sources":["../../../../src/components/primitives/Button/Button.styles.ts"],"sourcesContent":["/**\r\n * Button Component Styles\r\n *\r\n * Apple-inspired button styles with smooth transitions and tactile feedback.\r\n * All values derive from the design system - NO hardcoded values.\r\n *\r\n * @module components/primitives/Button\r\n */\r\n\r\nimport type { CSSProperties } from 'react'\r\nimport type { ButtonVariant, ButtonIntent, ButtonSize } from './Button.types'\r\nimport {\r\n  componentHeights,\r\n  componentPaddingX,\r\n  componentGap,\r\n  iconSizes,\r\n  componentFontWeight,\r\n  componentLineHeight,\r\n  transition,\r\n  stateOpacity,\r\n  scale,\r\n} from '../../../design-system'\r\n\r\n/**\r\n * Size dimension values - derived from design system primitives\r\n * Uses CSS variables for font sizes to enable dynamic scaling\r\n */\r\nconst sizeConfig: Record<\r\n  ButtonSize,\r\n  {\r\n    height: number\r\n    paddingX: number\r\n    fontSize: string\r\n    iconSize: number\r\n    gap: number\r\n    radius: string\r\n  }\r\n> = {\r\n  xs: {\r\n    height: componentHeights.xs,\r\n    paddingX: componentPaddingX.xs,\r\n    fontSize: 'var(--brycks-fs-ui-xs)',\r\n    iconSize: iconSizes.xs,\r\n    gap: componentGap.xs,\r\n    radius: 'var(--brycks-radius-md)',\r\n  },\r\n  sm: {\r\n    height: componentHeights.sm,\r\n    paddingX: componentPaddingX.sm,\r\n    fontSize: 'var(--brycks-fs-ui-sm)',\r\n    iconSize: iconSizes.sm,\r\n    gap: componentGap.sm,\r\n    radius: 'var(--brycks-radius-md)',\r\n  },\r\n  md: {\r\n    height: componentHeights.md,\r\n    paddingX: componentPaddingX.md,\r\n    fontSize: 'var(--brycks-fs-ui-md)',\r\n    iconSize: iconSizes.md,\r\n    gap: componentGap.md,\r\n    radius: 'var(--brycks-radius-default)',\r\n  },\r\n  lg: {\r\n    height: componentHeights.lg,\r\n    paddingX: componentPaddingX.lg,\r\n    fontSize: 'var(--brycks-fs-ui-lg)',\r\n    iconSize: iconSizes.lg,\r\n    gap: componentGap.md,\r\n    radius: 'var(--brycks-radius-lg)',\r\n  },\r\n  xl: {\r\n    height: componentHeights.xl,\r\n    paddingX: componentPaddingX.xl,\r\n    fontSize: 'var(--brycks-fs-ui-xl)',\r\n    iconSize: iconSizes.xl,\r\n    gap: componentGap.lg,\r\n    radius: 'var(--brycks-radius-xl)',\r\n  },\r\n}\r\n\r\n/** Color values for each intent */\r\nconst intentColors: Record<\r\n  ButtonIntent,\r\n  {\r\n    solid: { bg: string; hoverBg: string; activeBg: string; text: string }\r\n    outline: { border: string; hoverBg: string; text: string }\r\n    ghost: { hoverBg: string; text: string }\r\n    soft: { bg: string; hoverBg: string; text: string }\r\n    link: { text: string; hoverText: string }\r\n  }\r\n> = {\r\n  primary: {\r\n    solid: {\r\n      bg: 'var(--brycks-primary-default)',\r\n      hoverBg: 'var(--brycks-primary-hover)',\r\n      activeBg: 'var(--brycks-primary-active)',\r\n      text: 'var(--brycks-primary-foreground)',\r\n    },\r\n    outline: {\r\n      border: 'var(--brycks-primary-default)',\r\n      hoverBg: 'var(--brycks-primary-muted)',\r\n      text: 'var(--brycks-primary-default)',\r\n    },\r\n    ghost: {\r\n      hoverBg: 'var(--brycks-primary-muted)',\r\n      text: 'var(--brycks-primary-default)',\r\n    },\r\n    soft: {\r\n      bg: 'var(--brycks-primary-muted)',\r\n      hoverBg: 'var(--brycks-primary-soft-hover)',\r\n      text: 'var(--brycks-primary-default)',\r\n    },\r\n    link: {\r\n      text: 'var(--brycks-primary-default)',\r\n      hoverText: 'var(--brycks-primary-hover)',\r\n    },\r\n  },\r\n  accent: {\r\n    solid: {\r\n      bg: 'var(--brycks-accent-default)',\r\n      hoverBg: 'var(--brycks-accent-hover)',\r\n      activeBg: 'var(--brycks-accent-active)',\r\n      text: 'var(--brycks-accent-foreground)',\r\n    },\r\n    outline: {\r\n      border: 'var(--brycks-accent-default)',\r\n      hoverBg: 'var(--brycks-accent-muted)',\r\n      text: 'var(--brycks-accent-default)',\r\n    },\r\n    ghost: {\r\n      hoverBg: 'var(--brycks-accent-muted)',\r\n      text: 'var(--brycks-accent-default)',\r\n    },\r\n    soft: {\r\n      bg: 'var(--brycks-accent-muted)',\r\n      hoverBg: 'var(--brycks-accent-soft-hover)',\r\n      text: 'var(--brycks-accent-default)',\r\n    },\r\n    link: {\r\n      text: 'var(--brycks-accent-default)',\r\n      hoverText: 'var(--brycks-accent-hover)',\r\n    },\r\n  },\r\n  neutral: {\r\n    solid: {\r\n      bg: 'var(--brycks-foreground-default)',\r\n      hoverBg: 'var(--brycks-foreground-muted)',\r\n      activeBg: 'var(--brycks-foreground-subtle)',\r\n      text: 'var(--brycks-background-app)',\r\n    },\r\n    outline: {\r\n      border: 'var(--brycks-border-strong)',\r\n      hoverBg: 'var(--brycks-background-muted)',\r\n      text: 'var(--brycks-foreground-default)',\r\n    },\r\n    ghost: {\r\n      hoverBg: 'var(--brycks-background-muted)',\r\n      text: 'var(--brycks-foreground-default)',\r\n    },\r\n    soft: {\r\n      bg: 'var(--brycks-background-muted)',\r\n      hoverBg: 'var(--brycks-background-subtle)',\r\n      text: 'var(--brycks-foreground-default)',\r\n    },\r\n    link: {\r\n      text: 'var(--brycks-foreground-default)',\r\n      hoverText: 'var(--brycks-foreground-muted)',\r\n    },\r\n  },\r\n  success: {\r\n    solid: {\r\n      bg: 'var(--brycks-success-default)',\r\n      hoverBg: 'var(--brycks-success-hover)',\r\n      activeBg: 'var(--brycks-success-hover)',\r\n      text: 'var(--brycks-success-foreground)',\r\n    },\r\n    outline: {\r\n      border: 'var(--brycks-success-default)',\r\n      hoverBg: 'var(--brycks-success-muted)',\r\n      text: 'var(--brycks-success-default)',\r\n    },\r\n    ghost: {\r\n      hoverBg: 'var(--brycks-success-muted)',\r\n      text: 'var(--brycks-success-default)',\r\n    },\r\n    soft: {\r\n      bg: 'var(--brycks-success-muted)',\r\n      hoverBg: 'var(--brycks-success-soft-hover)',\r\n      text: 'var(--brycks-success-default)',\r\n    },\r\n    link: {\r\n      text: 'var(--brycks-success-default)',\r\n      hoverText: 'var(--brycks-success-hover)',\r\n    },\r\n  },\r\n  warning: {\r\n    solid: {\r\n      bg: 'var(--brycks-warning-default)',\r\n      hoverBg: 'var(--brycks-warning-hover)',\r\n      activeBg: 'var(--brycks-warning-hover)',\r\n      text: 'var(--brycks-warning-foreground)',\r\n    },\r\n    outline: {\r\n      border: 'var(--brycks-warning-default)',\r\n      hoverBg: 'var(--brycks-warning-muted)',\r\n      text: 'var(--brycks-warning-default)',\r\n    },\r\n    ghost: {\r\n      hoverBg: 'var(--brycks-warning-muted)',\r\n      text: 'var(--brycks-warning-default)',\r\n    },\r\n    soft: {\r\n      bg: 'var(--brycks-warning-muted)',\r\n      hoverBg: 'var(--brycks-warning-soft-hover)',\r\n      text: 'var(--brycks-warning-default)',\r\n    },\r\n    link: {\r\n      text: 'var(--brycks-warning-default)',\r\n      hoverText: 'var(--brycks-warning-hover)',\r\n    },\r\n  },\r\n  error: {\r\n    solid: {\r\n      bg: 'var(--brycks-error-default)',\r\n      hoverBg: 'var(--brycks-error-hover)',\r\n      activeBg: 'var(--brycks-error-hover)',\r\n      text: 'var(--brycks-error-foreground)',\r\n    },\r\n    outline: {\r\n      border: 'var(--brycks-error-default)',\r\n      hoverBg: 'var(--brycks-error-muted)',\r\n      text: 'var(--brycks-error-default)',\r\n    },\r\n    ghost: {\r\n      hoverBg: 'var(--brycks-error-muted)',\r\n      text: 'var(--brycks-error-default)',\r\n    },\r\n    soft: {\r\n      bg: 'var(--brycks-error-muted)',\r\n      hoverBg: 'var(--brycks-error-soft-hover)',\r\n      text: 'var(--brycks-error-default)',\r\n    },\r\n    link: {\r\n      text: 'var(--brycks-error-default)',\r\n      hoverText: 'var(--brycks-error-hover)',\r\n    },\r\n  },\r\n}\r\n\r\nexport interface ButtonStyleProps {\r\n  variant: ButtonVariant\r\n  intent: ButtonIntent\r\n  size: ButtonSize\r\n  fullWidth?: boolean\r\n  isIconOnly?: boolean\r\n  isDisabled?: boolean\r\n  isLoading?: boolean\r\n}\r\n\r\nexport function getButtonStyles(props: ButtonStyleProps): {\r\n  base: CSSProperties\r\n  hover: CSSProperties\r\n  active: CSSProperties\r\n  disabled: CSSProperties\r\n  loading: CSSProperties\r\n} {\r\n  const { variant, intent, size, fullWidth, isIconOnly } = props\r\n  const sizeValues = sizeConfig[size]\r\n  const colors = intentColors[intent][variant]\r\n\r\n  // Base styles common to all buttons\r\n  const base: CSSProperties = {\r\n    display: 'inline-flex',\r\n    alignItems: 'center',\r\n    justifyContent: 'center',\r\n    gap: sizeValues.gap,\r\n    height: sizeValues.height,\r\n    minWidth: isIconOnly ? sizeValues.height : undefined,\r\n    width: fullWidth ? '100%' : undefined,\r\n    padding: isIconOnly ? 0 : `0 ${sizeValues.paddingX}px`,\r\n    fontSize: sizeValues.fontSize,\r\n    fontWeight: componentFontWeight.medium,\r\n    fontFamily: 'var(--brycks-font-sans)',\r\n    lineHeight: componentLineHeight.none,\r\n    borderRadius: sizeValues.radius,\r\n    border: 'none',\r\n    outline: 'none',\r\n    cursor: 'pointer',\r\n    userSelect: 'none',\r\n    textDecoration: 'none',\r\n    transition: transition.quick,\r\n    WebkitTapHighlightColor: 'transparent',\r\n  }\r\n\r\n  // Apply variant-specific base styles\r\n  switch (variant) {\r\n    case 'solid': {\r\n      const solidColors = colors as { bg: string; hoverBg: string; activeBg: string; text: string }\r\n      Object.assign(base, {\r\n        backgroundColor: solidColors.bg,\r\n        color: solidColors.text,\r\n        boxShadow: 'var(--brycks-shadow-xs)',\r\n      })\r\n      break\r\n    }\r\n\r\n    case 'outline': {\r\n      const outlineColors = colors as { border: string; hoverBg: string; text: string }\r\n      Object.assign(base, {\r\n        backgroundColor: 'transparent',\r\n        color: outlineColors.text,\r\n        border: `1px solid ${outlineColors.border}`,\r\n      })\r\n      break\r\n    }\r\n\r\n    case 'ghost': {\r\n      const ghostColors = colors as { hoverBg: string; text: string }\r\n      Object.assign(base, {\r\n        backgroundColor: 'transparent',\r\n        color: ghostColors.text,\r\n      })\r\n      break\r\n    }\r\n\r\n    case 'soft': {\r\n      const softColors = colors as { bg: string; hoverBg: string; text: string }\r\n      Object.assign(base, {\r\n        backgroundColor: softColors.bg,\r\n        color: softColors.text,\r\n      })\r\n      break\r\n    }\r\n\r\n    case 'link': {\r\n      const linkColors = colors as { text: string; hoverText: string }\r\n      Object.assign(base, {\r\n        backgroundColor: 'transparent',\r\n        color: linkColors.text,\r\n        height: 'auto',\r\n        padding: 0,\r\n        borderRadius: 0,\r\n      })\r\n      break\r\n    }\r\n  }\r\n\r\n  // Hover styles\r\n  const hover: CSSProperties = {}\r\n  switch (variant) {\r\n    case 'solid': {\r\n      const solidColors = colors as { bg: string; hoverBg: string; activeBg: string; text: string }\r\n      hover.backgroundColor = solidColors.hoverBg\r\n      hover.boxShadow = 'var(--brycks-shadow-sm)'\r\n      break\r\n    }\r\n    case 'outline': {\r\n      const outlineColors = colors as { border: string; hoverBg: string; text: string }\r\n      hover.backgroundColor = outlineColors.hoverBg\r\n      break\r\n    }\r\n    case 'ghost': {\r\n      const ghostColors = colors as { hoverBg: string; text: string }\r\n      hover.backgroundColor = ghostColors.hoverBg\r\n      break\r\n    }\r\n    case 'soft': {\r\n      const softColors = colors as { bg: string; hoverBg: string; text: string }\r\n      hover.backgroundColor = softColors.hoverBg\r\n      break\r\n    }\r\n    case 'link': {\r\n      const linkColors = colors as { text: string; hoverText: string }\r\n      hover.color = linkColors.hoverText\r\n      hover.textDecoration = 'underline'\r\n      break\r\n    }\r\n  }\r\n\r\n  // Active/pressed styles\r\n  const active: CSSProperties = {\r\n    transform: variant !== 'link' ? `scale(${scale.pressed})` : undefined,\r\n  }\r\n  if (variant === 'solid') {\r\n    const solidColors = colors as { bg: string; hoverBg: string; activeBg: string; text: string }\r\n    active.backgroundColor = solidColors.activeBg\r\n    active.boxShadow = 'var(--brycks-shadow-xs)'\r\n  }\r\n\r\n  // Disabled styles\r\n  const disabled: CSSProperties = {\r\n    opacity: stateOpacity.disabled,\r\n    cursor: 'not-allowed',\r\n    pointerEvents: 'none',\r\n  }\r\n\r\n  // Loading styles\r\n  const loading: CSSProperties = {\r\n    cursor: 'wait',\r\n    pointerEvents: 'none',\r\n  }\r\n\r\n  return { base, hover, active, disabled, loading }\r\n}\r\n\r\nexport { sizeConfig }\r\n"],"names":["sizeConfig","componentHeights","componentPaddingX","iconSizes","componentGap","intentColors","getButtonStyles","props","variant","intent","size","fullWidth","isIconOnly","sizeValues","colors","base","componentFontWeight","componentLineHeight","transition","solidColors","outlineColors","softColors","hover","ghostColors","linkColors","active","scale","disabled","stateOpacity"],"mappings":"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"}
+{"version":3,"file":"Button.styles.cjs","sources":["../../../../src/components/primitives/Button/Button.styles.ts"],"sourcesContent":["/**\r\n * Button Component Styles\r\n *\r\n * Size configuration for button icons and internal elements.\r\n * All color and visual styles are handled via CSS classes in button.css.\r\n *\r\n * @module components/primitives/Button\r\n */\r\n\r\nimport type { ButtonSize } from './Button.types'\r\nimport { iconSizes } from '../../../design-system'\r\n\r\n/**\r\n * Size configuration for button icons\r\n * Used by the component to size icons and loading spinners\r\n */\r\nexport const sizeConfig: Record<ButtonSize, { iconSize: number }> = {\r\n  xs: { iconSize: iconSizes.xs },\r\n  sm: { iconSize: iconSizes.sm },\r\n  md: { iconSize: iconSizes.md },\r\n  lg: { iconSize: iconSizes.lg },\r\n  xl: { iconSize: iconSizes.xl },\r\n}\r\n"],"names":["sizeConfig","iconSizes"],"mappings":"gJAgBaA,EAAuD,CAClE,GAAI,CAAE,SAAUC,EAAAA,UAAU,EAAA,EAC1B,GAAI,CAAE,SAAUA,EAAAA,UAAU,EAAA,EAC1B,GAAI,CAAE,SAAUA,EAAAA,UAAU,EAAA,EAC1B,GAAI,CAAE,SAAUA,EAAAA,UAAU,EAAA,EAC1B,GAAI,CAAE,SAAUA,EAAAA,UAAU,EAAA,CAC5B"}