Skip to content

Canopy 0.2.0

Latest
Latest

Choose a tag to compare

View all tags
@mattmaynes mattmaynes released this 28 Jun 14:43
0.2.0
5c794ba
This commit was created on GitHub.com and signed with GitHub’s verified signature.
GPG key ID: B5690EEEBB952194
Verified
Learn about vigilant mode.

The Branches layer (organisms) is here. This release opens a new @rogueoak/canopy/branches subpath and ships its first three components — Dialog, TopNav, and SideNav — each composing existing Seeds and Twigs, themed entirely through the token layer (light/dark, no per-component theme code).

Lockstep release: @rogueoak/roots and @rogueoak/canopy both publish at 0.2.0.

✨ New: the Branches layer

  • Dialog — a portalled, focus-trapping modal on @radix-ui/react-dialog (trigger / content with a built-in close / header / footer / title / description). Reuses the pre-provisioned color-overlay scrim and the raised-surface pattern; Esc / overlay / close-button dismiss; reduced-motion-safe.
  • TopNav — a responsive top navigation bar (TopNav / Brand / Links / Link / Actions / MenuButton). Links collapse behind a ☰ disclosure below md with aria-expanded / aria-controls, Esc + outside-click dismiss, and focus-return. active links set aria-current="page" in lockstep with styling.
  • SideNav — a collapsible side rail (SideNav / Header / Footer / Section / Item / Trigger / CollapseToggle + a useSideNavCollapsed() hook). Desktop collapses to an icon rail (labels move into Tooltips); below 768px it becomes an off-canvas drawer (built on the Radix dialog primitive — focus trap, scrim, slide-in motion, visible close button). Renders the nav landmark once.

🎨 Roots (@rogueoak/roots@0.2.0)

  • The Tailwind preset now ships overlay/drawer motion utilities (animate-dialog-*, animate-drawer-*), composed from the existing --duration-* / --ease-* tokens — so animation travels with the preset every consumer already imports (no extra wiring). Adds no new design token.

📦 Install

npm i @rogueoak/canopy@0.2.0 @rogueoak/roots@0.2.0
import { Dialog, DialogTrigger, DialogContent, DialogTitle } from '@rogueoak/canopy/branches';
import { TopNav, TopNavBrand, TopNavLink } from '@rogueoak/canopy/branches';
import { SideNav, SideNavItem, SideNavSection } from '@rogueoak/canopy/branches';

No styling-seam change — the existing @source '@rogueoak/canopy' already covers the new files.

🧩 What's in this release

  • Dialog + Branches layer infra (#29, spec 0024)
  • TopNav (#30, spec 0025)
  • SideNav (#31, spec 0026)

Full changelog: 0.1.2...0.2.0

Assets 2
Loading