# rapidUI – full documentation

> Accessible, themeable React components for the Rapid Development Framework. Built on shadcn/ui and Base UI, installed with the shadcn CLI.

## Setup

rapidUI is a shadcn/ui registry. Components are copied into the project as source (`components/ui/*`), not installed as a package. Requires React 19, Tailwind CSS v4 and a `components.json` (run `npx shadcn@latest init` first if it is missing).

1. Apply the Rapid theme (CSS variables, fonts, base styles):
   `npx shadcn@latest init https://rdf.dev.360online.com/r/styles/rapid.json`
2. Add a component:
   `npx shadcn@latest add https://rdf.dev.360online.com/r/button.json`
3. Import it:
   `import { Button } from '@/components/ui/button'`

Optional: register the namespace in `components.json` to use short names (`npx shadcn@latest add @rapid/button`):

```json
{ "registries": { "@rapid": "https://rdf.dev.360online.com/r/{name}.json" } }
```

Rules for agents:
- Install with the shadcn CLI instead of writing components by hand; dependencies between components resolve automatically.
- Use theme tokens (`bg-primary`, `text-muted-foreground`, `border-border`, …) rather than raw colours.
- The theme uses shadcn's CSS variables plus `--success` and `--warning` (with `-foreground`), so any shadcn component or example works unchanged. Use `text-success`, `bg-warning/10` and so on for status colours. Buttons and fields are 40px by default (32px for `sm`), text 14px and badges 12px.
- Components are built on Base UI: compose with the `render` prop (e.g. `<DialogTrigger render={<Button />}>`), there is no `asChild`. Changes from the Radix version: https://rdf.dev.360online.com/docs/base-ui/

---

# Accordion

Vertically stacked, collapsible sections built on Base UI Accordion.

Install: `npx shadcn@latest add https://rdf.dev.360online.com/r/accordion.json`

Import from: `@/components/ui/accordion`

npm dependencies: @base-ui/react@^1.8.0, lucide-react@^1.48.0

A vertically stacked set of interactive headings that each reveal a section of content.
Built on top of [Base UI Accordion](https://base-ui.com/react/components/accordion),
it follows WAI-ARIA design patterns and animates open and closed.

### Features

- One expanded section at a time by default, or several with `multiple`
- Every open section can be closed again
- Height animation on open/close (`animate-accordion-down` / `animate-accordion-up`)
- Chevron indicator that switches from down to up when the item is expanded
- Items are separated by a bottom border (except the last one)
- Content styles for rich text: links are underlined and consecutive paragraphs are spaced
- Disabled items
- Keyboard navigation and screen reader support
- `data-slot` attributes (`accordion`, `accordion-item`, `accordion-trigger`, `accordion-content`) for styling hooks

### Usage

```tsx
import {
  Accordion,
  AccordionItem,
  AccordionTrigger,
  AccordionContent,
} from '@/components/ui/accordion'

// One section open at a time
export function PermitFaq() {
  return (
    <Accordion>
      <AccordionItem value="need-permit">
        <AccordionTrigger>Do I need a building permit for a garden shed?</AccordionTrigger>
        <AccordionContent>Not if it is smaller than 15 m² and lower than 3 metres.</AccordionContent>
      </AccordionItem>
      <AccordionItem value="processing-time">
        <AccordionTrigger>How long does it take to get a decision?</AccordionTrigger>
        <AccordionContent>Most complete applications are decided within 4 weeks.</AccordionContent>
      </AccordionItem>
    </Accordion>
  )
}

// Several sections open at once
export function CaseDetails() {
  return (
    <Accordion multiple defaultValue={['applicant']}>
      <AccordionItem value="applicant">
        <AccordionTrigger>Applicant</AccordionTrigger>
        <AccordionContent>Anna Lindqvist</AccordionContent>
      </AccordionItem>
      <AccordionItem value="property">
        <AccordionTrigger>Property</AccordionTrigger>
        <AccordionContent>Eken 4:12, Storgatan 14</AccordionContent>
      </AccordionItem>
    </Accordion>
  )
}
```

#### Default

A FAQ for a building permit e-service. By default one answer is open at a time, and `defaultValue={['need-permit']}` opens the first one. `value` and `defaultValue` are always arrays.

#### Multiple Sections

With `multiple` several sections can be open at once, which suits a case summary where the handling officer
compares applicant and property details side by side.

#### Bordered

Wrap the accordion in a border and pad the items with `className` for a card-like list. Triggers can hold an icon next
to the label.

#### Disabled State

Disable an `AccordionItem` for a step that is not available yet, here the offer in a preschool placement application.

#### Rich Content

Paragraphs and links inside `AccordionContent` get spacing and underline styles automatically, and you can add actions
such as a button.

### Props


#### Accordion
- `multiple` - Whether several items can be open at once (default `false`)
- `defaultValue` - The values of the items to open by default (an array, also when only one item can be open)
- `value` - The controlled values of the open items (an array)
- `onValueChange` - Event handler for when the opened items change, `(value, eventDetails) => void`
- `hiddenUntilFound` - Keep closed panels findable with the browser's find-in-page, which opens the matching item
- `disabled` - Disables every item
- `className` - Additional CSS classes (the root is a full-width flex column)

#### AccordionItem
- `value` - Unique identifier for the item
- `disabled` - Whether the item is disabled
- `className` - Additional CSS classes

#### AccordionTrigger
- `children` - Content to display in the trigger. A chevron icon is appended automatically.
- `headingLevel` - The heading level wrapping the trigger: `2`, `3` or `4` (default `3`). Pick the level that follows the heading above the accordion, so the page outline skips no level, for example `2` when it sits directly under the page's H1.
- `className` - Additional CSS classes

#### AccordionContent
- `children` - Content to display when expanded
- `className` - Additional CSS classes

### Accessibility

The Accordion component follows WAI-ARIA guidelines:

- Uses proper ARIA roles (`region`, `button`)
- Supports keyboard navigation:
  - `Space/Enter`: Toggle section
  - `Tab`: Navigate between sections
  - `Home/End`: Move to first/last section
- Announces state changes to screen readers
- Maintains focus management
- Provides visual feedback for interaction states

### Best Practices

1. Content Organization:
   - Group related content together
   - Use clear, descriptive headers
   - Keep content concise and focused

2. Visual Hierarchy:
   - Use consistent spacing
   - Maintain clear section boundaries
   - Provide visual feedback for state changes

3. Accessibility:
   - Write descriptive trigger text
   - Ensure keyboard navigation
   - Maintain sufficient touch targets

4. Performance:
   - Lazy load content when possible
   - Use appropriate animations
   - Consider content height changes

5. User Experience:
   - Allow section collapse when appropriate
   - Provide smooth transitions
   - Consider default open states

### Related Components

- Tabs
- Collapsible

## Source

File: components/ui/accordion.tsx

```tsx
'use client'

import { Accordion as AccordionPrimitive } from '@base-ui/react/accordion'
import { ChevronDownIcon, ChevronUpIcon } from 'lucide-react'
import { cn } from '@/lib/utils'

function Accordion({ className, ...props }: AccordionPrimitive.Root.Props) {
	return <AccordionPrimitive.Root data-slot="accordion" className={cn('flex w-full flex-col', className)} {...props} />
}

function AccordionItem({ className, ...props }: AccordionPrimitive.Item.Props) {
	return <AccordionPrimitive.Item data-slot="accordion-item" className={cn('not-last:border-b', className)} {...props} />
}

interface AccordionTriggerProps extends AccordionPrimitive.Trigger.Props {
	/** The heading level wrapping the trigger, to fit the page's outline. Defaults to 3. */
	headingLevel?: 2 | 3 | 4
}

function AccordionTrigger({ className, children, headingLevel = 3, ...props }: Readonly<AccordionTriggerProps>) {
	const Heading = `h${headingLevel}` as const
	return (
		<AccordionPrimitive.Header className="flex" render={(headerProps) => <Heading {...headerProps} />}>
			<AccordionPrimitive.Trigger
				data-slot="accordion-trigger"
				className={cn(
					'group/accordion-trigger relative flex flex-1 items-start justify-between rounded-lg border border-transparent py-2.5 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring focus-visible:after:border-ring aria-disabled:pointer-events-none aria-disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 **:data-[slot=accordion-trigger-icon]:text-muted-foreground',
					className,
				)}
				{...props}
			>
				{children}
				<ChevronDownIcon
					aria-hidden="true"
					data-slot="accordion-trigger-icon"
					className="pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden"
				/>
				<ChevronUpIcon
					aria-hidden="true"
					data-slot="accordion-trigger-icon"
					className="pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline"
				/>
			</AccordionPrimitive.Trigger>
		</AccordionPrimitive.Header>
	)
}

function AccordionContent({ className, children, ...props }: AccordionPrimitive.Panel.Props) {
	return (
		<AccordionPrimitive.Panel
			data-slot="accordion-content"
			className="overflow-hidden text-sm data-open:animate-accordion-down data-closed:animate-accordion-up"
			{...props}
		>
			{/* No fixed height here: the open/close keyframes on the panel use --accordion-panel-height, and at rest the
			    content keeps its natural height so it can reflow (zoom, text spacing, content that grows) */}
			<div
				className={cn(
					'pt-0 pb-2.5 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4',
					className,
				)}
			>
				{children}
			</div>
		</AccordionPrimitive.Panel>
	)
}

export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }
```

---

# Alert

Inline callout for status messages, with default and destructive variants and an optional action.

Install: `npx shadcn@latest add https://rdf.dev.360online.com/r/alert.json`

Import from: `@/components/ui/alert`

npm dependencies: class-variance-authority@^0.7.1

A versatile alert component for displaying callouts and inline messages. Built with class-variance-authority and styled with Tailwind CSS for consistent visual hierarchy.

### Features

- Five variants: `default`, `destructive`, `info`, `success` and `warning`
- Optional leading icon: place an `svg` as the first child and the layout switches to a two-column grid
- Composable `AlertTitle`, `AlertDescription` and `AlertAction`
- `AlertAction` pins a button to the top-right corner
- Links inside title and description are underlined automatically
- A `role` that follows the variant: `alert` for `destructive`, `status` for the others. Override it with the `role` prop
- `data-slot` attributes on every part

### Usage

```tsx
import { Alert, AlertAction, AlertDescription, AlertTitle } from '@/components/ui/alert'
import { Button } from '@/components/ui/button'
import { CalendarClockIcon, WrenchIcon } from 'lucide-react'

export function ServiceNotices() {
  return (
    <div className="flex flex-col gap-4">
      {/* Simple alert */}
      <Alert>
        <WrenchIcon />
        <AlertTitle>Planned maintenance on Saturday</AlertTitle>
        <AlertDescription>
          E-services will be unavailable on 14 March 2026 between 22:00 and 02:00.
        </AlertDescription>
      </Alert>

      {/* With action */}
      <Alert>
        <CalendarClockIcon />
        <AlertTitle>Your parking permit expires in 12 days</AlertTitle>
        <AlertDescription>Resident permit for zone C, valid until 10 April 2026.</AlertDescription>
        <AlertAction>
          <Button size="xs" variant="outline">
            Renew
          </Button>
        </AlertAction>
      </Alert>
    </div>
  )
}
```

#### Default Alert

A neutral notice about planned maintenance of the e-services.

#### Variants

`default` for neutral notices, `info` for information worth noticing, `success` for confirmations, `warning` for things
the user should act on soon, and `destructive` for errors that stop them.

#### Status Messages

Service messages with the `success`, `info` and `warning` variants. The tinted background and icon colour give each
message its tone, but the icon and title carry the meaning, so status never relies on colour alone.

```tsx
<Alert variant="warning">
  <TriangleAlertIcon />
  <AlertTitle>Water outage on Kungsgatan</AlertTitle>
  <AlertDescription>Kungsgatan 1–27 is without water until about 15:00.</AlertDescription>
</Alert>
```

#### Roles

The `role` decides how a screen reader announces the message:

| Role | Default for | Announcement | Use it for |
| --- | --- | --- | --- |
| `alert` | `destructive` | At once, interrupting what is being read | Errors and urgent messages that appear after an action: a failed submission, a session about to end |
| `status` | `default`, `info`, `success`, `warning` | When the screen reader is idle, and only if the alert appears after the page has loaded | Confirmations and updates: a saved draft, a sent application |
| `note` or none | – | Never; it is read in its place on the page | Static guidance that is there from the start: processing times, opening hours |

```tsx
// Static guidance, never announced
<Alert role="note">…</Alert>

// An urgent warning, announced at once
<Alert variant="warning" role="alert">…</Alert>

// No role at all
<Alert role={undefined}>…</Alert>
```

#### With Action

`AlertAction` places a button, such as an action or a dismiss button, in the top-right corner.

#### With List

Summarise form errors at the top of a form and link each one to its field.

#### Compact

Title-only or description-only alerts for short, single-line messages.

### Subcomponents

- `Alert` - The container; accepts `variant` (`'default' | 'destructive' | 'info' | 'success' | 'warning'`, default `'default'`), `role` (default `'alert'` for `destructive`, `'status'` otherwise) and all `div` attributes
- `AlertTitle` - The alert title (renders an `h5`)
- `AlertDescription` - The alert description/content
- `AlertAction` - Absolutely positioned slot for an action button in the top-right corner

### Variants

- `default` - Neutral alert for general information
- `destructive` - Alert for errors and critical information
- `info` - Primary tint for information the user should notice
- `success` - Green tint for confirmations, such as a sent application or a granted permit
- `warning` - Amber tint for things that need attention, such as missing documents or a service disruption

The status variants keep body text in `foreground` and colour only the border, background and icon, so text contrast
stays above 4.5:1 in light and dark mode.

### Accessibility

- `destructive` alerts use `role="alert"`, which screen readers announce immediately and interrupt the user for. Keep it for errors and time-sensitive messages
- The other variants use `role="status"`: announced politely when the alert appears after the page has loaded, and silent when it is on the page from the start. This covers WCAG 2.2 success criterion 4.1.3 (Status Messages) without interrupting
- Pass `role="alert"` for an urgent message in another variant, and `role="note"` for static guidance that should never be announced
- Live regions are announced most reliably when the alert is added to a page that is already loaded. For a message shown after navigation, move focus to it or to the page heading instead
- Icons are decorative; make sure the title or description conveys the meaning. Status is carried by text and an icon, never by colour alone
- Give icon-only buttons in `AlertAction` an `aria-label`

### Best Practices

1. **Choose appropriate variants**:
   - Use `default` for general notices
   - Use `info`, `success` and `warning` for status messages
   - Use `destructive` for errors and critical information

2. **Content guidelines**:
   - Keep titles concise and descriptive
   - Provide clear, actionable descriptions
   - Use icons that reinforce the message type

3. **Layout considerations**:
   - Place alerts near the content they relate to
   - Use consistent spacing between multiple alerts

### Common Patterns

#### Form Validation
```tsx
<Alert variant="destructive">
  <CircleAlertIcon />
  <AlertTitle>Fix 2 problems before you send the application</AlertTitle>
  <AlertDescription>
    <ul className="list-inside list-disc">
      <li><a href="#property">Property designation</a> is missing</li>
      <li><a href="#site-plan">Site plan</a> must be a PDF file</li>
    </ul>
  </AlertDescription>
</Alert>
```

#### Success Notification
```tsx
<Alert variant="success">
  <CheckCircle2Icon />
  <AlertTitle>Application sent</AlertTitle>
  <AlertDescription>
    Your case number is 2026-04812. We have sent a confirmation to your email.
  </AlertDescription>
</Alert>
```

#### Dismissible Banner
```tsx
<Alert>
  <InfoIcon />
  <AlertDescription>
    From 1 June the city library is open until 20:00 on weekdays.
  </AlertDescription>
  <AlertAction>
    <Button size="icon-xs" variant="ghost" aria-label="Dismiss">
      <XIcon />
    </Button>
  </AlertAction>
</Alert>
```

## Source

File: components/ui/alert.tsx

```tsx
import { cva, type VariantProps } from 'class-variance-authority'
import type * as React from 'react'
import { cn } from '@/lib/utils'

const alertVariants = cva(
	"group/alert relative grid w-full gap-0.5 rounded-lg border px-2.5 py-2 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4",
	{
		variants: {
			variant: {
				default: 'bg-background text-foreground *:[svg]:text-foreground',
				destructive:
					'border-destructive-border bg-destructive-subtle text-foreground *:[svg]:text-destructive-subtle-foreground',
				info: 'border-info-border bg-info-subtle text-foreground *:[svg]:text-info-subtle-foreground',
				success: 'border-success-border bg-success-subtle text-foreground *:[svg]:text-success-subtle-foreground',
				warning: 'border-warning-border bg-warning-subtle text-foreground *:[svg]:text-warning-subtle-foreground',
			},
		},
		defaultVariants: {
			variant: 'default',
		},
	},
)

/**
 * A callout for an inline message.
 *
 * The default `role` follows the variant: `destructive` is `alert`, which screen readers announce at once and
 * interrupt the user for; every other variant is `status`, which is announced politely when the message appears after
 * the page has loaded and stays quiet when it is there from the start. Pass `role="alert"` for an urgent message in
 * another variant, or `role="note"` (or `role={undefined}`) for static text that should never be announced.
 */
function Alert({ className, variant, ...props }: React.ComponentProps<'div'> & VariantProps<typeof alertVariants>) {
	return (
		<div
			data-slot="alert"
			role={variant === 'destructive' ? 'alert' : 'status'}
			className={cn(alertVariants({ variant }), className)}
			{...props}
		/>
	)
}

function AlertTitle({ className, ...props }: React.ComponentProps<'h5'>) {
	return (
		<h5
			data-slot="alert-title"
			className={cn(
				'font-medium group-has-[>svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground',
				className,
			)}
			{...props}
		/>
	)
}

function AlertDescription({ className, ...props }: React.ComponentProps<'div'>) {
	return (
		<div
			data-slot="alert-description"
			className={cn(
				'text-sm text-balance md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4',
				className,
			)}
			{...props}
		/>
	)
}

function AlertAction({ className, ...props }: React.ComponentProps<'div'>) {
	return <div data-slot="alert-action" className={cn('absolute top-2 right-2', className)} {...props} />
}

export { Alert, AlertTitle, AlertDescription, AlertAction }
```

---

# Alert Dialog

Modal confirmation dialog that interrupts the user and expects a response.

Install: `npx shadcn@latest add https://rdf.dev.360online.com/r/alert-dialog.json`

Import from: `@/components/ui/alert-dialog`

Builds on: button

npm dependencies: @base-ui/react@^1.8.0

A modal dialog component that interrupts the user with important content and expects a response.
Built on top of [Base UI Alert Dialog](https://base-ui.com/react/components/alert-dialog),
it follows WAI-ARIA design patterns and provides a fully accessible dialog experience.

### Features

- Focus management
- Keyboard navigation
- Screen reader announcements
- Responsive design
- Customizable content
- Animated transitions
- Blurred backdrop overlay
- Two sizes: `default` and `sm` (`size` on `AlertDialogContent`)
- Optional icon/media slot (`AlertDialogMedia`)
- `AlertDialogAction` and `AlertDialogCancel` render as `Button`, accept its `variant` and `size`, and close the dialog when clicked
- Render the trigger as any component with the `render` prop, e.g. `render={<Button />}`
- Mobile-friendly
- ARIA compliant

### Usage

```tsx
import {
  AlertDialog,
  AlertDialogTrigger,
  AlertDialogContent,
  AlertDialogHeader,
  AlertDialogFooter,
  AlertDialogTitle,
  AlertDialogDescription,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogMedia,
} from '@/components/ui/alert-dialog'
import { Button } from '@/components/ui/button'
import { Trash2Icon } from 'lucide-react'

// Basic usage
export function WithdrawDialog() {
  return (
    <AlertDialog>
      <AlertDialogTrigger render={<Button variant="outline" />}>Withdraw application</AlertDialogTrigger>
      <AlertDialogContent>
        <AlertDialogHeader>
          <AlertDialogTitle>Withdraw case 2026-04812?</AlertDialogTitle>
          <AlertDialogDescription>
            The application will be closed and the handling officer notified.
          </AlertDialogDescription>
        </AlertDialogHeader>
        <AlertDialogFooter>
          <AlertDialogCancel>Keep application</AlertDialogCancel>
          <AlertDialogAction variant="destructive">Withdraw</AlertDialogAction>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  )
}

// Small size with media
export function DeleteDraftDialog() {
  return (
    <AlertDialog>
      <AlertDialogTrigger render={<Button variant="destructive" />}>Delete draft</AlertDialogTrigger>
      <AlertDialogContent size="sm">
        <AlertDialogHeader>
          <AlertDialogMedia>
            <Trash2Icon />
          </AlertDialogMedia>
          <AlertDialogTitle>Delete draft?</AlertDialogTitle>
          <AlertDialogDescription>Your draft application will be deleted permanently.</AlertDialogDescription>
        </AlertDialogHeader>
        <AlertDialogFooter>
          <AlertDialogCancel>Cancel</AlertDialogCancel>
          <AlertDialogAction variant="destructive">Delete</AlertDialogAction>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  )
}
```

#### Default

Confirm before a resident sends a school placement application that can’t be changed afterwards.

#### Destructive

A destructive action (`variant="destructive"` on `AlertDialogAction`) for withdrawing a building permit application.
Name the action on the button, not just "OK".

#### Small

A compact dialog (`size="sm"`) with centered content and full-width footer buttons.

#### With Media

An icon in `AlertDialogMedia` sits beside the title on larger screens. Tint it with `className`.

#### Small with Media

At `size="sm"` the media is centered above the title.

#### With Custom Content

Put a summary between the header and the footer so the user can check what they are cancelling.

#### With Form

A required message before a case is returned to the applicant. The action stays disabled until the field is filled in.

### Props


#### AlertDialogContent
- `size` - `'default' | 'sm'` (default `'default'`)
- `className` - Additional CSS classes

#### AlertDialogMedia
- `className` - Additional CSS classes
- `children` - Icon or image shown above (or, at default size on larger screens, beside) the title

#### AlertDialogAction
- `variant` - Button variant (default `'default'`)
- `size` - Button size (default `'default'`)
- Closes the dialog when clicked. For async work, control the dialog with `open` / `onOpenChange` and use a plain `Button` instead.

#### AlertDialogCancel
- `variant` - Button variant (default `'outline'`)
- `size` - Button size (default `'default'`)

### Accessibility

The Alert Dialog component follows WAI-ARIA guidelines for modal dialogs:

- Uses `role="alertdialog"` for critical interactions
- Manages focus trap within dialog
- Supports keyboard navigation:
  - `Esc`: Close dialog
  - `Tab`: Navigate focusable elements
  - `Space/Enter`: Activate buttons
- Announces dialog title and description
- Provides clear action buttons
- Maintains focus on trigger after closing

### Best Practices

1. Content Guidelines:
   - Use clear, concise language
   - Explain consequences of actions
   - Provide obvious choices
   - Keep content focused

2. Visual Design:
   - Use appropriate spacing
   - Maintain clear hierarchy
   - Highlight destructive actions
   - Ensure readable text

3. Interaction:
   - Provide clear feedback
   - Allow easy dismissal
   - Handle keyboard input
   - Consider mobile touch targets

4. Accessibility:
   - Write descriptive labels
   - Use semantic markup
   - Test with screen readers
   - Verify keyboard navigation

5. Implementation:
   - Handle state changes
   - Manage focus correctly
   - Consider animations
   - Test edge cases

### Related Components

- Dialog
- Sheet
- Popover
- Sheet

## Source

File: components/ui/alert-dialog.tsx

```tsx
'use client'

import { AlertDialog as AlertDialogPrimitive } from '@base-ui/react/alert-dialog'
import * as React from 'react'
import { Button } from '@/components/ui/button'
import { cn } from '@/lib/utils'

function AlertDialog({ ...props }: AlertDialogPrimitive.Root.Props) {
	return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />
}

function AlertDialogTrigger({ ...props }: AlertDialogPrimitive.Trigger.Props) {
	return <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
}

function AlertDialogPortal({ ...props }: AlertDialogPrimitive.Portal.Props) {
	return <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
}

function AlertDialogOverlay({ className, ...props }: AlertDialogPrimitive.Backdrop.Props) {
	return (
		<AlertDialogPrimitive.Backdrop
			data-slot="alert-dialog-overlay"
			className={cn(
				'fixed inset-0 isolate z-50 bg-black/50 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0',
				className,
			)}
			{...props}
		/>
	)
}

function AlertDialogContent({
	className,
	size = 'default',
	...props
}: AlertDialogPrimitive.Popup.Props & {
	size?: 'default' | 'sm'
}) {
	return (
		<AlertDialogPortal>
			<AlertDialogOverlay />
			<AlertDialogPrimitive.Popup
				data-slot="alert-dialog-content"
				data-size={size}
				className={cn(
					'group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 max-h-[calc(100dvh-2rem)] gap-4 overflow-y-auto rounded-xl bg-background p-4 text-foreground ring-1 ring-border duration-100 outline-none data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-sm 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',
					className,
				)}
				{...props}
			/>
		</AlertDialogPortal>
	)
}

function AlertDialogHeader({ className, ...props }: React.ComponentProps<'div'>) {
	return (
		<div
			data-slot="alert-dialog-header"
			className={cn(
				'grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-4 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]',
				className,
			)}
			{...props}
		/>
	)
}

function AlertDialogFooter({ className, ...props }: React.ComponentProps<'div'>) {
	return (
		<div
			data-slot="alert-dialog-footer"
			className={cn(
				'-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t bg-muted/50 p-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,
			)}
			{...props}
		/>
	)
}

function AlertDialogMedia({ className, ...props }: React.ComponentProps<'div'>) {
	return (
		<div
			data-slot="alert-dialog-media"
			className={cn(
				"mb-2 inline-flex size-10 items-center justify-center rounded-md bg-muted sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-6",
				className,
			)}
			{...props}
		/>
	)
}

function AlertDialogTitle({ className, ...props }: AlertDialogPrimitive.Title.Props) {
	return (
		<AlertDialogPrimitive.Title
			data-slot="alert-dialog-title"
			className={cn(
				'font-heading text-base font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2',
				className,
			)}
			{...props}
		/>
	)
}

function AlertDialogDescription({ className, ...props }: AlertDialogPrimitive.Description.Props) {
	return (
		<AlertDialogPrimitive.Description
			data-slot="alert-dialog-description"
			className={cn(
				'text-sm text-balance text-muted-foreground md:text-pretty *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground',
				className,
			)}
			{...props}
		/>
	)
}

function AlertDialogAction({
	className,
	variant = 'default',
	size = 'default',
	...props
}: AlertDialogPrimitive.Close.Props & Pick<React.ComponentProps<typeof Button>, 'variant' | 'size'>) {
	return (
		<AlertDialogPrimitive.Close
			data-slot="alert-dialog-action"
			className={cn(className)}
			render={<Button variant={variant} size={size} />}
			{...props}
		/>
	)
}

function AlertDialogCancel({
	className,
	variant = 'outline',
	size = 'default',
	...props
}: AlertDialogPrimitive.Close.Props & Pick<React.ComponentProps<typeof Button>, 'variant' | 'size'>) {
	return (
		<AlertDialogPrimitive.Close
			data-slot="alert-dialog-cancel"
			className={cn(className)}
			render={<Button variant={variant} size={size} />}
			{...props}
		/>
	)
}

export {
	AlertDialog,
	AlertDialogAction,
	AlertDialogCancel,
	AlertDialogContent,
	AlertDialogDescription,
	AlertDialogFooter,
	AlertDialogHeader,
	AlertDialogMedia,
	AlertDialogOverlay,
	AlertDialogPortal,
	AlertDialogTitle,
	AlertDialogTrigger,
}
```

---

# Aspect Ratio

Displays content within a fixed width-to-height ratio.

Install: `npx shadcn@latest add https://rdf.dev.360online.com/r/aspect-ratio.json`

Import from: `@/components/ui/aspect-ratio`

Displays content within a desired ratio. The Aspect Ratio component uses the CSS `aspect-ratio` property and keeps images, maps, video embeds and document previews at fixed proportions regardless of the available width.

### Features

- Any numeric ratio, e.g. 16 / 9, 4 / 3 or 1
- Scales with its container width
- Works with images, iframes and arbitrary content
- Plain CSS `aspect-ratio`, no primitive dependency

### Usage

```tsx
import { AspectRatio } from '@/components/ui/aspect-ratio'

export function CityHallImage() {
  return (
    <div className="w-full max-w-md">
      <AspectRatio ratio={16 / 9} className="rounded-lg bg-muted">
        <img src="/city-hall.jpg" alt="City hall seen from the main square" className="h-full w-full rounded-lg object-cover" />
      </AspectRatio>
    </div>
  )
}
```

`ratio` defaults to `1`. The component is a single `div` with `position: relative` and the CSS `aspect-ratio`, so
`className` styles the ratio box itself and children can be placed with `absolute` too.

#### Default

A 16:9 image slot with a caption. The examples use token-based placeholders where your app would show a photo.

#### Square

1:1 thumbnails for a grid of municipal facilities.

#### Portrait

An A4 ratio (`1 / Math.SQRT2`) for a preview of a scanned or generated document.

#### Map Embed

A 4:3 container for an embedded property map, with overlays positioned on top.

#### Video

A 16:9 frame for a recorded council meeting, with a play button and duration.

### Accessibility

- Purely presentational: it does not add any roles or semantics
- Always provide meaningful alt text for images placed inside
- Give embedded iframes a descriptive title attribute

## Source

File: components/ui/aspect-ratio.tsx

```tsx
import type * as React from 'react'
import { cn } from '@/lib/utils'

function AspectRatio({ ratio = 1, className, style, ...props }: React.ComponentProps<'div'> & { ratio?: number }) {
	return (
		<div
			data-slot="aspect-ratio"
			style={{ '--ratio': ratio, ...style } as React.CSSProperties}
			className={cn('relative aspect-(--ratio)', className)}
			{...props}
		/>
	)
}

export { AspectRatio }
```

---

# Attachment

File attachment chip with name, size and remove action, for chat and forms.

Install: `npx shadcn@latest add https://rdf.dev.360online.com/r/attachment.json`

Import from: `@/components/ui/attachment`

Builds on: button

npm dependencies: @base-ui/react@^1.8.0, class-variance-authority@^0.7.1

Displays a file attached to a message, form or case, with media, title, description and actions. It communicates upload state (idle, uploading, processing, error and done), comes in three sizes and two orientations, and can be grouped into a horizontally scrolling row.

### Features

- Five states: idle, uploading, processing, error and done
- Sizes: default, sm and xs
- Horizontal and vertical orientation
- Icon or image media
- Inline actions such as remove, retry or download
- AttachmentTrigger makes the whole attachment clickable, e.g. to open a preview dialog
- AttachmentGroup for a scroll-snapping row of attachments

### Usage

```tsx
import {
  Attachment,
  AttachmentAction,
  AttachmentActions,
  AttachmentContent,
  AttachmentDescription,
  AttachmentMedia,
  AttachmentTitle,
} from '@/components/ui/attachment'
import { FileText, X } from 'lucide-react'

export function ApplicationAttachment() {
  return (
    <Attachment state="done">
      <AttachmentMedia>
        <FileText />
      </AttachmentMedia>
      <AttachmentContent>
        <AttachmentTitle>building-permit-application.pdf</AttachmentTitle>
        <AttachmentDescription>PDF · 2.4 MB</AttachmentDescription>
      </AttachmentContent>
      <AttachmentActions>
        <AttachmentAction aria-label="Remove building-permit-application.pdf">
          <X />
        </AttachmentAction>
      </AttachmentActions>
    </Attachment>
  )
}
```

#### Default

A completed attachment with a remove action.

#### States

All five upload states, from an idle drop target to a finished file.

#### Sizes

The default, sm and xs sizes.

#### Vertical

Vertical orientation for grid or gallery layouts.

#### Image Media

Thumbnails via `variant="image"` on `AttachmentMedia`. Put an `img` inside; the example uses a token-based
placeholder instead of a photo.

#### Group

`AttachmentGroup` lays attachments out in a scroll-snapping row, here inside a card where a resident sends a supplement
to a building permit case.

#### With Trigger

The whole attachment opens a preview dialog through AttachmentTrigger.

### Accessibility

- Give every icon-only AttachmentAction an aria-label that names the file
- AttachmentTrigger renders a button covering the attachment; give it an aria-label describing the action
- Actions are layered above the trigger so they remain individually focusable
- Error state is conveyed by colour and by the description text, not colour alone

## Source

File: components/ui/attachment.tsx

```tsx
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 type * as React from 'react'
import { Button } from '@/components/ui/button'
import { cn } from '@/lib/utils'

const attachmentVariants = cva(
	'group/attachment relative flex w-fit max-w-full min-w-0 shrink-0 flex-wrap rounded-xl border bg-card text-card-foreground transition-colors focus-within:ring-2 focus-within:ring-ring has-[>a,>button]:hover:bg-muted/50 data-[state=error]:border-destructive-border data-[state=idle]:border-dashed',
	{
		variants: {
			size: {
				default:
					'gap-2 text-sm has-data-[slot=attachment-content]:px-2.5 has-data-[slot=attachment-content]:py-2 has-data-[slot=attachment-media]:p-2',
				sm: 'gap-2.5 text-xs has-data-[slot=attachment-content]:px-2 has-data-[slot=attachment-content]:py-1.5 has-data-[slot=attachment-media]:p-1.5',
				xs: 'gap-1.5 rounded-lg text-xs has-data-[slot=attachment-content]:px-1.5 has-data-[slot=attachment-content]:py-1 has-data-[slot=attachment-media]:p-1',
			},
			orientation: {
				horizontal: 'min-w-40 items-center',
				vertical: 'w-24 flex-col has-data-[slot=attachment-content]:w-30',
			},
		},
	},
)

function Attachment({
	className,
	state = 'done',
	size = 'default',
	orientation = 'horizontal',
	...props
}: React.ComponentProps<'div'> &
	VariantProps<typeof attachmentVariants> & {
		state?: 'idle' | 'uploading' | 'processing' | 'error' | 'done'
	}) {
	return (
		<div
			data-slot="attachment"
			data-state={state}
			data-size={size}
			data-orientation={orientation}
			className={cn(attachmentVariants({ size, orientation }), className)}
			{...props}
		/>
	)
}

const attachmentMediaVariants = cva(
	"relative flex aspect-square w-10 shrink-0 items-center justify-center overflow-hidden rounded-lg bg-muted text-foreground group-data-[orientation=vertical]/attachment:w-full group-data-[size=sm]/attachment:w-8 group-data-[size=xs]/attachment:w-7 group-data-[size=xs]/attachment:rounded-md group-data-[state=error]/attachment:bg-destructive-subtle group-data-[state=error]/attachment:text-destructive-subtle-foreground group-data-[orientation=vertical]/attachment:*:data-[slot=spinner]:size-6! [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 group-data-[orientation=vertical]/attachment:[&_svg:not([class*='size-'])]:size-6 group-data-[size=xs]/attachment:[&_svg:not([class*='size-'])]:size-3.5",
	{
		variants: {
			variant: {
				icon: '',
				image:
					'opacity-60 group-data-[state=done]/attachment:opacity-100 group-data-[state=idle]/attachment:opacity-100 *:[img]:aspect-square *:[img]:w-full *:[img]:object-cover',
			},
		},
		defaultVariants: {
			variant: 'icon',
		},
	},
)

function AttachmentMedia({
	className,
	variant = 'icon',
	...props
}: React.ComponentProps<'div'> & VariantProps<typeof attachmentMediaVariants>) {
	return (
		<div
			data-slot="attachment-media"
			data-variant={variant}
			className={cn(attachmentMediaVariants({ variant }), className)}
			{...props}
		/>
	)
}

function AttachmentContent({ className, ...props }: React.ComponentProps<'div'>) {
	return (
		<div
			data-slot="attachment-content"
			className={cn(
				'max-w-full min-w-0 flex-1 leading-tight group-data-[orientation=vertical]/attachment:px-1',
				className,
			)}
			{...props}
		/>
	)
}

function AttachmentTitle({ className, ...props }: React.ComponentProps<'span'>) {
	return (
		<span
			data-slot="attachment-title"
			className={cn(
				'block max-w-full min-w-0 truncate font-medium group-data-[state=processing]/attachment:shimmer group-data-[state=uploading]/attachment:shimmer',
				className,
			)}
			{...props}
		/>
	)
}

function AttachmentDescription({ className, ...props }: React.ComponentProps<'span'>) {
	return (
		<span
			data-slot="attachment-description"
			className={cn(
				'mt-0.5 block min-w-0 truncate text-xs text-muted-foreground group-data-[state=error]/attachment:text-destructive-subtle-foreground',
				'max-w-full',
				className,
			)}
			{...props}
		/>
	)
}

function AttachmentActions({ className, ...props }: React.ComponentProps<'div'>) {
	return (
		<div
			data-slot="attachment-actions"
			className={cn(
				'relative z-20 flex shrink-0 items-center group-data-[orientation=vertical]/attachment:absolute group-data-[orientation=vertical]/attachment:top-3 group-data-[orientation=vertical]/attachment:right-3 group-data-[orientation=vertical]/attachment:gap-1',
				className,
			)}
			{...props}
		/>
	)
}

function AttachmentAction({ className, variant, size = 'icon-xs', ...props }: React.ComponentProps<typeof Button>) {
	return (
		<Button data-slot="attachment-action" variant={variant ?? 'ghost'} size={size} className={cn(className)} {...props} />
	)
}

function AttachmentTrigger({ className, render, type, ...props }: useRender.ComponentProps<'button'>) {
	return useRender({
		defaultTagName: 'button',
		props: mergeProps<'button'>(
			{
				type: render ? type : (type ?? 'button'),
				className: cn('absolute inset-0 z-10 outline-none', className),
			},
			props,
		),
		render,
		state: {
			slot: 'attachment-trigger',
		},
	})
}

function AttachmentGroup({ className, ...props }: React.ComponentProps<'div'>) {
	return (
		<div
			data-slot="attachment-group"
			className={cn(
				'flex min-w-0 scroll-fade-x 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',
				className,
			)}
			{...props}
		/>
	)
}

export {
	Attachment,
	AttachmentGroup,
	AttachmentMedia,
	AttachmentContent,
	AttachmentTitle,
	AttachmentDescription,
	AttachmentActions,
	AttachmentAction,
	AttachmentTrigger,
}
```

---

# Avatar

User image with a text fallback, built on Base UI Avatar.

Install: `npx shadcn@latest add https://rdf.dev.360online.com/r/avatar.json`

Import from: `@/components/ui/avatar`

npm dependencies: @base-ui/react@^1.8.0

A versatile avatar component for displaying user images with graceful fallbacks.
Built on top of [Base UI Avatar](https://base-ui.com/react/components/avatar),
it provides a fully accessible and customizable avatar implementation.

### Features

- Image-based avatars with automatic fallback while loading or on error
- Three sizes via `size`: `sm` (24px), `default` (32px), `lg` (40px)
- `AvatarBadge` for status dots or small icons in the bottom-right corner
- `AvatarGroup` for overlapping stacks, with `AvatarGroupCount` for overflow
- Group count adapts to the size of the avatars in the group
- Custom styling via `className`

### Usage

```tsx
import {
  Avatar,
  AvatarBadge,
  AvatarFallback,
  AvatarGroup,
  AvatarGroupCount,
  AvatarImage,
} from '@/components/ui/avatar'

// Basic usage
export function OfficerAvatar() {
  return (
    <Avatar>
      <AvatarImage src="/avatars/anna-lindqvist.jpg" alt="Anna Lindqvist" />
      <AvatarFallback>AL</AvatarFallback>
    </Avatar>
  )
}

// Large with status badge
export function StatusAvatar() {
  return (
    <Avatar size="lg">
      <AvatarImage src="/avatars/ingrid-hansen.jpg" alt="Ingrid Hansen" />
      <AvatarFallback>IH</AvatarFallback>
      <AvatarBadge className="bg-primary" />
    </Avatar>
  )
}

// Group
export function CaseTeam() {
  return (
    <AvatarGroup>
      <Avatar>
        <AvatarFallback>AL</AvatarFallback>
      </Avatar>
      <Avatar>
        <AvatarFallback>OH</AvatarFallback>
      </Avatar>
      <AvatarGroupCount>+3</AvatarGroupCount>
    </AvatarGroup>
  )
}
```

#### Default

The handling officer on a case, shown with initials next to their name and role.

#### With Fallback

When the image is missing or fails to load, `AvatarFallback` shows the person’s initials instead.

#### Sizes

Avatars come in `sm`, `default` and `lg`. For other sizes, override with a `size-*` class.

#### With Badge

`AvatarBadge` renders a status dot; colour it with a theme token via `className`. Icons inside the badge are shown on
`default` and `lg` avatars. Always pair the dot with a text status so the meaning doesn’t rely on colour alone.

#### Avatar Group

`AvatarGroup` overlaps avatars with a ring, and `AvatarGroupCount` shows the remaining count or an icon.

#### Custom Styles

A filled fallback, a ring marking the signed-in user, an icon for an organisation, and a custom `size-14`.

### Subcomponents

- `Avatar` - Root; `size?: 'sm' | 'default' | 'lg'` (default `'default'`)
- `AvatarImage` - The image; hidden until it has loaded
- `AvatarFallback` - Shown while the image loads or when it fails; `delay` (ms) postpones it to avoid a flash on fast connections
- `AvatarBadge` - Status indicator placed inside `Avatar`
- `AvatarGroup` - Overlapping container for multiple avatars
- `AvatarGroupCount` - Overflow indicator placed last in `AvatarGroup`

### Accessibility

- Provide meaningful `alt` text on `AvatarImage`
- Status conveyed by `AvatarBadge` color should also be available as text (e.g. a tooltip or visually hidden label)
- Keep fallback text short and readable

### Best Practices

1. Image Usage:
   - Use appropriately sized images
   - Provide meaningful alt text
   - Handle image errors gracefully with a fallback

2. Fallback Content:
   - Keep text short (1-2 characters)
   - Ensure readable contrast

3. Sizing:
   - Use the built-in sizes for consistency
   - Keep a consistent size within a group

4. Grouping:
   - Limit visible avatars and use `AvatarGroupCount` for the rest

### Related Components

- Badge
- Tooltip

## Source

File: components/ui/avatar.tsx

```tsx
'use client'

import { Avatar as AvatarPrimitive } from '@base-ui/react/avatar'
import type * as React from 'react'
import { cn } from '@/lib/utils'

function Avatar({
	className,
	size = 'default',
	...props
}: AvatarPrimitive.Root.Props & {
	size?: 'default' | 'sm' | 'lg'
}) {
	return (
		<AvatarPrimitive.Root
			data-slot="avatar"
			data-size={size}
			// The outline only frames photos; the initials fallback draws its own border
			className={cn(
				'group/avatar relative flex size-8 shrink-0 rounded-full select-none data-[size=lg]:size-10 data-[size=sm]:size-6 has-data-[slot=avatar-image]:after:pointer-events-none has-data-[slot=avatar-image]:after:absolute has-data-[slot=avatar-image]:after:inset-0 has-data-[slot=avatar-image]:after:rounded-full has-data-[slot=avatar-image]:after:border has-data-[slot=avatar-image]:after:border-border has-data-[slot=avatar-image]:after:mix-blend-darken dark:has-data-[slot=avatar-image]:after:mix-blend-lighten',
				className,
			)}
			{...props}
		/>
	)
}

function AvatarImage({ className, ...props }: AvatarPrimitive.Image.Props) {
	return (
		<AvatarPrimitive.Image
			data-slot="avatar-image"
			className={cn('aspect-square size-full rounded-full object-cover', className)}
			{...props}
		/>
	)
}

function AvatarFallback({ className, ...props }: AvatarPrimitive.Fallback.Props) {
	return (
		<AvatarPrimitive.Fallback
			data-slot="avatar-fallback"
			className={cn(
				'flex size-full items-center justify-center rounded-full border border-primary bg-secondary text-sm text-primary group-data-[size=sm]/avatar:text-xs',
				className,
			)}
			{...props}
		/>
	)
}

function AvatarBadge({ className, ...props }: React.ComponentProps<'span'>) {
	return (
		<span
			data-slot="avatar-badge"
			className={cn(
				'absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-primary text-primary-foreground bg-blend-color ring-2 ring-background select-none',
				'group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden',
				'group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2',
				'group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2',
				className,
			)}
			{...props}
		/>
	)
}

function AvatarGroup({ className, ...props }: React.ComponentProps<'div'>) {
	return (
		<div
			data-slot="avatar-group"
			className={cn(
				'group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background',
				className,
			)}
			{...props}
		/>
	)
}

function AvatarGroupCount({ className, ...props }: React.ComponentProps<'div'>) {
	return (
		<div
			data-slot="avatar-group-count"
			className={cn(
				'relative flex size-8 shrink-0 items-center justify-center rounded-full bg-muted text-sm text-muted-foreground ring-2 ring-background group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3',
				className,
			)}
			{...props}
		/>
	)
}

export { Avatar, AvatarImage, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarBadge }
```

---

# Badge

Small status or count label with semantic color variants.

Install: `npx shadcn@latest add https://rdf.dev.360online.com/r/badge.json`

Import from: `@/components/ui/badge`

npm dependencies: @base-ui/react@^1.8.0, class-variance-authority@^0.7.1

A versatile badge component for displaying short status descriptors, labels, or counts.
Built with class-variance-authority for flexible styling and variants, it provides a consistent way to show metadata or status.

### Features

- Nine visual variants: `default`, `secondary`, `destructive`, `info`, `success`, `warning`, `outline`, `ghost`, `link`
- Single compact size (20px high, pill shaped)
- Icon support with `data-icon="inline-start"` / `data-icon="inline-end"` (icons are sized to 12px automatically)
- Polymorphic rendering with the `render` prop (e.g. render as a link, with hover styles)
- Exposes `data-slot="badge"` and `data-variant` for styling hooks
- Focus ring and `aria-invalid` styling

### Usage

```tsx
import { Badge } from '@/components/ui/badge'
import { BadgeCheck } from 'lucide-react'

// Basic usage
export function StatusBadge() {
  return <Badge>Draft</Badge>
}

// With variants
export function VariantBadges() {
  return (
    <div className="flex gap-2">
      <Badge variant="default">Draft</Badge>
      <Badge variant="secondary">Submitted</Badge>
      <Badge variant="destructive">Rejected</Badge>
      <Badge variant="info">In review</Badge>
      <Badge variant="success">Approved</Badge>
      <Badge variant="warning">Awaiting documents</Badge>
      <Badge variant="outline">Archived</Badge>
      <Badge variant="ghost">Public record</Badge>
    </div>
  )
}

// With icon
export function SignedBadge() {
  return (
    <Badge variant="success">
      <BadgeCheck data-icon="inline-start" />
      Signed with BankID
    </Badge>
  )
}

// As link
export function CaseLink() {
  return (
    <Badge render={<a href="/cases/2026-04812" />} variant="link">
      2026-04812
    </Badge>
  )
}
```

#### Default

#### All Variants

Each variant with the kind of label it suits.

#### Case Status

Status badges in a case list: `info` for a case in progress, `warning` for one waiting on the applicant, `success` for
an approval and `destructive` for a rejection. Each status also has an icon and text, so it never relies on colour
alone.

```tsx
<Badge variant="warning">
  <TriangleAlertIcon data-icon="inline-start" />
  Awaiting documents
</Badge>
```

#### With Icons

Mark icons with `data-icon` so the badge tightens its padding on that side.

#### Counts

Use `min-w-5 px-1 tabular-nums` for numeric counters, here in a case inbox navigation.

#### As Link

With the `render` prop, the badge renders as another element, such as a button that removes a filter. Variants include
hover styles for anchors.

### Props


- `variant` - Visual style variant (`'default' | 'secondary' | 'destructive' | 'info' | 'success' | 'warning' | 'outline' | 'ghost' | 'link'`, default `'default'`)
- `render` - The element to render instead of a `span`, e.g. `render={<a href="…" />}`
- `className` - Additional CSS classes
- All HTML `span` attributes

`badgeVariants` is also exported for applying badge styles to other elements.

### Variants

- `default` - Muted background with foreground text
- `secondary` - Muted, lower emphasis style
- `destructive` - Soft tinted style for errors or failures
- `info` - Soft primary tint for neutral progress, such as a case in review
- `success` - Soft green tint for completed or approved states
- `warning` - Soft amber tint for states that need attention, such as missing documents
- `outline` - Bordered style with transparent background
- `ghost` - No background until hovered
- `link` - Underlined text link style

### Accessibility

- Renders a `span` by default, so it does not add semantics
- Status is also carried by the text, and ideally an icon, never by colour alone: `info`, `success`, `warning` and `destructive` add tone, the label says what it means
- The status variants keep at least 4.5:1 text contrast on their tint in light and dark mode, in both themes
- When rendering as a link with `render`, the badge keeps the anchor semantics and focus ring

### Best Practices

1. Content Guidelines:
   - Keep text concise
   - Use clear language
   - Consider localization

2. Visual Design:
   - Use `destructive` only for errors
   - Use `success`, `warning` and `info` for status, and keep one meaning per variant across an app
   - Prefer `secondary` or `outline` for neutral metadata

3. Icon Usage:
   - Use relevant icons
   - Mark them with `data-icon` for correct spacing

### Related Components

- Button
- Label

## Source

File: components/ui/badge.tsx

```tsx
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 '@/lib/utils'

const badgeVariants = cva(
	'group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!',
	{
		variants: {
			variant: {
				default: 'bg-muted text-foreground [a]:hover:bg-muted/80',
				secondary: 'bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80',
				destructive: 'bg-destructive-subtle text-destructive-subtle-foreground [a]:hover:bg-destructive-subtle/60',
				info: 'bg-info-subtle text-info-subtle-foreground [a]:hover:bg-info-subtle/60',
				success: 'bg-success-subtle text-success-subtle-foreground [a]:hover:bg-success-subtle/60',
				warning: 'bg-warning-subtle text-warning-subtle-foreground [a]:hover:bg-warning-subtle/60',
				outline: 'border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground',
				ghost: 'hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50',
				link: 'text-primary underline underline-offset-4',
			},
		},
		defaultVariants: {
			variant: 'default',
		},
	},
)

function Badge({
	className,
	variant = 'default',
	render,
	...props
}: useRender.ComponentProps<'span'> & VariantProps<typeof badgeVariants>) {
	return useRender({
		defaultTagName: 'span',
		props: mergeProps<'span'>(
			{
				className: cn(badgeVariants({ variant }), className),
			},
			props,
		),
		render,
		state: {
			slot: 'badge',
			variant,
		},
	})
}

export { Badge, badgeVariants }
```

---

# Banner

Page-wide message at the top of a page, such as planned maintenance or an outage, that can be dismissed.

Install: `npx shadcn@latest add https://rdf.dev.360online.com/r/banner.json`

Import from: `@/components/ui/banner`

Builds on: button

npm dependencies: @base-ui/react@^1.8.0, class-variance-authority@^0.7.1, lucide-react@^1.48.0

A page-wide message at the top of the page, such as planned maintenance, longer handling times or an outage. For a
message about one part of the page, such as a form, use Alert instead.

### Features

- Four variants: `info` (default), `warning`, `destructive` and `success`, each with a tinted background and its own icon
- The text keeps the normal text colour, so it stays readable in every variant, theme and colour mode
- The variant is also given by the icon and a screen reader prefix ("Warning: "), not by colour alone
- Spans the full width, with the content centred in a max-width container. It wraps on small screens
- Composable `BannerTitle`, `BannerDescription` and `BannerAction` (a link, or a button with `render`)
- Optional dismiss button, controlled (`open` and `onOpenChange`) or uncontrolled (`defaultOpen`)
- `role="status"` by default, `role="alert"` for urgent messages. It never moves focus
- All user-facing text can be overridden: `label` for the screen reader prefix and `closeLabel` for the dismiss button

### Usage

```tsx
import { Banner, BannerAction, BannerDescription, BannerTitle } from '@/components/ui/banner'
import { WrenchIcon } from 'lucide-react'

export function MaintenanceBanner() {
  return (
    <Banner icon={<WrenchIcon />} onDismiss={() => {}}>
      <BannerTitle>Planned maintenance on Saturday</BannerTitle>
      <BannerDescription>
        E-services are unavailable on Saturday 16 May 2026 from 22:00 to 02:00.
      </BannerDescription>
      <BannerAction href="/maintenance">Read more</BannerAction>
    </Banner>
  )
}
```

Place the banner first on the page, above the site header, so it is the first thing both sighted and screen reader users
meet.

#### Default

Planned maintenance with a link to more information. `icon` replaces the variant's icon.

#### Variants

`info` for news and planned events, `warning` for things that may affect the user, `destructive` for outages and
errors, and `success` when a problem is solved. The outage uses `role="alert"`.

#### Dismissible

Pass `onDismiss` or `onOpenChange` to show the dismiss button. Control it with `open` to show it again, or to remember
the choice. The banner leaves the page when it is dismissed, so move focus to a sensible place in `onDismiss`.

#### With Action

`BannerAction` renders a link by default. Use `render={<button type="button" />}` for an action that isn't navigation.
`closeLabel` sets the name of the dismiss button.

#### Page Mockup

An urgent outage above the site header.

### Props


| Prop           | Type                                               | Default         | Description                                                            |
| -------------- | -------------------------------------------------- | --------------- | ---------------------------------------------------------------------- |
| `variant`      | `'info' \| 'warning' \| 'destructive' \| 'success'` | `'info'`        | The kind of message                                                    |
| `role`         | `'status' \| 'alert'`                              | `'status'`      | `alert` only for urgent messages                                       |
| `icon`         | `ReactNode \| false`                               | variant's icon  | Replace the icon, or `false` to hide it                                |
| `label`        | `string \| false`                                  | variant's label | Screen reader prefix: "Information", "Warning", "Error" or "Success"   |
| `open`         | `boolean`                                          |                 | Controlled visibility                                                  |
| `defaultOpen`  | `boolean`                                          | `true`          | Initial visibility when uncontrolled                                   |
| `onOpenChange` | `(open: boolean) => void`                          |                 | Called when the banner is dismissed                                    |
| `onDismiss`    | `() => void`                                       |                 | Called when the banner is dismissed                                    |
| `dismissible`  | `boolean`                                          | see description | Show the dismiss button. `true` when `onDismiss` or `onOpenChange` is set |
| `closeLabel`   | `string`                                           | `'Dismiss'`     | Accessible name of the dismiss button                                  |

Set `--banner-max-width` with `className` to match the width of your page layout, for example
`[--banner-max-width:var(--container-5xl)]`. The default is `--container-7xl` (80rem).

### Subcomponents

- `Banner`: the full-width container with the icon, the content and the dismiss button
- `BannerTitle`: the short headline, in medium weight
- `BannerDescription`: the message. Links in it are underlined
- `BannerAction`: a link (default) or a button with `render`, such as "Read more"

### Accessibility

- `role="status"` is polite: screen readers read the message when it appears after the page has loaded, without
  interrupting. Use `role="alert"` only for urgent messages, such as an outage that stops the user's task
- A banner that is part of the page from the start is not announced as a live region, so place it first in the page
  where it is read before the header
- The banner never moves focus when it appears
- The variant is conveyed by the icon and a visually hidden prefix such as "Warning: ", not by colour alone. Translate
  the prefix with `label`, or pass `label={false}` when the title already says what kind of message it is
- The text uses the normal text colour on a light tint, so it meets the 4.5:1 contrast minimum
- The dismiss button is 32×32px and named by `closeLabel`. When the banner is dismissed it leaves the page, so move focus
  to a sensible place in `onDismiss`, for example the main heading
- Links in the description and `BannerAction` are underlined and have a visible focus ring

### Related Components

- Alert: messages about one part of the page, such as a form
- Button

## Source

File: components/ui/banner.tsx

```tsx
'use client'

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 { CircleAlertIcon, CircleCheckIcon, InfoIcon, TriangleAlertIcon, XIcon } from 'lucide-react'
import * as React from 'react'
import { Button } from '@/components/ui/button'
import { cn } from '@/lib/utils'

// Each variant has its own tint and icon colour. The variant is also carried by the icon and the screen reader prefix,
// never by colour alone.
const bannerVariants = cva(
	'group/banner w-full border-b text-sm text-foreground [--banner-max-width:var(--container-7xl)]',
	{
		variants: {
			variant: {
				info: 'border-info-border bg-info-subtle [&_[data-slot=banner-icon]]:text-info-subtle-foreground',
				warning: 'border-warning-border bg-warning-subtle [&_[data-slot=banner-icon]]:text-warning-subtle-foreground',
				destructive:
					'border-destructive-border bg-destructive-subtle [&_[data-slot=banner-icon]]:text-destructive-subtle-foreground',
				success: 'border-success-border bg-success-subtle [&_[data-slot=banner-icon]]:text-success-subtle-foreground',
			},
		},
		defaultVariants: {
			variant: 'info',
		},
	},
)

type BannerVariant = NonNullable<VariantProps<typeof bannerVariants>['variant']>

const defaultIcons: Record<BannerVariant, React.ElementType> = {
	info: InfoIcon,
	warning: TriangleAlertIcon,
	destructive: CircleAlertIcon,
	success: CircleCheckIcon,
}

const defaultLabels: Record<BannerVariant, string> = {
	info: 'Information',
	warning: 'Warning',
	destructive: 'Error',
	success: 'Success',
}

function Banner({
	className,
	variant = 'info',
	role = 'status',
	icon,
	label,
	open: openProp,
	defaultOpen = true,
	onOpenChange,
	onDismiss,
	dismissible,
	closeLabel = 'Dismiss',
	children,
	...props
}: Omit<React.ComponentProps<'div'>, 'role'> &
	VariantProps<typeof bannerVariants> & {
		/**
		 * `status` (default) is announced politely when the message appears after the page has loaded. Use `alert` only for
		 * urgent messages, such as an ongoing outage; screen readers interrupt the user to read it.
		 */
		role?: 'status' | 'alert'
		/** Replace the variant's icon, or pass `false` to hide it */
		icon?: React.ReactNode
		/**
		 * Screen reader prefix that names the kind of message, such as "Warning". Defaults to an English label for the
		 * variant; pass a translation, or `false` when the title already says it.
		 */
		label?: string | false
		/** Controlled visibility */
		open?: boolean
		/** Initial visibility when uncontrolled */
		defaultOpen?: boolean
		/** Called with the new visibility when the banner is dismissed */
		onOpenChange?: (open: boolean) => void
		/** Called when the user dismisses the banner. Passing it shows the dismiss button */
		onDismiss?: () => void
		/** Show the dismiss button. Defaults to `true` when `onDismiss` or `onOpenChange` is passed */
		dismissible?: boolean
		/** Accessible name of the dismiss button */
		closeLabel?: string
	}) {
	const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen)
	const open = openProp ?? uncontrolledOpen
	const showDismiss = dismissible ?? (onDismiss !== undefined || onOpenChange !== undefined)
	const resolvedVariant: BannerVariant = variant ?? 'info'

	if (!open) return null

	const Icon = defaultIcons[resolvedVariant]
	const prefix = label === false ? null : (label ?? defaultLabels[resolvedVariant])

	function dismiss() {
		if (openProp === undefined) setUncontrolledOpen(false)
		onOpenChange?.(false)
		onDismiss?.()
	}

	return (
		<div
			data-slot="banner"
			data-variant={resolvedVariant}
			role={role}
			className={cn(bannerVariants({ variant: resolvedVariant }), className)}
			{...props}
		>
			<div
				data-slot="banner-container"
				className="mx-auto flex w-full max-w-(--banner-max-width) items-start gap-3 px-4 py-2.5 sm:px-6"
			>
				{icon === false ? null : (
					<span
						data-slot="banner-icon"
						aria-hidden="true"
						className="flex h-5 shrink-0 items-center [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4"
					>
						{icon ?? <Icon />}
					</span>
				)}
				<div data-slot="banner-content" className="flex min-w-0 flex-1 flex-wrap items-baseline gap-x-3 gap-y-1 leading-5">
					{prefix ? <span className="sr-only">{`${prefix}: `}</span> : null}
					{children}
				</div>
				{showDismiss ? (
					<Button
						data-slot="banner-close"
						variant="ghost"
						size="icon-sm"
						aria-label={closeLabel}
						onClick={dismiss}
						className="-my-1.5 -me-2 hover:bg-foreground/10 dark:hover:bg-foreground/10"
					>
						<XIcon aria-hidden="true" />
					</Button>
				) : null}
			</div>
		</div>
	)
}

function BannerTitle({ className, ...props }: React.ComponentProps<'p'>) {
	return <p data-slot="banner-title" className={cn('font-medium', className)} {...props} />
}

function BannerDescription({ className, ...props }: React.ComponentProps<'p'>) {
	return (
		<p
			data-slot="banner-description"
			className={cn('min-w-0 text-pretty wrap-break-word [&_a]:underline [&_a]:underline-offset-4', className)}
			{...props}
		/>
	)
}

// Renders a link by default. Use `render={<button type="button" />}` for an action that is not navigation.
function BannerAction({ className, render, ...props }: useRender.ComponentProps<'a'>) {
	return useRender({
		defaultTagName: 'a',
		props: mergeProps<'a'>(
			{
				className: cn(
					'inline-flex min-h-6 cursor-pointer items-center gap-1 rounded-sm font-medium whitespace-nowrap underline underline-offset-4 outline-none hover:decoration-2 focus-visible:ring-3 focus-visible:ring-ring [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=size-])]:size-4',
					className,
				),
			},
			props,
		),
		render,
		state: {
			slot: 'banner-action',
		},
	})
}

export { Banner, BannerTitle, BannerDescription, BannerAction, bannerVariants }
```

---

# Breadcrumb

Hierarchical page trail with separators and an overflow ellipsis.

Install: `npx shadcn@latest add https://rdf.dev.360online.com/r/breadcrumb.json`

Import from: `@/components/ui/breadcrumb`

npm dependencies: @base-ui/react@^1.8.0, lucide-react@^1.48.0

A breadcrumb navigation component that helps users understand their current location within a hierarchical structure.

### Features

- Semantic HTML structure using `<nav>` and `<ol>` elements
- Links use the foreground color and shift to the primary color on hover; the current page uses the primary color
- Customizable separators (defaults to a chevron icon)
- `BreadcrumbEllipsis` for collapsed paths, composable with a dropdown menu
- `render` on `BreadcrumbLink` to render your router's link component
- Screen reader friendly with proper ARIA attributes

### Usage

```tsx
import {
  Breadcrumb,
  BreadcrumbList,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from '@/components/ui/breadcrumb'

export default function BreadcrumbDemo() {
  return (
    <Breadcrumb>
      <BreadcrumbList>
        <BreadcrumbItem>
          <BreadcrumbLink href="/">Start</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbLink href="/building-permits">Building permits</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbPage>Apply for a building permit</BreadcrumbPage>
        </BreadcrumbItem>
      </BreadcrumbList>
    </Breadcrumb>
  )
}
```

#### Default

The path to an e-service on the municipality’s website.

#### With Ellipsis

Use the `BreadcrumbEllipsis` component to collapse the middle levels of a deep path, such as a document inside a case.

#### With Dropdown

Compose `BreadcrumbEllipsis` or a breadcrumb label with a `DropdownMenu` to let users jump to collapsed or sibling pages.

#### Custom Separator

You can customize the separator by providing children to the `BreadcrumbSeparator` component.
Separator icons are sized to `size-3.5` automatically.

```tsx
<BreadcrumbSeparator>
  <SlashIcon />
</BreadcrumbSeparator>
```

#### With Icon

Links can contain icons alongside text.

#### In a Page Header

Place the breadcrumb above the page title, here the header of a case in case management.

#### Link Component

Use the `render` prop on `BreadcrumbLink` to render a custom link component, such as Next.js `Link`.

```tsx
import Link from 'next/link'

<BreadcrumbItem>
  <BreadcrumbLink render={<Link href="/" />}>Start</BreadcrumbLink>
</BreadcrumbItem>
```

### Accessibility

The Breadcrumb component follows WAI-ARIA guidelines for breadcrumb navigation:

- Uses semantic HTML with `<nav>` and `<ol>` elements
- Includes `aria-label="breadcrumb"` on the navigation element
- Current page is marked with `aria-current="page"`
- Separators are marked with `aria-hidden="true"` and `role="presentation"`
- The current page (`BreadcrumbPage`) is not a focusable link; it uses `role="link"` with `aria-disabled="true"`
- Screen reader announcements for the current page and navigation items

### Props

#### Breadcrumb

The root `<nav>` element (`aria-label="breadcrumb"`) that wraps the breadcrumb navigation. Accepts all `nav` props.

#### BreadcrumbList

The ordered list component that contains the breadcrumb items.

#### BreadcrumbItem

A list item component that wraps individual breadcrumb elements.

#### BreadcrumbLink

An anchor component for clickable breadcrumb items. Accepts all `a` props plus `render` to render a custom element (e.g. `render={<Link href="/" />}`).

#### BreadcrumbPage

A `<span>` that represents the current page in the breadcrumb trail (`aria-current="page"`).

#### BreadcrumbSeparator

A list item that renders the separator between breadcrumb items. Renders a chevron by default; pass `children` to override.

#### BreadcrumbEllipsis

A component that indicates truncated navigation items.

## Source

File: components/ui/breadcrumb.tsx

```tsx
import { mergeProps } from '@base-ui/react/merge-props'
import { useRender } from '@base-ui/react/use-render'
import { ChevronRightIcon, MoreHorizontalIcon } from 'lucide-react'
import type * as React from 'react'
import { cn } from '@/lib/utils'

function Breadcrumb({ className, ...props }: React.ComponentProps<'nav'>) {
	return <nav aria-label="breadcrumb" data-slot="breadcrumb" className={cn(className)} {...props} />
}

function BreadcrumbList({ className, ...props }: React.ComponentProps<'ol'>) {
	return (
		<ol
			data-slot="breadcrumb-list"
			className={cn('flex flex-wrap items-center gap-1.5 text-sm wrap-break-word text-foreground', className)}
			{...props}
		/>
	)
}

function BreadcrumbItem({ className, ...props }: React.ComponentProps<'li'>) {
	return <li data-slot="breadcrumb-item" className={cn('inline-flex items-center gap-1', className)} {...props} />
}

function BreadcrumbLink({ className, render, ...props }: useRender.ComponentProps<'a'>) {
	return useRender({
		defaultTagName: 'a',
		props: mergeProps<'a'>(
			{
				className: cn(
					'text-foreground underline underline-offset-4 transition-colors hover:text-primary focus-visible:rounded-sm focus-visible:ring-3 focus-visible:ring-ring focus-visible:outline-none',
					className,
				),
			},
			props,
		),
		render,
		state: {
			slot: 'breadcrumb-link',
		},
	})
}

function BreadcrumbPage({ className, ...props }: React.ComponentProps<'span'>) {
	return (
		<span
			data-slot="breadcrumb-page"
			role="link"
			aria-disabled="true"
			aria-current="page"
			tabIndex={0}
			className={cn(
				'cursor-default font-normal text-primary focus-visible:rounded-sm focus-visible:ring-3 focus-visible:ring-ring focus-visible:outline-none',
				className,
			)}
			{...props}
		/>
	)
}

function BreadcrumbSeparator({ children, className, ...props }: React.ComponentProps<'li'>) {
	return (
		<li data-slot="breadcrumb-separator" aria-hidden="true" className={cn('[&>svg]:size-3.5', className)} {...props}>
			{children ?? <ChevronRightIcon />}
		</li>
	)
}

function BreadcrumbEllipsis({ className, ...props }: React.ComponentProps<'span'>) {
	return (
		<span
			data-slot="breadcrumb-ellipsis"
			aria-hidden="true"
			className={cn('flex size-5 items-center justify-center [&>svg]:size-4', className)}
			{...props}
		>
			<MoreHorizontalIcon />
			<span className="sr-only">More</span>
		</span>
	)
}

export {
	Breadcrumb,
	BreadcrumbList,
	BreadcrumbItem,
	BreadcrumbLink,
	BreadcrumbPage,
	BreadcrumbSeparator,
	BreadcrumbEllipsis,
}
```

---

# Bubble

Chat message bubble with incoming and outgoing styles.

Install: `npx shadcn@latest add https://rdf.dev.360online.com/r/bubble.json`

Import from: `@/components/ui/bubble`

npm dependencies: @base-ui/react@^1.8.0, class-variance-authority@^0.7.1

A chat bubble for displaying message text. Bubbles come in several variants to distinguish senders and states, align to either side of a conversation, support reactions and can be grouped for consecutive messages. Compose them inside Message for full conversation layouts.

### Features

- Variants: default, secondary, muted, tinted, outline, ghost and destructive
- Start or end alignment
- BubbleGroup for consecutive bubbles from the same sender
- BubbleReactions positioned on the top or bottom edge
- BubbleContent can render as a link or button via the `render` prop

### Usage

```tsx
import { Bubble, BubbleContent, BubbleGroup } from '@/components/ui/bubble'

export function Conversation() {
  return (
    <BubbleGroup>
      <Bubble variant="muted">
        <BubbleContent>Welcome to the resident service chat. How can I help you?</BubbleContent>
      </Bubble>
      <Bubble align="end">
        <BubbleContent>When is the next bulky waste collection on Kungsgatan?</BubbleContent>
      </Bubble>
    </BubbleGroup>
  )
}
```

#### Default

A resident’s message in the default variant.

#### Variants

All available visual variants. Use `default` for the resident’s own messages, `muted` or `secondary` for staff, and
`destructive` for messages that failed.

#### Alignment

Bubbles from both sides of a resident service chat. `align="end"` moves the resident’s messages to the right.

#### Group

Consecutive bubbles grouped per sender with `BubbleGroup`, with an avatar and a sender line above each group.

#### With Reactions

Reactions attached to the bottom or top edge of a bubble. Give icon-only reactions a screen reader text.

#### As Link Or Button

Interactive bubbles rendered as a link to a decision document or as a button that starts a booking.

#### Destructive

A message that failed to send, with a text status and a retry action next to it.

### Accessibility

- Bubbles are plain containers; wrap a transcript in a region or log with an accessible name
- Interactive bubbles (`render` with a link or button) get visible focus styles
- Give icon-only reactions a text alternative when they carry meaning
- Do not rely on colour alone to distinguish senders: combine with alignment, headers or avatars

## Source

File: components/ui/bubble.tsx

```tsx
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 type * as React from 'react'
import { cn } from '@/lib/utils'

function BubbleGroup({ className, ...props }: React.ComponentProps<'div'>) {
	return <div data-slot="bubble-group" className={cn('flex min-w-0 flex-col gap-2', className)} {...props} />
}

const bubbleVariants = cva(
	'group/bubble relative flex w-fit max-w-[80%] 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?: 'start' | 'end'
	}) {
	return (
		<div
			data-slot="bubble"
			data-variant={variant}
			data-align={align}
			className={cn(bubbleVariants({ variant }), className)}
			{...props}
		/>
	)
}

function BubbleContent({ className, render, ...props }: useRender.ComponentProps<'div'>) {
	return useRender({
		defaultTagName: 'div',
		props: mergeProps<'div'>(
			{
				className: cn(
					'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:border-ring [button,a]:focus-visible:ring-3 [button,a]:focus-visible:ring-ring',
					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?: 'start' | 'end'
	side?: 'top' | 'bottom'
}) {
	return (
		<div
			data-slot="bubble-reactions"
			data-align={align}
			data-side={side}
			className={cn(bubbleReactionsVariants({ side, align }), className)}
			{...props}
		/>
	)
}

export { BubbleGroup, Bubble, BubbleContent, BubbleReactions }
```

---

# Button

Button with default, outline, secondary, ghost, destructive and link variants, sm, default and lg sizes plus icon sizes; renders as a link or another element with `render`.

Install: `npx shadcn@latest add https://rdf.dev.360online.com/r/button.json`

Import from: `@/components/ui/button`

npm dependencies: @base-ui/react@^1.8.0, class-variance-authority@^0.7.1

A versatile button component that supports multiple variants, sizes, and states. Built on the Base UI Button
and styled with Tailwind CSS using class-variance-authority for dynamic variants.

### Features

- Seven visual variants: `default`, `outline`, `secondary`, `ghost`, `destructive`, `ghost-destructive`, `link`
- Text sizes (`xs`, `sm`, `default`, `lg`) and square icon sizes (`icon-xs`, `icon-sm`, `icon`, `icon-lg`)
- Icon spacing handled automatically via `data-icon="inline-start"` / `data-icon="inline-end"`
- Polymorphic composition with the `render` prop (e.g. render a link)
- Exposes `data-slot="button"`, `data-variant` and `data-size` for styling hooks
- Integrates with `ButtonGroup` (rounded corners adapt inside a group)
- Full keyboard navigation and visible focus ring
- `aria-invalid` styling for form validation

### Usage

```tsx
import { Button } from '@/components/ui/button'
import { ArrowRight, Download, Printer } from 'lucide-react'

export function DecisionActions() {
  return (
    <div className="flex flex-wrap gap-2">
      {/* Primary action */}
      <Button>Send application</Button>

      {/* With variant and size */}
      <Button variant="outline" size="lg">
        Save draft
      </Button>

      {/* With icons */}
      <Button variant="secondary">
        <Download data-icon="inline-start" />
        Download decision
      </Button>
      <Button variant="outline">
        Continue
        <ArrowRight data-icon="inline-end" />
      </Button>

      {/* Icon-only */}
      <Button size="icon" variant="ghost" aria-label="Print decision">
        <Printer />
      </Button>

      {/* As link */}
      <Button render={<a href="/my-pages" />} nativeButton={false}>
        Go to My pages
      </Button>
    </div>
  )
}
```

#### Default Button

The default button style with primary color, for the main action on a page.

#### All Variants

Each variant with the kind of action it suits.

#### Disabled

Disabled buttons in the footer of an application that isn’t signed yet. Explain nearby why the action isn’t available.

#### Sizes

Text button sizes, from `xs` to `lg`.

#### Icon Sizes

Square sizes for icon-only buttons, and a toolbar of ghost icon buttons. Always provide an `aria-label`.

#### Row Actions

`ghost-destructive` is for a delete action that sits beside other actions. It is as quiet as `ghost` at rest, so it
doesn't draw the eye in every row, and turns destructive on hover and keyboard focus. Name each icon button with
`aria-label`, including what it acts on. The label and icon carry the meaning, not the red, and a delete that can't be
undone should still ask for confirmation, for example in an `AlertDialog`.

```tsx
<Button size="icon-sm" variant="ghost" aria-label="Edit case 2026-04812">
  <PencilIcon />
</Button>
<Button size="icon-sm" variant="ghost" aria-label="Duplicate case 2026-04812">
  <CopyIcon />
</Button>
<Button size="icon-sm" variant="ghost-destructive" aria-label="Delete case 2026-04812">
  <Trash2Icon />
</Button>
```

#### With Icons

Mark icons with `data-icon="inline-start"` or `data-icon="inline-end"` so the button adjusts its padding. SVGs are sized
automatically unless you pass a `size-*` class.

#### Loading State

There is no built-in loading prop. Compose a spinning icon and disable the button while the action runs.

```tsx
<Button disabled>
  <Loader2 data-icon="inline-start" className="animate-spin" />
  Sending application…
</Button>
```

#### As Link

Use the `render` prop to render the button as another element, such as a link. Set `nativeButton={false}` whenever the
rendered element is not a `<button>`, so the button doesn't add button semantics to it.

```tsx
<Button render={<a href="/my-pages" />} nativeButton={false}>
  Go to My pages
</Button>
```

#### Form Actions

A typical footer in a multi-step e-service: a ghost Back button on the left, and Save draft and Continue on the right.

### Props


- `variant` - `'default' | 'outline' | 'secondary' | 'ghost' | 'destructive' | 'ghost-destructive' | 'link'` (default `'default'`)
- `size` - `'default' | 'xs' | 'sm' | 'lg' | 'icon' | 'icon-xs' | 'icon-sm' | 'icon-lg'` (default `'default'`)
- `render` - `React.ReactElement | (props, state) => React.ReactElement`, the element to render instead of `<button>`
- `nativeButton` - `boolean` (default `true`), set to `false` when `render` is not a `<button>`
- `focusableWhenDisabled` - `boolean` (default `false`), keeps a disabled button in the tab order

All native `button` attributes are forwarded. `type` defaults to `"button"` so a button never submits a form by
accident; set `type="submit"` on the submit button. `buttonVariants` is also exported for styling other elements as buttons.

### Variants

- `default` - Primary action, high emphasis
- `outline` - Secondary actions, medium emphasis, bordered
- `secondary` - Alternative filled style with lower emphasis
- `ghost` - Minimal emphasis, transparent background
- `destructive` - Dangerous or destructive actions (solid red)
- `ghost-destructive` - Transparent like `ghost`, red on hover and focus; for a delete beside other actions
- `link` - Appears as a text link

### Sizes

- `xs` - Compact, with smaller text and padding (32px)
- `sm` - Compact size for tight spaces (32px)
- `default` - Standard size for most use cases (40px)
- `lg` - Large size for high emphasis (48px)
- `icon-sm` (32px), `icon` (40px), `icon-lg` (48px) - Square formats for icon-only buttons
- `icon-xs` (24px) - For small icon buttons inside fields and chips

No button is shorter than 32px except `icon-xs`, which keeps a 24px clickable area.

### Accessibility

The Button component follows WAI-ARIA guidelines:

- Uses native `button` element by default
- Supports keyboard navigation
- Maintains focus states
- Communicates disabled states to assistive technology
- Links rendered with `render` and `nativeButton={false}` keep their link semantics

### Best Practices

1. Use appropriate variants for different actions:
   - `default` for primary actions
   - `destructive` for dangerous operations
   - `ghost-destructive` for a delete in a row or toolbar of quieter actions
   - `outline`, `secondary` or `ghost` for secondary actions

2. Include descriptive text:
   - Use clear, action-oriented labels
   - Avoid generic text like "Click here"
   - Keep text concise but meaningful

3. Icon usage:
   - Use icons to reinforce meaning
   - Mark leading/trailing icons with `data-icon`
   - Provide an `aria-label` for icon-only buttons

4. Loading states:
   - Show a spinning icon for async actions
   - Disable the button while loading
   - Keep the label so the button width stays stable

5. Accessibility:
   - Ensure sufficient color contrast
   - Maintain focus visibility

### Related Components

- ButtonGroup
- Toggle
- Spinner

## Source

File: components/ui/button.tsx

```tsx
import { Button as ButtonPrimitive } from '@base-ui/react/button'
import { cva, type VariantProps } from 'class-variance-authority'
import * as React from 'react'
import { cn } from '@/lib/utils'

const buttonVariants = cva(
	"group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring cursor-pointer disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 data-disabled:cursor-not-allowed data-disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
	{
		variants: {
			variant: {
				// Colours kept from the previous Rapid button (ghost is shadcn's), with a pressed background instead of
				// shadcn's press-down nudge; sizes, focus and states are shadcn's
				default: 'bg-primary text-primary-foreground hover:bg-primary/90 active:bg-primary/80',
				outline:
					'border-input bg-background text-foreground hover:bg-accent active:bg-[color-mix(in_oklch,var(--accent),var(--foreground)_6%)] aria-expanded:bg-secondary aria-expanded:text-secondary-foreground',
				secondary:
					'bg-secondary text-secondary-foreground hover:bg-[color-mix(in_oklch,var(--secondary),var(--secondary-foreground)_8%)] active:bg-[color-mix(in_oklch,var(--secondary),var(--secondary-foreground)_16%)] aria-expanded:bg-secondary aria-expanded:text-secondary-foreground',
				ghost:
					'hover:bg-muted hover:text-foreground active:bg-[color-mix(in_oklch,var(--muted),var(--foreground)_10%)] aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50',
				destructive: 'bg-destructive text-white hover:bg-destructive/90 active:bg-destructive/80',
				// Quiet at rest so a delete sits at the same weight as the actions beside it; the destructive colour arrives on
				// hover and focus, where the intent is real
				'ghost-destructive':
					'hover:bg-destructive/10 hover:text-[color-mix(in_oklab,var(--destructive)_80%,black)] focus-visible:text-[color-mix(in_oklab,var(--destructive)_80%,black)] active:bg-destructive/20 aria-expanded:bg-destructive/10 aria-expanded:text-destructive dark:hover:bg-destructive/20 dark:hover:text-[color-mix(in_oklab,var(--destructive)_50%,white)] dark:focus-visible:text-[color-mix(in_oklab,var(--destructive)_50%,white)]',
				link: 'text-primary underline underline-offset-4',
			},
			size: {
				default: 'h-10 gap-2 px-4 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3',
				xs: "h-8 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
				sm: "h-8 gap-1.5 rounded-[min(var(--radius-md),12px)] px-3 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
				lg: 'h-12 gap-2 px-6 has-data-[icon=inline-end]:pr-5 has-data-[icon=inline-start]:pl-5',
				icon: 'size-10',
				'icon-xs':
					"size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
				'icon-sm': 'size-8 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg',
				'icon-lg': 'size-12',
			},
		},
		defaultVariants: {
			variant: 'default',
			size: 'default',
		},
	},
)

// Base UI's Button defaults to type="button" on a native <button>, so buttons never submit a form by accident.
// Render a link with `render={<a href="…" />}` and `nativeButton={false}`. Base UI would give it role="button"; we drop
// that role for <a> elements so a link keeps its link semantics.
function Button({
	className,
	variant = 'default',
	size = 'default',
	render,
	...props
}: ButtonPrimitive.Props & VariantProps<typeof buttonVariants>) {
	const isLink = React.isValidElement(render) && render.type === 'a' && !('role' in props)

	return (
		<ButtonPrimitive
			data-slot="button"
			data-variant={variant}
			data-size={size}
			className={cn(buttonVariants({ variant, size, className }))}
			render={render}
			{...(isLink ? { role: undefined } : null)}
			{...props}
		/>
	)
}

export { Button, buttonVariants }
```

---

# Button Group

Groups related buttons into a single attached control, with optional separators.

Install: `npx shadcn@latest add https://rdf.dev.360online.com/r/button-group.json`

Import from: `@/components/ui/button-group`

Builds on: separator

npm dependencies: @base-ui/react@^1.8.0, class-variance-authority@^0.7.1

Groups related buttons — or an input together with buttons — into one visual control. Adjacent borders and corner radii
are merged, and nested groups are spaced apart.

### Features

- Horizontal and vertical orientation
- `ButtonGroupSeparator` for split buttons
- `ButtonGroupText` for static prefixes/suffixes
- `ButtonGroupText` supports the `render` prop (e.g. to render a `Label`)
- Nested `ButtonGroup`s are spaced apart automatically
- Works with any `Button` variant and size (including `xs` and icon sizes), `Input`, or `Select`
- `buttonGroupVariants` is exported for reuse

### Usage

```tsx
import { ButtonGroup, ButtonGroupSeparator, ButtonGroupText } from "@/components/ui/button-group"
import { Button } from "@/components/ui/button"
import { ChevronDown } from "lucide-react"

<ButtonGroup aria-label="Message actions">
  <Button variant="outline">Reply</Button>
  <Button variant="outline">Forward</Button>
  <Button variant="outline">Archive</Button>
</ButtonGroup>

// Split button
<ButtonGroup>
  <Button>Send decision</Button>
  <ButtonGroupSeparator />
  <Button size="icon" aria-label="More ways to send">
    <ChevronDown />
  </Button>
</ButtonGroup>
```

#### Default

Actions on a message in the case inbox. Give the group an `aria-label` when its purpose isn’t obvious from the buttons.

#### Sizes

Buttons keep their own size inside a group; use matching text and icon sizes.

#### Vertical

`orientation="vertical"` stacks the buttons, here as zoom controls on a property map.

#### With separator

A split button: the main action plus a dropdown with alternatives, divided by `ButtonGroupSeparator`.

#### With text

`ButtonGroupText` with `render={<Label />}` renders a `Label` as a prefix for an input.

#### Stepper

A number stepper built from two icon buttons and `ButtonGroupText`. The buttons use `focusableWhenDisabled`, so keyboard
focus stays on a button when it reaches the limit and becomes disabled.

#### Nested groups

Nested groups are spaced apart automatically, like the week navigation and Today button in a calendar header.

#### Disabled

Disable a single button when that action isn't available.

### Props


- `ButtonGroup` - `orientation?: 'horizontal' | 'vertical'` (default `'horizontal'`), renders `role="group"`
- `ButtonGroupText` - `render?: React.ReactElement`, the element to render instead of a `div`
- `ButtonGroupSeparator` - props of `Separator`; `orientation` defaults to `'vertical'`

### Related Components

- Button
- Toggle Group
- Input Group

## Source

File: components/ui/button-group.tsx

```tsx
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 { Separator } from '@/components/ui/separator'
import { cn } from '@/lib/utils'

// A filled button paints inside its transparent border (bg-clip-padding), which leaves it a pixel short beside outlined
// buttons in a group; bg-clip-border lets it fill to the group's edge
const buttonGroupVariants = cva(
	"group/button-group flex w-fit items-stretch [&>[data-variant]]:bg-clip-border *:focus-visible:relative *:focus-visible:z-10 has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-lg [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",
	{
		variants: {
			orientation: {
				horizontal:
					'*:data-slot:rounded-r-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-r-lg! [&>[data-slot]~[data-slot]]:rounded-l-none [&>[data-slot]~[data-slot]]:border-l-0',
				vertical:
					'flex-col *:data-slot:rounded-b-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-lg! [&>[data-slot]~[data-slot]]:rounded-t-none [&>[data-slot]~[data-slot]]:border-t-0',
			},
		},
		defaultVariants: {
			orientation: 'horizontal',
		},
	},
)

function ButtonGroup({
	className,
	orientation,
	...props
}: React.ComponentProps<'div'> & VariantProps<typeof buttonGroupVariants>) {
	return (
		<div
			role="group"
			data-slot="button-group"
			data-orientation={orientation}
			className={cn(buttonGroupVariants({ orientation }), className)}
			{...props}
		/>
	)
}

function ButtonGroupText({ className, render, ...props }: useRender.ComponentProps<'div'>) {
	return useRender({
		defaultTagName: 'div',
		props: mergeProps<'div'>(
			{
				className: cn(
					"flex items-center gap-2 rounded-lg border bg-muted px-2.5 text-sm font-medium [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
					className,
				),
			},
			props,
		),
		render,
		state: {
			slot: 'button-group-text',
		},
	})
}

function ButtonGroupSeparator({
	className,
	orientation = 'vertical',
	...props
}: React.ComponentProps<typeof Separator>) {
	return (
		<Separator
			data-slot="button-group-separator"
			orientation={orientation}
			className={cn(
				'relative self-stretch bg-input data-horizontal:mx-px data-horizontal:w-auto data-vertical:my-px data-vertical:h-auto',
				className,
			)}
			{...props}
		/>
	)
}

export { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, buttonGroupVariants }
```

---

# Calendar

Date grid built on react-day-picker, used by the date pickers.

Install: `npx shadcn@latest add https://rdf.dev.360online.com/r/calendar.json`

Import from: `@/components/ui/calendar`

Builds on: button

npm dependencies: lucide-react@^1.48.0, react-day-picker@^10.0.1

A flexible and accessible calendar component built on top of [react-day-picker](https://daypicker.dev/) v10.
Supports single date selection, date ranges, multiple dates, and various display modes with full keyboard navigation and screen reader support.

### Features

- Single date, date range, and multiple date selection modes
- Dropdown navigation for months and years
- Caption layouts: `label`, `dropdown`, `dropdown-months`, `dropdown-years`
- Week numbers display
- Weeks start on Monday by default (`weekStartsOn={1}`); pass `weekStartsOn={0}` for Sunday
- Disabled dates and date ranges
- Multiple month display
- Accessible keyboard navigation
- Screen reader support
- Custom styling with Tailwind CSS
- Localization via the `locale` prop (e.g. `sv` from `react-day-picker/locale`)
- Outside days shown by default (`showOutsideDays`)
- Configurable navigation button variant (`buttonVariant`)

### Usage

```tsx
import { Calendar } from '@/components/ui/calendar'
import type { DateRange } from 'react-day-picker'

// Basic usage
export function MyComponent() {
  const [selected, setSelected] = React.useState<Date>()
  
  return (
    <Calendar
      mode="single"
      selected={selected}
      onSelect={setSelected}
    />
  )
}

// Date range selection
export function DateRangeComponent() {
  const [selected, setSelected] = React.useState<DateRange>()
  
  return (
    <Calendar
      mode="range"
      selected={selected}
      onSelect={setSelected}
    />
  )
}

// Multiple date selection
export function MultipleDatesComponent() {
  const [selected, setSelected] = React.useState<Date[]>([])
  
  return (
    <Calendar
      mode="multiple"
      selected={selected}
      onSelect={setSelected}
    />
  )
}
```

#### Default

A single date, opened on a fixed month with `defaultMonth`. Weeks start on Monday.

#### With Dropdown Navigation

Month and year dropdowns (`captionLayout="dropdown"`) make dates far back, like a date of birth, quick to reach.
`startMonth` and `endMonth` limit the years in the dropdown.

#### Date Range Selection

`mode="range"` inside a card, for pausing home help while the resident is away. The footer summarises the selection.

#### Multiple Date Selection

`mode="multiple"` for picking individual days, with weekends disabled.

#### With Preselected Date

With `required`, a date is always selected and `onSelect` always receives a `Date`.

#### With Disabled Dates

A booking card where past days, weekends and fully booked days are disabled by passing matchers and dates to
`disabled`, next to a list of time slots.

#### Multiple Months Display

Two months side by side (`numberOfMonths={2}`) make ranges that cross a month boundary easier to select.

#### With Week Numbers

`showWeekNumber` adds ISO week numbers, which are widely used in the Nordic countries. Custom `modifiers` and
`modifiersClassNames` mark waste collection days, with a legend that explains the marker.

#### Custom Week Start

Weeks start on Monday by default. Pass `weekStartsOn` to change it, e.g. `weekStartsOn={0}` for Sunday.

#### With Min/Max Dates

Calendar with restricted date selection and navigation range (`disabled={{ before, after }}` together with
`startMonth` / `endMonth`).

#### Caption Layouts

Month-only and year-only dropdowns.

#### With Locale

Swedish and Finnish month and weekday names via `locale={sv}` and `locale={fi}`.

#### Outline Navigation

Navigation buttons rendered with `buttonVariant="outline"`.

#### Fixed Weeks

Always render six weeks per month, so the height doesn’t change when navigating.

### Props


#### Calendar
- `mode` - Selection mode ('single' | 'multiple' | 'range')
- `selected` - Currently selected date(s)
- `onSelect` - Callback when selection changes
- `captionLayout` - Layout of the month/year caption ('label' | 'dropdown' | 'dropdown-months' | 'dropdown-years'), defaults to 'label'
- `showOutsideDays` - Whether to show days from adjacent months (defaults to `true`)
- `numberOfMonths` - Number of months to display simultaneously
- `weekStartsOn` - First day of the week (0=Sunday, 1=Monday, etc.); defaults to `1` (Monday)
- `showWeekNumber` - Whether to display week numbers
- `fixedWeeks` - Always display six weeks
- `disabled` - Dates or matchers to disable (e.g. `{ before: date }`, `{ after: date }`, `{ dayOfWeek: [0, 6] }`)
- `startMonth` / `endMonth` - Navigation boundaries (also limit the dropdown years)
- `locale` - A date-fns / react-day-picker locale
- `timeZone` - IANA time zone for calendar math
- `className` - Additional CSS classes
- `buttonVariant` - `Button` variant for the navigation buttons ('default' | 'outline' | 'secondary' | 'ghost' | 'destructive' | 'link'), defaults to 'ghost'

All other react-day-picker `DayPicker` props are supported. `CalendarDayButton` is also exported for custom
`components={{ DayButton }}` overrides.

#### Date Selection Types

##### Single Mode
```tsx
const [selected, setSelected] = React.useState<Date>()
<Calendar mode="single" selected={selected} onSelect={setSelected} />
```

##### Range Mode
```tsx
const [selected, setSelected] = React.useState<DateRange>()
<Calendar mode="range" selected={selected} onSelect={setSelected} />
```

##### Multiple Mode
```tsx
const [selected, setSelected] = React.useState<Date[]>([])
<Calendar mode="multiple" selected={selected} onSelect={setSelected} />
```

### Accessibility

The Calendar component follows WAI-ARIA guidelines:

- Uses proper ARIA roles (`grid`, `gridcell`, `button`)
- Supports comprehensive keyboard navigation:
  - `Arrow keys`: Navigate between dates
  - `Space/Enter`: Select date
  - `Page Up/Down`: Navigate months
  - `Shift + Page Up/Down`: Navigate years
  - `Home/End`: Navigate to week start/end
  - `Ctrl + Home`: Navigate to today
- Announces date changes to screen readers
- Maintains focus management during navigation
- Provides clear visual feedback for all states
- Supports high contrast mode

### Best Practices

1. **Date Selection**:
   - Provide clear visual feedback for selected dates
   - Use appropriate selection mode for the use case
   - Consider date range limitations when needed

2. **Navigation**:
   - Use dropdown navigation for large date ranges
   - Provide year boundaries to prevent excessive scrolling
   - Consider starting week day based on user locale

3. **Accessibility**:
   - Ensure sufficient color contrast for all states
   - Provide keyboard navigation instructions
   - Test with screen readers
   - Maintain logical tab order

4. **User Experience**:
   - Show multiple months for range selection
   - Disable irrelevant dates clearly
   - Provide feedback for selected dates
   - Consider mobile touch targets

5. **Localization**:
   - Configure week start day based on locale
   - Use appropriate date formatting
   - Support right-to-left languages
   - Provide translated month/day names

### Related Components

- Datetime Picker - For date and time selection
- Time Picker - For time selection
- Popover - For calendar dropdown implementations

## Source

File: components/ui/calendar.tsx

```tsx
'use client'

import { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon } from 'lucide-react'
import * as React from 'react'
import { type DayButton, DayPicker, getDefaultClassNames, type Locale, useDayPicker } from 'react-day-picker'

import { Button, buttonVariants } from '@/components/ui/button'
import { cn } from '@/lib/utils'

function Calendar({
	className,
	classNames,
	showOutsideDays = true,
	captionLayout = 'label',
	buttonVariant = 'ghost',
	// Weeks start on Monday by default, as in the Nordic countries; pass weekStartsOn to override
	weekStartsOn = 1,
	locale,
	formatters,
	components,
	...props
}: React.ComponentProps<typeof DayPicker> & {
	buttonVariant?: React.ComponentProps<typeof Button>['variant']
}) {
	const defaultClassNames = getDefaultClassNames()

	return (
		<DayPicker
			showOutsideDays={showOutsideDays}
			weekStartsOn={weekStartsOn}
			className={cn(
				'group/calendar bg-background p-2 [--cell-radius:var(--radius-md)] [--cell-size:--spacing(9)] in-data-[slot=card-content]:bg-transparent in-data-[slot=popover-content]:bg-transparent',
				String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
				String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
				className,
			)}
			captionLayout={captionLayout}
			locale={locale}
			formatters={{
				formatMonthDropdown: (date) => date.toLocaleString(locale?.code, { month: 'short' }),
				...formatters,
			}}
			classNames={{
				root: cn('w-fit', defaultClassNames.root),
				months: cn('relative flex flex-col gap-4 md:flex-row', defaultClassNames.months),
				month: cn('flex w-full flex-col gap-4', defaultClassNames.month),
				nav: cn('absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1', defaultClassNames.nav),
				button_previous: cn(
					buttonVariants({ variant: buttonVariant }),
					'size-(--cell-size) p-0 select-none aria-disabled:opacity-50',
					defaultClassNames.button_previous,
				),
				button_next: cn(
					buttonVariants({ variant: buttonVariant }),
					'size-(--cell-size) p-0 select-none aria-disabled:opacity-50',
					defaultClassNames.button_next,
				),
				month_caption: cn(
					'flex h-(--cell-size) w-full items-center justify-center px-(--cell-size)',
					defaultClassNames.month_caption,
				),
				dropdowns: cn(
					'flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-medium',
					defaultClassNames.dropdowns,
				),
				dropdown_root: cn(
					'relative rounded-(--cell-radius) has-focus:ring-3 has-focus:ring-ring',
					defaultClassNames.dropdown_root,
				),
				dropdown: cn('absolute inset-0 bg-popover opacity-0', defaultClassNames.dropdown),
				caption_label: cn(
					'font-medium select-none',
					captionLayout === 'label'
						? 'text-sm'
						: 'flex items-center gap-1 rounded-(--cell-radius) text-sm [&>svg]:size-3.5 [&>svg]:text-muted-foreground',
					defaultClassNames.caption_label,
				),
				month_grid: cn('w-full border-collapse', defaultClassNames.month_grid),
				weekdays: cn('flex', defaultClassNames.weekdays),
				weekday: cn(
					'flex-1 rounded-(--cell-radius) text-[0.8rem] font-normal text-muted-foreground select-none',
					defaultClassNames.weekday,
				),
				week: cn('mt-2 flex w-full', defaultClassNames.week),
				week_number_header: cn('w-(--cell-size) select-none', defaultClassNames.week_number_header),
				week_number: cn('text-[0.8rem] text-muted-foreground select-none', defaultClassNames.week_number),
				day: cn(
					'group/day relative aspect-square h-full w-full rounded-(--cell-radius) p-0 text-center select-none [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius)',
					props.showWeekNumber
						? '[&:nth-child(2)[data-selected=true]_button]:rounded-l-(--cell-radius)'
						: '[&:first-child[data-selected=true]_button]:rounded-l-(--cell-radius)',
					defaultClassNames.day,
				),
				range_start: cn(
					'relative isolate z-0 rounded-l-(--cell-radius) bg-muted after:absolute after:inset-y-0 after:right-0 after:w-4 after:bg-muted',
					defaultClassNames.range_start,
				),
				range_middle: cn('rounded-none', defaultClassNames.range_middle),
				range_end: cn(
					'relative isolate z-0 rounded-r-(--cell-radius) bg-muted after:absolute after:inset-y-0 after:left-0 after:w-4 after:bg-muted',
					defaultClassNames.range_end,
				),
				today: cn(
					'rounded-(--cell-radius) bg-muted text-foreground data-[selected=true]:rounded-none',
					defaultClassNames.today,
				),
				outside: cn('text-muted-foreground aria-selected:text-muted-foreground', defaultClassNames.outside),
				disabled: cn('text-muted-foreground opacity-50', defaultClassNames.disabled),
				hidden: cn('invisible', defaultClassNames.hidden),
				...classNames,
			}}
			components={{
				Root: ({ className, rootRef, ...props }) => {
					return <div data-slot="calendar" ref={rootRef} className={cn(className)} {...props} />
				},
				Chevron: ({ className, orientation, ...props }) => {
					if (orientation === 'left') {
						return <ChevronLeftIcon className={cn('size-4', className)} {...props} />
					}

					if (orientation === 'right') {
						return <ChevronRightIcon className={cn('size-4', className)} {...props} />
					}

					return <ChevronDownIcon className={cn('size-4', className)} {...props} />
				},
				DayButton: CalendarLocalizedDayButton,
				WeekNumber: ({ children, ...props }) => {
					return (
						<td {...props}>
							<div className="flex size-(--cell-size) items-center justify-center text-center">{children}</div>
						</td>
					)
				},
				...components,
			}}
			{...props}
		/>
	)
}

/** The day button `Calendar` hands to DayPicker: a `CalendarDayButton` in the locale the calendar was given. */
function CalendarLocalizedDayButton(props: Readonly<React.ComponentProps<typeof DayButton>>) {
	const { dayPickerProps } = useDayPicker()
	return <CalendarDayButton locale={dayPickerProps.locale} {...props} />
}

function CalendarDayButton({
	className,
	day,
	modifiers,
	locale,
	...props
}: React.ComponentProps<typeof DayButton> & { locale?: Partial<Locale> }) {
	const defaultClassNames = getDefaultClassNames()

	const ref = React.useRef<HTMLButtonElement>(null)
	React.useEffect(() => {
		if (modifiers.focused) ref.current?.focus()
	}, [modifiers.focused])

	return (
		<Button
			ref={ref}
			variant="ghost"
			size="icon"
			data-day={day.date.toLocaleDateString(locale?.code)}
			data-selected-single={
				modifiers.selected && !modifiers.range_start && !modifiers.range_end && !modifiers.range_middle
			}
			data-range-start={modifiers.range_start}
			data-range-end={modifiers.range_end}
			data-range-middle={modifiers.range_middle}
			className={cn(
				'relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-[3px] group-data-[focused=true]/day:ring-ring data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:rounded-none data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground dark:hover:text-foreground [&>span]:text-xs [&>span]:opacity-70',
				defaultClassNames.day,
				className,
			)}
			{...props}
		/>
	)
}

export { Calendar, CalendarDayButton }
```

---

# Card

Surface container with header, title, description, content and footer slots.

Install: `npx shadcn@latest add https://rdf.dev.360online.com/r/card.json`

Import from: `@/components/ui/card`

A versatile card component that serves as a container for content, with support for headers, actions, footers,
and various content layouts. Built with Tailwind CSS, it provides a consistent and customizable way to
display grouped content.

### Features

- Composable parts: `Card`, `CardHeader`, `CardTitle`, `CardDescription`, `CardAction`, `CardContent`, `CardFooter`
- `CardAction` slot placed in the top-right corner of the header
- Two sizes via `size`: `default` and `sm` (tighter spacing and smaller title)
- Header with a divider below it (remove it with `className="border-b-0 pb-0"`)
- Footer with a top border
- Edge-to-edge images when an `img` is the first or last child
- `data-slot` attributes on every part for styling hooks
- Custom styling support via `className`

### Usage

```tsx
import {
  Card,
  CardAction,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from '@/components/ui/card'
import { Button } from '@/components/ui/button'

export function CaseCard() {
  return (
    <Card className="w-full max-w-md">
      <CardHeader>
        <CardTitle>Extension of detached house</CardTitle>
        <CardDescription>Case 2026-04812 · Storgatan 14</CardDescription>
        <CardAction>
          <Button variant="outline" size="sm">
            Edit
          </Button>
        </CardAction>
      </CardHeader>
      <CardContent>
        <p>Received 12 February 2026. Decision due 12 March 2026.</p>
      </CardContent>
      <CardFooter>
        <Button size="sm">Open case</Button>
      </CardFooter>
    </Card>
  )
}

// Compact card
export function StatCard() {
  return (
    <Card size="sm">
      <CardHeader>
        <CardDescription>Open cases</CardDescription>
        <CardTitle>128</CardTitle>
      </CardHeader>
      <CardContent>+12 this week</CardContent>
    </Card>
  )
}
```

#### Default

A short e-service form for a parking permit, with header, content and footer.

#### With Action

Place a button or menu trigger in `CardAction` to align it with the header, here next to a list of notification
settings.

#### Small

`size="sm"` reduces the card spacing and title size, which suits a row of key figures on a dashboard. The header
divider is removed with `className="border-b-0 pb-0"`.

#### With Image

A municipal facility card with an image area on top. An `img` as the first child sits edge to edge automatically; for
any other element, remove the top padding with `pt-0`.

#### Case Summary

A summary of a case in case management: key facts, the case officer and a link to the full case.

#### Loading State

Compose `Skeleton` placeholders that mirror the final layout while content loads.

### Props


- `Card` - `size?: 'default' | 'sm'` (default `'default'`), plus all `div` attributes
- `CardTitle` - renders a heading; `as?: 'h2' | 'h3' | 'h4' | 'h5' | 'h6'` (default `'h3'`), plus all heading attributes
- `CardDescription` - renders a `p`, plus all `p` attributes
- `CardHeader`, `CardAction`, `CardContent`, `CardFooter` - all `div` attributes

Pick the `CardTitle` level that fits the page's heading outline, e.g. `<CardTitle as="h2">Title</CardTitle>`.

### Accessibility

- `CardTitle` renders a real heading (`h3` by default); set `as` to match the page's heading levels
- `CardDescription` renders a paragraph
- Ensure interactive elements in `CardAction` have accessible labels
- Ensure proper color contrast for custom backgrounds

### Best Practices

1. Content Structure:
   - Use clear hierarchy
   - Keep content concise
   - Group related information

2. Actions:
   - Use `CardAction` for a single secondary action in the header
   - Put primary actions in `CardFooter`

3. Responsive Design:
   - Set appropriate widths
   - Handle image scaling
   - Use `size="sm"` in dense layouts

4. Loading:
   - Use `Skeleton` to mirror the final layout

### Related Components

- Skeleton
- Button

## Source

File: components/ui/card.tsx

```tsx
import type * as React from 'react'
import { cn } from '@/lib/utils'

function Card({ className, size = 'default', ...props }: React.ComponentProps<'div'> & { size?: 'default' | 'sm' }) {
	return (
		// min-h-min: overflow-hidden would let a flex column shrink the card below its content and clip it; pass
		// `min-h-0` to let a card shrink and scroll inside instead
		<div
			data-slot="card"
			data-size={size}
			className={cn(
				'group/card flex min-h-min flex-col gap-(--card-spacing) overflow-hidden rounded-xl bg-card py-(--card-spacing) text-sm text-card-foreground border border-border [--card-spacing:--spacing(4)] has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:[--card-spacing:--spacing(3)] data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl',
				className,
			)}
			{...props}
		/>
	)
}

function CardHeader({ className, ...props }: React.ComponentProps<'div'>) {
	return (
		<div
			data-slot="card-header"
			className={cn(
				'group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl px-(--card-spacing) has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] border-b pb-(--card-spacing)',
				className,
			)}
			{...props}
		/>
	)
}

function CardTitle({
	className,
	as: Heading = 'h3',
	...props
}: React.ComponentProps<'h3'> & {
	/** Heading level to render, so the card fits the page's heading outline */
	as?: 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
}) {
	return (
		<Heading
			data-slot="card-title"
			className={cn('font-heading text-base leading-snug font-medium group-data-[size=sm]/card:text-sm', className)}
			{...props}
		/>
	)
}

function CardDescription({ className, ...props }: React.ComponentProps<'p'>) {
	return <p data-slot="card-description" className={cn('text-sm text-muted-foreground', className)} {...props} />
}

function CardAction({ className, ...props }: React.ComponentProps<'div'>) {
	return (
		<div
			data-slot="card-action"
			className={cn('col-start-2 row-span-2 row-start-1 self-start justify-self-end', className)}
			{...props}
		/>
	)
}

function CardContent({ className, ...props }: React.ComponentProps<'div'>) {
	return <div data-slot="card-content" className={cn('px-(--card-spacing)', className)} {...props} />
}

function CardFooter({ className, ...props }: React.ComponentProps<'div'>) {
	return (
		<div
			data-slot="card-footer"
			className={cn('flex items-center rounded-b-xl border-t p-(--card-spacing)', className)}
			{...props}
		/>
	)
}

export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent }
```

---

# Carousel

Swipeable carousel with previous/next controls, built on Embla.

Install: `npx shadcn@latest add https://rdf.dev.360online.com/r/carousel.json`

Import from: `@/components/ui/carousel`

Builds on: button

npm dependencies: embla-carousel-react@^8.6.0, lucide-react@^1.48.0

A carousel with motion and swipe built on Embla Carousel. It supports horizontal and vertical orientation, several items per view, looping and programmatic control through the Embla API, and is suited for news, highlights and image galleries.

### Features

- Horizontal and vertical orientation
- Swipe, drag and keyboard (arrow key) navigation
- Configurable item sizes and spacing via basis and padding classes
- Embla options such as loop and align
- Access to the Embla API through setApi
- Plugin support (e.g. autoplay)

### Usage

```tsx
import {
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselNext,
  CarouselPrevious,
} from '@/components/ui/carousel'

export function NewsCarousel() {
  return (
    <Carousel aria-label="News" className="w-full max-w-xs">
      <CarouselContent>
        <CarouselItem>New recycling station opens in Norrby</CarouselItem>
        <CarouselItem>Apply for a summer job before 15 April</CarouselItem>
        <CarouselItem>Road works on Storgatan until August</CarouselItem>
      </CarouselContent>
      <CarouselPrevious />
      <CarouselNext />
    </Carousel>
  )
}
```

#### Default

One news card per slide with previous and next buttons. The examples use token-based placeholders where your site
would show photos.

#### Multiple Items

Several items per view using `basis-*` classes on `CarouselItem`, here upcoming events.

#### Spacing

Tighter spacing: a negative margin on `CarouselContent` (`-ml-2`) matched by padding on each item (`pl-2`).

#### Vertical

`orientation="vertical"` with two service notices per view. Give `CarouselContent` a fixed height.

#### Loop

`opts={{ loop: true }}` goes back to the first photo after the last.

#### With Api

`setApi` gives access to the Embla API, used here for step dots that show and change the current step of a guide.

### Accessibility

- The root has role="region" and aria-roledescription="carousel"
- Each item has role="group" and aria-roledescription="slide"
- Arrow keys move between slides when the carousel has focus
- Previous and next buttons include screen reader labels and are disabled at the edges
- Avoid autoplay, or provide a way to pause it

## Source

File: components/ui/carousel.tsx

```tsx
'use client'

import useEmblaCarousel, { type UseEmblaCarouselType } from 'embla-carousel-react'
import { ChevronLeftIcon, ChevronRightIcon } from 'lucide-react'
import * as React from 'react'

import { Button } from '@/components/ui/button'
import { cn } from '@/lib/utils'

type CarouselApi = UseEmblaCarouselType[1]
type UseCarouselParameters = Parameters<typeof useEmblaCarousel>
type CarouselOptions = UseCarouselParameters[0]
type CarouselPlugin = UseCarouselParameters[1]

type CarouselProps = {
	opts?: CarouselOptions
	plugins?: CarouselPlugin
	orientation?: 'horizontal' | 'vertical'
	setApi?: (api: CarouselApi) => void
}

type CarouselContextProps = {
	carouselRef: ReturnType<typeof useEmblaCarousel>[0]
	api: ReturnType<typeof useEmblaCarousel>[1]
	scrollPrev: () => void
	scrollNext: () => void
	canScrollPrev: boolean
	canScrollNext: boolean
} & CarouselProps

const CarouselContext = React.createContext<CarouselContextProps | null>(null)

function useCarousel() {
	const context = React.useContext(CarouselContext)

	if (!context) {
		throw new Error('useCarousel must be used within a <Carousel />')
	}

	return context
}

function Carousel({
	orientation = 'horizontal',
	opts,
	setApi,
	plugins,
	className,
	children,
	...props
}: React.ComponentProps<'div'> & CarouselProps) {
	const [carouselRef, api] = useEmblaCarousel(
		{
			...opts,
			axis: orientation === 'horizontal' ? 'x' : 'y',
		},
		plugins,
	)
	const [canScrollPrev, setCanScrollPrev] = React.useState(false)
	const [canScrollNext, setCanScrollNext] = React.useState(false)

	const onSelect = React.useCallback((api: CarouselApi) => {
		if (!api) return
		setCanScrollPrev(api.canScrollPrev())
		setCanScrollNext(api.canScrollNext())
	}, [])

	const scrollPrev = React.useCallback(() => {
		api?.scrollPrev()
	}, [api])

	const scrollNext = React.useCallback(() => {
		api?.scrollNext()
	}, [api])

	const handleKeyDown = React.useCallback(
		(event: React.KeyboardEvent<HTMLDivElement>) => {
			if (event.key === 'ArrowLeft') {
				event.preventDefault()
				scrollPrev()
			} else if (event.key === 'ArrowRight') {
				event.preventDefault()
				scrollNext()
			}
		},
		[scrollPrev, scrollNext],
	)

	React.useEffect(() => {
		if (!api || !setApi) return
		setApi(api)
	}, [api, setApi])

	React.useEffect(() => {
		if (!api) return
		onSelect(api)
		api.on('reInit', onSelect)
		api.on('select', onSelect)

		return () => {
			api?.off('select', onSelect)
		}
	}, [api, onSelect])

	const contextValue = React.useMemo<CarouselContextProps>(
		() => ({
			carouselRef,
			api,
			opts,
			orientation: orientation || (opts?.axis === 'y' ? 'vertical' : 'horizontal'),
			scrollPrev,
			scrollNext,
			canScrollPrev,
			canScrollNext,
		}),
		[carouselRef, api, opts, orientation, scrollPrev, scrollNext, canScrollPrev, canScrollNext],
	)

	return (
		<CarouselContext.Provider value={contextValue}>
			<div
				onKeyDownCapture={handleKeyDown}
				className={cn('relative', className)}
				role="region"
				aria-roledescription="carousel"
				data-slot="carousel"
				{...props}
			>
				{children}
			</div>
		</CarouselContext.Provider>
	)
}

function CarouselContent({ className, ...props }: React.ComponentProps<'div'>) {
	const { carouselRef, orientation } = useCarousel()

	return (
		<div ref={carouselRef} className="overflow-hidden" data-slot="carousel-content">
			<div className={cn('flex', orientation === 'horizontal' ? '-ml-4' : '-mt-4 flex-col', className)} {...props} />
		</div>
	)
}

function CarouselItem({ className, ...props }: React.ComponentProps<'div'>) {
	const { orientation } = useCarousel()

	return (
		<div
			role="group"
			aria-roledescription="slide"
			data-slot="carousel-item"
			className={cn('min-w-0 shrink-0 grow-0 basis-full', orientation === 'horizontal' ? 'pl-4' : 'pt-4', className)}
			{...props}
		/>
	)
}

function CarouselPrevious({
	className,
	variant = 'outline',
	size = 'icon-sm',
	...props
}: React.ComponentProps<typeof Button>) {
	const { orientation, scrollPrev, canScrollPrev } = useCarousel()

	return (
		<Button
			data-slot="carousel-previous"
			variant={variant}
			size={size}
			className={cn(
				'absolute touch-manipulation rounded-full',
				orientation === 'horizontal' ? 'inset-y-0 -left-12 my-auto' : '-top-12 left-1/2 -translate-x-1/2 rotate-90',
				className,
			)}
			disabled={!canScrollPrev}
			onClick={scrollPrev}
			{...props}
		>
			<ChevronLeftIcon />
			<span className="sr-only">Previous slide</span>
		</Button>
	)
}

function CarouselNext({
	className,
	variant = 'outline',
	size = 'icon-sm',
	...props
}: React.ComponentProps<typeof Button>) {
	const { orientation, scrollNext, canScrollNext } = useCarousel()

	return (
		<Button
			data-slot="carousel-next"
			variant={variant}
			size={size}
			className={cn(
				'absolute touch-manipulation rounded-full',
				orientation === 'horizontal' ? 'inset-y-0 -right-12 my-auto' : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',
				className,
			)}
			disabled={!canScrollNext}
			onClick={scrollNext}
			{...props}
		>
			<ChevronRightIcon />
			<span className="sr-only">Next slide</span>
		</Button>
	)
}

export { type CarouselApi, Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext, useCarousel }
```

---

# Chart

Recharts wrapper with theme-aware colors, tooltips and legends.

Install: `npx shadcn@latest add https://rdf.dev.360online.com/r/chart.json`

Import from: `@/components/ui/chart`

npm dependencies: recharts@3.8.0

A comprehensive chart component built on top of [Recharts](https://recharts.org/) 3,
providing accessible and customizable data visualization with consistent theming and styling.
Features automatic color theming, responsive design, and comprehensive tooltip/legend support.

### Features

- Built on Recharts for robust chart functionality
- Automatic color theming with light/dark mode support
- Responsive container with aspect ratio control
- Customizable tooltips (`dot`, `line` and `dashed` indicators, `hideLabel`, `hideIndicator`, `formatter`) and legends
- Icon support for data series
- `initialDimension` to control the size used before the container is measured (useful for SSR)
- TypeScript support with comprehensive types
- Accessible by default
- Multiple chart types (Bar, Line, Area, Pie)
- Custom styling with Tailwind CSS
- Theme-aware color configuration

### Usage

```tsx
import {
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
  ChartLegend,
  ChartLegendContent,
  type ChartConfig,
} from '@/components/ui/chart'
import { BarChart, Bar, XAxis, CartesianGrid } from 'recharts'

// Define your chart configuration
const chartConfig = {
  received: {
    label: 'Received',
    color: 'var(--chart-1)',
  },
  decided: {
    label: 'Decided',
    color: 'var(--chart-2)',
  },
} satisfies ChartConfig

// Building permit applications per month
const data = [
  { month: 'January', received: 142, decided: 118 },
  { month: 'February', received: 168, decided: 131 },
  { month: 'March', received: 231, decided: 176 },
]

// Basic bar chart
export function PermitChart() {
  return (
    <ChartContainer config={chartConfig} className="h-[240px] w-full">
      <BarChart accessibilityLayer data={data}>
        <CartesianGrid vertical={false} />
        <XAxis dataKey="month" />
        <ChartTooltip content={<ChartTooltipContent />} />
        <Bar dataKey="received" fill="var(--color-received)" radius={4} />
        <Bar dataKey="decided" fill="var(--color-decided)" radius={4} />
      </BarChart>
    </ChartContainer>
  )
}

// Different colours in light and dark mode
export function ThemedChart() {
  const themedConfig = {
    received: {
      label: 'Received',
      theme: { light: 'var(--primary)', dark: 'var(--chart-1)' },
    },
    decided: {
      label: 'Decided',
      theme: { light: 'var(--muted-foreground)', dark: 'var(--chart-2)' },
    },
  } satisfies ChartConfig

  return (
    <ChartContainer config={themedConfig} className="h-[240px] w-full">
      <BarChart data={data}>
        <XAxis dataKey="month" />
        <ChartTooltip content={<ChartTooltipContent />} />
        <Bar dataKey="received" fill="var(--color-received)" radius={4} />
        <Bar dataKey="decided" fill="var(--color-decided)" radius={4} />
      </BarChart>
    </ChartContainer>
  )
}

// With icons and legend
import { GlobeIcon, PhoneIcon } from 'lucide-react'

export function ChannelChart() {
  const channelConfig = {
    eservice: { label: 'E-services', color: 'var(--chart-1)', icon: GlobeIcon },
    phone: { label: 'Phone', color: 'var(--chart-2)', icon: PhoneIcon },
  } satisfies ChartConfig

  return (
    <ChartContainer config={channelConfig} className="h-[240px] w-full">
      <BarChart data={channelData}>
        <XAxis dataKey="month" />
        <ChartTooltip content={<ChartTooltipContent />} />
        <ChartLegend content={<ChartLegendContent />} />
        <Bar dataKey="eservice" fill="var(--color-eservice)" radius={4} />
        <Bar dataKey="phone" fill="var(--color-phone)" radius={4} />
      </BarChart>
    </ChartContainer>
  )
}
```

#### Default Bar Chart

Building permit applications received and decided per month, in a `Card` with a short summary in the footer.

#### Line Chart

Processing time for two permit types, with a `ReferenceLine` for the legal limit and a legend. The second series is
dashed so the lines can be told apart without colour.

#### Area Chart

Stacked areas for physical and digital library loans.

#### Pie Chart

How residents contacted the municipality, with labels outside the slices. Colours are set per slice with
`fill: 'var(--color-<key>)'` in the data.

#### With Custom Tooltip

`labelFormatter` and `formatter` on `ChartTooltipContent` add the year and a unit to the tooltip.

#### With Icons

An `icon` in the config replaces the colour swatch in the legend and tooltip.

#### Responsive

With `w-full` and a fixed height, the chart fills the width of its container.

#### Custom Theme

`theme` sets separate colours for light and dark mode. Use theme tokens so the colours follow the active theme.

#### Tooltip Indicators

`ChartTooltipContent` with `indicator="dot"`, `"line"` and `"dashed"`.

#### Tooltip Without Label

`hideLabel` hides the tooltip heading, which suits a small sparkline in a key figure card.

#### Stacked Bar

Bars with the same `stackId` stack on top of each other; round only the outer corners with `radius`.

#### Horizontal Bar

`layout="vertical"` with category labels on the Y axis and values printed at the end of each bar with `LabelList`.

#### Donut Chart

Pie chart with `innerRadius` and a total in the middle via a Recharts `Label`, using `nameKey` so tooltip and legend
labels come from the config.

### Components

- `ChartContainer` - Provides the config context, injects `--color-{key}` variables and wraps children in a Recharts
  `ResponsiveContainer`. Props: `config` (required), `initialDimension` (`{ width, height }`, defaults to 320x200),
  plus `div` props.
- `ChartTooltip` - Re-export of Recharts `Tooltip`.
- `ChartTooltipContent` - Styled tooltip. Props: `indicator` (`'dot'` | `'line'` | `'dashed'`, default `'dot'`),
  `hideLabel`, `hideIndicator`, `nameKey`, `labelKey`, `labelFormatter`, `formatter`, `color`, `labelClassName`.
- `ChartLegend` - Re-export of Recharts `Legend`.
- `ChartLegendContent` - Styled legend. Props: `hideIcon`, `nameKey`.
- `ChartStyle` - The internal style injector (exported for advanced use).

### Chart Configuration

The `ChartConfig` type defines how your data keys are styled and labeled:

```tsx
type ChartConfig = {
  [key: string]: {
    label?: React.ReactNode
    icon?: React.ComponentType
  } & (
    | { color?: string; theme?: never }
    | { color?: never; theme: Record<'light' | 'dark', string> }
  )
}
```

#### Configuration Options

- **`label`**: Display name for the data series
- **`icon`**: Optional icon component for legends and tooltips
- **`color`**: Single color value (works in both themes)
- **`theme`**: Object with separate colors for light and dark themes

#### Built-in CSS Variables

The component provides CSS variables for consistent theming:

- `--chart-1` through `--chart-5`: Default chart colors (full color values, use them as `var(--chart-1)`)
- `--color-{key}`: Dynamic variables based on your config keys

### Chart Types

#### Supported Recharts Components

- **BarChart**: Vertical and horizontal bar charts
- **LineChart**: Line charts with multiple series
- **AreaChart**: Area and stacked area charts  
- **PieChart**: Pie and donut charts
- **RadialBarChart**: Radial progress charts
- **ScatterChart**: Scatter plot charts
- **ComposedChart**: Mixed chart types

#### Common Patterns

```tsx
// Bar Chart
<BarChart data={data}>
  <CartesianGrid vertical={false} />
  <XAxis dataKey="month" />
  <ChartTooltip content={<ChartTooltipContent />} />
  <Bar dataKey="value" fill="var(--color-value)" radius={4} />
</BarChart>

// Line Chart
<LineChart data={data}>
  <CartesianGrid strokeDasharray="3 3" />
  <XAxis dataKey="month" />
  <YAxis />
  <ChartTooltip content={<ChartTooltipContent />} />
  <Line type="monotone" dataKey="value" stroke="var(--color-value)" />
</LineChart>

// Area Chart
<AreaChart data={data}>
  <CartesianGrid strokeDasharray="3 3" />
  <XAxis dataKey="month" />
  <YAxis />
  <ChartTooltip content={<ChartTooltipContent />} />
  <Area type="monotone" dataKey="value" stroke="var(--color-value)" fill="var(--color-value)" />
</AreaChart>
```

### Accessibility

The Chart component follows accessibility best practices:

- Semantic markup with appropriate ARIA labels
- Keyboard navigation support where applicable
- High contrast colors for better visibility
- Screen reader friendly tooltips and labels
- Responsive design for various screen sizes
- Focus management for interactive elements

### Best Practices

1. **Data Preparation**:
   - Use consistent data structures
   - Handle missing or null values appropriately
   - Consider data aggregation for large datasets
   - Format numbers and dates consistently

2. **Visual Design**:
   - Choose appropriate chart types for your data
   - Use consistent color schemes across charts
   - Provide clear labels and legends
   - Maintain good contrast ratios

3. **Performance**:
   - Limit data points for better performance
   - Use appropriate chart dimensions
   - Consider virtualization for large datasets
   - Optimize re-renders with proper memoization

4. **Responsiveness**:
   - Set appropriate aspect ratios
   - Test on various screen sizes
   - Consider mobile-specific interactions
   - Use responsive font sizes

5. **Accessibility**:
   - Provide alternative text descriptions
   - Use semantic HTML where possible
   - Test with screen readers
   - Ensure keyboard accessibility

### Theming

#### CSS Variables

The component uses CSS variables for theming:

```css
:root {
  --chart-1: #d2691e;
  --chart-2: #4b6f9c;
  --chart-3: #3b4c7a;
  --chart-4: #d4a017;
  --chart-5: #c99a0f;
}
```

The variables hold complete color values, so reference them directly (`var(--chart-1)`) rather than wrapping them in
`hsl()`.

#### Custom Themes

You can override the default theme by providing custom colors:

```tsx
const customConfig = {
  applications: {
    label: 'Applications',
    theme: {
      light: 'var(--primary)', // Primary colour in light mode
      dark: 'var(--chart-1)',  // Chart colour in dark mode
    },
  },
  decisions: {
    label: 'Decisions',
    color: 'var(--chart-2)', // Same token in both modes
  },
}
```

### Related Components

- Card
- Tooltip
- Progress

## Source

File: components/ui/chart.tsx

```tsx
'use client'

import * as React from 'react'
import type { TooltipValueType } from 'recharts'
import * as RechartsPrimitive from 'recharts'
import { cn } from '@/lib/utils'

// Format: { THEME_NAME: CSS_SELECTOR }
const THEMES = { light: '', dark: '.dark' } as const

const INITIAL_DIMENSION = { width: 320, height: 200 } as const
type TooltipNameType = number | string

export type ChartConfig = Record<
	string,
	{
		label?: React.ReactNode
		icon?: React.ComponentType
	} & ({ color?: string; theme?: never } | { color?: never; theme: Record<keyof typeof THEMES, string> })
>

type ChartContextProps = {
	config: ChartConfig
}

const ChartContext = React.createContext<ChartContextProps | null>(null)

function useChart() {
	const context = React.useContext(ChartContext)

	if (!context) {
		throw new Error('useChart must be used within a <ChartContainer />')
	}

	return context
}

function ChartContainer({
	id,
	className,
	children,
	config,
	initialDimension = INITIAL_DIMENSION,
	...props
}: React.ComponentProps<'div'> & {
	config: ChartConfig
	children: React.ComponentProps<typeof RechartsPrimitive.ResponsiveContainer>['children']
	initialDimension?: {
		width: number
		height: number
	}
}) {
	const uniqueId = React.useId()
	const chartId = `chart-${id ?? uniqueId.replaceAll(':', '')}`

	return (
		<ChartContext.Provider value={{ config }}>
			<div
				data-slot="chart"
				data-chart={chartId}
				className={cn(
					"flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden",
					className,
				)}
				{...props}
			>
				<ChartStyle id={chartId} config={config} />
				<RechartsPrimitive.ResponsiveContainer initialDimension={initialDimension}>
					{children}
				</RechartsPrimitive.ResponsiveContainer>
			</div>
		</ChartContext.Provider>
	)
}

const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
	const colorConfig = Object.entries(config).filter(([, config]) => config.theme ?? config.color)

	if (!colorConfig.length) {
		return null
	}

	return (
		<style
			dangerouslySetInnerHTML={{
				__html: Object.entries(THEMES)
					.map(
						([theme, prefix]) => `
${prefix} [data-chart=${id}] {
${colorConfig
	.map(([key, itemConfig]) => {
		const color = itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ?? itemConfig.color
		return color ? `  --color-${key}: ${color};` : null
	})
	.join('\n')}
}
`,
					)
					.join('\n'),
			}}
		/>
	)
}

const ChartTooltip = RechartsPrimitive.Tooltip

function ChartTooltipContent({
	active,
	payload,
	className,
	indicator = 'dot',
	hideLabel = false,
	hideIndicator = false,
	label,
	labelFormatter,
	labelClassName,
	formatter,
	color,
	nameKey,
	labelKey,
}: React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
	React.ComponentProps<'div'> & {
		hideLabel?: boolean
		hideIndicator?: boolean
		indicator?: 'line' | 'dot' | 'dashed'
		nameKey?: string
		labelKey?: string
	} & Omit<RechartsPrimitive.DefaultTooltipContentProps<TooltipValueType, TooltipNameType>, 'accessibilityLayer'>) {
	const { config } = useChart()

	const tooltipLabel = React.useMemo(() => {
		if (hideLabel || !payload?.length) {
			return null
		}

		const [item] = payload
		const key = `${labelKey ?? item?.dataKey ?? item?.name ?? 'value'}`
		const itemConfig = getPayloadConfigFromPayload(config, item, key)
		const value = !labelKey && typeof label === 'string' ? (config[label]?.label ?? label) : itemConfig?.label

		if (labelFormatter) {
			return <div className={cn('font-medium', labelClassName)}>{labelFormatter(value, payload)}</div>
		}

		if (!value) {
			return null
		}

		return <div className={cn('font-medium', labelClassName)}>{value}</div>
	}, [label, labelFormatter, payload, hideLabel, labelClassName, config, labelKey])

	if (!active || !payload?.length) {
		return null
	}

	const nestLabel = payload.length === 1 && indicator !== 'dot'

	return (
		<div
			className={cn(
				'grid min-w-32 items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl',
				className,
			)}
		>
			{!nestLabel ? tooltipLabel : null}
			<div className="grid gap-1.5">
				{payload
					.filter((item) => item.type !== 'none')
					.map((item, index) => {
						const key = `${nameKey ?? item.name ?? item.dataKey ?? 'value'}`
						const itemConfig = getPayloadConfigFromPayload(config, item, key)
						const indicatorColor = color ?? item.payload?.fill ?? item.color

						return (
							<div
								// One row per series; a series with several values (a scatter point) differs by data key and name
								key={`${item.graphicalItemId}:${item.dataKey}:${item.name}`}
								className={cn(
									'flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground',
									indicator === 'dot' && 'items-center',
								)}
							>
								{formatter && item?.value !== undefined && item.name ? (
									formatter(item.value, item.name, item, index, item.payload)
								) : (
									<>
										{itemConfig?.icon ? (
											<itemConfig.icon />
										) : (
											!hideIndicator && (
												<div
													className={cn('shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)', {
														'h-2.5 w-2.5': indicator === 'dot',
														'w-1': indicator === 'line',
														'w-0 border-[1.5px] border-dashed bg-transparent': indicator === 'dashed',
														'my-0.5': nestLabel && indicator === 'dashed',
													})}
													style={
														{
															'--color-bg': indicatorColor,
															'--color-border': indicatorColor,
														} as React.CSSProperties
													}
												/>
											)
										)}
										<div className={cn('flex flex-1 justify-between leading-none', nestLabel ? 'items-end' : 'items-center')}>
											<div className="grid gap-1.5">
												{nestLabel ? tooltipLabel : null}
												<span className="text-muted-foreground">{itemConfig?.label ?? item.name}</span>
											</div>
											{item.value != null && (
												<span className="font-mono font-medium text-foreground tabular-nums">
													{typeof item.value === 'number' ? item.value.toLocaleString() : String(item.value)}
												</span>
											)}
										</div>
									</>
								)}
							</div>
						)
					})}
			</div>
		</div>
	)
}

const ChartLegend = RechartsPrimitive.Legend

function ChartLegendContent({
	className,
	hideIcon = false,
	payload,
	verticalAlign = 'bottom',
	nameKey,
}: React.ComponentProps<'div'> & {
	hideIcon?: boolean
	nameKey?: string
} & RechartsPrimitive.DefaultLegendContentProps) {
	const { config } = useChart()

	if (!payload?.length) {
		return null
	}

	return (
		<div className={cn('flex items-center justify-center gap-4', verticalAlign === 'top' ? 'pb-3' : 'pt-3', className)}>
			{payload
				.filter((item) => item.type !== 'none')
				.map((item) => {
					const key = `${nameKey ?? item.dataKey ?? 'value'}`
					const itemConfig = getPayloadConfigFromPayload(config, item, key)

					return (
						<div
							// Series differ by data key; the sectors of one pie share it and differ by name and colour
							key={`${item.dataKey}:${item.value}:${item.color}`}
							className={cn('flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground')}
						>
							{itemConfig?.icon && !hideIcon ? (
								<itemConfig.icon />
							) : (
								<div
									className="h-2 w-2 shrink-0 rounded-[2px]"
									style={{
										backgroundColor: item.color,
									}}
								/>
							)}
							{itemConfig?.label}
						</div>
					)
				})}
		</div>
	)
}

function getPayloadConfigFromPayload(config: ChartConfig, payload: unknown, key: string) {
	if (typeof payload !== 'object' || payload === null) {
		return undefined
	}

	const payloadPayload =
		'payload' in payload && typeof payload.payload === 'object' && payload.payload !== null ? payload.payload : undefined

	let configLabelKey: string = key

	if (key in payload && typeof payload[key as keyof typeof payload] === 'string') {
		configLabelKey = payload[key as keyof typeof payload] as string
	} else if (
		payloadPayload &&
		key in payloadPayload &&
		typeof payloadPayload[key as keyof typeof payloadPayload] === 'string'
	) {
		configLabelKey = payloadPayload[key as keyof typeof payloadPayload] as string
	}

	return configLabelKey in config ? config[configLabelKey] : config[key]
}

export { ChartContainer, ChartTooltip, ChartTooltipContent, ChartLegend, ChartLegendContent, ChartStyle }
```

---

# Checkbox

Accessible checkbox with checked, unchecked and indeterminate states.

Install: `npx shadcn@latest add https://rdf.dev.360online.com/r/checkbox.json`

Import from: `@/components/ui/checkbox`

npm dependencies: @base-ui/react@^1.8.0, lucide-react@^1.48.0

A checkbox component that allows users to select one or multiple options. Built on top of
[Base UI Checkbox](https://base-ui.com/react/components/checkbox),
it follows WAI-ARIA design patterns and is fully accessible.

### Features

- Checked and unchecked states, controlled (`checked` / `onCheckedChange`) or uncontrolled (`defaultChecked`)
- Mixed state with the `indeterminate` prop, shown with a minus
- Disabled state
- Invalid state via `aria-invalid`
- Enlarged hit area around the 16px box for easier clicking
- Works with `Label` or the `Field` components for labels, descriptions and groups
- Keyboard navigation and screen reader support
- Form integration (`name`, `value`, `required`)

Pass `readOnly` to show a value that can't be changed. Unlike `disabled`, a read-only checkbox stays focusable and
is announced as read-only (`aria-readonly`), so screen reader users still hear its state.

### Usage

```tsx
import { Checkbox } from '@/components/ui/checkbox'
import { Label } from '@/components/ui/label'

export function MyCheckbox() {
  return (
    <div className="flex items-center gap-2">
      <Checkbox id="confirm-details" />
      <Label htmlFor="confirm-details">I confirm that the information is correct</Label>
    </div>
  )
}
```

#### With Field

Use the `Field` components for a label and description.

```tsx
import { Checkbox } from '@/components/ui/checkbox'
import { Field, FieldContent, FieldDescription, FieldLabel } from '@/components/ui/field'

export function CheckboxWithDescription() {
  return (
    <Field orientation="horizontal">
      <Checkbox id="digital-mailbox" defaultChecked />
      <FieldContent>
        <FieldLabel htmlFor="digital-mailbox">Send decisions to my digital mailbox</FieldLabel>
        <FieldDescription>
          Decisions and letters arrive digitally instead of by post.
        </FieldDescription>
      </FieldContent>
    </Field>
  )
}
```

#### Invalid

```tsx
<Checkbox id="data-consent" aria-invalid />
```

#### Default

A checkbox with a label.

#### With Description Text

A checkbox with additional descriptive text using `Field`, `FieldContent`, `FieldLabel` and `FieldDescription`.

#### Group

A group of checkboxes inside a `FieldSet` with a legend.

#### Select All

A parent checkbox that is `indeterminate` while only some of the rows are selected.

```tsx
<Checkbox
  checked={selected.length === cases.length}
  indeterminate={selected.length > 0 && selected.length < cases.length}
  onCheckedChange={(checked) => setSelected(checked ? cases.map((c) => c.id) : [])}
/>
```

#### Choice Card

Wrap a horizontal `Field` in a `FieldLabel` to make the whole card clickable. The card is highlighted while checked.

#### Disabled

Checkboxes in their disabled state, both unchecked and checked. Explain why an option isn't available.

#### Read Only

Shows the value without letting it change, by mouse or keyboard. It stays focusable.

#### Invalid

A checkbox marked invalid with `aria-invalid`, with the error in a `FieldError`.

#### Form Example

Checkboxes in a form inside a `Card`.

### Accessibility

The Checkbox component follows WAI-ARIA guidelines:

- Uses native `checkbox` role
- Supports keyboard navigation:
  - `Space`: Toggle checkbox state
  - `Tab`: Move focus to checkbox
- Provides proper labeling through `aria-label` or `aria-labelledby`
- Indicates state through `aria-checked`
- Communicates disabled state via `aria-disabled`
- Maintains focus management
- Supports form validation

### Best Practices

1. Labeling:
   - Always provide a clear, descriptive label
   - Use concise, action-oriented text
   - Place labels to the right of checkboxes
   - Consider additional description for complex options

2. Visual Design:
   - Maintain sufficient spacing between checkboxes
   - Ensure adequate touch target size
   - Provide clear visual feedback for all states
   - Use consistent styling across the application

3. Interaction:
   - Group related checkboxes
   - Use `FieldSet` and `FieldLegend` for groups
   - Provide clear error states with `aria-invalid`

4. Implementation:
   - Use semantic HTML
   - Implement proper form validation
   - Consider controlled vs. uncontrolled usage
   - Test with keyboard and screen readers

### Related Components

- Radio Group
- Switch
- Toggle
- Field
- Form

## Source

File: components/ui/checkbox.tsx

```tsx
'use client'

import { Checkbox as CheckboxPrimitive } from '@base-ui/react/checkbox'
import { CheckIcon, MinusIcon } from 'lucide-react'
import { cn } from '@/lib/utils'

/**
 * `readOnly` shows the value but prevents changing it. Unlike `disabled`, the checkbox stays focusable and is announced
 * as read-only (`aria-readonly`). Base UI blocks the change and sets `data-readonly`; we also keep `data-read-only`.
 */
function Checkbox({ className, readOnly, ...props }: CheckboxPrimitive.Root.Props) {
	return (
		<CheckboxPrimitive.Root
			data-slot="checkbox"
			data-read-only={readOnly || undefined}
			readOnly={readOnly}
			className={cn(
				'peer relative flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-input transition-colors outline-none group-has-disabled/field:opacity-50 group-has-[:focus-visible]/field-label:ring-0 group-has-[:focus-visible]/field-label:not-data-checked:border-input after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring data-disabled:cursor-not-allowed data-disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary 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 data-indeterminate:border-primary data-indeterminate:bg-primary data-indeterminate:text-primary-foreground group-has-[:focus-visible]/field-label:data-checked:border-primary data-readonly:cursor-default data-readonly:border-dashed data-readonly:border-foreground/60 data-readonly:bg-muted/50 data-readonly:data-checked:border-foreground/60 data-readonly:data-checked:bg-muted/50 data-readonly:data-checked:text-foreground data-readonly:data-indeterminate:border-foreground/60 data-readonly:data-indeterminate:bg-muted/50 data-readonly:data-indeterminate:text-foreground',
				className,
			)}
			{...props}
		>
			<CheckboxPrimitive.Indicator
				data-slot="checkbox-indicator"
				className="grid place-content-center text-current transition-none [&>svg]:size-3.5"
			>
				{/* A minus for the indeterminate state, so it isn't shown as checked */}
				<CheckIcon aria-hidden="true" className="in-data-indeterminate:hidden" />
				<MinusIcon aria-hidden="true" className="hidden in-data-indeterminate:block" />
			</CheckboxPrimitive.Indicator>
		</CheckboxPrimitive.Root>
	)
}

export { Checkbox }
```

---

# Collapsible

Show and hide a single region of content, built on Base UI Collapsible.

Install: `npx shadcn@latest add https://rdf.dev.360online.com/r/collapsible.json`

Import from: `@/components/ui/collapsible`

npm dependencies: @base-ui/react@^1.8.0

An interactive component which expands and collapses a panel.
Built on top of [Base UI Collapsible](https://base-ui.com/react/components/collapsible),
it follows WAI-ARIA design patterns.

The components are unstyled wrappers around the Base UI primitives that add `data-slot` attributes
(`collapsible`, `collapsible-trigger`, `collapsible-content`). Style the trigger yourself, usually by
passing a `Button` to the `render` prop.

### Features

- Controlled (`open` / `onOpenChange`) and uncontrolled (`defaultOpen`) modes
- Disabled state
- `render` prop on the trigger for composing with `Button` or any other element
- `data-panel-open` on the trigger and `data-open` / `data-closed` on the content for styling, for example rotating a chevron
- Nested collapsibles support
- Keyboard navigation and screen reader support

### Usage

```tsx
import { ChevronsUpDownIcon } from 'lucide-react'
import { Button } from '@/components/ui/button'
import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from '@/components/ui/collapsible'

export function MyCollapsible() {
  return (
    <Collapsible className="flex flex-col gap-2">
      <div className="flex items-center justify-between">
        <h4 className="text-sm font-medium">Case 2026-04812 has 4 attachments</h4>
        <CollapsibleTrigger render={<Button variant="ghost" size="icon-sm" aria-label="Show all attachments" />}>
            <ChevronsUpDownIcon />
          </CollapsibleTrigger>
      </div>
      <CollapsibleContent>
        <p>Site plan, Storgatan 14.pdf</p>
      </CollapsibleContent>
    </Collapsible>
  )
}

// Controlled usage
export function ControlledCollapsible() {
  const [isOpen, setIsOpen] = React.useState(false)

  return (
    <Collapsible open={isOpen} onOpenChange={setIsOpen}>
      <CollapsibleTrigger render={<Button variant="outline" />}>{isOpen ? 'Hide case history' : 'Show case history'}</CollapsibleTrigger>
      <CollapsibleContent>
        <p>Application received via e-service, 2 April 2026</p>
      </CollapsibleContent>
    </Collapsible>
  )
}
```

#### Rotating Icon

The trigger gets `data-panel-open` when expanded, so you can rotate an icon with a `group` class:

```tsx
<CollapsibleTrigger render={<Button variant="ghost" className="group" />}>
    Open today 10:00–19:00
    <ChevronDownIcon className="transition-transform group-data-panel-open:rotate-180" />
  </CollapsibleTrigger>
```

#### Default

A list of case attachments where only the first is shown until the icon button is pressed.

#### With Icon

A full-width trigger with a leading icon and a rotating chevron, revealing a library's opening hours.

#### Controlled Example

The case history in a `Card`, controlled with `open` and `onOpenChange` so the trigger label can follow the state.

#### Disabled

A disabled collapsible cannot be toggled. Say why in the trigger.

#### Nested Collapsibles

Nested collapsibles used to build an archive tree.

### Props


#### Collapsible
- `open` - The controlled open state
- `defaultOpen` - The default open state
- `onOpenChange` - Event handler for open state changes, `(open, eventDetails) => void`
- `disabled` - Whether the collapsible is disabled

#### CollapsibleTrigger
- `render` - The element to render instead of a `button`, e.g. `render={<Button variant="outline" />}`
- `children` - Content to display in the trigger
- `className` - Additional CSS classes

The trigger renders no icon of its own; add one yourself.

#### CollapsibleContent
- `keepMounted` - Keep the content mounted when closed
- `hiddenUntilFound` - Keep closed content findable with the browser's find-in-page, which opens the panel on a match
- `children` - Content to display when expanded
- `className` - Additional CSS classes

### Accessibility

The Collapsible component follows WAI-ARIA guidelines:

- Uses proper ARIA roles (`button`, `region`)
- Supports keyboard navigation:
  - `Space/Enter`: Toggle expansion
  - `Tab`: Navigate to trigger
- Announces state changes to screen readers
- Maintains focus management
- Provides visual feedback for interaction states

### Best Practices

1. Content Organization:
   - Keep content concise and focused
   - Use clear trigger text
   - Consider content hierarchy
   - Group related information

2. Visual Design:
   - Maintain consistent spacing
   - Use clear visual indicators
   - Provide feedback for state changes
   - Consider mobile touch targets

3. Interaction:
   - Keep animations smooth
   - Handle focus properly
   - Consider loading states
   - Manage nested collapsibles

4. Implementation:
   - Use semantic markup
   - Handle state changes gracefully
   - Consider performance
   - Test edge cases

### Related Components

- Accordion
- Drawer

## Source

File: components/ui/collapsible.tsx

```tsx
'use client'

import { Collapsible as CollapsiblePrimitive } from '@base-ui/react/collapsible'

function Collapsible({ ...props }: CollapsiblePrimitive.Root.Props) {
	return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />
}

function CollapsibleTrigger({ ...props }: CollapsiblePrimitive.Trigger.Props) {
	return <CollapsiblePrimitive.Trigger data-slot="collapsible-trigger" {...props} />
}

function CollapsibleContent({ ...props }: CollapsiblePrimitive.Panel.Props) {
	return <CollapsiblePrimitive.Panel data-slot="collapsible-content" {...props} />
}

export { Collapsible, CollapsibleTrigger, CollapsibleContent }
```

---

# Color Picker

Color picker with a saturation/hue area and hex input in a popover.

Install: `npx shadcn@latest add https://rdf.dev.360online.com/r/color-picker.json`

Import from: `@/components/ui/color-picker`

Builds on: input, popover

npm dependencies: react-colorful@^5.6.1

A color picker component that allows users to select colors using a color input and a color picker popover.

### Features

- Color input field for direct hex color input
- Color picker popover with a visual color picker
- Color preview trigger button
- Fully accessible
- Keyboard navigation support
- Customizable styling

### Usage

```tsx
import { ColorPicker, ColorPickerInput, ColorPickerTrigger, ColorPickerContent } from '@/components/ui/color-picker'

export default function MyComponent() {
  return (
    <ColorPicker defaultValue="#1f6f8b">
      <div className="flex w-full items-center gap-2">
        <ColorPickerInput aria-label="Accent colour" />
        <ColorPickerTrigger />
      </div>
      <ColorPickerContent />
    </ColorPicker>
  )
}
```

#### Default

A labelled colour field: type a hex code or pick a colour from the popover.

#### With Presets

Extra `children` of `ColorPickerContent` render below the picker. Here they offer a palette of preset colours, controlled with `value` and `onValueChange`.

#### Controlled

Several controlled pickers in a list, each with only a trigger. Give each trigger an `aria-label` that names what it colours.

#### Disabled

#### Invalid

Pass `aria-invalid` to the input and trigger to show the error state, and explain the error in a `FieldError`.

### Props

#### ColorPicker

- **value**: `string`  
  The controlled value of the color picker.

- **defaultValue**: `string`  
  The default value of the color picker.

- **onValueChange**: `(value: string) => void`  
  Callback fired when the value changes.

- **open**: `boolean`  
  The controlled open state of the popover.

- **defaultOpen**: `boolean`  
  The default open state of the popover.

- **onOpenChange**: `(open: boolean, eventDetails) => void`  
  Callback fired when the open state changes (Base UI Popover).

- **disabled**: `boolean`  
  Disables the input and the trigger, and keeps the popover closed.

- **onBlur**: `() => void`  
  Called when the input loses focus (handy for form libraries).

#### ColorPickerInput

Extends the Input component props. Your own `onChange`/`onBlur` run first; call `event.preventDefault()` to stop the picker from updating its value (or calling the root `onBlur`).

#### ColorPickerTrigger

Extends the PopoverTrigger component props. A `size-8` (h-8, rounded-lg) swatch showing the current colour, with the same focus ring and `aria-invalid` styles as `Input`.

#### ColorPickerContent

Extends the PopoverContent component props. Extra `children` render below the picker.

## Source

File: components/ui/color-picker.tsx

```tsx
'use client'

import * as React from 'react'
import { HexColorPicker } from 'react-colorful'
import { Input } from '@/components/ui/input'
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
import { cn } from '@/lib/utils'

type ColorPickerContextValue = {
	value: string
	setValue: (value: string) => void
	onBlur?: () => void
	disabled?: boolean
}

const ColorPickerContext = React.createContext<ColorPickerContextValue>({
	value: '#000000',
	setValue: () => {},
	disabled: false,
})

type ColorPickerProps = React.ComponentProps<typeof Popover> & {
	value?: string
	onValueChange?: (value: string) => void
	defaultValue?: string

	onBlur?: () => void

	disabled?: boolean
}

function ColorPicker({
	open,

	value: valueProp,
	onValueChange,
	defaultValue,

	onBlur,

	disabled,

	...props
}: ColorPickerProps) {
	const [uncontrolledValue, setUncontrolledValue] = React.useState(defaultValue ?? '#000000')
	const value = valueProp ?? uncontrolledValue

	const setValue = React.useCallback(
		(next: string) => {
			if (valueProp === undefined) setUncontrolledValue(next)
			onValueChange?.(next)
		},
		[valueProp, onValueChange],
	)

	const context = React.useMemo(() => ({ value, setValue, disabled, onBlur }), [value, setValue, disabled, onBlur])

	return (
		<ColorPickerContext.Provider value={context}>
			<Popover open={disabled ? false : open} {...props} />
		</ColorPickerContext.Provider>
	)
}

function ColorPickerInput({
	disabled: disabledProp,
	onChange,
	onBlur: onBlurProp,
	...props
}: React.ComponentProps<typeof Input>) {
	const { value, setValue, disabled, onBlur } = React.useContext(ColorPickerContext)

	return (
		<Input
			data-slot="color-picker-input"
			value={value}
			disabled={disabledProp ?? disabled}
			onChange={(event) => {
				onChange?.(event)
				if (!event.defaultPrevented) setValue(event.target.value)
			}}
			onBlur={(event) => {
				onBlurProp?.(event)
				if (!event.defaultPrevented) onBlur?.()
			}}
			{...props}
		/>
	)
}

function ColorPickerTrigger({
	className,
	disabled: disabledProp,
	children,
	style,
	...props
}: React.ComponentProps<typeof PopoverTrigger>) {
	const { value, disabled } = React.useContext(ColorPickerContext)

	return (
		<PopoverTrigger
			data-slot="color-picker-trigger"
			className={cn(
				'relative aspect-square size-10 shrink-0 rounded-lg border border-input bg-background bg-clip-padding transition-colors outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40',
				className,
			)}
			style={{ backgroundColor: value, ...style }}
			disabled={disabledProp ?? disabled}
			aria-disabled={disabledProp ?? disabled}
			{...props}
		>
			<span className="sr-only">Pick a color</span>
			{children}
		</PopoverTrigger>
	)
}

function ColorPickerContent({ className, children, ...props }: React.ComponentProps<typeof PopoverContent>) {
	const { value, setValue } = React.useContext(ColorPickerContext)

	return (
		<PopoverContent data-slot="color-picker-content" className={cn('w-auto p-2', className)} {...props}>
			<HexColorPicker color={value} onChange={setValue} />
			{children}
		</PopoverContent>
	)
}

export { ColorPicker, ColorPickerInput, ColorPickerTrigger, ColorPickerContent }
export type { ColorPickerProps }
```

---

# Combobox

Composable combobox with a compound API built on Popover and Command.

Install: `npx shadcn@latest add https://rdf.dev.360online.com/r/combobox.json`

Import from: `@/components/ui/combobox`

Builds on: button, input-group

npm dependencies: @base-ui/react@^1.8.0, lucide-react@^1.48.0

An input with a filterable list of options, built on the [Base UI Combobox](https://base-ui.com/react/components/combobox).
Pick one value, or several with `multiple` (shown as removable chips). The input has the same look as `Input` and
`InputGroup`, including the solid focus ring, the `aria-invalid` state and the shared read-only style.

### Features

- Type to filter; the list is built from the `items` you pass to `Combobox`
- Single or multiple selection (`multiple`), with chips for the selected values
- Items can be strings or objects (`{ value, label }` is picked up automatically, or use `itemToStringLabel`)
- Groups with labels and separators
- Optional clear button (`showClear`) and trigger button (`showTrigger`)
- `readOnly` and `disabled` states
- Keyboard and screen reader support from Base UI (`role="combobox"` input, `listbox` popup)

### Usage

```tsx
import {
  Combobox,
  ComboboxContent,
  ComboboxEmpty,
  ComboboxInput,
  ComboboxItem,
  ComboboxList,
} from "@/components/ui/combobox"
import { Field, FieldLabel } from "@/components/ui/field"

const departments = ["Planning and Building Office", "Social Services", "Elderly Care"]

<Field>
  <FieldLabel htmlFor="department">Responsible department</FieldLabel>
  <Combobox items={departments}>
    <ComboboxInput id="department" placeholder="Select a department" />
    <ComboboxContent>
      <ComboboxEmpty>No department found.</ComboboxEmpty>
      <ComboboxList>
        {(department: string) => (
          <ComboboxItem key={department} value={department}>
            {department}
          </ComboboxItem>
        )}
      </ComboboxList>
    </ComboboxContent>
  </Combobox>
</Field>
```

#### Default

A filterable list of departments, labelled with `Field` and `FieldLabel`.

#### Controlled

Assigning a case officer inside a `Card`. The value is held in state, items are objects with an avatar and a workload
hint, and `showClear` adds a clear button.

Items shaped `{ value, label }` show their `label` in the input. The value is the item itself.

```tsx
const [officer, setOfficer] = useState<Officer | null>(null)

<Combobox items={officers} value={officer} onValueChange={setOfficer}>
  <ComboboxInput id="case-officer" placeholder="Select a case officer" showClear />
  <ComboboxContent>
    <ComboboxEmpty>No case officer found.</ComboboxEmpty>
    <ComboboxList>
      {(officer: Officer) => (
        <ComboboxItem key={officer.value} value={officer}>
          {officer.label}
        </ComboboxItem>
      )}
    </ComboboxList>
  </ComboboxContent>
</Combobox>
```

#### With Groups

Grouped items with labels and separators.

Pass groups (`{ value, items }`) as `items` and render each with `ComboboxGroup`, `ComboboxLabel` and
`ComboboxCollection`.

```tsx
<Combobox items={facilityGroups}>
  <ComboboxInput id="facility" placeholder="Select a facility to book" />
  <ComboboxContent>
    <ComboboxEmpty>No facility found.</ComboboxEmpty>
    <ComboboxList>
      {(group: FacilityGroup, index: number) => (
        <ComboboxGroup key={group.value} items={group.items}>
          {index > 0 && <ComboboxSeparator />}
          <ComboboxLabel>{group.value}</ComboboxLabel>
          <ComboboxCollection>
            {(facility: string) => (
              <ComboboxItem key={facility} value={facility}>
                {facility}
              </ComboboxItem>
            )}
          </ComboboxCollection>
        </ComboboxGroup>
      )}
    </ComboboxList>
  </ComboboxContent>
</Combobox>
```

#### Loading

While the options are fetched, the input shows a spinner, is marked `aria-busy` and the empty state says that the list
is loading.

#### Multiple

Topics for email notifications, shown as chips. `Backspace` in the empty input removes the last chip.

Put the chips and a `ComboboxChipsInput` in `ComboboxChips`, and anchor the popup to it with `useComboboxAnchor`.

```tsx
import {
  Combobox,
  ComboboxChip,
  ComboboxChips,
  ComboboxChipsInput,
  ComboboxContent,
  ComboboxEmpty,
  ComboboxItem,
  ComboboxList,
  ComboboxValue,
  useComboboxAnchor,
} from "@/components/ui/combobox"

const anchor = useComboboxAnchor()
const [topics, setTopics] = useState<string[]>([])

<Combobox multiple items={allTopics} value={topics} onValueChange={setTopics}>
  <ComboboxChips ref={anchor}>
    <ComboboxValue>
      {(selected: string[]) => (
        <>
          {selected.map((topic) => (
            <ComboboxChip key={topic}>{topic}</ComboboxChip>
          ))}
          <ComboboxChipsInput id="topics" placeholder={selected.length === 0 ? "Choose topics…" : undefined} />
        </>
      )}
    </ComboboxValue>
  </ComboboxChips>
  <ComboboxContent anchor={anchor}>
    <ComboboxEmpty>No topic found.</ComboboxEmpty>
    <ComboboxList>
      {(topic: string) => (
        <ComboboxItem key={topic} value={topic}>
          {topic}
        </ComboboxItem>
      )}
    </ComboboxList>
  </ComboboxContent>
</Combobox>
```

#### Multiple, preselected

A case team with two officers already selected, inside a card.

#### Multiple, invalid

`aria-invalid` on the `ComboboxChipsInput` gives the chips field a destructive border and ring until a value is chosen.

#### Read Only

`readOnly` on `Combobox` shows the value with the shared read-only style (dashed border, muted background). The list can
be opened and browsed, but the value can't change; the clear button and the chips' remove buttons are hidden, and the
input is exposed with `aria-readonly`.

#### Disabled

A disabled combobox, with a description that explains how to enable it.

#### Invalid

Set `aria-invalid` on `ComboboxInput` and explain the error in a `FieldError`.

### Props


#### Combobox (Root)
Base UI `Combobox.Root`. The most used props:
- `items` - The options (or groups of options) to filter and render
- `value` / `defaultValue` / `onValueChange` - The selected value (an array when `multiple`); `null` when nothing is selected
- `multiple?: boolean` - Allow several values
- `inputValue` / `onInputValueChange` - Control the text in the input
- `itemToStringLabel` / `itemToStringValue` / `isItemEqualToValue` - For object items that aren't `{ value, label }`
- `open` / `onOpenChange` - Control the popup
- `readOnly?: boolean` - Show the value without letting it change
- `disabled?: boolean` - Disable the combobox
- `name`, `required` - Form integration

#### ComboboxInput
The input, wrapped in an `InputGroup`. Takes the input props plus:
- `showTrigger?: boolean` - Show the chevron button that toggles the list (default `true`)
- `showClear?: boolean` - Show a button that clears the value (default `false`)
- `children` - Extra `InputGroupAddon`s

#### ComboboxContent
The popup. `side`, `align` (default `start`), `sideOffset`, `alignOffset` and `anchor` (use with `useComboboxAnchor` for chips).

#### ComboboxList
Renders the options; pass a function `(item, index) => ReactNode` to render each item.

#### ComboboxItem
- `value` - The item's value (required)
- `disabled?: boolean`

#### ComboboxGroup, ComboboxLabel, ComboboxCollection, ComboboxSeparator
Group options (`ComboboxGroup items`), label a group, render a group's items and divide groups.

#### ComboboxChips, ComboboxChip, ComboboxChipsInput, ComboboxValue
Multiple selection: the chips container (styled like `Input`), a chip (`showRemove`, default `true`), the input inside
the chips, and `ComboboxValue` to render the selected values.

### Accessibility

- The input has `role="combobox"` with `aria-expanded`, `aria-controls` and `aria-activedescendant`; the popup is a
  `listbox` and the selected options are `aria-selected`
- Label the input with `FieldLabel htmlFor` (or `aria-label`) and link descriptions and errors with `aria-describedby`
- Keyboard:
  - `↓` / `↑`: open the list and move through the options
  - `Enter`: select the highlighted option
  - `Esc`: close the list
  - `Backspace` (multiple, empty input): remove the last chip; `←` / `→` move between chips
- `readOnly` sets `readOnly` and `aria-readonly` on the input
- The chevron button is named by `triggerLabel` on `ComboboxInput` (default "Show options"); translate it, as the button shows only an icon

### Related Components

- Select
- Dropdown Menu
- Command
- Input Group

## Source

File: components/ui/combobox.tsx

```tsx
'use client'

import { Combobox as ComboboxPrimitive } from '@base-ui/react/combobox'
import { CheckIcon, ChevronDownIcon, XIcon } from 'lucide-react'
import * as React from 'react'
import { Button } from '@/components/ui/button'
import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput } from '@/components/ui/input-group'
import { cn } from '@/lib/utils'

// Lets the parts hide controls that can't be used while the combobox is read-only (clear, chip remove)
const ComboboxReadOnlyContext = React.createContext(false)

function Combobox<Value, Multiple extends boolean | undefined = false, Item = Value>(
	props: ComboboxPrimitive.Root.Props<Value, Multiple, Item>,
) {
	return (
		<ComboboxReadOnlyContext.Provider value={props.readOnly ?? false}>
			<ComboboxPrimitive.Root {...props} />
		</ComboboxReadOnlyContext.Provider>
	)
}

function ComboboxValue({ ...props }: ComboboxPrimitive.Value.Props) {
	return <ComboboxPrimitive.Value data-slot="combobox-value" {...props} />
}

function ComboboxTrigger({ className, children, ...props }: ComboboxPrimitive.Trigger.Props) {
	return (
		<ComboboxPrimitive.Trigger
			data-slot="combobox-trigger"
			className={cn("[&_svg:not([class*='size-'])]:size-4", className)}
			{...props}
		>
			{children}
			<ChevronDownIcon aria-hidden="true" className="pointer-events-none size-4 text-muted-foreground" />
		</ComboboxPrimitive.Trigger>
	)
}

function ComboboxClear({ className, ...props }: ComboboxPrimitive.Clear.Props) {
	return (
		<ComboboxPrimitive.Clear
			data-slot="combobox-clear"
			render={<InputGroupButton variant="ghost" size="icon-xs" />}
			className={cn(className)}
			{...props}
		>
			<XIcon aria-hidden="true" className="pointer-events-none" />
		</ComboboxPrimitive.Clear>
	)
}

function ComboboxInput({
	className,
	children,
	disabled = false,
	showTrigger = true,
	showClear = false,
	triggerLabel = 'Show options',
	...props
}: ComboboxPrimitive.Input.Props & {
	showTrigger?: boolean
	showClear?: boolean
	/** Accessible name of the chevron button, which shows only an icon. Translate it in your app. */
	triggerLabel?: string
}) {
	const readOnly = React.useContext(ComboboxReadOnlyContext)

	return (
		<InputGroup className={cn('w-auto', className)}>
			<ComboboxPrimitive.Input render={<InputGroupInput disabled={disabled} />} {...props} />
			<InputGroupAddon align="inline-end">
				{showTrigger && (
					<InputGroupButton
						size="icon-xs"
						variant="ghost"
						render={<ComboboxTrigger />}
						// Only a chevron icon, so without a name a screen reader announces just "button" (WCAG 4.1.2).
						aria-label={triggerLabel}
						data-slot="input-group-button"
						className="group-has-data-[slot=combobox-clear]/input-group:hidden data-pressed:bg-transparent"
						disabled={disabled}
					/>
				)}
				{showClear && !readOnly && <ComboboxClear disabled={disabled} />}
			</InputGroupAddon>
			{children}
		</InputGroup>
	)
}

function ComboboxContent({
	className,
	side = 'bottom',
	sideOffset = 6,
	align = 'start',
	alignOffset = 0,
	anchor,
	...props
}: ComboboxPrimitive.Popup.Props &
	Pick<ComboboxPrimitive.Positioner.Props, 'side' | 'align' | 'sideOffset' | 'alignOffset' | 'anchor'>) {
	return (
		<ComboboxPrimitive.Portal>
			<ComboboxPrimitive.Positioner
				side={side}
				sideOffset={sideOffset}
				align={align}
				alignOffset={alignOffset}
				anchor={anchor}
				className="isolate z-50"
			>
				<ComboboxPrimitive.Popup
					data-slot="combobox-content"
					data-chips={!!anchor}
					className={cn(
						'group/combobox-content relative max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) overflow-hidden rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[chips=true]:min-w-(--anchor-width) data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-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-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:border-input/30 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:shadow-none 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',
						className,
					)}
					{...props}
				/>
			</ComboboxPrimitive.Positioner>
		</ComboboxPrimitive.Portal>
	)
}

function ComboboxList({ className, ...props }: ComboboxPrimitive.List.Props) {
	return (
		<ComboboxPrimitive.List
			data-slot="combobox-list"
			className={cn(
				'no-scrollbar max-h-[min(calc(--spacing(72)---spacing(9)),calc(var(--available-height)---spacing(9)))] scroll-py-1 overflow-y-auto overscroll-contain p-1 data-empty:p-0',
				className,
			)}
			{...props}
		/>
	)
}

function ComboboxItem({ className, children, ...props }: ComboboxPrimitive.Item.Props) {
	return (
		<ComboboxPrimitive.Item
			data-slot="combobox-item"
			className={cn(
				"relative flex w-full cursor-default items-center gap-2 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
				className,
			)}
			{...props}
		>
			{children}
			<ComboboxPrimitive.ItemIndicator
				render={<span className="pointer-events-none absolute right-2 flex size-4 items-center justify-center" />}
			>
				<CheckIcon aria-hidden="true" className="pointer-events-none" />
			</ComboboxPrimitive.ItemIndicator>
		</ComboboxPrimitive.Item>
	)
}

function ComboboxGroup({ className, ...props }: ComboboxPrimitive.Group.Props) {
	return <ComboboxPrimitive.Group data-slot="combobox-group" className={cn(className)} {...props} />
}

function ComboboxLabel({ className, ...props }: ComboboxPrimitive.GroupLabel.Props) {
	return (
		<ComboboxPrimitive.GroupLabel
			data-slot="combobox-label"
			className={cn('px-2 py-1.5 text-xs text-muted-foreground', className)}
			{...props}
		/>
	)
}

function ComboboxCollection({ ...props }: ComboboxPrimitive.Collection.Props) {
	return <ComboboxPrimitive.Collection data-slot="combobox-collection" {...props} />
}

function ComboboxEmpty({ className, ...props }: ComboboxPrimitive.Empty.Props) {
	return (
		<ComboboxPrimitive.Empty
			data-slot="combobox-empty"
			className={cn(
				'hidden w-full justify-center py-2 text-center text-sm text-muted-foreground group-data-empty/combobox-content:flex',
				className,
			)}
			{...props}
		/>
	)
}

function ComboboxSeparator({ className, ...props }: ComboboxPrimitive.Separator.Props) {
	return (
		<ComboboxPrimitive.Separator
			data-slot="combobox-separator"
			className={cn('-mx-1 my-1 h-px bg-border', className)}
			{...props}
		/>
	)
}

function ComboboxChips({
	className,
	...props
}: React.ComponentPropsWithRef<typeof ComboboxPrimitive.Chips> & ComboboxPrimitive.Chips.Props) {
	return (
		<ComboboxPrimitive.Chips
			data-slot="combobox-chips"
			className={cn(
				// Same look as Input: border, hover, solid focus ring, invalid, disabled and the shared read-only style
				'flex min-h-10 flex-wrap items-center gap-1 rounded-lg border border-input bg-background bg-clip-padding px-2.5 py-1 text-sm transition-colors hover:border-primary/90 focus-within:border-ring focus-within:ring-3 focus-within:ring-ring has-aria-invalid:border-destructive has-aria-invalid:ring-3 has-aria-invalid:ring-destructive/20 has-data-[slot=combobox-chip]:px-1 has-[[data-slot=combobox-chip-input]:read-only]:cursor-default has-[[data-slot=combobox-chip-input]:read-only]:border-dashed has-[[data-slot=combobox-chip-input]:read-only]:bg-muted/50 has-[[data-slot=combobox-chip-input]:read-only]:hover:border-input has-[[data-slot=combobox-chip-input]:disabled]:cursor-not-allowed has-[[data-slot=combobox-chip-input]:disabled]:bg-input/50 has-[[data-slot=combobox-chip-input]:disabled]:opacity-50 has-[[data-slot=combobox-chip-input]:disabled]:hover:border-input dark:has-aria-invalid:border-destructive/50 dark:has-aria-invalid:ring-destructive/40 dark:has-[[data-slot=combobox-chip-input]:disabled]:bg-input/80',
				className,
			)}
			{...props}
		/>
	)
}

function ComboboxChip({
	className,
	children,
	showRemove = true,
	...props
}: ComboboxPrimitive.Chip.Props & {
	showRemove?: boolean
}) {
	const readOnly = React.useContext(ComboboxReadOnlyContext)

	return (
		<ComboboxPrimitive.Chip
			data-slot="combobox-chip"
			className={cn(
				'flex h-[calc(--spacing(5.25))] w-fit items-center justify-center gap-1 rounded-sm bg-muted px-1.5 text-xs font-medium whitespace-nowrap text-foreground has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50 has-data-[slot=combobox-chip-remove]:pr-0',
				className,
			)}
			{...props}
		>
			{children}
			{showRemove && !readOnly && (
				<ComboboxPrimitive.ChipRemove
					render={<Button variant="ghost" size="icon-xs" />}
					className="-ml-1 opacity-50 hover:opacity-100"
					data-slot="combobox-chip-remove"
				>
					<XIcon aria-hidden="true" className="pointer-events-none" />
				</ComboboxPrimitive.ChipRemove>
			)}
		</ComboboxPrimitive.Chip>
	)
}

function ComboboxChipsInput({ className, ...props }: ComboboxPrimitive.Input.Props) {
	return (
		<ComboboxPrimitive.Input
			data-slot="combobox-chip-input"
			className={cn(
				'min-w-16 flex-1 bg-transparent outline-none placeholder:text-muted-foreground read-only:cursor-default disabled:cursor-not-allowed',
				className,
			)}
			{...props}
		/>
	)
}

function useComboboxAnchor() {
	return React.useRef<HTMLDivElement | null>(null)
}

export {
	Combobox,
	ComboboxInput,
	ComboboxContent,
	ComboboxList,
	ComboboxItem,
	ComboboxGroup,
	ComboboxLabel,
	ComboboxCollection,
	ComboboxEmpty,
	ComboboxSeparator,
	ComboboxChips,
	ComboboxChip,
	ComboboxChipsInput,
	ComboboxTrigger,
	ComboboxValue,
	useComboboxAnchor,
}
```

---

# Command

Command menu / searchable list built on cmdk, usable inline or in a dialog.

Install: `npx shadcn@latest add https://rdf.dev.360online.com/r/command.json`

Import from: `@/components/ui/command`

Builds on: dialog, input-group

npm dependencies: cmdk@^1.1.1, lucide-react@^1.48.0

A command menu component that provides a powerful and flexible command palette interface.
Built on top of [CMDK](https://cmdk.paco.me/) and Base UI Dialog, it follows WAI-ARIA
design patterns and provides a fully accessible command menu experience.

### Features

- Keyboard navigation
- Search functionality
- Screen reader support
- Custom styling with Tailwind CSS
- Dialog mode support
- Grouping and categorization
- Keyboard shortcuts (`CommandShortcut`)
- Built-in search icon in `CommandInput` (rendered with `InputGroup`)
- Selected-state check icon on `CommandItem` via `data-checked`
- Accessible, visually hidden title and description in `CommandDialog`
- Icons inside items are sized automatically, no extra classes needed

### Usage

```tsx
import {
  Command,
  CommandDialog,
  CommandInput,
  CommandList,
  CommandEmpty,
  CommandGroup,
  CommandItem,
  CommandSeparator,
  CommandShortcut,
} from '@/components/ui/command'
import { CalendarIcon } from 'lucide-react'

// Basic usage
export function CommandMenu() {
  return (
    <Command>
      <CommandInput placeholder="Search cases, people or actions…" />
      <CommandList>
        <CommandEmpty>No results found.</CommandEmpty>
        <CommandGroup heading="Suggestions">
          <CommandItem>
            <CalendarIcon />
            <span>Council meeting agenda, 19 May</span>
          </CommandItem>
        </CommandGroup>
        <CommandSeparator />
        <CommandGroup heading="Settings">
          <CommandItem>
            <span>Profile</span>
            <CommandShortcut>⌘P</CommandShortcut>
          </CommandItem>
          <CommandItem>
            <span>Set out of office</span>
          </CommandItem>
        </CommandGroup>
      </CommandList>
    </Command>
  )
}

// Selected state: the check icon is shown when data-checked is true
<CommandItem value="Building permit" data-checked={selected.includes('building-permit')} onSelect={() => toggle('building-permit')}>
  Building permit
</CommandItem>

// Dialog mode
export function CommandMenuDialog() {
  const [open, setOpen] = React.useState(false)

  return (
    <>
      <Button onClick={() => setOpen(true)}>
        Search the case system
      </Button>
      <CommandDialog
        open={open}
        onOpenChange={setOpen}
        title="Search the case system"
        description="Find a case, a colleague or a page"
      >
        <Command>
          <CommandInput placeholder="Type a case number, name or page…" />
          <CommandList>
            <CommandEmpty>No results found.</CommandEmpty>
            <CommandGroup heading="Go to">
              <CommandItem>
                <span>My cases</span>
                <CommandShortcut>G C</CommandShortcut>
              </CommandItem>
            </CommandGroup>
          </CommandList>
        </Command>
      </CommandDialog>
    </>
  )
}
```

#### Basic Command Menu

A command menu for a case management system, with suggestions, recent cases (one disabled) and settings.

#### Selector

A command menu used as a multi-select filter. Selected items are marked with `data-checked`, which shows the built-in check icon.

#### Dialog Example

A command menu in dialog mode, opened from a search button or with ⌘J / Ctrl+J (this page uses ⌘K for the docs search). Wrap the dialog's content in `Command`.

#### Disabled

A command menu with disabled items.

### Props


#### Command
- `value` - The controlled value of the command menu
- `onValueChange` - Event handler for value changes
- `filter` - Custom filter function
- `loop` - Whether to loop through items when navigating
- `className` - Additional CSS classes

#### CommandDialog
- `open` - The controlled open state of the dialog
- `onOpenChange` - Event handler for open state changes
- `title` - Screen-reader title (default `'Command Palette'`)
- `description` - Screen-reader description (default `'Search for a command to run...'`)
- `showCloseButton` - Whether to show the dialog close button (default `false`)
- `className` - Additional CSS classes for the dialog content
- `children` - Content to display in the dialog (required; wrap it in `Command`)

#### CommandInput
- `value` - The controlled value of the input
- `onValueChange` - Event handler for value changes
- `placeholder` - Placeholder text
- `disabled` - Whether the input is disabled

#### CommandList
- `children` - List content (groups, items, etc.)
- `className` - Additional CSS classes

#### CommandEmpty
- `children` - Content to display when no results are found
- `className` - Additional CSS classes

#### CommandGroup
- `heading` - Group heading text
- `children` - Group content (items)
- `className` - Additional CSS classes

#### CommandItem
- `value` - The value passed to `onSelect` and used for filtering
- `disabled` - Whether the item is disabled
- `onSelect` - Event handler for item selection
- `data-checked` - When `true`, shows a check icon at the end of the item (hidden when the item has a `CommandShortcut`)
- `children` - Item content
- `className` - Additional CSS classes

#### CommandSeparator
- `className` - Additional CSS classes

#### CommandShortcut
- `children` - Shortcut text
- `className` - Additional CSS classes

### Accessibility

The Command component follows WAI-ARIA guidelines:

- Uses proper ARIA roles (`combobox`, `listbox`, `option`)
- Supports keyboard navigation:
  - `↑/↓`: Navigate through items
  - `Enter`: Select item
  - `Esc`: Close menu/dialog
  - `Tab/Shift+Tab`: Navigate focusable elements
- Announces results and state changes
- Maintains focus management
- Provides visual feedback for interaction states

### Best Practices

1. Content Organization:
   - Group related commands
   - Use clear, descriptive labels
   - Keep commands concise
   - Provide helpful shortcuts

2. Search Experience:
   - Use clear placeholder text
   - Show helpful empty states
   - Consider fuzzy matching
   - Prioritize relevant results

3. Visual Design:
   - Maintain consistent spacing
   - Use clear visual hierarchy
   - Provide feedback for actions
   - Consider mobile interactions

4. Implementation:
   - Manage focus properly
   - Consider performance
   - Test edge cases

### Related Components

- Dialog
- Popover
- Dropdown Menu
- Select

## Source

File: components/ui/command.tsx

```tsx
'use client'

import { Command as CommandPrimitive } from 'cmdk'
import { CheckIcon, SearchIcon } from 'lucide-react'
import type * as React from 'react'

import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/components/ui/dialog'
import { InputGroup, InputGroupAddon } from '@/components/ui/input-group'
import { cn } from '@/lib/utils'

function Command({ className, ...props }: React.ComponentProps<typeof CommandPrimitive>) {
	return (
		<CommandPrimitive
			data-slot="command"
			className={cn(
				'flex size-full flex-col overflow-hidden rounded-xl! bg-popover p-1 text-popover-foreground',
				className,
			)}
			{...props}
		/>
	)
}

function CommandDialog({
	title = 'Command Palette',
	description = 'Search for a command to run...',
	children,
	className,
	showCloseButton = false,
	...props
}: Omit<React.ComponentProps<typeof Dialog>, 'children'> & {
	title?: string
	description?: string
	className?: string
	showCloseButton?: boolean
	children: React.ReactNode
}) {
	return (
		<Dialog {...props}>
			<DialogContent
				className={cn('top-1/3 translate-y-0 overflow-hidden rounded-xl! p-0', className)}
				showCloseButton={showCloseButton}
			>
				<DialogHeader className="sr-only">
					<DialogTitle>{title}</DialogTitle>
					<DialogDescription>{description}</DialogDescription>
				</DialogHeader>
				{children}
			</DialogContent>
		</Dialog>
	)
}

function CommandInput({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Input>) {
	return (
		<div data-slot="command-input-wrapper" className="p-1 pb-0">
			<InputGroup className="h-10! rounded-lg! border-input/30 bg-input/30 shadow-none! hover:border-input/30 *:data-[slot=input-group-addon]:pl-2!">
				<CommandPrimitive.Input
					data-slot="command-input"
					className={cn(
						'w-full text-sm outline-hidden placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50',
						className,
					)}
					{...props}
				/>
				<InputGroupAddon>
					<SearchIcon className="size-4 shrink-0 opacity-50" />
				</InputGroupAddon>
			</InputGroup>
		</div>
	)
}

function CommandList({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.List>) {
	return (
		<CommandPrimitive.List
			data-slot="command-list"
			className={cn('no-scrollbar max-h-72 scroll-py-1 overflow-x-hidden overflow-y-auto outline-none', className)}
			{...props}
		/>
	)
}

function CommandEmpty({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Empty>) {
	return (
		<CommandPrimitive.Empty data-slot="command-empty" className={cn('py-6 text-center text-sm', className)} {...props} />
	)
}

function CommandGroup({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Group>) {
	return (
		<CommandPrimitive.Group
			data-slot="command-group"
			className={cn(
				'overflow-hidden p-1 text-foreground **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:py-1.5 **:[[cmdk-group-heading]]:text-xs **:[[cmdk-group-heading]]:font-medium **:[[cmdk-group-heading]]:text-muted-foreground',
				className,
			)}
			{...props}
		/>
	)
}

function CommandSeparator({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Separator>) {
	return (
		<CommandPrimitive.Separator
			data-slot="command-separator"
			className={cn('-mx-1 h-px bg-border', className)}
			{...props}
		/>
	)
}

function CommandItem({ className, children, ...props }: React.ComponentProps<typeof CommandPrimitive.Item>) {
	return (
		<CommandPrimitive.Item
			data-slot="command-item"
			className={cn(
				"group/command-item relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none in-data-[slot=dialog-content]:rounded-lg! data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-selected:bg-accent data-selected:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
				className,
			)}
			{...props}
		>
			{children}
			<CheckIcon className="ml-auto opacity-0 group-has-data-[slot=command-shortcut]/command-item:hidden group-data-[checked=true]/command-item:opacity-100" />
		</CommandPrimitive.Item>
	)
}

function CommandShortcut({ className, ...props }: React.ComponentProps<'span'>) {
	return (
		<span
			data-slot="command-shortcut"
			className={cn('ml-auto text-xs tracking-widest text-muted-foreground', className)}
			{...props}
		/>
	)
}

export {
	Command,
	CommandDialog,
	CommandInput,
	CommandList,
	CommandEmpty,
	CommandGroup,
	CommandItem,
	CommandShortcut,
	CommandSeparator,
}
```

---

# Context Menu

Right-click menu with items, checkboxes, radio items and submenus.

Install: `npx shadcn@latest add https://rdf.dev.360online.com/r/context-menu.json`

Import from: `@/components/ui/context-menu`

npm dependencies: @base-ui/react@^1.8.0, lucide-react@^1.48.0

A context menu component that displays a menu when right-clicking on a trigger element. Built with accessibility and keyboard navigation in mind using composable primitives.

### Features

- Right-click activation with customizable trigger areas
- Composable primitive-based architecture for maximum flexibility
- Support for menu items, checkboxes, radio buttons, and submenus
- Keyboard shortcuts display with `ContextMenuShortcut`
- Grouping and labeling with `ContextMenuGroup` and `ContextMenuLabel`
- Separators for visual organization
- Inset support for hierarchical menu layouts
- Disabled states for menu items
- Destructive item variant (`variant="destructive"`)
- Icons inside items are sized automatically (`size-4`), no extra classes needed
- Checkbox and radio items show a check indicator on the right
- Keyboard navigation inside the open menu
- Screen reader friendly
- Built on top of [Base UI Context Menu](https://base-ui.com/react/components/context-menu)

A context menu opens on right-click or long-press only, so keyboard and most screen reader users can't open it.
Every action in a context menu must also be available from a visible control, such as a `DropdownMenu` "More actions" button.

### Usage

```tsx
import {
  ContextMenu,
  ContextMenuTrigger,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuCheckboxItem,
  ContextMenuRadioItem,
  ContextMenuRadioGroup,
  ContextMenuLabel,
  ContextMenuSeparator,
  ContextMenuShortcut,
  ContextMenuGroup,
  ContextMenuSub,
  ContextMenuSubTrigger,
  ContextMenuSubContent,
} from "@/components/ui/context-menu"

// Basic usage
<ContextMenu>
  <ContextMenuTrigger className="rounded-xl border border-dashed p-4 data-popup-open:border-ring">
    Site plan, Storgatan 14.pdf
  </ContextMenuTrigger>
  <ContextMenuContent>
    <ContextMenuItem>Open</ContextMenuItem>
    <ContextMenuItem>Download</ContextMenuItem>
    <ContextMenuSeparator />
    <ContextMenuItem>Show in case file</ContextMenuItem>
  </ContextMenuContent>
</ContextMenu>

// With shortcuts
<ContextMenu>
  <ContextMenuTrigger>Right click target</ContextMenuTrigger>
  <ContextMenuContent>
    <ContextMenuItem>
      Copy case number
      <ContextMenuShortcut>⌘C</ContextMenuShortcut>
    </ContextMenuItem>
    <ContextMenuItem>
      Print summary
      <ContextMenuShortcut>⌘P</ContextMenuShortcut>
    </ContextMenuItem>
  </ContextMenuContent>
</ContextMenu>

// With checkboxes and radio items
const [showClosed, setShowClosed] = useState(true)
const [sortBy, setSortBy] = useState('case-number')

<ContextMenu>
  <ContextMenuTrigger>Right click target</ContextMenuTrigger>
  <ContextMenuContent>
    <ContextMenuGroup>
      <ContextMenuLabel>View</ContextMenuLabel>
      <ContextMenuCheckboxItem checked={showClosed} onCheckedChange={setShowClosed}>
        Show closed cases
      </ContextMenuCheckboxItem>
    </ContextMenuGroup>
    <ContextMenuSeparator />
    <ContextMenuRadioGroup value={sortBy} onValueChange={setSortBy}>
      <ContextMenuLabel>Sort by</ContextMenuLabel>
      <ContextMenuRadioItem value="case-number">Case number</ContextMenuRadioItem>
      <ContextMenuRadioItem value="deadline">Deadline</ContextMenuRadioItem>
    </ContextMenuRadioGroup>
  </ContextMenuContent>
</ContextMenu>

// With submenus
<ContextMenu>
  <ContextMenuTrigger>Right click target</ContextMenuTrigger>
  <ContextMenuContent>
    <ContextMenuItem>Open case</ContextMenuItem>
    <ContextMenuSub>
      <ContextMenuSubTrigger>Assign to</ContextMenuSubTrigger>
      <ContextMenuSubContent>
        <ContextMenuItem>Ingrid Hansen</ContextMenuItem>
        <ContextMenuItem>Mikko Virtanen</ContextMenuItem>
      </ContextMenuSubContent>
    </ContextMenuSub>
  </ContextMenuContent>
</ContextMenu>
```

#### Default

Right-click a case document for a basic menu.

#### With Shortcuts

A case card whose menu shows keyboard shortcuts alongside the items.

#### With Checkboxes

Checkbox items and a radio group that change how the case list is shown. Try toggling them.

#### With Submenu

Nested submenus for assigning a case and changing its status.

#### With Groups

Items grouped with labels and separators on a council meeting.

#### With Inset Items

Inset items line up with items that have an icon or indicator, under a label.

#### With Icons and Destructive Item

A document menu with leading icons, a disabled item and a destructive action.

#### Disabled

A context menu with disabled states for item, checkbox item, radiogroup item and item in submenu.

### Props


#### ContextMenu (Root)
- Extends Base UI ContextMenu.Root props
- No additional custom props

#### ContextMenuTrigger
- Extends Base UI ContextMenu.Trigger props
- The area that opens the context menu on right-click or long-press. It renders a `<div>`; use `render` to render your own element, e.g. `render={<FileTile />}`
- While the menu is open the trigger has `data-popup-open`

#### ContextMenuItem
- `variant?: 'default' | 'destructive'` - Visual style of the item (default `'default'`)
- `inset?: boolean` - Whether to add left padding for alignment with items that have an icon
- `disabled?: boolean` - Whether the item is disabled
- Extends Base UI Menu.Item props (`onClick`, `closeOnClick`, `label`)

#### ContextMenuCheckboxItem
- `checked?: boolean` - The checked state of the checkbox
- `onCheckedChange?: (checked: boolean) => void` - Callback when checked state changes
- `inset?: boolean` - Whether to add left padding for alignment
- Extends Base UI Menu.CheckboxItem props. Checkbox items keep the menu open unless `closeOnClick` is set

#### ContextMenuRadioItem
- `value: string` - The value of the radio item
- `inset?: boolean` - Whether to add left padding for alignment
- Extends Base UI Menu.RadioItem props

#### ContextMenuRadioGroup
- `value?: string` - The controlled value of the radio group
- `onValueChange?: (value: string) => void` - Callback when value changes
- Extends Base UI Menu.RadioGroup props

#### ContextMenuLabel
- `inset?: boolean` - Whether to add left padding for alignment with items
- Extends Base UI Menu.GroupLabel props. A label names its group, so place it inside a `ContextMenuGroup` or `ContextMenuRadioGroup`

#### ContextMenuSubTrigger
- `inset?: boolean` - Whether to add left padding for alignment
- Extends Base UI Menu.SubmenuTrigger props

### Accessibility

The Context Menu component follows WCAG 2.1 guidelines and provides:

- Proper ARIA roles and attributes for menu structure
- Keyboard navigation support:
  - `↑/↓`: Navigate through menu items
  - `→`: Open submenu or move to parent menu
  - `←`: Close submenu or move to child menu
  - `Enter/Space`: Activate menu item
  - `Esc`: Close menu
- Focus management with proper focus trapping
- Screen reader announcements for menu state changes
- Support for disabled states
- Clear visual focus indicators

### Best Practices

1. **Content Organization**
   - Use `ContextMenuGroup` and `ContextMenuLabel` to organize related items
   - Use `ContextMenuSeparator` to visually separate different sections
   - Keep menu hierarchies shallow (max 2-3 levels) for better usability

2. **Trigger Areas**
   - Make trigger areas large enough for easy right-clicking
   - Provide visual feedback to indicate interactive areas
   - Consider touch device users who may need alternative access methods

3. **Menu Items**
   - Use clear, descriptive labels for menu items
   - Show keyboard shortcuts when available using `ContextMenuShortcut`
   - Disable items that are not currently available rather than hiding them

4. **State Management**
   - Use controlled components for checkbox and radio items when state needs to persist
   - Provide immediate visual feedback for state changes
   - Consider grouping related stateful items together

5. **Accessibility**
   - Test with keyboard navigation thoroughly
   - Verify screen reader compatibility
   - Ensure sufficient color contrast for all states
   - Use proper semantic markup with labels and descriptions

### Related Components

- Dropdown Menu
- Menubar
- Command
- Popover

## Source

File: components/ui/context-menu.tsx

```tsx
'use client'

import { ContextMenu as ContextMenuPrimitive } from '@base-ui/react/context-menu'
import { CheckIcon, ChevronRightIcon } from 'lucide-react'
import * as React from 'react'
import { cn } from '@/lib/utils'

function ContextMenu({ ...props }: ContextMenuPrimitive.Root.Props) {
	return <ContextMenuPrimitive.Root data-slot="context-menu" {...props} />
}

function ContextMenuPortal({ ...props }: ContextMenuPrimitive.Portal.Props) {
	return <ContextMenuPrimitive.Portal data-slot="context-menu-portal" {...props} />
}

function ContextMenuTrigger({ className, ...props }: ContextMenuPrimitive.Trigger.Props) {
	return (
		<ContextMenuPrimitive.Trigger data-slot="context-menu-trigger" className={cn('select-none', className)} {...props} />
	)
}

function ContextMenuContent({
	className,
	align = 'start',
	alignOffset = 4,
	side = 'right',
	sideOffset = 0,
	...props
}: ContextMenuPrimitive.Popup.Props &
	Pick<ContextMenuPrimitive.Positioner.Props, 'align' | 'alignOffset' | 'side' | 'sideOffset'>) {
	return (
		<ContextMenuPrimitive.Portal>
			<ContextMenuPrimitive.Positioner
				className="isolate z-50 outline-none"
				align={align}
				alignOffset={alignOffset}
				side={side}
				sideOffset={sideOffset}
			>
				<ContextMenuPrimitive.Popup
					data-slot="context-menu-content"
					className={cn(
						'z-50 max-h-(--available-height) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-border duration-100 outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-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',
						className,
					)}
					{...props}
				/>
			</ContextMenuPrimitive.Positioner>
		</ContextMenuPrimitive.Portal>
	)
}

function ContextMenuGroup({ ...props }: ContextMenuPrimitive.Group.Props) {
	return <ContextMenuPrimitive.Group data-slot="context-menu-group" {...props} />
}

function ContextMenuLabel({
	className,
	inset,
	...props
}: ContextMenuPrimitive.GroupLabel.Props & {
	inset?: boolean
}) {
	return (
		<ContextMenuPrimitive.GroupLabel
			data-slot="context-menu-label"
			data-inset={inset}
			className={cn('px-1.5 py-1 text-xs font-medium text-foreground data-inset:pl-7', className)}
			{...props}
		/>
	)
}

function ContextMenuItem({
	className,
	inset,
	variant = 'default',
	...props
}: ContextMenuPrimitive.Item.Props & {
	inset?: boolean
	variant?: 'default' | 'destructive'
}) {
	return (
		<ContextMenuPrimitive.Item
			data-slot="context-menu-item"
			data-inset={inset}
			data-variant={variant}
			className={cn(
				"group/context-menu-item relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-7 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground data-[variant=destructive]:*:[svg]:!text-destructive",
				className,
			)}
			{...props}
		/>
	)
}

function ContextMenuSub({ ...props }: ContextMenuPrimitive.SubmenuRoot.Props) {
	return <ContextMenuPrimitive.SubmenuRoot data-slot="context-menu-sub" {...props} />
}

function ContextMenuSubTrigger({
	className,
	inset,
	children,
	...props
}: ContextMenuPrimitive.SubmenuTrigger.Props & {
	inset?: boolean
}) {
	return (
		<ContextMenuPrimitive.SubmenuTrigger
			data-slot="context-menu-sub-trigger"
			data-inset={inset}
			className={cn(
				"flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-7 data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
				className,
			)}
			{...props}
		>
			{children}
			<ChevronRightIcon className="ml-auto" aria-hidden="true" />
		</ContextMenuPrimitive.SubmenuTrigger>
	)
}

function ContextMenuSubContent({ ...props }: React.ComponentProps<typeof ContextMenuContent>) {
	return <ContextMenuContent data-slot="context-menu-sub-content" className="shadow-lg" side="right" {...props} />
}

function ContextMenuCheckboxItem({
	className,
	children,
	checked,
	inset,
	...props
}: ContextMenuPrimitive.CheckboxItem.Props & {
	inset?: boolean
}) {
	return (
		<ContextMenuPrimitive.CheckboxItem
			data-slot="context-menu-checkbox-item"
			data-inset={inset}
			className={cn(
				"relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
				className,
			)}
			checked={checked}
			{...props}
		>
			<span className="pointer-events-none absolute right-2">
				<ContextMenuPrimitive.CheckboxItemIndicator>
					<CheckIcon aria-hidden="true" />
				</ContextMenuPrimitive.CheckboxItemIndicator>
			</span>
			{children}
		</ContextMenuPrimitive.CheckboxItem>
	)
}

function ContextMenuRadioGroup({ ...props }: ContextMenuPrimitive.RadioGroup.Props) {
	return <ContextMenuPrimitive.RadioGroup data-slot="context-menu-radio-group" {...props} />
}

function ContextMenuRadioItem({
	className,
	children,
	inset,
	...props
}: ContextMenuPrimitive.RadioItem.Props & {
	inset?: boolean
}) {
	return (
		<ContextMenuPrimitive.RadioItem
			data-slot="context-menu-radio-item"
			data-inset={inset}
			className={cn(
				"relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
				className,
			)}
			{...props}
		>
			<span className="pointer-events-none absolute right-2">
				<ContextMenuPrimitive.RadioItemIndicator>
					<CheckIcon aria-hidden="true" />
				</ContextMenuPrimitive.RadioItemIndicator>
			</span>
			{children}
		</ContextMenuPrimitive.RadioItem>
	)
}

function ContextMenuSeparator({ className, ...props }: ContextMenuPrimitive.Separator.Props) {
	return (
		<ContextMenuPrimitive.Separator
			data-slot="context-menu-separator"
			className={cn('-mx-1 my-1 h-px bg-border', className)}
			{...props}
		/>
	)
}

function ContextMenuShortcut({ className, ...props }: React.ComponentProps<'span'>) {
	return (
		<span
			data-slot="context-menu-shortcut"
			className={cn('ml-auto text-xs tracking-widest text-muted-foreground', className)}
			{...props}
		/>
	)
}

export {
	ContextMenu,
	ContextMenuTrigger,
	ContextMenuContent,
	ContextMenuItem,
	ContextMenuCheckboxItem,
	ContextMenuRadioItem,
	ContextMenuLabel,
	ContextMenuSeparator,
	ContextMenuShortcut,
	ContextMenuGroup,
	ContextMenuPortal,
	ContextMenuSub,
	ContextMenuSubContent,
	ContextMenuSubTrigger,
	ContextMenuRadioGroup,
}
```

---

# Data Table

TanStack Table wrapper with toolbar, faceted filters, pagination, column visibility and resizing.

Install: `npx shadcn@latest add https://rdf.dev.360online.com/r/data-table.json`

Import from: `@/components/ui/data-table`

Builds on: badge, button, command, dropdown-menu, input, pagination, popover, separator, table, tooltip

npm dependencies: @tanstack/react-table@^8.21.3, lucide-react@^1.48.0

A [TanStack Table](https://tanstack.com/table) wrapper on top of the `Table` primitive. It installs as a folder
(`components/ui/data-table/`) with the table itself plus column header, toolbar, faceted filter, view options,
pagination and a truncation-aware tooltip helper.

### Features

- Client-side or manual (server-driven) sorting and pagination
- Expandable rows via `getSubRows`
- Drag-to-resize columns (auto-fit to the container until the user resizes)
- Right-pinned `actions` column (or any column with `meta.pinRight`) while the table overflows horizontally
- Single-line truncation of cells by default (opt out with `meta.truncate: false`)
- Faceted filters and column visibility toggles through `DataTableToolbar` / `DataTableViewOptions`

### Usage

```tsx
import { DataTable, DataTableColumnHeader, type ColumnDef } from "@/components/ui/data-table"

type CaseRow = { id: string; subject: string; status: string }

const columns: ColumnDef<CaseRow>[] = [
  {
    accessorKey: 'id',
    header: ({ column }) => <DataTableColumnHeader column={column} title="Case" />,
    size: 110,
  },
  {
    accessorKey: 'subject',
    header: ({ column }) => <DataTableColumnHeader column={column} title="Subject" />,
  },
  {
    id: 'actions',
    header: () => <span className="sr-only">Actions</span>,
    cell: ({ row }) => <CaseMenu caseRow={row.original} />,
    size: 56,
    enableResizing: false,
  },
]

<DataTable columns={columns} data={cases} defaultPageSize={10} />

// Server-driven pagination + sorting
<DataTable
  columns={columns}
  data={page.items}
  pageCount={page.totalPages}
  pagination={pagination}
  onPaginationChange={setPagination}
  sorting={sorting}
  onSortingChange={setSorting}
  manualPagination
  manualSorting
/>
```

#### Default

A case list with sortable columns and pagination. The status badges pair an icon with the label, so the status doesn't rely on colour alone.

#### With actions column

More columns than fit, with a row menu in the `actions` column. That column is pinned to the right edge whenever the table scrolls horizontally.

#### Expandable rows

Cases with sub-rows (consultations and inspections) via `getSubRows`.

#### Without column resizing

With `enableColumnResizing={false}` and the transparent `default` header.

#### Single page

The pagination is hidden when every row fits on one page.

#### Empty

### Column meta

| Key | Type | Description |
| --- | --- | --- |
| `pinRight` | `boolean` | Keep the column visible at the right edge while scrolling horizontally |
| `truncate` | `boolean` | Set to `false` to opt out of single-line truncation for the cell |

### Related Components

- Table
- Pagination
- Tooltip

## Source

File: components/ui/data-table/creator-name-cell.tsx

```tsx
'use client'

interface Creator {
	id: string
	name: string
	email?: string
}

interface CreatorNameCellProps {
	creator?: Creator | null
}

export function CreatorNameCell({ creator }: CreatorNameCellProps) {
	return <span>{creator?.name || '-'}</span>
}
```

File: components/ui/data-table/data-table-column-header.tsx

```tsx
import type { Column, SortDirection } from '@tanstack/react-table'
import { ArrowDownIcon, ArrowUpIcon } from 'lucide-react'

import { cn } from '@/lib/utils'

interface DataTableColumnHeaderProps<TData, TValue> extends React.HTMLAttributes<HTMLDivElement> {
	column: Column<TData, TValue>
	title: string
}

function SortIcon({ direction }: Readonly<{ direction: false | SortDirection }>) {
	if (direction === 'desc') {
		return <ArrowDownIcon className="ml-1 size-4 shrink-0" aria-hidden="true" focusable="false" />
	}
	if (direction === 'asc') {
		return <ArrowUpIcon className="ml-1 size-4 shrink-0" aria-hidden="true" focusable="false" />
	}
	return null
}

export function DataTableColumnHeader<TData, TValue>({
	column,
	title,
	className,
}: DataTableColumnHeaderProps<TData, TValue>) {
	if (!column.getCanSort()) {
		return (
			<div className={cn('flex text-sm font-medium items-center text-left min-w-0', className)}>
				<span className="truncate">{title}</span>
			</div>
		)
	}

	function handleSort() {
		if (column.getIsSorted() === false) {
			column.toggleSorting(false) // Set to asc
		} else if (column.getIsSorted() === 'asc') {
			column.toggleSorting(true) // Set to desc
		} else {
			column.clearSorting() // Clear sorting
		}
	}

	const sortDirection = column.getIsSorted()
	const sortLabels: Record<string, string> = { asc: 'sorted ascending', desc: 'sorted descending' }
	const sortLabel = sortLabels[sortDirection as string] ?? 'not sorted'

	return (
		<button
			type="button"
			className={cn(
				'flex w-full min-w-0 cursor-pointer items-center rounded-sm text-sm font-medium outline-none hover:text-foreground/80 focus-visible:ring-3 focus-visible:ring-ring',
				className,
			)}
			onClick={handleSort}
			aria-label={`${title}, ${sortLabel}`}
			data-state={sortDirection ? 'sorted' : 'unsorted'}
		>
			<span className="truncate">{title}</span>
			{/* Only reserve icon space when actually sorted — an always-on placeholder squeezes narrow
			    columns (e.g. Version) and forces the header to truncate unnecessarily. */}
			<SortIcon direction={sortDirection} />
		</button>
	)
}
```

File: components/ui/data-table/data-table-faceted-filter.tsx

```tsx
import type { Column } from '@tanstack/react-table'
import { CheckIcon, CirclePlusIcon } from 'lucide-react'
import type * as React from 'react'
import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import {
	Command,
	CommandEmpty,
	CommandGroup,
	CommandInput,
	CommandItem,
	CommandList,
	CommandSeparator,
} from '@/components/ui/command'
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
import { Separator } from '@/components/ui/separator'
import { cn } from '@/lib/utils'

interface DataTableFacetedFilterProps<TData, TValue> {
	column?: Column<TData, TValue>
	title?: string
	options: {
		label: string
		value: string
		icon?: React.ComponentType<{ className?: string }>
	}[]
}

export function DataTableFacetedFilter<TData, TValue>({
	column,
	title,
	options,
}: DataTableFacetedFilterProps<TData, TValue>) {
	const facets = column?.getFacetedUniqueValues()
	const selectedValues = new Set(column?.getFilterValue() as string[])

	return (
		<Popover>
			<PopoverTrigger render={<Button variant="outline" className="border-dashed" />}>
				<CirclePlusIcon data-icon="inline-start" />
				{title}
				{selectedValues?.size > 0 && (
					<>
						<Separator orientation="vertical" className="mx-0.5 h-4" />
						<Badge className="rounded-sm px-1 font-normal lg:hidden">{selectedValues.size}</Badge>
						<div className="hidden gap-1 lg:flex">
							{selectedValues.size > 2 ? (
								<Badge className="rounded-sm px-1 font-normal">{selectedValues.size} selected</Badge>
							) : (
								options
									.filter((option) => selectedValues.has(option.value))
									.map((option) => (
										<Badge key={option.value} className="rounded-sm px-1 font-normal">
											{option.label}
										</Badge>
									))
							)}
						</div>
					</>
				)}
			</PopoverTrigger>
			<PopoverContent className="w-[200px] p-0" align="start">
				<Command>
					<CommandInput placeholder={title} />
					<CommandList>
						<CommandEmpty>No results found.</CommandEmpty>
						<CommandGroup>
							{options.map((option) => {
								const isSelected = selectedValues.has(option.value)
								return (
									<CommandItem
										key={option.value}
										onSelect={() => {
											if (isSelected) {
												selectedValues.delete(option.value)
											} else {
												selectedValues.add(option.value)
											}
											const filterValues = Array.from(selectedValues)
											column?.setFilterValue(filterValues.length ? filterValues : undefined)
										}}
									>
										<div
											className={cn(
												'flex size-4 items-center justify-center rounded-[4px] border border-primary',
												isSelected ? 'bg-primary text-primary-foreground' : 'opacity-50 [&_svg]:invisible',
											)}
										>
											<CheckIcon className="size-3.5 text-current" />
										</div>
										{option.icon && <option.icon className="size-4 text-muted-foreground" />}
										<span>{option.label}</span>
										{facets?.get(option.value) && (
											<span className="ml-auto flex size-4 items-center justify-center font-mono text-xs">
												{facets.get(option.value)}
											</span>
										)}
									</CommandItem>
								)
							})}
						</CommandGroup>
						{selectedValues.size > 0 && (
							<>
								<CommandSeparator />
								<CommandGroup>
									<CommandItem onSelect={() => column?.setFilterValue(undefined)} className="justify-center text-center">
										Clear filters
									</CommandItem>
								</CommandGroup>
							</>
						)}
					</CommandList>
				</Command>
			</PopoverContent>
		</Popover>
	)
}
```

File: components/ui/data-table/data-table-pagination.tsx

```tsx
'use client'

import type { Table } from '@tanstack/react-table'
import * as React from 'react'
import {
	Pagination,
	PaginationContent,
	PaginationEllipsis,
	PaginationItem,
	PaginationLink,
	PaginationNext,
	PaginationPrevious,
} from '@/components/ui/pagination'

// Pagination links are anchors, which have no `disabled` attribute.
const DISABLED_LINK_PROPS = { 'aria-disabled': true, tabIndex: -1, className: 'pointer-events-none opacity-50' }

function previousLinkProps<TData>(table: Table<TData>) {
	return table.getCanPreviousPage() ? {} : DISABLED_LINK_PROPS
}

function nextLinkProps<TData>(table: Table<TData>) {
	return table.getCanNextPage() ? {} : DISABLED_LINK_PROPS
}

interface DataTablePaginationProps<TData> {
	table: Table<TData>
	onPaginationChange?: (values: { pageIndex: number; pageSize: number }) => void
}

export function DataTablePagination<TData>({ table, onPaginationChange }: DataTablePaginationProps<TData>) {
	const handlePageChange = React.useCallback(
		(newPageIndex: number) => {
			onPaginationChange?.({
				pageIndex: newPageIndex,
				pageSize: table.getState().pagination.pageSize,
			})
		},
		[onPaginationChange, table],
	)

	// Read current page from the table's controlled state
	const currentPageIndex = table.getState().pagination.pageIndex ?? 0

	const getPageNumbers = () => {
		const totalPages = table.getPageCount()
		const pages: (number | string)[] = []

		if (totalPages <= 7) {
			return Array.from({ length: totalPages }, (_, i) => i)
		}

		pages.push(0)

		const middleStart = Math.max(1, Math.min(currentPageIndex - 1, totalPages - 5))
		const middleEnd = Math.min(middleStart + 3, totalPages - 2)

		if (middleStart > 1) pages.push('ellipsis')

		for (let i = middleStart; i <= middleEnd; i++) {
			pages.push(i)
		}

		if (middleEnd < totalPages - 2) pages.push('ellipsis')
		if (totalPages > 1) pages.push(totalPages - 1)

		return pages
	}

	return (
		<div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
			<Pagination>
				<PaginationContent>
					<PaginationItem>
						<PaginationPrevious
							href="#"
							{...previousLinkProps(table)}
							onClick={(event) => {
								event.preventDefault()
								if (table.getCanPreviousPage()) handlePageChange(currentPageIndex - 1)
							}}
						/>
					</PaginationItem>

					{getPageNumbers().map((pageNum, idx) =>
						pageNum === 'ellipsis' ? (
							<PaginationItem
								key={`ellipsis-${
									// biome-ignore lint/suspicious/noArrayIndexKey: ellipsis items need index-based keys
									idx
								}`}
							>
								<PaginationEllipsis />
							</PaginationItem>
						) : (
							<PaginationItem key={pageNum}>
								<PaginationLink
									href="#"
									onClick={(event) => {
										event.preventDefault()
										handlePageChange(pageNum as number)
									}}
									isActive={currentPageIndex === pageNum}
									total={table.getPageCount()}
									aria-label={`Go to page ${(pageNum as number) + 1}`}
								>
									{(pageNum as number) + 1}
								</PaginationLink>
							</PaginationItem>
						),
					)}

					<PaginationItem>
						<PaginationNext
							href="#"
							{...nextLinkProps(table)}
							onClick={(event) => {
								event.preventDefault()
								if (table.getCanNextPage()) handlePageChange(currentPageIndex + 1)
							}}
						/>
					</PaginationItem>
				</PaginationContent>
			</Pagination>
		</div>
	)
}
```

File: components/ui/data-table/data-table-toolbar.tsx

```tsx
import type { Table } from '@tanstack/react-table'
import { XIcon } from 'lucide-react'

import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { statuses } from './data'
import { DataTableFacetedFilter } from './data-table-faceted-filter'
import { DataTableViewOptions } from './data-table-view-options'

interface DataTableToolbarProps<TData> {
	table: Table<TData>
}

export function DataTableToolbar<TData>({ table }: DataTableToolbarProps<TData>) {
	const isFiltered = table.getState().columnFilters.length > 0

	return (
		<div className="flex items-center justify-between">
			<div className="flex flex-1 items-center gap-2">
				<Input
					placeholder="Filter cases..."
					value={(table.getColumn('name')?.getFilterValue() as string) ?? ''}
					onChange={(event) => table.getColumn('name')?.setFilterValue(event.target.value)}
					className="w-[150px] lg:w-[250px]"
				/>
				{table.getColumn('status') && (
					<DataTableFacetedFilter column={table.getColumn('status')} title="Status" options={statuses} />
				)}
				{/* {table.getColumn('priority') && (
					<DataTableFacetedFilter column={table.getColumn('priority')} title="Priority" options={priorities} />
				)} */}
				{isFiltered && (
					<Button variant="ghost" onClick={() => table.resetColumnFilters()}>
						Reset
						<XIcon data-icon="inline-end" />
					</Button>
				)}
			</div>
			<DataTableViewOptions table={table} />
		</div>
	)
}
```

File: components/ui/data-table/data-table-view-options.tsx

```tsx
import type { Table } from '@tanstack/react-table'
import { Settings2Icon } from 'lucide-react'

import { Button } from '@/components/ui/button'
import {
	DropdownMenu,
	DropdownMenuCheckboxItem,
	DropdownMenuContent,
	DropdownMenuGroup,
	DropdownMenuLabel,
	DropdownMenuSeparator,
	DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu'

interface DataTableViewOptionsProps<TData> {
	table: Table<TData>
}

export function DataTableViewOptions<TData>({ table }: DataTableViewOptionsProps<TData>) {
	return (
		<DropdownMenu>
			<DropdownMenuTrigger render={<Button variant="outline" className="ml-auto hidden lg:flex" />}>
				<Settings2Icon data-icon="inline-start" />
				View
			</DropdownMenuTrigger>
			<DropdownMenuContent align="end" className="w-[150px]">
				<DropdownMenuGroup>
					<DropdownMenuLabel>Toggle columns</DropdownMenuLabel>
				</DropdownMenuGroup>
				<DropdownMenuSeparator />
				{table
					.getAllColumns()
					.filter((column) => typeof column.accessorFn !== 'undefined' && column.getCanHide())
					.map((column) => {
						return (
							<DropdownMenuCheckboxItem
								key={column.id}
								className="capitalize"
								checked={column.getIsVisible()}
								onCheckedChange={(value) => column.toggleVisibility(!!value)}
							>
								{column.id}
							</DropdownMenuCheckboxItem>
						)
					})}
			</DropdownMenuContent>
		</DropdownMenu>
	)
}
```

File: components/ui/data-table/data-table.tsx

```tsx
'use client'

import {
	type ColumnDef,
	type ColumnFiltersState,
	type ColumnSizingState,
	flexRender,
	getCoreRowModel,
	getExpandedRowModel,
	getFacetedRowModel,
	getFacetedUniqueValues,
	getFilteredRowModel,
	getPaginationRowModel,
	getSortedRowModel,
	type OnChangeFn,
	type PaginationState,
	type RowData,
	type SortingState,
	type TableMeta,
	useReactTable,
	type VisibilityState,
} from '@tanstack/react-table'
import { ChevronDownIcon, ChevronRightIcon } from 'lucide-react'
import * as React from 'react'
import { Button } from '@/components/ui/button'
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'
import { cn } from '@/lib/utils'
import { DataTablePagination } from './data-table-pagination'

declare module '@tanstack/react-table' {
	// biome-ignore lint/correctness/noUnusedVariables: the generics must match TanStack's declaration to merge with it
	interface ColumnMeta<TData extends RowData, TValue> {
		/** Pin this column to the right edge so it stays visible while the table scrolls horizontally. */
		pinRight?: boolean
		/** Opt out of the default single-line truncation applied to cells. */
		truncate?: boolean
	}
}

// Sticky positioning for a right-pinned column. Colours are applied inline (see pinnedCellStyle),
// because `background: inherit` won't track a row's :hover on table cells.
const pinRightStyle: React.CSSProperties = {
	position: 'sticky',
	right: 0,
}

// Opaque background for a pinned cell that matches the row exactly and hides cells scrolling underneath.
// Selected → solid muted; hovered → the same translucent muted the row uses, composited over an opaque
// base (background-image over background-color) so it matches the row's hover shade while staying opaque.
const MUTED_50 = 'color-mix(in oklch, var(--muted) 50%, transparent)'
// Opaque equivalent of `bg-muted/50` over the page background (used by the muted header and sub-rows).
const MUTED_SURFACE = 'color-mix(in oklch, var(--muted) 50%, var(--background))'
function pinnedCellStyle(muted: boolean, active: boolean, hovered: boolean): React.CSSProperties {
	const base = muted ? MUTED_SURFACE : 'var(--background)'
	if (active) return { ...pinRightStyle, zIndex: 1, backgroundColor: 'var(--muted)' }
	return {
		...pinRightStyle,
		zIndex: 1,
		backgroundColor: base,
		backgroundImage: hovered ? `linear-gradient(${MUTED_50}, ${MUTED_50})` : undefined,
	}
}

// Width of the leading expander column when getSubRows is used (matches the 3rem cells below).
const EXPANDER_WIDTH = 48
// Smallest a column can be dragged, so it never collapses past a letter + ellipsis ("N…").
const MIN_COLUMN_WIDTH = 48

// Resize grab strip on a header's right edge, with a short divider line: border colour at rest, primary
// colour (thicker) on hover/drag.
function ResizeHandle({ resizeHandler, isResizing }: { resizeHandler: (e: unknown) => void; isResizing: boolean }) {
	const [hovered, setHovered] = React.useState(false)
	const active = hovered || isResizing
	return (
		<button
			type="button"
			aria-label="Resize column"
			onMouseDown={resizeHandler}
			onTouchStart={resizeHandler}
			onClick={(e) => e.stopPropagation()}
			onMouseEnter={() => setHovered(true)}
			onMouseLeave={() => setHovered(false)}
			style={{ cursor: 'col-resize' }}
			className="absolute inset-y-0 right-0 z-10 flex w-3 touch-none select-none items-stretch justify-end border-0 bg-transparent p-0"
		>
			<span
				style={{
					width: active ? 2 : 1,
					backgroundColor: active ? 'var(--primary)' : 'var(--border)',
					transition: 'width 0.15s, background-color 0.15s',
				}}
			/>
		</button>
	)
}

interface DataTableProps<TData extends RowData, TValue> {
	/** `muted` (default) gives the header row a `bg-muted/50` surface; `default` keeps it transparent. */
	variant?: 'default' | 'muted'
	columns: ColumnDef<TData, TValue>[]
	data: TData[]
	pagination?: PaginationState
	pageCount?: number
	getSubRows?: (row: TData) => TData[] | undefined
	onPaginationChange?: OnChangeFn<PaginationState>
	onSortingChange?: OnChangeFn<SortingState>
	sorting?: SortingState
	manualPagination?: boolean
	manualSorting?: boolean
	defaultPageSize?: number
	meta?: TableMeta<TData>
	/** Allow users to drag column borders to resize. On by default; pass false to opt a table out. */
	enableColumnResizing?: boolean
}

export function DataTable<TData extends RowData, TValue>({
	columns,
	data,
	pagination,
	pageCount,
	getSubRows,
	onPaginationChange,
	onSortingChange,
	sorting: initialSorting = [],
	manualPagination = false,
	manualSorting = false,
	defaultPageSize = 10,
	variant = 'muted',
	meta,
	enableColumnResizing = true,
}: DataTableProps<TData, TValue>) {
	const [rowSelection, setRowSelection] = React.useState({})
	const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>({})
	const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([])
	const [sorting, setSorting] = React.useState<SortingState>(initialSorting)
	const [columnSizing, setColumnSizing] = React.useState<ColumnSizingState>({})
	// Once the user drags a column, stop auto-fitting to the container so their chosen widths stick.
	const [userResized, setUserResized] = React.useState(false)
	const scrollRef = React.useRef<HTMLDivElement>(null)

	const safePageSize = defaultPageSize > 0 ? defaultPageSize : 10

	const defaultPagination: PaginationState = {
		pageIndex: 0,
		pageSize: safePageSize,
	}

	const [internalPagination, setInternalPagination] = React.useState<PaginationState>(defaultPagination)
	const handlePaginationChange = pagination ? onPaginationChange : setInternalPagination

	const table = useReactTable({
		data,
		columns,
		state: {
			pagination: pagination ?? internalPagination,
			sorting,
			columnVisibility,
			rowSelection,
			columnFilters,
			columnSizing,
		},
		enableColumnResizing,
		columnResizeMode: 'onChange',
		onColumnSizingChange: (updater) => {
			// A change coming through here is a user drag (our auto-fit sets state directly), so lock in.
			setUserResized(true)
			setColumnSizing(updater)
		},
		// Floor the drag width so a column never collapses to nothing — the header keeps at least
		// a letter + ellipsis ("N…") instead of fully disappearing.
		defaultColumn: { minSize: MIN_COLUMN_WIDTH },
		manualPagination,
		manualSorting,
		pageCount,
		onPaginationChange: handlePaginationChange,
		onSortingChange: (updater) => {
			const newState = typeof updater === 'function' ? updater(sorting) : updater
			setSorting(newState)
			onSortingChange?.(newState)
		},
		enableRowSelection: true,
		onRowSelectionChange: setRowSelection,
		onColumnFiltersChange: setColumnFilters,
		onColumnVisibilityChange: setColumnVisibility,
		getCoreRowModel: getCoreRowModel(),
		getFilteredRowModel: getFilteredRowModel(),
		getPaginationRowModel: getPaginationRowModel(),
		getSortedRowModel: getSortedRowModel(),
		getFacetedRowModel: getFacetedRowModel(),
		getFacetedUniqueValues: getFacetedUniqueValues(),
		getExpandedRowModel: getExpandedRowModel(),
		getSubRows,
		meta,
	})

	// Auto-fit: distribute the container width across columns (proportional to their defined sizes) so
	// they fill the table at rest. Stops once the user manually resizes, and re-runs on container resize.
	// biome-ignore lint/correctness/useExhaustiveDependencies: table identity is stable enough here.
	React.useLayoutEffect(() => {
		if (!enableColumnResizing || userResized) return
		const el = scrollRef.current
		if (!el) return
		const fitColumns = () => {
			const leafs = table.getVisibleLeafColumns()
			if (!leafs.length) return
			const available = el.clientWidth - (getSubRows ? EXPANDER_WIDTH : 0)
			const sum = leafs.reduce((a, c) => a + c.getSize(), 0)
			if (available <= 0 || sum <= 0 || available <= sum) return // only grow to fill, never shrink below defined
			const next: ColumnSizingState = {}
			for (const c of leafs) {
				next[c.id] = (c.getSize() / sum) * available
			}
			setColumnSizing(next)
		}
		fitColumns()
		const ro = new ResizeObserver(fitColumns)
		ro.observe(el)
		return () => ro.disconnect()
	}, [enableColumnResizing, userResized, getSubRows])

	// Only pin columns while the table actually overflows horizontally. When everything fits there's no
	// scroll to guard against, and a pinned cell (solid bg + border) would just read as an odd extra seam.
	const [isOverflowing, setIsOverflowing] = React.useState(false)
	React.useLayoutEffect(() => {
		const tableEl = scrollRef.current?.querySelector('table')
		const scroller = tableEl?.parentElement
		if (!tableEl || !scroller) return
		const check = () => setIsOverflowing(tableEl.scrollWidth > scroller.clientWidth + 1)
		check()
		const ro = new ResizeObserver(check)
		ro.observe(scroller)
		ro.observe(tableEl)
		return () => ro.disconnect()
	}, [])

	// Which row the pointer is over, so a pinned cell can mirror the row's hover tint with inline styles.
	const [hoveredRowId, setHoveredRowId] = React.useState<string | null>(null)

	return (
		<div className="space-y-4">
			{/* <DataTableToolbar table={table} /> */}
			<div ref={scrollRef} className="rounded-lg border border-border bg-background overflow-hidden">
				{/* Size the table to the sum of column widths so columns resize independently and the table
				    scrolls horizontally instead of squashing neighbours. At rest the auto-fit effect makes
				    that total equal the container, so the columns fill the width. */}
				<Table
					className="table-fixed"
					style={enableColumnResizing ? { width: table.getTotalSize() + (getSubRows ? EXPANDER_WIDTH : 0) } : undefined}
				>
					<TableHeader>
						{table.getHeaderGroups().map((headerGroup) => (
							<TableRow
								key={headerGroup.id}
								className={cn(variant === 'muted' && 'bg-muted/50 text-muted-foreground hover:bg-muted/50')}
							>
								{getSubRows && <TableHead style={{ width: EXPANDER_WIDTH }} />}
								{headerGroup.headers.map((header, index) => {
									// No handle on the last column: it butts against the table border, so its divider would
									// double up with the border and read as an extra empty column.
									const isLast = index === headerGroup.headers.length - 1
									// Actions columns are pinned everywhere by convention; other columns opt in via meta.pinRight.
									// Only while the table overflows horizontally (nothing to pin against otherwise).
									const pinRight = isOverflowing && (header.column.columnDef.meta?.pinRight || header.column.id === 'actions')
									return (
										<TableHead
											key={header.id}
											id={`th-${header.id}`}
											colSpan={header.colSpan}
											// A pinned (positioned) cell paints over the row's own border-b, so it carries its own.
											// Its opaque background goes through a class (fed by a variable), not an inline background,
											// so a theme's header colour still wins.
											className={cn(pinRight && 'border-b border-border bg-(--pinned-head-bg)')}
											style={
												{
													width: `${header.getSize()}px`,
													...(pinRight
														? {
																...pinRightStyle,
																zIndex: 2,
																'--pinned-head-bg': variant === 'muted' ? MUTED_SURFACE : 'var(--background)',
															}
														: {}),
												} as React.CSSProperties
											}
										>
											{/* Relative wrapper (not the <th>, whose position:relative is unreliable across browsers)
										    so the absolute resize handle positions + stacks correctly. */}
											<div className="relative flex h-full items-center pr-1">
												{header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
												{header.column.getCanResize() && !isLast && (
													<ResizeHandle
														resizeHandler={header.getResizeHandler() as (e: unknown) => void}
														isResizing={header.column.getIsResizing()}
													/>
												)}
											</div>
										</TableHead>
									)
								})}
							</TableRow>
						))}
					</TableHeader>
					<TableBody>
						{table.getRowModel().rows?.length ? (
							table.getRowModel().rows.map((row, rowIndex) => {
								const isLastRow = rowIndex === table.getRowModel().rows.length - 1
								return (
									<TableRow
										key={row.id}
										data-state={row.getIsSelected() && 'selected'}
										className={cn(row.depth > 0 && 'bg-muted/50 text-muted-foreground')}
										onMouseEnter={() => setHoveredRowId(row.id)}
										onMouseLeave={() => setHoveredRowId((id) => (id === row.id ? null : id))}
									>
										{getSubRows && (
											<TableCell style={{ width: EXPANDER_WIDTH }}>
												{row.getCanExpand() && (
													<Button
														type="button"
														aria-label={row.getIsExpanded() ? 'Collapse row' : 'Expand row'}
														aria-expanded={row.getIsExpanded()}
														onClick={row.getToggleExpandedHandler()}
														size="icon-sm"
														variant="ghost"
													>
														{row.getIsExpanded() ? <ChevronDownIcon /> : <ChevronRightIcon />}
													</Button>
												)}
											</TableCell>
										)}
										{row.getVisibleCells().map((cell) => {
											const skipTruncate =
												cell.column.id === 'actions' ||
												cell.column.id === 'availability' ||
												cell.column.columnDef.meta?.truncate === false
											const pinRight = isOverflowing && (cell.column.columnDef.meta?.pinRight || cell.column.id === 'actions')
											return (
												<TableCell
													key={cell.id}
													headers={`th-${cell.column.id}`}
													// Pinned cells paint over the row's border-b, so carry a matching one (except last row).
													className={pinRight && !isLastRow ? 'border-b border-border' : undefined}
													style={pinRight ? pinnedCellStyle(row.depth > 0, row.getIsSelected(), hoveredRowId === row.id) : undefined}
												>
													{skipTruncate ? (
														flexRender(cell.column.columnDef.cell, cell.getContext())
													) : (
														<div className="truncate">{flexRender(cell.column.columnDef.cell, cell.getContext())}</div>
													)}
												</TableCell>
											)
										})}
									</TableRow>
								)
							})
						) : (
							<TableRow>
								<TableCell colSpan={columns.length + (getSubRows ? 1 : 0)} className="h-24 text-center">
									No results.
								</TableCell>
							</TableRow>
						)}
					</TableBody>
				</Table>
			</div>
			{table.getPageCount() > 1 && (
				<div className="flex flex-row justify-end">
					<DataTablePagination onPaginationChange={handlePaginationChange} table={table} />
				</div>
			)}
		</div>
	)
}
```

File: components/ui/data-table/data.ts

```tsx
import {
	ArrowDownIcon,
	ArrowRightIcon,
	ArrowUpIcon,
	CircleCheckIcon,
	CircleDashedIcon,
	CircleIcon,
	CircleXIcon,
	HourglassIcon,
	TimerIcon,
} from 'lucide-react'

/** Case types, e.g. for a faceted filter on a case list. */
export const labels = [
	{
		value: 'building-permit',
		label: 'Building permit',
	},
	{
		value: 'environmental-permit',
		label: 'Environmental permit',
	},
	{
		value: 'records-request',
		label: 'Public records request',
	},
]

/** Case statuses, from registration to closing. */
export const statuses = [
	{
		value: 'received',
		label: 'Received',
		icon: CircleDashedIcon,
	},
	{
		value: 'in-review',
		label: 'In review',
		icon: TimerIcon,
	},
	{
		value: 'supplement',
		label: 'Waiting for supplement',
		icon: HourglassIcon,
	},
	{
		value: 'decided',
		label: 'Decided',
		icon: CircleCheckIcon,
	},
	{
		value: 'closed',
		label: 'Closed',
		icon: CircleIcon,
	},
	{
		value: 'withdrawn',
		label: 'Withdrawn',
		icon: CircleXIcon,
	},
]

export const priorities = [
	{
		label: 'Low',
		value: 'low',
		icon: ArrowDownIcon,
	},
	{
		label: 'Normal',
		value: 'normal',
		icon: ArrowRightIcon,
	},
	{
		label: 'Urgent',
		value: 'urgent',
		icon: ArrowUpIcon,
	},
]
```

File: components/ui/data-table/index.ts

```tsx
export type {
	Column,
	ColumnDef,
	ColumnFiltersState,
	SortingState,
	VisibilityState,
} from '@tanstack/react-table'
export * from './creator-name-cell'
export * from './data'
export * from './data-table'
export * from './data-table-column-header'
export * from './data-table-faceted-filter'
export * from './data-table-pagination'
export * from './data-table-toolbar'
export * from './truncated-tooltip'
```

File: components/ui/data-table/truncated-tooltip.tsx

```tsx
'use client'

import * as React from 'react'
import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'

/** Single-line ellipsis: truncated when the content is wider than its clipped box. */
export function isEllipsisTruncated(el: HTMLElement | null): boolean {
	return !!el && el.scrollWidth > el.clientWidth + 1
}

/**
 * Multi-line `-webkit-line-clamp`: truncated when the full text is taller than the clamped box.
 * Safari reports `scrollHeight === clientHeight` for clamped boxes, so lift the clamp to measure
 * the true height, then restore it.
 */
export function isLineClampTruncated(el: HTMLElement | null): boolean {
	if (!el) return false
	const clampedHeight = el.clientHeight
	el.style.webkitLineClamp = '9999'
	const fullHeight = el.scrollHeight
	el.style.webkitLineClamp = ''
	return fullHeight > clampedHeight + 1
}

interface TruncatedTooltipProps {
	/** Tooltip content — usually the full, untruncated text. */
	content: React.ReactNode
	/** `true` = multi-line line-clamp; `false` (default) = single-line ellipsis. */
	clamp?: boolean
	/** Delay in ms before the tooltip opens (passed to Base UI's `TooltipTrigger` `delay`). */
	delayDuration?: number
	side?: 'top' | 'right' | 'bottom' | 'left'
	align?: 'start' | 'center' | 'end'
	/** Render the trigger; attach the passed `ref` to the element that is clipped/truncated. */
	children: (ref: React.RefCallback<HTMLElement>) => React.ReactElement
}

/**
 * Wraps a truncatable trigger and shows a tooltip ONLY when the text is actually truncated.
 * Measured on demand (hover/focus), when the element is guaranteed laid out and visible — this
 * avoids the layout-timing races of measuring inside an effect. The tooltip is non-interactive
 * (`pointer-events-none`) so it never blocks clicks on the rows beneath it.
 */
export function TruncatedTooltip({
	content,
	clamp = false,
	delayDuration,
	side = 'bottom',
	align = 'start',
	children,
}: Readonly<TruncatedTooltipProps>) {
	const ref = React.useRef<HTMLElement | null>(null)
	const [open, setOpen] = React.useState(false)
	const check = () => (clamp ? isLineClampTruncated(ref.current) : isEllipsisTruncated(ref.current))
	// Stable ref callback so the trigger isn't detached/reattached on every render.
	const setRef = React.useCallback<React.RefCallback<HTMLElement>>((el) => {
		ref.current = el
	}, [])

	return (
		<Tooltip open={open} onOpenChange={(next) => setOpen(next && check())}>
			<TooltipTrigger delay={delayDuration} render={children(setRef)} />
			<TooltipContent side={side} align={align} className="pointer-events-none">
				{content}
			</TooltipContent>
		</Tooltip>
	)
}
```

---

# Date Time Picker

Combined date and time picker in a popover.

Install: `npx shadcn@latest add https://rdf.dev.360online.com/r/datetime-picker.json`

Import from: `@/components/ui/datetime-picker`

Builds on: button, calendar, popover, scroll-area

npm dependencies: date-fns@^4.4.0, lucide-react@^1.48.0, react-day-picker@^10.0.1

A datetime picker component that combines date and time selection functionality. Built with accessibility and ease of use in mind.

### Features

- Combined date and time selection
- Support for both 12-hour and 24-hour time formats
- Locale-aware display via `Intl.DateTimeFormat` (`locale` prop)
- Configurable granularity (day, hour, minute, second)
- Internationalization support
- Year range customization
- Keyboard navigation support
- Screen reader friendly
- Built on top of React Day Picker and the Base UI Popover

### Usage

```tsx
import { DateTimePicker } from "@/components/ui/datetime-picker"

// Date only — value is a `YYYY-MM-DD` string
const [date, setDate] = useState<string>('')

<DateTimePicker value={date} onChange={setDate} placeholder="Pick a date" />

// With time — value becomes `YYYY-MM-DDTHH:mm`
<DateTimePicker value={date} onChange={setDate} enableTime placeholder="Pick a date and time" />

// 12-hour clock, localized display
<DateTimePicker value={date} onChange={setDate} enableTime hourCycle={12} locale="en-US" />

// Constrain the selectable range
<DateTimePicker
  value={date}
  onChange={setDate}
  startMonth={new Date(2020, 0)}
  endMonth={new Date(2030, 11)}
  disabledDates={{ dayOfWeek: [0, 6] }}
/>

// Read-only / disabled
<DateTimePicker value={date} readOnly />
<DateTimePicker value={date} disabled />
```

#### Default

A date field labelled with `Field` and `FieldLabel`.

#### With time

Set `enableTime` to pick hours and minutes as well. The 24-hour clock is the default.

#### 12-hour clock

Use `hourCycle={12}` for AM/PM.

#### Localized

The `locale` prop formats the displayed date. The value is the same `YYYY-MM-DD` string in every locale.

#### Constrained range

Limit the calendar with `startMonth` and `endMonth`, and block dates with `disabledDates`. Here only weekdays in the collection season can be picked.

#### Controlled

A booking form in a `Card` that keeps the value in state and shows a summary.

#### Invalid

Set `aria-invalid` and explain the error in a `FieldError`.

#### Disabled Component

Showing the disabled state of the picker.

#### Readonly Component

Shows the value without letting it change.

### Accessibility

The DateTime Picker component follows WCAG 2.1 guidelines and provides:

- Proper ARIA roles and attributes
- Keyboard navigation support:
  - `Tab`: Move between inputs and calendar
  - `Space/Enter`: Open/close calendar, select date
  - `Arrow keys`: Navigate calendar dates and time inputs
  - `PageUp/PageDown`: Navigate months
  - `Home/End`: Navigate to start/end of week
  - `Esc`: Close calendar
- Focus management
- Screen reader announcements for selections
- High contrast visual indicators
- Clear focus states

### Best Practices

1. Date and Time Selection
   - Use appropriate default values
   - Consider time zone handling
   - Validate date ranges if needed
   - Show clear format examples

2. Visual Design
   - Maintain consistent sizing
   - Provide clear selection feedback
   - Consider mobile touch targets
   - Use appropriate spacing

3. Interaction
   - Handle loading states
   - Provide clear validation feedback
   - Consider keyboard shortcuts
   - Test with different input methods

4. Accessibility
   - Write descriptive aria-labels
   - Test with screen readers
   - Verify keyboard navigation
   - Ensure sufficient color contrast

### Related Components

- Calendar
- DatePicker
- DateRangePicker
- TimePicker

## Source

File: components/ui/datetime-picker.tsx

```tsx
'use client'

import * as DateFns from 'date-fns'
import { CalendarIcon } from 'lucide-react'
import * as React from 'react'
import type { Matcher } from 'react-day-picker'
import { Button } from '@/components/ui/button'
import { Calendar } from '@/components/ui/calendar'
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
import { ScrollArea, ScrollBar } from '@/components/ui/scroll-area'
import { cn } from '@/lib/utils'

interface DateTimePickerProps {
	readonly value?: string
	readonly onChange?: (value: string) => void
	readonly placeholder?: string
	/** when true, the trigger button is disabled */
	readonly disabled?: boolean
	/** enable time selection UI in the popover */
	readonly enableTime?: boolean
	/** 12 or 24 hour cycle for time selection */
	readonly hourCycle?: 12 | 24
	/** locale for displaying the date (e.g. 'fi', 'sv', 'en') */
	readonly locale?: string
	/** when true, component is read-only (no popover interaction) */
	readonly readOnly?: boolean
	/** earliest month visible in the calendar / year dropdown */
	readonly startMonth?: Date
	/** latest month visible in the calendar / year dropdown */
	readonly endMonth?: Date
	/** dates that cannot be selected (react-day-picker matcher) */
	readonly disabledDates?: Matcher | Matcher[]
	/** extra classes for the trigger button */
	readonly className?: string
	/** id for the trigger button (e.g. to pair with a `<Label htmlFor>`) */
	readonly id?: string
	/** marks the trigger as invalid (destructive border + ring) */
	readonly 'aria-invalid'?: React.AriaAttributes['aria-invalid']
	/** accessible name when there is no visible `<Label htmlFor={id}>` */
	readonly 'aria-label'?: string
	/**
	 * Ids of the elements that name the picker, usually the field's label. The button adds
	 * itself, so the name ends with the chosen value (or the placeholder): "Date of birth,
	 * required, 15 Oct 2026". Takes precedence over `aria-label`.
	 */
	readonly 'aria-labelledby'?: string
	/** Ids of the help text and error message, passed on to the button */
	readonly 'aria-describedby'?: string
}

/**
 * Format a Date to a string value for form submission
 * - Without time: YYYY-MM-DD
 * - With time: YYYY-MM-DDTHH:mm (ISO 8601)
 */
function formatDateValue(date: Date | undefined, enableTime: boolean): string {
	if (!date) return ''
	return DateFns.format(date, enableTime ? "yyyy-MM-dd'T'HH:mm" : 'yyyy-MM-dd')
}

function formatDisplay(date: Date, locale: string, enableTime: boolean): string {
	const options: Intl.DateTimeFormatOptions = { day: 'numeric', month: 'short', year: 'numeric' }
	if (enableTime) {
		options.hour = '2-digit'
		options.minute = '2-digit'
	}
	return date.toLocaleDateString(locale, options)
}

export function DateTimePicker({
	value,
	onChange,
	placeholder,
	disabled,
	enableTime = false,
	hourCycle = 24,
	locale = 'en-GB',
	readOnly,
	startMonth,
	endMonth,
	disabledDates,
	className,
	id,
	'aria-invalid': ariaInvalid,
	'aria-label': ariaLabel,
	'aria-labelledby': ariaLabelledby,
	'aria-describedby': ariaDescribedby,
}: DateTimePickerProps) {
	const [open, setOpen] = React.useState(false)
	const [date, setDate] = React.useState<Date | undefined>(
		value ? (value.includes('T') ? new Date(value) : new Date(`${value}T00:00:00`)) : undefined,
	)
	const generatedId = React.useId()
	const buttonId = id ?? generatedId

	// keep internal state in sync with external value
	React.useEffect(() => {
		if (!value) {
			setDate(undefined)
			return
		}
		const next = value.includes('T') ? new Date(value) : new Date(`${value}T00:00:00`)
		if (!Number.isNaN(next.getTime())) setDate(next)
	}, [value])

	const hours = React.useMemo(
		() => (hourCycle === 12 ? Array.from({ length: 12 }, (_, i) => i + 1) : Array.from({ length: 24 }, (_, i) => i)),
		[hourCycle],
	)

	const buttonLabel = date ? formatDisplay(date, locale, enableTime) : placeholder

	function handleHourChange(newDate: Date, hourValue: string) {
		if (hourCycle === 12) {
			const hour = Number.parseInt(hourValue, 10)
			const currentHours = newDate.getHours()
			const isPM = currentHours >= 12
			let newHour = hour === 12 ? 0 : hour
			if (isPM) newHour += 12
			newDate.setHours(newHour)
		} else {
			newDate.setHours(Number.parseInt(hourValue, 10))
		}
	}

	function handleMinuteChange(newDate: Date, minuteValue: string) {
		newDate.setMinutes(Number.parseInt(minuteValue, 10))
	}

	function handleAmPmChange(newDate: Date, ampmValue: string) {
		const currentHours = newDate.getHours()
		const isPM = ampmValue === 'PM'
		if (isPM && currentHours < 12) {
			newDate.setHours(currentHours + 12)
		} else if (!isPM && currentHours >= 12) {
			newDate.setHours(currentHours - 12)
		}
	}

	function handleTimeChange(type: 'hour' | 'minute' | 'ampm', nextValue: string) {
		if (!date) return
		const newDate = new Date(date)

		switch (type) {
			case 'hour':
				handleHourChange(newDate, nextValue)
				break
			case 'minute':
				handleMinuteChange(newDate, nextValue)
				break
			case 'ampm':
				handleAmPmChange(newDate, nextValue)
				break
		}

		setDate(newDate)
		onChange?.(formatDateValue(newDate, enableTime))
	}

	return (
		<Popover open={open && !readOnly} onOpenChange={setOpen}>
			<PopoverTrigger
				disabled={disabled}
				render={
					<Button
						data-read-only={readOnly || undefined}
						data-empty={!date || undefined}
						aria-invalid={ariaInvalid}
						aria-disabled={disabled}
						variant="outline"
						id={buttonId}
						className={cn(
							'justify-between font-normal hover:border-primary hover:bg-transparent hover:text-foreground data-empty:text-muted-foreground data-read-only:pointer-events-none data-read-only:cursor-default data-read-only:border-dashed data-read-only:border-input data-read-only:bg-muted/50 data-read-only:text-foreground data-read-only:hover:border-input data-read-only:hover:bg-muted/50',
							className,
						)}
						aria-label={ariaLabelledby ? undefined : ariaLabel}
						aria-labelledby={ariaLabelledby ? `${ariaLabelledby} ${buttonId}` : undefined}
						aria-describedby={ariaDescribedby}
					/>
				}
			>
				<span className="truncate">{buttonLabel}</span>
				<CalendarIcon data-icon="inline-end" className="text-muted-foreground" />
			</PopoverTrigger>
			<PopoverContent
				className="max-h-(--available-height) w-auto overflow-y-auto p-0"
				align="start"
				// Named after the field, so the calendar is not announced as just "dialog"
				aria-labelledby={ariaLabelledby}
				aria-label={ariaLabelledby ? undefined : ariaLabel}
			>
				<div className="sm:flex">
					<Calendar
						mode="single"
						selected={date}
						captionLayout="dropdown"
						startMonth={startMonth}
						endMonth={endMonth}
						disabled={disabledDates}
						onSelect={(nextDate) => {
							setDate(nextDate)
							onChange?.(formatDateValue(nextDate, enableTime))
							if (!enableTime) setOpen(false)
						}}
					/>
					{enableTime && (
						<div className="flex flex-col divide-y border-t sm:h-[300px] sm:flex-row sm:divide-x sm:divide-y-0 sm:border-t-0 sm:border-l">
							<ScrollArea className="w-64 sm:w-auto">
								<div className="flex sm:flex-col p-2">
									{hours.map((hour) => {
										const isSelected =
											!!date && (hourCycle === 12 ? (date.getHours() % 12 || 12) === hour : date.getHours() === hour)
										return (
											<Button
												key={hour}
												size="icon"
												variant={isSelected ? 'default' : 'ghost'}
												className="aspect-square shrink-0 sm:w-full"
												disabled={!date}
												onClick={() => handleTimeChange('hour', hour.toString())}
											>
												{hourCycle === 24 ? hour.toString().padStart(2, '0') : hour}
											</Button>
										)
									})}
								</div>
								<ScrollBar orientation="horizontal" className="sm:hidden" />
							</ScrollArea>
							<ScrollArea className="w-64 sm:w-auto">
								<div className="flex sm:flex-col p-2">
									{Array.from({ length: 12 }, (_, i) => i * 5).map((minute) => (
										<Button
											key={minute}
											size="icon"
											variant={date && date.getMinutes() === minute ? 'default' : 'ghost'}
											className="aspect-square shrink-0 sm:w-full"
											disabled={!date}
											onClick={() => handleTimeChange('minute', minute.toString())}
										>
											{minute.toString().padStart(2, '0')}
										</Button>
									))}
								</div>
								<ScrollBar orientation="horizontal" className="sm:hidden" />
							</ScrollArea>
							{hourCycle === 12 && (
								<ScrollArea>
									<div className="flex sm:flex-col p-2">
										{['AM', 'PM'].map((ampm) => (
											<Button
												key={ampm}
												size="icon"
												variant={
													date && ((ampm === 'AM' && date.getHours() < 12) || (ampm === 'PM' && date.getHours() >= 12))
														? 'default'
														: 'ghost'
												}
												className="aspect-square shrink-0 sm:w-full"
												disabled={!date}
												onClick={() => handleTimeChange('ampm', ampm)}
											>
												{ampm}
											</Button>
										))}
									</div>
								</ScrollArea>
							)}
						</div>
					)}
				</div>
			</PopoverContent>
		</Popover>
	)
}
```

---

# Description List

Key–value pairs such as applicant, property and fee, as valid dl markup in stacked, side-by-side or grid layouts.

Install: `npx shadcn@latest add https://rdf.dev.360online.com/r/description-list.json`

Import from: `@/components/ui/description-list`

Key–value pairs such as applicant, property and fee. Almost every case view has them. The component renders valid
`<dl>` markup, so screen readers announce each term with its value.

### Features

- Valid `<dl>` markup: `DescriptionList` (`dl`), `DescriptionListItem` (a `div` around one pair), `DescriptionListTerm` (`dt`) and `DescriptionListDetails` (`dd`)
- Two layouts: `vertical` stacks the term above the value, `horizontal` puts terms in a column beside the values
- In the horizontal layout the value moves below the term when there is not enough room for both
- Optional dividers between pairs with `divided`
- A responsive grid of pairs with `columns`. It responds to the list's own width, so it also works in cards and side panels
- Long values wrap, even long email addresses and URLs
- Values can hold links, badges and buttons. Plain links are underlined automatically
- `data-slot` attributes on every part

### Usage

```tsx
import {
  DescriptionList,
  DescriptionListDetails,
  DescriptionListItem,
  DescriptionListTerm,
} from '@/components/ui/description-list'

export function CaseFacts() {
  return (
    <DescriptionList orientation="horizontal" divided>
      <DescriptionListItem>
        <DescriptionListTerm>Applicant</DescriptionListTerm>
        <DescriptionListDetails>Anna Lindqvist</DescriptionListDetails>
      </DescriptionListItem>
      <DescriptionListItem>
        <DescriptionListTerm>Property</DescriptionListTerm>
        <DescriptionListDetails>Björken 4:12</DescriptionListDetails>
      </DescriptionListItem>
      <DescriptionListItem>
        <DescriptionListTerm>Fee</DescriptionListTerm>
        <DescriptionListDetails>14 820 kr</DescriptionListDetails>
      </DescriptionListItem>
    </DescriptionList>
  )
}
```

#### Default

The facts of a case, stacked: applicant, property, received, handler and fee.

#### Horizontal

Terms in a column beside the values, with dividers. Long values wrap in their own column. Make the list narrower and
each value moves below its term.

#### In a Card

The usual case view: a card with the case facts. Set `--description-list-term-width` to fit the term column to your
terms.

#### Rich Values

Values can hold a status badge, a link and a copy button for the case number. Make the value a flex row
(`className="flex items-center gap-1"`) when it holds a button. Plain links are underlined, so they are not told apart by
colour alone.

#### Two-Column Grid

`columns={2}` shows two pairs per row when the list is wide enough. When a column would get narrower than
`--description-list-column-min` (16rem), the list drops to one column.

### Props


| Prop          | Type                         | Default      | Description                                                        |
| ------------- | ---------------------------- | ------------ | ------------------------------------------------------------------ |
| `orientation` | `'vertical' \| 'horizontal'` | `'vertical'` | Stack the term above the value, or put the terms beside the values |
| `divided`     | `boolean`                    | `false`      | Draw a rule between the pairs                                      |
| `columns`     | `1 \| 2 \| 3 \| 4`           | `1`          | The largest number of pairs per row                                |

#### CSS variables

Set these on `DescriptionList` with `className`, for example `[--description-list-term-width:--spacing(28)]`.

| Variable                         | Default  | Description                                                              |
| -------------------------------- | -------- | ------------------------------------------------------------------------ |
| `--description-list-term-width`  | `10rem`  | Width of the term column in the horizontal layout                        |
| `--description-list-details-min` | `10rem`  | In the horizontal layout, the value moves below the term when it would get narrower than this |
| `--description-list-column-min`  | `16rem`  | The narrowest a grid column may get before the list drops a column       |
| `--description-list-gap`         | `1.5rem` | Space between the columns of the grid                                    |

With `divided`, the list clips its top edge to hide the rule above the first row. To frame the list with a border or
ring, put the frame on a wrapper, or use `divide-y` on a one-column list instead.

### Subcomponents

- `DescriptionList`: the `dl`. Takes `orientation`, `divided`, `columns` and all `dl` attributes
- `DescriptionListItem`: a `div` that wraps one term and its value (or several `dt`/`dd` elements that belong together)
- `DescriptionListTerm`: the term (`dt`), in the muted text colour
- `DescriptionListDetails`: the value (`dd`)

### Accessibility

- The `dl`, `dt` and `dd` elements give screen readers the relationship between each term and its value. Wrap each pair
  in `DescriptionListItem`: it is a `div`, which the HTML standard allows inside a `dl`
- Don't put other elements (icons, separators) directly in `DescriptionListItem`. Put them inside the term or the
  value, and hide decorative icons with `aria-hidden="true"`
- If the term is shown only as an icon, keep a text term for screen readers:
  `<DescriptionListTerm><PhoneIcon aria-hidden="true" /><span className="sr-only">Phone</span></DescriptionListTerm>`
- Plain links in a value are underlined, so they don't rely on colour alone
- Give icon-only buttons in a value, such as a copy button, an `aria-label`, and announce the result (for example
  "Case number copied") in a `role="status"` region
- Both layouts reflow at narrow widths and 400% zoom without horizontal scrolling

### Related Components

- Card: the usual container for case facts
- Badge: status values
- Table: many records with the same fields
- Item: lists of things with a title, description and actions

## Source

File: components/ui/description-list.tsx

```tsx
import type * as React from 'react'
import { cn } from '@/lib/utils'

// The layout is driven by data attributes on the <dl>, so the parts need no React context and work in server components.
// The grid of pairs responds to the list's own width, not the viewport, so it also behaves inside cards and side panels:
// it shows up to `columns` columns, and drops to fewer when a column would be narrower than --description-list-column-min.
function DescriptionList({
	className,
	orientation = 'vertical',
	divided = false,
	columns = 1,
	...props
}: React.ComponentProps<'dl'> & {
	/** `vertical` stacks the term above the value; `horizontal` puts terms in a column beside the values */
	orientation?: 'vertical' | 'horizontal'
	/** Draw a rule between the pairs */
	divided?: boolean
	/** The largest number of pairs per row; fewer are shown when the list is too narrow */
	columns?: 1 | 2 | 3 | 4
}) {
	return (
		<dl
			data-slot="description-list"
			data-orientation={orientation}
			data-divided={divided ? '' : undefined}
			data-columns={columns}
			className={cn(
				'group/description-list grid w-full grid-cols-[repeat(auto-fill,minmax(min(100%,max(var(--description-list-column-min),calc((100%_-_(var(--description-list-columns)_-_1)_*_var(--description-list-gap))_/_var(--description-list-columns)))),1fr))] gap-x-(--description-list-gap) gap-y-4 text-sm [--description-list-column-min:--spacing(64)] [--description-list-columns:1] [--description-list-gap:--spacing(6)] [--description-list-details-min:--spacing(40)] [--description-list-term-width:--spacing(40)] data-[columns=2]:[--description-list-columns:2] data-[columns=3]:[--description-list-columns:3] data-[columns=4]:[--description-list-columns:4]',
				// Dividers: every pair gets a top rule and the clip-path hides the rules of the first row, whatever the number
				// of columns. The clip only trims the top edge, so focus rings at the sides and bottom stay visible.
				'data-divided:gap-y-0 data-divided:[clip-path:inset(1px_-1rem_-1rem_-1rem)]',
				className,
			)}
			{...props}
		/>
	)
}

function DescriptionListItem({ className, ...props }: React.ComponentProps<'div'>) {
	return (
		<div
			data-slot="description-list-item"
			className={cn(
				'flex min-w-0 flex-col gap-1',
				// Horizontal: the term has a fixed width and the value takes the rest. When the value would get narrower than
				// --description-list-details-min (10rem) it wraps below the term, so the pair stays readable on small screens
				// and in narrow panels.
				'group-data-[orientation=horizontal]/description-list:flex-row group-data-[orientation=horizontal]/description-list:flex-wrap group-data-[orientation=horizontal]/description-list:items-baseline group-data-[orientation=horizontal]/description-list:gap-x-4',
				'group-data-divided/description-list:border-t group-data-divided/description-list:py-3',
				className,
			)}
			{...props}
		/>
	)
}

function DescriptionListTerm({ className, ...props }: React.ComponentProps<'dt'>) {
	return (
		<dt
			data-slot="description-list-term"
			className={cn(
				'min-w-0 text-muted-foreground wrap-break-word group-data-[orientation=horizontal]/description-list:w-(--description-list-term-width) group-data-[orientation=horizontal]/description-list:max-w-full group-data-[orientation=horizontal]/description-list:shrink-0',
				className,
			)}
			{...props}
		/>
	)
}

function DescriptionListDetails({ className, ...props }: React.ComponentProps<'dd'>) {
	return (
		<dd
			data-slot="description-list-details"
			className={cn(
				'min-w-0 text-foreground wrap-break-word group-data-[orientation=horizontal]/description-list:min-w-[min(100%,var(--description-list-details-min))] group-data-[orientation=horizontal]/description-list:flex-1 [&_a:not([data-slot])]:underline [&_a:not([data-slot])]:underline-offset-4 [&_a:not([data-slot])]:hover:text-primary',
				className,
			)}
			{...props}
		/>
	)
}

export { DescriptionList, DescriptionListItem, DescriptionListTerm, DescriptionListDetails }
```

---

# Dialog

Modal window with header, footer, title and description, built on Base UI Dialog.

Install: `npx shadcn@latest add https://rdf.dev.360online.com/r/dialog.json`

Import from: `@/components/ui/dialog`

Builds on: button

npm dependencies: @base-ui/react@^1.8.0, lucide-react@^1.48.0

A modal dialog component that overlays content on top of the main view.
Built on top of [Base UI Dialog](https://base-ui.com/react/components/dialog),
it follows WAI-ARIA design patterns and provides a fully accessible dialog experience.

### Features

- Focus management
- Keyboard navigation
- Screen reader support
- Responsive design
- Customizable content
- Animated transitions
- Blurred backdrop overlay
- Built-in close button (toggle with `showCloseButton` on `DialogContent`)
- Optional footer close button (`showCloseButton` on `DialogFooter`)
- Mobile-friendly
- ARIA compliant

### Usage

```tsx
import {
  Dialog,
  DialogTrigger,
  DialogContent,
  DialogHeader,
  DialogFooter,
  DialogTitle,
  DialogDescription,
  DialogClose,
} from '@/components/ui/dialog'
import { Button } from '@/components/ui/button'
import { Field, FieldLabel } from '@/components/ui/field'
import { Input } from '@/components/ui/input'

// Basic usage
export function BasicDialog() {
  return (
    <Dialog>
      <DialogTrigger render={<Button />}>Edit contact details</DialogTrigger>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Contact details</DialogTitle>
          <DialogDescription>
            We use these details to reach you about your cases.
          </DialogDescription>
        </DialogHeader>
        <Field>
          <FieldLabel htmlFor="email">Email</FieldLabel>
          <Input id="email" type="email" defaultValue="anna.lindqvist@example.se" />
        </Field>
        <DialogFooter>
          <DialogClose render={<Button variant="outline" />}>Cancel</DialogClose>
          <Button>Save changes</Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  )
}

// Controlled dialog
export function ControlledDialog() {
  const [open, setOpen] = React.useState(false)

  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogTrigger render={<Button />}>Send supplement</DialogTrigger>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Send supplement to case 2026-04812?</DialogTitle>
        </DialogHeader>
        <DialogFooter>
          <Button variant="outline" onClick={() => setOpen(false)}>
            Cancel
          </Button>
          <Button onClick={() => { sendSupplement(); setOpen(false) }}>
            Send
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  )
}
```

#### Basic Dialog

A form in a dialog for editing a resident's contact details.

#### Controlled Dialog

A confirmation that closes itself after sending, using the controlled `open` state. The page below the button updates when the files are sent.

#### With Custom Content

A case summary with a definition list, a separator and the case officer's contact details.

#### Footer Close Button

The corner close button is hidden with `showCloseButton={false}` on `DialogContent`, and `DialogFooter` renders an outline "Close" button with `showCloseButton`. Here it closes a dialog for sharing a public agenda.

#### Scrollable Content

A privacy notice in a scrollable region, with the confirmation and footer always in view.

### Props


#### Dialog
- `defaultOpen` - The open state when initially rendered
- `open` - The controlled open state
- `onOpenChange` - Event handler for open state changes
- `modal` - Whether the dialog is modal (blocks interactions outside)

#### DialogTrigger
- `render` - Element to render instead of the default `<button>`, e.g. `render={<Button variant="outline" />}`
- `children` - The trigger's content

#### DialogContent
- `children` - Content to display in the dialog
- `className` - Additional CSS classes (default max width is `sm:max-w-sm`; override with e.g. `sm:max-w-lg`)
- `showCloseButton` - Whether to render the close button in the top-right corner (default `true`)
- `initialFocus` / `finalFocus` - Element to focus when the dialog opens / closes

#### DialogClose
- `render` - Element to render instead of the default `<button>`, e.g. `render={<Button variant="outline" />}`
- Closes the dialog when clicked

#### DialogHeader
- `className` - Additional CSS classes
- `children` - Header content

#### DialogFooter
- `className` - Additional CSS classes
- `showCloseButton` - Whether to append an outline "Close" button (default `false`)
- `children` - Footer content

#### DialogTitle
- `className` - Additional CSS classes
- `children` - Title text

#### DialogDescription
- `className` - Additional CSS classes
- `children` - Description text

### Accessibility

The Dialog component follows WAI-ARIA guidelines:

- Uses `role="dialog"` or `role="alertdialog"`
- Manages focus trap within dialog
- Supports keyboard navigation:
  - `Esc`: Close dialog
  - `Tab`: Navigate focusable elements
  - `Shift+Tab`: Navigate focusable elements (reverse)
- Announces dialog title and description
- Provides clear action buttons
- Maintains focus on trigger after closing

### Best Practices

1. Content Organization:
   - Use clear, descriptive titles
   - Keep content focused and concise
   - Provide clear actions
   - Group related information

2. Visual Design:
   - Maintain proper spacing
   - Use consistent styling
   - Consider mobile layouts
   - Ensure readable text

3. Interaction:
   - Provide clear feedback
   - Consider animations
   - Manage focus properly

4. Accessibility:
   - Write descriptive labels
   - Use semantic markup
   - Test with screen readers
   - Verify keyboard navigation

### Related Components

- Alert Dialog
- Sheet
- Drawer
- Popover
- Sheet

## Source

File: components/ui/dialog.tsx

```tsx
'use client'

import { Dialog as DialogPrimitive } from '@base-ui/react/dialog'
import { XIcon } from 'lucide-react'
import * as React from 'react'

import { Button } from '@/components/ui/button'
import { cn } from '@/lib/utils'

function Dialog({ ...props }: DialogPrimitive.Root.Props) {
	return <DialogPrimitive.Root data-slot="dialog" {...props} />
}

function DialogTrigger({ ...props }: DialogPrimitive.Trigger.Props) {
	return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
}

function DialogPortal({ ...props }: DialogPrimitive.Portal.Props) {
	return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
}

function DialogClose({ ...props }: DialogPrimitive.Close.Props) {
	return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
}

function DialogOverlay({ className, ...props }: DialogPrimitive.Backdrop.Props) {
	return (
		<DialogPrimitive.Backdrop
			data-slot="dialog-overlay"
			className={cn(
				'fixed inset-0 isolate z-50 bg-black/50 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0',
				className,
			)}
			{...props}
		/>
	)
}

function DialogContent({
	className,
	children,
	showCloseButton = true,
	...props
}: DialogPrimitive.Popup.Props & {
	showCloseButton?: boolean
}) {
	return (
		<DialogPortal>
			<DialogOverlay />
			<DialogPrimitive.Popup
				data-slot="dialog-content"
				className={cn(
					'fixed top-1/2 left-1/2 z-50 grid max-h-[calc(100dvh-2rem)] w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 overflow-y-auto rounded-xl bg-background p-4 text-sm text-foreground ring-1 ring-border duration-100 outline-none sm:max-w-sm 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',
					className,
				)}
				{...props}
			>
				{children}
				{showCloseButton && (
					<DialogPrimitive.Close
						data-slot="dialog-close"
						render={
							<Button
								variant="ghost"
								className="absolute top-2 right-2 text-muted-foreground active:bg-muted/70"
								size="icon-sm"
							/>
						}
					>
						<XIcon />
						<span className="sr-only">Close</span>
					</DialogPrimitive.Close>
				)}
			</DialogPrimitive.Popup>
		</DialogPortal>
	)
}

function DialogHeader({ className, ...props }: React.ComponentProps<'div'>) {
	return <div data-slot="dialog-header" className={cn('flex flex-col gap-2', className)} {...props} />
}

function DialogFooter({
	className,
	showCloseButton = false,
	children,
	...props
}: React.ComponentProps<'div'> & {
	showCloseButton?: boolean
}) {
	return (
		<div
			data-slot="dialog-footer"
			className={cn(
				'-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t bg-muted/50 p-4 sm:flex-row sm:justify-end',
				className,
			)}
			{...props}
		>
			{children}
			{showCloseButton && <DialogPrimitive.Close render={<Button variant="outline" />}>Close</DialogPrimitive.Close>}
		</div>
	)
}

function DialogTitle({ className, ...props }: DialogPrimitive.Title.Props) {
	return (
		<DialogPrimitive.Title
			data-slot="dialog-title"
			className={cn('font-heading text-base leading-none font-medium', className)}
			{...props}
		/>
	)
}

function DialogDescription({ className, ...props }: DialogPrimitive.Description.Props) {
	return (
		<DialogPrimitive.Description
			data-slot="dialog-description"
			className={cn(
				'text-sm text-muted-foreground *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground',
				className,
			)}
			{...props}
		/>
	)
}

export {
	Dialog,
	DialogClose,
	DialogContent,
	DialogDescription,
	DialogFooter,
	DialogHeader,
	DialogOverlay,
	DialogPortal,
	DialogTitle,
	DialogTrigger,
}
```

---

# Direction

Provider that sets left-to-right or right-to-left direction for its subtree.

Install: `npx shadcn@latest add https://rdf.dev.360online.com/r/direction.json`

Import from: `@/components/ui/direction`

npm dependencies: @base-ui/react@^1.8.0

Provides a reading direction (left-to-right or right-to-left) to every Base UI-based component below it, so that keyboard navigation, submenu placement and animations follow the direction of the document. Use it together with the dir attribute on a wrapping element, and read the current direction with the useDirection hook.

### Features

- DirectionProvider for ltr and rtl
- useDirection hook to read the current direction
- Affects keyboard navigation and positioning in Base UI components
- Accepts either dir or direction as prop

### Usage

```tsx
import { DirectionProvider, useDirection } from '@/components/ui/direction'

export function App({ children }: { children: React.ReactNode }) {
  return (
    <DirectionProvider dir="rtl">
      <div dir="rtl">{children}</div>
    </DirectionProvider>
  )
}

function DirectionLabel() {
  const direction = useDirection()
  return <span>{direction}</span>
}
```

#### Default

A parking permit e-service with tabs and form fields inside a DirectionProvider. Switch dir with the controls; in rtl the content is shown in Arabic.

#### Right To Left

The same e-service in right-to-left mode, in Arabic. Arrow keys in the tabs follow the reading direction. The registration number keeps `dir="ltr"`.

#### Side By Side

English (ltr) and Arabic (rtl) rendered next to each other.

### Accessibility

- Set the dir attribute on the html element or a wrapper so the browser renders text in the right direction
- DirectionProvider only informs components; it does not change text layout by itself
- Arrow key behaviour in tabs, menus and sliders is mirrored in rtl mode
- Set the lang attribute to match the language of the content

## Source

File: components/ui/direction.tsx

```tsx
'use client'

import { DirectionProvider as DirectionProviderPrimitive, type TextDirection } from '@base-ui/react/direction-provider'
import type * as React from 'react'

function DirectionProvider({
	dir,
	direction,
	children,
}: Readonly<{
	/** The reading direction. Alias of `direction`. */
	dir?: TextDirection
	/** The reading direction (default `'ltr'`). */
	direction?: TextDirection
	children?: React.ReactNode
}>) {
	return <DirectionProviderPrimitive direction={direction ?? dir}>{children}</DirectionProviderPrimitive>
}

export { useDirection } from '@base-ui/react/direction-provider'
export { DirectionProvider }
```

---

# Drawer

Panel that slides in from an edge of the screen and can be swiped closed, built on Base UI Drawer.

Install: `npx shadcn@latest add https://rdf.dev.360online.com/r/drawer.json`

Import from: `@/components/ui/drawer`

npm dependencies: @base-ui/react@^1.8.0

A drawer panel built on [Base UI Drawer](https://base-ui.com/react/components/drawer) that slides in from any edge of the screen. It supports swipe-to-dismiss and is well suited to mobile-first flows such as quick forms, order options and case details.

### Features

- Opens from the bottom, top, left or right (`swipeDirection` on `Drawer`)
- Swipe to dismiss, with an optional grab handle (`showSwipeHandle`)
- Optional snap points (`snapPoints`)
- Content scrolls when it is taller than the drawer
- Header, footer, title and description slots
- Focus is trapped while open
- Closes on Escape or overlay click

### Usage

```tsx
import { Button } from '@/components/ui/button'
import {
  Drawer,
  DrawerClose,
  DrawerContent,
  DrawerDescription,
  DrawerFooter,
  DrawerHeader,
  DrawerTitle,
  DrawerTrigger,
} from '@/components/ui/drawer'

export function CopiesDrawer() {
  return (
    <Drawer>
      <DrawerTrigger render={<Button variant="outline" />}>Order certified copies</DrawerTrigger>
      <DrawerContent>
        <DrawerHeader>
          <DrawerTitle>Certified copies</DrawerTitle>
          <DrawerDescription>Choose how many copies you need.</DrawerDescription>
        </DrawerHeader>
        <DrawerFooter>
          <Button>Place order</Button>
          <DrawerClose render={<Button variant="outline" />}>Cancel</DrawerClose>
        </DrawerFooter>
      </DrawerContent>
    </Drawer>
  )
}
```

#### Default

A bottom drawer for ordering certified copies of a decision, with a counter, a running total and actions.

#### Directions

Case details in drawers opening from each edge. Set `swipeDirection` to the direction the drawer is swiped away:
`down` (default) opens from the bottom, `up` from the top, and `left` / `right` from the sides.

```tsx
<Drawer swipeDirection="right">…</Drawer>
```

#### With Form

A side drawer with a contact details form built from `Field` components.

#### Scrollable Content

Terms for the e-services that scroll inside the drawer while the header and footer stay put.

### Props


#### Drawer
- `swipeDirection` - `'down' | 'up' | 'left' | 'right'` (default `'down'`). Replaces Vaul's `direction` (`bottom` → `down`, `top` → `up`).
- `showSwipeHandle` - Show a grab handle on the edge the drawer is swiped from (default `false`)
- `snapPoints` / `snapPoint` / `onSnapPointChange` - Snap the drawer to fractions of the viewport height or fixed sizes
- `modal` - `true` (default), `false` or `'trap-focus'`
- `open` / `defaultOpen` / `onOpenChange` - Open state

#### DrawerTrigger / DrawerClose
- `render` - Element to render instead of the default `<button>`, e.g. `render={<Button variant="outline" />}`

#### DrawerContent
- `className` - Classes for the drawer panel. Children are placed in a scrollable column.

### Accessibility

- Rendered as a dialog with focus trapped inside while open
- DrawerTitle and DrawerDescription are announced when the drawer opens
- Escape closes the drawer and focus returns to the trigger
- Always provide a visible close button in addition to swipe gestures

## Source

File: components/ui/drawer.tsx

```tsx
'use client'

import { Drawer as DrawerPrimitive } from '@base-ui/react/drawer'
import * as React from 'react'
import { cn } from '@/lib/utils'

type DrawerContextProps = {
	hasSnapPoints: boolean
	modal: DrawerPrimitive.Root.Props['modal']
	showSwipeHandle: boolean
	swipeDirection: NonNullable<DrawerPrimitive.Root.Props['swipeDirection']>
}

const DrawerContext = React.createContext<DrawerContextProps | null>(null)

function useDrawer() {
	const context = React.useContext(DrawerContext)

	if (!context) {
		throw new Error('useDrawer must be used within a Drawer.')
	}

	return context
}

function Drawer({
	modal = true,
	showSwipeHandle = false,
	snapPoints,
	swipeDirection = 'down',
	...props
}: DrawerPrimitive.Root.Props & {
	showSwipeHandle?: boolean
}) {
	const hasSnapPoints = snapPoints != null && snapPoints.length > 0
	const contextValue = React.useMemo(
		() => ({ hasSnapPoints, modal, showSwipeHandle, swipeDirection }),
		[hasSnapPoints, modal, showSwipeHandle, swipeDirection],
	)

	return (
		<DrawerContext.Provider value={contextValue}>
			<DrawerPrimitive.Root
				data-slot="drawer"
				modal={modal}
				snapPoints={snapPoints}
				swipeDirection={swipeDirection}
				{...props}
			/>
		</DrawerContext.Provider>
	)
}

function DrawerTrigger({ ...props }: DrawerPrimitive.Trigger.Props) {
	return <DrawerPrimitive.Trigger data-slot="drawer-trigger" {...props} />
}

function DrawerPortal({ ...props }: DrawerPrimitive.Portal.Props) {
	return <DrawerPrimitive.Portal data-slot="drawer-portal" {...props} />
}

function DrawerClose({ ...props }: DrawerPrimitive.Close.Props) {
	return <DrawerPrimitive.Close data-slot="drawer-close" {...props} />
}

function DrawerOverlay({ className, ...props }: DrawerPrimitive.Backdrop.Props) {
	return (
		<DrawerPrimitive.Backdrop
			data-slot="drawer-overlay"
			className={cn(
				'fixed inset-0 z-50 min-h-dvh bg-black/10 opacity-[max(var(--drawer-overlay-min-opacity,0),calc(1-var(--drawer-swipe-progress)))] transition-opacity duration-450 ease-[cubic-bezier(0.32,0.72,0,1)] select-none data-ending-style:pointer-events-none data-ending-style:opacity-0 data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-snap-points:[--drawer-overlay-min-opacity:0.5] data-starting-style:opacity-0 data-swiping:duration-0 supports-backdrop-filter:backdrop-blur-xs supports-[-webkit-touch-callout:none]:absolute',
				className,
			)}
			{...props}
		/>
	)
}

function DrawerSwipeHandle({ className, ...props }: React.ComponentProps<'div'>) {
	return (
		<div
			data-slot="drawer-swipe-handle"
			aria-hidden="true"
			className={cn(
				'relative z-10 flex shrink-0 cursor-grab transition-opacity duration-200 group-data-nested-drawer-open/drawer-popup:opacity-0 group-data-nested-drawer-swiping/drawer-popup:opacity-100 group-data-[swipe-axis=x]/drawer-popup:h-full group-data-[swipe-axis=x]/drawer-popup:w-3 group-data-[swipe-axis=x]/drawer-popup:items-center group-data-[swipe-axis=y]/drawer-popup:h-3 group-data-[swipe-axis=y]/drawer-popup:w-full group-data-[swipe-axis=y]/drawer-popup:justify-center group-data-[swipe-direction=down]/drawer-popup:items-end group-data-[swipe-direction=left]/drawer-popup:order-last group-data-[swipe-direction=left]/drawer-popup:justify-start group-data-[swipe-direction=right]/drawer-popup:justify-end group-data-[swipe-direction=up]/drawer-popup:order-last group-data-[swipe-direction=up]/drawer-popup:items-start after:block after:shrink-0 after:rounded-full after:bg-muted group-data-[swipe-axis=x]/drawer-popup:after:h-24 group-data-[swipe-axis=x]/drawer-popup:after:w-1 group-data-[swipe-axis=y]/drawer-popup:after:h-1 group-data-[swipe-axis=y]/drawer-popup:after:w-24 active:cursor-grabbing',
				className,
			)}
			{...props}
		/>
	)
}

function DrawerContent({ className, children, ...props }: DrawerPrimitive.Popup.Props) {
	const { hasSnapPoints, modal, showSwipeHandle, swipeDirection } = useDrawer()
	const swipeAxis = swipeDirection === 'down' || swipeDirection === 'up' ? 'y' : 'x'

	return (
		<DrawerPortal data-slot="drawer-portal">
			{modal === true && <DrawerOverlay data-snap-points={hasSnapPoints ? '' : undefined} />}
			<DrawerPrimitive.Viewport
				data-slot="drawer-viewport"
				data-modal={modal}
				className="pointer-events-none fixed inset-0 z-50 select-none data-[modal=true]:pointer-events-auto"
			>
				<DrawerPrimitive.Popup
					data-slot="drawer-popup"
					data-swipe-axis={swipeAxis}
					data-snap-points={hasSnapPoints ? '' : undefined}
					className={cn(
						// Base.
						'group/drawer-popup pointer-events-auto fixed z-50 m-(--drawer-inset,0px) flex h-(--drawer-content-height) max-h-(--drawer-content-max-height,none) min-h-0 w-(--drawer-content-width,auto) transform-[translate3d(var(--translate-x,0px),var(--translate-y,0px),0)_scale(var(--stack-scale))] flex-col bg-popover text-sm text-popover-foreground transition-[transform,height,opacity,filter] duration-450 ease-[cubic-bezier(0.22,1,0.36,1)] will-change-transform outline-none select-none [interpolate-size:allow-keywords] data-[swipe-direction=down]:rounded-t-xl data-[swipe-direction=down]:border-t data-[swipe-direction=left]:rounded-r-xl data-[swipe-direction=left]:border-r data-[swipe-direction=right]:rounded-l-xl data-[swipe-direction=right]:border-l data-[swipe-direction=up]:rounded-b-xl data-[swipe-direction=up]:border-b',
						// Nested.
						'data-nested-drawer-open:overflow-hidden data-nested-drawer-open:brightness-95',
						// Bleed.
						'after:pointer-events-none after:absolute after:bg-(--drawer-bleed-background,var(--color-popover)) data-[swipe-axis=x]:after:inset-y-0 data-[swipe-axis=x]:after:w-(--bleed) data-[swipe-axis=y]:after:inset-x-0 data-[swipe-axis=y]:after:h-(--bleed) data-[swipe-direction=down]:after:top-full data-[swipe-direction=left]:after:right-full data-[swipe-direction=right]:after:left-full data-[swipe-direction=up]:after:bottom-full',
						// Sizing.
						'[--drawer-content-height:var(--drawer-height,auto)] data-[swipe-axis=x]:[--drawer-content-width:75%] data-[swipe-axis=y]:[--drawer-content-max-height:calc(100dvh-6rem)] data-[swipe-axis=y]:data-snap-points:[--drawer-content-height:100dvh] data-[swipe-axis=x]:sm:[--drawer-content-width:24rem]',
						// Stack.
						'[--bleed:3rem] [--peek:1rem] [--stack-height:var(--drawer-frontmost-height,var(--drawer-height,0px))] [--stack-peek-offset:max(0px,calc((var(--nested-drawers)-var(--stack-progress))*var(--peek)))] [--stack-progress:clamp(0,var(--drawer-swipe-progress),1)] [--stack-scale-base:max(0,calc(1-(var(--nested-drawers)*var(--stack-step))))] [--stack-scale:clamp(0,calc(var(--stack-scale-base)+(var(--stack-step)*var(--stack-progress))),1)] [--stack-shrink:calc(1-var(--stack-scale))] [--stack-step:0.05]',
						// Transitions.
						'data-ending-style:transform-(--closed-transform) data-ending-style:opacity-[0.9999] data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-nested-drawer-swiping:duration-0 data-ending-style:data-nested-drawer-swiping:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-starting-style:transform-(--closed-transform) data-swiping:duration-0 data-ending-style:data-swiping:duration-[calc(var(--drawer-swipe-strength)*400ms)]',
						// Axis: y.
						'data-[swipe-axis=y]:inset-x-0 data-[swipe-axis=y]:data-nested-drawer-open:h-(--stack-height)',
						// Axis: x.
						'data-[swipe-axis=x]:inset-y-0 data-[swipe-axis=x]:flex-row',
						// Direction: down.
						'data-[swipe-direction=down]:bottom-0 data-[swipe-direction=down]:origin-bottom data-[swipe-direction=down]:[--closed-transform:translate3d(0,calc(100%+var(--drawer-inset,0px)+2px),0)] data-[swipe-direction=down]:[--translate-y:calc(var(--drawer-snap-point-offset,0px)+var(--drawer-swipe-movement-y)-var(--stack-peek-offset)-(var(--stack-shrink)*var(--stack-height)))]',
						// Direction: up.
						'data-[swipe-direction=up]:top-0 data-[swipe-direction=up]:origin-top data-[swipe-direction=up]:[--closed-transform:translate3d(0,calc(-100%-var(--drawer-inset,0px)-2px),0)] data-[swipe-direction=up]:[--translate-y:calc(var(--drawer-snap-point-offset,0px)+var(--drawer-swipe-movement-y)+var(--stack-peek-offset)+(var(--stack-shrink)*var(--stack-height)))]',
						// Direction: left.
						'data-[swipe-direction=left]:left-0 data-[swipe-direction=left]:origin-left data-[swipe-direction=left]:[--closed-transform:translate3d(calc(-100%-var(--drawer-inset,0px)-2px),0,0)] data-[swipe-direction=left]:[--translate-x:calc(var(--drawer-swipe-movement-x)+var(--stack-peek-offset)+(var(--stack-shrink)*100%))]',
						// Direction: right.
						'data-[swipe-direction=right]:right-0 data-[swipe-direction=right]:origin-right data-[swipe-direction=right]:[--closed-transform:translate3d(calc(100%+var(--drawer-inset,0px)+2px),0,0)] data-[swipe-direction=right]:[--translate-x:calc(var(--drawer-swipe-movement-x)-var(--stack-peek-offset)-(var(--stack-shrink)*100%))]',
						className,
					)}
					{...props}
				>
					{showSwipeHandle && <DrawerSwipeHandle />}
					<DrawerPrimitive.Content
						data-slot="drawer-content"
						className={cn(
							'flex min-h-0 flex-1 flex-col overflow-y-auto overscroll-contain rounded-[inherit] transition-opacity duration-300 ease-[cubic-bezier(0.45,1.005,0,1.005)] select-text group-data-nested-drawer-open/drawer-popup:opacity-0 group-data-nested-drawer-swiping/drawer-popup:opacity-100 group-data-swiping/drawer-popup:select-none',
						)}
					>
						{children}
					</DrawerPrimitive.Content>
				</DrawerPrimitive.Popup>
			</DrawerPrimitive.Viewport>
		</DrawerPortal>
	)
}

function DrawerHeader({ className, ...props }: React.ComponentProps<'div'>) {
	return (
		<div
			data-slot="drawer-header"
			className={cn(
				'flex shrink-0 flex-col gap-0.5 p-4 pb-0 group-data-[swipe-axis=y]/drawer-popup:text-center md:gap-0.5 md:text-left',
				className,
			)}
			{...props}
		/>
	)
}

function DrawerFooter({ className, ...props }: React.ComponentProps<'div'>) {
	return (
		<div
			data-slot="drawer-footer"
			className={cn('mt-auto flex shrink-0 flex-col gap-2 p-4 pt-0', className)}
			{...props}
		/>
	)
}

function DrawerTitle({ className, ...props }: DrawerPrimitive.Title.Props) {
	return (
		<DrawerPrimitive.Title
			data-slot="drawer-title"
			className={cn('font-heading text-base font-medium text-foreground', className)}
			{...props}
		/>
	)
}

function DrawerDescription({ className, ...props }: DrawerPrimitive.Description.Props) {
	return (
		<DrawerPrimitive.Description
			data-slot="drawer-description"
			className={cn('text-sm text-balance text-muted-foreground', className)}
			{...props}
		/>
	)
}

export {
	Drawer,
	DrawerPortal,
	DrawerOverlay,
	DrawerSwipeHandle,
	DrawerTrigger,
	DrawerClose,
	DrawerContent,
	DrawerHeader,
	DrawerFooter,
	DrawerTitle,
	DrawerDescription,
}
```

---

# Dropdown Menu

Menu triggered by a button, with items, groups, checkboxes, radio items and submenus.

Install: `npx shadcn@latest add https://rdf.dev.360online.com/r/dropdown-menu.json`

Import from: `@/components/ui/dropdown-menu`

npm dependencies: @base-ui/react@^1.8.0, lucide-react@^1.48.0

A dropdown menu component that displays a menu when triggered by a button.
Built on top of [Base UI Menu](https://base-ui.com/react/components/menu),
it follows WAI-ARIA design patterns and provides a fully accessible dropdown menu experience.

### Features

- Keyboard navigation
- Type-ahead support
- Screen reader support
- Submenu support
- Checkbox items
- Radio group items
- Keyboard shortcuts (`DropdownMenuShortcut`)
- Destructive item variant (`variant="destructive"`)
- Inset items, labels, checkbox and radio items (`inset`)
- Icons are sized automatically (`size-4`), no extra classes needed
- Content is as wide as its longest item, never narrower than the trigger or 8rem and never wider than the space available, and aligns to `start`

### Usage

```tsx
import {
  DropdownMenu,
  DropdownMenuTrigger,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuShortcut,
  DropdownMenuGroup,
  DropdownMenuSub,
  DropdownMenuSubContent,
  DropdownMenuSubTrigger,
  DropdownMenuRadioGroup,
  DropdownMenuRadioItem,
  DropdownMenuCheckboxItem,
} from '@/components/ui/dropdown-menu'
import { Button } from '@/components/ui/button'
import { SettingsIcon, Trash2Icon, UserIcon } from 'lucide-react'

// Basic usage
export function BasicDropdownMenu() {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger render={<Button variant="ghost" />}>Ingrid Hansen</DropdownMenuTrigger>
      <DropdownMenuContent className="w-60">
        <DropdownMenuGroup>
          <DropdownMenuLabel>My account</DropdownMenuLabel>
          <DropdownMenuItem>
            <UserIcon />
            My profile
            <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
          </DropdownMenuItem>
          <DropdownMenuItem>
            <SettingsIcon />
            Settings
            <DropdownMenuShortcut>⌘,</DropdownMenuShortcut>
          </DropdownMenuItem>
        </DropdownMenuGroup>
        <DropdownMenuSeparator />
        <DropdownMenuItem variant="destructive">
          <Trash2Icon />
          Remove delegation
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  )
}

// With submenu
export function DropdownMenuWithSubmenu() {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger render={<Button />}>New</DropdownMenuTrigger>
      <DropdownMenuContent>
        <DropdownMenuItem>Case</DropdownMenuItem>
        <DropdownMenuSub>
          <DropdownMenuSubTrigger>Document from template</DropdownMenuSubTrigger>
          <DropdownMenuSubContent>
            <DropdownMenuItem>Decision to grant</DropdownMenuItem>
            <DropdownMenuItem>Neighbour notice</DropdownMenuItem>
          </DropdownMenuSubContent>
        </DropdownMenuSub>
      </DropdownMenuContent>
    </DropdownMenu>
  )
}

// With checkboxes
export function DropdownMenuWithCheckboxes() {
  const [checked, setChecked] = React.useState(true)

  return (
    <DropdownMenu>
      <DropdownMenuTrigger render={<Button variant="outline" />}>Columns</DropdownMenuTrigger>
      <DropdownMenuContent>
        <DropdownMenuCheckboxItem
          checked={checked}
          onCheckedChange={setChecked}
        >
          Case officer
        </DropdownMenuCheckboxItem>
      </DropdownMenuContent>
    </DropdownMenu>
  )
}
```

#### Basic Dropdown Menu

An account menu for a case officer, with icons and keyboard shortcuts.

#### With Submenu

A "New" menu with nested submenus for document templates and sharing.

#### With Checkboxes

Checkbox items that choose which columns the case list shows. Checkbox and radio items keep the menu open by default; pass `closeOnClick` to close it on selection.

#### With Radio Items

Radio items for the sort order. The trigger shows the current choice.

#### Destructive and Disabled Items

Use `variant="destructive"` for dangerous actions and `disabled` to make an item non-interactive. Here the menu sits in an `Item` for a document.

#### Content Width

Without a width class the menu is sized by its content and is at least as wide as the trigger. A menu on a wide trigger
lines up with it, and a menu opened from an icon button grows to fit its labels instead of wrapping them. Set a width
with `className`, such as `w-56`, when you want a fixed size.

#### Inset

Use `inset` to align items without an icon with items that have one.

#### Disabled

A dropdown menu showing disabled states of item, radio item, checkbox item and item in submenu.

### Props


#### DropdownMenu
- `defaultOpen` - The open state when initially rendered
- `open` - The controlled open state
- `onOpenChange` - Event handler for open state changes
- `modal` - Whether the menu is modal (blocks interactions outside)

#### DropdownMenuTrigger
- `render` - Render the trigger as another element, e.g. `render={<Button variant="outline" />}`
- `children` - The content of the trigger

#### DropdownMenuContent
- `children` - Content to display in the menu
- `className` - Additional CSS classes (the content is sized by its items and is at least as wide as the trigger; set a fixed width with e.g. `w-56`)
- `sideOffset` - Distance from trigger (default `4`)
- `align` - Alignment relative to trigger (default `'start'`)
- `side` - Side of the trigger to open on (default `'bottom'`)

#### DropdownMenuItem
- `variant` - `'default' | 'destructive'` (default `'default'`)
- `inset` - Whether to indent the item
- `disabled` - Whether the item is disabled
- `onClick` - Event handler for selection
- `closeOnClick` - Whether clicking the item closes the menu (default `true`)
- `children` - Item content

#### DropdownMenuCheckboxItem
- `checked` - The checked state (a check icon is shown on the right)
- `onCheckedChange` - Event handler for checked state changes
- `closeOnClick` - Whether clicking the item closes the menu (default `false`)
- `inset` - Whether to indent the item
- `disabled` - Whether the item is disabled
- `children` - Item content

#### DropdownMenuRadioItem
- `value` - The value of the radio item (the selected item shows a check icon on the right)
- `inset` - Whether to indent the item
- `disabled` - Whether the item is disabled
- `children` - Item content

#### DropdownMenuLabel
- `inset` - Whether to indent the label
- `children` - Label content

A label names its group, so it must be placed inside a `DropdownMenuGroup` or `DropdownMenuRadioGroup`.

#### DropdownMenuSubTrigger
- `inset` - Whether to indent the sub trigger
- `children` - Trigger content (a chevron is appended automatically)

#### DropdownMenuSeparator
- `className` - Additional CSS classes

#### DropdownMenuShortcut
- `children` - Shortcut text
- `className` - Additional CSS classes

### Accessibility

The DropdownMenu component follows WAI-ARIA guidelines:

- Uses proper ARIA roles (`menu`, `menuitem`, `menuitemcheckbox`, `menuitemradio`)
- Supports keyboard navigation:
  - `Space/Enter`: Select item
  - `↑/↓`: Navigate items
  - `→`: Open submenu
  - `←`: Close submenu
  - `Esc`: Close menu
- Announces menu state changes
- Maintains focus management
- Provides visual feedback for interaction states

### Best Practices

1. Menu Structure:
   - Group related items
   - Use clear labels
   - Keep items concise
   - Provide helpful shortcuts

2. Visual Design:
   - Maintain consistent spacing
   - Use clear visual hierarchy
   - Provide feedback for actions
   - Consider mobile interactions

3. Interaction:
   - Manage focus properly
   - Consider animations
   - Test edge cases

4. Accessibility:
   - Write descriptive labels
   - Use semantic markup
   - Test with screen readers
   - Verify keyboard navigation

### Related Components

- Context Menu
- Menubar
- Select
- Command

## Source

File: components/ui/dropdown-menu.tsx

```tsx
'use client'

import { Menu as MenuPrimitive } from '@base-ui/react/menu'
import { CheckIcon, ChevronRightIcon } from 'lucide-react'
import * as React from 'react'
import { cn } from '@/lib/utils'

function DropdownMenu({ ...props }: MenuPrimitive.Root.Props) {
	return <MenuPrimitive.Root data-slot="dropdown-menu" {...props} />
}

function DropdownMenuPortal({ ...props }: MenuPrimitive.Portal.Props) {
	return <MenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
}

function DropdownMenuTrigger({ ...props }: MenuPrimitive.Trigger.Props) {
	return <MenuPrimitive.Trigger data-slot="dropdown-menu-trigger" {...props} />
}

function DropdownMenuContent({
	align = 'start',
	alignOffset = 0,
	side = 'bottom',
	sideOffset = 4,
	className,
	...props
}: MenuPrimitive.Popup.Props & Pick<MenuPrimitive.Positioner.Props, 'align' | 'alignOffset' | 'side' | 'sideOffset'>) {
	return (
		<MenuPrimitive.Portal>
			<MenuPrimitive.Positioner
				className="isolate z-50 outline-none"
				align={align}
				alignOffset={alignOffset}
				side={side}
				sideOffset={sideOffset}
			>
				<MenuPrimitive.Popup
					data-slot="dropdown-menu-content"
					className={cn(
						'z-50 max-h-(--available-height) w-max max-w-(--available-width) min-w-[max(8rem,var(--anchor-width))] origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-border duration-100 outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-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:overflow-hidden data-closed:fade-out-0 data-closed:zoom-out-95',
						className,
					)}
					{...props}
				/>
			</MenuPrimitive.Positioner>
		</MenuPrimitive.Portal>
	)
}

function DropdownMenuGroup({ ...props }: MenuPrimitive.Group.Props) {
	return <MenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
}

function DropdownMenuLabel({
	className,
	inset,
	...props
}: MenuPrimitive.GroupLabel.Props & {
	inset?: boolean
}) {
	return (
		<MenuPrimitive.GroupLabel
			data-slot="dropdown-menu-label"
			data-inset={inset}
			className={cn('px-1.5 py-1 text-xs font-medium data-inset:pl-7', className)}
			{...props}
		/>
	)
}

function DropdownMenuItem({
	className,
	inset,
	variant = 'default',
	...props
}: MenuPrimitive.Item.Props & {
	inset?: boolean
	variant?: 'default' | 'destructive'
}) {
	return (
		<MenuPrimitive.Item
			data-slot="dropdown-menu-item"
			data-inset={inset}
			data-variant={variant}
			className={cn(
				"group/dropdown-menu-item relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:*:[svg]:!text-accent-foreground data-inset:pl-7 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground data-[variant=destructive]:*:[svg]:!text-destructive",
				className,
			)}
			{...props}
		/>
	)
}

function DropdownMenuSub({ ...props }: MenuPrimitive.SubmenuRoot.Props) {
	return <MenuPrimitive.SubmenuRoot data-slot="dropdown-menu-sub" {...props} />
}

function DropdownMenuSubTrigger({
	className,
	inset,
	children,
	...props
}: MenuPrimitive.SubmenuTrigger.Props & {
	inset?: boolean
}) {
	return (
		<MenuPrimitive.SubmenuTrigger
			data-slot="dropdown-menu-sub-trigger"
			data-inset={inset}
			className={cn(
				"flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-7 data-popup-open:bg-accent data-popup-open:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
				className,
			)}
			{...props}
		>
			{children}
			<ChevronRightIcon className="ml-auto" aria-hidden="true" />
		</MenuPrimitive.SubmenuTrigger>
	)
}

function DropdownMenuSubContent({
	align = 'start',
	alignOffset = -3,
	side = 'right',
	sideOffset = 0,
	className,
	...props
}: React.ComponentProps<typeof DropdownMenuContent>) {
	return (
		<DropdownMenuContent
			data-slot="dropdown-menu-sub-content"
			className={cn(
				'w-auto min-w-[96px] rounded-lg bg-popover p-1 text-popover-foreground shadow-lg ring-1 ring-border duration-100 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',
				className,
			)}
			align={align}
			alignOffset={alignOffset}
			side={side}
			sideOffset={sideOffset}
			{...props}
		/>
	)
}

function DropdownMenuCheckboxItem({
	className,
	children,
	checked,
	inset,
	...props
}: MenuPrimitive.CheckboxItem.Props & {
	inset?: boolean
}) {
	return (
		<MenuPrimitive.CheckboxItem
			data-slot="dropdown-menu-checkbox-item"
			data-inset={inset}
			className={cn(
				"relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
				className,
			)}
			checked={checked}
			{...props}
		>
			<span
				className="pointer-events-none absolute right-2 flex items-center justify-center"
				data-slot="dropdown-menu-checkbox-item-indicator"
			>
				<MenuPrimitive.CheckboxItemIndicator>
					<CheckIcon aria-hidden="true" />
				</MenuPrimitive.CheckboxItemIndicator>
			</span>
			{children}
		</MenuPrimitive.CheckboxItem>
	)
}

function DropdownMenuRadioGroup({ ...props }: MenuPrimitive.RadioGroup.Props) {
	return <MenuPrimitive.RadioGroup data-slot="dropdown-menu-radio-group" {...props} />
}

function DropdownMenuRadioItem({
	className,
	children,
	inset,
	...props
}: MenuPrimitive.RadioItem.Props & {
	inset?: boolean
}) {
	return (
		<MenuPrimitive.RadioItem
			data-slot="dropdown-menu-radio-item"
			data-inset={inset}
			className={cn(
				"relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
				className,
			)}
			{...props}
		>
			<span
				className="pointer-events-none absolute right-2 flex items-center justify-center"
				data-slot="dropdown-menu-radio-item-indicator"
			>
				<MenuPrimitive.RadioItemIndicator>
					<CheckIcon aria-hidden="true" />
				</MenuPrimitive.RadioItemIndicator>
			</span>
			{children}
		</MenuPrimitive.RadioItem>
	)
}

function DropdownMenuSeparator({ className, ...props }: MenuPrimitive.Separator.Props) {
	return (
		<MenuPrimitive.Separator
			data-slot="dropdown-menu-separator"
			className={cn('-mx-1 my-1 h-px bg-border', className)}
			{...props}
		/>
	)
}

function DropdownMenuShortcut({ className, ...props }: React.ComponentProps<'span'>) {
	return (
		<span
			data-slot="dropdown-menu-shortcut"
			className={cn('ml-auto text-xs tracking-widest text-muted-foreground', className)}
			{...props}
		/>
	)
}

export {
	DropdownMenu,
	DropdownMenuPortal,
	DropdownMenuTrigger,
	DropdownMenuContent,
	DropdownMenuGroup,
	DropdownMenuLabel,
	DropdownMenuItem,
	DropdownMenuCheckboxItem,
	DropdownMenuRadioGroup,
	DropdownMenuRadioItem,
	DropdownMenuSeparator,
	DropdownMenuShortcut,
	DropdownMenuSub,
	DropdownMenuSubTrigger,
	DropdownMenuSubContent,
}
```

---

# Empty

Empty state with icon, title, description and actions.

Install: `npx shadcn@latest add https://rdf.dev.360online.com/r/empty.json`

Import from: `@/components/ui/empty`

npm dependencies: class-variance-authority@^0.7.1

Displays an empty state, for example when a list has no results, an inbox is empty or a page cannot be found. It combines a header with media, title and description with optional content such as actions or a search field.

### Features

- Header with icon, avatar or custom media
- Icon media variant with a muted background
- Title and description with link styling
- Content area for actions, inputs or links
- Easy to outline or tint with utility classes

### Usage

```tsx
import { Button } from '@/components/ui/button'
import { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from '@/components/ui/empty'
import { FolderOpenIcon } from 'lucide-react'

export function NoCases() {
  return (
    <Empty>
      <EmptyHeader>
        <EmptyMedia variant="icon">
          <FolderOpenIcon />
        </EmptyMedia>
        <EmptyTitle>No cases yet</EmptyTitle>
        <EmptyDescription>Register a new case, or import one from the archive.</EmptyDescription>
      </EmptyHeader>
      <EmptyContent>
        <Button>Register case</Button>
      </EmptyContent>
    </Empty>
  )
}
```

#### Default

An empty case list with primary and secondary actions and a help link.

#### Outline

An outlined empty inbox. Add `border` to show the dashed outline.

#### Background

A tinted background (`bg-muted/40`) for an archive search without results.

#### With Avatar

Using an avatar as media when the case officer is away.

#### With Search

A not-found page with a search field.

#### In a Card

An empty state inside a `Card`, with smaller padding.

### Accessibility

- Media is decorative; keep the essential message in the title and description
- Use a real heading element inside EmptyTitle via children if the empty state is a page section
- Actions are regular buttons and links and keep their keyboard behaviour
- Announce dynamically appearing empty states (e.g. after filtering) with a live region if needed

## Source

File: components/ui/empty.tsx

```tsx
import { cva, type VariantProps } from 'class-variance-authority'
import { cn } from '@/lib/utils'

function Empty({ className, ...props }: React.ComponentProps<'div'>) {
	return (
		<div
			data-slot="empty"
			className={cn(
				'flex w-full min-w-0 flex-1 flex-col items-center justify-center gap-4 rounded-xl border-dashed p-6 text-center text-balance',
				className,
			)}
			{...props}
		/>
	)
}

function EmptyHeader({ className, ...props }: React.ComponentProps<'div'>) {
	return (
		<div data-slot="empty-header" className={cn('flex max-w-sm flex-col items-center gap-2', className)} {...props} />
	)
}

const emptyMediaVariants = cva(
	'mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0',
	{
		variants: {
			variant: {
				default: 'bg-transparent',
				icon:
					"flex size-8 shrink-0 items-center justify-center rounded-lg bg-muted text-foreground [&_svg:not([class*='size-'])]:size-4",
			},
		},
		defaultVariants: {
			variant: 'default',
		},
	},
)

function EmptyMedia({
	className,
	variant = 'default',
	...props
}: React.ComponentProps<'div'> & VariantProps<typeof emptyMediaVariants>) {
	return (
		<div
			data-slot="empty-icon"
			data-variant={variant}
			className={cn(emptyMediaVariants({ variant, className }))}
			{...props}
		/>
	)
}

function EmptyTitle({
	className,
	as: Title = 'div',
	...props
}: React.ComponentProps<'div'> & {
	/** Render a heading (`h1`–`h6`) when the empty state needs a place in the page's heading outline, e.g. a 404 page */
	as?: 'div' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
}) {
	return (
		<Title
			data-slot="empty-title"
			className={cn('font-heading text-sm font-medium tracking-tight', className)}
			{...props}
		/>
	)
}

function EmptyDescription({ className, ...props }: React.ComponentProps<'p'>) {
	return (
		<div
			data-slot="empty-description"
			className={cn(
				'text-sm/relaxed text-muted-foreground [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary',
				className,
			)}
			{...props}
		/>
	)
}

function EmptyContent({ className, ...props }: React.ComponentProps<'div'>) {
	return (
		<div
			data-slot="empty-content"
			className={cn('flex w-full max-w-sm min-w-0 flex-col items-center gap-2.5 text-sm text-balance', className)}
			{...props}
		/>
	)
}

export { Empty, EmptyHeader, EmptyTitle, EmptyDescription, EmptyContent, EmptyMedia }
```

---

# Field

Accessible form field layout: label, control, description and error, with horizontal and vertical orientations.

Install: `npx shadcn@latest add https://rdf.dev.360online.com/r/field.json`

Import from: `@/components/ui/field`

Builds on: label, separator

npm dependencies: class-variance-authority@^0.7.1

Combines labels, controls and help text to compose accessible form fields and grouped inputs. Field supports vertical, horizontal and responsive layouts, while FieldSet and FieldLegend group related fields semantically. It works with any control, such as inputs, selects, checkboxes, radio groups, switches and sliders.

### Features

- Vertical, horizontal and responsive (container query) orientation
- FieldSet and FieldLegend for semantic grouping
- FieldDescription for help text
- FieldError accepting children or an errors array
- FieldSeparator with optional label
- Choice cards by wrapping a Field in FieldLabel
- Invalid and disabled styling via data attributes

### Usage

```tsx
import { Input } from '@/components/ui/input'
import { Field, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSet } from '@/components/ui/field'

export function ApplicantFields() {
  return (
    <FieldSet>
      <FieldLegend>Applicant details</FieldLegend>
      <FieldGroup>
        <Field>
          <FieldLabel htmlFor="case">Case number</FieldLabel>
          <Input id="case" placeholder="2026-04812" />
          <FieldDescription>Found on your decision letter.</FieldDescription>
        </Field>
        <Field data-invalid="true">
          <FieldLabel htmlFor="email">Email</FieldLabel>
          <Input id="email" type="email" aria-invalid="true" />
          <FieldError>Enter a valid email address.</FieldError>
        </Field>
      </FieldGroup>
    </FieldSet>
  )
}
```

#### Default

A complete building permit application, with two field sets divided by a `FieldSeparator`.

#### Input

Inputs with descriptions above and below.

#### With Error

Invalid fields with a single error and a list of errors. Link the error to the control with `aria-describedby`.

#### Checkbox Group

A group of checkboxes with a legend.

#### Radio

A radio group with horizontal fields.

#### Choice Card

Selectable cards built by wrapping a Field in FieldLabel.

#### Switch

A switch with label and description.

#### Slider

A slider with a title, its current value and a description that follows the value.

#### Responsive

Fields that switch from stacked to horizontal as the container grows.

#### Disabled

Set `data-disabled` on the `Field` to dim its label, next to a disabled control. `FieldSeparator` can carry a label.

### Accessibility

- FieldSet and FieldLegend give grouped controls an accessible group name
- Connect FieldLabel to its control with htmlFor and id
- FieldError renders with role="alert" so errors are announced
- Set aria-invalid on the control and data-invalid on the Field for invalid state
- Link descriptions with aria-describedby when extra context is important

## Source

File: components/ui/field.tsx

```tsx
'use client'

import { cva, type VariantProps } from 'class-variance-authority'
import { useMemo } from 'react'
import { Label } from '@/components/ui/label'
import { Separator } from '@/components/ui/separator'
import { cn } from '@/lib/utils'

function FieldSet({ className, ...props }: React.ComponentProps<'fieldset'>) {
	return (
		<fieldset
			data-slot="field-set"
			className={cn(
				'flex flex-col gap-4 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3',
				className,
			)}
			{...props}
		/>
	)
}

function FieldLegend({
	className,
	variant = 'legend',
	...props
}: React.ComponentProps<'legend'> & { variant?: 'legend' | 'label' }) {
	return (
		<legend
			data-slot="field-legend"
			data-variant={variant}
			className={cn('mb-1.5 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base', className)}
			{...props}
		/>
	)
}

function FieldGroup({ className, ...props }: React.ComponentProps<'div'>) {
	return (
		<div
			data-slot="field-group"
			className={cn(
				'group/field-group @container/field-group flex w-full flex-col gap-5 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4',
				className,
			)}
			{...props}
		/>
	)
}

const fieldVariants = cva('group/field flex w-full gap-2 data-[invalid=true]:text-destructive', {
	variants: {
		orientation: {
			vertical: 'flex-col *:w-full [&>.sr-only]:w-auto',
			horizontal:
				'flex-row items-center has-[>[data-slot=field-content]]:items-start *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px',
			responsive:
				'flex-col *:w-full @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:*:data-[slot=field-label]:flex-auto [&>.sr-only]:w-auto @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px',
		},
	},
	defaultVariants: {
		orientation: 'vertical',
	},
})

function Field({
	className,
	orientation = 'vertical',
	...props
}: React.ComponentProps<'div'> & VariantProps<typeof fieldVariants>) {
	return (
		<div
			role="group"
			data-slot="field"
			data-orientation={orientation}
			className={cn(fieldVariants({ orientation }), className)}
			{...props}
		/>
	)
}

function FieldContent({ className, ...props }: React.ComponentProps<'div'>) {
	return (
		<div
			data-slot="field-content"
			className={cn('group/field-content flex flex-1 flex-col gap-0.5 leading-snug', className)}
			{...props}
		/>
	)
}

function FieldLabel({ className, ...props }: React.ComponentProps<typeof Label>) {
	return (
		<Label
			data-slot="field-label"
			className={cn(
				'group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-data-checked:border-primary/30 has-data-checked:bg-primary/5 has-[>[data-slot=field]]:rounded-lg has-[>[data-slot=field]]:border 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-3 has-[>[data-slot=field]]:has-[:focus-visible]:ring-ring/50 *:data-[slot=field]:p-2.5 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10',
				'has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col',
				className,
			)}
			{...props}
		/>
	)
}

function FieldTitle({ className, ...props }: React.ComponentProps<'div'>) {
	return (
		<div
			data-slot="field-label"
			className={cn(
				'flex w-fit items-center gap-2 text-sm font-medium group-data-[disabled=true]/field:opacity-50',
				className,
			)}
			{...props}
		/>
	)
}

function FieldDescription({ className, ...props }: React.ComponentProps<'p'>) {
	return (
		<p
			data-slot="field-description"
			className={cn(
				'text-left text-sm leading-normal font-normal text-muted-foreground group-has-data-horizontal/field:text-balance [[data-variant=legend]+&]:-mt-1.5',
				'last:mt-0 nth-last-2:-mt-1',
				'[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary',
				className,
			)}
			{...props}
		/>
	)
}

function FieldSeparator({
	children,
	className,
	...props
}: React.ComponentProps<'div'> & {
	children?: React.ReactNode
}) {
	return (
		<div
			data-slot="field-separator"
			data-content={!!children}
			className={cn('relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2', className)}
			{...props}
		>
			<Separator className="absolute inset-0 top-1/2" />
			{children && (
				<span
					className="relative mx-auto block w-fit bg-background px-2 text-muted-foreground"
					data-slot="field-separator-content"
				>
					{children}
				</span>
			)}
		</div>
	)
}

function FieldError({
	className,
	children,
	errors,
	...props
}: React.ComponentProps<'div'> & {
	errors?: Array<{ message?: string } | undefined>
}) {
	const content = useMemo(() => {
		if (children) {
			return children
		}

		if (!errors?.length) {
			return null
		}

		const uniqueErrors = [...new Map(errors.map((error) => [error?.message, error])).values()]

		if (uniqueErrors?.length == 1) {
			return uniqueErrors[0]?.message
		}

		return (
			<ul className="ml-4 flex list-disc flex-col gap-1">
				{uniqueErrors.map((error) => error?.message && <li key={error.message}>{error.message}</li>)}
			</ul>
		)
	}, [children, errors])

	if (!content) {
		return null
	}

	return (
		<div
			role="alert"
			data-slot="field-error"
			className={cn('text-sm font-normal text-destructive', className)}
			{...props}
		>
			{content}
		</div>
	)
}

export {
	Field,
	FieldLabel,
	FieldDescription,
	FieldError,
	FieldGroup,
	FieldLegend,
	FieldSeparator,
	FieldSet,
	FieldContent,
	FieldTitle,
}
```

---

# File Dropzone

Drag-and-drop multi-file uploader with size and type validation, built on react-dropzone.

Install: `npx shadcn@latest add https://rdf.dev.360online.com/r/file-dropzone.json`

Import from: `@/components/ui/file-dropzone`

Builds on: button

npm dependencies: class-variance-authority@^0.7.1, lucide-react@^1.48.0, react-dropzone@^14.2.9

A drag-and-drop area for one or many files, built on [react-dropzone](https://react-dropzone.js.org). Selected files are
listed below the drop area with a remove button. Rejections (empty file, wrong type, too large, too many) surface as
an inline error, and a hint line summarises the limits ("PDF, PNG up to 5MB (max uploads 3)").

Installs together with the `use-file` hook (`hooks/use-file.ts`) used for size formatting.

> **i18n:** the visible strings are hardcoded in English. This is a template component — replace them with your app's
> translation layer after installing.

### Usage

```tsx
import { FileDropzone } from "@/components/ui/file-dropzone"

const [files, setFiles] = useState<File[]>([])

<FileDropzone
  value={files}
  onChange={setFiles}
  maxFiles={3}
  maxFileSize={5}                       // MB
  acceptedFileTypes={['.pdf', '.png']}
  icon="cloud-upload"                   // or "image-upload"
/>
```

`acceptedFileTypes` takes extensions; they are mapped to MIME types for the browser's file picker (unknown
extensions fall back to `application/octet-stream`). Files that already exist server-side can carry an
`_attachmentId` so removal works even when the `File` objects are recreated.

#### Default

Inside a card as one step of a building permit application: drawings and attachments, up to five PDF, DWG or image
files of 10MB each.

#### With limits

A housing allowance case that already has two documents attached. The drop area accepts one more PDF or Word file; a
fourth file is rejected with an inline error.

#### Image upload

`icon="image-upload"` for photo uploads, here in a report form for problems in the street.

#### Small

`size="sm"` for a compact, optional single-file upload.

### Related Components

- File Input — single file with preview

## Source

File: components/ui/file-dropzone.tsx

```tsx
'use client'

import { cva, type VariantProps } from 'class-variance-authority'
import { CloudUploadIcon, FileIcon, ImageUpIcon, Trash2Icon } from 'lucide-react'
import * as React from 'react'
import { useDropzone } from 'react-dropzone'
import { Button } from '@/components/ui/button'
// NOTE: UI strings are hardcoded in English. This is a template component — wire it to your app's i18n when adopting it.
import { useFile } from '@/hooks/use-file'
import { cn } from '@/lib/utils'

const fileDropzoneVariants = cva('w-full space-y-4', {
	variants: {
		size: {
			sm: '',
			default: '',
		},
	},
	defaultVariants: {
		size: 'default',
	},
})

const fileDropzoneIconVariants = cva('text-muted-foreground transition-colors', {
	variants: {
		size: {
			sm: 'size-8',
			default: 'size-10',
		},
	},
	defaultVariants: {
		size: 'default',
	},
})

const fileDropzoneTextVariants = cva('font-medium text-primary', {
	variants: {
		size: {
			sm: 'text-sm',
			default: 'text-base',
		},
	},
	defaultVariants: {
		size: 'default',
	},
})

export type FileDropzoneIcon = 'cloud-upload' | 'image-upload'

interface Variants
	extends VariantProps<typeof fileDropzoneVariants>,
		VariantProps<typeof fileDropzoneIconVariants>,
		VariantProps<typeof fileDropzoneTextVariants> {}

interface FileDropzoneProps extends Variants {
	value: File[]
	onChange: (files: File[]) => void
	maxFiles?: number
	maxFileSize?: number
	className?: string
	icon?: FileDropzoneIcon
	/** Accessible name for surrounding landmark region */
	regionLabel?: string
	/** Accessible label for the interactive drop area */
	ariaLabel?: string
	/**
	 * Ids of the elements that name the drop area, usually the field's label (which carries
	 * "required"). Takes precedence over `ariaLabel`.
	 */
	'aria-labelledby'?: string
	/** Extra ids describing the drop area, e.g. the form's help text and error message */
	'aria-describedby'?: string
	/** Marks the drop area invalid from outside, e.g. a required field left empty */
	'aria-invalid'?: React.AriaAttributes['aria-invalid']
	/** Formatter for remove-button aria-label */
	getRemoveFileAriaLabel?: (fileName: string) => string
	/** If true, the drop area will fill its container vertically */
	fullHeight?: boolean
	/** Array of accepted file extensions (e.g., ['.pdf', '.jpg', '.png']) */
	acceptedFileTypes?: string[]
}

/**
 * Mapping of file extensions to MIME types for react-dropzone accept format
 */
const EXTENSION_TO_MIME: Record<string, string> = {
	// Documents
	'.uf': 'application/octet-stream',
	'.pdf': 'application/pdf',
	'.doc': 'application/msword',
	'.docx': 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
	'.docm': 'application/vnd.ms-word.document.macroEnabled.12',
	'.xls': 'application/vnd.ms-excel',
	'.xlsx': 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
	'.xlsb': 'application/vnd.ms-excel.sheet.binary.macroEnabled.12',
	'.xlsm': 'application/vnd.ms-excel.sheet.macroEnabled.12',
	'.ppt': 'application/vnd.ms-powerpoint',
	'.pptx': 'application/vnd.openxmlformats-officedocument.presentationml.presentation',
	'.pptm': 'application/vnd.ms-powerpoint.presentation.macroEnabled.12',
	'.ppsx': 'application/vnd.openxmlformats-officedocument.presentationml.slideshow',
	'.mpp': 'application/vnd.ms-project',
	'.txt': 'text/plain',
	'.rtf': 'application/rtf',
	'.htm': 'text/html',
	'.html': 'text/html',
	'.xml': 'application/xml',
	'.eml': 'message/rfc822',
	'.mht': 'message/rfc822',
	'.msg': 'application/vnd.ms-outlook',
	'.one': 'application/onenote',
	'.xps': 'application/vnd.ms-xpsdocument',
	'.pub': 'application/x-mspublisher',
	'.odt': 'application/vnd.oasis.opendocument.text',
	'.ods': 'application/vnd.oasis.opendocument.spreadsheet',
	'.odg': 'application/vnd.oasis.opendocument.graphics',
	'.odp': 'application/vnd.oasis.opendocument.presentation',
	// Images
	'.jpg': 'image/jpeg',
	'.jpeg': 'image/jpeg',
	'.png': 'image/png',
	'.gif': 'image/gif',
	'.bmp': 'image/bmp',
	'.tif': 'image/tiff',
	'.tiff': 'image/tiff',
	// Media
	'.mpeg-2': 'video/mpeg',
	'.mp3': 'audio/mpeg',
	'.wav': 'audio/wav',
	'.mp4': 'video/mp4',
	'.mov': 'video/quicktime',
	'.wmv': 'video/x-ms-wmv',
	// CAD & GIS
	'.dwg': 'image/vnd.dwg',
	'.dwf': 'model/vnd.dwf',
	'.ifc': 'model/ifc',
	'.sosi': 'application/octet-stream',
	'.sos': 'application/octet-stream',
	'.kof': 'application/octet-stream',
	'.vgt': 'application/octet-stream',
	'.gsi': 'application/octet-stream',
	'.gml': 'application/gml+xml',
	// Other
	'.zip': 'application/zip',
	'.vsd': 'application/vnd.visio',
	'.vsdx': 'application/vnd.visio',
}

/**
 * Converts an array of file extensions to react-dropzone accept format.
 * Groups extensions by their MIME type for proper accept configuration.
 *
 * @param extensions - Array of file extensions (e.g., ['.pdf', '.jpg'])
 * @returns Accept object for react-dropzone (e.g., { 'image/jpeg': ['.jpg', '.jpeg'] })
 */
function createAcceptObject(extensions: string[]): Record<string, string[]> {
	const accept: Record<string, string[]> = {}

	for (const ext of extensions) {
		const normalizedExt = ext.toLowerCase()
		const mimeType = EXTENSION_TO_MIME[normalizedExt]

		if (mimeType) {
			if (!accept[mimeType]) {
				accept[mimeType] = []
			}
			// Only add extension if not already present (handles .jpg and .jpeg both mapping to image/jpeg)
			if (!accept[mimeType].includes(normalizedExt)) {
				accept[mimeType].push(normalizedExt)
			}
		} else {
			// For unknown extensions, use a generic MIME type with the extension
			// This allows the file input to still filter by extension
			const genericMime = 'application/octet-stream'
			if (!accept[genericMime]) {
				accept[genericMime] = []
			}
			if (!accept[genericMime].includes(normalizedExt)) {
				accept[genericMime].push(normalizedExt)
			}
		}
	}

	return accept
}

export function FileDropzone({
	value,
	onChange,
	maxFiles,
	maxFileSize,
	size,
	className,
	icon = 'cloud-upload',
	regionLabel,
	ariaLabel,
	getRemoveFileAriaLabel,
	fullHeight = false,
	acceptedFileTypes,
	'aria-labelledby': ariaLabelledby,
	'aria-describedby': ariaDescribedby,
	'aria-invalid': ariaInvalid,
}: Readonly<FileDropzoneProps>) {
	const { convertMb } = useFile()
	const hintId = React.useId()
	const errorId = React.useId()
	const [errorMessage, setErrorMessage] = React.useState<string | null>(null)

	/**
	 * Normalizes the value prop to always be an array of Files.
	 *
	 * Handles various input types:
	 * - undefined/null -> []
	 * - Array -> filter to only include File objects
	 * - Single File -> [File]
	 * - Anything else -> [] (invalid, reset to empty)
	 */
	const normalizedValue: File[] = React.useMemo(() => {
		if (!value) return []

		// Handle arrays - filter to only include File objects
		if (Array.isArray(value)) {
			return value.filter((item): item is File => item instanceof File)
		}

		// Handle single File object (runtime check for cases where value might be a single File)
		// Use unknown cast to allow instanceof check since TypeScript types value as File[]
		const singleValue = value as unknown
		if (singleValue && typeof singleValue === 'object' && singleValue instanceof File) {
			return [singleValue]
		}

		// Fallback: invalid value type, return empty array
		return []
	}, [value])

	const onDrop = React.useCallback(
		(acceptedFiles: File[]) => {
			setErrorMessage(null)
			const allowedCount =
				typeof maxFiles === 'number' ? Math.max(0, maxFiles - normalizedValue.length) : acceptedFiles.length
			const trimmed = acceptedFiles.slice(0, allowedCount)
			onChange([...normalizedValue, ...trimmed])
		},
		[normalizedValue, onChange, maxFiles],
	)

	const maxBytes = typeof maxFileSize === 'number' ? Math.round(maxFileSize * 1024 * 1024) : undefined

	// Create accept object from acceptedFileTypes if provided and has items
	const accept = React.useMemo(() => {
		if (acceptedFileTypes && acceptedFileTypes.length > 0) {
			return createAcceptObject(acceptedFileTypes)
		}
		return undefined
	}, [acceptedFileTypes])

	const { getRootProps, getInputProps, isDragActive } = useDropzone({
		onDrop,
		maxFiles,
		maxSize: maxBytes,
		accept,
		validator: (file) => {
			if (file.size === 0) {
				return { code: 'file-empty', message: 'File is empty' }
			}
			return null
		},
		onDropRejected: (fileRejections) => {
			const hasEmpty = fileRejections.some((rej) => rej.errors.some((e) => e.code === 'file-empty'))
			const hasTooMany = fileRejections.some((rej) => rej.errors.some((e) => e.code === 'too-many-files'))
			const hasTooLarge = fileRejections.some((rej) => rej.errors.some((e) => e.code === 'file-too-large'))
			const hasInvalidType = fileRejections.some((rej) => rej.errors.some((e) => e.code === 'file-invalid-type'))

			if (hasEmpty) {
				setErrorMessage('File is empty. Please choose a file with content.')
				return
			}
			if (hasInvalidType && acceptedFileTypes && acceptedFileTypes.length > 0) {
				const formattedTypes = acceptedFileTypes.map((ext) => ext.toUpperCase().replace('.', '')).join(', ')
				setErrorMessage(`Invalid file format. Please upload a ${formattedTypes} file.`)
				return
			}
			if (hasTooLarge && typeof maxFileSize === 'number') {
				setErrorMessage(`File is too large. Maximum size is ${convertMb(maxFileSize)}.`)
				return
			}
			if (hasTooMany && typeof maxFiles === 'number') {
				setErrorMessage(`Max uploads: ${maxFiles} files`)
				return
			}
			setErrorMessage(null)
		},
	})

	/**
	 * Removes a file from the list.
	 *
	 * For already-uploaded files (with _attachmentId), uses the ID for comparison.
	 * For new files, uses object reference comparison.
	 * This ensures removal works correctly even when File objects are recreated on re-render.
	 */
	const removeFile = (fileToRemove: File) => {
		const fileToRemoveWithId = fileToRemove as File & { _attachmentId?: string }
		const identifier = fileToRemoveWithId._attachmentId

		if (identifier) {
			// For already-uploaded files, compare by _attachmentId
			// This works even when File objects are recreated on re-render
			const filesWithId = normalizedValue as Array<File & { _attachmentId?: string }>
			onChange(filesWithId.filter((file) => file._attachmentId !== identifier))
		} else {
			// For new files (not yet uploaded), use object reference comparison
			onChange(normalizedValue.filter((file) => file !== fileToRemove))
		}
	}

	// Adding or removing a file only changes the list below the drop area, which a screen
	// reader does not notice; say the new count instead. Empty on the first render, so
	// files already there when the page opens are not announced.
	const [countStatus, setCountStatus] = React.useState('')
	const fileCount = normalizedValue.length
	const previousCount = React.useRef(fileCount)
	React.useEffect(() => {
		if (previousCount.current === fileCount) return
		previousCount.current = fileCount
		setCountStatus(fileCount === 1 ? '1 file' : `${fileCount} files`)
	}, [fileCount])

	const regionName = regionLabel ?? 'File uploader'
	const dropAreaLabel = ariaLabel ?? 'Choose file or drag here'

	// Build hint text: "PDF, JPG, CSV up to 1MB (max 3 files)"
	const hintParts: string[] = []
	if (acceptedFileTypes && acceptedFileTypes.length > 0) {
		hintParts.push(acceptedFileTypes.map((ext) => ext.toUpperCase().replace('.', '')).join(', '))
	}
	if (typeof maxFileSize === 'number') {
		hintParts.push(`up to ${convertMb(maxFileSize)}`)
	}
	const hintText = hintParts.length > 0 ? hintParts.join(' ') : null
	const maxFilesText = typeof maxFiles === 'number' ? `(max uploads ${maxFiles})` : null

	return (
		<section
			data-slot="file-dropzone"
			className={cn(fileDropzoneVariants({ size, className }), 'group/file-dropzone min-w-0')}
			aria-label={regionName}
		>
			<div
				data-dragging={isDragActive || undefined}
				className={cn(
					'relative flex cursor-pointer items-center justify-center rounded-lg border border-dashed border-input bg-primary-foreground p-6 transition-colors outline-none',
					!errorMessage && 'hover:border-primary hover:bg-primary/5 data-dragging:border-primary data-dragging:bg-primary/5',
					// The focus indicator is drawn inside the border: a dropzone usually sits in a
					// container with overflow:hidden, and anything painted outside the border box
					// (a ring, which is a box-shadow, or an outline) is clipped away there, so
					// keyboard users could not see where they were. The error ring is inset for the same reason.
					'focus-visible:border-ring focus-visible:outline-2 focus-visible:outline-solid focus-visible:-outline-offset-2 focus-visible:outline-ring',
					'aria-invalid:border-destructive aria-invalid:outline-destructive aria-invalid:ring-3 aria-invalid:ring-inset aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40',
					{ 'h-full': fullHeight },
				)}
				{...getRootProps({
					role: 'button',
					'aria-invalid': errorMessage || (ariaInvalid && ariaInvalid !== 'false') ? true : undefined,
					'aria-describedby': [hintId, errorMessage ? errorId : null, ariaDescribedby].filter(Boolean).join(' '),
					'aria-label': ariaLabelledby ? undefined : dropAreaLabel,
					'aria-labelledby': ariaLabelledby,
				})}
			>
				<div className="flex flex-col items-center gap-4">
					<div className="flex flex-col items-center gap-3">
						{icon === 'cloud-upload' && (
							<CloudUploadIcon
								className={cn(
									fileDropzoneIconVariants({ size }),
									errorMessage ? 'text-destructive' : 'group-hover/file-dropzone:text-primary',
								)}
								strokeWidth={1.5}
								aria-hidden="true"
								focusable="false"
							/>
						)}
						{icon === 'image-upload' && (
							<ImageUpIcon
								className={cn(
									fileDropzoneIconVariants({ size }),
									errorMessage ? 'text-destructive' : 'group-hover/file-dropzone:text-primary',
								)}
								strokeWidth={1.5}
								aria-hidden="true"
								focusable="false"
							/>
						)}
						<span className={fileDropzoneTextVariants({ size })}>
							Choose file <span className="font-normal leading-tight text-foreground">or drag here</span>
						</span>
					</div>

					{(hintText || maxFilesText) && (
						<p className="text-center text-sm leading-tight text-muted-foreground" id={hintId}>
							{hintText}
							{hintText && maxFilesText && ' '}
							{maxFilesText}
						</p>
					)}
				</div>

				<input {...getInputProps()} className="hidden" aria-hidden="true" tabIndex={-1} />
			</div>

			{/* <output> has the status role: the new count is announced politely */}
			<output className="sr-only">{countStatus}</output>

			{errorMessage && (
				<p id={errorId} role="alert" aria-live="polite" className="text-sm text-destructive">
					{errorMessage}
				</p>
			)}

			{normalizedValue.length > 0 && (
				<div className="w-full overflow-hidden rounded-lg border bg-background">
					<div className="flex items-center justify-between border-b px-3 py-2">
						<h3 className="text-sm font-medium">{`${normalizedValue.length} files`}</h3>
					</div>
					<div className="overflow-y-auto max-h-48">
						<ul className="divide-y divide-border">
							{normalizedValue.map((file, index) => {
								// Use _attachmentId as key for already-uploaded files to ensure stable keys
								// For new files, use name + size + lastModified + index as fallback
								const fileWithId = file as File & { _attachmentId?: string }
								const fileKey = fileWithId._attachmentId ?? `${file.name}-${file.size}-${file.lastModified}-${index}`

								return (
									<li key={fileKey} className="flex items-center gap-2 overflow-hidden px-3 py-2 hover:bg-muted/50">
										<FileIcon className="size-4 shrink-0 text-primary" />
										<div className="min-w-0 flex-1 overflow-hidden">
											<p className="text-sm font-medium truncate" title={file.name}>
												{file.name}
											</p>
											<p className="text-xs text-muted-foreground">{(file.size / 1024 / 1024).toFixed(2)} MB</p>
										</div>
										<Button
											onClick={() => removeFile(file)}
											type="button"
											variant="ghost"
											size="icon-sm"
											aria-label={getRemoveFileAriaLabel ? getRemoveFileAriaLabel(file.name) : `Remove ${file.name}`}
										>
											<Trash2Icon aria-hidden="true" focusable="false" />
										</Button>
									</li>
								)
							})}
						</ul>
					</div>
				</div>
			)}
		</section>
	)
}
```

File: hooks/use-file.ts

```tsx
function getByteSize(file: File): string {
	const bytes = file.size
	const sizes = ['MB', 'GB', 'TB']
	const i = Math.floor(Math.log(bytes / 1024 / 1024) / Math.log(1024))

	if (bytes === 0) return '0 MB'
	if (bytes < 1024 * 1024) return `${(bytes / 1024 / 1024).toFixed(2)} MB`

	return `${(bytes / 1024 ** (i + 2)).toFixed(2)} ${sizes[i]}`
}

function convertMb(size: number): string {
	if (size >= 1000) {
		return `${size / 1000}GB`
	}
	return `${size}MB`
}

export function useFile() {
	return {
		getByteSize,
		convertMb,
	}
}
```

---

# File Input

Single file or image input with preview, drag-and-drop and size validation.

Install: `npx shadcn@latest add https://rdf.dev.360online.com/r/file-input.json`

Import from: `@/components/ui/file-input`

Builds on: button

npm dependencies: lucide-react@^1.48.0

A single-file input aimed at images: click or drop to pick a file, see a thumbnail preview, remove it again. Rejects
empty files and files above `maxSize` with an inline error.

> **i18n:** the visible strings ("Choose file or drag here", error messages, …) are hardcoded in English. This is a
> template component — replace them with your app's translation layer after installing.

### Usage

```tsx
import { Field, FieldDescription, FieldLabel } from "@/components/ui/field"
import { FileInput } from "@/components/ui/file-input"

const [logo, setLogo] = useState<File | null>(null)

<Field>
  <FieldLabel htmlFor="tenant-logo">Logo</FieldLabel>
  <FileInput
    id="tenant-logo"
    aria-describedby="tenant-logo-description"
    value={logo}
    onImageChange={setLogo}
    initialImage={tenant.logoUrl}
    accept="image/png,image/svg+xml"
    maxSize={2 * 1024 * 1024}
  />
  <FieldDescription id="tenant-logo-description">PNG or SVG up to 2 MB.</FieldDescription>
</Field>
```

#### Default

The input has no label of its own. Here it sits under a `FieldTitle` with a `FieldDescription` that explains what to
upload; see With label for a label that is tied to the control.

#### With label

Pass `id` and point a `FieldLabel` (or any `<label htmlFor>`) at it. The `id` goes to the button that opens the file
picker, so the label names the button and a click on the label opens the picker. `aria-describedby` ties the
description to the same button.

#### With initial image

`initialImage` previews a file that is already stored, here the coat of arms shown on the e-service portal. Click the
thumbnail to replace it or the trash button to remove it.

#### With max size

`maxSize` is in bytes. Larger files are rejected with an inline error and the previous value is kept.

#### Controlled

Pass `value` and `onImageChange` to lift the file into your form state.

#### Invalid

`aria-invalid` gives the button the error style, and `aria-describedby` points at the `FieldError`.

#### Read-only

`readOnly` shows the preview without the replace and remove actions.

#### Disabled

### Accessibility

- The native file input is hidden; the focusable control is the button that opens the file picker (or the thumbnail
  button once a file is chosen). `id`, `aria-label`, `aria-labelledby`, `aria-describedby` and `aria-invalid` are
  forwarded to that button
- Give the control a name with `<FieldLabel htmlFor={id}>`, or with `aria-labelledby` when the label is not a `label`
  element
- The built-in error for an empty or too large file is added to the button's `aria-describedby`, next to the ids you
  pass
- The remove button has the accessible name "Remove"

### Related Components

- File Dropzone — multiple files
- Input

## Source

File: components/ui/file-input.tsx

```tsx
'use client'

// NOTE: UI strings are hardcoded in English. This is a template component — wire it to your app's i18n when adopting it.
import { Trash2Icon, UploadIcon } from 'lucide-react'
import * as React from 'react'
import { useEffect, useState } from 'react'
import { Button } from '@/components/ui/button'
import { cn } from '@/lib/utils'

interface FileInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value'> {
	initialImage?: string
	value?: File | null
	onImageChange?: (file: File | null) => void
	readOnly?: boolean
	disabled?: boolean
	/**
	 * Set on the button that opens the file picker, so a `<label htmlFor>` or `FieldLabel` can point at it. The
	 * `aria-label`, `aria-labelledby`, `aria-describedby` and `aria-invalid` props go to the same button.
	 */
	id?: string
	'aria-invalid'?: boolean | 'true' | 'false'
	/** Maximum file size in bytes */
	maxSize?: number
}

export function FileInput({
	initialImage,
	value,
	onImageChange,
	readOnly = false,
	disabled = false,
	accept = 'image/*',
	id,
	'aria-label': ariaLabel,
	'aria-labelledby': ariaLabelledBy,
	'aria-describedby': ariaDescribedBy,
	'aria-invalid': ariaInvalid,
	maxSize,
}: FileInputProps = {}) {
	const ref = React.useRef<HTMLInputElement>(null)
	const errorId = React.useId()
	const [preview, setPreview] = useState<string | null>(initialImage || null)
	const [file, setFile] = useState<File | null>(value || null)
	const [isDragging, setIsDragging] = useState(false)
	const [sizeError, setSizeError] = useState<string | null>(null)

	useEffect(() => {
		if (initialImage) {
			setPreview(initialImage)
		}
	}, [initialImage])

	const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
		const selectedFile = event.target.files?.[0]
		processFile(selectedFile)
	}

	const processFile = (selectedFile: File | undefined) => {
		if (selectedFile) {
			if (selectedFile.size === 0) {
				setSizeError('File is empty. Please choose a file with content.')
				return
			}

			// Check file size if maxSize is specified
			if (maxSize && selectedFile.size > maxSize) {
				const maxSizeKB = Math.round(maxSize / 1024)
				setSizeError(`File is too large. Maximum size: ${maxSizeKB} KB`)
				return
			}

			setSizeError(null)
			setFile(selectedFile)
			const reader = new FileReader()
			reader.onloadend = () => {
				setPreview(reader.result as string)
			}

			reader.readAsDataURL(selectedFile)

			onImageChange?.(selectedFile)
		}
	}

	const handleRemove = () => {
		setFile(null)
		setPreview(null)
		onImageChange?.(null)
		if (ref.current) {
			ref.current.value = ''
		}
	}

	const handleDragOver = (e: React.DragEvent) => {
		e.preventDefault()
		if (!readOnly && !disabled) {
			setIsDragging(true)
		}
	}

	const handleDragLeave = (e: React.DragEvent) => {
		e.preventDefault()
		setIsDragging(false)
	}

	const handleDrop = (e: React.DragEvent) => {
		e.preventDefault()
		setIsDragging(false)
		if (!readOnly && !disabled) {
			const droppedFile = e.dataTransfer.files?.[0]
			processFile(droppedFile)
		}
	}

	const isDisabledOrReadOnly = disabled || readOnly

	// The file input itself is hidden, so the label and description go to the button that opens the picker.
	const controlProps = {
		id,
		'aria-label': ariaLabel,
		'aria-labelledby': ariaLabelledBy,
		'aria-describedby': [ariaDescribedBy, sizeError ? errorId : undefined].filter(Boolean).join(' ') || undefined,
		'aria-invalid': ariaInvalid,
	}

	return (
		<div className="space-y-2">
			{/* Hidden file input */}
			<input ref={ref} type="file" onChange={handleFileChange} accept={accept} disabled={disabled} className="hidden" />
			{sizeError && (
				<p id={errorId} className="text-sm text-destructive">
					{sizeError}
				</p>
			)}

			{!file && !preview ? (
				<button
					type="button"
					onClick={() => ref.current?.click()}
					onDragOver={handleDragOver}
					onDragLeave={handleDragLeave}
					onDrop={handleDrop}
					disabled={isDisabledOrReadOnly}
					{...controlProps}
					data-dragging={isDragging || undefined}
					className={cn(
						'flex w-full cursor-pointer items-center justify-center gap-2 rounded-lg border border-dashed border-input bg-background px-6 py-4 text-sm text-muted-foreground transition-colors outline-none',
						'hover:border-primary hover:bg-primary/5 data-dragging:border-primary data-dragging:bg-primary/5',
						'focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring',
						'aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:hover:border-destructive dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40',
						'disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50',
					)}
				>
					<UploadIcon className="size-4" />
					<span>Choose file or drag here</span>
				</button>
			) : (
				<div className="flex items-center gap-3">
					<span className="sr-only">Preview</span>
					{preview && (
						<button
							type="button"
							onClick={() => ref.current?.click()}
							disabled={isDisabledOrReadOnly}
							{...controlProps}
							className={cn(
								'group relative rounded-lg border border-border bg-muted/50 p-2 transition-colors outline-none',
								!isDisabledOrReadOnly && 'cursor-pointer hover:border-primary hover:bg-muted',
								'focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring',
								'aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40',
								'disabled:cursor-not-allowed',
							)}
						>
							<img src={preview} alt="Preview" className="h-16 w-auto object-contain" />
							{!isDisabledOrReadOnly && (
								<div className="absolute inset-0 flex items-center justify-center rounded-lg bg-black/50 opacity-0 transition-opacity group-hover:opacity-100">
									<UploadIcon className="size-4 text-white" />
								</div>
							)}
						</button>
					)}
					{!isDisabledOrReadOnly && (
						<Button
							type="button"
							variant="ghost"
							size="icon"
							onClick={handleRemove}
							className="text-muted-foreground hover:bg-destructive/10 hover:text-destructive active:bg-destructive/20 dark:hover:bg-destructive/10"
						>
							<Trash2Icon />
							<span className="sr-only">Remove</span>
						</Button>
					)}
				</div>
			)}
		</div>
	)
}
```

---

# Form

react-hook-form bindings (`Form`, `FormField`, `FormItem`, `FormMessage`) with accessible labels and errors.

Install: `npx shadcn@latest add https://rdf.dev.360online.com/r/form.json`

Import from: `@/components/ui/form`

Builds on: label

npm dependencies: @base-ui/react@^1.8.0, react-hook-form@^7.62.0

A form component built on top of [React Hook Form](https://react-hook-form.com/) with validation using [Zod](https://zod.dev/).
The form components provide a flexible and accessible way to build forms with validation, error messages, and complex form state management.

### Features

- Built on React Hook Form for powerful form state management
- Zod schema validation integration
- Accessible form controls with ARIA attributes
- Error message handling
- Form field descriptions
- Flexible form layouts
- TypeScript support
- Keyboard navigation
- Screen reader support

### Usage

```tsx
import { useForm } from 'react-hook-form'
import { zodResolver } from '@hookform/resolvers/zod'
import * as z from 'zod'
import {
  Form,
  FormControl,
  FormDescription,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from '@/components/ui/form'
import { Input } from '@/components/ui/input'
import { Button } from '@/components/ui/button'

// Define your form schema
const formSchema = z.object({
  caseNumber: z.string().regex(/^\d{4}-\d{5}$/, {
    message: 'Case numbers look like 2026-04812.',
  }),
})

export function FindCaseForm() {
  // Initialize form with schema
  const form = useForm<z.infer<typeof formSchema>>({
    resolver: zodResolver(formSchema),
    defaultValues: {
      caseNumber: '',
    },
  })

  // Form submission handler
  function onSubmit(values: z.infer<typeof formSchema>) {
    console.log(values)
  }

  return (
    <Form {...form}>
      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
        <FormField
          control={form.control}
          name="caseNumber"
          render={({ field }) => (
            <FormItem>
              <FormLabel>Case number</FormLabel>
              <FormControl>
                <Input placeholder="2026-04812" {...field} />
              </FormControl>
              <FormDescription>
                You find it in the confirmation email.
              </FormDescription>
              <FormMessage />
            </FormItem>
          )}
        />
        <Button type="submit">Find case</Button>
      </form>
    </Form>
  )
}
```

#### School placement

A card-based e-service form with a text input, a select, a date, a switch and a required confirmation checkbox.
Submit it empty to see the Zod messages appear under each field.

#### Public records request

Radio options are composed from nested `FormItem`s so each option gets its own label and hint, while the group shares
one `FormMessage`.

#### Validation errors

The form is validated on mount (`form.trigger()`), showing how `FormLabel`, `FormControl` and `FormMessage` pick up the
error state and wire `aria-invalid` and `aria-describedby` for you.

### Form Components

#### Form
The root form component that provides form context.

**Props:**
- All props from `react-hook-form`'s `FormProvider`

#### FormField
A component that provides form field context and handles field registration.

**Props:**
- `control` - Form control from React Hook Form
- `name` - Field name
- `render` - Render function for the field

#### FormItem
Container for form field components.

**Props:**
- `className` - Additional CSS classes
- Standard HTML div props

#### FormLabel
Label component for form fields.

**Props:**
- Standard HTML label props

#### FormControl
Wraps a single form control and passes the field's `id`, `aria-describedby` and `aria-invalid` on to it (merged with
Base UI's `useRender`, so the control renders without an extra element).

**Props:**
- Standard HTML attributes, merged onto the child
- Handles aria-describedby and aria-invalid automatically

#### FormDescription
Descriptive text for form fields.

**Props:**
- `className` - Additional CSS classes
- Standard HTML paragraph props

#### FormMessage
Component for displaying validation errors.

**Props:**
- `className` - Additional CSS classes
- Standard HTML paragraph props

### Accessibility

The Form components follow WAI-ARIA guidelines:

- Uses semantic HTML elements
- Proper label associations with form controls
- Error messages are announced to screen readers
- Proper ARIA attributes for validation states
- Keyboard navigation support
- Focus management
- Clear error indication

### Best Practices

1. Form Structure:
   - Group related fields
   - Use clear labels
   - Provide helpful descriptions
   - Show validation errors inline

2. Validation:
   - Use Zod schemas for validation
   - Provide clear error messages
   - Validate in real-time when appropriate
   - Handle all possible states

3. User Experience:
   - Clear submission feedback
   - Disable submit while processing
   - Preserve form state when appropriate
   - Handle errors gracefully

4. Accessibility:
   - Maintain proper heading hierarchy
   - Use semantic HTML
   - Test with screen readers
   - Ensure keyboard navigation

### Related Components

- Input
- Select
- Checkbox
- RadioGroup
- Switch
- Textarea

## Source

File: components/ui/form.tsx

```tsx
'use client'

import { mergeProps } from '@base-ui/react/merge-props'
import { useRender } from '@base-ui/react/use-render'
import * as React from 'react'
import {
	Controller,
	type ControllerProps,
	type FieldPath,
	type FieldValues,
	FormProvider,
	useFormContext,
	useFormState,
} from 'react-hook-form'
import { Label } from '@/components/ui/label'
import { cn } from '@/lib/utils'

const Form = FormProvider

type FormFieldContextValue<
	TFieldValues extends FieldValues = FieldValues,
	TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
> = {
	name: TName
}

const FormFieldContext = React.createContext<FormFieldContextValue>({} as FormFieldContextValue)

const FormField = <
	TFieldValues extends FieldValues = FieldValues,
	TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
>({
	...props
}: ControllerProps<TFieldValues, TName>) => {
	return (
		<FormFieldContext.Provider value={{ name: props.name }}>
			<Controller {...props} />
		</FormFieldContext.Provider>
	)
}

const useFormField = () => {
	const fieldContext = React.useContext(FormFieldContext)
	const itemContext = React.useContext(FormItemContext)
	const { getFieldState } = useFormContext()
	const formState = useFormState({ name: fieldContext.name })
	const fieldState = getFieldState(fieldContext.name, formState)

	if (!fieldContext) {
		throw new Error('useFormField should be used within <FormField>')
	}

	const { id } = itemContext

	return {
		id,
		name: fieldContext.name,
		formItemId: `${id}-form-item`,
		formDescriptionId: `${id}-form-item-description`,
		formMessageId: `${id}-form-item-message`,
		...fieldState,
	}
}

type FormItemContextValue = {
	id: string
}

const FormItemContext = React.createContext<FormItemContextValue>({} as FormItemContextValue)

function FormItem({ className, ...props }: React.ComponentProps<'div'>) {
	const id = React.useId()

	return (
		<FormItemContext.Provider value={{ id }}>
			<div data-slot="form-item" className={cn('grid gap-2', className)} {...props} />
		</FormItemContext.Provider>
	)
}

function FormLabel({ className, ...props }: React.ComponentProps<typeof Label>) {
	const { error, formItemId } = useFormField()

	return (
		<Label
			data-slot="form-label"
			data-error={!!error}
			className={cn('data-[error=true]:text-destructive break-words', className)}
			htmlFor={formItemId}
			{...props}
		/>
	)
}

type FormControlProps = React.HTMLAttributes<HTMLElement> & {
	ref?: React.Ref<HTMLElement>
}

// Passes the field's id, aria-describedby and aria-invalid on to its only child (the form control)
function FormControl({ children, ref, ...props }: FormControlProps) {
	const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
	const child = React.isValidElement(children) ? children : undefined

	return useRender({
		defaultTagName: 'div',
		render: child,
		ref,
		props: mergeProps<'div'>(
			{
				'data-slot': 'form-control',
				id: formItemId,
				'aria-describedby': error ? `${formDescriptionId} ${formMessageId}` : `${formDescriptionId}`,
				'aria-invalid': !!error,
				children: child ? undefined : children,
			} as React.ComponentProps<'div'>,
			props as React.ComponentProps<'div'>,
		),
	})
}

function FormDescription({ className, ...props }: React.ComponentProps<'p'>) {
	const { formDescriptionId } = useFormField()

	return (
		<p
			data-slot="form-description"
			id={formDescriptionId}
			className={cn('text-muted-foreground text-sm break-words', className)}
			{...props}
		/>
	)
}

function FormMessage({ className, ...props }: React.ComponentProps<'p'>) {
	const { error, formMessageId } = useFormField()
	const body = error ? String(error?.message ?? '') : props.children

	if (!body) {
		return null
	}

	return (
		<p data-slot="form-message" id={formMessageId} className={cn('text-destructive text-sm', className)} {...props}>
			{body}
		</p>
	)
}

export { useFormField, Form, FormItem, FormLabel, FormControl, FormDescription, FormMessage, FormField }
```

---

# Full Calendar

Month, week and day calendar for apps that show and schedule events, with a time grid and all-day events.

Install: `npx shadcn@latest add https://rdf.dev.360online.com/r/full-calendar.json`

Import from: `@/components/ui/full-calendar`

Builds on: button, popover, toggle-group

npm dependencies: date-fns@^4.4.0, lucide-react@^1.48.0

A calendar for apps that show and schedule events, such as meeting planners, booking systems and staff schedules.
It has month, week and day views, and a time grid in which overlapping events sit side by side.
Use [Calendar](/docs/components/calendar) instead when the user only needs to pick a date.

### Features

- Month, week and day views, with Today, Previous and Next navigation.
- Timed and all-day events. In month view, extra events are collected in a "N more" popover.
- A line that shows the current time in week and day view.
- `onSlotClick` fires when the user chooses a free day or hour, and `onEventClick` fires when they choose an event. Use them to add and open events; the component doesn't store events itself.
- Weeks start on Monday by default. Month and weekday names come from a date-fns `locale`, and every label can be translated.
- Event colours use theme tokens, so events look right in light and dark mode and in every theme.

### Usage

```tsx
import { FullCalendar, type CalendarEvent } from "@/components/ui/full-calendar"

const events: CalendarEvent[] = [
  { id: "1", title: "Municipal council", start: new Date(2026, 3, 13, 18), end: new Date(2026, 3, 13, 21) },
  { id: "2", title: "Consultation deadline", start: new Date(2026, 3, 17), end: new Date(2026, 3, 17, 23, 59), allDay: true, color: "destructive" },
]

export function Meetings() {
  return (
    <FullCalendar
      events={events}
      onEventClick={(event) => openEvent(event)}
      onSlotClick={({ start, end, allDay }) => createEvent({ start, end, allDay })}
    />
  )
}
```

#### Week view

A home-help schedule. Visits that overlap are placed side by side.

#### Day view

#### Add and remove events

Click a day, an hour or a day header to create an event in a dialog; click an event to see it or remove it.
The events live in the app's own state.

#### In Swedish

Pass a date-fns `locale` for month and weekday names and translate the labels with `labels`.

### Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `events` | `CalendarEvent[]` | – | `{ id, title, start, end, allDay?, color? }` |
| `date` / `defaultDate` / `onDateChange` | `Date` | today | The date shown (controlled or uncontrolled) |
| `view` / `defaultView` / `onViewChange` | `'month' \| 'week' \| 'day'` | `'month'` | The current view |
| `views` | `FullCalendarView[]` | all three | Views offered in the switcher |
| `weekStartsOn` | `0`–`6` | `1` (Monday) | First day of the week |
| `locale` | date-fns `Locale` | – | Month and weekday names |
| `startHour` / `endHour` | `number` | `7` / `19` | Hours shown in week and day view |
| `maxEventsPerDay` | `number` | `3` | Events per day in month view before "N more" |
| `onEventClick` | `(event) => void` | – | An event was chosen |
| `onSlotClick` | `({ start, end, allDay }) => void` | – | A free day or hour was chosen |
| `labels` | `Partial<FullCalendarLabels>` | English | Texts for buttons, views and screen readers |

Event `color` is one of `default`, `primary`, `destructive` and `chart-1` to `chart-5`.

### Accessibility

- Month view is a table with column headers, and today is marked with `aria-current="date"`.
- Every event is a button, named by its time and title.
- When `onSlotClick` is set, each day number (month view) and day header (week and day view) is a button that says what it does, so keyboard users can create events. The hour cells in the time grid respond to mouse and touch only, to keep the tab order short.
- The title (month, week or day) is announced when it changes.
- The colours are decoration. Always give an event a title that says what it is.

### Related Components

- Calendar
- Date Time Picker
- Popover

## Source

File: components/ui/full-calendar.tsx

```tsx
'use client'

import {
	addDays,
	addMonths,
	addWeeks,
	differenceInMinutes,
	eachDayOfInterval,
	endOfDay,
	endOfMonth,
	endOfWeek,
	format,
	getISOWeek,
	isSameDay,
	isSameMonth,
	isToday,
	type Locale,
	startOfDay,
	startOfMonth,
	startOfWeek,
} from 'date-fns'
import { ChevronLeftIcon, ChevronRightIcon } from 'lucide-react'
import * as React from 'react'
import { Button } from '@/components/ui/button'
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group'
import { cn } from '@/lib/utils'

export type FullCalendarView = 'month' | 'week' | 'day'

export type CalendarEventColor =
	| 'default'
	| 'primary'
	| 'destructive'
	| 'chart-1'
	| 'chart-2'
	| 'chart-3'
	| 'chart-4'
	| 'chart-5'

export interface CalendarEvent {
	id: string
	title: string
	start: Date
	end: Date
	/** Shown in the all-day row in week and day view, without a time */
	allDay?: boolean
	color?: CalendarEventColor
}

type WeekDay = 0 | 1 | 2 | 3 | 4 | 5 | 6

export interface FullCalendarLabels {
	today: string
	previous: string
	next: string
	views: Record<FullCalendarView, string>
	allDay: string
	week: string
	/** "2 more" in month view */
	more: (count: number) => string
	/** Name of the button that creates an event on a day or at a time */
	addEvent: (when: string) => string
}

const defaultLabels: FullCalendarLabels = {
	today: 'Today',
	previous: 'Previous',
	next: 'Next',
	views: { month: 'Month', week: 'Week', day: 'Day' },
	allDay: 'All day',
	week: 'Week',
	more: (count) => `${count} more`,
	addEvent: (when) => `Add event, ${when}`,
}

export interface FullCalendarProps {
	events: CalendarEvent[]
	/** The date shown (controlled). Any date in the month, week or day to show. */
	date?: Date
	defaultDate?: Date
	onDateChange?: (date: Date) => void
	view?: FullCalendarView
	defaultView?: FullCalendarView
	onViewChange?: (view: FullCalendarView) => void
	/** Views offered in the view switcher */
	views?: FullCalendarView[]
	/** Monday by default */
	weekStartsOn?: WeekDay
	/** date-fns locale for month and weekday names */
	locale?: Locale
	/** First and last hour of the time grid in week and day view */
	startHour?: number
	endHour?: number
	/** Events shown per day in month view before "N more" */
	maxEventsPerDay?: number
	onEventClick?: (event: CalendarEvent) => void
	/** A free day (month view) or hour (week and day view) was chosen, e.g. to create an event there */
	onSlotClick?: (slot: { start: Date; end: Date; allDay: boolean }) => void
	labels?: Partial<FullCalendarLabels>
	className?: string
}

const HOUR_HEIGHT = 48

const eventColors: Record<CalendarEventColor, string> = {
	default: 'border-l-muted-foreground bg-muted',
	primary: 'border-l-primary bg-primary/10',
	destructive: 'border-l-destructive bg-destructive/10',
	'chart-1': 'border-l-chart-1 bg-chart-1/15',
	'chart-2': 'border-l-chart-2 bg-chart-2/15',
	'chart-3': 'border-l-chart-3 bg-chart-3/15',
	'chart-4': 'border-l-chart-4 bg-chart-4/15',
	'chart-5': 'border-l-chart-5 bg-chart-5/15',
}

function useControllable<T>(value: T | undefined, defaultValue: T, onChange?: (value: T) => void) {
	const [inner, setInner] = React.useState(defaultValue)
	const current = value ?? inner
	const set = React.useCallback(
		(next: T) => {
			if (value === undefined) setInner(next)
			onChange?.(next)
		},
		[value, onChange],
	)
	return [current, set] as const
}

const timeRange = (event: CalendarEvent, locale?: Locale) =>
	event.allDay ? '' : `${format(event.start, 'HH:mm', { locale })}–${format(event.end, 'HH:mm', { locale })}`

/** Events that touch the given day */
const eventsOn = (events: CalendarEvent[], day: Date) =>
	events.filter((e) => e.start <= endOfDay(day) && e.end > startOfDay(day))

/** The toolbar heading: the month, the week with its date range, or the day */
function viewTitle(
	view: FullCalendarView,
	date: Date,
	{ weekStartsOn, locale, weekLabel }: { weekStartsOn: WeekDay; locale?: Locale; weekLabel: string },
) {
	if (view === 'month') return format(date, 'LLLL yyyy', { locale })
	if (view === 'day') return format(date, 'EEEE d MMMM yyyy', { locale })
	const from = format(startOfWeek(date, { weekStartsOn }), 'd MMM', { locale })
	const to = format(endOfWeek(date, { weekStartsOn }), 'd MMM yyyy', { locale })
	return `${weekLabel} ${getISOWeek(date)} · ${from} – ${to}`
}

/** A full calendar for apps that show and schedule events: month, week and day views with a time grid. */
function FullCalendar({
	events,
	date: dateProp,
	defaultDate,
	onDateChange,
	view: viewProp,
	defaultView = 'month',
	onViewChange,
	views = ['month', 'week', 'day'],
	weekStartsOn = 1,
	locale,
	startHour = 7,
	endHour = 19,
	maxEventsPerDay = 3,
	onEventClick,
	onSlotClick,
	labels: labelsProp,
	className,
}: Readonly<FullCalendarProps>) {
	const labels = { ...defaultLabels, ...labelsProp, views: { ...defaultLabels.views, ...labelsProp?.views } }
	const [date, setDate] = useControllable(dateProp, defaultDate ?? new Date(), onDateChange)
	const [view, setView] = useControllable(viewProp, defaultView, onViewChange)
	const headingId = React.useId()

	const step = (direction: 1 | -1) => {
		if (view === 'month') setDate(addMonths(date, direction))
		else if (view === 'week') setDate(addWeeks(date, direction))
		else setDate(addDays(date, direction))
	}

	const weekStart = startOfWeek(date, { weekStartsOn })
	const title = viewTitle(view, date, { weekStartsOn, locale, weekLabel: labels.week })

	const props = { events, locale, labels, onEventClick, onSlotClick }

	return (
		<section data-slot="full-calendar" aria-labelledby={headingId} className={cn('flex flex-col gap-4', className)}>
			<div data-slot="full-calendar-toolbar" className="flex flex-wrap items-center gap-2">
				<div className="flex items-center gap-1">
					<Button variant="outline" onClick={() => setDate(new Date())}>
						{labels.today}
					</Button>
					<Button variant="ghost" size="icon" aria-label={labels.previous} onClick={() => step(-1)}>
						<ChevronLeftIcon aria-hidden="true" />
					</Button>
					<Button variant="ghost" size="icon" aria-label={labels.next} onClick={() => step(1)}>
						<ChevronRightIcon aria-hidden="true" />
					</Button>
				</div>
				<h2 id={headingId} aria-live="polite" className="mr-auto text-lg font-semibold first-letter:uppercase">
					{title}
				</h2>
				{views.length > 1 ? (
					<ToggleGroup
						variant="outline"
						spacing={0}
						value={[view]}
						onValueChange={(value: string[]) => {
							if (value[0]) setView(value[0] as FullCalendarView)
						}}
					>
						{views.map((v) => (
							<ToggleGroupItem key={v} value={v}>
								{labels.views[v]}
							</ToggleGroupItem>
						))}
					</ToggleGroup>
				) : null}
			</div>

			{view === 'month' ? (
				<MonthView {...props} date={date} weekStartsOn={weekStartsOn} maxEventsPerDay={maxEventsPerDay} />
			) : (
				<TimeGridView
					{...props}
					days={view === 'week' ? eachDayOfInterval({ start: weekStart, end: addDays(weekStart, 6) }) : [date]}
					startHour={startHour}
					endHour={endHour}
				/>
			)}
		</section>
	)
}

type ViewProps = {
	events: CalendarEvent[]
	locale?: Locale
	labels: FullCalendarLabels
	onEventClick?: (event: CalendarEvent) => void
	onSlotClick?: FullCalendarProps['onSlotClick']
}

function EventChip({
	event,
	locale,
	onEventClick,
	showTime = true,
}: Readonly<{
	event: CalendarEvent
	locale?: Locale
	onEventClick?: (event: CalendarEvent) => void
	showTime?: boolean
}>) {
	const time = showTime ? timeRange(event, locale) : ''
	return (
		<button
			type="button"
			data-slot="full-calendar-event"
			title={time ? `${time} ${event.title}` : event.title}
			onClick={() => onEventClick?.(event)}
			className={cn(
				'flex min-h-6 w-full min-w-0 items-center gap-1.5 rounded-sm border-l-3 px-1.5 text-left text-xs text-foreground outline-none transition-colors hover:brightness-95 focus-visible:ring-2 focus-visible:ring-ring dark:hover:brightness-110',
				eventColors[event.color ?? 'primary'],
			)}
		>
			{time ? (
				<span className="shrink-0 tabular-nums text-muted-foreground">{format(event.start, 'HH:mm', { locale })}</span>
			) : null}
			<span className="truncate font-medium">{event.title}</span>
		</button>
	)
}

function MonthView({
	date,
	events,
	locale,
	weekStartsOn,
	labels,
	onEventClick,
	onSlotClick,
	maxEventsPerDay,
}: Readonly<ViewProps & { date: Date; weekStartsOn: WeekDay; maxEventsPerDay: number }>) {
	const start = startOfWeek(startOfMonth(date), { weekStartsOn })
	const end = endOfWeek(endOfMonth(date), { weekStartsOn })
	const days = eachDayOfInterval({ start, end })
	const weeks = Array.from({ length: days.length / 7 }, (_, i) => days.slice(i * 7, i * 7 + 7))

	return (
		<div className="overflow-x-auto rounded-lg border">
			<table data-slot="full-calendar-month" className="w-full min-w-[640px] table-fixed border-collapse text-sm">
				<thead>
					<tr>
						{weeks[0].map((day) => (
							<th
								key={day.toISOString()}
								scope="col"
								className="border-b bg-muted/50 py-2 text-center text-xs font-medium text-muted-foreground"
							>
								<abbr title={format(day, 'EEEE', { locale })} className="no-underline">
									{format(day, 'EEE', { locale })}
								</abbr>
							</th>
						))}
					</tr>
				</thead>
				<tbody>
					{weeks.map((week) => (
						<tr key={week[0].toISOString()}>
							{week.map((day) => {
								const dayEvents = eventsOn(events, day).sort((a, b) => a.start.getTime() - b.start.getTime())
								const visible = dayEvents.slice(0, maxEventsPerDay)
								const hidden = dayEvents.length - visible.length
								const outside = !isSameMonth(day, date)
								const today = isToday(day)
								const dayLabel = format(day, 'EEEE d MMMM', { locale })
								return (
									<td
										key={day.toISOString()}
										aria-current={today ? 'date' : undefined}
										className={cn(
											'h-28 border-t border-r align-top last:border-r-0',
											outside && 'bg-muted/30 text-muted-foreground',
										)}
									>
										<div className="flex h-full flex-col gap-1 p-1">
											{onSlotClick ? (
												<button
													type="button"
													aria-label={labels.addEvent(dayLabel)}
													onClick={() => onSlotClick({ start: startOfDay(day), end: endOfDay(day), allDay: true })}
													className={cn(
														'grid size-7 place-items-center self-start rounded-full text-sm tabular-nums outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring',
														today && 'bg-primary font-semibold text-primary-foreground hover:bg-primary/90',
													)}
												>
													{format(day, 'd')}
												</button>
											) : (
												<span
													className={cn(
														'grid size-7 place-items-center rounded-full text-sm tabular-nums',
														today && 'bg-primary font-semibold text-primary-foreground',
													)}
												>
													{format(day, 'd')}
												</span>
											)}
											<ul className="flex min-w-0 flex-col gap-0.5">
												{visible.map((event) => (
													<li key={event.id} className="min-w-0">
														<EventChip event={event} locale={locale} onEventClick={onEventClick} />
													</li>
												))}
											</ul>
											{hidden > 0 ? (
												<Popover>
													<PopoverTrigger
														render={
															<button
																type="button"
																className="min-h-6 self-start rounded-sm px-1.5 text-xs font-medium text-muted-foreground outline-none hover:bg-muted hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring"
															/>
														}
													>
														{labels.more(hidden)}
													</PopoverTrigger>
													<PopoverContent align="start" className="w-64" aria-label={dayLabel}>
														<p className="text-sm font-medium first-letter:uppercase">{dayLabel}</p>
														<ul className="flex flex-col gap-1">
															{dayEvents.map((event) => (
																<li key={event.id}>
																	<EventChip event={event} locale={locale} onEventClick={onEventClick} />
																</li>
															))}
														</ul>
													</PopoverContent>
												</Popover>
											) : null}
										</div>
									</td>
								)
							})}
						</tr>
					))}
				</tbody>
			</table>
		</div>
	)
}

/** Side-by-side lanes for overlapping timed events */
function layoutDay(events: CalendarEvent[]) {
	const sorted = [...events].sort((a, b) => a.start.getTime() - b.start.getTime() || b.end.getTime() - a.end.getTime())
	const placed: { event: CalendarEvent; lane: number; lanes: number }[] = []
	let group: { event: CalendarEvent; lane: number; lanes: number }[] = []
	let groupEnd = 0
	const laneEnds: number[] = []
	const closeGroup = () => {
		const lanes = Math.max(1, ...group.map((g) => g.lane + 1))
		for (const g of group) g.lanes = lanes
		placed.push(...group)
		group = []
		laneEnds.length = 0
	}
	for (const event of sorted) {
		if (group.length && event.start.getTime() >= groupEnd) closeGroup()
		let lane = laneEnds.findIndex((end) => end <= event.start.getTime())
		if (lane === -1) lane = laneEnds.length
		laneEnds[lane] = event.end.getTime()
		group.push({ event, lane, lanes: 1 })
		groupEnd = Math.max(groupEnd, event.end.getTime())
	}
	if (group.length) closeGroup()
	return placed
}

function useNow() {
	const [now, setNow] = React.useState<Date | null>(null)
	React.useEffect(() => {
		setNow(new Date())
		const id = setInterval(() => setNow(new Date()), 60_000)
		return () => clearInterval(id)
	}, [])
	return now
}

function TimeGridView({
	days,
	events,
	locale,
	labels,
	onEventClick,
	onSlotClick,
	startHour,
	endHour,
}: Readonly<ViewProps & { days: Date[]; startHour: number; endHour: number }>) {
	const hours = Array.from({ length: endHour - startHour }, (_, i) => startHour + i)
	const now = useNow()
	const allDay = days.map((day) => eventsOn(events, day).filter((e) => e.allDay || !isSameDay(e.start, e.end)))
	const hasAllDay = allDay.some((list) => list.length > 0)
	const columns = `3.5rem repeat(${days.length}, minmax(0, 1fr))`

	return (
		<div data-slot="full-calendar-time-grid" className="overflow-x-auto rounded-lg border">
			<div className={cn(days.length > 1 && 'min-w-[720px]')}>
				{/* Day headers */}
				<div className="grid border-b bg-muted/50" style={{ gridTemplateColumns: columns }}>
					<div />
					{days.map((day) => {
						const today = isToday(day)
						const label = format(day, 'EEEE d MMMM', { locale })
						const content = (
							<>
								<span className="text-xs text-muted-foreground">{format(day, 'EEE', { locale })}</span>
								<span
									className={cn(
										'grid size-8 place-items-center rounded-full text-base font-medium tabular-nums',
										today && 'bg-primary text-primary-foreground',
									)}
								>
									{format(day, 'd')}
								</span>
							</>
						)
						return (
							<div
								key={day.toISOString()}
								aria-current={today ? 'date' : undefined}
								className="flex justify-center border-l py-1.5"
							>
								{onSlotClick ? (
									<button
										type="button"
										aria-label={labels.addEvent(label)}
										onClick={() => onSlotClick({ start: startOfDay(day), end: endOfDay(day), allDay: true })}
										className="flex flex-col items-center gap-0.5 rounded-md px-2 py-0.5 outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring"
									>
										{content}
									</button>
								) : (
									<div className="flex flex-col items-center gap-0.5 px-2 py-0.5">{content}</div>
								)}
							</div>
						)
					})}
				</div>

				{/* All-day events */}
				{hasAllDay ? (
					<div className="grid border-b" style={{ gridTemplateColumns: columns }}>
						<div className="px-1 py-1.5 text-right text-xs text-muted-foreground">{labels.allDay}</div>
						{allDay.map((list, i) => (
							<ul key={days[i].toISOString()} className="flex min-w-0 flex-col gap-0.5 border-l p-1">
								{list.map((event) => (
									<li key={event.id} className="min-w-0">
										<EventChip event={event} locale={locale} onEventClick={onEventClick} showTime={false} />
									</li>
								))}
							</ul>
						))}
					</div>
				) : null}

				{/* Time grid */}
				<div className="max-h-[576px] overflow-y-auto">
					<div className="relative grid" style={{ gridTemplateColumns: columns }}>
						<div aria-hidden="true">
							{hours.map((hour) => (
								<div key={hour} className="relative text-right text-xs text-muted-foreground" style={{ height: HOUR_HEIGHT }}>
									<span className="absolute -top-2 right-2 tabular-nums">
										{hour > startHour ? `${String(hour).padStart(2, '0')}:00` : ''}
									</span>
								</div>
							))}
						</div>
						{days.map((day) => {
							const dayStart = new Date(day)
							dayStart.setHours(startHour, 0, 0, 0)
							const dayEnd = new Date(day)
							dayEnd.setHours(endHour, 0, 0, 0)
							const timed = eventsOn(events, day).filter(
								(e) => !e.allDay && isSameDay(e.start, e.end) && e.end > dayStart && e.start < dayEnd,
							)
							const showNow = now && isSameDay(now, day) && now >= dayStart && now < dayEnd
							return (
								<div key={day.toISOString()} className="relative border-l">
									{hours.map((hour) => {
										const slotStart = new Date(day)
										slotStart.setHours(hour, 0, 0, 0)
										const slotEnd = new Date(slotStart)
										slotEnd.setHours(hour + 1)
										return onSlotClick ? (
											<button
												key={hour}
												type="button"
												// Mouse and touch only: keyboard users create events from the day header
												tabIndex={-1}
												aria-label={labels.addEvent(format(slotStart, 'EEEE d MMMM HH:mm', { locale }))}
												onClick={() => onSlotClick({ start: slotStart, end: slotEnd, allDay: false })}
												className="block w-full border-b border-dashed last:border-b-0 hover:bg-muted/50"
												style={{ height: HOUR_HEIGHT }}
											/>
										) : (
											<div key={hour} className="border-b border-dashed last:border-b-0" style={{ height: HOUR_HEIGHT }} />
										)
									})}
									<ul className="absolute inset-0 pointer-events-none">
										{layoutDay(timed).map(({ event, lane, lanes }) => {
											// Clip the event to the visible hours
											const start = Math.max(event.start.getTime(), dayStart.getTime())
											const end = Math.min(event.end.getTime(), dayEnd.getTime())
											const top = (differenceInMinutes(start, dayStart) / 60) * HOUR_HEIGHT
											const height = Math.max((differenceInMinutes(end, start) / 60) * HOUR_HEIGHT, 24)
											return (
												<li
													key={event.id}
													className="pointer-events-auto absolute px-0.5"
													style={{ top, height, left: `${(lane / lanes) * 100}%`, width: `${100 / lanes}%` }}
												>
													<button
														type="button"
														data-slot="full-calendar-event"
														onClick={() => onEventClick?.(event)}
														className={cn(
															'flex size-full min-w-0 flex-col overflow-hidden rounded-sm border-l-3 px-1.5 py-1 text-left text-xs text-foreground outline-none transition-colors hover:brightness-95 focus-visible:z-10 focus-visible:ring-2 focus-visible:ring-ring dark:hover:brightness-110',
															eventColors[event.color ?? 'primary'],
														)}
													>
														<span className="truncate font-medium">{event.title}</span>
														<span className="truncate tabular-nums text-muted-foreground">{timeRange(event, locale)}</span>
													</button>
												</li>
											)
										})}
									</ul>
									{showNow ? (
										<div
											aria-hidden="true"
											className="pointer-events-none absolute inset-x-0 z-10 flex items-center"
											style={{ top: (differenceInMinutes(now, dayStart) / 60) * HOUR_HEIGHT }}
										>
											<span className="-ml-1 size-2 rounded-full bg-destructive" />
											<span className="h-0.5 flex-1 bg-destructive" />
										</div>
									) : null}
								</div>
							)
						})}
					</div>
				</div>
			</div>
		</div>
	)
}

export { FullCalendar }
```

---

# Hover Card

Preview card shown when hovering or focusing a link.

Install: `npx shadcn@latest add https://rdf.dev.360online.com/r/hover-card.json`

Import from: `@/components/ui/hover-card`

npm dependencies: @base-ui/react@^1.8.0

For sighted users to preview content available behind a link, such as a person, a case or a document. Built on Base UI PreviewCard, the card opens on hover or keyboard focus after a short delay.

### Features

- Opens on hover and focus
- Configurable open and close delays (`delay` and `closeDelay` on `HoverCardTrigger`)
- Pass the trigger element with `render` (e.g. `render={<a href="…" />}`); the trigger renders an `<a>` by default
- Positioning on any side with alignment and offset
- Rendered in a portal with enter and exit animations

### Usage

```tsx
import { Button } from '@/components/ui/button'
import { HoverCard, HoverCardContent, HoverCardTrigger } from '@/components/ui/hover-card'

export function OfficerPreview() {
  return (
    <HoverCard>
      <HoverCardTrigger delay={200} render={<Button variant="link" />}>@anna.lindqvist</HoverCardTrigger>
      <HoverCardContent>Case officer, Planning and Building Department.</HoverCardContent>
    </HoverCard>
  )
}
```

#### Default

An inline link to a case officer that previews their role and contact details.

#### Case Preview

An inline case link that previews status, registration date and number of documents.

#### Facility Preview

A button trigger that previews a library’s opening hours, opening above the trigger.

#### Sides

Cards opening on each side of the trigger.

### Accessibility

- Hover cards are ignored by screen readers; do not put essential information only in the card
- The trigger should be a link or button so it can receive keyboard focus
- Avoid interactive content that users must reach from the card
- Use Popover instead when the content must be accessible on touch devices

## Source

File: components/ui/hover-card.tsx

```tsx
'use client'

import { PreviewCard as PreviewCardPrimitive } from '@base-ui/react/preview-card'
import { cn } from '@/lib/utils'

function HoverCard({ ...props }: PreviewCardPrimitive.Root.Props) {
	return <PreviewCardPrimitive.Root data-slot="hover-card" {...props} />
}

function HoverCardTrigger({ ...props }: PreviewCardPrimitive.Trigger.Props) {
	return <PreviewCardPrimitive.Trigger data-slot="hover-card-trigger" {...props} />
}

function HoverCardContent({
	className,
	side = 'bottom',
	sideOffset = 4,
	align = 'center',
	alignOffset = 4,
	...props
}: PreviewCardPrimitive.Popup.Props &
	Pick<PreviewCardPrimitive.Positioner.Props, 'align' | 'alignOffset' | 'side' | 'sideOffset'>) {
	return (
		<PreviewCardPrimitive.Portal data-slot="hover-card-portal">
			<PreviewCardPrimitive.Positioner
				align={align}
				alignOffset={alignOffset}
				side={side}
				sideOffset={sideOffset}
				className="isolate z-50"
			>
				<PreviewCardPrimitive.Popup
					data-slot="hover-card-content"
					className={cn(
						'z-50 w-64 origin-(--transform-origin) rounded-lg bg-popover p-2.5 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-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',
						className,
					)}
					{...props}
				/>
			</PreviewCardPrimitive.Positioner>
		</PreviewCardPrimitive.Portal>
	)
}

export { HoverCard, HoverCardTrigger, HoverCardContent }
```

---

# Input

Text input with consistent sizing, focus and invalid states.

Install: `npx shadcn@latest add https://rdf.dev.360online.com/r/input.json`

Import from: `@/components/ui/input`

npm dependencies: @base-ui/react@^1.8.0

A styled native HTML `input` element. It accepts every standard input attribute and has built-in styles for focus,
disabled, invalid (`aria-invalid`) and file states. Icons, loading indicators and buttons (such as a password
visibility toggle) are composed with `InputGroup`.

### Features

- Plain native `input` — all HTML input attributes and types are supported
- Focus ring, disabled and `aria-invalid` error styling out of the box
- Styled `type="file"` inputs
- Dark mode support
- Compose icons, text and buttons with `InputGroup`

### Usage

```tsx
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'

<div className="grid w-full max-w-sm items-center gap-1.5">
  <Label htmlFor="case-number">Case number</Label>
  <Input id="case-number" placeholder="2026-04812" />
</div>

// Invalid state
<Input aria-invalid defaultValue="not-an-email" />
```

With an icon or a button, use `InputGroup`:

```tsx
import { InputGroup, InputGroupAddon, InputGroupInput } from '@/components/ui/input-group'

<InputGroup>
  <InputGroupAddon>
    <MailIcon />
  </InputGroupAddon>
  <InputGroupInput type="email" placeholder="name@example.se" />
</InputGroup>
```

#### Default

An input paired with a `FieldLabel`.

#### With Description

A `FieldDescription` below the input explains what the value is used for.

#### Address

Several inputs in a `FieldSet`, with `autoComplete` hints so browsers can fill in the address.

#### With Button

An input and a button side by side.

#### Disabled

#### Readonly

Read-only inputs get a dashed border and a muted background.

#### Invalid

Set `aria-invalid` to show the destructive border and ring, and point `aria-describedby` at the error message.

#### File Input

#### With Validation

Client-side validation of a case number that toggles `aria-invalid` once the value is complete.

#### With Icon

An icon composed with `InputGroup`.

#### Loading

A `Spinner` composed with `InputGroup`, for example while address suggestions load.

#### Password

A password visibility toggle composed with `InputGroup` and `InputGroupButton`.

### Props


`Input` accepts all native `input` props (`React.ComponentProps<'input'>`), including `className`. It has no custom
props.

### Accessibility

- Uses the native HTML input element
- Pair with a `Label` via `htmlFor` / `id`
- Use `aria-invalid` and `aria-describedby` to announce errors
- Clear focus indicators and keyboard support

### Best Practices

1. Use the appropriate `type` (text, email, password, etc.) for validation and mobile keyboards.
2. Always use a label; placeholders are supplementary only.
3. Mark invalid fields with `aria-invalid` and show a clear error message.
4. Use `InputGroup` instead of absolutely positioned elements for icons and buttons.

### Related Components

- Input Group
- Textarea
- Label
- Field
- Form

## Source

File: components/ui/input.tsx

```tsx
import { Input as InputPrimitive } from '@base-ui/react/input'
import type * as React from 'react'
import { cn } from '@/lib/utils'

function Input({ className, type, ...props }: React.ComponentProps<'input'>) {
	return (
		<InputPrimitive
			type={type}
			data-slot="input"
			className={cn(
				'h-10 w-full min-w-0 rounded-lg border border-input bg-background px-3 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground hover:border-primary/90 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40',
				type !== 'file' &&
					'read-only:cursor-default read-only:border-dashed read-only:bg-muted/50 read-only:hover:border-input',
				className,
			)}
			{...props}
		/>
	)
}

export { Input }
```

---

# Input Group

Input with leading/trailing addons, buttons and text slots.

Install: `npx shadcn@latest add https://rdf.dev.360online.com/r/input-group.json`

Import from: `@/components/ui/input-group`

Builds on: button, input, textarea

npm dependencies: class-variance-authority@^0.7.1

An input or textarea with addons that share a single border and focus ring. Addons hold icons, text or small
buttons and can sit inline at either end of the control or as full-width blocks above and below it.

### Features

- One border and focus ring shared by the control and its addons; hover, focus, `disabled` and `aria-invalid` states apply to the whole group
- Addons at either end of the control (`inline-start`, `inline-end`) or as full-width blocks above and below it (`block-start`, `block-end`)
- Addons hold icons, text, buttons, a `Kbd` shortcut or a `Spinner`
- Works with a single-line input (`InputGroupInput`) or a textarea (`InputGroupTextarea`)
- Clicking an addon focuses the control, unless the click landed on a button
- Small button sizes made for addons (`xs`, `sm`, `icon-xs`, `icon-sm`)

### Usage

```tsx
import { useState } from 'react'
import { Search, X } from 'lucide-react'
import {
  InputGroup,
  InputGroupAddon,
  InputGroupButton,
  InputGroupInput,
} from '@/components/ui/input-group'

export function InputGroupDemo() {
  const [value, setValue] = useState('')

  return (
    <InputGroup className="max-w-sm">
      <InputGroupAddon>
        <Search />
      </InputGroupAddon>
      <InputGroupInput
        placeholder="Search cases..."
        value={value}
        onChange={(event) => setValue(event.target.value)}
      />
      {value && (
        <InputGroupAddon align="inline-end">
          <InputGroupButton size="icon-xs" aria-label="Clear" onClick={() => setValue('')}>
            <X />
          </InputGroupButton>
        </InputGroupAddon>
      )}
    </InputGroup>
  )
}
```

#### Default

A search field for the case register with a result count at the end.

#### With text

`InputGroupText` for currencies and units.

#### With button

A clear button that only appears while the field has a value.

#### With textarea

A `block-end` addon below a textarea holds an attach button, a character count and a send button.

#### Block addon

A `block-start` addon above a read-only link, with a copy button.

#### Button sizes

#### With keyboard shortcut

#### Loading

A `Spinner` in an inline-end addon while a value is being checked.

#### Disabled

#### Invalid

`aria-invalid` on the control turns the whole group's border and ring destructive.

### Anatomy

```tsx
import {
  InputGroup,
  InputGroupInput,
  InputGroupTextarea,
  InputGroupAddon,
  InputGroupButton,
  InputGroupText,
} from "@/components/ui/input-group"

<InputGroup>
  <InputGroupAddon>                {/* align="inline-start" (default) */}
    <Search />
  </InputGroupAddon>
  <InputGroupInput placeholder="Search..." />
  <InputGroupAddon align="inline-end">
    <InputGroupButton size="icon-xs"><X /></InputGroupButton>
  </InputGroupAddon>
</InputGroup>
```

`InputGroupInput` and `InputGroupTextarea` render the regular `Input` and `Textarea` components with their own border
and ring removed.

### Props


- `InputGroup` — the wrapper (`div` with `role="group"`).
- `InputGroupInput` / `InputGroupTextarea` — the control. Accept all native `input` / `textarea` props.
- `InputGroupAddon` — holds icons, `InputGroupText`, `InputGroupButton` or `Kbd`. `align`: `inline-start`
  (default), `inline-end`, `block-start`, `block-end`.
- `InputGroupButton` — a `Button` (defaults to `variant="ghost"`, `type="button"`). `size`: `xs` (default), `sm`,
  `icon-xs`, `icon-sm`. Accepts all other `Button` variants.
- `InputGroupText` — muted inline text or icon + text.

### Related Components

- Input
- Textarea
- Button Group
- Kbd

## Source

File: components/ui/input-group.tsx

```tsx
'use client'

import { cva, type VariantProps } from 'class-variance-authority'
import type * as React from 'react'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Textarea } from '@/components/ui/textarea'
import { cn } from '@/lib/utils'

function InputGroup({ className, ...props }: React.ComponentProps<'div'>) {
	return (
		<div
			data-slot="input-group"
			role="group"
			className={cn(
				'group/input-group relative flex h-10 w-full min-w-0 items-center rounded-lg border border-input transition-colors outline-none hover:border-primary/90 has-[[data-slot=input-group-control]:read-only]:border-dashed has-[[data-slot=input-group-control]:read-only]:bg-muted/50 has-[[data-slot=input-group-control]:read-only]:hover:border-input in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-[[data-slot=input-group-control]:disabled]:bg-input/50 has-[[data-slot=input-group-control]:disabled]:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot=input-group-control]:focus-visible]:ring-ring has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto dark:bg-input/30 dark:has-[[data-slot=input-group-control]:disabled]:bg-input/80 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5',
				className,
			)}
			{...props}
		/>
	)
}

const inputGroupAddonVariants = cva(
	"flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4",
	{
		variants: {
			align: {
				'inline-start': 'order-first pl-2 has-[>button]:ml-[-0.3rem] has-[>kbd]:ml-[-0.15rem]',
				'inline-end': 'order-last pr-2 has-[>button]:mr-[-0.3rem] has-[>kbd]:mr-[-0.15rem]',
				'block-start': 'order-first w-full justify-start px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2',
				'block-end': 'order-last w-full justify-start px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2',
			},
		},
		defaultVariants: {
			align: 'inline-start',
		},
	},
)

function InputGroupAddon({
	className,
	align = 'inline-start',
	...props
}: React.ComponentProps<'div'> & VariantProps<typeof inputGroupAddonVariants>) {
	return (
		<div
			role="group"
			data-slot="input-group-addon"
			data-align={align}
			className={cn(inputGroupAddonVariants({ align }), className)}
			onClick={(e) => {
				if ((e.target as HTMLElement).closest('button')) {
					return
				}
				e.currentTarget.parentElement?.querySelector('input')?.focus()
			}}
			{...props}
		/>
	)
}

const inputGroupButtonVariants = cva('flex items-center gap-2 text-sm shadow-none', {
	variants: {
		size: {
			xs: "h-6 gap-1 rounded-[calc(var(--radius)-3px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5",
			sm: '',
			'icon-xs': 'size-6 rounded-[calc(var(--radius)-3px)] p-0 has-[>svg]:p-0',
			'icon-sm': 'size-8 p-0 has-[>svg]:p-0',
		},
	},
	defaultVariants: {
		size: 'xs',
	},
})

function InputGroupButton({
	className,
	type = 'button',
	variant = 'ghost',
	size = 'xs',
	...props
}: Omit<React.ComponentProps<typeof Button>, 'size' | 'type'> &
	VariantProps<typeof inputGroupButtonVariants> & {
		type?: 'button' | 'submit' | 'reset'
	}) {
	return (
		<Button
			type={type}
			data-size={size}
			variant={variant}
			className={cn(inputGroupButtonVariants({ size }), className)}
			{...props}
		/>
	)
}

function InputGroupText({ className, ...props }: React.ComponentProps<'span'>) {
	return (
		<span
			className={cn(
				"flex items-center gap-2 text-sm text-muted-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
				className,
			)}
			{...props}
		/>
	)
}

function InputGroupInput({ className, ...props }: React.ComponentProps<'input'>) {
	return (
		<Input
			data-slot="input-group-control"
			className={cn(
				'flex-1 rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 read-only:bg-transparent disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent',
				className,
			)}
			{...props}
		/>
	)
}

function InputGroupTextarea({ className, ...props }: React.ComponentProps<'textarea'>) {
	return (
		<Textarea
			data-slot="input-group-control"
			className={cn(
				'flex-1 resize-none rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 read-only:bg-transparent disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent',
				className,
			)}
			{...props}
		/>
	)
}

export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupText, InputGroupInput, InputGroupTextarea }
```

---

# Input OTP

One-time-password input with individual slots, built on input-otp.

Install: `npx shadcn@latest add https://rdf.dev.360online.com/r/input-otp.json`

Import from: `@/components/ui/input-otp`

npm dependencies: input-otp@^1.5.0, lucide-react@^1.48.0

An accessible OTP (One-Time Password) input component with individual character slots and visual feedback. Perfect for verification codes, PIN entries, and secure authentication flows.

### Features

- Individual character slots with visual focus indicators
- Animated caret for active slot feedback
- Composable slot grouping with separators
- Pattern validation support (digits only, letters only, alphanumeric, custom patterns)
- Controlled and uncontrolled state management
- Disabled and invalid (`aria-invalid`) states
- Auto-focus and keyboard navigation
- Copy/paste support
- Fully accessible with proper ARIA attributes
- Built on top of the `input-otp` library

### Usage

```tsx
import {
  InputOTP,
  InputOTPGroup,
  InputOTPSlot,
  InputOTPSeparator,
} from "@/components/ui/input-otp"
import { REGEXP_ONLY_DIGITS } from 'input-otp'

// Basic usage — each slot reads its state from context by `index`
<InputOTP maxLength={6}>
  <InputOTPGroup>
    <InputOTPSlot index={0} />
    <InputOTPSlot index={1} />
    <InputOTPSlot index={2} />
    <InputOTPSlot index={3} />
    <InputOTPSlot index={4} />
    <InputOTPSlot index={5} />
  </InputOTPGroup>
</InputOTP>

// With separator
<InputOTP maxLength={6}>
  <InputOTPGroup>
    <InputOTPSlot index={0} />
    <InputOTPSlot index={1} />
    <InputOTPSlot index={2} />
  </InputOTPGroup>
  <InputOTPSeparator />
  <InputOTPGroup>
    <InputOTPSlot index={3} />
    <InputOTPSlot index={4} />
    <InputOTPSlot index={5} />
  </InputOTPGroup>
</InputOTP>

// Digits only
<InputOTP maxLength={6} pattern={REGEXP_ONLY_DIGITS}>...</InputOTP>

// Controlled
const [value, setValue] = useState('')
<InputOTP maxLength={6} value={value} onChange={setValue}>...</InputOTP>
```

#### Default

An email confirmation step: six digits split 3-3 with a separator, labelled with `FieldLabel` via the `id` on
`InputOTP`.

#### With Separator

Visual separator between two groups of slots.

#### Multiple Separators

Pairs of digits, here for a date of birth.

#### Patterns

`pattern` restricts which characters are accepted: digits only, letters only, or digits and letters.

#### Controlled

Controlled OTP input with external state management.

#### Disabled

OTP input in disabled state with a pre-filled value.

#### Invalid

Set `aria-invalid` on the slots to show the error state, and describe the error with `FieldError`.

#### Custom Length

A 4-digit PIN.

#### With Completion

`onComplete` fires when all slots are filled — here it signs an application and shows the result.

### Props


#### InputOTP (Root)
- `maxLength: number` - Maximum number of characters (required)
- `value?: string` - The controlled value of the input
- `onChange?: (value: string) => void` - Callback fired when value changes
- `onComplete?: (value: string) => void` - Callback fired when all slots are filled
- `pattern?: string` - Regex source string to validate input characters
- `disabled?: boolean` - Whether the input is disabled
- `autoFocus?: boolean` - Whether to auto-focus the first slot
- `containerClassName?: string` - CSS class for the container element
- `children` - `InputOTPGroup` / `InputOTPSlot` / `InputOTPSeparator` elements (or use the lower-level `render` prop of `input-otp`)

#### InputOTPGroup
- Extends standard `div` props
- Used to group related slots together
- Provides consistent layout and shows the error ring when a slot has `aria-invalid`

#### InputOTPSlot
- `index: number` - The slot index (required). The character, active state and caret are read from the `InputOTP` context.
- `aria-invalid` - Shows the destructive error state
- Extends standard `div` props

#### InputOTPSeparator
- Extends standard `div` props (`role="separator"`)
- Renders a minus icon between groups
- Can be customized with CSS classes for styling

### Patterns

The component supports common input patterns:

```tsx
import { REGEXP_ONLY_DIGITS, REGEXP_ONLY_CHARS, REGEXP_ONLY_DIGITS_AND_CHARS } from 'input-otp'

// Numbers only (0-9)
<InputOTP pattern={REGEXP_ONLY_DIGITS} />

// Letters only (a-z, A-Z)
<InputOTP pattern={REGEXP_ONLY_CHARS} />

// Digits and letters
<InputOTP pattern={REGEXP_ONLY_DIGITS_AND_CHARS} />

// Custom pattern
<InputOTP pattern="^[a-fA-F0-9]+$" />
```

### Accessibility

The Input OTP component follows WCAG 2.1 guidelines and provides:

- Proper ARIA labels and descriptions
- Keyboard navigation support:
  - `←/→`: Navigate between slots
  - `Backspace`: Delete character and move to previous slot
  - `Delete`: Delete character in current slot
  - `Home/End`: Move to first/last slot
  - `Ctrl+A`: Select all text
  - `Ctrl+V`: Paste clipboard content
- Focus management with visual indicators
- Screen reader announcements for value changes
- Support for disabled states
- High contrast visual feedback

### Best Practices

1. **Length and Grouping**
   - Use appropriate maxLength based on your use case (4-8 characters common)
   - Group related digits with `InputOTPGroup` for better visual organization
   - Use separators to break up longer codes (e.g., 3-3 for 6-digit codes)

2. **Validation**
   - Use pattern validation to restrict input types (digits, letters, alphanumeric)
   - Provide clear feedback about expected input format
   - Validate on completion rather than per-character for better UX

3. **User Experience**
   - Enable auto-focus for immediate input capability
   - Provide clear instructions about expected code format
   - Show loading states during verification
   - Handle paste operations gracefully

4. **Security**
   - Clear sensitive values after use
   - Consider auto-submit on completion for better flow
   - Implement rate limiting on the backend
   - Use HTTPS for all OTP-related communications

5. **Error Handling**
   - Show clear error messages for invalid codes
   - Allow users to easily clear and re-enter codes
   - Provide resend functionality with appropriate cooldown
   - Handle network errors gracefully

### Common Use Cases

- **Two-Factor Authentication**: 6-digit TOTP codes
- **SMS Verification**: 4-6 digit SMS codes
- **PIN Entry**: 4-digit PINs for secure access
- **Backup Codes**: 8-character alphanumeric recovery codes
- **Email Verification**: Variable length verification codes

### Related Components

- Input
- Form
- Label
- Button

## Source

File: components/ui/input-otp.tsx

```tsx
'use client'

import { OTPInput, OTPInputContext } from 'input-otp'
import { MinusIcon } from 'lucide-react'
import * as React from 'react'
import { cn } from '@/lib/utils'

function InputOTP({
	className,
	containerClassName,
	...props
}: React.ComponentProps<typeof OTPInput> & {
	containerClassName?: string
}) {
	return (
		<OTPInput
			data-slot="input-otp"
			containerClassName={cn('cn-input-otp flex items-center has-disabled:opacity-50', containerClassName)}
			spellCheck={false}
			className={cn('disabled:cursor-not-allowed', className)}
			{...props}
		/>
	)
}

function InputOTPGroup({ className, ...props }: React.ComponentProps<'div'>) {
	return (
		<div
			data-slot="input-otp-group"
			className={cn(
				'flex items-center rounded-lg has-aria-invalid:border-destructive has-aria-invalid:ring-3 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40',
				className,
			)}
			{...props}
		/>
	)
}

function InputOTPSlot({
	index,
	className,
	...props
}: React.ComponentProps<'div'> & {
	index: number
}) {
	const inputOTPContext = React.useContext(OTPInputContext)
	const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {}

	return (
		<div
			data-slot="input-otp-slot"
			data-active={isActive}
			className={cn(
				'relative flex size-10 items-center justify-center border-y border-r border-input text-sm transition-all outline-none first:rounded-l-lg first:border-l last:rounded-r-lg aria-invalid:border-destructive data-[active=true]:z-10 data-[active=true]:border-ring data-[active=true]:ring-3 data-[active=true]:ring-ring data-[active=true]:aria-invalid:border-destructive data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40',
				className,
			)}
			{...props}
		>
			{char}
			{hasFakeCaret && (
				<div className="pointer-events-none absolute inset-0 flex items-center justify-center">
					<div className="h-4 w-px animate-caret-blink bg-foreground duration-1000" />
				</div>
			)}
		</div>
	)
}

function InputOTPSeparator({ ...props }: React.ComponentProps<'div'>) {
	return (
		<div
			data-slot="input-otp-separator"
			className="flex items-center [&_svg:not([class*='size-'])]:size-4"
			role="separator"
			{...props}
		>
			<MinusIcon />
		</div>
	)
}

export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }
```

---

# Item

Flexible row for lists: media, title, description and actions, with outline and muted variants.

Install: `npx shadcn@latest add https://rdf.dev.360online.com/r/item.json`

Import from: `@/components/ui/item`

Builds on: separator

npm dependencies: @base-ui/react@^1.8.0, class-variance-authority@^0.7.1

A versatile flex container for displaying content such as list rows, document entries, people and settings. Items compose media, title, description, actions, header and footer slots, and can render as links via the `render` prop.

### Features

- Variants: default, outline and muted
- Sizes: default, sm and xs
- Media slot with icon and image variants
- Actions, header and footer slots
- ItemGroup and ItemSeparator for lists
- `render` to render as a link or other element, e.g. `render={<a href="…" />}`

### Usage

```tsx
import { Button } from '@/components/ui/button'
import { Item, ItemActions, ItemContent, ItemDescription, ItemTitle } from '@/components/ui/item'

export function CaseItem() {
  return (
    <Item variant="outline">
      <ItemContent>
        <ItemTitle>Building permit, Storgatan 14</ItemTitle>
        <ItemDescription>Case 2026-04812 · Registered 14 April 2026</ItemDescription>
      </ItemContent>
      <ItemActions>
        <Button variant="outline" size="sm">Open</Button>
      </ItemActions>
    </Item>
  )
}
```

#### Default

An outlined case item with an action, and a small item rendered as a link.

#### Variants

The default, outline and muted variants, shown on council meetings.

#### Sizes

The default, sm and xs sizes.

#### With Icon

An item with icon media and an action.

#### With Avatar

A list of case officers to assign a case to.

#### With Image

`ItemMedia variant="image"` holds a thumbnail — here a token-based placeholder with an icon for each facility.

#### Group

A list of case documents with separators.

#### With Switch

Muted, small items as rows in a notification settings list.

#### With Header And Footer

A case card using header and footer slots.

#### As Link

E-services rendered as links.

### Accessibility

- ItemGroup has role="list"; add role="listitem" to items when semantics matter
- Use `render` with an anchor for navigable items so they are keyboard accessible
- Give icon-only action buttons an aria-label
- Items show a visible focus ring when focusable

## Source

File: components/ui/item.tsx

```tsx
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 type * as React from 'react'
import { Separator } from '@/components/ui/separator'
import { cn } from '@/lib/utils'

function ItemGroup({ className, ...props }: React.ComponentProps<'div'>) {
	return (
		<div
			role="list"
			data-slot="item-group"
			className={cn(
				'group/item-group flex w-full flex-col gap-4 has-data-[size=sm]:gap-2.5 has-data-[size=xs]:gap-2',
				className,
			)}
			{...props}
		/>
	)
}

function ItemSeparator({ className, ...props }: React.ComponentProps<typeof Separator>) {
	return <Separator data-slot="item-separator" orientation="horizontal" className={cn('my-2', className)} {...props} />
}

const itemVariants = cva(
	'group/item flex w-full flex-wrap items-center rounded-lg border text-sm transition-colors duration-100 outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [a]:transition-colors [a]:hover:bg-muted',
	{
		variants: {
			variant: {
				default: 'border-transparent',
				outline: 'border-border',
				muted: 'border-transparent bg-muted/50',
			},
			size: {
				default: 'gap-2.5 px-3 py-2.5',
				sm: 'gap-2.5 px-3 py-2.5',
				xs: 'gap-2 px-2.5 py-2 in-data-[slot=dropdown-menu-content]:p-0',
			},
		},
		defaultVariants: {
			variant: 'default',
			size: 'default',
		},
	},
)

function Item({
	className,
	variant = 'default',
	size = 'default',
	render,
	...props
}: useRender.ComponentProps<'div'> & VariantProps<typeof itemVariants>) {
	return useRender({
		defaultTagName: 'div',
		props: mergeProps<'div'>(
			{
				className: cn(itemVariants({ variant, size, className })),
			},
			props,
		),
		render,
		state: {
			slot: 'item',
			variant,
			size,
		},
	})
}

const itemMediaVariants = cva(
	'flex shrink-0 items-center justify-center gap-2 group-has-data-[slot=item-description]/item:translate-y-0.5 group-has-data-[slot=item-description]/item:self-start [&_svg]:pointer-events-none',
	{
		variants: {
			variant: {
				default: 'bg-transparent',
				icon: "[&_svg:not([class*='size-'])]:size-4",
				image:
					'size-10 overflow-hidden rounded-sm group-data-[size=sm]/item:size-8 group-data-[size=xs]/item:size-6 [&_img]:size-full [&_img]:object-cover',
			},
		},
		defaultVariants: {
			variant: 'default',
		},
	},
)

function ItemMedia({
	className,
	variant = 'default',
	...props
}: React.ComponentProps<'div'> & VariantProps<typeof itemMediaVariants>) {
	return (
		<div
			data-slot="item-media"
			data-variant={variant}
			className={cn(itemMediaVariants({ variant, className }))}
			{...props}
		/>
	)
}

function ItemContent({ className, ...props }: React.ComponentProps<'div'>) {
	return (
		<div
			data-slot="item-content"
			className={cn(
				'flex flex-1 flex-col gap-1 group-data-[size=xs]/item:gap-0 [&+[data-slot=item-content]]:flex-none',
				className,
			)}
			{...props}
		/>
	)
}

function ItemTitle({ className, ...props }: React.ComponentProps<'div'>) {
	return (
		<div
			data-slot="item-title"
			className={cn(
				'line-clamp-1 flex w-fit items-center gap-2 text-sm leading-snug font-medium underline-offset-4',
				className,
			)}
			{...props}
		/>
	)
}

function ItemDescription({ className, ...props }: React.ComponentProps<'p'>) {
	return (
		<p
			data-slot="item-description"
			className={cn(
				'line-clamp-2 text-left text-sm leading-normal font-normal text-muted-foreground group-data-[size=xs]/item:text-xs [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary',
				className,
			)}
			{...props}
		/>
	)
}

function ItemActions({ className, ...props }: React.ComponentProps<'div'>) {
	return <div data-slot="item-actions" className={cn('flex items-center gap-2', className)} {...props} />
}

function ItemHeader({ className, ...props }: React.ComponentProps<'div'>) {
	return (
		<div
			data-slot="item-header"
			className={cn('flex basis-full items-center justify-between gap-2', className)}
			{...props}
		/>
	)
}

function ItemFooter({ className, ...props }: React.ComponentProps<'div'>) {
	return (
		<div
			data-slot="item-footer"
			className={cn('flex basis-full items-center justify-between gap-2', className)}
			{...props}
		/>
	)
}

export {
	Item,
	ItemMedia,
	ItemContent,
	ItemActions,
	ItemGroup,
	ItemSeparator,
	ItemTitle,
	ItemDescription,
	ItemHeader,
	ItemFooter,
}
```

---

# Kbd

Keyboard key and shortcut display.

Install: `npx shadcn@latest add https://rdf.dev.360online.com/r/kbd.json`

Import from: `@/components/ui/kbd`

Displays textual user input from the keyboard, such as keyboard shortcuts. Use KbdGroup to combine several keys into one shortcut, and place keys in buttons, tooltips or input groups.

### Features

- Text or icon keys
- KbdGroup for key combinations
- Adapts its colours inside tooltips
- Works in buttons and input groups

### Usage

```tsx
import { Kbd, KbdGroup } from '@/components/ui/kbd'

export function Shortcut() {
  return (
    <KbdGroup>
      <Kbd>Ctrl</Kbd>
      <Kbd>K</Kbd>
    </KbdGroup>
  )
}
```

#### Default

Single keys, with text or an icon. Give icon keys an `sr-only` name.

#### Group

Key combinations inline in running text.

#### Shortcut List

A keyboard shortcut reference for a case management view, laid out as a description list in a card.

#### In Button

Keys inside buttons, with `aria-keyshortcuts` on the button.

#### In Tooltip

Shortcut hints in tooltips on icon buttons. Keys adapt their colours inside tooltips.

#### In Input Group

A search shortcut inside an input group.

### Accessibility

- Rendered as a native kbd element
- Give icon-only keys a text alternative (e.g. an sr-only span) when the icon carries meaning
- Shortcuts shown visually should also be exposed via aria-keyshortcuts on the related control

## Source

File: components/ui/kbd.tsx

```tsx
import { cn } from '@/lib/utils'

function Kbd({ className, ...props }: React.ComponentProps<'kbd'>) {
	return (
		<kbd
			data-slot="kbd"
			className={cn(
				"pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm bg-muted px-1 font-sans text-xs font-medium text-muted-foreground select-none [&_svg:not([class*='size-'])]:size-3",
				className,
			)}
			{...props}
		/>
	)
}

function KbdGroup({ className, ...props }: React.ComponentProps<'div'>) {
	return <kbd data-slot="kbd-group" className={cn('inline-flex items-center gap-1', className)} {...props} />
}

export { Kbd, KbdGroup }
```

---

# Label

Accessible form label built on Base UI Label.

Install: `npx shadcn@latest add https://rdf.dev.360online.com/r/label.json`

Import from: `@/components/ui/label`

A label component that renders a native `label` element, providing an accessible way to associate text labels with form controls.

### Features

- A plain native `label` element (no primitive dependency)
- Accessible association with form controls via `htmlFor`
- Laid out as `flex items-center gap-2`, so icons and badges line up inline
- Dims automatically after a disabled `peer` control (`peer-disabled`)
- Dims inside a `group` with `data-disabled="true"` (as used by Field)
- Required field indication via `className`

### Usage

```tsx
import { Label } from '@/components/ui/label'
import { Input } from '@/components/ui/input'
import { Checkbox } from '@/components/ui/checkbox'

// Basic usage
<Label>Label text</Label>

// With input
<div className="grid gap-1.5">
  <Label htmlFor="email">Email</Label>
  <Input id="email" type="email" />
</div>

// With checkbox
<div className="flex items-center space-x-2">
  <Checkbox id="terms" />
  <Label htmlFor="terms">Accept terms</Label>
</div>

// Required field
<Label htmlFor="email" className="after:text-destructive after:content-['*']">
  Email
</Label>

// Disabled state (group)
<div className="group grid gap-1.5" data-disabled="true">
  <Label htmlFor="name">Name</Label>
  <Input id="name" disabled />
</div>

// Disabled state (peer)
<div className="flex items-center gap-2">
  <Checkbox id="terms" className="peer" disabled />
  <Label htmlFor="terms">Accept terms</Label>
</div>
```

#### Default

A label associated with an input through `htmlFor`.

#### With Input

Labels on an address block.

#### With Checkbox

A label next to a checkbox, with and without a hint below it.

#### With Switch

A label and a hint for a switch in a settings row.

#### With Radio Group

One label names the group (via `aria-labelledby`), and each option has its own label.

#### Required Field

Mark required fields with a `className`, or mark the optional ones in text.

#### Disabled State

A label inside a `group` with `data-disabled="true"`.

#### Peer Disabled

A label after a disabled `peer` control.

#### With Icon

Badges and an info tooltip lined up next to the label.

### Props


`Label` accepts all native `label` attributes, including:

- `htmlFor`: ID of the associated form control
- `className`: Additional CSS classes

It has no custom variants.

### Accessibility

The Label component follows WAI-ARIA guidelines and best practices:

- Uses native HTML label element
- Provides proper form control association
- Maintains focus management
- Supports screen readers
- Communicates required and disabled states
- Ensures proper color contrast

### Best Practices

1. Association:
   - Always associate labels with form controls
   - Use consistent IDs for form elements
   - Maintain clear relationships

2. Content:
   - Use clear, concise text
   - Include units when necessary
   - Indicate required fields consistently
   - Consider internationalization

3. Styling:
   - Maintain sufficient contrast
   - Use appropriate text size
   - Consider mobile viewports
   - Handle long text gracefully

4. Accessibility:
   - Provide clear visual feedback
   - Support keyboard navigation
   - Use semantic markup
   - Consider screen reader users

5. Implementation:
   - Group related form elements
   - Handle disabled states
   - Consider form validation
   - Maintain consistent spacing

### Related Components

- Input
- Checkbox
- RadioGroup
- Select
- Switch
- Form
- Field

## Source

File: components/ui/label.tsx

```tsx
'use client'

import type * as React from 'react'
import { cn } from '@/lib/utils'

function Label({ className, ...props }: React.ComponentProps<'label'>) {
	return (
		// biome-ignore lint/a11y/noLabelWithoutControl: the control is associated by the consumer via htmlFor or nesting
		<label
			data-slot="label"
			className={cn(
				'flex items-center gap-2 text-sm leading-none font-medium text-foreground select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50',
				className,
			)}
			{...props}
		/>
	)
}

export { Label }
```

---

# Marker

Small status marker (dot, count or label) to annotate other elements.

Install: `npx shadcn@latest add https://rdf.dev.360online.com/r/marker.json`

Import from: `@/components/ui/marker`

npm dependencies: @base-ui/react@^1.8.0, class-variance-authority@^0.7.1

Displays inline status updates, system notes and labelled separators in a conversation or activity log, such as "Case registered" or a date divider. Marker comes in default (inline), border (bordered row) and separator (centred label with divider lines) variants.

### Features

- Variants: default, separator and border
- Optional decorative icon slot
- Supports links inside the content
- Works with Spinner and the shimmer utility for progress
- `render` to render as another element, e.g. `render={<output />}`

### Usage

```tsx
import { Marker, MarkerContent, MarkerIcon } from '@/components/ui/marker'
import { Check } from 'lucide-react'

export function CaseRegistered() {
  return (
    <Marker>
      <MarkerIcon>
        <Check />
      </MarkerIcon>
      <MarkerContent>Case 2026-04812 was registered</MarkerContent>
    </Marker>
  )
}
```

#### Default

An inline status note.

#### Separator

Centred date labels and a closing note with divider lines.

#### Border

Rows separated by a bottom border.

#### Case History

Separator markers group the events of a case by day, with inline markers for each event and its time.

#### Progress

A completed step followed by a progress marker rendered as an `output` element.

#### With Link

A marker containing a link.

#### In Conversation

Markers mixed with messages in a conversation.

### Accessibility

- Marker is presentational by default; MarkerIcon is aria-hidden
- For live progress updates render it as an output element or add role="status"
- Use a real link or button (via the `render` prop) for interactive markers
- Keep the text meaningful on its own without the icon

## Source

File: components/ui/marker.tsx

```tsx
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 type * as React from 'react'
import { cn } from '@/lib/utils'

const markerVariants = cva(
	"group/marker relative flex min-h-4 w-full items-center gap-2 text-left text-sm text-muted-foreground [&_svg:not([class*='size-'])]:size-4 [a]:underline [a]:underline-offset-3 [a]:hover:text-foreground",
	{
		variants: {
			variant: {
				default: '',
				separator:
					'before:mr-1 before:h-px before:min-w-0 before:flex-1 before:bg-border after:ml-1 after:h-px after:min-w-0 after:flex-1 after:bg-border',
				border: 'border-b border-border pb-2',
			},
		},
	},
)

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
			data-slot="marker-icon"
			aria-hidden="true"
			className={cn("size-4 shrink-0 [&_svg:not([class*='size-'])]:size-4", className)}
			{...props}
		/>
	)
}

function MarkerContent({ className, ...props }: React.ComponentProps<'span'>) {
	return (
		<span
			data-slot="marker-content"
			className={cn(
				'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 *:[a]:hover:text-foreground',
				className,
			)}
			{...props}
		/>
	)
}

export { Marker, MarkerIcon, MarkerContent, markerVariants }
```

---

# Menubar

Desktop-style menu bar with menus, submenus, checkboxes and radio items.

Install: `npx shadcn@latest add https://rdf.dev.360online.com/r/menubar.json`

Import from: `@/components/ui/menubar`

Builds on: dropdown-menu

npm dependencies: @base-ui/react@^1.8.0, lucide-react@^1.48.0

A visually persistent menu common in desktop applications that gives quick access to a consistent set of commands, for example in a case management workspace. Built on [Base UI Menubar](https://base-ui.com/react/components/menubar) with submenus, checkbox and radio items, labels and keyboard shortcuts.

### Features

- Multiple top-level menus
- Submenus
- Checkbox and radio items
- Labels, separators and inset items
- Shortcut hints
- Destructive item variant
- Full keyboard navigation

### Usage

```tsx
import {
  Menubar,
  MenubarContent,
  MenubarItem,
  MenubarMenu,
  MenubarSeparator,
  MenubarShortcut,
  MenubarTrigger,
} from '@/components/ui/menubar'

export function CaseMenubar() {
  return (
    <Menubar>
      <MenubarMenu>
        <MenubarTrigger>Case</MenubarTrigger>
        <MenubarContent>
          <MenubarItem>
            New case <MenubarShortcut>Ctrl+N</MenubarShortcut>
          </MenubarItem>
          <MenubarSeparator />
          <MenubarItem>Print</MenubarItem>
        </MenubarContent>
      </MenubarMenu>
    </Menubar>
  )
}
```

A `MenubarLabel` names its group, so place it inside a `MenubarGroup` or `MenubarRadioGroup`.
Checkbox and radio items keep the menu open by default; pass `closeOnClick` to close it on selection.

#### Default

A full menubar with submenus, checkbox and radio items.

#### With Icons

Items with icons and a destructive action.

#### Checkbox Items

Controlled checkbox items for column visibility.

#### Radio Items

Controlled radio items for sorting.

#### In Workspace

A borderless menubar in the title bar of a case management window.

#### Disabled

A menubar with a disabled trigger (Edit) and disabled items among normal ones.

### Accessibility

- Implements the WAI-ARIA menubar pattern
- Arrow keys move between menus and items; Enter and Space activate
- Typeahead jumps to items by their text
- Escape closes the open menu and returns focus to its trigger
- MenubarShortcut is only a visual hint; bind the shortcut separately

## Source

File: components/ui/menubar.tsx

```tsx
'use client'

import { Menu as MenuPrimitive } from '@base-ui/react/menu'
import { Menubar as MenubarPrimitive } from '@base-ui/react/menubar'
import { CheckIcon } from 'lucide-react'
import * as React from 'react'

import {
	DropdownMenu,
	DropdownMenuContent,
	DropdownMenuGroup,
	DropdownMenuItem,
	DropdownMenuLabel,
	DropdownMenuPortal,
	DropdownMenuRadioGroup,
	DropdownMenuSeparator,
	DropdownMenuShortcut,
	DropdownMenuSub,
	DropdownMenuSubContent,
	DropdownMenuSubTrigger,
	DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu'
import { cn } from '@/lib/utils'

function Menubar({ className, ...props }: MenubarPrimitive.Props) {
	return (
		<MenubarPrimitive
			data-slot="menubar"
			className={cn('flex h-10 items-center gap-0.5 rounded-lg border p-[3px]', className)}
			{...props}
		/>
	)
}

function MenubarMenu({ ...props }: React.ComponentProps<typeof DropdownMenu>) {
	return <DropdownMenu data-slot="menubar-menu" {...props} />
}

function MenubarGroup({ ...props }: React.ComponentProps<typeof DropdownMenuGroup>) {
	return <DropdownMenuGroup data-slot="menubar-group" {...props} />
}

function MenubarPortal({ ...props }: React.ComponentProps<typeof DropdownMenuPortal>) {
	return <DropdownMenuPortal data-slot="menubar-portal" {...props} />
}

function MenubarTrigger({ className, ...props }: React.ComponentProps<typeof DropdownMenuTrigger>) {
	return (
		<DropdownMenuTrigger
			data-slot="menubar-trigger"
			className={cn(
				'flex h-8 items-center rounded-sm px-2.5 text-sm font-medium outline-hidden select-none hover:bg-muted focus-visible:bg-muted focus-visible:ring-3 focus-visible:ring-ring aria-expanded:bg-muted data-disabled:pointer-events-none data-disabled:opacity-50',
				className,
			)}
			{...props}
		/>
	)
}

function MenubarContent({
	className,
	align = 'start',
	alignOffset = -4,
	sideOffset = 8,
	...props
}: React.ComponentProps<typeof DropdownMenuContent>) {
	return (
		<DropdownMenuContent
			data-slot="menubar-content"
			align={align}
			alignOffset={alignOffset}
			sideOffset={sideOffset}
			className={cn(
				'min-w-36 rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-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',
				className,
			)}
			{...props}
		/>
	)
}

function MenubarItem({
	className,
	inset,
	variant = 'default',
	...props
}: React.ComponentProps<typeof DropdownMenuItem>) {
	return (
		<DropdownMenuItem
			data-slot="menubar-item"
			data-inset={inset}
			data-variant={variant}
			className={cn(
				"group/menubar-item gap-1.5 rounded-md px-1.5 py-1 text-sm focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive!",
				className,
			)}
			{...props}
		/>
	)
}

function MenubarCheckboxItem({
	className,
	children,
	checked,
	inset,
	...props
}: MenuPrimitive.CheckboxItem.Props & {
	inset?: boolean
}) {
	return (
		<MenuPrimitive.CheckboxItem
			data-slot="menubar-checkbox-item"
			data-inset={inset}
			className={cn(
				'relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-1.5 pl-7 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0',
				className,
			)}
			checked={checked}
			{...props}
		>
			<span className="pointer-events-none absolute left-1.5 flex size-4 items-center justify-center [&_svg:not([class*='size-'])]:size-4">
				<MenuPrimitive.CheckboxItemIndicator>
					<CheckIcon />
				</MenuPrimitive.CheckboxItemIndicator>
			</span>
			{children}
		</MenuPrimitive.CheckboxItem>
	)
}

function MenubarRadioGroup({ ...props }: React.ComponentProps<typeof DropdownMenuRadioGroup>) {
	return <DropdownMenuRadioGroup data-slot="menubar-radio-group" {...props} />
}

function MenubarRadioItem({
	className,
	children,
	inset,
	...props
}: MenuPrimitive.RadioItem.Props & {
	inset?: boolean
}) {
	return (
		<MenuPrimitive.RadioItem
			data-slot="menubar-radio-item"
			data-inset={inset}
			className={cn(
				"relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-1.5 pl-7 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
				className,
			)}
			{...props}
		>
			<span className="pointer-events-none absolute left-1.5 flex size-4 items-center justify-center [&_svg:not([class*='size-'])]:size-4">
				<MenuPrimitive.RadioItemIndicator>
					<CheckIcon />
				</MenuPrimitive.RadioItemIndicator>
			</span>
			{children}
		</MenuPrimitive.RadioItem>
	)
}

function MenubarLabel({
	className,
	inset,
	...props
}: React.ComponentProps<typeof DropdownMenuLabel> & {
	inset?: boolean
}) {
	return (
		<DropdownMenuLabel
			data-slot="menubar-label"
			data-inset={inset}
			className={cn('px-1.5 py-1 text-sm font-medium data-inset:pl-7', className)}
			{...props}
		/>
	)
}

function MenubarSeparator({ className, ...props }: React.ComponentProps<typeof DropdownMenuSeparator>) {
	return (
		<DropdownMenuSeparator
			data-slot="menubar-separator"
			className={cn('-mx-1 my-1 h-px bg-border', className)}
			{...props}
		/>
	)
}

function MenubarShortcut({ className, ...props }: React.ComponentProps<typeof DropdownMenuShortcut>) {
	return (
		<DropdownMenuShortcut
			data-slot="menubar-shortcut"
			className={cn(
				'ml-auto text-xs tracking-widest text-muted-foreground group-focus/menubar-item:text-accent-foreground',
				className,
			)}
			{...props}
		/>
	)
}

function MenubarSub({ ...props }: React.ComponentProps<typeof DropdownMenuSub>) {
	return <DropdownMenuSub data-slot="menubar-sub" {...props} />
}

function MenubarSubTrigger({
	className,
	inset,
	...props
}: React.ComponentProps<typeof DropdownMenuSubTrigger> & {
	inset?: boolean
}) {
	return (
		<DropdownMenuSubTrigger
			data-slot="menubar-sub-trigger"
			data-inset={inset}
			className={cn(
				"gap-1.5 rounded-md px-1.5 py-1 text-sm focus:bg-accent focus:text-accent-foreground data-inset:pl-7 data-open:bg-accent data-open:text-accent-foreground [&_svg:not([class*='size-'])]:size-4",
				className,
			)}
			{...props}
		/>
	)
}

function MenubarSubContent({ className, ...props }: React.ComponentProps<typeof DropdownMenuSubContent>) {
	return (
		<DropdownMenuSubContent
			data-slot="menubar-sub-content"
			className={cn(
				'min-w-32 rounded-lg bg-popover p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 duration-100 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',
				className,
			)}
			{...props}
		/>
	)
}

export {
	Menubar,
	MenubarPortal,
	MenubarMenu,
	MenubarTrigger,
	MenubarContent,
	MenubarGroup,
	MenubarSeparator,
	MenubarLabel,
	MenubarItem,
	MenubarShortcut,
	MenubarCheckboxItem,
	MenubarRadioGroup,
	MenubarRadioItem,
	MenubarSub,
	MenubarSubTrigger,
	MenubarSubContent,
}
```

---

# Message

Chat message layout with avatar, author, content and actions.

Install: `npx shadcn@latest add https://rdf.dev.360online.com/r/message.json`

Import from: `@/components/ui/message`

Displays a message in a conversation, with an optional avatar, header, footer and start or end alignment. Message is the layout wrapper for chat transcripts and composes with Bubble, Attachment and Marker.

### Features

- Start and end alignment
- Avatar anchored to the bottom of the message
- Header and footer slots for author, time and actions
- MessageGroup for consecutive messages
- Composes with Bubble, Attachment and Marker

### Usage

```tsx
import { Avatar, AvatarFallback } from '@/components/ui/avatar'
import { Bubble, BubbleContent } from '@/components/ui/bubble'
import { Message, MessageAvatar, MessageContent, MessageHeader } from '@/components/ui/message'

export function OfficerMessage() {
  return (
    <Message>
      <MessageAvatar>
        <Avatar>
          <AvatarFallback>AL</AvatarFallback>
        </Avatar>
      </MessageAvatar>
      <MessageContent>
        <MessageHeader>Anna Lindqvist</MessageHeader>
        <Bubble variant="muted">
          <BubbleContent>Your application has been registered.</BubbleContent>
        </Bubble>
      </MessageContent>
    </Message>
  )
}
```

#### Default

A message with avatar, header and bubble.

#### Alignment

Messages from both sides.

#### With Header And Footer

Author with role badge, time and a read receipt.

#### Grouped

Several bubbles from the same sender.

#### With Attachment

A message with a file attachment.

#### Assistant

An assistant-style answer with footer actions and a hand-over marker.

#### Not Sent

A failed message with a destructive bubble and a retry action in the footer.

### Accessibility

- Wrap transcripts in a container with an accessible name (e.g. role="log")
- Avatars are decorative when the author is named in the header
- Give icon-only footer actions an aria-label
- Convey status icons such as read receipts with text alternatives

## Source

File: components/ui/message.tsx

```tsx
import type * as React from 'react'
import { cn } from '@/lib/utils'

function MessageGroup({ className, ...props }: React.ComponentProps<'div'>) {
	return <div data-slot="message-group" className={cn('flex min-w-0 flex-col gap-2', className)} {...props} />
}

function Message({ className, align = 'start', ...props }: React.ComponentProps<'div'> & { align?: 'start' | 'end' }) {
	return (
		<div
			data-slot="message"
			data-align={align}
			className={cn(
				'group/message relative flex w-full min-w-0 gap-2 text-sm data-[align=end]:flex-row-reverse',
				className,
			)}
			{...props}
		/>
	)
}

function MessageAvatar({ className, ...props }: React.ComponentProps<'div'>) {
	return (
		<div
			data-slot="message-avatar"
			className={cn(
				'flex w-fit min-w-8 shrink-0 items-center justify-center self-end group-has-data-[slot=message-footer]/message:-translate-y-8',
				className,
			)}
			{...props}
		/>
	)
}

function MessageContent({ className, ...props }: React.ComponentProps<'div'>) {
	return (
		<div
			data-slot="message-content"
			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,
			)}
			{...props}
		/>
	)
}

function MessageHeader({ className, ...props }: React.ComponentProps<'div'>) {
	return (
		<div
			data-slot="message-header"
			className={cn(
				'flex max-w-full min-w-0 items-center px-3 text-xs font-medium text-muted-foreground group-has-data-[variant=ghost]/message:px-0',
				className,
			)}
			{...props}
		/>
	)
}

function MessageFooter({ className, ...props }: React.ComponentProps<'div'>) {
	return (
		<div
			data-slot="message-footer"
			className={cn(
				'flex max-w-full min-w-0 items-center px-3 text-xs font-medium text-muted-foreground group-has-data-[variant=ghost]/message:px-0 group-data-[align=end]/message:justify-end',
				className,
			)}
			{...props}
		/>
	)
}

export { MessageGroup, Message, MessageAvatar, MessageContent, MessageFooter, MessageHeader }
```

---

# Message Scroller

Scroll container for chat messages that sticks to the bottom as new messages arrive.

Install: `npx shadcn@latest add https://rdf.dev.360online.com/r/message-scroller.json`

Import from: `@/components/ui/message-scroller`

Builds on: button

npm dependencies: @shadcn/react@^0.3.1, lucide-react@^1.48.0

A scroll container for chat transcripts built on @shadcn/react. It anchors new turns, follows the live edge while messages stream in, preserves the scroll position when history is prepended and shows a scroll-to-end button. Wrap it in MessageScrollerProvider and give it a height-constrained parent.

### Features

- Scroll anchoring on turn boundaries via scrollAnchor
- Auto-scroll that follows streamed messages
- Default opening position: start, end or last anchor
- Preserves position when older messages are prepended
- Scroll-to-end and scroll-to-start buttons
- Hooks: useMessageScroller, useMessageScrollerScrollable and useMessageScrollerVisibility

### Usage

```tsx
import { Message } from '@/components/ui/message'
import {
  MessageScroller,
  MessageScrollerButton,
  MessageScrollerContent,
  MessageScrollerItem,
  MessageScrollerProvider,
  MessageScrollerViewport,
} from '@/components/ui/message-scroller'

export function Transcript({ messages }: { messages: { id: string; role: string }[] }) {
  return (
    <div className="h-[480px]">
      <MessageScrollerProvider autoScroll>
        <MessageScroller>
          <MessageScrollerViewport>
            <MessageScrollerContent>
              {messages.map((message) => (
                <MessageScrollerItem key={message.id} messageId={message.id} scrollAnchor={message.role === 'user'}>
                  <Message>{/* ... */}</Message>
                </MessageScrollerItem>
              ))}
            </MessageScrollerContent>
          </MessageScrollerViewport>
          <MessageScrollerButton />
        </MessageScroller>
      </MessageScrollerProvider>
    </div>
  )
}
```

#### Default

A conversation with a case officer in a fixed-height chat window. Scroll up to reveal the scroll-to-end button.

#### Open At Last Anchor

Opens at the last user turn and keeps part of the previous turn visible.

#### Live Conversation

Send a message and watch auto-scroll follow the officer's reply.

#### Jump To Message

Jump controls built with useMessageScroller and useMessageScrollerVisibility.

#### With Markers And Attachments

Date markers and a document attachment inside the transcript.

### Accessibility

- Give the viewport an aria-label describing the conversation
- The viewport is keyboard scrollable and focusable
- The scroll button includes a screen reader label and is hidden when inactive
- New content is exposed to assistive technology through the content region

## Source

File: components/ui/message-scroller.tsx

```tsx
'use client'

import { MessageScroller as MessageScrollerPrimitive } from '@shadcn/react/message-scroller'
import { ArrowDownIcon } from 'lucide-react'
import type * as React from 'react'

import { Button } from '@/components/ui/button'
import { cn } from '@/lib/utils'

function MessageScrollerProvider(props: React.ComponentProps<typeof MessageScrollerPrimitive.Provider>) {
	return <MessageScrollerPrimitive.Provider {...props} />
}

function MessageScroller({ className, ...props }: React.ComponentProps<typeof MessageScrollerPrimitive.Root>) {
	return (
		<MessageScrollerPrimitive.Root
			data-slot="message-scroller"
			className={cn('group/message-scroller relative flex size-full min-h-0 flex-col overflow-hidden', className)}
			{...props}
		/>
	)
}

function MessageScrollerViewport({
	className,
	...props
}: React.ComponentProps<typeof MessageScrollerPrimitive.Viewport>) {
	return (
		<MessageScrollerPrimitive.Viewport
			data-slot="message-scroller-viewport"
			className={cn(
				'size-full min-h-0 min-w-0 scroll-fade-b scrollbar-thin scrollbar-gutter-stable overflow-y-auto overscroll-contain contain-content data-autoscrolling:scrollbar-thumb-transparent data-autoscrolling:scrollbar-track-transparent data-pending-scroll:invisible',
				className,
			)}
			{...props}
		/>
	)
}

function MessageScrollerContent({
	className,
	...props
}: React.ComponentProps<typeof MessageScrollerPrimitive.Content>) {
	return (
		<MessageScrollerPrimitive.Content
			data-slot="message-scroller-content"
			className={cn('flex h-max min-h-full flex-col gap-6', className)}
			{...props}
		/>
	)
}

function MessageScrollerItem({
	className,
	scrollAnchor = false,
	...props
}: React.ComponentProps<typeof MessageScrollerPrimitive.Item>) {
	return (
		<MessageScrollerPrimitive.Item
			data-slot="message-scroller-item"
			scrollAnchor={scrollAnchor}
			className={cn('min-w-0 shrink-0 [contain-intrinsic-size:auto_10rem] [content-visibility:auto]', className)}
			{...props}
		/>
	)
}

function MessageScrollerButton({
	direction = 'end',
	className,
	children,
	render,
	variant = 'secondary',
	size = 'icon-sm',
	...props
}: React.ComponentProps<typeof MessageScrollerPrimitive.Button> &
	Pick<React.ComponentProps<typeof Button>, 'variant' | 'size'>) {
	return (
		<MessageScrollerPrimitive.Button
			data-slot="message-scroller-button"
			data-direction={direction}
			data-variant={variant}
			data-size={size}
			direction={direction}
			className={cn(
				'absolute left-1/2 -translate-x-1/2 border-border bg-background text-foreground transition-[translate,scale,opacity] duration-200 hover:bg-muted hover:text-foreground data-[active=false]:pointer-events-none data-[active=false]:scale-95 data-[active=false]:opacity-0 data-[active=false]:duration-400 data-[active=false]:ease-[cubic-bezier(0.7,0,0.84,0)] data-[active=true]:translate-y-0 data-[active=true]:scale-100 data-[active=true]:opacity-100 data-[active=true]:ease-[cubic-bezier(0.23,1,0.32,1)] data-[direction=end]:bottom-4 data-[direction=end]:data-[active=false]:translate-y-full data-[direction=start]:top-4 data-[direction=start]:data-[active=false]:-translate-y-full rtl:translate-x-1/2 data-[direction=start]:[&_svg]:rotate-180',
				className,
			)}
			render={render ?? <Button variant={variant} size={size} />}
			{...props}
		>
			{children ?? (
				<>
					<ArrowDownIcon />
					<span className="sr-only">{direction === 'end' ? 'Scroll to end' : 'Scroll to start'}</span>
				</>
			)}
		</MessageScrollerPrimitive.Button>
	)
}

export {
	MessageScrollerProvider,
	MessageScroller,
	MessageScrollerViewport,
	MessageScrollerContent,
	MessageScrollerItem,
	MessageScrollerButton,
}
export {
	useMessageScroller,
	useMessageScrollerScrollable,
	useMessageScrollerVisibility,
} from '@shadcn/react/message-scroller'
```

---

# Native Select

A styled native HTML select element for simple lists and mobile-friendly forms.

Install: `npx shadcn@latest add https://rdf.dev.360online.com/r/native-select.json`

Import from: `@/components/ui/native-select`

npm dependencies: lucide-react@^1.48.0

A styled native HTML select element. Use it when you want the platform picker (for example on mobile devices), native form submission or maximum robustness, instead of the custom Select popover.

### Features

- Native select behaviour and form submission
- Sizes: default and sm
- Option groups
- Disabled and invalid states
- Consistent styling with other inputs

### Usage

```tsx
import { NativeSelect, NativeSelectOption } from '@/components/ui/native-select'

export function CaseTypeSelect() {
  return (
    <NativeSelect defaultValue="">
      <NativeSelectOption value="" disabled>
        Select case type
      </NativeSelectOption>
      <NativeSelectOption value="building-permit">Building permit</NativeSelectOption>
      <NativeSelectOption value="parking-permit">Parking permit</NativeSelectOption>
    </NativeSelect>
  )
}
```

#### Default

A case type picker with a label and a description.

#### With Groups

Departments organised in option groups.

#### Sizes

The default and sm sizes.

#### Filter Toolbar

Small selects used as filters above a case list. Each select has a visually hidden label.

#### In a Form

A school placement application with several selects in a card.

#### Disabled

A locked case status.

#### Invalid

A required parking zone with an error message.

### Accessibility

- Uses the native select element with full platform accessibility
- Associate a label with htmlFor and id; use a visually hidden label when the context makes it obvious
- Set aria-invalid for invalid values and describe the error in text
- The chevron icon is aria-hidden

## Source

File: components/ui/native-select.tsx

```tsx
import { ChevronDownIcon } from 'lucide-react'
import type * as React from 'react'
import { cn } from '@/lib/utils'

type NativeSelectProps = Omit<React.ComponentProps<'select'>, 'size'> & {
	size?: 'sm' | 'default'
}

function NativeSelect({ className, size = 'default', ...props }: NativeSelectProps) {
	return (
		<div
			className={cn('group/native-select relative w-fit has-[select:disabled]:opacity-50', className)}
			data-slot="native-select-wrapper"
			data-size={size}
		>
			<select
				data-slot="native-select"
				data-size={size}
				className="h-10 w-full min-w-0 appearance-none rounded-lg border border-input bg-transparent py-1 pr-8 pl-2.5 text-sm transition-colors outline-none select-none selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-[size=sm]:h-8 data-[size=sm]:rounded-[min(var(--radius-md),10px)] data-[size=sm]:py-0.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40"
				{...props}
			/>
			<ChevronDownIcon
				className="pointer-events-none absolute top-1/2 right-2.5 size-4 -translate-y-1/2 text-muted-foreground select-none"
				aria-hidden="true"
				data-slot="native-select-icon"
			/>
		</div>
	)
}

function NativeSelectOption({ className, ...props }: React.ComponentProps<'option'>) {
	return (
		<option data-slot="native-select-option" className={cn('bg-[Canvas] text-[CanvasText]', className)} {...props} />
	)
}

function NativeSelectOptGroup({ className, ...props }: React.ComponentProps<'optgroup'>) {
	return (
		<optgroup data-slot="native-select-optgroup" className={cn('bg-[Canvas] text-[CanvasText]', className)} {...props} />
	)
}

export { NativeSelect, NativeSelectOptGroup, NativeSelectOption }
```

---

# Navigation Menu

Top-level site navigation with dropdown panels.

Install: `npx shadcn@latest add https://rdf.dev.360online.com/r/navigation-menu.json`

Import from: `@/components/ui/navigation-menu`

npm dependencies: @base-ui/react@^1.8.0, class-variance-authority@^0.7.1, lucide-react@^1.48.0

A collection of links for navigating websites, such as a municipal portal with services, politics and documents. Built on Base UI NavigationMenu with dropdown panels in a shared animated popup and full keyboard support.

### Features

- Dropdown panels with rich content
- Shared animated popup that resizes between panels, with configurable alignment
- Plain links styled as triggers with navigationMenuTriggerStyle
- Active link state
- Keyboard navigation and focus management

### Usage

```tsx
import {
  NavigationMenu,
  NavigationMenuContent,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  NavigationMenuTrigger,
} from '@/components/ui/navigation-menu'

export function PortalNavigation() {
  return (
    <NavigationMenu>
      <NavigationMenuList>
        <NavigationMenuItem>
          <NavigationMenuTrigger>Services</NavigationMenuTrigger>
          <NavigationMenuContent>
            <NavigationMenuLink href="/building-permits">Building permits</NavigationMenuLink>
          </NavigationMenuContent>
        </NavigationMenuItem>
      </NavigationMenuList>
    </NavigationMenu>
  )
}
```

#### Default

A portal navigation with a featured panel and a service grid.

#### With Icons

Icon tiles with short descriptions, and a compact list of icon links.

#### Center Aligned

The panel popup centred under the open trigger with `align="center"`.

#### Links Only

Top-level links styled as triggers with an active state.

#### Site Header

The navigation menu in a municipal portal header, next to the logo and a log in button.

### Accessibility

- Rendered as a nav element with a list of items
- Tab and arrow keys move between triggers and links
- Escape closes the open panel and returns focus to its trigger
- Use the active prop on the link for the current page (sets aria-current)

### Custom link elements

`NavigationMenuLink` renders an `<a>`. To use a router link, pass it with the `render` prop:

```tsx
<NavigationMenuLink render={<Link href="/contact" />}>Contact</NavigationMenuLink>
```

## Source

File: components/ui/navigation-menu.tsx

```tsx
import { NavigationMenu as NavigationMenuPrimitive } from '@base-ui/react/navigation-menu'
import { cva } from 'class-variance-authority'
import { ChevronDownIcon } from 'lucide-react'
import type * as React from 'react'
import { cn } from '@/lib/utils'

function NavigationMenu({
	align = 'start',
	className,
	children,
	...props
}: NavigationMenuPrimitive.Root.Props & Pick<NavigationMenuPrimitive.Positioner.Props, 'align'>) {
	return (
		<NavigationMenuPrimitive.Root
			data-slot="navigation-menu"
			className={cn('group/navigation-menu relative flex max-w-max flex-1 items-center justify-center', className)}
			{...props}
		>
			{children}
			<NavigationMenuPositioner align={align} />
		</NavigationMenuPrimitive.Root>
	)
}

function NavigationMenuList({ className, ...props }: React.ComponentPropsWithRef<typeof NavigationMenuPrimitive.List>) {
	return (
		<NavigationMenuPrimitive.List
			data-slot="navigation-menu-list"
			className={cn('group flex flex-1 list-none items-center justify-center gap-0', className)}
			{...props}
		/>
	)
}

function NavigationMenuItem({ className, ...props }: React.ComponentPropsWithRef<typeof NavigationMenuPrimitive.Item>) {
	return (
		<NavigationMenuPrimitive.Item data-slot="navigation-menu-item" className={cn('relative', className)} {...props} />
	)
}

const navigationMenuTriggerStyle = cva(
	'group/navigation-menu-trigger inline-flex h-10 w-max items-center justify-center rounded-lg px-2.5 py-1.5 text-sm font-medium transition-all outline-none hover:bg-muted focus:bg-muted focus-visible:ring-3 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted data-open:bg-muted/50 data-open:hover:bg-muted data-open:focus:bg-muted',
)

function NavigationMenuTrigger({ className, children, ...props }: NavigationMenuPrimitive.Trigger.Props) {
	return (
		<NavigationMenuPrimitive.Trigger
			data-slot="navigation-menu-trigger"
			className={cn(navigationMenuTriggerStyle(), 'group', className)}
			{...props}
		>
			{children}{' '}
			<ChevronDownIcon
				className="relative top-px ml-1 size-3 transition duration-300 group-data-popup-open/navigation-menu-trigger:rotate-180 group-data-open/navigation-menu-trigger:rotate-180"
				aria-hidden="true"
			/>
		</NavigationMenuPrimitive.Trigger>
	)
}

function NavigationMenuContent({ className, ...props }: NavigationMenuPrimitive.Content.Props) {
	return (
		<NavigationMenuPrimitive.Content
			data-slot="navigation-menu-content"
			className={cn(
				'data-ending-style:data-activation-direction=left:translate-x-[50%] data-ending-style:data-activation-direction=right:translate-x-[-50%] data-starting-style:data-activation-direction=left:translate-x-[-50%] data-starting-style:data-activation-direction=right:translate-x-[50%] h-full w-auto p-1 transition-[opacity,transform,translate] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] data-ending-style:opacity-0 data-starting-style:opacity-0 data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 data-[motion^=from-]:animate-in data-[motion^=from-]:fade-in data-[motion^=to-]:animate-out data-[motion^=to-]:fade-out',
				className,
			)}
			{...props}
		/>
	)
}

function NavigationMenuPositioner({
	className,
	side = 'bottom',
	sideOffset = 8,
	align = 'start',
	alignOffset = 0,
	...props
}: NavigationMenuPrimitive.Positioner.Props) {
	return (
		<NavigationMenuPrimitive.Portal>
			<NavigationMenuPrimitive.Positioner
				side={side}
				sideOffset={sideOffset}
				align={align}
				alignOffset={alignOffset}
				className={cn(
					'isolate z-50 h-(--positioner-height) w-(--positioner-width) max-w-(--available-width) transition-[top,left,right,bottom] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] data-instant:transition-none data-[side=bottom]:before:top-[-10px] data-[side=bottom]:before:right-0 data-[side=bottom]:before:left-0',
					className,
				)}
				{...props}
			>
				<NavigationMenuPrimitive.Popup className="data-[ending-style]:easing-[ease] xs:w-(--popup-width) relative h-(--popup-height) w-(--popup-width) origin-(--transform-origin) rounded-lg bg-popover text-popover-foreground shadow ring-1 ring-foreground/10 transition-[opacity,transform,width,height,scale,translate] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] outline-none data-ending-style:scale-90 data-ending-style:opacity-0 data-ending-style:duration-150 data-starting-style:scale-90 data-starting-style:opacity-0">
					<NavigationMenuPrimitive.Viewport className="relative size-full overflow-hidden" />
				</NavigationMenuPrimitive.Popup>
			</NavigationMenuPrimitive.Positioner>
		</NavigationMenuPrimitive.Portal>
	)
}

function NavigationMenuLink({ className, ...props }: NavigationMenuPrimitive.Link.Props) {
	return (
		<NavigationMenuPrimitive.Link
			data-slot="navigation-menu-link"
			className={cn(
				"flex items-center gap-2 rounded-lg p-2 text-sm transition-all outline-none hover:bg-muted focus:bg-muted focus-visible:ring-3 focus-visible:ring-ring in-data-[slot=navigation-menu-content]:rounded-md in-data-[slot=navigation-menu-content]:focus-visible:ring-2 in-data-[slot=navigation-menu-content]:focus-visible:ring-inset data-active:bg-muted/50 data-active:hover:bg-muted data-active:focus:bg-muted [&_svg:not([class*='size-'])]:size-4",
				className,
			)}
			{...props}
		/>
	)
}

function NavigationMenuIndicator({
	className,
	...props
}: React.ComponentPropsWithRef<typeof NavigationMenuPrimitive.Icon>) {
	return (
		<NavigationMenuPrimitive.Icon
			data-slot="navigation-menu-indicator"
			className={cn(
				'top-full z-1 flex h-1.5 items-end justify-center overflow-hidden data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:animate-in data-[state=visible]:fade-in',
				className,
			)}
			{...props}
		>
			<div className="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" />
		</NavigationMenuPrimitive.Icon>
	)
}

export {
	NavigationMenu,
	NavigationMenuContent,
	NavigationMenuIndicator,
	NavigationMenuItem,
	NavigationMenuLink,
	NavigationMenuList,
	NavigationMenuPositioner,
	NavigationMenuTrigger,
	navigationMenuTriggerStyle,
}
```

---

# Number Input

Numeric input with increment and decrement buttons and min/max/step.

Install: `npx shadcn@latest add https://rdf.dev.360online.com/r/number-input.json`

Import from: `@/components/ui/number-input`

Builds on: input-group

npm dependencies: lucide-react@^1.48.0

A stepper-style number input. The field itself is read-only; the value changes through the decrement/increment
buttons (or the arrow up / down keys) and is clamped to `min` / `max`. Built from `InputGroup`, so it has the
same h-8, rounded-lg look, focus ring and `aria-invalid` state as `Input`.

### Usage

```tsx
import { NumberInput } from "@/components/ui/number-input"

// Uncontrolled
<NumberInput min={0} max={10} defaultValue={1} onChange={(value) => console.log(value)} />

// Controlled
const [qty, setQty] = useState(1)
<NumberInput min={1} max={99} value={qty} onChange={setQty} />
```

#### Default

A labelled number input with a description. Pass `id` and `aria-labelledby` so the field is announced with its label.

#### With range

`min` and `max` clamp the value; the buttons disable themselves at the limits.

#### Controlled

A group room booking where the attendee count drives the summary in the footer.

#### In a form

Several number inputs in a waste collection subscription, with a running annual fee.

#### Disabled

A value fixed by a decision.

### Related Components

- Input
- Slider

## Source

File: components/ui/number-input.tsx

```tsx
'use client'

import { MinusIcon, PlusIcon } from 'lucide-react'
import * as React from 'react'
import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput } from '@/components/ui/input-group'
import { cn } from '@/lib/utils'

export interface NumberInputProps
	extends Omit<React.ComponentProps<'input'>, 'onChange' | 'defaultValue' | 'value' | 'min' | 'max'> {
	value?: number
	onChange?: (value: number) => void
	min?: number
	max?: number
	defaultValue?: number | string
}

function NumberInput({
	className,
	onChange,
	value,
	min = 0,
	max = 10,
	defaultValue = 0,
	disabled = false,
	onKeyDown,
	...props
}: Readonly<NumberInputProps>) {
	const [internalValue, setInternalValue] = React.useState<number>(Number(defaultValue))
	const currentValue = value ?? internalValue

	const commit = (next: number) => {
		onChange?.(next)
		setInternalValue(next)
	}

	const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
		const parsed = event.target.value === '' ? 0 : Number.parseInt(event.target.value, 10)
		const next = Number.isNaN(parsed) ? 0 : parsed
		commit(Math.min(max, Math.max(min, next)))
	}

	const increment = () => {
		const next = currentValue + 1
		if (next > max) return
		commit(next)
	}

	const decrement = () => {
		const next = currentValue - 1
		if (next < min) return
		commit(next)
	}

	return (
		<InputGroup
			data-slot="number-input"
			data-disabled={disabled || undefined}
			// The steppers disable themselves at min/max; only dim the group when the whole input is disabled.
			className="has-[[data-slot=input-group-control]:read-only]:border-solid has-[[data-slot=input-group-control]:read-only]:bg-transparent has-disabled:bg-transparent has-disabled:opacity-100 data-disabled:opacity-50 dark:bg-transparent dark:has-disabled:bg-transparent"
		>
			<InputGroupAddon align="inline-start">
				<InputGroupButton
					size="icon-xs"
					onClick={decrement}
					disabled={currentValue <= min || disabled}
					aria-label="Decrease value"
					data-testid="decrement-button"
				>
					<span className="sr-only">Decrement number button</span>
					<MinusIcon />
				</InputGroupButton>
			</InputGroupAddon>
			<InputGroupInput
				type="text"
				inputMode="numeric"
				value={currentValue}
				onChange={handleInputChange}
				onKeyDown={(event) => {
					onKeyDown?.(event)
					if (event.defaultPrevented) return
					if (event.key === 'ArrowUp') {
						event.preventDefault()
						increment()
					} else if (event.key === 'ArrowDown') {
						event.preventDefault()
						decrement()
					}
				}}
				className={cn('text-center tabular-nums', className)}
				aria-label="Number input"
				disabled={disabled}
				pattern="\d*"
				data-testid="number-input"
				aria-valuemin={min}
				aria-valuemax={max}
				aria-valuenow={currentValue}
				role="spinbutton"
				readOnly
				{...props}
			/>
			<InputGroupAddon align="inline-end">
				<InputGroupButton
					size="icon-xs"
					onClick={increment}
					disabled={currentValue >= max || disabled}
					aria-label="Increase value"
					data-testid="increment-button"
				>
					<span className="sr-only">Increment number button</span>
					<PlusIcon />
				</InputGroupButton>
			</InputGroupAddon>
		</InputGroup>
	)
}

export { NumberInput }
```

---

# Organization Switcher

Shows which organisation the user works in and lets them switch, with optional sub-organisations, search and favourites.

Install: `npx shadcn@latest add https://rdf.dev.360online.com/r/organization-switcher.json`

Import from: `@/components/ui/organization-switcher`

npm dependencies: @base-ui/react@^1.8.0, lucide-react@^1.48.0

Shows which organisation the user is working in and lets them switch to another one, usually at the top of the
sidebar. Organisations can have sub-organisations, such as the departments of a municipality, and a long list can be
searched. Like the other components it is composed from parts: you give `OrganizationSwitcher` a flat list and the id
of the selected organisation, and build the trigger, the list and the items yourself.

### Features

- Composable `OrganizationSwitcherTrigger`, `OrganizationSwitcherValue`, `OrganizationSwitcherContent`,
  `OrganizationSwitcherLabel`, `OrganizationSwitcherSearch`, `OrganizationSwitcherEmpty`, `OrganizationSwitcherList`,
  `OrganizationSwitcherGroup`, `OrganizationSwitcherFavorites`, `OrganizationSwitcherItem`,
  `OrganizationSwitcherFavorite` and `OrganizationSwitcherExpander`
- Optional sub-organisations in any depth: give an organisation a `parentId`, and the list hands you each
  organisation with its `depth` and `path`, in tree order
- `OrganizationSwitcherValue` shows a logo tile and the selected organisation, with the organisations above a
  sub-organisation under it
- `searchable` with `OrganizationSwitcherSearch` for long lists; search results are flat and show which organisation
  each match belongs to
- Optional favourites: a star on each row and a group of favourites above the others. The app saves them; the
  component only shows them and reports changes
- Optional collapsing: a chevron on each organisation with sub-organisations hides or shows them
- On its own or in a sidebar: `render={<SidebarMenuButton size="lg" />}` on the trigger makes it collapse to the logo
  tile with the sidebar
- Controlled (`value`) or uncontrolled (`defaultValue`)
- All text is yours, so it is written in the language of the page
- Built on the [Base UI Select](https://base-ui.com/react/components/select) and, with `searchable`, the
  [Base UI Combobox](https://base-ui.com/react/components/combobox)
- `data-slot` attributes on every part

### Usage

```tsx
import {
  type Organization,
  OrganizationSwitcher,
  OrganizationSwitcherContent,
  OrganizationSwitcherItem,
  OrganizationSwitcherLabel,
  OrganizationSwitcherList,
  OrganizationSwitcherTrigger,
  OrganizationSwitcherValue,
} from '@/components/ui/organization-switcher'
import { SidebarMenuButton } from '@/components/ui/sidebar'

const organizations: Organization[] = [
  { id: 'ekdalen', name: 'Ekdalen Municipality' },
  // Sub-organisations point at their organisation with parentId
  { id: 'building-environment', name: 'Building and Environment', parentId: 'ekdalen' },
  { id: 'social-services', name: 'Social Services', parentId: 'ekdalen' },
]

export function AppOrganizationSwitcher({ organizationId }: { organizationId: string }) {
  return (
    <OrganizationSwitcher items={organizations} value={organizationId} onValueChange={switchOrganization}>
      <OrganizationSwitcherTrigger aria-label="Organisation" render={<SidebarMenuButton size="lg" />}>
        <OrganizationSwitcherValue placeholder="Select organisation" />
      </OrganizationSwitcherTrigger>
      <OrganizationSwitcherContent>
        <OrganizationSwitcherLabel>Switch organisation</OrganizationSwitcherLabel>
        <OrganizationSwitcherList>
          {(organization) => (
            <OrganizationSwitcherItem
              key={organization.id}
              value={organization.id}
              level={organization.depth}
              path={organization.path}
            >
              {organization.name}
            </OrganizationSwitcherItem>
          )}
        </OrganizationSwitcherList>
      </OrganizationSwitcherContent>
    </OrganizationSwitcher>
  )
}
```

For a long list, add `searchable` and the two search parts:

```tsx
<OrganizationSwitcher items={organizations} value={organizationId} onValueChange={switchOrganization} searchable>
  <OrganizationSwitcherTrigger aria-label="Organisation">
    <OrganizationSwitcherValue placeholder="Select organisation" />
  </OrganizationSwitcherTrigger>
  <OrganizationSwitcherContent aria-label="Switch organisation">
    <OrganizationSwitcherSearch placeholder="Search organisations" />
    <OrganizationSwitcherEmpty>No organisations found</OrganizationSwitcherEmpty>
    <OrganizationSwitcherList>{/* the same items */}</OrganizationSwitcherList>
  </OrganizationSwitcherContent>
</OrganizationSwitcher>
```

#### Default

A short list of organisations without sub-organisations. `description` is the second line in the trigger and in the
list.

#### Sub-organisations

A municipality and its departments. `level` indents the departments and `path` names the municipality for screen
readers. The department is selected, so the trigger shows the department with the municipality under it. The
municipality itself can be selected as well.

#### With Search

`searchable` with `OrganizationSwitcherSearch` and `OrganizationSwitcherEmpty`. The list is a tree until you type;
search results are a flat list where each sub-organisation shows its `path`.

#### Favourites

Pass the user's favourite ids as `favorites` and save them in `onFavoritesChange`; the component does not store them.
`OrganizationSwitcherFavorite` adds a star to each row, and `OrganizationSwitcherFavorites` lists the favourites in a
group above `OrganizationSwitcherGroup`. The group keeps its rows while the list is open, so nothing moves under the
pointer when a star is pressed; it is up to date the next time the list opens. Favourites need `searchable`.

#### Collapsible

With `collapsible`, put an `OrganizationSwitcherExpander` last in each row. An organisation with sub-organisations
gets a chevron that hides or shows them; the others get an empty space of the same width so the rows line up.
Everything is expanded at first unless you pass `defaultCollapsed`, here the two other municipalities. Searching
still finds organisations in collapsed branches. Collapsing needs `searchable`.

#### Collapsible with Favourites

Both together, as in the RDF Dashboard: the star comes before the chevron in each row.

#### With Logos

`logo` on an organisation takes an icon or an `img`. A sub-organisation without a logo uses the one of its top-level
organisation, and an organisation without any logo shows the first letter of its name. `disabled` on an item keeps the
organisation in the list but makes it unavailable.

#### In a Sidebar

Pass `render={<SidebarMenuButton size="lg" />}` to the trigger so it follows the sidebar's colours and collapses to
the logo tile. Add `tooltip` to the `SidebarMenuButton` to show the name of the organisation while the sidebar is
collapsed.

#### Controlled

Hold the id in state, or in the URL or a cookie, with `value` and `onValueChange`. The second argument of
`onValueChange` is the organisation. Announce the switch to screen readers when the page content changes with it.

#### Translated

Swedish text, with nothing selected yet. The text is in your own JSX, so there is nothing to override.

#### Disabled

### Subcomponents

- `OrganizationSwitcher` - Holds the organisations and the selected one; renders no element of its own
- `OrganizationSwitcherTrigger` - The button that shows the current organisation and opens the list
- `OrganizationSwitcherValue` - The logo tile, name and second line of the selected organisation, inside the trigger
- `OrganizationSwitcherContent` - The popup
- `OrganizationSwitcherLabel` - A heading above the list, e.g. "Switch organisation"
- `OrganizationSwitcherSearch` - The search field; only with `searchable`
- `OrganizationSwitcherEmpty` - The message when the search has no matches; only with `searchable`
- `OrganizationSwitcherList` - The scrolling list. Give it a function to list every organisation, or groups
- `OrganizationSwitcherGroup` - Every organisation under an optional `label`, e.g. "All organisations"
- `OrganizationSwitcherFavorites` - The favourites as a group with a `label`; hidden when there are none and while
  searching
- `OrganizationSwitcherItem` - One organisation in the list; its children are the name
- `OrganizationSwitcherFavorite` - The star after an item that adds or removes a favourite
- `OrganizationSwitcherExpander` - The chevron last in a row that hides or shows the sub-organisations

`OrganizationSwitcherList`, `OrganizationSwitcherGroup` and `OrganizationSwitcherFavorites` take a function as
children and call it once per organisation. They set the `key`, so the function can return a fragment with an item
its star and its chevron.

#### OrganizationSwitcher props

| Prop            | Type                                                  | Default | Description                                                      |
| --------------- | ----------------------------------------------------- | ------- | ---------------------------------------------------------------- |
| `items`         | `Organization[]`                                      | -       | A flat list of organisations and sub-organisations               |
| `value`         | `string \| null`                                      | -       | The id of the selected organisation (controlled)                 |
| `defaultValue`  | `string \| null`                                      | `null`  | The id selected at first (uncontrolled)                          |
| `onValueChange` | `(value: string, organization: Organization) => void` | -       | Called when the user picks another organisation                  |
| `searchable`    | `boolean`                                             | `false` | Lets the user filter the list with `OrganizationSwitcherSearch`  |
| `favorites`     | `string[]`                                            | -       | The ids of the user's favourites; needs `searchable`             |
| `onFavoritesChange` | `(favorites: string[], change: { id: string, favorite: boolean }) => void` | - | Called when a star is pressed; save the new list |
| `collapsible`   | `boolean`                                             | `false` | Lets the user collapse sub-organisations with `OrganizationSwitcherExpander`; needs `searchable` |
| `collapsed`     | `string[]`                                            | -       | The ids of the collapsed organisations (controlled)              |
| `defaultCollapsed` | `string[]`                                         | `[]`    | The ids collapsed at first; everything else is expanded          |
| `onCollapsedChange` | `(collapsed: string[], change: { id: string, collapsed: boolean }) => void` | - | Called when a chevron is pressed |
| `disabled`      | `boolean`                                             | `false` | Shows the organisation but keeps the list closed                 |
| `open`          | `boolean`                                             | -       | Whether the list is open (controlled)                            |
| `defaultOpen`   | `boolean`                                             | `false` | Whether the list is open at first                                |
| `onOpenChange`  | `(open: boolean) => void`                             | -       | Called when the list opens or closes                             |

`searchable` decides which Base UI component the parts are built on, so set it on `OrganizationSwitcher` and keep the
same parts. A common choice is `searchable={organizations.length > 7}`; the search parts render nothing without it.

#### Organization

| Field         | Type             | Description                                                                         |
| ------------- | ---------------- | ----------------------------------------------------------------------------------- |
| `id`          | `string`         | Unique id; the value of the switcher                                                |
| `name`        | `string`         | The name shown in the trigger, and what the search matches                          |
| `parentId`    | `string \| null` | The id of the organisation it belongs to. Leave it out for a top-level organisation |
| `description` | `string`         | A second line in the trigger, e.g. "Municipality" or an organisation number         |
| `logo`        | `ReactNode`      | An icon or `img` for the tile in the trigger                                        |
| `disabled`    | `boolean`        | For you to pass on to the item                                                      |

The child functions get an `OrganizationNode`: the organisation plus `depth` (0 at the top level), `ancestors` (the
organisations above it), `path` (their names, e.g. "Ekdalen Municipality / Building and Environment"), `favorite`,
`hasChildren` and `expanded`. Organisations keep the order you pass them in, with sub-organisations placed under their parent. A
sub-organisation whose parent is not in the list, for example because the user has no access to it, is shown at the
top level.

#### OrganizationSwitcherTrigger props

| Prop         | Type           | Default       | Description                                                                          |
| ------------ | -------------- | ------------- | ------------------------------------------------------------------------------------ |
| `aria-label` | `string`       | -             | The accessible name, e.g. "Organisation". Always set it                              |
| `render`     | `ReactElement` | a 48px button | Replaces the button, e.g. `<SidebarMenuButton size="lg" />`; it keeps its own styles |

The trigger takes any children, so you can leave out `OrganizationSwitcherValue` and build the content yourself.

#### OrganizationSwitcherContent props

| Prop         | Type                                     | Default    | Description                                              |
| ------------ | ---------------------------------------- | ---------- | -------------------------------------------------------- |
| `side`       | `'top' \| 'bottom' \| 'left' \| 'right'` | `'bottom'` | Which side of the trigger the list opens on              |
| `align`      | `'start' \| 'center' \| 'end'`           | `'start'`  | How the list lines up with the trigger                   |
| `sideOffset` | `number`                                 | `4`        | The gap between the trigger and the list                 |
| `aria-label` | `string`                                 | -          | Names the popup; set it when the list is `searchable`    |

#### OrganizationSwitcherItem props

| Prop          | Type        | Default | Description                                                                                   |
| ------------- | ----------- | ------- | --------------------------------------------------------------------------------------------- |
| `value`       | `string`    | -       | The id of the organisation                                                                    |
| `level`       | `number`    | `0`     | How far to indent it in the tree; pass `organization.depth`                                   |
| `path`        | `string`    | -       | The organisations above it; pass `organization.path`. Shown in search results, read out in the tree |
| `description` | `ReactNode` | -       | A second line under the name. Search results and favourites show `path` there instead         |
| `disabled`    | `boolean`   | `false` | Listed but not selectable                                                                     |

#### OrganizationSwitcherFavorite props

| Prop         | Type      | Default | Description                                                                  |
| ------------ | --------- | ------- | ---------------------------------------------------------------------------- |
| `value`      | `string`  | -       | The id of the organisation                                                   |
| `favorite`   | `boolean` | -       | Whether it is a favourite now; pass `organization.favorite`                  |
| `aria-label` | `string`  | -       | What pressing it does, e.g. "Add Education to favourites". Always set it     |

The star is shown for favourites and, for the other rows, when the row is hovered or highlighted. It renders nothing
unless `OrganizationSwitcher` has both `favorites` and `searchable`.

#### OrganizationSwitcherExpander props

| Prop          | Type      | Default | Description                                                                        |
| ------------- | --------- | ------- | ---------------------------------------------------------------------------------- |
| `value`       | `string`  | -       | The id of the organisation                                                         |
| `expanded`    | `boolean` | -       | Whether its sub-organisations are listed now; pass `organization.expanded`         |
| `hasChildren` | `boolean` | -       | Whether it has sub-organisations; pass `organization.hasChildren`                  |
| `aria-label`  | `string`  | -       | What pressing it does, e.g. "Collapse Ekdalen Municipality". Always set it         |

Put it last in the row, after the item and the star. The chevron sits at the end of the row and not in front of the
name, so that the arrow keys always land on the organisation first. An organisation without sub-organisations, and a
row in the favourites group, gets an empty space of the same width. While searching it renders nothing, because
search results are a flat list. It renders nothing unless `OrganizationSwitcher` has both `collapsible` and
`searchable`.

Collapsed organisations are remembered for as long as the `OrganizationSwitcher` is mounted. To keep them between
visits, hold them in `collapsed` and save them in `onCollapsedChange`.

### Accessibility

- The trigger is a `combobox` and the selected organisation is its value. Give it a name with `aria-label`, e.g.
  "Organisation". It shows a focus ring and opens with Enter, Space and the arrow keys
- Without `searchable` the list is a `listbox`: arrow keys move, typing jumps to a name, Enter selects and Escape
  closes
- With `searchable`, focus moves to the search field and the arrow keys move through the matches. The first match is
  highlighted, so Enter selects it. The text in `OrganizationSwitcherEmpty` is announced through a live region
- `OrganizationSwitcherSearch` uses its `placeholder` as its accessible name unless you pass `aria-label`
- The indentation of sub-organisations is only visual. Pass `path` to every item so a sub-organisation also names the
  organisations above it, e.g. "Building permits, Ekdalen Municipality / Building and Environment"
- The selected organisation has `aria-selected` and a check mark, so it does not rely on colour
- With `favorites` the list is a `grid` where each row has two cells: the organisation and its star. The right arrow
  key moves from the organisation to the star and Enter presses it; the list stays open and focus stays in the search
  field. The star has no pressed state of its own, so say what it will do in its `aria-label` ("Add … to favourites"
  or "Remove … from favourites"); a filled star shows a favourite, so it does not rely on colour either
- The favourites group does not change while the list is open, so rows don't move when a star is pressed
- With `collapsible` the list is a `grid` as well, and the chevron is the last cell of its row: the right arrow key
  moves to it and Enter presses it. It has `aria-expanded`, and the highlight stays on it after it is pressed.
  Sub-organisations of a collapsed organisation are removed from the list, not just hidden, and the search still
  finds them
- The logo tile is decorative and hidden from assistive technology; the name next to it carries the meaning
- Rows are at least 32px tall and the trigger is 48px, 40px when the sidebar is collapsed
- Switching organisation usually changes the whole page. Move focus to the main heading or announce the change, as in
  the Controlled example

### Related Components

- Sidebar - Where the switcher usually sits
- Select - Pick one value in a form
- Combobox - A filterable list of options in a form
- Dropdown Menu - For a menu of actions, such as the account menu

## Source

File: components/ui/organization-switcher.tsx

```tsx
'use client'

import { Combobox as ComboboxPrimitive } from '@base-ui/react/combobox'
import { Select as SelectPrimitive } from '@base-ui/react/select'
import {
	Building2Icon,
	CheckIcon,
	ChevronDownIcon,
	ChevronRightIcon,
	ChevronsUpDownIcon,
	SearchIcon,
	StarIcon,
} from 'lucide-react'
import * as React from 'react'
import { cn } from '@/lib/utils'

type Organization = {
	/** Unique id; this is the value of the switcher */
	id: string
	name: string
	/** Makes this a sub-organisation of the organisation with that id */
	parentId?: string | null
	/** A short line under the name, e.g. the kind of organisation */
	description?: string
	/** An icon or image for the tile in the trigger. Without it the tile shows the first letter of the name. */
	logo?: React.ReactNode
	disabled?: boolean
}

/** An organisation with its place in the tree; what `OrganizationSwitcherList` hands to its children. */
type OrganizationNode = Organization & {
	/** 0 for a top-level organisation, 1 for its sub-organisations and so on */
	depth: number
	/** The organisations above it, top level first */
	ancestors: Organization[]
	/** The names of the organisations above it, e.g. "Ekdalen Municipality / Building and Environment" */
	path: string
	/** Whether it is one of the `favorites` */
	favorite: boolean
	/** Whether it has sub-organisations */
	hasChildren: boolean
	/** Whether its sub-organisations are listed; false once the user has collapsed it */
	expanded: boolean
}

const getPath = (organizations: Organization[]) => organizations.map((organization) => organization.name).join(' / ')

/** Orders a flat list as a tree: every organisation is followed by its sub-organisations. */
function getOrganizationNodes(
	organizations: readonly Organization[],
	favorites: ReadonlySet<string>,
	collapsed: ReadonlySet<string>,
) {
	const ids = new Set(organizations.map((organization) => organization.id))
	const children = new Map<string | null, Organization[]>()
	for (const organization of organizations) {
		const { parentId } = organization
		// A sub-organisation whose parent is not in the list is shown at the top level
		const parent = parentId != null && parentId !== organization.id && ids.has(parentId) ? parentId : null
		children.set(parent, [...(children.get(parent) ?? []), organization])
	}

	const nodes: OrganizationNode[] = []
	function visit(organization: Organization, ancestors: Organization[]) {
		const subOrganizations = children.get(organization.id) ?? []
		const hasChildren = subOrganizations.length > 0
		nodes.push({
			...organization,
			depth: ancestors.length,
			ancestors,
			path: getPath(ancestors),
			favorite: favorites.has(organization.id),
			hasChildren,
			expanded: hasChildren && !collapsed.has(organization.id),
		})
		for (const child of subOrganizations) visit(child, [...ancestors, organization])
	}
	for (const organization of children.get(null) ?? []) visit(organization, [])
	return nodes
}

type OrganizationSwitcherContextValue = {
	/**
	 * What the parts are built on: a Base UI Select, a Combobox with a search field (`searchable`), or that Combobox
	 * as a grid, where a row has more cells than the organisation: the favourite button (`favorites`) and the button
	 * that collapses its sub-organisations (`collapsible`).
	 */
	mode: 'select' | 'list' | 'grid'
	collapsible: boolean
	/** How many buttons a row can have after the organisation; the popup makes room for them */
	actions: number
	/** True while there is text in the search field; the list is then flat instead of a tree */
	searching: boolean
	/** The organisations to list: the tree without collapsed branches, or the matches while searching */
	matches: OrganizationNode[]
	/** The favourites as they were when the list opened, so rows don't move while the user marks favourites */
	favorites: OrganizationNode[]
	selected: OrganizationNode | undefined
	toggleFavorite: (id: string) => void
	toggleCollapsed: (id: string) => void
}

const OrganizationSwitcherContext = React.createContext<OrganizationSwitcherContextValue | null>(null)

// Rows outside the tree, such as favourites, are not indented and show their path instead
const OrganizationSwitcherFlatContext = React.createContext(false)

function useOrganizationSwitcher() {
	const context = React.useContext(OrganizationSwitcherContext)
	if (!context) {
		throw new Error('OrganizationSwitcher parts must be used within an OrganizationSwitcher.')
	}
	return context
}

const NO_IDS: readonly string[] = []

/**
 * Holds the organisations, the selected one and the favourites. Without `searchable` the list is a Base UI Select;
 * with it, a Base UI Combobox whose search field sits inside the popup.
 */
function OrganizationSwitcher({
	items,
	value,
	defaultValue = null,
	onValueChange,
	searchable = false,
	favorites,
	onFavoritesChange,
	collapsible = false,
	collapsed,
	defaultCollapsed = NO_IDS,
	onCollapsedChange,
	disabled = false,
	open,
	defaultOpen,
	onOpenChange,
	children,
}: Readonly<{
	/** A flat list. Give a sub-organisation the id of its organisation as `parentId`. */
	items: readonly Organization[]
	/** The id of the selected organisation or sub-organisation */
	value?: string | null
	defaultValue?: string | null
	onValueChange?: (value: string, organization: Organization) => void
	/** Lets the user filter the list with `OrganizationSwitcherSearch`; use it for long lists */
	searchable?: boolean
	/** The ids of the user's favourite organisations. Needs `searchable`. Save them in `onFavoritesChange`. */
	favorites?: readonly string[]
	onFavoritesChange?: (favorites: string[], change: { id: string; favorite: boolean }) => void
	/** Lets the user collapse an organisation's sub-organisations with `OrganizationSwitcherExpander`. Needs `searchable`. */
	collapsible?: boolean
	/** The ids of the collapsed organisations; everything else is expanded */
	collapsed?: readonly string[]
	defaultCollapsed?: readonly string[]
	onCollapsedChange?: (collapsed: string[], change: { id: string; collapsed: boolean }) => void
	disabled?: boolean
	open?: boolean
	defaultOpen?: boolean
	onOpenChange?: (open: boolean) => void
	children?: React.ReactNode
}>) {
	const [internalValue, setInternalValue] = React.useState(defaultValue)
	const controlled = value !== undefined
	const selectedValue = controlled ? value : internalValue
	const [query, setQuery] = React.useState('')
	const searching = searchable && query.trim() !== ''
	const { contains } = ComboboxPrimitive.useFilter({ sensitivity: 'base' })
	const searchableMode = favorites || collapsible ? 'grid' : 'list'
	const mode = searchable ? searchableMode : 'select'

	const favoriteIds = favorites ?? NO_IDS
	const [favoritesAtOpen, setFavoritesAtOpen] = React.useState(favoriteIds)
	const [internalCollapsed, setInternalCollapsed] = React.useState(defaultCollapsed)
	const collapsedIds = collapsed ?? internalCollapsed
	const nodes = React.useMemo(
		() => getOrganizationNodes(items, new Set(favoriteIds), new Set(collapsedIds)),
		[items, favoriteIds, collapsedIds],
	)
	const selected = selectedValue == null ? undefined : nodes.find((node) => node.id === selectedValue)
	const getName = (id: string) => nodes.find((node) => node.id === id)?.name ?? ''

	const context = React.useMemo<OrganizationSwitcherContextValue>(() => {
		const search = query.trim()
		const canCollapse = mode === 'grid' && collapsible
		// A collapsed organisation hides everything below it; the search still looks through all of them
		const tree = canCollapse
			? nodes.filter((node) => node.ancestors.every((ancestor) => !collapsedIds.includes(ancestor.id)))
			: nodes
		return {
			mode,
			collapsible: canCollapse,
			actions: (favorites ? 1 : 0) + (collapsible ? 1 : 0),
			searching,
			matches: searching ? nodes.filter((node) => contains(node.name, search)) : tree,
			favorites: mode === 'grid' && !searching ? nodes.filter((node) => favoritesAtOpen.includes(node.id)) : [],
			selected,
			toggleFavorite(id) {
				const favorite = !favoriteIds.includes(id)
				const next = favorite ? [...favoriteIds, id] : favoriteIds.filter((favoriteId) => favoriteId !== id)
				onFavoritesChange?.(next, { id, favorite })
			},
			toggleCollapsed(id) {
				const nowCollapsed = !collapsedIds.includes(id)
				const next = nowCollapsed ? [...collapsedIds, id] : collapsedIds.filter((collapsedId) => collapsedId !== id)
				if (collapsed === undefined) setInternalCollapsed(next)
				onCollapsedChange?.(next, { id, collapsed: nowCollapsed })
			},
		}
	}, [
		mode,
		collapsible,
		favorites,
		searching,
		query,
		nodes,
		favoritesAtOpen,
		selected,
		favoriteIds,
		onFavoritesChange,
		collapsed,
		collapsedIds,
		onCollapsedChange,
		contains,
	])

	function handleValueChange(next: string | null) {
		const organization = next == null ? undefined : items.find((item) => item.id === next)
		if (!organization) return
		if (!controlled) setInternalValue(organization.id)
		onValueChange?.(organization.id, organization)
	}

	const rootProps = {
		value: selectedValue,
		onValueChange: handleValueChange,
		disabled,
		open,
		defaultOpen,
		onOpenChange: (nextOpen: boolean) => {
			if (nextOpen) setFavoritesAtOpen(favoriteIds)
			onOpenChange?.(nextOpen)
		},
	}

	return (
		<OrganizationSwitcherContext.Provider value={context}>
			{searchable ? (
				// The parts filter and render the rows themselves, so the combobox gets no `items`
				<ComboboxPrimitive.Root<string>
					{...rootProps}
					onInputValueChange={setQuery}
					itemToStringLabel={getName}
					filter={null}
					grid={mode === 'grid'}
					autoHighlight
				>
					{children}
				</ComboboxPrimitive.Root>
			) : (
				<SelectPrimitive.Root<string> {...rootProps}>{children}</SelectPrimitive.Root>
			)}
		</OrganizationSwitcherContext.Provider>
	)
}

/**
 * The button that shows the current organisation and opens the list. Give it an `aria-label` such as "Organisation".
 * In a sidebar, pass `render={<SidebarMenuButton size="lg" />}`.
 */
function OrganizationSwitcherTrigger({
	render,
	children,
	...props
}: Omit<React.ComponentProps<'button'>, 'value' | 'defaultValue'> & {
	/** Replaces the button; the default styles are left out so the element keeps its own look */
	render?: React.ReactElement
}) {
	const { mode } = useOrganizationSwitcher()
	const triggerProps = {
		'data-slot': 'organization-switcher-trigger',
		render: render ?? (
			<button
				type="button"
				className="flex h-12 w-full min-w-0 items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:ring-3 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-popup-open:bg-accent data-popup-open:text-accent-foreground"
			/>
		),
		...props,
		children: (
			<>
				{children}
				<ChevronsUpDownIcon aria-hidden="true" className="ml-auto size-4 shrink-0" />
			</>
		),
	}

	return mode === 'select' ? (
		<SelectPrimitive.Trigger {...triggerProps} />
	) : (
		<ComboboxPrimitive.Trigger {...triggerProps} />
	)
}

/**
 * The selected organisation inside the trigger: a logo tile, the selected organisation's name and, under it, the
 * organisations above it or, for a top-level organisation, its description.
 */
function OrganizationSwitcherValue({
	placeholder,
	className,
	...props
}: React.ComponentProps<'span'> & {
	/** Shown while nothing is selected, e.g. "Select organisation" */
	placeholder?: React.ReactNode
}) {
	const { selected } = useOrganizationSwitcher()
	const top = selected?.ancestors[0] ?? selected
	// The organisation the user works in is the main line; a sub-organisation names the ones above it underneath
	const description = selected && selected.depth > 0 ? getPath(selected.ancestors) : selected?.description
	// A sub-organisation without a logo of its own shows its organisation's logo, but its own initial
	const logo = selected?.logo ?? top?.logo ?? Array.from(selected?.name.trim() ?? '')[0]?.toUpperCase()

	return (
		<>
			<span
				data-slot="organization-switcher-logo"
				aria-hidden="true"
				className="flex aspect-square size-8 shrink-0 items-center justify-center overflow-hidden rounded-lg bg-primary text-sm font-semibold text-primary-foreground [&_img]:size-full [&_img]:object-cover [&_svg]:size-4"
			>
				{logo ?? <Building2Icon />}
			</span>
			<span
				data-slot="organization-switcher-value"
				data-placeholder={selected ? undefined : ''}
				className={cn('grid min-w-0 flex-1 text-left leading-tight', className)}
				{...props}
			>
				<span className="truncate font-medium">{selected?.name ?? placeholder}</span>
				{description ? <span className="truncate text-xs text-muted-foreground">{description}</span> : null}
			</span>
		</>
	)
}

function OrganizationSwitcherContent({
	className,
	side = 'bottom',
	align = 'start',
	sideOffset = 4,
	...props
}: Omit<React.ComponentProps<'div'>, 'ref'> &
	Pick<ComboboxPrimitive.Positioner.Props, 'side' | 'align' | 'sideOffset'>) {
	const { mode, actions } = useOrganizationSwitcher()
	const searchable = mode !== 'select'
	const positionerProps = { side, align, sideOffset, className: 'isolate z-50' }
	const popupProps = {
		'data-slot': 'organization-switcher-content',
		className: cn(
			'max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) min-w-60 origin-(--transform-origin) overflow-hidden rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-border outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-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',
			!searchable && 'overflow-y-auto',
			// Room for the buttons next to the names
			mode === 'grid' && (actions > 1 ? 'min-w-80' : 'min-w-72'),
			className,
		),
		...props,
	}

	return searchable ? (
		<ComboboxPrimitive.Portal>
			<ComboboxPrimitive.Positioner {...positionerProps}>
				<ComboboxPrimitive.Popup {...popupProps} />
			</ComboboxPrimitive.Positioner>
		</ComboboxPrimitive.Portal>
	) : (
		<SelectPrimitive.Portal>
			<SelectPrimitive.Positioner {...positionerProps} alignItemWithTrigger={false}>
				<SelectPrimitive.Popup {...popupProps} />
			</SelectPrimitive.Positioner>
		</SelectPrimitive.Portal>
	)
}

/** A heading above the list, e.g. "Switch organisation" */
function OrganizationSwitcherLabel({ className, ...props }: React.ComponentProps<'div'>) {
	return (
		<div
			data-slot="organization-switcher-label"
			className={cn('px-3 pt-2.5 pb-1 text-xs text-muted-foreground', className)}
			{...props}
		/>
	)
}

/** The search field. It needs `searchable` on `OrganizationSwitcher` and renders nothing without it. */
function OrganizationSwitcherSearch({ className, placeholder, ...props }: ComboboxPrimitive.Input.Props) {
	const { mode } = useOrganizationSwitcher()
	if (mode === 'select') return null

	return (
		<div data-slot="organization-switcher-search" className="flex h-10 items-center gap-2 border-b px-3">
			<SearchIcon aria-hidden="true" className="size-4 shrink-0 text-muted-foreground" />
			<ComboboxPrimitive.Input
				aria-label={typeof placeholder === 'string' ? placeholder : undefined}
				placeholder={placeholder}
				className={cn(
					'h-full min-w-0 flex-1 bg-transparent text-sm outline-none placeholder:text-muted-foreground',
					className,
				)}
				{...props}
			/>
		</div>
	)
}

/** The message when the search has no matches. It renders nothing without `searchable`. */
function OrganizationSwitcherEmpty({ className, children, ...props }: React.ComponentProps<'output'>) {
	const { mode, matches } = useOrganizationSwitcher()
	if (mode === 'select') return null

	return (
		// Stays in the page as a live region, so it only takes up space when it has text
		<output
			data-slot="organization-switcher-empty"
			aria-live="polite"
			aria-atomic="true"
			className={cn('block px-3 py-6 text-center text-sm text-muted-foreground empty:p-0', className)}
			{...props}
		>
			{matches.length === 0 ? children : null}
		</output>
	)
}

type OrganizationSwitcherRenderItem = (organization: OrganizationNode, index: number) => React.ReactNode

/** One row per organisation. In a grid the row holds the organisation and its buttons side by side. */
function OrganizationSwitcherRows({
	organizations,
	children,
}: {
	organizations: OrganizationNode[]
	children: OrganizationSwitcherRenderItem
}) {
	const { mode } = useOrganizationSwitcher()

	return organizations.map((organization, index) =>
		mode === 'grid' ? (
			<ComboboxPrimitive.Row
				key={organization.id}
				data-slot="organization-switcher-row"
				className="group/organization-switcher-row flex items-center gap-0.5"
			>
				{children(organization, index)}
			</ComboboxPrimitive.Row>
		) : (
			<React.Fragment key={organization.id}>{children(organization, index)}</React.Fragment>
		),
	)
}

/**
 * The scrolling list. Give it a function to list every organisation, or `OrganizationSwitcherFavorites` and
 * `OrganizationSwitcherGroup` to list them in groups.
 */
function OrganizationSwitcherList({
	className,
	children,
	...props
}: Omit<React.ComponentProps<'div'>, 'children' | 'ref'> & {
	children: React.ReactNode | OrganizationSwitcherRenderItem
}) {
	const { mode, matches } = useOrganizationSwitcher()
	const content =
		typeof children === 'function' ? (
			<OrganizationSwitcherRows organizations={matches}>{children}</OrganizationSwitcherRows>
		) : (
			children
		)

	if (mode === 'select') {
		return (
			<SelectPrimitive.List data-slot="organization-switcher-list" className={cn('p-1', className)} {...props}>
				{content}
			</SelectPrimitive.List>
		)
	}

	return (
		<ComboboxPrimitive.List
			data-slot="organization-switcher-list"
			className={cn(
				'max-h-[min(--spacing(72),calc(var(--available-height)---spacing(10)))] scroll-py-1 overflow-y-auto overscroll-contain p-1',
				matches.length === 0 && 'p-0',
				className,
			)}
			{...props}
		>
			{content}
		</ComboboxPrimitive.List>
	)
}

function OrganizationSwitcherGroupFrame({
	label,
	className,
	children,
	...props
}: Omit<React.ComponentProps<'div'>, 'ref'> & { label?: React.ReactNode }) {
	const { mode } = useOrganizationSwitcher()
	const Group = mode === 'select' ? SelectPrimitive.Group : ComboboxPrimitive.Group
	const GroupLabel = mode === 'select' ? SelectPrimitive.GroupLabel : ComboboxPrimitive.GroupLabel

	return (
		<Group data-slot="organization-switcher-group" className={cn('not-first:mt-1', className)} {...props}>
			{label ? (
				<GroupLabel
					data-slot="organization-switcher-group-label"
					className="flex items-center gap-1.5 px-2 py-1.5 text-xs text-muted-foreground [&_svg]:size-3.5"
				>
					{label}
				</GroupLabel>
			) : null}
			{children}
		</Group>
	)
}

/** Every organisation, in tree order, under an optional `label`. While searching it lists the matches without it. */
function OrganizationSwitcherGroup({
	label,
	children,
	...props
}: Omit<React.ComponentProps<'div'>, 'children' | 'ref'> & {
	/** A heading for the group, e.g. "All organisations" */
	label?: React.ReactNode
	children: OrganizationSwitcherRenderItem
}) {
	const { searching, matches } = useOrganizationSwitcher()
	if (matches.length === 0) return null

	return (
		<OrganizationSwitcherGroupFrame label={searching ? undefined : label} {...props}>
			<OrganizationSwitcherRows organizations={matches}>{children}</OrganizationSwitcherRows>
		</OrganizationSwitcherGroupFrame>
	)
}

/**
 * The user's favourite organisations, as a group above the others. It needs `favorites` and `searchable` on
 * `OrganizationSwitcher`, and renders nothing while searching or when there are no favourites.
 */
function OrganizationSwitcherFavorites({
	label,
	children,
	...props
}: Omit<React.ComponentProps<'div'>, 'children' | 'ref'> & {
	/** A heading for the group, e.g. "Favourites" */
	label?: React.ReactNode
	children: OrganizationSwitcherRenderItem
}) {
	const { favorites } = useOrganizationSwitcher()
	if (favorites.length === 0) return null

	return (
		<OrganizationSwitcherFlatContext.Provider value={true}>
			<OrganizationSwitcherGroupFrame label={label} {...props}>
				<OrganizationSwitcherRows organizations={favorites}>{children}</OrganizationSwitcherRows>
			</OrganizationSwitcherGroupFrame>
		</OrganizationSwitcherFlatContext.Provider>
	)
}

/**
 * One organisation in the list; the children are its name. Sub-organisations are indented by `level` in the tree.
 * Search results and favourites are not indented, so `path` is shown under the name there instead of `description`.
 */
function OrganizationSwitcherItem({
	value,
	level = 0,
	path,
	description,
	disabled,
	className,
	style,
	children,
	...props
}: Omit<React.ComponentProps<'div'>, 'ref'> & {
	/** The id of the organisation */
	value: string
	/** How deep the organisation sits in the tree; `organization.depth` */
	level?: number
	/** The organisations above it; `organization.path` */
	path?: string
	/** A second line under the name */
	description?: React.ReactNode
	disabled?: boolean
}) {
	const { mode, searching } = useOrganizationSwitcher()
	const flat = React.useContext(OrganizationSwitcherFlatContext) || searching
	const details = flat ? path : description
	const itemProps = {
		value,
		disabled,
		'data-slot': 'organization-switcher-item',
		className: cn(
			'relative flex min-h-8 w-full min-w-0 flex-1 cursor-default items-center rounded-md py-1.5 pr-8 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-highlighted:bg-accent data-highlighted:text-accent-foreground data-highlighted:**:text-accent-foreground',
			className,
		),
		style: { paddingInlineStart: `${0.5 + (flat ? 0 : level)}rem`, ...style },
		...props,
	}
	const indicator = <span className="pointer-events-none absolute right-2 flex size-4 items-center justify-center" />
	const check = <CheckIcon aria-hidden="true" className="size-4" />
	const text = (
		<>
			{details ? <span className="truncate text-xs text-muted-foreground">{details}</span> : null}
			{/* The indentation is only visual, so the organisations above are given as text as well */}
			{!flat && path ? <span className="sr-only">, {path}</span> : null}
		</>
	)

	return mode === 'select' ? (
		<SelectPrimitive.Item {...itemProps}>
			<span className="grid min-w-0 flex-1 leading-tight">
				<SelectPrimitive.ItemText className="truncate">{children}</SelectPrimitive.ItemText>
				{text}
			</span>
			<SelectPrimitive.ItemIndicator render={indicator}>{check}</SelectPrimitive.ItemIndicator>
		</SelectPrimitive.Item>
	) : (
		<ComboboxPrimitive.Item {...itemProps}>
			<span className="grid min-w-0 flex-1 leading-tight">
				<span className="truncate">{children}</span>
				{text}
			</span>
			<ComboboxPrimitive.ItemIndicator render={indicator}>{check}</ComboboxPrimitive.ItemIndicator>
		</ComboboxPrimitive.Item>
	)
}

/**
 * The star next to an organisation that adds it to or removes it from the favourites. Put it after
 * `OrganizationSwitcherItem` and give it an `aria-label` that says what it does, e.g. "Add Education to favourites".
 * It is a cell of its own in the row: reach it with the right arrow key and press Enter. It needs `favorites` and
 * `searchable` on `OrganizationSwitcher` and renders nothing without them.
 */
function OrganizationSwitcherFavorite({
	value,
	favorite,
	className,
	...props
}: Omit<React.ComponentProps<'div'>, 'ref' | 'children'> & {
	/** The id of the organisation */
	value: string
	/** Whether it is a favourite now; `organization.favorite` */
	favorite: boolean
}) {
	const { mode, toggleFavorite } = useOrganizationSwitcher()
	if (mode !== 'grid') return null

	return (
		<ComboboxPrimitive.Item
			// A value of its own, so the cell is never the selected organisation
			value={`favorite:${value}`}
			data-slot="organization-switcher-favorite"
			data-favorite={favorite ? '' : undefined}
			className={cn(
				'flex size-8 shrink-0 cursor-default items-center justify-center rounded-md text-muted-foreground opacity-0 outline-hidden select-none group-hover/organization-switcher-row:opacity-100 group-has-data-highlighted/organization-switcher-row:opacity-100 data-favorite:text-warning data-favorite:opacity-100 data-highlighted:bg-accent data-highlighted:text-accent-foreground data-favorite:data-highlighted:text-warning',
				className,
			)}
			{...props}
			// Toggle the favourite instead of selecting the cell, and keep the list open
			onClick={(event) => {
				event.preventBaseUIHandler()
				toggleFavorite(value)
			}}
			onMouseUp={(event) => event.preventBaseUIHandler()}
		>
			<StarIcon aria-hidden="true" className={cn('size-4', favorite && 'fill-current')} />
		</ComboboxPrimitive.Item>
	)
}

/**
 * The chevron after an organisation that hides or shows its sub-organisations. Put it last in the row, after
 * `OrganizationSwitcherItem` and `OrganizationSwitcherFavorite`, and give it an `aria-label` that says what it does,
 * e.g. "Collapse Ekdalen Municipality". It is a cell of its own in the row: reach it with the right arrow key and
 * press Enter. An organisation without sub-organisations gets an empty space of the same width, so the rows line up.
 * It needs `collapsible` and `searchable` on `OrganizationSwitcher` and renders nothing without them.
 */
function OrganizationSwitcherExpander({
	value,
	expanded,
	hasChildren,
	className,
	...props
}: Omit<React.ComponentProps<'div'>, 'ref' | 'children'> & {
	/** The id of the organisation */
	value: string
	/** Whether its sub-organisations are listed now; `organization.expanded` */
	expanded: boolean
	/** Whether it has sub-organisations to hide; `organization.hasChildren` */
	hasChildren: boolean
}) {
	const { collapsible, searching, toggleCollapsed } = useOrganizationSwitcher()
	const flat = React.useContext(OrganizationSwitcherFlatContext)
	// Search results are a flat list, so there is nothing to collapse
	if (!collapsible || searching) return null

	if (flat || !hasChildren) {
		return <span data-slot="organization-switcher-expander-spacer" aria-hidden="true" className="size-8 shrink-0" />
	}

	const Icon = expanded ? ChevronDownIcon : ChevronRightIcon

	return (
		<ComboboxPrimitive.Item
			// A value of its own, so the cell is never the selected organisation
			value={`expander:${value}`}
			aria-expanded={expanded}
			data-slot="organization-switcher-expander"
			className={cn(
				'flex size-8 shrink-0 cursor-default items-center justify-center rounded-md text-muted-foreground outline-hidden select-none data-highlighted:bg-accent data-highlighted:text-accent-foreground',
				className,
			)}
			{...props}
			// Collapse or expand instead of selecting the cell, and keep the list open
			onClick={(event) => {
				event.preventBaseUIHandler()
				toggleCollapsed(value)
			}}
			onMouseUp={(event) => event.preventBaseUIHandler()}
		>
			<Icon aria-hidden="true" className="size-4" />
		</ComboboxPrimitive.Item>
	)
}

export {
	OrganizationSwitcher,
	OrganizationSwitcherTrigger,
	OrganizationSwitcherValue,
	OrganizationSwitcherContent,
	OrganizationSwitcherLabel,
	OrganizationSwitcherSearch,
	OrganizationSwitcherEmpty,
	OrganizationSwitcherList,
	OrganizationSwitcherGroup,
	OrganizationSwitcherFavorites,
	OrganizationSwitcherItem,
	OrganizationSwitcherFavorite,
	OrganizationSwitcherExpander,
	type Organization,
	type OrganizationNode,
}
```

---

# Pagination

Page navigation with previous/next, page links and ellipsis.

Install: `npx shadcn@latest add https://rdf.dev.360online.com/r/pagination.json`

Import from: `@/components/ui/pagination`

Builds on: button

npm dependencies: lucide-react@^1.48.0

A pagination component that helps users navigate through multiple pages of content.
Built with accessibility in mind, it provides a consistent way to handle page navigation
in lists, tables, or any content that spans multiple pages.

### Features

- Accessible `<nav>` landmark with `aria-label="pagination"`
- Page links rendered as anchors (`<a>`) styled with `Button`, so they work with `href` and client routers
- Active page highlighting (`isActive` renders the outline button variant and sets `aria-current="page"`)
- Previous/Next links with a chevron icon; the label is set with the `text` prop and hidden below the `sm` breakpoint
- Ellipsis for long page ranges
- Button icon sizes for page links (`icon-xs`, `icon-sm`, `icon`, `icon-lg`)
- Centered by default (`justify-center`); override with `className`

### Usage

```tsx
import {
  Pagination,
  PaginationContent,
  PaginationEllipsis,
  PaginationItem,
  PaginationLink,
  PaginationNext,
  PaginationPrevious,
} from '@/components/ui/pagination'

export function BasicPagination() {
  return (
    <Pagination>
      <PaginationContent>
        <PaginationItem>
          <PaginationPrevious href="#" />
        </PaginationItem>
        <PaginationItem>
          <PaginationLink href="#">1</PaginationLink>
        </PaginationItem>
        <PaginationItem>
          <PaginationLink href="#" isActive>
            2
          </PaginationLink>
        </PaginationItem>
        <PaginationItem>
          <PaginationLink href="#">3</PaginationLink>
        </PaginationItem>
        <PaginationItem>
          <PaginationEllipsis />
        </PaginationItem>
        <PaginationItem>
          <PaginationNext href="#" />
        </PaginationItem>
      </PaginationContent>
    </Pagination>
  )
}
```

#### Controlled

`PaginationLink` renders an anchor, so prevent the default navigation when handling clicks in state.
There is no `disabled` prop; mark an unavailable control with `aria-disabled` and disable pointer events.

```tsx
export function ControlledPagination() {
  const [page, setPage] = React.useState(1)
  const isFirst = page === 1

  return (
    <Pagination>
      <PaginationContent>
        <PaginationItem>
          <PaginationPrevious
            href="#"
            aria-disabled={isFirst}
            tabIndex={isFirst ? -1 : undefined}
            className={isFirst ? 'pointer-events-none opacity-50' : undefined}
            onClick={(e) => {
              e.preventDefault()
              setPage((p) => Math.max(1, p - 1))
            }}
          />
        </PaginationItem>
        {/* Page numbers */}
        <PaginationItem>
          <PaginationNext
            href="#"
            onClick={(e) => {
              e.preventDefault()
              setPage((p) => p + 1)
            }}
          />
        </PaginationItem>
      </PaginationContent>
    </Pagination>
  )
}
```

#### Custom Labels

```tsx
<PaginationPrevious href="#" text="Earlier meeting" />
<PaginationNext href="#" text="Later meeting" />
```

#### Default

Basic pagination with a few pages and navigation controls.

#### With More Pages

Pagination with ellipsis for handling many pages.

#### Custom Text

Previous and Next labels set with the `text` prop, here stepping between council meetings.

#### Sizes

Page links accept the `Button` `size` prop. They default to `icon`.

#### With Disabled Controls

Pagination with a disabled Previous control.

#### Controlled

A public diary paged in state, with a sliding window of page numbers and ellipses.

#### Table Footer

A compact footer for a case list: a result summary, rows per page and icon-only first/previous/next/last links with `aria-label`s.

### Subcomponents

#### Pagination
The root container component that wraps the pagination controls.

#### PaginationContent
A container for pagination items, providing proper layout and spacing.

#### PaginationItem
A wrapper for individual pagination elements.

#### PaginationLink
An anchor for page numbers, styled as a `Button`. Accepts all `a` props plus:
- `isActive` - Marks the current page (outline variant, `aria-current="page"`)
- `size` - `Button` size, defaults to `icon`

#### PaginationPrevious
A link for navigating to the previous page. Accepts `PaginationLink` props plus `text` (default `"Previous"`).

#### PaginationNext
A link for navigating to the next page. Accepts `PaginationLink` props plus `text` (default `"Next"`).

#### PaginationEllipsis
An indicator for skipped page numbers.

### Accessibility

The Pagination component follows WAI-ARIA guidelines:

- Uses semantic HTML elements
- Provides proper ARIA labels
- Supports keyboard navigation
- Indicates current page
- Communicates disabled states
- Maintains focus management
- Screen reader friendly

### Best Practices

1. Navigation:
   - Keep consistent page ordering
   - Provide clear visual feedback
   - Handle edge cases (first/last page)
   - Consider mobile interactions

2. Layout:
   - Maintain proper spacing
   - Ensure touch targets are large enough
   - Use clear visual hierarchy
   - Consider responsive behavior

3. Interaction:
   - Handle loading states
   - Provide immediate feedback
   - Maintain URL synchronization
   - Consider infinite scroll alternatives

4. Accessibility:
   - Use descriptive labels
   - Support keyboard shortcuts
   - Maintain focus states
   - Consider screen readers

5. Implementation:
   - Handle state changes gracefully
   - Consider performance implications
   - Implement proper error handling
   - Maintain URL structure

### Related Components

- Table
- Data Table
- Button

## Source

File: components/ui/pagination.tsx

```tsx
import { ChevronLeftIcon, ChevronRightIcon, MoreHorizontalIcon } from 'lucide-react'
import type * as React from 'react'

import { Button } from '@/components/ui/button'
import { cn } from '@/lib/utils'

function Pagination({ className, ...props }: React.ComponentProps<'nav'>) {
	return (
		<nav
			role="navigation"
			aria-label="pagination"
			data-slot="pagination"
			className={cn('mx-auto flex w-full justify-center', className)}
			{...props}
		/>
	)
}

function PaginationContent({ className, ...props }: React.ComponentProps<'ul'>) {
	return (
		<ul
			data-slot="pagination-content"
			className={cn('group/pagination flex items-center gap-0.5', className)}
			{...props}
		/>
	)
}

function PaginationItem({ ...props }: React.ComponentProps<'li'>) {
	return <li data-slot="pagination-item" {...props} />
}

type PaginationLinkProps = {
	isActive?: boolean
	/** Total page count. When set, small screens show only the active link as "current / total" and hide the other page links and ellipses. */
	total?: number
} & Pick<React.ComponentProps<typeof Button>, 'size'> &
	React.ComponentProps<'a'>

function PaginationLink({ className, isActive, size = 'icon', total, children, ...props }: PaginationLinkProps) {
	const compact = total !== undefined
	const showTotal = isActive && compact
	return (
		<Button
			variant={isActive ? 'outline' : 'ghost'}
			size={size}
			className={cn(compact && !isActive && 'max-sm:hidden', showTotal && 'max-sm:w-auto max-sm:px-3', className)}
			nativeButton={false}
			render={
				<a
					aria-current={isActive ? 'page' : undefined}
					data-slot="pagination-link"
					data-active={isActive}
					data-compact={compact || undefined}
					{...props}
				>
					{children}
					{showTotal && <span className="ms-1 sm:hidden">/ {total}</span>}
				</a>
			}
		/>
	)
}

function PaginationPrevious({
	className,
	text = 'Previous',
	...props
}: React.ComponentProps<typeof PaginationLink> & { text?: string }) {
	return (
		<PaginationLink aria-label="Go to previous page" size="default" className={cn('pl-1.5!', className)} {...props}>
			<ChevronLeftIcon data-icon="inline-start" />
			<span className="hidden sm:block">{text}</span>
		</PaginationLink>
	)
}

function PaginationNext({
	className,
	text = 'Next',
	...props
}: React.ComponentProps<typeof PaginationLink> & { text?: string }) {
	return (
		<PaginationLink aria-label="Go to next page" size="default" className={cn('pr-1.5!', className)} {...props}>
			<span className="hidden sm:block">{text}</span>
			<ChevronRightIcon data-icon="inline-end" />
		</PaginationLink>
	)
}

function PaginationEllipsis({ className, ...props }: React.ComponentProps<'span'>) {
	return (
		<span
			aria-hidden
			data-slot="pagination-ellipsis"
			className={cn(
				"flex size-10 items-center justify-center max-sm:group-has-data-compact/pagination:hidden [&_svg:not([class*='size-'])]:size-4",
				className,
			)}
			{...props}
		>
			<MoreHorizontalIcon />
			<span className="sr-only">More pages</span>
		</span>
	)
}

export {
	Pagination,
	PaginationContent,
	PaginationEllipsis,
	PaginationItem,
	PaginationLink,
	PaginationNext,
	PaginationPrevious,
}
```

---

# Popover

Floating panel anchored to a trigger, built on Base UI Popover.

Install: `npx shadcn@latest add https://rdf.dev.360online.com/r/popover.json`

Import from: `@/components/ui/popover`

npm dependencies: @base-ui/react@^1.8.0

A popover component built on top of [Base UI Popover](https://base-ui.com/react/components/popover),
providing a floating element that displays additional content when triggered.

### Features

- Built on the Base UI Popover primitive
- Custom styling with Tailwind CSS
- Accessible by default
- Multiple positioning options
- Controlled and uncontrolled modes
- Custom trigger support
- Animated transitions
- Header, title and description building blocks (`PopoverHeader`, `PopoverTitle`, `PopoverDescription`)
- Focus management
- Screen reader support

### Usage

```tsx
import {
  Popover,
  PopoverTrigger,
  PopoverContent,
  PopoverHeader,
  PopoverTitle,
  PopoverDescription,
} from '@/components/ui/popover'
import { Button } from '@/components/ui/button'

// Basic usage
export function BasicPopover() {
  return (
    <Popover>
      <PopoverTrigger render={<Button variant="outline" />}>Opening hours</PopoverTrigger>
      <PopoverContent className="w-72">
        <PopoverHeader>
          <PopoverTitle>Citizen Service Centre</PopoverTitle>
          <PopoverDescription>City Hall, Kungsgatan 3</PopoverDescription>
        </PopoverHeader>
      </PopoverContent>
    </Popover>
  )
}

// Controlled usage
export function ControlledPopover() {
  const [open, setOpen] = React.useState(false)

  return (
    <Popover open={open} onOpenChange={setOpen}>
      <PopoverTrigger render={<Button variant="outline" />}>Add note</PopoverTrigger>
      <PopoverContent>
        {/* Form fields */}
        <Button onClick={() => setOpen(false)}>Save note</Button>
      </PopoverContent>
    </Popover>
  )
}
```

#### Default

Opening hours for the citizen service centre, with today in bold.

#### With Form

A controlled popover for adding an internal note to a case. Cancel and Save close it through state.

#### With Icon

An icon-only filter button with a checkbox list and a close button.

#### Contact Card

Contact details for the case officer, opened from an inline link.

#### Custom Positioning

Popovers with different `side` values.

### Props


#### Popover
- `defaultOpen` - The open state when initially rendered
- `open` - The controlled open state
- `onOpenChange` - Event handler for open state changes
- `modal` - Whether the popover is modal

#### PopoverTrigger
- `render` - Element to render instead of the default `<button>`, e.g. `render={<Button variant="outline" />}`
- `openOnHover` - Also open the popover when the trigger is hovered
- `children` - The trigger's content

#### PopoverContent
- `align` - The alignment of the popover (default `'center'`)
- `alignOffset` - Offset along the alignment axis (default `0`)
- `side` - The preferred side of the trigger to render (default `'bottom'`)
- `sideOffset` - The distance from the trigger (default `4`)
- `anchor` - Element (or ref) to position against instead of the trigger. Replaces `PopoverAnchor`.
- `className` - Additional CSS classes
- `children` - Content to display in the popover

#### PopoverHeader
- Stacks a `PopoverTitle` and `PopoverDescription`
- `className` - Additional CSS classes

#### PopoverTitle
- Renders an `<h2>` and labels the popover (`aria-labelledby`), so screen readers announce its name
- `render` - Render a different heading level, e.g. `render={<h3 />}`
- `className` - Additional CSS classes
- `children` - Title text

#### PopoverDescription
- Describes the popover (`aria-describedby`)
- `className` - Additional CSS classes
- `children` - Muted description text

`PopoverClose` and `PopoverArrow` are no longer exported. Close the popover with controlled `open` state (as in the With Form and With Icon examples) and style the content without an arrow.

### Accessibility

The Popover component follows WAI-ARIA guidelines:

- Uses proper ARIA roles and attributes
- Manages focus trap within popover
- Supports keyboard navigation:
  - `Esc`: Close popover
  - `Tab`: Navigate focusable elements
  - `Shift+Tab`: Navigate focusable elements (reverse)
- Announces popover state changes
- Provides clear action buttons
- Maintains focus on trigger after closing

### Best Practices

1. Content:
   - Keep content concise and focused
   - Use clear headings
   - Group related information
   - Consider mobile viewports

2. Positioning:
   - Choose appropriate placement
   - Handle overflow gracefully
   - Consider screen edges
   - Maintain visibility

3. Interaction:
   - Provide clear triggers
   - Handle click outside
   - Consider touch devices
   - Manage focus properly

4. Accessibility:
   - Write descriptive labels
   - Use semantic markup
   - Test with screen readers
   - Verify keyboard navigation

5. Implementation:
   - Handle state changes
   - Consider animations
   - Test edge cases

### Related Components

- Tooltip
- Hover Card
- Dialog
- Dropdown Menu
- HoverCard

## Source

File: components/ui/popover.tsx

```tsx
'use client'

import { Popover as PopoverPrimitive } from '@base-ui/react/popover'
import type * as React from 'react'
import { cn } from '@/lib/utils'

function Popover({ ...props }: PopoverPrimitive.Root.Props) {
	return <PopoverPrimitive.Root data-slot="popover" {...props} />
}

function PopoverTrigger({ ...props }: PopoverPrimitive.Trigger.Props) {
	return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />
}

function PopoverContent({
	className,
	align = 'center',
	alignOffset = 0,
	side = 'bottom',
	sideOffset = 4,
	anchor,
	...props
}: PopoverPrimitive.Popup.Props &
	Pick<PopoverPrimitive.Positioner.Props, 'align' | 'alignOffset' | 'side' | 'sideOffset' | 'anchor'>) {
	return (
		<PopoverPrimitive.Portal>
			<PopoverPrimitive.Positioner
				align={align}
				alignOffset={alignOffset}
				side={side}
				sideOffset={sideOffset}
				anchor={anchor}
				className="isolate z-50"
			>
				<PopoverPrimitive.Popup
					data-slot="popover-content"
					className={cn(
						'z-50 flex w-72 origin-(--transform-origin) flex-col gap-2.5 rounded-lg bg-popover p-2.5 text-sm text-popover-foreground shadow-md ring-1 ring-border outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-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',
						className,
					)}
					{...props}
				/>
			</PopoverPrimitive.Positioner>
		</PopoverPrimitive.Portal>
	)
}

function PopoverHeader({ className, ...props }: React.ComponentProps<'div'>) {
	return <div data-slot="popover-header" className={cn('flex flex-col gap-0.5 text-sm', className)} {...props} />
}

function PopoverTitle({ className, ...props }: PopoverPrimitive.Title.Props) {
	return <PopoverPrimitive.Title data-slot="popover-title" className={cn('font-medium', className)} {...props} />
}

function PopoverDescription({ className, ...props }: PopoverPrimitive.Description.Props) {
	return (
		<PopoverPrimitive.Description
			data-slot="popover-description"
			className={cn('text-muted-foreground', className)}
			{...props}
		/>
	)
}

export { Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger }
```

---

# Progress

Horizontal progress bar built on Base UI Progress.

Install: `npx shadcn@latest add https://rdf.dev.360online.com/r/progress.json`

Import from: `@/components/ui/progress`

npm dependencies: @base-ui/react@^1.8.0

A progress component built on top of [Base UI Progress](https://base-ui.com/react/components/progress),
providing an accessible way to display progress or loading state.

### Features

- Built on the Base UI Progress primitive (`@base-ui/react` package)
- Slim `h-1` track on `bg-secondary` with a `bg-primary` indicator by default
- Optional `ProgressLabel` and `ProgressValue` children, which label the bar and show the formatted value
- Indeterminate when `value` is left out or `null`
- Smooth transitions between values
- Height and colors customizable via `className`
- Screen reader support (`role="progressbar"`)

### Usage

Give every progress bar an accessible name with `aria-label` or `aria-labelledby`.

```tsx
import { Progress, ProgressLabel, ProgressValue } from '@/components/ui/progress'

// Basic usage
export function BasicProgress() {
  return <Progress value={40} aria-label="Application progress" />
}

// With a visible label and value; ProgressLabel names the progress bar
export function LabelledProgress() {
  return (
    <Progress value={40}>
      <ProgressLabel>Applicant details</ProgressLabel>
      <ProgressValue />
    </Progress>
  )
}

// With custom height (default is h-1): className goes on the root, so target the track
export function CustomSizeProgress() {
  return <Progress value={60} aria-label="Upload progress" className="*:data-[slot=progress-track]:h-2" />
}

// With a custom indicator colour (use theme tokens)
export function CustomColorProgress() {
  return (
    <Progress value={80} aria-label="Places filled" className="**:data-[slot=progress-indicator]:bg-chart-2" />
  )
}

// Animated progress
export function AnimatedProgress() {
  const [progress, setProgress] = React.useState(0)

  React.useEffect(() => {
    const timer = setInterval(() => {
      setProgress((prev) => (prev >= 100 ? 0 : prev + 10))
    }, 500)
    return () => clearInterval(timer)
  }, [])

  return <Progress value={progress} aria-label="Archive transfer" />
}
```

#### Default

Progress through a five-step e-service, labelled with `aria-labelledby`.

#### With Animation

The value changes after a short delay and the indicator slides smoothly.

#### Different Sizes

The default `h-1` track, then `h-2` and `h-3` via `className="*:data-[slot=progress-track]:h-2"`.

#### Custom Colors

Preschool capacity with indicators coloured from the `chart-1` to `chart-4` tokens.

#### With Label

File uploads for a building permit, each with its own progress and status text.

#### Loading Animation

A long-running archive transfer with a continuous progress loop.

### Props


#### Progress
- `value` - The current progress value (0-100); leave it out or pass `null` for an indeterminate bar
- `min` / `max` - The range (defaults 0 and 100)
- `className` - Additional CSS classes (applied to the root, a wrapping flex container; target the track with
  `*:data-[slot=progress-track]:…` and the indicator with `**:data-[slot=progress-indicator]:…`)
- `format` / `locale` - `Intl.NumberFormat` options and locale for the value text
- `getAriaValueText` - `(formattedValue, value) => string`, the text read by screen readers
- `children` - Rendered before the track, typically `ProgressLabel` and `ProgressValue`

#### ProgressLabel, ProgressValue, ProgressTrack, ProgressIndicator
- `ProgressLabel` - A visible label that names the progress bar (`aria-labelledby`)
- `ProgressValue` - The formatted value, e.g. `40%`
- `ProgressTrack` / `ProgressIndicator` - The parts `Progress` renders, exported for custom layouts

### Accessibility

The Progress component follows WAI-ARIA guidelines:

- Uses the `progressbar` role
- Provides the value through `aria-valuenow` and `aria-valuetext` (a formatted percentage by default)
- Includes `aria-valuemin` and `aria-valuemax`
- Supports custom value text with `getAriaValueText`
- Screen readers do not announce value changes on their own; use a status message (a polite live region) for
  milestones such as "Upload complete"
- Every progress bar needs a name: `aria-label`, `aria-labelledby` or a `ProgressLabel`

### Best Practices

1. Values:
   - Use 0-100 range for consistency
   - Handle edge cases (null, undefined)
   - Consider decimal precision
   - Validate input values

2. Visual Design:
   - Maintain sufficient contrast
   - Use appropriate sizes
   - Consider color meaning
   - Provide clear visual feedback

3. Animation:
   - Use smooth transitions
   - Avoid excessive animations
   - Consider reduced motion
   - Handle interruptions

4. Accessibility:
   - Provide meaningful labels
   - Test with screen readers
   - Consider color blindness
   - Maintain ARIA attributes

5. Implementation:
   - Handle loading states
   - Consider performance
   - Test edge cases
   - Maintain responsiveness

### Related Components

- Slider
- Spinner
- Skeleton

## Source

File: components/ui/progress.tsx

```tsx
'use client'

import { Progress as ProgressPrimitive } from '@base-ui/react/progress'
import { cn } from '@/lib/utils'

function Progress({
	className,
	children,
	value = null,
	...props
}: Omit<ProgressPrimitive.Root.Props, 'value'> & {
	/** The current value (0–`max`). Leave it out or pass `null` for an indeterminate progress bar. */
	value?: number | null
}) {
	return (
		<ProgressPrimitive.Root
			value={value}
			data-slot="progress"
			className={cn('flex flex-wrap gap-3', className)}
			{...props}
		>
			{children}
			<ProgressTrack>
				<ProgressIndicator />
			</ProgressTrack>
		</ProgressPrimitive.Root>
	)
}

function ProgressTrack({ className, ...props }: ProgressPrimitive.Track.Props) {
	return (
		<ProgressPrimitive.Track
			className={cn('relative flex h-1 w-full items-center overflow-x-hidden rounded-full bg-secondary', className)}
			data-slot="progress-track"
			{...props}
		/>
	)
}

function ProgressIndicator({ className, ...props }: ProgressPrimitive.Indicator.Props) {
	return (
		<ProgressPrimitive.Indicator
			data-slot="progress-indicator"
			className={cn('h-full bg-primary transition-all', className)}
			{...props}
		/>
	)
}

function ProgressLabel({ className, ...props }: ProgressPrimitive.Label.Props) {
	return (
		<ProgressPrimitive.Label className={cn('text-sm font-medium', className)} data-slot="progress-label" {...props} />
	)
}

function ProgressValue({ className, ...props }: ProgressPrimitive.Value.Props) {
	return (
		<ProgressPrimitive.Value
			className={cn('ml-auto text-sm text-muted-foreground tabular-nums', className)}
			data-slot="progress-value"
			{...props}
		/>
	)
}

export { Progress, ProgressTrack, ProgressIndicator, ProgressLabel, ProgressValue }
```

---

# Questionnaire

Step-by-step question flow with single and multiple choice answers.

Install: `npx shadcn@latest add https://rdf.dev.360online.com/r/questionnaire.json`

Import from: `@/components/ui/questionnaire`

Builds on: button

npm dependencies: @shadcn/react@^0.3.1, lucide-react@^1.48.0

A step-by-step form that shows one question at a time, built on @shadcn/react. It manages the active question, answer state, validation of required questions, progress, keyboard shortcuts and previous, skip, next and submit navigation. Answers are submitted as regular form data, which makes it suitable for citizen surveys and guided applications.

### Features

- One question at a time with progress
- Single and multiple choice answers
- Free-text answers via QuestionnaireInput
- Required questions with built-in validation messages
- Optional letter or number shortcuts
- Previous, skip, next and submit buttons that show only when relevant
- Answers submitted as FormData

### Usage

```tsx
import {
  Questionnaire,
  QuestionnaireActions,
  QuestionnaireChoice,
  QuestionnaireChoices,
  QuestionnaireError,
  QuestionnaireItem,
  QuestionnaireNext,
  QuestionnairePrevious,
  QuestionnaireProgress,
  QuestionnaireSkip,
  QuestionnaireSubmit,
  QuestionnaireTitle,
} from '@/components/ui/questionnaire'

const items = [{ name: 'satisfaction', required: true }] as const

export function Survey() {
  return (
    <Questionnaire
      items={items}
      onSubmit={(event) => {
        event.preventDefault()
        const answers = new FormData(event.currentTarget)
      }}
    >
      <QuestionnaireProgress />
      <QuestionnaireItem name="satisfaction" required>
        <QuestionnaireTitle>How satisfied are you with how your case was handled?</QuestionnaireTitle>
        <QuestionnaireChoices>
          <QuestionnaireChoice value="satisfied">Satisfied</QuestionnaireChoice>
          <QuestionnaireChoice value="dissatisfied">Dissatisfied</QuestionnaireChoice>
        </QuestionnaireChoices>
        <QuestionnaireError />
      </QuestionnaireItem>
      <QuestionnaireActions>
        <QuestionnairePrevious />
        <QuestionnaireSkip />
        <QuestionnaireNext />
        <QuestionnaireSubmit />
      </QuestionnaireActions>
    </Questionnaire>
  )
}
```

#### Default

A three-step citizen satisfaction survey with a free-text option.

#### Multiple Answers

Accessibility needs for a council meeting: a question that accepts several answers, then an optional one with a free-text field.

#### With Shortcuts

A library visit survey where number keys select answers.

#### Free Text

Signing up for case updates with text and email inputs.

#### With Result

Handles submit and shows a confirmation with the collected answers.

### Accessibility

- Each question is a fieldset with its title as legend
- Choices are native radio or checkbox inputs
- Progress is exposed as a progressbar with a text value
- Validation errors are announced with role="alert"
- Inactive questions are hidden and inert; focus moves to the active question

## Source

File: components/ui/questionnaire.tsx

```tsx
'use client'

import { Questionnaire as QuestionnairePrimitive } from '@shadcn/react/questionnaire'
import { CheckIcon } from 'lucide-react'
import type * as React from 'react'

import { type Button, buttonVariants } from '@/components/ui/button'
import { cn } from '@/lib/utils'

function Questionnaire({ className, ...props }: React.ComponentProps<typeof QuestionnairePrimitive.Root>) {
	return (
		<QuestionnairePrimitive.Root
			data-slot="questionnaire"
			className={cn('flex w-full min-w-0 flex-col gap-4', className)}
			{...props}
		/>
	)
}

function QuestionnaireProgress({ className, ...props }: React.ComponentProps<typeof QuestionnairePrimitive.Progress>) {
	return (
		<QuestionnairePrimitive.Progress
			data-slot="questionnaire-progress"
			className={cn('min-h-[1lh] w-fit min-w-[14ch] text-xs font-medium text-muted-foreground tabular-nums', className)}
			{...props}
		/>
	)
}

function QuestionnaireItem({ className, ...props }: React.ComponentProps<typeof QuestionnairePrimitive.Item>) {
	return (
		<QuestionnairePrimitive.Item
			data-slot="questionnaire-item"
			className={cn('flex min-w-0 flex-col gap-4 border-0 p-0 outline-none', className)}
			{...props}
		/>
	)
}

function QuestionnaireTitle({ className, ...props }: React.ComponentProps<typeof QuestionnairePrimitive.Title>) {
	return (
		<QuestionnairePrimitive.Title
			data-slot="questionnaire-title"
			className={cn(
				'font-heading text-base leading-snug font-medium text-pretty [&:not(:has(~[data-slot=questionnaire-description]))]:mb-4',
				className,
			)}
			{...props}
		/>
	)
}

function QuestionnaireDescription({
	className,
	...props
}: React.ComponentProps<typeof QuestionnairePrimitive.Description>) {
	return (
		<QuestionnairePrimitive.Description
			data-slot="questionnaire-description"
			className={cn('text-sm text-pretty text-muted-foreground', className)}
			{...props}
		/>
	)
}

function QuestionnaireChoices({ className, ...props }: React.ComponentProps<typeof QuestionnairePrimitive.Choices>) {
	return (
		<QuestionnairePrimitive.Choices
			data-slot="questionnaire-choices"
			className={cn('group/questionnaire-choices grid min-w-0 gap-2', className)}
			{...props}
		/>
	)
}

function QuestionnaireChoice({
	children,
	className,
	...props
}: React.ComponentProps<typeof QuestionnairePrimitive.Choice>) {
	return (
		<QuestionnairePrimitive.Choice
			data-slot="questionnaire-choice"
			className={cn(
				'group/questionnaire-choice relative flex min-h-11 cursor-pointer items-start gap-2.5 rounded-lg border border-input bg-transparent px-3 py-2.5 text-start text-sm transition-colors outline-none select-none hover:bg-muted/50 has-[>input:focus-visible]:border-ring has-[>input:focus-visible]:ring-3 has-[>input:focus-visible]:ring-ring/50 data-invalid:border-destructive dark:bg-input/20 data-checked:border-primary/40 data-checked:bg-muted dark:data-checked:bg-muted',
				'data-disabled:pointer-events-none data-disabled:cursor-not-allowed data-disabled:opacity-50',
				className,
			)}
			{...props}
		>
			<QuestionnairePrimitive.ChoiceInput
				data-slot="questionnaire-choice-input"
				className="absolute inset-0 z-10 size-full cursor-pointer opacity-0"
			/>
			<span
				aria-hidden="true"
				data-slot="questionnaire-choice-indicator"
				className="pointer-events-none relative flex size-4 shrink-0 translate-y-[--spacing(0.45)] items-center justify-center rounded-[4px] border border-input group-has-data-[slot=questionnaire-choice-description]/questionnaire-choice:translate-y-0.5 group-data-[type=radio]/questionnaire-choice:rounded-full group-data-checked/questionnaire-choice:border-primary group-data-checked/questionnaire-choice:bg-primary group-data-checked/questionnaire-choice:text-primary-foreground dark:bg-input/30 dark:group-data-checked/questionnaire-choice:bg-primary"
			>
				<span
					data-slot="questionnaire-choice-indicator-dot"
					className="hidden size-2 rounded-full bg-primary-foreground group-data-[type=checkbox]/questionnaire-choice:hidden group-data-checked/questionnaire-choice:block"
				/>
				<CheckIcon
					data-slot="questionnaire-choice-indicator-check"
					className="hidden size-3.5 group-data-[type=radio]/questionnaire-choice:hidden group-data-checked/questionnaire-choice:block"
				/>
			</span>
			<QuestionnairePrimitive.ChoiceLabel
				data-slot="questionnaire-choice-label"
				className="flex min-w-0 flex-1 flex-col gap-0.5 leading-snug"
			>
				{children}
			</QuestionnairePrimitive.ChoiceLabel>
			<QuestionnairePrimitive.ChoiceShortcut
				data-slot="questionnaire-choice-shortcut"
				className="pointer-events-none ms-auto hidden size-5 shrink-0 translate-y-[--spacing(0.45)] items-center justify-center rounded-md border border-input bg-background font-mono text-[0.625rem] leading-none font-medium text-muted-foreground group-has-data-[slot=questionnaire-choice-description]/questionnaire-choice:translate-y-0.5 group-data-[shortcut]/questionnaire-choice:inline-flex"
			/>
		</QuestionnairePrimitive.Choice>
	)
}

function QuestionnaireChoiceDescription({ className, ...props }: React.ComponentProps<'span'>) {
	return (
		<span data-slot="questionnaire-choice-description" className={cn('text-muted-foreground', className)} {...props} />
	)
}

function QuestionnaireInput({ className, ...props }: React.ComponentProps<typeof QuestionnairePrimitive.Input>) {
	return (
		<div data-slot="questionnaire-input-wrapper" className="group/questionnaire-input relative w-full min-w-0">
			<QuestionnairePrimitive.Input
				data-slot="questionnaire-input"
				className={cn(
					'h-10 min-h-11 w-full min-w-0 rounded-lg border border-input bg-transparent px-2.5 py-1 text-base transition-[color,box-shadow,background-color] outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 sm:min-h-0 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40',
					'selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground',
					className,
				)}
				{...props}
			/>
		</div>
	)
}

function QuestionnaireError({ className, ...props }: React.ComponentProps<typeof QuestionnairePrimitive.Error>) {
	return (
		<QuestionnairePrimitive.Error
			data-slot="questionnaire-error"
			className={cn('mt-2 text-sm text-destructive', className)}
			{...props}
		/>
	)
}

function QuestionnaireActions({ className, ...props }: React.ComponentProps<'div'>) {
	return (
		<div
			data-slot="questionnaire-actions"
			className={cn('grid min-h-11 w-full grid-cols-[minmax(0,1fr)_auto_auto] items-center gap-2 sm:min-h-10', className)}
			{...props}
		/>
	)
}

function QuestionnairePrevious({
	children,
	className,
	size = 'default',
	variant = 'outline',
	...props
}: React.ComponentProps<typeof QuestionnairePrimitive.Previous> &
	Pick<React.ComponentProps<typeof Button>, 'size' | 'variant'>) {
	return (
		<QuestionnairePrimitive.Previous
			data-slot="questionnaire-previous"
			data-size={size}
			data-variant={variant}
			className={cn(
				buttonVariants({ size, variant }),
				'col-start-1 row-start-1 min-h-11 justify-self-start sm:min-h-0',
				className,
			)}
			{...props}
		>
			{children ?? 'Previous'}
		</QuestionnairePrimitive.Previous>
	)
}

function QuestionnaireSkip({
	children,
	className,
	size = 'default',
	variant = 'outline',
	...props
}: React.ComponentProps<typeof QuestionnairePrimitive.Skip> &
	Pick<React.ComponentProps<typeof Button>, 'size' | 'variant'>) {
	return (
		<QuestionnairePrimitive.Skip
			data-slot="questionnaire-skip"
			data-size={size}
			data-variant={variant}
			className={cn(
				buttonVariants({ size, variant }),
				'col-start-2 row-start-1 min-h-11 justify-self-end sm:min-h-0',
				className,
			)}
			{...props}
		>
			{children ?? 'Skip'}
		</QuestionnairePrimitive.Skip>
	)
}

function QuestionnaireNext({
	children,
	className,
	size = 'default',
	variant = 'default',
	...props
}: React.ComponentProps<typeof QuestionnairePrimitive.Next> &
	Pick<React.ComponentProps<typeof Button>, 'size' | 'variant'>) {
	return (
		<QuestionnairePrimitive.Next
			data-slot="questionnaire-next"
			data-size={size}
			data-variant={variant}
			className={cn(
				buttonVariants({ size, variant }),
				'col-start-3 row-start-1 min-h-11 justify-self-end sm:min-h-0',
				className,
			)}
			{...props}
		>
			{children ?? 'Next'}
		</QuestionnairePrimitive.Next>
	)
}

function QuestionnaireSubmit({
	children,
	className,
	size = 'default',
	variant = 'default',
	...props
}: React.ComponentProps<typeof QuestionnairePrimitive.Submit> &
	Pick<React.ComponentProps<typeof Button>, 'size' | 'variant'>) {
	return (
		<QuestionnairePrimitive.Submit
			data-slot="questionnaire-submit"
			data-size={size}
			data-variant={variant}
			className={cn(
				buttonVariants({ size, variant }),
				'col-start-3 row-start-1 min-h-11 justify-self-end sm:min-h-0',
				className,
			)}
			{...props}
		>
			{children ?? 'Submit'}
		</QuestionnairePrimitive.Submit>
	)
}

export {
	Questionnaire,
	QuestionnaireActions,
	QuestionnaireChoice,
	QuestionnaireChoiceDescription,
	QuestionnaireChoices,
	QuestionnaireDescription,
	QuestionnaireError,
	QuestionnaireInput,
	QuestionnaireItem,
	QuestionnaireNext,
	QuestionnairePrevious,
	QuestionnaireProgress,
	QuestionnaireSkip,
	QuestionnaireSubmit,
	QuestionnaireTitle,
}
```

---

# Radio Group

Set of mutually exclusive options built on Base UI Radio Group.

Install: `npx shadcn@latest add https://rdf.dev.360online.com/r/radio-group.json`

Import from: `@/components/ui/radio-group`

npm dependencies: @base-ui/react@^1.8.0

A set of checkable buttons, known as radio buttons, where no more than one can be checked at a time.
Built on top of [Base UI Radio Group](https://base-ui.com/react/components/radio),
it follows WAI-ARIA design patterns and is fully accessible.

### Features

- Controlled (`value` / `onValueChange`) and uncontrolled (`defaultValue`) modes
- Disable the whole group or individual items
- Invalid state via `aria-invalid` on the items
- Enlarged hit area around the 16px radio for easier clicking
- Works with `Label` or the `Field` components, including selectable choice cards
- Keyboard navigation with the arrow keys (all four arrow keys move between options)
- Screen reader support

Pass `readOnly` on `RadioGroup` to show a value that can't be changed. Unlike `disabled`, the items stay focusable and
the group is announced as read-only (`aria-readonly`).

### Usage

```tsx
import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group'
import { Label } from '@/components/ui/label'

export function DeliveryMethod() {
  return (
    <RadioGroup defaultValue="mailbox">
      <div className="flex items-center gap-3">
        <RadioGroupItem value="mailbox" id="mailbox" />
        <Label htmlFor="mailbox">Digital mailbox</Label>
      </div>
      <div className="flex items-center gap-3">
        <RadioGroupItem value="letter" id="letter" />
        <Label htmlFor="letter">Letter</Label>
      </div>
    </RadioGroup>
  )
}
```

#### Choice Card

Wrap a horizontal `Field` in a `FieldLabel` to make the whole card selectable. The card is highlighted when its item is checked.

```tsx
import { Field, FieldContent, FieldDescription, FieldLabel, FieldTitle } from '@/components/ui/field'
import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group'

<RadioGroup defaultValue="resident">
  <FieldLabel htmlFor="permit-resident">
    <Field orientation="horizontal">
      <RadioGroupItem value="resident" id="permit-resident" />
      <FieldContent>
        <FieldTitle>Resident parking</FieldTitle>
        <FieldDescription>Park in your own zone near home.</FieldDescription>
      </FieldContent>
    </Field>
  </FieldLabel>
</RadioGroup>
```

#### Default

Choosing how a decision is delivered. Wrap the group in a `FieldSet` with a `FieldLegend` so it has an accessible name.

#### With Descriptions

Waste collection frequencies with prices in the description.

#### Choice Card

Parking permit types as selectable cards.

#### Horizontal Layout

The group is a vertical grid by default. Use `className` for a horizontal layout; all four arrow keys move between options in any layout.

#### Disabled State

Disable the whole group with `disabled` on `RadioGroup`, or a single option with `disabled` on `RadioGroupItem`, and explain why.

#### Read Only

A decided care level, shown without letting it change by mouse or keyboard.

#### Invalid

A required question with `aria-invalid` on the items and an error linked with `aria-describedby`.

### Accessibility

The RadioGroup component follows WAI-ARIA guidelines for radio groups:

- Uses proper ARIA roles (`radiogroup`, `radio`)
- Supports keyboard navigation:
  - `Tab`: Move focus to the radio group
  - `Space`: Select the focused radio button
  - `Arrow keys`: Navigate between radio buttons
- Provides proper labeling and descriptions
- Maintains focus management

### Best Practices

- Always provide labels for radio options
- Use meaningful values for radio options
- Consider using descriptions for complex choices
- Group related options together
- Use appropriate spacing between options
- Provide clear visual feedback for selected state

### Related Components

- Checkbox
- Select
- Switch
- Field

## Source

File: components/ui/radio-group.tsx

```tsx
'use client'

import { Radio as RadioPrimitive } from '@base-ui/react/radio'
import { RadioGroup as RadioGroupPrimitive } from '@base-ui/react/radio-group'
import { cn } from '@/lib/utils'

/**
 * `readOnly` shows the value but prevents changing it. Unlike `disabled`, the items stay focusable and the group is
 * announced as read-only (`aria-readonly`). Base UI blocks the change and sets `data-readonly` on the group and items;
 * we also keep `data-read-only` on the group.
 */
function RadioGroup({ className, readOnly, ...props }: RadioGroupPrimitive.Props) {
	return (
		<RadioGroupPrimitive
			data-slot="radio-group"
			data-read-only={readOnly || undefined}
			readOnly={readOnly}
			className={cn('group/radio-group grid w-full gap-2', className)}
			{...props}
		/>
	)
}

function RadioGroupItem({ className, ...props }: RadioPrimitive.Root.Props) {
	return (
		<RadioPrimitive.Root
			data-slot="radio-group-item"
			className={cn(
				'group/radio-group-item peer relative flex aspect-square size-4 shrink-0 rounded-full border border-input text-primary outline-none group-has-[:focus-visible]/field-label:ring-0 group-has-[:focus-visible]/field-label:not-data-checked:border-input after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring data-disabled:cursor-not-allowed data-disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary group-has-[:focus-visible]/field-label:data-checked:border-primary data-readonly:cursor-default data-readonly:border-dashed data-readonly:border-foreground/60 data-readonly:bg-muted/50 data-readonly:data-checked:border-foreground/60 data-readonly:data-checked:bg-muted/50',
				className,
			)}
			{...props}
		>
			<RadioPrimitive.Indicator data-slot="radio-group-indicator" className="flex size-4 items-center justify-center">
				<span className="absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-primary-foreground group-data-readonly/radio-group-item:bg-foreground" />
			</RadioPrimitive.Indicator>
		</RadioPrimitive.Root>
	)
}

export { RadioGroup, RadioGroupItem }
```

---

# Resizable

Resizable panel groups with drag handles, built on react-resizable-panels.

Install: `npx shadcn@latest add https://rdf.dev.360online.com/r/resizable.json`

Import from: `@/components/ui/resizable`

npm dependencies: react-resizable-panels@^4.14.1

A resizable panel component that allows users to adjust the size of panels by dragging handles. Built on
react-resizable-panels v4 with support for horizontal and vertical layouts.

> **Sizes:** in v4, numeric size props are **pixels**. Use strings for percentages, e.g. `defaultSize="50%"` (a string
> without a unit, like `"50"`, is also treated as a percentage). Other CSS units (`px`, `rem`, `em`, `vh`, `vw`) are
> supported too.

### Features

- Horizontal and vertical panel layouts
- Draggable resize handles with optional grip indicators
- Minimum and maximum size constraints
- Nested panel groups for complex layouts
- Sizes in percentages, pixels or other CSS units
- Collapsible panels with an imperative API (`panelRef`)
- Persisted layouts via the `useDefaultLayout` hook
- Keyboard accessibility and screen reader support
- Touch support
- Built on top of react-resizable-panels v4

### Usage

```tsx
import {
  ResizablePanelGroup,
  ResizablePanel,
  ResizableHandle,
} from "@/components/ui/resizable"

// Basic horizontal layout
<ResizablePanelGroup orientation="horizontal" className="max-w-md rounded-lg border">
  <ResizablePanel defaultSize="50%">
    <div className="flex h-[200px] items-center justify-center p-6">
      <span className="font-semibold">One</span>
    </div>
  </ResizablePanel>
  <ResizableHandle />
  <ResizablePanel defaultSize="50%">
    <div className="flex h-[200px] items-center justify-center p-6">
      <span className="font-semibold">Two</span>
    </div>
  </ResizablePanel>
</ResizablePanelGroup>

// With visible handle grip
<ResizablePanelGroup orientation="horizontal">
  <ResizablePanel defaultSize="50%">Content</ResizablePanel>
  <ResizableHandle withHandle />
  <ResizablePanel defaultSize="50%">Content</ResizablePanel>
</ResizablePanelGroup>

// Vertical layout
<ResizablePanelGroup orientation="vertical">
  <ResizablePanel defaultSize="50%">Top Content</ResizablePanel>
  <ResizableHandle withHandle />
  <ResizablePanel defaultSize="50%">Bottom Content</ResizablePanel>
</ResizablePanelGroup>

// With size constraints
<ResizablePanelGroup orientation="horizontal">
  <ResizablePanel defaultSize="30%" minSize="20%" maxSize="60%">
    Constrained Panel
  </ResizablePanel>
  <ResizableHandle />
  <ResizablePanel defaultSize="70%">
    Flexible Panel
  </ResizablePanel>
</ResizablePanelGroup>

// Nested panels
<ResizablePanelGroup orientation="horizontal">
  <ResizablePanel defaultSize="50%">Left Panel</ResizablePanel>
  <ResizableHandle />
  <ResizablePanel defaultSize="50%">
    <ResizablePanelGroup orientation="vertical">
      <ResizablePanel defaultSize="50%">Top Right</ResizablePanel>
      <ResizableHandle />
      <ResizablePanel defaultSize="50%">Bottom Right</ResizablePanel>
    </ResizablePanelGroup>
  </ResizablePanel>
</ResizablePanelGroup>
```

#### Default

A case list next to the selected case. The list has a minimum size of 25%.

#### With Handle

A document list and preview with a visible grip on the handle.

#### Vertical

A council agenda above the minutes for the selected item.

#### Three Panels

Folders, a case list and case details, each with its own handle.

#### With Min/Max Constraints

Property details limited to 25–60% of the width, next to a map placeholder.

#### Nested Panels

A vertical group nested inside a horizontal one.

#### Case Workspace

A full case handling workspace: case list, details and applicant messages in nested groups.

#### Collapsible

The case list collapses and expands through the imperative `panelRef` API.

#### Persisted Layout

Panel sizes saved to `localStorage` with `useDefaultLayout`. Resize, then reload.

### Props


#### ResizablePanelGroup
Wraps react-resizable-panels `Group`.
- `orientation?: "horizontal" | "vertical"` - Layout orientation (defaults to `"horizontal"`)
- `defaultLayout?: Layout` - Initial layout as a map of panel id to percentage
- `onLayoutChange?: (layout: Layout) => void` - Called continuously while resizing
- `onLayoutChanged?: (layout: Layout, meta) => void` - Called once a resize has finished (use for persistence)
- `disabled?: boolean` - Disable resizing for the whole group
- `groupRef?` - Imperative API (`getLayout`, `setLayout`)
- Extends standard `div` props

#### ResizablePanel
Wraps react-resizable-panels `Panel`.
- `id?: string` - Panel id (required for persisted layouts)
- `defaultSize?: number | string` - Default size (`"30%"`, `"240px"`, … — numbers are pixels)
- `minSize?: number | string` - Minimum size
- `maxSize?: number | string` - Maximum size
- `collapsible?: boolean` - Whether the panel can be collapsed below `minSize`
- `collapsedSize?: number | string` - Size when collapsed (defaults to 0%)
- `onResize?: (size: { asPercentage, inPixels }, id, prevSize) => void` - Called when the panel resizes
- `panelRef?` - Imperative API (`collapse`, `expand`, `isCollapsed`, `getSize`, `resize`)
- `disabled?: boolean` - Prevent this panel from being resized

#### ResizableHandle
Wraps react-resizable-panels `Separator`.
- `withHandle?: boolean` - Whether to show a visible grip
- `disabled?: boolean` - Whether the handle is disabled
- `disableDoubleClick?: boolean` - Disable resetting to the default size on double-click

### Advanced Features

#### Persisted Layouts

```tsx
import { useDefaultLayout } from 'react-resizable-panels'

const { defaultLayout, onLayoutChanged } = useDefaultLayout({ id: 'my-layout', storage: localStorage })

<ResizablePanelGroup defaultLayout={defaultLayout} onLayoutChanged={onLayoutChanged}>
  <ResizablePanel id="nav" defaultSize="30%">Panel 1</ResizablePanel>
  <ResizableHandle />
  <ResizablePanel id="main" defaultSize="70%">Panel 2</ResizablePanel>
</ResizablePanelGroup>
```

#### Panel Collapse

```tsx
import { usePanelRef } from 'react-resizable-panels'

const panelRef = usePanelRef()

<ResizablePanel panelRef={panelRef} defaultSize="30%" minSize="15%" collapsible collapsedSize="5%">
  Collapsible Panel
</ResizablePanel>

<Button onClick={() => panelRef.current?.collapse()}>Collapse</Button>
```

### Accessibility

The Resizable component follows WCAG 2.1 guidelines and provides:

- Proper ARIA roles and attributes for resize handles
- Keyboard navigation support:
  - `Enter/Space`: Start/stop resizing
  - `Arrow keys`: Resize panels when focused
  - `Home/End`: Move to minimum/maximum size
  - `Tab`: Navigate between handles
- Focus management with visible focus indicators
- Screen reader announcements for size changes
- Touch and mouse interaction support
- High contrast mode compatibility

### Best Practices

1. **Layout Design**
   - Use appropriate default sizes that work well for your content
   - Set reasonable minimum and maximum constraints
   - Consider the content hierarchy when nesting panels
   - Test layouts on different screen sizes

2. **User Experience**
   - Use `withHandle` for better discoverability of resize functionality
   - Provide visual feedback during resize operations
   - Consider persisting layouts (`useDefaultLayout`) for returning users
   - Don't make panels too narrow for their content

3. **Performance**
   - Avoid complex content in panels during resize operations
   - Use `onResize` callbacks judiciously to prevent performance issues
   - Consider virtualizing content in large panels
   - Test with many panels to ensure smooth performance

4. **Responsive Design**
   - Consider different interaction methods (mouse, touch, keyboard)
   - Test on mobile devices where drag interactions may differ
   - Provide adequate touch targets for resize handles
   - Consider collapsible panels for mobile layouts

5. **Content Management**
   - Ensure content adapts gracefully to size changes
   - Use appropriate overflow handling (scroll, wrap, truncate)
   - Consider minimum content requirements when setting minSize
   - Provide loading states for dynamic content

### Common Use Cases

- **Code Editors**: File explorer, editor, and output panels
- **Dashboards**: Customizable widget layouts
- **Email Clients**: Folder tree, message list, and preview pane
- **Design Tools**: Tools palette, canvas, and properties panel
- **Data Analysis**: Charts, filters, and data tables
- **Documentation**: Navigation, content, and table of contents

### Related Components

- Card
- Tabs
- Accordion
- Sheet

## Source

File: components/ui/resizable.tsx

```tsx
'use client'

import * as ResizablePrimitive from 'react-resizable-panels'
import { cn } from '@/lib/utils'

function ResizablePanelGroup({ className, ...props }: ResizablePrimitive.GroupProps) {
	return (
		<ResizablePrimitive.Group
			data-slot="resizable-panel-group"
			className={cn('flex h-full w-full aria-[orientation=vertical]:flex-col', className)}
			{...props}
		/>
	)
}

function ResizablePanel({ ...props }: ResizablePrimitive.PanelProps) {
	return <ResizablePrimitive.Panel data-slot="resizable-panel" {...props} />
}

function ResizableHandle({
	withHandle,
	className,
	...props
}: ResizablePrimitive.SeparatorProps & {
	withHandle?: boolean
}) {
	return (
		<ResizablePrimitive.Separator
			data-slot="resizable-handle"
			className={cn(
				'relative flex w-px items-center justify-center bg-border ring-offset-background after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-hidden aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:after:left-0 aria-[orientation=horizontal]:after:h-1 aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:translate-x-0 aria-[orientation=horizontal]:after:-translate-y-1/2 [&[aria-orientation=horizontal]>div]:rotate-90',
				className,
			)}
			{...props}
		>
			{withHandle && <div className="z-10 flex h-6 w-1 shrink-0 rounded-lg bg-border" />}
		</ResizablePrimitive.Separator>
	)
}

export { ResizableHandle, ResizablePanel, ResizablePanelGroup }
```

---

# Rich Text Content

Renders HTML produced by the rich text editor with consistent typography.

Install: `npx shadcn@latest add https://rdf.dev.360online.com/r/rich-text-content.json`

Import from: `@/components/ui/rich-text-content`

Renders an HTML string produced by a rich text editor (Tiptap, ProseMirror, …) with paragraph, list and link styles
applied, so the output looks the same as it did in the editor.

The component uses `dangerouslySetInnerHTML` — only pass markup you trust or have sanitized server-side.

### Usage

```tsx
import { RichTextContent } from "@/components/ui/rich-text-content"

<RichTextContent html={decision.body} className="text-sm" />
```

#### Default

A news article with a paragraph, a bullet list and a link.

#### Muted

Case notes rendered in a smaller, muted style with `className`.

#### Decision Letter

A decision with a numbered list of conditions, inside a card.

## Source

File: components/ui/rich-text-content.tsx

```tsx
import type * as React from 'react'
import { cn } from '@/lib/utils'

interface RichTextContentProps
	extends Omit<React.HTMLAttributes<HTMLDivElement>, 'dangerouslySetInnerHTML' | 'children'> {
	html: string
}

/**
 * Renders rich text HTML content with proper list, paragraph, and link styles.
 * Use this wherever richtext from the Tiptap editor is displayed as output.
 */
export function RichTextContent({ html, className, ...props }: RichTextContentProps) {
	return (
		<div
			data-slot="rich-text-content"
			className={cn(
				'[&_p]:m-0 [&_p]:w-full [&_p:empty]:min-h-[1em] [&_ul]:list-disc [&_ul]:pl-6 [&_ol]:list-decimal [&_ol]:pl-6 [&_li]:pl-1 [&_a]:text-primary [&_a]:underline [&_a]:underline-offset-4',
				className,
			)}
			// biome-ignore lint/security/noDangerouslySetInnerHtml: richtext content from editor
			dangerouslySetInnerHTML={{ __html: html }}
			{...props}
		/>
	)
}
```

---

# Rich Text Editor

Tiptap rich text editor with formatting toolbar, links, alignment and font size.

Install: `npx shadcn@latest add https://rdf.dev.360online.com/r/rich-text-editor.json`

Import from: `@/components/ui/rich-text-editor`

Builds on: button, field, input, label, popover, tooltip

npm dependencies: @tiptap/extension-link@^3.3.0, @tiptap/extension-placeholder@^3.3.0, @tiptap/extension-text-align@^3.3.0, @tiptap/extension-text-style@^3.3.0, @tiptap/react@^3.3.0, @tiptap/starter-kit@^3.3.0, lucide-react@^1.48.0

A [Tiptap](https://tiptap.dev) editor wrapped in rapidUI styling. The toolbar offers bold, italic, strikethrough, bullet and
numbered lists, blockquote, left/center/right alignment, font size and links. The value is HTML; render it back with
[Rich Text Content](/docs/components/rich-text-content).

Installs as a folder (`components/ui/rich-text-editor/`) with the editor and its `extensions/font-size.ts`.

> **i18n:** the link popover strings ("Insert link", "Add link", …) and toolbar tooltips are hardcoded in English. This
> is a template component — replace them with your app's translation layer after installing.

### Usage

```tsx
import { RichTextEditor, type MenuItemType } from "@/components/ui/rich-text-editor"

const [html, setHtml] = useState('')

<RichTextEditor
  label="Case summary"
  value={html}
  onChange={setHtml}
  placeholder="Summarise the case for the committee…"
  excludeMenuItems={['fontSize', 'blockquote']}
/>
```

External changes to `value` (e.g. `form.reset()`) are synced into the editor without re-emitting `onChange`.

#### Default

An empty editor with a label and placeholder.

#### With content

A case assessment with bold text, a list and a link.

#### Minimal toolbar

A reply to a resident in a card, with alignment, font size, blockquote and strikethrough hidden.

#### HTML placeholder

A structured placeholder that shows the expected sections of a decision rationale.

#### Invalid

`aria-invalid` gives the editor a destructive border while the required text is missing.

#### Live preview

The HTML rendered with Rich Text Content as the applicant will see it.

### Toolbar items

`bold`, `italic`, `strike`, `bulletList`, `orderedList`, `blockquote`, `alignLeft`, `alignCenter`, `alignRight`,
`fontSize`, `link` — hide any of them with `excludeMenuItems`.

### Related Components

- Rich Text Content
- Textarea

## Source

File: components/ui/rich-text-editor/extensions/font-size.ts

```tsx
import { Extension } from '@tiptap/react'

export const FontSize = Extension.create({
	name: 'fontSize',
	addOptions() {
		return {
			types: ['textStyle'],
		}
	},
	addGlobalAttributes() {
		return [
			{
				types: ['textStyle'],
				attributes: {
					fontSize: {
						default: null,
						parseHTML: (element) => element.style.fontSize.replace(/['"]+/g, ''),
						renderHTML: (attributes) => {
							if (!attributes.fontSize) return {}
							return {
								style: `font-size: ${attributes.fontSize}`,
							}
						},
					},
				},
			},
		]
	},
})
```

File: components/ui/rich-text-editor/extensions/index.ts

```tsx
export * from './font-size'
```

File: components/ui/rich-text-editor/index.ts

```tsx
export * from './rich-text-editor'
```

File: components/ui/rich-text-editor/rich-text-editor.tsx

```tsx
'use client'

// NOTE: UI strings are hardcoded in English. This is a template component — wire it to your app's i18n when adopting it.
import Link from '@tiptap/extension-link'
import Placeholder from '@tiptap/extension-placeholder'
import TextAlign from '@tiptap/extension-text-align'
import { TextStyleKit } from '@tiptap/extension-text-style'
import { type Editor, EditorContent, Extension, useEditor } from '@tiptap/react'
import StarterKit from '@tiptap/starter-kit'
import {
	AlignCenter,
	AlignLeft,
	AlignRight,
	Bold,
	Italic,
	Link2,
	List,
	ListOrdered,
	Quote,
	Strikethrough,
	Type,
} from 'lucide-react'
import * as React from 'react'
import { useCallback } from 'react'
import { Button } from '@/components/ui/button'
import { FieldError } from '@/components/ui/field'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
import { cn } from '@/lib/utils'
import { FontSize } from './extensions'

export type MenuItemType =
	| 'bold'
	| 'italic'
	| 'strike'
	| 'bulletList'
	| 'orderedList'
	| 'blockquote'
	| 'alignLeft'
	| 'alignCenter'
	| 'alignRight'
	| 'link'
	| 'fontSize'

interface MenuItemConfig {
	type: MenuItemType
	icon: React.ReactNode
	tooltip: string
	isActive?: (editor: Editor) => boolean
	onClick?: (editor: Editor) => void
	dropdown?: ({ editor }: { editor: Editor | null }) => React.JSX.Element
}

const defaultMenuItems: MenuItemConfig[] = [
	{
		type: 'bold',
		icon: <Bold />,
		tooltip: 'Bold',
		isActive: (editor) => editor.isActive('bold'),
		onClick: (editor) => editor.chain().focus().toggleBold().run(),
	},
	{
		type: 'italic',
		icon: <Italic />,
		tooltip: 'Italic',
		isActive: (editor) => editor.isActive('italic'),
		onClick: (editor) => editor.chain().focus().toggleItalic().run(),
	},
	{
		type: 'strike',
		icon: <Strikethrough />,
		tooltip: 'Strikethrough',
		isActive: (editor) => editor.isActive('strike'),
		onClick: (editor) => editor.chain().focus().toggleStrike().run(),
	},
	{
		type: 'bulletList',
		icon: <List />,
		tooltip: 'Bullet list',
		isActive: (editor) => editor.isActive('bulletList'),
		onClick: (editor) => editor.chain().focus().toggleBulletList().run(),
	},
	{
		type: 'orderedList',
		icon: <ListOrdered />,
		tooltip: 'Numbered list',
		isActive: (editor) => editor.isActive('orderedList'),
		onClick: (editor) => editor.chain().focus().toggleOrderedList().run(),
	},
	{
		type: 'blockquote',
		icon: <Quote />,
		tooltip: 'Blockquote',
		isActive: (editor) => editor.isActive('blockquote'),
		onClick: (editor) => editor.chain().focus().toggleBlockquote().run(),
	},
	{
		type: 'alignLeft',
		icon: <AlignLeft />,
		tooltip: 'Align left',
		isActive: (editor) => editor.isActive({ textAlign: 'left' }),
		onClick: (editor) => editor.chain().focus().setTextAlign('left').run(),
	},
	{
		type: 'alignCenter',
		icon: <AlignCenter />,
		tooltip: 'Center text',
		isActive: (editor) => editor.isActive({ textAlign: 'center' }),
		onClick: (editor) => editor.chain().focus().setTextAlign('center').run(),
	},
	{
		type: 'alignRight',
		icon: <AlignRight />,
		tooltip: 'Align right',
		isActive: (editor) => editor.isActive({ textAlign: 'right' }),
		onClick: (editor) => editor.chain().focus().setTextAlign('right').run(),
	},
	{
		type: 'fontSize',
		icon: <Type />,
		tooltip: 'Font size',
		dropdown: ({ editor }: { editor: Editor | null }) => <FontSizeDropdown editor={editor} />,
	},
]

// Pressed toolbar buttons keep the secondary icon colour on the lighter accent background
const PRESSED_CLASS = 'bg-accent hover:bg-[color-mix(in_oklch,var(--accent),var(--secondary-foreground)_8%)]'

const FONT_SIZES = ['12px', '14px', '16px', '18px', '20px', '24px', '32px']

const FontSizeDropdown = ({ editor }: { editor: Editor | null }) => {
	const [isOpen, setIsOpen] = React.useState(false)

	return (
		<Popover open={isOpen} onOpenChange={setIsOpen}>
			<Tooltip>
				<TooltipTrigger
					render={
						<PopoverTrigger
							// Keep the click away from the wrapper's click-to-focus handler
							onClick={(e) => e.stopPropagation()}
							render={<Button type="button" size="icon-sm" variant="ghost" aria-label="Font size" />}
						/>
					}
				>
					<Type />
				</TooltipTrigger>
				<TooltipContent>Font size</TooltipContent>
			</Tooltip>
			<PopoverContent className="w-40 gap-0.5 p-1">
				<div className="flex flex-col gap-0.5">
					{FONT_SIZES.map((size) => (
						<Button
							key={size}
							type="button"
							variant="ghost"
							size="sm"
							className="justify-start font-normal"
							onClick={() => {
								editor?.chain().focus().setMark('textStyle', { fontSize: size }).run()
								setIsOpen(false)
							}}
						>
							{size}
						</Button>
					))}
				</div>
			</PopoverContent>
		</Popover>
	)
}

interface RichTextEditorProps {
	name?: string
	label?: string
	value?: string
	onChange: (value: string) => void
	placeholder?: string
	htmlPlaceholder?: string
	excludeMenuItems?: MenuItemType[]
	className?: string
	/** marks the editor as invalid (destructive border + ring) */
	'aria-invalid'?: boolean | 'true' | 'false'
}

/**
 * The link to store for what the user typed, or null when it is not a web address.
 * `new URL` alone accepts almost anything once https:// is added (browsers encode spaces
 * as %20), so the host also has to look like a domain: no spaces and at least one dot.
 */
function toLinkHref(input: string): string | null {
	const value = input.trim()
	try {
		const url = new URL(/^https?:\/\//.test(value) ? value : `https://${value}`)
		return /^[^\s%]+\.[^\s%.]+$/.test(url.hostname) ? url.toString() : null
	} catch {
		return null
	}
}

const LinkDropdown = ({ editor }: { editor: Editor | null }) => {
	const [url, setUrl] = React.useState<string>('')
	const urlId = React.useId()
	const urlErrorId = React.useId()
	const [isUrlInvalid, setIsUrlInvalid] = React.useState(false)
	const [isOpen, setIsOpen] = React.useState(false)
	const [isTextSelected, setIsTextSelected] = React.useState(false)
	const [isLinkActive, setIsLinkActive] = React.useState(false)

	// Listen to selection changes to update button state
	React.useEffect(() => {
		if (!editor) return

		const updateSelectionState = () => {
			setIsTextSelected(editor.state.selection.content().size > 0)
			setIsLinkActive(editor.isActive('link'))
		}

		// Initial state
		updateSelectionState()

		// Listen to selection and transaction updates
		editor.on('selectionUpdate', updateSelectionState)
		editor.on('transaction', updateSelectionState)

		return () => {
			editor.off('selectionUpdate', updateSelectionState)
			editor.off('transaction', updateSelectionState)
		}
	}, [editor])

	React.useEffect(() => {
		if (isOpen && editor?.isActive('link')) {
			setUrl(editor.getAttributes('link').href || '')
		} else if (!isOpen) {
			setUrl('')
		}
	}, [isOpen, editor])

	const setLink = useCallback(
		(inputUrl: string) => {
			if (!editor) return

			if (!inputUrl.trim()) {
				editor.chain().focus().extendMarkRange('link').unsetLink().run()
				setIsOpen(false)
				return
			}

			const href = toLinkHref(inputUrl)
			if (!href) {
				setIsUrlInvalid(true)
				return
			}
			editor.chain().focus().extendMarkRange('link').setLink({ href }).run()
			setUrl('')
			setIsOpen(false)
		},
		[editor],
	)

	return (
		<Popover modal open={isOpen} onOpenChange={setIsOpen}>
			<Tooltip>
				<TooltipTrigger
					render={
						<PopoverTrigger
							// Keep the click away from the wrapper's click-to-focus handler
							onClick={(e) => e.stopPropagation()}
							render={
								<Button
									type="button"
									size="icon-sm"
									disabled={!isTextSelected && !isLinkActive}
									variant={isLinkActive ? 'secondary' : 'ghost'}
									className={cn(isLinkActive && PRESSED_CLASS)}
									aria-label="Insert or edit link"
								/>
							}
						/>
					}
				>
					<Link2 />
				</TooltipTrigger>
				<TooltipContent>{isLinkActive ? 'Edit link' : 'Insert link'}</TooltipContent>
			</Tooltip>
			<PopoverContent className="w-72">
				<div className="flex flex-col gap-3">
					<div className="flex flex-col gap-2">
						<Label htmlFor={urlId}>URL</Label>
						<Input
							id={urlId}
							type="url"
							value={url}
							onChange={(e) => {
								setUrl(e.target.value)
								setIsUrlInvalid(false)
							}}
							// Enter adds the link, like submitting a form. Not a <form>: the editor usually sits
							// inside the app's own form, and Enter would submit that instead.
							onKeyDown={(e) => {
								if (e.key !== 'Enter') return
								e.preventDefault()
								setLink(url)
							}}
							placeholder="https://example.com"
							aria-invalid={isUrlInvalid || undefined}
							aria-describedby={isUrlInvalid ? urlErrorId : undefined}
						/>
						{isUrlInvalid && <FieldError id={urlErrorId}>Enter a valid web address, like example.com</FieldError>}
					</div>
					<div className="flex justify-end gap-2">
						<Button
							variant="ghost"
							onClick={() => {
								editor?.chain().focus().extendMarkRange('link').unsetLink().run()
								setIsOpen(false)
							}}
							type="button"
							size="sm"
						>
							Remove link
						</Button>
						<Button variant="default" onClick={() => setLink(url)} type="button" size="sm">
							Add link
						</Button>
					</div>
				</div>
			</PopoverContent>
		</Popover>
	)
}

const ALL_MENU_ITEMS: MenuItemType[] = [...defaultMenuItems.map((item) => item.type), 'link']

const MenuBar = ({
	editor,
	visibleItems = ALL_MENU_ITEMS,
}: {
	editor: Editor | null
	visibleItems?: MenuItemType[]
}) => {
	if (!editor) return null

	const filteredMenuItems = defaultMenuItems.filter((item) => visibleItems.includes(item.type))

	return (
		<TooltipProvider>
			<div className="flex flex-wrap items-center gap-0.5 border-b p-1">
				{filteredMenuItems.map((item) =>
					item.dropdown ? (
						<React.Fragment key={item.type}>{item.dropdown({ editor })}</React.Fragment>
					) : (
						<Tooltip key={item.type}>
							<TooltipTrigger
								render={
									<Button
										type="button"
										size="icon-sm"
										variant={item.isActive?.(editor) ? 'secondary' : 'ghost'}
										className={cn(item.isActive?.(editor) && PRESSED_CLASS)}
										aria-label={item.tooltip}
										aria-pressed={item.isActive ? item.isActive(editor) : undefined}
										onClick={() => item.onClick?.(editor)}
									/>
								}
							>
								{item.icon}
							</TooltipTrigger>
							<TooltipContent>{item.tooltip}</TooltipContent>
						</Tooltip>
					),
				)}
				{visibleItems.includes('link') && <LinkDropdown editor={editor} />}
			</div>
		</TooltipProvider>
	)
}

declare module '@tiptap/core' {
	interface Commands<ReturnType> {
		fontSize: {
			unsetFontSize: () => ReturnType
			setFontSize: (fontSize: string) => ReturnType
		}
		margin: {
			setMargin: (margin: string) => ReturnType
		}
	}
}

export const RichTextEditor = ({
	name,
	value,
	onChange,
	placeholder,
	htmlPlaceholder,
	label,
	excludeMenuItems,
	className,
	'aria-invalid': ariaInvalid,
	...props
}: RichTextEditorProps) => {
	const isContentEmpty = !value || value === '<p></p>' || value.trim() === ''
	const skipSync = React.useRef(false)
	const labelId = React.useId()
	const editor = useEditor({
		immediatelyRender: false,
		// Expose the editable area as a labelled multi-line textbox for screen readers
		editorProps: {
			attributes: {
				role: 'textbox',
				'aria-multiline': 'true',
				...(label ? { 'aria-labelledby': labelId } : {}),
				...(ariaInvalid ? { 'aria-invalid': String(ariaInvalid) } : {}),
			},
		},
		extensions: [
			StarterKit.configure({
				link: false, // Disable the default Link extension since we add our own
				hardBreak: {
					keepMarks: true,
					HTMLAttributes: {
						class: 'my-hard-break',
					},
				},
			}),
			TextStyleKit,
			TextAlign.configure({
				types: ['paragraph'],
				alignments: ['left', 'center', 'right'],
			}),
			Placeholder.configure({
				placeholder,
				showOnlyWhenEditable: true,
				includeChildren: false,
				emptyEditorClass: 'is-editor-empty',
				emptyNodeClass: 'is-node-empty',
			}),
			Link.configure({
				openOnClick: false,
				HTMLAttributes: {
					class: 'text-primary underline underline-offset-4 hover:decoration-2',
					rel: 'noopener noreferrer',
					target: '_blank',
				},
			}),
			FontSize,
			Extension.create({
				name: 'margin',
				addGlobalAttributes() {
					return [
						{
							types: ['paragraph'],
							attributes: {
								margin: {
									default: null,
									parseHTML: (element) => element.style.margin,
									renderHTML: (attributes) => {
										if (!attributes.margin) return {}
										return {
											style: `margin: ${attributes.margin}`,
										}
									},
								},
							},
						},
					]
				},
				addCommands() {
					return {
						setMargin:
							(margin: string) =>
							({ editor }) => {
								return editor.chain().focus().setMargin(margin).run()
							},
					}
				},
			}),
		],
		content: value,
		onUpdate: ({ editor }) => {
			skipSync.current = true
			onChange(editor.getHTML())
		},
		...props,
	})

	// Sync external value changes (e.g. from form.reset()) into the editor
	React.useEffect(() => {
		if (skipSync.current) {
			skipSync.current = false
			return
		}
		if (editor && !editor.isDestroyed && value !== undefined) {
			editor.commands.setContent(value, { emitUpdate: false })
		}
	}, [editor, value])

	return (
		<div className={cn('flex flex-col gap-2', className)} data-slot="rich-text-editor" data-field={name}>
			{label && (
				<Label id={labelId} onClick={() => editor?.commands.focus()}>
					{label}
				</Label>
			)}
			{/* biome-ignore lint/a11y/noStaticElementInteractions: click-to-focus wrapper for the editor */}
			<div
				aria-invalid={ariaInvalid}
				className="w-full cursor-text overflow-hidden rounded-lg border border-border text-sm transition-colors focus-within:border-ring focus-within:ring-3 focus-within:ring-ring aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40"
				// Only react to the wrapper itself, not to events bubbling from the toolbar or the portalled popovers
				onClick={(e) => {
					if (e.currentTarget.contains(e.target as Node)) editor?.commands.focus()
				}}
				onKeyDown={(e) => {
					if (e.key === 'Enter' && e.target === e.currentTarget) {
						e.preventDefault()
						editor?.commands.focus()
					}
				}}
			>
				<MenuBar
					editor={editor}
					visibleItems={excludeMenuItems ? ALL_MENU_ITEMS.filter((item) => !excludeMenuItems.includes(item)) : undefined}
				/>
				<div className="relative">
					<EditorContent
						editor={editor}
						className="min-h-48 px-2.5 py-2 [&_*:focus]:outline-none [&_.ProseMirror]:relative [&_.ProseMirror]:break-words [&_.ProseMirror]:overflow-hidden [&_.ProseMirror_p:empty]:min-h-[1em] [&_.ProseMirror_ul]:list-disc [&_.ProseMirror_ul]:pl-6 [&_.ProseMirror_ol]:list-decimal [&_.ProseMirror_ol]:pl-6 [&_.ProseMirror_li]:pl-1 [&_.ProseMirror_blockquote]:border-l-4 [&_.ProseMirror_blockquote]:border-muted-foreground/30 [&_.ProseMirror_blockquote]:pl-4 [&_.ProseMirror_blockquote]:italic [&_.is-editor-empty]:before:content-[attr(data-placeholder)] [&_.is-editor-empty]:before:absolute [&_.is-editor-empty]:before:text-muted-foreground [&_.is-editor-empty]:before:pointer-events-none [&_.is-editor-empty]:before:h-0"
					/>
					{htmlPlaceholder && isContentEmpty && (
						<div
							className="pointer-events-none absolute inset-0 px-2.5 py-2 text-sm text-muted-foreground [&_a]:text-muted-foreground [&_p]:m-0"
							// biome-ignore lint/security/noDangerouslySetInnerHtml: trusted placeholder HTML from component props
							dangerouslySetInnerHTML={{ __html: htmlPlaceholder }}
						/>
					)}
				</div>
			</div>
		</div>
	)
}
```

---

# Scroll Area

Custom-styled scroll container built on Base UI Scroll Area.

Install: `npx shadcn@latest add https://rdf.dev.360online.com/r/scroll-area.json`

Import from: `@/components/ui/scroll-area`

npm dependencies: @base-ui/react@^1.8.0

A custom scrollable area component with styled scrollbars and smooth scrolling behavior. Built on Base UI ScrollArea with accessibility and keyboard navigation support.

### Features

- Custom styled scrollbars that match your design system
- Vertical scrollbar by default; add `<ScrollBar orientation="horizontal" />` for horizontal scrolling
- Scrollbars are shown whenever the content overflows, so it is always clear there is more to see
- The viewport becomes focusable when its content overflows, so it can be scrolled with the keyboard, with a focus ring
- Native scrolling with touch, mouse wheel and keyboard
- `data-slot` attributes for styling hooks
- Built on top of Base UI ScrollArea primitives

### Usage

```tsx
import { ScrollArea, ScrollBar } from '@/components/ui/scroll-area'

// Basic vertical scrolling
<ScrollArea className="h-72 w-48 rounded-md border">
  <div className="p-4">
    <h4 className="mb-4 text-sm font-medium">Content</h4>
    {/* Your scrollable content */}
  </div>
</ScrollArea>

// Horizontal scrolling
<ScrollArea className="w-96 rounded-md border whitespace-nowrap">
  <div className="flex w-max gap-4 p-4">
    {/* Horizontal content */}
  </div>
  <ScrollBar orientation="horizontal" />
</ScrollArea>
```

#### Default

Today's entries in the public diary, scrolling vertically.

#### Horizontal Scroll

A row of municipal facilities that scrolls sideways.

#### Both Directions

A wide waste collection schedule that overflows in both directions, with a vertical and a horizontal scrollbar.

#### Long Text

A privacy notice. The scrollbar is visible as long as there is more to read.

#### Activity Log

A case history inside a card, where only the list scrolls.

#### Fill Remaining Height

In a flex column with a fixed height, give the scroll area `flex-1` and it takes the space between the header and the
footer. The root has `overflow-hidden`, so it can shrink below its content and scroll instead of growing with it.

### Props


#### ScrollArea
- Extends Base UI ScrollArea.Root props
- `overflowEdgeThreshold?: number` - Distance in px before the `data-overflow-*-start/end` attributes are set
- `className?: string` - Additional CSS classes, applied to the root
- `children: React.ReactNode` - The scrollable content
- Renders a vertical `ScrollBar` automatically

#### ScrollBar
- Extends Base UI ScrollArea.Scrollbar props
- `orientation?: "vertical" | "horizontal"` - Scrollbar orientation (default: "vertical")
- `className?: string` - Additional CSS classes for custom styling
- `keepMounted?: boolean` - Keep the scrollbar mounted when the content doesn't overflow

### Styling

Each part has a `data-slot` attribute you can target:

- `scroll-area` - The root element (with `data-has-overflow-x/y`, `data-overflow-*-start/end` and `data-scrolling`)
- `scroll-area-viewport` - The scrolling viewport
- `scroll-area-scrollbar` - The scrollbar track (with `data-orientation`, `data-hovering` and `data-scrolling`)
- `scroll-area-thumb` - The scrollbar thumb (uses `bg-border`)

### Accessibility

The Scroll Area component follows WCAG 2.1 guidelines and provides:

- Keyboard navigation support:
  - `Arrow keys`: Scroll in small increments
  - `Page Up/Down`: Scroll in large increments
  - `Home/End`: Scroll to beginning/end
  - `Space`: Scroll down one page
  - `Tab`: Navigate to the scrollable area (the viewport is focusable while its content overflows)
- Visible focus ring on the viewport
- Touch and mouse wheel interaction support
- High contrast mode compatibility

### Best Practices

1. **Content Management**
   - Set appropriate dimensions for your scroll area: a fixed height such as `h-72`, or `flex-1` in a flex column with a bounded height
   - Ensure content has proper padding and spacing
   - Consider loading states for dynamic content
   - Use appropriate overflow handling for nested elements

2. **Performance**
   - Avoid putting too many interactive elements in scroll areas
   - Consider virtualization for very long lists
   - Optimize content rendering during scroll events

3. **User Experience**
   - Provide visual feedback for scrollable areas
   - Use horizontal scrolling sparingly - prefer wrapping content
   - Ensure scrollbars are discoverable but not intrusive
   - Test on different devices and input methods

4. **Responsive Design**
   - Test scroll behavior on touch devices
   - Ensure adequate touch targets for scrollbars
   - Consider different scroll behaviors for mobile vs desktop
   - Use appropriate sizing for different screen sizes

5. **Accessibility**
   - Provide alternative navigation methods for complex content
   - Ensure sufficient color contrast for scrollbars
   - Test with keyboard navigation thoroughly
   - Verify screen reader compatibility

### Advanced Usage

#### Programmatic Scrolling and Scroll Events

The element that actually scrolls is the viewport, not the root. A `ref` on `ScrollArea` points to the root,
so query the viewport through its `data-slot` to scroll it or listen for scroll events.

```tsx
import { useEffect, useRef } from 'react'
import { ScrollArea } from '@/components/ui/scroll-area'

function MyComponent() {
  const rootRef = useRef<HTMLDivElement>(null)

  const getViewport = () =>
    rootRef.current?.querySelector<HTMLDivElement>('[data-slot="scroll-area-viewport"]')

  const scrollToTop = () => getViewport()?.scrollTo({ top: 0, behavior: 'smooth' })

  useEffect(() => {
    const viewport = getViewport()
    if (!viewport) return
    const onScroll = () => {
      const { scrollTop, scrollHeight, clientHeight } = viewport
      if (scrollTop + clientHeight >= scrollHeight - 10) {
        // Load more content
      }
    }
    viewport.addEventListener('scroll', onScroll)
    return () => viewport.removeEventListener('scroll', onScroll)
  }, [])

  return (
    <div>
      <button type="button" onClick={scrollToTop}>Top</button>
      <ScrollArea ref={rootRef} className="h-72 w-48">
        {/* Content */}
      </ScrollArea>
    </div>
  )
}
```

### Common Use Cases

- **Content Lists**: Long lists of items, tags, or options
- **Chat Interfaces**: Message history with automatic scrolling
- **Code Editors**: Syntax-highlighted code with horizontal overflow
- **File Explorers**: Hierarchical file trees and folder structures
- **Documentation**: Long-form content with table of contents
- **Data Tables**: Large datasets with horizontal and vertical scrolling
- **Image Galleries**: Horizontal scrolling image carousels
- **Settings Panels**: Long configuration forms and option lists

### Related Components

- Card
- Sheet
- Dialog
- Resizable
- Table

## Source

File: components/ui/scroll-area.tsx

```tsx
'use client'

import { ScrollArea as ScrollAreaPrimitive } from '@base-ui/react/scroll-area'
import { cn } from '@/lib/utils'

function ScrollArea({ className, children, ...props }: ScrollAreaPrimitive.Root.Props) {
	return (
		// `overflow-hidden` lets the root shrink below its content. Without it, a `flex-1` scroll area in a flex column
		// grows with its content and never scrolls. The viewport's focus ring is inset, so it isn't clipped.
		<ScrollAreaPrimitive.Root data-slot="scroll-area" className={cn('relative overflow-hidden', className)} {...props}>
			<ScrollAreaPrimitive.Viewport
				data-slot="scroll-area-viewport"
				className="size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset"
			>
				{children}
			</ScrollAreaPrimitive.Viewport>
			<ScrollBar />
			<ScrollAreaPrimitive.Corner />
		</ScrollAreaPrimitive.Root>
	)
}

function ScrollBar({ className, orientation = 'vertical', ...props }: ScrollAreaPrimitive.Scrollbar.Props) {
	return (
		<ScrollAreaPrimitive.Scrollbar
			data-slot="scroll-area-scrollbar"
			data-orientation={orientation}
			orientation={orientation}
			className={cn(
				'flex touch-none p-px transition-colors select-none data-horizontal:h-2.5 data-horizontal:flex-col data-horizontal:border-t data-horizontal:border-t-transparent data-vertical:h-full data-vertical:w-2.5 data-vertical:border-l data-vertical:border-l-transparent',
				className,
			)}
			{...props}
		>
			<ScrollAreaPrimitive.Thumb data-slot="scroll-area-thumb" className="relative flex-1 rounded-full bg-border" />
		</ScrollAreaPrimitive.Scrollbar>
	)
}

export { ScrollArea, ScrollBar }
```

---

# Select

Native-feeling select menu built on Base UI Select.

Install: `npx shadcn@latest add https://rdf.dev.360online.com/r/select.json`

Import from: `@/components/ui/select`

npm dependencies: @base-ui/react@^1.8.0, lucide-react@^1.48.0

A select component built on top of [Base UI Select](https://base-ui.com/react/components/select),
providing an accessible dropdown menu for selecting options.

### Features

- Built on Base UI Select primitive
- Custom styling with Tailwind CSS
- Accessible by default
- Keyboard navigation
- Screen reader support
- Grouped options
- Custom triggers
- Disabled states
- Controlled and uncontrolled modes
- Placeholder support
- Scrollable content with scroll buttons
- Two trigger sizes: `default` and `sm`
- Invalid state via `aria-invalid` on the trigger
- Item labels shown in the trigger through the `items` prop (icons included)
- Read-only state that keeps the list closed
- Check indicator on the right of the selected item

### Usage

```tsx
import {
  Select,
  SelectTrigger,
  SelectValue,
  SelectContent,
  SelectGroup,
  SelectLabel,
  SelectItem,
  SelectSeparator,
} from '@/components/ui/select'

const caseTypes = {
  'building-permit': 'Building permit',
  'parking-permit': 'Parking permit',
  'school-placement': 'School placement',
}

// Basic usage
export function BasicSelect() {
  return (
    <Select items={caseTypes}>
      <SelectTrigger className="w-[220px]" aria-label="Case type">
        <SelectValue placeholder="Select case type" />
      </SelectTrigger>
      <SelectContent>
        <SelectGroup>
          <SelectLabel>Case types</SelectLabel>
          {Object.entries(caseTypes).map(([value, label]) => (
            <SelectItem key={value} value={value}>
              {label}
            </SelectItem>
          ))}
        </SelectGroup>
      </SelectContent>
    </Select>
  )
}

// Controlled usage
export function ControlledSelect() {
  const [value, setValue] = React.useState<string | null>('en')

  return (
    <Select
      value={value}
      onValueChange={(next) => setValue(next)}
      items={{ en: 'English', sv: 'Swedish', fi: 'Finnish' }}
    >
      <SelectTrigger size="sm" className="w-[180px]" aria-label="Language">
        <SelectValue />
      </SelectTrigger>
      <SelectContent>
        <SelectItem value="en">English</SelectItem>
        <SelectItem value="sv">Swedish</SelectItem>
        <SelectItem value="fi">Finnish</SelectItem>
      </SelectContent>
    </Select>
  )
}
```

The trigger is `w-fit` by default; give it a width (e.g. `className="w-full"` or `w-[180px]`) to size it.

`SelectValue` shows the raw value unless the `Select` knows the item labels. Pass them with the `items` prop (an object
of `value: label`, an array of `{ value, label }` or an array of groups), or format the value yourself with a function
child: `<SelectValue>{(value) => labels[value]}</SelectValue>`.

`onValueChange` receives `(value, eventDetails)`, and `value` can be `null`.

#### Default

A case type picker with a group label. Give a select without a visible label an `aria-label`.

#### With Label

Connected to a `FieldLabel` through the trigger `id`, with a description.

#### Sizes

`SelectTrigger` supports `size="sm"` and `size="default"`.

#### With Groups

Committees in option groups with a separator.

#### With Icons

Case statuses with icons. Icons inside `SelectItem` are sized automatically. Give the `items` labels the same icons to
show them in the trigger.

#### Scrollable

A long list of Nordic municipalities scrolls with buttons at the top and bottom.

#### Popper Position

By default the content is positioned over the trigger with the selected item aligned (`alignItemWithTrigger`). Set
`alignItemWithTrigger={false}` on `SelectContent` to open it below the trigger like a dropdown.

#### Disabled States

Booked appointment times are disabled items; the meeting room select is disabled until a time is chosen.

#### Read Only

Pass `readOnly` on `Select` (or on `SelectTrigger`) to show the value without opening the list. The list stays closed
for pointer, keyboard and label clicks, and the value can't change. Unlike `disabled`, the trigger stays focusable and
is announced as read-only (`aria-readonly`).

#### Invalid

Set `aria-invalid` on the trigger to show the error style, and link the error with `aria-describedby`.

#### Controlled

A controlled language select whose value updates the description.

#### In a Form

Two selects side by side in a problem report form.

### Props


#### Select
- `value` - The controlled value of the select
- `defaultValue` - The default value when uncontrolled
- `onValueChange` - `(value, eventDetails) => void`, called when the value changes
- `items` - Item labels, so `SelectValue` can show the label of the selected item
- `multiple` - Allow selecting several values
- `disabled` - Whether the select is disabled
- `readOnly` - Show the value but keep the list closed and block changes
- `required` - Whether a value is required
- `name` - The name of the select when used in a form

#### SelectTrigger
- `size` - `'default' | 'sm'` (default `'default'`)
- `readOnly` - Same as `readOnly` on `Select`
- `aria-invalid` - Shows the destructive error style
- `className` - Additional CSS classes (the trigger is `w-fit` by default)
- `children` - The trigger content
- `render` - Replace the rendered element

#### SelectValue
- `placeholder` - Text to show when no value is selected
- `children` - A function `(value) => ReactNode` to format the selected value
- `render` - Replace the rendered element

#### SelectContent
- `alignItemWithTrigger` - Position the list over the trigger with the selected item aligned (default `true`)
- `side` - The preferred side to render on
- `sideOffset` - The distance from the trigger
- `align` - The alignment against the trigger (default `'center'`)
- `alignOffset` - The distance from the aligned edge
- `className` - Additional CSS classes

#### SelectItem
- `value` - The value of the item
- `disabled` - Whether the item is disabled
- `className` - Additional CSS classes
- `children` - The item content

### Accessibility

The Select component follows WAI-ARIA guidelines:

- Uses proper ARIA roles (`listbox`, `option`)
- Manages focus within dropdown
- Supports keyboard navigation:
  - `Space/Enter`: Open/close select, choose option
  - `Up/Down`: Navigate options
  - `Home/End`: Jump to first/last option
  - `Esc`: Close select
- Announces selected values
- Provides clear visual feedback
- Maintains focus management

### Best Practices

1. Options:
   - Use clear, concise labels
   - Group related options
   - Order logically
   - Consider default values

2. Visual Design:
   - Maintain sufficient spacing
   - Use clear visual hierarchy
   - Provide clear feedback
   - Consider mobile viewports

3. Interaction:
   - Handle keyboard input
   - Manage focus states
   - Consider touch targets
   - Support type-to-select

4. Accessibility:
   - Write descriptive labels
   - Test with screen readers
   - Verify keyboard navigation
   - Maintain ARIA attributes

5. Implementation:
   - Manage form integration
   - Consider validation
   - Test edge cases

### Related Components

- Native Select
- Multi Select
- Dropdown Menu
- Autocomplete

## Source

File: components/ui/select.tsx

```tsx
'use client'

import { Select as SelectPrimitive } from '@base-ui/react/select'
import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from 'lucide-react'
import * as React from 'react'
import { cn } from '@/lib/utils'

type SelectReadOnlyContextValue = {
	readOnly: boolean
	setTriggerReadOnly: (readOnly: boolean) => void
}

const SelectReadOnlyContext = React.createContext<SelectReadOnlyContextValue>({
	readOnly: false,
	setTriggerReadOnly: () => {},
})

/**
 * `readOnly` shows the value but keeps the list closed (pointer, keyboard and label clicks) and blocks changes.
 * Unlike `disabled`, the trigger stays focusable. It can be set here or on `SelectTrigger`.
 */
function Select<Value, Multiple extends boolean | undefined = false>({
	readOnly: readOnlyProp = false,
	onOpenChange,
	...props
}: SelectPrimitive.Root.Props<Value, Multiple>) {
	const [triggerReadOnly, setTriggerReadOnly] = React.useState(false)
	const readOnly = readOnlyProp || triggerReadOnly
	const contextValue = React.useMemo(() => ({ readOnly, setTriggerReadOnly }), [readOnly])

	return (
		<SelectReadOnlyContext.Provider value={contextValue}>
			<SelectPrimitive.Root<Value, Multiple>
				readOnly={readOnly}
				onOpenChange={(open, eventDetails) => {
					// While read-only, keep the list closed however it is asked to open
					if (readOnly && open) {
						eventDetails.cancel()
						return
					}
					onOpenChange?.(open, eventDetails)
				}}
				{...props}
			/>
		</SelectReadOnlyContext.Provider>
	)
}

function SelectGroup({ className, ...props }: SelectPrimitive.Group.Props) {
	return <SelectPrimitive.Group data-slot="select-group" className={cn('scroll-my-1 p-1', className)} {...props} />
}

function SelectValue({ className, ...props }: SelectPrimitive.Value.Props) {
	return <SelectPrimitive.Value data-slot="select-value" className={cn('flex flex-1 text-left', className)} {...props} />
}

function SelectTrigger({
	className,
	size = 'default',
	readOnly: readOnlyProp,
	children,
	...props
}: SelectPrimitive.Trigger.Props & {
	size?: 'sm' | 'default'
	/** Shows the value but prevents opening the list. Unlike `disabled`, the trigger stays focusable. */
	readOnly?: boolean
}) {
	const { readOnly: rootReadOnly, setTriggerReadOnly } = React.useContext(SelectReadOnlyContext)
	const readOnly = readOnlyProp || rootReadOnly

	React.useLayoutEffect(() => {
		setTriggerReadOnly(!!readOnlyProp)
		return () => setTriggerReadOnly(false)
	}, [readOnlyProp, setTriggerReadOnly])

	return (
		<SelectPrimitive.Trigger
			data-slot="select-trigger"
			data-size={size}
			data-read-only={readOnly || undefined}
			// Base UI's trigger is a combobox, which allows aria-readonly
			aria-readonly={readOnly || undefined}
			className={cn(
				"flex w-full items-center justify-between gap-1.5 rounded-lg border border-input bg-background py-2 pr-2 pl-2.5 text-sm whitespace-nowrap transition-colors outline-none select-none hover:border-primary/90 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground data-read-only:cursor-default data-read-only:border-dashed data-read-only:border-input data-read-only:bg-muted/50 data-read-only:text-foreground data-read-only:hover:border-input data-read-only:hover:bg-muted/50 data-[size=default]:h-10 data-[size=sm]:h-8 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
				className,
			)}
			{...props}
		>
			{children}
			<SelectPrimitive.Icon render={<ChevronDownIcon className="pointer-events-none size-4 text-muted-foreground" />} />
		</SelectPrimitive.Trigger>
	)
}

function SelectContent({
	className,
	children,
	side = 'bottom',
	sideOffset = 4,
	align = 'center',
	alignOffset = 0,
	alignItemWithTrigger = true,
	...props
}: SelectPrimitive.Popup.Props &
	Pick<SelectPrimitive.Positioner.Props, 'align' | 'alignOffset' | 'side' | 'sideOffset' | 'alignItemWithTrigger'>) {
	return (
		<SelectPrimitive.Portal>
			<SelectPrimitive.Positioner
				side={side}
				sideOffset={sideOffset}
				align={align}
				alignOffset={alignOffset}
				alignItemWithTrigger={alignItemWithTrigger}
				className="isolate z-50"
			>
				<SelectPrimitive.Popup
					data-slot="select-content"
					data-align-trigger={alignItemWithTrigger}
					className={cn(
						'relative isolate z-50 max-h-(--available-height) w-(--anchor-width) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-border duration-100 data-[align-trigger=true]:animate-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-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',
						className,
					)}
					{...props}
				>
					<SelectScrollUpButton />
					<SelectPrimitive.List>{children}</SelectPrimitive.List>
					<SelectScrollDownButton />
				</SelectPrimitive.Popup>
			</SelectPrimitive.Positioner>
		</SelectPrimitive.Portal>
	)
}

function SelectLabel({ className, ...props }: SelectPrimitive.GroupLabel.Props) {
	return (
		<SelectPrimitive.GroupLabel data-slot="select-label" className={cn('px-1.5 py-1 text-xs', className)} {...props} />
	)
}

function SelectItem({ className, children, ...props }: SelectPrimitive.Item.Props) {
	return (
		<SelectPrimitive.Item
			data-slot="select-item"
			className={cn(
				"relative flex w-full cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
				className,
			)}
			{...props}
		>
			<SelectPrimitive.ItemText className="flex flex-1 shrink-0 gap-2 whitespace-nowrap">
				{children}
			</SelectPrimitive.ItemText>
			<SelectPrimitive.ItemIndicator
				render={<span className="pointer-events-none absolute right-2 flex size-4 items-center justify-center" />}
			>
				<CheckIcon className="pointer-events-none" />
			</SelectPrimitive.ItemIndicator>
		</SelectPrimitive.Item>
	)
}

function SelectSeparator({ className, ...props }: SelectPrimitive.Separator.Props) {
	return (
		<SelectPrimitive.Separator
			data-slot="select-separator"
			className={cn('pointer-events-none -mx-1 my-1 h-px bg-muted', className)}
			{...props}
		/>
	)
}

function SelectScrollUpButton({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.ScrollUpArrow>) {
	return (
		<SelectPrimitive.ScrollUpArrow
			data-slot="select-scroll-up-button"
			className={cn(
				"top-0 z-10 flex w-full cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4",
				className,
			)}
			{...props}
		>
			<ChevronUpIcon aria-hidden="true" />
		</SelectPrimitive.ScrollUpArrow>
	)
}

function SelectScrollDownButton({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.ScrollDownArrow>) {
	return (
		<SelectPrimitive.ScrollDownArrow
			data-slot="select-scroll-down-button"
			className={cn(
				"bottom-0 z-10 flex w-full cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4",
				className,
			)}
			{...props}
		>
			<ChevronDownIcon aria-hidden="true" />
		</SelectPrimitive.ScrollDownArrow>
	)
}

export {
	Select,
	SelectContent,
	SelectGroup,
	SelectItem,
	SelectLabel,
	SelectScrollDownButton,
	SelectScrollUpButton,
	SelectSeparator,
	SelectTrigger,
	SelectValue,
}
```

---

# Separator

Horizontal or vertical divider line.

Install: `npx shadcn@latest add https://rdf.dev.360online.com/r/separator.json`

Import from: `@/components/ui/separator`

npm dependencies: @base-ui/react@^1.8.0

A separator component built on top of [Base UI Separator](https://base-ui.com/react/components/separator),
providing an accessible way to visually separate content.

### Features

- Built on the Base UI Separator primitive
- Horizontal and vertical orientations (vertical separators stretch to the height of a flex parent)
- Renders `role="separator"` with `aria-orientation`; pass `role="none"` for a purely decorative line
- Single solid style; customize color, thickness or dashes via `className`
- `data-slot="separator"` and `data-orientation` for styling hooks

### Usage

```tsx
import { Separator } from '@/components/ui/separator'

// Basic usage
export function BasicSeparator() {
  return (
    <div className="space-y-4">
      <div>Content above</div>
      <Separator />
      <div>Content below</div>
    </div>
  )
}

// Vertical separator
export function VerticalSeparator() {
  return (
    <div className="flex h-5 items-center space-x-4">
      <div>Left</div>
      <Separator orientation="vertical" />
      <div>Right</div>
    </div>
  )
}

// With custom styles
export function CustomSeparator() {
  return (
    <div className="space-y-4">
      <div>Content above</div>
      <Separator className="bg-primary" />
      {/* Dashed */}
      <Separator className="bg-transparent border-t border-dashed" />
      <div>Content below</div>
    </div>
  )
}

// With text overlay
export function TextSeparator() {
  return (
    <div className="relative">
      <div className="absolute inset-0 flex items-center">
        <Separator className="w-full" />
      </div>
      <div className="relative flex justify-center text-xs">
        <span className="bg-background px-2 text-muted-foreground">
          or
        </span>
      </div>
    </div>
  )
}
```

#### Default

A horizontal separator under a heading, and vertical separators between navigation links.

#### Horizontal

Separators between the rows of an opening hours list.

#### Vertical

Vertical separators between the metadata of a case.

#### Custom Styles

A fee summary with a dashed separator above the total and a thicker primary line below it. There is no built-in `variant` prop; a dashed separator is
made with `className="bg-transparent border-t border-dashed"` (or `border-l` when vertical).

#### With Text

A separator with overlaid text between two ways to continue.

### Props


#### Separator
- `orientation` - The orientation of the separator (`'horizontal' | 'vertical'`, default `'horizontal'`)
- `className` - Additional CSS classes
- `render` - The element to render instead of a `div`
- All other Base UI Separator props

### Accessibility

The Separator component follows WAI-ARIA guidelines:

- Separators use `role="separator"` with `aria-orientation`
- For a purely visual line that assistive technology should skip, pass `role="none"`

### Best Practices

1. Semantic Usage:
   - Use semantic separators for content boundaries
   - Use `role="none"` for purely visual separation
   - Consider content relationships
   - Maintain logical grouping

2. Visual Design:
   - Use consistent spacing
   - Consider color contrast
   - Maintain visual hierarchy
   - Keep separators subtle

3. Orientation:
   - Use horizontal for stacked content
   - Use vertical for inline content
   - Consider responsive layouts
   - Maintain alignment

4. Implementation:
   - Choose appropriate orientation
   - Set proper spacing
   - Consider dark mode
   - Test responsiveness

5. Accessibility:
   - Use semantic separators when appropriate
   - Test with screen readers
   - Maintain ARIA attributes

### Related Components

- Card
- Button Group

## Source

File: components/ui/separator.tsx

```tsx
'use client'

import { Separator as SeparatorPrimitive } from '@base-ui/react/separator'
import { cn } from '@/lib/utils'

function Separator({ className, orientation = 'horizontal', ...props }: SeparatorPrimitive.Props) {
	return (
		<SeparatorPrimitive
			data-slot="separator"
			orientation={orientation}
			// A vertical separator fills a row that has a set height, and a row that takes its height from its content gets a
			// 16px line; give it `h-*` for another length and it stays centred. The classes come from the prop, not data-*
			// variants, so a caller's `h-*` or `self-*` replaces them instead of losing in the cascade.
			className={cn(
				'shrink-0 bg-border',
				orientation === 'vertical' ? 'h-full min-h-4 w-px self-center' : 'h-px w-full',
				className,
			)}
			{...props}
		/>
	)
}

export { Separator }
```

---

# Sheet

Panel that slides in from a screen edge, built on Base UI Dialog.

Install: `npx shadcn@latest add https://rdf.dev.360online.com/r/sheet.json`

Import from: `@/components/ui/sheet`

Builds on: button

npm dependencies: @base-ui/react@^1.8.0, class-variance-authority@^0.7.1, lucide-react@^1.48.0

A sheet component that slides in from the edge of the screen. It can be triggered from any side of the viewport.

### Features

- Can be opened from any edge of the screen (top, right, bottom, left)
- Supports controlled and uncontrolled states
- Keyboard accessible
- Focus management
- Screen reader announcements
- Slide and fade animations with a blurred backdrop
- Built-in close button (toggle with `showCloseButton`)
- Responsive design

### Usage

```tsx
import {
  Sheet,
  SheetTrigger,
  SheetContent,
  SheetHeader,
  SheetFooter,
  SheetTitle,
  SheetDescription,
  SheetClose,
} from "@/components/ui/sheet"
import { Button } from "@/components/ui/button"

export function ContactDetailsSheet() {
  return (
    <Sheet>
      <SheetTrigger render={<Button variant="outline" />}>Edit contact details</SheetTrigger>
      <SheetContent side="right">
        <SheetHeader>
          <SheetTitle>Contact details</SheetTitle>
          <SheetDescription>We use these details to reach you about your cases.</SheetDescription>
        </SheetHeader>
        <div className="px-4">{/* Your content */}</div>
        <SheetFooter>
          <Button type="submit">Save changes</Button>
          <SheetClose render={<Button variant="outline" />}>Close</SheetClose>
        </SheetFooter>
      </SheetContent>
    </Sheet>
  )
}
```

#### Basic Sheet

A resident's contact details, edited in a sheet from the right.

#### Position Variants

The sheet can slide in from different sides of the screen.

##### Top Sheet

A service notice about planned maintenance.

##### Bottom Sheet

Actions for a decision, like a mobile action sheet.

##### Left Sheet

Navigation for My pages, opened from an icon-only menu button.

#### Controlled Sheet

Selecting a case in the list opens its details. The sheet's `open` state follows the selected case.

#### Without Close Button

A filter sheet with the corner close button hidden with `showCloseButton={false}`. It closes with Escape or the footer buttons.

#### Custom Width

A translations sheet that needs more room. `className="w-full sm:max-w-lg"` replaces the default `w-3/4 sm:max-w-sm`: full width on phones, 512px from `sm` up.

### Anatomy

```tsx
<Sheet>
  <SheetTrigger />
  <SheetContent>
    <SheetHeader>
      <SheetTitle />
      <SheetDescription />
    </SheetHeader>
    <SheetFooter>
      <SheetClose />
    </SheetFooter>
  </SheetContent>
</Sheet>
```

### Props

#### Sheet

The root component that manages the sheet's state.


#### SheetTrigger

The button that opens the sheet. By default, it's a button element.

```tsx
<SheetTrigger>Open Sheet</SheetTrigger>
```

#### SheetContent

The component that contains the sheet's content. It can be positioned on any side of the screen.

```tsx
<SheetContent side="right">
  {/* Your content */}
</SheetContent>
```

Props:
- `side`: "top" | "right" | "bottom" | "left" (default "right")
- `showCloseButton`: Whether to render the close button in the top-right corner (default `true`)
- `className`: Additional CSS classes. Left and right sheets are `w-3/4` with `sm:max-w-sm` by default; set your own width here to replace it, e.g. `w-full sm:max-w-lg`

Header and footer have their own `p-4` padding; wrap body content in e.g. `px-4`.

#### SheetHeader

A container for the sheet's header content.

```tsx
<SheetHeader>
  <SheetTitle>Sheet Title</SheetTitle>
  <SheetDescription>Sheet Description</SheetDescription>
</SheetHeader>
```

#### SheetFooter

A container for the sheet's footer content.

```tsx
<SheetFooter>
  <Button>Save changes</Button>
</SheetFooter>
```

#### SheetClose

Closes the sheet. Use the `render` prop to render your own button.

```tsx
<SheetClose render={<Button variant="outline" />}>Close</SheetClose>
```

#### SheetTitle

The title of the sheet. It is automatically announced by screen readers.

```tsx
<SheetTitle>Contact details</SheetTitle>
```

#### SheetDescription

The description of the sheet. It is automatically announced by screen readers.

```tsx
<SheetDescription>
  We use these details to reach you about your cases.
</SheetDescription>
```

### Accessibility

The Sheet component follows WAI-ARIA guidelines for dialogs and modals:

- Uses appropriate ARIA roles and attributes
- Manages focus when opened and closed
- Supports keyboard navigation (Escape to close)
- Provides screen reader announcements
- Implements a focus trap when opened

### Keyboard Interactions

- `Space` or `Enter` on trigger: Opens the sheet
- `Escape`: Closes the sheet
- `Tab`: Moves focus through interactive elements
- `Shift + Tab`: Moves focus through interactive elements in reverse

### Best Practices

1. Always provide descriptive titles and descriptions
2. Use appropriate side positioning based on content context
3. Implement proper focus management
4. Consider mobile responsiveness when choosing side positions
5. Keep content concise and focused

### Related Components

- Dialog - For centered modal dialogs
- Drawer - For touch-friendly sliding panels
- Sidebar - Uses Sheet for its mobile layout
- Popover - For smaller floating content

## Source

File: components/ui/sheet.tsx

```tsx
'use client'

import { Dialog as SheetPrimitive } from '@base-ui/react/dialog'
import { cva, type VariantProps } from 'class-variance-authority'
import { XIcon } from 'lucide-react'
import type * as React from 'react'

import { Button } from '@/components/ui/button'
import { cn } from '@/lib/utils'

function Sheet({ ...props }: SheetPrimitive.Root.Props) {
	return <SheetPrimitive.Root data-slot="sheet" {...props} />
}

function SheetTrigger({ ...props }: SheetPrimitive.Trigger.Props) {
	return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />
}

function SheetClose({ ...props }: SheetPrimitive.Close.Props) {
	return <SheetPrimitive.Close data-slot="sheet-close" {...props} />
}

function SheetPortal({ ...props }: SheetPrimitive.Portal.Props) {
	return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />
}

function SheetOverlay({ className, ...props }: SheetPrimitive.Backdrop.Props) {
	return (
		<SheetPrimitive.Backdrop
			data-slot="sheet-overlay"
			className={cn(
				'fixed inset-0 z-50 bg-black/50 transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0 supports-backdrop-filter:backdrop-blur-xs',
				className,
			)}
			{...props}
		/>
	)
}

// Plain classes per side, not data-[side=…] variants: the attribute selector out-ranks a caller's className, so a
// drawer could not set its own width
const sheetContentVariants = cva(
	'fixed z-50 flex flex-col gap-4 overflow-y-auto bg-background bg-clip-padding text-sm text-foreground shadow-lg transition duration-200 ease-in-out data-ending-style:opacity-0 data-starting-style:opacity-0',
	{
		variants: {
			side: {
				top: 'inset-x-0 top-0 h-auto max-h-dvh border-b data-ending-style:translate-y-[-2.5rem] data-starting-style:translate-y-[-2.5rem]',
				right:
					'inset-y-0 right-0 h-full w-3/4 border-l data-ending-style:translate-x-[2.5rem] data-starting-style:translate-x-[2.5rem] sm:max-w-sm',
				bottom:
					'inset-x-0 bottom-0 h-auto max-h-dvh border-t data-ending-style:translate-y-[2.5rem] data-starting-style:translate-y-[2.5rem]',
				left:
					'inset-y-0 left-0 h-full w-3/4 border-r data-ending-style:translate-x-[-2.5rem] data-starting-style:translate-x-[-2.5rem] sm:max-w-sm',
			},
		},
		defaultVariants: {
			side: 'right',
		},
	},
)

function SheetContent({
	className,
	children,
	side = 'right',
	showCloseButton = true,
	...props
}: SheetPrimitive.Popup.Props & {
	side?: NonNullable<VariantProps<typeof sheetContentVariants>['side']>
	showCloseButton?: boolean
}) {
	return (
		<SheetPortal>
			<SheetOverlay />
			<SheetPrimitive.Popup
				data-slot="sheet-content"
				data-side={side}
				className={cn(sheetContentVariants({ side }), className)}
				{...props}
			>
				{children}
				{showCloseButton && (
					<SheetPrimitive.Close
						data-slot="sheet-close"
						render={<Button variant="ghost" className="absolute top-3 right-3" size="icon-sm" />}
					>
						<XIcon />
						<span className="sr-only">Close</span>
					</SheetPrimitive.Close>
				)}
			</SheetPrimitive.Popup>
		</SheetPortal>
	)
}

function SheetHeader({ className, ...props }: React.ComponentProps<'div'>) {
	return <div data-slot="sheet-header" className={cn('flex flex-col gap-0.5 p-4', className)} {...props} />
}

function SheetFooter({ className, ...props }: React.ComponentProps<'div'>) {
	return <div data-slot="sheet-footer" className={cn('mt-auto flex flex-col gap-2 p-4', className)} {...props} />
}

function SheetTitle({ className, ...props }: SheetPrimitive.Title.Props) {
	return (
		<SheetPrimitive.Title
			data-slot="sheet-title"
			className={cn('font-heading text-base font-medium text-foreground', className)}
			{...props}
		/>
	)
}

function SheetDescription({ className, ...props }: SheetPrimitive.Description.Props) {
	return (
		<SheetPrimitive.Description
			data-slot="sheet-description"
			className={cn('text-sm text-muted-foreground', className)}
			{...props}
		/>
	)
}

export { Sheet, SheetTrigger, SheetClose, SheetContent, SheetHeader, SheetFooter, SheetTitle, SheetDescription }
```

---

# Sidebar

Composable, collapsible application sidebar with mobile sheet support.

Install: `npx shadcn@latest add https://rdf.dev.360online.com/r/sidebar.json`

Import from: `@/components/ui/sidebar`

Builds on: button, input, separator, sheet, skeleton, tooltip

npm dependencies: @base-ui/react@^1.8.0, class-variance-authority@^0.7.1, lucide-react@^1.48.0

A comprehensive sidebar component with collapsible behavior, multiple variants, and full mobile support. Built with accessibility and responsive design in mind using composable primitives.

### Features

- Multiple variants: sidebar, floating, and inset
- Collapsible behavior: icon, offcanvas, or none
- Mobile-responsive with sheet overlay
- Left and right positioning support
- Nested menu structures with sub-items
- Group organization with labels and actions
- Loading states with skeleton components
- Tooltip support for collapsed states (requires a `TooltipProvider` ancestor)
- Keyboard shortcut: `⌘B` / `Ctrl+B` toggles the sidebar
- `SidebarTrigger` icon button (ghost, `icon-sm`) with a built-in "Toggle Sidebar" screen-reader label
- Keyboard navigation and accessibility
- Cookie-based state persistence
- Customizable styling and theming
- Built on top of Base UI primitives

### Usage

```tsx
import {
  Sidebar,
  SidebarProvider,
  SidebarTrigger,
  SidebarHeader,
  SidebarContent,
  SidebarFooter,
  SidebarGroup,
  SidebarGroupLabel,
  SidebarGroupContent,
  SidebarMenu,
  SidebarMenuItem,
  SidebarMenuButton,
  SidebarMenuAction,
  SidebarMenuBadge,
  SidebarMenuSub,
  SidebarMenuSubItem,
  SidebarMenuSubButton,
  SidebarSeparator,
  SidebarInput,
  SidebarInset,
  useSidebar,
} from "@/components/ui/sidebar"
import { TooltipProvider } from "@/components/ui/tooltip"

// Basic sidebar setup (TooltipProvider is needed for SidebarMenuButton tooltips;
// usually it is rendered once at the app root)
<TooltipProvider>
  <SidebarProvider>
    <Sidebar collapsible="icon">
      <SidebarHeader>
        <SidebarInput aria-label="Search cases" placeholder="Search cases…" />
      </SidebarHeader>
      <SidebarContent>
        <SidebarGroup>
          <SidebarGroupLabel>Workspace</SidebarGroupLabel>
          <SidebarGroupContent>
            <SidebarMenu>
              <SidebarMenuItem>
                <SidebarMenuButton tooltip="My cases" isActive>
                  <FolderOpen />
                  <span>My cases</span>
                </SidebarMenuButton>
              </SidebarMenuItem>
              <SidebarMenuItem>
                <SidebarMenuButton tooltip="Inbox">
                  <Inbox />
                  <span>Inbox</span>
                </SidebarMenuButton>
              </SidebarMenuItem>
            </SidebarMenu>
          </SidebarGroupContent>
        </SidebarGroup>
      </SidebarContent>
      <SidebarFooter>
        <SidebarMenu>
          <SidebarMenuItem>
            <SidebarMenuButton>
              <User />
              <span>Sofia Berg</span>
            </SidebarMenuButton>
          </SidebarMenuItem>
        </SidebarMenu>
      </SidebarFooter>
    </Sidebar>
    <SidebarInset>
      <header className="flex h-12 items-center gap-2 border-b px-4">
        <SidebarTrigger className="-ml-1" />
        <span>My cases</span>
      </header>
      <div className="flex-1 p-4">Your main content here</div>
    </SidebarInset>
  </SidebarProvider>
</TooltipProvider>

// With nested menu
<SidebarMenu>
  <SidebarMenuItem>
    <SidebarMenuButton>
      <Building2 />
      <span>Building and planning</span>
      <ChevronRight className="ml-auto" />
    </SidebarMenuButton>
    <SidebarMenuSub>
      <SidebarMenuSubItem>
        <SidebarMenuSubButton href="/building-permits" isActive>
          <span>Building permits</span>
        </SidebarMenuSubButton>
      </SidebarMenuSubItem>
      <SidebarMenuSubItem>
        <SidebarMenuSubButton href="/detailed-plans">
          <span>Detailed plans</span>
        </SidebarMenuSubButton>
      </SidebarMenuSubItem>
    </SidebarMenuSub>
  </SidebarMenuItem>
</SidebarMenu>

// With actions and badges
<SidebarMenuItem>
  <SidebarMenuButton>
    <Inbox />
    <span>Messages</span>
  </SidebarMenuButton>
  <SidebarMenuAction showOnHover>
    <Plus />
    <span className="sr-only">New message</span>
  </SidebarMenuAction>
  <SidebarMenuBadge>12</SidebarMenuBadge>
</SidebarMenuItem>

// As a link (use your router's Link the same way)
<SidebarMenuItem>
  <SidebarMenuButton render={<a href="/cases" />} isActive>
    <FolderOpen />
    <span>My cases</span>
  </SidebarMenuButton>
</SidebarMenuItem>

// Using the sidebar hook
function MyComponent() {
  const { state, toggleSidebar, isMobile } = useSidebar()
  
  return (
    <button onClick={toggleSidebar}>
      Sidebar is {state}
    </button>
  )
}
```

#### Default

A case management app: an organisation header, quick links with a notification badge, grouped navigation and the
signed-in handler in the footer. It collapses to icons (`collapsible="icon"`), with tooltips on every item and a
`SidebarRail` to drag or click.

#### Basic

The smallest useful sidebar: a header and one menu with an active item.

#### With Groups

A search field in the header and labelled groups divided by `SidebarSeparator`.

#### With Nested Menu

Service areas that expand into sub-menus, built with `<Collapsible render={<SidebarMenuItem />}>` and `<CollapsibleTrigger render={<SidebarMenuButton />}>`.

#### With Actions

A `SidebarGroupAction` to add a saved search, and a `SidebarMenuAction` per item (shown on hover) that opens a dropdown menu.

#### With Organisation Switcher

The organisation header as a `DropdownMenuTrigger`. The menu takes the width of the trigger while the sidebar is
expanded. Collapsed to icons, the trigger is a 40px button with the 32px logo centred, and the menu is as wide as its
content.

For a list of organisations to pick from, with sub-organisations and search, use the `OrganizationSwitcher` component
with `render={<SidebarMenuButton size="lg" />}` on its trigger instead of building the menu by hand.

#### Floating Variant

`variant="floating"` gives the sidebar rounded corners, a border and a shadow.

#### Inset Variant

`variant="inset"` places the main content in a rounded panel next to the sidebar.

#### Loading State

`SidebarMenuSkeleton` placeholders while the menu loads.

#### Right Sidebar

`side="right"` for a details panel – here the metadata and documents of the open case.

#### Non-Collapsible

`collapsible="none"` renders a fixed-width sidebar that can't be collapsed.

#### Offcanvas

`collapsible="offcanvas"` slides the sidebar completely off-screen when collapsed.

#### Menu Button Variants

`SidebarMenuButton` sizes (`sm`, `default`, `lg` with a 32px icon tile), variants (`default`, `outline`), the active state, and `SidebarMenuSubButton` sizes (`md`, `sm`).

### Props


#### SidebarProvider
- `defaultOpen?: boolean` - Default open state (default: true)
- `open?: boolean` - Controlled open state
- `onOpenChange?: (open: boolean) => void` - Callback when open state changes
- Extends standard `div` props

#### Sidebar
- `side?: "left" | "right"` - Position of the sidebar (default: "left")
- `variant?: "sidebar" | "floating" | "inset"` - Visual variant (default: "sidebar")
- `collapsible?: "offcanvas" | "icon" | "none"` - Collapse behavior (default: "offcanvas")
- `dir?: "ltr" | "rtl"` - Text direction, forwarded to the mobile sheet
- Extends standard `div` props

#### SidebarTrigger
- Ghost icon button (`size="icon-sm"`) with a `PanelLeft` icon and an sr-only "Toggle Sidebar" label
- Toggles the sidebar on click (your `onClick` runs first)
- Place it where it stays visible when the sidebar is collapsed, typically in the `SidebarInset` header
- Extends `Button` props

#### SidebarRail
- A thin hit area on the sidebar edge that toggles the sidebar on click

#### SidebarMenuButton
- `render?: React.ReactElement | function` - Render as another element, e.g. `render={<a href="/cases" />}`
- `isActive?: boolean` - Whether the menu item is active
- `variant?: "default" | "outline"` - Visual variant
- `size?: "default" | "sm" | "lg"` - Button size. `lg` is made for a 32px logo or avatar followed by two lines of text, as in the header and footer; collapsed to icons it centres that 32px element in the 40px button
- `tooltip?: string | TooltipContentProps` - Tooltip shown only when the sidebar is collapsed to icons (not on mobile)
- Extends standard `button` props

#### SidebarMenuAction
- `render?: React.ReactElement | function` - Render as another element, e.g. a `DropdownMenuTrigger`
- `showOnHover?: boolean` - Only show action on hover
- Extends standard `button` props

#### SidebarMenuSubButton
- `render?: React.ReactElement | function` - Render as another element, e.g. your router's `Link`
- `size?: "sm" | "md"` - Button size (default: "md")
- `isActive?: boolean` - Whether the sub-item is active
- Extends standard `a` props

#### SidebarMenuSkeleton
- `showIcon?: boolean` - Whether to show icon skeleton
- Extends standard `div` props

### Variants

#### Sidebar Variants
- **sidebar**: Standard sidebar with border
- **floating**: Elevated sidebar with rounded corners and shadow
- **inset**: Sidebar with margin and card-like appearance

#### Collapsible Modes
- **icon**: Collapses to icon-only width with tooltips. Menu buttons become 40px squares with the 16px icon centred and the label clipped at the button edge; `size="lg"` buttons keep a 32px logo or avatar centred
- **offcanvas**: Slides completely off-screen
- **none**: Fixed width, cannot be collapsed

### State Management

#### useSidebar Hook
The `useSidebar` hook provides access to sidebar state and controls:

```tsx
const {
  state,        // "expanded" | "collapsed"
  open,         // boolean - current open state
  setOpen,      // (open: boolean) => void
  openMobile,   // boolean - mobile sheet state
  setOpenMobile, // (open: boolean) => void
  isMobile,     // boolean - mobile breakpoint
  toggleSidebar // () => void - toggle function
} = useSidebar()
```

#### Persistence
The sidebar automatically saves its state to cookies (`sidebar_state`) with a 7-day expiration.

#### Keyboard Shortcut
Press `⌘B` (macOS) or `Ctrl+B` (Windows/Linux) to toggle the sidebar.

### Mobile Behavior

On mobile devices:
- Sidebar renders as a Sheet overlay
- Automatic responsive breakpoints
- Touch-friendly interactions

### Accessibility

The Sidebar component follows WCAG 2.1 guidelines and provides:

- Proper ARIA roles and attributes for navigation
- Keyboard navigation support:
  - `Tab/Shift+Tab`: Navigate through menu items
  - `Enter/Space`: Activate menu items
  - `Arrow keys`: Navigate nested menus
  - `Escape`: Close mobile sidebar
  - `⌘B` / `Ctrl+B`: Toggle the sidebar
- Focus management with visible indicators
- Screen reader announcements for state changes
- Semantic HTML structure with nav, menu, and menuitem roles
- High contrast mode compatibility

### Best Practices

1. **Structure and Organization**
   - Use `SidebarGroup` to organize related navigation items
   - Provide clear labels with `SidebarGroupLabel`
   - Use separators to create visual hierarchy
   - Keep menu depth to 2-3 levels maximum

2. **Content Guidelines**
   - Use meaningful icons that relate to the content
   - Keep menu labels concise and descriptive
   - Provide tooltips for collapsed state
   - Use badges sparingly for important notifications

3. **Responsive Design**
   - Test on mobile devices for touch interactions
   - Ensure adequate touch targets (minimum 44px)
   - Consider content priority for mobile layouts
   - Use appropriate breakpoints for sidebar behavior

4. **Performance**
   - Use skeleton states for loading content
   - Implement lazy loading for nested menu items
   - Avoid complex animations on mobile
   - Optimize icon rendering and caching

5. **Accessibility**
   - Provide keyboard shortcuts for common actions
   - Test with screen readers thoroughly
   - Ensure sufficient color contrast
   - Use semantic HTML elements appropriately

### Advanced Usage

#### Custom Styling
The sidebar supports extensive customization through CSS custom properties:

```css
:root {
  --sidebar-width: 16rem;
  --sidebar-width-icon: 3rem;
  --sidebar-width-mobile: 18rem;
}
```

#### Controlled State
```tsx
function App() {
  const [sidebarOpen, setSidebarOpen] = useState(true)
  
  return (
    <SidebarProvider open={sidebarOpen} onOpenChange={setSidebarOpen}>
      {/* sidebar content */}
    </SidebarProvider>
  )
}
```

#### Dynamic Content
```tsx
function DynamicSidebar() {
  const [loading, setLoading] = useState(true)
  const [menuItems, setMenuItems] = useState([])
  
  return (
    <SidebarContent>
      <SidebarMenu>
        {loading ? (
          <>
            <SidebarMenuSkeleton showIcon />
            <SidebarMenuSkeleton showIcon />
            <SidebarMenuSkeleton showIcon />
          </>
        ) : (
          menuItems.map(item => (
            <SidebarMenuItem key={item.id}>
              <SidebarMenuButton>
                <item.icon />
                <span>{item.label}</span>
              </SidebarMenuButton>
            </SidebarMenuItem>
          ))
        )}
      </SidebarMenu>
    </SidebarContent>
  )
}
```

### Common Use Cases

- **Admin Dashboards**: Navigation for management interfaces
- **Documentation Sites**: Table of contents and page navigation
- **E-commerce Platforms**: Category navigation and filters
- **Content Management**: File browsers and content organization
- **Analytics Dashboards**: Report navigation and tool access
- **Social Platforms**: Profile navigation and activity feeds
- **Project Management**: Task organization and team navigation
- **Development Tools**: Code navigation and tool palettes

### Related Components

- Sheet
- Navigation Menu
- Dropdown Menu
- Tooltip
- Separator

## Source

File: components/ui/sidebar.tsx

```tsx
'use client'

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 { PanelLeftIcon } from 'lucide-react'
import * as React from 'react'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Separator } from '@/components/ui/separator'
import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from '@/components/ui/sheet'
import { Skeleton } from '@/components/ui/skeleton'
import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
import { useIsMobile } from '@/hooks/use-mobile'
import { cn } from '@/lib/utils'

const SIDEBAR_COOKIE_NAME = 'sidebar_state'
const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
const SIDEBAR_WIDTH = '16rem'
const SIDEBAR_WIDTH_MOBILE = '18rem'
const SIDEBAR_WIDTH_ICON = '3.5rem'
const SIDEBAR_KEYBOARD_SHORTCUT = 'b'

type SidebarContextProps = {
	state: 'expanded' | 'collapsed'
	open: boolean
	setOpen: (open: boolean) => void
	openMobile: boolean
	setOpenMobile: (open: boolean) => void
	isMobile: boolean
	toggleSidebar: () => void
}

const SidebarContext = React.createContext<SidebarContextProps | null>(null)

function useSidebar() {
	const context = React.useContext(SidebarContext)
	if (!context) {
		throw new Error('useSidebar must be used within a SidebarProvider.')
	}

	return context
}

function SidebarProvider({
	defaultOpen = true,
	open: openProp,
	onOpenChange: setOpenProp,
	className,
	style,
	children,
	...props
}: React.ComponentProps<'div'> & {
	defaultOpen?: boolean
	open?: boolean
	onOpenChange?: (open: boolean) => void
}) {
	const isMobile = useIsMobile()
	const [openMobile, setOpenMobile] = React.useState(false)

	// This is the internal state of the sidebar.
	// We use openProp and setOpenProp for control from outside the component.
	const [_open, _setOpen] = React.useState(defaultOpen)
	const open = openProp ?? _open
	const setOpen = React.useCallback(
		(value: boolean | ((value: boolean) => boolean)) => {
			const openState = typeof value === 'function' ? value(open) : value
			if (setOpenProp) {
				setOpenProp(openState)
			} else {
				_setOpen(openState)
			}

			// This sets the cookie to keep the sidebar state.
			document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`
		},
		[setOpenProp, open],
	)

	// Helper to toggle the sidebar.
	const toggleSidebar = React.useCallback(() => {
		return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open)
	}, [isMobile, setOpen, setOpenMobile])

	// Adds a keyboard shortcut to toggle the sidebar.
	React.useEffect(() => {
		const handleKeyDown = (event: KeyboardEvent) => {
			if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
				event.preventDefault()
				toggleSidebar()
			}
		}

		globalThis.addEventListener('keydown', handleKeyDown)
		return () => globalThis.removeEventListener('keydown', handleKeyDown)
	}, [toggleSidebar])

	// We add a state so that we can do data-state="expanded" or "collapsed".
	// This makes it easier to style the sidebar with Tailwind classes.
	const state = open ? 'expanded' : 'collapsed'

	const contextValue = React.useMemo<SidebarContextProps>(
		() => ({
			state,
			open,
			setOpen,
			isMobile,
			openMobile,
			setOpenMobile,
			toggleSidebar,
		}),
		[state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar],
	)

	return (
		<SidebarContext.Provider value={contextValue}>
			<div
				data-slot="sidebar-wrapper"
				style={
					{
						'--sidebar-width': SIDEBAR_WIDTH,
						'--sidebar-width-icon': SIDEBAR_WIDTH_ICON,
						...style,
					} as React.CSSProperties
				}
				className={cn('group/sidebar-wrapper flex min-h-svh w-full has-data-[variant=inset]:bg-sidebar', className)}
				{...props}
			>
				{children}
			</div>
		</SidebarContext.Provider>
	)
}

function Sidebar({
	side = 'left',
	variant = 'sidebar',
	collapsible = 'offcanvas',
	className,
	children,
	dir,
	...props
}: React.ComponentProps<'div'> & {
	side?: 'left' | 'right'
	variant?: 'sidebar' | 'floating' | 'inset'
	collapsible?: 'offcanvas' | 'icon' | 'none'
}) {
	const { isMobile, state, openMobile, setOpenMobile } = useSidebar()

	if (collapsible === 'none') {
		return (
			<div
				data-slot="sidebar"
				className={cn('flex h-full w-(--sidebar-width) flex-col bg-sidebar text-sidebar-foreground', className)}
				{...props}
			>
				{children}
			</div>
		)
	}

	if (isMobile) {
		return (
			<Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
				<SheetContent
					dir={dir}
					data-sidebar="sidebar"
					data-slot="sidebar"
					data-mobile="true"
					className="w-(--sidebar-width) bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden"
					style={
						{
							'--sidebar-width': SIDEBAR_WIDTH_MOBILE,
						} as React.CSSProperties
					}
					side={side}
				>
					<SheetHeader className="sr-only">
						<SheetTitle>Sidebar</SheetTitle>
						<SheetDescription>Displays the mobile sidebar.</SheetDescription>
					</SheetHeader>
					<div className="flex h-full w-full flex-col">{children}</div>
				</SheetContent>
			</Sheet>
		)
	}

	return (
		<div
			className="group peer hidden text-sidebar-foreground md:block"
			data-state={state}
			data-collapsible={state === 'collapsed' ? collapsible : ''}
			data-variant={variant}
			data-side={side}
			data-slot="sidebar"
		>
			{/* This is what handles the sidebar gap on desktop */}
			<div
				data-slot="sidebar-gap"
				className={cn(
					'relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear',
					'group-data-[collapsible=offcanvas]:w-0',
					'group-data-[side=right]:rotate-180',
					variant === 'floating' || variant === 'inset'
						? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]'
						: 'group-data-[collapsible=icon]:w-(--sidebar-width-icon)',
				)}
			/>
			<div
				data-slot="sidebar-container"
				data-side={side}
				className={cn(
					'fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear data-[side=left]:left-0 data-[side=left]:group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)] data-[side=right]:right-0 data-[side=right]:group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)] md:flex',
					// Adjust the padding for floating and inset variants.
					variant === 'floating' || variant === 'inset'
						? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]'
						: 'group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l',
					className,
				)}
				{...props}
			>
				<div
					data-sidebar="sidebar"
					data-slot="sidebar-inner"
					className="flex size-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 group-data-[variant=floating]:ring-sidebar-border"
				>
					{children}
				</div>
			</div>
		</div>
	)
}

/**
 * Collapses and expands the sidebar.
 *
 * Pass an `aria-label`: this package carries no translations, so the accessible
 * name has to come from the app. The built-in "Toggle Sidebar" text is only an
 * English fallback.
 */
function SidebarTrigger({ className, onClick, ...props }: React.ComponentProps<typeof Button>) {
	const { toggleSidebar } = useSidebar()

	return (
		<Button
			data-sidebar="trigger"
			data-slot="sidebar-trigger"
			variant="ghost"
			size="icon-sm"
			className={cn(className)}
			onClick={(event) => {
				onClick?.(event)
				toggleSidebar()
			}}
			{...props}
		>
			<PanelLeftIcon aria-hidden="true" />
			<span className="sr-only">Toggle Sidebar</span>
		</Button>
	)
}

function SidebarRail({ className, ...props }: React.ComponentProps<'button'>) {
	const { toggleSidebar } = useSidebar()

	return (
		<button
			data-sidebar="rail"
			data-slot="sidebar-rail"
			aria-label="Toggle Sidebar"
			tabIndex={-1}
			onClick={toggleSidebar}
			title="Toggle Sidebar"
			className={cn(
				'absolute inset-y-0 z-20 hidden w-4 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:start-1/2 after:w-[2px] hover:after:bg-sidebar-border sm:flex ltr:-translate-x-1/2 rtl:-translate-x-1/2',
				'in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize',
				'[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',
				'group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full hover:group-data-[collapsible=offcanvas]:bg-sidebar',
				'[[data-side=left][data-collapsible=offcanvas]_&]:-right-2',
				'[[data-side=right][data-collapsible=offcanvas]_&]:-left-2',
				className,
			)}
			{...props}
		/>
	)
}

function SidebarInset({ className, ...props }: React.ComponentProps<'main'>) {
	return (
		<main
			data-slot="sidebar-inset"
			className={cn(
				'relative flex w-full flex-1 flex-col bg-background md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2',
				className,
			)}
			{...props}
		/>
	)
}

function SidebarInput({ className, ...props }: React.ComponentProps<typeof Input>) {
	return (
		<Input
			data-slot="sidebar-input"
			data-sidebar="input"
			className={cn('h-10 w-full bg-background shadow-none', className)}
			{...props}
		/>
	)
}

function SidebarHeader({ className, ...props }: React.ComponentProps<'div'>) {
	return (
		<div
			data-slot="sidebar-header"
			data-sidebar="header"
			className={cn('flex flex-col gap-2 p-2', className)}
			{...props}
		/>
	)
}

function SidebarFooter({ className, ...props }: React.ComponentProps<'div'>) {
	return (
		<div
			data-slot="sidebar-footer"
			data-sidebar="footer"
			className={cn('flex flex-col gap-2 p-2', className)}
			{...props}
		/>
	)
}

function SidebarSeparator({ className, ...props }: React.ComponentProps<typeof Separator>) {
	return (
		<Separator
			data-slot="sidebar-separator"
			data-sidebar="separator"
			className={cn('mx-2 w-auto bg-sidebar-border', className)}
			{...props}
		/>
	)
}

function SidebarContent({ className, ...props }: React.ComponentProps<'div'>) {
	return (
		<div
			data-slot="sidebar-content"
			data-sidebar="content"
			className={cn(
				'no-scrollbar flex min-h-0 flex-1 flex-col gap-0 overflow-auto group-data-[collapsible=icon]:overflow-hidden',
				className,
			)}
			{...props}
		/>
	)
}

function SidebarGroup({ className, ...props }: React.ComponentProps<'div'>) {
	return (
		<div
			data-slot="sidebar-group"
			data-sidebar="group"
			className={cn('relative flex w-full min-w-0 flex-col p-2', className)}
			{...props}
		/>
	)
}

function SidebarGroupLabel({
	className,
	render,
	...props
}: useRender.ComponentProps<'div'> & React.ComponentProps<'div'>) {
	return useRender({
		defaultTagName: 'div',
		props: mergeProps<'div'>(
			{
				className: cn(
					'flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 ring-sidebar-ring outline-hidden transition-[margin,opacity] duration-200 ease-linear group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
					className,
				),
			},
			props,
		),
		render,
		state: {
			slot: 'sidebar-group-label',
			sidebar: 'group-label',
		},
	})
}

function SidebarGroupAction({
	className,
	render,
	...props
}: useRender.ComponentProps<'button'> & React.ComponentProps<'button'>) {
	return useRender({
		defaultTagName: 'button',
		props: mergeProps<'button'>(
			{
				className: cn(
					'absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0',
					className,
				),
			},
			props,
		),
		render,
		state: {
			slot: 'sidebar-group-action',
			sidebar: 'group-action',
		},
	})
}

function SidebarGroupContent({ className, ...props }: React.ComponentProps<'div'>) {
	return (
		<div
			data-slot="sidebar-group-content"
			data-sidebar="group-content"
			className={cn('w-full text-sm', className)}
			{...props}
		/>
	)
}

function SidebarMenu({ className, ...props }: React.ComponentProps<'ul'>) {
	return (
		<ul
			data-slot="sidebar-menu"
			data-sidebar="menu"
			className={cn('flex w-full min-w-0 flex-col gap-0', className)}
			{...props}
		/>
	)
}

function SidebarMenuItem({ className, ...props }: React.ComponentProps<'li'>) {
	return (
		<li
			data-slot="sidebar-menu-item"
			data-sidebar="menu-item"
			className={cn('group/menu-item relative', className)}
			{...props}
		/>
	)
}

const sidebarMenuButtonVariants = cva(
	'peer/menu-button group/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm ring-sidebar-ring outline-hidden transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-10! group-data-[collapsible=icon]:gap-3! group-data-[collapsible=icon]:p-3! hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:font-medium data-active:text-sidebar-accent-foreground [&_svg]:size-4 [&_svg]:shrink-0 [&>span:last-child]:truncate',
	{
		variants: {
			variant: {
				default: 'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',
				outline:
					'bg-background shadow-[0_0_0_1px_var(--sidebar-border)] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_var(--sidebar-accent)]',
			},
			size: {
				default: 'h-10 text-sm',
				sm: 'h-8 text-xs',
				lg: 'h-12 text-sm group-data-[collapsible=icon]:p-1!',
			},
		},
		defaultVariants: {
			variant: 'default',
			size: 'default',
		},
	},
)

function SidebarMenuButton({
	render,
	isActive = false,
	variant = 'default',
	size = 'default',
	tooltip,
	className,
	...props
}: useRender.ComponentProps<'button'> &
	React.ComponentProps<'button'> & {
		isActive?: boolean
		tooltip?: string | React.ComponentProps<typeof TooltipContent>
	} & VariantProps<typeof sidebarMenuButtonVariants>) {
	const { isMobile, state } = useSidebar()
	const comp = useRender({
		defaultTagName: 'button',
		props: mergeProps<'button'>(
			{
				className: cn(sidebarMenuButtonVariants({ variant, size }), className),
			},
			props,
		),
		render: tooltip ? <TooltipTrigger render={render} /> : render,
		state: {
			slot: 'sidebar-menu-button',
			sidebar: 'menu-button',
			size,
			active: isActive,
		},
	})

	if (!tooltip) {
		return comp
	}

	if (typeof tooltip === 'string') {
		tooltip = {
			children: tooltip,
		}
	}

	return (
		<Tooltip>
			{comp}
			<TooltipContent side="right" align="center" hidden={state !== 'collapsed' || isMobile} {...tooltip} />
		</Tooltip>
	)
}

function SidebarMenuAction({
	className,
	render,
	showOnHover = false,
	...props
}: useRender.ComponentProps<'button'> &
	React.ComponentProps<'button'> & {
		showOnHover?: boolean
	}) {
	return useRender({
		defaultTagName: 'button',
		props: mergeProps<'button'>(
			{
				className: cn(
					'absolute top-2.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[size=default]/menu-button:top-2.5 peer-data-[size=lg]/menu-button:top-3.5 peer-data-[size=sm]/menu-button:top-1.5 after:absolute after:-inset-2 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0',
					showOnHover &&
						'group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 peer-data-active/menu-button:text-sidebar-accent-foreground aria-expanded:opacity-100 md:opacity-0',
					className,
				),
			},
			props,
		),
		render,
		state: {
			slot: 'sidebar-menu-action',
			sidebar: 'menu-action',
		},
	})
}

function SidebarMenuBadge({ className, ...props }: React.ComponentProps<'div'>) {
	return (
		<div
			data-slot="sidebar-menu-badge"
			data-sidebar="menu-badge"
			className={cn(
				'pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium text-sidebar-foreground tabular-nums select-none group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[size=default]/menu-button:top-2.5 peer-data-[size=lg]/menu-button:top-3.5 peer-data-[size=sm]/menu-button:top-1.5 peer-data-active/menu-button:text-sidebar-accent-foreground',
				className,
			)}
			{...props}
		/>
	)
}

function SidebarMenuSkeleton({
	className,
	showIcon = false,
	...props
}: React.ComponentProps<'div'> & {
	showIcon?: boolean
}) {
	// Random width between 50 to 90%.
	const [width] = React.useState(() => {
		return `${Math.floor(Math.random() * 40) + 50}%`
	})

	return (
		<div
			data-slot="sidebar-menu-skeleton"
			data-sidebar="menu-skeleton"
			className={cn('flex h-8 items-center gap-2 rounded-md px-2', className)}
			{...props}
		>
			{showIcon && <Skeleton className="size-4 rounded-md" data-sidebar="menu-skeleton-icon" />}
			<Skeleton
				className="h-4 max-w-(--skeleton-width) flex-1"
				data-sidebar="menu-skeleton-text"
				style={
					{
						'--skeleton-width': width,
					} as React.CSSProperties
				}
			/>
		</div>
	)
}

function SidebarMenuSub({ className, ...props }: React.ComponentProps<'ul'>) {
	return (
		<ul
			data-slot="sidebar-menu-sub"
			data-sidebar="menu-sub"
			className={cn(
				'mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5 group-data-[collapsible=icon]:hidden',
				className,
			)}
			{...props}
		/>
	)
}

function SidebarMenuSubItem({ className, ...props }: React.ComponentProps<'li'>) {
	return (
		<li
			data-slot="sidebar-menu-sub-item"
			data-sidebar="menu-sub-item"
			className={cn('group/menu-sub-item relative', className)}
			{...props}
		/>
	)
}

function SidebarMenuSubButton({
	render,
	size = 'md',
	isActive = false,
	className,
	...props
}: useRender.ComponentProps<'a'> &
	React.ComponentProps<'a'> & {
		size?: 'sm' | 'md'
		isActive?: boolean
	}) {
	return useRender({
		defaultTagName: 'a',
		props: mergeProps<'a'>(
			{
				className: cn(
					'flex h-8 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground ring-sidebar-ring outline-hidden group-data-[collapsible=icon]:hidden hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[size=md]:text-sm data-[size=sm]:text-xs data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground',
					className,
				),
			},
			props,
		),
		render,
		state: {
			slot: 'sidebar-menu-sub-button',
			sidebar: 'menu-sub-button',
			size,
			active: isActive,
		},
	})
}

export {
	Sidebar,
	SidebarContent,
	SidebarFooter,
	SidebarGroup,
	SidebarGroupAction,
	SidebarGroupContent,
	SidebarGroupLabel,
	SidebarHeader,
	SidebarInput,
	SidebarInset,
	SidebarMenu,
	SidebarMenuAction,
	SidebarMenuBadge,
	SidebarMenuButton,
	SidebarMenuItem,
	SidebarMenuSkeleton,
	SidebarMenuSub,
	SidebarMenuSubButton,
	SidebarMenuSubItem,
	SidebarProvider,
	SidebarRail,
	SidebarSeparator,
	SidebarTrigger,
	useSidebar,
}
```

File: hooks/use-mobile.ts

```tsx
import * as React from 'react'

const MOBILE_BREAKPOINT = 768

export function useIsMobile() {
	const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)

	React.useEffect(() => {
		const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
		const onChange = () => {
			setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
		}
		mql.addEventListener('change', onChange)
		setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
		return () => mql.removeEventListener('change', onChange)
	}, [])

	return !!isMobile
}
```

---

# Skeleton

Animated placeholder shown while content loads.

Install: `npx shadcn@latest add https://rdf.dev.360online.com/r/skeleton.json`

Import from: `@/components/ui/skeleton`

A skeleton component to display a placeholder loading state for content that is yet to load.

### Features

- A plain `div` with `animate-pulse`, `rounded-md` and the muted background (`bg-muted`)
- Customizable dimensions and shape via `className`
- Composable for complex loading states
- `data-slot="skeleton"` for styling hooks

### Usage

```tsx
import { Skeleton } from "@/components/ui/skeleton"

export function LoadingProfile() {
  return (
    <div className="flex items-center gap-4">
      <Skeleton className="size-12 rounded-full" />
      <div className="space-y-2">
        <Skeleton className="h-4 w-[250px]" />
        <Skeleton className="h-4 w-[200px]" />
      </div>
    </div>
  )
}
```

#### Default

A case handler loading: an avatar circle and two lines of text. The wrapper is marked `aria-busy` and carries a visually hidden status message.

#### Card

A building permit card while it loads, keeping the header, preview, body text and footer actions in place so nothing jumps when the content arrives.

#### List

A case list with avatars, titles, reference lines and status badges.

#### Form

An e-service application form waiting for prefilled resident data.

#### Stats

Dashboard tiles for open, due and closed cases.

### Anatomy

```tsx
<Skeleton className="h-4 w-[250px]" />
```

### Props

#### Skeleton

The root component that renders a skeleton placeholder.


### Accessibility

The Skeleton is purely visual and sets no ARIA attributes itself. To communicate loading to assistive technology:

- Mark the loading region with `aria-busy="true"` and restore it when content arrives
- Optionally add a visually hidden status message (e.g. `<span className="sr-only">Loading...</span>`)
- Respect reduced motion, e.g. `motion-reduce:animate-none`

### Best Practices

1. Match skeleton dimensions to actual content
2. Use appropriate spacing and layout
3. Keep animations subtle and not distracting
4. Group related skeleton elements
5. Consider mobile responsiveness

### Customization

#### Custom Dimensions

Adjust the width and height using Tailwind classes:

```tsx
<Skeleton className="h-8 w-32" />
```

#### Custom Shape

Modify the border radius using Tailwind classes:

```tsx
<Skeleton className="h-12 w-12 rounded-full" /> // Circle
<Skeleton className="h-24 w-full rounded-xl" /> // Rounded rectangle
```

#### Custom Animation

The default pulse animation can be customized through Tailwind:

```tsx
<Skeleton className="animate-[pulse_2s_ease-in-out_infinite]" />
```

### Related Components

- Progress - For determinate loading states
- Spinner - For inline loading indicators
- Card - For content layouts that might need skeleton states

## Source

File: components/ui/skeleton.tsx

```tsx
import { cn } from '@/lib/utils'

function Skeleton({ className, ...props }: React.ComponentProps<'div'>) {
	return <div data-slot="skeleton" className={cn('animate-pulse rounded-md bg-muted', className)} {...props} />
}

export { Skeleton }
```

---

# Slider

Range slider with one or more thumbs, built on Base UI Slider.

Install: `npx shadcn@latest add https://rdf.dev.360online.com/r/slider.json`

Import from: `@/components/ui/slider`

npm dependencies: @base-ui/react@^1.8.0

A flexible and accessible slider component that allows users to select numeric values from a range.
Built on top of [Base UI Slider](https://base-ui.com/react/components/slider),
it follows WAI-ARIA design patterns and provides a rich set of features for numeric input.

### Features

- Single value, range and multiple-thumb selection (one thumb per value)
- Horizontal and vertical orientation
- Customizable step values
- Controlled (`value` / `onValueChange`) and uncontrolled (`defaultValue`) usage
- Keyboard navigation and screen reader support
- Disabled state support

### Usage

```tsx
import { Slider } from '@/components/ui/slider'
import { Label } from '@/components/ui/label'

export function MyComponent() {
  const [value, setValue] = React.useState([75])

  return (
    <div className="space-y-8">
      {/* Simple slider */}
      <Slider defaultValue={[50]} min={0} max={100} step={1} aria-label="Volume" />

      {/* Range slider, one name per thumb */}
      <Slider
        defaultValue={[25, 75]}
        getAriaLabel={(index) => (index === 0 ? 'Minimum price' : 'Maximum price')}
      />

      {/* Vertical */}
      <Slider defaultValue={[50]} orientation="vertical" aria-label="Temperature" />

      {/* Controlled, labelled by a visible label, with value text for screen readers */}
      <div className="grid gap-3">
        <Label id="distance-label">Maximum distance to school</Label>
        <span className="text-sm text-muted-foreground">{value[0]} km</span>
        <Slider
          aria-labelledby="distance-label"
          getAriaValueText={(_, v) => `${v} km`}
          value={value}
          onValueChange={setValue}
        />
      </div>
    </div>
  )
}
```

The slider has no built-in unit or min/max labels — compose them around it as shown in the With Labels example.

The `role="slider"` elements are the thumbs, so a `label` with `htmlFor` cannot name them. Give the visible label an
`id` and pass it as `aria-labelledby`, or pass `aria-label`.

#### Default

#### Range Selection

Two values give two thumbs. Here a card filters municipal building plots by size, with `minStepsBetweenValues` keeping the handles apart.

#### Multiple Thumbs

Any number of thumbs – one per value. Three noise thresholds for a construction site are summarised as badges below the track.

#### Vertical

Set `orientation="vertical"` for mixer-style controls, like room temperatures in a community centre.

#### Controlled

Use `value` and `onValueChange` to drive other parts of the screen. Adjusting the weekly home help hours updates the estimated visits and fee.

#### Disabled State

A locked assessment after a decision has been made. Setting `data-disabled="true"` on the Field dims its label too.

#### Custom Steps

A five-step satisfaction scale (`min={1}`, `max={5}`, `step={1}`) with a word under each step; the current one is highlighted.

#### With Labels

Units and min/max labels composed around the slider in a procurement form.

### Props


- `defaultValue` - Initial value(s) of the slider (a number for one thumb, or an array with one entry per thumb)
- `min` - Minimum value (number)
- `max` - Maximum value (number)
- `step` - Step increment (number)
- `disabled` - Disabled state (boolean)
- `value` / `onValueChange` - Controlled value(s); `onValueChange(value, eventDetails)` gets the same shape as `value`
- `onValueCommitted` - Called when the user finishes dragging or releases a key
- `minStepsBetweenValues` - Minimum number of steps between thumbs in a range
- `aria-labelledby` - The id of the visible label; it names every thumb
- `aria-label` - Accessible name for the thumb when there is no visible label
- `getAriaLabel` - `(index) => string`, a name per thumb for ranges, e.g. "Minimum plot size"
- `getAriaValueText` - `(formattedValue, value, index) => string`, value text with units, e.g. "3 km"
- `orientation` - Layout orientation ('horizontal' | 'vertical')

All other Base UI `Slider.Root` props are supported. `min` defaults to `0` and `max` to `100`.

### Accessibility

The Slider component follows WAI-ARIA guidelines for sliders:

- Uses proper ARIA roles (`slider`, `group`)
- Supports keyboard navigation:
  - `Arrow keys`: Increment/decrement by step
  - `Page Up/Down`: Large increments
  - `Home/End`: Min/max values
- Announces value changes to screen readers
- Maintains focus management
- Provides visual feedback for interaction states

### Best Practices

1. Value Range:
   - Set appropriate min/max values
   - Choose logical step increments
   - Consider the precision needed

2. Visual Feedback:
   - Use clear track and thumb styles
   - Provide hover and focus states
   - Show value labels when helpful

3. Accessibility:
   - Include descriptive labels
   - Maintain sufficient touch targets
   - Ensure keyboard navigation

4. Units and Labels:
   - Use clear, concise units
   - Show min/max when context is needed
   - Add descriptive labels for context

5. Interaction:
   - Consider step size for precision
   - Implement smooth transitions
   - Handle edge cases gracefully

### Related Components

- Input
- Number Input
- Progress

## Source

File: components/ui/slider.tsx

```tsx
'use client'

import { Slider as SliderPrimitive } from '@base-ui/react/slider'
import { cn } from '@/lib/utils'

/** One thumb per value: an array gives one thumb per entry, a single number one thumb, and no value a range */
function getThumbCount(value: number | readonly number[] | undefined) {
	if (Array.isArray(value)) return value.length
	return typeof value === 'number' ? 1 : 2
}

function Slider<Value extends number | readonly number[]>({
	className,
	defaultValue,
	value,
	min = 0,
	max = 100,
	'aria-label': ariaLabel,
	getAriaLabel,
	getAriaValueText,
	...props
}: SliderPrimitive.Root.Props<Value> &
	Pick<SliderPrimitive.Thumb.Props, 'getAriaLabel' | 'getAriaValueText'> & {
		/** Accessible name for the thumb(s). For a labelled field, pass `aria-labelledby` with the label's id instead. */
		'aria-label'?: string
	}) {
	const thumbCount = getThumbCount(value ?? defaultValue)

	return (
		<SliderPrimitive.Root
			className={cn('data-horizontal:w-full data-vertical:h-full', className)}
			data-slot="slider"
			defaultValue={defaultValue}
			value={value}
			min={min}
			max={max}
			thumbAlignment="edge"
			{...props}
		>
			<SliderPrimitive.Control className="relative flex w-full touch-none items-center select-none data-disabled:cursor-not-allowed data-disabled:opacity-50 data-vertical:h-full data-vertical:min-h-40 data-vertical:w-auto data-vertical:flex-col">
				<SliderPrimitive.Track
					data-slot="slider-track"
					className="relative grow overflow-hidden rounded-full bg-secondary select-none data-horizontal:h-1 data-horizontal:w-full data-vertical:h-full data-vertical:w-1"
				>
					<SliderPrimitive.Indicator
						data-slot="slider-range"
						className="bg-primary select-none data-horizontal:h-full data-vertical:w-full"
					/>
				</SliderPrimitive.Track>
				{Array.from({ length: thumbCount }, (_, index) => (
					<SliderPrimitive.Thumb
						data-slot="slider-thumb"
						// biome-ignore lint/suspicious/noArrayIndexKey: thumbs are identified by their position
						key={index}
						index={index}
						// The thumbs carry role="slider", so the accessible name and value text go on them, not on the root
						aria-label={ariaLabel}
						getAriaLabel={getAriaLabel}
						getAriaValueText={getAriaValueText}
						className="relative block size-3 shrink-0 rounded-full border border-primary bg-background ring-ring/50 transition-[color,box-shadow] select-none after:absolute after:-inset-2 hover:ring-3 focus-visible:ring-3 focus-visible:ring-ring focus-visible:outline-hidden active:ring-3 has-focus-visible:ring-3 has-focus-visible:ring-ring data-disabled:pointer-events-none data-disabled:opacity-50"
					/>
				))}
			</SliderPrimitive.Control>
		</SliderPrimitive.Root>
	)
}

export { Slider }
```

---

# Spinner

Loading indicator.

Install: `npx shadcn@latest add https://rdf.dev.360online.com/r/spinner.json`

Import from: `@/components/ui/spinner`

npm dependencies: lucide-react@^1.48.0

An indicator that shows a loading state. It renders an animated icon with `role="status"` and the accessible name "Loading", and can be sized and coloured with utility classes or placed inside buttons, badges and other components.

### Features

- Accessible by default with `role="status"` and `aria-label="Loading"`
- `aria-label` replaces the English default with a translation or a more specific description
- `aria-hidden` makes the spinner decorative, with no role or name, next to text that describes the state
- Size and colour via className
- Works inside buttons, badges, inputs and attachments

### Usage

```tsx
import { Button } from '@/components/ui/button'
import { Spinner } from '@/components/ui/spinner'

export function SubmittingButton() {
  return (
    <Button disabled>
      <Spinner aria-hidden />
      Submitting application
    </Button>
  )
}
```

#### Naming the spinner

rapidUI carries no translations, so "Loading" is only an English fallback. Pass the name from your app's translation
layer with `aria-label`, or point at visible text with `aria-labelledby`:

```tsx
// On its own: give it a translated or more specific name
<Spinner aria-label={t('cases.loading')} />

// Next to visible text that says the same thing: hide it from screen readers
<Button disabled>
  <Spinner aria-hidden />
  {t('application.sending')}
</Button>
```

With `aria-hidden` the spinner renders without `role="status"` and without a label, so screen readers skip it and read
only the text.

#### Default

A background job shown as an Item, with a specific `aria-label` on the spinner.

#### Accessible Name

The default name, a translated `aria-label`, and `aria-hidden` next to visible text.

#### Sizes

Different sizes via size classes.

#### Colors

Different colours via theme text colour classes (`text-primary`, `text-destructive`, `text-chart-2`…).

#### In Button

Inside disabled buttons during submission, at the start or end with `data-icon`. The button text says what is happening, so the spinners are `aria-hidden`.

#### In Badge

Inside badges for background processes, `aria-hidden` next to the badge text.

#### In Input Group

As an inline-end addon while an address is looked up in the property register.

#### Empty State

Inside an Empty while records are retrieved from the archive, with a way to cancel.

#### Loading State

Per-file progress in an attachment list for a building permit application.

### Accessibility

- Has `role="status"` and `aria-label="Loading"` by default
- Pass `aria-label` to translate the name or make it more specific, such as "Generating decision letter". `aria-labelledby` works too and replaces the default label
- Pass `aria-hidden` when visible text next to the spinner describes the state, as in a button or badge. The spinner then has no role and no label, so the state isn't announced twice
- Disable buttons while an action is in progress to prevent duplicate submissions
- Respect reduced motion preferences where the animation is not essential

## Source

File: components/ui/spinner.tsx

```tsx
import { Loader2Icon } from 'lucide-react'
import { cn } from '@/lib/utils'

/**
 * An animated loading indicator, announced as a status named "Loading".
 *
 * Pass an `aria-label` to translate or specify the name: this package carries no translations, so "Loading" is only
 * an English fallback. Pass `aria-hidden` when visible text next to the spinner already says what is happening; the
 * spinner is then decorative and has no role or name.
 */
function Spinner({
	className,
	role = 'status',
	'aria-hidden': ariaHidden,
	'aria-label': ariaLabel,
	'aria-labelledby': ariaLabelledBy,
	...props
}: React.ComponentProps<'svg'>) {
	const hidden = ariaHidden === true || ariaHidden === 'true'

	return (
		<Loader2Icon
			data-slot="spinner"
			className={cn('size-4 animate-spin', className)}
			{...(hidden
				? { 'aria-hidden': true }
				: {
						role,
						'aria-label': ariaLabel ?? (ariaLabelledBy ? undefined : 'Loading'),
						'aria-labelledby': ariaLabelledBy,
					})}
			{...props}
		/>
	)
}

export { Spinner }
```

---

# Stat Card

A key figure with a label, a trend and a comparison, for dashboards and overviews.

Install: `npx shadcn@latest add https://rdf.dev.360online.com/r/stat-card.json`

Import from: `@/components/ui/stat-card`

npm dependencies: @base-ui/react@^1.8.0, lucide-react@^1.48.0

A key figure with a label, a value, an optional trend and a comparison, such as the open cases, cases due this week
and average handling time at the top of a case officer's overview. It is styled like `Card` and composed from small
parts, so you only use the ones you need.

### Features

- Composable `StatCardLabel`, `StatCardValue`, `StatCardUnit`, `StatCardTrend`, `StatCardDescription`,
  `StatCardFooter` and `StatCardIcon`
- `StatCardTrend` shows the direction (`up`, `down` or `flat`) with an icon, and its colour follows meaning:
  `goodDirection` says whether up or down is an improvement
- The direction and whether it is good or bad are also given as screen-reader text, so nothing relies on colour alone
- Values use tabular numbers, so figures line up in a row of cards
- `render` turns the whole card into a link, for example to a filtered case list
- `StatCardGroup` lays cards out in a responsive grid that wraps on narrow screens
- `data-slot` attributes on every part

### Usage

```tsx
import { FolderOpenIcon } from 'lucide-react'
import {
  StatCard,
  StatCardDescription,
  StatCardFooter,
  StatCardIcon,
  StatCardLabel,
  StatCardTrend,
  StatCardValue,
} from '@/components/ui/stat-card'

export function OpenCases() {
  return (
    <StatCard>
      <StatCardLabel>Open cases</StatCardLabel>
      <StatCardIcon>
        <FolderOpenIcon />
      </StatCardIcon>
      <StatCardValue>14</StatCardValue>
      <StatCardFooter>
        {/* More open cases is bad, so the trend is shown in the destructive colour */}
        <StatCardTrend direction="up" goodDirection="down">
          +2
        </StatCardTrend>
        <StatCardDescription>vs last week</StatCardDescription>
      </StatCardFooter>
    </StatCard>
  )
}
```

#### Default

A single key figure with a trend and a comparison.

#### Case Overview

Four cards in a `StatCardGroup` for a case officer's workload. Wrap the group in a `section` with an `aria-label` so
it shows up as a landmark.

#### Trends

Good, bad and neutral trends. More decided cases is good (`goodDirection="up"`, the default), more overdue cases is bad
(`goodDirection="down"`), the number of applications received is neither (`goodDirection="none"`), and `direction="flat"`
means no change.

#### With Icon

`StatCardIcon` places a decorative icon in the top-right corner. Tint it with theme tokens in `className`.

#### Loading

Put a `Skeleton` in place of the value and trend while the figures load, and mark the card with `aria-busy`.

#### As Link

Pass `render={<a href="…" />}` to make the whole card a link, for example to the case list filtered on overdue cases.
It gets a hover background and a visible focus ring.

### Subcomponents

- `StatCard` - The container, styled like `Card`; accepts `render` and all `div` attributes
- `StatCardGroup` - A responsive grid for a row of cards
- `StatCardLabel` - What the figure is, e.g. "Open cases"
- `StatCardValue` - The figure itself, in tabular numbers
- `StatCardUnit` - A smaller, muted unit after the value, e.g. "days" or "kr"
- `StatCardTrend` - The change, with a direction icon and a colour that follows meaning
- `StatCardDescription` - The comparison, e.g. "vs last week"
- `StatCardFooter` - Lays out the trend and description on one line
- `StatCardIcon` - A decorative icon in the top-right corner

#### StatCardTrend props

| Prop            | Type                                                                           | Default | Description                                                              |
| --------------- | ------------------------------------------------------------------------------ | ------- | ------------------------------------------------------------------------ |
| `direction`     | `'up' \| 'down' \| 'flat'`                                                     | -       | Which way the figure moved; sets the icon                                |
| `goodDirection` | `'up' \| 'down' \| 'none'`                                                     | `'up'`  | Which direction is an improvement; sets the colour                       |
| `labels`        | `{ up?: string, down?: string, flat?: string, good?: string, bad?: string }` | English | Screen-reader text for the direction and its meaning; override to translate |
| `children`      | `ReactNode`                                                                    | -       | The change as text, e.g. "+12%"                                          |

Good trends use `text-success`, bad trends `text-destructive` and neutral or flat trends `text-muted-foreground`. The
resulting tone is also set as `data-tone` (`good`, `bad` or `neutral`) for styling.

### Accessibility

- The trend icon is decorative; `StatCardTrend` adds screen-reader text such as "Increase, bad:" before the change, so
  the direction and its meaning do not rely on colour alone
- Translate the screen-reader text with `labels`, e.g.
  `labels={{ up: 'Ökning', down: 'Minskning', flat: 'Oförändrat', good: 'bra', bad: 'dåligt' }}`
- `StatCardIcon` is hidden from assistive technology; the label carries the meaning
- Write the change so it reads well on its own, e.g. "+12%" or "3 days faster than August", and put the comparison in
  `StatCardDescription`
- A card rendered as a link has a visible focus ring; make sure its text describes where it goes, e.g. "Show overdue
  cases"
- While loading, add `aria-busy="true"` and screen-reader text such as "Loading" in place of the value

### Related Components

- Card - General-purpose container
- Chart - For trends over time
- Skeleton - Loading placeholders
- Badge - Short status labels

## Source

File: components/ui/stat-card.tsx

```tsx
import { mergeProps } from '@base-ui/react/merge-props'
import { useRender } from '@base-ui/react/use-render'
import { MinusIcon, TrendingDownIcon, TrendingUpIcon } from 'lucide-react'
import type * as React from 'react'
import { cn } from '@/lib/utils'

function StatCardGroup({ className, ...props }: React.ComponentProps<'div'>) {
	return (
		<div
			data-slot="stat-card-group"
			className={cn('grid grid-cols-[repeat(auto-fit,minmax(min(100%,13rem),1fr))] gap-4', className)}
			{...props}
		/>
	)
}

function StatCard({ className, render, ...props }: useRender.ComponentProps<'div'>) {
	return useRender({
		defaultTagName: 'div',
		props: mergeProps<'div'>(
			{
				className: cn(
					'group/stat-card relative flex min-w-0 flex-col gap-1 rounded-xl bg-card p-4 text-sm text-card-foreground ring-1 ring-border outline-none transition-colors has-data-[slot=stat-card-icon]:pr-12 focus-visible:ring-3 focus-visible:ring-ring [a]:hover:bg-muted/50',
					className,
				),
			},
			props,
		),
		render,
		state: {
			slot: 'stat-card',
		},
	})
}

function StatCardLabel({ className, ...props }: React.ComponentProps<'p'>) {
	return (
		<p
			data-slot="stat-card-label"
			className={cn('text-sm leading-snug font-medium text-muted-foreground', className)}
			{...props}
		/>
	)
}

function StatCardIcon({ className, ...props }: React.ComponentProps<'div'>) {
	return (
		<div
			data-slot="stat-card-icon"
			aria-hidden="true"
			className={cn(
				"absolute top-3 right-3 flex size-8 items-center justify-center rounded-lg bg-muted text-muted-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
				className,
			)}
			{...props}
		/>
	)
}

function StatCardValue({ className, ...props }: React.ComponentProps<'div'>) {
	return (
		<div
			data-slot="stat-card-value"
			className={cn('font-heading text-2xl leading-tight font-semibold tabular-nums', className)}
			{...props}
		/>
	)
}

function StatCardUnit({ className, ...props }: React.ComponentProps<'span'>) {
	return (
		<span
			data-slot="stat-card-unit"
			className={cn('ml-1 text-sm font-normal text-muted-foreground', className)}
			{...props}
		/>
	)
}

type StatCardTrendDirection = 'up' | 'down' | 'flat'
type StatCardTrendTone = 'good' | 'bad' | 'neutral'

const defaultTrendLabels = {
	up: 'Increase',
	down: 'Decrease',
	flat: 'No change',
	good: 'good',
	bad: 'bad',
}

type StatCardTrendLabels = typeof defaultTrendLabels

const trendIcons = {
	up: TrendingUpIcon,
	down: TrendingDownIcon,
	flat: MinusIcon,
} satisfies Record<StatCardTrendDirection, React.ComponentType<React.SVGProps<SVGSVGElement>>>

function getTrendTone(direction: StatCardTrendDirection, goodDirection: 'up' | 'down' | 'none'): StatCardTrendTone {
	if (direction === 'flat' || goodDirection === 'none') return 'neutral'
	return direction === goodDirection ? 'good' : 'bad'
}

function StatCardTrend({
	className,
	direction,
	goodDirection = 'up',
	labels,
	children,
	...props
}: React.ComponentProps<'p'> & {
	/** Which way the figure moved */
	direction: StatCardTrendDirection
	/**
	 * Which direction is an improvement. `up` for e.g. decided cases, `down` for e.g. overdue cases or handling time,
	 * `none` when the change is neither good nor bad. The colour follows from this.
	 */
	goodDirection?: 'up' | 'down' | 'none'
	/** Screen-reader text for the direction and its meaning; English defaults, override to translate */
	labels?: Partial<StatCardTrendLabels>
}) {
	const tone = getTrendTone(direction, goodDirection)
	const text = { ...defaultTrendLabels, ...labels }
	const Icon = trendIcons[direction]
	const srText = tone === 'neutral' ? text[direction] : `${text[direction]}, ${text[tone]}`

	return (
		<p
			data-slot="stat-card-trend"
			data-direction={direction}
			data-tone={tone}
			className={cn(
				'inline-flex w-fit items-center gap-1 text-sm font-medium tabular-nums data-[tone=bad]:text-destructive-subtle-foreground data-[tone=good]:text-success-subtle-foreground data-[tone=neutral]:text-muted-foreground [&>svg]:pointer-events-none [&>svg]:size-4 [&>svg]:shrink-0',
				className,
			)}
			{...props}
		>
			<Icon aria-hidden="true" />
			<span className="sr-only">{srText}: </span>
			{children}
		</p>
	)
}

function StatCardDescription({ className, ...props }: React.ComponentProps<'p'>) {
	return <p data-slot="stat-card-description" className={cn('text-sm text-muted-foreground', className)} {...props} />
}

function StatCardFooter({ className, ...props }: React.ComponentProps<'div'>) {
	return (
		<div
			data-slot="stat-card-footer"
			className={cn('mt-1 flex flex-wrap items-center gap-x-1.5 gap-y-0.5', className)}
			{...props}
		/>
	)
}

export {
	StatCard,
	StatCardGroup,
	StatCardLabel,
	StatCardIcon,
	StatCardValue,
	StatCardUnit,
	StatCardTrend,
	StatCardDescription,
	StatCardFooter,
	getTrendTone,
	type StatCardTrendDirection,
	type StatCardTrendLabels,
	type StatCardTrendTone,
}
```

---

# Sub Tabs

Secondary, lower-emphasis tabs for nested navigation.

Install: `npx shadcn@latest add https://rdf.dev.360online.com/r/sub-tabs.json`

Import from: `@/components/ui/sub-tabs`

npm dependencies: @base-ui/react@^1.8.0

A secondary, lower-emphasis tab bar for switching views inside a page section, typically nested below the
main `Tabs`. Built on the Base UI Tabs primitive (from the `@base-ui/react` package). The list is an outlined `h-8`
`bg-muted` bar and the active trigger gets a `bg-background` fill with `text-primary`.

### Features

- Built on the Base UI Tabs primitive
- Same sizing and focus ring as the other controls (h-8, rounded-lg, `ring-3 ring-ring/50`)
- Keyboard navigation and screen reader support
- Controlled and uncontrolled modes
- Icons in triggers (sized to `size-4` automatically)
- Disabled triggers

### Usage

```tsx
import { SubTabs, SubTabsContent, SubTabsList, SubTabsTrigger } from '@/components/ui/sub-tabs'

export function SubTabsDemo() {
  return (
    <SubTabs defaultValue="incoming" className="w-full max-w-md">
      <SubTabsList>
        <SubTabsTrigger value="incoming">Incoming</SubTabsTrigger>
        <SubTabsTrigger value="outgoing">Outgoing</SubTabsTrigger>
      </SubTabsList>
      <SubTabsContent value="incoming">Incoming documents…</SubTabsContent>
      <SubTabsContent value="outgoing">Outgoing documents…</SubTabsContent>
    </SubTabs>
  )
}
```

#### Default

The document section of a building permit case, split into incoming, outgoing and internal notes.

#### With Icons

Icons placed before the label in each trigger, inside a resident's "My pages" card.

#### Nested in Tabs

The typical placement: the main `Tabs` switch between sections of a case, and `SubTabs` switch views inside one of them.

#### Controlled

Controlled via `value` / `onValueChange`, so other parts of the screen can read and change the active view.

#### Disabled State

A trigger with `disabled` is dimmed and can't be selected – here the decision stays locked until the assessment is done.

#### Full Width

Give the list `w-full` and each trigger `flex-1` to stretch the bar, for example for opening hours.

### Anatomy

```tsx
<SubTabs>
  <SubTabsList>
    <SubTabsTrigger />
  </SubTabsList>
  <SubTabsContent />
</SubTabs>
```

- `SubTabs` - root (a flex column with `gap-2`), accepts all Base UI Tabs Root props
- `SubTabsList` - the outlined trigger bar
- `SubTabsTrigger` - a single tab; active state uses `data-active`
- `SubTabsContent` - the panel for a tab

### Accessibility

Follows the WAI-ARIA tabs pattern:

- Proper roles (`tablist`, `tab`, `tabpanel`)
- `Arrow keys` move between tabs, `Home` / `End` jump to the first / last tab
- `Tab` moves focus into the active panel
- Visible focus ring on triggers and panels

### Customization

```tsx
<SubTabs defaultValue="tab1">
  <SubTabsList className="w-full">
    <SubTabsTrigger value="tab1" className="flex-1">
      <Settings2Icon />
      Tab 1
    </SubTabsTrigger>
  </SubTabsList>
  <SubTabsContent value="tab1" className="rounded-lg border p-4">
    Content 1
  </SubTabsContent>
</SubTabs>
```

### Related Components

- Tabs - For the primary tab bar
- Toggle Group - For switching a setting rather than a view

## Source

File: components/ui/sub-tabs.tsx

```tsx
'use client'

import { Tabs as TabsPrimitive } from '@base-ui/react/tabs'
import { cn } from '@/lib/utils'

function SubTabs({ className, ...props }: TabsPrimitive.Root.Props) {
	return <TabsPrimitive.Root data-slot="sub-tabs" className={cn('flex flex-col gap-2', className)} {...props} />
}

function SubTabsList({ className, ...props }: TabsPrimitive.List.Props) {
	return (
		<TabsPrimitive.List
			data-slot="sub-tabs-list"
			className={cn(
				'inline-flex h-10 w-fit items-center gap-2 rounded-lg border border-border bg-muted p-[3px] text-foreground',
				className,
			)}
			{...props}
		/>
	)
}

function SubTabsTrigger({ className, ...props }: TabsPrimitive.Tab.Props) {
	return (
		<TabsPrimitive.Tab
			data-slot="sub-tabs-trigger"
			className={cn(
				"inline-flex h-full items-center justify-center gap-1.5 rounded-md border border-transparent px-2 text-sm font-normal whitespace-nowrap text-muted-foreground transition-all outline-none cursor-pointer hover:bg-background/50 hover:text-primary focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-active:bg-background data-active:font-semibold data-active:text-primary data-active:shadow-sm data-active:hover:bg-secondary [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
				className,
			)}
			{...props}
		/>
	)
}

function SubTabsContent({ className, ...props }: TabsPrimitive.Panel.Props) {
	return (
		<TabsPrimitive.Panel
			data-slot="sub-tabs-content"
			className={cn('flex-1 text-sm outline-none focus-visible:ring-3 focus-visible:ring-ring', className)}
			{...props}
		/>
	)
}

export { SubTabs, SubTabsList, SubTabsTrigger, SubTabsContent }
```

---

# Switch

On/off toggle switch built on Base UI Switch.

Install: `npx shadcn@latest add https://rdf.dev.360online.com/r/switch.json`

Import from: `@/components/ui/switch`

npm dependencies: @base-ui/react@^1.8.0

A switch component that allows users to toggle between two states (on/off).
Built on top of [Base UI Switch](https://base-ui.com/react/components/switch),
it follows WAI-ARIA design patterns and is fully accessible.

### Features

- Two sizes: `default` and `sm`
- Controlled (`checked` / `onCheckedChange`) and uncontrolled (`defaultChecked`) modes
- Disabled state
- Invalid state via `aria-invalid`
- Enlarged hit area for easier clicking
- Works with `Label` or the `Field` components, including selectable choice cards
- Keyboard navigation and screen reader support

### Usage

```tsx
import { Switch } from '@/components/ui/switch'
import { Label } from '@/components/ui/label'

export function MyForm() {
  return (
    <div className="flex items-center gap-2">
      <Switch id="airplane-mode" />
      <Label htmlFor="airplane-mode">Airplane mode</Label>
    </div>
  )
}
```

#### Size

```tsx
<Switch size="sm" />
<Switch size="default" />
```

#### With Field

```tsx
import { Field, FieldContent, FieldDescription, FieldLabel } from '@/components/ui/field'
import { Switch } from '@/components/ui/switch'

<Field orientation="horizontal">
  <FieldContent>
    <FieldLabel htmlFor="share">Share across devices</FieldLabel>
    <FieldDescription>Focus is shared across devices.</FieldDescription>
  </FieldContent>
  <Switch id="share" />
</Field>
```

#### Default

#### Sizes

`sm` suits dense tables and toolbars; `default` suits forms and settings pages.

#### Horizontal

Several small switches in a row as quick filters above a case list.

#### Disabled State

Settings the resident can't change. Set `data-disabled="true"` on the `Field` to dim the label and description too.

#### Invalid

Set `aria-invalid` on the switch and `data-invalid` on the `Field`, and explain the problem with `FieldError`. Turn the switch on to clear the error.

#### With Description

A horizontal `Field` with the label and description on the left and the switch on the right.

#### Choice Card

Wrap a horizontal `Field` in a `FieldLabel` to make the whole card toggle the switch – here for home care services.

#### Settings

A notification settings card grouping switches with `FieldGroup` and `FieldSeparator`.

### Accessibility

The Switch component follows WAI-ARIA guidelines for switches:

- Uses proper ARIA roles (`switch`)
- Supports keyboard navigation:
  - `Tab`: Move focus to the switch
  - `Space`: Toggle the switch state
- Provides proper labeling and descriptions
- Maintains focus management
- Includes visual focus indicators
- Supports screen reader announcements

### Best Practices

- Always provide labels for switches
- Use clear, action-oriented labels
- Consider adding descriptions for complex toggles
- Use appropriate spacing between switch and label
- Provide clear visual feedback for state changes
- Consider using icons for additional visual clarity
- Use switches for binary choices (on/off, yes/no)

### Related Components

- Checkbox
- Radio Group
- Toggle
- Field

## Source

File: components/ui/switch.tsx

```tsx
'use client'

import { Switch as SwitchPrimitive } from '@base-ui/react/switch'
import { cn } from '@/lib/utils'

function Switch({
	className,
	size = 'default',
	...props
}: SwitchPrimitive.Root.Props & {
	size?: 'sm' | 'default'
}) {
	return (
		<SwitchPrimitive.Root
			data-slot="switch"
			data-size={size}
			className={cn(
				'peer group/switch relative inline-flex shrink-0 cursor-pointer items-center rounded-full border border-transparent transition-all outline-none group-has-[:focus-visible]/field-label:border-transparent group-has-[:focus-visible]/field-label:ring-0 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 p-0.5 data-[size=default]:h-5 data-[size=default]:w-9 data-[size=sm]:h-4 data-[size=sm]:w-7 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:bg-primary data-checked:hover:bg-primary/90 data-unchecked:border-input data-unchecked:bg-background data-unchecked:hover:border-primary/90 data-disabled:cursor-not-allowed data-disabled:opacity-50',
				className,
			)}
			{...props}
		>
			<SwitchPrimitive.Thumb
				data-slot="switch-thumb"
				className="pointer-events-none block rounded-full ring-0 transition-transform group-data-[size=default]/switch:size-3.5 group-data-[size=sm]/switch:size-2.5 group-data-[size=default]/switch:data-checked:translate-x-4 group-data-[size=sm]/switch:data-checked:translate-x-3 data-checked:bg-background group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0 data-unchecked:bg-foreground group-hover/switch:data-unchecked:bg-primary/90"
			/>
		</SwitchPrimitive.Root>
	)
}

export { Switch }
```

---

# Table

Semantic, styled HTML table primitives.

Install: `npx shadcn@latest add https://rdf.dev.360online.com/r/table.json`

Import from: `@/components/ui/table`

A responsive table component with support for headers, footers, and various styling options.

### Features

- Semantic HTML table structure
- Support for headers, footers, and captions
- Row hover state, and a selected state via `data-state="selected"` on `TableRow`
- Rows containing an expanded element (`aria-expanded`, e.g. an open dropdown trigger) stay highlighted
- Horizontal scrolling through a wrapping container (`data-slot="table-container"`)
- Cells don't wrap (`whitespace-nowrap`); add `whitespace-normal` to a cell to allow wrapping
- Checkbox-aware cell padding
- Style with `className`; `TableRow` has no `variant` prop
- Integration with other components (Checkbox, Badge, Dropdown Menu)

### Usage

```tsx
import {
  Table,
  TableBody,
  TableCaption,
  TableCell,
  TableFooter,
  TableHead,
  TableHeader,
  TableRow,
} from '@/components/ui/table'

export function InvoicesTable() {
  return (
    <Table>
      <TableCaption>Your invoices from the municipality.</TableCaption>
      <TableHeader>
        <TableRow>
          <TableHead>Invoice</TableHead>
          <TableHead>Service</TableHead>
          <TableHead>Status</TableHead>
          <TableHead className="text-right">Amount</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        <TableRow>
          <TableCell className="font-medium">8830 1142</TableCell>
          <TableCell>Waste collection, Q1</TableCell>
          <TableCell>Unpaid</TableCell>
          <TableCell className="text-right">1 245 kr</TableCell>
        </TableRow>
      </TableBody>
      <TableFooter>
        <TableRow>
          <TableCell colSpan={3}>Total</TableCell>
          <TableCell className="text-right">1 245 kr</TableCell>
        </TableRow>
      </TableFooter>
    </Table>
  )
}
```

#### Default

A resident's municipal invoices with a caption, status badges, right-aligned amounts and a total in the footer.

#### With Selection

Row selection with checkboxes in a case inbox. Set `data-state="selected"` on a `TableRow` to highlight it; the header
checkbox shows `indeterminate` when only some rows are selected, and a bulk action appears above the table.

```tsx
<TableRow data-state={isSelected ? 'selected' : undefined}>
  <TableCell>
    <Checkbox checked={isSelected} onCheckedChange={...} aria-label="Select case 2026-04812" />
  </TableCell>
  ...
</TableRow>
```

#### With Actions

Building permit applications with avatars, status badges and a dropdown menu of actions per row. The icon-only
trigger has an `aria-label` that names the row.

#### Compact

A denser council agenda, made with `className` overrides on the table, header and cells.

#### In Card

A table flush with the edges of a `Card` (`CardContent` with `px-0`), with a `Progress` bar per row showing demand for
school places.

#### Loading

While rows load, keep the header, caption and footer and show a `Skeleton` in each cell where text will appear. Each
placeholder is as tall as the line it replaces (a 20px row with a thinner bar inside), badges get a pill of the same
size, and widths vary per row, so the table keeps its size and nothing moves when the data arrives. Mark the table
`aria-busy` while loading, hide the placeholder rows from screen readers and announce the result in a live region.
Click Reload to see the switch.

### Anatomy

```tsx
<Table>
  <TableCaption />
  <TableHeader>
    <TableRow>
      <TableHead />
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell />
    </TableRow>
  </TableBody>
  <TableFooter>
    <TableRow>
      <TableCell />
    </TableRow>
  </TableFooter>
</Table>
```

### Accessibility

The Table component follows WAI-ARIA guidelines:

- Uses semantic HTML table elements (`table`, `thead`, `tbody`, `tfoot`, `th`, `td`, `caption`)
- Add `scope` to `TableHead` cells when headers need explicit association
- Use `TableCaption` to describe the table for screen readers
- Label selection checkboxes with `aria-label`

### Best Practices

1. Structure:
   - Use semantic table elements
   - Include headers for columns
   - Group related data
   - Consider mobile layouts

2. Content:
   - Keep data concise
   - Align numbers right
   - Use consistent formatting
   - Include sorting when needed

3. Styling:
   - Maintain sufficient spacing
   - Use clear borders/dividers
   - Consider zebra striping
   - Handle overflow gracefully

4. Interaction:
   - Support keyboard navigation
   - Provide clear feedback
   - Handle selection states
   - Consider sorting/filtering

5. Accessibility:
   - Use proper headers
   - Maintain color contrast
   - Support screen readers
   - Consider mobile access

### Customization

#### Custom Styling

Modify the appearance using Tailwind classes:

```tsx
<Table className="border rounded-lg">
  <TableHeader className="bg-muted">
    <TableRow>
      <TableHead className="font-bold">Header</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow className="hover:bg-accent">
      <TableCell className="p-4">Cell</TableCell>
    </TableRow>
  </TableBody>
</Table>
```

#### Responsive Design

Handle mobile layouts with responsive classes:

```tsx
<Table className="min-w-[600px] md:min-w-full">
  <TableHeader>
    <TableRow>
      <TableHead className="hidden md:table-cell">Desktop Only</TableHead>
      <TableHead>Always Visible</TableHead>
    </TableRow>
  </TableHeader>
</Table>
```

### Related Components

- Data Table - For sorting, filtering and other advanced table features
- Pagination - For paginated tables
- Checkbox - For row selection
- Badge - For status cells

## Source

File: components/ui/table.tsx

```tsx
'use client'

import type * as React from 'react'
import { cn } from '@/lib/utils'

function Table({ className, ...props }: React.ComponentProps<'table'>) {
	return (
		<div data-slot="table-container" className="relative w-full overflow-x-auto">
			<table data-slot="table" className={cn('w-full caption-bottom text-sm', className)} {...props} />
		</div>
	)
}

function TableHeader({ className, ...props }: React.ComponentProps<'thead'>) {
	return <thead data-slot="table-header" className={cn('[&_tr]:border-b', className)} {...props} />
}

function TableBody({ className, ...props }: React.ComponentProps<'tbody'>) {
	return <tbody data-slot="table-body" className={cn('[&_tr:last-child]:border-0', className)} {...props} />
}

function TableFooter({ className, ...props }: React.ComponentProps<'tfoot'>) {
	return (
		<tfoot
			data-slot="table-footer"
			className={cn('border-t bg-muted font-medium [&>tr]:last:border-b-0', className)}
			{...props}
		/>
	)
}

function TableRow({ className, ...props }: React.ComponentProps<'tr'>) {
	return (
		<tr
			data-slot="table-row"
			className={cn(
				'border-b text-foreground transition-colors hover:bg-muted/50 has-aria-expanded:bg-muted/50 data-[state=selected]:bg-muted',
				className,
			)}
			{...props}
		/>
	)
}

function TableHead({ className, ...props }: React.ComponentProps<'th'>) {
	return (
		<th
			data-slot="table-head"
			scope="col"
			className={cn(
				'h-10 px-2 text-left align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pr-0',
				className,
			)}
			{...props}
		/>
	)
}

function TableCell({ className, ...props }: React.ComponentProps<'td'>) {
	return (
		<td
			data-slot="table-cell"
			className={cn('p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0', className)}
			{...props}
		/>
	)
}

function TableCaption({ className, ...props }: React.ComponentProps<'caption'>) {
	return <caption data-slot="table-caption" className={cn('mt-4 text-sm text-muted-foreground', className)} {...props} />
}

export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption }
```

---

# Tabs

Tabbed views built on Base UI Tabs.

Install: `npx shadcn@latest add https://rdf.dev.360online.com/r/tabs.json`

Import from: `@/components/ui/tabs`

npm dependencies: @base-ui/react@^1.8.0

A tabbed interface component built on top of [Base UI Tabs](https://base-ui.com/react/components/tabs),
providing an accessible way to organize and switch between different views.

### Features

- Underline style: a thin muted line under every tab, and a thicker primary line with semibold primary text on the active tab; hovered tabs turn primary
- Horizontal and vertical orientation (`orientation="vertical"` on `Tabs`)
- Icons in triggers, sized automatically; mark them with `data-icon="inline-start"` or `data-icon="inline-end"` for tighter padding
- Controlled (`value` / `onValueChange`) and uncontrolled (`defaultValue`) modes
- Disabled triggers
- Keyboard navigation and screen reader support

### Usage

```tsx
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'

export function TabsDemo() {
  return (
    <Tabs defaultValue="overview" className="w-full max-w-md">
      <TabsList>
        <TabsTrigger value="overview">Overview</TabsTrigger>
        <TabsTrigger value="history">History</TabsTrigger>
      </TabsList>
      <TabsContent value="overview">
        Case details…
      </TabsContent>
      <TabsContent value="history">
        Events in the case…
      </TabsContent>
    </Tabs>
  )
}
```

#### Default

A case view split into overview, applicant and history, each in a card.

#### Vertical

Set `orientation="vertical"` on `Tabs` to stack the triggers beside the content; the line moves to the left edge.
Here as the settings menu on a resident's My pages.

#### With Icons

Icons with `data-icon="inline-start"` in the triggers, and a count badge on the messages tab of a guardian's school view.

#### Icon Only

Triggers with only an icon. Give each trigger an `aria-label`, and wrap it in a `Tooltip` so sighted users see the name too.

#### Controlled

Controlled with `value` / `onValueChange`, so Back and Next buttons can move through the steps of an application.

#### Disabled State

A disabled trigger for a step that isn't available yet – appeals open once a decision has been made.

### Props


#### Tabs
- `defaultValue` / `value` / `onValueChange` - Uncontrolled or controlled active tab; `onValueChange(value, eventDetails)`
- `orientation` - `'horizontal' | 'vertical'` (default `'horizontal'`)

#### TabsList
- `activateOnFocus` - Activate a tab as soon as it receives focus with the arrow keys (default `false`: arrow keys move
  focus, `Enter` / `Space` activate)
- `loopFocus` - Whether arrow keys wrap from the last tab to the first (default `true`)
- All Base UI `Tabs.List` props

#### TabsTrigger
- `value` - The value of the tab
- `disabled` - Whether the tab is disabled

#### TabsContent
- `value` - The value of the tab this panel belongs to
- `keepMounted` - Keep the panel in the DOM while it is hidden

### Anatomy

```tsx
<Tabs>
  <TabsList>
    <TabsTrigger />
  </TabsList>
  <TabsContent />
</Tabs>
```

### Accessibility

The Tabs component follows WAI-ARIA guidelines:

- Uses proper ARIA roles (`tablist`, `tab`, `tabpanel`)
- Keyboard navigation:
  - `Tab`: Move focus to the next focusable element
  - `Arrow keys`: Navigate between tabs
  - `Space/Enter`: Activate tab
  - `Home/End`: Go to first/last tab
- Focus management within panels
- Screen reader announcements
- Clear visual feedback
- Proper labeling

### Best Practices

1. Content Organization:
   - Group related content
   - Use clear labels
   - Keep content focused
   - Consider tab order

2. Visual Design:
   - Maintain clear hierarchy
   - Use consistent spacing
   - Provide visual feedback
   - Consider mobile layout

3. Interaction:
   - Support keyboard navigation
   - Handle focus management
   - Provide clear feedback
   - Consider loading states

4. Accessibility:
   - Use descriptive labels
   - Maintain focus order
   - Support screen readers
   - Consider keyboard users

5. Implementation:
   - Handle state changes
   - Manage content updates
   - Consider performance
   - Test edge cases

### Customization

#### Custom Styling

Modify the appearance using Tailwind classes:

```tsx
<Tabs className="w-full">
  <TabsList className="grid w-full grid-cols-2">
    <TabsTrigger
      value="tab1"
      className="data-active:bg-primary data-active:text-primary-foreground"
    >
      Tab 1
    </TabsTrigger>
  </TabsList>
  <TabsContent
    value="tab1"
    className="rounded-lg border p-4"
  >
    Content 1
  </TabsContent>
</Tabs>
```

#### Vertical Orientation

Create vertically oriented tabs:

```tsx
<Tabs defaultValue="account" orientation="vertical">
  <TabsList>
    <TabsTrigger value="account">Account</TabsTrigger>
    <TabsTrigger value="password">Password</TabsTrigger>
  </TabsList>
  <TabsContent value="account">
    Account settings...
  </TabsContent>
  <TabsContent value="password">
    Password settings...
  </TabsContent>
</Tabs>
```

#### With Icons

Add icons to tab triggers:

```tsx
<TabsTrigger value="settings">
  <Settings2Icon data-icon="inline-start" />
  Settings
</TabsTrigger>
```

### Related Components

- Accordion - For vertically stacked sections
- Sub Tabs - For secondary tab navigation
- Card - For content containers
- Navigation Menu - For site navigation

## Source

File: components/ui/tabs.tsx

```tsx
'use client'

import { Tabs as TabsPrimitive } from '@base-ui/react/tabs'
import { cn } from '@/lib/utils'

function Tabs({ className, orientation = 'horizontal', ...props }: TabsPrimitive.Root.Props) {
	return (
		<TabsPrimitive.Root
			data-slot="tabs"
			data-orientation={orientation}
			orientation={orientation}
			className={cn('group/tabs flex gap-2 data-horizontal:flex-col', className)}
			{...props}
		/>
	)
}

function TabsList({ className, ...props }: TabsPrimitive.List.Props) {
	return (
		<TabsPrimitive.List
			data-slot="tabs-list"
			className={cn(
				'inline-flex w-fit items-center group-data-vertical/tabs:flex-col group-data-vertical/tabs:items-stretch',
				className,
			)}
			{...props}
		/>
	)
}

function TabsTrigger({ className, ...props }: TabsPrimitive.Tab.Props) {
	return (
		<TabsPrimitive.Tab
			data-slot="tabs-trigger"
			className={cn(
				// Rapid underline tabs with shadcn sizing: a muted line under every tab, a thicker primary line on the
				// active tab, and primary text on hover and when active (solid text-primary for 4.5:1 contrast)
				"relative inline-flex h-10 cursor-pointer items-center justify-center gap-1.5 rounded-md px-3 text-sm font-medium whitespace-nowrap text-foreground transition-colors outline-none hover:text-primary focus-visible:ring-3 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-active:font-semibold data-active:text-primary group-data-vertical/tabs:justify-start has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
				'after:absolute after:rounded-none after:bg-muted after:transition-colors after:duration-200 hover:after:bg-primary/90 data-active:after:bg-primary data-active:hover:after:bg-primary/90',
				'group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-0 group-data-horizontal/tabs:after:h-0.5 group-data-horizontal/tabs:hover:after:h-[3px] group-data-horizontal/tabs:data-active:after:h-[3px]',
				'group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:left-0 group-data-vertical/tabs:after:w-0.5',
				className,
			)}
			{...props}
		/>
	)
}

function TabsContent({ className, ...props }: TabsPrimitive.Panel.Props) {
	return (
		<TabsPrimitive.Panel
			data-slot="tabs-content"
			className={cn('flex-1 rounded-md text-sm outline-none focus-visible:ring-3 focus-visible:ring-ring', className)}
			{...props}
		/>
	)
}

export { Tabs, TabsList, TabsTrigger, TabsContent }
```

---

# Textarea

Multi-line text input.

Install: `npx shadcn@latest add https://rdf.dev.360online.com/r/textarea.json`

Import from: `@/components/ui/textarea`

A styled native HTML `textarea` element. It grows with its content (`field-sizing: content`) and has built-in styles
for focus, disabled and invalid (`aria-invalid`) states. Icons, loading indicators and action buttons are composed
with `InputGroup` and `InputGroupTextarea`.

### Features

- Plain native `textarea` — all HTML textarea attributes are supported
- Auto-grows with content via `field-sizing-content` (minimum height `min-h-16`)
- Focus ring, disabled and `aria-invalid` error styling out of the box
- Dark mode support
- Compose icons, text and buttons with `InputGroup`

### Usage

```tsx
import { Textarea } from '@/components/ui/textarea'
import { Label } from '@/components/ui/label'

// Basic usage
<Textarea placeholder="Describe your question or request…" />

// With label
<div className="grid w-full gap-1.5">
  <Label htmlFor="question">Your question</Label>
  <Textarea id="question" placeholder="Describe your question or request…" />
</div>

// Invalid state
<Textarea aria-invalid />

// Disabled state
<Textarea disabled placeholder="Disabled textarea" />
```

With an icon or buttons, use `InputGroup`:

```tsx
import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupTextarea } from '@/components/ui/input-group'

<InputGroup>
  <InputGroupTextarea placeholder="Write a message to your case handler…" />
  <InputGroupAddon align="block-end">
    <InputGroupButton size="icon-xs" aria-label="Attach a file">
      <PaperclipIcon />
    </InputGroupButton>
  </InputGroupAddon>
</InputGroup>
```

#### Default

A plain textarea. It grows with its content, so there is no need to set `rows`.

#### With Label

Inside a `Field` with a `FieldLabel` and a `FieldDescription` with guidance.

#### Composer

A secure message to a case handler, composed with `InputGroup`: a header addon, an attach button, and a send button that
stays disabled until there is text.

#### Disabled

#### Read Only

`readOnly` shows a dashed border and a muted background while keeping the text selectable – useful for decision texts.

#### Invalid

Set `aria-invalid` and point `aria-describedby` at a `FieldError`.

#### Loading

A `Spinner` and status text in a block-end addon while content is fetched.

#### With Max Length

A character counter below the field, linked with `aria-describedby`.

#### With Validation

Validates when the field loses focus and shows the error with `FieldError`.

### Props


`Textarea` accepts all native `textarea` props (`React.ComponentProps<'textarea'>`), including `className`. It has no
custom props.

### Accessibility

- Uses the native HTML textarea element
- Pair with a `Label` via `htmlFor` / `id`
- Use `aria-invalid` and `aria-describedby` to announce errors
- Clear focus indicators and keyboard support

### Best Practices

1. Always use a label; placeholders are supplementary only.
2. Show a character counter when using `maxLength`.
3. Mark invalid fields with `aria-invalid` and show a clear error message.
4. Use `InputGroup` for icons and inline actions.

### Related Components

- Input
- Input Group
- Label
- Field
- Form

## Source

File: components/ui/textarea.tsx

```tsx
import type * as React from 'react'
import { cn } from '@/lib/utils'

function Textarea({ className, ...props }: React.ComponentProps<'textarea'>) {
	return (
		<textarea
			data-slot="textarea"
			className={cn(
				'flex field-sizing-content min-h-16 w-full rounded-lg border border-input bg-background px-2.5 py-2 text-base transition-colors outline-none placeholder:text-muted-foreground hover:border-primary/90 read-only:cursor-default read-only:border-dashed read-only:bg-muted/50 read-only:hover:border-input focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40',
				className,
			)}
			{...props}
		/>
	)
}

export { Textarea }
```

---

# Time Picker

Time picker: a 24-hour field with hour/minute segments in the style of Input, standalone segment inputs, and a visual popover variant.

Install: `npx shadcn@latest add https://rdf.dev.360online.com/r/time-picker.json`

Import from: `@/components/ui/time-picker`

Builds on: button, popover, scroll-area

npm dependencies: lucide-react@^1.48.0

Installs as a folder (`components/ui/time-picker/`) with three components and a set of helpers.

### Features

- A 24-hour `HH : MM` field in the style of Input
- Optional seconds
- Controlled or uncontrolled (`value` / `defaultValue` / `onValueChange`)
- Keyboard entry (digits, ↑/↓, ←/→ between segments)
- Disabled, read-only and invalid states
- `VisualTimePicker` with a popover of scrollable hour and minute lists

### Usage

```tsx
import { TimePicker, TimePickerInput, VisualTimePicker } from "@/components/ui/time-picker"

const [date, setDate] = useState<Date | undefined>()
const minuteRef = useRef<HTMLInputElement>(null)

// Single field
<Label htmlFor="pickup">Pick-up time</Label>
<TimePicker id="pickup" value={date} onValueChange={setDate} />

// Keyboard fields
<TimePickerInput picker="hours" date={date} setDate={setDate} onRightFocus={() => minuteRef.current?.focus()} />
<TimePickerInput picker="minutes" date={date} setDate={setDate} ref={minuteRef} />

// Popover picker
<VisualTimePicker
  date={date}
  setDate={setDate}
  placeholder="Select time"
  labels={{ hours: 'Hours', minutes: 'Minutes' }}
/>
```

#### Default

A `TimePicker` in a `Field`, with a description linked through `aria-describedby`.

#### Time range

Two controlled pickers for booking a sports hall. When the end is before the start, the second field is marked with
`aria-invalid` and the error is shown with `FieldError`.

#### With seconds

`withSeconds` adds a seconds segment.

#### States

Read only, disabled and invalid.

#### Keyboard inputs

Separate `TimePickerInput` fields with their own labels, chained with `onLeftFocus` / `onRightFocus`.

#### Visual picker

`VisualTimePicker` opens a popover with hour and minute lists (minutes in steps of five).

#### Visual picker — read only and disabled

### Props


#### TimePicker
- `value` - Controlled value. The date part is kept; only the time changes.
- `defaultValue` - The initial value when uncontrolled
- `onValueChange` - Event handler for when the time changes, `(date: Date | undefined) => void`
- `withSeconds` - Show a seconds segment (default `false`)
- `disabled` - Disables the field
- `readOnly` - Makes the field read only
- `id` - id of the hours segment, so a `<Label htmlFor>` focuses the field
- `className` - Additional CSS classes
- `labels` - Screen reader names for the segments, `{ hours?, minutes?, seconds? }` (default `Hours`, `Minutes`, `Seconds`)
- `aria-label` - Accessible name when there is no visible label
- `aria-labelledby` - Id of the element that names the field
- `aria-describedby` - Ids of the help text and error message
- `aria-invalid` - Marks the field as invalid (destructive border and ring)

#### TimePickerInput
- `picker` - Which unit the field edits: `hours`, `12hours`, `minutes` or `seconds`
- `date` - The `Date` the field reads from
- `setDate` - Called with the new `Date` when the value changes, `(date: Date | undefined) => void`
- `period` - `AM` or `PM`, used with `picker="12hours"`
- `onLeftFocus` - Called on `←`, to move focus to the previous field
- `onRightFocus` - Called on `→` and after the second digit, to move focus to the next field
- `variant` - `default` is a standalone field; `segment` is borderless, for use inside `TimePicker` or your own field (default `default`)
- All `input` attributes except `type`, including `className`, `disabled`, `readOnly` and `aria-*`

#### VisualTimePicker
- `date` - The selected time
- `setDate` - Called with the new `Date` when an hour or minute is picked, `(date: Date | undefined) => void`
- `disabled` - Disables the button
- `readOnly` - Shows the time with a dashed border and does not open the popover
- `placeholder` - Text shown on the button while no time is selected
- `labels` - Headings above the hour and minute lists, `{ hours, minutes }`
- `id` - id of the button, e.g. to pair with a `<Label htmlFor>`
- `className` - Additional CSS classes
- `aria-label` - Accessible name when there is no visible label
- `aria-labelledby` - Ids of the elements that name the picker, usually the field's label. The button adds itself, so the name ends with the chosen value (or the placeholder). Takes precedence over `aria-label`.
- `aria-describedby` - Ids of the help text and error message, passed on to the button
- `aria-invalid` - Marks the button as invalid (destructive border and ring)

### Accessibility

- The field is a `role="group"`
- Pass `id` so a `<Label htmlFor>` focuses the hours segment, or `aria-label` / `aria-labelledby` when there is no visible label
- Each segment gets its screen reader name from `labels`
- `aria-invalid` and `aria-describedby` announce errors
- Keyboard: type digits, ↑/↓ step the value, ←/→ move between segments, and after the second digit focus moves on to the next segment

### Related Components

- Date Time Picker
- Calendar
- Popover

## Source

File: components/ui/time-picker/index.ts

```tsx
export * from './time-picker'
export * from './visual-time-picker'
```

File: components/ui/time-picker/time-picker-utils.ts

```tsx
/**
 * regular expression to check for valid hour format (01-23)
 */
export function isValidHour(value: string) {
	return /^(0[0-9]|1[0-9]|2[0-3])$/.test(value)
}

/**
 * regular expression to check for valid 12 hour format (01-12)
 */
export function isValid12Hour(value: string) {
	return /^(0[1-9]|1[0-2])$/.test(value)
}

/**
 * regular expression to check for valid minute format (00-59)
 */
export function isValidMinuteOrSecond(value: string) {
	return /^[0-5][0-9]$/.test(value)
}

type GetValidNumberConfig = { max: number; min?: number; loop?: boolean }

export function getValidNumber(value: string, { max, min = 0, loop = false }: GetValidNumberConfig) {
	let numericValue = Number.parseInt(value, 10)

	if (!Number.isNaN(numericValue)) {
		if (!loop) {
			if (numericValue > max) numericValue = max
			if (numericValue < min) numericValue = min
		} else {
			if (numericValue > max) numericValue = min
			if (numericValue < min) numericValue = max
		}
		return numericValue.toString().padStart(2, '0')
	}

	return '00'
}

export function getValidHour(value: string) {
	if (isValidHour(value)) return value
	return getValidNumber(value, { max: 23 })
}

export function getValid12Hour(value: string) {
	if (isValid12Hour(value)) return value
	return getValidNumber(value, { min: 1, max: 12 })
}

export function getValidMinuteOrSecond(value: string) {
	if (isValidMinuteOrSecond(value)) return value
	return getValidNumber(value, { max: 59 })
}

type GetValidArrowNumberConfig = {
	min: number
	max: number
	step: number
}

export function getValidArrowNumber(value: string, { min, max, step }: GetValidArrowNumberConfig) {
	let numericValue = Number.parseInt(value, 10)
	if (!Number.isNaN(numericValue)) {
		numericValue += step
		return getValidNumber(String(numericValue), { min, max, loop: true })
	}
	return '00'
}

export function getValidArrowHour(value: string, step: number) {
	return getValidArrowNumber(value, { min: 0, max: 23, step })
}

export function getValidArrow12Hour(value: string, step: number) {
	return getValidArrowNumber(value, { min: 1, max: 12, step })
}

export function getValidArrowMinuteOrSecond(value: string, step: number) {
	return getValidArrowNumber(value, { min: 0, max: 59, step })
}

export function setMinutes(date: Date, value: string) {
	const minutes = getValidMinuteOrSecond(value)
	date.setMinutes(Number.parseInt(minutes, 10))
	return date
}

export function setSeconds(date: Date, value: string) {
	const seconds = getValidMinuteOrSecond(value)
	date.setSeconds(Number.parseInt(seconds, 10))
	return date
}

export function setHours(date: Date, value: string) {
	const hours = getValidHour(value)
	date.setHours(Number.parseInt(hours, 10))
	return date
}

export function set12Hours(date: Date, value: string, period: Period) {
	const hours = Number.parseInt(getValid12Hour(value), 10)
	const convertedHours = convert12HourTo24Hour(hours, period)
	date.setHours(convertedHours)
	return date
}

export type TimePickerType = 'minutes' | 'seconds' | 'hours' | '12hours'
export type Period = 'AM' | 'PM'

export function setDateByType(date: Date, value: string, type: TimePickerType, period?: Period) {
	switch (type) {
		case 'minutes':
			return setMinutes(date, value)
		case 'seconds':
			return setSeconds(date, value)
		case 'hours':
			return setHours(date, value)
		case '12hours': {
			if (!period) return date
			return set12Hours(date, value, period)
		}
		default:
			return date
	}
}

export function getDateByType(date: Date, type: TimePickerType) {
	switch (type) {
		case 'minutes':
			return getValidMinuteOrSecond(String(date.getMinutes()))
		case 'seconds':
			return getValidMinuteOrSecond(String(date.getSeconds()))
		case 'hours':
			return getValidHour(String(date.getHours()))
		case '12hours': {
			const hours = display12HourValue(date.getHours())
			return getValid12Hour(String(hours))
		}
		default:
			return '00'
	}
}

export function getArrowByType(value: string, step: number, type: TimePickerType) {
	switch (type) {
		case 'minutes':
			return getValidArrowMinuteOrSecond(value, step)
		case 'seconds':
			return getValidArrowMinuteOrSecond(value, step)
		case 'hours':
			return getValidArrowHour(value, step)
		case '12hours':
			return getValidArrow12Hour(value, step)
		default:
			return '00'
	}
}

/**
 * handles value change of 12-hour input
 * 12:00 PM is 12:00
 * 12:00 AM is 00:00
 */
export function convert12HourTo24Hour(hour: number, period: Period) {
	if (period === 'PM') {
		if (hour <= 11) {
			return hour + 12
		}
		return hour
	}
	if (period === 'AM') {
		if (hour === 12) return 0
		return hour
	}
	return hour
}

/**
 * time is stored in the 24-hour form,
 * but needs to be displayed to the user
 * in its 12-hour representation
 */
export function display12HourValue(hours: number) {
	if (hours === 0 || hours === 12) return '12'
	if (hours >= 22) return `${hours - 12}`
	if (hours % 12 > 9) return `${hours}`
	return `0${hours % 12}`
}
```

File: components/ui/time-picker/time-picker.tsx

```tsx
'use client'

import { ClockIcon } from 'lucide-react'
import * as React from 'react'
import { cn } from '@/lib/utils'
import { getArrowByType, getDateByType, type Period, setDateByType, type TimePickerType } from './time-picker-utils'

export interface TimePickerInputProps extends Omit<React.ComponentProps<'input'>, 'type'> {
	picker: TimePickerType
	date: Date | undefined
	setDate: (date: Date | undefined) => void
	period?: Period
	onRightFocus?: () => void
	onLeftFocus?: () => void
	/** `default` is a standalone field; `segment` is borderless, for use inside `TimePicker` or your own field */
	variant?: 'default' | 'segment'
}

const inputVariants = {
	default:
		'h-10 w-12 rounded-lg border border-input bg-background px-1 text-sm transition-colors hover:border-primary/90 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 disabled:pointer-events-none disabled:opacity-50 read-only:cursor-default read-only:border-dashed read-only:bg-muted/50 read-only:hover:border-input',
	segment: 'h-6 w-7 rounded-sm bg-transparent p-0 text-sm disabled:pointer-events-none read-only:cursor-default',
}

/** One time segment (hours, minutes, seconds or 12-hour hours). Type digits or use the arrow keys. */
function TimePickerInput({
	className,
	variant = 'default',
	value,
	date = new Date(new Date().setHours(0, 0, 0, 0)),
	setDate,
	onChange,
	onKeyDown,
	picker,
	period,
	onLeftFocus,
	onRightFocus,
	readOnly,
	...props
}: Readonly<TimePickerInputProps>) {
	const [flag, setFlag] = React.useState(false)
	const [prevIntKey, setPrevIntKey] = React.useState('0')

	// Allow the second digit within two seconds, otherwise start again with the first digit
	React.useEffect(() => {
		if (!flag) return
		const timer = setTimeout(() => setFlag(false), 2000)
		return () => clearTimeout(timer)
	}, [flag])

	const calculatedValue = React.useMemo(() => getDateByType(date, picker), [date, picker])

	const calculateNewValue = (key: string) => {
		// In 12-hour mode a leading 0 makes the next digit 1–9; a following digit gives 10–12
		if (picker === '12hours' && flag && calculatedValue.slice(1, 2) === '1' && prevIntKey === '0') return `0${key}`
		return !flag ? `0${key}` : `${calculatedValue.slice(1, 2)}${key}`
	}

	const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
		if (event.key === 'Tab') return
		event.preventDefault()
		if (event.key === 'ArrowRight') onRightFocus?.()
		if (event.key === 'ArrowLeft') onLeftFocus?.()
		if (readOnly) return
		if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {
			const newValue = getArrowByType(calculatedValue, event.key === 'ArrowUp' ? 1 : -1, picker)
			if (flag) setFlag(false)
			setDate(setDateByType(new Date(date), newValue, picker, period))
		}
		if (event.key >= '0' && event.key <= '9') {
			if (picker === '12hours') setPrevIntKey(event.key)
			const newValue = calculateNewValue(event.key)
			if (flag) onRightFocus?.()
			setFlag((prev) => !prev)
			setDate(setDateByType(new Date(date), newValue, picker, period))
		}
	}

	return (
		<input
			data-slot="time-picker-input"
			type="text"
			inputMode="numeric"
			autoComplete="off"
			spellCheck={false}
			readOnly={readOnly}
			className={cn(
				'text-center tabular-nums text-foreground caret-transparent outline-none selection:bg-transparent focus:bg-accent focus:text-accent-foreground',
				inputVariants[variant],
				className,
			)}
			value={value ?? calculatedValue}
			onChange={(event) => {
				event.preventDefault()
				onChange?.(event)
			}}
			onKeyDown={(event) => {
				onKeyDown?.(event)
				handleKeyDown(event)
			}}
			{...props}
		/>
	)
}

export interface TimePickerProps {
	/** Controlled value. The date part is kept; only the time changes. */
	value?: Date
	defaultValue?: Date
	onValueChange?: (date: Date | undefined) => void
	/** Show a seconds segment */
	withSeconds?: boolean
	disabled?: boolean
	readOnly?: boolean
	/** id of the hours segment, so a `<Label htmlFor>` focuses the field */
	id?: string
	className?: string
	/** Screen reader names for the segments */
	labels?: { hours?: string; minutes?: string; seconds?: string }
	'aria-label'?: string
	'aria-labelledby'?: string
	'aria-describedby'?: string
	'aria-invalid'?: React.AriaAttributes['aria-invalid']
}

/** A 24-hour time field in the style of `Input`: `HH : MM` (optionally `: SS`) segments in one box. */
function TimePicker({
	value,
	defaultValue,
	onValueChange,
	withSeconds = false,
	disabled,
	readOnly,
	id,
	className,
	labels,
	'aria-invalid': ariaInvalid,
	...groupProps
}: Readonly<TimePickerProps>) {
	const [uncontrolled, setUncontrolled] = React.useState<Date | undefined>(defaultValue)
	const date = value ?? uncontrolled
	const setDate = (next: Date | undefined) => {
		if (value === undefined) setUncontrolled(next)
		onValueChange?.(next)
	}

	const hourRef = React.useRef<HTMLInputElement>(null)
	const minuteRef = React.useRef<HTMLInputElement>(null)
	const secondRef = React.useRef<HTMLInputElement>(null)

	const segment = {
		variant: 'segment' as const,
		date,
		setDate,
		disabled,
		readOnly,
		'aria-invalid': ariaInvalid,
	}

	return (
		// biome-ignore lint/a11y/useSemanticElements: a <fieldset> can't centre its flex content vertically in Chrome
		<div
			role="group"
			data-slot="time-picker"
			data-disabled={disabled || undefined}
			data-read-only={readOnly || undefined}
			data-invalid={ariaInvalid && ariaInvalid !== 'false' ? '' : undefined}
			{...groupProps}
			className={cn(
				'inline-flex h-10 w-fit min-w-0 items-center gap-0.5 rounded-lg border border-input bg-background pr-1.5 pl-2.5 text-sm transition-colors hover:border-primary/90 has-focus-visible:border-ring has-focus-visible:ring-3 has-focus-visible:ring-ring data-invalid:border-destructive data-invalid:ring-3 data-invalid:ring-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 data-read-only:border-dashed data-read-only:bg-muted/50 data-read-only:hover:border-input',
				className,
			)}
		>
			<ClockIcon aria-hidden="true" className="mr-1 size-4 shrink-0 text-muted-foreground" />
			<TimePickerInput
				{...segment}
				ref={hourRef}
				id={id}
				picker="hours"
				aria-label={labels?.hours ?? 'Hours'}
				onRightFocus={() => minuteRef.current?.focus()}
			/>
			<span aria-hidden="true" className="text-muted-foreground">
				:
			</span>
			<TimePickerInput
				{...segment}
				ref={minuteRef}
				picker="minutes"
				aria-label={labels?.minutes ?? 'Minutes'}
				onLeftFocus={() => hourRef.current?.focus()}
				onRightFocus={() => secondRef.current?.focus()}
			/>
			{withSeconds ? (
				<>
					<span aria-hidden="true" className="text-muted-foreground">
						:
					</span>
					<TimePickerInput
						{...segment}
						ref={secondRef}
						picker="seconds"
						aria-label={labels?.seconds ?? 'Seconds'}
						onLeftFocus={() => minuteRef.current?.focus()}
					/>
				</>
			) : null}
		</div>
	)
}

export { TimePicker, TimePickerInput }
```

File: components/ui/time-picker/visual-time-picker.tsx

```tsx
'use client'

import { ClockIcon } from 'lucide-react'
import * as React from 'react'
import { Button } from '@/components/ui/button'
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
import { ScrollArea, ScrollBar } from '@/components/ui/scroll-area'
import { cn } from '@/lib/utils'

export interface VisualTimePickerProps {
	date?: Date
	setDate: (date: Date | undefined) => void
	className?: string
	disabled?: boolean
	placeholder?: string
	readOnly?: boolean
	labels?: {
		hours: string
		minutes: string
	}
	/** marks the trigger as invalid (destructive border + ring) */
	'aria-invalid'?: React.AriaAttributes['aria-invalid']
	/** id for the trigger button (e.g. to pair with a `<Label htmlFor>`) */
	id?: string
	/** accessible name when there is no visible `<Label htmlFor={id}>` */
	'aria-label'?: string
	/**
	 * Ids of the elements that name the picker, usually the field's label. The button adds
	 * itself, so the name ends with the chosen value (or the placeholder): "Date of birth,
	 * required, 15 Oct 2026". Takes precedence over `aria-label`.
	 */
	'aria-labelledby'?: string
	/** Ids of the help text and error message, passed on to the button */
	'aria-describedby'?: string
}

export function VisualTimePicker({
	date,
	setDate,
	className,
	disabled,
	placeholder,
	readOnly,
	labels,
	id,
	'aria-invalid': ariaInvalid,
	'aria-label': ariaLabel,
	'aria-labelledby': ariaLabelledby,
	'aria-describedby': ariaDescribedby,
}: Readonly<VisualTimePickerProps>) {
	const [isOpen, setIsOpen] = React.useState(false)
	const generatedId = React.useId()
	const buttonId = id ?? generatedId

	// Create arrays for hours (0-23) and minutes (every 5th minute)
	const hours = Array.from({ length: 24 }, (_, i) => i)
	const minutes = Array.from({ length: 12 }, (_, i) => i * 5)

	const handleTimeChange = (type: 'hour' | 'minute', value: number) => {
		// If no date is set, start from now but reset the time first for a clean start
		const newDate = date ? new Date(date) : new Date()

		if (!date) {
			newDate.setHours(0, 0, 0, 0)
		}

		if (type === 'hour') {
			newDate.setHours(value)
		} else {
			newDate.setMinutes(value)
		}

		setDate(newDate)
	}

	return (
		<Popover open={isOpen && !readOnly} onOpenChange={setIsOpen}>
			<PopoverTrigger
				disabled={disabled}
				render={
					<Button
						variant="outline"
						data-read-only={readOnly || undefined}
						data-empty={!date || undefined}
						aria-invalid={ariaInvalid}
						id={buttonId}
						aria-label={ariaLabelledby ? undefined : ariaLabel}
						aria-labelledby={ariaLabelledby ? `${ariaLabelledby} ${buttonId}` : undefined}
						aria-describedby={ariaDescribedby}
						className={cn(
							'w-full justify-between font-normal hover:border-primary hover:bg-transparent hover:text-foreground data-empty:text-muted-foreground data-read-only:pointer-events-none data-read-only:cursor-default data-read-only:border-dashed data-read-only:border-input data-read-only:bg-muted/50 data-read-only:text-foreground data-read-only:hover:border-input data-read-only:hover:bg-muted/50',
							className,
						)}
					/>
				}
			>
				{date ? (
					<span>
						{date.getHours().toString().padStart(2, '0')}:{date.getMinutes().toString().padStart(2, '0')}
					</span>
				) : (
					<span>{placeholder}</span>
				)}
				<ClockIcon data-icon="inline-end" className="text-muted-foreground" />
			</PopoverTrigger>
			<PopoverContent
				className="max-h-(--available-height) w-auto overflow-y-auto p-0"
				align="start"
				// Named after the field, so the list is not announced as just "dialog"
				aria-labelledby={ariaLabelledby}
				aria-label={ariaLabelledby ? undefined : ariaLabel}
			>
				<div className="flex h-[300px] divide-x">
					{/* Hours */}
					<ScrollArea className="h-full w-20">
						<div className="flex flex-col p-2">
							<div className="mb-2 text-xs font-medium text-center text-muted-foreground">{labels?.hours}</div>
							{hours.map((hour) => (
								<Button
									key={hour}
									variant={date && date.getHours() === hour ? 'default' : 'ghost'}
									size="sm"
									className="my-0.5 shrink-0 justify-center"
									onClick={() => handleTimeChange('hour', hour)}
								>
									{hour.toString().padStart(2, '0')}
								</Button>
							))}
						</div>
						<ScrollBar orientation="vertical" />
					</ScrollArea>

					{/* Minutes */}
					<ScrollArea className="h-full w-20">
						<div className="flex flex-col p-2">
							<div className="mb-2 text-xs font-medium text-center text-muted-foreground">{labels?.minutes}</div>
							{minutes.map((minute) => (
								<Button
									key={minute}
									variant={date && date.getMinutes() === minute ? 'default' : 'ghost'}
									size="sm"
									className="my-0.5 shrink-0 justify-center"
									onClick={() => handleTimeChange('minute', minute)}
								>
									{minute.toString().padStart(2, '0')}
								</Button>
							))}
						</div>
						<ScrollBar orientation="vertical" />
					</ScrollArea>
				</div>
			</PopoverContent>
		</Popover>
	)
}
```

---

# Toast

Short notifications that appear over the page, built on Base UI Toast, with types, actions and loading states.

Install: `npx shadcn@latest add https://rdf.dev.360online.com/r/toast.json`

Import from: `@/components/ui/toast`

Builds on: button

npm dependencies: @base-ui/react@^1.8.0, lucide-react@^1.48.0

Short, temporary notifications that confirm what just happened, like a sent application or an archived case. Built on
Base UI Toast, with shadcn's stacking and swipe animations and the RDF apps' look for typed toasts: a tinted background,
a 3px coloured left edge and an icon.

### Features

- `<Toaster />` renders the notification region; call `toast.add()` from anywhere, or `useToastManager()` inside a Toaster
- Types `info`, `success`, `warning` and `error` (or `destructive`), each with its own icon, edge colour and a
  visually hidden type label, so the type is never shown by colour alone
- `toast.promise()` shows a loading toast that turns into a success or error toast
- An action button through `actionProps`; toasts with an action stay until they are closed
- Pauses while hovered or focused, can be swiped away or closed with the close button
- Toasts stack and expand on hover or focus; `limit` sets how many are shown at once
- Every label (`label`, `closeLabel`, `typeLabels`) can be translated
- Colours from theme tokens only, in both themes and in light and dark mode

### Usage

Render one `<Toaster />` in the root layout and call `toast` from anywhere, also outside React components.

```tsx
// app/layout.tsx
import { Toaster } from '@/components/ui/toast'

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Toaster />
      </body>
    </html>
  )
}
```

```tsx
import { Button } from '@/components/ui/button'
import { toast } from '@/components/ui/toast'

export function SendApplication() {
  return (
    <Button
      onClick={() =>
        toast.add({
          type: 'success',
          title: 'Application sent',
          description: 'Your case number is 2026-04812.',
        })
      }
    >
      Send application
    </Button>
  )
}
```

Inside a Toaster, `useToastManager()` returns the same methods for that Toaster only. The examples below use it, so each
preview on this page has its own toasts.

#### Default

A plain toast with a title and a description.

#### Types

`info` uses `primary`, `success` and `warning` their theme tokens, and `error` `destructive` (mixed 30% towards
`foreground` so the edge and icon keep a 3:1 contrast in every theme). Text stays `foreground`.
Screen readers hear the type first, for example "Error: The application could not be sent". Use `priority: 'high'` for
errors that need attention now; they are announced immediately instead of politely.

#### With Action

`actionProps` adds a button; its props go to the button. A toast with an action does not close by itself unless you
pass a `timeout`, so the user has time to reach the button.

#### Promise

`promise(promise, { loading, success, error })` shows a loading toast with a spinner, then updates it with the result.
Each option is a string (the description), an object with toast options, or a function of the result or error.

#### Stacked

Several toasts stack on top of each other and expand when the stack is hovered or focused. Toasts over `limit` are hidden
until there is room.

### Props


#### Toaster

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `toastManager` | `ToastManager` | `toast` | The manager whose toasts are shown; create one with `createToastManager()` |
| `timeout` | `number` | `5000` | Default time in ms before a toast closes; `0` keeps it open |
| `limit` | `number` | `3` | Maximum number of toasts shown at once |
| `label` | `string` | `'Notifications'` | Accessible name of the notification region |
| `closeLabel` | `string` | `'Close notification'` | Accessible name of each close button |
| `typeLabels` | `Partial<Record<ToastType, string>>` | English labels | Visually hidden prefix per type, e.g. `{ error: 'Fel' }` |
| `className` | `string` | – | Classes for the viewport, e.g. to position it |
| `children` | `ReactNode` | – | Content that can call `useToastManager()` |

#### toast.add(options)

| Option | Type | Default | Description |
| --- | --- | --- | --- |
| `title` | `ReactNode` | – | Main message |
| `description` | `ReactNode` | – | Supporting text |
| `type` | `'info' \| 'success' \| 'warning' \| 'error' \| 'destructive' \| 'loading'` | – | Icon, edge colour and type label |
| `timeout` | `number` | Toaster `timeout`, or `0` with an action | Time in ms before it closes |
| `priority` | `'low' \| 'high'` | `'low'` | `high` is announced immediately |
| `actionProps` | button props | – | Adds an action button, e.g. `{ children: 'Undo', onClick }` |
| `onClose` | `() => void` | – | Called when the toast closes |
| `id` | `string` | generated | Adding a toast with an existing id updates it |

`add()` returns the id. `update(id, options)` changes a toast, `close(id)` closes one (or all without an id) and
`promise(promise, options)` shows a loading toast for a promise.

### Subcomponents

- `Toaster` - Provider, portal and viewport with the default toast layout
- `toast` / `createToastManager()` - The app-wide manager, or a new one for a separate Toaster
- `useToastManager()` - The toasts and methods of the nearest Toaster
- `ToastProvider`, `ToastPortal`, `ToastViewport`, `Toast`, `ToastContent`, `ToastTitle`, `ToastDescription`,
  `ToastAction`, `ToastClose`, `ToastIcon` - The parts, for building a custom toast layout

### Accessibility

- The viewport is a region named "Notifications" with `aria-live="polite"`, so new toasts are read without moving focus;
  `priority: 'high'` toasts are announced as alerts
- Each toast is a non-modal dialog labelled by its title; the type ("Success", "Warning", …) is part of the title for
  screen readers and shown with an icon, never with colour alone
- The edge and icon colours keep at least 3:1 contrast and the text uses `foreground` on a light tint
- Timers pause while the pointer or keyboard focus is in the toast area, and while the window is not focused
- F6 moves focus to the toasts; Tab reaches the action and close buttons, and focus returns afterwards
- Toasts with an action do not close by themselves by default, since a keyboard or screen reader user may need longer to
  reach the button (WCAG 2.2.1). Don't put the only way to do something in a toast; offer it on the page as well
- The close button is 32px with an accessible name you can translate with `closeLabel`
- Animations are turned off when the user prefers reduced motion

### Related Components

- Alert - For messages that stay on the page
- Alert Dialog - For messages the user must respond to
- Button - Used for the action and close buttons

## Source

File: components/ui/toast.tsx

```tsx
'use client'

import {
	type ToastManager,
	type ToastManagerPromiseOptions,
	type ToastManagerUpdateOptions,
	Toast as ToastPrimitive,
	type UseToastManagerReturnValue,
} from '@base-ui/react/toast'
import { CircleCheckIcon, CircleXIcon, InfoIcon, Loader2Icon, TriangleAlertIcon, XIcon } from 'lucide-react'
import * as React from 'react'
import { Button } from '@/components/ui/button'
import { cn } from '@/lib/utils'

// The toast types that get a coloured edge, an icon and a type label. `error` and `destructive` look the same;
// `toast.promise()` uses `loading`, `success` and `error`.
type ToastType = 'info' | 'success' | 'warning' | 'error' | 'destructive' | 'loading'

// A toast with an action button stays until the user closes it or takes the action, unless it sets its own `timeout`.
// Toasts that time out also pause while the pointer or focus is inside the toast area (Base UI's viewport).
function withToastDefaults<T extends { actionProps?: unknown; timeout?: number }>(options: T): T {
	if (options.actionProps && options.timeout === undefined) {
		return { ...options, timeout: 0 }
	}
	return options
}

function withPromiseDefaults<Value, Data extends object>(
	options: ToastManagerPromiseOptions<Value, Data>,
): ToastManagerPromiseOptions<Value, Data> {
	const resolve = <A,>(
		option: string | ToastManagerUpdateOptions<Data> | ((arg: A) => string | ToastManagerUpdateOptions<Data>),
	) => {
		if (typeof option === 'function') {
			return (arg: A) => {
				const resolved = option(arg)
				return typeof resolved === 'string' ? resolved : withToastDefaults(resolved)
			}
		}
		return typeof option === 'string' ? option : withToastDefaults(option)
	}
	return {
		loading: options.loading,
		success: resolve(options.success),
		error: resolve(options.error),
	}
}

function withManagerDefaults<M extends Pick<ToastManager, 'add' | 'update' | 'promise'>>(manager: M): M {
	return {
		...manager,
		add: (options) => manager.add(withToastDefaults(options)),
		update: (id, updates) =>
			manager.update(
				id,
				typeof updates === 'function' ? (prev) => withToastDefaults(updates(prev)) : withToastDefaults(updates),
			),
		promise: (promise, options) => manager.promise(promise, withPromiseDefaults(options)),
	}
}

// Creates a toast manager to pass to `<Toaster toastManager={…} />`. Use it to call toasts from outside React, or to give
// one part of the page its own toasts.
function createToastManager<Data extends object = object>(): ToastManager<Data> {
	return withManagerDefaults(ToastPrimitive.createToastManager<Data>())
}

// The app-wide toast manager used by `<Toaster />`: `toast.add({ title, description, type })`, `toast.promise()`,
// `toast.update()` and `toast.close()`.
const toast = createToastManager()

// The toasts and toast methods of the nearest Toaster/ToastProvider, for use inside React components.
function useToastManager<Data extends object = object>(): UseToastManagerReturnValue<Data> {
	const manager = ToastPrimitive.useToastManager<Data>()
	return React.useMemo(() => withManagerDefaults(manager), [manager])
}

function ToastProvider({ ...props }: ToastPrimitive.Provider.Props) {
	return <ToastPrimitive.Provider {...props} />
}

function ToastPortal({ ...props }: ToastPrimitive.Portal.Props) {
	return <ToastPrimitive.Portal data-slot="toast-portal" {...props} />
}

// A labelled region (default "Notifications") that announces new toasts politely, or urgently for `priority: 'high'`.
// F6 moves focus into it.
function ToastViewport({ className, ...props }: ToastPrimitive.Viewport.Props) {
	return (
		<ToastPrimitive.Viewport
			data-slot="toast-viewport"
			className={cn(
				'pointer-events-none fixed inset-x-4 bottom-4 z-50 mx-auto w-auto max-w-sm outline-none sm:right-4 sm:left-auto sm:mx-0 sm:w-full',
				className,
			)}
			{...props}
		/>
	)
}

function Toast({ className, ...props }: ToastPrimitive.Root.Props) {
	return (
		<ToastPrimitive.Root
			data-slot="toast"
			className={cn(
				'group/toast pointer-events-auto absolute right-0 bottom-0 z-[calc(1000-var(--toast-index))] w-full origin-bottom rounded-lg border bg-popover text-sm text-foreground shadow-lg will-change-transform outline-none select-none focus-visible:ring-3 focus-visible:ring-ring',
				// Typed toasts: a tinted background, a 3px coloured left edge and a coloured icon. Text stays `text-foreground`.
				// Info uses `primary`, success and warning their own tokens, and error `destructive` mixed 30% towards
				// `foreground` so the edge and icon keep at least 3:1 against the toast in both themes and modes.
				'data-[type=info]:[--toast-accent:var(--primary)]',
				'data-[type=success]:[--toast-accent:var(--success)]',
				'data-[type=warning]:[--toast-accent:var(--warning)]',
				'data-[type=error]:[--toast-accent:color-mix(in_srgb,var(--destructive)_70%,var(--foreground))]',
				'data-[type=destructive]:[--toast-accent:color-mix(in_srgb,var(--destructive)_70%,var(--foreground))]',
				'data-[type=loading]:[--toast-accent:var(--muted-foreground)]',
				'data-type:border-l-3 data-type:border-l-[color:var(--toast-accent,var(--border))] data-type:bg-[color-mix(in_srgb,var(--toast-accent,var(--popover))_8%,var(--popover))]',
				// Stacking, expanding and swipe animations from shadcn
				'[--gap:0.75rem] [--height:var(--toast-frontmost-height,var(--toast-height))] [--offset-y:calc(var(--toast-offset-y)*-1+calc(var(--toast-index)*var(--gap)*-1)+var(--toast-swipe-movement-y))] [--peek:0.75rem] [--scale:calc(max(0,1-(var(--toast-index)*0.1)))] [--shrink:calc(1-var(--scale))]',
				'h-(--height) [transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)-(var(--toast-index)*var(--peek))-(var(--shrink)*var(--height))))_scale(var(--scale))] [transition:transform_500ms_cubic-bezier(0.22,1,0.36,1),opacity_500ms,height_150ms] motion-reduce:[transition:none]',
				"after:absolute after:top-full after:left-0 after:h-[calc(var(--gap)+1px)] after:w-full after:content-['']",
				'data-expanded:h-(--toast-height) data-expanded:[transform:translateX(var(--toast-swipe-movement-x))_translateY(var(--offset-y))]',
				'data-limited:opacity-0 data-starting-style:[transform:translateY(150%)]',
				'[&[data-ending-style]:not([data-limited]):not([data-swipe-direction])]:[transform:translateY(150%)]',
				'data-ending-style:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))]',
				'data-ending-style:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))]',
				'data-ending-style:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))]',
				'data-ending-style:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))]',
				'data-expanded:data-ending-style:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))]',
				'data-expanded:data-ending-style:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))]',
				'data-expanded:data-ending-style:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))]',
				'data-expanded:data-ending-style:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))]',
				className,
			)}
			{...props}
		/>
	)
}

function ToastContent({ className, ...props }: ToastPrimitive.Content.Props) {
	return (
		<ToastPrimitive.Content
			data-slot="toast-content"
			className={cn(
				'flex h-full items-start gap-3 overflow-hidden p-4 transition-opacity duration-250 ease-[cubic-bezier(0.22,1,0.36,1)] data-behind:opacity-0 data-expanded:opacity-100 motion-reduce:transition-none',
				className,
			)}
			{...props}
		/>
	)
}

function ToastTitle({ className, ...props }: ToastPrimitive.Title.Props) {
	return <ToastPrimitive.Title data-slot="toast-title" className={cn('text-sm font-medium', className)} {...props} />
}

function ToastDescription({ className, ...props }: ToastPrimitive.Description.Props) {
	return (
		<ToastPrimitive.Description
			data-slot="toast-description"
			className={cn('text-sm text-foreground', className)}
			{...props}
		/>
	)
}

function ToastAction({
	className,
	render = <Button variant="outline" size="sm" />,
	...props
}: ToastPrimitive.Action.Props) {
	return (
		<ToastPrimitive.Action
			data-slot="toast-action"
			render={render}
			className={cn('-mt-1.5 shrink-0', className)}
			{...props}
		/>
	)
}

// Icon-only close button (32px). Pass `aria-label` to translate it; Toaster sets it from `closeLabel`.
function ToastClose({
	className,
	children,
	render = <Button variant="ghost" size="icon-sm" />,
	...props
}: ToastPrimitive.Close.Props) {
	return (
		<ToastPrimitive.Close
			data-slot="toast-close"
			aria-label="Close notification"
			render={render}
			className={cn('-mt-1.5 shrink-0 text-muted-foreground hover:text-foreground', className)}
			{...props}
		>
			{children ?? <XIcon aria-hidden="true" />}
		</ToastPrimitive.Close>
	)
}

const toastIcons: Partial<Record<string, React.ComponentType<React.SVGProps<SVGSVGElement>>>> = {
	info: InfoIcon,
	success: CircleCheckIcon,
	warning: TriangleAlertIcon,
	error: CircleXIcon,
	destructive: CircleXIcon,
	loading: Loader2Icon,
}

// Decorative: the type is announced by the visually hidden type label in the title, so the icon is hidden from
// assistive technology.
function ToastIcon({ type, className, ...props }: React.ComponentProps<'span'> & { type: string | undefined }) {
	const Icon = type ? toastIcons[type] : undefined
	if (!Icon) {
		return null
	}

	return (
		<span
			data-slot="toast-icon"
			aria-hidden="true"
			className={cn(
				"shrink-0 text-(--toast-accent) [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-5",
				className,
			)}
			{...props}
		>
			<Icon className={cn(type === 'loading' && 'animate-spin motion-reduce:animate-none')} />
		</span>
	)
}

// The built-in types, which editors suggest, plus any custom `type` an app gives its toasts
type ToastTypeLabels = Partial<Record<ToastType, string>> & Record<string, string | undefined>

const defaultTypeLabels: ToastTypeLabels = {
	info: 'Information',
	success: 'Success',
	warning: 'Warning',
	error: 'Error',
	destructive: 'Error',
}

function ToastList({ closeLabel, typeLabels }: { closeLabel: string; typeLabels: ToastTypeLabels }) {
	const { toasts } = ToastPrimitive.useToastManager()

	return toasts.map((toastItem) => {
		const typeLabel = toastItem.type ? typeLabels[toastItem.type] : undefined
		const srType = typeLabel ? <span className="sr-only">{`${typeLabel}: `}</span> : null
		const hasTitle = toastItem.title != null && toastItem.title !== ''

		return (
			<Toast key={toastItem.id} toast={toastItem}>
				<ToastContent>
					<ToastIcon type={toastItem.type} />
					<div className="flex min-w-0 flex-1 flex-col gap-1">
						{hasTitle ? (
							<ToastTitle>
								{srType}
								{toastItem.title}
							</ToastTitle>
						) : null}
						{!hasTitle && toastItem.description ? (
							<ToastDescription>
								{srType}
								{toastItem.description}
							</ToastDescription>
						) : (
							<ToastDescription />
						)}
					</div>
					<ToastAction />
					<ToastClose aria-label={closeLabel} />
				</ToastContent>
			</Toast>
		)
	})
}

type ToasterProps = ToastPrimitive.Provider.Props & {
	/** Accessible name of the notification region. */
	label?: string
	/** Accessible name of each toast's close button. */
	closeLabel?: string
	/** Visually hidden prefix per toast type, read before the title, e.g. "Error: ". Merged with the English defaults. */
	typeLabels?: ToastTypeLabels
	/** Class names for the viewport, e.g. to move it to the top of the screen. */
	className?: string
}

// Renders the toasts of `toastManager` (the app-wide `toast` by default). Put one in the root layout, or wrap part of the
// app in it and call `useToastManager()` inside.
function Toaster({
	children,
	toastManager = toast,
	label = 'Notifications',
	closeLabel = 'Close notification',
	typeLabels,
	className,
	...props
}: ToasterProps) {
	const labels = React.useMemo(() => ({ ...defaultTypeLabels, ...typeLabels }), [typeLabels])

	return (
		<ToastProvider toastManager={toastManager} {...props}>
			{children}
			<ToastPortal>
				<ToastViewport aria-label={label} className={className}>
					<ToastList closeLabel={closeLabel} typeLabels={labels} />
				</ToastViewport>
			</ToastPortal>
		</ToastProvider>
	)
}

export {
	Toaster,
	Toast,
	ToastAction,
	ToastClose,
	ToastContent,
	ToastDescription,
	ToastIcon,
	ToastPortal,
	ToastProvider,
	ToastTitle,
	ToastViewport,
	createToastManager,
	toast,
	useToastManager,
	type ToasterProps,
	type ToastType,
	type ToastTypeLabels,
}
```

---

# Toggle

Two-state button built on Base UI Toggle.

Install: `npx shadcn@latest add https://rdf.dev.360online.com/r/toggle.json`

Import from: `@/components/ui/toggle`

npm dependencies: @base-ui/react@^1.8.0, class-variance-authority@^0.7.1

A two-state button that can be either on or off. Built on the Base UI Toggle primitive with customizable variants and sizes.

### Features

- Two-state toggle functionality (pressed/unpressed)
- Built on the Base UI Toggle primitive for accessibility
- Two visual variants: `default` and `outline`
- Three sizes: `sm`, `default`, `lg`
- Icon spacing via `data-icon="inline-start"` / `data-icon="inline-end"`; SVGs are sized automatically
- Controlled (`pressed`) and uncontrolled (`defaultPressed`) modes
- Disabled state and `aria-invalid` styling
- `toggleVariants` exported for reuse (also used by `ToggleGroup`)

### Usage

```tsx
import { Toggle } from "@/components/ui/toggle"
import { Bold } from "lucide-react"

// Icon only
<Toggle aria-label="Toggle bold">
  <Bold />
</Toggle>

// With text
<Toggle aria-label="Toggle bold">Bold</Toggle>

// With icon and text
<Toggle aria-label="Toggle bold">
  <Bold data-icon="inline-start" />
  Bold
</Toggle>

// Initially pressed (uncontrolled)
<Toggle defaultPressed aria-label="Toggle bold">
  <Bold />
</Toggle>

// Controlled toggle
const [isPressed, setIsPressed] = useState(false)

<Toggle pressed={isPressed} onPressedChange={setIsPressed} aria-label="Toggle bold">
  <Bold />
</Toggle>

// Variant and size
<Toggle variant="outline" size="lg" aria-label="Toggle bold">
  <Bold />
</Toggle>
```

#### Default

An outline toggle with an icon and text. The pin icon is filled while the toggle is on, using the `group/toggle` state.

#### Variants

`default` is transparent until pressed; `outline` adds a border so the toggle reads as a control on busy backgrounds.

#### Sizes

Three sizes: `sm`, `default` and `lg`.

#### With Text

Small outline toggles with icons and counts, used as map layer filters for municipal facilities.

#### Formatting Toolbar

Independent toggles in an editor toolbar for a decision letter. The preview text follows the pressed state.

#### Follow Case

A toggle per row to follow public cases. The icon and label change with the state; `aria-pressed` tells screen readers whether it's on.

#### Disabled

Disabled toggles in both states and variants.

#### Controlled

A controlled toggle (`pressed` / `onPressedChange`) that filters a case list to overdue cases.

### Props


#### Toggle
- `variant?: "default" | "outline"` - The visual style variant (default `"default"`)
- `size?: "sm" | "default" | "lg"` - The size of the toggle (default `"default"`)
- `pressed?: boolean` - The pressed state of the toggle (controlled)
- `defaultPressed?: boolean` - The default pressed state (uncontrolled)
- `onPressedChange?: (pressed: boolean, eventDetails) => void` - Callback when pressed state changes
- `disabled?: boolean` - Whether the toggle is disabled
- `className?: string` - Additional CSS classes
- Extends all Base UI Toggle props

### Styling

The pressed state is styled with `data-pressed` / `aria-pressed` (accent background). Override it with `className`:

```tsx
<Toggle className="data-pressed:bg-primary data-pressed:text-primary-foreground" aria-label="Toggle bold">
  <Bold />
</Toggle>
```

### Accessibility

- Built on the Base UI Toggle primitive with full keyboard support
- Renders a `button` with `aria-pressed` reflecting the state
- `Space` / `Enter` toggle the pressed state
- Always provide an `aria-label` for icon-only toggles

### Best Practices

1. **Labeling**
   - Always provide meaningful `aria-label` attributes
   - Consider tooltips for icon-only toggles
   - Ensure labels describe the action, not the current state

2. **State Management**
   - Use controlled mode when the state lives elsewhere
   - Use `ToggleGroup` for sets of related options

3. **Visual Design**
   - Use consistent sizing within a toolbar
   - Use `outline` when toggles sit on a busy background

### Common Use Cases

- **Text Formatting**: Bold, italic, underline toggles in editors
- **Layout Controls**: Text alignment, view modes, display options
- **Filter Controls**: Show/hide content categories
- **Media Controls**: Mute/unmute, shuffle/repeat

### Integration Examples

#### With React Hook Form
```tsx
import { useForm, Controller } from 'react-hook-form'
import { Toggle } from '@/components/ui/toggle'

function SettingsForm() {
  const { control, handleSubmit } = useForm()

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <Controller
        name="notifications"
        control={control}
        render={({ field }) => (
          <Toggle
            pressed={field.value}
            onPressedChange={field.onChange}
            aria-label="Enable notifications"
          >
            Enable Notifications
          </Toggle>
        )}
      />
    </form>
  )
}
```

### Related Components

- Toggle Group
- Button
- Checkbox
- Switch
- Radio Group
- Tabs

## Source

File: components/ui/toggle.tsx

```tsx
'use client'

import { Toggle as TogglePrimitive } from '@base-ui/react/toggle'
import { cva, type VariantProps } from 'class-variance-authority'
import { cn } from '@/lib/utils'

const toggleVariants = cva(
	"group/toggle inline-flex items-center justify-center gap-1 rounded-lg text-sm font-medium whitespace-nowrap transition-all outline-none hover:bg-muted hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 aria-pressed:bg-accent aria-pressed:text-accent-foreground data-pressed:bg-accent data-pressed:text-accent-foreground dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
	{
		variants: {
			variant: {
				default: 'bg-transparent',
				outline: 'border border-input bg-transparent hover:bg-accent hover:text-accent-foreground',
			},
			size: {
				default: 'h-10 min-w-10 px-3 has-data-[icon=inline-end]:pr-2.5 has-data-[icon=inline-start]:pl-2.5',
				sm: "h-8 min-w-8 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
				lg: 'h-12 min-w-12 px-4 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2',
			},
		},
		defaultVariants: {
			variant: 'default',
			size: 'default',
		},
	},
)

function Toggle({
	className,
	variant = 'default',
	size = 'default',
	...props
}: TogglePrimitive.Props & VariantProps<typeof toggleVariants>) {
	return <TogglePrimitive data-slot="toggle" className={cn(toggleVariants({ variant, size, className }))} {...props} />
}

export { Toggle, toggleVariants }
```

---

# Toggle Group

Group of toggles with single or multiple selection.

Install: `npx shadcn@latest add https://rdf.dev.360online.com/r/toggle-group.json`

Import from: `@/components/ui/toggle-group`

Builds on: toggle

npm dependencies: @base-ui/react@^1.8.0, class-variance-authority@^0.7.1

A set of two-state buttons that can be toggled on or off. Built on the Base UI ToggleGroup primitive with single or multiple selection modes.

### Features

- Single (default) or `multiple` selection
- Built on the Base UI ToggleGroup primitive for accessibility
- Shares styling with the `Toggle` component (`toggleVariants`)
- `variant` and `size` set on the group are inherited by every item
- `spacing` prop controls the gap between items; `spacing={0}` joins items into a segmented control
- Horizontal and vertical `orientation`
- Icon spacing via `data-icon="inline-start"` / `data-icon="inline-end"`
- Controlled and uncontrolled modes
- Individual item or group-wide disabled states

### Usage

```tsx
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"
import { AlignCenter, AlignLeft, AlignRight, Bold, Italic } from "lucide-react"

// Single selection
<ToggleGroup defaultValue={["left"]}>
  <ToggleGroupItem value="left" aria-label="Align left">
    <AlignLeft />
  </ToggleGroupItem>
  <ToggleGroupItem value="center" aria-label="Align center">
    <AlignCenter />
  </ToggleGroupItem>
  <ToggleGroupItem value="right" aria-label="Align right">
    <AlignRight />
  </ToggleGroupItem>
</ToggleGroup>

// Multiple selection, segmented outline
<ToggleGroup multiple variant="outline" spacing={0}>
  <ToggleGroupItem value="bold">
    <Bold data-icon="inline-start" />
    Bold
  </ToggleGroupItem>
  <ToggleGroupItem value="italic">
    <Italic data-icon="inline-start" />
    Italic
  </ToggleGroupItem>
</ToggleGroup>

// Vertical
<ToggleGroup orientation="vertical">
  ...
</ToggleGroup>
```

#### Default

A joined (`spacing={0}`) outline group filtering cases by status. Give the group an `aria-label` so the set has a name.

#### Single Selection

By default one item can be pressed. The value is always an array, so a single selection is `value={[language]}`. Here it
picks the language of a decision letter; ignoring the empty array in `onValueChange` keeps one option always selected.

```tsx
<ToggleGroup value={[language]} onValueChange={(value) => value[0] && setLanguage(value[0])}>
  …
</ToggleGroup>
```

#### Multiple Selection

`multiple` lets any number of items be pressed – the weekdays for home help visits. Each short label has a full
`aria-label`.

#### Variants

`default` and `outline`, set once on the group and inherited by every item.

#### Sizes

`sm`, `default` and `lg`.

#### Spacing

`spacing={0}` joins the items into a segmented control; any other value is the gap in spacing units.

#### Vertical

`orientation="vertical"` stacks the items – here as a filter for e-service areas, with counts.

#### With Icon and Text

Icons with `data-icon="inline-start"` next to text labels, for choosing how a decision is delivered.

#### View Modes

Icon-only items switching between list, grid and map views of municipal facilities.

#### Rating

A five-point satisfaction scale with icon-only items and a live text label for the current choice.

#### Disabled

Disable the whole group with `disabled` on `ToggleGroup`, or single items with `disabled` on `ToggleGroupItem`.

### Props


#### ToggleGroup
- `multiple?: boolean` - Whether several items can be pressed at once (default `false`)
- `value?: string[]` - Controlled values of the pressed items (always an array, also for single selection)
- `defaultValue?: string[]` - Default values for uncontrolled mode
- `onValueChange?: (value: string[], eventDetails) => void` - Callback when selection changes
- `loopFocus?: boolean` - Whether arrow keys wrap from the last item to the first (default `true`)
- `variant?: "default" | "outline"` - Visual style applied to all items
- `size?: "sm" | "default" | "lg"` - Size applied to all items
- `spacing?: number` - Gap between items in spacing units (default `2`; `0` joins items)
- `orientation?: "horizontal" | "vertical"` - Layout direction (default `"horizontal"`)
- `disabled?: boolean` - Whether the entire group is disabled
- Extends all Base UI ToggleGroup props

#### ToggleGroupItem
- `value: string` - Unique identifier for the item (required)
- `variant?: "default" | "outline"` - Used when the group does not set a variant
- `size?: "sm" | "default" | "lg"` - Used when the group does not set a size
- `disabled?: boolean` - Whether this specific item is disabled
- Extends all Base UI Toggle props

### Styling

Items use `toggleVariants` from `@/components/ui/toggle`. The group exposes `data-variant`, `data-size`,
`data-spacing` and `data-orientation` attributes, and items expose `data-slot="toggle-group-item"`, so you can target
them with Tailwind data selectors:

```tsx
<ToggleGroup className="rounded-lg bg-muted p-1">
  <ToggleGroupItem value="a" className="data-pressed:bg-background">A</ToggleGroupItem>
  <ToggleGroupItem value="b" className="data-pressed:bg-background">B</ToggleGroupItem>
</ToggleGroup>
```

### Accessibility

- Built on the Base UI ToggleGroup primitive with full keyboard support
- Roving focus: `Tab` moves into and out of the group, arrow keys move between items
- `Space` / `Enter` toggle the focused item
- `Home` / `End` move to the first / last item
- Provide an `aria-label` on icon-only items, and on the group when its purpose is not obvious

### Best Practices

1. **Selection Modes**
   - Use the default single selection for mutually exclusive options (radio-like behavior)
   - Use `multiple` for independent toggles that can be combined

2. **Labeling**
   - Always provide meaningful `aria-label` attributes for icon-only items
   - Consider adding tooltips for icon-only items

3. **Visual Design**
   - Use `spacing={0}` with `variant="outline"` for segmented controls
   - Keep the number of items manageable (typically 2-7 items)

4. **State Management**
   - Use controlled mode when the value lives elsewhere
   - Provide sensible default values

### Common Use Cases

- **Text Formatting**: Bold, italic, underline in rich text editors
- **Layout Controls**: Text alignment, view modes, display options
- **Filter Controls**: Show/hide content categories or types
- **Media Controls**: Playback options, audio settings
- **Segmented Controls**: Day/week/month and similar period pickers

### Integration Examples

#### With Form Libraries
```tsx
import { useForm, Controller } from 'react-hook-form'

function PreferencesForm() {
  const { control, handleSubmit } = useForm()

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <Controller
        name="notifications"
        control={control}
        render={({ field }) => (
          <ToggleGroup
            multiple
            value={field.value || []}
            onValueChange={field.onChange}
          >
            <ToggleGroupItem value="email">Email</ToggleGroupItem>
            <ToggleGroupItem value="push">Push</ToggleGroupItem>
            <ToggleGroupItem value="sms">SMS</ToggleGroupItem>
          </ToggleGroup>
        )}
      />
    </form>
  )
}
```

### Related Components

- Toggle
- Button Group
- Radio Group
- Tabs

## Source

File: components/ui/toggle-group.tsx

```tsx
'use client'

import { Toggle as TogglePrimitive } from '@base-ui/react/toggle'
import { ToggleGroup as ToggleGroupPrimitive } from '@base-ui/react/toggle-group'
import type { VariantProps } from 'class-variance-authority'
import * as React from 'react'
import { toggleVariants } from '@/components/ui/toggle'
import { cn } from '@/lib/utils'

const ToggleGroupContext = React.createContext<
	VariantProps<typeof toggleVariants> & {
		spacing?: number
		orientation?: 'horizontal' | 'vertical'
	}
>({
	size: 'default',
	variant: 'default',
	spacing: 2,
	orientation: 'horizontal',
})

function ToggleGroup({
	className,
	variant,
	size,
	spacing = 2,
	orientation = 'horizontal',
	children,
	...props
}: ToggleGroupPrimitive.Props &
	VariantProps<typeof toggleVariants> & {
		spacing?: number
		orientation?: 'horizontal' | 'vertical'
	}) {
	const contextValue = React.useMemo(
		() => ({ variant, size, spacing, orientation }),
		[variant, size, spacing, orientation],
	)

	return (
		<ToggleGroupPrimitive
			data-slot="toggle-group"
			data-variant={variant}
			data-size={size}
			data-spacing={spacing}
			data-orientation={orientation}
			orientation={orientation}
			style={{ '--gap': spacing } as React.CSSProperties}
			className={cn(
				'group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] rounded-lg data-[size=sm]:rounded-[min(var(--radius-md),10px)] data-vertical:flex-col data-vertical:items-stretch',
				className,
			)}
			{...props}
		>
			<ToggleGroupContext.Provider value={contextValue}>{children}</ToggleGroupContext.Provider>
		</ToggleGroupPrimitive>
	)
}

function ToggleGroupItem({
	className,
	children,
	variant = 'default',
	size = 'default',
	...props
}: TogglePrimitive.Props & VariantProps<typeof toggleVariants>) {
	const context = React.useContext(ToggleGroupContext)

	return (
		<TogglePrimitive
			data-slot="toggle-group-item"
			data-variant={context.variant || variant}
			data-size={context.size || size}
			data-spacing={context.spacing}
			className={cn(
				'shrink-0 group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-2 focus:z-10 focus-visible:z-10 group-data-[spacing=0]/toggle-group:has-data-[icon=inline-end]:pr-1.5 group-data-[spacing=0]/toggle-group:has-data-[icon=inline-start]:pl-1.5 group-data-horizontal/toggle-group:data-[spacing=0]:first:rounded-l-lg group-data-vertical/toggle-group:data-[spacing=0]:first:rounded-t-lg group-data-horizontal/toggle-group:data-[spacing=0]:last:rounded-r-lg group-data-vertical/toggle-group:data-[spacing=0]:last:rounded-b-lg group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:border-l-0 group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:border-t-0 group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-l group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-t',
				toggleVariants({
					variant: context.variant || variant,
					size: context.size || size,
				}),
				className,
			)}
			{...props}
		>
			{children}
		</TogglePrimitive>
	)
}

export { ToggleGroup, ToggleGroupItem }
```

---

# Tooltip

Hover/focus hint built on Base UI Tooltip.

Install: `npx shadcn@latest add https://rdf.dev.360online.com/r/tooltip.json`

Import from: `@/components/ui/tooltip`

npm dependencies: @base-ui/react@^1.8.0

A tooltip component that displays additional information when hovering over or focusing on an element.
Built on top of [Base UI Tooltip](https://base-ui.com/react/components/tooltip),
it follows WAI-ARIA design patterns and provides a consistent way to show supplementary information.

### Features

- Accessible tooltip implementation
- Customizable open and close delay
- Multiple positioning options
- Keyboard navigation support
- Screen reader announcements
- Custom content support
- Controlled and uncontrolled modes
- Focus management
- Hover and focus interactions
- Popover-coloured surface with a subtle border and an arrow
- Inline keyboard shortcuts with `Kbd`
- Requires a `TooltipProvider` ancestor (typically once at the app root)

### Usage

`Tooltip` no longer renders its own `TooltipProvider`. Wrap your application (or the relevant subtree) in a single
`TooltipProvider`; it defaults to `delay={0}`.

Pass the trigger element with the `render` prop (Base UI has no `asChild`):
`<TooltipTrigger render={<Button variant="outline" />}>Save draft</TooltipTrigger>`.

```tsx
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from '@/components/ui/tooltip'
import { Button } from '@/components/ui/button'
import { Kbd } from '@/components/ui/kbd'
import { SaveIcon } from 'lucide-react'

// Basic usage
export function BasicTooltip() {
  return (
    <TooltipProvider>
      <Tooltip>
        <TooltipTrigger render={<Button variant="outline" />}>Save draft</TooltipTrigger>
        <TooltipContent>
          <p>Drafts are kept for 30 days</p>
        </TooltipContent>
      </Tooltip>
    </TooltipProvider>
  )
}

// With custom delay (per trigger, or for all tooltips via TooltipProvider)
export function DelayedTooltip() {
  return (
    <Tooltip>
      <TooltipTrigger delay={1000} render={<Button variant="outline" />}>Print</TooltipTrigger>
      <TooltipContent>
        <p>Prints the case summary</p>
      </TooltipContent>
    </Tooltip>
  )
}

// With keyboard shortcut
export function ShortcutTooltip() {
  return (
    <Tooltip>
      <TooltipTrigger render={<Button variant="outline" size="icon-sm" aria-label="Save" />}>
          <SaveIcon />
        </TooltipTrigger>
      <TooltipContent side="bottom">
        Save changes <Kbd>⌘S</Kbd>
      </TooltipContent>
    </Tooltip>
  )
}

// With rich content
export function RichTooltip() {
  return (
    <TooltipProvider>
      <Tooltip>
        <TooltipTrigger render={<Button variant="outline" />}>Sofia Berg</TooltipTrigger>
        <TooltipContent>
          <div className="space-y-2">
            <p className="font-medium">Sofia Berg</p>
            <p className="text-muted-foreground">Case handler, building permits</p>
          </div>
        </TooltipContent>
      </Tooltip>
    </TooltipProvider>
  )
}
```

#### Default Tooltip

A short hint on an outline button.

#### With Icon

A case toolbar of icon-only buttons. Each has an `aria-label`, and the tooltip shows the same text to sighted users.

#### Custom Delay

`delay` per trigger (or for all tooltips on `TooltipProvider`). The provider defaults to `0`.

#### Rich Content

Several lines of content – the name, role and availability of each handler on a case.

#### Plain Tooltip

A plain-text trigger inside running text that explains an abbreviation. Long content wraps at `max-w-xs`.

#### Sides

Place the tooltip with `side`: `top`, `right`, `bottom` or `left`.

#### With Keyboard Shortcut

`Kbd` and `KbdGroup` inside the content get tooltip-specific styling. Mirror the shortcut in `aria-keyshortcuts`.

#### Disabled Button

A `disabled` button can't be focused or hovered, so its tooltip never shows. Use `aria-disabled="true"` instead: the button
stays focusable, the tooltip explains why the action is unavailable, and the click handler does nothing.

#### Field Hint

A small info button next to a field label, with guidance on where to find the value.

### Props


#### TooltipProvider
- `delay` - Delay in ms before tooltips open (default `0`)
- `closeDelay` - Delay in ms before tooltips close
- `timeout` - Time in ms during which moving to another trigger opens its tooltip instantly

#### Tooltip
- `open` / `defaultOpen` / `onOpenChange` - Open state
- `disabled` - Stops the tooltip from opening

#### TooltipTrigger
- `render` - The element to render as the trigger, e.g. `render={<Button variant="outline" />}` (replaces `asChild`)
- `delay` / `closeDelay` - Override the provider delays for this trigger
- `closeOnClick` - Whether clicking the trigger closes the tooltip (default `true`)

#### TooltipContent
- `side` - `'top' | 'right' | 'bottom' | 'left' | 'inline-start' | 'inline-end'` (default `'top'`)
- `sideOffset` - Distance from the trigger (default `4`)
- `align` / `alignOffset` - Alignment relative to the trigger
- `className` - Additional CSS classes

### Accessibility

The Tooltip component follows WAI-ARIA guidelines for tooltips:

- Uses `role="tooltip"` for proper semantic meaning
- Manages focus appropriately
- Supports keyboard navigation
- Announces content to screen readers
- Provides sufficient contrast for visibility
- Maintains proper timing for display

### Best Practices

1. Keep tooltip content concise and helpful
2. Use tooltips sparingly to avoid overwhelming users
3. Ensure tooltip content adds value beyond what's visible
4. Consider mobile users and touch interactions
5. Test with keyboard navigation and screen readers
6. Maintain appropriate delay duration for user experience
7. Use consistent styling across your application

## Source

File: components/ui/tooltip.tsx

```tsx
'use client'

import { Tooltip as TooltipPrimitive } from '@base-ui/react/tooltip'
import { cn } from '@/lib/utils'

function TooltipProvider({ delay = 0, ...props }: TooltipPrimitive.Provider.Props) {
	return <TooltipPrimitive.Provider data-slot="tooltip-provider" delay={delay} {...props} />
}

function Tooltip({ ...props }: TooltipPrimitive.Root.Props) {
	return <TooltipPrimitive.Root data-slot="tooltip" {...props} />
}

function TooltipTrigger({ className, ...props }: TooltipPrimitive.Trigger.Props) {
	return (
		<TooltipPrimitive.Trigger
			data-slot="tooltip-trigger"
			className={cn('focus-visible:ring-3 focus-visible:ring-ring focus-visible:outline-hidden', className)}
			{...props}
		/>
	)
}

function TooltipContent({
	className,
	side = 'top',
	sideOffset = 4,
	align = 'center',
	alignOffset = 0,
	children,
	...props
}: TooltipPrimitive.Popup.Props &
	Pick<TooltipPrimitive.Positioner.Props, 'align' | 'alignOffset' | 'side' | 'sideOffset'>) {
	return (
		<TooltipPrimitive.Portal>
			<TooltipPrimitive.Positioner
				align={align}
				alignOffset={alignOffset}
				side={side}
				sideOffset={sideOffset}
				className="isolate z-50"
			>
				<TooltipPrimitive.Popup
					data-slot="tooltip-content"
					className={cn(
						'z-50 inline-flex w-fit max-w-xs origin-(--transform-origin) items-center gap-1.5 rounded-md bg-popover px-3 py-1.5 text-xs text-popover-foreground ring-1 ring-border has-data-[slot=kbd]:pr-1.5 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-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-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 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',
						className,
					)}
					{...props}
				>
					{children}
					<TooltipPrimitive.Arrow className="z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px] bg-popover fill-popover data-[side=bottom]:top-1 data-[side=inline-end]:top-1/2! data-[side=inline-end]:-left-1 data-[side=inline-end]:-translate-y-1/2 data-[side=inline-start]:top-1/2! data-[side=inline-start]:-right-1 data-[side=inline-start]:-translate-y-1/2 data-[side=left]:top-1/2! data-[side=left]:-right-1 data-[side=left]:-translate-y-1/2 data-[side=right]:top-1/2! data-[side=right]:-left-1 data-[side=right]:-translate-y-1/2 data-[side=top]:-bottom-2.5" />
				</TooltipPrimitive.Popup>
			</TooltipPrimitive.Positioner>
		</TooltipPrimitive.Portal>
	)
}

export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger }
```