@fanvue/ui 1.5.0 → 1.6.0

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

@@ -148,7 +148,7 @@ const Button = React__namespace.forwardRef(
         ...loadingLabelProps,
         className: cn.cn(
           // Base styles
-          "inline-flex cursor-pointer items-center justify-center gap-2 rounded-full transition-colors",
+          "inline-flex cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-full transition-colors",
           // Focus ring
           "focus-visible:shadow-focus-ring focus-visible:outline-none",
           // Disabled state

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 \"48\" */\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 = \"48\",\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 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 \"48\" */\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 = \"48\",\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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"}

package/dist/cjs/components/Tooltip/Tooltip.cjs

@@ -5,6 +5,7 @@ const jsxRuntime = require("react/jsx-runtime");
 const TooltipPrimitive = require("@radix-ui/react-tooltip");
 const React = require("react");
 const cn = require("../../utils/cn.cjs");
+const Button = require("../Button/Button.cjs");
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
   if (e) {
@@ -26,22 +27,64 @@ const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
 const TooltipProvider = TooltipPrimitive__namespace.Provider;
 const Tooltip = TooltipPrimitive__namespace.Root;
 const TooltipTrigger = TooltipPrimitive__namespace.Trigger;
-const TooltipContent = React__namespace.forwardRef(({ className, showArrow = true, sideOffset = 8, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(TooltipPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsxs(
-  TooltipPrimitive__namespace.Content,
-  {
-    ref,
-    sideOffset,
-    className: cn.cn(
-      "typography-body-2-regular max-w-xs overflow-hidden rounded-3xl bg-background-solid p-4 text-background-inverse-solid shadow-[0_2px_4px_rgba(17,24,39,0.08)]",
-      className
-    ),
-    ...props,
-    children: [
-      children,
-      showArrow && /* @__PURE__ */ jsxRuntime.jsx(TooltipPrimitive__namespace.Arrow, { className: "fill-background-solid", width: 12, height: 6 })
-    ]
+const TooltipContent = React__namespace.forwardRef(
+  ({
+    className,
+    variant = "tooltip",
+    showArrow = true,
+    sideOffset = 8,
+    heading,
+    icon,
+    pill,
+    primaryAction,
+    secondaryAction,
+    children,
+    side,
+    ...props
+  }, ref) => {
+    const isInfobox = variant === "infobox";
+    const hasHeader = isInfobox && (icon !== void 0 || heading !== void 0 || pill !== void 0);
+    const hasActions = isInfobox && (primaryAction !== void 0 || secondaryAction !== void 0);
+    return /* @__PURE__ */ jsxRuntime.jsx(TooltipPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+      TooltipPrimitive__namespace.Content,
+      {
+        ref,
+        sideOffset,
+        className: cn.cn(
+          "typography-body-2-regular z-50 max-w-[320px] overflow-hidden rounded-3xl bg-background-solid p-4 text-background-inverse-solid shadow-[0px_2px_4px_0px_rgba(17,24,39,0.08)]",
+          isInfobox && "border border-neutral-200",
+          className
+        ),
+        align: "center",
+        arrowPadding: 12,
+        side,
+        ...props,
+        children: [
+          isInfobox ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-3", children: [
+            hasHeader && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
+              icon && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "size-5 shrink-0", children: icon }),
+              heading && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "typography-subtitle min-w-0 flex-1 text-background-inverse-solid", children: heading }),
+              pill && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0", children: pill })
+            ] }),
+            children && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "typography-body-2-regular text-background-inverse-solid", children }),
+            hasActions && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
+              primaryAction && (primaryAction.element ? primaryAction.element : /* @__PURE__ */ jsxRuntime.jsx(Button.Button, { variant: "brand", size: "32", onClick: primaryAction.onClick, children: primaryAction.label })),
+              secondaryAction && (secondaryAction.element ? secondaryAction.element : /* @__PURE__ */ jsxRuntime.jsx(Button.Button, { variant: "tertiary", size: "32", onClick: secondaryAction.onClick, children: secondaryAction.label }))
+            ] })
+          ] }) : children,
+          showArrow && /* @__PURE__ */ jsxRuntime.jsx(
+            TooltipPrimitive__namespace.Arrow,
+            {
+              className: "-translate-y-px! fill-background-solid stroke-2 stroke-background-solid",
+              width: 12,
+              height: 6
+            }
+          )
+        ]
+      }
+    ) });
   }
-) }));
+);
 TooltipContent.displayName = "TooltipContent";
 exports.Tooltip = Tooltip;
 exports.TooltipContent = TooltipContent;

package/dist/cjs/components/Tooltip/Tooltip.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.cjs","sources":["../../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["/**\n * @internal Temporary tooltip implementation — will be rebuilt once design is\n * finalised. See https://linear.app/fanvue/issue/ENG-7226\n */\nimport * as TooltipPrimitive from \"@radix-ui/react-tooltip\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\n/** Props for the {@link TooltipProvider}. Wraps Radix `Tooltip.Provider`. */\nexport type TooltipProviderProps = React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Provider>;\n\n/** Provides tooltip delay and skip-delay context. Wrap your app or a subtree. */\nexport const TooltipProvider = TooltipPrimitive.Provider;\n\n/** Props for the {@link Tooltip} root component. */\nexport type TooltipProps = React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Root>;\n\n/** Root component that manages open/close state for a single tooltip. */\nexport const Tooltip = TooltipPrimitive.Root;\n\n/** Props for the {@link TooltipTrigger} component. */\nexport type TooltipTriggerProps = React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Trigger>;\n\n/** The element that triggers the tooltip on hover/focus. */\nexport const TooltipTrigger = TooltipPrimitive.Trigger;\n\nexport interface TooltipContentProps\n  extends React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content> {\n  /** Whether to show the arrow pointer. @default true */\n  showArrow?: boolean;\n}\n\n/** The popup content of the tooltip. Renders inside a portal. */\nexport const TooltipContent = React.forwardRef<\n  React.ComponentRef<typeof TooltipPrimitive.Content>,\n  TooltipContentProps\n>(({ className, showArrow = true, sideOffset = 8, children, ...props }, ref) => (\n  <TooltipPrimitive.Portal>\n    <TooltipPrimitive.Content\n      ref={ref}\n      sideOffset={sideOffset}\n      className={cn(\n        \"typography-body-2-regular max-w-xs overflow-hidden rounded-3xl bg-background-solid p-4 text-background-inverse-solid shadow-[0_2px_4px_rgba(17,24,39,0.08)]\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      {showArrow && (\n        <TooltipPrimitive.Arrow className=\"fill-background-solid\" width={12} height={6} />\n      )}\n    </TooltipPrimitive.Content>\n  </TooltipPrimitive.Portal>\n));\n\nTooltipContent.displayName = \"TooltipContent\";\n"],"names":["TooltipPrimitive","React","jsx","jsxs","cn"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAYO,MAAM,kBAAkBA,4BAAiB;AAMzC,MAAM,UAAUA,4BAAiB;AAMjC,MAAM,iBAAiBA,4BAAiB;AASxC,MAAM,iBAAiBC,iBAAM,WAGlC,CAAC,EAAE,WAAW,YAAY,MAAM,aAAa,GAAG,UAAU,GAAG,MAAA,GAAS,QACtEC,2BAAAA,IAACF,4BAAiB,QAAjB,EACC,UAAAG,2BAAAA;AAAAA,EAACH,4BAAiB;AAAA,EAAjB;AAAA,IACC;AAAA,IACA;AAAA,IACA,WAAWI,GAAAA;AAAAA,MACT;AAAA,MACA;AAAA,IAAA;AAAA,IAED,GAAG;AAAA,IAEH,UAAA;AAAA,MAAA;AAAA,MACA,aACCF,2BAAAA,IAACF,4BAAiB,OAAjB,EAAuB,WAAU,yBAAwB,OAAO,IAAI,QAAQ,EAAA,CAAG;AAAA,IAAA;AAAA,EAAA;AAEpF,GACF,CACD;AAED,eAAe,cAAc;;;;;"}
+{"version":3,"file":"Tooltip.cjs","sources":["../../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import * as TooltipPrimitive from \"@radix-ui/react-tooltip\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { Button } from \"../Button/Button\";\n\n/** Props for the {@link TooltipProvider}. Wraps Radix `Tooltip.Provider`. */\nexport type TooltipProviderProps = React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Provider>;\n\n/** Provides tooltip delay and skip-delay context. Wrap your app or a subtree. */\nexport const TooltipProvider = TooltipPrimitive.Provider;\n\n/** Props for the {@link Tooltip} root component. */\nexport interface TooltipProps extends React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Root> {\n  /**\n   * Controlled open state. When provided, the component is in controlled mode\n   * and you must also supply `onOpenChange` to update the value.\n   */\n  open?: boolean;\n  /** Called when the open state changes. Required when `open` is controlled. */\n  onOpenChange?: (open: boolean) => void;\n  /** The open state of the tooltip when it is initially rendered (uncontrolled). */\n  defaultOpen?: boolean;\n}\n\n/** Root component that manages open/close state for a single tooltip. */\nexport const Tooltip = TooltipPrimitive.Root;\n\n/** Props for the {@link TooltipTrigger} component. */\nexport type TooltipTriggerProps = React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Trigger>;\n\n/** The element that triggers the tooltip on hover/focus. */\nexport const TooltipTrigger = TooltipPrimitive.Trigger;\n\n/**\n * Visual style variant of the tooltip content.\n *\n * - `\"tooltip\"` — simple text bubble, no border.\n * - `\"infobox\"` — richer card with a visible border, structured header, body text, and optional actions.\n */\nexport type TooltipContentVariant = \"tooltip\" | \"infobox\";\n\n/** Action button configuration for the infobox variant of {@link TooltipContent}. */\nexport interface TooltipAction {\n  /** Button label. */\n  label: string;\n  /** Click handler. */\n  onClick?: () => void;\n  /**\n   * Optional custom React node to be rendered for the action instead of the default button.\n   * Only used in the infobox variant.\n   */\n  element?: React.ReactNode;\n}\n\nexport interface TooltipContentProps\n  extends React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content> {\n  /**\n   * Visual style variant.\n   *\n   * `\"tooltip\"` is a lightweight text bubble. `\"infobox\"` renders a structured card\n   * with optional heading, icon, pill, body text, and action buttons.\n   *\n   * @default \"tooltip\"\n   */\n  variant?: TooltipContentVariant;\n  /** Whether to show the directional arrow pointer. @default true */\n  showArrow?: boolean;\n  /**\n   * Heading text rendered in subtitle style at the top of the infobox.\n   * Infobox variant only.\n   */\n  heading?: React.ReactNode;\n  /**\n   * Icon element displayed to the left of the heading.\n   * Infobox variant only.\n   */\n  icon?: React.ReactNode;\n  /**\n   * Pill or badge element displayed to the right of the heading.\n   * Infobox variant only.\n   */\n  pill?: React.ReactNode;\n  /**\n   * Primary action button (brand green). Rendered below the body text.\n   * Infobox variant only.\n   */\n  primaryAction?: TooltipAction;\n  /**\n   * Secondary action button (ghost). Rendered next to the primary action.\n   * Infobox variant only.\n   */\n  secondaryAction?: TooltipAction;\n}\n\n/**\n * The popup content of the tooltip. Renders inside a portal.\n *\n * Arrow direction is controlled via the `side` and `align` props (Radix passthrough).\n *\n * @example\n * ```tsx\n * // Simple tooltip\n * <TooltipContent>Info text</TooltipContent>\n *\n * // Infobox with structured content\n * <TooltipContent\n *   variant=\"infobox\"\n *   heading=\"Title\"\n *   icon={<InfoCircleIcon className=\"size-5\" />}\n *   primaryAction={{ label: \"OK\", onClick: () => {} }}\n *   secondaryAction={{ label: \"Dismiss\" }}\n * >\n *   Info text\n * </TooltipContent>\n * ```\n */\nexport const TooltipContent = React.forwardRef<\n  React.ComponentRef<typeof TooltipPrimitive.Content>,\n  TooltipContentProps\n>(\n  (\n    {\n      className,\n      variant = \"tooltip\",\n      showArrow = true,\n      sideOffset = 8,\n      heading,\n      icon,\n      pill,\n      primaryAction,\n      secondaryAction,\n      children,\n      side,\n      ...props\n    },\n    ref,\n  ) => {\n    const isInfobox = variant === \"infobox\";\n    const hasHeader =\n      isInfobox && (icon !== undefined || heading !== undefined || pill !== undefined);\n    const hasActions = isInfobox && (primaryAction !== undefined || secondaryAction !== undefined);\n\n    return (\n      <TooltipPrimitive.Portal>\n        <TooltipPrimitive.Content\n          ref={ref}\n          sideOffset={sideOffset}\n          className={cn(\n            \"typography-body-2-regular z-50 max-w-[320px] overflow-hidden rounded-3xl bg-background-solid p-4 text-background-inverse-solid shadow-[0px_2px_4px_0px_rgba(17,24,39,0.08)]\",\n            isInfobox && \"border border-neutral-200\",\n            className,\n          )}\n          align=\"center\"\n          arrowPadding={12}\n          side={side}\n          {...props}\n        >\n          {isInfobox ? (\n            <div className=\"flex flex-col gap-3\">\n              {hasHeader && (\n                <div className=\"flex items-center gap-3\">\n                  {icon && <div className=\"size-5 shrink-0\">{icon}</div>}\n                  {heading && (\n                    <p className=\"typography-subtitle min-w-0 flex-1 text-background-inverse-solid\">\n                      {heading}\n                    </p>\n                  )}\n                  {pill && <div className=\"shrink-0\">{pill}</div>}\n                </div>\n              )}\n              {children && (\n                <div className=\"typography-body-2-regular text-background-inverse-solid\">\n                  {children}\n                </div>\n              )}\n              {hasActions && (\n                <div className=\"flex items-center gap-1\">\n                  {primaryAction &&\n                    (primaryAction.element ? (\n                      primaryAction.element\n                    ) : (\n                      <Button variant=\"brand\" size=\"32\" onClick={primaryAction.onClick}>\n                        {primaryAction.label}\n                      </Button>\n                    ))}\n                  {secondaryAction &&\n                    (secondaryAction.element ? (\n                      secondaryAction.element\n                    ) : (\n                      <Button variant=\"tertiary\" size=\"32\" onClick={secondaryAction.onClick}>\n                        {secondaryAction.label}\n                      </Button>\n                    ))}\n                </div>\n              )}\n            </div>\n          ) : (\n            children\n          )}\n          {showArrow && (\n            <TooltipPrimitive.Arrow\n              className={\"-translate-y-px! fill-background-solid stroke-2 stroke-background-solid\"}\n              width={12}\n              height={6}\n            />\n          )}\n        </TooltipPrimitive.Content>\n      </TooltipPrimitive.Portal>\n    );\n  },\n);\nTooltipContent.displayName = \"TooltipContent\";\n"],"names":["TooltipPrimitive","React","jsx","jsxs","cn","Button"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AASO,MAAM,kBAAkBA,4BAAiB;AAgBzC,MAAM,UAAUA,4BAAiB;AAMjC,MAAM,iBAAiBA,4BAAiB;AAqFxC,MAAM,iBAAiBC,iBAAM;AAAA,EAIlC,CACE;AAAA,IACE;AAAA,IACA,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,aAAa;AAAA,IACb;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,YAAY,YAAY;AAC9B,UAAM,YACJ,cAAc,SAAS,UAAa,YAAY,UAAa,SAAS;AACxE,UAAM,aAAa,cAAc,kBAAkB,UAAa,oBAAoB;AAEpF,WACEC,2BAAAA,IAACF,4BAAiB,QAAjB,EACC,UAAAG,2BAAAA;AAAAA,MAACH,4BAAiB;AAAA,MAAjB;AAAA,QACC;AAAA,QACA;AAAA,QACA,WAAWI,GAAAA;AAAAA,UACT;AAAA,UACA,aAAa;AAAA,UACb;AAAA,QAAA;AAAA,QAEF,OAAM;AAAA,QACN,cAAc;AAAA,QACd;AAAA,QACC,GAAG;AAAA,QAEH,UAAA;AAAA,UAAA,YACCD,2BAAAA,KAAC,OAAA,EAAI,WAAU,uBACZ,UAAA;AAAA,YAAA,aACCA,2BAAAA,KAAC,OAAA,EAAI,WAAU,2BACZ,UAAA;AAAA,cAAA,QAAQD,2BAAAA,IAAC,OAAA,EAAI,WAAU,mBAAmB,UAAA,MAAK;AAAA,cAC/C,WACCA,2BAAAA,IAAC,KAAA,EAAE,WAAU,oEACV,UAAA,SACH;AAAA,cAED,QAAQA,2BAAAA,IAAC,OAAA,EAAI,WAAU,YAAY,UAAA,KAAA,CAAK;AAAA,YAAA,GAC3C;AAAA,YAED,YACCA,2BAAAA,IAAC,OAAA,EAAI,WAAU,2DACZ,UACH;AAAA,YAED,cACCC,2BAAAA,KAAC,OAAA,EAAI,WAAU,2BACZ,UAAA;AAAA,cAAA,kBACE,cAAc,UACb,cAAc,yCAEbE,OAAAA,QAAA,EAAO,SAAQ,SAAQ,MAAK,MAAK,SAAS,cAAc,SACtD,wBAAc,MAAA,CACjB;AAAA,cAEH,oBACE,gBAAgB,UACf,gBAAgB,UAEhBH,2BAAAA,IAACG,OAAAA,QAAA,EAAO,SAAQ,YAAW,MAAK,MAAK,SAAS,gBAAgB,SAC3D,0BAAgB,OACnB;AAAA,YAAA,EAAA,CAEN;AAAA,UAAA,EAAA,CAEJ,IAEA;AAAA,UAED,aACCH,2BAAAA;AAAAA,YAACF,4BAAiB;AAAA,YAAjB;AAAA,cACC,WAAW;AAAA,cACX,OAAO;AAAA,cACP,QAAQ;AAAA,YAAA;AAAA,UAAA;AAAA,QACV;AAAA,MAAA;AAAA,IAAA,GAGN;AAAA,EAEJ;AACF;AACA,eAAe,cAAc;;;;;"}

package/dist/components/Button/Button.mjs

@@ -129,7 +129,7 @@ const Button = React.forwardRef(
         ...loadingLabelProps,
         className: cn(
           // Base styles
-          "inline-flex cursor-pointer items-center justify-center gap-2 rounded-full transition-colors",
+          "inline-flex cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-full transition-colors",
           // Focus ring
           "focus-visible:shadow-focus-ring focus-visible:outline-none",
           // Disabled state

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 \"48\" */\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 = \"48\",\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 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 \"48\" */\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 = \"48\",\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":"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"}

package/dist/components/Tooltip/Tooltip.mjs

@@ -3,25 +3,68 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 import * as React from "react";
 import { cn } from "../../utils/cn.mjs";
+import { Button } from "../Button/Button.mjs";
 const TooltipProvider = TooltipPrimitive.Provider;
 const Tooltip = TooltipPrimitive.Root;
 const TooltipTrigger = TooltipPrimitive.Trigger;
-const TooltipContent = React.forwardRef(({ className, showArrow = true, sideOffset = 8, children, ...props }, ref) => /* @__PURE__ */ jsx(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
-  TooltipPrimitive.Content,
-  {
-    ref,
-    sideOffset,
-    className: cn(
-      "typography-body-2-regular max-w-xs overflow-hidden rounded-3xl bg-background-solid p-4 text-background-inverse-solid shadow-[0_2px_4px_rgba(17,24,39,0.08)]",
-      className
-    ),
-    ...props,
-    children: [
-      children,
-      showArrow && /* @__PURE__ */ jsx(TooltipPrimitive.Arrow, { className: "fill-background-solid", width: 12, height: 6 })
-    ]
+const TooltipContent = React.forwardRef(
+  ({
+    className,
+    variant = "tooltip",
+    showArrow = true,
+    sideOffset = 8,
+    heading,
+    icon,
+    pill,
+    primaryAction,
+    secondaryAction,
+    children,
+    side,
+    ...props
+  }, ref) => {
+    const isInfobox = variant === "infobox";
+    const hasHeader = isInfobox && (icon !== void 0 || heading !== void 0 || pill !== void 0);
+    const hasActions = isInfobox && (primaryAction !== void 0 || secondaryAction !== void 0);
+    return /* @__PURE__ */ jsx(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
+      TooltipPrimitive.Content,
+      {
+        ref,
+        sideOffset,
+        className: cn(
+          "typography-body-2-regular z-50 max-w-[320px] overflow-hidden rounded-3xl bg-background-solid p-4 text-background-inverse-solid shadow-[0px_2px_4px_0px_rgba(17,24,39,0.08)]",
+          isInfobox && "border border-neutral-200",
+          className
+        ),
+        align: "center",
+        arrowPadding: 12,
+        side,
+        ...props,
+        children: [
+          isInfobox ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", children: [
+            hasHeader && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+              icon && /* @__PURE__ */ jsx("div", { className: "size-5 shrink-0", children: icon }),
+              heading && /* @__PURE__ */ jsx("p", { className: "typography-subtitle min-w-0 flex-1 text-background-inverse-solid", children: heading }),
+              pill && /* @__PURE__ */ jsx("div", { className: "shrink-0", children: pill })
+            ] }),
+            children && /* @__PURE__ */ jsx("div", { className: "typography-body-2-regular text-background-inverse-solid", children }),
+            hasActions && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+              primaryAction && (primaryAction.element ? primaryAction.element : /* @__PURE__ */ jsx(Button, { variant: "brand", size: "32", onClick: primaryAction.onClick, children: primaryAction.label })),
+              secondaryAction && (secondaryAction.element ? secondaryAction.element : /* @__PURE__ */ jsx(Button, { variant: "tertiary", size: "32", onClick: secondaryAction.onClick, children: secondaryAction.label }))
+            ] })
+          ] }) : children,
+          showArrow && /* @__PURE__ */ jsx(
+            TooltipPrimitive.Arrow,
+            {
+              className: "-translate-y-px! fill-background-solid stroke-2 stroke-background-solid",
+              width: 12,
+              height: 6
+            }
+          )
+        ]
+      }
+    ) });
   }
-) }));
+);
 TooltipContent.displayName = "TooltipContent";
 export {
   Tooltip,

package/dist/components/Tooltip/Tooltip.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.mjs","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["/**\n * @internal Temporary tooltip implementation — will be rebuilt once design is\n * finalised. See https://linear.app/fanvue/issue/ENG-7226\n */\nimport * as TooltipPrimitive from \"@radix-ui/react-tooltip\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\n/** Props for the {@link TooltipProvider}. Wraps Radix `Tooltip.Provider`. */\nexport type TooltipProviderProps = React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Provider>;\n\n/** Provides tooltip delay and skip-delay context. Wrap your app or a subtree. */\nexport const TooltipProvider = TooltipPrimitive.Provider;\n\n/** Props for the {@link Tooltip} root component. */\nexport type TooltipProps = React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Root>;\n\n/** Root component that manages open/close state for a single tooltip. */\nexport const Tooltip = TooltipPrimitive.Root;\n\n/** Props for the {@link TooltipTrigger} component. */\nexport type TooltipTriggerProps = React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Trigger>;\n\n/** The element that triggers the tooltip on hover/focus. */\nexport const TooltipTrigger = TooltipPrimitive.Trigger;\n\nexport interface TooltipContentProps\n  extends React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content> {\n  /** Whether to show the arrow pointer. @default true */\n  showArrow?: boolean;\n}\n\n/** The popup content of the tooltip. Renders inside a portal. */\nexport const TooltipContent = React.forwardRef<\n  React.ComponentRef<typeof TooltipPrimitive.Content>,\n  TooltipContentProps\n>(({ className, showArrow = true, sideOffset = 8, children, ...props }, ref) => (\n  <TooltipPrimitive.Portal>\n    <TooltipPrimitive.Content\n      ref={ref}\n      sideOffset={sideOffset}\n      className={cn(\n        \"typography-body-2-regular max-w-xs overflow-hidden rounded-3xl bg-background-solid p-4 text-background-inverse-solid shadow-[0_2px_4px_rgba(17,24,39,0.08)]\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      {showArrow && (\n        <TooltipPrimitive.Arrow className=\"fill-background-solid\" width={12} height={6} />\n      )}\n    </TooltipPrimitive.Content>\n  </TooltipPrimitive.Portal>\n));\n\nTooltipContent.displayName = \"TooltipContent\";\n"],"names":[],"mappings":";;;;;AAYO,MAAM,kBAAkB,iBAAiB;AAMzC,MAAM,UAAU,iBAAiB;AAMjC,MAAM,iBAAiB,iBAAiB;AASxC,MAAM,iBAAiB,MAAM,WAGlC,CAAC,EAAE,WAAW,YAAY,MAAM,aAAa,GAAG,UAAU,GAAG,MAAA,GAAS,QACtE,oBAAC,iBAAiB,QAAjB,EACC,UAAA;AAAA,EAAC,iBAAiB;AAAA,EAAjB;AAAA,IACC;AAAA,IACA;AAAA,IACA,WAAW;AAAA,MACT;AAAA,MACA;AAAA,IAAA;AAAA,IAED,GAAG;AAAA,IAEH,UAAA;AAAA,MAAA;AAAA,MACA,aACC,oBAAC,iBAAiB,OAAjB,EAAuB,WAAU,yBAAwB,OAAO,IAAI,QAAQ,EAAA,CAAG;AAAA,IAAA;AAAA,EAAA;AAEpF,GACF,CACD;AAED,eAAe,cAAc;"}
+{"version":3,"file":"Tooltip.mjs","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import * as TooltipPrimitive from \"@radix-ui/react-tooltip\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { Button } from \"../Button/Button\";\n\n/** Props for the {@link TooltipProvider}. Wraps Radix `Tooltip.Provider`. */\nexport type TooltipProviderProps = React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Provider>;\n\n/** Provides tooltip delay and skip-delay context. Wrap your app or a subtree. */\nexport const TooltipProvider = TooltipPrimitive.Provider;\n\n/** Props for the {@link Tooltip} root component. */\nexport interface TooltipProps extends React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Root> {\n  /**\n   * Controlled open state. When provided, the component is in controlled mode\n   * and you must also supply `onOpenChange` to update the value.\n   */\n  open?: boolean;\n  /** Called when the open state changes. Required when `open` is controlled. */\n  onOpenChange?: (open: boolean) => void;\n  /** The open state of the tooltip when it is initially rendered (uncontrolled). */\n  defaultOpen?: boolean;\n}\n\n/** Root component that manages open/close state for a single tooltip. */\nexport const Tooltip = TooltipPrimitive.Root;\n\n/** Props for the {@link TooltipTrigger} component. */\nexport type TooltipTriggerProps = React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Trigger>;\n\n/** The element that triggers the tooltip on hover/focus. */\nexport const TooltipTrigger = TooltipPrimitive.Trigger;\n\n/**\n * Visual style variant of the tooltip content.\n *\n * - `\"tooltip\"` — simple text bubble, no border.\n * - `\"infobox\"` — richer card with a visible border, structured header, body text, and optional actions.\n */\nexport type TooltipContentVariant = \"tooltip\" | \"infobox\";\n\n/** Action button configuration for the infobox variant of {@link TooltipContent}. */\nexport interface TooltipAction {\n  /** Button label. */\n  label: string;\n  /** Click handler. */\n  onClick?: () => void;\n  /**\n   * Optional custom React node to be rendered for the action instead of the default button.\n   * Only used in the infobox variant.\n   */\n  element?: React.ReactNode;\n}\n\nexport interface TooltipContentProps\n  extends React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content> {\n  /**\n   * Visual style variant.\n   *\n   * `\"tooltip\"` is a lightweight text bubble. `\"infobox\"` renders a structured card\n   * with optional heading, icon, pill, body text, and action buttons.\n   *\n   * @default \"tooltip\"\n   */\n  variant?: TooltipContentVariant;\n  /** Whether to show the directional arrow pointer. @default true */\n  showArrow?: boolean;\n  /**\n   * Heading text rendered in subtitle style at the top of the infobox.\n   * Infobox variant only.\n   */\n  heading?: React.ReactNode;\n  /**\n   * Icon element displayed to the left of the heading.\n   * Infobox variant only.\n   */\n  icon?: React.ReactNode;\n  /**\n   * Pill or badge element displayed to the right of the heading.\n   * Infobox variant only.\n   */\n  pill?: React.ReactNode;\n  /**\n   * Primary action button (brand green). Rendered below the body text.\n   * Infobox variant only.\n   */\n  primaryAction?: TooltipAction;\n  /**\n   * Secondary action button (ghost). Rendered next to the primary action.\n   * Infobox variant only.\n   */\n  secondaryAction?: TooltipAction;\n}\n\n/**\n * The popup content of the tooltip. Renders inside a portal.\n *\n * Arrow direction is controlled via the `side` and `align` props (Radix passthrough).\n *\n * @example\n * ```tsx\n * // Simple tooltip\n * <TooltipContent>Info text</TooltipContent>\n *\n * // Infobox with structured content\n * <TooltipContent\n *   variant=\"infobox\"\n *   heading=\"Title\"\n *   icon={<InfoCircleIcon className=\"size-5\" />}\n *   primaryAction={{ label: \"OK\", onClick: () => {} }}\n *   secondaryAction={{ label: \"Dismiss\" }}\n * >\n *   Info text\n * </TooltipContent>\n * ```\n */\nexport const TooltipContent = React.forwardRef<\n  React.ComponentRef<typeof TooltipPrimitive.Content>,\n  TooltipContentProps\n>(\n  (\n    {\n      className,\n      variant = \"tooltip\",\n      showArrow = true,\n      sideOffset = 8,\n      heading,\n      icon,\n      pill,\n      primaryAction,\n      secondaryAction,\n      children,\n      side,\n      ...props\n    },\n    ref,\n  ) => {\n    const isInfobox = variant === \"infobox\";\n    const hasHeader =\n      isInfobox && (icon !== undefined || heading !== undefined || pill !== undefined);\n    const hasActions = isInfobox && (primaryAction !== undefined || secondaryAction !== undefined);\n\n    return (\n      <TooltipPrimitive.Portal>\n        <TooltipPrimitive.Content\n          ref={ref}\n          sideOffset={sideOffset}\n          className={cn(\n            \"typography-body-2-regular z-50 max-w-[320px] overflow-hidden rounded-3xl bg-background-solid p-4 text-background-inverse-solid shadow-[0px_2px_4px_0px_rgba(17,24,39,0.08)]\",\n            isInfobox && \"border border-neutral-200\",\n            className,\n          )}\n          align=\"center\"\n          arrowPadding={12}\n          side={side}\n          {...props}\n        >\n          {isInfobox ? (\n            <div className=\"flex flex-col gap-3\">\n              {hasHeader && (\n                <div className=\"flex items-center gap-3\">\n                  {icon && <div className=\"size-5 shrink-0\">{icon}</div>}\n                  {heading && (\n                    <p className=\"typography-subtitle min-w-0 flex-1 text-background-inverse-solid\">\n                      {heading}\n                    </p>\n                  )}\n                  {pill && <div className=\"shrink-0\">{pill}</div>}\n                </div>\n              )}\n              {children && (\n                <div className=\"typography-body-2-regular text-background-inverse-solid\">\n                  {children}\n                </div>\n              )}\n              {hasActions && (\n                <div className=\"flex items-center gap-1\">\n                  {primaryAction &&\n                    (primaryAction.element ? (\n                      primaryAction.element\n                    ) : (\n                      <Button variant=\"brand\" size=\"32\" onClick={primaryAction.onClick}>\n                        {primaryAction.label}\n                      </Button>\n                    ))}\n                  {secondaryAction &&\n                    (secondaryAction.element ? (\n                      secondaryAction.element\n                    ) : (\n                      <Button variant=\"tertiary\" size=\"32\" onClick={secondaryAction.onClick}>\n                        {secondaryAction.label}\n                      </Button>\n                    ))}\n                </div>\n              )}\n            </div>\n          ) : (\n            children\n          )}\n          {showArrow && (\n            <TooltipPrimitive.Arrow\n              className={\"-translate-y-px! fill-background-solid stroke-2 stroke-background-solid\"}\n              width={12}\n              height={6}\n            />\n          )}\n        </TooltipPrimitive.Content>\n      </TooltipPrimitive.Portal>\n    );\n  },\n);\nTooltipContent.displayName = \"TooltipContent\";\n"],"names":[],"mappings":";;;;;;AASO,MAAM,kBAAkB,iBAAiB;AAgBzC,MAAM,UAAU,iBAAiB;AAMjC,MAAM,iBAAiB,iBAAiB;AAqFxC,MAAM,iBAAiB,MAAM;AAAA,EAIlC,CACE;AAAA,IACE;AAAA,IACA,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,aAAa;AAAA,IACb;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,YAAY,YAAY;AAC9B,UAAM,YACJ,cAAc,SAAS,UAAa,YAAY,UAAa,SAAS;AACxE,UAAM,aAAa,cAAc,kBAAkB,UAAa,oBAAoB;AAEpF,WACE,oBAAC,iBAAiB,QAAjB,EACC,UAAA;AAAA,MAAC,iBAAiB;AAAA,MAAjB;AAAA,QACC;AAAA,QACA;AAAA,QACA,WAAW;AAAA,UACT;AAAA,UACA,aAAa;AAAA,UACb;AAAA,QAAA;AAAA,QAEF,OAAM;AAAA,QACN,cAAc;AAAA,QACd;AAAA,QACC,GAAG;AAAA,QAEH,UAAA;AAAA,UAAA,YACC,qBAAC,OAAA,EAAI,WAAU,uBACZ,UAAA;AAAA,YAAA,aACC,qBAAC,OAAA,EAAI,WAAU,2BACZ,UAAA;AAAA,cAAA,QAAQ,oBAAC,OAAA,EAAI,WAAU,mBAAmB,UAAA,MAAK;AAAA,cAC/C,WACC,oBAAC,KAAA,EAAE,WAAU,oEACV,UAAA,SACH;AAAA,cAED,QAAQ,oBAAC,OAAA,EAAI,WAAU,YAAY,UAAA,KAAA,CAAK;AAAA,YAAA,GAC3C;AAAA,YAED,YACC,oBAAC,OAAA,EAAI,WAAU,2DACZ,UACH;AAAA,YAED,cACC,qBAAC,OAAA,EAAI,WAAU,2BACZ,UAAA;AAAA,cAAA,kBACE,cAAc,UACb,cAAc,8BAEb,QAAA,EAAO,SAAQ,SAAQ,MAAK,MAAK,SAAS,cAAc,SACtD,wBAAc,MAAA,CACjB;AAAA,cAEH,oBACE,gBAAgB,UACf,gBAAgB,UAEhB,oBAAC,QAAA,EAAO,SAAQ,YAAW,MAAK,MAAK,SAAS,gBAAgB,SAC3D,0BAAgB,OACnB;AAAA,YAAA,EAAA,CAEN;AAAA,UAAA,EAAA,CAEJ,IAEA;AAAA,UAED,aACC;AAAA,YAAC,iBAAiB;AAAA,YAAjB;AAAA,cACC,WAAW;AAAA,cACX,OAAO;AAAA,cACP,QAAQ;AAAA,YAAA;AAAA,UAAA;AAAA,QACV;AAAA,MAAA;AAAA,IAAA,GAGN;AAAA,EAEJ;AACF;AACA,eAAe,cAAc;"}

package/dist/index.d.ts

@@ -1242,16 +1242,102 @@ export declare interface ToastViewportProps extends React_2.ComponentPropsWithou
 /** Root component that manages open/close state for a single tooltip. */
 export declare const Tooltip: React_2.FC<TooltipPrimitive.TooltipProps>;
 
-/** The popup content of the tooltip. Renders inside a portal. */
+/** Action button configuration for the infobox variant of {@link TooltipContent}. */
+export declare interface TooltipAction {
+    /** Button label. */
+    label: string;
+    /** Click handler. */
+    onClick?: () => void;
+    /**
+     * Optional custom React node to be rendered for the action instead of the default button.
+     * Only used in the infobox variant.
+     */
+    element?: React_2.ReactNode;
+}
+
+/**
+ * The popup content of the tooltip. Renders inside a portal.
+ *
+ * Arrow direction is controlled via the `side` and `align` props (Radix passthrough).
+ *
+ * @example
+ * ```tsx
+ * // Simple tooltip
+ * <TooltipContent>Info text</TooltipContent>
+ *
+ * // Infobox with structured content
+ * <TooltipContent
+ *   variant="infobox"
+ *   heading="Title"
+ *   icon={<InfoCircleIcon className="size-5" />}
+ *   primaryAction={{ label: "OK", onClick: () => {} }}
+ *   secondaryAction={{ label: "Dismiss" }}
+ * >
+ *   Info text
+ * </TooltipContent>
+ * ```
+ */
 export declare const TooltipContent: React_2.ForwardRefExoticComponent<TooltipContentProps & React_2.RefAttributes<HTMLDivElement>>;
 
 export declare interface TooltipContentProps extends React_2.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content> {
-    /** Whether to show the arrow pointer. @default true */
+    /**
+     * Visual style variant.
+     *
+     * `"tooltip"` is a lightweight text bubble. `"infobox"` renders a structured card
+     * with optional heading, icon, pill, body text, and action buttons.
+     *
+     * @default "tooltip"
+     */
+    variant?: TooltipContentVariant;
+    /** Whether to show the directional arrow pointer. @default true */
     showArrow?: boolean;
+    /**
+     * Heading text rendered in subtitle style at the top of the infobox.
+     * Infobox variant only.
+     */
+    heading?: React_2.ReactNode;
+    /**
+     * Icon element displayed to the left of the heading.
+     * Infobox variant only.
+     */
+    icon?: React_2.ReactNode;
+    /**
+     * Pill or badge element displayed to the right of the heading.
+     * Infobox variant only.
+     */
+    pill?: React_2.ReactNode;
+    /**
+     * Primary action button (brand green). Rendered below the body text.
+     * Infobox variant only.
+     */
+    primaryAction?: TooltipAction;
+    /**
+     * Secondary action button (ghost). Rendered next to the primary action.
+     * Infobox variant only.
+     */
+    secondaryAction?: TooltipAction;
 }
 
+/**
+ * Visual style variant of the tooltip content.
+ *
+ * - `"tooltip"` — simple text bubble, no border.
+ * - `"infobox"` — richer card with a visible border, structured header, body text, and optional actions.
+ */
+export declare type TooltipContentVariant = "tooltip" | "infobox";
+
 /** Props for the {@link Tooltip} root component. */
-export declare type TooltipProps = React_2.ComponentPropsWithoutRef<typeof TooltipPrimitive.Root>;
+export declare interface TooltipProps extends React_2.ComponentPropsWithoutRef<typeof TooltipPrimitive.Root> {
+    /**
+     * Controlled open state. When provided, the component is in controlled mode
+     * and you must also supply `onOpenChange` to update the value.
+     */
+    open?: boolean;
+    /** Called when the open state changes. Required when `open` is controlled. */
+    onOpenChange?: (open: boolean) => void;
+    /** The open state of the tooltip when it is initially rendered (uncontrolled). */
+    defaultOpen?: boolean;
+}
 
 /** Provides tooltip delay and skip-delay context. Wrap your app or a subtree. */
 export declare const TooltipProvider: React_2.FC<TooltipPrimitive.TooltipProviderProps>;

package/package.json

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