@@ -18,4 +18,4 @@ import { UbSkeletonDirective } from "@/registry/new-york/ui/skeleton.directive";
})
export class SekeletonDemoNewYork { }
-export default SekeletonDemoNewYork;
+export default SekeletonDemoNewYork
diff --git a/apps/www/src/registry/new-york/example/switch-demo.ts b/docs/src/registry/new-york/example/switch-demo.ts
similarity index 63%
rename from apps/www/src/registry/new-york/example/switch-demo.ts
rename to docs/src/registry/new-york/example/switch-demo.ts
index 5791584..7823931 100644
--- a/apps/www/src/registry/new-york/example/switch-demo.ts
+++ b/docs/src/registry/new-york/example/switch-demo.ts
@@ -1,19 +1,19 @@
-import { Component } from '@angular/core';
+import { UbLabelDirective } from '@/registry/new-york/ui/label.directive'
import { SwitchDirective } from '@/registry/new-york/ui/switch.directive'
-import { UbLabelDirective } from '@/registry/new-york/ui/label.directive'
+import { Component } from '@angular/core'
@Component({
- standalone: true,
- selector: 'switch-demo-new-york',
- imports: [SwitchDirective, UbLabelDirective],
- template: `
+ standalone: true,
+ selector: 'switch-demo-new-york',
+ imports: [SwitchDirective, UbLabelDirective],
+ template: `
- `
+ `,
})
export class SwitchDemoNewYork { }
-export default SwitchDemoNewYork;
+export default SwitchDemoNewYork
diff --git a/docs/src/registry/new-york/example/table-demo.ts b/docs/src/registry/new-york/example/table-demo.ts
new file mode 100644
index 0000000..07b85f5
--- /dev/null
+++ b/docs/src/registry/new-york/example/table-demo.ts
@@ -0,0 +1,117 @@
+import {
+ UbTableBodyDirective,
+ UbTableCaptionDirective,
+ UbTableCellDirective,
+ UbTableDirective,
+ UbTableFooterDirective,
+ UbTableHeadDirective,
+ UbTableHeaderDirective,
+ UbTableRowDirective,
+} from '@/registry/new-york/ui/table.directive'
+
+import { Component } from '@angular/core'
+
+@Component({
+ standalone: true,
+ selector: 'table-demo-new-york',
+ imports: [
+ UbTableDirective,
+ UbTableCaptionDirective,
+ UbTableHeaderDirective,
+ UbTableRowDirective,
+ UbTableHeadDirective,
+ UbTableBodyDirective,
+ UbTableCellDirective,
+ UbTableFooterDirective,
+ ],
+ template: `
+
+
+ A list of your recent invoices.
+
+
+
+
+ | Invoice |
+ Status |
+ Method |
+ Amount |
+
+
+
+
+ @for (invoice of invoices; track $index) {
+
+ |
+ {{ invoice.invoice }}
+ |
+
+ {{ invoice.paymentStatus }}
+ |
+
+ {{ invoice.paymentMethod }}
+ |
+
+ {{ invoice.totalAmount }}
+ |
+
+ }
+
+
+
+
+ | Total |
+ $2,500.00 |
+
+
+
+ `,
+})
+export class TableDemoNewYork {
+ invoices = [
+ {
+ invoice: 'INV001',
+ paymentStatus: 'Paid',
+ totalAmount: '$250.00',
+ paymentMethod: 'Credit Card',
+ },
+ {
+ invoice: 'INV002',
+ paymentStatus: 'Pending',
+ totalAmount: '$150.00',
+ paymentMethod: 'PayPal',
+ },
+ {
+ invoice: 'INV003',
+ paymentStatus: 'Unpaid',
+ totalAmount: '$350.00',
+ paymentMethod: 'Bank Transfer',
+ },
+ {
+ invoice: 'INV004',
+ paymentStatus: 'Paid',
+ totalAmount: '$450.00',
+ paymentMethod: 'Credit Card',
+ },
+ {
+ invoice: 'INV005',
+ paymentStatus: 'Paid',
+ totalAmount: '$550.00',
+ paymentMethod: 'PayPal',
+ },
+ {
+ invoice: 'INV006',
+ paymentStatus: 'Pending',
+ totalAmount: '$200.00',
+ paymentMethod: 'Bank Transfer',
+ },
+ {
+ invoice: 'INV007',
+ paymentStatus: 'Unpaid',
+ totalAmount: '$300.00',
+ paymentMethod: 'Credit Card',
+ },
+ ]
+}
+
+export default TableDemoNewYork
diff --git a/apps/www/src/registry/new-york/example/tabs-demo.ts b/docs/src/registry/new-york/example/tabs-demo.ts
similarity index 76%
rename from apps/www/src/registry/new-york/example/tabs-demo.ts
rename to docs/src/registry/new-york/example/tabs-demo.ts
index 875c670..223b80b 100644
--- a/apps/www/src/registry/new-york/example/tabs-demo.ts
+++ b/docs/src/registry/new-york/example/tabs-demo.ts
@@ -1,33 +1,33 @@
-import { Component } from '@angular/core';
+import { UbButtonDirective } from '@/registry/new-york/ui/button.directive'
-import { UbTabsContentDirective, UbTabsDirective, UbTabsListDirective, UbTabsTriggerDirective } from '@/registry/new-york/ui/tabs.directive';
-import { UbCardDirective, UbCardHeaderDirective, UbCardTitleDirective, UbCardDescriptionDirective, UbCardContentDirective, UbCardFooterDirective } from '@/registry/new-york/ui/card.directive';
-import { UbButtonDirective } from '@/registry/new-york/ui/button.directive';
-import { UbLabelDirective } from '@/registry/new-york/ui/label.directive';
-import { UbInputDirective } from '@/registry/new-york/ui/input.directive';
+import { UbCardContentDirective, UbCardDescriptionDirective, UbCardDirective, UbCardFooterDirective, UbCardHeaderDirective, UbCardTitleDirective } from '@/registry/new-york/ui/card.directive'
+import { UbInputDirective } from '@/registry/new-york/ui/input.directive'
+import { UbLabelDirective } from '@/registry/new-york/ui/label.directive'
+import { UbTabsContentDirective, UbTabsDirective, UbTabsListDirective, UbTabsTriggerDirective } from '@/registry/new-york/ui/tabs.directive'
+import { Component } from '@angular/core'
@Component({
- standalone: true,
- selector: 'tabs-demo-new-york',
- imports: [
- UbTabsDirective,
- UbTabsListDirective,
- UbTabsTriggerDirective,
- UbTabsContentDirective,
+ standalone: true,
+ selector: 'tabs-demo-new-york',
+ imports: [
+ UbTabsDirective,
+ UbTabsListDirective,
+ UbTabsTriggerDirective,
+ UbTabsContentDirective,
- UbCardDirective,
- UbCardHeaderDirective,
- UbCardTitleDirective,
- UbCardDescriptionDirective,
- UbCardContentDirective,
- UbCardFooterDirective,
+ UbCardDirective,
+ UbCardHeaderDirective,
+ UbCardTitleDirective,
+ UbCardDescriptionDirective,
+ UbCardContentDirective,
+ UbCardFooterDirective,
- UbButtonDirective,
+ UbButtonDirective,
- UbLabelDirective,
- UbInputDirective
- ],
- template: `
+ UbLabelDirective,
+ UbInputDirective,
+ ],
+ template: `
@@ -82,8 +82,8 @@ import { UbInputDirective } from '@/registry/new-york/ui/input.directive';
- `
+ `,
})
export class TabsDemoNewYork { }
-export default TabsDemoNewYork;
+export default TabsDemoNewYork
diff --git a/apps/www/src/registry/new-york/example/typography-blockquote.ts b/docs/src/registry/new-york/example/typography-blockquote.ts
similarity index 60%
rename from apps/www/src/registry/new-york/example/typography-blockquote.ts
rename to docs/src/registry/new-york/example/typography-blockquote.ts
index 406074d..d167ac1 100644
--- a/apps/www/src/registry/new-york/example/typography-blockquote.ts
+++ b/docs/src/registry/new-york/example/typography-blockquote.ts
@@ -1,9 +1,9 @@
-import { Component } from "@angular/core";
+import { Component } from '@angular/core'
@Component({
- standalone: true,
- selector: "typography-blockquote-new-york",
- template: `
+ standalone: true,
+ selector: 'typography-blockquote-new-york',
+ template: `
"After all," he said, "everyone enjoys a good joke, so it's only fair that
they should pay for the privilege."
@@ -12,4 +12,4 @@ import { Component } from "@angular/core";
})
export class TypographyBlockquoteNewYork { }
-export default TypographyBlockquoteNewYork;
+export default TypographyBlockquoteNewYork
diff --git a/apps/www/src/registry/new-york/example/typography-demo.ts b/docs/src/registry/new-york/example/typography-demo.ts
similarity index 97%
rename from apps/www/src/registry/new-york/example/typography-demo.ts
rename to docs/src/registry/new-york/example/typography-demo.ts
index c8c0d02..f438174 100644
--- a/apps/www/src/registry/new-york/example/typography-demo.ts
+++ b/docs/src/registry/new-york/example/typography-demo.ts
@@ -1,9 +1,9 @@
-import { Component } from "@angular/core";
+import { Component } from '@angular/core'
@Component({
- standalone: true,
- selector: "typography-demo-new-york",
- template: `
+ standalone: true,
+ selector: 'typography-demo-new-york',
+ template: `
@@ -11,4 +11,4 @@ import { Component } from "@angular/core";
})
export class TypographyH1NewYork { }
-export default TypographyH1NewYork;
+export default TypographyH1NewYork
diff --git a/apps/www/src/registry/new-york/example/typography-h2.ts b/docs/src/registry/new-york/example/typography-h2.ts
similarity index 55%
rename from apps/www/src/registry/new-york/example/typography-h2.ts
rename to docs/src/registry/new-york/example/typography-h2.ts
index 7cb1a0e..4c1f3d6 100644
--- a/apps/www/src/registry/new-york/example/typography-h2.ts
+++ b/docs/src/registry/new-york/example/typography-h2.ts
@@ -1,9 +1,9 @@
-import { Component } from "@angular/core";
+import { Component } from '@angular/core'
@Component({
- standalone: true,
- selector: "typography-h2-new-york",
- template: `
+ standalone: true,
+ selector: 'typography-h2-new-york',
+ template: `
The People of the Kingdom
@@ -11,4 +11,4 @@ import { Component } from "@angular/core";
})
export class TypographyH2NewYork { }
-export default TypographyH2NewYork;
+export default TypographyH2NewYork
diff --git a/docs/src/registry/new-york/example/typography-h3.ts b/docs/src/registry/new-york/example/typography-h3.ts
new file mode 100644
index 0000000..9376c99
--- /dev/null
+++ b/docs/src/registry/new-york/example/typography-h3.ts
@@ -0,0 +1,14 @@
+import { Component } from '@angular/core'
+
+@Component({
+ standalone: true,
+ selector: 'typography-h3-new-york',
+ template: `
+
+ The Joke Tax
+
+ `,
+})
+export class TypographyH3NewYork { }
+
+export default TypographyH3NewYork
diff --git a/apps/www/src/registry/new-york/example/typography-h4.ts b/docs/src/registry/new-york/example/typography-h4.ts
similarity index 52%
rename from apps/www/src/registry/new-york/example/typography-h4.ts
rename to docs/src/registry/new-york/example/typography-h4.ts
index 08c8ab0..8414674 100644
--- a/apps/www/src/registry/new-york/example/typography-h4.ts
+++ b/docs/src/registry/new-york/example/typography-h4.ts
@@ -1,9 +1,9 @@
-import { Component } from "@angular/core";
+import { Component } from '@angular/core'
@Component({
- standalone: true,
- selector: "typography-h4-new-york",
- template: `
+ standalone: true,
+ selector: 'typography-h4-new-york',
+ template: `
People stopped telling jokes
@@ -11,4 +11,4 @@ import { Component } from "@angular/core";
})
export class TypographyH4NewYork { }
-export default TypographyH4NewYork;
+export default TypographyH4NewYork
diff --git a/apps/www/src/registry/new-york/example/typography-inline-code.ts b/docs/src/registry/new-york/example/typography-inline-code.ts
similarity index 56%
rename from apps/www/src/registry/new-york/example/typography-inline-code.ts
rename to docs/src/registry/new-york/example/typography-inline-code.ts
index 9f1d3df..a2b48d9 100644
--- a/apps/www/src/registry/new-york/example/typography-inline-code.ts
+++ b/docs/src/registry/new-york/example/typography-inline-code.ts
@@ -1,9 +1,9 @@
-import { Component } from "@angular/core";
+import { Component } from '@angular/core'
@Component({
- standalone: true,
- selector: "typography-inline-code-new-york",
- template: `
+ standalone: true,
+ selector: 'typography-inline-code-new-york',
+ template: `
{{ "@" }}radix-ui/react-alert-dialog
@@ -11,4 +11,4 @@ import { Component } from "@angular/core";
})
export class TypographyInlineCodeNewYork { }
-export default TypographyInlineCodeNewYork;
+export default TypographyInlineCodeNewYork
diff --git a/docs/src/registry/new-york/example/typography-large.ts b/docs/src/registry/new-york/example/typography-large.ts
new file mode 100644
index 0000000..c953de0
--- /dev/null
+++ b/docs/src/registry/new-york/example/typography-large.ts
@@ -0,0 +1,12 @@
+import { Component } from '@angular/core'
+
+@Component({
+ standalone: true,
+ selector: 'typography-large-new-york',
+ template: `
+
Are you absolutely sure?
+ `,
+})
+export class TypographyLargeNewYork { }
+
+export default TypographyLargeNewYork
diff --git a/apps/www/src/registry/new-york/example/typography-lead.ts b/docs/src/registry/new-york/example/typography-lead.ts
similarity index 57%
rename from apps/www/src/registry/new-york/example/typography-lead.ts
rename to docs/src/registry/new-york/example/typography-lead.ts
index 9bde197..7af8844 100644
--- a/apps/www/src/registry/new-york/example/typography-lead.ts
+++ b/docs/src/registry/new-york/example/typography-lead.ts
@@ -1,9 +1,9 @@
-import { Component } from "@angular/core";
+import { Component } from '@angular/core'
@Component({
- standalone: true,
- selector: "typography-lead-new-york",
- template: `
+ standalone: true,
+ selector: 'typography-lead-new-york',
+ template: `
A modal dialog that interrupts the user with important content and expects
a response.
@@ -12,4 +12,4 @@ import { Component } from "@angular/core";
})
export class TypographyLeadNewYork { }
-export default TypographyLeadNewYork;
+export default TypographyLeadNewYork
diff --git a/apps/www/src/registry/new-york/example/typography-list.ts b/docs/src/registry/new-york/example/typography-list.ts
similarity index 62%
rename from apps/www/src/registry/new-york/example/typography-list.ts
rename to docs/src/registry/new-york/example/typography-list.ts
index c85d7b4..f5da00a 100644
--- a/apps/www/src/registry/new-york/example/typography-list.ts
+++ b/docs/src/registry/new-york/example/typography-list.ts
@@ -1,9 +1,9 @@
-import { Component } from "@angular/core";
+import { Component } from '@angular/core'
@Component({
- standalone: true,
- selector: "typography-list-new-york",
- template: `
+ standalone: true,
+ selector: 'typography-list-new-york',
+ template: `
- 1st level of puns: 5 gold coins
- 2nd level of jokes: 10 gold coins
@@ -13,4 +13,4 @@ import { Component } from "@angular/core";
})
export class TypographyListNewYork { }
-export default TypographyListNewYork;
+export default TypographyListNewYork
diff --git a/docs/src/registry/new-york/example/typography-muted.ts b/docs/src/registry/new-york/example/typography-muted.ts
new file mode 100644
index 0000000..b427ccd
--- /dev/null
+++ b/docs/src/registry/new-york/example/typography-muted.ts
@@ -0,0 +1,12 @@
+import { Component } from '@angular/core'
+
+@Component({
+ standalone: true,
+ selector: 'typography-muted-new-york',
+ template: `
+ Enter your email address.
+ `,
+})
+export class TypographyMutedNewYork { }
+
+export default TypographyMutedNewYork
diff --git a/apps/www/src/registry/new-york/example/typography-p.ts b/docs/src/registry/new-york/example/typography-p.ts
similarity index 61%
rename from apps/www/src/registry/new-york/example/typography-p.ts
rename to docs/src/registry/new-york/example/typography-p.ts
index dcbe161..edca529 100644
--- a/apps/www/src/registry/new-york/example/typography-p.ts
+++ b/docs/src/registry/new-york/example/typography-p.ts
@@ -1,9 +1,9 @@
-import { Component } from "@angular/core";
+import { Component } from '@angular/core'
@Component({
- standalone: true,
- selector: "typography-p-new-york",
- template: `
+ standalone: true,
+ selector: 'typography-p-new-york',
+ template: `
The king, seeing how much happier his subjects were, realized the error of
his ways and repealed the joke tax.
@@ -12,4 +12,4 @@ import { Component } from "@angular/core";
})
export class TypographyPNewYork { }
-export default TypographyPNewYork;
+export default TypographyPNewYork
diff --git a/docs/src/registry/new-york/example/typography-small.ts b/docs/src/registry/new-york/example/typography-small.ts
new file mode 100644
index 0000000..8246c35
--- /dev/null
+++ b/docs/src/registry/new-york/example/typography-small.ts
@@ -0,0 +1,12 @@
+import { Component } from '@angular/core'
+
+@Component({
+ standalone: true,
+ selector: 'typography-small-new-york',
+ template: `
+ Email address
+ `,
+})
+export class TypographySmallNewYork { }
+
+export default TypographySmallNewYork
diff --git a/apps/www/src/registry/new-york/example/typography-table.ts b/docs/src/registry/new-york/example/typography-table.ts
similarity index 92%
rename from apps/www/src/registry/new-york/example/typography-table.ts
rename to docs/src/registry/new-york/example/typography-table.ts
index 27ca9f9..29b2c33 100644
--- a/apps/www/src/registry/new-york/example/typography-table.ts
+++ b/docs/src/registry/new-york/example/typography-table.ts
@@ -1,9 +1,9 @@
-import { Component } from "@angular/core";
+import { Component } from '@angular/core'
@Component({
- standalone: true,
- selector: "typography-table-new-york",
- template: `
+ standalone: true,
+ selector: 'typography-table-new-york',
+ template: `
@@ -64,4 +64,4 @@ import { Component } from "@angular/core";
})
export class TypographyTableNewYork { }
-export default TypographyTableNewYork;
+export default TypographyTableNewYork
diff --git a/docs/src/registry/new-york/ui/accordion.directive.ts b/docs/src/registry/new-york/ui/accordion.directive.ts
new file mode 100644
index 0000000..9901e68
--- /dev/null
+++ b/docs/src/registry/new-york/ui/accordion.directive.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()
+ computedClass = computed(() => {
+ return cn('border-b', this.class())
+ })
+}
+
+@Component({
+ standalone: true,
+ selector: '[ubAccordionTrigger], ub-accordion-trigger',
+ imports: [RdxAccordionHeaderDirective, RdxAccordionTriggerDirective, NgIconComponent],
+ viewProviders: [provideIcons({ lucideChevronDown })],
+ template: `
+
+
+
+ `,
+})
+export class UbAccordionTriggerDirective {
+ class = input()
+ computedClass = computed(() => {
+ return cn('flex flex-1 items-center justify-between py-4 text-sm 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 data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down',
+ },
+ template: `
+
+
+
+ `,
+})
+export class UbAccordionContentDirective {
+ class = input()
+ computedClass = computed(() => {
+ return cn('pb-4 pt-0', this.class())
+ })
+}
diff --git a/docs/src/registry/new-york/ui/alert.directive.ts b/docs/src/registry/new-york/ui/alert.directive.ts
new file mode 100644
index 0000000..a214d80
--- /dev/null
+++ b/docs/src/registry/new-york/ui/alert.directive.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 px-4 py-3 text-sm [&>[ubAlertIcon]+div]:translate-y-[-3px] [&>[ubAlertIcon]]:absolute [&>[ubAlertIcon]]:left-4 [&>[ubAlertIcon]]:top-4 [&>[ubAlertIcon]]:text-foreground [&>[ubAlertIcon]~*]:pl-7',
+ {
+ 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
+type UbAlertVariant = NonNullable
+
+@Directive({
+ selector: 'div[ubAlert]',
+ standalone: true,
+ host: {
+ 'role': 'alert',
+ '[class]': 'computedClass()',
+ },
+})
+export class UbAlertDirective {
+ readonly class = input()
+ readonly variant = input('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()
+
+ 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()
+
+ protected computedClass = computed(() =>
+ cn('text-sm [&_p]:leading-relaxed', this.class()),
+ )
+}
diff --git a/docs/src/registry/new-york/ui/avatar.directive.ts b/docs/src/registry/new-york/ui/avatar.directive.ts
new file mode 100644
index 0000000..2555412
--- /dev/null
+++ b/docs/src/registry/new-york/ui/avatar.directive.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()
+
+ 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()
+
+ 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()
+
+ readonly computedClass = computed(() => {
+ return cn('flex h-full w-full items-center justify-center rounded-full bg-muted', this.class())
+ })
+}
diff --git a/docs/src/registry/new-york/ui/badge.directive.ts b/docs/src/registry/new-york/ui/badge.directive.ts
new file mode 100644
index 0000000..5148729
--- /dev/null
+++ b/docs/src/registry/new-york/ui/badge.directive.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'
+
+export const badgeVariants = cva(
+ 'inline-flex items-center rounded-md 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 shadow hover:bg-primary/80',
+ secondary:
+ 'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
+ destructive:
+ 'border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80',
+ outline: 'text-foreground',
+ },
+ },
+ defaultVariants: {
+ variant: 'default',
+ },
+ },
+)
+
+type BadgeProps = VariantProps
+
+export type UbBadgeVariant = NonNullable
+
+@Directive({
+ selector: '[ubBadge]',
+ standalone: true,
+ host: {
+ '[class]': 'computedClass()',
+ },
+})
+export class UbBadgeDirective {
+ readonly class = input()
+ readonly variant = input('default')
+
+ protected computedClass = computed(() =>
+ cn(badgeVariants({ variant: this.variant(), class: this.class() })),
+ )
+}
diff --git a/docs/src/registry/new-york/ui/breadcrumb.directive.ts b/docs/src/registry/new-york/ui/breadcrumb.directive.ts
new file mode 100644
index 0000000..2629ce0
--- /dev/null
+++ b/docs/src/registry/new-york/ui/breadcrumb.directive.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()
+
+ 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()
+
+ 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()
+
+ 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()
+
+ protected computedClass = computed(() =>
+ cn('font-normal text-foreground', this.class()),
+ )
+}
+
+@Component({
+ selector: 'li[ubBreadcrumbSeparator]',
+ standalone: true,
+ imports: [NgIconComponent],
+ viewProviders: [provideIcons({ radixChevronRight })],
+ template: `
+
+ @if (ref.children.length == 0) {
+
+ }
+ `,
+ host: {
+ 'role': 'presentation',
+ '[attr.aria-hidden]': 'true',
+ '[class]': 'computedClass()',
+ },
+})
+export class UbBreadcrumbSeparatorComponent {
+ readonly class = input()
+
+ protected computedClass = computed(() =>
+ cn('[&>svg]:size-3.5', this.class()),
+ )
+}
+
+@Component({
+ selector: 'span[ubBreadcrumbEllipsis]',
+ standalone: true,
+ imports: [NgIconComponent],
+ viewProviders: [provideIcons({ radixDotsHorizontal })],
+ template: `
+
+ More
+ `,
+ host: {
+ 'role': 'presentation',
+ '[attr.aria-hidden]': 'true',
+ '[class]': 'computedClass()',
+ },
+})
+export class UbBreadcrumbEllipsisComponent {
+ readonly class = input()
+
+ protected computedClass = computed(() =>
+ cn('flex h-9 w-9 items-center justify-center', this.class()),
+ )
+}
diff --git a/docs/src/registry/new-york/ui/button.directive.ts b/docs/src/registry/new-york/ui/button.directive.ts
new file mode 100644
index 0000000..4c51fc8
--- /dev/null
+++ b/docs/src/registry/new-york/ui/button.directive.ts
@@ -0,0 +1,65 @@
+import { cn } from '@/lib/utils'
+
+import { computed, Directive, input } from '@angular/core'
+
+import { cva, type VariantProps } from 'class-variance-authority'
+
+export const buttonVariants = cva(
+ 'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50',
+ {
+ variants: {
+ variant: {
+ default:
+ 'bg-primary text-primary-foreground shadow hover:bg-primary/90',
+ destructive:
+ 'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
+ outline:
+ 'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',
+ secondary:
+ 'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
+ ghost: 'hover:bg-accent hover:text-accent-foreground',
+ link: 'text-primary underline-offset-4 hover:underline',
+ },
+ size: {
+ default: 'h-9 px-4 py-2',
+ sm: 'h-8 rounded-md px-3 text-xs',
+ lg: 'h-10 rounded-md px-8',
+ icon: 'h-9 w-9',
+ },
+ },
+ defaultVariants: {
+ variant: 'default',
+ size: 'default',
+ },
+ },
+)
+
+type ButtonProps = VariantProps
+
+export type ButtonSize = NonNullable
+export type ButtonVariant = NonNullable
+
+@Directive({
+ selector: '[ubButton]',
+ standalone: true,
+ host: {
+ '[class]': 'computedClass()',
+ },
+})
+export class UbButtonDirective {
+ readonly class = input()
+
+ readonly variant = input('default')
+
+ readonly size = input('default')
+
+ protected computedClass = computed(() =>
+ cn(
+ buttonVariants({
+ variant: this.variant(),
+ size: this.size(),
+ class: this.class(),
+ }),
+ ),
+ )
+}
diff --git a/docs/src/registry/new-york/ui/card.directive.ts b/docs/src/registry/new-york/ui/card.directive.ts
new file mode 100644
index 0000000..9d25ba3
--- /dev/null
+++ b/docs/src/registry/new-york/ui/card.directive.ts
@@ -0,0 +1,85 @@
+import { cn } from '@/lib/utils'
+
+import { computed, Directive, input } from '@angular/core'
+
+@Directive({
+ standalone: true,
+ selector: '[ubCard]',
+ host: {
+ '[class]': 'computedClass()',
+ },
+})
+export class UbCardDirective {
+ readonly class = input()
+ protected computedClass = computed(() =>
+ cn('rounded-xl border bg-card text-card-foreground shadow', this.class()),
+ )
+}
+
+@Directive({
+ standalone: true,
+ selector: '[ubCardHeader]',
+ host: {
+ '[class]': 'computedClass()',
+ },
+})
+export class UbCardHeaderDirective {
+ readonly class = input()
+ protected computedClass = computed(() =>
+ cn('flex flex-col space-y-1.5 p-6', this.class()),
+ )
+}
+
+@Directive({
+ standalone: true,
+ selector: '[ubCardTitle]',
+ host: {
+ '[class]': 'computedClass()',
+ },
+})
+export class UbCardTitleDirective {
+ readonly class = input()
+ protected computedClass = computed(() =>
+ cn('font-semibold leading-none tracking-tight', this.class()),
+ )
+}
+
+@Directive({
+ standalone: true,
+ selector: '[ubCardDescription]',
+ host: {
+ '[class]': 'computedClass()',
+ },
+})
+export class UbCardDescriptionDirective {
+ readonly class = input()
+ protected computedClass = computed(() =>
+ cn('text-sm text-muted-foreground', this.class()),
+ )
+}
+
+@Directive({
+ standalone: true,
+ selector: '[ubCardContent]',
+ host: {
+ '[class]': 'computedClass()',
+ },
+})
+export class UbCardContentDirective {
+ readonly class = input()
+ protected computedClass = computed(() => cn('p-6 pt-0', this.class()))
+}
+
+@Directive({
+ standalone: true,
+ selector: '[ubCardFooter]',
+ host: {
+ '[class]': 'computedClass()',
+ },
+})
+export class UbCardFooterDirective {
+ readonly class = input()
+ protected computedClass = computed(() =>
+ cn('flex items-center p-6 pt-0', this.class()),
+ )
+}
diff --git a/docs/src/registry/new-york/ui/input.directive.ts b/docs/src/registry/new-york/ui/input.directive.ts
new file mode 100644
index 0000000..42b0341
--- /dev/null
+++ b/docs/src/registry/new-york/ui/input.directive.ts
@@ -0,0 +1,35 @@
+import { cn } from '@/lib/utils'
+
+import { computed, Directive, input } from '@angular/core'
+
+export type InputType =
+ | 'date'
+ | 'datetime-local'
+ | 'email'
+ | 'month'
+ | 'number'
+ | 'password'
+ | 'tel'
+ | 'file'
+ | 'search'
+ | 'text'
+
+@Directive({
+ selector: '[ubInput]',
+ standalone: true,
+ host: {
+ '[class]': 'computedClass()',
+ '[type]': 'type()',
+ },
+})
+export class UbInputDirective {
+ readonly type = input.required()
+ readonly class = input()
+
+ protected computedClass = computed(() =>
+ cn(
+ 'flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
+ this.class(),
+ ),
+ )
+}
diff --git a/docs/src/registry/new-york/ui/label.directive.ts b/docs/src/registry/new-york/ui/label.directive.ts
new file mode 100644
index 0000000..d1ca397
--- /dev/null
+++ b/docs/src/registry/new-york/ui/label.directive.ts
@@ -0,0 +1,28 @@
+import { cn } from '@/lib/utils'
+
+import { computed, Directive, input } from '@angular/core'
+import { RdxLabelDirective } from '@radix-ng/primitives/label'
+
+import { cva } from 'class-variance-authority'
+
+const labelVariants = cva(
+ 'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
+)
+
+@Directive({
+ selector: '[ubLabel]',
+ standalone: true,
+ hostDirectives: [
+ {
+ directive: RdxLabelDirective,
+ inputs: ['htmlFor'],
+ },
+ ],
+ host: {
+ '[class]': 'computedClass()',
+ },
+})
+export class UbLabelDirective {
+ readonly class = input('')
+ protected computedClass = computed(() => cn(labelVariants(), this.class()))
+}
diff --git a/docs/src/registry/new-york/ui/separator.directive.ts b/docs/src/registry/new-york/ui/separator.directive.ts
new file mode 100644
index 0000000..760b9f3
--- /dev/null
+++ b/docs/src/registry/new-york/ui/separator.directive.ts
@@ -0,0 +1,22 @@
+import { cn } from '@/lib/utils'
+import { computed, Directive, input } from '@angular/core'
+
+@Directive({
+ standalone: true,
+ selector: '[ubSeperator]',
+ host: {
+ '[class]': 'computedClass()',
+ },
+})
+export class UbSeparatorDirective {
+ readonly class = input()
+ readonly orientation = input<'horizontal' | 'vertical'>('horizontal')
+
+ protected computedClass = computed(() =>
+ cn(
+ 'shrink-0 bg-border',
+ this.orientation() === 'horizontal' ? 'h-[1px] w-full' : 'h-full w-[1px]',
+ this.class(),
+ ),
+ )
+}
diff --git a/docs/src/registry/new-york/ui/skeleton.directive.ts b/docs/src/registry/new-york/ui/skeleton.directive.ts
new file mode 100644
index 0000000..0e20e69
--- /dev/null
+++ b/docs/src/registry/new-york/ui/skeleton.directive.ts
@@ -0,0 +1,17 @@
+import { cn } from '@/lib/utils'
+
+import { computed, Directive, input } from '@angular/core'
+
+@Directive({
+ selector: '[ubSkeleton]',
+ standalone: true,
+ host: {
+ '[class]': 'computedClass()',
+ },
+})
+export class UbSkeletonDirective {
+ readonly class = input()
+ protected computedClass = computed(() =>
+ cn('animate-pulse rounded-md bg-primary/10', this.class()),
+ )
+}
diff --git a/docs/src/registry/new-york/ui/switch.directive.ts b/docs/src/registry/new-york/ui/switch.directive.ts
new file mode 100644
index 0000000..5f2ef59
--- /dev/null
+++ b/docs/src/registry/new-york/ui/switch.directive.ts
@@ -0,0 +1,29 @@
+import { cn } from '@/lib/utils'
+import { Component, computed, input } from '@angular/core'
+
+import { RdxSwitchRootDirective, RdxSwitchThumbDirective } from '@radix-ng/primitives/switch'
+
+@Component({
+ standalone: true,
+ selector: 'button[ubSwitch]',
+ imports: [RdxSwitchThumbDirective],
+ hostDirectives: [
+ {
+ directive: RdxSwitchRootDirective,
+ inputs: ['id', 'required', 'checked', 'disabled'],
+ outputs: ['onCheckedChange'],
+ },
+ ],
+ host: {
+ '[class]': 'computedClass()',
+ },
+ template: `
+
+ `,
+})
+export class SwitchDirective {
+ readonly class = input()
+ readonly computedClass = computed(() => {
+ return cn('peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input', this.class())
+ })
+}
diff --git a/docs/src/registry/new-york/ui/table.directive.ts b/docs/src/registry/new-york/ui/table.directive.ts
new file mode 100644
index 0000000..82a25fa
--- /dev/null
+++ b/docs/src/registry/new-york/ui/table.directive.ts
@@ -0,0 +1,122 @@
+import { cn } from '@/lib/utils'
+
+import { computed, Directive, input } from '@angular/core'
+
+@Directive({
+ selector: 'table[ubTable]',
+ standalone: true,
+ host: {
+ '[class]': 'computedClass()',
+ },
+})
+export class UbTableDirective {
+ readonly class = input('')
+ protected computedClass = computed(() =>
+ cn('w-full caption-bottom text-sm', this.class()),
+ )
+}
+
+@Directive({
+ selector: 'thead[ubTableHeader]',
+ standalone: true,
+ host: {
+ '[class]': 'computedClass()',
+ },
+})
+export class UbTableHeaderDirective {
+ readonly class = input('')
+ protected computedClass = computed(() => cn('[&_tr]:border-b', this.class()))
+}
+
+@Directive({
+ selector: 'tbody[ubTableBody]',
+ standalone: true,
+ host: {
+ '[class]': 'computedClass()',
+ },
+})
+export class UbTableBodyDirective {
+ readonly class = input('')
+ protected computedClass = computed(() =>
+ cn('[&_tr:last-child]:border-0', this.class()),
+ )
+}
+
+@Directive({
+ selector: 'tfoot[ubTableFooter]',
+ standalone: true,
+ host: {
+ '[class]': 'computedClass()',
+ },
+})
+export class UbTableFooterDirective {
+ readonly class = input('')
+ protected computedClass = computed(() =>
+ cn('border-t bg-muted/50 font-medium [&>tr]:last:border-b-0', this.class()),
+ )
+}
+
+@Directive({
+ selector: 'tr[ubTableRow]',
+ standalone: true,
+ host: {
+ '[class]': 'computedClass()',
+ },
+})
+export class UbTableRowDirective {
+ readonly class = input('')
+ protected computedClass = computed(() =>
+ cn(
+ 'border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted',
+ this.class(),
+ ),
+ )
+}
+
+@Directive({
+ selector: 'th[ubTableHead]',
+ standalone: true,
+ host: {
+ '[class]': 'computedClass()',
+ },
+})
+export class UbTableHeadDirective {
+ readonly class = input
+
+
- UB
-
- `
-})
-export class AvatarDemoDefault { }
-
-export default AvatarDemoDefault;
diff --git a/apps/www/src/registry/default/example/badge-demo.ts b/apps/www/src/registry/default/example/badge-demo.ts
deleted file mode 100644
index 62342f2..0000000
--- a/apps/www/src/registry/default/example/badge-demo.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { Component } from "@angular/core";
-
-import { UbBadgeDirective } from "@/registry/default/ui/badge.directive";
-
-@Component({
- standalone: true,
- selector: "badge-demo-default",
- imports: [UbBadgeDirective],
- template: `