{title}

51:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 52:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 53:T184f,'use client'; import { cva, type VariantProps } from 'class-variance-authority'; import { AlertCircle, Inbox, Lock, Search } from 'lucide-react'; import * as React from 'react'; import { cn } from '@/lib/utils'; // Figma: Empty state 1182:317. Variant=First-use|No-results|Error|No-access (dashed, compact tile) and Variant=Default (sizes sm|md|lg, color, icon kind). const emptyStateVariants = cva('flex w-full flex-col', { variants: { // center is the default. start aligns tile, text and actions to the start edge, for page level states beside left aligned content. align: { center: 'items-center text-center', start: 'items-start text-left', }, variant: { default: '', 'first-use': '', 'no-results': '', error: '', 'no-access': '', }, size: { // Lighter than sm for small cards: tighter gap, smaller tile and title. xs: 'gap-3', sm: 'gap-6', md: 'gap-8', lg: 'gap-8', // Page level (404, access denied, first run of a whole page): lg spacing and tile with the page title type role. page: 'gap-8', }, }, compoundVariants: [ { variant: ['first-use', 'no-results', 'error', 'no-access'], className: 'gap-2 rounded-surface border border-dashed border-border px-6 py-10', }, ], defaultVariants: { variant: 'default', size: 'sm', align: 'center' }, }); const DEFAULT_ICONS = { default: Search, 'first-use': Inbox, 'no-results': Search, error: AlertCircle, 'no-access': Lock, } as const; export interface EmptyStateProps extends Omit, 'title'>, VariantProps { title: React.ReactNode; // Element of the title. Defaults to a paragraph; use a heading level for pages like 404 or access denied (size="page" sets the page title type role). // `display` sets the title in the display-sm role (32px, the closest token step to a 36px title). Default keeps the role of the size. titleSize?: 'default' | 'display'; titleAs?: 'p' | 'div' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'; // Text or nodes. Plain text renders as one paragraph. Pass your own paragraphs as a node (rendered in a block), or use `children` for several. description?: React.ReactNode; // Short line above the title, for example "404" or an error code. kicker?: React.ReactNode; // Further content below the description, for example additional paragraphs. children?: React.ReactNode; // Overrides the variant's default glyph. Pass null to render no icon. icon?: React.ReactNode; // Replaces the icon tile with a larger illustration (see Illustration). illustration?: React.ReactNode; // Featured icon colour for the default variant. tone?: 'primary' | 'gray'; // Action buttons. Stacked and centered for the four state variants, in a row for default. actions?: React.ReactNode; } const EmptyState = React.forwardRef( ({ className, variant = 'default', size = 'sm', tone = 'gray', title, titleAs = 'p', titleSize = 'default', description, kicker, icon, illustration, actions, role, align = 'center', children, ...props }, ref) => { const start = align === 'start'; const isState = variant !== 'default'; const Fallback = DEFAULT_ICONS[variant ?? 'default']; const glyph = icon === undefined ? : icon; const resolvedRole = role ?? (variant === 'error' ? 'alert' : 'status'); const tile = illustration ? ( illustration ) : glyph === null ? null : isState ? ( {glyph} ) : ( {glyph} ); const Title = titleAs; return (

{tile}

{kicker ? (

{kicker}

) : null} {title} {description ? ( typeof description === 'string' || typeof description === 'number' ? (

{description}

) : (

p]:m-0', isState ? 'typography-ui' : 'typography-small')}>{description}

) ) : null} {children ?

p]:m-0', isState ? 'typography-ui' : 'typography-small')}>{children}

: null}

{actions ?

{actions}

: null}

); }, ); EmptyState.displayName = 'EmptyState'; export { EmptyState, emptyStateVariants }; 50:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","class-variance-authority@^0.7.0",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/class-variance-authority","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"class-variance-authority@^0.7.0"}]]}]}],["$","li","lucide-react@^0.379.0",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react@^0.379.0"}]]}]}]]}],["$","$L51",null,{"namespace":"@getitdone","registryDependencies":["https://zero-design.itdone.de/r/utils.json","https://zero-design.itdone.de/r/theme.json"]}]]}],null]}],["$","$L52",null,{"files":[{"path":"registry/ui/empty-state.tsx","content":"$53","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]