{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "ai-schema-display",
  "title": "AI: Schema Display",
  "description": "A structured schema description with properties, nested values and types.",
  "dependencies": [
    "@untitledui/icons@^0.0.23"
  ],
  "registryDependencies": [
    "@nx-ui/utils",
    "@nx-ui/badge",
    "@nx-ui/collapsible"
  ],
  "files": [
    {
      "path": "components/ai/schema-display.tsx",
      "content": "// Ported from vercel/ai-elements@6a9d5b1822ffb10bba4bd97175f01edd7d8651cd.\n\"use client\";\n\nimport { Badge } from \"@/components/ui/badge\";\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/components/ui/collapsible\";\nimport { cn } from \"@/lib/utils\";\nimport { ChevronRight as ChevronRightIcon } from \"@untitledui/icons\";\nimport type { ComponentProps, HTMLAttributes } from \"react\";\nimport { createContext, useContext, useMemo } from \"react\";\n\ntype HttpMethod = \"GET\" | \"POST\" | \"PUT\" | \"PATCH\" | \"DELETE\";\n\ninterface SchemaParameter {\n  name: string;\n  type: string;\n  required?: boolean;\n  description?: string;\n  location?: \"path\" | \"query\" | \"header\";\n}\n\ninterface SchemaProperty {\n  name: string;\n  type: string;\n  required?: boolean;\n  description?: string;\n  properties?: SchemaProperty[];\n  items?: SchemaProperty;\n}\n\ninterface SchemaDisplayContextType {\n  method: HttpMethod;\n  path: string;\n  description?: string;\n  parameters?: SchemaParameter[];\n  requestBody?: SchemaProperty[];\n  responseBody?: SchemaProperty[];\n}\n\nconst SchemaDisplayContext = createContext<SchemaDisplayContextType>({\n  method: \"GET\",\n  path: \"\",\n});\n\nconst methodStyles: Record<HttpMethod, string> = {\n  DELETE: \"bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400\",\n  GET: \"bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400\",\n  PATCH:\n    \"bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400\",\n  POST: \"bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400\",\n  PUT: \"bg-orange-100 text-orange-700 dark:bg-orange-900/30 dark:text-orange-400\",\n};\n\nexport type SchemaDisplayHeaderProps = HTMLAttributes<HTMLDivElement>;\n\nexport const SchemaDisplayHeader = ({\n  className,\n  children,\n  ...props\n}: SchemaDisplayHeaderProps) => (\n  <div\n    className={cn(\"flex items-center gap-3 border-b px-4 py-3\", className)}\n    {...props}\n  >\n    {children}\n  </div>\n);\n\nexport type SchemaDisplayMethodProps = ComponentProps<typeof Badge>;\n\nexport const SchemaDisplayMethod = ({\n  className,\n  children,\n  ...props\n}: SchemaDisplayMethodProps) => {\n  const { method } = useContext(SchemaDisplayContext);\n\n  return (\n    <Badge\n      className={cn(\"font-mono text-xs\", methodStyles[method], className)}\n      variant=\"secondary\"\n      {...props}\n    >\n      {children ?? method}\n    </Badge>\n  );\n};\n\nexport type SchemaDisplayPathProps = HTMLAttributes<HTMLSpanElement>;\n\nexport const SchemaDisplayPath = ({\n  className,\n  children,\n  ...props\n}: SchemaDisplayPathProps) => {\n  const { path } = useContext(SchemaDisplayContext);\n\n  // API paths are data, never HTML. Preserve parameter highlighting while\n  // allowing React to escape both ordinary segments and parameter names.\n  const highlightedPath = path.split(/(\\{[^}]+\\})/g).map((segment, index) =>\n    /^\\{[^}]+\\}$/.test(segment) ? (\n      <span className=\"text-primary\" key={index}>{segment}</span>\n    ) : segment\n  );\n\n  return (\n    <span\n      className={cn(\"font-mono text-sm\", className)}\n      {...props}\n    >\n      {children ?? highlightedPath}\n    </span>\n  );\n};\n\nexport type SchemaDisplayDescriptionProps =\n  HTMLAttributes<HTMLParagraphElement>;\n\nexport const SchemaDisplayDescription = ({\n  className,\n  children,\n  ...props\n}: SchemaDisplayDescriptionProps) => {\n  const { description } = useContext(SchemaDisplayContext);\n\n  return (\n    <p\n      className={cn(\n        \"border-b px-4 py-3 text-muted-foreground text-sm\",\n        className\n      )}\n      {...props}\n    >\n      {children ?? description}\n    </p>\n  );\n};\n\nexport type SchemaDisplayContentProps = HTMLAttributes<HTMLDivElement>;\n\nexport const SchemaDisplayContent = ({\n  className,\n  children,\n  ...props\n}: SchemaDisplayContentProps) => (\n  <div className={cn(\"divide-y\", className)} {...props}>\n    {children}\n  </div>\n);\n\nexport type SchemaDisplayParameterProps = HTMLAttributes<HTMLDivElement> &\n  SchemaParameter;\n\nexport const SchemaDisplayParameter = ({\n  name,\n  type,\n  required,\n  description,\n  location,\n  className,\n  ...props\n}: SchemaDisplayParameterProps) => (\n  <div className={cn(\"px-4 py-3 pl-10\", className)} {...props}>\n    <div className=\"flex items-center gap-2\">\n      <span className=\"font-mono text-sm\">{name}</span>\n      <Badge className=\"text-xs\" variant=\"outline\">\n        {type}\n      </Badge>\n      {location && (\n        <Badge className=\"text-xs\" variant=\"secondary\">\n          {location}\n        </Badge>\n      )}\n      {required && (\n        <Badge\n          className=\"bg-red-100 text-red-700 text-xs dark:bg-red-900/30 dark:text-red-400\"\n          variant=\"secondary\"\n        >\n          required\n        </Badge>\n      )}\n    </div>\n    {description && (\n      <p className=\"mt-1 text-muted-foreground text-sm\">{description}</p>\n    )}\n  </div>\n);\n\nexport type SchemaDisplayParametersProps = ComponentProps<typeof Collapsible>;\n\nexport const SchemaDisplayParameters = ({\n  className,\n  children,\n  ...props\n}: SchemaDisplayParametersProps) => {\n  const { parameters } = useContext(SchemaDisplayContext);\n\n  return (\n    <Collapsible className={cn(className)} defaultOpen {...props}>\n      <CollapsibleTrigger className=\"group flex w-full items-center gap-2 px-4 py-3 text-left transition-colors hover:bg-muted/50\">\n        <ChevronRightIcon className=\"size-4 shrink-0 text-muted-foreground transition-transform group-data-[state=open]:rotate-90\" />\n        <span className=\"font-medium text-sm\">Parameters</span>\n        <Badge className=\"ml-auto text-xs\" variant=\"secondary\">\n          {parameters?.length}\n        </Badge>\n      </CollapsibleTrigger>\n      <CollapsibleContent>\n        <div className=\"divide-y border-t\">\n          {children ??\n            parameters?.map((param) => (\n              <SchemaDisplayParameter key={param.name} {...param} />\n            ))}\n        </div>\n      </CollapsibleContent>\n    </Collapsible>\n  );\n};\n\nexport type SchemaDisplayPropertyProps = HTMLAttributes<HTMLDivElement> &\n  SchemaProperty & {\n    depth?: number;\n  };\n\nexport const SchemaDisplayProperty = ({\n  name,\n  type,\n  required,\n  description,\n  properties,\n  items,\n  depth = 0,\n  className,\n  ...props\n}: SchemaDisplayPropertyProps) => {\n  const hasChildren = properties || items;\n  const paddingLeft = 40 + depth * 16;\n\n  if (hasChildren) {\n    return (\n      <Collapsible defaultOpen={depth < 2}>\n        <CollapsibleTrigger\n          className={cn(\n            \"group flex w-full items-center gap-2 py-3 text-left transition-colors hover:bg-muted/50\",\n            className\n          )}\n          style={{ paddingLeft }}\n        >\n          <ChevronRightIcon className=\"size-4 shrink-0 text-muted-foreground transition-transform group-data-[state=open]:rotate-90\" />\n          <span className=\"font-mono text-sm\">{name}</span>\n          <Badge className=\"text-xs\" variant=\"outline\">\n            {type}\n          </Badge>\n          {required && (\n            <Badge\n              className=\"bg-red-100 text-red-700 text-xs dark:bg-red-900/30 dark:text-red-400\"\n              variant=\"secondary\"\n            >\n              required\n            </Badge>\n          )}\n        </CollapsibleTrigger>\n        {description && (\n          <p\n            className=\"pb-2 text-muted-foreground text-sm\"\n            style={{ paddingLeft: paddingLeft + 24 }}\n          >\n            {description}\n          </p>\n        )}\n        <CollapsibleContent>\n          <div className=\"divide-y border-t\">\n            {properties?.map((prop) => (\n              <SchemaDisplayProperty\n                key={prop.name}\n                {...prop}\n                depth={depth + 1}\n              />\n            ))}\n            {items && (\n              <SchemaDisplayProperty\n                {...items}\n                depth={depth + 1}\n                name={`${name}[]`}\n              />\n            )}\n          </div>\n        </CollapsibleContent>\n      </Collapsible>\n    );\n  }\n\n  return (\n    <div\n      className={cn(\"py-3 pr-4\", className)}\n      style={{ paddingLeft }}\n      {...props}\n    >\n      <div className=\"flex items-center gap-2\">\n        {/* Spacer for alignment */}\n        <span className=\"size-4\" />\n        <span className=\"font-mono text-sm\">{name}</span>\n        <Badge className=\"text-xs\" variant=\"outline\">\n          {type}\n        </Badge>\n        {required && (\n          <Badge\n            className=\"bg-red-100 text-red-700 text-xs dark:bg-red-900/30 dark:text-red-400\"\n            variant=\"secondary\"\n          >\n            required\n          </Badge>\n        )}\n      </div>\n      {description && (\n        <p className=\"mt-1 pl-6 text-muted-foreground text-sm\">{description}</p>\n      )}\n    </div>\n  );\n};\n\nexport type SchemaDisplayRequestProps = ComponentProps<typeof Collapsible>;\n\nexport const SchemaDisplayRequest = ({\n  className,\n  children,\n  ...props\n}: SchemaDisplayRequestProps) => {\n  const { requestBody } = useContext(SchemaDisplayContext);\n\n  return (\n    <Collapsible className={cn(className)} defaultOpen {...props}>\n      <CollapsibleTrigger className=\"group flex w-full items-center gap-2 px-4 py-3 text-left transition-colors hover:bg-muted/50\">\n        <ChevronRightIcon className=\"size-4 shrink-0 text-muted-foreground transition-transform group-data-[state=open]:rotate-90\" />\n        <span className=\"font-medium text-sm\">Request Body</span>\n      </CollapsibleTrigger>\n      <CollapsibleContent>\n        <div className=\"border-t\">\n          {children ??\n            requestBody?.map((prop) => (\n              <SchemaDisplayProperty key={prop.name} {...prop} depth={0} />\n            ))}\n        </div>\n      </CollapsibleContent>\n    </Collapsible>\n  );\n};\n\nexport type SchemaDisplayResponseProps = ComponentProps<typeof Collapsible>;\n\nexport const SchemaDisplayResponse = ({\n  className,\n  children,\n  ...props\n}: SchemaDisplayResponseProps) => {\n  const { responseBody } = useContext(SchemaDisplayContext);\n\n  return (\n    <Collapsible className={cn(className)} defaultOpen {...props}>\n      <CollapsibleTrigger className=\"group flex w-full items-center gap-2 px-4 py-3 text-left transition-colors hover:bg-muted/50\">\n        <ChevronRightIcon className=\"size-4 shrink-0 text-muted-foreground transition-transform group-data-[state=open]:rotate-90\" />\n        <span className=\"font-medium text-sm\">Response</span>\n      </CollapsibleTrigger>\n      <CollapsibleContent>\n        <div className=\"border-t\">\n          {children ??\n            responseBody?.map((prop) => (\n              <SchemaDisplayProperty key={prop.name} {...prop} depth={0} />\n            ))}\n        </div>\n      </CollapsibleContent>\n    </Collapsible>\n  );\n};\n\nexport type SchemaDisplayProps = HTMLAttributes<HTMLDivElement> & {\n  method: HttpMethod;\n  path: string;\n  description?: string;\n  parameters?: SchemaParameter[];\n  requestBody?: SchemaProperty[];\n  responseBody?: SchemaProperty[];\n};\n\nexport const SchemaDisplay = ({\n  method,\n  path,\n  description,\n  parameters,\n  requestBody,\n  responseBody,\n  className,\n  children,\n  ...props\n}: SchemaDisplayProps) => {\n  const contextValue = useMemo(\n    () => ({\n      description,\n      method,\n      parameters,\n      path,\n      requestBody,\n      responseBody,\n    }),\n    [description, method, parameters, path, requestBody, responseBody]\n  );\n\n  return (\n    <SchemaDisplayContext.Provider value={contextValue}>\n      <div\n        className={cn(\n          \"overflow-hidden rounded-lg border bg-background\",\n          className\n        )}\n        {...props}\n      >\n        {children ?? (\n          <>\n            <SchemaDisplayHeader>\n              <div className=\"flex items-center gap-3\">\n                <SchemaDisplayMethod />\n                <SchemaDisplayPath />\n              </div>\n            </SchemaDisplayHeader>\n            {description && <SchemaDisplayDescription />}\n            <SchemaDisplayContent>\n              {parameters && parameters.length > 0 && (\n                <SchemaDisplayParameters />\n              )}\n              {requestBody && requestBody.length > 0 && (\n                <SchemaDisplayRequest />\n              )}\n              {responseBody && responseBody.length > 0 && (\n                <SchemaDisplayResponse />\n              )}\n            </SchemaDisplayContent>\n          </>\n        )}\n      </div>\n    </SchemaDisplayContext.Provider>\n  );\n};\n\nexport type SchemaDisplayBodyProps = HTMLAttributes<HTMLDivElement>;\n\nexport const SchemaDisplayBody = ({\n  className,\n  children,\n  ...props\n}: SchemaDisplayBodyProps) => (\n  <div className={cn(\"divide-y\", className)} {...props}>\n    {children}\n  </div>\n);\n\nexport type SchemaDisplayExampleProps = HTMLAttributes<HTMLPreElement>;\n\nexport const SchemaDisplayExample = ({\n  className,\n  children,\n  ...props\n}: SchemaDisplayExampleProps) => (\n  <pre\n    className={cn(\n      \"mx-4 mb-4 overflow-auto rounded-md bg-muted p-4 font-mono text-sm\",\n      className\n    )}\n    {...props}\n  >\n    {children}\n  </pre>\n);\n",
      "type": "registry:ui",
      "target": "components/ai/schema-display.tsx"
    }
  ],
  "type": "registry:ui"
}