diff --git a/apps/docs/src/components/alert.stories.tsx b/apps/docs/src/components/alert.stories.tsx index 7abd7bc..919734c 100644 --- a/apps/docs/src/components/alert.stories.tsx +++ b/apps/docs/src/components/alert.stories.tsx @@ -31,6 +31,12 @@ const meta = { } }, parameters: { + docs: { + description: { + component: + "Alert is the inline callout surface for status, guidance, and blocking information that should stay inside the current page flow. It now enters with a restrained rise/fade and uses a softly plated icon treatment so state changes feel present without turning the component into a hero panel." + } + }, layout: "centered" }, tags: ["autodocs"] diff --git a/apps/docs/src/components/avatar.stories.tsx b/apps/docs/src/components/avatar.stories.tsx index d3c0cff..5f00882 100644 --- a/apps/docs/src/components/avatar.stories.tsx +++ b/apps/docs/src/components/avatar.stories.tsx @@ -30,6 +30,12 @@ const meta = { } }, parameters: { + docs: { + description: { + component: + "Avatar is the compact identity surface for people, teams, and owners. The treatment stays quiet, but the image now resolves over the fallback with a soft crossfade so identity changes feel polished instead of abrupt." + } + }, layout: "centered" }, tags: ["autodocs"] diff --git a/apps/docs/src/components/badge.stories.tsx b/apps/docs/src/components/badge.stories.tsx index 5ee265c..50c957d 100644 --- a/apps/docs/src/components/badge.stories.tsx +++ b/apps/docs/src/components/badge.stories.tsx @@ -34,6 +34,12 @@ const meta = { } }, parameters: { + docs: { + description: { + component: + "Badge is the smallest status and chip surface in the system. It still reads as a compact token, but subtle and outline badges now carry a lighter tactile response so filter-like and live-status usage stops feeling mechanically flat." + } + }, layout: "centered" }, tags: ["autodocs"] @@ -70,3 +76,40 @@ export const Matrix: Story = { ) }; + +export const LiveAndFilters: Story = { + parameters: { + docs: { + description: { + story: + "Use `Badge` as a small status token by default, and as a tactile chip when it is rendered through `asChild` on an actual interactive element. The motion should stay restrained and chip-like, not button-heavy." + } + } + }, + render: () => ( +
+
+ Live + Reviewing + Forecast +
+
+ + + + + + + + + +
+
+ ) +}; diff --git a/apps/docs/src/components/card.stories.tsx b/apps/docs/src/components/card.stories.tsx index 372f484..df6b501 100644 --- a/apps/docs/src/components/card.stories.tsx +++ b/apps/docs/src/components/card.stories.tsx @@ -1,4 +1,12 @@ -import { Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@ai-ui/ui"; +import { + Button, + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle +} from "@ai-ui/ui"; import type { Meta, StoryObj } from "@storybook/react"; const meta = { @@ -6,7 +14,7 @@ const meta = { component: Card, args: { tone: "default", - interactive: false + interactive: true }, argTypes: { className: { @@ -21,6 +29,12 @@ const meta = { } }, parameters: { + docs: { + description: { + component: + "Card is the base slab surface for panels, compact workflows, and supporting information blocks. It now defaults to a gentle interactive lift so common business cards feel alive by default, while `interactive={false}` remains available for deliberately static surfaces." + } + }, layout: "centered" }, tags: ["autodocs"] @@ -34,22 +48,61 @@ export const Playground: Story = { render: (args) => ( - Release card - Summarize state, ownership, and next action. + Routing overview + Keep status, ownership, and the next action in one calm surface. - This surface is tuned for editorial dashboards and settings views. + This base card now carries a light hover lift by default so common workflow slabs do not + feel inert. - + ) }; +export const States: Story = { + parameters: { + docs: { + description: { + story: + "Use the default interactive treatment for navigable or actionable slabs, and opt out only when the card is meant to behave like a static document section." + } + } + }, + render: () => ( +
+ + + Default interactive + Gentle lift and internal light cue for most business cards. + + Good for dashboards, queues, and next-step summaries. + + + + + Static document slab + Opt out when the surface should read as anchored reference content. + + Useful for long-form notes, legal copy, and passive explanations. + + + + + Accent emphasis + Carry the same motion language while keeping the tonal emphasis richer. + + Use when the card itself is part of the call to action. + +
+ ) +}; + export const Grid: Story = { render: () => (
@@ -80,11 +133,11 @@ export const Grid: Story = { Default tone - Standard elevated panel for data and form sections. + Standard elevated panel with the new default hover cue. Reliable baseline for most admin surfaces. - + Interactive accent Hover-capable treatment for navigable cards. diff --git a/apps/docs/src/components/combobox.stories.tsx b/apps/docs/src/components/combobox.stories.tsx index b74fe58..ead1508 100644 --- a/apps/docs/src/components/combobox.stories.tsx +++ b/apps/docs/src/components/combobox.stories.tsx @@ -222,6 +222,12 @@ const meta = { title: "Components/Combobox", component: ControlledDemo, parameters: { + docs: { + description: { + component: + "Combobox is the searchable single-select surface for longer option sets, recent picks, and async lookup flows. The list should feel gently staged as results appear, with active rows gliding into place instead of snapping." + } + }, layout: "centered" }, tags: ["autodocs"] @@ -240,6 +246,14 @@ export const RecentAndSuggested: Story = { }; export const AsyncResults: Story = { + parameters: { + docs: { + description: { + story: + "Async comboboxes should crossfade between loading, empty, and result states. Keep the motion short and directional so the user understands the state change without losing the current context." + } + } + }, render: () => }; diff --git a/apps/docs/src/components/command.stories.tsx b/apps/docs/src/components/command.stories.tsx index af06b54..d25e979 100644 --- a/apps/docs/src/components/command.stories.tsx +++ b/apps/docs/src/components/command.stories.tsx @@ -42,7 +42,18 @@ function InlineCommandShowcase() { {group.items.map((item) => ( - {item.label} + + {item.label} + + {item.value === "open-docs" + ? "Jump into authoring guidance, slots, and motion references." + : item.value === "go-releases" + ? "Open the current release desk and recent launch notes." + : item.value === "publish-update" + ? "Queue the current workspace update for approval." + : "Assign the next reviewer without leaving the palette."} + + {item.shortcut} ))} @@ -77,22 +88,42 @@ function OperationsWorkbenchShowcase() { No matching actions. - Launch review + + Launch review + + Reopen the last routed launch brief and approvals queue. + + R - Blocked queue + + Blocked queue + + Inspect stalled items, owners, and next unblock steps. + + B - Open Storybook docs + + Open Storybook docs + + Review the live component contract and interaction stories. + + G D - Compliance review locked + + Compliance review locked + + This action unlocks after policy artifacts finish syncing. + + Locked @@ -127,18 +158,49 @@ function DialogCommandShowcase() { No commands available. - Launch checklist - Rollout audit - Brand theme tokens + + + Launch checklist + + Open the current milestone handoff and owner checklist. + + + + + + Rollout audit + + Review timing, communications, and incident readiness. + + + + + + Brand theme tokens + + Jump to the token surface that controls tonal palette shifts. + + + - Jordan Lee + + Jordan Lee + + Product lead for launch sequencing and review coordination. + + @ - Avery Carter + + Avery Carter + + Owns release notes, docs framing, and approval summaries. + + @ @@ -152,6 +214,16 @@ function LoadingResultsShowcase() { return ( +

+ Cached suggestions stay visible while the workspace search refreshes. +

+ +
+ } label="Remote workspace search" loading loadingMessage="Searching remote workspace actions…" @@ -159,6 +231,24 @@ function LoadingResultsShowcase() { No commands available. + + + + Launch checklist + + Reopen the previous launch checklist while fresh results stream in. + + + + + + Review queue + + Keep the last known reviewer list visible during the remote refresh. + + + + ); @@ -168,6 +258,12 @@ const meta = { title: "Components/Command", component: InlineCommandShowcase, parameters: { + docs: { + description: { + component: + "Command is the system surface for in-app palettes and quick action search. The highlighted row should feel adhesive and spatial, with enough motion to clarify focus and loading state without turning the palette into a busy animation surface." + } + }, layout: "centered" }, tags: ["autodocs"] @@ -190,5 +286,13 @@ export const DialogPalette: Story = { }; export const LoadingResults: Story = { + parameters: { + docs: { + description: { + story: + "Loading should not feel like a hard swap. Keep a soft status band at the top, let cached results dim underneath, and preserve the same highlighted-row motion language." + } + } + }, render: () => }; diff --git a/apps/docs/src/components/data-table.stories.tsx b/apps/docs/src/components/data-table.stories.tsx index deaa55d..26458fb 100644 --- a/apps/docs/src/components/data-table.stories.tsx +++ b/apps/docs/src/components/data-table.stories.tsx @@ -189,15 +189,15 @@ const routingColumns: DataTableColumn[] = [ function SignalGlyph() { return ( -
-
- - - +
+
+ + +
- - + +
); @@ -244,7 +244,7 @@ function RoutingEmptyState({ onReset }: { onReset: () => void }) { function RoutingLaneDetail({ row }: { row: RoutingLaneRow }) { return (
-
+
{row.state} @@ -260,14 +260,14 @@ function RoutingLaneDetail({ row }: { row: RoutingLaneRow }) {
-
+

Owner

{row.owner}

{row.ownerEmail}

-
+

Next gate

@@ -307,8 +307,8 @@ function DataTablePlayground() { } return ( -
-
+
+

Standalone workflow @@ -321,7 +321,7 @@ function DataTablePlayground() { exercising built-in search, sorting, pagination, selection, and toolbar actions.

-
+

Last action

@@ -329,7 +329,7 @@ function DataTablePlayground() {
-
+
+
row.id} @@ -448,7 +448,7 @@ function DataTableLoadingState() { function DataTableEmptyStateDemo() { return ( -
+
undefined} />} @@ -475,7 +475,7 @@ const meta = { docs: { description: { component: - "A production-style table primitive with built-in search, sorting, pagination, row selection, and external toolbar actions. This standalone page isolates the component from the larger workspace scene while keeping a realistic routing-desk narrative." + "A production-style table primitive with built-in search, sorting, pagination, row selection, and external toolbar actions. This standalone page isolates the component from the larger workspace scene while keeping a realistic routing-desk narrative. Motion should stay calm: rows deepen slightly on hover, sort feedback stays crisp, selected surfaces feel staged instead of loud, and the surrounding control chrome stays mostly anchored instead of all lifting at once." } }, layout: "padded" diff --git a/apps/docs/src/components/empty-state.stories.tsx b/apps/docs/src/components/empty-state.stories.tsx index 3bd40ff..68fd3d8 100644 --- a/apps/docs/src/components/empty-state.stories.tsx +++ b/apps/docs/src/components/empty-state.stories.tsx @@ -9,13 +9,24 @@ import { EmptyStateTitle } from "@ai-ui/ui"; import type { Meta, StoryObj } from "@storybook/react"; +import type { ReactNode } from "react"; function EmptyStateGlyph() { return ( -
-
- - +
+
+ + +
+
+
+ + +
+
+ + +
@@ -25,11 +36,43 @@ function EmptyStateGlyph() { ); } +function WorkspaceSetupGlyph() { + return ( +
+
+
+ + +
+ + + +
+
+
+ + +
+
+ + +
+
+ + +
+
+
+ ); +} + function ReleaseEmptyState({ actionsLayout = "inline", align = "center", + className, description = "Adjust the current filters or create a new release to start routing work.", eyebrow = "No results", + glyph, layout = "default", mediaSize = "default", tone = "default", @@ -37,8 +80,10 @@ function ReleaseEmptyState({ }: { actionsLayout?: "inline" | "stack"; align?: "center" | "start"; + className?: string; description?: string; eyebrow?: string; + glyph?: ReactNode; layout?: "compact" | "default" | "split"; mediaSize?: "compact" | "default" | "hero"; title?: string; @@ -47,12 +92,14 @@ function ReleaseEmptyState({ return ( - + {glyph ?? } {eyebrow} @@ -140,8 +187,10 @@ export const SplitWorkspace: Story = {
} layout="split" mediaSize="hero" title="This command center needs its first operator" @@ -151,6 +200,42 @@ export const SplitWorkspace: Story = { ) }; +export const Motion: Story = { + parameters: { + docs: { + description: { + story: + "EmptyState keeps motion local to the decorative media and the call-to-action group. The slab itself stays anchored while the media drifts gently and the actions enter in a short sequence. In static motion mode those effects collapse back to near-instant feedback." + } + } + }, + render: () => ( +
+ + } + layout="split" + mediaSize="hero" + title="Invite the first operator to activate this command center" + tone="accent" + /> +
+ ) +}; + export const Anatomy: Story = { render: () => (
diff --git a/apps/docs/src/components/progress.stories.tsx b/apps/docs/src/components/progress.stories.tsx index 690c42f..79a26d3 100644 --- a/apps/docs/src/components/progress.stories.tsx +++ b/apps/docs/src/components/progress.stories.tsx @@ -1,10 +1,60 @@ import { Progress } from "@ai-ui/ui"; import type { Meta, StoryObj } from "@storybook/react"; +function ProgressCard({ + accent, + label, + note, + pattern = "linear", + segmentCount, + tone = "default", + value, + variant = "default" +}: { + accent: string; + label: string; + note: string; + pattern?: "linear" | "segmented"; + segmentCount?: number; + tone?: "default" | "subtle"; + value: number | null; + variant?: "default" | "success" | "warning" | "destructive"; +}) { + const displayValue = value == null ? "Syncing" : `${value}%`; + + return ( +
+
+
+

+ {label} +

+

{note}

+
+ {displayValue} +
+ +
+ ); +} + const meta = { title: "Components/Progress", component: Progress, args: { + pattern: "linear", + segmentCount: 24, size: "md", value: 64, variant: "default" @@ -17,6 +67,18 @@ const meta = { control: "radio", options: ["sm", "md", "lg"] }, + pattern: { + control: "radio", + options: ["linear", "segmented"] + }, + segmentCount: { + control: { + type: "range", + min: 6, + max: 36, + step: 1 + } + }, tone: { control: "radio", options: ["default", "subtle"] @@ -35,6 +97,12 @@ const meta = { } }, parameters: { + docs: { + description: { + component: + "Progress is the system's inline status channel for work that is actively advancing inside the current view. Use the default linear pattern for classic completion bars, or switch to the segmented pattern when a dashboard metric needs a more discrete meter like rollout targets, cost reduction goals, and operational scorecards." + } + }, layout: "centered" }, tags: ["autodocs"] @@ -45,35 +113,194 @@ export default meta; type Story = StoryObj; export const Playground: Story = { - render: (args) => + render: (args) => ( +
+
+
+

+ Asset Upload +

+

+ Publishing release visuals +

+

+ Use the same component for classic uploads and segmented dashboard meters by swapping + only the pattern instead of reaching for a separate one-off implementation. +

+
+ + {args.value}% + +
+ +
+ ) }; -export const Variants: Story = { +export const Patterns: Story = { render: () => ( -
- - - - +
+ + + + +
) }; export const States: Story = { render: () => ( -
-
-

Determinate

- -
-
-

Indeterminate

- -
-
-

Complete

- +
+ + + +
+ ) +}; + +export const Anatomy: Story = { + render: () => ( +
+
+
+

+ Progress anatomy +

+

+ The public styling contract stays intentionally small: a root track and one indicator + layer, with the data attributes carrying the meaningful state. +

+
+
+
+ + +
+
+
+

+ data-slot="root" is the tonal + track. It exposes data-size,{" "} + data-pattern,{" "} + data-tone,{" "} + data-variant, and{" "} + data-state so consumers can + respond to contract-level state instead of incidental class names. +

+

+ data-slot="indicator" is the + filled value layer for the linear pattern. It mirrors pattern, size, variant, and + state so tests and downstream themes can target the active bar without reaching into + private markup. +

+

+ In segmented mode, data-slot="segments"{" "} + wraps the repeated meter cells and each{" "} + data-slot="segment" exposes + active state for dashboard-style styling and assertions. +

+
) }; + +export const Motion: Story = { + parameters: { + docs: { + description: { + story: + "Determinate values should feel calm and weighted, with the filled slab scaling into place instead of animating layout width. Indeterminate progress keeps a restrained sweep in interactive mode, then falls back to a static reading when reduced or static motion is active." + } + } + }, + render: () => ( +
+ + + +
+ ) +}; diff --git a/apps/docs/src/components/select.stories.tsx b/apps/docs/src/components/select.stories.tsx index e9fe77e..ba867d3 100644 --- a/apps/docs/src/components/select.stories.tsx +++ b/apps/docs/src/components/select.stories.tsx @@ -1,4 +1,18 @@ -import { Field, FieldControl, FieldDescription, FieldError, Label, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue } from "@ai-ui/ui"; +import { + Field, + FieldControl, + FieldDescription, + FieldError, + Label, + Select, + SelectContent, + SelectGroup, + SelectItem, + SelectLabel, + SelectSeparator, + SelectTrigger, + SelectValue +} from "@ai-ui/ui"; import type { Meta, StoryObj } from "@storybook/react"; async function waitForCondition( @@ -23,6 +37,12 @@ const meta = { title: "Components/Select", component: Select, parameters: { + docs: { + description: { + component: + "Select is the compact choice surface for a fixed option set. It should feel lighter than Combobox, but it should still share the same motion language: a restrained rise on open, adhesive highlighted rows, and a selected state that reads as a settled tonal slab instead of a hard admin-menu snap." + } + }, layout: "centered" }, tags: ["autodocs"] @@ -34,7 +54,7 @@ type Story = StoryObj; export const Playground: Story = { render: () => ( -
+
@@ -111,3 +134,49 @@ export const WithField: Story = { ) }; + +export const Motion: Story = { + parameters: { + docs: { + description: { + story: + "Open the list and move through the options with the pointer or keyboard. The menu should fade and rise as one surface, highlighted rows should glide lightly instead of snapping, and the checked row should feel a touch more settled than the transient highlight." + } + } + }, + render: () => ( +
+
+

+ Motion review +

+

+ Keep Select lighter than Combobox, but not mechanically flat. +

+

+ This surface is still a simple fixed-choice select. The motion should clarify focus and + settled selection without turning the menu into an animated showcase. +

+
+ +
+ ) +}; diff --git a/apps/docs/src/components/tabs.stories.tsx b/apps/docs/src/components/tabs.stories.tsx index fa094cb..2151f40 100644 --- a/apps/docs/src/components/tabs.stories.tsx +++ b/apps/docs/src/components/tabs.stories.tsx @@ -51,7 +51,7 @@ const meta = { docs: { description: { component: - "Tabs is the system's in-place content switcher for peer views that belong to the same context. It exposes stable slots for the root, list, triggers, and panels, supports orientation changes, and keeps active-state styling on the trigger rather than moving users into a new page." + "Tabs is the system's in-place content switcher for peer views that belong to the same context. It exposes stable slots for the root, list, triggers, and panels, supports orientation changes, and now uses a shared active pill so state changes feel like one continuous surface sliding between peer views instead of isolated button toggles." } }, layout: "centered" @@ -104,6 +104,18 @@ export const Anatomy: Story = { ) }; +export const Motion: Story = { + parameters: { + docs: { + description: { + story: + "The active state now uses a shared pill that glides between triggers with restrained timing. It should feel like one calm slab moving across the control, not like each tab is popping independently." + } + } + }, + render: () => +}; + export const Accessibility: Story = { parameters: { docs: { diff --git a/apps/docs/src/components/tooltip.stories.tsx b/apps/docs/src/components/tooltip.stories.tsx index b3f80df..2e88038 100644 --- a/apps/docs/src/components/tooltip.stories.tsx +++ b/apps/docs/src/components/tooltip.stories.tsx @@ -57,7 +57,7 @@ const meta = { docs: { description: { component: - "Tooltip is the system's smallest assistive overlay. Use it for terse clarification, shortcut hints, or icon-only controls that benefit from a compact label on hover and focus. If the content needs interaction or more than a sentence, switch to popover instead." + "Tooltip is the system's smallest assistive overlay. Use it for terse clarification, shortcut hints, or icon-only controls that benefit from a compact label on hover and focus. It uses a short rise-and-fade so the label still feels spatial without carrying the heavier panel motion reserved for popovers and dialogs. If the content needs interaction or more than a sentence, switch to popover instead." } }, layout: "centered" diff --git a/docs/exec-plans/2026-03-25-component-polish-pass.md b/docs/exec-plans/2026-03-25-component-polish-pass.md new file mode 100644 index 0000000..fd8e9ad --- /dev/null +++ b/docs/exec-plans/2026-03-25-component-polish-pass.md @@ -0,0 +1,89 @@ +# Component Polish Pass + +- Status: `completed` +- Owner: `codex` +- Date: `2026-03-25` + +## Goal + +Run a focused polish pass across six existing component surfaces so the current Material runtime +direction feels more intentional in high-traffic docs and product-like stories. The goal is not to +add new APIs. The goal is to tighten hierarchy, depth, and interaction feedback while keeping the +existing contract stable. + +## Scope + +- In scope: + - refine `StatCard` hierarchy, default interaction treatment, and delta emphasis + - refine `DataTable` row, header, toolbar, and selection presentation + - refine `EmptyState` composition, especially the `split` layout media and narrative weight + - refine `Command`, `Combobox`, and `Select` list item selection and active-state treatment + - refine `MetricCard` cohesion across media, footer, and CTA regions + - refine base `Card` interactive behavior so general business cards feel less static + - update the closest Storybook stories and tests where behavior or reviewability changes +- Out of scope: + - adding new component families or expanding public props beyond what the current contract needs + - introducing a second motion language or non-token visual escape hatches + - broad scene rewrites outside the stories that best demonstrate the updated behavior + +## Constraints + +- Follow the active visual and motion direction in `DESIGN.md`. +- Preserve reduced-motion safety and the current component contract. +- Keep write scopes isolated so six workers can operate in parallel without conflicting. +- Keep shared integration surfaces on the main thread where practical. +- Do not revert or overwrite unrelated in-progress repo changes. + +## Affected Surfaces + +- `packages/ui/src/components/card*` +- `packages/ui/src/components/stat-card*` +- `packages/ui/src/components/data-table*` +- `packages/ui/src/components/empty-state*` +- `packages/ui/src/components/command*` +- `packages/ui/src/components/combobox*` +- `packages/ui/src/components/select*` +- `packages/ui/src/components/metric-card*` +- `apps/docs/src/components/card.stories.tsx` +- `apps/docs/src/components/stat-card.stories.tsx` +- `apps/docs/src/components/data-table.stories.tsx` +- `apps/docs/src/components/empty-state.stories.tsx` +- `apps/docs/src/components/command.stories.tsx` +- `apps/docs/src/components/combobox.stories.tsx` +- `apps/docs/src/components/select.stories.tsx` +- `apps/docs/src/components/metric-card.stories.tsx` +- `docs/exec-plans` + +## Plan + +1. Write and commit an execution plan for the six-slice polish pass so delegation stays resumable. +2. Dispatch six isolated implementation workers, one per polish slice, each owning its component, + nearby stories, and nearby tests only. +3. Review worker diffs in the main thread, resolve any cross-slice visual inconsistencies, and keep + shared integration concerns centralized. +4. Run the narrowest useful harness and component validation suites, then fix any regressions in the + main thread. +5. Summarize what changed, what was validated, and any remaining gaps. + +## Validation + +- `pnpm harness:validate:component` +- `pnpm harness:validate:docs` +- `pnpm harness:validate:changed` + +## Orchestration Task Sketch + +- `T1`: polish `StatCard` +- `T2`: polish `DataTable` +- `T3`: polish `EmptyState` +- `T4`: polish `Command`, `Combobox`, and `Select` +- `T5`: polish `MetricCard` +- `T6`: polish base `Card` +- `T7 -> T1,T2,T3,T4,T5,T6`: integrate worker results and run focused validation + +## Status Log + +- `2026-03-25 16:26` started the six-slice polish pass after reviewing the current design language, component implementations, and representative Storybook stories +- `2026-03-25 16:29` wrote the execution plan and prepared six isolated worker slices plus a main-thread integration pass +- `2026-03-25 16:38` completed the delegated `Card`, `StatCard`, `EmptyState`, `MetricCard`, `Command/Combobox/Select`, and `DataTable` slices and reviewed the combined result set in the main thread +- `2026-03-25 16:41` validated the combined changes with targeted Vitest coverage (`card`, `stat-card`, `empty-state`, `metric-card`, `command`, `combobox`, `select`, `data-table`), `pnpm build:docs`, `pnpm --filter @ai-ui/ui exec tsc --noEmit`, and `pnpm --dir apps/docs exec tsc --noEmit` diff --git a/docs/exec-plans/2026-03-25-foundation-and-pattern-motion-pass.md b/docs/exec-plans/2026-03-25-foundation-and-pattern-motion-pass.md new file mode 100644 index 0000000..3089a70 --- /dev/null +++ b/docs/exec-plans/2026-03-25-foundation-and-pattern-motion-pass.md @@ -0,0 +1,82 @@ +# Foundation And Pattern Motion Pass + +- Status: `completed` +- Owner: `codex` +- Date: `2026-03-25` + +## Goal + +Run a focused third-pass polish on four remaining motion gaps: overly busy `DataTable` chrome, +under-animated foundation surfaces, static-feeling workspace patterns, and missing docs/test +coverage for `StatCard` / `MetricCard` motion behavior. + +## Scope + +- In scope: + - reduce excess hover lift around `DataTable` selection, search, and pagination chrome while + preserving row hover and sort-state feedback + - add restrained component-specific polish to `Alert`, `Avatar`, and `Badge` + - bring `PageHeader`, `AppShell`, and `PageFooter` closer to the existing pattern motion quality + bar set by `SidebarNav` + - add dedicated motion stories and targeted regression tests for `StatCard` and `MetricCard` +- Out of scope: + - adding new animation dependencies + - broad visual redesign unrelated to motion and interaction feedback + - touching unrelated in-progress component work + +## Constraints + +- Respect `DESIGN.md` and keep one calm, spatial motion language. +- Keep write scopes isolated so workers do not collide. +- Preserve existing public APIs unless a very small compatibility-safe addition is justified. +- Do not revert unrelated work already present in the dirty worktree. + +## Ownership + +- Main thread: + - plan, review, integration, and validation +- Worker 1: + - `packages/ui/src/components/data-table*` + - `apps/docs/src/components/data-table.stories.tsx` +- Worker 2: + - `packages/ui/src/components/alert*` + - `packages/ui/src/components/avatar*` + - `packages/ui/src/components/badge*` + - nearest owned stories/tests if needed +- Worker 3: + - `packages/ui/src/patterns/page-header*` + - `packages/ui/src/patterns/app-shell*` + - `packages/ui/src/patterns/page-footer*` + - nearest owned stories/tests if needed +- Worker 4: + - `packages/ui/src/components/stat-card*` + - `packages/ui/src/components/metric-card*` + - `apps/docs/src/components/stat-card.stories.tsx` + - `apps/docs/src/components/metric-card.stories.tsx` + +## Plan + +1. Write the execution plan and confirm the four disjoint ownership slices. +2. Dispatch four workers with isolated write scopes and keep main-thread ownership limited to + review, integration, and validation. +3. Review the returned slices, fix any integration gaps, and avoid broad shared-file churn. +4. Run focused tests and typechecks for the affected components and docs surfaces. + +## Validation + +- `pnpm --filter @ai-ui/ui exec vitest run packages/ui/src/components/data-table.test.tsx` +- `pnpm --filter @ai-ui/ui exec vitest run packages/ui/src/components/alert.test.tsx packages/ui/src/components/avatar.test.tsx packages/ui/src/components/badge.test.tsx` +- `pnpm --filter @ai-ui/ui exec vitest run packages/ui/src/components/stat-card.test.tsx packages/ui/src/components/metric-card.test.tsx` +- `pnpm --filter @ai-ui/ui exec vitest run packages/ui/src/patterns/page-header.test.tsx packages/ui/src/patterns/app-shell.test.tsx packages/ui/src/patterns/page-footer.test.tsx` +- `pnpm --filter @ai-ui/ui exec tsc --noEmit` +- `pnpm --dir apps/docs exec tsc --noEmit` + +## Status Log + +- `2026-03-25 17:27` started the pass after the previous motion review identified remaining polish + gaps in `DataTable`, foundation surfaces, workspace patterns, and motion-story/test coverage +- `2026-03-25 17:28` wrote the execution plan and dispatched four isolated workers for + `DataTable`, foundation components, workspace patterns, and KPI-card coverage +- `2026-03-25 17:33` reviewed and accepted all four returned slices, then validated the combined + result set with focused Vitest coverage plus `pnpm --filter @ai-ui/ui exec tsc --noEmit` and + `pnpm --dir apps/docs exec tsc --noEmit` diff --git a/docs/exec-plans/2026-03-25-motion-accessibility-and-selection-pass.md b/docs/exec-plans/2026-03-25-motion-accessibility-and-selection-pass.md new file mode 100644 index 0000000..1f4dbc8 --- /dev/null +++ b/docs/exec-plans/2026-03-25-motion-accessibility-and-selection-pass.md @@ -0,0 +1,93 @@ +# Motion Accessibility And Selection Pass + +- Status: `completed` +- Owner: `codex` +- Date: `2026-03-25` + +## Goal + +Polish the remaining low-level interaction motion gaps called out in the motion review, with an +emphasis on reduced-motion correctness, selection-state feedback, and bringing lower-tier +components closer to the established `Command` / `Combobox` / `Tabs` motion quality bar. + +## Scope + +- In scope: + - add explicit reduced-motion handling for continuous loader animation surfaces + - soften `Checkbox` and `RadioGroup` selection feedback with short scale/fade indicator motion + - give `Tooltip` a light rise to match the rest of the overlay family + - reduce layout-heavy motion where it is currently doing too much work in `Accordion`, + `Sparkbar`, and `Progress` + - polish `Select` list motion so it feels closer to `Combobox` and `Command` + - update focused tests and stories when the behavior contract changes +- Out of scope: + - introducing new animation dependencies + - expanding public APIs unless a small compatibility-safe prop is justified + - broad visual restyling unrelated to motion or reduced-motion behavior + +## Constraints + +- Respect `DESIGN.md` and keep one calm, spatial motion language. +- Treat `packages/ui/src/components/progress*` as main-thread-owned because reduced-motion and + motion-refinement requirements both land there. +- Do not revert or overwrite unrelated in-progress repo changes. +- Preserve static-motion behavior through `data-motion="static"` and make OS-level reduced motion + behave equivalently for continuous animation surfaces. + +## Ownership + +- Main thread: + - `packages/ui/src/components/progress*` + - final review, integration, and validation +- Worker 1: + - `packages/ui/src/components/spinner.tsx` + - `packages/ui/src/components/skeleton.tsx` + - nearest tests/stories if needed +- Worker 2: + - `packages/ui/src/components/checkbox*` + - `packages/ui/src/components/radio-group*` + - nearest tests/stories if needed +- Worker 3: + - `packages/ui/src/components/tooltip*` + - nearest tests/stories if needed +- Worker 4: + - `packages/ui/src/components/accordion*` + - `packages/ui/src/components/sparkbar*` + - nearest tests/stories if needed +- Worker 5: + - `packages/ui/src/components/select*` + - nearest tests/stories if needed + +## Plan + +1. Write the execution plan and keep `Progress` under main-thread ownership. +2. Dispatch five isolated workers for loaders, selection controls, tooltip, accordion/sparkbar, + and select. +3. Implement `Progress` reduced-motion and motion refinements locally. +4. Review and integrate the worker slices, then fix any shared token or contract issues. +5. Run focused tests for the changed surfaces and a narrow typecheck/docs pass if needed. + +## Validation + +- `pnpm --filter @ai-ui/ui exec vitest run packages/ui/src/components/progress.test.tsx` +- `pnpm --filter @ai-ui/ui exec vitest run packages/ui/src/components/checkbox.test.tsx packages/ui/src/components/radio-group.test.tsx` +- `pnpm --filter @ai-ui/ui exec vitest run packages/ui/src/components/tooltip.test.tsx` +- `pnpm --filter @ai-ui/ui exec vitest run packages/ui/src/components/accordion.test.tsx packages/ui/src/components/sparkbar.test.tsx` +- `pnpm --filter @ai-ui/ui exec vitest run packages/ui/src/components/select.test.tsx` +- `pnpm --filter @ai-ui/ui exec tsc --noEmit` + +## Status Log + +- `2026-03-25 17:18` started the focused pass after motion review identified reduced-motion gaps, + low-fidelity selection feedback, and one remaining `Select` polish gap +- `2026-03-25 17:19` wrote the execution plan, kept `progress.*` under main-thread ownership, and + dispatched five isolated workers for loaders, selection controls, tooltip, accordion/sparkbar, + and select +- `2026-03-25 17:22` landed the main-thread `Progress` refactor: reduced-motion detection now + collapses indeterminate animation, the linear bar scales with `transform` instead of animating + layout width, and segmented indeterminate progress falls back to a static partial fill when + motion is reduced +- `2026-03-25 17:24` reviewed and accepted worker slices for loaders, selection controls, tooltip, + accordion/sparkbar, and select polish +- `2026-03-25 17:25` validated the combined result set with focused component tests plus + `pnpm --filter @ai-ui/ui exec tsc --noEmit` and `pnpm --dir apps/docs exec tsc --noEmit` diff --git a/docs/exec-plans/2026-03-25-motion-polish-pass.md b/docs/exec-plans/2026-03-25-motion-polish-pass.md new file mode 100644 index 0000000..493799c --- /dev/null +++ b/docs/exec-plans/2026-03-25-motion-polish-pass.md @@ -0,0 +1,89 @@ +# Motion Polish Pass + +- Status: `completed` +- Owner: `codex` +- Date: `2026-03-25` + +## Goal + +Run a second polish pass focused on interaction motion across six existing component surfaces. The +goal is to add the missing sense of staged, spatial feedback described in `DESIGN.md` without +introducing a second motion language, widening public APIs unnecessarily, or making the system feel +busy. + +## Scope + +- In scope: + - add polished active-guide, tooltip, and marker motion to `Chart` + - add a one-time sweep and value count-up feel to `Gauge` + - add shared active-pill motion to `Tabs` and `SegmentedControl` + - add lighter interaction transitions to the newly polished `DataTable` + - add subtle media float/breathe and CTA stagger to `EmptyState` + - add active-row glide, list crossfade, and softer loading treatment to `Command` and `Combobox` + - update the nearest stories and tests when behavior changes need review or coverage +- Out of scope: + - introducing new animation dependencies + - changing shared token files unless the main thread explicitly decides it is necessary + - turning core surfaces into ambient animation showcases + +## Constraints + +- Respect reduced motion and the repo's current Material-runtime design direction. +- Favor `transform`, `opacity`, `box-shadow`, and state-driven transitions over layout-heavy motion. +- Keep each worker on an isolated write scope. +- Preserve existing public component contracts unless a small compatibility-safe extension is + justified. +- Do not revert or overwrite unrelated in-progress repo changes. + +## Affected Surfaces + +- `packages/ui/src/components/chart*` +- `packages/ui/src/components/gauge*` +- `packages/ui/src/components/tabs*` +- `packages/ui/src/components/segmented-control*` +- `packages/ui/src/components/data-table*` +- `packages/ui/src/components/empty-state*` +- `packages/ui/src/components/command*` +- `packages/ui/src/components/combobox*` +- `apps/docs/src/components/chart.stories.tsx` +- `apps/docs/src/components/gauge.stories.tsx` +- `apps/docs/src/components/tabs.stories.tsx` +- `apps/docs/src/components/segmented-control.stories.tsx` +- `apps/docs/src/components/data-table.stories.tsx` +- `apps/docs/src/components/empty-state.stories.tsx` +- `apps/docs/src/components/command.stories.tsx` +- `apps/docs/src/components/combobox.stories.tsx` +- `docs/exec-plans` + +## Plan + +1. Write a dedicated execution plan for the motion pass so the second round of work is resumable. +2. Dispatch six isolated workers, each owning one motion slice and its closest tests/docs. +3. Review the combined result set in the main thread and fix any compatibility or API-semantics + issues before broader validation. +4. Run focused component, typecheck, and docs validation on the combined motion changes. +5. Record results, remaining risks, and any intentionally deferred motion refinements. + +## Validation + +- `pnpm --filter @ai-ui/ui exec vitest run ` +- `pnpm --filter @ai-ui/ui exec tsc --noEmit` +- `pnpm --dir apps/docs exec tsc --noEmit` +- `pnpm build:docs` + +## Orchestration Task Sketch + +- `T1`: polish `Chart` motion +- `T2`: polish `Gauge` motion +- `T3`: polish `Tabs` and `SegmentedControl` motion +- `T4`: polish `DataTable` motion +- `T5`: polish `EmptyState` motion +- `T6`: polish `Command` and `Combobox` motion +- `T7 -> T1,T2,T3,T4,T5,T6`: integrate results and validate + +## Status Log + +- `2026-03-25 16:45` started the motion-focused second pass after confirming the current component state from the first visual polish round +- `2026-03-25 16:47` wrote the motion pass plan and prepared six isolated worker slices with main-thread integration reserved for compatibility fixes and validation +- `2026-03-25 16:59` all six motion slices returned from delegated workers: `Chart`, `Gauge`, `Tabs/SegmentedControl`, `DataTable`, `EmptyState`, and `Command/Combobox` +- `2026-03-25 17:00` validated the combined result set with targeted Vitest coverage, `pnpm --filter @ai-ui/ui exec tsc --noEmit`, `pnpm --dir apps/docs exec tsc --noEmit`, and `pnpm build:docs` diff --git a/docs/exec-plans/2026-03-25-progress-patterns.md b/docs/exec-plans/2026-03-25-progress-patterns.md new file mode 100644 index 0000000..0f24696 --- /dev/null +++ b/docs/exec-plans/2026-03-25-progress-patterns.md @@ -0,0 +1,60 @@ +# Progress Patterns + +- Status: `completed` +- Owner: `Codex` +- Date: `2026-03-25` + +## Goal + +Extend `Progress` beyond the default linear fill so the component can also render segmented +dashboard-style progress bars like the operational cost reduction example, without splitting the +API into separate one-off components. + +## Scope + +- In scope: + - add a structural `pattern` dimension to `Progress` + - support a segmented dashboard meter mode + - keep the existing linear pattern untouched as the default + - update tests, exports, and Storybook docs +- Out of scope: + - radial gauge visuals + - introducing a separate `Gauge` component + - modifying unrelated dashboard story drafts + +## Constraints + +- Keep `variant` reserved for semantic color intent. +- Preserve the existing ARIA progressbar behavior. +- Expose stable slots and `data-*` hooks for the segmented structure. +- Stay within the current Cadence UI tonal and motion language. + +## Affected Surfaces + +- `packages/ui/src/components/progress.tsx` +- `packages/ui/src/components/progress.variants.ts` +- `packages/ui/src/components/progress.test.tsx` +- `packages/ui/src/skins.css` +- `packages/ui/src/index.ts` +- `apps/docs/src/components/progress.stories.tsx` + +## Plan + +1. Add a `pattern` API for `linear` and `segmented` progress structures. +2. Implement segmented rendering with stable slots and deterministic filled-state logic. +3. Refresh docs so the segmented meter is shown in a realistic dashboard context. +4. Run targeted validation for the package and docs surfaces. + +## Validation + +- `pnpm --filter @ai-ui/ui typecheck` +- `pnpm --filter @ai-ui/ui test -- --run packages/ui/src/components/progress.test.tsx` +- `pnpm harness:validate:docs` + +## Status Log + +- `2026-03-25 17:58` Confirmed the existing Progress API is linear-only and inspected the local revenue dashboard draft for the target segmented visual language. +- `2026-03-25 18:10` Added a `pattern` dimension with segmented rendering, repeated segment slots, and progress-specific skin tokens for dashboard meters. +- `2026-03-25 18:14` Updated Storybook docs and package exports to document and expose the segmented mode. +- `2026-03-25 18:18` Verified `pnpm --filter @ai-ui/ui typecheck`, `pnpm --filter @ai-ui/ui exec vitest run packages/ui/src/components/progress.test.tsx --config ../../vitest.config.ts`, and targeted `eslint` on the changed files. +- `2026-03-25 18:19` `pnpm harness:validate:docs` is currently blocked by an unrelated local Storybook draft: `apps/docs/src/components/metric-card.stories.tsx` imports `MetricCard` from `@ai-ui/ui`, but that export is not present in the built package yet. diff --git a/docs/exec-plans/2026-03-25-progress-refresh.md b/docs/exec-plans/2026-03-25-progress-refresh.md new file mode 100644 index 0000000..1446271 --- /dev/null +++ b/docs/exec-plans/2026-03-25-progress-refresh.md @@ -0,0 +1,57 @@ +# Progress Refresh + +- Status: `completed` +- Owner: `Codex` +- Date: `2026-03-25` + +## Goal + +Bring `Progress` closer to the active Cadence UI visual language so it reads like a tonal system +component instead of a generic utility bar, while keeping the existing API and accessibility +contract intact. + +## Scope + +- In scope: + - refresh the `Progress` track and indicator styling + - add progress-specific skin tokens in `packages/ui/src/skins.css` + - update Storybook stories so the new anatomy, state, and motion behavior are reviewable + - keep unit coverage aligned with the component contract +- Out of scope: + - adding labels, percentages, or new public props + - changing exports or introducing new dependencies + +## Constraints + +- Preserve the current `Progress` API surface (`size`, `tone`, `variant`, `value`, `max`). +- Keep the stable `data-slot` and `data-state` hooks. +- Use existing token roles and motion primitives instead of hardcoded one-off colors. +- Keep indeterminate behavior usable under static/reduced motion. + +## Affected Surfaces + +- `packages/ui/src/components/progress.tsx` +- `packages/ui/src/components/progress.variants.ts` +- `packages/ui/src/components/progress.test.tsx` +- `packages/ui/src/skins.css` +- `apps/docs/src/components/progress.stories.tsx` + +## Plan + +1. Add progress skin tokens for track depth, highlight, and indicator gloss. +2. Rework the component styling around those tokens without changing the public props. +3. Refresh docs stories to show the component in more intentional, reviewable product contexts. +4. Run the narrowest harness suites that cover the changed component and docs surfaces. + +## Validation + +- `pnpm harness:validate:component` +- `pnpm harness:validate:docs` + +## Status Log + +- `2026-03-25 17:20` Read system-of-record files and inspected the current Progress source, tests, and stories. +- `2026-03-25 17:25` Started implementation for the visual refresh and docs alignment. +- `2026-03-25 17:42` Added progress skin tokens, refreshed the track and indicator styling, and rewrote the Storybook review surface. +- `2026-03-25 17:48` Verified `pnpm --filter @ai-ui/ui typecheck`, `pnpm --filter @ai-ui/ui test -- --run packages/ui/src/components/progress.test.tsx`, and `pnpm harness:validate:docs`. +- `2026-03-25 17:49` `pnpm harness:validate:component` still fails on pre-existing type errors in `apps/docs/src/revenue-dashboard.stories.tsx`, unrelated to the Progress work. diff --git a/packages/ui/src/components/accordion.tsx b/packages/ui/src/components/accordion.tsx index 4a4b08b..d3e88cf 100644 --- a/packages/ui/src/components/accordion.tsx +++ b/packages/ui/src/components/accordion.tsx @@ -338,6 +338,9 @@ export const AccordionContent = forwardRef
{ it("renders root, icon, title, and description slots", () => { @@ -42,4 +43,14 @@ describe("Alert", () => { expect(screen.getByRole("status")).toHaveAttribute("data-variant", "default"); }); + + it("includes restrained entry and icon polish hooks", () => { + expect(alertVariants({ hasIcon: true, variant: "success" })).toContain( + "motion-safe:[animation:aiui-fade-in_var(--dur-base)_var(--ease-standard)_both,aiui-slide-up-sm_var(--dur-fast)_var(--ease-standard)_both]" + ); + expect(alertVariants({ hasIcon: true, variant: "success" })).toContain( + "[&>[data-slot=icon]]:bg-[color-mix(in_oklch,var(--color-success)_16%,white_84%)]" + ); + expect(alertIconVariants()).toContain("size-8"); + }); }); diff --git a/packages/ui/src/components/alert.variants.ts b/packages/ui/src/components/alert.variants.ts index e948f76..9989f6c 100644 --- a/packages/ui/src/components/alert.variants.ts +++ b/packages/ui/src/components/alert.variants.ts @@ -3,21 +3,24 @@ import { getMotionRecipeClassNames } from "../lib/motion"; export const alertVariants = cva( [ - "relative grid gap-x-3 gap-y-1 rounded-[var(--ui-card-radius)] border p-4 shadow-[var(--ui-card-subtle-shadow)] [border-width:var(--ui-card-border-width)]", + "relative isolate grid gap-x-3 gap-y-1 overflow-hidden rounded-[var(--ui-card-radius)] border p-4 shadow-[var(--ui-card-subtle-shadow)] [border-width:var(--ui-card-border-width)]", "text-[var(--color-foreground)]", + "before:pointer-events-none before:absolute before:inset-x-[14%] before:top-0 before:h-[58%] before:rounded-full before:bg-[radial-gradient(circle,color-mix(in_oklch,var(--color-primary-container)_24%,transparent),transparent_74%)] before:opacity-70 before:blur-2xl before:content-['']", + "[&>*]:relative [&>*]:z-[1]", + "motion-safe:[animation:aiui-fade-in_var(--dur-base)_var(--ease-standard)_both,aiui-slide-up-sm_var(--dur-fast)_var(--ease-standard)_both] motion-reduce:animate-none", getMotionRecipeClassNames("transition", "ring") ], { variants: { variant: { default: - "border-[var(--ui-card-default-border)] bg-[var(--ui-card-default-bg)]", + "border-[var(--ui-card-default-border)] bg-[var(--ui-card-default-bg)] [&>[data-slot=icon]]:border-[color-mix(in_oklch,var(--color-border)_68%,transparent)] [&>[data-slot=icon]]:bg-[color-mix(in_oklch,var(--color-surface-bright)_82%,white_18%)] [&>[data-slot=icon]]:text-[var(--color-primary)]", success: - "border-[color-mix(in_oklch,var(--color-success)_34%,var(--ui-card-default-border))] bg-[color-mix(in_oklch,var(--color-success)_10%,var(--ui-card-default-bg))]", + "border-[color-mix(in_oklch,var(--color-success)_34%,var(--ui-card-default-border))] bg-[color-mix(in_oklch,var(--color-success)_10%,var(--ui-card-default-bg))] [&>[data-slot=icon]]:border-[color-mix(in_oklch,var(--color-success)_18%,transparent)] [&>[data-slot=icon]]:bg-[color-mix(in_oklch,var(--color-success)_16%,white_84%)] [&>[data-slot=icon]]:text-[color-mix(in_oklch,var(--color-success)_82%,var(--color-foreground))]", warning: - "border-[color-mix(in_oklch,var(--color-warning)_34%,var(--ui-card-default-border))] bg-[color-mix(in_oklch,var(--color-warning)_12%,var(--ui-card-default-bg))]", + "border-[color-mix(in_oklch,var(--color-warning)_34%,var(--ui-card-default-border))] bg-[color-mix(in_oklch,var(--color-warning)_12%,var(--ui-card-default-bg))] [&>[data-slot=icon]]:border-[color-mix(in_oklch,var(--color-warning)_18%,transparent)] [&>[data-slot=icon]]:bg-[color-mix(in_oklch,var(--color-warning)_18%,white_82%)] [&>[data-slot=icon]]:text-[color-mix(in_oklch,var(--color-warning)_84%,var(--color-foreground))]", destructive: - "border-[color-mix(in_oklch,var(--color-destructive)_38%,var(--ui-card-default-border))] bg-[color-mix(in_oklch,var(--color-destructive)_10%,var(--ui-card-default-bg))]" + "border-[color-mix(in_oklch,var(--color-destructive)_38%,var(--ui-card-default-border))] bg-[color-mix(in_oklch,var(--color-destructive)_10%,var(--ui-card-default-bg))] [&>[data-slot=icon]]:border-[color-mix(in_oklch,var(--color-destructive)_20%,transparent)] [&>[data-slot=icon]]:bg-[color-mix(in_oklch,var(--color-destructive)_14%,white_86%)] [&>[data-slot=icon]]:text-[var(--color-destructive)]" }, hasIcon: { false: "", @@ -32,7 +35,12 @@ export const alertVariants = cva( ); export const alertIconVariants = cva( - "row-span-2 mt-0.5 inline-flex size-5 items-center justify-center rounded-[var(--radius-full)] text-[var(--color-muted-foreground)]" + [ + "row-span-2 mt-0.5 inline-flex size-8 items-center justify-center rounded-[var(--radius-full)] border", + "shadow-[inset_0_1px_0_rgba(255,255,255,0.42)]", + "transition-[transform,background-color,color,box-shadow] duration-[var(--dur-base)] ease-[var(--ease-standard)]", + "motion-reduce:transition-none" + ] ); export const alertTitleVariants = cva( diff --git a/packages/ui/src/components/avatar.test.tsx b/packages/ui/src/components/avatar.test.tsx index 50ee1e0..efb9144 100644 --- a/packages/ui/src/components/avatar.test.tsx +++ b/packages/ui/src/components/avatar.test.tsx @@ -2,6 +2,7 @@ import { render, screen, waitFor } from "@testing-library/react"; import { describe, expect, it } from "vitest"; import { Avatar, AvatarFallback } from "./avatar"; +import { avatarFallbackVariants, avatarImageVariants, avatarVariants } from "./avatar.variants"; describe("Avatar", () => { it("renders root slot metadata and fallback content", async () => { @@ -33,4 +34,12 @@ describe("Avatar", () => { expect(screen.getByText("JD")).toHaveAttribute("data-slot", "fallback"); }); }); + + it("exposes image/fallback crossfade hooks", () => { + expect(avatarVariants()).toContain( + "[&>[data-slot=image][data-state=loaded]~[data-slot=fallback]]:opacity-0" + ); + expect(avatarImageVariants()).toContain("data-[state=loaded]:opacity-100"); + expect(avatarFallbackVariants()).toContain("transition-[opacity,transform,background-color]"); + }); }); diff --git a/packages/ui/src/components/avatar.variants.ts b/packages/ui/src/components/avatar.variants.ts index 5a61675..1a75cfb 100644 --- a/packages/ui/src/components/avatar.variants.ts +++ b/packages/ui/src/components/avatar.variants.ts @@ -3,8 +3,11 @@ import { getMotionRecipeClassNames } from "../lib/motion"; export const avatarVariants = cva( [ - "relative inline-flex shrink-0 select-none items-center justify-center overflow-hidden border shadow-[var(--ui-control-shadow)]", + "relative isolate inline-flex shrink-0 select-none items-center justify-center overflow-hidden border shadow-[var(--ui-control-shadow)]", "bg-[var(--ui-control-bg)] text-[var(--color-foreground)] [border-width:var(--ui-input-border-width)]", + "before:pointer-events-none before:absolute before:inset-[14%] before:rounded-[inherit] before:bg-[radial-gradient(circle_at_top,color-mix(in_oklch,white_68%,transparent),transparent_74%)] before:opacity-82 before:content-['']", + "[&>*]:relative [&>*]:z-[1]", + "[&>[data-slot=image][data-state=loaded]~[data-slot=fallback]]:opacity-0 [&>[data-slot=image][data-state=loaded]~[data-slot=fallback]]:scale-[0.96]", getMotionRecipeClassNames("transition", "ring") ], { @@ -35,9 +38,14 @@ export const avatarVariants = cva( ); export const avatarImageVariants = cva([ - "size-full object-cover object-center" + "absolute inset-0 size-full object-cover object-center", + "opacity-0 scale-[1.035] transition-[opacity,transform,filter] duration-[var(--dur-base)] ease-[var(--ease-emphasized)]", + "data-[state=loaded]:opacity-100 data-[state=loaded]:scale-100", + "motion-reduce:transition-none motion-reduce:data-[state=loaded]:scale-100" ]); export const avatarFallbackVariants = cva([ - "flex size-full items-center justify-center bg-[inherit] text-inherit font-medium uppercase tracking-[0.08em]" + "absolute inset-0 flex size-full items-center justify-center bg-[inherit] text-inherit font-medium uppercase tracking-[0.08em]", + "transition-[opacity,transform,background-color] duration-[var(--dur-base)] ease-[var(--ease-standard)]", + "motion-reduce:transition-none" ]); diff --git a/packages/ui/src/components/badge.test.tsx b/packages/ui/src/components/badge.test.tsx index 7c94b03..37ec89e 100644 --- a/packages/ui/src/components/badge.test.tsx +++ b/packages/ui/src/components/badge.test.tsx @@ -2,6 +2,7 @@ import { render, screen } from "@testing-library/react"; import { describe, expect, it } from "vitest"; import { Badge } from "./badge"; +import { badgeVariants } from "./badge.variants"; describe("Badge", () => { it("renders with root and label slots plus data hooks", () => { @@ -32,4 +33,12 @@ describe("Badge", () => { expect(link).toHaveAttribute("data-slot", "root"); expect(link).toHaveAttribute("data-tone", "primary"); }); + + it("includes tactile chip hooks for hover and pressed states", () => { + const subtle = badgeVariants({ variant: "subtle" }); + + expect(subtle).toContain("aria-[pressed=true]:before:opacity-100"); + expect(subtle).toContain("motion-safe:hover:-translate-y-px"); + expect(subtle).toContain("before:translate-x-[-18%]"); + }); }); diff --git a/packages/ui/src/components/badge.variants.ts b/packages/ui/src/components/badge.variants.ts index 4a755d5..f296311 100644 --- a/packages/ui/src/components/badge.variants.ts +++ b/packages/ui/src/components/badge.variants.ts @@ -3,8 +3,11 @@ import { getMotionRecipeClassNames } from "../lib/motion"; export const badgeVariants = cva( [ - "inline-flex shrink-0 items-center justify-center gap-1 whitespace-nowrap rounded-[var(--ui-control-radius)] border font-medium [border-width:var(--ui-input-border-width)]", + "relative isolate inline-flex shrink-0 items-center justify-center gap-1 overflow-hidden whitespace-nowrap rounded-[var(--ui-control-radius)] border font-medium [border-width:var(--ui-input-border-width)]", "outline-none select-none", + "before:pointer-events-none before:absolute before:inset-0 before:rounded-[inherit] before:bg-[radial-gradient(circle_at_left,color-mix(in_oklch,white_54%,transparent),transparent_74%)] before:opacity-0 before:translate-x-[-18%] before:transition-[opacity,transform] before:duration-[var(--dur-fast)] before:ease-[var(--ease-standard)] before:content-['']", + "[&>*]:relative [&>*]:z-[1]", + "aria-[pressed=true]:before:opacity-100 aria-[pressed=true]:before:translate-x-0 aria-[pressed=true]:shadow-[0_10px_20px_color-mix(in_oklch,var(--color-primary)_10%,transparent)]", getMotionRecipeClassNames("transition", "ring") ], { @@ -15,11 +18,11 @@ export const badgeVariants = cva( }, variant: { subtle: - "border-[var(--ui-control-border)] bg-[var(--ui-control-bg)] text-[var(--color-foreground)] shadow-[var(--ui-control-shadow)]", + "border-[var(--ui-control-border)] bg-[var(--ui-control-bg)] text-[var(--color-foreground)] shadow-[var(--ui-control-shadow)] motion-safe:hover:-translate-y-px motion-safe:hover:before:opacity-100 motion-safe:hover:before:translate-x-0 motion-safe:hover:shadow-[0_10px_20px_color-mix(in_oklch,var(--color-primary)_8%,transparent),var(--ui-control-shadow)] motion-reduce:hover:translate-y-0", solid: - "border-transparent bg-[var(--color-foreground)] text-[var(--color-background)]", + "border-transparent bg-[var(--color-foreground)] text-[var(--color-background)] shadow-[inset_0_1px_0_color-mix(in_oklch,white_28%,transparent)] motion-safe:hover:-translate-y-px motion-safe:hover:before:opacity-72 motion-safe:hover:before:translate-x-0 motion-safe:hover:shadow-[0_10px_18px_color-mix(in_oklch,var(--color-foreground)_14%,transparent)] motion-reduce:hover:translate-y-0", outline: - "border-[var(--ui-control-border)] bg-transparent text-[var(--color-foreground)]" + "border-[var(--ui-control-border)] bg-transparent text-[var(--color-foreground)] motion-safe:hover:-translate-y-px motion-safe:hover:bg-[color-mix(in_oklch,var(--ui-control-bg)_72%,white_28%)] motion-safe:hover:before:opacity-100 motion-safe:hover:before:translate-x-0 motion-safe:hover:shadow-[0_10px_20px_color-mix(in_oklch,var(--color-primary)_8%,transparent)] motion-reduce:hover:translate-y-0" }, tone: { neutral: "", diff --git a/packages/ui/src/components/card.test.tsx b/packages/ui/src/components/card.test.tsx index d6e7b9e..2422b40 100644 --- a/packages/ui/src/components/card.test.tsx +++ b/packages/ui/src/components/card.test.tsx @@ -36,13 +36,23 @@ describe("Card", () => { expect(screen.getByText("Updated 2h ago")).toHaveAttribute("data-slot", "footer"); }); - it("supports interactive state hooks", () => { + it("defaults to the interactive state hook", () => { render( - + Hover capable ); expect(screen.getByTestId("card")).toHaveAttribute("data-interactive", ""); }); + + it("supports explicitly opting out of interactive treatment", () => { + render( + + Static detail + + ); + + expect(screen.getByTestId("card")).not.toHaveAttribute("data-interactive"); + }); }); diff --git a/packages/ui/src/components/card.tsx b/packages/ui/src/components/card.tsx index bf73bc1..9933c1d 100644 --- a/packages/ui/src/components/card.tsx +++ b/packages/ui/src/components/card.tsx @@ -24,15 +24,17 @@ export const Card = forwardRef(function Card( }, ref ) { + const resolvedInteractive = interactive ?? true; + return (
); @@ -60,15 +62,15 @@ export const CardTitle = forwardRef(function { className, ...props }, ref ) { - return ( -

- ); - } + return ( +

+ ); +} ); export type CardDescriptionProps = React.ComponentPropsWithoutRef<"p">; diff --git a/packages/ui/src/components/card.variants.ts b/packages/ui/src/components/card.variants.ts index 0cb631e..dc5bd6b 100644 --- a/packages/ui/src/components/card.variants.ts +++ b/packages/ui/src/components/card.variants.ts @@ -19,13 +19,20 @@ export const cardVariants = cva( }, interactive: { false: "", - true: - "hover:translate-y-[var(--ui-card-hover-translate)] hover:scale-[var(--ui-card-hover-scale,1)] hover:shadow-[var(--ui-card-hover-shadow)]" + true: [ + "relative isolate overflow-hidden", + "before:pointer-events-none before:absolute before:inset-px before:rounded-[calc(var(--ui-card-radius)-1px)] before:bg-[radial-gradient(circle_at_top,color-mix(in_oklch,var(--color-primary-container)_28%,transparent),transparent_62%)] before:opacity-0 before:content-['']", + "before:transition-opacity before:duration-[var(--dur-base)] before:ease-[var(--ease-standard)]", + "hover:border-[color-mix(in_oklch,var(--color-primary)_16%,var(--ui-card-default-border))]", + "hover:translate-y-[calc(var(--ui-card-hover-translate)*0.45)] hover:scale-[var(--ui-card-hover-scale,1)] hover:shadow-[var(--ui-card-hover-shadow)] hover:before:opacity-100", + "focus-within:translate-y-[calc(var(--ui-card-hover-translate)*0.2)] focus-within:shadow-[var(--ui-card-hover-shadow)] focus-within:before:opacity-80", + "motion-reduce:hover:translate-y-0 motion-reduce:hover:scale-100 motion-reduce:focus-within:translate-y-0" + ] } }, defaultVariants: { tone: "default", - interactive: false + interactive: true } } ); diff --git a/packages/ui/src/components/checkbox.test.tsx b/packages/ui/src/components/checkbox.test.tsx index 98b8448..5466d57 100644 --- a/packages/ui/src/components/checkbox.test.tsx +++ b/packages/ui/src/components/checkbox.test.tsx @@ -12,16 +12,19 @@ describe("Checkbox", () => { render(); const checkbox = screen.getByRole("checkbox", { name: "Accept terms" }); + const icon = checkbox.querySelector('[data-slot="icon"]'); expect(checkbox).toHaveAttribute("data-slot", "root"); expect(checkbox).toHaveAttribute("data-state", "unchecked"); + expect(icon).toHaveAttribute("data-state", "unchecked"); await user.click(checkbox); expect(checkbox).toBeChecked(); expect(checkbox).toHaveAttribute("data-state", "checked"); expect(onCheckedChange).toHaveBeenCalledWith(true); - expect(checkbox.querySelector('[data-slot="icon"] svg')).toBeInTheDocument(); + expect(icon).toHaveAttribute("data-state", "checked"); + expect(icon?.querySelector("svg")).toBeInTheDocument(); }); it("supports keyboard interaction", async () => { diff --git a/packages/ui/src/components/checkbox.tsx b/packages/ui/src/components/checkbox.tsx index 67fc525..15f4982 100644 --- a/packages/ui/src/components/checkbox.tsx +++ b/packages/ui/src/components/checkbox.tsx @@ -29,6 +29,7 @@ export const Checkbox = forwardRef< > diff --git a/packages/ui/src/components/checkbox.variants.ts b/packages/ui/src/components/checkbox.variants.ts index d6d88bc..4a1618a 100644 --- a/packages/ui/src/components/checkbox.variants.ts +++ b/packages/ui/src/components/checkbox.variants.ts @@ -15,5 +15,9 @@ export const checkboxVariants = cva( ); export const checkboxIndicatorVariants = cva([ - "inline-flex items-center justify-center text-[0.8rem] leading-none" + "inline-flex items-center justify-center text-[0.8rem] leading-none", + "will-change-transform transition-[opacity,transform] duration-[var(--dur-fast)] ease-[var(--ease-emphasized)]", + "data-[state=unchecked]:scale-[0.72] data-[state=unchecked]:opacity-0", + "data-[state=checked]:scale-100 data-[state=checked]:opacity-100", + "motion-reduce:transition-none motion-reduce:data-[state=unchecked]:scale-100" ]); diff --git a/packages/ui/src/components/combobox.test.tsx b/packages/ui/src/components/combobox.test.tsx index a7c0ecf..209d39a 100644 --- a/packages/ui/src/components/combobox.test.tsx +++ b/packages/ui/src/components/combobox.test.tsx @@ -75,6 +75,12 @@ describe("Combobox", () => { await waitFor(() => { expect(screen.queryByRole("listbox")).not.toBeInTheDocument(); }); + + await user.click(trigger); + expect(await screen.findByRole("option", { name: /Legal review/i })).toHaveAttribute( + "data-selected", + "" + ); }); it("supports a controlled value and reports updates", async () => { @@ -186,6 +192,14 @@ describe("Combobox", () => { await user.click(trigger); expect(screen.getByText("Searching review lanes…")).toBeInTheDocument(); + expect(document.querySelector('[data-slot="root"][data-loading]')).toHaveAttribute( + "data-loading", + "" + ); + expect(document.querySelector('[data-slot="root"][data-loading]')).toHaveAttribute( + "aria-busy", + "true" + ); expect(screen.getByText("Manage routing lanes")).toBeInTheDocument(); loadingView.unmount(); @@ -221,7 +235,7 @@ describe("Combobox", () => { const refreshedSearchbox = screen.getByRole("searchbox", { name: "Search options" }); await user.clear(refreshedSearchbox); await user.type(refreshedSearchbox, "security"); - expect(screen.getByText("Create “security” as a new lane")).toBeInTheDocument(); + expect(await screen.findByText("Create “security” as a new lane")).toBeInTheDocument(); await user.keyboard("{Tab}"); await waitFor(() => { diff --git a/packages/ui/src/components/combobox.tsx b/packages/ui/src/components/combobox.tsx index 3105b41..49f94d6 100644 --- a/packages/ui/src/components/combobox.tsx +++ b/packages/ui/src/components/combobox.tsx @@ -1,4 +1,5 @@ import * as PopoverPrimitive from "@radix-ui/react-popover"; +import { AnimatePresence, motion, useReducedMotion } from "motion/react"; import { forwardRef, useEffect, @@ -32,6 +33,32 @@ function mergeIds(...ids: Array) { return value.length > 0 ? value : undefined; } +function useMotionDisabled() { + const prefersReducedMotion = useReducedMotion(); + const [isStaticMotion, setIsStaticMotion] = useState(false); + + useEffect(() => { + if (typeof document === "undefined") { + return; + } + + const syncMotionMode = () => { + setIsStaticMotion(document.documentElement.dataset.motion === "static"); + }; + + syncMotionMode(); + + const observer = new MutationObserver(syncMotionMode); + observer.observe(document.documentElement, { + attributeFilter: ["data-motion"] + }); + + return () => observer.disconnect(); + }, []); + + return prefersReducedMotion || isStaticMotion; +} + function getNextEnabledIndex( items: ComboboxItem[], currentIndex: number, @@ -122,6 +149,7 @@ export const Combobox = forwardRef(function Co const searchRef = useRef(null); const itemRefs = useRef>([]); const [activeIndex, setActiveIndex] = useState(-1); + const disableMotion = useMotionDisabled(); const resolvedOpen = open ?? uncontrolledOpen; const resolvedValue = value ?? uncontrolledValue; const resolvedSearchValue = searchValue ?? uncontrolledSearchValue; @@ -158,7 +186,15 @@ export const Combobox = forwardRef(function Co return haystack.includes(query); }); }, [filter, items, resolvedSearchValue]); - const listboxId = filteredItems.length > 0 ? `${controlId}-listbox` : undefined; + const listboxId = !loading && filteredItems.length > 0 ? `${controlId}-listbox` : undefined; + const presenceTransition = { + duration: disableMotion ? 0.01 : 0.18, + ease: [0.22, 1, 0.36, 1] + } as const; + const rowTransition = { + duration: disableMotion ? 0.01 : 0.16, + ease: [0.22, 1, 0.36, 1] + } as const; const groupedItems = useMemo(() => { const groups = new Map(); @@ -341,9 +377,11 @@ export const Combobox = forwardRef(function Co {...createDataAttributes({ disabled: resolvedDisabled, invalid: resolvedInvalid, + loading, open: resolvedOpen, value: resolvedValue || undefined })} + aria-busy={loading || undefined} className="grid gap-2" > @@ -402,88 +440,140 @@ export const Combobox = forwardRef(function Co value={resolvedSearchValue} />

- {loading ? ( -
- - - {loadingMessage} - -
- ) : filteredItems.length === 0 ? ( -
- {renderedEmptyMessage} -
- ) : ( -
- {groupedItems.map(([group, groupItems]) => ( -
- {group ? ( -
- {group} -
- ) : null} - {groupItems.map((item) => { - const itemIndex = filteredItems.findIndex((entry) => entry.value === item.value); - const isSelected = item.value === resolvedValue; - const isActive = itemIndex === activeIndex; - - return ( - - ); - })} + + {loading ? ( + +
+ + + {loadingMessage} +
- ))} -
- )} + + ) : filteredItems.length === 0 ? ( + +
+ {renderedEmptyMessage} +
+ + ) : ( + item.value).join("|")}`} + transition={presenceTransition} + > +
+ {groupedItems.map(([group, groupItems]) => ( +
+ {group ? ( +
+ {group} +
+ ) : null} + {groupItems.map((item) => { + const itemIndex = filteredItems.findIndex((entry) => entry.value === item.value); + const isSelected = item.value === resolvedValue; + const isActive = itemIndex === activeIndex; + + return ( + + ); + })} +
+ ))} +
+ + )} + {footer ? (
{footer} diff --git a/packages/ui/src/components/combobox.variants.ts b/packages/ui/src/components/combobox.variants.ts index fc06521..a74f3af 100644 --- a/packages/ui/src/components/combobox.variants.ts +++ b/packages/ui/src/components/combobox.variants.ts @@ -27,26 +27,36 @@ export const comboboxSearchVariants = cva([ ]); export const comboboxListVariants = cva([ - "max-h-[18rem] overflow-y-auto p-1" + "max-h-[18rem] overflow-y-auto p-1.5 transition-[opacity,transform] duration-[var(--dur-base)] ease-[var(--ease-standard)]" ]); export const comboboxGroupVariants = cva([ - "grid gap-1" + "grid gap-1.5 p-0.5 transition-opacity duration-[var(--dur-fast)] ease-[var(--ease-standard)]" ]); export const comboboxLabelVariants = cva([ - "px-2.5 py-2 text-xs font-medium uppercase tracking-[var(--tracking-caps)] text-[var(--color-muted-foreground)]" + "px-3 py-1.5 text-xs font-medium uppercase tracking-[var(--tracking-caps)] text-[var(--color-muted-foreground)]" ]); export const comboboxItemVariants = cva([ - "relative flex w-full cursor-default select-none items-start gap-3 rounded-[var(--ui-control-radius)] px-3 py-2 text-left text-sm text-[var(--color-foreground)] outline-none", - "transition-colors duration-[var(--dur-fast)] ease-[var(--ease-standard)]", - "data-[active=true]:bg-[var(--ui-control-bg)] data-[selected=true]:bg-[color-mix(in_oklch,var(--color-primary)_10%,var(--ui-panel-bg))]", - "data-[selected=true]:text-[var(--color-foreground)] data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-45" + "relative isolate flex w-full cursor-default select-none items-start gap-3 overflow-hidden rounded-[calc(var(--ui-control-radius)+0.1rem)] border border-transparent px-3 py-2.5 text-left text-sm text-[var(--color-foreground)] outline-none", + "bg-transparent shadow-[inset_0_1px_0_transparent]", + "before:pointer-events-none before:absolute before:inset-0 before:rounded-[inherit] before:bg-[radial-gradient(circle_at_left,color-mix(in_oklch,var(--color-primary-container)_42%,transparent),transparent_74%)] before:opacity-0 before:translate-x-[-12%] before:transition-[opacity,transform] before:duration-[var(--dur-base)] before:ease-[var(--ease-emphasized)] before:content-['']", + "[&>*]:relative [&>*]:z-[1]", + "transition-[color,background-color,border-color,box-shadow,transform,opacity] duration-[var(--dur-fast)] ease-[var(--ease-standard)]", + "hover:-translate-y-px hover:border-[color-mix(in_oklch,var(--color-border)_72%,transparent)] hover:bg-[color-mix(in_oklch,var(--color-surface-container-high)_72%,white_28%)] hover:shadow-[inset_0_1px_0_color-mix(in_oklch,white_52%,transparent)] hover:before:opacity-72 hover:before:translate-x-0", + "data-[active=true]:-translate-y-px data-[active=true]:translate-x-[1px] data-[active=true]:border-[color-mix(in_oklch,var(--color-primary)_14%,var(--color-border))] data-[active=true]:bg-[linear-gradient(180deg,color-mix(in_oklch,var(--color-surface-container-high)_84%,white_16%),color-mix(in_oklch,var(--ui-control-bg)_82%,white_18%))] data-[active=true]:shadow-[inset_0_1px_0_color-mix(in_oklch,white_54%,transparent),0_10px_22px_color-mix(in_oklch,var(--color-primary)_8%,transparent)] data-[active=true]:before:opacity-80 data-[active=true]:before:translate-x-0", + "data-[selected=true]:translate-x-[2px] data-[selected=true]:border-[color-mix(in_oklch,var(--color-primary)_22%,var(--color-border))] data-[selected=true]:bg-[linear-gradient(180deg,color-mix(in_oklch,var(--color-primary-container)_56%,white_44%),color-mix(in_oklch,var(--ui-control-bg)_74%,white_26%))] data-[selected=true]:shadow-[inset_0_1px_0_color-mix(in_oklch,white_60%,transparent),0_12px_24px_color-mix(in_oklch,var(--color-primary)_10%,transparent)] data-[selected=true]:before:opacity-100 data-[selected=true]:before:translate-x-0", + "[&_[data-slot=label]]:transition-colors [&_[data-slot=label]]:duration-[var(--dur-fast)] [&_[data-slot=description]]:transition-colors [&_[data-slot=description]]:duration-[var(--dur-fast)]", + "[&[data-active]_[data-slot=description]]:text-[color-mix(in_oklch,var(--color-foreground)_74%,var(--color-muted-foreground))]", + "[&[data-selected]_[data-slot=description]]:text-[color-mix(in_oklch,var(--color-primary)_46%,var(--color-muted-foreground))]", + "motion-reduce:hover:-translate-y-0 motion-reduce:data-[active=true]:-translate-y-0 motion-reduce:data-[active=true]:translate-x-0 motion-reduce:data-[selected=true]:translate-x-0", + "data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-45", + getMotionRecipeClassNames("ring") ]); export const comboboxEmptyVariants = cva([ - "px-3 py-6 text-center text-sm text-[var(--color-muted-foreground)]" + "mx-1.5 my-1.5 rounded-[calc(var(--ui-control-radius)+0.15rem)] border border-[color-mix(in_oklch,var(--color-border)_74%,transparent)] bg-[color-mix(in_oklch,var(--color-surface-container-low)_76%,white_24%)] px-4 py-6 text-center text-sm text-[var(--color-muted-foreground)] shadow-[inset_0_1px_0_color-mix(in_oklch,white_44%,transparent)] motion-enter-fade motion-enter-rise" ]); export const comboboxFooterVariants = cva([ diff --git a/packages/ui/src/components/command.test.tsx b/packages/ui/src/components/command.test.tsx index 2bc1c13..49dee59 100644 --- a/packages/ui/src/components/command.test.tsx +++ b/packages/ui/src/components/command.test.tsx @@ -40,13 +40,23 @@ describe("Command", () => { const root = document.querySelector('[data-slot="root"]'); const input = screen.getByPlaceholderText("Search actions"); + const control = input.closest('[data-slot="control"]'); expect(root).toHaveAttribute("data-slot", "root"); + expect(control).toBeInTheDocument(); expect(input).toHaveAttribute("data-slot", "input"); + expect(control?.querySelector('[data-slot="prefix"]')).toBeTruthy(); expect(document.querySelector('[data-slot="list"]')).toBeInTheDocument(); expect(screen.getByText("Open legal review").closest('[data-slot="item"]')).toBeInTheDocument(); expect(screen.getByText("G L")).toHaveAttribute("data-slot", "shortcut"); + await user.click(input); + await user.keyboard("{ArrowDown}"); + expect(screen.getByText("Open legal review").closest('[data-slot="item"]')).toHaveAttribute( + "data-selected", + "true" + ); + await user.type(input, "zzz"); expect(await screen.findByText("No results.")).toHaveAttribute("data-slot", "empty"); }); @@ -113,7 +123,9 @@ describe("Command", () => { ); - expect(screen.getByText("Searching workspace…")).toHaveAttribute("data-slot", "loading"); + expect(document.querySelector('[data-slot="root"]')).toHaveAttribute("data-loading", ""); + expect(document.querySelector('[data-slot="root"]')).toHaveAttribute("aria-busy", "true"); + expect(screen.getByText("Searching workspace…").closest('[data-slot="loading"]')).toBeInTheDocument(); expect(screen.getByText("Manage commands")).toBeInTheDocument(); }); diff --git a/packages/ui/src/components/command.tsx b/packages/ui/src/components/command.tsx index 1950786..46dc88f 100644 --- a/packages/ui/src/components/command.tsx +++ b/packages/ui/src/components/command.tsx @@ -1,7 +1,10 @@ import * as DialogPrimitive from "@radix-ui/react-dialog"; import { Command as CommandPrimitive } from "cmdk"; +import { AnimatePresence, motion, useReducedMotion } from "motion/react"; import { forwardRef, + useEffect, + useState, type ComponentPropsWithoutRef, type ElementRef, type ReactNode @@ -28,6 +31,8 @@ import { DialogHeader, DialogTitle } from "./dialog"; +import { InputGroup, InputGroupPrefix } from "./input-group"; +import { SpinnerIcon } from "../lib/icons"; import { cn } from "../lib/cn"; import { createDataAttributes, createSlot } from "../lib/contracts"; @@ -46,6 +51,32 @@ function SearchIcon() { ); } +function useMotionDisabled() { + const prefersReducedMotion = useReducedMotion(); + const [isStaticMotion, setIsStaticMotion] = useState(false); + + useEffect(() => { + if (typeof document === "undefined") { + return; + } + + const syncMotionMode = () => { + setIsStaticMotion(document.documentElement.dataset.motion === "static"); + }; + + syncMotionMode(); + + const observer = new MutationObserver(syncMotionMode); + observer.observe(document.documentElement, { + attributeFilter: ["data-motion"] + }); + + return () => observer.disconnect(); + }, []); + + return prefersReducedMotion || isStaticMotion; +} + export type CommandProps = ComponentPropsWithoutRef & { footer?: ReactNode; loading?: boolean; @@ -64,21 +95,41 @@ export const Command = forwardRef, CommandPr }, ref ) { + const disableMotion = useMotionDisabled(); + return ( - {loading ? ( -
- {loadingMessage} -
- ) : null} + + {loading ? ( + +
+
+ + ) : null} + {children} {footer ? (
(function CommandInput({ className, wrapperClassName, ...props }, ref) { return ( -
- + + + + -
+ ); }); diff --git a/packages/ui/src/components/command.variants.ts b/packages/ui/src/components/command.variants.ts index 544a00b..cbc9504 100644 --- a/packages/ui/src/components/command.variants.ts +++ b/packages/ui/src/components/command.variants.ts @@ -2,8 +2,10 @@ import { cva } from "../lib/cva"; import { getMotionRecipeClassNames } from "../lib/motion"; export const commandVariants = cva([ - "flex h-full w-full flex-col overflow-hidden rounded-[var(--ui-panel-radius)] border border-[var(--ui-panel-border)]", + "relative flex h-full w-full flex-col overflow-hidden rounded-[var(--ui-panel-radius)] border border-[var(--ui-panel-border)]", "bg-[var(--ui-panel-bg)] text-[var(--color-card-foreground)] shadow-[var(--ui-panel-shadow)] [border-width:var(--ui-panel-border-width)] backdrop-blur-[var(--ui-panel-backdrop-blur)]", + "[&_[data-slot=list]]:transition-[opacity,filter] [&_[data-slot=list]]:duration-[var(--dur-base)] [&_[data-slot=list]]:ease-[var(--ease-standard)]", + "data-[loading]:[&_[data-slot=list]]:opacity-70 data-[loading]:[&_[data-slot=list]]:saturate-[0.98]", getMotionRecipeClassNames("transition", "ring") ]); @@ -13,7 +15,10 @@ export const commandDialogContentVariants = cva([ ]); export const commandInputWrapperVariants = cva([ - "flex items-center gap-3 border-b border-[var(--ui-panel-border)] px-4" + "rounded-none border-0 border-b border-[var(--ui-panel-border)] bg-transparent px-4 shadow-none backdrop-blur-none", + "data-[disabled]:bg-transparent data-[readonly]:bg-transparent", + "focus-within:-translate-y-0 focus-within:border-[var(--ui-panel-border)]", + "focus-within:shadow-none focus-within:ring-0 focus-within:ring-offset-0" ]); export const commandInputVariants = cva([ @@ -22,34 +27,44 @@ export const commandInputVariants = cva([ ]); export const commandListVariants = cva([ - "max-h-[22rem] overflow-y-auto overflow-x-hidden p-2" + "max-h-[22rem] overflow-y-auto overflow-x-hidden p-2.5 transition-[opacity,transform] duration-[var(--dur-base)] ease-[var(--ease-standard)]" ]); export const commandLoadingVariants = cva([ - "px-4 py-8 text-sm text-[var(--color-muted-foreground)]" + "mx-3 mt-2 flex items-center gap-2.5 rounded-[calc(var(--ui-control-radius)+0.15rem)] border border-[color-mix(in_oklch,var(--color-primary)_16%,var(--ui-panel-border))] bg-[linear-gradient(180deg,color-mix(in_oklch,var(--color-primary-container)_34%,white_66%),color-mix(in_oklch,var(--ui-panel-bg)_88%,white_12%))] px-3.5 py-2.5 text-sm text-[var(--color-foreground)] shadow-[inset_0_1px_0_color-mix(in_oklch,white_54%,transparent),0_10px_22px_color-mix(in_oklch,var(--color-primary)_8%,transparent)]" ]); export const commandEmptyVariants = cva([ - "py-10 text-center text-sm text-[var(--color-muted-foreground)]" + "mx-2 my-2 rounded-[calc(var(--ui-control-radius)+0.15rem)] border border-[color-mix(in_oklch,var(--color-border)_74%,transparent)] bg-[color-mix(in_oklch,var(--color-surface-container-low)_76%,white_24%)] px-4 py-7 text-center text-sm text-[var(--color-muted-foreground)] shadow-[inset_0_1px_0_color-mix(in_oklch,white_44%,transparent)] motion-enter-fade motion-enter-rise" ]); export const commandGroupVariants = cva([ "overflow-hidden p-1 text-[var(--color-foreground)]", - "[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5", + "[&_[cmdk-group-heading]]:px-3 [&_[cmdk-group-heading]]:py-1.5", "[&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium", "[&_[cmdk-group-heading]]:uppercase [&_[cmdk-group-heading]]:tracking-[var(--tracking-caps)]", - "[&_[cmdk-group-heading]]:text-[var(--color-muted-foreground)]" + "[&_[cmdk-group-heading]]:text-[var(--color-muted-foreground)]", + "[&_[cmdk-group-items]]:grid [&_[cmdk-group-items]]:gap-1" ]); export const commandItemVariants = cva([ - "relative flex cursor-default select-none items-center gap-3 rounded-[var(--ui-control-radius)] px-3 py-2 text-sm outline-none", - "text-[var(--color-foreground)] transition-colors duration-[var(--dur-fast)] ease-[var(--ease-standard)]", - "data-[selected=true]:bg-[var(--ui-control-bg)] data-[selected=true]:text-[var(--color-foreground)]", - "data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-45" + "relative isolate flex min-w-0 cursor-default select-none items-center gap-3 overflow-hidden rounded-[calc(var(--ui-control-radius)+0.1rem)] border border-transparent px-3 py-2.5 text-sm outline-none", + "bg-transparent text-[var(--color-foreground)] shadow-[inset_0_1px_0_transparent]", + "before:pointer-events-none before:absolute before:inset-0 before:rounded-[inherit] before:bg-[radial-gradient(circle_at_left,color-mix(in_oklch,var(--color-primary-container)_42%,transparent),transparent_74%)] before:opacity-0 before:translate-x-[-12%] before:transition-[opacity,transform] before:duration-[var(--dur-base)] before:ease-[var(--ease-emphasized)] before:content-['']", + "[&>*]:relative [&>*]:z-[1]", + "transition-[color,background-color,border-color,box-shadow,transform] duration-[var(--dur-fast)] ease-[var(--ease-standard)]", + "focus-visible:ring-2 focus-visible:ring-[var(--color-ring)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--ui-panel-bg)]", + "hover:-translate-y-px hover:border-[color-mix(in_oklch,var(--color-border)_72%,transparent)] hover:bg-[color-mix(in_oklch,var(--color-surface-container-high)_72%,white_28%)] hover:shadow-[inset_0_1px_0_color-mix(in_oklch,white_52%,transparent)] hover:before:opacity-72 hover:before:translate-x-0", + "data-[selected=true]:-translate-y-px data-[selected=true]:translate-x-[2px] data-[selected=true]:border-[color-mix(in_oklch,var(--color-primary)_20%,var(--color-border))] data-[selected=true]:bg-[linear-gradient(180deg,color-mix(in_oklch,var(--color-primary-container)_58%,white_42%),color-mix(in_oklch,var(--ui-control-bg)_76%,white_24%))] data-[selected=true]:shadow-[inset_0_1px_0_color-mix(in_oklch,white_60%,transparent),0_12px_24px_color-mix(in_oklch,var(--color-primary)_10%,transparent)] data-[selected=true]:before:opacity-100 data-[selected=true]:before:translate-x-0", + "[&_[data-slot=shortcut]]:transition-colors [&_[data-slot=shortcut]]:duration-[var(--dur-fast)] [&_[data-slot=shortcut]]:ease-[var(--ease-standard)]", + "[&[data-selected=true]_[data-slot=shortcut]]:text-[color-mix(in_oklch,var(--color-primary)_72%,var(--color-foreground))]", + "motion-reduce:hover:-translate-y-0 motion-reduce:data-[selected=true]:-translate-y-0 motion-reduce:data-[selected=true]:translate-x-0", + "data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-45", + getMotionRecipeClassNames("ring") ]); export const commandSeparatorVariants = cva([ - "-mx-1 my-1 h-px bg-[var(--color-border)]" + "-mx-0.5 my-1.5 h-px bg-[color-mix(in_oklch,var(--color-border)_82%,transparent)]" ]); export const commandShortcutVariants = cva([ diff --git a/packages/ui/src/components/data-table.test.tsx b/packages/ui/src/components/data-table.test.tsx index fc888cc..9d8146a 100644 --- a/packages/ui/src/components/data-table.test.tsx +++ b/packages/ui/src/components/data-table.test.tsx @@ -3,7 +3,7 @@ import userEvent from "@testing-library/user-event"; import { describe, expect, it, vi } from "vitest"; import { Button } from "./button"; -import { DataTable, type DataTableColumn } from "./data-table"; +import { DataTable, DataTableSearch, type DataTableColumn } from "./data-table"; type ReleaseRow = { id: string; @@ -103,11 +103,13 @@ describe("DataTable", () => { /> ); + const search = screen.getByRole("searchbox", { name: "Search rows" }); + const searchControl = search.closest('[data-slot="control"]'); + expect(screen.getByRole("table").closest('[data-slot="root"]')).toBeInTheDocument(); - expect(screen.getByRole("searchbox", { name: "Search rows" })).toHaveAttribute( - "data-slot", - "input" - ); + expect(search).toHaveAttribute("data-slot", "input"); + expect(searchControl).toBeInTheDocument(); + expect(searchControl?.querySelector('[data-slot="prefix"]')).toBeTruthy(); expect( screen.getByRole("button", { name: "Create lane" }).closest('[data-slot="actions"]') ).toBeInTheDocument(); @@ -207,6 +209,21 @@ describe("DataTable", () => { expect(screen.getByRole("button", { name: "Next" })).toBeDisabled(); }); + it("keeps search input and wrapper className semantics distinct", () => { + render( + + ); + + const search = screen.getByRole("searchbox", { name: "Search rows" }); + + expect(search).toHaveClass("search-input-override"); + expect(search.closest('[data-slot="control"]')).toHaveClass("search-wrapper-override"); + }); + it("renders loading status without dropping the table chrome", () => { render(); diff --git a/packages/ui/src/components/data-table.tsx b/packages/ui/src/components/data-table.tsx index cbc9e10..7f2b93a 100644 --- a/packages/ui/src/components/data-table.tsx +++ b/packages/ui/src/components/data-table.tsx @@ -44,6 +44,7 @@ import { EmptyStateTitle } from "./empty-state"; import { Input, type InputProps } from "./input"; +import { InputGroup, InputGroupPrefix } from "./input-group"; import { Sheet, SheetContent, @@ -585,7 +586,7 @@ function DataTableInner(
{shouldRenderSearch ? ( -
+
{ @@ -650,12 +651,20 @@ function DataTableInner( {selectionEnabled && selectedRows.length > 0 ? ( -
- {typeof selectionLabel === "function" - ? selectionLabel(selectedRows) - : selectionLabel ?? `${selectedRows.length} selected`} +
+

+ Selection ready +

+
+ {typeof selectionLabel === "function" + ? selectionLabel(selectedRows) + : selectionLabel ?? `${selectedRows.length} selected`} +
-
+
{selectionActions?.(selectedRows)}
-
- {pageStart}-{pageEnd} of {filteredRowCount} +
+ + Visible rows + + + {pageStart}-{pageEnd} of {filteredRowCount} +
{resolvedPageSizeOptions.length > 1 ? ( -
+
Rows ; + function DataTableSearch({ className, type = "search", wrapperClassName, ...props }, ref) { + return ( + + + + + + + ); } ); diff --git a/packages/ui/src/components/data-table.variants.ts b/packages/ui/src/components/data-table.variants.ts index 89f0eeb..b820147 100644 --- a/packages/ui/src/components/data-table.variants.ts +++ b/packages/ui/src/components/data-table.variants.ts @@ -4,19 +4,30 @@ import { getMotionRecipeClassNames } from "../lib/motion"; export const dataTableRootVariants = cva("grid gap-4 text-[var(--color-foreground)]"); export const dataTableToolbarVariants = cva( - "flex flex-wrap items-center justify-between gap-3" + [ + "flex flex-wrap items-center justify-between gap-3 rounded-[calc(var(--ui-card-radius)-0.25rem)]", + "border border-[color-mix(in_oklch,var(--ui-card-subtle-border)_84%,transparent)] [border-width:var(--ui-card-border-width)]", + "bg-[linear-gradient(180deg,color-mix(in_oklch,var(--ui-card-subtle-bg)_82%,white_18%),color-mix(in_oklch,var(--ui-card-default-bg)_88%,white_12%))]", + "px-3 py-3 shadow-[var(--ui-card-subtle-shadow)] sm:px-4", + "transition-[border-color,background-color,box-shadow] duration-[var(--dur-base)] ease-[var(--ease-standard)]", + "focus-within:border-[color-mix(in_oklch,var(--color-primary)_14%,var(--ui-card-subtle-border))]", + "focus-within:shadow-[0_16px_32px_color-mix(in_oklch,var(--color-primary)_8%,transparent),inset_0_1px_0_rgba(255,255,255,0.42)]" + ] ); export const dataTableContentVariants = cva( [ - "overflow-hidden rounded-[var(--ui-card-radius)] border border-[var(--ui-card-default-border)] bg-[var(--ui-card-default-bg)] shadow-[var(--ui-card-default-shadow)] [border-width:var(--ui-card-border-width)]", + "relative overflow-hidden rounded-[var(--ui-card-radius)] border border-[var(--ui-card-default-border)] [border-width:var(--ui-card-border-width)]", + "bg-[linear-gradient(180deg,color-mix(in_oklch,var(--ui-card-default-bg)_74%,white_26%),color-mix(in_oklch,var(--ui-card-default-bg)_92%,var(--ui-card-subtle-bg)))]", + "shadow-[var(--ui-card-default-shadow)]", + "before:pointer-events-none before:absolute before:inset-x-0 before:top-0 before:h-16 before:bg-[linear-gradient(180deg,color-mix(in_oklch,white_54%,transparent),transparent)] before:content-['']", getMotionRecipeClassNames("transition", "ring") ], { variants: { loading: { false: "", - true: "opacity-90" + true: "opacity-95 saturate-[0.96]" } }, defaultVariants: { @@ -28,12 +39,15 @@ export const dataTableContentVariants = cva( export const dataTableTableVariants = cva("min-w-full border-collapse align-middle"); export const dataTableHeaderVariants = cva( - "bg-[color-mix(in_oklch,var(--ui-card-subtle-bg)_74%,var(--ui-card-default-bg))]" + [ + "bg-[linear-gradient(180deg,color-mix(in_oklch,var(--ui-card-subtle-bg)_86%,white_14%),color-mix(in_oklch,var(--ui-card-default-bg)_82%,var(--ui-card-subtle-bg)))]", + "shadow-[inset_0_-1px_0_color-mix(in_oklch,var(--color-border)_74%,transparent)]" + ] ); export const dataTableHeaderCellVariants = cva( [ - "px-4 text-sm font-medium uppercase tracking-[var(--tracking-caps)]", + "relative px-4 first:pl-5 last:pr-5 align-middle text-[0.72rem] font-medium uppercase tracking-[var(--tracking-caps)]", "text-[var(--color-muted-foreground)]" ], { @@ -44,8 +58,8 @@ export const dataTableHeaderCellVariants = cva( end: "text-right" }, density: { - comfortable: "py-3", - compact: "py-2.5 text-xs" + comfortable: "py-4", + compact: "py-3 text-[0.68rem]" }, sortable: { false: "", @@ -64,18 +78,33 @@ export const dataTableBodyVariants = cva(""); export const dataTableRowVariants = cva( [ + "group/row", "border-t border-[color-mix(in_oklch,var(--ui-card-default-border)_88%,transparent)]", - "transition-colors duration-200" + "transition-[background-color,box-shadow] duration-[var(--dur-base)] ease-[var(--ease-standard)]", + "[&>td]:transition-[background-color,box-shadow] [&>td]:duration-[var(--dur-base)] [&>td]:ease-[var(--ease-standard)]", + "motion-reduce:[&>td]:transition-none" ], { variants: { interactive: { false: "", - true: "hover:bg-[color-mix(in_oklch,var(--ui-card-subtle-bg)_72%,var(--ui-card-default-bg))]" + true: + [ + "hover:bg-[linear-gradient(180deg,color-mix(in_oklch,var(--ui-card-subtle-bg)_78%,white_22%),color-mix(in_oklch,var(--ui-card-default-bg)_88%,var(--ui-card-subtle-bg)))]", + "hover:shadow-[inset_0_1px_0_color-mix(in_oklch,white_34%,transparent),0_10px_20px_color-mix(in_oklch,var(--color-primary)_5%,transparent)]", + "hover:[&>td]:bg-[color-mix(in_oklch,var(--color-surface-bright)_62%,transparent)]", + "hover:[&>td]:shadow-[inset_0_1px_0_color-mix(in_oklch,white_36%,transparent)]" + ] }, selected: { false: "", - true: "bg-[color-mix(in_oklch,var(--color-primary)_8%,var(--ui-card-default-bg))]" + true: + [ + "bg-[linear-gradient(180deg,color-mix(in_oklch,var(--color-primary-container)_64%,white_36%),color-mix(in_oklch,var(--color-primary)_8%,var(--ui-card-default-bg)))]", + "shadow-[inset_0_1px_0_color-mix(in_oklch,white_36%,transparent),0_14px_24px_color-mix(in_oklch,var(--color-primary)_7%,transparent)]", + "[&>td]:bg-[color-mix(in_oklch,var(--color-primary-container)_26%,transparent)]", + "[&>td]:shadow-[inset_0_1px_0_color-mix(in_oklch,white_40%,transparent)]" + ] } }, defaultVariants: { @@ -86,7 +115,7 @@ export const dataTableRowVariants = cva( ); export const dataTableCellVariants = cva( - "px-4 text-[var(--color-card-foreground)]", + "px-4 first:pl-5 last:pr-5 align-top text-[var(--color-card-foreground)]", { variants: { align: { @@ -95,8 +124,8 @@ export const dataTableCellVariants = cva( end: "text-right" }, density: { - comfortable: "py-3 text-sm leading-6", - compact: "py-2.5 text-[0.8125rem] leading-5" + comfortable: "py-4 text-sm leading-6", + compact: "py-3 text-[0.8125rem] leading-5" } }, defaultVariants: { @@ -107,19 +136,30 @@ export const dataTableCellVariants = cva( ); export const dataTableSearchContainerVariants = cva( - "w-full max-w-[22rem] min-w-[14rem]" + "w-full max-w-[23.5rem] min-w-[15rem]" ); export const dataTablePaginationVariants = cva( - "flex flex-wrap items-center justify-between gap-3 px-4 py-3" + [ + "flex flex-wrap items-center justify-between gap-3 border-t px-5 py-3", + "border-[color-mix(in_oklch,var(--color-border)_72%,transparent)]", + "bg-[linear-gradient(180deg,color-mix(in_oklch,var(--ui-card-default-bg)_86%,white_14%),color-mix(in_oklch,var(--ui-card-subtle-bg)_78%,white_22%))]", + "transition-[border-color,background-color,box-shadow] duration-[var(--dur-base)] ease-[var(--ease-standard)]", + "[&>*]:transition-[background-color,border-color,box-shadow,opacity] [&>*]:duration-[var(--dur-base)] [&>*]:ease-[var(--ease-standard)]", + "motion-reduce:[&>*]:transition-none" + ] ); export const dataTableSelectionBarVariants = cva( [ - "flex flex-wrap items-center justify-between gap-3 rounded-[var(--ui-card-radius)]", - "border border-[color-mix(in_oklch,var(--color-primary)_24%,var(--ui-card-default-border))] [border-width:var(--ui-card-border-width)]", - "bg-[color-mix(in_oklch,var(--color-primary)_7%,var(--ui-card-default-bg))] px-4 py-3", - "shadow-[var(--ui-card-subtle-shadow)]" + "flex flex-wrap items-center justify-between gap-3 rounded-[calc(var(--ui-card-radius)-0.2rem)]", + "border border-[color-mix(in_oklch,var(--color-primary)_26%,var(--ui-card-default-border))] [border-width:var(--ui-card-border-width)]", + "bg-[linear-gradient(180deg,color-mix(in_oklch,var(--color-primary-container)_70%,white_30%),color-mix(in_oklch,var(--color-primary)_6%,var(--ui-card-default-bg)))] px-4 py-3.5", + "shadow-[var(--ui-card-subtle-shadow)]", + "motion-enter-fade motion-enter-rise", + "transition-[border-color,background-color,box-shadow] duration-[var(--dur-base)] ease-[var(--ease-standard)]", + "[&>*]:transition-opacity [&>*]:duration-[var(--dur-fast)] [&>*]:ease-[var(--ease-standard)]", + "motion-reduce:[&>*]:transition-none" ] ); diff --git a/packages/ui/src/components/empty-state.test.tsx b/packages/ui/src/components/empty-state.test.tsx index 1836d65..d5c943d 100644 --- a/packages/ui/src/components/empty-state.test.tsx +++ b/packages/ui/src/components/empty-state.test.tsx @@ -1,4 +1,4 @@ -import { render, screen } from "@testing-library/react"; +import { render, screen, waitFor } from "@testing-library/react"; import { describe, expect, it } from "vitest"; import { Button } from "./button"; @@ -44,6 +44,7 @@ describe("EmptyState", () => { it("supports className overrides on sub-slots", () => { render( + A1 No saved views @@ -51,6 +52,7 @@ describe("EmptyState", () => { ); expect(screen.getByTestId("empty-state")).toHaveAttribute("data-tone", "subtle"); + expect(screen.getByText("A1").closest('[data-slot="media"]')).toHaveClass("justify-items-start"); expect(screen.getByText("No saved views")).toHaveClass("text-left"); expect(screen.getByText("No saved views").closest('[data-slot="header"]')).toHaveClass( "items-start" @@ -104,4 +106,59 @@ describe("EmptyState", () => { expect(screen.getByText("Workspace")).toHaveAttribute("data-slot", "eyebrow"); expect(screen.getByText("42")).toHaveAttribute("data-size", "hero"); }); + + it("adds subtle motion hooks by default and disables them in static motion mode", async () => { + const originalMotionMode = document.documentElement.dataset.motion; + try { + const { rerender } = render( + + A + + No matching releases + + + + + + + ); + + expect(screen.getByTestId("default-media")).toHaveClass("motion-breathe"); + expect(screen.getByRole("button", { name: "Create release" })).toHaveClass( + "[animation:aiui-slide-up-sm_var(--dur-base)_var(--ease-emphasized)_both]" + ); + + document.documentElement.dataset.motion = "static"; + + rerender( + + A + + No matching releases + + + + + + + ); + + await waitFor(() => { + expect(screen.getByTestId("default-media")).not.toHaveClass("motion-breathe"); + expect(screen.getByRole("button", { name: "Create release" })).not.toHaveClass( + "[animation:aiui-slide-up-sm_var(--dur-base)_var(--ease-emphasized)_both]" + ); + }); + } finally { + if (originalMotionMode) { + document.documentElement.dataset.motion = originalMotionMode; + } else { + delete document.documentElement.dataset.motion; + } + } + }); }); diff --git a/packages/ui/src/components/empty-state.tsx b/packages/ui/src/components/empty-state.tsx index ebafd9f..f2a759e 100644 --- a/packages/ui/src/components/empty-state.tsx +++ b/packages/ui/src/components/empty-state.tsx @@ -1,4 +1,14 @@ -import { forwardRef, type ComponentPropsWithoutRef } from "react"; +import { useReducedMotion } from "motion/react"; +import { + Children, + cloneElement, + forwardRef, + isValidElement, + useEffect, + useState, + type ComponentPropsWithoutRef, + type CSSProperties +} from "react"; import { emptyStateActionsVariants, @@ -13,6 +23,40 @@ import { cn } from "../lib/cn"; import type { VariantProps } from "../lib/cva"; import { createDataAttributes, createSlot } from "../lib/contracts"; +function getIsStaticMotion() { + if (typeof document === "undefined") { + return false; + } + + return document.documentElement.dataset.motion === "static"; +} + +function useMotionDisabled() { + const prefersReducedMotion = useReducedMotion(); + const [isStaticMotion, setIsStaticMotion] = useState(getIsStaticMotion); + + useEffect(() => { + if (typeof document === "undefined") { + return; + } + + const syncMotionMode = () => { + setIsStaticMotion(getIsStaticMotion()); + }; + + syncMotionMode(); + + const observer = new MutationObserver(syncMotionMode); + observer.observe(document.documentElement, { + attributeFilter: ["data-motion"] + }); + + return () => observer.disconnect(); + }, []); + + return prefersReducedMotion || isStaticMotion; +} + export type EmptyStateProps = ComponentPropsWithoutRef<"div"> & VariantProps; @@ -36,12 +80,20 @@ export type EmptyStateMediaProps = ComponentPropsWithoutRef<"div"> & export const EmptyStateMedia = forwardRef( function EmptyStateMedia({ className, size, ...props }, ref) { + const disableMotion = useMotionDisabled(); + const ambientMotionClassName = + disableMotion || size === "compact" + ? undefined + : size === "hero" + ? "motion-float-delayed will-change-transform" + : "motion-breathe will-change-transform"; + return (
); @@ -115,7 +167,31 @@ export type EmptyStateActionsProps = ComponentPropsWithoutRef<"div"> & VariantProps; export const EmptyStateActions = forwardRef( - function EmptyStateActions({ className, layout, ...props }, ref) { + function EmptyStateActions({ children, className, layout, ...props }, ref) { + const disableMotion = useMotionDisabled(); + const animatedChildren = disableMotion + ? children + : Children.map(children, (child, index) => { + if ( + !isValidElement<{ className?: string; style?: CSSProperties }>(child) || + typeof child.type === "symbol" + ) { + return child; + } + + return cloneElement(child, { + className: cn( + "[animation:aiui-slide-up-sm_var(--dur-base)_var(--ease-emphasized)_both]", + "will-change-transform", + child.props.className + ), + style: { + ...(child.props.style ?? {}), + animationDelay: `${Math.min(index * 70, 140)}ms` + } + }); + }); + return (
+ > + {animatedChildren} +
); } ); diff --git a/packages/ui/src/components/empty-state.variants.ts b/packages/ui/src/components/empty-state.variants.ts index 87c4bec..d3552df 100644 --- a/packages/ui/src/components/empty-state.variants.ts +++ b/packages/ui/src/components/empty-state.variants.ts @@ -3,8 +3,9 @@ import { getMotionRecipeClassNames } from "../lib/motion"; export const emptyStateVariants = cva( [ - "grid gap-6 rounded-[var(--ui-card-radius)] border shadow-[var(--ui-card-default-shadow)] [border-width:var(--ui-card-border-width)]", + "relative isolate grid gap-6 overflow-hidden rounded-[var(--ui-card-radius)] border shadow-[var(--ui-card-default-shadow)] [border-width:var(--ui-card-border-width)]", "text-[var(--color-card-foreground)]", + "[&>[data-slot=actions]]:relative [&>[data-slot=actions]]:z-[1] [&>[data-slot=header]]:relative [&>[data-slot=header]]:z-[1] [&>[data-slot=media]]:relative [&>[data-slot=media]]:z-[1]", getMotionRecipeClassNames("transition", "ring") ], { @@ -19,9 +20,19 @@ export const emptyStateVariants = cva( layout: { default: "p-8 sm:p-10", compact: - "gap-4 p-6 sm:grid-cols-[auto_minmax(0,1fr)] sm:items-center sm:[&>[data-slot=media]]:row-span-2 sm:[&>[data-slot=header]]:justify-items-start sm:[&>[data-slot=actions]]:col-start-2 sm:[&>[data-slot=actions]]:justify-start", + "gap-4 p-6 sm:grid-cols-[auto_minmax(0,1fr)] sm:items-center sm:[&>[data-slot=media]]:row-span-2 sm:[&>[data-slot=media]]:justify-self-start sm:[&>[data-slot=header]]:justify-items-start sm:[&>[data-slot=actions]]:col-start-2 sm:[&>[data-slot=actions]]:justify-start", split: - "p-6 sm:p-8 lg:grid-cols-[minmax(0,1fr)_auto] lg:items-center lg:[&>[data-slot=media]]:col-start-2 lg:[&>[data-slot=media]]:row-span-2 lg:[&>[data-slot=media]]:justify-self-end lg:[&>[data-slot=header]]:col-start-1 lg:[&>[data-slot=actions]]:col-start-1 lg:[&>[data-slot=actions]]:justify-start" + [ + "gap-5 p-6 sm:gap-6 sm:p-8", + "lg:grid-cols-[minmax(0,1.06fr)_minmax(15rem,0.84fr)] lg:gap-x-8 lg:gap-y-5 lg:items-center", + "lg:[&>[data-slot=media]]:col-start-2 lg:[&>[data-slot=media]]:row-span-2 lg:[&>[data-slot=media]]:justify-self-stretch lg:[&>[data-slot=media]]:self-stretch", + "lg:[&>[data-slot=header]]:col-start-1 lg:[&>[data-slot=header]]:max-w-[36rem] lg:[&>[data-slot=header]]:gap-3", + "lg:[&>[data-slot=actions]]:col-start-1 lg:[&>[data-slot=actions]]:justify-start lg:[&>[data-slot=actions]]:pt-1", + "lg:[&>[data-slot=header]_[data-slot=label]]:text-[clamp(2rem,3vw,3rem)] lg:[&>[data-slot=header]_[data-slot=label]]:leading-[1.08]", + "lg:[&>[data-slot=header]_[data-slot=description]]:max-w-[32rem] lg:[&>[data-slot=header]_[data-slot=description]]:text-[0.96rem] lg:[&>[data-slot=header]_[data-slot=description]]:leading-7", + "before:pointer-events-none before:absolute before:right-[-4rem] before:top-[-5rem] before:size-[16rem] before:rounded-full before:bg-[radial-gradient(circle,color-mix(in_oklch,var(--color-primary-container)_58%,white_42%)_0%,transparent_72%)] before:opacity-75 before:content-['']", + "after:pointer-events-none after:absolute after:bottom-[-7rem] after:right-[18%] after:size-[14rem] after:rounded-full after:bg-[radial-gradient(circle,color-mix(in_oklch,var(--color-tertiary-container)_54%,white_46%)_0%,transparent_74%)] after:opacity-65 after:content-['']" + ] }, align: { center: "justify-items-center text-center", @@ -38,16 +49,19 @@ export const emptyStateVariants = cva( export const emptyStateMediaVariants = cva( [ - "grid place-items-center rounded-[var(--ui-card-radius)] border [border-width:var(--ui-card-border-width)]", + "relative isolate grid place-items-center overflow-hidden rounded-[calc(var(--ui-card-radius)-0.125rem)] border [border-width:var(--ui-card-border-width)]", "border-[var(--ui-card-subtle-border)] bg-[linear-gradient(180deg,color-mix(in_oklch,var(--color-background)_72%,white_28%),var(--ui-card-subtle-bg))]", - "text-[var(--color-foreground)] shadow-[var(--ui-card-subtle-shadow)]" + "text-[var(--color-foreground)] shadow-[var(--ui-card-subtle-shadow)]", + "before:pointer-events-none before:absolute before:inset-x-[14%] before:top-0 before:h-[52%] before:rounded-full before:bg-[linear-gradient(180deg,color-mix(in_oklch,white_70%,transparent),transparent)] before:opacity-90 before:blur-2xl before:content-['']", + "after:pointer-events-none after:absolute after:inset-3 after:rounded-[calc(var(--ui-card-radius)-0.875rem)] after:border after:border-[color-mix(in_oklch,var(--color-border)_72%,transparent)] after:opacity-55 after:content-['']", + "[&>*]:relative [&>*]:z-[1]" ], { variants: { size: { compact: "min-h-16 min-w-16 p-3", default: "min-h-20 min-w-20 p-4", - hero: "min-h-28 min-w-28 p-6" + hero: "min-h-32 min-w-[10.5rem] p-5 sm:min-h-36 sm:min-w-[12rem] sm:p-6" } }, defaultVariants: { @@ -56,7 +70,7 @@ export const emptyStateMediaVariants = cva( } ); -export const emptyStateHeaderVariants = cva("grid max-w-[34rem] gap-2", { +export const emptyStateHeaderVariants = cva("grid max-w-[34rem] gap-2.5", { variants: { align: { center: "justify-items-center text-center", @@ -69,15 +83,15 @@ export const emptyStateHeaderVariants = cva("grid max-w-[34rem] gap-2", { }); export const emptyStateEyebrowVariants = cva( - "text-xs font-medium uppercase tracking-[var(--tracking-caps)] text-[var(--color-muted-foreground)]" + "inline-flex w-fit items-center rounded-full border border-[color-mix(in_oklch,var(--color-border)_68%,transparent)] bg-[color-mix(in_oklch,var(--color-surface-container-low)_70%,white_30%)] px-3 py-1 text-[0.72rem] font-medium uppercase tracking-[var(--tracking-caps)] text-[var(--color-muted-foreground)] shadow-[inset_0_1px_0_rgba(255,255,255,0.45)]" ); export const emptyStateTitleVariants = cva( - "text-2xl font-semibold tracking-[var(--tracking-tight)] text-[var(--color-foreground)]" + "text-[clamp(1.7rem,3vw,2.4rem)] font-semibold leading-[1.12] tracking-[var(--tracking-tight)] text-[var(--color-foreground)]" ); export const emptyStateDescriptionVariants = cva( - "max-w-[30rem] text-sm leading-6 text-[var(--color-muted-foreground)]" + "max-w-[30rem] text-[0.95rem] leading-7 text-[var(--color-muted-foreground)]" ); export const emptyStateActionsVariants = cva("flex flex-wrap items-center gap-3", { diff --git a/packages/ui/src/components/input.tsx b/packages/ui/src/components/input.tsx index 94573a8..05ab60d 100644 --- a/packages/ui/src/components/input.tsx +++ b/packages/ui/src/components/input.tsx @@ -3,6 +3,8 @@ import { type ComponentPropsWithoutRef } from "react"; +import { useInputGroupContext } from "./input-group"; +import { inputGroupInputVariants } from "./input-group.variants"; import { inputVariants } from "./input.variants"; import { cn } from "../lib/cn"; import type { VariantProps } from "../lib/cva"; @@ -33,10 +35,12 @@ export const Input = forwardRef(function Input( ref ) { const field = useFieldContext(); - const resolvedDisabled = disabled ?? field?.disabled ?? false; - const resolvedInvalid = invalid ?? field?.invalid ?? false; - const resolvedReadOnly = readOnly ?? field?.readOnly ?? false; - const resolvedRequired = required ?? field?.required ?? false; + const group = useInputGroupContext(); + const resolvedDisabled = disabled ?? group?.disabled ?? field?.disabled ?? false; + const resolvedInvalid = invalid ?? group?.invalid ?? field?.invalid ?? false; + const resolvedReadOnly = readOnly ?? group?.readOnly ?? field?.readOnly ?? false; + const resolvedRequired = required ?? group?.required ?? field?.required ?? false; + const resolvedSize = size ?? group?.size ?? "md"; return ( (function Input( invalid: resolvedInvalid, readonly: resolvedReadOnly, required: resolvedRequired, - size + size: resolvedSize })} aria-describedby={mergeIds( props["aria-describedby"], @@ -55,7 +59,10 @@ export const Input = forwardRef(function Input( resolvedInvalid ? field?.errorId : undefined )} aria-invalid={resolvedInvalid || undefined} - className={cn(inputVariants({ size }), className)} + className={cn( + group ? inputGroupInputVariants({ size: resolvedSize }) : inputVariants({ size: resolvedSize }), + className + )} disabled={resolvedDisabled} id={id ?? field?.inputId} readOnly={resolvedReadOnly} diff --git a/packages/ui/src/components/progress.test.tsx b/packages/ui/src/components/progress.test.tsx index 3452bb4..4db1f62 100644 --- a/packages/ui/src/components/progress.test.tsx +++ b/packages/ui/src/components/progress.test.tsx @@ -2,20 +2,35 @@ import { render, screen } from "@testing-library/react"; import { describe, expect, it } from "vitest"; import { Progress } from "./progress"; +import { setReducedMotionPreference } from "../test/a11y"; describe("Progress", () => { it("renders root and indicator slots for a determinate value", () => { - render(); + render( + + ); const progressbar = screen.getByRole("progressbar", { name: "Upload progress" }); const indicator = progressbar.querySelector('[data-slot="indicator"]'); expect(progressbar).toHaveAttribute("data-slot", "root"); + expect(progressbar).toHaveAttribute("data-pattern", "linear"); expect(progressbar).toHaveAttribute("data-size", "lg"); expect(progressbar).toHaveAttribute("data-state", "loading"); + expect(progressbar).toHaveAttribute("data-tone", "subtle"); + expect(progressbar).toHaveAttribute("data-variant", "success"); expect(progressbar).toHaveAttribute("aria-valuenow", "64"); + expect(indicator).toHaveAttribute("data-pattern", "linear"); + expect(indicator).toHaveAttribute("data-state", "loading"); expect(indicator).toHaveAttribute("data-variant", "success"); - expect(indicator).toHaveStyle({ width: "64%" }); + expect(indicator).toHaveStyle({ "--ui-progress-indicator-scale": "0.64" }); }); it("supports indeterminate and complete states", () => { @@ -26,7 +41,8 @@ describe("Progress", () => { expect(progressbar).toHaveAttribute("data-state", "indeterminate"); expect(progressbar).not.toHaveAttribute("aria-valuenow"); - expect(indicator).toHaveStyle({ width: "38%" }); + expect(indicator).toHaveAttribute("data-state", "indeterminate"); + expect(indicator).toHaveStyle({ "--ui-progress-indicator-scale": "0.38" }); rerender(); @@ -35,6 +51,87 @@ describe("Progress", () => { expect(progressbar).toHaveAttribute("data-state", "complete"); expect(progressbar).toHaveAttribute("aria-valuenow", "120"); - expect(indicator).toHaveStyle({ width: "100%" }); + expect(indicator).toHaveAttribute("data-state", "complete"); + expect(indicator).toHaveStyle({ "--ui-progress-indicator-scale": "1" }); + }); + + it("supports segmented dashboard-style progress", () => { + render( + + ); + + const progressbar = screen.getByRole("progressbar", { name: "Operational cost reduction" }); + const segments = progressbar.querySelector('[data-slot="segments"]'); + const segmentItems = progressbar.querySelectorAll('[data-slot="segment"]'); + const activeSegments = progressbar.querySelectorAll('[data-slot="segment"][data-active]'); + const indicator = progressbar.querySelector('[data-slot="indicator"]'); + + expect(progressbar).toHaveAttribute("data-pattern", "segmented"); + expect(progressbar).toHaveAttribute("data-segments", "20"); + expect(segments).toHaveAttribute("data-slot", "segments"); + expect(segments).toHaveAttribute("data-pattern", "segmented"); + expect(segmentItems).toHaveLength(20); + expect(activeSegments).toHaveLength(8); + expect(indicator).toBeNull(); + }); + + it("animates segmented indeterminate progress through the segment slots", () => { + render( + + ); + + const progressbar = screen.getByRole("progressbar", { name: "Background sync" }); + const segmentItems = progressbar.querySelectorAll('[data-slot="segment"]'); + + expect(progressbar).toHaveAttribute("data-state", "indeterminate"); + expect(segmentItems).toHaveLength(12); + expect(segmentItems[0]).toHaveAttribute("data-state", "indeterminate"); + expect(segmentItems[0]).toHaveAttribute("data-variant", "success"); + expect(segmentItems[0]).toHaveAttribute("data-active"); + expect(segmentItems[0]).toHaveStyle({ animationDelay: "0ms" }); + expect(segmentItems[11]).toHaveStyle({ animationDelay: "528ms" }); + }); + + it("collapses continuous motion when reduced motion is preferred", () => { + setReducedMotionPreference(true); + + const { rerender } = render(); + + let progressbar = screen.getByRole("progressbar", { name: "Reduced sync status" }); + let indicator = progressbar.querySelector('[data-slot="indicator"]'); + + expect(progressbar).toHaveAttribute("data-reduced-motion", ""); + expect(indicator).toHaveAttribute("data-reduced-motion", ""); + expect(indicator).toHaveStyle({ "--ui-progress-indicator-scale": "0.38" }); + + rerender( + + ); + + progressbar = screen.getByRole("progressbar", { name: "Reduced segmented sync" }); + + const activeSegments = progressbar.querySelectorAll('[data-slot="segment"][data-active]'); + const segmentItems = progressbar.querySelectorAll('[data-slot="segment"]'); + + expect(activeSegments).toHaveLength(5); + expect(segmentItems[0]).toHaveAttribute("data-reduced-motion", ""); + expect(segmentItems[0]).not.toHaveAttribute("style"); }); }); diff --git a/packages/ui/src/components/progress.tsx b/packages/ui/src/components/progress.tsx index 37f57bc..9fbb082 100644 --- a/packages/ui/src/components/progress.tsx +++ b/packages/ui/src/components/progress.tsx @@ -1,14 +1,28 @@ import * as ProgressPrimitive from "@radix-ui/react-progress"; -import { forwardRef, type ComponentPropsWithoutRef, type ElementRef } from "react"; +import { + forwardRef, + useEffect, + useState, + type ComponentPropsWithoutRef, + type CSSProperties, + type ElementRef +} from "react"; import { progressIndicatorVariants, + progressSegmentVariants, + progressSegmentsVariants, progressVariants } from "./progress.variants"; import { cn } from "../lib/cn"; import type { VariantProps } from "../lib/cva"; import { createDataAttributes, createSlot } from "../lib/contracts"; +const DEFAULT_SEGMENT_COUNT = 24; +const MIN_SEGMENT_COUNT = 6; +const MAX_SEGMENT_COUNT = 36; +const DEFAULT_INDETERMINATE_RATIO = 0.38; + function clampValue(value: number, max: number) { return Math.min(Math.max(value, 0), max); } @@ -21,17 +35,57 @@ function getState(value: number | null | undefined, max: number) { return clampValue(value, max) >= max ? "complete" : "loading"; } -function getIndicatorWidth(value: number | null | undefined, max: number) { - if (value == null) { - return "38%"; +function getSegmentCount(segmentCount: number | undefined) { + if (!Number.isFinite(segmentCount)) { + return DEFAULT_SEGMENT_COUNT; } - return `${(clampValue(value, max) / max) * 100}%`; + return Math.min(Math.max(Math.round(segmentCount as number), MIN_SEGMENT_COUNT), MAX_SEGMENT_COUNT); } +function getFilledSegmentCount( + value: number | null | undefined, + max: number, + segmentCount: number, + disableMotion = false +) { + if (value == null) { + return disableMotion + ? Math.max(1, Math.round(segmentCount * DEFAULT_INDETERMINATE_RATIO)) + : segmentCount; + } + + const ratio = clampValue(value, max) / max; + + if (ratio <= 0) { + return 0; + } + + return Math.max(1, Math.min(segmentCount, Math.round(ratio * segmentCount))); +} + +function motionIsDisabled() { + if (typeof document !== "undefined" && document.documentElement.dataset.motion === "static") { + return true; + } + + if (typeof window !== "undefined" && typeof window.matchMedia === "function") { + return window.matchMedia("(prefers-reduced-motion: reduce)").matches; + } + + return false; +} + +type LegacyMediaQueryList = MediaQueryList & { + addListener?: (listener: (event: MediaQueryListEvent) => void) => void; + removeListener?: (listener: (event: MediaQueryListEvent) => void) => void; +}; + export type ProgressProps = ComponentPropsWithoutRef & VariantProps & - VariantProps; + VariantProps & { + segmentCount?: number; + }; export const Progress = forwardRef< ElementRef, @@ -40,6 +94,8 @@ export const Progress = forwardRef< { className, max = 100, + pattern = "linear", + segmentCount, size, tone, value, @@ -48,36 +104,141 @@ export const Progress = forwardRef< }, ref ) { + const [disableMotion, setDisableMotion] = useState(motionIsDisabled); + + useEffect(() => { + if (typeof document === "undefined") { + return; + } + + const syncMotionState = () => { + setDisableMotion(motionIsDisabled()); + }; + + syncMotionState(); + + const observer = new MutationObserver(syncMotionState); + observer.observe(document.documentElement, { + attributeFilter: ["data-motion"] + }); + + const mediaQuery = + typeof window !== "undefined" && typeof window.matchMedia === "function" + ? (window.matchMedia("(prefers-reduced-motion: reduce)") as LegacyMediaQueryList) + : null; + const handleMotionPreferenceChange = () => { + syncMotionState(); + }; + + mediaQuery?.addEventListener?.("change", handleMotionPreferenceChange); + mediaQuery?.addListener?.(handleMotionPreferenceChange); + + return () => { + observer.disconnect(); + mediaQuery?.removeEventListener?.("change", handleMotionPreferenceChange); + mediaQuery?.removeListener?.(handleMotionPreferenceChange); + }; + }, []); + const resolvedMax = max > 0 ? max : 100; const state = getState(value, resolvedMax); + const resolvedSegmentCount = getSegmentCount(segmentCount); + const filledSegmentCount = getFilledSegmentCount( + value, + resolvedMax, + resolvedSegmentCount, + disableMotion + ); + const segments = pattern === "segmented" ? Array.from({ length: resolvedSegmentCount }) : null; + const linearIndicatorScale = + value == null + ? DEFAULT_INDETERMINATE_RATIO + : clampValue(value, resolvedMax) / resolvedMax; + const indicatorStyle: CSSProperties = { + "--ui-progress-indicator-scale": String(linearIndicatorScale) + } as CSSProperties; return ( - + {pattern === "segmented" ? ( + + ) : ( + + )} ); }); diff --git a/packages/ui/src/components/progress.variants.ts b/packages/ui/src/components/progress.variants.ts index ef59809..ba6aa2f 100644 --- a/packages/ui/src/components/progress.variants.ts +++ b/packages/ui/src/components/progress.variants.ts @@ -3,22 +3,31 @@ import { getMotionRecipeClassNames } from "../lib/motion"; export const progressVariants = cva( [ - "relative w-full overflow-hidden rounded-full border", - "border-[color-mix(in_oklch,var(--color-border)_92%,transparent)] bg-[var(--color-surface)]" + "relative isolate w-full overflow-hidden rounded-[var(--ui-progress-radius)] border outline-none", + "[border-width:var(--ui-progress-track-border-width)] border-[var(--ui-progress-track-border)] [background:var(--ui-progress-track-bg)] shadow-[var(--ui-progress-track-shadow)]", + "before:pointer-events-none before:absolute before:inset-x-0 before:top-0 before:h-[58%] before:[background:var(--ui-progress-track-highlight)] before:opacity-90 before:content-['']", + "after:pointer-events-none after:absolute after:inset-x-0 after:bottom-0 after:h-[72%] after:[background:var(--ui-progress-track-depth)] after:opacity-80 after:content-['']" ], { variants: { size: { - sm: "h-2", - md: "h-3", - lg: "h-4" + sm: "h-2.5 [--ui-progress-segment-gap:0.1875rem] [--ui-progress-segment-inset:1px]", + md: "h-3.5 [--ui-progress-segment-gap:0.25rem] [--ui-progress-segment-inset:1.5px]", + lg: "h-5 [--ui-progress-segment-gap:0.3125rem] [--ui-progress-segment-inset:2px]" + }, + pattern: { + linear: "", + segmented: + "border-[var(--ui-progress-segment-surface-border)] [background:var(--ui-progress-segment-surface-bg)] p-[var(--ui-progress-segment-inset)] shadow-[var(--ui-progress-segment-surface-shadow)] before:hidden after:hidden" }, tone: { - default: "bg-[var(--color-surface)]", - subtle: "bg-[var(--color-muted)]" + default: "", + subtle: + "[--ui-progress-track-bg:var(--ui-progress-track-subtle-bg)] [--ui-progress-track-shadow:var(--ui-progress-track-subtle-shadow)] [--ui-progress-track-highlight:var(--ui-progress-track-subtle-highlight)] [--ui-progress-segment-surface-bg:var(--ui-progress-segment-subtle-surface-bg)] [--ui-progress-segment-inactive-bg:var(--ui-progress-segment-subtle-inactive-bg)]" } }, defaultVariants: { + pattern: "linear", size: "md", tone: "default" } @@ -27,16 +36,67 @@ export const progressVariants = cva( export const progressIndicatorVariants = cva( [ - "h-full rounded-full transition-[width,background-color] duration-[var(--dur-base)] ease-[var(--ease-emphasized)]", + "relative z-[1] h-full w-full origin-left overflow-hidden rounded-[var(--ui-progress-radius)] [background:var(--ui-progress-indicator-bg)] shadow-[var(--ui-progress-indicator-shadow)] [transform:scaleX(var(--ui-progress-indicator-scale,0))]", + "transition-[transform,box-shadow] duration-[var(--dur-base)] ease-[var(--ease-emphasized)]", + "before:pointer-events-none before:absolute before:inset-x-0 before:top-0 before:h-[58%] before:[background:var(--ui-progress-indicator-gloss)] before:opacity-95 before:content-['']", + "after:pointer-events-none after:absolute after:inset-y-[-18%] after:right-[-16%] after:w-[42%] after:[background:var(--ui-progress-indicator-glimmer)] after:opacity-80 after:content-['']", + "[&[data-state=indeterminate]::after]:animate-[aiui-skeleton-shimmer_1.6s_var(--ease-emphasized)_infinite]", + "[&[data-reduced-motion]::after]:animate-none", + "data-[state=complete]:shadow-[var(--ui-progress-indicator-complete-shadow)]", + "data-[reduced-motion]:transition-none", getMotionRecipeClassNames("transition") ], { variants: { variant: { - default: "bg-[var(--color-primary)]", - success: "bg-[var(--color-success)]", - warning: "bg-[var(--color-warning)]", - destructive: "bg-[var(--color-destructive)]" + default: + "[--ui-progress-indicator-bg:var(--ui-progress-indicator-default-bg)] [--ui-progress-indicator-shadow:var(--ui-progress-indicator-default-shadow)]", + success: + "[--ui-progress-indicator-bg:var(--ui-progress-indicator-success-bg)] [--ui-progress-indicator-shadow:var(--ui-progress-indicator-success-shadow)]", + warning: + "[--ui-progress-indicator-bg:var(--ui-progress-indicator-warning-bg)] [--ui-progress-indicator-shadow:var(--ui-progress-indicator-warning-shadow)]", + destructive: + "[--ui-progress-indicator-bg:var(--ui-progress-indicator-destructive-bg)] [--ui-progress-indicator-shadow:var(--ui-progress-indicator-destructive-shadow)]" + } + }, + defaultVariants: { + variant: "default" + } + } +); + +export const progressSegmentsVariants = cva("relative z-[1] grid h-full w-full items-stretch gap-[var(--ui-progress-segment-gap)]", { + variants: { + size: { + sm: "", + md: "", + lg: "" + } + }, + defaultVariants: { + size: "md" + } +}); + +export const progressSegmentVariants = cva( + [ + "min-w-0 rounded-[var(--ui-progress-segment-radius)] [background:var(--ui-progress-segment-inactive-bg)] shadow-[var(--ui-progress-segment-inactive-shadow)]", + "transition-[background-color,box-shadow,opacity,transform] duration-[var(--dur-base)] ease-[var(--ease-emphasized)]", + "data-[active]:[background:var(--ui-progress-segment-active-bg,var(--ui-progress-indicator-bg))] data-[active]:shadow-[var(--ui-progress-segment-active-shadow,var(--ui-progress-indicator-shadow))]", + "data-[state=indeterminate]:[background:var(--ui-progress-segment-active-bg,var(--ui-progress-indicator-bg))] data-[state=indeterminate]:shadow-[var(--ui-progress-segment-active-shadow,var(--ui-progress-indicator-shadow))] data-[state=indeterminate]:animate-[aiui-breathe_1.1s_var(--ease-standard)_infinite]", + "data-[reduced-motion]:animate-none data-[reduced-motion]:transition-none" + ], + { + variants: { + variant: { + default: + "[--ui-progress-indicator-bg:var(--ui-progress-indicator-default-bg)] [--ui-progress-indicator-shadow:var(--ui-progress-indicator-default-shadow)]", + success: + "[--ui-progress-indicator-bg:var(--ui-progress-indicator-success-bg)] [--ui-progress-indicator-shadow:var(--ui-progress-indicator-success-shadow)]", + warning: + "[--ui-progress-indicator-bg:var(--ui-progress-indicator-warning-bg)] [--ui-progress-indicator-shadow:var(--ui-progress-indicator-warning-shadow)]", + destructive: + "[--ui-progress-indicator-bg:var(--ui-progress-indicator-destructive-bg)] [--ui-progress-indicator-shadow:var(--ui-progress-indicator-destructive-shadow)]" } }, defaultVariants: { diff --git a/packages/ui/src/components/radio-group.test.tsx b/packages/ui/src/components/radio-group.test.tsx index 051ba61..bcca8ec 100644 --- a/packages/ui/src/components/radio-group.test.tsx +++ b/packages/ui/src/components/radio-group.test.tsx @@ -15,12 +15,14 @@ describe("RadioGroup", () => { const group = screen.getByRole("radiogroup", { name: "Review lane" }); const design = screen.getByRole("radio", { name: "Design" }); + const designIcon = design.querySelector('[data-slot="icon"]'); expect(group).toHaveAttribute("data-slot", "root"); expect(group).toHaveAttribute("data-orientation", "horizontal"); expect(design).toBeChecked(); expect(design).toHaveAttribute("data-slot", "control"); expect(design).toHaveAttribute("data-state", "checked"); + expect(designIcon).toHaveAttribute("data-state", "checked"); }); it("supports value change callbacks when a new option is selected", async () => { @@ -36,10 +38,12 @@ describe("RadioGroup", () => { ); const medium = screen.getByRole("radio", { name: "Medium" }); + const mediumIcon = medium.querySelector('[data-slot="icon"]'); await user.click(medium); expect(medium).toBeChecked(); + expect(mediumIcon).toHaveAttribute("data-state", "checked"); expect(onValueChange).toHaveBeenLastCalledWith("medium"); }); diff --git a/packages/ui/src/components/radio-group.tsx b/packages/ui/src/components/radio-group.tsx index ec621bf..13583fe 100644 --- a/packages/ui/src/components/radio-group.tsx +++ b/packages/ui/src/components/radio-group.tsx @@ -53,6 +53,7 @@ export const RadioGroupItem = forwardRef< > diff --git a/packages/ui/src/components/radio-group.variants.ts b/packages/ui/src/components/radio-group.variants.ts index 94e2966..9578f75 100644 --- a/packages/ui/src/components/radio-group.variants.ts +++ b/packages/ui/src/components/radio-group.variants.ts @@ -27,5 +27,10 @@ export const radioGroupItemVariants = cva( ); export const radioGroupIndicatorVariants = cva([ - "flex size-full items-center justify-center after:block after:size-2 after:rounded-full after:bg-current after:content-['']" + "flex size-full items-center justify-center", + "will-change-transform transition-[opacity,transform] duration-[var(--dur-fast)] ease-[var(--ease-emphasized)]", + "data-[state=unchecked]:scale-[0.72] data-[state=unchecked]:opacity-0", + "data-[state=checked]:scale-100 data-[state=checked]:opacity-100", + "motion-reduce:transition-none motion-reduce:data-[state=unchecked]:scale-100", + "after:block after:size-2 after:rounded-full after:bg-current after:content-['']" ]); diff --git a/packages/ui/src/components/select.test.tsx b/packages/ui/src/components/select.test.tsx index 59ccf36..ea8b4fc 100644 --- a/packages/ui/src/components/select.test.tsx +++ b/packages/ui/src/components/select.test.tsx @@ -53,6 +53,7 @@ describe("Select", () => { expect(listbox).toHaveAttribute("data-slot", "content"); expect(designOption).toHaveAttribute("data-slot", "item"); + expect(designOption).toHaveAttribute("data-state", "checked"); }); it("updates controlled value after selecting an option", async () => { diff --git a/packages/ui/src/components/select.tsx b/packages/ui/src/components/select.tsx index 81fc3e1..7298803 100644 --- a/packages/ui/src/components/select.tsx +++ b/packages/ui/src/components/select.tsx @@ -124,7 +124,11 @@ export const SelectItem = forwardRef< - {children} + + + {children} + + ); }); diff --git a/packages/ui/src/components/select.variants.ts b/packages/ui/src/components/select.variants.ts index 2c64917..0e6a714 100644 --- a/packages/ui/src/components/select.variants.ts +++ b/packages/ui/src/components/select.variants.ts @@ -10,6 +10,10 @@ export const selectTriggerVariants = cva( "focus-visible:-translate-y-[var(--ui-input-focus-lift)] focus-visible:border-[var(--ui-input-focus-border)] focus-visible:shadow-[var(--ui-input-focus-shadow)]", "focus-visible:ring-2 focus-visible:ring-[var(--color-ring)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--color-background)]", "data-[placeholder]:text-[var(--color-muted-foreground)] data-[disabled]:cursor-not-allowed data-[disabled]:bg-[var(--ui-input-disabled-bg)] data-[disabled]:text-[var(--color-muted-foreground)] data-[disabled]:opacity-100", + "data-[state=open]:border-[color-mix(in_oklch,var(--color-primary)_16%,var(--ui-input-border))] data-[state=open]:shadow-[0_14px_28px_color-mix(in_oklch,var(--color-primary)_10%,transparent),var(--ui-input-shadow)]", + "[&_[data-slot=icon]]:transition-[transform,color,opacity] [&_[data-slot=icon]]:duration-[var(--dur-fast)] [&_[data-slot=icon]]:ease-[var(--ease-standard)]", + "[&[data-state=open]_[data-slot=icon]]:translate-y-px [&[data-state=open]_[data-slot=icon]]:rotate-180 [&[data-state=open]_[data-slot=icon]]:text-[var(--color-primary)]", + "motion-reduce:[&[data-state=open]_[data-slot=icon]]:translate-y-0", "aria-[invalid=true]:border-[color-mix(in_oklch,var(--color-destructive)_42%,var(--color-border-strong))]", "aria-[invalid=true]:shadow-[0_0_0_1px_color-mix(in_oklch,var(--color-destructive)_28%,transparent)]", getMotionRecipeClassNames("ring") @@ -19,18 +23,34 @@ export const selectTriggerVariants = cva( export const selectContentVariants = cva([ "relative z-50 min-w-[var(--radix-select-trigger-width)] overflow-hidden rounded-[var(--ui-panel-radius)] border border-[var(--ui-panel-border)] bg-[var(--ui-panel-bg)] p-1.5 text-[var(--color-card-foreground)] shadow-[var(--ui-panel-shadow)] outline-none", "[border-width:var(--ui-panel-border-width)] backdrop-blur-[var(--ui-panel-backdrop-blur)]", - "data-[state=open]:motion-enter-rise data-[state=closed]:motion-exit-drop" + "data-[state=open]:motion-enter-rise data-[state=closed]:motion-exit-fade data-[state=closed]:motion-exit-drop", + "motion-reduce:data-[state=open]:animate-none motion-reduce:data-[state=closed]:animate-none" ]); export const selectViewportVariants = cva([ - "max-h-[16rem] overflow-y-auto p-0.5" + "max-h-[16rem] overflow-y-auto p-1 motion-enter-fade", + "transition-[opacity,transform] duration-[var(--dur-base)] ease-[var(--ease-standard)]", + "motion-reduce:animate-none" ]); export const selectItemVariants = cva([ - "relative flex w-full cursor-default select-none items-center gap-2 rounded-[var(--ui-control-radius)] px-8 py-2 text-sm text-[var(--color-foreground)] outline-none", - "transition-colors duration-[var(--dur-fast)] ease-[var(--ease-standard)]", - "focus:bg-[var(--ui-control-bg)] focus:text-[var(--color-foreground)] data-[highlighted]:bg-[var(--ui-control-bg)] data-[highlighted]:text-[var(--color-foreground)]", - "data-[disabled]:pointer-events-none data-[disabled]:opacity-45" + "relative isolate flex w-full cursor-default select-none items-center gap-2 overflow-hidden rounded-[calc(var(--ui-control-radius)+0.1rem)] border border-transparent px-8 py-2.5 text-sm text-[var(--color-foreground)] outline-none", + "bg-transparent shadow-[inset_0_1px_0_transparent]", + "before:pointer-events-none before:absolute before:inset-0 before:rounded-[inherit] before:bg-[radial-gradient(circle_at_left,color-mix(in_oklch,var(--color-primary-container)_42%,transparent),transparent_74%)] before:opacity-0 before:translate-x-[-12%] before:transition-[opacity,transform] before:duration-[var(--dur-base)] before:ease-[var(--ease-emphasized)] before:content-['']", + "[&>*]:relative [&>*]:z-[1]", + "transition-[color,background-color,border-color,box-shadow,transform,opacity] duration-[var(--dur-fast)] ease-[var(--ease-standard)]", + "focus:bg-transparent focus:text-[var(--color-foreground)]", + "data-[highlighted]:-translate-y-px data-[highlighted]:translate-x-[1px] data-[highlighted]:border-[color-mix(in_oklch,var(--color-primary)_14%,var(--color-border))] data-[highlighted]:bg-[linear-gradient(180deg,color-mix(in_oklch,var(--color-surface-container-high)_84%,white_16%),color-mix(in_oklch,var(--ui-control-bg)_82%,white_18%))] data-[highlighted]:text-[var(--color-foreground)] data-[highlighted]:shadow-[inset_0_1px_0_color-mix(in_oklch,white_54%,transparent),0_10px_22px_color-mix(in_oklch,var(--color-primary)_8%,transparent)] data-[highlighted]:before:opacity-72 data-[highlighted]:before:translate-x-0", + "data-[state=checked]:translate-x-[2px] data-[state=checked]:border-[color-mix(in_oklch,var(--color-primary)_22%,var(--color-border))] data-[state=checked]:bg-[linear-gradient(180deg,color-mix(in_oklch,var(--color-primary-container)_56%,white_44%),color-mix(in_oklch,var(--ui-control-bg)_74%,white_26%))] data-[state=checked]:shadow-[inset_0_1px_0_color-mix(in_oklch,white_60%,transparent),0_12px_24px_color-mix(in_oklch,var(--color-primary)_10%,transparent)] data-[state=checked]:before:opacity-100 data-[state=checked]:before:translate-x-0", + "[&_[data-slot=icon]]:transition-[opacity,transform,color] [&_[data-slot=icon]]:duration-[var(--dur-fast)] [&_[data-slot=icon]]:ease-[var(--ease-standard)]", + "[&[data-highlighted]_[data-slot=icon]]:translate-x-px", + "[&[data-state=checked]_[data-slot=icon]]:scale-100 [&[data-state=checked]_[data-slot=icon]]:opacity-100 [&[data-state=unchecked]_[data-slot=icon]]:scale-75 [&[data-state=unchecked]_[data-slot=icon]]:opacity-0", + "[&_[data-slot=label]]:transition-[color,transform] [&_[data-slot=label]]:duration-[var(--dur-fast)] [&_[data-slot=label]]:ease-[var(--ease-standard)]", + "[&[data-highlighted]_[data-slot=label]]:translate-x-[1px] [&[data-state=checked]_[data-slot=label]]:translate-x-[1.5px]", + "motion-reduce:data-[highlighted]:-translate-y-0 motion-reduce:data-[highlighted]:translate-x-0 motion-reduce:data-[state=checked]:translate-x-0", + "motion-reduce:[&[data-highlighted]_[data-slot=icon]]:translate-x-0 motion-reduce:[&[data-highlighted]_[data-slot=label]]:translate-x-0 motion-reduce:[&[data-state=checked]_[data-slot=label]]:translate-x-0", + "data-[disabled]:pointer-events-none data-[disabled]:opacity-45", + getMotionRecipeClassNames("ring") ]); export const selectLabelVariants = cva([ diff --git a/packages/ui/src/components/skeleton.test.tsx b/packages/ui/src/components/skeleton.test.tsx index 9063664..63c510d 100644 --- a/packages/ui/src/components/skeleton.test.tsx +++ b/packages/ui/src/components/skeleton.test.tsx @@ -13,6 +13,10 @@ describe("Skeleton", () => { expect(skeleton).toHaveAttribute("data-shape", "line"); expect(skeleton).toHaveAttribute("data-tone", "default"); expect(skeleton).toHaveAttribute("aria-hidden", "true"); + expect(skeleton.className).toContain( + "before:animate-[aiui-skeleton-shimmer_1.8s_var(--ease-standard)_infinite]" + ); + expect(skeleton.className).toContain("motion-reduce:before:animate-none"); }); it("supports alternate shape and tone hooks", () => { diff --git a/packages/ui/src/components/skeleton.tsx b/packages/ui/src/components/skeleton.tsx index 6f38414..cba2344 100644 --- a/packages/ui/src/components/skeleton.tsx +++ b/packages/ui/src/components/skeleton.tsx @@ -7,7 +7,8 @@ import { createDataAttributes, createSlot } from "../lib/contracts"; const skeletonVariants = cva( [ "relative overflow-hidden rounded-[var(--ui-skeleton-radius)] bg-[var(--ui-skeleton-bg)]", - "before:absolute before:inset-0 before:bg-[var(--ui-skeleton-gradient)] before:opacity-70 before:content-[''] before:animate-[aiui-skeleton-shimmer_1.8s_var(--ease-standard)_infinite]" + "before:absolute before:inset-0 before:bg-[var(--ui-skeleton-gradient)] before:opacity-70 before:content-[''] before:animate-[aiui-skeleton-shimmer_1.8s_var(--ease-standard)_infinite]", + "motion-reduce:before:animate-none" ], { variants: { diff --git a/packages/ui/src/components/spinner.test.tsx b/packages/ui/src/components/spinner.test.tsx index f2674d6..4627a7b 100644 --- a/packages/ui/src/components/spinner.test.tsx +++ b/packages/ui/src/components/spinner.test.tsx @@ -13,6 +13,8 @@ describe("Spinner", () => { expect(spinner).toHaveAttribute("data-size", "lg"); expect(spinner).toHaveAttribute("data-tone", "primary"); expect(spinner).toHaveAttribute("aria-hidden", "true"); + expect(spinner).toHaveClass("animate-spin"); + expect(spinner).toHaveClass("motion-reduce:animate-none"); }); it("keeps an accessible label when one is provided", () => { diff --git a/packages/ui/src/components/spinner.tsx b/packages/ui/src/components/spinner.tsx index e0ef3b4..400dcc2 100644 --- a/packages/ui/src/components/spinner.tsx +++ b/packages/ui/src/components/spinner.tsx @@ -7,7 +7,7 @@ import { createDataAttributes, createSlot } from "../lib/contracts"; const spinnerVariants = cva( [ "inline-block rounded-full border-current border-r-transparent align-middle", - "animate-spin" + "animate-spin motion-reduce:animate-none" ], { variants: { diff --git a/packages/ui/src/components/tabs.test.tsx b/packages/ui/src/components/tabs.test.tsx index c863ad3..3c93539 100644 --- a/packages/ui/src/components/tabs.test.tsx +++ b/packages/ui/src/components/tabs.test.tsx @@ -21,11 +21,15 @@ describe("Tabs", () => { expect(screen.getByText("Overview panel")).toHaveAttribute("data-slot", "content"); expect(screen.queryByText("Activity panel")).not.toBeInTheDocument(); + expect(screen.getByText("Overview").closest('[data-slot="label"]')).toBeInTheDocument(); + expect(screen.getByRole("tab", { name: "Overview" }).querySelector('[data-slot="indicator"]')).toBeTruthy(); await user.click(screen.getByRole("tab", { name: "Activity" })); expect(screen.getByText("Activity panel")).toBeInTheDocument(); expect(screen.queryByText("Overview panel")).not.toBeInTheDocument(); + expect(screen.getByRole("tab", { name: "Activity" }).querySelector('[data-slot="indicator"]')).toBeTruthy(); + expect(screen.getByRole("tab", { name: "Overview" }).querySelector('[data-slot="indicator"]')).toBeNull(); }); it("preserves disabled triggers and root/list slots", async () => { diff --git a/packages/ui/src/components/tabs.tsx b/packages/ui/src/components/tabs.tsx index 1d856db..1c344eb 100644 --- a/packages/ui/src/components/tabs.tsx +++ b/packages/ui/src/components/tabs.tsx @@ -1,44 +1,145 @@ import * as TabsPrimitive from "@radix-ui/react-tabs"; -import { forwardRef, type ComponentPropsWithoutRef, type ElementRef } from "react"; +import { LayoutGroup, motion, useReducedMotion } from "motion/react"; +import { + createContext, + forwardRef, + useContext, + useEffect, + useId, + useState, + type ComponentPropsWithoutRef, + type ElementRef +} from "react"; -import { tabsContentVariants, tabsListVariants, tabsTriggerVariants } from "./tabs.variants"; +import { + tabsContentVariants, + tabsIndicatorVariants, + tabsLabelVariants, + tabsListVariants, + tabsTriggerVariants +} from "./tabs.variants"; import { cn } from "../lib/cn"; import { createDataAttributes, createSlot } from "../lib/contracts"; +type TabsMotionContextValue = { + activeValue?: string; + disableMotion: boolean; +}; + +const TabsMotionContext = createContext(null); + +function useStaticMotion() { + const prefersReducedMotion = useReducedMotion(); + const [isStaticMotion, setIsStaticMotion] = useState(false); + + useEffect(() => { + if (typeof document === "undefined") { + return; + } + + const syncMotionMode = () => { + setIsStaticMotion(document.documentElement.dataset.motion === "static"); + }; + + syncMotionMode(); + + const observer = new MutationObserver(syncMotionMode); + observer.observe(document.documentElement, { + attributeFilter: ["data-motion"] + }); + + return () => observer.disconnect(); + }, []); + + return prefersReducedMotion || isStaticMotion; +} + +function useControllableStringState({ + controlledValue, + defaultValue, + onChange +}: { + controlledValue?: string | null; + defaultValue?: string | null; + onChange?: (value: string) => void; +}) { + const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue ?? undefined); + const value = controlledValue ?? uncontrolledValue ?? undefined; + + const setValue = (nextValue: string) => { + if (controlledValue === undefined) { + setUncontrolledValue(nextValue); + } + + onChange?.(nextValue); + }; + + return [value, setValue] as const; +} + export function Tabs({ + children, className, + defaultValue, + onValueChange, orientation = "horizontal", + value, ...props }: ComponentPropsWithoutRef) { + const disableMotion = useStaticMotion(); + const [currentValue, setCurrentValue] = useControllableStringState({ + controlledValue: value, + defaultValue, + onChange: onValueChange + }); + return ( - + + + {children} + + ); } export const TabsList = forwardRef< ElementRef, ComponentPropsWithoutRef ->(function TabsList({ className, ...props }, ref) { +>(function TabsList({ children, className, ...props }, ref) { + const layoutGroupId = useId(); + return ( - + + + {children} + + ); }); export const TabsTrigger = forwardRef< ElementRef, ComponentPropsWithoutRef ->(function TabsTrigger({ className, disabled, ...props }, ref) { +>(function TabsTrigger({ children, className, disabled, value, ...props }, ref) { + const motionContext = useContext(TabsMotionContext); + const isActive = motionContext?.activeValue === value; + const transition = motionContext?.disableMotion + ? { duration: 0.01 } + : { duration: 0.18, ease: [0.22, 1, 0.36, 1] as const }; + return ( + value={value} + > + {isActive && motionContext ? ( + ); }); diff --git a/packages/ui/src/components/tabs.variants.ts b/packages/ui/src/components/tabs.variants.ts index 13b4baf..5e1e8ad 100644 --- a/packages/ui/src/components/tabs.variants.ts +++ b/packages/ui/src/components/tabs.variants.ts @@ -6,15 +6,26 @@ export const tabsListVariants = cva([ ]); export const tabsTriggerVariants = cva([ - "inline-flex min-w-[7rem] items-center justify-center rounded-[var(--ui-control-radius)] px-4 py-2.5 text-sm font-medium outline-none", - "text-[var(--color-muted-foreground)] transition-[color,background-color,box-shadow,transform] duration-[var(--dur-fast)] ease-[var(--ease-standard)]", + "relative isolate inline-flex min-w-[7rem] items-center justify-center overflow-hidden rounded-[var(--ui-control-radius)] px-4 py-2.5 text-sm font-medium outline-none", + "text-[var(--color-muted-foreground)] transition-[color,box-shadow,transform] duration-[var(--dur-fast)] ease-[var(--ease-standard)]", "focus-visible:ring-2 focus-visible:ring-[var(--color-ring)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--color-background)]", "data-[disabled]:pointer-events-none data-[disabled]:opacity-45", - "hover:-translate-y-px hover:bg-[color-mix(in_oklch,var(--ui-control-bg)_76%,white_24%)] hover:text-[var(--color-foreground)]", - "data-[state=active]:-translate-y-px data-[state=active]:bg-[var(--ui-panel-bg)] data-[state=active]:text-[var(--color-foreground)] data-[state=active]:shadow-[var(--ui-control-shadow)]", + "hover:-translate-y-px hover:text-[var(--color-foreground)]", + "data-[state=active]:text-[var(--color-foreground)]", getMotionRecipeClassNames("ring") ]); +export const tabsIndicatorVariants = cva([ + "pointer-events-none absolute inset-0 rounded-[inherit] border", + "border-[color-mix(in_oklch,var(--color-primary)_16%,var(--ui-control-border))]", + "bg-[linear-gradient(180deg,color-mix(in_oklch,var(--color-primary-container)_68%,white_32%),color-mix(in_oklch,var(--ui-panel-bg)_82%,white_18%))]", + "shadow-[inset_0_1px_0_color-mix(in_oklch,white_56%,transparent),0_10px_22px_color-mix(in_oklch,var(--color-primary)_10%,transparent)]" +]); + +export const tabsLabelVariants = cva( + "relative z-[1] inline-flex items-center justify-center gap-2" +); + export const tabsContentVariants = cva([ "mt-4 rounded-[var(--ui-card-radius)] border border-[var(--ui-card-default-border)] bg-[var(--ui-card-default-bg)] p-6 text-[var(--color-card-foreground)] shadow-[var(--ui-card-default-shadow)] outline-none [border-width:var(--ui-card-border-width)]", "data-[state=active]:motion-enter-fade data-[state=active]:motion-enter-rise" diff --git a/packages/ui/src/components/tooltip.test.tsx b/packages/ui/src/components/tooltip.test.tsx index 8fc2435..259d26c 100644 --- a/packages/ui/src/components/tooltip.test.tsx +++ b/packages/ui/src/components/tooltip.test.tsx @@ -2,6 +2,7 @@ import { render, screen, waitFor } from "@testing-library/react"; import userEvent from "@testing-library/user-event"; import { describe, expect, it, vi } from "vitest"; +import { tooltipContentVariants } from "./tooltip.variants"; import { Tooltip, TooltipArrow, @@ -11,6 +12,18 @@ import { } from "./tooltip"; describe("Tooltip", () => { + it("uses a light rise/fade motion and disables animation for reduced motion", () => { + const className = tooltipContentVariants(); + + expect(className).toContain( + "data-[state=delayed-open]:[animation:aiui-fade-in_calc(var(--dur-fast)*1.2)_var(--ease-standard)_both,aiui-slide-up-sm_calc(var(--dur-fast)*1.2)_var(--ease-standard)_both]" + ); + expect(className).toContain( + "data-[state=closed]:[animation:aiui-fade-out_var(--dur-fast)_var(--ease-exit)_both,aiui-slide-down-sm_var(--dur-fast)_var(--ease-exit)_reverse_both]" + ); + expect(className).toContain("motion-reduce:data-[state=delayed-open]:animate-none"); + }); + it("shows and hides tooltip content around hover", async () => { const user = userEvent.setup(); diff --git a/packages/ui/src/components/tooltip.variants.ts b/packages/ui/src/components/tooltip.variants.ts index a1a80ef..29c1a19 100644 --- a/packages/ui/src/components/tooltip.variants.ts +++ b/packages/ui/src/components/tooltip.variants.ts @@ -3,7 +3,10 @@ import { cva } from "../lib/cva"; export const tooltipContentVariants = cva( [ "z-50 max-w-xs rounded-[var(--radius-sm)] bg-[var(--color-surface-contrast)] px-3 py-2 text-sm text-[var(--color-background)] shadow-[var(--shadow-sm)] outline-none", - "data-[state=delayed-open]:motion-enter-fade data-[state=instant-open]:motion-enter-fade data-[state=closed]:motion-exit-fade", + "data-[state=delayed-open]:[animation:aiui-fade-in_calc(var(--dur-fast)*1.2)_var(--ease-standard)_both,aiui-slide-up-sm_calc(var(--dur-fast)*1.2)_var(--ease-standard)_both]", + "data-[state=instant-open]:[animation:aiui-fade-in_calc(var(--dur-fast)*1.2)_var(--ease-standard)_both,aiui-slide-up-sm_calc(var(--dur-fast)*1.2)_var(--ease-standard)_both]", + "data-[state=closed]:[animation:aiui-fade-out_var(--dur-fast)_var(--ease-exit)_both,aiui-slide-down-sm_var(--dur-fast)_var(--ease-exit)_reverse_both]", + "motion-reduce:data-[state=delayed-open]:animate-none motion-reduce:data-[state=instant-open]:animate-none motion-reduce:data-[state=closed]:animate-none", "data-[side=bottom]:origin-top data-[side=left]:origin-right data-[side=right]:origin-left data-[side=top]:origin-bottom" ], { diff --git a/packages/ui/src/skins.css b/packages/ui/src/skins.css index 3c94823..f0c9a5d 100644 --- a/packages/ui/src/skins.css +++ b/packages/ui/src/skins.css @@ -168,6 +168,12 @@ --ui-card-hover-scale: 1.016; --ui-card-hover-shadow: 0 24px 44px color-mix(in oklch, var(--color-primary) 16%, transparent); + --ui-grid-gap-xs: 0.75rem; + --ui-grid-gap-sm: 1rem; + --ui-grid-gap-md: 1.25rem; + --ui-grid-gap-lg: 1.5rem; + --ui-grid-gap-xl: 2rem; + --ui-input-radius: var(--radius-sm); --ui-input-border-width: 1px; --ui-input-bg: linear-gradient( @@ -232,6 +238,219 @@ var(--shadow-xs); --ui-switch-transition-duration: var(--dur-base); + --ui-progress-radius: var(--radius-full); + --ui-progress-track-border-width: 1px; + --ui-progress-track-bg: linear-gradient( + 180deg, + color-mix(in oklch, var(--color-surface-container-highest) 74%, var(--color-surface-bright) 26%), + color-mix(in oklch, var(--color-surface-container) 20%, var(--color-surface-container-highest) 80%) + ); + --ui-progress-track-border: transparent; + --ui-progress-track-shadow: + inset 0 1px 0 color-mix(in oklch, white 38%, transparent), + 0 8px 18px color-mix(in oklch, var(--color-primary) 7%, transparent); + --ui-progress-track-highlight: linear-gradient( + 180deg, + color-mix(in oklch, white 72%, transparent), + transparent 78% + ); + --ui-progress-track-depth: linear-gradient( + 180deg, + transparent 0%, + color-mix(in oklch, var(--color-surface-contrast) 8%, transparent) 100% + ); + --ui-progress-track-subtle-bg: linear-gradient( + 180deg, + color-mix(in oklch, var(--color-surface-container) 86%, var(--color-surface-bright) 14%), + color-mix(in oklch, var(--color-surface) 18%, var(--color-surface-container) 82%) + ); + --ui-progress-track-subtle-shadow: + inset 0 1px 0 color-mix(in oklch, white 30%, transparent), + 0 6px 14px color-mix(in oklch, var(--color-primary) 5%, transparent); + --ui-progress-track-subtle-highlight: linear-gradient( + 180deg, + color-mix(in oklch, white 58%, transparent), + transparent 82% + ); + --ui-progress-indicator-gloss: linear-gradient( + 180deg, + color-mix(in oklch, white 62%, transparent), + transparent 78% + ); + --ui-progress-indicator-glimmer: linear-gradient( + 90deg, + transparent 0%, + color-mix(in oklch, white 54%, transparent) 45%, + transparent 100% + ); + --ui-progress-indicator-default-bg: linear-gradient( + 90deg, + color-mix(in oklch, var(--color-primary-container) 84%, white 16%), + color-mix(in oklch, var(--color-primary) 24%, var(--color-primary-container) 76%) + ); + --ui-progress-indicator-default-shadow: + inset 0 1px 0 color-mix(in oklch, white 42%, transparent), + 0 10px 22px color-mix(in oklch, var(--color-primary) 18%, transparent); + --ui-progress-indicator-success-bg: linear-gradient( + 90deg, + color-mix(in oklch, var(--color-tertiary-container) 82%, white 18%), + color-mix(in oklch, var(--color-success) 30%, var(--color-tertiary-container) 70%) + ); + --ui-progress-indicator-success-shadow: + inset 0 1px 0 color-mix(in oklch, white 36%, transparent), + 0 10px 22px color-mix(in oklch, var(--color-success) 18%, transparent); + --ui-progress-indicator-warning-bg: linear-gradient( + 90deg, + color-mix(in oklch, var(--color-warning) 22%, var(--color-surface-bright) 78%), + color-mix(in oklch, var(--color-warning) 44%, var(--color-primary-container) 56%) + ); + --ui-progress-indicator-warning-shadow: + inset 0 1px 0 color-mix(in oklch, white 30%, transparent), + 0 10px 22px color-mix(in oklch, var(--color-warning) 16%, transparent); + --ui-progress-indicator-destructive-bg: linear-gradient( + 90deg, + color-mix(in oklch, var(--color-error-container) 86%, white 14%), + color-mix(in oklch, var(--color-error) 18%, var(--color-error-container) 82%) + ); + --ui-progress-indicator-destructive-shadow: + inset 0 1px 0 color-mix(in oklch, white 34%, transparent), + 0 10px 22px color-mix(in oklch, var(--color-error) 16%, transparent); + --ui-progress-indicator-complete-shadow: + inset 0 1px 0 color-mix(in oklch, white 42%, transparent), + 0 14px 28px color-mix(in oklch, var(--color-primary) 16%, transparent); + --ui-progress-segment-radius: var(--radius-full); + --ui-progress-segment-surface-bg: linear-gradient( + 180deg, + color-mix(in oklch, var(--color-surface-container-low) 88%, white 12%), + color-mix(in oklch, var(--color-surface-container) 18%, var(--color-surface-container-low) 82%) + ); + --ui-progress-segment-surface-border: transparent; + --ui-progress-segment-surface-shadow: + inset 0 1px 0 color-mix(in oklch, white 44%, transparent), + 0 10px 20px color-mix(in oklch, var(--color-primary) 7%, transparent); + --ui-progress-segment-subtle-surface-bg: linear-gradient( + 180deg, + color-mix(in oklch, var(--color-surface) 72%, white 28%), + color-mix(in oklch, var(--color-surface-container) 18%, var(--color-surface) 82%) + ); + --ui-progress-segment-inactive-bg: linear-gradient( + 180deg, + color-mix(in oklch, var(--color-surface-container-highest) 86%, white 14%), + color-mix(in oklch, var(--color-surface-container) 16%, var(--color-surface-container-highest) 84%) + ); + --ui-progress-segment-subtle-inactive-bg: linear-gradient( + 180deg, + color-mix(in oklch, var(--color-surface-container) 78%, white 22%), + color-mix(in oklch, var(--color-surface) 14%, var(--color-surface-container) 86%) + ); + --ui-progress-segment-inactive-shadow: inset 0 1px 0 color-mix(in oklch, white 32%, transparent); + --ui-gauge-track-stroke: color-mix(in oklch, var(--color-border) 88%, white 12%); + --ui-gauge-tick-stroke: color-mix(in oklch, var(--color-border-strong) 34%, transparent); + --ui-gauge-center-default-bg: linear-gradient( + 180deg, + color-mix(in oklch, var(--color-surface-container-low) 82%, white 18%), + color-mix(in oklch, var(--color-surface-container) 16%, var(--color-surface-container-low) 84%) + ); + --ui-gauge-center-default-shadow: + inset 0 1px 0 color-mix(in oklch, white 48%, transparent), + 0 12px 24px color-mix(in oklch, var(--color-primary) 10%, transparent); + --ui-gauge-center-subtle-bg: linear-gradient( + 180deg, + color-mix(in oklch, var(--color-surface) 78%, white 22%), + color-mix(in oklch, var(--color-surface-container) 14%, var(--color-surface) 86%) + ); + --ui-gauge-center-subtle-shadow: + inset 0 1px 0 color-mix(in oklch, white 40%, transparent), + 0 10px 22px color-mix(in oklch, var(--color-primary) 8%, transparent); + --ui-gauge-center-accent-bg: linear-gradient( + 180deg, + color-mix(in oklch, var(--color-primary-container) 68%, white 32%), + color-mix(in oklch, var(--color-secondary-container) 16%, var(--color-primary-container) 84%) + ); + --ui-gauge-center-accent-shadow: + inset 0 1px 0 color-mix(in oklch, white 44%, transparent), + 0 14px 28px color-mix(in oklch, var(--color-primary) 14%, transparent); + --ui-gauge-indicator-default-start: color-mix( + in oklch, + var(--color-primary-container) 82%, + white 18% + ); + --ui-gauge-indicator-default-end: var(--color-primary); + --ui-gauge-indicator-success-start: color-mix( + in oklch, + var(--color-tertiary-container) 80%, + white 20% + ); + --ui-gauge-indicator-success-end: var(--color-success); + --ui-gauge-indicator-warning-start: color-mix( + in oklch, + var(--color-warning) 22%, + var(--color-surface-bright) 78% + ); + --ui-gauge-indicator-warning-end: var(--color-warning); + --ui-gauge-indicator-destructive-start: color-mix( + in oklch, + var(--color-error-container) 82%, + white 18% + ); + --ui-gauge-indicator-destructive-end: var(--color-error); + --ui-sparkbar-height-sm: 3rem; + --ui-sparkbar-height-md: 4.25rem; + --ui-sparkbar-height-lg: 5rem; + --ui-sparkbar-gap-sm: 0.25rem; + --ui-sparkbar-gap-md: 0.375rem; + --ui-sparkbar-gap-lg: 0.4375rem; + --ui-sparkbar-bar-radius: var(--radius-full); + --ui-sparkbar-inactive-default-bg: linear-gradient( + 180deg, + color-mix(in oklch, var(--color-surface-container-highest) 84%, white 16%), + color-mix(in oklch, var(--color-surface-container) 16%, var(--color-surface-container-highest) 84%) + ); + --ui-sparkbar-inactive-default-shadow: + inset 0 1px 0 color-mix(in oklch, white 30%, transparent); + --ui-sparkbar-inactive-subtle-bg: linear-gradient( + 180deg, + color-mix(in oklch, var(--color-surface-container) 80%, white 20%), + color-mix(in oklch, var(--color-surface) 12%, var(--color-surface-container) 88%) + ); + --ui-sparkbar-inactive-subtle-shadow: + inset 0 1px 0 color-mix(in oklch, white 24%, transparent); + --ui-sparkbar-inactive-contrast-bg: color-mix(in oklch, white 40%, transparent); + --ui-sparkbar-inactive-contrast-shadow: + inset 0 1px 0 color-mix(in oklch, white 20%, transparent); + --ui-sparkbar-active-default-bg: linear-gradient( + 180deg, + color-mix(in oklch, var(--color-primary-container) 84%, white 16%), + color-mix(in oklch, var(--color-primary) 26%, var(--color-primary-container) 74%) + ); + --ui-sparkbar-active-default-shadow: + inset 0 1px 0 color-mix(in oklch, white 38%, transparent), + 0 10px 22px color-mix(in oklch, var(--color-primary) 14%, transparent); + --ui-sparkbar-active-success-bg: linear-gradient( + 180deg, + color-mix(in oklch, var(--color-tertiary-container) 80%, white 20%), + color-mix(in oklch, var(--color-success) 26%, var(--color-tertiary-container) 74%) + ); + --ui-sparkbar-active-success-shadow: + inset 0 1px 0 color-mix(in oklch, white 32%, transparent), + 0 10px 22px color-mix(in oklch, var(--color-success) 14%, transparent); + --ui-sparkbar-active-warning-bg: linear-gradient( + 180deg, + color-mix(in oklch, var(--color-warning) 26%, var(--color-surface-bright) 74%), + color-mix(in oklch, var(--color-warning) 46%, var(--color-primary-container) 54%) + ); + --ui-sparkbar-active-warning-shadow: + inset 0 1px 0 color-mix(in oklch, white 28%, transparent), + 0 10px 22px color-mix(in oklch, var(--color-warning) 14%, transparent); + --ui-sparkbar-active-destructive-bg: linear-gradient( + 180deg, + color-mix(in oklch, var(--color-error-container) 84%, white 16%), + color-mix(in oklch, var(--color-error) 22%, var(--color-error-container) 78%) + ); + --ui-sparkbar-active-destructive-shadow: + inset 0 1px 0 color-mix(in oklch, white 30%, transparent), + 0 10px 22px color-mix(in oklch, var(--color-error) 14%, transparent); + --ui-skeleton-radius: var(--radius-sm); --ui-skeleton-block-radius: var(--radius-md); --ui-skeleton-pill-radius: var(--radius-full);