@fanvue/ui 1.10.2 → 1.12.0

package/dist/cjs/components/Avatar/Avatar.cjs

@@ -56,14 +56,14 @@ const AvatarRoot = React__namespace.forwardRef(
           "data-testid": "avatar",
           className: cn.cn(
             "relative inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full bg-neutral-100",
-            size === 16 && "typography-caption-semibold size-4",
-            size === 24 && "typography-caption-semibold size-6",
-            size === 32 && "typography-body-2-semibold size-8",
-            size === 40 && "typography-body-1-semibold size-10",
-            size === 48 && "typography-heading-4 size-12",
-            size === 64 && "typography-heading-3 size-16",
-            size === 88 && "typography-heading-2 size-[88px]",
-            size === 148 && "typography-heading-1 size-[148px]",
+            size === 16 && "size-4 text-[10px]",
+            size === 24 && "size-6 text-xs",
+            size === 32 && "size-8 text-xs",
+            size === 40 && "size-10 text-sm",
+            size === 48 && "size-12 text-base",
+            size === 64 && "size-16 text-xl",
+            size === 88 && "size-[88px] text-2xl",
+            size === 148 && "size-[148px] text-4xl",
             className
           ),
           ...props,
@@ -114,7 +114,7 @@ const AvatarFallback = React__namespace.forwardRef(({ className, children, ...pr
   {
     ref,
     className: cn.cn(
-      "flex size-full items-center justify-center bg-neutral-200 text-neutral-400 uppercase leading-none",
+      "flex size-full items-center justify-center bg-neutral-200 font-semibold text-neutral-400 uppercase leading-none",
       className
     ),
     delayMs: 0,

package/dist/cjs/components/Avatar/Avatar.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.cjs","sources":["../../../../src/components/Avatar/Avatar.tsx"],"sourcesContent":["import * as AvatarPrimitive from \"@radix-ui/react-avatar\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\n/** Allowed pixel sizes for the avatar. */\nexport type AvatarSize = 16 | 24 | 32 | 40 | 48 | 64 | 88 | 148;\n\nconst AvatarContext = React.createContext<{ size: AvatarSize; NSFWShow: boolean }>({\n  size: 40,\n  NSFWShow: false,\n});\n\nconst STATUS_POSITIONS: Record<AvatarSize, { top: number; right: number }> = {\n  16: { top: -4, right: -4 },\n  24: { top: -3, right: -3 },\n  32: { top: -2, right: -2 },\n  40: { top: -1, right: -1 },\n  48: { top: 0, right: 0 },\n  64: { top: 2, right: 2 },\n  88: { top: 6, right: 6 },\n  148: { top: 15, right: 15 },\n};\n\n/** Shared avatar styling props. */\ninterface AvatarStyleProps {\n  /** Pixel size of the avatar. @default 40 */\n  size?: AvatarSize;\n  /** Whether to show the online-status indicator dot. @default false */\n  onlineIndicator?: boolean;\n  /** Whether to show the platinum gradient border ring. @default false */\n  platinumShow?: boolean;\n  /** Whether to apply the NSFW blur filter over the image. @default false */\n  NSFWShow?: boolean;\n}\n\n/** Props for the low-level {@link AvatarRoot} compound component. */\nexport interface AvatarRootProps\n  extends React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>,\n    AvatarStyleProps {}\n\n/**\n * Low-level avatar root for custom compositions. Provides size context to\n * child `AvatarImage` and `AvatarFallback` components.\n *\n * Prefer the higher-level {@link Avatar} component for most use cases.\n */\nconst AvatarRoot = React.forwardRef<\n  React.ComponentRef<typeof AvatarPrimitive.Root>,\n  AvatarRootProps\n>(\n  (\n    {\n      className,\n      size = 40,\n      onlineIndicator = false,\n      platinumShow = false,\n      NSFWShow = false,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    const statusPosition = STATUS_POSITIONS[size];\n\n    return (\n      <AvatarContext.Provider value={{ size, NSFWShow }}>\n        <div className=\"relative inline-flex\">\n          <AvatarPrimitive.Root\n            ref={ref}\n            data-testid=\"avatar\"\n            className={cn(\n              \"relative inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full bg-neutral-100\",\n              size === 16 && \"typography-caption-semibold size-4\",\n              size === 24 && \"typography-caption-semibold size-6\",\n              size === 32 && \"typography-body-2-semibold size-8\",\n              size === 40 && \"typography-body-1-semibold size-10\",\n              size === 48 && \"typography-heading-4 size-12\",\n              size === 64 && \"typography-heading-3 size-16\",\n              size === 88 && \"typography-heading-2 size-[88px]\",\n              size === 148 && \"typography-heading-1 size-[148px]\",\n              className,\n            )}\n            {...props}\n          >\n            {children}\n          </AvatarPrimitive.Root>\n          {platinumShow && (\n            <div\n              className=\"pointer-events-none absolute inset-0 rounded-full\"\n              style={{\n                background: `linear-gradient(143deg, #504F54 0%, #B1B1B1 20.3154%, #13181C 37.3727%, #C6C6C8 58.8154%, #FFFFFF 69.3154%, #0C0F14 81.3154%, #696A6E 100%)`,\n                WebkitMask: \"radial-gradient(circle closest-side, transparent 96%, black 96%)\",\n                mask: \"radial-gradient(circle closest-side, transparent 96%, black 96%)\",\n              }}\n              aria-hidden=\"true\"\n            />\n          )}\n          {onlineIndicator && (\n            <span\n              className=\"absolute size-3 rounded-full border-2 border-background-150 bg-brand-green-500\"\n              style={{\n                top: `${statusPosition.top}px`,\n                right: `${statusPosition.right}px`,\n              }}\n              aria-hidden=\"true\"\n            />\n          )}\n        </div>\n      </AvatarContext.Provider>\n    );\n  },\n);\n\nAvatarRoot.displayName = \"AvatarRoot\";\n\n/** Props for the {@link AvatarImage} compound component. */\nexport interface AvatarImageProps\n  extends React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image> {}\n\n/** Renders the avatar image. Automatically applies the NSFW blur when enabled on the parent `AvatarRoot`. */\nconst AvatarImage = React.forwardRef<\n  React.ComponentRef<typeof AvatarPrimitive.Image>,\n  AvatarImageProps\n>(({ className, ...props }, ref) => {\n  const { NSFWShow } = React.useContext(AvatarContext);\n  return (\n    <AvatarPrimitive.Image\n      ref={ref}\n      className={cn(\"size-full bg-neutral-200 object-cover\", NSFWShow && \"blur-md\", className)}\n      {...props}\n    />\n  );\n});\n\nAvatarImage.displayName = \"AvatarImage\";\n\n/** Props for the {@link AvatarFallback} compound component. */\nexport interface AvatarFallbackProps\n  extends React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback> {}\n\n/** Renders fallback content (e.g. initials or an icon) when the avatar image has not loaded. */\nconst AvatarFallback = React.forwardRef<\n  React.ComponentRef<typeof AvatarPrimitive.Fallback>,\n  AvatarFallbackProps\n>(({ className, children, ...props }, ref) => (\n  <AvatarPrimitive.Fallback\n    ref={ref}\n    className={cn(\n      \"flex size-full items-center justify-center bg-neutral-200 text-neutral-400 uppercase leading-none\",\n      className,\n    )}\n    delayMs={0}\n    {...props}\n  >\n    {children}\n  </AvatarPrimitive.Fallback>\n));\n\nAvatarFallback.displayName = \"AvatarFallback\";\n\nexport interface AvatarProps\n  extends React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>,\n    AvatarStyleProps {\n  /** URL of the avatar image. */\n  src?: string;\n  /** Alt text for the avatar image. @default \"Avatar\" */\n  alt?: string;\n  /** Fallback content rendered when the image has not loaded (e.g. initials or an icon). */\n  fallback?: React.ReactNode;\n}\n\n/**\n * Displays a user avatar with optional online indicator, platinum border, and\n * NSFW blur. Pass `src` and `fallback` for the simple API, or compose your own\n * layout with `AvatarRoot`, `AvatarImage`, and `AvatarFallback` as children.\n *\n * @example\n * ```tsx\n * <Avatar src=\"/photo.jpg\" alt=\"Jane Doe\" fallback=\"JD\" size={48} />\n * ```\n */\nexport const Avatar = React.forwardRef<\n  React.ComponentRef<typeof AvatarPrimitive.Root>,\n  AvatarProps\n>(\n  (\n    {\n      className,\n      size = 40,\n      src,\n      alt,\n      fallback,\n      onlineIndicator = false,\n      platinumShow = false,\n      NSFWShow = false,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    const rootProps = {\n      ref,\n      size,\n      onlineIndicator,\n      platinumShow,\n      NSFWShow,\n      className,\n      ...props,\n    };\n\n    if (children) {\n      return <AvatarRoot {...rootProps}>{children}</AvatarRoot>;\n    }\n\n    return (\n      <AvatarRoot {...rootProps}>\n        {src && <AvatarImage src={src} alt={alt ?? \"Avatar\"} />}\n        <AvatarFallback>{fallback}</AvatarFallback>\n      </AvatarRoot>\n    );\n  },\n);\n\nAvatar.displayName = \"Avatar\";\n\nexport { AvatarRoot, AvatarImage, AvatarFallback };\n"],"names":["React","jsx","jsxs","AvatarPrimitive","cn"],"mappings":"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"}
+{"version":3,"file":"Avatar.cjs","sources":["../../../../src/components/Avatar/Avatar.tsx"],"sourcesContent":["import * as AvatarPrimitive from \"@radix-ui/react-avatar\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\n/** Allowed pixel sizes for the avatar. */\nexport type AvatarSize = 16 | 24 | 32 | 40 | 48 | 64 | 88 | 148;\n\nconst AvatarContext = React.createContext<{ size: AvatarSize; NSFWShow: boolean }>({\n  size: 40,\n  NSFWShow: false,\n});\n\nconst STATUS_POSITIONS: Record<AvatarSize, { top: number; right: number }> = {\n  16: { top: -4, right: -4 },\n  24: { top: -3, right: -3 },\n  32: { top: -2, right: -2 },\n  40: { top: -1, right: -1 },\n  48: { top: 0, right: 0 },\n  64: { top: 2, right: 2 },\n  88: { top: 6, right: 6 },\n  148: { top: 15, right: 15 },\n};\n\n/** Shared avatar styling props. */\ninterface AvatarStyleProps {\n  /** Pixel size of the avatar. @default 40 */\n  size?: AvatarSize;\n  /** Whether to show the online-status indicator dot. @default false */\n  onlineIndicator?: boolean;\n  /** Whether to show the platinum gradient border ring. @default false */\n  platinumShow?: boolean;\n  /** Whether to apply the NSFW blur filter over the image. @default false */\n  NSFWShow?: boolean;\n}\n\n/** Props for the low-level {@link AvatarRoot} compound component. */\nexport interface AvatarRootProps\n  extends React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>,\n    AvatarStyleProps {}\n\n/**\n * Low-level avatar root for custom compositions. Provides size context to\n * child `AvatarImage` and `AvatarFallback` components.\n *\n * Prefer the higher-level {@link Avatar} component for most use cases.\n */\nconst AvatarRoot = React.forwardRef<\n  React.ComponentRef<typeof AvatarPrimitive.Root>,\n  AvatarRootProps\n>(\n  (\n    {\n      className,\n      size = 40,\n      onlineIndicator = false,\n      platinumShow = false,\n      NSFWShow = false,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    const statusPosition = STATUS_POSITIONS[size];\n\n    return (\n      <AvatarContext.Provider value={{ size, NSFWShow }}>\n        <div className=\"relative inline-flex\">\n          <AvatarPrimitive.Root\n            ref={ref}\n            data-testid=\"avatar\"\n            className={cn(\n              \"relative inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full bg-neutral-100\",\n              size === 16 && \"size-4 text-[10px]\",\n              size === 24 && \"size-6 text-xs\",\n              size === 32 && \"size-8 text-xs\",\n              size === 40 && \"size-10 text-sm\",\n              size === 48 && \"size-12 text-base\",\n              size === 64 && \"size-16 text-xl\",\n              size === 88 && \"size-[88px] text-2xl\",\n              size === 148 && \"size-[148px] text-4xl\",\n              className,\n            )}\n            {...props}\n          >\n            {children}\n          </AvatarPrimitive.Root>\n          {platinumShow && (\n            <div\n              className=\"pointer-events-none absolute inset-0 rounded-full\"\n              style={{\n                background: `linear-gradient(143deg, #504F54 0%, #B1B1B1 20.3154%, #13181C 37.3727%, #C6C6C8 58.8154%, #FFFFFF 69.3154%, #0C0F14 81.3154%, #696A6E 100%)`,\n                WebkitMask: \"radial-gradient(circle closest-side, transparent 96%, black 96%)\",\n                mask: \"radial-gradient(circle closest-side, transparent 96%, black 96%)\",\n              }}\n              aria-hidden=\"true\"\n            />\n          )}\n          {onlineIndicator && (\n            <span\n              className=\"absolute size-3 rounded-full border-2 border-background-150 bg-brand-green-500\"\n              style={{\n                top: `${statusPosition.top}px`,\n                right: `${statusPosition.right}px`,\n              }}\n              aria-hidden=\"true\"\n            />\n          )}\n        </div>\n      </AvatarContext.Provider>\n    );\n  },\n);\n\nAvatarRoot.displayName = \"AvatarRoot\";\n\n/** Props for the {@link AvatarImage} compound component. */\nexport interface AvatarImageProps\n  extends React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image> {}\n\n/** Renders the avatar image. Automatically applies the NSFW blur when enabled on the parent `AvatarRoot`. */\nconst AvatarImage = React.forwardRef<\n  React.ComponentRef<typeof AvatarPrimitive.Image>,\n  AvatarImageProps\n>(({ className, ...props }, ref) => {\n  const { NSFWShow } = React.useContext(AvatarContext);\n  return (\n    <AvatarPrimitive.Image\n      ref={ref}\n      className={cn(\"size-full bg-neutral-200 object-cover\", NSFWShow && \"blur-md\", className)}\n      {...props}\n    />\n  );\n});\n\nAvatarImage.displayName = \"AvatarImage\";\n\n/** Props for the {@link AvatarFallback} compound component. */\nexport interface AvatarFallbackProps\n  extends React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback> {}\n\n/** Renders fallback content (e.g. initials or an icon) when the avatar image has not loaded. */\nconst AvatarFallback = React.forwardRef<\n  React.ComponentRef<typeof AvatarPrimitive.Fallback>,\n  AvatarFallbackProps\n>(({ className, children, ...props }, ref) => (\n  <AvatarPrimitive.Fallback\n    ref={ref}\n    className={cn(\n      \"flex size-full items-center justify-center bg-neutral-200 font-semibold text-neutral-400 uppercase leading-none\",\n      className,\n    )}\n    delayMs={0}\n    {...props}\n  >\n    {children}\n  </AvatarPrimitive.Fallback>\n));\n\nAvatarFallback.displayName = \"AvatarFallback\";\n\nexport interface AvatarProps\n  extends React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>,\n    AvatarStyleProps {\n  /** URL of the avatar image. */\n  src?: string;\n  /** Alt text for the avatar image. @default \"Avatar\" */\n  alt?: string;\n  /** Fallback content rendered when the image has not loaded (e.g. initials or an icon). */\n  fallback?: React.ReactNode;\n}\n\n/**\n * Displays a user avatar with optional online indicator, platinum border, and\n * NSFW blur. Pass `src` and `fallback` for the simple API, or compose your own\n * layout with `AvatarRoot`, `AvatarImage`, and `AvatarFallback` as children.\n *\n * @example\n * ```tsx\n * <Avatar src=\"/photo.jpg\" alt=\"Jane Doe\" fallback=\"JD\" size={48} />\n * ```\n */\nexport const Avatar = React.forwardRef<\n  React.ComponentRef<typeof AvatarPrimitive.Root>,\n  AvatarProps\n>(\n  (\n    {\n      className,\n      size = 40,\n      src,\n      alt,\n      fallback,\n      onlineIndicator = false,\n      platinumShow = false,\n      NSFWShow = false,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    const rootProps = {\n      ref,\n      size,\n      onlineIndicator,\n      platinumShow,\n      NSFWShow,\n      className,\n      ...props,\n    };\n\n    if (children) {\n      return <AvatarRoot {...rootProps}>{children}</AvatarRoot>;\n    }\n\n    return (\n      <AvatarRoot {...rootProps}>\n        {src && <AvatarImage src={src} alt={alt ?? \"Avatar\"} />}\n        <AvatarFallback>{fallback}</AvatarFallback>\n      </AvatarRoot>\n    );\n  },\n);\n\nAvatar.displayName = \"Avatar\";\n\nexport { AvatarRoot, AvatarImage, AvatarFallback };\n"],"names":["React","jsx","jsxs","AvatarPrimitive","cn"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAOA,MAAM,gBAAgBA,iBAAM,cAAuD;AAAA,EACjF,MAAM;AAAA,EACN,UAAU;AACZ,CAAC;AAED,MAAM,mBAAuE;AAAA,EAC3E,IAAI,EAAE,KAAK,IAAI,OAAO,GAAA;AAAA,EACtB,IAAI,EAAE,KAAK,IAAI,OAAO,GAAA;AAAA,EACtB,IAAI,EAAE,KAAK,IAAI,OAAO,GAAA;AAAA,EACtB,IAAI,EAAE,KAAK,IAAI,OAAO,GAAA;AAAA,EACtB,IAAI,EAAE,KAAK,GAAG,OAAO,EAAA;AAAA,EACrB,IAAI,EAAE,KAAK,GAAG,OAAO,EAAA;AAAA,EACrB,IAAI,EAAE,KAAK,GAAG,OAAO,EAAA;AAAA,EACrB,KAAK,EAAE,KAAK,IAAI,OAAO,GAAA;AACzB;AAyBA,MAAM,aAAaA,iBAAM;AAAA,EAIvB,CACE;AAAA,IACE;AAAA,IACA,OAAO;AAAA,IACP,kBAAkB;AAAA,IAClB,eAAe;AAAA,IACf,WAAW;AAAA,IACX;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,iBAAiB,iBAAiB,IAAI;AAE5C,WACEC,2BAAAA,IAAC,cAAc,UAAd,EAAuB,OAAO,EAAE,MAAM,SAAA,GACrC,UAAAC,2BAAAA,KAAC,OAAA,EAAI,WAAU,wBACb,UAAA;AAAA,MAAAD,2BAAAA;AAAAA,QAACE,2BAAgB;AAAA,QAAhB;AAAA,UACC;AAAA,UACA,eAAY;AAAA,UACZ,WAAWC,GAAAA;AAAAA,YACT;AAAA,YACA,SAAS,MAAM;AAAA,YACf,SAAS,MAAM;AAAA,YACf,SAAS,MAAM;AAAA,YACf,SAAS,MAAM;AAAA,YACf,SAAS,MAAM;AAAA,YACf,SAAS,MAAM;AAAA,YACf,SAAS,MAAM;AAAA,YACf,SAAS,OAAO;AAAA,YAChB;AAAA,UAAA;AAAA,UAED,GAAG;AAAA,UAEH;AAAA,QAAA;AAAA,MAAA;AAAA,MAEF,gBACCH,2BAAAA;AAAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,OAAO;AAAA,YACL,YAAY;AAAA,YACZ,YAAY;AAAA,YACZ,MAAM;AAAA,UAAA;AAAA,UAER,eAAY;AAAA,QAAA;AAAA,MAAA;AAAA,MAGf,mBACCA,2BAAAA;AAAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,OAAO;AAAA,YACL,KAAK,GAAG,eAAe,GAAG;AAAA,YAC1B,OAAO,GAAG,eAAe,KAAK;AAAA,UAAA;AAAA,UAEhC,eAAY;AAAA,QAAA;AAAA,MAAA;AAAA,IACd,EAAA,CAEJ,EAAA,CACF;AAAA,EAEJ;AACF;AAEA,WAAW,cAAc;AAOzB,MAAM,cAAcD,iBAAM,WAGxB,CAAC,EAAE,WAAW,GAAG,MAAA,GAAS,QAAQ;AAClC,QAAM,EAAE,SAAA,IAAaA,iBAAM,WAAW,aAAa;AACnD,SACEC,2BAAAA;AAAAA,IAACE,2BAAgB;AAAA,IAAhB;AAAA,MACC;AAAA,MACA,WAAWC,GAAAA,GAAG,yCAAyC,YAAY,WAAW,SAAS;AAAA,MACtF,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV,CAAC;AAED,YAAY,cAAc;AAO1B,MAAM,iBAAiBJ,iBAAM,WAG3B,CAAC,EAAE,WAAW,UAAU,GAAG,SAAS,QACpCC,2BAAAA;AAAAA,EAACE,2BAAgB;AAAA,EAAhB;AAAA,IACC;AAAA,IACA,WAAWC,GAAAA;AAAAA,MACT;AAAA,MACA;AAAA,IAAA;AAAA,IAEF,SAAS;AAAA,IACR,GAAG;AAAA,IAEH;AAAA,EAAA;AACH,CACD;AAED,eAAe,cAAc;AAuBtB,MAAM,SAASJ,iBAAM;AAAA,EAI1B,CACE;AAAA,IACE;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA;AAAA,IACA,kBAAkB;AAAA,IAClB,eAAe;AAAA,IACf,WAAW;AAAA,IACX;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,YAAY;AAAA,MAChB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IAAA;AAGL,QAAI,UAAU;AACZ,aAAOC,2BAAAA,IAAC,YAAA,EAAY,GAAG,WAAY,SAAA,CAAS;AAAA,IAC9C;AAEA,WACEC,2BAAAA,KAAC,YAAA,EAAY,GAAG,WACb,UAAA;AAAA,MAAA,OAAOD,2BAAAA,IAAC,aAAA,EAAY,KAAU,KAAK,OAAO,UAAU;AAAA,MACrDA,2BAAAA,IAAC,kBAAgB,UAAA,SAAA,CAAS;AAAA,IAAA,GAC5B;AAAA,EAEJ;AACF;AAEA,OAAO,cAAc;;;;;"}

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

@@ -110,8 +110,10 @@ function renderContent({
         children: rightIcon
       }
     ),
-    discount != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "typography-body-1-regular line-through", "aria-hidden": "true", children: discount }),
-    price != null && /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", children: price })
+    (price || discount) && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+      discount && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "typography-body-1-regular line-through", "aria-hidden": "true", children: discount }),
+      price && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-2", "aria-hidden": "true", children: price })
+    ] })
   ] });
 }
 const Button = React__namespace.forwardRef(
@@ -127,6 +129,7 @@ const Button = React__namespace.forwardRef(
     children,
     discount,
     price,
+    fullWidth = false,
     ...props
   }, ref) => {
     const Comp = asChild ? reactSlot.Slot : "button";
@@ -158,12 +161,14 @@ const Button = React__namespace.forwardRef(
         ...loadingLabelProps,
         className: cn.cn(
           // Base styles
-          "inline-flex cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-full transition-colors",
+          "inline-flex cursor-pointer items-center gap-2 whitespace-nowrap rounded-full transition-colors",
           // Focus ring
           "focus-visible:shadow-focus-ring focus-visible:outline-none",
           // Disabled state
           "disabled:pointer-events-none disabled:opacity-50",
           "aria-disabled:pointer-events-none aria-disabled:opacity-50",
+          `${price ? "justify-between" : "justify-center"}`,
+          fullWidth && "w-full",
           // Size styles
           SIZE_CLASSES[size],
           // Variant styles

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

@@ -1 +1 @@
-{"version":3,"file":"Button.cjs","sources":["../../../../src/components/Button/Button.tsx"],"sourcesContent":["import { Slot } from \"@radix-ui/react-slot\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { SpinnerIcon } from \"../Icons/SpinnerIcon\";\n\n/** Visual style variant of the button. */\nexport type ButtonVariant =\n  | \"primary\"\n  | \"secondary\"\n  | \"tertiary\"\n  | \"link\"\n  | \"brand\"\n  | \"destructive\"\n  | \"white\"\n  | \"tertiaryDestructive\"\n  | \"text\";\n\n/** Button height in pixels. */\nexport type ButtonSize = \"48\" | \"40\" | \"32\" | \"24\";\n\nexport interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Visual style variant of the button. @default \"primary\" */\n  variant?: ButtonVariant;\n  /** Height of the button in pixels. @default \"40\" */\n  size?: ButtonSize;\n  /** Icon element displayed before the label. */\n  leftIcon?: React.ReactNode;\n  /** Icon element displayed after the label. */\n  rightIcon?: React.ReactNode;\n  /** When `true`, replaces the label with a spinner and disables interaction. @default false */\n  loading?: boolean;\n  /** Merge props onto a child element instead of rendering a `<button>`. @default false */\n  asChild?: boolean;\n  /** Old price shown with a strikethrough before the current price. */\n  discount?: string;\n  /** Current price shown inside the button after the label and icons. */\n  price?: string;\n}\n\nconst SIZE_CLASSES: Record<ButtonSize, string> = {\n  \"48\": \"h-12 px-4 py-3 typography-button-large\",\n  \"40\": \"h-10 px-4 py-2 typography-button-small\",\n  \"32\": \"h-8 px-3 py-2 typography-body-2-semibold\",\n  \"24\": \"h-6 px-2 py-1 typography-body-2-semibold\",\n};\n\nconst ICON_SIZE_CLASS: Record<ButtonSize, string> = {\n  \"48\": \"size-5\",\n  \"40\": \"size-5\",\n  \"32\": \"size-4\",\n  \"24\": \"size-3.5\",\n};\n\n/** Targets only direct SVG children so non-icon content (e.g. Pill) can size naturally. */\nconst ICON_WRAPPER_CLASS: Record<ButtonSize, string> = {\n  \"48\": \"[&>svg]:size-5\",\n  \"40\": \"[&>svg]:size-5\",\n  \"32\": \"[&>svg]:size-4\",\n  \"24\": \"[&>svg]:size-3.5\",\n};\n\nconst VARIANT_CLASSES: Record<ButtonVariant, string> = {\n  primary:\n    \"bg-neutral-400 text-body-300 hover:bg-brand-green-500 hover:text-body-black-solid-constant active:bg-brand-green-500 active:text-body-black-solid-constant\",\n  secondary:\n    \"border-body-100 border border-1 border-body-100 bg-transparent text-body-100 hover:bg-brand-green-50 active:bg-brand-green-50\",\n  tertiary: \"bg-transparent text-body-100 hover:bg-brand-green-50 active:bg-brand-green-50\",\n  link: \"bg-transparent text-body-100 underline decoration-solid hover:bg-brand-green-50 active:bg-brand-green-50\",\n  brand:\n    \"bg-brand-green-500 text-body-black-solid-constant hover:bg-brand-pink-500 active:bg-brand-pink-500\",\n  destructive:\n    \"bg-error-500 text-body-white-solid-constant hover:bg-background-solid dark:hover:bg-background-white-solid-constant dark:hover:text-error-500 active:bg-background-solid dark:active:bg-background-white-solid-constant dark:active:text-error-500\",\n  white:\n    \"bg-background-white-solid-constant text-body-black-solid-constant hover:bg-brand-green-500 active:bg-brand-green-500\",\n  tertiaryDestructive: \"bg-transparent text-error-500 hover:bg-error-50 active:bg-error-50\",\n  text: \"bg-transparent text-body-100 hover:underline active:underline\",\n};\n\n/** Recursively extract text content from React nodes for accessible labels */\nfunction getTextContent(node: React.ReactNode): string | undefined {\n  if (typeof node === \"string\") return node;\n  if (typeof node === \"number\") return String(node);\n  if (React.isValidElement(node)) {\n    return getTextContent((node.props as { children?: React.ReactNode }).children);\n  }\n  if (Array.isArray(node)) {\n    const text = node.map(getTextContent).filter(Boolean).join(\"\");\n    return text || undefined;\n  }\n  return undefined;\n}\n\nconst LoadingSpinner = ({ size }: { size: ButtonSize }) => {\n  return (\n    <span className=\"animate-spin\" aria-hidden=\"true\">\n      <SpinnerIcon className={ICON_SIZE_CLASS[size]}>\n        <title>Loading</title>\n      </SpinnerIcon>\n    </span>\n  );\n};\n\nfunction renderContent({\n  loading,\n  asChild,\n  children,\n  size,\n  leftIcon,\n  rightIcon,\n  iconSizeClass,\n  discount,\n  price,\n}: {\n  loading: boolean;\n  asChild: boolean;\n  children: React.ReactNode;\n  size: ButtonSize;\n  leftIcon: React.ReactNode;\n  rightIcon: React.ReactNode;\n  iconSizeClass: string;\n  discount?: string;\n  price?: string;\n}) {\n  if (loading) {\n    // When asChild, clone the child element with spinner content instead of\n    // wrapping in sr-only span (which would nest interactive elements)\n    if (asChild && React.isValidElement(children)) {\n      return React.cloneElement(\n        children as React.ReactElement<{ children?: React.ReactNode }>,\n        undefined,\n        <LoadingSpinner size={size} />,\n      );\n    }\n    return (\n      <>\n        <LoadingSpinner size={size} />\n        <span className=\"sr-only\">{children}</span>\n      </>\n    );\n  }\n\n  if (asChild) return children;\n\n  return (\n    <>\n      {leftIcon && (\n        <span\n          className={cn(\"flex shrink-0 items-center justify-center\", iconSizeClass)}\n          aria-hidden=\"true\"\n        >\n          {leftIcon}\n        </span>\n      )}\n      {children}\n      {rightIcon && (\n        <span\n          className={cn(\"flex shrink-0 items-center justify-center\", iconSizeClass)}\n          aria-hidden=\"true\"\n        >\n          {rightIcon}\n        </span>\n      )}\n      {discount != null && (\n        <span className=\"typography-body-1-regular line-through\" aria-hidden=\"true\">\n          {discount}\n        </span>\n      )}\n      {price != null && <span aria-hidden=\"true\">{price}</span>}\n    </>\n  );\n}\n\n/**\n * A versatile button component with multiple visual variants, sizes, icon\n * slots, loading state, and optional pricing display.\n *\n * @example\n * ```tsx\n * <Button variant=\"brand\" size=\"40\" leftIcon={<StarIcon />}>\n *   Subscribe\n * </Button>\n * ```\n */\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  (\n    {\n      className,\n      variant = \"primary\",\n      size = \"40\",\n      leftIcon,\n      rightIcon,\n      loading = false,\n      asChild = false,\n      disabled,\n      children,\n      discount,\n      price,\n      ...props\n    },\n    ref,\n  ) => {\n    const Comp = asChild ? Slot : \"button\";\n    const isDisabled = disabled || loading;\n    const iconSizeClass = ICON_WRAPPER_CLASS[size];\n\n    const buttonSpecificProps = !asChild\n      ? {\n          type: \"button\" as const,\n          \"data-testid\": \"button\",\n          disabled: isDisabled,\n        }\n      : isDisabled\n        ? { \"aria-disabled\": true }\n        : {};\n\n    // When asChild + loading, extract text from children for aria-label since we\n    // can't wrap element children in an sr-only span (creates invalid nested markup)\n    const loadingLabelProps = loading && asChild ? { \"aria-label\": getTextContent(children) } : {};\n\n    const content = renderContent({\n      loading,\n      asChild,\n      children,\n      size,\n      leftIcon,\n      rightIcon,\n      iconSizeClass,\n      discount,\n      price,\n    });\n\n    return (\n      <Comp\n        ref={ref}\n        {...buttonSpecificProps}\n        aria-busy={loading}\n        {...loadingLabelProps}\n        className={cn(\n          // Base styles\n          \"inline-flex cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-full transition-colors\",\n          // Focus ring\n          \"focus-visible:shadow-focus-ring focus-visible:outline-none\",\n          // Disabled state\n          \"disabled:pointer-events-none disabled:opacity-50\",\n          \"aria-disabled:pointer-events-none aria-disabled:opacity-50\",\n          // Size styles\n          SIZE_CLASSES[size],\n          // Variant styles\n          VARIANT_CLASSES[variant],\n          // Manual CSS overrides\n          className,\n        )}\n        {...props}\n      >\n        {content}\n      </Comp>\n    );\n  },\n);\n\nButton.displayName = \"Button\";\n"],"names":["React","jsx","SpinnerIcon","jsxs","Fragment","cn","Slot"],"mappings":"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"}
+{"version":3,"file":"Button.cjs","sources":["../../../../src/components/Button/Button.tsx"],"sourcesContent":["import { Slot } from \"@radix-ui/react-slot\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { SpinnerIcon } from \"../Icons/SpinnerIcon\";\n\n/** Visual style variant of the button. */\nexport type ButtonVariant =\n  | \"primary\"\n  | \"secondary\"\n  | \"tertiary\"\n  | \"link\"\n  | \"brand\"\n  | \"destructive\"\n  | \"white\"\n  | \"tertiaryDestructive\"\n  | \"text\";\n\n/** Button height in pixels. */\nexport type ButtonSize = \"48\" | \"40\" | \"32\" | \"24\";\n\nexport interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Visual style variant of the button. @default \"primary\" */\n  variant?: ButtonVariant;\n  /** Height of the button in pixels. @default \"40\" */\n  size?: ButtonSize;\n  /** Icon element displayed before the label. */\n  leftIcon?: React.ReactNode;\n  /** Icon element displayed after the label. */\n  rightIcon?: React.ReactNode;\n  /** When `true`, replaces the label with a spinner and disables interaction. @default false */\n  loading?: boolean;\n  /** Merge props onto a child element instead of rendering a `<button>`. @default false */\n  asChild?: boolean;\n  /** Old price shown with a strikethrough before the current price. */\n  discount?: string;\n  /** Current price shown inside the button after the label and icons. */\n  price?: string;\n  /** When `true`, the button will take the full width of its container. @default false */\n  fullWidth?: boolean;\n}\n\nconst SIZE_CLASSES: Record<ButtonSize, string> = {\n  \"48\": \"h-12 px-4 py-3 typography-button-large\",\n  \"40\": \"h-10 px-4 py-2 typography-button-small\",\n  \"32\": \"h-8 px-3 py-2 typography-body-2-semibold\",\n  \"24\": \"h-6 px-2 py-1 typography-body-2-semibold\",\n};\n\nconst ICON_SIZE_CLASS: Record<ButtonSize, string> = {\n  \"48\": \"size-5\",\n  \"40\": \"size-5\",\n  \"32\": \"size-4\",\n  \"24\": \"size-3.5\",\n};\n\n/** Targets only direct SVG children so non-icon content (e.g. Pill) can size naturally. */\nconst ICON_WRAPPER_CLASS: Record<ButtonSize, string> = {\n  \"48\": \"[&>svg]:size-5\",\n  \"40\": \"[&>svg]:size-5\",\n  \"32\": \"[&>svg]:size-4\",\n  \"24\": \"[&>svg]:size-3.5\",\n};\n\nconst VARIANT_CLASSES: Record<ButtonVariant, string> = {\n  primary:\n    \"bg-neutral-400 text-body-300 hover:bg-brand-green-500 hover:text-body-black-solid-constant active:bg-brand-green-500 active:text-body-black-solid-constant\",\n  secondary:\n    \"border-body-100 border border-1 border-body-100 bg-transparent text-body-100 hover:bg-brand-green-50 active:bg-brand-green-50\",\n  tertiary: \"bg-transparent text-body-100 hover:bg-brand-green-50 active:bg-brand-green-50\",\n  link: \"bg-transparent text-body-100 underline decoration-solid hover:bg-brand-green-50 active:bg-brand-green-50\",\n  brand:\n    \"bg-brand-green-500 text-body-black-solid-constant hover:bg-brand-pink-500 active:bg-brand-pink-500\",\n  destructive:\n    \"bg-error-500 text-body-white-solid-constant hover:bg-background-solid dark:hover:bg-background-white-solid-constant dark:hover:text-error-500 active:bg-background-solid dark:active:bg-background-white-solid-constant dark:active:text-error-500\",\n  white:\n    \"bg-background-white-solid-constant text-body-black-solid-constant hover:bg-brand-green-500 active:bg-brand-green-500\",\n  tertiaryDestructive: \"bg-transparent text-error-500 hover:bg-error-50 active:bg-error-50\",\n  text: \"bg-transparent text-body-100 hover:underline active:underline\",\n};\n\n/** Recursively extract text content from React nodes for accessible labels */\nfunction getTextContent(node: React.ReactNode): string | undefined {\n  if (typeof node === \"string\") return node;\n  if (typeof node === \"number\") return String(node);\n  if (React.isValidElement(node)) {\n    return getTextContent((node.props as { children?: React.ReactNode }).children);\n  }\n  if (Array.isArray(node)) {\n    const text = node.map(getTextContent).filter(Boolean).join(\"\");\n    return text || undefined;\n  }\n  return undefined;\n}\n\nconst LoadingSpinner = ({ size }: { size: ButtonSize }) => {\n  return (\n    <span className=\"animate-spin\" aria-hidden=\"true\">\n      <SpinnerIcon className={ICON_SIZE_CLASS[size]}>\n        <title>Loading</title>\n      </SpinnerIcon>\n    </span>\n  );\n};\n\nfunction renderContent({\n  loading,\n  asChild,\n  children,\n  size,\n  leftIcon,\n  rightIcon,\n  iconSizeClass,\n  discount,\n  price,\n}: {\n  loading: boolean;\n  asChild: boolean;\n  children: React.ReactNode;\n  size: ButtonSize;\n  leftIcon: React.ReactNode;\n  rightIcon: React.ReactNode;\n  iconSizeClass: string;\n  discount?: string;\n  price?: string;\n  fullWidth?: boolean;\n}) {\n  if (loading) {\n    // When asChild, clone the child element with spinner content instead of\n    // wrapping in sr-only span (which would nest interactive elements)\n    if (asChild && React.isValidElement(children)) {\n      return React.cloneElement(\n        children as React.ReactElement<{ children?: React.ReactNode }>,\n        undefined,\n        <LoadingSpinner size={size} />,\n      );\n    }\n    return (\n      <>\n        <LoadingSpinner size={size} />\n        <span className=\"sr-only\">{children}</span>\n      </>\n    );\n  }\n\n  if (asChild) return children;\n\n  return (\n    <>\n      {leftIcon && (\n        <span\n          className={cn(\"flex shrink-0 items-center justify-center\", iconSizeClass)}\n          aria-hidden=\"true\"\n        >\n          {leftIcon}\n        </span>\n      )}\n      {children}\n      {rightIcon && (\n        <span\n          className={cn(\"flex shrink-0 items-center justify-center\", iconSizeClass)}\n          aria-hidden=\"true\"\n        >\n          {rightIcon}\n        </span>\n      )}\n      {(price || discount) && (\n        <div>\n          {discount && (\n            <span className=\"typography-body-1-regular line-through\" aria-hidden=\"true\">\n              {discount}\n            </span>\n          )}\n          {price && (\n            <span className=\"ml-2\" aria-hidden=\"true\">\n              {price}\n            </span>\n          )}\n        </div>\n      )}\n    </>\n  );\n}\n\n/**\n * A versatile button component with multiple visual variants, sizes, icon\n * slots, loading state, and optional pricing display.\n *\n * @example\n * ```tsx\n * <Button variant=\"brand\" size=\"40\" leftIcon={<StarIcon />}>\n *   Subscribe\n * </Button>\n * ```\n */\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  (\n    {\n      className,\n      variant = \"primary\",\n      size = \"40\",\n      leftIcon,\n      rightIcon,\n      loading = false,\n      asChild = false,\n      disabled,\n      children,\n      discount,\n      price,\n      fullWidth = false,\n      ...props\n    },\n    ref,\n  ) => {\n    const Comp = asChild ? Slot : \"button\";\n    const isDisabled = disabled || loading;\n    const iconSizeClass = ICON_WRAPPER_CLASS[size];\n\n    const buttonSpecificProps = !asChild\n      ? {\n          type: \"button\" as const,\n          \"data-testid\": \"button\",\n          disabled: isDisabled,\n        }\n      : isDisabled\n        ? { \"aria-disabled\": true }\n        : {};\n\n    // When asChild + loading, extract text from children for aria-label since we\n    // can't wrap element children in an sr-only span (creates invalid nested markup)\n    const loadingLabelProps = loading && asChild ? { \"aria-label\": getTextContent(children) } : {};\n\n    const content = renderContent({\n      loading,\n      asChild,\n      children,\n      size,\n      leftIcon,\n      rightIcon,\n      iconSizeClass,\n      discount,\n      price,\n    });\n\n    return (\n      <Comp\n        ref={ref}\n        {...buttonSpecificProps}\n        aria-busy={loading}\n        {...loadingLabelProps}\n        className={cn(\n          // Base styles\n          \"inline-flex cursor-pointer items-center gap-2 whitespace-nowrap rounded-full transition-colors\",\n          // Focus ring\n          \"focus-visible:shadow-focus-ring focus-visible:outline-none\",\n          // Disabled state\n          \"disabled:pointer-events-none disabled:opacity-50\",\n          \"aria-disabled:pointer-events-none aria-disabled:opacity-50\",\n          `${price ? \"justify-between\" : \"justify-center\"}`,\n          fullWidth && \"w-full\",\n          // Size styles\n          SIZE_CLASSES[size],\n          // Variant styles\n          VARIANT_CLASSES[variant],\n          // Manual CSS overrides\n          className,\n        )}\n        {...props}\n      >\n        {content}\n      </Comp>\n    );\n  },\n);\n\nButton.displayName = \"Button\";\n"],"names":["React","jsx","SpinnerIcon","jsxs","Fragment","cn","Slot"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAyCA,MAAM,eAA2C;AAAA,EAC/C,MAAM;AAAA,EACN,MAAM;AAAA,EACN,MAAM;AAAA,EACN,MAAM;AACR;AAEA,MAAM,kBAA8C;AAAA,EAClD,MAAM;AAAA,EACN,MAAM;AAAA,EACN,MAAM;AAAA,EACN,MAAM;AACR;AAGA,MAAM,qBAAiD;AAAA,EACrD,MAAM;AAAA,EACN,MAAM;AAAA,EACN,MAAM;AAAA,EACN,MAAM;AACR;AAEA,MAAM,kBAAiD;AAAA,EACrD,SACE;AAAA,EACF,WACE;AAAA,EACF,UAAU;AAAA,EACV,MAAM;AAAA,EACN,OACE;AAAA,EACF,aACE;AAAA,EACF,OACE;AAAA,EACF,qBAAqB;AAAA,EACrB,MAAM;AACR;AAGA,SAAS,eAAe,MAA2C;AACjE,MAAI,OAAO,SAAS,SAAU,QAAO;AACrC,MAAI,OAAO,SAAS,SAAU,QAAO,OAAO,IAAI;AAChD,MAAIA,iBAAM,eAAe,IAAI,GAAG;AAC9B,WAAO,eAAgB,KAAK,MAAyC,QAAQ;AAAA,EAC/E;AACA,MAAI,MAAM,QAAQ,IAAI,GAAG;AACvB,UAAM,OAAO,KAAK,IAAI,cAAc,EAAE,OAAO,OAAO,EAAE,KAAK,EAAE;AAC7D,WAAO,QAAQ;AAAA,EACjB;AACA,SAAO;AACT;AAEA,MAAM,iBAAiB,CAAC,EAAE,WAAiC;AACzD,wCACG,QAAA,EAAK,WAAU,gBAAe,eAAY,QACzC,UAAAC,2BAAAA,IAACC,yBAAA,EAAY,WAAW,gBAAgB,IAAI,GAC1C,UAAAD,+BAAC,SAAA,EAAM,UAAA,UAAA,CAAO,GAChB,GACF;AAEJ;AAEA,SAAS,cAAc;AAAA,EACrB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAWG;AACD,MAAI,SAAS;AAGX,QAAI,WAAWD,iBAAM,eAAe,QAAQ,GAAG;AAC7C,aAAOA,iBAAM;AAAA,QACX;AAAA,QACA;AAAA,QACAC,+BAAC,kBAAe,KAAA,CAAY;AAAA,MAAA;AAAA,IAEhC;AACA,WACEE,2BAAAA,KAAAC,qBAAA,EACE,UAAA;AAAA,MAAAH,+BAAC,kBAAe,MAAY;AAAA,MAC5BA,2BAAAA,IAAC,QAAA,EAAK,WAAU,WAAW,SAAA,CAAS;AAAA,IAAA,GACtC;AAAA,EAEJ;AAEA,MAAI,QAAS,QAAO;AAEpB,SACEE,2BAAAA,KAAAC,qBAAA,EACG,UAAA;AAAA,IAAA,YACCH,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWI,GAAAA,GAAG,6CAA6C,aAAa;AAAA,QACxE,eAAY;AAAA,QAEX,UAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAGJ;AAAA,IACA,aACCJ,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWI,GAAAA,GAAG,6CAA6C,aAAa;AAAA,QACxE,eAAY;AAAA,QAEX,UAAA;AAAA,MAAA;AAAA,IAAA;AAAA,KAGH,SAAS,aACTF,2BAAAA,KAAC,OAAA,EACE,UAAA;AAAA,MAAA,2CACE,QAAA,EAAK,WAAU,0CAAyC,eAAY,QAClE,UAAA,UACH;AAAA,MAED,SACCF,2BAAAA,IAAC,QAAA,EAAK,WAAU,QAAO,eAAY,QAChC,UAAA,MAAA,CACH;AAAA,IAAA,EAAA,CAEJ;AAAA,EAAA,GAEJ;AAEJ;AAaO,MAAM,SAASD,iBAAM;AAAA,EAC1B,CACE;AAAA,IACE;AAAA,IACA,UAAU;AAAA,IACV,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,OAAO,UAAUM,UAAAA,OAAO;AAC9B,UAAM,aAAa,YAAY;AAC/B,UAAM,gBAAgB,mBAAmB,IAAI;AAE7C,UAAM,sBAAsB,CAAC,UACzB;AAAA,MACE,MAAM;AAAA,MACN,eAAe;AAAA,MACf,UAAU;AAAA,IAAA,IAEZ,aACE,EAAE,iBAAiB,KAAA,IACnB,CAAA;AAIN,UAAM,oBAAoB,WAAW,UAAU,EAAE,cAAc,eAAe,QAAQ,EAAA,IAAM,CAAA;AAE5F,UAAM,UAAU,cAAc;AAAA,MAC5B;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA,CACD;AAED,WACEL,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACC,GAAG;AAAA,QACJ,aAAW;AAAA,QACV,GAAG;AAAA,QACJ,WAAWI,GAAAA;AAAAA;AAAAA,UAET;AAAA;AAAA,UAEA;AAAA;AAAA,UAEA;AAAA,UACA;AAAA,UACA,GAAG,QAAQ,oBAAoB,gBAAgB;AAAA,UAC/C,aAAa;AAAA;AAAA,UAEb,aAAa,IAAI;AAAA;AAAA,UAEjB,gBAAgB,OAAO;AAAA;AAAA,UAEvB;AAAA,QAAA;AAAA,QAED,GAAG;AAAA,QAEH,UAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAEA,OAAO,cAAc;;"}

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

@@ -42,11 +42,11 @@ const iconSizeVariants = {
   72: "[&>svg]:size-8"
 };
 const sizeVariants = {
-  24: "p-1",
-  32: "p-1.5",
-  40: "p-[10px]",
-  52: "p-2",
-  72: "p-4"
+  24: "size-6 p-1",
+  32: "size-8 p-1.5",
+  40: "size-10 p-[10px]",
+  52: "size-[52px] p-2",
+  72: "size-[72px] p-4"
 };
 const countSizeMap = {
   24: "16",

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: \"p-1\",\n  32: \"p-1.5\",\n  40: \"p-[10px]\",\n  52: \"p-2\",\n  72: \"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            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;;"}

package/dist/cjs/components/Select/Select.cjs

@@ -107,7 +107,7 @@ const Select = React__namespace.forwardRef(
                   disabled && "cursor-not-allowed opacity-50"
                 ),
                 children: [
-                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [
                     leftIcon && /* @__PURE__ */ jsxRuntime.jsx(
                       "span",
                       {

package/dist/cjs/components/Select/Select.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Select.cjs","sources":["../../../../src/components/Select/Select.tsx"],"sourcesContent":["import * as SelectPrimitive from \"@radix-ui/react-select\";\nimport * as React from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport { CheckIcon } from \"../Icons/CheckIcon\";\nimport { ChevronDownIcon } from \"../Icons/ChevronDownIcon\";\n\n/** Select field height in pixels. */\nexport type SelectSize = \"48\" | \"40\" | \"32\";\n\ntype SelectContextValue = {\n  size: SelectSize;\n  error: boolean;\n  disabled?: boolean;\n};\n\nconst SelectContext = React.createContext<SelectContextValue>({\n  size: \"48\",\n  error: false,\n});\n\nconst TRIGGER_HEIGHT: Record<SelectSize, string> = {\n  \"48\": \"h-12\",\n  \"40\": \"h-10\",\n  \"32\": \"h-8\",\n};\n\nconst TRIGGER_PADDING_X: Record<SelectSize, string> = {\n  \"48\": \"px-4\",\n  \"40\": \"px-4\",\n  \"32\": \"px-3\",\n};\n\nconst TRIGGER_GAP: Record<SelectSize, string> = {\n  \"48\": \"gap-3\",\n  \"40\": \"gap-3\",\n  \"32\": \"gap-2\",\n};\n\nconst TRIGGER_TYPOGRAPHY: Record<SelectSize, string> = {\n  \"48\": \"typography-body-1-regular\",\n  \"40\": \"typography-body-1-regular\",\n  \"32\": \"typography-body-2-regular\",\n};\n\nexport interface SelectProps extends Omit<SelectPrimitive.SelectProps, \"dir\"> {\n  /** Label text displayed above the trigger. Also used as the accessible name. */\n  label?: string;\n  /** Accessible name applied directly to the trigger button when no visible `label` is provided. */\n  \"aria-label\"?: string;\n  /** ID of an external element that labels the trigger button. */\n  \"aria-labelledby\"?: string;\n  /** Helper text displayed below the trigger. Replaced by `errorMessage` when `error` is `true`. */\n  helperText?: string;\n  /** Height of the select field in pixels. @default \"48\" */\n  size?: SelectSize;\n  /** Whether the field is in an error state. @default false */\n  error?: boolean;\n  /** Error message displayed below the trigger. Shown instead of `helperText` when `error` is `true`. */\n  errorMessage?: string;\n  /** Placeholder shown when no value is selected. */\n  placeholder?: string;\n  /** Icon element displayed at the left side of the trigger. */\n  leftIcon?: React.ReactNode;\n  /** Whether the field stretches to fill its container width. @default false */\n  fullWidth?: boolean;\n  /** Wraps the `className` of the outermost container div. */\n  className?: string;\n  /** HTML `id` applied to the trigger button. Auto-generated if omitted. */\n  id?: string;\n}\n\n/**\n * A select field with optional label, helper/error text, and an icon slot,\n * built on Radix UI Select for full accessibility and keyboard navigation.\n *\n * Pair with {@link SelectContent} and {@link SelectItem} to provide options.\n *\n * @example\n * ```tsx\n * <Select label=\"Country\" placeholder=\"Select a country\">\n *   <SelectContent>\n *     <SelectItem value=\"us\">United States</SelectItem>\n *     <SelectItem value=\"uk\">United Kingdom</SelectItem>\n *   </SelectContent>\n * </Select>\n * ```\n */\nexport const Select = React.forwardRef<\n  React.ComponentRef<typeof SelectPrimitive.Trigger>,\n  SelectProps\n>(\n  (\n    {\n      label,\n      helperText,\n      size = \"48\",\n      error = false,\n      errorMessage,\n      placeholder,\n      leftIcon,\n      fullWidth = false,\n      className,\n      id,\n      disabled,\n      children,\n      \"aria-label\": ariaLabel,\n      \"aria-labelledby\": ariaLabelledby,\n      ...props\n    },\n    ref,\n  ) => {\n    const generatedId = React.useId();\n    const triggerId = id ?? generatedId;\n    const helperTextId = `${triggerId}-helper`;\n    const bottomText = error && errorMessage ? errorMessage : helperText;\n\n    return (\n      <SelectContext.Provider value={{ size, error, disabled }}>\n        <div\n          className={cn(\"flex flex-col\", fullWidth && \"w-full\", className)}\n          data-disabled={disabled ? \"\" : undefined}\n          data-error={error ? \"\" : undefined}\n        >\n          {label && (\n            <label\n              htmlFor={triggerId}\n              className=\"typography-caption-semibold px-1 pt-1 pb-2 text-body-100\"\n            >\n              {label}\n            </label>\n          )}\n\n          <SelectPrimitive.Root disabled={disabled} {...props}>\n            <SelectPrimitive.Trigger\n              ref={ref}\n              id={triggerId}\n              aria-label={ariaLabel}\n              aria-labelledby={ariaLabelledby}\n              aria-describedby={bottomText ? helperTextId : undefined}\n              aria-invalid={error || undefined}\n              className={cn(\n                \"flex w-full cursor-pointer items-center justify-between rounded-xl border bg-neutral-100 outline-none motion-safe:transition-colors\",\n                TRIGGER_HEIGHT[size],\n                TRIGGER_PADDING_X[size],\n                TRIGGER_GAP[size],\n                TRIGGER_TYPOGRAPHY[size],\n                error ? \"border-error-500\" : \"border-transparent\",\n                !disabled &&\n                  !error &&\n                  \"hover:border-neutral-400 data-[state=open]:border-neutral-400\",\n                disabled && \"cursor-not-allowed opacity-50\",\n              )}\n            >\n              <div className=\"flex items-center gap-2\">\n                {leftIcon && (\n                  <span\n                    className=\"flex size-5 shrink-0 items-center justify-center text-body-200\"\n                    data-testid=\"left-icon\"\n                  >\n                    {leftIcon}\n                  </span>\n                )}\n                <SelectPrimitive.Value\n                  placeholder={placeholder}\n                  className=\"min-w-0 flex-1 truncate text-left text-body-100 data-placeholder:text-body-200 data-placeholder:opacity-40\"\n                />\n              </div>\n\n              <SelectPrimitive.Icon asChild>\n                <ChevronDownIcon />\n              </SelectPrimitive.Icon>\n            </SelectPrimitive.Trigger>\n\n            {children}\n          </SelectPrimitive.Root>\n\n          {bottomText && (\n            <p\n              id={helperTextId}\n              className={cn(\n                \"typography-caption-regular px-2 pt-1 pb-0.5\",\n                error ? \"text-error-500\" : \"text-body-200\",\n              )}\n            >\n              {bottomText}\n            </p>\n          )}\n        </div>\n      </SelectContext.Provider>\n    );\n  },\n);\n\nSelect.displayName = \"Select\";\n\nexport interface SelectContentProps\n  extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content> {}\n\n/**\n * The dropdown panel rendered inside a portal. Place {@link SelectItem} elements\n * (and optionally {@link SelectGroup} / {@link SelectLabel}) as children.\n */\nexport const SelectContent = React.forwardRef<\n  React.ComponentRef<typeof SelectPrimitive.Content>,\n  SelectContentProps\n>(({ className, children, position = \"popper\", sideOffset = 4, style, ...props }, ref) => (\n  <SelectPrimitive.Portal>\n    <SelectPrimitive.Content\n      ref={ref}\n      position={position}\n      sideOffset={sideOffset}\n      style={{ zIndex: \"var(--fanvue-ui-portal-z-index, 50)\", ...style }}\n      className={cn(\n        \"relative min-w-(--radix-select-trigger-width) overflow-hidden rounded-xl border border-neutral-200 bg-background-inverse-solid text-body-100 shadow-[0_4px_16px_rgba(0,0,0,0.10)]\",\n        \"data-[state=closed]:animate-out data-[state=open]:animate-in\",\n        \"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\",\n        \"data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95\",\n        \"data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2\",\n        className,\n      )}\n      {...props}\n    >\n      <SelectPrimitive.Viewport className=\"max-h-[var(--radix-select-content-available-height)] overflow-y-auto p-1\">\n        {children}\n      </SelectPrimitive.Viewport>\n    </SelectPrimitive.Content>\n  </SelectPrimitive.Portal>\n));\n\nSelectContent.displayName = \"SelectContent\";\n\nexport interface SelectItemProps\n  extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item> {}\n\n/**\n * An individual option inside {@link SelectContent}.\n */\nexport const SelectItem = React.forwardRef<\n  React.ComponentRef<typeof SelectPrimitive.Item>,\n  SelectItemProps\n>(({ className, children, ...props }, ref) => (\n  <SelectPrimitive.Item\n    ref={ref}\n    className={cn(\n      \"typography-body-1-regular relative flex w-full cursor-pointer select-none items-center gap-2 rounded-lg py-2 pr-2 pl-3 text-body-100 outline-none\",\n      \"focus:bg-neutral-100 data-disabled:pointer-events-none data-disabled:opacity-50\",\n      className,\n    )}\n    {...props}\n  >\n    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n    <SelectPrimitive.ItemIndicator className=\"ml-auto flex size-4 shrink-0 items-center justify-center\">\n      <CheckIcon className=\"size-4 text-body-100\" />\n    </SelectPrimitive.ItemIndicator>\n  </SelectPrimitive.Item>\n));\n\nSelectItem.displayName = \"SelectItem\";\n\n/** Props for {@link SelectGroup}. */\nexport type SelectGroupProps = React.ComponentPropsWithoutRef<typeof SelectPrimitive.Group>;\n\n/**\n * Groups related {@link SelectItem} elements under a {@link SelectLabel}.\n */\nexport const SelectGroup = SelectPrimitive.Group;\nSelectGroup.displayName = \"SelectGroup\";\n\nexport interface SelectLabelProps\n  extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label> {}\n\n/**\n * A non-interactive label shown above a {@link SelectGroup}.\n */\nexport const SelectLabel = React.forwardRef<\n  React.ComponentRef<typeof SelectPrimitive.Label>,\n  SelectLabelProps\n>(({ className, ...props }, ref) => (\n  <SelectPrimitive.Label\n    ref={ref}\n    className={cn(\"typography-caption-semibold px-3 py-1.5 text-body-200\", className)}\n    {...props}\n  />\n));\n\nSelectLabel.displayName = \"SelectLabel\";\n\nexport interface SelectSeparatorProps\n  extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator> {}\n\n/** A horizontal rule that visually separates groups in {@link SelectContent}. */\nexport const SelectSeparator = React.forwardRef<\n  React.ComponentRef<typeof SelectPrimitive.Separator>,\n  SelectSeparatorProps\n>(({ className, ...props }, ref) => (\n  <SelectPrimitive.Separator\n    ref={ref}\n    className={cn(\"-mx-1 my-1 h-px bg-neutral-200\", className)}\n    {...props}\n  />\n));\n\nSelectSeparator.displayName = \"SelectSeparator\";\n"],"names":["React","jsx","jsxs","cn","SelectPrimitive","ChevronDownIcon","CheckIcon"],"mappings":"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"}
+{"version":3,"file":"Select.cjs","sources":["../../../../src/components/Select/Select.tsx"],"sourcesContent":["import * as SelectPrimitive from \"@radix-ui/react-select\";\nimport * as React from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport { CheckIcon } from \"../Icons/CheckIcon\";\nimport { ChevronDownIcon } from \"../Icons/ChevronDownIcon\";\n\n/** Select field height in pixels. */\nexport type SelectSize = \"48\" | \"40\" | \"32\";\n\ntype SelectContextValue = {\n  size: SelectSize;\n  error: boolean;\n  disabled?: boolean;\n};\n\nconst SelectContext = React.createContext<SelectContextValue>({\n  size: \"48\",\n  error: false,\n});\n\nconst TRIGGER_HEIGHT: Record<SelectSize, string> = {\n  \"48\": \"h-12\",\n  \"40\": \"h-10\",\n  \"32\": \"h-8\",\n};\n\nconst TRIGGER_PADDING_X: Record<SelectSize, string> = {\n  \"48\": \"px-4\",\n  \"40\": \"px-4\",\n  \"32\": \"px-3\",\n};\n\nconst TRIGGER_GAP: Record<SelectSize, string> = {\n  \"48\": \"gap-3\",\n  \"40\": \"gap-3\",\n  \"32\": \"gap-2\",\n};\n\nconst TRIGGER_TYPOGRAPHY: Record<SelectSize, string> = {\n  \"48\": \"typography-body-1-regular\",\n  \"40\": \"typography-body-1-regular\",\n  \"32\": \"typography-body-2-regular\",\n};\n\nexport interface SelectProps extends Omit<SelectPrimitive.SelectProps, \"dir\"> {\n  /** Label text displayed above the trigger. Also used as the accessible name. */\n  label?: string;\n  /** Accessible name applied directly to the trigger button when no visible `label` is provided. */\n  \"aria-label\"?: string;\n  /** ID of an external element that labels the trigger button. */\n  \"aria-labelledby\"?: string;\n  /** Helper text displayed below the trigger. Replaced by `errorMessage` when `error` is `true`. */\n  helperText?: string;\n  /** Height of the select field in pixels. @default \"48\" */\n  size?: SelectSize;\n  /** Whether the field is in an error state. @default false */\n  error?: boolean;\n  /** Error message displayed below the trigger. Shown instead of `helperText` when `error` is `true`. */\n  errorMessage?: string;\n  /** Placeholder shown when no value is selected. */\n  placeholder?: string;\n  /** Icon element displayed at the left side of the trigger. */\n  leftIcon?: React.ReactNode;\n  /** Whether the field stretches to fill its container width. @default false */\n  fullWidth?: boolean;\n  /** Wraps the `className` of the outermost container div. */\n  className?: string;\n  /** HTML `id` applied to the trigger button. Auto-generated if omitted. */\n  id?: string;\n}\n\n/**\n * A select field with optional label, helper/error text, and an icon slot,\n * built on Radix UI Select for full accessibility and keyboard navigation.\n *\n * Pair with {@link SelectContent} and {@link SelectItem} to provide options.\n *\n * @example\n * ```tsx\n * <Select label=\"Country\" placeholder=\"Select a country\">\n *   <SelectContent>\n *     <SelectItem value=\"us\">United States</SelectItem>\n *     <SelectItem value=\"uk\">United Kingdom</SelectItem>\n *   </SelectContent>\n * </Select>\n * ```\n */\nexport const Select = React.forwardRef<\n  React.ComponentRef<typeof SelectPrimitive.Trigger>,\n  SelectProps\n>(\n  (\n    {\n      label,\n      helperText,\n      size = \"48\",\n      error = false,\n      errorMessage,\n      placeholder,\n      leftIcon,\n      fullWidth = false,\n      className,\n      id,\n      disabled,\n      children,\n      \"aria-label\": ariaLabel,\n      \"aria-labelledby\": ariaLabelledby,\n      ...props\n    },\n    ref,\n  ) => {\n    const generatedId = React.useId();\n    const triggerId = id ?? generatedId;\n    const helperTextId = `${triggerId}-helper`;\n    const bottomText = error && errorMessage ? errorMessage : helperText;\n\n    return (\n      <SelectContext.Provider value={{ size, error, disabled }}>\n        <div\n          className={cn(\"flex flex-col\", fullWidth && \"w-full\", className)}\n          data-disabled={disabled ? \"\" : undefined}\n          data-error={error ? \"\" : undefined}\n        >\n          {label && (\n            <label\n              htmlFor={triggerId}\n              className=\"typography-caption-semibold px-1 pt-1 pb-2 text-body-100\"\n            >\n              {label}\n            </label>\n          )}\n\n          <SelectPrimitive.Root disabled={disabled} {...props}>\n            <SelectPrimitive.Trigger\n              ref={ref}\n              id={triggerId}\n              aria-label={ariaLabel}\n              aria-labelledby={ariaLabelledby}\n              aria-describedby={bottomText ? helperTextId : undefined}\n              aria-invalid={error || undefined}\n              className={cn(\n                \"flex w-full cursor-pointer items-center justify-between rounded-xl border bg-neutral-100 outline-none motion-safe:transition-colors\",\n                TRIGGER_HEIGHT[size],\n                TRIGGER_PADDING_X[size],\n                TRIGGER_GAP[size],\n                TRIGGER_TYPOGRAPHY[size],\n                error ? \"border-error-500\" : \"border-transparent\",\n                !disabled &&\n                  !error &&\n                  \"hover:border-neutral-400 data-[state=open]:border-neutral-400\",\n                disabled && \"cursor-not-allowed opacity-50\",\n              )}\n            >\n              <div className=\"flex min-w-0 items-center gap-2\">\n                {leftIcon && (\n                  <span\n                    className=\"flex size-5 shrink-0 items-center justify-center text-body-200\"\n                    data-testid=\"left-icon\"\n                  >\n                    {leftIcon}\n                  </span>\n                )}\n                <SelectPrimitive.Value\n                  placeholder={placeholder}\n                  className=\"min-w-0 flex-1 truncate text-left text-body-100 data-placeholder:text-body-200 data-placeholder:opacity-40\"\n                />\n              </div>\n\n              <SelectPrimitive.Icon asChild>\n                <ChevronDownIcon />\n              </SelectPrimitive.Icon>\n            </SelectPrimitive.Trigger>\n\n            {children}\n          </SelectPrimitive.Root>\n\n          {bottomText && (\n            <p\n              id={helperTextId}\n              className={cn(\n                \"typography-caption-regular px-2 pt-1 pb-0.5\",\n                error ? \"text-error-500\" : \"text-body-200\",\n              )}\n            >\n              {bottomText}\n            </p>\n          )}\n        </div>\n      </SelectContext.Provider>\n    );\n  },\n);\n\nSelect.displayName = \"Select\";\n\nexport interface SelectContentProps\n  extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content> {}\n\n/**\n * The dropdown panel rendered inside a portal. Place {@link SelectItem} elements\n * (and optionally {@link SelectGroup} / {@link SelectLabel}) as children.\n */\nexport const SelectContent = React.forwardRef<\n  React.ComponentRef<typeof SelectPrimitive.Content>,\n  SelectContentProps\n>(({ className, children, position = \"popper\", sideOffset = 4, style, ...props }, ref) => (\n  <SelectPrimitive.Portal>\n    <SelectPrimitive.Content\n      ref={ref}\n      position={position}\n      sideOffset={sideOffset}\n      style={{ zIndex: \"var(--fanvue-ui-portal-z-index, 50)\", ...style }}\n      className={cn(\n        \"relative min-w-(--radix-select-trigger-width) overflow-hidden rounded-xl border border-neutral-200 bg-background-inverse-solid text-body-100 shadow-[0_4px_16px_rgba(0,0,0,0.10)]\",\n        \"data-[state=closed]:animate-out data-[state=open]:animate-in\",\n        \"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\",\n        \"data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95\",\n        \"data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2\",\n        className,\n      )}\n      {...props}\n    >\n      <SelectPrimitive.Viewport className=\"max-h-[var(--radix-select-content-available-height)] overflow-y-auto p-1\">\n        {children}\n      </SelectPrimitive.Viewport>\n    </SelectPrimitive.Content>\n  </SelectPrimitive.Portal>\n));\n\nSelectContent.displayName = \"SelectContent\";\n\nexport interface SelectItemProps\n  extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item> {}\n\n/**\n * An individual option inside {@link SelectContent}.\n */\nexport const SelectItem = React.forwardRef<\n  React.ComponentRef<typeof SelectPrimitive.Item>,\n  SelectItemProps\n>(({ className, children, ...props }, ref) => (\n  <SelectPrimitive.Item\n    ref={ref}\n    className={cn(\n      \"typography-body-1-regular relative flex w-full cursor-pointer select-none items-center gap-2 rounded-lg py-2 pr-2 pl-3 text-body-100 outline-none\",\n      \"focus:bg-neutral-100 data-disabled:pointer-events-none data-disabled:opacity-50\",\n      className,\n    )}\n    {...props}\n  >\n    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n    <SelectPrimitive.ItemIndicator className=\"ml-auto flex size-4 shrink-0 items-center justify-center\">\n      <CheckIcon className=\"size-4 text-body-100\" />\n    </SelectPrimitive.ItemIndicator>\n  </SelectPrimitive.Item>\n));\n\nSelectItem.displayName = \"SelectItem\";\n\n/** Props for {@link SelectGroup}. */\nexport type SelectGroupProps = React.ComponentPropsWithoutRef<typeof SelectPrimitive.Group>;\n\n/**\n * Groups related {@link SelectItem} elements under a {@link SelectLabel}.\n */\nexport const SelectGroup = SelectPrimitive.Group;\nSelectGroup.displayName = \"SelectGroup\";\n\nexport interface SelectLabelProps\n  extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label> {}\n\n/**\n * A non-interactive label shown above a {@link SelectGroup}.\n */\nexport const SelectLabel = React.forwardRef<\n  React.ComponentRef<typeof SelectPrimitive.Label>,\n  SelectLabelProps\n>(({ className, ...props }, ref) => (\n  <SelectPrimitive.Label\n    ref={ref}\n    className={cn(\"typography-caption-semibold px-3 py-1.5 text-body-200\", className)}\n    {...props}\n  />\n));\n\nSelectLabel.displayName = \"SelectLabel\";\n\nexport interface SelectSeparatorProps\n  extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator> {}\n\n/** A horizontal rule that visually separates groups in {@link SelectContent}. */\nexport const SelectSeparator = React.forwardRef<\n  React.ComponentRef<typeof SelectPrimitive.Separator>,\n  SelectSeparatorProps\n>(({ className, ...props }, ref) => (\n  <SelectPrimitive.Separator\n    ref={ref}\n    className={cn(\"-mx-1 my-1 h-px bg-neutral-200\", className)}\n    {...props}\n  />\n));\n\nSelectSeparator.displayName = \"SelectSeparator\";\n"],"names":["React","jsx","jsxs","cn","SelectPrimitive","ChevronDownIcon","CheckIcon"],"mappings":"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"}

package/dist/cjs/components/TextArea/TextArea.cjs

@@ -58,9 +58,10 @@ function getContainerClassName(size, error, disabled) {
     disabled && "opacity-50"
   );
 }
-function getTextareaClassName(size, hasClearButton, hasMinRows) {
+function getTextareaClassName(size, hasClearButton, hasMinRows, resizable) {
   return cn.cn(
-    "w-full resize-y rounded-xl bg-transparent text-body-100 no-underline placeholder:text-body-200 placeholder:opacity-40 focus:outline-none disabled:cursor-not-allowed",
+    "w-full rounded-xl bg-transparent text-body-100 no-underline placeholder:text-body-200 placeholder:opacity-40 focus:outline-none disabled:cursor-not-allowed",
+    resizable ? "resize-y" : "resize-none",
     !hasMinRows && "min-h-[80px]",
     TEXTAREA_SIZE_CLASSES[size],
     PADDING_HORIZONTAL[size],
@@ -144,6 +145,7 @@ const TextArea = React__namespace.forwardRef(
     onChange,
     minRows,
     maxRows,
+    resizable = true,
     ...props
   }, ref) => {
     const generatedId = React__namespace.useId();
@@ -190,7 +192,7 @@ const TextArea = React__namespace.forwardRef(
                 disabled,
                 "aria-describedby": ariaDescribedBy,
                 "aria-invalid": error || void 0,
-                className: getTextareaClassName(size, showClear, !!minRows),
+                className: getTextareaClassName(size, showClear, !!minRows, resizable),
                 value: displayValue,
                 defaultValue: resolvedDefaultValue,
                 onChange: handleChange,

package/dist/cjs/components/TextArea/TextArea.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TextArea.cjs","sources":["../../../../src/components/TextArea/TextArea.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { IconButton } from \"../IconButton/IconButton\";\nimport { CheckOutlineIcon } from \"../Icons/CheckOutlineIcon\";\nimport { CloseIcon } from \"../Icons/CloseIcon\";\n\n/** Text area height in pixels. */\nexport type TextAreaSize = \"48\" | \"40\" | \"32\";\n\nexport interface TextAreaProps\n  extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, \"size\"> {\n  /** Label text displayed above the textarea. Also used as the accessible name. */\n  label?: string;\n  /** Helper text displayed below the textarea. Replaced by `errorMessage` when `error` is `true`. */\n  helperText?: string;\n  /** Minimum height of the text area in pixels. @default \"48\" */\n  size?: TextAreaSize;\n  /** Whether the text area is in an error state. @default false */\n  error?: boolean;\n  /** Error message displayed below the textarea. Shown instead of `helperText` when `error` is `true`. */\n  errorMessage?: string;\n  /** Whether the text area is validated. @default false */\n  validated?: boolean;\n  /** Whether the text area stretches to fill its container width. @default false */\n  fullWidth?: boolean;\n  /** Whether to show a clear button when text is present. @default false */\n  showClearButton?: boolean;\n  /** Callback fired when the clear button is clicked. Note: `onChange` is also called with an empty value when clearing. */\n  onClear?: () => void;\n  /** Minimum number of rows (lines) for the textarea. */\n  minRows?: number;\n  /** Maximum number of rows (lines) for the textarea. */\n  maxRows?: number;\n}\n\nconst CONTAINER_MIN_HEIGHT: Record<TextAreaSize, string> = {\n  \"48\": \"min-h-12\",\n  \"40\": \"min-h-10\",\n  \"32\": \"min-h-8\",\n};\n\nconst TEXTAREA_SIZE_CLASSES: Record<TextAreaSize, string> = {\n  \"48\": \"py-3 typography-body-1-regular\",\n  \"40\": \"py-2 typography-body-1-regular\",\n  \"32\": \"py-2 typography-body-2-regular\",\n};\n\nconst PADDING_HORIZONTAL: Record<TextAreaSize, string> = {\n  \"48\": \"px-4\",\n  \"40\": \"px-4\",\n  \"32\": \"px-3\",\n};\n\nconst PADDING_RIGHT_WITH_CLEAR: Record<TextAreaSize, string> = {\n  \"48\": \"pr-11\",\n  \"40\": \"pr-11\",\n  \"32\": \"pr-10\",\n};\n\nconst CLEAR_BUTTON_RIGHT: Record<TextAreaSize, string> = {\n  \"48\": \"right-4 top-3\",\n  \"40\": \"right-4 top-2\",\n  \"32\": \"right-3 top-2\",\n};\n\nfunction getContainerClassName(size: TextAreaSize, error: boolean, disabled?: boolean) {\n  return cn(\n    \"relative rounded-xl border bg-neutral-100 has-focus-visible:outline-none motion-safe:transition-colors\",\n    error ? \"border-error-500\" : \"border-transparent\",\n    !disabled && !error && \"hover:border-neutral-400\",\n    CONTAINER_MIN_HEIGHT[size],\n    disabled && \"opacity-50\",\n  );\n}\n\nfunction getTextareaClassName(size: TextAreaSize, hasClearButton: boolean, hasMinRows: boolean) {\n  return cn(\n    \"w-full resize-y rounded-xl bg-transparent text-body-100 no-underline placeholder:text-body-200 placeholder:opacity-40 focus:outline-none disabled:cursor-not-allowed\",\n    !hasMinRows && \"min-h-[80px]\",\n    TEXTAREA_SIZE_CLASSES[size],\n    PADDING_HORIZONTAL[size],\n    hasClearButton ? PADDING_RIGHT_WITH_CLEAR[size] : \"\",\n  );\n}\n\nfunction TextAreaHelperText({\n  id,\n  error,\n  children,\n}: {\n  id: string;\n  error: boolean;\n  children: React.ReactNode;\n}) {\n  return (\n    <p\n      id={id}\n      className={cn(\n        \"typography-caption-regular px-2 pt-1 pb-0.5\",\n        error ? \"text-error-500\" : \"text-body-200\",\n      )}\n    >\n      {children}\n    </p>\n  );\n}\n\nfunction warnMissingAccessibleName(label?: string, ariaLabel?: string, ariaLabelledBy?: string) {\n  if (process.env.NODE_ENV !== \"production\") {\n    if (!label && !ariaLabel && !ariaLabelledBy) {\n      console.warn(\n        \"TextArea: no accessible name provided. Pass a `label`, `aria-label`, or `aria-labelledby` prop.\",\n      );\n    }\n  }\n}\n\nfunction calculateMaxHeight(size: TextAreaSize, maxRows?: number): string | undefined {\n  if (!maxRows) return undefined;\n\n  // Line height is 24px for body-1 (sizes 48 and 40) and 20px for body-2 (size 32)\n  const lineHeight = size === \"32\" ? 20 : 24;\n  // py-2 = 8px, py-3 = 12px\n  const verticalPadding = size === \"32\" ? 8 : size === \"40\" ? 8 : 12;\n\n  return `${lineHeight * maxRows + verticalPadding * 2}px`;\n}\n\nfunction useTextAreaValue(\n  value: React.TextareaHTMLAttributes<HTMLTextAreaElement>[\"value\"],\n  defaultValue: React.TextareaHTMLAttributes<HTMLTextAreaElement>[\"defaultValue\"],\n  showClearButton: boolean,\n  onChange?: React.ChangeEventHandler<HTMLTextAreaElement>,\n  onClear?: () => void,\n  textareaRef?: React.RefObject<HTMLTextAreaElement | null>,\n) {\n  const [internalValue, setInternalValue] = React.useState(defaultValue ?? \"\");\n  const resolvedValue = value !== undefined ? value : internalValue;\n\n  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {\n    setInternalValue(e.target.value);\n    onChange?.(e);\n  };\n\n  const handleClear = () => {\n    setInternalValue(\"\");\n\n    if (onChange && textareaRef?.current) {\n      const syntheticEvent = {\n        target: { ...textareaRef.current, value: \"\" },\n        currentTarget: { ...textareaRef.current, value: \"\" },\n      } as React.ChangeEvent<HTMLTextAreaElement>;\n      onChange(syntheticEvent);\n    }\n\n    onClear?.();\n  };\n\n  return {\n    resolvedValue,\n    displayValue: showClearButton ? resolvedValue : value,\n    resolvedDefaultValue: showClearButton ? undefined : defaultValue,\n    handleChange,\n    handleClear,\n  };\n}\n\n/**\n * A multi-line text input with optional label, helper/error text, and clear button.\n *\n * Provide at least one of `label`, `aria-label`, or `aria-labelledby` for\n * accessibility — a console warning is emitted in development if none are set.\n *\n * @example\n * ```tsx\n * <TextArea\n *   label=\"Description\"\n *   placeholder=\"Enter your description...\"\n *   showClearButton\n *   error={!!descError}\n *   errorMessage={descError}\n * />\n * ```\n */\nexport const TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>(\n  (\n    {\n      label,\n      helperText,\n      size = \"48\",\n      error = false,\n      errorMessage,\n      validated = false,\n      className,\n      id,\n      disabled,\n      fullWidth = false,\n      showClearButton = false,\n      onClear,\n      value,\n      defaultValue,\n      onChange,\n      minRows,\n      maxRows,\n      ...props\n    },\n    ref,\n  ) => {\n    const generatedId = React.useId();\n    const inputId = id || generatedId;\n    const helperTextId = `${inputId}-helper`;\n    const bottomText = error && errorMessage ? errorMessage : helperText;\n    const maxHeight = calculateMaxHeight(size, maxRows);\n\n    const internalRef = React.useRef<HTMLTextAreaElement>(null);\n\n    const { resolvedValue, displayValue, resolvedDefaultValue, handleChange, handleClear } =\n      useTextAreaValue(value, defaultValue, showClearButton, onChange, onClear, internalRef);\n\n    const mergedRef = (node: HTMLTextAreaElement | null) => {\n      internalRef.current = node;\n      if (typeof ref === \"function\") {\n        ref(node);\n      } else if (ref) {\n        (ref as React.MutableRefObject<HTMLTextAreaElement | null>).current = node;\n      }\n    };\n\n    const showClear = showClearButton && resolvedValue !== \"\" && !disabled;\n    const showValidated = validated && !showClear;\n    const ariaDescribedBy = bottomText ? helperTextId : undefined;\n    const textareaStyle = maxHeight ? { maxHeight } : undefined;\n\n    warnMissingAccessibleName(label, props[\"aria-label\"], props[\"aria-labelledby\"]);\n\n    return (\n      <div\n        className={cn(\"flex flex-col\", fullWidth && \"w-full\", className)}\n        data-disabled={disabled ? \"\" : undefined}\n        data-error={error ? \"\" : undefined}\n      >\n        {label && (\n          <label\n            htmlFor={inputId}\n            className=\"typography-caption-semibold px-1 pt-1 pb-2 text-body-100\"\n          >\n            {label}\n          </label>\n        )}\n\n        <div className={getContainerClassName(size, error, disabled)}>\n          <textarea\n            ref={mergedRef}\n            id={inputId}\n            disabled={disabled}\n            aria-describedby={ariaDescribedBy}\n            aria-invalid={error || undefined}\n            className={getTextareaClassName(size, showClear, !!minRows)}\n            value={displayValue}\n            defaultValue={resolvedDefaultValue}\n            onChange={handleChange}\n            rows={minRows}\n            style={textareaStyle}\n            {...props}\n          />\n\n          {showClear && (\n            <IconButton\n              variant=\"tertiary\"\n              size=\"24\"\n              icon={<CloseIcon />}\n              aria-label=\"Clear text\"\n              onClick={handleClear}\n              className={cn(\n                \"absolute flex size-5 items-center justify-center self-end\",\n                CLEAR_BUTTON_RIGHT[size],\n              )}\n            />\n          )}\n          {showValidated && (\n            <div\n              className={cn(\n                \"pointer-events-none absolute flex size-5 items-center justify-center\",\n                CLEAR_BUTTON_RIGHT[size],\n              )}\n            >\n              <CheckOutlineIcon className=\"text-success-500\" />\n            </div>\n          )}\n        </div>\n\n        {bottomText && (\n          <TextAreaHelperText id={helperTextId} error={error}>\n            {bottomText}\n          </TextAreaHelperText>\n        )}\n      </div>\n    );\n  },\n);\n\nTextArea.displayName = \"TextArea\";\n"],"names":["cn","jsx","React","jsxs","IconButton","CloseIcon","CheckOutlineIcon"],"mappings":"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"}
+{"version":3,"file":"TextArea.cjs","sources":["../../../../src/components/TextArea/TextArea.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { IconButton } from \"../IconButton/IconButton\";\nimport { CheckOutlineIcon } from \"../Icons/CheckOutlineIcon\";\nimport { CloseIcon } from \"../Icons/CloseIcon\";\n\n/** Text area height in pixels. */\nexport type TextAreaSize = \"48\" | \"40\" | \"32\";\n\nexport interface TextAreaProps\n  extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, \"size\"> {\n  /** Label text displayed above the textarea. Also used as the accessible name. */\n  label?: string;\n  /** Helper text displayed below the textarea. Replaced by `errorMessage` when `error` is `true`. */\n  helperText?: string;\n  /** Minimum height of the text area in pixels. @default \"48\" */\n  size?: TextAreaSize;\n  /** Whether the text area is in an error state. @default false */\n  error?: boolean;\n  /** Error message displayed below the textarea. Shown instead of `helperText` when `error` is `true`. */\n  errorMessage?: string;\n  /** Whether the text area is validated. @default false */\n  validated?: boolean;\n  /** Whether the text area stretches to fill its container width. @default false */\n  fullWidth?: boolean;\n  /** Whether to show a clear button when text is present. @default false */\n  showClearButton?: boolean;\n  /** Callback fired when the clear button is clicked. Note: `onChange` is also called with an empty value when clearing. */\n  onClear?: () => void;\n  /** Minimum number of rows (lines) for the textarea. */\n  minRows?: number;\n  /** Maximum number of rows (lines) for the textarea. */\n  maxRows?: number;\n  /** Whether the textarea can be resized by the user. @default true */\n  resizable?: boolean;\n}\n\nconst CONTAINER_MIN_HEIGHT: Record<TextAreaSize, string> = {\n  \"48\": \"min-h-12\",\n  \"40\": \"min-h-10\",\n  \"32\": \"min-h-8\",\n};\n\nconst TEXTAREA_SIZE_CLASSES: Record<TextAreaSize, string> = {\n  \"48\": \"py-3 typography-body-1-regular\",\n  \"40\": \"py-2 typography-body-1-regular\",\n  \"32\": \"py-2 typography-body-2-regular\",\n};\n\nconst PADDING_HORIZONTAL: Record<TextAreaSize, string> = {\n  \"48\": \"px-4\",\n  \"40\": \"px-4\",\n  \"32\": \"px-3\",\n};\n\nconst PADDING_RIGHT_WITH_CLEAR: Record<TextAreaSize, string> = {\n  \"48\": \"pr-11\",\n  \"40\": \"pr-11\",\n  \"32\": \"pr-10\",\n};\n\nconst CLEAR_BUTTON_RIGHT: Record<TextAreaSize, string> = {\n  \"48\": \"right-4 top-3\",\n  \"40\": \"right-4 top-2\",\n  \"32\": \"right-3 top-2\",\n};\n\nfunction getContainerClassName(size: TextAreaSize, error: boolean, disabled?: boolean) {\n  return cn(\n    \"relative rounded-xl border bg-neutral-100 has-focus-visible:outline-none motion-safe:transition-colors\",\n    error ? \"border-error-500\" : \"border-transparent\",\n    !disabled && !error && \"hover:border-neutral-400\",\n    CONTAINER_MIN_HEIGHT[size],\n    disabled && \"opacity-50\",\n  );\n}\n\nfunction getTextareaClassName(\n  size: TextAreaSize,\n  hasClearButton: boolean,\n  hasMinRows: boolean,\n  resizable: boolean,\n) {\n  return cn(\n    \"w-full rounded-xl bg-transparent text-body-100 no-underline placeholder:text-body-200 placeholder:opacity-40 focus:outline-none disabled:cursor-not-allowed\",\n    resizable ? \"resize-y\" : \"resize-none\",\n    !hasMinRows && \"min-h-[80px]\",\n    TEXTAREA_SIZE_CLASSES[size],\n    PADDING_HORIZONTAL[size],\n    hasClearButton ? PADDING_RIGHT_WITH_CLEAR[size] : \"\",\n  );\n}\n\nfunction TextAreaHelperText({\n  id,\n  error,\n  children,\n}: {\n  id: string;\n  error: boolean;\n  children: React.ReactNode;\n}) {\n  return (\n    <p\n      id={id}\n      className={cn(\n        \"typography-caption-regular px-2 pt-1 pb-0.5\",\n        error ? \"text-error-500\" : \"text-body-200\",\n      )}\n    >\n      {children}\n    </p>\n  );\n}\n\nfunction warnMissingAccessibleName(label?: string, ariaLabel?: string, ariaLabelledBy?: string) {\n  if (process.env.NODE_ENV !== \"production\") {\n    if (!label && !ariaLabel && !ariaLabelledBy) {\n      console.warn(\n        \"TextArea: no accessible name provided. Pass a `label`, `aria-label`, or `aria-labelledby` prop.\",\n      );\n    }\n  }\n}\n\nfunction calculateMaxHeight(size: TextAreaSize, maxRows?: number): string | undefined {\n  if (!maxRows) return undefined;\n\n  // Line height is 24px for body-1 (sizes 48 and 40) and 20px for body-2 (size 32)\n  const lineHeight = size === \"32\" ? 20 : 24;\n  // py-2 = 8px, py-3 = 12px\n  const verticalPadding = size === \"32\" ? 8 : size === \"40\" ? 8 : 12;\n\n  return `${lineHeight * maxRows + verticalPadding * 2}px`;\n}\n\nfunction useTextAreaValue(\n  value: React.TextareaHTMLAttributes<HTMLTextAreaElement>[\"value\"],\n  defaultValue: React.TextareaHTMLAttributes<HTMLTextAreaElement>[\"defaultValue\"],\n  showClearButton: boolean,\n  onChange?: React.ChangeEventHandler<HTMLTextAreaElement>,\n  onClear?: () => void,\n  textareaRef?: React.RefObject<HTMLTextAreaElement | null>,\n) {\n  const [internalValue, setInternalValue] = React.useState(defaultValue ?? \"\");\n  const resolvedValue = value !== undefined ? value : internalValue;\n\n  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {\n    setInternalValue(e.target.value);\n    onChange?.(e);\n  };\n\n  const handleClear = () => {\n    setInternalValue(\"\");\n\n    if (onChange && textareaRef?.current) {\n      const syntheticEvent = {\n        target: { ...textareaRef.current, value: \"\" },\n        currentTarget: { ...textareaRef.current, value: \"\" },\n      } as React.ChangeEvent<HTMLTextAreaElement>;\n      onChange(syntheticEvent);\n    }\n\n    onClear?.();\n  };\n\n  return {\n    resolvedValue,\n    displayValue: showClearButton ? resolvedValue : value,\n    resolvedDefaultValue: showClearButton ? undefined : defaultValue,\n    handleChange,\n    handleClear,\n  };\n}\n\n/**\n * A multi-line text input with optional label, helper/error text, and clear button.\n *\n * Provide at least one of `label`, `aria-label`, or `aria-labelledby` for\n * accessibility — a console warning is emitted in development if none are set.\n *\n * @example\n * ```tsx\n * <TextArea\n *   label=\"Description\"\n *   placeholder=\"Enter your description...\"\n *   showClearButton\n *   error={!!descError}\n *   errorMessage={descError}\n * />\n * ```\n */\nexport const TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>(\n  (\n    {\n      label,\n      helperText,\n      size = \"48\",\n      error = false,\n      errorMessage,\n      validated = false,\n      className,\n      id,\n      disabled,\n      fullWidth = false,\n      showClearButton = false,\n      onClear,\n      value,\n      defaultValue,\n      onChange,\n      minRows,\n      maxRows,\n      resizable = true,\n      ...props\n    },\n    ref,\n  ) => {\n    const generatedId = React.useId();\n    const inputId = id || generatedId;\n    const helperTextId = `${inputId}-helper`;\n    const bottomText = error && errorMessage ? errorMessage : helperText;\n    const maxHeight = calculateMaxHeight(size, maxRows);\n\n    const internalRef = React.useRef<HTMLTextAreaElement>(null);\n\n    const { resolvedValue, displayValue, resolvedDefaultValue, handleChange, handleClear } =\n      useTextAreaValue(value, defaultValue, showClearButton, onChange, onClear, internalRef);\n\n    const mergedRef = (node: HTMLTextAreaElement | null) => {\n      internalRef.current = node;\n      if (typeof ref === \"function\") {\n        ref(node);\n      } else if (ref) {\n        (ref as React.MutableRefObject<HTMLTextAreaElement | null>).current = node;\n      }\n    };\n\n    const showClear = showClearButton && resolvedValue !== \"\" && !disabled;\n    const showValidated = validated && !showClear;\n    const ariaDescribedBy = bottomText ? helperTextId : undefined;\n    const textareaStyle = maxHeight ? { maxHeight } : undefined;\n\n    warnMissingAccessibleName(label, props[\"aria-label\"], props[\"aria-labelledby\"]);\n\n    return (\n      <div\n        className={cn(\"flex flex-col\", fullWidth && \"w-full\", className)}\n        data-disabled={disabled ? \"\" : undefined}\n        data-error={error ? \"\" : undefined}\n      >\n        {label && (\n          <label\n            htmlFor={inputId}\n            className=\"typography-caption-semibold px-1 pt-1 pb-2 text-body-100\"\n          >\n            {label}\n          </label>\n        )}\n\n        <div className={getContainerClassName(size, error, disabled)}>\n          <textarea\n            ref={mergedRef}\n            id={inputId}\n            disabled={disabled}\n            aria-describedby={ariaDescribedBy}\n            aria-invalid={error || undefined}\n            className={getTextareaClassName(size, showClear, !!minRows, resizable)}\n            value={displayValue}\n            defaultValue={resolvedDefaultValue}\n            onChange={handleChange}\n            rows={minRows}\n            style={textareaStyle}\n            {...props}\n          />\n\n          {showClear && (\n            <IconButton\n              variant=\"tertiary\"\n              size=\"24\"\n              icon={<CloseIcon />}\n              aria-label=\"Clear text\"\n              onClick={handleClear}\n              className={cn(\n                \"absolute flex size-5 items-center justify-center self-end\",\n                CLEAR_BUTTON_RIGHT[size],\n              )}\n            />\n          )}\n          {showValidated && (\n            <div\n              className={cn(\n                \"pointer-events-none absolute flex size-5 items-center justify-center\",\n                CLEAR_BUTTON_RIGHT[size],\n              )}\n            >\n              <CheckOutlineIcon className=\"text-success-500\" />\n            </div>\n          )}\n        </div>\n\n        {bottomText && (\n          <TextAreaHelperText id={helperTextId} error={error}>\n            {bottomText}\n          </TextAreaHelperText>\n        )}\n      </div>\n    );\n  },\n);\n\nTextArea.displayName = \"TextArea\";\n"],"names":["cn","jsx","React","jsxs","IconButton","CloseIcon","CheckOutlineIcon"],"mappings":"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"}

package/dist/components/Avatar/Avatar.mjs

@@ -36,14 +36,14 @@ const AvatarRoot = React.forwardRef(
           "data-testid": "avatar",
           className: cn(
             "relative inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full bg-neutral-100",
-            size === 16 && "typography-caption-semibold size-4",
-            size === 24 && "typography-caption-semibold size-6",
-            size === 32 && "typography-body-2-semibold size-8",
-            size === 40 && "typography-body-1-semibold size-10",
-            size === 48 && "typography-heading-4 size-12",
-            size === 64 && "typography-heading-3 size-16",
-            size === 88 && "typography-heading-2 size-[88px]",
-            size === 148 && "typography-heading-1 size-[148px]",
+            size === 16 && "size-4 text-[10px]",
+            size === 24 && "size-6 text-xs",
+            size === 32 && "size-8 text-xs",
+            size === 40 && "size-10 text-sm",
+            size === 48 && "size-12 text-base",
+            size === 64 && "size-16 text-xl",
+            size === 88 && "size-[88px] text-2xl",
+            size === 148 && "size-[148px] text-4xl",
             className
           ),
           ...props,
@@ -94,7 +94,7 @@ const AvatarFallback = React.forwardRef(({ className, children, ...props }, ref)
   {
     ref,
     className: cn(
-      "flex size-full items-center justify-center bg-neutral-200 text-neutral-400 uppercase leading-none",
+      "flex size-full items-center justify-center bg-neutral-200 font-semibold text-neutral-400 uppercase leading-none",
       className
     ),
     delayMs: 0,

package/dist/components/Avatar/Avatar.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.mjs","sources":["../../../src/components/Avatar/Avatar.tsx"],"sourcesContent":["import * as AvatarPrimitive from \"@radix-ui/react-avatar\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\n/** Allowed pixel sizes for the avatar. */\nexport type AvatarSize = 16 | 24 | 32 | 40 | 48 | 64 | 88 | 148;\n\nconst AvatarContext = React.createContext<{ size: AvatarSize; NSFWShow: boolean }>({\n  size: 40,\n  NSFWShow: false,\n});\n\nconst STATUS_POSITIONS: Record<AvatarSize, { top: number; right: number }> = {\n  16: { top: -4, right: -4 },\n  24: { top: -3, right: -3 },\n  32: { top: -2, right: -2 },\n  40: { top: -1, right: -1 },\n  48: { top: 0, right: 0 },\n  64: { top: 2, right: 2 },\n  88: { top: 6, right: 6 },\n  148: { top: 15, right: 15 },\n};\n\n/** Shared avatar styling props. */\ninterface AvatarStyleProps {\n  /** Pixel size of the avatar. @default 40 */\n  size?: AvatarSize;\n  /** Whether to show the online-status indicator dot. @default false */\n  onlineIndicator?: boolean;\n  /** Whether to show the platinum gradient border ring. @default false */\n  platinumShow?: boolean;\n  /** Whether to apply the NSFW blur filter over the image. @default false */\n  NSFWShow?: boolean;\n}\n\n/** Props for the low-level {@link AvatarRoot} compound component. */\nexport interface AvatarRootProps\n  extends React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>,\n    AvatarStyleProps {}\n\n/**\n * Low-level avatar root for custom compositions. Provides size context to\n * child `AvatarImage` and `AvatarFallback` components.\n *\n * Prefer the higher-level {@link Avatar} component for most use cases.\n */\nconst AvatarRoot = React.forwardRef<\n  React.ComponentRef<typeof AvatarPrimitive.Root>,\n  AvatarRootProps\n>(\n  (\n    {\n      className,\n      size = 40,\n      onlineIndicator = false,\n      platinumShow = false,\n      NSFWShow = false,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    const statusPosition = STATUS_POSITIONS[size];\n\n    return (\n      <AvatarContext.Provider value={{ size, NSFWShow }}>\n        <div className=\"relative inline-flex\">\n          <AvatarPrimitive.Root\n            ref={ref}\n            data-testid=\"avatar\"\n            className={cn(\n              \"relative inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full bg-neutral-100\",\n              size === 16 && \"typography-caption-semibold size-4\",\n              size === 24 && \"typography-caption-semibold size-6\",\n              size === 32 && \"typography-body-2-semibold size-8\",\n              size === 40 && \"typography-body-1-semibold size-10\",\n              size === 48 && \"typography-heading-4 size-12\",\n              size === 64 && \"typography-heading-3 size-16\",\n              size === 88 && \"typography-heading-2 size-[88px]\",\n              size === 148 && \"typography-heading-1 size-[148px]\",\n              className,\n            )}\n            {...props}\n          >\n            {children}\n          </AvatarPrimitive.Root>\n          {platinumShow && (\n            <div\n              className=\"pointer-events-none absolute inset-0 rounded-full\"\n              style={{\n                background: `linear-gradient(143deg, #504F54 0%, #B1B1B1 20.3154%, #13181C 37.3727%, #C6C6C8 58.8154%, #FFFFFF 69.3154%, #0C0F14 81.3154%, #696A6E 100%)`,\n                WebkitMask: \"radial-gradient(circle closest-side, transparent 96%, black 96%)\",\n                mask: \"radial-gradient(circle closest-side, transparent 96%, black 96%)\",\n              }}\n              aria-hidden=\"true\"\n            />\n          )}\n          {onlineIndicator && (\n            <span\n              className=\"absolute size-3 rounded-full border-2 border-background-150 bg-brand-green-500\"\n              style={{\n                top: `${statusPosition.top}px`,\n                right: `${statusPosition.right}px`,\n              }}\n              aria-hidden=\"true\"\n            />\n          )}\n        </div>\n      </AvatarContext.Provider>\n    );\n  },\n);\n\nAvatarRoot.displayName = \"AvatarRoot\";\n\n/** Props for the {@link AvatarImage} compound component. */\nexport interface AvatarImageProps\n  extends React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image> {}\n\n/** Renders the avatar image. Automatically applies the NSFW blur when enabled on the parent `AvatarRoot`. */\nconst AvatarImage = React.forwardRef<\n  React.ComponentRef<typeof AvatarPrimitive.Image>,\n  AvatarImageProps\n>(({ className, ...props }, ref) => {\n  const { NSFWShow } = React.useContext(AvatarContext);\n  return (\n    <AvatarPrimitive.Image\n      ref={ref}\n      className={cn(\"size-full bg-neutral-200 object-cover\", NSFWShow && \"blur-md\", className)}\n      {...props}\n    />\n  );\n});\n\nAvatarImage.displayName = \"AvatarImage\";\n\n/** Props for the {@link AvatarFallback} compound component. */\nexport interface AvatarFallbackProps\n  extends React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback> {}\n\n/** Renders fallback content (e.g. initials or an icon) when the avatar image has not loaded. */\nconst AvatarFallback = React.forwardRef<\n  React.ComponentRef<typeof AvatarPrimitive.Fallback>,\n  AvatarFallbackProps\n>(({ className, children, ...props }, ref) => (\n  <AvatarPrimitive.Fallback\n    ref={ref}\n    className={cn(\n      \"flex size-full items-center justify-center bg-neutral-200 text-neutral-400 uppercase leading-none\",\n      className,\n    )}\n    delayMs={0}\n    {...props}\n  >\n    {children}\n  </AvatarPrimitive.Fallback>\n));\n\nAvatarFallback.displayName = \"AvatarFallback\";\n\nexport interface AvatarProps\n  extends React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>,\n    AvatarStyleProps {\n  /** URL of the avatar image. */\n  src?: string;\n  /** Alt text for the avatar image. @default \"Avatar\" */\n  alt?: string;\n  /** Fallback content rendered when the image has not loaded (e.g. initials or an icon). */\n  fallback?: React.ReactNode;\n}\n\n/**\n * Displays a user avatar with optional online indicator, platinum border, and\n * NSFW blur. Pass `src` and `fallback` for the simple API, or compose your own\n * layout with `AvatarRoot`, `AvatarImage`, and `AvatarFallback` as children.\n *\n * @example\n * ```tsx\n * <Avatar src=\"/photo.jpg\" alt=\"Jane Doe\" fallback=\"JD\" size={48} />\n * ```\n */\nexport const Avatar = React.forwardRef<\n  React.ComponentRef<typeof AvatarPrimitive.Root>,\n  AvatarProps\n>(\n  (\n    {\n      className,\n      size = 40,\n      src,\n      alt,\n      fallback,\n      onlineIndicator = false,\n      platinumShow = false,\n      NSFWShow = false,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    const rootProps = {\n      ref,\n      size,\n      onlineIndicator,\n      platinumShow,\n      NSFWShow,\n      className,\n      ...props,\n    };\n\n    if (children) {\n      return <AvatarRoot {...rootProps}>{children}</AvatarRoot>;\n    }\n\n    return (\n      <AvatarRoot {...rootProps}>\n        {src && <AvatarImage src={src} alt={alt ?? \"Avatar\"} />}\n        <AvatarFallback>{fallback}</AvatarFallback>\n      </AvatarRoot>\n    );\n  },\n);\n\nAvatar.displayName = \"Avatar\";\n\nexport { AvatarRoot, AvatarImage, AvatarFallback };\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"Avatar.mjs","sources":["../../../src/components/Avatar/Avatar.tsx"],"sourcesContent":["import * as AvatarPrimitive from \"@radix-ui/react-avatar\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\n/** Allowed pixel sizes for the avatar. */\nexport type AvatarSize = 16 | 24 | 32 | 40 | 48 | 64 | 88 | 148;\n\nconst AvatarContext = React.createContext<{ size: AvatarSize; NSFWShow: boolean }>({\n  size: 40,\n  NSFWShow: false,\n});\n\nconst STATUS_POSITIONS: Record<AvatarSize, { top: number; right: number }> = {\n  16: { top: -4, right: -4 },\n  24: { top: -3, right: -3 },\n  32: { top: -2, right: -2 },\n  40: { top: -1, right: -1 },\n  48: { top: 0, right: 0 },\n  64: { top: 2, right: 2 },\n  88: { top: 6, right: 6 },\n  148: { top: 15, right: 15 },\n};\n\n/** Shared avatar styling props. */\ninterface AvatarStyleProps {\n  /** Pixel size of the avatar. @default 40 */\n  size?: AvatarSize;\n  /** Whether to show the online-status indicator dot. @default false */\n  onlineIndicator?: boolean;\n  /** Whether to show the platinum gradient border ring. @default false */\n  platinumShow?: boolean;\n  /** Whether to apply the NSFW blur filter over the image. @default false */\n  NSFWShow?: boolean;\n}\n\n/** Props for the low-level {@link AvatarRoot} compound component. */\nexport interface AvatarRootProps\n  extends React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>,\n    AvatarStyleProps {}\n\n/**\n * Low-level avatar root for custom compositions. Provides size context to\n * child `AvatarImage` and `AvatarFallback` components.\n *\n * Prefer the higher-level {@link Avatar} component for most use cases.\n */\nconst AvatarRoot = React.forwardRef<\n  React.ComponentRef<typeof AvatarPrimitive.Root>,\n  AvatarRootProps\n>(\n  (\n    {\n      className,\n      size = 40,\n      onlineIndicator = false,\n      platinumShow = false,\n      NSFWShow = false,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    const statusPosition = STATUS_POSITIONS[size];\n\n    return (\n      <AvatarContext.Provider value={{ size, NSFWShow }}>\n        <div className=\"relative inline-flex\">\n          <AvatarPrimitive.Root\n            ref={ref}\n            data-testid=\"avatar\"\n            className={cn(\n              \"relative inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full bg-neutral-100\",\n              size === 16 && \"size-4 text-[10px]\",\n              size === 24 && \"size-6 text-xs\",\n              size === 32 && \"size-8 text-xs\",\n              size === 40 && \"size-10 text-sm\",\n              size === 48 && \"size-12 text-base\",\n              size === 64 && \"size-16 text-xl\",\n              size === 88 && \"size-[88px] text-2xl\",\n              size === 148 && \"size-[148px] text-4xl\",\n              className,\n            )}\n            {...props}\n          >\n            {children}\n          </AvatarPrimitive.Root>\n          {platinumShow && (\n            <div\n              className=\"pointer-events-none absolute inset-0 rounded-full\"\n              style={{\n                background: `linear-gradient(143deg, #504F54 0%, #B1B1B1 20.3154%, #13181C 37.3727%, #C6C6C8 58.8154%, #FFFFFF 69.3154%, #0C0F14 81.3154%, #696A6E 100%)`,\n                WebkitMask: \"radial-gradient(circle closest-side, transparent 96%, black 96%)\",\n                mask: \"radial-gradient(circle closest-side, transparent 96%, black 96%)\",\n              }}\n              aria-hidden=\"true\"\n            />\n          )}\n          {onlineIndicator && (\n            <span\n              className=\"absolute size-3 rounded-full border-2 border-background-150 bg-brand-green-500\"\n              style={{\n                top: `${statusPosition.top}px`,\n                right: `${statusPosition.right}px`,\n              }}\n              aria-hidden=\"true\"\n            />\n          )}\n        </div>\n      </AvatarContext.Provider>\n    );\n  },\n);\n\nAvatarRoot.displayName = \"AvatarRoot\";\n\n/** Props for the {@link AvatarImage} compound component. */\nexport interface AvatarImageProps\n  extends React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image> {}\n\n/** Renders the avatar image. Automatically applies the NSFW blur when enabled on the parent `AvatarRoot`. */\nconst AvatarImage = React.forwardRef<\n  React.ComponentRef<typeof AvatarPrimitive.Image>,\n  AvatarImageProps\n>(({ className, ...props }, ref) => {\n  const { NSFWShow } = React.useContext(AvatarContext);\n  return (\n    <AvatarPrimitive.Image\n      ref={ref}\n      className={cn(\"size-full bg-neutral-200 object-cover\", NSFWShow && \"blur-md\", className)}\n      {...props}\n    />\n  );\n});\n\nAvatarImage.displayName = \"AvatarImage\";\n\n/** Props for the {@link AvatarFallback} compound component. */\nexport interface AvatarFallbackProps\n  extends React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback> {}\n\n/** Renders fallback content (e.g. initials or an icon) when the avatar image has not loaded. */\nconst AvatarFallback = React.forwardRef<\n  React.ComponentRef<typeof AvatarPrimitive.Fallback>,\n  AvatarFallbackProps\n>(({ className, children, ...props }, ref) => (\n  <AvatarPrimitive.Fallback\n    ref={ref}\n    className={cn(\n      \"flex size-full items-center justify-center bg-neutral-200 font-semibold text-neutral-400 uppercase leading-none\",\n      className,\n    )}\n    delayMs={0}\n    {...props}\n  >\n    {children}\n  </AvatarPrimitive.Fallback>\n));\n\nAvatarFallback.displayName = \"AvatarFallback\";\n\nexport interface AvatarProps\n  extends React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>,\n    AvatarStyleProps {\n  /** URL of the avatar image. */\n  src?: string;\n  /** Alt text for the avatar image. @default \"Avatar\" */\n  alt?: string;\n  /** Fallback content rendered when the image has not loaded (e.g. initials or an icon). */\n  fallback?: React.ReactNode;\n}\n\n/**\n * Displays a user avatar with optional online indicator, platinum border, and\n * NSFW blur. Pass `src` and `fallback` for the simple API, or compose your own\n * layout with `AvatarRoot`, `AvatarImage`, and `AvatarFallback` as children.\n *\n * @example\n * ```tsx\n * <Avatar src=\"/photo.jpg\" alt=\"Jane Doe\" fallback=\"JD\" size={48} />\n * ```\n */\nexport const Avatar = React.forwardRef<\n  React.ComponentRef<typeof AvatarPrimitive.Root>,\n  AvatarProps\n>(\n  (\n    {\n      className,\n      size = 40,\n      src,\n      alt,\n      fallback,\n      onlineIndicator = false,\n      platinumShow = false,\n      NSFWShow = false,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    const rootProps = {\n      ref,\n      size,\n      onlineIndicator,\n      platinumShow,\n      NSFWShow,\n      className,\n      ...props,\n    };\n\n    if (children) {\n      return <AvatarRoot {...rootProps}>{children}</AvatarRoot>;\n    }\n\n    return (\n      <AvatarRoot {...rootProps}>\n        {src && <AvatarImage src={src} alt={alt ?? \"Avatar\"} />}\n        <AvatarFallback>{fallback}</AvatarFallback>\n      </AvatarRoot>\n    );\n  },\n);\n\nAvatar.displayName = \"Avatar\";\n\nexport { AvatarRoot, AvatarImage, AvatarFallback };\n"],"names":[],"mappings":"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"}

package/dist/components/Button/Button.mjs

@@ -91,8 +91,10 @@ function renderContent({
         children: rightIcon
       }
     ),
-    discount != null && /* @__PURE__ */ jsx("span", { className: "typography-body-1-regular line-through", "aria-hidden": "true", children: discount }),
-    price != null && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: price })
+    (price || discount) && /* @__PURE__ */ jsxs("div", { children: [
+      discount && /* @__PURE__ */ jsx("span", { className: "typography-body-1-regular line-through", "aria-hidden": "true", children: discount }),
+      price && /* @__PURE__ */ jsx("span", { className: "ml-2", "aria-hidden": "true", children: price })
+    ] })
   ] });
 }
 const Button = React.forwardRef(
@@ -108,6 +110,7 @@ const Button = React.forwardRef(
     children,
     discount,
     price,
+    fullWidth = false,
     ...props
   }, ref) => {
     const Comp = asChild ? Slot : "button";
@@ -139,12 +142,14 @@ const Button = React.forwardRef(
         ...loadingLabelProps,
         className: cn(
           // Base styles
-          "inline-flex cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-full transition-colors",
+          "inline-flex cursor-pointer items-center gap-2 whitespace-nowrap rounded-full transition-colors",
           // Focus ring
           "focus-visible:shadow-focus-ring focus-visible:outline-none",
           // Disabled state
           "disabled:pointer-events-none disabled:opacity-50",
           "aria-disabled:pointer-events-none aria-disabled:opacity-50",
+          `${price ? "justify-between" : "justify-center"}`,
+          fullWidth && "w-full",
           // Size styles
           SIZE_CLASSES[size],
           // Variant styles

package/dist/components/Button/Button.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Button.mjs","sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":["import { Slot } from \"@radix-ui/react-slot\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { SpinnerIcon } from \"../Icons/SpinnerIcon\";\n\n/** Visual style variant of the button. */\nexport type ButtonVariant =\n  | \"primary\"\n  | \"secondary\"\n  | \"tertiary\"\n  | \"link\"\n  | \"brand\"\n  | \"destructive\"\n  | \"white\"\n  | \"tertiaryDestructive\"\n  | \"text\";\n\n/** Button height in pixels. */\nexport type ButtonSize = \"48\" | \"40\" | \"32\" | \"24\";\n\nexport interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Visual style variant of the button. @default \"primary\" */\n  variant?: ButtonVariant;\n  /** Height of the button in pixels. @default \"40\" */\n  size?: ButtonSize;\n  /** Icon element displayed before the label. */\n  leftIcon?: React.ReactNode;\n  /** Icon element displayed after the label. */\n  rightIcon?: React.ReactNode;\n  /** When `true`, replaces the label with a spinner and disables interaction. @default false */\n  loading?: boolean;\n  /** Merge props onto a child element instead of rendering a `<button>`. @default false */\n  asChild?: boolean;\n  /** Old price shown with a strikethrough before the current price. */\n  discount?: string;\n  /** Current price shown inside the button after the label and icons. */\n  price?: string;\n}\n\nconst SIZE_CLASSES: Record<ButtonSize, string> = {\n  \"48\": \"h-12 px-4 py-3 typography-button-large\",\n  \"40\": \"h-10 px-4 py-2 typography-button-small\",\n  \"32\": \"h-8 px-3 py-2 typography-body-2-semibold\",\n  \"24\": \"h-6 px-2 py-1 typography-body-2-semibold\",\n};\n\nconst ICON_SIZE_CLASS: Record<ButtonSize, string> = {\n  \"48\": \"size-5\",\n  \"40\": \"size-5\",\n  \"32\": \"size-4\",\n  \"24\": \"size-3.5\",\n};\n\n/** Targets only direct SVG children so non-icon content (e.g. Pill) can size naturally. */\nconst ICON_WRAPPER_CLASS: Record<ButtonSize, string> = {\n  \"48\": \"[&>svg]:size-5\",\n  \"40\": \"[&>svg]:size-5\",\n  \"32\": \"[&>svg]:size-4\",\n  \"24\": \"[&>svg]:size-3.5\",\n};\n\nconst VARIANT_CLASSES: Record<ButtonVariant, string> = {\n  primary:\n    \"bg-neutral-400 text-body-300 hover:bg-brand-green-500 hover:text-body-black-solid-constant active:bg-brand-green-500 active:text-body-black-solid-constant\",\n  secondary:\n    \"border-body-100 border border-1 border-body-100 bg-transparent text-body-100 hover:bg-brand-green-50 active:bg-brand-green-50\",\n  tertiary: \"bg-transparent text-body-100 hover:bg-brand-green-50 active:bg-brand-green-50\",\n  link: \"bg-transparent text-body-100 underline decoration-solid hover:bg-brand-green-50 active:bg-brand-green-50\",\n  brand:\n    \"bg-brand-green-500 text-body-black-solid-constant hover:bg-brand-pink-500 active:bg-brand-pink-500\",\n  destructive:\n    \"bg-error-500 text-body-white-solid-constant hover:bg-background-solid dark:hover:bg-background-white-solid-constant dark:hover:text-error-500 active:bg-background-solid dark:active:bg-background-white-solid-constant dark:active:text-error-500\",\n  white:\n    \"bg-background-white-solid-constant text-body-black-solid-constant hover:bg-brand-green-500 active:bg-brand-green-500\",\n  tertiaryDestructive: \"bg-transparent text-error-500 hover:bg-error-50 active:bg-error-50\",\n  text: \"bg-transparent text-body-100 hover:underline active:underline\",\n};\n\n/** Recursively extract text content from React nodes for accessible labels */\nfunction getTextContent(node: React.ReactNode): string | undefined {\n  if (typeof node === \"string\") return node;\n  if (typeof node === \"number\") return String(node);\n  if (React.isValidElement(node)) {\n    return getTextContent((node.props as { children?: React.ReactNode }).children);\n  }\n  if (Array.isArray(node)) {\n    const text = node.map(getTextContent).filter(Boolean).join(\"\");\n    return text || undefined;\n  }\n  return undefined;\n}\n\nconst LoadingSpinner = ({ size }: { size: ButtonSize }) => {\n  return (\n    <span className=\"animate-spin\" aria-hidden=\"true\">\n      <SpinnerIcon className={ICON_SIZE_CLASS[size]}>\n        <title>Loading</title>\n      </SpinnerIcon>\n    </span>\n  );\n};\n\nfunction renderContent({\n  loading,\n  asChild,\n  children,\n  size,\n  leftIcon,\n  rightIcon,\n  iconSizeClass,\n  discount,\n  price,\n}: {\n  loading: boolean;\n  asChild: boolean;\n  children: React.ReactNode;\n  size: ButtonSize;\n  leftIcon: React.ReactNode;\n  rightIcon: React.ReactNode;\n  iconSizeClass: string;\n  discount?: string;\n  price?: string;\n}) {\n  if (loading) {\n    // When asChild, clone the child element with spinner content instead of\n    // wrapping in sr-only span (which would nest interactive elements)\n    if (asChild && React.isValidElement(children)) {\n      return React.cloneElement(\n        children as React.ReactElement<{ children?: React.ReactNode }>,\n        undefined,\n        <LoadingSpinner size={size} />,\n      );\n    }\n    return (\n      <>\n        <LoadingSpinner size={size} />\n        <span className=\"sr-only\">{children}</span>\n      </>\n    );\n  }\n\n  if (asChild) return children;\n\n  return (\n    <>\n      {leftIcon && (\n        <span\n          className={cn(\"flex shrink-0 items-center justify-center\", iconSizeClass)}\n          aria-hidden=\"true\"\n        >\n          {leftIcon}\n        </span>\n      )}\n      {children}\n      {rightIcon && (\n        <span\n          className={cn(\"flex shrink-0 items-center justify-center\", iconSizeClass)}\n          aria-hidden=\"true\"\n        >\n          {rightIcon}\n        </span>\n      )}\n      {discount != null && (\n        <span className=\"typography-body-1-regular line-through\" aria-hidden=\"true\">\n          {discount}\n        </span>\n      )}\n      {price != null && <span aria-hidden=\"true\">{price}</span>}\n    </>\n  );\n}\n\n/**\n * A versatile button component with multiple visual variants, sizes, icon\n * slots, loading state, and optional pricing display.\n *\n * @example\n * ```tsx\n * <Button variant=\"brand\" size=\"40\" leftIcon={<StarIcon />}>\n *   Subscribe\n * </Button>\n * ```\n */\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  (\n    {\n      className,\n      variant = \"primary\",\n      size = \"40\",\n      leftIcon,\n      rightIcon,\n      loading = false,\n      asChild = false,\n      disabled,\n      children,\n      discount,\n      price,\n      ...props\n    },\n    ref,\n  ) => {\n    const Comp = asChild ? Slot : \"button\";\n    const isDisabled = disabled || loading;\n    const iconSizeClass = ICON_WRAPPER_CLASS[size];\n\n    const buttonSpecificProps = !asChild\n      ? {\n          type: \"button\" as const,\n          \"data-testid\": \"button\",\n          disabled: isDisabled,\n        }\n      : isDisabled\n        ? { \"aria-disabled\": true }\n        : {};\n\n    // When asChild + loading, extract text from children for aria-label since we\n    // can't wrap element children in an sr-only span (creates invalid nested markup)\n    const loadingLabelProps = loading && asChild ? { \"aria-label\": getTextContent(children) } : {};\n\n    const content = renderContent({\n      loading,\n      asChild,\n      children,\n      size,\n      leftIcon,\n      rightIcon,\n      iconSizeClass,\n      discount,\n      price,\n    });\n\n    return (\n      <Comp\n        ref={ref}\n        {...buttonSpecificProps}\n        aria-busy={loading}\n        {...loadingLabelProps}\n        className={cn(\n          // Base styles\n          \"inline-flex cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-full transition-colors\",\n          // Focus ring\n          \"focus-visible:shadow-focus-ring focus-visible:outline-none\",\n          // Disabled state\n          \"disabled:pointer-events-none disabled:opacity-50\",\n          \"aria-disabled:pointer-events-none aria-disabled:opacity-50\",\n          // Size styles\n          SIZE_CLASSES[size],\n          // Variant styles\n          VARIANT_CLASSES[variant],\n          // Manual CSS overrides\n          className,\n        )}\n        {...props}\n      >\n        {content}\n      </Comp>\n    );\n  },\n);\n\nButton.displayName = \"Button\";\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"Button.mjs","sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":["import { Slot } from \"@radix-ui/react-slot\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { SpinnerIcon } from \"../Icons/SpinnerIcon\";\n\n/** Visual style variant of the button. */\nexport type ButtonVariant =\n  | \"primary\"\n  | \"secondary\"\n  | \"tertiary\"\n  | \"link\"\n  | \"brand\"\n  | \"destructive\"\n  | \"white\"\n  | \"tertiaryDestructive\"\n  | \"text\";\n\n/** Button height in pixels. */\nexport type ButtonSize = \"48\" | \"40\" | \"32\" | \"24\";\n\nexport interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Visual style variant of the button. @default \"primary\" */\n  variant?: ButtonVariant;\n  /** Height of the button in pixels. @default \"40\" */\n  size?: ButtonSize;\n  /** Icon element displayed before the label. */\n  leftIcon?: React.ReactNode;\n  /** Icon element displayed after the label. */\n  rightIcon?: React.ReactNode;\n  /** When `true`, replaces the label with a spinner and disables interaction. @default false */\n  loading?: boolean;\n  /** Merge props onto a child element instead of rendering a `<button>`. @default false */\n  asChild?: boolean;\n  /** Old price shown with a strikethrough before the current price. */\n  discount?: string;\n  /** Current price shown inside the button after the label and icons. */\n  price?: string;\n  /** When `true`, the button will take the full width of its container. @default false */\n  fullWidth?: boolean;\n}\n\nconst SIZE_CLASSES: Record<ButtonSize, string> = {\n  \"48\": \"h-12 px-4 py-3 typography-button-large\",\n  \"40\": \"h-10 px-4 py-2 typography-button-small\",\n  \"32\": \"h-8 px-3 py-2 typography-body-2-semibold\",\n  \"24\": \"h-6 px-2 py-1 typography-body-2-semibold\",\n};\n\nconst ICON_SIZE_CLASS: Record<ButtonSize, string> = {\n  \"48\": \"size-5\",\n  \"40\": \"size-5\",\n  \"32\": \"size-4\",\n  \"24\": \"size-3.5\",\n};\n\n/** Targets only direct SVG children so non-icon content (e.g. Pill) can size naturally. */\nconst ICON_WRAPPER_CLASS: Record<ButtonSize, string> = {\n  \"48\": \"[&>svg]:size-5\",\n  \"40\": \"[&>svg]:size-5\",\n  \"32\": \"[&>svg]:size-4\",\n  \"24\": \"[&>svg]:size-3.5\",\n};\n\nconst VARIANT_CLASSES: Record<ButtonVariant, string> = {\n  primary:\n    \"bg-neutral-400 text-body-300 hover:bg-brand-green-500 hover:text-body-black-solid-constant active:bg-brand-green-500 active:text-body-black-solid-constant\",\n  secondary:\n    \"border-body-100 border border-1 border-body-100 bg-transparent text-body-100 hover:bg-brand-green-50 active:bg-brand-green-50\",\n  tertiary: \"bg-transparent text-body-100 hover:bg-brand-green-50 active:bg-brand-green-50\",\n  link: \"bg-transparent text-body-100 underline decoration-solid hover:bg-brand-green-50 active:bg-brand-green-50\",\n  brand:\n    \"bg-brand-green-500 text-body-black-solid-constant hover:bg-brand-pink-500 active:bg-brand-pink-500\",\n  destructive:\n    \"bg-error-500 text-body-white-solid-constant hover:bg-background-solid dark:hover:bg-background-white-solid-constant dark:hover:text-error-500 active:bg-background-solid dark:active:bg-background-white-solid-constant dark:active:text-error-500\",\n  white:\n    \"bg-background-white-solid-constant text-body-black-solid-constant hover:bg-brand-green-500 active:bg-brand-green-500\",\n  tertiaryDestructive: \"bg-transparent text-error-500 hover:bg-error-50 active:bg-error-50\",\n  text: \"bg-transparent text-body-100 hover:underline active:underline\",\n};\n\n/** Recursively extract text content from React nodes for accessible labels */\nfunction getTextContent(node: React.ReactNode): string | undefined {\n  if (typeof node === \"string\") return node;\n  if (typeof node === \"number\") return String(node);\n  if (React.isValidElement(node)) {\n    return getTextContent((node.props as { children?: React.ReactNode }).children);\n  }\n  if (Array.isArray(node)) {\n    const text = node.map(getTextContent).filter(Boolean).join(\"\");\n    return text || undefined;\n  }\n  return undefined;\n}\n\nconst LoadingSpinner = ({ size }: { size: ButtonSize }) => {\n  return (\n    <span className=\"animate-spin\" aria-hidden=\"true\">\n      <SpinnerIcon className={ICON_SIZE_CLASS[size]}>\n        <title>Loading</title>\n      </SpinnerIcon>\n    </span>\n  );\n};\n\nfunction renderContent({\n  loading,\n  asChild,\n  children,\n  size,\n  leftIcon,\n  rightIcon,\n  iconSizeClass,\n  discount,\n  price,\n}: {\n  loading: boolean;\n  asChild: boolean;\n  children: React.ReactNode;\n  size: ButtonSize;\n  leftIcon: React.ReactNode;\n  rightIcon: React.ReactNode;\n  iconSizeClass: string;\n  discount?: string;\n  price?: string;\n  fullWidth?: boolean;\n}) {\n  if (loading) {\n    // When asChild, clone the child element with spinner content instead of\n    // wrapping in sr-only span (which would nest interactive elements)\n    if (asChild && React.isValidElement(children)) {\n      return React.cloneElement(\n        children as React.ReactElement<{ children?: React.ReactNode }>,\n        undefined,\n        <LoadingSpinner size={size} />,\n      );\n    }\n    return (\n      <>\n        <LoadingSpinner size={size} />\n        <span className=\"sr-only\">{children}</span>\n      </>\n    );\n  }\n\n  if (asChild) return children;\n\n  return (\n    <>\n      {leftIcon && (\n        <span\n          className={cn(\"flex shrink-0 items-center justify-center\", iconSizeClass)}\n          aria-hidden=\"true\"\n        >\n          {leftIcon}\n        </span>\n      )}\n      {children}\n      {rightIcon && (\n        <span\n          className={cn(\"flex shrink-0 items-center justify-center\", iconSizeClass)}\n          aria-hidden=\"true\"\n        >\n          {rightIcon}\n        </span>\n      )}\n      {(price || discount) && (\n        <div>\n          {discount && (\n            <span className=\"typography-body-1-regular line-through\" aria-hidden=\"true\">\n              {discount}\n            </span>\n          )}\n          {price && (\n            <span className=\"ml-2\" aria-hidden=\"true\">\n              {price}\n            </span>\n          )}\n        </div>\n      )}\n    </>\n  );\n}\n\n/**\n * A versatile button component with multiple visual variants, sizes, icon\n * slots, loading state, and optional pricing display.\n *\n * @example\n * ```tsx\n * <Button variant=\"brand\" size=\"40\" leftIcon={<StarIcon />}>\n *   Subscribe\n * </Button>\n * ```\n */\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  (\n    {\n      className,\n      variant = \"primary\",\n      size = \"40\",\n      leftIcon,\n      rightIcon,\n      loading = false,\n      asChild = false,\n      disabled,\n      children,\n      discount,\n      price,\n      fullWidth = false,\n      ...props\n    },\n    ref,\n  ) => {\n    const Comp = asChild ? Slot : \"button\";\n    const isDisabled = disabled || loading;\n    const iconSizeClass = ICON_WRAPPER_CLASS[size];\n\n    const buttonSpecificProps = !asChild\n      ? {\n          type: \"button\" as const,\n          \"data-testid\": \"button\",\n          disabled: isDisabled,\n        }\n      : isDisabled\n        ? { \"aria-disabled\": true }\n        : {};\n\n    // When asChild + loading, extract text from children for aria-label since we\n    // can't wrap element children in an sr-only span (creates invalid nested markup)\n    const loadingLabelProps = loading && asChild ? { \"aria-label\": getTextContent(children) } : {};\n\n    const content = renderContent({\n      loading,\n      asChild,\n      children,\n      size,\n      leftIcon,\n      rightIcon,\n      iconSizeClass,\n      discount,\n      price,\n    });\n\n    return (\n      <Comp\n        ref={ref}\n        {...buttonSpecificProps}\n        aria-busy={loading}\n        {...loadingLabelProps}\n        className={cn(\n          // Base styles\n          \"inline-flex cursor-pointer items-center gap-2 whitespace-nowrap rounded-full transition-colors\",\n          // Focus ring\n          \"focus-visible:shadow-focus-ring focus-visible:outline-none\",\n          // Disabled state\n          \"disabled:pointer-events-none disabled:opacity-50\",\n          \"aria-disabled:pointer-events-none aria-disabled:opacity-50\",\n          `${price ? \"justify-between\" : \"justify-center\"}`,\n          fullWidth && \"w-full\",\n          // Size styles\n          SIZE_CLASSES[size],\n          // Variant styles\n          VARIANT_CLASSES[variant],\n          // Manual CSS overrides\n          className,\n        )}\n        {...props}\n      >\n        {content}\n      </Comp>\n    );\n  },\n);\n\nButton.displayName = \"Button\";\n"],"names":[],"mappings":";;;;;;AAyCA,MAAM,eAA2C;AAAA,EAC/C,MAAM;AAAA,EACN,MAAM;AAAA,EACN,MAAM;AAAA,EACN,MAAM;AACR;AAEA,MAAM,kBAA8C;AAAA,EAClD,MAAM;AAAA,EACN,MAAM;AAAA,EACN,MAAM;AAAA,EACN,MAAM;AACR;AAGA,MAAM,qBAAiD;AAAA,EACrD,MAAM;AAAA,EACN,MAAM;AAAA,EACN,MAAM;AAAA,EACN,MAAM;AACR;AAEA,MAAM,kBAAiD;AAAA,EACrD,SACE;AAAA,EACF,WACE;AAAA,EACF,UAAU;AAAA,EACV,MAAM;AAAA,EACN,OACE;AAAA,EACF,aACE;AAAA,EACF,OACE;AAAA,EACF,qBAAqB;AAAA,EACrB,MAAM;AACR;AAGA,SAAS,eAAe,MAA2C;AACjE,MAAI,OAAO,SAAS,SAAU,QAAO;AACrC,MAAI,OAAO,SAAS,SAAU,QAAO,OAAO,IAAI;AAChD,MAAI,MAAM,eAAe,IAAI,GAAG;AAC9B,WAAO,eAAgB,KAAK,MAAyC,QAAQ;AAAA,EAC/E;AACA,MAAI,MAAM,QAAQ,IAAI,GAAG;AACvB,UAAM,OAAO,KAAK,IAAI,cAAc,EAAE,OAAO,OAAO,EAAE,KAAK,EAAE;AAC7D,WAAO,QAAQ;AAAA,EACjB;AACA,SAAO;AACT;AAEA,MAAM,iBAAiB,CAAC,EAAE,WAAiC;AACzD,6BACG,QAAA,EAAK,WAAU,gBAAe,eAAY,QACzC,UAAA,oBAAC,aAAA,EAAY,WAAW,gBAAgB,IAAI,GAC1C,UAAA,oBAAC,SAAA,EAAM,UAAA,UAAA,CAAO,GAChB,GACF;AAEJ;AAEA,SAAS,cAAc;AAAA,EACrB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAWG;AACD,MAAI,SAAS;AAGX,QAAI,WAAW,MAAM,eAAe,QAAQ,GAAG;AAC7C,aAAO,MAAM;AAAA,QACX;AAAA,QACA;AAAA,QACA,oBAAC,kBAAe,KAAA,CAAY;AAAA,MAAA;AAAA,IAEhC;AACA,WACE,qBAAA,UAAA,EACE,UAAA;AAAA,MAAA,oBAAC,kBAAe,MAAY;AAAA,MAC5B,oBAAC,QAAA,EAAK,WAAU,WAAW,SAAA,CAAS;AAAA,IAAA,GACtC;AAAA,EAEJ;AAEA,MAAI,QAAS,QAAO;AAEpB,SACE,qBAAA,UAAA,EACG,UAAA;AAAA,IAAA,YACC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW,GAAG,6CAA6C,aAAa;AAAA,QACxE,eAAY;AAAA,QAEX,UAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAGJ;AAAA,IACA,aACC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW,GAAG,6CAA6C,aAAa;AAAA,QACxE,eAAY;AAAA,QAEX,UAAA;AAAA,MAAA;AAAA,IAAA;AAAA,KAGH,SAAS,aACT,qBAAC,OAAA,EACE,UAAA;AAAA,MAAA,gCACE,QAAA,EAAK,WAAU,0CAAyC,eAAY,QAClE,UAAA,UACH;AAAA,MAED,SACC,oBAAC,QAAA,EAAK,WAAU,QAAO,eAAY,QAChC,UAAA,MAAA,CACH;AAAA,IAAA,EAAA,CAEJ;AAAA,EAAA,GAEJ;AAEJ;AAaO,MAAM,SAAS,MAAM;AAAA,EAC1B,CACE;AAAA,IACE;AAAA,IACA,UAAU;AAAA,IACV,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,OAAO,UAAU,OAAO;AAC9B,UAAM,aAAa,YAAY;AAC/B,UAAM,gBAAgB,mBAAmB,IAAI;AAE7C,UAAM,sBAAsB,CAAC,UACzB;AAAA,MACE,MAAM;AAAA,MACN,eAAe;AAAA,MACf,UAAU;AAAA,IAAA,IAEZ,aACE,EAAE,iBAAiB,KAAA,IACnB,CAAA;AAIN,UAAM,oBAAoB,WAAW,UAAU,EAAE,cAAc,eAAe,QAAQ,EAAA,IAAM,CAAA;AAE5F,UAAM,UAAU,cAAc;AAAA,MAC5B;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA,CACD;AAED,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACC,GAAG;AAAA,QACJ,aAAW;AAAA,QACV,GAAG;AAAA,QACJ,WAAW;AAAA;AAAA,UAET;AAAA;AAAA,UAEA;AAAA;AAAA,UAEA;AAAA,UACA;AAAA,UACA,GAAG,QAAQ,oBAAoB,gBAAgB;AAAA,UAC/C,aAAa;AAAA;AAAA,UAEb,aAAa,IAAI;AAAA;AAAA,UAEjB,gBAAgB,OAAO;AAAA;AAAA,UAEvB;AAAA,QAAA;AAAA,QAED,GAAG;AAAA,QAEH,UAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAEA,OAAO,cAAc;"}

package/dist/components/IconButton/IconButton.mjs

@@ -23,11 +23,11 @@ const iconSizeVariants = {
   72: "[&>svg]:size-8"
 };
 const sizeVariants = {
-  24: "p-1",
-  32: "p-1.5",
-  40: "p-[10px]",
-  52: "p-2",
-  72: "p-4"
+  24: "size-6 p-1",
+  32: "size-8 p-1.5",
+  40: "size-10 p-[10px]",
+  52: "size-[52px] p-2",
+  72: "size-[72px] p-4"
 };
 const countSizeMap = {
   24: "16",

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: \"p-1\",\n  32: \"p-1.5\",\n  40: \"p-[10px]\",\n  52: \"p-2\",\n  72: \"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            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;"}

package/dist/components/Select/Select.mjs

@@ -87,7 +87,7 @@ const Select = React.forwardRef(
                   disabled && "cursor-not-allowed opacity-50"
                 ),
                 children: [
-                  /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                  /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [
                     leftIcon && /* @__PURE__ */ jsx(
                       "span",
                       {

package/dist/components/Select/Select.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Select.mjs","sources":["../../../src/components/Select/Select.tsx"],"sourcesContent":["import * as SelectPrimitive from \"@radix-ui/react-select\";\nimport * as React from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport { CheckIcon } from \"../Icons/CheckIcon\";\nimport { ChevronDownIcon } from \"../Icons/ChevronDownIcon\";\n\n/** Select field height in pixels. */\nexport type SelectSize = \"48\" | \"40\" | \"32\";\n\ntype SelectContextValue = {\n  size: SelectSize;\n  error: boolean;\n  disabled?: boolean;\n};\n\nconst SelectContext = React.createContext<SelectContextValue>({\n  size: \"48\",\n  error: false,\n});\n\nconst TRIGGER_HEIGHT: Record<SelectSize, string> = {\n  \"48\": \"h-12\",\n  \"40\": \"h-10\",\n  \"32\": \"h-8\",\n};\n\nconst TRIGGER_PADDING_X: Record<SelectSize, string> = {\n  \"48\": \"px-4\",\n  \"40\": \"px-4\",\n  \"32\": \"px-3\",\n};\n\nconst TRIGGER_GAP: Record<SelectSize, string> = {\n  \"48\": \"gap-3\",\n  \"40\": \"gap-3\",\n  \"32\": \"gap-2\",\n};\n\nconst TRIGGER_TYPOGRAPHY: Record<SelectSize, string> = {\n  \"48\": \"typography-body-1-regular\",\n  \"40\": \"typography-body-1-regular\",\n  \"32\": \"typography-body-2-regular\",\n};\n\nexport interface SelectProps extends Omit<SelectPrimitive.SelectProps, \"dir\"> {\n  /** Label text displayed above the trigger. Also used as the accessible name. */\n  label?: string;\n  /** Accessible name applied directly to the trigger button when no visible `label` is provided. */\n  \"aria-label\"?: string;\n  /** ID of an external element that labels the trigger button. */\n  \"aria-labelledby\"?: string;\n  /** Helper text displayed below the trigger. Replaced by `errorMessage` when `error` is `true`. */\n  helperText?: string;\n  /** Height of the select field in pixels. @default \"48\" */\n  size?: SelectSize;\n  /** Whether the field is in an error state. @default false */\n  error?: boolean;\n  /** Error message displayed below the trigger. Shown instead of `helperText` when `error` is `true`. */\n  errorMessage?: string;\n  /** Placeholder shown when no value is selected. */\n  placeholder?: string;\n  /** Icon element displayed at the left side of the trigger. */\n  leftIcon?: React.ReactNode;\n  /** Whether the field stretches to fill its container width. @default false */\n  fullWidth?: boolean;\n  /** Wraps the `className` of the outermost container div. */\n  className?: string;\n  /** HTML `id` applied to the trigger button. Auto-generated if omitted. */\n  id?: string;\n}\n\n/**\n * A select field with optional label, helper/error text, and an icon slot,\n * built on Radix UI Select for full accessibility and keyboard navigation.\n *\n * Pair with {@link SelectContent} and {@link SelectItem} to provide options.\n *\n * @example\n * ```tsx\n * <Select label=\"Country\" placeholder=\"Select a country\">\n *   <SelectContent>\n *     <SelectItem value=\"us\">United States</SelectItem>\n *     <SelectItem value=\"uk\">United Kingdom</SelectItem>\n *   </SelectContent>\n * </Select>\n * ```\n */\nexport const Select = React.forwardRef<\n  React.ComponentRef<typeof SelectPrimitive.Trigger>,\n  SelectProps\n>(\n  (\n    {\n      label,\n      helperText,\n      size = \"48\",\n      error = false,\n      errorMessage,\n      placeholder,\n      leftIcon,\n      fullWidth = false,\n      className,\n      id,\n      disabled,\n      children,\n      \"aria-label\": ariaLabel,\n      \"aria-labelledby\": ariaLabelledby,\n      ...props\n    },\n    ref,\n  ) => {\n    const generatedId = React.useId();\n    const triggerId = id ?? generatedId;\n    const helperTextId = `${triggerId}-helper`;\n    const bottomText = error && errorMessage ? errorMessage : helperText;\n\n    return (\n      <SelectContext.Provider value={{ size, error, disabled }}>\n        <div\n          className={cn(\"flex flex-col\", fullWidth && \"w-full\", className)}\n          data-disabled={disabled ? \"\" : undefined}\n          data-error={error ? \"\" : undefined}\n        >\n          {label && (\n            <label\n              htmlFor={triggerId}\n              className=\"typography-caption-semibold px-1 pt-1 pb-2 text-body-100\"\n            >\n              {label}\n            </label>\n          )}\n\n          <SelectPrimitive.Root disabled={disabled} {...props}>\n            <SelectPrimitive.Trigger\n              ref={ref}\n              id={triggerId}\n              aria-label={ariaLabel}\n              aria-labelledby={ariaLabelledby}\n              aria-describedby={bottomText ? helperTextId : undefined}\n              aria-invalid={error || undefined}\n              className={cn(\n                \"flex w-full cursor-pointer items-center justify-between rounded-xl border bg-neutral-100 outline-none motion-safe:transition-colors\",\n                TRIGGER_HEIGHT[size],\n                TRIGGER_PADDING_X[size],\n                TRIGGER_GAP[size],\n                TRIGGER_TYPOGRAPHY[size],\n                error ? \"border-error-500\" : \"border-transparent\",\n                !disabled &&\n                  !error &&\n                  \"hover:border-neutral-400 data-[state=open]:border-neutral-400\",\n                disabled && \"cursor-not-allowed opacity-50\",\n              )}\n            >\n              <div className=\"flex items-center gap-2\">\n                {leftIcon && (\n                  <span\n                    className=\"flex size-5 shrink-0 items-center justify-center text-body-200\"\n                    data-testid=\"left-icon\"\n                  >\n                    {leftIcon}\n                  </span>\n                )}\n                <SelectPrimitive.Value\n                  placeholder={placeholder}\n                  className=\"min-w-0 flex-1 truncate text-left text-body-100 data-placeholder:text-body-200 data-placeholder:opacity-40\"\n                />\n              </div>\n\n              <SelectPrimitive.Icon asChild>\n                <ChevronDownIcon />\n              </SelectPrimitive.Icon>\n            </SelectPrimitive.Trigger>\n\n            {children}\n          </SelectPrimitive.Root>\n\n          {bottomText && (\n            <p\n              id={helperTextId}\n              className={cn(\n                \"typography-caption-regular px-2 pt-1 pb-0.5\",\n                error ? \"text-error-500\" : \"text-body-200\",\n              )}\n            >\n              {bottomText}\n            </p>\n          )}\n        </div>\n      </SelectContext.Provider>\n    );\n  },\n);\n\nSelect.displayName = \"Select\";\n\nexport interface SelectContentProps\n  extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content> {}\n\n/**\n * The dropdown panel rendered inside a portal. Place {@link SelectItem} elements\n * (and optionally {@link SelectGroup} / {@link SelectLabel}) as children.\n */\nexport const SelectContent = React.forwardRef<\n  React.ComponentRef<typeof SelectPrimitive.Content>,\n  SelectContentProps\n>(({ className, children, position = \"popper\", sideOffset = 4, style, ...props }, ref) => (\n  <SelectPrimitive.Portal>\n    <SelectPrimitive.Content\n      ref={ref}\n      position={position}\n      sideOffset={sideOffset}\n      style={{ zIndex: \"var(--fanvue-ui-portal-z-index, 50)\", ...style }}\n      className={cn(\n        \"relative min-w-(--radix-select-trigger-width) overflow-hidden rounded-xl border border-neutral-200 bg-background-inverse-solid text-body-100 shadow-[0_4px_16px_rgba(0,0,0,0.10)]\",\n        \"data-[state=closed]:animate-out data-[state=open]:animate-in\",\n        \"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\",\n        \"data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95\",\n        \"data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2\",\n        className,\n      )}\n      {...props}\n    >\n      <SelectPrimitive.Viewport className=\"max-h-[var(--radix-select-content-available-height)] overflow-y-auto p-1\">\n        {children}\n      </SelectPrimitive.Viewport>\n    </SelectPrimitive.Content>\n  </SelectPrimitive.Portal>\n));\n\nSelectContent.displayName = \"SelectContent\";\n\nexport interface SelectItemProps\n  extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item> {}\n\n/**\n * An individual option inside {@link SelectContent}.\n */\nexport const SelectItem = React.forwardRef<\n  React.ComponentRef<typeof SelectPrimitive.Item>,\n  SelectItemProps\n>(({ className, children, ...props }, ref) => (\n  <SelectPrimitive.Item\n    ref={ref}\n    className={cn(\n      \"typography-body-1-regular relative flex w-full cursor-pointer select-none items-center gap-2 rounded-lg py-2 pr-2 pl-3 text-body-100 outline-none\",\n      \"focus:bg-neutral-100 data-disabled:pointer-events-none data-disabled:opacity-50\",\n      className,\n    )}\n    {...props}\n  >\n    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n    <SelectPrimitive.ItemIndicator className=\"ml-auto flex size-4 shrink-0 items-center justify-center\">\n      <CheckIcon className=\"size-4 text-body-100\" />\n    </SelectPrimitive.ItemIndicator>\n  </SelectPrimitive.Item>\n));\n\nSelectItem.displayName = \"SelectItem\";\n\n/** Props for {@link SelectGroup}. */\nexport type SelectGroupProps = React.ComponentPropsWithoutRef<typeof SelectPrimitive.Group>;\n\n/**\n * Groups related {@link SelectItem} elements under a {@link SelectLabel}.\n */\nexport const SelectGroup = SelectPrimitive.Group;\nSelectGroup.displayName = \"SelectGroup\";\n\nexport interface SelectLabelProps\n  extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label> {}\n\n/**\n * A non-interactive label shown above a {@link SelectGroup}.\n */\nexport const SelectLabel = React.forwardRef<\n  React.ComponentRef<typeof SelectPrimitive.Label>,\n  SelectLabelProps\n>(({ className, ...props }, ref) => (\n  <SelectPrimitive.Label\n    ref={ref}\n    className={cn(\"typography-caption-semibold px-3 py-1.5 text-body-200\", className)}\n    {...props}\n  />\n));\n\nSelectLabel.displayName = \"SelectLabel\";\n\nexport interface SelectSeparatorProps\n  extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator> {}\n\n/** A horizontal rule that visually separates groups in {@link SelectContent}. */\nexport const SelectSeparator = React.forwardRef<\n  React.ComponentRef<typeof SelectPrimitive.Separator>,\n  SelectSeparatorProps\n>(({ className, ...props }, ref) => (\n  <SelectPrimitive.Separator\n    ref={ref}\n    className={cn(\"-mx-1 my-1 h-px bg-neutral-200\", className)}\n    {...props}\n  />\n));\n\nSelectSeparator.displayName = \"SelectSeparator\";\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"Select.mjs","sources":["../../../src/components/Select/Select.tsx"],"sourcesContent":["import * as SelectPrimitive from \"@radix-ui/react-select\";\nimport * as React from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport { CheckIcon } from \"../Icons/CheckIcon\";\nimport { ChevronDownIcon } from \"../Icons/ChevronDownIcon\";\n\n/** Select field height in pixels. */\nexport type SelectSize = \"48\" | \"40\" | \"32\";\n\ntype SelectContextValue = {\n  size: SelectSize;\n  error: boolean;\n  disabled?: boolean;\n};\n\nconst SelectContext = React.createContext<SelectContextValue>({\n  size: \"48\",\n  error: false,\n});\n\nconst TRIGGER_HEIGHT: Record<SelectSize, string> = {\n  \"48\": \"h-12\",\n  \"40\": \"h-10\",\n  \"32\": \"h-8\",\n};\n\nconst TRIGGER_PADDING_X: Record<SelectSize, string> = {\n  \"48\": \"px-4\",\n  \"40\": \"px-4\",\n  \"32\": \"px-3\",\n};\n\nconst TRIGGER_GAP: Record<SelectSize, string> = {\n  \"48\": \"gap-3\",\n  \"40\": \"gap-3\",\n  \"32\": \"gap-2\",\n};\n\nconst TRIGGER_TYPOGRAPHY: Record<SelectSize, string> = {\n  \"48\": \"typography-body-1-regular\",\n  \"40\": \"typography-body-1-regular\",\n  \"32\": \"typography-body-2-regular\",\n};\n\nexport interface SelectProps extends Omit<SelectPrimitive.SelectProps, \"dir\"> {\n  /** Label text displayed above the trigger. Also used as the accessible name. */\n  label?: string;\n  /** Accessible name applied directly to the trigger button when no visible `label` is provided. */\n  \"aria-label\"?: string;\n  /** ID of an external element that labels the trigger button. */\n  \"aria-labelledby\"?: string;\n  /** Helper text displayed below the trigger. Replaced by `errorMessage` when `error` is `true`. */\n  helperText?: string;\n  /** Height of the select field in pixels. @default \"48\" */\n  size?: SelectSize;\n  /** Whether the field is in an error state. @default false */\n  error?: boolean;\n  /** Error message displayed below the trigger. Shown instead of `helperText` when `error` is `true`. */\n  errorMessage?: string;\n  /** Placeholder shown when no value is selected. */\n  placeholder?: string;\n  /** Icon element displayed at the left side of the trigger. */\n  leftIcon?: React.ReactNode;\n  /** Whether the field stretches to fill its container width. @default false */\n  fullWidth?: boolean;\n  /** Wraps the `className` of the outermost container div. */\n  className?: string;\n  /** HTML `id` applied to the trigger button. Auto-generated if omitted. */\n  id?: string;\n}\n\n/**\n * A select field with optional label, helper/error text, and an icon slot,\n * built on Radix UI Select for full accessibility and keyboard navigation.\n *\n * Pair with {@link SelectContent} and {@link SelectItem} to provide options.\n *\n * @example\n * ```tsx\n * <Select label=\"Country\" placeholder=\"Select a country\">\n *   <SelectContent>\n *     <SelectItem value=\"us\">United States</SelectItem>\n *     <SelectItem value=\"uk\">United Kingdom</SelectItem>\n *   </SelectContent>\n * </Select>\n * ```\n */\nexport const Select = React.forwardRef<\n  React.ComponentRef<typeof SelectPrimitive.Trigger>,\n  SelectProps\n>(\n  (\n    {\n      label,\n      helperText,\n      size = \"48\",\n      error = false,\n      errorMessage,\n      placeholder,\n      leftIcon,\n      fullWidth = false,\n      className,\n      id,\n      disabled,\n      children,\n      \"aria-label\": ariaLabel,\n      \"aria-labelledby\": ariaLabelledby,\n      ...props\n    },\n    ref,\n  ) => {\n    const generatedId = React.useId();\n    const triggerId = id ?? generatedId;\n    const helperTextId = `${triggerId}-helper`;\n    const bottomText = error && errorMessage ? errorMessage : helperText;\n\n    return (\n      <SelectContext.Provider value={{ size, error, disabled }}>\n        <div\n          className={cn(\"flex flex-col\", fullWidth && \"w-full\", className)}\n          data-disabled={disabled ? \"\" : undefined}\n          data-error={error ? \"\" : undefined}\n        >\n          {label && (\n            <label\n              htmlFor={triggerId}\n              className=\"typography-caption-semibold px-1 pt-1 pb-2 text-body-100\"\n            >\n              {label}\n            </label>\n          )}\n\n          <SelectPrimitive.Root disabled={disabled} {...props}>\n            <SelectPrimitive.Trigger\n              ref={ref}\n              id={triggerId}\n              aria-label={ariaLabel}\n              aria-labelledby={ariaLabelledby}\n              aria-describedby={bottomText ? helperTextId : undefined}\n              aria-invalid={error || undefined}\n              className={cn(\n                \"flex w-full cursor-pointer items-center justify-between rounded-xl border bg-neutral-100 outline-none motion-safe:transition-colors\",\n                TRIGGER_HEIGHT[size],\n                TRIGGER_PADDING_X[size],\n                TRIGGER_GAP[size],\n                TRIGGER_TYPOGRAPHY[size],\n                error ? \"border-error-500\" : \"border-transparent\",\n                !disabled &&\n                  !error &&\n                  \"hover:border-neutral-400 data-[state=open]:border-neutral-400\",\n                disabled && \"cursor-not-allowed opacity-50\",\n              )}\n            >\n              <div className=\"flex min-w-0 items-center gap-2\">\n                {leftIcon && (\n                  <span\n                    className=\"flex size-5 shrink-0 items-center justify-center text-body-200\"\n                    data-testid=\"left-icon\"\n                  >\n                    {leftIcon}\n                  </span>\n                )}\n                <SelectPrimitive.Value\n                  placeholder={placeholder}\n                  className=\"min-w-0 flex-1 truncate text-left text-body-100 data-placeholder:text-body-200 data-placeholder:opacity-40\"\n                />\n              </div>\n\n              <SelectPrimitive.Icon asChild>\n                <ChevronDownIcon />\n              </SelectPrimitive.Icon>\n            </SelectPrimitive.Trigger>\n\n            {children}\n          </SelectPrimitive.Root>\n\n          {bottomText && (\n            <p\n              id={helperTextId}\n              className={cn(\n                \"typography-caption-regular px-2 pt-1 pb-0.5\",\n                error ? \"text-error-500\" : \"text-body-200\",\n              )}\n            >\n              {bottomText}\n            </p>\n          )}\n        </div>\n      </SelectContext.Provider>\n    );\n  },\n);\n\nSelect.displayName = \"Select\";\n\nexport interface SelectContentProps\n  extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content> {}\n\n/**\n * The dropdown panel rendered inside a portal. Place {@link SelectItem} elements\n * (and optionally {@link SelectGroup} / {@link SelectLabel}) as children.\n */\nexport const SelectContent = React.forwardRef<\n  React.ComponentRef<typeof SelectPrimitive.Content>,\n  SelectContentProps\n>(({ className, children, position = \"popper\", sideOffset = 4, style, ...props }, ref) => (\n  <SelectPrimitive.Portal>\n    <SelectPrimitive.Content\n      ref={ref}\n      position={position}\n      sideOffset={sideOffset}\n      style={{ zIndex: \"var(--fanvue-ui-portal-z-index, 50)\", ...style }}\n      className={cn(\n        \"relative min-w-(--radix-select-trigger-width) overflow-hidden rounded-xl border border-neutral-200 bg-background-inverse-solid text-body-100 shadow-[0_4px_16px_rgba(0,0,0,0.10)]\",\n        \"data-[state=closed]:animate-out data-[state=open]:animate-in\",\n        \"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\",\n        \"data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95\",\n        \"data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2\",\n        className,\n      )}\n      {...props}\n    >\n      <SelectPrimitive.Viewport className=\"max-h-[var(--radix-select-content-available-height)] overflow-y-auto p-1\">\n        {children}\n      </SelectPrimitive.Viewport>\n    </SelectPrimitive.Content>\n  </SelectPrimitive.Portal>\n));\n\nSelectContent.displayName = \"SelectContent\";\n\nexport interface SelectItemProps\n  extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item> {}\n\n/**\n * An individual option inside {@link SelectContent}.\n */\nexport const SelectItem = React.forwardRef<\n  React.ComponentRef<typeof SelectPrimitive.Item>,\n  SelectItemProps\n>(({ className, children, ...props }, ref) => (\n  <SelectPrimitive.Item\n    ref={ref}\n    className={cn(\n      \"typography-body-1-regular relative flex w-full cursor-pointer select-none items-center gap-2 rounded-lg py-2 pr-2 pl-3 text-body-100 outline-none\",\n      \"focus:bg-neutral-100 data-disabled:pointer-events-none data-disabled:opacity-50\",\n      className,\n    )}\n    {...props}\n  >\n    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n    <SelectPrimitive.ItemIndicator className=\"ml-auto flex size-4 shrink-0 items-center justify-center\">\n      <CheckIcon className=\"size-4 text-body-100\" />\n    </SelectPrimitive.ItemIndicator>\n  </SelectPrimitive.Item>\n));\n\nSelectItem.displayName = \"SelectItem\";\n\n/** Props for {@link SelectGroup}. */\nexport type SelectGroupProps = React.ComponentPropsWithoutRef<typeof SelectPrimitive.Group>;\n\n/**\n * Groups related {@link SelectItem} elements under a {@link SelectLabel}.\n */\nexport const SelectGroup = SelectPrimitive.Group;\nSelectGroup.displayName = \"SelectGroup\";\n\nexport interface SelectLabelProps\n  extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label> {}\n\n/**\n * A non-interactive label shown above a {@link SelectGroup}.\n */\nexport const SelectLabel = React.forwardRef<\n  React.ComponentRef<typeof SelectPrimitive.Label>,\n  SelectLabelProps\n>(({ className, ...props }, ref) => (\n  <SelectPrimitive.Label\n    ref={ref}\n    className={cn(\"typography-caption-semibold px-3 py-1.5 text-body-200\", className)}\n    {...props}\n  />\n));\n\nSelectLabel.displayName = \"SelectLabel\";\n\nexport interface SelectSeparatorProps\n  extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator> {}\n\n/** A horizontal rule that visually separates groups in {@link SelectContent}. */\nexport const SelectSeparator = React.forwardRef<\n  React.ComponentRef<typeof SelectPrimitive.Separator>,\n  SelectSeparatorProps\n>(({ className, ...props }, ref) => (\n  <SelectPrimitive.Separator\n    ref={ref}\n    className={cn(\"-mx-1 my-1 h-px bg-neutral-200\", className)}\n    {...props}\n  />\n));\n\nSelectSeparator.displayName = \"SelectSeparator\";\n"],"names":[],"mappings":"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"}

package/dist/components/TextArea/TextArea.mjs

@@ -39,9 +39,10 @@ function getContainerClassName(size, error, disabled) {
     disabled && "opacity-50"
   );
 }
-function getTextareaClassName(size, hasClearButton, hasMinRows) {
+function getTextareaClassName(size, hasClearButton, hasMinRows, resizable) {
   return cn(
-    "w-full resize-y rounded-xl bg-transparent text-body-100 no-underline placeholder:text-body-200 placeholder:opacity-40 focus:outline-none disabled:cursor-not-allowed",
+    "w-full rounded-xl bg-transparent text-body-100 no-underline placeholder:text-body-200 placeholder:opacity-40 focus:outline-none disabled:cursor-not-allowed",
+    resizable ? "resize-y" : "resize-none",
     !hasMinRows && "min-h-[80px]",
     TEXTAREA_SIZE_CLASSES[size],
     PADDING_HORIZONTAL[size],
@@ -125,6 +126,7 @@ const TextArea = React.forwardRef(
     onChange,
     minRows,
     maxRows,
+    resizable = true,
     ...props
   }, ref) => {
     const generatedId = React.useId();
@@ -171,7 +173,7 @@ const TextArea = React.forwardRef(
                 disabled,
                 "aria-describedby": ariaDescribedBy,
                 "aria-invalid": error || void 0,
-                className: getTextareaClassName(size, showClear, !!minRows),
+                className: getTextareaClassName(size, showClear, !!minRows, resizable),
                 value: displayValue,
                 defaultValue: resolvedDefaultValue,
                 onChange: handleChange,

package/dist/components/TextArea/TextArea.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"TextArea.mjs","sources":["../../../src/components/TextArea/TextArea.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { IconButton } from \"../IconButton/IconButton\";\nimport { CheckOutlineIcon } from \"../Icons/CheckOutlineIcon\";\nimport { CloseIcon } from \"../Icons/CloseIcon\";\n\n/** Text area height in pixels. */\nexport type TextAreaSize = \"48\" | \"40\" | \"32\";\n\nexport interface TextAreaProps\n  extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, \"size\"> {\n  /** Label text displayed above the textarea. Also used as the accessible name. */\n  label?: string;\n  /** Helper text displayed below the textarea. Replaced by `errorMessage` when `error` is `true`. */\n  helperText?: string;\n  /** Minimum height of the text area in pixels. @default \"48\" */\n  size?: TextAreaSize;\n  /** Whether the text area is in an error state. @default false */\n  error?: boolean;\n  /** Error message displayed below the textarea. Shown instead of `helperText` when `error` is `true`. */\n  errorMessage?: string;\n  /** Whether the text area is validated. @default false */\n  validated?: boolean;\n  /** Whether the text area stretches to fill its container width. @default false */\n  fullWidth?: boolean;\n  /** Whether to show a clear button when text is present. @default false */\n  showClearButton?: boolean;\n  /** Callback fired when the clear button is clicked. Note: `onChange` is also called with an empty value when clearing. */\n  onClear?: () => void;\n  /** Minimum number of rows (lines) for the textarea. */\n  minRows?: number;\n  /** Maximum number of rows (lines) for the textarea. */\n  maxRows?: number;\n}\n\nconst CONTAINER_MIN_HEIGHT: Record<TextAreaSize, string> = {\n  \"48\": \"min-h-12\",\n  \"40\": \"min-h-10\",\n  \"32\": \"min-h-8\",\n};\n\nconst TEXTAREA_SIZE_CLASSES: Record<TextAreaSize, string> = {\n  \"48\": \"py-3 typography-body-1-regular\",\n  \"40\": \"py-2 typography-body-1-regular\",\n  \"32\": \"py-2 typography-body-2-regular\",\n};\n\nconst PADDING_HORIZONTAL: Record<TextAreaSize, string> = {\n  \"48\": \"px-4\",\n  \"40\": \"px-4\",\n  \"32\": \"px-3\",\n};\n\nconst PADDING_RIGHT_WITH_CLEAR: Record<TextAreaSize, string> = {\n  \"48\": \"pr-11\",\n  \"40\": \"pr-11\",\n  \"32\": \"pr-10\",\n};\n\nconst CLEAR_BUTTON_RIGHT: Record<TextAreaSize, string> = {\n  \"48\": \"right-4 top-3\",\n  \"40\": \"right-4 top-2\",\n  \"32\": \"right-3 top-2\",\n};\n\nfunction getContainerClassName(size: TextAreaSize, error: boolean, disabled?: boolean) {\n  return cn(\n    \"relative rounded-xl border bg-neutral-100 has-focus-visible:outline-none motion-safe:transition-colors\",\n    error ? \"border-error-500\" : \"border-transparent\",\n    !disabled && !error && \"hover:border-neutral-400\",\n    CONTAINER_MIN_HEIGHT[size],\n    disabled && \"opacity-50\",\n  );\n}\n\nfunction getTextareaClassName(size: TextAreaSize, hasClearButton: boolean, hasMinRows: boolean) {\n  return cn(\n    \"w-full resize-y rounded-xl bg-transparent text-body-100 no-underline placeholder:text-body-200 placeholder:opacity-40 focus:outline-none disabled:cursor-not-allowed\",\n    !hasMinRows && \"min-h-[80px]\",\n    TEXTAREA_SIZE_CLASSES[size],\n    PADDING_HORIZONTAL[size],\n    hasClearButton ? PADDING_RIGHT_WITH_CLEAR[size] : \"\",\n  );\n}\n\nfunction TextAreaHelperText({\n  id,\n  error,\n  children,\n}: {\n  id: string;\n  error: boolean;\n  children: React.ReactNode;\n}) {\n  return (\n    <p\n      id={id}\n      className={cn(\n        \"typography-caption-regular px-2 pt-1 pb-0.5\",\n        error ? \"text-error-500\" : \"text-body-200\",\n      )}\n    >\n      {children}\n    </p>\n  );\n}\n\nfunction warnMissingAccessibleName(label?: string, ariaLabel?: string, ariaLabelledBy?: string) {\n  if (process.env.NODE_ENV !== \"production\") {\n    if (!label && !ariaLabel && !ariaLabelledBy) {\n      console.warn(\n        \"TextArea: no accessible name provided. Pass a `label`, `aria-label`, or `aria-labelledby` prop.\",\n      );\n    }\n  }\n}\n\nfunction calculateMaxHeight(size: TextAreaSize, maxRows?: number): string | undefined {\n  if (!maxRows) return undefined;\n\n  // Line height is 24px for body-1 (sizes 48 and 40) and 20px for body-2 (size 32)\n  const lineHeight = size === \"32\" ? 20 : 24;\n  // py-2 = 8px, py-3 = 12px\n  const verticalPadding = size === \"32\" ? 8 : size === \"40\" ? 8 : 12;\n\n  return `${lineHeight * maxRows + verticalPadding * 2}px`;\n}\n\nfunction useTextAreaValue(\n  value: React.TextareaHTMLAttributes<HTMLTextAreaElement>[\"value\"],\n  defaultValue: React.TextareaHTMLAttributes<HTMLTextAreaElement>[\"defaultValue\"],\n  showClearButton: boolean,\n  onChange?: React.ChangeEventHandler<HTMLTextAreaElement>,\n  onClear?: () => void,\n  textareaRef?: React.RefObject<HTMLTextAreaElement | null>,\n) {\n  const [internalValue, setInternalValue] = React.useState(defaultValue ?? \"\");\n  const resolvedValue = value !== undefined ? value : internalValue;\n\n  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {\n    setInternalValue(e.target.value);\n    onChange?.(e);\n  };\n\n  const handleClear = () => {\n    setInternalValue(\"\");\n\n    if (onChange && textareaRef?.current) {\n      const syntheticEvent = {\n        target: { ...textareaRef.current, value: \"\" },\n        currentTarget: { ...textareaRef.current, value: \"\" },\n      } as React.ChangeEvent<HTMLTextAreaElement>;\n      onChange(syntheticEvent);\n    }\n\n    onClear?.();\n  };\n\n  return {\n    resolvedValue,\n    displayValue: showClearButton ? resolvedValue : value,\n    resolvedDefaultValue: showClearButton ? undefined : defaultValue,\n    handleChange,\n    handleClear,\n  };\n}\n\n/**\n * A multi-line text input with optional label, helper/error text, and clear button.\n *\n * Provide at least one of `label`, `aria-label`, or `aria-labelledby` for\n * accessibility — a console warning is emitted in development if none are set.\n *\n * @example\n * ```tsx\n * <TextArea\n *   label=\"Description\"\n *   placeholder=\"Enter your description...\"\n *   showClearButton\n *   error={!!descError}\n *   errorMessage={descError}\n * />\n * ```\n */\nexport const TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>(\n  (\n    {\n      label,\n      helperText,\n      size = \"48\",\n      error = false,\n      errorMessage,\n      validated = false,\n      className,\n      id,\n      disabled,\n      fullWidth = false,\n      showClearButton = false,\n      onClear,\n      value,\n      defaultValue,\n      onChange,\n      minRows,\n      maxRows,\n      ...props\n    },\n    ref,\n  ) => {\n    const generatedId = React.useId();\n    const inputId = id || generatedId;\n    const helperTextId = `${inputId}-helper`;\n    const bottomText = error && errorMessage ? errorMessage : helperText;\n    const maxHeight = calculateMaxHeight(size, maxRows);\n\n    const internalRef = React.useRef<HTMLTextAreaElement>(null);\n\n    const { resolvedValue, displayValue, resolvedDefaultValue, handleChange, handleClear } =\n      useTextAreaValue(value, defaultValue, showClearButton, onChange, onClear, internalRef);\n\n    const mergedRef = (node: HTMLTextAreaElement | null) => {\n      internalRef.current = node;\n      if (typeof ref === \"function\") {\n        ref(node);\n      } else if (ref) {\n        (ref as React.MutableRefObject<HTMLTextAreaElement | null>).current = node;\n      }\n    };\n\n    const showClear = showClearButton && resolvedValue !== \"\" && !disabled;\n    const showValidated = validated && !showClear;\n    const ariaDescribedBy = bottomText ? helperTextId : undefined;\n    const textareaStyle = maxHeight ? { maxHeight } : undefined;\n\n    warnMissingAccessibleName(label, props[\"aria-label\"], props[\"aria-labelledby\"]);\n\n    return (\n      <div\n        className={cn(\"flex flex-col\", fullWidth && \"w-full\", className)}\n        data-disabled={disabled ? \"\" : undefined}\n        data-error={error ? \"\" : undefined}\n      >\n        {label && (\n          <label\n            htmlFor={inputId}\n            className=\"typography-caption-semibold px-1 pt-1 pb-2 text-body-100\"\n          >\n            {label}\n          </label>\n        )}\n\n        <div className={getContainerClassName(size, error, disabled)}>\n          <textarea\n            ref={mergedRef}\n            id={inputId}\n            disabled={disabled}\n            aria-describedby={ariaDescribedBy}\n            aria-invalid={error || undefined}\n            className={getTextareaClassName(size, showClear, !!minRows)}\n            value={displayValue}\n            defaultValue={resolvedDefaultValue}\n            onChange={handleChange}\n            rows={minRows}\n            style={textareaStyle}\n            {...props}\n          />\n\n          {showClear && (\n            <IconButton\n              variant=\"tertiary\"\n              size=\"24\"\n              icon={<CloseIcon />}\n              aria-label=\"Clear text\"\n              onClick={handleClear}\n              className={cn(\n                \"absolute flex size-5 items-center justify-center self-end\",\n                CLEAR_BUTTON_RIGHT[size],\n              )}\n            />\n          )}\n          {showValidated && (\n            <div\n              className={cn(\n                \"pointer-events-none absolute flex size-5 items-center justify-center\",\n                CLEAR_BUTTON_RIGHT[size],\n              )}\n            >\n              <CheckOutlineIcon className=\"text-success-500\" />\n            </div>\n          )}\n        </div>\n\n        {bottomText && (\n          <TextAreaHelperText id={helperTextId} error={error}>\n            {bottomText}\n          </TextAreaHelperText>\n        )}\n      </div>\n    );\n  },\n);\n\nTextArea.displayName = \"TextArea\";\n"],"names":[],"mappings":";;;;;;;AAmCA,MAAM,uBAAqD;AAAA,EACzD,MAAM;AAAA,EACN,MAAM;AAAA,EACN,MAAM;AACR;AAEA,MAAM,wBAAsD;AAAA,EAC1D,MAAM;AAAA,EACN,MAAM;AAAA,EACN,MAAM;AACR;AAEA,MAAM,qBAAmD;AAAA,EACvD,MAAM;AAAA,EACN,MAAM;AAAA,EACN,MAAM;AACR;AAEA,MAAM,2BAAyD;AAAA,EAC7D,MAAM;AAAA,EACN,MAAM;AAAA,EACN,MAAM;AACR;AAEA,MAAM,qBAAmD;AAAA,EACvD,MAAM;AAAA,EACN,MAAM;AAAA,EACN,MAAM;AACR;AAEA,SAAS,sBAAsB,MAAoB,OAAgB,UAAoB;AACrF,SAAO;AAAA,IACL;AAAA,IACA,QAAQ,qBAAqB;AAAA,IAC7B,CAAC,YAAY,CAAC,SAAS;AAAA,IACvB,qBAAqB,IAAI;AAAA,IACzB,YAAY;AAAA,EAAA;AAEhB;AAEA,SAAS,qBAAqB,MAAoB,gBAAyB,YAAqB;AAC9F,SAAO;AAAA,IACL;AAAA,IACA,CAAC,cAAc;AAAA,IACf,sBAAsB,IAAI;AAAA,IAC1B,mBAAmB,IAAI;AAAA,IACvB,iBAAiB,yBAAyB,IAAI,IAAI;AAAA,EAAA;AAEtD;AAEA,SAAS,mBAAmB;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AACF,GAIG;AACD,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,WAAW;AAAA,QACT;AAAA,QACA,QAAQ,mBAAmB;AAAA,MAAA;AAAA,MAG5B;AAAA,IAAA;AAAA,EAAA;AAGP;AAEA,SAAS,0BAA0B,OAAgB,WAAoB,gBAAyB;AAC9F,MAAI,QAAQ,IAAI,aAAa,cAAc;AACzC,QAAI,CAAC,SAAS,CAAC,aAAa,CAAC,gBAAgB;AAC3C,cAAQ;AAAA,QACN;AAAA,MAAA;AAAA,IAEJ;AAAA,EACF;AACF;AAEA,SAAS,mBAAmB,MAAoB,SAAsC;AACpF,MAAI,CAAC,QAAS,QAAO;AAGrB,QAAM,aAAa,SAAS,OAAO,KAAK;AAExC,QAAM,kBAAkB,SAAS,OAAO,IAAI,SAAS,OAAO,IAAI;AAEhE,SAAO,GAAG,aAAa,UAAU,kBAAkB,CAAC;AACtD;AAEA,SAAS,iBACP,OACA,cACA,iBACA,UACA,SACA,aACA;AACA,QAAM,CAAC,eAAe,gBAAgB,IAAI,MAAM,SAAS,gBAAgB,EAAE;AAC3E,QAAM,gBAAgB,UAAU,SAAY,QAAQ;AAEpD,QAAM,eAAe,CAAC,MAA8C;AAClE,qBAAiB,EAAE,OAAO,KAAK;AAC/B,eAAW,CAAC;AAAA,EACd;AAEA,QAAM,cAAc,MAAM;AACxB,qBAAiB,EAAE;AAEnB,QAAI,YAAY,aAAa,SAAS;AACpC,YAAM,iBAAiB;AAAA,QACrB,QAAQ,EAAE,GAAG,YAAY,SAAS,OAAO,GAAA;AAAA,QACzC,eAAe,EAAE,GAAG,YAAY,SAAS,OAAO,GAAA;AAAA,MAAG;AAErD,eAAS,cAAc;AAAA,IACzB;AAEA,cAAA;AAAA,EACF;AAEA,SAAO;AAAA,IACL;AAAA,IACA,cAAc,kBAAkB,gBAAgB;AAAA,IAChD,sBAAsB,kBAAkB,SAAY;AAAA,IACpD;AAAA,IACA;AAAA,EAAA;AAEJ;AAmBO,MAAM,WAAW,MAAM;AAAA,EAC5B,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP,QAAQ;AAAA,IACR;AAAA,IACA,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ,kBAAkB;AAAA,IAClB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,cAAc,MAAM,MAAA;AAC1B,UAAM,UAAU,MAAM;AACtB,UAAM,eAAe,GAAG,OAAO;AAC/B,UAAM,aAAa,SAAS,eAAe,eAAe;AAC1D,UAAM,YAAY,mBAAmB,MAAM,OAAO;AAElD,UAAM,cAAc,MAAM,OAA4B,IAAI;AAE1D,UAAM,EAAE,eAAe,cAAc,sBAAsB,cAAc,YAAA,IACvE,iBAAiB,OAAO,cAAc,iBAAiB,UAAU,SAAS,WAAW;AAEvF,UAAM,YAAY,CAAC,SAAqC;AACtD,kBAAY,UAAU;AACtB,UAAI,OAAO,QAAQ,YAAY;AAC7B,YAAI,IAAI;AAAA,MACV,WAAW,KAAK;AACb,YAA2D,UAAU;AAAA,MACxE;AAAA,IACF;AAEA,UAAM,YAAY,mBAAmB,kBAAkB,MAAM,CAAC;AAC9D,UAAM,gBAAgB,aAAa,CAAC;AACpC,UAAM,kBAAkB,aAAa,eAAe;AACpD,UAAM,gBAAgB,YAAY,EAAE,UAAA,IAAc;AAElD,8BAA0B,OAAO,MAAM,YAAY,GAAG,MAAM,iBAAiB,CAAC;AAE9E,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW,GAAG,iBAAiB,aAAa,UAAU,SAAS;AAAA,QAC/D,iBAAe,WAAW,KAAK;AAAA,QAC/B,cAAY,QAAQ,KAAK;AAAA,QAExB,UAAA;AAAA,UAAA,SACC;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,SAAS;AAAA,cACT,WAAU;AAAA,cAET,UAAA;AAAA,YAAA;AAAA,UAAA;AAAA,+BAIJ,OAAA,EAAI,WAAW,sBAAsB,MAAM,OAAO,QAAQ,GACzD,UAAA;AAAA,YAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,KAAK;AAAA,gBACL,IAAI;AAAA,gBACJ;AAAA,gBACA,oBAAkB;AAAA,gBAClB,gBAAc,SAAS;AAAA,gBACvB,WAAW,qBAAqB,MAAM,WAAW,CAAC,CAAC,OAAO;AAAA,gBAC1D,OAAO;AAAA,gBACP,cAAc;AAAA,gBACd,UAAU;AAAA,gBACV,MAAM;AAAA,gBACN,OAAO;AAAA,gBACN,GAAG;AAAA,cAAA;AAAA,YAAA;AAAA,YAGL,aACC;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,SAAQ;AAAA,gBACR,MAAK;AAAA,gBACL,0BAAO,WAAA,EAAU;AAAA,gBACjB,cAAW;AAAA,gBACX,SAAS;AAAA,gBACT,WAAW;AAAA,kBACT;AAAA,kBACA,mBAAmB,IAAI;AAAA,gBAAA;AAAA,cACzB;AAAA,YAAA;AAAA,YAGH,iBACC;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,WAAW;AAAA,kBACT;AAAA,kBACA,mBAAmB,IAAI;AAAA,gBAAA;AAAA,gBAGzB,UAAA,oBAAC,kBAAA,EAAiB,WAAU,mBAAA,CAAmB;AAAA,cAAA;AAAA,YAAA;AAAA,UACjD,GAEJ;AAAA,UAEC,cACC,oBAAC,oBAAA,EAAmB,IAAI,cAAc,OACnC,UAAA,WAAA,CACH;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF;AAEA,SAAS,cAAc;"}
+{"version":3,"file":"TextArea.mjs","sources":["../../../src/components/TextArea/TextArea.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { IconButton } from \"../IconButton/IconButton\";\nimport { CheckOutlineIcon } from \"../Icons/CheckOutlineIcon\";\nimport { CloseIcon } from \"../Icons/CloseIcon\";\n\n/** Text area height in pixels. */\nexport type TextAreaSize = \"48\" | \"40\" | \"32\";\n\nexport interface TextAreaProps\n  extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, \"size\"> {\n  /** Label text displayed above the textarea. Also used as the accessible name. */\n  label?: string;\n  /** Helper text displayed below the textarea. Replaced by `errorMessage` when `error` is `true`. */\n  helperText?: string;\n  /** Minimum height of the text area in pixels. @default \"48\" */\n  size?: TextAreaSize;\n  /** Whether the text area is in an error state. @default false */\n  error?: boolean;\n  /** Error message displayed below the textarea. Shown instead of `helperText` when `error` is `true`. */\n  errorMessage?: string;\n  /** Whether the text area is validated. @default false */\n  validated?: boolean;\n  /** Whether the text area stretches to fill its container width. @default false */\n  fullWidth?: boolean;\n  /** Whether to show a clear button when text is present. @default false */\n  showClearButton?: boolean;\n  /** Callback fired when the clear button is clicked. Note: `onChange` is also called with an empty value when clearing. */\n  onClear?: () => void;\n  /** Minimum number of rows (lines) for the textarea. */\n  minRows?: number;\n  /** Maximum number of rows (lines) for the textarea. */\n  maxRows?: number;\n  /** Whether the textarea can be resized by the user. @default true */\n  resizable?: boolean;\n}\n\nconst CONTAINER_MIN_HEIGHT: Record<TextAreaSize, string> = {\n  \"48\": \"min-h-12\",\n  \"40\": \"min-h-10\",\n  \"32\": \"min-h-8\",\n};\n\nconst TEXTAREA_SIZE_CLASSES: Record<TextAreaSize, string> = {\n  \"48\": \"py-3 typography-body-1-regular\",\n  \"40\": \"py-2 typography-body-1-regular\",\n  \"32\": \"py-2 typography-body-2-regular\",\n};\n\nconst PADDING_HORIZONTAL: Record<TextAreaSize, string> = {\n  \"48\": \"px-4\",\n  \"40\": \"px-4\",\n  \"32\": \"px-3\",\n};\n\nconst PADDING_RIGHT_WITH_CLEAR: Record<TextAreaSize, string> = {\n  \"48\": \"pr-11\",\n  \"40\": \"pr-11\",\n  \"32\": \"pr-10\",\n};\n\nconst CLEAR_BUTTON_RIGHT: Record<TextAreaSize, string> = {\n  \"48\": \"right-4 top-3\",\n  \"40\": \"right-4 top-2\",\n  \"32\": \"right-3 top-2\",\n};\n\nfunction getContainerClassName(size: TextAreaSize, error: boolean, disabled?: boolean) {\n  return cn(\n    \"relative rounded-xl border bg-neutral-100 has-focus-visible:outline-none motion-safe:transition-colors\",\n    error ? \"border-error-500\" : \"border-transparent\",\n    !disabled && !error && \"hover:border-neutral-400\",\n    CONTAINER_MIN_HEIGHT[size],\n    disabled && \"opacity-50\",\n  );\n}\n\nfunction getTextareaClassName(\n  size: TextAreaSize,\n  hasClearButton: boolean,\n  hasMinRows: boolean,\n  resizable: boolean,\n) {\n  return cn(\n    \"w-full rounded-xl bg-transparent text-body-100 no-underline placeholder:text-body-200 placeholder:opacity-40 focus:outline-none disabled:cursor-not-allowed\",\n    resizable ? \"resize-y\" : \"resize-none\",\n    !hasMinRows && \"min-h-[80px]\",\n    TEXTAREA_SIZE_CLASSES[size],\n    PADDING_HORIZONTAL[size],\n    hasClearButton ? PADDING_RIGHT_WITH_CLEAR[size] : \"\",\n  );\n}\n\nfunction TextAreaHelperText({\n  id,\n  error,\n  children,\n}: {\n  id: string;\n  error: boolean;\n  children: React.ReactNode;\n}) {\n  return (\n    <p\n      id={id}\n      className={cn(\n        \"typography-caption-regular px-2 pt-1 pb-0.5\",\n        error ? \"text-error-500\" : \"text-body-200\",\n      )}\n    >\n      {children}\n    </p>\n  );\n}\n\nfunction warnMissingAccessibleName(label?: string, ariaLabel?: string, ariaLabelledBy?: string) {\n  if (process.env.NODE_ENV !== \"production\") {\n    if (!label && !ariaLabel && !ariaLabelledBy) {\n      console.warn(\n        \"TextArea: no accessible name provided. Pass a `label`, `aria-label`, or `aria-labelledby` prop.\",\n      );\n    }\n  }\n}\n\nfunction calculateMaxHeight(size: TextAreaSize, maxRows?: number): string | undefined {\n  if (!maxRows) return undefined;\n\n  // Line height is 24px for body-1 (sizes 48 and 40) and 20px for body-2 (size 32)\n  const lineHeight = size === \"32\" ? 20 : 24;\n  // py-2 = 8px, py-3 = 12px\n  const verticalPadding = size === \"32\" ? 8 : size === \"40\" ? 8 : 12;\n\n  return `${lineHeight * maxRows + verticalPadding * 2}px`;\n}\n\nfunction useTextAreaValue(\n  value: React.TextareaHTMLAttributes<HTMLTextAreaElement>[\"value\"],\n  defaultValue: React.TextareaHTMLAttributes<HTMLTextAreaElement>[\"defaultValue\"],\n  showClearButton: boolean,\n  onChange?: React.ChangeEventHandler<HTMLTextAreaElement>,\n  onClear?: () => void,\n  textareaRef?: React.RefObject<HTMLTextAreaElement | null>,\n) {\n  const [internalValue, setInternalValue] = React.useState(defaultValue ?? \"\");\n  const resolvedValue = value !== undefined ? value : internalValue;\n\n  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {\n    setInternalValue(e.target.value);\n    onChange?.(e);\n  };\n\n  const handleClear = () => {\n    setInternalValue(\"\");\n\n    if (onChange && textareaRef?.current) {\n      const syntheticEvent = {\n        target: { ...textareaRef.current, value: \"\" },\n        currentTarget: { ...textareaRef.current, value: \"\" },\n      } as React.ChangeEvent<HTMLTextAreaElement>;\n      onChange(syntheticEvent);\n    }\n\n    onClear?.();\n  };\n\n  return {\n    resolvedValue,\n    displayValue: showClearButton ? resolvedValue : value,\n    resolvedDefaultValue: showClearButton ? undefined : defaultValue,\n    handleChange,\n    handleClear,\n  };\n}\n\n/**\n * A multi-line text input with optional label, helper/error text, and clear button.\n *\n * Provide at least one of `label`, `aria-label`, or `aria-labelledby` for\n * accessibility — a console warning is emitted in development if none are set.\n *\n * @example\n * ```tsx\n * <TextArea\n *   label=\"Description\"\n *   placeholder=\"Enter your description...\"\n *   showClearButton\n *   error={!!descError}\n *   errorMessage={descError}\n * />\n * ```\n */\nexport const TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>(\n  (\n    {\n      label,\n      helperText,\n      size = \"48\",\n      error = false,\n      errorMessage,\n      validated = false,\n      className,\n      id,\n      disabled,\n      fullWidth = false,\n      showClearButton = false,\n      onClear,\n      value,\n      defaultValue,\n      onChange,\n      minRows,\n      maxRows,\n      resizable = true,\n      ...props\n    },\n    ref,\n  ) => {\n    const generatedId = React.useId();\n    const inputId = id || generatedId;\n    const helperTextId = `${inputId}-helper`;\n    const bottomText = error && errorMessage ? errorMessage : helperText;\n    const maxHeight = calculateMaxHeight(size, maxRows);\n\n    const internalRef = React.useRef<HTMLTextAreaElement>(null);\n\n    const { resolvedValue, displayValue, resolvedDefaultValue, handleChange, handleClear } =\n      useTextAreaValue(value, defaultValue, showClearButton, onChange, onClear, internalRef);\n\n    const mergedRef = (node: HTMLTextAreaElement | null) => {\n      internalRef.current = node;\n      if (typeof ref === \"function\") {\n        ref(node);\n      } else if (ref) {\n        (ref as React.MutableRefObject<HTMLTextAreaElement | null>).current = node;\n      }\n    };\n\n    const showClear = showClearButton && resolvedValue !== \"\" && !disabled;\n    const showValidated = validated && !showClear;\n    const ariaDescribedBy = bottomText ? helperTextId : undefined;\n    const textareaStyle = maxHeight ? { maxHeight } : undefined;\n\n    warnMissingAccessibleName(label, props[\"aria-label\"], props[\"aria-labelledby\"]);\n\n    return (\n      <div\n        className={cn(\"flex flex-col\", fullWidth && \"w-full\", className)}\n        data-disabled={disabled ? \"\" : undefined}\n        data-error={error ? \"\" : undefined}\n      >\n        {label && (\n          <label\n            htmlFor={inputId}\n            className=\"typography-caption-semibold px-1 pt-1 pb-2 text-body-100\"\n          >\n            {label}\n          </label>\n        )}\n\n        <div className={getContainerClassName(size, error, disabled)}>\n          <textarea\n            ref={mergedRef}\n            id={inputId}\n            disabled={disabled}\n            aria-describedby={ariaDescribedBy}\n            aria-invalid={error || undefined}\n            className={getTextareaClassName(size, showClear, !!minRows, resizable)}\n            value={displayValue}\n            defaultValue={resolvedDefaultValue}\n            onChange={handleChange}\n            rows={minRows}\n            style={textareaStyle}\n            {...props}\n          />\n\n          {showClear && (\n            <IconButton\n              variant=\"tertiary\"\n              size=\"24\"\n              icon={<CloseIcon />}\n              aria-label=\"Clear text\"\n              onClick={handleClear}\n              className={cn(\n                \"absolute flex size-5 items-center justify-center self-end\",\n                CLEAR_BUTTON_RIGHT[size],\n              )}\n            />\n          )}\n          {showValidated && (\n            <div\n              className={cn(\n                \"pointer-events-none absolute flex size-5 items-center justify-center\",\n                CLEAR_BUTTON_RIGHT[size],\n              )}\n            >\n              <CheckOutlineIcon className=\"text-success-500\" />\n            </div>\n          )}\n        </div>\n\n        {bottomText && (\n          <TextAreaHelperText id={helperTextId} error={error}>\n            {bottomText}\n          </TextAreaHelperText>\n        )}\n      </div>\n    );\n  },\n);\n\nTextArea.displayName = \"TextArea\";\n"],"names":[],"mappings":"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"}

package/dist/index.d.ts

@@ -245,6 +245,8 @@ export declare interface ButtonProps extends React_2.ButtonHTMLAttributes<HTMLBu
     discount?: string;
     /** Current price shown inside the button after the label and icons. */
     price?: string;
+    /** When `true`, the button will take the full width of its container. @default false */
+    fullWidth?: boolean;
 }
 
 /** Button height in pixels. */
@@ -1152,6 +1154,8 @@ export declare interface TextAreaProps extends Omit<React_2.TextareaHTMLAttribut
     minRows?: number;
     /** Maximum number of rows (lines) for the textarea. */
     maxRows?: number;
+    /** Whether the textarea can be resized by the user. @default true */
+    resizable?: boolean;
 }
 
 /** Text area height in pixels. */

package/package.json

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