Add compact size variant to Item

[jaymantri]

Summary

Adds a size prop to Item ('default' | 'compact', default 'default'), following the house density pattern: the same size?: 'default' | 'compact' API and data-size attribute styling that Table.Root uses, and the size prop naming Button already established. ItemSize is exported alongside ItemProps.

Compact tightens the row for dense lists (e.g. transaction rows):

Property	Default	Compact	Token
Block padding	12px (--spacing-sm)	8px	--spacing-xs
Inline-start padding	20px (--spacing-lg)	16px	--spacing-md
Title/description gap	2px (--spacing-4xs)	1px	--spacing-px
Title	label (14/20, book 450)	body weight	@include body
Description	body (14/20)	12/16	@include body-sm

All target values map cleanly to existing tokens/mixins — no hardcoded values, no deltas from the product override values. Inline-end padding is intentionally unchanged (8px --spacing-xs), matching the product override, which only tightened block and inline-start.

Motivation

The webdev product (RecentTransactionsCard.tsx in the site app) currently renders dense transaction rows by overriding Item internals with attribute selectors on hashed CSS-module class names ([class*="_root_"], [class*="_content_"], [class*="_title_"], [class*="_description_"]). Those break silently if Vite's CSS-module naming changes. Once this variant ships and is consumed, the product deletes its override ledger and passes size="compact" instead — that deletion is a webdev-side follow-up, not part of this PR.

Test plan

• Playwright CT: new Sizes tests assert data-size="compact" is present for compact and absent for default; all 16 Item tests pass
• npm run lint (ESLint + stylelint) passes
• npm run test:unit — Item-related suites pass (one pre-existing icon-registry count failure on main, unrelated)
• npm run build production build passes
• Storybook: new SizeComparison story shows default and compact side by side; size added to argTypes

Follow-ups

• Figma component variant sync is pending — the design-system workflow expects a Figma counterpart for this variant (flagging for design)
• webdev: replace the CSS-module override ledger in RecentTransactionsCard.tsx with size="compact" once this is released

Made with Cursor