{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "launchpad", "title": "Launchpad", "description": "First-run setup steps for the app home; the active step opens with its actions.", "dependencies": [ "lucide-react", "motion" ], "registryDependencies": [ "@ikas/animated-number", "@ikas/button", "@ikas/collapse", "@ikas/motion", "@ikas/progress-bar", "@ikas/step-kit", "@ikas/swap-text", "@ikas/utils" ], "files": [ { "path": "registry/ikas/launchpad.tsx", "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronUpIcon, XIcon } from \"lucide-react\"\nimport { AnimatePresence, motion, useReducedMotion } from \"motion/react\"\n\nimport { EASE_OUT, ICON_SPRING, INSTANT, SPRING, SPRING_EXIT, STAGGER } from \"@/lib/motion\"\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { AnimatedNumber } from \"@/components/ikas/animated-number\"\nimport { Collapse } from \"@/components/ikas/collapse\"\nimport { SwapText } from \"@/components/ikas/swap-text\"\nimport { ProgressBar, type ProgressSegmentType } from \"@/components/ikas/progress-bar\"\nimport { CheckGlyph, StepMarker, markerWidth, useStepMarkerShape, type StepMarkerShape } from \"@/components/ikas/step-kit\"\n\ntype LaunchpadStepStatus = \"todo\" | \"done\" | \"blocked\"\n\ntype LaunchpadStep = {\n id: string\n label: React.ReactNode\n /** Shown under the label while the step is active. One or two sentences. */\n description?: React.ReactNode\n /** Rough effort shown on the right, e.g. \"~2 dk\". */\n eta?: React.ReactNode\n /** Defaults to \"todo\", or \"blocked\" while a step in `requires` is not done. */\n status?: LaunchpadStepStatus\n /** Ids of steps that must be done first. */\n requires?: string[]\n /** Buttons shown while the step is active. Primary first, then one secondary. */\n actions?: React.ReactNode\n}\n\ntype LaunchpadProps = Omit, \"title\"> & {\n steps: LaunchpadStep[]\n /** The open step. Leave undefined to let the Launchpad manage it. */\n activeId?: string | null\n /** Called when a step is focused, and when the active step is completed and the next one opens. */\n onActiveChange?: (id: string) => void\n /** Called once when the last step is done. */\n onComplete?: () => void\n /** Shows only the header and the next step. Leave undefined to let the Launchpad manage it. */\n collapsed?: boolean\n onCollapsedChange?: (collapsed: boolean) => void\n /** Small label at the top left. */\n title?: React.ReactNode\n /** Shows a close button once every step is done. */\n onDismiss?: () => void\n /**\n * rail: numbered steps on a line. timeline: the rail with motion: markers draw a check, the line fills\n * down to the next step, the title is struck through. checklist: tickable rows that fold into a\n * \"Tamamlananlar\" group, with a ring in the header.\n */\n layout?: \"rail\" | \"timeline\" | \"checklist\"\n /** Step marker shape: diamond (default), circle, square or pill. Defaults to the StepMarkerProvider's. */\n marker?: StepMarkerShape\n /** Checklist only: lets the user tick a step done (or undo it). Without it, steps finish through their actions. */\n onStepToggle?: (id: string, done: boolean) => void\n /** Checklist and timeline: header title once every step is done. */\n doneTitle?: React.ReactNode\n /** Progress shown in the header: a ring, a bar or one of ProgressBar's segment types. Defaults to \"ring\" in the checklist, \"skew\" in rail and timeline. */\n progressType?: LaunchpadProgressType\n}\n\ntype LaunchpadProgressType = \"ring\" | \"bar\" | ProgressSegmentType\n\ntype ResolvedStep = LaunchpadStep & { status: LaunchpadStepStatus; index: string; waitingFor?: ResolvedStep }\n\nconst pad = (n: number) => String(n).padStart(2, \"0\")\n\nfunction resolveSteps(steps: LaunchpadStep[]): ResolvedStep[] {\n const done = new Set(steps.filter((s) => s.status === \"done\").map((s) => s.id))\n const indexOf = new Map(steps.map((s, i) => [s.id, i]))\n const resolved: ResolvedStep[] = steps.map((step, i) => ({ ...step, status: step.status ?? \"todo\", index: pad(i + 1) }))\n for (const step of resolved) {\n if (step.status === \"done\") continue\n const missing = step.requires?.find((id) => !done.has(id))\n if (missing !== undefined) {\n step.status = \"blocked\"\n const at = indexOf.get(missing)\n if (at !== undefined) step.waitingFor = resolved[at]\n }\n }\n return resolved\n}\n\n/** The step to open after `fromId`: the first open, unblocked step after it, then before it. */\nfunction nextStep(steps: ResolvedStep[], fromId?: string | null): string | null {\n const from = steps.findIndex((s) => s.id === fromId)\n const ordered = [...steps.slice(from + 1), ...steps.slice(0, Math.max(from, 0))]\n return (ordered.find((s) => s.status === \"todo\") ?? ordered.find((s) => s.status === \"blocked\"))?.id ?? null\n}\n\nconst doneIds = (key: string) => key.split(\"|\").filter(Boolean)\n\n/** Outline and core of each marker shape, drawn in a 16px box. */\nfunction NodeShape({ shape, part, ...props }: { shape: StepMarkerShape; part: \"outline\" | \"core\" } & React.SVGProps) {\n const outline = part === \"outline\"\n if (shape === \"circle\") return )} />\n if (shape === \"square\") return outline ? )} /> : )} />\n if (shape === \"pill\") return outline ? )} /> : )} />\n return )} />\n}\n\n/** Step marker: a diamond by default. Filled when done, with a core while active, dashed while blocked. */\nfunction StepNode({ status, active, shape }: { status: LaunchpadStepStatus; active: boolean; shape: StepMarkerShape }) {\n return (\n \n {status === \"done\" ? (\n \n ) : active ? (\n <>\n \n \n \n ) : (\n \n )}\n \n )\n}\n\n/** Header ring of the checklist layout: fills with the done steps; at the end it turns green and a check draws in. */\nfunction ProgressRing({ done, total, small = false }: { done: number; total: number; small?: boolean }) {\n const reduce = useReducedMotion()\n const ratio = total > 0 ? done / total : 0\n const complete = total > 0 && done === total\n return (\n \n \n \n 0 ? 1 : 0 }}\n transition={reduce ? INSTANT : { strokeDashoffset: SPRING, opacity: { duration: 0.12 } }}\n />\n \n \n {complete && (\n \n \n \n )}\n \n \n )\n}\n\n/**\n * Header progress in any type but the checklist's big ring. Bar segments stay 10px each, so the\n * strip grows with the step count; the bar gets a fixed width; points keep their own size.\n */\nfunction HeaderProgress({ type, done, total }: { type: LaunchpadProgressType; done: number; total: number }) {\n if (type === \"ring\") return \n const points = type === \"dot\" || type === \"diamond\"\n const gap = type === \"notch\" ? 2 : 3\n return (\n \n )\n}\n\n/**\n * The line between two markers: a faint dashed track, and an ink line that runs down it once the step\n * above is done. In the checklist each row draws its own half, so the line also follows rows that fold.\n */\nfunction RailSegment({ filled, delay = 0, className }: { filled: boolean; delay?: number; className?: string }) {\n const reduce = useReducedMotion()\n return (\n \n \n \n \n )\n}\n\n/** How long a ticked row stays in place before it folds into \"Tamamlananlar\". */\nconst SETTLE_MS = 100\n\n/**\n * First-run steps on the app's home screen. A vertical rail of numbered steps:\n * the active one opens in place with its actions, any step can be focused, and\n * finishing a step opens the next one. Collapses to its header and the next step.\n */\nfunction Launchpad({\n steps,\n activeId,\n onActiveChange,\n onComplete,\n collapsed,\n onCollapsedChange,\n title = \"Başlangıç\",\n onDismiss,\n layout = \"rail\",\n marker,\n onStepToggle,\n doneTitle = \"Her şey hazır\",\n progressType,\n className,\n style,\n ...props\n}: LaunchpadProps) {\n const baseId = React.useId()\n const reduce = useReducedMotion()\n const shape = useStepMarkerShape(marker)\n const listRef = React.useRef(null)\n const resolved = React.useMemo(() => resolveSteps(steps), [steps])\n const doneCount = resolved.filter((s) => s.status === \"done\").length\n const allDone = resolved.length > 0 && doneCount === resolved.length\n const doneKey = resolved.map((s) => (s.status === \"done\" ? s.id : \"\")).join(\"|\")\n const progress = progressType ?? (layout === \"checklist\" ? \"ring\" : \"skew\")\n\n // Active step: controlled through activeId, or kept here.\n const [ownActive, setOwnActive] = React.useState(() => nextStep(resolved))\n const active = activeId === undefined ? ownActive : activeId\n\n const [ownCollapsed, setOwnCollapsed] = React.useState(false)\n const isCollapsed = collapsed ?? ownCollapsed\n const setCollapsed = (value: boolean) => {\n if (collapsed === undefined) setOwnCollapsed(value)\n onCollapsedChange?.(value)\n }\n\n // When the active step is completed, open the next one. Uncontrolled: adjust during render.\n const [seenDoneKey, setSeenDoneKey] = React.useState(doneKey)\n if (seenDoneKey !== doneKey) {\n setSeenDoneKey(doneKey)\n const wasDone = new Set(doneIds(seenDoneKey))\n const justDone = ownActive !== null && !wasDone.has(ownActive) && doneIds(doneKey).includes(ownActive)\n if (activeId === undefined && (ownActive === null || justDone)) setOwnActive(nextStep(resolved, ownActive))\n }\n\n // Controlled activeId and onComplete are told from an effect, after the change has rendered.\n const latest = React.useRef({ onActiveChange, onComplete, activeId, resolved })\n React.useLayoutEffect(() => {\n latest.current = { onActiveChange, onComplete, activeId, resolved }\n })\n const previousDoneKey = React.useRef(doneKey)\n React.useEffect(() => {\n const before = new Set(doneIds(previousDoneKey.current))\n previousDoneKey.current = doneKey\n const now = doneIds(doneKey)\n const { onActiveChange: change, onComplete: complete, activeId: controlled, resolved: current } = latest.current\n if (controlled && now.includes(controlled) && !before.has(controlled)) {\n const next = nextStep(current, controlled)\n if (next) change?.(next)\n }\n if (now.length === current.length && before.size < current.length) complete?.()\n }, [doneKey])\n\n const focusStep = (id: string) => {\n if (activeId === undefined) setOwnActive(id)\n onActiveChange?.(id)\n }\n\n function onListKeyDown(event: React.KeyboardEvent) {\n const buttons = Array.from(listRef.current?.querySelectorAll(\"[data-slot=launchpad-step-trigger]\") ?? [])\n const at = buttons.indexOf(document.activeElement as HTMLButtonElement)\n if (at === -1) return\n const target =\n event.key === \"ArrowDown\" ? buttons[Math.min(at + 1, buttons.length - 1)]\n : event.key === \"ArrowUp\" ? buttons[Math.max(at - 1, 0)]\n : event.key === \"Home\" ? buttons[0]\n : event.key === \"End\" ? buttons[buttons.length - 1]\n : undefined\n if (!target) return\n event.preventDefault()\n target.focus()\n }\n\n const upNext = resolved.find((s) => s.id === active && s.status !== \"done\") ?? resolved.find((s) => s.id === nextStep(resolved))\n const listId = `${baseId}-steps`\n\n // Checklist: a ticked row stays a beat, then folds into \"Tamamlananlar\". Un-ticked rows come back at once.\n const [settled, setSettled] = React.useState(() => doneIds(doneKey))\n const [groupOpen, setGroupOpen] = React.useState(false)\n // The done list starts closed again whenever the card finishes or stops being finished.\n const [groupFor, setGroupFor] = React.useState(allDone)\n if (groupFor !== allDone) {\n setGroupFor(allDone)\n setGroupOpen(false)\n }\n const rowRefs = React.useRef(new Map())\n const focusNext = React.useRef(false)\n // An un-ticked step leaves \"Tamamlananlar\" at once: adjusted during render, not in an effect.\n const [settledFor, setSettledFor] = React.useState(doneKey)\n if (settledFor !== doneKey) {\n setSettledFor(doneKey)\n const nowDone = new Set(doneIds(doneKey))\n if (settled.some((id) => !nowDone.has(id))) setSettled(settled.filter((id) => nowDone.has(id)))\n }\n React.useEffect(() => {\n if (layout !== \"checklist\") return\n const timers = doneIds(doneKey).map((id) =>\n setTimeout(() => {\n // If focus was in the folding row, hand it to the step that opens next.\n if (rowRefs.current.get(id)?.contains(document.activeElement)) focusNext.current = true\n setSettled((current) => (current.includes(id) ? current : [...current, id]))\n }, SETTLE_MS)\n )\n return () => timers.forEach(clearTimeout)\n }, [doneKey, layout])\n React.useEffect(() => {\n if (!focusNext.current) return\n focusNext.current = false\n const next = listRef.current?.querySelector(\"[data-slot=launchpad-panel] button:not(:disabled), [data-slot=launchpad-step-trigger]\")\n next?.focus({ preventScroll: true })\n })\n\n if (layout === \"checklist\") {\n const openSteps = resolved.filter((s) => !settled.includes(s.id))\n const settledSteps = resolved.filter((s) => settled.includes(s.id))\n // Every row has folded away: the card shrinks to its header and the done list opens from there.\n const finished = allDone && openSteps.length === 0\n const rowMotion = reduce\n ? { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0, transition: { duration: 0.1 } } }\n : {\n initial: { height: 0, opacity: 0 },\n animate: { height: \"auto\", opacity: 1, transition: { height: SPRING, opacity: { duration: 0.2, delay: 0.04, ease: EASE_OUT } } },\n exit: { height: 0, opacity: 0, transition: { height: SPRING_EXIT, opacity: { duration: 0.12 } } },\n }\n return (\n \n
\n {progress === \"ring\" && }\n
\n

\n {allDone ? doneTitle : title}\n

\n

\n /{resolved.length} tamamlandı\n {finished && (\n <>\n {\" · \"}\n setGroupOpen(!groupOpen)}\n className=\"rounded-sm text-foreground underline-offset-2 outline-none hover:underline focus-visible:ring-3 focus-visible:ring-ring/30\"\n >\n {groupOpen ? \"Adımları gizle\" : \"Adımları gör\"}\n \n \n )}\n

\n
\n {progress !== \"ring\" && }\n {/* A finished card has nothing left to collapse; it keeps only the close button. */}\n {!finished && (\n setCollapsed(!isCollapsed)}\n className=\"text-icon hover:text-foreground aria-expanded:bg-transparent aria-expanded:hover:bg-muted\"\n >\n \n \n \n \n )}\n {allDone && onDismiss && (\n \n )}\n
\n\n \n {upNext && (\n (focusStep(upNext.id), setCollapsed(false))}\n className=\"flex w-full items-center gap-3 rounded-lg border border-dashed px-2.5 py-2 text-left text-sm transition-colors duration-150 outline-none hover:bg-muted/60 focus-visible:ring-3 focus-visible:ring-ring/30\"\n >\n Sıradaki\n {upNext.label}\n {upNext.eta && {upNext.eta}}\n \n )}\n \n\n \n
\n {/* When every row has folded away the list closes too, so no empty band is left between the rules. */}\n 0}>\n
    \n \n {openSteps.map((step, i) => {\n const isActive = step.id === active && !allDone\n // The line into this row is filled when the row above is done; the line out of it when this one is.\n const hasPrev = i > 0\n const hasNext = i < openSteps.length - 1\n const isDone = step.status === \"done\"\n const panelId = `${baseId}-step-${step.id}`\n const titleId = `${baseId}-title-${step.id}`\n const markerStatus = isDone ? \"done\" : step.status === \"blocked\" ? \"blocked\" : isActive ? \"current\" : \"upcoming\"\n const meta = step.status === \"blocked\" && step.waitingFor ? `${step.waitingFor.index} bitince` : step.eta\n return (\n void (el ? rowRefs.current.set(step.id, el) : rowRefs.current.delete(step.id))}\n data-status={step.status}\n className=\"relative overflow-hidden\"\n {...rowMotion}\n >\n {hasPrev && }\n {hasNext && }\n
    \n {onStepToggle ? (\n onStepToggle(step.id, !isDone)}\n className=\"grid size-[34px] place-items-center rounded-md outline-none focus-visible:ring-3 focus-visible:ring-ring/30 disabled:opacity-60 [&:active>span]:scale-90 [&>span]:transition-[scale] [&>span]:duration-100\"\n >\n \n \n ) : (\n \n \n \n )}\n
    \n focusStep(step.id)}\n className=\"flex min-h-[34px] w-full items-center gap-2 rounded-md text-left text-sm outline-none focus-visible:ring-3 focus-visible:ring-ring/30\"\n >\n {/* The strike draws left to right across each line when the step is ticked. */}\n \n {step.label}\n \n {meta && !isDone && {meta}}\n \n \n
    \n {step.description &&

    {step.description}

    }\n {step.status === \"blocked\" && step.waitingFor && (\n

    \n Önce {step.waitingFor.index} · {step.waitingFor.label} adımını tamamlayın.\n

    \n )}\n {step.actions && (\n
    \n {step.actions}\n
    \n )}\n
    \n     \n
    \n
    \n \n )\n })}\n     \n
\n \n\n 0}>\n
0 && \"border-t\")}>\n {/* Once finished, the header's \"Adımları gör\" opens the list instead of this row. */}\n \n setGroupOpen(!groupOpen)}\n className=\"flex min-h-11 w-full items-center gap-2 pr-4 pl-[52px] text-left text-[13px] text-muted-foreground outline-none focus-visible:ring-3 focus-visible:ring-ring/30 focus-visible:ring-inset\"\n >\n \n tamamlandı\n \n \n \n \n \n \n \n
    \n \n {settledSteps.map((step) => (\n \n
    \n \n \n \n {step.label}\n {onStepToggle && (\n \n )}\n
    \n     \n ))}\n     \n
\n \n
\n \n
\n \n \n {allDone ? \"Tüm adımlar tamamlandı\" : `${resolved.length} adımdan ${doneCount} tanesi tamamlandı`}\n \n \n )\n }\n\n // rail and timeline share the layout; timeline swaps in the animated parts.\n const timeline = layout === \"timeline\"\n const markerVar = timeline ? ({ \"--marker-w\": `${markerWidth(shape, \"sm\")}px`, ...style } as React.CSSProperties) : style\n return (\n \n
\n

\n \n {timeline ? (\n \n {allDone ? doneTitle : title}\n \n ) : (\n {title}\n )}\n

\n
\n \n {timeline ? : pad(doneCount)}\n /{pad(resolved.length)}\n \n \n setCollapsed(!isCollapsed)}\n className=\"-ml-1 text-icon hover:text-foreground aria-expanded:bg-transparent aria-expanded:hover:bg-muted\"\n >\n {/* Points up while open (collapse), turns to point down once collapsed (expand). */}\n \n \n \n \n {allDone && onDismiss && (\n \n )}\n
\n
\n\n {/* The up-next row opens as the list closes: two height springs, one motion. */}\n \n {upNext && (\n (focusStep(upNext.id), setCollapsed(false))}\n className=\"flex w-full items-center gap-3 rounded-lg border border-dashed px-2.5 py-2 text-left text-sm transition-colors duration-150 outline-none hover:bg-muted/60 focus-visible:ring-3 focus-visible:ring-ring/30\"\n >\n Sıradaki\n {upNext.index}\n {upNext.label}\n {upNext.eta && {upNext.eta}}\n \n )}\n \n\n \n
    \n {resolved.map((step, i) => {\n const isActive = step.id === active && !allDone\n const isLast = i === resolved.length - 1\n const panelId = `${baseId}-step-${step.id}`\n const meta =\n step.status === \"done\" ? \"tamamlandı\"\n : step.status === \"blocked\" && step.waitingFor ? `${step.waitingFor.index} bitince`\n : step.eta\n return (\n
  1. \n {!isLast && timeline && (\n \n )}\n {!isLast && !timeline && (\n \n )}\n focusStep(step.id)}\n className=\"flex w-full items-center gap-3 rounded-lg px-2.5 py-2 text-left transition-colors duration-150 outline-none hover:bg-muted/60 focus-visible:ring-3 focus-visible:ring-ring/30\"\n >\n {timeline ? (\n \n ) : (\n \n )}\n {step.index}\n {timeline ? (\n // The strike runs across the words only, not the empty space after them.\n \n \n {step.label}\n \n \n ) : (\n \n {step.label}\n \n )}\n {meta &&\n (timeline ? (\n {meta}\n ) : (\n {meta}\n ))}\n \n \n
    \n {step.description &&

    {step.description}

    }\n {step.status === \"blocked\" && step.waitingFor && (\n

    \n Önce {step.waitingFor.index} · {step.waitingFor.label} adımını tamamlayın.\n

    \n )}\n {step.actions && (\n
    \n {step.actions}\n
    \n )}\n
    \n     \n
    2. \n )\n })}\n
\n {timeline ? (\n \n

\n Tüm adımlar tamamlandı. Bu kartı kapatabilirsiniz.\n

\n \n ) : (\n allDone && (\n

\n Tüm adımlar tamamlandı. Bu kartı kapatabilirsiniz.\n

\n )\n )}\n \n \n )\n}\n\nexport { Launchpad, type LaunchpadProgressType, type LaunchpadProps, type LaunchpadStep, type LaunchpadStepStatus }\n", "type": "registry:component", "target": "@components/ikas/launchpad.tsx" } ], "docs": "https://builders.ikas.com/tr/docs/app-development/ui-kit/components/launchpad", "categories": [ "feedback", "layout" ], "type": "registry:component" }