{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "block-ui",
  "title": "Block Ui",
  "type": "registry:ui",
  "files": [
    {
      "path": "packages/registry-react/components/block-ui/BlockUi.tsx",
      "content": "import * as React from 'react'\nimport { cn } from '@/lib/utils'\nimport { blockUiVariants } from './block-ui.variants'\nimport { Spinner } from '@/components/ui/spinner'\n\nexport interface BlockUiProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** When true, the overlay is shown and the wrapped content is blocked. */\n  blocking?: boolean\n  /** Plain-text or rich message shown under the icon. Ignored when a message\n   *  render prop is supplied via children. */\n  message?: React.ReactNode\n  opacity?: number\n  overlayColor?: string\n  blur?: boolean\n  showSpinner?: boolean\n  /** Custom icon node replacing the default Spinner (Vue #icon slot). */\n  icon?: React.ReactNode\n  /** Custom message node replacing the `message` string (Vue #message slot). */\n  messageSlot?: React.ReactNode\n}\n\nconst BlockUi = React.forwardRef<HTMLDivElement, BlockUiProps>(\n  (\n    {\n      className,\n      children,\n      blocking = false,\n      message = 'Loading...',\n      opacity = 0.6,\n      overlayColor = '',\n      blur = false,\n      showSpinner = true,\n      icon,\n      messageSlot,\n      ...props\n    },\n    ref,\n  ) => {\n    const overlayStyle: React.CSSProperties = React.useMemo(() => {\n      const style: React.CSSProperties = { opacity }\n      if (overlayColor) style.backgroundColor = overlayColor\n      return style\n    }, [opacity, overlayColor])\n\n    return (\n      <div\n        ref={ref}\n        data-uipkge=\"\"\n        data-slot=\"block-ui\"\n        data-blocked={blocking ? '' : undefined}\n        className={cn(blockUiVariants(), className)}\n        {...props}\n      >\n        {/* Wrapped content */}\n        <div\n          className={cn(\n            'block-ui-content',\n            blur && blocking && 'pointer-events-none blur-[2px] transition-[filter]',\n          )}\n        >\n          {children}\n        </div>\n\n        {/* Blocking overlay */}\n        {blocking && (\n          <div\n            className=\"absolute inset-0 z-50 flex flex-col items-center justify-center gap-3\"\n            role=\"status\"\n            aria-live=\"polite\"\n            aria-busy=\"true\"\n          >\n            {/* Background layer (opacity only affects this layer) */}\n            <div\n              className={cn('absolute inset-0', !overlayColor && 'bg-background')}\n              style={overlayStyle}\n            />\n            {/* Content layer (spinner + message stay fully opaque) */}\n            {icon ?? (showSpinner && <Spinner size=\"lg\" />)}\n            {messageSlot ? (\n              <div className=\"text-foreground text-sm font-medium\">{messageSlot}</div>\n            ) : (\n              message && <p className=\"text-foreground text-sm font-medium\">{message}</p>\n            )}\n          </div>\n        )}\n      </div>\n    )\n  },\n)\nBlockUi.displayName = 'BlockUi'\n\nexport { BlockUi }\n",
      "type": "registry:ui",
      "target": "~/components/ui/block-ui/BlockUi.tsx"
    },
    {
      "path": "packages/registry-react/components/block-ui/block-ui.variants.ts",
      "content": "import type { VariantProps } from 'class-variance-authority'\nimport { cva } from 'class-variance-authority'\n\nexport const blockUiVariants = cva('relative inline-block')\n\nexport type BlockUiVariants = VariantProps<typeof blockUiVariants>\n",
      "type": "registry:ui",
      "target": "~/components/ui/block-ui/block-ui.variants.ts"
    },
    {
      "path": "packages/registry-react/components/block-ui/index.ts",
      "content": "export { BlockUi, type BlockUiProps } from './BlockUi'\nexport { blockUiVariants, type BlockUiVariants } from './block-ui.variants'\n",
      "type": "registry:ui",
      "target": "~/components/ui/block-ui/index.ts"
    }
  ],
  "dependencies": [
    "class-variance-authority"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/react/spinner.json"
  ],
  "description": "Overlay that blocks interaction during loading. Wraps content and shows a spinner + message overlay. The blocking prop toggles the blocked state with configurable overlay opacity, color, background blur, and custom icon/message slots. Composes the spinner primitive.",
  "categories": [
    "feedback",
    "utility"
  ]
}