@fanvue/ui 1.12.2 → 1.13.0

package/dist/cjs/components/Count/Count.cjs

@@ -49,7 +49,8 @@ const Count = React__namespace.forwardRef(
           size === "16" && "h-3 min-w-3 px-0.5 text-[8px]",
           size === "24" && "h-4 min-w-4 px-1 text-[10px]",
           size === "32" && "h-5 min-w-5 px-1.5 text-[12px]",
-          variant === "default" && "bg-error-500 text-body-white-solid-constant",
+          variant === "default" && "bg-body-100 text-body-300",
+          variant === "alert" && "bg-error-500 text-body-white-solid-constant",
           variant === "brand" && "bg-brand-green-500 text-body-black-solid-constant",
           variant === "pink" && "bg-brand-pink-500 text-body-black-solid-constant",
           variant === "info" && "bg-info-500 text-body-white-solid-constant",

package/dist/cjs/components/Count/Count.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Count.cjs","sources":["../../../../src/components/Count/Count.tsx"],"sourcesContent":["import { Slot } from \"@radix-ui/react-slot\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\n/** Colour variant for the count badge. */\nexport type CountVariant = \"default\" | \"brand\" | \"pink\" | \"info\" | \"success\" | \"warning\";\n\n/** Size of the count badge, aligned with button and icon-button sizes. */\nexport type CountSize = \"16\" | \"24\" | \"32\";\n\nfunction getDisplayValue(value: number, max: number): string {\n  return value > max ? `${max}+` : value.toString();\n}\n\nexport interface CountProps extends React.HTMLAttributes<HTMLSpanElement> {\n  /** Colour variant of the count badge. @default \"default\" */\n  variant?: CountVariant;\n  /** Numeric value to display. Renders nothing when `0` and no `children` are provided. @default 0 */\n  value?: number;\n  /** Maximum value before showing overflow (e.g. `\"99+\"`). @default 99 */\n  max?: number;\n  /** Size of the count badge. @default \"32\" */\n  size?: CountSize;\n  /** Merge props onto a child element instead of rendering a `<span>`. @default false */\n  asChild?: boolean;\n}\n\n/**\n * A numeric badge typically used for notification counts. Automatically\n * truncates values above `max` (e.g. `\"99+\"`). Renders nothing when the\n * value is `0` and no children are provided.\n *\n * @example\n * ```tsx\n * <Count value={5} variant=\"brand\" />\n * ```\n */\nexport const Count = React.forwardRef<HTMLSpanElement, CountProps>(\n  (\n    {\n      className,\n      variant = \"default\",\n      value = 0,\n      max = 99,\n      size = \"32\",\n      asChild = false,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    if (value === 0 && !children) {\n      return null;\n    }\n\n    const Comp = asChild ? Slot : \"span\";\n\n    return (\n      <Comp\n        ref={ref}\n        className={cn(\n          \"typography-caption-semibold inline-flex shrink-0 items-center justify-center rounded-full tabular-nums leading-none\",\n          size === \"16\" && \"h-3 min-w-3 px-0.5 text-[8px]\",\n          size === \"24\" && \"h-4 min-w-4 px-1 text-[10px]\",\n          size === \"32\" && \"h-5 min-w-5 px-1.5 text-[12px]\",\n          variant === \"default\" && \"bg-error-500 text-body-white-solid-constant\",\n          variant === \"brand\" && \"bg-brand-green-500 text-body-black-solid-constant\",\n          variant === \"pink\" && \"bg-brand-pink-500 text-body-black-solid-constant\",\n          variant === \"info\" && \"bg-info-500 text-body-white-solid-constant\",\n          variant === \"success\" && \"bg-success-500 text-body-white-solid-constant\",\n          variant === \"warning\" && \"bg-warning-500 text-body-black-solid-constant\",\n          className,\n        )}\n        {...props}\n      >\n        {children ?? getDisplayValue(value, max)}\n      </Comp>\n    );\n  },\n);\n\nCount.displayName = \"Count\";\n"],"names":["React","Slot","jsx","cn"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAUA,SAAS,gBAAgB,OAAe,KAAqB;AAC3D,SAAO,QAAQ,MAAM,GAAG,GAAG,MAAM,MAAM,SAAA;AACzC;AAyBO,MAAM,QAAQA,iBAAM;AAAA,EACzB,CACE;AAAA,IACE;AAAA,IACA,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,OAAO;AAAA,IACP,UAAU;AAAA,IACV;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,QACG;AACH,QAAI,UAAU,KAAK,CAAC,UAAU;AAC5B,aAAO;AAAA,IACT;AAEA,UAAM,OAAO,UAAUC,UAAAA,OAAO;AAE9B,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAWC,GAAAA;AAAAA,UACT;AAAA,UACA,SAAS,QAAQ;AAAA,UACjB,SAAS,QAAQ;AAAA,UACjB,SAAS,QAAQ;AAAA,UACjB,YAAY,aAAa;AAAA,UACzB,YAAY,WAAW;AAAA,UACvB,YAAY,UAAU;AAAA,UACtB,YAAY,UAAU;AAAA,UACtB,YAAY,aAAa;AAAA,UACzB,YAAY,aAAa;AAAA,UACzB;AAAA,QAAA;AAAA,QAED,GAAG;AAAA,QAEH,UAAA,YAAY,gBAAgB,OAAO,GAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EAG7C;AACF;AAEA,MAAM,cAAc;;"}
+{"version":3,"file":"Count.cjs","sources":["../../../../src/components/Count/Count.tsx"],"sourcesContent":["import { Slot } from \"@radix-ui/react-slot\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\n/** Colour variant for the count badge. */\nexport type CountVariant = \"default\" | \"alert\" | \"brand\" | \"pink\" | \"info\" | \"success\" | \"warning\";\n\n/** Size of the count badge, aligned with button and icon-button sizes. */\nexport type CountSize = \"16\" | \"24\" | \"32\";\n\nfunction getDisplayValue(value: number, max: number): string {\n  return value > max ? `${max}+` : value.toString();\n}\n\nexport interface CountProps extends React.HTMLAttributes<HTMLSpanElement> {\n  /** Colour variant of the count badge. @default \"default\" */\n  variant?: CountVariant;\n  /** Numeric value to display. Renders nothing when `0` and no `children` are provided. @default 0 */\n  value?: number;\n  /** Maximum value before showing overflow (e.g. `\"99+\"`). @default 99 */\n  max?: number;\n  /** Size of the count badge. @default \"32\" */\n  size?: CountSize;\n  /** Merge props onto a child element instead of rendering a `<span>`. @default false */\n  asChild?: boolean;\n}\n\n/**\n * A numeric badge typically used for notification counts. Automatically\n * truncates values above `max` (e.g. `\"99+\"`). Renders nothing when the\n * value is `0` and no children are provided.\n *\n * @example\n * ```tsx\n * <Count value={5} variant=\"brand\" />\n * ```\n */\nexport const Count = React.forwardRef<HTMLSpanElement, CountProps>(\n  (\n    {\n      className,\n      variant = \"default\",\n      value = 0,\n      max = 99,\n      size = \"32\",\n      asChild = false,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    if (value === 0 && !children) {\n      return null;\n    }\n\n    const Comp = asChild ? Slot : \"span\";\n\n    return (\n      <Comp\n        ref={ref}\n        className={cn(\n          \"typography-caption-semibold inline-flex shrink-0 items-center justify-center rounded-full tabular-nums leading-none\",\n          size === \"16\" && \"h-3 min-w-3 px-0.5 text-[8px]\",\n          size === \"24\" && \"h-4 min-w-4 px-1 text-[10px]\",\n          size === \"32\" && \"h-5 min-w-5 px-1.5 text-[12px]\",\n          variant === \"default\" && \"bg-body-100 text-body-300\",\n          variant === \"alert\" && \"bg-error-500 text-body-white-solid-constant\",\n          variant === \"brand\" && \"bg-brand-green-500 text-body-black-solid-constant\",\n          variant === \"pink\" && \"bg-brand-pink-500 text-body-black-solid-constant\",\n          variant === \"info\" && \"bg-info-500 text-body-white-solid-constant\",\n          variant === \"success\" && \"bg-success-500 text-body-white-solid-constant\",\n          variant === \"warning\" && \"bg-warning-500 text-body-black-solid-constant\",\n          className,\n        )}\n        {...props}\n      >\n        {children ?? getDisplayValue(value, max)}\n      </Comp>\n    );\n  },\n);\n\nCount.displayName = \"Count\";\n"],"names":["React","Slot","jsx","cn"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAUA,SAAS,gBAAgB,OAAe,KAAqB;AAC3D,SAAO,QAAQ,MAAM,GAAG,GAAG,MAAM,MAAM,SAAA;AACzC;AAyBO,MAAM,QAAQA,iBAAM;AAAA,EACzB,CACE;AAAA,IACE;AAAA,IACA,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,OAAO;AAAA,IACP,UAAU;AAAA,IACV;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,QACG;AACH,QAAI,UAAU,KAAK,CAAC,UAAU;AAC5B,aAAO;AAAA,IACT;AAEA,UAAM,OAAO,UAAUC,UAAAA,OAAO;AAE9B,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAWC,GAAAA;AAAAA,UACT;AAAA,UACA,SAAS,QAAQ;AAAA,UACjB,SAAS,QAAQ;AAAA,UACjB,SAAS,QAAQ;AAAA,UACjB,YAAY,aAAa;AAAA,UACzB,YAAY,WAAW;AAAA,UACvB,YAAY,WAAW;AAAA,UACvB,YAAY,UAAU;AAAA,UACtB,YAAY,UAAU;AAAA,UACtB,YAAY,aAAa;AAAA,UACzB,YAAY,aAAa;AAAA,UACzB;AAAA,QAAA;AAAA,QAED,GAAG;AAAA,QAEH,UAAA,YAAY,gBAAgB,OAAO,GAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EAG7C;AACF;AAEA,MAAM,cAAc;;"}

package/dist/cjs/components/IconButton/IconButton.cjs

@@ -96,6 +96,7 @@ const IconButton = React__namespace.forwardRef(
             Count.Count,
             {
               value: counterValue,
+              variant: "alert",
               size: countSizeMap[size],
               className: "absolute -top-0.5 -right-0.5"
             }

package/dist/cjs/components/IconButton/IconButton.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"IconButton.cjs","sources":["../../../../src/components/IconButton/IconButton.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { Count, type CountSize } from \"../Count/Count\";\n\nconst iconButtonVariants = {\n  primary:\n    \"bg-neutral-400 text-body-300 hover:bg-hover-100 not-disabled:active:bg-hover-100 disabled:opacity-50 focus-visible:shadow-focus-ring\",\n  secondary:\n    \"bg-neutral-100 text-neutral-400 hover:bg-neutral-200 not-disabled:active:bg-neutral-200 disabled:opacity-50 focus-visible:shadow-focus-ring\",\n  tertiary:\n    \"bg-transparent text-neutral-400 hover:bg-hover-300 not-disabled:active:bg-brand-green-50 disabled:opacity-50 focus-visible:shadow-focus-ring\",\n  brand:\n    \"bg-body-black-solid-constant text-brand-green-500 hover:bg-brand-green-500 hover:text-body-black-solid-constant not-disabled:active:bg-brand-green-500 not-disabled:active:text-body-black-solid-constant disabled:opacity-50 focus-visible:shadow-focus-ring\",\n  contrast:\n    \"bg-transparent text-body-white-solid-constant hover:bg-hover-300 not-disabled:active:bg-hover-300 disabled:opacity-50 focus-visible:shadow-focus-ring\",\n  messaging:\n    \"bg-body-black-solid-constant text-brand-green-500 hover:bg-brand-green-500 hover:text-body-black-solid-constant not-disabled:active:bg-brand-green-500 not-disabled:active:text-body-black-solid-constant disabled:opacity-50 focus-visible:shadow-focus-ring\",\n  navTray:\n    \"bg-transparent text-neutral-400 hover:bg-hover-300 not-disabled:active:bg-brand-green-50 disabled:opacity-50 focus-visible:shadow-focus-ring\",\n  tertiaryDestructive:\n    \"bg-transparent text-error-500 hover:bg-hover-300 not-disabled:active:bg-hover-300 disabled:opacity-50 focus-visible:shadow-focus-ring\",\n  stop: \"bg-neutral-400 text-body-300 hover:bg-brand-green-500 hover:text-body-black-solid-constant not-disabled:active:bg-brand-green-500 not-disabled:active:text-body-black-solid-constant disabled:opacity-50 focus-visible:shadow-focus-ring\",\n  microphone:\n    \"bg-neutral-400 text-body-300 hover:bg-brand-green-500 hover:text-body-black-solid-constant not-disabled:active:bg-brand-green-500 not-disabled:active:text-body-black-solid-constant disabled:opacity-50 focus-visible:shadow-focus-ring\",\n};\n\nconst iconSizeVariants = {\n  24: \"[&>svg]:size-4\",\n  32: \"[&>svg]:size-5\",\n  40: \"[&>svg]:size-6\",\n  52: \"[&>svg]:size-7\",\n  72: \"[&>svg]:size-8\",\n} as const;\n\nconst sizeVariants = {\n  24: \"size-6 p-1\",\n  32: \"size-8 p-1.5\",\n  40: \"size-10 p-[10px]\",\n  52: \"size-[52px] p-2\",\n  72: \"size-[72px] p-4\",\n} as const;\n\nconst countSizeMap: Record<string, CountSize> = {\n  24: \"16\",\n  32: \"24\",\n  40: \"32\",\n  52: \"32\",\n  72: \"32\",\n};\n\n/** Visual style variant of the icon button. */\nexport type IconButtonVariant =\n  | \"primary\"\n  | \"secondary\"\n  | \"tertiary\"\n  | \"brand\"\n  | \"contrast\"\n  | \"messaging\"\n  | \"navTray\"\n  | \"tertiaryDestructive\"\n  | \"stop\"\n  | \"microphone\";\n\n/** Icon button size in pixels. */\nexport type IconButtonSize = \"24\" | \"32\" | \"40\" | \"52\" | \"72\";\n\nexport interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Visual style variant of the icon button. @default \"primary\" */\n  variant?: IconButtonVariant;\n  /** Size of the button in pixels. @default \"40\" */\n  size?: IconButtonSize;\n  /** Icon element to render inside the button. */\n  icon: React.ReactNode;\n  /** When provided, displays a {@link Count} badge at the top-right corner (tertiary & navTray variants only). */\n  counterValue?: number;\n}\n\n/**\n * A circular button containing only an icon. Use when an action can be\n * represented by an icon alone (e.g. close, send, mic). Pair with an\n * `aria-label` for accessibility.\n *\n * @example\n * ```tsx\n * <IconButton icon={<CloseIcon />} aria-label=\"Close\" variant=\"tertiary\" />\n * ```\n */\nexport const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(\n  (\n    { className, variant = \"primary\", size = \"40\", icon, counterValue, disabled = false, ...props },\n    ref,\n  ) => {\n    if (process.env.NODE_ENV !== \"production\") {\n      if (!props[\"aria-label\"] && !props[\"aria-labelledby\"] && !props.title) {\n        console.warn(\n          \"IconButton: No accessible name provided. Add an `aria-label`, `aria-labelledby`, or `title` prop so screen readers can announce this button.\",\n        );\n      }\n    }\n\n    return (\n      <button\n        ref={ref}\n        type=\"button\"\n        data-testid=\"icon-button\"\n        disabled={disabled}\n        className={cn(\n          // Base styles\n          \"relative inline-flex shrink-0 items-center justify-center focus-visible:outline-none\",\n          \"cursor-pointer rounded-full transition-all duration-150 ease-in-out disabled:cursor-default\",\n          // Size variants\n          sizeVariants[size],\n          // Variant styles\n          iconButtonVariants[variant],\n          // Manual CSS overrides\n          className,\n        )}\n        {...props}\n      >\n        <span\n          className={cn(\"flex shrink-0 items-center justify-center\", iconSizeVariants[size])}\n          aria-hidden=\"true\"\n        >\n          {icon}\n        </span>\n\n        {counterValue !== undefined && (\n          <Count\n            value={counterValue}\n            size={countSizeMap[size]}\n            className=\"absolute -top-0.5 -right-0.5\"\n          />\n        )}\n      </button>\n    );\n  },\n);\n\nIconButton.displayName = \"IconButton\";\n"],"names":["React","jsxs","cn","jsx","Count"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAIA,MAAM,qBAAqB;AAAA,EACzB,SACE;AAAA,EACF,WACE;AAAA,EACF,UACE;AAAA,EACF,OACE;AAAA,EACF,UACE;AAAA,EACF,WACE;AAAA,EACF,SACE;AAAA,EACF,qBACE;AAAA,EACF,MAAM;AAAA,EACN,YACE;AACJ;AAEA,MAAM,mBAAmB;AAAA,EACvB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,MAAM,eAAe;AAAA,EACnB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,MAAM,eAA0C;AAAA,EAC9C,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAuCO,MAAM,aAAaA,iBAAM;AAAA,EAC9B,CACE,EAAE,WAAW,UAAU,WAAW,OAAO,MAAM,MAAM,cAAc,WAAW,OAAO,GAAG,MAAA,GACxF,QACG;AACH,QAAI,QAAQ,IAAI,aAAa,cAAc;AACzC,UAAI,CAAC,MAAM,YAAY,KAAK,CAAC,MAAM,iBAAiB,KAAK,CAAC,MAAM,OAAO;AACrE,gBAAQ;AAAA,UACN;AAAA,QAAA;AAAA,MAEJ;AAAA,IACF;AAEA,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,MAAK;AAAA,QACL,eAAY;AAAA,QACZ;AAAA,QACA,WAAWC,GAAAA;AAAAA;AAAAA,UAET;AAAA,UACA;AAAA;AAAA,UAEA,aAAa,IAAI;AAAA;AAAA,UAEjB,mBAAmB,OAAO;AAAA;AAAA,UAE1B;AAAA,QAAA;AAAA,QAED,GAAG;AAAA,QAEJ,UAAA;AAAA,UAAAC,2BAAAA;AAAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWD,GAAAA,GAAG,6CAA6C,iBAAiB,IAAI,CAAC;AAAA,cACjF,eAAY;AAAA,cAEX,UAAA;AAAA,YAAA;AAAA,UAAA;AAAA,UAGF,iBAAiB,UAChBC,2BAAAA;AAAAA,YAACC,MAAAA;AAAAA,YAAA;AAAA,cACC,OAAO;AAAA,cACP,MAAM,aAAa,IAAI;AAAA,cACvB,WAAU;AAAA,YAAA;AAAA,UAAA;AAAA,QACZ;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF;AAEA,WAAW,cAAc;;"}
+{"version":3,"file":"IconButton.cjs","sources":["../../../../src/components/IconButton/IconButton.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { Count, type CountSize } from \"../Count/Count\";\n\nconst iconButtonVariants = {\n  primary:\n    \"bg-neutral-400 text-body-300 hover:bg-hover-100 not-disabled:active:bg-hover-100 disabled:opacity-50 focus-visible:shadow-focus-ring\",\n  secondary:\n    \"bg-neutral-100 text-neutral-400 hover:bg-neutral-200 not-disabled:active:bg-neutral-200 disabled:opacity-50 focus-visible:shadow-focus-ring\",\n  tertiary:\n    \"bg-transparent text-neutral-400 hover:bg-hover-300 not-disabled:active:bg-brand-green-50 disabled:opacity-50 focus-visible:shadow-focus-ring\",\n  brand:\n    \"bg-body-black-solid-constant text-brand-green-500 hover:bg-brand-green-500 hover:text-body-black-solid-constant not-disabled:active:bg-brand-green-500 not-disabled:active:text-body-black-solid-constant disabled:opacity-50 focus-visible:shadow-focus-ring\",\n  contrast:\n    \"bg-transparent text-body-white-solid-constant hover:bg-hover-300 not-disabled:active:bg-hover-300 disabled:opacity-50 focus-visible:shadow-focus-ring\",\n  messaging:\n    \"bg-body-black-solid-constant text-brand-green-500 hover:bg-brand-green-500 hover:text-body-black-solid-constant not-disabled:active:bg-brand-green-500 not-disabled:active:text-body-black-solid-constant disabled:opacity-50 focus-visible:shadow-focus-ring\",\n  navTray:\n    \"bg-transparent text-neutral-400 hover:bg-hover-300 not-disabled:active:bg-brand-green-50 disabled:opacity-50 focus-visible:shadow-focus-ring\",\n  tertiaryDestructive:\n    \"bg-transparent text-error-500 hover:bg-hover-300 not-disabled:active:bg-hover-300 disabled:opacity-50 focus-visible:shadow-focus-ring\",\n  stop: \"bg-neutral-400 text-body-300 hover:bg-brand-green-500 hover:text-body-black-solid-constant not-disabled:active:bg-brand-green-500 not-disabled:active:text-body-black-solid-constant disabled:opacity-50 focus-visible:shadow-focus-ring\",\n  microphone:\n    \"bg-neutral-400 text-body-300 hover:bg-brand-green-500 hover:text-body-black-solid-constant not-disabled:active:bg-brand-green-500 not-disabled:active:text-body-black-solid-constant disabled:opacity-50 focus-visible:shadow-focus-ring\",\n};\n\nconst iconSizeVariants = {\n  24: \"[&>svg]:size-4\",\n  32: \"[&>svg]:size-5\",\n  40: \"[&>svg]:size-6\",\n  52: \"[&>svg]:size-7\",\n  72: \"[&>svg]:size-8\",\n} as const;\n\nconst sizeVariants = {\n  24: \"size-6 p-1\",\n  32: \"size-8 p-1.5\",\n  40: \"size-10 p-[10px]\",\n  52: \"size-[52px] p-2\",\n  72: \"size-[72px] p-4\",\n} as const;\n\nconst countSizeMap: Record<string, CountSize> = {\n  24: \"16\",\n  32: \"24\",\n  40: \"32\",\n  52: \"32\",\n  72: \"32\",\n};\n\n/** Visual style variant of the icon button. */\nexport type IconButtonVariant =\n  | \"primary\"\n  | \"secondary\"\n  | \"tertiary\"\n  | \"brand\"\n  | \"contrast\"\n  | \"messaging\"\n  | \"navTray\"\n  | \"tertiaryDestructive\"\n  | \"stop\"\n  | \"microphone\";\n\n/** Icon button size in pixels. */\nexport type IconButtonSize = \"24\" | \"32\" | \"40\" | \"52\" | \"72\";\n\nexport interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Visual style variant of the icon button. @default \"primary\" */\n  variant?: IconButtonVariant;\n  /** Size of the button in pixels. @default \"40\" */\n  size?: IconButtonSize;\n  /** Icon element to render inside the button. */\n  icon: React.ReactNode;\n  /** When provided, displays a {@link Count} badge at the top-right corner (tertiary & navTray variants only). */\n  counterValue?: number;\n}\n\n/**\n * A circular button containing only an icon. Use when an action can be\n * represented by an icon alone (e.g. close, send, mic). Pair with an\n * `aria-label` for accessibility.\n *\n * @example\n * ```tsx\n * <IconButton icon={<CloseIcon />} aria-label=\"Close\" variant=\"tertiary\" />\n * ```\n */\nexport const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(\n  (\n    { className, variant = \"primary\", size = \"40\", icon, counterValue, disabled = false, ...props },\n    ref,\n  ) => {\n    if (process.env.NODE_ENV !== \"production\") {\n      if (!props[\"aria-label\"] && !props[\"aria-labelledby\"] && !props.title) {\n        console.warn(\n          \"IconButton: No accessible name provided. Add an `aria-label`, `aria-labelledby`, or `title` prop so screen readers can announce this button.\",\n        );\n      }\n    }\n\n    return (\n      <button\n        ref={ref}\n        type=\"button\"\n        data-testid=\"icon-button\"\n        disabled={disabled}\n        className={cn(\n          // Base styles\n          \"relative inline-flex shrink-0 items-center justify-center focus-visible:outline-none\",\n          \"cursor-pointer rounded-full transition-all duration-150 ease-in-out disabled:cursor-default\",\n          // Size variants\n          sizeVariants[size],\n          // Variant styles\n          iconButtonVariants[variant],\n          // Manual CSS overrides\n          className,\n        )}\n        {...props}\n      >\n        <span\n          className={cn(\"flex shrink-0 items-center justify-center\", iconSizeVariants[size])}\n          aria-hidden=\"true\"\n        >\n          {icon}\n        </span>\n\n        {counterValue !== undefined && (\n          <Count\n            value={counterValue}\n            variant=\"alert\"\n            size={countSizeMap[size]}\n            className=\"absolute -top-0.5 -right-0.5\"\n          />\n        )}\n      </button>\n    );\n  },\n);\n\nIconButton.displayName = \"IconButton\";\n"],"names":["React","jsxs","cn","jsx","Count"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAIA,MAAM,qBAAqB;AAAA,EACzB,SACE;AAAA,EACF,WACE;AAAA,EACF,UACE;AAAA,EACF,OACE;AAAA,EACF,UACE;AAAA,EACF,WACE;AAAA,EACF,SACE;AAAA,EACF,qBACE;AAAA,EACF,MAAM;AAAA,EACN,YACE;AACJ;AAEA,MAAM,mBAAmB;AAAA,EACvB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,MAAM,eAAe;AAAA,EACnB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,MAAM,eAA0C;AAAA,EAC9C,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAuCO,MAAM,aAAaA,iBAAM;AAAA,EAC9B,CACE,EAAE,WAAW,UAAU,WAAW,OAAO,MAAM,MAAM,cAAc,WAAW,OAAO,GAAG,MAAA,GACxF,QACG;AACH,QAAI,QAAQ,IAAI,aAAa,cAAc;AACzC,UAAI,CAAC,MAAM,YAAY,KAAK,CAAC,MAAM,iBAAiB,KAAK,CAAC,MAAM,OAAO;AACrE,gBAAQ;AAAA,UACN;AAAA,QAAA;AAAA,MAEJ;AAAA,IACF;AAEA,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,MAAK;AAAA,QACL,eAAY;AAAA,QACZ;AAAA,QACA,WAAWC,GAAAA;AAAAA;AAAAA,UAET;AAAA,UACA;AAAA;AAAA,UAEA,aAAa,IAAI;AAAA;AAAA,UAEjB,mBAAmB,OAAO;AAAA;AAAA,UAE1B;AAAA,QAAA;AAAA,QAED,GAAG;AAAA,QAEJ,UAAA;AAAA,UAAAC,2BAAAA;AAAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWD,GAAAA,GAAG,6CAA6C,iBAAiB,IAAI,CAAC;AAAA,cACjF,eAAY;AAAA,cAEX,UAAA;AAAA,YAAA;AAAA,UAAA;AAAA,UAGF,iBAAiB,UAChBC,2BAAAA;AAAAA,YAACC,MAAAA;AAAAA,YAAA;AAAA,cACC,OAAO;AAAA,cACP,SAAQ;AAAA,cACR,MAAM,aAAa,IAAI;AAAA,cACvB,WAAU;AAAA,YAAA;AAAA,UAAA;AAAA,QACZ;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF;AAEA,WAAW,cAAc;;"}

package/dist/components/Count/Count.mjs

@@ -30,7 +30,8 @@ const Count = React.forwardRef(
           size === "16" && "h-3 min-w-3 px-0.5 text-[8px]",
           size === "24" && "h-4 min-w-4 px-1 text-[10px]",
           size === "32" && "h-5 min-w-5 px-1.5 text-[12px]",
-          variant === "default" && "bg-error-500 text-body-white-solid-constant",
+          variant === "default" && "bg-body-100 text-body-300",
+          variant === "alert" && "bg-error-500 text-body-white-solid-constant",
           variant === "brand" && "bg-brand-green-500 text-body-black-solid-constant",
           variant === "pink" && "bg-brand-pink-500 text-body-black-solid-constant",
           variant === "info" && "bg-info-500 text-body-white-solid-constant",

package/dist/components/Count/Count.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Count.mjs","sources":["../../../src/components/Count/Count.tsx"],"sourcesContent":["import { Slot } from \"@radix-ui/react-slot\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\n/** Colour variant for the count badge. */\nexport type CountVariant = \"default\" | \"brand\" | \"pink\" | \"info\" | \"success\" | \"warning\";\n\n/** Size of the count badge, aligned with button and icon-button sizes. */\nexport type CountSize = \"16\" | \"24\" | \"32\";\n\nfunction getDisplayValue(value: number, max: number): string {\n  return value > max ? `${max}+` : value.toString();\n}\n\nexport interface CountProps extends React.HTMLAttributes<HTMLSpanElement> {\n  /** Colour variant of the count badge. @default \"default\" */\n  variant?: CountVariant;\n  /** Numeric value to display. Renders nothing when `0` and no `children` are provided. @default 0 */\n  value?: number;\n  /** Maximum value before showing overflow (e.g. `\"99+\"`). @default 99 */\n  max?: number;\n  /** Size of the count badge. @default \"32\" */\n  size?: CountSize;\n  /** Merge props onto a child element instead of rendering a `<span>`. @default false */\n  asChild?: boolean;\n}\n\n/**\n * A numeric badge typically used for notification counts. Automatically\n * truncates values above `max` (e.g. `\"99+\"`). Renders nothing when the\n * value is `0` and no children are provided.\n *\n * @example\n * ```tsx\n * <Count value={5} variant=\"brand\" />\n * ```\n */\nexport const Count = React.forwardRef<HTMLSpanElement, CountProps>(\n  (\n    {\n      className,\n      variant = \"default\",\n      value = 0,\n      max = 99,\n      size = \"32\",\n      asChild = false,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    if (value === 0 && !children) {\n      return null;\n    }\n\n    const Comp = asChild ? Slot : \"span\";\n\n    return (\n      <Comp\n        ref={ref}\n        className={cn(\n          \"typography-caption-semibold inline-flex shrink-0 items-center justify-center rounded-full tabular-nums leading-none\",\n          size === \"16\" && \"h-3 min-w-3 px-0.5 text-[8px]\",\n          size === \"24\" && \"h-4 min-w-4 px-1 text-[10px]\",\n          size === \"32\" && \"h-5 min-w-5 px-1.5 text-[12px]\",\n          variant === \"default\" && \"bg-error-500 text-body-white-solid-constant\",\n          variant === \"brand\" && \"bg-brand-green-500 text-body-black-solid-constant\",\n          variant === \"pink\" && \"bg-brand-pink-500 text-body-black-solid-constant\",\n          variant === \"info\" && \"bg-info-500 text-body-white-solid-constant\",\n          variant === \"success\" && \"bg-success-500 text-body-white-solid-constant\",\n          variant === \"warning\" && \"bg-warning-500 text-body-black-solid-constant\",\n          className,\n        )}\n        {...props}\n      >\n        {children ?? getDisplayValue(value, max)}\n      </Comp>\n    );\n  },\n);\n\nCount.displayName = \"Count\";\n"],"names":[],"mappings":";;;;;AAUA,SAAS,gBAAgB,OAAe,KAAqB;AAC3D,SAAO,QAAQ,MAAM,GAAG,GAAG,MAAM,MAAM,SAAA;AACzC;AAyBO,MAAM,QAAQ,MAAM;AAAA,EACzB,CACE;AAAA,IACE;AAAA,IACA,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,OAAO;AAAA,IACP,UAAU;AAAA,IACV;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,QACG;AACH,QAAI,UAAU,KAAK,CAAC,UAAU;AAC5B,aAAO;AAAA,IACT;AAEA,UAAM,OAAO,UAAU,OAAO;AAE9B,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAW;AAAA,UACT;AAAA,UACA,SAAS,QAAQ;AAAA,UACjB,SAAS,QAAQ;AAAA,UACjB,SAAS,QAAQ;AAAA,UACjB,YAAY,aAAa;AAAA,UACzB,YAAY,WAAW;AAAA,UACvB,YAAY,UAAU;AAAA,UACtB,YAAY,UAAU;AAAA,UACtB,YAAY,aAAa;AAAA,UACzB,YAAY,aAAa;AAAA,UACzB;AAAA,QAAA;AAAA,QAED,GAAG;AAAA,QAEH,UAAA,YAAY,gBAAgB,OAAO,GAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EAG7C;AACF;AAEA,MAAM,cAAc;"}
+{"version":3,"file":"Count.mjs","sources":["../../../src/components/Count/Count.tsx"],"sourcesContent":["import { Slot } from \"@radix-ui/react-slot\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\n/** Colour variant for the count badge. */\nexport type CountVariant = \"default\" | \"alert\" | \"brand\" | \"pink\" | \"info\" | \"success\" | \"warning\";\n\n/** Size of the count badge, aligned with button and icon-button sizes. */\nexport type CountSize = \"16\" | \"24\" | \"32\";\n\nfunction getDisplayValue(value: number, max: number): string {\n  return value > max ? `${max}+` : value.toString();\n}\n\nexport interface CountProps extends React.HTMLAttributes<HTMLSpanElement> {\n  /** Colour variant of the count badge. @default \"default\" */\n  variant?: CountVariant;\n  /** Numeric value to display. Renders nothing when `0` and no `children` are provided. @default 0 */\n  value?: number;\n  /** Maximum value before showing overflow (e.g. `\"99+\"`). @default 99 */\n  max?: number;\n  /** Size of the count badge. @default \"32\" */\n  size?: CountSize;\n  /** Merge props onto a child element instead of rendering a `<span>`. @default false */\n  asChild?: boolean;\n}\n\n/**\n * A numeric badge typically used for notification counts. Automatically\n * truncates values above `max` (e.g. `\"99+\"`). Renders nothing when the\n * value is `0` and no children are provided.\n *\n * @example\n * ```tsx\n * <Count value={5} variant=\"brand\" />\n * ```\n */\nexport const Count = React.forwardRef<HTMLSpanElement, CountProps>(\n  (\n    {\n      className,\n      variant = \"default\",\n      value = 0,\n      max = 99,\n      size = \"32\",\n      asChild = false,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    if (value === 0 && !children) {\n      return null;\n    }\n\n    const Comp = asChild ? Slot : \"span\";\n\n    return (\n      <Comp\n        ref={ref}\n        className={cn(\n          \"typography-caption-semibold inline-flex shrink-0 items-center justify-center rounded-full tabular-nums leading-none\",\n          size === \"16\" && \"h-3 min-w-3 px-0.5 text-[8px]\",\n          size === \"24\" && \"h-4 min-w-4 px-1 text-[10px]\",\n          size === \"32\" && \"h-5 min-w-5 px-1.5 text-[12px]\",\n          variant === \"default\" && \"bg-body-100 text-body-300\",\n          variant === \"alert\" && \"bg-error-500 text-body-white-solid-constant\",\n          variant === \"brand\" && \"bg-brand-green-500 text-body-black-solid-constant\",\n          variant === \"pink\" && \"bg-brand-pink-500 text-body-black-solid-constant\",\n          variant === \"info\" && \"bg-info-500 text-body-white-solid-constant\",\n          variant === \"success\" && \"bg-success-500 text-body-white-solid-constant\",\n          variant === \"warning\" && \"bg-warning-500 text-body-black-solid-constant\",\n          className,\n        )}\n        {...props}\n      >\n        {children ?? getDisplayValue(value, max)}\n      </Comp>\n    );\n  },\n);\n\nCount.displayName = \"Count\";\n"],"names":[],"mappings":";;;;;AAUA,SAAS,gBAAgB,OAAe,KAAqB;AAC3D,SAAO,QAAQ,MAAM,GAAG,GAAG,MAAM,MAAM,SAAA;AACzC;AAyBO,MAAM,QAAQ,MAAM;AAAA,EACzB,CACE;AAAA,IACE;AAAA,IACA,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,OAAO;AAAA,IACP,UAAU;AAAA,IACV;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,QACG;AACH,QAAI,UAAU,KAAK,CAAC,UAAU;AAC5B,aAAO;AAAA,IACT;AAEA,UAAM,OAAO,UAAU,OAAO;AAE9B,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAW;AAAA,UACT;AAAA,UACA,SAAS,QAAQ;AAAA,UACjB,SAAS,QAAQ;AAAA,UACjB,SAAS,QAAQ;AAAA,UACjB,YAAY,aAAa;AAAA,UACzB,YAAY,WAAW;AAAA,UACvB,YAAY,WAAW;AAAA,UACvB,YAAY,UAAU;AAAA,UACtB,YAAY,UAAU;AAAA,UACtB,YAAY,aAAa;AAAA,UACzB,YAAY,aAAa;AAAA,UACzB;AAAA,QAAA;AAAA,QAED,GAAG;AAAA,QAEH,UAAA,YAAY,gBAAgB,OAAO,GAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EAG7C;AACF;AAEA,MAAM,cAAc;"}

package/dist/components/IconButton/IconButton.mjs

@@ -77,6 +77,7 @@ const IconButton = React.forwardRef(
             Count,
             {
               value: counterValue,
+              variant: "alert",
               size: countSizeMap[size],
               className: "absolute -top-0.5 -right-0.5"
             }

package/dist/components/IconButton/IconButton.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"IconButton.mjs","sources":["../../../src/components/IconButton/IconButton.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { Count, type CountSize } from \"../Count/Count\";\n\nconst iconButtonVariants = {\n  primary:\n    \"bg-neutral-400 text-body-300 hover:bg-hover-100 not-disabled:active:bg-hover-100 disabled:opacity-50 focus-visible:shadow-focus-ring\",\n  secondary:\n    \"bg-neutral-100 text-neutral-400 hover:bg-neutral-200 not-disabled:active:bg-neutral-200 disabled:opacity-50 focus-visible:shadow-focus-ring\",\n  tertiary:\n    \"bg-transparent text-neutral-400 hover:bg-hover-300 not-disabled:active:bg-brand-green-50 disabled:opacity-50 focus-visible:shadow-focus-ring\",\n  brand:\n    \"bg-body-black-solid-constant text-brand-green-500 hover:bg-brand-green-500 hover:text-body-black-solid-constant not-disabled:active:bg-brand-green-500 not-disabled:active:text-body-black-solid-constant disabled:opacity-50 focus-visible:shadow-focus-ring\",\n  contrast:\n    \"bg-transparent text-body-white-solid-constant hover:bg-hover-300 not-disabled:active:bg-hover-300 disabled:opacity-50 focus-visible:shadow-focus-ring\",\n  messaging:\n    \"bg-body-black-solid-constant text-brand-green-500 hover:bg-brand-green-500 hover:text-body-black-solid-constant not-disabled:active:bg-brand-green-500 not-disabled:active:text-body-black-solid-constant disabled:opacity-50 focus-visible:shadow-focus-ring\",\n  navTray:\n    \"bg-transparent text-neutral-400 hover:bg-hover-300 not-disabled:active:bg-brand-green-50 disabled:opacity-50 focus-visible:shadow-focus-ring\",\n  tertiaryDestructive:\n    \"bg-transparent text-error-500 hover:bg-hover-300 not-disabled:active:bg-hover-300 disabled:opacity-50 focus-visible:shadow-focus-ring\",\n  stop: \"bg-neutral-400 text-body-300 hover:bg-brand-green-500 hover:text-body-black-solid-constant not-disabled:active:bg-brand-green-500 not-disabled:active:text-body-black-solid-constant disabled:opacity-50 focus-visible:shadow-focus-ring\",\n  microphone:\n    \"bg-neutral-400 text-body-300 hover:bg-brand-green-500 hover:text-body-black-solid-constant not-disabled:active:bg-brand-green-500 not-disabled:active:text-body-black-solid-constant disabled:opacity-50 focus-visible:shadow-focus-ring\",\n};\n\nconst iconSizeVariants = {\n  24: \"[&>svg]:size-4\",\n  32: \"[&>svg]:size-5\",\n  40: \"[&>svg]:size-6\",\n  52: \"[&>svg]:size-7\",\n  72: \"[&>svg]:size-8\",\n} as const;\n\nconst sizeVariants = {\n  24: \"size-6 p-1\",\n  32: \"size-8 p-1.5\",\n  40: \"size-10 p-[10px]\",\n  52: \"size-[52px] p-2\",\n  72: \"size-[72px] p-4\",\n} as const;\n\nconst countSizeMap: Record<string, CountSize> = {\n  24: \"16\",\n  32: \"24\",\n  40: \"32\",\n  52: \"32\",\n  72: \"32\",\n};\n\n/** Visual style variant of the icon button. */\nexport type IconButtonVariant =\n  | \"primary\"\n  | \"secondary\"\n  | \"tertiary\"\n  | \"brand\"\n  | \"contrast\"\n  | \"messaging\"\n  | \"navTray\"\n  | \"tertiaryDestructive\"\n  | \"stop\"\n  | \"microphone\";\n\n/** Icon button size in pixels. */\nexport type IconButtonSize = \"24\" | \"32\" | \"40\" | \"52\" | \"72\";\n\nexport interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Visual style variant of the icon button. @default \"primary\" */\n  variant?: IconButtonVariant;\n  /** Size of the button in pixels. @default \"40\" */\n  size?: IconButtonSize;\n  /** Icon element to render inside the button. */\n  icon: React.ReactNode;\n  /** When provided, displays a {@link Count} badge at the top-right corner (tertiary & navTray variants only). */\n  counterValue?: number;\n}\n\n/**\n * A circular button containing only an icon. Use when an action can be\n * represented by an icon alone (e.g. close, send, mic). Pair with an\n * `aria-label` for accessibility.\n *\n * @example\n * ```tsx\n * <IconButton icon={<CloseIcon />} aria-label=\"Close\" variant=\"tertiary\" />\n * ```\n */\nexport const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(\n  (\n    { className, variant = \"primary\", size = \"40\", icon, counterValue, disabled = false, ...props },\n    ref,\n  ) => {\n    if (process.env.NODE_ENV !== \"production\") {\n      if (!props[\"aria-label\"] && !props[\"aria-labelledby\"] && !props.title) {\n        console.warn(\n          \"IconButton: No accessible name provided. Add an `aria-label`, `aria-labelledby`, or `title` prop so screen readers can announce this button.\",\n        );\n      }\n    }\n\n    return (\n      <button\n        ref={ref}\n        type=\"button\"\n        data-testid=\"icon-button\"\n        disabled={disabled}\n        className={cn(\n          // Base styles\n          \"relative inline-flex shrink-0 items-center justify-center focus-visible:outline-none\",\n          \"cursor-pointer rounded-full transition-all duration-150 ease-in-out disabled:cursor-default\",\n          // Size variants\n          sizeVariants[size],\n          // Variant styles\n          iconButtonVariants[variant],\n          // Manual CSS overrides\n          className,\n        )}\n        {...props}\n      >\n        <span\n          className={cn(\"flex shrink-0 items-center justify-center\", iconSizeVariants[size])}\n          aria-hidden=\"true\"\n        >\n          {icon}\n        </span>\n\n        {counterValue !== undefined && (\n          <Count\n            value={counterValue}\n            size={countSizeMap[size]}\n            className=\"absolute -top-0.5 -right-0.5\"\n          />\n        )}\n      </button>\n    );\n  },\n);\n\nIconButton.displayName = \"IconButton\";\n"],"names":[],"mappings":";;;;;AAIA,MAAM,qBAAqB;AAAA,EACzB,SACE;AAAA,EACF,WACE;AAAA,EACF,UACE;AAAA,EACF,OACE;AAAA,EACF,UACE;AAAA,EACF,WACE;AAAA,EACF,SACE;AAAA,EACF,qBACE;AAAA,EACF,MAAM;AAAA,EACN,YACE;AACJ;AAEA,MAAM,mBAAmB;AAAA,EACvB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,MAAM,eAAe;AAAA,EACnB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,MAAM,eAA0C;AAAA,EAC9C,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAuCO,MAAM,aAAa,MAAM;AAAA,EAC9B,CACE,EAAE,WAAW,UAAU,WAAW,OAAO,MAAM,MAAM,cAAc,WAAW,OAAO,GAAG,MAAA,GACxF,QACG;AACH,QAAI,QAAQ,IAAI,aAAa,cAAc;AACzC,UAAI,CAAC,MAAM,YAAY,KAAK,CAAC,MAAM,iBAAiB,KAAK,CAAC,MAAM,OAAO;AACrE,gBAAQ;AAAA,UACN;AAAA,QAAA;AAAA,MAEJ;AAAA,IACF;AAEA,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,MAAK;AAAA,QACL,eAAY;AAAA,QACZ;AAAA,QACA,WAAW;AAAA;AAAA,UAET;AAAA,UACA;AAAA;AAAA,UAEA,aAAa,IAAI;AAAA;AAAA,UAEjB,mBAAmB,OAAO;AAAA;AAAA,UAE1B;AAAA,QAAA;AAAA,QAED,GAAG;AAAA,QAEJ,UAAA;AAAA,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAW,GAAG,6CAA6C,iBAAiB,IAAI,CAAC;AAAA,cACjF,eAAY;AAAA,cAEX,UAAA;AAAA,YAAA;AAAA,UAAA;AAAA,UAGF,iBAAiB,UAChB;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,OAAO;AAAA,cACP,MAAM,aAAa,IAAI;AAAA,cACvB,WAAU;AAAA,YAAA;AAAA,UAAA;AAAA,QACZ;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF;AAEA,WAAW,cAAc;"}
+{"version":3,"file":"IconButton.mjs","sources":["../../../src/components/IconButton/IconButton.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { Count, type CountSize } from \"../Count/Count\";\n\nconst iconButtonVariants = {\n  primary:\n    \"bg-neutral-400 text-body-300 hover:bg-hover-100 not-disabled:active:bg-hover-100 disabled:opacity-50 focus-visible:shadow-focus-ring\",\n  secondary:\n    \"bg-neutral-100 text-neutral-400 hover:bg-neutral-200 not-disabled:active:bg-neutral-200 disabled:opacity-50 focus-visible:shadow-focus-ring\",\n  tertiary:\n    \"bg-transparent text-neutral-400 hover:bg-hover-300 not-disabled:active:bg-brand-green-50 disabled:opacity-50 focus-visible:shadow-focus-ring\",\n  brand:\n    \"bg-body-black-solid-constant text-brand-green-500 hover:bg-brand-green-500 hover:text-body-black-solid-constant not-disabled:active:bg-brand-green-500 not-disabled:active:text-body-black-solid-constant disabled:opacity-50 focus-visible:shadow-focus-ring\",\n  contrast:\n    \"bg-transparent text-body-white-solid-constant hover:bg-hover-300 not-disabled:active:bg-hover-300 disabled:opacity-50 focus-visible:shadow-focus-ring\",\n  messaging:\n    \"bg-body-black-solid-constant text-brand-green-500 hover:bg-brand-green-500 hover:text-body-black-solid-constant not-disabled:active:bg-brand-green-500 not-disabled:active:text-body-black-solid-constant disabled:opacity-50 focus-visible:shadow-focus-ring\",\n  navTray:\n    \"bg-transparent text-neutral-400 hover:bg-hover-300 not-disabled:active:bg-brand-green-50 disabled:opacity-50 focus-visible:shadow-focus-ring\",\n  tertiaryDestructive:\n    \"bg-transparent text-error-500 hover:bg-hover-300 not-disabled:active:bg-hover-300 disabled:opacity-50 focus-visible:shadow-focus-ring\",\n  stop: \"bg-neutral-400 text-body-300 hover:bg-brand-green-500 hover:text-body-black-solid-constant not-disabled:active:bg-brand-green-500 not-disabled:active:text-body-black-solid-constant disabled:opacity-50 focus-visible:shadow-focus-ring\",\n  microphone:\n    \"bg-neutral-400 text-body-300 hover:bg-brand-green-500 hover:text-body-black-solid-constant not-disabled:active:bg-brand-green-500 not-disabled:active:text-body-black-solid-constant disabled:opacity-50 focus-visible:shadow-focus-ring\",\n};\n\nconst iconSizeVariants = {\n  24: \"[&>svg]:size-4\",\n  32: \"[&>svg]:size-5\",\n  40: \"[&>svg]:size-6\",\n  52: \"[&>svg]:size-7\",\n  72: \"[&>svg]:size-8\",\n} as const;\n\nconst sizeVariants = {\n  24: \"size-6 p-1\",\n  32: \"size-8 p-1.5\",\n  40: \"size-10 p-[10px]\",\n  52: \"size-[52px] p-2\",\n  72: \"size-[72px] p-4\",\n} as const;\n\nconst countSizeMap: Record<string, CountSize> = {\n  24: \"16\",\n  32: \"24\",\n  40: \"32\",\n  52: \"32\",\n  72: \"32\",\n};\n\n/** Visual style variant of the icon button. */\nexport type IconButtonVariant =\n  | \"primary\"\n  | \"secondary\"\n  | \"tertiary\"\n  | \"brand\"\n  | \"contrast\"\n  | \"messaging\"\n  | \"navTray\"\n  | \"tertiaryDestructive\"\n  | \"stop\"\n  | \"microphone\";\n\n/** Icon button size in pixels. */\nexport type IconButtonSize = \"24\" | \"32\" | \"40\" | \"52\" | \"72\";\n\nexport interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Visual style variant of the icon button. @default \"primary\" */\n  variant?: IconButtonVariant;\n  /** Size of the button in pixels. @default \"40\" */\n  size?: IconButtonSize;\n  /** Icon element to render inside the button. */\n  icon: React.ReactNode;\n  /** When provided, displays a {@link Count} badge at the top-right corner (tertiary & navTray variants only). */\n  counterValue?: number;\n}\n\n/**\n * A circular button containing only an icon. Use when an action can be\n * represented by an icon alone (e.g. close, send, mic). Pair with an\n * `aria-label` for accessibility.\n *\n * @example\n * ```tsx\n * <IconButton icon={<CloseIcon />} aria-label=\"Close\" variant=\"tertiary\" />\n * ```\n */\nexport const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(\n  (\n    { className, variant = \"primary\", size = \"40\", icon, counterValue, disabled = false, ...props },\n    ref,\n  ) => {\n    if (process.env.NODE_ENV !== \"production\") {\n      if (!props[\"aria-label\"] && !props[\"aria-labelledby\"] && !props.title) {\n        console.warn(\n          \"IconButton: No accessible name provided. Add an `aria-label`, `aria-labelledby`, or `title` prop so screen readers can announce this button.\",\n        );\n      }\n    }\n\n    return (\n      <button\n        ref={ref}\n        type=\"button\"\n        data-testid=\"icon-button\"\n        disabled={disabled}\n        className={cn(\n          // Base styles\n          \"relative inline-flex shrink-0 items-center justify-center focus-visible:outline-none\",\n          \"cursor-pointer rounded-full transition-all duration-150 ease-in-out disabled:cursor-default\",\n          // Size variants\n          sizeVariants[size],\n          // Variant styles\n          iconButtonVariants[variant],\n          // Manual CSS overrides\n          className,\n        )}\n        {...props}\n      >\n        <span\n          className={cn(\"flex shrink-0 items-center justify-center\", iconSizeVariants[size])}\n          aria-hidden=\"true\"\n        >\n          {icon}\n        </span>\n\n        {counterValue !== undefined && (\n          <Count\n            value={counterValue}\n            variant=\"alert\"\n            size={countSizeMap[size]}\n            className=\"absolute -top-0.5 -right-0.5\"\n          />\n        )}\n      </button>\n    );\n  },\n);\n\nIconButton.displayName = \"IconButton\";\n"],"names":[],"mappings":";;;;;AAIA,MAAM,qBAAqB;AAAA,EACzB,SACE;AAAA,EACF,WACE;AAAA,EACF,UACE;AAAA,EACF,OACE;AAAA,EACF,UACE;AAAA,EACF,WACE;AAAA,EACF,SACE;AAAA,EACF,qBACE;AAAA,EACF,MAAM;AAAA,EACN,YACE;AACJ;AAEA,MAAM,mBAAmB;AAAA,EACvB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,MAAM,eAAe;AAAA,EACnB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,MAAM,eAA0C;AAAA,EAC9C,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAuCO,MAAM,aAAa,MAAM;AAAA,EAC9B,CACE,EAAE,WAAW,UAAU,WAAW,OAAO,MAAM,MAAM,cAAc,WAAW,OAAO,GAAG,MAAA,GACxF,QACG;AACH,QAAI,QAAQ,IAAI,aAAa,cAAc;AACzC,UAAI,CAAC,MAAM,YAAY,KAAK,CAAC,MAAM,iBAAiB,KAAK,CAAC,MAAM,OAAO;AACrE,gBAAQ;AAAA,UACN;AAAA,QAAA;AAAA,MAEJ;AAAA,IACF;AAEA,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,MAAK;AAAA,QACL,eAAY;AAAA,QACZ;AAAA,QACA,WAAW;AAAA;AAAA,UAET;AAAA,UACA;AAAA;AAAA,UAEA,aAAa,IAAI;AAAA;AAAA,UAEjB,mBAAmB,OAAO;AAAA;AAAA,UAE1B;AAAA,QAAA;AAAA,QAED,GAAG;AAAA,QAEJ,UAAA;AAAA,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAW,GAAG,6CAA6C,iBAAiB,IAAI,CAAC;AAAA,cACjF,eAAY;AAAA,cAEX,UAAA;AAAA,YAAA;AAAA,UAAA;AAAA,UAGF,iBAAiB,UAChB;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,OAAO;AAAA,cACP,SAAQ;AAAA,cACR,MAAM,aAAa,IAAI;AAAA,cACvB,WAAU;AAAA,YAAA;AAAA,UAAA;AAAA,QACZ;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF;AAEA,WAAW,cAAc;"}

package/dist/index.d.ts

@@ -390,7 +390,7 @@ export declare interface CountProps extends React_2.HTMLAttributes<HTMLSpanEleme
 export declare type CountSize = "16" | "24" | "32";
 
 /** Colour variant for the count badge. */
-export declare type CountVariant = "default" | "brand" | "pink" | "info" | "success" | "warning";
+export declare type CountVariant = "default" | "alert" | "brand" | "pink" | "info" | "success" | "warning";
 
 /** A compact "×" cross icon (20 × 20). */
 export declare const CrossIcon: React_2.ForwardRefExoticComponent<React_2.SVGAttributes<SVGSVGElement> & {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fanvue/ui",
-  "version": "1.12.2",
+  "version": "1.13.0",
   "description": "React component library built with Tailwind CSS for Fanvue ecosystem",
   "publishConfig": {
     "registry": "https://registry.npmjs.org",