@loomui-ng/ui 0.0.0-stage → 0.1.0

package/types/loomui-ng-ui-field.d.ts

@@ -0,0 +1,169 @@
+import * as i0 from "@angular/core";
+import * as i1 from "@loomui-ng/ui/utils";
+export declare class UiFieldGroup {
+  readonly userClass: import("@angular/core").InputSignal<string>;
+  protected readonly classes: import("@angular/core").Signal<string>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<UiFieldGroup, never>;
+  static ɵdir: i0.ɵɵDirectiveDeclaration<UiFieldGroup, "[uiFieldGroup], ui-field-group", never, {
+    "userClass": {
+      "alias": "class";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, [{
+    directive: typeof i1.UiElementHost;
+    inputs: {};
+    outputs: {};
+  }]>;
+}
+export declare class UiFieldSet {
+  readonly userClass: import("@angular/core").InputSignal<string>;
+  protected readonly classes: import("@angular/core").Signal<string>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<UiFieldSet, never>;
+  static ɵdir: i0.ɵɵDirectiveDeclaration<UiFieldSet, "fieldset[uiFieldSet], ui-field-set", never, {
+    "userClass": {
+      "alias": "class";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, [{
+    directive: typeof i1.UiElementHost;
+    inputs: {};
+    outputs: {};
+  }]>;
+}
+export declare class UiFieldLegend {
+  readonly variant: import("@angular/core").InputSignal<"legend" | "label">;
+  readonly userClass: import("@angular/core").InputSignal<string>;
+  protected readonly classes: import("@angular/core").Signal<string>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<UiFieldLegend, never>;
+  static ɵdir: i0.ɵɵDirectiveDeclaration<UiFieldLegend, "legend[uiFieldLegend], ui-field-legend", never, {
+    "variant": {
+      "alias": "variant";
+      "required": false;
+      "isSignal": true;
+    };
+    "userClass": {
+      "alias": "class";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, [{
+    directive: typeof i1.UiElementHost;
+    inputs: {};
+    outputs: {};
+  }]>;
+}
+export declare class UiFieldDescription {
+  readonly userClass: import("@angular/core").InputSignal<string>;
+  protected readonly classes: import("@angular/core").Signal<string>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<UiFieldDescription, never>;
+  static ɵdir: i0.ɵɵDirectiveDeclaration<UiFieldDescription, "[uiFieldDescription], ui-field-description", never, {
+    "userClass": {
+      "alias": "class";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, [{
+    directive: typeof i1.UiElementHost;
+    inputs: {};
+    outputs: {};
+  }]>;
+}
+export declare const fieldVariants: (props?: ({
+  orientation?: "vertical" | "horizontal" | "responsive" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare class UiField {
+  readonly orientation: import("@angular/core").InputSignal<"vertical" | "horizontal" | "responsive">;
+  readonly userClass: import("@angular/core").InputSignal<string>;
+  protected readonly classes: import("@angular/core").Signal<string>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<UiField, never>;
+  static ɵdir: i0.ɵɵDirectiveDeclaration<UiField, "[uiField], ui-field", never, {
+    "orientation": {
+      "alias": "orientation";
+      "required": false;
+      "isSignal": true;
+    };
+    "userClass": {
+      "alias": "class";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, [{
+    directive: typeof i1.UiElementHost;
+    inputs: {};
+    outputs: {};
+  }]>;
+}
+export declare class UiFieldLabel {
+  readonly userClass: import("@angular/core").InputSignal<string>;
+  protected readonly classes: import("@angular/core").Signal<string>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<UiFieldLabel, never>;
+  static ɵdir: i0.ɵɵDirectiveDeclaration<UiFieldLabel, "label[uiFieldLabel], ui-field-label", never, {
+    "userClass": {
+      "alias": "class";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, [{
+    directive: typeof i1.UiElementHost;
+    inputs: {};
+    outputs: {};
+  }]>;
+}
+export declare class UiFieldContent {
+  readonly userClass: import("@angular/core").InputSignal<string>;
+  protected readonly classes: import("@angular/core").Signal<string>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<UiFieldContent, never>;
+  static ɵdir: i0.ɵɵDirectiveDeclaration<UiFieldContent, "[uiFieldContent], ui-field-content", never, {
+    "userClass": {
+      "alias": "class";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, [{
+    directive: typeof i1.UiElementHost;
+    inputs: {};
+    outputs: {};
+  }]>;
+}
+export declare const UI_FIELD_GENERATED: readonly [typeof UiFieldGroup, typeof UiFieldSet, typeof UiFieldLegend, typeof UiFieldDescription, typeof UiField, typeof UiFieldLabel, typeof UiFieldContent];
+/**
+ * <div uiFieldSeparator><span>or</span></div>
+ * Observed: relative -my-2 h-5 text-sm. The label span is shaped like shadcn's source (UNKNOWN on the live capture,
+ * which had no content child on the sampled instances).
+ */
+export declare class UiFieldSeparator {
+  readonly userClass: import("@angular/core").InputSignal<string>;
+  protected readonly classes: import("@angular/core").Signal<string>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<UiFieldSeparator, never>;
+  static ɵdir: i0.ɵɵDirectiveDeclaration<UiFieldSeparator, "[uiFieldSeparator], ui-field-separator", never, {
+    "userClass": {
+      "alias": "class";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, [{
+    directive: typeof i1.UiElementHost;
+    inputs: {};
+    outputs: {};
+  }]>;
+}
+/** Validation message: <div uiFieldError>Required</div>. Not captured on the live page; class from shadcn's source. */
+export declare class UiFieldError {
+  readonly userClass: import("@angular/core").InputSignal<string>;
+  protected readonly classes: import("@angular/core").Signal<string>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<UiFieldError, never>;
+  static ɵdir: i0.ɵɵDirectiveDeclaration<UiFieldError, "[uiFieldError], ui-field-error", never, {
+    "userClass": {
+      "alias": "class";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, [{
+    directive: typeof i1.UiElementHost;
+    inputs: {};
+    outputs: {};
+  }]>;
+}
+export declare const UI_FIELD: readonly [typeof import("@loomui-ng/ui/field").UiFieldGroup, typeof import("@loomui-ng/ui/field").UiFieldSet, typeof import("@loomui-ng/ui/field").UiFieldLegend, typeof import("@loomui-ng/ui/field").UiFieldDescription, typeof import("@loomui-ng/ui/field").UiField, typeof import("@loomui-ng/ui/field").UiFieldLabel, typeof import("@loomui-ng/ui/field").UiFieldContent, typeof UiFieldSeparator, typeof UiFieldError];

package/types/loomui-ng-ui-hover-card.d.ts

@@ -0,0 +1,62 @@
+import * as i1 from "@loomui-ng/ui/utils";
+import { UiLayerRoot, UiPopperContentBase } from "@loomui-ng/ui/utils";
+import * as i0 from "@angular/core";
+/**
+ * <div uiHoverCard class="contents">
+ *   <button uiButton variant="link" uiHoverCardTrigger>@nextjs</button>
+ *   <div uiHoverCardContent class="w-64">…</div>
+ * </div>
+ * Opens on pointer hover (openDelay 700ms) and keyboard focus; closes after closeDelay 300ms (Radix defaults).
+ */
+export declare class UiHoverCard extends UiLayerRoot {
+  readonly openDelay: import("@angular/core").InputSignalWithTransform<number, unknown>;
+  readonly closeDelay: import("@angular/core").InputSignalWithTransform<number, unknown>;
+  private timer;
+  constructor();
+  show(instant?: boolean): void;
+  hide(): void;
+  keep(): void;
+  static ɵfac: i0.ɵɵFactoryDeclaration<UiHoverCard, never>;
+  static ɵdir: i0.ɵɵDirectiveDeclaration<UiHoverCard, "[uiHoverCard], ui-hover-card", ["uiHoverCard"], {
+    "openDelay": {
+      "alias": "openDelay";
+      "required": false;
+      "isSignal": true;
+    };
+    "closeDelay": {
+      "alias": "closeDelay";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, [{
+    directive: typeof i1.UiElementHost;
+    inputs: {};
+    outputs: {};
+  }]>;
+}
+export declare class UiHoverCardTrigger {
+  protected readonly root: UiHoverCard;
+  private readonly el;
+  constructor();
+  protected onEnter(e: PointerEvent): void;
+  protected onFocus(): void;
+  static ɵfac: i0.ɵɵFactoryDeclaration<UiHoverCardTrigger, never>;
+  static ɵdir: i0.ɵɵDirectiveDeclaration<UiHoverCardTrigger, "[uiHoverCardTrigger], ui-hover-card-trigger", never, {}, {}, never, never, true, [{
+    directive: typeof i1.UiElementHost;
+    inputs: {};
+    outputs: {};
+  }]>;
+}
+export declare class UiHoverCardContent extends UiPopperContentBase {
+  protected readonly root: UiHoverCard;
+  protected readonly varPrefix = "--radix-hover-card";
+  protected readonly classes: import("@angular/core").Signal<string>;
+  constructor();
+  static ɵfac: i0.ɵɵFactoryDeclaration<UiHoverCardContent, never>;
+  static ɵdir: i0.ɵɵDirectiveDeclaration<UiHoverCardContent, "[uiHoverCardContent], ui-hover-card-content", never, {}, {}, never, never, true, [{
+    directive: typeof i1.UiElementHost;
+    inputs: {};
+    outputs: {};
+  }]>;
+}
+export declare const UI_HOVER_CARD: readonly [typeof UiHoverCard, typeof UiHoverCardTrigger, typeof UiHoverCardContent];

package/types/loomui-ng-ui-icon.d.ts

@@ -0,0 +1,156 @@
+import { SafeHtml } from "@angular/platform-browser";
+import * as i0 from "@angular/core";
+/** Lucide's icon node format: a list of [tag, attributes] pairs describing the SVG children. */
+export type IconNode = [tag: string, attrs: Record<string, string | number | undefined>][];
+/** `ChevronDown` / `chevron-down` → `chevron-down` (Lucide's canonical name). */
+export declare function toKebab(name: string): string;
+/** `chevron-down` → `ChevronDown` (the export name in the `lucide` package). */
+export declare function toPascal(name: string): string;
+/**
+ * Registers icons so they can be used by name: `registerIcons({ Search, Moon })` then `<ui-icon name="search" />`.
+ * Keys may be PascalCase export names or kebab-case names. Importing only the icons you use keeps bundles small.
+ */
+export declare function registerIcons(icons: Record<string, IconNode>): void;
+/** Icons the Loom UI components render themselves (chevrons, check, x, …). Registered on first import. */
+export declare const LIB_ICONS: Record<string, IconNode>;
+/** Serialises an icon node to the SVG children markup (all values escaped). */
+export declare function iconChildren(node: IconNode): string;
+/** A complete standalone `<svg>` string (what Lucide's own `lucide-static` files look like). */
+export declare function iconToSvg(node: IconNode, opts?: {
+  size?: number;
+  strokeWidth?: number;
+  color?: string;
+}): string;
+/**
+ * Lucide icon.
+ *   <ui-icon name="search" />                 — by name (see registerIcons)
+ *   <ui-icon [icon]="Search" size="20" />     — by node (`import { Search } from 'lucide'`, tree-shakeable)
+ * Defaults to 16px (`size-4`, the shadcn convention); set `size`, or a size class such as class="size-6".
+ * Decorative by default (aria-hidden); pass `label` to expose it as an image.
+ */
+export declare class UiIcon {
+  private readonly sanitizer;
+  /** An icon node (preferred; tree-shakeable). */
+  readonly icon: import("@angular/core").InputSignal<IconNode | null | undefined>;
+  /** A registered icon name (kebab or Pascal case). */
+  readonly name: import("@angular/core").InputSignal<string>;
+  /** Pixel size; when omitted the icon is `size-4` (override with a class). */
+  readonly size: import("@angular/core").InputSignalWithTransform<number | undefined, unknown>;
+  readonly strokeWidth: import("@angular/core").InputSignalWithTransform<number, unknown>;
+  /** Keeps the stroke the same pixel width regardless of size (Lucide's absoluteStrokeWidth). */
+  readonly absoluteStrokeWidth: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  readonly color: import("@angular/core").InputSignal<string>;
+  readonly label: import("@angular/core").InputSignal<string>;
+  readonly userClass: import("@angular/core").InputSignal<string>;
+  protected readonly node: import("@angular/core").Signal<IconNode | null>;
+  protected readonly sw: import("@angular/core").Signal<number>;
+  protected readonly html: import("@angular/core").Signal<SafeHtml>;
+  protected readonly classes: import("@angular/core").Signal<string>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<UiIcon, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<UiIcon, "ui-icon", never, {
+    "icon": {
+      "alias": "icon";
+      "required": false;
+      "isSignal": true;
+    };
+    "name": {
+      "alias": "name";
+      "required": false;
+      "isSignal": true;
+    };
+    "size": {
+      "alias": "size";
+      "required": false;
+      "isSignal": true;
+    };
+    "strokeWidth": {
+      "alias": "strokeWidth";
+      "required": false;
+      "isSignal": true;
+    };
+    "absoluteStrokeWidth": {
+      "alias": "absoluteStrokeWidth";
+      "required": false;
+      "isSignal": true;
+    };
+    "color": {
+      "alias": "color";
+      "required": false;
+      "isSignal": true;
+    };
+    "label": {
+      "alias": "label";
+      "required": false;
+      "isSignal": true;
+    };
+    "userClass": {
+      "alias": "class";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, never>;
+}
+/**
+ * Same icons rendered onto a real <svg> element, so parent selectors such as `[&>svg]:size-4` and `has-[>svg]` keep working:
+ *   <svg uiIcon="chevron-down" class="size-4"></svg>      <svg uiIcon [icon]="Search"></svg>
+ * This is what the Loom UI components use internally.
+ */
+export declare class UiIconSvg {
+  private readonly sanitizer;
+  readonly name: import("@angular/core").InputSignal<string>;
+  readonly icon: import("@angular/core").InputSignal<IconNode | null | undefined>;
+  readonly size: import("@angular/core").InputSignalWithTransform<number | undefined, unknown>;
+  readonly strokeWidth: import("@angular/core").InputSignalWithTransform<number, unknown>;
+  readonly absoluteStrokeWidth: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  readonly color: import("@angular/core").InputSignal<string>;
+  readonly label: import("@angular/core").InputSignal<string>;
+  readonly userClass: import("@angular/core").InputSignal<string>;
+  protected readonly node: import("@angular/core").Signal<IconNode | null>;
+  protected readonly sw: import("@angular/core").Signal<number>;
+  protected readonly html: import("@angular/core").Signal<SafeHtml>;
+  protected readonly classes: import("@angular/core").Signal<string | null>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<UiIconSvg, never>;
+  static ɵdir: i0.ɵɵDirectiveDeclaration<UiIconSvg, "svg[uiIcon]", never, {
+    "name": {
+      "alias": "uiIcon";
+      "required": false;
+      "isSignal": true;
+    };
+    "icon": {
+      "alias": "icon";
+      "required": false;
+      "isSignal": true;
+    };
+    "size": {
+      "alias": "size";
+      "required": false;
+      "isSignal": true;
+    };
+    "strokeWidth": {
+      "alias": "strokeWidth";
+      "required": false;
+      "isSignal": true;
+    };
+    "absoluteStrokeWidth": {
+      "alias": "absoluteStrokeWidth";
+      "required": false;
+      "isSignal": true;
+    };
+    "color": {
+      "alias": "color";
+      "required": false;
+      "isSignal": true;
+    };
+    "label": {
+      "alias": "label";
+      "required": false;
+      "isSignal": true;
+    };
+    "userClass": {
+      "alias": "class";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, never>;
+}
+export declare const UI_ICON: readonly [typeof UiIcon, typeof UiIconSvg];

package/types/loomui-ng-ui-input-group.d.ts

@@ -0,0 +1,130 @@
+import * as i0 from "@angular/core";
+import * as i1 from "@loomui-ng/ui/utils";
+import { UiNativeControl } from "@loomui-ng/ui/utils";
+export declare class UiInputGroup {
+  readonly userClass: import("@angular/core").InputSignal<string>;
+  protected readonly classes: import("@angular/core").Signal<string>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<UiInputGroup, never>;
+  static ɵdir: i0.ɵɵDirectiveDeclaration<UiInputGroup, "[uiInputGroup], ui-input-group", never, {
+    "userClass": {
+      "alias": "class";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, [{
+    directive: typeof i1.UiElementHost;
+    inputs: {};
+    outputs: {};
+  }]>;
+}
+export declare class UiInputGroupControl {
+  readonly userClass: import("@angular/core").InputSignal<string>;
+  protected readonly classes: import("@angular/core").Signal<string>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<UiInputGroupControl, never>;
+  static ɵdir: i0.ɵɵDirectiveDeclaration<UiInputGroupControl, "input[uiInputGroupControl]", never, {
+    "userClass": {
+      "alias": "class";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, never>;
+}
+export declare const inputGroupAddonVariants: (props?: ({
+  align?: "inline-start" | "inline-end" | "block-start" | "block-end" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare class UiInputGroupAddon {
+  readonly align: import("@angular/core").InputSignal<"inline-start" | "inline-end" | "block-start" | "block-end">;
+  readonly userClass: import("@angular/core").InputSignal<string>;
+  protected readonly classes: import("@angular/core").Signal<string>;
+  private readonly el;
+  /** Clicking the addon (not a button inside it) focuses the control, like shadcn. */
+  protected onClick(e: MouseEvent): void;
+  static ɵfac: i0.ɵɵFactoryDeclaration<UiInputGroupAddon, never>;
+  static ɵdir: i0.ɵɵDirectiveDeclaration<UiInputGroupAddon, "[uiInputGroupAddon], ui-input-group-addon", never, {
+    "align": {
+      "alias": "align";
+      "required": false;
+      "isSignal": true;
+    };
+    "userClass": {
+      "alias": "class";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, [{
+    directive: typeof i1.UiElementHost;
+    inputs: {};
+    outputs: {};
+  }]>;
+}
+export declare const UI_INPUT_GROUP_GENERATED: readonly [typeof UiInputGroup, typeof UiInputGroupControl, typeof UiInputGroupAddon];
+/**
+ * <ui-input-group><ui-input-group-control placeholder="Search…" /></ui-input-group>
+ * Custom-element form of `<input uiInputGroupControl>`: a real input lives inside, so ngModel / reactive forms work.
+ */
+export declare class UiInputGroupControlElement extends UiNativeControl {
+  readonly type: import("@angular/core").InputSignal<string>;
+  readonly min: import("@angular/core").InputSignal<string | number | null>;
+  readonly max: import("@angular/core").InputSignal<string | number | null>;
+  readonly step: import("@angular/core").InputSignal<string | number | null>;
+  readonly pattern: import("@angular/core").InputSignal<string>;
+  readonly maxlength: import("@angular/core").InputSignal<number | null>;
+  readonly minlength: import("@angular/core").InputSignal<number | null>;
+  readonly accept: import("@angular/core").InputSignal<string>;
+  readonly inputmode: import("@angular/core").InputSignal<string>;
+  readonly multiple: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<UiInputGroupControlElement, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<UiInputGroupControlElement, "ui-input-group-control", never, {
+    "type": {
+      "alias": "type";
+      "required": false;
+      "isSignal": true;
+    };
+    "min": {
+      "alias": "min";
+      "required": false;
+      "isSignal": true;
+    };
+    "max": {
+      "alias": "max";
+      "required": false;
+      "isSignal": true;
+    };
+    "step": {
+      "alias": "step";
+      "required": false;
+      "isSignal": true;
+    };
+    "pattern": {
+      "alias": "pattern";
+      "required": false;
+      "isSignal": true;
+    };
+    "maxlength": {
+      "alias": "maxlength";
+      "required": false;
+      "isSignal": true;
+    };
+    "minlength": {
+      "alias": "minlength";
+      "required": false;
+      "isSignal": true;
+    };
+    "accept": {
+      "alias": "accept";
+      "required": false;
+      "isSignal": true;
+    };
+    "inputmode": {
+      "alias": "inputmode";
+      "required": false;
+      "isSignal": true;
+    };
+    "multiple": {
+      "alias": "multiple";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, never>;
+}
+export declare const UI_INPUT_GROUP: readonly [typeof import("@loomui-ng/ui/input-group").UiInputGroup, typeof UiInputGroupControl, typeof import("@loomui-ng/ui/input-group").UiInputGroupAddon, typeof UiInputGroupControlElement];

package/types/loomui-ng-ui-input-otp.d.ts

@@ -0,0 +1,149 @@
+import { ControlValueAccessor } from "@angular/forms";
+import * as i0 from "@angular/core";
+import * as i1 from "@loomui-ng/ui/utils";
+export declare const inputOtpGroupClass = "flex items-center rounded-lg has-aria-invalid:border-destructive has-aria-invalid:ring-3 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40";
+export declare const inputOtpSlotClass = "relative flex size-8 items-center justify-center border-y border-e border-input text-sm transition-all outline-none first:rounded-s-lg first:border-s last:rounded-e-lg aria-invalid:border-destructive data-[active=true]:z-10 data-[active=true]:border-ring data-[active=true]:ring-3 data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:border-destructive data-[active=true]:aria-invalid:ring-destructive/20 dark:bg-input/30 dark:data-[active=true]:aria-invalid:ring-destructive/40";
+export declare const inputOtpSeparatorClass = "flex items-center [&_svg:not([class*='size-'])]:size-4";
+export declare const UI_INPUT_OTP_GENERATED: readonly [];
+/**
+ * <div uiInputOtp [maxLength]="6" [(value)]="code">
+ *   <div uiInputOtpGroup><div uiInputOtpSlot [index]="0"></div>…</div>
+ * </div>
+ * One real (transparent) <input> captures typing, paste and caret keys; slots only render characters (input-otp's approach).
+ * Observed input attrs: autocomplete="one-time-code", inputmode="numeric", maxlength, pattern, spellcheck=false.
+ */
+export declare class UiInputOtp implements ControlValueAccessor {
+  readonly value: import("@angular/core").ModelSignal<string>;
+  readonly maxLength: import("@angular/core").InputSignalWithTransform<number, unknown>;
+  /** Allowed characters; default digits only (observed `^\d+$`; alphanumeric uses `^[a-zA-Z0-9]+$`). */
+  readonly pattern: import("@angular/core").InputSignal<string>;
+  readonly disabled: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  readonly invalid: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  readonly required: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  readonly userClass: import("@angular/core").InputSignal<string>;
+  readonly complete: import("@angular/core").OutputEmitterRef<string>;
+  private readonly field;
+  private readonly cvaDisabled;
+  readonly isDisabled: import("@angular/core").Signal<boolean>;
+  readonly focused: import("@angular/core").WritableSignal<boolean>;
+  private readonly caret;
+  protected readonly inputMode: import("@angular/core").Signal<"numeric" | "text">;
+  protected readonly classes: import("@angular/core").Signal<string>;
+  private onChange;
+  private onTouched;
+  /** Index of the slot that currently owns the caret. */
+  readonly activeIndex: import("@angular/core").Signal<number>;
+  charAt(i: number): string;
+  focus(index?: number): void;
+  protected onInput(e: Event): void;
+  protected onFocus(): void;
+  protected onBlur(): void;
+  protected syncCaret(): void;
+  writeValue(v: string | null): void;
+  registerOnChange(fn: (v: string) => void): void;
+  registerOnTouched(fn: () => void): void;
+  setDisabledState(d: boolean): void;
+  static ɵfac: i0.ɵɵFactoryDeclaration<UiInputOtp, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<UiInputOtp, "div[uiInputOtp], ui-input-otp", never, {
+    "value": {
+      "alias": "value";
+      "required": false;
+      "isSignal": true;
+    };
+    "maxLength": {
+      "alias": "maxLength";
+      "required": false;
+      "isSignal": true;
+    };
+    "pattern": {
+      "alias": "pattern";
+      "required": false;
+      "isSignal": true;
+    };
+    "disabled": {
+      "alias": "disabled";
+      "required": false;
+      "isSignal": true;
+    };
+    "invalid": {
+      "alias": "invalid";
+      "required": false;
+      "isSignal": true;
+    };
+    "required": {
+      "alias": "required";
+      "required": false;
+      "isSignal": true;
+    };
+    "userClass": {
+      "alias": "class";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "value": "valueChange";
+    "complete": "complete";
+  }, never, ["*"], true, [{
+    directive: typeof i1.UiElementHost;
+    inputs: {};
+    outputs: {};
+  }]>;
+}
+export declare class UiInputOtpGroup {
+  readonly userClass: import("@angular/core").InputSignal<string>;
+  protected readonly classes: import("@angular/core").Signal<string>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<UiInputOtpGroup, never>;
+  static ɵdir: i0.ɵɵDirectiveDeclaration<UiInputOtpGroup, "[uiInputOtpGroup], ui-input-otp-group", never, {
+    "userClass": {
+      "alias": "class";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, [{
+    directive: typeof i1.UiElementHost;
+    inputs: {};
+    outputs: {};
+  }]>;
+}
+export declare class UiInputOtpSlot {
+  protected readonly otp: UiInputOtp;
+  readonly index: import("@angular/core").InputSignal<number>;
+  readonly userClass: import("@angular/core").InputSignal<string>;
+  protected readonly char: import("@angular/core").Signal<string>;
+  protected readonly active: import("@angular/core").Signal<boolean>;
+  protected readonly classes: import("@angular/core").Signal<string>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<UiInputOtpSlot, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<UiInputOtpSlot, "[uiInputOtpSlot], ui-input-otp-slot", never, {
+    "index": {
+      "alias": "index";
+      "required": true;
+      "isSignal": true;
+    };
+    "userClass": {
+      "alias": "class";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, [{
+    directive: typeof i1.UiElementHost;
+    inputs: {};
+    outputs: {};
+  }]>;
+}
+export declare class UiInputOtpSeparator {
+  readonly userClass: import("@angular/core").InputSignal<string>;
+  protected readonly classes: import("@angular/core").Signal<string>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<UiInputOtpSeparator, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<UiInputOtpSeparator, "[uiInputOtpSeparator], ui-input-otp-separator", never, {
+    "userClass": {
+      "alias": "class";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, [{
+    directive: typeof i1.UiElementHost;
+    inputs: {};
+    outputs: {};
+  }]>;
+}
+export declare const UI_INPUT_OTP: readonly [typeof UiInputOtp, typeof UiInputOtpGroup, typeof UiInputOtpSlot, typeof UiInputOtpSeparator];