Merge pull request #1 from luminacn/luminacn-v1.3

Luminacn v1.3

Author: coxxanthony

src/packages/registry/alert/alert.directive.ts.template

@@ -0,0 +1,61 @@
+import { Directive, input, computed, output, signal } from '@angular/core';
+import { cn } from '../../../lib/cn';
+import { alertVariants } from './alert.variants';
+import { LuminaAlertVariant } from './alert.types';
+
+@Directive({
+  selector: '[lmAlert]',
+  standalone: true,
+  exportAs: 'lmAlert',
+  host: {
+    '[class]': 'computedClass()',
+    '[class.hidden]': 'closed()',
+    role: 'alert',
+  },
+})
+export class LuminaAlertDirective {
+  // Shorthand: <div lmAlert="destructive">
+  variant = input<LuminaAlertVariant, LuminaAlertVariant | ''>('default', {
+    alias: 'lmAlert',
+    transform: (v) => (v === '' ? 'default' : v),
+  });
+  protected closed = signal(false);
+  onClose = output<void>();
+
+  close() {
+    this.closed.set(true);
+    this.onClose.emit(); // Notify the parent
+  }
+
+  userClass = input('', { alias: 'class' });
+
+  computedClass = computed(() =>
+    cn(alertVariants({ variant: this.variant() as LuminaAlertVariant }), this.userClass()),
+  );
+}
+
+@Directive({
+  selector: '[lmAlertTitle]',
+  standalone: true,
+  host: {
+    '[class]': 'computedClass()',
+  },
+})
+export class LuminaAlertTitleDirective {
+  userClass = input('', { alias: 'class' });
+  computedClass = computed(() =>
+    cn('mb-1 font-medium leading-none tracking-tight', this.userClass()),
+  );
+}
+
+@Directive({
+  selector: '[lmAlertDescription]',
+  standalone: true,
+  host: {
+    '[class]': 'computedClass()',
+  },
+})
+export class LuminaAlertDescriptionDirective {
+  userClass = input('', { alias: 'class' });
+  computedClass = computed(() => cn('text-sm [&_p]:leading-relaxed', this.userClass()));
+}

src/packages/registry/alert/alert.types.ts.template

@@ -0,0 +1,6 @@
+export type LuminaAlertVariant = 'default' | 'destructive' | 'success' | 'warning';
+
+export interface LuminaAlertProps {
+  variant?: LuminaAlertVariant;
+  class?: string;
+}

src/packages/registry/alert/alert.variants.ts.template

@@ -0,0 +1,22 @@
+import { cva } from '../../../lib/cva';
+import { LuminaAlertVariant } from './alert.types';
+
+export const alertVariants = cva(
+  'relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4',
+  {
+    variants: {
+      variant: {
+        default: 'bg-background text-foreground [&>svg]:text-foreground',
+        destructive:
+          'border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive',
+        success:
+          'border-emerald-500/50 text-emerald-600 dark:text-emerald-400 [&>svg]:text-emerald-600 dark:[&>svg]:text-emerald-400',
+        warning:
+          'border-amber-500/50 text-amber-600 dark:text-amber-400 [&>svg]:text-amber-600 dark:[&>svg]:text-amber-400',
+      } as Record<LuminaAlertVariant, string>,
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+);

src/packages/registry/alert/avatar.json

@@ -0,0 +1,10 @@
+{
+  "name": "alert",
+  "destination": "ui/alert",
+  "primaryExport": "LuminaAlertDirective",
+  "files": [
+    "alert.variants.ts.template",
+    "alert.types.ts.template",
+    "alert.directive.ts.template"
+  ]
+}

src/packages/registry/avatar/avatar.component.ts.template

@@ -0,0 +1,28 @@
+import { Component, input, computed } from '@angular/core';
+import { cn } from '../../../lib/cn';
+import { avatarVariants } from './avatar.variants';
+import { LmAvatarSize, LmAvatarShape } from './avatar.types';
+
+@Component({
+  selector: 'lm-avatar',
+  standalone: true,
+  template: `<ng-content />`,
+  host: {
+    '[class]': 'computedClass()',
+  },
+})
+export class LuminaAvatarComponent {
+  size = input<LmAvatarSize>('md');
+  shape = input<LmAvatarShape>('circle');
+  userClass = input('', { alias: 'class' });
+
+  computedClass = computed(() =>
+    cn(
+      avatarVariants({
+        size: this.size(),
+        shape: this.shape(),
+      }),
+      this.userClass(),
+    ),
+  );
+}

src/packages/registry/avatar/avatar.directive.ts.template

@@ -0,0 +1,41 @@
+import { Directive, input, signal, computed } from '@angular/core';
+import { cn } from '../../../lib/cn';
+
+@Directive({
+  selector: 'img[lmAvatarImage]',
+  standalone: true,
+  host: {
+    '[class]': 'classes()',
+    '(error)': 'onError()',
+  },
+})
+export class LuminaAvatarImageDirective {
+  // If the image fails, we hide it so the fallback behind it shows up
+  hasError = signal(false);
+
+  classes = computed(() =>
+    cn('aspect-square h-full w-full object-cover', this.hasError() ? 'hidden' : 'block'),
+  );
+
+  onError() {
+    this.hasError.set(true);
+  }
+}
+
+@Directive({
+  selector: '[lmAvatarFallback]',
+  standalone: true,
+  host: {
+    '[class]': 'classes()',
+  },
+})
+export class LuminaAvatarFallbackDirective {
+  userClass = input('', { alias: 'class' });
+
+  classes = computed(() =>
+    cn(
+      'flex h-full w-full items-center justify-center rounded-full bg-muted text-sm font-medium',
+      this.userClass(),
+    ),
+  );
+}

src/packages/registry/avatar/avatar.json

@@ -0,0 +1,11 @@
+{
+  "name": "avatar",
+  "destination": "ui/avatar",
+  "primaryExport": "LuminaAvatarComponent",
+  "files": [
+    "avatar.component.ts.template",
+    "avatar.variants.ts.template",
+    "avatar.types.ts.template",
+    "avatar.directive.ts.template"
+  ]
+}

src/packages/registry/avatar/avatar.types.ts.template

@@ -0,0 +1,8 @@
+export type LmAvatarSize = 'sm' | 'md' | 'lg' | 'xl';
+export type LmAvatarShape = 'circle' | 'square' | 'rounded';
+
+export interface LmAvatarProps {
+  size?: LmAvatarSize;
+  shape?: LmAvatarShape;
+  class?: string;
+}

src/packages/registry/avatar/avatar.variants.ts.template

@@ -0,0 +1,21 @@
+import { cva } from '../../../lib/cva';
+
+export const avatarVariants = cva('relative flex shrink-0 overflow-hidden rounded-full', {
+  variants: {
+    size: {
+      sm: 'h-8 w-8',
+      md: 'h-10 w-10', // Default
+      lg: 'h-12 w-12',
+      xl: 'h-16 w-16',
+    },
+    shape: {
+      circle: 'rounded-full',
+      square: 'rounded-none',
+      rounded: 'rounded-md',
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+    shape: 'circle',
+  },
+});