-
-
{user?.email}
+
-
- Search TanStack
-
-
- Search TanStack and open TanStack AI from the current query.
-
-
+
+
+
+
-
-
-
-
-
-
-
- ) : null}
-
-
+ Add up to five npm packages to chart their download trends together.
- + ) diff --git a/src/components/ds/overlay-audit/ProductDrawerSpecimen.tsx b/src/components/ds/overlay-audit/ProductDrawerSpecimen.tsx index e56be6664..ae8ea80de 100644 --- a/src/components/ds/overlay-audit/ProductDrawerSpecimen.tsx +++ b/src/components/ds/overlay-audit/ProductDrawerSpecimen.tsx @@ -7,7 +7,7 @@ import type { SpecimenProps } from './types' * AUDIT SPECIMEN — verbatim shell of `src/components/shop/ProductDrawer.tsx`. * * The only bottom-sheet posture on the site, and hand-rolled rather than - * Radix: the Escape handler below is copied from the original because there is + * Base UI: the Escape handler below is copied from the original because there is * no primitive supplying it. Uses three separate z-tiers (`60` scrim, `70` * sheet, `71` side arrows) and is the one overlay already wired to the motion * tokens (`--motion-duration-fast`, `--motion-ease-standard`). @@ -60,7 +60,8 @@ export function ProductDrawerSpecimen({ open, onOpenChange }: SpecimenProps) {Classic Tee
A bottom-anchored sheet. Note there is no focus trap and no - focus restoration on close — both would come free from Radix. + focus restoration on close — both come free from the DS Drawer + it was migrated onto.
- Single Package
-
- {presets
- .filter((p) => p.category === 'single')
- .map((preset) => (
-
+ Single Package
+
+ {presets
+ .filter((p) => p.category === 'single')
+ .map((preset) => (
+
- Equal-Weighted Index
-
- {presets
- .filter((p) => p.category === 'index')
- .map((preset) => (
-
- {preset.title}
-
-
- {preset.description}
-
-
- {preset.packages.map((p) => (
-
{/* Time Range */}
-
-
- {p.name}
+ onApplyPreset(preset)}
+ className="w-full px-2 py-2 text-left text-sm rounded hover:bg-gray-500/10 outline-none cursor-pointer"
+ >
+
-
- ))}
-
-
+
+ ))}
+
+
+
+
)
return (
diff --git a/src/components/npm-stats/ChartControls.tsx b/src/components/npm-stats/ChartControls.tsx
index 1798f2d86..6fb7c1484 100644
--- a/src/components/npm-stats/ChartControls.tsx
+++ b/src/components/npm-stats/ChartControls.tsx
@@ -13,12 +13,7 @@ import {
WavesIcon,
type Icon,
} from '@phosphor-icons/react'
-import {
- DropdownMenu,
- DropdownMenuContent,
- DropdownMenuItem,
- DropdownMenuTrigger,
-} from '@radix-ui/react-dropdown-menu'
+import { Menu } from '@base-ui/react/menu'
import { Tooltip } from '~/components/Tooltip'
import {
type TimeRange,
@@ -156,75 +151,87 @@ export function ChartControls({
+ Equal-Weighted Index
+
+ {presets
+ .filter((p) => p.category === 'index')
+ .map((preset) => (
+
+ {preset.title}
+
+
+ {preset.description}
+
+
+ {preset.packages.map((p) => (
+
- ))}
-
+
+ {p.name}
+
+ ))}
- Time Range
-
- {timeRanges.map(({ value, label }) => (
-
+ Time Range
+
+ {timeRanges.map(({ value, label }) => (
+
- Binning Interval
-
- {binningOptions.map(({ label, value }) => (
-
+ Binning Interval
+
+ {binningOptions.map(({ label, value }) => (
+
@@ -309,7 +316,7 @@ export function ChartControls({
) : null}
{/* Y-Axis Transform */}
-
+
-
-
-
+
+ {transformOptions.find((opt) => opt.value === transform)?.label}
+
+ }
+ />
-
- onTransformChange(value)}
- disabled={!canUseTransform}
- className={twMerge(
- dropdownItemStyles,
- transform === value ? 'text-blue-500 bg-blue-500/10' : '',
- 'data-highlighted:bg-gray-500/20 data-highlighted:text-blue-500',
- !canUseTransform ? 'opacity-50 cursor-not-allowed' : '',
- )}
- >
- {label}
-
- ))}
-
-
+
+
+
+ onTransformChange(value)}
+ disabled={!canUseTransform}
+ className={twMerge(
+ dropdownItemStyles,
+ transform === value ? 'text-blue-500 bg-blue-500/10' : '',
+ 'data-highlighted:bg-gray-500/20 data-highlighted:text-blue-500',
+ !canUseTransform ? 'opacity-50 cursor-not-allowed' : '',
+ )}
+ >
+ {label}
+
+ ))}
+
+
+
+
{/* Show Data Mode */}
-
+
-
-
-
+
+ {
+ showDataModeOptions.find((opt) => opt.value === showDataMode)
+ ?.label
+ }
+
+ }
+ />
-
- onShowDataModeChange(value)}
- disabled={showDataModeDisabled}
- className={twMerge(
- dropdownItemStyles,
- showDataMode === value ? 'text-blue-500 bg-blue-500/10' : '',
- 'data-highlighted:bg-gray-500/20 data-highlighted:text-blue-500',
- showDataModeDisabled ? 'opacity-50 cursor-not-allowed' : '',
- )}
- >
- {label}
-
- ))}
-
-
+
+
+
+ onShowDataModeChange(value)}
+ disabled={showDataModeDisabled}
+ className={twMerge(
+ dropdownItemStyles,
+ showDataMode === value
+ ? 'text-blue-500 bg-blue-500/10'
+ : '',
+ 'data-highlighted:bg-gray-500/20 data-highlighted:text-blue-500',
+ showDataModeDisabled ? 'opacity-50 cursor-not-allowed' : '',
+ )}
+ >
+ {label}
+
+ ))}
+
+
+
+
)
}
diff --git a/src/components/npm-stats/LatestBucketNavigator.tsx b/src/components/npm-stats/LatestBucketNavigator.tsx
index 4e5ec404b..a7e17f5fc 100644
--- a/src/components/npm-stats/LatestBucketNavigator.tsx
+++ b/src/components/npm-stats/LatestBucketNavigator.tsx
@@ -10,12 +10,7 @@ import {
PauseIcon,
PlayIcon,
} from '@phosphor-icons/react'
-import {
- DropdownMenu,
- DropdownMenuContent,
- DropdownMenuItem,
- DropdownMenuTrigger,
-} from '@radix-ui/react-dropdown-menu'
+import { Menu } from '@base-ui/react/menu'
import {
binningOptionsByType,
getLatestBucketOffsetBounds,
@@ -252,74 +247,80 @@ export function LatestBucketNavigator({
-
-
-
-
- onPlaybackIntervalChange(option.intervalMs)}
- >
-
- ))}
- onLoopingChange(!isLooping)}
+
+
-
-
-
+
+ onPlaybackIntervalChange(option.intervalMs)}
+ >
+
+ ))}
+ onLoopingChange(!isLooping)}
+ >
+
+
+
+
+
- Y-Axis Transform
-
- {transformOptions.map(({ value, label }) => (
-
+ Y-Axis Transform
+
+ {transformOptions.map(({ value, label }) => (
+
- Data Display Mode
-
- {showDataModeOptions.map(({ value, label }) => (
-
+ Data Display Mode
+
+ {showDataModeOptions.map(({ value, label }) => (
+
- Playback Speed
-
- {playbackSpeedOptions.map((option) => (
-
-
- event.stopPropagation()}
- step={1}
- type="number"
- value={playbackIntervalInput}
- />
-
-
-
+ Playback Speed
+
+ {playbackSpeedOptions.map((option) => (
+
+
+ event.stopPropagation()}
+ step={1}
+ type="number"
+ value={playbackIntervalInput}
+ />
+
+
+
-
+
-
-
-
-
-
- onExport(value)}
+ type="button"
>
- {label}
-
- ))}
-
-
+
+
+
+ onExport(value)}
+ >
+ {label}
+
+ ))}
+
+
+
+
+
-
-
-
-
-
-
- Export
-
- {chartExportOptions
- .filter(
- ({ value }) =>
- canExportAnimation || !isAnimatedExportFormat(value),
- )
- .map(({ label, value }) => (
-
+ Export
+
+ {chartExportOptions
+ .filter(
+ ({ value }) =>
+ canExportAnimation || !isAnimatedExportFormat(value),
+ )
+ .map(({ label, value }) => (
+
-
-
-
-
+
+
Deploy to production
Deploy a preview
@@ -368,15 +370,17 @@ function ButtonsPage() {
-
-
-
+
+
Deploy to production
Deploy a preview
diff --git a/src/routes/ds.cards.tsx b/src/routes/ds.cards.tsx
index 142362079..8238aea5e 100644
--- a/src/routes/ds.cards.tsx
+++ b/src/routes/ds.cards.tsx
@@ -158,7 +158,7 @@ function CardsPage() {
diff --git a/src/routes/ds.dialog.tsx b/src/routes/ds.dialog.tsx
index 4a1172972..9ea6897cf 100644
--- a/src/routes/ds.dialog.tsx
+++ b/src/routes/ds.dialog.tsx
@@ -27,7 +27,7 @@ export const Route = createFileRoute('/ds/dialog')({
meta: seo({
title: 'Dialog | TanStack Design System',
description:
- 'The centered modal dialog — Radix-backed, on the semantic token layer.',
+ 'The centered modal dialog — Base UI-backed, on the semantic token layer.',
}),
}),
})
@@ -116,7 +116,7 @@ function DialogPage() {
return (
…
-
-
-
+ Cancel
+ }
+ />
@@ -155,11 +157,13 @@ function DialogPage() {
-
-
-
+
+ Cancel
+
+ }
+ />
@@ -196,9 +200,7 @@ function DialogPage() {
-
-
-
+ Close} />
@@ -235,11 +237,13 @@ function DialogPage() {
))}
-
-
-
+
+ Decline
+
+ }
+ />
@@ -255,9 +259,11 @@ function DialogPage() {
code={`
-
-
-
+ Cancel
+ }
+ />
`}
@@ -272,11 +278,13 @@ function DialogPage() {
description="Are you sure you want to remove this user from the role? This cannot be undone."
/>
-
-
-
+
+ Cancel
+
+ }
+ />
@@ -440,7 +448,7 @@ function DialogPage() {
-
-
-
+ Checkout} />
@@ -334,7 +332,7 @@ function DrawerPage() {
`}
>
-
-
-
+
+ Account
`}
>
-
-
-
+
+ Pick a library
{SCROLL_ITEMS.map((label) => (
{label}
diff --git a/src/routes/ds.iconography.lazy.tsx b/src/routes/ds.iconography.lazy.tsx
index 5f810d914..96a958a71 100644
--- a/src/routes/ds.iconography.lazy.tsx
+++ b/src/routes/ds.iconography.lazy.tsx
@@ -97,13 +97,15 @@ function IconographyPage() {
-
-
- Embed chart
-
-
-
- Show legend by default
-
-
- Include current timeline zoom
-
-
- Lock current chart width
-
-
-
-
-
-
-
- URL
- {
- void copyText('url', embedUrl)
- }}
- />
-
-
-
-
-
-
+
+
+
+
)
}
diff --git a/src/components/npm-stats/PackagePills.tsx b/src/components/npm-stats/PackagePills.tsx
index f073c9541..f0285ec8a 100644
--- a/src/components/npm-stats/PackagePills.tsx
+++ b/src/components/npm-stats/PackagePills.tsx
@@ -7,12 +7,7 @@ import {
EyeSlashIcon,
DotsThreeVerticalIcon,
} from '@phosphor-icons/react'
-import {
- DropdownMenu,
- DropdownMenuContent,
- DropdownMenuItem,
- DropdownMenuTrigger,
-} from '@radix-ui/react-dropdown-menu'
+import { Menu } from '@base-ui/react/menu'
import { Tooltip } from '~/components/Tooltip'
import {
type PackageGroup,
@@ -127,151 +122,155 @@ export function PackagePill({
{/* Advanced dropdown menu (main page only) */}
{showAdvancedMenu && (
-
- Iframe
-
- {
- void copyText('iframe', iframeCode)
- }}
- />
+
+
+
+
-
+
-
-
+
+
+ Embed chart
+
+
+
+ Show legend by default
+
+
+ Include current timeline zoom
+
+
+ Lock current chart width
+
+
+
+
+
+
+
+
+ URL
+
+ {
+ void copyText('url', embedUrl)
+ }}
+ />
+
+
+
+
+
+ Iframe
+
+ {
+ void copyText('iframe', iframeCode)
+ }}
+ />
+
+
+
-
onMenuOpenChange(mainPackage.name, open)
}
>
-
-
-
+
+
-
-
)}
diff --git a/src/components/shop/ProductDrawer.tsx b/src/components/shop/ProductDrawer.tsx
index 6c7716d42..6525c3bbb 100644
--- a/src/components/shop/ProductDrawer.tsx
+++ b/src/components/shop/ProductDrawer.tsx
@@ -228,7 +228,7 @@ export function ProductDrawer({
{allHandles.length > 1 ? (
<>
- {/* Anchored to the panel, not the viewport. Radix traps focus
+ {/* Anchored to the panel, not the viewport. Base UI traps focus
inside the panel, so viewport-level siblings would be
unreachable by keyboard — and it retires the third z-tier the
overlay audit flagged. */}
diff --git a/src/routes/ds.buttons.tsx b/src/routes/ds.buttons.tsx
index d90248302..db838fe48 100644
--- a/src/routes/ds.buttons.tsx
+++ b/src/routes/ds.buttons.tsx
@@ -351,11 +351,13 @@ function ButtonsPage() {
code={`
- Options
-
-
- {onLabelChange && (
-
+
+
+
+
-
-
-
+ -
diff --git a/src/routes/ds.drawer.tsx b/src/routes/ds.drawer.tsx
index 0b6f3c80e..ce346bb4a 100644
--- a/src/routes/ds.drawer.tsx
+++ b/src/routes/ds.drawer.tsx
@@ -22,7 +22,7 @@ export const Route = createFileRoute('/ds/drawer')({
meta: seo({
title: 'Drawer | TanStack Design System',
description:
- 'The edge-anchored panel — right, left and bottom, on one Radix foundation.',
+ 'The edge-anchored panel — right, left and bottom, on one Base UI foundation.',
}),
}),
})
@@ -41,7 +41,7 @@ function DrawerPage() {
return (
-
{[
'The panel slides only — no fade. The scrim fades.',
- 'Exit animations play: Radix Presence waits for animationend before unmounting.',
+ 'Exit animations play: Base UI waits for the animation to finish before unmounting.',
'prefers-reduced-motion removes the movement but keeps the state change.',
'Bottom is centred with auto margins rather than a translate, so transform stays free for the slide — Tailwind v4 compiles -translate-x-1/2 to the independent translate property, which composes with transform rather than being replaced by it.',
].map((line) => (
diff --git a/src/routes/ds.dropdown.tsx b/src/routes/ds.dropdown.tsx
index b82d39f2b..4ae60dcd9 100644
--- a/src/routes/ds.dropdown.tsx
+++ b/src/routes/ds.dropdown.tsx
@@ -21,7 +21,7 @@ export const Route = createFileRoute('/ds/dropdown')({
head: () => ({
meta: seo({
title: 'Dropdown | TanStack Design System',
- description: 'The Radix-powered Dropdown menu.',
+ description: 'The Base UI-powered Dropdown menu.',
}),
}),
})
@@ -50,7 +50,7 @@ function DropdownPage() {
return (
{/* Style (weight) — dropdown with a live preview per weight */}
-
-
-
+
+
{WEIGHTS.map((w) => (
setWeight(w)}>
@@ -119,13 +121,15 @@ function IconographyPage() {
{/* Size — dropdown with a scaling size glyph per option */}
-
-
-
+
+
{SIZES.map((s) => (
setSize(s)}>
diff --git a/src/routes/ds.overlays.tsx b/src/routes/ds.overlays.tsx
index c27a91afd..a027316e5 100644
--- a/src/routes/ds.overlays.tsx
+++ b/src/routes/ds.overlays.tsx
@@ -109,7 +109,7 @@ function OverlayAuditPage() {
{s.name}
{s.base === 'hand-rolled' ? (
raw
@@ -126,7 +126,7 @@ function OverlayAuditPage() {
diff --git a/src/routes/ds.tabs.tsx b/src/routes/ds.tabs.tsx
index 943be1208..c498788e8 100644
--- a/src/routes/ds.tabs.tsx
+++ b/src/routes/ds.tabs.tsx
@@ -79,13 +79,15 @@ function SizeSelector({
const current = TAB_SIZES.find((s) => s.value === value) ?? TAB_SIZES[1]
return (