{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "phone", "title": "Phone", "type": "registry:ui", "files": [ { "path": "packages/registry-angular/components/phone/phone.component.ts", "content": "import { Component, Input, booleanAttribute, ChangeDetectionStrategy } from '@angular/core'\nimport { cn } from '@/lib/utils'\n\nexport type PhoneModel = 'iphone-17-pro' | 'galaxy-s26-ultra'\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\ntype Finish = {\n name: string\n base: string\n highlight: string\n shadow: string\n button: string\n}\n\nconst SIZE_CLASSES: Record = {\n sm: 'w-[240px]',\n md: 'w-[300px]',\n lg: 'w-[340px]',\n}\n\nconst SIZE_SCALES: Record = { sm: 0.8, md: 1, lg: 1.133 }\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\nfunction getPhoneVars(model: PhoneModel, scale: number, finish: Finish): Record {\n const px = (value: number) => `${value * scale}px`\n const common = {\n '--phone-finish': finish.base,\n '--phone-finish-highlight': finish.highlight,\n '--phone-button': finish.button,\n '--phone-button-depth': px(3),\n '--phone-button-radius': px(1.5),\n }\n\n if (model === 'iphone-17-pro') {\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\n/**\n * Angular port of UIPKGE Phone. Front device frames for iPhone 17 Pro and\n * Galaxy S26 Ultra with real chassis aspect ratios, Dynamic Island /\n * punch-hole, side buttons, status bar, and finish colors.\n */\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-phone, [ui-phone]',\n standalone: true,\n host: {\n '[attr.data-slot]': '\"phone\"',\n '[attr.data-uipkge]': '\"\"',\n '[attr.data-model]': 'resolvedModel',\n '[attr.data-size]': 'size',\n '[attr.data-color]': 'dataColor',\n '[attr.role]': '\"group\"',\n '[attr.aria-label]': 'ariaLabel',\n '[class]': 'hostClass',\n '[style]': 'phoneVars',\n },\n template: `\n
\n
\n\n @if (isIPhone) {\n \n \n \n \n \n } @else {\n \n \n }\n\n \n\n \n
\n \n
\n\n @if (isIPhone) {\n \n \n \n \n \n } @else {\n \n \n \n }\n\n @if (showStatusBar) {\n \n {{ time }}\n
\n \n \n \n \n \n \n \n \n \n \n
\n \n }\n\n @if ((isIPhone && showHome) || (!isIPhone && showNav)) {\n \n
\n \n }\n\n \n \n \n `,\n})\nexport class UiPhoneComponent {\n @Input() model: PhoneModel = 'iphone-17-pro'\n @Input() size: PhoneSize = 'md'\n @Input() color?: PhoneColor\n @Input({ transform: booleanAttribute }) showStatusBar = true\n @Input() time = '9:41'\n @Input({ transform: booleanAttribute }) showHomeIndicator?: boolean\n @Input({ transform: booleanAttribute }) showNavBar?: boolean\n @Input('class') className?: string\n\n get resolvedModel(): PhoneModel {\n return this.model === 'galaxy-s26-ultra' ? 'galaxy-s26-ultra' : 'iphone-17-pro'\n }\n\n get isIPhone(): boolean {\n return this.resolvedModel === 'iphone-17-pro'\n }\n\n get sizeClass(): string {\n return SIZE_CLASSES[this.size]\n }\n\n get sizeScale(): number {\n return SIZE_SCALES[this.size]\n }\n\n get finish(): Finish {\n return getFinish(this.resolvedModel, this.color)\n }\n\n get dataColor(): string {\n return this.finish.name.toLowerCase().replaceAll(' ', '-')\n }\n\n get indicatorClass(): string {\n return cn('rounded-full bg-current', this.isIPhone ? 'w-[36%] max-w-[120px]' : 'w-[27%] max-w-[100px] opacity-55')\n }\n\n get showHome(): boolean {\n return this.showHomeIndicator ?? this.isIPhone\n }\n\n get showNav(): boolean {\n return this.showNavBar ?? !this.isIPhone\n }\n\n get ariaLabel(): string {\n return `${this.isIPhone ? 'iPhone 17 Pro' : 'Galaxy S26 Ultra'} preview, ${this.finish.name}`\n }\n\n get aspectRatio(): string {\n return this.isIPhone ? '71.9 / 150' : '78.1 / 163.6'\n }\n\n get phoneVars(): Record {\n return getPhoneVars(this.resolvedModel, this.sizeScale, this.finish)\n }\n\n get hostClass(): string {\n return cn('relative inline-block max-w-full select-none', this.sizeClass, this.className)\n }\n\n get chassisStyle(): Record {\n return {\n aspectRatio: this.aspectRatio,\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: this.finish.shadow,\n }\n }\n}\n", "type": "registry:ui", "target": "~/src/app/components/ui/phone/phone.component.ts" }, { "path": "packages/registry-angular/components/phone/index.ts", "content": "export { UiPhoneComponent, type PhoneModel, type PhoneSize, type PhoneColor } from './phone.component'\n", "type": "registry:ui", "target": "~/src/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" ] }