@frame-kit/ui-ng 0.0.1

package/types/frame-kit-ui-ng-ui-button.d.ts

@@ -0,0 +1,48 @@
+import * as _frame_kit_ui_ng_ui_button from '@frame-kit/ui-ng/ui/button';
+import * as _angular_core from '@angular/core';
+import { InjectionToken } from '@angular/core';
+
+type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'danger';
+type ButtonSize = 'sm' | 'md' | 'lg';
+type ButtonType = 'button' | 'submit' | 'reset';
+
+declare class ButtonComponent {
+    /** Visual style variant of the button (primary, secondary, ghost, etc.). */
+    readonly variant: _angular_core.InputSignal<ButtonVariant>;
+    /** Size of the button, affecting padding and font size. */
+    readonly size: _angular_core.InputSignal<ButtonSize>;
+    /** When true, shows a spinner and disables interaction. */
+    readonly loading: _angular_core.InputSignal<boolean>;
+    /** When true, prevents interaction and applies disabled styling. */
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    /** HTML type attribute forwarded to the inner `<button>` element. */
+    readonly type: _angular_core.InputSignal<ButtonType>;
+    /** When true, the button stretches to fill its container width. */
+    readonly fullWidth: _angular_core.InputSignal<boolean>;
+    readonly iconStartRef: _angular_core.Signal<_frame_kit_ui_ng_ui_button.FkButtonIconStartDirective | undefined>;
+    readonly iconEndRef: _angular_core.Signal<_frame_kit_ui_ng_ui_button.FkButtonIconEndDirective | undefined>;
+    readonly id: _angular_core.InputSignal<string | null>;
+    readonly className: _angular_core.InputSignal<string>;
+    readonly ariaLabel: _angular_core.InputSignal<string | null>;
+    readonly ariaDescribedBy: _angular_core.InputSignal<string | null>;
+    readonly isDisabled: _angular_core.Signal<boolean>;
+    readonly classes: _angular_core.Signal<string>;
+    get hostClass(): string;
+    get ariaDisabledAttr(): string | null;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ButtonComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ButtonComponent, "fk-button", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "fullWidth": { "alias": "fullWidth"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "className": { "alias": "className"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "ariaDescribedBy": { "alias": "ariaDescribedBy"; "required": false; "isSignal": true; }; }, {}, ["iconStartRef", "iconEndRef"], ["[fkButtonIconStart]", "*", "[fkButtonIconEnd]"], true, never>;
+}
+
+declare const FK_BUTTON_ICON_START: InjectionToken<FkButtonIconStartDirective>;
+declare const FK_BUTTON_ICON_END: InjectionToken<FkButtonIconEndDirective>;
+declare class FkButtonIconStartDirective {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<FkButtonIconStartDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<FkButtonIconStartDirective, "[fkButtonIconStart]", never, {}, {}, never, never, true, never>;
+}
+declare class FkButtonIconEndDirective {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<FkButtonIconEndDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<FkButtonIconEndDirective, "[fkButtonIconEnd]", never, {}, {}, never, never, true, never>;
+}
+
+export { ButtonComponent, FK_BUTTON_ICON_END, FK_BUTTON_ICON_START, FkButtonIconEndDirective, FkButtonIconStartDirective };
+export type { ButtonSize, ButtonType, ButtonVariant };

package/types/frame-kit-ui-ng-ui-callout.d.ts

@@ -0,0 +1,26 @@
+import * as _angular_core from '@angular/core';
+import { TextAlign } from '@frame-kit/ui-ng/core/text';
+
+declare class CalloutComponent {
+    /** Optional title rendered as a headline above the projected content. */
+    readonly title: _angular_core.InputSignal<string | null>;
+    /** Text alignment applied to the callout body. */
+    readonly align: _angular_core.InputSignal<TextAlign>;
+    /** Custom background color applied via a CSS custom property. */
+    readonly backgroundColor: _angular_core.InputSignal<string | null>;
+    /** Custom border color applied via a CSS custom property. */
+    readonly borderColor: _angular_core.InputSignal<string | null>;
+    readonly className: _angular_core.InputSignal<string>;
+    readonly classes: _angular_core.Signal<string>;
+    get hostClass(): string;
+    get hostBg(): string | null;
+    get hostBorderColor(): string | null;
+    get hostTextAlign(): TextAlign | null;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CalloutComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CalloutComponent, "fk-callout", never, { "title": { "alias": "title"; "required": false; "isSignal": true; }; "align": { "alias": "align"; "required": false; "isSignal": true; }; "backgroundColor": { "alias": "backgroundColor"; "required": false; "isSignal": true; }; "borderColor": { "alias": "borderColor"; "required": false; "isSignal": true; }; "className": { "alias": "className"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+type CalloutAlign = 'start' | 'center';
+
+export { CalloutComponent };
+export type { CalloutAlign };

package/types/frame-kit-ui-ng-ui-card.d.ts

@@ -0,0 +1,30 @@
+import * as _angular_core from '@angular/core';
+
+type CardSize = 'sm' | 'md' | 'lg' | (string & {});
+type CardAlign = 'start' | 'center' | 'end' | 'stretch';
+
+declare class CardComponent {
+    /** Preset size that controls the card's internal padding; also accepts any valid CSS padding string for a custom size. */
+    readonly size: _angular_core.InputSignal<CardSize>;
+    /** Alignment of the card's content along the cross axis. */
+    readonly align: _angular_core.InputSignal<CardAlign>;
+    /** When true, the card has no background fill. */
+    readonly transparent: _angular_core.InputSignal<boolean>;
+    /** When true, the card has no border or shadow. */
+    readonly borderless: _angular_core.InputSignal<boolean>;
+    readonly className: _angular_core.InputSignal<string>;
+    readonly id: _angular_core.InputSignal<string | null>;
+    readonly ariaLabel: _angular_core.InputSignal<string | null>;
+    private readonly sizePresets;
+    readonly isCustomSize: _angular_core.Signal<boolean>;
+    readonly classes: _angular_core.Signal<string>;
+    get hostClass(): string;
+    get hostPadding(): string | null;
+    get hostId(): string | null;
+    get hostAriaLabel(): string | null;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CardComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CardComponent, "fk-card", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; "align": { "alias": "align"; "required": false; "isSignal": true; }; "transparent": { "alias": "transparent"; "required": false; "isSignal": true; }; "borderless": { "alias": "borderless"; "required": false; "isSignal": true; }; "className": { "alias": "className"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+export { CardComponent };
+export type { CardAlign, CardSize };

package/types/frame-kit-ui-ng-ui-copyable-field.d.ts

@@ -0,0 +1,62 @@
+import * as _angular_core from '@angular/core';
+
+type CopyableFieldSize = 'sm' | 'md' | 'lg';
+
+/**
+ * Displays a read-only value next to a copy-to-clipboard button.
+ *
+ * Use for showing secrets (API keys, tokens), IDs, URLs, and any value the
+ * user will want to copy rather than re-type. After a successful copy the
+ * copy-button icon swaps to a confirmation for `copiedDuration` ms and a
+ * screen-reader announcement fires.
+ *
+ * The copy button ships with inline SVG icons for both states so the
+ * component works standalone. Consumers can override either icon by
+ * projecting their own element with the `fkCopyIcon` or `fkCopiedIcon`
+ * attribute selector — for example an `fk-icon` wired to their own icon
+ * registry:
+ *
+ * ```html
+ * <fk-copyable-field [value]="apiKey">
+ *   <fk-icon fkCopyIcon name="clipboard-outline" size="sm" />
+ *   <fk-icon fkCopiedIcon name="check-outline" size="sm" />
+ * </fk-copyable-field>
+ * ```
+ */
+declare class CopyableFieldComponent {
+    /** The string value displayed and written to the clipboard when the user copies. */
+    readonly value: _angular_core.InputSignal<string>;
+    /** Optional visible label rendered above the value field. */
+    readonly label: _angular_core.InputSignal<string | null>;
+    /** Controls the size variant of the field. */
+    readonly size: _angular_core.InputSignal<CopyableFieldSize>;
+    /** When true, the value is rendered in a monospace font. */
+    readonly mono: _angular_core.InputSignal<boolean>;
+    /** Accessible label for the copy button read by screen readers. */
+    readonly copyAriaLabel: _angular_core.InputSignal<string>;
+    /** Screen-reader announcement text emitted after a successful copy. */
+    readonly copiedAnnouncement: _angular_core.InputSignal<string>;
+    /** How long in milliseconds the "copied" confirmation state is shown. */
+    readonly copiedDuration: _angular_core.InputSignal<number>;
+    readonly className: _angular_core.InputSignal<string>;
+    readonly id: _angular_core.InputSignal<string | null>;
+    readonly ariaLabel: _angular_core.InputSignal<string | null>;
+    /** Fires after a successful clipboard write, emitting the copied value. */
+    readonly copied: _angular_core.OutputEmitterRef<string>;
+    /** Fires when the clipboard write fails, emitting the underlying error. */
+    readonly copyFailed: _angular_core.OutputEmitterRef<unknown>;
+    private readonly _isCopied;
+    private copyTimer;
+    readonly isCopied: _angular_core.Signal<boolean>;
+    readonly classes: _angular_core.Signal<string>;
+    get hostClass(): string;
+    constructor();
+    /** Writes the current value to the clipboard and shows the copied confirmation state. */
+    copy(): Promise<void>;
+    private clearCopyTimer;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CopyableFieldComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CopyableFieldComponent, "fk-copyable-field", never, { "value": { "alias": "value"; "required": true; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "mono": { "alias": "mono"; "required": false; "isSignal": true; }; "copyAriaLabel": { "alias": "copyAriaLabel"; "required": false; "isSignal": true; }; "copiedAnnouncement": { "alias": "copiedAnnouncement"; "required": false; "isSignal": true; }; "copiedDuration": { "alias": "copiedDuration"; "required": false; "isSignal": true; }; "className": { "alias": "className"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, { "copied": "copied"; "copyFailed": "copyFailed"; }, never, ["[fkCopiedIcon]", "[fkCopyIcon]"], true, never>;
+}
+
+export { CopyableFieldComponent };
+export type { CopyableFieldSize };