{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "sheet",
  "title": "Sheet",
  "description": "Sheet from the Get IT Done design system.",
  "dependencies": [
    "@radix-ui/react-dialog@^1.3.1",
    "class-variance-authority@^0.7.0",
    "lucide-react@^0.379.0"
  ],
  "registryDependencies": [
    "https://zero-design.itdone.de/r/autosave-status.json",
    "https://zero-design.itdone.de/r/button.json",
    "https://zero-design.itdone.de/r/code-snippet.json",
    "https://zero-design.itdone.de/r/heading-tag.json",
    "https://zero-design.itdone.de/r/labels-context.json",
    "https://zero-design.itdone.de/r/nested-layer.json",
    "https://zero-design.itdone.de/r/return-focus.json",
    "https://zero-design.itdone.de/r/skeleton.json",
    "https://zero-design.itdone.de/r/sticky-inset.json",
    "https://zero-design.itdone.de/r/utils.json",
    "https://zero-design.itdone.de/r/theme.json"
  ],
  "files": [
    {
      "path": "registry/ui/sheet.tsx",
      "content": "'use client';\n\nimport { OpenerCapture, useReturnFocusFallback } from '@/lib/return-focus';\nimport * as SheetPrimitive from '@radix-ui/react-dialog';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { AlertCircle, X } from 'lucide-react';\nimport * as React from 'react';\n\nimport { EscapeGuardContext, guardNestedEscape, useGuardedOpen } from '@/lib/nested-layer';\nimport { INSET_SCOPE_ATTRIBUTE, scrollInsetClasses, useStickyInset } from '@/lib/sticky-inset';\nimport { cn } from '@/lib/utils';\nimport type { HeadingTag } from '@/components/ui/heading-tag';\nimport { AutosaveStatus } from '@/components/ui/autosave-status';\nimport { Button } from '@/components/ui/button';\nimport { CodeSnippet, type CodeSnippetProps } from '@/components/ui/code-snippet';\nimport { useLabels, usePreset } from '@/components/ui/labels-context';\nimport { Skeleton } from '@/components/ui/skeleton';\n\n// Remembers the modal flag so SheetContent can apply docked (non-modal) focus and Escape rules.\nconst SheetModalContext = React.createContext(true);\n\nconst Sheet = ({ modal = true, open, defaultOpen, onOpenChange, ...props }: React.ComponentPropsWithoutRef<typeof SheetPrimitive.Root>) => {\n  const state = useGuardedOpen({ open, defaultOpen, onOpenChange });\n  return (\n    <SheetModalContext.Provider value={modal}>\n      <EscapeGuardContext.Provider value={state.guard}>\n        <SheetPrimitive.Root modal={modal} open={state.open} onOpenChange={state.onOpenChange} {...props} />\n      </EscapeGuardContext.Provider>\n    </SheetModalContext.Provider>\n  );\n};\nSheet.displayName = 'Sheet';\n\nconst SheetTrigger = SheetPrimitive.Trigger;\n\nconst SheetClose = SheetPrimitive.Close;\n\nconst SheetPortal = SheetPrimitive.Portal;\n\nconst SheetOverlay = React.forwardRef<\n  React.ElementRef<typeof SheetPrimitive.Overlay>,\n  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>\n>(({ className, ...props }, ref) => {\n  const zero = usePreset() === 'zero';\n  return (\n    <SheetPrimitive.Overlay\n      className={cn(\n        'fixed inset-0 z-sheet data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',\n        zero ? 'bg-overlay-scrim' : 'bg-overlay',\n        className,\n      )}\n      {...props}\n      ref={ref}\n    />\n  );\n});\nSheetOverlay.displayName = SheetPrimitive.Overlay.displayName;\n\nconst sheetBase =\n  'fixed z-sheet gap-4 border-hairline bg-background p-6 shadow-dialog transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500';\n\nconst sheetVariants = cva(\n  sheetBase,\n  {\n    variants: {\n      side: {\n        top: 'inset-x-0 top-0 border-b border-solid data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',\n        bottom:\n          'inset-x-0 bottom-0 border-t border-solid data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',\n        left: 'inset-y-0 left-0 h-full border-r border-solid data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left',\n        right:\n          'inset-y-0 right-0 h-full border-l border-solid data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right',\n      },\n      // Internal: true when an explicit `size` replaces the responsive default width.\n      sized: { true: '', false: '' },\n    },\n    compoundVariants: [\n      { side: 'left', sized: false, className: 'w-3/4 sm:max-w-3xl' },\n      { side: 'right', sized: false, className: 'w-3/4 sm:max-w-3xl' },\n    ],\n    defaultVariants: {\n      side: 'right',\n      sized: false,\n    },\n  },\n);\n\ntype SheetSize = 'sm' | 'md' | 'lg' | 'xl' | 'full';\n// `modal` (default) keeps the scrim and blocks the page. `push` docks a persistent pane without a scrim\n// (pair with `modal={false}` on Sheet). `overlay` floats a rounded full-height panel over the page with a scrim.\n// `card` floats a rounded panel that hugs its content up to the sheet card max height (Figma Sheet overlay card).\n// `centered` places that same card in the middle of the viewport above the scrim (Figma Sheet centered overlay).\ntype SheetMode = 'modal' | 'push' | 'overlay' | 'card' | 'centered';\n// `default` renders the content as given. `loading`, `error` and `dirty` drive SheetBody and SheetFooter.\ntype SheetState = 'default' | 'loading' | 'error' | 'dirty';\n// Docks a fixed sheet to the work area. `topbar` and `topbar-lg` start below the top bar. `topbar-sidebar` and `topbar-sidebar-collapsed`\n// also keep a left sheet clear of the expanded or collapsed sidebar. `none` (default) is the window edge.\ntype SheetInset = 'none' | 'topbar' | 'topbar-lg' | 'topbar-sidebar' | 'topbar-sidebar-collapsed';\n\nconst sheetInsetClass: Record<Exclude<SheetInset, 'none'>, string> = {\n  topbar: 'top-topbar h-auto bottom-0',\n  'topbar-lg': 'top-topbar-lg h-auto bottom-0',\n  'topbar-sidebar': 'top-topbar h-auto bottom-0',\n  'topbar-sidebar-collapsed': 'top-topbar h-auto bottom-0',\n};\n\nconst SheetStateContext = React.createContext<SheetState>('default');\n\nconst sheetSizeWidth: Record<SheetSize, string> = {\n  sm: 'w-sheet-sm max-w-full',\n  md: 'w-sheet-md max-w-full',\n  lg: 'w-sheet-lg max-w-full',\n  xl: 'w-sheet-xl max-w-full',\n  full: 'w-full max-w-full',\n};\n\ninterface SheetContentProps\n  extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,\n    Pick<VariantProps<typeof sheetVariants>, 'side'> {\n  /** Fixed panel width from the sheet size tokens (440, 520, 640, 900) or `full` (whole width). Never wider than the viewport. Omit for the original responsive width. */\n  size?: SheetSize;\n  /** Presentation mode, see SheetMode. Default `modal` is unchanged. */\n  mode?: SheetMode;\n  /** Number of sheets stacked above this one. Each level shifts the panel left by the stack offset and mutes its surface. */\n  stackDepth?: number;\n  /** Set to false for a zero-padding flex column (header, body and footer manage their own padding). */\n  padded?: boolean;\n  /** Loading, error and dirty states, read by SheetBody and SheetFooter. */\n  state?: SheetState;\n  // Accessible name of the close button and the loading skeleton. Win over the provider text.\n  closeLabel?: string;\n  /** Docks the sheet to the work area instead of the window edge, see SheetInset. Default `none` is unchanged. */\n  inset?: SheetInset;\n  /** Portals the sheet (and its scrim) into this element instead of the body and positions it `absolute`. The element must be `relative`. */\n  container?: HTMLElement | null;\n  /** Moves focus into the sheet when it opens. Defaults to true for modal sheets and false when `Sheet` has `modal={false}` (docked usage keeps the page focus). */\n  focusOnOpen?: boolean;\n}\n\nconst SheetContent = React.forwardRef<React.ElementRef<typeof SheetPrimitive.Content>, SheetContentProps>(\n  (\n    {\n      side = 'right',\n      className,\n      children,\n      size,\n      mode: modeProp,\n      stackDepth = 0,\n      padded: paddedProp,\n      state = 'default',\n      style,\n      onInteractOutside,\n      onOpenAutoFocus,\n      onEscapeKeyDown,\n      onCloseAutoFocus,\n      closeLabel,\n      inset = 'none',\n      container,\n      focusOnOpen,\n      ...props\n    },\n    ref,\n  ) => {\n    const returnFocus = useReturnFocusFallback(onCloseAutoFocus);\n    const l = useLabels({ close: closeLabel });\n    const zero = usePreset() === 'zero';\n    // Zero: the default sheet is the rounded 8px inset overlay panel (md width, sections own their padding).\n    const mode = modeProp ?? (zero ? 'overlay' : 'modal');\n    const padded = paddedProp ?? !zero;\n    const nonModal = !React.useContext(SheetModalContext);\n    const escapeGuard = React.useContext(EscapeGuardContext);\n    const contentRef = React.useRef<HTMLDivElement | null>(null);\n    const setRefs = (node: HTMLDivElement | null) => {\n      contentRef.current = node;\n      if (typeof ref === 'function') ref(node);\n      else if (ref) (ref as React.MutableRefObject<HTMLDivElement | null>).current = node;\n    };\n    const scoped = Boolean(container);\n    const card = mode === 'card' || mode === 'centered';\n    const centered = mode === 'centered';\n    // Card modes default to the 520 card width when no size is given.\n    const widthSize: SheetSize | undefined = size ?? (card || (zero && modeProp === undefined) ? 'md' : undefined);\n    const sized = widthSize !== undefined && (card || side === 'left' || side === 'right');\n    const floating = mode === 'overlay' && (side === 'left' || side === 'right');\n    const cardDocked = mode === 'card';\n    return (\n      <SheetPortal container={container ?? undefined}>\n        {mode !== 'push' && <SheetOverlay className={scoped ? 'absolute' : undefined} />}\n        <SheetPrimitive.Content\n          ref={setRefs}\n          onOpenAutoFocus={(event) => {\n            onOpenAutoFocus?.(event);\n            if (!(focusOnOpen ?? !nonModal)) event.preventDefault();\n          }}\n          onCloseAutoFocus={returnFocus.onCloseAutoFocus}\n          onEscapeKeyDown={(event) => {\n            onEscapeKeyDown?.(event);\n            // Escape inside a select list, menu or popover closes that layer only.\n            guardNestedEscape(escapeGuard, event);\n            // A docked sheet shares the page with other widgets: Escape only closes it while focus is inside.\n            if (nonModal && !contentRef.current?.contains(document.activeElement)) event.preventDefault();\n          }}\n          aria-busy={state === 'loading' || undefined}\n          data-sheet-mode={mode}\n          {...{ [INSET_SCOPE_ATTRIBUTE]: '' }}\n          data-sheet-state={state}\n          data-sheet-inset={inset !== 'none' ? inset : undefined}\n          data-sheet-scoped={scoped || undefined}\n          style={stackDepth > 0 ? ({ '--sheet-depth': stackDepth, ...style } as React.CSSProperties) : style}\n          onInteractOutside={(event) => {\n            if (mode === 'push') event.preventDefault();\n            onInteractOutside?.(event);\n          }}\n          className={cn(\n            card ? sheetBase : sheetVariants({ side, sized }),\n            sized && widthSize && sheetSizeWidth[widthSize],\n            scrollInsetClasses,\n            !padded && 'flex flex-col gap-0 p-0',\n            mode === 'push' && side === 'right' && 'rounded-l-surface',\n            mode === 'push' && side === 'left' && 'rounded-r-surface',\n            floating && 'inset-y-2 h-auto rounded-surface border border-solid',\n            zero && (floating || card || mode === 'push') && 'border-border-default shadow-elevation-raised',\n            // A floating panel keeps its 8px inset on both sides, so a wide size never crosses the viewport edge.\n            (floating || cardDocked) && 'max-w-[calc(100%-1rem)]',\n            floating && side === 'right' && 'right-2',\n            floating && side === 'left' && 'left-2',\n            card && 'h-auto max-h-[min(var(--size-sheet-card),calc(100vh-var(--size-inset)*2))] overflow-y-auto rounded-surface border border-solid',\n            cardDocked && 'top-2',\n            cardDocked &&\n              side !== 'left' &&\n              'right-2 data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right',\n            cardDocked &&\n              side === 'left' &&\n              'left-2 data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left',\n            centered &&\n              'left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',\n            inset !== 'none' && !scoped && sheetInsetClass[inset],\n            inset === 'topbar-sidebar' && !scoped && side === 'left' && 'left-[var(--size-sidebar)]',\n            inset === 'topbar-sidebar-collapsed' && !scoped && side === 'left' && 'left-[var(--size-sidebar-collapsed)]',\n            scoped && 'absolute',\n            zero && 'typography-ui',\n            stackDepth > 0 && 'right-[calc(var(--size-sheet-stack-offset)*var(--sheet-depth))] bg-muted',\n            className,\n          )}\n          {...props}\n        >\n          <OpenerCapture onCapture={returnFocus.remember} />\n          <SheetStateContext.Provider value={state}>{children}</SheetStateContext.Provider>\n          <SheetPrimitive.Close data-slot=\"sheet-close\" className={cn('absolute right-3 top-3 inline-flex items-center justify-center rounded-control text-icon-subtle transition-colors hover:bg-muted hover:text-icon-default active:bg-muted-strong focus:outline-none focus-visible:ring-focus focus-visible:ring-offset-focus focus-visible:ring-offset-background focus-visible:ring-ring-default disabled:pointer-events-none data-[state=open]:bg-secondary', 'h-10 w-10')}>\n            <X className=\"h-icon-md w-icon-md\" aria-hidden=\"true\" />\n            <span className=\"sr-only\">{l.close}</span>\n          </SheetPrimitive.Close>\n        </SheetPrimitive.Content>\n      </SheetPortal>\n    );\n  },\n);\nSheetContent.displayName = SheetPrimitive.Content.displayName;\n\ninterface SheetHeaderProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** `zero` is the compact record header: bottom hairline, own padding (use with `padded={false}`). */\n  variant?: 'default' | 'zero';\n}\n\nconst SheetHeader = React.forwardRef<HTMLDivElement, SheetHeaderProps>(({ className, variant: variantProp, ...props }, ref) => {\n  const zero = usePreset() === 'zero';\n  const variant = variantProp ?? (zero ? 'zero' : 'default');\n  const stickyRef = useStickyInset<HTMLDivElement>('top', ref);\n  return (\n    <div\n      ref={stickyRef}\n      className={cn(\n        'flex flex-col text-left',\n        variant === 'zero' ? 'gap-2 border-0 border-b border-solid border-hairline px-5 py-4' : 'space-y-2',\n        className,\n      )}\n      {...props}\n    />\n  );\n});\nSheetHeader.displayName = 'SheetHeader';\n\ninterface SheetFooterProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** `zero` is the 56px action footer with a top hairline: status on the left, actions on the right. */\n  variant?: 'default' | 'zero';\n  /** Zero footer only. Left side status, defaults to the autosave status derived from the sheet state. */\n  status?: React.ReactNode;\n  /** Zero footer only. Secondary action on the left (for example \"Download error list\"), shown instead of the status. */\n  leftAction?: React.ReactNode;\n}\n\nconst SheetFooter = React.forwardRef<HTMLDivElement, SheetFooterProps>(({ className, variant: variantProp, status, leftAction, children, ...props }, ref) => {\n  const state = React.useContext(SheetStateContext);\n  const stickyRef = useStickyInset<HTMLDivElement>('bottom', ref);\n  const zero = usePreset() === 'zero';\n  const variant = variantProp ?? (zero ? 'zero' : 'default');\n  if (variant === 'zero') {\n    return (\n      <div\n        ref={stickyRef}\n        className={cn(\n          'flex min-h-sheet-footer items-center gap-2 border-0 border-t border-solid border-hairline px-5 py-3',\n          className,\n        )}\n        {...props}\n      >\n        {leftAction ?? status ?? <AutosaveStatus state={state === 'dirty' ? 'dirty' : state === 'error' ? 'error' : 'saved'} />}\n        <div className=\"ml-auto flex items-center gap-2\">{children}</div>\n      </div>\n    );\n  }\n  return (\n    <div ref={stickyRef} className={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className)} {...props}>\n      {children}\n    </div>\n  );\n});\nSheetFooter.displayName = 'SheetFooter';\n\ninterface SheetTitleProps extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title> {\n  /** `zero` uses the sheet title type role. */\n  variant?: 'default' | 'zero';\n}\n\nconst SheetTitle = React.forwardRef<React.ElementRef<typeof SheetPrimitive.Title>, SheetTitleProps>(\n  ({ className, variant: variantProp, ...props }, ref) => {\n    const zero = usePreset() === 'zero';\n  const variant = variantProp ?? (zero ? 'zero' : 'default');\n    return (\n      <SheetPrimitive.Title\n        ref={ref}\n        className={cn(\n          variant === 'zero' ? 'typography-sheet-title text-foreground' : 'text-base font-semibold tracking-[-0.01em] text-foreground',\n          className,\n        )}\n        {...props}\n      />\n    );\n  },\n);\nSheetTitle.displayName = SheetPrimitive.Title.displayName;\n\nconst SheetDescription = React.forwardRef<\n  React.ElementRef<typeof SheetPrimitive.Description>,\n  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>\n>(({ className, ...props }, ref) => {\n  const zero = usePreset() === 'zero';\n  return (\n    <SheetPrimitive.Description\n      ref={ref}\n      className={cn(zero ? 'typography-ui-relaxed text-text-subtle' : 'text-sm text-muted-foreground', className)}\n      {...props}\n    />\n  );\n});\nSheetDescription.displayName = SheetPrimitive.Description.displayName;\n\n// Top row of the zero header: path on the left, room on the right for the close button and the Esc hint.\nconst SheetPath = ({\n  className,\n  showEscHint = true,\n  children,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement> & { showEscHint?: boolean }) => (\n  <div className={cn('typography-ui-sm flex items-center gap-2 pr-8 text-text-subtle-on-muted', className)} {...props}>\n    <span className=\"min-w-0 flex-1 truncate\">{children}</span>\n    {showEscHint && (\n      <kbd className=\"typography-text-extra-small rounded-item bg-muted px-1 font-sans text-text-muted\" aria-hidden>\n        Esc\n      </kbd>\n    )}\n  </div>\n);\nSheetPath.displayName = 'SheetPath';\n\n// Meta row under the title: autosave status plus facts such as counts. Separators are drawn between children.\nconst SheetMeta = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (\n  <div className={cn('typography-ui flex flex-wrap items-center gap-2 text-text-subtle-on-muted', className)} {...props} />\n);\nSheetMeta.displayName = 'SheetMeta';\n\ninterface SheetBodyProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Overrides the state taken from SheetContent. */\n  state?: SheetState;\n  /** Error state: message under the error icon. */\n  errorMessage?: React.ReactNode;\n  /** Error state: renders the Try again button. */\n  onRetry?: () => void;\n  // Deprecated: use retryText.\n  retryLabel?: string;\n  // Visible texts of the error state and the loading name. Win over the provider text.\n  retryText?: string;\n  errorText?: React.ReactNode;\n  loadingLabel?: string;\n}\n\n// Scrollable body. Renders the children, skeleton rows while loading, or an error block with retry.\nconst SheetBody = React.forwardRef<HTMLDivElement, SheetBodyProps>(\n  (\n    { className, state: stateProp, errorMessage: errorMessageProp, errorText, onRetry, retryLabel: retryLabelProp, retryText, loadingLabel, children, ...props },\n    ref,\n  ) => {\n    const l = useLabels({ loading: loadingLabel });\n    const errorMessage = errorText ?? errorMessageProp ?? l.sheetLoadError;\n    const retryLabel = retryText ?? retryLabelProp ?? l.tryAgain;\n    const contextState = React.useContext(SheetStateContext);\n    const state = stateProp ?? contextState;\n    return (\n      <div\n        ref={ref}\n        data-state={state}\n        aria-busy={state === 'loading' || undefined}\n        className={cn('flex min-h-0 flex-1 flex-col overflow-y-auto', scrollInsetClasses, className)}\n        {...props}\n      >\n        {state === 'loading' ? (\n          <div role=\"status\" aria-label={l.loading} className=\"flex flex-col gap-4 p-5\">\n            <Skeleton className=\"h-4 w-1/3\" />\n            <Skeleton className=\"h-16 w-full\" />\n            <Skeleton className=\"h-4 w-1/2\" />\n            <Skeleton className=\"h-16 w-full\" />\n          </div>\n        ) : state === 'error' ? (\n          <div role=\"alert\" className=\"flex flex-1 flex-col items-center justify-center gap-2 p-5 text-center\">\n            <AlertCircle className=\"h-icon-lg w-icon-lg text-icon-destructive\" aria-hidden />\n            <p className=\"typography-ui-semibold m-0 text-text-default\">{errorMessage}</p>\n            {onRetry && (\n              <Button type=\"button\" variant=\"outline\" size=\"control-sm\" onClick={onRetry}>\n                {retryLabel}\n              </Button>\n            )}\n          </div>\n        ) : (\n          children\n        )}\n      </div>\n    );\n  },\n);\nSheetBody.displayName = 'SheetBody';\n\ninterface SheetSectionProps extends Omit<React.HTMLAttributes<HTMLElement>, 'title'> {\n  title?: React.ReactNode;\n  // Heading element of the title, so the sheet fits the document outline. Default h3.\n  titleAs?: HeadingTag;\n  description?: React.ReactNode;\n}\n\n// Content slot section: label, helper text and a field area. Sections are separated by a hairline.\nconst SheetSection = React.forwardRef<HTMLElement, SheetSectionProps>(\n  ({ className, title, titleAs: Title = 'h3', description, children, ...props }, ref) => (\n    <section\n      ref={ref}\n      className={cn('flex flex-col gap-2 border-0 border-b border-solid border-hairline px-5 py-4 last:border-b-0', className)}\n      {...props}\n    >\n      {title && <Title className=\"typography-ui-medium m-0 text-text-default\">{title}</Title>}\n      {description && <p className=\"typography-ui m-0 text-text-subtle-on-muted\">{description}</p>}\n      {children}\n    </section>\n  ),\n);\nSheetSection.displayName = 'SheetSection';\n\nconst sheetBannerVariants = cva('flex items-start gap-2 border-0 border-solid px-5 py-3 typography-ui text-text-default', {\n  variants: {\n    tone: {\n      default: 'bg-muted',\n      neutral: 'bg-muted',\n      primary: 'bg-background-brand-subtle',\n      info: 'bg-background-info-subtle',\n      success: 'bg-background-success-subtle',\n      warning: 'bg-background-warning-subtle',\n      error: 'bg-background-destructive-subtle',\n    },\n    position: {\n      top: 'border-b border-hairline',\n      bottom: 'border-t border-hairline',\n    },\n  },\n  defaultVariants: { tone: 'default', position: 'top' },\n});\n\nconst sheetBannerIconTone: Record<NonNullable<VariantProps<typeof sheetBannerVariants>['tone']>, string> = {\n  default: 'text-icon-default',\n  neutral: 'text-icon-default',\n  primary: 'text-icon-default',\n  info: 'text-icon-default',\n  success: 'text-icon-default',\n  warning: 'text-icon-default',\n  error: 'text-icon-destructive',\n};\n\ninterface SheetBannerProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color'>,\n    VariantProps<typeof sheetBannerVariants> {\n  // Optional leading icon, decorative.\n  icon?: React.ReactNode;\n}\n\n// Banner strip inside a sheet (Figma Slide out menu Banner). Place it first in the content for `top` and last for `bottom`.\nconst SheetBanner = React.forwardRef<HTMLDivElement, SheetBannerProps>(\n  ({ className, tone, position, icon, role, children, ...props }, ref) => {\n    const resolvedTone = tone ?? 'default';\n    return (\n      <div\n        ref={ref}\n        role={role ?? (resolvedTone === 'error' || resolvedTone === 'warning' ? 'alert' : 'status')}\n        data-tone={resolvedTone}\n        data-position={position ?? 'top'}\n        className={cn(sheetBannerVariants({ tone, position }), className)}\n        {...props}\n      >\n        {icon && (\n          <span aria-hidden className={cn('flex shrink-0 [&>svg]:h-icon-md [&>svg]:w-icon-md', sheetBannerIconTone[resolvedTone])}>\n            {icon}\n          </span>\n        )}\n        <div className=\"min-w-0 flex-1\">{children}</div>\n      </div>\n    );\n  },\n);\nSheetBanner.displayName = 'SheetBanner';\n\ntype SheetCodeBlockProps = Omit<CodeSnippetProps, 'variant'>;\n\n// Code block row of the sheet (Figma Sheet block Code block): label on the left, copy action on the right.\nconst SheetCodeBlock = React.forwardRef<HTMLDivElement, SheetCodeBlockProps>(\n  ({ className, label, lineNumbers = false, ...props }, ref) => {\n    const l = useLabels();\n    return (\n      <CodeSnippet\n        ref={ref}\n        variant=\"block\"\n        label={label ?? l.code}\n        lineNumbers={lineNumbers}\n        className={cn('mx-5 my-4 w-auto', className)}\n        {...props}\n      />\n    );\n  },\n);\nSheetCodeBlock.displayName = 'SheetCodeBlock';\n\nexport {\n  SheetBanner,\n  SheetCodeBlock,\n  type SheetBannerProps,\n  type SheetCodeBlockProps,\n  SheetBody,\n  SheetMeta,\n  SheetPath,\n  SheetSection,\n  type SheetBodyProps,\n  type SheetContentProps,\n  type SheetFooterProps,\n  type SheetInset,\n  type SheetHeaderProps,\n  type SheetMode,\n  type SheetSectionProps,\n  type SheetSize,\n  type SheetState,\n  type SheetTitleProps,\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetOverlay,\n  SheetPortal,\n  SheetTitle,\n  SheetTrigger,\n};\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}