@fanvue/ui 1.7.0 → 1.7.1

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

@@ -35,6 +35,12 @@ const ICON_SIZE_CLASS = {
   "32": "size-4",
   "24": "size-3.5"
 };
+const ICON_WRAPPER_CLASS = {
+  "48": "[&>svg]:size-5",
+  "40": "[&>svg]:size-5",
+  "32": "[&>svg]:size-4",
+  "24": "[&>svg]:size-3.5"
+};
 const VARIANT_CLASSES = {
   primary: "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",
   secondary: "border-body-100 border border-1 border-body-100 bg-transparent text-body-100 hover:bg-brand-green-50 active:bg-brand-green-50",
@@ -125,8 +131,12 @@ const Button = React__namespace.forwardRef(
   }, ref) => {
     const Comp = asChild ? reactSlot.Slot : "button";
     const isDisabled = disabled || loading;
-    const iconSizeClass = ICON_SIZE_CLASS[size];
-    const buttonSpecificProps = !asChild ? { type: "button", "data-testid": "button", disabled: isDisabled } : isDisabled ? { "aria-disabled": true } : {};
+    const iconSizeClass = ICON_WRAPPER_CLASS[size];
+    const buttonSpecificProps = !asChild ? {
+      type: "button",
+      "data-testid": "button",
+      disabled: isDisabled
+    } : isDisabled ? { "aria-disabled": true } : {};
     const loadingLabelProps = loading && asChild ? { "aria-label": getTextContent(children) } : {};
     const content = renderContent({
       loading,

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\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_SIZE_CLASS[size];\n\n    const buttonSpecificProps = !asChild\n      ? { type: \"button\" as const, \"data-testid\": \"button\", disabled: isDisabled }\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}\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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"}

package/dist/components/Button/Button.mjs

@@ -16,6 +16,12 @@ const ICON_SIZE_CLASS = {
   "32": "size-4",
   "24": "size-3.5"
 };
+const ICON_WRAPPER_CLASS = {
+  "48": "[&>svg]:size-5",
+  "40": "[&>svg]:size-5",
+  "32": "[&>svg]:size-4",
+  "24": "[&>svg]:size-3.5"
+};
 const VARIANT_CLASSES = {
   primary: "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",
   secondary: "border-body-100 border border-1 border-body-100 bg-transparent text-body-100 hover:bg-brand-green-50 active:bg-brand-green-50",
@@ -106,8 +112,12 @@ const Button = React.forwardRef(
   }, ref) => {
     const Comp = asChild ? Slot : "button";
     const isDisabled = disabled || loading;
-    const iconSizeClass = ICON_SIZE_CLASS[size];
-    const buttonSpecificProps = !asChild ? { type: "button", "data-testid": "button", disabled: isDisabled } : isDisabled ? { "aria-disabled": true } : {};
+    const iconSizeClass = ICON_WRAPPER_CLASS[size];
+    const buttonSpecificProps = !asChild ? {
+      type: "button",
+      "data-testid": "button",
+      disabled: isDisabled
+    } : isDisabled ? { "aria-disabled": true } : {};
     const loadingLabelProps = loading && asChild ? { "aria-label": getTextContent(children) } : {};
     const content = renderContent({
       loading,

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\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_SIZE_CLASS[size];\n\n    const buttonSpecificProps = !asChild\n      ? { type: \"button\" as const, \"data-testid\": \"button\", disabled: isDisabled }\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":";;;;;;AAuCA,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;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,GAUG;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,IAGJ,YAAY,QACX,oBAAC,QAAA,EAAK,WAAU,0CAAyC,eAAY,QAClE,UAAA,SAAA,CACH;AAAA,IAED,SAAS,QAAQ,oBAAC,QAAA,EAAK,eAAY,QAAQ,UAAA,MAAA,CAAM;AAAA,EAAA,GACpD;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,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,OAAO,UAAU,OAAO;AAC9B,UAAM,aAAa,YAAY;AAC/B,UAAM,gBAAgB,gBAAgB,IAAI;AAE1C,UAAM,sBAAsB,CAAC,UACzB,EAAE,MAAM,UAAmB,eAAe,UAAU,UAAU,WAAA,IAC9D,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;AAAA,UAEA,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;"}
+{"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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"}

package/package.json

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