PropertyField
Sharedcomponent✓ stampedInline-editable record properties (date, tags, assignee).
@brite-nites/design-system/primitives/property-fieldPill-shaped chips for inline editable values — status, due date, assignee, priority, etc. Click to open a dropdown. Three shapes: select, calendar, person. Linear/Notion convention.
Trigger variants — dot vs colored
Two visual styles for the pill trigger. triggerVariant="default" is the neutral white pill — pair with a small colored dot / icon in the "icon" slot to signal the category (top row). triggerVariant="colored" adopts the full status palette — use when the field's VALUE is a status and should dominate visually (bottom row). Both open the same dropdown shapes; only the trigger's color treatment differs.
Select shape — with StatusTag options
Use shape={{ type: 'select', options: [...with status field...] }} to render options as StatusTags.
(none)Select shape — with counts (searchable)
searchable: true adds a search input at the top. Options can show a count on the right.
Calendar shape — single date
shape={{ type: 'calendar' }}. White surface · neutral-light hover & today · brand-primary selected · MM/DD/YY search at top · stays open after select so you can change your mind without re-clicking.
Calendar shape — date range
shape={{ type: 'calendar-range' }}. Selecting a start then end date renders a continuous brand-primary pill across all days in between (no individual day circles).
Person shape (single-select) — AssigneeField wrapper
AssigneeField wraps PropertyField with shape='person' and an Avatar in the icon slot. The selected person's avatar replaces the generic User icon.
Person shape (multi-select)
multi: true switches to checkbox rows in the dropdown and shows an avatar stack on the chip when more than one is selected.
Inline assembly — typical detail-page row
Multiple property fields in a row form the standard 'meta strip' on a detail view.
Disabled
disabled prop dims the chip and prevents interaction.