{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"frame","title":"Frame","description":"Layered surface with headers, panels, descriptions and footers.","dependencies":[],"registryDependencies":["@siteplane/base"],"files":[{"path":"packages/ui/src/components/frame/frame.tsx","content":"import type * as React from \"react\";\n\nimport { surfaceClassNames } from \"../../system/styles/surface\";\nimport { cn } from \"../../system/utils/cn\";\nimport { slotClass } from \"../../system/utils/slot-class\";\n\n// The frame's 4 px gap spaces its panels, and a hidden part leaves none. The\n// header and the footer take it from their own padding, so the space around\n// them stays 16 px on both sides.\nexport function Frame({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">): React.ReactElement {\n  return (\n    <div\n      className={cn(\n        slotClass(\"frame\", props),\n        \"relative flex flex-col gap-1 rounded-2xl bg-muted/72 p-1\",\n        className,\n      )}\n      data-slot=\"frame\"\n      {...props}\n    />\n  );\n}\n\nexport function FramePanel({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">): React.ReactElement {\n  return (\n    <div\n      className={cn(\n        slotClass(\"frame-panel\", props),\n        surfaceClassNames.raised,\n        \"rounded-xl p-5\",\n        className,\n      )}\n      data-slot=\"frame-panel\"\n      {...props}\n    />\n  );\n}\n\n// Frame headers and footers are plain blocks, not banner or contentinfo\n// landmarks: a page holds many frames.\nexport function FrameHeader({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">): React.ReactElement {\n  return (\n    <div\n      className={cn(\n        slotClass(\"frame-header\", props),\n        \"flex flex-col px-5 pt-4 pb-3\",\n        className,\n      )}\n      data-slot=\"frame-header\"\n      {...props}\n    />\n  );\n}\n\nexport function FrameTitle({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">): React.ReactElement {\n  return (\n    <div\n      className={cn(\n        slotClass(\"frame-title\", props),\n        \"font-(--sp-rw-font-weight-strong) text-sm\",\n        className,\n      )}\n      data-slot=\"frame-title\"\n      {...props}\n    />\n  );\n}\n\nexport function FrameDescription({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">): React.ReactElement {\n  return (\n    <div\n      className={cn(\n        slotClass(\"frame-description\", props),\n        \"text-muted-foreground text-sm\",\n        className,\n      )}\n      data-slot=\"frame-description\"\n      {...props}\n    />\n  );\n}\n\nexport function FrameFooter({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">): React.ReactElement {\n  return (\n    <div\n      className={cn(\n        slotClass(\"frame-footer\", props),\n        \"px-5 pt-3 pb-4\",\n        className,\n      )}\n      data-slot=\"frame-footer\"\n      {...props}\n    />\n  );\n}\n","type":"registry:ui","target":"~/src/siteplane/components/frame/frame.tsx"},{"path":"packages/ui/src/components/frame/index.ts","content":"export * from \"./frame\";\n","type":"registry:ui","target":"~/src/siteplane/components/frame/index.ts"}],"type":"registry:ui","docs":"https://ui.siteplane.io/docs-markdown/components/frame.md","categories":["Layout & utilities"],"meta":{"avoidWhen":["Avoid for a single card with its own header and actions; use Card.","Avoid for cards joined in a surrounding surface; use CardFrame."],"description":"Layered surface with headers, panels, descriptions and footers.","knownLimitations":["Frame owns presentation only: it holds no state and no behavior."],"providerNotes":[],"releaseStatus":"stable","searchTerms":["frame"],"useWhen":["Use to group raised panels, with a header and a footer, inside one shared surface."]}}