1"use client";
2
3import {
4  Alert,
5  Button,
6  Card,
7  EmptyState,
8  IdentityRow,
9  Kicker,
10  PageTitle,
11  StatusPill,
12  pushAlert,
13} from "@versable-git/ui";
14
15// Seven composites, each two or more type roles meeting on one shipping
16// screen (doc 60 owns them here, not the ui page, so a pairing appears
17// exactly once in the showcase).
18
19function TitleStack() {
20  return (
21    <div className="flex flex-col gap-2">
22      <Kicker>Job</Kicker>
23      <PageTitle
24        Icon="Refresh"
25        title="Brake pads Q3"
26        subtitle="3 files · Scrape · AC Delco Q3 taxonomy"
27        noAnimate
28      />
29    </div>
30  );
31}
32
33// The dl-as-stat-list canon doc 5 §A8 names: a two-column dl grid for
34// label/value summaries inside a card when a table is too heavy, the shape
35// speedway's admin team page uses (admin/team.tsx:396).
36function LabelValuePairs() {
37  const rows: { label: string; value: string }[] = [
38    { label: "Workspace", value: "AC Delco" },
39    { label: "Owner", value: "aakarsh@versable.ai" },
40    { label: "Plan", value: "Team" },
41    { label: "Created", value: "2026-06-02" },
42  ];
43  return (
44    <Card title="Workspace" subtitle="A settings row, the same dl shape as admin/team.tsx:396" compact noAnimate>
45      <dl className="grid grid-cols-1 gap-x-4 gap-y-2 sm:grid-cols-[minmax(0,1fr)_auto]">
46        {rows.map((r) => (
47          <div key={r.label} className="contents">
48            <dt className="text-base-content/65 text-sm">{r.label}</dt>
49            <dd className="text-base-content text-sm font-medium">{r.value}</dd>
50          </div>
51        ))}
52      </dl>
53    </Card>
54  );
55}
56
57// Header case and weight from table.tsx:151-157 (Title Case per canon doc 06,
58// text-xs font-medium, /65 ink): the shouty tiny-caps header died 2026-07-10.
59// Cell ids are mono, numerals are right-aligned and tabular.
60function TableHeaderVsCell() {
61  const rows = [
62    { part: "Brake rotor, vented", sku: "WM-48213-A", qty: 24 },
63    { part: "Brake pad set, ceramic", sku: "WM-48214-B", qty: 156 },
64    { part: "Caliper bracket", sku: "WM-48215-C", qty: 8 },
65  ];
66  return (
67    <div className="border-base-300 overflow-hidden rounded-lg border">
68      <table className="w-full border-collapse">
69        <thead>
70          <tr>
71            <th className="bg-base-200 border-base-300 border-b px-3 py-2 text-left text-xs font-medium text-base-content/65">
72              Part
73            </th>
74            <th className="bg-base-200 border-base-300 border-b px-3 py-2 text-left text-xs font-medium text-base-content/65">
75              SKU
76            </th>
77            <th className="bg-base-200 border-base-300 border-b px-3 py-2 text-right text-xs font-medium text-base-content/65">
78              Qty
79            </th>
80          </tr>
81        </thead>
82        <tbody>
83          {rows.map((r) => (
84            <tr key={r.sku} className="border-base-300 border-b last:border-0">
85              <td className="px-3 py-2 text-sm">{r.part}</td>
86              <td className="px-3 py-2 font-mono text-xs">{r.sku}</td>
87              <td className="px-3 py-2 text-right font-mono text-sm tabular-nums">{r.qty}</td>
88            </tr>
89          ))}
90        </tbody>
91      </table>
92    </div>
93  );
94}
95
96function IdentityRowComposite() {
97  return (
98    <div className="border-base-300 flex items-center justify-between gap-3 rounded-lg border p-2">
99      <IdentityRow
100        avatar="AK"
101        title="Aakarsh Chopra"
102        subtitle={<span className="font-mono">usr_48213</span>}
103      />
104      <StatusPill kind="ok" size="sm" dot>
105        active
106      </StatusPill>
107    </div>
108  );
109}
110
111// Alert title over body, EmptyState title over hint, and a live toast, so
112// the size steps between the three read side by side rather than described.
113function MessageText() {
114  return (
115    <div className="flex flex-col gap-4">
116      <Alert tone="warning" title="One-time secret">
117        This value shows once. Copy it now; it cannot be retrieved again.
118      </Alert>
119      <div className="border-base-300 rounded-lg border">
120        <EmptyState
121          compact
122          Icon="CloudUpload"
123          title="No parts yet"
124          description="Upload a source file to get started."
125        />
126      </div>
127      <div>
128        <Button
129          size="sm"
130          variant="outline"
131          Icon="Success"
132          content="Fire a toast"
133          onClick={() => {
134            pushAlert.success("Row part_h83k2m saved");
135          }}
136        />
137        <p className="text-base-content/65 mt-2 text-xs">
138          Alert's title is font-semibold at the alert's own text-sm (alert.tsx:66,76). EmptyState (compact) runs its
139          title at text-sm and its hint at text-xs (page-info.tsx:10,92-97). The toast keeps daisy's own alert body
140          size, no Tailwind override in the kit (toast.tsx:81-83).
141        </p>
142      </div>
143    </div>
144  );
145}
146
147function ProseInCard() {
148  return (
149    <Card title="Fitment note" subtitle="Attached by the reviewer" noAnimate>
150      <div className="flex flex-col gap-3">
151        <Kicker>Context</Kicker>
152        <p className="text-base-content text-base">
153          This part fits the 2024-2026 range only. Earlier model years use a different bolt pattern and should not
154          be mapped to this SKU without a manual check.
155        </p>
156        <p className="text-base-content/65 text-sm">Added by the review team, 2026-08-12.</p>
157      </div>
158    </Card>
159  );
160}
161
162// The four title levels plus the label, rendered in situ rather than
163// described: PageTitle above a Card whose body holds two Kicker-opened
164// groups, one being a nested Card with titleDivider.
165function FourLevelsInSitu() {
166  return (
167    <div className="flex flex-col gap-4">
168      <PageTitle Icon="Dashboard" title="Jobs" subtitle="12 running across 3 modules" noAnimate />
169      <Card title="Workspace" subtitle="Everything scoped to this job's setup" noAnimate>
170        <div className="flex flex-col gap-4">
171          <div className="flex flex-col gap-2">
172            <Kicker as="h3">Files</Kicker>
173            <ul className="flex flex-col gap-1">
174              <li className="flex justify-between text-sm">
175                <span className="truncate">brake-pads-q3.xlsx</span>
176                <span className="text-base-content/65">Ingested</span>
177              </li>
178              <li className="flex justify-between text-sm">
179                <span className="truncate">fitment-update.csv</span>
180                <span className="text-base-content/65">Mapping</span>
181              </li>
182            </ul>
183          </div>
184          <div className="flex flex-col gap-2">
185            <Kicker variant="bricked">Preview</Kicker>
186            <div className="border-base-300 rounded-lg border p-2">
187              <p className="text-base-content/65 text-xs">A tile label reads as the frame's own name, not a page-level opener.</p>
188            </div>
189          </div>
190          <Card title="Rows" subtitle="3 in this job" titleDivider compact noAnimate>
191            <ul className="flex flex-col gap-2">
192              <li className="flex justify-between text-sm">
193                <span className="truncate">brake-pads-q3.xlsx</span>
194                <span className="text-base-content/65">Ingested</span>
195              </li>
196              <li className="flex justify-between text-sm">
197                <span className="truncate">fitment-update.csv</span>
198                <span className="text-base-content/65">Mapping</span>
199              </li>
200              <li className="flex justify-between text-sm">
201                <span className="truncate">lighting-full.xml</span>
202                <span className="text-base-content/65">Queued</span>
203              </li>
204            </ul>
205          </Card>
206        </div>
207      </Card>
208    </div>
209  );
210}
211
212export function TypographyComposites() {
213  return (
214    <div className="flex flex-col gap-8">
215      <div className="flex flex-col gap-2">
216        <Kicker variant="bricked">Title stack</Kicker>
217        <TitleStack />
218      </div>
219      <div className="flex flex-col gap-2">
220        <Kicker variant="bricked">Label and value pairs</Kicker>
221        <LabelValuePairs />
222      </div>
223      <div className="flex flex-col gap-2">
224        <Kicker variant="bricked">Table header versus cell</Kicker>
225        <TableHeaderVsCell />
226      </div>
227      <div className="flex flex-col gap-2">
228        <Kicker variant="bricked">Identity row</Kicker>
229        <IdentityRowComposite />
230      </div>
231      <div className="flex flex-col gap-2">
232        <Kicker variant="bricked">Message text</Kicker>
233        <MessageText />
234      </div>
235      <div className="flex flex-col gap-2">
236        <Kicker variant="bricked">Prose in a card</Kicker>
237        <ProseInCard />
238      </div>
239      <div className="flex flex-col gap-2">
240        <Kicker variant="bricked">Four title levels, in situ</Kicker>
241        <FourLevelsInSitu />
242      </div>
243    </div>
244  );
245}
246