@africanies/angular-web-sdk 0.1.2 → 0.1.4

package/libs/africanies-core/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@africanies/africanies-core",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "peerDependencies": {
     "@angular/common": "^22.0.0",
     "@angular/core": "^22.0.0",
     "@angular/router": "^22.0.0",
     "rxjs": "^7.8.0",
-    "@africanies/africanies-models": "^0.0.2",
-    "@africanies/africanies-storage": "^0.0.1"
+    "@africanies/africanies-models": ">=0.0.2 <0.1.0",
+    "@africanies/africanies-storage": ">=0.0.1 <0.1.0"
   },
   "sideEffects": false,
   "publishConfig": {

package/libs/africanies-core/src/lib/payment-method/payment-method.mapper.spec.ts

@@ -76,6 +76,21 @@ describe('payment-method.mapper', () => {
     );
   });
 
+  it('unwraps paginated nested currencies', () => {
+    const mapped = mapPaymentMethod({
+      id: 4,
+      name: 'Squad',
+      model: 'App\\Models\\Squad',
+      currencies: {
+        current_page: 1,
+        data: WIRE_SQUAD.currencies,
+        total: 1,
+      },
+    });
+    expect(mapped.currencies).toHaveLength(1);
+    expect(mapped.currencies[0]?.id).toBe(5);
+  });
+
   it('toPaymentMethodFlag01 serializes booleans and wire flags', () => {
     expect(toPaymentMethodFlag01(true)).toBe('1');
     expect(toPaymentMethodFlag01(false)).toBe('0');

package/libs/africanies-core/src/lib/payment-method/payment-method.mapper.ts

@@ -15,7 +15,6 @@ import {
   asNumber,
   asRecord,
   asString,
-  mapArray,
   mapList,
   toFlag01,
 } from '../http/wire';
@@ -101,7 +100,7 @@ export function mapPaymentMethod(raw: unknown): PaymentMethodModel {
     deleted_at: asNullableString(record['deleted_at'] ?? record['deletedAt']),
     created_at: asNullableString(record['created_at'] ?? record['createdAt']),
     updated_at: asNullableString(record['updated_at'] ?? record['updatedAt']),
-    currencies: mapArray(record['currencies'], mapPaymentMethodCurrency),
+    currencies: mapList(record['currencies'], mapPaymentMethodCurrency),
   };
 }
 

package/libs/africanies-theme/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@africanies/africanies-theme",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "peerDependencies": {
     "@angular/common": "^22.0.0",
     "@angular/core": "^22.0.0",
-    "@africanies/africanies-core": "^0.0.2",
-    "@africanies/africanies-storage": "^0.0.1"
+    "@africanies/africanies-core": ">=0.0.2 <0.1.0",
+    "@africanies/africanies-storage": ">=0.0.1 <0.1.0"
   },
   "sideEffects": false,
   "publishConfig": {

package/libs/africanies-theme/src/lib/mode-color.safelist.ts

@@ -11,10 +11,12 @@
  * SFN (export / green):
  * text-export bg-export bg-export-subtle bg-export-light border-export
  * hover:bg-export-light hover:bg-export-subtle dark:bg-export/15 dark:hover:bg-export/15
+ * dark:bg-[color-mix(in_srgb,#1cbd5d_15%,#212529)]
  *
  * STN (import / orange):
  * text-import bg-import bg-import-subtle bg-import-light border-import
  * hover:bg-import-light hover:bg-import-subtle dark:bg-import/15 dark:hover:bg-import/15
+ * dark:bg-[color-mix(in_srgb,#f08829_15%,#212529)]
  */
 export const MODE_COLOR_SAFELIST = [
   'text-export',
@@ -26,6 +28,7 @@ export const MODE_COLOR_SAFELIST = [
   'hover:bg-export-subtle',
   'dark:bg-export/15',
   'dark:hover:bg-export/15',
+  'dark:bg-[color-mix(in_srgb,#1cbd5d_15%,#212529)]',
   'text-import',
   'bg-import',
   'bg-import-subtle',
@@ -35,4 +38,5 @@ export const MODE_COLOR_SAFELIST = [
   'hover:bg-import-subtle',
   'dark:bg-import/15',
   'dark:hover:bg-import/15',
+  'dark:bg-[color-mix(in_srgb,#f08829_15%,#212529)]',
 ] as const;

package/libs/africanies-theme/src/lib/mode-color.service.ts

@@ -29,8 +29,15 @@ export interface ModeColorClasses {
   ghostPrimary: string;
   /**
    * Soft highlight for selected / active rows (works in dark mode).
+   * Dark uses a translucent tint — fine over solid surfaces, not for
+   * sticky overlays (see {@link softSolid}).
    */
   soft: string;
+  /**
+   * Opaque soft fill — same tint as {@link soft}, but dark mode mixes into
+   * ink so scrolled content cannot show through (sticky table headers/cells).
+   */
+  softSolid: string;
   /**
    * Soft hover highlight for menus and lists.
    */
@@ -74,6 +81,8 @@ export class ModeColorService {
         ghostPrimary:
           'bg-transparent text-export border-transparent hover:bg-export-subtle dark:hover:bg-export/15',
         soft: 'bg-export-subtle dark:bg-export/15',
+        softSolid:
+          'bg-export-subtle dark:bg-[color-mix(in_srgb,#1cbd5d_15%,#212529)]',
         softHover: 'hover:bg-export-subtle dark:hover:bg-export/15',
       };
     }
@@ -87,6 +96,8 @@ export class ModeColorService {
       ghostPrimary:
         'bg-transparent text-import border-transparent hover:bg-import-subtle dark:hover:bg-import/15',
       soft: 'bg-import-subtle dark:bg-import/15',
+      softSolid:
+        'bg-import-subtle dark:bg-[color-mix(in_srgb,#f08829_15%,#212529)]',
       softHover: 'hover:bg-import-subtle dark:hover:bg-import/15',
     };
   });

package/libs/africanies-theme/tailwind-preset.cjs

@@ -69,6 +69,11 @@ function africaniesInteractiveCursorPlugin({ addBase }) {
  * (`white` / `ink-950`) and `-webkit-text-fill-color` keeps body text on
  * `ink` / white. `.dark` matches `ThemeService` (`class` on `<html>`).
  *
+ * WHY one selector per `addBase` key: joining autofill selectors with commas
+ * under a single `.dark ${list}` key only scopes the first selector — the rest
+ * leak into light mode. WHY no `color` in the long transition: delaying color
+ * freezes text when the user toggles light/dark.
+ *
  * @param {import('tailwindcss/types/config').PluginAPI} api
  */
 function africaniesAutofillPlugin({ addBase }) {
@@ -81,21 +86,24 @@ function africaniesAutofillPlugin({ addBase }) {
     'textarea:-webkit-autofill:hover',
     'textarea:-webkit-autofill:focus',
     'textarea:-webkit-autofill:active',
-  ].join(', ');
+  ];
 
-  addBase({
-    [autofillSelectors]: {
+  /** @type {Record<string, Record<string, string>>} */
+  const rules = {};
+  for (const selector of autofillSelectors) {
+    rules[selector] = {
       WebkitTextFillColor: '#212529',
       caretColor: '#212529',
       boxShadow: '0 0 0 1000px #ffffff inset',
       transition: 'background-color 99999s ease-in-out 0s',
-    },
-    [`.dark ${autofillSelectors}`]: {
+    };
+    rules[`.dark ${selector}`] = {
       WebkitTextFillColor: '#ffffff',
       caretColor: '#ffffff',
       boxShadow: '0 0 0 1000px #272729 inset',
-    },
-  });
+    };
+  }
+  addBase(rules);
 }
 
 /**

package/libs/africanies-ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@africanies/africanies-ui",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "peerDependencies": {
     "@angular/common": "^22.0.0",
     "@angular/core": "^22.0.0",
@@ -8,10 +8,10 @@
     "@angular/forms": "^22.0.0",
     "@angular/router": "^22.0.0",
     "rxjs": "^7.8.0",
-    "@africanies/africanies-models": "^0.0.2",
-    "@africanies/africanies-icons": "^0.0.1",
-    "@africanies/africanies-core": "^0.0.2",
-    "@africanies/africanies-theme": "^0.0.1"
+    "@africanies/africanies-models": ">=0.0.2 <0.1.0",
+    "@africanies/africanies-icons": ">=0.0.1 <0.1.0",
+    "@africanies/africanies-core": ">=0.0.2 <0.1.0",
+    "@africanies/africanies-theme": ">=0.0.1 <0.1.0"
   },
   "sideEffects": false,
   "publishConfig": {

package/libs/africanies-ui/src/index.ts

@@ -32,6 +32,12 @@ export {
   type LoadingStateMode,
 } from './lib/feedback';
 
+// Accordion (expandable bordered panels)
+export {
+  AccordionComponent,
+  type AccordionSize,
+} from './lib/accordion';
+
 // Alert (inline banners — distinct from ErrorState / Toast)
 export { AlertComponent, type AlertVariant } from './lib/alert';
 

package/libs/africanies-ui/src/lib/accordion/accordion.component.ts

@@ -0,0 +1,135 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  input,
+  model,
+} from '@angular/core';
+
+import { AfricaniesIconComponent } from '@africanies/africanies-icons';
+
+/**
+ * Visual density for {@link AccordionComponent}.
+ *
+ * - `md` — page sections (pay review, top-level cards)
+ * - `sm` — nested panels (e.g. export boxes inside a manifest box)
+ */
+export type AccordionSize = 'md' | 'sm';
+
+/**
+ * Bordered expandable panel with animated fold — the pattern used on
+ * Manifest detail and Make Payment review.
+ *
+ * Parent owns open state via {@link open} (`model()` / `[(open)]`).
+ *
+ * @example
+ * ```html
+ * <africanies-accordion
+ *   title="Customer Information"
+ *   [open]="isOpen('customer')"
+ *   (openChange)="onOpenChange('customer', $event)"
+ * >
+ *   <dl>…</dl>
+ * </africanies-accordion>
+ * ```
+ */
+@Component({
+  selector: 'africanies-accordion',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [AfricaniesIconComponent],
+  host: {
+    class: 'block',
+  },
+  styles: `
+    .africanies-accordion-fold {
+      display: grid;
+      grid-template-rows: 0fr;
+      transition: grid-template-rows 200ms ease;
+    }
+
+    .africanies-accordion-fold-open {
+      grid-template-rows: 1fr;
+    }
+
+    .africanies-accordion-fold-body {
+      min-height: 0;
+      overflow: hidden;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .africanies-accordion-fold {
+        transition: none;
+      }
+    }
+  `,
+  template: `
+    <div [class]="shellClass()">
+      <button
+        type="button"
+        [class]="triggerClass()"
+        [attr.aria-expanded]="open()"
+        (click)="toggle()"
+      >
+        <span class="min-w-0 flex-1 font-medium">
+          <ng-content select="[africaniesAccordionTitle]" />
+          @if (title()) {
+            {{ title() }}
+          }
+        </span>
+        <africanies-icon
+          name="chevron-down"
+          class="shrink-0 transition-transform duration-200"
+          [class.rotate-180]="open()"
+          [size]="chevronSize()"
+        />
+      </button>
+      <div
+        class="africanies-accordion-fold"
+        [class.africanies-accordion-fold-open]="open()"
+      >
+        <div class="africanies-accordion-fold-body">
+          <div [class]="bodyClass()">
+            <ng-content />
+          </div>
+        </div>
+      </div>
+    </div>
+  `,
+})
+export class AccordionComponent {
+  /** Plain-text header. Prefer projected `[africaniesAccordionTitle]` for rich titles. */
+  readonly title = input('');
+
+  /** Whether the panel body is expanded. */
+  readonly open = model(false);
+
+  /** Padding / chevron density. */
+  readonly size = input<AccordionSize>('md');
+
+  protected readonly chevronSize = computed(() =>
+    this.size() === 'sm' ? 14 : 16,
+  );
+
+  protected readonly shellClass = computed(() =>
+    this.size() === 'sm'
+      ? 'rounded-lg border border-border dark:border-white/10'
+      : 'rounded-xl border border-border dark:border-white/10',
+  );
+
+  protected readonly triggerClass = computed(() =>
+    this.size() === 'sm'
+      ? 'flex w-full items-center justify-between gap-3 px-3 py-2 text-left text-ink dark:text-white'
+      : 'flex w-full items-center justify-between gap-3 px-4 py-3 text-left text-ink dark:text-white',
+  );
+
+  protected readonly bodyClass = computed(() =>
+    this.size() === 'sm'
+      ? 'border-t border-border px-3 py-2 dark:border-white/10'
+      : 'border-t border-border px-4 py-3 dark:border-white/10',
+  );
+
+  protected toggle(): void {
+    this.open.update((value) => !value);
+  }
+}

package/libs/africanies-ui/src/lib/accordion/index.ts

@@ -0,0 +1,7 @@
+/**
+ * Expandable bordered panels (`africanies-accordion`).
+ */
+export {
+  AccordionComponent,
+  type AccordionSize,
+} from './accordion.component';

package/libs/africanies-ui/src/lib/action-menu/action-menu.component.ts

@@ -10,14 +10,21 @@ import {
   computed,
   contentChild,
   ElementRef,
+  inject,
   input,
   signal,
   viewChild,
 } from '@angular/core';
+import { Router } from '@angular/router';
 
 import { AfricaniesIconComponent } from '@africanies/africanies-icons';
 
 import { ButtonComponent } from '../button/button.component';
+import {
+  isModifiedClick,
+  navigateNavItem,
+  navItemHref,
+} from '../navigation/navigate-nav-item';
 import { ActionMenuTriggerDirective } from './action-menu-trigger.directive';
 import type { AfricaniesMenuItem } from './menu-item';
 
@@ -53,6 +60,9 @@ const MENU_PANEL_POSITIONS: ConnectedPosition[] = [
  * clipped by table `overflow`. Default trigger is a ghost ellipsis button;
  * project a custom control with {@link ActionMenuTriggerDirective}.
  *
+ * Items with {@link AfricaniesMenuItem.routerLink} render as anchors so users
+ * can right-click / modified-click to open in a new tab.
+ *
  * @example
  * ```html
  * <!-- Default icon trigger (table row) -->
@@ -68,7 +78,12 @@ const MENU_PANEL_POSITIONS: ConnectedPosition[] = [
  * ```ts
  * rowActions(row: Shipment): AfricaniesMenuItem[] {
  *   return [
- *     { label: 'Open', icon: 'eye', onClick: () => this.open(row) },
+ *     {
+ *       label: 'Open',
+ *       icon: 'eye',
+ *       routerLink: ['/shipments', row.id],
+ *       onClick: () => this.open(row),
+ *     },
  *     { label: 'Edit', icon: 'edit', onClick: () => this.edit(row) },
  *     {
  *       label: 'Delete',
@@ -156,26 +171,49 @@ const MENU_PANEL_POSITIONS: ConnectedPosition[] = [
               role="separator"
             ></div>
           }
-          <button
-            type="button"
-            role="menuitem"
-            [id]="itemDomId(i)"
-            [class]="itemClass(item, i)"
-            [disabled]="!!item.disabled"
-            (click)="selectItem(item)"
-            (mouseenter)="activeIndex.set(i)"
-          >
-            @if (item.icon; as icon) {
-              <africanies-icon [name]="icon" [size]="16" class="shrink-0" />
-            }
-            <span class="min-w-0 flex-1 truncate text-left">{{ item.label }}</span>
-          </button>
+          @if (item.routerLink !== null && item.routerLink !== undefined) {
+            <a
+              role="menuitem"
+              [id]="itemDomId(i)"
+              [class]="itemClass(item, i)"
+              [attr.href]="item.disabled ? null : hrefFor(item)"
+              [attr.aria-disabled]="item.disabled ? true : null"
+              (click)="onRoutedItemClick($event, item)"
+              (mouseenter)="activeIndex.set(i)"
+            >
+              @if (item.icon; as icon) {
+                <africanies-icon [name]="icon" [size]="16" class="shrink-0" />
+              }
+              <span class="min-w-0 flex-1 truncate text-left">{{
+                item.label
+              }}</span>
+            </a>
+          } @else {
+            <button
+              type="button"
+              role="menuitem"
+              [id]="itemDomId(i)"
+              [class]="itemClass(item, i)"
+              [disabled]="!!item.disabled"
+              (click)="selectItem(item)"
+              (mouseenter)="activeIndex.set(i)"
+            >
+              @if (item.icon; as icon) {
+                <africanies-icon [name]="icon" [size]="16" class="shrink-0" />
+              }
+              <span class="min-w-0 flex-1 truncate text-left">{{
+                item.label
+              }}</span>
+            </button>
+          }
         }
       </div>
     </ng-template>
   `,
 })
 export class ActionMenuComponent {
+  private readonly router = inject(Router);
+
   protected readonly panelPositions = MENU_PANEL_POSITIONS;
 
   private readonly panelRef = viewChild<ElementRef<HTMLElement>>('panel');
@@ -206,7 +244,7 @@ export class ActionMenuComponent {
   protected itemClass(item: AfricaniesMenuItem, index: number): string {
     const active = this.activeIndex() === index;
     const base =
-      'flex w-full cursor-pointer items-center gap-2 px-3 py-2 text-body-sm transition-colors ' +
+      'flex w-full cursor-pointer items-center gap-2 px-3 py-2 text-body-sm no-underline transition-colors ' +
       'disabled:cursor-not-allowed disabled:opacity-50 ' +
       'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-ink';
     if (item.danger) {
@@ -225,6 +263,10 @@ export class ActionMenuComponent {
     );
   }
 
+  protected hrefFor(item: AfricaniesMenuItem): string | null {
+    return navItemHref(this.router, item);
+  }
+
   protected onTriggerClick(event: MouseEvent): void {
     event.preventDefault();
     event.stopPropagation();
@@ -304,11 +346,36 @@ export class ActionMenuComponent {
     this.open.set(false);
   }
 
+  /**
+   * Primary click on a routed item: in-app activate via {@link onClick} or
+   * router. Modified clicks keep native link behaviour (new tab).
+   */
+  protected onRoutedItemClick(event: MouseEvent, item: AfricaniesMenuItem): void {
+    if (item.disabled) {
+      event.preventDefault();
+      return;
+    }
+    if (isModifiedClick(event)) {
+      this.close();
+      return;
+    }
+    event.preventDefault();
+    this.activateItem(item);
+  }
+
   protected selectItem(item: AfricaniesMenuItem): void {
     if (item.disabled) {
       return;
     }
-    item.onClick();
+    this.activateItem(item);
+  }
+
+  private activateItem(item: AfricaniesMenuItem): void {
+    if (item.onClick) {
+      item.onClick();
+    } else if (item.routerLink != null) {
+      void navigateNavItem(this.router, item, false);
+    }
     this.close();
   }
 

package/libs/africanies-ui/src/lib/action-menu/menu-item.ts

@@ -2,14 +2,31 @@ import type { IconName } from '@africanies/africanies-icons';
 
 /**
  * Option row for {@link ActionMenuComponent}.
+ *
+ * Set optional {@link routerLink} (and `queryParams` / `fragment`) so the row
+ * renders as an `<a href>` — right-click / ⌘-click can open in a new tab.
+ * Primary click still runs {@link onClick} when provided; otherwise the menu
+ * navigates via the router (same pattern as tabs / segment).
  */
 export interface AfricaniesMenuItem {
   /** Visible label. */
   label: string;
-  /** Invoked when the user activates this row (then the menu closes). */
-  onClick: () => void;
+  /**
+   * Invoked on primary activation (then the menu closes).
+   * Optional when {@link routerLink} is set — the menu navigates instead.
+   */
+  onClick?: () => void;
   /** Optional leading icon from `@africanies/africanies-icons`. */
   icon?: IconName;
+  /**
+   * Optional Angular router link (`string` or commands array).
+   * When set, the row is an `<a>` with a real `href` for open-in-new-tab.
+   */
+  routerLink?: string | readonly unknown[];
+  /** Optional query params passed with {@link routerLink}. */
+  queryParams?: Record<string, unknown>;
+  /** Optional URL fragment with {@link routerLink}. */
+  fragment?: string;
   /** When true, the item cannot be activated. */
   disabled?: boolean;
   /** Destructive styling (e.g. Delete). */