50: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"] 51: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"] 52:T303a,/* eslint-disable react-refresh/only-export-components */ import * as React from 'react' import { cva, type VariantProps } from 'class-variance-authority' import { cn } from '@/lib/utils' import { FileQuestion, Search, Inbox, FolderOpen, Users, ShoppingCart, Bell, Image, AlertTriangle, WifiOff, ShieldX, Clock, Wrench, Upload, } from 'lucide-react' // ============================================================================ // Empty State Root // ============================================================================ const emptyStateVariants = cva( 'flex items-center justify-center', { variants: { variant: { default: '', filled: 'bg-muted/30 border-3 border-dashed border-foreground p-8', card: 'bg-card border-3 border-foreground shadow-[4px_4px_0px_hsl(var(--shadow-color))] p-8', }, size: { compact: 'gap-2 p-2', sm: 'gap-3 p-4', md: 'gap-4 p-6', lg: 'gap-6 p-8', }, layout: { vertical: 'flex-col text-center', horizontal: 'flex-row text-left', }, animation: { none: '', fadeIn: 'animate-[fadeIn_0.3s_ease-out]', bounce: 'animate-[bounceIn_0.5s_ease-out]', scale: 'animate-[scaleIn_0.3s_ease-out]', }, }, defaultVariants: { variant: 'default', size: 'md', layout: 'vertical', animation: 'none', }, } ) export interface EmptyStateProps extends React.HTMLAttributes, VariantProps {} const EmptyState = React.forwardRef( ({ className, variant, size, layout, animation, children, ...props }, ref) => { return (

{children}

) } ) EmptyState.displayName = 'EmptyState' // ============================================================================ // Empty State Icon // ============================================================================ const iconContainerVariants = cva( 'flex items-center justify-center border-3 border-foreground shadow-[3px_3px_0px_hsl(var(--shadow-color))]', { variants: { size: { xs: 'w-10 h-10', sm: 'w-12 h-12', md: 'w-16 h-16', lg: 'w-20 h-20', xl: 'w-24 h-24', }, iconColor: { default: 'bg-muted text-foreground', primary: 'bg-primary text-primary-foreground', secondary: 'bg-secondary text-secondary-foreground', accent: 'bg-accent text-accent-foreground', muted: 'bg-muted text-muted-foreground', destructive: 'bg-destructive text-destructive-foreground', warning: 'bg-warning text-warning-foreground', success: 'bg-success text-success-foreground', }, }, defaultVariants: { size: 'md', iconColor: 'default', }, } ) const iconSizeMap = { xs: 'h-5 w-5', sm: 'h-6 w-6', md: 'h-8 w-8', lg: 'h-10 w-10', xl: 'h-12 w-12', } export interface EmptyStateIconProps extends React.HTMLAttributes, VariantProps { /** Custom icon size independent of container */ iconSize?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' } const EmptyStateIcon = React.forwardRef( ({ className, size, iconColor, iconSize, children, ...props }, ref) => { return (

{React.isValidElement(children) ? React.cloneElement(children as React.ReactElement<{ className?: string }>, { className: cn( iconSizeMap[iconSize ?? size ?? 'md'], (children as React.ReactElement<{ className?: string }>).props.className ), }) : children}

) } ) EmptyStateIcon.displayName = 'EmptyStateIcon' // ============================================================================ // Empty State Illustration (for custom SVGs/images) // ============================================================================ export interface EmptyStateIllustrationProps extends React.HTMLAttributes { /** Max width for the illustration */ maxWidth?: string | number } const EmptyStateIllustration = React.forwardRef( ({ className, maxWidth = '200px', children, style, ...props }, ref) => { return (

{children}

) } ) EmptyStateIllustration.displayName = 'EmptyStateIllustration' // ============================================================================ // Empty State Title // ============================================================================ export type EmptyStateTitleProps = React.HTMLAttributes const EmptyStateTitle = React.forwardRef( ({ className, children, ...props }, ref) => { return (

{children}

) } ) EmptyStateTitle.displayName = 'EmptyStateTitle' // ============================================================================ // Empty State Description // ============================================================================ export type EmptyStateDescriptionProps = React.HTMLAttributes const EmptyStateDescription = React.forwardRef( ({ className, children, ...props }, ref) => { return (

{children}

) } ) EmptyStateDescription.displayName = 'EmptyStateDescription' // ============================================================================ // Empty State Actions // ============================================================================ export type EmptyStateActionsProps = React.HTMLAttributes const EmptyStateActions = React.forwardRef( ({ className, children, ...props }, ref) => { return (

{children}

) } ) EmptyStateActions.displayName = 'EmptyStateActions' // ============================================================================ // Presets // ============================================================================ export type EmptyStatePresetType = | 'no-results' | 'no-data' | 'empty-inbox' | 'empty-folder' | 'no-users' | 'empty-cart' | 'no-notifications' | 'no-images' // New presets | 'error' | 'offline' | 'permission-denied' | 'coming-soon' | 'maintenance' | 'upload' interface PresetConfig { icon: React.ReactNode title: string description: string iconColor?: VariantProps['iconColor'] } const presetIconSizeMap: Record = { compact: 'sm', sm: 'sm', md: 'md', lg: 'lg', xl: 'xl', xs: 'xs', } const presetConfig: Record = { 'no-results': { icon: , title: 'No results found', description: 'Try adjusting your search or filter to find what you\'re looking for.', }, 'no-data': { icon: , title: 'No data available', description: 'There\'s nothing to display here yet. Data will appear once available.', }, 'empty-inbox': { icon: , title: 'Inbox is empty', description: 'You\'re all caught up! New messages will appear here.', }, 'empty-folder': { icon: , title: 'Folder is empty', description: 'This folder doesn\'t contain any files yet.', }, 'no-users': { icon: , title: 'No users found', description: 'There are no users matching your criteria.', }, 'empty-cart': { icon: , title: 'Your cart is empty', description: 'Looks like you haven\'t added anything to your cart yet.', }, 'no-notifications': { icon: , title: 'No notifications', description: 'You\'re all caught up! Check back later for updates.', }, 'no-images': { icon: , title: 'No images', description: 'There are no images to display. Upload some to get started.', }, // New presets 'error': { icon: , title: 'Something went wrong', description: 'An error occurred. Please try again or contact support if the problem persists.', iconColor: 'destructive', }, 'offline': { icon: , title: 'You\'re offline', description: 'Please check your internet connection and try again.', iconColor: 'warning', }, 'permission-denied': { icon: , title: 'Access denied', description: 'You don\'t have permission to view this content.', iconColor: 'destructive', }, 'coming-soon': { icon: , title: 'Coming soon', description: 'This feature is under development. Stay tuned for updates!', iconColor: 'accent', }, 'maintenance': { icon: , title: 'Under maintenance', description: 'We\'re performing scheduled maintenance. Please check back soon.', iconColor: 'warning', }, 'upload': { icon: , title: 'Upload files', description: 'Drag and drop files here, or click to browse.', iconColor: 'primary', }, } export interface EmptyStatePresetProps extends Omit, Omit, 'size'> { preset: EmptyStatePresetType action?: React.ReactNode customTitle?: string customDescription?: string /** Custom icon to override the preset icon */ customIcon?: React.ReactNode /** Custom illustration (overrides icon completely) */ illustration?: React.ReactNode /** Icon container size */ iconSize?: VariantProps['size'] } const EmptyStatePreset = React.forwardRef( ( { preset, action, customTitle, customDescription, customIcon, illustration, iconColor, iconSize, size, layout, variant, animation, className, ...props }, ref ) => { const config = presetConfig[preset] const finalIconColor = iconColor ?? config.iconColor ?? 'default' return ( {illustration ? ( {illustration} ) : ( {customIcon ?? config.icon} )}

{customTitle ?? config.title} {customDescription ?? config.description} {action && {action}}

) } ) EmptyStatePreset.displayName = 'EmptyStatePreset' // ============================================================================ // Exports // ============================================================================ export { EmptyState, EmptyStateIcon, EmptyStateIllustration, EmptyStateTitle, EmptyStateDescription, EmptyStateActions, EmptyStatePreset, emptyStateVariants, iconContainerVariants, } 4f:["$","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",{"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"}]]}]}],["$","li","lucide-react",{"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"}]]}]}]]}],["$","$L50",null,{"namespace":"@boldkit","registryDependencies":["@boldkit/utils","@boldkit/button"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"registry/default/ui/empty-state.tsx","content":"$52","type":"registry:ui","target":"components/ui/empty-state.tsx"}],"className":"h-[70svh] min-h-80"}]]}]