crdx-components 1.0.0 → 2.0.0

package/package.json

@@ -1,33 +1,38 @@
 {
   "name": "crdx-components",
-  "version": "1.0.0",
+  "version": "2.0.0",
   "description": "Credix shared UI component library",
-  "type": "module",
-  "scripts": {
-    "build": "ng-packagr -p ng-package.json",
-    "build:watch": "ng-packagr -p ng-package.json --watch",
-    "release": "npm run build && cd dist && npm publish"
-  },
   "peerDependencies": {
-    "@angular/animations": ">=21.0.0",
-    "@angular/cdk": ">=21.0.0",
-    "@angular/common": ">=21.0.0",
-    "@angular/core": ">=21.0.0",
-    "@angular/forms": ">=21.0.0",
-    "@angular/material": ">=21.0.0",
-    "@angular/platform-browser": ">=21.0.0",
-    "@angular/router": ">=21.0.0",
+    "@tokens_variables_credix/tokenized-styles": "^1.0.7",
+    "@angular/animations": ">=22.0.0",
+    "@angular/cdk": ">=22.0.0",
+    "@angular/common": ">=22.0.0",
+    "@angular/core": ">=22.0.0",
+    "@angular/forms": ">=22.0.0",
+    "@angular/material": ">=22.0.0",
+    "@angular/platform-browser": ">=22.0.0",
+    "@angular/router": ">=22.0.0",
     "@ngx-translate/core": ">=17.0.0",
     "rxjs": ">=7.0.0"
   },
-  "devDependencies": {
-    "@angular/compiler": "~21.0.0",
-    "@angular/compiler-cli": "~21.0.0",
-    "ng-packagr": "~21.0.0",
-    "tslib": "^2.3.0",
-    "typescript": "~5.9.2"
-  },
   "publishConfig": {
+    "access": "public",
     "registry": "https://registry.npmjs.org"
+  },
+  "module": "fesm2022/crdx-components.mjs",
+  "typings": "types/crdx-components.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./types/crdx-components.d.ts",
+      "default": "./fesm2022/crdx-components.mjs"
+    }
+  },
+  "sideEffects": false,
+  "type": "module",
+  "dependencies": {
+    "tslib": "^2.3.0"
   }
-}
+}

package/src/lib/styles/index.scss

@@ -9,6 +9,7 @@
 @use './overrides/mat-icon-button-overrides';
 @use './overrides/mat-list-overrides';
 @use './overrides/mat-checkbox-overrides';
+@use './overrides/mat-radio-overrides';
 @use './overrides/mat-button-overrides';
 @use './layout.scss' as *;
 @use './typography.scss' as *;

package/src/lib/styles/overrides/_index.scss

@@ -1,11 +1,9 @@
-/// Índice de overrides de Angular Material (M3).
-/// Referencia: global-material-theme.scss importa cada override directamente (no usa este índice).
-/// Mantener en sync con global-material-theme por si algo hace @use 'overrides'.
 @forward 'mat-slide-toggle-overrides';
 @forward 'mat-tabs-overrides';
 @forward 'mat-form-field-overrides';
 @forward 'mat-icon-button-overrides';
 @forward 'mat-list-overrides';
 @forward 'mat-checkbox-overrides';
+@forward 'mat-radio-overrides';
 @forward 'mat-button-overrides';
-@forward 'mat-table-overrides';
+@forward 'mat-table-overrides';

package/src/lib/styles/overrides/_mat-button-overrides.scss

@@ -1,16 +1,5 @@
 @use '@angular/material' as mat;
 
-/*
- * Button overrides (M3). Tokens: --buttons-wip-* (generate-tokens-resolved.cjs)
- *
- * PATRÓN de opacidades con Material:
- *   *-state-layer-color  → color BASE sin alpha (Material aplica el opacity encima)
- *   *-hover/focus/pressed-state-layer-opacity → opacidades M3 estándar (0.08 / 0.10 / 0.10)
- *   *-ripple-color       → token rgba directo SIN color-mix (ya tiene el alpha correcto)
- *
- * MAL: state-layer-color: rgba(67,71,73,0.08) + hover-opacity: 0.08 = visual 0.0064 (invisible)
- * BIEN: state-layer-color: #434749           + hover-opacity: 0.08 = visual 0.08
- */
 html {
   @include mat.button-overrides((
     // ── Filled ─────────────────────────────────────────────────────────────

package/src/lib/styles/overrides/_mat-checkbox-overrides.scss

@@ -22,8 +22,8 @@ html {
     state-layer-size: calc(var(--checkboxes-enabled-state-layer-checkbox-state-layer-size, 40) * 1px),
     disabled-label-color: var(--md-sys-color-on-surface),
     disabled-selected-checkmark-color: var(--checkboxes-disabled-icon-checkbox-selected-disabled-icon-color, #f7fafc),
-    disabled-selected-icon-color: var(--checkboxes-disabled-icon-checkbox-disabled-selected-icon-color, #e42313),
-    disabled-unselected-icon-color: var(--checkboxes-disabled-icon-checkbox-disabled-unselected-icon-color, #e42313),
+    //disabled-selected-icon-color: var(--checkboxes-disabled-icon-checkbox-disabled-selected-icon-color, #e42313),
+   // disabled-unselected-icon-color: var(--checkboxes-disabled-icon-checkbox-disabled-unselected-icon-color, #e42313),
     label-text-color: var(--md-sys-color-on-surface),
     selected-checkmark-color: var(--checkboxes-enabled-icon-checkbox-selected-icon-color, #ffffff),
     selected-focus-icon-color: #181c1e,

package/src/lib/styles/overrides/_mat-radio-overrides.scss

@@ -0,0 +1,40 @@
+@use '@angular/material' as mat;
+
+html {
+  @include mat.radio-overrides((
+    // ── Ícono seleccionado ──────────────────────────────────────────────────
+    selected-icon-color:         var(--radio-button-enabled-icon-radio-button-icon-selected-color, #181c1e),
+    selected-hover-icon-color:   var(--radio-button-hovered-icon-radio-button-selected-hover-icon-color, #181c1e),
+    selected-focus-icon-color:   var(--radio-button-focused-icon-radio-button-selected-hover-icon-color, #181c1e),
+    selected-pressed-icon-color: var(--radio-button-pressed-ripple-icon-radio-button-selected-pressed-icon-color, #181c1e),
+
+    // ── Ícono no seleccionado ───────────────────────────────────────────────
+    unselected-icon-color:         var(--radio-button-enabled-icon-radio-button-icon-unselected-color, #434749),
+    unselected-hover-icon-color:   var(--radio-button-hovered-icon-radio-button-unselected-hover-icon-color, #181c1e),
+    unselected-focus-icon-color:   var(--radio-button-focused-icon-radio-button-unselected-focus-icon-color, #181c1e),
+    unselected-pressed-icon-color: var(--radio-button-pressed-ripple-icon-radio-button-unselected-pressed-icon-color, #181c1e),
+
+    // ── Disabled ────────────────────────────────────────────────────────────
+    disabled-selected-icon-color:    var(--radio-button-disabled-icon-radio-button-disabled-selected-icon-color, #181c1e),
+    disabled-selected-icon-opacity:  0.38,
+    disabled-unselected-icon-color:  var(--radio-button-disabled-icon-radio-button-disabled-unselected-icon-color, #181c1e),
+    disabled-unselected-icon-opacity: 0.38,
+
+    // ── Ripple / state layer ────────────────────────────────────────────────
+    ripple-color:         var(--radio-button-hovered-state-layer-radio-button-unselected-hover-state-layer-color, rgba(24, 28, 30, 0.08)),
+    checked-ripple-color: var(--radio-button-hovered-state-layer-radio-button-selected-hover-state-layer-color, rgba(24, 28, 30, 0.08)),
+
+    // ── Tipografía del label ────────────────────────────────────────────────
+    label-text-color:       var(--md-sys-color-on-surface, #181c1e),
+    disabled-label-color:   rgba(24, 28, 30, 0.38),
+    label-text-font:        var(--typescale-body-large-font, 'Heebo'),
+    label-text-line-height: calc(var(--typescale-body-large-line-height, 24) * 1px),
+    label-text-size:        calc(var(--typescale-body-large-size, 16) * 1px),
+    label-text-tracking:    calc(var(--typescale-body-large-tracking, 0.5) * 1px),
+    label-text-weight:      var(--typescale-body-large-weight, 400),
+
+    // ── Tamaño del state layer ──────────────────────────────────────────────
+    state-layer-size:    calc(var(--radio-button-enabled-state-layer-radio-button-state-layer-size, 40) * 1px),
+    touch-target-display: block,
+  ));
+}