Changelog

Release history for @luminpdf/ds. Click a version heading or section to collapse it.

DialogContent now stays within the viewport instead of overflowing on short screens.

  • Added max-h-[calc(100dvh-2rem)] + overflow-y-auto so a tall dialog scrolls inside itself rather than scrolling the page (dvh accounts for mobile browser chrome).
  • Changed the mobile width guard from max-w-[calc(100%-2rem)] to max-w-[calc(100vw-2rem)] so the 16px side gutter is always viewport-relative (the previous 100% resolved against the portal container, letting the modal touch the screen edge on mobile/tablet).

Matched the Figma "DropdownMenu / Item" spec (node 336:4988).

  • The leading icon now defaults to muted-foreground (gray) instead of inheriting the foreground color.
  • The leading icon and DropdownMenuShortcut stay muted on hover/focus — dropped the focus:**:text-accent-foreground descendant override and the shortcut's group-focus override so only the item label takes the accent/destructive color.
  • Destructive variant unchanged (icon + label stay destructive).
  • Added an "Item states & icon color" demo to the docs playground and an ItemStates Storybook story.

Color tokens on /tokens showed the previous theme's value after toggling light/dark (e.g. dark mode displayed rgba(255,255,255,.898) instead of rgba(10,10,10,.898)).

  • Root cause: useResolvedCssVars re-read on the next-themes resolvedTheme, but the provider applies the .dark class in an effect that runs after the consumer effect, so getComputedStyle read one commit behind.
  • Fix: both hooks now re-read via a MutationObserver on <html> (class/style), so values resolve after the DOM reflects the theme. Fixes every token section via the shared hook.

Added a new /icons page to browse all 1627 icons from @luminpdf/icons.

  • Search — Real-time filter by icon name
  • Weight selector — Switch between thin, light, regular, bold, fill, duotone
  • Size slider — Adjust preview size from 16–80 px
  • Color picker — Custom color with a currentColor toggle
  • Infinite scroll — Grid lazy-loads 240 icons at a time
  • Click-to-copy — Clicking any icon copies the import snippet (e.g. import { AgreementGenIcon } from "@luminpdf/icons") with a toast confirmation
  • Keyboard shortcuts — / focuses search, Esc clears it
  • Icon names displayed as-is (e.g. AgreementGen) without word-splitting

All 1627 icons are code-split into individual chunks for webpack safety. The copy handler falls back to execCommand('copy') in non-secure contexts (e.g. LAN IP).

Added a /changelog page with a lightweight Markdown renderer (headings, lists, tables, inline code, bold, links), sidebar navigation, collapsible sections, and active version tracking.

Upgraded the /tokens reference page so every token swatch now exposes its Tailwind utility alongside the CSS variable.

Color palette & semantic colors:

  • Each swatch now shows three one-click copy buttons — bg-*, text-*, border-* — via a new ColorUtilityButtons component
  • Swatch click still copies var(--…); the --var label is now a separate clickable button
  • Checkerboard background behind swatches to expose transparency

Radius section:

  • Card click copies rounded-* Tailwind class (e.g. rounded-lg)
  • Separate inner button to copy var(--radius-*) CSS variable

Responsive section — Expanded with usage guidance:

  • Breakpoints table now includes the Tailwind responsive prefix (e.g. sm:*) and a description of when it activates
  • Container tokens now show the corresponding max-w-* class and a plain-language usage example per size
  • Responsive spacing, section padding, and title-gap tokens show live resolved values and copy buttons for both Tailwind utility and CSS variable

New custom Tailwind utilities added to app/theme.css:

  • px-container → padding-inline: var(--responsive-container-padding-x)
  • py-section → padding-block: var(--responsive-section-padding-y)
  • gap-section-title-xl/lg/md/sm → corresponding --responsive-section-title-gap-* variables

New `useResolvedCssVarsResponsive` hook — like useResolvedCssVars but also re-reads on window.resize, for tokens whose values change at breakpoints.

New `copyTailwindClass` helper — writes a Tailwind class name to clipboard with a toast.

Tokens layout (app/tokens/layout.tsx) — wraps the tokens subtree in <TooltipProvider>.

Added scripts/generate-icon-names.ts and a generate:icons npm script to regenerate app/_icons/icon-names.ts from the installed @luminpdf/icons package.

Added min-h-8 (32px) to every interactive item in the five menu-family components so that single-line rows maintain a consistent touch target regardless of content, matching the Figma DS spec (EXP-70).

ComponentSub-elements updated
ComboboxComboboxItem
CommandCommandItem
ContextMenuContextMenuItem, ContextMenuSubTrigger, ContextMenuCheckboxItem, ContextMenuRadioItem
DropdownMenuDropdownMenuItem, DropdownMenuSubTrigger, DropdownMenuCheckboxItem, DropdownMenuRadioItem
MenubarMenubarItem, MenubarSubTrigger, MenubarCheckboxItem, MenubarRadioItem

No API changes — min-h-8 is purely additive and does not override explicit h-* classes passed via className.

  • Added MenubarItem, MenubarCheckboxItem, MenubarRadioItem, MenubarSubTrigger node mappings to scripts/figma-registry.ts for upcoming design-parity coverage.
  • Renamed CSS variables from --components-card-{hue} / --components-card-{hue}-foreground to `--card-{hue}` / `--card-{hue}-foreground`.
  • Tailwind utilities are now bg-card-{hue} and text-card-{hue}-foreground (e.g. bg-card-blue, text-card-blue-foreground). Migrate any var(--components-card-…) or bg-components-card-* usages.
  • Semantic shadcn tokens `--card` / `--card-foreground` and utilities `bg-card` / `text-card-foreground` are unchanged.
  • Added 34 --components-card-{hue} / --components-card-{hue}-foreground pairs (17 hues). Superseded in 0.2.4 by --card-{hue} naming.
  • Registered all 34 in @theme inline so Tailwind utilities like bg-components-card-blue work out of the box. Superseded in 0.2.4 by bg-card-blue.
  • Added ComponentCardsSection to the tokens reference page, showing bg/fg swatch pairs for all 17 hues.
  • Replaced Radix AvatarPrimitive with a single <img> element and local AvatarContext for loading-status coordination, preventing duplicate requests for uncacheable URLs (e.g. signed S3 URLs).
  • Updated surface tokens, max width, typography, arrow color, and Kbd shortcut styling to match DS-shadcn-001 node 17103:809.
  • Updated tooltip/legend styling to match DS-shadcn-001 node 533:8856; added registry, docs, playground, Storybook, E2E, and design-parity wiring.
  • Registered Toggle node mappings for DS-shadcn-001 node 21133:11461; added playground/docs/story/E2E/design-parity wiring.
  • Added Figma state registry mappings for DS-shadcn-001 node 18684:85575, plus docs, playground, Storybook, E2E, and design-parity wiring.
  • Updated toast container, action/cancel controls, and icon sizing to match DS-shadcn-001 nodes 18482:48401, 17375:198044, and 17375:198096.
  • Updated backdrop, side dimensions, spacing, and close icon states to match DS-shadcn-001 node 220:4633.
  • Updated Table header/cell API for Figma state/variant parity; replaced Data Table node mappings with 190:901, 23177:2258, and 17089:45580.
  • Added Field component Figma registry, docs, playground, Storybook, E2E, and design-parity wiring.
  • Bumped version to 0.2.2. Updated peerDependencies and registry metadata.
  • Initial 0.2.x publish with updated registry and peer dependency declarations.
  • Added AI Elements section to the main navigation and documentation layout.
  • Added initial AI Elements component library with example patterns for AI-powered UIs.
  • Improved registry build pipeline and component export verification.
  • Renamed all custom design token CSS variables to use the --custom-* prefix.
  • Updated theme.css and all consumer usages accordingly.
  • Added scripts/design-parity tooling for automated Figma-to-code comparison.
  • Removed unused registry entries and standardised component registration format.
  • Added LOCAL_PUBLISH_GUIDE.md with step-by-step instructions for local package publishing.
  • Registry now exports all UI components via a wildcard pattern for easier consumption.
  • Added 24 previously unregistered components to the registry.
  • Introduced the ai-elements package with initial set of AI-focused UI primitives.
  • Replaced inline SVG icons in AI Elements with @luminpdf/icons imports.
  • Configured AI Elements for npm publishing and registry inclusion.
  • Fixed tab line indicator position regression introduced in 0.1.0.
  • Updated Tabs styling to match Figma DS-shadcn-001 specification.
  • Removed backdrop-blur from Dialog overlay per updated Figma spec.
  • Moved the consumer-facing guide to README.md so it appears on the npm package page.
  • Final pre-publish cleanup: verified registry, exports, and peer dependencies.