@spartan-ng/cli 1.2.0-beta.2 → 1.2.0-beta.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spartan-ng/cli",
-  "version": "1.2.0-beta.2",
+  "version": "1.2.0-beta.3",
   "repository": {
     "type": "git",
     "url": "https://github.com/spartan-ng/spartan.git"

package/src/generators/ui/libs/attachment/files/index.ts.template

@@ -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/src/generators/ui/libs/attachment/files/lib/hlm-attachment-action.ts.template

@@ -0,0 +1,15 @@
+import { Directive, input } from '@angular/core';
+import { HlmButton, provideBrnButtonConfig } from '<%- importAlias %>/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/src/generators/ui/libs/attachment/files/lib/hlm-attachment-actions.ts.template

@@ -0,0 +1,15 @@
+import { Directive } from '@angular/core';
+import { classes } from '<%- importAlias %>/utils';
+
+@Directive({
+	selector: '[hlmAttachmentActions],hlm-attachment-actions',
+	host: { 'data-slot': 'attachment-actions' },
+})
+export class HlmAttachmentActions {
+	constructor() {
+		classes(
+			() =>
+				'spartan-attachment-actions 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/src/generators/ui/libs/attachment/files/lib/hlm-attachment-content.ts.template

@@ -0,0 +1,12 @@
+import { Directive } from '@angular/core';
+import { classes } from '<%- importAlias %>/utils';
+
+@Directive({
+	selector: '[hlmAttachmentContent],hlm-attachment-content',
+	host: { 'data-slot': 'attachment-content' },
+})
+export class HlmAttachmentContent {
+	constructor() {
+		classes(() => 'spartan-attachment-content max-w-full group-data-[orientation=vertical]/attachment:px-1');
+	}
+}

package/src/generators/ui/libs/attachment/files/lib/hlm-attachment-description.ts.template

@@ -0,0 +1,15 @@
+import { Directive } from '@angular/core';
+import { classes } from '<%- importAlias %>/utils';
+
+@Directive({
+	selector: '[hlmAttachmentDescription],hlm-attachment-description',
+	host: { 'data-slot': 'attachment-description' },
+})
+export class HlmAttachmentDescription {
+	constructor() {
+		classes(
+			() =>
+				'spartan-attachment-description group-data-[state=error]/attachment:text-destructive/80 block max-w-full min-w-0',
+		);
+	}
+}

package/src/generators/ui/libs/attachment/files/lib/hlm-attachment-group.ts.template

@@ -0,0 +1,15 @@
+import { Directive } from '@angular/core';
+import { classes } from '<%- importAlias %>/utils';
+
+@Directive({
+	selector: '[hlmAttachmentGroup],hlm-attachment-group',
+	host: { 'data-slot': 'attachment-group' },
+})
+export class HlmAttachmentGroup {
+	constructor() {
+		classes(
+			() =>
+				'spartan-attachment-group scroll-fade-x no-scrollbar flex min-w-0 snap-x snap-mandatory scroll-px-1 gap-3 overflow-x-auto overscroll-x-contain py-1 *:data-[slot=attachment]:flex-none *:data-[slot=attachment]:snap-start',
+		);
+	}
+}

package/src/generators/ui/libs/attachment/files/lib/hlm-attachment-media.ts.template

@@ -0,0 +1,35 @@
+import { Directive, input } from '@angular/core';
+import { classes } from '<%- importAlias %>/utils';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+const attachmentMediaVariants = cva(
+	"spartan-attachment-media group-data-[state=error]/attachment:bg-destructive/10 group-data-[state=error]/attachment:text-destructive relative flex aspect-square shrink-0 items-center justify-center overflow-hidden group-data-[orientation=vertical]/attachment:w-full group-data-[size=sm]/attachment:w-8 group-data-[size=xs]/attachment:w-7 [&_ng-icon]:pointer-events-none [&_ng-icon:not([class*='text-'])]:text-[length:--spacing(4)] group-data-[orientation=vertical]/attachment:[&_ng-icon:not([class*='text-'])]:text-[length:--spacing(6)] group-data-[size=xs]/attachment:[&_ng-icon:not([class*='text-'])]:text-[length:--spacing(3.5)]",
+	{
+		variants: {
+			variant: {
+				icon: 'spartan-attachment-media-variant-icon',
+				image: 'spartan-attachment-media-variant-image *:[img]:aspect-square *:[img]:w-full *:[img]:object-cover',
+			},
+		},
+		defaultVariants: {
+			variant: 'icon',
+		},
+	},
+);
+
+export type AttachmentMediaVariants = VariantProps<typeof attachmentMediaVariants>;
+
+@Directive({
+	selector: '[hlmAttachmentMedia],hlm-attachment-media',
+	host: {
+		'data-slot': 'attachment-media',
+		'[attr.data-variant]': 'variant()',
+	},
+})
+export class HlmAttachmentMedia {
+	public readonly variant = input<AttachmentMediaVariants['variant']>('icon');
+
+	constructor() {
+		classes(() => attachmentMediaVariants({ variant: this.variant() }));
+	}
+}

package/src/generators/ui/libs/attachment/files/lib/hlm-attachment-title.ts.template

@@ -0,0 +1,15 @@
+import { Directive } from '@angular/core';
+import { classes } from '<%- importAlias %>/utils';
+
+@Directive({
+	selector: '[hlmAttachmentTitle],hlm-attachment-title',
+	host: { 'data-slot': 'attachment-title' },
+})
+export class HlmAttachmentTitle {
+	constructor() {
+		classes(
+			() =>
+				'spartan-attachment-title group-data-[state=processing]/attachment:shimmer group-data-[state=uploading]/attachment:shimmer block max-w-full min-w-0',
+		);
+	}
+}

package/src/generators/ui/libs/attachment/files/lib/hlm-attachment-trigger.ts.template

@@ -0,0 +1,23 @@
+import { computed, Directive, ElementRef, inject, input } from '@angular/core';
+import { classes } from '<%- importAlias %>/utils';
+
+@Directive({
+	selector: 'button[hlmAttachmentTrigger],a[hlmAttachmentTrigger]',
+	host: {
+		'data-slot': 'attachment-trigger',
+		'[attr.type]': '_hostType()',
+	},
+})
+export class HlmAttachmentTrigger {
+	private readonly _elementRef = inject(ElementRef<HTMLElement>);
+
+	public readonly type = input<'button' | 'submit' | 'reset' | null>('button');
+
+	protected readonly _hostType = computed(() =>
+		this._elementRef.nativeElement.localName === 'button' ? this.type() : null,
+	);
+
+	constructor() {
+		classes(() => 'spartan-attachment-trigger');
+	}
+}

package/src/generators/ui/libs/attachment/files/lib/hlm-attachment.ts.template

@@ -0,0 +1,47 @@
+import { Directive, input } from '@angular/core';
+import { classes } from '<%- importAlias %>/utils';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+const attachmentVariants = cva(
+	'spartan-attachment group/attachment focus-within:ring-ring/50 has-[>a,>button]:hover:bg-muted/50 data-[state=error]:border-destructive/30 relative flex w-fit max-w-full min-w-0 shrink-0 flex-wrap transition-colors focus-within:ring-1 data-[state=idle]:border-dashed',
+	{
+		variants: {
+			size: {
+				default:
+					'spartan-attachment-size-default gap-2 text-sm has-data-[slot=attachment-content]:px-2.5 has-data-[slot=attachment-content]:py-2 has-data-[slot=attachment-media]:p-2',
+				sm: 'spartan-attachment-size-sm gap-2.5 text-xs has-data-[slot=attachment-content]:px-2 has-data-[slot=attachment-content]:py-1.5 has-data-[slot=attachment-media]:p-1.5',
+				xs: 'spartan-attachment-size-xs gap-1.5 text-xs has-data-[slot=attachment-content]:px-1.5 has-data-[slot=attachment-content]:py-1 has-data-[slot=attachment-media]:p-1',
+			},
+			orientation: {
+				horizontal: 'spartan-attachment-orientation-horizontal min-w-40 items-center',
+				vertical: 'spartan-attachment-orientation-vertical w-24 flex-col has-data-[slot=attachment-content]:w-30',
+			},
+		},
+		defaultVariants: {
+			size: 'default',
+			orientation: 'horizontal',
+		},
+	},
+);
+
+export type AttachmentVariants = VariantProps<typeof attachmentVariants>;
+export type AttachmentState = 'idle' | 'uploading' | 'processing' | 'error' | 'done';
+
+@Directive({
+	selector: '[hlmAttachment],hlm-attachment',
+	host: {
+		'data-slot': 'attachment',
+		'[attr.data-state]': 'state()',
+		'[attr.data-size]': 'size()',
+		'[attr.data-orientation]': 'orientation()',
+	},
+})
+export class HlmAttachment {
+	public readonly state = input<AttachmentState>('done');
+	public readonly size = input<AttachmentVariants['size']>('default');
+	public readonly orientation = input<AttachmentVariants['orientation']>('horizontal');
+
+	constructor() {
+		classes(() => attachmentVariants({ size: this.size(), orientation: this.orientation() }));
+	}
+}

package/src/generators/ui/libs/attachment/generator.d.ts

@@ -0,0 +1,3 @@
+import type { Tree } from '@nx/devkit';
+import type { HlmBaseGeneratorSchema } from '../../../base/schema';
+export declare function generator(tree: Tree, options: HlmBaseGeneratorSchema): Promise<import("@nx/devkit").GeneratorCallback>;

package/src/generators/ui/libs/attachment/generator.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.generator = generator;
+const tslib_1 = require("tslib");
+const generator_1 = tslib_1.__importDefault(require("../../../base/generator"));
+async function generator(tree, options) {
+    return await (0, generator_1.default)(tree, { ...options, name: 'attachment' });
+}
+//# sourceMappingURL=generator.js.map

package/src/generators/ui/libs/attachment/generator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"generator.js","sourceRoot":"","sources":["../../../../../../../../libs/cli/src/generators/ui/libs/attachment/generator.ts"],"names":[],"mappings":";;AAIA,8BAEC;;AALD,gFAAuD;AAGhD,KAAK,UAAU,SAAS,CAAC,IAAU,EAAE,OAA+B;IAC1E,OAAO,MAAM,IAAA,mBAAgB,EAAC,IAAI,EAAE,EAAE,GAAG,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,CAAC,CAAC;AACzE,CAAC"}

package/src/generators/ui/libs/bubble/files/index.ts.template

@@ -0,0 +1,11 @@
+import { HlmBubble } from './lib/hlm-bubble';
+import { HlmBubbleContent } from './lib/hlm-bubble-content';
+import { HlmBubbleGroup } from './lib/hlm-bubble-group';
+import { HlmBubbleReactions } from './lib/hlm-bubble-reactions';
+
+export * from './lib/hlm-bubble';
+export * from './lib/hlm-bubble-content';
+export * from './lib/hlm-bubble-group';
+export * from './lib/hlm-bubble-reactions';
+
+export const HlmBubbleImports = [HlmBubble, HlmBubbleContent, HlmBubbleGroup, HlmBubbleReactions] as const;

package/src/generators/ui/libs/bubble/files/lib/hlm-bubble-content.ts.template

@@ -0,0 +1,15 @@
+import { Directive } from '@angular/core';
+import { classes } from '<%- importAlias %>/utils';
+
+@Directive({
+	selector: '[hlmBubbleContent],hlm-bubble-content',
+	host: { 'data-slot': 'bubble-content' },
+})
+export class HlmBubbleContent {
+	constructor() {
+		classes(
+			() =>
+				'spartan-bubble-content [button,a]:focus-visible:border-ring [button,a]:focus-visible:ring-ring/50 w-fit max-w-full min-w-0 overflow-hidden border border-transparent wrap-break-word group-data-[align=end]/bubble:self-end [button]:text-start [button,a]:transition-colors [button,a]:outline-none [button,a]:focus-visible:ring-3',
+		);
+	}
+}

package/src/generators/ui/libs/bubble/files/lib/hlm-bubble-group.ts.template

@@ -0,0 +1,12 @@
+import { Directive } from '@angular/core';
+import { classes } from '<%- importAlias %>/utils';
+
+@Directive({
+	selector: '[hlmBubbleGroup],hlm-bubble-group',
+	host: { 'data-slot': 'bubble-group' },
+})
+export class HlmBubbleGroup {
+	constructor() {
+		classes(() => 'spartan-bubble-group flex min-w-0 flex-col');
+	}
+}

package/src/generators/ui/libs/bubble/files/lib/hlm-bubble-reactions.ts.template

@@ -0,0 +1,43 @@
+import { Directive, input } from '@angular/core';
+import { classes } from '<%- importAlias %>/utils';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+const bubbleReactionsVariants = cva(
+	'spartan-bubble-reactions absolute z-10 flex w-fit shrink-0 items-center justify-center has-[button]:p-0',
+	{
+		variants: {
+			side: {
+				top: 'top-0 -translate-y-3/4',
+				bottom: 'bottom-0 translate-y-3/4',
+			},
+			align: {
+				start: 'start-3',
+				end: 'end-3',
+			},
+		},
+		defaultVariants: {
+			side: 'bottom',
+			align: 'end',
+		},
+	},
+);
+
+export type BubbleReactionsVariants = VariantProps<typeof bubbleReactionsVariants>;
+
+@Directive({
+	selector: '[hlmBubbleReactions],hlm-bubble-reactions',
+	host: {
+		'data-slot': 'bubble-reactions',
+		'[attr.data-align]': 'align()',
+		'[attr.data-side]': 'side()',
+		'[attr.align]': 'null',
+	},
+})
+export class HlmBubbleReactions {
+	public readonly side = input<BubbleReactionsVariants['side']>('bottom');
+	public readonly align = input<BubbleReactionsVariants['align']>('end');
+
+	constructor() {
+		classes(() => bubbleReactionsVariants({ side: this.side(), align: this.align() }));
+	}
+}

package/src/generators/ui/libs/bubble/files/lib/hlm-bubble.ts.template

@@ -0,0 +1,46 @@
+import { Directive, input } from '@angular/core';
+import { classes } from '<%- importAlias %>/utils';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+const bubbleVariants = cva(
+	'spartan-bubble group/bubble relative flex w-fit min-w-0 flex-col group-data-[align=end]/message:self-end data-[align=end]:self-end data-[variant=ghost]:max-w-full',
+	{
+		variants: {
+			variant: {
+				default: 'spartan-bubble-variant-default',
+				secondary: 'spartan-bubble-variant-secondary',
+				muted: 'spartan-bubble-variant-muted',
+				tinted: 'spartan-bubble-variant-tinted',
+				outline: 'spartan-bubble-variant-outline',
+				ghost: 'spartan-bubble-variant-ghost',
+				destructive: 'spartan-bubble-variant-destructive',
+			},
+		},
+		defaultVariants: {
+			variant: 'default',
+		},
+	},
+);
+
+export type BubbleVariants = VariantProps<typeof bubbleVariants>;
+export type BubbleAlign = 'start' | 'end';
+
+@Directive({
+	selector: '[hlmBubble],hlm-bubble',
+	host: {
+		'data-slot': 'bubble',
+		'[attr.data-variant]': 'variant()',
+		'[attr.data-align]': 'align()',
+		// Prevent the legacy HTML `align` attribute (from `align="end"` bindings) from
+		// forcing text-align on the bubble content.
+		'[attr.align]': 'null',
+	},
+})
+export class HlmBubble {
+	public readonly variant = input<BubbleVariants['variant']>('default');
+	public readonly align = input<BubbleAlign>('start');
+
+	constructor() {
+		classes(() => bubbleVariants({ variant: this.variant() }));
+	}
+}

package/src/generators/ui/libs/bubble/generator.d.ts

@@ -0,0 +1,3 @@
+import type { Tree } from '@nx/devkit';
+import type { HlmBaseGeneratorSchema } from '../../../base/schema';
+export declare function generator(tree: Tree, options: HlmBaseGeneratorSchema): Promise<import("@nx/devkit").GeneratorCallback>;

package/src/generators/ui/libs/bubble/generator.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.generator = generator;
+const tslib_1 = require("tslib");
+const generator_1 = tslib_1.__importDefault(require("../../../base/generator"));
+async function generator(tree, options) {
+    return await (0, generator_1.default)(tree, { ...options, name: 'bubble' });
+}
+//# sourceMappingURL=generator.js.map

package/src/generators/ui/libs/bubble/generator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"generator.js","sourceRoot":"","sources":["../../../../../../../../libs/cli/src/generators/ui/libs/bubble/generator.ts"],"names":[],"mappings":";;AAIA,8BAEC;;AALD,gFAAuD;AAGhD,KAAK,UAAU,SAAS,CAAC,IAAU,EAAE,OAA+B;IAC1E,OAAO,MAAM,IAAA,mBAAgB,EAAC,IAAI,EAAE,EAAE,GAAG,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC,CAAC;AACrE,CAAC"}

package/src/generators/ui/libs/marker/files/index.ts.template

@@ -0,0 +1,9 @@
+import { HlmMarker } from './lib/hlm-marker';
+import { HlmMarkerContent } from './lib/hlm-marker-content';
+import { HlmMarkerIcon } from './lib/hlm-marker-icon';
+
+export * from './lib/hlm-marker';
+export * from './lib/hlm-marker-content';
+export * from './lib/hlm-marker-icon';
+
+export const HlmMarkerImports = [HlmMarker, HlmMarkerContent, HlmMarkerIcon] as const;

package/src/generators/ui/libs/marker/files/lib/hlm-marker-content.ts.template

@@ -0,0 +1,15 @@
+import { Directive } from '@angular/core';
+import { classes } from '<%- importAlias %>/utils';
+
+@Directive({
+	selector: '[hlmMarkerContent],hlm-marker-content',
+	host: { 'data-slot': 'marker-content' },
+})
+export class HlmMarkerContent {
+	constructor() {
+		classes(
+			() =>
+				'spartan-marker-content *:[a]:hover:text-foreground wrap-break-word group-data-[variant=separator]/marker:flex-none group-data-[variant=separator]/marker:text-center *:[a]:underline *:[a]:underline-offset-3',
+		);
+	}
+}

package/src/generators/ui/libs/marker/files/lib/hlm-marker-icon.ts.template

@@ -0,0 +1,15 @@
+import { Directive } from '@angular/core';
+import { classes } from '<%- importAlias %>/utils';
+
+@Directive({
+	selector: '[hlmMarkerIcon],hlm-marker-icon',
+	host: {
+		'data-slot': 'marker-icon',
+		'aria-hidden': 'true',
+	},
+})
+export class HlmMarkerIcon {
+	constructor() {
+		classes(() => "spartan-marker-icon [&_ng-icon:not([class*='text-'])]:text-[length:--spacing(4)]");
+	}
+}

package/src/generators/ui/libs/marker/files/lib/hlm-marker.ts.template

@@ -0,0 +1,36 @@
+import { Directive, input } from '@angular/core';
+import { classes } from '<%- importAlias %>/utils';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+const markerVariants = cva(
+	"spartan-marker group/marker [a]:hover:text-foreground relative flex min-h-4 w-full items-center text-start text-sm [&_ng-icon:not([class*='text-'])]:text-[length:--spacing(4)] [a]:underline [a]:underline-offset-3",
+	{
+		variants: {
+			variant: {
+				default: 'spartan-marker-variant-default',
+				separator: 'spartan-marker-variant-separator',
+				border: 'spartan-marker-variant-border',
+			},
+		},
+		defaultVariants: {
+			variant: 'default',
+		},
+	},
+);
+
+export type MarkerVariants = VariantProps<typeof markerVariants>;
+
+@Directive({
+	selector: '[hlmMarker],hlm-marker',
+	host: {
+		'data-slot': 'marker',
+		'[attr.data-variant]': 'variant()',
+	},
+})
+export class HlmMarker {
+	public readonly variant = input<MarkerVariants['variant']>('default');
+
+	constructor() {
+		classes(() => markerVariants({ variant: this.variant() }));
+	}
+}

package/src/generators/ui/libs/marker/generator.d.ts

@@ -0,0 +1,3 @@
+import type { Tree } from '@nx/devkit';
+import type { HlmBaseGeneratorSchema } from '../../../base/schema';
+export declare function generator(tree: Tree, options: HlmBaseGeneratorSchema): Promise<import("@nx/devkit").GeneratorCallback>;

package/src/generators/ui/libs/marker/generator.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.generator = generator;
+const tslib_1 = require("tslib");
+const generator_1 = tslib_1.__importDefault(require("../../../base/generator"));
+async function generator(tree, options) {
+    return await (0, generator_1.default)(tree, { ...options, name: 'marker' });
+}
+//# sourceMappingURL=generator.js.map

package/src/generators/ui/libs/marker/generator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"generator.js","sourceRoot":"","sources":["../../../../../../../../libs/cli/src/generators/ui/libs/marker/generator.ts"],"names":[],"mappings":";;AAIA,8BAEC;;AALD,gFAAuD;AAGhD,KAAK,UAAU,SAAS,CAAC,IAAU,EAAE,OAA+B;IAC1E,OAAO,MAAM,IAAA,mBAAgB,EAAC,IAAI,EAAE,EAAE,GAAG,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC,CAAC;AACrE,CAAC"}

package/src/generators/ui/libs/message/files/index.ts.template

@@ -0,0 +1,22 @@
+import { HlmMessage } from './lib/hlm-message';
+import { HlmMessageAvatar } from './lib/hlm-message-avatar';
+import { HlmMessageContent } from './lib/hlm-message-content';
+import { HlmMessageFooter } from './lib/hlm-message-footer';
+import { HlmMessageGroup } from './lib/hlm-message-group';
+import { HlmMessageHeader } from './lib/hlm-message-header';
+
+export * from './lib/hlm-message';
+export * from './lib/hlm-message-avatar';
+export * from './lib/hlm-message-content';
+export * from './lib/hlm-message-footer';
+export * from './lib/hlm-message-group';
+export * from './lib/hlm-message-header';
+
+export const HlmMessageImports = [
+	HlmMessage,
+	HlmMessageAvatar,
+	HlmMessageContent,
+	HlmMessageFooter,
+	HlmMessageGroup,
+	HlmMessageHeader,
+] as const;

package/src/generators/ui/libs/message/files/lib/hlm-message-avatar.ts.template

@@ -0,0 +1,15 @@
+import { Directive } from '@angular/core';
+import { classes } from '<%- importAlias %>/utils';
+
+@Directive({
+	selector: '[hlmMessageAvatar],hlm-message-avatar',
+	host: { 'data-slot': 'message-avatar' },
+})
+export class HlmMessageAvatar {
+	constructor() {
+		classes(
+			() =>
+				'spartan-message-avatar flex w-fit shrink-0 items-center justify-center self-end overflow-hidden group-has-data-[slot=message-footer]/message:-translate-y-8',
+		);
+	}
+}

package/src/generators/ui/libs/message/files/lib/hlm-message-content.ts.template

@@ -0,0 +1,15 @@
+import { Directive } from '@angular/core';
+import { classes } from '<%- importAlias %>/utils';
+
+@Directive({
+	selector: '[hlmMessageContent],hlm-message-content',
+	host: { 'data-slot': 'message-content' },
+})
+export class HlmMessageContent {
+	constructor() {
+		classes(
+			() =>
+				'spartan-message-content flex w-full min-w-0 flex-col wrap-break-word group-data-[align=end]/message:*:data-slot:self-end',
+		);
+	}
+}

package/src/generators/ui/libs/message/files/lib/hlm-message-footer.ts.template

@@ -0,0 +1,15 @@
+import { Directive } from '@angular/core';
+import { classes } from '<%- importAlias %>/utils';
+
+@Directive({
+	selector: '[hlmMessageFooter],hlm-message-footer',
+	host: { 'data-slot': 'message-footer' },
+})
+export class HlmMessageFooter {
+	constructor() {
+		classes(
+			() =>
+				'spartan-message-footer flex max-w-full min-w-0 items-center group-has-data-[variant=ghost]/message:px-0 group-data-[align=end]/message:justify-end',
+		);
+	}
+}

package/src/generators/ui/libs/message/files/lib/hlm-message-group.ts.template

@@ -0,0 +1,12 @@
+import { Directive } from '@angular/core';
+import { classes } from '<%- importAlias %>/utils';
+
+@Directive({
+	selector: '[hlmMessageGroup],hlm-message-group',
+	host: { 'data-slot': 'message-group' },
+})
+export class HlmMessageGroup {
+	constructor() {
+		classes(() => 'spartan-message-group flex min-w-0 flex-col');
+	}
+}

package/src/generators/ui/libs/message/files/lib/hlm-message-header.ts.template

@@ -0,0 +1,14 @@
+import { Directive } from '@angular/core';
+import { classes } from '<%- importAlias %>/utils';
+
+@Directive({
+	selector: '[hlmMessageHeader],hlm-message-header',
+	host: { 'data-slot': 'message-header' },
+})
+export class HlmMessageHeader {
+	constructor() {
+		classes(
+			() => 'spartan-message-header flex max-w-full min-w-0 items-center group-has-data-[variant=ghost]/message:px-0',
+		);
+	}
+}

package/src/generators/ui/libs/message/files/lib/hlm-message.ts.template

@@ -0,0 +1,21 @@
+import { Directive, input } from '@angular/core';
+import { classes } from '<%- importAlias %>/utils';
+
+export type MessageAlign = 'start' | 'end';
+
+@Directive({
+	selector: '[hlmMessage],hlm-message',
+	host: {
+		'data-slot': 'message',
+		'[attr.data-align]': 'align()',
+		// Prevent the legacy HTML `align` attribute from forcing text-align.
+		'[attr.align]': 'null',
+	},
+})
+export class HlmMessage {
+	public readonly align = input<MessageAlign>('start');
+
+	constructor() {
+		classes(() => 'spartan-message group/message relative flex w-full min-w-0 data-[align=end]:flex-row-reverse');
+	}
+}