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

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

@@ -10,29 +10,29 @@ import { ReactNode } from 'react';
 // ============================================================================
 
 export interface NavigationBaseProps {
-  className?;
-  'data-testid'?;
-  theme?;
+  className?: string;
+  'data-testid'?: string;
+  theme?: 'stan-design' | 'enterprise' | 'harvey';
 }
 
 export interface NavigationItem {
-  id;
-  label;
-  href?;
-  icon?;
-  disabled?;
-  active?;
-  children?];
-  onClick?) => void;
-  badge?;
-  description?;
+  id: string;
+  label: string;
+  href?: string;
+  icon?: ReactNode;
+  disabled?: boolean;
+  active?: boolean;
+  children?: NavigationItem[];
+  onClick?: () => void;
+  badge?: ReactNode;
+  description?: string;
 }
 
 export interface NavigationGroup {
-  id;
-  title?;
-  items];
-  divider?;
+  id: string;
+  title?: string;
+  items: NavigationItem[];
+  divider?: boolean;
 }
 
 // ============================================================================
@@ -40,23 +40,23 @@ export interface NavigationGroup {
 // ============================================================================
 
 export interface BreadcrumbProps extends NavigationBaseProps {
-  items];
-  separator?;
-  maxItems?;
-  showHome?;
-  homeIcon?;
-  onItemClick?) => void;
-  truncate?;
-  responsive?;
+  items: BreadcrumbItem[];
+  separator?: ReactNode;
+  maxItems?: number;
+  showHome?: boolean;
+  homeIcon?: ReactNode;
+  onItemClick?: (item: BreadcrumbItem) => void;
+  truncate?: boolean;
+  responsive?: boolean;
 }
 
 export interface BreadcrumbItem {
-  id;
-  label;
-  href?;
-  icon?;
-  onClick?) => void;
-  disabled?;
+  id: string;
+  label: string;
+  href?: string;
+  icon?: ReactNode;
+  onClick?: () => void;
+  disabled?: boolean;
 }
 
 // ============================================================================
@@ -64,33 +64,33 @@ export interface BreadcrumbItem {
 // ============================================================================
 
 export interface PaginationProps extends NavigationBaseProps {
-  currentPage;
-  totalPages;
-  totalItems?;
-  itemsPerPage?;
-  showFirstLast?;
-  showPrevNext?;
-  showPageNumbers?;
-  maxPageNumbers?;
-  size?;
-  variant?;
-  onPageChange) => void;
-  onItemsPerPageChange?) => void;
-  itemsPerPageOptions?];
-  showItemsPerPage?;
-  showTotal?;
-  totalLabel?;
-  disabled?;
-  loading?;
+  currentPage: number;
+  totalPages: number;
+  totalItems?: number;
+  itemsPerPage?: number;
+  showFirstLast?: boolean;
+  showPrevNext?: boolean;
+  showPageNumbers?: boolean;
+  maxPageNumbers?: number;
+  size?: 'sm' | 'md' | 'lg';
+  variant?: 'default' | 'outlined' | 'minimal';
+  onPageChange: (page: number) => void;
+  onItemsPerPageChange?: (itemsPerPage: number) => void;
+  itemsPerPageOptions?: number[];
+  showItemsPerPage?: boolean;
+  showTotal?: boolean;
+  totalLabel?: string;
+  disabled?: boolean;
+  loading?: boolean;
 }
 
 export interface PaginationItem {
-  type;
-  page?;
-  disabled?;
-  active?;
-  label;
-  onClick?) => void;
+  type: 'page' | 'ellipsis' | 'previous' | 'next' | 'first' | 'last';
+  page?: number;
+  disabled?: boolean;
+  active?: boolean;
+  label: string;
+  onClick?: () => void;
 }
 
 // ============================================================================
@@ -98,34 +98,34 @@ export interface PaginationItem {
 // ============================================================================
 
 export interface TabsProps extends NavigationBaseProps {
-  tabs];
-  activeTab?;
-  defaultActiveTab?;
-  onTabChange?) => void;
-  variant?;
-  size?;
-  orientation?;
-  fullWidth?;
-  centered?;
-  disabled?;
-  loading?;
-  closable?;
-  onTabClose?) => void;
-  addable?;
-  onTabAdd?) => void;
-  draggable?;
-  onTabsReorder?]) => void;
+  tabs: TabItem[];
+  activeTab?: string;
+  defaultActiveTab?: string;
+  onTabChange?: (tabId: string) => void;
+  variant?: 'default' | 'pills' | 'underline' | 'cards' | 'minimal';
+  size?: 'sm' | 'md' | 'lg';
+  orientation?: 'horizontal' | 'vertical';
+  fullWidth?: boolean;
+  centered?: boolean;
+  disabled?: boolean;
+  loading?: boolean;
+  closable?: boolean;
+  onTabClose?: (tabId: string) => void;
+  addable?: boolean;
+  onTabAdd?: () => void;
+  draggable?: boolean;
+  onTabsReorder?: (tabs: TabItem[]) => void;
 }
 
 export interface TabItem {
-  id;
-  label;
-  content;
-  icon?;
-  disabled?;
-  closable?;
-  badge?;
-  description?;
+  id: string;
+  label: string;
+  content: ReactNode;
+  icon?: ReactNode;
+  disabled?: boolean;
+  closable?: boolean;
+  badge?: ReactNode;
+  description?: string;
 }
 
 // ============================================================================
@@ -133,45 +133,45 @@ export interface TabItem {
 // ============================================================================
 
 export interface StepperProps extends NavigationBaseProps {
-  steps];
-  currentStep?;
-  defaultCurrentStep?;
-  onStepChange?) => void;
-  variant?;
-  size?;
-  showStepNumbers?;
-  showStepLabels?;
-  showStepDescriptions?;
-  showStepIcons?;
-  allowStepClick?;
-  allowStepNavigation?;
-  showProgress?;
-  showStepStatus?;
-  onStepComplete?) => void;
-  onStepError?) => void;
-  onFinish?) => void;
-  onCancel?) => void;
+  steps: StepItem[];
+  currentStep?: number;
+  defaultCurrentStep?: number;
+  onStepChange?: (stepIndex: number) => void;
+  variant?: 'default' | 'vertical' | 'horizontal' | 'wizard';
+  size?: 'sm' | 'md' | 'lg';
+  showStepNumbers?: boolean;
+  showStepLabels?: boolean;
+  showStepDescriptions?: boolean;
+  showStepIcons?: boolean;
+  allowStepClick?: boolean;
+  allowStepNavigation?: boolean;
+  showProgress?: boolean;
+  showStepStatus?: boolean;
+  onStepComplete?: (stepIndex: number) => void;
+  onStepError?: (stepIndex: number) => void;
+  onFinish?: () => void;
+  onCancel?: () => void;
 }
 
 export interface StepItem {
-  id;
-  label;
-  description?;
-  icon?;
-  status?;
-  disabled?;
-  required?;
-  validation?) => boolean | Promise<boolean>;
-  content?;
-  actions?];
+  id: string;
+  label: string;
+  description?: string;
+  icon?: ReactNode;
+  status?: 'pending' | 'active' | 'completed' | 'error' | 'warning';
+  disabled?: boolean;
+  required?: boolean;
+  validation?: () => boolean | Promise<boolean>;
+  content?: ReactNode;
+  actions?: StepAction[];
 }
 
 export interface StepAction {
-  label;
-  variant?;
-  onClick) => void;
-  disabled?;
-  loading?;
+  label: string;
+  variant?: 'primary' | 'secondary' | 'outline' | 'ghost';
+  onClick: () => void;
+  disabled?: boolean;
+  loading?: boolean;
 }
 
 // ============================================================================
@@ -179,26 +179,26 @@ export interface StepAction {
 // ============================================================================
 
 export interface MenuProps extends NavigationBaseProps {
-  items];
-  groups?];
-  variant?;
-  size?;
-  orientation?;
-  trigger?;
-  placement?;
-  offset?;
-  showArrow?;
-  fullWidth?;
-  disabled?;
-  loading?;
-  searchable?;
-  onSearch?) => void;
-  filterable?;
-  onFilter?) => void;
-  selectable?;
-  multiSelect?;
-  selectedItems?];
-  onSelectionChange?]) => void;
+  items: NavigationItem[];
+  groups?: NavigationGroup[];
+  variant?: 'default' | 'dropdown' | 'context' | 'command';
+  size?: 'sm' | 'md' | 'lg';
+  orientation?: 'horizontal' | 'vertical';
+  trigger?: 'click' | 'hover' | 'focus';
+  placement?: 'top' | 'bottom' | 'left' | 'right';
+  offset?: number;
+  showArrow?: boolean;
+  fullWidth?: boolean;
+  disabled?: boolean;
+  loading?: boolean;
+  searchable?: boolean;
+  onSearch?: (query: string) => void;
+  filterable?: boolean;
+  onFilter?: (filter: string) => void;
+  selectable?: boolean;
+  multiSelect?: boolean;
+  selectedItems?: string[];
+  onSelectionChange?: (selectedItems: string[]) => void;
 }
 
 // ============================================================================
@@ -206,35 +206,35 @@ export interface MenuProps extends NavigationBaseProps {
 // ============================================================================
 
 export interface SidebarProps extends NavigationBaseProps {
-  items];
-  groups?];
-  variant?;
-  size?;
-  position?;
-  collapsed?;
-  defaultCollapsed?;
-  onCollapseChange?) => void;
-  collapsible?;
-  showToggle?;
-  toggleIcon?;
-  header?;
-  footer?;
-  overlay?;
-  overlayCloseOnClick?;
-  overlayCloseOnEscape?;
-  overlayCloseOnOutsideClick?;
-  responsive?;
-  breakpoint?;
-  onItemClick?) => void;
-  onGroupToggle?, expanded) => void;
-  expandedGroups?];
-  defaultExpandedGroups?];
-  showGroupIcons?;
-  showItemIcons?;
-  showItemBadges?;
-  showItemDescriptions?;
-  sticky?;
-  zIndex?;
+  items: NavigationItem[];
+  groups?: NavigationGroup[];
+  variant?: 'default' | 'collapsible' | 'overlay' | 'drawer';
+  size?: 'sm' | 'md' | 'lg' | 'xl';
+  position?: 'left' | 'right';
+  collapsed?: boolean;
+  defaultCollapsed?: boolean;
+  onCollapseChange?: (collapsed: boolean) => void;
+  collapsible?: boolean;
+  showToggle?: boolean;
+  toggleIcon?: ReactNode;
+  header?: ReactNode;
+  footer?: ReactNode;
+  overlay?: boolean;
+  overlayCloseOnClick?: boolean;
+  overlayCloseOnEscape?: boolean;
+  overlayCloseOnOutsideClick?: boolean;
+  responsive?: boolean;
+  breakpoint?: 'sm' | 'md' | 'lg' | 'xl';
+  onItemClick?: (item: NavigationItem) => void;
+  onGroupToggle?: (groupId: string, expanded: boolean) => void;
+  expandedGroups?: string[];
+  defaultExpandedGroups?: string[];
+  showGroupIcons?: boolean;
+  showItemIcons?: boolean;
+  showItemBadges?: boolean;
+  showItemDescriptions?: boolean;
+  sticky?: boolean;
+  zIndex?: number;
 }
 
 // ============================================================================
@@ -242,57 +242,58 @@ export interface SidebarProps extends NavigationBaseProps {
 // ============================================================================
 
 export interface NavigationState {
-  activeItem?;
-  expandedGroups];
-  collapsed;
-  searchQuery;
-  filterValue;
-  selectedItems];
+  activeItem?: string;
+  expandedGroups: string[];
+  collapsed: boolean;
+  searchQuery: string;
+  filterValue: string;
+  selectedItems: string[];
 }
 
 export interface NavigationContextValue {
-  state;
-  dispatch;
-  theme;
+  state: NavigationState;
+  dispatch: React.Dispatch<NavigationAction>;
+  theme: string;
 }
 
- payload}
-  | { type; payload}
-  | { type; payload}
-  | { type; payload}
-  | { type; payload}
-  | { type; payload] }
-  | { type};
+export type NavigationAction =
+  | { type: 'SET_ACTIVE_ITEM'; payload: string }
+  | { type: 'TOGGLE_GROUP'; payload: string }
+  | { type: 'SET_COLLAPSED'; payload: boolean }
+  | { type: 'SET_SEARCH_QUERY'; payload: string }
+  | { type: 'SET_FILTER_VALUE'; payload: string }
+  | { type: 'SET_SELECTED_ITEMS'; payload: string[] }
+  | { type: 'RESET_STATE' };
 
 // ============================================================================
 // NAVIGATION UTILITY TYPES
 // ============================================================================
 
 export interface NavigationBreakpoint {
-  sm;
-  md;
-  lg;
-  xl;
+  sm: string;
+  md: string;
+  lg: string;
+  xl: string;
 }
 
 export interface NavigationSpacing {
-  xs;
-  sm;
-  md;
-  lg;
-  xl;
+  xs: string;
+  sm: string;
+  md: string;
+  lg: string;
+  xl: string;
 }
 
 export interface NavigationAnimation {
-  duration;
-  easing;
-  delay?;
+  duration: string;
+  easing: string;
+  delay?: string;
 }
 
 export interface NavigationAccessibility {
-  ariaLabel?;
-  ariaDescribedBy?;
-  ariaLabelledBy?;
-  role?;
-  tabIndex?;
+  ariaLabel?: string;
+  ariaDescribedBy?: string;
+  ariaLabelledBy?: string;
+  role?: string;
+  tabIndex?: number;
 }

package/dist/components/ui/overlay/backdrop.esm.js

@@ -1,18 +1,18 @@
 import React from 'react';
 
 export interface BackdropProps {
-  isVisible;
-  onClick?) => void;
-  className?;
-  blur?;
-  opacity?;
-  zIndex?;
-  children?;
-  theme?;
-  animation?;
+  isVisible: boolean;
+  onClick?: () => void;
+  className?: string;
+  blur?: boolean;
+  opacity?: number;
+  zIndex?: number;
+  children?: React.ReactNode;
+  theme?: 'light' | 'dark' | 'primary' | 'success' | 'warning' | 'error';
+  animation?: boolean;
 }
 
-export const Backdrop= ({
+export const Backdrop: React.FC<BackdropProps> = ({
   isVisible,
   onClick,
   className = '',
@@ -27,7 +27,7 @@ export const Backdrop= ({
     return null;
   }
 
-  const handleClick = (event) => {
+  const handleClick = (event: React.MouseEvent) => {
     // Only trigger onClick if clicking directly on the backdrop
     if (event.target === event.currentTarget && onClick) {
       onClick();
@@ -50,11 +50,11 @@ export const Backdrop= ({
 
   const containerClasses = [
     'backdrop__container',
-    blur ? 'backdrop__container--blur' ,
-    theme ? `backdrop__container--theme-${theme}` ,
+    blur ? 'backdrop__container--blur' : '',
+    theme ? `backdrop__container--theme-${theme}` : '',
     getOpacityClass(),
     getZIndexClass(),
-    animation ? 'backdrop__container--enter' ,
+    animation ? 'backdrop__container--enter' : '',
     className
   ].filter(Boolean).join(' ');
 
@@ -62,8 +62,9 @@ export const Backdrop= ({
     <div
       className={containerClasses}
       style={{
-        '--backdrop-z-index',
-        '--backdrop-opacity'} as React.CSSProperties}
+        '--backdrop-z-index': zIndex,
+        '--backdrop-opacity': opacity
+      } as React.CSSProperties}
       onClick={handleClick}
       role="presentation"
       aria-hidden="true"

package/dist/components/ui/overlay/backdrop.js

@@ -1,18 +1,18 @@
 import React from 'react';
 
 export interface BackdropProps {
-  isVisible;
-  onClick?) => void;
-  className?;
-  blur?;
-  opacity?;
-  zIndex?;
-  children?;
-  theme?;
-  animation?;
+  isVisible: boolean;
+  onClick?: () => void;
+  className?: string;
+  blur?: boolean;
+  opacity?: number;
+  zIndex?: number;
+  children?: React.ReactNode;
+  theme?: 'light' | 'dark' | 'primary' | 'success' | 'warning' | 'error';
+  animation?: boolean;
 }
 
-export const Backdrop= ({
+export const Backdrop: React.FC<BackdropProps> = ({
   isVisible,
   onClick,
   className = '',
@@ -27,7 +27,7 @@ export const Backdrop= ({
     return null;
   }
 
-  const handleClick = (event) => {
+  const handleClick = (event: React.MouseEvent) => {
     // Only trigger onClick if clicking directly on the backdrop
     if (event.target === event.currentTarget && onClick) {
       onClick();
@@ -50,11 +50,11 @@ export const Backdrop= ({
 
   const containerClasses = [
     'backdrop__container',
-    blur ? 'backdrop__container--blur' ,
-    theme ? `backdrop__container--theme-${theme}` ,
+    blur ? 'backdrop__container--blur' : '',
+    theme ? `backdrop__container--theme-${theme}` : '',
     getOpacityClass(),
     getZIndexClass(),
-    animation ? 'backdrop__container--enter' ,
+    animation ? 'backdrop__container--enter' : '',
     className
   ].filter(Boolean).join(' ');
 
@@ -62,8 +62,9 @@ export const Backdrop= ({
     <div
       className={containerClasses}
       style={{
-        '--backdrop-z-index',
-        '--backdrop-opacity'} as React.CSSProperties}
+        '--backdrop-z-index': zIndex,
+        '--backdrop-opacity': opacity
+      } as React.CSSProperties}
       onClick={handleClick}
       role="presentation"
       aria-hidden="true"