{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "sheet",
  "title": "Sheet",
  "description": "Top-level FRAME/12 storyboard sheet with registration pegs, optional CSS-counter autoCut, theme scope, and motion grammar.",
  "registryDependencies": [
    "https://frame12.dev/r/frame12-styles.json",
    "https://frame12.dev/r/use-on-twos.json",
    "https://frame12.dev/r/use-tempo.json"
  ],
  "files": [
    {
      "path": "ui/sheet.tsx",
      "content": "'use client';\n\nimport * as React from 'react';\nimport { type MotionMode } from '@/hooks/use-on-twos';\nimport { useResolvedMotion } from '@/hooks/use-tempo';\n\nexport interface SheetProps extends React.HTMLAttributes<HTMLDivElement> {\n  pegs?: boolean;\n  autoCut?: boolean;\n  motion?: MotionMode;\n  theme?: 'light' | 'dark';\n  sheetClassName?: string;\n  children?: React.ReactNode;\n}\n\nexport function Pegs() {\n  return (\n    <div className=\"f12-pegs\" aria-hidden=\"true\">\n      <span className=\"f12-peg slot\" />\n      <span className=\"f12-peg round\" />\n      <span className=\"f12-peg slot\" />\n    </div>\n  );\n}\n\nexport const Sheet = React.forwardRef<HTMLDivElement, SheetProps>(function Sheet(\n  {\n    pegs = true,\n    autoCut = false,\n    motion = 'stepped',\n    theme,\n    className = '',\n    sheetClassName = '',\n    children,\n    ...rest\n  },\n  ref,\n) {\n  // Emits the resolved mode (OS reduced motion, the nearest TempoProvider, then `motion`), so\n  // CSS-only consumers inside follow it through the f12-m-* variable cascade.\n  const effectiveMotion: MotionMode = useResolvedMotion(motion);\n  const themeClass = theme ? ` f12-theme-${theme}` : '';\n  const outerClass = `f12-dash f12-frame f12-m-${effectiveMotion}${themeClass}${className ? ` ${className}` : ''}`;\n  const innerClass = `f12-sheet${sheetClassName ? ` ${sheetClassName}` : ''}`;\n  const innerStyle = {\n    '--f12-autocut-display': autoCut ? 'block' : 'none',\n  } as React.CSSProperties;\n\n  return (\n    <div ref={ref} className={outerClass} data-theme={theme} {...rest}>\n      <div\n        className={innerClass}\n        data-autocut={autoCut ? '' : undefined}\n        style={innerStyle}\n      >\n        {pegs && <Pegs />}\n        {children}\n      </div>\n    </div>\n  );\n});\n",
      "type": "registry:ui",
      "target": "components/frame12/sheet.tsx"
    }
  ],
  "type": "registry:ui"
}