{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "bento-steps", "title": "Bento steps", "description": "A how-it-works section: numbered steps in Tiles joined by a connector line, with done, now and up next read out in words.", "registryDependencies": [ "utils" ], "files": [ { "path": "registry/manniche/bento-steps/bento-steps.tsx", "content": "// Bento steps: a process in three to five tiles. Each tile has a mono number (\"01\"), a title, a sentence and an\n// optional duration chip. On wide boxes the steps sit in one row; on narrow ones they stack in a vertical list with a\n// thin line joining the tiles. `current` marks where the reader is: steps before it say \"Done\" with a check mark, the\n// current one says \"Now\" with the page's one `--primary` dot and ring, and the rest are quiet.\n//\n// Screen readers: one `h2` and an ordered list (`
    `), so the count and position are announced. Each step reads\n// its number, title and sentence, then its state in words (\"Done\", \"Now\", \"Up next\"); the current step also has\n// `aria-current=\"step\"`. The check mark, dot and connecting line are hidden from them.\n// Motion: none. Nothing animates, so reduced motion changes nothing.\nimport { useId, type ComponentProps, type ReactNode } from 'react'\nimport { cn } from '@/lib/utils'\n\nexport type BentoStep = {\n /** A stable key for the step. */\n id: string\n /** The step's name, shown as an `h3`. */\n title: ReactNode\n /** One sentence about what happens in this step. */\n description: ReactNode\n /** How long the step takes, as a short chip: \"1 week\", \"2 days\". */\n duration?: string\n}\n\nexport type BentoStepsLabels = {\n /** Shown on steps before the current one. Default \"Done\". */\n done?: string\n /** Shown on the current step. Default \"Now\". */\n now?: string\n /** Read aloud before each step number. Not shown. Default \"Step\". */\n step?: string\n /** Read aloud on the steps after the current one. Not shown. Default \"Up next\". */\n upcoming?: string\n}\n\nexport type BentoStepsProps = Omit, 'children' | 'title'> & {\n /** The section's `h2`. */\n heading: ReactNode\n /** A short line under the heading. */\n intro?: ReactNode\n /** A small mono label above the heading. */\n eyebrow?: ReactNode\n /** The steps, three to five. */\n steps: readonly BentoStep[]\n /** The index (from 0) of the step that is happening now. Steps before it are done. Leave it out to show no progress. */\n current?: number\n /** Every visible and spoken string that is not content. */\n labels?: BentoStepsLabels\n}\n\nconst COLS: Record = {\n 2: '@3xl:grid-cols-2',\n 3: '@3xl:grid-cols-3',\n 4: '@3xl:grid-cols-4',\n 5: '@3xl:grid-cols-5',\n}\n\nconst DEFAULT_LABELS = { step: 'Step', done: 'Done', now: 'Now', upcoming: 'Up next' } satisfies Required\n\nexport function BentoSteps({ heading, intro, eyebrow, steps, current, labels, className, ...rest }: BentoStepsProps) {\n const headingId = useId()\n const t = { ...DEFAULT_LABELS, ...labels }\n return (\n
    \n
    \n
    \n {eyebrow &&

    {eyebrow}

    }\n \n {heading}\n \n {intro &&

    {intro}

    }\n
    \n
      \n {steps.map((s, i) => {\n const done = current !== undefined && i < current\n const now = current === i\n const state = done ? t.done : now ? t.now : null\n return (\n \n \n
      \n \n {t.step} \n {String(i + 1).padStart(2, '0')}\n \n {state ? (\n \n {done ? (\n \n \n \n ) : (\n \n )}\n {state}\n \n ) : (\n current !== undefined && {t.upcoming}\n )}\n
      \n
      \n

      {s.title}

      \n

      {s.description}

      \n
      \n {s.duration && (\n \n {s.duration}\n \n )}\n
    \n \n )\n })}\n
\n \n \n )\n}\n", "type": "registry:component" } ], "categories": [ "templates" ], "type": "registry:block" }