Empty State

1import * as React from 'react';
2 
3// @interlace/empty-state v1.2.0 — Interlace design system.
4// Docs, props and live preview: https://ds.interlace.tools/c/empty-state
5// What changed since: https://ds.interlace.tools/c/empty-state#history
6// Generated banner — keep it, the upgrade diff reads this version.
7 
8/**
9 * @interlace/ui — EmptyState
10 *
11 * The "nothing here yet" surface. Used wherever a list, table, or search
12 * returns zero rows AND the consumer can act on it (create the first item,
13 * adjust filters, link to docs). Empty states are first-class UX, not an
14 * afterthought — `LOADING_PHILOSOPHY` flags any zero-state without one
15 * as a design bug.
16 *
17 * ## Anatomy
18 *
19 *   EmptyState                       (block — data-min-viewport=320)
20 *     ├─ {icon}                      (optional — usually a lucide outline icon)
21 *     ├─ Typography variant=h4       (title)
22 *     ├─ Typography variant=body     (description)
23 *     └─ {actions}                   (optional CTA cluster, often a Button)
24 *
25 * ## MIN_VIEWPORT — 320
26 *
27 * Always usable on phones; this is the failure-mode surface, so it must work
28 * on every device.
29 *
30 * | Rule | Concept                          | Where in this file                                          |
31 * | ---- | -------------------------------- | ----------------------------------------------------------- |
32 * | R4   | Extends native el                | `React.ComponentProps<'div'> & EmptyStateProps`             |
33 * | R6   | data-slot on root                | `data-slot="empty-state"`                                   |
34 * | R7   | className merged + ...rest       | `cn(BASE, className)` + `{...props}`                        |
35 * | R8   | No isXxx; enums for variants     | n/a — no variants on this block                             |
36 * | R10  | Composition seam                 | `icon` + `actions` slots                                    |
37 * | R14  | Declares min viewport            | `data-min-viewport={String(MIN_VIEWPORT)}` + exported const |
38 * | R18  | Tailwind only                    | Zero inline style                                           |
39 * | R19  | Tokens only                      | bg/border/text from semantic tokens                         |
40 * | R25  | Server component                 | No hooks → no `'use client'`                                |
41 */
42 
43import { cn } from '@/lib/utils';
44import { Stack } from '@/components/ui/stack';
45// … truncated