@ngbase/adk 0.1.2 → 0.1.4

package/schematics/components/files/datepicker/datepicker.ts.template

@@ -4,7 +4,9 @@ import {
   DatepickerGroup,
   NgbDatePicker,
   NgbDatepickerTrigger,
+  NgbEndDate,
   aliasDatePicker,
+  aliasDatePickerTrigger,
   registerDatePicker,
 } from '@ngbase/adk/datepicker';
 import { RangePipe } from '@ngbase/adk/utils';
@@ -35,24 +37,23 @@ export class DatePicker<D> extends NgbDatePicker<D> {}
 
 @Directive({
   selector: '[<%= name %>DatepickerTrigger]',
-  providers: [registerDatePicker(DatePicker)],
-  hostDirectives: [
-    {
-      directive: NgbDatepickerTrigger,
-      inputs: [
-        'noOfCalendars',
-        'range',
-        'time',
-        'format',
-        'fieldFormat',
-        'dateFilter',
-        'pickerType',
-        'pickerTemplate',
-      ],
-    },
-  ],
+  exportAs: '<%= name %>DatepickerTrigger',
+  providers: [registerDatePicker(DatePicker), aliasDatePickerTrigger(DatepickerTrigger)],
   host: {
-    class: 'cursor-pointer hover:bg-muted-background outline-none',
+    class: 'cursor-pointer hover:bg-muted outline-none w-full bg-transparent',
   },
 })
-export class DatepickerTrigger<D> {}
+export class DatepickerTrigger<D> extends NgbDatepickerTrigger<D> {}
+
+@Directive({
+  selector: '[<%= name %>EndDate]',
+  hostDirectives: [{ directive: NgbEndDate, inputs: ['ngbEndDate: <%= name %>EndDate'] }],
+  host: {
+    class: 'hidden',
+  },
+})
+export class EndDate {
+  constructor() {
+    inject(NgbEndDate).hidden = true;
+  }
+}

package/schematics/components/files/datepicker/time.ts.template

@@ -12,21 +12,21 @@ import { Button } from '<%= basepath %>/button';
       ngbTimeInput="hours"
       [(value)]="hours"
       (valueChange)="updateValue()"
-      class="w-7 px-1 text-center font-semibold focus:bg-muted-background"
+      class="w-7 px-1 text-center font-semibold focus:bg-muted"
     />
     <span>:</span>
     <input
       ngbTimeInput="minutes"
       [(value)]="minutes"
       (valueChange)="updateValue()"
-      class="w-7 px-1 text-center font-semibold focus:bg-muted-background"
+      class="w-7 px-1 text-center font-semibold focus:bg-muted"
     />
     <span>:</span>
     <input
       ngbTimeInput="seconds"
       [(value)]="seconds"
       (valueChange)="updateValue()"
-      class="w-7 px-1 text-center font-semibold focus:bg-muted-background"
+      class="w-7 px-1 text-center font-semibold focus:bg-muted"
     />
     @if (!is24()) {
       <div class="ml-1 flex gap-2">

package/schematics/components/files/dialog/dialog.ts.template

@@ -27,7 +27,7 @@ import { DragMove } from '@ngbase/adk/drag';
         ngbDialogMain
         [@viewAnimation]
         class="{{
-          'pointer-events-auto relative flex max-w-[100vw] flex-col overflow-hidden border bg-foreground shadow-lg' +
+          'pointer-events-auto relative flex max-w-[100vw] flex-col overflow-hidden border bg-background shadow-lg' +
             (options().fullWindow
               ? ' h-screen w-screen border-none'
               : ' max-w-[calc(100vw-30px)] rounded-lg')

package/schematics/components/files/drawer/drawer.ts.template

@@ -15,10 +15,10 @@ import { createHostAnimation, fadeAnimation } from '@ngbase/adk/utils';
   template: `
     <div class="pointer-events-none flex h-full flex-col justify-end">
       <div
-        class="pointer-events-auto flex max-h-[90vh] flex-col overflow-hidden rounded-tl-2xl rounded-tr-2xl border-t bg-foreground p-4 shadow-2xl"
+        class="pointer-events-auto flex max-h-[90vh] flex-col overflow-hidden rounded-tl-2xl rounded-tr-2xl border-t bg-background p-4 shadow-2xl"
         [@bottomAnimation]
       >
-        <button class="mx-auto h-2 w-20 rounded-full bg-muted"></button>
+        <button class="bg-muted-foreground mx-auto h-2 w-20 rounded-full"></button>
         @if (!isHideHeader) {
           <div class="flex h-8 items-center">
             <h2 class="flex-1 font-bold">{{ options.title }}</h2>

package/schematics/components/files/form-field/form-field.ts.template

@@ -26,9 +26,9 @@ import { NgbSelectTarget } from '@ngbase/adk/select';
     <ng-content select="[<%= name %>Label]" />
     <ng-content select="[<%= name %>Description]" />
     <div class="mt-1 flex items-center" #target <%= name %>InputStyle>
-      <ng-content select="[<%= name %>InputPrefix]" />
+      <ng-content select="[<%= name %>Prefix]" />
       <ng-content />
-      <ng-content select="[<%= name %>InputSuffix]" />
+      <ng-content select="[<%= name %>Suffix]" />
     </div>
     <ng-content select="[<%= name %>Error]" />
   `,
@@ -46,13 +46,13 @@ export class FormField {
 
 @Directive({
   selector: '[<%= name %>Input]',
-  hostDirectives: [{ directive: InputBase, inputs: ['value'] }],
+  hostDirectives: [{ directive: InputBase, inputs: ['value'], outputs: ['valueChange'] }],
   host: {
-    class: 'focus:outline-none',
+    class: 'outline-none w-full bg-transparent',
     '[class.border-red-500]': 'formField?.hasErrors()',
   },
 })
-export class Input<T = unknown> {
+export class Input {
   readonly formField = inject(NgbFormField, { optional: true });
 }
 
@@ -70,13 +70,13 @@ export class Label {}
 @Directive({
   selector: '[<%= name %>Description]',
   host: {
-    class: 'text-sm text-muted',
+    class: 'text-sm text-muted-foreground',
   },
 })
 export class Description {}
 
 @Directive({
-  selector: '[<%= name %>InputPrefix]',
+  selector: '[<%= name %>Prefix]',
   host: {
     class: 'mr-2.5',
   },
@@ -84,7 +84,7 @@ export class Description {}
 export class InputPrefix {}
 
 @Directive({
-  selector: '[<%= name %>InputSuffix]',
+  selector: '[<%= name %>Suffix]',
   host: {
     class: 'ml-2.5',
   },

package/schematics/components/files/form-field/input-style.directive.ts.template

@@ -5,7 +5,7 @@ import { ɵFocusStyle as FocusStyle } from '<%= basepath %>/checkbox';
   selector: '[<%= name %>InputStyle]',
   hostDirectives: [{ directive: FocusStyle, inputs: ['unfocus'] }],
   host: {
-    class: 'inline-block rounded-lg bg-foreground px-2.5 py-2 border font-normal min-h-10',
+    class: 'inline-block rounded-lg bg-transparent px-2.5 py-2 border font-normal min-h-10',
   },
 })
 export class InputStyle {}

package/schematics/components/files/keys/key.ts.template

@@ -15,7 +15,7 @@ import { keyMap } from '@ngbase/adk/keys';
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `{{ content() }}`,
   host: {
-    class: 'ml-auto text-xs tracking-widest opacity-60 text-muted',
+    class: 'ml-auto text-xs tracking-widest opacity-60 text-muted-foreground',
   },
 })
 export class Key {

package/schematics/components/files/list/list.ts.template

@@ -5,7 +5,7 @@ import { NgbList, NgbListActionGroup, provideList } from '@ngbase/adk/list';
   selector: '[<%= name %>ListStyle]',
   host: {
     class:
-      'flex items-center gap-2 py-2 px-2 hover:bg-muted-background cursor-pointer rounded-md text-left data-[focus="true"]:bg-muted-background',
+      'flex items-center gap-2 py-2 px-2 hover:bg-accent cursor-pointer rounded-md text-left data-[focus="true"]:bg-accent',
   },
 })
 export class ListStyle {}

package/schematics/components/files/otp/otp.ts.template

@@ -16,7 +16,7 @@ import { InputStyle } from '<%= basepath %>/form-field';
           <%= name %>InputStyle
           ngbOtpValue
           class="{{
-            'mb-0 aspect-square w-10 rounded-none !px-0 text-center text-base font-semibold data-[disabled]:bg-muted-background/40 data-[disabled]:text-muted data-[focus]:relative' +
+            'mb-0 aspect-square w-10 rounded-none !px-0 text-center text-base font-semibold data-[disabled]:bg-muted/40 data-[disabled]:text-muted-foreground data-[focus]:relative' +
               ((dir.isRtl() ? ll : i === 0) ? ' !rounded-l-lg' : '') +
               ((dir.isRtl() ? i === 0 : ll) ? ' !rounded-r-lg' : '')
           }}"

package/schematics/components/files/pagination/pagination.ts.template

@@ -26,7 +26,11 @@ import {
   template: `
     <div class="flex items-center gap-2">
       <div>Rows per page</div>
-      <<%= name %>-select [value]="size()" (valueChange)="sizeChanged($event)" class="w-20 !py-1.5">
+      <<%= name %>-select
+        [value]="size()"
+        (valueChange)="sizeChanged($event)"
+        class="h-8 !w-auto rounded-md border px-2"
+      >
         @for (size of sizeOptions(); track size) {
           <<%= name %>-option [value]="size">
             {{ size }}
@@ -48,7 +52,7 @@ import {
             ngbPaginationBtn="page"
             [jump]="snap"
             <%= name %>Button="ghost"
-            class="min-w-9 !p-2 ring-offset-background aria-[current=page]:bg-muted-background aria-[current=page]:text-primary"
+            class="min-w-9 !p-2 ring-offset-foreground aria-[current=page]:bg-muted aria-[current=page]:text-primary"
           >
             {{ snap }}
           </button>

package/schematics/components/files/popover/popover.ts.template

@@ -19,7 +19,7 @@ import {
   template: ` <div
       ngbPopoverMain
       [@slideInOutAnimation]
-      class="menu-container pointer-events-auto fixed z-10 flex flex-col rounded-lg border bg-foreground shadow-md"
+      class="menu-container pointer-events-auto fixed z-10 flex flex-col rounded-lg border bg-popover text-popover-foreground shadow-md"
     >
       <div class="flex flex-1 flex-col overflow-auto" ngbPopoverArrow>
         <ng-container #myDialog />
@@ -59,6 +59,6 @@ export class PopoverTrigger {}
 
 @Directive({
   selector: '[<%= name %>PopoverClose]',
-  hostDirectives: [NgbPopoverClose],
+  hostDirectives: [{ directive: NgbPopoverClose, inputs: ['ngbPopoverClose: <%= name %>PopoverClose'] }],
 })
 export class PopoverClose {}

package/schematics/components/files/progress/progress.ts.template

@@ -8,7 +8,7 @@ import { NgbProgress, NgbProgressBar } from '@ngbase/adk/progress';
   imports: [NgbProgressBar],
   template: `<div class="h-full bg-primary transition" ngbProgressBar></div>`,
   host: {
-    class: 'block h-2 my-1 bg-muted-background rounded-full',
+    class: 'block h-2 my-1 bg-muted rounded-full',
   },
 })
 export class Progress {}

package/schematics/components/files/radio/radio.ts.template

@@ -1,5 +1,5 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { NgbRadio, NgbRadioGroup, NgbRadioIndicator } from '@ngbase/adk/radio';
+import { aliasRadio, NgbRadio, NgbRadioGroup, NgbRadioIndicator } from '@ngbase/adk/radio';
 import { ɵFocusStyle as FocusStyle } from '<%= basepath %>/checkbox';
 
 @Component({
@@ -15,15 +15,17 @@ export class RadioGroup {}
 @Component({
   selector: '<%= name %>-radio, [<%= name %>Radio]',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  hostDirectives: [{ directive: NgbRadio, inputs: ['value', 'disabled'] }],
+  providers: [aliasRadio(Radio)],
   imports: [FocusStyle, NgbRadioIndicator],
   template: `
     <button
       <%= name %>FocusStyle
       ngbRadioIndicator
-      class="custom-radio relative flex h-4 w-4 flex-none items-center justify-center rounded-full border border-primary group-aria-[disabled='true']:border-muted"
+      class="custom-radio relative flex h-4 w-4 flex-none items-center justify-center rounded-full border border-primary group-aria-[disabled='true']:border-muted-foreground"
     >
-       <div class="h-2 w-2 rounded-full bg-primary group-aria-[disabled='true']:bg-muted"></div>
+       <div
+        class="h-2 w-2 rounded-full bg-primary group-aria-[disabled='true']:bg-muted-foreground"
+      ></div>
     </button>
     <ng-content />
   `,
@@ -32,4 +34,4 @@ export class RadioGroup {}
       'flex items-center gap-2 py-1 cursor-pointer aria-[disabled="true"]:opacity-40 aria-[disabled="true"]:cursor-not-allowed group',
   },
 })
-export class Radio {}
+export class Radio extends NgbRadio {}

package/schematics/components/files/resizable/resizable.ts.template

@@ -43,9 +43,12 @@ export class ResizableGroup extends NgbResizableGroup {}
                 : ' right-0 top-0 w-0 cursor-ew-resize border-l after:h-full after:w-2')
           }}"
         >
-          <<%= name %>-icon name="lucideGripVertical" class="z-30 rounded-lg border
-          bg-muted-background py-0.5" size=".75rem" [class]="resizable.direction() === 'vertical' ?
-          'rotate-90' : ''" />
+          <<%= name %>-icon
+            name="lucideGripVertical"
+            class="z-30 rounded-lg border bg-muted py-0.5"
+            size=".75rem"
+            [class]="resizable.direction() === 'vertical' ? 'rotate-90' : ''"
+          />
         </div>
       }
     </ng-template>`,

package/schematics/components/files/select/option.ts.template

@@ -14,7 +14,7 @@ import { ListStyle } from '<%= basepath %>/list';
     <ng-content />`,
   host: {
     class: 'outline-none',
-    '[class.bg-muted-background]': 'option.active() || option.checked()',
+    '[class.bg-muted]': 'option.active() || option.checked()',
   },
 })
 export class Option<T> {
@@ -24,7 +24,7 @@ export class Option<T> {
 @Component({
   selector: '<%= name %>-option-group, [<%= name %>OptionGroup]',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  template: `<div class="sticky -top-1 z-10 bg-foreground px-2 py-1.5 text-sm text-muted">
+  template: `<div class="text-muted-foreground bg-popover sticky -top-1 z-10 px-2 py-1.5 text-sm">
       {{ label() }}
     </div>
     <ng-content />`,

package/schematics/components/files/select/select.ts.template

@@ -43,12 +43,12 @@ export class SelectOption<T> {}
       <!-- Prefix template -->
       <ng-content select=".select-prefix" />
 
-      <span class="flex-1 truncate" [class.text-muted]="!cValue()">
+      <span class="flex-1 truncate" [class.text-muted-foreground]="!cValue()">
         <ng-content select="[<%= name %>SelectTrigger]">
           {{ cValue() || placeholder() }}
         </ng-content>
       </span>
-      <<%= name %>-icon name="lucideChevronsUpDown" class="ml-0.5 text-muted" />
+      <<%= name %>-icon name="lucideChevronsUpDown" class="ml-0.5 text-muted-foreground" />
     </button>
 
     <!-- Options template -->
@@ -87,7 +87,7 @@ export class SelectOption<T> {}
     </ng-template>
   `,
   host: {
-    class: 'flex cursor-pointer font-medium outline-none',
+    class: 'flex cursor-pointer font-medium outline-none w-full',
     '[class.pointer-events-none]': 'disabled()',
   },
 })

package/schematics/components/files/selectable/selectable.ts.template

@@ -9,7 +9,7 @@ import { NgbSelectable, NgbSelectableItem } from '@ngbase/adk/selectable';
   host: {
     class:
       'flex-1 flex items-center font-medium justify-center px-3 py-1.5 cursor-pointer transition-colors rounded-md whitespace-nowrap focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary',
-    '[class]': `selectable.selected() ? 'bg-foreground shadow-md ring-1 ring-border' : 'opacity-60'`,
+    '[class]': `selectable.selected() ? 'bg-background text-primary shadow-md ring-1 ring-border' : 'opacity-60'`,
   },
 })
 export class SelectableItem<T> {
@@ -19,10 +19,6 @@ export class SelectableItem<T> {
 @Component({
   selector: '<%= name %>-selectable',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  template: `<ng-content />`,
-  host: {
-    class: 'inline-flex relative bg-muted-background rounded-md p-0.5',
-  },
   hostDirectives: [
     {
       directive: NgbSelectable,
@@ -30,5 +26,9 @@ export class SelectableItem<T> {
       outputs: ['activeIndexChange', 'valueChanged'],
     },
   ],
+  template: `<ng-content />`,
+  host: {
+    class: 'inline-flex relative bg-muted text-muted-foreground rounded-md p-0.5',
+  },
 })
 export class Selectable<T> {}

package/schematics/components/files/sheet/sheet.ts.template

@@ -21,7 +21,7 @@ import { createHostAnimation, fadeAnimation } from '@ngbase/adk/utils';
       [class]="options.position === 'left' ? 'justify-start' : 'justify-end'"
     >
       <div
-        class="pointer-events-auto m-2 flex flex-col overflow-hidden rounded-lg border-l bg-foreground shadow-2xl will-change-transform"
+        class="pointer-events-auto m-2 flex flex-col overflow-hidden rounded-lg border-l bg-background shadow-2xl will-change-transform"
         [@sideAnimation]="position()"
         [ngStyle]="{
           width: options.width,

package/schematics/components/files/sidenav/sidenav.ts.template

@@ -41,7 +41,7 @@ export class Sidenav extends NgbSidenav {}
     </div>
   `,
   host: {
-    class: 'block h-full bg-foreground z-p transition-[width] duration-500',
+    class: 'block h-full bg-background z-p transition-[width] duration-500',
   },
   animations: [slideAnimation('500ms cubic-bezier(0.4, 0, 0.2, 1)')],
 })

package/schematics/components/files/skeleton/skeleton.ts.template

@@ -4,7 +4,7 @@ import { Component, input } from '@angular/core';
   selector: '<%= name %>-skeleton',
   template: ``,
   host: {
-    class: 'block animate-pulse bg-muted-background',
+    class: 'block animate-pulse bg-muted',
     '[class]': `shape() === 'circle' ? 'rounded-full' : 'rounded-md'`,
   },
 })

package/schematics/components/files/slider/slider.ts.template

@@ -11,16 +11,16 @@ import { ɵFocusStyle as FocusStyle } from '<%= basepath %>/checkbox';
   template: `
     <div
       ngbSliderTrack
-      class="h-full overflow-hidden rounded-full bg-muted-background aria-[disabled=true]:bg-opacity-30"
+      class="h-full overflow-hidden rounded-full bg-muted aria-[disabled=true]:bg-opacity-30"
     >
-      <div ngbSliderRange class="bg-primary aria-[disabled=true]:bg-muted-background"></div>
+      <div ngbSliderRange class="bg-primary aria-[disabled=true]:bg-muted"></div>
     </div>
     @for (thumb of noOfThumbs(); track thumb) {
       <button
         ngbSliderThumb
         <%= name %>FocusStyle
         class="{{
-          'inline-block h-5 w-5 rounded-full border-2 bg-foreground shadow-md aria-[disabled=false]:border-primary aria-[disabled=true]:bg-muted-background ' +
+          'inline-block h-5 w-5 rounded-full border-2 bg-background shadow-md aria-[disabled=false]:border-primary aria-[disabled=true]:bg-muted ' +
             (orientation() === 'vertical'
               ? '-left-1.5 -translate-y-1/2'
               : '-top-1.5 -translate-x-1/2')

package/schematics/components/files/sonner/sonner.ts.template

@@ -17,12 +17,12 @@ import {
   ],
   imports: [Icon, SonnerBase],
   template: `
-    <ul class="fixed bottom-0 right-0 flex flex-col gap-1">
+    <ul class="fixed bottom-0 right-0 z-p flex flex-col gap-1">
       @for (msg of messages(); track msg.id) {
         <li
           [ngbSonnerBase]="$index"
           class="{{
-            'm-4 w-96 rounded-lg border bg-foreground p-4 shadow-lg transition-all duration-300' +
+            'm-4 w-96 rounded-lg border bg-background p-4 shadow-lg transition-all duration-300' +
               (msg.type === 'success' ? ' bg-green-50 text-green-600' : '') +
               (msg.type === 'error' ? ' bg-red-50 text-red-600' : '') +
               (msg.type === 'warning' ? ' bg-yellow-50 text-yellow-600' : '')
@@ -35,7 +35,7 @@ import {
             {{ msg.message }}
           </h4>
           @if (msg.data?.description) {
-            <p class="text-muted">{{ msg.data?.description }}</p>
+            <p class="text-muted-foreground">{{ msg.data?.description }}</p>
           }
         </li>
       }

package/schematics/components/files/spinner/spinner.ts.template

@@ -64,7 +64,7 @@ const spinnerAnimation = trigger('enterLeave', [
   `,
   host: {
     class: 'inline-flex items-center justify-center transition-all duration-300 text-primary',
-    '[class]': `root() ? 'fixed inset-0 z-p bg-foreground bg-opacity-60 backdrop-blur-sm' : 'relative'`,
+    '[class]': `root() ? 'fixed inset-0 z-p bg-background bg-opacity-60 backdrop-blur-sm' : 'relative'`,
   },
   animations: [
     // animation for entering and exiting, with a bouncy effect

package/schematics/components/files/stepper/stepper.ts.template

@@ -22,7 +22,7 @@ import {
         <div
           [ngbStepperStep]="$index"
           class="{{
-            'relative flex pb-4 data-[index]:flex-1 data-[index]:after:mx-2 data-[index]:after:block data-[index]:after:flex-1 data-[index]:after:bg-background data-[index]:after:transition-colors' +
+            'relative flex pb-4 data-[index]:flex-1 data-[index]:after:mx-2 data-[index]:after:block data-[index]:after:flex-1 data-[index]:after:bg-foreground data-[index]:after:transition-colors' +
               (activeIndex() > $index ? ' data-[index]:after:bg-primary' : '') +
               (direction() === 'vertical'
                 ? ' flex-col data-[index]:after:absolute data-[index]:after:bottom-0 data-[index]:after:left-3 data-[index]:after:top-10 data-[index]:after:w-0.5'

package/schematics/components/files/switch/switch.ts.template

@@ -11,13 +11,13 @@ import { NgbSwitch, NgbSwitchLabel, NgbSwitchThumb, NgbSwitchTrack } from '@ngba
   template: `
     <button
       ngbSwitchTrack
-      class="relative w-9 rounded-full border-2 border-transparent bg-muted-background transition-colors aria-[checked=true]:bg-primary"
+      class="relative w-9 rounded-full border-2 border-transparent bg-muted transition-colors aria-[checked=true]:bg-primary"
     >
       <span
         #thumb="ngbSwitchThumb"
         ngbSwitchThumb
         [class]="thumb.checked() ? (thumb.rtl() ? '-translate-x-full' : 'translate-x-full') : ''"
-        class="block h-4 w-4 rounded-full bg-foreground shadow-sm transition-transform"
+        class="block h-4 w-4 rounded-full bg-background shadow-sm transition-transform"
       ></span>
     </button>
     <label ngbSwitchLabel><ng-content /></label>

package/schematics/components/files/table/index.ts.template

@@ -1,16 +1,17 @@
-import { Cell, CellDef } from './body-cell';
-import { BodyRow, BodyRowDef } from './body-row';
-import { Column } from './column';
-import { Head, HeadDef } from './head-cell';
-import { HeadRow, HeadRowDef } from './head-row';
-import { Table } from './table';
+import {
+  BodyRow,
+  BodyRowDef,
+  Cell,
+  CellDef,
+  Column,
+  HeadDef,
+  Head,
+  Table,
+  HeadRow,
+  HeadRowDef,
+} from './table';
 
 export * from './table';
-export * from './column';
-export * from './body-cell';
-export * from './head-cell';
-export * from './body-row';
-export * from './head-row';
 
 export const TableComponents = [
   BodyRow,

package/schematics/components/files/table/table.ts.template

@@ -1,12 +1,20 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { NgbTable } from '@ngbase/adk/table';
+import { ChangeDetectionStrategy, Component, Directive } from '@angular/core';
+import {
+  NgbBodyRow,
+  NgbBodyRowDef,
+  NgbCell,
+  NgbCellDef,
+  NgbColumn,
+  NgbHead,
+  NgbHeadDef,
+  NgbHeadRow,
+  NgbHeadRowDef,
+  NgbTable,
+} from '@ngbase/adk/table';
 
 @Component({
   selector: 'table[<%= name %>Table]',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  host: {
-    class: 'w-full text-sm',
-  },
   providers: [{ provide: NgbTable, useExisting: Table }],
   template: `
     <thead>
@@ -16,5 +24,99 @@ import { NgbTable } from '@ngbase/adk/table';
       <ng-container #tbody />
     </tbody>
   `,
+  host: {
+    class: 'w-full text-sm',
+  },
 })
 export class Table<T> extends NgbTable<T> {}
+
+// Cell
+@Component({
+  selector: '[<%= name %>Cell]',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  hostDirectives: [NgbCell],
+  template: `<ng-content />`,
+  host: {
+    class: 'px-4 py-2 align-middle bg-background',
+  },
+})
+export class Cell {}
+
+@Directive({
+  selector: '[<%= name %>CellDef]',
+  hostDirectives: [NgbCellDef],
+})
+export class CellDef {}
+
+// Body
+
+@Directive({
+  selector: '[<%= name %>BodyRowDef]',
+  hostDirectives: [
+    { directive: NgbBodyRowDef, inputs: ['ngbBodyRowDefColumns: <%= name %>BodyRowDefColumns'] },
+  ],
+})
+export class BodyRowDef {}
+
+@Component({
+  selector: '[<%= name %>BodyRow]',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [{ provide: NgbBodyRow, useExisting: BodyRow }],
+  template: `<ng-container #container />`,
+  host: {
+    class: '[&:not(:last-child)]:border-b hover:bg-muted h-12',
+  },
+})
+export class BodyRow extends NgbBodyRow {}
+
+// Column
+
+@Directive({
+  selector: '[<%= name %>Column]',
+  hostDirectives: [{ directive: NgbColumn, inputs: ['ngbColumn: <%= name %>Column', 'sticky'] }],
+})
+export class Column {}
+
+// Head Cell
+
+@Component({
+  selector: '[<%= name %>Head]',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  hostDirectives: [NgbHead],
+  template: `<ng-content />`,
+  host: {
+    class:
+      'px-4 py-2 text-left align-middle font-medium text-muted-foreground border-b bg-background',
+  },
+})
+export class Head {}
+
+@Directive({
+  selector: '[<%= name %>HeadDef]',
+  hostDirectives: [NgbHeadDef],
+})
+export class HeadDef {}
+
+// Head Row
+
+@Component({
+  selector: '[<%= name %>HeadRow]',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [{ provide: NgbHeadRow, useExisting: HeadRow }],
+  template: `<ng-container #container />`,
+  host: {
+    class: `h-10 [&[data-sticky=true]]:sticky [&[data-sticky=true]]:top-0 [&[data-sticky=true]]:bg-background`,
+  },
+})
+export class HeadRow extends NgbHeadRow {}
+
+@Directive({
+  selector: '[<%= name %>HeadRowDef]',
+  hostDirectives: [
+    {
+      directive: NgbHeadRowDef,
+      inputs: ['ngbHeadRowDef: <%= name %>HeadRowDef', 'ngbHeadRowDefSticky: <%= name %>HeadRowDefSticky'],
+    },
+  ],
+})
+export class HeadRowDef {}