diff --git a/projects/docs/src/app/shared/components/header/header.html b/projects/docs/src/app/shared/components/header/header.html
index 9df51d8..239fdc0 100644
--- a/projects/docs/src/app/shared/components/header/header.html
+++ b/projects/docs/src/app/shared/components/header/header.html
@@ -3,7 +3,7 @@
diff --git a/projects/docs/src/app/shared/components/header/header.ts b/projects/docs/src/app/shared/components/header/header.ts
index af91e7b..b82afcb 100644
--- a/projects/docs/src/app/shared/components/header/header.ts
+++ b/projects/docs/src/app/shared/components/header/header.ts
@@ -2,14 +2,14 @@ import { Component, inject, model } from '@angular/core';
import { RouterLink, RouterLinkActive } from '@angular/router';
import { ThemeService } from '@slateui/theme';
import { NgIcon, provideIcons } from '@ng-icons/core';
-import { lucideMenu, lucideSun, lucideMoon } from '@ng-icons/lucide';
import { bootstrapGithub, bootstrapTwitterX } from '@ng-icons/bootstrap-icons'
+import { tablerBlur, tablerMenu } from '@ng-icons/tabler-icons';
import { UiButton } from 'ui';
@Component({
selector: 'docs-header',
imports: [NgIcon, UiButton, RouterLink],
- viewProviders: [provideIcons({ lucideMenu, lucideSun, lucideMoon, bootstrapGithub, bootstrapTwitterX })],
+ viewProviders: [provideIcons({ bootstrapGithub, bootstrapTwitterX, tablerBlur, tablerMenu })],
templateUrl: './header.html'
})
export class Header {
@@ -28,7 +28,5 @@ export class Header {
this.themeService.setTheme(
this.themeService.isDark() ? 'light' : 'dark'
);
- // The HighlightThemeService will automatically update the highlight.js theme
- // through its subscription to theme changes
}
}
diff --git a/projects/docs/src/app/shared/components/sidebar/sidebar.ts b/projects/docs/src/app/shared/components/sidebar/sidebar.ts
index 6357783..0db45c9 100644
--- a/projects/docs/src/app/shared/components/sidebar/sidebar.ts
+++ b/projects/docs/src/app/shared/components/sidebar/sidebar.ts
@@ -67,6 +67,7 @@ export class Sidebar {
{ name: 'Popover', path: 'popover' },
{ name: 'Progress', path: 'progress' },
// { name: 'Select', path: 'select' },
+ { name: 'Radio Group', path: 'radio-group' },
{ name: 'Separator', path: 'separator' },
{ name: 'Switch', path: 'switch' },
{ name: 'Tabs', path: 'tabs' },
diff --git a/projects/docs/src/index.html b/projects/docs/src/index.html
index 14e9a6a..04f6ca3 100644
--- a/projects/docs/src/index.html
+++ b/projects/docs/src/index.html
@@ -7,8 +7,8 @@
-
SlateUI - Modern UI Component Library for Angular | Built with Angular Primitives
-
+
SlateUI - Modern UI Components for Angular | Built with Angular Primitives
+
diff --git a/projects/ui/src/directives/alert-dialog.ts b/projects/ui/src/directives/alert-dialog.ts
index 8ce015a..ff18110 100644
--- a/projects/ui/src/directives/alert-dialog.ts
+++ b/projects/ui/src/directives/alert-dialog.ts
@@ -1,6 +1,6 @@
import { computed, Directive, input } from "@angular/core";
import { tv } from "tailwind-variants";
-import { NgpDialog, NgpDialogDescription, NgpDialogOverlay, NgpDialogTitle, NgpDialogTrigger } from "ng-primitives/dialog";
+import { NgpDialog, NgpDialogDescription, NgpDialogOverlay, NgpDialogTitle, NgpDialogTrigger, provideDialogConfig } from "ng-primitives/dialog";
const alertDialogVariants = tv({
slots: {
@@ -105,7 +105,8 @@ export class UiAlertDialogFooter {
'ngpDialogTriggerCloseOnEscape: uiAlertDialogTriggerCloseOnEscape'
]
}
- ]
+ ],
+ providers: [provideDialogConfig({ closeOnEscape: false })]
})
export class UiAlertDialogTrigger {
inputClass = input
('', { alias: 'class' });
@@ -125,7 +126,8 @@ export class UiAlertDialogTrigger {
'ngpDialogOverlayCloseOnClick: uiAlertDialogOverlayCloseOnClick'
]
}
- ]
+ ],
+ providers: [provideDialogConfig({ closeOnClick: false })]
})
export class UiAlertDialogOverlay {
inputClass = input('', { alias: 'class' });
diff --git a/projects/ui/src/directives/alert.ts b/projects/ui/src/directives/alert.ts
index 447b5b9..26c3083 100644
--- a/projects/ui/src/directives/alert.ts
+++ b/projects/ui/src/directives/alert.ts
@@ -1,4 +1,4 @@
-import { computed, Directive, input } from '@angular/core';
+import { computed, Component, ChangeDetectionStrategy, input } from '@angular/core';
import { tv, VariantProps } from 'tailwind-variants';
const alertVariants = tv({
@@ -22,12 +22,14 @@ const { alert, alertTitle, alertDescription } = alertVariants();
type AlertVariants = VariantProps;
-@Directive({
- selector: '[uiAlert]',
+@Component({
+ selector: 'ui-alert',
exportAs: 'uiAlert',
+ changeDetection: ChangeDetectionStrategy.OnPush,
host: {
'[class]': 'computedClass()'
- }
+ },
+ template: ''
})
export class UiAlert {
inputClass = input('', { alias: 'class' });
@@ -35,24 +37,28 @@ export class UiAlert {
computedClass = computed(() => alert({ variant: this.variant(), class: this.inputClass() }));
}
-@Directive({
- selector: '[uiAlertTitle]',
+@Component({
+ selector: 'ui-alert-title',
exportAs: 'uiAlertTitle',
+ changeDetection: ChangeDetectionStrategy.OnPush,
host: {
'[class]': 'computedClass()'
- }
+ },
+ template: ''
})
export class UiAlertTitle {
inputClass = input('', { alias: 'class' });
computedClass = computed(() => alertTitle({ class: this.inputClass() }));
}
-@Directive({
- selector: '[uiAlertDescription]',
+@Component({
+ selector: 'ui-alert-description',
exportAs: 'uiAlertDescription',
+ changeDetection: ChangeDetectionStrategy.OnPush,
host: {
'[class]': 'computedClass()'
- }
+ },
+ template: ''
})
export class UiAlertDescription {
inputClass = input('', { alias: 'class' });
diff --git a/projects/ui/src/directives/avatar.ts b/projects/ui/src/directives/avatar.ts
index fd02715..811db83 100644
--- a/projects/ui/src/directives/avatar.ts
+++ b/projects/ui/src/directives/avatar.ts
@@ -1,5 +1,4 @@
-import { NumberInput } from '@angular/cdk/coercion';
-import { computed, Directive, input, numberAttribute } from '@angular/core';
+import { Component, computed, input } from '@angular/core';
import { NgpAvatar, NgpAvatarFallback, NgpAvatarImage } from "ng-primitives/avatar";
import { tv } from "tailwind-variants";
@@ -13,48 +12,43 @@ const avatarVariants = tv({
const { avatar, avatarImage, avatarFallback } = avatarVariants();
-@Directive({
- selector: '[uiAvatar]',
+@Component({
+ selector: 'ui-avatar',
exportAs: 'uiAvatar',
hostDirectives: [NgpAvatar],
host: {
'[class]': 'computedClass()'
- }
+ },
+ template: ``
})
export class UiAvatar {
inputClass = input('', { alias: 'class' });
computedClass = computed(() => avatar({ class: this.inputClass() }));
}
-@Directive({
- selector: '[uiAvatarImage]',
+@Component({
+ selector: 'ui-avatar-image',
exportAs: 'uiAvatarImage',
- hostDirectives: [NgpAvatarImage],
- host: {
- '[class]': 'computedClass()'
- }
+ template: `![]()
`,
+ imports: [NgpAvatarImage]
})
export class UiAvatarImage {
inputClass = input('', { alias: 'class' });
computedClass = computed(() => avatarImage({ class: this.inputClass() }));
+ src = input('', { alias: 'src' });
+ alt = input('', { alias: 'alt' });
}
-@Directive({
- selector: '[uiAvatarFallback]',
+@Component({
+ selector: 'ui-avatar-fallback',
exportAs: 'uiAvatarFallback',
- hostDirectives: [{
- directive: NgpAvatarFallback,
- inputs: ['ngpAvatarFallbackDelay: delay()'],
- }],
+ hostDirectives: [NgpAvatarFallback],
host: {
'[class]': 'computedClass()'
- }
+ },
+ template: ``,
})
export class UiAvatarFallback {
inputClass = input('', { alias: 'class' });
computedClass = computed(() => avatarFallback({ class: this.inputClass() }));
- readonly delay = input(0, {
- alias: 'uiAvatarFallbackDelay',
- transform: numberAttribute,
- });
}
\ No newline at end of file
diff --git a/projects/ui/src/directives/badge.ts b/projects/ui/src/directives/badge.ts
index 090c4e7..e0f16d6 100644
--- a/projects/ui/src/directives/badge.ts
+++ b/projects/ui/src/directives/badge.ts
@@ -1,4 +1,4 @@
-import { computed, Directive, input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
import { tv, VariantProps } from 'tailwind-variants';
const badgeVariants = tv({
@@ -18,15 +18,17 @@ const badgeVariants = tv({
type BadgeVariants = VariantProps;
-@Directive({
- selector: '[uiBadge]',
+@Component({
+ selector: 'ui-badge',
exportAs: 'uiBadge',
+ changeDetection: ChangeDetectionStrategy.OnPush,
host: {
'[class]': 'computedClass()'
- }
+ },
+ template: ''
})
export class UiBadge {
inputClass = input('', { alias: 'class' });
variant = input('default');
computedClass = computed(() => badgeVariants({ variant: this.variant(), class: this.inputClass() }));
-}
+}
\ No newline at end of file
diff --git a/projects/ui/src/directives/radio-group.ts b/projects/ui/src/directives/radio-group.ts
new file mode 100644
index 0000000..4203e5a
--- /dev/null
+++ b/projects/ui/src/directives/radio-group.ts
@@ -0,0 +1,84 @@
+import { computed, Directive, input } from '@angular/core';
+import { tv } from "tailwind-variants";
+import { NgpRadioGroup, NgpRadioItem, NgpRadioIndicator } from 'ng-primitives/radio';
+
+const radioGroupVariants = tv({
+ slots: {
+ root: 'grid gap-3',
+ item: 'flex items-center space-x-2 cursor-pointer',
+ radio: 'relative border-input text-primary data-[focus-visible]:border-ring data-[focus-visible]:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 aspect-square size-4 shrink-0 rounded-full border shadow-xs transition-[color,box-shadow] outline-none data-[focus-visible]:ring-[3px] data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50',
+ indicator: 'size-2 rounded-full absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 data-[checked]:bg-primary'
+ }
+});
+
+const { root, item, radio, indicator } = radioGroupVariants();
+
+@Directive({
+ selector: '[uiRadioGroup]',
+ exportAs: 'uiRadioGroup',
+ host: {
+ '[class]': 'computedClass()'
+ },
+ hostDirectives: [
+ {
+ directive: NgpRadioGroup,
+ inputs: [
+ 'ngpRadioGroupValue: defaultValue',
+ 'ngpRadioGroupDisabled: disabled'
+ ],
+ outputs: [
+ 'ngpRadioGroupValueChange: defaultValueChange'
+ ],
+ },
+ ],
+})
+export class UiRadioGroup {
+ inputClass = input('', { alias: 'class' });
+ computedClass = computed(() => root({ class: this.inputClass() }));
+}
+
+@Directive({
+ selector: '[uiRadioItem]',
+ exportAs: 'uiRadioItem',
+ host: {
+ '[class]': 'computedClass()'
+ },
+ hostDirectives: [
+ {
+ directive: NgpRadioItem,
+ inputs: [
+ 'ngpRadioItemValue: value',
+ 'ngpRadioItemDisabled: disabled'
+ ],
+ },
+ ],
+})
+export class UiRadioItem {
+ inputClass = input('', { alias: 'class' });
+ computedClass = computed(() => item({ class: this.inputClass() }));
+}
+
+@Directive({
+ selector: '[uiRadio]',
+ exportAs: 'uiRadio',
+ host: {
+ '[class]': 'computedClass()'
+ },
+ hostDirectives: [NgpRadioIndicator]
+})
+export class UiRadio {
+ inputClass = input('', { alias: 'class' });
+ computedClass = computed(() => radio({ class: this.inputClass() }));
+}
+
+@Directive({
+ selector: '[uiRadioIndicator]',
+ exportAs: 'uiRadioIndicator',
+ host: {
+ '[class]': 'computedClass()'
+ }
+})
+export class UiRadioIndicator {
+ inputClass = input('', { alias: 'class' });
+ computedClass = computed(() => indicator({ class: this.inputClass() }));
+}
diff --git a/projects/ui/src/directives/switch.ts b/projects/ui/src/directives/switch.ts
index 2c63ad3..a432faf 100644
--- a/projects/ui/src/directives/switch.ts
+++ b/projects/ui/src/directives/switch.ts
@@ -4,8 +4,8 @@ import { NgpSwitch, NgpSwitchThumb } from "ng-primitives/switch";
const switchVariants = tv({
slots: {
- switchRoot: 'peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors data-[focus-visible]:outline-none data-[focus-visible]:ring-2 data-[focus-visible]:ring-ring data-[focus-visible]:ring-offset-2 data-[focus-visible]:ring-offset-background data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 data-[checked]:bg-primary bg-input',
- switchThumb: 'pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[checked]:translate-x-5 translate-x-0'
+ switchRoot: 'peer data-[checked]:bg-primary bg-input data-[focus-visible]:border-ring data-[focus-visible]:ring-ring/50 dark:bg-input/80 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none data-[focus-visible]:ring-[3px] data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50',
+ switchThumb: 'bg-background dark:bg-foreground dark:data-[checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[checked]:translate-x-[calc(100%-2px)] translate-x-0'
}
});
diff --git a/projects/ui/src/public-api.ts b/projects/ui/src/public-api.ts
index eb1c919..469211c 100644
--- a/projects/ui/src/public-api.ts
+++ b/projects/ui/src/public-api.ts
@@ -23,4 +23,5 @@ export * from './directives/checkbox';
export * from './directives/toggle';
export * from './directives/toggle-group';
export * from './directives/skeleton';
-export * from './directives/switch';
\ No newline at end of file
+export * from './directives/switch';
+export * from './directives/radio-group';
\ No newline at end of file
- 
@@ -21,7 +21,7 @@