{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "phone",
  "title": "Phone",
  "type": "registry:ui",
  "files": [
    {
      "path": "packages/registry-vue/components/phone/Phone.vue",
      "content": "<script setup lang=\"ts\">\nimport { computed, type CSSProperties, type HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nexport type PhoneModel = 'iphone-17-pro' | 'galaxy-s26-ultra'\n/** @deprecated Prefer `model`. */\nexport type PhoneVariant = 'apple' | 'android' | PhoneModel\nexport type PhoneSize = 'sm' | 'md' | 'lg'\nexport type IPhone17ProColor = 'cosmic-orange' | 'deep-blue' | 'silver'\nexport type GalaxyS26UltraColor = 'titanium-black' | 'titanium-gray' | 'titanium-silver' | 'cobalt-violet'\nexport type PhoneColor = IPhone17ProColor | GalaxyS26UltraColor | 'black' | 'natural' | 'blue'\n\ninterface Props {\n  model?: PhoneModel\n  /** @deprecated Use `model`. */\n  variant?: PhoneVariant\n  size?: PhoneSize\n  color?: PhoneColor\n  showStatusBar?: boolean\n  time?: string\n  showHomeIndicator?: boolean\n  showNavBar?: boolean\n  class?: HTMLAttributes['class']\n}\n\ntype Finish = {\n  name: string\n  base: string\n  highlight: string\n  shadow: string\n  button: string\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  size: 'md',\n  showStatusBar: true,\n  time: '9:41',\n})\n\nconst sizeClass = computed(\n  () =>\n    ({\n      sm: 'w-[240px]',\n      md: 'w-[300px]',\n      lg: 'w-[340px]',\n    })[props.size],\n)\n\nconst sizeScale = computed(() => ({ sm: 0.8, md: 1, lg: 1.133 })[props.size])\n\nconst resolvedModel = computed<PhoneModel>(() => {\n  const value = props.model ?? props.variant\n  return value === 'galaxy-s26-ultra' || value === 'android' ? 'galaxy-s26-ultra' : 'iphone-17-pro'\n})\n\nconst isIPhone = computed(() => resolvedModel.value === 'iphone-17-pro')\nconst aspectRatio = computed(() => (isIPhone.value ? '71.9 / 150' : '78.1 / 163.6'))\n\nfunction getFinish(model: PhoneModel, color?: PhoneColor): Finish {\n  if (model === 'iphone-17-pro') {\n    const selected: IPhone17ProColor =\n      color === 'silver'\n        ? 'silver'\n        : color === 'deep-blue' || color === 'blue' || color === 'black'\n          ? 'deep-blue'\n          : 'cosmic-orange'\n\n    return {\n      'cosmic-orange': {\n        name: 'Cosmic Orange',\n        base: '#d65f27',\n        highlight: '#f49a69',\n        button: '#bd4e1d',\n        shadow: '0 30px 70px -22px rgba(184, 72, 24, 0.62), 0 10px 24px -14px rgba(0, 0, 0, 0.5)',\n      },\n      'deep-blue': {\n        name: 'Deep Blue',\n        base: '#183867',\n        highlight: '#526f9d',\n        button: '#102d56',\n        shadow: '0 30px 70px -22px rgba(18, 45, 91, 0.7), 0 10px 24px -14px rgba(0, 0, 0, 0.55)',\n      },\n      silver: {\n        name: 'Silver',\n        base: '#b9babd',\n        highlight: '#f1f1f2',\n        button: '#9b9ca0',\n        shadow: '0 30px 70px -24px rgba(0, 0, 0, 0.42), 0 10px 24px -14px rgba(0, 0, 0, 0.38)',\n      },\n    }[selected]\n  }\n\n  const selected: GalaxyS26UltraColor =\n    color === 'titanium-gray'\n      ? 'titanium-gray'\n      : color === 'titanium-silver' || color === 'silver' || color === 'natural'\n        ? 'titanium-silver'\n        : color === 'cobalt-violet' || color === 'blue'\n          ? 'cobalt-violet'\n          : 'titanium-black'\n\n  return {\n    'titanium-black': {\n      name: 'Titanium Black',\n      base: '#242426',\n      highlight: '#66666a',\n      button: '#171719',\n      shadow: '0 30px 68px -22px rgba(0, 0, 0, 0.7), 0 10px 24px -14px rgba(0, 0, 0, 0.65)',\n    },\n    'titanium-gray': {\n      name: 'Titanium Gray',\n      base: '#66666a',\n      highlight: '#aaa9ad',\n      button: '#4a4a4e',\n      shadow: '0 30px 68px -24px rgba(0, 0, 0, 0.52), 0 10px 24px -14px rgba(0, 0, 0, 0.5)',\n    },\n    'titanium-silver': {\n      name: 'Titanium Silver',\n      base: '#b9babe',\n      highlight: '#eeeeef',\n      button: '#999a9e',\n      shadow: '0 30px 68px -24px rgba(0, 0, 0, 0.4), 0 10px 24px -14px rgba(0, 0, 0, 0.4)',\n    },\n    'cobalt-violet': {\n      name: 'Cobalt Violet',\n      base: '#4b3a74',\n      highlight: '#8a78b1',\n      button: '#352658',\n      shadow: '0 30px 68px -22px rgba(48, 31, 86, 0.68), 0 10px 24px -14px rgba(0, 0, 0, 0.55)',\n    },\n  }[selected]\n}\n\nconst finish = computed(() => getFinish(resolvedModel.value, props.color))\nconst dataColor = computed(() => finish.value.name.toLowerCase().replaceAll(' ', '-'))\nconst showHome = computed(() => props.showHomeIndicator ?? isIPhone.value)\nconst showNav = computed(() => props.showNavBar ?? !isIPhone.value)\nconst ariaLabel = computed(\n  () => `${isIPhone.value ? 'iPhone 17 Pro' : 'Galaxy S26 Ultra'} preview, ${finish.value.name}`,\n)\n\nconst phoneVars = computed<CSSProperties>(() => {\n  const scale = sizeScale.value\n  const px = (value: number) => `${value * scale}px`\n  const common = {\n    '--phone-finish': finish.value.base,\n    '--phone-finish-highlight': finish.value.highlight,\n    '--phone-button': finish.value.button,\n    '--phone-button-depth': px(3),\n    '--phone-button-radius': px(1.5),\n  }\n\n  if (isIPhone.value) {\n    return {\n      ...common,\n      '--phone-rim': px(2.5),\n      '--phone-bezel': px(7.5),\n      '--phone-outer-radius': px(44),\n      '--phone-bezel-radius': px(41.5),\n      '--phone-screen-radius': px(34),\n      '--phone-island-width': px(88),\n      '--phone-island-height': px(27),\n      '--phone-island-top': px(11),\n      '--phone-status-height': px(44),\n      '--phone-status-padding': px(18),\n      '--phone-status-size': px(12),\n      '--phone-indicator-height': px(5),\n      '--phone-indicator-bottom': px(8),\n    }\n  }\n\n  return {\n    ...common,\n    '--phone-rim': px(2.2),\n    '--phone-bezel': px(5.8),\n    '--phone-outer-radius': px(26.9),\n    '--phone-bezel-radius': px(24.7),\n    '--phone-screen-radius': px(18.9),\n    '--phone-camera-size': px(12),\n    '--phone-camera-top': px(10),\n    '--phone-status-height': px(36),\n    '--phone-status-padding': px(16),\n    '--phone-status-size': px(12),\n    '--phone-indicator-height': px(4),\n    '--phone-indicator-bottom': px(8),\n  }\n})\n\nconst chassisStyle = computed<CSSProperties>(() => ({\n  aspectRatio: aspectRatio.value,\n  borderRadius: 'var(--phone-outer-radius)',\n  background:\n    'linear-gradient(115deg, var(--phone-finish-highlight) 0%, var(--phone-finish) 38%, color-mix(in srgb, var(--phone-finish) 72%, black) 100%)',\n  boxShadow: finish.value.shadow,\n}))\n\nconst leftButtonStyle: CSSProperties = {\n  width: 'var(--phone-button-depth)',\n  borderRadius: 'var(--phone-button-radius) 0 0 var(--phone-button-radius)',\n}\n\nconst rightButtonStyle: CSSProperties = {\n  width: 'var(--phone-button-depth)',\n  borderRadius: '0 var(--phone-button-radius) var(--phone-button-radius) 0',\n}\n</script>\n\n<template>\n  <div\n    data-uipkge\n    data-slot=\"phone\"\n    :data-model=\"resolvedModel\"\n    :data-size=\"size\"\n    :data-color=\"dataColor\"\n    role=\"group\"\n    :aria-label=\"ariaLabel\"\n    :class=\"cn('relative inline-block max-w-full select-none', sizeClass, props.class)\"\n    :style=\"phoneVars\"\n  >\n    <div data-slot=\"phone-chassis\" class=\"relative w-full\" :style=\"chassisStyle\">\n      <div\n        aria-hidden=\"true\"\n        class=\"pointer-events-none absolute inset-0 z-30 border border-white/25 shadow-[inset_0_0_1px_1px_rgba(255,255,255,0.18),inset_0_0_3px_rgba(0,0,0,0.5)]\"\n        :style=\"{ borderRadius: 'var(--phone-outer-radius)' }\"\n      />\n\n      <template v-if=\"isIPhone\">\n        <div\n          data-slot=\"phone-action-button\"\n          data-side=\"left\"\n          aria-hidden=\"true\"\n          class=\"absolute top-[15.8%] left-0 h-[4.8%] -translate-x-full bg-[var(--phone-button)] shadow-[inset_1px_0_rgba(255,255,255,0.22)]\"\n          :style=\"leftButtonStyle\"\n        />\n        <div\n          data-slot=\"phone-volume-button\"\n          data-control=\"up\"\n          data-side=\"left\"\n          aria-hidden=\"true\"\n          class=\"absolute top-[23.3%] left-0 h-[7.2%] -translate-x-full bg-[var(--phone-button)] shadow-[inset_1px_0_rgba(255,255,255,0.22)]\"\n          :style=\"leftButtonStyle\"\n        />\n        <div\n          data-slot=\"phone-volume-button\"\n          data-control=\"down\"\n          data-side=\"left\"\n          aria-hidden=\"true\"\n          class=\"absolute top-[32.2%] left-0 h-[7.2%] -translate-x-full bg-[var(--phone-button)] shadow-[inset_1px_0_rgba(255,255,255,0.22)]\"\n          :style=\"leftButtonStyle\"\n        />\n        <div\n          data-slot=\"phone-side-button\"\n          data-side=\"right\"\n          aria-hidden=\"true\"\n          class=\"absolute top-[24.1%] right-0 h-[12.2%] translate-x-full bg-[var(--phone-button)] shadow-[inset_-1px_0_rgba(255,255,255,0.22)]\"\n          :style=\"rightButtonStyle\"\n        />\n        <div\n          data-slot=\"phone-camera-control\"\n          data-side=\"right\"\n          aria-hidden=\"true\"\n          class=\"absolute top-[68.5%] right-0 h-[8.7%] translate-x-full bg-[var(--phone-button)] shadow-[inset_-1px_0_rgba(255,255,255,0.22)]\"\n          :style=\"rightButtonStyle\"\n        />\n      </template>\n      <template v-else>\n        <div\n          data-slot=\"phone-volume-button\"\n          data-side=\"right\"\n          aria-hidden=\"true\"\n          class=\"absolute top-[17.2%] right-0 h-[13.8%] translate-x-full bg-[var(--phone-button)] shadow-[inset_-1px_0_rgba(255,255,255,0.22)]\"\n          :style=\"rightButtonStyle\"\n        />\n        <div\n          data-slot=\"phone-side-button\"\n          data-side=\"right\"\n          aria-hidden=\"true\"\n          class=\"absolute top-[33.1%] right-0 h-[8.9%] translate-x-full bg-[var(--phone-button)] shadow-[inset_-1px_0_rgba(255,255,255,0.22)]\"\n          :style=\"rightButtonStyle\"\n        />\n      </template>\n\n      <div\n        data-slot=\"phone-bezel\"\n        aria-hidden=\"true\"\n        class=\"absolute bg-[#050506] shadow-[inset_0_0_1px_rgba(255,255,255,0.32)]\"\n        :style=\"{ inset: 'var(--phone-rim)', borderRadius: 'var(--phone-bezel-radius)' }\"\n      />\n\n      <div\n        data-slot=\"phone-screen\"\n        class=\"bg-background text-foreground absolute overflow-hidden\"\n        :style=\"{\n          inset: 'calc(var(--phone-rim) + var(--phone-bezel))',\n          borderRadius: 'var(--phone-screen-radius)',\n        }\"\n      >\n        <div data-slot=\"phone-content\" class=\"absolute inset-0 z-10 overflow-auto\">\n          <slot />\n        </div>\n\n        <div\n          v-if=\"isIPhone\"\n          data-slot=\"phone-island\"\n          aria-hidden=\"true\"\n          class=\"absolute left-1/2 z-40 -translate-x-1/2 rounded-full bg-[#050506] shadow-[0_1px_2px_rgba(0,0,0,0.55)]\"\n          :style=\"{\n            top: 'var(--phone-island-top)',\n            width: 'var(--phone-island-width)',\n            height: 'var(--phone-island-height)',\n          }\"\n        >\n          <span\n            class=\"absolute top-1/2 right-[9%] aspect-square h-[36%] -translate-y-1/2 rounded-full bg-[#101929] ring-1 ring-[#172c4a]\"\n          >\n            <span class=\"absolute top-[16%] left-[18%] size-[28%] rounded-full bg-white/25\" />\n          </span>\n        </div>\n        <div\n          v-else\n          data-slot=\"phone-camera\"\n          aria-hidden=\"true\"\n          class=\"absolute left-1/2 z-40 -translate-x-1/2 rounded-full bg-[#07090c] shadow-[0_0_0_1px_rgba(255,255,255,0.12)]\"\n          :style=\"{\n            top: 'var(--phone-camera-top)',\n            width: 'var(--phone-camera-size)',\n            height: 'var(--phone-camera-size)',\n          }\"\n        >\n          <span class=\"absolute inset-[24%] rounded-full bg-[#11243d]\" />\n        </div>\n\n        <div\n          v-if=\"showStatusBar\"\n          data-slot=\"phone-status-bar\"\n          aria-hidden=\"true\"\n          class=\"pointer-events-none absolute inset-x-0 top-0 z-30 flex items-center justify-between font-semibold text-current\"\n          :style=\"{\n            height: 'var(--phone-status-height)',\n            paddingInline: 'var(--phone-status-padding)',\n            fontSize: 'var(--phone-status-size)',\n          }\"\n        >\n          <span class=\"leading-none tabular-nums\">{{ time }}</span>\n          <div class=\"flex items-center gap-[0.28em]\">\n            <svg viewBox=\"0 0 16 12\" class=\"h-[0.78em] w-[1.05em]\" fill=\"currentColor\" aria-hidden=\"true\">\n              <path d=\"M1 11h2V8H1v3Zm4 0h2V6H5v5Zm4 0h2V3H9v8Zm4 0h2V0h-2v11Z\" />\n            </svg>\n            <svg viewBox=\"0 0 16 12\" class=\"h-[0.78em] w-[1.05em]\" fill=\"currentColor\" aria-hidden=\"true\">\n              <path\n                d=\"M8 10.5a1.2 1.2 0 1 0 0 2.4 1.2 1.2 0 0 0 0-2.4ZM3.8 7.3l1.3 1.3a4.1 4.1 0 0 1 5.8 0l1.3-1.3a6 6 0 0 0-8.4 0ZM1 4.5l1.3 1.3a8 8 0 0 1 11.4 0L15 4.5a9.9 9.9 0 0 0-14 0Z\"\n              />\n            </svg>\n            <span class=\"relative h-[0.82em] w-[1.65em] rounded-[0.2em] border-[0.12em] border-current\">\n              <span class=\"absolute inset-[0.13em] right-[28%] rounded-[0.08em] bg-current\" />\n              <span class=\"absolute top-[28%] -right-[0.22em] h-[44%] w-[0.12em] rounded-r-full bg-current/65\" />\n            </span>\n          </div>\n        </div>\n\n        <div\n          v-if=\"(isIPhone && showHome) || (!isIPhone && showNav)\"\n          :data-slot=\"isIPhone ? 'phone-home-indicator' : 'phone-nav-bar'\"\n          aria-hidden=\"true\"\n          class=\"pointer-events-none absolute inset-x-0 z-40 flex justify-center\"\n          :style=\"{ bottom: 'var(--phone-indicator-bottom)' }\"\n        >\n          <div\n            :class=\"\n              cn('rounded-full bg-current', isIPhone ? 'w-[36%] max-w-[120px]' : 'w-[27%] max-w-[100px] opacity-55')\n            \"\n            :style=\"{ height: 'var(--phone-indicator-height)' }\"\n          />\n        </div>\n\n        <div\n          aria-hidden=\"true\"\n          class=\"pointer-events-none absolute inset-0 z-50 shadow-[inset_0_0_0_1px_rgba(0,0,0,0.5)]\"\n          :style=\"{ borderRadius: 'var(--phone-screen-radius)' }\"\n        />\n      </div>\n    </div>\n  </div>\n</template>\n",
      "type": "registry:ui",
      "target": "~/app/components/ui/phone/Phone.vue"
    },
    {
      "path": "packages/registry-vue/components/phone/index.ts",
      "content": "export { default as Phone } from './Phone.vue'\nexport type {\n  PhoneModel,\n  PhoneVariant,\n  PhoneSize,\n  PhoneColor,\n  IPhone17ProColor,\n  GalaxyS26UltraColor,\n} from './Phone.vue'\n",
      "type": "registry:ui",
      "target": "~/app/components/ui/phone/index.ts"
    }
  ],
  "dependencies": [],
  "devDependencies": [],
  "registryDependencies": [],
  "description": "Front device frames for iPhone 17 Pro and Galaxy S26 Ultra. Real chassis aspect ratios (71.9×150 / 78.1×163.6), Dynamic Island / punch-hole, side buttons, status bar, home indicator / gesture bar, and official finish colors. Slot in any screen content.",
  "categories": [
    "display",
    "media"
  ]
}