{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "type-table",
  "title": "Type table",
  "description": "TypeTable: a table of props or fields, each expanding to its description, full type, default, parameters and return value, and linkable from the URL hash.",
  "dependencies": [
    "class-variance-authority",
    "cn",
    "@fuma-translate/react@^1.0.2",
    "fumadocs-core@^16.17.8",
    "lucide-react"
  ],
  "registryDependencies": [
    "collapsible"
  ],
  "files": [
    {
      "path": "registry/base/docs/components/type-table.tsx",
      "content": "// Adapted from Fumadocs UI (https://github.com/fuma-nama/fumadocs)\n// Copyright (c) 2023 Fuma, MIT License\n\"use client\";\n\nimport { useTranslations } from \"@fuma-translate/react\";\nimport { cva } from \"class-variance-authority\";\nimport { cn } from \"cn\";\nimport Link from \"fumadocs-core/link\";\nimport { ChevronDown } from \"lucide-react\";\nimport {\n  type ComponentProps,\n  type ReactNode,\n  useEffect,\n  useState,\n} from \"react\";\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/components/ui/collapsible\";\n\nexport interface ParameterNode {\n  name: string;\n  description: ReactNode;\n}\n\nexport interface TypeNode {\n  /**\n   * Additional description of the field\n   */\n  description?: ReactNode;\n\n  /**\n   * type signature (short)\n   */\n  type: ReactNode;\n\n  /**\n   * type signature (full)\n   */\n  typeDescription?: ReactNode;\n\n  /**\n   * Optional `href` for the type\n   */\n  typeDescriptionLink?: string;\n\n  default?: ReactNode;\n\n  required?: boolean;\n  deprecated?: boolean;\n\n  /**\n   * a list of parameters info if the type is a function.\n   */\n  parameters?: ParameterNode[];\n\n  returns?: ReactNode;\n}\n\nconst fieldVariants = cva(\"not-docs-typeset pe-2 text-muted-foreground\");\nconst proseVariants = cva(\"text-sm *:first:mt-0 *:last:mb-0\");\n\nexport function TypeTable({\n  id,\n  type,\n  className,\n  ...props\n}: { type: Record<string, TypeNode> } & ComponentProps<\"div\">) {\n  const t = useTranslations({ note: \"type table\" });\n\n  return (\n    <div\n      id={id}\n      className={cn(\n        \"@container my-6 flex flex-col overflow-hidden rounded-2xl border bg-card p-1 text-sm text-card-foreground\",\n        className,\n      )}\n      {...props}\n    >\n      <div className=\"not-docs-typeset flex items-center px-3 py-1 font-medium text-muted-foreground\">\n        <p className=\"w-1/4\">{t(\"Prop\")}</p>\n        <p className=\"@max-xl:hidden\">{t(\"Type\")}</p>\n      </div>\n      {Object.entries(type).map(([key, value]) => (\n        <Item key={key} parentId={id} name={key} item={value} />\n      ))}\n    </div>\n  );\n}\n\nfunction Item({\n  parentId,\n  name,\n  item: {\n    parameters = [],\n    description,\n    required = false,\n    deprecated,\n    typeDescription,\n    default: defaultValue,\n    type,\n    typeDescriptionLink,\n    returns,\n  },\n}: {\n  parentId?: string;\n  name: string;\n  item: TypeNode;\n}) {\n  const t = useTranslations({ note: \"type table\" });\n  const [open, setOpen] = useState(false);\n  const id = parentId ? `${parentId}-${name}` : undefined;\n\n  // open the field the URL hash points to\n  useEffect(() => {\n    if (!id) return;\n    function openFromHash() {\n      if (window.location.hash === `#${id}`) setOpen(true);\n    }\n\n    const frame = requestAnimationFrame(openFromHash);\n    window.addEventListener(\"hashchange\", openFromHash);\n    return () => {\n      cancelAnimationFrame(frame);\n      window.removeEventListener(\"hashchange\", openFromHash);\n    };\n  }, [id]);\n\n  return (\n    <Collapsible\n      id={id}\n      open={open}\n      onOpenChange={(v) => {\n        if (v && id) {\n          window.history.replaceState(null, \"\", `#${id}`);\n        }\n        setOpen(v);\n      }}\n      className={cn(\n        \"scroll-m-20 overflow-hidden rounded-xl border transition-all\",\n        open ? \"bg-background shadow-xs not-last:mb-2\" : \"border-transparent\",\n      )}\n    >\n      <CollapsibleTrigger className=\"group not-docs-typeset relative flex w-full flex-row items-center px-3 py-2 text-start outline-none hover:bg-accent focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset\">\n        <code\n          className={cn(\n            \"w-1/4 min-w-fit pe-2 font-mono font-medium text-foreground\",\n            deprecated && \"text-muted-foreground line-through\",\n          )}\n        >\n          {name}\n          {!required && \"?\"}\n        </code>\n        {typeDescriptionLink ? (\n          <Link href={typeDescriptionLink} className=\"underline @max-xl:hidden\">\n            {type}\n          </Link>\n        ) : (\n          <span className=\"@max-xl:hidden\">{type}</span>\n        )}\n        <ChevronDown className=\"absolute inset-e-2 size-4 text-muted-foreground transition-transform group-data-panel-open:rotate-180\" />\n      </CollapsibleTrigger>\n      <CollapsibleContent>\n        <div className=\"grid [scrollbar-width:thin] grid-cols-[1fr_3fr] gap-y-4 overflow-auto border-t p-3 text-sm\">\n          <div className={cn(proseVariants(), \"col-span-full empty:hidden\")}>\n            {description}\n          </div>\n          {typeDescription && (\n            <>\n              <p className={cn(fieldVariants())}>{t(\"Type\")}</p>\n              <p className=\"not-docs-typeset my-auto\">{typeDescription}</p>\n            </>\n          )}\n          {defaultValue && (\n            <>\n              <p className={cn(fieldVariants())}>{t(\"Default\")}</p>\n              <p className=\"not-docs-typeset my-auto\">{defaultValue}</p>\n            </>\n          )}\n          {parameters.length > 0 && (\n            <>\n              <p className={cn(fieldVariants())}>{t(\"Parameters\")}</p>\n              <div className=\"flex flex-col gap-2\">\n                {parameters.map((param) => (\n                  <div\n                    key={param.name}\n                    className=\"inline-flex flex-wrap items-center gap-1\"\n                  >\n                    <p className=\"not-docs-typeset font-medium text-nowrap\">\n                      {param.name} -\n                    </p>\n                    <div className={proseVariants()}>{param.description}</div>\n                  </div>\n                ))}\n              </div>\n            </>\n          )}\n          {returns && (\n            <>\n              <p className={cn(fieldVariants())}>{t(\"Returns\")}</p>\n              <div className={cn(proseVariants(), \"my-auto\")}>{returns}</div>\n            </>\n          )}\n        </div>\n      </CollapsibleContent>\n    </Collapsible>\n  );\n}\n",
      "type": "registry:component",
      "target": "@components/docs/components/type-table.tsx"
    }
  ],
  "type": "registry:component"
}