Refactorización de wizards para consistencia, reusabilidad y mantenibilidad

src/components/wizard/StepWithTooltip.tsx

@@ -0,0 +1,41 @@
+import { useState } from 'react'
+
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@/components/ui/tooltip'
+
+export function StepWithTooltip({
+  title,
+  desc,
+}: {
+  title: string
+  desc: string
+}) {
+  const [isOpen, setIsOpen] = useState(false)
+
+  return (
+    <TooltipProvider delayDuration={0}>
+      <Tooltip open={isOpen} onOpenChange={setIsOpen}>
+        <TooltipTrigger asChild>
+          <span
+            className="cursor-help decoration-dotted underline-offset-4 hover:underline"
+            onClick={(e) => {
+              e.stopPropagation()
+              setIsOpen((prev) => !prev)
+            }}
+            onMouseEnter={() => setIsOpen(true)}
+            onMouseLeave={() => setIsOpen(false)}
+          >
+            {title}
+          </span>
+        </TooltipTrigger>
+        <TooltipContent className="max-w-50 text-xs">
+          <p>{desc}</p>
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  )
+}

src/components/wizard/WizardLayout.tsx

@@ -0,0 +1,52 @@
+import * as Icons from 'lucide-react'
+
+import { CardHeader, CardTitle } from '@/components/ui/card'
+import { Dialog, DialogContent } from '@/components/ui/dialog'
+
+export function WizardLayout({
+  title,
+  onClose,
+  headerSlot,
+  footerSlot,
+  children,
+}: {
+  title: string
+  onClose: () => void
+  headerSlot?: React.ReactNode
+  footerSlot?: React.ReactNode
+  children: React.ReactNode
+}) {
+  return (
+    <Dialog open={true} onOpenChange={(open) => !open && onClose()}>
+      <DialogContent
+        className="flex h-[90vh] w-[calc(100%-2rem)] flex-col gap-0 overflow-hidden p-0 sm:max-w-4xl"
+        onInteractOutside={(e) => {
+          e.preventDefault()
+        }}
+      >
+        <div className="z-10 flex-none border-b bg-white">
+          <CardHeader className="flex flex-row items-center justify-between gap-4 p-6 pb-4">
+            <CardTitle>{title}</CardTitle>
+            <button
+              onClick={onClose}
+              className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-none disabled:pointer-events-none"
+            >
+              <Icons.X className="h-4 w-4" />
+              <span className="sr-only">Cerrar</span>
+            </button>
+          </CardHeader>
+
+          {headerSlot ? <div className="px-6 pb-6">{headerSlot}</div> : null}
+        </div>
+
+        <div className="flex-1 overflow-y-auto bg-gray-50/30 p-6">
+          {children}
+        </div>
+
+        {footerSlot ? (
+          <div className="flex-none border-t bg-white p-6">{footerSlot}</div>
+        ) : null}
+      </DialogContent>
+    </Dialog>
+  )
+}

src/components/wizard/WizardResponsiveHeader.tsx

@@ -0,0 +1,59 @@
+import { CircularProgress } from '@/components/CircularProgress'
+import { StepWithTooltip } from '@/components/wizard/StepWithTooltip'
+
+export function WizardResponsiveHeader({
+  wizard,
+  methods,
+}: {
+  wizard: any
+  methods: any
+}) {
+  const idx = wizard.utils.getIndex(methods.current.id)
+  const totalSteps = wizard.steps.length
+  const currentIndex = idx + 1
+  const hasNextStep = idx < totalSteps - 1
+  const nextStep = wizard.steps[currentIndex]
+
+  return (
+    <>
+      <div className="block sm:hidden">
+        <div className="flex items-center gap-5">
+          <CircularProgress current={currentIndex} total={totalSteps} />
+          <div className="flex flex-col justify-center">
+            <h2 className="text-lg font-bold text-slate-900">
+              <StepWithTooltip
+                title={methods.current.title}
+                desc={methods.current.description}
+              />
+            </h2>
+            {hasNextStep && nextStep ? (
+              <p className="text-sm text-slate-400">
+                Siguiente: {nextStep.title}
+              </p>
+            ) : (
+              <p className="text-sm font-medium text-green-500">
+                ¡Último paso!
+              </p>
+            )}
+          </div>
+        </div>
+      </div>
+
+      <div className="hidden sm:block">
+        <wizard.Stepper.Navigation className="border-border/60 rounded-xl border bg-slate-50 p-2">
+          {wizard.steps.map((step: any) => (
+            <wizard.Stepper.Step
+              key={step.id}
+              of={step.id}
+              className="whitespace-nowrap"
+            >
+              <wizard.Stepper.Title>
+                <StepWithTooltip title={step.title} desc={step.description} />
+              </wizard.Stepper.Title>
+            </wizard.Stepper.Step>
+          ))}
+        </wizard.Stepper.Navigation>
+      </div>
+    </>
+  )
+}