{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "aspect-ratio",
  "title": "Aspect Ratio",
  "type": "registry:ui",
  "files": [
    {
      "path": "packages/registry-angular/components/aspect-ratio/aspect-ratio.component.ts",
      "content": "import { Component, Input, ChangeDetectionStrategy } from '@angular/core'\n\n/**\n * Angular port of UIPKGE AspectRatio (React `AspectRatio` over Radix AspectRatio). Same DOM as\n * Radix: the host is the padding-bottom wrapper (`data-radix-aspect-ratio-wrapper`), and the inner\n * absolutely-positioned div carries `data-slot=\"aspect-ratio\"` and the consumer `class`.\n */\n@Component({\n  changeDetection: ChangeDetectionStrategy.Eager,\n  selector: 'ui-aspect-ratio, [ui-aspect-ratio]',\n  standalone: true,\n  host: {\n    // The consumer `class` is forwarded to the inner box; an attribute binding (not [class]) replaces the\n    // static class=\"...\" Angular stamps on the host, so it isn't applied twice.\n    '[attr.class]': 'hostClass',\n    'data-radix-aspect-ratio-wrapper': '',\n    '[style.position]': '\"relative\"',\n    '[style.width]': '\"100%\"',\n    '[style.padding-bottom]': 'paddingBottom',\n  },\n  template: `<div\n    data-uipkge=\"\"\n    data-slot=\"aspect-ratio\"\n    [class]=\"className ?? ''\"\n    style=\"position: absolute; top: 0; right: 0; bottom: 0; left: 0\"\n  >\n    <ng-content />\n  </div>`,\n})\nexport class UiAspectRatioComponent {\n  /** Width:height ratio (e.g. 16/9, 1, 4/3). Radix default: 1. */\n  @Input() ratio = 1\n  @Input('class') className?: string\n\n  readonly hostClass = 'block'\n\n  get paddingBottom(): string {\n    return `${100 / (Number(this.ratio) || 1)}%`\n  }\n}\n",
      "type": "registry:ui",
      "target": "~/src/app/components/ui/aspect-ratio/aspect-ratio.component.ts"
    },
    {
      "path": "packages/registry-angular/components/aspect-ratio/index.ts",
      "content": "export { UiAspectRatioComponent } from './aspect-ratio.component'\n",
      "type": "registry:ui",
      "target": "~/src/app/components/ui/aspect-ratio/index.ts"
    }
  ],
  "dependencies": [],
  "devDependencies": [],
  "registryDependencies": [],
  "description": "Wraps content (typically images, video, or iframes) at a fixed width:height ratio so it never letterboxes or jumps as it loads. Common ratios: 16/9 for video, 1/1 for avatars, 4/3 for cards.",
  "categories": [
    "layout"
  ]
}