{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "breakpoint-display",
  "type": "registry:component",
  "title": "Breakpoint Display",
  "description": "A breakpoint display component.",
  "dependencies": ["class-variance-authority"],
  "files": [
    {
      "path": "registry/abui/utils/breakpoint-display.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst breakpointDisplayVariants = cva(\n  \"pointer-events-none select-none bg-foreground text-background px-2 py-1 z-50 rounded-b\",\n  {\n    variants: {\n      position: {\n        fixed: \"fixed top-0 right-[50%] translate-x-1/2\",\n        relative: \"relative\",\n        absolute: \"absolute top-0 right-[50%] translate-x-1/2\",\n      },\n    },\n    defaultVariants: {\n      position: \"fixed\",\n    },\n  },\n)\n\n// Canonical ordering of breakpoints from smallest to largest\n// This defines the semantic order - actual pixel values are defined in Tailwind config\nconst BREAKPOINT_ORDER = [\"xxs\", \"xs\", \"sm\", \"md\", \"lg\", \"xl\", \"2xl\", \"3xl\"] as const\n\ntype BreakpointKey = (typeof BREAKPOINT_ORDER)[number]\n\n// Map breakpoint keys to their display labels\nconst BREAKPOINT_LABELS: Record<BreakpointKey, string> = {\n  xxs: \"XXS\",\n  xs: \"XS\",\n  sm: \"SM\",\n  md: \"MD\",\n  lg: \"LG\",\n  xl: \"XL\",\n  \"2xl\": \"2XL\",\n  \"3xl\": \"3XL\",\n}\n\n// Default Tailwind breakpoints (standard v3/v4)\nconst DEFAULT_BREAKPOINTS: BreakpointKey[] = [\"sm\", \"md\", \"lg\", \"xl\", \"2xl\"]\n\ninterface BreakpointDisplayProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof breakpointDisplayVariants> {\n  /**\n   * Additional breakpoints to include beyond the default Tailwind breakpoints.\n   * These will be automatically sorted by semantic order (xxs < xs < sm < md < lg < xl < 2xl < 3xl).\n   * Actual pixel values are defined in your Tailwind configuration.\n   * @example extraBreakpoints={[\"xxs\", \"xs\", \"3xl\"]}\n   */\n  extraBreakpoints?: BreakpointKey[]\n}\n\nfunction BreakpointDisplay({ className, position, extraBreakpoints = [], ...props }: BreakpointDisplayProps) {\n  // Combine default and extra breakpoints, remove duplicates, and sort by semantic order\n  const activeBreakpoints = React.useMemo(() => {\n    const combined = [...DEFAULT_BREAKPOINTS, ...extraBreakpoints]\n    const unique = Array.from(new Set(combined))\n\n    // Sort by their position in the canonical BREAKPOINT_ORDER array\n    return unique.sort((a, b) => {\n      return BREAKPOINT_ORDER.indexOf(a) - BREAKPOINT_ORDER.indexOf(b)\n    })\n  }, [extraBreakpoints])\n\n  // Create a Set for O(1) lookup\n  const activeSet = React.useMemo(() => new Set(activeBreakpoints), [activeBreakpoints])\n\n  // Determine the first and last active breakpoints\n  const firstBreakpoint = activeBreakpoints[0]\n  const lastBreakpoint = activeBreakpoints[activeBreakpoints.length - 1]\n\n  // Helper to check if a breakpoint is the next active one after current\n  const getNextActiveBreakpoint = (current: BreakpointKey): BreakpointKey | null => {\n    const currentIndex = BREAKPOINT_ORDER.indexOf(current)\n    for (let i = currentIndex + 1; i < BREAKPOINT_ORDER.length; i++) {\n      if (activeSet.has(BREAKPOINT_ORDER[i])) {\n        return BREAKPOINT_ORDER[i]\n      }\n    }\n    return null\n  }\n\n  return (\n    <div className={cn(breakpointDisplayVariants({ position }), className)} {...props}>\n      {/* Minimum - shows below the first breakpoint */}\n      {firstBreakpoint === \"xxs\" && <p className=\"font-semibold block xxs:hidden\">Minimum</p>}\n      {firstBreakpoint === \"xs\" && <p className=\"font-semibold block xs:hidden\">Minimum</p>}\n      {firstBreakpoint === \"sm\" && <p className=\"font-semibold block sm:hidden\">Minimum</p>}\n      {firstBreakpoint === \"md\" && <p className=\"font-semibold block md:hidden\">Minimum</p>}\n      {firstBreakpoint === \"lg\" && <p className=\"font-semibold block lg:hidden\">Minimum</p>}\n      {firstBreakpoint === \"xl\" && <p className=\"font-semibold block xl:hidden\">Minimum</p>}\n      {firstBreakpoint === \"2xl\" && <p className=\"font-semibold block 2xl:hidden\">Minimum</p>}\n      {firstBreakpoint === \"3xl\" && <p className=\"font-semibold block 3xl:hidden\">Minimum</p>}\n\n      {/* XXS breakpoint */}\n      {activeSet.has(\"xxs\") && getNextActiveBreakpoint(\"xxs\") === \"xs\" && (\n        <p className=\"font-semibold hidden xxs:block xs:hidden\">XXS</p>\n      )}\n      {activeSet.has(\"xxs\") && getNextActiveBreakpoint(\"xxs\") === \"sm\" && (\n        <p className=\"font-semibold hidden xxs:block sm:hidden\">XXS</p>\n      )}\n      {activeSet.has(\"xxs\") && getNextActiveBreakpoint(\"xxs\") === \"md\" && (\n        <p className=\"font-semibold hidden xxs:block md:hidden\">XXS</p>\n      )}\n      {activeSet.has(\"xxs\") && getNextActiveBreakpoint(\"xxs\") === \"lg\" && (\n        <p className=\"font-semibold hidden xxs:block lg:hidden\">XXS</p>\n      )}\n      {activeSet.has(\"xxs\") && getNextActiveBreakpoint(\"xxs\") === \"xl\" && (\n        <p className=\"font-semibold hidden xxs:block xl:hidden\">XXS</p>\n      )}\n      {activeSet.has(\"xxs\") && getNextActiveBreakpoint(\"xxs\") === \"2xl\" && (\n        <p className=\"font-semibold hidden xxs:block 2xl:hidden\">XXS</p>\n      )}\n      {activeSet.has(\"xxs\") && getNextActiveBreakpoint(\"xxs\") === \"3xl\" && (\n        <p className=\"font-semibold hidden xxs:block 3xl:hidden\">XXS</p>\n      )}\n      {activeSet.has(\"xxs\") && lastBreakpoint === \"xxs\" && <p className=\"font-semibold hidden xxs:block\">XXS</p>}\n\n      {/* XS breakpoint */}\n      {activeSet.has(\"xs\") && getNextActiveBreakpoint(\"xs\") === \"sm\" && (\n        <p className=\"font-semibold hidden xs:block sm:hidden\">XS</p>\n      )}\n      {activeSet.has(\"xs\") && getNextActiveBreakpoint(\"xs\") === \"md\" && (\n        <p className=\"font-semibold hidden xs:block md:hidden\">XS</p>\n      )}\n      {activeSet.has(\"xs\") && getNextActiveBreakpoint(\"xs\") === \"lg\" && (\n        <p className=\"font-semibold hidden xs:block lg:hidden\">XS</p>\n      )}\n      {activeSet.has(\"xs\") && getNextActiveBreakpoint(\"xs\") === \"xl\" && (\n        <p className=\"font-semibold hidden xs:block xl:hidden\">XS</p>\n      )}\n      {activeSet.has(\"xs\") && getNextActiveBreakpoint(\"xs\") === \"2xl\" && (\n        <p className=\"font-semibold hidden xs:block 2xl:hidden\">XS</p>\n      )}\n      {activeSet.has(\"xs\") && getNextActiveBreakpoint(\"xs\") === \"3xl\" && (\n        <p className=\"font-semibold hidden xs:block 3xl:hidden\">XS</p>\n      )}\n      {activeSet.has(\"xs\") && lastBreakpoint === \"xs\" && <p className=\"font-semibold hidden xs:block\">XS</p>}\n\n      {/* SM breakpoint */}\n      {activeSet.has(\"sm\") && getNextActiveBreakpoint(\"sm\") === \"md\" && (\n        <p className=\"font-semibold hidden sm:block md:hidden\">SM</p>\n      )}\n      {activeSet.has(\"sm\") && getNextActiveBreakpoint(\"sm\") === \"lg\" && (\n        <p className=\"font-semibold hidden sm:block lg:hidden\">SM</p>\n      )}\n      {activeSet.has(\"sm\") && getNextActiveBreakpoint(\"sm\") === \"xl\" && (\n        <p className=\"font-semibold hidden sm:block xl:hidden\">SM</p>\n      )}\n      {activeSet.has(\"sm\") && getNextActiveBreakpoint(\"sm\") === \"2xl\" && (\n        <p className=\"font-semibold hidden sm:block 2xl:hidden\">SM</p>\n      )}\n      {activeSet.has(\"sm\") && getNextActiveBreakpoint(\"sm\") === \"3xl\" && (\n        <p className=\"font-semibold hidden sm:block 3xl:hidden\">SM</p>\n      )}\n      {activeSet.has(\"sm\") && lastBreakpoint === \"sm\" && <p className=\"font-semibold hidden sm:block\">SM</p>}\n\n      {/* MD breakpoint */}\n      {activeSet.has(\"md\") && getNextActiveBreakpoint(\"md\") === \"lg\" && (\n        <p className=\"font-semibold hidden md:block lg:hidden\">MD</p>\n      )}\n      {activeSet.has(\"md\") && getNextActiveBreakpoint(\"md\") === \"xl\" && (\n        <p className=\"font-semibold hidden md:block xl:hidden\">MD</p>\n      )}\n      {activeSet.has(\"md\") && getNextActiveBreakpoint(\"md\") === \"2xl\" && (\n        <p className=\"font-semibold hidden md:block 2xl:hidden\">MD</p>\n      )}\n      {activeSet.has(\"md\") && getNextActiveBreakpoint(\"md\") === \"3xl\" && (\n        <p className=\"font-semibold hidden md:block 3xl:hidden\">MD</p>\n      )}\n      {activeSet.has(\"md\") && lastBreakpoint === \"md\" && <p className=\"font-semibold hidden md:block\">MD</p>}\n\n      {/* LG breakpoint */}\n      {activeSet.has(\"lg\") && getNextActiveBreakpoint(\"lg\") === \"xl\" && (\n        <p className=\"font-semibold hidden lg:block xl:hidden\">LG</p>\n      )}\n      {activeSet.has(\"lg\") && getNextActiveBreakpoint(\"lg\") === \"2xl\" && (\n        <p className=\"font-semibold hidden lg:block 2xl:hidden\">LG</p>\n      )}\n      {activeSet.has(\"lg\") && getNextActiveBreakpoint(\"lg\") === \"3xl\" && (\n        <p className=\"font-semibold hidden lg:block 3xl:hidden\">LG</p>\n      )}\n      {activeSet.has(\"lg\") && lastBreakpoint === \"lg\" && <p className=\"font-semibold hidden lg:block\">LG</p>}\n\n      {/* XL breakpoint */}\n      {activeSet.has(\"xl\") && getNextActiveBreakpoint(\"xl\") === \"2xl\" && (\n        <p className=\"font-semibold hidden xl:block 2xl:hidden\">XL</p>\n      )}\n      {activeSet.has(\"xl\") && getNextActiveBreakpoint(\"xl\") === \"3xl\" && (\n        <p className=\"font-semibold hidden xl:block 3xl:hidden\">XL</p>\n      )}\n      {activeSet.has(\"xl\") && lastBreakpoint === \"xl\" && <p className=\"font-semibold hidden xl:block\">XL</p>}\n\n      {/* 2XL breakpoint */}\n      {activeSet.has(\"2xl\") && getNextActiveBreakpoint(\"2xl\") === \"3xl\" && (\n        <p className=\"font-semibold hidden 2xl:block 3xl:hidden\">2XL</p>\n      )}\n      {activeSet.has(\"2xl\") && lastBreakpoint === \"2xl\" && <p className=\"font-semibold hidden 2xl:block\">2XL</p>}\n\n      {/* 3XL breakpoint */}\n      {activeSet.has(\"3xl\") && lastBreakpoint === \"3xl\" && <p className=\"font-semibold hidden 3xl:block\">3XL</p>}\n    </div>\n  )\n}\n\nexport { BreakpointDisplay, breakpointDisplayVariants }\nexport type { BreakpointDisplayProps, BreakpointKey }\n",
      "type": "registry:ui"
    }
  ]
}