@eagami/ui 0.1.0

package/src/styles/tokens/_typography.scss

@@ -0,0 +1,119 @@
+// =============================================================================
+// TYPOGRAPHY TOKENS
+// =============================================================================
+
+:root {
+  // ---------------------------------------------------------------------------
+  // Font families
+  // ---------------------------------------------------------------------------
+  --font-family-sans: 'DM Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
+  --font-family-brand: 'Syne', 'DM Sans', system-ui, sans-serif;
+  --font-family-serif: 'Georgia', 'Times New Roman', serif;
+  --font-family-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
+
+  // ---------------------------------------------------------------------------
+  // Font sizes (rem, base 16px)
+  // ---------------------------------------------------------------------------
+  --font-size-2xs: 0.625rem; //  10px
+  --font-size-xs: 0.75rem; //  12px
+  --font-size-sm: 0.875rem; //  14px
+  --font-size-md: 1rem; //  16px  (base)
+  --font-size-lg: 1.125rem; //  18px
+  --font-size-xl: 1.25rem; //  20px
+  --font-size-2xl: 1.5rem; //  24px
+  --font-size-3xl: 1.875rem; //  30px
+  --font-size-4xl: 2.25rem; //  36px
+  --font-size-5xl: 3rem; //  48px
+
+  // ---------------------------------------------------------------------------
+  // Font weights
+  // ---------------------------------------------------------------------------
+  --font-weight-regular: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+  --font-weight-extrabold: 800;
+
+  // ---------------------------------------------------------------------------
+  // Line heights
+  // ---------------------------------------------------------------------------
+  --line-height-none: 1;
+  --line-height-tight: 1.25;
+  --line-height-snug: 1.375;
+  --line-height-normal: 1.5;
+  --line-height-relaxed: 1.625;
+  --line-height-loose: 2;
+
+  // ---------------------------------------------------------------------------
+  // Letter spacing
+  // ---------------------------------------------------------------------------
+  --letter-spacing-tighter: -0.05em;
+  --letter-spacing-tight: -0.025em;
+  --letter-spacing-normal: 0em;
+  --letter-spacing-wide: 0.025em;
+  --letter-spacing-wider: 0.05em;
+  --letter-spacing-widest: 0.1em;
+
+  // ---------------------------------------------------------------------------
+  // Semantic text styles (composite tokens)
+  // These map to specific UI roles for consistent usage.
+  // ---------------------------------------------------------------------------
+
+  // Display
+  --text-display-size: var(--font-size-5xl);
+  --text-display-weight: var(--font-weight-bold);
+  --text-display-lh: var(--line-height-tight);
+
+  // Headings
+  --text-h1-size: var(--font-size-4xl);
+  --text-h1-weight: var(--font-weight-bold);
+  --text-h1-lh: var(--line-height-tight);
+
+  --text-h2-size: var(--font-size-3xl);
+  --text-h2-weight: var(--font-weight-semibold);
+  --text-h2-lh: var(--line-height-snug);
+
+  --text-h3-size: var(--font-size-2xl);
+  --text-h3-weight: var(--font-weight-semibold);
+  --text-h3-lh: var(--line-height-snug);
+
+  --text-h4-size: var(--font-size-xl);
+  --text-h4-weight: var(--font-weight-semibold);
+  --text-h4-lh: var(--line-height-snug);
+
+  // Body
+  --text-body-lg-size: var(--font-size-lg);
+  --text-body-lg-weight: var(--font-weight-regular);
+  --text-body-lg-lh: var(--line-height-relaxed);
+
+  --text-body-md-size: var(--font-size-md);
+  --text-body-md-weight: var(--font-weight-regular);
+  --text-body-md-lh: var(--line-height-normal);
+
+  --text-body-sm-size: var(--font-size-sm);
+  --text-body-sm-weight: var(--font-weight-regular);
+  --text-body-sm-lh: var(--line-height-normal);
+
+  // Labels (form labels, badges, tags)
+  --text-label-lg-size: var(--font-size-md);
+  --text-label-lg-weight: var(--font-weight-medium);
+  --text-label-lg-lh: var(--line-height-tight);
+
+  --text-label-md-size: var(--font-size-sm);
+  --text-label-md-weight: var(--font-weight-medium);
+  --text-label-md-lh: var(--line-height-tight);
+
+  --text-label-sm-size: var(--font-size-xs);
+  --text-label-sm-weight: var(--font-weight-medium);
+  --text-label-sm-lh: var(--line-height-tight);
+
+  // Helper / caption
+  --text-helper-size: var(--font-size-xs);
+  --text-helper-weight: var(--font-weight-regular);
+  --text-helper-lh: var(--line-height-normal);
+
+  // Code
+  --text-code-size: var(--font-size-sm);
+  --text-code-weight: var(--font-weight-regular);
+  --text-code-family: var(--font-family-mono);
+}

package/types/eagami-ui.d.ts

@@ -0,0 +1,232 @@
+import * as _angular_core from '@angular/core';
+import { ElementRef } from '@angular/core';
+import { ControlValueAccessor } from '@angular/forms';
+import * as _eagami_ui from '@eagami/ui';
+
+type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'danger';
+type ButtonSize = 'sm' | 'md' | 'lg';
+type ButtonType = 'button' | 'submit' | 'reset';
+declare class ButtonComponent {
+    readonly variant: _angular_core.InputSignal<ButtonVariant>;
+    readonly size: _angular_core.InputSignal<ButtonSize>;
+    readonly type: _angular_core.InputSignal<ButtonType>;
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    readonly loading: _angular_core.InputSignal<boolean>;
+    readonly fullWidth: _angular_core.InputSignal<boolean>;
+    readonly ariaLabel: _angular_core.InputSignal<string | undefined>;
+    readonly clicked: _angular_core.OutputEmitterRef<MouseEvent>;
+    readonly isDisabled: _angular_core.Signal<boolean>;
+    readonly hostClasses: _angular_core.Signal<{
+        [x: string]: boolean;
+        'ea-button--full-width': boolean;
+        'ea-button--loading': boolean;
+        'ea-button--disabled': boolean;
+    }>;
+    handleClick(event: MouseEvent): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ButtonComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ButtonComponent, "ea-button", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "fullWidth": { "alias": "fullWidth"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; }, { "clicked": "clicked"; }, never, ["[slot=prefix]", "*", "[slot=suffix]"], true, never>;
+}
+
+type CardVariant = 'elevated' | 'outlined' | 'filled';
+type CardPadding = 'none' | 'sm' | 'md' | 'lg';
+declare class CardComponent {
+    readonly variant: _angular_core.InputSignal<CardVariant>;
+    readonly padding: _angular_core.InputSignal<CardPadding>;
+    readonly fullWidth: _angular_core.InputSignal<boolean>;
+    readonly hostClasses: _angular_core.Signal<{
+        [x: string]: boolean;
+        'ea-card--full-width': boolean;
+    }>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CardComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CardComponent, "ea-card", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "padding": { "alias": "padding"; "required": false; "isSignal": true; }; "fullWidth": { "alias": "fullWidth"; "required": false; "isSignal": true; }; }, {}, never, ["[slot=header]", "*", "[slot=footer]"], true, never>;
+}
+
+type CheckboxSize = 'sm' | 'md' | 'lg';
+declare class CheckboxComponent implements ControlValueAccessor {
+    readonly label: _angular_core.InputSignal<string | undefined>;
+    readonly size: _angular_core.InputSignal<CheckboxSize>;
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    readonly required: _angular_core.InputSignal<boolean>;
+    readonly indeterminate: _angular_core.InputSignal<boolean>;
+    readonly id: _angular_core.InputSignal<string>;
+    readonly checked: _angular_core.ModelSignal<boolean>;
+    readonly changed: _angular_core.OutputEmitterRef<boolean>;
+    private readonly _formDisabled;
+    readonly isDisabled: _angular_core.Signal<boolean>;
+    readonly hostClasses: _angular_core.Signal<{
+        [x: string]: boolean;
+        'ea-checkbox--disabled': boolean;
+        'ea-checkbox--checked': boolean;
+        'ea-checkbox--indeterminate': boolean;
+    }>;
+    private onChange;
+    private onTouched;
+    writeValue(val: boolean): void;
+    registerOnChange(fn: (value: boolean) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    handleChange(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CheckboxComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CheckboxComponent, "ea-checkbox", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "indeterminate": { "alias": "indeterminate"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "checked": { "alias": "checked"; "required": false; "isSignal": true; }; }, { "checked": "checkedChange"; "changed": "changed"; }, never, never, true, never>;
+}
+
+type DialogSize = 'sm' | 'md' | 'lg' | 'full';
+declare class DialogComponent {
+    private readonly dialogEl;
+    readonly size: _angular_core.InputSignal<DialogSize>;
+    readonly closeOnBackdrop: _angular_core.InputSignal<boolean>;
+    readonly closeOnEscape: _angular_core.InputSignal<boolean>;
+    readonly showClose: _angular_core.InputSignal<boolean>;
+    readonly ariaLabel: _angular_core.InputSignal<string | undefined>;
+    readonly open: _angular_core.ModelSignal<boolean>;
+    readonly opened: _angular_core.OutputEmitterRef<void>;
+    readonly closed: _angular_core.OutputEmitterRef<void>;
+    readonly panelClasses: _angular_core.Signal<{
+        [x: string]: boolean;
+    }>;
+    constructor();
+    handleClose(): void;
+    handleBackdropClick(event: MouseEvent): void;
+    handleCancel(event: Event): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DialogComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DialogComponent, "ea-dialog", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; "closeOnBackdrop": { "alias": "closeOnBackdrop"; "required": false; "isSignal": true; }; "closeOnEscape": { "alias": "closeOnEscape"; "required": false; "isSignal": true; }; "showClose": { "alias": "showClose"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; "open": { "alias": "open"; "required": false; "isSignal": true; }; }, { "open": "openChange"; "opened": "opened"; "closed": "closed"; }, never, ["[slot=header]", "*", "[slot=footer]"], true, never>;
+}
+
+type DropdownSize = 'sm' | 'md' | 'lg';
+interface DropdownOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+}
+declare class DropdownComponent implements ControlValueAccessor {
+    private readonly elRef;
+    readonly label: _angular_core.InputSignal<string | undefined>;
+    readonly placeholder: _angular_core.InputSignal<string>;
+    readonly options: _angular_core.InputSignal<DropdownOption[]>;
+    readonly size: _angular_core.InputSignal<DropdownSize>;
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    readonly required: _angular_core.InputSignal<boolean>;
+    readonly hint: _angular_core.InputSignal<string | undefined>;
+    readonly errorMsg: _angular_core.InputSignal<string | undefined>;
+    readonly id: _angular_core.InputSignal<string>;
+    readonly value: _angular_core.ModelSignal<string>;
+    readonly changed: _angular_core.OutputEmitterRef<string>;
+    readonly isOpen: _angular_core.WritableSignal<boolean>;
+    readonly focusedIndex: _angular_core.WritableSignal<number>;
+    private readonly _formDisabled;
+    private onChange;
+    private onTouched;
+    readonly isDisabled: _angular_core.Signal<boolean>;
+    readonly resolvedStatus: _angular_core.Signal<"error" | "default">;
+    readonly showError: _angular_core.Signal<boolean>;
+    readonly showHint: _angular_core.Signal<boolean>;
+    readonly selectedLabel: _angular_core.Signal<string>;
+    readonly triggerClasses: _angular_core.Signal<{
+        [x: string]: boolean;
+        'ea-dropdown__trigger--open': boolean;
+        'ea-dropdown__trigger--disabled': boolean;
+    }>;
+    writeValue(val: string): void;
+    registerOnChange(fn: (value: string) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    toggle(): void;
+    select(option: DropdownOption): void;
+    close(): void;
+    handleKeydown(event: KeyboardEvent): void;
+    private moveFocus;
+    onDocumentClick(event: Event): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DropdownComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DropdownComponent, "ea-dropdown", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "errorMsg": { "alias": "error"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "changed": "changed"; }, never, never, true, never>;
+}
+
+type InputSize = 'sm' | 'md' | 'lg';
+type InputStatus = 'default' | 'error' | 'success';
+type InputType = 'text' | 'email' | 'password' | 'number' | 'search' | 'tel' | 'url';
+declare class InputComponent implements ControlValueAccessor {
+    readonly inputEl: _angular_core.Signal<ElementRef<HTMLInputElement> | undefined>;
+    readonly label: _angular_core.InputSignal<string | undefined>;
+    readonly type: _angular_core.InputSignal<InputType>;
+    readonly placeholder: _angular_core.InputSignal<string>;
+    readonly size: _angular_core.InputSignal<InputSize>;
+    readonly status: _angular_core.InputSignal<InputStatus>;
+    readonly hint: _angular_core.InputSignal<string | undefined>;
+    readonly errorMsg: _angular_core.InputSignal<string | undefined>;
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    readonly readonly: _angular_core.InputSignal<boolean>;
+    readonly required: _angular_core.InputSignal<boolean>;
+    readonly id: _angular_core.InputSignal<string>;
+    readonly value: _angular_core.ModelSignal<string>;
+    readonly focused: _angular_core.WritableSignal<boolean>;
+    private readonly _formDisabled;
+    readonly inputFocused: _angular_core.OutputEmitterRef<FocusEvent>;
+    readonly inputBlurred: _angular_core.OutputEmitterRef<FocusEvent>;
+    private onChange;
+    private onTouched;
+    readonly isDisabled: _angular_core.Signal<boolean>;
+    readonly resolvedStatus: _angular_core.Signal<InputStatus>;
+    readonly showError: _angular_core.Signal<boolean>;
+    readonly showHint: _angular_core.Signal<boolean>;
+    readonly wrapperClasses: _angular_core.Signal<{
+        [x: string]: boolean;
+        'ea-input-wrapper--focused': boolean;
+        'ea-input-wrapper--disabled': boolean;
+        'ea-input-wrapper--readonly': boolean;
+    }>;
+    writeValue(val: string): void;
+    registerOnChange(fn: (value: string) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    handleInput(event: Event): void;
+    handleFocus(event: FocusEvent): void;
+    handleBlur(event: FocusEvent): void;
+    focus(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<InputComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<InputComponent, "ea-input", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "status": { "alias": "status"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "errorMsg": { "alias": "error"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "inputFocused": "inputFocused"; "inputBlurred": "inputBlurred"; }, never, ["[slot=prefix]", "[slot=suffix]"], true, never>;
+}
+
+type RadioSize = 'sm' | 'md' | 'lg';
+type RadioOrientation = 'vertical' | 'horizontal';
+declare class RadioGroupComponent implements ControlValueAccessor {
+    readonly name: _angular_core.InputSignal<string>;
+    readonly size: _angular_core.InputSignal<RadioSize>;
+    readonly orientation: _angular_core.InputSignal<RadioOrientation>;
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    readonly ariaLabel: _angular_core.InputSignal<string | undefined>;
+    readonly value: _angular_core.ModelSignal<string>;
+    readonly changed: _angular_core.OutputEmitterRef<string>;
+    private readonly _formDisabled;
+    readonly isDisabled: _angular_core.Signal<boolean>;
+    private onChange;
+    private onTouched;
+    writeValue(val: string): void;
+    registerOnChange(fn: (value: string) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    select(val: string): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<RadioGroupComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<RadioGroupComponent, "ea-radio-group", never, { "name": { "alias": "name"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "changed": "changed"; }, never, ["*"], true, never>;
+}
+
+declare class RadioComponent {
+    private readonly group;
+    readonly value: _angular_core.InputSignal<string>;
+    readonly label: _angular_core.InputSignal<string | undefined>;
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    readonly id: _angular_core.InputSignal<string>;
+    readonly isChecked: _angular_core.Signal<boolean>;
+    readonly isDisabled: _angular_core.Signal<boolean>;
+    readonly name: _angular_core.Signal<string>;
+    readonly size: _angular_core.Signal<_eagami_ui.RadioSize>;
+    readonly hostClasses: _angular_core.Signal<{
+        [x: string]: boolean;
+        'ea-radio--disabled': boolean;
+        'ea-radio--checked': boolean;
+    }>;
+    handleChange(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<RadioComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<RadioComponent, "ea-radio", never, { "value": { "alias": "value"; "required": true; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+export { ButtonComponent, CardComponent, CheckboxComponent, DialogComponent, DropdownComponent, InputComponent, RadioComponent, RadioGroupComponent };
+export type { ButtonSize, ButtonType, ButtonVariant, CardPadding, CardVariant, CheckboxSize, DialogSize, DropdownOption, DropdownSize, InputSize, InputStatus, InputType, RadioOrientation, RadioSize };