{"$schema":"https:\/\/ui.particle.academy\/schema\/registry-item.json","name":"index-list","type":"registry:ui","title":"IndexList","description":"Numbered index list for directories and tables of contents.","package":"react-fancy","dependencies":[],"registryDependencies":[],"files":[{"path":"components\/fancy\/index-list\/IndexList.tsx","content":"import { forwardRef } from \"react\";\nimport { cn } from \"..\/..\/utils\/cn\";\nimport type { IndexListProps } from \".\/IndexList.types\";\n\n\/**\n * A flush-left numbered index \u2014 `num \u00b7 title \u00b7 meta \u00b7 trailing value`, each row\n * optionally a single clickable target.\n *\n * Thirteen gallery styles build this, and the sandbox uses a `stretched-link`\n * treatment in twenty-four places.\n *\n * ## Exactly one anchor per row, by construction\n *\n * The row is `relative` and the title's `<a>` carries `after:absolute\n * after:inset-0`, so the anchor's own pseudo-element covers the row. The\n * alternative \u2014 wrapping the row in an `<a>` and putting more links inside \u2014\n * produces nested anchors, which is issue #418: the browser silently\n * restructures that DOM, so the server HTML and the client tree disagree and\n * hydration blows up. A test asserts one anchor per row for that reason.\n *\n * The link text stays the title rather than becoming an `aria-label` on an\n * invisible overlay, so the accessible name is the thing you would say out loud.\n *\/\nexport const IndexList = forwardRef<HTMLOListElement, IndexListProps>(\n  ({ items, linkAs, className, ...props }, ref) => {\n    const Link = linkAs ?? \"a\";\n\n    return (\n      <ol ref={ref} data-react-fancy-index-list=\"\" className={cn(\"m-0 list-none p-0\", className)} {...props}>\n        {items.map((item, i) => (\n          <li\n            key={item.id ?? i}\n            data-react-fancy-index-row=\"\"\n            className=\"relative flex items-baseline gap-4 border-b border-zinc-200 py-3 last:border-b-0 dark:border-zinc-800\"\n          >\n            {item.num != null && (\n              <span data-react-fancy-index-num=\"\" className=\"shrink-0 font-mono text-xs tabular-nums text-zinc-400 dark:text-zinc-500\">\n                {item.num}\n              <\/span>\n            )}\n\n            <span data-react-fancy-index-title=\"\" className=\"min-w-0 flex-1 truncate font-medium text-zinc-900 dark:text-zinc-100\">\n              {item.href ? (\n                <Link\n                  href={item.href}\n                  className=\"no-underline after:absolute after:inset-0 after:content-[''] hover:underline\"\n                >\n                  {item.title}\n                <\/Link>\n              ) : (\n                item.title\n              )}\n            <\/span>\n\n            {item.meta != null && (\n              <span data-react-fancy-index-meta=\"\" className=\"shrink-0 truncate text-sm text-zinc-500 dark:text-zinc-400\">{item.meta}<\/span>\n            )}\n\n            {item.value != null && (\n              <span data-react-fancy-index-value=\"\" className=\"ml-auto shrink-0 font-mono text-xs tabular-nums text-zinc-500 dark:text-zinc-400\">\n                {item.value}\n              <\/span>\n            )}\n          <\/li>\n        ))}\n      <\/ol>\n    );\n  },\n);\n\nIndexList.displayName = \"IndexList\";\n","type":"registry:ui","target":"components\/fancy\/index-list\/IndexList.tsx"},{"path":"components\/fancy\/index-list\/IndexList.types.ts","content":"import type { HTMLAttributes, ReactNode } from \"react\";\n\nexport interface IndexListItem {\n  \/** Row marker \u2014 `\"01\"`, `\"1.\"`. Rendered tabular so the column aligns. *\/\n  num?: ReactNode;\n  \/** The row's subject, and the link text when `href` is set. *\/\n  title: ReactNode;\n  \/** Secondary text after the title. *\/\n  meta?: ReactNode;\n  \/** Trailing value, pushed to the far end \u2014 a year, a count. *\/\n  value?: ReactNode;\n  \/** Makes the whole row clickable. See the note on nested anchors. *\/\n  href?: string;\n  \/** Stable key. Defaults to the index. *\/\n  id?: string;\n}\n\nexport interface IndexListProps extends Omit<HTMLAttributes<HTMLOListElement>, \"children\"> {\n  items: IndexListItem[];\n  \/**\n   * Render an `<a>` for `href`. Pass your router's link (Inertia `Link`,\n   * `next\/link`) to keep client-side navigation. It receives `href`,\n   * `className` and `children`.\n   *\/\n  linkAs?: React.ElementType;\n}\n","type":"registry:ui","target":"components\/fancy\/index-list\/IndexList.types.ts"},{"path":"components\/fancy\/index-list\/index.ts","content":"export { IndexList } from \".\/IndexList\";\nexport type { IndexListProps, IndexListItem } from \".\/IndexList.types\";\n","type":"registry:ui","target":"components\/fancy\/index-list\/index.ts"}],"since":"0.5"}