## Overview [#overview] A general-purpose compound component for displaying an entity with an icon, title, and optional description line. Supports three sizes, two visual variants, hover styling, and measurement-based middle truncation that adapts to inline-flex, button, and other auto-sized containers. ### Usage [#usage] ```tsx import { EntityDisplay } from "@tilt-legal/cubitt-components/primitives"; ``` ```tsx report.pdf PDF Document ``` *** ## Examples [#examples] ### Default Variant [#default-variant] The default variant includes a border and background. Available in `sm`, `md`, and `lg` sizes. ```tsx import { EntityDisplay, MimeTypeIcon, } from "@tilt-legal/cubitt-components/primitives"; Project Proposal.pptx Budget_2024_Final_Version.docx Word Document ``` ### Ghost Variant [#ghost-variant] The ghost variant removes the background and padding. At `md` and `lg` sizes, the icon gets a circular background. When `hoverable` is enabled, the title underlines on hover. ```tsx import { EntityDisplay, MimeTypeIcon, } from "@tilt-legal/cubitt-components/primitives"; Project Proposal.pptx ``` ### Middle Truncation [#middle-truncation] The `middleTruncate` prop on `EntityDisplay.Title` enables measurement-based middle truncation that works correctly inside inline-flex containers, buttons, and other auto-sized parents — preserving the end of the text (e.g. file extensions). *** ## API Reference [#api-reference] ### EntityDisplay (Root) [#entitydisplay-root] The root container. Provides context for size, variant, and truncation measurement to all sub-components. | Prop | Type | Default | Description | | ----------- | ---------------------- | ----------- | ----------------------------------------------------------------------------------- | | `variant` | `"default" \| "ghost"` | `"default"` | Visual style. `default` has filled background with padding, `ghost` is transparent. | | `size` | `"sm" \| "md" \| "lg"` | `"md"` | Size variant controlling gap, icon size, and text. | | `hoverable` | `boolean` | `false` | Enable hover styling. Default variant highlights background, ghost underlines text. | | `className` | `string` | – | Additional classes. | ### EntityDisplay.Icon [#entitydisplayicon] Styled container for the entity icon. Sizes the SVG child based on the root's size and variant. Ghost `md`/`lg` renders a circular background with border. | Prop | Type | Default | Description | | ----------- | -------- | ------- | ---------------------- | | `className` | `string` | – | Additional CSS classes | ### EntityDisplay.Label [#entitydisplaylabel] Flex column container for title and description. Attaches the measurement ref used by middle truncation. | Prop | Type | Default | Description | | ----------- | -------- | ------- | ---------------------- | | `className` | `string` | – | Additional CSS classes | ### EntityDisplay.Title [#entitydisplaytitle] The primary text line. Supports optional measurement-based middle truncation. | Prop | Type | Default | Description | | ---------------- | --------- | ------- | ----------------------------------------------------------------------------------------- | | `middleTruncate` | `boolean` | `false` | Enable measurement-based middle truncation. Children must be a plain string when enabled. | | `className` | `string` | – | Additional CSS classes | ### EntityDisplay.Description [#entitydisplaydescription] A secondary text line rendered below the title with muted text color. Always CSS-truncated. | Prop | Type | Default | Description | | ----------- | -------- | ------- | ---------------------- | | `className` | `string` | – | Additional CSS classes |