{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "apple-keyboard",
  "type": "registry:ui",
  "description": "Compact Apple-style keyboard with labeled keys and media row",
  "dependencies": [
    "@tabler/icons-react"
  ],
  "files": [
    {
      "path": "registry/default/ui/apple-keyboard.tsx",
      "content": "\"use client\"\n\nimport type { ReactNode } from \"react\"\nimport {\n  IconAlt,\n  IconArrowDown,\n  IconArrowLeft,\n  IconArrowRight,\n  IconArrowUp,\n  IconBrightnessDown,\n  IconBrightnessUp,\n  IconCommand,\n  IconLayoutGrid,\n  IconMathLower,\n  IconMicrophone,\n  IconMoon,\n  IconPlayerPause,\n  IconPlayerPlay,\n  IconPlayerTrackNext,\n  IconPlayerTrackPrev,\n  IconSearch,\n  IconVolume,\n  IconVolume2,\n  IconVolume3,\n  IconWorld,\n} from \"@tabler/icons-react\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype KeySize =\n  | \"1u\"\n  | \"1.25u\"\n  | \"1.5u\"\n  | \"1.75u\"\n  | \"2u\"\n  | \"2.25u\"\n  | \"2.75u\"\n  | \"6.25u\"\n\ntype CornerPosition =\n  | \"top-left\"\n  | \"top-right\"\n  | \"bottom-left\"\n  | \"bottom-right\"\n  | \"none\"\n\ninterface KeyProps {\n  children?: ReactNode\n  size?: KeySize\n  symbol?: string\n  secondaryLabel?: string\n  icon?: ReactNode\n  corner?: CornerPosition\n  className?: string\n  iconWithLabel?: boolean\n}\n\nconst sizeClasses: Record<KeySize, string> = {\n  \"1u\": \"w-10 sm:w-11 md:w-12\",\n  \"1.25u\": \"w-[52px] sm:w-14 md:w-[60px]\",\n  \"1.5u\": \"w-[60px] sm:w-[68px] md:w-[72px]\",\n  \"1.75u\": \"w-[70px] sm:w-[78px] md:w-[84px]\",\n  \"2u\": \"w-[82px] sm:w-[90px] md:w-[98px]\",\n  \"2.25u\": \"w-[92px] sm:w-[100px] md:w-[110px]\",\n  \"2.75u\": \"w-[112px] sm:w-[122px] md:w-[134px]\",\n  \"6.25u\": \"w-[200px] sm:w-[260px] md:w-[300px]\",\n}\n\nconst cornerClasses: Record<CornerPosition, string> = {\n  \"top-left\": \"rounded-tl-xl\",\n  \"top-right\": \"rounded-tr-xl\",\n  \"bottom-left\": \"rounded-bl-xl\",\n  \"bottom-right\": \"rounded-br-xl\",\n  none: \"\",\n}\n\nfunction Key({\n  children,\n  size = \"1u\",\n  symbol,\n  secondaryLabel,\n  icon,\n  corner = \"none\",\n  className,\n  iconWithLabel = false,\n}: KeyProps) {\n  let mainContent: ReactNode = null\n  if (iconWithLabel && icon) {\n    mainContent = (\n      <div className=\"flex items-center gap-0.5\">\n        {icon}\n        {children && (\n          <span className=\"text-[8px] text-gray-500 sm:text-[9px]\">\n            {children}\n          </span>\n        )}\n      </div>\n    )\n  } else if (icon) {\n    mainContent = (\n      <span className=\"flex items-center justify-center\">{icon}</span>\n    )\n  } else if (children) {\n    mainContent = (\n      <span className={cn(symbol && \"leading-tight\")}>{children}</span>\n    )\n  }\n\n  return (\n    <button\n      className={cn(\n        \"h-10 sm:h-11 md:h-12\",\n        \"bg-gradient-to-b from-white to-[#fafafa]\",\n        \"rounded-[4px]\",\n        \"flex flex-col items-center justify-center\",\n        \"font-normal text-gray-800 text-sm sm:text-base\",\n        \"shadow-[inset_0_1px_0_0_rgba(255,255,255,1),0_0_0_0.5px_rgba(0,0,0,0.08),0_1px_1px_rgba(0,0,0,0.06)]\",\n        \"border-0\",\n        \"shadow-inner ring-1 ring-black/10\",\n        \"transition-all duration-75 ease-out\",\n        \"active:scale-[0.98] active:bg-gradient-to-b active:from-[#f0f0f2] active:to-[#eaeaec] active:shadow-[inset_0_1px_2px_rgba(0,0,0,0.1),0_0_0_0.5px_rgba(0,0,0,0.1)]\",\n        \"cursor-pointer select-none\",\n        sizeClasses[size],\n        cornerClasses[corner],\n        className\n      )}\n      type=\"button\"\n    >\n      {symbol && (\n        <span className=\"font-light text-[10px] text-gray-400 leading-none sm:text-[11px]\">\n          {symbol}\n        </span>\n      )}\n      {mainContent}\n      {secondaryLabel && (\n        <span className=\"mt-3 font-light text-[7px] text-gray-600 leading-none sm:text-[8px]\">\n          {secondaryLabel}\n        </span>\n      )}\n    </button>\n  )\n}\n\n// Mac Magic Keyboard Component\nexport function AppleKeyboard() {\n  const fnIconSize = 12\n  const iconClass = \"text-gray-600\"\n\n  return (\n    <div className=\"mx-auto w-full max-w-[48rem]\">\n      <div className=\"rounded-xl bg-gradient-to-b from-[#d4d6d9] to-[#c9cbce] p-2 shadow-[0_8px_30px_rgba(0,0,0,0.12),inset_0_1px_0_rgba(255,255,255,0.5)] sm:rounded-2xl sm:p-2.5 md:p-3\">\n        {/* Function Row */}\n        <div className=\"mb-[3px] flex gap-[3px] sm:mb-1 sm:gap-1\">\n          <Key corner=\"top-left\" size=\"1.5u\">\n            <span className=\"font-normal text-[10px] text-gray-600 sm:text-[11px]\">\n              esc\n            </span>\n          </Key>\n          <Key\n            icon={\n              <IconBrightnessDown\n                className={iconClass}\n                size={fnIconSize}\n                strokeWidth={1.5}\n              />\n            }\n            secondaryLabel=\"F1\"\n            size=\"1u\"\n          />\n          <Key\n            icon={\n              <IconBrightnessUp\n                className={iconClass}\n                size={fnIconSize}\n                strokeWidth={1.5}\n              />\n            }\n            secondaryLabel=\"F2\"\n            size=\"1u\"\n          />\n          <Key\n            icon={\n              <IconLayoutGrid\n                className={iconClass}\n                size={fnIconSize}\n                strokeWidth={1.5}\n              />\n            }\n            secondaryLabel=\"F3\"\n            size=\"1u\"\n          />\n          <Key\n            icon={\n              <IconSearch\n                className={iconClass}\n                size={fnIconSize}\n                strokeWidth={1.5}\n              />\n            }\n            secondaryLabel=\"F4\"\n            size=\"1u\"\n          />\n          <Key\n            icon={\n              <IconMicrophone\n                className={iconClass}\n                size={fnIconSize}\n                strokeWidth={1.5}\n              />\n            }\n            secondaryLabel=\"F5\"\n            size=\"1u\"\n          />\n          <Key\n            icon={\n              <IconMoon\n                className={iconClass}\n                size={fnIconSize}\n                strokeWidth={1.5}\n              />\n            }\n            secondaryLabel=\"F6\"\n            size=\"1u\"\n          />\n          <Key\n            icon={\n              <IconPlayerTrackPrev\n                className={iconClass}\n                size={fnIconSize}\n                strokeWidth={1.5}\n              />\n            }\n            secondaryLabel=\"F7\"\n            size=\"1u\"\n          />\n          <Key\n            // icon={<span className=\"text-[11px] text-gray-600\">⏯</span>}\n            icon={\n              <div className=\"flex items-center justify-center\">\n                <IconPlayerPlay\n                  className={cn(iconClass, \"-mr-0.5\")}\n                  size={11}\n                  strokeWidth={1.5}\n                />\n                <IconPlayerPause\n                  className={iconClass}\n                  size={11}\n                  strokeWidth={1.5}\n                />\n              </div>\n            }\n            secondaryLabel=\"F8\"\n            size=\"1u\"\n          />\n          <Key\n            // icon={<span className=\"text-[11px] text-gray-600\">⏩</span>}\n            icon={\n              <IconPlayerTrackNext\n                className={iconClass}\n                size={fnIconSize}\n                strokeWidth={1.5}\n              />\n            }\n            secondaryLabel=\"F9\"\n            size=\"1u\"\n          />\n          <Key\n            icon={\n              <IconVolume3\n                className={iconClass}\n                size={fnIconSize}\n                strokeWidth={1.5}\n              />\n            }\n            secondaryLabel=\"F10\"\n            size=\"1u\"\n          />\n          <Key\n            icon={\n              <IconVolume2\n                className={iconClass}\n                size={fnIconSize}\n                strokeWidth={1.5}\n              />\n            }\n            secondaryLabel=\"F11\"\n            size=\"1u\"\n          />\n          <Key\n            icon={\n              <IconVolume\n                className={iconClass}\n                size={fnIconSize}\n                strokeWidth={1.5}\n              />\n            }\n            secondaryLabel=\"F12\"\n            size=\"1u\"\n          />\n          {/* Touch ID Button */}\n          <button\n            className=\"flex h-10 w-10 cursor-pointer select-none items-center justify-center overflow-hidden rounded-[4px] rounded-tr-xl bg-gradient-to-b from-white via-white/90 to-white/80 shadow-[inset_0_1px_0_rgba(255,255,255,0.6),0_1px_2px_rgba(0,0,0,0.1)] transition-all duration-75 active:scale-[0.98] sm:h-11 sm:w-11 md:h-12 md:w-12\"\n            type=\"button\"\n          >\n            <div className=\"h-7 w-7 rounded-full border-2 border-gray-400/70 bg-transparent shadow-inner ring-1 ring-black/10 sm:h-8 sm:w-8 md:h-9 md:w-9\" />\n          </button>\n        </div>\n\n        {/* Number Row */}\n        <div className=\"mb-[3px] flex gap-[3px] sm:mb-1 sm:gap-1\">\n          <Key symbol=\"~\">`</Key>\n          <Key symbol=\"!\">1</Key>\n          <Key symbol=\"@\">2</Key>\n          <Key symbol=\"#\">3</Key>\n          <Key symbol=\"$\">4</Key>\n          <Key symbol=\"%\">5</Key>\n          <Key symbol=\"^\">6</Key>\n          <Key symbol=\"&amp;\">7</Key>\n          <Key symbol=\"*\">8</Key>\n          <Key symbol=\"(\">9</Key>\n          <Key symbol=\")\">0</Key>\n          <Key symbol=\"_\">-</Key>\n          <Key symbol=\"+\">{\"=\"}</Key>\n          <Key className=\"relative\" size=\"1.5u\">\n            <span className=\"absolute right-2 bottom-1 font-normal text-[10px] text-gray-600 sm:text-[11px]\">\n              delete\n            </span>\n          </Key>\n        </div>\n\n        {/* QWERTY Row */}\n        <div className=\"mb-[3px] flex gap-[3px] sm:mb-1 sm:gap-1\">\n          <Key className=\"relative\" size=\"1.5u\">\n            <span className=\"absolute bottom-1 left-2 font-normal text-[10px] text-gray-600 sm:text-[11px]\">\n              tab\n            </span>\n          </Key>\n          <Key>Q</Key>\n          <Key>W</Key>\n          <Key>E</Key>\n          <Key>R</Key>\n          <Key>T</Key>\n          <Key>Y</Key>\n          <Key>U</Key>\n          <Key>I</Key>\n          <Key>O</Key>\n          <Key>P</Key>\n          <Key symbol={\"{\"}>\n            <span className=\"translate-y-2 text-[12px]\">]</span>\n          </Key>\n          <Key symbol={\"}\"}>\n            <span className=\"translate-y-2 text-[12px]\">]</span>\n          </Key>\n          <Key symbol=\"|\">\n            {\" \"}\n            <span className=\"translate-y-2 text-[12px]\">\\</span>\n          </Key>\n        </div>\n\n        {/* Home Row */}\n        <div className=\"mb-[3px] flex gap-[3px] sm:mb-1 sm:gap-1\">\n          <Key className=\"relative\" size=\"1.75u\">\n            <span className=\"absolute top-2 left-1.5 h-1 w-1 rounded-full bg-gray-400/60\" />\n            <span className=\"absolute bottom-1 left-2 font-normal text-[10px] text-gray-600 sm:text-[11px]\">\n              caps lock\n            </span>\n          </Key>\n          <Key>A</Key>\n          <Key>S</Key>\n          <Key>D</Key>\n          <Key>F</Key>\n          <Key>G</Key>\n          <Key>H</Key>\n          <Key>J</Key>\n          <Key>K</Key>\n          <Key>L</Key>\n          <Key symbol=\":\">;</Key>\n          <Key symbol={'\"'}>&apos;</Key>\n          <Key className=\"relative\" size=\"1.75u\">\n            <span className=\"absolute right-2 bottom-1 font-normal text-[10px] text-gray-600 sm:text-[11px]\">\n              return\n            </span>\n          </Key>\n        </div>\n\n        {/* Shift Row */}\n        <div className=\"mb-[3px] flex gap-[3px] sm:mb-1 sm:gap-1\">\n          <Key className=\"relative\" size=\"2.25u\">\n            <span className=\"absolute bottom-1 left-2 font-normal text-[10px] text-gray-600 sm:text-[11px]\">\n              shift\n            </span>\n          </Key>\n          <Key>Z</Key>\n          <Key>X</Key>\n          <Key>C</Key>\n          <Key>V</Key>\n          <Key>B</Key>\n          <Key>N</Key>\n          <Key>M</Key>\n          <Key symbol=\"&lt;\">,</Key>\n          <Key symbol=\"&gt;\">.</Key>\n          <Key symbol=\"?\">/</Key>\n          <Key className=\"relative\" size=\"2.25u\">\n            <span className=\"absolute right-2 bottom-1 font-normal text-[10px] text-gray-600 sm:text-[11px]\">\n              shift\n            </span>\n          </Key>\n        </div>\n\n        {/* Bottom Row with Arrow Keys */}\n        <div className=\"flex items-end gap-[3px] sm:gap-1\">\n          <Key\n            corner=\"bottom-left\"\n            icon={\n              <IconWorld\n                className={cn(iconClass, \"-translate-x-2.5 translate-y-2\")}\n                size={14}\n                strokeWidth={1.5}\n              />\n            }\n          />\n          <Key\n            icon={\n              <IconMathLower\n                className={cn(\n                  iconClass,\n                  \"-translate-y-1 translate-x-3 rotate-90\"\n                )}\n                size={14}\n                strokeWidth={1.5}\n              />\n            }\n            secondaryLabel=\"control\"\n          />\n          <Key\n            icon={\n              <IconAlt\n                className={cn(iconClass, \"-translate-y-1 translate-x-3\")}\n                size={14}\n                strokeWidth={1.5}\n              />\n            }\n            secondaryLabel=\"option\"\n          />\n          <Key\n            icon={\n              <IconCommand\n                className={cn(iconClass, \"-translate-y-1 translate-x-3\")}\n                size={14}\n                strokeWidth={1.5}\n              />\n            }\n            secondaryLabel=\"command\"\n            size=\"1.25u\"\n          />\n          <div className=\"h-10 w-[100px] cursor-pointer select-none rounded-[4px] bg-gradient-to-b from-white to-[#fafafa] shadow-[inset_0_1px_0_0_rgba(255,255,255,1),0_0_0_0.5px_rgba(0,0,0,0.08),0_1px_1px_rgba(0,0,0,0.06)] transition-all duration-75 active:scale-[0.98] active:bg-gradient-to-b active:from-[#f0f0f2] active:to-[#eaeaec] sm:h-11 sm:w-[140px] md:h-12 md:w-[280px]\" />\n          <Key\n            icon={\n              <IconCommand\n                className={cn(iconClass, \"-translate-y-1 translate-x-3\")}\n                size={14}\n                strokeWidth={1.5}\n              />\n            }\n            secondaryLabel=\"command\"\n            size=\"1.25u\"\n          />\n          <Key\n            icon={\n              <IconAlt\n                className={cn(iconClass, \"-translate-y-1 translate-x-3\")}\n                size={14}\n                strokeWidth={1.5}\n              />\n            }\n            secondaryLabel=\"option\"\n          />\n\n          {/* Arrow Keys Cluster - Left/Right are full height but narrower, Up/Down are half height stacked */}\n          <div className=\"flex items-center gap-[3px] sm:gap-1\">\n            <Key\n              className=\"!w-8 sm:!w-9 md:!w-10\"\n              icon={\n                <IconArrowLeft\n                  className={iconClass}\n                  size={12}\n                  strokeWidth={1.5}\n                />\n              }\n            />\n            <div className=\"flex flex-col gap-[1px]\">\n              <Key\n                className=\"!w-8 sm:!w-9 md:!w-10 !h-[19px] sm:!h-[21px] md:!h-[23px] !rounded-b-none\"\n                icon={\n                  <IconArrowUp\n                    className={iconClass}\n                    size={10}\n                    strokeWidth={1.5}\n                  />\n                }\n              />\n              <Key\n                className=\"!w-8 sm:!w-9 md:!w-10 !h-[19px] sm:!h-[21px] md:!h-[23px] !rounded-t-none\"\n                icon={\n                  <IconArrowDown\n                    className={iconClass}\n                    size={10}\n                    strokeWidth={1.5}\n                  />\n                }\n              />\n            </div>\n            <Key\n              className=\"!w-8 sm:!w-9 md:!w-10\"\n              corner=\"bottom-right\"\n              icon={\n                <IconArrowRight\n                  className={iconClass}\n                  size={12}\n                  strokeWidth={1.5}\n                />\n              }\n            />\n          </div>\n        </div>\n      </div>\n    </div>\n  )\n}\n",
      "type": "registry:ui"
    }
  ]
}