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

package/dist/index.d.ts

@@ -1236,7 +1236,7 @@ interface CardProps extends Omit<React$1.ComponentProps<typeof Card$1>, 'title'
 declare const Card: React$1.ForwardRefExoticComponent<Omit<CardProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 
 declare const badgeVariants: (props?: ({
-    variant?: "default" | "secondary" | "destructive" | "outline" | null | undefined;
+    variant?: "default" | "destructive" | "outline" | "secondary" | null | undefined;
 } & class_variance_authority_dist_types.ClassProp) | undefined) => string;
 declare function Badge({ className, variant, asChild, ...props }: React$1.ComponentProps<'span'> & VariantProps<typeof badgeVariants> & {
     asChild?: boolean;
@@ -2024,7 +2024,7 @@ type TooltipProps = {
 declare const Tooltip: ({ children, title, placement, open, defaultOpen, onOpenChange, delayDuration, }: TooltipProps) => react_jsx_runtime.JSX.Element;
 
 declare const buttonVariants: (props?: ({
-    variant?: "input" | "link" | "default" | "secondary" | "destructive" | "outline" | "ghost" | null | undefined;
+    variant?: "input" | "link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | null | undefined;
     size?: "default" | "sm" | "lg" | "icon" | "icon-sm" | "icon-lg" | null | undefined;
 } & class_variance_authority_dist_types.ClassProp) | undefined) => string;
 

package/dist/styles.css

@@ -2573,6 +2573,12 @@
       border-color: var(--ring);
     }
   }
+  .focus-visible\:ring-2 {
+    &:focus-visible {
+      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    }
+  }
   .focus-visible\:ring-\[3px\] {
     &:focus-visible {
       --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
@@ -2600,6 +2606,12 @@
       }
     }
   }
+  .focus-visible\:ring-offset-2 {
+    &:focus-visible {
+      --tw-ring-offset-width: 2px;
+      --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+    }
+  }
   .focus-visible\:outline-1 {
     &:focus-visible {
       outline-style: var(--tw-outline-style);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@campxdev/react-blueprint",
-  "version": "3.0.0-alpha.7",
+  "version": "3.0.0-alpha.8",
   "description": "React UI component library for CampX applications",
   "author": "CampX",
   "license": "MIT",

package/src/components/Input/DatePicker/components/DatePickerInput.tsx

@@ -181,7 +181,7 @@ export const DatePickerInput = ({
       {/* Helper Text / Error */}
       {(helperText || error) && (
         <Typography
-          variant="small"
+          variant="muted"
           className={cn('ml-1 mt-1', error && 'text-destructive')}
         >
           {typeof error === 'string' ? error : error?.message || helperText}

package/src/components/Input/DateTimePicker/components/DateTimePickerInput.tsx

@@ -196,9 +196,7 @@ export const DateTimePickerInput = ({
               disabled={disabled}
               {...rest}
             >
-              <span>
-                {value ? formatDateTimeString(value) : placeholder}
-              </span>
+              <span>{value ? formatDateTimeString(value) : placeholder}</span>
               {Icon &&
                 cloneElement(Icon as React.ReactElement, {
                   className: 'ml-2 h-4 w-4 ',
@@ -286,7 +284,7 @@ export const DateTimePickerInput = ({
       {/* Helper Text / Error */}
       {(helperText || error) && (
         <Typography
-          variant="small"
+          variant="muted"
           className={cn('ml-1 mt-1', error && 'text-destructive')}
         >
           {typeof error === 'string' ? error : error?.message || helperText}

package/src/components/Input/PasswordField/PasswordField.tsx

@@ -129,7 +129,10 @@ export const PasswordField = ({
       label={label}
       required={required}
       name={name}
-      containerProps={containerProps}
+      containerProps={{
+        ...(fullWidth && { style: { width: '100%' } }),
+        ...containerProps,
+      }}
     >
       {content}
     </LabelWrapper>

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 && (