Description

</div>
  );
}
```

### Source: ui/textarea.tsx

```tsx
import * 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-md border border-input bg-surface px-2.5 py-1.5 text-base text-fg shadow-sm",
        "placeholder:text-fg-subtle",
        "transition-[border-color,box-shadow] duration-(--dx-motion-fast) ease-out",
        "outline-none hover:border-border-strong focus-visible:border-accent focus-visible:ring-3 focus-visible:ring-accent/20",
        "aria-invalid:border-danger aria-invalid:focus-visible:ring-danger/20",
        "disabled:cursor-not-allowed disabled:bg-muted disabled:text-fg-disabled",
        className,
      )}
      {...props}
    />
  );
}

export { Textarea };
```

## label

Form label that dims with a disabled peer.

Install: `curl -fsSL https://ui.digitexa.com/dx.mjs | node --input-type=module - add label`
Also adds: utils, theme
npm: @radix-ui/react-label@^2.1.17

```tsx
import { Label } from "@/components/ui/label";
```

### Example

```tsx
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";

export default function Demo() {
  return (
    <div className="flex max-w-sm flex-col gap-1.5">
      <Label htmlFor="label-demo">Project name</Label>
      <Input id="label-demo" placeholder="Website redesign" />
    </div>
  );
}
```

### Source: ui/label.tsx

```tsx
"use client";

import * as React from "react";
import * as LabelPrimitive from "@radix-ui/react-label";

import { cn } from "@/lib/utils";

function Label({ className, ...props }: React.ComponentProps<typeof LabelPrimitive.Root>) {
  return (
    <LabelPrimitive.Root
      data-slot="label"
      className={cn(
        "inline-flex items-center gap-1.5 text-sm font-medium text-fg select-none",
        "peer-disabled:cursor-not-allowed peer-disabled:opacity-60",
        className,
      )}
      {...props}
    />
  );
}

export { Label };
```

## checkbox

Checked, unchecked and indeterminate.

Install: `curl -fsSL https://ui.digitexa.com/dx.mjs | node --input-type=module - add checkbox`
Also adds: utils, theme
npm: @radix-ui/react-checkbox@^1.4.1 lucide-react@^1.61.0

```tsx
import { Checkbox } from "@/components/ui/checkbox";
```

### Example

```tsx
import * as React from "react";
import { Checkbox } from "@/components/ui/checkbox";
import { Label } from "@/components/ui/label";

export default function Demo() {
  const [all, setAll] = React.useState<boolean | "indeterminate">("indeterminate");
  return (
    <div className="flex flex-col gap-2.5">
      <div className="flex items-center gap-2">
        <Checkbox id="cb-all" checked={all} onCheckedChange={setAll} />
        <Label htmlFor="cb-all">Select all (indeterminate)</Label>
      </div>
      <div className="flex items-center gap-2">
        <Checkbox id="cb-1" defaultChecked />
        <Label htmlFor="cb-1">Email me about mentions</Label>
      </div>
      <div className="flex items-center gap-2">
        <Checkbox id="cb-2" disabled />
        <Label htmlFor="cb-2">Disabled</Label>
      </div>
    </div>
  );
}
```

### Source: ui/checkbox.tsx

```tsx
"use client";

import * as React from "react";
import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
import { CheckIcon, MinusIcon } from "lucide-react";

import { cn } from "@/lib/utils";

function Checkbox({ className, ...props }: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
  return (
    <CheckboxPrimitive.Root
      data-slot="checkbox"
      className={cn(
        "peer grid size-4 shrink-0 place-items-center rounded-sm border border-input bg-surface shadow-sm",
        "transition-[background-color,border-color] duration-(--dx-motion-fast)",
        "hover:border-border-strong",
        "data-[state=checked]:border-accent data-[state=checked]:bg-accent data-[state=checked]:text-accent-fg",
        "data-[state=indeterminate]:border-accent data-[state=indeterminate]:bg-accent data-[state=indeterminate]:text-accent-fg",
        "aria-invalid:border-danger disabled:opacity-50",
        className,
      )}
      {...props}
    >
      <CheckboxPrimitive.Indicator className="grid place-items-center">
        {props.checked === "indeterminate" ? (
          <MinusIcon className="size-3" strokeWidth={3} />
        ) : (
          <CheckIcon className="size-3" strokeWidth={3} />
        )}
      </CheckboxPrimitive.Indicator>
    </CheckboxPrimitive.Root>
  );
}

export { Checkbox };
```

## switch

On/off toggle.

Install: `curl -fsSL https://ui.digitexa.com/dx.mjs | node --input-type=module - add switch`
Also adds: utils, theme
npm: @radix-ui/react-switch@^1.4.1

```tsx
import { Switch } from "@/components/ui/switch";
```

### Example

```tsx
import { Label } from "@/components/ui/label";
import { Switch } from "@/components/ui/switch";

export default function Demo() {
  return (
    <div className="flex flex-col gap-2.5">
      <div className="flex items-center gap-2">
        <Switch id="sw-1" defaultChecked />
        <Label htmlFor="sw-1">Show completed tasks</Label>
      </div>
      <div className="flex items-center gap-2">
        <Switch id="sw-2" disabled />
        <Label htmlFor="sw-2">Disabled</Label>
      </div>
    </div>
  );
}
```

### Source: ui/switch.tsx

```tsx
"use client";

import * as React from "react";
import * as SwitchPrimitive from "@radix-ui/react-switch";

import { cn } from "@/lib/utils";

function Switch({ className, ...props }: React.ComponentProps<typeof SwitchPrimitive.Root>) {
  return (
    <SwitchPrimitive.Root
      data-slot="switch"
      className={cn(
        "peer inline-flex h-4.5 w-8 shrink-0 items-center rounded-full border border-transparent p-px",
        "bg-border-strong transition-colors duration-(--dx-motion-fast)",
        "data-[state=checked]:bg-accent disabled:opacity-50",
        className,
      )}
      {...props}
    >
      <SwitchPrimitive.Thumb
        className={cn(
          "block size-3.5 rounded-full bg-surface shadow-sm",
          "transition-transform duration-(--dx-motion) ease-out data-[state=checked]:translate-x-3.5",
        )}
      />
    </SwitchPrimitive.Root>
  );
}

export { Switch };
```

## radio-group

Radio buttons and selectable cards (RadioCard) for visual choices.

Install: `curl -fsSL https://ui.digitexa.com/dx.mjs | node --input-type=module - add radio-group`
Also adds: utils, theme
npm: @radix-ui/react-radio-group@^1.5.1 lucide-react@^1.61.0

```tsx
import { RadioGroup, RadioGroupItem, RadioCard } from "@/components/ui/radio-group";
```

### Example

```tsx
import { ArrowRightIcon, LayoutGridIcon, ListIcon } from "lucide-react";
import { Label } from "@/components/ui/label";
import { RadioCard, RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";

export default function Demo() {
  return (
    <div className="flex flex-col gap-5">
      <RadioGroup defaultValue="week" aria-label="Digest frequency">
        {[
          ["day", "Every day"],
          ["week", "Every week"],
          ["never", "Never"],
        ].map(([value, label]) => (
          <div key={value} className="flex items-center gap-2">
            <RadioGroupItem id={`freq-${value}`} value={value} />
            <Label htmlFor={`freq-${value}`}>{label}</Label>
          </div>
        ))}
      </RadioGroup>
      <RadioGroup defaultValue="board" aria-label="Default view" className="max-w-md grid-cols-3">
        {[
          ["board", "Board", LayoutGridIcon],
          ["list", "List", ListIcon],
          ["timeline", "Timeline", ArrowRightIcon],
        ].map(([value, label, Icon]) => {
          const I = Icon as typeof ListIcon;
          return (
            <RadioCard key={value as string} value={value as string} className="p-3">
              <I className="size-4 text-fg-subtle" />
              <span className="font-medium">{label as string}</span>
            </RadioCard>
          );
        })}
      </RadioGroup>
    </div>
  );
}
```

### Source: ui/radio-group.tsx

```tsx
"use client";

import * as React from "react";
import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
import { CheckIcon } from "lucide-react";

import { cn } from "@/lib/utils";

function RadioGroup({ className, ...props }: React.ComponentProps<typeof RadioGroupPrimitive.Root>) {
  return <RadioGroupPrimitive.Root data-slot="radio-group" className={cn("grid gap-2", className)} {...props} />;
}

/** Classic radio dot; pair with <Label htmlFor>. */
function RadioGroupItem({ className, ...props }: React.ComponentProps<typeof RadioGroupPrimitive.Item>) {
  return (
    <RadioGroupPrimitive.Item
      data-slot="radio-group-item"
      className={cn(
        "peer grid size-4 shrink-0 place-items-center rounded-full border border-input bg-surface shadow-sm",
        "hover:border-border-strong data-[state=checked]:border-accent disabled:opacity-50",
        className,
      )}
      {...props}
    >
      <RadioGroupPrimitive.Indicator className="size-2 rounded-full bg-accent" />
    </RadioGroupPrimitive.Item>
  );
}

/** A whole card is the radio: <RadioCard value="dark">…preview…</RadioCard>. Shows a check when selected. */
function RadioCard({ className, children, ...props }: React.ComponentProps<typeof RadioGroupPrimitive.Item>) {
  return (
    <RadioGroupPrimitive.Item
      data-slot="radio-card"
      className={cn(
        "group/card relative flex flex-col gap-2 rounded-lg border border-border bg-surface p-2 text-left shadow-sm",
        "transition-[border-color,box-shadow] duration-(--dx-motion-fast)",
        "hover:border-border-strong disabled:opacity-50",
        "data-[state=checked]:border-accent data-[state=checked]:ring-3 data-[state=checked]:ring-accent/15",
        className,
      )}
      {...props}
    >
      {children}
      <span
        aria-hidden
        className="absolute right-2.5 bottom-2.5 grid size-4 place-items-center rounded-full border border-input group-data-[state=checked]/card:border-accent group-data-[state=checked]/card:bg-accent"
      >
        <CheckIcon className="hidden size-2.5 text-accent-fg group-data-[state=checked]/card:block" strokeWidth={3.5} />
      </span>
    </RadioGroupPrimitive.Item>
  );
}

export { RadioGroup, RadioGroupItem, RadioCard };
```

## select

Accessible single select with groups and labels.

Install: `curl -fsSL https://ui.digitexa.com/dx.mjs | node --input-type=module - add select`
Also adds: utils, theme
npm: @radix-ui/react-select@^2.4.1 lucide-react@^1.61.0

```tsx
import { Select, SelectGroup, SelectValue, SelectTrigger, SelectContent, SelectItem, SelectLabel, SelectSeparator } from "@/components/ui/select";
```

### Example

```tsx
import * as React from "react";
import { Label } from "@/components/ui/label";
import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectTrigger, SelectValue } from "@/components/ui/select";
import { StatusIcon, statusIconLabels } from "@/components/ui/status-icon";

const statuses = ["backlog", "todo", "progress", "review", "done"] as const;

function Row({ label, children }: { label: string; children: React.ReactNode }) {
  return (
    <div className="flex flex-wrap items-center gap-2">
      <span className="w-16 shrink-0 text-2xs font-medium tracking-wide text-fg-subtle uppercase">{label}</span>
      {children}
    </div>
  );
}

export default function Demo() {
  return (
    <div className="flex max-w-56 flex-col gap-1.5">
      <Label htmlFor="status-select">Status</Label>
      <Select defaultValue="progress">
        <SelectTrigger id="status-select">
          <SelectValue placeholder="Pick a status" />
        </SelectTrigger>
        <SelectContent>
          <SelectGroup>
            <SelectLabel>Status</SelectLabel>
            {statuses.map((s) => (
              <SelectItem key={s} value={s}>
                <StatusIcon status={s} label="" />
                {statusIconLabels[s]}
              </SelectItem>
            ))}
          </SelectGroup>
        </SelectContent>
      </Select>
    </div>
  );
}
```

### Source: ui/select.tsx

```tsx
"use client";

import * as React from "react";
import * as SelectPrimitive from "@radix-ui/react-select";
import { CheckIcon, ChevronDownIcon } from "lucide-react";

import { cn } from "@/lib/utils";

const Select = SelectPrimitive.Root;
const SelectGroup = SelectPrimitive.Group;
const SelectValue = SelectPrimitive.Value;

type SelectTriggerProps = React.ComponentProps<typeof SelectPrimitive.Trigger> & { size?: "sm" | "md" };

function SelectTrigger({ className, size = "md", children, ...props }: SelectTriggerProps) {
  return (
    <SelectPrimitive.Trigger
      data-slot="select-trigger"
      className={cn(
        "flex w-full items-center justify-between gap-2 rounded-md border border-input bg-surface text-fg shadow-sm",
        "outline-none hover:border-border-strong focus-visible:border-accent focus-visible:ring-3 focus-visible:ring-accent/20",
        "data-placeholder:text-fg-subtle aria-invalid:border-danger disabled:opacity-50",
        "[&>span]:truncate [&_svg]:size-3.5 [&_svg]:shrink-0",
        size === "sm" ? "h-(--dx-control-sm) px-2 text-xs" : "h-(--dx-control-md) px-2.5 text-base",
        className,
      )}
      {...props}
    >
      {children}
      <SelectPrimitive.Icon asChild>
        <ChevronDownIcon className="text-fg-subtle" />
      </SelectPrimitive.Icon>
    </SelectPrimitive.Trigger>
  );
}

function SelectContent({ className, children, position = "popper", ...props }: React.ComponentProps<typeof SelectPrimitive.Content>) {
  return (
    <SelectPrimitive.Portal>
      <SelectPrimitive.Content
        data-slot="select-content"
        position={position}
        sideOffset={4}
        className={cn(
          "dx-float relative z-(--dx-z-dropdown) max-h-(--radix-select-content-available-height) min-w-(--radix-select-trigger-width) overflow-hidden",
          "rounded-lg border border-border bg-surface-raised text-fg shadow-lg",
          className,
        )}
        {...props}
      >
        <SelectPrimitive.Viewport className="p-1">{children}</SelectPrimitive.Viewport>
      </SelectPrimitive.Content>
    </SelectPrimitive.Portal>
  );
}

function SelectItem({ className, children, ...props }: React.ComponentProps<typeof SelectPrimitive.Item>) {
  return (
    <SelectPrimitive.Item
      data-slot="select-item"
      className={cn(
        "relative flex h-(--dx-control-md) cursor-pointer items-center gap-2 rounded-sm pr-7 pl-2 text-base outline-none select-none",
        "data-highlighted:bg-muted data-disabled:pointer-events-none data-disabled:text-fg-disabled",
        "[&_svg]:size-3.5 [&_svg]:shrink-0",
        className,
      )}
      {...props}
    >
      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
      <SelectPrimitive.ItemIndicator className="absolute right-2 grid place-items-center">
        <CheckIcon />
      </SelectPrimitive.ItemIndicator>
    </SelectPrimitive.Item>
  );
}

function SelectLabel({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.Label>) {
  return <SelectPrimitive.Label className={cn("px-2 pt-1.5 pb-1 text-2xs font-medium tracking-wide text-fg-subtle uppercase", className)} {...props} />;
}

function SelectSeparator({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.Separator>) {
  return <SelectPrimitive.Separator className={cn("-mx-1 my-1 h-px bg-border", className)} {...props} />;
}

export { Select, SelectGroup, SelectValue, SelectTrigger, SelectContent, SelectItem, SelectLabel, SelectSeparator };
```

## toggle-group

Segmented control with arrow-key navigation.

Install: `curl -fsSL https://ui.digitexa.com/dx.mjs | node --input-type=module - add toggle-group`
Also adds: utils, theme
npm: @radix-ui/react-toggle-group@^1.2.1

```tsx
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
```

### Example

```tsx
import { BoldIcon, ItalicIcon, LayoutGridIcon, ListIcon, UnderlineIcon } from "lucide-react";
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";

export default function Demo() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <ToggleGroup type="single" defaultValue="board" aria-label="View">
        <ToggleGroupItem value="board">
          <LayoutGridIcon /> Board
        </ToggleGroupItem>
        <ToggleGroupItem value="list">
          <ListIcon /> List
        </ToggleGroupItem>
      </ToggleGroup>
      <ToggleGroup type="multiple" defaultValue={["bold"]} aria-label="Formatting">
        <ToggleGroupItem value="bold" aria-label="Bold">
          <BoldIcon />
        </ToggleGroupItem>
        <ToggleGroupItem value="italic" aria-label="Italic">
          <ItalicIcon />
        </ToggleGroupItem>
        <ToggleGroupItem value="underline" aria-label="Underline">
          <UnderlineIcon />
        </ToggleGroupItem>
      </ToggleGroup>
    </div>
  );
}
```

### Source: ui/toggle-group.tsx

```tsx
"use client";

import * as React from "react";
import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";

import { cn } from "@/lib/utils";

/** Segmented control. Arrow keys move between items; one tab stop for the whole group. */
function ToggleGroup({ className, ...props }: React.ComponentProps<typeof ToggleGroupPrimitive.Root>) {
  return (
    <ToggleGroupPrimitive.Root
      data-slot="toggle-group"
      className={cn("inline-flex h-(--dx-control-md) items-center gap-0.5 rounded-md border border-border bg-bg-subtle p-0.5", className)}
      {...props}
    />
  );
}

function ToggleGroupItem({ className, ...props }: React.ComponentProps<typeof ToggleGroupPrimitive.Item>) {
  return (
    <ToggleGroupPrimitive.Item
      data-slot="toggle-group-item"
      className={cn(
        "inline-flex h-full min-w-6 items-center justify-center gap-1.5 rounded-sm px-2 text-sm font-medium text-fg-subtle",
        "hover:text-fg disabled:opacity-50 [&_svg]:size-3.5 [&_svg]:shrink-0",
        "data-[state=on]:bg-surface data-[state=on]:text-fg data-[state=on]:shadow-sm",
        className,
      )}
      {...props}
    />
  );
}

export { ToggleGroup, ToggleGroupItem };
```

## tabs

Segmented or underline tabs.

Install: `curl -fsSL https://ui.digitexa.com/dx.mjs | node --input-type=module - add tabs`
Also adds: utils, theme
npm: @radix-ui/react-tabs@^1.2.1

```tsx
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
```

### Example

```tsx
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";

export default function Demo() {
  return (
    <div className="flex flex-col gap-6">
      <Tabs defaultValue="board">
        <TabsList>
          <TabsTrigger value="board">Board</TabsTrigger>
          <TabsTrigger value="list">List</TabsTrigger>
          <TabsTrigger value="timeline">Timeline</TabsTrigger>
        </TabsList>
      </Tabs>
      <Tabs defaultValue="overview">
        <TabsList variant="underline">
          <TabsTrigger value="overview">Overview</TabsTrigger>
          <TabsTrigger value="activity">Activity</TabsTrigger>
          <TabsTrigger value="files">Files</TabsTrigger>
        </TabsList>
        <TabsContent value="overview" className="pt-3 text-sm text-fg-muted">
          Underline tabs for page-level sections.
        </TabsContent>
        <TabsContent value="activity" className="pt-3 text-sm text-fg-muted">
          Activity feed goes here.
        </TabsContent>
        <TabsContent value="files" className="pt-3 text-sm text-fg-muted">
          Files go here.
        </TabsContent>
      </Tabs>
    </div>
  );
}
```

### Source: ui/tabs.tsx

```tsx
"use client";

import * as React from "react";
import * as TabsPrimitive from "@radix-ui/react-tabs";

import { cn } from "@/lib/utils";

const Tabs = TabsPrimitive.Root;

type TabsListProps = React.ComponentProps<typeof TabsPrimitive.List> & {
  /** "segmented" = pill switcher, "underline" = page-level tabs */
  variant?: "segmented" | "underline";
};

function TabsList({ className, variant = "segmented", ...props }: TabsListProps) {
  return (
    <TabsPrimitive.List
      data-slot="tabs-list"
      data-variant={variant}
      className={cn(
        "group/tabs inline-flex items-center",
        variant === "segmented" && "h-(--dx-control-md) gap-0.5 rounded-md border border-border bg-bg-subtle p-0.5",
        variant === "underline" && "h-(--dx-control-lg) gap-4 border-b border-border",
        className,
      )}
      {...props}
    />
  );
}

function TabsTrigger({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
  return (
    <TabsPrimitive.Trigger
      data-slot="tabs-trigger"
      className={cn(
        "inline-flex h-full items-center gap-1.5 text-base font-medium whitespace-nowrap text-fg-muted outline-none",
        "hover:text-fg disabled:opacity-50 [&_svg]:size-3.5",
        "group-data-[variant=segmented]/tabs:rounded-sm group-data-[variant=segmented]/tabs:px-2.5",
        "group-data-[variant=segmented]/tabs:data-[state=active]:bg-surface group-data-[variant=segmented]/tabs:data-[state=active]:text-fg group-data-[variant=segmented]/tabs:data-[state=active]:shadow-sm",
        "group-data-[variant=underline]/tabs:-mb-px group-data-[variant=underline]/tabs:border-b-2 group-data-[variant=underline]/tabs:border-transparent",
        "group-data-[variant=underline]/tabs:data-[state=active]:border-fg group-data-[variant=underline]/tabs:data-[state=active]:text-fg",
        className,
      )}
      {...props}
    />
  );
}

function TabsContent({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Content>) {
  return <TabsPrimitive.Content data-slot="tabs-content" className={cn("outline-none", className)} {...props} />;
}

export { Tabs, TabsList, TabsTrigger, TabsContent };
```

## badge

Semantic and work status variants, StatusBadge.

Install: `curl -fsSL https://ui.digitexa.com/dx.mjs | node --input-type=module - add badge`
Also adds: utils, theme
npm: class-variance-authority@^0.7.1

```tsx
import { Badge, StatusBadge, badgeVariants, statusLabels } from "@/components/ui/badge";
```

### Example

```tsx
import * as React from "react";
import { Badge, StatusBadge } from "@/components/ui/badge";

const statuses = ["backlog", "todo", "progress", "review", "done"] as const;

export default function Demo() {
  return (
    <div className="flex flex-col gap-3">
      <Row label="Status">
        {statuses.map((s) => (
          <StatusBadge key={s} status={s} />
        ))}
      </Row>
      <Row label="Semantic">
        <Badge>Neutral</Badge>
        <Badge variant="outline">Outline</Badge>
        <Badge variant="accent">Accent</Badge>
        <Badge variant="success">Success</Badge>
        <Badge variant="warning">Warning</Badge>
        <Badge variant="danger" dot>
          At risk
        </Badge>
        <Badge variant="info">Info</Badge>
      </Row>
    </div>
  );
}
```

### Source: ui/badge.tsx

```tsx
import * as React from "react";
import { cva, type VariantProps } from "class-variance-authority";

import { cn } from "@/lib/utils";

const badgeVariants = cva(
  [
    "inline-flex h-(--dx-control-xs) shrink-0 items-center gap-1 whitespace-nowrap rounded-sm px-1.5 text-xs font-medium",
    "[&_svg]:size-3 [&_svg]:shrink-0",
  ],
  {
    variants: {
      variant: {
        neutral: "bg-muted text-fg-muted",
        outline: "border border-border text-fg-muted",
        accent: "bg-accent-subtle text-accent-subtle-fg",
        success: "bg-success-subtle text-success-fg",
        warning: "bg-warning-subtle text-warning-fg",
        danger: "bg-danger-subtle text-danger-fg-subtle",
        info: "bg-info-subtle text-info-fg",
        // work statuses
        backlog: "bg-status-backlog-subtle text-status-backlog-fg",
        todo: "bg-status-todo-subtle text-status-todo-fg",
        progress: "bg-status-progress-subtle text-status-progress-fg",
        review: "bg-status-review-subtle text-status-review-fg",
        done: "bg-status-done-subtle text-status-done-fg",
      },
    },
    defaultVariants: { variant: "neutral" },
  },
);

const statusLabels = {
  backlog: "Backlog",
  todo: "To do",
  progress: "In progress",
  review: "In review",
  done: "Done",
} as const;

type Status = keyof typeof statusLabels;

const dotColors: Partial<Record<NonNullable<VariantProps<typeof badgeVariants>["variant"]>, string>> = {
  accent: "bg-accent",
  success: "bg-success",
  warning: "bg-warning",
  danger: "bg-danger",
  info: "bg-info",
  backlog: "bg-status-backlog",
  todo: "bg-status-todo",
  progress: "bg-status-progress",
  review: "bg-status-review",
  done: "bg-status-done",
};

type BadgeProps = React.ComponentProps<"span"> &
  VariantProps<typeof badgeVariants> & {
    /** Adds a small colored dot on the left. */
    dot?: boolean;
  };

function Badge({ className, variant, dot = false, children, ...props }: BadgeProps) {
  return (
    <span data-slot="badge" className={cn(badgeVariants({ variant }), className)} {...props}>
      {dot && <span aria-hidden className={cn("size-1.5 rounded-full", dotColors[variant ?? "neutral"] ?? "bg-current")} />}
      {children}
    </span>
  );
}

/** Status badge: <StatusBadge status="review" /> — the label is filled in for you. */
function StatusBadge({ status, children, ...props }: Omit<BadgeProps, "variant"> & { status: Status }) {
  return (
    <Badge variant={status} dot {...props}>
      {children ?? statusLabels[status]}
    </Badge>
  );
}

export { Badge, StatusBadge, badgeVariants, statusLabels, type BadgeProps, type Status };
```

## status-icon

Status glyphs that show progress: backlog, to do, in progress, review, done.

Install: `curl -fsSL https://ui.digitexa.com/dx.mjs | node --input-type=module - add status-icon`
Also adds: utils, theme

```tsx
import { StatusIcon, labels as statusIconLabels } from "@/components/ui/status-icon";
```

### Example

```tsx
import * as React from "react";
import { StatusIcon, statusIconLabels } from "@/components/ui/status-icon";

const statuses = ["backlog", "todo", "progress", "review", "done"] as const;

export default function Demo() {
  return (
    <div className="flex flex-col gap-2">
      {statuses.map((s) => (
        <div key={s} className="flex items-center gap-2">
          <StatusIcon status={s} label="" />
          {statusIconLabels[s]}
        </div>
      ))}
    </div>
  );
}
```

### Source: ui/status-icon.tsx

```tsx
import * as React from "react";

import { cn } from "@/lib/utils";

type Status = "backlog" | "todo" | "progress" | "review" | "done";

const labels: Record<Status, string> = {
  backlog: "Backlog",
  todo: "To do",
  progress: "In progress",
  review: "In review",
  done: "Done",
};

const colors: Record<Status, string> = {
  backlog: "text-status-backlog",
  todo: "text-status-todo",
  progress: "text-status-progress",
  review: "text-status-review",
  done: "text-status-done",
};

// Pie fill per status: the icon itself shows how far along the work is.
const fill: Record<Status, number> = { backlog: 0, todo: 0, progress: 0.5, review: 0.75, done: 1 };

type StatusIconProps = Omit<React.ComponentProps<"svg">, "children"> & {
  status: Status;
  /** Visible label for screen readers; pass "" when a text label sits next to the icon. */
  label?: string;
};

/** Small circular status glyph: dashed for backlog, ring for to do, pie for progress/review, check for done. */
function StatusIcon({ status, label, className, ...props }: StatusIconProps) {
  const name = label ?? labels[status];
  const f = fill[status];
  return (
    <svg
      data-slot="status-icon"
      viewBox="0 0 16 16"
      fill="none"
      role={name ? "img" : undefined}
      aria-label={name || undefined}
      aria-hidden={name ? undefined : true}
      className={cn("size-3.5 shrink-0", colors[status], className)}
      {...props}
    >
      {status === "done" ? (
        <>
          <circle cx="8" cy="8" r="7" fill="currentColor" />
          <path d="M5 8.2 7 10.2 11 6" stroke="var(--dx-surface)" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
        </>
      ) : (
        <>
          <circle
            cx="8"
            cy="8"
            r="6.25"
            stroke="currentColor"
            strokeWidth="1.5"
            strokeDasharray={status === "backlog" ? "1.6 2.3" : undefined}
          />
          {f > 0 && <path d={pie(f) ?? ""} fill="currentColor" />}
        </>
      )}
    </svg>
  );
}

export { StatusIcon, labels as statusIconLabels, type Status as StatusIconStatus };
```

## avatar

Image with initials fallback, stable tint per name, AvatarGroup.

Install: `curl -fsSL https://ui.digitexa.com/dx.mjs | node --input-type=module - add avatar`
Also adds: utils, theme
npm: @radix-ui/react-avatar@^1.3.1 class-variance-authority@^0.7.1

```tsx
import { Avatar, AvatarGroup, avatarVariants } from "@/components/ui/avatar";
```

### Example

```tsx
import * as React from "react";
import { Avatar, AvatarGroup } from "@/components/ui/avatar";

const statuses = ["backlog", "todo", "progress", "review", "done"] as const;

export default function Demo() {
  const people = ["Ada Lovelace", "Grace Hopper", "Alan Turing", "Katherine Johnson", "Linus Torvalds", "Margaret Hamilton"];
  return (
    <div className="flex flex-col gap-3">
      <Row label="Size">
        <Avatar name="Ada Lovelace" size="xs" />
        <Avatar name="Ada Lovelace" size="sm" />
        <Avatar name="Ada Lovelace" size="md" />
        <Avatar name="Ada Lovelace" size="lg" />
        <Avatar name="Ada Lovelace" size="xl" />
      </Row>
      <Row label="Status">
        <Avatar name="Ada Lovelace" size="lg" status="online" />
        <Avatar name="Grace Hopper" size="lg" status="away" />
        <Avatar name="Alan Turing" size="lg" status="busy" />
        <Avatar name="Linus Torvalds" size="lg" status="offline" />
      </Row>
      <Row label="Group">
        <AvatarGroup max={4}>
          {people.map((p) => (
            <Avatar key={p} name={p} />
          ))}
        </AvatarGroup>
      </Row>
    </div>
  );
}
```

### Source: ui/avatar.tsx

```tsx
"use client";

import * as React from "react";
import * as AvatarPrimitive from "@radix-ui/react-avatar";
import { cva, type VariantProps } from "class-variance-authority";

import { cn } from "@/lib/utils";

const avatarVariants = cva("relative inline-flex shrink-0 overflow-hidden rounded-full bg-muted select-none", {
  variants: {
    size: {
      xs: "size-4 text-[8px]",
      sm: "size-5 text-[9px]",
      md: "size-6 text-2xs",
      lg: "size-8 text-xs",
      xl: "size-10 text-sm",
    },
  },
  defaultVariants: { size: "md" },
});

// Stable tint per name, so the same person always gets the same color.
const tints = ["todo", "progress", "review", "done", "backlog"] as const;
const tintClasses: Record<(typeof tints)[number], string> = {
  todo: "bg-status-todo-subtle text-status-todo-fg",
  progress: "bg-status-progress-subtle text-status-progress-fg",
  review: "bg-status-review-subtle text-status-review-fg",
  done: "bg-status-done-subtle text-status-done-fg",
  backlog: "bg-status-backlog-subtle text-status-backlog-fg",
};

function tintFor(name: string) {
  let h = 0;
  for (const ch of name) h = (h * 31 + ch.charCodeAt(0)) >>> 0;
  return tintClasses[tints[h % tints.length]];
}

function initials(name: string) {
  const parts = name.trim().split(/\s+/);
  return ((parts[0]?.[0] ?? "") + (parts.length > 1 ? parts[parts.length - 1][0] : "")).toUpperCase();
}

const presence = {
  online: { label: "Online", className: "bg-success" },
  away: { label: "Away", className: "bg-warning" },
  busy: { label: "Busy", className: "bg-danger" },
  offline: { label: "Offline", className: "bg-fg-subtle" },
} as const;

type AvatarProps = React.ComponentProps<typeof AvatarPrimitive.Root> &
  VariantProps<typeof avatarVariants> & {
    name: string;
    src?: string;
    /** Presence dot in the bottom-right corner. */
    status?: keyof typeof presence;
  };

/** Overlapping stack: <AvatarGroup max={3}>{people.map(…)}</AvatarGroup> */
function AvatarGroup({ children, max, className, ...props }: React.ComponentProps<"div"> & { max?: number }) {
  const items = React.Children.toArray(children);
  const shown = max ? items.slice(0, max) : items;
  const rest = items.length - shown.length;
  return (
    <div data-slot="avatar-group" className={cn("flex items-center -space-x-1.5 [&>*]:ring-2 [&>*]:ring-surface", className)} {...props}>
      {shown}
      {rest > 0 && (
        <span className="inline-grid size-6 place-items-center rounded-full bg-muted text-2xs font-medium text-fg-muted">+{rest}</span>
      )}
    </div>
  );
}

export { Avatar, AvatarGroup, avatarVariants };
```

## kbd

Keyboard shortcut hint.

Install: `curl -fsSL https://ui.digitexa.com/dx.mjs | node --input-type=module - add kbd`
Also adds: utils, theme

```tsx
import { Kbd } from "@/components/ui/kbd";
```

### Example

```tsx
import { Kbd } from "@/components/ui/kbd";

export default function Demo() {
  return (
    <div className="flex items-center gap-4 text-sm text-fg-muted">
      <span className="flex items-center gap-1">
        Search <Kbd>⌘</Kbd>
        <Kbd>K</Kbd>
      </span>
      <span className="flex items-center gap-1">
        New task <Kbd>C</Kbd>
      </span>
    </div>
  );
}
```

### Source: ui/kbd.tsx

```tsx
import * as React from "react";

import { cn } from "@/lib/utils";

function Kbd({ className, ...props }: React.ComponentProps<"kbd">) {
  return (
    <kbd
      data-slot="kbd"
      className={cn(
        "inline-flex h-4.5 min-w-4.5 items-center justify-center gap-0.5 rounded-sm border border-border bg-bg-subtle px-1",
        "font-sans text-2xs font-medium text-fg-muted",
        className,
      )}
      {...props}
    />
  );
}

export { Kbd };
```

## card

Card with header/content/footer, plus StatGroup and Stat for key numbers.

Install: `curl -fsSL https://ui.digitexa.com/dx.mjs | node --input-type=module - add card`
Also adds: utils, theme

```tsx
import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter, StatGroup, Stat } from "@/components/ui/card";
```

### Example

```tsx
import { ArrowRightIcon } from "lucide-react";
import { Avatar, AvatarGroup } from "@/components/ui/avatar";
import { StatusBadge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Stat, StatGroup } from "@/components/ui/card";
import { Progress } from "@/components/ui/progress";

export default function Demo() {
  return (
    <div className="flex flex-col gap-4">
      <StatGroup>
        <Stat label="Projects" value="6" hint="1 completed" />
        <Stat label="Tasks" value="50" hint="29 open" />
        <Stat label="Completion" value="42%" hint="across all projects" />
        <Stat label="Members" value="8" hint="1 pending invite" />
      </StatGroup>
      <Card className="max-w-sm">
        <CardHeader>
          <div>
            <CardTitle>Website redesign</CardTitle>
            <CardDescription>Due Nov 15 · 9 open tasks</CardDescription>
          </div>
          <StatusBadge status="progress" />
        </CardHeader>
        <CardContent>
          <Progress value={50} label="Website redesign progress" />
        </CardContent>
        <CardFooter>
          <AvatarGroup>
            <Avatar name="Ada Lovelace" />
            <Avatar name="Alan Turing" />
          </AvatarGroup>
          <Button size="sm" variant="ghost" className="ml-auto">
            Open <ArrowRightIcon />
          </Button>
        </CardFooter>
      </Card>
    </div>
  );
}
```

### Source: ui/card.tsx

```tsx
import * as React from "react";

import { cn } from "@/lib/utils";

function Card({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="card"
      className={cn("flex flex-col rounded-lg border border-border bg-surface text-fg shadow-sm", className)}
      {...props}
    />
  );
}

function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
  return <div data-slot="card-header" className={cn("flex items-center justify-between gap-3 px-4 pt-3.5 pb-2", className)} {...props} />;
}

function CardTitle({ className, ...props }: React.ComponentProps<"h3">) {
  return <h3 data-slot="card-title" className={cn("text-md font-semibold", className)} {...props} />;
}

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

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

function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="card-footer"
      className={cn("flex items-center gap-2 border-t border-border px-4 py-2.5", className)}
      {...props}
    />
  );
}

/** A row of key numbers that share borders: <StatGroup><Stat …/><Stat …/></StatGroup> */
function StatGroup({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="stat-group"
      className={cn(
        // 1px gaps over a border-colored background draw the dividers for any column count
        "grid grid-cols-2 gap-px overflow-hidden rounded-lg border border-border bg-border shadow-sm lg:grid-cols-4",
        "[&>*]:bg-surface",
        className,
      )}
      {...props}
    />
  );
}

type StatProps = React.ComponentProps<"div"> & {
  label: React.ReactNode;
  value: React.ReactNode;
  hint?: React.ReactNode;
};

function Stat({ label, value, hint, className, ...props }: StatProps) {
  return (
    <div data-slot="stat" className={cn("flex flex-col gap-1 px-4 py-3.5", className)} {...props}>
      <span className="text-sm text-fg-muted">{label}</span>
      <span className="text-2xl font-semibold tracking-tight tabular-nums">{value}</span>
      {hint && <span className="text-xs text-fg-subtle">{hint}</span>}
    </div>
  );
}

export { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter, StatGroup, Stat };
```

## table

Dense data table with density-aware rows.

Install: `curl -fsSL https://ui.digitexa.com/dx.mjs | node --input-type=module - add table`
Also adds: utils, theme

```tsx
import { Table, TableHeader, TableBody, TableRow, TableHead, TableCell, TableCaption } from "@/components/ui/table";
```

### Example

```tsx
import { Avatar } from "@/components/ui/avatar";
import { StatusBadge } from "@/components/ui/badge";
import { Card } from "@/components/ui/card";
import { Progress } from "@/components/ui/progress";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";

export default function Demo() {
  const rows = [
    { name: "Website redesign", lead: "Ada Lovelace", status: "progress", pct: 50 },
    { name: "Mobile app", lead: "Alan Turing", status: "review", pct: 72 },
    { name: "Brand refresh", lead: "Grace Hopper", status: "done", pct: 100 },
  ] as const;
  return (
    <Card>
      <Table>
        <TableHeader>
          <TableRow className="hover:bg-transparent">
            <TableHead>Project</TableHead>
            <TableHead>Lead</TableHead>
            <TableHead>Status</TableHead>
            <TableHead className="w-40">Progress</TableHead>
          </TableRow>
        </TableHeader>
        <TableBody>
          {rows.map((r) => (
            <TableRow key={r.name}>
              <TableCell className="font-medium">{r.name}</TableCell>
              <TableCell>
                <span className="flex items-center gap-2">
                  <Avatar name={r.lead} size="sm" />
                  {r.lead.split(" ")[0]}
                </span>
              </TableCell>
              <TableCell>
                <StatusBadge status={r.status} />
              </TableCell>
              <TableCell>
                <span className="flex items-center gap-2">
                  <Progress value={r.pct} tone={r.pct === 100 ? "success" : "accent"} label={`${r.name} progress`} />
                  <span className="w-8 text-right text-xs text-fg-muted tabular-nums">{r.pct}%</span>
                </span>
              </TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </Card>
  );
}
```

### Source: ui/table.tsx

```tsx
import * 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 border-collapse text-base", className)} {...props} />
    </div>
  );
}

function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
  return <thead data-slot="table-header" className={cn("[&_tr]:border-b [&_tr]:border-border", 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 TableRow({ className, ...props }: React.ComponentProps<"tr">) {
  return (
    <tr
      data-slot="table-row"
      className={cn("h-(--dx-row-height) border-b border-border transition-colors hover:bg-bg-subtle data-[state=selected]:bg-selected", className)}
      {...props}
    />
  );
}

function TableHead({ className, ...props }: React.ComponentProps<"th">) {
  return (
    <th
      data-slot="table-head"
      className={cn("h-(--dx-control-lg) px-3 text-left align-middle text-sm font-medium whitespace-nowrap text-fg-muted first:pl-4 last:pr-4", className)}
      {...props}
    />
  );
}

function TableCell({ className, ...props }: React.ComponentProps<"td">) {
  return <td data-slot="table-cell" className={cn("px-3 align-middle whitespace-nowrap first:pl-4 last:pr-4", className)} {...props} />;
}

function TableCaption({ className, ...props }: React.ComponentProps<"caption">) {
  return <caption data-slot="table-caption" className={cn("mt-3 text-sm text-fg-muted", className)} {...props} />;
}

export { Table, TableHeader, TableBody, TableRow, TableHead, TableCell, TableCaption };
```

## progress

Thin progress bar with tones.

Install: `curl -fsSL https://ui.digitexa.com/dx.mjs | node --input-type=module - add progress`
Also adds: utils, theme
npm: class-variance-authority@^0.7.1

```tsx
import { Progress } from "@/components/ui/progress";
```

### Example

```tsx
import { Progress } from "@/components/ui/progress";

export default function Demo() {
  return (
    <div className="flex max-w-sm flex-col gap-3">
      <Progress value={50} label="Accent" />
      <Progress value={100} tone="success" label="Success" />
      <Progress value={14} tone="danger" label="Danger" />
      <Progress value={33} tone="neutral" label="Neutral" />
    </div>
  );
}
```

### Source: ui/progress.tsx

```tsx
import * as React from "react";
import { cva, type VariantProps } from "class-variance-authority";

import { cn } from "@/lib/utils";

const fillVariants = cva("h-full rounded-full transition-[width] duration-(--dx-motion-slow) ease-out", {
  variants: {
    tone: {
      accent: "bg-accent",
      success: "bg-success",
      warning: "bg-warning",
      danger: "bg-danger",
      info: "bg-info",
      neutral: "bg-fg-subtle",
    },
  },
  defaultVariants: { tone: "accent" },
});

type ProgressProps = Omit<React.ComponentProps<"div">, "children"> &
  VariantProps<typeof fillVariants> & {
    value: number;
    max?: number;
    /** Accessible name, e.g. "Website redesign progress". */
    label?: string;
  };

function Progress({ value, max = 100, tone, label, className, ...props }: ProgressProps) {
  const pct = Math.max(0, Math.min(100, (value / max) * 100));
  return (
    <div
      data-slot="progress"
      role="progressbar"
      aria-label={label}
      aria-valuemin={0}
      aria-valuemax={max}
      aria-valuenow={value}
      className={cn("h-1.5 w-full overflow-hidden rounded-full bg-muted", className)}
      {...props}
    >
      <div className={fillVariants({ tone })} style={{ width: `${pct}%` }} />
    </div>
  );
}

export { Progress };
```

## meter

Stacked distribution bar for status breakdowns and workload.

Install: `curl -fsSL https://ui.digitexa.com/dx.mjs | node --input-type=module - add meter`
Also adds: utils, theme

```tsx
import { Meter } from "@/components/ui/meter";
```

### Example

```tsx
import { Meter } from "@/components/ui/meter";

export default function Demo() {
  return (
    <div className="flex max-w-md flex-col gap-3">
      <Meter
        label="Tasks by status"
        segments={[
          { label: "Backlog", value: 4, className: "bg-status-backlog" },
          { label: "To do", value: 14, className: "bg-status-todo" },
          { label: "In progress", value: 7, className: "bg-status-progress" },
          { label: "In review", value: 4, className: "bg-status-review" },
          { label: "Done", value: 21, className: "bg-status-done" },
        ]}
      />
      <Meter
        label="Workload"
        max={10}
        className="h-1.5"
        segments={[
          { label: "To do", value: 3, className: "bg-status-todo" },
          { label: "In progress", value: 2, className: "bg-status-progress" },
        ]}
      />
    </div>
  );
}
```

### Source: ui/meter.tsx

```tsx
import * as React from "react";

import { cn } from "@/lib/utils";

type Segment = {
  label: string;
  value: number;
  /** Any background utility, e.g. "bg-status-done". */
  className: string;
};

type MeterProps = Omit<React.ComponentProps<"div">, "children"> & {
  segments: Segment[];
  /** Total the bar represents. Defaults to the sum, so the bar is always full. */
  max?: number;
  label?: string;
};

/** Stacked distribution bar: status breakdowns, workload, capacity. */
function Meter({ segments, max, label, className, ...props }: MeterProps) {
  const total = max ?? segments.reduce((sum, s) => sum + s.value, 0);
  const summary = segments.map((s) => `${s.label} ${s.value}`).join(", ");
  return (
    <div
      data-slot="meter"
      role="img"
      aria-label={label ? `${label}: ${summary}` : summary}
      className={cn("flex h-2 w-full gap-0.5 overflow-hidden rounded-full bg-muted", className)}
      {...props}
    >
      {total > 0 &&
        segments
          .filter((s) => s.value > 0)
          .map((s) => (
            <div
              key={s.label}
              title={`${s.label}: ${s.value}`}
              className={cn("h-full first:rounded-l-full last:rounded-r-full", s.className)}
              style={{ width: `${(s.value / total) * 100}%` }}
            />
          ))}
    </div>
  );
}

export { Meter, type Segment };
```

## separator

Horizontal or vertical rule.

Install: `curl -fsSL https://ui.digitexa.com/dx.mjs | node --input-type=module - add separator`
Also adds: utils, theme

```tsx
import { Separator } from "@/components/ui/separator";
```

### Example

```tsx
import { Separator } from "@/components/ui/separator";

export default function Demo() {
  return (
    <div className="flex max-w-sm flex-col gap-3">
      <span className="font-medium">Website redesign</span>
      <Separator />
      <div className="flex h-4 items-center gap-3 text-sm text-fg-muted">
        Board <Separator orientation="vertical" /> List <Separator orientation="vertical" /> Timeline
      </div>
    </div>
  );
}
```

### Source: ui/separator.tsx

```tsx
import * as React from "react";

import { cn } from "@/lib/utils";

type SeparatorProps = React.ComponentProps<"div"> & {
  orientation?: "horizontal" | "vertical";
  /** Purely visual separators are hidden from assistive tech. */
  decorative?: boolean;
};

function Separator({ className, orientation = "horizontal", decorative = true, ...props }: SeparatorProps) {
  return (
    <div
      data-slot="separator"
      role={decorative ? "none" : "separator"}
      aria-orientation={decorative ? undefined : orientation}
      className={cn("shrink-0 bg-border", orientation === "horizontal" ? "h-px w-full" : "h-full w-px", className)}
      {...props}
    />
  );
}

export { Separator };
```

## skeleton

Loading placeholder with a shimmer.

Install: `curl -fsSL https://ui.digitexa.com/dx.mjs | node --input-type=module - add skeleton`
Also adds: utils, theme

```tsx
import { Skeleton } from "@/components/ui/skeleton";
```

### Example

```tsx
import { Skeleton } from "@/components/ui/skeleton";

export default function Demo() {
  return (
    <div className="flex max-w-sm items-center gap-3">
      <Skeleton className="size-8 rounded-full" />
      <div className="flex flex-1 flex-col gap-2">
        <Skeleton className="h-3 w-3/4" />
        <Skeleton className="h-3 w-1/2" />
      </div>
    </div>
  );
}
```

### Source: ui/skeleton.tsx

```tsx
import * as React from "react";

import { cn } from "@/lib/utils";

function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="skeleton"
      aria-hidden
      className={cn(
        "rounded-md bg-muted",
        "bg-[linear-gradient(90deg,transparent,color-mix(in_oklch,var(--dx-surface)_70%,transparent),transparent)] bg-size-[200%_100%] bg-no-repeat",
        "animate-[dx-shimmer_1.4s_ease-in-out_infinite] motion-reduce:animate-none",
        className,
      )}
      {...props}
    />
  );
}

export { Skeleton };
```

## tooltip

Tooltip with a one-line shorthand.

Install: `curl -fsSL https://ui.digitexa.com/dx.mjs | node --input-type=module - add tooltip`
Also adds: utils, theme
npm: @radix-ui/react-tooltip@^1.4.1

```tsx
import { Tooltip, TooltipProvider, TooltipRoot, TooltipTrigger, TooltipContent } from "@/components/ui/tooltip";
```

### Example

```tsx
import { ArchiveIcon, PlusIcon } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Kbd } from "@/components/ui/kbd";
import { Tooltip } from "@/components/ui/tooltip";

export default function Demo() {
  return (
    <div className="flex gap-2">
      <Tooltip content="Archive project">
        <Button size="icon" aria-label="Archive">
          <ArchiveIcon />
        </Button>
      </Tooltip>
      <Tooltip
        content={
          <>
            New task <Kbd className="border-transparent bg-bg/20 text-bg">C</Kbd>
          </>
        }
        side="bottom"
      >
        <Button variant="primary">
          <PlusIcon /> New
        </Button>
      </Tooltip>
    </div>
  );
}
```

### Source: ui/tooltip.tsx

```tsx
"use client";

import * as React from "react";
import * as TooltipPrimitive from "@radix-ui/react-tooltip";

import { cn } from "@/lib/utils";

/** Wrap the app once so all tooltips share open/close timing. */
function TooltipProvider({ delayDuration = 300, ...props }: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
  return <TooltipPrimitive.Provider delayDuration={delayDuration} {...props} />;
}

const TooltipRoot = TooltipPrimitive.Root;
const TooltipTrigger = TooltipPrimitive.Trigger;

function TooltipContent({ className, sideOffset = 6, children, ...props }: React.ComponentProps<typeof TooltipPrimitive.Content>) {
  return (
    <TooltipPrimitive.Portal>
      <TooltipPrimitive.Content
        data-slot="tooltip-content"
        sideOffset={sideOffset}
        className={cn(
          "dx-float z-(--dx-z-tooltip) flex max-w-64 items-center gap-1.5 rounded-sm bg-fg px-2 py-1 text-xs text-bg shadow-md",
          className,
        )}
        {...props}
      >
        {children}
      </TooltipPrimitive.Content>
    </TooltipPrimitive.Portal>
  );
}

type TooltipProps = Omit<React.ComponentProps<typeof TooltipPrimitive.Root>, "children"> & {
  content: React.ReactNode;
  children: React.ReactElement;
  side?: React.ComponentProps<typeof TooltipPrimitive.Content>["side"];
};

/** Shorthand: <Tooltip content="Archive"><Button …/></Tooltip> */
function Tooltip({ content, children, side, ...props }: TooltipProps) {
  return (
    <TooltipRoot {...props}>
      <TooltipTrigger asChild>{children}</TooltipTrigger>
      <TooltipContent side={side}>{content}</TooltipContent>
    </TooltipRoot>
  );
}

export { Tooltip, TooltipProvider, TooltipRoot, TooltipTrigger, TooltipContent };
```

## popover

Floating panel anchored to a trigger.

Install: `curl -fsSL https://ui.digitexa.com/dx.mjs | node --input-type=module - add popover`
Also adds: utils, theme
npm: @radix-ui/react-popover@^1.3.1

```tsx
import { Popover, PopoverTrigger, PopoverAnchor, PopoverClose, PopoverContent } from "@/components/ui/popover";
```

### Example

```tsx
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";

export default function Demo() {
  return (
    <Popover>
      <PopoverTrigger asChild>
        <Button>Share…</Button>
      </PopoverTrigger>
      <PopoverContent className="flex flex-col gap-2">
        <Label htmlFor="invite">Invite by email</Label>
        <div className="flex gap-2">
          <Input id="invite" placeholder="name@company.com" />
          <Button variant="primary">Invite</Button>
        </div>
      </PopoverContent>
    </Popover>
  );
}
```

### Source: ui/popover.tsx

```tsx
"use client";

import * as React from "react";
import * as PopoverPrimitive from "@radix-ui/react-popover";

import { cn } from "@/lib/utils";

const Popover = PopoverPrimitive.Root;
const PopoverTrigger = PopoverPrimitive.Trigger;
const PopoverAnchor = PopoverPrimitive.Anchor;
const PopoverClose = PopoverPrimitive.Close;

function PopoverContent({ className, align = "start", sideOffset = 6, ...props }: React.ComponentProps<typeof PopoverPrimitive.Content>) {
  return (
    <PopoverPrimitive.Portal>
      <PopoverPrimitive.Content
        data-slot="popover-content"
        align={align}
        sideOffset={sideOffset}
        className={cn(
          "dx-float z-(--dx-z-dropdown) w-72 rounded-lg border border-border bg-surface-raised p-3 text-fg shadow-lg outline-none",
          className,
        )}
        {...props}
      />
    </PopoverPrimitive.Portal>
  );
}

export { Popover, PopoverTrigger, PopoverAnchor, PopoverClose, PopoverContent };
```

## dropdown-menu

Menu with items, checkboxes, radios, shortcuts and submenus.

Install: `curl -fsSL https://ui.digitexa.com/dx.mjs | node --input-type=module - add dropdown-menu`
Also adds: utils, theme
npm: @radix-ui/react-dropdown-menu@^2.2.1 lucide-react@^1.61.0

```tsx
import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent } from "@/components/ui/dropdown-menu";
```

### Example

```tsx
import * as React from "react";
import { CopyIcon, MoreHorizontalIcon, PencilIcon, TrashIcon } from "lucide-react";
import { Button } from "@/components/ui/button";
import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";

export default function Demo() {
  const [showDone, setShowDone] = React.useState(true);
  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button>
          Actions <MoreHorizontalIcon />
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent>
        <DropdownMenuLabel>Task</DropdownMenuLabel>
        <DropdownMenuItem>
          <PencilIcon /> Rename <DropdownMenuShortcut>R</DropdownMenuShortcut>
        </DropdownMenuItem>
        <DropdownMenuItem>
          <CopyIcon /> Duplicate <DropdownMenuShortcut>⌘D</DropdownMenuShortcut>
        </DropdownMenuItem>
        <DropdownMenuSub>
          <DropdownMenuSubTrigger>Move to</DropdownMenuSubTrigger>
          <DropdownMenuSubContent>
            <DropdownMenuItem>Website redesign</DropdownMenuItem>
            <DropdownMenuItem>Mobile app</DropdownMenuItem>
          </DropdownMenuSubContent>
        </DropdownMenuSub>
        <DropdownMenuSeparator />
        <DropdownMenuCheckboxItem checked={showDone} onCheckedChange={setShowDone}>
          Show completed
        </DropdownMenuCheckboxItem>
        <DropdownMenuSeparator />
        <DropdownMenuItem variant="danger">
          <TrashIcon /> Delete
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}
```

### Source: ui/dropdown-menu.tsx

```tsx
"use client";

import * as React from "react";
import * as MenuPrimitive from "@radix-ui/react-dropdown-menu";
import { CheckIcon, ChevronRightIcon } from "lucide-react";

import { cn } from "@/lib/utils";

const DropdownMenu = MenuPrimitive.Root;
const DropdownMenuTrigger = MenuPrimitive.Trigger;
const DropdownMenuGroup = MenuPrimitive.Group;
const DropdownMenuSub = MenuPrimitive.Sub;
const DropdownMenuRadioGroup = MenuPrimitive.RadioGroup;

const panel = "dx-float z-(--dx-z-dropdown) min-w-44 overflow-hidden rounded-lg border border-border bg-surface-raised p-1 text-fg shadow-lg outline-none";

const item = [
  "relative flex h-(--dx-control-md) cursor-pointer items-center gap-2 rounded-sm px-2 text-base outline-none select-none",
  "data-highlighted:bg-muted data-disabled:pointer-events-none data-disabled:text-fg-disabled",
  "[&_svg]:size-3.5 [&_svg]:shrink-0 [&_svg]:text-fg-subtle",
];

function DropdownMenuContent({ className, sideOffset = 6, align = "start", ...props }: React.ComponentProps<typeof MenuPrimitive.Content>) {
  return (
    <MenuPrimitive.Portal>
      <MenuPrimitive.Content data-slot="dropdown-menu-content" sideOffset={sideOffset} align={align} className={cn(panel, className)} {...props} />
    </MenuPrimitive.Portal>
  );
}

type DropdownMenuItemProps = React.ComponentProps<typeof MenuPrimitive.Item> & { variant?: "default" | "danger" };

function DropdownMenuItem({ className, variant = "default", ...props }: DropdownMenuItemProps) {
  return (
    <MenuPrimitive.Item
      data-slot="dropdown-menu-item"
      className={cn(item, variant === "danger" && "text-danger-fg-subtle data-highlighted:bg-danger-subtle [&_svg]:text-current", className)}
      {...props}
    />
  );
}

function DropdownMenuCheckboxItem({ className, children, ...props }: React.ComponentProps<typeof MenuPrimitive.CheckboxItem>) {
  return (
    <MenuPrimitive.CheckboxItem data-slot="dropdown-menu-checkbox-item" className={cn(item, "pl-7", className)} {...props}>
      <MenuPrimitive.ItemIndicator className="absolute left-2 grid place-items-center">
        <CheckIcon className="text-fg!" />
      </MenuPrimitive.ItemIndicator>
      {children}
    </MenuPrimitive.CheckboxItem>
  );
}

function DropdownMenuRadioItem({ className, children, ...props }: React.ComponentProps<typeof MenuPrimitive.RadioItem>) {
  return (
    <MenuPrimitive.RadioItem data-slot="dropdown-menu-radio-item" className={cn(item, "pl-7", className)} {...props}>
      <MenuPrimitive.ItemIndicator className="absolute left-2.5 grid place-items-center">
        <span className="size-1.5 rounded-full bg-fg" />
      </MenuPrimitive.ItemIndicator>
      {children}
    </MenuPrimitive.RadioItem>
  );
}

function DropdownMenuLabel({ className, ...props }: React.ComponentProps<typeof MenuPrimitive.Label>) {
  return <MenuPrimitive.Label className={cn("px-2 pt-1.5 pb-1 text-2xs font-medium tracking-wide text-fg-subtle uppercase", className)} {...props} />;
}

function DropdownMenuSeparator({ className, ...props }: React.ComponentProps<typeof MenuPrimitive.Separator>) {
  return <MenuPrimitive.Separator className={cn("-mx-1 my-1 h-px bg-border", className)} {...props} />;
}

function DropdownMenuShortcut({ className, ...props }: React.ComponentProps<"span">) {
  return <span className={cn("ml-auto pl-4 text-xs text-fg-subtle", className)} {...props} />;
}

function DropdownMenuSubTrigger({ className, children, ...props }: React.ComponentProps<typeof MenuPrimitive.SubTrigger>) {
  return (
    <MenuPrimitive.SubTrigger className={cn(item, "data-[state=open]:bg-muted", className)} {...props}>
      {children}
      <ChevronRightIcon className="ml-auto" />
    </MenuPrimitive.SubTrigger>
  );
}

function DropdownMenuSubContent({ className, ...props }: React.ComponentProps<typeof MenuPrimitive.SubContent>) {
  return (
    <MenuPrimitive.Portal>
      <MenuPrimitive.SubContent className={cn(panel, className)} {...props} />
    </MenuPrimitive.Portal>
  );
}

export {
  DropdownMenu,
  DropdownMenuTrigger,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuCheckboxItem,
  DropdownMenuRadioGroup,
  DropdownMenuRadioItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuShortcut,
  DropdownMenuSub,
  DropdownMenuSubTrigger,
  DropdownMenuSubContent,
};
```

## sidebar

App frame: AppShell, Sidebar with groups and items, Topbar.

Install: `curl -fsSL https://ui.digitexa.com/dx.mjs | node --input-type=module - add sidebar`
Also adds: button, tooltip, utils, theme
npm: @radix-ui/react-slot@^1.5.0 lucide-react@^1.61.0

```tsx
import { AppShell, SidebarProvider, useSidebar, Sidebar, SidebarHeader, SidebarContent, SidebarFooter, SidebarGroup, SidebarItem, SidebarTrigger, Topbar } from "@/components/ui/sidebar";
```

### Example

```tsx
import { FolderIcon, HomeIcon, SettingsIcon, LayoutGridIcon, ListIcon } from "lucide-react";
import { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarHeader, SidebarItem, SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar";

export default function Demo() {
  return (
    <SidebarProvider shortcut={null}>
    <div className="flex h-80 overflow-hidden rounded-md border border-border">
      <Sidebar className="max-md:static max-md:shadow-none max-md:data-[mobile=closed]:translate-x-0">
        <SidebarHeader className="font-semibold">
          <span className="grid size-5 shrink-0 place-items-center rounded-sm bg-accent text-2xs font-bold text-accent-fg">N</span>
          <span className="truncate md:in-data-[sidebar=collapsed]:hidden">Northwind Studio</span>
        </SidebarHeader>
        <SidebarContent>
          <SidebarGroup title="Workspace">
            <SidebarItem href="#" icon={<HomeIcon />} active>
              Overview
            </SidebarItem>
            <SidebarItem href="#" icon={<FolderIcon />} trailing="6">
              Projects
            </SidebarItem>
            <SidebarItem href="#" icon={<LayoutGridIcon />} depth={1}>
              Board
            </SidebarItem>
            <SidebarItem href="#" icon={<ListIcon />} depth={1}>
              List
            </SidebarItem>
          </SidebarGroup>
        </SidebarContent>
        <SidebarFooter>
          <SidebarItem href="#" icon={<SettingsIcon />}>
            Settings
          </SidebarItem>
        </SidebarFooter>
      </Sidebar>
      <div className="flex flex-1 flex-col">
        <div className="flex h-(--dx-topbar-height) items-center gap-2 border-b border-border px-3">
          <SidebarTrigger />
          <span className="text-sm text-fg-muted">Click to collapse to an icon rail (⌘B in the example app)</span>
        </div>
        <div className="grid flex-1 place-items-center text-sm text-fg-subtle">Page content</div>
      </div>
    </div>
    </SidebarProvider>
  );
}
```

### Source: ui/sidebar.tsx

```tsx
"use client";

import * as React from "react";
import { Slot } from "@radix-ui/react-slot";
import { PanelLeftIcon } from "lucide-react";

import { Button } from "@/components/ui/button";
import { TooltipContent, TooltipProvider, TooltipRoot, TooltipTrigger } from "@/components/ui/tooltip";
import { cn } from "@/lib/utils";

/*
 * Collapsible app sidebar.
 *
 * Desktop: expanded ↔ icon rail. The state lives on <html data-sidebar="collapsed"> (like data-theme),
 * is saved to localStorage, and toggles with ⌘B / Ctrl+B. To avoid a flash on reload, run this before paint:
 *
 *   try{if(localStorage.getItem("dx-sidebar")==="collapsed")document.documentElement.setAttribute("data-sidebar","collapsed")}catch(e){}
 *
 * Mobile (< md): the sidebar becomes an off-canvas drawer opened by <SidebarTrigger />.
 */

const STORAGE_KEY = "dx-sidebar";
const ATTR = "data-sidebar";

type SidebarContextValue = {
  collapsed: boolean;
  setCollapsed: (collapsed: boolean) => void;
  mobileOpen: boolean;
  setMobileOpen: (open: boolean) => void;
  toggle: () => void;
};

const SidebarContext = React.createContext<SidebarContextValue | null>(null);

function useSidebar() {
  const ctx = React.useContext(SidebarContext);
  if (!ctx) throw new Error("useSidebar must be used inside <SidebarProvider>");
  return ctx;
}

function subscribe(onChange: () => void) {
  const observer = new MutationObserver(onChange);
  observer.observe(document.documentElement, { attributes: true, attributeFilter: [ATTR] });
  return () => observer.disconnect();
}

const isMobile = () => typeof window !== "undefined" && window.matchMedia("(max-width: 767px)").matches;

function SidebarProvider({ children, shortcut = "b" }: { children: React.ReactNode; /** ⌘/Ctrl + key; null disables it */ shortcut?: string | null }) {
  const collapsed = React.useSyncExternalStore(
    subscribe,
    () => document.documentElement.getAttribute(ATTR) === "collapsed",
    () => false,
  );
  const [mobileOpen, setMobileOpen] = React.useState(false);

// pick up the saved state when the page didn't run the init snippet
  React.useEffect(() => {
    try {
      if (localStorage.getItem(STORAGE_KEY) === "collapsed") setCollapsed(true);
    } catch {}
  }, [setCollapsed]);

const toggle = React.useCallback(() => {
    if (isMobile()) setMobileOpen((open) => !open);
    else setCollapsed(!document.documentElement.hasAttribute(ATTR));
  }, [setCollapsed]);

React.useEffect(() => {
    if (!shortcut) return;
    function onKey(e: KeyboardEvent) {
      if (e.key.toLowerCase() === shortcut && (e.metaKey || e.ctrlKey) && !e.altKey && !e.shiftKey) {
        e.preventDefault();
        toggle();
      }
      if (e.key === "Escape") setMobileOpen(false);
    }
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [shortcut, toggle]);

const value = React.useMemo(() => ({ collapsed, setCollapsed, mobileOpen, setMobileOpen, toggle }), [collapsed, setCollapsed, mobileOpen, toggle]);

return (
    <SidebarContext.Provider value={value}>
      <TooltipProvider delayDuration={0}>{children}</TooltipProvider>
    </SidebarContext.Provider>
  );
}

/** Two-column app frame: <AppShell sidebar={<Sidebar>…</Sidebar>}>{page}</AppShell> */
function AppShell({ sidebar, className, children, ...props }: React.ComponentProps<"div"> & { sidebar: React.ReactNode }) {
  return (
    <SidebarProvider>
      <div data-slot="app-shell" className={cn("flex h-dvh overflow-hidden bg-bg", className)} {...props}>
        {sidebar}
        <div className="flex min-w-0 flex-1 flex-col">{children}</div>
      </div>
    </SidebarProvider>
  );
}

function Sidebar({ className, children, ...props }: React.ComponentProps<"aside">) {
  const { mobileOpen, setMobileOpen } = useSidebar();
  return (
    <>
      {/* mobile backdrop */}
      <div
        aria-hidden
        onClick={() => setMobileOpen(false)}
        className={cn(
          "fixed inset-0 z-(--dx-z-overlay) bg-overlay transition-opacity duration-(--dx-motion) md:hidden",
          mobileOpen ? "opacity-100" : "pointer-events-none opacity-0",
        )}
      />
      <aside
        data-slot="sidebar"
        data-mobile={mobileOpen ? "open" : "closed"}
        className={cn(
          "group/sidebar flex w-(--dx-sidebar-width) shrink-0 flex-col overflow-hidden border-r border-border bg-bg-subtle",
          "transition-[width,translate] duration-(--dx-motion) ease-out",
          "md:in-data-[sidebar=collapsed]:w-(--dx-sidebar-width-collapsed)",
          // mobile: off-canvas drawer
          "max-md:fixed max-md:inset-y-0 max-md:left-0 max-md:z-(--dx-z-overlay) max-md:shadow-lg",
          "max-md:data-[mobile=closed]:-translate-x-full",
          className,
        )}
        {...props}
      >
        {children}
      </aside>
    </>
  );
}

/** Hidden while the sidebar is an icon rail. */
const whenExpanded = "md:in-data-[sidebar=collapsed]:hidden";

function SidebarHeader({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="sidebar-header"
      className={cn("flex h-(--dx-topbar-height) shrink-0 items-center gap-2 px-3 md:in-data-[sidebar=collapsed]:justify-center md:in-data-[sidebar=collapsed]:px-0", className)}
      {...props}
    />
  );
}

function SidebarContent({ className, ...props }: React.ComponentProps<"nav">) {
  return (
    <nav
      data-slot="sidebar-content"
      className={cn("flex min-h-0 flex-1 flex-col gap-4 overflow-x-hidden overflow-y-auto px-2 py-2", className)}
      {...props}
    />
  );
}

function SidebarFooter({ className, ...props }: React.ComponentProps<"div">) {
  return <div data-slot="sidebar-footer" className={cn("flex shrink-0 flex-col gap-0.5 border-t border-border p-2", className)} {...props} />;
}

function SidebarGroup({ title, action, className, children, ...props }: React.ComponentProps<"div"> & { title?: React.ReactNode; action?: React.ReactNode }) {
  return (
    <div data-slot="sidebar-group" role="group" className={cn("flex flex-col gap-px", className)} {...props}>
      {title && (
        <>
          <div className={cn("flex h-6 items-center justify-between px-2 text-2xs font-medium tracking-wide whitespace-nowrap text-fg-subtle uppercase", whenExpanded)}>
            {title}
            {action}
          </div>
          {/* in the icon rail the title becomes a divider */}
          <div aria-hidden className="mx-2 my-1 hidden h-px bg-border md:in-data-[sidebar=collapsed]:block" />
        </>
      )}
      {children}
    </div>
  );
}

type SidebarItemProps = React.ComponentProps<"a"> & {
  icon?: React.ReactNode;
  active?: boolean;
  /** Right-aligned extra: a count, a dot, an icon. */
  trailing?: React.ReactNode;
  /** Indent level for nested items (0–2). Nested items are hidden in the icon rail. */
  depth?: 0 | 1 | 2;
  /** Tooltip text in the icon rail. Defaults to the children when they're a string. */
  tooltip?: string;
  /** Render your router's Link: <SidebarItem asChild icon={<HomeIcon />}><Link href="/">Home</Link></SidebarItem> */
  asChild?: boolean;
};

function SidebarItem({ icon, active, trailing, depth = 0, tooltip, asChild, className, children, ...props }: SidebarItemProps) {
  const { collapsed, setMobileOpen } = useSidebar();
  const Comp = asChild ? Slot : "a";
  const label = tooltip ?? (typeof children === "string" ? children : undefined);

const content = (
    <>
      {icon && (
        <span data-sidebar-icon className="grid size-4 shrink-0 place-items-center">
          {icon}
        </span>
      )}
      <span className={cn("min-w-0 flex-1 truncate", whenExpanded)}>{asChild ? (children as React.ReactElement<{ children?: React.ReactNode }>).props.children : children}</span>
      {trailing && <span className={cn("flex shrink-0 items-center gap-1 text-xs text-fg-subtle", whenExpanded)}>{trailing}</span>}
    </>
  );

const item = (
    <Comp
      data-slot="sidebar-item"
      aria-current={active ? "page" : undefined}
      aria-label={collapsed ? label : undefined}
      onClick={() => setMobileOpen(false)}
      className={cn(
        "group/item flex h-(--dx-control-md) shrink-0 items-center gap-2 rounded-md px-2 text-base whitespace-nowrap text-fg-muted",
        "hover:bg-muted hover:text-fg",
        "aria-[current=page]:bg-surface aria-[current=page]:font-medium aria-[current=page]:text-fg aria-[current=page]:shadow-sm",
        "[&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-fg-subtle aria-[current=page]:[&_svg]:text-fg",
        "md:in-data-[sidebar=collapsed]:justify-center md:in-data-[sidebar=collapsed]:px-0",
        depth === 1 && "pl-7",
        depth === 2 && "pl-11",
        depth > 0 && whenExpanded,
        className,
      )}
      {...props}
    >
      {asChild ? React.cloneElement(children as React.ReactElement<{ children?: React.ReactNode }>, {}, content) : content}
    </Comp>
  );

if (!collapsed || !label) return item;
  return (
    <TooltipRoot>
      <TooltipTrigger asChild>{item}</TooltipTrigger>
      <TooltipContent side="right">{label}</TooltipContent>
    </TooltipRoot>
  );
}

/** Toggles the icon rail on desktop and the drawer on mobile. */
function SidebarTrigger({ className, ...props }: React.ComponentProps<typeof Button>) {
  const { collapsed, mobileOpen, toggle } = useSidebar();
  return (
    <Button
      size="icon"
      variant="ghost"
      aria-label="Toggle sidebar"
      aria-expanded={!collapsed || mobileOpen}
      title="Toggle sidebar (⌘B)"
      onClick={toggle}
      className={cn("-ml-1.5", className)}
      {...props}
    >
      <PanelLeftIcon />
    </Button>
  );
}

function Topbar({ className, ...props }: React.ComponentProps<"header">) {
  return (
    <header
      data-slot="topbar"
      className={cn("flex h-(--dx-topbar-height) shrink-0 items-center gap-2 border-b border-border bg-bg px-4", className)}
      {...props}
    />
  );
}

export {
  AppShell,
  SidebarProvider,
  useSidebar,
  Sidebar,
  SidebarHeader,
  SidebarContent,
  SidebarFooter,
  SidebarGroup,
  SidebarItem,
  SidebarTrigger,
  Topbar,
};
```

## command

Command palette with filtering, groups and full keyboard control; ⌘K hook.

Install: `curl -fsSL https://ui.digitexa.com/dx.mjs | node --input-type=module - add command`
Also adds: utils, theme
npm: @radix-ui/react-dialog@^1.3.1 lucide-react@^1.61.0

```tsx
import { Command, CommandDialog, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandShortcut, CommandSeparator, useCommandShortcut } from "@/components/ui/command";
```

### Example

```tsx
import { FolderIcon, SettingsIcon, PlusIcon } from "lucide-react";
import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandShortcut } from "@/components/ui/command";

export default function Demo() {
  return (
    <Command className="max-w-md rounded-lg border border-border bg-surface-raised shadow-md">
      <CommandInput placeholder="Type a command or search…" />
      <CommandList>
        <CommandEmpty>Nothing matches.</CommandEmpty>
        <CommandGroup heading="Projects">
          <CommandItem>
            <FolderIcon /> Storefront rebuild
          </CommandItem>
          <CommandItem>
            <FolderIcon /> Driver app
          </CommandItem>
        </CommandGroup>
        <CommandGroup heading="Actions">
          <CommandItem keywords={["add"]}>
            <PlusIcon /> New task <CommandShortcut>C</CommandShortcut>
          </CommandItem>
          <CommandItem keywords={["settings"]}>
            <SettingsIcon /> Preferences <CommandShortcut>⌘,</CommandShortcut>
          </CommandItem>
        </CommandGroup>
      </CommandList>
    </Command>
  );
}
```

### Source: ui/command.tsx

```tsx
"use client";

import * as React from "react";
import * as DialogPrimitive from "@radix-ui/react-dialog";
import { SearchIcon } from "lucide-react";

import { cn } from "@/lib/utils";

/*
 * Command palette: a filterable list with full keyboard control (↑ ↓ Home End, Enter, Esc).
 *
 *   <CommandDialog open={open} onOpenChange={setOpen}>
 *     <CommandInput placeholder="Search…" />
 *     <CommandList>
 *       <CommandEmpty>No results</CommandEmpty>
 *       <CommandGroup heading="Projects">
 *         <CommandItem onSelect={…}>Storefront rebuild</CommandItem>
 *       </CommandGroup>
 *     </CommandList>
 *   </CommandDialog>
 *
 * Items match on their text plus optional `keywords`. Use useCommandShortcut() to open it with ⌘K.
 */

type CommandContextValue = {
  query: string;
  setQuery: (q: string) => void;
  active: string | null;
  setActive: (id: string | null) => void;
  listId: string;
};

const CommandContext = React.createContext<CommandContextValue | null>(null);

function useCommand() {
  const ctx = React.useContext(CommandContext);
  if (!ctx) throw new Error("Command parts must be used inside <Command> or <CommandDialog>");
  return ctx;
}

const normalize = (s: string) => s.toLocaleLowerCase().normalize("NFD").replace(/\p{Diacritic}/gu, "");

function matches(query: string, text: string) {
  const q = normalize(query.trim());
  if (!q) return true;
  const t = normalize(text);
  return q.split(/\s+/).every((word) => t.includes(word));
}

function Command({ className, children, onKeyDown, ...props }: React.ComponentProps<"div">) {
  const [query, setQuery] = React.useState("");
  const [active, setActive] = React.useState<string | null>(null);
  const listId = React.useId();
  const rootRef = React.useRef<HTMLDivElement | null>(null);

const items = () => [...(rootRef.current?.querySelectorAll<HTMLElement>("[data-slot=command-item]:not([aria-disabled=true])") ?? [])];

// after the list re-renders, make the first visible item active
  const activateFirst = React.useCallback(() => {
    requestAnimationFrame(() => setActive(items()[0]?.id ?? null));
  }, []);

const updateQuery = React.useCallback(
    (q: string) => {
      setQuery(q);
      activateFirst();
    },
    [activateFirst],
  );

const attach = React.useCallback(
    (node: HTMLDivElement | null) => {
      rootRef.current = node;
      if (node) activateFirst();
    },
    [activateFirst],
  );

return (
    <CommandContext.Provider value={{ query, setQuery: updateQuery, active, setActive, listId }}>
      <div ref={attach} data-slot="command" className={cn("flex flex-col overflow-hidden text-fg", className)} onKeyDown={move} {...props}>
        {children}
      </div>
    </CommandContext.Provider>
  );
}

function CommandInput({ className, ...props }: Omit<React.ComponentProps<"input">, "value" | "onChange">) {
  const { query, setQuery, active, listId } = useCommand();
  return (
    <div className="flex h-11 shrink-0 items-center gap-2 border-b border-border px-3">
      <SearchIcon className="size-4 shrink-0 text-fg-subtle" />
      <input
        data-slot="command-input"
        role="combobox"
        aria-expanded
        aria-controls={listId}
        aria-activedescendant={active ?? undefined}
        autoComplete="off"
        spellCheck={false}
        value={query}
        onChange={(e) => setQuery(e.target.value)}
        className={cn("h-full flex-1 bg-transparent text-md outline-none placeholder:text-fg-subtle", className)}
        {...props}
      />
    </div>
  );
}

function CommandList({ className, ...props }: React.ComponentProps<"div">) {
  const { listId } = useCommand();
  return <div id={listId} role="listbox" data-slot="command-list" className={cn("max-h-80 overflow-y-auto overscroll-contain p-1", className)} {...props} />;
}

/** Shown only when no item matches (pure CSS, so it never lags a render behind). */
function CommandEmpty({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="command-empty"
      className={cn(
        "hidden py-8 text-center text-sm text-fg-muted",
        "[[data-slot=command-list]:not(:has([data-slot=command-item]))_&]:block",
        className,
      )}
      {...props}
    />
  );
}

function CommandGroup({ heading, className, children, ...props }: React.ComponentProps<"div"> & { heading?: React.ReactNode }) {
  const id = React.useId();
  return (
    // groups with no matching items collapse via :has()
    <div role="group" aria-labelledby={heading ? id : undefined} data-slot="command-group" className={cn("not-has-[[data-slot=command-item]]:hidden", className)} {...props}>
      {heading && (
        <div id={id} className="px-2 pt-2 pb-1 text-2xs font-medium tracking-wide text-fg-subtle uppercase">
          {heading}
        </div>
      )}
      {children}
    </div>
  );
}

type CommandItemProps = Omit<React.ComponentProps<"div">, "onSelect"> & {
  onSelect?: () => void;
  /** Extra words to match, e.g. ["settings", "preferences"]. */
  keywords?: string[];
  disabled?: boolean;
};

function textOf(node: React.ReactNode): string {
  if (node == null || typeof node === "boolean") return "";
  if (typeof node === "string" || typeof node === "number") return String(node);
  if (Array.isArray(node)) return node.map(textOf).join(" ");
  if (React.isValidElement<{ children?: React.ReactNode }>(node)) return textOf(node.props.children);
  return "";
}

function CommandShortcut({ className, ...props }: React.ComponentProps<"span">) {
  return <span className={cn("ml-auto text-xs text-fg-subtle", className)} {...props} />;
}

function CommandSeparator({ className, ...props }: React.ComponentProps<"div">) {
  return <div role="separator" className={cn("-mx-1 my-1 h-px bg-border", className)} {...props} />;
}

type CommandDialogProps = React.ComponentProps<typeof DialogPrimitive.Root> & {
  title?: string;
  className?: string;
};

function CommandDialog({ title = "Command palette", className, children, ...props }: CommandDialogProps) {
  return (
    <DialogPrimitive.Root {...props}>
      <DialogPrimitive.Portal>
        <DialogPrimitive.Overlay className="fixed inset-0 z-(--dx-z-overlay) bg-overlay data-[state=open]:animate-[dx-fade-in_var(--dx-motion)_var(--dx-motion-ease)]" />
        <DialogPrimitive.Content
          aria-describedby={undefined}
          className={cn(
            "fixed top-[14vh] left-1/2 z-(--dx-z-overlay) w-[calc(100%-2rem)] max-w-xl -translate-x-1/2",
            "overflow-hidden rounded-xl border border-border bg-surface-raised shadow-lg outline-none",
            "data-[state=open]:animate-[dx-pop-in_var(--dx-motion)_var(--dx-motion-ease)]",
            className,
          )}
        >
          <DialogPrimitive.Title className="sr-only">{title}</DialogPrimitive.Title>
          <Command>{children}</Command>
        </DialogPrimitive.Content>
      </DialogPrimitive.Portal>
    </DialogPrimitive.Root>
  );
}

/** Opens the palette with ⌘K / Ctrl+K. Returns [open, setOpen]. */
function useCommandShortcut(key = "k") {
  const [open, setOpen] = React.useState(false);
  React.useEffect(() => {
    function onKey(e: KeyboardEvent) {
      if (e.key.toLowerCase() === key && (e.metaKey || e.ctrlKey)) {
        e.preventDefault();
        setOpen((o) => !o);
      }
    }
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [key]);
  return [open, setOpen] as const;
}

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

## dialog

Modal with header/body/footer, 3 sizes, scrolls when tall.

Install: `curl -fsSL https://ui.digitexa.com/dx.mjs | node --input-type=module - add dialog`
Also adds: utils, theme
npm: @radix-ui/react-dialog@^1.3.1 lucide-react@^1.61.0

```tsx
import { Dialog, DialogTrigger, DialogClose, DialogPortal, DialogOverlay, DialogContent, DialogHeader, DialogBody, DialogFooter, DialogTitle, DialogDescription } from "@/components/ui/dialog";
```

### Example

```tsx
import { PlusIcon, TrashIcon } from "lucide-react";
import { StatusBadge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";

export default function Demo() {
  return (
    <div className="flex gap-2">
      <Dialog>
        <DialogTrigger asChild>
          <Button variant="primary">
            <PlusIcon /> Create task
          </Button>
        </DialogTrigger>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>New task</DialogTitle>
            <DialogDescription>The task is added to the “To do” column.</DialogDescription>
          </DialogHeader>
          <DialogBody>
            <div className="flex flex-col gap-1.5">
              <Label htmlFor="task-title">Title</Label>
              <Input id="task-title" autoFocus placeholder="e.g. Update the homepage hero image" />
            </div>
            <div className="flex items-center gap-2">
              <span className="text-sm text-fg-muted">Status:</span>
              <StatusBadge status="todo" />
            </div>
          </DialogBody>
          <DialogFooter>
            <DialogClose asChild>
              <Button variant="ghost">Cancel</Button>
            </DialogClose>
            <DialogClose asChild>
              <Button variant="primary">Create</Button>
            </DialogClose>
          </DialogFooter>
        </DialogContent>
      </Dialog>

<Dialog>
        <DialogTrigger asChild>
          <Button variant="danger">
            <TrashIcon /> Delete…
          </Button>
        </DialogTrigger>
        <DialogContent size="sm">
          <DialogHeader>
            <DialogTitle>Delete project?</DialogTitle>
            <DialogDescription>This can’t be undone. 24 tasks and all comments will be deleted.</DialogDescription>
          </DialogHeader>
          <DialogFooter>
            <DialogClose asChild>
              <Button variant="ghost">Cancel</Button>
            </DialogClose>
            <DialogClose asChild>
              <Button variant="danger">Delete</Button>
            </DialogClose>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  );
}
```

### Source: ui/dialog.tsx

```tsx
"use client";

import * as React from "react";
import * as DialogPrimitive from "@radix-ui/react-dialog";
import { XIcon } from "lucide-react";

import { cn } from "@/lib/utils";

const Dialog = DialogPrimitive.Root;
const DialogTrigger = DialogPrimitive.Trigger;
const DialogClose = DialogPrimitive.Close;
const DialogPortal = DialogPrimitive.Portal;

function DialogOverlay({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
  return (
    <DialogPrimitive.Overlay
      data-slot="dialog-overlay"
      className={cn(
        "fixed inset-0 z-(--dx-z-overlay) bg-overlay",
        "data-[state=open]:animate-[dx-fade-in_var(--dx-motion)_var(--dx-motion-ease)]",
        "data-[state=closed]:animate-[dx-fade-out_var(--dx-motion-fast)_ease-in]",
        className,
      )}
      {...props}
    />
  );
}

type DialogContentProps = React.ComponentProps<typeof DialogPrimitive.Content> & {
  size?: "sm" | "md" | "lg";
  hideClose?: boolean;
};

const contentSizes = { sm: "max-w-sm", md: "max-w-md", lg: "max-w-xl" };

function DialogContent({ className, children, size = "md", hideClose = false, ...props }: DialogContentProps) {
  return (
    <DialogPortal>
      <DialogOverlay />
      <DialogPrimitive.Content
        data-slot="dialog-content"
        className={cn(
          "fixed top-1/2 left-1/2 z-(--dx-z-overlay) flex max-h-[calc(100dvh-2rem)] w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 flex-col",
          "rounded-lg border border-border bg-surface-raised text-fg shadow-lg outline-none",
          "data-[state=open]:animate-[dx-pop-in_var(--dx-motion)_var(--dx-motion-ease)]",
          "data-[state=closed]:animate-[dx-pop-out_var(--dx-motion-fast)_ease-in]",
          contentSizes[size],
          className,
        )}
        {...props}
      >
        {children}
        {!hideClose && (
          <DialogPrimitive.Close
            className={cn(
              "absolute top-2.5 right-2.5 grid size-6 place-items-center rounded-sm text-fg-subtle",
              "hover:bg-muted hover:text-fg",
            )}
          >
            <XIcon className="size-3.5" />
            <span className="sr-only">Close</span>
          </DialogPrimitive.Close>
        )}
      </DialogPrimitive.Content>
    </DialogPortal>
  );
}

function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
  return <div data-slot="dialog-header" className={cn("flex shrink-0 flex-col gap-1 px-4 pt-4 pb-3 pr-10", className)} {...props} />;
}

function DialogBody({ className, ...props }: React.ComponentProps<"div">) {
  return <div data-slot="dialog-body" className={cn("flex min-h-0 flex-col gap-3 overflow-y-auto px-4 pb-4", className)} {...props} />;
}

function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="dialog-footer"
      className={cn("flex shrink-0 items-center justify-end gap-2 border-t border-border bg-bg-subtle rounded-b-[calc(var(--dx-radius-large)-1px)] px-4 py-2.5", className)}
      {...props}
    />
  );
}

function DialogTitle({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Title>) {
  return <DialogPrimitive.Title data-slot="dialog-title" className={cn("text-md font-semibold", className)} {...props} />;
}

function DialogDescription({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Description>) {
  return (
    <DialogPrimitive.Description
      data-slot="dialog-description"
      className={cn("text-sm text-fg-muted", className)}
      {...props}
    />
  );
}

export {
  Dialog,
  DialogTrigger,
  DialogClose,
  DialogPortal,
  DialogOverlay,
  DialogContent,
  DialogHeader,
  DialogBody,
  DialogFooter,
  DialogTitle,
  DialogDescription,
};
```

## slider

Radix slider with one or two thumbs for single values and ranges, labelled per thumb.

Install: `curl -fsSL https://ui.digitexa.com/dx.mjs | node --input-type=module - add slider`
Also adds: utils, theme
npm: @radix-ui/react-slider@^1.6.1

```tsx
import { Slider } from "@/components/ui/slider";
```

### Example

```tsx
import * as React from "react";

import { Label } from "@/components/ui/label";
import { Slider } from "@/components/ui/slider";

export default function Demo() {
  const [estimate, setEstimate] = React.useState([5]);
  const [budget, setBudget] = React.useState([20, 60]);

return (
    <div className="flex w-full max-w-sm flex-col gap-6">
      <div className="flex flex-col gap-2.5">
        <div className="flex items-center justify-between">
          <Label id="estimate-label">Story points</Label>
          <span className="text-sm text-fg-muted tabular-nums">{estimate[0]} pts</span>
        </div>
        <Slider aria-labelledby="estimate-label" value={estimate} onValueChange={setEstimate} min={1} max={13} />
      </div>
      <div className="flex flex-col gap-2.5">
        <div className="flex items-center justify-between">
          <Label>Weekly hours per member</Label>
          <span className="text-sm text-fg-muted tabular-nums">
            {budget[0]}–{budget[1]} h
          </span>
        </div>
        <Slider value={budget} onValueChange={setBudget} max={80} step={5} minStepsBetweenThumbs={1} thumbLabels={["Minimum hours", "Maximum hours"]} />
      </div>
      <div className="flex flex-col gap-2.5">
        <Label>Sprint capacity (locked)</Label>
        <Slider aria-label="Sprint capacity" defaultValue={[70]} disabled />
      </div>
    </div>
  );
}
```

### Source: ui/slider.tsx

```tsx
"use client";

import * as React from "react";
import * as SliderPrimitive from "@radix-ui/react-slider";

import { cn } from "@/lib/utils";

/**
 * Pass one value for a single thumb, two for a range: <Slider defaultValue={[20, 80]} />.
 * Name each thumb with `thumbLabels` (or `aria-label` / `aria-labelledby` for a single one).
 */
type SliderProps = React.ComponentProps<typeof SliderPrimitive.Root> & {
  thumbLabels?: string[];
};

function Slider({ className, value, defaultValue, min = 0, max = 100, thumbLabels, "aria-label": ariaLabel, "aria-labelledby": labelledBy, ...props }: SliderProps) {
  const count = (value ?? defaultValue ?? [min]).length;
  return (
    <SliderPrimitive.Root
      data-slot="slider"
      value={value}
      defaultValue={defaultValue}
      min={min}
      max={max}
      className={cn(
        "relative flex w-full touch-none items-center select-none data-disabled:opacity-50",
        "data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-40 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col",
        className,
      )}
      {...props}
    >
      <SliderPrimitive.Track
        data-slot="slider-track"
        className="relative grow overflow-hidden rounded-full bg-muted data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5"
      >
        <SliderPrimitive.Range data-slot="slider-range" className="absolute bg-accent data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full" />
      </SliderPrimitive.Track>
      {Array.from({ length: count }, (_, i) => (
        <SliderPrimitive.Thumb
          key={i}
          data-slot="slider-thumb"
          aria-label={thumbLabels?.[i] ?? (count === 1 ? ariaLabel : undefined)}
          aria-labelledby={!thumbLabels?.[i] && count === 1 ? labelledBy : undefined}
          className={cn(
            "block size-4 shrink-0 rounded-full border-2 border-accent bg-surface shadow-sm",
            "transition-[box-shadow] duration-(--dx-motion-fast) ease-out",
            "outline-none hover:ring-4 hover:ring-accent/15 focus-visible:ring-4 focus-visible:ring-accent/25",
            "data-disabled:pointer-events-none",
          )}
        />
      ))}
    </SliderPrimitive.Root>
  );
}

export { Slider, type SliderProps };
```

## toggle

Two-state pressable button with default and outline variants, sized like Button.

Install: `curl -fsSL https://ui.digitexa.com/dx.mjs | node --input-type=module - add toggle`
Also adds: utils, theme
npm: @radix-ui/react-toggle@^1.2.1 class-variance-authority@^0.7.1

```tsx
import { Toggle, toggleVariants } from "@/components/ui/toggle";
```

### Example

```tsx
import { BellIcon, BoldIcon, EyeOffIcon, ItalicIcon, StarIcon } from "lucide-react";

import { Toggle } from "@/components/ui/toggle";

export default function Demo() {
  return (
    <div className="flex flex-col gap-4">
      <div className="flex flex-wrap items-center gap-2">
        <Toggle aria-label="Bold" size="icon">
          <BoldIcon />
        </Toggle>
        <Toggle aria-label="Italic" size="icon" defaultPressed>
          <ItalicIcon />
        </Toggle>
        <Toggle variant="outline" defaultPressed>
          <StarIcon /> Favorite
        </Toggle>
        <Toggle variant="outline">
          <BellIcon /> Watch issue
        </Toggle>
        <Toggle disabled>
          <EyeOffIcon /> Hide completed
        </Toggle>
      </div>
      <div className="flex flex-wrap items-center gap-2">
        <Toggle variant="outline" size="xs">XS</Toggle>
        <Toggle variant="outline" size="sm">Small</Toggle>
        <Toggle variant="outline" size="md">Medium</Toggle>
        <Toggle variant="outline" size="lg">Large</Toggle>
      </div>
    </div>
  );
}
```

### Source: ui/toggle.tsx

```tsx
"use client";

import * as React from "react";
import * as TogglePrimitive from "@radix-ui/react-toggle";
import { cva, type VariantProps } from "class-variance-authority";

import { cn } from "@/lib/utils";

const toggleVariants = cva(
  [
    "inline-flex shrink-0 items-center justify-center gap-1.5 whitespace-nowrap rounded-md font-medium text-fg-muted select-none",
    "transition-[background-color,border-color,color] duration-(--dx-motion-fast) ease-out",
    "not-disabled:hover:bg-muted not-disabled:hover:text-fg disabled:opacity-50",
    "data-[state=on]:bg-selected data-[state=on]:text-fg",
    "[&_svg]:pointer-events-none [&_svg]:size-3.5 [&_svg]:shrink-0",
  ],
  {
    variants: {
      variant: {
        default: "",
        outline: "border border-border bg-surface shadow-sm not-disabled:hover:border-border-strong data-[state=on]:border-border-strong",
      },
      size: {
        xs: "h-(--dx-control-xs) gap-1 rounded-sm px-1.5 text-xs",
        sm: "h-(--dx-control-sm) px-2 text-xs",
        md: "h-(--dx-control-md) px-3 text-base",
        lg: "h-(--dx-control-lg) px-4 text-md",
        icon: "size-(--dx-control-md)",
        "icon-sm": "size-(--dx-control-sm)",
      },
    },
    defaultVariants: { variant: "default", size: "md" },
  },
);

type ToggleProps = React.ComponentProps<typeof TogglePrimitive.Root> & VariantProps<typeof toggleVariants>;

/** Two-state button (aria-pressed). Icon-only toggles need an aria-label. */
function Toggle({ className, variant, size, ...props }: ToggleProps) {
  return <TogglePrimitive.Root data-slot="toggle" className={cn(toggleVariants({ variant, size }), className)} {...props} />;
}

export { Toggle, toggleVariants, type ToggleProps };
```

## field

Form field layout that wires label, description and error ids to the control.

Install: `curl -fsSL https://ui.digitexa.com/dx.mjs | node --input-type=module - add field`
Also adds: label, utils, theme
npm: @radix-ui/react-slot@^1.5.0

```tsx
import { Field, FieldLabel, FieldControl, FieldDescription, FieldError, FieldGroup, useField } from "@/components/ui/field";
```

### Example

```tsx
import * as React from "react";

import { Button } from "@/components/ui/button";
import { Checkbox } from "@/components/ui/checkbox";
import { Field, FieldControl, FieldDescription, FieldError, FieldGroup, FieldLabel } from "@/components/ui/field";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";

export default function Demo() {
  const [key, setKey] = React.useState("WEB");
  const error = /^[A-Z]{2,5}$/.test(key) ? null : "Use 2–5 uppercase letters.";

return (
    <form className="w-full max-w-sm" onSubmit={(e) => e.preventDefault()}>
      <FieldGroup>
        <Field>
          <FieldLabel>Project name</FieldLabel>
          <FieldControl>
            <Input defaultValue="Storefront rebuild" />
          </FieldControl>
          <FieldDescription>Shown in the sidebar and in notifications.</FieldDescription>
        </Field>
        <Field>
          <FieldLabel>Issue key</FieldLabel>
          <FieldControl>
            <Input value={key} onChange={(e) => setKey(e.target.value)} className="w-32 font-mono" />
          </FieldControl>
          <FieldDescription>Prefix for issue ids, like {key || "WEB"}-142.</FieldDescription>
          <FieldError>{error}</FieldError>
        </Field>
        <Field>
          <FieldLabel>Summary</FieldLabel>
          <FieldControl>
            <Textarea placeholder="What is this project about?" />
          </FieldControl>
        </Field>
        <Field orientation="horizontal">
          <FieldControl>
            <Checkbox defaultChecked />
          </FieldControl>
          <FieldLabel>Notify watchers on status changes</FieldLabel>
        </Field>
        <div>
          <Button variant="primary" type="submit" disabled={!!error}>
            Create project
          </Button>
        </div>
      </FieldGroup>
    </form>
  );
}
```

### Source: ui/field.tsx

```tsx
"use client";

import * as React from "react";
import { Slot } from "@radix-ui/react-slot";

import { Label } from "@/components/ui/label";
import { cn } from "@/lib/utils";

/*
 * Form field: label, control, description and error, with the ids wired for you.
 *
 *   <Field invalid={!!error}>
 *     <FieldLabel>Project name</FieldLabel>
 *     <FieldControl><Input /></FieldControl>
 *     <FieldDescription>Shown in the sidebar.</FieldDescription>
 *     <FieldError>{error}</FieldError>
 *   </Field>
 *
 * FieldControl passes id, aria-describedby and aria-invalid to its child. For custom
 * controls, spread useField().controlProps instead. A rendered FieldError marks the field invalid.
 */

type FieldContextValue = {
  id: string;
  descriptionId: string;
  errorId: string;
  invalid: boolean;
  hasDescription: boolean;
  hasError: boolean;
  register: (part: "description" | "error") => () => void;
};

const FieldContext = React.createContext<FieldContextValue | null>(null);

type FieldProps = React.ComponentProps<"div"> & {
  /** Marks the control invalid. Defaults to true while a FieldError is rendered. */
  invalid?: boolean;
  /** Places label and control side by side, for checkboxes and switches. */
  orientation?: "vertical" | "horizontal";
  /** Id for the control; generated when omitted. */
  controlId?: string;
};

const value: FieldContextValue = {
    id,
    descriptionId: `${autoId}-description`,
    errorId: `${autoId}-error`,
    invalid: invalid ?? parts.error > 0,
    hasDescription: parts.description > 0,
    hasError: parts.error > 0,
    register,
  };

return (
    <FieldContext.Provider value={value}>
      <div
        data-slot="field"
        data-orientation={orientation}
        data-invalid={value.invalid || undefined}
        className={cn(
          "flex gap-1.5",
          orientation === "vertical" ? "flex-col" : "flex-row flex-wrap items-center gap-x-2.5 [&>[data-slot=field-description],&>[data-slot=field-error]]:basis-full",
          className,
        )}
        {...props}
      />
    </FieldContext.Provider>
  );
}

function FieldLabel({ className, htmlFor, ...props }: React.ComponentProps<typeof Label>) {
  const { id } = useField();
  return <Label data-slot="field-label" htmlFor={htmlFor ?? id} className={className} {...props} />;
}

/** Passes id, aria-describedby and aria-invalid to its only child. */
function FieldControl(props: React.ComponentProps<typeof Slot>) {
  const { controlProps } = useField();
  return <Slot data-slot="field-control" {...controlProps} {...props} />;
}

/** Renders only when it has children, so `<FieldError>{error}</FieldError>` is safe. */
function FieldError({ children, ...props }: React.ComponentProps<"p">) {
  if (children == null || children === false || children === "") return null;
  return <FieldErrorMessage {...props}>{children}</FieldErrorMessage>;
}

/** Stacks several fields with consistent spacing. */
function FieldGroup({ className, ...props }: React.ComponentProps<"div">) {
  return <div data-slot="field-group" className={cn("flex flex-col gap-4", className)} {...props} />;
}

export { Field, FieldLabel, FieldControl, FieldDescription, FieldError, FieldGroup, useField, type FieldProps };
```

## input-group

Input with leading or trailing icons and text addons in one focus-ringed box.

Install: `curl -fsSL https://ui.digitexa.com/dx.mjs | node --input-type=module - add input-group`
Also adds: input, utils, theme
npm: class-variance-authority@^0.7.1

```tsx
import { InputGroup, InputGroupInput, InputGroupAddon, InputGroupIcon, inputGroupVariants } from "@/components/ui/input-group";
```

### Example

```tsx
import { AtSignIcon, GlobeIcon, LinkIcon, SearchIcon } from "lucide-react";

import { InputGroup, InputGroupAddon, InputGroupIcon, InputGroupInput } from "@/components/ui/input-group";
import { Kbd } from "@/components/ui/kbd";

export default function Demo() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-3">
      <InputGroup>
        <InputGroupIcon>
          <SearchIcon />
        </InputGroupIcon>
        <InputGroupInput aria-label="Search issues" placeholder="Search issues…" />
        <Kbd>/</Kbd>
      </InputGroup>
      <InputGroup>
        <InputGroupAddon variant="segment">https://</InputGroupAddon>
        <InputGroupInput aria-label="Workspace URL" defaultValue="acme" />
        <InputGroupAddon>.digitexa.app</InputGroupAddon>
      </InputGroup>
      <InputGroup>
        <InputGroupIcon>
          <AtSignIcon />
        </InputGroupIcon>
        <InputGroupInput aria-label="Invite by email" placeholder="teammate" />
        <InputGroupAddon variant="segment">@acme.com</InputGroupAddon>
      </InputGroup>
      <InputGroup size="sm">
        <InputGroupIcon>
          <LinkIcon />
        </InputGroupIcon>
        <InputGroupInput aria-label="Pull request URL" placeholder="Paste a pull request link" />
      </InputGroup>
      <InputGroup>
        <InputGroupInput aria-label="Domain" defaultValue="status.acme" aria-invalid />
        <InputGroupIcon>
          <GlobeIcon />
        </InputGroupIcon>
      </InputGroup>
      <InputGroup>
        <InputGroupAddon variant="segment">USD</InputGroupAddon>
        <InputGroupInput aria-label="Budget" defaultValue="12,000" disabled />
      </InputGroup>
    </div>
  );
}
```

### Source: ui/input-group.tsx

```tsx
import * as React from "react";
import { cva, type VariantProps } from "class-variance-authority";

import { Input } from "@/components/ui/input";
import { cn } from "@/lib/utils";

/*
 * An input with icons and text addons inside one bordered box. Children render in order,
 * so an icon or addon before the input leads and one after it trails.
 *
 *   <InputGroup>
 *     <InputGroupAddon>https://</InputGroupAddon>
 *     <InputGroupInput placeholder="acme.digitexa.app" />
 *     <InputGroupIcon><GlobeIcon /></InputGroupIcon>
 *   </InputGroup>
 */

const inputGroupVariants = cva(
  [
    "flex w-full min-w-0 items-center gap-2 overflow-hidden rounded-md border border-input bg-surface px-(--dx-ig-px) text-fg shadow-sm [--dx-ig-px:--spacing(2.5)]",
    "transition-[border-color,box-shadow] duration-(--dx-motion-fast) ease-out",
    "hover:border-border-strong focus-within:border-accent focus-within:ring-3 focus-within:ring-accent/20 focus-within:hover:border-accent",
    "has-[[aria-invalid=true]]:border-danger has-[[aria-invalid=true]]:focus-within:ring-danger/20",
    "has-[input:disabled]:cursor-not-allowed has-[input:disabled]:bg-muted has-[input:disabled]:text-fg-disabled",
  ],
  {
    variants: {
      size: {
        sm: "h-(--dx-control-sm) gap-1.5 text-xs [--dx-ig-px:--spacing(2)]",
        md: "h-(--dx-control-md) text-base",
        lg: "h-(--dx-control-lg) text-md [--dx-ig-px:--spacing(3)]",
      },
    },
    defaultVariants: { size: "md" },
  },
);

type InputGroupProps = React.ComponentProps<"div"> & VariantProps<typeof inputGroupVariants>;

function InputGroup({ className, size, ...props }: InputGroupProps) {
  return <div data-slot="input-group" role="group" className={cn(inputGroupVariants({ size }), className)} {...props} />;
}

/** The kit's Input without its own box; font size follows the group. */
function InputGroupInput({ className, ...props }: React.ComponentProps<typeof Input>) {
  return (
    <Input
      data-slot="input-group-input"
      className={cn(
        "h-full flex-1 rounded-none border-0 bg-transparent px-0 text-[length:inherit] shadow-none",
        "hover:border-0 focus-visible:ring-0 disabled:bg-transparent",
        className,
      )}
      {...props}
    />
  );
}

type InputGroupAddonProps = React.ComponentProps<"span"> & {
  /** "segment" gives the addon its own tinted cell at the edge of the group. */
  variant?: "inline" | "segment";
};

/** Text prefix or suffix such as "https://", "USD" or "@digitexa.com". */
function InputGroupAddon({ className, variant = "inline", ...props }: InputGroupAddonProps) {
  return (
    <span
      data-slot="input-group-addon"
      data-variant={variant}
      className={cn(
        "flex shrink-0 items-center whitespace-nowrap text-fg-subtle select-none",
        variant === "segment" &&
          "self-stretch bg-muted px-(--dx-ig-px) text-fg-muted first:-ml-(--dx-ig-px) first:border-r last:-mr-(--dx-ig-px) last:border-l",
        className,
      )}
      {...props}
    />
  );
}

/** Decorative leading or trailing icon. */
function InputGroupIcon({ className, ...props }: React.ComponentProps<"span">) {
  return (
    <span
      data-slot="input-group-icon"
      aria-hidden
      className={cn("flex shrink-0 items-center text-fg-subtle [&_svg]:pointer-events-none [&_svg]:size-3.5", className)}
      {...props}
    />
  );
}

export { InputGroup, InputGroupInput, InputGroupAddon, InputGroupIcon, inputGroupVariants, type InputGroupProps };
```

## calendar

Dependency-free month calendar with single or range selection and full keyboard nav.

Install: `curl -fsSL https://ui.digitexa.com/dx.mjs | node --input-type=module - add calendar`
Also adds: button, utils, use-now, theme
npm: lucide-react@^1.61.0

```tsx
import { Calendar } from "@/components/ui/calendar";
```

### Example

```tsx
import * as React from "react";

import { Calendar, type DateRange } from "@/components/ui/calendar";
import { useNow } from "@/lib/use-now";

const addDays = (d: Date, n: number) => new Date(d.getFullYear(), d.getMonth(), d.getDate() + n);
const isWeekend = (d: Date) => d.getDay() === 0 || d.getDay() === 6;

export default function Demo() {
  const now = useNow();
  // dates are relative to today, which is only known on the client
  return now ? <Calendars today={now} /> : <div className="h-72" />;
}

function Calendars({ today }: { today: Date }) {
  const [due, setDue] = React.useState<Date | undefined>(() => addDays(today, 3));
  const [sprint, setSprint] = React.useState<DateRange | undefined>(() => ({ from: today, to: addDays(today, 11) }));

return (
    <div className="flex flex-wrap items-start gap-6">
      <div className="flex flex-col gap-2">
        <span className="text-2xs font-medium tracking-wide text-fg-subtle uppercase">Due date · workdays only</span>
        <div className="rounded-lg border border-border bg-surface p-2">
          <Calendar selected={due} onSelect={setDue} min={today} disabled={isWeekend} />
        </div>
      </div>
      <div className="flex flex-col gap-2">
        <span className="text-2xs font-medium tracking-wide text-fg-subtle uppercase">Sprint range</span>
        <div className="rounded-lg border border-border bg-surface p-2">
          <Calendar mode="range" selected={sprint} onSelect={setSprint} />
        </div>
      </div>
      <div className="flex flex-col gap-2">
        <span className="text-2xs font-medium tracking-wide text-fg-subtle uppercase">de-DE · week starts Sunday</span>
        <div className="rounded-lg border border-border bg-surface p-2">
          <Calendar locale="de-DE" weekStartsOn={0} showOutsideDays={false} labels={{ previousMonth: "Vorheriger Monat", nextMonth: "Nächster Monat" }} />
        </div>
      </div>
    </div>
  );
}
```

### Source: ui/calendar.tsx

```tsx
"use client";

import * as React from "react";
import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";

import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";
import { useNow } from "@/lib/use-now";

/*
 * Month calendar with single or range selection and full keyboard control:
 * ← → ↑ ↓ move by day/week, Home/End to the week's edges, PageUp/PageDown by month
 * (with Shift: by year), Enter/Space selects.
 *
 *   <Calendar selected={due} onSelect={setDue} min={new Date()} />
 *   <Calendar mode="range" selected={sprint} onSelect={setSprint} />
 */

type DateRange = { from?: Date; to?: Date };
type Weekday = 0 | 1 | 2 | 3 | 4 | 5 | 6;

type CalendarBaseProps = Omit<React.ComponentProps<"div">, "onSelect" | "defaultValue"> & {
  /** Visible month (controlled). */
  month?: Date;
  defaultMonth?: Date;
  onMonthChange?: (month: Date) => void;
  /** Earliest and latest selectable days. */
  min?: Date;
  max?: Date;
  /** Days that can't be picked: a list or a predicate. */
  disabled?: Date[] | ((date: Date) => boolean);
  /** 0 = Sunday, 1 = Monday (default). */
  weekStartsOn?: Weekday;
  /** BCP 47 locale for month and weekday names. */
  locale?: string;
  showOutsideDays?: boolean;
  /** Focus the selected day (or today) on mount, e.g. inside a popover. */
  autoFocus?: boolean;
  labels?: { previousMonth?: string; nextMonth?: string };
};

type CalendarSingleProps = CalendarBaseProps & {
  mode?: "single";
  selected?: Date;
  defaultSelected?: Date;
  onSelect?: (date: Date | undefined) => void;
  /** Clicking the selected day keeps it selected instead of clearing it. */
  required?: boolean;
};

type CalendarRangeProps = CalendarBaseProps & {
  mode: "range";
  selected?: DateRange;
  defaultSelected?: DateRange;
  onSelect?: (range: DateRange | undefined) => void;
  required?: boolean;
};

type CalendarProps = CalendarSingleProps | CalendarRangeProps;

/** Calendar options shared by DatePicker and DateRangePicker. */
type CalendarBaseOptions = Pick<CalendarBaseProps, "min" | "max" | "weekStartsOn" | "locale" | "showOutsideDays" | "labels">;

// ---------------------------------------------------------------- date math

const startOfDay = (d: Date) => new Date(d.getFullYear(), d.getMonth(), d.getDate());
const startOfMonth = (d: Date) => new Date(d.getFullYear(), d.getMonth(), 1);
const addDays = (d: Date, n: number) => new Date(d.getFullYear(), d.getMonth(), d.getDate() + n);
const daysInMonth = (year: number, month: number) => new Date(year, month + 1, 0).getDate();

/** Adds months, clamping the day (Jan 31 + 1 month = Feb 28/29). */
function addMonths(d: Date, n: number) {
  const target = new Date(d.getFullYear(), d.getMonth() + n, 1);
  return new Date(target.getFullYear(), target.getMonth(), Math.min(d.getDate(), daysInMonth(target.getFullYear(), target.getMonth())));
}

// ---------------------------------------------------------------- component

type LooseProps = CalendarBaseProps & {
  mode?: "single" | "range";
  selected?: Date | DateRange;
  defaultSelected?: Date | DateRange;
  onSelect?: (value: Date | DateRange | undefined) => void;
  required?: boolean;
};

const formatterCache = new Map<string, ReturnType<typeof createFormatters>>();

function createFormatters(locale: string) {
  return {
    caption: new Intl.DateTimeFormat(locale, { month: "long", year: "numeric" }),
    day: new Intl.DateTimeFormat(locale, { day: "numeric" }),
    full: new Intl.DateTimeFormat(locale, { weekday: "long", year: "numeric", month: "long", day: "numeric" }),
    weekdayShort: new Intl.DateTimeFormat(locale, { weekday: "short" }),
    weekdayLong: new Intl.DateTimeFormat(locale, { weekday: "long" }),
  };
}

// Intl formatters are costly to build; keep one set per locale
function formatters(locale: string) {
  let f = formatterCache.get(locale);
  if (!f) formatterCache.set(locale, (f = createFormatters(locale)));
  return f;
}

/** Renders once the client clock is known, so prerendered HTML never bakes in "today". */
function Calendar(props: CalendarProps) {
  const now = useNow();
  if (!now) {
    return (
      <div
        data-slot="calendar"
        aria-hidden
        className={cn("inline-block p-1", props.className)}
        style={{ width: "calc(var(--dx-control-md) * 7 + 0.5rem)", height: "calc(var(--dx-control-md) * 6 + 4rem)" }}
      />
    );
  }
  return <CalendarInner {...props} today={startOfDay(now)} />;
}

function CalendarInner({ today, ...calendarProps }: CalendarProps & { today: Date }) {
  const {
    mode = "single",
    selected: selectedProp,
    defaultSelected,
    onSelect,
    required = false,
    month: monthProp,
    defaultMonth,
    onMonthChange,
    min,
    max,
    disabled,
    weekStartsOn = 1,
    locale = "en-US",
    showOutsideDays = true,
    autoFocus = false,
    labels,
    className,
    ...props
  } = calendarProps as LooseProps;

const isRange = mode === "range";

const [selectedState, setSelectedState] = React.useState(defaultSelected);
  const selected = "selected" in calendarProps ? selectedProp : selectedState;
  const single = !isRange ? (selected as Date | undefined) : undefined;
  const range = isRange ? (selected as DateRange | undefined) : undefined;

const [monthState, setMonthState] = React.useState(() =>
    startOfMonth(defaultMonth ?? single ?? range?.from ?? (max && today > max ? max : min && today < min ? min : today)),
  );
  const month = monthProp ? startOfMonth(monthProp) : monthState;

const [focused, setFocused] = React.useState<Date>(() => startOfDay(single ?? range?.from ?? today));
  const [hovered, setHovered] = React.useState<Date | null>(null);
  const gridRef = React.useRef<HTMLTableElement>(null);
  const shouldFocus = React.useRef(autoFocus);
  const captionId = React.useId();

const minDay = min && startOfDay(min);
  const maxDay = max && startOfDay(max);

const isDisabled = (d: Date) =>
    (!!minDay && d < minDay) ||
    (!!maxDay && d > maxDay) ||
    (Array.isArray(disabled) ? disabled.some((x) => isSameDay(x, d)) : !!disabled?.(d));

const fmt = formatters(locale);

function changeMonth(next: Date) {
    const m = startOfMonth(next);
    if (!monthProp) setMonthState(m);
    onMonthChange?.(m);
  }

function navigate(n: number) {
    changeMonth(addMonths(month, n));
    setFocused(addMonths(isSameMonth(focused, month) ? focused : month, n));
  }

function moveFocus(next: Date) {
    if (minDay && next < minDay) next = minDay;
    if (maxDay && next > maxDay) next = maxDay;
    setFocused(next);
    if (!isSameMonth(next, month)) changeMonth(next);
    shouldFocus.current = true;
  }

function select(day: Date) {
    if (isDisabled(day)) return;
    setFocused(day);
    if (!isSameMonth(day, month)) changeMonth(day);

let next: Date | DateRange | undefined;
    if (!isRange) {
      next = isSameDay(day, single) && !required ? undefined : day;
    } else {
      const { from, to } = range ?? {};
      if (!from || to) next = { from: day, to: undefined };
      else if (isSameDay(day, from)) next = required ? { from, to: from } : undefined;
      else next = day < from ? { from: day, to: from } : { from, to: day };
    }
    if (!("selected" in calendarProps)) setSelectedState(next);
    onSelect?.(next);
  }

function onKeyDown(e: React.KeyboardEvent<HTMLButtonElement>, day: Date) {
    const weekStart = startOfWeek(day, weekStartsOn);
    const moves: Record<string, () => Date> = {
      ArrowLeft: () => addDays(day, -1),
      ArrowRight: () => addDays(day, 1),
      ArrowUp: () => addDays(day, -7),
      ArrowDown: () => addDays(day, 7),
      Home: () => weekStart,
      End: () => addDays(weekStart, 6),
      PageUp: () => addMonths(day, e.shiftKey ? -12 : -1),
      PageDown: () => addMonths(day, e.shiftKey ? 12 : 1),
    };
    const move = moves[e.key];
    if (!move) return;
    e.preventDefault();
    moveFocus(move());
  }

// move DOM focus after keyboard navigation (and on mount with autoFocus)
  React.useEffect(() => {
    if (!shouldFocus.current) return;
    shouldFocus.current = false;
    gridRef.current?.querySelector<HTMLButtonElement>("button[tabindex='0']")?.focus();
  });

// the one tabbable day: the focused day if visible, else selected / today / the 1st
  const tabbable = [focused, single, range?.from, today].find((d): d is Date => !!d && isSameMonth(d, month)) ?? month;

const gridStart = startOfWeek(month, weekStartsOn);
  const weeks = Array.from({ length: 6 }, (_, w) => Array.from({ length: 7 }, (_, d) => addDays(gridStart, w * 7 + d)));

// range shown while choosing the end day
  const preview = range?.from && !range.to && hovered ? (hovered < range.from ? { from: hovered, to: range.from } : { from: range.from, to: hovered }) : range;

const prevDisabled = !!minDay && startOfMonth(minDay) >= month;
  const nextDisabled = !!maxDay && startOfMonth(maxDay) <= month;

return (
    <div data-slot="calendar" className={cn("inline-flex w-fit flex-col gap-2 p-1 text-fg", className)} {...props}>
      <div className="flex items-center justify-between gap-2">
        <div id={captionId} aria-live="polite" className="pl-1.5 text-base font-medium">
          {fmt.caption.format(month)}
        </div>
        <div className="flex items-center gap-0.5">
          <Button variant="ghost" size="icon-sm" aria-label={labels?.previousMonth ?? "Previous month"} disabled={prevDisabled} onClick={() => navigate(-1)}>
            <ChevronLeftIcon />
          </Button>
          <Button variant="ghost" size="icon-sm" aria-label={labels?.nextMonth ?? "Next month"} disabled={nextDisabled} onClick={() => navigate(1)}>
            <ChevronRightIcon />
          </Button>
        </div>
      </div>

<table ref={gridRef} role="grid" aria-labelledby={captionId} className="border-collapse" onPointerLeave={() => setHovered(null)}>
        <thead>
          <tr>
            {weeks[0].map((d) => (
              <th key={d.getDay()} scope="col" abbr={fmt.weekdayLong.format(d)} className="h-6 p-0 text-2xs font-medium text-fg-subtle">
                {fmt.weekdayShort.format(d)}
              </th>
            ))}
          </tr>
        </thead>
        <tbody>
          {weeks.map((week) => (
            <tr key={dayKey(week[0])}>
              {week.map((day) => {
                const outside = !isSameMonth(day, month);
                if (outside && !showOutsideDays) return <td key={dayKey(day)} role="presentation" className="p-0" />;

const off = isDisabled(day);
                const from = preview?.from;
                const to = preview?.to ?? preview?.from;
                const isStart = isRange && isSameDay(day, from);
                const isEnd = isRange && isSameDay(day, to);
                const inRange = isRange && !!from && !!to && day > from && day < to;
                const isSelected = isRange ? isSameDay(day, range?.from) || isSameDay(day, range?.to) || (inRange && !!range?.to) : isSameDay(day, single);
                const solid = isRange ? isStart || isEnd : isSelected;
                const banded = isRange && !!from && !!to && !isSameDay(from, to) && (inRange || isStart || isEnd);

return (
                  <td
                    key={dayKey(day)}
                    role="gridcell"
                    aria-selected={isSelected}
                    className={cn(
                      "p-0 text-center",
                      banded && "bg-accent-subtle first:rounded-l-md last:rounded-r-md",
                      banded && isStart && "rounded-l-md",
                      banded && isEnd && "rounded-r-md",
                    )}
                  >
                    <button
                      type="button"
                      data-date={dayKey(day)}
                      data-outside={outside || undefined}
                      data-today={isSameDay(day, today) || undefined}
                      tabIndex={isSameDay(day, tabbable) ? 0 : -1}
                      aria-label={fmt.full.format(day)}
                      aria-current={isSameDay(day, today) ? "date" : undefined}
                      aria-disabled={off || undefined}
                      onClick={() => select(day)}
                      onKeyDown={(e) => onKeyDown(e, day)}
                      onFocus={() => !isSameDay(day, focused) && setFocused(day)}
                      onPointerEnter={() => isRange && setHovered(day)}
                      className={cn(
                        "relative inline-flex size-(--dx-control-md) items-center justify-center rounded-md text-sm tabular-nums outline-none",
                        "transition-[background-color,color] duration-(--dx-motion-fast) ease-out",
                        "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-surface",
                        "data-today:font-semibold",
                        // today marker: a dot under the number
                        "data-today:after:absolute data-today:after:bottom-1 data-today:after:size-1 data-today:after:rounded-full data-today:after:bg-accent",
                        outside && "text-fg-subtle",
                        banded && !solid ? "text-accent-subtle-fg hover:bg-[color-mix(in_oklch,var(--dx-accent-subtle),var(--dx-accent)_12%)]" : "hover:bg-muted",
                        solid && "bg-accent text-accent-fg hover:bg-accent-hover data-today:after:bg-accent-fg",
                        off && "pointer-events-none text-fg-disabled line-through data-today:after:bg-fg-disabled",
                      )}
                    >
                      {fmt.day.format(day)}
                    </button>
                  </td>
                );
              })}
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

export { Calendar, type CalendarProps, type CalendarBaseOptions, type CalendarSingleProps, type CalendarRangeProps, type DateRange };
```

## date-picker

Input-styled trigger that opens a calendar popover; single date and range pickers.

Install: `curl -fsSL https://ui.digitexa.com/dx.mjs | node --input-type=module - add date-picker`
Also adds: calendar, input, popover, utils, theme
npm: lucide-react@^1.61.0

```tsx
import { DatePicker, DateRangePicker } from "@/components/ui/date-picker";
```

### Example

```tsx
import * as React from "react";

import { type DateRange } from "@/components/ui/calendar";
import { DatePicker, DateRangePicker } from "@/components/ui/date-picker";
import { Field, FieldControl, FieldDescription, FieldLabel } from "@/components/ui/field";

export default function Demo() {
  const [due, setDue] = React.useState<Date | undefined>();
  const [sprint, setSprint] = React.useState<DateRange | undefined>();

return (
    <div className="flex w-full max-w-xs flex-col gap-4">
      <Field>
        <FieldLabel>Due date</FieldLabel>
        <FieldControl>
          <DatePicker value={due} onValueChange={setDue} placeholder="No due date" disabledDates={(d) => d.getDay() === 0 || d.getDay() === 6} />
        </FieldControl>
        <FieldDescription>Weekends are unavailable.</FieldDescription>
      </Field>
      <Field>
        <FieldLabel>Sprint</FieldLabel>
        <FieldControl>
          <DateRangePicker value={sprint} onValueChange={setSprint} placeholder="Pick start and end" />
        </FieldControl>
      </Field>
      <Field>
        <FieldLabel>Release (long format, small)</FieldLabel>
        <FieldControl>
          <DatePicker size="sm" defaultValue={new Date(2026, 11, 14)} formatOptions={{ weekday: "short", month: "long", day: "numeric", year: "numeric" }} />
        </FieldControl>
      </Field>
      <Field>
        <FieldLabel>Archived on</FieldLabel>
        <FieldControl>
          <DatePicker defaultValue={new Date(2026, 8, 30)} disabled />
        </FieldControl>
      </Field>
    </div>
  );
}
```

### Source: ui/date-picker.tsx

```tsx
"use client";

import * as React from "react";
import { CalendarIcon } from "lucide-react";

import { Calendar, type CalendarBaseOptions, type DateRange } from "@/components/ui/calendar";
import { inputVariants } from "@/components/ui/input";
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
import { cn } from "@/lib/utils";

/*
 *   <DatePicker value={due} onValueChange={setDue} placeholder="Due date" />
 *   <DateRangePicker value={sprint} onValueChange={setSprint} />
 *
 * Extra props go to the trigger button, so it works inside <FieldControl>.
 */

type PickerOptions = CalendarBaseOptions & {
  placeholder?: string;
  /** Intl options for the trigger text (default: { dateStyle: "medium" }). */
  formatOptions?: Intl.DateTimeFormatOptions;
  size?: "sm" | "md" | "lg";
  /** Days that can't be picked (the trigger's own `disabled` disables the whole control). */
  disabledDates?: React.ComponentProps<typeof Calendar>["disabled"];
  /** Popover alignment against the trigger. */
  align?: "start" | "center" | "end";
};

type TriggerProps = Omit<React.ComponentProps<"button">, "value" | "defaultValue" | "onChange">;

type DatePickerProps = TriggerProps &
  PickerOptions & {
    value?: Date;
    defaultValue?: Date;
    onValueChange?: (date: Date | undefined) => void;
  };

type DateRangePickerProps = TriggerProps &
  PickerOptions & {
    value?: DateRange;
    defaultValue?: DateRange;
    onValueChange?: (range: DateRange | undefined) => void;
  };

function useControllable<T>(value: T | undefined, defaultValue: T | undefined, controlled: boolean, onChange?: (v: T | undefined) => void) {
  const [state, setState] = React.useState(defaultValue);
  const current = controlled ? value : state;
  const set = (v: T | undefined) => {
    if (!controlled) setState(v);
    onChange?.(v);
  };
  return [current, set] as const;
}

function PickerTrigger({ className, size, empty, children, ...props }: TriggerProps & { size?: PickerOptions["size"]; empty: boolean }) {
  return (
    <button
      type="button"
      data-slot="date-picker-trigger"
      data-placeholder={empty || undefined}
      className={cn(
        inputVariants({ size }),
        "items-center gap-2 text-left data-placeholder:text-fg-subtle",
        "[&_svg]:pointer-events-none [&_svg]:size-3.5 [&_svg]:shrink-0",
        className,
      )}
      {...props}
    >
      <CalendarIcon className="text-fg-subtle" />
      <span className="truncate">{children}</span>
    </button>
  );
}

function splitOptions<T extends PickerOptions>(props: T) {
  const {
    placeholder,
    formatOptions = { dateStyle: "medium" },
    size,
    disabledDates,
    align = "start",
    min,
    max,
    weekStartsOn,
    locale = "en-US",
    showOutsideDays,
    labels,
    ...rest
  } = props;
  return {
    placeholder,
    formatOptions,
    size,
    align,
    locale,
    calendar: { min, max, weekStartsOn, locale, showOutsideDays, labels, disabled: disabledDates },
    rest,
  };
}

function DatePicker(props: DatePickerProps) {
  const { placeholder = "Pick a date", formatOptions, size, align, locale, calendar, rest } = splitOptions(props);
  const { value: valueProp, defaultValue, onValueChange, ...trigger } = rest;
  const [open, setOpen] = React.useState(false);
  const [value, setValue] = useControllable(valueProp, defaultValue, "value" in props, onValueChange);

return (
    <Popover open={open} onOpenChange={setOpen}>
      <PopoverTrigger asChild>
        <PickerTrigger size={size} empty={!value} {...trigger}>
          {value ? new Intl.DateTimeFormat(locale, formatOptions).format(value) : placeholder}
        </PickerTrigger>
      </PopoverTrigger>
      <PopoverContent data-slot="date-picker-content" align={align} className="w-auto p-2" onOpenAutoFocus={(e) => e.preventDefault()}>
        <Calendar
          {...calendar}
          autoFocus
          selected={value}
          onSelect={(d) => {
            setValue(d);
            if (d) setOpen(false);
          }}
        />
      </PopoverContent>
    </Popover>
  );
}

function DateRangePicker(props: DateRangePickerProps) {
  const { placeholder = "Pick a date range", formatOptions, size, align, locale, calendar, rest } = splitOptions(props);
  const { value: valueProp, defaultValue, onValueChange, ...trigger } = rest;
  const [open, setOpen] = React.useState(false);
  const [value, setValue] = useControllable(valueProp, defaultValue, "value" in props, onValueChange);

const fmt = new Intl.DateTimeFormat(locale, formatOptions);
  const label = !value?.from ? placeholder : value.to ? fmt.formatRange(value.from, value.to) : `${fmt.format(value.from)} – …`;

return (
    <Popover open={open} onOpenChange={setOpen}>
      <PopoverTrigger asChild>
        <PickerTrigger size={size} empty={!value?.from} {...trigger}>
          {label}
        </PickerTrigger>
      </PopoverTrigger>
      <PopoverContent data-slot="date-range-picker-content" align={align} className="w-auto p-2" onOpenAutoFocus={(e) => e.preventDefault()}>
        <Calendar
          {...calendar}
          mode="range"
          autoFocus
          selected={value}
          onSelect={(r) => {
            setValue(r);
            if (r?.from && r.to) setOpen(false);
          }}
        />
      </PopoverContent>
    </Popover>
  );
}

export { DatePicker, DateRangePicker, type DatePickerProps, type DateRangePickerProps };
```

## combobox

Searchable select on Popover and Command, single or multiple with badge chips.

Install: `curl -fsSL https://ui.digitexa.com/dx.mjs | node --input-type=module - add combobox`
Also adds: badge, command, input, popover, utils, theme
npm: lucide-react@^1.61.0

```tsx
import { Combobox } from "@/components/ui/combobox";
```

### Example

```tsx
import * as React from "react";
import { BugIcon, FolderIcon, PaletteIcon, RocketIcon, ShieldIcon, SparklesIcon, ZapIcon } from "lucide-react";

import { Avatar } from "@/components/ui/avatar";
import { Combobox, type ComboboxOption } from "@/components/ui/combobox";
import { Field, FieldControl, FieldLabel } from "@/components/ui/field";

const members = [
  { name: "Ada Lovelace", role: "engineering" },
  { name: "Grace Hopper", role: "engineering" },
  { name: "Dieter Rams", role: "design" },
  { name: "Margaret Hamilton", role: "engineering lead" },
  { name: "Susan Kare", role: "design" },
];

const memberOptions: ComboboxOption[] = members.map((m) => ({
  value: m.name.toLowerCase().replace(/\s+/g, "-"),
  label: m.name,
  icon: <Avatar aria-hidden name={m.name} size="xs" />,
  keywords: [m.role],
}));

const labelOptions: ComboboxOption[] = [
  { value: "bug", label: "Bug", icon: <BugIcon /> },
  { value: "feature", label: "Feature", icon: <SparklesIcon /> },
  { value: "design", label: "Design", icon: <PaletteIcon />, keywords: ["ui", "ux"] },
  { value: "performance", label: "Performance", icon: <ZapIcon />, keywords: ["speed"] },
  { value: "security", label: "Security", icon: <ShieldIcon /> },
  { value: "release", label: "Release", icon: <RocketIcon />, keywords: ["ship", "deploy"] },
];

const projectOptions: ComboboxOption[] = ["Storefront rebuild", "Mobile app v3", "Billing migration", "Design system"].map((p) => ({
  value: p,
  label: p,
  icon: <FolderIcon />,
}));

export default function Demo() {
  const [owner, setOwner] = React.useState<string | undefined>("grace-hopper");
  const [labels, setLabels] = React.useState<string[]>(["bug", "performance"]);

return (
    <div className="flex w-full max-w-xs flex-col gap-4">
      <Field>
        <FieldLabel>Owner</FieldLabel>
        <FieldControl>
          <Combobox options={memberOptions} value={owner} onValueChange={setOwner} placeholder="Assign owner" searchPlaceholder="Search people…" emptyText="No one matches" />
        </FieldControl>
      </Field>
      <Field>
        <FieldLabel>Labels</FieldLabel>
        <FieldControl>
          <Combobox multiple options={labelOptions} value={labels} onValueChange={setLabels} placeholder="Add labels" searchPlaceholder="Filter labels…" />
        </FieldControl>
      </Field>
      <Field>
        <FieldLabel>Move to project</FieldLabel>
        <FieldControl>
          <Combobox size="sm" options={projectOptions} placeholder="Choose a project" />
        </FieldControl>
      </Field>
    </div>
  );
}
```

### Source: ui/combobox.tsx

```tsx
"use client";

import * as React from "react";
import { CheckIcon, ChevronsUpDownIcon } from "lucide-react";

import { Badge } from "@/components/ui/badge";
import { Command, CommandEmpty, CommandInput, CommandItem, CommandList } from "@/components/ui/command";
import { inputVariants } from "@/components/ui/input";
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
import { cn } from "@/lib/utils";

/*
 * Searchable select built on Popover + Command.
 *
 *   <Combobox options={members} value={owner} onValueChange={setOwner} placeholder="Assign owner" />
 *   <Combobox multiple options={labels} value={tags} onValueChange={setTags} />
 *
 * Extra props go to the trigger button, so it works inside <FieldControl>.
 */

type ComboboxOption = {
  value: string;
  label: string;
  icon?: React.ReactNode;
  /** Extra words to match while searching. */
  keywords?: string[];
  disabled?: boolean;
};

type ComboboxBaseProps = Omit<React.ComponentProps<"button">, "value" | "defaultValue" | "onChange"> & {
  options: ComboboxOption[];
  placeholder?: string;
  searchPlaceholder?: string;
  emptyText?: React.ReactNode;
  size?: "sm" | "md" | "lg";
  /** Popover alignment against the trigger. */
  align?: "start" | "center" | "end";
};

type ComboboxSingleProps = ComboboxBaseProps & {
  multiple?: false;
  value?: string;
  defaultValue?: string;
  onValueChange?: (value: string | undefined) => void;
};

type ComboboxMultipleProps = ComboboxBaseProps & {
  multiple: true;
  value?: string[];
  defaultValue?: string[];
  onValueChange?: (value: string[]) => void;
  /** Chips shown in the trigger before collapsing into "+N". */
  maxChips?: number;
};

type ComboboxProps = ComboboxSingleProps | ComboboxMultipleProps;

type LooseProps = ComboboxBaseProps & {
  multiple?: boolean;
  value?: string | string[];
  defaultValue?: string | string[];
  onValueChange?: (value: string | string[] | undefined) => void;
  maxChips?: number;
};

function Combobox(comboboxProps: ComboboxProps) {
  const {
    options,
    multiple = false,
    value: valueProp,
    defaultValue,
    onValueChange,
    placeholder = multiple ? "Select options…" : "Select an option…",
    searchPlaceholder = "Search…",
    emptyText = "No results",
    size = "md",
    align = "start",
    maxChips = 2,
    className,
    disabled,
    ...props
  } = comboboxProps as LooseProps;

const [open, setOpen] = React.useState(false);
  const [state, setState] = React.useState(defaultValue);
  const value = "value" in comboboxProps ? valueProp : state;

const values = multiple ? ((value as string[] | undefined) ?? []) : value ? [value as string] : [];
  const chosen = values.map((v) => options.find((o) => o.value === v)).filter((o): o is ComboboxOption => !!o);

function commit(next: string | string[] | undefined) {
    if (!("value" in comboboxProps)) setState(next);
    onValueChange?.(next);
  }

const visible = chosen.slice(0, maxChips);
  const hidden = chosen.length - visible.length;

return (
    <Popover open={open} onOpenChange={setOpen}>
      <PopoverTrigger asChild>
        <button
          type="button"
          data-slot="combobox-trigger"
          data-placeholder={chosen.length === 0 || undefined}
          disabled={disabled}
          className={cn(
            inputVariants({ size }),
            "items-center justify-between gap-2 text-left data-placeholder:text-fg-subtle",
            "[&_svg]:pointer-events-none [&_svg]:size-3.5 [&_svg]:shrink-0",
            className,
          )}
          {...props}
        >
          {chosen.length === 0 ? (
            <span className="truncate">{placeholder}</span>
          ) : multiple ? (
            <span className="flex min-w-0 items-center gap-1 overflow-hidden">
              {visible.map((o) => (
                <Badge key={o.value} className="min-w-0">
                  {o.icon}
                  <span className="truncate">{o.label}</span>
                </Badge>
              ))}
              {hidden > 0 && <Badge variant="outline">+{hidden}</Badge>}
            </span>
          ) : (
            <span className="flex min-w-0 items-center gap-2 [&_svg]:text-fg-subtle">
              {chosen[0].icon}
              <span className="truncate">{chosen[0].label}</span>
            </span>
          )}
          <ChevronsUpDownIcon className="text-fg-subtle" />
        </button>
      </PopoverTrigger>
      <PopoverContent data-slot="combobox-content" align={align} className="w-(--radix-popover-trigger-width) min-w-56 p-0">
        <Command>
          <CommandInput placeholder={searchPlaceholder} className="text-base" />
          <CommandList aria-multiselectable={multiple || undefined} className="max-h-64">
            <CommandEmpty>{emptyText}</CommandEmpty>
            {options.map((option) => {
              const checked = values.includes(option.value);
              return (
                <CommandItem
                  key={option.value}
                  keywords={[option.label, ...(option.keywords ?? [])]}
                  disabled={option.disabled}
                  data-checked={checked || undefined}
                  onSelect={() => choose(option)}
                  className="h-(--dx-control-md) pr-1.5"
                >
                  {option.icon}
                  <span className="flex-1 truncate">{option.label}</span>
                  <CheckIcon aria-hidden className={cn("ml-auto", !checked && "invisible")} />
                  {checked && <span className="sr-only">(selected)</span>}
                </CommandItem>
              );
            })}
          </CommandList>
        </Command>
      </PopoverContent>
    </Popover>
  );
}

export { Combobox, type ComboboxOption, type ComboboxProps, type ComboboxSingleProps, type ComboboxMultipleProps };
```

## alert

Inline callout in info, success, warning, danger and neutral, with icon, action and dismiss.

Install: `curl -fsSL https://ui.digitexa.com/dx.mjs | node --input-type=module - add alert`
Also adds: utils, theme
npm: class-variance-authority@^0.7.1 lucide-react@^1.61.0

```tsx
import { Alert, AlertTitle, AlertDescription, alertVariants } from "@/components/ui/alert";
```

### Example

```tsx
import * as React from "react";
import { CalendarClockIcon } from "lucide-react";

import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
import { Button } from "@/components/ui/button";

export default function Demo() {
  const [showTip, setShowTip] = React.useState(true);
  return (
    <div className="flex max-w-xl flex-col gap-3">
      <Alert variant="info">
        <AlertTitle>Sprint 14 starts Monday</AlertTitle>
        <AlertDescription>Unestimated issues in the backlog won't be pulled into the sprint.</AlertDescription>
      </Alert>
      <Alert variant="success">
        <AlertTitle>Milestone reached</AlertTitle>
        <AlertDescription>All 24 issues in “Website redesign” are done.</AlertDescription>
      </Alert>
      <Alert
        variant="warning"
        action={
          <Button size="sm" variant="secondary">
            Review
          </Button>
        }
      >
        <AlertTitle>3 tasks are overdue</AlertTitle>
        <AlertDescription>Mobile onboarding slipped past its due date.</AlertDescription>
      </Alert>
      <Alert variant="danger">
        <AlertTitle>GitHub sync failed</AlertTitle>
        <AlertDescription>
          Reconnect the integration in <a href="#preview">workspace settings</a>.
        </AlertDescription>
      </Alert>
      {showTip && (
        <Alert icon={<CalendarClockIcon aria-hidden />} onDismiss={() => setShowTip(false)}>
          <AlertDescription>Tip: press C anywhere to create a task.</AlertDescription>
        </Alert>
      )}
      <Alert variant="neutral" icon={false}>
        <AlertDescription>No icon, neutral: this project is read-only for guests.</AlertDescription>
      </Alert>
    </div>
  );
}
```

### Source: ui/alert.tsx

```tsx
import * as React from "react";
import { cva, type VariantProps } from "class-variance-authority";
import { CircleAlertIcon, CircleCheckIcon, InfoIcon, TriangleAlertIcon, XIcon } from "lucide-react";

import { cn } from "@/lib/utils";

const alertVariants = cva(
  [
    "relative flex w-full items-start gap-2.5 rounded-lg border px-3 py-2.5 text-base",
    "[&>svg]:mt-0.5 [&>svg]:size-4 [&>svg]:shrink-0",
  ],
  {
    variants: {
      variant: {
        neutral: "border-border bg-bg-subtle text-fg [&>svg]:text-fg-muted",
        info: "border-[color-mix(in_oklch,var(--dx-info)_25%,transparent)] bg-info-subtle text-info-fg",
        success: "border-[color-mix(in_oklch,var(--dx-success)_25%,transparent)] bg-success-subtle text-success-fg",
        warning: "border-[color-mix(in_oklch,var(--dx-warning)_30%,transparent)] bg-warning-subtle text-warning-fg",
        danger: "border-[color-mix(in_oklch,var(--dx-danger)_25%,transparent)] bg-danger-subtle text-danger-fg-subtle",
      },
    },
    defaultVariants: { variant: "neutral" },
  },
);

type AlertVariant = NonNullable<VariantProps<typeof alertVariants>["variant"]>;

const defaultIcons: Record<AlertVariant, React.ComponentType<React.ComponentProps<"svg">>> = {
  neutral: InfoIcon,
  info: InfoIcon,
  success: CircleCheckIcon,
  warning: TriangleAlertIcon,
  danger: CircleAlertIcon,
};

type AlertProps = React.ComponentProps<"div"> &
  VariantProps<typeof alertVariants> & {
    /** Replaces the variant's icon; `false` hides it. */
    icon?: React.ReactNode | false;
    /** Right-aligned slot, e.g. a small button. */
    action?: React.ReactNode;
    /** Shows a close button when set. */
    onDismiss?: () => void;
    dismissLabel?: string;
  };

function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
  return <div data-slot="alert-title" className={cn("font-medium", className)} {...props} />;
}

function AlertDescription({ className, ...props }: React.ComponentProps<"div">) {
  // stays on the variant's -fg color; muted text would fail contrast on the tinted backgrounds
  return <div data-slot="alert-description" className={cn("text-sm [&_a]:font-medium [&_a]:underline", className)} {...props} />;
}

export { Alert, AlertTitle, AlertDescription, alertVariants, type AlertProps };
```

## alert-dialog

Confirmation dialog that needs an explicit choice, with a danger action option.

Install: `curl -fsSL https://ui.digitexa.com/dx.mjs | node --input-type=module - add alert-dialog`
Also adds: button, utils, theme
npm: @radix-ui/react-alert-dialog@^1.2.1

```tsx
import { AlertDialog, AlertDialogTrigger, AlertDialogPortal, AlertDialogOverlay, AlertDialogContent, AlertDialogHeader, AlertDialogBody, AlertDialogFooter, AlertDialogTitle, AlertDialogDescription, AlertDialogAction, AlertDialogCancel } from "@/components/ui/alert-dialog";
```

### Example

```tsx
import { ArchiveIcon, TrashIcon } from "lucide-react";

import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@/components/ui/alert-dialog";
import { Button } from "@/components/ui/button";

export default function Demo() {
  return (
    <div className="flex flex-wrap gap-2">
      <AlertDialog>
        <AlertDialogTrigger asChild>
          <Button variant="danger">
            <TrashIcon /> Delete project
          </Button>
        </AlertDialogTrigger>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>Delete “Website redesign”?</AlertDialogTitle>
            <AlertDialogDescription>
              All 48 tasks, comments and attachments will be removed for everyone. This can't be undone.
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel>Cancel</AlertDialogCancel>
            <AlertDialogAction variant="danger">Delete project</AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>

<AlertDialog>
        <AlertDialogTrigger asChild>
          <Button>
            <ArchiveIcon /> Archive sprint
          </Button>
        </AlertDialogTrigger>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>Archive Sprint 13?</AlertDialogTitle>
            <AlertDialogDescription>5 unfinished tasks will move to the backlog.</AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel>Keep open</AlertDialogCancel>
            <AlertDialogAction>Archive</AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
    </div>
  );
}
```

### Source: ui/alert-dialog.tsx

```tsx
"use client";

import * as React from "react";
import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";

import { buttonVariants } from "@/components/ui/button";
import { cn } from "@/lib/utils";

const AlertDialog = AlertDialogPrimitive.Root;
const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
const AlertDialogPortal = AlertDialogPrimitive.Portal;

function AlertDialogOverlay({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
  return (
    <AlertDialogPrimitive.Overlay
      data-slot="alert-dialog-overlay"
      className={cn(
        "fixed inset-0 z-(--dx-z-overlay) bg-overlay",
        "data-[state=open]:animate-[dx-fade-in_var(--dx-motion)_var(--dx-motion-ease)]",
        "data-[state=closed]:animate-[dx-fade-out_var(--dx-motion-fast)_ease-in]",
        className,
      )}
      {...props}
    />
  );
}

type AlertDialogContentProps = React.ComponentProps<typeof AlertDialogPrimitive.Content> & {
  size?: "sm" | "md" | "lg";
};

const contentSizes = { sm: "max-w-sm", md: "max-w-md", lg: "max-w-xl" };

/** No close button and no outside-click dismiss: the user has to pick Cancel or the action. */
function AlertDialogContent({ className, size = "sm", ...props }: AlertDialogContentProps) {
  return (
    <AlertDialogPortal>
      <AlertDialogOverlay />
      <AlertDialogPrimitive.Content
        data-slot="alert-dialog-content"
        className={cn(
          "fixed top-1/2 left-1/2 z-(--dx-z-overlay) flex max-h-[calc(100dvh-2rem)] w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 flex-col",
          "rounded-lg border border-border bg-surface-raised text-fg shadow-lg outline-none",
          // scale + opacity only: translate is already used for centring
          "data-[state=open]:animate-[dx-pop-in_var(--dx-motion)_var(--dx-motion-ease)]",
          "data-[state=closed]:animate-[dx-pop-out_var(--dx-motion-fast)_ease-in]",
          contentSizes[size],
          className,
        )}
        {...props}
      />
    </AlertDialogPortal>
  );
}

function AlertDialogHeader({ className, ...props }: React.ComponentProps<"div">) {
  return <div data-slot="alert-dialog-header" className={cn("flex shrink-0 flex-col gap-1 px-4 pt-4 pb-3", className)} {...props} />;
}

function AlertDialogBody({ className, ...props }: React.ComponentProps<"div">) {
  return <div data-slot="alert-dialog-body" className={cn("flex min-h-0 flex-col gap-3 overflow-y-auto px-4 pb-4", className)} {...props} />;
}

function AlertDialogFooter({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="alert-dialog-footer"
      className={cn(
        "flex shrink-0 items-center justify-end gap-2 border-t border-border bg-bg-subtle rounded-b-[calc(var(--dx-radius-large)-1px)] px-4 py-2.5",
        className,
      )}
      {...props}
    />
  );
}

function AlertDialogTitle({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
  return <AlertDialogPrimitive.Title data-slot="alert-dialog-title" className={cn("text-md font-semibold", className)} {...props} />;
}

function AlertDialogDescription({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
  return (
    <AlertDialogPrimitive.Description
      data-slot="alert-dialog-description"
      className={cn("text-sm text-fg-muted", className)}
      {...props}
    />
  );
}

type AlertDialogActionProps = React.ComponentProps<typeof AlertDialogPrimitive.Action> & {
  /** `danger` for destructive confirmations (delete, archive, revoke). */
  variant?: "primary" | "danger";
  size?: "sm" | "md";
};

function AlertDialogAction({ className, variant = "primary", size = "md", ...props }: AlertDialogActionProps) {
  return (
    <AlertDialogPrimitive.Action
      data-slot="alert-dialog-action"
      className={cn(buttonVariants({ variant, size }), className)}
      {...props}
    />
  );
}

function AlertDialogCancel({
  className,
  size = "md",
  ...props
}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel> & { size?: "sm" | "md" }) {
  return (
    <AlertDialogPrimitive.Cancel
      data-slot="alert-dialog-cancel"
      className={cn(buttonVariants({ variant: "secondary", size }), className)}
      {...props}
    />
  );
}

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

## sheet

Side panel built on Dialog that slides in from any edge, in four sizes.

Install: `curl -fsSL https://ui.digitexa.com/dx.mjs | node --input-type=module - add sheet`
Also adds: utils, theme
npm: @radix-ui/react-dialog@^1.3.1 class-variance-authority@^0.7.1 lucide-react@^1.61.0

```tsx
import { Sheet, SheetTrigger, SheetClose, SheetPortal, SheetOverlay, SheetContent, SheetHeader, SheetBody, SheetFooter, SheetTitle, SheetDescription, sheetVariants } from "@/components/ui/sheet";
```

### Example

```tsx
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import {
  Sheet,
  SheetBody,
  SheetClose,
  SheetContent,
  SheetDescription,
  SheetFooter,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from "@/components/ui/sheet";
import { Textarea } from "@/components/ui/textarea";

const sides = ["right", "left", "top", "bottom"] as const;

export default function Demo() {
  return (
    <div className="flex flex-col gap-3">
      <Sheet>
        <SheetTrigger asChild>
          <Button variant="primary" className="self-start">
            Open task
          </Button>
        </SheetTrigger>
        <SheetContent size="md">
          <SheetHeader>
            <SheetTitle>DX-142 · Redesign pricing page</SheetTitle>
            <SheetDescription>In progress · assigned to Maya</SheetDescription>
          </SheetHeader>
          <SheetBody>
            <div className="flex flex-col gap-1.5">
              <Label htmlFor="sheet-title">Title</Label>
              <Input id="sheet-title" defaultValue="Redesign pricing page" />
            </div>
            <div className="flex flex-col gap-1.5">
              <Label htmlFor="sheet-desc">Description</Label>
              <Textarea id="sheet-desc" defaultValue="Align the plan cards with the new brand grid and add an annual toggle." />
            </div>
          </SheetBody>
          <SheetFooter>
            <SheetClose asChild>
              <Button>Cancel</Button>
            </SheetClose>
            <SheetClose asChild>
              <Button variant="primary">Save changes</Button>
            </SheetClose>
          </SheetFooter>
        </SheetContent>
      </Sheet>

<div className="flex flex-wrap gap-2">
        {sides.map((side) => (
          <Sheet key={side}>
            <SheetTrigger asChild>
              <Button size="sm" className="capitalize">
                {side}
              </Button>
            </SheetTrigger>
            <SheetContent side={side} size="sm">
              <SheetHeader>
                <SheetTitle className="capitalize">{side} sheet</SheetTitle>
                <SheetDescription>Filters for the Q3 roadmap board.</SheetDescription>
              </SheetHeader>
              <SheetBody>
                <p className="text-sm text-fg-muted">Status, assignee and label filters would live here.</p>
              </SheetBody>
            </SheetContent>
          </Sheet>
        ))}
      </div>
    </div>
  );
}
```

### Source: ui/sheet.tsx

```tsx
"use client";

import * as React from "react";
import * as DialogPrimitive from "@radix-ui/react-dialog";
import { cva, type VariantProps } from "class-variance-authority";
import { XIcon } from "lucide-react";

import { cn } from "@/lib/utils";

const Sheet = DialogPrimitive.Root;
const SheetTrigger = DialogPrimitive.Trigger;
const SheetClose = DialogPrimitive.Close;
const SheetPortal = DialogPrimitive.Portal;

function SheetOverlay({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
  return (
    <DialogPrimitive.Overlay
      data-slot="sheet-overlay"
      className={cn(
        "fixed inset-0 z-(--dx-z-overlay) bg-overlay",
        "data-[state=open]:animate-[dx-fade-in_var(--dx-motion)_var(--dx-motion-ease)]",
        "data-[state=closed]:animate-[dx-fade-out_var(--dx-motion)_ease-in]",
        className,
      )}
      {...props}
    />
  );
}

/*
 * Slide motion without extra keyframes: the panel enters with a `translate` transition from
 * @starting-style (`starting:`), and exits with the same transition on data-[state=closed].
 * The steps(1,end) fade keeps the panel opaque but gives Radix an animation to wait for
 * before unmounting. Durations follow --dx-motion*, so reduced motion makes it instant.
 */
const sheetVariants = cva(
  [
    "fixed z-(--dx-z-overlay) flex flex-col border-border bg-surface-raised text-fg shadow-lg outline-none",
    "transition-[translate] duration-(--dx-motion-slow) ease-out",
    "data-[state=closed]:duration-(--dx-motion) data-[state=closed]:ease-in",
    "data-[state=closed]:animate-[dx-fade-out_var(--dx-motion)_steps(1,end)]",
  ],
  {
    variants: {
      side: {
        right: "inset-y-0 right-0 h-full w-[calc(100%-2rem)] border-l starting:translate-x-full data-[state=closed]:translate-x-full",
        left: "inset-y-0 left-0 h-full w-[calc(100%-2rem)] border-r starting:-translate-x-full data-[state=closed]:-translate-x-full",
        top: "inset-x-0 top-0 max-h-[calc(100dvh-2rem)] border-b starting:-translate-y-full data-[state=closed]:-translate-y-full",
        bottom:
          "inset-x-0 bottom-0 max-h-[calc(100dvh-2rem)] rounded-t-xl border-t starting:translate-y-full data-[state=closed]:translate-y-full",
      },
      size: { sm: "", md: "", lg: "", xl: "" },
    },
    compoundVariants: [
      // width for side panels, max height for top/bottom
      { side: ["left", "right"], size: "sm", className: "max-w-sm" },
      { side: ["left", "right"], size: "md", className: "max-w-md" },
      { side: ["left", "right"], size: "lg", className: "max-w-xl" },
      { side: ["left", "right"], size: "xl", className: "max-w-3xl" },
      { side: ["top", "bottom"], size: "sm", className: "h-[30dvh]" },
      { side: ["top", "bottom"], size: "lg", className: "h-[70dvh]" },
      { side: ["top", "bottom"], size: "xl", className: "h-[calc(100dvh-2rem)]" },
    ],
    defaultVariants: { side: "right", size: "md" },
  },
);

type SheetContentProps = React.ComponentProps<typeof DialogPrimitive.Content> &
  VariantProps<typeof sheetVariants> & {
    hideClose?: boolean;
  };

function SheetContent({ className, children, side, size, hideClose = false, ...props }: SheetContentProps) {
  return (
    <SheetPortal>
      <SheetOverlay />
      <DialogPrimitive.Content
        data-slot="sheet-content"
        data-side={side ?? "right"}
        className={cn(sheetVariants({ side, size }), className)}
        {...props}
      >
        {children}
        {!hideClose && (
          <DialogPrimitive.Close
            className={cn(
              "absolute top-2.5 right-2.5 grid size-6 place-items-center rounded-sm text-fg-subtle",
              "hover:bg-muted hover:text-fg",
            )}
          >
            <XIcon className="size-3.5" />
            <span className="sr-only">Close</span>
          </DialogPrimitive.Close>
        )}
      </DialogPrimitive.Content>
    </SheetPortal>
  );
}

function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="sheet-header"
      className={cn("flex shrink-0 flex-col gap-1 border-b border-border px-4 pt-4 pb-3 pr-10", className)}
      {...props}
    />
  );
}

function SheetBody({ className, ...props }: React.ComponentProps<"div">) {
  return <div data-slot="sheet-body" className={cn("flex min-h-0 flex-1 flex-col gap-3 overflow-y-auto p-4", className)} {...props} />;
}

function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="sheet-footer"
      className={cn("mt-auto flex shrink-0 items-center justify-end gap-2 border-t border-border bg-bg-subtle px-4 py-2.5", className)}
      {...props}
    />
  );
}

function SheetTitle({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Title>) {
  return <DialogPrimitive.Title data-slot="sheet-title" className={cn("text-md font-semibold", className)} {...props} />;
}

function SheetDescription({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Description>) {
  return <DialogPrimitive.Description data-slot="sheet-description" className={cn("text-sm text-fg-muted", className)} {...props} />;
}

export {
  Sheet,
  SheetTrigger,
  SheetClose,
  SheetPortal,
  SheetOverlay,
  SheetContent,
  SheetHeader,
  SheetBody,
  SheetFooter,
  SheetTitle,
  SheetDescription,
  sheetVariants,
};
```

## toast

Dependency-free toasts: call toast(), mount one Toaster; stacks, pauses on hover, promises.

Install: `curl -fsSL https://ui.digitexa.com/dx.mjs | node --input-type=module - add toast`
Also adds: button, spinner, utils, theme
npm: lucide-react@^1.61.0

```tsx
import { Toaster, toast, useToasts } from "@/components/ui/toast";
```

### Example

```tsx
import * as React from "react";
import { Button } from "@/components/ui/button";
import { Toaster, toast } from "@/components/ui/toast";

function saveSprint() {
  return new Promise<{ name: string }>((resolve) => setTimeout(() => resolve({ name: "Sprint 14" }), 1500));
}

const statuses = ["backlog", "todo", "progress", "review", "done"] as const;

export default function Demo() {
  return (
    <div className="flex flex-col gap-3">
      <Row label="Type">
        <Button onClick={() => toast("Task moved to In review")}>Default</Button>
        <Button onClick={() => toast.success("Task created", { description: "DX-148 · Write release notes" })}>Success</Button>
        <Button onClick={() => toast.error("Couldn't upload file", { description: "roadmap.pdf is larger than 25 MB." })}>Error</Button>
        <Button onClick={() => toast.info("Maya joined the project")}>Info</Button>
        <Button onClick={() => toast.warning("Sprint ends tomorrow", { description: "6 tasks are still open." })}>Warning</Button>
      </Row>
      <Row label="More">
        <Button
          onClick={() =>
            toast("Task archived", {
              description: "DX-131 · Update onboarding copy",
              action: { label: "Undo", onClick: () => toast.success("Task restored") },
            })
          }
        >
          With action
        </Button>
        <Button
          onClick={() =>
            toast.promise(saveSprint(), {
              loading: "Saving sprint…",
              success: (sprint) => `${sprint.name} saved`,
              error: "Couldn't save the sprint",
            })
          }
        >
          Promise
        </Button>
        <Button onClick={() => toast("Deploy pinned", { duration: Infinity, description: "Stays until dismissed." })}>Persistent</Button>
        <Button variant="ghost" onClick={() => toast.dismiss()}>
          Dismiss all
        </Button>
      </Row>
      {/* the docs layout has no Toaster, so this demo mounts its own */}
      <Toaster position="bottom-right" />
    </div>
  );
}
```

### Source: ui/toast.tsx

```tsx
"use client";

import * as React from "react";
import { CircleAlertIcon, CircleCheckIcon, InfoIcon, TriangleAlertIcon, XIcon } from "lucide-react";

import { Button } from "@/components/ui/button";
import { Spinner } from "@/components/ui/spinner";
import { cn } from "@/lib/utils";

/* ---------- store: a tiny external store read with useSyncExternalStore ---------- */

type ToastAction = { label: React.ReactNode; onClick: (event: React.MouseEvent<HTMLButtonElement>) => void };

type ToastOptions = {
  /** Reuse an id to update a toast in place instead of adding a new one. */
  id?: ToastId;
  description?: React.ReactNode;
  action?: ToastAction;
  /** Milliseconds; `Infinity` keeps it until dismissed. Default 4000 (loading toasts never expire). */
  duration?: number;
  /** Hide the close button. */
  dismissible?: boolean;
  onDismiss?: (id: ToastId) => void;
};

type ToastData = ToastOptions & {
  id: ToastId;
  type: ToastType;
  title: React.ReactNode;
  /** bumped on every update so the timer restarts */
  version: number;
  closing: boolean;
};

const DEFAULT_DURATION = 4000;
const EXIT_MS = 200;
const MAX_STORED = 20;

let toasts: ToastData[] = [];
let counter = 0;
const listeners = new Set<() => void>();
const empty: ToastData[] = [];

function emit() {
  for (const listener of listeners) listener();
}

function subscribe(listener: () => void) {
  listeners.add(listener);
  return () => {
    listeners.delete(listener);
  };
}

type PromiseMessages<T> = {
  loading: React.ReactNode;
  success: React.ReactNode | ((value: T) => React.ReactNode);
  error: React.ReactNode | ((error: unknown) => React.ReactNode);
};

function promise<T>(input: Promise<T> | (() => Promise<T>), messages: PromiseMessages<T>, options: Omit<ToastOptions, "id"> = {}) {
  const id = upsert("loading", messages.loading, { ...options, duration: Infinity });
  const p = typeof input === "function" ? input() : input;
  p.then(
    (value) => {
      const title = typeof messages.success === "function" ? messages.success(value) : messages.success;
      upsert("success", title, { ...options, id });
    },
    (error: unknown) => {
      const title = typeof messages.error === "function" ? messages.error(error) : messages.error;
      upsert("error", title, { ...options, id });
    },
  );
  return p;
}

/**
 * toast("Saved") · toast.success("Task created", { description, action }) · toast.error(...)
 * toast.promise(save(), { loading: "Saving…", success: "Saved", error: "Couldn't save" })
 * toast.dismiss(id) — or toast.dismiss() for all. Mount <Toaster /> once.
 */
const toast = Object.assign((title: React.ReactNode, options?: ToastOptions) => upsert("default", title, options), {
  success: (title: React.ReactNode, options?: ToastOptions) => upsert("success", title, options),
  error: (title: React.ReactNode, options?: ToastOptions) => upsert("error", title, options),
  warning: (title: React.ReactNode, options?: ToastOptions) => upsert("warning", title, options),
  info: (title: React.ReactNode, options?: ToastOptions) => upsert("info", title, options),
  loading: (title: React.ReactNode, options?: ToastOptions) => upsert("loading", title, options),
  promise,
  dismiss,
});

function useToasts() {
  return React.useSyncExternalStore(
    subscribe,
    () => toasts,
    () => empty,
  );
}

/* ---------- UI ---------- */

const positions: Record<ToasterPosition, string> = {
  "top-left": "top-0 left-0 items-start",
  "top-center": "top-0 left-1/2 -translate-x-1/2 items-center",
  "top-right": "top-0 right-0 items-end",
  "bottom-left": "bottom-0 left-0 items-start",
  "bottom-center": "bottom-0 left-1/2 -translate-x-1/2 items-center",
  "bottom-right": "bottom-0 right-0 items-end",
};

const icons: Partial<Record<ToastType, React.ReactNode>> = {
  success: <CircleCheckIcon className="text-success" aria-hidden />,
  error: <CircleAlertIcon className="text-danger" aria-hidden />,
  warning: <TriangleAlertIcon className="text-warning" aria-hidden />,
  info: <InfoIcon className="text-info" aria-hidden />,
  loading: <Spinner size="md" className="text-fg-muted" aria-hidden />,
};

type ToasterProps = React.ComponentProps<"section"> & {
  position?: ToasterPosition;
  /** How many toasts show at once; newer ones push older ones into a queue. */
  visibleToasts?: number;
  /** Default duration for toasts that don't set one. */
  duration?: number;
};

function Toaster({ className, position = "bottom-right", visibleToasts = 3, duration = DEFAULT_DURATION, ...props }: ToasterProps) {
  const all = useToasts();
  const [paused, setPaused] = React.useState(false);
  const isTop = position.startsWith("top");
  const visible = all.slice(-visibleToasts);
  // newest sits closest to the screen edge
  const ordered = isTop ? [...visible].reverse() : visible;

return (
    <section
      data-slot="toaster"
      aria-label="Notifications"
      aria-live="polite"
      aria-relevant="additions text"
      className={cn("pointer-events-none fixed z-(--dx-z-toast) flex flex-col p-3 sm:p-4", positions[position], className)}
      {...props}
    >
      <ol
        className="flex w-[356px] max-w-[calc(100vw-1.5rem)] flex-col"
        onMouseEnter={() => setPaused(true)}
        onMouseLeave={() => setPaused(false)}
        onFocus={() => setPaused(true)}
        onBlur={(e) => {
          if (!e.currentTarget.contains(e.relatedTarget)) setPaused(false);
        }}
      >
        {ordered.map((t) => (
          <ToastItem key={t.id} toast={t} paused={paused} defaultDuration={duration} fromTop={isTop} />
        ))}
      </ol>
    </section>
  );
}

function ToastItem({
  toast: t,
  paused,
  defaultDuration,
  fromTop,
}: {
  toast: ToastData;
  paused: boolean;
  defaultDuration: number;
  fromTop: boolean;
}) {
  const duration = t.type === "loading" ? Infinity : (t.duration ?? defaultDuration);
  const remaining = React.useRef(duration);

// an update (e.g. promise settled) restarts the countdown
  React.useEffect(() => {
    remaining.current = duration;
  }, [t.version, duration]);

React.useEffect(() => {
    if (paused || t.closing || !Number.isFinite(duration)) return;
    const start = Date.now();
    const timer = setTimeout(() => dismiss(t.id), Math.max(0, remaining.current));
    return () => {
      clearTimeout(timer);
      remaining.current -= Date.now() - start;
    };
  }, [paused, t.closing, t.id, t.version, duration]);

const icon = icons[t.type];

return (
    // padding instead of gap: no dead zone between toasts, so hover-pause doesn't flicker
    <li className="pointer-events-auto w-full py-1">
      <div
        data-slot="toast"
        data-type={t.type}
        data-state={t.closing ? "closed" : "open"}
        style={{ "--dx-float-y": fromTop ? "-8px" : "8px" } as React.CSSProperties}
        className={cn(
          "flex w-full items-start gap-2.5 rounded-lg border border-border bg-surface-raised p-3 text-fg shadow-lg",
          "[&>svg]:mt-0.5 [&>svg]:size-4 [&>svg]:shrink-0",
          "data-[state=open]:animate-[dx-float-in_var(--dx-motion-slow)_var(--dx-motion-ease)]",
          "data-[state=closed]:animate-[dx-fade-out_var(--dx-motion-fast)_ease-in_forwards]",
        )}
      >
        {icon}
        <div className="flex min-w-0 flex-1 flex-col gap-0.5">
          <div className="text-base font-medium">{t.title}</div>
          {t.description && <div className="text-sm text-fg-muted">{t.description}</div>}
        </div>
        {t.action && (
          <Button
            size="sm"
            className="-my-0.5 shrink-0"
            onClick={(e) => {
              t.action?.onClick(e);
              if (!e.defaultPrevented) dismiss(t.id);
            }}
          >
            {t.action.label}
          </Button>
        )}
        {t.dismissible !== false && (
          <button
            type="button"
            onClick={() => dismiss(t.id)}
            className="-my-0.5 -mr-1 grid size-6 shrink-0 place-items-center rounded-sm text-fg-subtle hover:bg-muted hover:text-fg"
          >
            <XIcon className="size-3.5" aria-hidden />
            <span className="sr-only">Dismiss notification</span>
          </button>
        )}
      </div>
    </li>
  );
}

export { Toaster, toast, useToasts, type ToasterProps, type ToastOptions, type ToastType, type ToastId };
```

## spinner

Accessible loading spinner in five sizes that takes the current text color.

Install: `curl -fsSL https://ui.digitexa.com/dx.mjs | node --input-type=module - add spinner`
Also adds: utils, theme
npm: class-variance-authority@^0.7.1

```tsx
import { Spinner, spinnerVariants } from "@/components/ui/spinner";
```

### Example

```tsx
import * as React from "react";
import { Button } from "@/components/ui/button";
import { Spinner } from "@/components/ui/spinner";

const statuses = ["backlog", "todo", "progress", "review", "done"] as const;

export default function Demo() {
  return (
    <div className="flex flex-col gap-3">
      <Row label="Size">
        <Spinner size="xs" />
        <Spinner size="sm" />
        <Spinner size="md" />
        <Spinner size="lg" />
        <Spinner size="xl" />
      </Row>
      <Row label="Color">
        <Spinner className="text-fg-subtle" />
        <Spinner className="text-accent" />
        <Spinner className="text-success" />
      </Row>
      <Row label="In use">
        <Button variant="primary" disabled>
          <Spinner aria-hidden /> Saving…
        </Button>
        <span className="flex items-center gap-2 text-sm text-fg-muted">
          <Spinner size="sm" label="Syncing issues" /> Syncing 12 issues from GitHub
        </span>
      </Row>
    </div>
  );
}
```

### Source: ui/spinner.tsx

```tsx
import * as React from "react";
import { cva, type VariantProps } from "class-variance-authority";

import { cn } from "@/lib/utils";

const spinnerVariants = cva("shrink-0 animate-spin", {
  variants: {
    size: {
      xs: "size-3",
      sm: "size-3.5",
      md: "size-4",
      lg: "size-5",
      xl: "size-6",
    },
  },
  defaultVariants: { size: "md" },
});

type SpinnerProps = Omit<React.ComponentProps<"svg">, "children"> &
  VariantProps<typeof spinnerVariants> & {
    /** Accessible name. Pass `aria-hidden` instead when a visible label sits next to it. */
    label?: string;
  };

/**
 * Inherits the text color. With reduced motion the global rule stops the rotation,
 * leaving a static arc that still reads as "busy".
 */
function Spinner({ className, size, label = "Loading", ...props }: SpinnerProps) {
  const hidden = props["aria-hidden"] === true || props["aria-hidden"] === "true";
  return (
    <svg
      data-slot="spinner"
      viewBox="0 0 24 24"
      fill="none"
      role={hidden ? undefined : "status"}
      aria-label={hidden ? undefined : label}
      className={cn(spinnerVariants({ size }), className)}
      {...props}
    >
      <circle cx="12" cy="12" r="9.5" stroke="currentColor" strokeWidth="3" className="opacity-20" />
      <path d="M21.5 12A9.5 9.5 0 0 0 12 2.5" stroke="currentColor" strokeWidth="3" strokeLinecap="round" />
    </svg>
  );
}

export { Spinner, spinnerVariants, type SpinnerProps };
```

## empty-state

Placeholder for empty views with icon, title, description and actions; dashed variant.

Install: `curl -fsSL https://ui.digitexa.com/dx.mjs | node --input-type=module - add empty-state`
Also adds: utils, theme
npm: class-variance-authority@^0.7.1

```tsx
import { EmptyState, emptyStateVariants } from "@/components/ui/empty-state";
```

### Example

```tsx
import { FolderPlusIcon, InboxIcon, SearchXIcon } from "lucide-react";

import { Button } from "@/components/ui/button";
import { EmptyState } from "@/components/ui/empty-state";

export default function Demo() {
  return (
    <div className="grid gap-4 md:grid-cols-2">
      <EmptyState
        variant="dashed"
        icon={<FolderPlusIcon />}
        title="No projects yet"
        description="Projects group tasks, docs and milestones. Create one to get your team started."
        actions={
          <>
            <Button variant="primary">New project</Button>
            <Button>Import from CSV</Button>
          </>
        }
      />
      <EmptyState
        icon={<SearchXIcon />}
        title="No tasks match your filters"
        description="Try removing the “Assigned to me” filter or searching all projects."
        actions={<Button variant="ghost">Clear filters</Button>}
      />
      <EmptyState className="md:col-span-2" variant="dashed" icon={<InboxIcon />} title="Inbox zero" description="You're all caught up." />
    </div>
  );
}
```

### Source: ui/empty-state.tsx

```tsx
import * as React from "react";
import { cva, type VariantProps } from "class-variance-authority";

import { cn } from "@/lib/utils";

const emptyStateVariants = cva("flex w-full flex-col items-center justify-center gap-3 px-6 py-10 text-center", {
  variants: {
    variant: {
      default: "",
      dashed: "rounded-lg border border-dashed border-border-strong bg-bg-subtle",
    },
  },
  defaultVariants: { variant: "default" },
});

type EmptyStateProps = Omit<React.ComponentProps<"div">, "title"> &
  VariantProps<typeof emptyStateVariants> & {
    /** A lucide icon element, e.g. <InboxIcon />. */
    icon?: React.ReactNode;
    title: React.ReactNode;
    description?: React.ReactNode;
    /** Buttons or links, laid out in a row. */
    actions?: React.ReactNode;
  };

function EmptyState({ className, variant, icon, title, description, actions, children, ...props }: EmptyStateProps) {
  return (
    <div data-slot="empty-state" className={cn(emptyStateVariants({ variant }), className)} {...props}>
      {icon && (
        <div
          aria-hidden
          className="grid size-10 place-items-center rounded-lg border border-border bg-surface text-fg-subtle shadow-sm [&_svg]:size-5"
        >
          {icon}
        </div>
      )}
      <div className="flex max-w-sm flex-col gap-1">
        <h3 data-slot="empty-state-title" className="text-md font-semibold text-fg">
          {title}
        </h3>
        {description && (
          <p data-slot="empty-state-description" className="text-sm text-fg-muted">
            {description}
          </p>
        )}
      </div>
      {children}
      {actions && <div className="mt-1 flex flex-wrap items-center justify-center gap-2">{actions}</div>}
    </div>
  );
}

export { EmptyState, emptyStateVariants, type EmptyStateProps };
```

## hover-card

Popover-styled preview card that opens on hover or focus.

Install: `curl -fsSL https://ui.digitexa.com/dx.mjs | node --input-type=module - add hover-card`
Also adds: utils, theme
npm: @radix-ui/react-hover-card@^1.2.1

```tsx
import { HoverCard, HoverCardTrigger, HoverCardContent } from "@/components/ui/hover-card";
```

### Example

```tsx
import { Avatar } from "@/components/ui/avatar";
import { StatusBadge } from "@/components/ui/badge";
import { HoverCard, HoverCardContent, HoverCardTrigger } from "@/components/ui/hover-card";

export default function Demo() {
  return (
    <div className="text-base text-fg-muted">
      Blocked by{" "}
      <HoverCard>
        <HoverCardTrigger asChild>
          <a href="#preview" className="font-medium text-accent-subtle-fg underline-offset-4 hover:underline">
            DX-129
          </a>
        </HoverCardTrigger>
        <HoverCardContent className="flex flex-col gap-2">
          <div className="flex items-center justify-between gap-2">
            <span className="text-xs text-fg-subtle">DX-129</span>
            <StatusBadge status="review" />
          </div>
          <div className="text-base font-medium">Migrate billing to the new API</div>
          <p className="text-sm text-fg-muted">Webhooks need a retry queue before the old endpoint is switched off.</p>
          <div className="flex items-center gap-2 text-xs text-fg-muted">
            <Avatar name="Maya Chen" size="sm" /> Maya Chen · due Oct 28
          </div>
        </HoverCardContent>
      </HoverCard>
      , which is waiting on review.
    </div>
  );
}
```

### Source: ui/hover-card.tsx

```tsx
"use client";

import * as React from "react";
import * as HoverCardPrimitive from "@radix-ui/react-hover-card";

import { cn } from "@/lib/utils";

/** Preview on hover/focus. Pointer-only extras: keep anything essential reachable another way. */
function HoverCard({ openDelay = 500, closeDelay = 200, ...props }: React.ComponentProps<typeof HoverCardPrimitive.Root>) {
  return <HoverCardPrimitive.Root openDelay={openDelay} closeDelay={closeDelay} {...props} />;
}

const HoverCardTrigger = HoverCardPrimitive.Trigger;

function HoverCardContent({ className, align = "start", sideOffset = 6, ...props }: React.ComponentProps<typeof HoverCardPrimitive.Content>) {
  return (
    <HoverCardPrimitive.Portal>
      <HoverCardPrimitive.Content
        data-slot="hover-card-content"
        align={align}
        sideOffset={sideOffset}
        className={cn(
          "dx-float z-(--dx-z-dropdown) w-72 rounded-lg border border-border bg-surface-raised p-3 text-fg shadow-lg outline-none",
          className,
        )}
        {...props}
      />
    </HoverCardPrimitive.Portal>
  );
}

export { HoverCard, HoverCardTrigger, HoverCardContent };
```

## context-menu

Right-click menu with the same API and styles as DropdownMenu.

Install: `curl -fsSL https://ui.digitexa.com/dx.mjs | node --input-type=module - add context-menu`
Also adds: utils, theme
npm: @radix-ui/react-context-menu@^2.4.1 lucide-react@^1.61.0

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

### Example

```tsx
import * as React from "react";
import { ArchiveIcon, CopyIcon, LinkIcon, PencilIcon, TrashIcon, UserIcon } from "lucide-react";

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

export default function Demo() {
  const [priority, setPriority] = React.useState("high");
  const [subscribed, setSubscribed] = React.useState(true);
  return (
    <ContextMenu>
      <ContextMenuTrigger className="grid h-36 w-full max-w-sm place-items-center rounded-lg border border-dashed border-border-strong bg-bg-subtle text-sm text-fg-muted">
        Right-click the task card
      </ContextMenuTrigger>
      <ContextMenuContent className="w-56">
        <ContextMenuLabel>DX-142</ContextMenuLabel>
        <ContextMenuItem>
          <PencilIcon /> Edit <ContextMenuShortcut>E</ContextMenuShortcut>
        </ContextMenuItem>
        <ContextMenuItem>
          <CopyIcon /> Duplicate <ContextMenuShortcut>⌘D</ContextMenuShortcut>
        </ContextMenuItem>
        <ContextMenuItem>
          <LinkIcon /> Copy link <ContextMenuShortcut>⌘L</ContextMenuShortcut>
        </ContextMenuItem>
        <ContextMenuSub>
          <ContextMenuSubTrigger>
            <UserIcon /> Assign to
          </ContextMenuSubTrigger>
          <ContextMenuSubContent>
            <ContextMenuItem>Maya Chen</ContextMenuItem>
            <ContextMenuItem>Leo Park</ContextMenuItem>
            <ContextMenuItem disabled>Sam Ortiz (away)</ContextMenuItem>
          </ContextMenuSubContent>
        </ContextMenuSub>
        <ContextMenuSeparator />
        <ContextMenuLabel>Priority</ContextMenuLabel>
        <ContextMenuRadioGroup value={priority} onValueChange={setPriority}>
          <ContextMenuRadioItem value="urgent">Urgent</ContextMenuRadioItem>
          <ContextMenuRadioItem value="high">High</ContextMenuRadioItem>
          <ContextMenuRadioItem value="low">Low</ContextMenuRadioItem>
        </ContextMenuRadioGroup>
        <ContextMenuSeparator />
        <ContextMenuCheckboxItem checked={subscribed} onCheckedChange={setSubscribed}>
          Subscribed to updates
        </ContextMenuCheckboxItem>
        <ContextMenuSeparator />
        <ContextMenuItem>
          <ArchiveIcon /> Archive
        </ContextMenuItem>
        <ContextMenuItem variant="danger">
          <TrashIcon /> Delete <ContextMenuShortcut>⌫</ContextMenuShortcut>
        </ContextMenuItem>
      </ContextMenuContent>
    </ContextMenu>
  );
}
```

### Source: ui/context-menu.tsx

```tsx
"use client";

import * as React from "react";
import * as MenuPrimitive from "@radix-ui/react-context-menu";
import { CheckIcon, ChevronRightIcon } from "lucide-react";

import { cn } from "@/lib/utils";

const ContextMenu = MenuPrimitive.Root;
const ContextMenuGroup = MenuPrimitive.Group;
const ContextMenuSub = MenuPrimitive.Sub;
const ContextMenuRadioGroup = MenuPrimitive.RadioGroup;

/** Right-click (or long-press) area. Pair it with a visible menu button so keyboard users can reach the same actions. */
function ContextMenuTrigger(props: React.ComponentProps<typeof MenuPrimitive.Trigger>) {
  return <MenuPrimitive.Trigger data-slot="context-menu-trigger" {...props} />;
}

const panel = "dx-float z-(--dx-z-dropdown) min-w-44 overflow-hidden rounded-lg border border-border bg-surface-raised p-1 text-fg shadow-lg outline-none";

function ContextMenuContent({ className, ...props }: React.ComponentProps<typeof MenuPrimitive.Content>) {
  return (
    <MenuPrimitive.Portal>
      <MenuPrimitive.Content data-slot="context-menu-content" className={cn(panel, className)} {...props} />
    </MenuPrimitive.Portal>
  );
}

type ContextMenuItemProps = React.ComponentProps<typeof MenuPrimitive.Item> & { variant?: "default" | "danger" };

function ContextMenuItem({ className, variant = "default", ...props }: ContextMenuItemProps) {
  return (
    <MenuPrimitive.Item
      data-slot="context-menu-item"
      className={cn(item, variant === "danger" && "text-danger-fg-subtle data-highlighted:bg-danger-subtle [&_svg]:text-current", className)}
      {...props}
    />
  );
}

function ContextMenuCheckboxItem({ className, children, ...props }: React.ComponentProps<typeof MenuPrimitive.CheckboxItem>) {
  return (
    <MenuPrimitive.CheckboxItem data-slot="context-menu-checkbox-item" className={cn(item, "pl-7", className)} {...props}>
      <MenuPrimitive.ItemIndicator className="absolute left-2 grid place-items-center">
        <CheckIcon className="text-fg!" />
      </MenuPrimitive.ItemIndicator>
      {children}
    </MenuPrimitive.CheckboxItem>
  );
}

function ContextMenuRadioItem({ className, children, ...props }: React.ComponentProps<typeof MenuPrimitive.RadioItem>) {
  return (
    <MenuPrimitive.RadioItem data-slot="context-menu-radio-item" className={cn(item, "pl-7", className)} {...props}>
      <MenuPrimitive.ItemIndicator className="absolute left-2.5 grid place-items-center">
        <span className="size-1.5 rounded-full bg-fg" />
      </MenuPrimitive.ItemIndicator>
      {children}
    </MenuPrimitive.RadioItem>
  );
}

function ContextMenuLabel({ className, ...props }: React.ComponentProps<typeof MenuPrimitive.Label>) {
  return <MenuPrimitive.Label className={cn("px-2 pt-1.5 pb-1 text-2xs font-medium tracking-wide text-fg-subtle uppercase", className)} {...props} />;
}

function ContextMenuSeparator({ className, ...props }: React.ComponentProps<typeof MenuPrimitive.Separator>) {
  return <MenuPrimitive.Separator className={cn("-mx-1 my-1 h-px bg-border", className)} {...props} />;
}

function ContextMenuShortcut({ className, ...props }: React.ComponentProps<"span">) {
  return <span className={cn("ml-auto pl-4 text-xs text-fg-subtle", className)} {...props} />;
}

function ContextMenuSubTrigger({ className, children, ...props }: React.ComponentProps<typeof MenuPrimitive.SubTrigger>) {
  return (
    <MenuPrimitive.SubTrigger className={cn(item, "data-[state=open]:bg-muted", className)} {...props}>
      {children}
      <ChevronRightIcon className="ml-auto" />
    </MenuPrimitive.SubTrigger>
  );
}

function ContextMenuSubContent({ className, ...props }: React.ComponentProps<typeof MenuPrimitive.SubContent>) {
  return (
    <MenuPrimitive.Portal>
      <MenuPrimitive.SubContent className={cn(panel, className)} {...props} />
    </MenuPrimitive.Portal>
  );
}

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

## accordion

Single or multiple disclosure sections, plain or card style, animated height and chevron.

Install: `curl -fsSL https://ui.digitexa.com/dx.mjs | node --input-type=module - add accordion`
Also adds: utils, theme
npm: @radix-ui/react-accordion@^1.3.1 lucide-react@^1.61.0

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

### Example

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

const faq = [
  { id: "cycles", q: "How do cycles work?", a: "Cycles are two-week windows. Unfinished issues roll over to the next cycle automatically." },
  { id: "triage", q: "Who reviews the triage queue?", a: "The on-call engineer for the week triages new issues every morning before standup." },
  { id: "archive", q: "When are projects archived?", a: "Completed projects are archived 30 days after their last issue is closed." },
];

export default function Demo() {
  return (
    <div className="grid max-w-2xl gap-8">
      <Accordion type="single" collapsible defaultValue="cycles">
        {faq.map((item) => (
          <AccordionItem key={item.id} value={item.id}>
            <AccordionTrigger>{item.q}</AccordionTrigger>
            <AccordionContent>{item.a}</AccordionContent>
          </AccordionItem>
        ))}
      </Accordion>

<Accordion type="multiple" variant="card" defaultValue={["scope"]}>
        <AccordionItem value="scope">
          <AccordionTrigger>Scope · 12 issues</AccordionTrigger>
          <AccordionContent>Onboarding flow redesign, invite emails and the new workspace picker.</AccordionContent>
        </AccordionItem>
        <AccordionItem value="milestones">
          <AccordionTrigger>Milestones · 3</AccordionTrigger>
          <AccordionContent>Beta on Nov 4, public launch on Nov 18, retrospective on Nov 25.</AccordionContent>
        </AccordionItem>
        <AccordionItem value="risks">
          <AccordionTrigger>Risks</AccordionTrigger>
          <AccordionContent>Email deliverability is untested on the new sending domain.</AccordionContent>
        </AccordionItem>
      </Accordion>
    </div>
  );
}
```

### Source: ui/accordion.tsx

```tsx
"use client";

import * as React from "react";
import * as AccordionPrimitive from "@radix-ui/react-accordion";
import { ChevronDownIcon } from "lucide-react";

import { cn } from "@/lib/utils";

type AccordionProps = React.ComponentProps<typeof AccordionPrimitive.Root> & {
  /** "plain" = divided list, "card" = bordered surface */
  variant?: "plain" | "card";
};

function Accordion({ className, variant = "plain", children, ...props }: AccordionProps) {
  return (
    <AccordionPrimitive.Root
      data-slot="accordion"
      data-variant={variant}
      className={cn("group/accordion w-full", variant === "card" && "rounded-lg border border-border bg-surface shadow-sm", className)}
      {...props}
    >
      {children}
    </AccordionPrimitive.Root>
  );
}

function AccordionItem({ className, ...props }: React.ComponentProps<typeof AccordionPrimitive.Item>) {
  return (
    <AccordionPrimitive.Item
      data-slot="accordion-item"
      className={cn("border-b border-border group-data-[variant=card]/accordion:px-4 group-data-[variant=card]/accordion:last:border-b-0", className)}
      {...props}
    />
  );
}

function AccordionTrigger({ className, children, ...props }: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
  return (
    <AccordionPrimitive.Header className="flex">
      <AccordionPrimitive.Trigger
        data-slot="accordion-trigger"
        className={cn(
          "group/trigger flex min-h-(--dx-row-height) flex-1 items-center justify-between gap-3 py-2 text-left text-md font-medium text-fg outline-none",
          "transition-colors duration-(--dx-motion-fast) hover:text-fg-muted disabled:pointer-events-none disabled:opacity-50",
          "[&_svg]:size-3.5 [&_svg]:shrink-0",
          className,
        )}
        {...props}
      >
        {children}
        <ChevronDownIcon className="text-fg-subtle transition-transform duration-(--dx-motion) ease-out group-data-[state=open]/trigger:rotate-180" />
      </AccordionPrimitive.Trigger>
    </AccordionPrimitive.Header>
  );
}

function AccordionContent({ className, children, ...props }: React.ComponentProps<typeof AccordionPrimitive.Content>) {
  return (
    <AccordionPrimitive.Content
      data-slot="accordion-content"
      className={cn(
        "overflow-hidden text-base text-fg-muted [--dx-collapse-height:var(--radix-accordion-content-height)]",
        "data-[state=open]:animate-[dx-collapse-down_var(--dx-motion)_var(--dx-motion-ease)]",
        "data-[state=closed]:animate-[dx-collapse-up_var(--dx-motion-fast)_ease-in]",
      )}
      {...props}
    >
      <div className={cn("pb-3", className)}>{children}</div>
    </AccordionPrimitive.Content>
  );
}

export { Accordion, AccordionItem, AccordionTrigger, AccordionContent, type AccordionProps };
```

## collapsible

Radix Collapsible with a styled chevron trigger and animated content height.

Install: `curl -fsSL https://ui.digitexa.com/dx.mjs | node --input-type=module - add collapsible`
Also adds: utils, theme
npm: @radix-ui/react-collapsible@^1.2.1 lucide-react@^1.61.0

```tsx
import { Collapsible, CollapsibleTrigger, CollapsibleContent } from "@/components/ui/collapsible";
```

### Example

```tsx
import * as React from "react";
import { ChevronsUpDownIcon } from "lucide-react";

import { Button } from "@/components/ui/button";
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";

const subIssues = ["Draft invite email copy", "Hook up resend endpoint", "Add rate limiting"];

export default function Demo() {
  const [open, setOpen] = React.useState(false);
  return (
    <div className="grid max-w-sm gap-6">
      <Collapsible defaultOpen>
        <CollapsibleTrigger>Sub-issues · {subIssues.length}</CollapsibleTrigger>
        <CollapsibleContent>
          <ul className="mt-1 flex flex-col gap-0.5 pl-6 text-base text-fg">
            {subIssues.map((s) => (
              <li key={s} className="flex h-(--dx-control-md) items-center">
                {s}
              </li>
            ))}
          </ul>
        </CollapsibleContent>
      </Collapsible>

<Collapsible open={open} onOpenChange={setOpen} className="rounded-lg border border-border bg-surface">
        <div className="flex items-center justify-between gap-2 px-3 py-2">
          <span className="text-base font-medium text-fg">3 archived projects</span>
          <CollapsibleTrigger asChild>
            <Button variant="ghost" size="icon-sm" aria-label={open ? "Hide archived projects" : "Show archived projects"}>
              <ChevronsUpDownIcon />
            </Button>
          </CollapsibleTrigger>
        </div>
        <CollapsibleContent>
          <div className="border-t border-border px-3 py-2 text-base text-fg-muted">Website v1 · Q2 OKRs · Legacy billing</div>
        </CollapsibleContent>
      </Collapsible>
    </div>
  );
}
```

### Source: ui/collapsible.tsx

```tsx
"use client";

import * as React from "react";
import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
import { ChevronRightIcon } from "lucide-react";

import { cn } from "@/lib/utils";

function Collapsible(
  props: React.ComponentProps<typeof CollapsiblePrimitive.Root>,
) {
  return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />;
}

type CollapsibleTriggerProps = React.ComponentProps<
  typeof CollapsiblePrimitive.Trigger
> & {
  /** hide the leading chevron */
  hideIcon?: boolean;
};

/** Styled disclosure row with a rotating chevron. With `asChild` it passes through unstyled. */
function CollapsibleTrigger({
  className,
  children,
  asChild,
  hideIcon,
  ...props
}: CollapsibleTriggerProps) {
  if (asChild) {
    return (
      <CollapsiblePrimitive.Trigger
        data-slot="collapsible-trigger"
        asChild
        className={className}
        {...props}
      >
        {children}
      </CollapsiblePrimitive.Trigger>
    );
  }
  return (
    <CollapsiblePrimitive.Trigger
      data-slot="collapsible-trigger"
      className={cn(
        "group/collapsible inline-flex h-(--dx-control-sm) items-center gap-1.5 rounded-sm px-1 text-sm font-medium text-fg-muted outline-none select-none",
        "transition-colors duration-(--dx-motion-fast) hover:text-fg disabled:opacity-50",
        "[&_svg]:size-3.5 [&_svg]:shrink-0",
        className,
      )}
      {...props}
    >
      {!hideIcon && (
        <ChevronRightIcon className="text-fg-subtle transition-transform duration-(--dx-motion) ease-out group-data-[state=open]/collapsible:rotate-90" />
      )}
      {children}
    </CollapsiblePrimitive.Trigger>
  );
}

function CollapsibleContent({
  className,
  ...props
}: React.ComponentProps<typeof CollapsiblePrimitive.Content>) {
  return (
    <CollapsiblePrimitive.Content
      data-slot="collapsible-content"
      className={cn(
        "overflow-hidden [--dx-collapse-height:var(--radix-collapsible-content-height)]",
        "data-[state=open]:animate-[dx-collapse-down_var(--dx-motion)_var(--dx-motion-ease)]",
        "data-[state=closed]:animate-[dx-collapse-up_var(--dx-motion-fast)_ease-in]",
        className,
      )}
      {...props}
    />
  );
}

export {
  Collapsible,
  CollapsibleTrigger,
  CollapsibleContent,
  type CollapsibleTriggerProps,
};
```

## breadcrumb

Accessible breadcrumb trail: asChild router links, current page, separators, ellipsis.

Install: `curl -fsSL https://ui.digitexa.com/dx.mjs | node --input-type=module - add breadcrumb`
Also adds: utils, theme
npm: @radix-ui/react-slot@^1.5.0 lucide-react@^1.61.0

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

### Example

```tsx
import Link from "next/link";
import { FolderIcon, HomeIcon } from "lucide-react";

import {
  Breadcrumb,
  BreadcrumbEllipsis,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/components/ui/breadcrumb";
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";

export default function Demo() {
  return (
    <div className="flex flex-col gap-4">
      <Breadcrumb>
        <BreadcrumbList>
          <BreadcrumbItem>
            <BreadcrumbLink asChild>
              <Link href="#preview">
                <HomeIcon /> Workspace
              </Link>
            </BreadcrumbLink>
          </BreadcrumbItem>
          <BreadcrumbSeparator />
          <BreadcrumbItem>
            <BreadcrumbLink href="#preview">
              <FolderIcon /> Mobile app
            </BreadcrumbLink>
          </BreadcrumbItem>
          <BreadcrumbSeparator />
          <BreadcrumbItem>
            <BreadcrumbPage>MOB-142 Offline sync</BreadcrumbPage>
          </BreadcrumbItem>
        </BreadcrumbList>
      </Breadcrumb>

<Breadcrumb>
        <BreadcrumbList>
          <BreadcrumbItem>
            <BreadcrumbLink href="#preview">Acme</BreadcrumbLink>
          </BreadcrumbItem>
          <BreadcrumbSeparator>/</BreadcrumbSeparator>
          <BreadcrumbItem>
            <DropdownMenu>
              <DropdownMenuTrigger className="rounded-sm hover:bg-muted hover:text-fg" aria-label="Show hidden levels">
                <BreadcrumbEllipsis />
              </DropdownMenuTrigger>
              <DropdownMenuContent>
                <DropdownMenuItem>Engineering</DropdownMenuItem>
                <DropdownMenuItem>Platform team</DropdownMenuItem>
              </DropdownMenuContent>
            </DropdownMenu>
          </BreadcrumbItem>
          <BreadcrumbSeparator>/</BreadcrumbSeparator>
          <BreadcrumbItem>
            <BreadcrumbLink href="#preview">Q4 roadmap</BreadcrumbLink>
          </BreadcrumbItem>
          <BreadcrumbSeparator>/</BreadcrumbSeparator>
          <BreadcrumbItem>
            <BreadcrumbPage>Settings</BreadcrumbPage>
          </BreadcrumbItem>
        </BreadcrumbList>
      </Breadcrumb>
    </div>
  );
}
```

### Source: ui/breadcrumb.tsx

```tsx
import * as React from "react";
import { Slot } from "@radix-ui/react-slot";
import { ChevronRightIcon, MoreHorizontalIcon } from "lucide-react";

import { cn } from "@/lib/utils";

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

function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {
  return (
    <ol
      data-slot="breadcrumb-list"
      className={cn("flex min-w-0 flex-wrap items-center gap-1 text-base break-words text-fg-muted", className)}
      {...props}
    />
  );
}

function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">) {
  return <li data-slot="breadcrumb-item" className={cn("inline-flex min-w-0 items-center gap-1.5 [&_svg]:size-3.5 [&_svg]:shrink-0", className)} {...props} />;
}

type BreadcrumbLinkProps = React.ComponentProps<"a"> & {
  /** render the child (e.g. Next.js <Link>) with these styles */
  asChild?: boolean;
};

function BreadcrumbLink({ className, asChild = false, ...props }: BreadcrumbLinkProps) {
  const Comp = asChild ? Slot : "a";
  return (
    <Comp
      data-slot="breadcrumb-link"
      className={cn("inline-flex min-w-0 items-center gap-1.5 truncate rounded-sm transition-colors duration-(--dx-motion-fast) hover:text-fg", className)}
      {...props}
    />
  );
}

function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">) {
  return (
    <span
      data-slot="breadcrumb-page"
      aria-current="page"
      className={cn("inline-flex min-w-0 items-center gap-1.5 truncate font-medium text-fg", className)}
      {...props}
    />
  );
}

function BreadcrumbSeparator({ className, children, ...props }: React.ComponentProps<"li">) {
  return (
    <li
      data-slot="breadcrumb-separator"
      role="presentation"
      aria-hidden="true"
      className={cn("inline-flex items-center text-fg-subtle [&_svg]:size-3", className)}
      {...props}
    >
      {children ?? <ChevronRightIcon />}
    </li>
  );
}

/** Collapsed middle segments. Wrap in a DropdownMenuTrigger (asChild on a button) to reveal them. */
function BreadcrumbEllipsis({ className, ...props }: React.ComponentProps<"span">) {
  return (
    <span
      data-slot="breadcrumb-ellipsis"
      className={cn("inline-grid size-(--dx-control-sm) place-items-center rounded-sm [&_svg]:size-3.5", className)}
      {...props}
    >
      <MoreHorizontalIcon aria-hidden="true" />
      <span className="sr-only">More</span>
    </span>
  );
}

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

## pagination

Page links with ellipses, usePagination hook, ready-made controls and compact status.

Install: `curl -fsSL https://ui.digitexa.com/dx.mjs | node --input-type=module - add pagination`
Also adds: button, utils, theme
npm: @radix-ui/react-slot@^1.5.0 lucide-react@^1.61.0

```tsx
import { Pagination, PaginationContent, PaginationItem, PaginationLink, PaginationPrevious, PaginationNext, PaginationEllipsis, PaginationStatus, PaginationControls, usePagination, getPaginationEntries } from "@/components/ui/pagination";
```

### Example

```tsx
import * as React from "react";

import {
  Pagination,
  PaginationContent,
  PaginationEllipsis,
  PaginationItem,
  PaginationLink,
  PaginationNext,
  PaginationPrevious,
  PaginationControls,
} from "@/components/ui/pagination";

export default function Demo() {
  const [page, setPage] = React.useState(3);
  return (
    <div className="flex flex-col gap-4">
      {/* controlled, numbered */}
      <PaginationControls page={page} pageCount={12} onPageChange={setPage} />

{/* compact: Page 3 of 12 */}
      <PaginationControls page={page} pageCount={12} onPageChange={setPage} variant="compact" aria-label="Issues pagination" />

{/* link-based primitives, e.g. for ?page= URLs */}
      <Pagination aria-label="Projects pagination">
        <PaginationContent>
          <PaginationItem>
            <PaginationPrevious href="#preview" />
          </PaginationItem>
          <PaginationItem>
            <PaginationLink href="#preview">1</PaginationLink>
          </PaginationItem>
          <PaginationItem>
            <PaginationLink href="#preview" isActive>
              2
            </PaginationLink>
          </PaginationItem>
          <PaginationItem>
            <PaginationLink href="#preview">3</PaginationLink>
          </PaginationItem>
          <PaginationItem>
            <PaginationEllipsis />
          </PaginationItem>
          <PaginationItem>
            <PaginationNext href="#preview" />
          </PaginationItem>
        </PaginationContent>
      </Pagination>
    </div>
  );
}
```

### Source: ui/pagination.tsx

```tsx
import * as React from "react";
import { Slot, Slottable } from "@radix-ui/react-slot";
import { ChevronLeftIcon, ChevronRightIcon, MoreHorizontalIcon } from "lucide-react";

import { buttonVariants } from "@/components/ui/button";
import { cn } from "@/lib/utils";

/* ------------------------------------------------------------ usePagination */

type PaginationEntry =
  | { type: "page"; page: number; selected: boolean }
  | { type: "ellipsis"; key: "start-ellipsis" | "end-ellipsis" };

type UsePaginationOptions = {
  /** current page, 1-based */
  page: number;
  pageCount: number;
  /** pages shown on each side of the current one (default 1) */
  siblings?: number;
  /** pages always shown at the start and end (default 1) */
  boundaries?: number;
};

const range = (from: number, to: number) => Array.from({ length: Math.max(0, to - from + 1) }, (_, i) => from + i);

function getPaginationEntries({ page, pageCount, siblings = 1, boundaries = 1 }: UsePaginationOptions): PaginationEntry[] {
  if (pageCount < 1) return [];
  const current = Math.min(Math.max(1, page), pageCount);
  const toEntry = (n: number): PaginationEntry => ({ type: "page", page: n, selected: n === current });

// first + last boundaries, the sibling window, the current page and two ellipsis slots
  const slots = boundaries * 2 + siblings * 2 + 3;
  if (pageCount <= slots) return range(1, pageCount).map(toEntry);

// keep the window a constant width so the control doesn't jump around
  const windowStart = Math.max(Math.min(current - siblings, pageCount - boundaries - siblings * 2 - 1), boundaries + 2);
  const windowEnd = Math.min(Math.max(current + siblings, boundaries + siblings * 2 + 2), pageCount - boundaries - 1);

const entries: PaginationEntry[] = range(1, boundaries).map(toEntry);
  entries.push(windowStart > boundaries + 2 ? { type: "ellipsis", key: "start-ellipsis" } : toEntry(boundaries + 1));
  entries.push(...range(windowStart, windowEnd).map(toEntry));
  entries.push(windowEnd < pageCount - boundaries - 1 ? { type: "ellipsis", key: "end-ellipsis" } : toEntry(pageCount - boundaries));
  entries.push(...range(pageCount - boundaries + 1, pageCount).map(toEntry));
  return entries;
}

/** Page numbers with ellipses, e.g. 1 … 4 5 6 … 12. */
function usePagination({ page, pageCount, siblings = 1, boundaries = 1 }: UsePaginationOptions) {
  return React.useMemo(() => getPaginationEntries({ page, pageCount, siblings, boundaries }), [page, pageCount, siblings, boundaries]);
}

/* ------------------------------------------------------------ primitives */

function Pagination({ className, "aria-label": ariaLabel = "Pagination", ...props }: React.ComponentProps<"nav">) {
  return <nav data-slot="pagination" aria-label={ariaLabel} className={cn("flex items-center", className)} {...props} />;
}

function PaginationContent({ className, ...props }: React.ComponentProps<"ul">) {
  return <ul data-slot="pagination-content" className={cn("flex items-center gap-0.5", className)} {...props} />;
}

function PaginationItem(props: React.ComponentProps<"li">) {
  return <li data-slot="pagination-item" {...props} />;
}

type PaginationLinkProps = React.ComponentProps<"a"> & {
  isActive?: boolean;
  /** render the child (router <Link> or <button>) with these styles */
  asChild?: boolean;
};

const linkClass = (isActive?: boolean) =>
  cn(buttonVariants({ variant: isActive ? "secondary" : "ghost", size: "md" }), "min-w-(--dx-control-md) px-2 tabular-nums", isActive && "text-fg");

function PaginationLink({ className, isActive, asChild = false, ...props }: PaginationLinkProps) {
  const Comp = asChild ? Slot : "a";
  return (
    <Comp
      data-slot="pagination-link"
      data-active={isActive || undefined}
      aria-current={isActive ? "page" : undefined}
      className={cn(linkClass(isActive), className)}
      {...props}
    />
  );
}

type PaginationStepProps = Omit<PaginationLinkProps, "isActive"> & {
  /** hide the text label, keep the icon */
  iconOnly?: boolean;
};

// With asChild the child element carries the label, e.g. <Link href="?page=2">Next</Link>.
function PaginationStep({ direction, className, children, asChild = false, iconOnly, ...props }: PaginationStepProps & { direction: "previous" | "next" }) {
  const Comp = asChild ? Slot : "a";
  const Icon = direction === "previous" ? ChevronLeftIcon : ChevronRightIcon;
  const label = children ?? (direction === "previous" ? "Previous" : "Next");
  return (
    <Comp
      data-slot={`pagination-${direction}`}
      aria-label={`Go to ${direction} page`}
      className={cn(linkClass(), "gap-1", !iconOnly && (direction === "previous" ? "pr-2.5 pl-1.5" : "pr-1.5 pl-2.5"), className)}
      {...props}
    >
      {direction === "previous" && <Icon />}
      {asChild ? <Slottable>{children}</Slottable> : !iconOnly && <span>{label}</span>}
      {direction === "next" && <Icon />}
    </Comp>
  );
}

function PaginationPrevious(props: PaginationStepProps) {
  return <PaginationStep direction="previous" {...props} />;
}

function PaginationNext(props: PaginationStepProps) {
  return <PaginationStep direction="next" {...props} />;
}

function PaginationEllipsis({ className, ...props }: React.ComponentProps<"span">) {
  return (
    <span
      data-slot="pagination-ellipsis"
      className={cn("grid size-(--dx-control-md) place-items-center text-fg-subtle [&_svg]:size-3.5", className)}
      {...props}
    >
      <MoreHorizontalIcon aria-hidden="true" />
      <span className="sr-only">More pages</span>
    </span>
  );
}

/** "Page 3 of 12" */
function PaginationStatus({ page, pageCount, className, ...props }: React.ComponentProps<"span"> & { page: number; pageCount: number }) {
  return (
    <span data-slot="pagination-status" aria-live="polite" className={cn("px-2 text-sm whitespace-nowrap text-fg-muted tabular-nums", className)} {...props}>
      Page <span className="font-medium text-fg">{page}</span> of {pageCount}
    </span>
  );
}

/* ------------------------------------------------------------ controlled bar */

type PaginationControlsProps = Omit<React.ComponentProps<"nav">, "onChange"> &
  Omit<UsePaginationOptions, "page"> & {
    page: number;
    onPageChange: (page: number) => void;
    /** "pages" = numbered links, "compact" = Page 3 of 12 with arrows */
    variant?: "pages" | "compact";
  };

/** Ready-made client-side pagination with buttons. Use the primitives for URL-based paging. */
function PaginationControls({ page, pageCount, onPageChange, siblings, boundaries, variant = "pages", className, ...props }: PaginationControlsProps) {
  const entries = usePagination({ page, pageCount, siblings, boundaries });
  const current = Math.min(Math.max(1, page), Math.max(1, pageCount));
  const compact = variant === "compact";

return (
    <Pagination className={className} {...props}>
      <PaginationContent>
        <PaginationItem>
          <PaginationPrevious asChild iconOnly={compact} className={cn(compact && "px-0")}>
            <button type="button" disabled={current <= 1} onClick={() => onPageChange(current - 1)}>
              {!compact && "Previous"}
            </button>
          </PaginationPrevious>
        </PaginationItem>
        {compact ? (
          <PaginationItem>
            <PaginationStatus page={current} pageCount={Math.max(1, pageCount)} />
          </PaginationItem>
        ) : (
          entries.map((entry) =>
            entry.type === "ellipsis" ? (
              <PaginationItem key={entry.key}>
                <PaginationEllipsis />
              </PaginationItem>
            ) : (
              <PaginationItem key={entry.page}>
                <PaginationLink asChild isActive={entry.selected}>
                  <button type="button" aria-label={`Page ${entry.page}`} onClick={() => onPageChange(entry.page)}>
                    {entry.page}
                  </button>
                </PaginationLink>
              </PaginationItem>
            ),
          )
        )}
        <PaginationItem>
          <PaginationNext asChild iconOnly={compact} className={cn(compact && "px-0")}>
            <button type="button" disabled={current >= pageCount} onClick={() => onPageChange(current + 1)}>
              {!compact && "Next"}
            </button>
          </PaginationNext>
        </PaginationItem>
      </PaginationContent>
    </Pagination>
  );
}

export {
  Pagination,
  PaginationContent,
  PaginationItem,
  PaginationLink,
  PaginationPrevious,
  PaginationNext,
  PaginationEllipsis,
  PaginationStatus,
  PaginationControls,
  usePagination,
  getPaginationEntries,
  type PaginationEntry,
  type PaginationLinkProps,
  type PaginationStepProps,
  type PaginationControlsProps,
  type UsePaginationOptions,
};
```

## scroll-area

Radix ScrollArea with thin themed scrollbars, vertical, horizontal or both.

Install: `curl -fsSL https://ui.digitexa.com/dx.mjs | node --input-type=module - add scroll-area`
Also adds: utils, theme
npm: @radix-ui/react-scroll-area@^1.4.0

```tsx
import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
```

### Example

```tsx
import { ScrollArea } from "@/components/ui/scroll-area";

const activity = Array.from({ length: 24 }, (_, i) => `ENG-${310 - i} moved to ${["In progress", "In review", "Done"][i % 3]}`);
const members = ["Ada Lovelace", "Grace Hopper", "Alan Turing", "Linus Torvalds", "Margaret Hamilton", "Ken Thompson", "Barbara Liskov", "Dennis Ritchie"];

export default function Demo() {
  return (
    <div className="flex flex-col gap-6">
      <ScrollArea className="h-56 w-72 rounded-lg border border-border bg-surface">
        <div className="p-3">
          <h4 className="mb-2 text-2xs font-medium tracking-wide text-fg-subtle uppercase">Activity</h4>
          <ul className="flex flex-col">
            {activity.map((a) => (
              <li key={a} className="truncate border-b border-border py-1.5 text-base text-fg last:border-0">
                {a}
              </li>
            ))}
          </ul>
        </div>
      </ScrollArea>

<ScrollArea orientation="horizontal" className="w-full max-w-md rounded-lg border border-border bg-surface">
        <div className="flex w-max gap-2 p-3">
          {members.map((m) => (
            <div key={m} className="flex h-(--dx-control-lg) shrink-0 items-center rounded-md bg-muted px-3 text-base text-fg">
              {m}
            </div>
          ))}
        </div>
      </ScrollArea>
    </div>
  );
}
```

### Source: ui/scroll-area.tsx

```tsx
"use client";

import * as React from "react";
import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";

import { cn } from "@/lib/utils";

type ScrollAreaProps = React.ComponentProps<typeof ScrollAreaPrimitive.Root> & {
  /** which scrollbars to render */
  orientation?: "vertical" | "horizontal" | "both";
  viewportClassName?: string;
  viewportRef?: React.Ref<HTMLDivElement>;
};

function ScrollArea({ className, children, orientation = "vertical", viewportClassName, viewportRef, ...props }: ScrollAreaProps) {
  return (
    <ScrollAreaPrimitive.Root data-slot="scroll-area" className={cn("relative overflow-hidden", className)} {...props}>
      <ScrollAreaPrimitive.Viewport
        ref={viewportRef}
        data-slot="scroll-area-viewport"
        className={cn(
          "size-full rounded-[inherit] outline-none focus-visible:ring-3 focus-visible:ring-ring/30",
          // Radix wraps content in display: table, which defeats truncation when only scrolling vertically
          orientation === "vertical" && "[&>div]:block!",
          viewportClassName,
        )}
      >
        {children}
      </ScrollAreaPrimitive.Viewport>
      {orientation !== "horizontal" && <ScrollBar orientation="vertical" />}
      {orientation !== "vertical" && <ScrollBar orientation="horizontal" />}
      <ScrollAreaPrimitive.Corner />
    </ScrollAreaPrimitive.Root>
  );
}

function ScrollBar({ className, orientation = "vertical", ...props }: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {
  return (
    <ScrollAreaPrimitive.ScrollAreaScrollbar
      data-slot="scroll-area-scrollbar"
      orientation={orientation}
      className={cn(
        "group/scrollbar flex touch-none p-0.5 select-none",
        "data-[state=visible]:animate-[dx-fade-in_var(--dx-motion-fast)_ease-out] data-[state=hidden]:animate-[dx-fade-out_var(--dx-motion)_ease-in]",
        orientation === "vertical" && "h-full w-2.5",
        orientation === "horizontal" && "h-2.5 flex-col",
        className,
      )}
      {...props}
    >
      <ScrollAreaPrimitive.ScrollAreaThumb
        data-slot="scroll-area-thumb"
        className="relative flex-1 rounded-full bg-border-strong transition-colors duration-(--dx-motion-fast) group-hover/scrollbar:bg-fg-subtle"
      />
    </ScrollAreaPrimitive.ScrollAreaScrollbar>
  );
}

export { ScrollArea, ScrollBar, type ScrollAreaProps };
```

## data-table

Typed columns, sorting, row selection, filter, column toggle, sticky header, pagination.

Install: `curl -fsSL https://ui.digitexa.com/dx.mjs | node --input-type=module - add data-table`
Also adds: button, checkbox, dropdown-menu, input, pagination, table, utils, theme
npm: lucide-react@^1.61.0

```tsx
import { DataTable } from "@/components/ui/data-table";
```

### Example

```tsx
import * as React from "react";
import { PlusIcon } from "lucide-react";

import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { DataTable, type DataTableColumn } from "@/components/ui/data-table";

type Issue = {
  id: string;
  title: string;
  assignee: string | null;
  priority: number;
  estimate: number | null;
  due: Date;
};

const titles = [
  "Offline sync for drafts",
  "Fix flaky login test",
  "Dark mode for charts",
  "Invite teammates by link",
  "Audit log export",
  "Keyboard shortcuts sheet",
  "Slack notifications",
  "Bulk edit labels",
  "Reduce bundle size",
  "Webhook retries",
  "Rename workspace",
  "Billing page redesign",
  "SAML single sign-on",
  "Archive old cycles",
];
const people = ["Ada", "Grace", "Alan", "Linus", null];
const priorities = ["None", "Urgent", "High", "Medium", "Low"];

const issues: Issue[] = titles.map((title, i) => ({
  id: `ENG-${120 + i}`,
  title,
  assignee: people[i % people.length],
  priority: (i % 4) + 1,
  estimate: i % 5 === 4 ? null : ((i * 3) % 8) + 1,
  due: new Date(2026, 10, 1 + ((i * 5) % 28)),
}));

const columns: DataTableColumn<Issue>[] = [
  { key: "id", header: "ID", sortable: true, width: 96, hideable: false, className: "font-mono text-sm text-fg-muted" },
  { key: "title", header: "Title", sortable: true, className: "text-fg" },
  {
    key: "priority",
    header: "Priority",
    sortable: true,
    width: 120,
    cell: (row) => <Badge>{priorities[row.priority]}</Badge>,
  },
  { key: "assignee", header: "Assignee", sortable: true, width: 120, cell: (row) => row.assignee ?? <span className="text-fg-subtle">Unassigned</span> },
  { key: "estimate", header: "Points", sortable: true, align: "right", width: 88 },
  {
    key: "due",
    header: "Due",
    sortable: true,
    align: "right",
    width: 112,
    cell: (row) => row.due.toLocaleDateString("en-US", { month: "short", day: "numeric" }),
  },
];

export default function Demo() {
  const [selected, setSelected] = React.useState<string[]>(["ENG-121"]);
  const [opened, setOpened] = React.useState<string | null>(null);

return (
    <div className="flex flex-col gap-10">
      <div className="flex flex-col gap-2">
        <DataTable
          aria-label="Issues"
          data={issues}
          columns={columns}
          getRowId={(row) => row.id}
          selectable
          selectedIds={selected}
          onSelectionChange={setSelected}
          filterable
          filterPlaceholder="Filter issues…"
          columnToggle
          toolbar={
            <Button variant="primary">
              <PlusIcon /> New issue
            </Button>
          }
          defaultSort={{ key: "due", direction: "asc" }}
          pageSize={5}
          onRowClick={(row) => setOpened(row.id)}
        />
        <p className="text-sm text-fg-muted">Last opened: {opened ?? "none"} (click a row or press Enter on it)</p>
      </div>

{/* sticky header inside a fixed-height frame */}
      <DataTable aria-label="All issues" data={issues} columns={columns.slice(0, 4)} getRowId={(row) => row.id} stickyHeader maxHeight={240} />

<DataTable aria-label="Archived issues" data={[] as Issue[]} columns={columns} emptyState="No archived issues yet." />
    </div>
  );
}
```

### Source: ui/data-table.tsx

```tsx
"use client";

import * as React from "react";
import { ArrowDownIcon, ArrowUpIcon, ChevronsUpDownIcon, Columns3Icon, SearchIcon } from "lucide-react";

import { Button } from "@/components/ui/button";
import { Checkbox } from "@/components/ui/checkbox";
import {
  DropdownMenu,
  DropdownMenuCheckboxItem,
  DropdownMenuContent,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { Input } from "@/components/ui/input";
import { PaginationControls } from "@/components/ui/pagination";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { cn } from "@/lib/utils";

type SortDirection = "asc" | "desc";
type DataTableSort = { key: string; direction: SortDirection };
type CellValue = string | number | boolean | Date | null | undefined;

type DataTableColumn<T> = {
  /** unique id; also the property read from the row when there's no `value` */
  key: (keyof T & string) | (string & {});
  header: React.ReactNode;
  /** custom cell; defaults to the raw value */
  cell?: (row: T, index: number) => React.ReactNode;
  /** value used for sorting and filtering (default: row[key]) */
  value?: (row: T) => CellValue;
  sortable?: boolean;
  align?: "left" | "center" | "right";
  width?: number | string;
  className?: string;
  /** listed in the Columns menu (default true) */
  hideable?: boolean;
};

type DataTableProps<T> = {
  data: T[];
  columns: DataTableColumn<T>[];
  /** stable row id, used for selection (default: index) */
  getRowId?: (row: T, index: number) => string;

selectable?: boolean;
  selectedIds?: string[];
  defaultSelectedIds?: string[];
  onSelectionChange?: (ids: string[]) => void;

/** show a global filter input */
  filterable?: boolean;
  filterPlaceholder?: string;
  filterFn?: (row: T, query: string) => boolean;
  /** show a Columns visibility menu */
  columnToggle?: boolean;
  /** extra toolbar content, right-aligned */
  toolbar?: React.ReactNode;

defaultSort?: DataTableSort | null;
  onSortChange?: (sort: DataTableSort | null) => void;

/** enables client-side pagination */
  pageSize?: number;
  paginationVariant?: "pages" | "compact";

emptyState?: React.ReactNode;
  /** keeps the header visible; needs `maxHeight` to scroll inside the table */
  stickyHeader?: boolean;
  maxHeight?: number | string;
  onRowClick?: (row: T, index: number) => void;

"aria-label"?: string;
  className?: string;
};

const alignClass = { left: "text-left", center: "text-center", right: "text-right" } as const;

function readValue<T>(column: DataTableColumn<T>, row: T): CellValue {
  if (column.value) return column.value(row);
  const raw = (row as Record<string, unknown>)[column.key];
  return raw instanceof Date || ["string", "number", "boolean"].includes(typeof raw) ? (raw as CellValue) : raw == null ? raw : String(raw);
}

const isEmpty = (v: CellValue) => v === null || v === undefined || v === "";

function compareValues(a: CellValue, b: CellValue) {
  if (a instanceof Date && b instanceof Date) return a.getTime() - b.getTime();
  if ((typeof a === "number" || typeof a === "boolean") && (typeof b === "number" || typeof b === "boolean")) return Number(a) - Number(b);
  return String(a).localeCompare(String(b), undefined, { numeric: true, sensitivity: "base" });
}

function renderValue(v: CellValue) {
  if (v instanceof Date) return v.toLocaleDateString();
  if (typeof v === "boolean") return v ? "Yes" : "No";
  return v;
}

function DataTable<T extends object>({
  data,
  columns,
  getRowId,
  selectable = false,
  selectedIds,
  defaultSelectedIds,
  onSelectionChange,
  filterable = false,
  filterPlaceholder = "Filter…",
  filterFn,
  columnToggle = false,
  toolbar,
  defaultSort = null,
  onSortChange,
  pageSize,
  paginationVariant = "pages",
  emptyState = "No results.",
  stickyHeader = false,
  maxHeight,
  onRowClick,
  "aria-label": ariaLabel,
  className,
}: DataTableProps<T>) {
  const [query, setQuery] = React.useState("");
  const [sort, setSort] = React.useState<DataTableSort | null>(defaultSort);
  const [hidden, setHidden] = React.useState<Set<string>>(() => new Set());
  const [page, setPage] = React.useState(1);
  const [innerSelected, setInnerSelected] = React.useState<string[]>(defaultSelectedIds ?? []);
  const selected = React.useMemo(() => new Set(selectedIds ?? innerSelected), [selectedIds, innerSelected]);

const visibleColumns = columns.filter((c) => !hidden.has(c.key));
  const rows = React.useMemo(() => data.map((row, index) => ({ row, index, id: getRowId ? getRowId(row, index) : String(index) })), [data, getRowId]);

const sorted = React.useMemo(() => {
    const column = sort && columns.find((c) => c.key === sort.key);
    if (!sort || !column) return filtered;
    const dir = sort.direction === "asc" ? 1 : -1;
    return [...filtered].sort((ra, rb) => {
      const a = readValue(column, ra.row);
      const b = readValue(column, rb.row);
      // empty values always sink to the bottom
      if (isEmpty(a) || isEmpty(b)) return isEmpty(a) === isEmpty(b) ? 0 : isEmpty(a) ? 1 : -1;
      return compareValues(a, b) * dir;
    });
  }, [filtered, sort, columns]);

const pageCount = pageSize ? Math.max(1, Math.ceil(sorted.length / pageSize)) : 1;
  const currentPage = Math.min(page, pageCount);
  const pageRows = pageSize ? sorted.slice((currentPage - 1) * pageSize, currentPage * pageSize) : sorted;

// none → asc → desc → none
  const cycleSort = (key: string) => {
    const next: DataTableSort | null =
      sort?.key !== key ? { key, direction: "asc" } : sort.direction === "asc" ? { key, direction: "desc" } : null;
    setSort(next);
    onSortChange?.(next);
  };

const hideableColumns = columns.filter((c) => c.hideable !== false);
  const showToolbar = filterable || columnToggle || toolbar;
  const colSpan = visibleColumns.length + (selectable ? 1 : 0);

return (
    <div data-slot="data-table" className={cn("flex flex-col gap-3", className)}>
      {showToolbar && (
        <div data-slot="data-table-toolbar" className="flex flex-wrap items-center gap-2">
          {filterable && (
            <div className="relative w-full max-w-64">
              <SearchIcon className="pointer-events-none absolute top-1/2 left-2.5 size-3.5 -translate-y-1/2 text-fg-subtle" />
              <Input
                type="search"
                value={query}
                onChange={(e) => {
                  setQuery(e.target.value);
                  setPage(1);
                }}
                placeholder={filterPlaceholder}
                aria-label="Filter rows"
                className="pl-8"
              />
            </div>
          )}
          <div className="ml-auto flex items-center gap-2">
            {toolbar}
            {columnToggle && (
              <DropdownMenu>
                <DropdownMenuTrigger asChild>
                  <Button>
                    <Columns3Icon /> Columns
                  </Button>
                </DropdownMenuTrigger>
                <DropdownMenuContent align="end">
                  <DropdownMenuLabel>Visible columns</DropdownMenuLabel>
                  <DropdownMenuSeparator />
                  {hideableColumns.map((c) => (
                    <DropdownMenuCheckboxItem
                      key={c.key}
                      checked={!hidden.has(c.key)}
                      // keep the menu open while toggling several columns
                      onSelect={(e) => e.preventDefault()}
                      onCheckedChange={(on) =>
                        setHidden((prev) => {
                          const next = new Set(prev);
                          if (on) next.delete(c.key);
                          else next.add(c.key);
                          return next;
                        })
                      }
                    >
                      {c.header}
                    </DropdownMenuCheckboxItem>
                  ))}
                </DropdownMenuContent>
              </DropdownMenu>
            )}
          </div>
        </div>
      )}

<div
        data-slot="data-table-frame"
        className={cn(
          "rounded-lg border border-border bg-surface shadow-sm",
          // the frame becomes the scroll container so sticky headers stick to it
          stickyHeader ? "overflow-auto [&>[data-slot=table-container]]:overflow-visible" : "overflow-hidden",
        )}
        style={maxHeight !== undefined ? { maxHeight } : undefined}
      >
        <Table aria-label={ariaLabel}>
          <TableHeader
            className={cn(
              stickyHeader &&
                "[&_th]:sticky [&_th]:top-0 [&_th]:z-(--dx-z-sticky) [&_th]:bg-surface [&_th]:shadow-[inset_0_-1px_0_var(--dx-border)]",
            )}
          >
            <TableRow className="hover:bg-transparent">
              {selectable && (
                <TableHead className="w-10 pr-0">
                  <Checkbox
                    checked={allChecked}
                    onCheckedChange={toggleAll}
                    disabled={filtered.length === 0}
                    aria-label="Select all rows"
                  />
                </TableHead>
              )}
              {visibleColumns.map((c) => {
                const active = sort?.key === c.key ? sort.direction : null;
                const SortIcon = active === "asc" ? ArrowUpIcon : active === "desc" ? ArrowDownIcon : ChevronsUpDownIcon;
                return (
                  <TableHead
                    key={c.key}
                    aria-sort={c.sortable ? (active === "asc" ? "ascending" : active === "desc" ? "descending" : "none") : undefined}
                    className={cn(alignClass[c.align ?? "left"], c.className)}
                    style={c.width !== undefined ? { width: c.width } : undefined}
                  >
                    {c.sortable ? (
                      <button
                        type="button"
                        onClick={() => cycleSort(c.key)}
                        className={cn(
                          "-mx-1.5 inline-flex h-(--dx-control-sm) items-center gap-1 rounded-sm px-1.5 transition-colors duration-(--dx-motion-fast)",
                          "hover:bg-muted hover:text-fg [&_svg]:size-3 [&_svg]:shrink-0",
                          active && "text-fg",
                          c.align === "right" && "flex-row-reverse",
                        )}
                      >
                        {c.header}
                        <SortIcon aria-hidden="true" className={cn(!active && "text-fg-subtle")} />
                      </button>
                    ) : (
                      c.header
                    )}
                  </TableHead>
                );
              })}
            </TableRow>
          </TableHeader>
          <TableBody>
            {pageRows.length === 0 ? (
              <TableRow className="hover:bg-transparent">
                <TableCell colSpan={colSpan} className="h-24 text-center whitespace-normal text-fg-muted">
                  {query ? `No results for “${query.trim()}”.` : emptyState}
                </TableCell>
              </TableRow>
            ) : (
              pageRows.map(({ row, index, id }) => {
                const isSelected = selected.has(id);
                return (
                  <TableRow
                    key={id}
                    data-state={isSelected ? "selected" : undefined}
                    tabIndex={onRowClick ? 0 : undefined}
                    onClick={onRowClick ? () => onRowClick(row, index) : undefined}
                    onKeyDown={
                      onRowClick
                        ? (e) => {
                            // only when the row itself is focused, not a checkbox or link inside it
                            if (e.key === "Enter" && e.target === e.currentTarget) onRowClick(row, index);
                          }
                        : undefined
                    }
                    className={cn(onRowClick && "cursor-pointer outline-none focus-visible:bg-bg-subtle focus-visible:shadow-[inset_2px_0_0_var(--dx-ring)]")}
                  >
                    {selectable && (
                      <TableCell className="w-10 pr-0" onClick={(e) => e.stopPropagation()}>
                        <Checkbox checked={isSelected} onCheckedChange={(on) => toggleRow(id, on === true)} aria-label="Select row" />
                      </TableCell>
                    )}
                    {visibleColumns.map((c) => (
                      <TableCell key={c.key} className={cn(alignClass[c.align ?? "left"], c.align === "right" && "tabular-nums", c.className)}>
                        {c.cell ? c.cell(row, index) : renderValue(readValue(c, row))}
                      </TableCell>
                    ))}
                  </TableRow>
                );
              })
            )}
          </TableBody>
        </Table>
      </div>

{(selectable || !!pageSize) && (
        <div data-slot="data-table-footer" className="flex flex-wrap items-center justify-between gap-2 text-sm text-fg-muted">
          <span aria-live="polite" className="tabular-nums">
            {selectable && selected.size > 0
              ? `${selected.size} of ${rows.length} selected`
              : pageSize && sorted.length > 0
                ? `${(currentPage - 1) * pageSize + 1}–${Math.min(currentPage * pageSize, sorted.length)} of ${sorted.length}`
                : `${sorted.length} ${sorted.length === 1 ? "row" : "rows"}`}
          </span>
          {!!pageSize && pageCount > 1 && (
            <PaginationControls page={currentPage} pageCount={pageCount} onPageChange={setPage} variant={paginationVariant} />
          )}
        </div>
      )}
    </div>
  );
}

export { DataTable, type DataTableColumn, type DataTableProps, type DataTableSort, type SortDirection };
```

## priority

Linear-style priority bars: urgent, high, medium, low, none, with labels.

Install: `curl -fsSL https://ui.digitexa.com/dx.mjs | node --input-type=module - add priority`
Also adds: utils, theme

```tsx
import { PriorityIcon, PriorityLabel, priorities, labels as priorityLabels } from "@/components/ui/priority";
```

### Example

```tsx
import * as React from "react";
import { PriorityIcon, PriorityLabel, priorities } from "@/components/ui/priority";

const statuses = ["backlog", "todo", "progress", "review", "done"] as const;

export default function Demo() {
  return (
    <div className="flex flex-col gap-3">
      <Row label="Icon">
        {priorities.map((p) => (
          <PriorityIcon key={p} priority={p} />
        ))}
      </Row>
      <div className="flex flex-col gap-2">
        {priorities.map((p) => (
          <PriorityLabel key={p} priority={p} />
        ))}
      </div>
    </div>
  );
}
```

### Source: ui/priority.tsx

```tsx
import * as React from "react";

import { cn } from "@/lib/utils";

type Priority = "urgent" | "high" | "medium" | "low" | "none";

/** Highest first, the order a priority picker or sort should use. */
const priorities = ["urgent", "high", "medium", "low", "none"] as const satisfies readonly Priority[];

const labels: Record<Priority, string> = {
  urgent: "Urgent",
  high: "High",
  medium: "Medium",
  low: "Low",
  none: "No priority",
};

// How many of the three bars are filled.
const level: Record<Priority, number> = { urgent: 3, high: 3, medium: 2, low: 1, none: 0 };

type PriorityIconProps = Omit<React.ComponentProps<"svg">, "children"> & {
  priority: Priority;
  /** Visible label for screen readers; pass "" when a text label sits next to the icon. */
  label?: string;
};

/** Bar glyph: three ascending bars for low/medium/high, a filled alert square for urgent, dashes for none. */
function PriorityIcon({ priority, label, className, ...props }: PriorityIconProps) {
  const name = label ?? labels[priority];
  return (
    <svg
      data-slot="priority-icon"
      data-priority={priority}
      viewBox="0 0 16 16"
      fill="none"
      role={name ? "img" : undefined}
      aria-label={name || undefined}
      aria-hidden={name ? undefined : true}
      className={cn("size-3.5 shrink-0", priority === "urgent" ? "text-danger" : "text-fg-muted", className)}
      {...props}
    >
      {priority === "urgent" ? (
        <>
          <rect x="1" y="1" width="14" height="14" rx="3.5" fill="currentColor" />
          <path d="M8 4.25v4.5" stroke="var(--dx-surface)" strokeWidth="1.75" strokeLinecap="round" />
          <circle cx="8" cy="11.4" r="1.05" fill="var(--dx-surface)" />
        </>
      ) : priority === "none" ? (
        [2, 6.5, 11].map((x) => <rect key={x} x={x} y="7.25" width="3" height="1.5" rx="0.75" fill="currentColor" opacity="0.6" />)
      ) : (
        [0, 1, 2].map((i) => (
          <rect
            key={i}
            x={1.5 + i * 4.75}
            y={10 - i * 3.5}
            width="3.5"
            height={4.5 + i * 3.5}
            rx="1"
            fill="currentColor"
            opacity={i < level[priority] ? 1 : 0.25}
          />
        ))
      )}
    </svg>
  );
}

type PriorityLabelProps = React.ComponentProps<"span"> & {
  priority: Priority;
};

/** Icon plus text: <PriorityLabel priority="high" />. */
function PriorityLabel({ priority, children, className, ...props }: PriorityLabelProps) {
  return (
    <span data-slot="priority-label" className={cn("inline-flex items-center gap-1.5 text-fg-muted", className)} {...props}>
      <PriorityIcon priority={priority} label="" />
      {children ?? labels[priority]}
    </span>
  );
}

export { PriorityIcon, PriorityLabel, priorities, labels as priorityLabels, type Priority };
```

## task-row

List-view task row with status toggle, priority, project, due date; collapsible groups.

Install: `curl -fsSL https://ui.digitexa.com/dx.mjs | node --input-type=module - add task-row`
Also adds: avatar, button, priority, status-icon, use-now, utils, theme
npm: lucide-react@^1.61.0

```tsx
import { TaskRow, TaskList, TaskGroup, DueDate, ProjectTag, tagDotColors, dueInfo, daysFrom, startOfDay, isoDay } from "@/components/ui/task-row";
```

### Example

```tsx
import * as React from "react";

import { statusIconLabels, type StatusIconStatus } from "@/components/ui/status-icon";
import { TaskGroup, TaskList, TaskRow, type TagColor } from "@/components/ui/task-row";
import type { Priority } from "@/components/ui/priority";
import { useNow } from "@/lib/use-now";

// demo dates are relative to the viewer's today, so they never go stale
const dayFrom = (today: Date) => (offset: number) => new Date(today.getFullYear(), today.getMonth(), today.getDate() + offset);

type Task = {
  id: string;
  title: string;
  status: StatusIconStatus;
  priority: Priority;
  project: { name: string; color: TagColor };
  assignee?: string;
  due?: Date;
};

const build = (day: (n: number) => Date): Task[] => [
  { id: "STR-142", title: "Checkout: retry failed card payments", status: "progress", priority: "urgent", project: storefront, assignee: "Mira Okafor", due: day(0) },
  { id: "PRC-31", title: "Compare plans table on mobile", status: "progress", priority: "high", project: pricing, assignee: "Theo Martin", due: day(-2) },
  { id: "DRV-88", title: "Offline queue for delivery photos", status: "review", priority: "medium", project: driver, assignee: "Jonas Weber", due: day(3) },
  { id: "STR-150", title: "Product page image zoom", status: "todo", priority: "low", project: storefront, assignee: "Leyla Demir", due: day(9) },
  { id: "DRV-91", title: "Push notification copy review", status: "todo", priority: "none", project: driver },
  { id: "STR-133", title: "Migrate cart to the new API", status: "done", priority: "high", project: storefront, assignee: "Ana Souza", due: day(-4) },
];

const order: StatusIconStatus[] = ["progress", "review", "todo", "done"];

export default function Demo() {
  const now = useNow();
  return now ? <Tasks today={now} /> : <div className="h-[19rem] w-full rounded-lg border border-border bg-surface" />;
}

return (
    <TaskList className="w-full">
      {order.map((status) => {
        const group = tasks.filter((t) => t.status === status);
        return (
          <TaskGroup key={status} title={statusIconLabels[status]} status={status} count={group.length} defaultOpen={status !== "done"} onAdd={() => {}}>
            {group.map((t) => (
              <TaskRow
                key={t.id}
                identifier={t.id}
                title={t.title}
                status={t.status}
                priority={t.priority}
                project={t.project}
                assignee={t.assignee ? { name: t.assignee } : undefined}
                due={t.due}
                today={today}
                selected={selected === t.id}
                onClick={() => setSelected(t.id)}
                onStatusChange={(next) => setStatus(t.id, next)}
              />
            ))}
          </TaskGroup>
        );
      })}
    </TaskList>
  );
}
```

### Source: ui/task-row.tsx

```tsx
"use client";

import * as React from "react";
import { ChevronRightIcon, PlusIcon } from "lucide-react";

import { Avatar } from "@/components/ui/avatar";
import { Button } from "@/components/ui/button";
import { PriorityIcon, priorityLabels, type Priority } from "@/components/ui/priority";
import { StatusIcon, statusIconLabels, type StatusIconStatus } from "@/components/ui/status-icon";
import { useNow } from "@/lib/use-now";
import { cn } from "@/lib/utils";

/* ------------------------------------------------------------ tags & dates */

const tagDotColors: Record<TagColor, string> = {
  neutral: "bg-fg-subtle",
  accent: "bg-accent",
  success: "bg-success",
  warning: "bg-warning",
  danger: "bg-danger",
  info: "bg-info",
  backlog: "bg-status-backlog",
  todo: "bg-status-todo",
  progress: "bg-status-progress",
  review: "bg-status-review",
  done: "bg-status-done",
};

type Person = { name: string; src?: string };

const DAY = 86_400_000;

function startOfDay(d: Date) {
  return new Date(d.getFullYear(), d.getMonth(), d.getDate());
}

/** Local YYYY-MM-DD (toISOString would shift to UTC). */
function isoDay(d: Date) {
  return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`;
}

/** Whole calendar days from `today` to `date` (negative = past). DST-safe. */
function daysFrom(date: Date, today: Date) {
  return Math.round((startOfDay(date).getTime() - startOfDay(today).getTime()) / DAY);
}

type DueState = "overdue" | "today" | "soon" | "later";

/** Label and urgency of a due date. Without `today` (server render) it falls back to a plain short date. */
function dueInfo(date: Date, today: Date | null, done = false) {
  const short = new Intl.DateTimeFormat("en-US", { month: "short", day: "numeric" }).format(date);
  if (!today) return { text: short, state: "later" as DueState, full: new Intl.DateTimeFormat("en-US", { dateStyle: "full" }).format(date) };
  const diff = daysFrom(date, today);
  const label = date.getFullYear() === today.getFullYear() ? short : `${short}, ${date.getFullYear()}`;
  const text = diff === 0 ? "Today" : diff === 1 ? "Tomorrow" : diff === -1 ? "Yesterday" : label;
  const state: DueState = done ? "later" : diff < 0 ? "overdue" : diff === 0 ? "today" : diff <= 3 ? "soon" : "later";
  return { text, state, full: new Intl.DateTimeFormat("en-US", { dateStyle: "full" }).format(date) };
}

const dueColors: Record<DueState, string> = {
  overdue: "text-danger-fg-subtle",
  today: "text-warning-fg",
  soon: "text-fg-muted",
  later: "text-fg-subtle",
};

type DueDateProps = Omit<React.ComponentProps<"time">, "children"> & {
  date: Date;
  /** Reference day; defaults to the client clock (see useNow). */
  today?: Date;
  /** Completed work is never shown as overdue. */
  done?: boolean;
};

/** "Today" in warning, past dates in danger, otherwise a short date. */
function DueDate({ date, today, done, className, ...props }: DueDateProps) {
  const now = useNow();
  const info = dueInfo(date, today ?? now, done);
  return (
    <time
      data-slot="due-date"
      data-state={info.state}
      dateTime={isoDay(date)}
      title={`Due ${info.full}`}
      className={cn("shrink-0 text-xs whitespace-nowrap tabular-nums", dueColors[info.state], info.state === "overdue" && "font-medium", className)}
      {...props}
    >
      {info.text}
    </time>
  );
}

/** Colored dot + name, for projects or labels. */
function ProjectTag({ name, color = "neutral", className, ...props }: React.ComponentProps<"span"> & { name: string; color?: TagColor }) {
  return (
    <span
      data-slot="project-tag"
      className={cn("inline-flex h-(--dx-control-xs) max-w-40 min-w-0 items-center gap-1.5 rounded-sm border border-border px-1.5 text-xs text-fg-muted", className)}
      {...props}
    >
      <span aria-hidden className={cn("size-1.5 shrink-0 rounded-full", tagDotColors[color])} />
      <span className="truncate">{name}</span>
    </span>
  );
}

/* ---------------------------------------------------------------- task row */

type TaskRowProps = Omit<React.ComponentProps<"div">, "title" | "onClick"> & {
  title: React.ReactNode;
  status: StatusIconStatus;
  /** Short key shown before the status, e.g. "STR-142". */
  identifier?: string;
  /** Called from the status toggle with the next status (done ↔ to do by default). */
  onStatusChange?: (next: StatusIconStatus) => void;
  project?: { name: string; color?: TagColor };
  priority?: Priority;
  assignee?: Person;
  due?: Date;
  today?: Date;
  selected?: boolean;
  /** Makes the whole row clickable (via the title button, so the row stays one tab stop). */
  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
  /** Extra content between title and meta, e.g. labels. */
  children?: React.ReactNode;
};

function TaskRow({
  title,
  status,
  identifier,
  onStatusChange,
  project,
  priority,
  assignee,
  due,
  today,
  selected = false,
  onClick,
  className,
  children,
  ...props
}: TaskRowProps) {
  const done = status === "done";
  const plainTitle = typeof title === "string" ? title : identifier ?? "task";

return (
    <div
      data-slot="task-row"
      role="listitem"
      data-selected={selected || undefined}
      data-status={status}
      className={cn(
        "group/task relative flex h-(--dx-row-height) items-center gap-2.5 border-b border-border px-3 text-base",
        "transition-colors duration-(--dx-motion-fast) ease-out",
        onClick && "hover:bg-bg-subtle",
        "data-selected:bg-selected",
        className,
      )}
      {...props}
    >
      {priority && <PriorityIcon priority={priority} label={`Priority: ${priorityLabels[priority]}`} />}
      {identifier && <span className="w-16 shrink-0 truncate text-xs text-fg-subtle tabular-nums">{identifier}</span>}

{onStatusChange ? (
        <button
          type="button"
          aria-label={done ? `Mark ${plainTitle} as not done` : `Mark ${plainTitle} as done`}
          aria-pressed={done}
          onClick={() => onStatusChange(done ? "todo" : "done")}
          className="relative z-1 -m-1 grid shrink-0 place-items-center rounded-full p-1 transition-transform duration-(--dx-motion-fast) hover:scale-110"
        >
          <StatusIcon status={status} label="" />
        </button>
      ) : (
        <StatusIcon status={status} label={statusIconLabels[status]} />
      )}

{onClick ? (
        <button
          type="button"
          onClick={onClick}
          aria-current={selected || undefined}
          // stretched over the whole row; the other controls sit above it with z-1
          className="min-w-0 flex-1 truncate text-left outline-none after:absolute after:inset-0 focus-visible:after:rounded-sm focus-visible:after:outline-2 focus-visible:after:-outline-offset-2 focus-visible:after:outline-ring"
        >
          <TaskTitle done={done}>{title}</TaskTitle>
        </button>
      ) : (
        <span className="min-w-0 flex-1 truncate">
          <TaskTitle done={done}>{title}</TaskTitle>
        </span>
      )}

{children}
      {project && <ProjectTag name={project.name} color={project.color} className="hidden sm:inline-flex" />}
      {due && <DueDate date={due} today={today} done={done} className="w-16 text-right" />}
      {assignee ? (
        <Avatar name={assignee.name} src={assignee.src} size="sm" title={assignee.name} />
      ) : (
        <span aria-label="Unassigned" role="img" className="size-5 shrink-0 rounded-full border border-dashed border-border-strong" />
      )}
    </div>
  );
}

function TaskTitle({ done, children }: { done: boolean; children: React.ReactNode }) {
  return <span className={cn(done ? "text-fg-subtle line-through" : "text-fg")}>{children}</span>;
}

/* --------------------------------------------------------------- task list */

/** Bordered container. Holds TaskGroups, or TaskRows directly with role="list". */
function TaskList({ className, ...props }: React.ComponentProps<"div">) {
  return <div data-slot="task-list" className={cn("flex flex-col overflow-hidden rounded-lg border border-border bg-surface", className)} {...props} />;
}

type TaskGroupProps = Omit<React.ComponentProps<"section">, "title"> & {
  title: React.ReactNode;
  status?: StatusIconStatus;
  count?: number;
  defaultOpen?: boolean;
  open?: boolean;
  onOpenChange?: (open: boolean) => void;
  /** Shows a + button in the header. */
  onAdd?: () => void;
};

/** Collapsible group with a sticky-looking header: status, title, count. Children are TaskRows. */
function TaskGroup({ title, status, count, defaultOpen = true, open, onOpenChange, onAdd, className, children, ...props }: TaskGroupProps) {
  const [innerOpen, setInnerOpen] = React.useState(defaultOpen);
  const isOpen = open ?? innerOpen;
  const contentId = React.useId();
  const setOpen = (next: boolean) => {
    if (open === undefined) setInnerOpen(next);
    onOpenChange?.(next);
  };
  const label = typeof title === "string" ? title : status ? statusIconLabels[status] : "group";

return (
    <section data-slot="task-group" data-state={isOpen ? "open" : "closed"} aria-label={label} className={cn("flex flex-col", className)} {...props}>
      <div className="flex h-(--dx-control-lg) items-center gap-1 border-b border-border bg-bg-subtle pr-2 pl-1.5">
        <button
          type="button"
          aria-expanded={isOpen}
          aria-controls={contentId}
          onClick={() => setOpen(!isOpen)}
          className="flex h-(--dx-control-sm) min-w-0 flex-1 items-center gap-2 rounded-sm px-1.5 text-left text-base font-medium"
        >
          <ChevronRightIcon
            aria-hidden
            className={cn("size-3.5 shrink-0 text-fg-subtle transition-transform duration-(--dx-motion) ease-out", isOpen && "rotate-90")}
          />
          {status && <StatusIcon status={status} label="" />}
          <span className="truncate">{title}</span>
          {count !== undefined && <span className="text-sm font-normal text-fg-subtle tabular-nums">{count}</span>}
        </button>
        {onAdd && (
          <Button size="icon-sm" variant="ghost" aria-label={`Add task to ${label}`} onClick={onAdd}>
            <PlusIcon />
          </Button>
        )}
      </div>
      <div id={contentId} role="list" hidden={!isOpen}>
        {children}
      </div>
    </section>
  );
}

export {
  TaskRow,
  TaskList,
  TaskGroup,
  DueDate,
  ProjectTag,
  tagDotColors,
  dueInfo,
  daysFrom,
  startOfDay,
  isoDay,
  type TaskRowProps,
  type TaskGroupProps,
  type TagColor,
  type Person,
};
```

## kanban

Controlled dnd-kit board: drag cards across columns by mouse or keyboard, WIP limits.

Install: `curl -fsSL https://ui.digitexa.com/dx.mjs | node --input-type=module - add kanban`
Also adds: avatar, badge, button, priority, progress, status-icon, task-row, utils, theme
npm: @dnd-kit/core@^6.3.1 @dnd-kit/sortable@^10.0.0 @dnd-kit/utilities@^3.2.2 lucide-react@^1.61.0

```tsx
import { KanbanBoard, KanbanColumn, KanbanCard } from "@/components/ui/kanban";
```

### Example

```tsx
import * as React from "react";

import { KanbanBoard, KanbanCard, type KanbanColumnData } from "@/components/ui/kanban";
import type { Priority } from "@/components/ui/priority";
import type { TagColor } from "@/components/ui/task-row";
import { useNow } from "@/lib/use-now";

type Card = {
  id: string;
  title: string;
  priority: Priority;
  labels?: { name: string; color: TagColor }[];
  assignees: string[];
  due?: Date;
  progress?: number;
};

const build = (day: (n: number) => Date): KanbanColumnData<Card>[] => [
  {
    id: "col-todo",
    title: "To do",
    status: "todo",
    items: [
      { id: "STR-150", title: "Product page image zoom", priority: "low", labels: [{ name: "Frontend", color: "info" }], assignees: ["Leyla Demir"], due: day(9) },
      { id: "DRV-91", title: "Push notification copy review", priority: "none", labels: [{ name: "Copy", color: "neutral" }], assignees: [] },
      { id: "PRC-35", title: "Annual billing toggle", priority: "medium", assignees: ["Theo Martin"], due: day(5) },
    ],
  },
  {
    id: "col-progress",
    title: "In progress",
    status: "progress",
    limit: 3,
    items: [
      {
        id: "STR-142",
        title: "Checkout: retry failed card payments",
        priority: "urgent",
        labels: [
          { name: "Payments", color: "danger" },
          { name: "Backend", color: "accent" },
        ],
        assignees: ["Mira Okafor", "Jonas Weber"],
        due: day(0),
        progress: 60,
      },
      { id: "PRC-31", title: "Compare plans table on mobile", priority: "high", labels: [{ name: "Frontend", color: "info" }], assignees: ["Theo Martin"], due: day(-2), progress: 35 },
      { id: "DRV-90", title: "Route ETA smoothing", priority: "medium", assignees: ["Kenji Sato"], due: day(4), progress: 20 },
      { id: "STR-147", title: "Gift card balance check", priority: "low", assignees: ["Ana Souza"], due: day(12) },
    ],
  },
  {
    id: "col-review",
    title: "In review",
    status: "review",
    items: [
      { id: "DRV-88", title: "Offline queue for delivery photos", priority: "medium", labels: [{ name: "Mobile", color: "review" }], assignees: ["Jonas Weber", "Ruth Cohen"], due: day(3), progress: 90 },
    ],
  },
  { id: "col-done", title: "Done", status: "done", items: [] },
];

export default function Demo() {
  const now = useNow();
  return now ? <Board today={now} /> : <div className="h-[29rem] w-full" />;
}

function Board({ today }: { today: Date }) {
  const [columns, setColumns] = React.useState(() => build(dayFrom(today)));
  return (
    <KanbanBoard
      className="w-full"
      columns={columns}
      onChange={setColumns}
      onAdd={() => {}}
      getItemLabel={(c) => c.title}
      renderCard={(c) => (
        <KanbanCard
          identifier={c.id}
          title={c.title}
          labels={c.labels}
          priority={c.priority}
          assignees={c.assignees.map((name) => ({ name }))}
          due={c.due}
          today={today}
          progress={c.progress}
          done={columns.find((col) => col.id === "col-done")?.items.some((i) => i.id === c.id)}
        />
      )}
    />
  );
}
```

### Source: ui/kanban.tsx

```tsx
"use client";

import * as React from "react";
import {
  closestCorners,
  DndContext,
  DragOverlay,
  KeyboardSensor,
  PointerSensor,
  useDroppable,
  useSensor,
  useSensors,
  type Announcements,
  type DragEndEvent,
  type DragOverEvent,
  type DragStartEvent,
  type UniqueIdentifier,
} from "@dnd-kit/core";
import { arrayMove, SortableContext, sortableKeyboardCoordinates, useSortable, verticalListSortingStrategy } from "@dnd-kit/sortable";
import { CSS } from "@dnd-kit/utilities";
import { PlusIcon } from "lucide-react";

import { Avatar, AvatarGroup } from "@/components/ui/avatar";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { PriorityIcon, priorityLabels, type Priority } from "@/components/ui/priority";
import { Progress } from "@/components/ui/progress";
import { StatusIcon, type StatusIconStatus } from "@/components/ui/status-icon";
import { DueDate, type Person, type TagColor } from "@/components/ui/task-row";
import { cn } from "@/lib/utils";

type KanbanItem = { id: UniqueIdentifier };

type KanbanColumnData<T extends KanbanItem> = {
  /** Must not collide with any item id. */
  id: UniqueIdentifier;
  title: string;
  status?: StatusIconStatus;
  /** WIP limit: the count turns red above it. */
  limit?: number;
  items: T[];
};

type KanbanMove<T extends KanbanItem> = {
  item: T;
  from: { columnId: UniqueIdentifier; index: number };
  to: { columnId: UniqueIdentifier; index: number };
};

type KanbanBoardProps<T extends KanbanItem> = Omit<React.ComponentProps<"div">, "onChange" | "children"> & {
  columns: KanbanColumnData<T>[];
  renderCard: (item: T, state: { overlay: boolean; dragging: boolean }) => React.ReactNode;
  /** Receives the full next state after a drop. */
  onChange?: (columns: KanbanColumnData<T>[]) => void;
  /** Same drop, described as a single move. Not called when the card ends where it started. */
  onMove?: (move: KanbanMove<T>, columns: KanbanColumnData<T>[]) => void;
  onAdd?: (columnId: UniqueIdentifier) => void;
  /** Text used in screen-reader announcements, e.g. the card title. */
  getItemLabel?: (item: T) => string;
  /** Width of every column; any CSS length. */
  columnWidth?: string;
};

function findColumn<T extends KanbanItem>(columns: KanbanColumnData<T>[], id: UniqueIdentifier) {
  return columns.find((c) => c.id === id) ?? columns.find((c) => c.items.some((i) => i.id === id));
}

function locate<T extends KanbanItem>(columns: KanbanColumnData<T>[], id: UniqueIdentifier) {
  for (const c of columns) {
    const index = c.items.findIndex((i) => i.id === id);
    if (index !== -1) return { columnId: c.id, index, item: c.items[index] };
  }
  return null;
}

/** Board of sortable columns. Drag with the pointer, or focus a card and use Space + arrow keys. */
function KanbanBoard<T extends KanbanItem>({
  columns,
  renderCard,
  onChange,
  onMove,
  onAdd,
  getItemLabel,
  columnWidth = "18rem",
  className,
  style,
  ...props
}: KanbanBoardProps<T>) {
  // While dragging, the board shows a local draft; the parent only hears about the final drop.
  const [draft, setDraft] = React.useState<KanbanColumnData<T>[] | null>(null);
  const [activeId, setActiveId] = React.useState<UniqueIdentifier | null>(null);
  const origin = React.useRef<ReturnType<typeof locate<T>>>(null);
  const shown = draft ?? columns;
  const dndId = React.useId();
  // dnd-kit needs a number, so the drop animation reads --dx-motion (0 under reduced motion) at drag start
  const [dropMs, setDropMs] = React.useState(170);

const sensors = useSensors(
    useSensor(PointerSensor, { activationConstraint: { distance: 4 } }),
    useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }),
  );

const announcements: Announcements = {
    onDragStart: ({ active }) => `Picked up ${labelOf(active.id)} in ${positionIn(active.id)}.`,
    onDragOver: ({ active, over }) => (over ? `${labelOf(active.id)} is over ${positionIn(over.id)}.` : `${labelOf(active.id)} is no longer over a column.`),
    onDragEnd: ({ active, over }) =>
      over ? `Dropped ${labelOf(active.id)} in ${columnTitle(over.id)}.` : `Dropped ${labelOf(active.id)}. It stayed in place.`,
    onDragCancel: ({ active }) => `Moving ${labelOf(active.id)} was cancelled.`,
  };

function handleDragStart({ active }: DragStartEvent) {
    setActiveId(active.id);
    setDraft(columns);
    const motion = parseFloat(getComputedStyle(document.documentElement).getPropertyValue("--dx-motion"));
    if (!Number.isNaN(motion)) setDropMs(motion);
    origin.current = locate(columns, active.id);
  }

// Cross-column moves happen live so the card shows where it will land.
  function handleDragOver({ active, over }: DragOverEvent) {
    if (!over) return;
    setDraft((prev) => {
      const cols = prev ?? columns;
      const from = findColumn(cols, active.id);
      const to = findColumn(cols, over.id);
      if (!from || !to || from.id === to.id) return prev;
      const item = from.items.find((i) => i.id === active.id);
      if (!item) return prev;
      const overIndex = to.items.findIndex((i) => i.id === over.id);
      const insertAt = overIndex === -1 ? to.items.length : overIndex;
      return cols.map((c) => {
        if (c.id === from.id) return { ...c, items: c.items.filter((i) => i.id !== active.id) };
        if (c.id === to.id) return { ...c, items: [...c.items.slice(0, insertAt), item, ...c.items.slice(insertAt)] };
        return c;
      });
    });
  }

function handleDragCancel() {
    setDraft(null);
    setActiveId(null);
    origin.current = null;
  }

const activeItem = activeId === null ? null : (locate(shown, activeId)?.item ?? null);

return (
    <DndContext
      id={dndId}
      sensors={sensors}
      collisionDetection={closestCorners}
      accessibility={{
        announcements,
        screenReaderInstructions: {
          draggable: "To pick up a card, press Space or Enter. Use the arrow keys to move it within or between columns. Press Space or Enter again to drop it, or Escape to cancel.",
        },
      }}
      onDragStart={handleDragStart}
      onDragOver={handleDragOver}
      onDragEnd={handleDragEnd}
      onDragCancel={handleDragCancel}
    >
      <div
        data-slot="kanban-board"
        className={cn("flex items-start gap-3 overflow-x-auto pb-2", className)}
        style={{ ["--dx-kanban-column" as string]: columnWidth, ...style }}
        {...props}
      >
        {shown.map((col) => (
          <DroppableColumn key={col.id} column={col} onAdd={onAdd ? () => onAdd(col.id) : undefined}>
            {col.items.map((item) => (
              <SortableCard key={item.id} id={item.id} label={getItemLabel?.(item)}>
                {(dragging) => renderCard(item, { overlay: false, dragging })}
              </SortableCard>
            ))}
          </DroppableColumn>
        ))}
      </div>
      <DragOverlay dropAnimation={{ duration: dropMs, easing: "cubic-bezier(0.22, 0.9, 0.3, 1)" /* = --dx-motion-ease; WAAPI cannot read vars */ }}>
        {activeItem ? (
          <div data-slot="kanban-overlay" className="cursor-grabbing rounded-md shadow-lg [&>*]:shadow-none">
            {renderCard(activeItem, { overlay: true, dragging: true })}
          </div>
        ) : null}
      </DragOverlay>
    </DndContext>
  );
}

function DroppableColumn<T extends KanbanItem>({
  column,
  onAdd,
  children,
}: {
  column: KanbanColumnData<T>;
  onAdd?: () => void;
  children: React.ReactNode;
}) {
  const { setNodeRef, isOver } = useDroppable({ id: column.id });
  return (
    <KanbanColumn
      title={column.title}
      status={column.status}
      count={column.items.length}
      limit={column.limit}
      onAdd={onAdd}
      bodyRef={setNodeRef}
      data-over={isOver || undefined}
    >
      <SortableContext items={column.items.map((i) => i.id)} strategy={verticalListSortingStrategy}>
        {children}
      </SortableContext>
      {column.items.length === 0 && (
        <div className="grid h-16 place-items-center rounded-md border border-dashed border-border-strong text-xs text-fg-subtle">Drop cards here</div>
      )}
    </KanbanColumn>
  );
}

/* ------------------------------------------------------------- column shell */

type KanbanColumnProps = Omit<React.ComponentProps<"section">, "title"> & {
  title: string;
  status?: StatusIconStatus;
  count?: number;
  limit?: number;
  onAdd?: () => void;
  /** Ref for the card area (the drop target). */
  bodyRef?: React.Ref<HTMLDivElement>;
};

/** Column frame: header with status, title, count / WIP limit and add button; cards go in children. */
function KanbanColumn({ title, status, count, limit, onAdd, bodyRef, className, children, ...props }: KanbanColumnProps) {
  const over = limit !== undefined && count !== undefined && count > limit;
  return (
    <section
      data-slot="kanban-column"
      aria-label={title}
      className={cn(
        "flex max-h-full w-(--dx-kanban-column,18rem) shrink-0 flex-col rounded-lg bg-bg-subtle",
        "transition-[box-shadow] duration-(--dx-motion-fast) data-over:ring-1 data-over:ring-border-strong",
        className,
      )}
      {...props}
    >
      <header className="flex h-(--dx-control-lg) shrink-0 items-center gap-2 pr-1.5 pl-3">
        {status && <StatusIcon status={status} label="" />}
        <h3 className="truncate text-base font-medium">{title}</h3>
        {count !== undefined && (
          <span
            className={cn("text-sm text-fg-subtle tabular-nums", over && "rounded-sm bg-danger-subtle px-1 font-medium text-danger-fg-subtle")}
            title={over ? `Over the WIP limit of ${limit}` : undefined}
          >
            {count}
            {limit !== undefined && `/${limit}`}
          </span>
        )}
        {onAdd && (
          <Button size="icon-sm" variant="ghost" className="ml-auto" aria-label={`Add card to ${title}`} onClick={onAdd}>
            <PlusIcon />
          </Button>
        )}
      </header>
      <div ref={bodyRef} className="flex min-h-16 flex-1 flex-col gap-2 overflow-y-auto px-2 pb-2">
        {children}
      </div>
    </section>
  );
}

/* ---------------------------------------------------------------- card */

type KanbanCardProps = Omit<React.ComponentProps<"div">, "title"> & {
  title: React.ReactNode;
  identifier?: string;
  labels?: { name: string; color?: TagColor }[];
  priority?: Priority;
  assignees?: Person[];
  due?: Date;
  today?: Date;
  /** 0–100; renders a thin bar. */
  progress?: number;
  done?: boolean;
};

/** Presentational card for renderCard. */
function KanbanCard({ title, identifier, labels, priority, assignees, due, today, progress, done, className, children, ...props }: KanbanCardProps) {
  const hasFooter = due || priority || (assignees && assignees.length > 0);
  return (
    <div
      data-slot="kanban-card"
      className={cn(
        "flex flex-col gap-2 rounded-md border border-border bg-surface p-2.5 text-base shadow-sm",
        "transition-[border-color] duration-(--dx-motion-fast) hover:border-border-strong",
        className,
      )}
      {...props}
    >
      {identifier && <span className="text-xs text-fg-subtle tabular-nums">{identifier}</span>}
      <div className={cn("line-clamp-2 font-medium", done && "text-fg-subtle line-through")}>{title}</div>
      {labels && labels.length > 0 && (
        <div className="flex flex-wrap gap-1">
          {labels.map((l) => (
            <Badge key={l.name} variant={l.color ?? "neutral"}>
              {l.name}
            </Badge>
          ))}
        </div>
      )}
      {children}
      {progress !== undefined && (
        <div className="flex items-center gap-2">
          <Progress value={progress} label="Progress" tone={progress >= 100 ? "success" : "accent"} className="h-1" />
          <span className="text-2xs text-fg-subtle tabular-nums">{Math.round(progress)}%</span>
        </div>
      )}
      {hasFooter && (
        <div className="flex items-center gap-2">
          {priority && <PriorityIcon priority={priority} label={`Priority: ${priorityLabels[priority]}`} />}
          {due && <DueDate date={due} today={today} done={done} />}
          {assignees && assignees.length > 0 && (
            <AvatarGroup max={3} className="ml-auto">
              {assignees.map((a) => (
                <Avatar key={a.name} name={a.name} src={a.src} size="sm" />
              ))}
            </AvatarGroup>
          )}
        </div>
      )}
    </div>
  );
}

export { KanbanBoard, KanbanColumn, KanbanCard, type KanbanBoardProps, type KanbanColumnData, type KanbanItem, type KanbanMove, type KanbanCardProps };
```

## timeline

Gantt timeline: day/week scale, status bars, milestones, today line, weekend shading.

Install: `curl -fsSL https://ui.digitexa.com/dx.mjs | node --input-type=module - add timeline`
Also adds: status-icon, tooltip, use-now, utils, theme

```tsx
import { Timeline } from "@/components/ui/timeline";
```

### Example

```tsx
import * as React from "react";

import { Avatar } from "@/components/ui/avatar";
import { Timeline, type TimelineItem } from "@/components/ui/timeline";
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
import { useNow } from "@/lib/use-now";

const person = (name: string) => <Avatar name={name} size="sm" />;

const build = (day: (n: number) => Date): TimelineItem[] => [
  { id: "discovery", label: "Checkout discovery", start: day(-18), end: day(-9), status: "done", progress: 100, meta: person("Mira Okafor") },
  { id: "api", label: "Cart API migration", start: day(-10), end: day(2), status: "progress", progress: 70, meta: person("Ana Souza") },
  { id: "design", label: "Pricing page design", start: day(-6), end: day(1), status: "review", progress: 90, meta: person("Leyla Demir") },
  { id: "payments", label: "Card payment retries", start: day(-3), end: day(8), status: "progress", progress: 40, meta: person("Jonas Weber") },
  { id: "beta", label: "Checkout beta", start: day(10), status: "todo", milestone: true },
  { id: "driver", label: "Driver app offline mode", start: day(4), end: day(20), status: "todo", meta: person("Kenji Sato") },
  { id: "campaign", label: "Spring campaign brief", start: day(14), end: day(30), status: "backlog", meta: person("Theo Martin") },
  { id: "launch", label: "Pricing launch", start: day(24), status: "todo", milestone: true },
];

export default function Demo() {
  const now = useNow();
  const [scale, setScale] = React.useState<"day" | "week">("day");
  const items = React.useMemo(() => (now ? build(dayFrom(now)) : []), [now]);
  if (!now) return <div className="h-[26rem] w-full" />;
  const day = dayFrom(now);
  return (
    <div className="flex w-full min-w-0 flex-col gap-3">
      <ToggleGroup type="single" value={scale} onValueChange={(v) => v && setScale(v as "day" | "week")} aria-label="Scale" className="self-start">
        <ToggleGroupItem value="day">Days</ToggleGroupItem>
        <ToggleGroupItem value="week">Weeks</ToggleGroupItem>
      </ToggleGroup>
      <Timeline items={items} start={day(-21)} end={day(scale === "day" ? 21 : 60)} scale={scale} labelHeader="Work item" />
    </div>
  );
}
```

### Source: ui/timeline.tsx

```tsx
"use client";

import * as React from "react";

import { StatusIcon, statusIconLabels, type StatusIconStatus } from "@/components/ui/status-icon";
import { TooltipContent, TooltipRoot, TooltipTrigger } from "@/components/ui/tooltip";
import { useNow } from "@/lib/use-now";
import { cn } from "@/lib/utils";

type TimelineItem = {
  id: string;
  label: React.ReactNode;
  /** Plain-text name for tooltips and aria labels when `label` isn't a string. */
  name?: string;
  /** Right side of the label column, e.g. an avatar. */
  meta?: React.ReactNode;
  start: Date;
  /** Inclusive. Ignored for milestones. */
  end?: Date;
  status?: StatusIconStatus;
  /** Draws a diamond on `start` instead of a bar. */
  milestone?: boolean;
  /** 0–100, shaded inside the bar. */
  progress?: number;
};

type TimelineProps = Omit<React.ComponentProps<"div">, "children"> & {
  items: TimelineItem[];
  start: Date;
  end: Date;
  scale?: "day" | "week";
  /** Defaults to the client clock; the today line appears after hydration. */
  today?: Date;
  labelHeader?: React.ReactNode;
  onItemClick?: (item: TimelineItem) => void;
};

const DAY = 86_400_000;
const unitWidth = { day: 32, week: 14 } as const; // px per day
const labelWidth = 224;

const barColors: Record<StatusIconStatus, string> = {
  backlog: "bg-status-backlog-subtle text-status-backlog-fg border-status-backlog/45",
  todo: "bg-status-todo-subtle text-status-todo-fg border-status-todo/45",
  progress: "bg-status-progress-subtle text-status-progress-fg border-status-progress/50",
  review: "bg-status-review-subtle text-status-review-fg border-status-review/45",
  done: "bg-status-done-subtle text-status-done-fg border-status-done/45",
};
const fillColors: Record<StatusIconStatus, string> = {
  backlog: "bg-status-backlog/20",
  todo: "bg-status-todo/20",
  progress: "bg-status-progress/25",
  review: "bg-status-review/20",
  done: "bg-status-done/20",
};
const solidColors: Record<StatusIconStatus, string> = {
  backlog: "bg-status-backlog",
  todo: "bg-status-todo",
  progress: "bg-status-progress",
  review: "bg-status-review",
  done: "bg-status-done",
};

function startOfDay(d: Date) {
  return new Date(d.getFullYear(), d.getMonth(), d.getDate());
}
function dayIndex(d: Date, origin: Date) {
  return Math.round((startOfDay(d).getTime() - origin.getTime()) / DAY);
}

/** Gantt chart: a sticky label column, day or week header, bars per item, weekend shading and a today line. */
function Timeline({ items, start, end, scale = "day", today, labelHeader = "Name", onItemClick, className, ...props }: TimelineProps) {
  const now = useNow();
  const origin = startOfDay(start);
  const total = Math.max(1, dayIndex(end, origin) + 1);
  const w = unitWidth[scale];
  const days = Array.from({ length: total }, (_, i) => new Date(origin.getFullYear(), origin.getMonth(), origin.getDate() + i));
  const ref = today ?? now;
  const todayIdx = ref ? dayIndex(ref, origin) : -1;
  const scroller = React.useRef<HTMLDivElement>(null);
  const scrolled = React.useRef(0); // the scale it last scrolled for

// bring today into view once per scale, about a third from the left
  React.useEffect(() => {
    const el = scroller.current;
    if (!el || scrolled.current === w || todayIdx < 0 || todayIdx >= total) return;
    scrolled.current = w;
    const track = el.clientWidth - labelWidth;
    el.scrollLeft = Math.max(0, todayIdx * w - track / 3);
  }, [todayIdx, total, w]);

// header bands: months on top, days or weeks below
  const months: { key: string; label: string; from: number; span: number }[] = [];
  const weeks: { key: string; label: string; from: number; span: number }[] = [];
  days.forEach((d, i) => {
    const mk = `${d.getFullYear()}-${d.getMonth()}`;
    if (months.at(-1)?.key === mk) months.at(-1)!.span++;
    else months.push({ key: mk, label: fmtMonth.format(d), from: i, span: 1 });
    if (i === 0 || d.getDay() === 1) weeks.push({ key: String(i), label: fmtDay.format(d), from: i, span: 1 });
    else weeks.at(-1)!.span++;
  });

const trackWidth = total * w;
  const gridLines = {
    backgroundImage: "linear-gradient(to right, var(--dx-border) 1px, transparent 1px)",
    backgroundSize: `${scale === "day" ? w : w * 7}px 100%`,
    backgroundPosition: scale === "week" ? `${(weeks[1]?.from ?? 0) * w}px 0` : undefined,
  } satisfies React.CSSProperties;

return (
    <div
      ref={scroller}
      data-slot="timeline"
      className={cn("overflow-x-auto rounded-lg border border-border bg-surface", className)}
      style={{ ["--dx-timeline-label" as string]: `${labelWidth}px` }}
      {...props}
    >
      <div role="table" aria-label="Timeline" className="relative" style={{ width: labelWidth + trackWidth }}>
        {/* header */}
        <div role="rowgroup">
          <div role="row" className="flex border-b border-border">
            <div
              role="columnheader"
              className="sticky left-0 z-20 flex w-(--dx-timeline-label) shrink-0 items-end border-r border-border bg-surface px-3 pb-1.5 text-xs font-medium text-fg-muted"
            >
              {labelHeader}
            </div>
            <div role="columnheader" className="relative" style={{ width: trackWidth }}>
              <div className="relative h-7 border-b border-border">
                {months.map((m) => (
                  <div
                    key={m.key}
                    className="absolute inset-y-0 flex items-center border-l border-border px-2 text-xs font-medium whitespace-nowrap first:border-l-0"
                    style={{ left: m.from * w, width: m.span * w }}
                  >
                    <span className="sticky left-[calc(var(--dx-timeline-label)+8px)] truncate">{m.label}</span>
                  </div>
                ))}
              </div>
              <div className="relative h-8">
                {scale === "day"
                  ? days.map((d, i) => {
                      const weekend = d.getDay() === 0 || d.getDay() === 6;
                      return (
                        <div
                          key={i}
                          className={cn(
                            "absolute inset-y-0 flex flex-col items-center justify-center border-l border-border text-2xs leading-3 first:border-l-0",
                            weekend ? "bg-muted/60 text-fg-subtle" : "text-fg-muted",
                            i === todayIdx && "font-semibold text-accent-subtle-fg",
                          )}
                          style={{ left: i * w, width: w }}
                        >
                          <span aria-hidden>{fmtWeekday.format(d)}</span>
                          <span className="tabular-nums">{d.getDate()}</span>
                        </div>
                      );
                    })
                  : weeks.map((wk) => (
                      <div
                        key={wk.key}
                        className="absolute inset-y-0 flex items-center border-l border-border px-1.5 text-2xs whitespace-nowrap text-fg-muted first:border-l-0"
                        style={{ left: wk.from * w, width: wk.span * w }}
                      >
                        <span className="truncate tabular-nums">{wk.label}</span>
                      </div>
                    ))}
              </div>
              {todayIdx >= 0 && todayIdx < total && (
                <span
                  className="absolute bottom-0 z-10 h-1.5 w-1.5 -translate-x-1/2 rounded-full bg-accent"
                  style={{ left: todayIdx * w + w / 2 }}
                  aria-hidden
                />
              )}
            </div>
          </div>
        </div>

{/* body */}
        <div role="rowgroup" className="relative">
          {/* background layer: grid, weekends, today */}
          <div aria-hidden className="pointer-events-none absolute inset-y-0" style={{ left: labelWidth, width: trackWidth }}>
            {days.map((d, i) =>
              d.getDay() === 0 || d.getDay() === 6 ? <div key={i} className="absolute inset-y-0 bg-muted/60" style={{ left: i * w, width: w }} /> : null,
            )}
            <div className="absolute inset-0" style={gridLines} />
            {todayIdx >= 0 && todayIdx < total && <div className="absolute inset-y-0 z-10 w-px bg-accent" style={{ left: todayIdx * w + w / 2 }} />}
          </div>

{items.map((item) => (
            <TimelineRow key={item.id} item={item} origin={origin} total={total} w={w} onItemClick={onItemClick} />
          ))}
          {items.length === 0 && <div className="px-3 py-6 text-center text-sm text-fg-subtle">Nothing scheduled in this range.</div>}
        </div>
      </div>
    </div>
  );
}

const tooltip = (
    <TooltipContent side="top" className="flex-col items-start gap-0.5">
      <span className="font-medium">{name}</span>
      <span className="opacity-80">
        {range}
        {!item.milestone && ` · ${span}d`} · {statusIconLabels[status]}
        {item.progress !== undefined && ` · ${Math.round(item.progress)}%`}
      </span>
    </TooltipContent>
  );

return (
    <div role="row" data-slot="timeline-row" className="group/row relative flex h-(--dx-row-height) border-b border-border last:border-b-0">
      <div
        role="rowheader"
        className="sticky left-0 z-20 flex w-(--dx-timeline-label) shrink-0 items-center gap-2 border-r border-border bg-surface px-3 text-base"
      >
        <StatusIcon status={status} label="" />
        <span className="min-w-0 flex-1 truncate">{item.label}</span>
        {item.meta}
      </div>
      <div role="cell" className="relative flex-1 group-hover/row:bg-bg-subtle/60">
        {visible && (
          <TooltipRoot>
            <TooltipTrigger asChild>
              {item.milestone ? (
                <button
                  type="button"
                  aria-label={description}
                  onClick={onItemClick ? () => onItemClick(item) : undefined}
                  className="absolute top-1/2 z-10 grid size-5 -translate-x-1/2 -translate-y-1/2 place-items-center rounded-sm"
                  style={{ left: s * w + w / 2 }}
                >
                  <span className={cn("size-3 rotate-45 rounded-[2px] ring-2 ring-surface", solidColors[status])} />
                </button>
              ) : (
                <button
                  type="button"
                  aria-label={description}
                  onClick={onItemClick ? () => onItemClick(item) : undefined}
                  className={cn(
                    "absolute top-1/2 z-10 flex h-[calc(var(--dx-row-height)-14px)] -translate-y-1/2 items-center overflow-hidden rounded-sm border px-1.5 text-xs font-medium",
                    "transition-[filter] duration-(--dx-motion-fast) hover:brightness-95 dark:hover:brightness-110",
                    barColors[status],
                    s < 0 && "rounded-l-none border-l-0",
                    e >= total && "rounded-r-none border-r-0",
                  )}
                  style={{ left: from * w + 2, width: Math.max(w - 4, (to - from + 1) * w - 4) }}
                >
                  {item.progress !== undefined && (
                    <span aria-hidden className={cn("absolute inset-y-0 left-0", fillColors[status])} style={{ width: `${Math.min(100, item.progress)}%` }} />
                  )}
                  <span className="relative truncate">{name}</span>
                </button>
              )}
            </TooltipTrigger>
            {tooltip}
          </TooltipRoot>
        )}
      </div>
    </div>
  );
}

export { Timeline, type TimelineItem, type TimelineProps };
```

## calendar-view

Month calendar for scheduled work: 6-week grid, status pills, +N more popover.

Install: `curl -fsSL https://ui.digitexa.com/dx.mjs | node --input-type=module - add calendar-view`
Also adds: button, popover, status-icon, use-now, utils, theme
npm: lucide-react@^1.61.0

```tsx
import { CalendarView } from "@/components/ui/calendar-view";
```

### Example

```tsx
import * as React from "react";

import { CalendarView, type CalendarEvent } from "@/components/ui/calendar-view";
import { useNow } from "@/lib/use-now";

const build = (day: (n: number) => Date): CalendarEvent[] => [
  { id: "e1", title: "Checkout discovery wrap-up", date: day(-8), status: "done" },
  { id: "e2", title: "Cart API cutover", date: day(-3), status: "done" },
  { id: "e3", title: "Design review", date: day(0), time: "10:00", status: "review" },
  { id: "e4", title: "Card retries standup", date: day(0), time: "11:30", status: "progress" },
  { id: "e5", title: "Pricing copy due", date: day(0), status: "progress" },
  { id: "e6", title: "Vendor call", date: day(0), time: "16:00", status: "todo" },
  { id: "e7", title: "Driver app QA", date: day(2), end: day(4), status: "progress" },
  { id: "e8", title: "Checkout beta", date: day(10), status: "todo" },
  { id: "e9", title: "Retro", date: day(6), time: "15:00", status: "todo" },
  { id: "e10", title: "Spring campaign kickoff", date: day(14), status: "backlog" },
  { id: "e11", title: "Pricing launch", date: day(24), status: "todo" },
];

export default function Demo() {
  const now = useNow();
  const events = React.useMemo(() => (now ? build(dayFrom(now)) : []), [now]);
  const [picked, setPicked] = React.useState<string>("Click an event or a day.");
  const fmt = new Intl.DateTimeFormat("en-US", { month: "short", day: "numeric" });
  return (
    <div className="flex w-full flex-col gap-2">
      <CalendarView
        events={events}
        onEventClick={(e) => setPicked(`Opened “${e.title}”`)}
        onDayClick={(d, list) => setPicked(`${fmt.format(d)}: ${list.length} ${list.length === 1 ? "event" : "events"}`)}
      />
      <p className="text-sm text-fg-muted" aria-live="polite">
        {picked}
      </p>
    </div>
  );
}
```

### Source: ui/calendar-view.tsx

```tsx
"use client";

import * as React from "react";
import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";

import { Button } from "@/components/ui/button";
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
import { type StatusIconStatus } from "@/components/ui/status-icon";
import { useNow } from "@/lib/use-now";
import { cn } from "@/lib/utils";

type CalendarEvent = {
  id: string;
  title: string;
  date: Date;
  /** Inclusive; the event repeats on every day up to it. */
  end?: Date;
  status?: StatusIconStatus;
  /** Shown before the title, e.g. "14:00". */
  time?: string;
};

type CalendarViewProps<E extends CalendarEvent> = Omit<React.ComponentProps<"div">, "onChange"> & {
  events: E[];
  /** Any day inside the visible month (controlled). */
  month?: Date;
  defaultMonth?: Date;
  onMonthChange?: (month: Date) => void;
  /** 0 = Sunday, 1 = Monday (default). */
  weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
  /** Pills shown per day before "+N more". */
  maxEvents?: number;
  today?: Date;
  locale?: string;
  onEventClick?: (event: E) => void;
  onDayClick?: (date: Date, events: E[]) => void;
};

const pillColors: Record<StatusIconStatus, string> = {
  backlog: "bg-status-backlog-subtle text-status-backlog-fg",
  todo: "bg-status-todo-subtle text-status-todo-fg",
  progress: "bg-status-progress-subtle text-status-progress-fg",
  review: "bg-status-review-subtle text-status-review-fg",
  done: "bg-status-done-subtle text-status-done-fg",
};
const dotColors: Record<StatusIconStatus, string> = {
  backlog: "bg-status-backlog",
  todo: "bg-status-todo",
  progress: "bg-status-progress",
  review: "bg-status-review",
  done: "bg-status-done",
};

/** Month grid for scheduled work: always 6 weeks, events as status-colored pills. Not a date picker. */
function CalendarView<E extends CalendarEvent>({
  events,
  month,
  defaultMonth,
  onMonthChange,
  weekStartsOn = 1,
  maxEvents = 3,
  today,
  locale = "en-US",
  onEventClick,
  onDayClick,
  className,
  ...props
}: CalendarViewProps<E>) {
  const now = useNow();
  const current = today ?? now;
  const [innerMonth, setInnerMonth] = React.useState<Date | undefined>(defaultMonth);
  // with no month given, the grid waits for the client clock (an empty frame is prerendered)
  const visible = month ?? innerMonth ?? current;
  const year = visible?.getFullYear() ?? 0;
  const m = visible?.getMonth() ?? 0;

const go = (next: Date) => {
    if (month === undefined) setInnerMonth(next);
    onMonthChange?.(next);
  };

// 42 days starting on the configured weekday
  const first = new Date(year, m, 1);
  const offset = (first.getDay() - weekStartsOn + 7) % 7;
  const days = Array.from({ length: 42 }, (_, i) => new Date(year, m, 1 - offset + i));

return (
    <div
      data-slot="calendar-view"
      role="region"
      aria-labelledby={titleId}
      className={cn("flex flex-col overflow-hidden rounded-lg border border-border bg-surface", className)}
      {...props}
    >
      <div className="flex items-center gap-2 border-b border-border px-3 py-2">
        <h2 id={titleId} aria-live="polite" className="flex-1 text-md font-semibold">
          {visible ? fmtTitle.format(visible) : "\u00a0"}
        </h2>
        <Button size="sm" onClick={() => go(current ?? new Date())}>
          Today
        </Button>
        <div className="flex">
          <Button size="icon-sm" variant="ghost" aria-label="Previous month" onClick={() => go(new Date(year, m - 1, 1))}>
            <ChevronLeftIcon />
          </Button>
          <Button size="icon-sm" variant="ghost" aria-label="Next month" onClick={() => go(new Date(year, m + 1, 1))}>
            <ChevronRightIcon />
          </Button>
        </div>
      </div>

<div aria-hidden className="grid grid-cols-7 border-b border-border bg-bg-subtle">
        {weekdays.map((w) => (
          <div key={w} className="px-2 py-1.5 text-2xs font-medium tracking-wide text-fg-subtle uppercase">
            {w}
          </div>
        ))}
      </div>

<div className="grid flex-1 grid-cols-7 grid-rows-6">
        {days.map((d, i) => {
          if (!visible) return <div key={i} className={cn("min-h-[calc(var(--dx-row-height)*2.6)] border-border", i % 7 !== 6 && "border-r", i < 35 && "border-b")} />;
          const list = byDay.get(dayKey(d)) ?? [];
          const outside = d.getMonth() !== m;
          const isToday = current ? sameDay(d, current) : false;
          // keep a slot for "+N more" so rows stay even
          const shown = list.length > maxEvents ? list.slice(0, maxEvents - 1) : list;
          const rest = list.length - shown.length;
          const full = fmtFull.format(d);
          return (
            <div
              key={i}
              data-slot="calendar-day"
              data-outside={outside || undefined}
              data-today={isToday || undefined}
              className={cn(
                "flex min-h-[calc(var(--dx-row-height)*2.6)] min-w-0 flex-col gap-0.5 border-border p-1",
                i % 7 !== 6 && "border-r",
                i < 35 && "border-b",
                outside && "bg-bg-subtle",
              )}
            >
              <button
                type="button"
                aria-label={`${full}${list.length ? `, ${list.length} ${list.length === 1 ? "event" : "events"}` : ""}`}
                aria-current={isToday ? "date" : undefined}
                onClick={onDayClick ? () => onDayClick(d, list) : undefined}
                disabled={!onDayClick}
                className={cn(
                  "mb-0.5 grid size-(--dx-control-xs) place-items-center self-end rounded-full text-xs tabular-nums disabled:cursor-default",
                  onDayClick && "hover:bg-muted",
                  outside ? "text-fg-subtle" : "text-fg-muted",
                  isToday && "bg-accent font-semibold text-accent-fg hover:bg-accent-hover",
                )}
              >
                {d.getDate()}
              </button>
              {shown.map((ev) => (
                <EventPill key={ev.id} event={ev} onClick={onEventClick ? () => onEventClick(ev) : undefined} />
              ))}
              {rest > 0 && (
                <Popover>
                  <PopoverTrigger asChild>
                    <button
                      type="button"
                      aria-label={`${rest} more on ${full}`}
                      className="h-(--dx-control-xs) rounded-sm px-1.5 text-left text-xs text-fg-muted hover:bg-muted hover:text-fg"
                    >
                      +{rest} more
                    </button>
                  </PopoverTrigger>
                  <PopoverContent className="flex w-60 flex-col gap-1 p-2">
                    <span className="px-1 pb-1 text-xs font-medium text-fg-muted">{full}</span>
                    {list.map((ev) => (
                      <EventPill key={ev.id} event={ev} onClick={onEventClick ? () => onEventClick(ev) : undefined} />
                    ))}
                  </PopoverContent>
                </Popover>
              )}
            </div>
          );
        })}
      </div>
    </div>
  );
}

export { CalendarView, type CalendarEvent, type CalendarViewProps };
```

## activity-feed

Activity feed with avatars, rich sentences, inline statuses and live relative times.

Install: `curl -fsSL https://ui.digitexa.com/dx.mjs | node --input-type=module - add activity-feed`
Also adds: avatar, status-icon, use-now, utils, theme

```tsx
import { ActivityFeed, ActivityItem, ActivityTarget, ActivityStatus, formatRelativeTime } from "@/components/ui/activity-feed";
```

### Example

```tsx
import { GitPullRequestIcon } from "lucide-react";

import * as React from "react";

import { ActivityFeed, ActivityItem, ActivityStatus, ActivityTarget } from "@/components/ui/activity-feed";
import { useNow } from "@/lib/use-now";

export default function Demo() {
  const now = useNow();
  return now ? <Feed now={now} /> : <div className="h-[22rem] w-full" />;
}

### Source: ui/activity-feed.tsx

```tsx
"use client";

import * as React from "react";

import { Avatar } from "@/components/ui/avatar";
import { StatusIcon, statusIconLabels, type StatusIconStatus } from "@/components/ui/status-icon";
import { useNow } from "@/lib/use-now";
import { cn } from "@/lib/utils";

const units: [Intl.RelativeTimeFormatUnit, number][] = [
  ["year", 31_536_000],
  ["month", 2_592_000],
  ["week", 604_800],
  ["day", 86_400],
  ["hour", 3_600],
  ["minute", 60],
];

/** "just now", "5 minutes ago", "yesterday", "in 2 days". */
function formatRelativeTime(date: Date, now: Date, locale = "en-US") {
  const seconds = Math.round((date.getTime() - now.getTime()) / 1000);
  if (Math.abs(seconds) < 45) return "just now";
  const rtf = new Intl.RelativeTimeFormat(locale, { numeric: "auto" });
  for (const [unit, size] of units) {
    if (Math.abs(seconds) >= size || unit === "minute") return rtf.format(Math.round(seconds / size), unit);
  }
  return "";
}

/** Vertical feed. Items are joined by a connector line through their avatars. */
function ActivityFeed({ className, ...props }: React.ComponentProps<"ol">) {
  return <ol data-slot="activity-feed" className={cn("flex flex-col", className)} {...props} />;
}

type ActivityItemProps = Omit<React.ComponentProps<"li">, "content"> & {
  actor: { name: string; src?: string };
  /** The sentence after the actor's name: "moved <b>X</b> from Done to To do". */
  children: React.ReactNode;
  time: Date;
  /** Replaces the avatar with a small icon bubble, for system events. */
  icon?: React.ReactNode;
  /** Quoted block under the sentence, e.g. a comment body. */
  content?: React.ReactNode;
  locale?: string;
};

function ActivityItem({ actor, children, time, icon, content, locale, className, ...props }: ActivityItemProps) {
  const now = useNow();
  return (
    <li data-slot="activity-item" className={cn("group/activity relative flex gap-3 pb-4 last:pb-0", className)} {...props}>
      {/* connector: from below this avatar to the next one */}
      <span aria-hidden className="absolute top-7 bottom-1 left-3 w-px -translate-x-1/2 bg-border group-last/activity:hidden" />
      <span className="relative z-1 mt-0.5 shrink-0">
        {icon ? (
          <span className="grid size-6 place-items-center rounded-full border border-border bg-surface text-fg-muted [&_svg]:size-3.5">{icon}</span>
        ) : (
          <Avatar name={actor.name} src={actor.src} size="md" className="ring-2 ring-surface" />
        )}
      </span>
      <div className="flex min-w-0 flex-1 flex-col gap-1.5 pt-0.5">
        <p className="text-base leading-5 text-fg-muted">
          <span className="font-medium text-fg">{actor.name}</span> {children}
          {now && (
            <span aria-hidden className="text-fg-subtle">
              {" "}
              ·{" "}
            </span>
          )}
          <time
            dateTime={time.toISOString()}
            title={new Intl.DateTimeFormat(locale ?? "en-US", { dateStyle: "medium", timeStyle: "short" }).format(time)}
            className="text-sm whitespace-nowrap text-fg-subtle"
          >
            {now ? formatRelativeTime(time, now, locale) : null}
          </time>
        </p>
        {content && <div className="rounded-md border border-border bg-surface px-3 py-2 text-base text-fg">{content}</div>}
      </div>
    </li>
  );
}

/** Emphasized object in the sentence, e.g. a task title. */
function ActivityTarget({ className, ...props }: React.ComponentProps<"span">) {
  return <span data-slot="activity-target" className={cn("font-medium text-fg", className)} {...props} />;
}

/** Inline status with its icon: "from <ActivityStatus status="done" />". */
function ActivityStatus({ status, className, ...props }: React.ComponentProps<"span"> & { status: StatusIconStatus }) {
  return (
    <span data-slot="activity-status" className={cn("inline-flex items-center gap-1 align-top font-medium text-fg", className)} {...props}>
      <StatusIcon status={status} label="" />
      {statusIconLabels[status]}
    </span>
  );
}

export { ActivityFeed, ActivityItem, ActivityTarget, ActivityStatus, formatRelativeTime, type ActivityItemProps };
```