@titan-design/react-ui 0.12.0 → 0.13.0

package/src/components/custom/Table/Table.tsx

@@ -1,9 +1,36 @@
 import React, { createContext, useContext, useState, useMemo } from 'react'
-import { View, Text, Pressable, ScrollView, type ViewProps, type PressableProps } from 'react-native'
+import {
+  View,
+  Text,
+  Pressable,
+  ScrollView,
+  type ViewProps,
+  type PressableProps,
+} from 'react-native'
 import { cn } from '../../../utils/cn'
+import { Tooltip } from '../../ui/tooltip'
 
 export type SortDirection = 'asc' | 'desc' | null
 
+/**
+ * Row height / cell padding axis. `comfortable` is the default reading density;
+ * `dense` is the scannable-grid density for tables whose job is to fit many rows
+ * on screen at once (a backlog, a log, an audit list).
+ */
+export type TableDensity = 'comfortable' | 'dense'
+
+/** Cell padding per density, shared by header cells and data cells so a row's two halves cannot drift. */
+const CELL_PADDING: Record<TableDensity, string> = {
+  comfortable: 'px-4 py-3',
+  dense: 'px-2 py-1',
+}
+
+// minWidth 0 lets a flexible cell shrink below its nowrap text, so long content truncates instead of pushing the row past the table.
+const FLEX_CELL = { flex: 1, minWidth: 0 } as const
+
+// A horizontal ScrollView sizes its content to max-content; a definite width makes the table fill the viewport and flexible cells shrink.
+const SCROLL_CONTENT = { width: '100%' } as const
+
 interface TableContextType {
   sortColumn?: string
   sortDirection: SortDirection
@@ -13,6 +40,7 @@ interface TableContextType {
   onSelectAll?: (selected: boolean) => void
   selectable: boolean
   allRowIds: string[]
+  density: TableDensity
 }
 
 const TableContext = createContext<TableContextType>({
@@ -20,6 +48,7 @@ const TableContext = createContext<TableContextType>({
   selectedRows: new Set(),
   selectable: false,
   allRowIds: [],
+  density: 'comfortable',
 })
 
 export interface TableProps extends ViewProps {
@@ -43,6 +72,14 @@ export interface TableProps extends ViewProps {
   isLoading?: boolean
   /** Number of skeleton rows to show when loading */
   loadingRowCount?: number
+  /** Row height / cell padding. Defaults to `comfortable`. */
+  density?: TableDensity
+  /**
+   * Width the columns need, below which the table scrolls horizontally instead
+   * of squeezing them into overlap. Pair with {@link useColumnFit}, which drops
+   * columns first and reports what the survivors need.
+   */
+  contentMinWidth?: number
   /** Additional className */
   className?: string
   children?: React.ReactNode
@@ -82,10 +119,19 @@ export function Table({
   rowIds = [],
   isLoading = false,
   loadingRowCount = 5,
+  density = 'comfortable',
+  contentMinWidth,
   className,
   children,
   ...props
 }: TableProps) {
+  // width 100% + a minWidth floor resolves to max(container, floor): the table fills its
+  // container, and once the columns need more than that it overflows and scrolls.
+  const contentStyle =
+    contentMinWidth === undefined
+      ? SCROLL_CONTENT
+      : { ...SCROLL_CONTENT, minWidth: contentMinWidth }
+
   return (
     <TableContext.Provider
       value={{
@@ -97,16 +143,17 @@ export function Table({
         onSelectAll,
         selectable,
         allRowIds: rowIds,
+        density,
       }}
     >
       <View className={cn('w-full', className)} {...props}>
-        <ScrollView horizontal showsHorizontalScrollIndicator={false}>
+        <ScrollView
+          horizontal
+          showsHorizontalScrollIndicator={contentMinWidth !== undefined}
+          contentContainerStyle={contentStyle}
+        >
           <View role="table" className="w-full min-w-full">
-            {isLoading ? (
-              <TableLoadingSkeleton rowCount={loadingRowCount} />
-            ) : (
-              children
-            )}
+            {isLoading ? <TableLoadingSkeleton rowCount={loadingRowCount} /> : children}
           </View>
         </ScrollView>
       </View>
@@ -124,10 +171,7 @@ export interface TableHeaderProps {
  */
 export function TableHeader({ children, className }: TableHeaderProps) {
   return (
-    <View
-      role="rowgroup"
-      className={cn('bg-background-subtle rounded-t-lg', className)}
-    >
+    <View role="rowgroup" className={cn('bg-background-subtle rounded-t-lg', className)}>
       {children}
     </View>
   )
@@ -188,6 +232,8 @@ export function TableRow({
 export interface TableHeaderCellProps extends Omit<PressableProps, 'children'> {
   /** Sort key for this column */
   sortKey?: string
+  /** Full column name behind an abbreviated label: shown on hover and used as the accessible sort name. */
+  tooltip?: string
   /** Text alignment */
   align?: 'left' | 'center' | 'right'
   /** Cell width in pixels */
@@ -202,6 +248,7 @@ export interface TableHeaderCellProps extends Omit<PressableProps, 'children'> {
  */
 export function TableHeaderCell({
   sortKey,
+  tooltip,
   align = 'left',
   width,
   className,
@@ -209,9 +256,11 @@ export function TableHeaderCell({
   onPress,
   ...props
 }: TableHeaderCellProps) {
-  const { sortColumn, sortDirection, onSort } = useContext(TableContext)
-  const isSorted = sortKey && sortColumn === sortKey
+  const { sortColumn, sortDirection, onSort, density } = useContext(TableContext)
+  // The sort cycle ends at direction null with the column still set; that is unsorted, not "still descending".
+  const isSorted = !!sortKey && sortColumn === sortKey && sortDirection != null
   const isSortable = !!sortKey && !!onSort
+  const [hovered, setHovered] = useState(false)
   const ariaSort = isSorted
     ? sortDirection === 'asc'
       ? 'ascending'
@@ -233,18 +282,36 @@ export function TableHeaderCell({
     right: 'justify-end',
   }
 
+  const label = (
+    <Text
+      className={cn(
+        'text-xs font-semibold uppercase tracking-wider text-text-secondary',
+        isSorted && 'text-text-primary'
+      )}
+    >
+      {children}
+    </Text>
+  )
+
+  // The tooltip wraps the sort button rather than sitting inside it: a nested Pressable would take the press.
+  const withTooltip = (node: React.ReactNode) =>
+    tooltip ? (
+      <Tooltip label={tooltip} usePortal>
+        {node}
+      </Tooltip>
+    ) : (
+      node
+    )
+
   const content = (
     <>
-      <Text
-        className={cn(
-          'text-xs font-semibold uppercase tracking-wider text-text-secondary',
-          isSorted && 'text-text-primary'
-        )}
-      >
-        {children}
-      </Text>
+      {label}
       {isSortable && (
-        <Text className={cn('ml-1 text-xs', isSorted ? 'text-text-primary' : 'text-text-tertiary')}>
+        // Idle glyphs stay in layout but invisible, so the header reads quiet and nothing shifts on hover.
+        <Text
+          className={cn('ml-1 text-xs', isSorted ? 'text-text-primary' : 'text-text-tertiary')}
+          style={{ opacity: isSorted || hovered ? 1 : 0 }}
+        >
           {isSorted ? (sortDirection === 'asc' ? '↑' : '↓') : '↕'}
         </Text>
       )}
@@ -258,22 +325,29 @@ export function TableHeaderCell({
       <View
         role="columnheader"
         aria-sort={ariaSort}
-        style={width ? { width } : { flex: 1 }}
+        // A label and its sort glyph belong to one column: clipped is recoverable, painted over the neighbour is not.
+        className="overflow-hidden"
+        style={width ? { width } : FLEX_CELL}
       >
-        <Pressable
-          accessibilityRole="button"
-          accessibilityLabel={`Sort by ${children}`}
-          onPress={handlePress}
-          className={cn(
-            'flex-row items-center px-4 py-3',
-            alignStyles[align],
-            'web:hover:bg-interactive-hover active:bg-interactive-active',
-            className
-          )}
-          {...props}
-        >
-          {content}
-        </Pressable>
+        {withTooltip(
+          <Pressable
+            accessibilityRole="button"
+            accessibilityLabel={`Sort by ${tooltip ?? children}`}
+            onPress={handlePress}
+            onHoverIn={() => setHovered(true)}
+            onHoverOut={() => setHovered(false)}
+            className={cn(
+              'flex-row items-center',
+              CELL_PADDING[density],
+              alignStyles[align],
+              'web:hover:bg-interactive-hover active:bg-interactive-active',
+              className
+            )}
+            {...props}
+          >
+            {content}
+          </Pressable>
+        )}
       </View>
     )
   }
@@ -281,14 +355,15 @@ export function TableHeaderCell({
   return (
     <View
       role="columnheader"
-      style={width ? { width } : { flex: 1 }}
+      style={width ? { width } : FLEX_CELL}
       className={cn(
-        'flex-row items-center px-4 py-3',
+        'flex-row items-center overflow-hidden',
+        CELL_PADDING[density],
         alignStyles[align],
         className
       )}
     >
-      {content}
+      {withTooltip(content)}
     </View>
   )
 }
@@ -313,6 +388,7 @@ export function TableCell({
   children,
   ...props
 }: TableCellProps) {
+  const { density } = useContext(TableContext)
   const alignStyles = {
     left: 'items-start',
     center: 'items-center',
@@ -322,16 +398,14 @@ export function TableCell({
   return (
     <View
       role="cell"
-      style={width ? { width } : { flex: 1 }}
-      className={cn(
-        'justify-center px-4 py-3.5',
-        alignStyles[align],
-        className
-      )}
+      style={width ? { width } : FLEX_CELL}
+      className={cn('justify-center', CELL_PADDING[density], alignStyles[align], className)}
       {...props}
     >
       {typeof children === 'string' ? (
-        <Text className="text-sm text-text-primary">{children}</Text>
+        <Text className={cn(density === 'dense' ? 'text-xs' : 'text-sm', 'text-text-primary')}>
+          {children}
+        </Text>
       ) : (
         children
       )}
@@ -394,9 +468,7 @@ export function TablePagination({
       )}
     >
       <View className="flex-row items-center gap-2">
-        <Text className="text-sm text-text-secondary">
-          Rows per page:
-        </Text>
+        <Text className="text-sm text-text-secondary">Rows per page:</Text>
         <View className="flex-row gap-1">
           {pageSizeOptions.map((size) => (
             <Pressable
@@ -463,11 +535,28 @@ export function TablePagination({
 
 // Helper hook for managing table state
 
+/**
+ * An ascending comparator for one column. Returning 0 lets the caller express a
+ * tie-break inside the same function; `useTable` inverts the result for `desc`
+ * rather than reversing the array, so ties keep their relative order both ways.
+ */
+export type TableComparator<T> = (a: T, b: T) => number
+
+const isBlank = (v: unknown): boolean => v === null || v === undefined
+
 export interface UseTableOptions<T> {
   data: T[]
   defaultPageSize?: number
   defaultSortColumn?: string
   defaultSortDirection?: SortDirection
+  /**
+   * Per-column ascending comparators, for columns whose order is not their raw
+   * field order — a severity ranked critical→low rather than alphabetically, a
+   * numeric field that should sort blanks last, a date read newest-first.
+   * Columns absent from the map fall back to the default field compare.
+   */
+  comparators?: Partial<Record<keyof T & string, TableComparator<T>>> &
+    Record<string, TableComparator<T> | undefined>
 }
 
 export interface UseTableReturn<T> {
@@ -502,6 +591,7 @@ export function useTable<T extends Record<string, any>>({
   defaultPageSize = 10,
   defaultSortColumn,
   defaultSortDirection = null,
+  comparators,
 }: UseTableOptions<T>): UseTableReturn<T> {
   const [page, setPage] = useState(0)
   const [pageSize, setPageSize] = useState(defaultPageSize)
@@ -511,18 +601,26 @@ export function useTable<T extends Record<string, any>>({
   const sortedData = useMemo(() => {
     if (!sortColumn || !sortDirection) return data
 
+    const custom = comparators?.[sortColumn]
+    // Invert rather than reverse: reversing an already-sorted array also flips
+    // tied rows, so equal values would shuffle every time direction changed.
+    const sign = sortDirection === 'asc' ? 1 : -1
+
+    if (custom) return [...data].sort((a, b) => sign * custom(a, b))
+
     return [...data].sort((a, b) => {
       const aVal = a[sortColumn]
       const bVal = b[sortColumn]
 
-      if (aVal === bVal) return 0
-      if (aVal === null || aVal === undefined) return 1
-      if (bVal === null || bVal === undefined) return -1
+      // Blanks rank last in BOTH directions — outside the sign, so a missing
+      // value never masquerades as the smallest one when the column flips.
+      const blanks = isBlank(aVal) ? (isBlank(bVal) ? 0 : 1) : isBlank(bVal) ? -1 : 0
+      if (blanks !== 0) return blanks
 
-      const comparison = aVal < bVal ? -1 : 1
-      return sortDirection === 'asc' ? comparison : -comparison
+      if (aVal === bVal) return 0
+      return sign * (aVal < bVal ? -1 : 1)
     })
-  }, [data, sortColumn, sortDirection])
+  }, [data, sortColumn, sortDirection, comparators])
 
   const paginatedData = useMemo(() => {
     const start = page * pageSize
@@ -532,9 +630,7 @@ export function useTable<T extends Record<string, any>>({
   const handleSort = (column: string) => {
     if (sortColumn === column) {
       // Cycle: asc -> desc -> null
-      setSortDirection((prev) =>
-        prev === 'asc' ? 'desc' : prev === 'desc' ? null : 'asc'
-      )
+      setSortDirection((prev) => (prev === 'asc' ? 'desc' : prev === 'desc' ? null : 'asc'))
     } else {
       setSortColumn(column)
       setSortDirection('asc')
@@ -589,14 +685,12 @@ export function TableSelectAllCell({ className }: TableSelectAllCellProps) {
           allSelected
             ? 'bg-brand-primary border-brand-primary'
             : someSelected
-            ? 'bg-brand-primary-subtle border-brand-primary'
-            : 'border-hairline-strong bg-transparent'
+              ? 'bg-brand-primary-subtle border-brand-primary'
+              : 'border-hairline-strong bg-transparent'
         )}
       >
         {(allSelected || someSelected) && (
-          <Text className="text-white text-xs font-bold">
-            {allSelected ? '✓' : '−'}
-          </Text>
+          <Text className="text-white text-xs font-bold">{allSelected ? '✓' : '−'}</Text>
         )}
       </Pressable>
     </View>
@@ -632,9 +726,7 @@ export function TableSelectCell({ rowId, className }: TableSelectCellProps) {
             : 'border-hairline-strong bg-transparent web:hover:border-brand-primary'
         )}
       >
-        {isSelected && (
-          <Text className="text-white text-xs font-bold">✓</Text>
-        )}
+        {isSelected && <Text className="text-white text-xs font-bold">✓</Text>}
       </Pressable>
     </View>
   )

package/src/components/custom/Table/column-fit.test.ts

@@ -0,0 +1,75 @@
+import { describe, it, expect } from 'vitest'
+import { fitColumns, type TableColumnFit } from './column-fit'
+
+/**
+ * Five 100px columns: two that must survive, three that drop in a declared
+ * order. Every width below is picked to land on one step of that order.
+ */
+const COLUMNS: TableColumnFit[] = [
+  { key: 'id', minWidth: 100 },
+  { key: 'title', minWidth: 100 },
+  { key: 'sev', minWidth: 100, dropPriority: 1 },
+  { key: 'pri', minWidth: 100, dropPriority: 2 },
+  { key: 'tags', minWidth: 100, dropPriority: 3 },
+]
+
+const fitAt = (available: number | null) => fitColumns(COLUMNS, available)
+
+describe('fitColumns', () => {
+  it('keeps every column until one has been measured', () => {
+    expect(fitAt(null).visibleKeys).toEqual(['id', 'title', 'sev', 'pri', 'tags'])
+    expect(fitAt(null).isScrolling).toBe(false)
+  })
+
+  it('keeps all five columns at a width that fits them', () => {
+    expect(fitAt(500).visibleKeys).toEqual(['id', 'title', 'sev', 'pri', 'tags'])
+    expect(fitAt(500).contentMinWidth).toBe(500)
+    expect(fitAt(500).isScrolling).toBe(false)
+  })
+
+  it('drops the first column in the order when four fit', () => {
+    expect(fitAt(450).visibleKeys).toEqual(['id', 'title', 'pri', 'tags'])
+    expect(fitAt(450).contentMinWidth).toBe(400)
+  })
+
+  it('drops the second when three fit', () => {
+    expect(fitAt(350).visibleKeys).toEqual(['id', 'title', 'tags'])
+    expect(fitAt(350).contentMinWidth).toBe(300)
+  })
+
+  it('drops the third when only two fit', () => {
+    expect(fitAt(250).visibleKeys).toEqual(['id', 'title'])
+    expect(fitAt(250).contentMinWidth).toBe(200)
+    expect(fitAt(250).isScrolling).toBe(false)
+  })
+
+  it('stops dropping at the undroppable columns and scrolls instead', () => {
+    const fit = fitAt(150)
+    expect(fit.visibleKeys).toEqual(['id', 'title'])
+    expect(fit.contentMinWidth).toBe(200)
+    expect(fit.isScrolling).toBe(true)
+  })
+
+  it('drops one column at a time rather than everything droppable at once', () => {
+    // 450 fits four columns; a fit that dropped by category would leave two.
+    expect(fitAt(450).visibleKeys).toHaveLength(4)
+    expect(fitAt(350).visibleKeys).toHaveLength(3)
+  })
+
+  it('breaks a tied priority by declaration order', () => {
+    const tied: TableColumnFit[] = [
+      { key: 'keep', minWidth: 100 },
+      { key: 'left', minWidth: 100, dropPriority: 1 },
+      { key: 'right', minWidth: 100, dropPriority: 1 },
+    ]
+    expect(fitColumns(tied, 200).visibleKeys).toEqual(['keep', 'right'])
+  })
+
+  it('reports what the survivors need, which is what the table scrolls to', () => {
+    expect(fitColumns([{ key: 'only', minWidth: 320 }], 100)).toEqual({
+      visibleKeys: ['only'],
+      contentMinWidth: 320,
+      isScrolling: true,
+    })
+  })
+})

package/src/components/custom/Table/column-fit.ts

@@ -0,0 +1,116 @@
+import { useCallback, useMemo, useState } from 'react'
+import type { LayoutChangeEvent } from 'react-native'
+
+/**
+ * One column's terms for the fit calculation: how much room it needs, and where
+ * it sits in the drop order.
+ */
+export interface TableColumnFit {
+  /** Matches the key the caller renders the column under. */
+  key: string
+  /**
+   * Narrowest width in px at which the column still reads — its header label
+   * plus the sort affordance, or its content, whichever is wider. Real numbers
+   * matter here: the fit is arithmetic over these, not a guess at a breakpoint.
+   */
+  minWidth: number
+  /**
+   * Drop order: the lowest number leaves first. A column with no `dropPriority`
+   * never drops, which is what keeps the identifying columns on screen when the
+   * table runs out of room.
+   */
+  dropPriority?: number
+}
+
+export interface ColumnFitResult {
+  /** The keys still rendered, in declaration order. */
+  visibleKeys: string[]
+  /** What the survivors need. Hand to `Table`'s `contentMinWidth`. */
+  contentMinWidth: number
+  /** Nothing droppable is left and the survivors still overflow: the table scrolls. */
+  isScrolling: boolean
+}
+
+// Ties keep declaration order, so a duplicated priority drops left to right rather than at random.
+function dropOrder(columns: TableColumnFit[]): TableColumnFit[] {
+  return columns
+    .map((column, index) => ({ column, index }))
+    .filter((entry) => entry.column.dropPriority !== undefined)
+    .sort((a, b) => a.column.dropPriority! - b.column.dropPriority! || a.index - b.index)
+    .map((entry) => entry.column)
+}
+
+/**
+ * Drops columns one at a time in the declared order until the rest fit, then
+ * stops. Dropping cannot take an undroppable column, so once those are all that
+ * is left the table overflows on purpose and scrolls horizontally — scroll is
+ * the floor under dropping, not an alternative to it.
+ *
+ * `available` of `null` means "not measured yet": everything renders.
+ */
+export function fitColumns(columns: TableColumnFit[], available: number | null): ColumnFitResult {
+  const dropped = new Set<string>()
+  let needed = columns.reduce((total, column) => total + column.minWidth, 0)
+
+  if (available !== null) {
+    for (const column of dropOrder(columns)) {
+      if (needed <= available) break
+      dropped.add(column.key)
+      needed -= column.minWidth
+    }
+  }
+
+  return {
+    visibleKeys: columns.filter((column) => !dropped.has(column.key)).map((column) => column.key),
+    contentMinWidth: needed,
+    isScrolling: available !== null && needed > available,
+  }
+}
+
+export interface UseMeasuredWidthResult {
+  /** The measured width, or `null` until the first layout pass. */
+  width: number | null
+  onLayout: (event: LayoutChangeEvent) => void
+}
+
+/**
+ * The width of whatever it is attached to, from the `onLayout` pass every other
+ * width-aware table here already uses — no resize observer, and no window
+ * width standing in for a column that lives inside a much narrower card.
+ *
+ * `override` pins the width instead of measuring, so a story or a test can hold
+ * one breakpoint still.
+ */
+export function useMeasuredWidth(override?: number): UseMeasuredWidthResult {
+  const [measured, setMeasured] = useState<number | null>(null)
+  const onLayout = useCallback(
+    (event: LayoutChangeEvent) => setMeasured(event.nativeEvent.layout.width),
+    []
+  )
+  return { width: override ?? measured, onLayout }
+}
+
+export interface UseColumnFitResult extends ColumnFitResult {
+  isVisible: (key: string) => boolean
+}
+
+/**
+ * {@link fitColumns} as a hook, with a membership test for the render pass.
+ *
+ * @example
+ * const { width, onLayout } = useMeasuredWidth()
+ * const fit = useColumnFit(COLUMNS, width)
+ * <View onLayout={onLayout}>
+ *   <Table contentMinWidth={fit.contentMinWidth}>
+ *     {COLUMNS.filter((c) => fit.isVisible(c.key)).map(renderColumn)}
+ *   </Table>
+ * </View>
+ */
+export function useColumnFit(
+  columns: TableColumnFit[],
+  available: number | null
+): UseColumnFitResult {
+  const fit = useMemo(() => fitColumns(columns, available), [columns, available])
+  const visible = useMemo(() => new Set(fit.visibleKeys), [fit])
+  return { ...fit, isVisible: (key: string) => visible.has(key) }
+}

package/src/components/custom/Table/index.ts

@@ -19,4 +19,13 @@ export type {
   UseTableOptions,
   UseTableReturn,
   SortDirection,
+  TableDensity,
+  TableComparator,
 } from './Table'
+export { fitColumns, useColumnFit, useMeasuredWidth } from './column-fit'
+export type {
+  TableColumnFit,
+  ColumnFitResult,
+  UseColumnFitResult,
+  UseMeasuredWidthResult,
+} from './column-fit'

package/src/components/custom/TimerReadout/TimerReadout.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react-vite'
-import { View } from 'react-native'
 import { TimerReadout } from './TimerReadout'
+import { Surface } from '../../ui/surface'
 
 /**
  * `TimerReadout` — a small textual timer (⏱ + mono, right-justified) built on the
@@ -8,21 +8,23 @@ import { TimerReadout } from './TimerReadout'
  * `running`; the ` / total` suffix stays dim tertiary.
  */
 const meta: Meta<typeof TimerReadout> = {
-  title: 'Custom/TimerReadout',
+  title: 'Components/Molecules/TimerReadout',
   component: TimerReadout,
-  tags: ['autodocs'],
+  tags: ['autodocs', 'status:candidate', '!status:review'],
   parameters: {
     docs: {
       description: {
-        component: '**Atom.** A small textual timer on [useTimer]. Used-by ↑ SessionHeader.',
+        component:
+          '**Molecule.** A small textual timer on [useTimer]. Used-by ↑ SessionHeader.' +
+          ' Composes **Typography**.',
       },
     },
   },
   decorators: [
     (Story) => (
-      <View style={{ padding: 16, backgroundColor: '#131313', alignItems: 'flex-end', width: 200 }}>
+      <Surface level="base" style={{ padding: 16, alignItems: 'flex-end', width: 200 }}>
         <Story />
-      </View>
+      </Surface>
     ),
   ],
 }

package/src/components/custom/Treemap/Treemap.stories.tsx

@@ -2,9 +2,9 @@ import type { Meta, StoryObj } from '@storybook/react-vite'
 import { Treemap, type TreemapDatum } from './Treemap'
 
 const meta: Meta<typeof Treemap> = {
-  title: 'Components/DataViz/Treemap',
+  title: 'Custom/Charts/Treemap',
   component: Treemap,
-  tags: ['autodocs'],
+  tags: ['autodocs', 'status:candidate', '!status:review'],
   argTypes: {
     width: { control: { type: 'range', min: 200, max: 900, step: 20 } },
     height: { control: { type: 'range', min: 120, max: 600, step: 20 } },

package/src/components/custom/Treemap/Treemap.test.tsx

@@ -47,7 +47,7 @@ describe('Treemap', () => {
 
   it('assigns fallback palette colors when omitted', () => {
     const { container } = render(
-      <Treemap data={[{ id: 'x', value: 1 }]} width={100} height={100} />,
+      <Treemap data={[{ id: 'x', value: 1 }]} width={100} height={100} />
     )
     expect(container.firstChild).toBeInTheDocument()
   })