@dnd-mapp/shared-ui 0.1.0-rc.1 → 1.0.0

package/README.md

@@ -15,6 +15,18 @@ The official Angular component library for the **D&D Mapp** platform. This libra
 
 ---
 
+## 🧱 UI Components
+
+A collection of high-performance, accessible components. Click on a component name to view its specific documentation, API, and usage examples.
+
+| Component                              | Status | Description                                                         |
+|----------------------------------------|--------|---------------------------------------------------------------------|
+| **[Button](src/lib/button/README.md)** | ✅      | Primary action component with support for variants (base, primary). |
+
+> **[!TIP]** ✅ Ready for Production | 🚧 In Development | 🧪 Experimental
+
+---
+
 ## 🚀 Installation
 
 Install the package via pnpm (recommended) or your preferred package manager:

package/fesm2022/dnd-mapp-shared-ui.mjs

@@ -1,19 +1,42 @@
 import * as i0 from '@angular/core';
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { input, computed, Component } from '@angular/core';
 
-class SharedUi {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: SharedUi, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.3", type: SharedUi, isStandalone: true, selector: "dma-shared-ui", ngImport: i0, template: `<p>shared-ui works!</p>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+const ButtonColors = {
+    PRIMARY: 'primary',
+    BASE: 'base',
+};
+const DEFAULT_BUTTON_COLOR = ButtonColors.BASE;
+function buttonColorAttribute(value) {
+    return Object.values(ButtonColors).find((color) => value === color) ?? DEFAULT_BUTTON_COLOR;
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: SharedUi, decorators: [{
+
+class ButtonComponent {
+    color = input(DEFAULT_BUTTON_COLOR, { ...(ngDevMode ? { debugName: "color" } : {}), transform: buttonColorAttribute, alias: 'dma-button' });
+    isBase = computed(() => this.color() === ButtonColors.BASE, ...(ngDevMode ? [{ debugName: "isBase" }] : []));
+    isPrimary = computed(() => this.color() === ButtonColors.PRIMARY, ...(ngDevMode ? [{ debugName: "isPrimary" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.4", type: ButtonComponent, isStandalone: true, selector: "button[dma-button]", inputs: { color: { classPropertyName: "color", publicName: "dma-button", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "'font-semibold cursor-pointer py-2 px-4 rounded-md'", "class.text-neutral-900": "isBase()", "class.text-neutral-100": "isPrimary()", "class.bg-neutral-100": "isBase()", "class.hover:bg-neutral-200": "isBase()", "class.active:bg-neutral-300": "isBase()", "class.bg-blue-400": "isPrimary()", "class.hover:bg-blue-500": "isPrimary()", "class.active:bg-blue-600": "isPrimary()" } }, ngImport: i0, template: `<ng-content />`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: ButtonComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'dma-shared-ui',
-                    template: `<p>shared-ui works!</p>`,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    // eslint-disable-next-line @angular-eslint/component-selector
+                    selector: 'button[dma-button]',
+                    template: `<ng-content />`,
+                    host: {
+                        '[class]': `'font-semibold cursor-pointer py-2 px-4 rounded-md'`,
+                        '[class.text-neutral-900]': 'isBase()',
+                        '[class.text-neutral-100]': 'isPrimary()',
+                        '[class.bg-neutral-100]': 'isBase()',
+                        '[class.hover:bg-neutral-200]': 'isBase()',
+                        '[class.active:bg-neutral-300]': 'isBase()',
+                        '[class.bg-blue-400]': 'isPrimary()',
+                        '[class.hover:bg-blue-500]': 'isPrimary()',
+                        '[class.active:bg-blue-600]': 'isPrimary()',
+                    },
                     imports: [],
                 }]
-        }] });
+        }], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "dma-button", required: false }] }] } });
 
 /**
  * Public API Surface of @dnd-mapp/shared-ui
@@ -23,5 +46,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { SharedUi };
+export { ButtonColors, ButtonComponent, DEFAULT_BUTTON_COLOR, buttonColorAttribute };
 //# sourceMappingURL=dnd-mapp-shared-ui.mjs.map

package/fesm2022/dnd-mapp-shared-ui.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"dnd-mapp-shared-ui.mjs","sources":["../../../projects/shared-ui/src/lib/shared-ui.ts","../../../projects/shared-ui/src/public-api.ts","../../../projects/shared-ui/src/dnd-mapp-shared-ui.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component } from '@angular/core';\n\n@Component({\n    selector: 'dma-shared-ui',\n    template: `<p>shared-ui works!</p>`,\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    imports: [],\n})\nexport class SharedUi {}\n","/**\n * Public API Surface of @dnd-mapp/shared-ui\n */\nexport * from './lib';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;MAQa,QAAQ,CAAA;uGAAR,QAAQ,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAR,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,QAAQ,yEAJP,CAAA,uBAAA,CAAyB,EAAA,QAAA,EAAA,IAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FAI1B,QAAQ,EAAA,UAAA,EAAA,CAAA;kBANpB,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACP,oBAAA,QAAQ,EAAE,eAAe;AACzB,oBAAA,QAAQ,EAAE,CAAA,uBAAA,CAAyB;oBACnC,eAAe,EAAE,uBAAuB,CAAC,MAAM;AAC/C,oBAAA,OAAO,EAAE,EAAE;AACd,iBAAA;;;ACPD;;AAEG;;ACFH;;AAEG;;;;"}
+{"version":3,"file":"dnd-mapp-shared-ui.mjs","sources":["../../../projects/shared-ui/src/lib/button/button-color.ts","../../../projects/shared-ui/src/lib/button/button.component.ts","../../../projects/shared-ui/src/public-api.ts","../../../projects/shared-ui/src/dnd-mapp-shared-ui.ts"],"sourcesContent":["import { AttributeInput } from '../attribute-input';\n\nexport const ButtonColors = {\n    PRIMARY: 'primary',\n    BASE: 'base',\n} as const;\n\nexport type ButtonColor = (typeof ButtonColors)[keyof typeof ButtonColors];\n\nexport const DEFAULT_BUTTON_COLOR: ButtonColor = ButtonColors.BASE;\n\nexport function buttonColorAttribute(value: AttributeInput<ButtonColor>) {\n    return Object.values(ButtonColors).find((color) => value === color) ?? DEFAULT_BUTTON_COLOR;\n}\n","import { Component, computed, input } from '@angular/core';\nimport { buttonColorAttribute, ButtonColors, DEFAULT_BUTTON_COLOR } from './button-color';\n\n@Component({\n    // eslint-disable-next-line @angular-eslint/component-selector\n    selector: 'button[dma-button]',\n    template: `<ng-content />`,\n    host: {\n        '[class]': `'font-semibold cursor-pointer py-2 px-4 rounded-md'`,\n        '[class.text-neutral-900]': 'isBase()',\n        '[class.text-neutral-100]': 'isPrimary()',\n        '[class.bg-neutral-100]': 'isBase()',\n        '[class.hover:bg-neutral-200]': 'isBase()',\n        '[class.active:bg-neutral-300]': 'isBase()',\n        '[class.bg-blue-400]': 'isPrimary()',\n        '[class.hover:bg-blue-500]': 'isPrimary()',\n        '[class.active:bg-blue-600]': 'isPrimary()',\n    },\n    imports: [],\n})\nexport class ButtonComponent {\n    public readonly color = input(DEFAULT_BUTTON_COLOR, { transform: buttonColorAttribute, alias: 'dma-button' });\n\n    protected readonly isBase = computed(() => this.color() === ButtonColors.BASE);\n\n    protected readonly isPrimary = computed(() => this.color() === ButtonColors.PRIMARY);\n}\n","/**\n * Public API Surface of @dnd-mapp/shared-ui\n */\nexport * from './lib';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;AAEO,MAAM,YAAY,GAAG;AACxB,IAAA,OAAO,EAAE,SAAS;AAClB,IAAA,IAAI,EAAE,MAAM;;AAKT,MAAM,oBAAoB,GAAgB,YAAY,CAAC;AAExD,SAAU,oBAAoB,CAAC,KAAkC,EAAA;IACnE,OAAO,MAAM,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC,IAAI,CAAC,CAAC,KAAK,KAAK,KAAK,KAAK,KAAK,CAAC,IAAI,oBAAoB;AAC/F;;MCOa,eAAe,CAAA;AACR,IAAA,KAAK,GAAG,KAAK,CAAC,oBAAoB,EAAA,EAAA,IAAA,SAAA,GAAA,EAAA,SAAA,EAAA,OAAA,EAAA,GAAA,EAAA,CAAA,EAAI,SAAS,EAAE,oBAAoB,EAAE,KAAK,EAAE,YAAY,GAAG;AAE1F,IAAA,MAAM,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,KAAK,EAAE,KAAK,YAAY,CAAC,IAAI,kDAAC;AAE3D,IAAA,SAAS,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,KAAK,EAAE,KAAK,YAAY,CAAC,OAAO,qDAAC;uGAL3E,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,knBAdd,CAAA,cAAA,CAAgB,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA;;2FAcjB,eAAe,EAAA,UAAA,EAAA,CAAA;kBAjB3B,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;;AAEP,oBAAA,QAAQ,EAAE,oBAAoB;AAC9B,oBAAA,QAAQ,EAAE,CAAA,cAAA,CAAgB;AAC1B,oBAAA,IAAI,EAAE;AACF,wBAAA,SAAS,EAAE,CAAA,mDAAA,CAAqD;AAChE,wBAAA,0BAA0B,EAAE,UAAU;AACtC,wBAAA,0BAA0B,EAAE,aAAa;AACzC,wBAAA,wBAAwB,EAAE,UAAU;AACpC,wBAAA,8BAA8B,EAAE,UAAU;AAC1C,wBAAA,+BAA+B,EAAE,UAAU;AAC3C,wBAAA,qBAAqB,EAAE,aAAa;AACpC,wBAAA,2BAA2B,EAAE,aAAa;AAC1C,wBAAA,4BAA4B,EAAE,aAAa;AAC9C,qBAAA;AACD,oBAAA,OAAO,EAAE,EAAE;AACd,iBAAA;;;ACnBD;;AAEG;;ACFH;;AAEG;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dnd-mapp/shared-ui",
-  "version": "0.1.0-rc.1",
+  "version": "1.0.0",
   "description": "Official Angular component library for the D&D Mapp platform.",
   "author": "NoNamer777",
   "license": "UNLICENSED",

package/src/lib/button/README.md

@@ -0,0 +1,117 @@
+[← Back to Library Overview](../../../README.md#-ui-components)
+
+---
+
+# Button Component (`dma-button`)
+
+The `ButtonComponent` is a versatile, high-performance UI element built with **Angular 21 signals** and **Tailwind CSS v4**. It is designed as an attribute selector for standard HTML `<button>` elements, ensuring native accessibility and browser behavior while applying the **D&D Mapp** design system.
+
+## 🏰 Overview
+
+- **Type**: Standalone Component.
+- **Selector**: `button[dma-button]`
+- **Styling**: Tailwind CSS v4 (via Host Bindings).
+- **Logic**: 100% Signal-based (Inputs & Computed state).
+
+---
+
+## 🚀 Usage
+
+### 1. Import
+
+Add `ButtonComponent` to your standalone component's `imports` array:
+
+```ts
+import { Component } from '@angular/core';
+import { ButtonComponent } from '@dnd-mapp/shared-ui';
+
+@Component({
+    selector: 'app-encounter-action',
+    template: `
+        <!-- Defaults to 'base' -->
+        <button dma-button>Base Action</button>
+        
+        <!-- Explicit 'primary' -->
+        <button dma-button="primary">Roll Initiative</button>
+    `,
+    imports: [ButtonComponent]
+})
+export class EncounterActionComponent {}
+```
+
+### 2. Styles Requirement
+
+Ensure Tailwind CSS v4 is configured in your project to process the utility classes defined in the component host metadata.
+
+---
+
+## 🎨 API Reference
+
+### Inputs
+
+| Input   | Attribute    | Type           | Default  | Description                                |
+|---------|--------------|----------------|----------|--------------------------------------------|
+| `color` | `dma-button` | `ButtonColors` | `'base'` | Determines the visual style of the button. |
+
+### Color Variants
+
+The component leverages `computed` signals to toggle Tailwind classes dynamically:
+
+1. **Base (`base`)**
+   - **Trigger**: `<button dma-button>` or `<button dma-button="base">`
+   - **Styles**: Light neutral background (`bg-neutral-100`), dark text (`text-neutral-900`).
+   - **States**: Subtle darkening on hover/active.
+
+2. **Primary (`primary`)**
+   - **Trigger**: `<button dma-button="primary">`
+   - **Styles**: Blue background (`bg-blue-400`), light text (`text-neutral-100`).
+   - **States**: Vibrant blue scaling (`hover:bg-blue-500`, `active:bg-blue-600`).
+
+---
+
+## 🛠 Technical Details
+
+### Signal Implementation
+
+The component uses modern Angular Signals for reactive state management:
+
+- **`input()`**: Uses a `transform` function (`buttonColorAttribute`) to sanitize input values and an `alias` to support the shorthand attribute syntax.
+- **`computed()`**: Derive boolean states (`isBase`, `isPrimary`) for highly efficient change detection.
+
+### Tailwind Integration
+
+Styles are applied directly to the host element using high-performance class bindings:
+
+```ts
+host: {
+    '[class]': `'font-semibold cursor-pointer py-2 px-4 rounded-md'`,
+    '[class.bg-blue-400]': 'isPrimary()',
+    // ... other conditional classes
+}
+```
+
+### Attribute Shorthand & Transformation
+
+The `dma-button` alias allows the attribute itself to serve as the input. If an empty string or invalid value is provided, the `buttonColorAttribute` transformer ensures it safely falls back to `DEFAULT_BUTTON_COLOR`.
+
+---
+
+## 🧪 Examples
+
+### Primary Action (Natural 20 Style)
+
+```html
+<button dma-button="primary" (click)="rollDice()">Attack!</button>
+```
+
+### Secondary / Cancel Action
+
+```html
+<button dma-button (click)="closeModal()">Dismiss</button>
+```
+
+---
+
+## 📜 License
+
+This component is part of the `@dnd-mapp/shared-ui` proprietary library. Refer to the root [LICENSE](https://github.com/dnd-mapp/shared-ui/blob/main/LICENSE) for usage restrictions.

package/types/dnd-mapp-shared-ui.d.ts

@@ -1,8 +1,23 @@
-import * as i0 from '@angular/core';
+import * as _angular_core from '@angular/core';
+import * as _dnd_mapp_shared_ui from '@dnd-mapp/shared-ui';
 
-declare class SharedUi {
-    static ɵfac: i0.ɵɵFactoryDeclaration<SharedUi, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SharedUi, "dma-shared-ui", never, {}, {}, never, never, true, never>;
+type AttributeInput<T> = T | '';
+
+declare const ButtonColors: {
+    readonly PRIMARY: "primary";
+    readonly BASE: "base";
+};
+type ButtonColor = (typeof ButtonColors)[keyof typeof ButtonColors];
+declare const DEFAULT_BUTTON_COLOR: ButtonColor;
+declare function buttonColorAttribute(value: AttributeInput<ButtonColor>): ButtonColor;
+
+declare class ButtonComponent {
+    readonly color: _angular_core.InputSignalWithTransform<_dnd_mapp_shared_ui.ButtonColor, AttributeInput<_dnd_mapp_shared_ui.ButtonColor>>;
+    protected readonly isBase: _angular_core.Signal<boolean>;
+    protected readonly isPrimary: _angular_core.Signal<boolean>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ButtonComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ButtonComponent, "button[dma-button]", never, { "color": { "alias": "dma-button"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
-export { SharedUi };
+export { ButtonColors, ButtonComponent, DEFAULT_BUTTON_COLOR, buttonColorAttribute };
+export type { ButtonColor };