@aaamb/ngx-design-system 0.1.0

package/README.md

@@ -0,0 +1,59 @@
+# ngx-aaamb-design-system
+
+Angular component library for AAAMB projects.
+
+## Installation
+
+```bash
+npm install ngx-aaamb-design-system
+```
+
+### Peer Dependencies
+
+This library requires Angular 21+:
+
+```bash
+npm install @angular/common@^21.0.0 @angular/core@^21.0.0
+```
+
+## Usage
+
+Import components directly into your standalone components or modules:
+
+```typescript
+import { ButtonComponent } from 'ngx-aaamb-design-system';
+
+@Component({
+  imports: [ButtonComponent],
+  ...
+})
+export class MyComponent {}
+```
+
+## Available Components
+
+- **ButtonComponent** - Configurable button with variant and size support
+
+## Development
+
+### Storybook
+
+```bash
+npm run storybook
+```
+
+### Build the library
+
+```bash
+npm run build
+```
+
+### Run tests
+
+```bash
+npm test
+```
+
+## License
+
+BUSL-1.1 - See [LICENSE](LICENSE) for details.

package/fesm2022/aaamb-ngx-design-system.mjs

@@ -0,0 +1,38 @@
+import * as i0 from '@angular/core';
+import { input, computed, Component } from '@angular/core';
+
+const VARIANT_STRUCTURE = {
+    primary: 'font-poppins font-semibold text-base leading-3 rounded-[44px] px-16 py-4',
+    secondary: 'font-poppins font-normal text-lg leading-6 rounded-[5px] px-3 py-1',
+};
+const VARIANT_COLOR = {
+    primary: {
+        green: 'bg-green-base text-neutral-light-text hover:bg-green-hover active:bg-green-active disabled:bg-neutral-disabled-bg disabled:text-neutral-disabled-text',
+    },
+    secondary: {
+        green: 'bg-green-base text-neutral-light-text hover:bg-green-hover active:bg-green-active disabled:bg-neutral-disabled-bg disabled:text-neutral-disabled-text',
+    },
+};
+class ButtonComponent {
+    variant = input('primary', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    color = input('green', ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+    hostClasses = computed(() => `inline-flex items-center justify-center cursor-pointer transition-colors disabled:pointer-events-none disabled:cursor-not-allowed ${VARIANT_STRUCTURE[this.variant()]} ${VARIANT_COLOR[this.variant()][this.color()]}`, ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.5", type: ButtonComponent, isStandalone: true, selector: "button[aaamb-button]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()" } }, ngImport: i0, template: `<ng-content />`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ButtonComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'button[aaamb-button]',
+                    standalone: true,
+                    host: { '[class]': 'hostClasses()' },
+                    template: `<ng-content />`,
+                }]
+        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ButtonComponent };
+//# sourceMappingURL=aaamb-ngx-design-system.mjs.map

package/fesm2022/aaamb-ngx-design-system.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"aaamb-ngx-design-system.mjs","sources":["../../../src/components/button/button.component.ts","../../../src/aaamb-ngx-design-system.ts"],"sourcesContent":["import { Component, computed, input } from '@angular/core';\nimport { ButtonVariant, ButtonColor } from '../../core/types';\n\nconst VARIANT_STRUCTURE: Record<ButtonVariant, string> = {\n  primary: 'font-poppins font-semibold text-base leading-3 rounded-[44px] px-16 py-4',\n  secondary: 'font-poppins font-normal text-lg leading-6 rounded-[5px] px-3 py-1',\n};\n\nconst VARIANT_COLOR: Record<ButtonVariant, Record<ButtonColor, string>> = {\n  primary: {\n    green:\n      'bg-green-base text-neutral-light-text hover:bg-green-hover active:bg-green-active disabled:bg-neutral-disabled-bg disabled:text-neutral-disabled-text',\n  },\n  secondary: {\n    green:\n      'bg-green-base text-neutral-light-text hover:bg-green-hover active:bg-green-active disabled:bg-neutral-disabled-bg disabled:text-neutral-disabled-text',\n  },\n};\n\n@Component({\n  selector: 'button[aaamb-button]',\n  standalone: true,\n  host: { '[class]': 'hostClasses()' },\n  template: `<ng-content />`,\n})\nexport class ButtonComponent {\n  variant = input<ButtonVariant>('primary');\n  color = input<ButtonColor>('green');\n\n  hostClasses = computed(\n    () =>\n      `inline-flex items-center justify-center cursor-pointer transition-colors disabled:pointer-events-none disabled:cursor-not-allowed ${VARIANT_STRUCTURE[this.variant()]} ${VARIANT_COLOR[this.variant()][this.color()]}`,\n  );\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;AAGA,MAAM,iBAAiB,GAAkC;AACvD,IAAA,OAAO,EAAE,0EAA0E;AACnF,IAAA,SAAS,EAAE,oEAAoE;CAChF;AAED,MAAM,aAAa,GAAuD;AACxE,IAAA,OAAO,EAAE;AACP,QAAA,KAAK,EACH,uJAAuJ;AAC1J,KAAA;AACD,IAAA,SAAS,EAAE;AACT,QAAA,KAAK,EACH,uJAAuJ;AAC1J,KAAA;CACF;MAQY,eAAe,CAAA;AAC1B,IAAA,OAAO,GAAG,KAAK,CAAgB,SAAS,8EAAC;AACzC,IAAA,KAAK,GAAG,KAAK,CAAc,OAAO,4EAAC;AAEnC,IAAA,WAAW,GAAG,QAAQ,CACpB,MACE,CAAA,kIAAA,EAAqI,iBAAiB,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC,CAAA,CAAA,EAAI,aAAa,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC,CAAA,CAAE,kFAC1N;uGAPU,eAAe,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAf,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,eAAe,sYAFhB,CAAA,cAAA,CAAgB,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA;;2FAEf,eAAe,EAAA,UAAA,EAAA,CAAA;kBAN3B,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,sBAAsB;AAChC,oBAAA,UAAU,EAAE,IAAI;AAChB,oBAAA,IAAI,EAAE,EAAE,SAAS,EAAE,eAAe,EAAE;AACpC,oBAAA,QAAQ,EAAE,CAAA,cAAA,CAAgB;AAC3B,iBAAA;;;ACxBD;;AAEG;;;;"}

package/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "@aaamb/ngx-design-system",
+  "version": "0.1.0",
+  "description": "Angular component library for AAAMB projects",
+  "author": "aaamb tech",
+  "license": "BUSL-1.1",
+  "keywords": [
+    "angular",
+    "design-system",
+    "components",
+    "aaamb"
+  ],
+  "private": false,
+  "sideEffects": false,
+  "peerDependencies": {
+    "@angular/common": "^21.0.0",
+    "@angular/core": "^21.0.0"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "module": "fesm2022/aaamb-ngx-design-system.mjs",
+  "typings": "types/aaamb-ngx-design-system.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./types/aaamb-ngx-design-system.d.ts",
+      "default": "./fesm2022/aaamb-ngx-design-system.mjs"
+    }
+  }
+}

package/styles/theme.css

@@ -0,0 +1,25 @@
+@font-face {
+  font-family: 'Poppins';
+  src: url('./fonts/Poppins-Regular.ttf') format('truetype');
+  font-weight: 400;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Poppins';
+  src: url('./fonts/Poppins-SemiBold.ttf') format('truetype');
+  font-weight: 600;
+  font-display: swap;
+}
+
+@theme {
+  --font-poppins: 'Poppins', sans-serif;
+
+  --color-green-base: #014744;
+  --color-green-hover: #0B645C;
+  --color-green-active: #2D484C;
+
+  --color-neutral-disabled-bg: #E7E7E7;
+  --color-neutral-disabled-text: #B0B0B0;
+  --color-neutral-light-text: #F6F6F6;
+}

package/types/aaamb-ngx-design-system.d.ts

@@ -0,0 +1,15 @@
+import * as _angular_core from '@angular/core';
+
+type ButtonVariant = 'primary' | 'secondary';
+type ButtonColor = 'green';
+
+declare class ButtonComponent {
+    variant: _angular_core.InputSignal<ButtonVariant>;
+    color: _angular_core.InputSignal<"green">;
+    hostClasses: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ButtonComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ButtonComponent, "button[aaamb-button]", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+export { ButtonComponent };
+export type { ButtonColor, ButtonVariant };