{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tailwind-sheet",
  "type": "registry:ui",
  "title": "Sheet",
  "dependencies": [
    "react",
    "react-aria-components",
    "tailwind-variants",
    "tailwindcss-react-aria-components",
    "tw-animate-css"
  ],
  "registryDependencies": [
    "https://react-aria.adobe.com/registry/tailwind-utils.json"
  ],
  "files": [
    {
      "path": "components/ui/Sheet.tsx",
      "type": "registry:ui",
      "content": "'use client';\nimport React from 'react';\nimport {type DialogProps} from 'react-aria-components/Dialog';\nimport {\n  Sheet as RACSheet,\n  SheetBackdrop,\n  SheetContent,\n  SheetOverlay,\n  type SheetOverlayProps\n} from 'react-aria-components/Sheet';\nimport {tv} from 'tailwind-variants';\nimport {composeTailwindRenderProps} from '@/registry/react-aria/lib/react-aria-utils';\nimport './Sheet.css';\n\n// Only the bottom-most sheet in a stack dims the page behind it.\nconst backdropStyles = tv({\n  base: \"data-[stack-index='0']:bg-black/40\"\n});\n\nconst sheetStyles = tv({\n  // Establish a 3D space (perspective) so stacked sheets can scale backward along the z-axis.\n  base: 'font-sans text-neutral-700 dark:text-neutral-300 bg-white dark:bg-neutral-800 forced-colors:bg-[Canvas] outline-hidden overflow-clip rounded-4xl shadow-2xl border border-black/10 dark:border-white/10 z-[1] will-change-transform [transform:perspective(1000px)]',\n  variants: {\n    position: {\n      bottom: 'w-[calc(100%-1rem)] max-w-[800px] max-h-[calc(100%_-_32px)] origin-[center_-150px]',\n      top: 'w-[calc(100%-1rem)] max-w-[800px] max-h-[calc(100%_-_32px)] origin-[center_150px]',\n      center: 'w-[calc(100%-1rem)] max-w-[800px] max-h-[calc(100%_-_32px)] origin-[center_-150px]',\n      left: 'w-[300px] h-[calc(100%-1rem)] origin-[150px_center]',\n      right: 'w-[300px] h-[calc(100%-1rem)] origin-[-150px_center]'\n    }\n  },\n  defaultVariants: {\n    position: 'bottom'\n  }\n});\n\n// Only scroll the inner content once the sheet is fully expanded. At a partial detent a swipe on the\n// content chains out to the sheet's scroll container instead, expanding the sheet (like iOS).\nconst contentStyles = tv({\n  base: 'p-6 pb-[calc(var(--spacing-6) + var(--sheet-scroll-padding-y))] box-border h-full outline-hidden overscroll-auto scrollbar-gutter-stable overflow-hidden group-data-[expanded]/sheet:overflow-auto'\n});\n\nexport interface SheetProps extends Omit<SheetOverlayProps, 'children'> {\n  /** The contents of the sheet. Rendered inside a Dialog. */\n  children?: DialogProps['children'];\n  /**\n   * Whether to add padding to the sheet so that it appears to continue outside the viewport.\n   *\n   * @default true\n   */\n  overscrollPadding?: boolean;\n}\n\nexport function Sheet({children, ...props}: SheetProps) {\n  let {snapPoints} = props;\n  return (\n    <SheetOverlay {...props} className={composeTailwindRenderProps(props.className, 'group/sheet')}>\n      {/* The backdrop fades in as the sheet slides up. When snap points are used, it stays hidden\n        until the sheet is dragged past the last snap point. */}\n      <SheetBackdrop\n        className={backdropStyles()}\n        swipeAnimation=\"sheet-backdrop\"\n        swipeAnimationRange={snapPoints ? {start: snapPoints.length - 1} : undefined}\n      />\n      {/* overscrollPadding makes the sheet appear to continue past the edge of the screen when overscrolled.\n        The scaleBack animation scales a parent sheet backward when a child sheet is opened on top of it. */}\n      <RACSheet\n        overscrollPadding={props.overscrollPadding ?? true}\n        stackAnimation=\"sheet-scale-back\"\n        className={({position}) => sheetStyles({position})}>\n        <SheetContent className={contentStyles()}>{children}</SheetContent>\n      </RACSheet>\n    </SheetOverlay>\n  );\n}\n"
    }
  ],
  "css": {
    "@plugin \"tailwindcss-react-aria-components\"": {},
    "@import \"tw-animate-css\"": {}
  }
}