@brycks/core-front 0.3.2 → 0.3.4

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

@@ -1,321 +1,12 @@
-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)"
-    }
-  }
+import { iconSizes as i } from "../../../design-system/primitives/sizing.js";
+const e = {
+  xs: { iconSize: i.xs },
+  sm: { iconSize: i.sm },
+  md: { iconSize: i.md },
+  lg: { iconSize: i.lg },
+  xl: { iconSize: i.xl }
 };
-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
+  e as sizeConfig
 };
 //# sourceMappingURL=Button.styles.js.map

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

@@ -1 +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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"}
+{"version":3,"file":"Button.styles.js","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":";AAgBO,MAAMA,IAAuD;AAAA,EAClE,IAAI,EAAE,UAAUC,EAAU,GAAA;AAAA,EAC1B,IAAI,EAAE,UAAUA,EAAU,GAAA;AAAA,EAC1B,IAAI,EAAE,UAAUA,EAAU,GAAA;AAAA,EAC1B,IAAI,EAAE,UAAUA,EAAU,GAAA;AAAA,EAC1B,IAAI,EAAE,UAAUA,EAAU,GAAA;AAC5B;"}

package/dist/components/utility/Badge/Badge.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const f=require("react/jsx-runtime"),p=require("react"),v=require("../../../utils/styles.cjs"),r=require("../../../design-system/tokens/spacing.cjs"),a=require("../../../design-system/primitives/sizing.cjs"),e=require("../../../design-system/tokens/typography.cjs"),m={sm:{fontSize:e.fontSizes.xs-1,padding:`${r.spacing[.5]}px ${a.componentPaddingY.sm}px`,height:r.spacing[4]+r.spacing[.5]},md:{fontSize:e.fontSizes.xs,padding:`${r.spacing[.5]+1}px ${a.componentPaddingX.xs}px`,height:r.spacing[5]+r.spacing[.5]},lg:{fontSize:e.fontSizes.sm,padding:`${r.spacing[1]}px ${a.componentPaddingY.lg}px`,height:r.spacing[6]+r.spacing[.5]}},C={neutral:{solid:{backgroundColor:"var(--brycks-foreground-default)",color:"var(--brycks-background-app)"},subtle:{backgroundColor:"var(--brycks-background-muted)",color:"var(--brycks-foreground-default)"},outline:{backgroundColor:"transparent",color:"var(--brycks-foreground-default)",borderColor:"var(--brycks-border-default)"}},primary:{solid:{backgroundColor:"var(--brycks-primary-default)",color:"var(--brycks-primary-foreground)"},subtle:{backgroundColor:"var(--brycks-primary-muted)",color:"var(--brycks-primary-hover)"},outline:{backgroundColor:"transparent",color:"var(--brycks-primary-default)",borderColor:"var(--brycks-primary-default)"}},accent:{solid:{backgroundColor:"var(--brycks-accent-default)",color:"var(--brycks-accent-foreground)"},subtle:{backgroundColor:"var(--brycks-accent-muted)",color:"var(--brycks-accent-hover)"},outline:{backgroundColor:"transparent",color:"var(--brycks-accent-default)",borderColor:"var(--brycks-accent-default)"}},success:{solid:{backgroundColor:"var(--brycks-success-default)",color:"var(--brycks-success-foreground)"},subtle:{backgroundColor:"var(--brycks-success-muted)",color:"var(--brycks-success-on-muted)"},outline:{backgroundColor:"transparent",color:"var(--brycks-success-default)",borderColor:"var(--brycks-success-default)"}},warning:{solid:{backgroundColor:"var(--brycks-warning-default)",color:"var(--brycks-warning-foreground)"},subtle:{backgroundColor:"var(--brycks-warning-muted)",color:"var(--brycks-warning-on-muted)"},outline:{backgroundColor:"transparent",color:"var(--brycks-warning-default)",borderColor:"var(--brycks-warning-default)"}},error:{solid:{backgroundColor:"var(--brycks-error-default)",color:"var(--brycks-error-foreground)"},subtle:{backgroundColor:"var(--brycks-error-muted)",color:"var(--brycks-error-on-muted)"},outline:{backgroundColor:"transparent",color:"var(--brycks-error-default)",borderColor:"var(--brycks-error-default)"}},info:{solid:{backgroundColor:"var(--brycks-info-default)",color:"var(--brycks-info-foreground)"},subtle:{backgroundColor:"var(--brycks-info-muted)",color:"var(--brycks-info-on-muted)"},outline:{backgroundColor:"transparent",color:"var(--brycks-info-default)",borderColor:"var(--brycks-info-default)"}}},s=p.forwardRef(function({variant:o="subtle",intent:c="neutral",size:n="md",className:t,style:l,testId:d,children:u,...b},i){const g=m[n],k=C[c][o],y={display:"inline-flex",alignItems:"center",justifyContent:"center",fontWeight:500,fontFamily:"var(--brycks-font-sans)",lineHeight:1,borderRadius:"var(--brycks-radius-full)",whiteSpace:"nowrap",border:o==="outline"?"1px solid":"none",...g,...k,...l};return f.jsx("span",{ref:i,className:v.cx("brycks-badge",`brycks-badge--${o}`,`brycks-badge--${c}`,`brycks-badge--${n}`,t),style:y,"data-testid":d,...b,children:u})});s.displayName="Badge";exports.Badge=s;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const g=require("react/jsx-runtime"),i=require("react"),o=require("../../../utils/styles.cjs"),e=i.forwardRef(function({variant:a="subtle",intent:s="neutral",size:t="md",className:r,style:d,testId:c,children:n,...b},u){return g.jsx("span",{ref:u,className:o.cx("brycks-badge",`brycks-badge--${a}`,`brycks-badge--${s}`,`brycks-badge--${t}`,r),style:d,"data-testid":c,...b,children:n})});e.displayName="Badge";exports.Badge=e;
 //# sourceMappingURL=Badge.cjs.map

package/dist/components/utility/Badge/Badge.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.cjs","sources":["../../../../src/components/utility/Badge/Badge.tsx"],"sourcesContent":["/**\r\n * Badge Component\r\n *\r\n * Small label for status, counts, or categorization.\r\n * Clean, minimal design with subtle color coding.\r\n */\r\n\r\nimport {\r\n  forwardRef,\r\n  type CSSProperties,\r\n  type ReactNode,\r\n  type HTMLAttributes,\r\n} from 'react'\r\nimport { cx } from '../../../utils/styles'\r\nimport { spacing, fontSizes } from '../../../design-system'\r\nimport { componentPaddingX, componentPaddingY } from '../../../design-system/primitives'\r\n\r\nexport type BadgeVariant = 'solid' | 'subtle' | 'outline'\r\nexport type BadgeIntent = 'neutral' | 'primary' | 'accent' | 'success' | 'warning' | 'error' | 'info'\r\nexport type BadgeSize = 'sm' | 'md' | 'lg'\r\n\r\nexport interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {\r\n  /** Visual variant */\r\n  variant?: BadgeVariant\r\n  /** Color intent */\r\n  intent?: BadgeIntent\r\n  /** Size */\r\n  size?: BadgeSize\r\n  /** Custom class name */\r\n  className?: string\r\n  /** Test ID */\r\n  testId?: string\r\n  /** Badge content */\r\n  children?: ReactNode\r\n}\r\n\r\nconst sizeStyles: Record<BadgeSize, CSSProperties> = {\r\n  sm: { fontSize: fontSizes.xs - 1, padding: `${spacing[0.5]}px ${componentPaddingY.sm}px`, height: spacing[4] + spacing[0.5] },\r\n  md: { fontSize: fontSizes.xs, padding: `${spacing[0.5] + 1}px ${componentPaddingX.xs}px`, height: spacing[5] + spacing[0.5] },\r\n  lg: { fontSize: fontSizes.sm, padding: `${spacing[1]}px ${componentPaddingY.lg}px`, height: spacing[6] + spacing[0.5] },\r\n}\r\n\r\nconst intentColors: Record<BadgeIntent, Record<BadgeVariant, CSSProperties>> = {\r\n  neutral: {\r\n    solid: { backgroundColor: 'var(--brycks-foreground-default)', color: 'var(--brycks-background-app)' },\r\n    subtle: { backgroundColor: 'var(--brycks-background-muted)', color: 'var(--brycks-foreground-default)' },\r\n    outline: { backgroundColor: 'transparent', color: 'var(--brycks-foreground-default)', borderColor: 'var(--brycks-border-default)' },\r\n  },\r\n  primary: {\r\n    solid: { backgroundColor: 'var(--brycks-primary-default)', color: 'var(--brycks-primary-foreground)' },\r\n    subtle: { backgroundColor: 'var(--brycks-primary-muted)', color: 'var(--brycks-primary-hover)' },\r\n    outline: { backgroundColor: 'transparent', color: 'var(--brycks-primary-default)', borderColor: 'var(--brycks-primary-default)' },\r\n  },\r\n  accent: {\r\n    solid: { backgroundColor: 'var(--brycks-accent-default)', color: 'var(--brycks-accent-foreground)' },\r\n    subtle: { backgroundColor: 'var(--brycks-accent-muted)', color: 'var(--brycks-accent-hover)' },\r\n    outline: { backgroundColor: 'transparent', color: 'var(--brycks-accent-default)', borderColor: 'var(--brycks-accent-default)' },\r\n  },\r\n  success: {\r\n    solid: { backgroundColor: 'var(--brycks-success-default)', color: 'var(--brycks-success-foreground)' },\r\n    subtle: { backgroundColor: 'var(--brycks-success-muted)', color: 'var(--brycks-success-on-muted)' },\r\n    outline: { backgroundColor: 'transparent', color: 'var(--brycks-success-default)', borderColor: 'var(--brycks-success-default)' },\r\n  },\r\n  warning: {\r\n    solid: { backgroundColor: 'var(--brycks-warning-default)', color: 'var(--brycks-warning-foreground)' },\r\n    subtle: { backgroundColor: 'var(--brycks-warning-muted)', color: 'var(--brycks-warning-on-muted)' },\r\n    outline: { backgroundColor: 'transparent', color: 'var(--brycks-warning-default)', borderColor: 'var(--brycks-warning-default)' },\r\n  },\r\n  error: {\r\n    solid: { backgroundColor: 'var(--brycks-error-default)', color: 'var(--brycks-error-foreground)' },\r\n    subtle: { backgroundColor: 'var(--brycks-error-muted)', color: 'var(--brycks-error-on-muted)' },\r\n    outline: { backgroundColor: 'transparent', color: 'var(--brycks-error-default)', borderColor: 'var(--brycks-error-default)' },\r\n  },\r\n  info: {\r\n    solid: { backgroundColor: 'var(--brycks-info-default)', color: 'var(--brycks-info-foreground)' },\r\n    subtle: { backgroundColor: 'var(--brycks-info-muted)', color: 'var(--brycks-info-on-muted)' },\r\n    outline: { backgroundColor: 'transparent', color: 'var(--brycks-info-default)', borderColor: 'var(--brycks-info-default)' },\r\n  },\r\n}\r\n\r\nexport const Badge = forwardRef<HTMLSpanElement, BadgeProps>(function Badge(\r\n  {\r\n    variant = 'subtle',\r\n    intent = 'neutral',\r\n    size = 'md',\r\n    className,\r\n    style,\r\n    testId,\r\n    children,\r\n    ...props\r\n  },\r\n  ref\r\n) {\r\n  const sizeValue = sizeStyles[size]\r\n  const colorValue = intentColors[intent][variant]\r\n\r\n  const badgeStyle: CSSProperties = {\r\n    display: 'inline-flex',\r\n    alignItems: 'center',\r\n    justifyContent: 'center',\r\n    fontWeight: 500,\r\n    fontFamily: 'var(--brycks-font-sans)',\r\n    lineHeight: 1,\r\n    borderRadius: 'var(--brycks-radius-full)',\r\n    whiteSpace: 'nowrap',\r\n    border: variant === 'outline' ? '1px solid' : 'none',\r\n    ...sizeValue,\r\n    ...colorValue,\r\n    ...style,\r\n  }\r\n\r\n  return (\r\n    <span\r\n      ref={ref}\r\n      className={cx(\r\n        'brycks-badge',\r\n        `brycks-badge--${variant}`,\r\n        `brycks-badge--${intent}`,\r\n        `brycks-badge--${size}`,\r\n        className\r\n      )}\r\n      style={badgeStyle}\r\n      data-testid={testId}\r\n      {...props}\r\n    >\r\n      {children}\r\n    </span>\r\n  )\r\n})\r\n\r\nBadge.displayName = 'Badge'\r\n"],"names":["sizeStyles","fontSizes","spacing","componentPaddingY","componentPaddingX","intentColors","Badge","forwardRef","variant","intent","size","className","style","testId","children","props","ref","sizeValue","colorValue","badgeStyle","jsx","cx"],"mappings":"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"}
+{"version":3,"file":"Badge.cjs","sources":["../../../../src/components/utility/Badge/Badge.tsx"],"sourcesContent":["/**\r\n * Badge Component\r\n *\r\n * Small label for status, counts, or categorization.\r\n * Clean, minimal design with subtle color coding.\r\n *\r\n * All color styles are handled via CSS classes for easy customization.\r\n */\r\n\r\nimport {\r\n  forwardRef,\r\n  type ReactNode,\r\n  type HTMLAttributes,\r\n} from 'react'\r\nimport { cx } from '../../../utils/styles'\r\n\r\nexport type BadgeVariant = 'solid' | 'subtle' | 'outline'\r\nexport type BadgeIntent = 'neutral' | 'primary' | 'accent' | 'success' | 'warning' | 'error' | 'info'\r\nexport type BadgeSize = 'sm' | 'md' | 'lg'\r\n\r\nexport interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {\r\n  /** Visual variant */\r\n  variant?: BadgeVariant\r\n  /** Color intent */\r\n  intent?: BadgeIntent\r\n  /** Size */\r\n  size?: BadgeSize\r\n  /** Custom class name */\r\n  className?: string\r\n  /** Test ID */\r\n  testId?: string\r\n  /** Badge content */\r\n  children?: ReactNode\r\n}\r\n\r\nexport const Badge = forwardRef<HTMLSpanElement, BadgeProps>(function Badge(\r\n  {\r\n    variant = 'subtle',\r\n    intent = 'neutral',\r\n    size = 'md',\r\n    className,\r\n    style,\r\n    testId,\r\n    children,\r\n    ...props\r\n  },\r\n  ref\r\n) {\r\n  return (\r\n    <span\r\n      ref={ref}\r\n      className={cx(\r\n        'brycks-badge',\r\n        `brycks-badge--${variant}`,\r\n        `brycks-badge--${intent}`,\r\n        `brycks-badge--${size}`,\r\n        className\r\n      )}\r\n      style={style}\r\n      data-testid={testId}\r\n      {...props}\r\n    >\r\n      {children}\r\n    </span>\r\n  )\r\n})\r\n\r\nBadge.displayName = 'Badge'\r\n"],"names":["Badge","forwardRef","variant","intent","size","className","style","testId","children","props","ref","jsx","cx"],"mappings":"+KAmCaA,EAAQC,EAAAA,WAAwC,SAC3D,CACE,QAAAC,EAAU,SACV,OAAAC,EAAS,UACT,KAAAC,EAAO,KACP,UAAAC,EACA,MAAAC,EACA,OAAAC,EACA,SAAAC,EACA,GAAGC,CACL,EACAC,EACA,CACA,OACEC,EAAAA,IAAC,OAAA,CACC,IAAAD,EACA,UAAWE,EAAAA,GACT,eACA,iBAAiBV,CAAO,GACxB,iBAAiBC,CAAM,GACvB,iBAAiBC,CAAI,GACrBC,CAAA,EAEF,MAAAC,EACA,cAAaC,EACZ,GAAGE,EAEH,SAAAD,CAAA,CAAA,CAGP,CAAC,EAEDR,EAAM,YAAc"}

package/dist/components/utility/Badge/Badge.js

@@ -1,93 +1,36 @@
-import { jsx as g } from "react/jsx-runtime";
-import { forwardRef as f } from "react";
-import { cx as v } from "../../../utils/styles.js";
-import { spacing as r } from "../../../design-system/tokens/spacing.js";
-import { componentPaddingY as n, componentPaddingX as m } from "../../../design-system/primitives/sizing.js";
-import { fontSizes as a } from "../../../design-system/tokens/typography.js";
-const p = {
-  sm: { fontSize: a.xs - 1, padding: `${r[0.5]}px ${n.sm}px`, height: r[4] + r[0.5] },
-  md: { fontSize: a.xs, padding: `${r[0.5] + 1}px ${m.xs}px`, height: r[5] + r[0.5] },
-  lg: { fontSize: a.sm, padding: `${r[1]}px ${n.lg}px`, height: r[6] + r[0.5] }
-}, C = {
-  neutral: {
-    solid: { backgroundColor: "var(--brycks-foreground-default)", color: "var(--brycks-background-app)" },
-    subtle: { backgroundColor: "var(--brycks-background-muted)", color: "var(--brycks-foreground-default)" },
-    outline: { backgroundColor: "transparent", color: "var(--brycks-foreground-default)", borderColor: "var(--brycks-border-default)" }
-  },
-  primary: {
-    solid: { backgroundColor: "var(--brycks-primary-default)", color: "var(--brycks-primary-foreground)" },
-    subtle: { backgroundColor: "var(--brycks-primary-muted)", color: "var(--brycks-primary-hover)" },
-    outline: { backgroundColor: "transparent", color: "var(--brycks-primary-default)", borderColor: "var(--brycks-primary-default)" }
-  },
-  accent: {
-    solid: { backgroundColor: "var(--brycks-accent-default)", color: "var(--brycks-accent-foreground)" },
-    subtle: { backgroundColor: "var(--brycks-accent-muted)", color: "var(--brycks-accent-hover)" },
-    outline: { backgroundColor: "transparent", color: "var(--brycks-accent-default)", borderColor: "var(--brycks-accent-default)" }
-  },
-  success: {
-    solid: { backgroundColor: "var(--brycks-success-default)", color: "var(--brycks-success-foreground)" },
-    subtle: { backgroundColor: "var(--brycks-success-muted)", color: "var(--brycks-success-on-muted)" },
-    outline: { backgroundColor: "transparent", color: "var(--brycks-success-default)", borderColor: "var(--brycks-success-default)" }
-  },
-  warning: {
-    solid: { backgroundColor: "var(--brycks-warning-default)", color: "var(--brycks-warning-foreground)" },
-    subtle: { backgroundColor: "var(--brycks-warning-muted)", color: "var(--brycks-warning-on-muted)" },
-    outline: { backgroundColor: "transparent", color: "var(--brycks-warning-default)", borderColor: "var(--brycks-warning-default)" }
-  },
-  error: {
-    solid: { backgroundColor: "var(--brycks-error-default)", color: "var(--brycks-error-foreground)" },
-    subtle: { backgroundColor: "var(--brycks-error-muted)", color: "var(--brycks-error-on-muted)" },
-    outline: { backgroundColor: "transparent", color: "var(--brycks-error-default)", borderColor: "var(--brycks-error-default)" }
-  },
-  info: {
-    solid: { backgroundColor: "var(--brycks-info-default)", color: "var(--brycks-info-foreground)" },
-    subtle: { backgroundColor: "var(--brycks-info-muted)", color: "var(--brycks-info-on-muted)" },
-    outline: { backgroundColor: "transparent", color: "var(--brycks-info-default)", borderColor: "var(--brycks-info-default)" }
-  }
-}, x = f(function({
-  variant: o = "subtle",
-  intent: e = "neutral",
-  size: c = "md",
-  className: s,
-  style: l,
+import { jsx as c } from "react/jsx-runtime";
+import { forwardRef as g } from "react";
+import { cx as f } from "../../../utils/styles.js";
+const i = g(function({
+  variant: a = "subtle",
+  intent: r = "neutral",
+  size: e = "md",
+  className: d,
+  style: s,
   testId: t,
-  children: d,
-  ...u
-}, b) {
-  const k = p[c], i = C[e][o], y = {
-    display: "inline-flex",
-    alignItems: "center",
-    justifyContent: "center",
-    fontWeight: 500,
-    fontFamily: "var(--brycks-font-sans)",
-    lineHeight: 1,
-    borderRadius: "var(--brycks-radius-full)",
-    whiteSpace: "nowrap",
-    border: o === "outline" ? "1px solid" : "none",
-    ...k,
-    ...i,
-    ...l
-  };
-  return /* @__PURE__ */ g(
+  children: o,
+  ...b
+}, m) {
+  return /* @__PURE__ */ c(
     "span",
     {
-      ref: b,
-      className: v(
+      ref: m,
+      className: f(
         "brycks-badge",
-        `brycks-badge--${o}`,
+        `brycks-badge--${a}`,
+        `brycks-badge--${r}`,
         `brycks-badge--${e}`,
-        `brycks-badge--${c}`,
-        s
+        d
       ),
-      style: y,
+      style: s,
       "data-testid": t,
-      ...u,
-      children: d
+      ...b,
+      children: o
     }
   );
 });
-x.displayName = "Badge";
+i.displayName = "Badge";
 export {
-  x as Badge
+  i as Badge
 };
 //# sourceMappingURL=Badge.js.map

package/dist/components/utility/Badge/Badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.js","sources":["../../../../src/components/utility/Badge/Badge.tsx"],"sourcesContent":["/**\r\n * Badge Component\r\n *\r\n * Small label for status, counts, or categorization.\r\n * Clean, minimal design with subtle color coding.\r\n */\r\n\r\nimport {\r\n  forwardRef,\r\n  type CSSProperties,\r\n  type ReactNode,\r\n  type HTMLAttributes,\r\n} from 'react'\r\nimport { cx } from '../../../utils/styles'\r\nimport { spacing, fontSizes } from '../../../design-system'\r\nimport { componentPaddingX, componentPaddingY } from '../../../design-system/primitives'\r\n\r\nexport type BadgeVariant = 'solid' | 'subtle' | 'outline'\r\nexport type BadgeIntent = 'neutral' | 'primary' | 'accent' | 'success' | 'warning' | 'error' | 'info'\r\nexport type BadgeSize = 'sm' | 'md' | 'lg'\r\n\r\nexport interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {\r\n  /** Visual variant */\r\n  variant?: BadgeVariant\r\n  /** Color intent */\r\n  intent?: BadgeIntent\r\n  /** Size */\r\n  size?: BadgeSize\r\n  /** Custom class name */\r\n  className?: string\r\n  /** Test ID */\r\n  testId?: string\r\n  /** Badge content */\r\n  children?: ReactNode\r\n}\r\n\r\nconst sizeStyles: Record<BadgeSize, CSSProperties> = {\r\n  sm: { fontSize: fontSizes.xs - 1, padding: `${spacing[0.5]}px ${componentPaddingY.sm}px`, height: spacing[4] + spacing[0.5] },\r\n  md: { fontSize: fontSizes.xs, padding: `${spacing[0.5] + 1}px ${componentPaddingX.xs}px`, height: spacing[5] + spacing[0.5] },\r\n  lg: { fontSize: fontSizes.sm, padding: `${spacing[1]}px ${componentPaddingY.lg}px`, height: spacing[6] + spacing[0.5] },\r\n}\r\n\r\nconst intentColors: Record<BadgeIntent, Record<BadgeVariant, CSSProperties>> = {\r\n  neutral: {\r\n    solid: { backgroundColor: 'var(--brycks-foreground-default)', color: 'var(--brycks-background-app)' },\r\n    subtle: { backgroundColor: 'var(--brycks-background-muted)', color: 'var(--brycks-foreground-default)' },\r\n    outline: { backgroundColor: 'transparent', color: 'var(--brycks-foreground-default)', borderColor: 'var(--brycks-border-default)' },\r\n  },\r\n  primary: {\r\n    solid: { backgroundColor: 'var(--brycks-primary-default)', color: 'var(--brycks-primary-foreground)' },\r\n    subtle: { backgroundColor: 'var(--brycks-primary-muted)', color: 'var(--brycks-primary-hover)' },\r\n    outline: { backgroundColor: 'transparent', color: 'var(--brycks-primary-default)', borderColor: 'var(--brycks-primary-default)' },\r\n  },\r\n  accent: {\r\n    solid: { backgroundColor: 'var(--brycks-accent-default)', color: 'var(--brycks-accent-foreground)' },\r\n    subtle: { backgroundColor: 'var(--brycks-accent-muted)', color: 'var(--brycks-accent-hover)' },\r\n    outline: { backgroundColor: 'transparent', color: 'var(--brycks-accent-default)', borderColor: 'var(--brycks-accent-default)' },\r\n  },\r\n  success: {\r\n    solid: { backgroundColor: 'var(--brycks-success-default)', color: 'var(--brycks-success-foreground)' },\r\n    subtle: { backgroundColor: 'var(--brycks-success-muted)', color: 'var(--brycks-success-on-muted)' },\r\n    outline: { backgroundColor: 'transparent', color: 'var(--brycks-success-default)', borderColor: 'var(--brycks-success-default)' },\r\n  },\r\n  warning: {\r\n    solid: { backgroundColor: 'var(--brycks-warning-default)', color: 'var(--brycks-warning-foreground)' },\r\n    subtle: { backgroundColor: 'var(--brycks-warning-muted)', color: 'var(--brycks-warning-on-muted)' },\r\n    outline: { backgroundColor: 'transparent', color: 'var(--brycks-warning-default)', borderColor: 'var(--brycks-warning-default)' },\r\n  },\r\n  error: {\r\n    solid: { backgroundColor: 'var(--brycks-error-default)', color: 'var(--brycks-error-foreground)' },\r\n    subtle: { backgroundColor: 'var(--brycks-error-muted)', color: 'var(--brycks-error-on-muted)' },\r\n    outline: { backgroundColor: 'transparent', color: 'var(--brycks-error-default)', borderColor: 'var(--brycks-error-default)' },\r\n  },\r\n  info: {\r\n    solid: { backgroundColor: 'var(--brycks-info-default)', color: 'var(--brycks-info-foreground)' },\r\n    subtle: { backgroundColor: 'var(--brycks-info-muted)', color: 'var(--brycks-info-on-muted)' },\r\n    outline: { backgroundColor: 'transparent', color: 'var(--brycks-info-default)', borderColor: 'var(--brycks-info-default)' },\r\n  },\r\n}\r\n\r\nexport const Badge = forwardRef<HTMLSpanElement, BadgeProps>(function Badge(\r\n  {\r\n    variant = 'subtle',\r\n    intent = 'neutral',\r\n    size = 'md',\r\n    className,\r\n    style,\r\n    testId,\r\n    children,\r\n    ...props\r\n  },\r\n  ref\r\n) {\r\n  const sizeValue = sizeStyles[size]\r\n  const colorValue = intentColors[intent][variant]\r\n\r\n  const badgeStyle: CSSProperties = {\r\n    display: 'inline-flex',\r\n    alignItems: 'center',\r\n    justifyContent: 'center',\r\n    fontWeight: 500,\r\n    fontFamily: 'var(--brycks-font-sans)',\r\n    lineHeight: 1,\r\n    borderRadius: 'var(--brycks-radius-full)',\r\n    whiteSpace: 'nowrap',\r\n    border: variant === 'outline' ? '1px solid' : 'none',\r\n    ...sizeValue,\r\n    ...colorValue,\r\n    ...style,\r\n  }\r\n\r\n  return (\r\n    <span\r\n      ref={ref}\r\n      className={cx(\r\n        'brycks-badge',\r\n        `brycks-badge--${variant}`,\r\n        `brycks-badge--${intent}`,\r\n        `brycks-badge--${size}`,\r\n        className\r\n      )}\r\n      style={badgeStyle}\r\n      data-testid={testId}\r\n      {...props}\r\n    >\r\n      {children}\r\n    </span>\r\n  )\r\n})\r\n\r\nBadge.displayName = 'Badge'\r\n"],"names":["sizeStyles","fontSizes","spacing","componentPaddingY","componentPaddingX","intentColors","Badge","forwardRef","variant","intent","size","className","style","testId","children","props","ref","sizeValue","colorValue","badgeStyle","jsx","cx"],"mappings":"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"}
+{"version":3,"file":"Badge.js","sources":["../../../../src/components/utility/Badge/Badge.tsx"],"sourcesContent":["/**\r\n * Badge Component\r\n *\r\n * Small label for status, counts, or categorization.\r\n * Clean, minimal design with subtle color coding.\r\n *\r\n * All color styles are handled via CSS classes for easy customization.\r\n */\r\n\r\nimport {\r\n  forwardRef,\r\n  type ReactNode,\r\n  type HTMLAttributes,\r\n} from 'react'\r\nimport { cx } from '../../../utils/styles'\r\n\r\nexport type BadgeVariant = 'solid' | 'subtle' | 'outline'\r\nexport type BadgeIntent = 'neutral' | 'primary' | 'accent' | 'success' | 'warning' | 'error' | 'info'\r\nexport type BadgeSize = 'sm' | 'md' | 'lg'\r\n\r\nexport interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {\r\n  /** Visual variant */\r\n  variant?: BadgeVariant\r\n  /** Color intent */\r\n  intent?: BadgeIntent\r\n  /** Size */\r\n  size?: BadgeSize\r\n  /** Custom class name */\r\n  className?: string\r\n  /** Test ID */\r\n  testId?: string\r\n  /** Badge content */\r\n  children?: ReactNode\r\n}\r\n\r\nexport const Badge = forwardRef<HTMLSpanElement, BadgeProps>(function Badge(\r\n  {\r\n    variant = 'subtle',\r\n    intent = 'neutral',\r\n    size = 'md',\r\n    className,\r\n    style,\r\n    testId,\r\n    children,\r\n    ...props\r\n  },\r\n  ref\r\n) {\r\n  return (\r\n    <span\r\n      ref={ref}\r\n      className={cx(\r\n        'brycks-badge',\r\n        `brycks-badge--${variant}`,\r\n        `brycks-badge--${intent}`,\r\n        `brycks-badge--${size}`,\r\n        className\r\n      )}\r\n      style={style}\r\n      data-testid={testId}\r\n      {...props}\r\n    >\r\n      {children}\r\n    </span>\r\n  )\r\n})\r\n\r\nBadge.displayName = 'Badge'\r\n"],"names":["Badge","forwardRef","variant","intent","size","className","style","testId","children","props","ref","jsx","cx"],"mappings":";;;AAmCO,MAAMA,IAAQC,EAAwC,SAC3D;AAAA,EACE,SAAAC,IAAU;AAAA,EACV,QAAAC,IAAS;AAAA,EACT,MAAAC,IAAO;AAAA,EACP,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,QAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AACA,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAD;AAAA,MACA,WAAWE;AAAA,QACT;AAAA,QACA,iBAAiBV,CAAO;AAAA,QACxB,iBAAiBC,CAAM;AAAA,QACvB,iBAAiBC,CAAI;AAAA,QACrBC;AAAA,MAAA;AAAA,MAEF,OAAAC;AAAA,MACA,eAAaC;AAAA,MACZ,GAAGE;AAAA,MAEH,UAAAD;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;AAEDR,EAAM,cAAc;"}

package/dist/feedback.d.ts

@@ -95,7 +95,7 @@ export declare interface ModalProps extends Omit<HTMLAttributes<HTMLDivElement>,
     children?: ReactNode;
 }
 
-export declare type ModalSize = 'sm' | 'md' | 'lg' | 'xl' | 'full';
+export declare type ModalSize = 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full';
 
 export declare const Popover: default_2.ForwardRefExoticComponent<PopoverProps & default_2.RefAttributes<HTMLDivElement>>;
 

package/dist/index.d.ts

@@ -2526,7 +2526,7 @@ export declare interface ModalProps extends Omit<HTMLAttributes<HTMLDivElement>,
     children?: ReactNode;
 }
 
-export declare type ModalSize = 'sm' | 'md' | 'lg' | 'xl' | 'full';
+export declare type ModalSize = 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full';
 
 /**
  * Modal/dialog width presets.