@fanvue/ui 3.3.0 → 3.5.0

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/** Breakpoint values for responsive props. */\ntype Breakpoint = \"sm\" | \"md\" | \"lg\" | \"xl\";\n\nconst alignLeftClasses: Record<Breakpoint | \"always\", string> = {\n  always: \"[&>[role=tab]]:flex-initial\",\n  sm: \"[&>[role=tab]]:sm:flex-initial\",\n  md: \"[&>[role=tab]]:md:flex-initial\",\n  lg: \"[&>[role=tab]]:lg:flex-initial\",\n  xl: \"[&>[role=tab]]:xl:flex-initial\",\n};\n\nfunction getLayoutClass(fullWidth: boolean, alignLeft?: boolean | Breakpoint): string {\n  if (!fullWidth) return \"inline-flex\";\n\n  const base = \"flex w-full [&>[role=tab]]:flex-1\";\n  if (alignLeft === true) return `${base} ${alignLeftClasses.always}`;\n  if (typeof alignLeft === \"string\") return `${base} ${alignLeftClasses[alignLeft]}`;\n  return base;\n}\n\n/** Props for the {@link TabsList} component. */\nexport type TabsListProps = React.ComponentPropsWithoutRef<typeof TabsPrimitive.List> & {\n  /** When `true` (the default), the tab list spans the full width of its container and each tab grows equally. Set to `false` for inline sizing. */\n  fullWidth?: boolean;\n  /**\n   * Controls tab alignment within a full-width container.\n   * - `false` (default): tabs spread evenly\n   * - `true`: tabs left-aligned, sized to content\n   * - `\"md\"` (breakpoint): spread on mobile, left-aligned at breakpoint and up\n   */\n  alignLeft?: boolean | Breakpoint;\n};\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, fullWidth = true, alignLeft, ...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\",\n        getLayoutClass(fullWidth, alignLeft),\n        \"data-[orientation=horizontal]:items-center data-[orientation=horizontal]:shadow-[inset_0_-1px_0_0_var(--color-neutral-alphas-200)]\",\n        \"data-[orientation=vertical]:flex-col data-[orientation=vertical]:shadow-[inset_-1px_0_0_0_var(--color-neutral-alphas-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-primary-default 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":";;;;;AAOA,MAAM,mBAA0D;AAAA,EAC9D,QAAQ;AAAA,EACR,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,SAAS,eAAe,WAAoB,WAA0C;AACpF,MAAI,CAAC,UAAW,QAAO;AAEvB,QAAM,OAAO;AACb,MAAI,cAAc,KAAM,QAAO,GAAG,IAAI,IAAI,iBAAiB,MAAM;AACjE,MAAI,OAAO,cAAc,SAAU,QAAO,GAAG,IAAI,IAAI,iBAAiB,SAAS,CAAC;AAChF,SAAO;AACT;AAgBO,MAAM,WAAW,MAAM,WAG5B,CAAC,EAAE,WAAW,UAAU,YAAY,MAAM,WAAW,GAAG,MAAA,GAAS,QAAQ;AACzE,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,eAAe,WAAW,SAAS;AAAA,QACnC;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;"}
+{"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/** Breakpoint values for responsive props. */\ntype Breakpoint = \"sm\" | \"md\" | \"lg\" | \"xl\";\n\nconst alignLeftClasses: Record<Breakpoint | \"always\", string> = {\n  always: \"[&>[role=tab]]:flex-initial\",\n  sm: \"[&>[role=tab]]:sm:flex-initial\",\n  md: \"[&>[role=tab]]:md:flex-initial\",\n  lg: \"[&>[role=tab]]:lg:flex-initial\",\n  xl: \"[&>[role=tab]]:xl:flex-initial\",\n};\n\nfunction getLayoutClass(fullWidth: boolean, alignLeft?: boolean | Breakpoint): string {\n  if (!fullWidth) return \"inline-flex\";\n\n  const base = \"flex w-full [&>[role=tab]]:flex-1\";\n  if (alignLeft === true) return `${base} ${alignLeftClasses.always}`;\n  if (typeof alignLeft === \"string\") return `${base} ${alignLeftClasses[alignLeft]}`;\n  return base;\n}\n\n/** Props for the {@link TabsList} component. */\nexport type TabsListProps = React.ComponentPropsWithoutRef<typeof TabsPrimitive.List> & {\n  /** When `true` (the default), the tab list spans the full width of its container and each tab grows equally. Set to `false` for inline sizing. */\n  fullWidth?: boolean;\n  /**\n   * Controls tab alignment within a full-width container.\n   * - `false` (default): tabs spread evenly\n   * - `true`: tabs left-aligned, sized to content\n   * - `\"md\"` (breakpoint): spread on mobile, left-aligned at breakpoint and up\n   */\n  alignLeft?: boolean | Breakpoint;\n};\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, fullWidth = true, alignLeft, ...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    let cancelled = false;\n    if (document.fonts?.status !== \"loaded\") {\n      document.fonts?.ready.then(() => {\n        if (!cancelled) updateIndicator();\n      });\n    }\n\n    return () => {\n      cancelled = true;\n      mutationObserver.disconnect();\n      resizeObserver.disconnect();\n    };\n  }, [updateIndicator]);\n\n  return (\n    <TabsPrimitive.List\n      ref={innerRef}\n      className={cn(\n        \"relative\",\n        getLayoutClass(fullWidth, alignLeft),\n        \"data-[orientation=horizontal]:items-center data-[orientation=horizontal]:shadow-[inset_0_-1px_0_0_var(--color-neutral-alphas-200)]\",\n        \"data-[orientation=vertical]:flex-col data-[orientation=vertical]:shadow-[inset_-1px_0_0_0_var(--color-neutral-alphas-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-primary-default 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":"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"}

package/dist/components/Tabs/TabsTrigger.mjs

@@ -21,7 +21,7 @@ const TabsTrigger = React.forwardRef(({ className, children, ...props }, ref) =>
       "data-disabled:pointer-events-none",
       "data-disabled:data-[state=active]:text-content-tertiary",
       "data-disabled:data-[state=inactive]:text-neutral-alphas-300",
-      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-interaction-focus focus-visible:ring-offset-2 focus-visible:ring-offset-background-primary",
+      "focus-visible:shadow-focus-ring focus-visible:outline-none",
       className
     ),
     ...props,

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, children, ...props }, ref) => (\n  <TabsPrimitive.Trigger\n    ref={ref}\n    className={cn(\n      \"inline-flex min-w-0 items-center justify-center\",\n      \"rounded-xs\",\n      \"typography-body-default-16px-semibold cursor-pointer text-content-primary\",\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-buttons-primary-muted\",\n      \"data-[state=inactive]:hover:text-neutral-alphas-300\",\n      \"data-[state=active]:active:text-buttons-primary-muted\",\n      \"data-[state=inactive]:active:text-neutral-alphas-300\",\n      \"data-disabled:pointer-events-none\",\n      \"data-disabled:data-[state=active]:text-content-tertiary\",\n      \"data-disabled:data-[state=inactive]:text-neutral-alphas-300\",\n      \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-interaction-focus focus-visible:ring-offset-2 focus-visible:ring-offset-background-primary\",\n      className,\n    )}\n    {...props}\n  >\n    <span className=\"min-w-0 truncate\">{children}</span>\n  </TabsPrimitive.Trigger>\n));\n\nTabsTrigger.displayName = \"TabsTrigger\";\n"],"names":[],"mappings":";;;;;AAQO,MAAM,cAAc,MAAM,WAG/B,CAAC,EAAE,WAAW,UAAU,GAAG,SAAS,QACpC;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,IAEJ,UAAA,oBAAC,QAAA,EAAK,WAAU,oBAAoB,SAAA,CAAS;AAAA,EAAA;AAC/C,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, children, ...props }, ref) => (\n  <TabsPrimitive.Trigger\n    ref={ref}\n    className={cn(\n      \"inline-flex min-w-0 items-center justify-center\",\n      \"rounded-xs\",\n      \"typography-body-default-16px-semibold cursor-pointer text-content-primary\",\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-buttons-primary-muted\",\n      \"data-[state=inactive]:hover:text-neutral-alphas-300\",\n      \"data-[state=active]:active:text-buttons-primary-muted\",\n      \"data-[state=inactive]:active:text-neutral-alphas-300\",\n      \"data-disabled:pointer-events-none\",\n      \"data-disabled:data-[state=active]:text-content-tertiary\",\n      \"data-disabled:data-[state=inactive]:text-neutral-alphas-300\",\n      \"focus-visible:shadow-focus-ring focus-visible:outline-none\",\n      className,\n    )}\n    {...props}\n  >\n    <span className=\"min-w-0 truncate\">{children}</span>\n  </TabsPrimitive.Trigger>\n));\n\nTabsTrigger.displayName = \"TabsTrigger\";\n"],"names":[],"mappings":";;;;;AAQO,MAAM,cAAc,MAAM,WAG/B,CAAC,EAAE,WAAW,UAAU,GAAG,SAAS,QACpC;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,IAEJ,UAAA,oBAAC,QAAA,EAAK,WAAU,oBAAoB,SAAA,CAAS;AAAA,EAAA;AAC/C,CACD;AAED,YAAY,cAAc;"}

package/dist/index.d.ts

@@ -1637,6 +1637,13 @@ export declare interface CyclingTextProps extends Omit<React_2.HTMLAttributes<HT
      * effects that have to sit on the text element itself, e.g. `background-clip: text`.
      */
     labelClassName?: string;
+    /**
+     * Called with the index of the settled, fully-visible item — once on mount and
+     * again whenever it changes (after each transition completes). Lets a parent
+     * stay in lockstep with what is on screen (e.g. to act on the item the user is
+     * currently looking at) without running a second, drifting timer of its own.
+     */
+    onActiveIndexChange?: (index: number) => void;
 }
 
 /** How the wrapper should be sized to accommodate variable-length items. */
@@ -3327,7 +3334,7 @@ export declare interface PillProps extends React_2.HTMLAttributes<HTMLSpanElemen
 }
 
 /** Colour variant of the pill. */
-export declare type PillVariant = "green" | "grey" | "blue" | "gold" | "pinkLight" | "base" | "brand" | "brandLight" | "beta" | "error";
+export declare type PillVariant = "green" | "grey" | "blue" | "gold" | "pinkLight" | "base" | "brand" | "brandLight" | "beta" | "error" | "red";
 
 /**
  * Pin 2 icon. Renders at sizes 16, 24, or 32 px with outlined and filled variants.
@@ -4203,7 +4210,8 @@ export declare interface TableFooterProps extends React_2.HTMLAttributes<HTMLTab
 
 /**
  * Header cell. v2: transparent background, 48px min height, tertiary text,
- * `border-border-primary` bottom rule.
+ * `border-border-primary` bottom rule. Uses 16px semibold type, or 14px when
+ * the parent {@link TableCard} is `size="condensed"`.
  */
 export declare const TableHead: React_2.ForwardRefExoticComponent<TableHeadProps & React_2.RefAttributes<HTMLTableCellElement>>;
 
@@ -4231,7 +4239,7 @@ export declare interface TableLineClampProps extends React_2.HTMLAttributes<HTML
 }
 
 /**
- * Square 48px thumbnail used inside {@link TableCell} for media columns
+ * Square thumbnail used inside {@link TableCell} for media columns
  * (Figma `V2 Media Thumbnail Item`).
  */
 export declare const TableMediaThumbnail: React_2.ForwardRefExoticComponent<TableMediaThumbnailProps & React_2.RefAttributes<HTMLDivElement>>;
@@ -4245,8 +4253,13 @@ export declare interface TableMediaThumbnailProps extends Omit<React_2.HTMLAttri
     blurred?: boolean;
     /** `center` uses the fixed media column width from the lg spec. @default "start" */
     align?: "start" | "center";
+    /** Pixel size of the square thumbnail; `"32"` matches the current Figma `V2 Media Thumbnail Item`. @default "48" */
+    size?: TableMediaThumbnailSize;
 }
 
+/** Pixel size of the square {@link TableMediaThumbnail}. */
+export declare type TableMediaThumbnailSize = "48" | "32";
+
 /**
  * Footer bar for data tables: rows-per-page control, page navigation, and
  * range summary. Pair `paginationSlot` with {@link Pagination} for numbered
@@ -4335,18 +4348,24 @@ export declare interface TableScrollAreaProps extends React_2.HTMLAttributes<HTM
      * @deprecated v2 ignores this prop; safe to remove.
      */
     roundTop?: boolean;
+    /**
+     * Shows a slim horizontal scrollbar beneath the table when the content
+     * overflows (Figma `V2 Scroll Bar`). @default false
+     */
+    showScrollbar?: boolean;
 }
 
 /**
  * Row density for body cells.
  *
- * - `"md"` (default) → 64px Figma `V2 Table Cell` Small.
- * - `"lg"` → 80px Figma `V2 Table Cell` Large.
+ * - `"md"` (default) → 64px Figma `V2 Table Cell` Default.
+ * - `"condensed"` → 48px Figma `V2 Table Cell` Condensed.
+ * - `"lg"` → 80px rows; no longer in Figma, kept for back-compat.
  *
  * `"default"` is the v2 numeric-token equivalent of `"md"` and is preferred
  * for new code.
  */
-export declare type TableSize = "md" | "lg" | "default";
+export declare type TableSize = "md" | "lg" | "condensed" | "default";
 
 /** Current sort direction of a {@link TableSortLabel}. `null` means unsorted. */
 export declare type TableSortDirection = "asc" | "desc" | null;

package/dist/styles/theme.css

@@ -20,7 +20,7 @@
   --shadow-blur-menu: 0px 6px 12px 0px #0000001a;
   --shadow-blur-floating: 0px 12px 40px 2px #00000026;
   --shadow-ai-button-glow: -1px 1px 4px 0px #49f2643d, -4px 4px 12px 0px #49f26429, -8px 2px 24px 0px #49f2640a;
-  --shadow-focus-ring: 0 0 0 2px var(--color-background-primary), 0 0 0 4px var(--fv-focus-ring-color);
+  --shadow-focus-ring: inset 0 0 0 2px var(--fv-focus-ring-color);
   --radius-3xs: 2px;
   --radius-2xs: 4px;
   --radius-xs: 8px;

package/package.json

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