feat: add Fact primitive (ported from Post for Me)#1
Open
calebpanza wants to merge 2 commits into
Open
Conversation
A compact, read-only label→value block for detail/summary surfaces (ids,
dates, status, counts). Ported from the Post for Me dashboard's app/ui/fact.tsx
into the Crescent registry conventions:
- registry/bases/{base,radix}/ui/fact.tsx (identical — pure display primitive,
no interactive library)
- cn-fact / cn-fact-label / cn-fact-value tokens added to all 8 style CSS files
- registry.json + build-registry.ts entries (fact + fact-radix)
- showcase demo (fact-demo.tsx) + demos.tsx registration
- regenerated registry-dist (32 items, no unresolved cn-* tokens)
Closes CUI-4
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Adds an `orientation` prop ("vertical" default | "horizontal") so a Fact can
render as a settings-style label | value row instead of the stacked cell.
Direction is structural (inline flex-row/flex-col); the per-orientation gap is
driven from data-orientation via the cn-fact token, so spacing stays
style-tunable. Updates both base + radix variants, all 8 style CSS files, the
showcase demo, and regenerates registry-dist.
Addresses review feedback on CUI-4.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Assignee: Caleb Panza
Summary
Ports the Fact primitive from the Post for Me dashboard into the Crescent UI registry. A
Factis a compact, read-only label→value block for detail/summary surfaces — ids, dates, status, counts. Lay several out in a flex/grid for a "facts strip" (the canonical account/post detail-page pattern).The value slot is freeform — plain text, a monospaced id, a badge, a copyable, an avatar, etc.
Orientation (review feedback)
Per the review on CUI-4,
Factnow takes anorientationprop:"vertical"(default) — the original stacked cell: small uppercase label above its value."horizontal"— label and value on one row (label | value), the settings-style row look. Give the label a width (e.g.[&_[data-slot=fact-label]]:w-24) to align values down a column.Implementation notes:
flex-row items-baselinevsflex-col).data-orientationattribute via thecn-facttoken (gap-1 data-[orientation=horizontal]:gap-2), so spacing remains style-tunable per style — and resolves cleanly through the registry build (acn-*token inside a JSX ternary would not be resolved bytransformStyle).Source
Faithfully ported from
app/ui/fact.tsxin thepost-for-me-dashboardrepo. Thelabelprop +childrenvalue API is kept identical to how the dashboard consumes it.What's included (per the
crescent-componentconventions)registry/bases/{base,radix}/ui/fact.tsx— Fact is a pure-divdisplay primitive with no interactive library, so the two variants are byte-for-byte identical (no"use client"). Both ship soradix-*consumers can install it.cn-fact/cn-fact-label/cn-fact-valuetokens in all 8 style CSS files — typography/color/spacing live in the style layer; only structuralflex/min-w-0is inline.cn-factnow carries the orientation gap variant.registry.json+scripts/build-registry.tsentries (fact+fact-radix, no npm dependencies).app/showcase/components/fact-demo.tsx— facts-strip hero, freeform-value examples, and a new Horizontal example. Stays dependency-free (no Badge/Copyable, which aren't in Crescent yet).registry-dist/regenerated — 32 items, no unresolvedcn-*tokens.Verification
bun run registry:build— 32 items across 8 styles, no token leaksbun run typecheckbun run lintbun run buildCloses CUI-4.