docs(registry): add aspect-ratio

docs/package.json

@@ -25,7 +25,7 @@
     "@ng-icons/core": "^29.5.0",
     "@ng-icons/lucide": "^29.5.0",
     "@ng-icons/radix-icons": "^29.5.0",
-    "@radix-ng/primitives": "^0.13.0",
+    "@radix-ng/primitives": "^0.15.0",
     "astro": "^4.16.6",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",

docs/src/config/docs.ts

@@ -100,6 +100,12 @@ export const docsConfig: TDocsConfig = {
           href: '/docs/components/alert',
           items: [],
         },
+        {
+          title: 'Aspect Ratio',
+          href: '/docs/components/aspect-ratio',
+          items: [],
+          label: 'New',
+        },
         {
           title: 'Avatar',
           href: '/docs/components/avatar',

docs/src/content/docs/components/aspect-ratio.mdx

@@ -0,0 +1,63 @@
+---
+title: Aspect Ratio
+description: Displays content within a desired ratio.
+links:
+  doc: https://www.radix-ng.com/primitives/components/aspect-ratio
+  api: https://www.radix-ng.com/primitives/components/aspect-ratio#api-reference
+---
+
+<ComponentPreview
+  name="aspect-ratio-demo"
+  title="Aspect Ratio"
+  description="A component that displays an image with a 16:9 aspect ratio."
+/>
+
+## Installation
+
+<Tabs defaultValue="cli">
+
+<TabsList>
+  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+<TabsContent value="cli">
+
+```bash
+npx shadcn-ng@latest add aspect-ratio
+```
+
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps>
+
+<Step>Install the following dependencies:</Step>
+
+```bash
+npm install @radix-ng/primitives
+```
+
+<Step>Copy and paste the following code into your project.</Step>
+
+<ComponentSource name="aspect-ratio" />
+
+<Step>Update the import paths to match your project setup.</Step>
+
+</Steps>
+
+</TabsContent>
+
+</Tabs>
+
+## Usage
+
+```ts
+import { UbAspectRatioDirective } from "@/components/ui/aspect-ratio"
+```
+
+```html
+<div ubAspectRatio [ratio]="16 / 9">
+  <img src="..." alt="Image" class="rounded-md object-cover" >
+</div>
+```

docs/src/registry/default/example/aspect-ratio-demo.ts

@@ -0,0 +1,28 @@
+import { UbAspectRatioDirective } from '@/registry/default/ui/aspect-ratio'
+
+import { NgOptimizedImage } from '@angular/common'
+import { Component } from '@angular/core'
+
+@Component({
+  standalone: true,
+  selector: 'aspect-ratio-demo-default',
+  imports: [UbAspectRatioDirective, NgOptimizedImage],
+  template: `
+  <div class="w-96">
+    <div ubAspectRatio [ratio]="16 / 9" class="bg-muted">
+        <img
+          ngSrc="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80"
+          alt="Photo by Drew Beamer"
+          fill
+          class="h-full w-full rounded-md object-cover"
+          ngSrcset="640w, 750w, 828w, 1080w, 1200w, 1920w, 2048w, 3840w"
+          sizes="100vw"
+          style="position: absolute; height: 100%; width: 100%; inset: 0px; color: transparent;"
+        />
+    </div>
+  </div>
+  `,
+})
+export class AspectRatioDemoDefault { }
+
+export default AspectRatioDemoDefault

docs/src/registry/default/ui/aspect-ratio.ts

@@ -0,0 +1,15 @@
+import { Directive } from '@angular/core'
+
+import { RdxAspectRatioDirective } from '@radix-ng/primitives/aspect-ratio'
+
+@Directive({
+  standalone: true,
+  selector: '[ubAspectRatio]',
+  hostDirectives: [
+    {
+      directive: RdxAspectRatioDirective,
+      inputs: ['ratio'],
+    },
+  ],
+})
+export class UbAspectRatioDirective { }

docs/src/registry/new-york/example/aspect-ratio-demo.ts

@@ -0,0 +1,28 @@
+import { UbAspectRatioDirective } from '@/registry/new-york/ui/aspect-ratio'
+
+import { NgOptimizedImage } from '@angular/common'
+import { Component } from '@angular/core'
+
+@Component({
+  standalone: true,
+  selector: 'aspect-ratio-demo-new-york',
+  imports: [UbAspectRatioDirective, NgOptimizedImage],
+  template: `
+  <div class="w-96">
+    <div ubAspectRatio [ratio]="16 / 9" class="bg-muted">
+        <img
+          ngSrc="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80"
+          alt="Photo by Drew Beamer"
+          fill
+          class="h-full w-full rounded-md object-cover"
+          ngSrcset="640w, 750w, 828w, 1080w, 1200w, 1920w, 2048w, 3840w"
+          sizes="100vw"
+          style="position: absolute; height: 100%; width: 100%; inset: 0px; color: transparent;"
+        />
+    </div>
+  </div>
+  `,
+})
+export class AspectRatioDemoNewYork { }
+
+export default AspectRatioDemoNewYork

docs/src/registry/new-york/ui/aspect-ratio.ts

@@ -0,0 +1,15 @@
+import { Directive } from '@angular/core'
+
+import { RdxAspectRatioDirective } from '@radix-ng/primitives/aspect-ratio'
+
+@Directive({
+  standalone: true,
+  selector: '[ubAspectRatio]',
+  hostDirectives: [
+    {
+      directive: RdxAspectRatioDirective,
+      inputs: ['ratio'],
+    },
+  ],
+})
+export class UbAspectRatioDirective { }

docs/src/registry/registry-ui.ts

@@ -34,6 +34,12 @@ export const ui: Registry = [
     type: 'registry:ui',
     files: ['ui/alert.ts'],
   },
+  {
+    name: 'aspect-ratio',
+    type: 'registry:ui',
+    dependencies: ['@radix-ng/primitives'],
+    files: ['ui/aspect-ratio.ts'],
+  },
   {
     name: 'avatar',
     type: 'registry:ui',