()
+const [current, setCurrent] = React.useState(0)
+
+React.useEffect(() => {
+ if (!api) return
+
+ const onSelect = () => {
+ setCurrent(api.selectedScrollSnap())
+ }
+
+ api.on('select', onSelect)
+
+ return () => {
+ api.off('select', onSelect)
+ }
+}, [api])
+
+
+ ...
+
+
+ Slide {current + 1} of {api?.scrollSnapList().length ?? 0}
+
+```
+
+`api.scrollTo(index)` jumps to a slide, which is all a dot button needs.
+Building a control inside the carousel? `useCarousel()` hands you `api`,
+`scrollPrev`, `scrollNext`, `canScrollPrev` and `canScrollNext` without any
+prop drilling.
+
+## Plugins
+
+Pass Embla plugins through `plugins`. Autoplay, for example:
+
+import { Tab, Tabs } from 'fumadocs-ui/components/tabs'
+
+
+
+```bash tab="bun"
+bun i embla-carousel-autoplay
+```
+
+```bash tab="pnpm"
+pnpm i embla-carousel-autoplay
+```
+
+```bash tab="npm"
+npm i embla-carousel-autoplay
+```
+
+
+
+```tsx
+import Autoplay from 'embla-carousel-autoplay'
+
+export const Slideshow = () => (
+
+ ...
+
+)
+```
+
+Keep `stopOnInteraction` on, and skip autoplay for people who prefer reduced
+motion. Nobody likes chasing a slide that runs away.
+
+## Accessibility
+
+- The root is a `region` with `aria-roledescription="carousel"`; give it an
+ `aria-label` that says what is inside.
+- Every slide is a `group` with `aria-roledescription="slide"`. Labels like
+ `aria-label="2 of 5"` help screen readers keep count.
+- The arrow buttons are labelled "Previous" and "Next" in the current language
+ and turn disabled when there is nowhere left to go.
+- With focus inside the carousel, the left and right arrow keys move between
+ slides.
+
+## Props
+
+import { TypeTable } from 'fumadocs-ui/components/type-table'
+
+ void',
+ },
+ }}
+/>
+
+`CarouselPrevious` and `CarouselNext` accept every [Button](/docs/ui/button)
+prop and default to `variant="outline"` with `size="icon-sm"`.
+
+## API Reference
+
+[Embla Carousel - API](https://www.embla-carousel.com/api/)
diff --git a/apps/web/content/docs/ui/cascader.mdx b/apps/web/content/docs/ui/cascader.mdx
new file mode 100644
index 000000000..ac79d5d16
--- /dev/null
+++ b/apps/web/content/docs/ui/cascader.mdx
@@ -0,0 +1,207 @@
+---
+title: Cascader
+description: Pick one option from a tree, one level at a time. Think continent, then country, then city.
+icon: ListTree
+---
+
+## Preview
+
+
+
+## Usage
+
+import { Tab, Tabs } from 'fumadocs-ui/components/tabs'
+
+
+
+
+
+
+```ts
+import { z } from 'zod'
+import { AutoForm } from '@vitnode/core/components/form/auto-form'
+import { AutoFormCascader } from '@vitnode/core/components/form/fields/cascader'
+```
+
+```ts
+const formSchema = z.object({
+ office: z.string('Pick an office to continue'),
+ backupOffice: z.string().optional(),
+})
+```
+
+```tsx
+ (
+
+ ),
+ },
+ ]}
+/>
+```
+
+The form stores the **value of the picked leaf** (`"krakow"`), not the whole
+path. Optional fields get a clear button automatically.
+
+
+
+
+
+```ts
+import { Cascader } from '@vitnode/core/components/ui/cascader'
+```
+
+```tsx
+const [office, setOffice] = React.useState(null)
+
+
+```
+
+
+
+
+## Options
+
+Options are a plain tree. Anything with `children` is a branch that opens the
+next column; anything without is a leaf you can pick.
+
+```ts
+import type { CascaderOption } from '@vitnode/core/components/ui/cascader'
+
+const locations: CascaderOption[] = [
+ {
+ label: 'Europe',
+ value: 'europe',
+ children: [
+ {
+ label: 'Poland',
+ value: 'poland',
+ children: [
+ { label: 'Warsaw', value: 'warsaw' },
+ { label: 'Kraków', value: 'krakow' },
+ ],
+ },
+ { label: 'Iceland', value: 'iceland', disabled: true },
+ ],
+ },
+]
+```
+
+`onValueChange` hands you the full path too, for when you need "Europe / Poland"
+as well as the city:
+
+```tsx
+ {
+ console.log(value, path.map(option => option.label))
+ }}
+ options={locations}
+/>
+```
+
+## Search
+
+`searchable` adds a search box that looks through every leaf at once. Type
+"krak" and "Europe / Poland / Kraków" is one click away. Accents don't matter,
+so "sao" finds São Paulo.
+
+## Drill down or columns
+
+By default, clicking a branch **replaces the list** with its children. The
+next level slides in, and a back button at the top takes you up again. The popup
+stays the width of the field, wherever it sits.
+
+Prefer to see every level at once? `layout="columns"` opens each level in a new
+column beside the last one, and the popup widens to make room:
+
+```tsx
+
+```
+
+In the columns layout you can also open branches on hover with
+`expandTrigger="hover"`. On phones the cascader always drills down, because there's
+no room for columns on a 375px screen.
+
+## Transitions
+
+Each level slides in from the direction you moved, forward when you go deeper
+and back when you return. In the columns layout, the popup's width animates as
+columns open. With reduced motion turned on, everything switches instantly.
+
+## Accessibility
+
+- Every level is a listbox you can drive with the keyboard: arrow up and down
+ to move, arrow right (left in RTL) or Enter to open a branch,
+ arrow left to go back, Home / End to jump, and
+ Escape to close.
+- Branches tell screen readers whether they're open, and the picked path is
+ marked as selected.
+- Give the cascader a label. `AutoFormCascader` does it for you, and a
+ standalone `Cascader` needs `aria-labelledby`.
+
+## Props
+
+import { TypeTable } from 'fumadocs-ui/components/type-table'
+
+ void',
+ },
+ searchable: {
+ description: 'Adds a search box that finds leaves across the whole tree.',
+ type: 'boolean',
+ default: 'false',
+ },
+ layout: {
+ description:
+ 'Drill into one level at a time, or show every level side by side. Phones always drill down.',
+ type: '"drill" | "columns"',
+ default: '"drill"',
+ },
+ expandTrigger: {
+ description:
+ 'In the columns layout, open branches on click or as soon as the pointer is over them.',
+ type: '"click" | "hover"',
+ default: '"click"',
+ },
+ showClear: {
+ description: 'Shows a button that clears the value.',
+ type: 'boolean',
+ default: 'false',
+ },
+ separator: {
+ description: 'Placed between labels in the trigger and in search results.',
+ type: 'string',
+ default: '" / "',
+ },
+ placeholder: {
+ description: 'Shown while nothing is picked.',
+ type: 'string',
+ },
+ }}
+/>
diff --git a/apps/web/content/docs/ui/chart.mdx b/apps/web/content/docs/ui/chart.mdx
new file mode 100644
index 000000000..0858781f9
--- /dev/null
+++ b/apps/web/content/docs/ui/chart.mdx
@@ -0,0 +1,268 @@
+---
+title: Chart
+description: Bar, area, line and any other Recharts chart, with tooltips, legends and colours that follow your theme.
+icon: ChartColumn
+---
+
+## Preview
+
+
+
+## Installation
+
+The chart components wrap [Recharts](https://recharts.github.io/), and you
+build the chart itself with Recharts components. Add it to your app next to
+`@vitnode/core`:
+
+import { Tab, Tabs } from 'fumadocs-ui/components/tabs'
+
+
+
+```bash tab="bun"
+bun i recharts
+```
+
+```bash tab="pnpm"
+pnpm i recharts
+```
+
+```bash tab="npm"
+npm i recharts
+```
+
+
+
+## Usage
+
+```ts
+import type { ChartConfig } from '@vitnode/core/components/ui/chart'
+
+import {
+ ChartContainer,
+ ChartTooltip,
+ ChartTooltipContent,
+} from '@vitnode/core/components/ui/chart'
+import { Bar, BarChart, CartesianGrid, XAxis } from 'recharts'
+```
+
+```tsx
+const chartData = [
+ { month: 'January', desktop: 186, mobile: 80 },
+ { month: 'February', desktop: 305, mobile: 200 },
+ { month: 'March', desktop: 237, mobile: 120 },
+]
+
+const chartConfig = {
+ desktop: { label: 'Desktop', color: 'var(--chart-1)' },
+ mobile: { label: 'Mobile', color: 'var(--chart-2)' },
+} satisfies ChartConfig
+
+
+
+
+
+ } />
+
+
+
+
+```
+
+We don't hide Recharts behind a wrapper of our own. You write plain Recharts and
+borrow only what you need: the container, the tooltip and the legend. When
+Recharts ships a new chart type, you can use it the same day.
+
+`ChartContainer` sizes the chart responsively and defaults to a 16:9 box
+(`aspect-video`). Pass a `className` such as `aspect-square` or `h-64 w-full`
+to change it.
+
+## Chart config
+
+The config is where the chart's words and colours live, kept apart from your
+data. Each key matches a `dataKey` in your data:
+
+```tsx
+import { Monitor, Smartphone } from 'lucide-react'
+
+const chartConfig = {
+ desktop: {
+ label: 'Desktop',
+ icon: Monitor,
+ color: 'var(--chart-1)',
+ },
+ mobile: {
+ label: 'Mobile',
+ icon: Smartphone,
+ theme: {
+ light: 'var(--chart-2)',
+ dark: 'var(--chart-4)',
+ },
+ },
+} satisfies ChartConfig
+```
+
+- `label` is what the tooltip and legend show, so `desktop` reads as "Desktop".
+- `icon` swaps the colour swatch in the tooltip and legend for an icon.
+- `color` sets one colour for both themes. Use `theme` instead when light and
+ dark need different colours.
+
+## Theming
+
+Your theme ships five chart colours, `--chart-1` to `--chart-5`, with values
+for light and dark mode. Use them in the config and the charts follow the
+theme on their own:
+
+```css
+:root {
+ --chart-1: oklch(0.52 0.2 264);
+ --chart-2: oklch(0.52 0.128 155);
+}
+
+.dark {
+ --chart-1: oklch(0.7 0.14 264);
+ --chart-2: oklch(0.758 0.153 155);
+}
+```
+
+For each config key, `ChartContainer` creates a `--color-` variable, scoped
+to that one chart. Use it anywhere Recharts takes a colour:
+
+```tsx
+
+```
+
+It works in Tailwind classes too, for example `fill-(--color-desktop)`. Two or
+three colours per chart is plenty. Your readers have eyes, not a rainbow
+decoder ring.
+
+## Area chart
+
+
+
+Stack areas with the same `stackId`, and add a fade with a `linearGradient`
+that uses the chart's colour variables:
+
+```tsx
+
+
+
+
+
+
+
+
+
+ } cursor={false} />
+
+
+```
+
+## Line chart
+
+
+
+```tsx
+
+
+
+ } />
+
+
+```
+
+## Tooltip
+
+`ChartTooltip` is the Recharts `Tooltip`, and `ChartTooltipContent` gives it a
+look that matches the rest of VitNode. It reads labels, icons and colours from
+your chart config.
+
+```tsx
+} />
+```
+
+Hover over the previews above to see all three indicators: `dashed` in the bar
+chart, `dot` in the area chart and `line` in the line chart.
+
+import { TypeTable } from 'fumadocs-ui/components/type-table'
+
+ ReactNode',
+ },
+ formatter: {
+ description: 'Renders each row yourself, replacing the default layout.',
+ type: '(value, name, item, index, payload) => ReactNode',
+ },
+ }}
+/>
+
+## Legend
+
+`ChartLegend` is the Recharts `Legend`, and `ChartLegendContent` renders the
+labels and colours (or icons) from your config:
+
+```tsx
+import {
+ ChartLegend,
+ ChartLegendContent,
+} from '@vitnode/core/components/ui/chart'
+```
+
+```tsx
+} />
+```
+
+Use `nameKey` to read legend labels from another key. That's handy for pie
+charts, where each slice is a row in your data rather than a series.
+
+## Accessibility
+
+- `accessibilityLayer` adds ARIA attributes and keyboard support. Tab to a
+ chart and use the arrow keys to move between points. The tooltip follows
+ along. It is on by default in Recharts 3, but writing it out makes the
+ intent clear.
+- Give each chart a `title` and a `desc`. Recharts renders them as the SVG's
+ `` and `<desc>`, so screen readers get more than "graphic".
+- Keep a visible heading next to the chart (a `CardTitle` works well), and
+ never rely on colour alone. Labels in the tooltip and legend tell series
+ apart for everyone.
+
+## API Reference
+
+[Recharts - API](https://recharts.github.io/en-US/api/)
diff --git a/apps/web/content/docs/ui/checkbox.mdx b/apps/web/content/docs/ui/checkbox.mdx
index 8f00b7bb2..a174389cf 100644
--- a/apps/web/content/docs/ui/checkbox.mdx
+++ b/apps/web/content/docs/ui/checkbox.mdx
@@ -1,6 +1,7 @@
---
title: Checkbox
description: Toggle between checked and unchecked states.
+icon: SquareCheck
---
## Preview
diff --git a/apps/web/content/docs/ui/color.mdx b/apps/web/content/docs/ui/color.mdx
index e81f63c98..50e2dec30 100644
--- a/apps/web/content/docs/ui/color.mdx
+++ b/apps/web/content/docs/ui/color.mdx
@@ -1,6 +1,7 @@
---
title: Color
description: Color picker field with a preset palette and a free-form picker, both storing HSL.
+icon: Pipette
---
## Preview
diff --git a/apps/web/content/docs/ui/colors.mdx b/apps/web/content/docs/ui/colors.mdx
index 2fd73b43d..82ea17b37 100644
--- a/apps/web/content/docs/ui/colors.mdx
+++ b/apps/web/content/docs/ui/colors.mdx
@@ -1,6 +1,7 @@
---
title: Colors
description: A collection of color utilities and components for consistent theming across your application.
+icon: Palette
---
<Callout type="warn" title="This documentation is under construction! 🚧">
diff --git a/apps/web/content/docs/ui/combobox.mdx b/apps/web/content/docs/ui/combobox.mdx
index fe6c208ec..699b8a2c1 100644
--- a/apps/web/content/docs/ui/combobox.mdx
+++ b/apps/web/content/docs/ui/combobox.mdx
@@ -1,6 +1,7 @@
---
title: Combobox
description: Select from a list of options with a search input.
+icon: ChevronsUpDown
---
## Preview
@@ -157,6 +158,135 @@ export function ComboboxBasic() {
</Tabs>
+## Groups and clear button
+
+<Preview name="combobox-groups" />
+
+Give options a `group` and they're sorted under headings. Handy once a list
+gets long enough to scroll. `showClear` adds an × that empties the field in one
+click.
+
+```tsx
+<AutoFormCombobox
+ {...props}
+ label="Timezone"
+ labels={[
+ { group: "Europe", label: "London", value: "europe-london" },
+ { group: "Europe", label: "Warsaw", value: "europe-warsaw" },
+ { group: "Americas", label: "New York", value: "america-new-york" },
+ ]}
+ showClear
+/>
+```
+
+Groups appear in the order they first show up in `labels`, and options without
+a `group` gather at the top with no heading.
+
+## Multiple
+
+<Preview name="combobox-multiple" />
+
+Pass `multiple` and use an array in the schema. Picked options pop in as
+chips, and removing one shrinks it away while the rest slide over to close the
+gap. The box keeps its width and wraps onto a new line when it's full.
+With reduced motion turned on, chips just appear and disappear.
+
+### Limit visible chips
+
+Picked a dozen tags? Set `maxVisibleChips` and only the first few show, followed
+by a "+N more" chip that counts the rest. Every pick is still saved. The
+limit is only visual.
+
+```tsx
+<AutoFormCombobox {...props} labels={topics} maxVisibleChips={3} multiple />
+```
+
+Press <kbd>Backspace</kbd> in an empty search to remove the last chip, or
+<kbd>Escape</kbd> with the list closed to clear every pick. That's the
+standard combobox pattern, and worth knowing before you hit Escape twice.
+
+<Tabs items={['Auto Form', 'Manual']}>
+ <Tab value="Auto Form">
+
+```ts
+const formSchema = z.object({
+ topics: z
+ .array(z.enum(["news", "guides", "releases"]))
+ .min(1, "Pick at least one topic")
+ .max(3, "Three topics is plenty"),
+});
+```
+
+```tsx
+<AutoFormCombobox
+ {...props}
+ label="Topics"
+ labels={[
+ { value: "news", label: "News" },
+ { value: "guides", label: "Guides" },
+ { value: "releases", label: "Releases" },
+ ]}
+ multiple
+/>
+```
+
+`.min()` and `.max()` on the array become the validation messages, and
+`fetchData` works with `multiple` too. The value is then an array of
+`{ value, label }` objects.
+
+ </Tab>
+
+ <Tab value="Manual">
+
+```tsx
+import {
+ Combobox,
+ ComboboxChip,
+ ComboboxChips,
+ ComboboxChipsInput,
+ ComboboxContent,
+ ComboboxEmpty,
+ ComboboxItem,
+ ComboboxList,
+ ComboboxValue,
+ useComboboxAnchor,
+} from "@vitnode/core/components/ui/combobox";
+
+export function ComboboxMultiple() {
+ const anchor = useComboboxAnchor();
+
+ return (
+ <Combobox items={frameworks} multiple>
+ <ComboboxChips ref={anchor}>
+ <ComboboxValue>
+ {(values: string[]) => (
+ <>
+ {values.map(value => (
+ <ComboboxChip key={value}>{value}</ComboboxChip>
+ ))}
+ <ComboboxChipsInput placeholder="Add a framework" />
+ </>
+ )}
+ </ComboboxValue>
+ </ComboboxChips>
+ <ComboboxContent anchor={anchor}>
+ <ComboboxEmpty>No items found.</ComboboxEmpty>
+ <ComboboxList>
+ {item => (
+ <ComboboxItem key={item} value={item}>
+ {item}
+ </ComboboxItem>
+ )}
+ </ComboboxList>
+ </ComboboxContent>
+ </Combobox>
+ );
+}
+```
+
+ </Tab>
+</Tabs>
+
## Props
import { TypeTable } from "fumadocs-ui/components/type-table";
@@ -187,8 +317,8 @@ import { TypeTable } from "fumadocs-ui/components/type-table";
},
labels: {
description:
- "An array of options for the combobox, each with a value and label. Used for static options.",
- type: "Array<{ value: string; label: string }>",
+ "An array of options for the combobox, each with a value, label and optional group heading. Used for static options.",
+ type: "Array<{ value: string; label: string; group?: string }>",
default: "[]",
},
placeholder: {
@@ -206,6 +336,17 @@ import { TypeTable } from "fumadocs-ui/components/type-table";
type: "boolean",
default: "false",
},
+ showClear: {
+ description: "Shows a button that clears the selection.",
+ type: "boolean",
+ default: "false",
+ },
+ maxVisibleChips: {
+ description:
+ "With `multiple`, shows only this many chips plus a \"+N more\" chip for the rest.",
+ type: "number",
+ default: "",
+ },
multiple: {
description:
"Whether multiple selections are allowed. Not used when fetchData is provided.",
diff --git a/apps/web/content/docs/ui/command.mdx b/apps/web/content/docs/ui/command.mdx
new file mode 100644
index 000000000..c419f0342
--- /dev/null
+++ b/apps/web/content/docs/ui/command.mdx
@@ -0,0 +1,303 @@
+---
+title: Command
+description: A command menu with search, groups and keyboard navigation. It's the "just type it" escape hatch for your app.
+icon: Command
+---
+
+## Preview
+
+<Preview name="command" />
+
+## Usage
+
+```ts
+import {
+ Command,
+ CommandEmpty,
+ CommandGroup,
+ CommandInput,
+ CommandItem,
+ CommandList,
+ CommandSeparator,
+ CommandShortcut,
+} from '@vitnode/core/components/ui/command'
+```
+
+```tsx
+<Command>
+ <CommandInput placeholder="Type a command or search..." />
+ <CommandList>
+ <CommandEmpty>No results found.</CommandEmpty>
+ <CommandGroup heading="Suggestions">
+ <CommandItem>Calendar</CommandItem>
+ <CommandItem>Search Emoji</CommandItem>
+ </CommandGroup>
+ </CommandList>
+</Command>
+```
+
+Start typing and the list filters itself and ranks the best matches first.
+Groups with nothing left to show politely step aside. It is built on
+[cmdk](https://cmdk.paco.me), so every cmdk prop works here too.
+
+## Groups and separators
+
+Wrap related items in a `CommandGroup` with a `heading`, and drop a
+`CommandSeparator` between groups when they need some breathing room.
+
+```tsx
+<CommandGroup heading="Suggestions">
+ <CommandItem>Calendar</CommandItem>
+</CommandGroup>
+<CommandSeparator />
+<CommandGroup heading="Settings">
+ <CommandItem>Profile</CommandItem>
+</CommandGroup>
+```
+
+## Icons and shortcuts
+
+Icons go first and are sized for you. `CommandShortcut` pushes a hint to the
+end of the row. It is just a label. Wiring up the actual shortcut is your job.
+
+```tsx
+<CommandItem>
+ <UserIcon />
+ <span>Profile</span>
+ <CommandShortcut>⌘P</CommandShortcut>
+</CommandItem>
+```
+
+## Empty state
+
+`CommandEmpty` only shows up when the search matches nothing. Make it helpful,
+or at least make it kind.
+
+```tsx
+<CommandEmpty>No results found.</CommandEmpty>
+```
+
+## Selecting and disabling items
+
+`onSelect` fires on click and on <kbd>Enter</kbd>. Add `disabled` to keep an
+item visible but out of reach. The keyboard skips it too.
+
+```tsx
+<CommandItem onSelect={() => router.navigate({ to: '/settings' })}>
+ Settings
+</CommandItem>
+<CommandItem disabled>Calculator</CommandItem>
+```
+
+Items are matched by their text. Give an item a `value` when the text is not
+unique, and `keywords` when people might search for it by another name:
+
+```tsx
+<CommandItem keywords={['theme', 'night']} value="toggle-dark-mode">
+ Toggle dark mode
+</CommandItem>
+```
+
+## Dialog
+
+<Preview name="command-dialog" />
+
+`CommandDialog` puts the whole thing in a [Dialog](/docs/ui/dialog), with a
+screen-reader-only title and description baked in. Pass a `Command` as its
+child and control it with `open` and `onOpenChange`.
+
+```tsx
+const [open, setOpen] = React.useState(false)
+
+React.useEffect(() => {
+ const handleKeyDown = (event: KeyboardEvent) => {
+ if (event.key.toLowerCase() !== 'j') return
+ if (!event.metaKey && !event.ctrlKey) return
+ if (event.altKey || event.shiftKey || event.defaultPrevented) return
+
+ event.preventDefault()
+ setOpen((prev) => !prev)
+ }
+
+ window.addEventListener('keydown', handleKeyDown)
+
+ return () => window.removeEventListener('keydown', handleKeyDown)
+}, [])
+
+<CommandDialog onOpenChange={setOpen} open={open}>
+ <Command>
+ <CommandInput placeholder="What do you need?" />
+ <CommandList>
+ <CommandEmpty>Nothing here. Try fewer letters?</CommandEmpty>
+ <CommandGroup heading="Actions">
+ <CommandItem onSelect={() => setOpen(false)}>Sign out</CommandItem>
+ </CommandGroup>
+ </CommandList>
+ </Command>
+</CommandDialog>
+```
+
+<Callout title="Why ⌘J and not ⌘K?">
+ This docs site already uses <kbd>⌘K</kbd> / <kbd>Ctrl+K</kbd> for search, and
+ so does the AdminCP. Two dialogs fighting over one shortcut is nobody's idea
+ of fun, so the demo listens for <kbd>⌘J</kbd> / <kbd>Ctrl+J</kbd> instead.
+ Pick whatever is free in your app, and always remove the listener on unmount.
+ Heads-up: once the palette is open, <kbd>Ctrl+J</kbd> moves down a row
+ instead of closing it - <kbd>Escape</kbd> is the way out.
+</Callout>
+
+Show the shortcut next to the trigger with the `Kbd` component:
+
+```tsx
+import { Kbd, KbdGroup } from '@vitnode/core/components/ui/kbd'
+
+<KbdGroup>
+ <Kbd>⌘</Kbd>
+ <Kbd>J</Kbd>
+</KbdGroup>
+```
+
+## Your own filtering
+
+Fetching results from an API? Turn the built-in filter off with
+`shouldFilter={false}` and render whatever your query returns. The AdminCP
+search works exactly like that.
+
+```tsx
+<Command shouldFilter={false}>
+ <CommandInput onValueChange={setSearch} value={search} />
+ <CommandList>
+ {users.map(user => (
+ <CommandItem key={user.id} value={user.id}>
+ {user.name}
+ </CommandItem>
+ ))}
+ </CommandList>
+</Command>
+```
+
+## Accessibility
+
+- The input is a `combobox` and the list a `listbox`, so screen readers announce
+ the highlighted option as you move through it.
+- <kbd>↑</kbd> / <kbd>↓</kbd> move between items, <kbd>Home</kbd> /{' '}
+ <kbd>End</kbd> jump to the ends and <kbd>Enter</kbd> selects. Set `loop` to
+ wrap around at the edges.
+- <kbd>Ctrl+N</kbd> / <kbd>Ctrl+J</kbd> and <kbd>Ctrl+P</kbd> /{' '}
+ <kbd>Ctrl+K</kbd> also move up and down while the menu has focus. Pass
+ `vimBindings={false}` if those keys mean something else in your app.
+- `CommandDialog` traps focus, closes on <kbd>Escape</kbd> and gives the dialog
+ an accessible name through its `title` and `description`.
+- Give a standalone `Command` a `label` so the input has a name too.
+
+## Props
+
+### Command
+
+import { TypeTable } from 'fumadocs-ui/components/type-table'
+
+<TypeTable
+ type={{
+ label: {
+ description: 'Accessible label for the command menu input.',
+ type: 'string',
+ },
+ shouldFilter: {
+ description:
+ 'Turn off the built-in filtering and sorting when you filter the items yourself.',
+ type: 'boolean',
+ default: 'true',
+ },
+ filter: {
+ description:
+ 'Custom ranking function. Return `0` to hide an item and a higher number to rank it higher.',
+ type: '(value: string, search: string, keywords?: string[]) => number',
+ },
+ value: {
+ description: 'Controls the highlighted item.',
+ type: 'string',
+ },
+ onValueChange: {
+ description: 'Called when the highlighted item changes.',
+ type: '(value: string) => void',
+ },
+ loop: {
+ description: 'Wrap the keyboard selection around at the top and bottom.',
+ type: 'boolean',
+ default: 'false',
+ },
+ vimBindings: {
+ description: 'Enable the `Ctrl+N/J/P/K` navigation shortcuts.',
+ type: 'boolean',
+ default: 'true',
+ },
+ }}
+/>
+
+### CommandDialog
+
+<TypeTable
+ type={{
+ open: {
+ description: 'Controls whether the dialog is open.',
+ type: 'boolean',
+ },
+ onOpenChange: {
+ description: 'Called when the dialog opens or closes.',
+ type: '(open: boolean) => void',
+ },
+ title: {
+ description: 'Screen-reader-only dialog title.',
+ type: 'string',
+ default: '"Command Palette"',
+ },
+ description: {
+ description: 'Screen-reader-only dialog description.',
+ type: 'string',
+ default: '"Search for a command to run..."',
+ },
+ showCloseButton: {
+ description: 'Show the close button in the corner.',
+ type: 'boolean',
+ default: 'false',
+ },
+ className: {
+ description: 'Classes for the dialog content.',
+ type: 'string',
+ },
+ }}
+/>
+
+### CommandItem
+
+<TypeTable
+ type={{
+ onSelect: {
+ description: 'Called when the item is clicked or chosen with Enter.',
+ type: '(value: string) => void',
+ },
+ value: {
+ description:
+ 'A unique value used for filtering and selection. Defaults to the text content.',
+ type: 'string',
+ },
+ keywords: {
+ description: 'Extra words the item should match.',
+ type: 'string[]',
+ },
+ disabled: {
+ description: 'Keep the item visible but not selectable.',
+ type: 'boolean',
+ default: 'false',
+ },
+ forceMount: {
+ description: 'Always render the item, even when it does not match.',
+ type: 'boolean',
+ default: 'false',
+ },
+ }}
+/>
+
+## API Reference
+
+[cmdk](https://github.com/pacocoursey/cmdk#parts-and-styling)
diff --git a/apps/web/content/docs/ui/comparison.mdx b/apps/web/content/docs/ui/comparison.mdx
new file mode 100644
index 000000000..52c444c8c
--- /dev/null
+++ b/apps/web/content/docs/ui/comparison.mdx
@@ -0,0 +1,103 @@
+---
+title: Comparison
+description: A before/after slider. Drag the handle to reveal one image over another.
+icon: Columns2
+---
+
+## Preview
+
+<Preview name="comparison" />
+
+## Usage
+
+```ts
+import {
+ Comparison,
+ ComparisonHandle,
+ ComparisonItem,
+} from '@vitnode/core/components/ui/comparison'
+```
+
+```tsx
+<Comparison aria-label="Before and after" className="aspect-video">
+ <ComparisonItem position="left">
+ <img alt="" draggable={false} src={before} />
+ </ComparisonItem>
+ <ComparisonItem position="right">
+ <img alt="" draggable={false} src={after} />
+ </ComparisonItem>
+ <ComparisonHandle />
+</Comparison>
+```
+
+`position="left"` is the side shown to the left of the handle, `right` the side
+shown to its right. Images inside an item fill it with `object-cover`, so give
+the `Comparison` a size or an aspect ratio and both pictures line up.
+
+## Hover mode
+
+With `mode="hover"` the handle follows the pointer, no clicking needed. It's
+nice for quick, playful comparisons, but for anything precise, stick with
+dragging.
+
+```tsx
+<Comparison mode="hover">...</Comparison>
+```
+
+## Starting point and changes
+
+```tsx
+<Comparison
+ defaultPosition={30}
+ onPositionChange={position => console.log(position)}
+>
+ ...
+</Comparison>
+```
+
+`position` goes from 0 (all right image) to 100 (all left image).
+
+## Custom handle
+
+`ComparisonHandle` draws a line with a grip by default. Pass children to draw
+your own, and the handle still moves with the slider.
+
+```tsx
+<ComparisonHandle>
+ <div className="bg-primary h-full w-0.5" />
+</ComparisonHandle>
+```
+
+## Accessibility
+
+- The whole comparison is a slider. Focus it with <kbd>Tab</kbd>, then use the
+ arrow keys (5% a step, 10% with <kbd>Shift</kbd>), <kbd>Home</kbd> and
+ <kbd>End</kbd>.
+- Screen readers hear the position as a percentage. Name the slider with
+ `aria-label`. "Light and dark theme" says more than the default.
+- The images are decorative inside the slider (`alt=""`); describe what's being
+ compared in the label or a caption.
+- Dragging sideways never blocks scrolling the page up and down on phones.
+
+## Props
+
+import { TypeTable } from 'fumadocs-ui/components/type-table'
+
+<TypeTable
+ type={{
+ mode: {
+ description: 'Drag the handle, or have it follow the pointer.',
+ type: '"drag" | "hover"',
+ default: '"drag"',
+ },
+ defaultPosition: {
+ description: 'Where the handle starts, from 0 to 100.',
+ type: 'number',
+ default: '50',
+ },
+ onPositionChange: {
+ description: 'Called with the new position as it moves.',
+ type: '(position: number) => void',
+ },
+ }}
+/>
diff --git a/apps/web/content/docs/ui/confirm-action-alert-dialog.mdx b/apps/web/content/docs/ui/confirm-action-alert-dialog.mdx
index 785e9d8e3..1c65df295 100644
--- a/apps/web/content/docs/ui/confirm-action-alert-dialog.mdx
+++ b/apps/web/content/docs/ui/confirm-action-alert-dialog.mdx
@@ -1,6 +1,7 @@
---
title: Confirm Action Alert Dialog
description: A dialog component for confirming destructive actions like delete operations, built on top of the Alert Dialog.
+icon: ShieldAlert
---
The Confirm Action Alert Dialog is a specialized dialog component built on top of the [Alert Dialog](/docs/ui/alert-dialog) that provides a consistent way to confirm potentially destructive or irreversible actions before they're executed.
@@ -75,6 +76,11 @@ import { TypeTable } from 'fumadocs-ui/components/type-table';
type: 'ReactNode',
default: 'This action cannot be undone.',
},
+ icon: {
+ description:
+ 'Icon shown above the title. Switches the dialog to the compact, centered layout.',
+ type: 'ReactNode',
+ },
textSubmit: {
description:
'Custom text for the submit button. Defaults to translated "Confirm".',
diff --git a/apps/web/content/docs/ui/context-menu.mdx b/apps/web/content/docs/ui/context-menu.mdx
new file mode 100644
index 000000000..78c0edfca
--- /dev/null
+++ b/apps/web/content/docs/ui/context-menu.mdx
@@ -0,0 +1,235 @@
+---
+title: Context Menu
+description: A menu that opens on right-click or long-press, with shortcuts, submenus, checkbox and radio items.
+icon: MousePointerClick
+---
+
+## Preview
+
+<Preview name="context-menu" />
+
+## Usage
+
+```ts
+import {
+ ContextMenu,
+ ContextMenuContent,
+ ContextMenuItem,
+ ContextMenuSeparator,
+ ContextMenuShortcut,
+ ContextMenuTrigger,
+} from '@vitnode/core/components/ui/context-menu'
+```
+
+```tsx
+<ContextMenu>
+ <ContextMenuTrigger className="flex h-40 items-center justify-center rounded-xl border-2 border-dashed">
+ Right-click here
+ </ContextMenuTrigger>
+ <ContextMenuContent className="w-56">
+ <ContextMenuItem>
+ Reload
+ <ContextMenuShortcut>⌘R</ContextMenuShortcut>
+ </ContextMenuItem>
+ <ContextMenuItem>Rename</ContextMenuItem>
+ <ContextMenuSeparator />
+ <ContextMenuItem variant="destructive">Delete</ContextMenuItem>
+ </ContextMenuContent>
+</ContextMenu>
+```
+
+Right-click the trigger with a mouse, or press and hold it on a phone or
+tablet. The menu opens right where your cursor or finger is, so there's no
+button to find first.
+
+## Submenus
+
+Nest a `ContextMenuSub` to tuck the rarely used stuff one level deeper. It opens
+on hover, on click, or with the arrow keys.
+
+```tsx
+import {
+ ContextMenuSub,
+ ContextMenuSubContent,
+ ContextMenuSubTrigger,
+} from '@vitnode/core/components/ui/context-menu'
+
+<ContextMenuSub>
+ <ContextMenuSubTrigger>More tools</ContextMenuSubTrigger>
+ <ContextMenuSubContent className="w-48">
+ <ContextMenuItem>Save page as...</ContextMenuItem>
+ <ContextMenuItem>Developer tools</ContextMenuItem>
+ </ContextMenuSubContent>
+</ContextMenuSub>
+```
+
+## Checkbox and radio items
+
+Use `ContextMenuCheckboxItem` for independent toggles and a
+`ContextMenuRadioGroup` when exactly one option can win. Both work controlled or
+uncontrolled, just like their form siblings.
+
+```tsx
+import {
+ ContextMenuCheckboxItem,
+ ContextMenuLabel,
+ ContextMenuRadioGroup,
+ ContextMenuRadioItem,
+} from '@vitnode/core/components/ui/context-menu'
+
+const [showBookmarks, setShowBookmarks] = React.useState(true)
+const [person, setPerson] = React.useState('pedro')
+
+<ContextMenuCheckboxItem
+ checked={showBookmarks}
+ onCheckedChange={setShowBookmarks}
+>
+ Show bookmarks bar
+</ContextMenuCheckboxItem>
+<ContextMenuSeparator />
+<ContextMenuLabel>People</ContextMenuLabel>
+<ContextMenuRadioGroup value={person} onValueChange={setPerson}>
+ <ContextMenuRadioItem value="pedro">Pedro Duarte</ContextMenuRadioItem>
+ <ContextMenuRadioItem value="colm">Colm Tuite</ContextMenuRadioItem>
+</ContextMenuRadioGroup>
+```
+
+The check mark sits at the end of the row. Add `inset` to items, labels and
+sub-triggers without an icon so their text lines up with the ones that have
+one.
+
+## Shortcuts
+
+`ContextMenuShortcut` shows a keyboard hint at the end of an item. It is only a
+label. Wire up the actual key binding yourself, or it's a promise you aren't
+keeping.
+
+```tsx
+<ContextMenuItem>
+ Save page as...
+ <ContextMenuShortcut>⇧⌘S</ContextMenuShortcut>
+</ContextMenuItem>
+```
+
+## Destructive items
+
+Set `variant="destructive"` for actions you cannot take back, so they look the
+part.
+
+```tsx
+<ContextMenuItem variant="destructive">
+ <Trash2Icon />
+ Delete
+</ContextMenuItem>
+```
+
+## Accessibility
+
+- Context menus are hidden by nature, since nothing on screen says "right-click
+ me". Every action inside one must also be reachable another way, such as a
+ toolbar, a [Dropdown Menu](/docs/ui/dropdown-menu) or a keyboard shortcut.
+ Treat the context menu as a shortcut, never as the only door.
+- The trigger is a plain, non-focusable area, so keyboard users cannot open
+ the menu at all. One more reason for the rule above. Once it is open,
+ arrow keys move between items, the right arrow opens a submenu, typing a
+ letter jumps to a matching item and `Escape` closes it.
+- On touch devices a long-press opens the menu, and the trigger sets
+ `select-none` so holding it does not start a text selection.
+- Disabled items stay visible and are announced as disabled, so nobody wonders
+ where "Forward" went.
+
+## Props
+
+import { TypeTable } from 'fumadocs-ui/components/type-table'
+
+### ContextMenu
+
+<TypeTable
+ type={{
+ open: {
+ description: 'Controls whether the menu is open.',
+ type: 'boolean',
+ },
+ defaultOpen: {
+ description: 'Whether the menu is open on the first render.',
+ type: 'boolean',
+ default: 'false',
+ },
+ onOpenChange: {
+ description: 'Called when the menu opens or closes.',
+ type: '(open: boolean, eventDetails) => void',
+ },
+ disabled: {
+ description: 'Stops the menu from opening.',
+ type: 'boolean',
+ default: 'false',
+ },
+ }}
+/>
+
+### ContextMenuContent
+
+<TypeTable
+ type={{
+ side: {
+ description:
+ 'Which side of the cursor the menu prefers. It flips when there is no room.',
+ type: 'top | bottom | left | right | inline-start | inline-end',
+ default: 'bottom',
+ },
+ align: {
+ description: 'How the menu aligns against the cursor on the chosen side.',
+ type: 'start | center | end',
+ default: 'start',
+ },
+ sideOffset: {
+ description: 'Distance from the cursor in pixels.',
+ type: 'number',
+ default: '0',
+ },
+ alignOffset: {
+ description: 'Shift along the alignment axis in pixels.',
+ type: 'number',
+ default: '0',
+ },
+ }}
+/>
+
+### ContextMenuItem
+
+<TypeTable
+ type={{
+ variant: {
+ description: 'The look of the item.',
+ type: 'default | destructive',
+ default: 'default',
+ },
+ inset: {
+ description: 'Adds start padding so the text lines up with items that have an icon.',
+ type: 'boolean',
+ default: 'false',
+ },
+ disabled: {
+ description: 'Shows the item but makes it non-interactive.',
+ type: 'boolean',
+ default: 'false',
+ },
+ closeOnClick: {
+ description: 'Whether clicking the item closes the menu.',
+ type: 'boolean',
+ default: 'true',
+ },
+ onClick: {
+ description: 'Called when the item is chosen with a click, tap or the keyboard.',
+ type: '(event) => void',
+ },
+ }}
+/>
+
+`ContextMenuCheckboxItem` takes `checked`, `defaultChecked` and
+`onCheckedChange`; `ContextMenuRadioGroup` takes `value`, `defaultValue` and
+`onValueChange`. Both item types accept `inset` and `disabled` too.
+
+## API Reference
+
+[Base UI - Context Menu](https://base-ui.com/react/components/context-menu#api-reference)
diff --git a/apps/web/content/docs/ui/copy-button.mdx b/apps/web/content/docs/ui/copy-button.mdx
new file mode 100644
index 000000000..9a97ba568
--- /dev/null
+++ b/apps/web/content/docs/ui/copy-button.mdx
@@ -0,0 +1,121 @@
+---
+title: Copy Button
+description: A button that copies text to the clipboard, then swaps its icon for a check mark that draws itself.
+icon: Copy
+---
+
+## Preview
+
+<Preview name="copy-button" />
+
+## Usage
+
+```ts
+import { CopyButton } from '@vitnode/core/components/ui/copy-button'
+```
+
+```tsx
+<CopyButton content="Hello world!" />
+```
+
+Click it and the copy icon blurs away while a check mark draws itself in, with
+the same stroke animation as the [Checkbox](/docs/ui/checkbox). After `delay`
+milliseconds it goes back to the copy icon, ready for round two.
+
+## With a label
+
+Pass children to show text next to the icon. The text becomes the button's
+accessible name, so screen readers hear what you see.
+
+```tsx
+<CopyButton content={inviteLink} variant="secondary">
+ Copy invite link
+</CopyButton>
+```
+
+## Icon only
+
+Without children the button renders as an icon. It labels itself "Copy" and
+"Copied" out of the box, but a specific label is friendlier when there are a few
+copy buttons on one screen.
+
+```tsx
+<CopyButton
+ aria-label="Copy install command"
+ content="pnpm create vitnode-app@canary"
+ size="icon-sm"
+ variant="ghost"
+/>
+```
+
+## Controlled
+
+Own the copied state with `copied` and `onCopiedChange` when something else on
+the page should react to the copy.
+
+```tsx
+const [copied, setCopied] = React.useState(false)
+
+<CopyButton
+ content={apiKey}
+ copied={copied}
+ onCopiedChange={setCopied}
+/>
+```
+
+## Accessibility
+
+- A polite live region announces "Copied" after a successful copy, so screen
+ reader users hear the change too.
+- With reduced motion turned on, the icons simply fade and the check mark shows
+ up fully drawn.
+- If the browser blocks clipboard access (for example on a non-HTTPS page), an
+ error toast explains what happened instead of failing silently.
+- Calling `event.preventDefault()` inside your own `onClick` skips the copy.
+
+## Props
+
+import { TypeTable } from 'fumadocs-ui/components/type-table'
+
+<TypeTable
+ type={{
+ content: {
+ description: 'The text written to the clipboard.',
+ type: 'string',
+ required: true,
+ },
+ copied: {
+ description: 'Controls the copied state.',
+ type: 'boolean',
+ },
+ onCopiedChange: {
+ description:
+ 'Called with `true` after a successful copy and with `false` when the button resets.',
+ type: '(copied: boolean) => void',
+ },
+ delay: {
+ description: 'How long the check mark stays, in milliseconds.',
+ type: 'number',
+ default: '3000',
+ },
+ variant: {
+ description: 'The variant of the button.',
+ type: 'default | secondary | outline | ghost | link | success | warning | destructive',
+ default: 'outline',
+ },
+ size: {
+ description:
+ 'The size of the button. Defaults to `icon` without children and `default` with them.',
+ type: 'default | xs | sm | lg | icon | icon-xs | icon-sm | icon-lg',
+ },
+ 'aria-label': {
+ description:
+ 'Overrides the accessible name. Without children it defaults to "Copy" / "Copied".',
+ type: 'string',
+ },
+ }}
+/>
+
+## API Reference
+
+[Base UI - Button](https://base-ui.com/react/components/button#api-reference)
diff --git a/apps/web/content/docs/ui/counter.mdx b/apps/web/content/docs/ui/counter.mdx
new file mode 100644
index 000000000..61ebcf7fa
--- /dev/null
+++ b/apps/web/content/docs/ui/counter.mdx
@@ -0,0 +1,130 @@
+---
+title: Counter
+description: A plus/minus number picker whose digits roll into place, plus the SlidingNumber behind it.
+icon: Calculator
+---
+
+## Preview
+
+<Preview name="counter" />
+
+## Usage
+
+```ts
+import { Counter } from '@vitnode/core/components/ui/counter'
+```
+
+```tsx
+const [quantity, setQuantity] = React.useState(1)
+
+<Counter max={10} min={1} onValueChange={setQuantity} value={quantity} />
+```
+
+Each digit rolls on its own, the short way round: going from 9 to 10 rolls the
+last digit forward to 0 while a new 1 slides in, instead of spinning back
+through every number. The buttons give a tiny press, and a button is disabled
+once you hit `min` or `max`, so nobody wonders why clicking does nothing.
+
+Leave out `value` and use `defaultValue` if you only care about changes:
+
+```tsx
+<Counter defaultValue={2} onValueChange={value => save(value)} />
+```
+
+## Steps and limits
+
+`step` sets how far one click goes. A step that would jump past a limit stops
+right at it. With `max={10}` and `step={5}`, 8 goes to 10, not 13.
+
+```tsx
+<Counter max={100} min={0} step={5} />
+```
+
+## Sliding number
+
+<Preview name="counter-sliding-number" />
+
+The rolling digits are their own component, so you can animate any number,
+like a download count or a price, without the buttons:
+
+```ts
+import { SlidingNumber } from '@vitnode/core/components/ui/sliding-number'
+```
+
+```tsx
+<SlidingNumber className="text-5xl font-semibold" value={downloads} />
+```
+
+It takes the font size and colour of its surroundings and always uses
+tabular figures, so digits don't wobble as they change. It handles positive
+and negative numbers, decimals included (up to 6 places), so `step={0.5}` on a
+`Counter` shows `0.5`, not a fib.
+
+## In a form
+
+Counter is a standalone control. In an AutoForm, the
+[number field](/docs/ui/auto-form) is still the way to collect a number that
+gets saved.
+
+## Accessibility
+
+- The buttons are labelled "Decrease" and "Increase" in the user's language.
+- Screen readers hear the new value after every click. The rolling digits
+ themselves are hidden from assistive tech.
+- Give the counter a name with `aria-label` or `aria-labelledby`, so "Increase"
+ has context. Increase _what_?
+- With reduced motion turned on, digits change instantly.
+
+## Props
+
+import { TypeTable } from 'fumadocs-ui/components/type-table'
+
+### Counter
+
+<TypeTable
+ type={{
+ value: {
+ description: 'The current value (controlled).',
+ type: 'number',
+ },
+ defaultValue: {
+ description: 'The starting value when uncontrolled.',
+ type: 'number',
+ default: '0',
+ },
+ onValueChange: {
+ description: 'Called with the new value after a click.',
+ type: '(value: number) => void',
+ },
+ min: {
+ description: 'The lowest allowed value.',
+ type: 'number',
+ },
+ max: {
+ description: 'The highest allowed value.',
+ type: 'number',
+ },
+ step: {
+ description: 'How much one click adds or removes.',
+ type: 'number',
+ default: '1',
+ },
+ disabled: {
+ description: 'Disables both buttons.',
+ type: 'boolean',
+ default: 'false',
+ },
+ }}
+/>
+
+### SlidingNumber
+
+<TypeTable
+ type={{
+ value: {
+ description: 'The number to show. Decimals beyond 6 places are rounded.',
+ type: 'number',
+ required: true,
+ },
+ }}
+/>
diff --git a/apps/web/content/docs/ui/data-table.mdx b/apps/web/content/docs/ui/data-table.mdx
deleted file mode 100644
index 13aac9105..000000000
--- a/apps/web/content/docs/ui/data-table.mdx
+++ /dev/null
@@ -1,587 +0,0 @@
----
-title: Data Table
-description: A table component with sorting, filtering, and pagination compatible with VitNode API.
----
-
-## Preview
-
-<Preview name="data-table" withoutBackground />
-
-## Usage
-
-```ts
-import {
- type ColumnDef,
- DataTable,
-} from '@vitnode/core/components/table/data-table'
-```
-
-Columns are typed with `ColumnDef<T>`, where `T` is the shape of a single row. An **accessor column** binds to the data through `accessorKey`, which is type-safe - it only accepts a `keyof T`, just like TanStack Table. A **display column** (for actions, selection, etc.) has no `accessorKey` and instead requires a string `id`.
-
-```tsx
-const columns: ColumnDef<User>[] = [
- { accessorKey: 'name', header: 'Name' },
- { accessorKey: 'email', header: 'Email' },
- { accessorKey: 'role', header: 'Role' },
- { accessorKey: 'status', header: 'Status', align: 'center' },
- {
- id: 'actions',
- header: '',
- align: 'right',
- cell: () => (
- <Button size="sm" variant="outline">
- Edit
- </Button>
- ),
- },
-]
-
-;<DataTable
- id="users-table"
- columns={columns}
- edges={data.edges}
- pageInfo={data.pageInfo}
- order={{
- defaultOrder: {
- column: 'name',
- order: 'asc',
- },
- }}
-/>
-```
-
-<Callout type="info" title="Type-safe columns">
- `accessorKey` autocompletes and is checked against the row type `T` - passing
- a key that doesn't exist on `T` is a compile-time error. Use `id` (a plain
- `string`) for display columns that aren't backed by a data field.
-</Callout>
-
-import { TypeTable } from 'fumadocs-ui/components/type-table'
-
-<TypeTable
- type={{
- columns: {
- description:
- 'Array of column definitions. Accessor columns bind to data via a type-safe accessorKey (keyof T); display columns (e.g. actions) use a string id instead.',
- required: true,
- type: `ColumnDef<T>[] where ColumnDef<T> is:
- // accessor column
- {
- accessorKey: keyof T;
- header: ReactNode;
- id?: string;
- align?: 'left' | 'center' | 'right';
- className?: string;
- cell?: (props: { row: T; allData: T[] }) => ReactNode;
- }
- // or display column
- {
- id: string;
- header: ReactNode;
- align?: 'left' | 'center' | 'right';
- className?: string;
- cell?: (props: { row: T; allData: T[] }) => ReactNode;
- }`,
- },
- edges: {
- description: 'Data to be displayed in the table',
- required: true,
- type: 'Array',
- },
- order: {
- description: 'Column sorting configuration',
- required: true,
- type: `{
- columns?: string[];
- defaultOrder: {
- column: string;
- order: 'asc' | 'desc';
- };
- }`,
- },
- pageInfo: {
- description:
- 'Pagination information from the API. Pass it straight through — the table renders numbered pages and a "Showing 21–30 of 380" range from it.',
- required: true,
- type: `{
- count: number;
- totalCount: number;
- totalPages: number;
- currentPage: number | null;
- hasNextPage: boolean;
- hasPreviousPage: boolean;
- startCursor: string | null;
- endCursor: string | null;
- }`,
- },
- search: {
- description:
- 'Renders a search input above the table. Requires the API route to define the searchable columns.',
- required: false,
- type: 'boolean',
- },
- searchPlaceholder: {
- description: 'Custom placeholder text for the search input',
- required: false,
- type: 'string',
- },
- bulkActions: {
- description:
- 'Actions for the rows a person ticked, rendered in a bar that floats at the bottom centre of the viewport. Passing this turns row selection on: the table grows a leading checkbox column, and the nodes here read the ticked ids with useDataTableSelection().',
- required: false,
- type: 'ReactNode',
- },
- filters: {
- description:
- 'Renders one or more faceted multi-select dropdowns above the table. Each filter controls its own URL query parameter.',
- required: false,
- type: `{
- id: string;
- label: string;
- options?: {
- value: string;
- label: ReactNode;
- keywords?: string[];
- }[];
- onSearch?: (search: string) => Promise<{
- value: string;
- label: ReactNode;
- keywords?: string[];
- }[]>;
- }[]`,
- },
- }}
-/>
-
-## Cell Renderer
-
-You can customize how each cell is rendered using the `cell` property. The renderer function receives the current row data and all table data as parameters.
-
-```tsx
-<DataTable
- id="users-table"
- columns={[
- {
- accessorKey: 'id',
- header: 'Id',
- // [!code ++]
- cell: ({ row, allData }) => (
- // [!code ++]
- <span>
- // [!code ++]
- {row.id} - all data {allData.length}
- // [!code ++]
- </span>
- // [!code ++]
- ),
- },
- { accessorKey: 'createdAt', header: 'Created at' },
- ]}
- edges={data.edges}
- pageInfo={data.pageInfo}
- order={{
- columns: ['createdAt', 'id'],
- defaultOrder: {
- order: 'desc',
- },
- }}
-/>
-```
-
-### Order Configuration
-
-If you want to enable sorting on specific columns, you can specify them in the `columns` property.
-
-```tsx
-order={{
- // [!code ++]
- columns: ['createdAt', 'id', 'name'],
- defaultOrder: {
- column: 'createdAt',
- order: 'desc',
- }
-}}
-```
-
-## Column Alignment
-
-Use the `align` property to control the horizontal alignment of a column's header and cells. It accepts `"left"` (default), `"center"`, or `"right"`. This is handy for numeric values and action buttons.
-
-```tsx
-columns={[
- { accessorKey: "name", header: "Name" },
- // [!code ++]
- { accessorKey: "status", header: "Status", align: "center" },
- {
- id: "actions",
- header: "",
- // [!code ++]
- align: "right",
- cell: ({ row }) => <RowActions id={row.id} />,
- },
-]}
-```
-
-## Search
-
-Set the `search` prop to `true` to render a search input above the table. You can optionally customize the placeholder with `searchPlaceholder`.
-
-```tsx
-<DataTable
- id="users-table"
- // [!code ++]
- search
- // [!code ++]
- searchPlaceholder="Search users..."
- columns={[
- { accessorKey: 'name', header: 'Name' },
- { accessorKey: 'email', header: 'Email' },
- ]}
- edges={data.edges}
- pageInfo={data.pageInfo}
- order={{
- defaultOrder: {
- column: 'name',
- order: 'asc',
- },
- }}
-/>
-```
-
-The input writes the term to the `?search=` query parameter (debounced) and reloads the page, so it works out of the box with server-side data fetching. The columns that are actually searched are defined on the API route.
-
-<Callout type="info" title="Configure the API route">
- Enabling `search` only renders the input. You must also tell the backend which
- columns to search across - see the [Search](/docs/dev/database/search) guide.
-</Callout>
-
-## Filters
-
-Pass the `filters` prop to render one or more faceted, multi-select dropdowns above the table (next to the search input). Each filter controls its own URL query parameter, so it works out of the box with server-side data fetching. Multiple selected values are stored as a comma-separated list, e.g. `?roleId=1,3`, and changing a filter returns you to the first page.
-
-<TypeTable
- type={{
- id: {
- description: 'The URL query parameter this filter reads and writes.',
- required: true,
- type: 'string',
- },
- label: {
- description:
- 'Text shown on the filter trigger and as the search placeholder.',
- required: true,
- type: 'string',
- },
- options: {
- description:
- 'Static options, filtered on the client. `label` can be any node; provide `keywords` so typing can search a node-based label.',
- required: false,
- type: `{
- value: string;
- label: ReactNode;
- keywords?: string[];
- }[]`,
- },
- onSearch: {
- description:
- 'Async source called (debounced) as the user types. The API is expected to return results already filtered and capped (e.g. 20 per request).',
- required: false,
- type: '(search: string) => Promise<Option[]>',
- },
- }}
-/>
-
-### Static filters
-
-When the set of options is small and known ahead of time, pass them directly via `options`. The dropdown list is filtered on the client.
-
-```tsx
-<DataTable
- id="users-table"
- // [!code ++]
- filters={[
- // [!code ++]
- {
- // [!code ++]
- id: 'status',
- // [!code ++]
- label: 'Status',
- // [!code ++]
- options: [
- // [!code ++]
- { value: 'active', label: 'Active' },
- // [!code ++]
- { value: 'banned', label: 'Banned' },
- // [!code ++]
- ],
- // [!code ++]
- },
- // [!code ++]
- ]}
- columns={[
- { accessorKey: 'name', header: 'Name' },
- { accessorKey: 'email', header: 'Email' },
- ]}
- edges={data.edges}
- pageInfo={data.pageInfo}
- order={{
- defaultOrder: {
- column: 'name',
- order: 'asc',
- },
- }}
-/>
-```
-
-### Async filters
-
-When the options come from the API (for example a large or searchable list), provide an `onSearch` callback instead of `options`. It runs - debounced - as the user types and should return results already filtered and capped by the server. The universal fetcher answers from the browser here, with the visitor's own cookies:
-
-```tsx title="search-roles.tsx"
-import type { FilterOption } from '@vitnode/core/components/table/filters'
-
-import { RoleFormat } from '@vitnode/core/components/role-format'
-import { fetcher } from '@vitnode/core/tanstack/fetcher'
-
-export const searchRoles = async (search: string): Promise<FilterOption[]> => {
- const res = await fetcher({
- plugin: '@vitnode/core',
- path: '/list',
- method: 'get',
- module: 'admin/roles',
- args: {
- query: { search, first: '20' },
- },
- withPagination: true,
- })
-
- if (res.status !== 200) {
- return []
- }
-
- const data = await res.json()
-
- return data.edges.map((role) => ({
- value: String(role.id),
- label: <RoleFormat role={role} />,
- keywords: role.name.map((item) => item.name),
- }))
-}
-```
-
-```tsx
-filters={[
- {
- id: "roleId",
- label: "Group",
- // [!code ++]
- onSearch: searchRoles,
- },
-]}
-```
-
-<Callout type="info" title="Configure the API route">
- A filter only writes its values to the URL - the backend must read the query
- parameter and apply the matching `where` clause. For a comma-separated
- multi-select, split the value and use `inArray`:
-
-```ts
-const roleIds = (query.roleId?.split(",") ?? [])
- .filter(Boolean)
- .map(Number)
- .filter((id) => !Number.isNaN(id));
-
-// pass to withPagination:
-where: roleIds.length ? inArray(core_users.roleId, roleIds) : undefined,
-```
-
-</Callout>
-
-## Pagination
-
-The table renders its own pager from `pageInfo` — numbered pages with a first/last
-anchor and an ellipsis in between, a rows-per-page select, and a
-"Showing 21–30 of 380" range. You wire up nothing: pass `pageInfo` through and it
-appears.
-
-Each page is a real link (`?page=3`), so middle-click and "open in new tab" work,
-while a plain click stays a client-side navigation. On phones the numbers collapse
-to a "Page 3 of 38" label between the arrows, because forty tap targets do not fit
-on a 390px screen.
-
-Two details worth knowing:
-
-- **Changing the page size or a filter returns you to page one.** A filter changes
- which rows exist, so the page you were on no longer means what it meant.
-- **A page past the end lands on the last page**, not on an empty table. Stale
- links and hand-typed numbers stay useful.
-
-The API does the counting. See [Pagination](/docs/dev/database/pagination) for the
-route side, including the index your ordered column needs.
-
-## Bulk Actions
-
-Pass `bulkActions` to let a person act on several rows at once. That single prop is what turns selection on: the table grows a leading checkbox column - one per row, plus a header checkbox that ticks the whole page - and while anything is ticked, a bar floats at the bottom centre of the viewport with the count, your actions, and a button to clear the selection.
-
-<Preview name="data-table-bulk-actions" withoutBackground />
-
-Your actions read the ticked ids with the `useDataTableSelection` hook. They are rendered inside the bar, which lives inside the table's selection provider, so nothing has to be threaded through props:
-
-```tsx title="delete-bulk-action.tsx"
-'use client'
-
-import { useDataTableSelection } from '@vitnode/core/components/table/selection'
-import { Button } from '@vitnode/core/components/ui/button'
-
-export const DeleteBulkAction = () => {
- // [!code ++]
- const { clear, selected } = useDataTableSelection()
-
- return (
- <Button
- onClick={() => deleteUsersAction({ ids: selected })}
- variant="destructive"
- >
- <Trash2Icon />
- Delete
- </Button>
- )
-}
-```
-
-```tsx
-<DataTable
- id="users-table"
- // [!code ++]
- bulkActions={<DeleteBulkAction />}
- columns={[
- { accessorKey: 'name', header: 'Name' },
- { accessorKey: 'email', header: 'Email' },
- ]}
- edges={data.edges}
- pageInfo={data.pageInfo}
- order={{
- defaultOrder: {
- column: 'name',
- order: 'asc',
- },
- }}
-/>
-```
-
-### What the hook returns
-
-<TypeTable
- type={{
- selected: {
- description: 'The ticked row ids, in the order they were ticked.',
- required: true,
- type: 'number[]',
- },
- isSelected: {
- description: 'Whether one row id is ticked.',
- required: true,
- type: '(id: number) => boolean',
- },
- allSelected: {
- description: 'Every row on the page is ticked.',
- required: true,
- type: 'boolean',
- },
- someSelected: {
- description:
- "Some but not all rows are ticked - the header checkbox's indeterminate state.",
- required: true,
- type: 'boolean',
- },
- toggle: {
- description: 'Ticks or unticks one row.',
- required: true,
- type: '(id: number) => void',
- },
- toggleAll: {
- description: 'Ticks or unticks every row on the page.',
- required: true,
- type: '(next: boolean) => void',
- },
- clear: {
- description: 'Unticks everything, which hides the bar.',
- required: true,
- type: '() => void',
- },
- }}
-/>
-
-### Selection is per page
-
-The selection only ever covers the rows currently on screen. Whenever the server sends a different set of row ids - paging, searching, changing a filter - the selection is pruned to what is still there, so paging away empties it on its own and a bulk action can never touch a row nobody can see.
-
-That pruning is also what makes a partly-successful action readable: revalidate after deleting 3 of 5 rows and the 2 that were refused stay on screen _and_ stay ticked, so the bar is still pointed at exactly the work that is left.
-
-<Callout type="warn" title="Bulk actions run per row">
- There is no bulk endpoint behind `bulkActions` - it hands you ids, and what
- you do with them is yours. When your action loops the single-row endpoint, cap
- the fan-out and report the outcomes per reason rather than as one pass/fail,
- so a run that partly succeeded can say so.
-</Callout>
-
-## Complete Example
-
-Here's a complete example showing how to use the `DataTable` component in a page:
-
-```tsx
-import {
- DataTable,
- SearchParamsDataTable,
-} from '@vitnode/core/components/table/data-table'
-import { fetcher } from '@vitnode/core/tanstack/fetcher'
-
-export const UsersView = async ({
- searchParams,
-}: {
- searchParams: Promise<SearchParamsDataTable>
-}) => {
- const query = await searchParams
- const res = await fetcher({
- plugin: '@vitnode/core',
- path: '/list',
- method: 'get',
- module: 'admin/users',
- args: {
- query,
- },
- withPagination: true,
- })
- const data = await res.json()
-
- return (
- <DataTable
- id="users-table"
- columns={[
- {
- accessorKey: 'id',
- header: 'ID',
- },
- {
- accessorKey: 'username',
- header: 'Username',
- cell: ({ row }) => (
- <span className="font-medium">{row.username}</span>
- ),
- },
- { accessorKey: 'email', header: 'Email' },
- { accessorKey: 'createdAt', header: 'Created at' },
- ]}
- edges={data.edges}
- order={{
- columns: ['id', 'username', 'email', 'createdAt'],
- defaultOrder: {
- column: 'createdAt',
- order: 'desc',
- },
- }}
- pageInfo={data.pageInfo}
- />
- )
-}
-```
diff --git a/apps/web/content/docs/ui/data-table/bulk-actions.mdx b/apps/web/content/docs/ui/data-table/bulk-actions.mdx
new file mode 100644
index 000000000..3ec4e3084
--- /dev/null
+++ b/apps/web/content/docs/ui/data-table/bulk-actions.mdx
@@ -0,0 +1,115 @@
+---
+title: Bulk Actions
+description: Tick a few rows and act on all of them at once from a floating bar.
+icon: CheckCheck
+---
+
+## Preview
+
+<Preview name="data-table-bulk-actions" withoutBackground />
+
+## Usage
+
+Pass `bulkActions` to let a person act on several rows at once. That one prop turns selection on. The table grows a leading checkbox column, with a checkbox per row and one in the header that ticks the whole page. While anything is ticked, a bar floats at the bottom centre of the viewport with the count, your actions and a button to clear the selection.
+
+Your actions read the ticked ids with the `useDataTableSelection` hook. They are rendered inside the bar, which lives inside the table's selection provider, so nothing has to be threaded through props:
+
+```tsx title="delete-bulk-action.tsx"
+'use client'
+
+import { useDataTableSelection } from '@vitnode/core/components/table/selection'
+import { Button } from '@vitnode/core/components/ui/button'
+
+export const DeleteBulkAction = () => {
+ // [!code ++]
+ const { clear, selected } = useDataTableSelection()
+
+ return (
+ <Button
+ onClick={() => deleteUsersAction({ ids: selected })}
+ variant="destructive"
+ >
+ <Trash2Icon />
+ Delete
+ </Button>
+ )
+}
+```
+
+```tsx
+<DataTable
+ id="users-table"
+ // [!code ++]
+ bulkActions={<DeleteBulkAction />}
+ columns={[
+ { accessorKey: 'name', header: 'Name' },
+ { accessorKey: 'email', header: 'Email' },
+ ]}
+ edges={data.edges}
+ pageInfo={data.pageInfo}
+ order={{
+ defaultOrder: {
+ column: 'name',
+ order: 'asc',
+ },
+ }}
+/>
+```
+
+## What the hook returns
+
+import { TypeTable } from 'fumadocs-ui/components/type-table'
+
+<TypeTable
+ type={{
+ selected: {
+ description: 'The ticked row ids, in the order they were ticked.',
+ required: true,
+ type: 'number[]',
+ },
+ isSelected: {
+ description: 'Whether one row id is ticked.',
+ required: true,
+ type: '(id: number) => boolean',
+ },
+ allSelected: {
+ description: 'Every row on the page is ticked.',
+ required: true,
+ type: 'boolean',
+ },
+ someSelected: {
+ description:
+ "Some but not all rows are ticked - the header checkbox's indeterminate state.",
+ required: true,
+ type: 'boolean',
+ },
+ toggle: {
+ description: 'Ticks or unticks one row.',
+ required: true,
+ type: '(id: number) => void',
+ },
+ toggleAll: {
+ description: 'Ticks or unticks every row on the page.',
+ required: true,
+ type: '(next: boolean) => void',
+ },
+ clear: {
+ description: 'Unticks everything, which hides the bar.',
+ required: true,
+ type: '() => void',
+ },
+ }}
+/>
+
+## Selection is per page
+
+The selection only ever covers the rows currently on screen. Whenever the server sends a different set of row ids, because someone paged, searched or changed a filter, the selection is pruned to what is still there. Paging away empties it on its own, and a bulk action can never touch a row nobody can see.
+
+Pruning also keeps a partly successful action easy to read. Revalidate after deleting 3 of 5 rows, and the 2 that were refused stay on screen _and_ stay ticked, so the bar still points at exactly the work that is left.
+
+<Callout type="warn" title="Bulk actions run per row">
+ There is no bulk endpoint behind `bulkActions` - it hands you ids, and what
+ you do with them is yours. When your action loops the single-row endpoint, cap
+ the fan-out and report the outcomes per reason rather than as one pass/fail,
+ so a run that partly succeeded can say so.
+</Callout>
diff --git a/apps/web/content/docs/ui/data-table/draggable-rows.mdx b/apps/web/content/docs/ui/data-table/draggable-rows.mdx
new file mode 100644
index 000000000..4fb307d1a
--- /dev/null
+++ b/apps/web/content/docs/ui/data-table/draggable-rows.mdx
@@ -0,0 +1,273 @@
+---
+title: Draggable Rows
+description: Drag rows into a new order with mouse, touch or keyboard, then save it on your backend.
+icon: GripVertical
+---
+
+## Preview
+
+<Preview name="data-table-reorderable" withoutBackground />
+
+## Usage
+
+When the order of rows _is_ the data, like a backlog or a list of FAQ entries, pass `reorderable`. Each row grows a grip handle. Grab it and drag the row where it belongs. The other rows slide out of the way, and the dropped row glides into its new spot.
+
+```tsx
+<DataTable
+ id="backlog-table"
+ // [!code ++]
+ reorderable={{
+ // [!code ++]
+ getRowLabel: (task) => task.title,
+ // [!code ++]
+ onReorder: async (ids) => await saveOrder(ids),
+ // [!code ++]
+ }}
+ columns={columns}
+ edges={data.edges}
+ pageInfo={data.pageInfo}
+ order={{
+ defaultOrder: {
+ column: 'position',
+ order: 'asc',
+ },
+ }}
+/>
+```
+
+import { TypeTable } from 'fumadocs-ui/components/type-table'
+
+<TypeTable
+ type={{
+ onReorder: {
+ description:
+ 'Called after a drop with every row id on the page in its new order, plus which row moved and where. Return a promise to save it - if it rejects, the rows jump back and an error toast explains what happened.',
+ required: true,
+ type: `(ids: number[], details: {
+ activeId: number;
+ overId: number;
+ from: number;
+ to: number;
+ }) => void | Promise<void>`,
+ },
+ getRowLabel: {
+ description:
+ 'What the handle is called out loud - "Reorder Fix the login redirect loop" beats "Reorder row 1". Defaults to the row position.',
+ required: false,
+ type: '(row: T) => string',
+ },
+ disabled: {
+ description:
+ 'Shows the handles but locks them, for example while a person lacks the permission to reorder.',
+ required: false,
+ type: 'boolean',
+ },
+ }}
+/>
+
+What you get for free:
+
+- **Optimistic order.** The table moves the row the moment you drop it and calls `onReorder` in the background. If the promise rejects, it rolls back and shows an error toast, so nobody is left wondering "did it save?"
+- **Only the handle drags.** Links, buttons and `rowOpens` clicks in the rest of the row keep working exactly as before.
+- **Mouse, touch and keyboard.** On touch, press and hold the handle for a moment so scrolling the page still scrolls the page. With a keyboard, focus a handle, press Space, move with the arrow keys and press Space again (Escape cancels). Screen readers hear where the row is the whole time.
+- **Expandable rows travel along.** An open detail panel belongs to its row, so it moves with it during the drag.
+- **Selection is untouched.** With `bulkActions` the handle sits first, then the checkbox.
+- **Reduced motion is respected.** Rows swap places without sliding when the system asks for less motion.
+
+<Callout type="warn" title="Reordering pauses while the view is filtered">
+ The handles are disabled while a search, a filter or a sort other than
+ `order.defaultOrder` is active - dragging a row in a filtered view would
+ shuffle rows nobody can see. Hovering a disabled handle says so. Make the
+ table's `defaultOrder` your stored order (for example `position` ascending) so
+ the default view is the one that can be rearranged.
+</Callout>
+
+## Saving the order on the backend
+
+The table hands you ids. Making them stick takes three small pieces. VitNode's own navigation admin does the same thing, so peek at `packages/vitnode/src/api/modules/admin/navigation/routes/reorder.route.ts` for a production version.
+
+<Steps>
+<Step>
+
+#### Add a `position` column and sort by it
+
+```ts title="plugins/tasks/src/database/tasks.ts"
+import { camelCase, index } from 'drizzle-orm/pg-core'
+
+export const tasks = camelCase.table.withRLS(
+ 'tasks',
+ (t) => ({
+ id: t.serial().primaryKey(),
+ title: t.varchar({ length: 255 }).notNull(),
+ // [!code ++]
+ position: t.integer().notNull().default(0),
+ createdAt: t.timestamp().notNull().defaultNow(),
+ }),
+ // [!code ++]
+ (t) => [index('tasks_position_idx').on(t.position)],
+)
+```
+
+The list route orders by it, so the default view is the stored order:
+
+```ts
+withPagination({
+ // ...
+ // [!code ++]
+ orderBy: { column: tasks.position, order: 'asc' },
+})
+```
+
+</Step>
+<Step>
+
+#### Accept the new order in an admin route
+
+The route takes the ids of one page, in their new order, and hands those rows the positions they already had between them. That keeps pagination honest: reordering page 3 never touches page 1. New admin APIs always need a staff permission:
+
+```ts title="plugins/tasks/src/api/modules/admin/tasks/routes/reorder.route.ts"
+import { z } from '@hono/zod-openapi'
+import { buildRoute } from '@vitnode/core/api/lib/route'
+import { eq, inArray } from 'drizzle-orm'
+
+import { CONFIG_PLUGIN } from '@/const'
+import { tasks } from '@/database/tasks'
+
+const zodReorderTasksSchema = z.object({
+ ids: z.array(z.number().int()).min(1).max(100),
+})
+
+export const reorderTasksRoute = buildRoute({
+ pluginId: CONFIG_PLUGIN.pluginId,
+ // [!code ++]
+ adminStaffPermission: { module: 'tasks', permission: 'can_reorder' },
+ route: {
+ method: 'post',
+ path: '/reorder',
+ description: 'Save the order of one page of tasks (Admin only)',
+ request: {
+ body: {
+ required: true,
+ content: { 'application/json': { schema: zodReorderTasksSchema } },
+ },
+ },
+ responses: {
+ 200: { description: 'Tasks reordered' },
+ 400: {
+ content: {
+ 'application/json': { schema: z.object({ error: z.string() }) },
+ },
+ description: 'The ids are duplicated or unknown',
+ },
+ 403: { description: 'Access Denied' },
+ },
+ },
+ handler: async (c) => {
+ const { ids } = c.req.valid('json')
+ const db = c.get('db')
+
+ if (new Set(ids).size !== ids.length) {
+ return c.json({ error: 'A task appears twice in the new order' }, 400)
+ }
+
+ const current = await db
+ .select({ id: tasks.id, position: tasks.position })
+ .from(tasks)
+ .where(inArray(tasks.id, ids))
+
+ if (current.length !== ids.length) {
+ return c.json({ error: 'The new order names an unknown task' }, 400)
+ }
+
+ const slots = current.map((row) => row.position).sort((a, b) => a - b)
+
+ // [!code ++:8]
+ await db.transaction(async (tx) => {
+ for (const [index, id] of ids.entries()) {
+ await tx
+ .update(tasks)
+ .set({ position: slots[index] })
+ .where(eq(tasks.id, id))
+ }
+ })
+
+ return c.body(null, 200)
+ },
+})
+```
+
+Register the route in its module and declare the permission in the plugin's API config:
+
+```ts title="plugins/tasks/src/config.api.ts"
+export const tasksApiPlugin = () =>
+ buildApiPlugin({
+ pluginId: CONFIG_PLUGIN.pluginId,
+ // [!code ++:8]
+ permissionStaff: {
+ admin: {
+ tasks: [
+ 'can_view',
+ { permission: 'can_reorder', dependsOn: ['can_view'] },
+ ],
+ },
+ },
+ modules: [adminModule],
+ })
+```
+
+<Callout type="info" title="Give new rows a position">
+ Rows that all share `position: 0` sort unpredictably. When you insert a task,
+ set its `position` to the current maximum plus one.
+</Callout>
+
+</Step>
+<Step>
+
+#### Call it from `onReorder`
+
+Throwing from `onReorder` is all the table needs to roll back and show its error toast. On success, invalidate the list so every other view of it catches up:
+
+```tsx title="plugins/tasks/src/views/admin/tasks-table.tsx"
+import { useQueryClient } from '@tanstack/react-query'
+import { DataTable } from '@vitnode/core/components/table/data-table'
+import { fetcher } from '@vitnode/core/tanstack/fetcher'
+
+import { tasksQueryKey } from './tasks-query'
+
+export const TasksTable = ({ data }: { data: TasksPage }) => {
+ const queryClient = useQueryClient()
+
+ return (
+ <DataTable
+ id="tasks-table"
+ columns={columns}
+ edges={data.edges}
+ pageInfo={data.pageInfo}
+ order={{ defaultOrder: { column: 'position', order: 'asc' } }}
+ reorderable={{
+ getRowLabel: (task) => task.title,
+ onReorder: async (ids) => {
+ // [!code ++:7]
+ const res = await fetcher({
+ plugin: '@acme/tasks',
+ method: 'post',
+ module: 'admin/tasks',
+ path: '/reorder',
+ args: { body: { ids } },
+ })
+
+ if (!res.ok) {
+ throw new Error('Saving the order failed')
+ }
+
+ // [!code ++]
+ await queryClient.invalidateQueries({ queryKey: tasksQueryKey })
+ },
+ }}
+ />
+ )
+}
+```
+
+</Step>
+</Steps>
diff --git a/apps/web/content/docs/ui/data-table/expandable-rows.mdx b/apps/web/content/docs/ui/data-table/expandable-rows.mdx
new file mode 100644
index 000000000..507d0e885
--- /dev/null
+++ b/apps/web/content/docs/ui/data-table/expandable-rows.mdx
@@ -0,0 +1,73 @@
+---
+title: Expandable Rows
+description: Rows that slide open a detail panel right underneath them.
+icon: UnfoldVertical
+---
+
+## Preview
+
+<Preview name="data-table-expandable" withoutBackground />
+
+## Usage
+
+Some rows have more to say than a cell can hold, like an order's line items or a job's error log. Pass `expandable` and each row gets a chevron that slides a detail panel open right underneath it. Rows that `canExpand` rules out get no chevron. The panel opens in place, so nobody loses their spot in the list.
+
+```tsx
+<DataTable
+ id="orders-table"
+ // [!code ++]
+ expandable={{
+ // [!code ++]
+ render: (order) => <OrderDetail order={order} />,
+ // [!code ++]
+ canExpand: (order) => order.items.length > 0,
+ // [!code ++]
+ }}
+ columns={columns}
+ edges={data.edges}
+ pageInfo={data.pageInfo}
+ order={{
+ defaultOrder: {
+ column: 'number',
+ order: 'asc',
+ },
+ }}
+/>
+```
+
+import { TypeTable } from 'fumadocs-ui/components/type-table'
+
+<TypeTable
+ type={{
+ render: {
+ description:
+ 'Renders the detail panel for one row. It only runs while that row is open, so it is a fine place for something heavier than a cell.',
+ required: true,
+ type: '(row: T) => ReactNode',
+ },
+ canExpand: {
+ description:
+ 'Return false to give a row no chevron - for example an order with nothing in it. Every row can expand when omitted.',
+ required: false,
+ type: '(row: T) => boolean',
+ },
+ defaultExpanded: {
+ description: 'Row ids that start open on the first render.',
+ required: false,
+ type: 'number[]',
+ },
+ }}
+/>
+
+A few things the table handles for you:
+
+- **Several rows can be open at once.** Open state lives in the component, not the URL, and it is dropped for rows that leave the page when you paginate, search or filter.
+- **It is a real button.** The chevron is a `<button>` with `aria-expanded` and `aria-controls`, so Enter and Space work and screen readers announce "Expand row" / "Collapse row". Row clicks from `rowOpens` keep working, because a click on a button never counts as a row click.
+- **It plays nice with `bulkActions`.** The chevron column sits right after the selection checkbox.
+- **The motion is polite.** The panel eases its height and opacity open in about 300 ms, and with "reduce motion" turned on it only fades.
+
+<Callout type="info" title="Keep the panel light on data">
+ `render` runs on the client as soon as a row opens. If the detail needs data
+ the list did not fetch, fetch it inside the panel component (TanStack Query
+ caches it), so collapsing and re-opening a row is instant.
+</Callout>
diff --git a/apps/web/content/docs/ui/data-table/filters.mdx b/apps/web/content/docs/ui/data-table/filters.mdx
new file mode 100644
index 000000000..26c595644
--- /dev/null
+++ b/apps/web/content/docs/ui/data-table/filters.mdx
@@ -0,0 +1,153 @@
+---
+title: Filters
+description: Faceted multi-select filters above the table, with static or async options from your API.
+icon: ListFilter
+---
+
+## Preview
+
+<Preview name="data-table-filters" withoutBackground />
+
+## Usage
+
+Pass the `filters` prop to render one or more faceted, multi-select dropdowns above the table (next to the search input). Each filter controls its own URL query parameter, so it works out of the box with server-side data fetching. Multiple selected values are stored as a comma-separated list, e.g. `?roleId=1,3`, and changing a filter returns you to the first page.
+
+import { TypeTable } from 'fumadocs-ui/components/type-table'
+
+<TypeTable
+ type={{
+ id: {
+ description: 'The URL query parameter this filter reads and writes.',
+ required: true,
+ type: 'string',
+ },
+ label: {
+ description:
+ 'Text shown on the filter trigger and as the search placeholder.',
+ required: true,
+ type: 'string',
+ },
+ options: {
+ description:
+ 'Static options, filtered on the client. `label` can be any node; provide `keywords` so typing can search a node-based label.',
+ required: false,
+ type: `{
+ value: string;
+ label: ReactNode;
+ keywords?: string[];
+ }[]`,
+ },
+ onSearch: {
+ description:
+ 'Async source called (debounced) as the user types. The API is expected to return results already filtered and capped (e.g. 20 per request).',
+ required: false,
+ type: '(search: string) => Promise<Option[]>',
+ },
+ }}
+/>
+
+## Static filters
+
+When the set of options is small and known ahead of time, pass them directly via `options`. The dropdown list is filtered on the client.
+
+```tsx
+<DataTable
+ id="users-table"
+ // [!code ++]
+ filters={[
+ // [!code ++]
+ {
+ // [!code ++]
+ id: 'status',
+ // [!code ++]
+ label: 'Status',
+ // [!code ++]
+ options: [
+ // [!code ++]
+ { value: 'active', label: 'Active' },
+ // [!code ++]
+ { value: 'banned', label: 'Banned' },
+ // [!code ++]
+ ],
+ // [!code ++]
+ },
+ // [!code ++]
+ ]}
+ columns={[
+ { accessorKey: 'name', header: 'Name' },
+ { accessorKey: 'email', header: 'Email' },
+ ]}
+ edges={data.edges}
+ pageInfo={data.pageInfo}
+ order={{
+ defaultOrder: {
+ column: 'name',
+ order: 'asc',
+ },
+ }}
+/>
+```
+
+## Async filters
+
+When the options come from the API (for example a large or searchable list), provide an `onSearch` callback instead of `options`. It runs, debounced, as the user types and should return results already filtered and capped by the server. The universal fetcher answers from the browser here, with the visitor's own cookies:
+
+```tsx title="search-roles.tsx"
+import type { FilterOption } from '@vitnode/core/components/table/filters'
+
+import { RoleFormat } from '@vitnode/core/components/role-format'
+import { fetcher } from '@vitnode/core/tanstack/fetcher'
+
+export const searchRoles = async (search: string): Promise<FilterOption[]> => {
+ const res = await fetcher({
+ plugin: '@vitnode/core',
+ path: '/list',
+ method: 'get',
+ module: 'admin/roles',
+ args: {
+ query: { search, first: '20' },
+ },
+ withPagination: true,
+ })
+
+ if (res.status !== 200) {
+ return []
+ }
+
+ const data = await res.json()
+
+ return data.edges.map((role) => ({
+ value: String(role.id),
+ label: <RoleFormat role={role} />,
+ keywords: role.name.map((item) => item.name),
+ }))
+}
+```
+
+```tsx
+filters={[
+ {
+ id: "roleId",
+ label: "Group",
+ // [!code ++]
+ onSearch: searchRoles,
+ },
+]}
+```
+
+<Callout type="info" title="Configure the API route">
+ A filter only writes its values to the URL - the backend must read the query
+ parameter and apply the matching `where` clause. For a comma-separated
+ multi-select, split the value and use `inArray`:
+
+```ts
+const roleIds = (query.roleId?.split(",") ?? [])
+ .filter(Boolean)
+ .map(Number)
+ .filter((id) => !Number.isNaN(id));
+
+// pass to withPagination:
+where: roleIds.length ? inArray(core_users.roleId, roleIds) : undefined,
+```
+
+</Callout>
diff --git a/apps/web/content/docs/ui/data-table/index.mdx b/apps/web/content/docs/ui/data-table/index.mdx
new file mode 100644
index 000000000..41e02fb2f
--- /dev/null
+++ b/apps/web/content/docs/ui/data-table/index.mdx
@@ -0,0 +1,321 @@
+---
+title: Data Table
+description: A table with sorting, filtering and pagination that works with the VitNode API.
+icon: Table
+---
+
+## Preview
+
+<Preview name="data-table" withoutBackground />
+
+## Usage
+
+```ts
+import {
+ type ColumnDef,
+ DataTable,
+} from '@vitnode/core/components/table/data-table'
+```
+
+Columns are typed with `ColumnDef<T>`, where `T` is the shape of a single row. An **accessor column** binds to the data through `accessorKey`, which is type-safe. It only accepts a `keyof T`, just like TanStack Table. A **display column**, for actions or selection, has no `accessorKey` and requires a string `id` instead.
+
+```tsx
+const columns: ColumnDef<User>[] = [
+ { accessorKey: 'name', header: 'Name' },
+ { accessorKey: 'email', header: 'Email' },
+ { accessorKey: 'role', header: 'Role' },
+ { accessorKey: 'status', header: 'Status', align: 'center' },
+ {
+ id: 'actions',
+ header: '',
+ align: 'right',
+ cell: () => (
+ <Button size="sm" variant="outline">
+ Edit
+ </Button>
+ ),
+ },
+]
+
+;<DataTable
+ id="users-table"
+ columns={columns}
+ edges={data.edges}
+ pageInfo={data.pageInfo}
+ order={{
+ defaultOrder: {
+ column: 'name',
+ order: 'asc',
+ },
+ }}
+/>
+```
+
+<Callout type="info" title="Type-safe columns">
+ `accessorKey` autocompletes and is checked against the row type `T` - passing
+ a key that doesn't exist on `T` is a compile-time error. Use `id` (a plain
+ `string`) for display columns that aren't backed by a data field.
+</Callout>
+
+import { TypeTable } from 'fumadocs-ui/components/type-table'
+
+<TypeTable
+ type={{
+ columns: {
+ description:
+ 'Array of column definitions. Accessor columns bind to data via a type-safe accessorKey (keyof T); display columns (e.g. actions) use a string id instead.',
+ required: true,
+ type: `ColumnDef<T>[] where ColumnDef<T> is:
+ // accessor column
+ {
+ accessorKey: keyof T;
+ header: ReactNode;
+ id?: string;
+ align?: 'left' | 'center' | 'right';
+ className?: string;
+ cell?: (props: { row: T; allData: T[] }) => ReactNode;
+ }
+ // or display column
+ {
+ id: string;
+ header: ReactNode;
+ align?: 'left' | 'center' | 'right';
+ className?: string;
+ cell?: (props: { row: T; allData: T[] }) => ReactNode;
+ }`,
+ },
+ edges: {
+ description: 'Data to be displayed in the table',
+ required: true,
+ type: 'Array',
+ },
+ order: {
+ description: 'Column sorting configuration',
+ required: true,
+ type: `{
+ columns?: string[];
+ defaultOrder: {
+ column: string;
+ order: 'asc' | 'desc';
+ };
+ }`,
+ },
+ pageInfo: {
+ description:
+ 'Pagination information from the API. Pass it straight through — the table renders numbered pages and a "Showing 21–30 of 380" range from it.',
+ required: true,
+ type: `{
+ count: number;
+ totalCount: number;
+ totalPages: number;
+ currentPage: number | null;
+ hasNextPage: boolean;
+ hasPreviousPage: boolean;
+ startCursor: string | null;
+ endCursor: string | null;
+ }`,
+ },
+ search: {
+ description:
+ 'Renders a search input above the table. Requires the API route to define the searchable columns.',
+ required: false,
+ type: 'boolean',
+ },
+ searchPlaceholder: {
+ description: 'Custom placeholder text for the search input',
+ required: false,
+ type: 'string',
+ },
+ bulkActions: {
+ description:
+ 'Actions for the rows a person ticked, rendered in a bar that floats at the bottom centre of the viewport. Passing this turns row selection on: the table grows a leading checkbox column, and the nodes here read the ticked ids with useDataTableSelection().',
+ required: false,
+ type: 'ReactNode',
+ },
+ expandable: {
+ description:
+ 'Turns on expandable rows: a chevron column that opens a detail panel under its row. See Expandable rows below.',
+ required: false,
+ type: `{
+ render: (row: T) => ReactNode;
+ canExpand?: (row: T) => boolean;
+ defaultExpanded?: number[];
+ }`,
+ },
+ reorderable: {
+ description:
+ 'Turns on drag-and-drop row ordering with a grip handle per row. See Draggable rows below.',
+ required: false,
+ type: `{
+ onReorder: (ids: number[], details: {
+ activeId: number;
+ overId: number;
+ from: number;
+ to: number;
+ }) => void | Promise<void>;
+ getRowLabel?: (row: T) => string;
+ disabled?: boolean;
+ }`,
+ },
+ filters: {
+ description:
+ 'Renders one or more faceted multi-select dropdowns above the table. Each filter controls its own URL query parameter.',
+ required: false,
+ type: `{
+ id: string;
+ label: string;
+ options?: {
+ value: string;
+ label: ReactNode;
+ keywords?: string[];
+ }[];
+ onSearch?: (search: string) => Promise<{
+ value: string;
+ label: ReactNode;
+ keywords?: string[];
+ }[]>;
+ }[]`,
+ },
+ }}
+/>
+
+## Cell renderer
+
+The `cell` property controls how each cell renders. Its function receives the current row and all the table data.
+
+```tsx
+<DataTable
+ id="users-table"
+ columns={[
+ {
+ accessorKey: 'id',
+ header: 'Id',
+ // [!code ++]
+ cell: ({ row, allData }) => (
+ // [!code ++]
+ <span>
+ // [!code ++]
+ {row.id} - all data {allData.length}
+ // [!code ++]
+ </span>
+ // [!code ++]
+ ),
+ },
+ { accessorKey: 'createdAt', header: 'Created at' },
+ ]}
+ edges={data.edges}
+ pageInfo={data.pageInfo}
+ order={{
+ columns: ['createdAt', 'id'],
+ defaultOrder: {
+ order: 'desc',
+ },
+ }}
+/>
+```
+
+### Order configuration
+
+To enable sorting on specific columns, list them in the `columns` property.
+
+```tsx
+order={{
+ // [!code ++]
+ columns: ['createdAt', 'id', 'name'],
+ defaultOrder: {
+ column: 'createdAt',
+ order: 'desc',
+ }
+}}
+```
+
+## Column alignment
+
+Use the `align` property to control the horizontal alignment of a column's header and cells. It accepts `"left"` (default), `"center"`, or `"right"`. Right alignment suits numbers and action buttons.
+
+```tsx
+columns={[
+ { accessorKey: "name", header: "Name" },
+ // [!code ++]
+ { accessorKey: "status", header: "Status", align: "center" },
+ {
+ id: "actions",
+ header: "",
+ // [!code ++]
+ align: "right",
+ cell: ({ row }) => <RowActions id={row.id} />,
+ },
+]}
+```
+
+## Features
+
+Each feature has its own page with a live preview:
+
+- [Search](/docs/ui/data-table/search): a debounced search box that writes to the URL.
+- [Filters](/docs/ui/data-table/filters): faceted multi-select filters, static or async.
+- [Pagination](/docs/ui/data-table/pagination): numbered pages and a rows-per-page select.
+- [Bulk Actions](/docs/ui/data-table/bulk-actions): select rows and act on all of them at once.
+- [Expandable Rows](/docs/ui/data-table/expandable-rows): a detail panel under each row.
+- [Draggable Rows](/docs/ui/data-table/draggable-rows): reorder rows and save the order on your backend.
+
+## Complete Example
+
+Here's `DataTable` wired into a full page:
+
+```tsx
+import {
+ DataTable,
+ SearchParamsDataTable,
+} from '@vitnode/core/components/table/data-table'
+import { fetcher } from '@vitnode/core/tanstack/fetcher'
+
+export const UsersView = async ({
+ searchParams,
+}: {
+ searchParams: Promise<SearchParamsDataTable>
+}) => {
+ const query = await searchParams
+ const res = await fetcher({
+ plugin: '@vitnode/core',
+ path: '/list',
+ method: 'get',
+ module: 'admin/users',
+ args: {
+ query,
+ },
+ withPagination: true,
+ })
+ const data = await res.json()
+
+ return (
+ <DataTable
+ id="users-table"
+ columns={[
+ {
+ accessorKey: 'id',
+ header: 'ID',
+ },
+ {
+ accessorKey: 'username',
+ header: 'Username',
+ cell: ({ row }) => (
+ <span className="font-medium">{row.username}</span>
+ ),
+ },
+ { accessorKey: 'email', header: 'Email' },
+ { accessorKey: 'createdAt', header: 'Created at' },
+ ]}
+ edges={data.edges}
+ order={{
+ columns: ['id', 'username', 'email', 'createdAt'],
+ defaultOrder: {
+ column: 'createdAt',
+ order: 'desc',
+ },
+ }}
+ pageInfo={data.pageInfo}
+ />
+ )
+}
+```
diff --git a/apps/web/content/docs/ui/data-table/meta.json b/apps/web/content/docs/ui/data-table/meta.json
new file mode 100644
index 000000000..37a2436d1
--- /dev/null
+++ b/apps/web/content/docs/ui/data-table/meta.json
@@ -0,0 +1,13 @@
+{
+ "title": "Data Table",
+ "icon": "Table",
+ "pages": [
+ "index",
+ "search",
+ "filters",
+ "pagination",
+ "bulk-actions",
+ "expandable-rows",
+ "draggable-rows"
+ ]
+}
diff --git a/apps/web/content/docs/ui/data-table/pagination.mdx b/apps/web/content/docs/ui/data-table/pagination.mdx
new file mode 100644
index 000000000..52f1a9ff7
--- /dev/null
+++ b/apps/web/content/docs/ui/data-table/pagination.mdx
@@ -0,0 +1,31 @@
+---
+title: Pagination
+description: Numbered pages, a rows-per-page select and a "Showing 21–30 of 380" range, all built from pageInfo.
+icon: BookCopy
+---
+
+## Preview
+
+<Preview name="data-table-pagination" withoutBackground />
+
+## Usage
+
+The table renders its own pager from `pageInfo`. You get numbered pages with a
+first/last anchor and an ellipsis in between, a rows-per-page select, and a
+"Showing 21–30 of 380" range. There's nothing to wire up. Pass `pageInfo` through
+and the pager appears.
+
+Each page is a real link (`?page=3`), so middle-click and "open in new tab" work,
+while a plain click stays a client-side navigation. On phones the numbers collapse
+to a "Page 3 of 38" label between the arrows, because forty tap targets do not fit
+on a 390px screen.
+
+Two details worth knowing:
+
+- **Changing the page size or a filter returns you to page one.** A filter changes
+ which rows exist, so the page you were on no longer means what it meant.
+- **A page past the end lands on the last page**, not on an empty table. Stale
+ links and hand-typed numbers stay useful.
+
+The API does the counting. See [Pagination](/docs/dev/database/pagination) for the
+route side, including the index your ordered column needs.
diff --git a/apps/web/content/docs/ui/data-table/search.mdx b/apps/web/content/docs/ui/data-table/search.mdx
new file mode 100644
index 000000000..0da4adb91
--- /dev/null
+++ b/apps/web/content/docs/ui/data-table/search.mdx
@@ -0,0 +1,42 @@
+---
+title: Search
+description: Let people search the table. The term lives in the URL, so the API does the heavy lifting.
+icon: TextSearch
+---
+
+## Preview
+
+<Preview name="data-table-search" withoutBackground />
+
+## Usage
+
+Set the `search` prop to `true` to render a search input above the table. Change the placeholder with `searchPlaceholder`.
+
+```tsx
+<DataTable
+ id="users-table"
+ // [!code ++]
+ search
+ // [!code ++]
+ searchPlaceholder="Search users..."
+ columns={[
+ { accessorKey: 'name', header: 'Name' },
+ { accessorKey: 'email', header: 'Email' },
+ ]}
+ edges={data.edges}
+ pageInfo={data.pageInfo}
+ order={{
+ defaultOrder: {
+ column: 'name',
+ order: 'asc',
+ },
+ }}
+/>
+```
+
+The input writes the term to the `?search=` query parameter (debounced), and the route loads the matching rows from the API. The API route decides which columns are searched.
+
+<Callout type="info" title="Configure the API route">
+ Enabling `search` only renders the input. You must also tell the backend which
+ columns to search across - see the [Search](/docs/dev/database/search) guide.
+</Callout>
diff --git a/apps/web/content/docs/ui/dialog.mdx b/apps/web/content/docs/ui/dialog.mdx
index 810d3cbd5..540d43e1d 100644
--- a/apps/web/content/docs/ui/dialog.mdx
+++ b/apps/web/content/docs/ui/dialog.mdx
@@ -1,6 +1,7 @@
---
title: Dialog
description: Display content in a modal dialog.
+icon: AppWindow
---
## Preview
@@ -25,23 +26,32 @@ import {
```tsx
<Dialog>
- <DialogTrigger render={<Button variant="outline">Open</Button>} />
+ <DialogTrigger render={<Button variant="outline">Share</Button>} />
<DialogContent>
<DialogHeader>
- <DialogTitle>Are you absolutely sure?</DialogTitle>
+ <DialogTitle>Share this page</DialogTitle>
<DialogDescription>
- This action cannot be undone. This will permanently delete your account
- and remove your data from our servers.
+ Anyone with the link can read it - no account needed.
</DialogDescription>
</DialogHeader>
+ <div className="flex items-center gap-2">
+ <Input aria-label="Page link" readOnly value={link} />
+ <CopyButton aria-label="Copy link" content={link} />
+ </div>
<DialogFooter>
- <DialogClose render={<Button variant="outline">Cancel</Button>} />
- <Button variant="destructive">Yes, delete account</Button>
+ <DialogClose render={<Button>Done</Button>} />
</DialogFooter>
</DialogContent>
</Dialog>
```
+## Dialog or Alert Dialog?
+
+Use a Dialog for friendly, low-stakes tasks like sharing, quick edits or previews.
+Asking someone to confirm something they can't undo? Reach for the
+[Alert Dialog](/docs/ui/alert-dialog) instead. It can't be dismissed by clicking
+outside, so nobody deletes anything by accident.
+
## API Reference
[Base UI - Dialog](https://base-ui.com/react/components/dialog#api-reference)
diff --git a/apps/web/content/docs/ui/drawer.mdx b/apps/web/content/docs/ui/drawer.mdx
index d31e8c9f0..9b37fb2ab 100644
--- a/apps/web/content/docs/ui/drawer.mdx
+++ b/apps/web/content/docs/ui/drawer.mdx
@@ -1,6 +1,7 @@
---
title: Drawer
description: A component for displaying content in a sliding panel.
+icon: PanelBottom
---
## Preview
diff --git a/apps/web/content/docs/ui/dropdown-menu.mdx b/apps/web/content/docs/ui/dropdown-menu.mdx
index 1120a29ef..b0c41d817 100644
--- a/apps/web/content/docs/ui/dropdown-menu.mdx
+++ b/apps/web/content/docs/ui/dropdown-menu.mdx
@@ -1,6 +1,7 @@
---
title: Dropdown Menu
description: A dropdown menu component for building interactive menus in your application.
+icon: EllipsisVertical
---
## Preview
diff --git a/apps/web/content/docs/ui/editor.mdx b/apps/web/content/docs/ui/editor.mdx
index 3b3ca9e85..62453a8e0 100644
--- a/apps/web/content/docs/ui/editor.mdx
+++ b/apps/web/content/docs/ui/editor.mdx
@@ -1,6 +1,7 @@
---
title: Editor
description: Rich text editor built on TipTap for editing and rendering HTML content.
+icon: PenLine
---
## Preview
diff --git a/apps/web/content/docs/ui/emoji-icon-picker.mdx b/apps/web/content/docs/ui/emoji-icon-picker.mdx
index 501f9014b..4fb53ea0d 100644
--- a/apps/web/content/docs/ui/emoji-icon-picker.mdx
+++ b/apps/web/content/docs/ui/emoji-icon-picker.mdx
@@ -1,6 +1,7 @@
---
title: Emoji & Icon Picker
description: One picker with segmented emoji and icon modes that returns a discriminated value you can store in a single column.
+icon: FaceSlightlySmiling
---
## Preview
diff --git a/apps/web/content/docs/ui/empty.mdx b/apps/web/content/docs/ui/empty.mdx
new file mode 100644
index 000000000..ec18fb4f2
--- /dev/null
+++ b/apps/web/content/docs/ui/empty.mdx
@@ -0,0 +1,188 @@
+---
+title: Empty
+description: Empty states for lists, tables and searches that have nothing to show yet, with an icon, a short message and a next step.
+icon: PackageOpen
+---
+
+## Preview
+
+<Preview name="empty" />
+
+## Usage
+
+```ts
+import {
+ Empty,
+ EmptyContent,
+ EmptyDescription,
+ EmptyHeader,
+ EmptyMedia,
+ EmptyTitle,
+} from '@vitnode/core/components/ui/empty'
+```
+
+```tsx
+<Empty>
+ <EmptyHeader>
+ <EmptyMedia variant="icon">
+ <FolderCode />
+ </EmptyMedia>
+ <EmptyTitle>No projects yet</EmptyTitle>
+ <EmptyDescription>
+ You haven't created any projects yet. Start a fresh one or import an
+ existing repository.
+ </EmptyDescription>
+ </EmptyHeader>
+ <EmptyContent>
+ <Button>Create project</Button>
+ </EmptyContent>
+</Empty>
+```
+
+Reach for `Empty` whenever a screen would otherwise show... nothing. A blank
+table, a fresh dashboard, a search with zero hits. The AdminCP uses it for an
+empty dashboard (with an "Edit" button to add widgets) and for navigation lists
+that have no items yet.
+
+## Anatomy
+
+- `Empty` is the centered wrapper. It grows to fill its parent (`flex-1`).
+- `EmptyHeader` groups the media, title and description.
+- `EmptyMedia` holds an icon, avatar or small illustration.
+- `EmptyTitle` is one short line that says what's missing.
+- `EmptyDescription` says why it's empty and what to do about it. Links inside
+ it are underlined automatically.
+- `EmptyContent` holds actions, a search box or anything else the user can act
+ on.
+
+## Media
+
+`EmptyMedia` has two variants. `icon` wraps the icon in a soft muted tile and
+sizes it for you. `default` adds no styling, so it's the one for avatars and
+illustrations.
+
+```tsx
+<EmptyMedia variant="icon">
+ <Inbox />
+</EmptyMedia>
+```
+
+<Preview name="empty-avatar" />
+
+```tsx
+<EmptyMedia>
+ <Avatar size="lg">
+ <AvatarImage alt="" src={user.avatar} />
+ <AvatarFallback>AL</AvatarFallback>
+ </Avatar>
+</EmptyMedia>
+```
+
+## Outline
+
+`Empty` already has a dashed border style. It just needs a width. Add `border`
+for a drop-zone look, or `border-2` when it sits alone on a page, like the
+AdminCP dashboard.
+
+<Preview name="empty-outline" />
+
+```tsx
+<Empty className="border">...</Empty>
+```
+
+## No results
+
+A search that finds nothing needs its own empty state, not the same one as "you
+have no data". Echo the query back and offer a way out, like clearing the
+search.
+
+<Preview name="empty-search" />
+
+```tsx
+{results.length === 0 ? (
+ <Empty className="border p-6 md:p-8">
+ <EmptyHeader>
+ <EmptyMedia variant="icon">
+ <SearchX />
+ </EmptyMedia>
+ <EmptyTitle>No integrations found</EmptyTitle>
+ <EmptyDescription>
+ Nothing matches "{query}". Check the spelling or try a shorter search.
+ </EmptyDescription>
+ </EmptyHeader>
+ <EmptyContent>
+ <Button onClick={() => setQuery('')} size="sm" variant="outline">
+ Clear search
+ </Button>
+ </EmptyContent>
+ </Empty>
+) : (
+ <ResultsList results={results} />
+)}
+```
+
+## Inside a card or sidebar
+
+The default `p-12` is generous on purpose. On phones, `p-6 md:p-12` gives the
+copy room to breathe. In tight spots like a card, a sidebar or a popover, shrink
+the padding and the text:
+
+```tsx
+<Empty className="p-6">
+ <EmptyHeader>
+ <EmptyTitle className="text-sm">No widgets yet</EmptyTitle>
+ <EmptyDescription className="text-xs">
+ Widgets from your plugins will show up here.
+ </EmptyDescription>
+ </EmptyHeader>
+</Empty>
+```
+
+## Writing good empty states
+
+An empty state is a tiny piece of onboarding. Five rules for writing one:
+
+- **Say what's missing.** "No projects yet" beats "Nothing here".
+- **Say why.** Is it brand new, filtered out, or did the search miss?
+- **Give the next step.** One primary action, and maybe a secondary one. If the
+ user can't do anything about it, a clear description is enough.
+- **Keep it short.** One title line, one or two sentences. Nobody reads an essay
+ about an empty table.
+- **Skip the blame.** "No results for 'xylphone'" is fine. "You typed it wrong"
+ is not.
+
+## Accessibility
+
+- `EmptyTitle` renders a `div`. If the empty state replaces a whole page
+ section, give the title a heading role so it shows up in the outline:
+ `<EmptyTitle aria-level={2} role="heading">`.
+- Icons in `EmptyMedia` are decorative, since the title already says what's
+ missing. Use
+ `alt=""` on avatar images for the same reason.
+- When results change while the user types, announce the count in a
+ `role="status"` region (a `sr-only` paragraph works great) so screen reader
+ users know the list just went empty.
+- Use real `Button`s for actions, so they're reachable by keyboard.
+
+## Props
+
+import { TypeTable } from 'fumadocs-ui/components/type-table'
+
+All parts accept the regular `div` props, including `className`.
+
+### EmptyMedia
+
+<TypeTable
+ type={{
+ variant: {
+ description:
+ '`icon` wraps the child in a muted tile and sizes the icon. `default` renders it as is.',
+ type: 'default | icon',
+ default: 'default',
+ },
+ }}
+/>
+
+## API Reference
+
+[shadcn/ui - Empty](https://ui.shadcn.com/docs/components/base/empty)
diff --git a/apps/web/content/docs/ui/field.mdx b/apps/web/content/docs/ui/field.mdx
new file mode 100644
index 000000000..930e1e0d8
--- /dev/null
+++ b/apps/web/content/docs/ui/field.mdx
@@ -0,0 +1,294 @@
+---
+title: Field
+description: Layout components for labels, descriptions, errors and groups of controls. AutoForm builds every field out of them.
+icon: ListChecks
+---
+
+## Preview
+
+<Preview name="field" />
+
+## Usage
+
+```ts
+import {
+ Field,
+ FieldContent,
+ FieldDescription,
+ FieldError,
+ FieldGroup,
+ FieldLabel,
+ FieldLegend,
+ FieldSeparator,
+ FieldSet,
+ FieldTitle,
+} from '@vitnode/core/components/ui/field'
+```
+
+```tsx
+<Field>
+ <FieldLabel htmlFor="username">Username</FieldLabel>
+ <Input id="username" />
+ <FieldDescription>Pick something your friends can type.</FieldDescription>
+</Field>
+```
+
+## Should I use this for my form?
+
+Probably not directly. In VitNode, forms are built with
+[AutoForm](/docs/ui/auto-form), and AutoForm already uses these components for
+every field's label, description and error message. You get validation, ids and
+ARIA wiring for free.
+
+Reach for `Field` when you are:
+
+- writing a [custom AutoForm field](#inside-a-custom-autoform-field), so it
+ looks like its built-in neighbours,
+- building a settings-style screen with controls that save instantly or are not
+ part of a form at all (toggles, filters, preferences).
+
+## Anatomy
+
+| Component | What it does |
+| ------------------ | -------------------------------------------------------------------------------------- |
+| `FieldSet` | A semantic `<fieldset>` that groups related fields. |
+| `FieldLegend` | The `<legend>` of a `FieldSet`. Use `variant="label"` for a smaller, label-sized title. |
+| `FieldGroup` | Stacks fields with consistent spacing and enables the `responsive` orientation. |
+| `Field` | One control with its label, description and error. |
+| `FieldContent` | Keeps the label and description together next to a control. |
+| `FieldLabel` | The `<label>` of a control. Wrap a `Field` in it to make a choice card. |
+| `FieldTitle` | A label-looking title for content that is already inside a `FieldLabel`. |
+| `FieldDescription` | Helper text in a muted colour. |
+| `FieldError` | An error message announced to screen readers. |
+| `FieldSeparator` | A divider between fields, optionally with text in the middle. |
+
+## Orientation
+
+`Field` stacks everything vertically by default. Switch it to `horizontal` for
+checkboxes, switches and other compact controls that sit next to their label:
+
+```tsx
+<Field orientation="horizontal">
+ <FieldContent>
+ <FieldLabel htmlFor="digest">Weekly digest</FieldLabel>
+ <FieldDescription>A short recap, every Monday.</FieldDescription>
+ </FieldContent>
+ <Switch id="digest" />
+</Field>
+```
+
+Put the control first for a checkbox on the left, or last for a switch on the
+right. The layout follows the markup.
+
+### Responsive
+
+`responsive` is vertical on narrow screens and horizontal once its
+`FieldGroup` is wide enough. It uses a container query, so it reacts to the
+space the group has, not to the whole window. Resize your browser to watch it
+fold:
+
+<Preview name="field-responsive" />
+
+```tsx
+<FieldGroup>
+ <Field orientation="responsive">
+ <FieldContent>
+ <FieldLabel htmlFor="name">Display name</FieldLabel>
+ <FieldDescription>Shown next to your posts.</FieldDescription>
+ </FieldContent>
+ <Input id="name" />
+ </Field>
+</FieldGroup>
+```
+
+## Fieldset and legend
+
+Wrap related fields in a `FieldSet` with a `FieldLegend`. Screen readers read
+the legend before each field inside, so "Mentions" becomes "Notifications,
+Mentions". The context costs no extra words on screen.
+
+```tsx
+<FieldSet>
+ <FieldLegend>Notifications</FieldLegend>
+ <FieldDescription>Pick how loudly we should knock on your door.</FieldDescription>
+ <FieldGroup>
+ <Field orientation="horizontal">
+ <Checkbox id="mentions" />
+ <FieldLabel htmlFor="mentions">Mentions</FieldLabel>
+ </Field>
+ <FieldSeparator />
+ <Field>
+ <FieldLabel htmlFor="backup-email">Backup email</FieldLabel>
+ <Input id="backup-email" type="email" />
+ </Field>
+ </FieldGroup>
+</FieldSet>
+```
+
+Need a divider with words? Pass children: `<FieldSeparator>or</FieldSeparator>`.
+
+## Choice cards
+
+Wrap a whole `Field` in a `FieldLabel` and the label becomes a card. The full
+card is clickable, highlights when its control is checked and shows a focus
+ring when you tab into it. Use `FieldTitle` for the card's title, since
+it already lives inside a label.
+
+<Preview name="field-choice-card" />
+
+```tsx
+<RadioGroup defaultValue="team">
+ <FieldLabel htmlFor="plan-team">
+ <Field orientation="horizontal">
+ <FieldContent>
+ <FieldTitle>Team</FieldTitle>
+ <FieldDescription>Shared workspaces for up to 20 people.</FieldDescription>
+ </FieldContent>
+ <RadioGroupItem id="plan-team" value="team" />
+ </Field>
+ </FieldLabel>
+</RadioGroup>
+```
+
+Add `data-disabled` to a `Field` to fade it out, and pass `disabled` to its
+control so it cannot be picked. AutoForm's
+[Radio Group](/docs/ui/radio-group) uses exactly this for `variant="blocks"`.
+
+## Errors
+
+Mark the field with `data-invalid` and the control with `aria-invalid`, then
+render a `FieldError`:
+
+```tsx
+<Field data-invalid={isInvalid}>
+ <FieldLabel htmlFor="email">Email</FieldLabel>
+ <Input aria-describedby="email-error" aria-invalid={isInvalid} id="email" />
+ {isInvalid && <FieldError id="email-error">That is not an email.</FieldError>}
+</Field>
+```
+
+`FieldError` also takes an `errors` array. It drops duplicates, renders a single
+message as text and several as a list. It renders nothing when there is nothing
+to say.
+
+```tsx
+<FieldError errors={[{ message: 'Too short' }, { message: 'Too short' }]} />
+```
+
+## Inside a custom AutoForm field
+
+A custom AutoForm field is just a `component` function. Combine `Field` for the
+layout with AutoForm's own helpers and your field gets the same ids, ARIA and
+error handling as the built-in ones:
+
+- `AutoFormLabel` is a `FieldLabel` already pointed at the control, with the
+ "optional" hint.
+- `AutoFormDesc` renders the description text.
+- `FormControl` passes `id`, `aria-invalid` and `aria-describedby` to the
+ control inside it.
+- `FormMessage` is a `FieldError` showing the field's validation errors.
+
+```tsx
+import type { ItemAutoFormComponentProps } from '@vitnode/core/components/form/auto-form'
+import { AutoFormDesc } from '@vitnode/core/components/form/common/desc'
+import { AutoFormLabel } from '@vitnode/core/components/form/common/label'
+import { Field, FieldContent } from '@vitnode/core/components/ui/field'
+import { FormControl, FormMessage } from '@vitnode/core/components/ui/form'
+import { Switch } from '@vitnode/core/components/ui/switch'
+
+export const AutoFormSettingSwitch = ({
+ label,
+ description,
+ field,
+ otherProps: { isOptional },
+}: ItemAutoFormComponentProps) => (
+ <>
+ <Field orientation="horizontal">
+ <FieldContent>
+ {label && <AutoFormLabel isOptional={isOptional}>{label}</AutoFormLabel>}
+ {description && <AutoFormDesc>{description}</AutoFormDesc>}
+ </FieldContent>
+ <FormControl>
+ <Switch checked={field.value ?? false} onCheckedChange={field.onChange} />
+ </FormControl>
+ </Field>
+ <FormMessage />
+ </>
+)
+```
+
+```tsx
+<AutoForm
+ formSchema={z.object({ digest: z.boolean().default(true) })}
+ fields={[
+ {
+ id: 'digest',
+ component: props => (
+ <AutoFormSettingSwitch
+ {...props}
+ description="A short recap, every Monday."
+ label="Weekly digest"
+ />
+ ),
+ },
+ ]}
+/>
+```
+
+## Accessibility
+
+- Every control needs a label. Give the control an `id` and the `FieldLabel` a
+ matching `htmlFor`. Clicking the label then focuses or toggles the control.
+- `Field` renders `role="group"`, so the control, its label and its help text
+ are announced together.
+- `FieldSet` and `FieldLegend` render a real `<fieldset>` and `<legend>`, the
+ native way to name a group of controls.
+- For errors, set `aria-invalid` on the control and point `aria-describedby` at
+ the description and the `FieldError`. `FieldError` has `role="alert"`, so new
+ messages are announced as they appear. AutoForm does all of this for you.
+- Choice cards keep the radio or checkbox inside them, so keyboard users can
+ tab in and use the arrow keys or Space as usual.
+
+## Props
+
+All components accept the props of the element they render. These are the
+extras:
+
+import { TypeTable } from 'fumadocs-ui/components/type-table'
+
+<TypeTable
+ type={{
+ 'Field.orientation': {
+ description:
+ 'How the control and its label are laid out. `responsive` follows the width of the parent `FieldGroup`.',
+ type: 'vertical | horizontal | responsive',
+ default: 'vertical',
+ },
+ 'Field.data-invalid': {
+ description: 'Colours the field to signal an error.',
+ type: 'boolean',
+ },
+ 'Field.data-disabled': {
+ description: 'Fades the field and its label.',
+ type: 'boolean',
+ },
+ 'FieldLegend.variant': {
+ description: 'A section-sized `legend` or a smaller `label`-sized one.',
+ type: 'legend | label',
+ default: 'legend',
+ },
+ 'FieldError.errors': {
+ description:
+ 'Errors to show. Duplicates are removed; ignored when `children` is passed.',
+ type: '({ message?: string } | undefined)[]',
+ },
+ 'FieldSeparator.children': {
+ description: 'Optional text shown in the middle of the divider.',
+ type: 'React.ReactNode',
+ },
+ }}
+/>
+
+## API Reference
+
+[shadcn/ui - Field](https://ui.shadcn.com/docs/components/base/field)
diff --git a/apps/web/content/docs/ui/hooks/use-before-unload.mdx b/apps/web/content/docs/ui/hooks/use-before-unload.mdx
index cc2d57c5d..a89c756f8 100644
--- a/apps/web/content/docs/ui/hooks/use-before-unload.mdx
+++ b/apps/web/content/docs/ui/hooks/use-before-unload.mdx
@@ -1,6 +1,7 @@
---
title: useBeforeUnload
description: A custom hook to handle the beforeunload event in React applications
+icon: DoorOpen
---
## Example
diff --git a/apps/web/content/docs/ui/hooks/use-intersection-observer.mdx b/apps/web/content/docs/ui/hooks/use-intersection-observer.mdx
new file mode 100644
index 000000000..b686199a3
--- /dev/null
+++ b/apps/web/content/docs/ui/hooks/use-intersection-observer.mdx
@@ -0,0 +1,101 @@
+---
+title: useIntersectionObserver
+description: Find out when an element scrolls into view. Use it for lazy loading, infinite feeds and "seen" tracking.
+icon: ScanEye
+---
+
+## Usage
+
+```ts
+import { useIntersectionObserver } from '@vitnode/core/hooks/use-intersection-observer'
+```
+
+```tsx
+export const ExampleComponent = () => {
+ const [element, setElement] = React.useState<HTMLDivElement | null>(null)
+ const entry = useIntersectionObserver(element, { threshold: 0.5 }) // [!code ++]
+
+ return (
+ <div ref={setElement}>
+ {entry?.isIntersecting ? 'I can see you!' : 'Nobody is looking...'}
+ </div>
+ )
+}
+```
+
+The hook returns the latest
+[`IntersectionObserverEntry`](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserverEntry),
+or `undefined` until the browser reports the first one. Besides
+`isIntersecting` you also get `intersectionRatio`, `boundingClientRect` and
+friends.
+
+Pass the element itself, kept in state through a callback ref, not a
+`useRef`. That way the hook notices when the element mounts late or gets
+swapped for a new one, and starts watching the right node.
+
+## Load once, then stop watching
+
+Set `freezeOnceVisible` and the hook stops observing the first time the element
+shows up. Handy for lazy loading or a one-off entrance animation, since there's no point
+paying for an observer that has nothing left to do.
+
+```tsx
+const entry = useIntersectionObserver(element, {
+ freezeOnceVisible: true,
+ rootMargin: '200px',
+})
+
+return <div ref={setElement}>{entry?.isIntersecting ? <HeavyChart /> : null}</div>
+```
+
+A positive `rootMargin` starts loading a little before the element is on
+screen, so people rarely catch it loading.
+
+## Inside a scroll container
+
+By default the hook watches the viewport. To watch a scrollable element
+instead, pass it as `root`. Store it the same way as the element:
+
+```tsx
+const [root, setRoot] = React.useState<HTMLDivElement | null>(null)
+const entry = useIntersectionObserver(element, { root })
+
+return (
+ <div className="h-48 overflow-y-auto" ref={setRoot}>
+ ...
+ </div>
+)
+```
+
+## Options
+
+import { TypeTable } from 'fumadocs-ui/components/type-table'
+
+<TypeTable
+ type={{
+ threshold: {
+ description:
+ 'How much of the element (0 to 1) has to be visible. Pass an array to get an update at each step.',
+ type: 'number | number[]',
+ default: '0',
+ },
+ rootMargin: {
+ description: 'Grows or shrinks the area that counts as visible, like CSS margin.',
+ type: 'string',
+ default: '"0%"',
+ },
+ root: {
+ description: 'The scroll container to watch. `null` means the viewport.',
+ type: 'Element | null',
+ default: 'null',
+ },
+ freezeOnceVisible: {
+ description: 'Stop observing after the element is visible for the first time.',
+ type: 'boolean',
+ default: 'false',
+ },
+ }}
+/>
+
+On the server, and in the rare browser without `IntersectionObserver`, the hook
+returns `undefined`.
diff --git a/apps/web/content/docs/ui/hooks/use-local-storage.mdx b/apps/web/content/docs/ui/hooks/use-local-storage.mdx
new file mode 100644
index 000000000..cea1a6db1
--- /dev/null
+++ b/apps/web/content/docs/ui/hooks/use-local-storage.mdx
@@ -0,0 +1,76 @@
+---
+title: useLocalStorage
+description: Like useState, but the value survives page reloads and stays in sync across tabs.
+icon: HardDrive
+---
+
+## Usage
+
+```ts
+import { useLocalStorage } from '@vitnode/core/hooks/use-local-storage'
+```
+
+```tsx
+export const ExampleComponent = () => {
+ const [name, setName] = useLocalStorage('name', '') // [!code ++]
+
+ return <input onChange={e => setName(e.target.value)} value={name} />
+}
+```
+
+It works like `useState`. Pass a key and a default value, and get the value and
+a setter back. Values are saved as JSON, so numbers, booleans, arrays and plain
+objects all come back exactly as you stored them.
+
+## Update from the previous value
+
+The setter also takes a function, which always receives the freshest value:
+
+```ts
+const [count, setCount] = useLocalStorage('count', 0)
+
+setCount(previous => previous + 1)
+```
+
+## Reset
+
+The third item removes the key from storage, and the hook goes back to the
+default value:
+
+```ts
+const [filters, setFilters, resetFilters] = useLocalStorage('filters', [])
+```
+
+## Good to know
+
+- **Synced everywhere.** Every component using the same key updates together,
+ in this tab and in any other tab of your site.
+- **Server-safe.** During server rendering the hook returns the default value,
+ then switches to the stored one in the browser without a hydration mismatch.
+- **No crashes.** A broken stored value falls back to the default. When storage
+ is blocked (some private windows) or full, the value lives in memory for the
+ session instead.
+- **Only for nice-to-haves.** Local storage lives in one browser on one device.
+ Use it for things like a collapsed panel or a draft, never for data that has
+ to reach the server or other people.
+
+## Returns
+
+import { TypeTable } from 'fumadocs-ui/components/type-table'
+
+<TypeTable
+ type={{
+ '[0] value': {
+ description: 'The stored value, or the default when nothing is stored.',
+ type: 'T',
+ },
+ '[1] setValue': {
+ description: 'Saves a new value, or a function that gets the previous one.',
+ type: '(value: T | ((previous: T) => T)) => void',
+ },
+ '[2] removeValue': {
+ description: 'Removes the key and goes back to the default value.',
+ type: '() => void',
+ },
+ }}
+/>
diff --git a/apps/web/content/docs/ui/hooks/use-mobile.mdx b/apps/web/content/docs/ui/hooks/use-mobile.mdx
index 94f866bf2..600c1f6dd 100644
--- a/apps/web/content/docs/ui/hooks/use-mobile.mdx
+++ b/apps/web/content/docs/ui/hooks/use-mobile.mdx
@@ -1,6 +1,7 @@
---
title: useMobile
description: A custom hook to determine if the user is on a mobile device
+icon: Smartphone
---
## Example
diff --git a/apps/web/content/docs/ui/hover-card.mdx b/apps/web/content/docs/ui/hover-card.mdx
index 3ba044f21..8dccb795b 100644
--- a/apps/web/content/docs/ui/hover-card.mdx
+++ b/apps/web/content/docs/ui/hover-card.mdx
@@ -1,6 +1,7 @@
---
title: Hover Card
description: A component for displaying additional information on hover.
+icon: MousePointer2
---
## Preview
diff --git a/apps/web/content/docs/ui/image-zoom.mdx b/apps/web/content/docs/ui/image-zoom.mdx
new file mode 100644
index 000000000..a7b4c65f7
--- /dev/null
+++ b/apps/web/content/docs/ui/image-zoom.mdx
@@ -0,0 +1,88 @@
+---
+title: Image Zoom
+description: Click an image and it grows from its spot on the page to fill the screen.
+icon: ZoomIn
+---
+
+## Preview
+
+<Preview name="image-zoom" />
+
+## Usage
+
+```ts
+import { ImageZoom } from '@vitnode/core/components/ui/image-zoom'
+```
+
+```tsx
+<ImageZoom
+ alt="The VitNode AdminCP dashboard"
+ imageClassName="w-full rounded-md border"
+ src="/screenshots/dashboard.webp"
+/>
+```
+
+Click the image (or focus it and press <kbd>Enter</kbd>) and it glides from
+where it sits to the middle of the screen over a blurred backdrop. Click
+anywhere, press <kbd>Escape</kbd> or hit the × to send it back home.
+
+## Sharper zoom
+
+Show a light thumbnail on the page and load the big version only when someone
+zooms in:
+
+```tsx
+<ImageZoom
+ alt="The VitNode AdminCP dashboard"
+ src={thumbnail}
+ zoomSrc={fullSize}
+/>
+```
+
+## Styling
+
+- `className` styles the clickable wrapper. Use it for layout and visibility
+ (`hidden dark:block` for theme-specific screenshots).
+- `imageClassName` styles the image on the page: size, border, rounded corners.
+
+The zoomed image always fits the screen without cropping.
+
+## Accessibility
+
+- The image is a real button, so it works with the keyboard and screen readers
+ announce that it opens a dialog.
+- `alt` is required. It labels the image on the page and names the zoomed view.
+- Focus is trapped while zoomed and returns to the image when you close it.
+- With reduced motion turned on, the image appears zoomed instantly instead of
+ gliding.
+
+## Props
+
+import { TypeTable } from 'fumadocs-ui/components/type-table'
+
+<TypeTable
+ type={{
+ src: {
+ description: 'The image shown on the page.',
+ type: 'string',
+ required: true,
+ },
+ alt: {
+ description: 'Describes the image, on the page and when zoomed.',
+ type: 'string',
+ required: true,
+ },
+ zoomSrc: {
+ description: 'A larger image to show when zoomed. Defaults to `src`.',
+ type: 'string',
+ },
+ className: {
+ description: 'Classes for the clickable wrapper.',
+ type: 'string',
+ },
+ imageClassName: {
+ description: 'Classes for the image on the page.',
+ type: 'string',
+ },
+ }}
+/>
diff --git a/apps/web/content/docs/ui/input-group.mdx b/apps/web/content/docs/ui/input-group.mdx
index 868f0aff7..b0993e3f0 100644
--- a/apps/web/content/docs/ui/input-group.mdx
+++ b/apps/web/content/docs/ui/input-group.mdx
@@ -1,6 +1,7 @@
---
title: Input Group
description: Component used for grouping related input fields together
+icon: RectangleEllipsis
---
## Preview
diff --git a/apps/web/content/docs/ui/input-otp.mdx b/apps/web/content/docs/ui/input-otp.mdx
new file mode 100644
index 000000000..611151150
--- /dev/null
+++ b/apps/web/content/docs/ui/input-otp.mdx
@@ -0,0 +1,220 @@
+---
+title: Input OTP
+description: A one-time password input with separate slots, a blinking caret and digits that pop into place as you type.
+icon: KeyRound
+---
+
+## Preview
+
+<Preview name="input-otp" />
+
+## Usage
+
+import { Tab, Tabs } from "fumadocs-ui/components/tabs";
+
+<Tabs items={['Auto Form', 'Manual']}>
+ <Tab value="Auto Form">
+
+```ts
+import { z } from 'zod'
+import { AutoForm } from '@vitnode/core/components/form/auto-form'
+import { AutoFormInputOTP } from '@vitnode/core/components/form/fields/input-otp'
+```
+
+```ts
+const formSchema = z.object({
+ code: z
+ .string()
+ .length(6, 'Enter all 6 digits')
+ .regex(/^\d+$/, 'Only digits, please'),
+})
+```
+
+```tsx
+<AutoForm
+ formSchema={formSchema}
+ fields={[
+ {
+ id: 'code',
+ component: props => (
+ <AutoFormInputOTP
+ {...props}
+ label="Verify your account"
+ description="We sent a 6-digit code to your email."
+ />
+ ),
+ },
+ ]}
+/>
+```
+
+The schema does the setup for you. `.length(6)` decides how many slots there
+are, and `.regex()` becomes the input's `pattern`, so letters never even make it
+into a digits-only code.
+
+ </Tab>
+
+ <Tab value="Manual">
+
+```ts
+import {
+ InputOTP,
+ InputOTPGroup,
+ InputOTPSeparator,
+ InputOTPSlot,
+} from '@vitnode/core/components/ui/input-otp'
+```
+
+```tsx
+<InputOTP maxLength={6} onChange={setValue} value={value}>
+ <InputOTPGroup>
+ <InputOTPSlot index={0} />
+ <InputOTPSlot index={1} />
+ <InputOTPSlot index={2} />
+ </InputOTPGroup>
+ <InputOTPSeparator />
+ <InputOTPGroup>
+ <InputOTPSlot index={3} />
+ <InputOTPSlot index={4} />
+ <InputOTPSlot index={5} />
+ </InputOTPGroup>
+</InputOTP>
+```
+
+ </Tab>
+</Tabs>
+
+Each new character rises into its slot with a quick fade and scale. Values that
+are already there when the input mounts (like a code restored from state) show
+up instantly, and with reduced motion turned on nothing moves at all.
+
+Under the hood there is a single real `<input>`, so pasting a whole code,
+password managers and the "fill code from SMS" suggestion on phones
+(`autocomplete="one-time-code"`) all work out of the box.
+
+## Groups
+
+`AutoFormInputOTP` builds the slots for you. Codes of 6 or more characters with
+an even length are split in half with a separator (`123-456`). Anything else
+stays in one group. Pass `groups` to pick your own split:
+
+```tsx
+<AutoFormInputOTP {...props} groups={[4]} label="PIN" />
+<AutoFormInputOTP {...props} groups={[2, 2, 2]} label="Backup code" />
+```
+
+## Submit when complete
+
+`onComplete` fires once every slot is filled, so you can verify the code without
+making people hunt for a button. It works on both `AutoFormInputOTP`
+and `InputOTP`.
+
+```tsx
+<AutoFormInputOTP {...props} onComplete={code => verify(code)} />
+```
+
+## Wrong code
+
+A wrong code usually comes back from your API, not from the schema. Set it on
+the field with `setFormFieldError` and every slot turns red, with the message
+underneath:
+
+```ts
+import { setFormFieldError } from '@vitnode/core/components/ui/form'
+```
+
+```tsx
+<AutoForm
+ formSchema={formSchema}
+ onSubmit={async (values, form) => {
+ const res = await verifyCode(values.code)
+
+ if (!res.ok) {
+ setFormFieldError(form, 'code', "That code doesn't match.")
+ }
+ }}
+ fields={[...]}
+/>
+```
+
+Using `InputOTP` on its own? Set `aria-invalid` on it and link your message
+with `aria-describedby`. Red slots mean nothing to a screen reader.
+
+## Only digits (manual)
+
+Without a schema, restrict what can be typed with `pattern`. The common patterns
+are re-exported, so you don't need to install `input-otp` yourself:
+
+```ts
+import {
+ REGEXP_ONLY_CHARS,
+ REGEXP_ONLY_DIGITS,
+ REGEXP_ONLY_DIGITS_AND_CHARS,
+} from '@vitnode/core/components/ui/input-otp'
+```
+
+```tsx
+<InputOTP maxLength={6} pattern={REGEXP_ONLY_DIGITS}>
+ ...
+</InputOTP>
+```
+
+## Accessibility
+
+- `AutoFormInputOTP` wires the label, description and error message to the
+ input for you.
+- Using `InputOTP` directly? Pass it an `id`, point a `<Label htmlFor>` at it
+ and describe where the code was sent with `aria-describedby`.
+- Slots and separators are hidden from screen readers. The real input already
+ announces the value, so nobody hears every digit twice.
+
+## Props
+
+import { TypeTable } from 'fumadocs-ui/components/type-table'
+
+`AutoFormInputOTP` accepts every `InputOTP` prop (except `value` and
+`children`, which the form owns) plus:
+
+<TypeTable
+ type={{
+ label: {
+ description: 'The label shown above the slots.',
+ type: 'ReactNode',
+ },
+ description: {
+ description: 'Helper text shown below the slots.',
+ type: 'ReactNode',
+ },
+ groups: {
+ description:
+ 'How many slots each group has. Defaults to two halves for even lengths of 6+, otherwise one group.',
+ type: 'number[]',
+ },
+ maxLength: {
+ description:
+ 'How many characters the code has. Defaults to the schema `.length()` / `.max()`, then 6.',
+ type: 'number',
+ },
+ onChange: {
+ description: 'Called with the new value on every change.',
+ type: '(value: string) => void',
+ },
+ onComplete: {
+ description: 'Called once every slot is filled.',
+ type: '(value: string) => void',
+ },
+ pattern: {
+ description:
+ 'A regular expression the value must match. Defaults to the schema `.regex()`.',
+ type: 'string',
+ },
+ disabled: {
+ description: 'Disables the input.',
+ type: 'boolean',
+ },
+ }}
+/>
+
+## API Reference
+
+[input-otp](https://github.com/guilhermerodz/input-otp)
diff --git a/apps/web/content/docs/ui/input.mdx b/apps/web/content/docs/ui/input.mdx
index 86fb2ea3e..98c9c3e84 100644
--- a/apps/web/content/docs/ui/input.mdx
+++ b/apps/web/content/docs/ui/input.mdx
@@ -1,6 +1,7 @@
---
title: Input
description: Component used for collecting data from users
+icon: TextCursorInput
---
## Preview
diff --git a/apps/web/content/docs/ui/item.mdx b/apps/web/content/docs/ui/item.mdx
new file mode 100644
index 000000000..7ee3e4cdf
--- /dev/null
+++ b/apps/web/content/docs/ui/item.mdx
@@ -0,0 +1,213 @@
+---
+title: Item
+description: A row for lists, settings and menus that lines up media, a title, a description and actions without the CSS headache.
+icon: LayoutList
+---
+
+## Preview
+
+<Preview name="item" />
+
+## Usage
+
+```ts
+import {
+ Item,
+ ItemActions,
+ ItemContent,
+ ItemDescription,
+ ItemMedia,
+ ItemTitle,
+} from '@vitnode/core/components/ui/item'
+```
+
+```tsx
+<Item variant="outline">
+ <ItemMedia variant="icon">
+ <ShieldCheck />
+ </ItemMedia>
+ <ItemContent>
+ <ItemTitle>Two-factor authentication</ItemTitle>
+ <ItemDescription>Add a second lock to your account.</ItemDescription>
+ </ItemContent>
+ <ItemActions>
+ <Button size="sm" variant="outline">
+ Enable
+ </Button>
+ </ItemActions>
+</Item>
+```
+
+Every app ends up with a dozen slightly different "icon, text, button on the
+right" rows. `Item` is that row, built once, so you can stop rebuilding it.
+
+## Anatomy
+
+- `Item` is the row itself. Flexbox, wraps when it has to.
+- `ItemMedia` holds an icon, avatar or image on the start side. With a
+ description present it aligns itself to the top of the text.
+- `ItemContent` stacks the title and description and takes the free space.
+- `ItemTitle` is one line, truncated if it gets chatty.
+- `ItemDescription` shows up to two lines of muted text. Links inside are
+ underlined automatically.
+- `ItemActions` holds buttons, badges or a chevron on the end side.
+- `ItemHeader` and `ItemFooter` are full-width rows above and below the content.
+- `ItemGroup` wraps a list of items, and `ItemSeparator` draws a line between
+ them.
+
+## Variants
+
+`default` has no border or background, `outline` adds a border, and `muted`
+adds a soft background.
+
+<Preview name="item-variants" />
+
+```tsx
+<Item variant="default" />
+<Item variant="outline" />
+<Item variant="muted" />
+```
+
+## Sizes
+
+Going from `default` to `sm` to `xs` shrinks the padding and the gaps.
+`ItemMedia` with the `image` variant shrinks along with them, and `xs` also uses
+smaller description text.
+
+<Preview name="item-sizes" />
+
+```tsx
+<Item size="sm" variant="outline">
+ ...
+</Item>
+```
+
+## Media
+
+`ItemMedia` comes in three flavours:
+
+- `default` adds no styling at all, which suits an `Avatar`.
+- `icon` sizes a bare SVG icon to `size-4`.
+- `image` is a rounded square that crops an `img` to fit.
+
+```tsx
+<ItemMedia variant="image">
+ <img alt="" src="/cover.webp" />
+</ItemMedia>
+```
+
+## As a link
+
+Pass an element to `render` and the whole row becomes that element, whether
+that's an `<a>`, a router `Link` or a `<button>`. Rendered as a link it
+picks up a hover background for free.
+
+<Preview name="item-link" />
+
+```tsx
+<Item
+ render={
+ <a href="/docs/ui/avatar">
+ <ItemContent>
+ <ItemTitle>Read the Avatar docs</ItemTitle>
+ </ItemContent>
+ <ItemActions>
+ <ChevronRight aria-hidden className="size-4" />
+ </ItemActions>
+ </a>
+ }
+/>
+```
+
+Put the row's content inside the rendered element, as above, so the link wraps
+everything you see.
+
+## Groups
+
+Wrap items in `ItemGroup` to stack them, and drop an `ItemSeparator` between
+them when you want a line in between.
+
+<Preview name="item-group" />
+
+```tsx
+<ItemGroup aria-label="Team members">
+ <Item role="listitem">...</Item>
+ <ItemSeparator />
+ <Item role="listitem">...</Item>
+</ItemGroup>
+```
+
+## Header and footer
+
+`ItemHeader` and `ItemFooter` take the full width of the row, so a status badge
+or a timestamp can sit above or below the main content.
+
+<Preview name="item-header" />
+
+```tsx
+<Item variant="outline">
+ <ItemHeader>
+ <Badge variant="success">Active</Badge>
+ </ItemHeader>
+ <ItemContent>...</ItemContent>
+ <ItemFooter>
+ <Button size="sm">Edit</Button>
+ </ItemFooter>
+</Item>
+```
+
+## Accessibility
+
+- `ItemGroup` renders with `role="list"`. Give every `Item` inside it
+ `role="listitem"`, and an `aria-label` on the group helps screen readers
+ announce what the list is about.
+- Keep one interactive element per row. Either the whole row is a link or
+ button (via `render`), or it holds buttons in `ItemActions`. Never put a
+ button inside a link.
+- Icon-only buttons in `ItemActions` need an `aria-label` that names the row,
+ for example "Invite Ada Lovelace" rather than just "Invite".
+- Decorative icons such as a trailing chevron get `aria-hidden`. Links that
+ open a new tab say so with `sr-only` text.
+- Rows rendered as links or buttons show the focus ring on keyboard focus.
+
+## Props
+
+import { TypeTable } from 'fumadocs-ui/components/type-table'
+
+### Item
+
+<TypeTable
+ type={{
+ variant: {
+ description: 'The look of the row.',
+ type: 'default | outline | muted',
+ default: 'default',
+ },
+ size: {
+ description: 'Padding and gap between the parts of the row.',
+ type: 'default | sm | xs',
+ default: 'default',
+ },
+ render: {
+ description:
+ 'Replaces the `div` with your own element, such as a link or a button.',
+ type: 'ReactElement | ((props, state) => ReactElement)',
+ },
+ }}
+/>
+
+### ItemMedia
+
+<TypeTable
+ type={{
+ variant: {
+ description: 'How the media is styled.',
+ type: 'default | icon | image',
+ default: 'default',
+ },
+ }}
+/>
+
+## API Reference
+
+[Base UI - useRender](https://base-ui.com/react/utils/use-render)
diff --git a/apps/web/content/docs/ui/kbd.mdx b/apps/web/content/docs/ui/kbd.mdx
new file mode 100644
index 000000000..0966b30ee
--- /dev/null
+++ b/apps/web/content/docs/ui/kbd.mdx
@@ -0,0 +1,169 @@
+---
+title: Kbd
+description: Show keyboard keys and shortcuts like ⌘ K in a way both eyes and screen readers understand.
+icon: Keyboard
+---
+
+## Preview
+
+<Preview name="kbd" />
+
+## Usage
+
+```ts
+import { Kbd, KbdGroup } from '@vitnode/core/components/ui/kbd'
+```
+
+```tsx
+<Kbd>Esc</Kbd>
+```
+
+`Kbd` renders a real `<kbd>` element, so browsers, search engines and assistive
+tech all know it is a key, not a tiny gray box that happens to look like one.
+
+## Shortcuts
+
+Wrap the keys of a combination in `KbdGroup`. It lines them up with a small gap
+and stays a `<kbd>` too, which is exactly how HTML describes a key combo.
+
+```tsx
+<KbdGroup>
+ <Kbd>Ctrl</Kbd>
+ <Kbd>K</Kbd>
+</KbdGroup>
+```
+
+Prefer a visible plus sign? Drop it between the keys and hide it from screen
+readers, since they already hear two keys:
+
+```tsx
+<KbdGroup>
+ <Kbd>Ctrl</Kbd>
+ <span aria-hidden="true">+</span>
+ <Kbd>C</Kbd>
+</KbdGroup>
+```
+
+## Inside a button
+
+Hint at the shortcut right on the action. `Kbd` sizes itself to the text, so it
+fits small buttons without extra classes.
+
+```tsx
+<Button size="sm" variant="outline">
+ Accept
+ <Kbd>Enter</Kbd>
+</Button>
+```
+
+## Inside a tooltip
+
+In a [Tooltip](/docs/ui/tooltip) the keys switch to a translucent style that
+stays readable on the dark tooltip background, in both themes. No props needed.
+
+```tsx
+<TooltipWithContent
+ text={
+ <>
+ Save changes
+ <KbdGroup>
+ <Kbd>Ctrl</Kbd>
+ <Kbd>S</Kbd>
+ </KbdGroup>
+ </>
+ }
+>
+ <Button aria-label="Save" size="icon-sm" variant="outline">
+ <SaveIcon />
+ </Button>
+</TooltipWithContent>
+```
+
+## Inside an input
+
+Pair it with an [Input Group](/docs/ui/input-group) addon for the classic
+"press ⌘ K to search" field.
+
+```tsx
+<InputGroup>
+ <InputGroupInput aria-label="Search" placeholder="Search..." />
+ <InputGroupAddon>
+ <SearchIcon />
+ </InputGroupAddon>
+ <InputGroupAddon align="inline-end">
+ <KbdGroup>
+ <Kbd>Ctrl</Kbd>
+ <Kbd>K</Kbd>
+ </KbdGroup>
+ </InputGroupAddon>
+</InputGroup>
+```
+
+## ⌘ on Mac, Ctrl everywhere else
+
+Showing ⌘ to a Windows user is a small betrayal. Detect the platform on the
+client, but render the same thing on the server and during hydration, or React
+will complain about mismatched HTML. `useSyncExternalStore` does exactly that.
+React uses its third argument for the server render and hydration, then switches
+to the real value.
+
+```tsx
+const subscribeToNothing = () => () => {}
+
+const useIsApple = () =>
+ React.useSyncExternalStore(
+ subscribeToNothing,
+ () => /Mac|iPhone|iPad|iPod/.test(navigator.userAgent),
+ () => true,
+ )
+
+const ModifierKey = () => (useIsApple() ? <Kbd>⌘</Kbd> : <Kbd>Ctrl</Kbd>)
+```
+
+No `useEffect` plus `setState` dance required.
+
+## Accessibility
+
+- Keep the `<kbd>` element. It tells assistive tech "this is a key", which a
+ styled `<span>` never will.
+- Do not rely on symbols alone. Screen readers announce ⌘ or ⇧ inconsistently,
+ if at all, so pair each symbol with a readable name:
+
+ ```tsx
+ <Kbd title="Command">
+ <span aria-hidden="true">⌘</span>
+ <span className="sr-only">Command</span>
+ </Kbd>
+ ```
+
+ An `aria-label` on a plain `<kbd>` is not reliably read out, so visually
+ hidden text is the safer bet. `title` adds a hover hint for sighted users.
+- `Kbd` has `pointer-events-none` and `select-none`. It is a hint, not a
+ control. If pressing the key should do something, listen for the key itself
+ (and put the action on a real button).
+- Do not make a shortcut the only way to do something. Mouse, touch and
+ keyboard users should all get there.
+
+## Props
+
+Both components accept every prop of the native element they render.
+
+import { TypeTable } from 'fumadocs-ui/components/type-table'
+
+<TypeTable
+ type={{
+ Kbd: {
+ description: 'A single key. Renders `<kbd data-slot="kbd">`.',
+ type: "React.ComponentProps<'kbd'>",
+ },
+ KbdGroup: {
+ description:
+ 'A key combination. Renders `<kbd data-slot="kbd-group">` around the keys.',
+ type: "React.ComponentProps<'div'>",
+ },
+ }}
+/>
+
+## API Reference
+
+[MDN - The Keyboard Input element](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/kbd)
diff --git a/apps/web/content/docs/ui/label.mdx b/apps/web/content/docs/ui/label.mdx
new file mode 100644
index 000000000..d98a383f5
--- /dev/null
+++ b/apps/web/content/docs/ui/label.mdx
@@ -0,0 +1,124 @@
+---
+title: Label
+description: An accessible text label for form controls. Click it and the control it names responds.
+icon: TextInitial
+---
+
+## Preview
+
+<Preview name="label" />
+
+## Usage
+
+```ts
+import { Label } from '@vitnode/core/components/ui/label'
+```
+
+```tsx
+<Label htmlFor="email">Email</Label>
+<Input id="email" type="email" />
+```
+
+`Label` is a styled native `<label>`. Point `htmlFor` at the control's `id` and
+the browser handles the rest. The whole label becomes a click target, and
+screen readers announce the text when the control gets focus.
+
+## Using AutoForm? You already have labels
+
+[AutoForm](/docs/ui/auto-form) fields render their own label (`AutoFormLabel`)
+from the `label` prop, wired to the right `id`, with an "Optional" hint when the
+schema says so. Don't add a `Label` next to an AutoForm field, or you'll end up
+with two.
+
+```tsx
+<AutoFormInput label="Email" {...props} />
+```
+
+Reach for `Label` when you build a control by hand: a settings toggle outside a
+form, a custom picker, a filter bar. For a full field layout with description
+and error message, see [Field](/docs/ui/field). Its `FieldLabel` is built on
+top of this component.
+
+## With a checkbox
+
+Put the control first and the label after it. The gap and alignment are built
+in, so clicking anywhere on the text toggles the checkbox.
+
+```tsx
+<div className="flex items-center gap-3">
+ <Checkbox id="terms" />
+ <Label htmlFor="terms">I promise I read the terms</Label>
+</div>
+```
+
+## Wrapping the control
+
+No `id` handy? Wrap the control instead. A `<label>` is associated with the
+control inside it automatically.
+
+```tsx
+<Label>
+ <Checkbox />
+ Remember me
+</Label>
+```
+
+## Disabled controls
+
+Disable the control and the label follows along. It dims and shows a
+`not-allowed` cursor, so nobody wonders why clicking it does nothing.
+
+```tsx
+<div className="flex items-center gap-3">
+ <Checkbox disabled id="newsletter" />
+ <Label htmlFor="newsletter">Weekly newsletter (coming soon)</Label>
+</div>
+```
+
+This works when the control comes **before** the label as a sibling and has the
+`peer` class. VitNode's `Checkbox`, `Switch` and `RadioGroupItem` already do.
+`Label` reacts to both a native `disabled` attribute and the `data-disabled`
+attribute Base UI puts on its controls.
+
+Label sits somewhere else? Put `group` and `data-disabled="true"` on a shared
+parent instead. [Field](/docs/ui/field) does exactly that for you.
+
+## Accessibility
+
+- Always associate the label with its control, either with `htmlFor` + `id` or
+ by wrapping the control. A label floating next to an input is just text to a
+ screen reader.
+- Keep the visible text meaningful. "Email" beats "Field 1", and placeholders
+ are not labels. They vanish the moment someone starts typing.
+- The label is part of the hit area. That makes small controls like checkboxes
+ much easier to tap on a phone, so keep the text next to the control rather
+ than far away.
+- `select-none` stops accidental text selection when someone clicks the label
+ quickly a few times.
+
+## Props
+
+Accepts every prop of the native `<label>` element.
+
+import { TypeTable } from 'fumadocs-ui/components/type-table'
+
+<TypeTable
+ type={{
+ htmlFor: {
+ description: 'The `id` of the control this label describes.',
+ type: 'string',
+ },
+ children: {
+ description: 'The label text. It can also wrap the control itself.',
+ type: 'React.ReactNode',
+ },
+ className: {
+ description: 'Extra classes merged with the default styles.',
+ type: 'string',
+ },
+ }}
+/>
+
+## API Reference
+
+[MDN - The Label element](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/label)
diff --git a/apps/web/content/docs/ui/marker.mdx b/apps/web/content/docs/ui/marker.mdx
new file mode 100644
index 000000000..fb2422c2c
--- /dev/null
+++ b/apps/web/content/docs/ui/marker.mdx
@@ -0,0 +1,170 @@
+---
+title: Marker
+description: Inline status lines, system notes, bordered rows and labeled separators for conversations and activity feeds.
+icon: Flag
+---
+
+## Preview
+
+<Preview name="marker" />
+
+## Usage
+
+```ts
+import {
+ Marker,
+ MarkerContent,
+ MarkerIcon,
+} from '@vitnode/core/components/ui/marker'
+```
+
+```tsx
+<Marker>
+ <MarkerIcon>
+ <Search />
+ </MarkerIcon>
+ <MarkerContent>Explored 4 files</MarkerContent>
+</Marker>
+```
+
+A marker is the quiet line between messages, like "Switched branch", "Today"
+or "Thinking...". It pairs nicely with [Bubble](/docs/ui/bubble) when you build a
+chat thread, and it is just as happy in an activity feed.
+
+```text
+Marker
+├── MarkerIcon
+└── MarkerContent
+```
+
+## Variants
+
+Pick a `variant` to change how the marker sits in the flow.
+
+```tsx
+<Marker>
+ <MarkerContent>A default marker for inline notes.</MarkerContent>
+</Marker>
+
+<Marker variant="separator">
+ <MarkerContent>Today</MarkerContent>
+</Marker>
+
+<Marker variant="border">
+ <MarkerContent>A border marker for row boundaries.</MarkerContent>
+</Marker>
+```
+
+| Variant | What it looks like |
+| ----------- | ---------------------------------------------------- |
+| `default` | An inline line of muted text for notes and actions. |
+| `separator` | A centered label with a divider line on each side. |
+| `border` | A default marker with a bottom border under the row. |
+
+Keep separator labels short, like a date or a few words. The divider lines take the
+leftover space, so a long label leaves them nothing to work with.
+
+## With an icon
+
+Wrap any icon in `MarkerIcon`. It is sized to match the text and hidden from
+screen readers, so the content does the talking. Add `flex-col` to stack the
+icon above the text:
+
+```tsx
+<Marker className="flex-col">
+ <MarkerIcon>
+ <BookOpenCheck />
+ </MarkerIcon>
+ <MarkerContent>Syncing completed</MarkerContent>
+</Marker>
+```
+
+## Status and shimmer
+
+For something that is still happening, set `role="status"` so the update gets
+announced, drop a `Spinner` in the icon slot and give the
+text the `shimmer` utility for that "working on it" glow.
+
+```tsx
+import { Spinner } from '@vitnode/core/components/ui/spinner'
+
+;<Marker role="status">
+ <MarkerIcon>
+ <Spinner />
+ </MarkerIcon>
+ <MarkerContent className="shimmer">Thinking...</MarkerContent>
+</Marker>
+```
+
+## Links and buttons
+
+The root is polymorphic. Pass `render` to turn a marker into a link or a
+button. Links get an underline for free.
+
+```tsx
+<Marker render={<a href="/admin/plugins" />}>
+ <MarkerContent>View installed plugins</MarkerContent>
+</Marker>
+
+<Marker
+ render={
+ <button
+ className="hover:text-foreground transition-colors"
+ onClick={revert}
+ type="button"
+ />
+ }
+>
+ <MarkerIcon>
+ <RotateCcw />
+ </MarkerIcon>
+ <MarkerContent>Revert this change</MarkerContent>
+</Marker>
+```
+
+## Accessibility
+
+- A marker is a plain `div` by default. Choose the semantics from what it does:
+ `role="status"` for live progress, `render` with an `a` or `button` when it is
+ clickable, nothing at all for a simple note.
+- A labeled separator needs no role. The lines are decorative pseudo-elements and
+ the label is read as ordinary text. Do not add `role="separator"`, because it
+ would hide the label from assistive tech.
+- `MarkerIcon` is `aria-hidden`, so the meaning lives in `MarkerContent`. For an
+ icon-only marker, give the root an `aria-label`.
+- Wrap a whole thread in an element with `role="log"` so new messages and
+ markers are announced in order.
+
+## Props
+
+import { TypeTable } from 'fumadocs-ui/components/type-table'
+
+### Marker
+
+<TypeTable
+ type={{
+ variant: {
+ description: 'How the marker sits between the surrounding content.',
+ type: 'default | separator | border',
+ default: 'default',
+ },
+ render: {
+ description:
+ 'Replaces the root element, for example with an `a` or a `button`.',
+ type: 'ReactElement | ((props, state) => ReactElement)',
+ },
+ role: {
+ description: 'Use `status` for markers that announce live progress.',
+ type: 'AriaRole',
+ },
+ }}
+/>
+
+### MarkerIcon and MarkerContent
+
+Both render a `span` and accept every standard `span` prop, including
+`className`.
+
+## API Reference
+
+[Base UI - useRender](https://base-ui.com/react/utils/use-render)
diff --git a/apps/web/content/docs/ui/menubar.mdx b/apps/web/content/docs/ui/menubar.mdx
new file mode 100644
index 000000000..27fd85f3a
--- /dev/null
+++ b/apps/web/content/docs/ui/menubar.mdx
@@ -0,0 +1,246 @@
+---
+title: Menubar
+description: A desktop-style menu bar with File, Edit and View menus, shortcuts, submenus, checkbox and radio items.
+icon: PanelTopOpen
+---
+
+## Preview
+
+<Preview name="menubar" />
+
+## Usage
+
+```ts
+import {
+ Menubar,
+ MenubarContent,
+ MenubarItem,
+ MenubarMenu,
+ MenubarSeparator,
+ MenubarShortcut,
+ MenubarTrigger,
+} from '@vitnode/core/components/ui/menubar'
+```
+
+```tsx
+<Menubar>
+ <MenubarMenu>
+ <MenubarTrigger>File</MenubarTrigger>
+ <MenubarContent className="w-56">
+ <MenubarItem>
+ New tab
+ <MenubarShortcut>⌘T</MenubarShortcut>
+ </MenubarItem>
+ <MenubarItem>New window</MenubarItem>
+ <MenubarSeparator />
+ <MenubarItem>Print...</MenubarItem>
+ </MenubarContent>
+ </MenubarMenu>
+ <MenubarMenu>
+ <MenubarTrigger>Edit</MenubarTrigger>
+ <MenubarContent className="w-56">
+ <MenubarItem>Undo</MenubarItem>
+ <MenubarItem>Redo</MenubarItem>
+ </MenubarContent>
+ </MenubarMenu>
+</Menubar>
+```
+
+Every `MenubarMenu` is one menu in the bar, made of a trigger and its content.
+Open one and the bar remembers. Hover the next trigger and it opens straight
+away, just like the menu bar at the top of your desktop. Handy for editors, dashboards and
+anything else with more commands than buttons.
+
+## Submenus
+
+Nest a `MenubarSub` to tuck related actions one level deeper. It opens on hover,
+on click, or with the arrow keys.
+
+```tsx
+import {
+ MenubarSub,
+ MenubarSubContent,
+ MenubarSubTrigger,
+} from '@vitnode/core/components/ui/menubar'
+
+<MenubarSub>
+ <MenubarSubTrigger>Share</MenubarSubTrigger>
+ <MenubarSubContent className="w-44">
+ <MenubarItem>Email link</MenubarItem>
+ <MenubarItem>Messages</MenubarItem>
+ </MenubarSubContent>
+</MenubarSub>
+```
+
+## Checkbox and radio items
+
+Use `MenubarCheckboxItem` for independent toggles and a `MenubarRadioGroup`
+when exactly one option can win. Both work controlled or uncontrolled.
+
+```tsx
+import {
+ MenubarCheckboxItem,
+ MenubarLabel,
+ MenubarRadioGroup,
+ MenubarRadioItem,
+} from '@vitnode/core/components/ui/menubar'
+
+const [showBookmarks, setShowBookmarks] = React.useState(true)
+const [profile, setProfile] = React.useState('benoit')
+
+<MenubarCheckboxItem
+ checked={showBookmarks}
+ onCheckedChange={setShowBookmarks}
+>
+ Always show bookmarks bar
+</MenubarCheckboxItem>
+<MenubarSeparator />
+<MenubarLabel inset>Switch profile</MenubarLabel>
+<MenubarRadioGroup value={profile} onValueChange={setProfile}>
+ <MenubarRadioItem value="andy">Andy</MenubarRadioItem>
+ <MenubarRadioItem value="benoit">Benoit</MenubarRadioItem>
+</MenubarRadioGroup>
+```
+
+The check mark sits at the start of the row. Add `inset` to plain items, labels
+and sub-triggers in the same menu so their text lines up with the checked ones.
+
+## Shortcuts
+
+`MenubarShortcut` shows a keyboard hint at the end of an item. It is only a
+label. Wire up the actual key binding yourself, or it is a promise you are not
+keeping.
+
+```tsx
+<MenubarItem>
+ Undo
+ <MenubarShortcut>⌘Z</MenubarShortcut>
+</MenubarItem>
+```
+
+## Destructive items
+
+Set `variant="destructive"` for actions you cannot take back, so they look the
+part.
+
+```tsx
+<MenubarItem variant="destructive">Close all windows</MenubarItem>
+```
+
+## Accessibility
+
+- The bar is a single tab stop. Once a trigger has focus, the left and right
+ arrows move between menus, and when a menu is open they move the open menu
+ with you.
+- Inside a menu, the up and down arrows move between items, the right arrow
+ opens a submenu, typing a letter jumps to a matching item and `Escape`
+ closes the menu and returns focus to its trigger.
+- Shortcuts are labels only. Screen readers read them as part of the item, but
+ pressing the keys does nothing until you bind them.
+- Disabled items stay visible and are announced as disabled, so nobody wonders
+ where "Force reload" went.
+- A menu bar is a desktop pattern. On small screens keep it short, or offer the
+ same actions in a [Dropdown Menu](/docs/ui/dropdown-menu).
+
+## Props
+
+import { TypeTable } from 'fumadocs-ui/components/type-table'
+
+### Menubar
+
+<TypeTable
+ type={{
+ loopFocus: {
+ description:
+ 'Whether arrow keys wrap from the last menu back to the first.',
+ type: 'boolean',
+ default: 'true',
+ },
+ modal: {
+ description:
+ 'Whether an open menu locks page scroll and blocks outside clicks.',
+ type: 'boolean',
+ default: 'true',
+ },
+ orientation: {
+ description: 'Which arrow keys move between menus.',
+ type: 'horizontal | vertical',
+ default: 'horizontal',
+ },
+ disabled: {
+ description: 'Disables every menu in the bar.',
+ type: 'boolean',
+ default: 'false',
+ },
+ }}
+/>
+
+### MenubarContent
+
+<TypeTable
+ type={{
+ side: {
+ description:
+ 'Which side of the trigger the menu prefers. It flips when there is no room.',
+ type: 'top | bottom | left | right | inline-start | inline-end',
+ default: 'bottom',
+ },
+ align: {
+ description: 'How the menu aligns against the trigger.',
+ type: 'start | center | end',
+ default: 'start',
+ },
+ sideOffset: {
+ description: 'Distance from the trigger in pixels.',
+ type: 'number',
+ default: '8',
+ },
+ alignOffset: {
+ description: 'Shift along the alignment axis in pixels.',
+ type: 'number',
+ default: '-4',
+ },
+ }}
+/>
+
+### MenubarItem
+
+<TypeTable
+ type={{
+ variant: {
+ description: 'The look of the item.',
+ type: 'default | destructive',
+ default: 'default',
+ },
+ inset: {
+ description:
+ 'Adds start padding so the text lines up with checkbox and radio items.',
+ type: 'boolean',
+ default: 'false',
+ },
+ disabled: {
+ description: 'Shows the item but makes it non-interactive.',
+ type: 'boolean',
+ default: 'false',
+ },
+ closeOnClick: {
+ description: 'Whether clicking the item closes the menu.',
+ type: 'boolean',
+ default: 'true',
+ },
+ onClick: {
+ description:
+ 'Called when the item is chosen with a click, tap or the keyboard.',
+ type: '(event) => void',
+ },
+ }}
+/>
+
+`MenubarCheckboxItem` takes `checked`, `defaultChecked` and `onCheckedChange`;
+`MenubarRadioGroup` takes `value`, `defaultValue` and `onValueChange`.
+`MenubarCheckboxItem` and `MenubarRadioItem` both accept `inset` and `disabled`. `MenubarMenu` takes `open`,
+`defaultOpen` and `onOpenChange` when you want to drive a single menu yourself.
+
+## API Reference
+
+[Base UI - Menubar](https://base-ui.com/react/components/menubar#api-reference)
diff --git a/apps/web/content/docs/ui/message.mdx b/apps/web/content/docs/ui/message.mdx
new file mode 100644
index 000000000..799a435ce
--- /dev/null
+++ b/apps/web/content/docs/ui/message.mdx
@@ -0,0 +1,213 @@
+---
+title: Message
+description: Lay out a chat message with an avatar, sender name, timestamp, footer actions and start or end alignment.
+icon: MessagesSquare
+---
+
+## Preview
+
+<Preview name="message" />
+
+## Usage
+
+```ts
+import {
+ Avatar,
+ AvatarFallback,
+ AvatarImage,
+} from '@vitnode/core/components/ui/avatar'
+import { Bubble, BubbleContent } from '@vitnode/core/components/ui/bubble'
+import {
+ Message,
+ MessageAvatar,
+ MessageContent,
+} from '@vitnode/core/components/ui/message'
+```
+
+```tsx
+<Message>
+ <MessageAvatar>
+ <Avatar>
+ <AvatarImage alt="VitNode assistant" src="/logo_vitnode_icon.svg" />
+ <AvatarFallback>VN</AvatarFallback>
+ </Avatar>
+ </MessageAvatar>
+ <MessageContent>
+ <Bubble variant="muted">
+ <BubbleContent>How can I help you today?</BubbleContent>
+ </Bubble>
+ </MessageContent>
+</Message>
+```
+
+`Message` owns the row: who is talking, which side they sit on, and what goes
+above or below. The speech bubble itself is a [Bubble](/docs/ui/bubble). The
+two are designed to be best friends.
+
+## Composition
+
+```text
+MessageGroup
+└── Message
+ ├── MessageAvatar
+ └── MessageContent
+ ├── MessageHeader
+ ├── Bubble / Attachment
+ └── MessageFooter
+```
+
+## Alignment
+
+Set `align="end"` for messages the current user sent. The avatar swaps sides,
+and every bubble, attachment, header and footer inside `MessageContent` moves to
+the end, so you don't need to set `align` on each `Bubble`.
+
+```tsx
+<Message align="end">
+ <MessageContent>
+ <Bubble>
+ <BubbleContent>Sent by me, obviously.</BubbleContent>
+ </Bubble>
+ </MessageContent>
+</Message>
+```
+
+`start` and `end` are logical, so in right-to-left languages the sides flip on
+their own.
+
+## Avatar
+
+`MessageAvatar` sticks to the bottom of the message, next to the last bubble.
+When the message has a `MessageFooter`, the avatar lifts up so it lines up with
+the bubble instead of the footer.
+
+## Group
+
+Wrap consecutive messages from the same sender in `MessageGroup` to tighten the
+spacing. Give the earlier messages an empty `MessageAvatar` so their bubbles line
+up with the one that shows the avatar.
+
+```tsx
+<MessageGroup>
+ <Message>
+ <MessageAvatar />
+ <MessageContent>
+ <Bubble variant="muted">
+ <BubbleContent>First thought.</BubbleContent>
+ </Bubble>
+ </MessageContent>
+ </Message>
+ <Message>
+ <MessageAvatar>
+ <Avatar>
+ <AvatarFallback>AV</AvatarFallback>
+ </Avatar>
+ </MessageAvatar>
+ <MessageContent>
+ <Bubble variant="muted">
+ <BubbleContent>Second thought, now with a face.</BubbleContent>
+ </Bubble>
+ </MessageContent>
+ </Message>
+</MessageGroup>
+```
+
+Need several bubbles inside a single message instead? Use
+[`BubbleGroup`](/docs/ui/bubble#grouping) inside `MessageContent`.
+
+## Header and footer
+
+`MessageHeader` is the spot for a sender name and timestamp. `MessageFooter`
+holds metadata such as a read receipt and follows the message to its side.
+
+```tsx
+<Message>
+ <MessageContent>
+ <MessageHeader className="gap-1.5">
+ <span className="text-foreground">Ava</span>
+ <time dateTime="2026-10-02T09:41">9:41 AM</time>
+ </MessageHeader>
+ <Bubble variant="muted">
+ <BubbleContent>Did the plugin build pass?</BubbleContent>
+ </Bubble>
+ <MessageFooter>Read</MessageFooter>
+ </MessageContent>
+</Message>
+```
+
+## Actions
+
+Put message-level actions such as copy, retry or feedback in the footer.
+
+```tsx
+<MessageFooter>
+ <Button aria-label="Copy message" size="icon-xs" variant="ghost">
+ <Copy />
+ </Button>
+</MessageFooter>
+```
+
+## Attachments
+
+Drop an [Attachment](/docs/ui/attachment) next to the bubble inside
+`MessageContent`. It aligns with the message like everything else.
+
+```tsx
+<Message align="end">
+ <MessageContent>
+ <Attachment>
+ <AttachmentMedia>
+ <FileText />
+ </AttachmentMedia>
+ <AttachmentContent>
+ <AttachmentTitle>build-log.txt</AttachmentTitle>
+ <AttachmentDescription>TXT · 12 KB</AttachmentDescription>
+ </AttachmentContent>
+ </Attachment>
+ <Bubble>
+ <BubbleContent>Log attached.</BubbleContent>
+ </Bubble>
+ </MessageContent>
+</Message>
+```
+
+## Accessibility
+
+- `Message` is a layout wrapper with no role of its own. Put `role="log"` and an
+ `aria-label` on the conversation container so new messages are announced
+ politely.
+- Alignment only tells sighted users who is speaking. Name the sender in text
+ too: a visible `MessageHeader`, or one with `className="sr-only"` for your own
+ messages.
+- Wrap timestamps in `<time dateTime="...">` so they stay machine-readable
+ while showing a friendly format.
+- Give `AvatarImage` an `alt` with the sender's name. If a `MessageHeader`
+ already names them, mark the `MessageAvatar` `aria-hidden="true"` so screen
+ readers do not hear the name twice.
+- Icon-only footer actions need an `aria-label`.
+- For "someone is typing" hints, use a [Marker](/docs/ui/marker) with
+ `role="status"`.
+
+## Props
+
+import { TypeTable } from 'fumadocs-ui/components/type-table'
+
+### Message
+
+<TypeTable
+ type={{
+ align: {
+ description:
+ 'Which side of the conversation the message sits on. Bubbles, attachments, header and footer inside follow it.',
+ type: 'start | end',
+ default: 'start',
+ },
+ }}
+/>
+
+`MessageGroup`, `MessageAvatar`, `MessageContent`, `MessageHeader` and
+`MessageFooter` accept every `div` prop, including `className`.
+
+## API Reference
+
+[shadcn/ui - Message](https://ui.shadcn.com/docs/components/base/message)
diff --git a/apps/web/content/docs/ui/meta.json b/apps/web/content/docs/ui/meta.json
index 71129e393..5be55f704 100644
--- a/apps/web/content/docs/ui/meta.json
+++ b/apps/web/content/docs/ui/meta.json
@@ -14,13 +14,18 @@
"confirm-action-alert-dialog",
"---Forms---",
"auto-form",
+ "cascader",
"checkbox",
"color",
"combobox",
"editor",
+ "field",
"input",
"input-group",
+ "input-otp",
+ "label",
"nullable-number",
+ "number-field",
"radio-group",
"roles",
"select",
@@ -28,6 +33,10 @@
"textarea",
"user",
"---UI---",
- "..."
+ "...",
+ "---Utilities---",
+ "counter",
+ "scroll-fade",
+ "shimmer"
]
}
diff --git a/apps/web/content/docs/ui/nullable-number.mdx b/apps/web/content/docs/ui/nullable-number.mdx
index 5cb5b8ca9..ad6e64576 100644
--- a/apps/web/content/docs/ui/nullable-number.mdx
+++ b/apps/web/content/docs/ui/nullable-number.mdx
@@ -1,12 +1,17 @@
---
title: Nullable Number
-description: Numeric field paired with a checkbox that toggles the value to null - for "unlimited", "never", "no limit", and similar.
+description: A number field with a checkbox that toggles the value to null, for answers like "unlimited", "never" or "no limit".
+icon: Hash
---
## Preview
<Preview name="nullable-number" />
+It builds on [Number Field](/docs/ui/number-field), so you get the plus and
+minus buttons, arrow-key stepping and min/max clamping for free. On top sits one
+checkbox for when the honest answer is "no limit".
+
## Usage
```ts
@@ -41,7 +46,8 @@ const formSchema = z.object({
<Callout type="info" title="Value shape">
The field value is `number | null`. A number is whatever is typed in the
- input; `null` means the checkbox is checked and the input is disabled. Back it
+ input (clearing it gives `0`); `null` means the checkbox is checked and the
+ number field is disabled. Back it
with a `z.number().nullable()` schema, and keep it optional or give it a
`default` when the field can be
[hidden](/docs/ui/auto-form#conditional-fields) so it never blocks submission.
@@ -50,13 +56,12 @@ const formSchema = z.object({
## Adapting the labels
-The three label props are plain text, so the same field works for any domain -
-an unlimited storage cap, a session that never expires, an uncapped rate limit,
-and so on:
+The three label props are plain text, so the same field fits an unlimited
+storage cap, a session that never expires or an uncapped rate limit:
-- `unitLabel` - shown right after the input (e.g. `kB`, `minutes`, `%`).
-- `orLabel` - an optional connector rendered before the checkbox (e.g. `or`).
-- `toggleLabel` - the checkbox label; checking it sets the value to `null`.
+- `unitLabel` is shown right after the input (e.g. `kB`, `minutes`, `%`).
+- `orLabel` is an optional connector rendered before the checkbox (e.g. `or`).
+- `toggleLabel` is the checkbox label. Checking it sets the value to `null`.
```tsx
<AutoFormNullableNumber
@@ -68,8 +73,22 @@ and so on:
/>
```
-Any other props (`min`, `max`, `step`, `placeholder`, …) are forwarded to the
-underlying number input; validation constraints come from the Zod schema.
+Any other props (`min`, `max`, `step`, `largeStep`, `format`, `placeholder`,
+…) are forwarded to the underlying
+[Number Field](/docs/ui/number-field#props). Validation comes from the Zod
+schema, and `min` / `max` on the field clamp the buttons and arrow keys, so
+pass them in both places.
+
+```tsx
+<AutoFormNullableNumber
+ {...props}
+ label="Upload limit"
+ min={0}
+ step={512}
+ toggleLabel="Unlimited"
+ unitLabel="kB"
+/>
+```
## Props
diff --git a/apps/web/content/docs/ui/number-field.mdx b/apps/web/content/docs/ui/number-field.mdx
new file mode 100644
index 000000000..d43228eb3
--- /dev/null
+++ b/apps/web/content/docs/ui/number-field.mdx
@@ -0,0 +1,270 @@
+---
+title: Number Field
+description: A number input with plus and minus buttons, keyboard stepping, min/max clamping, Intl formatting and drag-to-scrub labels.
+icon: Diff
+---
+
+## Preview
+
+<Preview name="number-field" />
+
+## Usage
+
+import { Tab, Tabs } from 'fumadocs-ui/components/tabs'
+
+<Tabs items={['Auto Form', 'Manual']}>
+ <Tab value="Auto Form">
+
+<Preview name="number-field-auto-form" />
+
+```ts
+import { z } from 'zod'
+import { AutoForm } from '@vitnode/core/components/form/auto-form'
+import { AutoFormNumber } from '@vitnode/core/components/form/fields/number'
+```
+
+```ts
+const formSchema = z.object({
+ guests: z.number().int().min(1).max(12).default(2),
+})
+```
+
+```tsx
+<AutoForm
+ formSchema={formSchema}
+ fields={[
+ {
+ id: 'guests',
+ component: props => (
+ <AutoFormNumber
+ {...props}
+ label="Guests"
+ max={12}
+ min={1}
+ unitLabel="people"
+ />
+ ),
+ },
+ ]}
+/>
+```
+
+The form stores a real `number`, not a string. Clearing the input stores
+`null`, so pair it with `.optional()` or a `default` when empty is allowed.
+Pass `min`/`max` to the field as well as the schema. The schema validates,
+and the props clamp the buttons and the arrow keys.
+
+Need an "unlimited" checkbox next to it? That's
+[Nullable Number](/docs/ui/nullable-number).
+
+ </Tab>
+
+ <Tab value="Manual">
+
+```ts
+import {
+ NumberField,
+ NumberFieldDecrement,
+ NumberFieldGroup,
+ NumberFieldIncrement,
+ NumberFieldInput,
+} from '@vitnode/core/components/ui/number-field'
+```
+
+```tsx
+const [value, setValue] = React.useState<number | null>(2)
+
+<NumberField max={8} min={0} onValueChange={setValue} value={value}>
+ <NumberFieldGroup>
+ <NumberFieldDecrement />
+ <NumberFieldInput aria-label="Coffees per day" />
+ <NumberFieldIncrement />
+ </NumberFieldGroup>
+</NumberField>
+```
+
+Prefer uncontrolled? Swap `value` for `defaultValue` and listen with
+`onValueCommitted`, which fires once the user is done (on blur, or when the
+button is released) instead of on every keystroke.
+
+ </Tab>
+</Tabs>
+
+## Min, max and step
+
+- `min` / `max` stop the buttons, arrow keys and scrubbing at the limits, and
+ disable the button that would cross one. A typed value is clamped on blur.
+- `step` is how much one click or arrow press moves the value (default `1`).
+- `largeStep` is used with <kbd>Shift</kbd> held (default `10`).
+- `smallStep` is used with <kbd>Alt</kbd> (default `0.1`).
+- `snapOnStep` snaps to the nearest multiple of the step instead of adding it
+ to whatever was typed.
+
+```tsx
+<NumberField largeStep={50} max={500} min={0} step={5}>
+ …
+</NumberField>
+```
+
+## Formatting
+
+`format` takes [`Intl.NumberFormatOptions`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#options),
+so currencies, percentages and units come for free. The value stays a plain
+number. `0.15` shows as `15%`, and typing `20%` gives you `0.2` back.
+
+<Preview name="number-field-format" />
+
+```tsx
+<NumberField defaultValue={19.99} format={{ style: 'currency', currency: 'USD' }}>
+ …
+</NumberField>
+
+<NumberField
+ defaultValue={0.15}
+ format={{ style: 'percent' }}
+ max={1}
+ min={0}
+ step={0.01}
+>
+ …
+</NumberField>
+```
+
+Numbers are formatted in the current app locale, so Polish users see `12 345`
+and English users see `12,345`. Pass `locale` to override it.
+
+## Scrub area
+
+Wrap the label in `NumberFieldScrubArea` and the label becomes a slider. Drag
+it left or right to change the value, like in a design tool. Give it the same
+`htmlFor` as the field's `id` so clicking the label still focuses the input.
+
+```tsx
+const id = React.useId()
+
+<NumberField id={id} max={8} min={0}>
+ <NumberFieldScrubArea htmlFor={id} label="Coffees per day" />
+ <NumberFieldGroup>
+ <NumberFieldDecrement />
+ <NumberFieldInput />
+ <NumberFieldIncrement />
+ </NumberFieldGroup>
+</NumberField>
+```
+
+Want the mouse wheel to change the value while the input is focused? Add
+`allowWheelScrub`.
+
+## Sizes
+
+<Preview name="number-field-sizes" />
+
+```tsx
+<NumberField size="sm">…</NumberField>
+<NumberField>…</NumberField>
+<NumberField size="lg">…</NumberField>
+```
+
+## Disabled and read-only
+
+`disabled` dims the whole field and ignores every interaction. `readOnly`
+keeps the value readable and focusable but locks the buttons and the keys.
+
+## Accessibility
+
+- The input stays a text field (so formatted values like `$19.99` work) with
+ `inputMode` set, so phones open the right keyboard.
+- <kbd>Arrow Up</kbd> / <kbd>Arrow Down</kbd> step by `step`, hold
+ <kbd>Shift</kbd> for `largeStep` or <kbd>Alt</kbd> for `smallStep`.
+ <kbd>Home</kbd> / <kbd>End</kbd> jump to `min` / `max` when set.
+- The plus and minus buttons are labelled "Increase" and "Decrease" in the
+ user's language and are skipped by <kbd>Tab</kbd>, since the keyboard already
+ has the arrow keys. On touch screens their hit area grows to 44px.
+- Name the input with a label (`htmlFor` + `id`), a scrub area, or
+ `aria-label`. `AutoFormNumber` does it for you.
+
+## Props
+
+import { TypeTable } from 'fumadocs-ui/components/type-table'
+
+<TypeTable
+ type={{
+ value: {
+ description: 'The number (controlled). `null` means empty.',
+ type: 'number | null',
+ },
+ defaultValue: {
+ description: 'The starting number when uncontrolled.',
+ type: 'number',
+ },
+ onValueChange: {
+ description: 'Called on every change - typing, buttons, keys, scrubbing.',
+ type: '(value: number | null) => void',
+ },
+ onValueCommitted: {
+ description:
+ 'Called once the change is final - on blur, or when a button or scrub is released.',
+ type: '(value: number | null) => void',
+ },
+ min: {
+ description: 'The lowest allowed value.',
+ type: 'number',
+ },
+ max: {
+ description: 'The highest allowed value.',
+ type: 'number',
+ },
+ step: {
+ description: 'Amount for one click or arrow press.',
+ type: 'number | "any"',
+ default: '1',
+ },
+ largeStep: {
+ description: 'Amount with Shift held.',
+ type: 'number',
+ default: '10',
+ },
+ smallStep: {
+ description: 'Amount with Alt held.',
+ type: 'number',
+ default: '0.1',
+ },
+ format: {
+ description: 'How the value is displayed.',
+ type: 'Intl.NumberFormatOptions',
+ },
+ locale: {
+ description: 'Locale used for formatting and parsing.',
+ type: 'Intl.LocalesArgument',
+ default: 'the app locale',
+ },
+ size: {
+ description: 'Height of the field.',
+ type: '"sm" | "default" | "lg"',
+ default: '"default"',
+ },
+ allowWheelScrub: {
+ description: 'Change the value with the mouse wheel while focused.',
+ type: 'boolean',
+ default: 'false',
+ },
+ disabled: {
+ description: 'Ignores every interaction.',
+ type: 'boolean',
+ default: 'false',
+ },
+ readOnly: {
+ description: 'Shows the value but blocks changes.',
+ type: 'boolean',
+ default: 'false',
+ },
+ }}
+/>
+
+`AutoFormNumber` takes all of the props above except `value`,
+`defaultValue` and `onValueChange` (the form owns those), plus `label`,
+`description`, `placeholder` and `unitLabel`.
+
+## API Reference
+
+[Base UI - Number Field](https://base-ui.com/react/components/number-field)
diff --git a/apps/web/content/docs/ui/pagination.mdx b/apps/web/content/docs/ui/pagination.mdx
new file mode 100644
index 000000000..8daa2f230
--- /dev/null
+++ b/apps/web/content/docs/ui/pagination.mdx
@@ -0,0 +1,215 @@
+---
+title: Pagination
+description: Page numbers, previous and next links, and an ellipsis for when there are more pages than anyone wants to click through.
+icon: ChevronsLeftRightEllipsis
+---
+
+## Preview
+
+<Preview name="pagination" />
+
+<Callout title="Building a table?">
+ The [Data Table](/docs/ui/data-table) already paginates for you - page
+ numbers, page size and URL state included. Reach for `Pagination` directly
+ when you render your own list, feed or gallery.
+</Callout>
+
+## Usage
+
+```ts
+import {
+ Pagination,
+ PaginationContent,
+ PaginationEllipsis,
+ PaginationItem,
+ PaginationLink,
+ PaginationNext,
+ PaginationPrevious,
+} from '@vitnode/core/components/ui/pagination'
+```
+
+```tsx
+<Pagination>
+ <PaginationContent>
+ <PaginationItem>
+ <PaginationPrevious href="?page=1" />
+ </PaginationItem>
+ <PaginationItem>
+ <PaginationLink href="?page=1">1</PaginationLink>
+ </PaginationItem>
+ <PaginationItem>
+ <PaginationLink href="?page=2" isActive>
+ 2
+ </PaginationLink>
+ </PaginationItem>
+ <PaginationItem>
+ <PaginationLink href="?page=3">3</PaginationLink>
+ </PaginationItem>
+ <PaginationItem>
+ <PaginationEllipsis />
+ </PaginationItem>
+ <PaginationItem>
+ <PaginationNext href="?page=3" />
+ </PaginationItem>
+ </PaginationContent>
+</Pagination>
+```
+
+Every link renders a real `<a>`, so pages stay crawlable and middle-click still
+opens a new tab. `PaginationPrevious` and `PaginationNext` hide their text below
+the `sm` breakpoint and keep just the chevron, which also flips in RTL
+languages.
+
+## With router links
+
+`PaginationLink` takes any anchor prop. Keep a real `href` for crawlers and new
+tabs, then let TanStack Router handle the click so the page does not reload:
+
+```tsx
+import { useNavigate } from '@tanstack/react-router'
+
+const navigate = useNavigate()
+
+const goTo = (page: number) => (event: React.MouseEvent<HTMLAnchorElement>) => {
+ event.preventDefault()
+ void navigate({ to: '.', search: prev => ({ ...prev, page }) })
+}
+
+<PaginationLink href={`?page=${page}`} isActive={page === current} onClick={goTo(page)}>
+ {page}
+</PaginationLink>
+```
+
+## Ellipsis
+
+Twelve pages do not need twelve buttons. Show the first page, the last page and
+the one you are on, and let `PaginationEllipsis` stand in for the rest. A tiny
+helper keeps the window at five slots, so the row never jumps around:
+
+```tsx
+type PageSlot = 'ellipsis-end' | 'ellipsis-start' | number
+
+const range = (from: number, to: number) =>
+ Array.from({ length: to - from + 1 }, (_, step) => from + step)
+
+const pageWindow = (current: number, total: number): PageSlot[] => {
+ if (total <= 5) return range(1, total)
+ if (current <= 3) return [1, 2, 3, 'ellipsis-end', total]
+ if (current >= total - 2) {
+ return [1, 'ellipsis-start', ...range(total - 2, total)]
+ }
+
+ return [1, 'ellipsis-start', current, 'ellipsis-end', total]
+}
+```
+
+```tsx
+{pageWindow(page, total).map(slot => (
+ <PaginationItem key={slot}>
+ {typeof slot === 'number' ? (
+ <PaginationLink href={`?page=${slot}`} isActive={slot === page}>
+ {slot}
+ </PaginationLink>
+ ) : (
+ <PaginationEllipsis />
+ )}
+ </PaginationItem>
+))}
+```
+
+## Small screens
+
+Even five numbers get crowded on a phone. Give every number's `PaginationItem`
+`className="hidden sm:block"` and show a "Page 2 of 12" line between the arrows
+instead. The [Data Table](/docs/ui/data-table) uses the same trick:
+
+```tsx
+<PaginationItem className="sm:hidden">
+ <span className="text-muted-foreground px-2 text-sm">
+ Page {page} of {total}
+ </span>
+</PaginationItem>
+```
+
+## Disabled ends
+
+There is no page zero (we checked). On the first and last page, drop the `href`
+so the keyboard skips the link, and add `role="link"` with `aria-disabled` so
+screen readers still hear it as an unavailable link:
+
+```tsx
+<PaginationPrevious
+ {...(page > 1
+ ? { href: `?page=${page - 1}` }
+ : { 'aria-disabled': true, className: 'pointer-events-none', role: 'link' })}
+/>
+```
+
+## Custom labels
+
+The previous and next labels are translated out of the box. Pass `text` when
+your feed deserves something more specific:
+
+```tsx
+<PaginationPrevious href="?page=1" text="Newer posts" />
+<PaginationNext href="?page=3" text="Older posts" />
+```
+
+## Accessibility
+
+- `Pagination` is a `nav` landmark labelled "pagination", so screen reader users
+ can jump straight to it.
+- The active link gets `aria-current="page"`, which is announced as the current
+ page.
+- `PaginationPrevious` and `PaginationNext` keep a translated label ("Previous
+ page", "Next page") even when only the chevron is visible.
+- Page links are plain anchors named by their number, so "2" is read as
+ "link, 2" rather than a generic "Go to page".
+- `PaginationEllipsis` is hidden from assistive technology. It is decoration,
+ not a link.
+- Announce page changes that do not reload the page, for example with an
+ `aria-live="polite"` "Page 2 of 12" line like in the preview.
+
+## Props
+
+import { TypeTable } from 'fumadocs-ui/components/type-table'
+
+### PaginationLink
+
+<TypeTable
+ type={{
+ href: {
+ description: 'Where the link goes. Leave it out for a disabled end.',
+ type: 'string',
+ },
+ isActive: {
+ description:
+ 'Marks the current page with `aria-current="page"` and the outline style.',
+ type: 'boolean',
+ default: 'false',
+ },
+ size: {
+ description: 'The size of the underlying button.',
+ type: 'default | xs | sm | lg | icon | icon-xs | icon-sm | icon-lg',
+ default: 'icon',
+ },
+ }}
+/>
+
+### PaginationPrevious / PaginationNext
+
+Accept every `PaginationLink` prop, plus:
+
+<TypeTable
+ type={{
+ text: {
+ description: 'The visible label, shown from the `sm` breakpoint up.',
+ type: 'string',
+ default: '"Previous" / "Next" (translated)',
+ },
+ }}
+/>
+
+## API Reference
+
+[shadcn/ui - Pagination](https://ui.shadcn.com/docs/components/base/pagination)
diff --git a/apps/web/content/docs/ui/popover.mdx b/apps/web/content/docs/ui/popover.mdx
index ef4e8e5a2..00d478bba 100644
--- a/apps/web/content/docs/ui/popover.mdx
+++ b/apps/web/content/docs/ui/popover.mdx
@@ -1,6 +1,7 @@
---
title: Popover
description: A popover component for displaying additional content on user interaction.
+icon: MessageSquare
---
## Preview
diff --git a/apps/web/content/docs/ui/progress.mdx b/apps/web/content/docs/ui/progress.mdx
index 45072044a..770bf8df0 100644
--- a/apps/web/content/docs/ui/progress.mdx
+++ b/apps/web/content/docs/ui/progress.mdx
@@ -1,6 +1,7 @@
---
title: Progress
description: A progress component for indicating the completion of a task.
+icon: Hourglass
---
## Preview
diff --git a/apps/web/content/docs/ui/radio-group.mdx b/apps/web/content/docs/ui/radio-group.mdx
index 07f31c261..650184f41 100644
--- a/apps/web/content/docs/ui/radio-group.mdx
+++ b/apps/web/content/docs/ui/radio-group.mdx
@@ -1,6 +1,7 @@
---
title: Radio Group
description: Pick one option from a list.
+icon: CircleDot
---
## Preview
diff --git a/apps/web/content/docs/ui/resizable.mdx b/apps/web/content/docs/ui/resizable.mdx
new file mode 100644
index 000000000..eb6e8fb5a
--- /dev/null
+++ b/apps/web/content/docs/ui/resizable.mdx
@@ -0,0 +1,290 @@
+---
+title: Resizable
+description: Resizable panel groups and layouts with draggable, keyboard-friendly handles.
+icon: SquareSplitHorizontal
+---
+
+## Preview
+
+<Preview name="resizable" />
+
+## Usage
+
+```ts
+import {
+ ResizableHandle,
+ ResizablePanel,
+ ResizablePanelGroup,
+} from '@vitnode/core/components/ui/resizable'
+```
+
+```tsx
+<div className="h-80">
+ <ResizablePanelGroup className="rounded-lg border">
+ <ResizablePanel defaultSize="35%">Sidebar</ResizablePanel>
+ <ResizableHandle />
+ <ResizablePanel>Content</ResizablePanel>
+ </ResizablePanelGroup>
+</div>
+```
+
+A group always fills its parent with an inline `height: 100%`, so a height
+class on the group itself is ignored. Give the **parent** a height instead.
+Otherwise your beautiful layout is only as tall as its text, which is very
+minimalist but not very useful.
+
+Groups nest: drop a `ResizablePanelGroup` inside a `ResizablePanel` to split it
+again, like the sidebar + content + terminal combo in the preview.
+
+## Vertical
+
+Set `orientation="vertical"` to stack panels on top of each other.
+
+<Preview name="resizable-vertical" />
+
+```tsx
+<ResizablePanelGroup orientation="vertical">
+ <ResizablePanel defaultSize="30%">Header</ResizablePanel>
+ <ResizableHandle />
+ <ResizablePanel>Content</ResizablePanel>
+</ResizablePanelGroup>
+```
+
+## With handle
+
+Pass `withHandle` to show a small grip on the divider, so people know it is
+meant to be grabbed.
+
+<Preview name="resizable-handle" />
+
+```tsx
+<ResizableHandle withHandle />
+```
+
+## Sizes
+
+`defaultSize`, `minSize` and `maxSize` accept a few units, and the type
+changes the meaning:
+
+- a **string** without a unit is a percentage: `"30"` and `"30%"` are the same;
+- a **number** is pixels: `minSize={180}` means 180px, not 180%;
+- other CSS units work too: `"12rem"`, `"20vw"`, `"200px"`.
+
+```tsx
+<ResizablePanelGroup>
+ <ResizablePanel defaultSize="25%" maxSize="40%" minSize={180}>
+ Sidebar
+ </ResizablePanel>
+ <ResizableHandle />
+ <ResizablePanel minSize="30%">Content</ResizablePanel>
+</ResizablePanelGroup>
+```
+
+Panels without a `defaultSize` share whatever space is left. Double-click a
+handle to snap its panel back to its `defaultSize`.
+
+## Collapsible
+
+Mark a panel `collapsible` and it snaps to `collapsedSize` (default `0%`) once
+it is dragged below its `minSize`. Drag it back out to expand it again.
+
+<Preview name="resizable-collapsible" />
+
+```tsx
+<ResizablePanel collapsedSize="8%" collapsible defaultSize="35%" minSize="25%">
+ Sidebar
+</ResizablePanel>
+```
+
+Need a toggle button? Pass `panelRef` and call `collapse()`, `expand()` or
+`isCollapsed()` on it.
+
+## Persisting the layout
+
+The group's `defaultLayout` maps each panel `id` to a percentage, and
+`onLayoutChanged` reports every finished resize. Wire both to storage
+and the layout survives a reload. Give every panel a stable `id`, since that is
+what the saved layout is keyed by.
+
+<Preview name="resizable-persist" />
+
+```tsx
+const storageKey = 'my-layout'
+
+const readLayout = () => {
+ try {
+ return localStorage.getItem(storageKey)
+ } catch {
+ return null
+ }
+}
+
+export const RememberedLayout = () => {
+ const stored = React.useSyncExternalStore(
+ () => () => {},
+ readLayout,
+ () => null,
+ )
+
+ return (
+ <ResizablePanelGroup
+ defaultLayout={stored ? JSON.parse(stored) : undefined}
+ onLayoutChanged={(layout, meta) => {
+ if (!meta.isUserInteraction) return
+
+ localStorage.setItem(
+ storageKey,
+ JSON.stringify(meta.requestedLayout ?? layout),
+ )
+ }}
+ >
+ <ResizablePanel defaultSize="40%" id="sidebar">
+ Sidebar
+ </ResizablePanel>
+ <ResizableHandle withHandle />
+ <ResizablePanel id="content">Content</ResizablePanel>
+ </ResizablePanelGroup>
+ )
+}
+```
+
+`useSyncExternalStore` with a server snapshot of `null` keeps server rendering
+happy. The server renders the default sizes, and the browser swaps in the saved
+ones. Prefer `meta.requestedLayout` when saving. It is the layout the user
+asked for, before a small screen squeezed it to fit the constraints.
+
+## Accessibility
+
+- Every handle is a focusable `role="separator"` with `aria-valuenow`,
+ `aria-valuemin`, `aria-valuemax` and `aria-controls` pointing at the panel it
+ resizes.
+- Arrow keys resize by 5%, left and right in a horizontal group and up and down
+ in a vertical one.
+- `Home` and `End` push the panel to its minimum or maximum size.
+- `Enter` collapses or expands a `collapsible` panel.
+- `F6` jumps to the next handle in the group (`Shift + F6` goes back).
+- Touch dragging only claims the resize direction, so content inside a panel
+ still scrolls the other way.
+
+## Props
+
+import { TypeTable } from 'fumadocs-ui/components/type-table'
+
+### ResizablePanelGroup
+
+<TypeTable
+ type={{
+ orientation: {
+ description: 'The direction panels are laid out and resized in.',
+ type: '"horizontal" | "vertical"',
+ default: '"horizontal"',
+ },
+ defaultLayout: {
+ description:
+ 'Initial layout as a map of panel id to percentage (0-100). Use it to restore a saved layout.',
+ type: 'Record<string, number>',
+ },
+ onLayoutChange: {
+ description:
+ 'Called on every layout change, including each pointer move while dragging.',
+ type: '(layout: Layout) => void',
+ },
+ onLayoutChanged: {
+ description:
+ 'Called once a resize is finished (pointer released or key pressed). The best place to save a layout.',
+ type: '(layout: Layout, meta: { isUserInteraction: boolean; requestedLayout?: Layout }) => void',
+ },
+ disabled: {
+ description: 'Turns resizing off for the whole group.',
+ type: 'boolean',
+ default: 'false',
+ },
+ groupRef: {
+ description: 'Imperative API with `getLayout()` and `setLayout(layout)`.',
+ type: 'Ref<GroupImperativeHandle>',
+ },
+ id: {
+ description: 'Unique id of the group. Falls back to `useId`.',
+ type: 'string | number',
+ },
+ }}
+/>
+
+### ResizablePanel
+
+<TypeTable
+ type={{
+ id: {
+ description:
+ 'Unique id of the panel inside its group. Required to persist a layout.',
+ type: 'string | number',
+ },
+ defaultSize: {
+ description:
+ 'Initial size. Strings are percentages, numbers are pixels. Remaining space is shared when omitted.',
+ type: 'string | number',
+ },
+ minSize: {
+ description: 'Smallest size the panel can be resized to.',
+ type: 'string | number',
+ default: '"0%"',
+ },
+ maxSize: {
+ description: 'Largest size the panel can be resized to.',
+ type: 'string | number',
+ default: '"100%"',
+ },
+ collapsible: {
+ description: 'Lets the panel collapse when dragged below `minSize`.',
+ type: 'boolean',
+ default: 'false',
+ },
+ collapsedSize: {
+ description: 'Size of the panel when collapsed.',
+ type: 'string | number',
+ default: '"0%"',
+ },
+ disabled: {
+ description:
+ 'The panel cannot be resized, directly or by resizing a neighbour.',
+ type: 'boolean',
+ default: 'false',
+ },
+ onResize: {
+ description: 'Called with the new size whenever the panel resizes.',
+ type: '(size: { asPercentage: number; inPixels: number }) => void',
+ },
+ panelRef: {
+ description:
+ 'Imperative API with `collapse()`, `expand()`, `getSize()`, `isCollapsed()` and `resize(size)`.',
+ type: 'Ref<PanelImperativeHandle>',
+ },
+ }}
+/>
+
+### ResizableHandle
+
+<TypeTable
+ type={{
+ withHandle: {
+ description: 'Shows a visible grip in the middle of the divider.',
+ type: 'boolean',
+ default: 'false',
+ },
+ disabled: {
+ description: 'This handle cannot be used to resize its panels.',
+ type: 'boolean',
+ default: 'false',
+ },
+ disableDoubleClick: {
+ description:
+ 'Stops a double-click from resetting the panels to their default sizes.',
+ type: 'boolean',
+ default: 'false',
+ },
+ }}
+/>
+
+## API Reference
+
+[react-resizable-panels](https://react-resizable-panels.vercel.app/)
diff --git a/apps/web/content/docs/ui/roles.mdx b/apps/web/content/docs/ui/roles.mdx
index eea4c0318..7189147ff 100644
--- a/apps/web/content/docs/ui/roles.mdx
+++ b/apps/web/content/docs/ui/roles.mdx
@@ -1,6 +1,7 @@
---
title: Roles
description: Search and pick roles for an Auto Form field - one, or as many as you like.
+icon: ShieldUser
---
## Preview
diff --git a/apps/web/content/docs/ui/scroll-area.mdx b/apps/web/content/docs/ui/scroll-area.mdx
index c8032cace..09394c51a 100644
--- a/apps/web/content/docs/ui/scroll-area.mdx
+++ b/apps/web/content/docs/ui/scroll-area.mdx
@@ -1,6 +1,7 @@
---
title: Scroll Area
description: Container for scrollable content with custom scrollbars.
+icon: ScrollText
---
## Preview
diff --git a/apps/web/content/docs/ui/scroll-fade.mdx b/apps/web/content/docs/ui/scroll-fade.mdx
new file mode 100644
index 000000000..1f2b362da
--- /dev/null
+++ b/apps/web/content/docs/ui/scroll-fade.mdx
@@ -0,0 +1,157 @@
+---
+title: Scroll Fade
+description: A Tailwind CSS utility that fades the edges of a scroll container, but only on the side where more content is waiting.
+icon: Blend
+---
+
+## Preview
+
+<Preview name="scroll-fade" />
+
+## Usage
+
+Scroll Fade is a Tailwind CSS utility, not a React component, so there is
+nothing to import. It ships with the `shadcn` package, and VitNode apps already pull it
+in from `src/styles.css`:
+
+```css
+@import 'shadcn/tailwind.css';
+```
+
+Add the class to the element that actually scrolls, the one with
+`overflow-y-auto` or `overflow-x-auto`:
+
+```tsx
+<div className="scroll-fade h-64 overflow-y-auto">{/* ... */}</div>
+```
+
+The fade follows the scroll position:
+
+- At rest, the start edge is crisp and the end edge fades to hint that there is
+ more below.
+- Mid-scroll, both edges fade.
+- At the end, the end edge sharpens. You have reached the bottom, congrats.
+- If the content does not overflow, nothing fades, so you can sprinkle it on any
+ list without checking first.
+
+It works with `mask-image`, so it dissolves the content itself instead of
+painting a gradient on top. There are no colors to match, so it works on any
+background.
+
+| Class | Fades |
+| ------------------ | ---------------------------------------------------------- |
+| `scroll-fade` | Top and bottom (same as `scroll-fade-y`) |
+| `scroll-fade-y` | Top and bottom |
+| `scroll-fade-x` | Start and end of a horizontal scroller, mirrors in RTL |
+| `scroll-fade-t` | Top only |
+| `scroll-fade-b` | Bottom only |
+| `scroll-fade-s` | Inline start only, mirrors in RTL |
+| `scroll-fade-e` | Inline end only, mirrors in RTL |
+| `scroll-fade-l` | Left only, ignores the reading direction |
+| `scroll-fade-r` | Right only, ignores the reading direction |
+| `scroll-fade-none` | Nothing - turns the fade off |
+
+## Vertical
+
+<Preview name="scroll-fade-vertical" />
+
+Keep the background and border on a wrapper and put `scroll-fade` on the inner
+scroller, so the fade dissolves the list and not your card:
+
+```tsx
+<section className="bg-card rounded-xl border">
+ <h3 className="border-b px-4 py-3">Notifications</h3>
+ <ul
+ aria-label="Notifications"
+ className="scroll-fade h-64 overflow-y-auto"
+ role="region"
+ tabIndex={0}
+ >
+ {/* ... */}
+ </ul>
+</section>
+```
+
+## Horizontal
+
+Use `scroll-fade-x` for rows of chips, cards or breadcrumbs. Pair it with
+`no-scrollbar` (from the same package) when the scrollbar would only fade along
+with the content anyway:
+
+```tsx
+<ul className="scroll-fade-x no-scrollbar flex gap-2 overflow-x-auto">
+ {/* ... */}
+</ul>
+```
+
+VitNode uses exactly this in the [Attachment](/docs/ui/attachment) list and in
+the breadcrumb trail.
+
+## One edge only
+
+Reach for the edge utilities when only one side should react. `scroll-fade-b`
+is great for a chat log that grows downward, `scroll-fade-s` / `scroll-fade-e`
+for horizontal rows that need to respect RTL:
+
+```tsx
+<div className="scroll-fade-b h-80 overflow-y-auto">{/* ... */}</div>
+```
+
+## Fade size
+
+By default the fade is 12% of the container, capped at `40px`, so tall lists
+stay subtle. Set a size on the spacing scale with `scroll-fade-<number>`, or use
+any length or percentage:
+
+```tsx
+<div className="scroll-fade scroll-fade-16 overflow-y-auto" />
+<div className="scroll-fade scroll-fade-[15%] overflow-y-auto" />
+```
+
+Need opposite edges to disagree? `scroll-fade-t-<number>`,
+`scroll-fade-b-<number>`, `scroll-fade-s-<number>` and `scroll-fade-e-<number>`
+override the size for a single edge (arbitrary values work here too):
+
+```tsx
+<div className="scroll-fade scroll-fade-t-2 scroll-fade-b-8 overflow-y-auto" />
+```
+
+The fade eases in over `96px` of scrolling rather than popping in. Tweak that
+distance with the `--scroll-fade-reveal` variable:
+
+```tsx
+<div className="scroll-fade overflow-y-auto [--scroll-fade-reveal:48px]" />
+```
+
+## Turning it off
+
+`scroll-fade-none` removes the mask, which is handy with a breakpoint or a
+state variant:
+
+```tsx
+<div className="scroll-fade-x md:scroll-fade-none overflow-x-auto" />
+```
+
+## Browser support
+
+The scroll-aware part is built on CSS scroll-driven animations
+(`animation-timeline: scroll()`), with no JavaScript and no scroll listeners. Browsers
+without scroll-driven animations get a static fade on every edge the class
+covers, all the time, even at the very top. Content is never hidden. It just
+loses the "you're at the end" polish.
+
+## Accessibility
+
+- The fade is purely visual. Every item is still in the DOM and reachable. It
+ only looks softer near the edges.
+- A scroll container without focusable children cannot be scrolled with a
+ keyboard unless it can take focus. Give it `tabIndex={0}`, `role="region"`
+ and an `aria-label`, like the examples above.
+- The mask also clips focus rings drawn on the scroller itself, so show focus
+ on a wrapper instead, for example `has-focus-visible:ring-3` on the parent.
+- Don't fade so much that the first or last item becomes hard to read; the
+ default size is a safe bet.
+
+## Reference
+
+[shadcn/ui - scroll-fade](https://ui.shadcn.com/docs/utils/scroll-fade)
diff --git a/apps/web/content/docs/ui/select.mdx b/apps/web/content/docs/ui/select.mdx
index 860b868df..1ead2102c 100644
--- a/apps/web/content/docs/ui/select.mdx
+++ b/apps/web/content/docs/ui/select.mdx
@@ -1,6 +1,7 @@
---
title: Select
description: Choose an option from a list of options.
+icon: SquareChevronDown
---
## Preview
diff --git a/apps/web/content/docs/ui/separator.mdx b/apps/web/content/docs/ui/separator.mdx
index 1d0ed556d..ee971fd9a 100644
--- a/apps/web/content/docs/ui/separator.mdx
+++ b/apps/web/content/docs/ui/separator.mdx
@@ -1,6 +1,7 @@
---
title: Separator
description: A simple horizontal line to separate content.
+icon: SeparatorHorizontal
---
## Preview
diff --git a/apps/web/content/docs/ui/sheet.mdx b/apps/web/content/docs/ui/sheet.mdx
index 03103f2f6..96e8c883a 100644
--- a/apps/web/content/docs/ui/sheet.mdx
+++ b/apps/web/content/docs/ui/sheet.mdx
@@ -1,6 +1,7 @@
---
title: Sheet
description: A sheet component for displaying additional content in a modal-like overlay.
+icon: PanelRight
---
## Preview
diff --git a/apps/web/content/docs/ui/shimmer.mdx b/apps/web/content/docs/ui/shimmer.mdx
new file mode 100644
index 000000000..856355fb5
--- /dev/null
+++ b/apps/web/content/docs/ui/shimmer.mdx
@@ -0,0 +1,157 @@
+---
+title: Shimmer
+description: A Tailwind CSS utility that sweeps a soft highlight across text, the universal sign for "hang on, I'm working on it".
+icon: Sparkles
+---
+
+## Preview
+
+<Preview name="shimmer" />
+
+## Usage
+
+Shimmer is a Tailwind CSS utility, not a React component, so there is nothing
+to import. It ships with the `shadcn` package, and VitNode apps already pull it in
+from `src/styles.css`:
+
+```css
+@import 'shadcn/tailwind.css';
+```
+
+Add it to any text element:
+
+```tsx
+<p className="shimmer text-muted-foreground">Generating response...</p>
+```
+
+The highlight is derived from `currentColor`, so it works on muted text, brand
+colors and everything in between. In dark mode it brightens on its own to stay
+visible. It's pure CSS. The text is painted with `background-clip: text` and
+the highlight loops across it every two seconds.
+
+| Class | What it does |
+| ------------------------- | -------------------------------------------------- |
+| `shimmer` | Turns the effect on |
+| `shimmer-color-<color>` | Sets the highlight color, opacity modifier allowed |
+| `shimmer-duration-<ms>` | Length of one sweep in milliseconds (default 2000) |
+| `shimmer-spread-<number>` | Width of the highlight band on the spacing scale |
+| `shimmer-angle-<number>` | Tilt of the band in degrees (default 20) |
+| `shimmer-reverse` | Sweeps the other way |
+| `shimmer-once` | Plays a single sweep instead of looping |
+| `shimmer-none` | Renders the text normally |
+
+## With a status line
+
+Shimmer pairs nicely with a `Spinner` and the [Marker](/docs/ui/marker)
+component for "the assistant is busy" moments:
+
+```tsx
+import {
+ Marker,
+ MarkerContent,
+ MarkerIcon,
+} from '@vitnode/core/components/ui/marker'
+import { Spinner } from '@vitnode/core/components/ui/spinner'
+
+<Marker role="status">
+ <MarkerIcon>
+ <Spinner />
+ </MarkerIcon>
+ <MarkerContent className="shimmer">Thinking...</MarkerContent>
+</Marker>
+```
+
+## Variants
+
+<Preview name="shimmer-variants" />
+
+### Color
+
+Use any theme color, with an optional opacity modifier, or an arbitrary value:
+
+```tsx
+<p className="shimmer shimmer-color-success">Generating response...</p>
+<p className="shimmer shimmer-color-success/60">Generating response...</p>
+<p className="shimmer shimmer-color-[#378ADD]">Generating response...</p>
+```
+
+### Duration
+
+```tsx
+<p className="shimmer shimmer-duration-1000">In a hurry...</p>
+```
+
+### Spread
+
+The band is `calc(3ch + 40px)` wide by default, so it scales with the font
+size. Set it on the spacing scale or with any length or percentage:
+
+```tsx
+<p className="shimmer shimmer-spread-24">Generating response...</p>
+<p className="shimmer shimmer-spread-[30%]">Generating response...</p>
+```
+
+### Angle
+
+```tsx
+<p className="shimmer shimmer-angle-45">Generating response...</p>
+```
+
+### Reverse
+
+The sweep follows the reading direction out of the box (right to left in RTL).
+`shimmer-reverse` flips it manually:
+
+```tsx
+<p className="shimmer shimmer-reverse">Generating response...</p>
+```
+
+### Play once
+
+`shimmer-once` plays a single sweep, a nice little "done!" when streaming
+finishes. Combine it with `shimmer-duration-<ms>` to set how long it takes, and
+change the element's `key` to play it again:
+
+```tsx
+<p className="shimmer shimmer-once shimmer-duration-1100" key={replays}>
+ Response generated.
+</p>
+```
+
+### Turning it off
+
+`shimmer-none` works in any class order, so it plays well with breakpoints and
+state variants:
+
+```tsx
+<p className="shimmer md:shimmer-none">Generating response...</p>
+```
+
+## Browser support
+
+Shimmer uses relative color syntax and `color-mix()`, which every current
+browser supports. In older browsers the highlight gradient can be dropped and
+the text may render transparent. If you need to support them, apply the class
+only where it works:
+
+```tsx
+<p className="supports-[color:oklch(from_white_l_c_h)]:shimmer">
+ Generating response...
+</p>
+```
+
+## Accessibility
+
+- With reduced motion turned on, the animation stops and the text renders
+ normally, with no setup needed. That rule targets the plain `shimmer` class, so
+ if you apply it through a variant (`group-hover:shimmer`), add
+ `motion-reduce:shimmer-none` yourself.
+- Shimmer is decoration, not a loading signal. Screen readers and reduced-motion
+ users never see it, so pair it with real text inside `role="status"`, like
+ "Thinking..." in the examples above.
+- Keep it on short status text. A whole paragraph sparkling away is more disco
+ than progress.
+
+## Reference
+
+[shadcn/ui - shimmer](https://ui.shadcn.com/docs/utils/shimmer)
diff --git a/apps/web/content/docs/ui/skeleton.mdx b/apps/web/content/docs/ui/skeleton.mdx
index a3818a8f9..70a4461e6 100644
--- a/apps/web/content/docs/ui/skeleton.mdx
+++ b/apps/web/content/docs/ui/skeleton.mdx
@@ -1,6 +1,7 @@
---
title: Skeleton
description: A placeholder component for loading states.
+icon: SquareDashed
---
## Preview
diff --git a/apps/web/content/docs/ui/sonner.mdx b/apps/web/content/docs/ui/sonner.mdx
deleted file mode 100644
index 102b459bf..000000000
--- a/apps/web/content/docs/ui/sonner.mdx
+++ /dev/null
@@ -1,44 +0,0 @@
----
-title: Sonner
-description: A toast notification component for displaying messages to users.
----
-
-## Preview
-
-<Preview name="sonner" />
-
-## Usage
-
-```ts
-import { toast } from 'sonner';
-```
-
-```ts
-toast('Event has been created', {
- description: 'Sunday, December 03, 2023 at 9:00 AM',
- action: {
- label: 'Undo',
- onClick: () => console.log('Undo'),
- },
-});
-```
-
-```ts
-toast.error('An error occurred.');
-```
-
-```ts
-toast.success('Operation was successful.');
-```
-
-```ts
-toast.info('Here is some information.');
-```
-
-```ts
-toast.warning('This is a warning.');
-```
-
-## Documentation
-
-[Sonner Documentation](https://sonner.emilkowal.ski/)
diff --git a/apps/web/content/docs/ui/spinner.mdx b/apps/web/content/docs/ui/spinner.mdx
new file mode 100644
index 000000000..4cbe5502d
--- /dev/null
+++ b/apps/web/content/docs/ui/spinner.mdx
@@ -0,0 +1,129 @@
+---
+title: Spinner
+description: A little spinning circle that says "hold on, it's coming". It comes in four sizes and any colour.
+icon: Loader
+---
+
+## Preview
+
+<Preview name="spinner" />
+
+## Usage
+
+```ts
+import { Spinner } from '@vitnode/core/components/ui/spinner'
+```
+
+```tsx
+<Spinner />
+```
+
+## Sizes
+
+| Size | Pixels | Good for |
+| --------- | ------ | --------------------------------- |
+| `sm` | 12 | Badges, dense rows |
+| `default` | 16 | Buttons, inputs, inline with text |
+| `lg` | 24 | Cards and panels |
+| `xl` | 40 | A whole page or section loading |
+
+```tsx
+<Spinner size="xl" />
+```
+
+It takes the text colour of its surroundings, so `className="text-primary"`
+(or `text-success`, `text-destructive`...) is all a colour change needs.
+
+## In buttons
+
+<Preview name="spinner-buttons" />
+
+For a button that's busy, prefer `isLoading` on the [Button](/docs/ui/button).
+It swaps the label for a spinner, disables the button and announces "Loading".
+Put a `Spinner` in by hand when you want to keep the label visible:
+
+```tsx
+<Button disabled>
+ <Spinner aria-hidden="true" />
+ Uploading...
+</Button>
+```
+
+## In badges, inputs and text
+
+<Preview name="spinner-inline" />
+
+```tsx
+<Badge variant="secondary">
+ <Spinner aria-hidden="true" />
+ Syncing
+</Badge>
+
+<InputGroup>
+ <InputGroupInput aria-label="Search" />
+ <InputGroupAddon align="inline-end">
+ <Spinner aria-label="Searching" />
+ </InputGroupAddon>
+</InputGroup>
+```
+
+## Loading states
+
+<Preview name="spinner-states" />
+
+Inside an [Empty](/docs/ui/empty) state, or laid over a card that's fetching
+fresh data:
+
+```tsx
+<Card aria-busy="true" className="relative overflow-hidden">
+ ...
+ <div className="bg-background/70 absolute inset-0 flex items-center justify-center backdrop-blur-xs">
+ <Spinner size="lg" />
+ </div>
+</Card>
+```
+
+Showing a whole section while it loads? Center an `xl` spinner. VitNode does
+the same for Suspense fallbacks across the AdminCP:
+
+```tsx
+<Suspense
+ fallback={
+ <div className="flex items-center justify-center">
+ <Spinner size="xl" />
+ </div>
+ }
+>
+ <SlowThing />
+</Suspense>
+```
+
+If you know roughly what's coming, a [Skeleton](/docs/ui/skeleton) of that
+shape usually feels faster than a spinner.
+
+## Accessibility
+
+- A spinner is a `status` and is labelled "Loading" in the user's language.
+ Pass `aria-label` for something more specific, like "Searching".
+- When text right next to it already says what's happening ("Uploading..."), or
+ the button announces it, hide the spinner with `aria-hidden="true"` so screen
+ readers don't hear it twice.
+- Mark the container that's loading with `aria-busy="true"`.
+
+## Props
+
+import { TypeTable } from 'fumadocs-ui/components/type-table'
+
+<TypeTable
+ type={{
+ size: {
+ description: 'How big the spinner is.',
+ type: '"sm" | "default" | "lg" | "xl"',
+ default: '"default"',
+ },
+ 'aria-label': {
+ description: 'What is loading. Defaults to "Loading", translated.',
+ type: 'string',
+ },
+ }}
+/>
diff --git a/apps/web/content/docs/ui/switch.mdx b/apps/web/content/docs/ui/switch.mdx
index 9ef16fc14..98e354fe9 100644
--- a/apps/web/content/docs/ui/switch.mdx
+++ b/apps/web/content/docs/ui/switch.mdx
@@ -1,6 +1,7 @@
---
title: Switch
description: Toggle between checked and unchecked states.
+icon: ToggleRight
---
## Preview
diff --git a/apps/web/content/docs/ui/tabs.mdx b/apps/web/content/docs/ui/tabs.mdx
index 39f834db9..afcac9d6f 100644
--- a/apps/web/content/docs/ui/tabs.mdx
+++ b/apps/web/content/docs/ui/tabs.mdx
@@ -1,6 +1,7 @@
---
title: Tabs
description: Switch between panels of content with an indicator that slides and panels that follow.
+icon: PanelsTopLeft
---
## Preview
diff --git a/apps/web/content/docs/ui/textarea.mdx b/apps/web/content/docs/ui/textarea.mdx
index 41ebf0345..c8bd2ad18 100644
--- a/apps/web/content/docs/ui/textarea.mdx
+++ b/apps/web/content/docs/ui/textarea.mdx
@@ -1,6 +1,7 @@
---
title: Textarea
description: Input for multi-line text input.
+icon: NotepadText
---
## Preview
diff --git a/apps/web/content/docs/ui/toast.mdx b/apps/web/content/docs/ui/toast.mdx
new file mode 100644
index 000000000..622a4672d
--- /dev/null
+++ b/apps/web/content/docs/ui/toast.mdx
@@ -0,0 +1,165 @@
+---
+title: Toast
+description: Short, friendly notifications that pop into the top-right corner, with five colours, icons, avatars and actions.
+icon: BellRing
+---
+
+## Preview
+
+<Preview name="toast" />
+
+## Usage
+
+VitNode already mounts the toaster for you, so all you need is the `toast`
+function from [Sonner](https://sonner.emilkowal.ski/):
+
+```ts
+import { toast } from 'sonner'
+```
+
+```ts
+toast('Event has been created', {
+ description: 'Sunday, December 03, 2023 at 9:00 AM',
+})
+```
+
+## Variants
+
+Each variant tints the icon, the title and the action button. The card
+itself stays neutral, so a toast never shouts louder than it has to.
+
+```ts
+toast('Event has been created') // default
+toast.info('You have 2 credits left') // primary colour
+toast.success('Your plan has been upgraded')
+toast.warning('You are running low on storage')
+toast.error('Storage is full')
+```
+
+Pick the variant by what happened, not by the colour you fancy:
+
+- `success` when something finished the way the user hoped.
+- `info` for things worth knowing, nothing to worry about.
+- `warning` when nothing broke yet, but the user should take a look.
+- `error` when it failed. The description should say what to do next.
+
+After a create, edit or delete, show a toast with a `description` so people
+know exactly what changed.
+
+## With an action
+
+```ts
+toast.error('Storage is full', {
+ description: 'Remove some files to free up space.',
+ action: {
+ label: 'Remove',
+ onClick: () => openFileManager(),
+ },
+})
+```
+
+The action button takes the variant's colour too. Add `cancel` for a second,
+quieter button.
+
+## With an avatar
+
+Swap the icon for a picture with `ToastAvatar`. It suits anything a person
+did, like an invite, a mention or a new message. Without a `src`, or while the
+image is still loading, it shows the first letter of `alt`.
+
+```ts
+import { ToastAvatar } from '@vitnode/core/components/ui/sonner'
+```
+
+```tsx
+toast('Ada Lovelace invited you', {
+ description: 'Join the "Docs writers" group to start editing.',
+ icon: <ToastAvatar alt="Ada Lovelace" src={user.avatarUrl} />,
+})
+```
+
+Any other element works as `icon` as well, such as a custom Lucide icon, an emoji or
+your own badge.
+
+## Message with actions
+
+For anything that reads like a message, such as a reply, a mention or an invite, use
+`ToastMessage` with `toast.custom`. It lays out an avatar, the sender, a
+timestamp, the text and a row of buttons underneath.
+
+```ts
+import { ToastMessage } from '@vitnode/core/components/ui/sonner'
+```
+
+```tsx
+toast.custom(
+ id => (
+ <ToastMessage
+ actions={[
+ { label: 'Dismiss', onClick: () => toast.dismiss(id), variant: 'outline' },
+ { label: 'Reply', onClick: () => openReply(message) },
+ ]}
+ avatar={{ alt: 'Alex Johnson', src: user.avatarUrl }}
+ description="Hey! I've finished the design review."
+ time="2m ago"
+ title="Alex Johnson"
+ />
+ ),
+ { duration: 10000 },
+)
+```
+
+Give message toasts a longer `duration` than the usual few seconds. People
+need time to read, and to decide whether to reply.
+
+## Loading and promises
+
+`toast.promise` shows a spinner while the promise runs, then swaps to the
+success or error variant on its own:
+
+```ts
+toast.promise(publishArticle(), {
+ loading: 'Publishing your article...',
+ success: 'Article published',
+ error: 'Could not publish the article',
+})
+```
+
+## Placement
+
+Toasts show up in the **top-right** corner. To move them, pass `toaster` to
+`VitNodeProviders`:
+
+```tsx
+<VitNodeProviders config={config} toaster={{ position: 'bottom-center' }}>
+ {children}
+</VitNodeProviders>
+```
+
+Available positions: `top-left`, `top-center`, `top-right`, `bottom-left`,
+`bottom-center` and `bottom-right`. On phones the toast stretches across the
+screen, whatever you choose.
+
+## Custom styles
+
+Pass `classNames` to a single toast to restyle it. Your classes are merged with
+the defaults, not swapped for them:
+
+```ts
+toast('Saved', {
+ classNames: { title: 'font-semibold' },
+})
+```
+
+## Accessibility
+
+- Toasts are announced to screen readers through a polite live region.
+- Hovering a toast pauses its timer, so nobody has to race it. Keyboard users
+ can jump to the toasts with <kbd>Alt</kbd> + <kbd>T</kbd>.
+- The close button appears on hover and keyboard focus, and is always visible on
+ touch screens.
+- Colour is never the only signal, since every variant has its own icon too.
+
+## Documentation
+
+[Sonner Documentation](https://sonner.emilkowal.ski/)
diff --git a/apps/web/content/docs/ui/toggle-group.mdx b/apps/web/content/docs/ui/toggle-group.mdx
index f18b8e6e1..c1e9f1d71 100644
--- a/apps/web/content/docs/ui/toggle-group.mdx
+++ b/apps/web/content/docs/ui/toggle-group.mdx
@@ -1,6 +1,7 @@
---
title: Toggle Group
description: A toggle group component for selecting multiple options.
+icon: TextAlignCenter
---
## Preview
diff --git a/apps/web/content/docs/ui/toggle.mdx b/apps/web/content/docs/ui/toggle.mdx
index 979fb9342..503986456 100644
--- a/apps/web/content/docs/ui/toggle.mdx
+++ b/apps/web/content/docs/ui/toggle.mdx
@@ -1,6 +1,7 @@
---
title: Toggle
description: A toggle component for switching between two states.
+icon: Bold
---
## Preview
diff --git a/apps/web/content/docs/ui/tooltip.mdx b/apps/web/content/docs/ui/tooltip.mdx
index 0349c8ba9..297888aca 100644
--- a/apps/web/content/docs/ui/tooltip.mdx
+++ b/apps/web/content/docs/ui/tooltip.mdx
@@ -1,6 +1,7 @@
---
title: Tooltip
-description: A tooltip component for displaying additional information on hover or focus.
+description: A small hint that shows extra information on hover or focus.
+icon: MessageCircleMore
---
## Preview
@@ -23,9 +24,9 @@ import { Tooltip, TooltipContent, TooltipTrigger } from "@vitnode/core/component
</Tooltip>
```
-### Faster Tooltips
+### Shorter tooltips
-If you don't need custom props for components like `TooltipTrigger` or `TooltipContent`, you can use the `TooltipWithContent` component to enable faster tooltips.
+If you don't need custom props on `TooltipTrigger` or `TooltipContent`, `TooltipWithContent` does the same job in one component.
```ts
import { Button } from "@vitnode/core/components/ui/button";
@@ -41,6 +42,49 @@ import { PlayIcon } from "lucide-react";
</TooltipWithContent>
```
+## Group
+
+<Preview name="tooltip-group" />
+
+Got a toolbar full of icon buttons? Wrap it in `TooltipGroup` and use
+`TooltipGroupTrigger` for each button. They all share one tooltip, so moving
+from button to button glides it over instead of closing and opening it again
+every time. It resizes to fit the new text, and the text slides in from the
+direction you came from.
+
+```ts
+import {
+ TooltipGroup,
+ TooltipGroupTrigger,
+} from "@vitnode/core/components/ui/tooltip";
+```
+
+```tsx
+<TooltipGroup>
+ <div aria-label="Formatting" role="toolbar">
+ <TooltipGroupTrigger
+ content="Bold"
+ render={<Button aria-label="Bold" size="icon-sm" variant="ghost" />}
+ >
+ <BoldIcon />
+ </TooltipGroupTrigger>
+ <TooltipGroupTrigger
+ content="Italic"
+ render={<Button aria-label="Italic" size="icon-sm" variant="ghost" />}
+ >
+ <ItalicIcon />
+ </TooltipGroupTrigger>
+ </div>
+</TooltipGroup>
+```
+
+`TooltipGroup` takes `side`, `sideOffset` and `align`, just like
+`TooltipContent`. With reduced motion turned on, the tooltip jumps straight to
+the next button instead of gliding.
+
+A tooltip is a hint, not a label, so icon buttons still need their own
+`aria-label`, as above.
+
## API Reference
[Base UI - Tooltip](https://base-ui.com/react/components/tooltip)
diff --git a/apps/web/content/docs/ui/user.mdx b/apps/web/content/docs/ui/user.mdx
index 4f17d90cd..7039b1e80 100644
--- a/apps/web/content/docs/ui/user.mdx
+++ b/apps/web/content/docs/ui/user.mdx
@@ -1,6 +1,7 @@
---
title: User
description: Pick a person by name, with their avatar, for an Auto Form field.
+icon: CircleUser
---
## Preview
diff --git a/apps/web/package.json b/apps/web/package.json
index f2e32c251..950168916 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -42,6 +42,7 @@
"nitro": "3.0.260903-beta",
"react": "^19.3.0",
"react-dom": "^19.3.0",
+ "recharts": "^3.10.1",
"shadcn": "^4.21.0",
"sonner": "^2.0.8",
"tailwindcss": "^4.3.3",
diff --git a/apps/web/src/docs/examples/alert-dialog.tsx b/apps/web/src/docs/examples/alert-dialog.tsx
index cdd2190a5..5c89d87b8 100644
--- a/apps/web/src/docs/examples/alert-dialog.tsx
+++ b/apps/web/src/docs/examples/alert-dialog.tsx
@@ -15,11 +15,11 @@ export default function AlertDialogExample() {
return (
<AlertDialog>
<AlertDialogTrigger
- render={<Button variant="outline">Show Dialog</Button>}
+ render={<Button variant="destructive">Delete account</Button>}
/>
<AlertDialogContent>
<AlertDialogHeader>
- <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
+ <AlertDialogTitle>Delete your account?</AlertDialogTitle>
<AlertDialogDescription>
This action cannot be undone. This will permanently delete your
account and remove your data from our servers.
@@ -27,7 +27,9 @@ export default function AlertDialogExample() {
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel>Cancel</AlertDialogCancel>
- <AlertDialogAction>Continue</AlertDialogAction>
+ <AlertDialogAction variant="destructive">
+ Delete account
+ </AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>
diff --git a/apps/web/src/docs/examples/aspect-ratio.tsx b/apps/web/src/docs/examples/aspect-ratio.tsx
new file mode 100644
index 000000000..4bc40c92e
--- /dev/null
+++ b/apps/web/src/docs/examples/aspect-ratio.tsx
@@ -0,0 +1,33 @@
+import { AspectRatio } from '@vitnode/core/components/ui/aspect-ratio'
+
+import adminDashboardDark from '@/site/home/assets/admin-dashboard-dark-800.webp'
+import adminDashboardLight from '@/site/home/assets/admin-dashboard-light-800.webp'
+
+export default function AspectRatioExample() {
+ return (
+ <figure className="flex w-full flex-col gap-2">
+ <AspectRatio
+ className="bg-muted overflow-hidden rounded-lg border"
+ ratio={16 / 9}
+ >
+ <img
+ alt="VitNode AdminCP dashboard"
+ className="size-full object-cover object-top dark:hidden"
+ decoding="async"
+ loading="lazy"
+ src={adminDashboardLight}
+ />
+ <img
+ alt="VitNode AdminCP dashboard"
+ className="hidden size-full object-cover object-top dark:block"
+ decoding="async"
+ loading="lazy"
+ src={adminDashboardDark}
+ />
+ </AspectRatio>
+ <figcaption className="text-muted-foreground text-center text-sm leading-relaxed">
+ Always 16:9, however wide the screen gets.
+ </figcaption>
+ </figure>
+ )
+}
diff --git a/apps/web/src/docs/examples/attachment-auto-form.tsx b/apps/web/src/docs/examples/attachment-auto-form.tsx
new file mode 100644
index 000000000..a603a2d4e
--- /dev/null
+++ b/apps/web/src/docs/examples/attachment-auto-form.tsx
@@ -0,0 +1,70 @@
+import type { AutoFormFileValue } from '@vitnode/core/components/form/fields/file'
+
+import { AutoForm } from '@vitnode/core/components/form/auto-form'
+import { AutoFormFile } from '@vitnode/core/components/form/fields/file'
+import { AutoFormFiles } from '@vitnode/core/components/form/fields/files'
+import { toast } from 'sonner'
+import { z } from 'zod'
+
+const MAX_BYTES = 5 * 1024 * 1024
+
+let nextFileId = 1
+
+const fakeUpload = async (file: File): Promise<AutoFormFileValue> => {
+ await new Promise((resolve) => {
+ setTimeout(resolve, 1200)
+ })
+
+ return {
+ id: nextFileId++,
+ mimeType: file.type,
+ name: file.name,
+ size: file.size,
+ url: URL.createObjectURL(file),
+ }
+}
+
+export default function AttachmentAutoFormExample() {
+ const formSchema = z.object({
+ avatar: z.number().nullable().default(null),
+ gallery: z.array(z.number()).max(4).default([]),
+ })
+
+ return (
+ <AutoForm
+ fields={[
+ {
+ id: 'avatar',
+ component: (props) => (
+ <AutoFormFile
+ {...props}
+ allowedExtensions={['.png', '.jpg', '.webp']}
+ label="Avatar"
+ maxBytes={MAX_BYTES}
+ onUpload={fakeUpload}
+ />
+ ),
+ },
+ {
+ id: 'gallery',
+ component: (props) => (
+ <AutoFormFiles
+ {...props}
+ allowedExtensions={['.png', '.jpg', '.webp']}
+ label="Gallery"
+ maxBytes={MAX_BYTES}
+ maxItems={4}
+ onUpload={fakeUpload}
+ />
+ ),
+ },
+ ]}
+ formSchema={formSchema}
+ onSubmit={(values) => {
+ toast.success('Files saved', {
+ description: `Avatar #${values.avatar ?? 'none'}, gallery: ${values.gallery.length} file(s).`,
+ })
+ }}
+ />
+ )
+}
diff --git a/apps/web/src/docs/examples/attachment.tsx b/apps/web/src/docs/examples/attachment.tsx
new file mode 100644
index 000000000..7e098524e
--- /dev/null
+++ b/apps/web/src/docs/examples/attachment.tsx
@@ -0,0 +1,86 @@
+import {
+ Attachment,
+ AttachmentAction,
+ AttachmentActions,
+ AttachmentContent,
+ AttachmentDescription,
+ AttachmentGroup,
+ AttachmentMedia,
+ AttachmentTitle,
+} from '@vitnode/core/components/ui/attachment'
+import { Spinner } from '@vitnode/core/components/ui/spinner'
+import {
+ FileTextIcon,
+ RotateCcwIcon,
+ TriangleAlertIcon,
+ XIcon,
+} from 'lucide-react'
+
+import adminDashboardLight from '@/site/home/assets/admin-dashboard-light-800.webp'
+
+export default function AttachmentExample() {
+ return (
+ <div className="flex w-full flex-col gap-6">
+ <div className="flex flex-col gap-3">
+ <Attachment>
+ <AttachmentMedia variant="image">
+ <img alt="" src={adminDashboardLight} />
+ </AttachmentMedia>
+ <AttachmentContent>
+ <AttachmentTitle>dashboard.webp</AttachmentTitle>
+ <AttachmentDescription>48 KB</AttachmentDescription>
+ </AttachmentContent>
+ <AttachmentActions>
+ <AttachmentAction aria-label="Remove dashboard.webp">
+ <XIcon />
+ </AttachmentAction>
+ </AttachmentActions>
+ </Attachment>
+
+ <Attachment state="uploading">
+ <AttachmentMedia>
+ <FileTextIcon />
+ </AttachmentMedia>
+ <AttachmentContent>
+ <AttachmentTitle>release-notes.pdf</AttachmentTitle>
+ <AttachmentDescription>Uploading... · 1.2 MB</AttachmentDescription>
+ </AttachmentContent>
+ <AttachmentActions>
+ <Spinner aria-label="Uploading" className="mx-1.5" />
+ </AttachmentActions>
+ </Attachment>
+
+ <Attachment state="error">
+ <AttachmentMedia>
+ <TriangleAlertIcon />
+ </AttachmentMedia>
+ <AttachmentContent>
+ <AttachmentTitle>holiday-video.mov</AttachmentTitle>
+ <AttachmentDescription>
+ That file is 2 GB. The maximum is 50 MB.
+ </AttachmentDescription>
+ </AttachmentContent>
+ <AttachmentActions>
+ <AttachmentAction aria-label="Retry holiday-video.mov">
+ <RotateCcwIcon />
+ </AttachmentAction>
+ </AttachmentActions>
+ </Attachment>
+ </div>
+
+ <AttachmentGroup>
+ {['cover.webp', 'gallery-1.webp', 'gallery-2.webp'].map((name) => (
+ <Attachment key={name} orientation="vertical">
+ <AttachmentMedia variant="image">
+ <img alt="" src={adminDashboardLight} />
+ </AttachmentMedia>
+ <AttachmentContent>
+ <AttachmentTitle>{name}</AttachmentTitle>
+ <AttachmentDescription>48 KB</AttachmentDescription>
+ </AttachmentContent>
+ </Attachment>
+ ))}
+ </AttachmentGroup>
+ </div>
+ )
+}
diff --git a/apps/web/src/docs/examples/avatar.tsx b/apps/web/src/docs/examples/avatar.tsx
new file mode 100644
index 000000000..8f00e7f3f
--- /dev/null
+++ b/apps/web/src/docs/examples/avatar.tsx
@@ -0,0 +1,52 @@
+import {
+ Avatar,
+ AvatarBadge,
+ AvatarFallback,
+ AvatarGroup,
+ AvatarGroupCount,
+ AvatarGroupItem,
+ AvatarImage,
+} from '@vitnode/core/components/ui/avatar'
+
+const team = [
+ { initials: 'AL', name: 'Ada Lovelace' },
+ { initials: 'GH', name: 'Grace Hopper' },
+ { initials: 'AT', name: 'Alan Turing' },
+ { initials: 'KJ', name: 'Katherine Johnson' },
+]
+
+export default function AvatarExample() {
+ return (
+ <div className="not-prose flex flex-col items-center gap-8">
+ <div className="flex items-center gap-4">
+ <Avatar size="sm">
+ <AvatarImage alt="VitNode" src="/logo_vitnode_icon.svg" />
+ <AvatarFallback>VN</AvatarFallback>
+ </Avatar>
+ <Avatar>
+ <AvatarImage alt="VitNode" src="/logo_vitnode_icon.svg" />
+ <AvatarFallback>VN</AvatarFallback>
+ </Avatar>
+ <Avatar size="lg">
+ <AvatarImage alt="VitNode" src="/logo_vitnode_icon.svg" />
+ <AvatarFallback>VN</AvatarFallback>
+ <AvatarBadge className="bg-success" />
+ </Avatar>
+ <Avatar size="lg">
+ <AvatarFallback>AL</AvatarFallback>
+ </Avatar>
+ </div>
+
+ <AvatarGroup>
+ {team.map((person) => (
+ <AvatarGroupItem key={person.name} label={person.name}>
+ <Avatar size="lg">
+ <AvatarFallback>{person.initials}</AvatarFallback>
+ </Avatar>
+ </AvatarGroupItem>
+ ))}
+ <AvatarGroupCount>+3</AvatarGroupCount>
+ </AvatarGroup>
+ </div>
+ )
+}
diff --git a/apps/web/src/docs/examples/bubble.tsx b/apps/web/src/docs/examples/bubble.tsx
new file mode 100644
index 000000000..d36524381
--- /dev/null
+++ b/apps/web/src/docs/examples/bubble.tsx
@@ -0,0 +1,74 @@
+import {
+ Bubble,
+ BubbleContent,
+ BubbleGroup,
+ BubbleReactions,
+} from '@vitnode/core/components/ui/bubble'
+import { Card } from '@vitnode/core/components/ui/card'
+import { toast } from 'sonner'
+
+const suggestions = ['Show me the plugin docs', 'Surprise me']
+
+export default function BubbleExample() {
+ return (
+ <Card
+ aria-label="Chat with the VitNode assistant"
+ className="flex w-full flex-col gap-8 px-4 py-8 sm:px-6"
+ role="log"
+ >
+ <Bubble align="end">
+ <BubbleContent>Hey! Can VitNode do chat bubbles now?</BubbleContent>
+ </Bubble>
+
+ <BubbleGroup>
+ <Bubble variant="muted">
+ <BubbleContent>It sure can.</BubbleContent>
+ </Bubble>
+ <Bubble variant="muted">
+ <BubbleContent>
+ Seven variants, both sides of the conversation, and reactions that
+ hang off the edge like a sticky note.
+ </BubbleContent>
+ <BubbleReactions
+ aria-label="Reactions: party popper, fire"
+ role="img"
+ >
+ <span>🎉</span>
+ <span>🔥</span>
+ </BubbleReactions>
+ </Bubble>
+ </BubbleGroup>
+
+ <Bubble align="end" variant="tinted">
+ <BubbleContent>Okay, I am impressed. What else?</BubbleContent>
+ </Bubble>
+
+ <BubbleGroup>
+ {suggestions.map((suggestion) => (
+ <Bubble key={suggestion} variant="outline">
+ <BubbleContent
+ render={
+ <button
+ onClick={() =>
+ toast('You picked a suggestion', {
+ description: suggestion,
+ })
+ }
+ type="button"
+ />
+ }
+ >
+ {suggestion}
+ </BubbleContent>
+ </Bubble>
+ ))}
+ </BubbleGroup>
+
+ <Bubble variant="destructive">
+ <BubbleContent>
+ Could not load the joke of the day. The joke was too good to send.
+ </BubbleContent>
+ </Bubble>
+ </Card>
+ )
+}
diff --git a/apps/web/src/docs/examples/button-group.tsx b/apps/web/src/docs/examples/button-group.tsx
new file mode 100644
index 000000000..2dda8eebf
--- /dev/null
+++ b/apps/web/src/docs/examples/button-group.tsx
@@ -0,0 +1,163 @@
+import { Button } from '@vitnode/core/components/ui/button'
+import {
+ ButtonGroup,
+ ButtonGroupSeparator,
+ ButtonGroupText,
+} from '@vitnode/core/components/ui/button-group'
+import { Card } from '@vitnode/core/components/ui/card'
+import {
+ DropdownMenu,
+ DropdownMenuContent,
+ DropdownMenuGroup,
+ DropdownMenuItem,
+ DropdownMenuSeparator,
+ DropdownMenuTrigger,
+} from '@vitnode/core/components/ui/dropdown-menu'
+import { Input } from '@vitnode/core/components/ui/input'
+import {
+ AlignCenter,
+ AlignLeft,
+ AlignRight,
+ Archive,
+ ArrowLeft,
+ CalendarClock,
+ ChevronDown,
+ Clock,
+ Flag,
+ Minus,
+ Plus,
+ Search,
+ Trash2,
+ ZoomIn,
+ ZoomOut,
+} from 'lucide-react'
+import React from 'react'
+
+const QuantityStepper = () => {
+ const [quantity, setQuantity] = React.useState(1)
+
+ return (
+ <ButtonGroup aria-label="Quantity">
+ <Button
+ aria-label="Decrease quantity"
+ disabled={quantity <= 1}
+ onClick={() => setQuantity((value) => value - 1)}
+ size="icon"
+ variant="outline"
+ >
+ <Minus />
+ </Button>
+ <ButtonGroupText
+ aria-live="polite"
+ className="bg-card min-w-12 justify-center tabular-nums"
+ >
+ {quantity}
+ </ButtonGroupText>
+ <Button
+ aria-label="Increase quantity"
+ disabled={quantity >= 9}
+ onClick={() => setQuantity((value) => value + 1)}
+ size="icon"
+ variant="outline"
+ >
+ <Plus />
+ </Button>
+ </ButtonGroup>
+ )
+}
+
+export default function ButtonGroupExample() {
+ return (
+ <Card className="flex w-full flex-col items-center gap-6 p-6 md:p-8">
+ <ButtonGroup
+ aria-label="Message actions"
+ className="flex-wrap justify-center"
+ >
+ <ButtonGroup>
+ <Button aria-label="Go back" size="icon" variant="outline">
+ <ArrowLeft />
+ </Button>
+ </ButtonGroup>
+ <ButtonGroup>
+ <Button variant="outline">
+ <Archive data-icon="inline-start" />
+ Archive
+ </Button>
+ <Button aria-label="Report" size="icon" variant="outline">
+ <Flag />
+ </Button>
+ </ButtonGroup>
+ <ButtonGroup>
+ <Button variant="outline">
+ <Clock data-icon="inline-start" />
+ Snooze
+ </Button>
+ <DropdownMenu>
+ <DropdownMenuTrigger
+ render={
+ <Button
+ aria-label="More snooze options"
+ size="icon"
+ variant="outline"
+ />
+ }
+ >
+ <ChevronDown />
+ </DropdownMenuTrigger>
+ <DropdownMenuContent align="end" className="w-48">
+ <DropdownMenuGroup>
+ <DropdownMenuItem>
+ <Clock />
+ Later today
+ </DropdownMenuItem>
+ <DropdownMenuItem>
+ <CalendarClock />
+ Next week
+ </DropdownMenuItem>
+ </DropdownMenuGroup>
+ <DropdownMenuSeparator />
+ <DropdownMenuItem variant="destructive">
+ <Trash2 />
+ Delete
+ </DropdownMenuItem>
+ </DropdownMenuContent>
+ </DropdownMenu>
+ </ButtonGroup>
+ </ButtonGroup>
+
+ <ButtonGroup aria-label="Search members" className="w-full max-w-sm">
+ <Input aria-label="Search members" placeholder="Search members..." />
+ <Button aria-label="Search" size="icon" variant="outline">
+ <Search />
+ </Button>
+ </ButtonGroup>
+
+ <div className="flex flex-wrap items-center justify-center gap-6">
+ <ButtonGroup aria-label="Text alignment">
+ <Button aria-label="Align left" size="icon" variant="secondary">
+ <AlignLeft />
+ </Button>
+ <ButtonGroupSeparator />
+ <Button aria-label="Align center" size="icon" variant="secondary">
+ <AlignCenter />
+ </Button>
+ <ButtonGroupSeparator />
+ <Button aria-label="Align right" size="icon" variant="secondary">
+ <AlignRight />
+ </Button>
+ </ButtonGroup>
+
+ <QuantityStepper />
+
+ <ButtonGroup aria-label="Zoom" orientation="vertical">
+ <Button aria-label="Zoom in" size="icon-sm" variant="outline">
+ <ZoomIn />
+ </Button>
+ <Button aria-label="Zoom out" size="icon-sm" variant="outline">
+ <ZoomOut />
+ </Button>
+ </ButtonGroup>
+ </div>
+ </Card>
+ )
+}
diff --git a/apps/web/src/docs/examples/card-border-separation.tsx b/apps/web/src/docs/examples/card-border-separation.tsx
new file mode 100644
index 000000000..3974e69f6
--- /dev/null
+++ b/apps/web/src/docs/examples/card-border-separation.tsx
@@ -0,0 +1,33 @@
+import { Button } from '@vitnode/core/components/ui/button'
+import {
+ Card,
+ CardAction,
+ CardContent,
+ CardFooter,
+ CardHeader,
+ CardTitle,
+} from '@vitnode/core/components/ui/card'
+
+export default function CardBorderSeparationExample() {
+ return (
+ <Card className="w-full max-w-xs gap-0 p-0">
+ <CardHeader className="flex items-center justify-between px-4 py-2">
+ <CardTitle>Header</CardTitle>
+ <CardAction>
+ <Button variant="outline">Action</Button>
+ </CardAction>
+ </CardHeader>
+ <CardContent className="border-y px-4 py-3">
+ <p>
+ The content has border-y applied, splitting the card into three clean
+ sections.
+ </p>
+ </CardContent>
+ <CardFooter className="border-none px-4 py-3">
+ <Button className="w-full" variant="outline">
+ Action
+ </Button>
+ </CardFooter>
+ </Card>
+ )
+}
diff --git a/apps/web/src/docs/examples/card-header-border.tsx b/apps/web/src/docs/examples/card-header-border.tsx
new file mode 100644
index 000000000..26e3b77d6
--- /dev/null
+++ b/apps/web/src/docs/examples/card-header-border.tsx
@@ -0,0 +1,26 @@
+import {
+ Card,
+ CardContent,
+ CardDescription,
+ CardHeader,
+ CardTitle,
+} from '@vitnode/core/components/ui/card'
+
+export default function CardHeaderBorderExample() {
+ return (
+ <Card className="w-full max-w-xs">
+ <CardHeader className="border-b">
+ <CardTitle>Header with Border</CardTitle>
+ <CardDescription>
+ This is a card with a header that has a bottom border.
+ </CardDescription>
+ </CardHeader>
+ <CardContent>
+ <p>
+ The header has a border-b class applied, creating a visual separation
+ between the header and content sections.
+ </p>
+ </CardContent>
+ </Card>
+ )
+}
diff --git a/apps/web/src/docs/examples/card-header-footer.tsx b/apps/web/src/docs/examples/card-header-footer.tsx
new file mode 100644
index 000000000..b285ffde4
--- /dev/null
+++ b/apps/web/src/docs/examples/card-header-footer.tsx
@@ -0,0 +1,29 @@
+import { Button } from '@vitnode/core/components/ui/button'
+import {
+ Card,
+ CardContent,
+ CardFooter,
+ CardHeader,
+ CardTitle,
+} from '@vitnode/core/components/ui/card'
+
+export default function CardHeaderFooterExample() {
+ return (
+ <Card className="w-full max-w-xs">
+ <CardHeader className="border-b">
+ <CardTitle>Header with Border</CardTitle>
+ </CardHeader>
+ <CardContent>
+ <p>
+ The footer has a top border and a soft background, creating a visual
+ separation between the content and footer sections.
+ </p>
+ </CardContent>
+ <CardFooter>
+ <Button className="w-full" variant="outline">
+ Action
+ </Button>
+ </CardFooter>
+ </Card>
+ )
+}
diff --git a/apps/web/src/docs/examples/card-link.tsx b/apps/web/src/docs/examples/card-link.tsx
new file mode 100644
index 000000000..90a801cb3
--- /dev/null
+++ b/apps/web/src/docs/examples/card-link.tsx
@@ -0,0 +1,37 @@
+import { buttonVariants } from '@vitnode/core/components/ui/button'
+import {
+ Card,
+ CardContent,
+ CardFooter,
+ CardHeader,
+ CardTitle,
+} from '@vitnode/core/components/ui/card'
+import { cn } from 'cn'
+import { ExternalLinkIcon } from 'lucide-react'
+
+export default function CardLinkExample() {
+ return (
+ <Card className="w-full max-w-xs gap-2 pt-5">
+ <CardHeader>
+ <CardTitle>Need a help in Claim?</CardTitle>
+ </CardHeader>
+ <CardContent className="mb-2">
+ <p>
+ Go to this step by step guideline process on how to certify for your
+ weekly benefits:
+ </p>
+ </CardContent>
+ <CardFooter className="py-2">
+ <a
+ className={cn(buttonVariants({ variant: 'link' }), 'px-0')}
+ href="https://vitnode.com"
+ rel="noopener noreferrer"
+ target="_blank"
+ >
+ See our guideline
+ <ExternalLinkIcon aria-hidden="true" />
+ </a>
+ </CardFooter>
+ </Card>
+ )
+}
diff --git a/apps/web/src/docs/examples/card.tsx b/apps/web/src/docs/examples/card.tsx
index 2b1ad5b1c..75de9f481 100644
--- a/apps/web/src/docs/examples/card.tsx
+++ b/apps/web/src/docs/examples/card.tsx
@@ -1,6 +1,6 @@
+import { Button } from '@vitnode/core/components/ui/button'
import {
Card,
- CardAction,
CardContent,
CardDescription,
CardFooter,
@@ -10,16 +10,23 @@ import {
export default function CardExample() {
return (
- <Card>
+ <Card className="w-full max-w-xs">
<CardHeader>
- <CardTitle>Card Title</CardTitle>
- <CardDescription>Card Description</CardDescription>
+ <CardTitle>Default Card</CardTitle>
+ <CardDescription>
+ This card uses the default size variant.
+ </CardDescription>
</CardHeader>
<CardContent>
- This is the content of the card. You can put any content here.
+ <p>
+ The card component supports a size prop that defaults to
+ "default" for standard spacing and sizing.
+ </p>
</CardContent>
<CardFooter>
- <CardAction>Action Button</CardAction>
+ <Button className="w-full" variant="outline">
+ Action
+ </Button>
</CardFooter>
</Card>
)
diff --git a/apps/web/src/docs/examples/carousel.tsx b/apps/web/src/docs/examples/carousel.tsx
new file mode 100644
index 000000000..15256290f
--- /dev/null
+++ b/apps/web/src/docs/examples/carousel.tsx
@@ -0,0 +1,125 @@
+import type { CarouselApi } from '@vitnode/core/components/ui/carousel'
+
+import {
+ Carousel,
+ CarouselContent,
+ CarouselItem,
+ CarouselNext,
+ CarouselPrevious,
+} from '@vitnode/core/components/ui/carousel'
+import { cn } from 'cn'
+import { useEffect, useState } from 'react'
+
+import adminContentCreateDark from '@/site/home/assets/admin-content-create-dark-800.webp'
+import adminContentCreateLight from '@/site/home/assets/admin-content-create-light-800.webp'
+import adminDashboardDark from '@/site/home/assets/admin-dashboard-dark-800.webp'
+import adminDashboardLight from '@/site/home/assets/admin-dashboard-light-800.webp'
+import adminIntegrationsDark from '@/site/home/assets/admin-integrations-dark-800.webp'
+import adminIntegrationsLight from '@/site/home/assets/admin-integrations-light-800.webp'
+import adminRolesDark from '@/site/home/assets/admin-roles-dark-800.webp'
+import adminRolesLight from '@/site/home/assets/admin-roles-light-800.webp'
+import publicLoginDark from '@/site/home/assets/public-login-dark-800.webp'
+import publicLoginLight from '@/site/home/assets/public-login-light-800.webp'
+
+const SLIDES = [
+ { title: 'Dashboard', light: adminDashboardLight, dark: adminDashboardDark },
+ {
+ title: 'Content editor',
+ light: adminContentCreateLight,
+ dark: adminContentCreateDark,
+ },
+ {
+ title: 'Integrations',
+ light: adminIntegrationsLight,
+ dark: adminIntegrationsDark,
+ },
+ { title: 'Roles', light: adminRolesLight, dark: adminRolesDark },
+ { title: 'Sign in', light: publicLoginLight, dark: publicLoginDark },
+]
+
+export default function CarouselExample() {
+ const [api, setApi] = useState<CarouselApi>()
+ const [current, setCurrent] = useState(0)
+
+ useEffect(() => {
+ if (!api) return
+
+ const onSelect = () => {
+ setCurrent(api.selectedScrollSnap())
+ }
+
+ api.on('select', onSelect)
+ api.on('reInit', onSelect)
+
+ return () => {
+ api.off('select', onSelect)
+ api.off('reInit', onSelect)
+ }
+ }, [api])
+
+ return (
+ <Carousel
+ aria-label="VitNode screenshots"
+ className="flex w-full flex-col gap-4"
+ opts={{ loop: true }}
+ setApi={setApi}
+ >
+ <CarouselContent>
+ {SLIDES.map(({ title, light, dark }, index) => (
+ <CarouselItem
+ aria-label={`${index + 1} of ${SLIDES.length}`}
+ key={title}
+ >
+ <figure className="flex flex-col gap-2">
+ <div className="bg-muted aspect-video overflow-hidden rounded-lg border">
+ <img
+ alt={`VitNode ${title} screen`}
+ className="size-full object-cover object-top dark:hidden"
+ decoding="async"
+ loading="lazy"
+ src={light}
+ />
+ <img
+ alt={`VitNode ${title} screen`}
+ className="hidden size-full object-cover object-top dark:block"
+ decoding="async"
+ loading="lazy"
+ src={dark}
+ />
+ </div>
+ <figcaption className="text-muted-foreground text-center text-sm leading-relaxed">
+ {title}
+ </figcaption>
+ </figure>
+ </CarouselItem>
+ ))}
+ </CarouselContent>
+
+ <div className="flex items-center justify-between gap-4">
+ <CarouselPrevious className="static translate-y-0" />
+ <div className="flex items-center gap-1">
+ {SLIDES.map(({ title }, index) => (
+ <button
+ aria-current={index === current}
+ aria-label={`Go to slide ${index + 1}: ${title}`}
+ className="focus-visible:ring-ring/50 flex size-6 items-center justify-center rounded-full outline-none focus-visible:ring-3"
+ key={title}
+ onClick={() => api?.scrollTo(index)}
+ type="button"
+ >
+ <span
+ className={cn(
+ 'h-2 rounded-full transition-all motion-reduce:transition-none',
+ index === current
+ ? 'bg-primary w-4'
+ : 'bg-muted-foreground/40 w-2',
+ )}
+ />
+ </button>
+ ))}
+ </div>
+ <CarouselNext className="static translate-y-0" />
+ </div>
+ </Carousel>
+ )
+}
diff --git a/apps/web/src/docs/examples/cascader-auto-form.tsx b/apps/web/src/docs/examples/cascader-auto-form.tsx
new file mode 100644
index 000000000..07a061bf7
--- /dev/null
+++ b/apps/web/src/docs/examples/cascader-auto-form.tsx
@@ -0,0 +1,51 @@
+import { AutoForm } from '@vitnode/core/components/form/auto-form'
+import { AutoFormCascader } from '@vitnode/core/components/form/fields/cascader'
+import { toast } from 'sonner'
+import { z } from 'zod'
+
+import { locations } from './cascader-options'
+
+export default function CascaderAutoFormExample() {
+ const formSchema = z.object({
+ office: z.string('Pick an office to continue'),
+ backupOffice: z.string().optional(),
+ })
+
+ return (
+ <AutoForm
+ className="w-full"
+ fields={[
+ {
+ id: 'office',
+ component: (props) => (
+ <AutoFormCascader
+ {...props}
+ description="Where you'll be working most days."
+ label="Office"
+ options={locations}
+ searchable
+ />
+ ),
+ },
+ {
+ id: 'backupOffice',
+ component: (props) => (
+ <AutoFormCascader
+ {...props}
+ label="Backup office"
+ options={locations}
+ />
+ ),
+ },
+ ]}
+ formSchema={formSchema}
+ onSubmit={(values) => {
+ toast.success('Offices saved', {
+ description: [values.office, values.backupOffice]
+ .filter(Boolean)
+ .join(' + '),
+ })
+ }}
+ />
+ )
+}
diff --git a/apps/web/src/docs/examples/cascader-options.ts b/apps/web/src/docs/examples/cascader-options.ts
new file mode 100644
index 000000000..3deb27230
--- /dev/null
+++ b/apps/web/src/docs/examples/cascader-options.ts
@@ -0,0 +1,62 @@
+import type { CascaderOption } from '@vitnode/core/components/ui/cascader'
+
+export const locations: CascaderOption[] = [
+ {
+ label: 'Europe',
+ value: 'europe',
+ children: [
+ {
+ label: 'Poland',
+ value: 'poland',
+ children: [
+ { label: 'Warsaw', value: 'warsaw' },
+ { label: 'Kraków', value: 'krakow' },
+ { label: 'Gdańsk', value: 'gdansk' },
+ ],
+ },
+ {
+ label: 'Portugal',
+ value: 'portugal',
+ children: [
+ { label: 'Lisbon', value: 'lisbon' },
+ { label: 'Porto', value: 'porto' },
+ ],
+ },
+ { label: 'Iceland', value: 'iceland', disabled: true },
+ ],
+ },
+ {
+ label: 'Americas',
+ value: 'americas',
+ children: [
+ {
+ label: 'Canada',
+ value: 'canada',
+ children: [
+ { label: 'Vancouver', value: 'vancouver' },
+ { label: 'Montréal', value: 'montreal' },
+ ],
+ },
+ {
+ label: 'Brazil',
+ value: 'brazil',
+ children: [{ label: 'São Paulo', value: 'sao-paulo' }],
+ },
+ ],
+ },
+ {
+ label: 'Asia & Pacific',
+ value: 'apac',
+ children: [
+ {
+ label: 'Japan',
+ value: 'japan',
+ children: [
+ { label: 'Tokyo', value: 'tokyo' },
+ { label: 'Osaka', value: 'osaka' },
+ ],
+ },
+ { label: 'Singapore', value: 'singapore' },
+ ],
+ },
+]
diff --git a/apps/web/src/docs/examples/cascader.tsx b/apps/web/src/docs/examples/cascader.tsx
new file mode 100644
index 000000000..a5e756662
--- /dev/null
+++ b/apps/web/src/docs/examples/cascader.tsx
@@ -0,0 +1,27 @@
+import { Cascader } from '@vitnode/core/components/ui/cascader'
+import { Label } from '@vitnode/core/components/ui/label'
+import React from 'react'
+
+import { locations } from './cascader-options'
+
+export default function CascaderExample() {
+ const [office, setOffice] = React.useState<null | string>('krakow')
+
+ return (
+ <div className="not-prose flex w-full flex-col gap-2">
+ <Label id="cascader-office-label">Office</Label>
+ <Cascader
+ aria-labelledby="cascader-office-label"
+ onValueChange={setOffice}
+ options={locations}
+ placeholder="Pick an office"
+ searchable
+ showClear
+ value={office}
+ />
+ <p className="text-muted-foreground text-sm leading-relaxed">
+ Selected value: <code>{office ?? 'nothing yet'}</code>
+ </p>
+ </div>
+ )
+}
diff --git a/apps/web/src/docs/examples/chart-area.tsx b/apps/web/src/docs/examples/chart-area.tsx
new file mode 100644
index 000000000..1d6f2fdad
--- /dev/null
+++ b/apps/web/src/docs/examples/chart-area.tsx
@@ -0,0 +1,115 @@
+import type { ChartConfig } from '@vitnode/core/components/ui/chart'
+
+import {
+ Card,
+ CardContent,
+ CardDescription,
+ CardHeader,
+ CardTitle,
+} from '@vitnode/core/components/ui/card'
+import {
+ ChartContainer,
+ ChartLegend,
+ ChartLegendContent,
+ ChartTooltip,
+ ChartTooltipContent,
+} from '@vitnode/core/components/ui/chart'
+import { Area, AreaChart, CartesianGrid, XAxis } from 'recharts'
+
+const chartData = [
+ { month: 'January', downloads: 420, upgrades: 120 },
+ { month: 'February', downloads: 610, upgrades: 180 },
+ { month: 'March', downloads: 530, upgrades: 260 },
+ { month: 'April', downloads: 780, upgrades: 240 },
+ { month: 'May', downloads: 920, upgrades: 330 },
+ { month: 'June', downloads: 1080, upgrades: 410 },
+]
+
+const chartConfig = {
+ downloads: {
+ label: 'Downloads',
+ color: 'var(--chart-1)',
+ },
+ upgrades: {
+ label: 'Upgrades',
+ color: 'var(--chart-4)',
+ },
+} satisfies ChartConfig
+
+const shortMonth = (month: string) => month.slice(0, 3)
+
+export default function ChartAreaExample() {
+ return (
+ <Card className="w-full">
+ <CardHeader>
+ <CardTitle>Plugin installs</CardTitle>
+ <CardDescription>Fresh downloads and upgrades, stacked</CardDescription>
+ </CardHeader>
+ <CardContent>
+ <ChartContainer
+ className="aspect-4/3 sm:aspect-video"
+ config={chartConfig}
+ >
+ <AreaChart
+ accessibilityLayer
+ data={chartData}
+ desc="Plugin downloads and upgrades per month, January to June"
+ margin={{ left: 12, right: 12 }}
+ title="Plugin installs"
+ >
+ <defs>
+ <linearGradient id="fill-downloads" x1="0" x2="0" y1="0" y2="1">
+ <stop
+ offset="5%"
+ stopColor="var(--color-downloads)"
+ stopOpacity={0.8}
+ />
+ <stop
+ offset="95%"
+ stopColor="var(--color-downloads)"
+ stopOpacity={0.1}
+ />
+ </linearGradient>
+ <linearGradient id="fill-upgrades" x1="0" x2="0" y1="0" y2="1">
+ <stop
+ offset="5%"
+ stopColor="var(--color-upgrades)"
+ stopOpacity={0.8}
+ />
+ <stop
+ offset="95%"
+ stopColor="var(--color-upgrades)"
+ stopOpacity={0.1}
+ />
+ </linearGradient>
+ </defs>
+ <CartesianGrid vertical={false} />
+ <XAxis
+ axisLine={false}
+ dataKey="month"
+ tickFormatter={shortMonth}
+ tickLine={false}
+ tickMargin={8}
+ />
+ <ChartTooltip content={<ChartTooltipContent />} cursor={false} />
+ <ChartLegend content={<ChartLegendContent />} />
+ <Area
+ dataKey="upgrades"
+ fill="url(#fill-upgrades)"
+ stackId="installs"
+ stroke="var(--color-upgrades)"
+ type="natural"
+ />
+ <Area
+ dataKey="downloads"
+ fill="url(#fill-downloads)"
+ stackId="installs"
+ stroke="var(--color-downloads)"
+ type="natural"
+ />
+ </AreaChart>
+ </ChartContainer>
+ </CardContent>
+ </Card>
+ )
+}
diff --git a/apps/web/src/docs/examples/chart-line.tsx b/apps/web/src/docs/examples/chart-line.tsx
new file mode 100644
index 000000000..6394f8f39
--- /dev/null
+++ b/apps/web/src/docs/examples/chart-line.tsx
@@ -0,0 +1,80 @@
+import type { ChartConfig } from '@vitnode/core/components/ui/chart'
+
+import {
+ Card,
+ CardContent,
+ CardDescription,
+ CardHeader,
+ CardTitle,
+} from '@vitnode/core/components/ui/card'
+import {
+ ChartContainer,
+ ChartTooltip,
+ ChartTooltipContent,
+} from '@vitnode/core/components/ui/chart'
+import { CartesianGrid, Line, LineChart, XAxis } from 'recharts'
+
+const chartData = [
+ { day: 'Monday', responseTime: 182 },
+ { day: 'Tuesday', responseTime: 164 },
+ { day: 'Wednesday', responseTime: 210 },
+ { day: 'Thursday', responseTime: 148 },
+ { day: 'Friday', responseTime: 126 },
+ { day: 'Saturday', responseTime: 98 },
+ { day: 'Sunday', responseTime: 104 },
+]
+
+const chartConfig = {
+ responseTime: {
+ label: 'Response time',
+ color: 'var(--chart-2)',
+ },
+} satisfies ChartConfig
+
+const shortDay = (day: string) => day.slice(0, 3)
+
+export default function ChartLineExample() {
+ return (
+ <Card className="w-full">
+ <CardHeader>
+ <CardTitle>API response time</CardTitle>
+ <CardDescription>Median in milliseconds, last week</CardDescription>
+ </CardHeader>
+ <CardContent>
+ <ChartContainer
+ className="aspect-4/3 sm:aspect-video"
+ config={chartConfig}
+ >
+ <LineChart
+ accessibilityLayer
+ data={chartData}
+ desc="Median API response time in milliseconds per day, Monday to Sunday"
+ margin={{ left: 20, right: 20, top: 12 }}
+ title="API response time"
+ >
+ <CartesianGrid vertical={false} />
+ <XAxis
+ axisLine={false}
+ dataKey="day"
+ tickFormatter={shortDay}
+ tickLine={false}
+ tickMargin={8}
+ />
+ <ChartTooltip
+ content={<ChartTooltipContent indicator="line" />}
+ cursor={false}
+ />
+ <Line
+ activeDot={{ r: 6 }}
+ dataKey="responseTime"
+ dot={{ fill: 'var(--color-responseTime)' }}
+ stroke="var(--color-responseTime)"
+ strokeWidth={2}
+ type="monotone"
+ />
+ </LineChart>
+ </ChartContainer>
+ </CardContent>
+ </Card>
+ )
+}
diff --git a/apps/web/src/docs/examples/chart.tsx b/apps/web/src/docs/examples/chart.tsx
new file mode 100644
index 000000000..b439e5f06
--- /dev/null
+++ b/apps/web/src/docs/examples/chart.tsx
@@ -0,0 +1,79 @@
+import type { ChartConfig } from '@vitnode/core/components/ui/chart'
+
+import {
+ Card,
+ CardContent,
+ CardDescription,
+ CardHeader,
+ CardTitle,
+} from '@vitnode/core/components/ui/card'
+import {
+ ChartContainer,
+ ChartLegend,
+ ChartLegendContent,
+ ChartTooltip,
+ ChartTooltipContent,
+} from '@vitnode/core/components/ui/chart'
+import { Bar, BarChart, CartesianGrid, XAxis } from 'recharts'
+
+const chartData = [
+ { month: 'January', desktop: 186, mobile: 80 },
+ { month: 'February', desktop: 305, mobile: 200 },
+ { month: 'March', desktop: 237, mobile: 120 },
+ { month: 'April', desktop: 73, mobile: 190 },
+ { month: 'May', desktop: 209, mobile: 130 },
+ { month: 'June', desktop: 214, mobile: 140 },
+]
+
+const chartConfig = {
+ desktop: {
+ label: 'Desktop',
+ color: 'var(--chart-1)',
+ },
+ mobile: {
+ label: 'Mobile',
+ color: 'var(--chart-2)',
+ },
+} satisfies ChartConfig
+
+const shortMonth = (month: string) => month.slice(0, 3)
+
+export default function ChartExample() {
+ return (
+ <Card className="w-full">
+ <CardHeader>
+ <CardTitle>Visitors</CardTitle>
+ <CardDescription>January - June 2026</CardDescription>
+ </CardHeader>
+ <CardContent>
+ <ChartContainer
+ className="aspect-4/3 sm:aspect-video"
+ config={chartConfig}
+ >
+ <BarChart
+ accessibilityLayer
+ data={chartData}
+ desc="Desktop and mobile visitors per month, January to June 2026"
+ title="Visitors"
+ >
+ <CartesianGrid vertical={false} />
+ <XAxis
+ axisLine={false}
+ dataKey="month"
+ tickFormatter={shortMonth}
+ tickLine={false}
+ tickMargin={10}
+ />
+ <ChartTooltip
+ content={<ChartTooltipContent indicator="dashed" />}
+ cursor={false}
+ />
+ <ChartLegend content={<ChartLegendContent />} />
+ <Bar dataKey="desktop" fill="var(--color-desktop)" radius={4} />
+ <Bar dataKey="mobile" fill="var(--color-mobile)" radius={4} />
+ </BarChart>
+ </ChartContainer>
+ </CardContent>
+ </Card>
+ )
+}
diff --git a/apps/web/src/docs/examples/combobox-groups.tsx b/apps/web/src/docs/examples/combobox-groups.tsx
new file mode 100644
index 000000000..b8684d5cc
--- /dev/null
+++ b/apps/web/src/docs/examples/combobox-groups.tsx
@@ -0,0 +1,53 @@
+import { AutoForm } from '@vitnode/core/components/form/auto-form'
+import { AutoFormCombobox } from '@vitnode/core/components/form/fields/combobox'
+import { z } from 'zod'
+
+const timezones = [
+ { group: 'Europe', label: 'London', value: 'europe-london' },
+ { group: 'Europe', label: 'Warsaw', value: 'europe-warsaw' },
+ { group: 'Europe', label: 'Lisbon', value: 'europe-lisbon' },
+ { group: 'Americas', label: 'New York', value: 'america-new-york' },
+ { group: 'Americas', label: 'São Paulo', value: 'america-sao-paulo' },
+ { group: 'Americas', label: 'Vancouver', value: 'america-vancouver' },
+ { group: 'Asia & Pacific', label: 'Tokyo', value: 'asia-tokyo' },
+ { group: 'Asia & Pacific', label: 'Singapore', value: 'asia-singapore' },
+ { group: 'Asia & Pacific', label: 'Sydney', value: 'australia-sydney' },
+]
+
+export default function ComboboxGroupsExample() {
+ const formSchema = z.object({
+ timezone: z.enum([
+ 'europe-london',
+ 'europe-warsaw',
+ 'europe-lisbon',
+ 'america-new-york',
+ 'america-sao-paulo',
+ 'america-vancouver',
+ 'asia-tokyo',
+ 'asia-singapore',
+ 'australia-sydney',
+ ]),
+ })
+
+ return (
+ <AutoForm
+ className="w-full"
+ fields={[
+ {
+ id: 'timezone',
+ component: (props) => (
+ <AutoFormCombobox
+ {...props}
+ description="Used for scheduled posts and email digests."
+ label="Timezone"
+ labels={timezones}
+ placeholder="Search cities..."
+ showClear
+ />
+ ),
+ },
+ ]}
+ formSchema={formSchema}
+ />
+ )
+}
diff --git a/apps/web/src/docs/examples/combobox-multiple.tsx b/apps/web/src/docs/examples/combobox-multiple.tsx
new file mode 100644
index 000000000..9b132fe06
--- /dev/null
+++ b/apps/web/src/docs/examples/combobox-multiple.tsx
@@ -0,0 +1,48 @@
+import { AutoForm } from '@vitnode/core/components/form/auto-form'
+import { AutoFormCombobox } from '@vitnode/core/components/form/fields/combobox'
+import { toast } from 'sonner'
+import { z } from 'zod'
+
+const topics = [
+ { value: 'news', label: 'News' },
+ { value: 'guides', label: 'Guides' },
+ { value: 'releases', label: 'Releases' },
+ { value: 'plugins', label: 'Plugins' },
+ { value: 'community', label: 'Community' },
+]
+
+export default function ComboboxMultipleExample() {
+ const formSchema = z.object({
+ topics: z
+ .array(z.enum(['news', 'guides', 'releases', 'plugins', 'community']))
+ .min(1, 'Pick at least one topic'),
+ })
+
+ return (
+ <AutoForm
+ className="w-full"
+ fields={[
+ {
+ id: 'topics',
+ component: (props) => (
+ <AutoFormCombobox
+ {...props}
+ description="Pick as many topics as you like - only the first three show up."
+ label="Topics"
+ labels={topics}
+ maxVisibleChips={3}
+ multiple
+ placeholder="Search topics..."
+ />
+ ),
+ },
+ ]}
+ formSchema={formSchema}
+ onSubmit={(values) => {
+ toast.success('Topics saved', {
+ description: values.topics.join(', '),
+ })
+ }}
+ />
+ )
+}
diff --git a/apps/web/src/docs/examples/combobox.tsx b/apps/web/src/docs/examples/combobox.tsx
index 81184d1f7..86479ea34 100644
--- a/apps/web/src/docs/examples/combobox.tsx
+++ b/apps/web/src/docs/examples/combobox.tsx
@@ -9,6 +9,7 @@ export default function ComboboxExample() {
return (
<AutoForm
+ className="w-full"
fields={[
{
id: 'type',
diff --git a/apps/web/src/docs/examples/command-dialog.tsx b/apps/web/src/docs/examples/command-dialog.tsx
new file mode 100644
index 000000000..69caac39f
--- /dev/null
+++ b/apps/web/src/docs/examples/command-dialog.tsx
@@ -0,0 +1,116 @@
+import { Button } from '@vitnode/core/components/ui/button'
+import {
+ Command,
+ CommandDialog,
+ CommandEmpty,
+ CommandGroup,
+ CommandInput,
+ CommandItem,
+ CommandList,
+ CommandSeparator,
+} from '@vitnode/core/components/ui/command'
+import { Kbd, KbdGroup } from '@vitnode/core/components/ui/kbd'
+import {
+ FileTextIcon,
+ LayoutDashboardIcon,
+ LogOutIcon,
+ MoonIcon,
+ SearchIcon,
+ UserPlusIcon,
+} from 'lucide-react'
+import React from 'react'
+import { toast } from 'sonner'
+
+const subscribeToNothing = () => () => {}
+
+const useIsApple = () =>
+ React.useSyncExternalStore(
+ subscribeToNothing,
+ () => /Mac|iPhone|iPad|iPod/.test(navigator.userAgent),
+ () => true,
+ )
+
+const actions = [
+ {
+ group: 'Navigation',
+ items: [
+ { label: 'Dashboard', icon: LayoutDashboardIcon },
+ { label: 'Documentation', icon: FileTextIcon },
+ ],
+ },
+ {
+ group: 'Actions',
+ items: [
+ { label: 'Invite a teammate', icon: UserPlusIcon },
+ { label: 'Toggle dark mode', icon: MoonIcon },
+ { label: 'Sign out', icon: LogOutIcon },
+ ],
+ },
+]
+
+export default function CommandDialogExample() {
+ const [open, setOpen] = React.useState(false)
+ const isApple = useIsApple()
+
+ React.useEffect(() => {
+ const handleKeyDown = (event: KeyboardEvent) => {
+ if (event.key.toLowerCase() !== 'j') return
+ if (!event.metaKey && !event.ctrlKey) return
+ if (event.altKey || event.shiftKey || event.defaultPrevented) return
+
+ event.preventDefault()
+ setOpen((prev) => !prev)
+ }
+
+ window.addEventListener('keydown', handleKeyDown)
+
+ return () => window.removeEventListener('keydown', handleKeyDown)
+ }, [])
+
+ const runAction = (label: string) => {
+ setOpen(false)
+ toast(label, { description: 'Pretend something impressive just happened.' })
+ }
+
+ return (
+ <div className="flex flex-col items-center gap-3">
+ <Button
+ aria-haspopup="dialog"
+ onClick={() => setOpen(true)}
+ variant="outline"
+ >
+ <SearchIcon />
+ Open command palette
+ </Button>
+ <p className="not-prose text-muted-foreground flex items-center gap-2 text-sm leading-relaxed">
+ or press
+ <KbdGroup>
+ <Kbd>{isApple ? '⌘' : 'Ctrl'}</Kbd>
+ <Kbd>J</Kbd>
+ </KbdGroup>
+ </p>
+
+ <CommandDialog onOpenChange={setOpen} open={open}>
+ <Command>
+ <CommandInput placeholder="What do you need?" />
+ <CommandList>
+ <CommandEmpty>Nothing here. Try fewer letters?</CommandEmpty>
+ {actions.map(({ group, items }, index) => (
+ <React.Fragment key={group}>
+ {index > 0 && <CommandSeparator />}
+ <CommandGroup heading={group}>
+ {items.map(({ label, icon: Icon }) => (
+ <CommandItem key={label} onSelect={() => runAction(label)}>
+ <Icon />
+ <span>{label}</span>
+ </CommandItem>
+ ))}
+ </CommandGroup>
+ </React.Fragment>
+ ))}
+ </CommandList>
+ </Command>
+ </CommandDialog>
+ </div>
+ )
+}
diff --git a/apps/web/src/docs/examples/command.tsx b/apps/web/src/docs/examples/command.tsx
new file mode 100644
index 000000000..19d0bc82d
--- /dev/null
+++ b/apps/web/src/docs/examples/command.tsx
@@ -0,0 +1,61 @@
+import {
+ Command,
+ CommandEmpty,
+ CommandGroup,
+ CommandInput,
+ CommandItem,
+ CommandList,
+ CommandSeparator,
+ CommandShortcut,
+} from '@vitnode/core/components/ui/command'
+import {
+ CalculatorIcon,
+ CalendarIcon,
+ CreditCardIcon,
+ SettingsIcon,
+ SmileIcon,
+ UserIcon,
+} from 'lucide-react'
+
+export default function CommandExample() {
+ return (
+ <Command className="w-full rounded-xl border shadow-md">
+ <CommandInput placeholder="Type a command or search..." />
+ <CommandList>
+ <CommandEmpty>No results found.</CommandEmpty>
+ <CommandGroup heading="Suggestions">
+ <CommandItem>
+ <CalendarIcon />
+ <span>Calendar</span>
+ </CommandItem>
+ <CommandItem>
+ <SmileIcon />
+ <span>Search Emoji</span>
+ </CommandItem>
+ <CommandItem disabled>
+ <CalculatorIcon />
+ <span>Calculator</span>
+ </CommandItem>
+ </CommandGroup>
+ <CommandSeparator />
+ <CommandGroup heading="Settings">
+ <CommandItem>
+ <UserIcon />
+ <span>Profile</span>
+ <CommandShortcut>⌘P</CommandShortcut>
+ </CommandItem>
+ <CommandItem>
+ <CreditCardIcon />
+ <span>Billing</span>
+ <CommandShortcut>⌘B</CommandShortcut>
+ </CommandItem>
+ <CommandItem>
+ <SettingsIcon />
+ <span>Settings</span>
+ <CommandShortcut>⌘S</CommandShortcut>
+ </CommandItem>
+ </CommandGroup>
+ </CommandList>
+ </Command>
+ )
+}
diff --git a/apps/web/src/docs/examples/comparison.tsx b/apps/web/src/docs/examples/comparison.tsx
new file mode 100644
index 000000000..8134785ce
--- /dev/null
+++ b/apps/web/src/docs/examples/comparison.tsx
@@ -0,0 +1,31 @@
+import {
+ Comparison,
+ ComparisonHandle,
+ ComparisonItem,
+} from '@vitnode/core/components/ui/comparison'
+
+import adminDashboardDark from '@/site/home/assets/admin-dashboard-dark-800.webp'
+import adminDashboardLight from '@/site/home/assets/admin-dashboard-light-800.webp'
+
+export default function ComparisonExample() {
+ return (
+ <figure className="not-prose flex w-full flex-col gap-2">
+ <Comparison
+ aria-label="Light and dark theme"
+ className="aspect-video rounded-lg border"
+ >
+ <ComparisonItem position="left">
+ <img alt="" draggable={false} src={adminDashboardLight} />
+ </ComparisonItem>
+ <ComparisonItem position="right">
+ <img alt="" draggable={false} src={adminDashboardDark} />
+ </ComparisonItem>
+ <ComparisonHandle />
+ </Comparison>
+ <figcaption className="text-muted-foreground text-center text-sm leading-relaxed">
+ Drag the handle - or focus it and use the arrow keys - to compare the
+ light and dark themes.
+ </figcaption>
+ </figure>
+ )
+}
diff --git a/apps/web/src/docs/examples/confirm-action-alert-dialog.tsx b/apps/web/src/docs/examples/confirm-action-alert-dialog.tsx
index 420593716..21200410a 100644
--- a/apps/web/src/docs/examples/confirm-action-alert-dialog.tsx
+++ b/apps/web/src/docs/examples/confirm-action-alert-dialog.tsx
@@ -1,10 +1,12 @@
import { ConfirmActionAlertDialog } from '@vitnode/core/components/confirm-action/confirm-action-alert-dialog'
import { Button } from '@vitnode/core/components/ui/button'
+import { Trash2Icon } from 'lucide-react'
import { toast } from 'sonner'
export default function ConfirmActionAlertDialogExample() {
return (
<ConfirmActionAlertDialog
+ icon={<Trash2Icon />}
onSubmit={({ onClose }) => {
toast.success('Category deleted successfully!', {
description: 'The category has been removed from your list.',
diff --git a/apps/web/src/docs/examples/context-menu.tsx b/apps/web/src/docs/examples/context-menu.tsx
new file mode 100644
index 000000000..ea0e11e12
--- /dev/null
+++ b/apps/web/src/docs/examples/context-menu.tsx
@@ -0,0 +1,109 @@
+import {
+ ContextMenu,
+ ContextMenuCheckboxItem,
+ ContextMenuContent,
+ ContextMenuGroup,
+ ContextMenuItem,
+ ContextMenuLabel,
+ ContextMenuRadioGroup,
+ ContextMenuRadioItem,
+ ContextMenuSeparator,
+ ContextMenuShortcut,
+ ContextMenuSub,
+ ContextMenuSubContent,
+ ContextMenuSubTrigger,
+ ContextMenuTrigger,
+} from '@vitnode/core/components/ui/context-menu'
+import {
+ ArrowLeftIcon,
+ ArrowRightIcon,
+ MousePointerClickIcon,
+ RotateCwIcon,
+ Trash2Icon,
+} from 'lucide-react'
+import React from 'react'
+
+export default function ContextMenuExample() {
+ const [showBookmarks, setShowBookmarks] = React.useState(true)
+ const [showFullUrls, setShowFullUrls] = React.useState(false)
+ const [person, setPerson] = React.useState('pedro')
+
+ return (
+ <ContextMenu>
+ <ContextMenuTrigger className="border-muted-foreground/30 bg-muted/40 text-muted-foreground flex h-40 w-full max-w-sm flex-col items-center justify-center gap-2 rounded-xl border-2 border-dashed p-4 text-center">
+ <MousePointerClickIcon aria-hidden="true" className="size-6" />
+ <span className="text-foreground text-sm font-medium text-balance">
+ Right-click here
+ </span>
+ <span className="text-xs leading-relaxed text-pretty">
+ On a touch device, long-press instead.
+ </span>
+ </ContextMenuTrigger>
+ <ContextMenuContent className="w-56">
+ <ContextMenuGroup>
+ <ContextMenuItem>
+ <ArrowLeftIcon />
+ Back
+ <ContextMenuShortcut>⌘[</ContextMenuShortcut>
+ </ContextMenuItem>
+ <ContextMenuItem disabled>
+ <ArrowRightIcon />
+ Forward
+ <ContextMenuShortcut>⌘]</ContextMenuShortcut>
+ </ContextMenuItem>
+ <ContextMenuItem>
+ <RotateCwIcon />
+ Reload
+ <ContextMenuShortcut>⌘R</ContextMenuShortcut>
+ </ContextMenuItem>
+ <ContextMenuSub>
+ <ContextMenuSubTrigger inset>More tools</ContextMenuSubTrigger>
+ <ContextMenuSubContent className="w-48">
+ <ContextMenuItem>
+ Save page as...
+ <ContextMenuShortcut>⇧⌘S</ContextMenuShortcut>
+ </ContextMenuItem>
+ <ContextMenuItem>Create shortcut...</ContextMenuItem>
+ <ContextMenuItem>Name window...</ContextMenuItem>
+ <ContextMenuSeparator />
+ <ContextMenuItem>Developer tools</ContextMenuItem>
+ </ContextMenuSubContent>
+ </ContextMenuSub>
+ </ContextMenuGroup>
+ <ContextMenuSeparator />
+ <ContextMenuGroup>
+ <ContextMenuCheckboxItem
+ checked={showBookmarks}
+ inset
+ onCheckedChange={setShowBookmarks}
+ >
+ Show bookmarks bar
+ </ContextMenuCheckboxItem>
+ <ContextMenuCheckboxItem
+ checked={showFullUrls}
+ inset
+ onCheckedChange={setShowFullUrls}
+ >
+ Show full URLs
+ </ContextMenuCheckboxItem>
+ </ContextMenuGroup>
+ <ContextMenuSeparator />
+ <ContextMenuLabel inset>People</ContextMenuLabel>
+ <ContextMenuRadioGroup onValueChange={setPerson} value={person}>
+ <ContextMenuRadioItem inset value="pedro">
+ Pedro Duarte
+ </ContextMenuRadioItem>
+ <ContextMenuRadioItem inset value="colm">
+ Colm Tuite
+ </ContextMenuRadioItem>
+ </ContextMenuRadioGroup>
+ <ContextMenuSeparator />
+ <ContextMenuItem variant="destructive">
+ <Trash2Icon />
+ Delete
+ <ContextMenuShortcut>⌘⌫</ContextMenuShortcut>
+ </ContextMenuItem>
+ </ContextMenuContent>
+ </ContextMenu>
+ )
+}
diff --git a/apps/web/src/docs/examples/copy-button.tsx b/apps/web/src/docs/examples/copy-button.tsx
new file mode 100644
index 000000000..237198a96
--- /dev/null
+++ b/apps/web/src/docs/examples/copy-button.tsx
@@ -0,0 +1,32 @@
+import { Card } from '@vitnode/core/components/ui/card'
+import { CopyButton } from '@vitnode/core/components/ui/copy-button'
+
+const installCommand = 'pnpm create vitnode-app@canary'
+
+export default function CopyButtonExample() {
+ return (
+ <Card className="flex w-full flex-col items-center gap-6 p-8">
+ <div className="flex flex-wrap items-center justify-center gap-4">
+ <CopyButton content="Hello from VitNode!" />
+ <CopyButton content="Hello from VitNode!" variant="ghost" />
+ <CopyButton content="Hello from VitNode!" variant="default" />
+ <CopyButton content="Hello from VitNode!" size="icon-sm" />
+ <CopyButton content="Hello from VitNode!" variant="secondary">
+ Copy text
+ </CopyButton>
+ </div>
+
+ <div className="not-prose bg-muted flex w-full items-center gap-2 rounded-md border py-1 ps-3 pe-1">
+ <code className="text-foreground min-w-0 flex-1 truncate font-mono text-sm">
+ {installCommand}
+ </code>
+ <CopyButton
+ aria-label="Copy install command"
+ content={installCommand}
+ size="icon-sm"
+ variant="ghost"
+ />
+ </div>
+ </Card>
+ )
+}
diff --git a/apps/web/src/docs/examples/counter-sliding-number.tsx b/apps/web/src/docs/examples/counter-sliding-number.tsx
new file mode 100644
index 000000000..bdbccce85
--- /dev/null
+++ b/apps/web/src/docs/examples/counter-sliding-number.tsx
@@ -0,0 +1,40 @@
+import { Button } from '@vitnode/core/components/ui/button'
+import { SlidingNumber } from '@vitnode/core/components/ui/sliding-number'
+import React from 'react'
+
+export default function SlidingNumberExample() {
+ const [downloads, setDownloads] = React.useState(1287)
+
+ return (
+ <div className="not-prose flex flex-col items-center gap-4">
+ <p className="text-muted-foreground text-sm">Downloads this week</p>
+ <SlidingNumber className="text-5xl font-semibold" value={downloads} />
+ <div className="flex flex-wrap justify-center gap-2">
+ <Button
+ onClick={() => {
+ setDownloads((current) => current + 1)
+ }}
+ variant="outline"
+ >
+ +1
+ </Button>
+ <Button
+ onClick={() => {
+ setDownloads((current) => current + 125)
+ }}
+ variant="outline"
+ >
+ +125
+ </Button>
+ <Button
+ onClick={() => {
+ setDownloads(9)
+ }}
+ variant="ghost"
+ >
+ Reset to 9
+ </Button>
+ </div>
+ </div>
+ )
+}
diff --git a/apps/web/src/docs/examples/counter.tsx b/apps/web/src/docs/examples/counter.tsx
new file mode 100644
index 000000000..f50fecc43
--- /dev/null
+++ b/apps/web/src/docs/examples/counter.tsx
@@ -0,0 +1,27 @@
+import { Card } from '@vitnode/core/components/ui/card'
+import { Counter } from '@vitnode/core/components/ui/counter'
+import React from 'react'
+
+export default function CounterExample() {
+ const [quantity, setQuantity] = React.useState(1)
+
+ return (
+ <Card className="not-prose flex w-full flex-row items-center justify-between gap-4 p-4">
+ <div className="flex min-w-0 flex-col gap-0.5">
+ <p className="text-sm font-medium" id="counter-ticket-label">
+ Conference ticket
+ </p>
+ <p className="text-muted-foreground text-sm leading-relaxed">
+ Up to 10 per order
+ </p>
+ </div>
+ <Counter
+ aria-labelledby="counter-ticket-label"
+ max={10}
+ min={1}
+ onValueChange={setQuantity}
+ value={quantity}
+ />
+ </Card>
+ )
+}
diff --git a/apps/web/src/docs/examples/data-table-demo-users.ts b/apps/web/src/docs/examples/data-table-demo-users.ts
new file mode 100644
index 000000000..5d452cd59
--- /dev/null
+++ b/apps/web/src/docs/examples/data-table-demo-users.ts
@@ -0,0 +1,55 @@
+export interface DemoUser {
+ email: string
+ id: number
+ name: string
+ role: 'Admin' | 'Editor' | 'Viewer'
+ status: 'Active' | 'Banned' | 'Invited'
+}
+
+const firstNames = [
+ 'Ada',
+ 'Alan',
+ 'Grace',
+ 'Linus',
+ 'Margaret',
+ 'Dennis',
+ 'Katherine',
+ 'Ken',
+ 'Barbara',
+ 'Guido',
+ 'Hedy',
+ 'Tim',
+]
+const lastNames = [
+ 'Lovelace',
+ 'Turing',
+ 'Hopper',
+ 'Torvalds',
+ 'Hamilton',
+ 'Ritchie',
+ 'Johnson',
+ 'Thompson',
+ 'Liskov',
+ 'van Rossum',
+ 'Lamarr',
+ 'Berners-Lee',
+]
+const roles = ['Admin', 'Editor', 'Viewer', 'Viewer'] as const
+const statuses = ['Active', 'Active', 'Invited', 'Banned'] as const
+
+export const demoUsers: DemoUser[] = Array.from({ length: 36 }, (_, index) => {
+ const first = firstNames[index % firstNames.length] ?? 'Ada'
+ const last =
+ lastNames[
+ (index * 5 + Math.floor(index / firstNames.length)) % lastNames.length
+ ] ?? 'Lovelace'
+
+ return {
+ email:
+ `${first}.${last}`.toLowerCase().replaceAll(' ', '') + '@vitnode.com',
+ id: index + 1,
+ name: `${first} ${last}`,
+ role: roles[index % roles.length] ?? 'Viewer',
+ status: statuses[(index * 3) % statuses.length] ?? 'Active',
+ }
+})
diff --git a/apps/web/src/docs/examples/data-table-expandable.tsx b/apps/web/src/docs/examples/data-table-expandable.tsx
new file mode 100644
index 000000000..21df817ab
--- /dev/null
+++ b/apps/web/src/docs/examples/data-table-expandable.tsx
@@ -0,0 +1,182 @@
+import { Badge } from '@vitnode/core/components/ui/badge'
+
+import { type ColumnDef, DataTable } from '../preview-data-table'
+
+interface LineItem {
+ name: string
+ price: number
+ quantity: number
+}
+
+interface DemoOrder {
+ customer: string
+ id: number
+ items: LineItem[]
+ number: string
+ shipping: number
+ status: 'Delivered' | 'Draft' | 'Processing' | 'Refunded'
+}
+
+const money = new Intl.NumberFormat('en-US', {
+ currency: 'USD',
+ style: 'currency',
+})
+
+const subtotalOf = (order: DemoOrder) =>
+ order.items.reduce((sum, item) => sum + item.price * item.quantity, 0)
+
+const statusVariant = {
+ Delivered: 'success',
+ Draft: 'outline',
+ Processing: 'warning',
+ Refunded: 'destructive',
+} as const
+
+const columns: ColumnDef<DemoOrder>[] = [
+ {
+ accessorKey: 'number',
+ header: 'Order',
+ cell: ({ row }) => <span className="font-medium">{row.number}</span>,
+ },
+ { accessorKey: 'customer', header: 'Customer' },
+ {
+ accessorKey: 'status',
+ header: 'Status',
+ cell: ({ row }) => (
+ <Badge variant={statusVariant[row.status]}>{row.status}</Badge>
+ ),
+ },
+ {
+ id: 'total',
+ header: 'Total',
+ align: 'right',
+ cell: ({ row }) => (
+ <span className="tabular-nums">
+ {money.format(subtotalOf(row) + row.shipping)}
+ </span>
+ ),
+ },
+]
+
+const edges: DemoOrder[] = [
+ {
+ id: 1,
+ number: '#1042',
+ customer: 'John Doe',
+ status: 'Delivered',
+ shipping: 4.99,
+ items: [
+ { name: 'Mechanical keyboard', price: 89, quantity: 1 },
+ { name: 'Keycap set (Ocean)', price: 24.5, quantity: 2 },
+ ],
+ },
+ {
+ id: 2,
+ number: '#1043',
+ customer: 'Jane Smith',
+ status: 'Processing',
+ shipping: 0,
+ items: [
+ { name: 'Standing desk mat', price: 39, quantity: 1 },
+ { name: 'Cable organizer', price: 12, quantity: 3 },
+ { name: 'Monitor light bar', price: 59, quantity: 1 },
+ ],
+ },
+ {
+ id: 3,
+ number: '#1044',
+ customer: 'Alice Johnson',
+ status: 'Draft',
+ shipping: 0,
+ items: [],
+ },
+ {
+ id: 4,
+ number: '#1045',
+ customer: 'Bob Brown',
+ status: 'Refunded',
+ shipping: 7.5,
+ items: [
+ { name: 'Rubber duck (debugging edition)', price: 9.99, quantity: 4 },
+ ],
+ },
+]
+
+const OrderDetail = ({ order }: { order: DemoOrder }) => {
+ const subtotal = subtotalOf(order)
+
+ return (
+ <div className="not-prose flex max-w-xl flex-col gap-3 text-sm leading-relaxed">
+ <ul
+ aria-label={`Line items for order ${order.number}`}
+ className="flex flex-col gap-2"
+ >
+ {order.items.map((item) => (
+ <li
+ className="flex items-baseline justify-between gap-4"
+ key={item.name}
+ >
+ <span className="text-foreground min-w-0 text-pretty">
+ {item.name}
+ <span className="text-muted-foreground"> × {item.quantity}</span>
+ </span>
+ <span className="tabular-nums">
+ {money.format(item.price * item.quantity)}
+ </span>
+ </li>
+ ))}
+ </ul>
+
+ <dl className="border-foreground/10 flex flex-col gap-1 border-t pt-3">
+ <div className="text-muted-foreground flex justify-between gap-4">
+ <dt>Subtotal</dt>
+ <dd className="tabular-nums">{money.format(subtotal)}</dd>
+ </div>
+ <div className="text-muted-foreground flex justify-between gap-4">
+ <dt>Shipping</dt>
+ <dd className="tabular-nums">
+ {order.shipping ? money.format(order.shipping) : 'Free'}
+ </dd>
+ </div>
+ <div className="flex justify-between gap-4 font-medium">
+ <dt>Total</dt>
+ <dd className="tabular-nums">
+ {money.format(subtotal + order.shipping)}
+ </dd>
+ </div>
+ </dl>
+ </div>
+ )
+}
+
+export default function DataTableExpandableExample() {
+ return (
+ <DataTable
+ columns={columns}
+ edges={edges}
+ expandable={{
+ canExpand: (order) => order.items.length > 0,
+ defaultExpanded: [1],
+ render: (order) => <OrderDetail order={order} />,
+ }}
+ id="orders-expandable-table"
+ order={{
+ defaultOrder: {
+ column: 'number',
+ order: 'asc',
+ },
+ }}
+ pageInfo={{
+ count: edges.length,
+ currentPage: 1,
+ endCursor: null,
+ hasNextPage: false,
+ hasPreviousPage: false,
+ pageSize: 10,
+ startCursor: null,
+ totalCount: edges.length,
+ totalPages: 1,
+ }}
+ />
+ )
+}
diff --git a/apps/web/src/docs/examples/data-table-filters.tsx b/apps/web/src/docs/examples/data-table-filters.tsx
new file mode 100644
index 000000000..f11f5d6ed
--- /dev/null
+++ b/apps/web/src/docs/examples/data-table-filters.tsx
@@ -0,0 +1,62 @@
+import { Badge } from '@vitnode/core/components/ui/badge'
+
+import { resolveLocalTable } from '../local-table-data'
+import { type ColumnDef, DataTable } from '../preview-data-table'
+import { type DemoUser, demoUsers } from './data-table-demo-users'
+
+const statusVariant = {
+ Active: 'success',
+ Banned: 'destructive',
+ Invited: 'secondary',
+} as const
+
+const columns: ColumnDef<DemoUser>[] = [
+ { accessorKey: 'name', header: 'Name' },
+ { accessorKey: 'role', header: 'Role' },
+ {
+ accessorKey: 'status',
+ header: 'Status',
+ cell: ({ row }) => (
+ <Badge variant={statusVariant[row.status]}>{row.status}</Badge>
+ ),
+ },
+]
+
+const defaultOrder = { column: 'name', order: 'asc' } as const
+
+export default function DataTableFiltersExample() {
+ return (
+ <DataTable
+ columns={columns}
+ filters={[
+ {
+ id: 'status',
+ label: 'Status',
+ options: [
+ { value: 'Active', label: 'Active' },
+ { value: 'Invited', label: 'Invited' },
+ { value: 'Banned', label: 'Banned' },
+ ],
+ },
+ {
+ id: 'role',
+ label: 'Role',
+ options: [
+ { value: 'Admin', label: 'Admin' },
+ { value: 'Editor', label: 'Editor' },
+ { value: 'Viewer', label: 'Viewer' },
+ ],
+ },
+ ]}
+ id="docs-filters-table"
+ order={{ defaultOrder }}
+ resolve={(params) =>
+ resolveLocalTable(demoUsers, params, {
+ defaultOrder,
+ sortBy: { name: (row) => row.name },
+ filters: { role: (row) => row.role, status: (row) => row.status },
+ })
+ }
+ />
+ )
+}
diff --git a/apps/web/src/docs/examples/data-table-pagination.tsx b/apps/web/src/docs/examples/data-table-pagination.tsx
new file mode 100644
index 000000000..15e23f5d0
--- /dev/null
+++ b/apps/web/src/docs/examples/data-table-pagination.tsx
@@ -0,0 +1,27 @@
+import { resolveLocalTable } from '../local-table-data'
+import { type ColumnDef, DataTable } from '../preview-data-table'
+import { type DemoUser, demoUsers } from './data-table-demo-users'
+
+const columns: ColumnDef<DemoUser>[] = [
+ { accessorKey: 'id', header: '#' },
+ { accessorKey: 'name', header: 'Name' },
+ { accessorKey: 'email', header: 'Email' },
+]
+
+const defaultOrder = { column: 'id', order: 'asc' } as const
+
+export default function DataTablePaginationExample() {
+ return (
+ <DataTable
+ columns={columns}
+ id="docs-pagination-table"
+ order={{ columns: ['id', 'name'], defaultOrder }}
+ resolve={(params) =>
+ resolveLocalTable(demoUsers, params, {
+ defaultOrder,
+ sortBy: { id: (row) => row.id, name: (row) => row.name },
+ })
+ }
+ />
+ )
+}
diff --git a/apps/web/src/docs/examples/data-table-reorderable.tsx b/apps/web/src/docs/examples/data-table-reorderable.tsx
new file mode 100644
index 000000000..2110899dd
--- /dev/null
+++ b/apps/web/src/docs/examples/data-table-reorderable.tsx
@@ -0,0 +1,130 @@
+import { Badge } from '@vitnode/core/components/ui/badge'
+import { Button } from '@vitnode/core/components/ui/button'
+import { toast } from 'sonner'
+
+import { type ColumnDef, DataTable } from '../preview-data-table'
+
+interface BacklogItem {
+ estimate: number
+ id: number
+ notes: string
+ priority: 'High' | 'Low' | 'Medium'
+ title: string
+}
+
+const priorityVariant = {
+ High: 'destructive',
+ Medium: 'warning',
+ Low: 'outline',
+} as const
+
+const columns: ColumnDef<BacklogItem>[] = [
+ {
+ accessorKey: 'title',
+ header: 'Task',
+ cell: ({ row }) => <span className="font-medium">{row.title}</span>,
+ },
+ {
+ accessorKey: 'priority',
+ header: 'Priority',
+ cell: ({ row }) => (
+ <Badge variant={priorityVariant[row.priority]}>{row.priority}</Badge>
+ ),
+ },
+ {
+ accessorKey: 'estimate',
+ header: 'Estimate',
+ align: 'right',
+ cell: ({ row }) => <span className="tabular-nums">{row.estimate} pt</span>,
+ },
+ {
+ id: 'actions',
+ header: '',
+ align: 'right',
+ cell: ({ row }) => (
+ <Button
+ onClick={() => toast.info(`Editing "${row.title}"`)}
+ size="sm"
+ variant="outline"
+ >
+ Edit
+ </Button>
+ ),
+ },
+]
+
+const edges: BacklogItem[] = [
+ {
+ id: 1,
+ title: 'Fix the login redirect loop',
+ priority: 'High',
+ estimate: 3,
+ notes: 'Happens only after a password reset. Reproduced on Safari 18.',
+ },
+ {
+ id: 2,
+ title: 'Dark mode for the invoice PDF',
+ priority: 'Medium',
+ estimate: 5,
+ notes: 'Accountants asked nicely. Twice.',
+ },
+ {
+ id: 3,
+ title: 'Rename "Misc" to something useful',
+ priority: 'Low',
+ estimate: 1,
+ notes: 'Ideas so far: "Other", "Everything else", "The drawer".',
+ },
+ {
+ id: 4,
+ title: 'Add CSV export to reports',
+ priority: 'Medium',
+ estimate: 8,
+ notes: 'Respect the active filters, and keep the column order.',
+ },
+]
+
+const saveOrder = async (ids: number[]) => {
+ await new Promise((resolve) => setTimeout(resolve, 400))
+ toast.success('Order saved', {
+ description: `New order: ${ids.join(', ')}`,
+ })
+}
+
+export default function DataTableReorderableExample() {
+ return (
+ <DataTable
+ columns={columns}
+ edges={edges}
+ expandable={{
+ render: (item) => (
+ <p className="text-muted-foreground m-0 text-sm leading-relaxed text-pretty">
+ {item.notes}
+ </p>
+ ),
+ }}
+ id="backlog-reorderable-table"
+ order={{
+ defaultOrder: {
+ column: 'id',
+ order: 'asc',
+ },
+ }}
+ pageInfo={{
+ count: edges.length,
+ currentPage: 1,
+ endCursor: null,
+ hasNextPage: false,
+ hasPreviousPage: false,
+ pageSize: 10,
+ startCursor: null,
+ totalCount: edges.length,
+ totalPages: 1,
+ }}
+ reorderable={{
+ getRowLabel: (item) => item.title,
+ onReorder: saveOrder,
+ }}
+ />
+ )
+}
diff --git a/apps/web/src/docs/examples/data-table-search.tsx b/apps/web/src/docs/examples/data-table-search.tsx
new file mode 100644
index 000000000..f7832ea68
--- /dev/null
+++ b/apps/web/src/docs/examples/data-table-search.tsx
@@ -0,0 +1,36 @@
+import { Badge } from '@vitnode/core/components/ui/badge'
+
+import { resolveLocalTable } from '../local-table-data'
+import { type ColumnDef, DataTable } from '../preview-data-table'
+import { type DemoUser, demoUsers } from './data-table-demo-users'
+
+const columns: ColumnDef<DemoUser>[] = [
+ { accessorKey: 'name', header: 'Name' },
+ { accessorKey: 'email', header: 'Email' },
+ {
+ accessorKey: 'role',
+ header: 'Role',
+ cell: ({ row }) => <Badge variant="outline">{row.role}</Badge>,
+ },
+]
+
+const defaultOrder = { column: 'name', order: 'asc' } as const
+
+export default function DataTableSearchExample() {
+ return (
+ <DataTable
+ columns={columns}
+ id="docs-search-table"
+ order={{ columns: ['name'], defaultOrder }}
+ resolve={(params) =>
+ resolveLocalTable(demoUsers, params, {
+ defaultOrder,
+ sortBy: { name: (row) => row.name },
+ searchIn: (row) => `${row.name} ${row.email}`,
+ })
+ }
+ search
+ searchPlaceholder="Search users... try 'hopper'"
+ />
+ )
+}
diff --git a/apps/web/src/docs/examples/dialog.tsx b/apps/web/src/docs/examples/dialog.tsx
index b6ce6b6bc..100ea7472 100644
--- a/apps/web/src/docs/examples/dialog.tsx
+++ b/apps/web/src/docs/examples/dialog.tsx
@@ -1,4 +1,5 @@
import { Button } from '@vitnode/core/components/ui/button'
+import { CopyButton } from '@vitnode/core/components/ui/copy-button'
import {
Dialog,
DialogClose,
@@ -9,22 +10,41 @@ import {
DialogTitle,
DialogTrigger,
} from '@vitnode/core/components/ui/dialog'
+import { Input } from '@vitnode/core/components/ui/input'
+import { Share2Icon } from 'lucide-react'
+
+const shareLink = 'https://vitnode.com/docs/ui/dialog'
export default function DialogDemo() {
return (
<Dialog>
- <DialogTrigger render={<Button variant="outline">Open</Button>} />
+ <DialogTrigger
+ render={
+ <Button variant="outline">
+ <Share2Icon />
+ Share
+ </Button>
+ }
+ />
<DialogContent>
<DialogHeader>
- <DialogTitle>Are you absolutely sure?</DialogTitle>
+ <DialogTitle>Share this page</DialogTitle>
<DialogDescription>
- This action cannot be undone. This will permanently delete your
- account and remove your data from our servers.
+ Anyone with the link can read it - no account needed. Spread the
+ word!
</DialogDescription>
</DialogHeader>
+ <div className="flex items-center gap-2">
+ <Input
+ aria-label="Page link"
+ className="flex-1"
+ readOnly
+ value={shareLink}
+ />
+ <CopyButton aria-label="Copy link" content={shareLink} />
+ </div>
<DialogFooter>
- <DialogClose render={<Button variant="outline">Cancel</Button>} />
- <Button variant="destructive">Yes, delete account</Button>
+ <DialogClose render={<Button>Done</Button>} />
</DialogFooter>
</DialogContent>
</Dialog>
diff --git a/apps/web/src/docs/examples/empty-avatar.tsx b/apps/web/src/docs/examples/empty-avatar.tsx
new file mode 100644
index 000000000..77350c214
--- /dev/null
+++ b/apps/web/src/docs/examples/empty-avatar.tsx
@@ -0,0 +1,37 @@
+import {
+ Avatar,
+ AvatarFallback,
+ AvatarImage,
+} from '@vitnode/core/components/ui/avatar'
+import { Button } from '@vitnode/core/components/ui/button'
+import {
+ Empty,
+ EmptyContent,
+ EmptyDescription,
+ EmptyHeader,
+ EmptyMedia,
+ EmptyTitle,
+} from '@vitnode/core/components/ui/empty'
+
+export default function EmptyAvatarExample() {
+ return (
+ <Empty className="not-prose p-6 md:p-12">
+ <EmptyHeader>
+ <EmptyMedia>
+ <Avatar size="lg">
+ <AvatarImage alt="" src="/logo_vitnode_icon.svg" />
+ <AvatarFallback>VN</AvatarFallback>
+ </Avatar>
+ </EmptyMedia>
+ <EmptyTitle>Ada is offline</EmptyTitle>
+ <EmptyDescription>
+ She'll see your message the next time she signs in. Leave a note
+ and she can pick it up from there.
+ </EmptyDescription>
+ </EmptyHeader>
+ <EmptyContent>
+ <Button size="sm">Leave a message</Button>
+ </EmptyContent>
+ </Empty>
+ )
+}
diff --git a/apps/web/src/docs/examples/empty-outline.tsx b/apps/web/src/docs/examples/empty-outline.tsx
new file mode 100644
index 000000000..88bb27ca0
--- /dev/null
+++ b/apps/web/src/docs/examples/empty-outline.tsx
@@ -0,0 +1,33 @@
+import { Button } from '@vitnode/core/components/ui/button'
+import {
+ Empty,
+ EmptyContent,
+ EmptyDescription,
+ EmptyHeader,
+ EmptyMedia,
+ EmptyTitle,
+} from '@vitnode/core/components/ui/empty'
+import { CloudUpload, Upload } from 'lucide-react'
+
+export default function EmptyOutlineExample() {
+ return (
+ <Empty className="not-prose border p-6 md:p-12">
+ <EmptyHeader>
+ <EmptyMedia variant="icon">
+ <CloudUpload />
+ </EmptyMedia>
+ <EmptyTitle>No files uploaded</EmptyTitle>
+ <EmptyDescription>
+ This folder is emptier than a Monday morning inbox. Upload a file to
+ share it with your team.
+ </EmptyDescription>
+ </EmptyHeader>
+ <EmptyContent>
+ <Button variant="outline">
+ <Upload />
+ Upload files
+ </Button>
+ </EmptyContent>
+ </Empty>
+ )
+}
diff --git a/apps/web/src/docs/examples/empty-search.tsx b/apps/web/src/docs/examples/empty-search.tsx
new file mode 100644
index 000000000..2da72e089
--- /dev/null
+++ b/apps/web/src/docs/examples/empty-search.tsx
@@ -0,0 +1,82 @@
+import { Button } from '@vitnode/core/components/ui/button'
+import {
+ Empty,
+ EmptyContent,
+ EmptyDescription,
+ EmptyHeader,
+ EmptyMedia,
+ EmptyTitle,
+} from '@vitnode/core/components/ui/empty'
+import {
+ InputGroup,
+ InputGroupAddon,
+ InputGroupInput,
+} from '@vitnode/core/components/ui/input-group'
+import { Search, SearchX } from 'lucide-react'
+import React from 'react'
+
+const integrations = [
+ 'Amazon S3',
+ 'Nodemailer',
+ 'PostgreSQL',
+ 'reCAPTCHA',
+ 'Redis',
+]
+
+export default function EmptySearchExample() {
+ const [query, setQuery] = React.useState('xylophone')
+ const trimmed = query.trim()
+ const results = integrations.filter((integration) =>
+ integration.toLowerCase().includes(trimmed.toLowerCase()),
+ )
+
+ return (
+ <div className="not-prose flex w-full max-w-md flex-col gap-4">
+ <InputGroup>
+ <InputGroupInput
+ aria-label="Search integrations"
+ onChange={(event) => setQuery(event.target.value)}
+ placeholder="Search integrations..."
+ value={query}
+ />
+ <InputGroupAddon>
+ <Search />
+ </InputGroupAddon>
+ </InputGroup>
+
+ <p className="sr-only" role="status">
+ {results.length === 1
+ ? '1 integration'
+ : `${results.length} integrations`}
+ </p>
+
+ {results.length > 0 ? (
+ <ul className="flex flex-col divide-y rounded-lg border">
+ {results.map((integration) => (
+ <li className="px-4 py-2 text-sm leading-relaxed" key={integration}>
+ {integration}
+ </li>
+ ))}
+ </ul>
+ ) : (
+ <Empty className="border p-6 md:p-8">
+ <EmptyHeader>
+ <EmptyMedia variant="icon">
+ <SearchX />
+ </EmptyMedia>
+ <EmptyTitle>No integrations found</EmptyTitle>
+ <EmptyDescription>
+ Nothing matches “{trimmed}”. Check the spelling or try
+ a shorter search.
+ </EmptyDescription>
+ </EmptyHeader>
+ <EmptyContent>
+ <Button onClick={() => setQuery('')} size="sm" variant="outline">
+ Clear search
+ </Button>
+ </EmptyContent>
+ </Empty>
+ )}
+ </div>
+ )
+}
diff --git a/apps/web/src/docs/examples/empty.tsx b/apps/web/src/docs/examples/empty.tsx
new file mode 100644
index 000000000..78bb79646
--- /dev/null
+++ b/apps/web/src/docs/examples/empty.tsx
@@ -0,0 +1,37 @@
+import { Button } from '@vitnode/core/components/ui/button'
+import {
+ Empty,
+ EmptyContent,
+ EmptyDescription,
+ EmptyHeader,
+ EmptyMedia,
+ EmptyTitle,
+} from '@vitnode/core/components/ui/empty'
+import { ArrowUpRight, FolderCode } from 'lucide-react'
+
+export default function EmptyExample() {
+ return (
+ <Empty className="not-prose p-6 md:p-12">
+ <EmptyHeader>
+ <EmptyMedia variant="icon">
+ <FolderCode />
+ </EmptyMedia>
+ <EmptyTitle>No projects yet</EmptyTitle>
+ <EmptyDescription>
+ You haven't created any projects yet. Start a fresh one or import
+ an existing repository.
+ </EmptyDescription>
+ </EmptyHeader>
+ <EmptyContent>
+ <div className="flex flex-wrap justify-center gap-2">
+ <Button>Create project</Button>
+ <Button variant="outline">Import project</Button>
+ </div>
+ </EmptyContent>
+ <Button size="sm" variant="link">
+ Learn more
+ <ArrowUpRight />
+ </Button>
+ </Empty>
+ )
+}
diff --git a/apps/web/src/docs/examples/field-choice-card.tsx b/apps/web/src/docs/examples/field-choice-card.tsx
new file mode 100644
index 000000000..09782de1d
--- /dev/null
+++ b/apps/web/src/docs/examples/field-choice-card.tsx
@@ -0,0 +1,62 @@
+import {
+ Field,
+ FieldContent,
+ FieldDescription,
+ FieldLabel,
+ FieldLegend,
+ FieldSet,
+ FieldTitle,
+} from '@vitnode/core/components/ui/field'
+import {
+ RadioGroup,
+ RadioGroupItem,
+} from '@vitnode/core/components/ui/radio-group'
+import React from 'react'
+
+const plans = [
+ {
+ value: 'hobby',
+ title: 'Hobby',
+ description: 'Free forever. Perfect for side quests.',
+ },
+ {
+ value: 'team',
+ title: 'Team',
+ description: 'Shared workspaces and roles for up to 20 people.',
+ },
+ {
+ value: 'enterprise',
+ title: 'Enterprise',
+ description: 'Single sign-on, audit logs and a very patient support team.',
+ disabled: true,
+ },
+]
+
+export default function FieldChoiceCardExample() {
+ const id = React.useId()
+
+ return (
+ <FieldSet className="not-prose w-full">
+ <FieldLegend variant="label">Plan</FieldLegend>
+ <FieldDescription>You can switch plans at any time.</FieldDescription>
+
+ <RadioGroup defaultValue="team">
+ {plans.map((plan) => (
+ <FieldLabel htmlFor={`${id}-${plan.value}`} key={plan.value}>
+ <Field data-disabled={plan.disabled} orientation="horizontal">
+ <FieldContent>
+ <FieldTitle>{plan.title}</FieldTitle>
+ <FieldDescription>{plan.description}</FieldDescription>
+ </FieldContent>
+ <RadioGroupItem
+ disabled={plan.disabled}
+ id={`${id}-${plan.value}`}
+ value={plan.value}
+ />
+ </Field>
+ </FieldLabel>
+ ))}
+ </RadioGroup>
+ </FieldSet>
+ )
+}
diff --git a/apps/web/src/docs/examples/field-responsive.tsx b/apps/web/src/docs/examples/field-responsive.tsx
new file mode 100644
index 000000000..1bc5a9d4a
--- /dev/null
+++ b/apps/web/src/docs/examples/field-responsive.tsx
@@ -0,0 +1,45 @@
+import {
+ Field,
+ FieldContent,
+ FieldDescription,
+ FieldGroup,
+ FieldLabel,
+ FieldSeparator,
+} from '@vitnode/core/components/ui/field'
+import { Input } from '@vitnode/core/components/ui/input'
+import { Textarea } from '@vitnode/core/components/ui/textarea'
+import React from 'react'
+
+export default function FieldResponsiveExample() {
+ const id = React.useId()
+
+ return (
+ <FieldGroup className="not-prose w-full">
+ <Field orientation="responsive">
+ <FieldContent>
+ <FieldLabel htmlFor={`${id}-name`}>Display name</FieldLabel>
+ <FieldDescription>Shown next to your posts.</FieldDescription>
+ </FieldContent>
+ <Input
+ className="@md/field-group:max-w-64 @md/field-group:min-w-64"
+ defaultValue="Captain Hook"
+ id={`${id}-name`}
+ />
+ </Field>
+
+ <FieldSeparator />
+
+ <Field orientation="responsive">
+ <FieldContent>
+ <FieldLabel htmlFor={`${id}-bio`}>Bio</FieldLabel>
+ <FieldDescription>A sentence or two. No novels.</FieldDescription>
+ </FieldContent>
+ <Textarea
+ className="@md/field-group:max-w-64 @md/field-group:min-w-64"
+ id={`${id}-bio`}
+ placeholder="I build things and occasionally break them."
+ />
+ </Field>
+ </FieldGroup>
+ )
+}
diff --git a/apps/web/src/docs/examples/field.tsx b/apps/web/src/docs/examples/field.tsx
new file mode 100644
index 000000000..aef97e005
--- /dev/null
+++ b/apps/web/src/docs/examples/field.tsx
@@ -0,0 +1,89 @@
+import { Checkbox } from '@vitnode/core/components/ui/checkbox'
+import {
+ Field,
+ FieldContent,
+ FieldDescription,
+ FieldError,
+ FieldGroup,
+ FieldLabel,
+ FieldLegend,
+ FieldSeparator,
+ FieldSet,
+} from '@vitnode/core/components/ui/field'
+import { Input } from '@vitnode/core/components/ui/input'
+import { Switch } from '@vitnode/core/components/ui/switch'
+import React from 'react'
+
+const EMAIL_PATTERN = /^\S+@\S+\.\S+$/
+
+export default function FieldExample() {
+ const id = React.useId()
+ const [backupEmail, setBackupEmail] = React.useState('captain@')
+ const isEmailInvalid = !EMAIL_PATTERN.test(backupEmail)
+
+ return (
+ <FieldSet className="not-prose w-full">
+ <FieldLegend>Notifications</FieldLegend>
+ <FieldDescription>
+ Pick how loudly we should knock on your door.
+ </FieldDescription>
+
+ <FieldGroup>
+ <Field orientation="horizontal">
+ <FieldContent>
+ <FieldLabel htmlFor={`${id}-digest`}>Weekly digest</FieldLabel>
+ <FieldDescription>
+ A short recap of everything you missed, every Monday.
+ </FieldDescription>
+ </FieldContent>
+ <Switch defaultChecked id={`${id}-digest`} />
+ </Field>
+
+ <Field orientation="horizontal">
+ <Checkbox defaultChecked id={`${id}-mentions`} />
+ <FieldContent>
+ <FieldLabel htmlFor={`${id}-mentions`}>Mentions</FieldLabel>
+ <FieldDescription>
+ Ping me when someone writes my name with an @ in front.
+ </FieldDescription>
+ </FieldContent>
+ </Field>
+
+ <Field orientation="horizontal">
+ <Checkbox id={`${id}-marketing`} />
+ <FieldLabel htmlFor={`${id}-marketing`}>
+ Product news, at most once a month
+ </FieldLabel>
+ </Field>
+
+ <FieldSeparator />
+
+ <Field data-invalid={isEmailInvalid}>
+ <FieldLabel htmlFor={`${id}-backup-email`}>Backup email</FieldLabel>
+ <Input
+ aria-describedby={
+ isEmailInvalid
+ ? `${id}-backup-email-description ${id}-backup-email-error`
+ : `${id}-backup-email-description`
+ }
+ aria-invalid={isEmailInvalid}
+ id={`${id}-backup-email`}
+ onChange={(event) => {
+ setBackupEmail(event.target.value)
+ }}
+ type="email"
+ value={backupEmail}
+ />
+ <FieldDescription id={`${id}-backup-email-description`}>
+ Only used when your main inbox goes missing.
+ </FieldDescription>
+ {isEmailInvalid && (
+ <FieldError id={`${id}-backup-email-error`}>
+ That does not look like an email address yet.
+ </FieldError>
+ )}
+ </Field>
+ </FieldGroup>
+ </FieldSet>
+ )
+}
diff --git a/apps/web/src/docs/examples/image-zoom.tsx b/apps/web/src/docs/examples/image-zoom.tsx
new file mode 100644
index 000000000..e59e71160
--- /dev/null
+++ b/apps/web/src/docs/examples/image-zoom.tsx
@@ -0,0 +1,30 @@
+import { ImageZoom } from '@vitnode/core/components/ui/image-zoom'
+
+import adminDashboardDark from '@/site/home/assets/admin-dashboard-dark-800.webp'
+import adminDashboardDarkFull from '@/site/home/assets/admin-dashboard-dark.webp'
+import adminDashboardLight from '@/site/home/assets/admin-dashboard-light-800.webp'
+import adminDashboardLightFull from '@/site/home/assets/admin-dashboard-light.webp'
+
+export default function ImageZoomExample() {
+ return (
+ <figure className="not-prose flex w-full flex-col gap-2">
+ <ImageZoom
+ alt="The VitNode AdminCP dashboard"
+ className="dark:hidden"
+ imageClassName="w-full rounded-md border"
+ src={adminDashboardLight}
+ zoomSrc={adminDashboardLightFull}
+ />
+ <ImageZoom
+ alt="The VitNode AdminCP dashboard"
+ className="hidden dark:block"
+ imageClassName="w-full rounded-md border"
+ src={adminDashboardDark}
+ zoomSrc={adminDashboardDarkFull}
+ />
+ <figcaption className="text-muted-foreground text-center text-sm leading-relaxed">
+ Click the screenshot to take a closer look.
+ </figcaption>
+ </figure>
+ )
+}
diff --git a/apps/web/src/docs/examples/input-otp.tsx b/apps/web/src/docs/examples/input-otp.tsx
new file mode 100644
index 000000000..af7b7ebf9
--- /dev/null
+++ b/apps/web/src/docs/examples/input-otp.tsx
@@ -0,0 +1,50 @@
+import { AutoForm } from '@vitnode/core/components/form/auto-form'
+import { AutoFormInputOTP } from '@vitnode/core/components/form/fields/input-otp'
+import { setFormFieldError } from '@vitnode/core/components/ui/form'
+import { toast } from 'sonner'
+import { z } from 'zod'
+
+const DEMO_CODE = '123456'
+
+export default function InputOTPExample() {
+ const formSchema = z.object({
+ code: z
+ .string()
+ .length(6, 'Enter all 6 digits')
+ .regex(/^\d+$/, 'Only digits, please'),
+ })
+
+ return (
+ <AutoForm
+ fields={[
+ {
+ id: 'code',
+ component: (props) => (
+ <AutoFormInputOTP
+ {...props}
+ description={`We sent a 6-digit code to a****@vitnode.com. Psst, try ${DEMO_CODE}.`}
+ label="Verify your account"
+ />
+ ),
+ },
+ ]}
+ formSchema={formSchema}
+ onSubmit={(values, form) => {
+ if (values.code !== DEMO_CODE) {
+ setFormFieldError(
+ form,
+ 'code',
+ "That code doesn't match. Give it another go.",
+ )
+
+ return
+ }
+
+ toast.success('Code verified', {
+ description: 'Welcome aboard! Your account is now verified.',
+ })
+ }}
+ submitButtonProps={{ children: 'Verify' }}
+ />
+ )
+}
diff --git a/apps/web/src/docs/examples/item-group.tsx b/apps/web/src/docs/examples/item-group.tsx
new file mode 100644
index 000000000..788556f92
--- /dev/null
+++ b/apps/web/src/docs/examples/item-group.tsx
@@ -0,0 +1,61 @@
+import {
+ Avatar,
+ AvatarFallback,
+ AvatarImage,
+} from '@vitnode/core/components/ui/avatar'
+import { Button } from '@vitnode/core/components/ui/button'
+import {
+ Item,
+ ItemActions,
+ ItemContent,
+ ItemDescription,
+ ItemGroup,
+ ItemMedia,
+ ItemSeparator,
+ ItemTitle,
+} from '@vitnode/core/components/ui/item'
+import { Plus } from 'lucide-react'
+import { Fragment } from 'react'
+
+const people = [
+ { initials: 'VN', name: 'VitNode Bot', email: 'bot@vitnode.com', logo: true },
+ { initials: 'AL', name: 'Ada Lovelace', email: 'ada@example.com' },
+ { initials: 'GH', name: 'Grace Hopper', email: 'grace@example.com' },
+]
+
+export default function ItemGroupExample() {
+ return (
+ <div className="not-prose flex w-full max-w-md flex-col">
+ <ItemGroup aria-label="Team members">
+ {people.map((person, index) => (
+ <Fragment key={person.email}>
+ {index > 0 && <ItemSeparator />}
+ <Item role="listitem">
+ <ItemMedia>
+ <Avatar>
+ {person.logo && (
+ <AvatarImage alt="" src="/logo_vitnode_icon.svg" />
+ )}
+ <AvatarFallback>{person.initials}</AvatarFallback>
+ </Avatar>
+ </ItemMedia>
+ <ItemContent>
+ <ItemTitle>{person.name}</ItemTitle>
+ <ItemDescription>{person.email}</ItemDescription>
+ </ItemContent>
+ <ItemActions>
+ <Button
+ aria-label={`Invite ${person.name}`}
+ size="icon-sm"
+ variant="outline"
+ >
+ <Plus />
+ </Button>
+ </ItemActions>
+ </Item>
+ </Fragment>
+ ))}
+ </ItemGroup>
+ </div>
+ )
+}
diff --git a/apps/web/src/docs/examples/item-header.tsx b/apps/web/src/docs/examples/item-header.tsx
new file mode 100644
index 000000000..430f1e3a7
--- /dev/null
+++ b/apps/web/src/docs/examples/item-header.tsx
@@ -0,0 +1,38 @@
+import { Badge } from '@vitnode/core/components/ui/badge'
+import { Button } from '@vitnode/core/components/ui/button'
+import {
+ Item,
+ ItemContent,
+ ItemDescription,
+ ItemFooter,
+ ItemHeader,
+ ItemTitle,
+} from '@vitnode/core/components/ui/item'
+
+export default function ItemHeaderExample() {
+ return (
+ <div className="not-prose flex w-full max-w-md flex-col">
+ <Item variant="outline">
+ <ItemHeader>
+ <Badge variant="success">Active</Badge>
+ <span className="text-muted-foreground text-xs">Updated 2h ago</span>
+ </ItemHeader>
+ <ItemContent>
+ <ItemTitle>Weekly newsletter</ItemTitle>
+ <ItemDescription>
+ Sent every Monday to 1,204 subscribers. Nobody has unsubscribed this
+ week, which we choose to take personally.
+ </ItemDescription>
+ </ItemContent>
+ <ItemFooter>
+ <span className="text-muted-foreground text-xs">
+ Next send: Monday
+ </span>
+ <Button size="sm" variant="outline">
+ Edit
+ </Button>
+ </ItemFooter>
+ </Item>
+ </div>
+ )
+}
diff --git a/apps/web/src/docs/examples/item-link.tsx b/apps/web/src/docs/examples/item-link.tsx
new file mode 100644
index 000000000..5c234fcac
--- /dev/null
+++ b/apps/web/src/docs/examples/item-link.tsx
@@ -0,0 +1,56 @@
+import {
+ Item,
+ ItemActions,
+ ItemContent,
+ ItemDescription,
+ ItemMedia,
+ ItemTitle,
+} from '@vitnode/core/components/ui/item'
+import { BookOpen, ChevronRight, ExternalLink } from 'lucide-react'
+
+export default function ItemLinkExample() {
+ return (
+ <div className="not-prose flex w-full max-w-md flex-col gap-4">
+ <Item
+ render={
+ <a href="/docs/ui/avatar">
+ <ItemMedia variant="icon">
+ <BookOpen />
+ </ItemMedia>
+ <ItemContent>
+ <ItemTitle>Read the Avatar docs</ItemTitle>
+ <ItemDescription>
+ The whole row is one link, hover state included.
+ </ItemDescription>
+ </ItemContent>
+ <ItemActions>
+ <ChevronRight aria-hidden className="size-4" />
+ </ItemActions>
+ </a>
+ }
+ />
+
+ <Item
+ render={
+ <a
+ href="https://ui.shadcn.com/docs/components/base/item"
+ rel="noreferrer"
+ target="_blank"
+ >
+ <ItemContent>
+ <ItemTitle>Inspired by shadcn/ui</ItemTitle>
+ <ItemDescription>
+ Opens in a new tab, so this page stays right here.
+ </ItemDescription>
+ </ItemContent>
+ <ItemActions>
+ <ExternalLink aria-hidden className="size-4" />
+ <span className="sr-only">(opens in a new tab)</span>
+ </ItemActions>
+ </a>
+ }
+ variant="outline"
+ />
+ </div>
+ )
+}
diff --git a/apps/web/src/docs/examples/item-sizes.tsx b/apps/web/src/docs/examples/item-sizes.tsx
new file mode 100644
index 000000000..74c54034a
--- /dev/null
+++ b/apps/web/src/docs/examples/item-sizes.tsx
@@ -0,0 +1,32 @@
+import {
+ Item,
+ ItemContent,
+ ItemDescription,
+ ItemMedia,
+ ItemTitle,
+} from '@vitnode/core/components/ui/item'
+import { Inbox } from 'lucide-react'
+
+const sizes = [
+ { size: 'default', title: 'Default size' },
+ { size: 'sm', title: 'Small size' },
+ { size: 'xs', title: 'Extra small size' },
+] as const
+
+export default function ItemSizesExample() {
+ return (
+ <div className="not-prose flex w-full max-w-md flex-col gap-4">
+ {sizes.map((item) => (
+ <Item key={item.size} size={item.size} variant="outline">
+ <ItemMedia variant="icon">
+ <Inbox />
+ </ItemMedia>
+ <ItemContent>
+ <ItemTitle>{item.title}</ItemTitle>
+ <ItemDescription>3 unread messages are waiting.</ItemDescription>
+ </ItemContent>
+ </Item>
+ ))}
+ </div>
+ )
+}
diff --git a/apps/web/src/docs/examples/item-variants.tsx b/apps/web/src/docs/examples/item-variants.tsx
new file mode 100644
index 000000000..0b26c59f3
--- /dev/null
+++ b/apps/web/src/docs/examples/item-variants.tsx
@@ -0,0 +1,46 @@
+import { Button } from '@vitnode/core/components/ui/button'
+import {
+ Item,
+ ItemActions,
+ ItemContent,
+ ItemDescription,
+ ItemTitle,
+} from '@vitnode/core/components/ui/item'
+
+const variants = [
+ {
+ variant: 'default',
+ title: 'Default',
+ description: 'No border, no background. Blends right into the page.',
+ },
+ {
+ variant: 'outline',
+ title: 'Outline',
+ description: 'A subtle border for rows that need a little structure.',
+ },
+ {
+ variant: 'muted',
+ title: 'Muted',
+ description: 'A soft background for secondary or grouped content.',
+ },
+] as const
+
+export default function ItemVariantsExample() {
+ return (
+ <div className="not-prose flex w-full max-w-md flex-col gap-4">
+ {variants.map((item) => (
+ <Item key={item.variant} variant={item.variant}>
+ <ItemContent>
+ <ItemTitle>{item.title}</ItemTitle>
+ <ItemDescription>{item.description}</ItemDescription>
+ </ItemContent>
+ <ItemActions>
+ <Button size="sm" variant="outline">
+ Open
+ </Button>
+ </ItemActions>
+ </Item>
+ ))}
+ </div>
+ )
+}
diff --git a/apps/web/src/docs/examples/item.tsx b/apps/web/src/docs/examples/item.tsx
new file mode 100644
index 000000000..4c924e846
--- /dev/null
+++ b/apps/web/src/docs/examples/item.tsx
@@ -0,0 +1,51 @@
+import { Button } from '@vitnode/core/components/ui/button'
+import {
+ Item,
+ ItemActions,
+ ItemContent,
+ ItemDescription,
+ ItemMedia,
+ ItemTitle,
+} from '@vitnode/core/components/ui/item'
+import { BadgeCheck, ChevronRight, ShieldCheck } from 'lucide-react'
+
+export default function ItemExample() {
+ return (
+ <div className="not-prose flex w-full max-w-md flex-col gap-6">
+ <Item variant="outline">
+ <ItemMedia variant="icon">
+ <ShieldCheck />
+ </ItemMedia>
+ <ItemContent>
+ <ItemTitle>Two-factor authentication</ItemTitle>
+ <ItemDescription>
+ Add a second lock to your account. Future you will say thanks.
+ </ItemDescription>
+ </ItemContent>
+ <ItemActions>
+ <Button size="sm" variant="outline">
+ Enable
+ </Button>
+ </ItemActions>
+ </Item>
+
+ <Item
+ render={
+ <a href="#as-a-link">
+ <ItemMedia variant="icon">
+ <BadgeCheck />
+ </ItemMedia>
+ <ItemContent>
+ <ItemTitle>Your email has been verified</ItemTitle>
+ </ItemContent>
+ <ItemActions>
+ <ChevronRight aria-hidden className="size-4" />
+ </ItemActions>
+ </a>
+ }
+ size="sm"
+ variant="outline"
+ />
+ </div>
+ )
+}
diff --git a/apps/web/src/docs/examples/kbd.tsx b/apps/web/src/docs/examples/kbd.tsx
new file mode 100644
index 000000000..921871867
--- /dev/null
+++ b/apps/web/src/docs/examples/kbd.tsx
@@ -0,0 +1,107 @@
+import { Button } from '@vitnode/core/components/ui/button'
+import {
+ InputGroup,
+ InputGroupAddon,
+ InputGroupInput,
+} from '@vitnode/core/components/ui/input-group'
+import { Kbd, KbdGroup } from '@vitnode/core/components/ui/kbd'
+import { TooltipWithContent } from '@vitnode/core/components/ui/tooltip'
+import { SaveIcon, SearchIcon } from 'lucide-react'
+import React from 'react'
+
+const subscribeToNothing = () => () => {}
+
+const useIsApple = () =>
+ React.useSyncExternalStore(
+ subscribeToNothing,
+ () => /Mac|iPhone|iPad|iPod/.test(navigator.userAgent),
+ () => true,
+ )
+
+const modifierKeys = [
+ { symbol: '⌘', name: 'Command' },
+ { symbol: '⇧', name: 'Shift' },
+ { symbol: '⌥', name: 'Option' },
+ { symbol: '⌃', name: 'Control' },
+]
+
+const ModifierKey = () => {
+ const isApple = useIsApple()
+
+ if (isApple) {
+ return (
+ <Kbd>
+ <span aria-hidden="true">⌘</span>
+ <span className="sr-only">Command</span>
+ </Kbd>
+ )
+ }
+
+ return <Kbd>Ctrl</Kbd>
+}
+
+export default function KbdExample() {
+ return (
+ <div className="not-prose flex w-full max-w-sm flex-col items-center gap-6">
+ <div className="flex flex-wrap items-center justify-center gap-2">
+ {modifierKeys.map(({ symbol, name }) => (
+ <Kbd key={name} title={name}>
+ <span aria-hidden="true">{symbol}</span>
+ <span className="sr-only">{name}</span>
+ </Kbd>
+ ))}
+ <Kbd>Esc</Kbd>
+ <Kbd>Enter</Kbd>
+ </div>
+
+ <p className="text-muted-foreground flex flex-wrap items-center justify-center gap-2 text-sm leading-relaxed text-pretty">
+ Open search with
+ <KbdGroup>
+ <ModifierKey />
+ <Kbd>K</Kbd>
+ </KbdGroup>
+ or copy with
+ <KbdGroup>
+ <ModifierKey />
+ <span aria-hidden="true">+</span>
+ <Kbd>C</Kbd>
+ </KbdGroup>
+ </p>
+
+ <div className="flex flex-wrap items-center justify-center gap-3">
+ <Button size="sm" variant="outline">
+ Accept
+ <Kbd>Enter</Kbd>
+ </Button>
+ <TooltipWithContent
+ text={
+ <>
+ Save changes
+ <KbdGroup>
+ <ModifierKey />
+ <Kbd>S</Kbd>
+ </KbdGroup>
+ </>
+ }
+ >
+ <Button aria-label="Save" size="icon-sm" variant="outline">
+ <SaveIcon />
+ </Button>
+ </TooltipWithContent>
+ </div>
+
+ <InputGroup>
+ <InputGroupInput aria-label="Search" placeholder="Search..." />
+ <InputGroupAddon>
+ <SearchIcon />
+ </InputGroupAddon>
+ <InputGroupAddon align="inline-end">
+ <KbdGroup>
+ <ModifierKey />
+ <Kbd>K</Kbd>
+ </KbdGroup>
+ </InputGroupAddon>
+ </InputGroup>
+ </div>
+ )
+}
diff --git a/apps/web/src/docs/examples/label.tsx b/apps/web/src/docs/examples/label.tsx
new file mode 100644
index 000000000..d4b9d16a2
--- /dev/null
+++ b/apps/web/src/docs/examples/label.tsx
@@ -0,0 +1,31 @@
+import { Checkbox } from '@vitnode/core/components/ui/checkbox'
+import { Input } from '@vitnode/core/components/ui/input'
+import { Label } from '@vitnode/core/components/ui/label'
+
+export default function LabelExample() {
+ return (
+ <div className="not-prose flex w-full max-w-sm flex-col gap-6">
+ <div className="flex items-center gap-3">
+ <Checkbox id="label-demo-terms" />
+ <Label htmlFor="label-demo-terms">I promise I read the terms</Label>
+ </div>
+
+ <div className="flex flex-col gap-2">
+ <Label htmlFor="label-demo-email">Email</Label>
+ <Input
+ autoComplete="email"
+ id="label-demo-email"
+ placeholder="you@example.com"
+ type="email"
+ />
+ </div>
+
+ <div className="flex items-center gap-3">
+ <Checkbox disabled id="label-demo-newsletter" />
+ <Label htmlFor="label-demo-newsletter">
+ Weekly newsletter (coming soon)
+ </Label>
+ </div>
+ </div>
+ )
+}
diff --git a/apps/web/src/docs/examples/marker.tsx b/apps/web/src/docs/examples/marker.tsx
new file mode 100644
index 000000000..259b013db
--- /dev/null
+++ b/apps/web/src/docs/examples/marker.tsx
@@ -0,0 +1,86 @@
+import { Bubble, BubbleContent } from '@vitnode/core/components/ui/bubble'
+import { Card } from '@vitnode/core/components/ui/card'
+import {
+ Marker,
+ MarkerContent,
+ MarkerIcon,
+} from '@vitnode/core/components/ui/marker'
+import { Spinner } from '@vitnode/core/components/ui/spinner'
+import { FileText, GitBranch, RotateCcw, Search } from 'lucide-react'
+import { toast } from 'sonner'
+
+export default function MarkerExample() {
+ return (
+ <Card
+ aria-label="Chat with the VitNode assistant"
+ className="not-prose flex w-full flex-col gap-6 px-4 py-8 sm:px-6"
+ role="log"
+ >
+ <Marker variant="separator">
+ <MarkerContent>Today</MarkerContent>
+ </Marker>
+
+ <Bubble align="end">
+ <BubbleContent>Can you clean up the stale routes?</BubbleContent>
+ </Bubble>
+
+ <Marker>
+ <MarkerIcon>
+ <GitBranch />
+ </MarkerIcon>
+ <MarkerContent>Switched to chore/stale-routes</MarkerContent>
+ </Marker>
+
+ <div className="flex flex-col gap-3">
+ <Marker variant="border">
+ <MarkerIcon>
+ <Search />
+ </MarkerIcon>
+ <MarkerContent>Explored 4 files</MarkerContent>
+ </Marker>
+ <Marker variant="border">
+ <MarkerIcon>
+ <FileText />
+ </MarkerIcon>
+ <MarkerContent>Opened routeTree.gen.ts</MarkerContent>
+ </Marker>
+ </div>
+
+ <Bubble variant="muted">
+ <BubbleContent>
+ Done - two routes were older than my coffee. Both are gone.
+ </BubbleContent>
+ </Bubble>
+
+ <Marker
+ render={
+ <button
+ className="hover:text-foreground transition-colors"
+ onClick={() => {
+ toast('Change reverted', {
+ description: 'The stale routes are back. Sorry, coffee.',
+ })
+ }}
+ type="button"
+ />
+ }
+ >
+ <MarkerIcon>
+ <RotateCcw />
+ </MarkerIcon>
+ <MarkerContent>Revert this change</MarkerContent>
+ </Marker>
+
+ <Marker variant="separator">
+ <MarkerContent>Conversation compacted</MarkerContent>
+ </Marker>
+
+ <Marker role="status">
+ <MarkerIcon>
+ <Spinner />
+ </MarkerIcon>
+ <MarkerContent className="shimmer">Thinking...</MarkerContent>
+ </Marker>
+ </Card>
+ )
+}
diff --git a/apps/web/src/docs/examples/menubar.tsx b/apps/web/src/docs/examples/menubar.tsx
new file mode 100644
index 000000000..fcf4290b4
--- /dev/null
+++ b/apps/web/src/docs/examples/menubar.tsx
@@ -0,0 +1,142 @@
+import {
+ Menubar,
+ MenubarCheckboxItem,
+ MenubarContent,
+ MenubarGroup,
+ MenubarItem,
+ MenubarLabel,
+ MenubarMenu,
+ MenubarRadioGroup,
+ MenubarRadioItem,
+ MenubarSeparator,
+ MenubarShortcut,
+ MenubarSub,
+ MenubarSubContent,
+ MenubarSubTrigger,
+ MenubarTrigger,
+} from '@vitnode/core/components/ui/menubar'
+import React from 'react'
+
+export default function MenubarExample() {
+ const [showBookmarks, setShowBookmarks] = React.useState(true)
+ const [showFullUrls, setShowFullUrls] = React.useState(false)
+ const [profile, setProfile] = React.useState('benoit')
+
+ return (
+ <Menubar>
+ <MenubarMenu>
+ <MenubarTrigger>File</MenubarTrigger>
+ <MenubarContent className="w-56">
+ <MenubarGroup>
+ <MenubarItem>
+ New tab
+ <MenubarShortcut>⌘T</MenubarShortcut>
+ </MenubarItem>
+ <MenubarItem>
+ New window
+ <MenubarShortcut>⌘N</MenubarShortcut>
+ </MenubarItem>
+ <MenubarItem disabled>New incognito window</MenubarItem>
+ </MenubarGroup>
+ <MenubarSeparator />
+ <MenubarSub>
+ <MenubarSubTrigger>Share</MenubarSubTrigger>
+ <MenubarSubContent className="w-44">
+ <MenubarItem>Email link</MenubarItem>
+ <MenubarItem>Messages</MenubarItem>
+ <MenubarItem>Notes</MenubarItem>
+ </MenubarSubContent>
+ </MenubarSub>
+ <MenubarSeparator />
+ <MenubarItem>
+ Print...
+ <MenubarShortcut>⌘P</MenubarShortcut>
+ </MenubarItem>
+ </MenubarContent>
+ </MenubarMenu>
+
+ <MenubarMenu>
+ <MenubarTrigger>Edit</MenubarTrigger>
+ <MenubarContent className="w-56">
+ <MenubarGroup>
+ <MenubarItem>
+ Undo
+ <MenubarShortcut>⌘Z</MenubarShortcut>
+ </MenubarItem>
+ <MenubarItem>
+ Redo
+ <MenubarShortcut>⇧⌘Z</MenubarShortcut>
+ </MenubarItem>
+ </MenubarGroup>
+ <MenubarSeparator />
+ <MenubarSub>
+ <MenubarSubTrigger>Find</MenubarSubTrigger>
+ <MenubarSubContent className="w-44">
+ <MenubarItem>Search the web</MenubarItem>
+ <MenubarSeparator />
+ <MenubarItem>Find...</MenubarItem>
+ <MenubarItem>Find next</MenubarItem>
+ <MenubarItem>Find previous</MenubarItem>
+ </MenubarSubContent>
+ </MenubarSub>
+ <MenubarSeparator />
+ <MenubarGroup>
+ <MenubarItem>Cut</MenubarItem>
+ <MenubarItem>Copy</MenubarItem>
+ <MenubarItem>Paste</MenubarItem>
+ </MenubarGroup>
+ </MenubarContent>
+ </MenubarMenu>
+
+ <MenubarMenu>
+ <MenubarTrigger>View</MenubarTrigger>
+ <MenubarContent className="w-60">
+ <MenubarGroup>
+ <MenubarCheckboxItem
+ checked={showBookmarks}
+ onCheckedChange={setShowBookmarks}
+ >
+ Always show bookmarks bar
+ </MenubarCheckboxItem>
+ <MenubarCheckboxItem
+ checked={showFullUrls}
+ onCheckedChange={setShowFullUrls}
+ >
+ Always show full URLs
+ </MenubarCheckboxItem>
+ </MenubarGroup>
+ <MenubarSeparator />
+ <MenubarGroup>
+ <MenubarItem inset>
+ Reload
+ <MenubarShortcut>⌘R</MenubarShortcut>
+ </MenubarItem>
+ <MenubarItem disabled inset>
+ Force reload
+ <MenubarShortcut>⇧⌘R</MenubarShortcut>
+ </MenubarItem>
+ </MenubarGroup>
+ <MenubarSeparator />
+ <MenubarItem inset>Toggle fullscreen</MenubarItem>
+ </MenubarContent>
+ </MenubarMenu>
+
+ <MenubarMenu>
+ <MenubarTrigger>Profiles</MenubarTrigger>
+ <MenubarContent className="w-52">
+ <MenubarLabel inset>Switch profile</MenubarLabel>
+ <MenubarRadioGroup onValueChange={setProfile} value={profile}>
+ <MenubarRadioItem value="andy">Andy</MenubarRadioItem>
+ <MenubarRadioItem value="benoit">Benoit</MenubarRadioItem>
+ <MenubarRadioItem value="luis">Luis</MenubarRadioItem>
+ </MenubarRadioGroup>
+ <MenubarSeparator />
+ <MenubarGroup>
+ <MenubarItem inset>Edit profiles...</MenubarItem>
+ <MenubarItem inset>Add profile...</MenubarItem>
+ </MenubarGroup>
+ </MenubarContent>
+ </MenubarMenu>
+ </Menubar>
+ )
+}
diff --git a/apps/web/src/docs/examples/message.tsx b/apps/web/src/docs/examples/message.tsx
new file mode 100644
index 000000000..e9cc7a535
--- /dev/null
+++ b/apps/web/src/docs/examples/message.tsx
@@ -0,0 +1,147 @@
+import {
+ Attachment,
+ AttachmentContent,
+ AttachmentDescription,
+ AttachmentMedia,
+ AttachmentTitle,
+} from '@vitnode/core/components/ui/attachment'
+import {
+ Avatar,
+ AvatarFallback,
+ AvatarImage,
+} from '@vitnode/core/components/ui/avatar'
+import {
+ Bubble,
+ BubbleContent,
+ BubbleReactions,
+} from '@vitnode/core/components/ui/bubble'
+import { Button } from '@vitnode/core/components/ui/button'
+import { Card } from '@vitnode/core/components/ui/card'
+import { Marker, MarkerContent } from '@vitnode/core/components/ui/marker'
+import {
+ Message,
+ MessageAvatar,
+ MessageContent,
+ MessageFooter,
+ MessageGroup,
+ MessageHeader,
+} from '@vitnode/core/components/ui/message'
+import { Copy, FileText, ThumbsUp } from 'lucide-react'
+import { toast } from 'sonner'
+
+export default function MessageExample() {
+ return (
+ <Card
+ aria-label="Team chat"
+ className="not-prose flex w-full flex-col gap-6 px-4 py-8 sm:px-6"
+ role="log"
+ >
+ <Marker variant="separator">
+ <MarkerContent>Today</MarkerContent>
+ </Marker>
+
+ <MessageGroup>
+ <Message>
+ <MessageAvatar />
+ <MessageContent>
+ <MessageHeader className="gap-1.5">
+ <span className="text-foreground">Ava</span>
+ <time dateTime="2026-10-02T09:41">9:41 AM</time>
+ </MessageHeader>
+ <Bubble variant="muted">
+ <BubbleContent>Morning! Did the plugin build pass?</BubbleContent>
+ </Bubble>
+ </MessageContent>
+ </Message>
+ <Message>
+ <MessageAvatar aria-hidden="true">
+ <Avatar>
+ <AvatarFallback>AV</AvatarFallback>
+ </Avatar>
+ </MessageAvatar>
+ <MessageContent>
+ <Bubble variant="muted">
+ <BubbleContent>
+ Asking for a friend. The friend is me.
+ </BubbleContent>
+ <BubbleReactions aria-label="Reactions: eyes" role="img">
+ <span>👀</span>
+ </BubbleReactions>
+ </Bubble>
+ </MessageContent>
+ </Message>
+ </MessageGroup>
+
+ <Message align="end">
+ <MessageContent>
+ <MessageHeader className="sr-only">You</MessageHeader>
+ <Attachment>
+ <AttachmentMedia>
+ <FileText />
+ </AttachmentMedia>
+ <AttachmentContent>
+ <AttachmentTitle>build-log.txt</AttachmentTitle>
+ <AttachmentDescription>TXT · 12 KB</AttachmentDescription>
+ </AttachmentContent>
+ </Attachment>
+ <Bubble>
+ <BubbleContent>Green across the board. Log attached.</BubbleContent>
+ </Bubble>
+ <MessageFooter className="gap-1">
+ Read <time dateTime="2026-10-02T09:43">9:43 AM</time>
+ </MessageFooter>
+ </MessageContent>
+ </Message>
+
+ <Message>
+ <MessageAvatar>
+ <Avatar>
+ <AvatarImage alt="VitNode assistant" src="/logo_vitnode_icon.svg" />
+ <AvatarFallback>VN</AvatarFallback>
+ </Avatar>
+ </MessageAvatar>
+ <MessageContent>
+ <Bubble variant="secondary">
+ <BubbleContent>
+ Congrats! Want me to publish it to the marketplace?
+ </BubbleContent>
+ </Bubble>
+ <MessageFooter>
+ <Button
+ aria-label="Copy message"
+ onClick={() =>
+ toast('Message copied', {
+ description: 'Pretend it is on your clipboard now.',
+ })
+ }
+ size="icon-xs"
+ title="Copy message"
+ variant="ghost"
+ >
+ <Copy />
+ </Button>
+ <Button
+ aria-label="Good response"
+ onClick={() =>
+ toast('Thanks for the feedback', {
+ description: 'The assistant is blushing.',
+ })
+ }
+ size="icon-xs"
+ title="Good response"
+ variant="ghost"
+ >
+ <ThumbsUp />
+ </Button>
+ </MessageFooter>
+ </MessageContent>
+ </Message>
+
+ <Marker role="status">
+ <MarkerContent className="shimmer">
+ <span className="font-medium">Ava</span> is typing...
+ </MarkerContent>
+ </Marker>
+ </Card>
+ )
+}
diff --git a/apps/web/src/docs/examples/nullable-number.tsx b/apps/web/src/docs/examples/nullable-number.tsx
index b0040ac7e..7a8e1bb62 100644
--- a/apps/web/src/docs/examples/nullable-number.tsx
+++ b/apps/web/src/docs/examples/nullable-number.tsx
@@ -1,5 +1,6 @@
import { AutoForm } from '@vitnode/core/components/form/auto-form'
import { AutoFormNullableNumber } from '@vitnode/core/components/form/fields/nullable-number'
+import { toast } from 'sonner'
import { z } from 'zod'
export default function NullableNumberExample() {
@@ -10,6 +11,7 @@ export default function NullableNumberExample() {
return (
<AutoForm
+ className="w-full"
fields={[
{
id: 'max_members',
@@ -37,6 +39,11 @@ export default function NullableNumberExample() {
},
]}
formSchema={formSchema}
+ onSubmit={(values) => {
+ toast.success('Limits saved', {
+ description: `Members: ${values.max_members ?? 'unlimited'}, auto-logout: ${values.auto_logout ?? 'never'}`,
+ })
+ }}
/>
)
}
diff --git a/apps/web/src/docs/examples/number-field-auto-form.tsx b/apps/web/src/docs/examples/number-field-auto-form.tsx
new file mode 100644
index 000000000..c2047fcd0
--- /dev/null
+++ b/apps/web/src/docs/examples/number-field-auto-form.tsx
@@ -0,0 +1,51 @@
+import { AutoForm } from '@vitnode/core/components/form/auto-form'
+import { AutoFormNumber } from '@vitnode/core/components/form/fields/number'
+import { toast } from 'sonner'
+import { z } from 'zod'
+
+export default function NumberFieldAutoFormExample() {
+ const formSchema = z.object({
+ guests: z.number().int().min(1).max(12).default(2),
+ budget: z.number().min(0).default(250),
+ })
+
+ return (
+ <AutoForm
+ className="w-full"
+ fields={[
+ {
+ id: 'guests',
+ component: (props) => (
+ <AutoFormNumber
+ {...props}
+ description="Up to 12 - the table only has so many chairs."
+ label="Guests"
+ max={12}
+ min={1}
+ unitLabel="people"
+ />
+ ),
+ },
+ {
+ id: 'budget',
+ component: (props) => (
+ <AutoFormNumber
+ {...props}
+ format={{ currency: 'USD', style: 'currency' }}
+ label="Budget"
+ largeStep={100}
+ min={0}
+ step={10}
+ />
+ ),
+ },
+ ]}
+ formSchema={formSchema}
+ onSubmit={(values) => {
+ toast.success('Dinner booked', {
+ description: `${values.guests} guests, $${values.budget} to spend.`,
+ })
+ }}
+ />
+ )
+}
diff --git a/apps/web/src/docs/examples/number-field-format.tsx b/apps/web/src/docs/examples/number-field-format.tsx
new file mode 100644
index 000000000..3e5a9a0e3
--- /dev/null
+++ b/apps/web/src/docs/examples/number-field-format.tsx
@@ -0,0 +1,50 @@
+import { Label } from '@vitnode/core/components/ui/label'
+import {
+ NumberField,
+ NumberFieldDecrement,
+ NumberFieldGroup,
+ NumberFieldIncrement,
+ NumberFieldInput,
+} from '@vitnode/core/components/ui/number-field'
+import React from 'react'
+
+export default function NumberFieldFormatExample() {
+ const priceId = React.useId()
+ const discountId = React.useId()
+
+ return (
+ <div className="not-prose grid w-full gap-4 sm:grid-cols-2">
+ <NumberField
+ defaultValue={19.99}
+ format={{ currency: 'USD', style: 'currency' }}
+ id={priceId}
+ largeStep={10}
+ min={0}
+ step={0.5}
+ >
+ <Label htmlFor={priceId}>Price</Label>
+ <NumberFieldGroup>
+ <NumberFieldDecrement />
+ <NumberFieldInput />
+ <NumberFieldIncrement />
+ </NumberFieldGroup>
+ </NumberField>
+ <NumberField
+ defaultValue={0.15}
+ format={{ style: 'percent' }}
+ id={discountId}
+ largeStep={0.1}
+ max={1}
+ min={0}
+ step={0.01}
+ >
+ <Label htmlFor={discountId}>Discount</Label>
+ <NumberFieldGroup>
+ <NumberFieldDecrement />
+ <NumberFieldInput />
+ <NumberFieldIncrement />
+ </NumberFieldGroup>
+ </NumberField>
+ </div>
+ )
+}
diff --git a/apps/web/src/docs/examples/number-field-sizes.tsx b/apps/web/src/docs/examples/number-field-sizes.tsx
new file mode 100644
index 000000000..4217754e5
--- /dev/null
+++ b/apps/web/src/docs/examples/number-field-sizes.tsx
@@ -0,0 +1,25 @@
+import {
+ NumberField,
+ NumberFieldDecrement,
+ NumberFieldGroup,
+ NumberFieldIncrement,
+ NumberFieldInput,
+} from '@vitnode/core/components/ui/number-field'
+
+const sizes = ['sm', 'default', 'lg'] as const
+
+export default function NumberFieldSizesExample() {
+ return (
+ <div className="not-prose flex w-48 flex-col gap-3">
+ {sizes.map((size) => (
+ <NumberField defaultValue={4} key={size} min={0} size={size}>
+ <NumberFieldGroup>
+ <NumberFieldDecrement />
+ <NumberFieldInput aria-label={`Quantity (${size})`} />
+ <NumberFieldIncrement />
+ </NumberFieldGroup>
+ </NumberField>
+ ))}
+ </div>
+ )
+}
diff --git a/apps/web/src/docs/examples/number-field.tsx b/apps/web/src/docs/examples/number-field.tsx
new file mode 100644
index 000000000..8c3d42677
--- /dev/null
+++ b/apps/web/src/docs/examples/number-field.tsx
@@ -0,0 +1,38 @@
+import {
+ NumberField,
+ NumberFieldDecrement,
+ NumberFieldGroup,
+ NumberFieldIncrement,
+ NumberFieldInput,
+ NumberFieldScrubArea,
+} from '@vitnode/core/components/ui/number-field'
+import React from 'react'
+
+export default function NumberFieldExample() {
+ const id = React.useId()
+ const [coffees, setCoffees] = React.useState<null | number>(2)
+
+ return (
+ <div className="not-prose flex w-56 flex-col gap-3">
+ <NumberField
+ id={id}
+ max={8}
+ min={0}
+ onValueChange={setCoffees}
+ value={coffees}
+ >
+ <NumberFieldScrubArea htmlFor={id} label="Coffees per day" />
+ <NumberFieldGroup>
+ <NumberFieldDecrement />
+ <NumberFieldInput />
+ <NumberFieldIncrement />
+ </NumberFieldGroup>
+ </NumberField>
+ <p className="text-muted-foreground text-sm leading-relaxed text-pretty">
+ {coffees === 8
+ ? 'That is the limit. Your heart says thanks.'
+ : `Value: ${coffees ?? 'empty'}`}
+ </p>
+ </div>
+ )
+}
diff --git a/apps/web/src/docs/examples/pagination.tsx b/apps/web/src/docs/examples/pagination.tsx
new file mode 100644
index 000000000..976b7e992
--- /dev/null
+++ b/apps/web/src/docs/examples/pagination.tsx
@@ -0,0 +1,125 @@
+import { Card } from '@vitnode/core/components/ui/card'
+import {
+ Pagination,
+ PaginationContent,
+ PaginationEllipsis,
+ PaginationItem,
+ PaginationLink,
+ PaginationNext,
+ PaginationPrevious,
+} from '@vitnode/core/components/ui/pagination'
+import React from 'react'
+
+const TOTAL_PAGES = 12
+const PER_PAGE = 3
+
+const TOPICS = [
+ 'Why my plugin works on my machine',
+ 'Naming things, part 47',
+ 'A love letter to dark mode',
+ 'Migrations I regret',
+ 'Tabs vs spaces: the sequel',
+ 'Coffee-driven development',
+]
+
+type PageSlot = 'ellipsis-end' | 'ellipsis-start' | number
+
+const range = (from: number, to: number) =>
+ Array.from({ length: to - from + 1 }, (_, step) => from + step)
+
+const pageWindow = (current: number, total: number): PageSlot[] => {
+ if (total <= 5) return range(1, total)
+ if (current <= 3) return [1, 2, 3, 'ellipsis-end', total]
+ if (current >= total - 2) {
+ return [1, 'ellipsis-start', ...range(total - 2, total)]
+ }
+
+ return [1, 'ellipsis-start', current, 'ellipsis-end', total]
+}
+
+const postsFor = (page: number) =>
+ range((page - 1) * PER_PAGE + 1, page * PER_PAGE).map((id) => ({
+ id,
+ title: TOPICS[(id - 1) % TOPICS.length],
+ }))
+
+export default function PaginationExample() {
+ const [page, setPage] = React.useState(1)
+
+ const goTo =
+ (nextPage: number) => (event: React.MouseEvent<HTMLAnchorElement>) => {
+ event.preventDefault()
+ setPage(nextPage)
+ }
+
+ const stepProps = (nextPage: number, enabled: boolean) =>
+ enabled
+ ? { href: '#', onClick: goTo(nextPage) }
+ : {
+ 'aria-disabled': true as const,
+ className: 'pointer-events-none',
+ role: 'link',
+ }
+
+ return (
+ <Card className="not-prose w-full px-4 sm:px-6">
+ <div className="flex items-center justify-between gap-4">
+ <h3 className="text-foreground text-base font-medium">Latest posts</h3>
+ <p
+ aria-live="polite"
+ className="text-muted-foreground text-sm tabular-nums"
+ >
+ {(page - 1) * PER_PAGE + 1}-{page * PER_PAGE} of{' '}
+ {TOTAL_PAGES * PER_PAGE}
+ </p>
+ </div>
+
+ <ul className="flex flex-col divide-y">
+ {postsFor(page).map((post) => (
+ <li className="flex items-center gap-3 py-3" key={post.id}>
+ <span className="bg-muted text-muted-foreground flex size-8 shrink-0 items-center justify-center rounded-md text-xs font-medium tabular-nums">
+ #{post.id}
+ </span>
+ <span className="text-foreground truncate text-sm leading-relaxed">
+ {post.title}
+ </span>
+ </li>
+ ))}
+ </ul>
+
+ <Pagination>
+ <PaginationContent>
+ <PaginationItem>
+ <PaginationPrevious {...stepProps(page - 1, page > 1)} />
+ </PaginationItem>
+
+ <PaginationItem className="sm:hidden">
+ <span className="text-muted-foreground px-2 text-sm tabular-nums">
+ Page {page} of {TOTAL_PAGES}
+ </span>
+ </PaginationItem>
+
+ {pageWindow(page, TOTAL_PAGES).map((slot) => (
+ <PaginationItem className="hidden sm:block" key={slot}>
+ {typeof slot === 'number' ? (
+ <PaginationLink
+ href="#"
+ isActive={slot === page}
+ onClick={goTo(slot)}
+ >
+ {slot}
+ </PaginationLink>
+ ) : (
+ <PaginationEllipsis />
+ )}
+ </PaginationItem>
+ ))}
+
+ <PaginationItem>
+ <PaginationNext {...stepProps(page + 1, page < TOTAL_PAGES)} />
+ </PaginationItem>
+ </PaginationContent>
+ </Pagination>
+ </Card>
+ )
+}
diff --git a/apps/web/src/docs/examples/resizable-collapsible.tsx b/apps/web/src/docs/examples/resizable-collapsible.tsx
new file mode 100644
index 000000000..7ec1e4fb7
--- /dev/null
+++ b/apps/web/src/docs/examples/resizable-collapsible.tsx
@@ -0,0 +1,38 @@
+import {
+ ResizableHandle,
+ ResizablePanel,
+ ResizablePanelGroup,
+} from '@vitnode/core/components/ui/resizable'
+import { PanelLeft } from 'lucide-react'
+
+export default function ResizableCollapsibleDemo() {
+ return (
+ <div className="not-prose h-48 w-full max-w-md">
+ <ResizablePanelGroup className="bg-background text-foreground rounded-lg border">
+ <ResizablePanel
+ collapsedSize="8%"
+ collapsible
+ defaultSize="35%"
+ maxSize="50%"
+ minSize="25%"
+ >
+ <div className="bg-muted/50 @container flex h-full items-center justify-center gap-2 overflow-hidden p-2">
+ <PanelLeft aria-hidden className="size-4 shrink-0" />
+ <span className="hidden text-sm font-medium @[5rem]:inline">
+ Sidebar
+ </span>
+ </div>
+ </ResizablePanel>
+ <ResizableHandle withHandle />
+ <ResizablePanel minSize="40%">
+ <div className="flex h-full flex-col items-center justify-center gap-1 p-4 text-center">
+ <span className="text-sm font-medium">Content</span>
+ <span className="text-muted-foreground text-xs text-pretty">
+ Drag the sidebar below 25% and it snaps shut.
+ </span>
+ </div>
+ </ResizablePanel>
+ </ResizablePanelGroup>
+ </div>
+ )
+}
diff --git a/apps/web/src/docs/examples/resizable-handle.tsx b/apps/web/src/docs/examples/resizable-handle.tsx
new file mode 100644
index 000000000..26c39bb9f
--- /dev/null
+++ b/apps/web/src/docs/examples/resizable-handle.tsx
@@ -0,0 +1,25 @@
+import {
+ ResizableHandle,
+ ResizablePanel,
+ ResizablePanelGroup,
+} from '@vitnode/core/components/ui/resizable'
+
+export default function ResizableHandleDemo() {
+ return (
+ <div className="not-prose h-48 w-full max-w-md">
+ <ResizablePanelGroup className="bg-background text-foreground rounded-lg border">
+ <ResizablePanel defaultSize="40%" minSize="20%">
+ <div className="flex h-full items-center justify-center p-4">
+ <span className="text-sm font-medium">Sidebar</span>
+ </div>
+ </ResizablePanel>
+ <ResizableHandle withHandle />
+ <ResizablePanel minSize="30%">
+ <div className="flex h-full items-center justify-center p-4">
+ <span className="text-sm font-medium">Content</span>
+ </div>
+ </ResizablePanel>
+ </ResizablePanelGroup>
+ </div>
+ )
+}
diff --git a/apps/web/src/docs/examples/resizable-persist.tsx b/apps/web/src/docs/examples/resizable-persist.tsx
new file mode 100644
index 000000000..ef0430736
--- /dev/null
+++ b/apps/web/src/docs/examples/resizable-persist.tsx
@@ -0,0 +1,86 @@
+import {
+ ResizableHandle,
+ ResizablePanel,
+ ResizablePanelGroup,
+} from '@vitnode/core/components/ui/resizable'
+import React from 'react'
+
+type Layout = Record<string, number>
+
+const storageKey = 'vitnode-docs-resizable-layout'
+
+const subscribe = () => () => {}
+
+const readLayout = (): null | string => {
+ try {
+ return localStorage.getItem(storageKey)
+ } catch {
+ return null
+ }
+}
+
+const saveLayout = (layout: Layout) => {
+ try {
+ localStorage.setItem(storageKey, JSON.stringify(layout))
+ } catch {
+ return
+ }
+}
+
+const parseLayout = (value: null | string): Layout | undefined => {
+ if (!value) return undefined
+
+ try {
+ const parsed: unknown = JSON.parse(value)
+
+ if (typeof parsed !== 'object' || parsed === null) return undefined
+
+ return Object.fromEntries(
+ Object.entries(parsed).filter(
+ (entry): entry is [string, number] => typeof entry[1] === 'number',
+ ),
+ )
+ } catch {
+ return undefined
+ }
+}
+
+export default function ResizablePersistDemo() {
+ const storedLayout = React.useSyncExternalStore(
+ subscribe,
+ readLayout,
+ () => null,
+ )
+ const defaultLayout = React.useMemo(
+ () => parseLayout(storedLayout),
+ [storedLayout],
+ )
+
+ return (
+ <div className="not-prose h-48 w-full max-w-md">
+ <ResizablePanelGroup
+ className="bg-background text-foreground rounded-lg border"
+ defaultLayout={defaultLayout}
+ id="docs-resizable-persist"
+ onLayoutChanged={(layout, meta) => {
+ if (meta.isUserInteraction) saveLayout(meta.requestedLayout ?? layout)
+ }}
+ >
+ <ResizablePanel defaultSize="40%" id="sidebar" minSize="20%">
+ <div className="flex h-full items-center justify-center p-4">
+ <span className="text-sm font-medium">Sidebar</span>
+ </div>
+ </ResizablePanel>
+ <ResizableHandle withHandle />
+ <ResizablePanel id="content" minSize="30%">
+ <div className="flex h-full flex-col items-center justify-center gap-1 p-4 text-center">
+ <span className="text-sm font-medium">Content</span>
+ <span className="text-muted-foreground text-xs text-pretty">
+ Resize, then reload. It remembers.
+ </span>
+ </div>
+ </ResizablePanel>
+ </ResizablePanelGroup>
+ </div>
+ )
+}
diff --git a/apps/web/src/docs/examples/resizable-vertical.tsx b/apps/web/src/docs/examples/resizable-vertical.tsx
new file mode 100644
index 000000000..5e75669b9
--- /dev/null
+++ b/apps/web/src/docs/examples/resizable-vertical.tsx
@@ -0,0 +1,28 @@
+import {
+ ResizableHandle,
+ ResizablePanel,
+ ResizablePanelGroup,
+} from '@vitnode/core/components/ui/resizable'
+
+export default function ResizableVerticalDemo() {
+ return (
+ <div className="not-prose h-64 w-full max-w-md">
+ <ResizablePanelGroup
+ className="bg-background text-foreground rounded-lg border"
+ orientation="vertical"
+ >
+ <ResizablePanel defaultSize="30%" minSize="20%">
+ <div className="flex h-full items-center justify-center p-4">
+ <span className="text-sm font-medium">Header</span>
+ </div>
+ </ResizablePanel>
+ <ResizableHandle />
+ <ResizablePanel minSize="30%">
+ <div className="flex h-full items-center justify-center p-4">
+ <span className="text-sm font-medium">Content</span>
+ </div>
+ </ResizablePanel>
+ </ResizablePanelGroup>
+ </div>
+ )
+}
diff --git a/apps/web/src/docs/examples/resizable.tsx b/apps/web/src/docs/examples/resizable.tsx
new file mode 100644
index 000000000..223bfaf59
--- /dev/null
+++ b/apps/web/src/docs/examples/resizable.tsx
@@ -0,0 +1,37 @@
+import {
+ ResizableHandle,
+ ResizablePanel,
+ ResizablePanelGroup,
+} from '@vitnode/core/components/ui/resizable'
+
+export default function ResizableDemo() {
+ return (
+ <div className="not-prose h-80 w-full max-w-md">
+ <ResizablePanelGroup className="bg-background text-foreground rounded-lg border">
+ <ResizablePanel defaultSize="35%" minSize="20%">
+ <div className="flex h-full items-center justify-center p-4">
+ <span className="text-sm font-medium">Sidebar</span>
+ </div>
+ </ResizablePanel>
+ <ResizableHandle withHandle />
+ <ResizablePanel minSize="30%">
+ <ResizablePanelGroup orientation="vertical">
+ <ResizablePanel defaultSize="60%" minSize="25%">
+ <div className="flex h-full items-center justify-center p-4">
+ <span className="text-sm font-medium">Content</span>
+ </div>
+ </ResizablePanel>
+ <ResizableHandle withHandle />
+ <ResizablePanel minSize="20%">
+ <div className="bg-muted/50 flex h-full items-center justify-center p-4">
+ <span className="text-muted-foreground text-sm font-medium">
+ Terminal
+ </span>
+ </div>
+ </ResizablePanel>
+ </ResizablePanelGroup>
+ </ResizablePanel>
+ </ResizablePanelGroup>
+ </div>
+ )
+}
diff --git a/apps/web/src/docs/examples/scroll-fade-vertical.tsx b/apps/web/src/docs/examples/scroll-fade-vertical.tsx
new file mode 100644
index 000000000..e917cb0aa
--- /dev/null
+++ b/apps/web/src/docs/examples/scroll-fade-vertical.tsx
@@ -0,0 +1,41 @@
+const notifications = [
+ { title: 'New sign-up from Warsaw', time: '2 min ago' },
+ { title: 'Blog post published', time: '14 min ago' },
+ { title: 'Plugin "search" updated', time: '1 h ago' },
+ { title: 'Backup finished', time: '2 h ago' },
+ { title: 'Staff role edited', time: '3 h ago' },
+ { title: 'Cron job "cleanup" ran', time: '5 h ago' },
+ { title: 'Theme "midnight" enabled', time: 'Yesterday' },
+ { title: 'Passkey added', time: 'Yesterday' },
+ { title: 'Navigation reordered', time: '2 days ago' },
+ { title: 'Language "pl" installed', time: '3 days ago' },
+ { title: 'Hello world', time: 'Last week' },
+]
+
+export default function ScrollFadeVerticalExample() {
+ return (
+ <section className="not-prose bg-card text-card-foreground flex w-full flex-col rounded-xl border">
+ <h3 className="border-b px-4 py-3 text-sm font-medium">Notifications</h3>
+ <div className="has-focus-visible:ring-ring/50 rounded-b-xl has-focus-visible:ring-3">
+ <ul
+ aria-label="Notifications"
+ className="scroll-fade flex h-64 flex-col overflow-y-auto overscroll-y-contain px-4 py-2 outline-none"
+ role="region"
+ tabIndex={0}
+ >
+ {notifications.map((notification) => (
+ <li
+ className="flex items-center justify-between gap-4 border-b py-3 text-sm last:border-b-0"
+ key={notification.title}
+ >
+ <span className="truncate">{notification.title}</span>
+ <span className="text-muted-foreground shrink-0 text-xs">
+ {notification.time}
+ </span>
+ </li>
+ ))}
+ </ul>
+ </div>
+ </section>
+ )
+}
diff --git a/apps/web/src/docs/examples/scroll-fade.tsx b/apps/web/src/docs/examples/scroll-fade.tsx
new file mode 100644
index 000000000..60c1edc8c
--- /dev/null
+++ b/apps/web/src/docs/examples/scroll-fade.tsx
@@ -0,0 +1,78 @@
+const topics = [
+ 'Announcements',
+ 'Releases',
+ 'Plugins',
+ 'Themes',
+ 'Tutorials',
+ 'Showcase',
+ 'Help wanted',
+ 'Feedback',
+ 'Bug reports',
+ 'Off-topic',
+]
+
+const releases = [
+ { name: 'Content Engine', version: 'v1.4.0' },
+ { name: 'Search', version: 'v1.3.2' },
+ { name: 'Passkeys', version: 'v1.3.0' },
+ { name: 'Navigation', version: 'v1.2.5' },
+ { name: 'Widgets', version: 'v1.2.0' },
+ { name: 'Blog', version: 'v1.1.8' },
+]
+
+export default function ScrollFadeExample() {
+ return (
+ <div className="not-prose bg-card text-card-foreground flex w-full flex-col gap-6 rounded-xl border p-4 sm:p-6">
+ <section className="flex flex-col gap-3">
+ <div className="flex flex-col gap-1">
+ <h3 className="text-sm font-medium">Browse by topic</h3>
+ <p className="text-muted-foreground text-sm leading-relaxed text-pretty">
+ Scroll sideways. The left edge stays crisp until there is something
+ hiding behind it.
+ </p>
+ </div>
+ <div className="has-focus-visible:ring-ring/50 rounded-lg has-focus-visible:ring-3">
+ <ul
+ aria-label="Topics"
+ className="scroll-fade-x no-scrollbar flex gap-2 overflow-x-auto overscroll-x-contain py-1 outline-none"
+ role="region"
+ tabIndex={0}
+ >
+ {topics.map((topic) => (
+ <li
+ className="bg-secondary text-secondary-foreground shrink-0 rounded-full px-3 py-1 text-sm"
+ key={topic}
+ >
+ {topic}
+ </li>
+ ))}
+ </ul>
+ </div>
+ </section>
+
+ <section className="flex flex-col gap-3">
+ <h3 className="text-sm font-medium">Latest releases</h3>
+ <div className="has-focus-visible:ring-ring/50 rounded-lg has-focus-visible:ring-3">
+ <ul
+ aria-label="Latest releases"
+ className="scroll-fade-x scroll-fade-16 no-scrollbar flex snap-x snap-mandatory gap-3 overflow-x-auto overscroll-x-contain outline-none"
+ role="region"
+ tabIndex={0}
+ >
+ {releases.map((release) => (
+ <li
+ className="bg-background flex w-36 shrink-0 snap-start flex-col gap-1 rounded-lg border p-3"
+ key={release.name}
+ >
+ <span className="text-sm font-medium">{release.name}</span>
+ <span className="text-muted-foreground font-mono text-xs">
+ {release.version}
+ </span>
+ </li>
+ ))}
+ </ul>
+ </div>
+ </section>
+ </div>
+ )
+}
diff --git a/apps/web/src/docs/examples/shimmer-variants.tsx b/apps/web/src/docs/examples/shimmer-variants.tsx
new file mode 100644
index 000000000..8bd76d139
--- /dev/null
+++ b/apps/web/src/docs/examples/shimmer-variants.tsx
@@ -0,0 +1,65 @@
+import { Button } from '@vitnode/core/components/ui/button'
+import { RotateCcw } from 'lucide-react'
+import React from 'react'
+
+const variants = [
+ { className: 'shimmer', label: 'shimmer' },
+ {
+ className: 'shimmer shimmer-color-success',
+ label: 'shimmer-color-success',
+ },
+ {
+ className: 'shimmer shimmer-duration-1000',
+ label: 'shimmer-duration-1000',
+ },
+ { className: 'shimmer shimmer-spread-24', label: 'shimmer-spread-24' },
+ { className: 'shimmer shimmer-angle-45', label: 'shimmer-angle-45' },
+ { className: 'shimmer shimmer-reverse', label: 'shimmer-reverse' },
+]
+
+export default function ShimmerVariantsExample() {
+ const [replays, setReplays] = React.useState(0)
+
+ return (
+ <div className="not-prose bg-card text-card-foreground flex w-full flex-col gap-6 rounded-xl border p-4 sm:p-6">
+ <ul className="grid gap-4 sm:grid-cols-2">
+ {variants.map((variant) => (
+ <li className="flex flex-col gap-1" key={variant.label}>
+ <span
+ className={`${variant.className} text-muted-foreground text-sm`}
+ >
+ Generating response...
+ </span>
+ <code className="text-foreground font-mono text-xs">
+ {variant.label}
+ </code>
+ </li>
+ ))}
+ </ul>
+
+ <div className="flex flex-wrap items-center justify-between gap-4 border-t pt-4">
+ <div className="flex flex-col gap-1">
+ <span
+ className="shimmer shimmer-once shimmer-duration-1100 text-muted-foreground text-sm"
+ key={replays}
+ >
+ Response generated.
+ </span>
+ <code className="text-foreground font-mono text-xs">
+ shimmer-once
+ </code>
+ </div>
+ <Button
+ onClick={() => {
+ setReplays((count) => count + 1)
+ }}
+ size="sm"
+ variant="outline"
+ >
+ <RotateCcw />
+ Replay
+ </Button>
+ </div>
+ </div>
+ )
+}
diff --git a/apps/web/src/docs/examples/shimmer.tsx b/apps/web/src/docs/examples/shimmer.tsx
new file mode 100644
index 000000000..25ac23feb
--- /dev/null
+++ b/apps/web/src/docs/examples/shimmer.tsx
@@ -0,0 +1,21 @@
+import { Spinner } from '@vitnode/core/components/ui/spinner'
+
+export default function ShimmerExample() {
+ return (
+ <div className="not-prose bg-card text-card-foreground flex w-full flex-col items-center gap-6 rounded-xl border p-6 text-center">
+ <p className="shimmer text-muted-foreground text-2xl font-medium">
+ Thinking...
+ </p>
+ <p className="shimmer text-sm leading-relaxed">
+ Generating a response worth the wait...
+ </p>
+ <div
+ className="bg-muted text-muted-foreground flex items-center gap-2 rounded-full px-3 py-1.5 text-sm"
+ role="status"
+ >
+ <Spinner aria-hidden="true" />
+ <span className="shimmer">Reading 4 files</span>
+ </div>
+ </div>
+ )
+}
diff --git a/apps/web/src/docs/examples/sonner.tsx b/apps/web/src/docs/examples/sonner.tsx
deleted file mode 100644
index 19656151a..000000000
--- a/apps/web/src/docs/examples/sonner.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import { Button } from '@vitnode/core/components/ui/button'
-import { toast } from 'sonner'
-
-export default function SonnerDemo() {
- return (
- <Button
- onClick={() =>
- toast('Event has been created', {
- description: 'Sunday, December 03, 2023 at 9:00 AM',
- action: {
- label: 'Undo',
- // eslint-disable-next-line no-console
- onClick: () => console.log('Undo'),
- },
- })
- }
- variant="outline"
- >
- Show Toast
- </Button>
- )
-}
diff --git a/apps/web/src/docs/examples/spinner-buttons.tsx b/apps/web/src/docs/examples/spinner-buttons.tsx
new file mode 100644
index 000000000..76659d56c
--- /dev/null
+++ b/apps/web/src/docs/examples/spinner-buttons.tsx
@@ -0,0 +1,36 @@
+import { Button } from '@vitnode/core/components/ui/button'
+import { Spinner } from '@vitnode/core/components/ui/spinner'
+import React from 'react'
+
+export default function SpinnerButtonsExample() {
+ const [isSaving, setIsSaving] = React.useState(false)
+
+ return (
+ <div className="not-prose flex flex-col items-center gap-6">
+ <div className="flex flex-wrap justify-center gap-3">
+ <Button disabled>
+ <Spinner aria-hidden="true" />
+ Uploading...
+ </Button>
+ <Button disabled variant="outline">
+ <Spinner aria-hidden="true" />
+ Please wait
+ </Button>
+ <Button aria-label="Refreshing" disabled size="icon" variant="ghost">
+ <Spinner aria-hidden="true" />
+ </Button>
+ </div>
+ <Button
+ isLoading={isSaving}
+ onClick={() => {
+ setIsSaving(true)
+ setTimeout(() => {
+ setIsSaving(false)
+ }, 1500)
+ }}
+ >
+ Save changes
+ </Button>
+ </div>
+ )
+}
diff --git a/apps/web/src/docs/examples/spinner-inline.tsx b/apps/web/src/docs/examples/spinner-inline.tsx
new file mode 100644
index 000000000..a13aa50bf
--- /dev/null
+++ b/apps/web/src/docs/examples/spinner-inline.tsx
@@ -0,0 +1,38 @@
+import { Badge } from '@vitnode/core/components/ui/badge'
+import {
+ InputGroup,
+ InputGroupAddon,
+ InputGroupInput,
+} from '@vitnode/core/components/ui/input-group'
+import { Spinner } from '@vitnode/core/components/ui/spinner'
+import { SearchIcon } from 'lucide-react'
+
+export default function SpinnerInlineExample() {
+ return (
+ <div className="not-prose flex w-full flex-col items-center gap-6">
+ <div className="flex flex-wrap justify-center gap-2">
+ <Badge variant="secondary">
+ <Spinner aria-hidden="true" />
+ Syncing
+ </Badge>
+ <Badge variant="outline">
+ <Spinner aria-hidden="true" />
+ Building
+ </Badge>
+ </div>
+ <InputGroup className="max-w-xs">
+ <InputGroupAddon>
+ <SearchIcon />
+ </InputGroupAddon>
+ <InputGroupInput aria-label="Search" defaultValue="vitnode" />
+ <InputGroupAddon align="inline-end">
+ <Spinner aria-label="Searching" />
+ </InputGroupAddon>
+ </InputGroup>
+ <p className="text-muted-foreground flex items-center gap-2 text-sm">
+ <Spinner aria-hidden="true" />
+ Generating your report - hang tight.
+ </p>
+ </div>
+ )
+}
diff --git a/apps/web/src/docs/examples/spinner-states.tsx b/apps/web/src/docs/examples/spinner-states.tsx
new file mode 100644
index 000000000..c98a468e2
--- /dev/null
+++ b/apps/web/src/docs/examples/spinner-states.tsx
@@ -0,0 +1,37 @@
+import { Card } from '@vitnode/core/components/ui/card'
+import {
+ Empty,
+ EmptyDescription,
+ EmptyHeader,
+ EmptyMedia,
+ EmptyTitle,
+} from '@vitnode/core/components/ui/empty'
+import { Spinner } from '@vitnode/core/components/ui/spinner'
+
+export default function SpinnerStatesExample() {
+ return (
+ <div className="not-prose grid w-full gap-4 sm:grid-cols-2">
+ <Empty className="rounded-lg border p-6">
+ <EmptyHeader>
+ <EmptyMedia variant="icon">
+ <Spinner aria-hidden="true" />
+ </EmptyMedia>
+ <EmptyTitle>Loading your files</EmptyTitle>
+ <EmptyDescription>
+ This usually takes a second or two.
+ </EmptyDescription>
+ </EmptyHeader>
+ </Empty>
+
+ <Card aria-busy="true" className="relative gap-2 overflow-hidden p-6">
+ <p className="font-medium">Monthly revenue</p>
+ <p className="text-muted-foreground text-sm leading-relaxed">
+ Crunching this month's numbers...
+ </p>
+ <div className="bg-background/70 absolute inset-0 flex items-center justify-center backdrop-blur-xs">
+ <Spinner className="text-primary" size="lg" />
+ </div>
+ </Card>
+ </div>
+ )
+}
diff --git a/apps/web/src/docs/examples/spinner.tsx b/apps/web/src/docs/examples/spinner.tsx
new file mode 100644
index 000000000..1624a4fad
--- /dev/null
+++ b/apps/web/src/docs/examples/spinner.tsx
@@ -0,0 +1,25 @@
+import { Spinner } from '@vitnode/core/components/ui/spinner'
+
+const sizes = ['sm', 'default', 'lg', 'xl'] as const
+
+export default function SpinnerExample() {
+ return (
+ <div className="not-prose flex flex-col items-center gap-8">
+ <div className="flex items-end gap-6">
+ {sizes.map((size) => (
+ <div className="flex flex-col items-center gap-2" key={size}>
+ <Spinner size={size} />
+ <span className="text-muted-foreground text-xs">{size}</span>
+ </div>
+ ))}
+ </div>
+ <div className="flex items-center gap-6">
+ <Spinner className="text-primary" size="lg" />
+ <Spinner className="text-success" size="lg" />
+ <Spinner className="text-warn" size="lg" />
+ <Spinner className="text-destructive" size="lg" />
+ <Spinner className="text-muted-foreground" size="lg" />
+ </div>
+ </div>
+ )
+}
diff --git a/apps/web/src/docs/examples/toast.tsx b/apps/web/src/docs/examples/toast.tsx
new file mode 100644
index 000000000..e42f5acf5
--- /dev/null
+++ b/apps/web/src/docs/examples/toast.tsx
@@ -0,0 +1,111 @@
+import { Button } from '@vitnode/core/components/ui/button'
+import { ToastAvatar, ToastMessage } from '@vitnode/core/components/ui/sonner'
+import { toast } from 'sonner'
+
+const wait = async (ms: number) =>
+ new Promise<void>((resolve) => {
+ setTimeout(resolve, ms)
+ })
+
+const demos = [
+ {
+ label: 'Default',
+ show: () =>
+ toast('Event has been created', {
+ description: 'Sunday, December 03, 2023 at 9:00 AM',
+ action: { label: 'Undo', onClick: () => {} },
+ }),
+ },
+ {
+ label: 'Info',
+ show: () =>
+ toast.info('You have 2 credits left', {
+ description: 'Get a paid plan for more credits.',
+ action: { label: 'Upgrade', onClick: () => {} },
+ }),
+ },
+ {
+ label: 'Success',
+ show: () =>
+ toast.success('Your plan has been upgraded', {
+ description: 'Enjoy the extra credits - you earned them.',
+ }),
+ },
+ {
+ label: 'Warning',
+ show: () =>
+ toast.warning('You are running low on storage', {
+ description: 'Only 200 MB left. Time for some spring cleaning?',
+ action: { label: 'Manage', onClick: () => {} },
+ }),
+ },
+ {
+ label: 'Error',
+ show: () =>
+ toast.error('Storage is full', {
+ description: 'Remove some files to free up space.',
+ action: { label: 'Remove', onClick: () => {} },
+ }),
+ },
+ {
+ label: 'Avatar',
+ show: () =>
+ toast('VitNode Team invited you', {
+ description: 'Join the "Docs writers" group to start editing.',
+ icon: <ToastAvatar alt="VitNode Team" src="/logo_vitnode_icon.svg" />,
+ action: { label: 'Accept', onClick: () => {} },
+ }),
+ },
+ {
+ label: 'Message',
+ show: () =>
+ toast.custom(
+ (id) => (
+ <ToastMessage
+ actions={[
+ {
+ label: 'Dismiss',
+ onClick: () => toast.dismiss(id),
+ variant: 'outline',
+ },
+ {
+ label: 'Reply',
+ onClick: () => {
+ toast.dismiss(id)
+ toast.success('Reply sent', {
+ description: 'Alex will see it next time they look.',
+ })
+ },
+ },
+ ]}
+ avatar={{ alt: 'Alex Johnson', fallback: 'AJ' }}
+ description="Hey! I've finished the design review. Let me know when you're free to discuss."
+ time="2m ago"
+ title="Alex Johnson"
+ />
+ ),
+ { duration: 10000 },
+ ),
+ },
+ {
+ label: 'Promise',
+ show: () =>
+ toast.promise(wait(2000), {
+ loading: 'Publishing your article...',
+ success: 'Article published',
+ error: 'Could not publish the article',
+ }),
+ },
+]
+
+export default function ToastExample() {
+ return (
+ <div className="flex flex-wrap items-center justify-center gap-3">
+ {demos.map(({ label, show }) => (
+ <Button key={label} onClick={show} variant="outline">
+ {label}
+ </Button>
+ ))}
+ </div>
+ )
+}
diff --git a/apps/web/src/docs/examples/tooltip-group.tsx b/apps/web/src/docs/examples/tooltip-group.tsx
new file mode 100644
index 000000000..31565e3d8
--- /dev/null
+++ b/apps/web/src/docs/examples/tooltip-group.tsx
@@ -0,0 +1,44 @@
+import { Button } from '@vitnode/core/components/ui/button'
+import {
+ TooltipGroup,
+ TooltipGroupTrigger,
+} from '@vitnode/core/components/ui/tooltip'
+import {
+ BoldIcon,
+ ImageIcon,
+ ItalicIcon,
+ LinkIcon,
+ UnderlineIcon,
+} from 'lucide-react'
+
+const tools = [
+ { icon: BoldIcon, label: 'Bold' },
+ { icon: ItalicIcon, label: 'Italic' },
+ { icon: UnderlineIcon, label: 'Underline' },
+ { icon: LinkIcon, label: 'Insert link' },
+ { icon: ImageIcon, label: 'Add an image from your files' },
+]
+
+export default function TooltipGroupExample() {
+ return (
+ <TooltipGroup>
+ <div
+ aria-label="Formatting"
+ className="bg-card flex items-center gap-1 rounded-lg border p-1 shadow-xs"
+ role="toolbar"
+ >
+ {tools.map(({ icon: Icon, label }) => (
+ <TooltipGroupTrigger
+ content={label}
+ key={label}
+ render={
+ <Button aria-label={label} size="icon-sm" variant="ghost" />
+ }
+ >
+ <Icon />
+ </TooltipGroupTrigger>
+ ))}
+ </div>
+ </TooltipGroup>
+ )
+}
diff --git a/apps/web/src/docs/local-table-data.ts b/apps/web/src/docs/local-table-data.ts
new file mode 100644
index 000000000..dcdd561ce
--- /dev/null
+++ b/apps/web/src/docs/local-table-data.ts
@@ -0,0 +1,81 @@
+import type { TableOrder } from '@vitnode/core/components/table/url-state'
+
+import {
+ MIN_TABLE_SEARCH_LENGTH,
+ readTableFilter,
+ readTableOrder,
+ readTablePage,
+ readTablePageSize,
+ readTableSearch,
+} from '@vitnode/core/components/table/url-state'
+
+interface LocalTableOptions<T> {
+ defaultOrder?: TableOrder
+ filters?: Record<string, (row: T) => string>
+ searchIn?: (row: T) => string
+ sortBy?: Record<string, (row: T) => number | string>
+}
+
+const compare = (a: number | string, b: number | string) =>
+ typeof a === 'number' && typeof b === 'number'
+ ? a - b
+ : String(a).localeCompare(String(b))
+
+export const resolveLocalTable = <T extends { id: number }>(
+ rows: readonly T[],
+ params: URLSearchParams,
+ {
+ defaultOrder,
+ filters = {},
+ searchIn,
+ sortBy = {},
+ }: LocalTableOptions<T> = {},
+) => {
+ const term = readTableSearch(params).trim().toLowerCase()
+ let result = [...rows]
+
+ if (searchIn && term.length >= MIN_TABLE_SEARCH_LENGTH) {
+ result = result.filter((row) => searchIn(row).toLowerCase().includes(term))
+ }
+
+ for (const [id, read] of Object.entries(filters)) {
+ const values = readTableFilter(params, id)
+ if (values.length) {
+ result = result.filter((row) => values.includes(read(row)))
+ }
+ }
+
+ if (defaultOrder) {
+ const { column, order } = readTableOrder(params, defaultOrder)
+ const read = sortBy[column]
+ const direction = order === 'asc' ? 1 : -1
+
+ if (read) {
+ result.sort((a, b) => compare(read(a), read(b)) * direction)
+ }
+ }
+
+ const pageSize = readTablePageSize(params)
+ const totalCount = result.length
+ const totalPages = Math.max(1, Math.ceil(totalCount / pageSize))
+ const currentPage = Math.min(readTablePage(params), totalPages)
+ const edges = result.slice(
+ (currentPage - 1) * pageSize,
+ currentPage * pageSize,
+ )
+
+ return {
+ edges,
+ pageInfo: {
+ count: edges.length,
+ currentPage,
+ endCursor: null,
+ hasNextPage: currentPage < totalPages,
+ hasPreviousPage: currentPage > 1,
+ pageSize,
+ startCursor: null,
+ totalCount,
+ totalPages,
+ },
+ }
+}
diff --git a/apps/web/src/docs/preview-data-table.tsx b/apps/web/src/docs/preview-data-table.tsx
index 18f1ab3d8..61eac91ce 100644
--- a/apps/web/src/docs/preview-data-table.tsx
+++ b/apps/web/src/docs/preview-data-table.tsx
@@ -10,7 +10,18 @@ import React from 'react'
export type { ColumnDef } from '@vitnode/core/components/table/data-table-content'
-export function DataTable<T extends DataTableTMin>(props: DataTableProps<T>) {
+type LocalData<T extends DataTableTMin> = Pick<
+ DataTableProps<T>,
+ 'edges' | 'pageInfo'
+>
+
+export function DataTable<T extends DataTableTMin>(
+ props:
+ | (DataTableProps<T> & { resolve?: undefined })
+ | (Omit<DataTableProps<T>, 'edges' | 'pageInfo'> & {
+ resolve: (params: URLSearchParams) => LocalData<T>
+ }),
+) {
const [search, setSearch] = React.useState('')
const navigation = React.useMemo<DataTableNavigation>(
@@ -25,7 +36,14 @@ export function DataTable<T extends DataTableTMin>(props: DataTableProps<T>) {
return (
<DataTableNavigationProvider value={navigation}>
- <ContentDataTable<T> {...props} />
+ {props.resolve ? (
+ <ContentDataTable<T>
+ {...props}
+ {...props.resolve(navigation.searchParams)}
+ />
+ ) : (
+ <ContentDataTable<T> {...props} />
+ )}
</DataTableNavigationProvider>
)
}
diff --git a/apps/web/src/docs/preview.tsx b/apps/web/src/docs/preview.tsx
index 870ec7d30..804919c39 100644
--- a/apps/web/src/docs/preview.tsx
+++ b/apps/web/src/docs/preview.tsx
@@ -1,4 +1,4 @@
-import { Loader } from '@vitnode/core/components/ui/loader'
+import { Spinner } from '@vitnode/core/components/ui/spinner'
import { cn } from 'cn'
import React from 'react'
@@ -31,7 +31,14 @@ export const Preview = ({
if (withoutBackground) {
return (
<div className="[&_p]:m-0 [&_table]:my-0 [&_table]:rounded-md [&_table]:border-none [&_table]:bg-transparent">
- <React.Suspense fallback={<Loader />} key={name}>
+ <React.Suspense
+ fallback={
+ <div className="flex items-center justify-center">
+ <Spinner size="xl" />
+ </div>
+ }
+ key={name}
+ >
<Example />
</React.Suspense>
</div>
@@ -45,7 +52,14 @@ export const Preview = ({
className,
)}
>
- <React.Suspense fallback={<Loader />} key={name}>
+ <React.Suspense
+ fallback={
+ <div className="flex items-center justify-center">
+ <Spinner size="xl" />
+ </div>
+ }
+ key={name}
+ >
<Example />
</React.Suspense>
</div>
diff --git a/apps/web/src/locales/@vitnode/core/pl.json b/apps/web/src/locales/@vitnode/core/pl.json
index 7abfd9842..9b1b11dee 100644
--- a/apps/web/src/locales/@vitnode/core/pl.json
+++ b/apps/web/src/locales/@vitnode/core/pl.json
@@ -1396,6 +1396,14 @@
"yellow": "Żółty"
},
"confirm": "Potwierdź",
+ "clear": "Wyczyść",
+ "comparison_slider": "Suwak porównania",
+ "copied": "Skopiowano",
+ "copy": "Kopiuj",
+ "copy_failed": "Nie udało się skopiować do schowka. Spróbuj zaznaczyć tekst.",
+ "decrease": "Zmniejsz",
+ "increase": "Zwiększ",
+ "more_count": "+{count} więcej",
"confirm_action": {
"cancel": "Anuluj",
"confirm": "Tak, potwierdzam",
@@ -1405,6 +1413,20 @@
"current_page": "Bieżąca strona",
"data_table": {
"clear_selection": "Wyczyść zaznaczenie",
+ "collapse_row": "Zwiń wiersz",
+ "expand_row": "Rozwiń wiersz",
+ "reorder_cancelled": "Anulowano zmianę kolejności. {name} wraca na miejsce {position} z {total}.",
+ "reorder_column": "Kolejność",
+ "reorder_ended": "Upuszczono {name} na miejscu {position} z {total}.",
+ "reorder_failed": "Nie udało się zapisać nowej kolejności",
+ "reorder_failed_desc": "Wiersze wróciły na swoje miejsca. Spróbuj ponownie za chwilę.",
+ "reorder_instructions": "Naciśnij spację lub enter, aby podnieść wiersz. Przesuwaj go strzałkami. Naciśnij spację lub enter ponownie, aby upuścić go w nowym miejscu, albo escape, aby anulować.",
+ "reorder_over": "{name} przeniesiono na miejsce {position} z {total}.",
+ "reorder_row": "Zmień kolejność: {name}",
+ "reorder_started": "Podniesiono {name}. Jest na miejscu {position} z {total}.",
+ "reorder_unavailable": "Wyczyść wyszukiwanie, filtry i sortowanie, aby zmienić kolejność wierszy.",
+ "row_details": "Szczegóły wiersza",
+ "row_fallback": "wiersz {position}",
"select_all": "Zaznacz wszystkie wiersze",
"select_row": "Zaznacz wiersz"
},
@@ -1666,7 +1688,7 @@
"select_language": "Wybierz język",
"select_option": "Wybierz opcję",
"select_options": "Wybierz opcje",
- "selected_count": "Zaznaczono: {count}",
+ "selected_count": "Zaznaczono: <number>{count}</number>",
"submit": "Wyślij",
"theme": {
"dark": "Ciemny",
diff --git a/apps/web/src/site/home/illustrations/hero-preview.tsx b/apps/web/src/site/home/illustrations/hero-preview.tsx
index ea98334ef..3f17a64c6 100644
--- a/apps/web/src/site/home/illustrations/hero-preview.tsx
+++ b/apps/web/src/site/home/illustrations/hero-preview.tsx
@@ -2,7 +2,7 @@ import { cn } from 'cn'
import { FileCode2, Sparkles } from 'lucide-react'
import { useTranslations } from 'use-intl'
-import { ScreenFrame } from '@/site/marketing/screen-frame'
+import { SafariFrame } from '@/site/marketing/safari-frame'
import { SCREENS } from '@/site/marketing/screens'
const MEMBERS = ['MA', 'KW', 'OL']
@@ -128,7 +128,7 @@ export const HeroPreview = ({ ref }: { ref?: React.Ref<HTMLDivElement> }) => {
transformOrigin: 'left center',
}}
>
- <ScreenFrame
+ <SafariFrame
priority
screen={{ ...SCREENS.dashboard, alt: t('alt') }}
/>
diff --git a/apps/web/src/site/home/sections/showcase-carousel.tsx b/apps/web/src/site/home/sections/showcase-carousel.tsx
index 8c18db1bc..3a755412a 100644
--- a/apps/web/src/site/home/sections/showcase-carousel.tsx
+++ b/apps/web/src/site/home/sections/showcase-carousel.tsx
@@ -11,7 +11,7 @@ import {
import { cn } from 'cn'
import { useEffect, useState } from 'react'
-import { ScreenFrame } from '@/site/marketing/screen-frame'
+import { SafariFrame } from '@/site/marketing/safari-frame'
import { SCREENS } from '@/site/marketing/screens'
import { SLIDES } from './showcase-slides'
@@ -69,7 +69,7 @@ export const ShowcaseCarousel = () => {
{SLIDES.map(({ caption, screen }) => (
<CarouselItem key={screen}>
<figure className="flex flex-col gap-4">
- <ScreenFrame screen={SCREENS[screen]} />
+ <SafariFrame screen={SCREENS[screen]} />
<figcaption className="text-muted-foreground mx-auto max-w-2xl text-center text-sm leading-relaxed text-pretty">
{caption}
</figcaption>
diff --git a/apps/web/src/site/home/sections/showcase.tsx b/apps/web/src/site/home/sections/showcase.tsx
index 090eb9679..21cf64229 100644
--- a/apps/web/src/site/home/sections/showcase.tsx
+++ b/apps/web/src/site/home/sections/showcase.tsx
@@ -1,6 +1,6 @@
import { lazy, Suspense, useEffect, useRef, useState } from 'react'
-import { ScreenFrame } from '@/site/marketing/screen-frame'
+import { SafariFrame } from '@/site/marketing/safari-frame'
import { SCREENS } from '@/site/marketing/screens'
import {
ActionLink,
@@ -20,7 +20,7 @@ const ShowcaseStill = () => {
return (
<figure className="flex flex-col gap-4">
- <ScreenFrame screen={SCREENS[screen]} />
+ <SafariFrame screen={SCREENS[screen]} />
<figcaption className="text-muted-foreground mx-auto max-w-2xl text-center text-sm leading-relaxed text-pretty">
{caption}
</figcaption>
diff --git a/apps/web/src/site/marketing/marketing.css b/apps/web/src/site/marketing/marketing.css
index 0e0279f42..6f32059ea 100644
--- a/apps/web/src/site/marketing/marketing.css
+++ b/apps/web/src/site/marketing/marketing.css
@@ -922,6 +922,7 @@
.mk-integration-face {
display: grid;
place-items: center;
+ filter: drop-shadow(0 8px 10px rgb(from var(--brand) r g b / 0));
transition:
translate 220ms cubic-bezier(0.23, 1, 0.32, 1),
scale 150ms ease-out,
@@ -950,9 +951,7 @@
@media (hover: hover) and (pointer: fine) {
.mk-integration-tile:hover .mk-integration-face {
translate: 0 -4px;
- filter: drop-shadow(
- 0 8px 10px color-mix(in oklch, var(--brand) 30%, transparent)
- );
+ filter: drop-shadow(0 8px 10px rgb(from var(--brand) r g b / 0.3));
}
.mk-integration-tile:hover .mk-integration-outline path {
diff --git a/apps/web/src/site/marketing/safari-frame.tsx b/apps/web/src/site/marketing/safari-frame.tsx
new file mode 100644
index 000000000..3f059b565
--- /dev/null
+++ b/apps/web/src/site/marketing/safari-frame.tsx
@@ -0,0 +1,85 @@
+import { cn } from 'cn'
+import {
+ ChevronLeft,
+ ChevronRight,
+ Copy,
+ Lock,
+ PanelLeft,
+ Plus,
+ RotateCw,
+ Share,
+} from 'lucide-react'
+
+import type { Screen } from './screens'
+
+import { ScreenShot } from './screen-frame'
+
+const TRAFFIC_LIGHTS = [
+ 'bg-red-400 ring-red-500/40',
+ 'bg-amber-400 ring-amber-500/40',
+ 'bg-emerald-400 ring-emerald-500/40',
+]
+
+const ToolbarIcon = ({ Icon }: { Icon: React.ElementType }) => (
+ <Icon className="text-muted-foreground/70 size-4" strokeWidth={1.75} />
+)
+
+export const SafariFrame = ({
+ className,
+ priority = false,
+ screen,
+}: {
+ className?: string
+ priority?: boolean
+ screen: Screen
+}) => (
+ <div
+ className={cn(
+ 'bg-card relative min-w-0 overflow-hidden rounded-2xl border shadow-xl sm:rounded-3xl',
+ className,
+ )}
+ >
+ <div className="bg-muted/70 flex items-center gap-3 border-b px-3 py-2.5 sm:px-4">
+ <div aria-hidden className="flex flex-1 items-center gap-4">
+ <span className="flex gap-1.5">
+ {TRAFFIC_LIGHTS.map((light) => (
+ <span
+ className={cn('size-3 rounded-full ring-1 ring-inset', light)}
+ key={light}
+ />
+ ))}
+ </span>
+ <span className="flex items-center gap-3 max-sm:hidden">
+ <ToolbarIcon Icon={PanelLeft} />
+ <span className="flex items-center gap-1">
+ <ToolbarIcon Icon={ChevronLeft} />
+ <ToolbarIcon Icon={ChevronRight} />
+ </span>
+ </span>
+ </div>
+
+ <div className="bg-background/80 text-muted-foreground flex h-8 w-full max-w-md min-w-0 items-center gap-2 rounded-lg px-3 shadow-xs">
+ <Lock aria-hidden className="size-3 shrink-0" strokeWidth={2.25} />
+ <span className="min-w-0 flex-1 truncate text-center font-mono text-xs">
+ {screen.url}
+ </span>
+ <RotateCw
+ aria-hidden
+ className="size-3 shrink-0 max-sm:hidden"
+ strokeWidth={2.25}
+ />
+ </div>
+
+ <div
+ aria-hidden
+ className="flex flex-1 items-center justify-end gap-4 max-sm:hidden"
+ >
+ <ToolbarIcon Icon={Share} />
+ <ToolbarIcon Icon={Plus} />
+ <ToolbarIcon Icon={Copy} />
+ </div>
+ </div>
+
+ <ScreenShot priority={priority} screen={screen} />
+ </div>
+)
diff --git a/apps/web/src/site/marketing/screen-frame.tsx b/apps/web/src/site/marketing/screen-frame.tsx
index a901591f6..3699f6633 100644
--- a/apps/web/src/site/marketing/screen-frame.tsx
+++ b/apps/web/src/site/marketing/screen-frame.tsx
@@ -31,6 +31,32 @@ const ScreenImg = ({
/>
)
+export const ScreenShot = ({
+ priority = false,
+ screen,
+}: {
+ priority?: boolean
+ screen: Screen
+}) => (
+ <div
+ className="w-full"
+ style={{ aspectRatio: `${SCREEN_SIZE.width} / ${SCREEN_SIZE.height}` }}
+ >
+ <ScreenImg
+ alt={screen.alt}
+ className="block size-full object-cover object-top dark:hidden"
+ image={screen.light}
+ priority={priority}
+ />
+ <ScreenImg
+ alt={screen.alt}
+ className="hidden size-full object-cover object-top dark:block"
+ image={screen.dark}
+ priority={priority}
+ />
+ </div>
+)
+
export const ScreenFrame = ({
className,
note,
@@ -59,23 +85,7 @@ export const ScreenFrame = ({
</span>
</div>
- <div
- className="w-full"
- style={{ aspectRatio: `${SCREEN_SIZE.width} / ${SCREEN_SIZE.height}` }}
- >
- <ScreenImg
- alt={screen.alt}
- className="block size-full object-cover object-top dark:hidden"
- image={screen.light}
- priority={priority}
- />
- <ScreenImg
- alt={screen.alt}
- className="hidden size-full object-cover object-top dark:block"
- image={screen.dark}
- priority={priority}
- />
- </div>
+ <ScreenShot priority={priority} screen={screen} />
{note ? (
<span className="bg-background/90 text-muted-foreground absolute right-3 bottom-3 rounded-full border px-2.5 py-1 text-xs font-medium backdrop-blur">
diff --git a/packages/vitnode/src/components/confirm-action/confirm-action-alert-dialog.test.tsx b/packages/vitnode/src/components/confirm-action/confirm-action-alert-dialog.test.tsx
new file mode 100644
index 000000000..5760d4b74
--- /dev/null
+++ b/packages/vitnode/src/components/confirm-action/confirm-action-alert-dialog.test.tsx
@@ -0,0 +1,44 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import { Trash2Icon } from "lucide-react";
+import { describe, expect, it } from "vitest";
+
+import { ConfirmActionAlertDialog } from "./confirm-action-alert-dialog";
+
+const dialogMedia = () =>
+ screen
+ .getByRole("alertdialog")
+ .querySelector("[data-slot=alert-dialog-media]");
+
+describe("ConfirmActionAlertDialog", () => {
+ it("shows the icon above the title in the compact layout", async () => {
+ render(
+ <ConfirmActionAlertDialog
+ icon={<Trash2Icon />}
+ onSubmit={() => {}}
+ title="Delete chat?"
+ >
+ <button type="button">Delete</button>
+ </ConfirmActionAlertDialog>,
+ );
+ fireEvent.click(screen.getByRole("button", { name: "Delete" }));
+
+ expect(await screen.findByText("Delete chat?")).toBeTruthy();
+ expect(dialogMedia()?.querySelector("svg")?.classList).toContain(
+ "lucide-trash-2",
+ );
+ expect(screen.getByRole("alertdialog").dataset.size).toBe("sm");
+ });
+
+ it("keeps the default layout without an icon", async () => {
+ render(
+ <ConfirmActionAlertDialog onSubmit={() => {}} title="Delete chat?">
+ <button type="button">Delete</button>
+ </ConfirmActionAlertDialog>,
+ );
+ fireEvent.click(screen.getByRole("button", { name: "Delete" }));
+
+ expect(await screen.findByText("Delete chat?")).toBeTruthy();
+ expect(dialogMedia()).toBeNull();
+ expect(screen.getByRole("alertdialog").dataset.size).toBe("default");
+ });
+});
diff --git a/packages/vitnode/src/components/confirm-action/confirm-action-alert-dialog.tsx b/packages/vitnode/src/components/confirm-action/confirm-action-alert-dialog.tsx
index db83b45a9..d9a94a48c 100644
--- a/packages/vitnode/src/components/confirm-action/confirm-action-alert-dialog.tsx
+++ b/packages/vitnode/src/components/confirm-action/confirm-action-alert-dialog.tsx
@@ -1,3 +1,4 @@
+import { cn } from "cn";
import React from "react";
import { useTranslations } from "use-intl";
@@ -5,24 +6,20 @@ import {
AlertDialog,
AlertDialogContent,
AlertDialogDescription,
- AlertDialogFooterSkeleton,
AlertDialogHeader,
+ AlertDialogMedia,
AlertDialogTitle,
AlertDialogTrigger,
} from "../ui/alert-dialog";
-
-const ContentConfirmAction = React.lazy(async () =>
- import("./content").then(module => ({
- default: module.ContentConfirmAction,
- })),
-);
+import { ContentConfirmAction } from "./content";
export const ConfirmActionAlertDialog = ({
children,
title,
description,
finalFocus,
- submitVariant,
+ icon,
+ submitVariant = "destructive",
textSubmit,
onSubmit,
...props
@@ -31,6 +28,7 @@ export const ConfirmActionAlertDialog = ({
children?: React.ReactElement;
description?: React.ReactNode;
finalFocus?: React.ComponentProps<typeof AlertDialogContent>["finalFocus"];
+ icon?: React.ReactNode;
title?: React.ReactNode;
}) => {
const t = useTranslations("core.global.confirm_action");
@@ -39,21 +37,32 @@ export const ConfirmActionAlertDialog = ({
<AlertDialog {...props}>
{children ? <AlertDialogTrigger render={children} /> : null}
- <AlertDialogContent finalFocus={finalFocus}>
+ <AlertDialogContent
+ finalFocus={finalFocus}
+ size={icon ? "sm" : "default"}
+ >
<AlertDialogHeader>
+ {icon ? (
+ <AlertDialogMedia
+ className={cn(
+ submitVariant === "destructive" &&
+ "bg-destructive/10 text-destructive dark:bg-destructive/20",
+ )}
+ >
+ {icon}
+ </AlertDialogMedia>
+ ) : null}
<AlertDialogTitle>{title ?? t("title")}</AlertDialogTitle>
<AlertDialogDescription>
{description ?? t("desc")}
</AlertDialogDescription>
</AlertDialogHeader>
- <React.Suspense fallback={<AlertDialogFooterSkeleton />}>
- <ContentConfirmAction
- onSubmit={onSubmit}
- submitVariant={submitVariant}
- textSubmit={textSubmit}
- />
- </React.Suspense>
+ <ContentConfirmAction
+ onSubmit={onSubmit}
+ submitVariant={submitVariant}
+ textSubmit={textSubmit}
+ />
</AlertDialogContent>
</AlertDialog>
);
diff --git a/packages/vitnode/src/components/form/fields/cascader.tsx b/packages/vitnode/src/components/form/fields/cascader.tsx
new file mode 100644
index 000000000..e43c2a137
--- /dev/null
+++ b/packages/vitnode/src/components/form/fields/cascader.tsx
@@ -0,0 +1,52 @@
+import type { ItemAutoFormComponentProps } from "../auto-form";
+
+import { Cascader } from "../../ui/cascader";
+import { FormControl, FormMessage } from "../../ui/form";
+import { AutoFormDesc } from "../common/desc";
+import { AutoFormLabel } from "../common/label";
+
+type CascaderProps = React.ComponentProps<typeof Cascader>;
+
+export const AutoFormCascader = ({
+ label,
+ labelRight,
+ description,
+ otherProps: { isOptional },
+ field,
+ options,
+ onValueChange,
+ showClear,
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
+ itemParams,
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
+ multiLang,
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
+ children,
+ ...props
+}: ItemAutoFormComponentProps &
+ Omit<CascaderProps, "defaultValue" | "value">) => (
+ <>
+ {!!label && (
+ <AutoFormLabel isOptional={isOptional} labelRight={labelRight}>
+ {label}
+ </AutoFormLabel>
+ )}
+
+ <FormControl>
+ <Cascader
+ onValueChange={(value, path) => {
+ field.onChange(value ?? undefined);
+ field.onBlur();
+ onValueChange?.(value, path);
+ }}
+ options={options}
+ showClear={showClear ?? isOptional}
+ value={field.value ?? null}
+ {...props}
+ />
+ </FormControl>
+
+ {!!description && <AutoFormDesc>{description}</AutoFormDesc>}
+ <FormMessage />
+ </>
+);
diff --git a/packages/vitnode/src/components/form/fields/combobox-groups.test.ts b/packages/vitnode/src/components/form/fields/combobox-groups.test.ts
new file mode 100644
index 000000000..0e075692c
--- /dev/null
+++ b/packages/vitnode/src/components/form/fields/combobox-groups.test.ts
@@ -0,0 +1,48 @@
+import { describe, expect, it } from "vitest";
+
+import { groupComboboxItems } from "./combobox-groups";
+
+describe("groupComboboxItems", () => {
+ it("returns null when no option names a group", () => {
+ expect(
+ groupComboboxItems(
+ ["a", "b"],
+ [
+ { label: "A", value: "a" },
+ { label: "B", value: "b" },
+ ],
+ ),
+ ).toBeNull();
+ });
+
+ it("groups values in the order their groups first appear", () => {
+ expect(
+ groupComboboxItems(
+ ["apple", "carrot", "banana"],
+ [
+ { group: "Fruits", label: "Apple", value: "apple" },
+ { group: "Vegetables", label: "Carrot", value: "carrot" },
+ { group: "Fruits", label: "Banana", value: "banana" },
+ ],
+ ),
+ ).toEqual([
+ { items: ["apple", "banana"], value: "Fruits" },
+ { items: ["carrot"], value: "Vegetables" },
+ ]);
+ });
+
+ it("keeps values without a group together under an empty heading", () => {
+ expect(
+ groupComboboxItems(
+ ["other", "apple", "unknown"],
+ [
+ { label: "Other", value: "other" },
+ { group: "Fruits", label: "Apple", value: "apple" },
+ ],
+ ),
+ ).toEqual([
+ { items: ["other", "unknown"], value: "" },
+ { items: ["apple"], value: "Fruits" },
+ ]);
+ });
+});
diff --git a/packages/vitnode/src/components/form/fields/combobox-groups.ts b/packages/vitnode/src/components/form/fields/combobox-groups.ts
new file mode 100644
index 000000000..64607c602
--- /dev/null
+++ b/packages/vitnode/src/components/form/fields/combobox-groups.ts
@@ -0,0 +1,29 @@
+export interface ComboboxOption {
+ group?: string;
+ label: string;
+ value: string;
+}
+
+export interface ComboboxItemGroup {
+ items: string[];
+ value: string;
+}
+
+export const groupComboboxItems = (
+ values: readonly string[],
+ options: readonly ComboboxOption[],
+): ComboboxItemGroup[] | null => {
+ if (!options.some(option => option.group)) return null;
+
+ const groupOf = new Map(
+ options.map(option => [option.value, option.group ?? ""]),
+ );
+ const groups = new Map<string, string[]>();
+
+ for (const value of values) {
+ const group = groupOf.get(value) ?? "";
+ groups.set(group, [...(groups.get(group) ?? []), value]);
+ }
+
+ return [...groups].map(([value, items]) => ({ items, value }));
+};
diff --git a/packages/vitnode/src/components/form/fields/combobox.tsx b/packages/vitnode/src/components/form/fields/combobox.tsx
index a90d8c085..9b0ef4dd3 100644
--- a/packages/vitnode/src/components/form/fields/combobox.tsx
+++ b/packages/vitnode/src/components/form/fields/combobox.tsx
@@ -6,12 +6,17 @@ import { useTranslations } from "use-intl";
import {
Combobox,
ComboboxChip,
+ ComboboxChipList,
+ ComboboxChipOverflow,
ComboboxChips,
ComboboxChipsInput,
+ ComboboxCollection,
ComboboxContent,
ComboboxEmpty,
+ ComboboxGroup,
ComboboxInput,
ComboboxItem,
+ ComboboxLabel,
ComboboxList,
ComboboxValue,
useComboboxAnchor,
@@ -20,9 +25,11 @@ import { FormMessage } from "@/components/ui/form";
import { Skeleton } from "@/components/ui/skeleton";
import type { ItemAutoFormComponentProps } from "../auto-form";
+import type { ComboboxItemGroup, ComboboxOption } from "./combobox-groups";
import { AutoFormDesc } from "../common/desc";
import { AutoFormLabel } from "../common/label";
+import { groupComboboxItems } from "./combobox-groups";
export interface ComboboxAsyncItem {
label: string;
@@ -37,7 +44,8 @@ export const COMBOBOX_INERT_QUERY_KEY = "combobox:no-fetcher";
type AutoFormComboboxProps = ItemAutoFormComponentProps &
Omit<React.ComponentProps<typeof Combobox>, "items" | "value"> & {
className?: string;
- labels?: { label: string; value: string }[];
+ labels?: ComboboxOption[];
+ maxVisibleChips?: number;
placeholder?: string;
renderChip?: (item: ComboboxAsyncItem) => React.ReactNode;
renderItem?: (item: ComboboxAsyncItem) => React.ReactNode;
@@ -71,6 +79,7 @@ export const AutoFormCombobox = ({
otherProps,
labels = [],
labelRight,
+ maxVisibleChips,
onValueChange,
onInputValueChange,
disabled,
@@ -113,6 +122,11 @@ export const AutoFormCombobox = ({
}, 500);
const items = isAsync ? (data ?? []) : (otherProps?.enum ?? []);
+ const staticItemLabel = (item: string) =>
+ labels.find(l => l.value === item)?.label ?? item;
+ const groupedItems = isAsync
+ ? null
+ : groupComboboxItems(otherProps?.enum ?? [], labels);
const inputPlaceholder = isAsync
? (searchPlaceholder ?? placeholder ?? t("select_option"))
: (placeholder ?? t("select_option"));
@@ -172,15 +186,26 @@ export const AutoFormCombobox = ({
);
}
- return (
- <ComboboxList>
- {(item: string) => (
- <ComboboxItem key={item} value={item}>
- {labels.find(l => l.value === item)?.label ?? item}
- </ComboboxItem>
- )}
- </ComboboxList>
+ const renderStaticItem = (item: string) => (
+ <ComboboxItem key={item} value={item}>
+ {staticItemLabel(item)}
+ </ComboboxItem>
);
+
+ if (groupedItems) {
+ return (
+ <ComboboxList>
+ {(group: ComboboxItemGroup) => (
+ <ComboboxGroup items={group.items} key={group.value}>
+ {group.value && <ComboboxLabel>{group.value}</ComboboxLabel>}
+ <ComboboxCollection>{renderStaticItem}</ComboboxCollection>
+ </ComboboxGroup>
+ )}
+ </ComboboxList>
+ );
+ }
+
+ return <ComboboxList>{renderStaticItem}</ComboboxList>;
};
const renderContent = () => {
@@ -218,7 +243,8 @@ export const AutoFormCombobox = ({
disabled={disabled}
filter={comboboxFilter}
isItemEqualToValue={comboboxItemEqual}
- items={items}
+ items={groupedItems ?? items}
+ itemToStringLabel={isAsync ? undefined : staticItemLabel}
multiple={isMultiple}
onInputValueChange={onComboboxInputValueChange}
onValueChange={onComboboxValueChange}
@@ -231,23 +257,32 @@ export const AutoFormCombobox = ({
<ComboboxValue>
{(values: (ComboboxAsyncItem | string)[]) => (
<>
- {values.map(value => {
- const item =
- typeof value === "string"
- ? {
- label:
- labels.find(l => l.value === value)?.label ??
+ <ComboboxChipList>
+ {values.slice(0, maxVisibleChips).map(value => {
+ const item =
+ typeof value === "string"
+ ? {
+ label:
+ labels.find(l => l.value === value)?.label ??
+ value,
value,
- value,
- }
- : value;
+ }
+ : value;
- return (
- <ComboboxChip key={item.value}>
- {renderChip ? renderChip(item) : item.label}
- </ComboboxChip>
- );
- })}
+ return (
+ <ComboboxChip key={item.value}>
+ {renderChip ? renderChip(item) : item.label}
+ </ComboboxChip>
+ );
+ })}
+ {maxVisibleChips !== undefined &&
+ values.length > maxVisibleChips && (
+ <ComboboxChipOverflow
+ count={values.length - maxVisibleChips}
+ key="overflow"
+ />
+ )}
+ </ComboboxChipList>
<ComboboxChipsInput
aria-invalid={otherProps?.["aria-invalid"] ?? false}
disabled={disabled}
diff --git a/packages/vitnode/src/components/form/fields/file-gallery.tsx b/packages/vitnode/src/components/form/fields/file-gallery.tsx
index eb08c2f81..9f7054ff5 100644
--- a/packages/vitnode/src/components/form/fields/file-gallery.tsx
+++ b/packages/vitnode/src/components/form/fields/file-gallery.tsx
@@ -200,7 +200,7 @@ export const FileGallery = ({
};
const list = (
- <ul className="flex flex-col gap-2" data-slot="file-list">
+ <ul className="not-prose flex flex-col gap-2" data-slot="file-list">
{rows.map(row => {
const name = rowName(row);
diff --git a/packages/vitnode/src/components/form/fields/input-otp.tsx b/packages/vitnode/src/components/form/fields/input-otp.tsx
new file mode 100644
index 000000000..c1e463322
--- /dev/null
+++ b/packages/vitnode/src/components/form/fields/input-otp.tsx
@@ -0,0 +1,97 @@
+import React from "react";
+
+import type { ItemAutoFormComponentProps } from "../auto-form";
+
+import { FormControl, FormMessage } from "../../ui/form";
+import {
+ InputOTP,
+ InputOTPGroup,
+ InputOTPSeparator,
+ InputOTPSlot,
+} from "../../ui/input-otp";
+import { AutoFormDesc } from "../common/desc";
+import { AutoFormLabel } from "../common/label";
+
+const DEFAULT_CODE_LENGTH = 6;
+
+const splitIntoHalves = (length: number) =>
+ length >= 6 && length % 2 === 0 ? [length / 2, length / 2] : [length];
+
+type AutoFormInputOTPProps = ItemAutoFormComponentProps &
+ Omit<
+ React.ComponentProps<typeof InputOTP>,
+ "children" | "maxLength" | "onChange" | "render" | "value"
+ > & {
+ groups?: number[];
+ maxLength?: number;
+ onChange?: (value: string) => void;
+ };
+
+export const AutoFormInputOTP = ({
+ label,
+ labelRight,
+ description,
+ otherProps,
+ field,
+ groups,
+ maxLength,
+ pattern,
+ onChange,
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
+ itemParams,
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
+ multiLang,
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
+ children,
+ ...props
+}: AutoFormInputOTPProps) => {
+ const length = maxLength ?? otherProps.maxLength ?? DEFAULT_CODE_LENGTH;
+ const slotGroups = groups ?? splitIntoHalves(length);
+ const groupStarts = slotGroups.map((_, groupIndex) =>
+ slotGroups.slice(0, groupIndex).reduce((sum, size) => sum + size, 0),
+ );
+
+ return (
+ <>
+ {!!label && (
+ <AutoFormLabel
+ isOptional={otherProps.isOptional}
+ labelRight={labelRight}
+ >
+ {label}
+ </AutoFormLabel>
+ )}
+
+ <FormControl>
+ <InputOTP
+ maxLength={length}
+ name={field.name}
+ onBlur={field.onBlur}
+ onChange={value => {
+ field.onChange(value);
+ onChange?.(value);
+ }}
+ pattern={pattern ?? otherProps.pattern}
+ value={field.value ?? ""}
+ {...props}
+ >
+ {slotGroups.map((size, groupIndex) => (
+ <React.Fragment key={groupStarts[groupIndex]}>
+ {groupIndex > 0 && <InputOTPSeparator />}
+ <InputOTPGroup>
+ {Array.from({ length: size }, (_, slot) => {
+ const index = groupStarts[groupIndex] + slot;
+
+ return <InputOTPSlot index={index} key={index} />;
+ })}
+ </InputOTPGroup>
+ </React.Fragment>
+ ))}
+ </InputOTP>
+ </FormControl>
+
+ {!!description && <AutoFormDesc>{description}</AutoFormDesc>}
+ <FormMessage />
+ </>
+ );
+};
diff --git a/packages/vitnode/src/components/form/fields/nullable-number.tsx b/packages/vitnode/src/components/form/fields/nullable-number.tsx
index 41ff5eac8..d9f77c557 100644
--- a/packages/vitnode/src/components/form/fields/nullable-number.tsx
+++ b/packages/vitnode/src/components/form/fields/nullable-number.tsx
@@ -2,8 +2,14 @@ import { cn } from "cn";
import React from "react";
import { Checkbox } from "@/components/ui/checkbox";
-import { FormControl, FormMessage } from "@/components/ui/form";
-import { Input } from "@/components/ui/input";
+import { FormControl, FormMessage, useFormField } from "@/components/ui/form";
+import {
+ NumberField,
+ NumberFieldDecrement,
+ NumberFieldGroup,
+ NumberFieldIncrement,
+ NumberFieldInput,
+} from "@/components/ui/number-field";
import type { ItemAutoFormComponentProps } from "../auto-form";
@@ -11,8 +17,12 @@ import { AutoFormDesc } from "../common/desc";
import { AutoFormLabel } from "../common/label";
type AutoFormNullableNumberProps = ItemAutoFormComponentProps &
- Omit<React.ComponentProps<typeof Input>, "value"> & {
+ Omit<
+ React.ComponentProps<typeof NumberField>,
+ "children" | "defaultValue" | "id" | "name" | "onValueChange" | "value"
+ > & {
orLabel?: React.ReactNode;
+ placeholder?: string;
toggleLabel: React.ReactNode;
unitLabel?: React.ReactNode;
};
@@ -30,15 +40,15 @@ export const AutoFormNullableNumber = ({
// eslint-disable-next-line @typescript-eslint/no-unused-vars
multiLang,
className,
+ disabled,
+ placeholder,
unitLabel,
orLabel,
toggleLabel,
...props
}: AutoFormNullableNumberProps) => {
+ const { formItemId } = useFormField();
const isToggled = field.value === null;
- const [text, setText] = React.useState(
- typeof field.value === "number" ? String(field.value) : "",
- );
const lastNumericRef = React.useRef(
typeof field.value === "number" ? field.value : 0,
);
@@ -52,32 +62,30 @@ export const AutoFormNullableNumber = ({
)}
<div className="flex flex-wrap items-center gap-x-3 gap-y-2">
- <FormControl>
- <Input
- className={cn("w-40", className)}
- disabled={isToggled}
- onChange={event => {
- const raw = event.target.value;
- setText(raw);
-
- if (raw === "") {
- lastNumericRef.current = 0;
- field.onChange(0);
-
- return;
- }
-
- const parsed = Number(raw);
- if (Number.isNaN(parsed)) return;
-
- lastNumericRef.current = parsed;
- field.onChange(parsed);
- }}
- type="number"
- value={isToggled ? "" : text}
- {...props}
- />
- </FormControl>
+ <NumberField
+ className={cn("w-40", className)}
+ disabled={isToggled || disabled}
+ id={formItemId}
+ name={field.name}
+ onValueChange={value => {
+ const next = value ?? 0;
+ lastNumericRef.current = next;
+ field.onChange(next);
+ }}
+ value={typeof field.value === "number" ? field.value : null}
+ {...props}
+ >
+ <NumberFieldGroup>
+ <NumberFieldDecrement />
+ <FormControl>
+ <NumberFieldInput
+ onBlur={field.onBlur}
+ placeholder={placeholder}
+ />
+ </FormControl>
+ <NumberFieldIncrement />
+ </NumberFieldGroup>
+ </NumberField>
{!!unitLabel && (
<span className="text-muted-foreground text-sm">{unitLabel}</span>
@@ -89,15 +97,9 @@ export const AutoFormNullableNumber = ({
<label className="flex items-center gap-2 text-sm">
<Checkbox
checked={isToggled}
+ disabled={disabled}
onCheckedChange={checked => {
- if (checked) {
- field.onChange(null);
-
- return;
- }
-
- field.onChange(lastNumericRef.current);
- setText(String(lastNumericRef.current));
+ field.onChange(checked ? null : lastNumericRef.current);
}}
/>
{toggleLabel}
diff --git a/packages/vitnode/src/components/form/fields/number.tsx b/packages/vitnode/src/components/form/fields/number.tsx
index ba658b325..11809bef3 100644
--- a/packages/vitnode/src/components/form/fields/number.tsx
+++ b/packages/vitnode/src/components/form/fields/number.tsx
@@ -1,13 +1,14 @@
import { cn } from "cn";
import React from "react";
-import { FormControl, FormMessage } from "@/components/ui/form";
+import { FormControl, FormMessage, useFormField } from "@/components/ui/form";
import {
- InputGroup,
- InputGroupAddon,
- InputGroupInput,
- InputGroupText,
-} from "@/components/ui/input-group";
+ NumberField,
+ NumberFieldDecrement,
+ NumberFieldGroup,
+ NumberFieldIncrement,
+ NumberFieldInput,
+} from "@/components/ui/number-field";
import type { ItemAutoFormComponentProps } from "../auto-form";
@@ -15,7 +16,11 @@ import { AutoFormDesc } from "../common/desc";
import { AutoFormLabel } from "../common/label";
type AutoFormNumberProps = ItemAutoFormComponentProps &
- Omit<React.ComponentProps<typeof InputGroupInput>, "type" | "value"> & {
+ Omit<
+ React.ComponentProps<typeof NumberField>,
+ "children" | "defaultValue" | "id" | "name" | "onValueChange" | "value"
+ > & {
+ placeholder?: string;
unitLabel?: React.ReactNode;
};
@@ -30,12 +35,11 @@ export const AutoFormNumber = ({
// eslint-disable-next-line @typescript-eslint/no-unused-vars
multiLang,
otherProps: { isOptional },
+ placeholder,
unitLabel,
...props
}: AutoFormNumberProps) => {
- const [text, setText] = React.useState(
- typeof field.value === "number" ? String(field.value) : "",
- );
+ const { formItemId } = useFormField();
return (
<>
@@ -45,31 +49,33 @@ export const AutoFormNumber = ({
</AutoFormLabel>
)}
- <InputGroup className={cn("w-48", className)}>
- <FormControl>
- <InputGroupInput
- {...field}
- inputMode="numeric"
- onChange={event => {
- const raw = event.target.value;
- setText(raw);
+ <div className="flex flex-wrap items-center gap-x-3 gap-y-2">
+ <NumberField
+ className={cn("w-48", className)}
+ id={formItemId}
+ name={field.name}
+ onValueChange={value => {
+ field.onChange(value);
+ }}
+ value={typeof field.value === "number" ? field.value : null}
+ {...props}
+ >
+ <NumberFieldGroup>
+ <NumberFieldDecrement />
+ <FormControl>
+ <NumberFieldInput
+ onBlur={field.onBlur}
+ placeholder={placeholder}
+ />
+ </FormControl>
+ <NumberFieldIncrement />
+ </NumberFieldGroup>
+ </NumberField>
- const parsed = Number(raw);
- field.onChange(
- raw === "" || Number.isNaN(parsed) ? null : parsed,
- );
- }}
- type="number"
- value={text}
- {...props}
- />
- </FormControl>
{!!unitLabel && (
- <InputGroupAddon align="inline-end">
- <InputGroupText>{unitLabel}</InputGroupText>
- </InputGroupAddon>
+ <span className="text-muted-foreground text-sm">{unitLabel}</span>
)}
- </InputGroup>
+ </div>
{!!description && <AutoFormDesc>{description}</AutoFormDesc>}
<FormMessage />
diff --git a/packages/vitnode/src/components/table/content.tsx b/packages/vitnode/src/components/table/content.tsx
index a8628e28b..cde456b25 100644
--- a/packages/vitnode/src/components/table/content.tsx
+++ b/packages/vitnode/src/components/table/content.tsx
@@ -1,5 +1,7 @@
import { cn } from "cn";
import { SearchXIcon } from "lucide-react";
+import { AnimatePresence } from "motion/react";
+import React from "react";
import type {
AlignDataTable,
@@ -17,11 +19,26 @@ import {
TableHeader,
TableRow,
} from "../ui/table";
+import { TooltipGroup } from "../ui/tooltip";
+import {
+ ExpandedRowDataTable,
+ ExpandHeaderDataTable,
+ ExpandToggleDataTable,
+ useRowExpansionDataTable,
+} from "./expansion";
import { FiltersDataTable } from "./filters";
import { useDataTableUrl } from "./navigation";
import { NoResultsDataTable } from "./no-results";
import { OrderTableHeadDataTable } from "./order-table-head";
import { PaginationDataTable } from "./pagination";
+import {
+ ReorderHandleDataTable,
+ ReorderHeaderDataTable,
+ ReorderProviderDataTable,
+ SortableRowGroupDataTable,
+ useRowOrderDataTable,
+} from "./reorder";
+import { isTableInStoredOrder } from "./reorder-state";
import { SearchDataTable } from "./search";
import {
BulkActionsDataTable,
@@ -49,8 +66,10 @@ export function ContentDataTable<T extends DataTableTMin>({
bulkActions,
columns,
edges,
+ expandable,
pageInfo,
order,
+ reorderable,
customNoResults,
header,
rowOpens,
@@ -60,6 +79,19 @@ export function ContentDataTable<T extends DataTableTMin>({
...props
}: DataTableProps<T>) {
const { searchParams } = useDataTableUrl();
+ const expandedBaseId = React.useId();
+ const { reorder, rows } = useRowOrderDataTable({
+ edges,
+ onReorder: reorderable?.onReorder,
+ });
+ const rowIds = rows.map(row => row.id);
+ const expansion = useRowExpansionDataTable({
+ defaultExpanded: expandable?.defaultExpanded,
+ rowIds,
+ });
+ const canExpand = (row: T) =>
+ expandable !== undefined && (expandable.canExpand?.(row) ?? true);
+ const expandedIdOf = (row: T) => `${expandedBaseId}expanded-${row.id}`;
// WHICH COLUMN THE LIST IS ORDERED BY, SAID AND NOT ONLY DRAWN. The arrow on
// the active header is the whole of what states the order once a surface
// stops carrying an "Ordered" control beside its list, and an arrow is not
@@ -84,17 +116,161 @@ export function ContentDataTable<T extends DataTableTMin>({
return ordered.order === "asc" ? "ascending" : "descending";
};
const hasToolbar = Boolean(search) || Boolean(filters?.length);
- const allColumns: ColumnDef<T>[] = bulkActions
- ? [
- {
- id: "select",
- header: <SelectAllDataTable />,
- className: "w-8",
- cell: ({ row }) => <SelectRowDataTable id={row.id} />,
- },
- ...columns,
- ]
- : columns;
+ const isReorderDisabled =
+ reorderable?.disabled === true ||
+ !isTableInStoredOrder(searchParams, {
+ defaultOrder: {
+ column: String(order.defaultOrder.column),
+ order: order.defaultOrder.order,
+ },
+ filterIds: filters?.map(filter => filter.id) ?? [],
+ });
+ const rowLabelOf = (id: number) => {
+ const row = rows.find(item => item.id === id);
+
+ return row ? reorderable?.getRowLabel?.(row) : undefined;
+ };
+ const allColumns: ColumnDef<T>[] = [
+ ...(reorderable
+ ? [
+ {
+ id: "reorder",
+ header: <ReorderHeaderDataTable />,
+ className: "w-8",
+ cell: () => <ReorderHandleDataTable />,
+ },
+ ]
+ : []),
+ ...(bulkActions
+ ? [
+ {
+ id: "select",
+ header: <SelectAllDataTable />,
+ className: "w-8",
+ cell: ({ row }: { row: T }) => <SelectRowDataTable id={row.id} />,
+ },
+ ]
+ : []),
+ ...(expandable
+ ? [
+ {
+ id: "expand",
+ header: <ExpandHeaderDataTable />,
+ className: "w-8",
+ cell: ({ row }: { row: T }) =>
+ canExpand(row) ? (
+ <ExpandToggleDataTable
+ controls={expandedIdOf(row)}
+ expanded={expansion.isExpanded(row.id)}
+ onToggle={() => expansion.toggle(row.id)}
+ />
+ ) : null,
+ },
+ ]
+ : []),
+ ...columns,
+ ];
+
+ const renderRow = (row: T) => {
+ const cells = allColumns.map(column => {
+ const columnKey = column.id ?? String(column.accessorKey);
+ const content = column.cell
+ ? column.cell({ allData: rows, row })
+ : column.accessorKey != null
+ ? String(row[column.accessorKey])
+ : "";
+
+ return (
+ <TableCell
+ // The column's own class reaches the cell as well as the
+ // head. It reached the head alone, so a caller could
+ // neither align a value under its own header nor let a
+ // long name wrap, and both had to be redone on an element
+ // inside the cell.
+ className={cn(alignClassName(column.align), column.className)}
+ key={`${row.id}_${columnKey}`}
+ >
+ {content}
+ </TableCell>
+ );
+ });
+
+ const detail = expandable && (
+ <AnimatePresence initial={false}>
+ {canExpand(row) && expansion.isExpanded(row.id) && (
+ <ExpandedRowDataTable
+ colSpan={allColumns.length}
+ id={expandedIdOf(row)}
+ key="expanded"
+ >
+ {expandable.render(row)}
+ </ExpandedRowDataTable>
+ )}
+ </AnimatePresence>
+ );
+
+ if (bulkActions) {
+ return (
+ <>
+ <RowSelectableDataTable id={row.id}>{cells}</RowSelectableDataTable>
+ {detail}
+ </>
+ );
+ }
+
+ return (
+ <>
+ <TableRow
+ className={
+ rowOpens
+ ? "focus-visible:bg-muted/50 focus-visible:outline-ring cursor-pointer focus-visible:outline-1"
+ : undefined
+ }
+ onClick={
+ rowOpens
+ ? event => {
+ // A control inside the row answers for itself,
+ // and a reader who has selected text in a cell
+ // was reading it rather than asking to leave.
+ if (
+ (event.target as HTMLElement).closest(
+ "a,button,input,select,textarea,[role=checkbox]",
+ )
+ ) {
+ return;
+ }
+ if (window.getSelection()?.toString()) {
+ return;
+ }
+ rowOpens(row);
+ }
+ : undefined
+ }
+ onKeyDown={
+ rowOpens
+ ? event => {
+ if (
+ (event.target as HTMLElement).closest(
+ "a,button,input,select,textarea,[role=checkbox]",
+ )
+ ) {
+ return;
+ }
+ if (event.key === "Enter" || event.key === " ") {
+ event.preventDefault();
+ rowOpens(row);
+ }
+ }
+ : undefined
+ }
+ tabIndex={rowOpens ? 0 : undefined}
+ >
+ {cells}
+ </TableRow>
+ {detail}
+ </>
+ );
+ };
const table = (
<div className="bg-card text-card-foreground ring-foreground/10 overflow-hidden rounded-md shadow-xs ring-1">
@@ -125,7 +301,7 @@ export function ContentDataTable<T extends DataTableTMin>({
the table's own `overflow-x-auto` then works against. It lives here
because every caller sits in that same `<main>`. */}
<div className="grid grid-cols-[minmax(0,1fr)]">
- <div>
+ <div className={expandable ? "@container" : undefined}>
<Table
{...props}
className={cn(
@@ -141,6 +317,7 @@ export function ContentDataTable<T extends DataTableTMin>({
"[&_td:first-child]:pl-4 sm:[&_td:first-child]:pl-6 [&_th:first-child]:pl-4 sm:[&_th:first-child]:pl-6",
"[&_td:last-child]:pr-4 sm:[&_td:last-child]:pr-6 [&_th:last-child]:pr-4 sm:[&_th:last-child]:pr-6",
bulkActions &&
+ !reorderable &&
"[&_td:first-child]:pe-4 sm:[&_td:first-child]:pe-5 [&_th:first-child]:pe-4 sm:[&_th:first-child]:pe-5",
props.className,
)}
@@ -179,95 +356,8 @@ export function ContentDataTable<T extends DataTableTMin>({
</TableRow>
</TableHeader>
- <TableBody>
- {edges.length ? (
- edges.map(row => {
- const cells = allColumns.map(column => {
- const columnKey = column.id ?? String(column.accessorKey);
- const content = column.cell
- ? column.cell({ allData: edges, row })
- : column.accessorKey != null
- ? String(row[column.accessorKey])
- : "";
-
- return (
- <TableCell
- // The column's own class reaches the cell as well as the
- // head. It reached the head alone, so a caller could
- // neither align a value under its own header nor let a
- // long name wrap, and both had to be redone on an element
- // inside the cell.
- className={cn(
- alignClassName(column.align),
- column.className,
- )}
- key={`${row.id}_${columnKey}`}
- >
- {content}
- </TableCell>
- );
- });
-
- if (bulkActions) {
- return (
- <RowSelectableDataTable id={row.id} key={row.id}>
- {cells}
- </RowSelectableDataTable>
- );
- }
-
- return (
- <TableRow
- className={
- rowOpens
- ? "focus-visible:bg-muted/50 focus-visible:outline-ring cursor-pointer focus-visible:outline-1"
- : undefined
- }
- key={row.id}
- onClick={
- rowOpens
- ? event => {
- // A control inside the row answers for itself,
- // and a reader who has selected text in a cell
- // was reading it rather than asking to leave.
- if (
- (event.target as HTMLElement).closest(
- "a,button,input,select,textarea,[role=checkbox]",
- )
- ) {
- return;
- }
- if (window.getSelection()?.toString()) {
- return;
- }
- rowOpens(row);
- }
- : undefined
- }
- onKeyDown={
- rowOpens
- ? event => {
- if (
- (event.target as HTMLElement).closest(
- "a,button,input,select,textarea,[role=checkbox]",
- )
- ) {
- return;
- }
- if (event.key === "Enter" || event.key === " ") {
- event.preventDefault();
- rowOpens(row);
- }
- }
- : undefined
- }
- tabIndex={rowOpens ? 0 : undefined}
- >
- {cells}
- </TableRow>
- );
- })
- ) : (
+ {rows.length === 0 ? (
+ <TableBody>
<TableRow className="hover:bg-transparent">
<TableCell
className="!p-0 whitespace-normal"
@@ -289,8 +379,32 @@ export function ContentDataTable<T extends DataTableTMin>({
</Empty>
</TableCell>
</TableRow>
- )}
- </TableBody>
+ </TableBody>
+ ) : reorderable ? (
+ <ReorderProviderDataTable
+ ids={rowIds}
+ labelOf={rowLabelOf}
+ onMove={reorder}
+ >
+ {rows.map((row, index) => (
+ <SortableRowGroupDataTable
+ disabled={isReorderDisabled}
+ id={row.id}
+ key={row.id}
+ label={reorderable.getRowLabel?.(row)}
+ position={index + 1}
+ >
+ {renderRow(row)}
+ </SortableRowGroupDataTable>
+ ))}
+ </ReorderProviderDataTable>
+ ) : (
+ <TableBody>
+ {rows.map(row => (
+ <React.Fragment key={row.id}>{renderRow(row)}</React.Fragment>
+ ))}
+ </TableBody>
+ )}
</Table>
</div>
</div>
@@ -300,13 +414,15 @@ export function ContentDataTable<T extends DataTableTMin>({
);
if (!bulkActions) {
- return table;
+ return <TooltipGroup>{table}</TooltipGroup>;
}
return (
- <SelectionProviderDataTable rowIds={edges.map(row => row.id)}>
- {table}
- <BulkActionsDataTable actions={bulkActions} />
- </SelectionProviderDataTable>
+ <TooltipGroup>
+ <SelectionProviderDataTable rowIds={rowIds}>
+ {table}
+ <BulkActionsDataTable actions={bulkActions} />
+ </SelectionProviderDataTable>
+ </TooltipGroup>
);
}
diff --git a/packages/vitnode/src/components/table/data-table-content.tsx b/packages/vitnode/src/components/table/data-table-content.tsx
index 887ed3cce..678e0997d 100644
--- a/packages/vitnode/src/components/table/data-table-content.tsx
+++ b/packages/vitnode/src/components/table/data-table-content.tsx
@@ -1,8 +1,10 @@
import { cn } from "cn";
import React from "react";
+import type { ExpandableDataTable } from "./expansion";
import type { FilterDataTable } from "./filters";
import type { PaginationDataTable } from "./pagination";
+import type { ReorderableDataTable } from "./reorder";
import type { SearchDataTable } from "./search";
import { Skeleton } from "../ui/skeleton";
@@ -64,6 +66,7 @@ export type DataTableProps<T extends DataTableTMin> = Omit<
title?: string;
};
edges: T[];
+ expandable?: ExpandableDataTable<T>;
filters?: FilterDataTable[];
header?: React.ReactNode;
id: string;
@@ -74,6 +77,7 @@ export type DataTableProps<T extends DataTableTMin> = Omit<
order: "asc" | "desc";
};
};
+ reorderable?: ReorderableDataTable<T>;
rowOpens?: (row: T) => void;
search?: boolean;
};
diff --git a/packages/vitnode/src/components/table/expansion.test.tsx b/packages/vitnode/src/components/table/expansion.test.tsx
new file mode 100644
index 000000000..a7c0450b6
--- /dev/null
+++ b/packages/vitnode/src/components/table/expansion.test.tsx
@@ -0,0 +1,159 @@
+import {
+ fireEvent,
+ render,
+ screen,
+ waitFor,
+ within,
+} from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+
+import type { ColumnDef, DataTableTMin } from "./data-table-content";
+import type { ExpandableDataTable } from "./expansion";
+
+import { ContentDataTable } from "./content";
+import { DataTableNavigationProvider } from "./navigation";
+
+interface Order extends DataTableTMin {
+ id: number;
+ items: string[];
+ number: string;
+}
+
+const edges: Order[] = [
+ { id: 1, items: ["Coffee beans"], number: "#1001" },
+ { id: 2, items: [], number: "#1002" },
+];
+
+const columns: ColumnDef<Order>[] = [
+ { accessorKey: "number", header: "Order" },
+];
+
+const renderTable = ({
+ bulkActions,
+ expandable,
+}: {
+ bulkActions?: React.ReactNode;
+ expandable?: ExpandableDataTable<Order>;
+} = {}) =>
+ render(
+ <DataTableNavigationProvider
+ value={{ navigate: vi.fn(), searchParams: new URLSearchParams() }}
+ >
+ <ContentDataTable<Order>
+ bulkActions={bulkActions}
+ columns={columns}
+ edges={edges}
+ expandable={expandable}
+ id="orders"
+ order={{ defaultOrder: { column: "number", order: "asc" } }}
+ pageInfo={{
+ count: 2,
+ currentPage: 1,
+ endCursor: null,
+ hasNextPage: false,
+ hasPreviousPage: false,
+ pageSize: 10,
+ startCursor: null,
+ totalCount: 2,
+ totalPages: 1,
+ }}
+ />
+ </DataTableNavigationProvider>,
+ );
+
+const renderItems = (row: Order) => (
+ <ul>
+ {row.items.map(item => (
+ <li key={item}>{item}</li>
+ ))}
+ </ul>
+);
+
+const expandLabel = "core.global.data_table.expand_row";
+const collapseLabel = "core.global.data_table.collapse_row";
+
+describe("ContentDataTable expandable rows", () => {
+ it("renders no toggle and no extra column without the prop", () => {
+ renderTable();
+
+ expect(screen.queryByRole("button", { name: expandLabel })).toBeNull();
+ expect(screen.getAllByRole("columnheader")).toHaveLength(1);
+ expect(screen.getAllByRole("row")).toHaveLength(3);
+ });
+
+ it("shows and hides the detail when the toggle is pressed", async () => {
+ renderTable({ expandable: { render: renderItems } });
+
+ const [toggle] = screen.getAllByRole("button", { name: expandLabel });
+ expect(toggle.getAttribute("aria-expanded")).toBe("false");
+ expect(screen.queryByText("Coffee beans")).toBeNull();
+
+ fireEvent.click(toggle);
+
+ expect(screen.getByText("Coffee beans")).toBeTruthy();
+ expect(toggle.getAttribute("aria-expanded")).toBe("true");
+ expect(toggle.getAttribute("aria-label")).toBe(collapseLabel);
+ const region = screen.getByTestId("table-expanded-row");
+ expect(toggle.getAttribute("aria-controls")).toBe(region.id);
+ expect(region.closest("td")?.getAttribute("colspan")).toBe("2");
+
+ fireEvent.click(toggle);
+
+ expect(toggle.getAttribute("aria-expanded")).toBe("false");
+ await waitFor(() => {
+ expect(screen.queryByText("Coffee beans")).toBeNull();
+ });
+ });
+
+ it("keeps several rows open at once", () => {
+ renderTable({ expandable: { render: row => `Detail ${row.number}` } });
+
+ for (const toggle of screen.getAllByRole("button", {
+ name: expandLabel,
+ })) {
+ fireEvent.click(toggle);
+ }
+
+ expect(screen.getByText("Detail #1001")).toBeTruthy();
+ expect(screen.getByText("Detail #1002")).toBeTruthy();
+ });
+
+ it("gives rows that cannot expand no toggle", () => {
+ renderTable({
+ expandable: {
+ canExpand: row => row.items.length > 0,
+ render: renderItems,
+ },
+ });
+
+ const rows = screen.getAllByRole("row");
+ expect(
+ within(rows[1]).getByRole("button", { name: expandLabel }),
+ ).toBeTruthy();
+ expect(within(rows[2]).queryByRole("button")).toBeNull();
+ });
+
+ it("opens the rows listed in defaultExpanded", () => {
+ renderTable({ expandable: { defaultExpanded: [1], render: renderItems } });
+
+ expect(screen.getByText("Coffee beans")).toBeTruthy();
+ expect(
+ screen
+ .getByRole("button", { name: collapseLabel })
+ .getAttribute("aria-expanded"),
+ ).toBe("true");
+ });
+
+ it("puts the toggle after the selection checkbox", () => {
+ renderTable({
+ bulkActions: <span>Bulk</span>,
+ expandable: { render: renderItems },
+ });
+
+ const cells = within(screen.getAllByRole("row")[1]).getAllByRole("cell");
+ expect(within(cells[0]).getByRole("checkbox")).toBeTruthy();
+ expect(
+ within(cells[1]).getByRole("button", { name: expandLabel }),
+ ).toBeTruthy();
+ });
+});
diff --git a/packages/vitnode/src/components/table/expansion.tsx b/packages/vitnode/src/components/table/expansion.tsx
new file mode 100644
index 000000000..637c275d4
--- /dev/null
+++ b/packages/vitnode/src/components/table/expansion.tsx
@@ -0,0 +1,126 @@
+import { cn } from "cn";
+import { ChevronRightIcon } from "lucide-react";
+import { motion, useReducedMotion } from "motion/react";
+import React from "react";
+import { useTranslations } from "use-intl";
+
+import { Button } from "../ui/button";
+import { TableCell, TableRow } from "../ui/table";
+
+export interface ExpandableDataTable<T> {
+ canExpand?: (row: T) => boolean;
+ defaultExpanded?: number[];
+ render: (row: T) => React.ReactNode;
+}
+
+export const useRowExpansionDataTable = ({
+ defaultExpanded,
+ rowIds,
+}: {
+ defaultExpanded?: number[];
+ rowIds: number[];
+}) => {
+ const [expanded, setExpanded] = React.useState<number[]>(
+ defaultExpanded ?? [],
+ );
+ const pageKey = rowIds.join(",");
+ const [prevPageKey, setPrevPageKey] = React.useState(pageKey);
+
+ if (pageKey !== prevPageKey) {
+ setPrevPageKey(pageKey);
+ setExpanded(current => {
+ const next = current.filter(id => rowIds.includes(id));
+
+ return next.length === current.length ? current : next;
+ });
+ }
+
+ const isExpanded = React.useCallback(
+ (id: number) => expanded.includes(id),
+ [expanded],
+ );
+
+ const toggle = React.useCallback((id: number) => {
+ setExpanded(current =>
+ current.includes(id)
+ ? current.filter(item => item !== id)
+ : [...current, id],
+ );
+ }, []);
+
+ return { isExpanded, toggle };
+};
+
+export function ExpandHeaderDataTable() {
+ const t = useTranslations("core.global.data_table");
+
+ return <span className="sr-only">{t("row_details")}</span>;
+}
+
+export function ExpandToggleDataTable({
+ controls,
+ expanded,
+ onToggle,
+}: {
+ controls: string;
+ expanded: boolean;
+ onToggle: () => void;
+}) {
+ const t = useTranslations("core.global.data_table");
+
+ return (
+ <Button
+ aria-controls={controls}
+ aria-expanded={expanded}
+ aria-label={expanded ? t("collapse_row") : t("expand_row")}
+ className="-ms-1.5"
+ onClick={onToggle}
+ size="icon-sm"
+ variant="ghost"
+ >
+ <ChevronRightIcon
+ aria-hidden="true"
+ className={cn(
+ "transition-transform duration-200 ease-out motion-reduce:transition-none",
+ expanded ? "rotate-90" : "rtl:rotate-180",
+ )}
+ />
+ </Button>
+ );
+}
+
+export function ExpandedRowDataTable({
+ children,
+ colSpan,
+ id,
+}: {
+ children: React.ReactNode;
+ colSpan: number;
+ id: string;
+}) {
+ const shouldReduceMotion = useReducedMotion();
+ const collapsed = shouldReduceMotion
+ ? { opacity: 0 }
+ : { height: 0, opacity: 0 };
+
+ return (
+ <TableRow className="bg-muted/30 hover:bg-muted/30">
+ <TableCell className="p-0! whitespace-normal" colSpan={colSpan}>
+ <motion.div
+ animate={{ height: "auto", opacity: 1 }}
+ className="sticky start-0 w-[100cqi] overflow-hidden"
+ data-testid="table-expanded-row"
+ exit={collapsed}
+ id={id}
+ initial={collapsed}
+ transition={{
+ height: { type: "spring", duration: 0.3, bounce: 0 },
+ opacity: { duration: 0.2, ease: "easeOut" },
+ }}
+ >
+ <div className="px-4 py-4 sm:px-6">{children}</div>
+ </motion.div>
+ </TableCell>
+ </TableRow>
+ );
+}
diff --git a/packages/vitnode/src/components/table/filters.tsx b/packages/vitnode/src/components/table/filters.tsx
index b3a9642e2..a307c7fe7 100644
--- a/packages/vitnode/src/components/table/filters.tsx
+++ b/packages/vitnode/src/components/table/filters.tsx
@@ -105,7 +105,12 @@ function FilterItem({ filter }: { filter: FilterDataTable }) {
orientation="vertical"
/>
{isAsync || selectedStaticOptions.length > 2 ? (
- <Badge>{t("selected_count", { count: selected.length })}</Badge>
+ <Badge>
+ {t.rich("selected_count", {
+ count: selected.length,
+ number: chunks => <>{chunks}</>,
+ })}
+ </Badge>
) : (
selectedStaticOptions.map(option => (
<Badge key={option.value}>{option.label}</Badge>
diff --git a/packages/vitnode/src/components/table/order-table-head.tsx b/packages/vitnode/src/components/table/order-table-head.tsx
index 9663e529c..e4357a8e4 100644
--- a/packages/vitnode/src/components/table/order-table-head.tsx
+++ b/packages/vitnode/src/components/table/order-table-head.tsx
@@ -9,7 +9,7 @@ import type {
} from "./data-table-content";
import { Button } from "../ui/button";
-import { Loader } from "../ui/loader";
+import { Spinner } from "../ui/spinner";
import { useDataTableUrl } from "./navigation";
import { readTableOrder, toggleTableOrder } from "./url-state";
@@ -34,7 +34,7 @@ export function OrderTableHeadDataTable<T extends DataTableTMin>({
let icon: React.ReactNode;
if (isPending) {
- icon = <Loader small />;
+ icon = <Spinner />;
} else if (isActive) {
icon = current.order === "asc" ? <ArrowUp /> : <ArrowDown />;
} else {
diff --git a/packages/vitnode/src/components/table/pagination.tsx b/packages/vitnode/src/components/table/pagination.tsx
index 26ab2b3fe..e975bbb07 100644
--- a/packages/vitnode/src/components/table/pagination.tsx
+++ b/packages/vitnode/src/components/table/pagination.tsx
@@ -85,6 +85,7 @@ export const PaginationDataTable = ({
: {
"aria-disabled": true as const,
className: "pointer-events-none opacity-50",
+ role: "link",
tabIndex: -1,
};
@@ -125,6 +126,7 @@ export const PaginationDataTable = ({
: {
"aria-disabled": true as const,
className: "pointer-events-none opacity-50",
+ role: "link",
tabIndex: -1,
};
diff --git a/packages/vitnode/src/components/table/reorder-state.ts b/packages/vitnode/src/components/table/reorder-state.ts
new file mode 100644
index 000000000..877aaa784
--- /dev/null
+++ b/packages/vitnode/src/components/table/reorder-state.ts
@@ -0,0 +1,54 @@
+import { arrayMove } from "@dnd-kit/sortable";
+
+import { readTableOrder, readTableSearch, type TableOrder } from "./url-state";
+
+export interface ReorderDetailsDataTable {
+ activeId: number;
+ from: number;
+ overId: number;
+ to: number;
+}
+
+export interface RowMoveDataTable extends ReorderDetailsDataTable {
+ ids: number[];
+}
+
+export const moveRowId = (
+ ids: readonly number[],
+ activeId: number,
+ overId: number,
+): null | RowMoveDataTable => {
+ const from = ids.indexOf(activeId);
+ const to = ids.indexOf(overId);
+
+ if (from === -1 || to === -1 || from === to) return null;
+
+ return {
+ activeId,
+ from,
+ ids: arrayMove([...ids], from, to),
+ overId,
+ to,
+ };
+};
+
+export const isTableInStoredOrder = (
+ searchParams: URLSearchParams,
+ {
+ defaultOrder,
+ filterIds,
+ }: {
+ defaultOrder: TableOrder;
+ filterIds: readonly string[];
+ },
+): boolean => {
+ if (readTableSearch(searchParams).trim() !== "") return false;
+ if (filterIds.some(id => searchParams.get(id))) return false;
+
+ const ordered = readTableOrder(searchParams, defaultOrder);
+
+ return (
+ ordered.column === defaultOrder.column &&
+ ordered.order === defaultOrder.order
+ );
+};
diff --git a/packages/vitnode/src/components/table/reorder.test.tsx b/packages/vitnode/src/components/table/reorder.test.tsx
new file mode 100644
index 000000000..a53307721
--- /dev/null
+++ b/packages/vitnode/src/components/table/reorder.test.tsx
@@ -0,0 +1,386 @@
+import {
+ act,
+ fireEvent,
+ render,
+ renderHook,
+ screen,
+ waitFor,
+ within,
+} from "@testing-library/react";
+import { toast } from "sonner";
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+import type { ColumnDef, DataTableTMin } from "./data-table-content";
+import type { ExpandableDataTable } from "./expansion";
+import type { ReorderableDataTable } from "./reorder";
+
+import { ContentDataTable } from "./content";
+import { DataTableNavigationProvider } from "./navigation";
+import { useRowOrderDataTable } from "./reorder";
+import { isTableInStoredOrder, moveRowId } from "./reorder-state";
+
+interface Task extends DataTableTMin {
+ id: number;
+ title: string;
+}
+
+const edges: Task[] = [
+ { id: 1, title: "Write docs" },
+ { id: 2, title: "Fix bug" },
+ { id: 3, title: "Ship it" },
+];
+
+const columns: ColumnDef<Task>[] = [{ accessorKey: "title", header: "Task" }];
+
+const handleLabel = "core.global.data_table.reorder_row";
+
+const renderTable = ({
+ bulkActions,
+ expandable,
+ reorderable,
+ search = "",
+}: {
+ bulkActions?: React.ReactNode;
+ expandable?: ExpandableDataTable<Task>;
+ reorderable?: ReorderableDataTable<Task>;
+ search?: string;
+} = {}) =>
+ render(
+ <DataTableNavigationProvider
+ value={{ navigate: vi.fn(), searchParams: new URLSearchParams(search) }}
+ >
+ <ContentDataTable<Task>
+ bulkActions={bulkActions}
+ columns={columns}
+ edges={edges}
+ expandable={expandable}
+ filters={[{ id: "status", label: "Status", options: [] }]}
+ id="tasks"
+ order={{
+ columns: ["title"],
+ defaultOrder: { column: "id", order: "asc" },
+ }}
+ pageInfo={{
+ count: 3,
+ currentPage: 1,
+ endCursor: null,
+ hasNextPage: false,
+ hasPreviousPage: false,
+ pageSize: 10,
+ startCursor: null,
+ totalCount: 3,
+ totalPages: 1,
+ }}
+ reorderable={reorderable}
+ />
+ </DataTableNavigationProvider>,
+ );
+
+const titles = () =>
+ screen
+ .getAllByRole("row")
+ .slice(1)
+ .map(row => within(row).getAllByRole("cell").at(-1)?.textContent);
+
+const stubRowGeometry = () => {
+ const rowHeight = 40;
+
+ vi.spyOn(Element.prototype, "getBoundingClientRect").mockImplementation(
+ function (this: Element) {
+ const group = this.closest("[data-slot=table-row-group]");
+ const index = group?.parentElement
+ ? [
+ ...group.parentElement.querySelectorAll(
+ ":scope > [data-slot=table-row-group]",
+ ),
+ ].indexOf(group)
+ : -1;
+ const top = index === -1 ? 0 : 40 + index * rowHeight;
+ const height = index === -1 ? 1000 : rowHeight;
+
+ return DOMRect.fromRect({ height, width: 600, x: 0, y: top });
+ },
+ );
+};
+
+afterEach(() => {
+ vi.restoreAllMocks();
+ Reflect.deleteProperty(Element.prototype, "animate");
+});
+
+describe("moveRowId", () => {
+ it("moves a row down and reports where it came from and went", () => {
+ expect(moveRowId([1, 2, 3, 4], 1, 3)).toEqual({
+ activeId: 1,
+ from: 0,
+ ids: [2, 3, 1, 4],
+ overId: 3,
+ to: 2,
+ });
+ });
+
+ it("moves a row up", () => {
+ expect(moveRowId([1, 2, 3, 4], 4, 2)?.ids).toEqual([1, 4, 2, 3]);
+ });
+
+ it("returns null for a drop in place or an unknown id", () => {
+ expect(moveRowId([1, 2, 3], 2, 2)).toBeNull();
+ expect(moveRowId([1, 2, 3], 9, 2)).toBeNull();
+ expect(moveRowId([1, 2, 3], 2, 9)).toBeNull();
+ });
+
+ it("does not mutate the ids it was given", () => {
+ const ids = [1, 2, 3];
+ moveRowId(ids, 1, 3);
+
+ expect(ids).toEqual([1, 2, 3]);
+ });
+});
+
+describe("isTableInStoredOrder", () => {
+ const options = {
+ defaultOrder: { column: "position", order: "asc" as const },
+ filterIds: ["status"],
+ };
+
+ it("is true for the default view", () => {
+ expect(isTableInStoredOrder(new URLSearchParams(), options)).toBe(true);
+ expect(
+ isTableInStoredOrder(
+ new URLSearchParams("orderBy=position&order=asc&page=2"),
+ options,
+ ),
+ ).toBe(true);
+ });
+
+ it("is false while searching, filtering or sorting by something else", () => {
+ expect(
+ isTableInStoredOrder(new URLSearchParams("search=bug"), options),
+ ).toBe(false);
+ expect(
+ isTableInStoredOrder(new URLSearchParams("status=open"), options),
+ ).toBe(false);
+ expect(
+ isTableInStoredOrder(new URLSearchParams("orderBy=title"), options),
+ ).toBe(false);
+ expect(
+ isTableInStoredOrder(new URLSearchParams("order=desc"), options),
+ ).toBe(false);
+ });
+});
+
+describe("useRowOrderDataTable", () => {
+ it("reorders right away and keeps the order when saving succeeds", async () => {
+ const onReorder = vi.fn().mockResolvedValue(undefined);
+ const { result } = renderHook(() =>
+ useRowOrderDataTable({ edges, onReorder }),
+ );
+
+ act(() => {
+ result.current.reorder(1, 3);
+ });
+
+ expect(result.current.rows.map(row => row.id)).toEqual([2, 3, 1]);
+ expect(onReorder).toHaveBeenCalledWith([2, 3, 1], {
+ activeId: 1,
+ from: 0,
+ overId: 3,
+ to: 2,
+ });
+ await waitFor(() => {
+ expect(result.current.rows.map(row => row.id)).toEqual([2, 3, 1]);
+ });
+ });
+
+ it("rolls back and shows an error toast when saving fails", async () => {
+ const errorToast = vi.spyOn(toast, "error");
+ const onReorder = vi.fn().mockRejectedValue(new Error("offline"));
+ const { result } = renderHook(() =>
+ useRowOrderDataTable({ edges, onReorder }),
+ );
+
+ act(() => {
+ result.current.reorder(3, 1);
+ });
+
+ expect(result.current.rows.map(row => row.id)).toEqual([3, 1, 2]);
+ await waitFor(() => {
+ expect(result.current.rows.map(row => row.id)).toEqual([1, 2, 3]);
+ });
+ expect(errorToast).toHaveBeenCalledWith(
+ "core.global.data_table.reorder_failed",
+ { description: "core.global.data_table.reorder_failed_desc" },
+ );
+ });
+
+ it("goes back to the saved order when two overlapping drops both fail", async () => {
+ const saves = [
+ Promise.withResolvers<undefined>(),
+ Promise.withResolvers<undefined>(),
+ ];
+ const onReorder = vi
+ .fn()
+ .mockReturnValueOnce(saves[0].promise)
+ .mockReturnValueOnce(saves[1].promise);
+ const { result } = renderHook(() =>
+ useRowOrderDataTable({ edges, onReorder }),
+ );
+
+ act(() => {
+ result.current.reorder(1, 3);
+ });
+ act(() => {
+ result.current.reorder(2, 3);
+ });
+ expect(result.current.rows.map(row => row.id)).toEqual([3, 2, 1]);
+
+ await act(async () => {
+ saves[0].reject(new Error("offline"));
+ await saves[0].promise.catch(() => undefined);
+ });
+ expect(result.current.rows.map(row => row.id)).toEqual([3, 2, 1]);
+
+ await act(async () => {
+ saves[1].reject(new Error("offline"));
+ await saves[1].promise.catch(() => undefined);
+ });
+ expect(result.current.rows.map(row => row.id)).toEqual([1, 2, 3]);
+ });
+
+ it("keeps an earlier drop that is still saving when a later one fails", async () => {
+ const saves = [
+ Promise.withResolvers<undefined>(),
+ Promise.withResolvers<undefined>(),
+ ];
+ const onReorder = vi
+ .fn()
+ .mockReturnValueOnce(saves[0].promise)
+ .mockReturnValueOnce(saves[1].promise);
+ const { result } = renderHook(() =>
+ useRowOrderDataTable({ edges, onReorder }),
+ );
+
+ act(() => {
+ result.current.reorder(1, 3);
+ });
+ act(() => {
+ result.current.reorder(2, 3);
+ });
+
+ await act(async () => {
+ saves[1].reject(new Error("offline"));
+ await saves[1].promise.catch(() => undefined);
+ });
+ expect(result.current.rows.map(row => row.id)).toEqual([2, 3, 1]);
+
+ await act(async () => {
+ saves[0].resolve(undefined);
+ await saves[0].promise;
+ });
+ expect(result.current.rows.map(row => row.id)).toEqual([2, 3, 1]);
+ });
+
+ it("follows the server again once it sends a new order", () => {
+ const { rerender, result } = renderHook(
+ ({ rows }) => useRowOrderDataTable({ edges: rows, onReorder: vi.fn() }),
+ { initialProps: { rows: edges } },
+ );
+
+ act(() => {
+ result.current.reorder(1, 2);
+ });
+ rerender({ rows: [edges[2], edges[0], edges[1]] });
+
+ expect(result.current.rows.map(row => row.id)).toEqual([3, 1, 2]);
+ });
+});
+
+describe("ContentDataTable reorderable rows", () => {
+ it("renders no handle and no extra column without the prop", () => {
+ renderTable();
+
+ expect(screen.queryByRole("button", { name: handleLabel })).toBeNull();
+ expect(screen.getAllByRole("columnheader")).toHaveLength(1);
+ });
+
+ it("gives every row a sortable handle in the first column", () => {
+ renderTable({
+ bulkActions: <span>Bulk</span>,
+ reorderable: { getRowLabel: row => row.title, onReorder: vi.fn() },
+ });
+
+ const handles = screen.getAllByRole("button", { name: handleLabel });
+ expect(handles).toHaveLength(3);
+ expect(handles[0].getAttribute("aria-roledescription")).toBe("sortable");
+
+ const cells = within(screen.getAllByRole("row")[1]).getAllByRole("cell");
+ expect(within(cells[0]).getByRole("button")).toBe(handles[0]);
+ expect(within(cells[1]).getByRole("checkbox")).toBeTruthy();
+ });
+
+ it("keeps an open detail panel in the group that moves with its row", () => {
+ renderTable({
+ expandable: { defaultExpanded: [2], render: row => `About ${row.title}` },
+ reorderable: { onReorder: vi.fn() },
+ });
+
+ const detail = screen.getByText("About Fix bug");
+ const group = detail.closest("[data-slot=table-row-group]");
+
+ expect(group).not.toBeNull();
+ expect(within(group as HTMLElement).getByText("Fix bug")).toBeTruthy();
+ });
+
+ it("locks the handles while the view is searched", () => {
+ renderTable({
+ reorderable: { onReorder: vi.fn() },
+ search: "search=bug",
+ });
+
+ for (const handle of screen.getAllByRole("button", {
+ name: handleLabel,
+ })) {
+ expect(handle.getAttribute("aria-disabled")).toBe("true");
+ }
+ });
+
+ it("moves a row with the keyboard, saves the new order and settles it into place", async () => {
+ stubRowGeometry();
+ const animate = vi.fn();
+ Object.defineProperty(Element.prototype, "animate", {
+ configurable: true,
+ value: animate,
+ });
+ const onReorder = vi.fn();
+ renderTable({ reorderable: { onReorder } });
+
+ const [first] = screen.getAllByRole("button", { name: handleLabel });
+ first.focus();
+ fireEvent.keyDown(first, { code: "Space", key: " " });
+ await act(async () => {
+ await new Promise(resolve => setTimeout(resolve, 0));
+ });
+ fireEvent.keyDown(first, { code: "ArrowDown", key: "ArrowDown" });
+ await act(async () => {
+ await new Promise(resolve => setTimeout(resolve, 0));
+ });
+ fireEvent.keyDown(first, { code: "Space", key: " " });
+
+ await waitFor(() => {
+ expect(onReorder).toHaveBeenCalledWith([2, 1, 3], {
+ activeId: 1,
+ from: 0,
+ overId: 2,
+ to: 1,
+ });
+ });
+ expect(titles()).toEqual(["Fix bug", "Write docs", "Ship it"]);
+ expect(animate).toHaveBeenCalledWith(
+ [
+ { transform: "translate3d(0, -40px, 0)" },
+ { transform: "translate3d(0, 0, 0)" },
+ ],
+ expect.objectContaining({ duration: 200 }),
+ );
+ });
+});
diff --git a/packages/vitnode/src/components/table/reorder.tsx b/packages/vitnode/src/components/table/reorder.tsx
new file mode 100644
index 000000000..2b58d242b
--- /dev/null
+++ b/packages/vitnode/src/components/table/reorder.tsx
@@ -0,0 +1,308 @@
+import type { Announcements } from "@dnd-kit/core";
+
+import {
+ closestCenter,
+ DndContext,
+ KeyboardSensor,
+ PointerSensor,
+ TouchSensor,
+ useDndMonitor,
+ useSensor,
+ useSensors,
+} from "@dnd-kit/core";
+import {
+ restrictToParentElement,
+ restrictToVerticalAxis,
+} from "@dnd-kit/modifiers";
+import {
+ SortableContext,
+ sortableKeyboardCoordinates,
+ useSortable,
+ verticalListSortingStrategy,
+} from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { cn } from "cn";
+import { GripVerticalIcon } from "lucide-react";
+import { useReducedMotion } from "motion/react";
+import React from "react";
+import { toast } from "sonner";
+import { useTranslations } from "use-intl";
+
+import type { DataTableTMin } from "./data-table-content";
+
+import { Button } from "../ui/button";
+import { moveRowId, type ReorderDetailsDataTable } from "./reorder-state";
+
+export interface ReorderableDataTable<T> {
+ disabled?: boolean;
+ getRowLabel?: (row: T) => string;
+ onReorder: (
+ ids: number[],
+ details: ReorderDetailsDataTable,
+ ) => Promise<void> | void;
+}
+
+interface RowOrderOverride {
+ ids: number[];
+ key: string;
+}
+
+export const useRowOrderDataTable = <T extends DataTableTMin>({
+ edges,
+ onReorder,
+}: {
+ edges: T[];
+ onReorder?: ReorderableDataTable<T>["onReorder"];
+}) => {
+ const t = useTranslations("core.global.data_table");
+ const serverIds = edges.map(row => row.id);
+ const serverKey = serverIds.join(",");
+ const [override, setOverride] = React.useState<null | RowOrderOverride>(null);
+ const unfailedAttemptsRef = React.useRef<RowOrderOverride[]>([]);
+ const ids = override?.key === serverKey ? override.ids : serverIds;
+ const byId = new Map(edges.map(row => [row.id, row]));
+ const rows = ids.flatMap(id => {
+ const row = byId.get(id);
+
+ return row ? [row] : [];
+ });
+
+ const reorder = (activeId: number, overId: number) => {
+ const move = moveRowId(ids, activeId, overId);
+ if (!move || !onReorder) return;
+
+ const attempt: RowOrderOverride = { ids: move.ids, key: serverKey };
+ unfailedAttemptsRef.current = [...unfailedAttemptsRef.current, attempt];
+ setOverride(attempt);
+
+ const persist = async () => {
+ try {
+ await onReorder(move.ids, {
+ activeId: move.activeId,
+ from: move.from,
+ overId: move.overId,
+ to: move.to,
+ });
+ const position = unfailedAttemptsRef.current.indexOf(attempt);
+ if (position > 0) {
+ unfailedAttemptsRef.current =
+ unfailedAttemptsRef.current.slice(position);
+ }
+ } catch {
+ unfailedAttemptsRef.current = unfailedAttemptsRef.current.filter(
+ pending => pending !== attempt,
+ );
+ setOverride(unfailedAttemptsRef.current.at(-1) ?? null);
+ toast.error(t("reorder_failed"), {
+ description: t("reorder_failed_desc"),
+ });
+ }
+ };
+
+ void persist();
+ };
+
+ return { reorder, rows };
+};
+
+const SETTLE_DURATION = 200;
+const SETTLE_EASING = "cubic-bezier(0.25, 1, 0.5, 1)";
+
+const subscribeToNothing = () => () => undefined;
+const getAnnouncementContainer = () => document.body;
+const getNoAnnouncementContainer = () => null;
+
+const SortableRowHandleContext = React.createContext<null | React.ReactElement>(
+ null,
+);
+
+export function ReorderProviderDataTable({
+ children,
+ ids,
+ labelOf,
+ onMove,
+}: {
+ children: React.ReactNode;
+ ids: number[];
+ labelOf: (id: number) => string | undefined;
+ onMove: (activeId: number, overId: number) => void;
+}) {
+ const t = useTranslations("core.global.data_table");
+ const contextId = React.useId();
+ const announcementContainer = React.useSyncExternalStore(
+ subscribeToNothing,
+ getAnnouncementContainer,
+ getNoAnnouncementContainer,
+ );
+ const sensors = useSensors(
+ useSensor(PointerSensor, { activationConstraint: { distance: 6 } }),
+ useSensor(TouchSensor, {
+ activationConstraint: { delay: 200, tolerance: 8 },
+ }),
+ useSensor(KeyboardSensor, {
+ coordinateGetter: sortableKeyboardCoordinates,
+ }),
+ );
+
+ const spoken = (activeId: number, overId: number) => ({
+ name:
+ labelOf(activeId) ??
+ t("row_fallback", { position: ids.indexOf(activeId) + 1 }),
+ position: ids.indexOf(overId) + 1,
+ total: ids.length,
+ });
+
+ const announcements: Announcements = {
+ onDragCancel: ({ active }) =>
+ t("reorder_cancelled", spoken(Number(active.id), Number(active.id))),
+ onDragEnd: ({ active, over }) =>
+ over
+ ? t("reorder_ended", spoken(Number(active.id), Number(over.id)))
+ : undefined,
+ onDragOver: ({ active, over }) =>
+ over
+ ? t("reorder_over", spoken(Number(active.id), Number(over.id)))
+ : undefined,
+ onDragStart: ({ active }) =>
+ t("reorder_started", spoken(Number(active.id), Number(active.id))),
+ };
+
+ return (
+ <DndContext
+ accessibility={{
+ announcements,
+ container: announcementContainer ?? undefined,
+ screenReaderInstructions: { draggable: t("reorder_instructions") },
+ }}
+ collisionDetection={closestCenter}
+ id={contextId}
+ modifiers={[restrictToVerticalAxis, restrictToParentElement]}
+ onDragEnd={({ active, over }) => {
+ if (over) onMove(Number(active.id), Number(over.id));
+ }}
+ sensors={sensors}
+ >
+ <SortableContext items={ids} strategy={verticalListSortingStrategy}>
+ {children}
+ </SortableContext>
+ </DndContext>
+ );
+}
+
+export function SortableRowGroupDataTable({
+ children,
+ disabled,
+ id,
+ label,
+ position,
+}: {
+ children: React.ReactNode;
+ disabled: boolean;
+ id: number;
+ label?: string;
+ position: number;
+}) {
+ const t = useTranslations("core.global.data_table");
+ const name = label ?? t("row_fallback", { position });
+ const shouldReduceMotion = useReducedMotion();
+ const {
+ attributes,
+ isDragging,
+ listeners,
+ node: nodeRef,
+ setActivatorNodeRef,
+ setNodeRef,
+ transform,
+ transition,
+ } = useSortable({
+ disabled,
+ id,
+ transition: shouldReduceMotion
+ ? null
+ : { duration: SETTLE_DURATION, easing: SETTLE_EASING },
+ });
+ const dropRectRef = React.useRef<DOMRect | null>(null);
+
+ useDndMonitor({
+ onDragEnd: ({ active }) => {
+ if (active.id === id && nodeRef.current) {
+ dropRectRef.current = nodeRef.current.getBoundingClientRect();
+ }
+ },
+ });
+
+ React.useLayoutEffect(() => {
+ const from = dropRectRef.current;
+ const element = nodeRef.current;
+ if (!from || !element) return;
+
+ dropRectRef.current = null;
+ if (shouldReduceMotion) return;
+
+ const deltaY = from.top - element.getBoundingClientRect().top;
+ if (Math.abs(deltaY) < 1) return;
+
+ element.animate(
+ [
+ { transform: `translate3d(0, ${deltaY}px, 0)` },
+ { transform: "translate3d(0, 0, 0)" },
+ ],
+ { duration: SETTLE_DURATION, easing: SETTLE_EASING },
+ );
+ });
+
+ const handleLabel = t("reorder_row", { name });
+ const handle = disabled ? (
+ <Button
+ aria-label={handleLabel}
+ className="-ms-1.5"
+ disabled
+ disabledTooltip={t("reorder_unavailable")}
+ size="icon-sm"
+ variant="ghost"
+ >
+ <GripVerticalIcon aria-hidden="true" />
+ </Button>
+ ) : (
+ <Button
+ aria-label={handleLabel}
+ className="-ms-1.5 cursor-grab touch-none active:cursor-grabbing"
+ data-slot="table-drag-handle"
+ ref={setActivatorNodeRef}
+ size="icon-sm"
+ variant="ghost"
+ {...attributes}
+ {...listeners}
+ >
+ <GripVerticalIcon aria-hidden="true" />
+ </Button>
+ );
+
+ return (
+ <SortableRowHandleContext.Provider value={handle}>
+ <tbody
+ className={cn(
+ "[&:last-child>tr:last-child]:border-0 [&:last-child>tr:last-child>td]:border-b-0 [&>tr>td]:border-b",
+ isDragging &&
+ "bg-card ring-foreground/10 relative z-10 shadow-lg ring-1",
+ )}
+ data-dragging={isDragging ? "" : undefined}
+ data-slot="table-row-group"
+ ref={setNodeRef}
+ style={{ transform: CSS.Translate.toString(transform), transition }}
+ >
+ {children}
+ </tbody>
+ </SortableRowHandleContext.Provider>
+ );
+}
+
+export function ReorderHeaderDataTable() {
+ const t = useTranslations("core.global.data_table");
+
+ return <span className="sr-only">{t("reorder_column")}</span>;
+}
+
+export function ReorderHandleDataTable() {
+ return React.use(SortableRowHandleContext);
+}
diff --git a/packages/vitnode/src/components/table/selection.tsx b/packages/vitnode/src/components/table/selection.tsx
index c51d27c10..90d82aac8 100644
--- a/packages/vitnode/src/components/table/selection.tsx
+++ b/packages/vitnode/src/components/table/selection.tsx
@@ -7,6 +7,7 @@ import { useTranslations } from "use-intl";
import { Button } from "../ui/button";
import { Checkbox } from "../ui/checkbox";
import { Separator } from "../ui/separator";
+import { SlidingNumber } from "../ui/sliding-number";
import { TableRow } from "../ui/table";
import { TooltipWithContent } from "../ui/tooltip";
@@ -159,7 +160,10 @@ export function BulkActionsDataTable({
>
<div className="bg-popover text-popover-foreground pointer-events-auto flex max-w-full items-center gap-1 rounded-lg border p-1.5 shadow-lg">
<span className="px-2 text-sm font-medium whitespace-nowrap">
- {t("selected_count", { count: selected.length })}
+ {t.rich("selected_count", {
+ count: selected.length,
+ number: () => <SlidingNumber value={selected.length} />,
+ })}
</span>
<Separator
diff --git a/packages/vitnode/src/components/tiptap/tiptap-editor.tsx b/packages/vitnode/src/components/tiptap/tiptap-editor.tsx
index 60899133c..033c01ee1 100644
--- a/packages/vitnode/src/components/tiptap/tiptap-editor.tsx
+++ b/packages/vitnode/src/components/tiptap/tiptap-editor.tsx
@@ -4,7 +4,7 @@ import { useTranslations } from "use-intl";
import { useEditorConfig } from "@/components/editor-provider";
-import { Loader } from "../ui/loader";
+import { Spinner } from "../ui/spinner";
import { TipTapDragHandle } from "./drag-handle";
import { createTipTapExtensions } from "./extension";
import { TipTapToolbar } from "./toolbar/tiptap-toolbar";
@@ -50,7 +50,12 @@ export const TipTapEditor = ({
},
});
- if (!editor) return <Loader />;
+ if (!editor)
+ return (
+ <div className="flex items-center justify-center">
+ <Spinner size="xl" />
+ </div>
+ );
return (
<div
diff --git a/packages/vitnode/src/components/tiptap/toolbar/actions/audio-action.tsx b/packages/vitnode/src/components/tiptap/toolbar/actions/audio-action.tsx
index eeabf213c..3b70442b0 100644
--- a/packages/vitnode/src/components/tiptap/toolbar/actions/audio-action.tsx
+++ b/packages/vitnode/src/components/tiptap/toolbar/actions/audio-action.tsx
@@ -9,7 +9,7 @@ import {
DialogHeader,
DialogTitle,
} from "@/components/ui/dialog";
-import { Loader } from "@/components/ui/loader";
+import { Spinner } from "@/components/ui/spinner";
const AudioForm = React.lazy(async () =>
import("./audio/audio-form").then(module => ({
@@ -37,7 +37,13 @@ export const AudioDialog = ({
<DialogDescription>{t("desc")}</DialogDescription>
</DialogHeader>
- <React.Suspense fallback={<Loader />}>
+ <React.Suspense
+ fallback={
+ <div className="flex items-center justify-center">
+ <Spinner size="xl" />
+ </div>
+ }
+ >
<AudioForm />
</React.Suspense>
</DialogContent>
diff --git a/packages/vitnode/src/components/tiptap/toolbar/actions/emoji-action.tsx b/packages/vitnode/src/components/tiptap/toolbar/actions/emoji-action.tsx
index c59ae4dbc..72af7e221 100644
--- a/packages/vitnode/src/components/tiptap/toolbar/actions/emoji-action.tsx
+++ b/packages/vitnode/src/components/tiptap/toolbar/actions/emoji-action.tsx
@@ -3,12 +3,12 @@ import React from "react";
import { useTranslations } from "use-intl";
import { Button } from "@/components/ui/button";
-import { Loader } from "@/components/ui/loader";
import {
Popover,
PopoverContent,
PopoverTrigger,
} from "@/components/ui/popover";
+import { Spinner } from "@/components/ui/spinner";
import { TooltipWithContent } from "@/components/ui/tooltip";
const EmojiPicker = React.lazy(async () =>
@@ -37,7 +37,9 @@ export const EmojiAction = () => {
<React.Suspense
fallback={
<div className="flex h-80 items-center justify-center">
- <Loader />
+ <div className="flex items-center justify-center">
+ <Spinner size="xl" />
+ </div>
</div>
}
>
diff --git a/packages/vitnode/src/components/tiptap/toolbar/tiptap-toolbar.tsx b/packages/vitnode/src/components/tiptap/toolbar/tiptap-toolbar.tsx
index c31658f24..d3dd989b0 100644
--- a/packages/vitnode/src/components/tiptap/toolbar/tiptap-toolbar.tsx
+++ b/packages/vitnode/src/components/tiptap/toolbar/tiptap-toolbar.tsx
@@ -4,6 +4,7 @@ import { useMemo } from "react";
import { useTranslations } from "use-intl";
import { Separator } from "@/components/ui/separator";
+import { TooltipGroup } from "@/components/ui/tooltip";
import { BoldAction } from "./actions/bold-action";
import { CodeBlockAction } from "./actions/code-block-action";
@@ -24,27 +25,29 @@ export const TipTapToolbar = ({ editor }: { editor: Editor }) => {
return (
<ToolbarEditorContext value={contextValue}>
- <div
- aria-label={t("toolbar")}
- className="bg-card sticky top-0 z-10 flex items-center gap-0.5 overflow-x-auto rounded-t-md border-b p-1 *:data-[slot=separator]:mx-1 *:data-[slot=separator]:h-5 sm:flex-wrap"
- role="toolbar"
- >
- <HeadingsAction />
- <Separator orientation="vertical" />
- <BoldAction />
- <ItalicAction />
- <TextFormatMore />
- <ColorAction />
- <Separator orientation="vertical" />
- <ListAction />
- <Separator orientation="vertical" />
- <LinkAction />
- <EmojiAction />
- <TableAction />
- <CodeBlockAction />
- <Separator orientation="vertical" />
- <InsertAction />
- </div>
+ <TooltipGroup>
+ <div
+ aria-label={t("toolbar")}
+ className="bg-card sticky top-0 z-10 flex items-center gap-0.5 overflow-x-auto rounded-t-md border-b p-1 *:data-[slot=separator]:mx-1 *:data-[slot=separator]:h-5 sm:flex-wrap"
+ role="toolbar"
+ >
+ <HeadingsAction />
+ <Separator orientation="vertical" />
+ <BoldAction />
+ <ItalicAction />
+ <TextFormatMore />
+ <ColorAction />
+ <Separator orientation="vertical" />
+ <ListAction />
+ <Separator orientation="vertical" />
+ <LinkAction />
+ <EmojiAction />
+ <TableAction />
+ <CodeBlockAction />
+ <Separator orientation="vertical" />
+ <InsertAction />
+ </div>
+ </TooltipGroup>
</ToolbarEditorContext>
);
};
diff --git a/packages/vitnode/src/components/ui/alert-dialog.tsx b/packages/vitnode/src/components/ui/alert-dialog.tsx
index 21cc74d3d..c50353843 100644
--- a/packages/vitnode/src/components/ui/alert-dialog.tsx
+++ b/packages/vitnode/src/components/ui/alert-dialog.tsx
@@ -5,8 +5,6 @@ import { useTranslations } from "use-intl";
import { Button } from "@/components/ui/button";
-import { Skeleton } from "./skeleton";
-
const AlertDialogContext = React.createContext<{
open: boolean;
setOpen?: (value: boolean) => void;
@@ -82,16 +80,20 @@ function AlertDialogOverlay({
function AlertDialogContent({
className,
+ size = "default",
...props
-}: AlertDialogPrimitive.Popup.Props) {
+}: AlertDialogPrimitive.Popup.Props & {
+ size?: "default" | "sm";
+}) {
return (
<AlertDialogPortal>
<AlertDialogOverlay />
<AlertDialogPrimitive.Popup
className={cn(
- "dark:bg-background bg-card fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-xl border p-6 shadow-xl transition-all duration-200 data-ending-style:scale-95 data-ending-style:opacity-0 data-starting-style:scale-95 data-starting-style:opacity-0 sm:max-w-lg",
+ "group/alert-dialog-content dark:bg-background bg-card fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-xl border p-6 shadow-xl transition-all duration-200 data-ending-style:scale-95 data-ending-style:opacity-0 data-starting-style:scale-95 data-starting-style:opacity-0 data-[size=default]:sm:max-w-lg data-[size=sm]:sm:max-w-sm",
className,
)}
+ data-size={size}
data-slot="alert-dialog-content"
{...props}
/>
@@ -106,7 +108,7 @@ function AlertDialogHeader({
return (
<div
className={cn(
- "grid grid-rows-[auto_1fr] gap-1.5 has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-6 sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]",
+ "grid grid-rows-[auto_1fr] gap-1.5 group-data-[size=sm]/alert-dialog-content:place-items-center group-data-[size=sm]/alert-dialog-content:text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-6 sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]",
className,
)}
data-slot="alert-dialog-header"
@@ -122,7 +124,7 @@ function AlertDialogFooter({
return (
<div
className={cn(
- "flex flex-col-reverse gap-2 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end",
+ "bg-muted/50 -mx-6 -mb-6 flex flex-col-reverse gap-2 rounded-b-xl border-t px-6 py-4 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end",
className,
)}
data-slot="alert-dialog-footer"
@@ -131,24 +133,6 @@ function AlertDialogFooter({
);
}
-function AlertDialogFooterSkeleton({
- className,
- ...props
-}: Omit<React.ComponentProps<"div">, "children">) {
- return (
- <div
- className={cn(
- "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
- className,
- )}
- data-slot="alert-dialog-footer"
- {...props}
- >
- <Skeleton className="h-9 sm:w-24" />
- <Skeleton className="h-9 sm:w-24" />
- </div>
- );
-}
function AlertDialogMedia({
className,
...props
@@ -156,7 +140,7 @@ function AlertDialogMedia({
return (
<div
className={cn(
- "bg-muted mb-2 inline-flex size-16 items-center justify-center rounded-md sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-8",
+ "bg-muted mb-2 inline-flex size-16 items-center justify-center rounded-lg group-data-[size=sm]/alert-dialog-content:size-12 sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-8 group-data-[size=sm]/alert-dialog-content:*:[svg:not([class*='size-'])]:size-6",
className,
)}
data-slot="alert-dialog-media"
@@ -244,7 +228,6 @@ export {
AlertDialogContent,
AlertDialogDescription,
AlertDialogFooter,
- AlertDialogFooterSkeleton,
AlertDialogHeader,
AlertDialogMedia,
AlertDialogOverlay,
diff --git a/packages/vitnode/src/components/ui/attachment.tsx b/packages/vitnode/src/components/ui/attachment.tsx
index 27c22dd52..bde7bba5e 100644
--- a/packages/vitnode/src/components/ui/attachment.tsx
+++ b/packages/vitnode/src/components/ui/attachment.tsx
@@ -100,7 +100,7 @@ function AttachmentTitle({
return (
<span
className={cn(
- "group-data-[state=processing]/attachment:shimmer group-data-[state=uploading]/attachment:shimmer block max-w-full min-w-0 truncate font-medium",
+ "group-data-[state=processing]/attachment:shimmer group-data-[state=uploading]/attachment:shimmer motion-reduce:shimmer-none block max-w-full min-w-0 truncate font-medium",
className,
)}
data-slot="attachment-title"
@@ -186,7 +186,7 @@ function AttachmentGroup({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
className={cn(
- "scroll-fade-x flex min-w-0 snap-x snap-mandatory scroll-px-1 scrollbar-none gap-3 overflow-x-auto overscroll-x-contain py-1 *:data-[slot=attachment]:flex-none *:data-[slot=attachment]:snap-start",
+ "scroll-fade-x no-scrollbar flex min-w-0 snap-x snap-mandatory scroll-px-1 gap-3 overflow-x-auto overscroll-x-contain py-1 *:data-[slot=attachment]:flex-none *:data-[slot=attachment]:snap-start",
className,
)}
data-slot="attachment-group"
diff --git a/packages/vitnode/src/components/ui/avatar.tsx b/packages/vitnode/src/components/ui/avatar.tsx
index c2979084b..a568c169e 100644
--- a/packages/vitnode/src/components/ui/avatar.tsx
+++ b/packages/vitnode/src/components/ui/avatar.tsx
@@ -1,7 +1,17 @@
import { Avatar as AvatarPrimitive } from "@base-ui/react/avatar";
import { cn } from "cn";
+import { motion, useReducedMotion } from "motion/react";
import React from "react";
+import {
+ Tooltip,
+ TooltipContent,
+ TooltipGroup,
+ TooltipGroupTrigger,
+ TooltipTrigger,
+ useIsInTooltipGroup,
+} from "./tooltip";
+
function Avatar({
className,
size = "default",
@@ -72,14 +82,66 @@ function AvatarBadge({ className, ...props }: React.ComponentProps<"span">) {
function AvatarGroup({ className, ...props }: React.ComponentProps<"div">) {
return (
- <div
+ <TooltipGroup>
+ <div
+ className={cn(
+ "group/avatar-group *:data-[slot=avatar]:ring-background flex -space-x-2 *:data-[slot=avatar]:ring-2",
+ className,
+ )}
+ data-slot="avatar-group"
+ {...props}
+ />
+ </TooltipGroup>
+ );
+}
+
+const AVATAR_LIFT_TRANSITION = {
+ type: "spring",
+ stiffness: 300,
+ damping: 17,
+} as const;
+
+function AvatarGroupItem({
+ children,
+ className,
+ label,
+}: {
+ children: React.ReactNode;
+ className?: string;
+ label?: React.ReactNode;
+}) {
+ const shouldReduceMotion = useReducedMotion();
+ const isInTooltipGroup = useIsInTooltipGroup();
+ const lift = shouldReduceMotion ? undefined : { y: "-25%" };
+
+ const item = (
+ <motion.div
className={cn(
- "group/avatar-group *:data-[slot=avatar]:ring-background flex -space-x-2 *:data-[slot=avatar]:ring-2",
+ "focus-visible:ring-ring/50 *:data-[slot=avatar]:ring-background relative rounded-full outline-none hover:z-10 focus-visible:z-10 focus-visible:ring-3 *:data-[slot=avatar]:ring-2",
className,
)}
- data-slot="avatar-group"
- {...props}
- />
+ data-slot="avatar-group-item"
+ tabIndex={label ? 0 : undefined}
+ transition={AVATAR_LIFT_TRANSITION}
+ whileFocus={lift}
+ whileHover={lift}
+ whileTap={lift}
+ >
+ {children}
+ </motion.div>
+ );
+
+ if (!label) return item;
+
+ if (isInTooltipGroup) {
+ return <TooltipGroupTrigger content={label} render={item} />;
+ }
+
+ return (
+ <Tooltip>
+ <TooltipTrigger render={item} />
+ <TooltipContent sideOffset={8}>{label}</TooltipContent>
+ </Tooltip>
);
}
@@ -105,5 +167,6 @@ export {
AvatarFallback,
AvatarGroup,
AvatarGroupCount,
+ AvatarGroupItem,
AvatarImage,
};
diff --git a/packages/vitnode/src/components/ui/bubble.tsx b/packages/vitnode/src/components/ui/bubble.tsx
new file mode 100644
index 000000000..cef53b988
--- /dev/null
+++ b/packages/vitnode/src/components/ui/bubble.tsx
@@ -0,0 +1,127 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "cn";
+import * as React from "react";
+
+function BubbleGroup({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+ <div
+ className={cn("flex min-w-0 flex-col gap-2", className)}
+ data-slot="bubble-group"
+ {...props}
+ />
+ );
+}
+
+const bubbleVariants = cva(
+ "group/bubble relative flex w-fit max-w-4/5 min-w-0 flex-col gap-1 group-data-[align=end]/message:self-end data-[align=end]:self-end data-[variant=ghost]:max-w-full",
+ {
+ variants: {
+ variant: {
+ default:
+ "*:data-[slot=bubble-content]:bg-primary *:data-[slot=bubble-content]:text-primary-foreground [&>[data-slot=bubble-content]:is(button,a):hover]:bg-primary/80",
+ secondary:
+ "*:data-[slot=bubble-content]:bg-secondary *:data-[slot=bubble-content]:text-secondary-foreground [&>[data-slot=bubble-content]:is(button,a):hover]:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)]",
+ muted:
+ "*:data-[slot=bubble-content]:bg-muted [&>[data-slot=bubble-content]:is(button,a):hover]:bg-[color-mix(in_oklch,var(--muted),var(--foreground)_5%)]",
+ tinted:
+ "*:data-[slot=bubble-content]:bg-[oklch(from_var(--primary)_0.93_calc(c*0.4)_h)] *:data-[slot=bubble-content]:text-foreground dark:*:data-[slot=bubble-content]:bg-[oklch(from_var(--primary)_0.3_calc(c*0.4)_h)] [&>[data-slot=bubble-content]:is(button,a):hover]:bg-[oklch(from_var(--primary)_0.88_calc(c*0.5)_h)] dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-[oklch(from_var(--primary)_0.35_calc(c*0.5)_h)]",
+ outline:
+ "*:data-[slot=bubble-content]:border-border *:data-[slot=bubble-content]:bg-background [&>[data-slot=bubble-content]:is(button,a):hover]:bg-muted [&>[data-slot=bubble-content]:is(button,a):hover]:text-foreground dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-input/30",
+ ghost:
+ "border-none *:data-[slot=bubble-content]:rounded-none *:data-[slot=bubble-content]:bg-transparent *:data-[slot=bubble-content]:p-0 [&>[data-slot=bubble-content]:is(button,a):hover]:bg-muted [&>[data-slot=bubble-content]:is(button,a):hover]:text-foreground dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-muted/50",
+ destructive:
+ "*:data-[slot=bubble-content]:bg-destructive/10 *:data-[slot=bubble-content]:text-destructive dark:*:data-[slot=bubble-content]:bg-destructive/20 [&>[data-slot=bubble-content]:is(button,a):hover]:bg-destructive/20 dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-destructive/30",
+ },
+ },
+ defaultVariants: {
+ variant: "default",
+ },
+ },
+);
+
+function Bubble({
+ variant = "default",
+ align = "start",
+ className,
+ ...props
+}: React.ComponentProps<"div"> &
+ VariantProps<typeof bubbleVariants> & {
+ align?: "end" | "start";
+ }) {
+ return (
+ <div
+ className={cn(bubbleVariants({ variant }), className)}
+ data-align={align}
+ data-slot="bubble"
+ data-variant={variant}
+ {...props}
+ />
+ );
+}
+
+function BubbleContent({
+ className,
+ render,
+ ...props
+}: useRender.ComponentProps<"div">) {
+ return useRender({
+ defaultTagName: "div",
+ props: mergeProps<"div">(
+ {
+ className: cn(
+ "[button,a]:focus-visible:border-ring [button,a]:focus-visible:ring-ring/50 w-fit max-w-full min-w-0 overflow-hidden rounded-xl border border-transparent px-3 py-2 text-sm leading-relaxed wrap-break-word group-data-[align=end]/bubble:self-end [button]:text-left [button,a]:transition-colors [button,a]:outline-none [button,a]:focus-visible:ring-3",
+ className,
+ ),
+ },
+ props,
+ ),
+ render,
+ state: {
+ slot: "bubble-content",
+ },
+ });
+}
+
+const bubbleReactionsVariants = cva(
+ "absolute z-10 flex w-fit shrink-0 items-center justify-center gap-1 rounded-full bg-muted px-1.5 py-0.5 text-sm ring-3 ring-card has-[button]:p-0",
+ {
+ variants: {
+ side: {
+ top: "top-0 -translate-y-3/4",
+ bottom: "bottom-0 translate-y-3/4",
+ },
+ align: {
+ start: "left-3",
+ end: "right-3",
+ },
+ },
+ defaultVariants: {
+ side: "bottom",
+ align: "end",
+ },
+ },
+);
+
+function BubbleReactions({
+ side = "bottom",
+ align = "end",
+ className,
+ ...props
+}: React.ComponentProps<"div"> & {
+ align?: "end" | "start";
+ side?: "bottom" | "top";
+}) {
+ return (
+ <div
+ className={cn(bubbleReactionsVariants({ side, align }), className)}
+ data-align={align}
+ data-side={side}
+ data-slot="bubble-reactions"
+ {...props}
+ />
+ );
+}
+
+export { Bubble, BubbleContent, BubbleGroup, BubbleReactions };
diff --git a/packages/vitnode/src/components/ui/button-client.tsx b/packages/vitnode/src/components/ui/button-client.tsx
index 6180e4c00..1ac3c8203 100644
--- a/packages/vitnode/src/components/ui/button-client.tsx
+++ b/packages/vitnode/src/components/ui/button-client.tsx
@@ -4,7 +4,7 @@ import React from "react";
import { useTranslations } from "use-intl";
import { type ButtonProps, buttonVariants } from "./button";
-import { Loader } from "./loader";
+import { Spinner } from "./spinner";
import { TooltipWithContent } from "./tooltip";
export function ClientButton({
@@ -55,7 +55,7 @@ export function ClientButton({
{isLoading ? (
<div className="animate-in fade-in slide-in-from-top-2 absolute inset-0 flex items-center justify-center duration-300 motion-reduce:animate-none">
- <Loader small />
+ <Spinner aria-hidden="true" />
</div>
) : null}
</div>
diff --git a/packages/vitnode/src/components/ui/card.tsx b/packages/vitnode/src/components/ui/card.tsx
index f6c4fb384..431254963 100644
--- a/packages/vitnode/src/components/ui/card.tsx
+++ b/packages/vitnode/src/components/ui/card.tsx
@@ -9,7 +9,7 @@ function Card({
return (
<div
className={cn(
- "group/card bg-card text-card-foreground ring-foreground/10 flex flex-col gap-(--card-spacing) overflow-hidden rounded-xl py-(--card-spacing) text-sm shadow-xs ring-1 [--card-spacing:--spacing(6)] has-[>img:first-child]:pt-0 data-[size=sm]:[--card-spacing:--spacing(4)] *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl",
+ "group/card bg-card text-card-foreground ring-foreground/10 flex flex-col gap-(--card-spacing) overflow-hidden rounded-xl py-(--card-spacing) text-sm shadow-xs ring-1 [--card-spacing:--spacing(6)] has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:[--card-spacing:--spacing(4)] *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl",
className,
)}
data-size={size}
@@ -82,7 +82,7 @@ function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
className={cn(
- "flex items-center rounded-b-xl px-(--card-spacing) [.border-t]:pt-(--card-spacing)",
+ "bg-muted/50 flex items-center rounded-b-xl border-t p-(--card-spacing)",
className,
)}
data-slot="card-footer"
diff --git a/packages/vitnode/src/components/ui/cascader.test.tsx b/packages/vitnode/src/components/ui/cascader.test.tsx
new file mode 100644
index 000000000..9c5d83c73
--- /dev/null
+++ b/packages/vitnode/src/components/ui/cascader.test.tsx
@@ -0,0 +1,221 @@
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+import {
+ Cascader,
+ cascaderColumns,
+ type CascaderOption,
+ findCascaderPath,
+ searchCascader,
+} from "./cascader";
+
+const places: CascaderOption[] = [
+ {
+ children: [
+ {
+ children: [
+ { label: "Warsaw", value: "warsaw" },
+ { label: "Kraków", value: "krakow" },
+ ],
+ label: "Poland",
+ value: "poland",
+ },
+ { label: "Lisbon", value: "lisbon" },
+ ],
+ label: "Europe",
+ value: "europe",
+ },
+ {
+ children: [{ label: "Tokyo", value: "tokyo" }],
+ label: "Asia",
+ value: "asia",
+ },
+];
+
+describe("cascader helpers", () => {
+ it("finds the path from the root to a value", () => {
+ expect(findCascaderPath(places, "krakow").map(node => node.value)).toEqual([
+ "europe",
+ "poland",
+ "krakow",
+ ]);
+ expect(findCascaderPath(places, "nowhere")).toEqual([]);
+ });
+
+ it("opens one column per active branch and stops at a leaf", () => {
+ expect(cascaderColumns(places, []).length).toBe(1);
+ expect(
+ cascaderColumns(places, ["europe", "poland"]).map(column =>
+ column.map(node => node.value),
+ ),
+ ).toEqual([
+ ["europe", "asia"],
+ ["poland", "lisbon"],
+ ["warsaw", "krakow"],
+ ]);
+ expect(cascaderColumns(places, ["europe", "lisbon"]).length).toBe(2);
+ });
+
+ it("searches leaves by any label on their path, ignoring accents", () => {
+ expect(
+ searchCascader(places, "krakow").map(path => path.at(-1)?.value),
+ ).toEqual(["krakow"]);
+ expect(
+ searchCascader(places, "europe").map(path => path.at(-1)?.value),
+ ).toEqual(["warsaw", "krakow", "lisbon"]);
+ expect(searchCascader(places, " ")).toEqual([]);
+ });
+});
+
+describe("Cascader", () => {
+ beforeEach(() => {
+ vi.stubGlobal(
+ "matchMedia",
+ vi.fn(() => ({
+ addEventListener: vi.fn(),
+ matches: false,
+ removeEventListener: vi.fn(),
+ })),
+ );
+ });
+
+ afterEach(() => {
+ vi.unstubAllGlobals();
+ });
+
+ const openCascader = () => {
+ fireEvent.click(
+ screen.getByRole("button", { name: "core.global.select_option" }),
+ );
+ };
+
+ it("drills down the columns and selects a leaf", async () => {
+ const onValueChange = vi.fn();
+ render(<Cascader onValueChange={onValueChange} options={places} />);
+
+ openCascader();
+ fireEvent.click(await screen.findByRole("option", { name: "Europe" }));
+ fireEvent.click(await screen.findByRole("option", { name: "Poland" }));
+ fireEvent.click(await screen.findByRole("option", { name: "Warsaw" }));
+
+ expect(onValueChange).toHaveBeenCalledWith(
+ "warsaw",
+ expect.arrayContaining([expect.objectContaining({ value: "europe" })]),
+ );
+ expect(
+ screen.getByRole("button", { name: "Europe / Poland / Warsaw" }),
+ ).toBeTruthy();
+ });
+
+ it("replaces the list with the branch's children and goes back", async () => {
+ render(<Cascader options={places} />);
+
+ openCascader();
+ fireEvent.click(await screen.findByRole("option", { name: "Europe" }));
+
+ expect(await screen.findByRole("option", { name: "Poland" })).toBeTruthy();
+ await waitFor(() => {
+ expect(screen.queryByRole("option", { name: "Asia" })).toBeNull();
+ });
+
+ fireEvent.click(
+ screen.getByRole("button", { name: /core\.global\.go_back/ }),
+ );
+
+ expect(await screen.findByRole("option", { name: "Asia" })).toBeTruthy();
+ });
+
+ it("marks the open branch as expanded in the columns layout", async () => {
+ render(<Cascader layout="columns" options={places} />);
+
+ openCascader();
+ const europe = await screen.findByRole("option", { name: "Europe" });
+ expect(europe.getAttribute("aria-expanded")).toBe("false");
+
+ fireEvent.click(europe);
+ expect(europe.getAttribute("aria-expanded")).toBe("true");
+ });
+
+ it("picks a search result straight away", async () => {
+ const onValueChange = vi.fn();
+ render(
+ <Cascader onValueChange={onValueChange} options={places} searchable />,
+ );
+
+ openCascader();
+ fireEvent.change(
+ await screen.findByRole("textbox", {
+ name: "core.global.search_placeholder",
+ }),
+ { target: { value: "tok" } },
+ );
+ fireEvent.click(
+ await screen.findByRole("option", { name: "Asia / Tokyo" }),
+ );
+
+ expect(onValueChange).toHaveBeenCalledWith("tokyo", expect.any(Array));
+ });
+
+ it("clears the value with the clear button", () => {
+ const onValueChange = vi.fn();
+ render(
+ <Cascader
+ defaultValue="lisbon"
+ onValueChange={onValueChange}
+ options={places}
+ showClear
+ />,
+ );
+
+ fireEvent.click(screen.getByRole("button", { name: "core.global.clear" }));
+
+ expect(onValueChange).toHaveBeenCalledWith(null, []);
+ expect(
+ screen.getByRole("button", { name: "core.global.select_option" }),
+ ).toBeTruthy();
+ });
+
+ it("moves between enabled options with the arrow keys, skipping disabled ones", async () => {
+ render(
+ <Cascader
+ options={[
+ { disabled: true, label: "Closed", value: "closed" },
+ { label: "Alpha", value: "alpha" },
+ { label: "Beta", value: "beta" },
+ ]}
+ />,
+ );
+
+ openCascader();
+ const alpha = await screen.findByRole("option", { name: "Alpha" });
+ const beta = screen.getByRole("option", { name: "Beta" });
+ alpha.focus();
+
+ fireEvent.keyDown(alpha, { key: "ArrowDown" });
+ expect(document.activeElement).toBe(beta);
+
+ fireEvent.keyDown(beta, { key: "ArrowDown" });
+ expect(document.activeElement).toBe(beta);
+
+ fireEvent.keyDown(beta, { key: "ArrowUp" });
+ expect(document.activeElement).toBe(alpha);
+ });
+
+ it("treats an empty string as a selected value", () => {
+ render(
+ <Cascader
+ defaultValue=""
+ options={[
+ { label: "None", value: "" },
+ { label: "Alpha", value: "alpha" },
+ ]}
+ showClear
+ />,
+ );
+
+ expect(screen.getByRole("button", { name: "None" })).toBeTruthy();
+ expect(
+ screen.getByRole("button", { name: "core.global.clear" }),
+ ).toBeTruthy();
+ });
+});
diff --git a/packages/vitnode/src/components/ui/cascader.tsx b/packages/vitnode/src/components/ui/cascader.tsx
new file mode 100644
index 000000000..d1e00780a
--- /dev/null
+++ b/packages/vitnode/src/components/ui/cascader.tsx
@@ -0,0 +1,646 @@
+import { cn } from "cn";
+import {
+ CheckIcon,
+ ChevronDownIcon,
+ ChevronLeftIcon,
+ ChevronRightIcon,
+ SearchIcon,
+ XIcon,
+} from "lucide-react";
+import {
+ AnimatePresence,
+ motion,
+ useIsPresent,
+ useReducedMotion,
+} from "motion/react";
+import React from "react";
+import { useTranslations } from "use-intl";
+
+import { useIsMobile } from "@/hooks/use-mobile";
+
+import { Popover, PopoverContent, PopoverTrigger } from "./popover";
+
+export interface CascaderOption {
+ children?: CascaderOption[];
+ disabled?: boolean;
+ label: string;
+ value: string;
+}
+
+const COLUMN_WIDTH = 224;
+const PANEL_TRANSITION = { type: "spring", duration: 0.3, bounce: 0 } as const;
+
+const isCascaderBranch = (option: CascaderOption) => !!option.children?.length;
+
+export const findCascaderPath = (
+ options: readonly CascaderOption[],
+ value: string,
+): CascaderOption[] => {
+ for (const option of options) {
+ if (option.value === value) return [option];
+
+ if (option.children) {
+ const rest = findCascaderPath(option.children, value);
+ if (rest.length) return [option, ...rest];
+ }
+ }
+
+ return [];
+};
+
+const normalizeLabel = (label: string) =>
+ label
+ .normalize("NFD")
+ .replace(/\p{Diacritic}/gu, "")
+ .toLowerCase();
+
+export const searchCascader = (
+ options: readonly CascaderOption[],
+ query: string,
+ limit = 50,
+): CascaderOption[][] => {
+ const needle = normalizeLabel(query.trim());
+ if (!needle) return [];
+
+ const results: CascaderOption[][] = [];
+ const walk = (
+ list: readonly CascaderOption[],
+ trail: readonly CascaderOption[],
+ ) => {
+ for (const option of list) {
+ if (results.length >= limit) return;
+ const path = [...trail, option];
+
+ if (option.children?.length) {
+ walk(option.children, path);
+ } else if (
+ path.some(node => normalizeLabel(node.label).includes(needle))
+ ) {
+ results.push(path);
+ }
+ }
+ };
+ walk(options, []);
+
+ return results;
+};
+
+export const cascaderColumns = (
+ options: CascaderOption[],
+ activePath: readonly string[],
+): CascaderOption[][] => {
+ const columns = [options];
+ let level = options;
+
+ for (const value of activePath) {
+ const node = level.find(option => option.value === value);
+ if (!node?.children?.length) break;
+
+ columns.push(node.children);
+ level = node.children;
+ }
+
+ return columns;
+};
+
+const focusLater = (
+ panel: Element | null,
+ level: number,
+ pick: "active" | "first",
+) => {
+ requestAnimationFrame(() => {
+ focusOption(panel, level, pick);
+ });
+};
+
+const assignRef = <T,>(ref: React.Ref<T> | undefined, value: null | T) => {
+ if (typeof ref === "function") {
+ ref(value);
+ } else if (ref) {
+ ref.current = value;
+ }
+};
+
+const PresentColumn = ({
+ children,
+ className,
+ onHeightChange,
+ ref,
+ ...props
+}: React.ComponentProps<typeof motion.div> & {
+ onHeightChange?: (height: number) => void;
+}) => {
+ const isPresent = useIsPresent();
+ const observesHeight = isPresent && !!onHeightChange;
+
+ return (
+ <motion.div
+ className={className}
+ inert={!isPresent}
+ ref={(node: HTMLDivElement | null) => {
+ assignRef(ref, node);
+ if (!node || !observesHeight || typeof ResizeObserver === "undefined") {
+ return;
+ }
+
+ const observer = new ResizeObserver(([entry]) => {
+ onHeightChange(
+ entry?.borderBoxSize[0]?.blockSize ?? node.offsetHeight,
+ );
+ });
+ observer.observe(node);
+
+ return () => {
+ observer.disconnect();
+ assignRef(ref, null);
+ };
+ }}
+ {...props}
+ >
+ {children}
+ </motion.div>
+ );
+};
+
+const DRILL_VARIANTS = {
+ center: { opacity: 1, x: "0%" },
+ enter: (offset: number) => ({ opacity: 0, x: `${offset * 40}%` }),
+ exit: (offset: number) => ({ opacity: 0, x: `${offset * -40}%` }),
+};
+
+const isRtl = (element: Element) =>
+ getComputedStyle(element).direction === "rtl";
+
+const panelOf = (element: Element) =>
+ element.closest("[data-slot=cascader-panel]");
+
+const enabledOptions = (panel: Element | null, level: number | string) =>
+ [
+ ...(panel?.querySelectorAll<HTMLButtonElement>(
+ `[data-cascader-level="${level}"]:not([disabled])`,
+ ) ?? []),
+ ].filter(option => !option.closest("[inert]"));
+
+const focusOption = (
+ panel: Element | null,
+ level: number | string,
+ pick: "active" | "first" | "last",
+) => {
+ const options = enabledOptions(panel, level);
+ const target =
+ pick === "first"
+ ? options[0]
+ : pick === "last"
+ ? options.at(-1)
+ : (options.find(option => option.dataset.active === "true") ??
+ options[0]);
+
+ target?.focus();
+};
+
+function Cascader({
+ "aria-describedby": ariaDescribedBy,
+ "aria-invalid": ariaInvalid,
+ "aria-labelledby": ariaLabelledBy,
+ className,
+ defaultValue = null,
+ disabled = false,
+ expandTrigger = "click",
+ id,
+ layout = "drill",
+ onValueChange,
+ options,
+ placeholder,
+ searchable = false,
+ separator = " / ",
+ showClear = false,
+ value: valueProp,
+}: {
+ "aria-describedby"?: string;
+ "aria-invalid"?: boolean;
+ "aria-labelledby"?: string;
+ className?: string;
+ defaultValue?: null | string;
+ disabled?: boolean;
+ expandTrigger?: "click" | "hover";
+ id?: string;
+ layout?: "columns" | "drill";
+ onValueChange?: (value: null | string, path: CascaderOption[]) => void;
+ options: CascaderOption[];
+ placeholder?: string;
+ searchable?: boolean;
+ separator?: string;
+ showClear?: boolean;
+ value?: null | string;
+}) {
+ const t = useTranslations("core.global");
+ const isMobile = useIsMobile();
+ const isDrill = isMobile || layout === "drill";
+ const shouldReduceMotion = useReducedMotion();
+ const [uncontrolledValue, setUncontrolledValue] =
+ React.useState(defaultValue);
+ const value = valueProp === undefined ? uncontrolledValue : valueProp;
+ const selectedPath = React.useMemo(
+ () => (value === null ? [] : findCascaderPath(options, value)),
+ [options, value],
+ );
+ const [open, setOpen] = React.useState(false);
+ const [activePath, setActivePath] = React.useState<string[]>([]);
+ const [direction, setDirection] = React.useState<-1 | 1>(1);
+ const [query, setQuery] = React.useState("");
+ const [levelHeight, setLevelHeight] = React.useState<null | number>(null);
+ const columns = cascaderColumns(options, activePath);
+ const results = searchable && query ? searchCascader(options, query) : null;
+ const transition = shouldReduceMotion ? { duration: 0 } : PANEL_TRANSITION;
+ const selectedValues = new Set(selectedPath.map(option => option.value));
+
+ const handleOpenChange = (next: boolean) => {
+ if (next) {
+ setActivePath(selectedPath.slice(0, -1).map(option => option.value));
+ setQuery("");
+ setDirection(1);
+ }
+ setOpen(next);
+ };
+
+ const commit = (path: CascaderOption[]) => {
+ const leaf = path.at(-1) ?? null;
+ setUncontrolledValue(leaf?.value ?? null);
+ onValueChange?.(leaf?.value ?? null, path);
+ };
+
+ const pathTo = (level: number, option: CascaderOption) => [
+ ...columns
+ .slice(0, level)
+ .map((column, index) =>
+ column.find(node => node.value === activePath[index]),
+ )
+ .filter(node => node !== undefined),
+ option,
+ ];
+
+ const openBranch = (
+ level: number,
+ option: CascaderOption,
+ panel: Element | null,
+ focusNext: boolean,
+ ) => {
+ setDirection(panel && isRtl(panel) ? -1 : 1);
+ setActivePath(current => [...current.slice(0, level), option.value]);
+ if (focusNext) focusLater(panel, level + 1, "first");
+ };
+
+ const goBack = (panel: Element | null) => {
+ setDirection(panel && isRtl(panel) ? 1 : -1);
+ focusLater(panel, Math.max(0, activePath.length - 1), "active");
+ setActivePath(current => current.slice(0, -1));
+ };
+
+ const choose = (
+ level: number,
+ option: CascaderOption,
+ panel: Element | null,
+ ) => {
+ if (option.disabled) return;
+
+ if (isCascaderBranch(option)) {
+ openBranch(level, option, panel, isDrill);
+
+ return;
+ }
+
+ commit(pathTo(level, option));
+ setOpen(false);
+ };
+
+ const handleOptionKeyDown = (
+ event: React.KeyboardEvent<HTMLButtonElement>,
+ level: number | string,
+ option: CascaderOption,
+ ) => {
+ const rtl = isRtl(event.currentTarget);
+ const forward = rtl ? "ArrowLeft" : "ArrowRight";
+ const backward = rtl ? "ArrowRight" : "ArrowLeft";
+ const panel = panelOf(event.currentTarget);
+ const siblings = enabledOptions(panel, level);
+ const position = siblings.indexOf(event.currentTarget);
+
+ switch (event.key) {
+ case "ArrowDown":
+ event.preventDefault();
+ siblings[Math.min(siblings.length - 1, position + 1)]?.focus();
+ break;
+ case "ArrowUp":
+ event.preventDefault();
+ if (position <= 0 && searchable) {
+ panel
+ ?.querySelector<HTMLInputElement>("[data-cascader-search]")
+ ?.focus();
+ } else {
+ siblings[Math.max(0, position - 1)]?.focus();
+ }
+ break;
+ case "End":
+ event.preventDefault();
+ focusOption(panel, level, "last");
+ break;
+ case "Home":
+ event.preventDefault();
+ focusOption(panel, level, "first");
+ break;
+ default:
+ if (typeof level !== "number") return;
+
+ if (event.key === forward && isCascaderBranch(option)) {
+ event.preventDefault();
+ openBranch(level, option, panel, true);
+ } else if (event.key === backward && level > 0) {
+ event.preventDefault();
+ if (isDrill) {
+ goBack(panel);
+ } else {
+ focusOption(panel, level - 1, "active");
+ }
+ }
+ }
+ };
+
+ const renderOption = (
+ option: CascaderOption,
+ level: number | string,
+ index: number,
+ label: React.ReactNode,
+ onSelect: (panel: Element | null) => void,
+ ) => {
+ const isBranch = isCascaderBranch(option);
+ const isActive =
+ typeof level === "number" && activePath[level] === option.value;
+ const isSelected =
+ typeof level === "number"
+ ? selectedValues.has(option.value)
+ : option.value === value;
+
+ return (
+ <button
+ aria-expanded={isBranch ? isActive : undefined}
+ aria-selected={isSelected}
+ className={cn(
+ "hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:text-accent-foreground data-[active=true]:bg-accent/60 flex w-full cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-start text-sm outline-none disabled:pointer-events-none disabled:opacity-50",
+ isSelected && !isBranch && "font-medium",
+ )}
+ data-active={isActive || (isSelected && !isBranch)}
+ data-cascader-level={level}
+ disabled={option.disabled}
+ key={option.value}
+ onClick={event => {
+ onSelect(panelOf(event.currentTarget));
+ }}
+ onKeyDown={event => {
+ handleOptionKeyDown(event, level, option);
+ }}
+ onMouseEnter={() => {
+ if (
+ expandTrigger === "hover" &&
+ isBranch &&
+ !isDrill &&
+ typeof level === "number" &&
+ !isActive
+ ) {
+ openBranch(level, option, null, false);
+ }
+ }}
+ role="option"
+ tabIndex={index === 0 ? 0 : -1}
+ type="button"
+ >
+ <span className="min-w-0 flex-1 truncate">{label}</span>
+ {isBranch ? (
+ <ChevronRightIcon className="text-muted-foreground size-4 shrink-0 rtl:rotate-180" />
+ ) : isSelected ? (
+ <CheckIcon className="size-4 shrink-0" />
+ ) : null}
+ </button>
+ );
+ };
+
+ const renderColumn = (column: CascaderOption[], level: number) => (
+ <div
+ aria-label={
+ level === 0
+ ? (placeholder ?? t("select_option"))
+ : columns[level - 1]?.find(
+ node => node.value === activePath[level - 1],
+ )?.label
+ }
+ className="flex max-h-72 flex-col overflow-y-auto overscroll-contain p-1"
+ role="listbox"
+ >
+ {column.map((option, index) =>
+ renderOption(option, level, index, option.label, panel => {
+ choose(level, option, panel);
+ }),
+ )}
+ </div>
+ );
+
+ const renderPanel = () => {
+ if (results) {
+ if (results.length === 0) {
+ return (
+ <p
+ className={cn(
+ "text-muted-foreground px-3 py-6 text-center text-sm",
+ !isDrill && "w-80",
+ )}
+ >
+ {t("results_not_found")}
+ </p>
+ );
+ }
+
+ return (
+ <div
+ aria-label={t("search_placeholder")}
+ className={cn(
+ "flex max-h-72 flex-col overflow-y-auto overscroll-contain p-1",
+ !isDrill && "w-80",
+ )}
+ role="listbox"
+ >
+ {results.map((path, index) => {
+ const leaf = path.at(-1);
+ if (!leaf) return null;
+
+ return renderOption(
+ leaf,
+ "search",
+ index,
+ path.map(node => node.label).join(separator),
+ () => {
+ commit(path);
+ setOpen(false);
+ },
+ );
+ })}
+ </div>
+ );
+ }
+
+ if (isDrill) {
+ const level = columns.length - 1;
+ const parent = columns[level - 1]?.find(
+ node => node.value === activePath[level - 1],
+ );
+
+ return (
+ <motion.div
+ animate={{ height: levelHeight ?? "auto" }}
+ className="relative overflow-hidden"
+ initial={false}
+ transition={transition}
+ >
+ <AnimatePresence custom={direction} initial={false} mode="popLayout">
+ <PresentColumn
+ animate="center"
+ className="w-full"
+ custom={direction}
+ exit="exit"
+ initial="enter"
+ key={activePath.slice(0, level).join("/") || "root"}
+ onHeightChange={setLevelHeight}
+ transition={transition}
+ variants={DRILL_VARIANTS}
+ >
+ {parent && (
+ <button
+ className="hover:bg-accent text-muted-foreground focus-visible:bg-accent flex w-full items-center gap-1 border-b px-2 py-2 text-start text-sm outline-none"
+ onClick={event => {
+ goBack(panelOf(event.currentTarget));
+ }}
+ type="button"
+ >
+ <ChevronLeftIcon className="size-4 rtl:rotate-180" />
+ <span className="sr-only">{t("go_back")}: </span>
+ <span className="text-foreground truncate font-medium">
+ {parent.label}
+ </span>
+ </button>
+ )}
+ {renderColumn(columns[level] ?? [], level)}
+ </PresentColumn>
+ </AnimatePresence>
+ </motion.div>
+ );
+ }
+
+ return (
+ <motion.div
+ animate={{ width: columns.length * COLUMN_WIDTH }}
+ className="flex max-w-(--available-width) overflow-x-auto overflow-y-hidden"
+ initial={false}
+ transition={transition}
+ >
+ <AnimatePresence initial={false}>
+ {columns.map((column, level) => (
+ <PresentColumn
+ animate={{ opacity: 1, x: 0 }}
+ className="shrink-0 border-e last:border-e-0"
+ exit={{ opacity: 0, x: -8 }}
+ initial={{ opacity: 0, x: -8 }}
+ key={["root", ...activePath.slice(0, level)].join("/")}
+ style={{ width: COLUMN_WIDTH }}
+ transition={transition}
+ >
+ {renderColumn(column, level)}
+ </PresentColumn>
+ ))}
+ </AnimatePresence>
+ </motion.div>
+ );
+ };
+
+ const hasValue = selectedPath.length > 0;
+
+ return (
+ <Popover onOpenChange={handleOpenChange} open={open}>
+ <div className={cn("relative w-full", className)} data-slot="cascader">
+ <PopoverTrigger
+ aria-describedby={ariaDescribedBy}
+ aria-invalid={ariaInvalid}
+ aria-labelledby={ariaLabelledBy}
+ className={cn(
+ "border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 hover:bg-muted dark:bg-input/30 dark:hover:bg-input/50 bg-card flex h-9 w-full items-center justify-between gap-1.5 rounded-md border py-2 ps-2.5 pe-2 text-start text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3",
+ )}
+ disabled={disabled}
+ id={id}
+ >
+ <span
+ className={cn(
+ "min-w-0 flex-1 truncate",
+ !hasValue && "text-muted-foreground",
+ showClear && hasValue && !disabled && "me-7",
+ )}
+ data-slot="cascader-value"
+ >
+ {hasValue
+ ? selectedPath.map(option => option.label).join(separator)
+ : (placeholder ?? t("select_option"))}
+ </span>
+ <ChevronDownIcon className="text-muted-foreground pointer-events-none size-4 shrink-0" />
+ </PopoverTrigger>
+ {showClear && hasValue && !disabled && (
+ <button
+ aria-label={t("clear")}
+ className="text-muted-foreground hover:bg-muted hover:text-foreground focus-visible:ring-ring/50 absolute end-8 top-1/2 flex size-6 -translate-y-1/2 items-center justify-center rounded-sm outline-none focus-visible:ring-3"
+ onClick={() => {
+ commit([]);
+ }}
+ type="button"
+ >
+ <XIcon className="size-3.5" />
+ </button>
+ )}
+ </div>
+
+ <PopoverContent
+ align="start"
+ className={cn(
+ "w-auto max-w-(--available-width) gap-0 overflow-hidden p-0",
+ isDrill && "w-(--anchor-width)",
+ )}
+ >
+ <div data-slot="cascader-panel">
+ {searchable && (
+ <div className="flex items-center gap-2 border-b px-3">
+ <SearchIcon className="text-muted-foreground size-4 shrink-0" />
+ <input
+ aria-label={t("search_placeholder")}
+ className="placeholder:text-muted-foreground h-9 min-w-0 flex-1 bg-transparent text-sm outline-none"
+ data-cascader-search=""
+ onChange={event => {
+ setQuery(event.target.value);
+ }}
+ onKeyDown={event => {
+ if (event.key !== "ArrowDown") return;
+
+ event.preventDefault();
+ focusOption(
+ panelOf(event.currentTarget),
+ results ? "search" : 0,
+ "active",
+ );
+ }}
+ placeholder={t("search_placeholder")}
+ type="text"
+ value={query}
+ />
+ </div>
+ )}
+ {renderPanel()}
+ </div>
+ </PopoverContent>
+ </Popover>
+ );
+}
+
+export { Cascader };
diff --git a/packages/vitnode/src/components/ui/chart.tsx b/packages/vitnode/src/components/ui/chart.tsx
index 1399b9fbe..cac632d46 100644
--- a/packages/vitnode/src/components/ui/chart.tsx
+++ b/packages/vitnode/src/components/ui/chart.tsx
@@ -245,7 +245,7 @@ function ChartTooltipContent({
)}
<div
className={cn(
- "flex flex-1 justify-between leading-none",
+ "flex flex-1 justify-between gap-4 leading-none",
nestLabel ? "items-end" : "items-center",
)}
>
diff --git a/packages/vitnode/src/components/ui/checkbox.tsx b/packages/vitnode/src/components/ui/checkbox.tsx
index 00b20c2d8..c7d8a1746 100644
--- a/packages/vitnode/src/components/ui/checkbox.tsx
+++ b/packages/vitnode/src/components/ui/checkbox.tsx
@@ -18,7 +18,7 @@ function Checkbox({
return (
<CheckboxPrimitive.Root
className={cn(
- "peer border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-indeterminate:border-primary data-indeterminate:bg-primary data-indeterminate:text-primary-foreground dark:data-indeterminate:bg-primary relative flex size-4 shrink-0 items-center justify-center rounded-[4px] border shadow-xs transition-shadow outline-none group-has-disabled/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3",
+ "peer border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-indeterminate:border-primary data-indeterminate:bg-primary data-indeterminate:text-primary-foreground dark:data-indeterminate:bg-primary relative flex size-4 shrink-0 items-center justify-center rounded-[4px] border shadow-xs transition-shadow outline-none group-data-[disabled=true]/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3 data-disabled:cursor-not-allowed data-disabled:opacity-50",
className,
)}
data-slot="checkbox"
diff --git a/packages/vitnode/src/components/ui/color-picker.tsx b/packages/vitnode/src/components/ui/color-picker.tsx
index 74d9fc176..c9fe94de6 100644
--- a/packages/vitnode/src/components/ui/color-picker.tsx
+++ b/packages/vitnode/src/components/ui/color-picker.tsx
@@ -8,8 +8,8 @@ import { colorToHslString } from "@/lib/colors";
import { Button } from "./button";
import { ColorPresetPicker } from "./color-preset-picker";
import { Input } from "./input";
-import { Loader } from "./loader";
import { Popover, PopoverContent, PopoverTrigger } from "./popover";
+import { Spinner } from "./spinner";
// react-colorful only ships in the bundle once the picker is actually opened.
const HslStringColorPicker = React.lazy(async () => ({
@@ -59,7 +59,9 @@ export const ColorPicker = ({
<React.Suspense
fallback={
<div className="flex size-50 items-center justify-center">
- <Loader />
+ <div className="flex items-center justify-center">
+ <Spinner size="xl" />
+ </div>
</div>
}
>
diff --git a/packages/vitnode/src/components/ui/combobox.tsx b/packages/vitnode/src/components/ui/combobox.tsx
index 6c6d7ced4..a87ee9bb8 100644
--- a/packages/vitnode/src/components/ui/combobox.tsx
+++ b/packages/vitnode/src/components/ui/combobox.tsx
@@ -1,6 +1,12 @@
import { Combobox as ComboboxPrimitive } from "@base-ui/react";
import { cn } from "cn";
import { CheckIcon, ChevronDownIcon, XIcon } from "lucide-react";
+import {
+ AnimatePresence,
+ motion,
+ MotionConfig,
+ useIsPresent,
+} from "motion/react";
import React from "react";
import { useTranslations } from "use-intl";
@@ -60,7 +66,7 @@ function ComboboxInput({
showTrigger?: boolean;
}) {
return (
- <InputGroup className={cn("w-auto", className)}>
+ <InputGroup className={cn("w-full", className)}>
<ComboboxPrimitive.Input
render={<InputGroupInput disabled={disabled} />}
{...props}
@@ -222,7 +228,7 @@ function ComboboxChips({
return (
<ComboboxPrimitive.Chips
className={cn(
- "border-input focus-within:border-ring focus-within:ring-ring/50 has-aria-invalid:border-destructive has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:border-destructive/50 dark:has-aria-invalid:ring-destructive/40 dark:bg-input/30 bg-card flex min-h-9 flex-wrap items-center gap-1.5 rounded-md border bg-clip-padding px-2.5 py-1.5 text-sm shadow-xs transition-[color,box-shadow] focus-within:ring-3 has-aria-invalid:ring-3 has-data-[slot=combobox-chip]:px-1.5",
+ "border-input focus-within:border-ring focus-within:ring-ring/50 has-aria-invalid:border-destructive has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:border-destructive/50 dark:has-aria-invalid:ring-destructive/40 dark:bg-input/30 bg-card relative flex min-h-9 w-full flex-wrap items-center gap-1.5 rounded-md border bg-clip-padding px-2.5 py-1.5 text-sm shadow-xs transition-[color,box-shadow] focus-within:ring-3 has-aria-invalid:ring-3 has-data-[slot=combobox-chip]:px-1.5",
className,
)}
data-slot="combobox-chips"
@@ -231,38 +237,117 @@ function ComboboxChips({
);
}
+const CHIP_TRANSITION = { type: "spring", duration: 0.3, bounce: 0 } as const;
+const CHIP_HIDDEN = { opacity: 0, scale: 0.6 };
+const CHIP_VISIBLE = { opacity: 1, scale: 1 };
+
+const chipClassName =
+ "bg-muted text-foreground flex h-[calc(--spacing(5.5))] w-fit items-center justify-center gap-1 rounded-sm px-1.5 text-xs font-medium whitespace-nowrap has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50 has-data-[slot=combobox-chip-remove]:pe-0";
+
+function ComboboxChipList({ children }: { children: React.ReactNode }) {
+ return (
+ <MotionConfig reducedMotion="user">
+ <AnimatePresence initial={false} mode="popLayout">
+ {children}
+ </AnimatePresence>
+ </MotionConfig>
+ );
+}
+
function ComboboxChip({
className,
children,
+ ref,
showRemove = true,
...props
-}: ComboboxPrimitive.Chip.Props & {
+}: Omit<ComboboxPrimitive.Chip.Props, "ref"> & {
+ ref?: React.Ref<HTMLDivElement>;
showRemove?: boolean;
}) {
const t = useTranslations("core.global");
+ const isPresent = useIsPresent();
return (
- <ComboboxPrimitive.Chip
- className={cn(
- "bg-muted text-foreground flex h-[calc(--spacing(5.5))] w-fit items-center justify-center gap-1 rounded-sm px-1.5 text-xs font-medium whitespace-nowrap has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50 has-data-[slot=combobox-chip-remove]:pe-0",
- className,
- )}
- data-slot="combobox-chip"
- {...props}
+ <motion.div
+ animate={CHIP_VISIBLE}
+ className="flex"
+ data-slot="combobox-chip-motion"
+ exit={CHIP_HIDDEN}
+ initial={CHIP_HIDDEN}
+ layout="position"
+ ref={ref}
+ transition={CHIP_TRANSITION}
>
- {children}
- {showRemove && (
- <ComboboxPrimitive.ChipRemove
- className="-ms-1 opacity-50 hover:opacity-100"
- data-slot="combobox-chip-remove"
- render={
- <Button aria-label={t("remove")} size="icon-xs" variant="ghost" />
- }
+ {isPresent ? (
+ <ComboboxPrimitive.Chip
+ className={cn(chipClassName, className)}
+ data-slot="combobox-chip"
+ {...props}
>
- <XIcon className="pointer-events-none" />
- </ComboboxPrimitive.ChipRemove>
+ {children}
+ {showRemove && (
+ <ComboboxPrimitive.ChipRemove
+ className="-ms-1 opacity-50 hover:opacity-100"
+ data-slot="combobox-chip-remove"
+ render={
+ <Button
+ aria-label={t("remove")}
+ size="icon-xs"
+ variant="ghost"
+ />
+ }
+ >
+ <XIcon className="pointer-events-none" />
+ </ComboboxPrimitive.ChipRemove>
+ )}
+ </ComboboxPrimitive.Chip>
+ ) : (
+ <span
+ aria-hidden="true"
+ className={cn(chipClassName, "pointer-events-none", className)}
+ >
+ {children}
+ {showRemove && (
+ <span
+ className="-ms-1 flex size-6 items-center justify-center opacity-50"
+ data-slot="combobox-chip-remove"
+ >
+ <XIcon className="size-3" />
+ </span>
+ )}
+ </span>
)}
- </ComboboxPrimitive.Chip>
+ </motion.div>
+ );
+}
+
+function ComboboxChipOverflow({
+ count,
+ ref,
+}: {
+ count: number;
+ ref?: React.Ref<HTMLDivElement>;
+}) {
+ const t = useTranslations("core.global");
+
+ return (
+ <motion.div
+ animate={CHIP_VISIBLE}
+ className="flex"
+ data-slot="combobox-chip-motion"
+ exit={CHIP_HIDDEN}
+ initial={CHIP_HIDDEN}
+ layout="position"
+ ref={ref}
+ transition={CHIP_TRANSITION}
+ >
+ <span
+ className={cn(chipClassName, "text-muted-foreground tabular-nums")}
+ data-slot="combobox-chip-overflow"
+ >
+ {t("more_count", { count })}
+ </span>
+ </motion.div>
);
}
@@ -274,6 +359,7 @@ function ComboboxChipsInput({
<ComboboxPrimitive.Input
className={cn("min-w-16 flex-1 outline-none", className)}
data-slot="combobox-chip-input"
+ render={<motion.input layout="position" transition={CHIP_TRANSITION} />}
{...props}
/>
);
@@ -286,6 +372,8 @@ function useComboboxAnchor() {
export {
Combobox,
ComboboxChip,
+ ComboboxChipList,
+ ComboboxChipOverflow,
ComboboxChips,
ComboboxChipsInput,
ComboboxCollection,
diff --git a/packages/vitnode/src/components/ui/comparison.test.ts b/packages/vitnode/src/components/ui/comparison.test.ts
new file mode 100644
index 000000000..81ee5d29a
--- /dev/null
+++ b/packages/vitnode/src/components/ui/comparison.test.ts
@@ -0,0 +1,36 @@
+import { describe, expect, it } from "vitest";
+
+import { positionFromKey, positionFromPointer } from "./comparison";
+
+describe("positionFromPointer", () => {
+ it("turns the pointer x into a percentage of the width", () => {
+ expect(positionFromPointer(150, { left: 100, width: 200 })).toBe(25);
+ });
+
+ it("clamps pointers outside the box", () => {
+ expect(positionFromPointer(0, { left: 100, width: 200 })).toBe(0);
+ expect(positionFromPointer(900, { left: 100, width: 200 })).toBe(100);
+ });
+
+ it("falls back to the middle before the box has a size", () => {
+ expect(positionFromPointer(10, { left: 0, width: 0 })).toBe(50);
+ });
+});
+
+describe("positionFromKey", () => {
+ it("moves by 5% with the arrow keys and 10% with shift", () => {
+ expect(positionFromKey("ArrowRight", 50, false)).toBe(55);
+ expect(positionFromKey("ArrowLeft", 50, false)).toBe(45);
+ expect(positionFromKey("ArrowUp", 50, true)).toBe(60);
+ });
+
+ it("jumps to the ends with Home and End and never overshoots", () => {
+ expect(positionFromKey("Home", 50, false)).toBe(0);
+ expect(positionFromKey("End", 50, false)).toBe(100);
+ expect(positionFromKey("ArrowRight", 98, false)).toBe(100);
+ });
+
+ it("ignores other keys", () => {
+ expect(positionFromKey("a", 50, false)).toBeNull();
+ });
+});
diff --git a/packages/vitnode/src/components/ui/comparison.tsx b/packages/vitnode/src/components/ui/comparison.tsx
new file mode 100644
index 000000000..75f2fbcfd
--- /dev/null
+++ b/packages/vitnode/src/components/ui/comparison.tsx
@@ -0,0 +1,208 @@
+import { cn } from "cn";
+import { GripVerticalIcon } from "lucide-react";
+import {
+ motion,
+ type MotionValue,
+ useMotionValue,
+ useTransform,
+} from "motion/react";
+import React from "react";
+import { useTranslations } from "use-intl";
+
+const KEY_STEP = 5;
+const SHIFT_KEY_STEP = 10;
+
+const clampPosition = (value: number) => Math.min(100, Math.max(0, value));
+
+export const positionFromPointer = (
+ clientX: number,
+ rect: { left: number; width: number },
+) =>
+ rect.width ? clampPosition(((clientX - rect.left) / rect.width) * 100) : 50;
+
+export const positionFromKey = (
+ key: string,
+ current: number,
+ shiftKey: boolean,
+): null | number => {
+ const step = shiftKey ? SHIFT_KEY_STEP : KEY_STEP;
+
+ switch (key) {
+ case "ArrowDown":
+ case "ArrowLeft":
+ return clampPosition(current - step);
+ case "ArrowRight":
+ case "ArrowUp":
+ return clampPosition(current + step);
+ case "End":
+ return 100;
+ case "Home":
+ return 0;
+ default:
+ return null;
+ }
+};
+
+const ComparisonContext = React.createContext<null | {
+ mode: "drag" | "hover";
+ position: MotionValue<number>;
+}>(null);
+
+const useComparison = () => {
+ const context = React.use(ComparisonContext);
+
+ if (!context) {
+ throw new Error("Comparison parts must be used inside <Comparison>");
+ }
+
+ return context;
+};
+
+function Comparison({
+ "aria-label": ariaLabel,
+ className,
+ defaultPosition = 50,
+ mode = "drag",
+ onPositionChange,
+ ...props
+}: Omit<React.ComponentProps<"div">, "defaultValue"> & {
+ defaultPosition?: number;
+ mode?: "drag" | "hover";
+ onPositionChange?: (position: number) => void;
+}) {
+ const t = useTranslations("core.global");
+ const position = useMotionValue(clampPosition(defaultPosition));
+ const [valueNow, setValueNow] = React.useState(position.get());
+ const isDraggingRef = React.useRef(false);
+
+ const moveTo = (next: number) => {
+ position.set(next);
+ setValueNow(next);
+ onPositionChange?.(next);
+ };
+
+ const moveToPointer = (event: React.PointerEvent<HTMLDivElement>) => {
+ moveTo(
+ positionFromPointer(
+ event.clientX,
+ event.currentTarget.getBoundingClientRect(),
+ ),
+ );
+ };
+
+ const contextValue = React.useMemo(
+ () => ({ mode, position }),
+ [mode, position],
+ );
+ const rounded = Math.round(valueNow);
+
+ return (
+ <ComparisonContext value={contextValue}>
+ <div
+ aria-label={ariaLabel ?? t("comparison_slider")}
+ aria-orientation="horizontal"
+ aria-valuemax={100}
+ aria-valuemin={0}
+ aria-valuenow={rounded}
+ aria-valuetext={`${rounded}%`}
+ className={cn(
+ "focus-visible:ring-ring/50 relative isolate w-full touch-pan-y overflow-hidden outline-none select-none focus-visible:ring-3",
+ mode === "drag" && "cursor-ew-resize",
+ className,
+ )}
+ data-slot="comparison"
+ onKeyDown={event => {
+ const next = positionFromKey(
+ event.key,
+ position.get(),
+ event.shiftKey,
+ );
+ if (next === null) return;
+
+ event.preventDefault();
+ moveTo(next);
+ }}
+ onPointerCancel={() => {
+ isDraggingRef.current = false;
+ }}
+ onPointerDown={event => {
+ if (mode !== "drag") return;
+
+ isDraggingRef.current = true;
+ event.currentTarget.setPointerCapture(event.pointerId);
+ moveToPointer(event);
+ }}
+ onPointerMove={event => {
+ if (mode === "hover" || isDraggingRef.current) moveToPointer(event);
+ }}
+ onPointerUp={() => {
+ isDraggingRef.current = false;
+ }}
+ role="slider"
+ tabIndex={0}
+ {...props}
+ />
+ </ComparisonContext>
+ );
+}
+
+function ComparisonItem({
+ className,
+ position: side,
+ ...props
+}: React.ComponentProps<typeof motion.div> & {
+ position: "left" | "right";
+}) {
+ const { position } = useComparison();
+ const clipPath = useTransform(position, value =>
+ side === "left" ? `inset(0 ${100 - value}% 0 0)` : `inset(0 0 0 ${value}%)`,
+ );
+
+ return (
+ <motion.div
+ aria-hidden="true"
+ className={cn(
+ "absolute inset-0 size-full *:size-full *:object-cover",
+ className,
+ )}
+ data-slot="comparison-item"
+ style={{ clipPath }}
+ {...props}
+ />
+ );
+}
+
+function ComparisonHandle({
+ children,
+ className,
+ ...props
+}: React.ComponentProps<typeof motion.div>) {
+ const { mode, position } = useComparison();
+ const left = useTransform(position, value => `${value}%`);
+
+ return (
+ <motion.div
+ aria-hidden="true"
+ className={cn(
+ "pointer-events-none absolute top-0 z-10 flex h-full w-10 -translate-x-1/2 items-center justify-center",
+ className,
+ )}
+ data-slot="comparison-handle"
+ style={{ left }}
+ {...props}
+ >
+ {children ?? (
+ <>
+ <div className="bg-foreground/70 absolute inset-y-0 left-1/2 w-0.5 -translate-x-1/2 shadow-sm" />
+ {mode === "drag" && (
+ <div className="bg-background text-foreground ring-foreground/20 relative flex items-center justify-center rounded-md px-0.5 py-1 shadow-sm ring-1">
+ <GripVerticalIcon className="size-4" />
+ </div>
+ )}
+ </>
+ )}
+ </motion.div>
+ );
+}
+
+export { Comparison, ComparisonHandle, ComparisonItem };
diff --git a/packages/vitnode/src/components/ui/context-menu.tsx b/packages/vitnode/src/components/ui/context-menu.tsx
index 40f73afbb..7e5eaf075 100644
--- a/packages/vitnode/src/components/ui/context-menu.tsx
+++ b/packages/vitnode/src/components/ui/context-menu.tsx
@@ -76,13 +76,13 @@ function ContextMenuContent({
align={align}
alignOffset={alignOffset}
anchor={anchor}
- className="isolate z-50"
+ className="isolate z-50 outline-none"
side={side}
sideOffset={sideOffset}
>
<ContextMenuPrimitive.Popup
className={cn(
- "bg-popover text-popover-foreground ring-foreground/10 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 z-50 max-h-(--available-height) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg p-1 shadow-lg ring-1 duration-100",
+ "bg-popover text-popover-foreground ring-foreground/10 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 z-50 max-h-(--available-height) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg p-1 shadow-lg ring-1 duration-100 outline-none",
className,
)}
data-slot="context-menu-content"
@@ -127,7 +127,7 @@ function ContextMenuSubTrigger({
return (
<ContextMenuPrimitive.SubmenuTrigger
className={cn(
- "data-highlighted:bg-accent data-highlighted:text-accent-foreground data-popup-open:bg-accent data-popup-open:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-inset:ps-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+ "data-highlighted:bg-accent data-highlighted:text-accent-foreground data-popup-open:bg-accent data-popup-open:text-accent-foreground flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-inset:ps-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
className,
)}
data-inset={inset}
@@ -159,13 +159,13 @@ function ContextMenuSubContent({
align={align}
alignOffset={alignOffset}
anchor={anchor}
- className="isolate z-50"
+ className="isolate z-50 outline-none"
side={side}
sideOffset={sideOffset}
>
<ContextMenuPrimitive.Popup
className={cn(
- "bg-popover text-popover-foreground data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 z-50 min-w-32 origin-(--transform-origin) overflow-hidden rounded-md border p-1 shadow-lg duration-100",
+ "bg-popover text-popover-foreground data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 ring-foreground/10 z-50 max-h-(--available-height) min-w-32 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg p-1 shadow-lg ring-1 duration-100 outline-none",
className,
)}
data-slot="context-menu-sub-content"
diff --git a/packages/vitnode/src/components/ui/copy-button.test.tsx b/packages/vitnode/src/components/ui/copy-button.test.tsx
new file mode 100644
index 000000000..0a1c87087
--- /dev/null
+++ b/packages/vitnode/src/components/ui/copy-button.test.tsx
@@ -0,0 +1,113 @@
+import { act, fireEvent, render, screen } from "@testing-library/react";
+import { toast } from "sonner";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+import { CopyButton } from "./copy-button";
+
+const stubClipboard = (writeText: (text: string) => Promise<void>) => {
+ const spy = vi.fn(writeText);
+ Object.defineProperty(navigator, "clipboard", {
+ configurable: true,
+ value: { writeText: spy },
+ });
+
+ return spy;
+};
+
+const clickAndFlush = async (element: HTMLElement) => {
+ await act(async () => {
+ fireEvent.click(element);
+ await Promise.resolve();
+ });
+};
+
+describe("CopyButton", () => {
+ beforeEach(() => {
+ vi.useFakeTimers();
+ });
+
+ afterEach(() => {
+ vi.useRealTimers();
+ vi.restoreAllMocks();
+ });
+
+ it("writes the content to the clipboard and announces it", async () => {
+ const writeText = stubClipboard(async () => {});
+ render(<CopyButton content="pnpm create vitnode-app" />);
+
+ await clickAndFlush(
+ screen.getByRole("button", { name: "core.global.copy" }),
+ );
+
+ expect(writeText).toHaveBeenCalledWith("pnpm create vitnode-app");
+ expect(
+ screen.getByRole("button", { name: "core.global.copied" }),
+ ).toBeTruthy();
+ expect(screen.getByRole("status").textContent).toBe("core.global.copied");
+ });
+
+ it("goes back to the copy state after the delay", async () => {
+ stubClipboard(async () => {});
+ const onCopiedChange = vi.fn();
+ render(
+ <CopyButton
+ content="hello"
+ delay={1000}
+ onCopiedChange={onCopiedChange}
+ />,
+ );
+
+ await clickAndFlush(screen.getByRole("button"));
+ expect(onCopiedChange).toHaveBeenLastCalledWith(true);
+
+ act(() => {
+ vi.advanceTimersByTime(1000);
+ });
+
+ expect(onCopiedChange).toHaveBeenLastCalledWith(false);
+ expect(
+ screen.getByRole("button", { name: "core.global.copy" }),
+ ).toBeTruthy();
+ expect(screen.getByRole("status").textContent).toBe("");
+ });
+
+ it("shows an error toast when the clipboard rejects", async () => {
+ stubClipboard(async () => Promise.reject(new Error("denied")));
+ const toastError = vi.spyOn(toast, "error");
+ render(<CopyButton content="hello" />);
+
+ await clickAndFlush(screen.getByRole("button"));
+
+ expect(toastError).toHaveBeenCalledWith("core.global.errors.title", {
+ description: "core.global.copy_failed",
+ });
+ expect(
+ screen.getByRole("button", { name: "core.global.copy" }),
+ ).toBeTruthy();
+ });
+
+ it("keeps a visible label as the accessible name", async () => {
+ stubClipboard(async () => {});
+ render(<CopyButton content="hello">Copy command</CopyButton>);
+
+ await clickAndFlush(screen.getByRole("button", { name: "Copy command" }));
+
+ expect(screen.getByRole("button", { name: "Copy command" })).toBeTruthy();
+ });
+
+ it("does not copy when the click handler prevents default", async () => {
+ const writeText = stubClipboard(async () => {});
+ render(
+ <CopyButton
+ content="hello"
+ onClick={event => {
+ event.preventDefault();
+ }}
+ />,
+ );
+
+ await clickAndFlush(screen.getByRole("button"));
+
+ expect(writeText).not.toHaveBeenCalled();
+ });
+});
diff --git a/packages/vitnode/src/components/ui/copy-button.tsx b/packages/vitnode/src/components/ui/copy-button.tsx
new file mode 100644
index 000000000..54465316c
--- /dev/null
+++ b/packages/vitnode/src/components/ui/copy-button.tsx
@@ -0,0 +1,180 @@
+import type { VariantProps } from "class-variance-authority";
+
+import { Button as ButtonPrimitive } from "@base-ui/react/button";
+import { cn } from "cn";
+import { CopyIcon } from "lucide-react";
+import { AnimatePresence, motion, useReducedMotion } from "motion/react";
+import React from "react";
+import { toast } from "sonner";
+import { useTranslations } from "use-intl";
+
+import { buttonVariants } from "./button";
+
+const checkPath = "M4 12l5 5 11-11";
+
+type CopyButtonProps = Omit<
+ ButtonPrimitive.Props,
+ "children" | "className" | "content"
+> &
+ VariantProps<typeof buttonVariants> & {
+ children?: React.ReactNode;
+ className?: string;
+ content: string;
+ copied?: boolean;
+ delay?: number;
+ onCopiedChange?: (copied: boolean) => void;
+ };
+
+const useIconMotion = () => {
+ const shouldReduceMotion = useReducedMotion();
+
+ if (shouldReduceMotion) {
+ return {
+ hidden: { opacity: 0 },
+ visible: { opacity: 1 },
+ transition: { duration: 0.15 },
+ check: { initial: { pathLength: 1 }, transition: { duration: 0 } },
+ };
+ }
+
+ return {
+ hidden: { opacity: 0, scale: 0.4, filter: "blur(4px)" },
+ visible: { opacity: 1, scale: 1, filter: "blur(0px)" },
+ transition: { type: "spring", duration: 0.3, bounce: 0 } as const,
+ check: {
+ initial: { pathLength: 0 },
+ transition: {
+ type: "spring",
+ duration: 0.35,
+ bounce: 0,
+ delay: 0.05,
+ } as const,
+ },
+ };
+};
+
+const CopiedCheck = ({
+ initial,
+ transition,
+}: Pick<
+ React.ComponentProps<typeof motion.path>,
+ "initial" | "transition"
+>) => (
+ <svg
+ aria-hidden="true"
+ fill="none"
+ stroke="currentColor"
+ strokeLinecap="round"
+ strokeLinejoin="round"
+ strokeWidth={2}
+ viewBox="0 0 24 24"
+ >
+ <motion.path
+ animate={{ pathLength: 1 }}
+ d={checkPath}
+ initial={initial}
+ transition={transition}
+ />
+ </svg>
+);
+
+function CopyButton({
+ "aria-label": ariaLabel,
+ children,
+ className,
+ content,
+ copied,
+ delay = 3000,
+ onClick,
+ onCopiedChange,
+ size,
+ variant = "outline",
+ ...props
+}: CopyButtonProps) {
+ const t = useTranslations("core.global");
+ const [uncontrolledCopied, setUncontrolledCopied] = React.useState(false);
+ const isCopied = copied ?? uncontrolledCopied;
+ const iconMotion = useIconMotion();
+
+ const setCopied = (next: boolean) => {
+ setUncontrolledCopied(next);
+ onCopiedChange?.(next);
+ };
+
+ const resetCopied = React.useEffectEvent(() => {
+ setCopied(false);
+ });
+
+ React.useEffect(() => {
+ if (!isCopied) return;
+
+ const timer = setTimeout(resetCopied, delay);
+
+ return () => {
+ clearTimeout(timer);
+ };
+ }, [isCopied, delay]);
+
+ const copyToClipboard = async () => {
+ try {
+ await navigator.clipboard.writeText(content);
+ setCopied(true);
+ } catch {
+ toast.error(t("errors.title"), { description: t("copy_failed") });
+ }
+ };
+
+ const hasLabel = children !== undefined && children !== null;
+ const stateLabel = isCopied ? t("copied") : t("copy");
+
+ return (
+ <>
+ <ButtonPrimitive
+ aria-label={ariaLabel ?? (hasLabel ? undefined : stateLabel)}
+ className={cn(
+ buttonVariants({
+ variant,
+ size: size ?? (hasLabel ? "default" : "icon"),
+ }),
+ "relative",
+ className,
+ )}
+ data-copied={isCopied ? "" : undefined}
+ data-slot="copy-button"
+ onClick={event => {
+ onClick?.(event);
+ if (event.defaultPrevented) return;
+
+ void copyToClipboard();
+ }}
+ type="button"
+ {...props}
+ >
+ <AnimatePresence initial={false} mode="popLayout">
+ <motion.span
+ animate={iconMotion.visible}
+ className="flex items-center justify-center"
+ data-icon={hasLabel ? "inline-start" : undefined}
+ data-slot="copy-button-icon"
+ exit={iconMotion.hidden}
+ initial={iconMotion.hidden}
+ key={isCopied ? "check" : "copy"}
+ transition={iconMotion.transition}
+ >
+ {isCopied ? (
+ <CopiedCheck {...iconMotion.check} />
+ ) : (
+ <CopyIcon aria-hidden="true" />
+ )}
+ </motion.span>
+ </AnimatePresence>
+ {children}
+ </ButtonPrimitive>
+ <span aria-live="polite" className="sr-only" role="status">
+ {isCopied ? t("copied") : ""}
+ </span>
+ </>
+ );
+}
+
+export { CopyButton, type CopyButtonProps };
diff --git a/packages/vitnode/src/components/ui/counter.test.tsx b/packages/vitnode/src/components/ui/counter.test.tsx
new file mode 100644
index 000000000..11d338596
--- /dev/null
+++ b/packages/vitnode/src/components/ui/counter.test.tsx
@@ -0,0 +1,93 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import React from "react";
+import { describe, expect, it, vi } from "vitest";
+
+import { Counter } from "./counter";
+
+const increase = () =>
+ screen.getByRole("button", { name: "core.global.increase" });
+const decrease = () =>
+ screen.getByRole("button", { name: "core.global.decrease" });
+const shownValue = () =>
+ screen.getByRole("status").querySelector("[data-slot=sliding-number-value]")
+ ?.textContent;
+
+describe("Counter", () => {
+ it("counts up and down by the step", () => {
+ const onValueChange = vi.fn();
+ render(<Counter defaultValue={2} onValueChange={onValueChange} step={5} />);
+
+ fireEvent.click(increase());
+ expect(onValueChange).toHaveBeenLastCalledWith(7);
+ expect(shownValue()).toBe("7");
+
+ fireEvent.click(decrease());
+ fireEvent.click(decrease());
+ expect(onValueChange).toHaveBeenLastCalledWith(-3);
+ });
+
+ it("stops at min and max and disables the button there", () => {
+ const onValueChange = vi.fn();
+ render(
+ <Counter
+ defaultValue={1}
+ max={2}
+ min={0}
+ onValueChange={onValueChange}
+ />,
+ );
+
+ fireEvent.click(increase());
+ expect(increase().hasAttribute("disabled")).toBe(true);
+
+ fireEvent.click(decrease());
+ fireEvent.click(decrease());
+ expect(decrease().hasAttribute("disabled")).toBe(true);
+ expect(onValueChange.mock.calls.map(([value]) => value)).toEqual([2, 1, 0]);
+ });
+
+ it("clamps a step that would jump past the limit", () => {
+ const onValueChange = vi.fn();
+ render(
+ <Counter
+ defaultValue={8}
+ max={10}
+ onValueChange={onValueChange}
+ step={5}
+ />,
+ );
+
+ fireEvent.click(increase());
+
+ expect(onValueChange).toHaveBeenCalledWith(10);
+ });
+
+ it("follows the value prop when controlled", () => {
+ const Controlled = () => {
+ const [value, setValue] = React.useState(3);
+
+ return (
+ <>
+ <Counter onValueChange={setValue} value={value} />
+ <button onClick={() => setValue(40)} type="button">
+ reset
+ </button>
+ </>
+ );
+ };
+ render(<Controlled />);
+
+ fireEvent.click(increase());
+ expect(shownValue()).toBe("4");
+
+ fireEvent.click(screen.getByRole("button", { name: "reset" }));
+ expect(shownValue()).toBe("40");
+ });
+
+ it("disables both buttons when disabled", () => {
+ render(<Counter disabled />);
+
+ expect(increase().hasAttribute("disabled")).toBe(true);
+ expect(decrease().hasAttribute("disabled")).toBe(true);
+ });
+});
diff --git a/packages/vitnode/src/components/ui/counter.tsx b/packages/vitnode/src/components/ui/counter.tsx
new file mode 100644
index 000000000..0af14cd15
--- /dev/null
+++ b/packages/vitnode/src/components/ui/counter.tsx
@@ -0,0 +1,90 @@
+import { cn } from "cn";
+import { MinusIcon, PlusIcon } from "lucide-react";
+import React from "react";
+import { useTranslations } from "use-intl";
+
+import { Button } from "./button";
+import { SlidingNumber } from "./sliding-number";
+
+const clampCounterValue = (value: number, min: number, max: number) =>
+ Math.min(max, Math.max(min, value));
+
+function Counter({
+ className,
+ defaultValue = 0,
+ disabled = false,
+ max = Number.POSITIVE_INFINITY,
+ min = Number.NEGATIVE_INFINITY,
+ onValueChange,
+ step = 1,
+ value,
+ ...props
+}: Omit<React.ComponentProps<"div">, "defaultValue" | "onChange"> & {
+ defaultValue?: number;
+ disabled?: boolean;
+ max?: number;
+ min?: number;
+ onValueChange?: (value: number) => void;
+ step?: number;
+ value?: number;
+}) {
+ const t = useTranslations("core.global");
+ const [uncontrolledValue, setUncontrolledValue] = React.useState(() =>
+ clampCounterValue(defaultValue, min, max),
+ );
+ const current = value ?? uncontrolledValue;
+
+ const change = (direction: -1 | 1) => {
+ const next = clampCounterValue(current + direction * step, min, max);
+ if (next === current) return;
+
+ setUncontrolledValue(next);
+ onValueChange?.(next);
+ };
+
+ return (
+ <div
+ className={cn(
+ "bg-card inline-flex items-center gap-1 rounded-lg border p-1 shadow-xs",
+ className,
+ )}
+ data-slot="counter"
+ role="group"
+ {...props}
+ >
+ <Button
+ aria-label={t("decrease")}
+ className="transition-transform active:scale-90 motion-reduce:transition-none"
+ disabled={disabled || current <= min}
+ onClick={() => {
+ change(-1);
+ }}
+ size="icon-sm"
+ variant="ghost"
+ >
+ <MinusIcon />
+ </Button>
+ <output
+ aria-live="polite"
+ className="flex min-w-8 justify-center px-1 text-sm font-medium"
+ data-slot="counter-value"
+ >
+ <SlidingNumber value={current} />
+ </output>
+ <Button
+ aria-label={t("increase")}
+ className="transition-transform active:scale-90 motion-reduce:transition-none"
+ disabled={disabled || current >= max}
+ onClick={() => {
+ change(1);
+ }}
+ size="icon-sm"
+ variant="ghost"
+ >
+ <PlusIcon />
+ </Button>
+ </div>
+ );
+}
+
+export { Counter };
diff --git a/packages/vitnode/src/components/ui/dialog.tsx b/packages/vitnode/src/components/ui/dialog.tsx
index 7cacc1995..eae3a255d 100644
--- a/packages/vitnode/src/components/ui/dialog.tsx
+++ b/packages/vitnode/src/components/ui/dialog.tsx
@@ -222,7 +222,7 @@ function DialogFooter({
return (
<div
className={cn(
- "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+ "bg-muted/50 -mx-6 -mb-6 flex flex-col-reverse gap-2 border-t px-6 py-4 sm:flex-row sm:justify-end",
className,
)}
data-slot="dialog-footer"
diff --git a/packages/vitnode/src/components/ui/editor.tsx b/packages/vitnode/src/components/ui/editor.tsx
index 0c4fd9e61..798c112ee 100644
--- a/packages/vitnode/src/components/ui/editor.tsx
+++ b/packages/vitnode/src/components/ui/editor.tsx
@@ -2,7 +2,7 @@ import React from "react";
import type { TipTapEditorProps } from "@/components/tiptap/tiptap-editor";
-import { Loader } from "./loader";
+import { Spinner } from "./spinner";
const TipTapEditor = React.lazy(async () =>
import("@/components/tiptap/tiptap-editor").then(module => ({
@@ -21,10 +21,21 @@ export const Editor = (props: TipTapEditorProps) => {
getIsHydratedOnServer,
);
- if (!isHydrated) return <Loader />;
+ if (!isHydrated)
+ return (
+ <div className="flex items-center justify-center">
+ <Spinner size="xl" />
+ </div>
+ );
return (
- <React.Suspense fallback={<Loader />}>
+ <React.Suspense
+ fallback={
+ <div className="flex items-center justify-center">
+ <Spinner size="xl" />
+ </div>
+ }
+ >
<TipTapEditor {...props} />
</React.Suspense>
);
diff --git a/packages/vitnode/src/components/ui/emoji-icon-picker.tsx b/packages/vitnode/src/components/ui/emoji-icon-picker.tsx
index 661bab510..071123ea7 100644
--- a/packages/vitnode/src/components/ui/emoji-icon-picker.tsx
+++ b/packages/vitnode/src/components/ui/emoji-icon-picker.tsx
@@ -9,8 +9,8 @@ import { humanizeIconName } from "@/lib/emoji-icon";
import { Button } from "./button";
import { EmojiIcon } from "./emoji-icon";
-import { Loader } from "./loader";
import { Popover, PopoverContent, PopoverTrigger } from "./popover";
+import { Spinner } from "./spinner";
const EmojiIconPickerPanel = React.lazy(async () =>
import("./emoji-icon-picker-panel").then(module => ({
@@ -78,7 +78,9 @@ export const EmojiIconPicker = ({
<React.Suspense
fallback={
<div className="flex h-108 items-center justify-center">
- <Loader />
+ <div className="flex items-center justify-center">
+ <Spinner size="xl" />
+ </div>
</div>
}
>
diff --git a/packages/vitnode/src/components/ui/field.tsx b/packages/vitnode/src/components/ui/field.tsx
index f768c9878..a089727af 100644
--- a/packages/vitnode/src/components/ui/field.tsx
+++ b/packages/vitnode/src/components/ui/field.tsx
@@ -103,7 +103,7 @@ function FieldLabel({
return (
<Label
className={cn(
- "group/field-label peer/field-label has-data-checked:border-primary/30 has-data-checked:bg-primary/5 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10 flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border *:data-[slot=field]:p-3",
+ "group/field-label peer/field-label has-data-checked:border-primary/30 has-data-checked:bg-primary/5 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10 has-[>[data-slot=field]]:not-has-[:disabled,[data-disabled]]:hover:bg-muted/50 has-[>[data-slot=field]]:has-[:focus-visible]:border-ring has-[>[data-slot=field]]:has-[:focus-visible]:ring-ring/50 flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border has-[>[data-slot=field]]:has-[:focus-visible]:ring-3 *:data-[slot=field]:p-3",
"has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col",
className,
)}
diff --git a/packages/vitnode/src/components/ui/image-zoom.test.ts b/packages/vitnode/src/components/ui/image-zoom.test.ts
new file mode 100644
index 000000000..c14453552
--- /dev/null
+++ b/packages/vitnode/src/components/ui/image-zoom.test.ts
@@ -0,0 +1,28 @@
+import { describe, expect, it } from "vitest";
+
+import { fitZoomedRect, zoomOrigin } from "./image-zoom";
+
+describe("fitZoomedRect", () => {
+ it("fills the width of a tall viewport and centres vertically", () => {
+ expect(fitZoomedRect(2, { height: 1000, padding: 10, width: 400 })).toEqual(
+ { height: 190, left: 10, top: 405, width: 380 },
+ );
+ });
+
+ it("fills the height of a wide viewport and centres horizontally", () => {
+ expect(fitZoomedRect(1, { height: 500, padding: 50, width: 1200 })).toEqual(
+ { height: 400, left: 400, top: 50, width: 400 },
+ );
+ });
+});
+
+describe("zoomOrigin", () => {
+ it("moves and shrinks the zoomed image back onto the thumbnail", () => {
+ expect(
+ zoomOrigin(
+ { height: 50, left: 100, top: 300, width: 100 },
+ { height: 200, left: 40, top: 60, width: 400 },
+ ),
+ ).toEqual({ scale: 0.25, x: 60, y: 240 });
+ });
+});
diff --git a/packages/vitnode/src/components/ui/image-zoom.tsx b/packages/vitnode/src/components/ui/image-zoom.tsx
new file mode 100644
index 000000000..498f6d575
--- /dev/null
+++ b/packages/vitnode/src/components/ui/image-zoom.tsx
@@ -0,0 +1,171 @@
+import { Dialog as DialogPrimitive } from "@base-ui/react/dialog";
+import { cn } from "cn";
+import { XIcon } from "lucide-react";
+import { motion, useReducedMotion } from "motion/react";
+import React from "react";
+import { useTranslations } from "use-intl";
+
+const ZOOM_TRANSITION = { type: "spring", duration: 0.4, bounce: 0 } as const;
+const ZOOMED = { scale: 1, x: 0, y: 0 };
+
+interface Rect {
+ height: number;
+ left: number;
+ top: number;
+ width: number;
+}
+
+export const fitZoomedRect = (
+ aspectRatio: number,
+ viewport: { height: number; padding: number; width: number },
+): Rect => {
+ const maxWidth = viewport.width - viewport.padding * 2;
+ const maxHeight = viewport.height - viewport.padding * 2;
+ const width = Math.min(maxWidth, maxHeight * aspectRatio);
+ const height = width / aspectRatio;
+
+ return {
+ height,
+ left: (viewport.width - width) / 2,
+ top: (viewport.height - height) / 2,
+ width,
+ };
+};
+
+export const zoomOrigin = (from: Rect, to: Rect) => ({
+ scale: from.width / to.width,
+ x: from.left - to.left,
+ y: from.top - to.top,
+});
+
+const measureZoom = (image: HTMLImageElement) => {
+ const thumb = image.getBoundingClientRect();
+ const padding = window.matchMedia("(min-width: 48rem)").matches ? 40 : 16;
+ const target = fitZoomedRect(thumb.width / thumb.height, {
+ height: window.innerHeight,
+ padding,
+ width: window.innerWidth,
+ });
+
+ return { origin: zoomOrigin(thumb, target), target };
+};
+
+function ImageZoom({
+ alt,
+ className,
+ imageClassName,
+ src,
+ zoomSrc,
+}: {
+ alt: string;
+ className?: string;
+ imageClassName?: string;
+ src: string;
+ zoomSrc?: string;
+}) {
+ const t = useTranslations("core.global");
+ const shouldReduceMotion = useReducedMotion();
+ const thumbRef = React.useRef<HTMLImageElement>(null);
+ const [zoom, setZoom] = React.useState<null | ReturnType<typeof measureZoom>>(
+ null,
+ );
+ const [isClosing, setIsClosing] = React.useState(false);
+
+ const open = () => {
+ if (!thumbRef.current) return;
+
+ setIsClosing(false);
+ setZoom(measureZoom(thumbRef.current));
+ };
+
+ const close = () => {
+ if (shouldReduceMotion || !thumbRef.current || !zoom) {
+ setZoom(null);
+
+ return;
+ }
+
+ setZoom({ ...zoom, origin: measureZoom(thumbRef.current).origin });
+ setIsClosing(true);
+ };
+
+ return (
+ <DialogPrimitive.Root
+ onOpenChange={next => {
+ if (next) {
+ open();
+
+ return;
+ }
+
+ close();
+ }}
+ open={zoom !== null}
+ >
+ <DialogPrimitive.Trigger
+ className={cn(
+ "focus-visible:ring-ring/50 relative block cursor-zoom-in rounded-md outline-none focus-visible:ring-3",
+ className,
+ )}
+ data-slot="image-zoom"
+ >
+ <img
+ alt={alt}
+ className={cn(zoom && "invisible", imageClassName)}
+ ref={thumbRef}
+ src={src}
+ />
+ </DialogPrimitive.Trigger>
+
+ <DialogPrimitive.Portal>
+ <DialogPrimitive.Backdrop
+ className={cn(
+ "bg-background/80 fixed inset-0 z-50 backdrop-blur-md transition-opacity duration-300 data-ending-style:opacity-0 data-starting-style:opacity-0 motion-reduce:transition-none",
+ isClosing && "opacity-0",
+ )}
+ />
+ <DialogPrimitive.Popup
+ aria-label={alt}
+ className="fixed inset-0 z-50 cursor-zoom-out outline-none"
+ data-slot="image-zoom-popup"
+ onClick={close}
+ >
+ {zoom && (
+ <motion.img
+ alt={alt}
+ animate={isClosing ? zoom.origin : ZOOMED}
+ className="absolute rounded-md object-contain shadow-xl"
+ initial={shouldReduceMotion ? false : zoom.origin}
+ onAnimationComplete={() => {
+ if (isClosing) setZoom(null);
+ }}
+ src={zoomSrc ?? src}
+ style={{
+ height: zoom.target.height,
+ left: zoom.target.left,
+ originX: 0,
+ originY: 0,
+ top: zoom.target.top,
+ width: zoom.target.width,
+ }}
+ transition={
+ shouldReduceMotion ? { duration: 0 } : ZOOM_TRANSITION
+ }
+ />
+ )}
+ <DialogPrimitive.Close
+ aria-label={t("close")}
+ className={cn(
+ "bg-foreground/70 text-background focus-visible:ring-ring/50 absolute end-4 top-4 flex size-10 cursor-pointer items-center justify-center rounded-full transition-opacity outline-none focus-visible:ring-3",
+ isClosing && "opacity-0",
+ )}
+ >
+ <XIcon className="size-5" />
+ </DialogPrimitive.Close>
+ </DialogPrimitive.Popup>
+ </DialogPrimitive.Portal>
+ </DialogPrimitive.Root>
+ );
+}
+
+export { ImageZoom };
diff --git a/packages/vitnode/src/components/ui/input-otp.tsx b/packages/vitnode/src/components/ui/input-otp.tsx
index 7edb76d7d..6c1754b67 100644
--- a/packages/vitnode/src/components/ui/input-otp.tsx
+++ b/packages/vitnode/src/components/ui/input-otp.tsx
@@ -1,8 +1,17 @@
import { cn } from "cn";
-import { OTPInput, OTPInputContext } from "input-otp";
-import { MinusIcon } from "lucide-react";
+import {
+ OTPInput,
+ OTPInputContext,
+ REGEXP_ONLY_CHARS,
+ REGEXP_ONLY_DIGITS,
+ REGEXP_ONLY_DIGITS_AND_CHARS,
+} from "input-otp";
+import { AnimatePresence, motion, useReducedMotion } from "motion/react";
import React from "react";
+const slotValueHidden = { opacity: 0, y: 8, scale: 0.8 };
+const slotValueVisible = { opacity: 1, y: 0, scale: 1 };
+
function InputOTP({
className,
containerClassName,
@@ -14,7 +23,7 @@ function InputOTP({
<OTPInput
className={cn("disabled:cursor-not-allowed", className)}
containerClassName={cn(
- "cn-input-otp flex items-center has-disabled:opacity-50",
+ "cn-input-otp group/input-otp flex items-center gap-2 has-disabled:opacity-50",
containerClassName,
)}
data-slot="input-otp"
@@ -27,10 +36,7 @@ function InputOTP({
function InputOTPGroup({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
- className={cn(
- "has-aria-invalid:border-destructive has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 flex items-center rounded-md has-aria-invalid:ring-3",
- className,
- )}
+ className={cn("flex min-w-0 items-center gap-2", className)}
data-slot="input-otp-group"
{...props}
/>
@@ -46,38 +52,66 @@ function InputOTPSlot({
}) {
const inputOTPContext = React.use(OTPInputContext);
const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {};
+ const shouldReduceMotion = useReducedMotion();
return (
<div
+ aria-hidden="true"
className={cn(
- "border-input aria-invalid:border-destructive data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:border-destructive data-[active=true]:aria-invalid:ring-destructive/20 dark:bg-input/30 dark:data-[active=true]:aria-invalid:ring-destructive/40 relative flex size-9 items-center justify-center border-y border-e text-sm shadow-xs transition-all outline-none first:rounded-s-md first:border-s last:rounded-e-md data-[active=true]:z-10 data-[active=true]:ring-3",
+ "border-input bg-card dark:bg-input/30 data-active:border-ring data-active:ring-ring/50 group-has-aria-invalid/input-otp:border-destructive group-has-aria-invalid/input-otp:data-active:ring-destructive/20 dark:group-has-aria-invalid/input-otp:data-active:ring-destructive/40 relative flex h-10 w-10 min-w-0 items-center justify-center rounded-md border text-lg font-medium tabular-nums shadow-xs transition-[border-color,box-shadow] duration-150 ease-out outline-none data-active:z-10 data-active:ring-3 motion-reduce:transition-none",
className,
)}
- data-active={isActive}
+ data-active={isActive ? "" : undefined}
+ data-filled={char ? "" : undefined}
data-slot="input-otp-slot"
{...props}
>
- {char}
- {hasFakeCaret && (
+ <AnimatePresence initial={false}>
+ {char ? (
+ <motion.span
+ animate={slotValueVisible}
+ className="origin-bottom"
+ data-slot="input-otp-slot-value"
+ initial={shouldReduceMotion ? false : slotValueHidden}
+ key={char}
+ transition={{ duration: 0.25, ease: [0.22, 1, 0.36, 1] }}
+ >
+ {char}
+ </motion.span>
+ ) : null}
+ </AnimatePresence>
+ {hasFakeCaret ? (
<div className="pointer-events-none absolute inset-0 flex items-center justify-center">
- <div className="animate-caret-blink bg-foreground h-4 w-px duration-1000" />
+ <div className="animate-caret-blink bg-foreground h-4 w-0.5 rounded-full" />
</div>
- )}
+ ) : null}
</div>
);
}
-function InputOTPSeparator({ ...props }: React.ComponentProps<"div">) {
+function InputOTPSeparator({
+ className,
+ ...props
+}: React.ComponentProps<"div">) {
return (
<div
- className="flex items-center [&_svg:not([class*='size-'])]:size-4"
+ aria-hidden="true"
+ className={cn(
+ "bg-muted-foreground/40 h-0.5 w-2 shrink-0 rounded-full",
+ className,
+ )}
data-slot="input-otp-separator"
- role="separator"
{...props}
- >
- <MinusIcon />
- </div>
+ />
);
}
-export { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot };
+export {
+ InputOTP,
+ InputOTPGroup,
+ InputOTPSeparator,
+ InputOTPSlot,
+ REGEXP_ONLY_CHARS,
+ REGEXP_ONLY_DIGITS,
+ REGEXP_ONLY_DIGITS_AND_CHARS,
+};
diff --git a/packages/vitnode/src/components/ui/label.tsx b/packages/vitnode/src/components/ui/label.tsx
index 83030697e..c4afcdf25 100644
--- a/packages/vitnode/src/components/ui/label.tsx
+++ b/packages/vitnode/src/components/ui/label.tsx
@@ -5,7 +5,7 @@ function Label({ className, ...props }: React.ComponentProps<"label">) {
return (
<label
className={cn(
- "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+ "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50 peer-data-disabled:cursor-not-allowed peer-data-disabled:opacity-50",
className,
)}
data-slot="label"
diff --git a/packages/vitnode/src/components/ui/loader.tsx b/packages/vitnode/src/components/ui/loader.tsx
deleted file mode 100644
index dcce9d651..000000000
--- a/packages/vitnode/src/components/ui/loader.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import { cn } from "cn";
-import { Loader2 } from "lucide-react";
-
-export const Loader = ({
- className,
- small,
-}: {
- className?: string;
- small?: boolean;
-}) => {
- if (small) {
- return <Loader2 className={cn("size-5 animate-spin", className)} />;
- }
-
- return (
- <div className={cn("flex items-center justify-center", className)}>
- <Loader2 className={cn("size-10 animate-spin")} />
- </div>
- );
-};
diff --git a/packages/vitnode/src/components/ui/marker.tsx b/packages/vitnode/src/components/ui/marker.tsx
new file mode 100644
index 000000000..08f095a5f
--- /dev/null
+++ b/packages/vitnode/src/components/ui/marker.tsx
@@ -0,0 +1,73 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "cn";
+import * as React from "react";
+
+const markerVariants = cva(
+ "group/marker text-muted-foreground [a]:hover:text-foreground relative flex min-h-4 w-full items-center gap-2 text-start text-sm [&_svg:not([class*='size-'])]:size-4 [a]:underline [a]:underline-offset-3",
+ {
+ variants: {
+ variant: {
+ default: "",
+ separator:
+ "before:bg-border after:bg-border before:me-1 before:h-px before:min-w-0 before:flex-1 after:ms-1 after:h-px after:min-w-0 after:flex-1",
+ border: "border-border border-b pb-2",
+ },
+ },
+ defaultVariants: {
+ variant: "default",
+ },
+ },
+);
+
+function Marker({
+ className,
+ variant = "default",
+ render,
+ ...props
+}: useRender.ComponentProps<"div"> & VariantProps<typeof markerVariants>) {
+ return useRender({
+ defaultTagName: "div",
+ props: mergeProps<"div">(
+ {
+ className: cn(markerVariants({ variant }), className),
+ },
+ props,
+ ),
+ render,
+ state: {
+ slot: "marker",
+ variant,
+ },
+ });
+}
+
+function MarkerIcon({ className, ...props }: React.ComponentProps<"span">) {
+ return (
+ <span
+ aria-hidden="true"
+ className={cn(
+ "size-4 shrink-0 [&_svg:not([class*='size-'])]:size-4",
+ className,
+ )}
+ data-slot="marker-icon"
+ {...props}
+ />
+ );
+}
+
+function MarkerContent({ className, ...props }: React.ComponentProps<"span">) {
+ return (
+ <span
+ className={cn(
+ "*:[a]:hover:text-foreground min-w-0 wrap-break-word group-data-[variant=separator]/marker:flex-none group-data-[variant=separator]/marker:text-center *:[a]:underline *:[a]:underline-offset-3",
+ className,
+ )}
+ data-slot="marker-content"
+ {...props}
+ />
+ );
+}
+
+export { Marker, MarkerContent, MarkerIcon, markerVariants };
diff --git a/packages/vitnode/src/components/ui/menubar.tsx b/packages/vitnode/src/components/ui/menubar.tsx
index baf47d332..feefb3bb5 100644
--- a/packages/vitnode/src/components/ui/menubar.tsx
+++ b/packages/vitnode/src/components/ui/menubar.tsx
@@ -53,7 +53,7 @@ function MenubarTrigger({
return (
<MenuPrimitive.Trigger
className={cn(
- "hover:bg-muted data-popup-open:bg-muted flex items-center rounded-sm px-2 py-1 text-sm font-medium outline-hidden select-none",
+ "hover:bg-muted focus-visible:bg-muted data-popup-open:bg-muted flex items-center rounded-sm px-2 py-1 text-sm font-medium outline-hidden select-none",
className,
)}
data-slot="menubar-trigger"
@@ -81,13 +81,13 @@ function MenubarContent({
align={align}
alignOffset={alignOffset}
anchor={anchor}
- className="isolate z-50"
+ className="isolate z-50 outline-none"
side={side}
sideOffset={sideOffset}
>
<MenuPrimitive.Popup
className={cn(
- "bg-popover text-popover-foreground ring-foreground/10 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 z-50 min-w-36 origin-(--transform-origin) overflow-hidden rounded-lg p-1 shadow-lg ring-1 duration-100",
+ "bg-popover text-popover-foreground ring-foreground/10 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 z-50 max-h-(--available-height) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg p-1 shadow-lg ring-1 duration-100 outline-none",
className,
)}
data-slot="menubar-content"
@@ -134,7 +134,7 @@ function MenubarCheckboxItem({
<MenuPrimitive.CheckboxItem
checked={checked}
className={cn(
- "data-highlighted:bg-accent data-highlighted:text-accent-foreground data-highlighted:**:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-md py-1.5 ps-8 pe-2 text-sm outline-hidden select-none data-disabled:pointer-events-none data-inset:ps-8 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+ "data-highlighted:bg-accent data-highlighted:text-accent-foreground data-highlighted:**:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 ps-8 pe-2 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:ps-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
className,
)}
data-inset={inset}
@@ -165,7 +165,7 @@ function MenubarRadioItem({
return (
<MenuPrimitive.RadioItem
className={cn(
- "data-highlighted:bg-accent data-highlighted:text-accent-foreground data-highlighted:**:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-md py-1.5 ps-8 pe-2 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:ps-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+ "data-highlighted:bg-accent data-highlighted:text-accent-foreground data-highlighted:**:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 ps-8 pe-2 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:ps-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
className,
)}
data-inset={inset}
@@ -251,7 +251,7 @@ function MenubarSubTrigger({
return (
<MenuPrimitive.SubmenuTrigger
className={cn(
- "data-highlighted:bg-accent data-highlighted:text-accent-foreground data-popup-open:bg-accent data-popup-open:text-accent-foreground flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none select-none data-inset:ps-8 [&_svg:not([class*='size-'])]:size-4",
+ "data-highlighted:bg-accent data-highlighted:text-accent-foreground data-popup-open:bg-accent data-popup-open:text-accent-foreground flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:ps-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
className,
)}
data-inset={inset}
@@ -283,13 +283,13 @@ function MenubarSubContent({
align={align}
alignOffset={alignOffset}
anchor={anchor}
- className="isolate z-50"
+ className="isolate z-50 outline-none"
side={side}
sideOffset={sideOffset}
>
<MenuPrimitive.Popup
className={cn(
- "bg-popover text-popover-foreground ring-foreground/10 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 z-50 min-w-32 origin-(--transform-origin) overflow-hidden rounded-lg p-1 shadow-lg ring-1 duration-100",
+ "bg-popover text-popover-foreground ring-foreground/10 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 z-50 max-h-(--available-height) min-w-32 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg p-1 shadow-lg ring-1 duration-100 outline-none",
className,
)}
data-slot="menubar-sub-content"
diff --git a/packages/vitnode/src/components/ui/message.tsx b/packages/vitnode/src/components/ui/message.tsx
new file mode 100644
index 000000000..b779f18d9
--- /dev/null
+++ b/packages/vitnode/src/components/ui/message.tsx
@@ -0,0 +1,91 @@
+import { cn } from "cn";
+import * as React from "react";
+
+function MessageGroup({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+ <div
+ className={cn("flex min-w-0 flex-col gap-2", className)}
+ data-slot="message-group"
+ {...props}
+ />
+ );
+}
+
+function Message({
+ className,
+ align = "start",
+ ...props
+}: React.ComponentProps<"div"> & { align?: "end" | "start" }) {
+ return (
+ <div
+ className={cn(
+ "group/message relative flex w-full min-w-0 gap-2 text-sm data-[align=end]:flex-row-reverse",
+ className,
+ )}
+ data-align={align}
+ data-slot="message"
+ {...props}
+ />
+ );
+}
+
+function MessageAvatar({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+ <div
+ className={cn(
+ "bg-muted flex w-fit min-w-8 shrink-0 items-center justify-center self-end overflow-hidden rounded-full group-has-data-[slot=message-footer]/message:-translate-y-8",
+ className,
+ )}
+ data-slot="message-avatar"
+ {...props}
+ />
+ );
+}
+
+function MessageContent({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+ <div
+ className={cn(
+ "flex w-full min-w-0 flex-col gap-2.5 wrap-break-word group-data-[align=end]/message:*:data-slot:self-end",
+ className,
+ )}
+ data-slot="message-content"
+ {...props}
+ />
+ );
+}
+
+function MessageHeader({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+ <div
+ className={cn(
+ "text-muted-foreground flex max-w-full min-w-0 items-center px-3 text-xs font-medium group-has-data-[variant=ghost]/message:px-0",
+ className,
+ )}
+ data-slot="message-header"
+ {...props}
+ />
+ );
+}
+
+function MessageFooter({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+ <div
+ className={cn(
+ "text-muted-foreground flex max-w-full min-w-0 items-center px-3 text-xs font-medium group-has-data-[variant=ghost]/message:px-0 group-data-[align=end]/message:justify-end",
+ className,
+ )}
+ data-slot="message-footer"
+ {...props}
+ />
+ );
+}
+
+export {
+ Message,
+ MessageAvatar,
+ MessageContent,
+ MessageFooter,
+ MessageGroup,
+ MessageHeader,
+};
diff --git a/packages/vitnode/src/components/ui/number-field.test.tsx b/packages/vitnode/src/components/ui/number-field.test.tsx
new file mode 100644
index 000000000..620998db8
--- /dev/null
+++ b/packages/vitnode/src/components/ui/number-field.test.tsx
@@ -0,0 +1,136 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+
+import {
+ NumberField,
+ NumberFieldDecrement,
+ NumberFieldGroup,
+ NumberFieldIncrement,
+ NumberFieldInput,
+ NumberFieldScrubArea,
+} from "./number-field";
+
+const renderNumberField = (
+ props: React.ComponentProps<typeof NumberField> = {},
+) =>
+ render(
+ <NumberField id="amount" {...props}>
+ <NumberFieldScrubArea htmlFor="amount" label="Amount" />
+ <NumberFieldGroup>
+ <NumberFieldDecrement />
+ <NumberFieldInput />
+ <NumberFieldIncrement />
+ </NumberFieldGroup>
+ </NumberField>,
+ );
+
+const input = () => screen.getByLabelText<HTMLInputElement>("Amount");
+const increase = () =>
+ screen.getByRole("button", { name: "core.global.increase" });
+const decrease = () =>
+ screen.getByRole("button", { name: "core.global.decrease" });
+
+const pressButton = (button: HTMLElement) => {
+ fireEvent.pointerDown(button, { button: 0, pointerType: "mouse" });
+ fireEvent.pointerUp(button, { button: 0, pointerType: "mouse" });
+ fireEvent.click(button, { detail: 1 });
+};
+
+const changedValues = (onValueChange: ReturnType<typeof vi.fn>) =>
+ onValueChange.mock.calls.map(([value]) => value as null | number);
+
+describe("NumberField", () => {
+ it("steps up and down by the step with the buttons", () => {
+ const onValueChange = vi.fn();
+ renderNumberField({ defaultValue: 10, onValueChange, step: 5 });
+
+ pressButton(increase());
+ expect(input().value).toBe("15");
+
+ pressButton(decrease());
+ pressButton(decrease());
+ expect(input().value).toBe("5");
+ expect(changedValues(onValueChange)).toEqual([15, 10, 5]);
+ });
+
+ it("clamps at min and max and disables the button at the limit", () => {
+ const onValueChange = vi.fn();
+ renderNumberField({ defaultValue: 9, max: 10, min: 8, onValueChange });
+
+ pressButton(increase());
+ expect(input().value).toBe("10");
+ expect(increase().hasAttribute("disabled")).toBe(true);
+
+ pressButton(decrease());
+ pressButton(decrease());
+ expect(input().value).toBe("8");
+ expect(decrease().hasAttribute("disabled")).toBe(true);
+ expect(changedValues(onValueChange)).toEqual([10, 9, 8]);
+ });
+
+ it("steps with the arrow keys and takes the large step with Shift", () => {
+ renderNumberField({ defaultValue: 0, max: 25 });
+
+ fireEvent.keyDown(input(), { key: "ArrowUp" });
+ expect(input().value).toBe("1");
+
+ fireEvent.keyDown(input(), { key: "ArrowUp", shiftKey: true });
+ expect(input().value).toBe("11");
+
+ fireEvent.keyDown(input(), { key: "ArrowUp", shiftKey: true });
+ fireEvent.keyDown(input(), { key: "ArrowUp", shiftKey: true });
+ expect(input().value).toBe("25");
+
+ fireEvent.keyDown(input(), { key: "ArrowDown" });
+ expect(input().value).toBe("24");
+ });
+
+ it("commits a typed value on blur, clamped to the range", () => {
+ const onValueCommitted = vi.fn();
+ renderNumberField({ defaultValue: 1, max: 100, onValueCommitted });
+
+ fireEvent.focus(input());
+ fireEvent.change(input(), { target: { value: "250" } });
+ expect(onValueCommitted).not.toHaveBeenCalled();
+
+ fireEvent.blur(input());
+ expect(onValueCommitted).toHaveBeenLastCalledWith(100, expect.anything());
+ expect(input().value).toBe("100");
+ });
+
+ it("ignores the buttons and the keyboard when disabled", () => {
+ const onValueChange = vi.fn();
+ renderNumberField({ defaultValue: 3, disabled: true, onValueChange });
+
+ expect(input().disabled).toBe(true);
+ expect(increase().hasAttribute("disabled")).toBe(true);
+ expect(decrease().hasAttribute("disabled")).toBe(true);
+
+ pressButton(increase());
+ fireEvent.keyDown(input(), { key: "ArrowUp" });
+ expect(onValueChange).not.toHaveBeenCalled();
+ expect(input().value).toBe("3");
+ });
+
+ it("keeps a read-only value but leaves the input focusable", () => {
+ const onValueChange = vi.fn();
+ renderNumberField({ defaultValue: 3, onValueChange, readOnly: true });
+
+ expect(input().readOnly).toBe(true);
+ expect(increase().getAttribute("aria-disabled")).toBe("true");
+
+ pressButton(increase());
+ fireEvent.keyDown(input(), { key: "ArrowUp" });
+ expect(onValueChange).not.toHaveBeenCalled();
+ });
+
+ it("formats the value with the given Intl options", () => {
+ renderNumberField({
+ defaultValue: 1234.5,
+ format: { currency: "USD", style: "currency" },
+ locale: "en-US",
+ });
+
+ expect(input().value).toBe("$1,234.50");
+ });
+});
diff --git a/packages/vitnode/src/components/ui/number-field.tsx b/packages/vitnode/src/components/ui/number-field.tsx
new file mode 100644
index 000000000..f3d57122d
--- /dev/null
+++ b/packages/vitnode/src/components/ui/number-field.tsx
@@ -0,0 +1,160 @@
+import { NumberField as NumberFieldPrimitive } from "@base-ui/react/number-field";
+import { cn } from "cn";
+import { MinusIcon, PlusIcon } from "lucide-react";
+import React from "react";
+import { useLocale, useTranslations } from "use-intl";
+
+type NumberFieldSize = "default" | "lg" | "sm";
+
+const stepperButtonClassName =
+ "text-muted-foreground hover:bg-muted hover:text-foreground relative flex shrink-0 cursor-pointer items-center justify-center px-2.5 transition-colors outline-none select-none disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-transparent aria-disabled:cursor-not-allowed aria-disabled:opacity-50 aria-disabled:hover:bg-transparent group-data-[size=lg]/number-field:px-3 group-data-[size=sm]/number-field:px-2 pointer-coarse:after:absolute pointer-coarse:after:top-1/2 pointer-coarse:after:left-1/2 pointer-coarse:after:size-11 pointer-coarse:after:-translate-1/2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 group-data-[size=sm]/number-field:[&_svg:not([class*='size-'])]:size-3.5";
+
+function NumberField({
+ className,
+ locale,
+ size = "default",
+ ...props
+}: NumberFieldPrimitive.Root.Props & { size?: NumberFieldSize }) {
+ const appLocale = useLocale();
+
+ return (
+ <NumberFieldPrimitive.Root
+ className={cn(
+ "group/number-field flex w-full flex-col items-start gap-2",
+ className,
+ )}
+ data-size={size}
+ data-slot="number-field"
+ locale={locale ?? appLocale}
+ {...props}
+ />
+ );
+}
+
+function NumberFieldGroup({
+ className,
+ ...props
+}: NumberFieldPrimitive.Group.Props) {
+ return (
+ <NumberFieldPrimitive.Group
+ className={cn(
+ "border-input focus-within:border-ring focus-within:ring-ring/50 has-aria-invalid:border-destructive has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:border-destructive/50 dark:has-aria-invalid:ring-destructive/40 dark:bg-input/30 bg-card relative flex h-9 w-full min-w-0 items-stretch rounded-md border shadow-xs transition-[color,box-shadow] group-data-[size=lg]/number-field:h-10 group-data-[size=sm]/number-field:h-8 focus-within:ring-3 has-aria-invalid:ring-3 data-disabled:opacity-50",
+ className,
+ )}
+ data-slot="number-field-group"
+ {...props}
+ />
+ );
+}
+
+function NumberFieldInput({
+ className,
+ ...props
+}: NumberFieldPrimitive.Input.Props) {
+ return (
+ <NumberFieldPrimitive.Input
+ className={cn(
+ "placeholder:text-muted-foreground w-full min-w-0 flex-1 bg-transparent px-2 text-center text-base tabular-nums outline-none group-data-[size=sm]/number-field:text-sm disabled:cursor-not-allowed md:text-sm",
+ className,
+ )}
+ data-slot="number-field-input"
+ {...props}
+ />
+ );
+}
+
+function NumberFieldDecrement({
+ children,
+ className,
+ ...props
+}: NumberFieldPrimitive.Decrement.Props) {
+ const t = useTranslations("core.global");
+
+ return (
+ <NumberFieldPrimitive.Decrement
+ aria-label={t("decrease")}
+ className={cn(stepperButtonClassName, "rounded-s-md", className)}
+ data-slot="number-field-decrement"
+ {...props}
+ >
+ {children ?? <MinusIcon />}
+ </NumberFieldPrimitive.Decrement>
+ );
+}
+
+function NumberFieldIncrement({
+ children,
+ className,
+ ...props
+}: NumberFieldPrimitive.Increment.Props) {
+ const t = useTranslations("core.global");
+
+ return (
+ <NumberFieldPrimitive.Increment
+ aria-label={t("increase")}
+ className={cn(stepperButtonClassName, "rounded-e-md", className)}
+ data-slot="number-field-increment"
+ {...props}
+ >
+ {children ?? <PlusIcon />}
+ </NumberFieldPrimitive.Increment>
+ );
+}
+
+const ScrubCursorIcon = (props: React.ComponentProps<"svg">) => (
+ <svg
+ aria-hidden="true"
+ fill="black"
+ height="14"
+ stroke="white"
+ viewBox="0 0 26 14"
+ width="26"
+ xmlns="http://www.w3.org/2000/svg"
+ {...props}
+ >
+ <path d="M19.5 5.5L6.49737 5.51844V2L1 6.9999L6.5 12L6.49737 8.5L19.5 8.5V12L25 6.9999L19.5 2V5.5Z" />
+ </svg>
+);
+
+function NumberFieldScrubArea({
+ className,
+ htmlFor,
+ label,
+ ...props
+}: NumberFieldPrimitive.ScrubArea.Props & {
+ htmlFor: string;
+ label: React.ReactNode;
+}) {
+ return (
+ <NumberFieldPrimitive.ScrubArea
+ className={cn(
+ "flex cursor-ew-resize touch-none select-none group-data-disabled/number-field:pointer-events-none group-data-disabled/number-field:opacity-50",
+ className,
+ )}
+ data-slot="number-field-scrub-area"
+ {...props}
+ >
+ <label
+ className="cursor-ew-resize text-sm leading-none font-medium"
+ htmlFor={htmlFor}
+ >
+ {label}
+ </label>
+ <NumberFieldPrimitive.ScrubAreaCursor
+ className="drop-shadow-sm"
+ data-slot="number-field-scrub-area-cursor"
+ >
+ <ScrubCursorIcon />
+ </NumberFieldPrimitive.ScrubAreaCursor>
+ </NumberFieldPrimitive.ScrubArea>
+ );
+}
+
+export {
+ NumberField,
+ NumberFieldDecrement,
+ NumberFieldGroup,
+ NumberFieldIncrement,
+ NumberFieldInput,
+ NumberFieldScrubArea,
+};
diff --git a/packages/vitnode/src/components/ui/pagination.test.tsx b/packages/vitnode/src/components/ui/pagination.test.tsx
new file mode 100644
index 000000000..0be4f5e1e
--- /dev/null
+++ b/packages/vitnode/src/components/ui/pagination.test.tsx
@@ -0,0 +1,89 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+
+import {
+ Pagination,
+ PaginationContent,
+ PaginationItem,
+ PaginationLink,
+ PaginationNext,
+ PaginationPrevious,
+} from "./pagination";
+
+const renderPagination = () =>
+ render(
+ <Pagination>
+ <PaginationContent>
+ <PaginationItem>
+ <PaginationPrevious aria-disabled role="link" />
+ </PaginationItem>
+ {[1, 2, 3].map(page => (
+ <PaginationItem key={page}>
+ <PaginationLink href={`?page=${page}`} isActive={page === 1}>
+ {page}
+ </PaginationLink>
+ </PaginationItem>
+ ))}
+ <PaginationItem>
+ <PaginationNext href="?page=2" />
+ </PaginationItem>
+ </PaginationContent>
+ </Pagination>,
+ );
+
+describe("Pagination", () => {
+ it("names every page link by its number", () => {
+ renderPagination();
+
+ expect(screen.getByRole("link", { name: "1" }).getAttribute("href")).toBe(
+ "?page=1",
+ );
+ expect(screen.getByRole("link", { name: "2" })).toBeTruthy();
+ expect(screen.getByRole("link", { name: "3" })).toBeTruthy();
+ expect(screen.queryByRole("button")).toBeNull();
+ });
+
+ it("marks only the active page as current", () => {
+ renderPagination();
+
+ expect(
+ screen.getByRole("link", { name: "1" }).getAttribute("aria-current"),
+ ).toBe("page");
+ expect(
+ screen.getByRole("link", { name: "2" }).hasAttribute("aria-current"),
+ ).toBe(false);
+ });
+
+ it("labels previous and next with translated text by default", () => {
+ renderPagination();
+
+ const next = screen.getByRole("link", {
+ name: "core.global.next_page",
+ });
+ const previous = screen.getByRole("link", {
+ name: "core.global.previous_page",
+ });
+
+ expect(next.textContent).toBe("core.global.next");
+ expect(previous.textContent).toBe("core.global.previous");
+ expect(previous.getAttribute("aria-disabled")).toBe("true");
+ expect(previous.hasAttribute("href")).toBe(false);
+ });
+
+ it("prefers custom previous and next text", () => {
+ render(
+ <>
+ <PaginationPrevious href="?page=1" text="Newer posts" />
+ <PaginationNext href="?page=3" text="Older posts" />
+ </>,
+ );
+
+ expect(
+ screen.getByRole("link", { name: "core.global.previous_page" })
+ .textContent,
+ ).toBe("Newer posts");
+ expect(
+ screen.getByRole("link", { name: "core.global.next_page" }).textContent,
+ ).toBe("Older posts");
+ });
+});
diff --git a/packages/vitnode/src/components/ui/pagination.tsx b/packages/vitnode/src/components/ui/pagination.tsx
index 3873305e4..0e0b5dde8 100644
--- a/packages/vitnode/src/components/ui/pagination.tsx
+++ b/packages/vitnode/src/components/ui/pagination.tsx
@@ -1,3 +1,5 @@
+import type { VariantProps } from "class-variance-authority";
+
import { cn } from "cn";
import {
ChevronLeftIcon,
@@ -7,7 +9,7 @@ import {
import React from "react";
import { useTranslations } from "use-intl";
-import { Button } from "@/components/ui/button";
+import { buttonVariants } from "@/components/ui/button";
function Pagination({ className, ...props }: React.ComponentProps<"nav">) {
return (
@@ -38,7 +40,7 @@ function PaginationItem({ ...props }: React.ComponentProps<"li">) {
return <li data-slot="pagination-item" {...props} />;
}
-type PaginationLinkProps = Pick<React.ComponentProps<typeof Button>, "size"> &
+type PaginationLinkProps = Pick<VariantProps<typeof buttonVariants>, "size"> &
React.ComponentProps<"a"> & {
isActive?: boolean;
};
@@ -49,30 +51,23 @@ function PaginationLink({
size = "icon",
...props
}: PaginationLinkProps) {
- const t = useTranslations("core.global");
-
return (
- <Button
- aria-label={isActive ? t("current_page") : t("go_to_page")}
- className={cn(className)}
- nativeButton={false}
- render={
- <a
- aria-current={isActive ? "page" : undefined}
- data-active={isActive}
- data-slot="pagination-link"
- {...props}
- />
- }
- size={size}
- variant={isActive ? "outline" : "ghost"}
+ <a
+ aria-current={isActive ? "page" : undefined}
+ className={cn(
+ buttonVariants({ size, variant: isActive ? "outline" : "ghost" }),
+ className,
+ )}
+ data-active={isActive}
+ data-slot="pagination-link"
+ {...props}
/>
);
}
function PaginationPrevious({
className,
- text = "Previous",
+ text,
...props
}: React.ComponentProps<typeof PaginationLink> & { text?: string }) {
const t = useTranslations("core.global");
@@ -85,14 +80,14 @@ function PaginationPrevious({
{...props}
>
<ChevronLeftIcon className="rtl:rotate-180" data-icon="inline-start" />
- <span className="hidden sm:block">{text}</span>
+ <span className="hidden sm:block">{text ?? t("previous")}</span>
</PaginationLink>
);
}
function PaginationNext({
className,
- text = "Next",
+ text,
...props
}: React.ComponentProps<typeof PaginationLink> & { text?: string }) {
const t = useTranslations("core.global");
@@ -104,7 +99,7 @@ function PaginationNext({
size="default"
{...props}
>
- <span className="hidden sm:block">{text}</span>
+ <span className="hidden sm:block">{text ?? t("next")}</span>
<ChevronRightIcon className="rtl:rotate-180" data-icon="inline-end" />
</PaginationLink>
);
diff --git a/packages/vitnode/src/components/ui/radio-group.tsx b/packages/vitnode/src/components/ui/radio-group.tsx
index 7e8c00b80..5d5c4bb87 100644
--- a/packages/vitnode/src/components/ui/radio-group.tsx
+++ b/packages/vitnode/src/components/ui/radio-group.tsx
@@ -20,7 +20,7 @@ function RadioGroupItem({
return (
<RadioPrimitive.Root
className={cn(
- "group/radio-group-item peer border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary relative flex aspect-square size-4 shrink-0 rounded-full border outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3",
+ "group/radio-group-item peer border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary relative flex aspect-square size-4 shrink-0 rounded-full border outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3 data-disabled:cursor-not-allowed data-disabled:opacity-50",
className,
)}
data-slot="radio-group-item"
diff --git a/packages/vitnode/src/components/ui/sidebar.tsx b/packages/vitnode/src/components/ui/sidebar.tsx
index 2ceda59c2..0433b99e9 100644
--- a/packages/vitnode/src/components/ui/sidebar.tsx
+++ b/packages/vitnode/src/components/ui/sidebar.tsx
@@ -20,8 +20,11 @@ import { Skeleton } from "@/components/ui/skeleton";
import {
Tooltip,
TooltipContent,
+ TooltipGroup,
+ TooltipGroupTrigger,
TooltipProvider,
TooltipTrigger,
+ useIsInTooltipGroup,
} from "@/components/ui/tooltip";
import { useIsMobile } from "@/hooks/use-mobile";
@@ -239,7 +242,9 @@ function Sidebar({
data-sidebar="sidebar"
data-slot="sidebar-inner"
>
- {children}
+ <TooltipGroup side={side === "left" ? "right" : "left"}>
+ {children}
+ </TooltipGroup>
</div>
</div>
</div>
@@ -508,6 +513,18 @@ function SidebarMenuButton({
tooltip?: React.ComponentProps<typeof TooltipContent> | string;
}) {
const { isMobile, state } = useSidebar();
+ const isInTooltipGroup = useIsInTooltipGroup();
+ const tooltipText = typeof tooltip === "string" ? tooltip : tooltip?.children;
+ const showsGroupTooltip =
+ isInTooltipGroup && !!tooltip && state === "collapsed" && !isMobile;
+
+ const getTriggerRender = () => {
+ if (!tooltip) return render;
+ if (!isInTooltipGroup) return <TooltipTrigger render={render} />;
+ if (!showsGroupTooltip) return render;
+
+ return <TooltipGroupTrigger content={tooltipText} render={render} />;
+ };
const button = useRender({
defaultTagName: "button",
@@ -517,7 +534,7 @@ function SidebarMenuButton({
},
props,
),
- render: !tooltip ? render : <TooltipTrigger render={render} />,
+ render: getTriggerRender(),
state: {
slot: "sidebar-menu-button",
sidebar: "menu-button",
@@ -526,15 +543,12 @@ function SidebarMenuButton({
},
});
- if (!tooltip) {
+ if (!tooltip || isInTooltipGroup) {
return button;
}
- if (typeof tooltip === "string") {
- tooltip = {
- children: tooltip,
- };
- }
+ const tooltipProps =
+ typeof tooltip === "string" ? { children: tooltip } : tooltip;
return (
<TooltipProvider>
@@ -544,7 +558,7 @@ function SidebarMenuButton({
align="center"
hidden={state !== "collapsed" || isMobile}
side="right"
- {...tooltip}
+ {...tooltipProps}
/>
</Tooltip>
</TooltipProvider>
diff --git a/packages/vitnode/src/components/ui/sliding-number.test.ts b/packages/vitnode/src/components/ui/sliding-number.test.ts
new file mode 100644
index 000000000..86b3d2827
--- /dev/null
+++ b/packages/vitnode/src/components/ui/sliding-number.test.ts
@@ -0,0 +1,57 @@
+import { describe, expect, it } from "vitest";
+
+import { digitFaceOffset, numberPlaces } from "./sliding-number";
+
+describe("digitFaceOffset", () => {
+ it("puts the current digit in view and its neighbours above and below", () => {
+ expect(digitFaceOffset(3, 3)).toBe(0);
+ expect(digitFaceOffset(4, 3)).toBe(1);
+ expect(digitFaceOffset(2, 3)).toBe(-1);
+ });
+
+ it("wraps around so 9 sits right above 0", () => {
+ expect(digitFaceOffset(9, 10)).toBe(-1);
+ expect(digitFaceOffset(0, 9)).toBe(1);
+ });
+
+ it("follows the rolled value between two digits", () => {
+ expect(digitFaceOffset(1, 0.5)).toBeCloseTo(0.5);
+ });
+});
+
+describe("numberPlaces", () => {
+ it("lists one place per digit, biggest first", () => {
+ expect(numberPlaces(0).exponents).toEqual([0]);
+ expect(numberPlaces(7).exponents).toEqual([0]);
+ expect(numberPlaces(1204)).toEqual({
+ exponents: [3, 2, 1, 0],
+ fractionDigits: 0,
+ scaled: 1204,
+ });
+ });
+
+ it("ignores the sign", () => {
+ expect(numberPlaces(-42).exponents).toEqual([1, 0]);
+ });
+
+ it("keeps the fraction digits instead of truncating them", () => {
+ expect(numberPlaces(0.5)).toEqual({
+ exponents: [0, -1],
+ fractionDigits: 1,
+ scaled: 5,
+ });
+ expect(numberPlaces(12.05)).toEqual({
+ exponents: [1, 0, -1, -2],
+ fractionDigits: 2,
+ scaled: 1205,
+ });
+ });
+
+ it("rounds floating point noise away", () => {
+ expect(numberPlaces(0.1 + 0.2)).toEqual({
+ exponents: [0, -1],
+ fractionDigits: 1,
+ scaled: 3,
+ });
+ });
+});
diff --git a/packages/vitnode/src/components/ui/sliding-number.tsx b/packages/vitnode/src/components/ui/sliding-number.tsx
new file mode 100644
index 000000000..8dd6590d2
--- /dev/null
+++ b/packages/vitnode/src/components/ui/sliding-number.tsx
@@ -0,0 +1,146 @@
+import { cn } from "cn";
+import {
+ AnimatePresence,
+ motion,
+ type MotionValue,
+ useReducedMotion,
+ useSpring,
+ useTransform,
+} from "motion/react";
+import React from "react";
+
+const DIGITS = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
+const ROLL_SPRING = { stiffness: 220, damping: 22, mass: 0.4 };
+const PLACE_TRANSITION = { type: "spring", duration: 0.35, bounce: 0 } as const;
+const PLAIN_NUMBER = new Intl.NumberFormat("en-US", {
+ maximumFractionDigits: 6,
+ useGrouping: false,
+});
+
+export const digitFaceOffset = (face: number, rolled: number) => {
+ const current = ((rolled % 10) + 10) % 10;
+ const offset = (10 + face - current) % 10;
+
+ return offset > 5 ? offset - 10 : offset;
+};
+
+export const numberPlaces = (value: number) => {
+ const [integer = "0", fraction = ""] = PLAIN_NUMBER.format(
+ Math.abs(value),
+ ).split(".");
+
+ return {
+ exponents: Array.from(
+ { length: integer.length + fraction.length },
+ (_, index) => integer.length - index - 1,
+ ),
+ fractionDigits: fraction.length,
+ scaled: Number(integer + fraction),
+ };
+};
+
+const DigitFace = ({
+ face,
+ rolled,
+}: {
+ face: number;
+ rolled: MotionValue<number>;
+}) => {
+ const y = useTransform(rolled, latest => {
+ return `${digitFaceOffset(face, latest) * 100}%`;
+ });
+
+ return (
+ <motion.span
+ className="absolute inset-0 flex items-center justify-center"
+ style={{ y }}
+ >
+ {face}
+ </motion.span>
+ );
+};
+
+const DigitRoller = ({
+ exponent,
+ fractionDigits,
+ scaled,
+}: {
+ exponent: number;
+ fractionDigits: number;
+ scaled: number;
+}) => {
+ const shouldReduceMotion = useReducedMotion();
+ const target = Math.floor(scaled / 10 ** (exponent + fractionDigits));
+ const rolled = useSpring(target, ROLL_SPRING);
+
+ React.useEffect(() => {
+ if (shouldReduceMotion) {
+ rolled.jump(target);
+
+ return;
+ }
+
+ rolled.set(target);
+ }, [rolled, shouldReduceMotion, target]);
+
+ return (
+ <span className="relative inline-block w-[1ch] overflow-y-clip">
+ <span className="invisible">0</span>
+ {DIGITS.map(face => (
+ <DigitFace face={face} key={face} rolled={rolled} />
+ ))}
+ </span>
+ );
+};
+
+function SlidingNumber({
+ className,
+ value,
+ ...props
+}: Omit<React.ComponentProps<"span">, "children"> & {
+ value: number;
+}) {
+ const shouldReduceMotion = useReducedMotion();
+ const { exponents, fractionDigits, scaled } = numberPlaces(value);
+
+ return (
+ <span
+ className={cn("inline-flex items-center tabular-nums", className)}
+ data-slot="sliding-number"
+ {...props}
+ >
+ <span className="sr-only" data-slot="sliding-number-value">
+ {value}
+ </span>
+ <span
+ aria-hidden="true"
+ className="inline-flex items-center leading-none"
+ >
+ {value < 0 && scaled > 0 && <span>-</span>}
+ <AnimatePresence initial={false}>
+ {exponents.map(exponent => (
+ <motion.span
+ animate={{ opacity: 1, width: "auto" }}
+ className="inline-flex overflow-hidden"
+ exit={{ opacity: 0, width: 0 }}
+ initial={{ opacity: 0, width: 0 }}
+ key={exponent}
+ transition={
+ shouldReduceMotion ? { duration: 0 } : PLACE_TRANSITION
+ }
+ >
+ {exponent === -1 && <span>.</span>}
+ <DigitRoller
+ exponent={exponent}
+ fractionDigits={fractionDigits}
+ scaled={scaled}
+ />
+ </motion.span>
+ ))}
+ </AnimatePresence>
+ </span>
+ </span>
+ );
+}
+
+export { SlidingNumber };
diff --git a/packages/vitnode/src/components/ui/sonner.tsx b/packages/vitnode/src/components/ui/sonner.tsx
index e64390a53..276756292 100644
--- a/packages/vitnode/src/components/ui/sonner.tsx
+++ b/packages/vitnode/src/components/ui/sonner.tsx
@@ -1,44 +1,170 @@
+import { cn } from "cn";
import {
CircleCheckIcon,
InfoIcon,
Loader2Icon,
OctagonXIcon,
TriangleAlertIcon,
+ XIcon,
} from "lucide-react";
import { Toaster as Sonner, type ToasterProps } from "sonner";
import { useTheme } from "../theme-provider";
+import { Avatar, AvatarFallback, AvatarImage } from "./avatar";
+import { Button } from "./button";
-const Toaster = ({ ...props }: ToasterProps) => {
+type ToastClassNames = NonNullable<
+ NonNullable<ToasterProps["toastOptions"]>["classNames"]
+>;
+
+const toastClassNames: ToastClassNames = {
+ toast: cn(
+ "group/toast bg-popover text-popover-foreground flex w-(--width) items-start gap-3 rounded-2xl border p-4 shadow-lg",
+ "focus-visible:ring-ring/50 focus-visible:ring-3",
+ "*:transition-opacity *:duration-200 data-[expanded=false]:data-[front=false]:*:opacity-0 motion-reduce:*:transition-none",
+ ),
+ icon: cn(
+ "relative flex size-5 shrink-0 items-center justify-center [&>svg]:size-4",
+ "has-data-[slot=avatar]:size-9",
+ "group-data-[type=info]/toast:text-primary group-data-[type=success]/toast:text-success group-data-[type=warning]/toast:text-warn group-data-[type=error]/toast:text-destructive",
+ ),
+ content: "flex min-w-0 flex-1 flex-col gap-0.5 self-center",
+ title: cn(
+ "text-sm leading-5 font-medium text-pretty",
+ "group-data-[type=info]/toast:text-primary group-data-[type=success]/toast:text-success group-data-[type=warning]/toast:text-warn group-data-[type=error]/toast:text-destructive",
+ ),
+ description: "text-muted-foreground text-sm leading-relaxed text-pretty",
+ actionButton: cn(
+ "focus-visible:ring-ring/50 inline-flex h-7 shrink-0 cursor-pointer items-center self-center rounded-md px-2.5 text-xs font-medium transition-colors outline-none focus-visible:ring-3",
+ "bg-primary text-primary-foreground hover:bg-primary/90",
+ "group-data-[type=info]/toast:bg-primary/10 group-data-[type=info]/toast:text-primary group-data-[type=info]/toast:hover:bg-primary/20",
+ "group-data-[type=success]/toast:bg-success/10 group-data-[type=success]/toast:text-success group-data-[type=success]/toast:hover:bg-success/20",
+ "group-data-[type=warning]/toast:bg-warn/10 group-data-[type=warning]/toast:text-warn group-data-[type=warning]/toast:hover:bg-warn/20",
+ "group-data-[type=error]/toast:bg-destructive/10 group-data-[type=error]/toast:text-destructive group-data-[type=error]/toast:hover:bg-destructive/20",
+ ),
+ cancelButton:
+ "bg-secondary text-secondary-foreground hover:bg-muted inline-flex h-7 shrink-0 cursor-pointer items-center self-center rounded-md px-2.5 text-xs font-medium transition-colors outline-none focus-visible:ring-3 focus-visible:ring-ring/50",
+ closeButton: cn(
+ "bg-popover text-muted-foreground hover:text-foreground absolute -end-1.5 -top-1.5 flex size-5 cursor-pointer items-center justify-center rounded-full border shadow-xs transition-opacity duration-150 outline-none [&>svg]:size-3",
+ "focus-visible:ring-ring/50 opacity-0 group-focus-within/toast:opacity-100 group-hover/toast:opacity-100 focus-visible:ring-3 motion-reduce:transition-none pointer-coarse:opacity-100",
+ ),
+};
+
+const mergeClassNames = (overrides: ToastClassNames = {}) => {
+ const merged: ToastClassNames = { ...overrides };
+
+ for (const key of Object.keys(toastClassNames) as (keyof ToastClassNames)[]) {
+ merged[key] = cn(toastClassNames[key], overrides[key]);
+ }
+
+ return merged;
+};
+
+const Toaster = ({
+ position = "top-right",
+ toastOptions,
+ ...props
+}: ToasterProps) => {
const { theme = "system" } = useTheme();
return (
<Sonner
className="toaster group"
icons={{
- success: <CircleCheckIcon className="size-4" />,
- info: <InfoIcon className="size-4" />,
- warning: <TriangleAlertIcon className="size-4" />,
- error: <OctagonXIcon className="size-4" />,
- loading: <Loader2Icon className="size-4 animate-spin" />,
+ success: <CircleCheckIcon />,
+ info: <InfoIcon />,
+ warning: <TriangleAlertIcon />,
+ error: <OctagonXIcon />,
+ loading: <Loader2Icon className="animate-spin" />,
+ close: <XIcon />,
}}
+ position={position}
style={
{
"--normal-bg": "var(--popover)",
+ "--normal-bg-hover": "var(--popover)",
"--normal-text": "var(--popover-foreground)",
"--normal-border": "var(--border)",
- "--border-radius": "var(--radius)",
+ "--normal-border-hover": "var(--border)",
} as React.CSSProperties
}
theme={theme as ToasterProps["theme"]}
toastOptions={{
- classNames: {
- toast: "cn-toast",
- },
+ unstyled: true,
+ ...toastOptions,
+ classNames: mergeClassNames(toastOptions?.classNames),
}}
{...props}
/>
);
};
-export { Toaster };
+const ToastAvatar = ({
+ alt,
+ fallback,
+ size,
+ src,
+}: {
+ alt: string;
+ fallback?: React.ReactNode;
+ size?: React.ComponentProps<typeof Avatar>["size"];
+ src?: null | string;
+}) => (
+ <Avatar size={size}>
+ {src ? <AvatarImage alt={alt} src={src} /> : null}
+ <AvatarFallback>{fallback ?? alt.charAt(0).toUpperCase()}</AvatarFallback>
+ </Avatar>
+);
+
+interface ToastMessageAction {
+ label: string;
+ onClick: () => void;
+ variant?: "default" | "outline" | "secondary";
+}
+
+const ToastMessage = ({
+ actions = [],
+ avatar,
+ description,
+ time,
+ title,
+}: {
+ actions?: ToastMessageAction[];
+ avatar: React.ComponentProps<typeof ToastAvatar>;
+ description?: React.ReactNode;
+ time?: React.ReactNode;
+ title: React.ReactNode;
+}) => (
+ <div className="flex w-full items-start gap-3" data-slot="toast-message">
+ <ToastAvatar {...avatar} size="lg" />
+ <div className="flex min-w-0 flex-1 flex-col gap-1">
+ <div className="flex items-baseline justify-between gap-3">
+ <p className="truncate text-sm font-medium">{title}</p>
+ {!!time && (
+ <span className="text-muted-foreground shrink-0 text-xs">{time}</span>
+ )}
+ </div>
+ {!!description && (
+ <p className="text-muted-foreground text-sm leading-relaxed text-pretty">
+ {description}
+ </p>
+ )}
+ {actions.length > 0 && (
+ <div className="mt-2 flex flex-wrap gap-2">
+ {actions.map(action => (
+ <Button
+ key={action.label}
+ onClick={action.onClick}
+ size="sm"
+ variant={action.variant ?? "default"}
+ >
+ {action.label}
+ </Button>
+ ))}
+ </div>
+ )}
+ </div>
+ </div>
+);
+
+export { ToastAvatar, Toaster, ToastMessage };
diff --git a/packages/vitnode/src/components/ui/spinner.test.tsx b/packages/vitnode/src/components/ui/spinner.test.tsx
new file mode 100644
index 000000000..3682341cb
--- /dev/null
+++ b/packages/vitnode/src/components/ui/spinner.test.tsx
@@ -0,0 +1,26 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+
+import { Spinner } from "./spinner";
+
+describe("Spinner", () => {
+ it("is labelled 'Loading' in the user's language by default", () => {
+ render(<Spinner />);
+
+ expect(
+ screen.getByRole("status", { name: "core.global.loading" }),
+ ).toBeTruthy();
+ });
+
+ it("keeps a custom label", () => {
+ render(<Spinner aria-label="Searching" />);
+
+ expect(screen.getByRole("status", { name: "Searching" })).toBeTruthy();
+ });
+
+ it("can be hidden from assistive tech next to text that says it all", () => {
+ render(<Spinner aria-hidden="true" />);
+
+ expect(screen.queryByRole("status")).toBeNull();
+ });
+});
diff --git a/packages/vitnode/src/components/ui/spinner.tsx b/packages/vitnode/src/components/ui/spinner.tsx
index 81461851d..d15812192 100644
--- a/packages/vitnode/src/components/ui/spinner.tsx
+++ b/packages/vitnode/src/components/ui/spinner.tsx
@@ -1,15 +1,51 @@
+import { cva, type VariantProps } from "class-variance-authority";
import { cn } from "cn";
import { Loader2Icon } from "lucide-react";
+import { useTranslations } from "use-intl";
-function Spinner({ className, ...props }: React.ComponentProps<"svg">) {
- return (
- <Loader2Icon
- aria-label="Loading"
- className={cn("size-4 animate-spin", className)}
- data-slot="spinner"
- role="status"
- {...props}
- />
+const spinnerVariants = cva("shrink-0 animate-spin", {
+ variants: {
+ size: {
+ sm: "size-3",
+ default: "size-4",
+ lg: "size-6",
+ xl: "size-10",
+ },
+ },
+ defaultVariants: {
+ size: "default",
+ },
+});
+
+type SpinnerProps = React.ComponentProps<"svg"> &
+ VariantProps<typeof spinnerVariants>;
+
+const SpinnerIcon = ({ className, size, ...props }: SpinnerProps) => (
+ <Loader2Icon
+ className={cn(spinnerVariants({ size }), className)}
+ data-size={size ?? "default"}
+ data-slot="spinner"
+ role="status"
+ {...props}
+ />
+);
+
+const TranslatedSpinner = (props: SpinnerProps) => {
+ const t = useTranslations("core.global");
+
+ return <SpinnerIcon aria-label={t("loading")} {...props} />;
+};
+
+function Spinner(props: SpinnerProps) {
+ const isLabelled =
+ props["aria-label"] !== undefined ||
+ props["aria-hidden"] === true ||
+ props["aria-hidden"] === "true";
+
+ return isLabelled ? (
+ <SpinnerIcon {...props} />
+ ) : (
+ <TranslatedSpinner {...props} />
);
}
diff --git a/packages/vitnode/src/components/ui/switch.tsx b/packages/vitnode/src/components/ui/switch.tsx
index e36e376c1..288f525ca 100644
--- a/packages/vitnode/src/components/ui/switch.tsx
+++ b/packages/vitnode/src/components/ui/switch.tsx
@@ -1,7 +1,10 @@
import { Switch as SwitchPrimitive } from "@base-ui/react/switch";
import { cn } from "cn";
+import { motion, useReducedMotion } from "motion/react";
import React from "react";
+const THUMB_SPRING = { type: "spring", stiffness: 300, damping: 25 } as const;
+
function Switch({
className,
size = "default",
@@ -9,10 +12,12 @@ function Switch({
}: React.ComponentProps<typeof SwitchPrimitive.Root> & {
size?: "default" | "sm";
}) {
+ const shouldReduceMotion = useReducedMotion();
+
return (
<SwitchPrimitive.Root
className={cn(
- "peer group/switch focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:bg-primary data-unchecked:bg-input dark:data-unchecked:bg-input/80 relative inline-flex shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:ring-3 aria-invalid:ring-3 data-disabled:cursor-not-allowed data-disabled:opacity-50 data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px]",
+ "peer group/switch focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:bg-primary data-unchecked:bg-input dark:data-unchecked:bg-input/80 relative inline-flex shrink-0 items-center justify-start rounded-full border border-transparent shadow-xs transition-[color,background-color,box-shadow] outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:ring-3 aria-invalid:ring-3 data-checked:justify-end data-disabled:cursor-not-allowed data-disabled:opacity-50 data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px]",
className,
)}
data-size={size}
@@ -20,8 +25,14 @@ function Switch({
{...props}
>
<SwitchPrimitive.Thumb
- className="bg-background dark:bg-foreground pointer-events-none block rounded-full ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0 rtl:group-data-[size=default]/switch:data-checked:-translate-x-[calc(100%-2px)] rtl:group-data-[size=sm]/switch:data-checked:-translate-x-[calc(100%-2px)] rtl:group-data-[size=default]/switch:data-unchecked:-translate-x-0 rtl:group-data-[size=sm]/switch:data-unchecked:-translate-x-0"
+ className="bg-background dark:bg-foreground pointer-events-none block rounded-full ring-0 transition-[width] duration-150 ease-out group-data-[size=default]/switch:h-4 group-data-[size=default]/switch:w-4 group-active/switch:not-data-disabled:group-data-[size=default]/switch:w-4.75 group-data-[size=sm]/switch:h-3 group-data-[size=sm]/switch:w-3 group-active/switch:not-data-disabled:group-data-[size=sm]/switch:w-3.5 motion-reduce:transition-none"
data-slot="switch-thumb"
+ render={
+ <motion.span
+ layout
+ transition={shouldReduceMotion ? { duration: 0 } : THUMB_SPRING}
+ />
+ }
/>
</SwitchPrimitive.Root>
);
diff --git a/packages/vitnode/src/components/ui/tooltip.tsx b/packages/vitnode/src/components/ui/tooltip.tsx
index f1769d8b1..bf2fca8da 100644
--- a/packages/vitnode/src/components/ui/tooltip.tsx
+++ b/packages/vitnode/src/components/ui/tooltip.tsx
@@ -69,6 +69,12 @@ function TooltipWithContent({
children: React.ReactElement;
text: React.ReactNode;
}) {
+ const isInTooltipGroup = useIsInTooltipGroup();
+
+ if (isInTooltipGroup && Object.keys(props).length === 0) {
+ return <TooltipGroupTrigger content={text} render={children} />;
+ }
+
return (
<TooltipProvider>
<Tooltip>
@@ -80,10 +86,106 @@ function TooltipWithContent({
);
}
+type TooltipGroupHandle = TooltipPrimitive.Handle<React.ReactNode>;
+
+const TooltipGroupContext = React.createContext<null | TooltipGroupHandle>(
+ null,
+);
+
+const GLIDE =
+ "duration-300 ease-[cubic-bezier(0.22,1,0.36,1)] data-instant:transition-none motion-reduce:transition-none";
+
+function TooltipGroup({
+ children,
+ side = "top",
+ sideOffset = 8,
+ align = "center",
+}: Pick<TooltipPrimitive.Positioner.Props, "align" | "side" | "sideOffset"> & {
+ children: React.ReactNode;
+}) {
+ const [handle] = React.useState(() =>
+ TooltipPrimitive.createHandle<React.ReactNode>(),
+ );
+
+ return (
+ <TooltipGroupContext value={handle}>
+ {children}
+ <TooltipPrimitive.Root handle={handle}>
+ {({ payload }) => (
+ <TooltipPrimitive.Portal>
+ <TooltipPrimitive.Positioner
+ align={align}
+ className={cn(
+ "isolate z-50 h-(--positioner-height) w-(--positioner-width) max-w-(--available-width) transition-[top,left,right,bottom,transform]",
+ GLIDE,
+ )}
+ side={side}
+ sideOffset={sideOffset}
+ >
+ <TooltipPrimitive.Popup
+ className={cn(
+ "bg-foreground text-background relative h-(--popup-height,auto) w-(--popup-width,auto) max-w-xs origin-(--transform-origin) rounded-md text-xs transition-[width,height,opacity,scale] data-ending-style:scale-90 data-ending-style:opacity-0 data-starting-style:scale-90 data-starting-style:opacity-0",
+ GLIDE,
+ )}
+ data-slot="tooltip-content"
+ >
+ <TooltipPrimitive.Viewport
+ className={cn(
+ "relative size-full overflow-clip px-3 py-1.5",
+ "**:data-current:w-[calc(var(--popup-width)-(--spacing(6)))] **:data-previous:w-[calc(var(--popup-width)-(--spacing(6)))]",
+ "**:data-current:transition-[translate,opacity] **:data-previous:transition-[translate,opacity]",
+ "**:data-current:duration-300 **:data-previous:duration-300 motion-reduce:**:data-current:transition-none motion-reduce:**:data-previous:transition-none",
+ "**:data-current:data-starting-style:opacity-0 data-[activation-direction~=left]:**:data-current:data-starting-style:-translate-x-1/2 data-[activation-direction~=right]:**:data-current:data-starting-style:translate-x-1/2",
+ "**:data-previous:data-ending-style:opacity-0 data-[activation-direction~=left]:**:data-previous:data-ending-style:translate-x-1/2 data-[activation-direction~=right]:**:data-previous:data-ending-style:-translate-x-1/2",
+ )}
+ data-slot="tooltip-viewport"
+ >
+ {payload}
+ </TooltipPrimitive.Viewport>
+ <TooltipPrimitive.Arrow
+ className={cn(
+ "bg-foreground z-50 size-2.5 rotate-45 rounded-[2px] transition-[left,top] data-[side=bottom]:-top-1.25 data-[side=left]:-right-1.25 data-[side=right]:-left-1.25 data-[side=top]:-bottom-1.25",
+ GLIDE,
+ )}
+ />
+ </TooltipPrimitive.Popup>
+ </TooltipPrimitive.Positioner>
+ </TooltipPrimitive.Portal>
+ )}
+ </TooltipPrimitive.Root>
+ </TooltipGroupContext>
+ );
+}
+
+function useIsInTooltipGroup() {
+ return React.use(TooltipGroupContext) !== null;
+}
+
+function TooltipGroupTrigger({
+ content,
+ ...props
+}: Omit<TooltipPrimitive.Trigger.Props, "content" | "handle" | "payload"> & {
+ content: React.ReactNode;
+}) {
+ const handle = React.use(TooltipGroupContext);
+
+ return (
+ <TooltipPrimitive.Trigger
+ data-slot="tooltip-trigger"
+ handle={handle ?? undefined}
+ payload={content}
+ {...props}
+ />
+ );
+}
+
export {
Tooltip,
TooltipContent,
+ TooltipGroup,
+ TooltipGroupTrigger,
TooltipProvider,
TooltipTrigger,
TooltipWithContent,
+ useIsInTooltipGroup,
};
diff --git a/packages/vitnode/src/editor/properties/area-panel.tsx b/packages/vitnode/src/editor/properties/area-panel.tsx
index ac06ab93f..faf49f2a6 100644
--- a/packages/vitnode/src/editor/properties/area-panel.tsx
+++ b/packages/vitnode/src/editor/properties/area-panel.tsx
@@ -364,6 +364,7 @@ export const AreaPropertiesPanelContent = ({
</>
)
}
+ icon={<Trash2Icon />}
onOpenChange={setConfirming}
onSubmit={({ onClose }) => {
afterDialogExit(onClose, () => {
diff --git a/packages/vitnode/src/editor/properties/field.tsx b/packages/vitnode/src/editor/properties/field.tsx
index cf0315624..ca4740c39 100644
--- a/packages/vitnode/src/editor/properties/field.tsx
+++ b/packages/vitnode/src/editor/properties/field.tsx
@@ -9,6 +9,7 @@ import type { ContentFieldDescriptor } from "../../content/types";
import { AutoFormDateTime } from "../../components/form/fields/date-time";
import { AutoFormInput } from "../../components/form/fields/input";
import { AutoFormNullableNumber } from "../../components/form/fields/nullable-number";
+import { AutoFormNumber } from "../../components/form/fields/number";
import { AutoFormRadioGroup } from "../../components/form/fields/radio-group";
import { AutoFormSelect } from "../../components/form/fields/select";
import { AutoFormSwitch } from "../../components/form/fields/switch";
@@ -173,12 +174,11 @@ export const BlockPropertyField = ({
{...props}
/>
) : (
- <AutoFormInput
+ <AutoFormNumber
label={spec.label}
max={spec.max}
min={spec.min}
step={spec.integer ? 1 : "any"}
- type="number"
{...props}
/>
);
diff --git a/packages/vitnode/src/editor/sidebar/footer.tsx b/packages/vitnode/src/editor/sidebar/footer.tsx
index 060c2d5b3..48b0d105f 100644
--- a/packages/vitnode/src/editor/sidebar/footer.tsx
+++ b/packages/vitnode/src/editor/sidebar/footer.tsx
@@ -1,7 +1,7 @@
import type { ReactElement } from "react";
import { cn } from "cn";
-import { EyeIcon, LogOutIcon, SaveIcon } from "lucide-react";
+import { EyeIcon, LogOutIcon, SaveIcon, Undo2Icon } from "lucide-react";
import { useTranslations } from "use-intl";
import { ConfirmActionAlertDialog } from "@/components/confirm-action/confirm-action-alert-dialog";
@@ -100,6 +100,7 @@ export const EditorSidebarFooter = (): ReactElement => {
<ConfirmActionAlertDialog
description={t("discard_confirm")}
+ icon={<Undo2Icon />}
onSubmit={({ onClose }) => {
discard();
onClose();
diff --git a/packages/vitnode/src/editor/zones/area-frame.tsx b/packages/vitnode/src/editor/zones/area-frame.tsx
index d4ca4a50a..abfc7754a 100644
--- a/packages/vitnode/src/editor/zones/area-frame.tsx
+++ b/packages/vitnode/src/editor/zones/area-frame.tsx
@@ -271,6 +271,7 @@ export const EditableAreaFrame = ({
</Button>
</span>
}
+ icon={<Trash2Icon />}
onOpenChange={setConfirming}
onSubmit={({ onClose }) => {
onClose();
diff --git a/packages/vitnode/src/framework/vite/optimize-deps.test.ts b/packages/vitnode/src/framework/vite/optimize-deps.test.ts
new file mode 100644
index 000000000..43d072530
--- /dev/null
+++ b/packages/vitnode/src/framework/vite/optimize-deps.test.ts
@@ -0,0 +1,46 @@
+import { describe, expect, it } from "vitest";
+
+import { postcssBrowserEmptyImports } from "./optimize-deps";
+
+const POSTCSS_INPUT =
+ "/repo/node_modules/.pnpm/postcss@8.5.28/node_modules/postcss/lib/input.js";
+
+const hooks = postcssBrowserEmptyImports() as unknown as {
+ load: { filter: { id: RegExp }; handler: (id: string) => string };
+ resolveId: {
+ filter: { id: RegExp };
+ handler: (id: string, importer: string | undefined) => null | string;
+ };
+};
+
+const resolve = (id: string, importer: string | undefined) =>
+ hooks.resolveId.filter.id.test(id)
+ ? hooks.resolveId.handler(id, importer)
+ : null;
+
+const load = (id: string) =>
+ hooks.load.filter.id.test(id) ? hooks.load.handler(id) : null;
+
+describe("postcss Node-only imports in the browser pre-bundle", () => {
+ it.each(["fs", "path", "source-map-js", "url"])(
+ "gives postcss an empty `%s` module instead of the warning stub",
+ specifier => {
+ const resolved = resolve(specifier, POSTCSS_INPUT);
+
+ expect(resolved).not.toBeNull();
+ expect(load(resolved ?? "")).toBe("module.exports = {};");
+ },
+ );
+
+ it("leaves the same imports alone for every other package", () => {
+ expect(
+ resolve("path", "/repo/node_modules/sanitize-html/index.js"),
+ ).toBeNull();
+ expect(resolve("path", undefined)).toBeNull();
+ });
+
+ it("leaves postcss's other imports alone", () => {
+ expect(resolve("nanoid/non-secure", POSTCSS_INPUT)).toBeNull();
+ expect(load("/repo/node_modules/postcss/lib/postcss.js")).toBeNull();
+ });
+});
diff --git a/packages/vitnode/src/framework/vite/optimize-deps.ts b/packages/vitnode/src/framework/vite/optimize-deps.ts
index f50109add..c4fde2590 100644
--- a/packages/vitnode/src/framework/vite/optimize-deps.ts
+++ b/packages/vitnode/src/framework/vite/optimize-deps.ts
@@ -1,4 +1,4 @@
-import type { Plugin } from "vite";
+import type { Plugin, Rolldown } from "vite";
import { existsSync } from "node:fs";
import { dirname, join } from "node:path";
@@ -118,12 +118,38 @@ export const tanStackRouterDepsInclude = (root: string): string[] =>
includeThrough(root, owner, specifier),
);
+const POSTCSS_BROWSER_EMPTY_IMPORTS = /^(?:fs|path|source-map-js|url)$/;
+const POSTCSS_IMPORTER = /[\\/]node_modules[\\/]postcss[\\/]/;
+const EMPTY_MODULE_PREFIX = "\0vitnode:browser-empty:";
+
+export const postcssBrowserEmptyImports = (): Rolldown.Plugin => ({
+ load: {
+ filter: { id: new RegExp(`^${EMPTY_MODULE_PREFIX}`) },
+ handler: () => "module.exports = {};",
+ },
+ name: "vitnode:postcss-browser-empty-imports",
+ resolveId: {
+ filter: { id: POSTCSS_BROWSER_EMPTY_IMPORTS },
+ handler: (id, importer) =>
+ importer && POSTCSS_IMPORTER.test(importer)
+ ? `${EMPTY_MODULE_PREFIX}${id}`
+ : null,
+ },
+});
+
export const vitNodeOptimizeDeps = (): Plugin => ({
apply: "serve",
config: userConfig => {
const root = userConfig.root ?? process.cwd();
return {
+ environments: {
+ client: {
+ optimizeDeps: {
+ rolldownOptions: { plugins: [postcssBrowserEmptyImports()] },
+ },
+ },
+ },
optimizeDeps: {
include: [
...vitNodeClientDepsInclude(root),
diff --git a/packages/vitnode/src/hooks/use-intersection-observer.test.ts b/packages/vitnode/src/hooks/use-intersection-observer.test.ts
new file mode 100644
index 000000000..fb789cc7e
--- /dev/null
+++ b/packages/vitnode/src/hooks/use-intersection-observer.test.ts
@@ -0,0 +1,135 @@
+import { act, renderHook } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+import { useIntersectionObserver } from "./use-intersection-observer";
+
+class FakeIntersectionObserver {
+ constructor(
+ callback: IntersectionObserverCallback,
+ options: IntersectionObserverInit,
+ ) {
+ this.callback = callback;
+ this.options = options;
+ FakeIntersectionObserver.instances.push(this);
+ }
+ static instances: FakeIntersectionObserver[] = [];
+ readonly callback: IntersectionObserverCallback;
+ readonly disconnect = vi.fn();
+ readonly observed: Element[] = [];
+ readonly options: IntersectionObserverInit;
+
+ observe(element: Element) {
+ this.observed.push(element);
+ }
+
+ trigger(isIntersecting: boolean) {
+ this.callback(
+ [{ isIntersecting } as IntersectionObserverEntry],
+ this as unknown as IntersectionObserver,
+ );
+ }
+}
+
+const latestObserver = () => FakeIntersectionObserver.instances.at(-1);
+
+describe("useIntersectionObserver", () => {
+ const element = document.createElement("div");
+
+ beforeEach(() => {
+ FakeIntersectionObserver.instances = [];
+ vi.stubGlobal("IntersectionObserver", FakeIntersectionObserver);
+ });
+
+ afterEach(() => {
+ vi.unstubAllGlobals();
+ });
+
+ it("observes the element with the given options", () => {
+ renderHook(() =>
+ useIntersectionObserver(element, { rootMargin: "20px", threshold: 0.5 }),
+ );
+
+ expect(latestObserver()?.observed).toEqual([element]);
+ expect(latestObserver()?.options).toMatchObject({
+ rootMargin: "20px",
+ threshold: [0.5],
+ });
+ });
+
+ it("waits for the element to mount and follows it when it is replaced", () => {
+ const replacement = document.createElement("div");
+ const { rerender } = renderHook(
+ ({ target }: { target: Element | null }) =>
+ useIntersectionObserver(target),
+ { initialProps: { target: null as Element | null } },
+ );
+
+ expect(FakeIntersectionObserver.instances).toHaveLength(0);
+
+ rerender({ target: element });
+ const first = latestObserver();
+ expect(first?.observed).toEqual([element]);
+
+ rerender({ target: replacement });
+ expect(first?.disconnect).toHaveBeenCalled();
+ expect(latestObserver()?.observed).toEqual([replacement]);
+ });
+
+ it("returns the latest entry", () => {
+ const { result } = renderHook(() => useIntersectionObserver(element));
+
+ expect(result.current).toBeUndefined();
+
+ act(() => {
+ latestObserver()?.trigger(true);
+ });
+ expect(result.current?.isIntersecting).toBe(true);
+
+ act(() => {
+ latestObserver()?.trigger(false);
+ });
+ expect(result.current?.isIntersecting).toBe(false);
+ });
+
+ it("does not re-create the observer for a new threshold array", () => {
+ const { rerender } = renderHook(() =>
+ useIntersectionObserver(element, { threshold: [0, 0.5, 1] }),
+ );
+
+ rerender();
+
+ expect(FakeIntersectionObserver.instances).toHaveLength(1);
+ });
+
+ it("stops observing once visible when freezeOnceVisible is set", () => {
+ const { result } = renderHook(() =>
+ useIntersectionObserver(element, { freezeOnceVisible: true }),
+ );
+ const observer = latestObserver();
+
+ act(() => {
+ observer?.trigger(true);
+ });
+
+ expect(observer?.disconnect).toHaveBeenCalled();
+ expect(FakeIntersectionObserver.instances).toHaveLength(1);
+ expect(result.current?.isIntersecting).toBe(true);
+ });
+
+ it("disconnects on unmount", () => {
+ const { unmount } = renderHook(() => useIntersectionObserver(element));
+
+ unmount();
+
+ expect(latestObserver()?.disconnect).toHaveBeenCalled();
+ });
+
+ it("does nothing when the browser has no IntersectionObserver", () => {
+ vi.unstubAllGlobals();
+
+ const { result } = renderHook(() => useIntersectionObserver(element));
+
+ expect("IntersectionObserver" in window).toBe(false);
+ expect(result.current).toBeUndefined();
+ });
+});
diff --git a/packages/vitnode/src/hooks/use-intersection-observer.ts b/packages/vitnode/src/hooks/use-intersection-observer.ts
new file mode 100644
index 000000000..8cfc7e4a4
--- /dev/null
+++ b/packages/vitnode/src/hooks/use-intersection-observer.ts
@@ -0,0 +1,43 @@
+import React from "react";
+
+interface UseIntersectionObserverOptions {
+ freezeOnceVisible?: boolean;
+ root?: Element | null;
+ rootMargin?: string;
+ threshold?: number | number[];
+}
+
+export function useIntersectionObserver(
+ target: Element | null,
+ {
+ threshold = 0,
+ root = null,
+ rootMargin = "0%",
+ freezeOnceVisible = false,
+ }: UseIntersectionObserverOptions = {},
+): IntersectionObserverEntry | undefined {
+ const [entry, setEntry] = React.useState<IntersectionObserverEntry>();
+ const isFrozen = freezeOnceVisible && !!entry?.isIntersecting;
+ const thresholdKey = Array.isArray(threshold)
+ ? threshold.join(",")
+ : String(threshold);
+
+ React.useEffect(() => {
+ if (!target || isFrozen || !("IntersectionObserver" in window)) return;
+
+ const observer = new IntersectionObserver(
+ ([nextEntry]) => {
+ setEntry(nextEntry);
+ },
+ { root, rootMargin, threshold: thresholdKey.split(",").map(Number) },
+ );
+
+ observer.observe(target);
+
+ return () => {
+ observer.disconnect();
+ };
+ }, [target, isFrozen, root, rootMargin, thresholdKey]);
+
+ return entry;
+}
diff --git a/packages/vitnode/src/hooks/use-local-storage.test.ts b/packages/vitnode/src/hooks/use-local-storage.test.ts
new file mode 100644
index 000000000..29c55e002
--- /dev/null
+++ b/packages/vitnode/src/hooks/use-local-storage.test.ts
@@ -0,0 +1,138 @@
+import { act, renderHook } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+import { useLocalStorage } from "./use-local-storage";
+
+describe("useLocalStorage", () => {
+ afterEach(() => {
+ window.localStorage.clear();
+ vi.restoreAllMocks();
+ });
+
+ it("returns the default value when nothing is stored", () => {
+ const { result } = renderHook(() => useLocalStorage("theme", "light"));
+
+ expect(result.current[0]).toBe("light");
+ expect(window.localStorage.getItem("theme")).toBeNull();
+ });
+
+ it("reads a value that is already stored", () => {
+ window.localStorage.setItem("count", "5");
+
+ const { result } = renderHook(() => useLocalStorage("count", 0));
+
+ expect(result.current[0]).toBe(5);
+ });
+
+ it("persists new values as JSON", () => {
+ const { result } = renderHook(() =>
+ useLocalStorage("user", { name: "Ada" }),
+ );
+
+ act(() => {
+ result.current[1]({ name: "Grace" });
+ });
+
+ expect(result.current[0]).toEqual({ name: "Grace" });
+ expect(window.localStorage.getItem("user")).toBe('{"name":"Grace"}');
+ });
+
+ it("passes the latest value to an updater function", () => {
+ const { result } = renderHook(() => useLocalStorage("count", 0));
+
+ act(() => {
+ result.current[1](previous => previous + 1);
+ result.current[1](previous => previous + 1);
+ });
+
+ expect(result.current[0]).toBe(2);
+ });
+
+ it("keeps hooks with the same key in sync", () => {
+ const first = renderHook(() => useLocalStorage("count", 0));
+ const second = renderHook(() => useLocalStorage("count", 0));
+
+ act(() => {
+ first.result.current[1](7);
+ });
+
+ expect(second.result.current[0]).toBe(7);
+ });
+
+ it("picks up changes made in another tab", () => {
+ const { result } = renderHook(() => useLocalStorage("count", 0));
+
+ act(() => {
+ window.localStorage.setItem("count", "3");
+ window.dispatchEvent(new StorageEvent("storage", { key: "count" }));
+ });
+
+ expect(result.current[0]).toBe(3);
+ });
+
+ it("falls back to the default when the stored value is not JSON", () => {
+ window.localStorage.setItem("count", "not json");
+
+ const { result } = renderHook(() => useLocalStorage("count", 0));
+
+ expect(result.current[0]).toBe(0);
+ });
+
+ it("removes the value and goes back to the default", () => {
+ window.localStorage.setItem("count", "9");
+ const { result } = renderHook(() => useLocalStorage("count", 0));
+
+ act(() => {
+ result.current[2]();
+ });
+
+ expect(result.current[0]).toBe(0);
+ expect(window.localStorage.getItem("count")).toBeNull();
+ });
+
+ it("keeps working in memory when storage is unavailable", () => {
+ vi.spyOn(Storage.prototype, "getItem").mockImplementation(() => {
+ throw new Error("SecurityError");
+ });
+ vi.spyOn(Storage.prototype, "setItem").mockImplementation(() => {
+ throw new Error("QuotaExceededError");
+ });
+ const { result } = renderHook(() => useLocalStorage("blocked", "a"));
+
+ act(() => {
+ result.current[1]("b");
+ });
+
+ expect(result.current[0]).toBe("b");
+ });
+
+ it("shows the in-memory value when storage is readable but full", () => {
+ window.localStorage.setItem("full", '"stored"');
+ const setItem = vi
+ .spyOn(Storage.prototype, "setItem")
+ .mockImplementation(() => {
+ throw new Error("QuotaExceededError");
+ });
+ vi.spyOn(Storage.prototype, "removeItem").mockImplementation(() => {
+ throw new Error("QuotaExceededError");
+ });
+ const { result } = renderHook(() => useLocalStorage("full", "default"));
+
+ act(() => {
+ result.current[1]("updated");
+ });
+ expect(result.current[0]).toBe("updated");
+
+ act(() => {
+ result.current[2]();
+ });
+ expect(result.current[0]).toBe("default");
+
+ setItem.mockRestore();
+ act(() => {
+ result.current[1]("saved");
+ });
+ expect(result.current[0]).toBe("saved");
+ expect(window.localStorage.getItem("full")).toBe('"saved"');
+ });
+});
diff --git a/packages/vitnode/src/hooks/use-local-storage.ts b/packages/vitnode/src/hooks/use-local-storage.ts
new file mode 100644
index 000000000..144f07ddb
--- /dev/null
+++ b/packages/vitnode/src/hooks/use-local-storage.ts
@@ -0,0 +1,86 @@
+import React from "react";
+
+type SetLocalStorageValue<T> = (value: ((previous: T) => T) | T) => void;
+
+const memoryFallback = new Map<string, null | string>();
+
+const readRaw = (key: string): null | string => {
+ if (memoryFallback.has(key)) return memoryFallback.get(key) ?? null;
+
+ try {
+ return window.localStorage.getItem(key);
+ } catch {
+ return null;
+ }
+};
+
+const writeRaw = (key: string, raw: null | string) => {
+ try {
+ if (raw === null) {
+ window.localStorage.removeItem(key);
+ } else {
+ window.localStorage.setItem(key, raw);
+ }
+ memoryFallback.delete(key);
+ } catch {
+ memoryFallback.set(key, raw);
+ }
+
+ window.dispatchEvent(new StorageEvent("storage", { key }));
+};
+
+const missing = Symbol("missing");
+
+const parse = (raw: null | string): unknown => {
+ if (raw === null) return missing;
+
+ try {
+ return JSON.parse(raw) as unknown;
+ } catch {
+ return missing;
+ }
+};
+
+const valueOrDefault = <T>(parsed: unknown, defaultValue: T): T =>
+ parsed === missing ? defaultValue : (parsed as T);
+
+const subscribe = (onChange: () => void) => {
+ window.addEventListener("storage", onChange);
+
+ return () => {
+ window.removeEventListener("storage", onChange);
+ };
+};
+
+const getServerSnapshot = () => null;
+
+export function useLocalStorage<T>(
+ key: string,
+ defaultValue: T,
+): [T, SetLocalStorageValue<T>, () => void] {
+ const raw = React.useSyncExternalStore(
+ subscribe,
+ () => readRaw(key),
+ getServerSnapshot,
+ );
+ const parsed = React.useMemo(() => parse(raw), [raw]);
+ const value = valueOrDefault(parsed, defaultValue);
+
+ const setValue: SetLocalStorageValue<T> = React.useCallback(
+ next => {
+ const resolved =
+ next instanceof Function
+ ? next(valueOrDefault(parse(readRaw(key)), defaultValue))
+ : next;
+
+ writeRaw(key, JSON.stringify(resolved));
+ },
+ [key, defaultValue],
+ );
+
+ const removeValue = React.useCallback(() => {
+ writeRaw(key, null);
+ }, [key]);
+
+ return [value, setValue, removeValue];
+}
diff --git a/packages/vitnode/src/lib/helpers/auto-form.test.ts b/packages/vitnode/src/lib/helpers/auto-form.test.ts
index 24c87ce05..b05ee12a3 100644
--- a/packages/vitnode/src/lib/helpers/auto-form.test.ts
+++ b/packages/vitnode/src/lib/helpers/auto-form.test.ts
@@ -202,6 +202,20 @@ describe("auto-form helpers", () => {
expect(result.role).toHaveProperty("required", true);
});
+ it("exposes the enum of an array of enums on the array field", () => {
+ const zodSchema = z.object({
+ tags: z.array(z.enum(["news", "guides", "releases"])),
+ });
+
+ const result = getZodInputParams(z.toJSONSchema(zodSchema));
+
+ expect(result.tags).toHaveProperty("enum", [
+ "news",
+ "guides",
+ "releases",
+ ]);
+ });
+
it("should handle complex password validation", () => {
const zodSchema = z.object({
password: z
diff --git a/packages/vitnode/src/lib/helpers/auto-form.ts b/packages/vitnode/src/lib/helpers/auto-form.ts
index 1f54cc86e..825c19bcc 100644
--- a/packages/vitnode/src/lib/helpers/auto-form.ts
+++ b/packages/vitnode/src/lib/helpers/auto-form.ts
@@ -138,6 +138,9 @@ export function getZodInputParams(
fieldParams.itemParams = {
"": getZodInputParams({ properties: { "": items } }, [])[""],
};
+ if (items.enum) {
+ fieldParams.enum = items.enum;
+ }
}
extractedParams[key] = fieldParams;
} else {
diff --git a/packages/vitnode/src/locales/en.json b/packages/vitnode/src/locales/en.json
index e7e80768e..f3158ad4d 100644
--- a/packages/vitnode/src/locales/en.json
+++ b/packages/vitnode/src/locales/en.json
@@ -144,6 +144,14 @@
"global": {
"close": "Close",
"confirm": "Confirm",
+ "clear": "Clear",
+ "comparison_slider": "Comparison slider",
+ "copy": "Copy",
+ "decrease": "Decrease",
+ "increase": "Increase",
+ "copied": "Copied",
+ "copy_failed": "Couldn't copy to the clipboard. Try selecting the text instead.",
+ "more_count": "+{count} more",
"previous": "Previous",
"next": "Next",
"current_page": "Current page",
@@ -332,12 +340,26 @@
},
"search_placeholder": "Search...",
"results_not_found": "No results found",
- "selected_count": "{count} selected",
+ "selected_count": "<number>{count}</number> selected",
"clear_filters": "Clear filters",
"data_table": {
"select_all": "Select all rows",
"select_row": "Select row",
- "clear_selection": "Clear selection"
+ "clear_selection": "Clear selection",
+ "expand_row": "Expand row",
+ "collapse_row": "Collapse row",
+ "row_details": "Row details",
+ "reorder_column": "Reorder",
+ "reorder_row": "Reorder {name}",
+ "row_fallback": "row {position}",
+ "reorder_instructions": "Press space bar or enter to pick up a row. Use the arrow keys to move it. Press space bar or enter again to drop it in its new place, or escape to cancel.",
+ "reorder_started": "Picked up {name}. It is in place {position} of {total}.",
+ "reorder_over": "{name} moved to place {position} of {total}.",
+ "reorder_ended": "Dropped {name} in place {position} of {total}.",
+ "reorder_cancelled": "Reordering cancelled. {name} is back in place {position} of {total}.",
+ "reorder_unavailable": "Clear the search, filters and sorting to reorder rows.",
+ "reorder_failed": "Could not save the new order",
+ "reorder_failed_desc": "The rows are back where they were. Try again in a moment."
},
"date": "{date, date}",
"date_medium": "{date, date, medium}",
diff --git a/packages/vitnode/src/tanstack/admin/content/row-actions.tsx b/packages/vitnode/src/tanstack/admin/content/row-actions.tsx
index ae28a6998..d24a1649c 100644
--- a/packages/vitnode/src/tanstack/admin/content/row-actions.tsx
+++ b/packages/vitnode/src/tanstack/admin/content/row-actions.tsx
@@ -131,6 +131,7 @@ const PublishRowAction = ({
<span className="text-foreground font-bold">{title}</span>
),
})}
+ icon={<Icon />}
onSubmit={async ({ onClose }) => {
const result = await setContentPublication(queryClient, {
action,
@@ -398,6 +399,7 @@ const ContentRowActionsMenu = ({
),
})}
finalFocus={triggerRef}
+ icon={<Trash2Icon />}
onOpenChange={closePanel}
onSubmit={async ({ onClose }) => {
const result = await deleteContentRow(queryClient, {
diff --git a/packages/vitnode/src/tanstack/auth/sso-screen.tsx b/packages/vitnode/src/tanstack/auth/sso-screen.tsx
index 5e4277d7c..7925fa69b 100644
--- a/packages/vitnode/src/tanstack/auth/sso-screen.tsx
+++ b/packages/vitnode/src/tanstack/auth/sso-screen.tsx
@@ -2,7 +2,7 @@ import { useQuery, useQueryClient } from "@tanstack/react-query";
import { useRouter } from "@tanstack/react-router";
import { useTranslations } from "use-intl";
-import { Loader } from "@/components/ui/loader";
+import { Spinner } from "@/components/ui/spinner";
import { ssoConnectionIntentOfState } from "@/lib/sso-profile";
import { ssoConnectionCallbackTarget } from "@/views/auth/settings/sso/connection-callback";
import { useSsoConnectionNotice } from "@/views/auth/settings/sso/connection-notice";
@@ -44,7 +44,9 @@ const SsoConnectionCallbackPending = ({
className="container mx-auto flex flex-col items-center justify-center gap-4 p-4"
role="status"
>
- <Loader />
+ <div className="flex items-center justify-center">
+ <Spinner size="xl" />
+ </div>
<p className="text-muted-foreground text-sm leading-relaxed">
{t("pending", { provider: providerName })}
</p>
diff --git a/packages/vitnode/src/views/admin/views/content/actions/content-panel.tsx b/packages/vitnode/src/views/admin/views/content/actions/content-panel.tsx
index 0dede13ba..2d4c757f4 100644
--- a/packages/vitnode/src/views/admin/views/content/actions/content-panel.tsx
+++ b/packages/vitnode/src/views/admin/views/content/actions/content-panel.tsx
@@ -7,7 +7,7 @@ import {
DialogHeader,
DialogTitle,
} from "@/components/ui/dialog";
-import { Loader } from "@/components/ui/loader";
+import { Spinner } from "@/components/ui/spinner";
export interface ContentPanelProps {
finalFocus?: React.RefObject<HTMLElement | null>;
@@ -36,7 +36,15 @@ export const ContentPanel = ({
<DialogDescription>{description}</DialogDescription>
</DialogHeader>
- <React.Suspense fallback={<Loader />}>{children}</React.Suspense>
+ <React.Suspense
+ fallback={
+ <div className="flex items-center justify-center">
+ <Spinner size="xl" />
+ </div>
+ }
+ >
+ {children}
+ </React.Suspense>
</DialogContent>
</Dialog>
);
diff --git a/packages/vitnode/src/views/admin/views/content/actions/delivery/delivery-panel.tsx b/packages/vitnode/src/views/admin/views/content/actions/delivery/delivery-panel.tsx
index f088666ff..8780c5118 100644
--- a/packages/vitnode/src/views/admin/views/content/actions/delivery/delivery-panel.tsx
+++ b/packages/vitnode/src/views/admin/views/content/actions/delivery/delivery-panel.tsx
@@ -4,7 +4,7 @@ import { useTranslations } from "use-intl";
import { DateFormat } from "@/components/date-format";
import { Badge } from "@/components/ui/badge";
-import { Loader } from "@/components/ui/loader";
+import { Spinner } from "@/components/ui/spinner";
import { contentDeliveryQueryOptions } from "../editorial-query";
import { useContentEditorialTransport } from "../editorial-transport";
@@ -29,7 +29,12 @@ export const DeliveryPanel = ({
}),
);
- if (isPending) return <Loader />;
+ if (isPending)
+ return (
+ <div className="flex items-center justify-center">
+ <Spinner size="xl" />
+ </div>
+ );
if (!data?.data) {
return (
diff --git a/packages/vitnode/src/views/admin/views/content/actions/history/revision-history.tsx b/packages/vitnode/src/views/admin/views/content/actions/history/revision-history.tsx
index ad3b77d43..141ef4e2d 100644
--- a/packages/vitnode/src/views/admin/views/content/actions/history/revision-history.tsx
+++ b/packages/vitnode/src/views/admin/views/content/actions/history/revision-history.tsx
@@ -7,7 +7,7 @@ import type { ContentFormSpec } from "@/content/admin/spec";
import { useAdminStaffPermission } from "@/components/staff-permission/provider";
import { Button } from "@/components/ui/button";
-import { Loader } from "@/components/ui/loader";
+import { Spinner } from "@/components/ui/spinner";
import { CONTENT_PERMISSIONS } from "@/content/const";
import { useContentFormNavigation } from "../../form/navigation";
@@ -65,7 +65,9 @@ export const RevisionHistory = ({
if (history.isPending) {
return (
<HistoryNotice>
- <Loader />
+ <div className="flex items-center justify-center">
+ <Spinner size="xl" />
+ </div>
</HistoryNotice>
);
}
diff --git a/packages/vitnode/src/views/admin/views/content/actions/history/revision-row.tsx b/packages/vitnode/src/views/admin/views/content/actions/history/revision-row.tsx
index 7cda91907..96a9c70ad 100644
--- a/packages/vitnode/src/views/admin/views/content/actions/history/revision-row.tsx
+++ b/packages/vitnode/src/views/admin/views/content/actions/history/revision-row.tsx
@@ -15,7 +15,7 @@ import { ConfirmActionAlertDialog } from "@/components/confirm-action/confirm-ac
import { DateFormat } from "@/components/date-format";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
-import { Loader } from "@/components/ui/loader";
+import { Spinner } from "@/components/ui/spinner";
import { contentErrorKey } from "../../lib/mutation-feedback";
import { contentRevisionQueryOptions } from "../editorial-query";
@@ -209,6 +209,7 @@ export const RevisionRow = ({
),
version: revision.version,
})}
+ icon={<RotateCcwIcon />}
onSubmit={async ({ onClose }) => {
const mutation = await transport.restoreRevision(
contentTypeId,
@@ -282,7 +283,7 @@ export const RevisionRow = ({
</p>
) : (
<div className="text-muted-foreground flex justify-center py-2">
- <Loader small />
+ <Spinner />
</div>
)}
</div>
diff --git a/packages/vitnode/src/views/admin/views/content/actions/preview-action.tsx b/packages/vitnode/src/views/admin/views/content/actions/preview-action.tsx
index 72e2ef3e1..85acc0c6a 100644
--- a/packages/vitnode/src/views/admin/views/content/actions/preview-action.tsx
+++ b/packages/vitnode/src/views/admin/views/content/actions/preview-action.tsx
@@ -1,10 +1,11 @@
-import { CheckIcon, CopyIcon, ExternalLinkIcon } from "lucide-react";
+import { ExternalLinkIcon } from "lucide-react";
import React from "react";
import { toast } from "sonner";
import { useTranslations } from "use-intl";
import { DateFormat } from "@/components/date-format";
import { Button } from "@/components/ui/button";
+import { CopyButton } from "@/components/ui/copy-button";
import type { ContentPanelProps } from "./content-panel";
import type { ContentPreviewLink } from "./editorial-api";
@@ -13,44 +14,6 @@ import { contentErrorKey } from "../lib/mutation-feedback";
import { ContentPanel } from "./content-panel";
import { useContentEditorialTransport } from "./editorial-transport";
-const COPIED_FEEDBACK_MS = 2000;
-
-const CopyButton = ({ label, url }: { label: string; url: string }) => {
- const [copied, setCopied] = React.useState(false);
-
- React.useEffect(() => {
- if (!copied) return;
-
- const timer = setTimeout(() => {
- setCopied(false);
- }, COPIED_FEEDBACK_MS);
-
- return () => {
- clearTimeout(timer);
- };
- }, [copied]);
-
- return (
- <Button
- aria-label={label}
- onClick={() => {
- void navigator.clipboard.writeText(url).then(() => {
- setCopied(true);
- });
- }}
- size="icon"
- type="button"
- variant="outline"
- >
- {copied ? (
- <CheckIcon className="size-4" />
- ) : (
- <CopyIcon className="size-4" />
- )}
- </Button>
- );
-};
-
const PreviewLink = ({
contentTypeId,
id,
@@ -108,7 +71,7 @@ const PreviewLink = ({
readOnly
value={preview.url}
/>
- <CopyButton label={t("copy")} url={preview.url} />
+ <CopyButton aria-label={t("copy")} content={preview.url} />
</div>
<div className="flex flex-wrap items-center justify-between gap-2">
diff --git a/packages/vitnode/src/views/admin/views/content/actions/schedule/schedule-panel.tsx b/packages/vitnode/src/views/admin/views/content/actions/schedule/schedule-panel.tsx
index 428bb6925..c872677a5 100644
--- a/packages/vitnode/src/views/admin/views/content/actions/schedule/schedule-panel.tsx
+++ b/packages/vitnode/src/views/admin/views/content/actions/schedule/schedule-panel.tsx
@@ -15,7 +15,7 @@ import { AutoFormSelect } from "@/components/form/fields/select";
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
-import { Loader } from "@/components/ui/loader";
+import { Spinner } from "@/components/ui/spinner";
import { contentScheduleTimingError } from "@/content/schedules";
import { contentErrorKey } from "../../lib/mutation-feedback";
@@ -136,7 +136,12 @@ export const SchedulePanel = ({
});
};
- if (schedules.isPending) return <Loader />;
+ if (schedules.isPending)
+ return (
+ <div className="flex items-center justify-center">
+ <Spinner size="xl" />
+ </div>
+ );
const edges = schedules.data?.edges ?? [];
const pending = edges.filter(entry => entry.status === "pending");
diff --git a/packages/vitnode/src/views/admin/views/content/form/primitives.tsx b/packages/vitnode/src/views/admin/views/content/form/primitives.tsx
index 5d00831a0..9214d7b66 100644
--- a/packages/vitnode/src/views/admin/views/content/form/primitives.tsx
+++ b/packages/vitnode/src/views/admin/views/content/form/primitives.tsx
@@ -78,6 +78,7 @@ const ContentFormPublicationToggle = () => {
<span className="text-foreground font-bold">{title ?? singular}</span>
),
})}
+ icon={<Icon />}
onSubmit={async ({ onClose }) => {
if (await transition(action)) onClose();
}}
diff --git a/packages/vitnode/src/views/admin/views/content/lib/field-component.tsx b/packages/vitnode/src/views/admin/views/content/lib/field-component.tsx
index 28f3cf65a..c01b01504 100644
--- a/packages/vitnode/src/views/admin/views/content/lib/field-component.tsx
+++ b/packages/vitnode/src/views/admin/views/content/lib/field-component.tsx
@@ -13,6 +13,7 @@ import { AutoFormFile } from "@/components/form/fields/file";
import { AutoFormFiles } from "@/components/form/fields/files";
import { AutoFormInput } from "@/components/form/fields/input";
import { AutoFormNullableNumber } from "@/components/form/fields/nullable-number";
+import { AutoFormNumber } from "@/components/form/fields/number";
import { AutoFormRadioGroup } from "@/components/form/fields/radio-group";
import { AutoFormSelect } from "@/components/form/fields/select";
import { AutoFormSwitch } from "@/components/form/fields/switch";
@@ -160,12 +161,11 @@ export const ContentField = ({
{...props}
/>
) : (
- <AutoFormInput
+ <AutoFormNumber
label={spec.label}
max={spec.max}
min={spec.min}
step={spec.integer ? 1 : "any"}
- type="number"
{...props}
/>
);
diff --git a/packages/vitnode/src/views/admin/views/core/advanced/search/remove-documents-action.tsx b/packages/vitnode/src/views/admin/views/core/advanced/search/remove-documents-action.tsx
index a51a6dc97..39575b5ad 100644
--- a/packages/vitnode/src/views/admin/views/core/advanced/search/remove-documents-action.tsx
+++ b/packages/vitnode/src/views/admin/views/core/advanced/search/remove-documents-action.tsx
@@ -21,6 +21,7 @@ export const RemoveCollectionDocumentsAction = ({
return (
<ConfirmActionAlertDialog
description={t("removeConfirmDescription")}
+ icon={<Trash2Icon />}
onSubmit={async ({ onClose }) => {
const result = await onClear(itemType);
diff --git a/packages/vitnode/src/views/admin/views/core/dashboard/grid/widget-properties.tsx b/packages/vitnode/src/views/admin/views/core/dashboard/grid/widget-properties.tsx
index f6bcc7d34..c7f0ce167 100644
--- a/packages/vitnode/src/views/admin/views/core/dashboard/grid/widget-properties.tsx
+++ b/packages/vitnode/src/views/admin/views/core/dashboard/grid/widget-properties.tsx
@@ -5,7 +5,7 @@ import { useTranslations } from "use-intl";
import { Button } from "@/components/ui/button";
import { Label } from "@/components/ui/label";
-import { Loader } from "@/components/ui/loader";
+import { Spinner } from "@/components/ui/spinner";
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
import { TooltipWithContent } from "@/components/ui/tooltip";
@@ -148,7 +148,13 @@ const WidgetSettingsSection = ({ widget }: { widget: DashboardWidgetView }) => {
return (
<WidgetSettingsDialogContext value={value}>
- <React.Suspense fallback={<Loader />}>
+ <React.Suspense
+ fallback={
+ <div className="flex items-center justify-center">
+ <Spinner size="xl" />
+ </div>
+ }
+ >
<SettingsForm form={form} />
</React.Suspense>
</WidgetSettingsDialogContext>
diff --git a/packages/vitnode/src/views/admin/views/core/debug/actions/clear-cache/clear-cache.tsx b/packages/vitnode/src/views/admin/views/core/debug/actions/clear-cache/clear-cache.tsx
index 24c0c99db..473cc5a58 100644
--- a/packages/vitnode/src/views/admin/views/core/debug/actions/clear-cache/clear-cache.tsx
+++ b/packages/vitnode/src/views/admin/views/core/debug/actions/clear-cache/clear-cache.tsx
@@ -16,6 +16,7 @@ export const ClearCacheAction = ({
return (
<ConfirmActionAlertDialog
description={t("desc")}
+ icon={<BrushCleaningIcon />}
onSubmit={async ({ onClose }) => {
try {
await onClearCache();
diff --git a/packages/vitnode/src/views/admin/views/core/debug/system-logs/actions/more/more.tsx b/packages/vitnode/src/views/admin/views/core/debug/system-logs/actions/more/more.tsx
index ec20e4c85..398c3d097 100644
--- a/packages/vitnode/src/views/admin/views/core/debug/system-logs/actions/more/more.tsx
+++ b/packages/vitnode/src/views/admin/views/core/debug/system-logs/actions/more/more.tsx
@@ -11,7 +11,7 @@ import {
DialogTitle,
DialogTrigger,
} from "@/components/ui/dialog";
-import { Loader } from "@/components/ui/loader";
+import { Spinner } from "@/components/ui/spinner";
import { TooltipWithContent } from "@/components/ui/tooltip";
const ContentMoreActionSystemLogs = React.lazy(async () =>
@@ -50,7 +50,13 @@ export const MoreActionSystemLogs = (
</DialogDescription>
</DialogHeader>
- <React.Suspense fallback={<Loader />}>
+ <React.Suspense
+ fallback={
+ <div className="flex items-center justify-center">
+ <Spinner size="xl" />
+ </div>
+ }
+ >
<ContentMoreActionSystemLogs {...props} />
</React.Suspense>
</DialogContent>
diff --git a/packages/vitnode/src/views/admin/views/core/navigation/navigation-create-dialog.tsx b/packages/vitnode/src/views/admin/views/core/navigation/navigation-create-dialog.tsx
index 36173bd88..929edff2f 100644
--- a/packages/vitnode/src/views/admin/views/core/navigation/navigation-create-dialog.tsx
+++ b/packages/vitnode/src/views/admin/views/core/navigation/navigation-create-dialog.tsx
@@ -24,7 +24,7 @@ import {
useDialog,
} from "@/components/ui/dialog";
import { EmojiIcon } from "@/components/ui/emoji-icon";
-import { Loader } from "@/components/ui/loader";
+import { Spinner } from "@/components/ui/spinner";
import { TooltipWithContent } from "@/components/ui/tooltip";
import { parseEmojiIcon } from "@/lib/emoji-icon";
import {
@@ -263,7 +263,13 @@ const NavigationCreateDetailsStep = ({
</DialogDescription>
</DialogHeader>
- <React.Suspense fallback={<Loader />}>
+ <React.Suspense
+ fallback={
+ <div className="flex items-center justify-center">
+ <Spinner size="xl" />
+ </div>
+ }
+ >
<AdminNavigationFormContent
items={items}
kind={choice.kind}
diff --git a/packages/vitnode/src/views/admin/views/core/navigation/navigation-list-content.tsx b/packages/vitnode/src/views/admin/views/core/navigation/navigation-list-content.tsx
index 7d708de1d..c696b957e 100644
--- a/packages/vitnode/src/views/admin/views/core/navigation/navigation-list-content.tsx
+++ b/packages/vitnode/src/views/admin/views/core/navigation/navigation-list-content.tsx
@@ -80,13 +80,14 @@ import {
EmptyMedia,
EmptyTitle,
} from "@/components/ui/empty";
-import { Loader } from "@/components/ui/loader";
import {
SheetContent,
SheetDescription,
SheetHeader,
SheetTitle,
} from "@/components/ui/sheet";
+import { SlidingNumber } from "@/components/ui/sliding-number";
+import { Spinner } from "@/components/ui/spinner";
import { TooltipWithContent } from "@/components/ui/tooltip";
import { parseEmojiIcon } from "@/lib/emoji-icon";
import {
@@ -446,8 +447,8 @@ const SortableNavigationRow = ({
{name}
</span>
{isCollapsed && childCount > 0 ? (
- <Badge className="tabular-nums" variant="secondary">
- {childCount}
+ <Badge variant="secondary">
+ <SlidingNumber value={childCount} />
</Badge>
) : null}
{item.isOpenInNewTab && !isMissing ? (
@@ -632,7 +633,13 @@ const NavigationEditSheetBody = ({
<SheetDescription className="truncate">{name}</SheetDescription>
</SheetHeader>
- <React.Suspense fallback={<Loader />}>
+ <React.Suspense
+ fallback={
+ <div className="flex items-center justify-center">
+ <Spinner size="xl" />
+ </div>
+ }
+ >
<AdminNavigationFormContent
data={item}
items={items}
diff --git a/packages/vitnode/src/views/admin/views/core/staff/table/staff-table-content.tsx b/packages/vitnode/src/views/admin/views/core/staff/table/staff-table-content.tsx
index 87250a949..cb7e170b4 100644
--- a/packages/vitnode/src/views/admin/views/core/staff/table/staff-table-content.tsx
+++ b/packages/vitnode/src/views/admin/views/core/staff/table/staff-table-content.tsx
@@ -83,6 +83,7 @@ const StaffRowActions = ({
{canDelete && (
<ConfirmActionAlertDialog
description={t("delete.desc")}
+ icon={<Trash2Icon />}
onSubmit={async ({ onClose }) => {
const result = await onDelete({ id: row.id, type });
if ("error" in result) {
diff --git a/packages/vitnode/src/views/admin/views/core/system/files/actions/file-row-actions.tsx b/packages/vitnode/src/views/admin/views/core/system/files/actions/file-row-actions.tsx
index 7d436ec1c..01275d589 100644
--- a/packages/vitnode/src/views/admin/views/core/system/files/actions/file-row-actions.tsx
+++ b/packages/vitnode/src/views/admin/views/core/system/files/actions/file-row-actions.tsx
@@ -96,6 +96,7 @@ export const FileRowActions = ({
})
: t("delete.desc")
}
+ icon={<Trash2Icon />}
onOpenChange={open => {
if (!open) setHeldByRevisions(null);
}}
diff --git a/packages/vitnode/src/views/admin/views/core/system/files/actions/files-bulk-actions.tsx b/packages/vitnode/src/views/admin/views/core/system/files/actions/files-bulk-actions.tsx
index 75357abb6..9b3d67a6a 100644
--- a/packages/vitnode/src/views/admin/views/core/system/files/actions/files-bulk-actions.tsx
+++ b/packages/vitnode/src/views/admin/views/core/system/files/actions/files-bulk-actions.tsx
@@ -50,6 +50,7 @@ export const FilesBulkActions = ({
? t("bulk_delete.in_use.revisions.desc", { count: ids.length })
: t("bulk_delete.desc", { count: ids.length })
}
+ icon={<Trash2Icon />}
onOpenChange={open => {
if (!open) setHeldByRevisions([]);
}}
diff --git a/packages/vitnode/src/views/admin/views/core/system/integrations/send-test-email/send-test-email.tsx b/packages/vitnode/src/views/admin/views/core/system/integrations/send-test-email/send-test-email.tsx
index 908c8c909..6222df580 100644
--- a/packages/vitnode/src/views/admin/views/core/system/integrations/send-test-email/send-test-email.tsx
+++ b/packages/vitnode/src/views/admin/views/core/system/integrations/send-test-email/send-test-email.tsx
@@ -11,7 +11,7 @@ import {
DialogTitle,
DialogTrigger,
} from "@/components/ui/dialog";
-import { Loader } from "@/components/ui/loader";
+import { Spinner } from "@/components/ui/spinner";
import type { SendTestEmail } from "./send-test-email-mutation";
@@ -40,7 +40,13 @@ export const SendTestEmailAction = ({ onSend }: { onSend: SendTestEmail }) => {
<DialogDescription>{t("desc")}</DialogDescription>
</DialogHeader>
- <React.Suspense fallback={<Loader />}>
+ <React.Suspense
+ fallback={
+ <div className="flex items-center justify-center">
+ <Spinner size="xl" />
+ </div>
+ }
+ >
<ContentSendTestEmail onSend={onSend} />
</React.Suspense>
</DialogContent>
diff --git a/packages/vitnode/src/views/admin/views/core/system/integrations/test-ai/test-ai.tsx b/packages/vitnode/src/views/admin/views/core/system/integrations/test-ai/test-ai.tsx
index 1e94a1323..f160711c6 100644
--- a/packages/vitnode/src/views/admin/views/core/system/integrations/test-ai/test-ai.tsx
+++ b/packages/vitnode/src/views/admin/views/core/system/integrations/test-ai/test-ai.tsx
@@ -11,7 +11,7 @@ import {
DialogTitle,
DialogTrigger,
} from "@/components/ui/dialog";
-import { Loader } from "@/components/ui/loader";
+import { Spinner } from "@/components/ui/spinner";
const ContentTestAI = React.lazy(async () =>
import("./content").then(module => ({
@@ -43,7 +43,13 @@ export const TestAIAction = ({ models }: { models: TestAIModel[] }) => {
<DialogDescription>{t("desc")}</DialogDescription>
</DialogHeader>
- <React.Suspense fallback={<Loader />}>
+ <React.Suspense
+ fallback={
+ <div className="flex items-center justify-center">
+ <Spinner size="xl" />
+ </div>
+ }
+ >
<ContentTestAI models={models} />
</React.Suspense>
</DialogContent>
diff --git a/packages/vitnode/src/views/admin/views/core/system/integrations/test-storage/test-storage.tsx b/packages/vitnode/src/views/admin/views/core/system/integrations/test-storage/test-storage.tsx
index 03c78d192..8a55c5cd2 100644
--- a/packages/vitnode/src/views/admin/views/core/system/integrations/test-storage/test-storage.tsx
+++ b/packages/vitnode/src/views/admin/views/core/system/integrations/test-storage/test-storage.tsx
@@ -11,7 +11,7 @@ import {
DialogTitle,
DialogTrigger,
} from "@/components/ui/dialog";
-import { Loader } from "@/components/ui/loader";
+import { Spinner } from "@/components/ui/spinner";
const ContentTestStorage = React.lazy(async () =>
import("./content").then(module => ({
@@ -38,7 +38,13 @@ export const TestStorageAction = () => {
<DialogDescription>{t("desc")}</DialogDescription>
</DialogHeader>
- <React.Suspense fallback={<Loader />}>
+ <React.Suspense
+ fallback={
+ <div className="flex items-center justify-center">
+ <Spinner size="xl" />
+ </div>
+ }
+ >
<ContentTestStorage />
</React.Suspense>
</DialogContent>
diff --git a/packages/vitnode/src/views/admin/views/core/users/list/create-user-content.tsx b/packages/vitnode/src/views/admin/views/core/users/list/create-user-content.tsx
index 11dfdca1b..f5dc871df 100644
--- a/packages/vitnode/src/views/admin/views/core/users/list/create-user-content.tsx
+++ b/packages/vitnode/src/views/admin/views/core/users/list/create-user-content.tsx
@@ -17,7 +17,7 @@ import {
DialogTitle,
DialogTrigger,
} from "@/components/ui/dialog";
-import { Loader } from "@/components/ui/loader";
+import { Spinner } from "@/components/ui/spinner";
export type CreateAdminUser = (
input: AdminUserCreateInput,
@@ -52,7 +52,13 @@ export const CreateUserAdminContent = ({
<DialogDescription>{t("desc")}</DialogDescription>
</DialogHeader>
- <React.Suspense fallback={<Loader />}>
+ <React.Suspense
+ fallback={
+ <div className="flex items-center justify-center">
+ <Spinner size="xl" />
+ </div>
+ }
+ >
<CreateUserForm onCreate={onCreate} />
</React.Suspense>
</DialogContent>
diff --git a/packages/vitnode/src/views/admin/views/core/users/roles/roles-table-content.tsx b/packages/vitnode/src/views/admin/views/core/users/roles/roles-table-content.tsx
index a5049af47..edd8e9f0d 100644
--- a/packages/vitnode/src/views/admin/views/core/users/roles/roles-table-content.tsx
+++ b/packages/vitnode/src/views/admin/views/core/users/roles/roles-table-content.tsx
@@ -47,7 +47,6 @@ import {
DialogTitle,
DialogTrigger,
} from "@/components/ui/dialog";
-import { Loader } from "@/components/ui/loader";
import {
Popover,
PopoverContent,
@@ -319,7 +318,13 @@ const EditRoleAction = ({
<DialogTitle>{t("title")}</DialogTitle>
</DialogHeader>
- <React.Suspense fallback={<Loader />}>
+ <React.Suspense
+ fallback={
+ <div className="flex items-center justify-center">
+ <Spinner size="xl" />
+ </div>
+ }
+ >
<AdminRoleFormContent data={role} onSave={onSave} onSaved={onSaved} />
</React.Suspense>
</DialogContent>
@@ -396,7 +401,13 @@ export const CreateRoleAction = ({
<DialogDescription>{t("desc")}</DialogDescription>
</DialogHeader>
- <React.Suspense fallback={<Loader />}>
+ <React.Suspense
+ fallback={
+ <div className="flex items-center justify-center">
+ <Spinner size="xl" />
+ </div>
+ }
+ >
<AdminRoleFormContent onSave={onSave} onSaved={onSaved} />
</React.Suspense>
</DialogContent>
diff --git a/packages/vitnode/src/views/auth/settings/devices/revoke-device-button.tsx b/packages/vitnode/src/views/auth/settings/devices/revoke-device-button.tsx
index 682a1203e..a3be2487e 100644
--- a/packages/vitnode/src/views/auth/settings/devices/revoke-device-button.tsx
+++ b/packages/vitnode/src/views/auth/settings/devices/revoke-device-button.tsx
@@ -30,6 +30,7 @@ export const RevokeDeviceButton = ({
<Tooltip>
<ConfirmActionAlertDialog
description={t("desc", { os })}
+ icon={<LogOutIcon />}
onSubmit={async ({ onClose }) => {
const result = await onRevoke({ publicId });
diff --git a/packages/vitnode/src/views/auth/settings/passkeys/delete-passkey-button.tsx b/packages/vitnode/src/views/auth/settings/passkeys/delete-passkey-button.tsx
index 3b2a93aa2..f54fed5c6 100644
--- a/packages/vitnode/src/views/auth/settings/passkeys/delete-passkey-button.tsx
+++ b/packages/vitnode/src/views/auth/settings/passkeys/delete-passkey-button.tsx
@@ -32,6 +32,7 @@ export const DeletePasskeyButton = ({
<Tooltip>
<ConfirmActionAlertDialog
description={t("delete.desc", { name })}
+ icon={<Trash2Icon />}
onSubmit={async ({ onClose }) => {
const result = await onDelete({ id });
diff --git a/packages/vitnode/src/views/auth/settings/sso/disconnect-sso-button.tsx b/packages/vitnode/src/views/auth/settings/sso/disconnect-sso-button.tsx
index e63655a4a..6a534fbb9 100644
--- a/packages/vitnode/src/views/auth/settings/sso/disconnect-sso-button.tsx
+++ b/packages/vitnode/src/views/auth/settings/sso/disconnect-sso-button.tsx
@@ -32,6 +32,7 @@ export const DisconnectSsoButton = ({
</span>
</span>
}
+ icon={<UnlinkIcon />}
onSubmit={async ({ onClose }) => {
const result = await onDisconnect({ providerId });
diff --git a/packages/vitnode/src/views/auth/sso/callback/sso-callback-content.tsx b/packages/vitnode/src/views/auth/sso/callback/sso-callback-content.tsx
index f60edc353..ca63b96f6 100644
--- a/packages/vitnode/src/views/auth/sso/callback/sso-callback-content.tsx
+++ b/packages/vitnode/src/views/auth/sso/callback/sso-callback-content.tsx
@@ -3,7 +3,7 @@ import { useTranslations } from "use-intl";
import { Button } from "@/components/ui/button";
import { Card, CardDescription } from "@/components/ui/card";
-import { Loader } from "@/components/ui/loader";
+import { Spinner } from "@/components/ui/spinner";
import { ErrorContent } from "@/views/error/error-content";
import type { SSOLinkSubmit } from "../link/sso-link-form-content";
@@ -123,7 +123,9 @@ export const SSOCallbackContent = ({
return (
<div className="container mx-auto flex items-center justify-center p-4">
- <Loader />
+ <div className="flex items-center justify-center">
+ <Spinner size="xl" />
+ </div>
</div>
);
};
diff --git a/packages/vitnode/src/views/files/actions/file-row-actions.tsx b/packages/vitnode/src/views/files/actions/file-row-actions.tsx
index 666dc8394..864579912 100644
--- a/packages/vitnode/src/views/files/actions/file-row-actions.tsx
+++ b/packages/vitnode/src/views/files/actions/file-row-actions.tsx
@@ -85,6 +85,7 @@ export const MyFileRowActions = ({
})
: t("delete.desc")
}
+ icon={<Trash2Icon />}
onOpenChange={open => {
if (!open) setHeldByRevisions(null);
}}
diff --git a/packages/vitnode/src/views/files/actions/files-bulk-actions.tsx b/packages/vitnode/src/views/files/actions/files-bulk-actions.tsx
index 53a14f9e0..4ccce5c54 100644
--- a/packages/vitnode/src/views/files/actions/files-bulk-actions.tsx
+++ b/packages/vitnode/src/views/files/actions/files-bulk-actions.tsx
@@ -50,6 +50,7 @@ export const MyFilesBulkActions = ({
? t("bulk_delete.in_use.revisions.desc", { count: ids.length })
: t("bulk_delete.desc", { count: ids.length })
}
+ icon={<Trash2Icon />}
onOpenChange={open => {
if (!open) setHeldByRevisions([]);
}}
diff --git a/packages/vitnode/src/views/layouts/providers.tsx b/packages/vitnode/src/views/layouts/providers.tsx
index 3eac33675..467dbfc38 100644
--- a/packages/vitnode/src/views/layouts/providers.tsx
+++ b/packages/vitnode/src/views/layouts/providers.tsx
@@ -47,11 +47,7 @@ export const VitNodeProviders = ({
enableSystem
{...theme}
>
- <Toaster
- closeButton
- position={toaster?.position ?? "top-center"}
- {...toaster}
- />
+ <Toaster closeButton {...toaster} />
<RateLimitListener />
<TooltipProvider>
<LanguagesProvider languages={locales}>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 66bbb32c7..0ba94dc37 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -212,6 +212,9 @@ importers:
react-dom:
specifier: ^19.3.0
version: 19.3.0(react@19.3.0)
+ recharts:
+ specifier: ^3.10.1
+ version: 3.10.1(@types/react@19.3.0)(react-dom@19.3.0(react@19.3.0))(react-is@17.0.2)(react@19.3.0)(redux@5.0.1)
shadcn:
specifier: ^4.21.0
version: 4.21.0(typescript@6.0.3)
@@ -12902,7 +12905,7 @@ snapshots:
immer: 11.1.18
redux: 5.0.1
redux-thunk: 3.1.0(redux@5.0.1)
- reselect: 5.2.0
+ reselect: 5.3.0
optionalDependencies:
react: 19.3.0
react-redux: 9.3.0(@types/react@19.3.0)(react@19.3.0)(redux@5.0.1)
+