{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "inspector",
  "title": "Inspector",
  "description": "An inspector pane like Xcode's or Pages': sections of right-aligned labels beside small controls.",
  "registryDependencies": [
    "@cupertinoui/macos-theme"
  ],
  "files": [
    {
      "path": "registry/macos/ui/inspector.tsx",
      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\n// An inspector pane, like the ones on the right of Xcode, Pages and Keynote:\n// sections of rows, each a right-aligned label beside its controls, in the\n// 11pt text of inspectors. Use the small sizes of controls inside it. Set\n// --inspector-label-width to change the width of the labels.\nfunction Inspector({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"inspector\"\n      className={cn(\n        \"flex min-w-0 flex-col overflow-y-auto text-mac-subheadline text-mac-label\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction InspectorSection({ className, ...props }: React.ComponentProps<\"section\">) {\n  return (\n    <section\n      data-slot=\"inspector-section\"\n      className={cn(\n        \"flex flex-col gap-1.5 border-b border-mac-separator px-3 pt-2.5 pb-3 last:border-b-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction InspectorSectionTitle({ className, ...props }: React.ComponentProps<\"h3\">) {\n  return (\n    <h3\n      data-slot=\"inspector-section-title\"\n      className={cn(\"font-semibold text-mac-label-secondary\", className)}\n      {...props}\n    />\n  )\n}\n\n// An InspectorLabel and its controls. Without a label, the controls line up\n// with those of the rows above.\nfunction InspectorRow({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"inspector-row\"\n      className={cn(\n        \"grid grid-cols-[var(--inspector-label-width,84px)_minmax(0,1fr)] items-center gap-x-2 gap-y-1 [&>:not([data-slot=inspector-label])]:col-start-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction InspectorLabel({ className, ...props }: React.ComponentProps<\"label\">) {\n  return (\n    <label\n      data-slot=\"inspector-label\"\n      className={cn(\"text-right text-mac-label select-none\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Inspector, InspectorLabel, InspectorRow, InspectorSection, InspectorSectionTitle }\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}