@joanroucoux/cairn-ui 0.2.0 → 0.3.0

package/types/joanroucoux-cairn-ui.d.ts

@@ -1,5 +1,69 @@
 import * as _angular_core from '@angular/core';
-import { Signal, ElementRef } from '@angular/core';
+import { InjectionToken, Signal, ElementRef } from '@angular/core';
+
+/** App-wide "amounts are hidden" state. Defaults to never masked; the app overrides it. */
+declare const UI_AMOUNT_MASKED: InjectionToken<Signal<boolean>>;
+/** Available figure styles. `AmountNumeric` is derived from this tuple. */
+declare const AMOUNT_NUMERICS: readonly ["tabular", "proportional"];
+type AmountNumeric = (typeof AMOUNT_NUMERICS)[number];
+/** Available masking behaviors. `AmountMasking` is derived from this tuple. */
+declare const AMOUNT_MASKINGS: readonly ["dots", "hide"];
+type AmountMasking = (typeof AMOUNT_MASKINGS)[number];
+/**
+ * A number or an amount of money, formatted for the locale and masked when the app hides amounts.
+ *
+ * @example
+ * <ui-amount [value]="total" currency="EUR" numeric="proportional" />
+ * <ui-amount [value]="dayChange" currency="EUR" signed whenMasked="hide" />
+ */
+declare class UiAmount {
+    #private;
+    readonly value: _angular_core.InputSignal<number | null | undefined>;
+    readonly currency: _angular_core.InputSignal<string | undefined>;
+    readonly locale: _angular_core.InputSignal<string>;
+    readonly signed: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly fractionDigits: _angular_core.InputSignal<number>;
+    readonly numeric: _angular_core.InputSignal<"tabular" | "proportional">;
+    readonly whenMasked: _angular_core.InputSignal<"dots" | "hide">;
+    protected readonly hidden: Signal<boolean>;
+    protected readonly text: Signal<string>;
+    protected readonly classes: Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<UiAmount, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<UiAmount, "ui-amount", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "currency": { "alias": "currency"; "required": false; "isSignal": true; }; "locale": { "alias": "locale"; "required": false; "isSignal": true; }; "signed": { "alias": "signed"; "required": false; "isSignal": true; }; "fractionDigits": { "alias": "fractionDigits"; "required": false; "isSignal": true; }; "numeric": { "alias": "numeric"; "required": false; "isSignal": true; }; "whenMasked": { "alias": "whenMasked"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+type AmountFormatOptions = {
+    locale: string;
+    currency?: string;
+    signed?: boolean;
+    fractionDigits?: number;
+};
+/** Formats a number or an amount for the locale, with a missing value as an em dash and masking behind four bullets. */
+declare function formatAmount(value: number | null | undefined, options: AmountFormatOptions, masked?: boolean): string;
+
+/** Available async block states. `AsyncState` is derived from this tuple. */
+declare const ASYNC_STATES: readonly ["loading", "error", "empty", "ready"];
+type AsyncState = (typeof ASYNC_STATES)[number];
+/**
+ * The three states of a block that depends on a service call, next to the ready content.
+ *
+ * @example
+ * <ui-async [state]="totalState()" errorTitle="Total could not be loaded" errorMessage="The server did not answer." retryLabel="Retry" (retry)="reload()">
+ *   <span asyncLoading><ui-skeleton shape="figure" /></span>
+ *   <span asyncEmpty>Add a holding to see your total.</span>
+ *   <span>{{ total() }}</span>
+ * </ui-async>
+ */
+declare class UiAsync {
+    readonly state: _angular_core.InputSignal<"loading" | "error" | "empty" | "ready">;
+    readonly errorTitle: _angular_core.InputSignal<string | undefined>;
+    readonly errorMessage: _angular_core.InputSignal<string | undefined>;
+    readonly retryLabel: _angular_core.InputSignal<string | undefined>;
+    readonly retry: _angular_core.OutputEmitterRef<void>;
+    protected readonly retryButtonClasses = "mt-2 relative inline-flex items-center justify-center gap-2 rounded-control font-medium whitespace-nowrap cursor-pointer select-none touch-manipulation transition-[transform,background-color,opacity] duration-(--duration-press) ease-out active:scale-(--press-scale) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ring) min-h-(--row-min) px-4 text-label bg-(--card) text-(--foreground) shadow-[inset_0_0_0_1px_var(--border)] hover:bg-(--glow)";
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<UiAsync, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<UiAsync, "ui-async", never, { "state": { "alias": "state"; "required": true; "isSignal": true; }; "errorTitle": { "alias": "errorTitle"; "required": false; "isSignal": true; }; "errorMessage": { "alias": "errorMessage"; "required": false; "isSignal": true; }; "retryLabel": { "alias": "retryLabel"; "required": false; "isSignal": true; }; }, { "retry": "retry"; }, never, ["[asyncLoading]", "[asyncEmpty]", "*"], true, never>;
+}
 
 /** Available avatar sizes. `AvatarSize` is derived from this tuple. */
 declare const AVATAR_SIZES: readonly ["sm", "md"];
@@ -29,7 +93,7 @@ type BadgeVariant = (typeof BADGE_VARIANTS)[number];
  * <ui-badge>ETF</ui-badge>
  */
 declare class UiBadge {
-    readonly variant: _angular_core.InputSignal<"outline" | "neutral">;
+    readonly variant: _angular_core.InputSignal<"neutral" | "outline">;
     protected readonly classes: _angular_core.Signal<string>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<UiBadge, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<UiBadge, "ui-badge", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
@@ -42,23 +106,14 @@ type ButtonVariant = (typeof BUTTON_VARIANTS)[number];
 declare const BUTTON_SIZES: readonly ["md", "lg", "xl", "icon"];
 type ButtonSize = (typeof BUTTON_SIZES)[number];
 /**
- * Styled native button. Applied as an attribute so the host keeps every native
- * button behavior (type, disabled, form submission, accessibility) for free.
- *
- * Also applies to an anchor, for the one case where the action really is a navigation:
- * a download the browser has to perform itself.
- *
- * `size="icon"` has no visible text: give it an `aria-label`.
- *
- * A `loading` button shows a spinner before its label and swallows clicks, so a slow first
- * response cannot turn into a double submission.
+ * Styled native button or anchor, applied as an attribute so the host keeps every native behavior.
  *
  * @example
  * <button ui-button variant="destructive">Delete</button>
  * <button ui-button size="icon" variant="ghost" aria-label="More actions">...</button>
  */
 declare class UiButton {
-    readonly variant: _angular_core.InputSignal<"primary" | "outline" | "ghost" | "destructive">;
+    readonly variant: _angular_core.InputSignal<"outline" | "primary" | "ghost" | "destructive">;
     readonly size: _angular_core.InputSignal<"md" | "lg" | "xl" | "icon">;
     readonly loading: _angular_core.InputSignalWithTransform<boolean, unknown>;
     protected readonly classes: _angular_core.Signal<string>;
@@ -131,8 +186,8 @@ declare class UiDelta {
 declare const DIALOG_WIDTHS: readonly ["md", "lg"];
 type DialogWidth = (typeof DIALOG_WIDTHS)[number];
 /**
- * Modal dialog on the native <dialog>: focus trap, focus return, Escape and the top layer
- * come from the platform. Two projection slots - the body, and [dialogActions] for the footer.
+ * Modal dialog on the native <dialog>: a sheet rising from the bottom under `64rem`, centered
+ * above it. Two projection slots - the body, and [dialogActions] for the footer.
  *
  * @example
  * <ui-dialog heading="Delete this holding?" [open]="confirming()" (dismissed)="confirming.set(false)">
@@ -145,7 +200,7 @@ declare class UiDialog {
     readonly heading: _angular_core.InputSignal<string>;
     readonly description: _angular_core.InputSignal<string | undefined>;
     readonly width: _angular_core.InputSignal<"md" | "lg">;
-    readonly open: _angular_core.InputSignal<boolean>;
+    readonly open: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly dismissed: _angular_core.OutputEmitterRef<void>;
     protected readonly headingId: string;
     protected readonly descriptionId: string;
@@ -184,7 +239,6 @@ declare class UiField {
     readonly labelHidden: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly hint: _angular_core.InputSignal<string | undefined>;
     readonly error: _angular_core.InputSignal<string | undefined>;
-    /** Unit shown inside the control's right edge, such as `EUR` or `parts`. Not part of the control's value. */
     readonly unit: _angular_core.InputSignal<string | undefined>;
     protected readonly hintId: string;
     protected readonly errorId: string;
@@ -240,6 +294,61 @@ declare class UiTextarea implements UiControl {
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<UiTextarea, "textarea[uiTextarea]", never, { "errors": { "alias": "errors"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
+/**
+ * One action of a `ui-menu`; `destructive` paints it in `--negative`.
+ *
+ * @example
+ * <button uiMenuItem destructive (click)="remove()">Delete the line</button>
+ */
+declare class UiMenuItem {
+    #private;
+    readonly destructive: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    protected readonly classes: _angular_core.Signal<string>;
+    focus(): void;
+    hasFocus(): boolean;
+    protected onClick(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<UiMenuItem, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<UiMenuItem, "button[uiMenuItem]", never, { "destructive": { "alias": "destructive"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+/**
+ * Secondary actions menu, opened from its trigger through the native Popover API.
+ *
+ * @example
+ * <button ui-button size="icon" aria-label="More" [uiMenuTrigger]="menu">...</button>
+ * <ui-menu #menu label="Line actions">
+ *   <button uiMenuItem (click)="edit()">Edit</button>
+ *   <button uiMenuItem destructive (click)="remove()">Delete the line</button>
+ * </ui-menu>
+ */
+declare class UiMenu {
+    #private;
+    readonly label: _angular_core.InputSignal<string>;
+    readonly menuId: string;
+    readonly isOpen: _angular_core.WritableSignal<boolean>;
+    protected readonly classes = "m-0 min-w-44 p-1 rounded-container bg-(--elevated) shadow-[0_8px_24px_rgb(0_0_0/0.16)] text-(--foreground) transition-[opacity,transform,overlay,display] transition-discrete duration-(--duration-fast) ease-out starting:open:opacity-0 starting:open:scale-(--enter-scale) opacity-0 scale-(--enter-scale) open:opacity-100 open:scale-100";
+    protected readonly items: _angular_core.Signal<readonly UiMenuItem[]>;
+    open(trigger: HTMLElement): void;
+    close(): void;
+    protected onToggle(event: Event): void;
+    protected onKeydown(event: KeyboardEvent): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<UiMenu, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<UiMenu, "ui-menu", never, { "label": { "alias": "label"; "required": true; "isSignal": true; }; }, {}, ["items"], ["*"], true, never>;
+}
+/**
+ * Opens a `ui-menu` from a trigger element and wires `aria-haspopup`, `aria-expanded` and
+ * `aria-controls` on it.
+ *
+ * @example
+ * <button ui-button size="icon" aria-label="More" [uiMenuTrigger]="menu">...</button>
+ */
+declare class UiMenuTrigger {
+    #private;
+    readonly uiMenuTrigger: _angular_core.InputSignal<UiMenu>;
+    protected toggle(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<UiMenuTrigger, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<UiMenuTrigger, "[uiMenuTrigger]", never, { "uiMenuTrigger": { "alias": "uiMenuTrigger"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
 /** Ramp step used to paint the fill. `MeterTone` is derived from this tuple. */
 declare const METER_TONES: readonly [1, 2, 3, 4, 5, 6];
 type MeterTone = (typeof METER_TONES)[number];
@@ -254,13 +363,44 @@ declare class UiMeter {
     readonly value: _angular_core.InputSignal<number>;
     readonly label: _angular_core.InputSignal<string>;
     readonly valueText: _angular_core.InputSignal<string>;
-    readonly tone: _angular_core.InputSignal<4 | 1 | 2 | 3 | 5 | 6>;
+    readonly tone: _angular_core.InputSignal<2 | 1 | 3 | 4 | 5 | 6>;
     protected readonly percent: _angular_core.Signal<number>;
     protected readonly fillClasses: _angular_core.Signal<string>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<UiMeter, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<UiMeter, "ui-meter", never, { "value": { "alias": "value"; "required": true; "isSignal": true; }; "label": { "alias": "label"; "required": true; "isSignal": true; }; "valueText": { "alias": "valueText"; "required": true; "isSignal": true; }; "tone": { "alias": "tone"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
+/**
+ * One destination of the sidebar navigation (Portfolio, Holdings, Allocation, Accounts).
+ *
+ * @example
+ * <a ui-nav-item [active]="url === '/'" routerLink="/">
+ *   <lucide-icon navIcon name="house" />
+ *   Portfolio
+ * </a>
+ */
+declare class UiNavItem {
+    readonly active: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    protected readonly classes: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<UiNavItem, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<UiNavItem, "a[ui-nav-item]", never, { "active": { "alias": "active"; "required": false; "isSignal": true; }; }, {}, never, ["[navIcon]", "*"], true, never>;
+}
+
+/**
+ * Clickable row of a list: a holding, an envelope, an account.
+ *
+ * @example
+ * <a ui-row [selected]="holding.id === openId()" [routerLink]="['/holdings', holding.id]">
+ *   {{ holding.name }}
+ * </a>
+ */
+declare class UiRow {
+    readonly selected: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    protected readonly classes: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<UiRow, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<UiRow, "a[ui-row], button[ui-row]", never, { "selected": { "alias": "selected"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
 type SegmentedOption = {
     value: string;
     label: string;
@@ -306,19 +446,15 @@ declare class UiSelect implements UiControl {
 }
 
 /**
- * Decorative placeholder for content that is still loading, at the shape of the content it stands
- * in for. Deliberately hidden from assistive technology: the calling screen keeps its own
- * `role="status"` sentence.
- *
- * Pulses opacity from 1 to 0.45 and back over `--pulse-duration`, which `tokens.css` sets to `0ms`
- * under `prefers-reduced-motion: reduce`: the pulse stops there with no branching in this component.
+ * Decorative, pulsing placeholder for content that is still loading, at the shape of the content
+ * it stands in for.
  *
  * @example
  * <ui-skeleton shape="figure" />
  * <ui-skeleton [lines]="3" />
  */
 declare class UiSkeleton {
-    readonly shape: _angular_core.InputSignal<"text" | "figure" | "row" | "chart" | "ring">;
+    readonly shape: _angular_core.InputSignal<"figure" | "text" | "row" | "chart" | "ring">;
     readonly lines: _angular_core.InputSignal<number>;
     readonly height: _angular_core.InputSignal<number>;
     protected readonly animation = "cairn-pulse var(--pulse-duration) var(--ease-out) infinite alternate";
@@ -354,6 +490,18 @@ declare class UiStat {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<UiStat, "ui-stat", never, { "label": { "alias": "label"; "required": true; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, {}, never, ["[uiStatValue]", "[uiStatDelta]", "[uiStatCaption]", "[uiStatAside]"], true, never>;
 }
 
+/**
+ * Native checkbox styled as an iOS-style switch, exposed to assistive technology as `role="switch"`.
+ *
+ * @example
+ * <input type="checkbox" uiSwitch [checked]="hidden()" (change)="toggle()" aria-label="Hide amounts" />
+ */
+declare class UiSwitch {
+    protected readonly classes = "relative shrink-0 w-[51px] h-[31px] appearance-none cursor-pointer rounded-pill bg-(--muted) checked:bg-(--primary) transition-colors duration-(--duration-fast) ease-out disabled:pointer-events-none disabled:opacity-40 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ring) before:absolute before:inset-x-0 before:top-1/2 before:-translate-y-1/2 before:h-(--row-min) before:content-[''] after:absolute after:top-0.5 after:left-0.5 after:size-[27px] after:rounded-pill after:bg-(--card) after:shadow-[0_1px_3px_rgb(0_0_0/0.2)] after:transition-transform after:duration-(--duration-fast) after:ease-out after:content-[''] checked:after:translate-x-[20px]";
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<UiSwitch, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<UiSwitch, "input[type=checkbox][uiSwitch]", never, {}, {}, never, never, true, never>;
+}
+
 /** Breakpoints a secondary column can be held back until. */
 declare const CELL_BREAKPOINTS: readonly ["md", "lg"];
 type CellBreakpoint = (typeof CELL_BREAKPOINTS)[number];
@@ -399,5 +547,30 @@ declare class UiTd {
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<UiTd, "td[uiTd]", never, { "numeric": { "alias": "numeric"; "required": false; "isSignal": true; }; "from": { "alias": "from"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
-export { AVATAR_SIZES, BADGE_VARIANTS, BUTTON_SIZES, BUTTON_VARIANTS, CARD_PADDINGS, CARD_VARIANTS, CELL_BREAKPOINTS, CONTROL_SIZES, DELTA_EMPHASES, DIALOG_WIDTHS, METER_TONES, STAT_SIZES, UiAvatar, UiBadge, UiButton, UiCard, UiDelta, UiDialog, UiField, UiInput, UiMeter, UiSegmented, UiSelect, UiSkeleton, UiStat, UiTable, UiTd, UiTextarea, UiTh, UiTr };
-export type { AvatarSize, BadgeVariant, ButtonSize, ButtonVariant, CardPadding, CardVariant, CellBreakpoint, ControlSize, DeltaEmphasis, DialogWidth, MeterTone, SegmentedOption, StatSize, UiControlError };
+/**
+ * Bottom navigation bar for iPhone: 52px of tabs plus the home indicator's safe area.
+ *
+ * @example
+ * <nav ui-tab-bar>
+ *   <a ui-tab [active]="url === '/'" routerLink="/"><lucide-icon tabIcon name="house" />Portfolio</a>
+ * </nav>
+ */
+declare class UiTabBar {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<UiTabBar, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<UiTabBar, "nav[ui-tab-bar]", never, {}, {}, never, ["*"], true, never>;
+}
+/**
+ * One destination of `ui-tab-bar`.
+ *
+ * @example
+ * <a ui-tab active routerLink="/"><lucide-icon tabIcon name="house" />Portfolio</a>
+ */
+declare class UiTab {
+    readonly active: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    protected readonly classes: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<UiTab, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<UiTab, "a[ui-tab]", never, { "active": { "alias": "active"; "required": false; "isSignal": true; }; }, {}, never, ["[tabIcon]", "*"], true, never>;
+}
+
+export { AMOUNT_MASKINGS, AMOUNT_NUMERICS, ASYNC_STATES, AVATAR_SIZES, BADGE_VARIANTS, BUTTON_SIZES, BUTTON_VARIANTS, CARD_PADDINGS, CARD_VARIANTS, CELL_BREAKPOINTS, CONTROL_SIZES, DELTA_EMPHASES, DIALOG_WIDTHS, METER_TONES, STAT_SIZES, UI_AMOUNT_MASKED, UiAmount, UiAsync, UiAvatar, UiBadge, UiButton, UiCard, UiDelta, UiDialog, UiField, UiInput, UiMenu, UiMenuItem, UiMenuTrigger, UiMeter, UiNavItem, UiRow, UiSegmented, UiSelect, UiSkeleton, UiStat, UiSwitch, UiTab, UiTabBar, UiTable, UiTd, UiTextarea, UiTh, UiTr, formatAmount };
+export type { AmountFormatOptions, AmountMasking, AmountNumeric, AsyncState, AvatarSize, BadgeVariant, ButtonSize, ButtonVariant, CardPadding, CardVariant, CellBreakpoint, ControlSize, DeltaEmphasis, DialogWidth, MeterTone, SegmentedOption, StatSize, UiControlError };