Inline Citation

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

import {
  InlineCitation,
  InlineCitationCard,
  InlineCitationCardBody,
  InlineCitationCardTrigger,
  InlineCitationText,
} from "@tilt-legal/cubitt-components/chat-elements";

Examples

Default

<InlineCitation>
  <InlineCitationText>with only 30 days notice</InlineCitationText>
  <InlineCitationCard>
    <InlineCitationCardTrigger sources={sourceUrls} />
    <InlineCitationCardBody>
      <InlineCitationCarousel>
        <InlineCitationCarouselHeader>
          <InlineCitationCarouselPrev />
          <InlineCitationCarouselIndex />
          <InlineCitationCarouselNext />
        </InlineCitationCarouselHeader>
        <InlineCitationCarouselContent>
          <InlineCitationCarouselItem>
            <InlineCitationSource
              title="Lease review memo"
              url={sourceUrls[0]}
            />
            <InlineCitationQuote>
              Tenant may terminate after year three.
            </InlineCitationQuote>
          </InlineCitationCarouselItem>
        </InlineCitationCarouselContent>
      </InlineCitationCarousel>
    </InlineCitationCardBody>
  </InlineCitationCard>
</InlineCitation>

Open

<InlineCitation>
  <InlineCitationText>based on the latest board pack</InlineCitationText>
  <InlineCitationCard defaultOpen>
    <InlineCitationCardTrigger sources={sourceUrls} />
    <InlineCitationCardBody>...</InlineCitationCardBody>
  </InlineCitationCard>
</InlineCitation>

API Reference

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

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

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

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

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

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

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

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

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

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

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

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

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

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.

Inline Citation
Preview