@blueprint-platform/components 0.0.0-stage → 0.2.1

package/README.md

@@ -1,3 +1,11 @@
-# Temporary Holding Version
+# components
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+This library was generated with [Nx](https://nx.dev).
+
+## Building
+
+Run `nx build components` to build the library.
+
+## Running unit tests
+
+Run `nx test components` to execute the unit tests via [Jest](https://jestjs.io).

package/dist/generators/ui/files/shared/ui/accordion/src/index.ts

@@ -0,0 +1,16 @@
+import { HlmAccordion } from './lib/hlm-accordion';
+import { HlmAccordionContent } from './lib/hlm-accordion-content';
+import { HlmAccordionItem } from './lib/hlm-accordion-item';
+import { HlmAccordionTrigger } from './lib/hlm-accordion-trigger';
+
+export * from './lib/hlm-accordion';
+export * from './lib/hlm-accordion-content';
+export * from './lib/hlm-accordion-item';
+export * from './lib/hlm-accordion-trigger';
+
+export const HlmAccordionImports = [
+  HlmAccordion,
+  HlmAccordionItem,
+  HlmAccordionContent,
+  HlmAccordionTrigger,
+] as const;

package/dist/generators/ui/files/shared/ui/accordion/src/lib/hlm-accordion-content.ts

@@ -0,0 +1,27 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { BrnAccordionContent } from '@spartan-ng/brain/accordion';
+import { classes } from '@blueprint-platform/ui/utils';
+
+@Component({
+  selector: 'hlm-accordion-content',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  hostDirectives: [{ directive: BrnAccordionContent, inputs: ['style'] }],
+  host: {
+    'data-slot': 'accordion-content',
+  },
+  template: `
+    <div
+      class="pt-0 pb-2.5 [&_a]:hover:text-foreground [&_a]:underline [&_a]:underline-offset-3 [&_p:not(:last-child)]:mb-4"
+    >
+      <ng-content />
+    </div>
+  `,
+})
+export class HlmAccordionContent {
+  constructor() {
+    classes(
+      () =>
+        'text-sm transition-all data-[state=closed]:h-0 data-[state=open]:h-(--brn-accordion-content-height)',
+    );
+  }
+}

package/dist/generators/ui/files/shared/ui/accordion/src/lib/hlm-accordion-item.ts

@@ -0,0 +1,22 @@
+import { Directive } from '@angular/core';
+import { BrnAccordionItem } from '@spartan-ng/brain/accordion';
+import { classes } from '@blueprint-platform/ui/utils';
+
+@Directive({
+  selector: '[hlmAccordionItem],hlm-accordion-item',
+  hostDirectives: [
+    {
+      directive: BrnAccordionItem,
+      inputs: ['isOpened', 'disabled'],
+      outputs: ['openedChange'],
+    },
+  ],
+  host: {
+    'data-slot': 'accordion-item',
+  },
+})
+export class HlmAccordionItem {
+  constructor() {
+    classes(() => 'not-last:border-b flex flex-col');
+  }
+}

package/dist/generators/ui/files/shared/ui/accordion/src/lib/hlm-accordion-trigger.ts

@@ -0,0 +1,40 @@
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
+import { NgIcon, provideIcons } from '@ng-icons/core';
+import { lucideChevronDown, lucideChevronUp } from '@ng-icons/lucide';
+import { BrnAccordionImports } from '@spartan-ng/brain/accordion';
+import { hlm } from '@blueprint-platform/ui/utils';
+import type { ClassValue } from 'clsx';
+
+@Component({
+  selector: 'hlm-accordion-trigger',
+  imports: [BrnAccordionImports, NgIcon],
+  providers: [provideIcons({ lucideChevronDown, lucideChevronUp })],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <h3 brnAccordionHeader class="flex">
+      <button brnAccordionTrigger data-slot="accordion-trigger" [class]="_computedTriggerClass()">
+        <ng-content />
+        <ng-icon
+          name="lucideChevronDown"
+          data-slot="accordion-trigger-icon"
+          class="pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden"
+        />
+        <ng-icon
+          name="lucideChevronUp"
+          data-slot="accordion-trigger-icon"
+          class="pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:inline group-aria-[expanded=false]/accordion-trigger:hidden"
+        />
+      </button>
+    </h3>
+  `,
+})
+export class HlmAccordionTrigger {
+  public readonly triggerClass = input<ClassValue>('');
+
+  protected readonly _computedTriggerClass = computed(() =>
+    hlm(
+      'focus-visible:ring-ring/50 focus-visible:border-ring focus-visible:after:border-ring **:data-[slot=accordion-trigger-icon]:text-muted-foreground! rounded-lg py-2.5 text-start text-sm font-medium hover:underline focus-visible:ring-3 **:data-[slot=accordion-trigger-icon]:ms-auto **:data-[slot=accordion-trigger-icon]:text-[length:--spacing(4)] group/accordion-trigger relative flex flex-1 items-start justify-between border border-transparent transition-all outline-none aria-disabled:pointer-events-none aria-disabled:opacity-50',
+      this.triggerClass(),
+    ),
+  );
+}

package/dist/generators/ui/files/shared/ui/accordion/src/lib/hlm-accordion.ts

@@ -0,0 +1,16 @@
+import { Directive } from '@angular/core';
+import { BrnAccordion } from '@spartan-ng/brain/accordion';
+import { classes } from '@blueprint-platform/ui/utils';
+
+@Directive({
+  selector: '[hlmAccordion], hlm-accordion',
+  hostDirectives: [{ directive: BrnAccordion, inputs: ['type', 'orientation'] }],
+  host: {
+    'data-slot': 'accordion',
+  },
+})
+export class HlmAccordion {
+  constructor() {
+    classes(() => 'flex w-full flex-col');
+  }
+}

package/dist/generators/ui/files/shared/ui/alert/src/index.ts

@@ -0,0 +1,16 @@
+import { HlmAlert } from './lib/hlm-alert';
+import { HlmAlertAction } from './lib/hlm-alert-action';
+import { HlmAlertDescription } from './lib/hlm-alert-description';
+import { HlmAlertTitle } from './lib/hlm-alert-title';
+
+export * from './lib/hlm-alert';
+export * from './lib/hlm-alert-action';
+export * from './lib/hlm-alert-description';
+export * from './lib/hlm-alert-title';
+
+export const HlmAlertImports = [
+  HlmAlert,
+  HlmAlertAction,
+  HlmAlertDescription,
+  HlmAlertTitle,
+] as const;

package/dist/generators/ui/files/shared/ui/alert/src/lib/hlm-alert-action.ts

@@ -0,0 +1,14 @@
+import { Directive } from '@angular/core';
+import { classes } from '@blueprint-platform/ui/utils';
+
+@Directive({
+  selector: '[hlmAlertAction]',
+  host: {
+    'data-slot': 'alert-action',
+  },
+})
+export class HlmAlertAction {
+  constructor() {
+    classes(() => 'absolute end-2 top-2');
+  }
+}

package/dist/generators/ui/files/shared/ui/alert/src/lib/hlm-alert-description.ts

@@ -0,0 +1,17 @@
+import { Directive } from '@angular/core';
+import { classes } from '@blueprint-platform/ui/utils';
+
+@Directive({
+  selector: '[hlmAlertDescription]',
+  host: {
+    'data-slot': 'alert-description',
+  },
+})
+export class HlmAlertDescription {
+  constructor() {
+    classes(
+      () =>
+        'text-muted-foreground text-sm text-balance md:text-pretty [&_p:not(:last-child)]:mb-4 [&_a]:hover:text-foreground [&_a]:underline [&_a]:underline-offset-3',
+    );
+  }
+}

package/dist/generators/ui/files/shared/ui/alert/src/lib/hlm-alert-title.ts

@@ -0,0 +1,17 @@
+import { Directive } from '@angular/core';
+import { classes } from '@blueprint-platform/ui/utils';
+
+@Directive({
+  selector: '[hlmAlertTitle]',
+  host: {
+    'data-slot': 'alert-title',
+  },
+})
+export class HlmAlertTitle {
+  constructor() {
+    classes(
+      () =>
+        'font-medium group-has-[>ng-icon]/alert:col-start-2 [&_a]:hover:text-foreground [&_a]:underline [&_a]:underline-offset-3',
+    );
+  }
+}

package/dist/generators/ui/files/shared/ui/alert/src/lib/hlm-alert.ts

@@ -0,0 +1,36 @@
+import { Directive, input } from '@angular/core';
+import { classes } from '@blueprint-platform/ui/utils';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+const alertVariants = cva(
+  "grid gap-0.5 rounded-lg border px-2.5 py-2 text-start text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pe-18 has-[>ng-icon]:grid-cols-[auto_1fr] has-[>ng-icon]:gap-x-2 *:[ng-icon]:row-span-2 *:[ng-icon]:translate-y-0.5 *:[ng-icon]:text-current *:[ng-icon:not([class*='text-'])]:text-[length:--spacing(4)] group/alert relative w-full",
+  {
+    variants: {
+      variant: {
+        default: 'bg-card text-card-foreground',
+        destructive:
+          'text-destructive bg-card *:data-[slot=alert-description]:text-destructive/90 *:[ng-icon]:text-current',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+);
+
+export type AlertVariants = VariantProps<typeof alertVariants>;
+
+@Directive({
+  selector: 'hlm-alert,[hlmAlert]',
+  host: {
+    'data-slot': 'alert',
+    role: 'alert',
+  },
+})
+export class HlmAlert {
+  public readonly variant = input<AlertVariants['variant']>('default');
+
+  constructor() {
+    classes(() => alertVariants({ variant: this.variant() }));
+  }
+}

package/dist/generators/ui/files/shared/ui/alert-dialog/src/index.ts

@@ -0,0 +1,40 @@
+import { HlmAlertDialog } from './lib/hlm-alert-dialog';
+import { HlmAlertDialogAction } from './lib/hlm-alert-dialog-action';
+import { HlmAlertDialogCancel } from './lib/hlm-alert-dialog-cancel';
+import { HlmAlertDialogContent } from './lib/hlm-alert-dialog-content';
+import { HlmAlertDialogDescription } from './lib/hlm-alert-dialog-description';
+import { HlmAlertDialogFooter } from './lib/hlm-alert-dialog-footer';
+import { HlmAlertDialogHeader } from './lib/hlm-alert-dialog-header';
+import { HlmAlertDialogMedia } from './lib/hlm-alert-dialog-media';
+import { HlmAlertDialogOverlay } from './lib/hlm-alert-dialog-overlay';
+import { HlmAlertDialogPortal } from './lib/hlm-alert-dialog-portal';
+import { HlmAlertDialogTitle } from './lib/hlm-alert-dialog-title';
+import { HlmAlertDialogTrigger } from './lib/hlm-alert-dialog-trigger';
+
+export * from './lib/hlm-alert-dialog';
+export * from './lib/hlm-alert-dialog-action';
+export * from './lib/hlm-alert-dialog-cancel';
+export * from './lib/hlm-alert-dialog-content';
+export * from './lib/hlm-alert-dialog-description';
+export * from './lib/hlm-alert-dialog-footer';
+export * from './lib/hlm-alert-dialog-header';
+export * from './lib/hlm-alert-dialog-media';
+export * from './lib/hlm-alert-dialog-overlay';
+export * from './lib/hlm-alert-dialog-portal';
+export * from './lib/hlm-alert-dialog-title';
+export * from './lib/hlm-alert-dialog-trigger';
+
+export const HlmAlertDialogImports = [
+  HlmAlertDialog,
+  HlmAlertDialogAction,
+  HlmAlertDialogCancel,
+  HlmAlertDialogContent,
+  HlmAlertDialogDescription,
+  HlmAlertDialogFooter,
+  HlmAlertDialogHeader,
+  HlmAlertDialogMedia,
+  HlmAlertDialogOverlay,
+  HlmAlertDialogPortal,
+  HlmAlertDialogTitle,
+  HlmAlertDialogTrigger,
+] as const;

package/dist/generators/ui/files/shared/ui/alert-dialog/src/lib/hlm-alert-dialog-action.ts

@@ -0,0 +1,11 @@
+import { Directive, input } from '@angular/core';
+import { HlmButton } from '@blueprint-platform/ui/button';
+
+@Directive({
+  selector: 'button[hlmAlertDialogAction]',
+  hostDirectives: [{ directive: HlmButton, inputs: ['variant', 'size'] }],
+  host: { 'data-slot': 'alert-dialog-action', '[type]': 'type()' },
+})
+export class HlmAlertDialogAction {
+  public readonly type = input<'button' | 'submit' | 'reset'>('button');
+}

package/dist/generators/ui/files/shared/ui/alert-dialog/src/lib/hlm-alert-dialog-cancel.ts

@@ -0,0 +1,13 @@
+import { Directive, input } from '@angular/core';
+import { BrnDialogClose } from '@spartan-ng/brain/dialog';
+import { HlmButton, provideBrnButtonConfig } from '@blueprint-platform/ui/button';
+
+@Directive({
+  selector: 'button[hlmAlertDialogCancel]',
+  providers: [provideBrnButtonConfig({ variant: 'outline' })],
+  hostDirectives: [BrnDialogClose, { directive: HlmButton, inputs: ['variant', 'size'] }],
+  host: { 'data-slot': 'alert-dialog-cancel', '[type]': 'type()' },
+})
+export class HlmAlertDialogCancel {
+  public readonly type = input<'button' | 'submit' | 'reset'>('button');
+}

package/dist/generators/ui/files/shared/ui/alert-dialog/src/lib/hlm-alert-dialog-content.ts

@@ -0,0 +1,25 @@
+import { Directive, input, signal } from '@angular/core';
+import { injectExposesStateProvider } from '@spartan-ng/brain/core';
+import { classes } from '@blueprint-platform/ui/utils';
+
+@Directive({
+  selector: '[hlmAlertDialogContent],hlm-alert-dialog-content',
+  host: {
+    'data-slot': 'alert-dialog-content',
+    '[attr.data-state]': 'state()',
+    '[attr.data-size]': 'size()',
+  },
+})
+export class HlmAlertDialogContent {
+  private readonly _stateProvider = injectExposesStateProvider({ optional: true, host: true });
+  public readonly state = this._stateProvider?.state ?? signal('closed');
+
+  public readonly size = input<'sm' | 'default'>('default');
+
+  constructor() {
+    classes(
+      () =>
+        'data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 bg-popover text-popover-foreground ring-foreground/10 gap-4 rounded-xl p-4 ring-1 duration-100 data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-sm group/alert-dialog-content grid w-full outline-none',
+    );
+  }
+}

package/dist/generators/ui/files/shared/ui/alert-dialog/src/lib/hlm-alert-dialog-description.ts

@@ -0,0 +1,17 @@
+import { Directive } from '@angular/core';
+import { BrnAlertDialogDescription } from '@spartan-ng/brain/alert-dialog';
+import { classes } from '@blueprint-platform/ui/utils';
+
+@Directive({
+  selector: '[hlmAlertDialogDescription]',
+  hostDirectives: [BrnAlertDialogDescription],
+  host: { 'data-slot': 'alert-dialog-description' },
+})
+export class HlmAlertDialogDescription {
+  constructor() {
+    classes(
+      () =>
+        'text-muted-foreground *:[a]:hover:text-foreground text-sm text-balance md:text-pretty *:[a]:underline *:[a]:underline-offset-3',
+    );
+  }
+}

package/dist/generators/ui/files/shared/ui/alert-dialog/src/lib/hlm-alert-dialog-footer.ts

@@ -0,0 +1,15 @@
+import { Directive } from '@angular/core';
+import { classes } from '@blueprint-platform/ui/utils';
+
+@Directive({
+  selector: '[hlmAlertDialogFooter],hlm-alert-dialog-footer',
+  host: { 'data-slot': 'alert-dialog-footer' },
+})
+export class HlmAlertDialogFooter {
+  constructor() {
+    classes(
+      () =>
+        'bg-muted/50 -mx-4 -mb-4 rounded-b-xl border-t p-4 flex flex-col-reverse gap-2 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end',
+    );
+  }
+}

package/dist/generators/ui/files/shared/ui/alert-dialog/src/lib/hlm-alert-dialog-header.ts

@@ -0,0 +1,15 @@
+import { Directive } from '@angular/core';
+import { classes } from '@blueprint-platform/ui/utils';
+
+@Directive({
+  selector: '[hlmAlertDialogHeader],hlm-alert-dialog-header',
+  host: { 'data-slot': 'alert-dialog-header' },
+})
+export class HlmAlertDialogHeader {
+  constructor() {
+    classes(
+      () =>
+        'grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-4 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-start sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]',
+    );
+  }
+}

package/dist/generators/ui/files/shared/ui/alert-dialog/src/lib/hlm-alert-dialog-media.ts

@@ -0,0 +1,15 @@
+import { Directive } from '@angular/core';
+import { classes } from '@blueprint-platform/ui/utils';
+
+@Directive({
+  selector: '[hlmAlertDialogMedia],hlm-alert-dialog-media',
+  host: { 'data-slot': 'alert-dialog-media' },
+})
+export class HlmAlertDialogMedia {
+  constructor() {
+    classes(
+      () =>
+        "bg-muted mb-2 inline-flex size-10 items-center justify-center rounded-md sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[ng-icon:not([class*='text-'])]:text-[length:--spacing(6)]",
+    );
+  }
+}

package/dist/generators/ui/files/shared/ui/alert-dialog/src/lib/hlm-alert-dialog-overlay.ts

@@ -0,0 +1,28 @@
+import { Directive, computed, effect, input, untracked } from '@angular/core';
+import { BrnAlertDialogOverlay } from '@spartan-ng/brain/alert-dialog';
+import { injectCustomClassSettable } from '@spartan-ng/brain/core';
+import { hlm } from '@blueprint-platform/ui/utils';
+import type { ClassValue } from 'clsx';
+
+@Directive({
+  selector: '[hlmAlertDialogOverlay],hlm-alert-dialog-overlay',
+  hostDirectives: [BrnAlertDialogOverlay],
+})
+export class HlmAlertDialogOverlay {
+  private readonly _classSettable = injectCustomClassSettable({ optional: true, host: true });
+
+  public readonly userClass = input<ClassValue>('', { alias: 'class' });
+  protected readonly _computedClass = computed(() =>
+    hlm(
+      'data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 isolate bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs',
+      this.userClass(),
+    ),
+  );
+
+  constructor() {
+    effect(() => {
+      const classValue = this._computedClass();
+      untracked(() => this._classSettable?.setClassToCustomElement(classValue));
+    });
+  }
+}

package/dist/generators/ui/files/shared/ui/alert-dialog/src/lib/hlm-alert-dialog-portal.ts

@@ -0,0 +1,8 @@
+import { Directive } from '@angular/core';
+import { BrnAlertDialogContent } from '@spartan-ng/brain/alert-dialog';
+
+@Directive({
+  selector: '[hlmAlertDialogPortal]',
+  hostDirectives: [{ directive: BrnAlertDialogContent, inputs: ['context', 'class'] }],
+})
+export class HlmAlertDialogPortal {}

package/dist/generators/ui/files/shared/ui/alert-dialog/src/lib/hlm-alert-dialog-title.ts

@@ -0,0 +1,17 @@
+import { Directive } from '@angular/core';
+import { BrnAlertDialogTitle } from '@spartan-ng/brain/alert-dialog';
+import { classes } from '@blueprint-platform/ui/utils';
+
+@Directive({
+  selector: '[hlmAlertDialogTitle]',
+  hostDirectives: [BrnAlertDialogTitle],
+  host: { 'data-slot': 'alert-dialog-title' },
+})
+export class HlmAlertDialogTitle {
+  constructor() {
+    classes(
+      () =>
+        'text-base font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2',
+    );
+  }
+}

package/dist/generators/ui/files/shared/ui/alert-dialog/src/lib/hlm-alert-dialog-trigger.ts

@@ -0,0 +1,14 @@
+import { Directive } from '@angular/core';
+import { BrnAlertDialogTrigger } from '@spartan-ng/brain/alert-dialog';
+
+@Directive({
+  selector: 'button[hlmAlertDialogTrigger],button[hlmAlertDialogTriggerFor]',
+  hostDirectives: [
+    {
+      directive: BrnAlertDialogTrigger,
+      inputs: ['id', 'brnAlertDialogTriggerFor: hlmAlertDialogTriggerFor', 'type'],
+    },
+  ],
+  host: { 'data-slot': 'alert-dialog-trigger' },
+})
+export class HlmAlertDialogTrigger {}

package/dist/generators/ui/files/shared/ui/alert-dialog/src/lib/hlm-alert-dialog.ts

@@ -0,0 +1,25 @@
+import { ChangeDetectionStrategy, Component, forwardRef } from '@angular/core';
+import { BRN_ALERT_DIALOG_DEFAULT_OPTIONS, BrnAlertDialog } from '@spartan-ng/brain/alert-dialog';
+import { BrnDialog, provideBrnDialogDefaultOptions } from '@spartan-ng/brain/dialog';
+import { HlmAlertDialogOverlay } from './hlm-alert-dialog-overlay';
+
+@Component({
+  selector: 'hlm-alert-dialog',
+  exportAs: 'hlmAlertDialog',
+  imports: [HlmAlertDialogOverlay],
+  providers: [
+    {
+      provide: BrnDialog,
+      useExisting: forwardRef(() => HlmAlertDialog),
+    },
+    provideBrnDialogDefaultOptions({
+      ...BRN_ALERT_DIALOG_DEFAULT_OPTIONS,
+    }),
+  ],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <hlm-alert-dialog-overlay />
+    <ng-content />
+  `,
+})
+export class HlmAlertDialog extends BrnAlertDialog {}

package/dist/generators/ui/files/shared/ui/aspect-ratio/src/index.ts

@@ -0,0 +1,5 @@
+import { HlmAspectRatio } from './lib/hlm-aspect-ratio';
+
+export * from './lib/hlm-aspect-ratio';
+
+export const HlmAspectRatioImports = [HlmAspectRatio] as const;

package/dist/generators/ui/files/shared/ui/aspect-ratio/src/lib/hlm-aspect-ratio.ts

@@ -0,0 +1,35 @@
+import { type NumberInput, coerceNumberProperty } from '@angular/cdk/coercion';
+import { Directive, input } from '@angular/core';
+import { classes } from '@blueprint-platform/ui/utils';
+
+const parseDividedString = (value: NumberInput): NumberInput => {
+  if (typeof value !== 'string' || !value.includes('/')) return value;
+  return value
+    .split('/')
+    .map((v) => Number.parseInt(v, 10))
+    .reduce((a, b) => a / b);
+};
+
+@Directive({
+  selector: '[hlmAspectRatio]',
+  host: {
+    'data-slot': 'aspect-ratio',
+    '[style.--ratio]': 'ratio()',
+  },
+})
+export class HlmAspectRatio {
+  /**
+   * Aspect ratio of the element, defined as width / height.
+   */
+  public readonly ratio = input<number, NumberInput>(1, {
+    alias: 'hlmAspectRatio',
+    transform: (value: NumberInput) => {
+      const coerced = coerceNumberProperty(parseDividedString(value));
+      return coerced <= 0 ? 1 : coerced;
+    },
+  });
+
+  constructor() {
+    classes(() => 'relative aspect-(--ratio)');
+  }
+}

package/dist/generators/ui/files/shared/ui/attachment/src/index.ts

@@ -0,0 +1,31 @@
+import { HlmAttachment } from './lib/hlm-attachment';
+import { HlmAttachmentAction } from './lib/hlm-attachment-action';
+import { HlmAttachmentActions } from './lib/hlm-attachment-actions';
+import { HlmAttachmentContent } from './lib/hlm-attachment-content';
+import { HlmAttachmentDescription } from './lib/hlm-attachment-description';
+import { HlmAttachmentGroup } from './lib/hlm-attachment-group';
+import { HlmAttachmentMedia } from './lib/hlm-attachment-media';
+import { HlmAttachmentTitle } from './lib/hlm-attachment-title';
+import { HlmAttachmentTrigger } from './lib/hlm-attachment-trigger';
+
+export * from './lib/hlm-attachment';
+export * from './lib/hlm-attachment-action';
+export * from './lib/hlm-attachment-actions';
+export * from './lib/hlm-attachment-content';
+export * from './lib/hlm-attachment-description';
+export * from './lib/hlm-attachment-group';
+export * from './lib/hlm-attachment-media';
+export * from './lib/hlm-attachment-title';
+export * from './lib/hlm-attachment-trigger';
+
+export const HlmAttachmentImports = [
+  HlmAttachment,
+  HlmAttachmentAction,
+  HlmAttachmentActions,
+  HlmAttachmentContent,
+  HlmAttachmentDescription,
+  HlmAttachmentGroup,
+  HlmAttachmentMedia,
+  HlmAttachmentTitle,
+  HlmAttachmentTrigger,
+] as const;

package/dist/generators/ui/files/shared/ui/attachment/src/lib/hlm-attachment-action.ts

@@ -0,0 +1,15 @@
+import { Directive, input } from '@angular/core';
+import { HlmButton, provideBrnButtonConfig } from '@blueprint-platform/ui/button';
+
+@Directive({
+  selector: 'button[hlmAttachmentAction]',
+  providers: [provideBrnButtonConfig({ variant: 'ghost', size: 'icon-xs' })],
+  hostDirectives: [{ directive: HlmButton, inputs: ['variant', 'size'] }],
+  host: {
+    'data-slot': 'attachment-action',
+    '[type]': 'type()',
+  },
+})
+export class HlmAttachmentAction {
+  public readonly type = input<'button' | 'submit' | 'reset'>('button');
+}

package/dist/generators/ui/files/shared/ui/attachment/src/lib/hlm-attachment-actions.ts

@@ -0,0 +1,15 @@
+import { Directive } from '@angular/core';
+import { classes } from '@blueprint-platform/ui/utils';
+
+@Directive({
+  selector: '[hlmAttachmentActions],hlm-attachment-actions',
+  host: { 'data-slot': 'attachment-actions' },
+})
+export class HlmAttachmentActions {
+  constructor() {
+    classes(
+      () =>
+        'shrink-0 items-center relative z-20 flex group-data-[orientation=vertical]/attachment:absolute group-data-[orientation=vertical]/attachment:end-3 group-data-[orientation=vertical]/attachment:top-3 group-data-[orientation=vertical]/attachment:gap-1',
+    );
+  }
+}

package/dist/generators/ui/files/shared/ui/attachment/src/lib/hlm-attachment-content.ts

@@ -0,0 +1,15 @@
+import { Directive } from '@angular/core';
+import { classes } from '@blueprint-platform/ui/utils';
+
+@Directive({
+  selector: '[hlmAttachmentContent],hlm-attachment-content',
+  host: { 'data-slot': 'attachment-content' },
+})
+export class HlmAttachmentContent {
+  constructor() {
+    classes(
+      () =>
+        'min-w-0 flex-1 leading-tight max-w-full group-data-[orientation=vertical]/attachment:px-1',
+    );
+  }
+}

package/dist/generators/ui/files/shared/ui/attachment/src/lib/hlm-attachment-description.ts

@@ -0,0 +1,15 @@
+import { Directive } from '@angular/core';
+import { classes } from '@blueprint-platform/ui/utils';
+
+@Directive({
+  selector: '[hlmAttachmentDescription],hlm-attachment-description',
+  host: { 'data-slot': 'attachment-description' },
+})
+export class HlmAttachmentDescription {
+  constructor() {
+    classes(
+      () =>
+        'text-muted-foreground mt-0.5 truncate text-xs group-data-[state=error]/attachment:text-destructive/80 block max-w-full min-w-0',
+    );
+  }
+}