@campxdev/react-blueprint 3.0.0-alpha.6 → 3.0.0-alpha.8

package/src/components/Layout/PageContent/PageContent.tsx

@@ -5,6 +5,7 @@ import { ReactNode } from 'react';
 interface PageContentProps {
   children: ReactNode;
   className?: string;
+  styles?: React.CSSProperties;
 }
 
 /**
@@ -26,7 +27,7 @@ interface PageContentProps {
  * </PageContent>
  * ```
  */
-const PageContent = ({ children, className }: PageContentProps) => {
+const PageContent = ({ children, className, styles }: PageContentProps) => {
   const isSmallScreen = useMediaQuery('(max-width: 768px)');
 
   return (
@@ -36,9 +37,9 @@ const PageContent = ({ children, className }: PageContentProps) => {
         className,
       )}
       style={{
-        height: isSmallScreen ? 'calc(100vh - 101px)' : `calc(100vh - 90px)`,
-        maxHeight: isSmallScreen ? 'calc(100vh - 101px)' : `calc(100vh - 90px)`,
+        height: isSmallScreen ? 'calc(100vh - 101px)' : `calc(100vh - 80px)`,
         overflowY: 'auto',
+        ...styles,
       }}
     >
       {children}

package/src/components/Layout/PageHeader/PageHeader.tsx

@@ -9,7 +9,10 @@ import { cn } from '@/lib/utils';
 import { EllipsisVertical, Funnel, Plus } from 'lucide-react';
 import { cloneElement, ReactElement, ReactNode } from 'react';
 import { useDispatch } from 'react-redux';
-import { setFilterByNameForUniqueId } from '../../../redux/slices/pageHeaderSlice';
+import {
+  resetStateForUniqueId,
+  setFilterByNameForUniqueId,
+} from '../../../redux/slices/pageHeaderSlice';
 import { SearchBarProps } from '../../Input/SearchBar/SearchBar';
 import { Breadcrumbs } from '../../Navigation/Breadcrumbs/Breadcrumbs';
 import { PageHeaderSearchBar } from './components/SearchBar';
@@ -144,12 +147,24 @@ const PageHeader = ({
               useMenuSlot={true}
               menuSlot={() => (
                 <div className="flex flex-col gap-2 p-1 w-80">
-                  <Typography
-                    variant={'lead'}
-                    className="flex gap-1 items-center p-1 pb-0 text-sm"
-                  >
-                    <Funnel size={16} /> Advanced Filters
-                  </Typography>
+                  <div className="flex justify-between">
+                    <Typography
+                      variant={'lead'}
+                      className="flex gap-1 items-center p-1 pb-0 text-sm"
+                    >
+                      <Funnel size={16} /> Advanced Filters
+                    </Typography>
+                    <Button
+                      variant={'link'}
+                      size={'sm'}
+                      className="text-destructive hover:no-underline"
+                      onClick={() =>
+                        dispatch(resetStateForUniqueId({ uniqueId }))
+                      }
+                    >
+                      Clear
+                    </Button>
+                  </div>
                   <Separator />
                   {filterButtonProps.components.map((component, index) => (
                     <div key={index} className="w-full ">

package/src/components/Navigation/Breadcrumbs/Breadcrumbs.tsx

@@ -91,11 +91,22 @@ export const Breadcrumbs = ({
       return breadcrumbItems.map((item, index) => (
         <BreadcrumbItem key={index}>
           {item.isLast ? (
-            <BreadcrumbPage>{item.label}</BreadcrumbPage>
+            <BreadcrumbPage>
+              <Typography variant={'small'} className="text-semibold">
+                {item.label}
+              </Typography>
+            </BreadcrumbPage>
           ) : (
             <>
               <BreadcrumbLink asChild>
-                <Link to={item.path}>{item.label}</Link>
+                <Link to={item.path}>
+                  <Typography
+                    variant={'small'}
+                    className="text-semibold text-muted-foreground"
+                  >
+                    {item.label}
+                  </Typography>
+                </Link>
               </BreadcrumbLink>
               <BreadcrumbSeparator />
             </>
@@ -113,7 +124,10 @@ export const Breadcrumbs = ({
           <BreadcrumbItem>
             <BreadcrumbLink asChild>
               <Link to={firstItem.path}>
-                <Typography variant={'small'} className="text-muted-foreground">
+                <Typography
+                  variant={'small'}
+                  className="text-semibold text-muted-foreground"
+                >
                   {firstItem.label}
                 </Typography>
               </Link>
@@ -137,7 +151,9 @@ export const Breadcrumbs = ({
           </BreadcrumbItem>
           <BreadcrumbItem>
             <BreadcrumbPage>
-              <Typography variant={'small'}>{lastItem.label}</Typography>
+              <Typography variant={'small'} className="text-semibold">
+                {lastItem.label}
+              </Typography>
             </BreadcrumbPage>
           </BreadcrumbItem>
         </>

package/src/components/Navigation/Dialog/Dialog.tsx

@@ -1,4 +1,9 @@
-import { DialogHeader, Dialog as ShadcnDialog, DialogContent as ShadcnDialogContent, DialogTitle as ShadcnDialogTitle } from '@/shadcn-components/DataDisplay/Dialog/Dialog';
+import {
+  DialogHeader,
+  Dialog as ShadcnDialog,
+  DialogContent as ShadcnDialogContent,
+  DialogTitle as ShadcnDialogTitle,
+} from '@/shadcn-components/DataDisplay/Dialog/Dialog';
 import { ReactNode } from 'react';
 
 /**
@@ -100,7 +105,7 @@ const Dialog = ({
         showCloseButton={showCloseButton}
       >
         {title && (
-          <DialogHeader className="pl-4 pt-4">
+          <DialogHeader className="pl-4 py-4 border-b">
             <ShadcnDialogTitle>{title}</ShadcnDialogTitle>
           </DialogHeader>
         )}

package/src/components/Navigation/Stepper/HorizontalStepper.tsx

@@ -10,6 +10,48 @@ import {
   handleStepClick as handleStepClickUtil,
 } from './utils';
 
+/**
+ * Native HTML button component for step indicators
+ * Uses forwardRef to properly expose DOM node for positioning calculations
+ */
+interface StepIndicatorProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: 'default' | 'secondary' | 'inactive';
+  children: React.ReactNode;
+}
+
+const StepIndicator = React.forwardRef<HTMLButtonElement, StepIndicatorProps>(
+  function StepIndicator(
+    { variant = 'default', className, children, ...props },
+    ref,
+  ) {
+    const baseStyles =
+      'inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 outline-none focus-visible:ring-2 focus-visible:ring-offset-2 h-10 w-10 rounded-full duration-200';
+
+    const variantStyles = {
+      default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+      secondary:
+        'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+      inactive: 'bg-muted text-muted-foreground hover:bg-muted/80',
+    };
+
+    return (
+      <button
+        ref={ref}
+        className={cn(
+          baseStyles,
+          variantStyles[variant],
+          'cursor-pointer',
+          className,
+        )}
+        {...props}
+      >
+        {children}
+      </button>
+    );
+  },
+);
+
 const HorizontalStepper: React.FC<StepperVariantProps> = ({
   activeStep,
   steps,
@@ -19,6 +61,7 @@ const HorizontalStepper: React.FC<StepperVariantProps> = ({
 }) => {
   // Refs to track indicator positions
   const indicatorRefs = useRef<(HTMLButtonElement | null)[]>([]);
+  const stepsContainerRef = useRef<HTMLDivElement>(null);
   const [connectorPositions, setConnectorPositions] = useState<
     { left: number; width: number; top: number }[]
   >([]);
@@ -30,8 +73,9 @@ const HorizontalStepper: React.FC<StepperVariantProps> = ({
   // Calculate connector positions based on indicator refs
   useEffect(() => {
     const calculatePositions = () => {
-      if (indicatorRefs.current.length > 0) {
+      if (indicatorRefs.current.length > 1 && stepsContainerRef.current) {
         const spacing = 6; // Spacing in pixels on each side of the connector
+        const containerRect = stepsContainerRef.current.getBoundingClientRect();
 
         const positions = indicatorRefs.current
           .slice(0, -1)
@@ -43,12 +87,6 @@ const HorizontalStepper: React.FC<StepperVariantProps> = ({
             const currentRect = indicator.getBoundingClientRect();
             const nextRect =
               indicatorRefs.current[index + 1]!.getBoundingClientRect();
-            const containerRect =
-              indicator.offsetParent?.getBoundingClientRect();
-
-            if (!containerRect) {
-              return { left: 0, width: 0, top: 0 };
-            }
 
             const left = currentRect.right - containerRect.left + spacing;
             const width = nextRect.left - currentRect.right - spacing * 2;
@@ -62,14 +100,17 @@ const HorizontalStepper: React.FC<StepperVariantProps> = ({
       }
     };
 
-    // Calculate positions initially
-    calculatePositions();
+    // Use requestAnimationFrame to ensure DOM is ready
+    const animationFrameId = requestAnimationFrame(() => {
+      calculatePositions();
+    });
 
-    // Recalculate on window resize
+    // Also recalculate on window resize
     window.addEventListener('resize', calculatePositions);
 
-    // Cleanup listener on unmount
+    // Cleanup listeners on unmount
     return () => {
+      cancelAnimationFrame(animationFrameId);
       window.removeEventListener('resize', calculatePositions);
     };
   }, [steps, activeStep]);
@@ -109,12 +150,9 @@ const HorizontalStepper: React.FC<StepperVariantProps> = ({
               <ChevronLeft className="w-5 h-5" />
             </Button>
             {/* Step Indicator */}
-            <Button
-              variant={currentState === 'inactive' ? 'secondary' : 'default'}
-              className="h-8 w-8 rounded-full  duration-200"
-            >
+            <StepIndicator variant={currentState === 'inactive' ? 'secondary' : 'default'}>
               {activeStep + 1}
-            </Button>
+            </StepIndicator>
 
             {/* Next Button */}
             <Button
@@ -154,33 +192,36 @@ const HorizontalStepper: React.FC<StepperVariantProps> = ({
       </div>
 
       {/* Desktop View - All steps with connectors (md breakpoint and above) */}
-      <div className="hidden md:block">
-        <div className="flex items-start justify-between relative">
-          {steps.map((step, index) => {
-            const state = getStepState(index, activeStep);
-            const isClickable = allowNavigation && onStepClick;
-
-            return (
-              <div key={index} className="flex items-start flex-1">
-                <div className="flex flex-col items-center">
+      <div className="hidden md:block w-full">
+        <div className="relative w-full">
+          {/* Steps Row - flex-shrink-0 prevents content expansion */}
+          <div className="flex justify-between items-start gap-2 relative px-1" ref={stepsContainerRef}>
+            {steps.map((step, index) => {
+              const state = getStepState(index, activeStep);
+              const isClickable = allowNavigation && onStepClick;
+
+              return (
+                <div
+                  key={index}
+                  className="flex flex-col items-center flex-shrink-0"
+                >
                   {/* Step Indicator */}
-                  <Button
+                  <StepIndicator
                     ref={(el) => (indicatorRefs.current[index] = el)}
                     onClick={
                       isClickable ? () => handleStepClick(index) : () => {}
                     }
                     variant={state === 'inactive' ? 'secondary' : 'default'}
-                    className="h-8 w-8 rounded-full duration-200"
                   >
                     {state === 'completed' ? (
-                      <Check className="w-4 h-4" />
+                      <Check className="w-5 h-5" />
                     ) : (
                       index + 1
                     )}
-                  </Button>
+                  </StepIndicator>
 
-                  {/* Step Content */}
-                  <div className="flex flex-col gap-1 mt-3 text-center px-2">
+                  {/* Step Content - Centered below indicator */}
+                  <div className="flex flex-col gap-1 mt-3 text-center whitespace-nowrap">
                     <Typography
                       variant={state === 'inactive' ? 'muted' : 'small'}
                     >
@@ -201,26 +242,28 @@ const HorizontalStepper: React.FC<StepperVariantProps> = ({
                     )}
                   </div>
                 </div>
-              </div>
-            );
-          })}
-
-          {/* Connectors - Positioned absolutely based on calculated positions */}
-          {connectorPositions.map((position, index) => (
-            <div
-              key={`connector-${index}`}
-              className={cn(
-                'absolute h-0.5 rounded-full transition-colors duration-200',
-                getConnectorClasses(index, activeStep),
-              )}
-              style={{
-                left: `${position.left}px`,
-                width: `${position.width}px`,
-                top: `${position.top}px`,
-              }}
-              aria-hidden="true"
-            />
-          ))}
+              );
+            })}
+          </div>
+
+          {/* Connectors - Positioned absolutely based on calculated indicator positions */}
+          <div className="absolute top-0 left-0 right-0 w-full h-full pointer-events-none">
+            {connectorPositions.map((position, index) => (
+              <div
+                key={`connector-${index}`}
+                className={cn(
+                  'absolute h-0.5 rounded-full transition-colors duration-200',
+                  getConnectorClasses(index, activeStep),
+                )}
+                style={{
+                  left: `${position.left}px`,
+                  width: `${position.width}px`,
+                  top: `${position.top}px`,
+                }}
+                aria-hidden="true"
+              />
+            ))}
+          </div>
         </div>
       </div>
     </div>

package/src/components/Navigation/Stepper/VerticalStepper.tsx

@@ -1,6 +1,5 @@
 import { cn } from '@/lib/utils';
 import { Typography } from '@/shadcn-components/DataDisplay/Typography/Typography';
-import { Button } from '@/shadcn-components/Input/Button/Button';
 import { Check } from 'lucide-react';
 import React from 'react';
 import { StepperVariantProps } from './Stepper';
@@ -10,6 +9,48 @@ import {
   handleStepClick as handleStepClickUtil,
 } from './utils';
 
+/**
+ * Native HTML button component for step indicators
+ * Uses forwardRef to properly expose DOM node for positioning calculations
+ */
+interface StepIndicatorProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: 'default' | 'secondary' | 'inactive';
+  children: React.ReactNode;
+}
+
+const StepIndicator = React.forwardRef<HTMLButtonElement, StepIndicatorProps>(
+  function StepIndicator(
+    { variant = 'default', className, children, ...props },
+    ref,
+  ) {
+    const baseStyles =
+      'inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 outline-none focus-visible:ring-2 focus-visible:ring-offset-2 h-8 w-8 rounded-full duration-200';
+
+    const variantStyles = {
+      default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+      secondary:
+        'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+      inactive: 'bg-muted text-muted-foreground hover:bg-muted/80',
+    };
+
+    return (
+      <button
+        ref={ref}
+        className={cn(
+          baseStyles,
+          variantStyles[variant],
+          'cursor-pointer',
+          className,
+        )}
+        {...props}
+      >
+        {children}
+      </button>
+    );
+  },
+);
+
 const VerticalStepper: React.FC<StepperVariantProps> = ({
   activeStep,
   steps,
@@ -34,19 +75,18 @@ const VerticalStepper: React.FC<StepperVariantProps> = ({
               {/* Left side: Indicator + Connector */}
               <div className="flex flex-col items-center">
                 {/* Step Indicator */}
-                <Button
+                <StepIndicator
                   onClick={
                     isClickable ? () => handleStepClick(index) : () => {}
                   }
                   variant={state === 'inactive' ? 'secondary' : 'default'}
-                  className="h-8 w-8 rounded-full duration-200"
                 >
                   {state === 'completed' ? (
                     <Check className="w-4 h-4" />
                   ) : (
                     index + 1
                   )}
-                </Button>
+                </StepIndicator>
 
                 {/* Vertical Connector */}
                 {!isLast && (

package/src/components/Navigation/TabsContainer/TabsContainer.tsx

@@ -6,7 +6,7 @@ import {
   TabsList,
   TabsTrigger,
 } from '@/shadcn-components/Navigation/Tabs/Tabs';
-import { useEffect, useState } from 'react';
+import { CSSProperties, useEffect, useState } from 'react';
 
 /**
  * Configuration for an individual tab in TabsContainer
@@ -42,6 +42,8 @@ export interface TabsContainerProps {
   tabsListClassName?: string;
   /** Optional CSS class names for each TabsTrigger element */
   tabsTriggerClassName?: string;
+  /** Optional inline styles for the TabsContent container */
+  tabsContainerStyles?: CSSProperties;
   /** Layout variant - 'fixed' uses viewport height, 'dynamic' uses content height. Defaults to 'fixed' */
   variant?: 'fixed' | 'dynamic';
 }
@@ -61,6 +63,7 @@ export interface TabsContainerProps {
  * @param {string} [props.className] - CSS classes for the Tabs root
  * @param {string} [props.tabsListClassName] - CSS classes for the TabsList
  * @param {string} [props.tabsTriggerClassName] - CSS classes for TabsTrigger elements
+ * @param {CSSProperties} [props.tabsContainerStyles] - Inline styles for TabsContent
  * @param {'fixed' | 'dynamic'} [props.variant='fixed'] - Layout mode for tab content
  *
  * @returns {React.ReactElement} A Tabs component with tab list and content area
@@ -114,6 +117,7 @@ export const TabsContainer = ({
   className,
   tabsListClassName,
   tabsTriggerClassName,
+  tabsContainerStyles,
   variant = 'fixed',
 }: TabsContainerProps) => {
   const isSmallScreen = useMediaQuery('(max-width: 768px)');
@@ -168,6 +172,7 @@ export const TabsContainer = ({
                   ? `calc(100vh - 98px)`
                   : `calc(100vh - 80px)`
                 : 'max-content',
+            ...tabsContainerStyles,
           }}
         >
           {component}