@frame-kit/ui-ng 0.0.1

package/types/frame-kit-ui-ng-core-icon.d.ts

@@ -0,0 +1,74 @@
+import * as _angular_platform_browser from '@angular/platform-browser';
+import { SafeHtml } from '@angular/platform-browser';
+import * as _angular_core from '@angular/core';
+import { EnvironmentProviders } from '@angular/core';
+
+type IconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | (string & {});
+type IconColor = 'inherit' | 'default' | 'muted' | 'primary' | 'danger' | 'success' | (string & {});
+
+declare class IconComponent {
+    private readonly registry;
+    /** Registry key for the SVG icon to render. */
+    readonly name: _angular_core.InputSignal<string>;
+    /** Preset size token applied as a CSS class; pass a CSS value for custom sizes. */
+    readonly size: _angular_core.InputSignal<IconSize>;
+    /** Icon color — preset token names resolve to design-token colors, any other string is applied as a literal CSS `color`. */
+    readonly color: _angular_core.InputSignal<IconColor>;
+    readonly className: _angular_core.InputSignal<string>;
+    readonly id: _angular_core.InputSignal<string | null>;
+    readonly ariaLabel: _angular_core.InputSignal<string | null>;
+    /** Explicitly sets `aria-hidden`; when null, the directive infers it from `ariaLabel`. */
+    readonly ariaHidden: _angular_core.InputSignal<boolean | null>;
+    readonly svgContent: _angular_core.Signal<_angular_platform_browser.SafeHtml | null>;
+    readonly effectiveAriaHidden: _angular_core.Signal<boolean>;
+    private readonly sizePresets;
+    readonly isCustomSize: _angular_core.Signal<boolean>;
+    readonly classes: _angular_core.Signal<string>;
+    get hostClass(): string;
+    get hostFontSize(): string | null;
+    get hostRole(): string | null;
+    get hostAriaLabel(): string | null;
+    get hostAriaHidden(): string | null;
+    get hostId(): string | null;
+    get hostColor(): string | null;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<IconComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<IconComponent, "fk-icon", never, { "name": { "alias": "name"; "required": true; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "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; }; "ariaHidden": { "alias": "ariaHidden"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+declare class IconRegistryService {
+    private readonly icons;
+    private readonly sanitizer;
+    registerIcon(name: string, svgContent: string): void;
+    private normalizeSvg;
+    registerIcons(icons: Record<string, string>): void;
+    getIcon(name: string): SafeHtml | null;
+    hasIcon(name: string): boolean;
+    getRegisteredNames(): string[];
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<IconRegistryService, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<IconRegistryService>;
+}
+
+/**
+ * Registers icons into the `IconRegistryService` via Angular DI.
+ *
+ * Icons are provided as a record of name → SVG string pairs.
+ * This is tree-shakeable: only icons you import and pass here are bundled.
+ *
+ * @example
+ * ```ts
+ * import { searchIcon, lockIcon } from '@my-app/icons';
+ *
+ * export const appConfig: ApplicationConfig = {
+ *   providers: [
+ *     provideIcons({
+ *       search: searchIcon,
+ *       lock: lockIcon,
+ *     }),
+ *   ],
+ * };
+ * ```
+ */
+declare function provideIcons(icons: Record<string, string>): EnvironmentProviders;
+
+export { IconComponent, IconRegistryService, provideIcons };
+export type { IconColor, IconSize };

package/types/frame-kit-ui-ng-core-image.d.ts

@@ -0,0 +1,93 @@
+import * as _angular_core from '@angular/core';
+
+type ImageFit = 'cover' | 'contain' | 'fill' | 'none' | 'scale-down';
+type ImageLoading = 'lazy' | 'eager';
+type ImageDecoding = 'async' | 'sync' | 'auto';
+type ImageFetchPriority = 'high' | 'low' | 'auto';
+type ImageRadius = 'none' | 'sm' | 'md' | 'lg' | 'full';
+type ImageCrossOrigin = 'anonymous' | 'use-credentials';
+type ImageReferrerPolicy = '' | 'no-referrer' | 'no-referrer-when-downgrade' | 'origin' | 'origin-when-cross-origin' | 'same-origin' | 'strict-origin' | 'strict-origin-when-cross-origin' | 'unsafe-url';
+interface ImageBaseProps {
+    src: string;
+    alt: string;
+    srcSet?: string;
+    sizes?: string;
+    loading?: ImageLoading;
+    decoding?: ImageDecoding;
+    fetchPriority?: ImageFetchPriority;
+    fit?: ImageFit;
+    position?: string;
+    fallbackSrc?: string;
+    radius?: ImageRadius;
+    aspectRatio?: number | string;
+    crossOrigin?: ImageCrossOrigin;
+    referrerPolicy?: ImageReferrerPolicy;
+}
+interface ImageSizedProps extends ImageBaseProps {
+    fill?: false;
+    width: number;
+    height: number;
+}
+interface ImageFillProps extends ImageBaseProps {
+    fill: true;
+    width?: never;
+    height?: never;
+}
+type ImageProps = ImageSizedProps | ImageFillProps;
+
+declare class ImageComponent {
+    /** URL of the image to display. */
+    readonly src: _angular_core.InputSignal<string>;
+    /** Accessible alternative text describing the image. */
+    readonly alt: _angular_core.InputSignal<string>;
+    /** When true, the image expands to fill its positioned parent; `width` and `height` are ignored. */
+    readonly fill: _angular_core.InputSignal<boolean>;
+    /** Explicit pixel width; required when `fill` is false to prevent layout shift. */
+    readonly width: _angular_core.InputSignal<number | null>;
+    /** Explicit pixel height; required when `fill` is false to prevent layout shift. */
+    readonly height: _angular_core.InputSignal<number | null>;
+    /** `srcset` attribute value for responsive image resolution switching. */
+    readonly srcSet: _angular_core.InputSignal<string | null>;
+    /** `sizes` attribute value used alongside `srcSet` for viewport-aware resolution selection. */
+    readonly sizes: _angular_core.InputSignal<string | null>;
+    /** Browser loading strategy — `"lazy"` defers off-screen images. */
+    readonly loading: _angular_core.InputSignal<ImageLoading>;
+    /** Browser decode hint — `"async"` avoids blocking the main thread. */
+    readonly decoding: _angular_core.InputSignal<ImageDecoding>;
+    /** Fetch priority hint for the browser's preload scanner. */
+    readonly fetchPriority: _angular_core.InputSignal<ImageFetchPriority>;
+    /** Cross-origin policy for the image request. */
+    readonly crossOrigin: _angular_core.InputSignal<ImageCrossOrigin | null>;
+    /** `referrerpolicy` attribute value forwarded to the underlying `<img>` element. */
+    readonly referrerPolicy: _angular_core.InputSignal<string | null>;
+    /** `object-fit` strategy when the image is displayed inside a fixed container. */
+    readonly fit: _angular_core.InputSignal<ImageFit>;
+    /** `object-position` value controlling focal point within the container. */
+    readonly position: _angular_core.InputSignal<string>;
+    /** Corner radius token applied to the image. */
+    readonly radius: _angular_core.InputSignal<ImageRadius>;
+    /** Locks the host to a specific aspect ratio expressed as a number (w/h) or CSS string. */
+    readonly aspectRatio: _angular_core.InputSignal<string | number | null>;
+    /** Fallback image URL displayed automatically when the primary `src` fails to load. */
+    readonly fallbackSrc: _angular_core.InputSignal<string | null>;
+    readonly className: _angular_core.InputSignal<string>;
+    readonly id: _angular_core.InputSignal<string | null>;
+    /** Fires when the image has finished loading successfully. */
+    readonly imageLoad: _angular_core.OutputEmitterRef<void>;
+    /** Fires when the image fails to load; switches to `fallbackSrc` if provided. */
+    readonly imageError: _angular_core.OutputEmitterRef<void>;
+    readonly currentSrc: _angular_core.Signal<string>;
+    readonly hasError: _angular_core.WritableSignal<boolean>;
+    constructor();
+    private readonly dimensionWarning;
+    readonly classes: _angular_core.Signal<string>;
+    get hostClass(): string;
+    get hostId(): string | null;
+    onLoad(): void;
+    onError(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ImageComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ImageComponent, "fk-image", never, { "src": { "alias": "src"; "required": true; "isSignal": true; }; "alt": { "alias": "alt"; "required": true; "isSignal": true; }; "fill": { "alias": "fill"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "srcSet": { "alias": "srcSet"; "required": false; "isSignal": true; }; "sizes": { "alias": "sizes"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "decoding": { "alias": "decoding"; "required": false; "isSignal": true; }; "fetchPriority": { "alias": "fetchPriority"; "required": false; "isSignal": true; }; "crossOrigin": { "alias": "crossOrigin"; "required": false; "isSignal": true; }; "referrerPolicy": { "alias": "referrerPolicy"; "required": false; "isSignal": true; }; "fit": { "alias": "fit"; "required": false; "isSignal": true; }; "position": { "alias": "position"; "required": false; "isSignal": true; }; "radius": { "alias": "radius"; "required": false; "isSignal": true; }; "aspectRatio": { "alias": "aspectRatio"; "required": false; "isSignal": true; }; "fallbackSrc": { "alias": "fallbackSrc"; "required": false; "isSignal": true; }; "className": { "alias": "className"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; }, { "imageLoad": "imageLoad"; "imageError": "imageError"; }, never, never, true, never>;
+}
+
+export { ImageComponent };
+export type { ImageBaseProps, ImageCrossOrigin, ImageDecoding, ImageFetchPriority, ImageFillProps, ImageFit, ImageLoading, ImageProps, ImageRadius, ImageReferrerPolicy, ImageSizedProps };

package/types/frame-kit-ui-ng-core-link.d.ts

@@ -0,0 +1,251 @@
+import * as _angular_core from '@angular/core';
+import { InjectionToken } from '@angular/core';
+
+/**
+ * Link variant types
+ * - default: standard link appearance
+ * - primary: primary brand color
+ * - muted: muted/subtle appearance
+ * - danger: for destructive actions
+ */
+type LinkVariant = 'default' | 'primary' | 'muted' | 'danger';
+/**
+ * Link size types
+ * - small: compact text
+ * - medium: standard size (default)
+ * - large: prominent text
+ */
+type LinkSize = 'small' | 'medium' | 'large';
+/**
+ * Underline behavior
+ * - none: no underline
+ * - hover: underline on hover only (default)
+ * - always: always underlined
+ */
+type LinkUnderline = 'none' | 'hover' | 'always';
+
+/**
+ * Link Component
+ *
+ * A flexible, accessible link component that supports:
+ * - External and internal links
+ * - Angular Router integration
+ * - Variants, sizes, and underline styles
+ * - Analytics tracking via data attributes
+ * - Accessibility features (aria-label, keyboard navigation)
+ * - Icon support (leading/trailing)
+ * - Disabled and loading states
+ * - External link indicators
+ *
+ * @example
+ * ```html
+ * <!-- Internal router link -->
+ * <fk-link routerLink="/dashboard">Dashboard</fk-link>
+ *
+ * <!-- External link with icon -->
+ * <fk-link href="https://example.com" [external]="true">
+ *   Visit Site
+ * </fk-link>
+ *
+ * <!-- With analytics tracking -->
+ * <fk-link
+ *   href="/products"
+ *   trackingId="nav-products"
+ *   trackingCategory="navigation"
+ * >
+ *   Products
+ * </fk-link>
+ *
+ * <!-- Variants -->
+ * <fk-link variant="primary" href="/signup">Sign Up</fk-link>
+ * <fk-link variant="muted" href="/help">Help</fk-link>
+ * <fk-link variant="danger" href="/delete">Delete</fk-link>
+ * ```
+ */
+declare class LinkComponent {
+    /**
+     * External href (for standard <a> tags)
+     * Use this for external links or when not using Angular Router
+     */
+    readonly href: _angular_core.InputSignal<string | null>;
+    /**
+     * Angular Router link (for internal navigation)
+     * Use this for internal app navigation
+     */
+    readonly routerLink: _angular_core.InputSignal<string | string[] | null>;
+    /**
+     * Query parameters object passed through to the underlying
+     * `routerLink` directive. Only meaningful when `routerLink` is set.
+     * Equivalent to `<a [routerLink]="..." [queryParams]="...">`.
+     */
+    readonly queryParams: _angular_core.InputSignal<Record<string, string | number | boolean | null | undefined> | null>;
+    /**
+     * Link variant (visual style)
+     * @default 'default'
+     */
+    readonly variant: _angular_core.InputSignal<LinkVariant>;
+    /**
+     * Link size
+     * @default 'medium'
+     */
+    readonly size: _angular_core.InputSignal<LinkSize>;
+    /**
+     * Underline behavior
+     * @default 'hover'
+     */
+    readonly underline: _angular_core.InputSignal<LinkUnderline>;
+    /**
+     * Target attribute (e.g., '_blank', '_self')
+     * Automatically set to '_blank' if external is true
+     */
+    readonly target: _angular_core.InputSignal<string | null>;
+    /**
+     * Rel attribute (e.g., 'noopener noreferrer')
+     * Automatically set to 'noopener noreferrer' for external links with target="_blank"
+     */
+    readonly rel: _angular_core.InputSignal<string | null>;
+    /**
+     * Mark as external link (shows external icon, sets target="_blank")
+     * @default false
+     */
+    readonly external: _angular_core.InputSignal<boolean>;
+    /**
+     * Disable the link (prevents navigation, changes appearance)
+     * @default false
+     */
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    /**
+     * Loading state (shows loading indicator, prevents navigation)
+     * @default false
+     */
+    readonly loading: _angular_core.InputSignal<boolean>;
+    /**
+     * Download attribute (for file downloads)
+     */
+    readonly download: _angular_core.InputSignal<string | boolean | null>;
+    /**
+     * Additional CSS classes
+     */
+    readonly className: _angular_core.InputSignal<string>;
+    /**
+     * ID attribute
+     */
+    readonly id: _angular_core.InputSignal<string | null>;
+    /**
+     * ARIA label (for accessibility)
+     */
+    readonly ariaLabel: _angular_core.InputSignal<string | null>;
+    /**
+     * ARIA described-by (for accessibility)
+     */
+    readonly ariaDescribedBy: _angular_core.InputSignal<string | null>;
+    /**
+     * ARIA current (for indicating current page/location)
+     */
+    readonly ariaCurrent: _angular_core.InputSignal<"page" | "step" | "location" | "date" | "time" | "true" | "false" | null>;
+    /**
+     * Role attribute (usually not needed for <a> tags)
+     */
+    readonly role: _angular_core.InputSignal<string | null>;
+    /**
+     * Tab index (for keyboard navigation control)
+     */
+    readonly tabIndex: _angular_core.InputSignal<number | null>;
+    /**
+     * Analytics tracking ID
+     */
+    readonly trackingId: _angular_core.InputSignal<string | null>;
+    /**
+     * Analytics tracking category
+     */
+    readonly trackingCategory: _angular_core.InputSignal<string | null>;
+    /**
+     * Analytics tracking label
+     */
+    readonly trackingLabel: _angular_core.InputSignal<string | null>;
+    /**
+     * Custom data attributes (for analytics or other purposes)
+     */
+    readonly dataAttributes: _angular_core.InputSignal<Record<string, string>>;
+    /**
+     * Click event (emitted when link is clicked)
+     * Note: Not emitted if disabled or loading
+     */
+    readonly clicked: _angular_core.OutputEmitterRef<MouseEvent>;
+    /**
+     * Computed: is this an external link?
+     */
+    readonly isExternalLink: _angular_core.Signal<boolean>;
+    /**
+     * Computed: effective target attribute
+     */
+    readonly effectiveTarget: _angular_core.Signal<string | null>;
+    /**
+     * Computed: effective rel attribute
+     */
+    readonly effectiveRel: _angular_core.Signal<string | null>;
+    /**
+     * Computed: effective download attribute
+     */
+    readonly effectiveDownload: _angular_core.Signal<string | false | null>;
+    /**
+     * Computed: effective tab index
+     */
+    readonly effectiveTabIndex: _angular_core.Signal<number | null>;
+    /**
+     * Host classes — single source of truth
+     */
+    readonly classes: _angular_core.Signal<string>;
+    get hostClass(): string;
+    /**
+     * Computed: data attributes for analytics
+     */
+    readonly computedDataAttributes: _angular_core.Signal<Record<string, string>>;
+    /**
+     * Handle click events
+     */
+    handleClick(event: MouseEvent): void;
+    /**
+     * Track click for analytics
+     * Override this method or connect to your analytics service
+     */
+    private trackClick;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<LinkComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<LinkComponent, "fk-link", never, { "href": { "alias": "href"; "required": false; "isSignal": true; }; "routerLink": { "alias": "routerLink"; "required": false; "isSignal": true; }; "queryParams": { "alias": "queryParams"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "underline": { "alias": "underline"; "required": false; "isSignal": true; }; "target": { "alias": "target"; "required": false; "isSignal": true; }; "rel": { "alias": "rel"; "required": false; "isSignal": true; }; "external": { "alias": "external"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "download": { "alias": "download"; "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; }; "ariaDescribedBy": { "alias": "ariaDescribedBy"; "required": false; "isSignal": true; }; "ariaCurrent": { "alias": "ariaCurrent"; "required": false; "isSignal": true; }; "role": { "alias": "role"; "required": false; "isSignal": true; }; "tabIndex": { "alias": "tabIndex"; "required": false; "isSignal": true; }; "trackingId": { "alias": "trackingId"; "required": false; "isSignal": true; }; "trackingCategory": { "alias": "trackingCategory"; "required": false; "isSignal": true; }; "trackingLabel": { "alias": "trackingLabel"; "required": false; "isSignal": true; }; "dataAttributes": { "alias": "dataAttributes"; "required": false; "isSignal": true; }; }, { "clicked": "clicked"; }, never, ["[fkLinkIconStart]", "*", "[fkLinkIconEnd]"], true, never>;
+}
+
+declare const FK_LINK_ICON_START: InjectionToken<FkLinkIconStartDirective>;
+declare const FK_LINK_ICON_END: InjectionToken<FkLinkIconEndDirective>;
+/**
+ * Marker directive for the leading icon slot inside `<fk-link>`.
+ * Mirrors the `[fkButtonIconStart]` pattern on `<fk-button>`.
+ *
+ * Apply to an `<fk-icon>` (or any element) projected as a child:
+ *
+ * ```html
+ * <fk-link variant="primary" (clicked)="download()">
+ *   <fk-icon name="download" fkLinkIconStart />
+ *   Download sample CSV
+ * </fk-link>
+ * ```
+ *
+ * The directive itself only marks the projection slot and applies
+ * `aria-hidden="true"` so screen readers don't announce decorative
+ * icons twice.
+ */
+declare class FkLinkIconStartDirective {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<FkLinkIconStartDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<FkLinkIconStartDirective, "[fkLinkIconStart]", never, {}, {}, never, never, true, never>;
+}
+/**
+ * Marker directive for the trailing icon slot inside `<fk-link>`.
+ * Note: the auto-shown external-link icon (when `href` points
+ * off-site) renders separately and is not affected by this slot.
+ */
+declare class FkLinkIconEndDirective {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<FkLinkIconEndDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<FkLinkIconEndDirective, "[fkLinkIconEnd]", never, {}, {}, never, never, true, never>;
+}
+
+export { FK_LINK_ICON_END, FK_LINK_ICON_START, FkLinkIconEndDirective, FkLinkIconStartDirective, LinkComponent };
+export type { LinkSize, LinkUnderline, LinkVariant };

package/types/frame-kit-ui-ng-core-separator.d.ts

@@ -0,0 +1,28 @@
+import * as _angular_core from '@angular/core';
+
+declare class SeparatorComponent {
+    /** Space above the separator line; any valid CSS length or token. */
+    readonly marginTop: _angular_core.InputSignal<string | null>;
+    /** Space below the separator line; any valid CSS length or token. */
+    readonly marginBottom: _angular_core.InputSignal<string | null>;
+    /** Color of the separator line; any valid CSS color value or token. */
+    readonly color: _angular_core.InputSignal<string | null>;
+    readonly className: _angular_core.InputSignal<string>;
+    readonly classes: _angular_core.Signal<string>;
+    get hostClass(): string;
+    get hostMarginTop(): string | null;
+    get hostMarginBottom(): string | null;
+    get hostColor(): string | null;
+    readonly role = "separator";
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SeparatorComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SeparatorComponent, "fk-separator", never, { "marginTop": { "alias": "marginTop"; "required": false; "isSignal": true; }; "marginBottom": { "alias": "marginBottom"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "className": { "alias": "className"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+type SeparatorProps = {
+    marginTop?: string | null;
+    marginBottom?: string | null;
+    color?: string | null;
+};
+
+export { SeparatorComponent };
+export type { SeparatorProps };

package/types/frame-kit-ui-ng-core-text.d.ts

@@ -0,0 +1,186 @@
+import * as _angular_core from '@angular/core';
+import { TemplateRef } from '@angular/core';
+
+/**
+ * Text variant types (type scale)
+ * - body: standard body text (default)
+ * - lead: hero/intro paragraph text
+ * - small: smaller body text
+ * - caption: small caption text
+ * - label: form label text
+ * - code: monospace/code text
+ */
+type TextVariant = 'body' | 'lead' | 'small' | 'caption' | 'label' | 'code';
+/**
+ * Text tone/color variants
+ * - default: standard text color
+ * - muted: muted/subdued text
+ * - subtle: very subtle text
+ * - danger: error/danger text
+ * - success: success/positive text
+ */
+type TextTone = 'default' | 'muted' | 'subtle' | 'danger' | 'success';
+/**
+ * Text alignment
+ * - inherit: inherits from parent (default)
+ * - start: left-aligned (default for LTR)
+ * - center: centered
+ * - end: right-aligned (default for RTL)
+ * - justify: justified
+ */
+type TextAlign = 'inherit' | 'start' | 'center' | 'end' | 'justify';
+/**
+ * Font weight
+ * - normal: normal weight (400)
+ * - medium: medium weight (500)
+ * - semibold: semibold weight (600)
+ * - bold: bold weight (700)
+ */
+type TextWeight = 'normal' | 'medium' | 'semibold' | 'bold';
+
+/**
+ * Text Component
+ *
+ * A flexible typography component that supports:
+ * - Semantic HTML elements (p, span, div, label, small)
+ * - Design token-based variants (type scale)
+ * - Tone/color variants
+ * - Text truncation (single-line and multi-line)
+ * - Text alignment
+ * - Font weight control
+ * - Accessibility features (visually hidden, ARIA)
+ * - Responsive typography
+ *
+ * @example
+ * ```html
+ * <!-- Basic paragraph -->
+ * <fk-text>This is body text</fk-text>
+ *
+ * <!-- Small caption -->
+ * <fk-text variant="caption" tone="muted">
+ *   Last updated: 2 hours ago
+ * </fk-text>
+ *
+ * <!-- Truncated text -->
+ * <fk-text [truncate]="true">
+ *   This is a very long text that will be truncated...
+ * </fk-text>
+ *
+ * <!-- Multi-line clamp -->
+ * <fk-text [maxLines]="3">
+ *   Long description that will be clamped to 3 lines with ellipsis
+ * </fk-text>
+ *
+ * <!-- Inline span -->
+ * <fk-text as="span" variant="small" tone="muted">
+ *   Inline text
+ * </fk-text>
+ *
+ * <!-- Form label -->
+ * <fk-text as="label" variant="label" weight="semibold" htmlFor="email-input">
+ *   Email Address
+ * </fk-text>
+ * <input id="email-input" type="email" />
+ * ```
+ */
+declare class TextComponent {
+    /**
+     * Semantic HTML element to render
+     * @default 'p'
+     */
+    readonly as: _angular_core.InputSignal<"small" | "label" | "p" | "span" | "div">;
+    /**
+     * Typography variant (type scale)
+     * @default 'body'
+     */
+    readonly variant: _angular_core.InputSignal<TextVariant>;
+    /**
+     * Text tone/color
+     * @default 'default'
+     */
+    readonly tone: _angular_core.InputSignal<TextTone>;
+    /**
+     * Text alignment
+     * @default 'inherit'
+     */
+    readonly align: _angular_core.InputSignal<TextAlign>;
+    /**
+     * Font weight
+     * @default null (uses variant default)
+     */
+    readonly weight: _angular_core.InputSignal<TextWeight | null>;
+    /**
+     * Enable single-line truncation with ellipsis
+     * @default false
+     */
+    readonly truncate: _angular_core.InputSignal<boolean>;
+    /**
+     * Maximum number of lines (multi-line clamp)
+     * @default null (no clamping)
+     */
+    readonly maxLines: _angular_core.InputSignal<number | null>;
+    /**
+     * Add bottom margin/gutter
+     * @default false
+     */
+    readonly gutterBottom: _angular_core.InputSignal<boolean>;
+    /**
+     * Italic text style
+     * @default false
+     */
+    readonly italic: _angular_core.InputSignal<boolean>;
+    /**
+     * Visually hide the text (screen reader only)
+     * @default false
+     */
+    readonly visuallyHidden: _angular_core.InputSignal<boolean>;
+    /**
+     * Additional CSS classes
+     */
+    readonly className: _angular_core.InputSignal<string>;
+    /**
+     * ID attribute
+     */
+    readonly id: _angular_core.InputSignal<string | null>;
+    /**
+     * ARIA label (for accessibility)
+     */
+    readonly ariaLabel: _angular_core.InputSignal<string | null>;
+    /**
+     * ARIA described-by (for accessibility)
+     */
+    readonly ariaDescribedBy: _angular_core.InputSignal<string | null>;
+    /**
+     * Role attribute (usually not needed)
+     */
+    readonly role: _angular_core.InputSignal<string | null>;
+    /**
+     * For attribute (when using as="label" to associate with an input)
+     */
+    readonly htmlFor: _angular_core.InputSignal<string | null>;
+    private readonly pTemplate;
+    private readonly spanTemplate;
+    private readonly divTemplate;
+    private readonly labelTemplate;
+    private readonly smallTemplate;
+    /**
+     * Host classes — single source of truth
+     */
+    readonly classes: _angular_core.Signal<string>;
+    get hostClass(): string;
+    /**
+     * Computed: inline styles for line clamping
+     */
+    readonly lineClampStyle: _angular_core.Signal<{
+        '-webkit-line-clamp': string;
+    } | null>;
+    /**
+     * Computed: choose the correct element template
+     */
+    readonly template: _angular_core.Signal<TemplateRef<unknown>>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TextComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TextComponent, "fk-text", never, { "as": { "alias": "as"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "tone": { "alias": "tone"; "required": false; "isSignal": true; }; "align": { "alias": "align"; "required": false; "isSignal": true; }; "weight": { "alias": "weight"; "required": false; "isSignal": true; }; "truncate": { "alias": "truncate"; "required": false; "isSignal": true; }; "maxLines": { "alias": "maxLines"; "required": false; "isSignal": true; }; "gutterBottom": { "alias": "gutterBottom"; "required": false; "isSignal": true; }; "italic": { "alias": "italic"; "required": false; "isSignal": true; }; "visuallyHidden": { "alias": "visuallyHidden"; "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; }; "ariaDescribedBy": { "alias": "ariaDescribedBy"; "required": false; "isSignal": true; }; "role": { "alias": "role"; "required": false; "isSignal": true; }; "htmlFor": { "alias": "htmlFor"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+export { TextComponent };
+export type { TextAlign, TextTone, TextVariant, TextWeight };