{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "frame",
  "description": "A bordered surface that nests panels inside it with concentric radii and a shared spacing scale.",
  "dependencies": [
    "class-variance-authority"
  ],
  "registryDependencies": [
    "@ondo-ui/utils"
  ],
  "files": [
    {
      "path": "components/ui/frame.tsx",
      "content": "import { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst frameVariants = cva(\n  [\n    \"relative flex flex-col gap-(--frame-gap) rounded-(--frame-radius) bg-muted/50 px-(--frame-px) py-(--frame-py)\",\n    \"[--frame-radius:var(--radius-xl)] [--frame-radius-inset:--spacing(0.75)]\",\n    \"[--frame-panel-footer-gap:--spacing(1)] [--frame-panel-header-gap:0rem]\",\n    \"[--frame-panel-footer-px-adjust:0px] [--frame-panel-footer-py-adjust:0px] [--frame-panel-header-px-adjust:0px] [--frame-panel-header-py-adjust:0px] [--frame-panel-px-adjust:0px] [--frame-panel-py-adjust:0px]\",\n    \"[--frame-panel-footer-px:calc(var(--frame-panel-footer-px-base)_+_var(--frame-panel-footer-px-adjust))] [--frame-panel-footer-py:calc(var(--frame-panel-footer-py-base)_+_var(--frame-panel-footer-py-adjust))] [--frame-panel-header-px:calc(var(--frame-panel-header-px-base)_+_var(--frame-panel-header-px-adjust))] [--frame-panel-header-py:calc(var(--frame-panel-header-py-base)_+_var(--frame-panel-header-py-adjust))] [--frame-panel-px:calc(var(--frame-panel-px-base)_+_var(--frame-panel-px-adjust))] [--frame-panel-py:calc(var(--frame-panel-py-base)_+_var(--frame-panel-py-adjust))]\",\n    \"[--frame-border-color:var(--color-border)] [--frame-panel-bg:var(--color-card)] [--frame-panel-border-color:var(--color-border)]\",\n    \"[--frame-panel-radius:calc(var(--frame-radius)_-_var(--frame-radius-inset)_-_1px)]\",\n  ],\n  {\n    variants: {\n      variant: {\n        default: \"border border-[var(--frame-border-color)] bg-clip-padding\",\n        inverse:\n          \"border border-[var(--frame-border-color)] bg-background bg-clip-padding [--frame-panel-bg:color-mix(in_oklch,var(--color-muted)_40%,transparent)]\",\n        ghost:\n          \"[--frame-panel-radius:calc(var(--frame-radius)_-_var(--frame-radius-inset))]\",\n      },\n      spacing: {\n        xs: \"[--frame-gap:--spacing(0.5)] [--frame-px:--spacing(0.5)] [--frame-py:--spacing(0.5)] [--frame-panel-footer-px-base:--spacing(2)] [--frame-panel-footer-py-base:--spacing(1.5)] [--frame-panel-header-px-base:--spacing(2)] [--frame-panel-header-py-base:--spacing(1.5)] [--frame-panel-px-base:--spacing(2)] [--frame-panel-py-base:--spacing(1.5)]\",\n        sm: \"[--frame-gap:--spacing(1)] [--frame-px:--spacing(1)] [--frame-py:--spacing(1)] [--frame-panel-footer-px-base:--spacing(3)] [--frame-panel-footer-py-base:--spacing(2.5)] [--frame-panel-header-px-base:--spacing(3)] [--frame-panel-header-py-base:--spacing(2.5)] [--frame-panel-px-base:--spacing(3)] [--frame-panel-py-base:--spacing(2.5)]\",\n        default:\n          \"[--frame-gap:--spacing(1.5)] [--frame-px:--spacing(1.5)] [--frame-py:--spacing(1.5)] [--frame-panel-footer-px-base:--spacing(4)] [--frame-panel-footer-py-base:--spacing(3.5)] [--frame-panel-header-px-base:--spacing(4)] [--frame-panel-header-py-base:--spacing(3.5)] [--frame-panel-px-base:--spacing(4)] [--frame-panel-py-base:--spacing(3.5)]\",\n        lg: \"[--frame-gap:--spacing(2)] [--frame-px:--spacing(2)] [--frame-py:--spacing(2)] [--frame-panel-footer-px-base:--spacing(5)] [--frame-panel-footer-py-base:--spacing(4.5)] [--frame-panel-header-px-base:--spacing(5)] [--frame-panel-header-py-base:--spacing(4.5)] [--frame-panel-px-base:--spacing(5)] [--frame-panel-py-base:--spacing(4.5)]\",\n      },\n      stacked: {\n        true: [\n          \"gap-0 *:has-[+[data-slot=frame-panel]]:rounded-b-none\",\n          \"*:has-[+[data-slot=frame-panel]]:before:hidden\",\n          \"*:[[data-slot=frame-panel]+[data-slot=frame-panel]]:rounded-t-none\",\n          \"*:[[data-slot=frame-panel]+[data-slot=frame-panel]]:border-t-0\",\n        ],\n        false: \"\",\n      },\n      dense: {\n        true: \"gap-0 border-[var(--frame-border-color)] p-0 [--frame-gap:0px] [--frame-px:0px] [--frame-py:0px] [--frame-panel-radius:var(--frame-radius)] [&_[data-slot=frame-panel]]:-mx-px [&_[data-slot=frame-panel]]:before:hidden [&_[data-slot=frame-panel]:last-child]:-mb-px [&:not(:has([data-slot=frame-panel-header]))_[data-slot=frame-panel]:is(:first-child)]:-mt-px\",\n        false: \"\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      spacing: \"default\",\n      stacked: false,\n      dense: false,\n    },\n  }\n)\n\nfunction Frame({\n  className,\n  variant,\n  spacing,\n  stacked,\n  dense,\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof frameVariants>) {\n  return (\n    <div\n      className={cn(\n        frameVariants({ variant, spacing, stacked, dense }),\n        className\n      )}\n      data-slot=\"frame\"\n      data-variant={variant}\n      data-spacing={spacing}\n      {...props}\n    />\n  )\n}\n\nfunction FramePanel({\n  className,\n  fit,\n  ...props\n}: React.ComponentProps<\"div\"> & { fit?: boolean }) {\n  return (\n    <div\n      className={cn(\n        \"relative overflow-hidden rounded-(--frame-panel-radius) border border-(--frame-panel-border-color) bg-(--frame-panel-bg) bg-clip-padding shadow-xs\",\n        !fit && \"grow\",\n        \"before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--frame-panel-radius)_-_1px)] before:shadow-black/5\",\n        \"dark:bg-clip-border dark:before:shadow-white/5\",\n        \"px-(--frame-panel-px) py-(--frame-panel-py)\",\n        className\n      )}\n      data-slot=\"frame-panel\"\n      {...props}\n    />\n  )\n}\n\nfunction FrameHeader({ className, ...props }: React.ComponentProps<\"header\">) {\n  return (\n    <header\n      className={cn(\n        \"flex flex-col gap-(--frame-panel-header-gap) px-(--frame-panel-header-px) py-(--frame-panel-header-py)\",\n        className\n      )}\n      data-slot=\"frame-panel-header\"\n      {...props}\n    />\n  )\n}\n\nfunction FrameTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      className={cn(\"text-sm font-semibold\", className)}\n      data-slot=\"frame-panel-title\"\n      {...props}\n    />\n  )\n}\n\nfunction FrameDescription({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      className={cn(\"text-sm text-muted-foreground\", className)}\n      data-slot=\"frame-panel-description\"\n      {...props}\n    />\n  )\n}\n\nfunction FrameFooter({ className, ...props }: React.ComponentProps<\"footer\">) {\n  return (\n    <footer\n      className={cn(\n        \"flex flex-col gap-(--frame-panel-footer-gap) px-(--frame-panel-footer-px) py-(--frame-panel-footer-py)\",\n        className\n      )}\n      data-slot=\"frame-panel-footer\"\n      {...props}\n    />\n  )\n}\n\nexport {\n  Frame,\n  FramePanel,\n  FrameHeader,\n  FrameTitle,\n  FrameDescription,\n  FrameFooter,\n  frameVariants,\n}\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}