import { type ComponentType } from "react"; import { type ColorTokens, type StyleProp, type ViewStyle, type TextStyle } from "../../style/index.js"; import { type CardProps } from "../card/card.shared.js"; import { type AvatarProps } from "../../atoms/avatar/avatar.shared.js"; import { type BadgeProps } from "../../atoms/badge/badge.shared.js"; import { type ButtonProps } from "../../atoms/button/button.shared.js"; export interface GridListSkin { /** Gallery thumbnail block corner radius (6 web, 10 iOS, 12 M3). */ galleryRadius: number; /** iOS continuous (superellipse) corner curve for the gallery thumbnail; omitted (no-op) elsewhere. */ galleryCurve?: ViewStyle["borderCurve"]; /** Inter-tile grid gap per density (default vs compact). */ gap: { default: number; compact: number; }; /** Per-tile padding for the people card per density (default vs compact). */ tilePad: { default: number; compact: number; }; /** Gallery filename type (size/line-height/weight + per-OS tracking). */ galleryTitle: (t: ColorTokens) => TextStyle; /** People-tile title type (size/line-height/weight + per-OS tracking). */ cardTitle: (t: ColorTokens) => TextStyle; /** Gallery filename subtitle type (size/line-height + per-OS tracking). */ gallerySubtitle: (t: ColorTokens) => TextStyle; /** People-tile subtitle type (size/line-height + per-OS tracking). */ cardSubtitle: (t: ColorTokens) => TextStyle; /** iOS/web dim-on-press for the gallery pressable; null on Android. */ pressedOpacity: number | null; /** Android ripple over the gallery pressable; null on iOS/web. */ ripple: ((t: ColorTokens) => { color: string; borderless: boolean; }) | null; } export type CardComponent = ComponentType; export type AvatarComponent = ComponentType; export type BadgeComponent = ComponentType; export type ButtonComponent = ComponentType; /** A trailing tile action, rendered as a Button in people mode. */ export interface GridListAction { /** Button label (e.g. "Message"). */ label: string; /** Called when the action button is pressed. */ onPress?: () => void; /** Render as an outline button (the default look is solid). */ outline?: boolean; /** Render as a ghost button. */ ghost?: boolean; } export interface GridListItem { /** Primary label for the tile (a name, project, or file). */ title: string; /** Optional supporting line beneath the title (a role, path, or size). */ subtitle?: string; /** Optional avatar photo URL or initials source for the leading avatar. */ avatar?: string; /** Optional status word rendered as a trailing badge (e.g. "Active"). */ badge?: string; /** * Gallery-tile block tint: a palette or token color name (e.g. "primary", * "blue-500"). Painted at 20% behind the filename in gallery mode. */ color?: string; /** * Trailing actions rendered as a button row beneath the title (people mode), * e.g. an outline "Message" and a ghost "View". */ actions?: GridListAction[]; } export interface GridListProps { /** The tiles to render, one card per entry. */ items: GridListItem[]; cols3?: boolean; cols2?: boolean; /** * Gallery mode: render each tile as a borderless thumbnail (a square color * block from `item.color`, with a left-aligned filename and size below). * Avatars, badges, and actions are not shown in this mode. Omit for the * default people/card tile. */ gallery?: boolean; compact?: boolean; /** Make each tile a tappable target (open a detail, select a tile). When set, * every tile renders as a Pressable with a button role and a pressed * affordance, so a tappable grid needs no hand-rolled Pressable. */ onPressItem?: (index: number) => void; /** * Render the tiles through a windowed `FlatList` instead of mounting every tile up * front, for large grids. Give the grid a bounded height (via `style`, e.g. * `{ maxHeight: 480 }`) so it can scroll; without one it warns and renders eagerly * anyway. Default (omitted) mounts all tiles, unchanged. */ virtualized?: boolean; /** E2E hook forwarded to the root element. */ testID?: string; /** Outer layout composition only (width/flex within a parent), never a restyle hook. */ style?: StyleProp; } export declare function createGridList(skin: GridListSkin, Card?: CardComponent, Avatar?: AvatarComponent, Badge?: BadgeComponent, Button?: ButtonComponent): (props: GridListProps) => import("react").JSX.Element; //# sourceMappingURL=grid-lists.shared.d.ts.map