core: updated naming convention

Author: Mohammad Javed

projects/core/src/lib/accordion.ts

@@ -0,0 +1,91 @@
+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'
+});
+
+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'
+});
+
+@Directive({
+    selector: '[uiAccordion]',
+    exportAs: 'uiAccordion',
+    hostDirectives: [
+        {
+            directive: NgpAccordion,
+            inputs: [
+                'ngpAccordionValue:value',
+                'ngpAccordionType:type',
+                'ngpAccordionCollapsible:collapsible',
+                'ngpAccordionDisabled:disabled',
+                'ngpAccordionOrientation:orientation',
+            ],
+            outputs: ['ngpAccordionValueChange: uiAccordionValueChange'],
+        },
+    ],
+})
+export class UiAccordion {
+
+}
+
+
+@Directive({
+    selector: '[uiAccordionTrigger]',
+    exportAs: 'uiAccordionTrigger',
+    host: {
+        '[class]': 'computedClass()'
+    },
+    hostDirectives: [NgpAccordionTrigger]
+})
+export class UiAccordionTrigger {
+
+    inputClass = input<string>('', { alias: 'class' });
+
+    computedClass = computed(() => accordionTriggerVariants({ class: this.inputClass() }));
+
+}
+
+@Directive({
+    selector: '[uiAccordionItem]',
+    exportAs: 'uiAccordionItem',
+    host: {
+        '[class]': 'computedClass()'
+    },
+    hostDirectives: [
+        {
+            directive: NgpAccordionItem,
+            inputs: ['ngpAccordionItemValue:value', 'ngpAccordionItemDisabled:disabled'],
+        },
+    ],
+})
+export class UiAccordionItem {
+
+    inputClass = input<string>('', { alias: 'class' });
+
+    computedClass = computed(() => accordionItemVariants({ class: this.inputClass() }));
+
+}
+
+
+@Directive({
+    selector: '[uiAccordionContent]',
+    exportAs: 'uiAccordionContent',
+    host: {
+        '[class]': 'computedClass()'
+    },
+    hostDirectives: [NgpAccordionContent]
+})
+export class UiAccordionContent {
+
+    inputClass = input<string>('', { alias: 'class' });
+
+    computedClass = computed(() => accordionContentVariants({ class: this.inputClass() }));
+
+}

projects/core/src/lib/accordion/accordion-content.directive.ts

@@ -0,0 +1,67 @@
+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',
+    variants: {
+        variant: {
+            default: "bg-background text-foreground border-border",
+            destructive: "border-destructive/50 text-destructive  [&>[uiAlertIcon]]:text-current",
+        },
+    },
+    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'
+});
+
+type AlertVariants = VariantProps<typeof alertVariants>;
+
+@Directive({
+    selector: '[uiAlert]',
+    exportAs: 'uiAlert',
+    host: {
+        '[class]': 'computedClass()'
+    }
+})
+
+export class UiAlert {
+    inputClass = input<string>('', { alias: 'class' });
+
+    variant = input<AlertVariants['variant']>('default');
+
+    computedClass = computed(() => alertVariants({ variant: this.variant(), class: this.inputClass() }));
+}
+
+@Directive({
+    selector: '[uiAlertTitle]',
+    exportAs: 'uiAlertTitle',
+    host: {
+        '[class]': 'computedClass()'
+    }
+})
+export class UiAlertTitle {
+
+    inputClass = input<string>('', { alias: 'class' });
+    computedClass = computed(() => alertTitleVariants({ class: this.inputClass() }));
+}
+
+@Directive({
+    selector: '[uiAlertDescription]',
+    exportAs: 'uiAlertDescription',
+    host: {
+        '[class]': 'computedClass()'
+    }
+})
+export class UiAlertDescription {
+
+    inputClass = input<string>('', { alias: 'class' });
+    computedClass = computed(() => alertDescriptionVariants({ class: this.inputClass() }));
+}