@egose/shadcn-theme-ng-tw 0.0.28 → 0.1.0

package/calendar/fesm2022/calendar.mjs

@@ -33,22 +33,22 @@ class HlmCalendar {
         };
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "_heading" }] : /* istanbul ignore next */ []));
-    _btnClass = hlm(buttonVariants({ variant: 'ghost', size: 'icon' }), 'data-[today=true]:bg-muted group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground dark:hover:bg-muted/50 dark:hover:text-foreground relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-e-(--cell-radius) data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-s-(--cell-radius) [&>span]:text-xs [&>span]:opacity-70', 'data-[outside=true]:opacity-50', "data-[highlighted]:before:content-['']", 'data-[highlighted]:before:absolute', 'data-[highlighted]:before:bottom-1', 'data-[highlighted]:before:start-1/2', 'data-[highlighted]:before:h-1', 'data-[highlighted]:before:w-1', 'data-[highlighted]:before:-translate-x-1/2', 'data-[highlighted]:before:rounded-full', 'data-[highlighted]:before:bg-destructive');
+    _btnClass = hlm(buttonVariants({ variant: 'ghost', size: 'icon' }), 'tw:data-[today=true]:bg-muted tw:group-data-[focused=true]/day:border-ring tw:group-data-[focused=true]/day:ring-ring/50 tw:data-[range-end=true]:bg-primary tw:data-[range-end=true]:text-primary-foreground tw:data-[range-middle=true]:bg-muted tw:data-[range-middle=true]:text-foreground tw:data-[range-start=true]:bg-primary tw:data-[range-start=true]:text-primary-foreground tw:data-[selected-single=true]:bg-primary tw:data-[selected-single=true]:text-primary-foreground tw:dark:hover:bg-muted/50 tw:dark:hover:text-foreground tw:relative tw:isolate tw:z-10 tw:flex tw:aspect-square tw:size-auto tw:w-full tw:min-w-(--cell-size) tw:flex-col tw:gap-1 tw:border-0 tw:leading-none tw:font-normal tw:group-data-[focused=true]/day:relative tw:group-data-[focused=true]/day:z-10 tw:group-data-[focused=true]/day:ring-[3px] tw:data-[range-end=true]:rounded-(--cell-radius) tw:data-[range-end=true]:rounded-e-(--cell-radius) tw:data-[range-middle=true]:rounded-none tw:data-[range-start=true]:rounded-(--cell-radius) tw:data-[range-start=true]:rounded-s-(--cell-radius) tw:[&>span]:text-xs tw:[&>span]:opacity-70', 'tw:data-[outside=true]:opacity-50', "tw:data-[highlighted]:before:content-['']", 'tw:data-[highlighted]:before:absolute', 'tw:data-[highlighted]:before:bottom-1', 'tw:data-[highlighted]:before:start-1/2', 'tw:data-[highlighted]:before:h-1', 'tw:data-[highlighted]:before:w-1', 'tw:data-[highlighted]:before:-translate-x-1/2', 'tw:data-[highlighted]:before:rounded-full', 'tw:data-[highlighted]:before:bg-destructive');
     _selectClass = 'gap-0 px-1.5 py-2 [&>ng-icon]:ms-1';
     constructor() {
-        classes(() => 'p-3 [--cell-radius:var(--radius-md)] [--cell-size:--spacing(8)] group/calendar bg-background block in-data-[slot=card-content]:bg-transparent in-data-[slot=popover-content]:bg-transparent');
+        classes(() => 'tw:p-3 tw:[--cell-radius:var(--radius-md)] tw:[--cell-size:--spacing(8)] tw:group/calendar tw:bg-background tw:block tw:in-data-[slot=card-content]:bg-transparent tw:in-data-[slot=popover-content]:bg-transparent');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmCalendar, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: HlmCalendar, isStandalone: true, selector: "hlm-calendar", inputs: { captionLayout: { classPropertyName: "captionLayout", publicName: "captionLayout", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "calendar" } }, hostDirectives: [{ directive: i1.BrnCalendar, inputs: ["min", "min", "max", "max", "disabled", "disabled", "date", "date", "dateDisabled", "dateDisabled", "weekStartsOn", "weekStartsOn", "highlightDays", "highlightDays", "defaultFocusedDate", "defaultFocusedDate"], outputs: ["dateChange", "dateChange"] }], ngImport: i0, template: `
-    <div class="inline-flex flex-col gap-4">
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmCalendar, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: HlmCalendar, isStandalone: true, selector: "hlm-calendar", inputs: { captionLayout: { classPropertyName: "captionLayout", publicName: "captionLayout", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "calendar" } }, hostDirectives: [{ directive: i1.BrnCalendar, inputs: ["min", "min", "max", "max", "disabled", "disabled", "date", "date", "dateDisabled", "dateDisabled", "weekStartsOn", "weekStartsOn", "highlightDays", "highlightDays", "defaultFocusedDate", "defaultFocusedDate"], outputs: ["dateChange", "dateChange"] }], ngImport: i0, template: `
+    <div class="tw:inline-flex tw:flex-col tw:gap-4">
       <!-- Header -->
-      <div class="flex w-full items-center justify-between gap-1.5">
+      <div class="tw:flex tw:w-full tw:items-center tw:justify-between tw:gap-1.5">
         <ng-template #month>
-          <hlm-select brnCalendarMonthSelect class="order-1">
+          <hlm-select brnCalendarMonthSelect class="tw:order-1">
             <hlm-select-trigger size="sm" [class]="_selectClass">
               <hlm-select-value />
             </hlm-select-trigger>
-            <hlm-select-content *hlmSelectPortal class="max-h-80">
+            <hlm-select-content *hlmSelectPortal class="tw:max-h-80">
               <hlm-select-group>
                 @for (month of _i18n.config().months(); track month) {
                   <hlm-select-item [value]="month">{{ month }}</hlm-select-item>
@@ -58,11 +58,11 @@ class HlmCalendar {
           </hlm-select>
         </ng-template>
         <ng-template #year>
-          <hlm-select brnCalendarYearSelect class="order-3">
+          <hlm-select brnCalendarYearSelect class="tw:order-3">
             <hlm-select-trigger size="sm" [class]="_selectClass">
               <hlm-select-value />
             </hlm-select-trigger>
-            <hlm-select-content *hlmSelectPortal class="max-h-80">
+            <hlm-select-content *hlmSelectPortal class="tw:max-h-80">
               <hlm-select-group>
                 @for (year of _i18n.config().years(); track year) {
                   <hlm-select-item [value]="year">{{ year }}</hlm-select-item>
@@ -77,9 +77,9 @@ class HlmCalendar {
           brnCalendarPreviousButton
           variant="ghost"
           hlmBtn
-          class="order-first size-(--cell-size) p-0 select-none aria-disabled:opacity-50"
+          class="tw:order-first tw:size-(--cell-size) tw:p-0 tw:select-none tw:aria-disabled:opacity-50"
         >
-          <ng-icon name="lucideChevronLeft" class="rtl:rotate-180" />
+          <ng-icon name="lucideChevronLeft" class="tw:rtl:rotate-180" />
         </button>
 
         @switch (captionLayout()) {
@@ -89,14 +89,14 @@ class HlmCalendar {
           }
           @case ('dropdown-months') {
             <ng-container [ngTemplateOutlet]="month" />
-            <div brnCalendarHeader class="order-4 text-sm font-medium">{{ heading.year }}</div>
+            <div brnCalendarHeader class="tw:order-4 tw:text-sm tw:font-medium">{{ heading.year }}</div>
           }
           @case ('dropdown-years') {
-            <div brnCalendarHeader class="order-2 text-sm font-medium">{{ heading.month }}</div>
+            <div brnCalendarHeader class="tw:order-2 tw:text-sm tw:font-medium">{{ heading.month }}</div>
             <ng-container [ngTemplateOutlet]="year" />
           }
           @case ('label') {
-            <div brnCalendarHeader class="order-5 text-sm font-medium">{{ heading.header }}</div>
+            <div brnCalendarHeader class="tw:order-5 tw:text-sm tw:font-medium">{{ heading.header }}</div>
           }
         }
 
@@ -104,19 +104,19 @@ class HlmCalendar {
           brnCalendarNextButton
           hlmBtn
           variant="ghost"
-          class="order-last size-(--cell-size) p-0 select-none aria-disabled:opacity-50"
+          class="tw:order-last tw:size-(--cell-size) tw:p-0 tw:select-none tw:aria-disabled:opacity-50"
         >
-          <ng-icon name="lucideChevronRight" class="rtl:rotate-180" />
+          <ng-icon name="lucideChevronRight" class="tw:rtl:rotate-180" />
         </button>
       </div>
 
-      <table class="w-full border-collapse space-y-1" brnCalendarGrid>
+      <table class="tw:w-full tw:border-collapse tw:space-y-1" brnCalendarGrid>
         <thead aria-hidden="true">
-          <tr class="flex">
+          <tr class="tw:flex">
             <th
               *brnCalendarWeekday="let weekday"
               scope="col"
-              class="text-muted-foreground flex-1 rounded-(--cell-radius) text-[0.8rem] font-normal select-none"
+              class="tw:text-muted-foreground tw:flex-1 tw:rounded-(--cell-radius) tw:text-[0.8rem] tw:font-normal tw:select-none"
               [attr.aria-label]="_i18n.config().labelWeekday(weekday)"
             >
               {{ _i18n.config().formatWeekdayName(weekday) }}
@@ -125,11 +125,11 @@ class HlmCalendar {
         </thead>
 
         <tbody role="rowgroup">
-          <tr *brnCalendarWeek="let week" class="mt-2 flex w-full">
+          <tr *brnCalendarWeek="let week" class="tw:mt-2 tw:flex tw:w-full">
             @for (date of week; track _dateAdapter.getTime(date)) {
               <td
                 brnCalendarCell
-                class="group/day relative aspect-square h-full w-full rounded-(--cell-radius) p-0 text-center select-none [&:first-child[data-selected=true]_button]:rounded-s-(--cell-radius) [&:last-child[data-selected=true]_button]:rounded-e-(--cell-radius)"
+                class="tw:group/day tw:relative tw:aspect-square tw:h-full tw:w-full tw:rounded-(--cell-radius) tw:p-0 tw:text-center tw:select-none tw:[&:first-child[data-selected=true]_button]:rounded-s-(--cell-radius) tw:[&:last-child[data-selected=true]_button]:rounded-e-(--cell-radius)"
               >
                 <button brnCalendarCellButton [date]="date" [class]="_btnClass">
                   {{ _dateAdapter.getDate(date) }}
@@ -140,9 +140,9 @@ class HlmCalendar {
         </tbody>
       </table>
     </div>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i1.BrnCalendarCellButton, selector: "button[brnCalendarCellButton]", inputs: ["date"] }, { kind: "directive", type: i1.BrnCalendarGrid, selector: "[brnCalendarGrid]" }, { kind: "directive", type: i1.BrnCalendarHeader, selector: "[brnCalendarHeader]", inputs: ["id"] }, { kind: "directive", type: i1.BrnCalendarNextButton, selector: "[brnCalendarNextButton]" }, { kind: "directive", type: i1.BrnCalendarPreviousButton, selector: "[brnCalendarPreviousButton]" }, { kind: "directive", type: i1.BrnCalendarWeek, selector: "[brnCalendarWeek]" }, { kind: "directive", type: i1.BrnCalendarWeekday, selector: "[brnCalendarWeekday]" }, { kind: "directive", type: i1.BrnCalendarCell, selector: "[brnCalendarCell]" }, { kind: "directive", type: i1.BrnCalendarMonthSelect, selector: "brnSelect[brnCalendarMonthSelect],hlm-select[brnCalendarMonthSelect]" }, { kind: "directive", type: i1.BrnCalendarYearSelect, selector: "brnSelect[brnCalendarYearSelect],hlm-select[brnCalendarYearSelect]" }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "directive", type: i2.HlmSelect, selector: "[hlmSelect],hlm-select" }, { kind: "component", type: i2.HlmSelectContent, selector: "hlm-select-content", inputs: ["showScroll"] }, { kind: "directive", type: i2.HlmSelectGroup, selector: "[hlmSelectGroup],hlm-select-group" }, { kind: "component", type: i2.HlmSelectItem, selector: "hlm-select-item" }, { kind: "directive", type: i2.HlmSelectPortal, selector: "[hlmSelectPortal]" }, { kind: "component", type: i2.HlmSelectTrigger, selector: "hlm-select-trigger", inputs: ["class", "buttonId", "size", "forceInvalid"] }, { kind: "directive", type: i2.HlmSelectValue, selector: "[hlmSelectValue],hlm-select-value" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.HlmBtn, selector: "button[hlmBtn], a[hlmBtn]", inputs: ["variant", "size", "class", "type"], exportAs: ["hlmBtn"] }], viewProviders: [provideIcons({ lucideChevronLeft, lucideChevronRight })], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "directive", type: i1.BrnCalendarCellButton, selector: "button[brnCalendarCellButton]", inputs: ["date"] }, { kind: "directive", type: i1.BrnCalendarGrid, selector: "[brnCalendarGrid]" }, { kind: "directive", type: i1.BrnCalendarHeader, selector: "[brnCalendarHeader]", inputs: ["id"] }, { kind: "directive", type: i1.BrnCalendarNextButton, selector: "[brnCalendarNextButton]" }, { kind: "directive", type: i1.BrnCalendarPreviousButton, selector: "[brnCalendarPreviousButton]" }, { kind: "directive", type: i1.BrnCalendarWeek, selector: "[brnCalendarWeek]" }, { kind: "directive", type: i1.BrnCalendarWeekday, selector: "[brnCalendarWeekday]" }, { kind: "directive", type: i1.BrnCalendarCell, selector: "[brnCalendarCell]" }, { kind: "directive", type: i1.BrnCalendarMonthSelect, selector: "brnSelect[brnCalendarMonthSelect],hlm-select[brnCalendarMonthSelect]" }, { kind: "directive", type: i1.BrnCalendarYearSelect, selector: "brnSelect[brnCalendarYearSelect],hlm-select[brnCalendarYearSelect]" }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "directive", type: i2.HlmSelect, selector: "[hlmSelect],hlm-select" }, { kind: "component", type: i2.HlmSelectContent, selector: "hlm-select-content", inputs: ["showScroll"] }, { kind: "directive", type: i2.HlmSelectGroup, selector: "[hlmSelectGroup],hlm-select-group" }, { kind: "component", type: i2.HlmSelectItem, selector: "hlm-select-item" }, { kind: "directive", type: i2.HlmSelectPortal, selector: "[hlmSelectPortal]" }, { kind: "component", type: i2.HlmSelectTrigger, selector: "hlm-select-trigger", inputs: ["class", "buttonId", "ariaDescribedby", "wrapperDisabled", "size", "forceInvalid"] }, { kind: "directive", type: i2.HlmSelectValue, selector: "[hlmSelectValue],hlm-select-value" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.HlmBtn, selector: "button[hlmBtn], a[hlmBtn]", inputs: ["variant", "size", "class", "type"], exportAs: ["hlmBtn"] }], viewProviders: [provideIcons({ lucideChevronLeft, lucideChevronRight })], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmCalendar, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmCalendar, decorators: [{
             type: Component,
             args: [{
                     selector: 'hlm-calendar',
@@ -158,15 +158,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                     ],
                     host: { 'data-slot': 'calendar' },
                     template: `
-    <div class="inline-flex flex-col gap-4">
+    <div class="tw:inline-flex tw:flex-col tw:gap-4">
       <!-- Header -->
-      <div class="flex w-full items-center justify-between gap-1.5">
+      <div class="tw:flex tw:w-full tw:items-center tw:justify-between tw:gap-1.5">
         <ng-template #month>
-          <hlm-select brnCalendarMonthSelect class="order-1">
+          <hlm-select brnCalendarMonthSelect class="tw:order-1">
             <hlm-select-trigger size="sm" [class]="_selectClass">
               <hlm-select-value />
             </hlm-select-trigger>
-            <hlm-select-content *hlmSelectPortal class="max-h-80">
+            <hlm-select-content *hlmSelectPortal class="tw:max-h-80">
               <hlm-select-group>
                 @for (month of _i18n.config().months(); track month) {
                   <hlm-select-item [value]="month">{{ month }}</hlm-select-item>
@@ -176,11 +176,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
           </hlm-select>
         </ng-template>
         <ng-template #year>
-          <hlm-select brnCalendarYearSelect class="order-3">
+          <hlm-select brnCalendarYearSelect class="tw:order-3">
             <hlm-select-trigger size="sm" [class]="_selectClass">
               <hlm-select-value />
             </hlm-select-trigger>
-            <hlm-select-content *hlmSelectPortal class="max-h-80">
+            <hlm-select-content *hlmSelectPortal class="tw:max-h-80">
               <hlm-select-group>
                 @for (year of _i18n.config().years(); track year) {
                   <hlm-select-item [value]="year">{{ year }}</hlm-select-item>
@@ -195,9 +195,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
           brnCalendarPreviousButton
           variant="ghost"
           hlmBtn
-          class="order-first size-(--cell-size) p-0 select-none aria-disabled:opacity-50"
+          class="tw:order-first tw:size-(--cell-size) tw:p-0 tw:select-none tw:aria-disabled:opacity-50"
         >
-          <ng-icon name="lucideChevronLeft" class="rtl:rotate-180" />
+          <ng-icon name="lucideChevronLeft" class="tw:rtl:rotate-180" />
         </button>
 
         @switch (captionLayout()) {
@@ -207,14 +207,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
           }
           @case ('dropdown-months') {
             <ng-container [ngTemplateOutlet]="month" />
-            <div brnCalendarHeader class="order-4 text-sm font-medium">{{ heading.year }}</div>
+            <div brnCalendarHeader class="tw:order-4 tw:text-sm tw:font-medium">{{ heading.year }}</div>
           }
           @case ('dropdown-years') {
-            <div brnCalendarHeader class="order-2 text-sm font-medium">{{ heading.month }}</div>
+            <div brnCalendarHeader class="tw:order-2 tw:text-sm tw:font-medium">{{ heading.month }}</div>
             <ng-container [ngTemplateOutlet]="year" />
           }
           @case ('label') {
-            <div brnCalendarHeader class="order-5 text-sm font-medium">{{ heading.header }}</div>
+            <div brnCalendarHeader class="tw:order-5 tw:text-sm tw:font-medium">{{ heading.header }}</div>
           }
         }
 
@@ -222,19 +222,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
           brnCalendarNextButton
           hlmBtn
           variant="ghost"
-          class="order-last size-(--cell-size) p-0 select-none aria-disabled:opacity-50"
+          class="tw:order-last tw:size-(--cell-size) tw:p-0 tw:select-none tw:aria-disabled:opacity-50"
         >
-          <ng-icon name="lucideChevronRight" class="rtl:rotate-180" />
+          <ng-icon name="lucideChevronRight" class="tw:rtl:rotate-180" />
         </button>
       </div>
 
-      <table class="w-full border-collapse space-y-1" brnCalendarGrid>
+      <table class="tw:w-full tw:border-collapse tw:space-y-1" brnCalendarGrid>
         <thead aria-hidden="true">
-          <tr class="flex">
+          <tr class="tw:flex">
             <th
               *brnCalendarWeekday="let weekday"
               scope="col"
-              class="text-muted-foreground flex-1 rounded-(--cell-radius) text-[0.8rem] font-normal select-none"
+              class="tw:text-muted-foreground tw:flex-1 tw:rounded-(--cell-radius) tw:text-[0.8rem] tw:font-normal tw:select-none"
               [attr.aria-label]="_i18n.config().labelWeekday(weekday)"
             >
               {{ _i18n.config().formatWeekdayName(weekday) }}
@@ -243,11 +243,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
         </thead>
 
         <tbody role="rowgroup">
-          <tr *brnCalendarWeek="let week" class="mt-2 flex w-full">
+          <tr *brnCalendarWeek="let week" class="tw:mt-2 tw:flex tw:w-full">
             @for (date of week; track _dateAdapter.getTime(date)) {
               <td
                 brnCalendarCell
-                class="group/day relative aspect-square h-full w-full rounded-(--cell-radius) p-0 text-center select-none [&:first-child[data-selected=true]_button]:rounded-s-(--cell-radius) [&:last-child[data-selected=true]_button]:rounded-e-(--cell-radius)"
+                class="tw:group/day tw:relative tw:aspect-square tw:h-full tw:w-full tw:rounded-(--cell-radius) tw:p-0 tw:text-center tw:select-none tw:[&:first-child[data-selected=true]_button]:rounded-s-(--cell-radius) tw:[&:last-child[data-selected=true]_button]:rounded-e-(--cell-radius)"
               >
                 <button brnCalendarCellButton [date]="date" [class]="_btnClass">
                   {{ _dateAdapter.getDate(date) }}
@@ -283,22 +283,22 @@ class HlmCalendarMulti {
         };
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "_heading" }] : /* istanbul ignore next */ []));
-    _btnClass = hlm(buttonVariants({ variant: 'ghost', size: 'icon' }), 'data-[today=true]:bg-muted group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground dark:hover:bg-muted/50 dark:hover:text-foreground relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-e-(--cell-radius) data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-s-(--cell-radius) [&>span]:text-xs [&>span]:opacity-70', 'data-[outside=true]:opacity-50', "data-[highlighted]:before:content-['']", 'data-[highlighted]:before:absolute', 'data-[highlighted]:before:bottom-1', 'data-[highlighted]:before:start-1/2', 'data-[highlighted]:before:h-1', 'data-[highlighted]:before:w-1', 'data-[highlighted]:before:-translate-x-1/2', 'data-[highlighted]:before:rounded-full', 'data-[highlighted]:before:bg-destructive');
+    _btnClass = hlm(buttonVariants({ variant: 'ghost', size: 'icon' }), 'tw:data-[today=true]:bg-muted tw:group-data-[focused=true]/day:border-ring tw:group-data-[focused=true]/day:ring-ring/50 tw:data-[range-end=true]:bg-primary tw:data-[range-end=true]:text-primary-foreground tw:data-[range-middle=true]:bg-muted tw:data-[range-middle=true]:text-foreground tw:data-[range-start=true]:bg-primary tw:data-[range-start=true]:text-primary-foreground tw:data-[selected-single=true]:bg-primary tw:data-[selected-single=true]:text-primary-foreground tw:dark:hover:bg-muted/50 tw:dark:hover:text-foreground tw:relative tw:isolate tw:z-10 tw:flex tw:aspect-square tw:size-auto tw:w-full tw:min-w-(--cell-size) tw:flex-col tw:gap-1 tw:border-0 tw:leading-none tw:font-normal tw:group-data-[focused=true]/day:relative tw:group-data-[focused=true]/day:z-10 tw:group-data-[focused=true]/day:ring-[3px] tw:data-[range-end=true]:rounded-(--cell-radius) tw:data-[range-end=true]:rounded-e-(--cell-radius) tw:data-[range-middle=true]:rounded-none tw:data-[range-start=true]:rounded-(--cell-radius) tw:data-[range-start=true]:rounded-s-(--cell-radius) tw:[&>span]:text-xs tw:[&>span]:opacity-70', 'tw:data-[outside=true]:opacity-50', "tw:data-[highlighted]:before:content-['']", 'tw:data-[highlighted]:before:absolute', 'tw:data-[highlighted]:before:bottom-1', 'tw:data-[highlighted]:before:start-1/2', 'tw:data-[highlighted]:before:h-1', 'tw:data-[highlighted]:before:w-1', 'tw:data-[highlighted]:before:-translate-x-1/2', 'tw:data-[highlighted]:before:rounded-full', 'tw:data-[highlighted]:before:bg-destructive');
     _selectClass = 'gap-0 px-1.5 py-2 [&>ng-icon]:ms-1';
     constructor() {
-        classes(() => 'p-3 [--cell-radius:var(--radius-md)] [--cell-size:--spacing(8)] group/calendar bg-background block in-data-[slot=card-content]:bg-transparent in-data-[slot=popover-content]:bg-transparent');
+        classes(() => 'tw:p-3 tw:[--cell-radius:var(--radius-md)] tw:[--cell-size:--spacing(8)] tw:group/calendar tw:bg-background tw:block tw:in-data-[slot=card-content]:bg-transparent tw:in-data-[slot=popover-content]:bg-transparent');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmCalendarMulti, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: HlmCalendarMulti, isStandalone: true, selector: "hlm-calendar-multi", inputs: { captionLayout: { classPropertyName: "captionLayout", publicName: "captionLayout", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "calendar" } }, hostDirectives: [{ directive: i1.BrnCalendarMulti, inputs: ["min", "min", "max", "max", "minSelection", "minSelection", "maxSelection", "maxSelection", "disabled", "disabled", "date", "date", "dateDisabled", "dateDisabled", "weekStartsOn", "weekStartsOn", "highlightDays", "highlightDays", "defaultFocusedDate", "defaultFocusedDate"], outputs: ["dateChange", "dateChange"] }], ngImport: i0, template: `
-    <div class="inline-flex flex-col space-y-4">
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmCalendarMulti, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: HlmCalendarMulti, isStandalone: true, selector: "hlm-calendar-multi", inputs: { captionLayout: { classPropertyName: "captionLayout", publicName: "captionLayout", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "calendar" } }, hostDirectives: [{ directive: i1.BrnCalendarMulti, inputs: ["min", "min", "max", "max", "minSelection", "minSelection", "maxSelection", "maxSelection", "disabled", "disabled", "date", "date", "dateDisabled", "dateDisabled", "weekStartsOn", "weekStartsOn", "highlightDays", "highlightDays", "defaultFocusedDate", "defaultFocusedDate"], outputs: ["dateChange", "dateChange"] }], ngImport: i0, template: `
+    <div class="tw:inline-flex tw:flex-col tw:space-y-4">
       <!-- Header -->
-      <div class="flex w-full items-center justify-between gap-1.5">
+      <div class="tw:flex tw:w-full tw:items-center tw:justify-between tw:gap-1.5">
         <ng-template #month>
-          <hlm-select brnCalendarMonthSelect class="order-1">
+          <hlm-select brnCalendarMonthSelect class="tw:order-1">
             <hlm-select-trigger size="sm" [class]="_selectClass">
               <hlm-select-value />
             </hlm-select-trigger>
-            <hlm-select-content *hlmSelectPortal class="max-h-80">
+            <hlm-select-content *hlmSelectPortal class="tw:max-h-80">
               <hlm-select-group>
                 @for (month of _i18n.config().months(); track month) {
                   <hlm-select-item [value]="month">{{ month }}</hlm-select-item>
@@ -308,11 +308,11 @@ class HlmCalendarMulti {
           </hlm-select>
         </ng-template>
         <ng-template #year>
-          <hlm-select brnCalendarYearSelect class="order-3">
+          <hlm-select brnCalendarYearSelect class="tw:order-3">
             <hlm-select-trigger size="sm" [class]="_selectClass">
               <hlm-select-value />
             </hlm-select-trigger>
-            <hlm-select-content *hlmSelectPortal class="max-h-80">
+            <hlm-select-content *hlmSelectPortal class="tw:max-h-80">
               <hlm-select-group>
                 @for (year of _i18n.config().years(); track year) {
                   <hlm-select-item [value]="year">{{ year }}</hlm-select-item>
@@ -327,9 +327,9 @@ class HlmCalendarMulti {
           brnCalendarPreviousButton
           variant="ghost"
           hlmBtn
-          class="order-first size-(--cell-size) p-0 select-none aria-disabled:opacity-50"
+          class="tw:order-first tw:size-(--cell-size) tw:p-0 tw:select-none tw:aria-disabled:opacity-50"
         >
-          <ng-icon name="lucideChevronLeft" class="rtl:rotate-180" />
+          <ng-icon name="lucideChevronLeft" class="tw:rtl:rotate-180" />
         </button>
 
         @switch (captionLayout()) {
@@ -339,14 +339,14 @@ class HlmCalendarMulti {
           }
           @case ('dropdown-months') {
             <ng-container [ngTemplateOutlet]="month" />
-            <div brnCalendarHeader class="order-4 text-sm font-medium">{{ heading.year }}</div>
+            <div brnCalendarHeader class="tw:order-4 tw:text-sm tw:font-medium">{{ heading.year }}</div>
           }
           @case ('dropdown-years') {
-            <div brnCalendarHeader class="order-2 text-sm font-medium">{{ heading.month }}</div>
+            <div brnCalendarHeader class="tw:order-2 tw:text-sm tw:font-medium">{{ heading.month }}</div>
             <ng-container [ngTemplateOutlet]="year" />
           }
           @case ('label') {
-            <div brnCalendarHeader class="order-5 text-sm font-medium">{{ heading.header }}</div>
+            <div brnCalendarHeader class="tw:order-5 tw:text-sm tw:font-medium">{{ heading.header }}</div>
           }
         }
 
@@ -354,19 +354,19 @@ class HlmCalendarMulti {
           brnCalendarNextButton
           hlmBtn
           variant="ghost"
-          class="order-last size-(--cell-size) p-0 select-none aria-disabled:opacity-50"
+          class="tw:order-last tw:size-(--cell-size) tw:p-0 tw:select-none tw:aria-disabled:opacity-50"
         >
-          <ng-icon name="lucideChevronRight" class="rtl:rotate-180" />
+          <ng-icon name="lucideChevronRight" class="tw:rtl:rotate-180" />
         </button>
       </div>
 
-      <table class="w-full border-collapse" brnCalendarGrid>
+      <table class="tw:w-full tw:border-collapse" brnCalendarGrid>
         <thead aria-hidden="true">
-          <tr class="flex">
+          <tr class="tw:flex">
             <th
               *brnCalendarWeekday="let weekday"
               scope="col"
-              class="text-muted-foreground flex-1 rounded-(--cell-radius) text-[0.8rem] font-normal select-none"
+              class="tw:text-muted-foreground tw:flex-1 tw:rounded-(--cell-radius) tw:text-[0.8rem] tw:font-normal tw:select-none"
               [attr.aria-label]="_i18n.config().labelWeekday(weekday)"
             >
               {{ _i18n.config().formatWeekdayName(weekday) }}
@@ -375,11 +375,11 @@ class HlmCalendarMulti {
         </thead>
 
         <tbody role="rowgroup">
-          <tr *brnCalendarWeek="let week" class="mt-2 flex w-full">
+          <tr *brnCalendarWeek="let week" class="tw:mt-2 tw:flex tw:w-full">
             @for (date of week; track _dateAdapter.getTime(date)) {
               <td
                 brnCalendarCell
-                class="group/day relative aspect-square h-full w-full rounded-(--cell-radius) p-0 text-center select-none [&:first-child[data-selected=true]_button]:rounded-s-(--cell-radius) [&:last-child[data-selected=true]_button]:rounded-e-(--cell-radius)"
+                class="tw:group/day tw:relative tw:aspect-square tw:h-full tw:w-full tw:rounded-(--cell-radius) tw:p-0 tw:text-center tw:select-none tw:[&:first-child[data-selected=true]_button]:rounded-s-(--cell-radius) tw:[&:last-child[data-selected=true]_button]:rounded-e-(--cell-radius)"
               >
                 <button brnCalendarCellButton [date]="date" [class]="_btnClass">
                   {{ _dateAdapter.getDate(date) }}
@@ -390,9 +390,9 @@ class HlmCalendarMulti {
         </tbody>
       </table>
     </div>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i1.BrnCalendarCellButton, selector: "button[brnCalendarCellButton]", inputs: ["date"] }, { kind: "directive", type: i1.BrnCalendarGrid, selector: "[brnCalendarGrid]" }, { kind: "directive", type: i1.BrnCalendarHeader, selector: "[brnCalendarHeader]", inputs: ["id"] }, { kind: "directive", type: i1.BrnCalendarNextButton, selector: "[brnCalendarNextButton]" }, { kind: "directive", type: i1.BrnCalendarPreviousButton, selector: "[brnCalendarPreviousButton]" }, { kind: "directive", type: i1.BrnCalendarWeek, selector: "[brnCalendarWeek]" }, { kind: "directive", type: i1.BrnCalendarWeekday, selector: "[brnCalendarWeekday]" }, { kind: "directive", type: i1.BrnCalendarCell, selector: "[brnCalendarCell]" }, { kind: "directive", type: i1.BrnCalendarMonthSelect, selector: "brnSelect[brnCalendarMonthSelect],hlm-select[brnCalendarMonthSelect]" }, { kind: "directive", type: i1.BrnCalendarYearSelect, selector: "brnSelect[brnCalendarYearSelect],hlm-select[brnCalendarYearSelect]" }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.HlmSelect, selector: "[hlmSelect],hlm-select" }, { kind: "component", type: i2.HlmSelectContent, selector: "hlm-select-content", inputs: ["showScroll"] }, { kind: "directive", type: i2.HlmSelectGroup, selector: "[hlmSelectGroup],hlm-select-group" }, { kind: "component", type: i2.HlmSelectItem, selector: "hlm-select-item" }, { kind: "directive", type: i2.HlmSelectPortal, selector: "[hlmSelectPortal]" }, { kind: "component", type: i2.HlmSelectTrigger, selector: "hlm-select-trigger", inputs: ["class", "buttonId", "size", "forceInvalid"] }, { kind: "directive", type: i2.HlmSelectValue, selector: "[hlmSelectValue],hlm-select-value" }, { kind: "directive", type: i3.HlmBtn, selector: "button[hlmBtn], a[hlmBtn]", inputs: ["variant", "size", "class", "type"], exportAs: ["hlmBtn"] }], viewProviders: [provideIcons({ lucideChevronLeft, lucideChevronRight })], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "directive", type: i1.BrnCalendarCellButton, selector: "button[brnCalendarCellButton]", inputs: ["date"] }, { kind: "directive", type: i1.BrnCalendarGrid, selector: "[brnCalendarGrid]" }, { kind: "directive", type: i1.BrnCalendarHeader, selector: "[brnCalendarHeader]", inputs: ["id"] }, { kind: "directive", type: i1.BrnCalendarNextButton, selector: "[brnCalendarNextButton]" }, { kind: "directive", type: i1.BrnCalendarPreviousButton, selector: "[brnCalendarPreviousButton]" }, { kind: "directive", type: i1.BrnCalendarWeek, selector: "[brnCalendarWeek]" }, { kind: "directive", type: i1.BrnCalendarWeekday, selector: "[brnCalendarWeekday]" }, { kind: "directive", type: i1.BrnCalendarCell, selector: "[brnCalendarCell]" }, { kind: "directive", type: i1.BrnCalendarMonthSelect, selector: "brnSelect[brnCalendarMonthSelect],hlm-select[brnCalendarMonthSelect]" }, { kind: "directive", type: i1.BrnCalendarYearSelect, selector: "brnSelect[brnCalendarYearSelect],hlm-select[brnCalendarYearSelect]" }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.HlmSelect, selector: "[hlmSelect],hlm-select" }, { kind: "component", type: i2.HlmSelectContent, selector: "hlm-select-content", inputs: ["showScroll"] }, { kind: "directive", type: i2.HlmSelectGroup, selector: "[hlmSelectGroup],hlm-select-group" }, { kind: "component", type: i2.HlmSelectItem, selector: "hlm-select-item" }, { kind: "directive", type: i2.HlmSelectPortal, selector: "[hlmSelectPortal]" }, { kind: "component", type: i2.HlmSelectTrigger, selector: "hlm-select-trigger", inputs: ["class", "buttonId", "ariaDescribedby", "wrapperDisabled", "size", "forceInvalid"] }, { kind: "directive", type: i2.HlmSelectValue, selector: "[hlmSelectValue],hlm-select-value" }, { kind: "directive", type: i3.HlmBtn, selector: "button[hlmBtn], a[hlmBtn]", inputs: ["variant", "size", "class", "type"], exportAs: ["hlmBtn"] }], viewProviders: [provideIcons({ lucideChevronLeft, lucideChevronRight })], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmCalendarMulti, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmCalendarMulti, decorators: [{
             type: Component,
             args: [{
                     selector: 'hlm-calendar-multi',
@@ -419,15 +419,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                     ],
                     host: { 'data-slot': 'calendar' },
                     template: `
-    <div class="inline-flex flex-col space-y-4">
+    <div class="tw:inline-flex tw:flex-col tw:space-y-4">
       <!-- Header -->
-      <div class="flex w-full items-center justify-between gap-1.5">
+      <div class="tw:flex tw:w-full tw:items-center tw:justify-between tw:gap-1.5">
         <ng-template #month>
-          <hlm-select brnCalendarMonthSelect class="order-1">
+          <hlm-select brnCalendarMonthSelect class="tw:order-1">
             <hlm-select-trigger size="sm" [class]="_selectClass">
               <hlm-select-value />
             </hlm-select-trigger>
-            <hlm-select-content *hlmSelectPortal class="max-h-80">
+            <hlm-select-content *hlmSelectPortal class="tw:max-h-80">
               <hlm-select-group>
                 @for (month of _i18n.config().months(); track month) {
                   <hlm-select-item [value]="month">{{ month }}</hlm-select-item>
@@ -437,11 +437,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
           </hlm-select>
         </ng-template>
         <ng-template #year>
-          <hlm-select brnCalendarYearSelect class="order-3">
+          <hlm-select brnCalendarYearSelect class="tw:order-3">
             <hlm-select-trigger size="sm" [class]="_selectClass">
               <hlm-select-value />
             </hlm-select-trigger>
-            <hlm-select-content *hlmSelectPortal class="max-h-80">
+            <hlm-select-content *hlmSelectPortal class="tw:max-h-80">
               <hlm-select-group>
                 @for (year of _i18n.config().years(); track year) {
                   <hlm-select-item [value]="year">{{ year }}</hlm-select-item>
@@ -456,9 +456,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
           brnCalendarPreviousButton
           variant="ghost"
           hlmBtn
-          class="order-first size-(--cell-size) p-0 select-none aria-disabled:opacity-50"
+          class="tw:order-first tw:size-(--cell-size) tw:p-0 tw:select-none tw:aria-disabled:opacity-50"
         >
-          <ng-icon name="lucideChevronLeft" class="rtl:rotate-180" />
+          <ng-icon name="lucideChevronLeft" class="tw:rtl:rotate-180" />
         </button>
 
         @switch (captionLayout()) {
@@ -468,14 +468,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
           }
           @case ('dropdown-months') {
             <ng-container [ngTemplateOutlet]="month" />
-            <div brnCalendarHeader class="order-4 text-sm font-medium">{{ heading.year }}</div>
+            <div brnCalendarHeader class="tw:order-4 tw:text-sm tw:font-medium">{{ heading.year }}</div>
           }
           @case ('dropdown-years') {
-            <div brnCalendarHeader class="order-2 text-sm font-medium">{{ heading.month }}</div>
+            <div brnCalendarHeader class="tw:order-2 tw:text-sm tw:font-medium">{{ heading.month }}</div>
             <ng-container [ngTemplateOutlet]="year" />
           }
           @case ('label') {
-            <div brnCalendarHeader class="order-5 text-sm font-medium">{{ heading.header }}</div>
+            <div brnCalendarHeader class="tw:order-5 tw:text-sm tw:font-medium">{{ heading.header }}</div>
           }
         }
 
@@ -483,19 +483,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
           brnCalendarNextButton
           hlmBtn
           variant="ghost"
-          class="order-last size-(--cell-size) p-0 select-none aria-disabled:opacity-50"
+          class="tw:order-last tw:size-(--cell-size) tw:p-0 tw:select-none tw:aria-disabled:opacity-50"
         >
-          <ng-icon name="lucideChevronRight" class="rtl:rotate-180" />
+          <ng-icon name="lucideChevronRight" class="tw:rtl:rotate-180" />
         </button>
       </div>
 
-      <table class="w-full border-collapse" brnCalendarGrid>
+      <table class="tw:w-full tw:border-collapse" brnCalendarGrid>
         <thead aria-hidden="true">
-          <tr class="flex">
+          <tr class="tw:flex">
             <th
               *brnCalendarWeekday="let weekday"
               scope="col"
-              class="text-muted-foreground flex-1 rounded-(--cell-radius) text-[0.8rem] font-normal select-none"
+              class="tw:text-muted-foreground tw:flex-1 tw:rounded-(--cell-radius) tw:text-[0.8rem] tw:font-normal tw:select-none"
               [attr.aria-label]="_i18n.config().labelWeekday(weekday)"
             >
               {{ _i18n.config().formatWeekdayName(weekday) }}
@@ -504,11 +504,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
         </thead>
 
         <tbody role="rowgroup">
-          <tr *brnCalendarWeek="let week" class="mt-2 flex w-full">
+          <tr *brnCalendarWeek="let week" class="tw:mt-2 tw:flex tw:w-full">
             @for (date of week; track _dateAdapter.getTime(date)) {
               <td
                 brnCalendarCell
-                class="group/day relative aspect-square h-full w-full rounded-(--cell-radius) p-0 text-center select-none [&:first-child[data-selected=true]_button]:rounded-s-(--cell-radius) [&:last-child[data-selected=true]_button]:rounded-e-(--cell-radius)"
+                class="tw:group/day tw:relative tw:aspect-square tw:h-full tw:w-full tw:rounded-(--cell-radius) tw:p-0 tw:text-center tw:select-none tw:[&:first-child[data-selected=true]_button]:rounded-s-(--cell-radius) tw:[&:last-child[data-selected=true]_button]:rounded-e-(--cell-radius)"
               >
                 <button brnCalendarCellButton [date]="date" [class]="_btnClass">
                   {{ _dateAdapter.getDate(date) }}
@@ -544,22 +544,22 @@ class HlmCalendarRange {
         };
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "_heading" }] : /* istanbul ignore next */ []));
-    _btnClass = hlm(buttonVariants({ variant: 'ghost', size: 'icon' }), 'data-[today=true]:bg-muted group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground dark:hover:bg-muted/50 dark:hover:text-foreground relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-e-(--cell-radius) data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-s-(--cell-radius) [&>span]:text-xs [&>span]:opacity-70', 'data-[outside=true]:opacity-50', "data-[highlighted]:before:content-['']", 'data-[highlighted]:before:absolute', 'data-[highlighted]:before:bottom-1', 'data-[highlighted]:before:start-1/2', 'data-[highlighted]:before:h-1', 'data-[highlighted]:before:w-1', 'data-[highlighted]:before:-translate-x-1/2', 'data-[highlighted]:before:rounded-full', 'data-[highlighted]:before:bg-destructive');
+    _btnClass = hlm(buttonVariants({ variant: 'ghost', size: 'icon' }), 'tw:data-[today=true]:bg-muted tw:group-data-[focused=true]/day:border-ring tw:group-data-[focused=true]/day:ring-ring/50 tw:data-[range-end=true]:bg-primary tw:data-[range-end=true]:text-primary-foreground tw:data-[range-middle=true]:bg-muted tw:data-[range-middle=true]:text-foreground tw:data-[range-start=true]:bg-primary tw:data-[range-start=true]:text-primary-foreground tw:data-[selected-single=true]:bg-primary tw:data-[selected-single=true]:text-primary-foreground tw:dark:hover:bg-muted/50 tw:dark:hover:text-foreground tw:relative tw:isolate tw:z-10 tw:flex tw:aspect-square tw:size-auto tw:w-full tw:min-w-(--cell-size) tw:flex-col tw:gap-1 tw:border-0 tw:leading-none tw:font-normal tw:group-data-[focused=true]/day:relative tw:group-data-[focused=true]/day:z-10 tw:group-data-[focused=true]/day:ring-[3px] tw:data-[range-end=true]:rounded-(--cell-radius) tw:data-[range-end=true]:rounded-e-(--cell-radius) tw:data-[range-middle=true]:rounded-none tw:data-[range-start=true]:rounded-(--cell-radius) tw:data-[range-start=true]:rounded-s-(--cell-radius) tw:[&>span]:text-xs tw:[&>span]:opacity-70', 'tw:data-[outside=true]:opacity-50', "tw:data-[highlighted]:before:content-['']", 'tw:data-[highlighted]:before:absolute', 'tw:data-[highlighted]:before:bottom-1', 'tw:data-[highlighted]:before:start-1/2', 'tw:data-[highlighted]:before:h-1', 'tw:data-[highlighted]:before:w-1', 'tw:data-[highlighted]:before:-translate-x-1/2', 'tw:data-[highlighted]:before:rounded-full', 'tw:data-[highlighted]:before:bg-destructive');
     _selectClass = 'gap-0 px-1.5 py-2 [&>ng-icon]:ms-1';
     constructor() {
-        classes(() => 'p-3 [--cell-radius:var(--radius-md)] [--cell-size:--spacing(8)] group/calendar bg-background block in-data-[slot=card-content]:bg-transparent in-data-[slot=popover-content]:bg-transparent');
+        classes(() => 'tw:p-3 tw:[--cell-radius:var(--radius-md)] tw:[--cell-size:--spacing(8)] tw:group/calendar tw:bg-background tw:block tw:in-data-[slot=card-content]:bg-transparent tw:in-data-[slot=popover-content]:bg-transparent');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmCalendarRange, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: HlmCalendarRange, isStandalone: true, selector: "hlm-calendar-range", inputs: { captionLayout: { classPropertyName: "captionLayout", publicName: "captionLayout", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "calendar" } }, hostDirectives: [{ directive: i1.BrnCalendarRange, inputs: ["min", "min", "max", "max", "disabled", "disabled", "startDate", "startDate", "endDate", "endDate", "dateDisabled", "dateDisabled", "weekStartsOn", "weekStartsOn", "highlightDays", "highlightDays", "defaultFocusedDate", "defaultFocusedDate"], outputs: ["endDateChange", "endDateChange", "startDateChange", "startDateChange"] }], ngImport: i0, template: `
-    <div class="inline-flex flex-col space-y-4">
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmCalendarRange, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: HlmCalendarRange, isStandalone: true, selector: "hlm-calendar-range", inputs: { captionLayout: { classPropertyName: "captionLayout", publicName: "captionLayout", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "calendar" } }, hostDirectives: [{ directive: i1.BrnCalendarRange, inputs: ["min", "min", "max", "max", "disabled", "disabled", "startDate", "startDate", "endDate", "endDate", "dateDisabled", "dateDisabled", "weekStartsOn", "weekStartsOn", "highlightDays", "highlightDays", "defaultFocusedDate", "defaultFocusedDate"], outputs: ["endDateChange", "endDateChange", "startDateChange", "startDateChange"] }], ngImport: i0, template: `
+    <div class="tw:inline-flex tw:flex-col tw:space-y-4">
       <!-- Header -->
-      <div class="flex w-full items-center justify-between gap-1.5">
+      <div class="tw:flex tw:w-full tw:items-center tw:justify-between tw:gap-1.5">
         <ng-template #month>
-          <hlm-select brnCalendarMonthSelect class="order-1">
+          <hlm-select brnCalendarMonthSelect class="tw:order-1">
             <hlm-select-trigger size="sm" [class]="_selectClass">
               <hlm-select-value />
             </hlm-select-trigger>
-            <hlm-select-content *hlmSelectPortal class="max-h-80">
+            <hlm-select-content *hlmSelectPortal class="tw:max-h-80">
               <hlm-select-group>
                 @for (month of _i18n.config().months(); track month) {
                   <hlm-select-item [value]="month">{{ month }}</hlm-select-item>
@@ -569,11 +569,11 @@ class HlmCalendarRange {
           </hlm-select>
         </ng-template>
         <ng-template #year>
-          <hlm-select brnCalendarYearSelect class="order-3">
+          <hlm-select brnCalendarYearSelect class="tw:order-3">
             <hlm-select-trigger size="sm" [class]="_selectClass">
               <hlm-select-value />
             </hlm-select-trigger>
-            <hlm-select-content *hlmSelectPortal class="max-h-80">
+            <hlm-select-content *hlmSelectPortal class="tw:max-h-80">
               <hlm-select-group>
                 @for (year of _i18n.config().years(); track year) {
                   <hlm-select-item [value]="year">{{ year }}</hlm-select-item>
@@ -588,9 +588,9 @@ class HlmCalendarRange {
           brnCalendarPreviousButton
           variant="ghost"
           hlmBtn
-          class="order-first size-(--cell-size) p-0 select-none aria-disabled:opacity-50"
+          class="tw:order-first tw:size-(--cell-size) tw:p-0 tw:select-none tw:aria-disabled:opacity-50"
         >
-          <ng-icon name="lucideChevronLeft" class="rtl:rotate-180" />
+          <ng-icon name="lucideChevronLeft" class="tw:rtl:rotate-180" />
         </button>
 
         @switch (captionLayout()) {
@@ -600,14 +600,14 @@ class HlmCalendarRange {
           }
           @case ('dropdown-months') {
             <ng-container [ngTemplateOutlet]="month" />
-            <div brnCalendarHeader class="order-4 text-sm font-medium">{{ heading.year }}</div>
+            <div brnCalendarHeader class="tw:order-4 tw:text-sm tw:font-medium">{{ heading.year }}</div>
           }
           @case ('dropdown-years') {
-            <div brnCalendarHeader class="order-2 text-sm font-medium">{{ heading.month }}</div>
+            <div brnCalendarHeader class="tw:order-2 tw:text-sm tw:font-medium">{{ heading.month }}</div>
             <ng-container [ngTemplateOutlet]="year" />
           }
           @case ('label') {
-            <div brnCalendarHeader class="order-5 text-sm font-medium">{{ heading.header }}</div>
+            <div brnCalendarHeader class="tw:order-5 tw:text-sm tw:font-medium">{{ heading.header }}</div>
           }
         }
 
@@ -615,19 +615,19 @@ class HlmCalendarRange {
           brnCalendarNextButton
           hlmBtn
           variant="ghost"
-          class="order-last size-(--cell-size) p-0 select-none aria-disabled:opacity-50"
+          class="tw:order-last tw:size-(--cell-size) tw:p-0 tw:select-none tw:aria-disabled:opacity-50"
         >
-          <ng-icon name="lucideChevronRight" class="rtl:rotate-180" />
+          <ng-icon name="lucideChevronRight" class="tw:rtl:rotate-180" />
         </button>
       </div>
 
-      <table class="w-full border-collapse space-y-1" brnCalendarGrid>
+      <table class="tw:w-full tw:border-collapse tw:space-y-1" brnCalendarGrid>
         <thead aria-hidden="true">
-          <tr class="flex">
+          <tr class="tw:flex">
             <th
               *brnCalendarWeekday="let weekday"
               scope="col"
-              class="text-muted-foreground flex-1 rounded-(--cell-radius) text-[0.8rem] font-normal select-none"
+              class="tw:text-muted-foreground tw:flex-1 tw:rounded-(--cell-radius) tw:text-[0.8rem] tw:font-normal tw:select-none"
               [attr.aria-label]="_i18n.config().labelWeekday(weekday)"
             >
               {{ _i18n.config().formatWeekdayName(weekday) }}
@@ -636,11 +636,11 @@ class HlmCalendarRange {
         </thead>
 
         <tbody role="rowgroup">
-          <tr *brnCalendarWeek="let week" class="mt-2 flex w-full">
+          <tr *brnCalendarWeek="let week" class="tw:mt-2 tw:flex tw:w-full">
             @for (date of week; track _dateAdapter.getTime(date)) {
               <td
                 brnCalendarCell
-                class="group/day has-[button[data-range-start=true]]:bg-muted has-[button[data-range-start=true]]:after:bg-muted has-[button[data-range-end=true]]:bg-muted has-[button[data-range-end=true]]:after:bg-muted relative isolate z-0 aspect-square h-full w-full rounded-(--cell-radius) p-0 text-center select-none has-[button[data-range-end=true]]:rounded-e-(--cell-radius) has-[button[data-range-end=true]]:after:absolute has-[button[data-range-end=true]]:after:inset-y-0 has-[button[data-range-end=true]]:after:start-0 has-[button[data-range-end=true]]:after:w-4 has-[button[data-range-start=true]]:rounded-s-(--cell-radius) has-[button[data-range-start=true]]:after:absolute has-[button[data-range-start=true]]:after:inset-y-0 has-[button[data-range-start=true]]:after:end-0 has-[button[data-range-start=true]]:after:w-4 [&:first-child[data-selected=true]_button]:rounded-s-(--cell-radius) [&:last-child[data-selected=true]_button]:rounded-e-(--cell-radius)"
+                class="tw:group/day tw:has-[button[data-range-start=true]]:bg-muted tw:has-[button[data-range-start=true]]:after:bg-muted tw:has-[button[data-range-end=true]]:bg-muted tw:has-[button[data-range-end=true]]:after:bg-muted tw:relative tw:isolate tw:z-0 tw:aspect-square tw:h-full tw:w-full tw:rounded-(--cell-radius) tw:p-0 tw:text-center tw:select-none tw:has-[button[data-range-end=true]]:rounded-e-(--cell-radius) tw:has-[button[data-range-end=true]]:after:absolute tw:has-[button[data-range-end=true]]:after:inset-y-0 tw:has-[button[data-range-end=true]]:after:start-0 tw:has-[button[data-range-end=true]]:after:w-4 tw:has-[button[data-range-start=true]]:rounded-s-(--cell-radius) tw:has-[button[data-range-start=true]]:after:absolute tw:has-[button[data-range-start=true]]:after:inset-y-0 tw:has-[button[data-range-start=true]]:after:end-0 tw:has-[button[data-range-start=true]]:after:w-4 tw:[&:first-child[data-selected=true]_button]:rounded-s-(--cell-radius) tw:[&:last-child[data-selected=true]_button]:rounded-e-(--cell-radius)"
               >
                 <button brnCalendarCellButton [date]="date" [class]="_btnClass">
                   {{ _dateAdapter.getDate(date) }}
@@ -651,9 +651,9 @@ class HlmCalendarRange {
         </tbody>
       </table>
     </div>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i1.BrnCalendarCellButton, selector: "button[brnCalendarCellButton]", inputs: ["date"] }, { kind: "directive", type: i1.BrnCalendarGrid, selector: "[brnCalendarGrid]" }, { kind: "directive", type: i1.BrnCalendarHeader, selector: "[brnCalendarHeader]", inputs: ["id"] }, { kind: "directive", type: i1.BrnCalendarNextButton, selector: "[brnCalendarNextButton]" }, { kind: "directive", type: i1.BrnCalendarPreviousButton, selector: "[brnCalendarPreviousButton]" }, { kind: "directive", type: i1.BrnCalendarWeek, selector: "[brnCalendarWeek]" }, { kind: "directive", type: i1.BrnCalendarWeekday, selector: "[brnCalendarWeekday]" }, { kind: "directive", type: i1.BrnCalendarCell, selector: "[brnCalendarCell]" }, { kind: "directive", type: i1.BrnCalendarMonthSelect, selector: "brnSelect[brnCalendarMonthSelect],hlm-select[brnCalendarMonthSelect]" }, { kind: "directive", type: i1.BrnCalendarYearSelect, selector: "brnSelect[brnCalendarYearSelect],hlm-select[brnCalendarYearSelect]" }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "directive", type: i2.HlmSelect, selector: "[hlmSelect],hlm-select" }, { kind: "component", type: i2.HlmSelectContent, selector: "hlm-select-content", inputs: ["showScroll"] }, { kind: "directive", type: i2.HlmSelectGroup, selector: "[hlmSelectGroup],hlm-select-group" }, { kind: "component", type: i2.HlmSelectItem, selector: "hlm-select-item" }, { kind: "directive", type: i2.HlmSelectPortal, selector: "[hlmSelectPortal]" }, { kind: "component", type: i2.HlmSelectTrigger, selector: "hlm-select-trigger", inputs: ["class", "buttonId", "size", "forceInvalid"] }, { kind: "directive", type: i2.HlmSelectValue, selector: "[hlmSelectValue],hlm-select-value" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.HlmBtn, selector: "button[hlmBtn], a[hlmBtn]", inputs: ["variant", "size", "class", "type"], exportAs: ["hlmBtn"] }], viewProviders: [provideIcons({ lucideChevronLeft, lucideChevronRight })], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "directive", type: i1.BrnCalendarCellButton, selector: "button[brnCalendarCellButton]", inputs: ["date"] }, { kind: "directive", type: i1.BrnCalendarGrid, selector: "[brnCalendarGrid]" }, { kind: "directive", type: i1.BrnCalendarHeader, selector: "[brnCalendarHeader]", inputs: ["id"] }, { kind: "directive", type: i1.BrnCalendarNextButton, selector: "[brnCalendarNextButton]" }, { kind: "directive", type: i1.BrnCalendarPreviousButton, selector: "[brnCalendarPreviousButton]" }, { kind: "directive", type: i1.BrnCalendarWeek, selector: "[brnCalendarWeek]" }, { kind: "directive", type: i1.BrnCalendarWeekday, selector: "[brnCalendarWeekday]" }, { kind: "directive", type: i1.BrnCalendarCell, selector: "[brnCalendarCell]" }, { kind: "directive", type: i1.BrnCalendarMonthSelect, selector: "brnSelect[brnCalendarMonthSelect],hlm-select[brnCalendarMonthSelect]" }, { kind: "directive", type: i1.BrnCalendarYearSelect, selector: "brnSelect[brnCalendarYearSelect],hlm-select[brnCalendarYearSelect]" }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "directive", type: i2.HlmSelect, selector: "[hlmSelect],hlm-select" }, { kind: "component", type: i2.HlmSelectContent, selector: "hlm-select-content", inputs: ["showScroll"] }, { kind: "directive", type: i2.HlmSelectGroup, selector: "[hlmSelectGroup],hlm-select-group" }, { kind: "component", type: i2.HlmSelectItem, selector: "hlm-select-item" }, { kind: "directive", type: i2.HlmSelectPortal, selector: "[hlmSelectPortal]" }, { kind: "component", type: i2.HlmSelectTrigger, selector: "hlm-select-trigger", inputs: ["class", "buttonId", "ariaDescribedby", "wrapperDisabled", "size", "forceInvalid"] }, { kind: "directive", type: i2.HlmSelectValue, selector: "[hlmSelectValue],hlm-select-value" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.HlmBtn, selector: "button[hlmBtn], a[hlmBtn]", inputs: ["variant", "size", "class", "type"], exportAs: ["hlmBtn"] }], viewProviders: [provideIcons({ lucideChevronLeft, lucideChevronRight })], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmCalendarRange, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmCalendarRange, decorators: [{
             type: Component,
             args: [{
                     selector: 'hlm-calendar-range',
@@ -679,15 +679,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                     ],
                     host: { 'data-slot': 'calendar' },
                     template: `
-    <div class="inline-flex flex-col space-y-4">
+    <div class="tw:inline-flex tw:flex-col tw:space-y-4">
       <!-- Header -->
-      <div class="flex w-full items-center justify-between gap-1.5">
+      <div class="tw:flex tw:w-full tw:items-center tw:justify-between tw:gap-1.5">
         <ng-template #month>
-          <hlm-select brnCalendarMonthSelect class="order-1">
+          <hlm-select brnCalendarMonthSelect class="tw:order-1">
             <hlm-select-trigger size="sm" [class]="_selectClass">
               <hlm-select-value />
             </hlm-select-trigger>
-            <hlm-select-content *hlmSelectPortal class="max-h-80">
+            <hlm-select-content *hlmSelectPortal class="tw:max-h-80">
               <hlm-select-group>
                 @for (month of _i18n.config().months(); track month) {
                   <hlm-select-item [value]="month">{{ month }}</hlm-select-item>
@@ -697,11 +697,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
           </hlm-select>
         </ng-template>
         <ng-template #year>
-          <hlm-select brnCalendarYearSelect class="order-3">
+          <hlm-select brnCalendarYearSelect class="tw:order-3">
             <hlm-select-trigger size="sm" [class]="_selectClass">
               <hlm-select-value />
             </hlm-select-trigger>
-            <hlm-select-content *hlmSelectPortal class="max-h-80">
+            <hlm-select-content *hlmSelectPortal class="tw:max-h-80">
               <hlm-select-group>
                 @for (year of _i18n.config().years(); track year) {
                   <hlm-select-item [value]="year">{{ year }}</hlm-select-item>
@@ -716,9 +716,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
           brnCalendarPreviousButton
           variant="ghost"
           hlmBtn
-          class="order-first size-(--cell-size) p-0 select-none aria-disabled:opacity-50"
+          class="tw:order-first tw:size-(--cell-size) tw:p-0 tw:select-none tw:aria-disabled:opacity-50"
         >
-          <ng-icon name="lucideChevronLeft" class="rtl:rotate-180" />
+          <ng-icon name="lucideChevronLeft" class="tw:rtl:rotate-180" />
         </button>
 
         @switch (captionLayout()) {
@@ -728,14 +728,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
           }
           @case ('dropdown-months') {
             <ng-container [ngTemplateOutlet]="month" />
-            <div brnCalendarHeader class="order-4 text-sm font-medium">{{ heading.year }}</div>
+            <div brnCalendarHeader class="tw:order-4 tw:text-sm tw:font-medium">{{ heading.year }}</div>
           }
           @case ('dropdown-years') {
-            <div brnCalendarHeader class="order-2 text-sm font-medium">{{ heading.month }}</div>
+            <div brnCalendarHeader class="tw:order-2 tw:text-sm tw:font-medium">{{ heading.month }}</div>
             <ng-container [ngTemplateOutlet]="year" />
           }
           @case ('label') {
-            <div brnCalendarHeader class="order-5 text-sm font-medium">{{ heading.header }}</div>
+            <div brnCalendarHeader class="tw:order-5 tw:text-sm tw:font-medium">{{ heading.header }}</div>
           }
         }
 
@@ -743,19 +743,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
           brnCalendarNextButton
           hlmBtn
           variant="ghost"
-          class="order-last size-(--cell-size) p-0 select-none aria-disabled:opacity-50"
+          class="tw:order-last tw:size-(--cell-size) tw:p-0 tw:select-none tw:aria-disabled:opacity-50"
         >
-          <ng-icon name="lucideChevronRight" class="rtl:rotate-180" />
+          <ng-icon name="lucideChevronRight" class="tw:rtl:rotate-180" />
         </button>
       </div>
 
-      <table class="w-full border-collapse space-y-1" brnCalendarGrid>
+      <table class="tw:w-full tw:border-collapse tw:space-y-1" brnCalendarGrid>
         <thead aria-hidden="true">
-          <tr class="flex">
+          <tr class="tw:flex">
             <th
               *brnCalendarWeekday="let weekday"
               scope="col"
-              class="text-muted-foreground flex-1 rounded-(--cell-radius) text-[0.8rem] font-normal select-none"
+              class="tw:text-muted-foreground tw:flex-1 tw:rounded-(--cell-radius) tw:text-[0.8rem] tw:font-normal tw:select-none"
               [attr.aria-label]="_i18n.config().labelWeekday(weekday)"
             >
               {{ _i18n.config().formatWeekdayName(weekday) }}
@@ -764,11 +764,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
         </thead>
 
         <tbody role="rowgroup">
-          <tr *brnCalendarWeek="let week" class="mt-2 flex w-full">
+          <tr *brnCalendarWeek="let week" class="tw:mt-2 tw:flex tw:w-full">
             @for (date of week; track _dateAdapter.getTime(date)) {
               <td
                 brnCalendarCell
-                class="group/day has-[button[data-range-start=true]]:bg-muted has-[button[data-range-start=true]]:after:bg-muted has-[button[data-range-end=true]]:bg-muted has-[button[data-range-end=true]]:after:bg-muted relative isolate z-0 aspect-square h-full w-full rounded-(--cell-radius) p-0 text-center select-none has-[button[data-range-end=true]]:rounded-e-(--cell-radius) has-[button[data-range-end=true]]:after:absolute has-[button[data-range-end=true]]:after:inset-y-0 has-[button[data-range-end=true]]:after:start-0 has-[button[data-range-end=true]]:after:w-4 has-[button[data-range-start=true]]:rounded-s-(--cell-radius) has-[button[data-range-start=true]]:after:absolute has-[button[data-range-start=true]]:after:inset-y-0 has-[button[data-range-start=true]]:after:end-0 has-[button[data-range-start=true]]:after:w-4 [&:first-child[data-selected=true]_button]:rounded-s-(--cell-radius) [&:last-child[data-selected=true]_button]:rounded-e-(--cell-radius)"
+                class="tw:group/day tw:has-[button[data-range-start=true]]:bg-muted tw:has-[button[data-range-start=true]]:after:bg-muted tw:has-[button[data-range-end=true]]:bg-muted tw:has-[button[data-range-end=true]]:after:bg-muted tw:relative tw:isolate tw:z-0 tw:aspect-square tw:h-full tw:w-full tw:rounded-(--cell-radius) tw:p-0 tw:text-center tw:select-none tw:has-[button[data-range-end=true]]:rounded-e-(--cell-radius) tw:has-[button[data-range-end=true]]:after:absolute tw:has-[button[data-range-end=true]]:after:inset-y-0 tw:has-[button[data-range-end=true]]:after:start-0 tw:has-[button[data-range-end=true]]:after:w-4 tw:has-[button[data-range-start=true]]:rounded-s-(--cell-radius) tw:has-[button[data-range-start=true]]:after:absolute tw:has-[button[data-range-start=true]]:after:inset-y-0 tw:has-[button[data-range-start=true]]:after:end-0 tw:has-[button[data-range-start=true]]:after:w-4 tw:[&:first-child[data-selected=true]_button]:rounded-s-(--cell-radius) tw:[&:last-child[data-selected=true]_button]:rounded-e-(--cell-radius)"
               >
                 <button brnCalendarCellButton [date]="date" [class]="_btnClass">
                   {{ _dateAdapter.getDate(date) }}
@@ -800,28 +800,28 @@ class HlmMonthYearCalendar {
         return `${config.formatYear(start)} – ${config.formatYear(end)}`;
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "_heading" }] : /* istanbul ignore next */ []));
-    _btnClass = hlm(buttonVariants({ variant: 'ghost' }), 'data-[today=true]:bg-muted', 'data-[selected=true]:bg-primary data-[selected=true]:text-primary-foreground data-[selected=true]:hover:bg-primary data-[selected=true]:hover:text-primary-foreground', 'data-[focused=true]:border-ring data-[focused=true]:ring-ring/50 data-[focused=true]:ring-[3px]', 'aria-disabled:pointer-events-none aria-disabled:opacity-50', 'h-(--cell-size)');
+    _btnClass = hlm(buttonVariants({ variant: 'ghost' }), 'tw:data-[today=true]:bg-muted', 'tw:data-[selected=true]:bg-primary tw:data-[selected=true]:text-primary-foreground tw:data-[selected=true]:hover:bg-primary tw:data-[selected=true]:hover:text-primary-foreground', 'tw:data-[focused=true]:border-ring tw:data-[focused=true]:ring-ring/50 tw:data-[focused=true]:ring-[3px]', 'tw:aria-disabled:pointer-events-none tw:aria-disabled:opacity-50', 'tw:h-(--cell-size)');
     constructor() {
-        classes(() => 'p-3 [--cell-radius:var(--radius-md)] [--cell-size:--spacing(8)] group/calendar bg-background block in-data-[slot=card-content]:bg-transparent in-data-[slot=popover-content]:bg-transparent');
+        classes(() => 'tw:p-3 tw:[--cell-radius:var(--radius-md)] tw:[--cell-size:--spacing(8)] tw:group/calendar tw:bg-background tw:block tw:in-data-[slot=card-content]:bg-transparent tw:in-data-[slot=popover-content]:bg-transparent');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmMonthYearCalendar, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: HlmMonthYearCalendar, isStandalone: true, selector: "hlm-month-year-calendar", host: { attributes: { "data-slot": "month-year-calendar" } }, hostDirectives: [{ directive: i1.BrnMonthYearCalendar, inputs: ["min", "min", "max", "max", "disabled", "disabled", "date", "date", "defaultFocusedDate", "defaultFocusedDate", "view", "view"], outputs: ["dateChange", "dateChange"] }], ngImport: i0, template: `
-    <div class="flex flex-col gap-4">
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmMonthYearCalendar, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: HlmMonthYearCalendar, isStandalone: true, selector: "hlm-month-year-calendar", host: { attributes: { "data-slot": "month-year-calendar" } }, hostDirectives: [{ directive: i1.BrnMonthYearCalendar, inputs: ["min", "min", "max", "max", "disabled", "disabled", "date", "date", "defaultFocusedDate", "defaultFocusedDate", "view", "view"], outputs: ["dateChange", "dateChange"] }], ngImport: i0, template: `
+    <div class="tw:flex tw:flex-col tw:gap-4">
       <!-- Header -->
-      <div class="flex w-full items-center justify-between gap-1.5">
+      <div class="tw:flex tw:w-full tw:items-center tw:justify-between tw:gap-1.5">
         <button
           brnMonthYearCalendarPreviousButton
           hlmBtn
           variant="ghost"
-          class="order-first size-(--cell-size) p-0 select-none aria-disabled:opacity-50"
+          class="tw:order-first tw:size-(--cell-size) tw:p-0 tw:select-none tw:aria-disabled:opacity-50"
         >
-          <ng-icon name="lucideChevronLeft" class="rtl:rotate-180" />
+          <ng-icon name="lucideChevronLeft" class="tw:rtl:rotate-180" />
         </button>
 
         <button
           hlmBtn
           variant="ghost"
-          class="h-(--cell-size) py-0 select-none aria-disabled:opacity-50"
+          class="tw:h-(--cell-size) tw:py-0 tw:select-none tw:aria-disabled:opacity-50"
           brnMonthYearCalendarHeader
         >
           {{ _heading() }}
@@ -831,16 +831,16 @@ class HlmMonthYearCalendar {
           brnMonthYearCalendarNextButton
           hlmBtn
           variant="ghost"
-          class="order-last size-(--cell-size) p-0 select-none aria-disabled:opacity-50"
+          class="tw:order-last tw:size-(--cell-size) tw:p-0 tw:select-none tw:aria-disabled:opacity-50"
         >
-          <ng-icon name="lucideChevronRight" class="rtl:rotate-180" />
+          <ng-icon name="lucideChevronRight" class="tw:rtl:rotate-180" />
         </button>
       </div>
 
       <!-- Grid -->
       @switch (_picker.view()) {
         @case ('year') {
-          <div brnMonthYearCalendarGrid class="grid grid-cols-4 gap-2">
+          <div brnMonthYearCalendarGrid class="tw:grid tw:grid-cols-4 tw:gap-2">
             @for (year of _picker.years(); track _dateAdapter.getYear(year)) {
               <button brnMonthYearCalendarYearButton [date]="year" [class]="_btnClass">
                 {{ _i18n.config().formatYear(_dateAdapter.getYear(year)) }}
@@ -849,7 +849,7 @@ class HlmMonthYearCalendar {
           </div>
         }
         @case ('month') {
-          <div brnMonthYearCalendarGrid class="grid grid-cols-4 gap-2">
+          <div brnMonthYearCalendarGrid class="tw:grid tw:grid-cols-4 tw:gap-2">
             @for (month of _picker.months(); track _dateAdapter.getMonth(month)) {
               <button brnMonthYearCalendarMonthButton [date]="month" [class]="_btnClass">
                 {{ _i18n.config().months()[_dateAdapter.getMonth(month)] }}
@@ -861,7 +861,7 @@ class HlmMonthYearCalendar {
     </div>
   `, isInline: true, dependencies: [{ kind: "directive", type: i1.BrnMonthYearCalendarGrid, selector: "[brnMonthYearCalendarGrid]" }, { kind: "directive", type: i1.BrnMonthYearCalendarHeader, selector: "button[brnMonthYearCalendarHeader]", inputs: ["id"] }, { kind: "directive", type: i1.BrnMonthYearCalendarMonthButton, selector: "button[brnMonthYearCalendarMonthButton]", inputs: ["date"] }, { kind: "directive", type: i1.BrnMonthYearCalendarNextButton, selector: "button[brnMonthYearCalendarNextButton]" }, { kind: "directive", type: i1.BrnMonthYearCalendarPreviousButton, selector: "button[brnMonthYearCalendarPreviousButton]" }, { kind: "directive", type: i1.BrnMonthYearCalendarYearButton, selector: "button[brnMonthYearCalendarYearButton]", inputs: ["date"] }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "directive", type: i3.HlmBtn, selector: "button[hlmBtn], a[hlmBtn]", inputs: ["variant", "size", "class", "type"], exportAs: ["hlmBtn"] }], viewProviders: [provideIcons({ lucideChevronLeft, lucideChevronRight })], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmMonthYearCalendar, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmMonthYearCalendar, decorators: [{
             type: Component,
             args: [{
                     selector: 'hlm-month-year-calendar',
@@ -877,22 +877,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                     ],
                     host: { 'data-slot': 'month-year-calendar' },
                     template: `
-    <div class="flex flex-col gap-4">
+    <div class="tw:flex tw:flex-col tw:gap-4">
       <!-- Header -->
-      <div class="flex w-full items-center justify-between gap-1.5">
+      <div class="tw:flex tw:w-full tw:items-center tw:justify-between tw:gap-1.5">
         <button
           brnMonthYearCalendarPreviousButton
           hlmBtn
           variant="ghost"
-          class="order-first size-(--cell-size) p-0 select-none aria-disabled:opacity-50"
+          class="tw:order-first tw:size-(--cell-size) tw:p-0 tw:select-none tw:aria-disabled:opacity-50"
         >
-          <ng-icon name="lucideChevronLeft" class="rtl:rotate-180" />
+          <ng-icon name="lucideChevronLeft" class="tw:rtl:rotate-180" />
         </button>
 
         <button
           hlmBtn
           variant="ghost"
-          class="h-(--cell-size) py-0 select-none aria-disabled:opacity-50"
+          class="tw:h-(--cell-size) tw:py-0 tw:select-none tw:aria-disabled:opacity-50"
           brnMonthYearCalendarHeader
         >
           {{ _heading() }}
@@ -902,16 +902,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
           brnMonthYearCalendarNextButton
           hlmBtn
           variant="ghost"
-          class="order-last size-(--cell-size) p-0 select-none aria-disabled:opacity-50"
+          class="tw:order-last tw:size-(--cell-size) tw:p-0 tw:select-none tw:aria-disabled:opacity-50"
         >
-          <ng-icon name="lucideChevronRight" class="rtl:rotate-180" />
+          <ng-icon name="lucideChevronRight" class="tw:rtl:rotate-180" />
         </button>
       </div>
 
       <!-- Grid -->
       @switch (_picker.view()) {
         @case ('year') {
-          <div brnMonthYearCalendarGrid class="grid grid-cols-4 gap-2">
+          <div brnMonthYearCalendarGrid class="tw:grid tw:grid-cols-4 tw:gap-2">
             @for (year of _picker.years(); track _dateAdapter.getYear(year)) {
               <button brnMonthYearCalendarYearButton [date]="year" [class]="_btnClass">
                 {{ _i18n.config().formatYear(_dateAdapter.getYear(year)) }}
@@ -920,7 +920,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
           </div>
         }
         @case ('month') {
-          <div brnMonthYearCalendarGrid class="grid grid-cols-4 gap-2">
+          <div brnMonthYearCalendarGrid class="tw:grid tw:grid-cols-4 tw:gap-2">
             @for (month of _picker.months(); track _dateAdapter.getMonth(month)) {
               <button brnMonthYearCalendarMonthButton [date]="month" [class]="_btnClass">
                 {{ _i18n.config().months()[_dateAdapter.getMonth(month)] }}
@@ -939,11 +939,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
  */
 const HlmCalendarImports = [HlmCalendar, HlmCalendarMulti, HlmCalendarRange, HlmMonthYearCalendar];
 class HlmCalendarModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmCalendarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.7", ngImport: i0, type: HlmCalendarModule, imports: [HlmCalendar, HlmCalendarMulti, HlmCalendarRange, HlmMonthYearCalendar], exports: [HlmCalendar, HlmCalendarMulti, HlmCalendarRange, HlmMonthYearCalendar] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmCalendarModule, imports: [HlmCalendarImports] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmCalendarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.3", ngImport: i0, type: HlmCalendarModule, imports: [HlmCalendar, HlmCalendarMulti, HlmCalendarRange, HlmMonthYearCalendar], exports: [HlmCalendar, HlmCalendarMulti, HlmCalendarRange, HlmMonthYearCalendar] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmCalendarModule, imports: [HlmCalendarImports] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmCalendarModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmCalendarModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [...HlmCalendarImports],
@@ -956,4 +956,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
  */
 
 export { HlmCalendar, HlmCalendarImports, HlmCalendarModule, HlmCalendarMulti, HlmCalendarRange, HlmMonthYearCalendar };
-//# sourceMappingURL=calendar.mjs.map
+