@joanroucoux/cairn-ui 0.1.5 → 0.2.0

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

@@ -13,52 +13,58 @@ type AvatarSize = (typeof AVATAR_SIZES)[number];
 declare class UiAvatar {
     readonly initials: _angular_core.InputSignal<string>;
     readonly label: _angular_core.InputSignal<string>;
-    readonly size: _angular_core.InputSignal<"sm" | "md">;
+    readonly size: _angular_core.InputSignal<"md" | "sm">;
     protected readonly classes: _angular_core.Signal<string>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<UiAvatar, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<UiAvatar, "ui-avatar", never, { "initials": { "alias": "initials"; "required": true; "isSignal": true; }; "label": { "alias": "label"; "required": true; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 /** Available badge variants. `BadgeVariant` is derived from this tuple. */
-declare const BADGE_VARIANTS: readonly ["primary", "secondary", "destructive", "outline"];
+declare const BADGE_VARIANTS: readonly ["neutral", "outline"];
 type BadgeVariant = (typeof BADGE_VARIANTS)[number];
 /**
- * Small status descriptor for counts, states or labels.
+ * Small status descriptor for counts, states or labels, such as an instrument's asset class.
  *
  * @example
- * <ui-badge variant="secondary">Draft</ui-badge>
+ * <ui-badge>ETF</ui-badge>
  */
 declare class UiBadge {
-    readonly variant: _angular_core.InputSignal<"primary" | "secondary" | "destructive" | "outline">;
+    readonly variant: _angular_core.InputSignal<"outline" | "neutral">;
     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>;
 }
 
 /** Available button variants. `ButtonVariant` is derived from this tuple. */
-declare const BUTTON_VARIANTS: readonly ["primary", "secondary", "outline", "destructive", "ghost"];
+declare const BUTTON_VARIANTS: readonly ["primary", "outline", "ghost", "destructive"];
 type ButtonVariant = (typeof BUTTON_VARIANTS)[number];
-/** Available button sizes. `md` is the 44px touch target Cairn asks for everywhere. */
-declare const BUTTON_SIZES: readonly ["sm", "md", "lg"];
+/** Available button sizes. `md` is the touch target Cairn asks for everywhere. */
+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. The element stays a link, and so does
- * its role - never use this to make an ordinary link look like a form control.
+ * 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.
  *
  * @example
- * <button ui-button variant="destructive" size="sm">Delete</button>
- * <a ui-button variant="outline" href="/api/holdings/export" download>Export</a>
+ * <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" | "secondary" | "destructive" | "outline" | "ghost">;
-    readonly size: _angular_core.InputSignal<"sm" | "md" | "lg">;
+    readonly variant: _angular_core.InputSignal<"primary" | "outline" | "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>;
+    constructor();
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<UiButton, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<UiButton, "button[ui-button], a[ui-button]", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<UiButton, "button[ui-button], a[ui-button]", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
 /** Available card variants. `CardVariant` is derived from this tuple. */
@@ -75,7 +81,7 @@ type CardPadding = (typeof CARD_PADDINGS)[number];
  */
 declare class UiCard {
     readonly variant: _angular_core.InputSignal<"default" | "elevated">;
-    readonly padding: _angular_core.InputSignal<"sm" | "md" | "none">;
+    readonly padding: _angular_core.InputSignal<"md" | "sm" | "none">;
     protected readonly classes: _angular_core.Signal<string>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<UiCard, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<UiCard, "ui-card", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "padding": { "alias": "padding"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
@@ -178,10 +184,12 @@ 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;
     protected readonly control: _angular_core.Signal<UiControl | undefined>;
-    protected readonly labelClasses: _angular_core.Signal<"sr-only" | "text-[13px] font-medium text-(--foreground)">;
+    protected readonly labelClasses: _angular_core.Signal<"sr-only" | "text-label font-medium text-(--muted-foreground)">;
     /**
      * The caller's own `error` wins: it is the only way to report something the control does not
      * know about, such as a search box refusing an empty query.
@@ -189,10 +197,10 @@ declare class UiField {
     protected readonly message: _angular_core.Signal<string | undefined>;
     constructor();
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<UiField, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<UiField, "ui-field", never, { "label": { "alias": "label"; "required": true; "isSignal": true; }; "labelHidden": { "alias": "labelHidden"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; }, {}, ["control"], ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<UiField, "ui-field", never, { "label": { "alias": "label"; "required": true; "isSignal": true; }; "labelHidden": { "alias": "labelHidden"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "unit": { "alias": "unit"; "required": false; "isSignal": true; }; }, {}, ["control"], ["*"], true, never>;
 }
 
-/** Available control sizes. `md` is the 44px touch target. */
+/** Available control sizes. `md` is the 44/40px touch target. */
 declare const CONTROL_SIZES: readonly ["sm", "md"];
 type ControlSize = (typeof CONTROL_SIZES)[number];
 /**
@@ -207,7 +215,7 @@ type ControlSize = (typeof CONTROL_SIZES)[number];
  * <input uiInput type="email" placeholder="you@example.com" />
  */
 declare class UiInput implements UiControl {
-    readonly size: _angular_core.InputSignal<"sm" | "md">;
+    readonly size: _angular_core.InputSignal<"md" | "sm">;
     readonly errors: _angular_core.InputSignal<readonly UiControlError[]>;
     readonly touched: _angular_core.InputSignal<boolean>;
     protected readonly classes: _angular_core.Signal<string>;
@@ -246,7 +254,7 @@ 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<2 | 4 | 5 | 3 | 1 | 6>;
+    readonly tone: _angular_core.InputSignal<4 | 1 | 2 | 3 | 5 | 6>;
     protected readonly percent: _angular_core.Signal<number>;
     protected readonly fillClasses: _angular_core.Signal<string>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<UiMeter, never>;
@@ -258,7 +266,8 @@ type SegmentedOption = {
     label: string;
 };
 /**
- * Exclusive choice within a small, known set: a time range, a unit, a mode.
+ * Exclusive choice within a small, known set: a time range, a unit, a mode. The selected option's
+ * background is a single thumb that slides under it in `transform`, instead of being redrawn.
  *
  * @example
  * <ui-segmented [options]="ranges" label="Time range" [(value)]="range" />
@@ -268,6 +277,7 @@ declare class UiSegmented {
     readonly label: _angular_core.InputSignal<string>;
     readonly value: _angular_core.ModelSignal<string>;
     protected readonly radios: _angular_core.Signal<readonly ElementRef<HTMLButtonElement>[]>;
+    protected readonly thumbIndex: _angular_core.Signal<number>;
     protected optionClasses(optionValue: string): string;
     protected tabIndexFor(optionValue: string): number;
     protected select(optionValue: string): void;
@@ -287,7 +297,7 @@ declare class UiSegmented {
  * <select uiSelect><option value="pea">PEA</option></select>
  */
 declare class UiSelect implements UiControl {
-    readonly size: _angular_core.InputSignal<"sm" | "md">;
+    readonly size: _angular_core.InputSignal<"md" | "sm">;
     readonly errors: _angular_core.InputSignal<readonly UiControlError[]>;
     readonly touched: _angular_core.InputSignal<boolean>;
     protected readonly classes: _angular_core.Signal<string>;
@@ -296,19 +306,25 @@ declare class UiSelect implements UiControl {
 }
 
 /**
- * Decorative placeholder for content that is still loading. Deliberately hidden from
- * assistive technology: the calling screen keeps its own role="status" sentence.
+ * 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.
  *
  * @example
+ * <ui-skeleton shape="figure" />
  * <ui-skeleton [lines]="3" />
- * <ui-skeleton [height]="196" />
  */
 declare class UiSkeleton {
+    readonly shape: _angular_core.InputSignal<"text" | "figure" | "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";
     protected readonly bars: _angular_core.Signal<("62%" | "100%")[]>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<UiSkeleton, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<UiSkeleton, "ui-skeleton", never, { "lines": { "alias": "lines"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<UiSkeleton, "ui-skeleton", never, { "shape": { "alias": "shape"; "required": false; "isSignal": true; }; "lines": { "alias": "lines"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 /** Available stat sizes. `StatSize` is derived from this tuple. */
@@ -332,7 +348,7 @@ type StatSize = (typeof STAT_SIZES)[number];
 declare class UiStat {
     readonly label: _angular_core.InputSignal<string>;
     readonly size: _angular_core.InputSignal<"hero" | "tile">;
-    protected readonly labelClasses = "text-[13px] font-medium text-(--subtle-foreground)";
+    protected readonly labelClasses = "text-label font-medium text-(--subtle-foreground)";
     protected readonly valueClasses: _angular_core.Signal<string>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<UiStat, never>;
     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>;
@@ -346,6 +362,20 @@ declare class UiTable {
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<UiTable, never>;
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<UiTable, "table[uiTable]", never, {}, {}, never, never, true, never>;
 }
+/**
+ * Body or group row. `group` draws the muted banner that opens each account inside a list of
+ * holdings: it carries no hover state of its own, unlike an ordinary row.
+ *
+ * @example
+ * <tr uiTr>...
+ * <tr uiTr group>...
+ */
+declare class UiTr {
+    readonly group: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    protected readonly classes: _angular_core.Signal<"min-h-(--row-min) rounded-control bg-(--muted) font-semibold" | "rounded-control hover:bg-(--glow)">;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<UiTr, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<UiTr, "tr[uiTr]", never, { "group": { "alias": "group"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
 /**
  * Column header. `numeric` right-aligns and lines the digits up; `from` holds a
  * secondary column back until the viewport is wide enough for it.
@@ -369,5 +399,5 @@ 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 };
+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 };