@mgremy/ng-primitives 0.8.0 → 0.9.0

package/checkbox/README.md

@@ -0,0 +1,4 @@
+# @mgremy/ng-primitives/src/lib/checkbox
+
+Secondary entry point of `@mgremy/ng-primitives`. It can be used by importing from
+`@mgremy/ng-primitives/checkbox`.

package/fesm2022/mgremy-ng-primitives-button.mjs

@@ -16,16 +16,13 @@ const options = [
 const error = new Error(`MgnpButton must be used with ${options.join(' / ')}`);
 class MgnpButton {
     ngpButton = inject(NgpButton, { optional: true });
-    ngpComboboxButton = inject(NgpComboboxButton, {
-        optional: true,
-    });
-    ngpMenuTrigger = inject(NgpMenuTrigger, {
-        optional: true,
-    });
+    ngpComboboxButton = inject(NgpComboboxButton, { optional: true });
+    ngpMenuTrigger = inject(NgpMenuTrigger, { optional: true });
     ngpTooltipTrigger = inject(NgpTooltipTrigger, { optional: true });
     ngpAccordionTrigger = inject(NgpAccordionTrigger, { optional: true });
     color = input('ui', ...(ngDevMode ? [{ debugName: "color" }] : []));
     variant = input('solid', ...(ngDevMode ? [{ debugName: "variant" }] : []));
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
     constructor() {
         if (!this.ngpButton &&
             !this.ngpComboboxButton &&
@@ -37,7 +34,7 @@ class MgnpButton {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: MgnpButton, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.1", type: MgnpButton, isStandalone: true, selector: "[ngpButton][mgnpButton],\n    [ngpComboboxButton][mgnpButton],\n    [ngpMenuTrigger][mgnpButton],\n    [ngpTooltipTrigger][mgnpButton],\n    [ngpAccordionTrigger][mgnpButton]", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-mgnp-component": "mgnp-button" }, properties: { "attr.data-mgnp-color": "color() || null", "attr.data-mgnp-variant": "variant() || null" } }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.1", type: MgnpButton, isStandalone: true, selector: "[ngpButton][mgnpButton],\n    [ngpComboboxButton][mgnpButton],\n    [ngpMenuTrigger][mgnpButton],\n    [ngpTooltipTrigger][mgnpButton],\n    [ngpAccordionTrigger][mgnpButton]", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-mgnp-component": "mgnp-button" }, properties: { "attr.data-mgnp-size": "size()", "attr.data-mgnp-color": "color()", "attr.data-mgnp-variant": "variant()" } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: MgnpButton, decorators: [{
             type: Directive,
@@ -50,11 +47,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
                     standalone: true,
                     host: {
                         'data-mgnp-component': 'mgnp-button',
-                        '[attr.data-mgnp-color]': 'color() || null',
-                        '[attr.data-mgnp-variant]': 'variant() || null',
+                        '[attr.data-mgnp-size]': 'size()',
+                        '[attr.data-mgnp-color]': 'color()',
+                        '[attr.data-mgnp-variant]': 'variant()',
                     },
                 }]
-        }], ctorParameters: () => [], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }] } });
+        }], ctorParameters: () => [], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
 
 /**
  * Generated bundle index. Do not edit.

package/fesm2022/mgremy-ng-primitives-button.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"mgremy-ng-primitives-button.mjs","sources":["../../../../libs/ng-primitives/button/src/lib/mgnp-button/mgnp-button.directive.ts","../../../../libs/ng-primitives/button/src/mgremy-ng-primitives-button.ts"],"sourcesContent":["import { PropertyType } from '@mgremy/ng-primitives';\n\nimport { Directive, inject, input } from '@angular/core';\nimport { NgpAccordionTrigger } from 'ng-primitives/accordion';\nimport { NgpButton } from 'ng-primitives/button';\nimport { NgpComboboxButton } from 'ng-primitives/combobox';\nimport { NgpMenuTrigger } from 'ng-primitives/menu';\nimport { NgpTooltipTrigger } from 'ng-primitives/tooltip';\n\nconst options = [\n  'ngpButton',\n  'ngpComboboxButton',\n  'ngpMenuTrigger',\n  'ngpTooltipTrigger',\n  'ngpAccordionTrigger',\n];\n\nconst error = new Error(`MgnpButton must be used with ${options.join(' / ')}`);\n\nexport type MgnpButtonColor = PropertyType<\n  'ui' | 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'danger'\n>;\nexport type MgnpButtonVariant = PropertyType<'solid' | 'outline'>;\n\n@Directive({\n  selector: `[ngpButton][mgnpButton],\n    [ngpComboboxButton][mgnpButton],\n    [ngpMenuTrigger][mgnpButton],\n    [ngpTooltipTrigger][mgnpButton],\n    [ngpAccordionTrigger][mgnpButton]`,\n  standalone: true,\n  host: {\n    'data-mgnp-component': 'mgnp-button',\n    '[attr.data-mgnp-color]': 'color() || null',\n    '[attr.data-mgnp-variant]': 'variant() || null',\n  },\n})\nexport class MgnpButton {\n  protected readonly ngpButton = inject(NgpButton, { optional: true });\n  protected readonly ngpComboboxButton = inject(NgpComboboxButton, {\n    optional: true,\n  });\n  protected readonly ngpMenuTrigger = inject(NgpMenuTrigger, {\n    optional: true,\n  });\n  protected readonly ngpTooltipTrigger = inject(NgpTooltipTrigger, { optional: true });\n  protected readonly ngpAccordionTrigger = inject(NgpAccordionTrigger, { optional: true });\n\n  readonly color = input<MgnpButtonColor>('ui');\n  readonly variant = input<MgnpButtonVariant>('solid');\n\n  constructor() {\n    if (\n      !this.ngpButton &&\n      !this.ngpComboboxButton &&\n      !this.ngpMenuTrigger &&\n      !this.ngpTooltipTrigger &&\n      !this.ngpAccordionTrigger\n    ) {\n      console.error(this);\n      throw error;\n    }\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;;AASA,MAAM,OAAO,GAAG;IACd,WAAW;IACX,mBAAmB;IACnB,gBAAgB;IAChB,mBAAmB;IACnB,qBAAqB;CACtB;AAED,MAAM,KAAK,GAAG,IAAI,KAAK,CAAC,CAAA,6BAAA,EAAgC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA,CAAE,CAAC;MAoBjE,UAAU,CAAA;IACF,SAAS,GAAG,MAAM,CAAC,SAAS,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;AACjD,IAAA,iBAAiB,GAAG,MAAM,CAAC,iBAAiB,EAAE;AAC/D,QAAA,QAAQ,EAAE,IAAI;AACf,KAAA,CAAC;AACiB,IAAA,cAAc,GAAG,MAAM,CAAC,cAAc,EAAE;AACzD,QAAA,QAAQ,EAAE,IAAI;AACf,KAAA,CAAC;IACiB,iBAAiB,GAAG,MAAM,CAAC,iBAAiB,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;IACjE,mBAAmB,GAAG,MAAM,CAAC,mBAAmB,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;AAE/E,IAAA,KAAK,GAAG,KAAK,CAAkB,IAAI,iDAAC;AACpC,IAAA,OAAO,GAAG,KAAK,CAAoB,OAAO,mDAAC;AAEpD,IAAA,WAAA,GAAA;QACE,IACE,CAAC,IAAI,CAAC,SAAS;YACf,CAAC,IAAI,CAAC,iBAAiB;YACvB,CAAC,IAAI,CAAC,cAAc;YACpB,CAAC,IAAI,CAAC,iBAAiB;AACvB,YAAA,CAAC,IAAI,CAAC,mBAAmB,EACzB;AACA,YAAA,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC;AACnB,YAAA,MAAM,KAAK;QACb;IACF;uGAzBW,UAAU,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAAV,UAAU,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,gLAAA,EAAA,MAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,qBAAA,EAAA,aAAA,EAAA,EAAA,UAAA,EAAA,EAAA,sBAAA,EAAA,iBAAA,EAAA,wBAAA,EAAA,mBAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA;;2FAAV,UAAU,EAAA,UAAA,EAAA,CAAA;kBAbtB,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,CAAA;;;;AAI0B,qCAAA,CAAA;AACpC,oBAAA,UAAU,EAAE,IAAI;AAChB,oBAAA,IAAI,EAAE;AACJ,wBAAA,qBAAqB,EAAE,aAAa;AACpC,wBAAA,wBAAwB,EAAE,iBAAiB;AAC3C,wBAAA,0BAA0B,EAAE,mBAAmB;AAChD,qBAAA;AACF,iBAAA;;;ACpCD;;AAEG;;;;"}
+{"version":3,"file":"mgremy-ng-primitives-button.mjs","sources":["../../../../libs/ng-primitives/button/src/lib/mgnp-button/mgnp-button.directive.ts","../../../../libs/ng-primitives/button/src/mgremy-ng-primitives-button.ts"],"sourcesContent":["import { PropertyType } from '@mgremy/ng-primitives';\n\nimport { Directive, inject, input } from '@angular/core';\nimport { NgpAccordionTrigger } from 'ng-primitives/accordion';\nimport { NgpButton } from 'ng-primitives/button';\nimport { NgpComboboxButton } from 'ng-primitives/combobox';\nimport { NgpMenuTrigger } from 'ng-primitives/menu';\nimport { NgpTooltipTrigger } from 'ng-primitives/tooltip';\n\nconst options = [\n  'ngpButton',\n  'ngpComboboxButton',\n  'ngpMenuTrigger',\n  'ngpTooltipTrigger',\n  'ngpAccordionTrigger',\n];\n\nconst error = new Error(`MgnpButton must be used with ${options.join(' / ')}`);\n\nexport type MgnpButtonColor = PropertyType<\n  'ui' | 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'danger'\n>;\n\nexport type MgnpButtonVariant = PropertyType<'solid' | 'outline'>;\n\nexport type MgnpButtonSize = PropertyType<'xs' | 'sm' | 'md' | 'lg' | 'xl'>;\n\n@Directive({\n  selector: `[ngpButton][mgnpButton],\n    [ngpComboboxButton][mgnpButton],\n    [ngpMenuTrigger][mgnpButton],\n    [ngpTooltipTrigger][mgnpButton],\n    [ngpAccordionTrigger][mgnpButton]`,\n  standalone: true,\n  host: {\n    'data-mgnp-component': 'mgnp-button',\n    '[attr.data-mgnp-size]': 'size()',\n    '[attr.data-mgnp-color]': 'color()',\n    '[attr.data-mgnp-variant]': 'variant()',\n  },\n})\nexport class MgnpButton {\n  protected readonly ngpButton = inject(NgpButton, { optional: true });\n  protected readonly ngpComboboxButton = inject(NgpComboboxButton, { optional: true });\n  protected readonly ngpMenuTrigger = inject(NgpMenuTrigger, { optional: true });\n  protected readonly ngpTooltipTrigger = inject(NgpTooltipTrigger, { optional: true });\n  protected readonly ngpAccordionTrigger = inject(NgpAccordionTrigger, { optional: true });\n\n  readonly color = input<MgnpButtonColor>('ui');\n  readonly variant = input<MgnpButtonVariant>('solid');\n  readonly size = input<MgnpButtonSize>('md');\n\n  constructor() {\n    if (\n      !this.ngpButton &&\n      !this.ngpComboboxButton &&\n      !this.ngpMenuTrigger &&\n      !this.ngpTooltipTrigger &&\n      !this.ngpAccordionTrigger\n    ) {\n      console.error(this);\n      throw error;\n    }\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;;AASA,MAAM,OAAO,GAAG;IACd,WAAW;IACX,mBAAmB;IACnB,gBAAgB;IAChB,mBAAmB;IACnB,qBAAqB;CACtB;AAED,MAAM,KAAK,GAAG,IAAI,KAAK,CAAC,CAAA,6BAAA,EAAgC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA,CAAE,CAAC;MAwBjE,UAAU,CAAA;IACF,SAAS,GAAG,MAAM,CAAC,SAAS,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;IACjD,iBAAiB,GAAG,MAAM,CAAC,iBAAiB,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;IACjE,cAAc,GAAG,MAAM,CAAC,cAAc,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;IAC3D,iBAAiB,GAAG,MAAM,CAAC,iBAAiB,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;IACjE,mBAAmB,GAAG,MAAM,CAAC,mBAAmB,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;AAE/E,IAAA,KAAK,GAAG,KAAK,CAAkB,IAAI,iDAAC;AACpC,IAAA,OAAO,GAAG,KAAK,CAAoB,OAAO,mDAAC;AAC3C,IAAA,IAAI,GAAG,KAAK,CAAiB,IAAI,gDAAC;AAE3C,IAAA,WAAA,GAAA;QACE,IACE,CAAC,IAAI,CAAC,SAAS;YACf,CAAC,IAAI,CAAC,iBAAiB;YACvB,CAAC,IAAI,CAAC,cAAc;YACpB,CAAC,IAAI,CAAC,iBAAiB;AACvB,YAAA,CAAC,IAAI,CAAC,mBAAmB,EACzB;AACA,YAAA,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC;AACnB,YAAA,MAAM,KAAK;QACb;IACF;uGAtBW,UAAU,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAAV,UAAU,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,gLAAA,EAAA,MAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,qBAAA,EAAA,aAAA,EAAA,EAAA,UAAA,EAAA,EAAA,qBAAA,EAAA,QAAA,EAAA,sBAAA,EAAA,SAAA,EAAA,wBAAA,EAAA,WAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA;;2FAAV,UAAU,EAAA,UAAA,EAAA,CAAA;kBAdtB,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,CAAA;;;;AAI0B,qCAAA,CAAA;AACpC,oBAAA,UAAU,EAAE,IAAI;AAChB,oBAAA,IAAI,EAAE;AACJ,wBAAA,qBAAqB,EAAE,aAAa;AACpC,wBAAA,uBAAuB,EAAE,QAAQ;AACjC,wBAAA,wBAAwB,EAAE,SAAS;AACnC,wBAAA,0BAA0B,EAAE,WAAW;AACxC,qBAAA;AACF,iBAAA;;;ACxCD;;AAEG;;;;"}

package/fesm2022/mgremy-ng-primitives-checkbox.mjs

@@ -0,0 +1,34 @@
+import * as i0 from '@angular/core';
+import { inject, Directive } from '@angular/core';
+import { NgpCheckbox } from 'ng-primitives/checkbox';
+
+const options = ['ngpCheckbox'];
+const error = new Error(`MgnpCheckbox must be used with ${options.join(' / ')}`);
+class MgnpCheckbox {
+    ngpCheckbox = inject(NgpCheckbox, { optional: true });
+    constructor() {
+        if (!this.ngpCheckbox) {
+            console.error(this);
+            throw error;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: MgnpCheckbox, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.1", type: MgnpCheckbox, isStandalone: true, selector: "[ngpCheckbox][mgnpCheckbox]", host: { attributes: { "data-mgnp-component": "mgnp-checkbox" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: MgnpCheckbox, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: `[ngpCheckbox][mgnpCheckbox]`,
+                    standalone: true,
+                    host: {
+                        'data-mgnp-component': 'mgnp-checkbox',
+                    },
+                }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { MgnpCheckbox };
+//# sourceMappingURL=mgremy-ng-primitives-checkbox.mjs.map

package/fesm2022/mgremy-ng-primitives-checkbox.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"mgremy-ng-primitives-checkbox.mjs","sources":["../../../../libs/ng-primitives/checkbox/src/lib/mgnp-checkbox/mgnp-checkbox.directive.ts","../../../../libs/ng-primitives/checkbox/src/mgremy-ng-primitives-checkbox.ts"],"sourcesContent":["import { Directive, inject } from '@angular/core';\nimport { NgpCheckbox } from 'ng-primitives/checkbox';\n\nconst options = ['ngpCheckbox'];\n\nconst error = new Error(`MgnpCheckbox must be used with ${options.join(' / ')}`);\n\n@Directive({\n  selector: `[ngpCheckbox][mgnpCheckbox]`,\n  standalone: true,\n  host: {\n    'data-mgnp-component': 'mgnp-checkbox',\n  },\n})\nexport class MgnpCheckbox {\n  protected readonly ngpCheckbox = inject(NgpCheckbox, { optional: true });\n\n  constructor() {\n    if (!this.ngpCheckbox) {\n      console.error(this);\n      throw error;\n    }\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;AAGA,MAAM,OAAO,GAAG,CAAC,aAAa,CAAC;AAE/B,MAAM,KAAK,GAAG,IAAI,KAAK,CAAC,CAAA,+BAAA,EAAkC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA,CAAE,CAAC;MASnE,YAAY,CAAA;IACJ,WAAW,GAAG,MAAM,CAAC,WAAW,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;AAExE,IAAA,WAAA,GAAA;AACE,QAAA,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE;AACrB,YAAA,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC;AACnB,YAAA,MAAM,KAAK;QACb;IACF;uGARW,YAAY,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAAZ,YAAY,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,6BAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,qBAAA,EAAA,eAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA;;2FAAZ,YAAY,EAAA,UAAA,EAAA,CAAA;kBAPxB,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,CAAA,2BAAA,CAA6B;AACvC,oBAAA,UAAU,EAAE,IAAI;AAChB,oBAAA,IAAI,EAAE;AACJ,wBAAA,qBAAqB,EAAE,eAAe;AACvC,qBAAA;AACF,iBAAA;;;ACbD;;AAEG;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mgremy/ng-primitives",
-  "version": "0.8.0",
+  "version": "0.9.0",
   "license": "Apache-2.0",
   "homepage": "https://doc.mgremy.xyz/ng-primitives",
   "publishConfig": {
@@ -33,6 +33,10 @@
       "types": "./types/mgremy-ng-primitives-button.d.ts",
       "default": "./fesm2022/mgremy-ng-primitives-button.mjs"
     },
+    "./checkbox": {
+      "types": "./types/mgremy-ng-primitives-checkbox.d.ts",
+      "default": "./fesm2022/mgremy-ng-primitives-checkbox.mjs"
+    },
     "./combobox": {
       "types": "./types/mgremy-ng-primitives-combobox.d.ts",
       "default": "./fesm2022/mgremy-ng-primitives-combobox.mjs"

package/theme/components/accordion.css

@@ -1,11 +1,21 @@
 @utility mgnp-accordion {
-  display: block;
-  width: 100%;
-  max-width: --spacing(96);
   border-radius: --spacing(3);
   border: 1px solid var(--ngp-border);
   background-color: var(--ngp-background);
   box-shadow: var(--ngp-shadow);
+
+  @variant data-[orientation=vertical] {
+    display: block;
+    max-width: --spacing(96);
+    width: 100%;
+  }
+
+  @variant data-[orientation=horizontal] {
+    display: flex;
+    flex-direction: row;
+    max-height: --spacing(96);
+    height: 100%;
+  }
 }
 
 @utility mgnp-accordion-content {
@@ -13,16 +23,30 @@
   font-size: --spacing(3.5);
   color: var(--ngp-text-secondary);
 
-  @variant data-open {
-    animation: accordion-show var(--default-transition-duration) var(--default-transition-timing-function) forwards;
+  @variant data-open:data-[orientation=vertical] {
+    animation: accordion-show-vertical var(--default-transition-duration)
+      var(--default-transition-timing-function) forwards;
+  }
+
+  @variant data-closed:data-[orientation=vertical] {
+    animation: accordion-hide-vertical var(--default-transition-duration)
+      var(--default-transition-timing-function) forwards;
+  }
+
+  @variant data-open:data-[orientation=horizontal] {
+    animation: accordion-show-horizontal var(--default-transition-duration)
+      var(--default-transition-timing-function) forwards;
   }
 
-  @variant data-closed {
-    animation: accordion-hide var(--default-transition-duration) var(--default-transition-timing-function) forwards;
+  @variant data-closed:data-[orientation=horizontal] {
+    animation: accordion-hide-horizontal var(--default-transition-duration)
+      var(--default-transition-timing-function) forwards;
   }
 }
 
 @utility mgnp-accordion-item {
+  display: flex;
+
   h1,
   h2,
   h3,
@@ -35,13 +59,20 @@
   @variant not-last {
     border-bottom: 1px solid var(--ngp-border);
   }
+
+  @variant data-[orientation=horizontal] {
+    flex-direction: row;
+  }
+
+  @variant data-[orientation=vertical] {
+    flex-direction: column;
+  }
 }
 
 @utility mgnp-accordion-trigger {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  width: 100%;
   outline: none;
   border: none;
   box-shadow: none;
@@ -51,10 +82,21 @@
   padding-right: --spacing(4);
   font-size: --spacing(3.5);
   line-height: --spacing(5);
-  height: --spacing(11);
   border-radius: --spacing(3);
   color: var(--ngp-text-primary);
 
+  @variant data-[orientation=vertical] {
+    width: 100%;
+    height: --spacing(11);
+  }
+
+  @variant data-[orientation=horizontal] {
+    width: --spacing(11);
+    height: 100%;
+    writing-mode: sideways-lr;
+    text-orientation: sideways;
+  }
+
   @variant data-focus-visible {
     overflow: hidden;
     font-size: --spacing(3.5);
@@ -62,7 +104,8 @@
   }
 
   ng-icon {
-    transition: transform var(--default-transition-duration) var(--default-transition-timing-function);
+    transition: transform var(--default-transition-duration)
+      var(--default-transition-timing-function);
   }
 
   @variant data-open {
@@ -91,21 +134,39 @@
 }
 
 @theme {
-  @keyframes accordion-show {
+  @keyframes accordion-show-vertical {
+    from {
+      max-height: 0;
+    }
+    to {
+      max-height: var(--ngp-accordion-content-height);
+    }
+  }
+
+  @keyframes accordion-hide-vertical {
+    from {
+      max-height: var(--ngp-accordion-content-height);
+    }
+    to {
+      max-height: 0;
+    }
+  }
+
+  @keyframes accordion-show-horizontal {
     from {
-      height: 0;
+      max-width: 0;
     }
     to {
-      height: var(--ngp-accordion-content-height);
+      max-width: var(--ngp-accordion-content-width);
     }
   }
 
-  @keyframes accordion-hide {
+  @keyframes accordion-hide-horizontal {
     from {
-      height: var(--ngp-accordion-content-height);
+      max-width: var(--ngp-accordion-content-width);
     }
     to {
-      height: 0;
+      max-width: 0;
     }
   }
 }

package/theme/components/button.css

@@ -4,12 +4,7 @@
   height: fit-content;
   width: max-content;
   cursor: pointer;
-  font-weight: var(--font-weight-medium);
   border-radius: var(--radius-lg);
-  padding-block: --spacing(2);
-  padding-inline: --spacing(4);
-  color: var(--ngp-text-primary);
-  background-color: var(--ngp-background);
   box-shadow: var(--ngp-button-shadow);
 
   @variant data-focus-visible {
@@ -21,192 +16,230 @@
     cursor: default;
   }
 
+  /* Sizes */
+  @variant data-[mgnp-size=xs] {
+    font-size: var(--text-xs);
+    line-height: var(--text-xs--line-height);
+    padding-block: --spacing(1);
+    padding-inline: --spacing(1.5);
+  }
+
+  @variant data-[mgnp-size=sm] {
+    font-size: var(--text-sm);
+    line-height: var(--text-sm--line-height);
+    padding-block: --spacing(1);
+    padding-inline: --spacing(2);
+  }
+
+  @variant data-[mgnp-size=md] {
+    font-size: var(--text-base);
+    line-height: var(--text-base--line-height);
+    padding-block: --spacing(1.5);
+    padding-inline: --spacing(2.5);
+  }
+
+  @variant data-[mgnp-size=lg] {
+    font-size: var(--text-lg);
+    line-height: var(--text-lg--line-height);
+    padding-block: --spacing(2);
+    padding-inline: --spacing(3);
+    font-weight: var(--font-weight-semibold);
+  }
+
+  @variant data-[mgnp-size=xl] {
+    font-size: var(--text-xl);
+    line-height: var(--text-xl--line-height);
+    padding-block: --spacing(2.5);
+    padding-inline: --spacing(4);
+    font-weight: var(--font-weight-semibold);
+  }
+
   /* Solid */
   @variant data-[mgnp-variant=solid] {
     /* Colors */
     @variant data-[mgnp-color=ui] {
-      --ngp-background: var(--mg-background-ui);
+      background-color: var(--mg-background-ui);
 
       @variant data-hover {
-        --ngp-background: var(--ngp-background-hover);
+        background-color: var(--mg-background-ui-hover);
       }
 
       @variant data-press {
-        --ngp-background: var(--ngp-background-active);
+        background-color: var(--mg-background-ui-active);
       }
     }
 
     @variant data-[mgnp-color=primary] {
-      --ngp-background: var(--mg-background-primary);
+      background-color: var(--mg-background-primary);
 
       @variant data-hover {
-        --ngp-background: var(--mg-background-primary-hover);
+        background-color: var(--mg-background-primary-hover);
       }
 
       @variant data-press {
-        --ngp-background: var(--mg-background-primary-active);
+        background-color: var(--mg-background-primary-active);
       }
     }
 
     @variant data-[mgnp-color=secondary] {
-      --ngp-background: var(--mg-background-secondary);
+      background-color: var(--mg-background-secondary);
 
       @variant data-hover {
-        --ngp-background: var(--mg-background-secondary-hover);
+        background-color: var(--mg-background-secondary-hover);
       }
 
       @variant data-press {
-        --ngp-background: var(--mg-background-secondary-active);
+        background-color: var(--mg-background-secondary-active);
       }
     }
 
     @variant data-[mgnp-color=info] {
-      --ngp-background: var(--mg-background-info);
+      background-color: var(--mg-background-info);
 
       @variant data-hover {
-        --ngp-background: var(--mg-background-info-hover);
+        background-color: var(--mg-background-info-hover);
       }
 
       @variant data-press {
-        --ngp-background: var(--mg-background-info-active);
+        background-color: var(--mg-background-info-active);
       }
     }
 
     @variant data-[mgnp-color=success] {
-      --ngp-background: var(--mg-background-success);
+      background-color: var(--mg-background-success);
 
       @variant data-hover {
-        --ngp-background: var(--mg-background-success-hover);
+        background-color: var(--mg-background-success-hover);
       }
 
       @variant data-press {
-        --ngp-background: var(--mg-background-success-active);
+        background-color: var(--mg-background-success-active);
       }
     }
 
     @variant data-[mgnp-color=warning] {
-      --ngp-background: var(--mg-background-warning);
+      background-color: var(--mg-background-warning);
 
       @variant data-hover {
-        --ngp-background: var(--mg-background-warning-hover);
+        background-color: var(--mg-background-warning-hover);
       }
 
       @variant data-press {
-        --ngp-background: var(--mg-background-warning-active);
+        background-color: var(--mg-background-warning-active);
       }
     }
 
     @variant data-[mgnp-color=danger] {
-      --ngp-background: var(--mg-background-danger);
+      background-color: var(--mg-background-danger);
 
       @variant data-hover {
-        --ngp-background: var(--mg-background-danger-hover);
+        background-color: var(--mg-background-danger-hover);
       }
 
       @variant data-press {
-        --ngp-background: var(--mg-background-danger-active);
+        background-color: var(--mg-background-danger-active);
       }
     }
   }
 
   /* Outline */
   @variant data-[mgnp-variant=outline] {
-    --ngp-background: transparent;
-    --ngp-text-primary: var(--mg-text-ui);
+    background-color: transparent;
+    color: var(--mg-text-ui);
 
     /* Colors */
     @variant data-[mgnp-color=ui] {
       @variant data-hover {
-        --ngp-background: var(--mg-background-ui-inverse);
-        --ngp-text-primary: var(--mg-text-inverse);
+        background-color: var(--mg-background-ui-inverse);
+        color: var(--mg-text-inverse);
       }
 
       @variant data-press {
-        --ngp-background: var(--mg-background-ui-inverse-active);
+        background-color: var(--mg-background-ui-inverse-active);
       }
     }
 
     @variant data-[mgnp-color=primary] {
       @variant not-data-hover {
-        --ngp-text-primary: var(--mg-text-primary);
+        color: var(--mg-text-primary);
       }
 
       @variant data-hover {
-        --ngp-background: var(--mg-background-primary);
+        background-color: var(--mg-background-primary);
       }
 
       @variant data-press {
-        --ngp-background: var(--mg-background-primary-inverse-active);
+        background-color: var(--mg-background-primary-inverse-active);
       }
     }
 
     @variant data-[mgnp-color=secondary] {
       @variant not-data-hover {
-        --ngp-text-primary: var(--mg-text-secondary);
+        color: var(--mg-text-secondary);
       }
 
       @variant data-hover {
-        --ngp-background: var(--mg-background-secondary);
+        background-color: var(--mg-background-secondary);
       }
 
       @variant data-press {
-        --ngp-background: var(--mg-background-secondary-inverse-active);
+        background-color: var(--mg-background-secondary-inverse-active);
       }
     }
 
     @variant data-[mgnp-color=info] {
       @variant not-data-hover {
-        --ngp-text-primary: var(--mg-text-info);
+        color: var(--mg-text-info);
       }
 
       @variant data-hover {
-        --ngp-background: var(--mg-background-info);
+        background-color: var(--mg-background-info);
       }
 
       @variant data-press {
-        --ngp-background: var(--mg-background-info-inverse-active);
+        background-color: var(--mg-background-info-inverse-active);
       }
     }
 
     @variant data-[mgnp-color=success] {
       @variant not-data-hover {
-        --ngp-text-primary: var(--mg-text-success);
+        color: var(--mg-text-success);
       }
 
       @variant data-hover {
-        --ngp-background: var(--mg-background-success);
+        background-color: var(--mg-background-success);
       }
 
       @variant data-press {
-        --ngp-background: var(--mg-background-success-inverse-active);
+        background-color: var(--mg-background-success-inverse-active);
       }
     }
 
     @variant data-[mgnp-color=warning] {
       @variant not-data-hover {
-        --ngp-text-primary: var(--mg-text-warning);
+        color: var(--mg-text-warning);
       }
 
       @variant data-hover {
-        --ngp-background: var(--mg-background-warning);
+        background-color: var(--mg-background-warning);
       }
 
       @variant data-press {
-        --ngp-background: var(--mg-background-warning-inverse-active);
+        background-color: var(--mg-background-warning-inverse-active);
       }
     }
 
     @variant data-[mgnp-color=danger] {
       @variant not-data-hover {
-        --ngp-text-primary: var(--mg-text-danger);
+        color: var(--mg-text-danger);
       }
 
       @variant data-hover {
-        --ngp-background: var(--mg-background-danger);
+        background-color: var(--mg-background-danger);
       }
 
       @variant data-press {
-        --ngp-background: var(--mg-background-danger-inverse-active);
+        background-color: var(--mg-background-danger-inverse-active);
       }
     }
   }

package/theme/components/checkbox.css

@@ -0,0 +1,37 @@
+@utility mgnp-checkbox {
+  display: flex;
+  flex: none;
+  cursor: pointer;
+  align-items: center;
+  justify-content: center;
+  background-color: transparent;
+  outline: none;
+  border: 1px solid var(--ngp-border);
+  color: var(--ngp-text-inverse);
+  border-radius: var(--radius-sm);
+  font-size: var(--text-base);
+  line-height: var(--text-base--line-height);
+  padding: --spacing(0);
+  width: --spacing(5);
+  height: --spacing(5);
+
+  @variant data-hover {
+    background-color: var(--ngp-background-hover);
+  }
+
+  @variant data-checked, data-indeterminate {
+    border-color: var(--ngp-background-inverse);
+    background-color: var(--ngp-background-inverse);
+  }
+
+  @variant data-focus-visible {
+    outline: --spacing(0.5) solid var(--ngp-focus-ring);
+    outline-offset: --spacing(0.5);
+  }
+}
+
+@layer base {
+  [mgnpCheckbox][data-mgnp-component='mgnp-checkbox'] {
+    @apply mgnp-checkbox transition;
+  }
+}

package/theme/ngp_tw.css

@@ -1,5 +1,6 @@
 @import './components/accordion.css';
 @import './components/button.css';
+@import './components/checkbox.css';
 @import './components/combobox.css';
 @import './components/input.css';
 @import './components/menu.css';

package/types/mgremy-ng-primitives-button.d.ts

@@ -8,6 +8,7 @@ import { NgpTooltipTrigger } from 'ng-primitives/tooltip';
 
 type MgnpButtonColor = PropertyType<'ui' | 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'danger'>;
 type MgnpButtonVariant = PropertyType<'solid' | 'outline'>;
+type MgnpButtonSize = PropertyType<'xs' | 'sm' | 'md' | 'lg' | 'xl'>;
 declare class MgnpButton {
     protected readonly ngpButton: NgpButton | null;
     protected readonly ngpComboboxButton: NgpComboboxButton | null;
@@ -16,10 +17,11 @@ declare class MgnpButton {
     protected readonly ngpAccordionTrigger: NgpAccordionTrigger<any> | null;
     readonly color: _angular_core.InputSignal<MgnpButtonColor>;
     readonly variant: _angular_core.InputSignal<MgnpButtonVariant>;
+    readonly size: _angular_core.InputSignal<MgnpButtonSize>;
     constructor();
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<MgnpButton, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<MgnpButton, "[ngpButton][mgnpButton],    [ngpComboboxButton][mgnpButton],    [ngpMenuTrigger][mgnpButton],    [ngpTooltipTrigger][mgnpButton],    [ngpAccordionTrigger][mgnpButton]", never, { "color": { "alias": "color"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<MgnpButton, "[ngpButton][mgnpButton],    [ngpComboboxButton][mgnpButton],    [ngpMenuTrigger][mgnpButton],    [ngpTooltipTrigger][mgnpButton],    [ngpAccordionTrigger][mgnpButton]", never, { "color": { "alias": "color"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 export { MgnpButton };
-export type { MgnpButtonColor, MgnpButtonVariant };
+export type { MgnpButtonColor, MgnpButtonSize, MgnpButtonVariant };

package/types/mgremy-ng-primitives-checkbox.d.ts

@@ -0,0 +1,11 @@
+import { NgpCheckbox } from 'ng-primitives/checkbox';
+import * as i0 from '@angular/core';
+
+declare class MgnpCheckbox {
+    protected readonly ngpCheckbox: NgpCheckbox | null;
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<MgnpCheckbox, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MgnpCheckbox, "[ngpCheckbox][mgnpCheckbox]", never, {}, {}, never, never, true, never>;
+}
+
+export { MgnpCheckbox };