## Overview [#overview] `InlineCitation` connects cited text to source details. The trigger uses a compact badge, while the content can show one or more sources inside a carousel. ## Usage [#usage] ```tsx import { InlineCitation, InlineCitationCard, InlineCitationCardBody, InlineCitationCardTrigger, InlineCitationText, } from "@tilt-legal/cubitt-components/chat-elements"; ``` ## Examples [#examples] ### Default [#default] ```tsx with only 30 days notice Tenant may terminate after year three. ``` ### Open [#open] ```tsx based on the latest board pack ... ``` ## API Reference [#api-reference] ### InlineCitation [#inlinecitation] Inline wrapper for cited text and its preview card. Extends all HTML `span` props. | Prop | Type | Default | Description | | ----------- | ----------------- | ------- | --------------------------------------- | | `children` | `React.ReactNode` | - | Citation text and card components. | | `className` | `string` | - | Additional CSS classes for the wrapper. | ### InlineCitationText [#inlinecitationtext] Text span that receives hover styling from the parent citation group. Extends all HTML `span` props. | Prop | Type | Default | Description | | ----------- | ----------------- | ------- | ----------------------------------------- | | `children` | `React.ReactNode` | - | Cited inline text. | | `className` | `string` | - | Additional CSS classes for the text span. | ### InlineCitationCard [#inlinecitationcard] Preview-card root for citation details. Extends PreviewCard props. | Prop | Type | Default | Description | | ------------ | -------- | ------- | ---------------------------------------------------------------------------------------- | | `openDelay` | `number` | `0` | Accepted for API parity with hover-card usage; currently rendered through `PreviewCard`. | | `closeDelay` | `number` | `0` | Accepted for API parity with hover-card usage; currently rendered through `PreviewCard`. | ### InlineCitationCardTrigger [#inlinecitationcardtrigger] Compact badge trigger for citation details. Extends Badge props. | Prop | Type | Default | Description | | ----------- | ---------- | ------- | ------------------------------------------------------------------- | | `sources` | `string[]` | - | Source URLs used for the default hostname and `+n` label. Required. | | `className` | `string` | - | Additional CSS classes for the badge trigger. | ### InlineCitationCardBody [#inlinecitationcardbody] Preview-card content body for citation details. Extends all HTML `div` props. | Prop | Type | Default | Description | | ----------- | ----------------- | ------- | ------------------------------------- | | `children` | `React.ReactNode` | - | Citation details or carousel content. | | `className` | `string` | - | Additional CSS classes for the body. | ### InlineCitationCarousel [#inlinecitationcarousel] Carousel wrapper that provides carousel API context to the citation carousel controls. Extends Carousel props. | Prop | Type | Default | Description | | ----------- | ----------------- | ------- | ---------------------------------------- | | `children` | `React.ReactNode` | - | Carousel header, content, and items. | | `className` | `string` | - | Additional CSS classes for the carousel. | ### InlineCitationCarouselContent [#inlinecitationcarouselcontent] Citation carousel content wrapper. Extends all HTML `div` props and renders Cubitt `CarouselContent`. | Prop | Type | Default | Description | | ----------- | ----------------- | ------- | --------------------------------------- | | `children` | `React.ReactNode` | - | Carousel items. | | `className` | `string` | - | Additional CSS classes for the content. | ### InlineCitationCarouselItem [#inlinecitationcarouselitem] Single citation carousel item. Extends all HTML `div` props and renders Cubitt `CarouselItem`. | Prop | Type | Default | Description | | ----------- | ----------------- | ------- | -------------------------------------- | | `children` | `React.ReactNode` | - | Source details for this carousel item. | | `className` | `string` | - | Additional CSS classes for the item. | ### InlineCitationCarouselHeader [#inlinecitationcarouselheader] Header row for citation carousel controls. Extends all HTML `div` props. | Prop | Type | Default | Description | | ----------- | ----------------- | ------- | -------------------------------------- | | `children` | `React.ReactNode` | - | Previous/index/next controls. | | `className` | `string` | - | Additional CSS classes for the header. | ### InlineCitationCarouselIndex [#inlinecitationcarouselindex] Carousel index display. Extends all HTML `div` props. | Prop | Type | Default | Description | | ----------- | -------- | ------- | --------------------------------------------- | | `className` | `string` | - | Additional CSS classes for the index wrapper. | The rendered text is generated from the current carousel index and item count. ### InlineCitationCarouselPrev [#inlinecitationcarouselprev] Previous button for the nearest `InlineCitationCarousel`. Extends all HTML `button` props. | Prop | Type | Default | Description | | ------------ | -------- | ------------ | -------------------------------------- | | `aria-label` | `string` | `"Previous"` | Accessible label. Can be overridden. | | `className` | `string` | - | Additional CSS classes for the button. | ### InlineCitationCarouselNext [#inlinecitationcarouselnext] Next button for the nearest `InlineCitationCarousel`. Extends all HTML `button` props. | Prop | Type | Default | Description | | ------------ | -------- | -------- | -------------------------------------- | | `aria-label` | `string` | `"Next"` | Accessible label. Can be overridden. | | `className` | `string` | - | Additional CSS classes for the button. | ### InlineCitationSource [#inlinecitationsource] Source metadata block for a citation. Extends all HTML `div` props. | Prop | Type | Default | Description | | ------------- | ----------------- | ------- | ---------------------------------------------- | | `title` | `string` | - | Source title. | | `url` | `string` | - | Source URL shown under the title. | | `description` | `string` | - | Short source summary. | | `children` | `React.ReactNode` | - | Additional or replacement source content. | | `className` | `string` | - | Additional CSS classes for the source wrapper. | ### InlineCitationQuote [#inlinecitationquote] Quoted source excerpt. Extends all HTML `blockquote` props. | Prop | Type | Default | Description | | ----------- | ----------------- | ------- | ------------------------------------- | | `children` | `React.ReactNode` | - | Quote content. | | `className` | `string` | - | Additional CSS classes for the quote. |