@brycks/core-front 0.2.7 → 0.2.9

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

@@ -0,0 +1,173 @@
+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(
+    "svg",
+    {
+      width: o,
+      height: o,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      className: "brycks-animate-spin",
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ e(
+          "circle",
+          {
+            cx: "12",
+            cy: "12",
+            r: "10",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeDasharray: "31.4 31.4",
+            opacity: "0.25"
+          }
+        ),
+        /* @__PURE__ */ e(
+          "circle",
+          {
+            cx: "12",
+            cy: "12",
+            r: "10",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeDasharray: "31.4 31.4",
+            strokeDashoffset: "62.8",
+            style: { transform: "rotate(-90deg)", transformOrigin: "center" }
+          }
+        )
+      ]
+    }
+  );
+}), Q = ({
+  as: a,
+  variant: o = "solid",
+  intent: d = "primary",
+  size: l = "md",
+  fullWidth: b,
+  isLoading: t,
+  isDisabled: w,
+  leftIcon: y,
+  rightIcon: p,
+  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(
+    "brycks-button",
+    `brycks-button--${o}`,
+    `brycks-button--${d}`,
+    `brycks-button--${l}`,
+    b && "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
+  } : {
+    "aria-disabled": s || void 0,
+    role: "button",
+    tabIndex: s ? -1 : 0
+  };
+  return /* @__PURE__ */ v(
+    f,
+    {
+      ref: $,
+      className: W,
+      style: H,
+      "data-testid": C,
+      onMouseEnter: I,
+      onMouseLeave: R,
+      onMouseDown: U,
+      onMouseUp: V,
+      ...q,
+      ...m,
+      children: [
+        t && /* @__PURE__ */ e(
+          "span",
+          {
+            style: {
+              display: "inline-flex",
+              position: r ? "absolute" : "relative"
+            },
+            children: /* @__PURE__ */ e(K, { size: i.iconSize })
+          }
+        ),
+        !t && y && /* @__PURE__ */ e(
+          "span",
+          {
+            style: {
+              display: "inline-flex",
+              width: i.iconSize,
+              height: i.iconSize
+            },
+            children: y
+          }
+        ),
+        !r && /* @__PURE__ */ e(
+          "span",
+          {
+            style: {
+              opacity: t && !r ? 0.5 : 1
+            },
+            children: h
+          }
+        ),
+        !t && p && /* @__PURE__ */ e(
+          "span",
+          {
+            style: {
+              display: "inline-flex",
+              width: i.iconSize,
+              height: i.iconSize
+            },
+            children: p
+          }
+        ),
+        r && !t && h
+      ]
+    }
+  );
+}, S = B(Q);
+S.displayName = "Button";
+const T = (a, o) => /* @__PURE__ */ e(S, { ref: o, isIconOnly: !0, ...a }), X = B(T);
+X.displayName = "IconButton";
+export {
+  S as Button,
+  X as IconButton
+};
+//# sourceMappingURL=Button.js.map

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

@@ -0,0 +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":"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"}

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

@@ -0,0 +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;
+//# sourceMappingURL=Button.styles.cjs.map

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

@@ -0,0 +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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"}

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

@@ -0,0 +1,321 @@
+import { componentGap as c, iconSizes as n, componentPaddingX as i, componentHeights as d } from "../../../design-system/primitives/sizing.js";
+import { transition as h } from "../../../design-system/primitives/transitions.js";
+import { componentLineHeight as f, componentFontWeight as m } from "../../../design-system/primitives/typography.js";
+import { stateOpacity as x, scale as p } from "../../../design-system/primitives/opacity.js";
+const B = {
+  xs: {
+    height: d.xs,
+    paddingX: i.xs,
+    fontSize: "var(--brycks-fs-ui-xs)",
+    iconSize: n.xs,
+    gap: c.xs,
+    radius: "var(--brycks-radius-md)"
+  },
+  sm: {
+    height: d.sm,
+    paddingX: i.sm,
+    fontSize: "var(--brycks-fs-ui-sm)",
+    iconSize: n.sm,
+    gap: c.sm,
+    radius: "var(--brycks-radius-md)"
+  },
+  md: {
+    height: d.md,
+    paddingX: i.md,
+    fontSize: "var(--brycks-fs-ui-md)",
+    iconSize: n.md,
+    gap: c.md,
+    radius: "var(--brycks-radius-default)"
+  },
+  lg: {
+    height: d.lg,
+    paddingX: i.lg,
+    fontSize: "var(--brycks-fs-ui-lg)",
+    iconSize: n.lg,
+    gap: c.md,
+    radius: "var(--brycks-radius-lg)"
+  },
+  xl: {
+    height: d.xl,
+    paddingX: i.xl,
+    fontSize: "var(--brycks-fs-ui-xl)",
+    iconSize: n.xl,
+    gap: c.lg,
+    radius: "var(--brycks-radius-xl)"
+  }
+}, C = {
+  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 X(g) {
+  const { variant: a, intent: u, size: l, fullWidth: k, isIconOnly: b } = g, t = B[l], e = C[u][a], s = {
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: t.gap,
+    height: t.height,
+    minWidth: b ? t.height : void 0,
+    width: k ? "100%" : void 0,
+    padding: b ? 0 : `0 ${t.paddingX}px`,
+    fontSize: t.fontSize,
+    fontWeight: m.medium,
+    fontFamily: "var(--brycks-font-sans)",
+    lineHeight: f.none,
+    borderRadius: t.radius,
+    border: "none",
+    outline: "none",
+    cursor: "pointer",
+    userSelect: "none",
+    textDecoration: "none",
+    transition: h.quick,
+    WebkitTapHighlightColor: "transparent"
+  };
+  switch (a) {
+    case "solid": {
+      const r = e;
+      Object.assign(s, {
+        backgroundColor: r.bg,
+        color: r.text,
+        boxShadow: "var(--brycks-shadow-xs)"
+      });
+      break;
+    }
+    case "outline": {
+      const r = e;
+      Object.assign(s, {
+        backgroundColor: "transparent",
+        color: r.text,
+        border: `1px solid ${r.border}`
+      });
+      break;
+    }
+    case "ghost": {
+      Object.assign(s, {
+        backgroundColor: "transparent",
+        color: e.text
+      });
+      break;
+    }
+    case "soft": {
+      const r = e;
+      Object.assign(s, {
+        backgroundColor: r.bg,
+        color: r.text
+      });
+      break;
+    }
+    case "link": {
+      Object.assign(s, {
+        backgroundColor: "transparent",
+        color: e.text,
+        height: "auto",
+        padding: 0,
+        borderRadius: 0
+      });
+      break;
+    }
+  }
+  const o = {};
+  switch (a) {
+    case "solid": {
+      const r = e;
+      o.backgroundColor = r.hoverBg, o.boxShadow = "var(--brycks-shadow-sm)";
+      break;
+    }
+    case "outline": {
+      const r = e;
+      o.backgroundColor = r.hoverBg;
+      break;
+    }
+    case "ghost": {
+      const r = e;
+      o.backgroundColor = r.hoverBg;
+      break;
+    }
+    case "soft": {
+      const r = e;
+      o.backgroundColor = r.hoverBg;
+      break;
+    }
+    case "link": {
+      const r = e;
+      o.color = r.hoverText, o.textDecoration = "underline";
+      break;
+    }
+  }
+  const v = {
+    transform: a !== "link" ? `scale(${p.pressed})` : void 0
+  };
+  if (a === "solid") {
+    const r = e;
+    v.backgroundColor = r.activeBg, v.boxShadow = "var(--brycks-shadow-xs)";
+  }
+  const y = {
+    opacity: x.disabled,
+    cursor: "not-allowed",
+    pointerEvents: "none"
+  };
+  return { base: s, hover: o, active: v, disabled: y, loading: {
+    cursor: "wait",
+    pointerEvents: "none"
+  } };
+}
+export {
+  X as getButtonStyles,
+  B as sizeConfig
+};
+//# sourceMappingURL=Button.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Button.styles.js","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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"}

package/dist/components/primitives/Icon/Icon.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),v=require("react"),S=require("../../../utils/styles.cjs"),b={xs:12,sm:14,md:16,lg:20,xl:24,"2xl":32},l=v.forwardRef(function({size:i="md",customSize:d,color:a,path:o,paths:e,viewBox:u="0 0 24 24",fillRule:c="nonzero",className:m,style:g,testId:x,label:n,children:s,...f},h){const r=d??b[i],y={width:r,height:r,minWidth:r,minHeight:r,color:a??"currentColor",display:"inline-block",verticalAlign:"middle",flexShrink:0,...g},p=()=>s||(e&&e.length>0?e.map((w,j)=>t.jsx("path",{d:w,fill:"currentColor",fillRule:c},j)):o?t.jsx("path",{d:o,fill:"currentColor",fillRule:c}):null);return t.jsx("svg",{ref:h,xmlns:"http://www.w3.org/2000/svg",viewBox:u,className:S.cx("brycks-icon",`brycks-icon--${i}`,m),style:y,"aria-hidden":!n,"aria-label":n,role:n?"img":void 0,"data-testid":x,...f,children:p()})});l.displayName="Icon";exports.Icon=l;
+//# sourceMappingURL=Icon.cjs.map

package/dist/components/primitives/Icon/Icon.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.cjs","sources":["../../../../src/components/primitives/Icon/Icon.tsx"],"sourcesContent":["/**\n * Icon Component\n *\n * A flexible icon component that supports custom SVG icons.\n * Uses design system tokens for consistent sizing and colors.\n */\n\nimport { forwardRef, type SVGAttributes, type CSSProperties, type ReactNode } from 'react'\nimport { cx } from '../../../utils/styles'\n\nexport type IconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'\n\nexport interface IconProps extends Omit<SVGAttributes<SVGSVGElement>, 'children'> {\n  /** Icon size */\n  size?: IconSize\n  /** Custom size in pixels */\n  customSize?: number\n  /** Icon color (uses currentColor by default) */\n  color?: string\n  /** SVG path data or children */\n  path?: string\n  /** Multiple paths */\n  paths?: string[]\n  /** SVG viewBox */\n  viewBox?: string\n  /** Fill rule for paths */\n  fillRule?: 'nonzero' | 'evenodd'\n  /** Custom class name */\n  className?: string\n  /** Test ID */\n  testId?: string\n  /** Accessibility label */\n  label?: string\n  /** Custom SVG children (overrides path/paths) */\n  children?: ReactNode\n}\n\nconst sizeMap: Record<IconSize, number> = {\n  xs: 12,\n  sm: 14,\n  md: 16,\n  lg: 20,\n  xl: 24,\n  '2xl': 32,\n}\n\nexport const Icon = forwardRef<SVGSVGElement, IconProps>(function Icon(\n  {\n    size = 'md',\n    customSize,\n    color,\n    path,\n    paths,\n    viewBox = '0 0 24 24',\n    fillRule = 'nonzero',\n    className,\n    style,\n    testId,\n    label,\n    children,\n    ...props\n  },\n  ref\n) {\n  const pixelSize = customSize ?? sizeMap[size]\n\n  const iconStyle: CSSProperties = {\n    width: pixelSize,\n    height: pixelSize,\n    minWidth: pixelSize,\n    minHeight: pixelSize,\n    color: color ?? 'currentColor',\n    display: 'inline-block',\n    verticalAlign: 'middle',\n    flexShrink: 0,\n    ...style,\n  }\n\n  const renderPaths = () => {\n    if (children) return children\n\n    if (paths && paths.length > 0) {\n      return paths.map((d, index) => (\n        <path key={index} d={d} fill=\"currentColor\" fillRule={fillRule} />\n      ))\n    }\n\n    if (path) {\n      return <path d={path} fill=\"currentColor\" fillRule={fillRule} />\n    }\n\n    return null\n  }\n\n  return (\n    <svg\n      ref={ref}\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox={viewBox}\n      className={cx('brycks-icon', `brycks-icon--${size}`, className)}\n      style={iconStyle}\n      aria-hidden={!label}\n      aria-label={label}\n      role={label ? 'img' : undefined}\n      data-testid={testId}\n      {...props}\n    >\n      {renderPaths()}\n    </svg>\n  )\n})\n\nIcon.displayName = 'Icon'\n"],"names":["sizeMap","Icon","forwardRef","size","customSize","color","path","paths","viewBox","fillRule","className","style","testId","label","children","props","ref","pixelSize","iconStyle","renderPaths","d","index","jsx","cx"],"mappings":"+KAqCMA,EAAoC,CACxC,GAAI,GACJ,GAAI,GACJ,GAAI,GACJ,GAAI,GACJ,GAAI,GACJ,MAAO,EACT,EAEaC,EAAOC,EAAAA,WAAqC,SACvD,CACE,KAAAC,EAAO,KACP,WAAAC,EACA,MAAAC,EACA,KAAAC,EACA,MAAAC,EACA,QAAAC,EAAU,YACV,SAAAC,EAAW,UACX,UAAAC,EACA,MAAAC,EACA,OAAAC,EACA,MAAAC,EACA,SAAAC,EACA,GAAGC,CACL,EACAC,EACA,CACA,MAAMC,EAAYb,GAAcJ,EAAQG,CAAI,EAEtCe,EAA2B,CAC/B,MAAOD,EACP,OAAQA,EACR,SAAUA,EACV,UAAWA,EACX,MAAOZ,GAAS,eAChB,QAAS,eACT,cAAe,SACf,WAAY,EACZ,GAAGM,CAAA,EAGCQ,EAAc,IACdL,IAEAP,GAASA,EAAM,OAAS,EACnBA,EAAM,IAAI,CAACa,EAAGC,IACnBC,EAAAA,IAAC,OAAA,CAAiB,EAAAF,EAAM,KAAK,eAAe,SAAAX,CAAA,EAAjCY,CAAqD,CACjE,EAGCf,QACM,OAAA,CAAK,EAAGA,EAAM,KAAK,eAAe,SAAAG,EAAoB,EAGzD,MAGT,OACEa,EAAAA,IAAC,MAAA,CACC,IAAAN,EACA,MAAM,6BACN,QAAAR,EACA,UAAWe,EAAAA,GAAG,cAAe,gBAAgBpB,CAAI,GAAIO,CAAS,EAC9D,MAAOQ,EACP,cAAa,CAACL,EACd,aAAYA,EACZ,KAAMA,EAAQ,MAAQ,OACtB,cAAaD,EACZ,GAAGG,EAEH,SAAAI,EAAA,CAAY,CAAA,CAGnB,CAAC,EAEDlB,EAAK,YAAc"}