50:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:T195e,"use client"; import { createContext, type HTMLAttributes, type ReactNode, useContext, useId, useState, } from "react"; import { cn } from "@/lib/sona-utils"; type StepperContextValue = { value: number; setValue: (value: number) => void; orientation: "horizontal" | "vertical"; }; type StepperItemContextValue = { step: number; active: boolean; id: string; }; const StepperContext = createContext(null); const StepperItemContext = createContext(null); function useStepper(component: string) { const context = useContext(StepperContext); if (!context) throw new Error(`${component} must be used within Stepper.`); return context; } function useStepperItem(component: string) { const context = useContext(StepperItemContext); if (!context) throw new Error(`${component} must be used within StepperItem.`); return context; } export interface StepperProps extends HTMLAttributes { /** Step navigation and panels. */ children: ReactNode; /** The active step in controlled mode. */ value?: number; /** The initially active step in uncontrolled mode. @default 1 */ defaultValue?: number; /** Called when a user selects a different step. */ onValueChange?: (value: number) => void; /** The direction of the step navigation. @default "horizontal" */ orientation?: "horizontal" | "vertical"; } export function Stepper({ children, value, defaultValue = 1, onValueChange, orientation = "horizontal", className, ...props }: StepperProps) { const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue); const activeValue = value ?? uncontrolledValue; const setValue = (nextValue: number) => { if (value === undefined) setUncontrolledValue(nextValue); onValueChange?.(nextValue); }; return (

{children}

); } export function StepperNav({ children, className, ...props }: HTMLAttributes) { const { orientation } = useStepper("StepperNav"); return ( ); } export interface StepperItemProps extends HTMLAttributes { /** The one-based value that identifies this step. */ step: number; /** Step trigger and optional separator. */ children: ReactNode; } export function StepperItem({ step, children, className, ...props }: StepperItemProps) { const { value } = useStepper("StepperItem"); const id = useId(); return (

{children}

); } export function StepperTrigger({ children, className, onClick, ...props }: React.ButtonHTMLAttributes) { const { setValue } = useStepper("StepperTrigger"); const { step, active, id } = useStepperItem("StepperTrigger"); return ( ); } export function StepperIndicator({ children, className, ...props }: HTMLAttributes) { const { active } = useStepperItem("StepperIndicator"); return ( {children} ); } export function StepperTitle({ children, className, ...props }: HTMLAttributes) { const { id } = useStepperItem("StepperTitle"); return ( {children} ); } export function StepperSeparator({ className }: { className?: string }) { return ( ); } export function StepperPanel({ children, className, ...props }: HTMLAttributes) { return (

{children}

); } export interface StepperContentProps extends HTMLAttributes { /** The step value associated with this panel. */ value: number; /** Keeps inactive content mounted. @default false */ forceMount?: boolean; /** Content shown for this step. */ children: ReactNode; } export function StepperContent({ value, forceMount = false, children, className, ...props }: StepperContentProps) { const { value: activeValue } = useStepper("StepperContent"); const active = activeValue === value; if (!active && !forceMount) return null; return ( ); } export default Stepper; 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L50",null,{"namespace":"@sona-ui","registryDependencies":["@sona-ui/sona-utils"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"registry/sonaui/stepper/stepper.tsx","content":"$52","type":"registry:ui","target":"components/ui/stepper/stepper.tsx"}],"className":"h-[70svh] min-h-80"}]]}]