@thangnqdev/ui 0.1.2 → 0.2.1

package/src/data-display/TreeView.tsx

@@ -1,5 +1,5 @@
-import React, { useState, forwardRef } from 'react';
-import { ChevronRight, Folder, FolderOpen, File, FileCode, FileText, Image as ImageIcon } from 'lucide-react';
+import React, { useState, forwardRef, useRef, useMemo, useEffect } from 'react';
+import { ChevronRight, Folder, FolderOpen, FileCode, FileText, Image as ImageIcon } from 'lucide-react';
 import { cn } from '../utils/cn';
 
 export interface TreeItem {
@@ -14,127 +14,266 @@ export interface TreeItem {
 export interface TreeViewProps {
   data: TreeItem[];
   selectedId?: string;
+  defaultExpandedIds?: string[];
   onSelect?: (item: TreeItem) => void;
+  onExpandedChange?: (expandedIds: string[]) => void;
   className?: string;
+  'aria-label'?: string;
 }
 
-interface TreeNodeProps {
+interface FlatTreeItem {
   item: TreeItem;
   level: number;
-  selectedId?: string;
-  onSelect?: (item: TreeItem) => void;
+  parentId: string | null;
+  hasChildren: boolean;
 }
 
-function TreeNode({ item, level, selectedId, onSelect }: TreeNodeProps) {
-  const [isExpanded, setIsExpanded] = useState(Boolean(item.defaultExpanded));
-  const hasChildren = Boolean(item.children && item.children.length > 0);
-  const isSelected = selectedId === item.id;
-
-  const handleClick = (e: React.MouseEvent) => {
-    e.stopPropagation();
-    if (hasChildren) {
-      setIsExpanded(!isExpanded);
-    }
-    onSelect?.(item);
-  };
-
-  const getIcon = () => {
-    if (item.icon) return item.icon;
-    if (hasChildren) {
-      return isExpanded ? (
-        <FolderOpen className="w-4 h-4 text-amber-500 shrink-0" />
-      ) : (
-        <Folder className="w-4 h-4 text-amber-500 shrink-0" />
-      );
-    }
-    if (item.label.endsWith('.tsx') || item.label.endsWith('.ts') || item.label.endsWith('.js')) {
-      return <FileCode className="w-4 h-4 text-blue-500 shrink-0" />;
-    }
-    if (item.label.endsWith('.png') || item.label.endsWith('.jpg') || item.label.endsWith('.svg')) {
-      return <ImageIcon className="w-4 h-4 text-purple-500 shrink-0" />;
-    }
-    return <FileText className="w-4 h-4 text-[var(--ui-text-muted)] shrink-0" />;
-  };
-
-  return (
-    <div className="select-none text-xs">
-      <div
-        onClick={handleClick}
-        style={{ paddingLeft: `${level * 16 + 8}px` }}
-        className={cn(
-          'flex items-center justify-between py-1.5 pr-2.5 rounded-xl cursor-pointer transition-colors group',
-          isSelected
-            ? 'bg-[var(--ui-primary)] text-white font-semibold shadow-xs'
-            : 'text-[var(--ui-text-primary)] hover:bg-[var(--ui-bg-tertiary)]'
-        )}
-      >
-        <div className="flex items-center gap-2 truncate">
-          {hasChildren ? (
-            <span className={cn('p-0.5 rounded transition-transform duration-200', isExpanded && 'rotate-90')}>
-              <ChevronRight className={cn('w-3 h-3', isSelected ? 'text-white' : 'text-[var(--ui-text-muted)]')} />
-            </span>
-          ) : (
-            <span className="w-4" />
-          )}
-
-          {getIcon()}
-          <span className="truncate">{item.label}</span>
-        </div>
-
-        {item.badge !== undefined && (
-          <span
-            className={cn(
-              'px-1.5 py-0.5 rounded-md text-[10px] font-mono',
-              isSelected ? 'bg-white/20 text-white' : 'bg-[var(--ui-bg-secondary)] text-[var(--ui-text-muted)]'
-            )}
-          >
-            {item.badge}
-          </span>
-        )}
-      </div>
+export const TreeView = forwardRef<HTMLDivElement, TreeViewProps>(
+  (
+    {
+      data,
+      selectedId,
+      defaultExpandedIds,
+      onSelect,
+      onExpandedChange,
+      className,
+      'aria-label': ariaLabel = 'Tree View',
+    },
+    ref
+  ) => {
+    // Initial expanded IDs
+    const initialExpanded = useMemo(() => {
+      if (defaultExpandedIds) return new Set(defaultExpandedIds);
+      const set = new Set<string>();
+      const collect = (items: TreeItem[]) => {
+        for (const it of items) {
+          if (it.defaultExpanded) set.add(it.id);
+          if (it.children) collect(it.children);
+        }
+      };
+      collect(data);
+      return set;
+    }, [data, defaultExpandedIds]);
 
-      {hasChildren && isExpanded && (
-        <div className="relative space-y-0.5 animate-in fade-in duration-150">
-          <div
-            className="absolute left-[15px] top-0 bottom-0 w-[1px] bg-[var(--ui-border-subtle)]"
-            style={{ left: `${level * 16 + 15}px` }}
-          />
-          {item.children!.map((child) => (
-            <TreeNode
-              key={child.id}
-              item={child}
-              level={level + 1}
-              selectedId={selectedId}
-              onSelect={onSelect}
-            />
-          ))}
-        </div>
-      )}
-    </div>
-  );
-}
+    const [expandedSet, setExpandedSet] = useState<Set<string>>(initialExpanded);
+    const [focusedId, setFocusedId] = useState<string | null>(null);
+    const itemRefs = useRef<Map<string, HTMLDivElement>>(new Map());
+
+    const focusNode = (id: string) => {
+      setFocusedId(id);
+      const el = itemRefs.current.get(id);
+      if (el) {
+        el.focus();
+      }
+    };
+
+    const toggleExpand = (id: string) => {
+      setExpandedSet((prev) => {
+        const next = new Set(prev);
+        if (next.has(id)) next.delete(id);
+        else next.add(id);
+        onExpandedChange?.(Array.from(next));
+        return next;
+      });
+    };
+
+    const expandNode = (id: string) => {
+      if (!expandedSet.has(id)) {
+        setExpandedSet((prev) => {
+          const next = new Set(prev).add(id);
+          onExpandedChange?.(Array.from(next));
+          return next;
+        });
+      }
+    };
+
+    const collapseNode = (id: string) => {
+      if (expandedSet.has(id)) {
+        setExpandedSet((prev) => {
+          const next = new Set(prev);
+          next.delete(id);
+          onExpandedChange?.(Array.from(next));
+          return next;
+        });
+      }
+    };
+
+    // Flatten visible nodes
+    const visibleList = useMemo(() => {
+      const list: FlatTreeItem[] = [];
+      const traverse = (items: TreeItem[], level: number, parentId: string | null) => {
+        for (const item of items) {
+          const hasChildren = Boolean(item.children && item.children.length > 0);
+          list.push({ item, level, parentId, hasChildren });
+          if (hasChildren && expandedSet.has(item.id)) {
+            traverse(item.children!, level + 1, item.id);
+          }
+        }
+      };
+      traverse(data, 0, null);
+      return list;
+    }, [data, expandedSet]);
+
+    // Keyboard navigation with native DOM focus
+    const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
+      if (visibleList.length === 0) return;
+
+      const currentIdx = focusedId ? visibleList.findIndex((f) => f.item.id === focusedId) : 0;
+      const currentFlat = visibleList[currentIdx] || visibleList[0];
+
+      if (e.key === 'ArrowDown') {
+        e.preventDefault();
+        const nextIdx = Math.min(visibleList.length - 1, currentIdx + 1);
+        focusNode(visibleList[nextIdx].item.id);
+      } else if (e.key === 'ArrowUp') {
+        e.preventDefault();
+        const prevIdx = Math.max(0, currentIdx - 1);
+        focusNode(visibleList[prevIdx].item.id);
+      } else if (e.key === 'ArrowRight') {
+        e.preventDefault();
+        if (currentFlat.hasChildren) {
+          if (!expandedSet.has(currentFlat.item.id)) {
+            expandNode(currentFlat.item.id);
+          } else {
+            const nextIdx = currentIdx + 1;
+            if (nextIdx < visibleList.length) {
+              focusNode(visibleList[nextIdx].item.id);
+            }
+          }
+        }
+      } else if (e.key === 'ArrowLeft') {
+        e.preventDefault();
+        if (currentFlat.hasChildren && expandedSet.has(currentFlat.item.id)) {
+          collapseNode(currentFlat.item.id);
+        } else if (currentFlat.parentId) {
+          focusNode(currentFlat.parentId);
+        }
+      } else if (e.key === 'Home') {
+        e.preventDefault();
+        focusNode(visibleList[0].item.id);
+      } else if (e.key === 'End') {
+        e.preventDefault();
+        focusNode(visibleList[visibleList.length - 1].item.id);
+      } else if (e.key === 'Enter' || e.key === ' ') {
+        e.preventDefault();
+        if (currentFlat) {
+          if (currentFlat.hasChildren) {
+            toggleExpand(currentFlat.item.id);
+          }
+          onSelect?.(currentFlat.item);
+        }
+      }
+    };
+
+    const getIcon = (item: TreeItem, hasChildren: boolean, isExpanded: boolean) => {
+      if (item.icon) return item.icon;
+      if (hasChildren) {
+        return isExpanded ? (
+          <FolderOpen className="w-4 h-4 text-amber-500 shrink-0" />
+        ) : (
+          <Folder className="w-4 h-4 text-amber-500 shrink-0" />
+        );
+      }
+      if (item.label.endsWith('.tsx') || item.label.endsWith('.ts') || item.label.endsWith('.js')) {
+        return <FileCode className="w-4 h-4 text-blue-500 shrink-0" />;
+      }
+      if (item.label.endsWith('.png') || item.label.endsWith('.jpg') || item.label.endsWith('.svg')) {
+        return <ImageIcon className="w-4 h-4 text-purple-500 shrink-0" />;
+      }
+      return <FileText className="w-4 h-4 text-[var(--ui-text-muted)] shrink-0" />;
+    };
+
+    const renderNodes = (items: TreeItem[], level: number): React.ReactNode => {
+      return items.map((item, index) => {
+        const hasChildren = Boolean(item.children && item.children.length > 0);
+        const isExpanded = expandedSet.has(item.id);
+        const isSelected = selectedId === item.id;
+        const isFocused = focusedId === item.id || (!focusedId && level === 0 && index === 0);
+
+        return (
+          <div key={item.id} role="none" className="select-none text-xs">
+            <div
+              ref={(el) => {
+                if (el) itemRefs.current.set(item.id, el);
+                else itemRefs.current.delete(item.id);
+              }}
+              role="treeitem"
+              tabIndex={isFocused ? 0 : -1}
+              aria-expanded={hasChildren ? isExpanded : undefined}
+              aria-selected={isSelected}
+              aria-level={level + 1}
+              aria-posinset={index + 1}
+              aria-setsize={items.length}
+              onClick={(e) => {
+                e.stopPropagation();
+                focusNode(item.id);
+                if (hasChildren) {
+                  toggleExpand(item.id);
+                }
+                onSelect?.(item);
+              }}
+              style={{ paddingLeft: `${level * 16 + 8}px` }}
+              className={cn(
+                'flex items-center justify-between py-1.5 pr-2.5 rounded-xl cursor-pointer transition-colors group outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-primary)]',
+                isSelected
+                  ? 'bg-[var(--ui-primary)] text-white font-semibold shadow-xs'
+                  : 'text-[var(--ui-text-primary)] hover:bg-[var(--ui-bg-tertiary)]'
+              )}
+            >
+              <div className="flex items-center gap-2 truncate">
+                {hasChildren ? (
+                  <span className={cn('p-0.5 rounded transition-transform duration-200', isExpanded && 'rotate-90')}>
+                    <ChevronRight className={cn('w-3 h-3', isSelected ? 'text-white' : 'text-[var(--ui-text-muted)]')} />
+                  </span>
+                ) : (
+                  <span className="w-4" />
+                )}
+
+                {getIcon(item, hasChildren, isExpanded)}
+                <span className="truncate">{item.label}</span>
+              </div>
+
+              {item.badge !== undefined && (
+                <span
+                  className={cn(
+                    'px-1.5 py-0.5 rounded-md text-[10px] font-mono',
+                    isSelected ? 'bg-white/20 text-white' : 'bg-[var(--ui-bg-secondary)] text-[var(--ui-text-muted)]'
+                  )}
+                >
+                  {item.badge}
+                </span>
+              )}
+            </div>
+
+            {hasChildren && isExpanded && (
+              <div role="group" className="relative space-y-0.5 animate-in fade-in duration-150">
+                <div
+                  className="absolute left-[15px] top-0 bottom-0 w-[1px] bg-[var(--ui-border-subtle)]"
+                  style={{ left: `${level * 16 + 15}px` }}
+                />
+                {renderNodes(item.children!, level + 1)}
+              </div>
+            )}
+          </div>
+        );
+      });
+    };
 
-export const TreeView = forwardRef<HTMLDivElement, TreeViewProps>(
-  ({ data, selectedId, onSelect, className }, ref) => {
     return (
       <div
         ref={ref}
+        role="tree"
+        aria-label={ariaLabel}
+        onKeyDown={handleKeyDown}
         className={cn(
-          'w-full p-2 rounded-2xl bg-[var(--ui-bg-surface)] border border-[var(--ui-border-default)] space-y-0.5 shadow-sm overflow-hidden',
+          'w-full p-2 rounded-2xl bg-[var(--ui-bg-surface)] border border-[var(--ui-border-default)] space-y-0.5 shadow-sm overflow-hidden outline-none',
           className
         )}
       >
-        {data.map((item) => (
-          <TreeNode
-            key={item.id}
-            item={item}
-            level={0}
-            selectedId={selectedId}
-            onSelect={onSelect}
-          />
-        ))}
+        {renderNodes(data, 0)}
       </div>
     );
   }
 );
+
 TreeView.displayName = 'TreeView';

package/src/data-display/tokens.css

@@ -1,4 +1,4 @@
-/* Data Display Tokens */
-:root {
-  --ui-avatar-ring-width: 2px;
-}
+/* Data Display Tokens */
+:root {
+  --ui-avatar-ring-width: 2px;
+}

package/src/feedback/Alert.tsx

@@ -1,80 +1,80 @@
-import React, { forwardRef } from 'react';
-import { cva, type VariantProps } from 'class-variance-authority';
-import { CheckCircle2, AlertTriangle, AlertCircle, Info, X } from 'lucide-react';
-import { cn } from '../utils/cn';
-
-export const alertVariants = cva(
-  'relative w-full rounded-[var(--ui-radius-lg)] border p-4 text-sm flex items-start gap-3.5 shadow-sm',
-  {
-    variants: {
-      status: {
-        info: 'bg-[var(--ui-info-subtle)] border-[var(--ui-info)]/30 text-[var(--ui-text-primary)] [&>svg]:text-[var(--ui-info)]',
-        success: 'bg-[var(--ui-success-subtle)] border-[var(--ui-success)]/30 text-[var(--ui-text-primary)] [&>svg]:text-[var(--ui-success)]',
-        warning: 'bg-[var(--ui-warning-subtle)] border-[var(--ui-warning)]/30 text-[var(--ui-text-primary)] [&>svg]:text-[var(--ui-warning)]',
-        error: 'bg-[var(--ui-error-subtle)] border-[var(--ui-error)]/30 text-[var(--ui-text-primary)] [&>svg]:text-[var(--ui-error)]',
-      },
-    },
-    defaultVariants: {
-      status: 'info',
-    },
-  }
-);
-
-const statusIcons = {
-  info: <Info className="w-5 h-5 flex-shrink-0" />,
-  success: <CheckCircle2 className="w-5 h-5 flex-shrink-0" />,
-  warning: <AlertTriangle className="w-5 h-5 flex-shrink-0" />,
-  error: <AlertCircle className="w-5 h-5 flex-shrink-0" />,
-};
-
-export interface AlertProps
-  extends React.HTMLAttributes<HTMLDivElement>,
-    VariantProps<typeof alertVariants> {
-  icon?: React.ReactNode;
-  onClose?: () => void;
-}
-
-export const Alert = forwardRef<HTMLDivElement, AlertProps>(
-  ({ className, status = 'info', icon, onClose, children, ...props }, ref) => {
-    return (
-      <div
-        ref={ref}
-        role="alert"
-        className={cn(alertVariants({ status }), className)}
-        {...props}
-      >
-        {icon !== undefined ? icon : statusIcons[status || 'info']}
-        <div className="flex-1 space-y-1">{children}</div>
-        {onClose && (
-          <button
-            type="button"
-            onClick={onClose}
-            aria-label="Dismiss alert"
-            className="p-1 rounded text-[var(--ui-text-muted)] hover:text-[var(--ui-text-primary)] hover:bg-black/5 dark:hover:bg-white/5 transition-colors -mr-1 -mt-1"
-          >
-            <X className="w-4 h-4" />
-          </button>
-        )}
-      </div>
-    );
-  }
-);
-Alert.displayName = 'Alert';
-
-export const AlertTitle = forwardRef<HTMLHeadingElement, React.HTMLAttributes<HTMLHeadingElement>>(
-  ({ className, children, ...props }, ref) => (
-    <h5 ref={ref} className={cn('font-semibold leading-none tracking-tight text-[var(--ui-text-primary)]', className)} {...props}>
-      {children}
-    </h5>
-  )
-);
-AlertTitle.displayName = 'AlertTitle';
-
-export const AlertDescription = forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
-  ({ className, children, ...props }, ref) => (
-    <p ref={ref} className={cn('text-xs text-[var(--ui-text-secondary)] leading-relaxed', className)} {...props}>
-      {children}
-    </p>
-  )
-);
-AlertDescription.displayName = 'AlertDescription';
+import React, { forwardRef } from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { CheckCircle2, AlertTriangle, AlertCircle, Info, X } from 'lucide-react';
+import { cn } from '../utils/cn';
+
+export const alertVariants = cva(
+  'relative w-full rounded-[var(--ui-radius-lg)] border p-4 text-sm flex items-start gap-3.5 shadow-sm',
+  {
+    variants: {
+      status: {
+        info: 'bg-[var(--ui-info-subtle)] border-[var(--ui-info)]/30 text-[var(--ui-text-primary)] [&>svg]:text-[var(--ui-info)]',
+        success: 'bg-[var(--ui-success-subtle)] border-[var(--ui-success)]/30 text-[var(--ui-text-primary)] [&>svg]:text-[var(--ui-success)]',
+        warning: 'bg-[var(--ui-warning-subtle)] border-[var(--ui-warning)]/30 text-[var(--ui-text-primary)] [&>svg]:text-[var(--ui-warning)]',
+        error: 'bg-[var(--ui-error-subtle)] border-[var(--ui-error)]/30 text-[var(--ui-text-primary)] [&>svg]:text-[var(--ui-error)]',
+      },
+    },
+    defaultVariants: {
+      status: 'info',
+    },
+  }
+);
+
+const statusIcons = {
+  info: <Info className="w-5 h-5 flex-shrink-0" />,
+  success: <CheckCircle2 className="w-5 h-5 flex-shrink-0" />,
+  warning: <AlertTriangle className="w-5 h-5 flex-shrink-0" />,
+  error: <AlertCircle className="w-5 h-5 flex-shrink-0" />,
+};
+
+export interface AlertProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof alertVariants> {
+  icon?: React.ReactNode;
+  onClose?: () => void;
+}
+
+export const Alert = forwardRef<HTMLDivElement, AlertProps>(
+  ({ className, status = 'info', icon, onClose, children, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        role="alert"
+        className={cn(alertVariants({ status }), className)}
+        {...props}
+      >
+        {icon !== undefined ? icon : statusIcons[status || 'info']}
+        <div className="flex-1 space-y-1">{children}</div>
+        {onClose && (
+          <button
+            type="button"
+            onClick={onClose}
+            aria-label="Dismiss alert"
+            className="p-1 rounded text-[var(--ui-text-muted)] hover:text-[var(--ui-text-primary)] hover:bg-black/5 dark:hover:bg-white/5 transition-colors -mr-1 -mt-1"
+          >
+            <X className="w-4 h-4" />
+          </button>
+        )}
+      </div>
+    );
+  }
+);
+Alert.displayName = 'Alert';
+
+export const AlertTitle = forwardRef<HTMLHeadingElement, React.HTMLAttributes<HTMLHeadingElement>>(
+  ({ className, children, ...props }, ref) => (
+    <h5 ref={ref} className={cn('font-semibold leading-none tracking-tight text-[var(--ui-text-primary)]', className)} {...props}>
+      {children}
+    </h5>
+  )
+);
+AlertTitle.displayName = 'AlertTitle';
+
+export const AlertDescription = forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
+  ({ className, children, ...props }, ref) => (
+    <p ref={ref} className={cn('text-xs text-[var(--ui-text-secondary)] leading-relaxed', className)} {...props}>
+      {children}
+    </p>
+  )
+);
+AlertDescription.displayName = 'AlertDescription';

package/src/feedback/EmptyState.tsx

@@ -1,45 +1,45 @@
-import React, { forwardRef } from 'react';
-import { Inbox } from 'lucide-react';
-import { cn } from '../utils/cn';
-
-export interface EmptyStateProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
-  icon?: React.ReactNode;
-  title: React.ReactNode;
-  description?: React.ReactNode;
-  action?: React.ReactNode;
-}
-
-export const EmptyState = forwardRef<HTMLDivElement, EmptyStateProps>(
-  ({ className, icon, title, description, action, children, ...props }, ref) => {
-    return (
-      <div
-        ref={ref}
-        className={cn(
-          'flex flex-col items-center justify-center p-8 sm:p-12 text-center rounded-[var(--ui-radius-xl)] border border-dashed border-[var(--ui-border-default)] bg-[var(--ui-bg-secondary)]/50',
-          className
-        )}
-        {...props}
-      >
-        <div className="flex items-center justify-center w-14 h-14 rounded-full bg-[var(--ui-bg-tertiary)] text-[var(--ui-text-muted)] mb-4">
-          {icon || <Inbox className="w-7 h-7 stroke-[1.5]" />}
-        </div>
-
-        <h3 className="text-base sm:text-lg font-bold text-[var(--ui-text-primary)] mb-1">
-          {title}
-        </h3>
-
-        {description && (
-          <p className="text-xs sm:text-sm text-[var(--ui-text-muted)] max-w-sm mb-6 leading-relaxed">
-            {description}
-          </p>
-        )}
-
-        {action && <div className="inline-flex items-center gap-3">{action}</div>}
-
-        {children}
-      </div>
-    );
-  }
-);
-
-EmptyState.displayName = 'EmptyState';
+import React, { forwardRef } from 'react';
+import { Inbox } from 'lucide-react';
+import { cn } from '../utils/cn';
+
+export interface EmptyStateProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
+  icon?: React.ReactNode;
+  title: React.ReactNode;
+  description?: React.ReactNode;
+  action?: React.ReactNode;
+}
+
+export const EmptyState = forwardRef<HTMLDivElement, EmptyStateProps>(
+  ({ className, icon, title, description, action, children, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          'flex flex-col items-center justify-center p-8 sm:p-12 text-center rounded-[var(--ui-radius-xl)] border border-dashed border-[var(--ui-border-default)] bg-[var(--ui-bg-secondary)]/50',
+          className
+        )}
+        {...props}
+      >
+        <div className="flex items-center justify-center w-14 h-14 rounded-full bg-[var(--ui-bg-tertiary)] text-[var(--ui-text-muted)] mb-4">
+          {icon || <Inbox className="w-7 h-7 stroke-[1.5]" />}
+        </div>
+
+        <h3 className="text-base sm:text-lg font-bold text-[var(--ui-text-primary)] mb-1">
+          {title}
+        </h3>
+
+        {description && (
+          <p className="text-xs sm:text-sm text-[var(--ui-text-muted)] max-w-sm mb-6 leading-relaxed">
+            {description}
+          </p>
+        )}
+
+        {action && <div className="inline-flex items-center gap-3">{action}</div>}
+
+        {children}
+      </div>
+    );
+  }
+);
+
+EmptyState.displayName = 'EmptyState';