@fanvue/ui 1.7.0 → 1.8.0

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/cjs/components/Tabs/TabsList.cjs

@@ -23,20 +23,81 @@ function _interopNamespaceDefault(e) {
 }
 const TabsPrimitive__namespace = /* @__PURE__ */ _interopNamespaceDefault(TabsPrimitive);
 const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
-const TabsList = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
-  TabsPrimitive__namespace.List,
-  {
-    ref,
-    className: cn.cn(
-      "inline-flex",
-      // !TODO setup shadows tokens https://linear.app/fanvue/issue/ENG-7368/setup-shadow-tokens
-      "data-[orientation=horizontal]:items-center data-[orientation=horizontal]:shadow-[inset_0_-1px_0_0_var(--color-neutral-200)]",
-      "data-[orientation=vertical]:flex-col data-[orientation=vertical]:shadow-[inset_-1px_0_0_0_var(--color-neutral-200)]",
-      className
-    ),
-    ...props
-  }
-));
+const TabsList = React__namespace.forwardRef(({ className, children, ...props }, ref) => {
+  const innerRef = React__namespace.useRef(null);
+  const indicatorRef = React__namespace.useRef(null);
+  React__namespace.useImperativeHandle(ref, () => innerRef.current);
+  const updateIndicator = React__namespace.useCallback(() => {
+    const list = innerRef.current;
+    const indicator = indicatorRef.current;
+    if (!list || !indicator) return;
+    const activeTab = list.querySelector('[data-state="active"]');
+    if (!activeTab) {
+      indicator.style.opacity = "0";
+      return;
+    }
+    const isVertical = list.dataset.orientation === "vertical";
+    indicator.style.opacity = "1";
+    if (isVertical) {
+      indicator.style.inset = `0 0 auto auto`;
+      indicator.style.width = "4px";
+      indicator.style.height = `${activeTab.offsetHeight}px`;
+      indicator.style.transform = `translateY(${activeTab.offsetTop}px)`;
+    } else {
+      indicator.style.inset = `auto auto 0 0`;
+      indicator.style.height = "4px";
+      indicator.style.width = `${activeTab.offsetWidth}px`;
+      indicator.style.transform = `translateX(${activeTab.offsetLeft}px)`;
+    }
+  }, []);
+  React__namespace.useLayoutEffect(() => {
+    const list = innerRef.current;
+    const indicator = indicatorRef.current;
+    if (!list || !indicator) return;
+    indicator.style.transitionDuration = "0s";
+    updateIndicator();
+    indicator.getBoundingClientRect();
+    indicator.style.transitionDuration = "";
+    const mutationObserver = new MutationObserver(updateIndicator);
+    mutationObserver.observe(list, {
+      attributes: true,
+      attributeFilter: ["data-state"],
+      childList: true,
+      subtree: true
+    });
+    const resizeObserver = new ResizeObserver(updateIndicator);
+    resizeObserver.observe(list);
+    return () => {
+      mutationObserver.disconnect();
+      resizeObserver.disconnect();
+    };
+  }, [updateIndicator]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    TabsPrimitive__namespace.List,
+    {
+      ref: innerRef,
+      className: cn.cn(
+        "relative inline-flex",
+        "data-[orientation=horizontal]:items-center data-[orientation=horizontal]:shadow-[inset_0_-1px_0_0_var(--color-neutral-200)]",
+        "data-[orientation=vertical]:flex-col data-[orientation=vertical]:shadow-[inset_-1px_0_0_0_var(--color-neutral-200)]",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            ref: indicatorRef,
+            "aria-hidden": true,
+            className: "pointer-events-none absolute rounded-full bg-brand-green-500 motion-safe:transition-[transform,width,height] motion-safe:duration-200 motion-safe:ease-in-out",
+            style: { opacity: 0 }
+          }
+        )
+      ]
+    }
+  );
+});
 TabsList.displayName = "TabsList";
 exports.TabsList = TabsList;
 //# sourceMappingURL=TabsList.cjs.map

package/dist/cjs/components/Tabs/TabsList.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TabsList.cjs","sources":["../../../../src/components/Tabs/TabsList.tsx"],"sourcesContent":["import * as TabsPrimitive from \"@radix-ui/react-tabs\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\n/** Props for the {@link TabsList} component. */\nexport type TabsListProps = React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>;\n\n/** Container for {@link TabsTrigger} elements. Supports both horizontal and vertical orientations. */\nexport const TabsList = React.forwardRef<\n  React.ComponentRef<typeof TabsPrimitive.List>,\n  TabsListProps\n>(({ className, ...props }, ref) => (\n  <TabsPrimitive.List\n    ref={ref}\n    className={cn(\n      \"inline-flex\", // !TODO setup shadows tokens https://linear.app/fanvue/issue/ENG-7368/setup-shadow-tokens\n      \"data-[orientation=horizontal]:items-center data-[orientation=horizontal]:shadow-[inset_0_-1px_0_0_var(--color-neutral-200)]\",\n      \"data-[orientation=vertical]:flex-col data-[orientation=vertical]:shadow-[inset_-1px_0_0_0_var(--color-neutral-200)]\",\n      className,\n    )}\n    {...props}\n  />\n));\n\nTabsList.displayName = \"TabsList\";\n"],"names":["React","jsx","TabsPrimitive","cn"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAQO,MAAM,WAAWA,iBAAM,WAG5B,CAAC,EAAE,WAAW,GAAG,MAAA,GAAS,QAC1BC,2BAAAA;AAAAA,EAACC,yBAAc;AAAA,EAAd;AAAA,IACC;AAAA,IACA,WAAWC,GAAAA;AAAAA,MACT;AAAA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,IAED,GAAG;AAAA,EAAA;AACN,CACD;AAED,SAAS,cAAc;;"}
+{"version":3,"file":"TabsList.cjs","sources":["../../../../src/components/Tabs/TabsList.tsx"],"sourcesContent":["import * as TabsPrimitive from \"@radix-ui/react-tabs\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\n/** Props for the {@link TabsList} component. */\nexport type TabsListProps = React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>;\n\n/** Container for {@link TabsTrigger} elements. Renders a sliding active-tab indicator that animates between tabs. */\nexport const TabsList = React.forwardRef<\n  React.ComponentRef<typeof TabsPrimitive.List>,\n  TabsListProps\n>(({ className, children, ...props }, ref) => {\n  const innerRef = React.useRef<HTMLDivElement>(null);\n  const indicatorRef = React.useRef<HTMLSpanElement>(null);\n\n  React.useImperativeHandle(ref, () => innerRef.current as HTMLDivElement);\n\n  const updateIndicator = React.useCallback(() => {\n    const list = innerRef.current;\n    const indicator = indicatorRef.current;\n    if (!list || !indicator) return;\n\n    const activeTab = list.querySelector<HTMLElement>('[data-state=\"active\"]');\n    if (!activeTab) {\n      indicator.style.opacity = \"0\";\n      return;\n    }\n\n    const isVertical = list.dataset.orientation === \"vertical\";\n\n    indicator.style.opacity = \"1\";\n\n    if (isVertical) {\n      indicator.style.inset = `0 0 auto auto`;\n      indicator.style.width = \"4px\";\n      indicator.style.height = `${activeTab.offsetHeight}px`;\n      indicator.style.transform = `translateY(${activeTab.offsetTop}px)`;\n    } else {\n      indicator.style.inset = `auto auto 0 0`;\n      indicator.style.height = \"4px\";\n      indicator.style.width = `${activeTab.offsetWidth}px`;\n      indicator.style.transform = `translateX(${activeTab.offsetLeft}px)`;\n    }\n  }, []);\n\n  React.useLayoutEffect(() => {\n    const list = innerRef.current;\n    const indicator = indicatorRef.current;\n    if (!list || !indicator) return;\n\n    indicator.style.transitionDuration = \"0s\";\n    updateIndicator();\n    indicator.getBoundingClientRect();\n    indicator.style.transitionDuration = \"\";\n\n    const mutationObserver = new MutationObserver(updateIndicator);\n    mutationObserver.observe(list, {\n      attributes: true,\n      attributeFilter: [\"data-state\"],\n      childList: true,\n      subtree: true,\n    });\n\n    const resizeObserver = new ResizeObserver(updateIndicator);\n    resizeObserver.observe(list);\n\n    return () => {\n      mutationObserver.disconnect();\n      resizeObserver.disconnect();\n    };\n  }, [updateIndicator]);\n\n  return (\n    <TabsPrimitive.List\n      ref={innerRef}\n      className={cn(\n        \"relative inline-flex\",\n        \"data-[orientation=horizontal]:items-center data-[orientation=horizontal]:shadow-[inset_0_-1px_0_0_var(--color-neutral-200)]\",\n        \"data-[orientation=vertical]:flex-col data-[orientation=vertical]:shadow-[inset_-1px_0_0_0_var(--color-neutral-200)]\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      <span\n        ref={indicatorRef}\n        aria-hidden\n        className=\"pointer-events-none absolute rounded-full bg-brand-green-500 motion-safe:transition-[transform,width,height] motion-safe:duration-200 motion-safe:ease-in-out\"\n        style={{ opacity: 0 }}\n      />\n    </TabsPrimitive.List>\n  );\n});\n\nTabsList.displayName = \"TabsList\";\n"],"names":["React","jsxs","TabsPrimitive","cn","jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAQO,MAAM,WAAWA,iBAAM,WAG5B,CAAC,EAAE,WAAW,UAAU,GAAG,MAAA,GAAS,QAAQ;AAC5C,QAAM,WAAWA,iBAAM,OAAuB,IAAI;AAClD,QAAM,eAAeA,iBAAM,OAAwB,IAAI;AAEvDA,mBAAM,oBAAoB,KAAK,MAAM,SAAS,OAAyB;AAEvE,QAAM,kBAAkBA,iBAAM,YAAY,MAAM;AAC9C,UAAM,OAAO,SAAS;AACtB,UAAM,YAAY,aAAa;AAC/B,QAAI,CAAC,QAAQ,CAAC,UAAW;AAEzB,UAAM,YAAY,KAAK,cAA2B,uBAAuB;AACzE,QAAI,CAAC,WAAW;AACd,gBAAU,MAAM,UAAU;AAC1B;AAAA,IACF;AAEA,UAAM,aAAa,KAAK,QAAQ,gBAAgB;AAEhD,cAAU,MAAM,UAAU;AAE1B,QAAI,YAAY;AACd,gBAAU,MAAM,QAAQ;AACxB,gBAAU,MAAM,QAAQ;AACxB,gBAAU,MAAM,SAAS,GAAG,UAAU,YAAY;AAClD,gBAAU,MAAM,YAAY,cAAc,UAAU,SAAS;AAAA,IAC/D,OAAO;AACL,gBAAU,MAAM,QAAQ;AACxB,gBAAU,MAAM,SAAS;AACzB,gBAAU,MAAM,QAAQ,GAAG,UAAU,WAAW;AAChD,gBAAU,MAAM,YAAY,cAAc,UAAU,UAAU;AAAA,IAChE;AAAA,EACF,GAAG,CAAA,CAAE;AAELA,mBAAM,gBAAgB,MAAM;AAC1B,UAAM,OAAO,SAAS;AACtB,UAAM,YAAY,aAAa;AAC/B,QAAI,CAAC,QAAQ,CAAC,UAAW;AAEzB,cAAU,MAAM,qBAAqB;AACrC,oBAAA;AACA,cAAU,sBAAA;AACV,cAAU,MAAM,qBAAqB;AAErC,UAAM,mBAAmB,IAAI,iBAAiB,eAAe;AAC7D,qBAAiB,QAAQ,MAAM;AAAA,MAC7B,YAAY;AAAA,MACZ,iBAAiB,CAAC,YAAY;AAAA,MAC9B,WAAW;AAAA,MACX,SAAS;AAAA,IAAA,CACV;AAED,UAAM,iBAAiB,IAAI,eAAe,eAAe;AACzD,mBAAe,QAAQ,IAAI;AAE3B,WAAO,MAAM;AACX,uBAAiB,WAAA;AACjB,qBAAe,WAAA;AAAA,IACjB;AAAA,EACF,GAAG,CAAC,eAAe,CAAC;AAEpB,SACEC,2BAAAA;AAAAA,IAACC,yBAAc;AAAA,IAAd;AAAA,MACC,KAAK;AAAA,MACL,WAAWC,GAAAA;AAAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,MAED,GAAG;AAAA,MAEH,UAAA;AAAA,QAAA;AAAA,QACDC,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,KAAK;AAAA,YACL,eAAW;AAAA,YACX,WAAU;AAAA,YACV,OAAO,EAAE,SAAS,EAAA;AAAA,UAAE;AAAA,QAAA;AAAA,MACtB;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC;AAED,SAAS,cAAc;;"}

package/dist/cjs/components/Tabs/TabsTrigger.cjs

@@ -29,12 +29,11 @@ const TabsTrigger = React__namespace.forwardRef(({ className, ...props }, ref) =
     ref,
     className: cn.cn(
       "inline-flex items-center justify-center",
-      "rounded-xs border-transparent",
+      "rounded-xs",
       "typography-body-1-semibold cursor-pointer text-body-100",
-      "motion-safe:transition-[color,border-color] motion-safe:duration-150 motion-safe:ease-in-out",
-      "data-[orientation=horizontal]:border-b-4 data-[orientation=horizontal]:px-4 data-[orientation=horizontal]:py-3",
-      "data-[orientation=vertical]:justify-start data-[orientation=vertical]:border-r-4 data-[orientation=vertical]:px-4 data-[orientation=vertical]:py-3",
-      "data-[state=active]:border-brand-green-500",
+      "motion-safe:transition-colors motion-safe:duration-150 motion-safe:ease-in-out",
+      "data-[orientation=horizontal]:px-4 data-[orientation=horizontal]:py-3",
+      "data-[orientation=vertical]:justify-start data-[orientation=vertical]:px-4 data-[orientation=vertical]:py-3",
       "data-[state=active]:hover:text-hover-100",
       "data-[state=inactive]:hover:text-hover-200",
       "data-[state=active]:active:text-hover-100",

package/dist/cjs/components/Tabs/TabsTrigger.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TabsTrigger.cjs","sources":["../../../../src/components/Tabs/TabsTrigger.tsx"],"sourcesContent":["import * as TabsPrimitive from \"@radix-ui/react-tabs\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\n/** Props for the {@link TabsTrigger} button component. */\nexport type TabsTriggerProps = React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>;\n\n/** An interactive tab button that activates its associated {@link TabsContent} panel when clicked. */\nexport const TabsTrigger = React.forwardRef<\n  React.ComponentRef<typeof TabsPrimitive.Trigger>,\n  TabsTriggerProps\n>(({ className, ...props }, ref) => (\n  <TabsPrimitive.Trigger\n    ref={ref}\n    className={cn(\n      \"inline-flex items-center justify-center\",\n      \"rounded-xs border-transparent\",\n      \"typography-body-1-semibold cursor-pointer text-body-100\",\n      \"motion-safe:transition-[color,border-color] motion-safe:duration-150 motion-safe:ease-in-out\",\n      \"data-[orientation=horizontal]:border-b-4 data-[orientation=horizontal]:px-4 data-[orientation=horizontal]:py-3\",\n      \"data-[orientation=vertical]:justify-start data-[orientation=vertical]:border-r-4 data-[orientation=vertical]:px-4 data-[orientation=vertical]:py-3\",\n      \"data-[state=active]:border-brand-green-500\",\n      \"data-[state=active]:hover:text-hover-100\",\n      \"data-[state=inactive]:hover:text-hover-200\",\n      \"data-[state=active]:active:text-hover-100\",\n      \"data-[state=inactive]:active:text-hover-200\",\n      \"data-disabled:pointer-events-none\",\n      \"data-disabled:data-[state=active]:text-disabled-100\",\n      \"data-disabled:data-[state=inactive]:text-disabled-400\",\n      \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-purple-500 focus-visible:ring-offset-2 focus-visible:ring-offset-background-inverse-solid\",\n      className,\n    )}\n    {...props}\n  />\n));\n\nTabsTrigger.displayName = \"TabsTrigger\";\n"],"names":["React","jsx","TabsPrimitive","cn"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAQO,MAAM,cAAcA,iBAAM,WAG/B,CAAC,EAAE,WAAW,GAAG,MAAA,GAAS,QAC1BC,2BAAAA;AAAAA,EAACC,yBAAc;AAAA,EAAd;AAAA,IACC;AAAA,IACA,WAAWC,GAAAA;AAAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,IAED,GAAG;AAAA,EAAA;AACN,CACD;AAED,YAAY,cAAc;;"}
+{"version":3,"file":"TabsTrigger.cjs","sources":["../../../../src/components/Tabs/TabsTrigger.tsx"],"sourcesContent":["import * as TabsPrimitive from \"@radix-ui/react-tabs\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\n/** Props for the {@link TabsTrigger} button component. */\nexport type TabsTriggerProps = React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>;\n\n/** An interactive tab button that activates its associated {@link TabsContent} panel when clicked. */\nexport const TabsTrigger = React.forwardRef<\n  React.ComponentRef<typeof TabsPrimitive.Trigger>,\n  TabsTriggerProps\n>(({ className, ...props }, ref) => (\n  <TabsPrimitive.Trigger\n    ref={ref}\n    className={cn(\n      \"inline-flex items-center justify-center\",\n      \"rounded-xs\",\n      \"typography-body-1-semibold cursor-pointer text-body-100\",\n      \"motion-safe:transition-colors motion-safe:duration-150 motion-safe:ease-in-out\",\n      \"data-[orientation=horizontal]:px-4 data-[orientation=horizontal]:py-3\",\n      \"data-[orientation=vertical]:justify-start data-[orientation=vertical]:px-4 data-[orientation=vertical]:py-3\",\n      \"data-[state=active]:hover:text-hover-100\",\n      \"data-[state=inactive]:hover:text-hover-200\",\n      \"data-[state=active]:active:text-hover-100\",\n      \"data-[state=inactive]:active:text-hover-200\",\n      \"data-disabled:pointer-events-none\",\n      \"data-disabled:data-[state=active]:text-disabled-100\",\n      \"data-disabled:data-[state=inactive]:text-disabled-400\",\n      \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-purple-500 focus-visible:ring-offset-2 focus-visible:ring-offset-background-inverse-solid\",\n      className,\n    )}\n    {...props}\n  />\n));\n\nTabsTrigger.displayName = \"TabsTrigger\";\n"],"names":["React","jsx","TabsPrimitive","cn"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAQO,MAAM,cAAcA,iBAAM,WAG/B,CAAC,EAAE,WAAW,GAAG,MAAA,GAAS,QAC1BC,2BAAAA;AAAAA,EAACC,yBAAc;AAAA,EAAd;AAAA,IACC;AAAA,IACA,WAAWC,GAAAA;AAAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,IAED,GAAG;AAAA,EAAA;AACN,CACD;AAED,YAAY,cAAc;;"}

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":"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"}
+{"version":3,"file":"Button.mjs","sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":["import { Slot } from \"@radix-ui/react-slot\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { SpinnerIcon } from \"../Icons/SpinnerIcon\";\n\n/** Visual style variant of the button. */\nexport type ButtonVariant =\n  | \"primary\"\n  | \"secondary\"\n  | \"tertiary\"\n  | \"link\"\n  | \"brand\"\n  | \"destructive\"\n  | \"white\"\n  | \"tertiaryDestructive\"\n  | \"text\";\n\n/** Button height in pixels. */\nexport type ButtonSize = \"48\" | \"40\" | \"32\" | \"24\";\n\nexport interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Visual style variant of the button. @default \"primary\" */\n  variant?: ButtonVariant;\n  /** Height of the button in pixels. @default \"40\" */\n  size?: ButtonSize;\n  /** Icon element displayed before the label. */\n  leftIcon?: React.ReactNode;\n  /** Icon element displayed after the label. */\n  rightIcon?: React.ReactNode;\n  /** When `true`, replaces the label with a spinner and disables interaction. @default false */\n  loading?: boolean;\n  /** Merge props onto a child element instead of rendering a `<button>`. @default false */\n  asChild?: boolean;\n  /** Old price shown with a strikethrough before the current price. */\n  discount?: string;\n  /** Current price shown inside the button after the label and icons. */\n  price?: string;\n}\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/dist/components/Tabs/TabsList.mjs

@@ -1,22 +1,83 @@
 "use client";
-import { jsx } from "react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
 import * as TabsPrimitive from "@radix-ui/react-tabs";
 import * as React from "react";
 import { cn } from "../../utils/cn.mjs";
-const TabsList = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  TabsPrimitive.List,
-  {
-    ref,
-    className: cn(
-      "inline-flex",
-      // !TODO setup shadows tokens https://linear.app/fanvue/issue/ENG-7368/setup-shadow-tokens
-      "data-[orientation=horizontal]:items-center data-[orientation=horizontal]:shadow-[inset_0_-1px_0_0_var(--color-neutral-200)]",
-      "data-[orientation=vertical]:flex-col data-[orientation=vertical]:shadow-[inset_-1px_0_0_0_var(--color-neutral-200)]",
-      className
-    ),
-    ...props
-  }
-));
+const TabsList = React.forwardRef(({ className, children, ...props }, ref) => {
+  const innerRef = React.useRef(null);
+  const indicatorRef = React.useRef(null);
+  React.useImperativeHandle(ref, () => innerRef.current);
+  const updateIndicator = React.useCallback(() => {
+    const list = innerRef.current;
+    const indicator = indicatorRef.current;
+    if (!list || !indicator) return;
+    const activeTab = list.querySelector('[data-state="active"]');
+    if (!activeTab) {
+      indicator.style.opacity = "0";
+      return;
+    }
+    const isVertical = list.dataset.orientation === "vertical";
+    indicator.style.opacity = "1";
+    if (isVertical) {
+      indicator.style.inset = `0 0 auto auto`;
+      indicator.style.width = "4px";
+      indicator.style.height = `${activeTab.offsetHeight}px`;
+      indicator.style.transform = `translateY(${activeTab.offsetTop}px)`;
+    } else {
+      indicator.style.inset = `auto auto 0 0`;
+      indicator.style.height = "4px";
+      indicator.style.width = `${activeTab.offsetWidth}px`;
+      indicator.style.transform = `translateX(${activeTab.offsetLeft}px)`;
+    }
+  }, []);
+  React.useLayoutEffect(() => {
+    const list = innerRef.current;
+    const indicator = indicatorRef.current;
+    if (!list || !indicator) return;
+    indicator.style.transitionDuration = "0s";
+    updateIndicator();
+    indicator.getBoundingClientRect();
+    indicator.style.transitionDuration = "";
+    const mutationObserver = new MutationObserver(updateIndicator);
+    mutationObserver.observe(list, {
+      attributes: true,
+      attributeFilter: ["data-state"],
+      childList: true,
+      subtree: true
+    });
+    const resizeObserver = new ResizeObserver(updateIndicator);
+    resizeObserver.observe(list);
+    return () => {
+      mutationObserver.disconnect();
+      resizeObserver.disconnect();
+    };
+  }, [updateIndicator]);
+  return /* @__PURE__ */ jsxs(
+    TabsPrimitive.List,
+    {
+      ref: innerRef,
+      className: cn(
+        "relative inline-flex",
+        "data-[orientation=horizontal]:items-center data-[orientation=horizontal]:shadow-[inset_0_-1px_0_0_var(--color-neutral-200)]",
+        "data-[orientation=vertical]:flex-col data-[orientation=vertical]:shadow-[inset_-1px_0_0_0_var(--color-neutral-200)]",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            ref: indicatorRef,
+            "aria-hidden": true,
+            className: "pointer-events-none absolute rounded-full bg-brand-green-500 motion-safe:transition-[transform,width,height] motion-safe:duration-200 motion-safe:ease-in-out",
+            style: { opacity: 0 }
+          }
+        )
+      ]
+    }
+  );
+});
 TabsList.displayName = "TabsList";
 export {
   TabsList

package/dist/components/Tabs/TabsList.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"TabsList.mjs","sources":["../../../src/components/Tabs/TabsList.tsx"],"sourcesContent":["import * as TabsPrimitive from \"@radix-ui/react-tabs\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\n/** Props for the {@link TabsList} component. */\nexport type TabsListProps = React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>;\n\n/** Container for {@link TabsTrigger} elements. Supports both horizontal and vertical orientations. */\nexport const TabsList = React.forwardRef<\n  React.ComponentRef<typeof TabsPrimitive.List>,\n  TabsListProps\n>(({ className, ...props }, ref) => (\n  <TabsPrimitive.List\n    ref={ref}\n    className={cn(\n      \"inline-flex\", // !TODO setup shadows tokens https://linear.app/fanvue/issue/ENG-7368/setup-shadow-tokens\n      \"data-[orientation=horizontal]:items-center data-[orientation=horizontal]:shadow-[inset_0_-1px_0_0_var(--color-neutral-200)]\",\n      \"data-[orientation=vertical]:flex-col data-[orientation=vertical]:shadow-[inset_-1px_0_0_0_var(--color-neutral-200)]\",\n      className,\n    )}\n    {...props}\n  />\n));\n\nTabsList.displayName = \"TabsList\";\n"],"names":[],"mappings":";;;;;AAQO,MAAM,WAAW,MAAM,WAG5B,CAAC,EAAE,WAAW,GAAG,MAAA,GAAS,QAC1B;AAAA,EAAC,cAAc;AAAA,EAAd;AAAA,IACC;AAAA,IACA,WAAW;AAAA,MACT;AAAA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,IAED,GAAG;AAAA,EAAA;AACN,CACD;AAED,SAAS,cAAc;"}
+{"version":3,"file":"TabsList.mjs","sources":["../../../src/components/Tabs/TabsList.tsx"],"sourcesContent":["import * as TabsPrimitive from \"@radix-ui/react-tabs\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\n/** Props for the {@link TabsList} component. */\nexport type TabsListProps = React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>;\n\n/** Container for {@link TabsTrigger} elements. Renders a sliding active-tab indicator that animates between tabs. */\nexport const TabsList = React.forwardRef<\n  React.ComponentRef<typeof TabsPrimitive.List>,\n  TabsListProps\n>(({ className, children, ...props }, ref) => {\n  const innerRef = React.useRef<HTMLDivElement>(null);\n  const indicatorRef = React.useRef<HTMLSpanElement>(null);\n\n  React.useImperativeHandle(ref, () => innerRef.current as HTMLDivElement);\n\n  const updateIndicator = React.useCallback(() => {\n    const list = innerRef.current;\n    const indicator = indicatorRef.current;\n    if (!list || !indicator) return;\n\n    const activeTab = list.querySelector<HTMLElement>('[data-state=\"active\"]');\n    if (!activeTab) {\n      indicator.style.opacity = \"0\";\n      return;\n    }\n\n    const isVertical = list.dataset.orientation === \"vertical\";\n\n    indicator.style.opacity = \"1\";\n\n    if (isVertical) {\n      indicator.style.inset = `0 0 auto auto`;\n      indicator.style.width = \"4px\";\n      indicator.style.height = `${activeTab.offsetHeight}px`;\n      indicator.style.transform = `translateY(${activeTab.offsetTop}px)`;\n    } else {\n      indicator.style.inset = `auto auto 0 0`;\n      indicator.style.height = \"4px\";\n      indicator.style.width = `${activeTab.offsetWidth}px`;\n      indicator.style.transform = `translateX(${activeTab.offsetLeft}px)`;\n    }\n  }, []);\n\n  React.useLayoutEffect(() => {\n    const list = innerRef.current;\n    const indicator = indicatorRef.current;\n    if (!list || !indicator) return;\n\n    indicator.style.transitionDuration = \"0s\";\n    updateIndicator();\n    indicator.getBoundingClientRect();\n    indicator.style.transitionDuration = \"\";\n\n    const mutationObserver = new MutationObserver(updateIndicator);\n    mutationObserver.observe(list, {\n      attributes: true,\n      attributeFilter: [\"data-state\"],\n      childList: true,\n      subtree: true,\n    });\n\n    const resizeObserver = new ResizeObserver(updateIndicator);\n    resizeObserver.observe(list);\n\n    return () => {\n      mutationObserver.disconnect();\n      resizeObserver.disconnect();\n    };\n  }, [updateIndicator]);\n\n  return (\n    <TabsPrimitive.List\n      ref={innerRef}\n      className={cn(\n        \"relative inline-flex\",\n        \"data-[orientation=horizontal]:items-center data-[orientation=horizontal]:shadow-[inset_0_-1px_0_0_var(--color-neutral-200)]\",\n        \"data-[orientation=vertical]:flex-col data-[orientation=vertical]:shadow-[inset_-1px_0_0_0_var(--color-neutral-200)]\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      <span\n        ref={indicatorRef}\n        aria-hidden\n        className=\"pointer-events-none absolute rounded-full bg-brand-green-500 motion-safe:transition-[transform,width,height] motion-safe:duration-200 motion-safe:ease-in-out\"\n        style={{ opacity: 0 }}\n      />\n    </TabsPrimitive.List>\n  );\n});\n\nTabsList.displayName = \"TabsList\";\n"],"names":[],"mappings":";;;;;AAQO,MAAM,WAAW,MAAM,WAG5B,CAAC,EAAE,WAAW,UAAU,GAAG,MAAA,GAAS,QAAQ;AAC5C,QAAM,WAAW,MAAM,OAAuB,IAAI;AAClD,QAAM,eAAe,MAAM,OAAwB,IAAI;AAEvD,QAAM,oBAAoB,KAAK,MAAM,SAAS,OAAyB;AAEvE,QAAM,kBAAkB,MAAM,YAAY,MAAM;AAC9C,UAAM,OAAO,SAAS;AACtB,UAAM,YAAY,aAAa;AAC/B,QAAI,CAAC,QAAQ,CAAC,UAAW;AAEzB,UAAM,YAAY,KAAK,cAA2B,uBAAuB;AACzE,QAAI,CAAC,WAAW;AACd,gBAAU,MAAM,UAAU;AAC1B;AAAA,IACF;AAEA,UAAM,aAAa,KAAK,QAAQ,gBAAgB;AAEhD,cAAU,MAAM,UAAU;AAE1B,QAAI,YAAY;AACd,gBAAU,MAAM,QAAQ;AACxB,gBAAU,MAAM,QAAQ;AACxB,gBAAU,MAAM,SAAS,GAAG,UAAU,YAAY;AAClD,gBAAU,MAAM,YAAY,cAAc,UAAU,SAAS;AAAA,IAC/D,OAAO;AACL,gBAAU,MAAM,QAAQ;AACxB,gBAAU,MAAM,SAAS;AACzB,gBAAU,MAAM,QAAQ,GAAG,UAAU,WAAW;AAChD,gBAAU,MAAM,YAAY,cAAc,UAAU,UAAU;AAAA,IAChE;AAAA,EACF,GAAG,CAAA,CAAE;AAEL,QAAM,gBAAgB,MAAM;AAC1B,UAAM,OAAO,SAAS;AACtB,UAAM,YAAY,aAAa;AAC/B,QAAI,CAAC,QAAQ,CAAC,UAAW;AAEzB,cAAU,MAAM,qBAAqB;AACrC,oBAAA;AACA,cAAU,sBAAA;AACV,cAAU,MAAM,qBAAqB;AAErC,UAAM,mBAAmB,IAAI,iBAAiB,eAAe;AAC7D,qBAAiB,QAAQ,MAAM;AAAA,MAC7B,YAAY;AAAA,MACZ,iBAAiB,CAAC,YAAY;AAAA,MAC9B,WAAW;AAAA,MACX,SAAS;AAAA,IAAA,CACV;AAED,UAAM,iBAAiB,IAAI,eAAe,eAAe;AACzD,mBAAe,QAAQ,IAAI;AAE3B,WAAO,MAAM;AACX,uBAAiB,WAAA;AACjB,qBAAe,WAAA;AAAA,IACjB;AAAA,EACF,GAAG,CAAC,eAAe,CAAC;AAEpB,SACE;AAAA,IAAC,cAAc;AAAA,IAAd;AAAA,MACC,KAAK;AAAA,MACL,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,MAED,GAAG;AAAA,MAEH,UAAA;AAAA,QAAA;AAAA,QACD;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,KAAK;AAAA,YACL,eAAW;AAAA,YACX,WAAU;AAAA,YACV,OAAO,EAAE,SAAS,EAAA;AAAA,UAAE;AAAA,QAAA;AAAA,MACtB;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC;AAED,SAAS,cAAc;"}

package/dist/components/Tabs/TabsTrigger.mjs

@@ -9,12 +9,11 @@ const TabsTrigger = React.forwardRef(({ className, ...props }, ref) => /* @__PUR
     ref,
     className: cn(
       "inline-flex items-center justify-center",
-      "rounded-xs border-transparent",
+      "rounded-xs",
       "typography-body-1-semibold cursor-pointer text-body-100",
-      "motion-safe:transition-[color,border-color] motion-safe:duration-150 motion-safe:ease-in-out",
-      "data-[orientation=horizontal]:border-b-4 data-[orientation=horizontal]:px-4 data-[orientation=horizontal]:py-3",
-      "data-[orientation=vertical]:justify-start data-[orientation=vertical]:border-r-4 data-[orientation=vertical]:px-4 data-[orientation=vertical]:py-3",
-      "data-[state=active]:border-brand-green-500",
+      "motion-safe:transition-colors motion-safe:duration-150 motion-safe:ease-in-out",
+      "data-[orientation=horizontal]:px-4 data-[orientation=horizontal]:py-3",
+      "data-[orientation=vertical]:justify-start data-[orientation=vertical]:px-4 data-[orientation=vertical]:py-3",
       "data-[state=active]:hover:text-hover-100",
       "data-[state=inactive]:hover:text-hover-200",
       "data-[state=active]:active:text-hover-100",

package/dist/components/Tabs/TabsTrigger.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"TabsTrigger.mjs","sources":["../../../src/components/Tabs/TabsTrigger.tsx"],"sourcesContent":["import * as TabsPrimitive from \"@radix-ui/react-tabs\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\n/** Props for the {@link TabsTrigger} button component. */\nexport type TabsTriggerProps = React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>;\n\n/** An interactive tab button that activates its associated {@link TabsContent} panel when clicked. */\nexport const TabsTrigger = React.forwardRef<\n  React.ComponentRef<typeof TabsPrimitive.Trigger>,\n  TabsTriggerProps\n>(({ className, ...props }, ref) => (\n  <TabsPrimitive.Trigger\n    ref={ref}\n    className={cn(\n      \"inline-flex items-center justify-center\",\n      \"rounded-xs border-transparent\",\n      \"typography-body-1-semibold cursor-pointer text-body-100\",\n      \"motion-safe:transition-[color,border-color] motion-safe:duration-150 motion-safe:ease-in-out\",\n      \"data-[orientation=horizontal]:border-b-4 data-[orientation=horizontal]:px-4 data-[orientation=horizontal]:py-3\",\n      \"data-[orientation=vertical]:justify-start data-[orientation=vertical]:border-r-4 data-[orientation=vertical]:px-4 data-[orientation=vertical]:py-3\",\n      \"data-[state=active]:border-brand-green-500\",\n      \"data-[state=active]:hover:text-hover-100\",\n      \"data-[state=inactive]:hover:text-hover-200\",\n      \"data-[state=active]:active:text-hover-100\",\n      \"data-[state=inactive]:active:text-hover-200\",\n      \"data-disabled:pointer-events-none\",\n      \"data-disabled:data-[state=active]:text-disabled-100\",\n      \"data-disabled:data-[state=inactive]:text-disabled-400\",\n      \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-purple-500 focus-visible:ring-offset-2 focus-visible:ring-offset-background-inverse-solid\",\n      className,\n    )}\n    {...props}\n  />\n));\n\nTabsTrigger.displayName = \"TabsTrigger\";\n"],"names":[],"mappings":";;;;;AAQO,MAAM,cAAc,MAAM,WAG/B,CAAC,EAAE,WAAW,GAAG,MAAA,GAAS,QAC1B;AAAA,EAAC,cAAc;AAAA,EAAd;AAAA,IACC;AAAA,IACA,WAAW;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,IAED,GAAG;AAAA,EAAA;AACN,CACD;AAED,YAAY,cAAc;"}
+{"version":3,"file":"TabsTrigger.mjs","sources":["../../../src/components/Tabs/TabsTrigger.tsx"],"sourcesContent":["import * as TabsPrimitive from \"@radix-ui/react-tabs\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\n/** Props for the {@link TabsTrigger} button component. */\nexport type TabsTriggerProps = React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>;\n\n/** An interactive tab button that activates its associated {@link TabsContent} panel when clicked. */\nexport const TabsTrigger = React.forwardRef<\n  React.ComponentRef<typeof TabsPrimitive.Trigger>,\n  TabsTriggerProps\n>(({ className, ...props }, ref) => (\n  <TabsPrimitive.Trigger\n    ref={ref}\n    className={cn(\n      \"inline-flex items-center justify-center\",\n      \"rounded-xs\",\n      \"typography-body-1-semibold cursor-pointer text-body-100\",\n      \"motion-safe:transition-colors motion-safe:duration-150 motion-safe:ease-in-out\",\n      \"data-[orientation=horizontal]:px-4 data-[orientation=horizontal]:py-3\",\n      \"data-[orientation=vertical]:justify-start data-[orientation=vertical]:px-4 data-[orientation=vertical]:py-3\",\n      \"data-[state=active]:hover:text-hover-100\",\n      \"data-[state=inactive]:hover:text-hover-200\",\n      \"data-[state=active]:active:text-hover-100\",\n      \"data-[state=inactive]:active:text-hover-200\",\n      \"data-disabled:pointer-events-none\",\n      \"data-disabled:data-[state=active]:text-disabled-100\",\n      \"data-disabled:data-[state=inactive]:text-disabled-400\",\n      \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-purple-500 focus-visible:ring-offset-2 focus-visible:ring-offset-background-inverse-solid\",\n      className,\n    )}\n    {...props}\n  />\n));\n\nTabsTrigger.displayName = \"TabsTrigger\";\n"],"names":[],"mappings":";;;;;AAQO,MAAM,cAAc,MAAM,WAG/B,CAAC,EAAE,WAAW,GAAG,MAAA,GAAS,QAC1B;AAAA,EAAC,cAAc;AAAA,EAAd;AAAA,IACC;AAAA,IACA,WAAW;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,IAED,GAAG;AAAA,EAAA;AACN,CACD;AAED,YAAY,cAAc;"}

package/dist/index.d.ts

@@ -1084,7 +1084,7 @@ export declare const TabsContent: React_2.ForwardRefExoticComponent<Omit<TabsPri
 /** Props for the {@link TabsContent} panel component. */
 export declare type TabsContentProps = React_2.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>;
 
-/** Container for {@link TabsTrigger} elements. Supports both horizontal and vertical orientations. */
+/** Container for {@link TabsTrigger} elements. Renders a sliding active-tab indicator that animates between tabs. */
 export declare const TabsList: React_2.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsListProps & React_2.RefAttributes<HTMLDivElement>, "ref"> & React_2.RefAttributes<HTMLDivElement>>;
 
 /** Props for the {@link TabsList} component. */

package/package.json

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