add steps

apps/admin.saladeaula.digital/app/components/step.tsx

@@ -0,0 +1,80 @@
+import { type ReactNode, createContext, useContext } from 'react'
+import { type LucideIcon } from 'lucide-react'
+
+import { cn } from '@repo/ui/lib/utils'
+
+type StepContextValue = {
+  activeIndex: number
+}
+
+const StepContext = createContext<StepContextValue | null>(null)
+
+function useStep() {
+  const ctx = useContext(StepContext)
+  if (!ctx) {
+    throw new Error('StepItem must be used inside <Step />')
+  }
+  return ctx
+}
+
+export function Step({
+  children,
+  className,
+  activeIndex
+}: {
+  children: ReactNode
+  className?: string
+  activeIndex: number
+}) {
+  return (
+    <StepContext.Provider value={{ activeIndex }}>
+      <ul
+        className={cn(
+          'flex max-lg:flex-col lg:items-center gap-1.5 lg:gap-4',
+          className
+        )}
+      >
+        {children}
+      </ul>
+    </StepContext.Provider>
+  )
+}
+
+export function StepSeparator() {
+  return (
+    <div className="max-lg:w-px max-lg:ml-[19px] h-3 lg:h-px lg:w-full bg-foreground/25" />
+  )
+}
+
+export function StepItem({
+  children,
+  icon: Icon,
+  index
+}: {
+  children: ReactNode
+  icon: LucideIcon
+  index: number
+}) {
+  const { activeIndex } = useStep()
+  const active = index === activeIndex
+
+  return (
+    <li
+      className={cn(
+        'flex items-center gap-2 flex-none text-muted-foreground',
+        active && 'dark:text-white'
+      )}
+    >
+      <div
+        className={cn(
+          'p-3 rounded-full',
+          active ? 'bg-primary text-white' : 'bg-accent'
+        )}
+      >
+        <Icon className="size-4" />
+      </div>
+
+      <div className="text-sm">{children}</div>
+    </li>
+  )
+}

apps/admin.saladeaula.digital/app/components/wizard.tsx

@@ -0,0 +1,76 @@
+import React, {
+  createContext,
+  useCallback,
+  useContext,
+  useMemo,
+  useState,
+  type ReactNode,
+  type ReactElement
+} from 'react'
+
+type WizardContextProps = (name: string) => void
+
+const WizardContext = createContext<WizardContextProps | null>(null)
+
+export function useWizard(): WizardContextProps {
+  const ctx = useContext(WizardContext)
+
+  if (!ctx) {
+    throw new Error('useWizard must be used within <Wizard />')
+  }
+
+  return ctx
+}
+
+type WizardProps = {
+  children: ReactNode
+  index?: number
+  onChange?: (index: number) => void
+}
+
+export function Wizard({
+  children,
+  index: initIndex = 0,
+  onChange
+}: WizardProps) {
+  const [index, setIndex] = useState<number>(initIndex)
+
+  const components = useMemo(
+    () => React.Children.toArray(children) as ReactElement<WizardStepProps>[],
+    [children]
+  )
+
+  const steps = useMemo(
+    () => components.map((child) => child.props.name),
+    [components]
+  )
+
+  const child = components[index]
+
+  const onChange_ = useCallback<WizardContextProps>(
+    (name) => {
+      const nextIndex = steps.findIndex((n) => n === name)
+
+      if (nextIndex >= 0) {
+        setIndex(nextIndex)
+        onChange?.(nextIndex)
+      }
+    },
+    [steps]
+  )
+
+  return (
+    <WizardContext.Provider value={onChange_}>
+      {React.isValidElement(child) ? React.cloneElement(child) : child}
+    </WizardContext.Provider>
+  )
+}
+
+export type WizardStepProps = {
+  name: string
+  children: React.ReactNode
+}
+
+export function WizardStep({ children }: WizardStepProps) {
+  return <>{children}</>
+}