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:T2087,"use client"; import * as React from "react"; import { mergeProps } from "@base-ui/react/merge-props"; import { useRender } from "@base-ui/react/use-render"; import { cva, type VariantProps } from "class-variance-authority"; import { cn } from "@/lib/utils"; const timelineVariants = cva("group/timeline flex", { variants: { orientation: { horizontal: "w-full flex-row", vertical: "flex-col", }, }, defaultVariants: { orientation: "vertical", }, }); const timelineIndicatorVariants = cva( "absolute flex items-center justify-center rounded-full border-2 transition-all duration-200 size-6", { variants: { state: { pending: "border-border/80 bg-muted shadow-[0_1px_2px_0_oklch(0.18_0_0_/_0.08)]", current: "border-primary bg-primary/5 outline-2 outline-primary/20 outline-offset-2 shadow-[0_1px_2px_0_oklch(0.18_0_0_/_0.08)]", completed: "border-primary bg-primary text-primary-foreground shadow-[0_1px_2px_0_oklch(0.18_0_0_/_0.08)]", }, }, defaultVariants: { state: "pending", }, }, ); const timelineSeparatorVariants = cva( "absolute bg-border transition-all duration-200 group-last/timeline-item:hidden", { variants: { orientation: { horizontal: "h-0.5 w-[calc(100%-2rem)] -top-6 left-7 -translate-y-1/2", vertical: "w-0.5 h-[calc(100%-2rem)] -left-6 top-7 -translate-x-1/2", }, state: { pending: "bg-border", completed: "bg-primary/40", }, }, defaultVariants: { orientation: "vertical", state: "pending", }, }, ); type TimelineContextValue = { activeStep: number; setActiveStep: (step: number) => void; orientation: "horizontal" | "vertical"; }; const TimelineContext = React.createContext( undefined, ); const TimelineItemContext = React.createContext<{ step: number } | undefined>( undefined, ); const useTimeline = () => { const context = React.useContext(TimelineContext); if (!context) { throw new Error("useTimeline must be used within a Timeline"); } return context; }; type RenderFunction = ( props: T, ref: React.Ref, ) => React.ReactElement | null; interface TimelineProps extends useRender.ComponentProps<"div">, VariantProps { defaultValue?: number; value?: number; onValueChange?: (value: number) => void; } function Timeline({ defaultValue = 1, value, onValueChange, orientation = "vertical", className, render, ...props }: TimelineProps) { const [activeStep, setInternalStep] = React.useState(defaultValue); const setActiveStep = React.useCallback( (step: number) => { if (value === undefined) { setInternalStep(step); } onValueChange?.(step); }, [value, onValueChange], ); const currentStep = value ?? activeStep; const defaultProps = { className: cn( timelineVariants({ orientation: orientation || "vertical" }), className, ), "data-orientation": orientation, "data-slot": "timeline", }; const element = useRender({ defaultTagName: "div", render, props: mergeProps<"div">(defaultProps, props), }); return ( {element} ); } interface TimelineContentProps extends React.HTMLAttributes { render?: RenderFunction>; } function TimelineContent({ className, render, ...props }: TimelineContentProps) { const contentProps = mergeProps(props, { className: cn("text-muted-foreground text-sm leading-relaxed", className), "data-slot": "timeline-content", }); return render ? render(contentProps, null) :

; } interface TimelineDateProps extends React.HTMLAttributes { render?: RenderFunction>; } function TimelineDate({ className, render, ...props }: TimelineDateProps) { const dateProps = mergeProps(props, { className: cn( "text-muted-foreground mb-1 block text-xs font-medium tabular-nums", className, ), "data-slot": "timeline-date", }); return render ? render(dateProps, null) : ; } interface TimelineHeaderProps extends React.HTMLAttributes { render?: RenderFunction>; } function TimelineHeader({ className, render, ...props }: TimelineHeaderProps) { const headerProps = mergeProps(props, { className: cn(className), "data-slot": "timeline-header", }); return render ? render(headerProps, null) :

; } interface TimelineIndicatorProps extends React.HTMLAttributes { render?: RenderFunction>; } function TimelineIndicator({ className, children, render, ...props }: TimelineIndicatorProps) { const { orientation, activeStep } = useTimeline(); const currentItem = React.useContext(TimelineItemContext); const state = currentItem ? currentItem.step < activeStep ? "completed" : currentItem.step === activeStep ? "current" : "pending" : "pending"; const indicatorProps = mergeProps(props, { className: cn( timelineIndicatorVariants({ state }), (orientation || "vertical") === "horizontal" ? "-top-6 left-0 -translate-y-1/2" : "top-0 -left-6 -translate-x-1/2", className, ), "aria-hidden": "true", "data-slot": "timeline-indicator", "data-state": state, }); return render ? ( render(indicatorProps, null) ) : (

{children}

); } interface TimelineItemProps extends React.HTMLAttributes { step: number; render?: RenderFunction>; } function TimelineItem({ step, className, render, ...props }: TimelineItemProps) { const { activeStep, orientation } = useTimeline(); const isCompleted = step <= activeStep; const isCurrent = step === activeStep; const itemProps = mergeProps(props, { className: cn( "group/timeline-item relative flex flex-1 flex-col gap-2", orientation === "horizontal" ? "mt-8 not-last:pe-8" : "ms-8 not-last:pb-16", className, ), "data-completed": isCompleted || undefined, "data-current": isCurrent || undefined, "data-slot": "timeline-item", }); return ( {render ? render(itemProps, null) :

} ); } interface TimelineSeparatorProps extends React.HTMLAttributes { render?: RenderFunction>; } function TimelineSeparator({ className, render, ...props }: TimelineSeparatorProps) { const { orientation, activeStep } = useTimeline(); const currentItem = React.useContext(TimelineItemContext); const isCompleted = currentItem ? currentItem.step < activeStep : false; const state = isCompleted ? "completed" : "pending"; const separatorProps = mergeProps(props, { className: cn( timelineSeparatorVariants({ orientation: orientation || "vertical", state, }), className, ), "aria-hidden": "true", "data-slot": "timeline-separator", "data-state": state, }); return render ? render(separatorProps, null) :

; } interface TimelineTitleProps extends React.HTMLAttributes { render?: RenderFunction>; } function TimelineTitle({ className, render, ...props }: TimelineTitleProps) { const titleProps = mergeProps(props, { className: cn("text-sm font-semibold leading-none", className), "data-slot": "timeline-title", }); return render ? render(titleProps, null) :

; } export { Timeline, TimelineContent, TimelineDate, TimelineHeader, TimelineIndicator, TimelineItem, TimelineSeparator, TimelineTitle, }; 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":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","class-variance-authority",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/class-variance-authority","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"class-variance-authority"}]]}]}]]}],["$","$L50",null,{"namespace":"@cubby-ui","registryDependencies":[]}]]}],null]}],["$","$L51",null,{"files":[{"path":"registry/default/timeline/timeline.tsx","content":"$52","type":"registry:ui","target":"components/ui/cubby-ui/timeline.tsx"}],"className":"h-[70svh] min-h-80"}]]}]