core(improvement): Implemented tailwind variants slot to handle classes

Author: Mohammad Javed

projects/core/src/lib/accordion.ts

@@ -2,17 +2,15 @@ import { computed, Directive, input } from '@angular/core';
 import { NgpAccordion, NgpAccordionTrigger, NgpAccordionItem, NgpAccordionContent } from 'ng-primitives/accordion';
 import { tv } from 'tailwind-variants';
 
-export const accordionItemVariants = tv({
-    base: 'border-b border-border last:border-b-0'
+const accordionVariants = tv({
+    slots: {
+        itemVariant: 'border-b border-border last:border-b-0',
+        triggerVariant: 'ring-ring/10 dark:ring-ring/20 dark:outline-ring/40 outline-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all hover:underline focus-visible:ring-4 focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 [&[data-open]>[uiAccordionTriggerIcon]]:rotate-180',
+        contentVariant: 'data-[closed]:animate-accordion-up data-[open]:animate-accordion-down overflow-hidden text-sm'
+    }
 });
 
-export const accordionTriggerVariants = tv({
-    base: 'ring-ring/10 dark:ring-ring/20 dark:outline-ring/40 outline-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all hover:underline focus-visible:ring-4 focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 [&[data-open]>[uiAccordionTriggerIcon]]:rotate-180'
-});
-
-export const accordionContentVariants = tv({
-    base: 'data-[closed]:animate-accordion-up data-[open]:animate-accordion-down overflow-hidden text-sm'
-});
+const { itemVariant, triggerVariant, contentVariant } = accordionVariants();
 
 @Directive({
     selector: '[uiAccordion]',
@@ -45,10 +43,8 @@ export class UiAccordion {
     hostDirectives: [NgpAccordionTrigger]
 })
 export class UiAccordionTrigger {
-
     inputClass = input<string>('', { alias: 'class' });
-
-    computedClass = computed(() => accordionTriggerVariants({ class: this.inputClass() }));
+    computedClass = computed(() => triggerVariant({ class: this.inputClass() }));
 
 }
 
@@ -66,11 +62,8 @@ export class UiAccordionTrigger {
     ],
 })
 export class UiAccordionItem {
-
     inputClass = input<string>('', { alias: 'class' });
-
-    computedClass = computed(() => accordionItemVariants({ class: this.inputClass() }));
-
+    computedClass = computed(() => itemVariant({ class: this.inputClass() }));
 }
 
 
@@ -83,9 +76,6 @@ export class UiAccordionItem {
     hostDirectives: [NgpAccordionContent]
 })
 export class UiAccordionContent {
-
     inputClass = input<string>('', { alias: 'class' });
-
-    computedClass = computed(() => accordionContentVariants({ class: this.inputClass() }));
-
+    computedClass = computed(() => contentVariant({ class: this.inputClass() }));
 }

projects/core/src/lib/alert.ts

@@ -1,8 +1,12 @@
 import { computed, Directive, input } from '@angular/core';
 import { tv, VariantProps } from 'tailwind-variants';
 
-export const alertVariants = tv({
-    base: 'relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>[uiAlertIcon]]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>[uiAlertIcon]]:gap-x-3 gap-y-0.5 items-start [&>[uiAlertIcon]]:size-4 [&>[uiAlertIcon]]:translate-y-0.5 [&>[uiAlertIcon]]:text-current',
+const alertVariants = tv({
+    slots: {
+        base: 'relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>[uiAlertIcon]]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>[uiAlertIcon]]:gap-x-3 gap-y-0.5 items-start [&>[uiAlertIcon]]:size-4 [&>[uiAlertIcon]]:translate-y-0.5 [&>[uiAlertIcon]]:text-current',
+        titleVariant: 'col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight',
+        descriptionVariant: 'col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed'
+    },
     variants: {
         variant: {
             default: "bg-background text-foreground border-border",
@@ -11,16 +15,10 @@ export const alertVariants = tv({
     },
     defaultVariants: {
         variant: 'default'
-    },
-});
-
-export const alertTitleVariants = tv({
-    base: 'col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight'
+    }
 });
 
-export const alertDescriptionVariants = tv({
-    base: 'col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed'
-});
+const { base, titleVariant, descriptionVariant } = alertVariants();
 
 type AlertVariants = VariantProps<typeof alertVariants>;
 
@@ -31,13 +29,10 @@ type AlertVariants = VariantProps<typeof alertVariants>;
         '[class]': 'computedClass()'
     }
 })
-
 export class UiAlert {
     inputClass = input<string>('', { alias: 'class' });
-
     variant = input<AlertVariants['variant']>('default');
-
-    computedClass = computed(() => alertVariants({ variant: this.variant(), class: this.inputClass() }));
+    computedClass = computed(() => base({ variant: this.variant(), class: this.inputClass() }));
 }
 
 @Directive({
@@ -48,9 +43,8 @@ export class UiAlert {
     }
 })
 export class UiAlertTitle {
-
     inputClass = input<string>('', { alias: 'class' });
-    computedClass = computed(() => alertTitleVariants({ class: this.inputClass() }));
+    computedClass = computed(() => titleVariant({ class: this.inputClass() }));
 }
 
 @Directive({
@@ -61,7 +55,6 @@ export class UiAlertTitle {
     }
 })
 export class UiAlertDescription {
-
     inputClass = input<string>('', { alias: 'class' });
-    computedClass = computed(() => alertDescriptionVariants({ class: this.inputClass() }));
+    computedClass = computed(() => descriptionVariant({ class: this.inputClass() }));
 }

projects/core/src/lib/avatar.ts

@@ -3,16 +3,15 @@ import { computed, Directive, input, numberAttribute } from '@angular/core';
 import { NgpAvatar, NgpAvatarFallback, NgpAvatarImage } from "ng-primitives/avatar";
 import { tv } from "tailwind-variants";
 
-export const avatarVariants = tv({
-    base: 'relative flex w-12 h-12 shrink-0 overflow-hidden rounded-full'
+const avatarVariants = tv({
+    slots: {
+        base: 'relative flex w-12 h-12 shrink-0 overflow-hidden rounded-full',
+        imageVariant: 'aspect-square size-full',
+        fallbackVariant: 'bg-muted flex size-full items-center justify-center rounded-full'
+    }
 });
 
-export const avatarImageVariants = tv({
-    base: 'aspect-square size-full'
-});
-export const avatarFallbackVariants = tv({
-    base: 'bg-muted flex size-full items-center justify-center rounded-full'
-});
+const { base, imageVariant, fallbackVariant } = avatarVariants();
 
 @Directive({
     selector: '[uiAvatar]',
@@ -24,7 +23,7 @@ export const avatarFallbackVariants = tv({
 })
 export class UiAvatar {
     inputClass = input<string>('', { alias: 'class' });
-    computedClass = computed(() => avatarVariants({ class: this.inputClass() }));
+    computedClass = computed(() => base({ class: this.inputClass() }));
 }
 
 @Directive({
@@ -37,7 +36,7 @@ export class UiAvatar {
 })
 export class UiAvatarImage {
     inputClass = input<string>('', { alias: 'class' });
-    computedClass = computed(() => avatarImageVariants({ class: this.inputClass() }));
+    computedClass = computed(() => imageVariant({ class: this.inputClass() }));
 }
 
 @Directive({
@@ -53,7 +52,7 @@ export class UiAvatarImage {
 })
 export class UiAvatarFallback {
     inputClass = input<string>('', { alias: 'class' });
-    computedClass = computed(() => avatarFallbackVariants({ class: this.inputClass() }));
+    computedClass = computed(() => fallbackVariant({ class: this.inputClass() }));
     readonly delay = input<number, NumberInput>(0, {
         alias: 'uiAvatarFallbackDelay',
         transform: numberAttribute,

projects/core/src/lib/button.ts

@@ -3,7 +3,7 @@ import { VariantProps } from 'tailwind-variants';
 import { NgpButton } from "ng-primitives/button";
 import { tv } from 'tailwind-variants';
 
-export const buttonVariants = tv({
+const buttonVariants = tv({
     base: "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-[color,box-shadow] data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 ring-ring/10 dark:ring-ring/20 dark:outline-ring/40 outline-ring/50 data-[focus-visible]:ring-4 data-[focus-visible]:outline-1 aria-invalid:focus-visible:ring-0 cursor-pointer",
     variants: {
         variant: {

projects/core/src/lib/dialog.ts

@@ -2,33 +2,19 @@ import { computed, Directive, input } from "@angular/core";
 import { tv } from "tailwind-variants";
 import { NgpDialog, NgpDialogDescription, NgpDialogOverlay, NgpDialogTitle, NgpDialogTrigger } from "ng-primitives/dialog";
 
-const dialogOverlayVariants = tv({
-    base: 'data-[enter]:animate-in data-[exit]:animate-out data-[exit]:fade-out-0 data-[enter]:fade-in-0 fixed inset-0 z-50 bg-black/50'
-});
-
 const dialogVariants = tv({
-    base: 'bg-background data-[enter]:animate-in data-[exit]:animate-out data-[exit]:fade-out-0 data-[enter]:fade-in-0 data-[exit]:zoom-out-95 data-[enter]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border border-border p-6 shadow-lg sm:max-w-lg'
-});
-
-const dialogHeaderVariants = tv({
-    base: 'flex gap-2 justify-between items-center sm:text-left'
-});
-
-const dialogFooterVariants = tv({
-    base: 'flex flex-col-reverse gap-2 sm:flex-row sm:justify-end'
+    slots: {
+        base: 'bg-background data-[enter]:animate-in data-[exit]:animate-out data-[exit]:fade-out-0 data-[enter]:fade-in-0 data-[exit]:zoom-out-95 data-[enter]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border border-border p-6 shadow-lg sm:max-w-lg',
+        overlayVariant: 'data-[enter]:animate-in data-[exit]:animate-out data-[exit]:fade-out-0 data-[enter]:fade-in-0 fixed inset-0 z-50 bg-black/50',
+        headerVarinat: 'flex gap-2 justify-between items-center sm:text-left',
+        footerVariant: 'flex flex-col-reverse gap-2 sm:flex-row sm:justify-end',
+        titleVariant: 'text-lg leading-none font-semibold',
+        descriptionVariant: 'text-muted-foreground text-sm',
+        triggerVariant: ''
+    }
 });
 
-const dialogTitleVariants = tv({
-    base: 'text-lg leading-none font-semibold'
-});
-
-const dialogDescriptionVariants = tv({
-    base: 'text-muted-foreground text-sm'
-});
-
-const dialogPlainVariants = tv({
-    base: ''
-})
+const { base, overlayVariant, headerVarinat, footerVariant, titleVariant, descriptionVariant, triggerVariant } = dialogVariants();
 
 @Directive({
     selector: '[uiDialog]',
@@ -40,7 +26,7 @@ const dialogPlainVariants = tv({
 })
 export class UiDialog {
     inputClass = input<string>('', { alias: 'class' });
-    computedClass = computed(() => dialogVariants({ class: this.inputClass() }));
+    computedClass = computed(() => base({ class: this.inputClass() }));
 }
 
 @Directive({
@@ -53,7 +39,7 @@ export class UiDialog {
 })
 export class UiDialogHeader {
     inputClass = input<string>('', { alias: 'class' });
-    computedClass = computed(() => dialogHeaderVariants({ class: this.inputClass() }));
+    computedClass = computed(() => headerVarinat({ class: this.inputClass() }));
 }
 
 @Directive({
@@ -66,7 +52,7 @@ export class UiDialogHeader {
 })
 export class UiDialogTitle {
     inputClass = input<string>('', { alias: 'class' });
-    computedClass = computed(() => dialogTitleVariants({ class: this.inputClass() }));
+    computedClass = computed(() => titleVariant({ class: this.inputClass() }));
 }
 
 @Directive({
@@ -79,7 +65,7 @@ export class UiDialogTitle {
 })
 export class UiDialogDescription {
     inputClass = input<string>('', { alias: 'class' });
-    computedClass = computed(() => dialogDescriptionVariants({ class: this.inputClass() }));
+    computedClass = computed(() => descriptionVariant({ class: this.inputClass() }));
 }
 
 @Directive({
@@ -92,7 +78,7 @@ export class UiDialogDescription {
 })
 export class UiDialogFooter {
     inputClass = input<string>('', { alias: 'class' });
-    computedClass = computed(() => dialogFooterVariants({ class: this.inputClass() }));
+    computedClass = computed(() => footerVariant({ class: this.inputClass() }));
 }
 
 @Directive({
@@ -105,7 +91,7 @@ export class UiDialogFooter {
 })
 export class UiDialogTrigger {
     inputClass = input<string>('', { alias: 'class' });
-    computedClass = computed(() => dialogPlainVariants({ class: this.inputClass() }));
+    computedClass = computed(() => triggerVariant({ class: this.inputClass() }));
 }
 
 @Directive({
@@ -118,5 +104,5 @@ export class UiDialogTrigger {
 })
 export class UiDialogOverlay {
     inputClass = input<string>('', { alias: 'class' });
-    computedClass = computed(() => dialogOverlayVariants({ class: this.inputClass() }));
+    computedClass = computed(() => overlayVariant({ class: this.inputClass() }));
 }