@brickclay-org/ui 0.0.14 → 0.0.16

package/fesm2022/brickclay-org-ui.mjs

@@ -2460,6 +2460,294 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 type: Output
             }] } });
 
+class PillComponent {
+    label = '';
+    variant = 'Light';
+    color = 'Gray';
+    size = 'md';
+    dot = 'none';
+    removable = false;
+    customClass = '';
+    clicked = new EventEmitter();
+    get containerClasses() {
+        // 1. Size Class
+        const sizeClass = `pill-${this.size}`;
+        // 2. Color/Variant Class (Dynamic Generation)
+        const styleClass = `${this.color}-${this.variant}`;
+        // 3. customClasses
+        const customClass = `${this.customClass}`;
+        return `pill ${sizeClass} ${styleClass} ${customClass}`;
+    }
+    onRemove(e) {
+        e.stopPropagation();
+        this.clicked.emit(this.label);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: PillComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: PillComponent, isStandalone: true, selector: "brickclay-pill", inputs: { label: "label", variant: "variant", color: "color", size: "size", dot: "dot", removable: "removable", customClass: "customClass" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<span [className]=\"containerClasses\">\r\n\r\n  @if (dot === 'left') {\r\n    <span class=\"dot\"></span>\r\n  }\r\n\r\n  <span>{{ label }}</span>\r\n\r\n  @if (dot === 'right') {\r\n    <span class=\"dot\"></span>\r\n  }\r\n\r\n  @if (removable) {\r\n    <button\r\n      (click)=\"onRemove($event)\"\r\n      class=\"pill-close \"> <svg\r\n      xmlns=\"http://www.w3.org/2000/svg\"\r\n      viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n      <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\r\n      <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\r\n    </svg>\r\n</button>\r\n  }\r\n</span>\r\n", styles: [".pill{@apply inline-flex items-center justify-center font-medium border transition-colors duration-200 cursor-default gap-1.5 rounded-full;}.pill-xsm{@apply px-2 py-0.5 text-[10px] leading-[14px];}.pill-sm{@apply px-2 py-0.5 text-xs leading-[18px];}.pill-md{@apply px-2 py-0.5 text-sm;}.pill-lg{@apply px-3 py-1 text-sm;}.dot{@apply rounded-full size-1.5 flex-shrink-0 flex-grow-0 bg-current;}.pill-close{@apply flex items-center justify-center rounded-full text-inherit transition-colors;}.pill-xsm .pill-close,.pill-sm .pill-close{@apply w-3 h-3;}.pill-md .pill-close,.pill-lg .pill-close{@apply w-3.5 h-3.5;}.Gray-Solid{@apply bg-[#6B7080] border-[#6B7080] text-white;}.Primary-Solid{@apply bg-[#294FFF] border-[#294FFF] text-white;}.Error-Solid{@apply bg-[#FA727A] border-[#FA727A] text-[#4C0513];}.Warning-Solid{@apply bg-[#FA9E3A] border-[#FA9E3A] text-[#461C04];}.Success-Solid{@apply bg-[#57D175] border-[#57D175] text-[#461C04];}.Success-Solid .dot{@apply bg-[#082B13];}.Purple-Solid{@apply bg-[#CE8EF2] border-[#CE8EF2] text-[#461C04];}.Cyan-Solid{@apply bg-[#3FC2F1] border-[#3FC2F1] text-[#461C04];}.Gray-Light{@apply bg-[#F4F4F6] border-transparent text-[#363C51];}.Primary-Light{@apply bg-[#E5F3FF] border-transparent text-[#1434CB];}.Error-Light{@apply bg-[#FFF1F1] border-transparent text-[#CB1432];}.Warning-Light{@apply bg-[#FFEED7] border-transparent text-[#A04C02];}.Success-Light{@apply bg-[#F1FCF3] border-transparent text-[#1E7735];}.Purple-Light{@apply bg-[#F6EAFD] border-transparent text-[#9130C0];}.Cyan-Light{@apply bg-[#F1FAFE] border-transparent text-[#096E9B];}.Gray-Outline{@apply bg-[#F4F4F6] border-[#BBBDC5] text-[#363C51];}.Primary-Outline{@apply bg-[#E5F3FF] border-[#3F71FF] text-[#1434CB];}.Error-Outline{@apply bg-[#FFF1F1] border-[#FA727A] text-[#CB1432];}.Warning-Outline{@apply bg-[#FFEED7] border-[#FBAE58] text-[#A04C02];}.Success-Outline{@apply bg-[#F1FCF3] border-[#57D175] text-[#1E7735];}.Purple-Outline{@apply bg-[#F6EAFD] border-[#CE8EF2] text-[#9130C0];}.Cyan-Outline{@apply bg-[#F1FAFE] border-[#3FC2F1] text-[#096E9B];}.Gray-Transparent{@apply bg-transparent border-[#BBBDC5] text-[#363C51];}.Primary-Transparent{@apply bg-transparent border-[#3F71FF] text-[#1434CB];}.Error-Transparent{@apply bg-transparent border-[#FA727A] text-[#CB1432];}.Warning-Transparent{@apply bg-transparent border-[#FBAE58] text-[#A04C02];}.Success-Transparent{@apply bg-transparent border-[#57D175] text-[#1E7735];}.Purple-Transparent{@apply bg-transparent border-[#CE8EF2] text-[#9130C0];}.Cyan-Transparent{@apply bg-transparent border-[#3FC2F1] text-[#096E9B];}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: PillComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'brickclay-pill', imports: [], template: "<span [className]=\"containerClasses\">\r\n\r\n  @if (dot === 'left') {\r\n    <span class=\"dot\"></span>\r\n  }\r\n\r\n  <span>{{ label }}</span>\r\n\r\n  @if (dot === 'right') {\r\n    <span class=\"dot\"></span>\r\n  }\r\n\r\n  @if (removable) {\r\n    <button\r\n      (click)=\"onRemove($event)\"\r\n      class=\"pill-close \"> <svg\r\n      xmlns=\"http://www.w3.org/2000/svg\"\r\n      viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n      <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\r\n      <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\r\n    </svg>\r\n</button>\r\n  }\r\n</span>\r\n", styles: [".pill{@apply inline-flex items-center justify-center font-medium border transition-colors duration-200 cursor-default gap-1.5 rounded-full;}.pill-xsm{@apply px-2 py-0.5 text-[10px] leading-[14px];}.pill-sm{@apply px-2 py-0.5 text-xs leading-[18px];}.pill-md{@apply px-2 py-0.5 text-sm;}.pill-lg{@apply px-3 py-1 text-sm;}.dot{@apply rounded-full size-1.5 flex-shrink-0 flex-grow-0 bg-current;}.pill-close{@apply flex items-center justify-center rounded-full text-inherit transition-colors;}.pill-xsm .pill-close,.pill-sm .pill-close{@apply w-3 h-3;}.pill-md .pill-close,.pill-lg .pill-close{@apply w-3.5 h-3.5;}.Gray-Solid{@apply bg-[#6B7080] border-[#6B7080] text-white;}.Primary-Solid{@apply bg-[#294FFF] border-[#294FFF] text-white;}.Error-Solid{@apply bg-[#FA727A] border-[#FA727A] text-[#4C0513];}.Warning-Solid{@apply bg-[#FA9E3A] border-[#FA9E3A] text-[#461C04];}.Success-Solid{@apply bg-[#57D175] border-[#57D175] text-[#461C04];}.Success-Solid .dot{@apply bg-[#082B13];}.Purple-Solid{@apply bg-[#CE8EF2] border-[#CE8EF2] text-[#461C04];}.Cyan-Solid{@apply bg-[#3FC2F1] border-[#3FC2F1] text-[#461C04];}.Gray-Light{@apply bg-[#F4F4F6] border-transparent text-[#363C51];}.Primary-Light{@apply bg-[#E5F3FF] border-transparent text-[#1434CB];}.Error-Light{@apply bg-[#FFF1F1] border-transparent text-[#CB1432];}.Warning-Light{@apply bg-[#FFEED7] border-transparent text-[#A04C02];}.Success-Light{@apply bg-[#F1FCF3] border-transparent text-[#1E7735];}.Purple-Light{@apply bg-[#F6EAFD] border-transparent text-[#9130C0];}.Cyan-Light{@apply bg-[#F1FAFE] border-transparent text-[#096E9B];}.Gray-Outline{@apply bg-[#F4F4F6] border-[#BBBDC5] text-[#363C51];}.Primary-Outline{@apply bg-[#E5F3FF] border-[#3F71FF] text-[#1434CB];}.Error-Outline{@apply bg-[#FFF1F1] border-[#FA727A] text-[#CB1432];}.Warning-Outline{@apply bg-[#FFEED7] border-[#FBAE58] text-[#A04C02];}.Success-Outline{@apply bg-[#F1FCF3] border-[#57D175] text-[#1E7735];}.Purple-Outline{@apply bg-[#F6EAFD] border-[#CE8EF2] text-[#9130C0];}.Cyan-Outline{@apply bg-[#F1FAFE] border-[#3FC2F1] text-[#096E9B];}.Gray-Transparent{@apply bg-transparent border-[#BBBDC5] text-[#363C51];}.Primary-Transparent{@apply bg-transparent border-[#3F71FF] text-[#1434CB];}.Error-Transparent{@apply bg-transparent border-[#FA727A] text-[#CB1432];}.Warning-Transparent{@apply bg-transparent border-[#FBAE58] text-[#A04C02];}.Success-Transparent{@apply bg-transparent border-[#57D175] text-[#1E7735];}.Purple-Transparent{@apply bg-transparent border-[#CE8EF2] text-[#9130C0];}.Cyan-Transparent{@apply bg-transparent border-[#3FC2F1] text-[#096E9B];}\n"] }]
+        }], propDecorators: { label: [{
+                type: Input
+            }], variant: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], dot: [{
+                type: Input
+            }], removable: [{
+                type: Input
+            }], customClass: [{
+                type: Input
+            }], clicked: [{
+                type: Output
+            }] } });
+
+class BadgeComponent {
+    label = '';
+    variant = 'Light';
+    color = 'Gray';
+    size = 'md';
+    dot = 'none';
+    removable = false;
+    customClass = '';
+    clicked = new EventEmitter();
+    get containerClasses() {
+        // 1. Size Class
+        const sizeClass = `badge-${this.size}`;
+        // 2. Color/Variant Class (Dynamic Generation)
+        const styleClass = `${this.color}-${this.variant}`;
+        // 3. customClasses
+        const customClass = `${this.customClass}`;
+        return `badge ${sizeClass} ${styleClass} ${customClass}`;
+    }
+    onRemove(e) {
+        e.stopPropagation();
+        this.clicked.emit(this.label);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: BadgeComponent, isStandalone: true, selector: "brickclay-badge", inputs: { label: "label", variant: "variant", color: "color", size: "size", dot: "dot", removable: "removable", customClass: "customClass" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<span [className]=\"containerClasses\">\r\n\r\n  @if (dot === 'left') {\r\n    <span class=\"dot\"></span>\r\n  }\r\n\r\n  <span>{{ label }}</span>\r\n\r\n  @if (dot === 'right') {\r\n    <span class=\"dot\"></span>\r\n  }\r\n\r\n  @if (removable) {\r\n    <button\r\n      (click)=\"onRemove($event)\"\r\n      class=\"badge-close\"> <svg\r\n      xmlns=\"http://www.w3.org/2000/svg\"\r\n      viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n      <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\r\n      <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\r\n    </svg>\r\n</button>\r\n  }\r\n</span>\r\n", styles: [".badge{@apply inline-flex items-center justify-center font-medium border transition-colors duration-200 cursor-default gap-1.5 rounded-[4px];}.isBadge{@apply rounded-[4px];}.isPill{@apply rounded-full;}.badge-xsm{@apply px-2 py-0.5 text-[10px] leading-[14px];}.badge-sm{@apply px-2 py-0.5 text-xs leading-[18px];}.badge-md{@apply px-2 py-0.5 text-sm;}.badge-lg{@apply px-3 py-1 text-sm;}.dot{@apply rounded-full size-1.5 flex-shrink-0 flex-grow-0 bg-current;}.badge-close{@apply flex items-center justify-center rounded-full text-inherit transition-colors;}.badge-xsm .badge-close,.badge-sm .badge-close{@apply w-3 h-3;}.badge-md .badge-close,.badge-lg .badge-close{@apply w-3.5 h-3.5;}.Gray-Solid{@apply bg-[#6B7080] border-[#6B7080] text-white;}.Primary-Solid{@apply bg-[#294FFF] border-[#294FFF] text-white;}.Error-Solid{@apply bg-[#FA727A] border-[#FA727A] text-[#4C0513];}.Warning-Solid{@apply bg-[#FA9E3A] border-[#FA9E3A] text-[#461C04];}.Success-Solid{@apply bg-[#57D175] border-[#57D175] text-[#461C04];}.Success-Solid .dot{@apply bg-[#082B13];}.Purple-Solid{@apply bg-[#CE8EF2] border-[#CE8EF2] text-[#461C04];}.Cyan-Solid{@apply bg-[#3FC2F1] border-[#3FC2F1] text-[#461C04];}.Gray-Light{@apply bg-[#F4F4F6] border-transparent text-[#363C51];}.Primary-Light{@apply bg-[#E5F3FF] border-transparent text-[#1434CB];}.Error-Light{@apply bg-[#FFF1F1] border-transparent text-[#CB1432];}.Warning-Light{@apply bg-[#FFEED7] border-transparent text-[#A04C02];}.Success-Light{@apply bg-[#F1FCF3] border-transparent text-[#1E7735];}.Purple-Light{@apply bg-[#F6EAFD] border-transparent text-[#9130C0];}.Cyan-Light{@apply bg-[#F1FAFE] border-transparent text-[#096E9B];}.Gray-Outline{@apply bg-[#F4F4F6] border-[#BBBDC5] text-[#363C51];}.Primary-Outline{@apply bg-[#E5F3FF] border-[#3F71FF] text-[#1434CB];}.Error-Outline{@apply bg-[#FFF1F1] border-[#FA727A] text-[#CB1432];}.Warning-Outline{@apply bg-[#FFEED7] border-[#FBAE58] text-[#A04C02];}.Success-Outline{@apply bg-[#F1FCF3] border-[#57D175] text-[#1E7735];}.Purple-Outline{@apply bg-[#F6EAFD] border-[#CE8EF2] text-[#9130C0];}.Cyan-Outline{@apply bg-[#F1FAFE] border-[#3FC2F1] text-[#096E9B];}.Gray-Transparent{@apply bg-transparent border-[#BBBDC5] text-[#363C51];}.Primary-Transparent{@apply bg-transparent border-[#3F71FF] text-[#1434CB];}.Error-Transparent{@apply bg-transparent border-[#FA727A] text-[#CB1432];}.Warning-Transparent{@apply bg-transparent border-[#FBAE58] text-[#A04C02];}.Success-Transparent{@apply bg-transparent border-[#57D175] text-[#1E7735];}.Purple-Transparent{@apply bg-transparent border-[#CE8EF2] text-[#9130C0];}.Cyan-Transparent{@apply bg-transparent border-[#3FC2F1] text-[#096E9B];}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BadgeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'brickclay-badge', standalone: true, imports: [CommonModule], template: "<span [className]=\"containerClasses\">\r\n\r\n  @if (dot === 'left') {\r\n    <span class=\"dot\"></span>\r\n  }\r\n\r\n  <span>{{ label }}</span>\r\n\r\n  @if (dot === 'right') {\r\n    <span class=\"dot\"></span>\r\n  }\r\n\r\n  @if (removable) {\r\n    <button\r\n      (click)=\"onRemove($event)\"\r\n      class=\"badge-close\"> <svg\r\n      xmlns=\"http://www.w3.org/2000/svg\"\r\n      viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n      <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\r\n      <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\r\n    </svg>\r\n</button>\r\n  }\r\n</span>\r\n", styles: [".badge{@apply inline-flex items-center justify-center font-medium border transition-colors duration-200 cursor-default gap-1.5 rounded-[4px];}.isBadge{@apply rounded-[4px];}.isPill{@apply rounded-full;}.badge-xsm{@apply px-2 py-0.5 text-[10px] leading-[14px];}.badge-sm{@apply px-2 py-0.5 text-xs leading-[18px];}.badge-md{@apply px-2 py-0.5 text-sm;}.badge-lg{@apply px-3 py-1 text-sm;}.dot{@apply rounded-full size-1.5 flex-shrink-0 flex-grow-0 bg-current;}.badge-close{@apply flex items-center justify-center rounded-full text-inherit transition-colors;}.badge-xsm .badge-close,.badge-sm .badge-close{@apply w-3 h-3;}.badge-md .badge-close,.badge-lg .badge-close{@apply w-3.5 h-3.5;}.Gray-Solid{@apply bg-[#6B7080] border-[#6B7080] text-white;}.Primary-Solid{@apply bg-[#294FFF] border-[#294FFF] text-white;}.Error-Solid{@apply bg-[#FA727A] border-[#FA727A] text-[#4C0513];}.Warning-Solid{@apply bg-[#FA9E3A] border-[#FA9E3A] text-[#461C04];}.Success-Solid{@apply bg-[#57D175] border-[#57D175] text-[#461C04];}.Success-Solid .dot{@apply bg-[#082B13];}.Purple-Solid{@apply bg-[#CE8EF2] border-[#CE8EF2] text-[#461C04];}.Cyan-Solid{@apply bg-[#3FC2F1] border-[#3FC2F1] text-[#461C04];}.Gray-Light{@apply bg-[#F4F4F6] border-transparent text-[#363C51];}.Primary-Light{@apply bg-[#E5F3FF] border-transparent text-[#1434CB];}.Error-Light{@apply bg-[#FFF1F1] border-transparent text-[#CB1432];}.Warning-Light{@apply bg-[#FFEED7] border-transparent text-[#A04C02];}.Success-Light{@apply bg-[#F1FCF3] border-transparent text-[#1E7735];}.Purple-Light{@apply bg-[#F6EAFD] border-transparent text-[#9130C0];}.Cyan-Light{@apply bg-[#F1FAFE] border-transparent text-[#096E9B];}.Gray-Outline{@apply bg-[#F4F4F6] border-[#BBBDC5] text-[#363C51];}.Primary-Outline{@apply bg-[#E5F3FF] border-[#3F71FF] text-[#1434CB];}.Error-Outline{@apply bg-[#FFF1F1] border-[#FA727A] text-[#CB1432];}.Warning-Outline{@apply bg-[#FFEED7] border-[#FBAE58] text-[#A04C02];}.Success-Outline{@apply bg-[#F1FCF3] border-[#57D175] text-[#1E7735];}.Purple-Outline{@apply bg-[#F6EAFD] border-[#CE8EF2] text-[#9130C0];}.Cyan-Outline{@apply bg-[#F1FAFE] border-[#3FC2F1] text-[#096E9B];}.Gray-Transparent{@apply bg-transparent border-[#BBBDC5] text-[#363C51];}.Primary-Transparent{@apply bg-transparent border-[#3F71FF] text-[#1434CB];}.Error-Transparent{@apply bg-transparent border-[#FA727A] text-[#CB1432];}.Warning-Transparent{@apply bg-transparent border-[#FBAE58] text-[#A04C02];}.Success-Transparent{@apply bg-transparent border-[#57D175] text-[#1E7735];}.Purple-Transparent{@apply bg-transparent border-[#CE8EF2] text-[#9130C0];}.Cyan-Transparent{@apply bg-transparent border-[#3FC2F1] text-[#096E9B];}\n"] }]
+        }], propDecorators: { label: [{
+                type: Input
+            }], variant: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], dot: [{
+                type: Input
+            }], removable: [{
+                type: Input
+            }], customClass: [{
+                type: Input
+            }], clicked: [{
+                type: Output
+            }] } });
+
+class Spinner {
+    size = 'md';
+    show = true;
+    color = 'text-blue-600'; // default
+    get classes() {
+        return `spinner ${this.size} ${this.color}`;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: Spinner, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: Spinner, isStandalone: true, selector: "brickclay-spinner", inputs: { size: "size", show: "show", color: "color" }, ngImport: i0, template: "@if (show) {\r\n<span [class]=\"classes\" role=\"status\" aria-label=\"loading\">\r\n  <span class=\"sr-only\">Loading...</span>\r\n</span>\r\n}\r\n", styles: [".spinner{@apply inline-block rounded-full animate-spin border-current border-t-transparent;border-style:solid}.spinner.xsm{@apply w-[15px] h-[15px] border-[1.5px];}.spinner.sm{@apply w-[25px] h-[25px] border-[2.34px];}.spinner.md{@apply w-[35px] h-[35px] border-[3.28px];}.spinner.lg{@apply w-[50px] h-[50px] border-[4.7px];}.spinner.xl{@apply w-[64px] h-[64px] border-[6px];}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: Spinner, decorators: [{
+            type: Component,
+            args: [{ selector: 'brickclay-spinner', standalone: true, imports: [CommonModule], template: "@if (show) {\r\n<span [class]=\"classes\" role=\"status\" aria-label=\"loading\">\r\n  <span class=\"sr-only\">Loading...</span>\r\n</span>\r\n}\r\n", styles: [".spinner{@apply inline-block rounded-full animate-spin border-current border-t-transparent;border-style:solid}.spinner.xsm{@apply w-[15px] h-[15px] border-[1.5px];}.spinner.sm{@apply w-[25px] h-[25px] border-[2.34px];}.spinner.md{@apply w-[35px] h-[35px] border-[3.28px];}.spinner.lg{@apply w-[50px] h-[50px] border-[4.7px];}.spinner.xl{@apply w-[64px] h-[64px] border-[6px];}\n"] }]
+        }], propDecorators: { size: [{
+                type: Input
+            }], show: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }] } });
+
+class UiButton {
+    // --- Inputs ---
+    // 1. Style & Size Inputs
+    variant = 'primary';
+    size = 'md';
+    // 2. Content Inputs
+    label = ''; // Pass text directly
+    leftIcon;
+    rightIcon;
+    iconAlt = 'icon';
+    // 3. State & Config
+    type = 'button';
+    loading = false;
+    disabled = false;
+    // 4. Customization (Optional overrides)
+    buttonClass = ''; // Append extra classes if needed
+    textClass = '';
+    spinnerClass = '';
+    // --- Outputs ---
+    clicked = new EventEmitter();
+    // --- Logic ---
+    onClick(event) {
+        if (!this.disabled && !this.loading) {
+            this.clicked.emit(true);
+        }
+    }
+    // Generate the class string based on Inputs
+    get buttonClasses() {
+        const variantClass = this.variant === 'primary' ? 'btn-primary' : 'btn-secondary';
+        // Combine: Variant + Size + Custom Classes
+        // Note: The size name (e.g., 'sm') matches your CSS class name exactly
+        return `btn ${variantClass} ${this.size} ${this.buttonClass}`;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: UiButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: UiButton, isStandalone: true, selector: "brickclay-button", inputs: { variant: "variant", size: "size", label: "label", leftIcon: "leftIcon", rightIcon: "rightIcon", iconAlt: "iconAlt", type: "type", loading: "loading", disabled: "disabled", buttonClass: "buttonClass", textClass: "textClass", spinnerClass: "spinnerClass" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<button\r\n  [attr.type]=\"type\"\r\n  [class]=\"buttonClasses\"\r\n  [disabled]=\"disabled || loading\"\r\n  (click)=\"onClick($event)\"\r\n>\r\n  @if (leftIcon) {\r\n    <img [src]=\"leftIcon\" [alt]=\"iconAlt\" class=\"icon shrink-0\" />\r\n  }\r\n\r\n      @if (label) {\r\n    <span [class]=\"textClass\">\r\n        {{ label }}\r\n    </span>\r\n      }\r\n    @if (loading) {\r\n      <span [class]=\"spinnerClass\" class=\"spinner\"></span>\r\n    }\r\n\r\n\r\n  @if (rightIcon) {\r\n    <img [src]=\"rightIcon\" [alt]=\"iconAlt\" class=\"icon shrink-0\" />\r\n  }\r\n\r\n</button>\r\n", styles: [".btn{@apply border rounded transition-colors duration-200 cursor-pointer;}.btn-primary{@apply font-medium flex justify-center gap-2 items-center bg-black text-white focus-visible:outline-2 focus-visible:outline-offset-[2.5px] focus-visible:outline-black active:bg-[#242424] disabled:opacity-90 disabled:cursor-not-allowed disabled:bg-[#242424];}.btn-primary.xxl{@apply gap-3;}.btn-secondary{@apply font-medium flex justify-center gap-2 items-center bg-white text-[#6B7080] focus-visible:outline-2 focus-visible:outline-offset-[3px] focus-visible:outline-[#F5F5FA] active:bg-[#F4F4F6] disabled:opacity-90 disabled:cursor-not-allowed disabled:bg-[#F4F4F6];}.xxsm{@apply px-2 py-1 text-xs leading-[18px];}.xsm{@apply px-3 py-2 text-xs leading-[18px];}.sm{@apply px-[14px] py-2 text-sm;}.md{@apply px-4 py-2.5 text-sm;}.lg{@apply px-[18px] py-2.5 text-base;}.xl{@apply px-5 py-3 text-base;}.xxl{@apply px-7 py-4 text-lg leading-[26px];}.xxsm .icon{@apply size-[11px];}.xsm .icon{@apply size-[15px];}.sm .icon,.md .icon,.lg .icon,.xl .icon{@apply size-4;}.xxl .icon{@apply size-5;}.spinner{@apply shrink-0 border-t-transparent rounded-full animate-spin border-current;}.xxsm .spinner{@apply size-[14px] border-[1.5px];}.xsm .spinner,.sm .spinner,.md .spinner,.lg .spinner,.xl .spinner{@apply size-[15px] border-[1.5px];}.xxl .spinner{@apply size-[24px] border-[2.34px];}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: UiButton, decorators: [{
+            type: Component,
+            args: [{ selector: 'brickclay-button', standalone: true, imports: [CommonModule], template: "<button\r\n  [attr.type]=\"type\"\r\n  [class]=\"buttonClasses\"\r\n  [disabled]=\"disabled || loading\"\r\n  (click)=\"onClick($event)\"\r\n>\r\n  @if (leftIcon) {\r\n    <img [src]=\"leftIcon\" [alt]=\"iconAlt\" class=\"icon shrink-0\" />\r\n  }\r\n\r\n      @if (label) {\r\n    <span [class]=\"textClass\">\r\n        {{ label }}\r\n    </span>\r\n      }\r\n    @if (loading) {\r\n      <span [class]=\"spinnerClass\" class=\"spinner\"></span>\r\n    }\r\n\r\n\r\n  @if (rightIcon) {\r\n    <img [src]=\"rightIcon\" [alt]=\"iconAlt\" class=\"icon shrink-0\" />\r\n  }\r\n\r\n</button>\r\n", styles: [".btn{@apply border rounded transition-colors duration-200 cursor-pointer;}.btn-primary{@apply font-medium flex justify-center gap-2 items-center bg-black text-white focus-visible:outline-2 focus-visible:outline-offset-[2.5px] focus-visible:outline-black active:bg-[#242424] disabled:opacity-90 disabled:cursor-not-allowed disabled:bg-[#242424];}.btn-primary.xxl{@apply gap-3;}.btn-secondary{@apply font-medium flex justify-center gap-2 items-center bg-white text-[#6B7080] focus-visible:outline-2 focus-visible:outline-offset-[3px] focus-visible:outline-[#F5F5FA] active:bg-[#F4F4F6] disabled:opacity-90 disabled:cursor-not-allowed disabled:bg-[#F4F4F6];}.xxsm{@apply px-2 py-1 text-xs leading-[18px];}.xsm{@apply px-3 py-2 text-xs leading-[18px];}.sm{@apply px-[14px] py-2 text-sm;}.md{@apply px-4 py-2.5 text-sm;}.lg{@apply px-[18px] py-2.5 text-base;}.xl{@apply px-5 py-3 text-base;}.xxl{@apply px-7 py-4 text-lg leading-[26px];}.xxsm .icon{@apply size-[11px];}.xsm .icon{@apply size-[15px];}.sm .icon,.md .icon,.lg .icon,.xl .icon{@apply size-4;}.xxl .icon{@apply size-5;}.spinner{@apply shrink-0 border-t-transparent rounded-full animate-spin border-current;}.xxsm .spinner{@apply size-[14px] border-[1.5px];}.xsm .spinner,.sm .spinner,.md .spinner,.lg .spinner,.xl .spinner{@apply size-[15px] border-[1.5px];}.xxl .spinner{@apply size-[24px] border-[2.34px];}\n"] }]
+        }], propDecorators: { variant: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], leftIcon: [{
+                type: Input
+            }], rightIcon: [{
+                type: Input
+            }], iconAlt: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], loading: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], buttonClass: [{
+                type: Input
+            }], textClass: [{
+                type: Input
+            }], spinnerClass: [{
+                type: Input
+            }], clicked: [{
+                type: Output
+            }] } });
+
+class UiIconButton {
+    // --- Inputs ---
+    icon; // Required icon path
+    alt = 'icon';
+    variant = 'primary';
+    size = 'md';
+    disabled = false;
+    // Custom classes
+    buttonClass = '';
+    clicked = new EventEmitter();
+    onClick(event) {
+        if (!this.disabled) {
+            this.clicked.emit(true);
+        }
+    }
+    get buttonClasses() {
+        // Maps inputs to CSS classes: .btn-icon .primary .md
+        return `btn-icon ${this.variant} ${this.size} ${this.buttonClass}`;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: UiIconButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: UiIconButton, isStandalone: true, selector: "brickclay-icon-button", inputs: { icon: "icon", alt: "alt", variant: "variant", size: "size", disabled: "disabled", buttonClass: "buttonClass" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<button\r\n  [class]=\"buttonClasses\"\r\n  [disabled]=\"disabled\"\r\n  (click)=\"onClick($event)\"\r\n>\r\n    <img [src]=\"icon\" [alt]=\"alt\" class=\"icon\" />\r\n</button>\r\n", styles: [".btn-icon{@apply rounded border flex items-center justify-center transition-all duration-200 cursor-pointer shrink-0 shadow;}.btn-icon.primary{@apply bg-black text-white focus-visible:outline-2 focus-visible:outline-offset-[2.5px] focus-visible:outline-black active:bg-[#242424] disabled:opacity-80 disabled:cursor-not-allowed;}.btn-icon.secondary{@apply bg-white border-[#E3E3E7] text-[#6B7080] focus-visible:outline-2 focus-visible:outline-offset-[3px] focus-visible:outline-[#F5F5FA] active:bg-[#F4F4F6] disabled:opacity-50 disabled:cursor-not-allowed disabled:bg-[#F4F4F6];}.btn-icon.xxsm,.btn-icon.xsm{@apply p-1.5;}.btn-icon.sm{@apply p-2;}.btn-icon.md{@apply p-2.5;}.btn-icon.lg{@apply p-3;}.btn-icon.xl{@apply p-[14px];}.btn-icon.xxl{@apply p-4;}.btn-icon.xxsm .icon{@apply size-[14px];}.btn-icon.xsm .icon{@apply size-[18px];}.btn-icon.sm .icon,.btn-icon.md .icon,.btn-icon.lg .icon,.btn-icon.xl .icon{@apply size-[20px];}.btn-icon.xxl .icon{@apply size-[26px];}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: UiIconButton, decorators: [{
+            type: Component,
+            args: [{ selector: 'brickclay-icon-button', standalone: true, imports: [CommonModule], template: "<button\r\n  [class]=\"buttonClasses\"\r\n  [disabled]=\"disabled\"\r\n  (click)=\"onClick($event)\"\r\n>\r\n    <img [src]=\"icon\" [alt]=\"alt\" class=\"icon\" />\r\n</button>\r\n", styles: [".btn-icon{@apply rounded border flex items-center justify-center transition-all duration-200 cursor-pointer shrink-0 shadow;}.btn-icon.primary{@apply bg-black text-white focus-visible:outline-2 focus-visible:outline-offset-[2.5px] focus-visible:outline-black active:bg-[#242424] disabled:opacity-80 disabled:cursor-not-allowed;}.btn-icon.secondary{@apply bg-white border-[#E3E3E7] text-[#6B7080] focus-visible:outline-2 focus-visible:outline-offset-[3px] focus-visible:outline-[#F5F5FA] active:bg-[#F4F4F6] disabled:opacity-50 disabled:cursor-not-allowed disabled:bg-[#F4F4F6];}.btn-icon.xxsm,.btn-icon.xsm{@apply p-1.5;}.btn-icon.sm{@apply p-2;}.btn-icon.md{@apply p-2.5;}.btn-icon.lg{@apply p-3;}.btn-icon.xl{@apply p-[14px];}.btn-icon.xxl{@apply p-4;}.btn-icon.xxsm .icon{@apply size-[14px];}.btn-icon.xsm .icon{@apply size-[18px];}.btn-icon.sm .icon,.btn-icon.md .icon,.btn-icon.lg .icon,.btn-icon.xl .icon{@apply size-[20px];}.btn-icon.xxl .icon{@apply size-[26px];}\n"] }]
+        }], propDecorators: { icon: [{
+                type: Input
+            }], alt: [{
+                type: Input
+            }], variant: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], buttonClass: [{
+                type: Input
+            }], clicked: [{
+                type: Output
+            }] } });
+
+class ButtonGroup {
+    // --- Inputs ---
+    items = [];
+    mode = 'single';
+    disabled = false;
+    // Holds the current selection.
+    // For 'single', it's a single value. For 'multiple', it's an array.
+    value = null;
+    // --- Outputs ---
+    valueChange = new EventEmitter();
+    // --- Logic ---
+    onItemClick(itemValue) {
+        if (this.disabled)
+            return;
+        if (this.mode === 'single') {
+            // 1. Single Mode: Just set the value
+            if (this.value !== itemValue) {
+                this.value = itemValue;
+                this.valueChange.emit(this.value);
+            }
+        }
+        else {
+            // 2. Multiple Mode: Toggle value in array
+            let currentValues = Array.isArray(this.value) ? [...this.value] : [];
+            if (currentValues.includes(itemValue)) {
+                // Remove if exists
+                currentValues = currentValues.filter(v => v !== itemValue);
+            }
+            else {
+                // Add if not exists
+                currentValues.push(itemValue);
+            }
+            this.value = currentValues;
+            this.valueChange.emit(this.value);
+        }
+    }
+    // Helper to check active state for UI
+    isActive(itemValue) {
+        if (this.mode === 'single') {
+            return this.value === itemValue;
+        }
+        else {
+            return Array.isArray(this.value) && this.value.includes(itemValue);
+        }
+    }
+    // --- Styles ---
+    get containerClass() {
+        return `group-container ${this.disabled ? 'disabled' : ''}`;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ButtonGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: ButtonGroup, isStandalone: true, selector: "brickclay-button-group", inputs: { items: "items", mode: "mode", disabled: "disabled", value: "value" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<div [class]=\"containerClass\">\r\n  @for (item of items; track item.value) {\r\n    <div\r\n      class=\"group-item\"\r\n      [class.active]=\"isActive(item.value)\"\r\n      [class.inactive]=\"!isActive(item.value)\"\r\n      (click)=\"onItemClick(item.value)\"\r\n    >\r\n      {{ item.label }}\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [".group-container{@apply inline-flex items-center border border-[#E1E3EA] bg-white rounded-md p-1 gap-2.5 select-none transition-all;}.group-item{@apply flex items-center justify-center font-medium rounded-md transition-all duration-200 cursor-pointer text-center relative;}.group-item.active{@apply bg-black text-white shadow-sm;}.group-item.inactive{@apply text-[#6B7080] hover:bg-gray-50;}.group-container .group-item{@apply px-4 py-[3px] text-[13px] leading-5;}.group-container.disabled .group-item{@apply opacity-50 cursor-not-allowed;}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ButtonGroup, decorators: [{
+            type: Component,
+            args: [{ selector: 'brickclay-button-group', standalone: true, imports: [CommonModule], template: "<div [class]=\"containerClass\">\r\n  @for (item of items; track item.value) {\r\n    <div\r\n      class=\"group-item\"\r\n      [class.active]=\"isActive(item.value)\"\r\n      [class.inactive]=\"!isActive(item.value)\"\r\n      (click)=\"onItemClick(item.value)\"\r\n    >\r\n      {{ item.label }}\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [".group-container{@apply inline-flex items-center border border-[#E1E3EA] bg-white rounded-md p-1 gap-2.5 select-none transition-all;}.group-item{@apply flex items-center justify-center font-medium rounded-md transition-all duration-200 cursor-pointer text-center relative;}.group-item.active{@apply bg-black text-white shadow-sm;}.group-item.inactive{@apply text-[#6B7080] hover:bg-gray-50;}.group-container .group-item{@apply px-4 py-[3px] text-[13px] leading-5;}.group-container.disabled .group-item{@apply opacity-50 cursor-not-allowed;}\n"] }]
+        }], propDecorators: { items: [{
+                type: Input
+            }], mode: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }] } });
+
 /*
  * Public API Surface of brickclay-lib
  */
@@ -2469,5 +2757,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { BrickclayIcons, BrickclayLib, CalendarManagerService, CalendarModule, CheckboxComponent, CustomCalendarComponent, RadioComponent, ScheduledDatePickerComponent, TimePickerComponent, ToggleComponent };
+export { BadgeComponent, BrickclayIcons, BrickclayLib, ButtonGroup, CalendarManagerService, CalendarModule, CheckboxComponent, CustomCalendarComponent, PillComponent, RadioComponent, ScheduledDatePickerComponent, Spinner, TimePickerComponent, ToggleComponent, UiButton, UiIconButton };
 //# sourceMappingURL=brickclay-org-ui.mjs.map