@rakeyshgidwani/roger-ui-bank-theme-stan-design 0.2.10 → 0.2.16

package/dist/components/ui/navigation/breadcrumb.d.ts

@@ -1,149 +0,0 @@
-
-export const Breadcrumb: React.FC<BreadcrumbProps> = ({
-  items,
-  separator = <ChevronRightIcon className="w-4 h-4" />,
-  maxItems = 5,
-  showHome = true,
-  homeIcon = <HomeIcon className="w-4 h-4" />,
-  onItemClick,
-  truncate = true,
-  responsive = true,
-  className = '',
-  'data-testid': testId = 'breadcrumb',
-}) => {
-  const [isExpanded, setIsExpanded] = useState(false);
-
-  // Memoize processed items to avoid unnecessary recalculations
-  const processedItems = useMemo(() => {
-    if (!truncate || items.length <= maxItems) {
-      return items;
-    }
-
-    if (isExpanded) {
-      return items;
-    }
-
-    // Show first, last, and ellipsis in the middle
-    const firstItems = items.slice(0, 2);
-    const lastItems = items.slice(-2);
-
-    return [
-      ...firstItems,
-      { id: 'ellipsis', label: '...', disabled: true },
-      ...lastItems,
-    ];
-  }, [items, maxItems, truncate, isExpanded]);
-
-  const handleItemClick = (item: BreadcrumbItem) => {
-    if (item.disabled || item.id === 'ellipsis') return;
-
-    if (onItemClick) {
-      onItemClick(item);
-    }
-  };
-
-  const handleExpandToggle = () => {
-    setIsExpanded(!isExpanded);
-  };
-
-  const getThemeClasses = () => {
-    return 'breadcrumb breadcrumb--stan-design';
-  };
-
-  const getItemClasses = (item: BreadcrumbItem, isLast: boolean) => {
-    const baseClasses = 'breadcrumb__item-button';
-
-    if (item.disabled) {
-      return `${baseClasses} breadcrumb__item-button--disabled`;
-    }
-
-    if (isLast) {
-      return `${baseClasses} breadcrumb__item-button--active`;
-    }
-
-    return baseClasses;
-  };
-
-  const getSeparatorClasses = () => {
-    return 'breadcrumb__separator breadcrumb__separator--semantic';
-  };
-
-  return (
-    <nav
-      className={`${getThemeClasses()} ${className}`}
-      aria-label="Breadcrumb"
-      data-testid={testId}
-    >
-      {showHome && (
-        <>
-          <button
-            onClick={() => handleItemClick({ id: 'home', label: 'Home', href: '/' })}
-            className={`breadcrumb__home-button ${getItemClasses({ id: 'home', label: 'Home' } as BreadcrumbItem, false)}`}
-            aria-label="Go to home page"
-          >
-            <span className="breadcrumb__icon">{homeIcon}</span>
-          </button>
-          {separator && (
-            <span className={getSeparatorClasses()} aria-hidden="true">
-              {separator}
-            </span>
-          )}
-        </>
-      )}
-
-      <ol className="breadcrumb__list">
-        {processedItems.map((item, index) => {
-          const isLast = index === processedItems.length - 1;
-          const isEllipsis = item.id === 'ellipsis';
-
-          return (
-            <li key={item.id} className="breadcrumb__item">
-              {index > 0 && separator && (
-                <span className={getSeparatorClasses()} aria-hidden="true">
-                  {separator}
-                </span>
-              )}
-
-              {isEllipsis ? (
-                <button
-                  onClick={handleExpandToggle}
-                  className="breadcrumb__ellipsis"
-                  aria-label={isExpanded ? 'Collapse breadcrumbs' : 'Expand breadcrumbs'}
-                >
-                  {item.label}
-                </button>
-              ) : (
-                <button
-                  onClick={() => handleItemClick(item)}
-                  className={getItemClasses(item, isLast)}
-                  disabled={item.disabled}
-                  aria-current={isLast ? 'page' : undefined}
-                  aria-label={item.href ? `Navigate to ${item.label}` : item.label}
-                >
-                  {item.icon && <span className="breadcrumb__icon">{item.icon}</span>}
-                  {responsive && window.innerWidth < 640 ? (
-                    <span className="breadcrumb__item-label">{item.label}</span>
-                  ) : (
-                    <span className="breadcrumb__item-label">{item.label}</span>
-                  )}
-                </button>
-              )}
-            </li>
-          );
-        })}
-      </ol>
-
-      {truncate && items.length > maxItems && (
-        <button
-          onClick={handleExpandToggle}
-          className={`breadcrumb__expand-toggle breadcrumb__expand-toggle--semantic`}
-          aria-label={isExpanded ? 'Show fewer breadcrumbs' : 'Show all breadcrumbs'}
-        >
-          {isExpanded ? 'Show Less' : 'Show All'}
-        </button>
-      )}
-    </nav>
-  );
-};
-
-export default Breadcrumb;

package/dist/components/ui/navigation/index.d.ts

@@ -1,25 +0,0 @@
-
-// Export types
-export type {
-  NavigationBaseProps,
-  NavigationItem,
-  NavigationGroup,
-  BreadcrumbProps,
-  BreadcrumbItem,
-  PaginationProps,
-  PaginationItem,
-  TabsProps,
-  TabItem,
-  StepperProps,
-  StepItem,
-  StepAction,
-  MenuProps,
-  SidebarProps,
-  NavigationState,
-  NavigationContextValue,
-  NavigationAction,
-  NavigationBreakpoint,
-  NavigationSpacing,
-  NavigationAnimation,
-  NavigationAccessibility,
-} from './types';

package/dist/components/ui/navigation/menu.d.ts

@@ -1,366 +0,0 @@
-
-// Simple icon components
-const ChevronDownIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
-  <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor">
-    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
-  </svg>
-);
-
-const ChevronRightIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
-  <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor">
-    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
-  </svg>
-);
-
-const MagnifyingGlassIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
-  <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor">
-    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
-  </svg>
-);
-
-const FunnelIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
-  <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor">
-    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 3c2.755 0 5.455.232 8.083.678.533.09.917.556.917 1.096v1.044a2.25 2.25 0 01-.659 1.591l-5.432 5.432a2.25 2.25 0 00-.659 1.591v2.927a2.25 2.25 0 01-1.244 2.013L9.75 21v-6.568a2.25 2.25 0 00-.659-1.591L3.659 7.409A2.25 2.25 0 013 5.818V4.774c0-.54.384-1.006.917-1.096A48.32 48.32 0 0112 3z" />
-  </svg>
-);
-
-export const Menu: React.FC<MenuProps> = ({
-  items = [],
-  groups,
-  variant = 'dropdown',
-  size = 'md',
-  // TODO: Implement orientation, trigger, showArrow, and fullWidth in future version
-  // orientation = 'horizontal',
-  // trigger = 'click',
-  placement = 'bottom',
-  offset = 8,
-  // showArrow = false,
-  // fullWidth = false,
-  disabled = false,
-  loading = false,
-  searchable = false,
-  onSearch,
-  filterable = false,
-  onFilter,
-  selectable = false,
-  multiSelect = false,
-  selectedItems = [],
-  onSelectionChange,
-  className = '',
-  'data-testid': testId = 'menu',
-}) => {
-  const [isOpen, setIsOpen] = useState(false);
-  const [searchQuery, setSearchQuery] = useState('');
-  const [filterValue, setFilterValue] = useState('');
-  const [internalSelectedItems, setInternalSelectedItems] = useState<string[]>(selectedItems || []);
-  // TODO: Implement group expansion functionality in future version
-  // const [expandedGroups, setExpandedGroups] = useState<string[]>([]);
-
-  const menuRef = useRef<HTMLDivElement>(null);
-  const triggerRef = useRef<HTMLButtonElement>(null);
-
-  // Use controlled or uncontrolled selected items
-  const currentSelectedItems = selectedItems !== undefined ? selectedItems : internalSelectedItems;
-
-  // Handle click outside to close menu
-  useEffect(() => {
-    const handleClickOutside = (event: MouseEvent) => {
-      if (menuRef.current && !menuRef.current.contains(event.target as Node) &&
-          triggerRef.current && !triggerRef.current.contains(event.target as Node)) {
-        setIsOpen(false);
-      }
-    };
-
-    if (isOpen) {
-      document.addEventListener('mousedown', handleClickOutside);
-    }
-
-    return () => {
-      document.removeEventListener('mousedown', handleClickOutside);
-    };
-  }, [isOpen]);
-
-  // Handle escape key to close menu
-  useEffect(() => {
-    const handleEscape = (event: KeyboardEvent) => {
-      if (event.key === 'Escape') {
-        setIsOpen(false);
-      }
-    };
-
-    if (isOpen) {
-      document.addEventListener('keydown', handleEscape);
-    }
-
-    return () => {
-      document.removeEventListener('keydown', handleEscape);
-    };
-  }, [isOpen]);
-
-  const handleToggle = useCallback(() => {
-    if (disabled || loading) return;
-    setIsOpen(!isOpen);
-  }, [disabled, loading, isOpen]);
-
-  const handleItemClick = useCallback((item: NavigationItem) => {
-    if (item.disabled) return;
-
-    if (selectable) {
-      let newSelectedItems: string[];
-
-      if (multiSelect) {
-        if (currentSelectedItems.includes(item.id)) {
-          newSelectedItems = currentSelectedItems.filter(id => id !== item.id);
-        } else {
-          newSelectedItems = [...currentSelectedItems, item.id];
-        }
-      } else {
-        newSelectedItems = [item.id];
-      }
-
-      if (selectedItems === undefined) {
-        setInternalSelectedItems(newSelectedItems);
-      }
-
-      if (onSelectionChange) {
-        onSelectionChange(newSelectedItems);
-      }
-    }
-
-    if (item.onClick) {
-      item.onClick();
-    }
-
-    // Close menu for single select or non-selectable menus
-    if (!multiSelect || !selectable) {
-      setIsOpen(false);
-    }
-  }, [selectable, multiSelect, currentSelectedItems, selectedItems, onSelectionChange]);
-
-  // TODO: Implement group toggle functionality in future version
-  // const handleGroupToggle = useCallback((groupId: string) => {
-  //   setExpandedGroups(prev => 
-  //     prev.includes(groupId) 
-  //       ? prev.filter(id => id !== groupId)
-  //       : [...prev, groupId]
-  //   );
-  // }, []);
-
-  const handleSearch = useCallback((query: string) => {
-    setSearchQuery(query);
-    if (onSearch) {
-      onSearch(query);
-    }
-  }, [onSearch]);
-
-  const handleFilter = useCallback((filter: string) => {
-    setFilterValue(filter);
-    if (onFilter) {
-      onFilter(filter);
-    }
-  }, [onFilter]);
-
-  // Filter items based on search and filter
-  const filteredItems = useMemo(() => {
-    let filtered = items;
-
-    if (searchQuery) {
-      filtered = filtered.filter(item => 
-        item.label.toLowerCase().includes(searchQuery.toLowerCase()) ||
-        item.description?.toLowerCase().includes(searchQuery.toLowerCase())
-      );
-    }
-
-    if (filterValue) {
-      filtered = filtered.filter(item => 
-        item.label.toLowerCase().includes(filterValue.toLowerCase())
-      );
-    }
-
-    return filtered;
-  }, [items, searchQuery, filterValue]);
-
-  const getSizeClasses = () => {
-    switch (size) {
-      case 'sm':
-        return 'menu__trigger--sm';
-      case 'lg':
-        return 'menu__trigger--lg';
-      default: // md
-        return 'menu__trigger--md';
-    }
-  };
-
-  const getVariantClasses = () => {
-    switch (variant) {
-      case 'dropdown':
-        return 'menu__content--dropdown';
-      case 'context':
-        return 'menu__content--context';
-      case 'command':
-        return 'menu__content--command';
-      default: // default
-        return 'menu__content--default';
-    }
-  };
-
-  const getThemeClasses = () => {
-    return 'menu menu--stan-design';
-  };
-
-  const getItemClasses = (item: NavigationItem) => {
-    let classes = `menu__item ${getSizeClasses()}`;
-
-    if (item.disabled) {
-      classes += ' menu__item--disabled';
-    } else if (selectable && currentSelectedItems.includes(item.id)) {
-      classes += ' menu__item--selected';
-    } else {
-      classes += ' menu__item--default';
-    }
-
-    return classes;
-  };
-
-  const getPlacementClasses = () => {
-    switch (placement) {
-      case 'top':
-        return 'menu__content--placement-top';
-      case 'bottom':
-        return 'menu__content--placement-bottom';
-      case 'left':
-        return 'menu__content--placement-left';
-      case 'right':
-        return 'menu__content--placement-right';
-      default:
-        return 'menu__content--placement-bottom';
-    }
-  };
-
-  const renderMenuItem = (item: NavigationItem) => (
-    <button
-      key={item.id}
-      onClick={() => handleItemClick(item)}
-      disabled={item.disabled}
-      className={getItemClasses(item)}
-    >
-      <div className="menu__item-content">
-        {item.icon && <span className="menu__item-icon">{item.icon}</span>}
-        <div className="menu__item-text">
-          <div className="menu__item-label">{item.label}</div>
-          {item.description && (
-            <div className="menu__item-description">{item.description}</div>
-          )}
-        </div>
-      </div>
-      {item.badge && <span className="menu__item-badge">{item.badge}</span>}
-      {item.children && item.children.length > 0 && (
-        <ChevronRightIcon className="menu__item-arrow" />
-      )}
-    </button>
-  );
-
-  const renderMenuGroup = (group: NavigationGroup) => (
-    <div key={group.id} className="menu__group">
-      {group.title && (
-        <div className="menu__group-title">
-          {group.title}
-        </div>
-      )}
-      {group.items.map(renderMenuItem)}
-    </div>
-  );
-
-  return (
-    <div className={`menu__container ${getThemeClasses()}`} data-testid={testId}>
-      {/* Trigger Button */}
-      <button
-        ref={triggerRef}
-        onClick={handleToggle}
-        disabled={disabled || loading}
-        className={`menu__trigger ${getSizeClasses()} ${className}`}
-        aria-expanded={isOpen}
-        aria-haspopup="true"
-      >
-        Menu
-        <ChevronDownIcon className="menu__trigger-icon" />
-      </button>
-
-      {/* Menu Dropdown */}
-      {isOpen && (
-        <div
-          ref={menuRef}
-          role="menu"
-          className={`menu__content ${getVariantClasses()} ${getPlacementClasses()}`}
-          style={{ marginTop: placement === 'bottom' ? offset : undefined }}
-        >
-          {/* Search Bar */}
-          {searchable && (
-            <div className="menu__search">
-              <div className="menu__search-container">
-                <MagnifyingGlassIcon className="menu__search-icon" />
-                <input
-                  type="text"
-                  placeholder="Search..."
-                  value={searchQuery}
-                  onChange={(e) => handleSearch(e.target.value)}
-                  className="menu__search-input"
-                />
-              </div>
-            </div>
-          )}
-
-          {/* Filter Bar */}
-          {filterable && (
-            <div className="menu__filter">
-              <div className="menu__filter-container">
-                <FunnelIcon className="menu__filter-icon" />
-                <select
-                  value={filterValue}
-                  onChange={(e) => handleFilter(e.target.value)}
-                  className="menu__filter-select"
-                >
-                  <option value="">All</option>
-                  <option value="featured">Featured</option>
-                  <option value="recent">Recent</option>
-                </select>
-              </div>
-            </div>
-          )}
-
-          {/* Menu Items */}
-          <div className="menu__items">
-            {groups ? groups.map(renderMenuGroup) : filteredItems.map(renderMenuItem)}
-          </div>
-
-          {/* Selection Actions */}
-          {selectable && multiSelect && currentSelectedItems.length > 0 && (
-            <div className="menu__selection-actions">
-              <div className="menu__selection-info">
-                <span className="menu__selection-count">
-                  {currentSelectedItems.length} selected
-                </span>
-                <button
-                  onClick={() => {
-                    const newSelectedItems: string[] = [];
-                    if (selectedItems === undefined) {
-                      setInternalSelectedItems(newSelectedItems);
-                    }
-                    if (onSelectionChange) {
-                      onSelectionChange(newSelectedItems);
-                    }
-                  }}
-                  className="menu__selection-clear"
-                >
-                  Clear
-                </button>
-              </div>
-            </div>
-          )}
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default Menu;

package/dist/components/ui/navigation/navigation-demo.d.ts

@@ -1,169 +0,0 @@
-
-export const NavigationDemo: React.FC = () => {
-  const [currentTab, setCurrentTab] = useState('overview');
-  const [currentStep, setCurrentStep] = useState(0);
-  const [currentPage, setCurrentPage] = useState(1);
-  const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
-  // const [menuOpen, setMenuOpen] = useState(false);
-
-  // Sample data for components
-  const breadcrumbItems = [
-    { id: 'home', label: 'Home', href: '/' },
-    { id: 'products', label: 'Products', href: '/products' },
-    { id: 'electronics', label: 'Electronics', href: '/products/electronics' },
-    { id: 'smartphones', label: 'Smartphones', href: '/products/electronics/smartphones' },
-  ];
-
-  const tabItems = [
-    {
-      id: 'overview',
-      label: 'Overview',
-      content: (
-        <div className="p-4">
-          <h3 className="text-lg font-semibold mb-2">Overview Tab</h3>
-          <p className="text-gray-600">This is the overview content with some sample text.</p>
-        </div>
-      ),
-    },
-    {
-      id: 'details',
-      label: 'Details',
-      content: (
-        <div className="p-4">
-          <h3 className="text-lg font-semibold mb-2">Details Tab</h3>
-          <p className="text-gray-600">Detailed information goes here.</p>
-        </div>
-      ),
-    },
-    {
-      id: 'settings',
-      label: 'Settings',
-      content: (
-        <div className="p-4">
-          <h3 className="text-lg font-semibold mb-2">Settings Tab</h3>
-          <p className="text-gray-600">Configuration options and settings.</p>
-        </div>
-      ),
-    },
-  ];
-
-  const stepperSteps = [
-    {
-      id: 'step1',
-      label: 'Account Setup',
-      description: 'Create your account and verify email',
-      status: 'completed' as const,
-    },
-    {
-      id: 'step2',
-      label: 'Profile Information',
-      description: 'Fill in your personal details',
-      status: 'active' as const,
-    },
-    {
-      id: 'step3',
-      label: 'Preferences',
-      description: 'Configure your account preferences',
-      status: 'pending' as const,
-    },
-    {
-      id: 'step4',
-      label: 'Review & Confirm',
-      description: 'Review your information and confirm',
-      status: 'pending' as const,
-    },
-  ];
-
-  const menuItems: NavigationItem[] = [
-    {
-      id: 'dashboard',
-      label: 'Dashboard',
-      description: 'Main dashboard view',
-      icon: '📊',
-    },
-    {
-      id: 'analytics',
-      label: 'Analytics',
-      description: 'View detailed analytics',
-      icon: '📈',
-    },
-    {
-      id: 'reports',
-      label: 'Reports',
-      description: 'Generate and view reports',
-      icon: '📋',
-    },
-    {
-      id: 'settings',
-      label: 'Settings',
-      description: 'Configure your account',
-      icon: '⚙️',
-    },
-  ];
-
-  const sidebarItems: NavigationItem[] = [
-    {
-      id: 'dashboard',
-      label: 'Dashboard',
-      icon: '📊',
-      active: true,
-    },
-    {
-      id: 'analytics',
-      label: 'Analytics',
-      icon: '📈',
-    },
-    {
-      id: 'reports',
-      label: 'Reports',
-      icon: '📋',
-    },
-    {
-      id: 'settings',
-      label: 'Settings',
-      icon: '⚙️',
-    },
-  ];
-
-  const sidebarGroups: NavigationGroup[] = [
-    {
-      id: 'management',
-      title: 'Management',
-      items: [
-        { id: 'users', label: 'Users', icon: '👥' },
-        { id: 'roles', label: 'Roles', icon: '🔐' },
-        { id: 'permissions', label: 'Permissions', icon: '🔑' },
-      ],
-    },
-    {
-      id: 'content',
-      title: 'Content',
-      items: [
-        { id: 'articles', label: 'Articles', icon: '📝' },
-        { id: 'media', label: 'Media', icon: '🖼️' },
-        { id: 'comments', label: 'Comments', icon: '💬' },
-      ],
-    },
-  ];
-
-  // const getThemeClasses = () => {
-  //   return 'navigation-demo navigation-demo--stan-design';
-  // };
-
-  return (
-    <div className="space-y-8 p-6">
-      <div className="text-center">
-        <h1 className="text-3xl font-bold text-gray-900 mb-2">Navigation Components Demo</h1>
-        <p className="text-gray-600">Showcasing all navigation components with Stan Design theme</p>
-      </div>
-
-      {/* Breadcrumb Component */}
-      <div className="p-6">
-        <h2 className="text-xl font-semibold mb-4">Breadcrumb Component</h2>
-        <div className="space-y-4">
-          <Breadcrumb
-            items={breadcrumbItems}
-            onItemClick={(item) => 
-};
-
-export default NavigationDemo;