chore: rename filename

docs/src/registry/default/ui/accordion.ts

@@ -0,0 +1,83 @@
+import { cn } from '@/lib/utils'
+import { Component, computed, Directive, input } from '@angular/core'
+
+import { NgIconComponent, provideIcons } from '@ng-icons/core'
+import { lucideChevronDown } from '@ng-icons/lucide'
+
+import {
+  RdxAccordionContentDirective,
+  RdxAccordionHeaderDirective,
+  RdxAccordionItemDirective,
+  RdxAccordionRootDirective,
+  RdxAccordionTriggerDirective,
+} from '@radix-ng/primitives/accordion'
+import type { ClassValue } from 'clsx'
+
+@Directive({
+  standalone: true,
+  selector: '[ubAccordion]',
+  hostDirectives: [RdxAccordionRootDirective],
+})
+export class UbAccordionDirective { }
+
+@Directive({
+  standalone: true,
+  selector: '[ubAccordionItem]',
+  hostDirectives: [
+    {
+      directive: RdxAccordionItemDirective,
+      inputs: ['disabled', 'value'],
+    },
+  ],
+  host: {
+    '[class]': 'computedClass()',
+  },
+})
+export class UbAccordionItemDirective {
+  class = input<ClassValue>()
+  computedClass = computed(() => {
+    return cn('border-b', this.class())
+  })
+}
+
+@Component({
+  standalone: true,
+  selector: '[ubAccordionTrigger], ub-accordion-trigger',
+  imports: [RdxAccordionHeaderDirective, RdxAccordionTriggerDirective, NgIconComponent],
+  viewProviders: [provideIcons({ lucideChevronDown })],
+  template: `
+    <h3 rdxAccordionHeader class="flex">
+        <button rdxAccordionTrigger [className]="computedClass()">
+            <ng-content></ng-content>
+            <ng-icon name="lucideChevronDown" class="h-4 w-4 shrink-0 transition-transform duration-200"></ng-icon>
+        </button>
+    </h3>
+    `,
+})
+export class UbAccordionTriggerDirective {
+  class = input<ClassValue>()
+  computedClass = computed(() => {
+    return cn('flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>ng-icon]:rotate-180', this.class())
+  })
+}
+
+@Component({
+  standalone: true,
+  selector: '[ubAccordionContent], ub-accordion-content',
+  hostDirectives: [RdxAccordionContentDirective],
+  host: {
+    class:
+            'overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down',
+  },
+  template: `
+        <div [className]="computedClass()">
+            <ng-content></ng-content>
+        </div>
+    `,
+})
+export class UbAccordionContentDirective {
+  class = input<ClassValue>()
+  computedClass = computed(() => {
+    return cn('pb-4 pt-0', this.class())
+  })
+}

docs/src/registry/default/ui/alert.ts

@@ -0,0 +1,77 @@
+import { cn } from '@/lib/utils'
+
+import { computed, Directive, input } from '@angular/core'
+
+import { cva, type VariantProps } from 'class-variance-authority'
+
+const alertVariants = cva(
+  'relative w-full rounded-lg border p-4 [&>[ubAlertIcon]~*]:pl-7 [&>[ubAlertIcon]+div]:translate-y-[-3px] [&>[ubAlertIcon]]:absolute [&>[ubAlertIcon]]:left-4 [&>[ubAlertIcon]]:top-4 [&>[ubAlertIcon]]:text-foreground',
+  {
+    variants: {
+      variant: {
+        default: 'bg-background text-foreground',
+        destructive:
+          'border-destructive/50 text-destructive dark:border-destructive [&>[ubAlertIcon]]:text-destructive',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+)
+
+type AlertProps = VariantProps<typeof alertVariants>
+type UbAlertVariant = NonNullable<AlertProps['variant']>
+
+@Directive({
+  selector: 'div[ubAlert]',
+  standalone: true,
+  host: {
+    'role': 'alert',
+    '[class]': 'computedClass()',
+  },
+})
+export class UbAlertDirective {
+  readonly class = input<string>()
+  readonly variant = input<UbAlertVariant>('default')
+
+  protected computedClass = computed(() =>
+    cn(alertVariants({ variant: this.variant(), class: this.class() })),
+  )
+}
+
+@Directive({
+  standalone: true,
+  selector: '[ubAlertIcon]',
+})
+export class UbAlertIconDirective {}
+
+@Directive({
+  selector: 'h5[ubAlertTitle]',
+  standalone: true,
+  host: {
+    '[class]': 'computedClass()',
+  },
+})
+export class UbAlertTitleDirective {
+  readonly class = input<string>()
+
+  protected computedClass = computed(() =>
+    cn('mb-1 font-medium leading-none tracking-tight', this.class()),
+  )
+}
+
+@Directive({
+  selector: 'div[ubAlertDescription]',
+  standalone: true,
+  host: {
+    '[class]': 'computedClass()',
+  },
+})
+export class UbAlertDescriptionDirective {
+  readonly class = input<string>()
+
+  protected computedClass = computed(() =>
+    cn('text-sm [&_p]:leading-relaxed', this.class()),
+  )
+}

docs/src/registry/default/ui/avatar.ts

@@ -0,0 +1,52 @@
+import { cn } from '@/lib/utils'
+import { computed, Directive, input } from '@angular/core'
+
+import { RdxAvatarFallbackDirective, RdxAvatarImageDirective, RdxAvatarRootDirective } from '@radix-ng/primitives/avatar'
+
+@Directive({
+  standalone: true,
+  selector: 'span[ubAvatar]',
+  hostDirectives: [RdxAvatarRootDirective],
+  host: {
+    '[class]': 'computedClass()',
+  },
+})
+export class UbAvatarDirective {
+  readonly class = input<string>()
+
+  readonly computedClass = computed(() => {
+    return cn('relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full', this.class())
+  })
+}
+
+@Directive({
+  standalone: true,
+  selector: 'img[ubAvatarImage]',
+  hostDirectives: [RdxAvatarImageDirective],
+  host: {
+    '[class]': 'computedClass()',
+  },
+})
+export class UbAvatarImageDirective {
+  readonly class = input<string>()
+
+  readonly computedClass = computed(() => {
+    return cn('aspect-square h-full w-full', this.class())
+  })
+}
+
+@Directive({
+  standalone: true,
+  selector: 'span[ubAvatarFallback]',
+  hostDirectives: [RdxAvatarFallbackDirective],
+  host: {
+    '[class]': 'computedClass()',
+  },
+})
+export class UbAvatarFallbackDirective {
+  readonly class = input<string>()
+
+  readonly computedClass = computed(() => {
+    return cn('flex h-full w-full items-center justify-center rounded-full bg-muted', this.class())
+  })
+}

docs/src/registry/default/ui/badge.ts

@@ -0,0 +1,44 @@
+import { cn } from '@/lib/utils'
+import { computed, Directive, input } from '@angular/core'
+
+import { cva, type VariantProps } from 'class-variance-authority'
+
+const badgeVariants = cva(
+  'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
+  {
+    variants: {
+      variant: {
+        default:
+          'border-transparent bg-primary text-primary-foreground hover:bg-primary/80',
+        secondary:
+          'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        destructive:
+          'border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80',
+        outline: 'text-foreground',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+)
+
+type BadgeProps = VariantProps<typeof badgeVariants>
+
+export type UbBadgeVariant = NonNullable<BadgeProps['variant']>
+
+@Directive({
+  selector: '[ubBadge]',
+  standalone: true,
+  host: {
+    '[class]': 'computedClass()',
+  },
+})
+export class UbBadgeDirective {
+  readonly class = input<string>()
+  readonly variant = input<UbBadgeVariant>('default')
+
+  protected computedClass = computed(() =>
+    cn(badgeVariants({ variant: this.variant(), class: this.class() })),
+  )
+}

docs/src/registry/default/ui/breadcrumb.ts

@@ -0,0 +1,129 @@
+import { cn } from '@/lib/utils'
+
+import { Component, computed, Directive, input } from '@angular/core'
+import { NgIconComponent, provideIcons } from '@ng-icons/core'
+
+import { radixChevronRight, radixDotsHorizontal } from '@ng-icons/radix-icons'
+
+@Directive({
+  selector: 'nav[ubBreadcrumb]',
+  standalone: true,
+  host: {
+    '[attr.aria-label]': '"breadcrumb"',
+  },
+})
+export class UbBreadcrumbDirective {}
+
+@Directive({
+  selector: 'ol[ubBreadcrumbList]',
+  standalone: true,
+  host: {
+    '[class]': 'computedClass()',
+  },
+})
+export class UbBreadcrumbListDirective {
+  readonly class = input<string>()
+
+  protected computedClass = computed(() =>
+    cn(
+      'flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5',
+      this.class(),
+    ),
+  )
+}
+
+@Directive({
+  selector: 'li[ubBreadcrumbItem]',
+  standalone: true,
+  host: {
+    '[class]': 'computedClass()',
+  },
+})
+export class UbBreadcrumbItemDirective {
+  readonly class = input<string>()
+
+  protected computedClass = computed(() =>
+    cn('inline-flex items-center gap-1.5', this.class()),
+  )
+}
+
+@Directive({
+  selector: '[ubBreadcrumbLink], a[ubBreadcrumbLink]',
+  standalone: true,
+  host: {
+    '[class]': 'computedClass()',
+  },
+})
+export class UbBreadcrumbLinkDirective {
+  readonly class = input<string>()
+
+  protected computedClass = computed(() =>
+    cn('transition-colors hover:text-foreground', this.class()),
+  )
+}
+
+@Directive({
+  selector: 'span[ubBreadcrumbPage]',
+  standalone: true,
+  host: {
+    'role': 'link',
+    '[attr.aria-disabled]': 'true',
+    '[attr.aria-current]': '"page"',
+    '[class]': 'computedClass()',
+  },
+})
+export class UbBreadcrumbPageDirective {
+  readonly class = input<string>()
+
+  protected computedClass = computed(() =>
+    cn('font-normal text-foreground', this.class()),
+  )
+}
+
+@Component({
+  selector: 'li[ubBreadcrumbSeparator]',
+  standalone: true,
+  imports: [NgIconComponent],
+  viewProviders: [provideIcons({ radixChevronRight })],
+  template: `
+    <span #ref><ng-content></ng-content></span>
+    @if (ref.children.length == 0) {
+      <ng-icon name="radixChevronRight" size="16" class="flex h-3.5" />
+    }
+  `,
+  host: {
+    'role': 'presentation',
+    '[attr.aria-hidden]': 'true',
+    '[class]': 'computedClass()',
+  },
+})
+export class UbBreadcrumbSeparatorComponent {
+  readonly class = input<string>()
+
+  protected computedClass = computed(() =>
+    cn('[&>svg]:size-3.5', this.class()),
+  )
+}
+
+@Component({
+  selector: 'span[ubBreadcrumbEllipsis]',
+  standalone: true,
+  imports: [NgIconComponent],
+  viewProviders: [provideIcons({ radixDotsHorizontal })],
+  template: `
+    <ng-icon name="radixDotsHorizontal" class="h-4 w-4" />
+    <span class="sr-only">More</span>
+  `,
+  host: {
+    'role': 'presentation',
+    '[attr.aria-hidden]': 'true',
+    '[class]': 'computedClass()',
+  },
+})
+export class UbBreadcrumbEllipsisComponent {
+  readonly class = input<string>()
+
+  protected computedClass = computed(() =>
+    cn('flex h-9 w-9 items-center justify-center', this.class()),
+  )
+}