{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "panel",
  "title": "Panel",
  "description": "Bordered, titled content surface with header, body, and footer slots.",
  "dependencies": [
    "@vllnt/ui@^0.2.1"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/default/panel/panel.tsx",
      "content": "import { cn } from \"@vllnt/ui\";\n\n/** Props shared by the panel container and its `div`-based slots. */\nexport type PanelProps = React.HTMLAttributes<HTMLDivElement>;\n\n/** Props for the {@link PanelTitle} heading. */\nexport type PanelTitleProps = React.HTMLAttributes<HTMLHeadingElement>;\n\n/** Props for the {@link PanelDescription}. */\nexport type PanelDescriptionProps = React.HTMLAttributes<HTMLParagraphElement>;\n\n/**\n * Bordered, titled content surface. Compose with {@link PanelHeader},\n * {@link PanelBody}, and {@link PanelFooter}.\n * @example\n * <Panel>\n *   <PanelHeader>\n *     <PanelTitle>Settings</PanelTitle>\n *     <PanelDescription>Manage your workspace.</PanelDescription>\n *   </PanelHeader>\n *   <PanelBody>...</PanelBody>\n *   <PanelFooter>...</PanelFooter>\n * </Panel>\n */\nconst Panel = ({\n  className,\n  ref,\n  ...props\n}: PanelProps & { ref?: React.Ref<HTMLDivElement> }) => (\n  <div\n    className={cn(\n      \"rounded-lg border border-border bg-card text-card-foreground shadow-sm\",\n      className,\n    )}\n    ref={ref}\n    {...props}\n  />\n);\nPanel.displayName = \"Panel\";\n\n/** Header region, divided from the body by a bottom border. */\nconst PanelHeader = ({\n  className,\n  ref,\n  ...props\n}: PanelProps & { ref?: React.Ref<HTMLDivElement> }) => (\n  <div\n    className={cn(\n      \"flex flex-col gap-1.5 border-b border-border px-4 py-3\",\n      className,\n    )}\n    ref={ref}\n    {...props}\n  />\n);\nPanelHeader.displayName = \"PanelHeader\";\n\n/** Accessible heading for the panel. */\nconst PanelTitle = ({\n  children,\n  className,\n  ref,\n  ...props\n}: PanelTitleProps & { ref?: React.Ref<HTMLHeadingElement> }) => (\n  <h3\n    className={cn(\n      \"text-sm font-semibold leading-none tracking-tight\",\n      className,\n    )}\n    ref={ref}\n    {...props}\n  >\n    {children}\n  </h3>\n);\nPanelTitle.displayName = \"PanelTitle\";\n\n/** Secondary descriptive text under the title. */\nconst PanelDescription = ({\n  className,\n  ref,\n  ...props\n}: PanelDescriptionProps & { ref?: React.Ref<HTMLParagraphElement> }) => (\n  <p\n    className={cn(\"text-sm text-muted-foreground\", className)}\n    ref={ref}\n    {...props}\n  />\n);\nPanelDescription.displayName = \"PanelDescription\";\n\n/** Main content region of the panel. */\nconst PanelBody = ({\n  className,\n  ref,\n  ...props\n}: PanelProps & { ref?: React.Ref<HTMLDivElement> }) => (\n  <div className={cn(\"px-4 py-3\", className)} ref={ref} {...props} />\n);\nPanelBody.displayName = \"PanelBody\";\n\n/** Footer region, divided from the body by a top border. */\nconst PanelFooter = ({\n  className,\n  ref,\n  ...props\n}: PanelProps & { ref?: React.Ref<HTMLDivElement> }) => (\n  <div\n    className={cn(\n      \"flex items-center border-t border-border px-4 py-3\",\n      className,\n    )}\n    ref={ref}\n    {...props}\n  />\n);\nPanelFooter.displayName = \"PanelFooter\";\n\nexport {\n  Panel,\n  PanelBody,\n  PanelDescription,\n  PanelFooter,\n  PanelHeader,\n  PanelTitle,\n};\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component",
  "version": "0.2.1",
  "stability": "stable"
}