{
  "name": "responsive-dialog",
  "type": "registry:block",
  "dependencies": [
    "react"
  ],
  "registryDependencies": [
    "drawer",
    "side-dialog"
  ],
  "files": [
    {
      "path": "./items/blocks/responsive-dialog/component.tsx",
      "type": "registry:block",
      "target": "./components/block/shuip/responsive-dialog.tsx",
      "content": "'use client';\n\nimport * as React from 'react';\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from '@/components/ui/drawer';\nimport {\n  SideDialog,\n  SideDialogBody,\n  SideDialogClose,\n  SideDialogContent,\n  SideDialogDescription,\n  SideDialogFooter,\n  SideDialogHeader,\n  SideDialogTitle,\n  SideDialogTrigger,\n} from '@/components/ui/shuip/side-dialog';\nimport { cn } from '@/lib/utils';\n\ntype ResponsiveDialogPosition = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'left' | 'right';\ntype ResponsiveDialogSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';\ntype ResponsiveDialogBreakpoint = 'sm' | 'md' | 'lg' | 'xl' | number;\n\nexport interface ResponsiveDialogProps {\n  open?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  position?: ResponsiveDialogPosition;\n  size?: ResponsiveDialogSize;\n  breakpoint?: ResponsiveDialogBreakpoint;\n  children?: React.ReactNode;\n}\n\nexport interface ResponsiveDialogTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  asChild?: boolean;\n  children: React.ReactNode;\n}\n\nexport interface ResponsiveDialogContentProps extends React.HTMLAttributes<HTMLDivElement> {\n  showCloseButton?: boolean;\n  children: React.ReactNode;\n}\n\nexport interface ResponsiveDialogHeaderProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode;\n}\n\nexport interface ResponsiveDialogTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {\n  children: React.ReactNode;\n}\n\nexport interface ResponsiveDialogDescriptionProps extends React.HTMLAttributes<HTMLParagraphElement> {\n  children: React.ReactNode;\n}\n\nexport interface ResponsiveDialogFooterProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode;\n}\n\nexport interface ResponsiveDialogCloseProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  asChild?: boolean;\n  children?: React.ReactNode;\n}\n\nexport interface ResponsiveDialogBodyProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode;\n}\n\n// Helper function to convert breakpoint to pixels\nconst getBreakpointValue = (breakpoint: ResponsiveDialogBreakpoint): number => {\n  if (typeof breakpoint === 'number') {\n    return breakpoint;\n  }\n\n  const breakpoints = {\n    sm: 640,\n    md: 768,\n    lg: 1024,\n    xl: 1280,\n  };\n\n  return breakpoints[breakpoint];\n};\n\n// Custom hook for responsive breakpoint detection\nconst useCustomBreakpoint = (breakpoint: ResponsiveDialogBreakpoint) => {\n  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined);\n\n  React.useEffect(() => {\n    const breakpointValue = getBreakpointValue(breakpoint);\n    const mql = window.matchMedia(`(max-width: ${breakpointValue - 1}px)`);\n\n    const onChange = () => {\n      setIsMobile(window.innerWidth < breakpointValue);\n    };\n\n    mql.addEventListener('change', onChange);\n    setIsMobile(window.innerWidth < breakpointValue);\n\n    return () => mql.removeEventListener('change', onChange);\n  }, [breakpoint]);\n\n  return !!isMobile;\n};\n\n// Context for managing responsive state\nconst ResponsiveDialogContext = React.createContext<{\n  isMobile: boolean;\n}>({\n  isMobile: false,\n});\n\nexport function useResponsiveDialog() {\n  return React.useContext(ResponsiveDialogContext);\n}\n\nexport function ResponsiveDialog({\n  open,\n  onOpenChange,\n  position = 'bottom-right',\n  size = 'sm',\n  breakpoint = 'md',\n  children,\n}: ResponsiveDialogProps) {\n  const isMobile = useCustomBreakpoint(breakpoint);\n\n  return (\n    <ResponsiveDialogContext.Provider value={{ isMobile }}>\n      {isMobile ? (\n        <Drawer open={open} onOpenChange={onOpenChange} repositionInputs={false}>\n          {children}\n        </Drawer>\n      ) : (\n        <SideDialog open={open} onOpenChange={onOpenChange} position={position} size={size}>\n          {children}\n        </SideDialog>\n      )}\n    </ResponsiveDialogContext.Provider>\n  );\n}\n\nexport function ResponsiveDialogTrigger({ asChild, children, ...props }: ResponsiveDialogTriggerProps) {\n  const { isMobile } = React.useContext(ResponsiveDialogContext);\n\n  if (isMobile) {\n    return (\n      <DrawerTrigger asChild={asChild} {...props}>\n        {children}\n      </DrawerTrigger>\n    );\n  }\n\n  return (\n    <SideDialogTrigger asChild={asChild} {...props}>\n      {children}\n    </SideDialogTrigger>\n  );\n}\n\nexport function ResponsiveDialogContent({\n  showCloseButton = true,\n  className,\n  children,\n  ...props\n}: ResponsiveDialogContentProps) {\n  const { isMobile } = React.useContext(ResponsiveDialogContext);\n\n  if (isMobile) {\n    return (\n      <DrawerContent {...props}>\n        <div className={cn('flex flex-col max-h-[75dvh]', className)}>{children}</div>\n      </DrawerContent>\n    );\n  }\n\n  return (\n    <SideDialogContent showCloseButton={showCloseButton} className={className} {...props}>\n      {children}\n    </SideDialogContent>\n  );\n}\n\nexport function ResponsiveDialogHeader({ className, children, ...props }: ResponsiveDialogHeaderProps) {\n  const { isMobile } = React.useContext(ResponsiveDialogContext);\n\n  if (isMobile) {\n    return (\n      <DrawerHeader className={cn('shrink-0', className)} {...props}>\n        {children}\n      </DrawerHeader>\n    );\n  }\n\n  return (\n    <SideDialogHeader className={className} {...props}>\n      {children}\n    </SideDialogHeader>\n  );\n}\n\nexport function ResponsiveDialogTitle({ className, children, ...props }: ResponsiveDialogTitleProps) {\n  const { isMobile } = React.useContext(ResponsiveDialogContext);\n\n  if (isMobile) {\n    return (\n      <DrawerTitle className={className} {...props}>\n        {children}\n      </DrawerTitle>\n    );\n  }\n\n  return (\n    <SideDialogTitle className={className} {...props}>\n      {children}\n    </SideDialogTitle>\n  );\n}\n\nexport function ResponsiveDialogDescription({ className, children, ...props }: ResponsiveDialogDescriptionProps) {\n  const { isMobile } = React.useContext(ResponsiveDialogContext);\n\n  if (isMobile) {\n    return (\n      <DrawerDescription className={className} {...props}>\n        {children}\n      </DrawerDescription>\n    );\n  }\n\n  return (\n    <SideDialogDescription className={className} {...props}>\n      {children}\n    </SideDialogDescription>\n  );\n}\n\nexport function ResponsiveDialogFooter({ className, children, ...props }: ResponsiveDialogFooterProps) {\n  const { isMobile } = React.useContext(ResponsiveDialogContext);\n\n  if (isMobile) {\n    return (\n      <DrawerFooter className={cn('shrink-0', className)} {...props}>\n        {children}\n      </DrawerFooter>\n    );\n  }\n\n  return (\n    <SideDialogFooter className={className} {...props}>\n      {children}\n    </SideDialogFooter>\n  );\n}\n\nexport function ResponsiveDialogBody({ className, children, ...props }: ResponsiveDialogBodyProps) {\n  const { isMobile } = React.useContext(ResponsiveDialogContext);\n  if (isMobile) {\n    return (\n      <div className={cn('flex-1 min-h-0 overflow-y-auto overflow-x-hidden px-4 py-3', className)} {...props}>\n        {children}\n      </div>\n    );\n  }\n  return (\n    <SideDialogBody className={className} {...props}>\n      {children}\n    </SideDialogBody>\n  );\n}\n\nexport function ResponsiveDialogClose({ asChild, children, ...props }: ResponsiveDialogCloseProps) {\n  const { isMobile } = React.useContext(ResponsiveDialogContext);\n\n  if (isMobile) {\n    return (\n      <DrawerClose asChild={asChild} {...props}>\n        {children}\n      </DrawerClose>\n    );\n  }\n\n  return (\n    <SideDialogClose asChild={asChild} {...props}>\n      {children}\n    </SideDialogClose>\n  );\n}\n"
    }
  ],
  "$schema": "https://ui.shadcn.com/schema/registry-item.json"
}