Skip to content

feat(headless): add cssVars middleware and Tooltip primitive#8477

Open
alexcarpenter wants to merge 7 commits into
carp/headless-tabsfrom
carp/headless-tooltip
Open

feat(headless): add cssVars middleware and Tooltip primitive#8477
alexcarpenter wants to merge 7 commits into
carp/headless-tabsfrom
carp/headless-tooltip

Conversation

@alexcarpenter
Copy link
Copy Markdown
Member

@alexcarpenter alexcarpenter commented May 5, 2026

Summary

  • Adds cssVars Floating UI middleware exposing --cl-anchor-width, --cl-available-height, --cl-transform-origin as CSS custom properties
  • Adds Tooltip primitive with hover/focus triggers, configurable delay, and FloatingDelayGroup support

Review Stack

Review order — start at #8474 (foundation) and work up. Each PR adds one primitive on top of the previous.

# PR What it adds Base
1 #8474 Foundation (infra + hooks + utils + Dialog) main
2 #8475 Accordion #8474
3 #8476 Tabs #8475
4 #8477 cssVars + Tooltip #8476
5 #8478 Popover #8477
6 #8479 Select #8478
7 #8480 Menu #8479
8 #8481 Autocomplete + integration tests #8480

Test plan

  • pnpm build succeeds
  • pnpm test passes (+26 tooltip, +14 cssVars tests)
  • CI passes

🤖 Generated with Claude Code

@changeset-bot
Copy link
Copy Markdown

changeset-bot Bot commented May 5, 2026

⚠️ No Changeset found

Latest commit: da71e49

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

@vercel
Copy link
Copy Markdown

vercel Bot commented May 5, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
clerk-js-sandbox Error Error Jun 3, 2026 5:33pm

Request Review

@alexcarpenter alexcarpenter force-pushed the carp/headless-tooltip branch from 2316ca7 to 144f752 Compare May 5, 2026 15:26
@alexcarpenter alexcarpenter force-pushed the carp/headless-tooltip branch from 144f752 to 8c0b810 Compare May 5, 2026 15:39
@alexcarpenter alexcarpenter force-pushed the carp/headless-tooltip branch from 8c0b810 to 6a80c95 Compare May 5, 2026 15:49
@alexcarpenter alexcarpenter force-pushed the carp/headless-tooltip branch from 6a80c95 to c190d6f Compare May 5, 2026 18:38
@alexcarpenter alexcarpenter force-pushed the carp/headless-tooltip branch from c190d6f to db49302 Compare June 3, 2026 17:09
@alexcarpenter alexcarpenter force-pushed the carp/headless-tooltip branch from db49302 to a01dab9 Compare June 3, 2026 17:19
@alexcarpenter alexcarpenter force-pushed the carp/headless-tooltip branch from a01dab9 to 64c21e3 Compare June 3, 2026 17:23
Introduces the @clerk/headless package — a zero-style React component
library providing accessible headless UI primitives. This first PR
establishes the core infrastructure and patterns:

- Package scaffold: Vite build, Vitest browser tests (Chromium), TypeScript config
- Core utils: renderElement (polymorphic rendering with render prop support),
  mergeProps (event handler chaining, style/className merging)
- Hooks: useControllableState, useTransitionStatus, useAnimationsFinished, useTransition
- First primitive: Dialog (modal with focus trapping, scroll lock, portal support)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
alexcarpenter and others added 6 commits June 3, 2026 13:32
Introduces the @clerk/headless package — a zero-style React component
library providing accessible headless UI primitives. This first PR
establishes the core infrastructure and patterns:

- Package scaffold: Vite build, Vitest browser tests (Chromium), TypeScript config
- Core utils: renderElement (polymorphic rendering with render prop support),
  mergeProps (event handler chaining, style/className merging)
- Hooks: useControllableState, useTransitionStatus, useAnimationsFinished, useTransition
- First primitive: Dialog (modal with focus trapping, scroll lock, portal support)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Introduces the @clerk/headless package — a zero-style React component
library providing accessible headless UI primitives. This first PR
establishes the core infrastructure and patterns:

- Package scaffold: Vite build, Vitest browser tests (Chromium), TypeScript config
- Core utils: renderElement (polymorphic rendering with render prop support),
  mergeProps (event handler chaining, style/className merging)
- Hooks: useControllableState, useTransitionStatus, useAnimationsFinished, useTransition
- First primitive: Dialog (modal with focus trapping, scroll lock, portal support)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant