4e: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"] 4f: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"] 50:T1e5b,import * as React from "react" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" /* ----------------------------------------------------------------------------- * Timeline (root container) * -------------------------------------------------------------------------- */ const timelineStepsVariants = cva("flex", { variants: { orientation: { vertical: "flex-col", horizontal: "flex-row overflow-x-auto", }, position: { left: "", right: "", alternate: "", }, }, defaultVariants: { orientation: "vertical", position: "left", }, }) interface TimelineStepsProps extends React.ComponentProps<"div">, VariantProps {} function TimelineSteps({ className, orientation, position, ...props }: TimelineStepsProps) { return (

) } /* ----------------------------------------------------------------------------- * TimelineItem * -------------------------------------------------------------------------- */ const timelineStepsItemVariants = cva("relative flex flex-col", { variants: { orientation: { vertical: "pb-8 last:pb-0", horizontal: "flex-1 items-center", }, status: { default: "", completed: "", current: "", upcoming: "opacity-60", }, }, defaultVariants: { orientation: "vertical", status: "default", }, }) interface TimelineStepsItemProps extends React.ComponentProps<"div">, VariantProps {} function TimelineStepsItem({ className, orientation, status, ...props }: TimelineStepsItemProps) { return (

) } /* ----------------------------------------------------------------------------- * TimelineConnector (the line connecting items) * -------------------------------------------------------------------------- */ const timelineStepsConnectorVariants = cva("", { variants: { orientation: { vertical: "absolute left-[calc(var(--timeline-steps-icon-size,2.5rem)/2)] top-[var(--timeline-steps-icon-size,2.5rem)] h-[calc(100%-var(--timeline-steps-icon-size,2.5rem))] w-px -translate-x-1/2", horizontal: "absolute top-3 left-[calc(50%+0.75rem)] h-px w-[calc(100%-1.5rem)]", }, variant: { default: "bg-border", dashed: "border-l border-dashed border-border bg-transparent", dotted: "border-l border-dotted border-border bg-transparent", }, status: { default: "", completed: "bg-primary", current: "bg-gradient-to-b from-primary to-border", upcoming: "bg-muted", }, }, defaultVariants: { orientation: "vertical", variant: "default", status: "default", }, }) interface TimelineStepsConnectorProps extends React.ComponentProps<"div">, VariantProps {} function TimelineStepsConnector({ className, orientation, variant, status, ...props }: TimelineStepsConnectorProps) { return (

) } /* ----------------------------------------------------------------------------- * TimelineHeader (contains icon and title row) * -------------------------------------------------------------------------- */ function TimelineStepsHeader({ className, ...props }: React.ComponentProps<"div">) { return

} /* ----------------------------------------------------------------------------- * TimelineStepsIcon (the dot/icon indicator) * -------------------------------------------------------------------------- */ const timelineStepsIconVariants = cva( "relative z-10 flex shrink-0 items-center justify-center rounded-full border bg-background [--timeline-steps-icon-size:2.5rem]", { variants: { size: { sm: "size-6 [--timeline-steps-icon-size:1.5rem] [&>svg]:size-3", default: "size-10 [--timeline-steps-icon-size:2.5rem] [&>svg]:size-4", lg: "size-12 [--timeline-steps-icon-size:3rem] [&>svg]:size-5", }, variant: { default: "border-border text-muted-foreground", primary: "border-primary bg-primary text-primary-foreground", secondary: "border-secondary bg-secondary text-secondary-foreground", destructive: "border-destructive bg-destructive text-destructive-foreground", outline: "border-border bg-background text-foreground", }, }, defaultVariants: { size: "default", variant: "default", }, }, ) interface TimelineStepsIconProps extends React.ComponentProps<"div">, VariantProps {} function TimelineStepsIcon({ className, size, variant, ...props }: TimelineStepsIconProps) { return (

) } /* ----------------------------------------------------------------------------- * TimelineStepsContent (container for description, time, etc.) * -------------------------------------------------------------------------- */ function TimelineStepsContent({ className, ...props }: React.ComponentProps<"div">) { return (

) } /* ----------------------------------------------------------------------------- * TimelineStepsTitle * -------------------------------------------------------------------------- */ function TimelineStepsTitle({ className, ...props }: React.ComponentProps<"div">) { return (

) } /* ----------------------------------------------------------------------------- * TimelineDescription * -------------------------------------------------------------------------- */ function TimelineStepsDescription({ className, ...props }: React.ComponentProps<"div">) { return (

) } /* ----------------------------------------------------------------------------- * TimelineStepsTime (timestamp display) * -------------------------------------------------------------------------- */ function TimelineStepsTime({ className, ...props }: React.ComponentProps<"time">) { return } /* ----------------------------------------------------------------------------- * Exports * -------------------------------------------------------------------------- */ export { TimelineSteps, TimelineStepsItem, TimelineStepsConnector, TimelineStepsHeader, TimelineStepsIcon, TimelineStepsContent, TimelineStepsTitle, TimelineStepsDescription, TimelineStepsTime, timelineStepsVariants, timelineStepsItemVariants, timelineStepsConnectorVariants, timelineStepsIconVariants, } 4d:["$","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"}]]}]}]]}],["$","$L4e",null,{"namespace":"@abui","registryDependencies":[]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"registry/abui/ui/timeline-steps.tsx","content":"$50","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]