State Sample

Usage

import {
  SampleIconTile,
  SampleList,
  SampleText,
  SampleWindow,
} from "@tulipfarm/sprout/state-sample";

<StatePanel
  kind="empty"
  icon={ChatRound}
  title="No chats yet"
  description="Every private conversation is saved here."
  sample={
    <SampleWindow icon={ChatRound} trail={["Chats"]} tabs={["Active", "Archived"]}>
      <SampleList
        items={[
          {
            leading: <SampleIconTile icon={ChatRound} />,
            title: "Draft a follow-up for Northwind",
            detail: "Draft ready for your review",
            trailing: <SampleText tone="muted">1h ago</SampleText>,
          },
        ]}
      />
    </SampleWindow>
  }
>
  <Button>Start a chat</Button>
</StatePanel>

SampleWindow draws a title bar with icon, a breadcrumb trail, and an “Example” chip. Change the chip with label. The last trail part is the current page. Add tabs for a tab row; the first tab is selected. Put a list, a table, or your own content inside.

Every sample

These are the samples TulipFarm shows on its empty pages. Data, avatars, and file glyphs here are sample adapters; the package only draws the frame, rows, and placeholders.

Lists and tables

<SampleTable
  columns={[
    { label: "Workflow", size: "wide" },
    { label: "Trigger" },
    { label: "Status", size: "narrow" },
  ]}
  rows={[
    [
      <><SampleMark tone="green" /><SampleText tone="strong">Approve large discounts</SampleText></>,
      <SampleText tone="muted">New quote</SampleText>,
      <Badge variant="success">Active</Badge>,
    ],
  ]}
/>

SampleList takes items. Each item has a title and optional detail, leading, and trailing content. Rows are at least 56px tall.

SampleTable takes columns and rows. A column size is "wide" (1.6 shares), "default" (1 share), or "narrow" (a fixed 96px). Each row starts with a decorative checkbox. Long text truncates with an ellipsis.

Parts

For SampleText, tone is "default", "strong", "muted", "link", or "mono". A SampleMark is a colored square. Its tone is red, orange, green, blue, violet, or teal, and its size is "sm" (14px) or "md" (28px). A SampleBar stands in for a value. Its width is "sm", "md", or "lg". A SampleIconTile puts an icon in a 28px tile.

Accessibility

Samples are pictures, not controls. Nothing in them can be focused. Marks, bars, icon tiles, checkboxes, and trail separators are hidden from assistive technology. Inside a State Panel the whole sample is hidden and inert, so screen readers hear only the panel text.

Theme tokens

Lines use --sprout-line, text uses --sprout-text and--sprout-muted, links use --sprout-info, and bars use --sprout-active. Mark gradients have light and dark values set by the component.