or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

blog-components.mdcontent-components.mdcore-plugin.mddocumentation-components.mdicon-components.mdindex.mdlayout-components.mdnavigation-components.mdtheme-configuration.mdutility-components.md
tile.json

documentation-components.mddocs/

Documentation Components

Comprehensive documentation system components including document pages, sidebars, table of contents, breadcrumbs, and version management for documentation sites.

Capabilities

Documentation Root Components

Root-level components that structure the documentation section.

/**
 * Documentation section root wrapper
 * @returns Documentation root structure
 */
function DocsRoot(): ReactNode;

/**
 * Document root layout for individual documents
 * @param props - Document root props
 * @returns Document root structure
 */
function DocRoot(props: DocRootProps): ReactNode;

interface DocRootProps {
  readonly children: ReactNode;
}

Document Root Layout

Layout structure for individual document pages.

/**
 * Document root layout wrapper
 * @param props - Layout props
 * @returns Document layout structure with sidebar and main content
 */
function DocRootLayout(props: DocRootLayoutProps): ReactNode;

interface DocRootLayoutProps {
  readonly children: ReactNode;
}

Document Root Layout Components

Sub-components for document root layout structure.

/**
 * Main content area for document pages
 * @param props - Main content props
 * @returns Main content wrapper
 */
function DocRootLayoutMain(props: DocRootLayoutMainProps): ReactNode;

interface DocRootLayoutMainProps {
  readonly hiddenSidebarContainer: boolean;
  readonly children: ReactNode;
}

/**
 * Sidebar container for document navigation
 * @param props - Sidebar props
 * @returns Sidebar layout component
 */
function DocRootLayoutSidebar(props: DocRootLayoutSidebarProps): ReactNode;

interface DocRootLayoutSidebarProps {
  readonly sidebar: PropSidebar;
  readonly hiddenSidebarContainer: boolean;
  readonly setHiddenSidebarContainer: Dispatch<SetStateAction<boolean>>;
}

/**
 * Sidebar expand/collapse button
 * @param props - Expand button props
 * @returns Sidebar expand button
 */
function DocRootLayoutSidebarExpandButton(props: SidebarExpandButtonProps): ReactNode;

interface SidebarExpandButtonProps {
  toggleSidebar: () => void;
}

Document Item Components

Components for individual document pages and their structure.

/**
 * Individual document item wrapper
 * @param props - Document item props
 * @returns Document page structure
 */
function DocItem(props: DocItemProps): ReactNode;

interface DocItemProps {
  readonly children: ReactNode;
}

Document Item Layout

Layout structure for document content.

/**
 * Document item layout wrapper
 * @param props - Document layout props
 * @returns Document page layout
 */
function DocItemLayout(props: DocItemLayoutProps): ReactNode;

interface DocItemLayoutProps {
  readonly children: ReactNode;
}

Document Item Content

Content wrapper for document body.

/**
 * Document content wrapper
 * @param props - Content wrapper props
 * @returns Document content container
 */
function DocItemContent(props: DocItemContentProps): ReactNode;

interface DocItemContentProps {
  readonly children: ReactNode;
}

Document Item Metadata

Metadata component for document pages.

/**
 * Document metadata component for SEO and page info
 * @returns Document metadata elements
 */
function DocItemMetadata(): ReactNode;

Document Item Footer

Footer section for document pages.

/**
 * Document footer with edit links and metadata
 * @returns Document footer element
 */
function DocItemFooter(): ReactNode;

Document Item Paginator

Navigation between previous/next documents.

/**
 * Document navigation paginator
 * @returns Previous/next document navigation
 */
function DocItemPaginator(): ReactNode;

Table of Contents Components

Table of contents components for document navigation.

Document TOC Components

Desktop and mobile table of contents for documents.

/**
 * Desktop table of contents for documents
 * @returns Desktop TOC sidebar
 */
function DocItemTOCDesktop(): ReactNode;

/**
 * Mobile table of contents for documents
 * @returns Mobile TOC dropdown
 */
function DocItemTOCMobile(): ReactNode;

Generic TOC Components

Reusable table of contents components.

/**
 * Desktop table of contents component
 * @param props - TOC props
 * @returns TOC navigation tree
 */
function TOC(props: TOCProps): ReactNode;

interface TOCProps {
  readonly toc: readonly TOCItem[];
  readonly minHeadingLevel?: number;
  readonly maxHeadingLevel?: number;
  readonly className?: string;
}

/**
 * Inline table of contents component
 * @param props - Inline TOC props
 * @returns Inline TOC list
 */
function TOCInline(props: TOCInlineProps): ReactNode;

interface TOCInlineProps {
  readonly toc: readonly TOCItem[];
  readonly minHeadingLevel?: number;
  readonly maxHeadingLevel?: number;
}

/**
 * Collapsible table of contents component
 * @param props - Collapsible TOC props
 * @returns Collapsible TOC with toggle
 */
function TOCCollapsible(props: TOCCollapsibleProps): ReactNode;

interface TOCCollapsibleProps {
  readonly className?: string;
  readonly minHeadingLevel?: number;
  readonly maxHeadingLevel?: number;
  readonly toc: readonly TOCItem[];
}

TOC Items and Structure

Components for rendering TOC structure.

/**
 * TOC items list component
 * @param props - TOC items props
 * @returns TOC items list
 */
function TOCItems(props: TOCItemsProps): ReactNode;

interface TOCItemsProps {
  readonly toc: readonly TOCItem[];
  readonly minHeadingLevel?: number;
  readonly maxHeadingLevel?: number;
  readonly className?: string;
  readonly linkClassName?: string | null;
  readonly linkActiveClassName?: string;
}

/**
 * TOC tree structure component
 * @param props - TOC tree props
 * @returns Hierarchical TOC tree
 */
function TOCItemsTree(props: TOCItemsTreeProps): ReactNode;

interface TOCItemsTreeProps {
  readonly toc: readonly TOCTreeNode[];
  readonly className: string;
  readonly linkClassName: string | null;
  readonly isChild?: boolean;
}

/**
 * TOC collapse button
 * @param props - Collapse button props
 * @returns TOC expand/collapse button
 */
function TOCCollapsibleCollapseButton(props: TOCCollapseButtonProps): ReactNode;

interface TOCCollapseButtonProps extends ComponentProps<'button'> {
  collapsed: boolean;
}

Documentation Sidebar

Sidebar navigation components for documentation structure.

/**
 * Documentation sidebar component
 * @param props - Sidebar props
 * @returns Documentation navigation sidebar
 */
function DocSidebar(props: DocSidebarProps): ReactNode;

interface DocSidebarProps {
  readonly path: string;
  readonly sidebar: readonly PropSidebarItem[];
  readonly onCollapse: () => void;
  readonly isHidden: boolean;
}

Sidebar Platform Variants

Desktop and mobile versions of the documentation sidebar.

/**
 * Desktop documentation sidebar
 * @param props - Desktop sidebar props
 * @returns Desktop sidebar component
 */
function DocSidebarDesktop(props: DocSidebarProps): ReactNode;

/**
 * Mobile documentation sidebar
 * @param props - Mobile sidebar props
 * @returns Mobile sidebar component
 */
function DocSidebarMobile(props: DocSidebarProps): ReactNode;

Sidebar Content and Controls

Content and control components for the sidebar.

/**
 * Desktop sidebar content
 * @param props - Sidebar content props
 * @returns Sidebar content with navigation items
 */
function DocSidebarDesktopContent(props: DocSidebarContentProps): ReactNode;

interface DocSidebarContentProps {
  readonly className?: string;
  readonly path: string;
  readonly sidebar: readonly PropSidebarItem[];
}

/**
 * Sidebar collapse button
 * @param props - Collapse button props
 * @returns Sidebar collapse/expand button
 */
function DocSidebarDesktopCollapseButton(props: DocSidebarCollapseButtonProps): ReactNode;

interface DocSidebarCollapseButtonProps {
  readonly onClick: React.MouseEventHandler;
}

Sidebar Items

Components for individual sidebar navigation items.

/**
 * Generic sidebar item component
 * @param props - Sidebar item props
 * @returns Sidebar item element
 */
function DocSidebarItem(props: DocSidebarItemProps): ReactNode;

interface DocSidebarItemProps {
  readonly activePath: string;
  readonly onItemClick?: (item: PropSidebarItem) => void;
  readonly level: number;
  readonly tabIndex?: number;
  readonly item: PropSidebarItem;
  readonly index: number;
}

/**
 * Collection of sidebar items
 * @param props - Sidebar items collection props
 * @returns List of sidebar items
 */
function DocSidebarItems(props: DocSidebarItemsProps): ReactNode;

interface DocSidebarItemsProps extends Omit<DocSidebarItemProps, 'item' | 'index'> {
  readonly items: readonly PropSidebarItem[];
}

Sidebar Item Types

Specific sidebar item types for different content.

/**
 * Sidebar link item
 * @param props - Link item props
 * @returns Sidebar link element
 */
function DocSidebarItemLink(props: DocSidebarItemLinkProps): ReactNode;

interface DocSidebarItemLinkProps extends DocSidebarItemProps {
  readonly item: PropSidebarItemLink;
}

/**
 * Sidebar category item with collapsible children
 * @param props - Category item props
 * @returns Sidebar category with children
 */
function DocSidebarItemCategory(props: DocSidebarItemCategoryProps): ReactNode;

interface DocSidebarItemCategoryProps extends DocSidebarItemProps {
  readonly item: PropSidebarItemCategory;
}

/**
 * Sidebar HTML item for custom content
 * @param props - HTML item props
 * @returns Custom HTML sidebar item
 */
function DocSidebarItemHtml(props: DocSidebarItemHtmlProps): ReactNode;

interface DocSidebarItemHtmlProps extends DocSidebarItemProps {
  readonly item: PropSidebarItemHtml;
}

Document Cards

Card components for document overview and navigation.

/**
 * Document card component
 * @param props - Document card props
 * @returns Document card element
 */
function DocCard(props: DocCardProps): ReactNode;

interface DocCardProps {
  readonly item: PropSidebarItem;
}

/**
 * Collection of document cards
 * @param props - Card list props
 * @returns Grid of document cards
 */
function DocCardList(props: DocCardListProps): ReactNode;

interface DocCardListProps {
  readonly items?: PropSidebarItem[];
  readonly className?: string;
}

Document Pagination

Navigation components for document pagination.

/**
 * Document paginator for prev/next navigation
 * @param props - Paginator props
 * @returns Document pagination component
 */
function DocPaginator(props: DocPaginatorProps): ReactNode;

interface DocPaginatorProps {
  readonly nextItem?: NavigationItem;
  readonly prevItem?: NavigationItem;
  readonly className?: string;
}

/**
 * Paginator navigation link
 * @param props - Navigation link props
 * @returns Styled navigation link
 */
function PaginatorNavLink(props: PaginatorNavLinkProps): ReactNode;

interface PaginatorNavLinkProps {
  readonly title: ReactNode;
  readonly subLabel?: ReactNode;
  readonly isNext?: boolean;
  readonly permalink: string;
}

interface NavigationItem {
  readonly title: string;
  readonly permalink: string;
}

Breadcrumbs

Breadcrumb navigation for document hierarchy.

/**
 * Document breadcrumbs navigation
 * @returns Breadcrumb navigation trail
 */
function DocBreadcrumbs(): ReactNode;

/**
 * Home breadcrumb item
 * @returns Home link breadcrumb
 */
function DocBreadcrumbsHomeBreadcrumbItem(): ReactNode;

/**
 * Breadcrumbs structured data for SEO
 * @param props - Structured data props
 * @returns JSON-LD structured data
 */
function DocBreadcrumbsStructuredData(props: BreadcrumbsStructuredDataProps): ReactNode;

interface BreadcrumbsStructuredDataProps {
  readonly breadcrumbs: PropSidebarBreadcrumbsItem[];
}

Version Management

Components for handling documentation versions.

/**
 * Documentation version banner
 * @param props - Version banner props
 * @returns Version notification banner
 */
function DocVersionBanner(props: DocVersionBannerProps): ReactNode;

interface DocVersionBannerProps {
  readonly className?: string;
}

/**
 * Documentation version badge
 * @param props - Version badge props
 * @returns Version indicator badge
 */
function DocVersionBadge(props: DocVersionBadgeProps): ReactNode;

interface DocVersionBadgeProps {
  readonly className?: string;
}

/**
 * Documentation version suggestions
 * @returns Version upgrade suggestions
 */
function DocVersionSuggestions(): ReactNode;

/**
 * Documentation version root wrapper
 * @returns Version-specific wrapper
 */
function DocVersionRoot(): ReactNode;

Generated Pages

Components for auto-generated documentation pages.

/**
 * Auto-generated category index page
 * @returns Category overview page
 */
function DocCategoryGeneratedIndexPage(): ReactNode;

/**
 * Tag-filtered document list page
 * @returns Documents filtered by tag
 */
function DocTagDocListPage(): ReactNode;

/**
 * Documentation tags list page
 * @returns All available documentation tags
 */
function DocTagsListPage(): ReactNode;

Type Definitions

// Table of contents item
interface TOCItem {
  readonly value: string;
  readonly id: string;
  readonly children: readonly TOCItem[];
  readonly level: number;
}

// Sidebar item types
type PropSidebarItem = PropSidebarItemLink | PropSidebarItemCategory | PropSidebarItemHtml;

interface PropSidebarItemLink {
  type: 'link';
  label: string;
  href: string;
  docId?: string;
  unlisted?: boolean;
}

interface PropSidebarItemCategory {
  type: 'category';
  label: string;
  items: PropSidebarItem[];
  collapsed?: boolean;
  collapsible?: boolean;
}

interface PropSidebarItemHtml {
  type: 'html';
  value: string;
  defaultStyle?: boolean;
  className?: string;
}

// Sidebar structure
type PropSidebar = readonly PropSidebarItem[];

// Breadcrumb item
interface PropSidebarBreadcrumbsItem {
  label: string;
  href?: string;
}

// TOC tree node
interface TOCTreeNode extends TOCItem {
  readonly parentIndex: number;
}