{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "table-empty", "title": "Empty Table", "description": "A table that keeps its header and column widths, with rows that spring in.", "dependencies": [ "motion" ], "registryDependencies": [ "button" ], "files": [ { "path": "components/spectrumui/blocks/empty-states/table-empty.tsx", "content": "'use client';\n\nimport * as React from 'react';\nimport { AnimatePresence, motion, useReducedMotion } from 'motion/react';\nimport { cn } from '@/lib/utils';\nimport {\n EMPTY_FONT,\n EmptyAction,\n EmptyState,\n IconDocument,\n IconPlus,\n IconUpload,\n SPRING_ENTRANCE,\n SPRING_FLUID,\n usePropState,\n} from './empty-state-kit';\n\nexport type TableEmptyVariant = 'Overlay' | 'Inline' | 'Loading';\n\nexport interface TableColumn {\n id: string;\n label: string;\n align?: 'left' | 'right';\n width?: string;\n}\n\nexport interface TableRowSeed {\n id: string;\n cells: string[];\n}\n\nexport interface TableEmptyProps {\n panelTitle?: string;\n title?: string;\n description?: string;\n columns?: TableColumn[];\n /** Rows the demo inserts, one per press, so the empty state can be left. */\n seedRows?: TableRowSeed[];\n addLabel?: string;\n importLabel?: string;\n onAdd?: () => void;\n variant?: TableEmptyVariant;\n className?: string;\n}\n\nconst COLUMNS: TableColumn[] = [\n { id: 'customer', label: 'Customer' },\n { id: 'plan', label: 'Plan', width: '22%' },\n { id: 'seats', label: 'Seats', align: 'right', width: '14%' },\n { id: 'mrr', label: 'MRR', align: 'right', width: '18%' },\n];\n\nconst SEED: TableRowSeed[] = [\n { id: 'r1', cells: ['Northbend Labs', 'Team', '12', '$708'] },\n { id: 'r2', cells: ['Harbour Freight', 'Pro', '4', '$96'] },\n { id: 'r3', cells: ['Ostrom & Co', 'Enterprise', '86', '$4,300'] },\n];\n\nexport function TableEmpty({\n panelTitle = 'Accounts',\n title = 'No accounts yet',\n description = 'The table keeps its columns so you can see the shape of what goes here. Add a row by hand or import the ones you already have.',\n columns = COLUMNS,\n seedRows = SEED,\n addLabel = 'Add row',\n importLabel = 'Import CSV',\n onAdd,\n variant = 'Overlay',\n className,\n}: TableEmptyProps) {\n const [rows, setRows] = usePropState([], variant);\n const [loading, setLoading] = usePropState(variant === 'Loading', variant);\n const reduced = useReducedMotion();\n\n /* The skeleton resolves on a timer; the effect ends the loading state rather\n than starting it, so nothing is set synchronously on mount. */\n React.useEffect(() => {\n if (!loading) return;\n const timer = setTimeout(() => setLoading(false), reduced ? 250 : 1400);\n return () => clearTimeout(timer);\n }, [loading, reduced, setLoading]);\n\n function addRow() {\n const next = seedRows[rows.length];\n if (!next) return;\n setRows((current) => [...current, next]);\n onAdd?.();\n }\n\n const empty = rows.length === 0;\n\n return (\n \n
\n
\n

\n {panelTitle}\n

\n

\n {loading ? 'loading…' : `${rows.length} rows`}\n

\n
\n }\n onClick={addRow}\n disabled={rows.length >= seedRows.length}\n className=\"h-8 px-3 text-[13.5px]\"\n >\n {addLabel}\n \n
\n\n
\n \n \n \n {columns.map((column) => (\n \n {column.label}\n \n ))}\n \n \n \n \n {rows.map((row) => (\n \n {row.cells.map((cell, index) => (\n \n {cell}\n \n ))}\n \n ))}\n \n\n {/* Ghost rows hold the table's height so the overlay never floats in\n a 40px strip, and so adding the first row does not jolt the page. */}\n {empty &&\n Array.from({ length: 6 }).map((_, index) => (\n \n {columns.map((column) => (\n \n ))}\n \n ))}\n \n
\n \n
\n\n \n {empty && !loading && (\n \n }\n medallionSize=\"sm\"\n backdrop=\"none\"\n title={title}\n description={description}\n actions={\n <>\n } onClick={addRow}>\n {addLabel}\n \n }>\n {importLabel}\n \n \n }\n />\n \n )}\n \n
\n \n );\n}\n", "type": "registry:block", "target": "components/spectrumui/blocks/empty-states/table-empty.tsx" }, { "path": "components/spectrumui/blocks/empty-states/empty-state-kit.tsx", "content": "/**\n * Everything the empty-state blocks share: the Iconly glyph set, the medallion\n * the glyph sits in, the text anatomy, the action buttons and the small parts\n * that make an empty panel read as part of a product rather than a poster.\n *\n * It ships as a second file inside every block's registry item, so\n * `npx shadcn add @spectrumui/inbox-empty` still writes one working block.\n *\n * Two decisions worth knowing before you edit it:\n *\n * - The icons are Iconly **Bold** — filled, single-path, `currentColor`.\n * An empty state has one picture and a lot of white around it, so the glyph\n * is doing the work a 13px outline arrow could not.\n * - Nothing loops. Entrances run once when the panel mounts; everything else\n * is a response to a pointer, a key or a state change. An empty screen that\n * breathes at you forever is a screen you learn to ignore.\n */\n\n'use client';\n\nimport * as React from 'react';\nimport { motion, useInView, useReducedMotion, type Transition, type Variants } from 'motion/react';\nimport { Button } from '@/components/ui/button';\nimport { cn } from '@/lib/utils';\n\nexport const SPRING_TACTILE: Transition = { type: 'spring', stiffness: 400, damping: 25, mass: 1 };\nexport const SPRING_FLUID: Transition = { type: 'spring', stiffness: 300, damping: 30 };\nexport const SPRING_ENTRANCE: Transition = { type: 'spring', stiffness: 260, damping: 20 };\nexport const SPRING_SNAPPY: Transition = { type: 'spring', stiffness: 500, damping: 28 };\n\n/**\n * Entrances fire when the panel reaches the viewport, not when the page mounts.\n * On a page of twenty-five specimens that is the difference between twenty-four\n * animations the reader never sees and twenty-five that greet them. `once`\n * because a state that re-animates every time you scroll past it is a tic.\n */\nexport const VIEWPORT = { once: true, amount: 0.3 } as const;\n\n/**\n * The built-in `easeOut` and `easeInOut` are too soft to read as deliberate.\n * These are the stronger variants everything duration-based in this file uses.\n */\nexport const EASE_OUT = [0.23, 1, 0.32, 1] as const;\nexport const EASE_IN_OUT = [0.77, 0, 0.175, 1] as const;\n\n/**\n * Inter, with the tracking it actually wants.\n *\n * The family is named through a variable first so a project that already loads\n * Inter (this one does, as `--font-inter`) gets its own optimised face, and a\n * project that does not still resolves to Inter or the system UI font rather\n * than to nothing. Tracking is set per size in `em` so it scales with the text:\n * Inter is drawn loose for small sizes and wants a touch of negative tracking\n * everywhere above a caption.\n */\nexport const EMPTY_FONT =\n '[font-family:var(--font-inter),Inter,system-ui,sans-serif] antialiased [font-feature-settings:\"cv05\",\"ss01\"]';\n\n/* ── Icons ────────────────────────────────────────────────────────────────── */\n\ntype IconProps = React.SVGProps;\n\nfunction Bold({ children, ...props }: IconProps & { children: React.ReactNode }) {\n return (\n \n {children}\n \n );\n}\n\n/**\n * Two icon styles on purpose, the same split footer-kit makes.\n *\n * The **filled** Iconly glyphs are the heroes: one per block, 24px inside a\n * medallion, where mass is exactly what you want. Everything that sits beside a\n * label — the arrow on a button, the magnifier in a field — is **outline**,\n * because a filled arrow at 15px collapses into a dash with a wedge on it and a\n * filled magnifier reads as a blob with a stick.\n */\nfunction Outline({ children, ...props }: IconProps & { children: React.ReactNode }) {\n return (\n \n {children}\n \n );\n}\n\nexport function IconActivity(props: IconProps) {\n return (\n \n \n \n );\n}\n\nexport function IconAddUser(props: IconProps) {\n return (\n \n \n \n );\n}\n\nexport function IconArrowRight(props: IconProps) {\n return (\n \n \n \n );\n}\n\nexport function IconBag(props: IconProps) {\n return (\n \n \n \n );\n}\n\nexport function IconBookmark(props: IconProps) {\n return (\n \n \n \n );\n}\n\nexport function IconBuy(props: IconProps) {\n return (\n \n \n \n );\n}\n\nexport function IconCalendar(props: IconProps) {\n return (\n \n \n \n );\n}\n\nexport function IconCategory(props: IconProps) {\n return (\n \n \n \n );\n}\n\nexport function IconChart(props: IconProps) {\n return (\n \n \n \n );\n}\n\nexport function IconChat(props: IconProps) {\n return (\n \n \n \n );\n}\n\nexport function IconClose(props: IconProps) {\n return (\n \n \n \n );\n}\n\nexport function IconCloseSquare(props: IconProps) {\n return (\n \n \n \n );\n}\n\nexport function IconCopy(props: IconProps) {\n return (\n \n \n \n \n );\n}\n\nexport function IconDanger(props: IconProps) {\n return (\n \n \n \n );\n}\n\nexport function IconDelete(props: IconProps) {\n return (\n \n \n \n );\n}\n\nexport function IconDiscovery(props: IconProps) {\n return (\n \n \n \n );\n}\n\nexport function IconDocument(props: IconProps) {\n return (\n \n \n \n );\n}\n\nexport function IconFilter(props: IconProps) {\n return (\n \n \n \n );\n}\n\nexport function IconFolder(props: IconProps) {\n return (\n \n \n \n );\n}\n\nexport function IconGraph(props: IconProps) {\n return (\n \n \n \n );\n}\n\nexport function IconHide(props: IconProps) {\n return (\n \n \n \n );\n}\n\nexport function IconInfoCircle(props: IconProps) {\n return (\n \n \n \n );\n}\n\nexport function IconLock(props: IconProps) {\n return (\n \n \n \n );\n}\n\nexport function IconMessage(props: IconProps) {\n return (\n \n \n \n );\n}\n\nexport function IconNotification(props: IconProps) {\n return (\n \n \n \n );\n}\n\nexport function IconPassword(props: IconProps) {\n return (\n \n \n \n );\n}\n\nexport function IconPlus(props: IconProps) {\n return (\n \n \n \n );\n}\n\nexport function IconSearch(props: IconProps) {\n return (\n \n \n \n \n );\n}\n\nexport function IconSend(props: IconProps) {\n return (\n \n \n \n );\n}\n\nexport function IconSetting(props: IconProps) {\n return (\n \n \n \n );\n}\n\nexport function IconShieldDone(props: IconProps) {\n return (\n \n \n \n );\n}\n\nexport function IconShow(props: IconProps) {\n return (\n \n \n \n );\n}\n\nexport function IconStar(props: IconProps) {\n return (\n \n \n \n );\n}\n\nexport function IconSwap(props: IconProps) {\n return (\n \n \n \n );\n}\n\nexport function IconTickSquare(props: IconProps) {\n return (\n \n \n \n );\n}\n\nexport function IconTimeCircle(props: IconProps) {\n return (\n \n \n \n );\n}\n\nexport function IconUnlock(props: IconProps) {\n return (\n \n \n \n );\n}\n\nexport function IconUpload(props: IconProps) {\n return (\n \n \n \n );\n}\n\nexport function IconUsers(props: IconProps) {\n return (\n \n \n \n );\n}\n\n/* ── Motion ───────────────────────────────────────────────────────────────── */\n\nexport type EmptyTone = 'neutral' | 'positive' | 'caution' | 'critical';\n\nconst TONE_GLYPH: Record = {\n neutral: 'text-neutral-800 dark:text-neutral-100',\n positive: 'text-emerald-600 dark:text-emerald-400',\n caution: 'text-amber-600 dark:text-amber-400',\n critical: 'text-red-600 dark:text-red-400',\n};\n\n/**\n * One stagger for the whole set, and a reduced-motion branch that keeps the\n * order but drops the travel — the sequence still reads, nothing slides.\n */\nexport function useReveal() {\n const reduced = useReducedMotion();\n\n return React.useMemo(() => {\n const stack: Variants = {\n hidden: {},\n shown: {\n transition: {\n staggerChildren: reduced ? 0 : 0.055,\n delayChildren: reduced ? 0 : 0.04,\n },\n },\n };\n\n const item: Variants = reduced\n ? { hidden: { opacity: 0 }, shown: { opacity: 1, transition: { duration: 0.15 } } }\n : { hidden: { opacity: 0, y: 8 }, shown: { opacity: 1, y: 0, transition: SPRING_ENTRANCE } };\n\n return { stack, item, reduced };\n }, [reduced]);\n}\n\n/**\n * Re-seeds a piece of local state when a prop changes.\n *\n * These blocks all keep some state of their own — a request that was sent, a\n * filter that was dropped, rows that were added — and all of them are driven by\n * a `variant` prop on the specimen page. Resetting that state in an effect\n * costs a second render with the stale value painted in between; comparing the\n * key during render is React's own answer and settles before paint.\n */\nexport function usePropState(\n seed: T,\n key: unknown,\n): [T, React.Dispatch>] {\n const [value, setValue] = React.useState(seed);\n const [seen, setSeen] = React.useState(key);\n\n if (!Object.is(seen, key)) {\n setSeen(key);\n setValue(seed);\n }\n\n return [value, setValue];\n}\n\n/* ── Backdrops ────────────────────────────────────────────────────────────── */\n\n/**\n * The thing behind the glyph.\n *\n * Every block in this category gets its own, because twenty-five panels sharing\n * one ambient animation is twenty-five panels that look like one panel. Each\n * backdrop is a different idea about the emptiness in front of it: a search\n * ripples outward, a trash can drips away, an offline panel breaks into shards,\n * a webhook waits on the one loop in the set.\n *\n * Rules all of them keep:\n * - They play once, when the medallion reaches the viewport, and then stop.\n * `pulse` is the exception and says so — a listening indicator is a loading\n * indicator, not decoration.\n * - They are `aria-hidden` and `pointer-events-none`. Nothing here is content.\n * - Under reduced motion they resolve instantly to their finished state, so\n * the composition is identical and only the travel is gone.\n * - They are monochrome and low contrast. If a backdrop competes with the\n * glyph in front of it, it is wrong.\n */\nexport type MedallionBackdrop =\n | 'none'\n | 'rings'\n | 'halo'\n | 'grid'\n | 'cells'\n | 'scan'\n | 'orbit'\n | 'bars'\n | 'rays'\n | 'stack'\n | 'ripple'\n | 'beam'\n | 'chime'\n | 'comet'\n | 'sparks'\n | 'dashes'\n | 'crosshair'\n | 'wave'\n | 'shards'\n | 'trail'\n | 'corners'\n | 'drip'\n | 'contour'\n | 'sieve'\n | 'spotlight'\n | 'pulse';\n\nconst HAIRLINE = 'border-black/[0.07] dark:border-white/[0.1]';\nconst HAIRLINE_SOFT = 'border-black/[0.045] dark:border-white/[0.06]';\nconst HAIRLINE_FAINT = 'border-black/[0.028] dark:border-white/[0.04]';\n/**\n * EmptyPanel's own surface. Any backdrop whose parts overlap has to be filled\n * with it: an outlined-but-transparent shape turns into a lattice of crossing\n * hairlines the moment a second one lands on top of it.\n */\nconst SURFACE = 'bg-white dark:bg-neutral-950';\nconst INK = 'bg-black/[0.09] dark:bg-white/[0.13]';\nconst INK_SOFT = 'bg-black/[0.055] dark:bg-white/[0.08]';\nconst FADE_DOWN = '[mask-image:linear-gradient(to_bottom,black_15%,transparent_95%)]';\nconst FADE_EDGES = '[mask-image:radial-gradient(closest-side,black_55%,transparent_100%)]';\n\ntype Phase = 'hidden' | 'shown';\n\ninterface BackdropProps {\n kind: MedallionBackdrop;\n}\n\n/**\n * One IntersectionObserver per medallion, not one per moving part: the backdrop\n * flips a single phase and every child animates off the same variant.\n */\nexport function MedallionBackdropLayer({ kind }: BackdropProps) {\n const reduced = useReducedMotion();\n const ref = React.useRef(null);\n const seen = useInView(ref, { once: true, amount: 0.4 });\n const phase: Phase = seen ? 'shown' : 'hidden';\n\n return (\n \n {kind !== 'none' && }\n \n );\n}\n\ninterface PartProps {\n phase: Phase;\n reduced: boolean;\n}\n\nfunction Backdrop({ kind, phase, reduced }: BackdropProps & PartProps) {\n switch (kind) {\n case 'rings':\n return ;\n case 'halo':\n return ;\n case 'grid':\n return ;\n case 'cells':\n return ;\n case 'scan':\n return ;\n case 'orbit':\n return ;\n case 'bars':\n return ;\n case 'rays':\n return ;\n case 'stack':\n return ;\n case 'ripple':\n return ;\n case 'beam':\n return ;\n case 'chime':\n return ;\n case 'comet':\n return ;\n case 'sparks':\n return ;\n case 'dashes':\n return ;\n case 'crosshair':\n return ;\n case 'wave':\n return ;\n case 'shards':\n return ;\n case 'trail':\n return ;\n case 'corners':\n return ;\n case 'drip':\n return ;\n case 'contour':\n return ;\n case 'sieve':\n return ;\n case 'spotlight':\n return ;\n case 'pulse':\n return ;\n default:\n return null;\n }\n}\n\n/** Two hairline circles opening outward. The quietest of the set. */\nfunction Rings({ phase, reduced }: PartProps) {\n return (\n <>\n {[112, 164].map((diameter, index) => (\n \n ))}\n \n );\n}\n\n/** A soft wash that swells behind the tile, with one circle to give it an edge. */\nfunction Halo({ phase, reduced }: PartProps) {\n return (\n <>\n \n \n \n );\n}\n\n/** A field of dots lighting up from the centre out. */\nfunction DotGrid({ phase, reduced }: PartProps) {\n const cells = React.useMemo(() => {\n const out: { x: number; y: number; distance: number }[] = [];\n for (let row = 0; row < 5; row += 1) {\n for (let column = 0; column < 5; column += 1) {\n out.push({ x: column - 2, y: row - 2, distance: Math.abs(column - 2) + Math.abs(row - 2) });\n }\n }\n return out;\n }, []);\n\n return (\n
\n {cells.map((cell) => (\n \n ))}\n
\n );\n}\n\n/** Nine tiles filling in like a catalogue loading its rows. */\nfunction Cells({ phase, reduced }: PartProps) {\n return (\n
\n {[0, 1, 2, 3, 4, 5, 6, 7, 8].map((cell) => (\n \n ))}\n
\n );\n}\n\n/** A line travelling down a framed square, once, the way a check runs. */\nfunction Scan({ phase, reduced }: PartProps) {\n return (\n \n \n \n );\n}\n\n/** One dot going round the tile and parking at the top. */\nfunction Orbit({ phase, reduced }: PartProps) {\n return (\n <>\n \n \n \n \n \n );\n}\n\n/** A histogram rising behind the glyph. */\nfunction Bars({ phase, reduced }: PartProps) {\n const heights = [0.34, 0.58, 0.44, 0.82, 0.5, 0.68, 0.38];\n return (\n
\n {heights.map((height, index) => (\n \n ))}\n
\n );\n}\n\n/**\n * Ticks radiating out, like something being broadcast.\n *\n * The rotation lives on a plain wrapper: motion writes `transform` itself, so a\n * `rotate()` passed through `style` is thrown away the moment a variant runs.\n */\nfunction Rays({ phase, reduced }: PartProps) {\n return (\n
\n {Array.from({ length: 12 }).map((_, index) => (\n \n \n \n ))}\n
\n );\n}\n\n/**\n * A cascade of cards behind the tile — the shape of a template picker.\n *\n * Two earlier versions failed the same way: anything rotated about its own\n * centre, or fanned from its bottom edge, throws corners out on every side and\n * reads as a rosette rather than a stack at 56px. Straight offsets, each card a\n * little smaller than the one in front and filled with the panel surface, are\n * unmistakable — you see two slivers of paper and nothing else.\n */\nfunction Stack({ phase, reduced }: PartProps) {\n const cards = [\n { y: -17, scale: 0.82, border: HAIRLINE_SOFT },\n { y: -9, scale: 0.91, border: HAIRLINE },\n ];\n return (\n <>\n {cards.map((card, index) => (\n \n ))}\n \n );\n}\n\n/** Three squares opening outward, one after another. A query going out. */\nfunction Ripple({ phase, reduced }: PartProps) {\n return (\n <>\n {[0, 1, 2].map((index) => (\n \n ))}\n \n \n );\n}\n\n/** A column of light rising through the tile. */\nfunction Beam({ phase, reduced }: PartProps) {\n return (\n <>\n \n {[0, 1, 2].map((index) => (\n \n ))}\n \n );\n}\n\n/**\n * Two short arcs either side of the bell — resonance, not a progress ring.\n *\n * This was a 72%-complete circle, which at a glance is a spinner stuck at\n * three quarters. On a panel whose whole message is \"nothing is happening\",\n * that is precisely the wrong thing to draw.\n */\nfunction Chime({ phase, reduced }: PartProps) {\n const arcs = [\n 'M92.8 37 A40 40 0 0 1 92.8 83',\n 'M27.2 83 A40 40 0 0 1 27.2 37',\n 'M102.6 30.2 A52 52 0 0 1 102.6 89.8',\n 'M17.4 89.8 A52 52 0 0 1 17.4 30.2',\n ];\n return (\n \n {arcs.map((d, index) => (\n 1 ? 0.45 : 1,\n transition: reduced\n ? { duration: 0 }\n : {\n duration: 0.5,\n delay: 0.08 + Math.floor(index / 2) * 0.12,\n ease: EASE_OUT,\n },\n },\n }}\n className=\"stroke-black/[0.16] dark:stroke-white/25\"\n />\n ))}\n \n );\n}\n\n/** A dot with a tail sweeping past, once. */\nfunction Comet({ phase, reduced }: PartProps) {\n return (\n <>\n \n \n \n \n \n \n );\n}\n\n/** Small dots thrown outward. Reserved for the states that are good news. */\nfunction Sparks({ phase, reduced }: PartProps) {\n const angles = [18, 62, 106, 150, 194, 238, 282, 326];\n return (\n <>\n {angles.map((angle, index) => (\n \n ))}\n \n \n );\n}\n\n/** A dashed dial turning a notch into place. */\nfunction Dashes({ phase, reduced }: PartProps) {\n return (\n \n \n \n \n \n );\n}\n\n/** Four guides drawing out from the tile, the way a grid finds a slot. */\nfunction Crosshair({ phase, reduced }: PartProps) {\n const arms = [\n { rotate: 0, key: 'up' },\n { rotate: 90, key: 'right' },\n { rotate: 180, key: 'down' },\n { rotate: 270, key: 'left' },\n ];\n return (\n <>\n {arms.map((arm, index) => (\n \n \n \n ))}\n \n \n );\n}\n\n/** A slow signal drawn left to right. */\nfunction Wave({ phase, reduced }: PartProps) {\n return (\n \n \n \n );\n}\n\n/** Diagonals cutting past. For the states where something broke. */\nfunction Shards({ phase, reduced }: PartProps) {\n const lines = [-56, -28, 0, 28, 56];\n return (\n
\n {lines.map((offset, index) => (\n \n ))}\n
\n );\n}\n\n/**\n * Ghost tiles left behind, so the glyph reads as having just arrived.\n *\n * Painted far to near and filled with the panel surface, so each ghost covers\n * the trailing edge of the one behind it; the fade is carried by the border\n * alone, because fading the whole element would make the fills transparent and\n * put every outline back on top of every other one.\n */\nfunction Trail({ phase, reduced }: PartProps) {\n const steps: { step: number; border: string }[] = [\n { step: 3, border: HAIRLINE_FAINT },\n { step: 2, border: HAIRLINE_SOFT },\n { step: 1, border: HAIRLINE },\n ];\n return (\n <>\n {steps.map(({ step, border }) => (\n \n ))}\n \n );\n}\n\n/** Four brackets closing into a frame. */\nfunction Corners({ phase, reduced }: PartProps) {\n const corners = [\n { className: 'left-0 top-0 border-l border-t rounded-tl-xl', x: -10, y: -10 },\n { className: 'right-0 top-0 border-r border-t rounded-tr-xl', x: 10, y: -10 },\n { className: 'left-0 bottom-0 border-b border-l rounded-bl-xl', x: -10, y: 10 },\n { className: 'right-0 bottom-0 border-b border-r rounded-br-xl', x: 10, y: 10 },\n ];\n return (\n
\n {corners.map((corner, index) => (\n \n ))}\n
\n );\n}\n\n/** Dots falling past and away. */\nfunction Drip({ phase, reduced }: PartProps) {\n const drops = [-48, -22, 4, 30, 54];\n return (\n
\n {/* The drops pass through and are gone; the basin is what the panel is\n left looking at, so it is static. */}\n \n {drops.map((offset, index) => (\n \n ))}\n
\n );\n}\n\n/** Nested rounded squares, stepping outward. */\nfunction Contour({ phase, reduced }: PartProps) {\n return (\n <>\n {[88, 124, 160].map((size, index) => (\n \n ))}\n \n );\n}\n\n/**\n * Rows of dots narrowing on the way down — many in, few out.\n *\n * The version this replaces was four hairlines at different widths, which read\n * as stray rules crossing the tile rather than as anything being filtered. Dots\n * stay clear of the tile entirely and carry the idea on their own.\n */\nfunction Sieve({ phase, reduced }: PartProps) {\n const rows = [9, 6, 3];\n return (\n
\n {rows.map((count, row) => (\n
\n {Array.from({ length: count }).map((_, index) => (\n \n ))}\n
\n ))}\n
\n );\n}\n\n/** A cone of light from above, for the things being held back. */\nfunction Spotlight({ phase, reduced }: PartProps) {\n return (\n \n );\n}\n\n/**\n * The one loop. A listening state is reporting that something live is happening,\n * which is the only case in this set where a repeat is information.\n */\nfunction Pulse({ reduced }: { reduced: boolean }) {\n if (reduced) {\n return (\n \n );\n }\n return (\n <>\n {[0, 1].map((index) => (\n \n ))}\n \n \n );\n}\n\n/* ── Medallion ────────────────────────────────────────────────────────────── */\n\nexport interface EmptyMedallionProps {\n /** An Iconly Bold glyph from this file. Sized by the medallion, not by you. */\n icon: React.ReactNode;\n tone?: EmptyTone;\n size?: 'sm' | 'md' | 'lg';\n /**\n * What happens behind the tile. Each block in this category picks a different\n * one; `none` is right whenever the panel already has a background of its own\n * — ghost table rows, chart gridlines, a blurred preview — because a second\n * ambient animation on top of those is noise.\n */\n backdrop?: MedallionBackdrop;\n /** Sits on the tile's lower-right corner: a badge, a count, a second glyph. */\n badge?: React.ReactNode;\n className?: string;\n}\n\nconst TILE: Record<'sm' | 'md' | 'lg', string> = {\n sm: 'size-10 rounded-xl [&_svg]:size-[18px]',\n md: 'size-14 rounded-2xl [&_svg]:size-6',\n lg: 'size-16 rounded-3xl [&_svg]:size-7',\n};\n\n/**\n * The glyph, raised off the page: a backdrop that plays once behind it, and a\n * tile that arrives blurred and resolves — which reads as focus rather than as\n * movement.\n */\nexport function EmptyMedallion({\n icon,\n tone = 'neutral',\n size = 'md',\n backdrop = 'rings',\n badge,\n className,\n}: EmptyMedallionProps) {\n const reduced = useReducedMotion();\n\n return (\n
\n \n\n \n {icon}\n {badge && (\n \n {badge}\n \n )}\n \n
\n );\n}\n\n/* ── Text anatomy ─────────────────────────────────────────────────────────── */\n\nexport interface EmptyStateProps {\n icon?: React.ReactNode;\n tone?: EmptyTone;\n medallionSize?: 'sm' | 'md' | 'lg';\n /** The block's own backdrop. See EmptyMedallionProps. */\n backdrop?: MedallionBackdrop;\n badge?: React.ReactNode;\n eyebrow?: string;\n title: string;\n description?: React.ReactNode;\n /** Anything between the copy and the actions: chips, a field, a preview. */\n children?: React.ReactNode;\n actions?: React.ReactNode;\n /** The quiet line under the actions — a shortcut, a doc link, a limit. */\n footnote?: React.ReactNode;\n align?: 'center' | 'start';\n className?: string;\n}\n\n/**\n * Title, one line of copy, then the way out. The order never changes, because\n * the reader's question never changes: what is this, why is it empty, what now.\n */\nexport function EmptyState({\n icon,\n tone = 'neutral',\n medallionSize = 'md',\n backdrop = 'rings',\n badge,\n eyebrow,\n title,\n description,\n children,\n actions,\n footnote,\n align = 'center',\n className,\n}: EmptyStateProps) {\n const { stack, item } = useReveal();\n const centred = align === 'center';\n\n return (\n \n {icon && (\n \n \n \n )}\n\n {eyebrow && (\n \n {eyebrow}\n \n )}\n\n \n {title}\n \n\n {description && (\n \n {description}\n \n )}\n\n {children && (\n \n {children}\n \n )}\n\n {actions && (\n \n {actions}\n \n )}\n\n {footnote && (\n \n {footnote}\n \n )}\n \n );\n}\n\n/* ── Actions ──────────────────────────────────────────────────────────────── */\n\nconst MotionButton = motion.create(Button);\n\n/* The drag and animation handlers are omitted because motion redefines every\n one of them with its own gesture signature, and a spread of React's DOM\n handlers onto a motion component is a type error, not a merge. */\nexport interface EmptyActionProps extends Omit<\n React.ComponentProps,\n | 'onDrag'\n | 'onDragStart'\n | 'onDragEnd'\n | 'onDragEnter'\n | 'onDragExit'\n | 'onDragLeave'\n | 'onDragOver'\n | 'onDrop'\n | 'onAnimationStart'\n | 'onAnimationEnd'\n | 'onAnimationIteration'\n> {\n emphasis?: 'primary' | 'secondary' | 'quiet';\n /** Leading glyph. Sized to 15px so it sits on the label's cap height. */\n icon?: React.ReactNode;\n /** Trailing glyph, for actions that lead somewhere. */\n trailing?: React.ReactNode;\n}\n\n/**\n * Every emphasis states its hover *text* colour as well as its hover fill.\n *\n * These ride on shadcn's `ghost` variant, which carries\n * `hover:text-accent-foreground`. tailwind-merge keeps that class, because a\n * plain `text-*` and a `hover:text-*` are not the same utility — so a button\n * that only set `text-neutral-50` kept its white label at rest and repainted it\n * near-black the moment a pointer touched it. Black on black. Anything layered\n * over a variant has to close every state that variant opens.\n */\nconst EMPHASIS: Record<'primary' | 'secondary' | 'quiet', string> = {\n primary: cn(\n 'bg-neutral-900 text-neutral-50 hover:bg-neutral-800 hover:text-white',\n 'dark:bg-neutral-100 dark:text-neutral-900 dark:hover:bg-white dark:hover:text-neutral-900',\n ),\n secondary: cn(\n 'border border-black/[0.09] bg-white text-neutral-800 hover:bg-neutral-50 hover:text-neutral-900',\n 'dark:border-white/[0.12] dark:bg-white/[0.04] dark:text-neutral-100 dark:hover:bg-white/[0.08] dark:hover:text-white',\n ),\n quiet: cn(\n 'bg-transparent text-neutral-500 hover:bg-black/[0.04] hover:text-neutral-900',\n 'dark:text-neutral-400 dark:hover:bg-white/[0.06] dark:hover:text-neutral-100',\n ),\n};\n\n/**\n * Press physics on every action. `whileTap` fires on pointerdown, so the button\n * answers before the handler does — the difference between a button that works\n * and a button that feels like it works.\n */\nexport function EmptyAction({\n emphasis = 'primary',\n icon,\n trailing,\n className,\n children,\n ...props\n}: EmptyActionProps) {\n const reduced = useReducedMotion();\n\n return (\n \n {icon}\n {children}\n {trailing}\n \n );\n}\n\n/* ── Surfaces & parts ─────────────────────────────────────────────────────── */\n\nexport interface EmptyPanelProps {\n /** The panel's own title — the screen the reader is standing on. */\n title?: React.ReactNode;\n meta?: React.ReactNode;\n toolbar?: React.ReactNode;\n children: React.ReactNode;\n className?: string;\n bodyClassName?: string;\n}\n\n/** The product chrome around the message. An empty state with no surface under it reads as an error page. */\nexport function EmptyPanel({\n title,\n meta,\n toolbar,\n children,\n className,\n bodyClassName,\n}: EmptyPanelProps) {\n return (\n \n {(title || toolbar) && (\n
\n
\n {title && (\n

\n {title}\n

\n )}\n {/* Inter, not mono. This line is a caption — a count, a date, a\n path — not code, and mono at caption size reads as a terminal\n dropped into the corner of a product panel. Tabular figures keep\n the numbers from shifting when they change. */}\n {meta && (\n

\n {meta}\n

\n )}\n
\n {toolbar &&
{toolbar}
}\n
\n )}\n
{children}
\n \n );\n}\n\nexport interface GhostRowsProps {\n rows?: number;\n /** Where the fade runs. `up` puts solid rows at the bottom of the stack. */\n fade?: 'down' | 'up';\n className?: string;\n}\n\n/** The list that would have been here, drawn faint so the layout keeps its shape. */\nexport function GhostRows({ rows = 4, fade = 'down', className }: GhostRowsProps) {\n const reduced = useReducedMotion();\n\n return (\n
\n {Array.from({ length: rows }).map((_, index) => {\n const depth = fade === 'down' ? index : rows - 1 - index;\n return (\n \n \n \n \n \n );\n })}\n
\n );\n}\n\nexport function Kbd({ children, className }: { children: React.ReactNode; className?: string }) {\n return (\n \n {children}\n \n );\n}\n\nexport function EmptyHint({\n keys,\n children,\n className,\n}: {\n keys?: string[];\n children: React.ReactNode;\n className?: string;\n}) {\n return (\n \n {keys?.map((key) => (\n {key}\n ))}\n {children}\n \n );\n}\n\nexport interface EmptyMeterProps {\n /** 0 to 1. Values above 1 are clamped, because a full bar is the message. */\n value: number;\n tone?: EmptyTone;\n className?: string;\n}\n\nconst TONE_FILL: Record = {\n neutral: 'bg-neutral-800 dark:bg-neutral-200',\n positive: 'bg-emerald-500',\n caution: 'bg-amber-500',\n critical: 'bg-red-500',\n};\n\nexport function EmptyMeter({ value, tone = 'neutral', className }: EmptyMeterProps) {\n const reduced = useReducedMotion();\n const clamped = Math.min(1, Math.max(0, value));\n\n return (\n \n \n \n );\n}\n\nexport function StatusDot({\n tone = 'neutral',\n className,\n}: {\n tone?: EmptyTone;\n className?: string;\n}) {\n return (\n \n );\n}\n\n/** A dotted target the reader can drop something on, or click to start one. */\nexport function DropTarget({\n active,\n children,\n className,\n ...props\n}: React.HTMLAttributes & { active?: boolean }) {\n return (\n \n {children}\n \n );\n}\n", "type": "registry:block", "target": "components/spectrumui/blocks/empty-states/empty-state-kit.tsx" } ], "type": "registry:block" }