feat(ui): novo componente, stepper

packages/ui/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@4bits/ui",
-	"version": "1.14.45",
+	"version": "1.14.46",
 	"private": false,
 	"main": "dist/index.js",
 	"module": "dist/esm/index.js",

packages/ui/src/components/ui/stepper.tsx

@@ -0,0 +1,112 @@
+import {
+	LucideCircle,
+	LucideCircleCheckBig,
+	LucideCircleDashed,
+} from "lucide-react";
+import { cn } from "../../lib/utils";
+import type { HTMLProps } from "react";
+
+export interface Step {
+	label: string;
+}
+
+export type StepperRootProps = HTMLProps<HTMLDivElement> & {
+	steps: Step[];
+	currentStepIndex: number;
+	/**
+	 * @default "vertical"
+	 */
+	direction?: "horizontal" | "vertical";
+	enumerate?: boolean;
+};
+
+export function Stepper({
+	steps,
+	currentStepIndex,
+	direction = "vertical",
+	enumerate,
+	...props
+}: StepperRootProps) {
+	function handleSteps(index: number) {
+		if (currentStepIndex === index) {
+			if (enumerate) {
+				return (
+					<div className="relative">
+						<LucideCircleDashed size={20} />
+						<div className="absolute top-0 left-0 h-5 w-5 flex justify-center items-center">
+							<span className="text-xs">{index + 1}</span>
+						</div>
+					</div>
+				);
+			}
+			return <LucideCircleDashed size={20} />;
+		}
+		if (currentStepIndex < index) {
+			if (enumerate) {
+				return (
+					<div className="relative">
+						<LucideCircle size={20} />
+						<div className="absolute top-0 left-0 h-5 w-5 flex justify-center items-center">
+							<span className="text-xs">{index + 1}</span>
+						</div>
+					</div>
+				);
+			}
+			return <LucideCircle size={20} />;
+		}
+		if (currentStepIndex > index) {
+			if (enumerate) {
+				return (
+					<div className="relative">
+						<LucideCircle size={20} />
+						<div className="absolute top-0 left-0 h-5 w-5 flex justify-center items-center">
+							<span className="text-xs">{index + 1}</span>
+						</div>
+					</div>
+				);
+			}
+			return <LucideCircleCheckBig size={20} />;
+		}
+	}
+
+	return (
+		<div {...props}>
+			<div
+				className={cn(
+					"flex gap-2",
+					direction === "vertical" ? "items-center" : "flex-col items-start",
+				)}
+			>
+				{steps.map(({ label }, index) => (
+					<>
+						{index > 0 && (
+							<hr
+								className={cn(
+									"border-none",
+									direction === "vertical"
+										? "h-px w-16"
+										: "w-px h-10 ml-[9.5px]",
+									index <= currentStepIndex
+										? "bg-blue-11 dark:bg-bluedark-11"
+										: "bg-gray-9 dark:bg-graydark-9",
+								)}
+							/>
+						)}
+						<div
+							className={cn(
+								"flex items-center justify-center gap-2",
+								index <= currentStepIndex
+									? "text-blue-11 dark:text-bluedark-11"
+									: "text-gray-9 dark:text-graydark-9",
+							)}
+							key={label}
+						>
+							{handleSteps(index)}
+							<span className="text-xs">{label}</span>
+						</div>
+					</>
+				))}
+			</div>
+		</div>
+	);
+}

packages/ui/src/index.ts

@@ -13,6 +13,7 @@ export { Tooltip } from "./components/ui/tooltip";
 export { Separator } from "./components/ui/separator";
 export { Dialog } from "./components/ui/dialog";
 export { Dropdown } from "./components/ui/dropdown";
+export { Stepper } from "./components/ui/stepper";
 export { Tabs } from "./components/ui/tabs";
 export { Card } from "./components/ui/card";
 export { Table } from "./components/ui/table";

packages/ui/src/stories/stepper.stories.tsx

@@ -0,0 +1,24 @@
+import type { Meta } from "@storybook/react";
+import { Stepper } from "src/components/ui/stepper";
+
+export default {
+	title: "Stepper",
+	component: Stepper,
+} satisfies Meta<typeof Stepper>;
+
+export const Default = () => {
+	return (
+		<Stepper
+			className="flex justify-center"
+			currentStepIndex={1}
+			direction="vertical"
+			enumerate={false}
+			steps={[
+				{ label: "Atividade" },
+				{ label: "Formulário" },
+				{ label: "Documentos" },
+				{ label: "Finalizar" },
+			]}
+		/>
+	);
+};