{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "sheet",
  "title": "Sheet",
  "description": "A panel that slides in from an edge.",
  "dependencies": [
    "@radix-ui/react-dialog@^1.2.0"
  ],
  "registryDependencies": [
    "https://creance.pages.dev/r/creance-base.json",
    "https://creance.pages.dev/r/dialog.json",
    "https://creance.pages.dev/r/icon-button.json"
  ],
  "files": [
    {
      "path": "sheet/Sheet.css",
      "content": ".cr-sheet {\n  position: fixed;\n  z-index: 41;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  border-radius: var(--cr-radius-xl);\n  color: var(--cr-color-text-default);\n  font-family: var(--cr-font-family-sans);\n  font-size: var(--cr-font-size-md);\n}\n\n.cr-sheet:focus-visible {\n  outline: none;\n}\n\n.cr-sheet[data-side='right'],\n.cr-sheet[data-side='left'] {\n  top: var(--cr-space-3);\n  bottom: var(--cr-space-3);\n  width: min(400px, calc(100vw - 2 * var(--cr-space-3)));\n}\n\n.cr-sheet[data-side='right'] {\n  right: var(--cr-space-3);\n  animation: cr-sheet-in-right var(--cr-motion-duration-slow) var(--cr-motion-easing-spring);\n}\n\n.cr-sheet[data-side='left'] {\n  left: var(--cr-space-3);\n  animation: cr-sheet-in-left var(--cr-motion-duration-slow) var(--cr-motion-easing-spring);\n}\n\n.cr-sheet[data-side='bottom'] {\n  right: var(--cr-space-3);\n  bottom: var(--cr-space-3);\n  left: var(--cr-space-3);\n  max-height: 70vh;\n  animation: cr-sheet-in-bottom var(--cr-motion-duration-slow) var(--cr-motion-easing-spring);\n}\n\n.cr-sheet__head {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: var(--cr-space-5) var(--cr-space-5) var(--cr-space-3);\n}\n\n.cr-sheet__title {\n  flex: 1;\n  margin: 0;\n  font-family: var(--cr-font-family-display);\n  font-size: var(--cr-font-size-xl);\n  font-weight: var(--cr-font-weight-semibold);\n}\n\n.cr-sheet__description {\n  margin: 0;\n  padding: 0 var(--cr-space-5) var(--cr-space-3);\n  color: var(--cr-color-text-secondary);\n}\n\n.cr-sheet__body {\n  flex: 1;\n  min-height: 0;\n  padding: 0 var(--cr-space-5) var(--cr-space-5);\n  overflow-y: auto;\n}\n\n.cr-sheet__actions {\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: flex-end;\n  gap: 10px;\n  padding: var(--cr-space-4) var(--cr-space-5);\n  border-top: 1px solid var(--cr-color-border-default);\n}\n\n@keyframes cr-sheet-in-right { from { opacity: 0; transform: translateX(24px); } }\n@keyframes cr-sheet-in-left { from { opacity: 0; transform: translateX(-24px); } }\n@keyframes cr-sheet-in-bottom { from { opacity: 0; transform: translateY(24px); } }\n\n@media (prefers-reduced-motion: reduce) {\n  .cr-sheet { animation: none !important; }\n}\n",
      "type": "registry:file",
      "target": "@components/creance/sheet/Sheet.css"
    },
    {
      "path": "sheet/Sheet.tsx",
      "content": "'use client';\n\nimport * as RadixDialog from '@radix-ui/react-dialog';\nimport { forwardRef, type ComponentPropsWithoutRef, type ReactNode } from 'react';\nimport { IconButton } from '@/components/creance/icon-button/IconButton';\nimport { cx } from '@/lib/creance/cx';\nimport { CrossIcon } from '@/lib/creance/icons';\nimport '@/components/creance/dialog/Dialog.css';\nimport './Sheet.css';\n\n/** A panel that slides in from an edge, for detail you open and close beside your work. Radix Dialog. */\nexport const Sheet = RadixDialog.Root;\nexport const SheetTrigger = RadixDialog.Trigger;\nexport const SheetClose = RadixDialog.Close;\n\nexport interface SheetContentProps extends Omit<ComponentPropsWithoutRef<typeof RadixDialog.Content>, 'title'> {\n  title: ReactNode;\n  description?: ReactNode;\n  /** Buttons pinned to the bottom. */\n  actions?: ReactNode;\n  side?: 'right' | 'left' | 'bottom';\n  /** Accessible name of the close button. Default \"Close\". */\n  closeLabel?: string;\n}\n\nexport const SheetContent = forwardRef<HTMLDivElement, SheetContentProps>(function SheetContent(\n  { title, description, actions, side = 'right', closeLabel = 'Close', className, children, ...props },\n  ref,\n) {\n  return (\n    <RadixDialog.Portal>\n      <RadixDialog.Overlay className=\"cr-dialog-overlay\" />\n      <RadixDialog.Content\n        ref={ref}\n        className={cx('cr-sheet cr-glass', className)}\n        data-side={side}\n        {...(description ? {} : { 'aria-describedby': undefined })}\n        {...props}\n      >\n        <div className=\"cr-sheet__head\">\n          <RadixDialog.Title className=\"cr-sheet__title\">{title}</RadixDialog.Title>\n          <RadixDialog.Close asChild>\n            <IconButton label={closeLabel} icon={<CrossIcon />} size=\"sm\" tooltip={false} />\n          </RadixDialog.Close>\n        </div>\n        {description && <RadixDialog.Description className=\"cr-sheet__description\">{description}</RadixDialog.Description>}\n        <div className=\"cr-sheet__body\">{children}</div>\n        {actions && <div className=\"cr-sheet__actions\">{actions}</div>}\n      </RadixDialog.Content>\n    </RadixDialog.Portal>\n  );\n});\n",
      "type": "registry:ui",
      "target": "@components/creance/sheet/Sheet.tsx"
    }
  ],
  "categories": [
    "molecule",
    "overlays"
  ],
  "type": "registry:ui"
}