@reactberry/system 2.0.0-beta

package/src/blocks/Steps/StepIndicator.tsx

@@ -0,0 +1,149 @@
+"use client";
+
+import React from "react";
+import { motion } from "motion/react";
+import { Box, Text } from "@/design-system/elements";
+import Tooltip from "@/design-system/blocks/Tooltip";
+import { useHover } from "./hooks";
+import { StepThemeConfig } from "./types";
+import { IconDCheck } from "@/design-system/icons";
+
+interface StepIndicatorProps {
+  /** Whether this step is currently active */
+  active: boolean;
+  /** The step number (1-based) */
+  index: number;
+  /** The label text for this step */
+  label: string;
+  /** Whether this step is completed */
+  completed: boolean;
+  /** Theme configuration */
+  variant: StepThemeConfig;
+  /** Whether to use simple mode (no numbers/icons) */
+  simple?: boolean;
+  /** Whether to show labels */
+  showLabels?: boolean;
+  /** Whether to show tooltips on hover */
+  showTooltip?: boolean;
+  /** Callback when step is clicked */
+  setActive?: (index: number) => void;
+  /** Additional props */
+  [key: string]: any;
+}
+
+interface DotProps {
+  state: {
+    bg: string;
+    color: string;
+  };
+  variant: StepThemeConfig;
+  active: boolean;
+  children: React.ReactNode;
+}
+
+function Dot({ state, variant, active, children }: DotProps) {
+  return (
+    <Box
+      as={motion.div}
+      bg={state.bg}
+      color={state.color}
+      border=".25rem solid"
+      borderColor={variant.borderColor}
+      shape="circle"
+      flex="none"
+      width={`${parseFloat(variant.size) * 8}${variant.unit}`}
+      height={`${parseFloat(variant.size) * 8}${variant.unit}`}
+      display="flex"
+      alignItems="center"
+      justifyContent="center"
+      initial={{ scale: 0.75 }}
+      animate={{ scale: active ? 1.125 : 0.75 }}
+      exit={{ scale: 0.75 }}
+      // transition={{ type: "spring", stiffness: 500 }}
+      style={{ pointerEvents: "none" }}
+    >
+      {children}
+    </Box>
+  );
+}
+
+function StepIndicator({
+  active,
+  index,
+  label,
+  completed,
+  variant,
+  simple = false,
+  showLabels = true,
+  showTooltip = true,
+  setActive,
+  ...rest
+}: StepIndicatorProps) {
+  const [hoverRef, isHovered] = useHover();
+
+  const getCurrentTheme = () => {
+    if (active) {
+      return variant.presets.active;
+    }
+    if (completed) {
+      return variant.presets.completed;
+    }
+    return variant.presets.default;
+  };
+
+  const currentTheme = getCurrentTheme();
+
+  const handleClick = () => {
+    if (setActive) {
+      setActive(index - 1); // Convert to 0-based index
+    }
+  };
+
+  const stepContent = (
+    <Box
+      display="flex"
+      alignItems="center"
+      flexDirection="column"
+      flex={active ? "auto" : "none"}
+      mx="auto"
+      position="relative"
+      zIndex={isHovered ? 3 : 2}
+      cursor={setActive ? "pointer" : "default"}
+      onClick={handleClick}
+      {...rest}
+      ref={hoverRef}
+    >
+      <Dot active={active} variant={variant} state={currentTheme}>
+        {!simple && active && (
+          <Text fontSize={variant.fontSize} color="inherit">
+            {index}
+          </Text>
+        )}
+        {!simple && completed && (
+          <Box as={IconDCheck} size="1.5rem" color="inherit" />
+        )}
+      </Dot>
+
+      {showLabels && (
+        <Text
+          fontWeight="700"
+          fontSize={variant.fontSize}
+          display={["none", "flex"]}
+          color={active ? variant.baseColor : variant.textColor}
+          textAlign="center"
+          mt="xxs"
+        >
+          {label}
+        </Text>
+      )}
+    </Box>
+  );
+
+  if (showTooltip) {
+    return <Tooltip content={label}>{stepContent}</Tooltip>;
+  }
+
+  return stepContent;
+}
+
+export default StepIndicator;

package/src/blocks/Steps/StepProgress.tsx

@@ -0,0 +1,164 @@
+"use client";
+
+import React from "react";
+import { Box } from "@/design-system/elements";
+import StepIndicator from "./StepIndicator";
+import { BaseStepProps, StepThemeConfig, StepVariant } from "./types";
+
+interface StepProgressProps extends BaseStepProps {
+  /** Index of the completed step (all steps up to this index are completed) */
+  completed?: number;
+}
+
+const defaultThemeConfig: Record<StepVariant, StepThemeConfig> = {
+  light: {
+    baseColor: "primary",
+    textColor: "secondary",
+    borderColor: "white",
+    trackColor: "tertiary",
+    completedTrackColor: "accent",
+    size: "0.3",
+    unit: "rem",
+    fontSize: "small",
+    presets: {
+      active: {
+        bg: "accent",
+        color: "white",
+      },
+      completed: {
+        bg: "accent",
+        color: "white",
+      },
+      default: {
+        bg: "tertiary",
+        color: "secondary",
+      },
+    },
+  },
+  dark: {
+    baseColor: "primary",
+    textColor: "secondary",
+    borderColor: "tertiary",
+    trackColor: "secondary",
+    completedTrackColor: "brand",
+    size: "0.3",
+    unit: "rem",
+    fontSize: "small",
+    presets: {
+      active: {
+        bg: "white",
+        color: "primary",
+      },
+      completed: {
+        bg: "primary",
+        color: "white",
+      },
+      default: {
+        bg: "secondary",
+        color: "white",
+      },
+    },
+  },
+};
+
+function StepProgress({
+  config,
+  active,
+  variant = "light",
+  skin,
+  simple = false,
+  showLabels = true,
+  showEdges = true,
+  showTooltip = true,
+  childProps,
+  setActive,
+  ...rest
+}: StepProgressProps) {
+  const currentTheme = skin || defaultThemeConfig[variant];
+
+  // Calculate the progress width based on active step
+  const progressWidth = `${
+    (active + 1) * (100 / config.length) - 100 / (config.length * 2)
+  }%`;
+
+  return (
+    <Box
+      display="grid"
+      gridTemplateColumns={`repeat(${config.length}, 1fr)`}
+      position="relative"
+      alignItems="center"
+      width="100%"
+      {...rest}
+    >
+      {/* Step Indicators */}
+      {config.map((item, i) => (
+        <StepIndicator
+          key={i}
+          active={active === i}
+          index={i + 1}
+          completed={active > i}
+          showLabels={showLabels}
+          showTooltip={showTooltip}
+          variant={currentTheme}
+          simple={simple}
+          setActive={setActive}
+          {...item}
+          {...childProps}
+        />
+      ))}
+
+      {/* Edge Circles */}
+      {showEdges && (
+        <>
+          <Box
+            size="1rem"
+            shape="circle"
+            bg={currentTheme.presets.default.bg}
+            border="3px solid"
+            borderColor={currentTheme.borderColor}
+            position="absolute"
+            top="50%"
+            left="-1px"
+            mt="-1.375rem"
+            zIndex={1}
+          />
+          <Box
+            width="1rem"
+            height="1rem"
+            shape="circle"
+            bg={currentTheme.presets.default.bg}
+            border="3px solid"
+            borderColor={currentTheme.borderColor}
+            position="absolute"
+            top="50%"
+            right="0"
+            mt="-1.375rem"
+            zIndex={1}
+          />
+        </>
+      )}
+
+      {/* Progress Track */}
+      <Box
+        width="100%"
+        height={`${currentTheme.size}${currentTheme.unit}`}
+        bg={currentTheme.trackColor}
+        shape="pill"
+        position="absolute"
+        top="50%"
+        mt="-1rem"
+        zIndex={0}
+      >
+        {/* Completed Progress */}
+        <Box
+          width={progressWidth}
+          height="100%"
+          bg={currentTheme.completedTrackColor}
+          shape="pill"
+        />
+      </Box>
+    </Box>
+  );
+}
+
+export default StepProgress;

package/src/blocks/Steps/Steps.tsx

@@ -0,0 +1,197 @@
+"use client";
+
+import React from "react";
+import { Box, Text } from "@/design-system/elements";
+import StepProgress from "./StepProgress";
+import { BaseStepProps } from "./types";
+import { useStepNavigation } from "./hooks";
+
+interface StepsProps extends Omit<BaseStepProps, "active"> {
+  /** Initial active step (0-based) */
+  initialStep?: number;
+  /** Whether navigation is controlled externally */
+  controlled?: boolean;
+  /** Current active step when controlled */
+  activeStep?: number;
+  /** Callback when step changes */
+  onStepChange?: (step: number) => void;
+  /** Whether to show navigation buttons */
+  showNavigation?: boolean;
+  /** Custom labels for navigation buttons */
+  navigationLabels?: {
+    next?: string;
+    previous?: string;
+    finish?: string;
+  };
+  /** Whether steps can be clicked to navigate */
+  allowStepClick?: boolean;
+  /** Validation function for step navigation */
+  validateStep?: (
+    fromStep: number,
+    toStep: number
+  ) => boolean | Promise<boolean>;
+  /** Loading state */
+  loading?: boolean;
+  /** Callback when all steps are completed */
+  onComplete?: () => void;
+}
+
+function Steps({
+  config,
+  initialStep = 0,
+  controlled = false,
+  activeStep: controlledActiveStep,
+  onStepChange,
+  showNavigation = false,
+  navigationLabels = {
+    next: "Next",
+    previous: "Previous",
+    finish: "Finish",
+  },
+  allowStepClick = true,
+  validateStep,
+  loading = false,
+  onComplete,
+  variant = "light",
+  skin,
+  simple = false,
+  showLabels = true,
+  showEdges = true,
+  showTooltip = true,
+  childProps,
+  ...rest
+}: StepsProps) {
+  const {
+    activeStep: internalActiveStep,
+    nextStep,
+    prevStep,
+    goToStep,
+    isFirst,
+    isLast,
+  } = useStepNavigation(config.length, initialStep);
+
+  const activeStep = controlled
+    ? controlledActiveStep ?? 0
+    : internalActiveStep;
+
+  const handleStepChange = async (newStep: number) => {
+    if (validateStep) {
+      const isValid = await validateStep(activeStep, newStep);
+      if (!isValid) return;
+    }
+
+    if (controlled) {
+      onStepChange?.(newStep);
+    } else {
+      goToStep(newStep);
+      onStepChange?.(newStep);
+    }
+  };
+
+  const handleNext = async () => {
+    if (isLast && onComplete) {
+      onComplete();
+      return;
+    }
+
+    if (controlled) {
+      onStepChange?.(activeStep + 1);
+    } else {
+      const newStep = activeStep + 1;
+      if (validateStep) {
+        const isValid = await validateStep(activeStep, newStep);
+        if (!isValid) return;
+      }
+      nextStep();
+      onStepChange?.(newStep);
+    }
+  };
+
+  const handlePrevious = () => {
+    if (controlled) {
+      onStepChange?.(activeStep - 1);
+    } else {
+      prevStep();
+      onStepChange?.(activeStep - 1);
+    }
+  };
+
+  const handleStepClick = allowStepClick ? handleStepChange : undefined;
+
+  return (
+    <Box display="flex" flexDirection="column" gap="large">
+      {/* Step Progress */}
+      <StepProgress
+        config={config}
+        active={activeStep}
+        setActive={handleStepClick}
+        variant={variant}
+        skin={skin}
+        simple={simple}
+        showLabels={showLabels}
+        showEdges={showEdges}
+        showTooltip={showTooltip}
+        childProps={childProps}
+        {...rest}
+      />
+
+      {/* Navigation Buttons */}
+      {showNavigation && (
+        <Box
+          display="flex"
+          justifyContent="space-between"
+          alignItems="center"
+          gap="medium"
+        >
+          <Box>
+            {!isFirst && (
+              <Box
+                as="button"
+                skin="default"
+                px="medium"
+                py="small"
+                shape="pill"
+                cursor="pointer"
+                disabled={loading}
+                onClick={handlePrevious}
+              >
+                <Text fontSize="small" color="inherit">
+                  {navigationLabels.previous}
+                </Text>
+              </Box>
+            )}
+          </Box>
+
+          <Box display="flex" gap="small">
+            {/* Step Counter */}
+            <Text fontSize="small" color="secondary">
+              {activeStep + 1} of {config.length}
+            </Text>
+          </Box>
+
+          <Box>
+            <Box
+              as="button"
+              px="medium"
+              py="small"
+              shape="pill"
+              cursor="pointer"
+              disabled={loading}
+              onClick={handleNext}
+            >
+              <Text fontSize="small" color="inherit">
+                {loading
+                  ? "Loading..."
+                  : isLast
+                  ? navigationLabels.finish
+                  : navigationLabels.next}
+              </Text>
+            </Box>
+          </Box>
+        </Box>
+      )}
+    </Box>
+  );
+}
+
+export default Steps;

package/src/blocks/Steps/StepsNav.tsx

@@ -0,0 +1,30 @@
+"use client";
+
+import React from 'react';
+import StepProgress from './StepProgress';
+import { BaseStepProps } from './types';
+
+interface StepsNavProps extends BaseStepProps {
+  /** Additional margin top spacing */
+  mt?: string | number | object;
+}
+
+function StepsNav({
+  config,
+  active,
+  mt = "medium",
+  showLabels = true,
+  ...rest
+}: StepsNavProps) {
+  return (
+    <StepProgress
+      showLabels={showLabels}
+      config={config}
+      active={active}
+      mt={mt}
+      {...rest}
+    />
+  );
+}
+
+export default StepsNav;

package/src/blocks/Steps/StepsTracker.tsx

@@ -0,0 +1,80 @@
+"use client";
+
+import React from "react";
+import { Box } from "@/design-system/elements";
+
+import Tooltip from "../Tooltip";
+import { motion } from "motion/react";
+
+interface StepsTrackerProps {
+  /** Index of the completed step (all steps up to this index are completed) */
+  completed?: number;
+  config: { label: string }[];
+}
+
+interface TrackSegmentProps {
+  isCompleted: boolean;
+}
+
+interface TrackStepProps {
+  isCompleted: boolean;
+  isActive?: boolean;
+  item: { label: string };
+}
+
+function TrackStep({ isCompleted, isActive, item }: TrackStepProps) {
+  return (
+    <Tooltip content={item.label} placement="bottom" zIndex={100003}>
+      <Box
+        as={motion.div}
+        flex="none"
+        bg={isCompleted ? "accent" : "tertiary"}
+        shape="circle"
+        size="1rem"
+        display="flex"
+        alignItems="center"
+        justifyContent="center"
+        initial={{ scale: 0.85 }}
+        animate={{ scale: isActive ? 1.125 : 0.85 }}
+        exit={{ scale: 0.85 }}
+        whileHover={{ scale: 1.125 }}
+        //style={{ pointerEvents: "none" }}
+      />
+    </Tooltip>
+  );
+}
+
+function TrackSegment({ isCompleted }: TrackSegmentProps) {
+  return (
+    <Box
+      flex="auto"
+      height="0.25rem"
+      bg={isCompleted ? "accent" : "tertiary"}
+      shape="pill"
+      alignSelf="center"
+    />
+  );
+}
+
+function StepsTracker({ config, completed = 0, ...rest }: StepsTrackerProps) {
+  return (
+    <Box display="flex" alignItems="flex-start" gap="xs" width="100%" {...rest}>
+      {config.map((item, i) => (
+        <React.Fragment key={i}>
+          {/* Step Indicator */}
+          <TrackStep
+            item={item}
+            isCompleted={completed >= i}
+            isActive={completed === i}
+          />
+          {/* Track Segment (if not the last step) */}
+          {i < config.length - 1 && (
+            <TrackSegment isCompleted={completed >= i + 1} />
+          )}
+        </React.Fragment>
+      ))}
+    </Box>
+  );
+}
+
+export default StepsTracker;

package/src/blocks/Steps/hooks.ts

@@ -0,0 +1,71 @@
+"use client";
+
+import { useCallback, useEffect, useRef, useState } from "react";
+
+/**
+ * Custom hook for managing hover state on an element
+ * @returns A tuple with [ref, isHovered] where ref should be attached to the element
+ */
+export function useHover(): [React.RefObject<HTMLElement | null>, boolean] {
+  const [isHovered, setIsHovered] = useState(false);
+  const ref = useRef<HTMLElement | null>(null);
+
+  const handleMouseEnter = useCallback(() => setIsHovered(true), []);
+  const handleMouseLeave = useCallback(() => setIsHovered(false), []);
+
+  useEffect(() => {
+    const node = ref.current;
+    if (node) {
+      node.addEventListener("mouseenter", handleMouseEnter);
+      node.addEventListener("mouseleave", handleMouseLeave);
+
+      return () => {
+        node.removeEventListener("mouseenter", handleMouseEnter);
+        node.removeEventListener("mouseleave", handleMouseLeave);
+      };
+    }
+  }, [handleMouseEnter, handleMouseLeave]);
+
+  return [ref, isHovered];
+}
+
+/**
+ * Custom hook for managing step navigation
+ * @param totalSteps Total number of steps
+ * @param initialStep Initial active step (0-based)
+ */
+export function useStepNavigation(totalSteps: number, initialStep = 0) {
+  const [activeStep, setActiveStep] = useState(initialStep);
+
+  const nextStep = useCallback(() => {
+    setActiveStep((prev) => Math.min(prev + 1, totalSteps - 1));
+  }, [totalSteps]);
+
+  const prevStep = useCallback(() => {
+    setActiveStep((prev) => Math.max(prev - 1, 0));
+  }, []);
+
+  const goToStep = useCallback(
+    (step: number) => {
+      if (step >= 0 && step < totalSteps) {
+        setActiveStep(step);
+      }
+    },
+    [totalSteps]
+  );
+
+  const isFirst = activeStep === 0;
+  const isLast = activeStep === totalSteps - 1;
+  const progress = totalSteps > 0 ? ((activeStep + 1) / totalSteps) * 100 : 0;
+
+  return {
+    activeStep,
+    nextStep,
+    prevStep,
+    goToStep,
+    isFirst,
+    isLast,
+    progress,
+    setActiveStep,
+  };
+}

package/src/blocks/Steps/index.tsx

@@ -0,0 +1,16 @@
+"use client";
+
+export { default as StepProgress } from "./StepProgress";
+export { default as StepIndicator } from "./StepIndicator";
+export { default as StepsNav } from "./StepsNav";
+export { default as Steps } from "./Steps";
+export { useHover, useStepNavigation } from "./hooks";
+export type {
+  StepConfig,
+  StepThemeConfig,
+  StepVariant,
+  BaseStepProps,
+} from "./types";
+
+// Default export is the comprehensive Steps component
+export { default } from "./Steps";