"use client" import type * as React from "react" import { Children, createContext, useCallback, useContext, useId, useMemo, type PropsWithChildren, } from "react" import { useControllableState } from "@radix-ui/react-use-controllable-state" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" import { Button } from "@/components/ui/button" const stepIndicatorVariants = cva("flex items-center justify-center gap-2", { variants: { variant: { dots: "", pills: "", }, }, defaultVariants: { variant: "dots", }, }) const stepDotVariants = cva("rounded-full transition-all duration-200", { variants: { variant: { dots: "size-2 data-[state=active]:size-2.5 data-[state=active]:bg-foreground data-[state=completed]:bg-foreground/60 data-[state=inactive]:bg-muted-foreground/30", pills: "h-1 max-w-8 flex-1 rounded-full data-[state=active]:bg-foreground data-[state=completed]:bg-foreground/60 data-[state=inactive]:bg-muted-foreground/30", }, }, defaultVariants: { variant: "dots", }, }) export interface StepIndicatorProps extends React.ComponentPropsWithoutRef<"div">, VariantProps, VariantProps { /** Current step index (1-based) */ currentStep: number /** Total number of steps */ totalSteps: number /** Optional className for each step dot */ dotClassName?: string } /** * Headless step indicator primitive. * Renders a list of step dots with proper ARIA for progress indication. * No visual styling—consumer provides via className. */ export function StepIndicator({ currentStep, totalSteps, variant = "dots", className, dotClassName, ...props }: StepIndicatorProps) { return (

{Array.from({ length: totalSteps }, (_, i) => { const stepNumber = i + 1 const isActive = currentStep === stepNumber const isCompleted = currentStep > stepNumber let stepState: "active" | "completed" | "inactive" = "inactive" if (isActive) { stepState = "active" } else if (isCompleted) { stepState = "completed" } return (

) })}

) } // ============================================================================ // Types // ============================================================================ export interface OnboardingContextValue { /** Current step index (1-based) */ currentStep: number /** Total number of steps */ totalSteps: number /** Sub-step value (e.g. feature carousel index within step 1) */ stepValue: number /** Set current step */ setStep: (step: number | ((prev: number) => number)) => void /** Set step value (sub-step) */ setStepValue: (value: number | ((prev: number) => number)) => void /** Max step value for current step (e.g. feature count - 1) */ maxStepValue: number /** Whether user can proceed to next */ canGoNext: boolean /** Whether user can go back */ canGoBack: boolean /** Navigate to previous step */ handleBack: () => void /** Navigate to next step or advance sub-step */ handleNext: () => void /** Complete onboarding */ handleComplete: () => void /** Callback when onboarding is completed */ onComplete?: () => void } // ============================================================================ // Context // ============================================================================ const OnboardingContext = createContext(null) function useOnboarding() { const ctx = useContext(OnboardingContext) if (!ctx) { throw new Error("Onboarding components must be used within Onboarding.Root") } return ctx } // ============================================================================ // Root // ============================================================================ export interface OnboardingRootProps extends PropsWithChildren, Omit, "children"> { /** Controlled step index (1-based) */ value?: number /** Default step index (uncontrolled) */ defaultValue?: number /** Callback when step changes */ onValueChange?: (step: number) => void /** Controlled sub-step value */ stepValue?: number /** Default sub-step value (uncontrolled) */ defaultStepValue?: number /** Callback when sub-step value changes */ onStepValueChange?: (value: number) => void /** Total number of steps */ totalSteps: number /** Max sub-step value for step 1 (e.g. feature count - 1). Default 0 = no sub-steps */ maxStepValue?: number /** Callback when onboarding is completed */ onComplete?: () => void /** Custom logic for whether user can proceed. Receives (step, stepValue). Default: true */ canGoNext?: (step: number, stepValue: number) => boolean } function OnboardingRoot({ value: controlledValue, defaultValue = 1, onValueChange, stepValue: controlledStepValue, defaultStepValue = 0, onStepValueChange, totalSteps, maxStepValue: controlledMaxStepValue = 0, onComplete, canGoNext: canGoNextFn, children, className, ...props }: OnboardingRootProps) { const [currentStep, setCurrentStep] = useControllableState({ prop: controlledValue, defaultProp: defaultValue, onChange: onValueChange, }) const [stepValue, setStepValueState] = useControllableState({ prop: controlledStepValue, defaultProp: defaultStepValue, onChange: onStepValueChange, }) const maxStepValue = controlledMaxStepValue ?? 0 const canGoNext = canGoNextFn ? canGoNextFn(currentStep, stepValue) : true const canGoBack = currentStep > 1 || stepValue > 0 const handleNext = useCallback(() => { if (currentStep === 1 && stepValue < maxStepValue) { setStepValueState((prev) => prev + 1) } else if (currentStep < totalSteps) { setStepValueState(0) setCurrentStep((prev) => prev + 1) } }, [ currentStep, stepValue, maxStepValue, totalSteps, setStepValueState, setCurrentStep, ]) const handleBack = useCallback(() => { if (currentStep === 1 && stepValue > 0) { setStepValueState((prev) => prev - 1) } else if (currentStep === 2) { setCurrentStep(1) setStepValueState(maxStepValue) } else if (currentStep > 1) { setCurrentStep((prev) => prev - 1) } }, [currentStep, stepValue, maxStepValue, setStepValueState, setCurrentStep]) const handleComplete = useCallback(() => { onComplete?.() }, [onComplete]) const contextValue = useMemo( () => ({ currentStep, totalSteps, stepValue, setStep: setCurrentStep, setStepValue: setStepValueState, maxStepValue, canGoNext, canGoBack, handleBack, handleNext, handleComplete, onComplete, }), [ currentStep, totalSteps, stepValue, setCurrentStep, setStepValueState, maxStepValue, canGoNext, canGoBack, handleBack, handleNext, handleComplete, onComplete, ] ) return (

{children}

) } // ============================================================================ // Step // ============================================================================ export interface OnboardingStepProps extends React.ComponentPropsWithoutRef<"div"> { /** Step index (1-based) - content renders when currentStep matches */ step: number } function OnboardingStep({ step, children, className, ...props }: OnboardingStepProps) { const { currentStep } = useOnboarding() const isActive = currentStep === step if (!isActive) { return null } return (

{children}

) } // ============================================================================ // StepIndicator // ============================================================================ export interface OnboardingStepIndicatorProps extends Omit< React.ComponentProps, "currentStep" | "totalSteps" > {} function OnboardingStepIndicator(props: OnboardingStepIndicatorProps) { const { currentStep, totalSteps } = useOnboarding() return ( ) } // ============================================================================ // Header // ============================================================================ export interface OnboardingHeaderProps extends React.ComponentPropsWithoutRef<"div"> { /** Step title (optional when using children) */ title?: string /** Step description */ description?: string /** Custom header content (overrides title/description) */ children?: React.ReactNode } function OnboardingHeader({ title, description, children, className, ...props }: OnboardingHeaderProps) { if (children) { return (

{children}

) } return (

{title != null &&

{title}

} {description &&

{description}

}

) } // ============================================================================ // Navigation // ============================================================================ export interface OnboardingNavigationProps extends React.ComponentPropsWithoutRef<"fieldset"> { /** Back button label */ backLabel?: string /** Next button label */ nextLabel?: string /** Complete button label */ completeLabel?: string /** Override can go next (when not using Root's canGoNext) */ canGoNext?: boolean /** Custom navigation content (use with asChild for full control) */ children?: React.ReactNode } function OnboardingNavigation({ backLabel = "Back", nextLabel = "Next", completeLabel = "Start Creating", canGoNext: canGoNextOverride, children, className, ...props }: OnboardingNavigationProps) { const { currentStep, totalSteps, canGoNext: contextCanGoNext, canGoBack, handleBack, handleNext, handleComplete, } = useOnboarding() const canGoNext = canGoNextOverride ?? contextCanGoNext const isLastStep = currentStep === totalSteps if (children) { return (

{children}

) } return (

{isLastStep ? ( ) : ( )}

) } // ============================================================================ // Types // ============================================================================ type Orientation = "horizontal" | "vertical" | "grid" interface ChoiceGroupContextValue { value: string | null setValue: (value: string) => void name: string orientation: Orientation } // ============================================================================ // Context // ============================================================================ const ChoiceGroupContext = createContext(null) function useChoiceGroup() { const ctx = useContext(ChoiceGroupContext) if (!ctx) { throw new Error("ChoiceGroup.Item must be used within ChoiceGroup") } return ctx } // ============================================================================ // Root // ============================================================================ export interface ChoiceGroupProps extends Omit, "defaultValue"> { /** Controlled selected value */ value?: string | null /** Default selected value (uncontrolled) */ defaultValue?: string | null /** Callback when selection changes */ onValueChange?: (value: string) => void /** Name for radio group semantics (required for accessibility) */ name: string /** Layout orientation */ orientation?: Orientation } function ChoiceGroupRoot({ value: controlledValue, defaultValue = null, onValueChange, name, orientation = "grid", children, className, ...props }: ChoiceGroupProps) { const [value, setValueState] = useControllableState({ prop: controlledValue ?? undefined, defaultProp: defaultValue ?? null, onChange: (v) => v !== null && onValueChange?.(v), }) const setValue = useCallback( (v: string) => { setValueState(v) }, [setValueState] ) const contextValue = useMemo( () => ({ value, setValue, name, orientation, }), [value, setValue, name, orientation] ) return (

{children}

) } // ============================================================================ // Item // ============================================================================ export interface ChoiceGroupItemProps extends React.ComponentPropsWithoutRef<"label"> { /** Value when this item is selected */ value: string } function ChoiceGroupItemComponent({ value: itemValue, children, className, ...props }: ChoiceGroupItemProps) { const { value, setValue, name } = useChoiceGroup() const isSelected = value === itemValue const handleChange = useCallback( (e: React.ChangeEvent) => { if (e.currentTarget.checked) { setValue(itemValue) } }, [itemValue, setValue] ) return ( {children} ) } ChoiceGroupItemComponent.displayName = "ChoiceGroupItem" // ============================================================================ // Export // ============================================================================ export const ChoiceGroup = Object.assign(ChoiceGroupRoot, { Item: ChoiceGroupItemComponent, }) // ============================================================================ // Types // ============================================================================ interface FeatureCarouselContextValue { value: number setValue: (value: number | ((prev: number) => number)) => void totalItems: number isActive: (index: number) => boolean } // ============================================================================ // Context // ============================================================================ const FeatureCarouselContext = createContext(null) function useFeatureCarousel() { const ctx = useContext(FeatureCarouselContext) if (!ctx) { throw new Error("FeatureCarousel.Item must be used within FeatureCarousel") } return ctx } // ============================================================================ // Root // ============================================================================ export interface FeatureCarouselProps extends React.ComponentPropsWithoutRef<"div"> { /** Controlled active index */ value?: number /** Default active index (uncontrolled) */ defaultValue?: number /** Callback when active index changes */ onValueChange?: (index: number) => void /** Total number of items (derived from children if not provided) */ totalItems?: number } function FeatureCarouselRoot({ value: controlledValue, defaultValue = 0, onValueChange, totalItems: totalItemsProp, children, className, ...props }: FeatureCarouselProps) { const [value, setValue] = useControllableState({ prop: controlledValue, defaultProp: defaultValue, onChange: onValueChange, }) const totalItems = totalItemsProp ?? Children.count(children) const isActive = useCallback((index: number) => value === index, [value]) const contextValue = useMemo( () => ({ value, setValue, totalItems, isActive, }), [value, setValue, totalItems, isActive] ) return (

{children}

{title && (

{title}

)}

{children}

{number != null && ( {number} )} {children}

) } // ============================================================================ // Export // ============================================================================ export const TipsList = Object.assign(TipsListRoot, { Item: TipsListItemComponent, }) // ============================================================================ // Export // ============================================================================ export const Onboarding = Object.assign(OnboardingRoot, { Step: OnboardingStep, StepIndicator: OnboardingStepIndicator, Header: OnboardingHeader, Navigation: OnboardingNavigation, }) export { useOnboarding }

Onboarding

Instalação

Dependências

Registry dependencies