{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "screen-size-guard",
  "title": "Screen Size Guard",
  "description": "A responsive fallback wrapper for components that are not ready for smaller screens yet.",
  "dependencies": [
    "lucide-react",
    "motion"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/corr/components/screen-size-guard.tsx",
      "content": "\"use client\"\n\nimport type * as React from \"react\"\nimport { MonitorSmartphoneIcon } from \"lucide-react\"\nimport { motion, useReducedMotion } from \"motion/react\"\n\nimport { Button } from \"@/components/ui/button\"\nimport { cn } from \"@/lib/utils\"\n\nexport type ScreenSizeGuardMinWidth = \"sm\" | \"md\" | \"lg\" | \"xl\"\n\nconst contentVisibility: Record<ScreenSizeGuardMinWidth, string> = {\n  sm: \"max-sm:hidden\",\n  md: \"max-md:hidden\",\n  lg: \"max-lg:hidden\",\n  xl: \"max-xl:hidden\",\n}\n\nconst fallbackVisibility: Record<ScreenSizeGuardMinWidth, string> = {\n  sm: \"sm:hidden\",\n  md: \"md:hidden\",\n  lg: \"lg:hidden\",\n  xl: \"xl:hidden\",\n}\n\nexport function ScreenSizeGuard({\n  children,\n  minWidth = \"lg\",\n  title = \"This component is not optimised for mobile screens yet\",\n  description = \"Check back on a laptop or larger screen to view this component.\",\n  icon,\n  action,\n  secondaryAction,\n  fallback,\n  showDefaultActions = true,\n  forceFallback = false,\n  className,\n  fallbackClassName,\n}: {\n  children: React.ReactNode\n  minWidth?: ScreenSizeGuardMinWidth\n  title?: string\n  description?: string\n  icon?: React.ReactNode\n  action?: React.ReactNode\n  secondaryAction?: React.ReactNode\n  fallback?: React.ReactNode\n  showDefaultActions?: boolean\n  forceFallback?: boolean\n  className?: string\n  fallbackClassName?: string\n}) {\n  const reduceMotion = useReducedMotion()\n\n  return (\n    <div className={className}>\n      <div className={forceFallback ? \"hidden\" : contentVisibility[minWidth]}>\n        {children}\n      </div>\n      <motion.div\n        initial={{ opacity: 0, y: reduceMotion ? 0 : 8 }}\n        animate={{ opacity: 1, y: 0 }}\n        transition={{ duration: reduceMotion ? 0 : 0.18, ease: \"easeOut\" }}\n        className={cn(\n          forceFallback ? \"grid\" : fallbackVisibility[minWidth],\n          \"min-h-72 place-items-center rounded-md border border-dashed bg-card p-6 text-center\",\n          fallbackClassName\n        )}\n      >\n        {fallback ?? (\n          <div className=\"mx-auto grid max-w-md justify-items-center gap-4\">\n            <div className=\"inline-flex size-11 items-center justify-center rounded-md bg-muted text-foreground\">\n              {icon ?? <MonitorSmartphoneIcon className=\"size-5\" />}\n            </div>\n            <div className=\"max-w-sm\">\n              <h3 className=\"text-base font-semibold tracking-tight\">\n                {title}\n              </h3>\n              <p className=\"mt-1 text-sm leading-6 text-muted-foreground\">\n                {description}\n              </p>\n            </div>\n            {action || secondaryAction || showDefaultActions ? (\n              <div className=\"flex flex-wrap items-center justify-center gap-2\">\n                {action ?? (\n                  <Button asChild>\n                    <a href=\"/components\">Browse components</a>\n                  </Button>\n                )}\n                {secondaryAction ??\n                  (showDefaultActions ? (\n                    <Button asChild variant=\"outline\">\n                      <a href=\"/\">Go home</a>\n                    </Button>\n                  ) : null)}\n              </div>\n            ) : null}\n          </div>\n        )}\n      </motion.div>\n    </div>\n  )\n}\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}