@egose/shadcn-theme-ng-tw 0.5.3 → 0.6.0

package/input/fesm2022/input.mjs

@@ -4,16 +4,19 @@ import * as i2 from '@spartan-ng/brain/field';
 import { BrnFieldControlDescribedBy } from '@spartan-ng/brain/field';
 import * as i1 from '@spartan-ng/brain/input';
 import { BrnInput } from '@spartan-ng/brain/input';
-import { classes } from '@egose/shadcn-theme-ng-tw/utils';
+import { classes, hlm } from '@egose/shadcn-theme-ng-tw/utils';
 
 class HlmInput {
     ariaDescribedby = input(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "ariaDescribedby" }] : /* istanbul ignore next */ []));
+    /** Height density. Merged after the base height class, so it wins via `twMerge`. */
+    size = input('default', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     constructor() {
-        classes(() => 'tw:dark:bg-input/30 tw:border-input tw:focus-visible:border-ring tw:focus-visible:ring-ring/50 tw:data-[matches-spartan-invalid=true]:ring-destructive/20 tw:dark:data-[matches-spartan-invalid=true]:ring-destructive/40 tw:data-[matches-spartan-invalid=true]:border-destructive tw:dark:data-[matches-spartan-invalid=true]:border-destructive/50 tw:h-9 tw:rounded-md tw:border tw:bg-transparent tw:px-2.5 tw:py-1 tw:text-base tw:shadow-xs tw:transition-[color,box-shadow] tw:file:h-7 tw:file:text-sm tw:file:font-medium tw:focus-visible:ring-3 tw:data-[matches-spartan-invalid=true]:ring-3 tw:md:text-sm tw:file:text-foreground tw:placeholder:text-muted-foreground tw:w-full tw:min-w-0 tw:outline-none tw:file:inline-flex tw:file:border-0 tw:file:bg-transparent tw:disabled:pointer-events-none tw:disabled:cursor-not-allowed tw:disabled:opacity-50');
+        classes(() => hlm('tw:dark:bg-input/30 tw:border-input tw:focus-visible:border-ring tw:focus-visible:ring-ring/50 tw:data-[matches-spartan-invalid=true]:ring-destructive/20 tw:dark:data-[matches-spartan-invalid=true]:ring-destructive/40 tw:data-[matches-spartan-invalid=true]:border-destructive tw:dark:data-[matches-spartan-invalid=true]:border-destructive/50 tw:h-9 tw:rounded-md tw:border tw:bg-transparent tw:px-2.5 tw:py-1 tw:text-base tw:shadow-xs tw:transition-[color,box-shadow] tw:file:h-7 tw:file:text-sm tw:file:font-medium tw:focus-visible:ring-3 tw:data-[matches-spartan-invalid=true]:ring-3 tw:md:text-sm tw:file:text-foreground tw:placeholder:text-muted-foreground tw:w-full tw:min-w-0 tw:outline-none tw:file:inline-flex tw:file:border-0 tw:file:bg-transparent tw:disabled:pointer-events-none tw:disabled:cursor-not-allowed tw:disabled:opacity-50', this.size() === 'sm' ? 'tw:h-8' : this.size() === 'lg' ? 'tw:h-10' : ''));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmInput, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.3", type: HlmInput, isStandalone: true, selector: "[hlmInput]", inputs: { ariaDescribedby: { classPropertyName: "ariaDescribedby", publicName: "ariaDescribedby", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "input" }, properties: { "attr.aria-describedby": "ariaDescribedby()" } }, hostDirectives: [{ directive: i1.BrnInput, inputs: ["id", "id", "forceInvalid", "forceInvalid"] }, { directive: i2.BrnFieldControlDescribedBy }], ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.3", type: HlmInput, isStandalone: true, selector: "[hlmInput]", inputs: { ariaDescribedby: { classPropertyName: "ariaDescribedby", publicName: "ariaDescribedby", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "input" }, properties: { "attr.aria-describedby": "ariaDescribedby()" } }, hostDirectives: [{ directive: i1.BrnInput, inputs: ["id", "id", "forceInvalid", "forceInvalid"] }, { directive: i2.BrnFieldControlDescribedBy }], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmInput, decorators: [{
             type: Directive,
@@ -25,7 +28,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImpor
                         '[attr.aria-describedby]': 'ariaDescribedby()',
                     },
                 }]
-        }], ctorParameters: () => [], propDecorators: { ariaDescribedby: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedby", required: false }] }] } });
+        }], ctorParameters: () => [], propDecorators: { ariaDescribedby: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedby", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
 
 /*
  * Public API Surface of input

package/input/types/input.d.ts

@@ -4,9 +4,11 @@ import * as i2 from '@spartan-ng/brain/field';
 
 declare class HlmInput {
     readonly ariaDescribedby: i0.InputSignal<string | null>;
+    /** Height density. Merged after the base height class, so it wins via `twMerge`. */
+    readonly size: i0.InputSignal<"sm" | "default" | "lg">;
     constructor();
     static ɵfac: i0.ɵɵFactoryDeclaration<HlmInput, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<HlmInput, "[hlmInput]", never, { "ariaDescribedby": { "alias": "ariaDescribedby"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof i1.BrnInput; inputs: { "id": "id"; "forceInvalid": "forceInvalid"; }; outputs: {}; }, { directive: typeof i2.BrnFieldControlDescribedBy; inputs: {}; outputs: {}; }]>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<HlmInput, "[hlmInput]", never, { "ariaDescribedby": { "alias": "ariaDescribedby"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof i1.BrnInput; inputs: { "id": "id"; "forceInvalid": "forceInvalid"; }; outputs: {}; }, { directive: typeof i2.BrnFieldControlDescribedBy; inputs: {}; outputs: {}; }]>;
 }
 
 declare const HlmInputImports: readonly [typeof HlmInput];

package/layout-simple/fesm2022/layout-simple.mjs

@@ -435,7 +435,7 @@ class EgLayoutSearch {
         </div>
       </hlm-popover-content>
     </hlm-popover>
-  `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: HlmPopover, selector: "[hlmPopover],hlm-popover" }, { kind: "directive", type: HlmPopoverTrigger, selector: "button[hlmPopoverTrigger],button[hlmPopoverTriggerFor]" }, { kind: "directive", type: HlmPopoverContent, selector: "[hlmPopoverContent],hlm-popover-content" }, { kind: "directive", type: HlmPopoverPortal, selector: "[hlmPopoverPortal]" }, { kind: "directive", type: HlmInput, selector: "[hlmInput]", inputs: ["ariaDescribedby"] }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: HlmPopover, selector: "[hlmPopover],hlm-popover" }, { kind: "directive", type: HlmPopoverTrigger, selector: "button[hlmPopoverTrigger],button[hlmPopoverTriggerFor]" }, { kind: "directive", type: HlmPopoverContent, selector: "[hlmPopoverContent],hlm-popover-content" }, { kind: "directive", type: HlmPopoverPortal, selector: "[hlmPopoverPortal]" }, { kind: "directive", type: HlmInput, selector: "[hlmInput]", inputs: ["ariaDescribedby", "size"] }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: EgLayoutSearch, decorators: [{
             type: Component,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@egose/shadcn-theme-ng-tw",
-  "version": "0.5.3",
+  "version": "0.6.0",
   "description": "Angular shadcn UI theme",
   "author": "Junmin Ahn",
   "bundles": [
@@ -31,6 +31,7 @@
     "@angular/router": ">=22.0.0 <23.0.0",
     "@ng-icons/core": ">=35.0.1 <36.0.0",
     "@spartan-ng/brain": ">=1.3.2 <2.0.0",
+    "@tanstack/angular-table": ">=9.1.2 <10.0.0",
     "rxjs": ">=7.8.0 <8.0.0"
   },
   "files": [
@@ -126,6 +127,10 @@
       "types": "./context-menu/types/context-menu.d.ts",
       "default": "./context-menu/fesm2022/context-menu.mjs"
     },
+    "./data-table": {
+      "types": "./data-table/types/data-table.d.ts",
+      "default": "./data-table/fesm2022/data-table.mjs"
+    },
     "./date-picker": {
       "types": "./date-picker/types/date-picker.d.ts",
       "default": "./date-picker/fesm2022/date-picker.mjs"

package/phone-input/fesm2022/phone-input.mjs

@@ -143,7 +143,7 @@ class HlmPhoneInput {
       (input)="_handleInput($event)"
       (blur)="_handleBlur()"
     />
-  `, isInline: true, dependencies: [{ kind: "directive", type: HlmInput, selector: "[hlmInput]", inputs: ["ariaDescribedby"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "directive", type: HlmInput, selector: "[hlmInput]", inputs: ["ariaDescribedby", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmPhoneInput, decorators: [{
             type: Component,

package/table/README.md

@@ -130,6 +130,8 @@ There are **no inputs, outputs, or methods** on any table directive. Each direct
 
 User `class` attributes on the same element are preserved and merged (the `classes()` helper keeps base classes).
 
+`HlmTh`/`HlmTd` take a `size` input (`HlmTableSize`: `sm` / `default` / `lg`) scaling density one step down/up: header height `h-8` / `h-10` / `h-12`, cell padding `p-1` / `p-2` / `p-3`.
+
 ## Examples
 
 ### 1. Basic invoice table

package/table/fesm2022/table.mjs

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
-import { Directive, NgModule } from '@angular/core';
-import { classes } from '@egose/shadcn-theme-ng-tw/utils';
+import { Directive, input, NgModule } from '@angular/core';
+import { classes, hlm } from '@egose/shadcn-theme-ng-tw/utils';
 
 class HlmTableContainer {
     constructor() {
@@ -110,11 +110,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImpor
  * within an HlmTable context.
  */
 class HlmTh {
+    size = input('default', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     constructor() {
-        classes(() => 'tw:text-foreground tw:h-10 tw:px-2 tw:text-start tw:align-middle tw:font-medium tw:whitespace-nowrap tw:[&:has([role=checkbox])]:pe-0');
+        classes(() => hlm('tw:text-foreground tw:h-10 tw:px-2 tw:text-start tw:align-middle tw:font-medium tw:whitespace-nowrap tw:[&:has([role=checkbox])]:pe-0', this.size() === 'sm' ? 'tw:h-8' : this.size() === 'lg' ? 'tw:h-12' : ''));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmTh, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.3", type: HlmTh, isStandalone: true, selector: "th[hlmTh],th[hlmTableHead]", host: { attributes: { "data-slot": "table-head" } }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.3", type: HlmTh, isStandalone: true, selector: "th[hlmTh],th[hlmTableHead]", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "table-head" } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmTh, decorators: [{
             type: Directive,
@@ -122,17 +124,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImpor
                     selector: 'th[hlmTh],th[hlmTableHead]',
                     host: { 'data-slot': 'table-head' },
                 }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
 /**
  * Directive to apply Shadcn-like styling to a <td> element
  * within an HlmTable context.
  */
 class HlmTd {
+    size = input('default', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     constructor() {
-        classes(() => 'tw:p-2 tw:align-middle tw:whitespace-nowrap tw:[&:has([role=checkbox])]:pe-0');
+        classes(() => hlm('tw:p-2 tw:align-middle tw:whitespace-nowrap tw:[&:has([role=checkbox])]:pe-0', this.size() === 'sm' ? 'tw:p-1' : this.size() === 'lg' ? 'tw:p-3' : ''));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmTd, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.3", type: HlmTd, isStandalone: true, selector: "td[hlmTd],td[hlmTableCell]", host: { attributes: { "data-slot": "table-cell" } }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.3", type: HlmTd, isStandalone: true, selector: "td[hlmTd],td[hlmTableCell]", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "table-cell" } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmTd, decorators: [{
             type: Directive,
@@ -140,7 +144,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImpor
                     selector: 'td[hlmTd],td[hlmTableCell]',
                     host: { 'data-slot': 'table-cell' },
                 }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
 /**
  * Directive to apply Shadcn-like styling to a <caption> element
  * within an HlmTable context.

package/table/types/table.d.ts

@@ -1,5 +1,7 @@
 import * as i0 from '@angular/core';
 
+/** Density scale shared by table parts and higher-level components (e.g. data-table). */
+type HlmTableSize = 'sm' | 'default' | 'lg';
 declare class HlmTableContainer {
     constructor();
     static ɵfac: i0.ɵɵFactoryDeclaration<HlmTableContainer, never>;
@@ -54,18 +56,20 @@ declare class HlmTr {
  * within an HlmTable context.
  */
 declare class HlmTh {
+    readonly size: i0.InputSignal<HlmTableSize>;
     constructor();
     static ɵfac: i0.ɵɵFactoryDeclaration<HlmTh, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<HlmTh, "th[hlmTh],th[hlmTableHead]", never, {}, {}, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<HlmTh, "th[hlmTh],th[hlmTableHead]", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 /**
  * Directive to apply Shadcn-like styling to a <td> element
  * within an HlmTable context.
  */
 declare class HlmTd {
+    readonly size: i0.InputSignal<HlmTableSize>;
     constructor();
     static ɵfac: i0.ɵɵFactoryDeclaration<HlmTd, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<HlmTd, "td[hlmTd],td[hlmTableCell]", never, {}, {}, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<HlmTd, "td[hlmTd],td[hlmTableCell]", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 /**
  * Directive to apply Shadcn-like styling to a <caption> element
@@ -85,3 +89,4 @@ declare class HlmTableModule {
 }
 
 export { HlmCaption, HlmTBody, HlmTFoot, HlmTHead, HlmTable, HlmTableContainer, HlmTableImports, HlmTableModule, HlmTd, HlmTh, HlmTr };
+export type { HlmTableSize };