/** * Shared display-value primitives. * * These are the building blocks the dynamic TABLE (`dynamic-columns.tsx`) uses * to render "pro" cells — colored option badges, relation thumbnails, semantic * status colors, dark-mode detection. They live here (instead of inline in the * table) so the read-only DETAIL DIALOG (`dialogs/dynamic-record.tsx`) can reuse * the EXACT same rendering. Ecosystem rule: shared primitives, zero copy-paste — * table and dialog must not drift. */ import React from 'react'; /** * `true` when the host document is in dark mode. Observes the `` class so * badge colors re-derive on theme toggle. SSR/no-DOM safe (starts light). */ export declare function useIsDarkTheme(): boolean; /** * Semantic status → badge color. Used by the `status` cell/value when no * explicit `options` color is declared. Generic, value-driven mapping. */ export declare function statusColorFor(value: string): string; /** * Tiny square thumbnail for a resolved relation/option that carries an `image` * (brand logo, product photo, customer/user avatar). Uses the same Avatar * primitive as the `avatar`/`creator` cells so a broken/loading image * gracefully falls back to the record's initials. Sized small (inline style so * an addon-arbitrary Tailwind class never gets dropped by a consuming app's * class scan). Rendered inline alongside a label — never alone. */ export declare const RelationThumbnail: React.FC<{ src: string; alt: string; getImageUrl?: (path: string) => string; size?: number; }>; /** * Landscape-friendly identity block: wide image ON TOP, label (and optional * subtitle) UNDERNEATH. Use for brand logos, product photos and any mark that * is wider than it is tall — a square thumb next to text crops logos and * wastes the cell. Declared via `display: "image_stack"` on a column (image * URL or FK relation with a logo/photo sibling). * * No padded card / muted plate behind the mark — that ate table row height. * The image is sized with max-width/max-height and `object-contain` only. * * Sizes (CSS, not Tailwind arbitrary — host safelists vary): * sm — compact table (~88×32) * md — default table (~112×40) * lg — detail/modal (~180×72) */ export declare const ImageStack: React.FC<{ src?: string | null; label?: string | null; subtitle?: string | null; getImageUrl?: (path: string) => string; size?: 'sm' | 'md' | 'lg'; className?: string; }>; export interface DisplayOption { value: string; label: string; icon?: string; color?: string; image?: string; /** * Secondary identifier shown UNDER the label (muted, smaller) — a product's * SKU/barcode, a user's email, etc. Lets a reference chip read like * "Camiseta / SKU-001" instead of a bare name, so a resolved record is * unambiguous. Populated declaratively: the backend projects it as the * option/relation `description` (SearchConfig/FieldOptionsConfig.Description, * or a column's `label_description`). Absent → single-line label as before. */ subtitle?: string; } /** * Colored option badge — the canonical "pro" pill for a select/status/badge * value. Explicit backend `color` wins; otherwise a stable, cohesive color is * derived from the option value so "dead" gray badges come alive. Inline style * (hex-derived) so it works regardless of the host's tailwind safelist — * addon-arbitrary classes aren't in the host scan. */ export declare const OptionBadge: React.FC<{ option: DisplayOption; getImageUrl?: (path: string) => string; /** Accepted for call-site compatibility with the table; unused (option.label wins). */ fallback?: string; }>; //# sourceMappingURL=display-value.d.ts.map