@rakeyshgidwani/roger-ui-bank-theme-stan-design 0.2.7 → 0.2.8

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

@@ -0,0 +1,149 @@
+
+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/breadcrumb.esm.js

@@ -0,0 +1,155 @@
+/**
+ * Breadcrumb Component
+ * Provides navigation breadcrumbs with theme support and responsive design
+ */
+
+import * as React from 'react';
+import { useState, useMemo } from 'react';
+import { ChevronRightIcon, HomeIcon } from '@heroicons/react/24/outline';
+import { BreadcrumbProps, BreadcrumbItem } from './types';
+
+export const Breadcrumb= ({
+  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'= '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, label, disabled},
+      ...lastItems,
+    ];
+  }, [items, maxItems, truncate, isExpanded]);
+
+  const handleItemClick = (item) => {
+    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, isLast) => {
+    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, label, href})}
+            className={`breadcrumb__home-button ${getItemClasses({ id, label} 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' }
+                >
+                  {item.label}
+                </button>
+              ) ={() => handleItemClick(item)}
+                  className={getItemClasses(item, isLast)}
+                  disabled={item.disabled}
+                  aria-current={isLast ? 'page' }
+                  aria-label={item.href ? `Navigate to ${item.label}` }
+                >
+                  {item.icon && <span className="breadcrumb__icon">{item.icon}</span>}
+                  {responsive && window.innerWidth < 640 ? (
+                    <span className="breadcrumb__item-label">{item.label}</span>
+                  ) ="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' }
+        >
+          {isExpanded ? 'Show Less' }
+        </button>
+      )}
+    </nav>
+  );
+};
+
+export default Breadcrumb;

package/dist/components/ui/navigation/breadcrumb.js

@@ -0,0 +1,155 @@
+/**
+ * Breadcrumb Component
+ * Provides navigation breadcrumbs with theme support and responsive design
+ */
+
+import * as React from 'react';
+import { useState, useMemo } from 'react';
+import { ChevronRightIcon, HomeIcon } from '@heroicons/react/24/outline';
+import { BreadcrumbProps, BreadcrumbItem } from './types';
+
+export const Breadcrumb= ({
+  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'= '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, label, disabled},
+      ...lastItems,
+    ];
+  }, [items, maxItems, truncate, isExpanded]);
+
+  const handleItemClick = (item) => {
+    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, isLast) => {
+    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, label, href})}
+            className={`breadcrumb__home-button ${getItemClasses({ id, label} 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' }
+                >
+                  {item.label}
+                </button>
+              ) ={() => handleItemClick(item)}
+                  className={getItemClasses(item, isLast)}
+                  disabled={item.disabled}
+                  aria-current={isLast ? 'page' }
+                  aria-label={item.href ? `Navigate to ${item.label}` }
+                >
+                  {item.icon && <span className="breadcrumb__icon">{item.icon}</span>}
+                  {responsive && window.innerWidth < 640 ? (
+                    <span className="breadcrumb__item-label">{item.label}</span>
+                  ) ="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' }
+        >
+          {isExpanded ? 'Show Less' }
+        </button>
+      )}
+    </nav>
+  );
+};
+
+export default Breadcrumb;

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

@@ -0,0 +1,25 @@
+
+// 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/index.esm.js

@@ -0,0 +1,14 @@
+/**
+ * Navigation Components Index
+ * Exports all navigation components for easy importing
+ */
+
+export { Breadcrumb } from './breadcrumb';
+export { Pagination } from './pagination';
+export { Tabs } from './tabs';
+export { Stepper } from './stepper';
+export { Menu } from './menu';
+export { Sidebar } from './sidebar';
+
+// Export types
+

package/dist/components/ui/navigation/index.js

@@ -0,0 +1,14 @@
+/**
+ * Navigation Components Index
+ * Exports all navigation components for easy importing
+ */
+
+export { Breadcrumb } from './breadcrumb';
+export { Pagination } from './pagination';
+export { Tabs } from './tabs';
+export { Stepper } from './stepper';
+export { Menu } from './menu';
+export { Sidebar } from './sidebar';
+
+// Export types
+