@loomui-ng/ui 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,274 @@
+import * as i0 from "@angular/core";
+import * as i1 from "@loomui-ng/ui/utils";
+export declare const questionnaireClass = "flex w-full min-w-0 flex-col gap-4 mx-auto max-w-md mt-auto";
+export declare const questionnaireProgressClass = "min-h-[1lh] w-fit min-w-[14ch] text-xs font-medium text-muted-foreground tabular-nums";
+export declare const questionnaireItemClass = "flex min-w-0 flex-col gap-4 border-0 p-0 outline-none data-active:animate-in data-active:fade-in-0 data-active:slide-in-from-bottom-2 data-active:duration-300 motion-reduce:animate-none";
+export declare const questionnaireTitleClass = "cn-font-heading text-base leading-snug font-medium text-pretty [&:not(:has(~[data-slot=questionnaire-description]))]:mb-4 group-data-[size=sm]/card:text-sm";
+export declare const questionnaireDescriptionClass = "text-sm text-pretty text-muted-foreground";
+export declare const questionnaireChoicesClass = "group/questionnaire-choices grid min-w-0 gap-2";
+export declare const questionnaireChoiceClass = "group/questionnaire-choice relative flex min-h-11 cursor-pointer items-start gap-2.5 rounded-lg border border-input bg-transparent px-3 py-2.5 text-start text-sm transition-colors outline-none select-none hover:bg-muted/50 has-[>input:focus-visible]:border-ring has-[>input:focus-visible]:ring-3 has-[>input:focus-visible]:ring-ring/50 data-invalid:border-destructive dark:bg-input/20 data-checked:border-primary/40 data-checked:bg-muted dark:data-checked:bg-muted data-disabled:pointer-events-none data-disabled:cursor-not-allowed data-disabled:opacity-50";
+export declare const questionnaireChoiceInputClass = "absolute inset-0 z-10 size-full cursor-pointer opacity-0";
+export declare const questionnaireChoiceIndicatorClass = "pointer-events-none relative flex size-4 shrink-0 translate-y-[--spacing(0.45)] items-center justify-center rounded-[4px] border border-input group-has-data-[slot=questionnaire-choice-description]/questionnaire-choice:translate-y-0.5 group-data-[type=radio]/questionnaire-choice:rounded-full group-data-checked/questionnaire-choice:border-primary group-data-checked/questionnaire-choice:bg-primary group-data-checked/questionnaire-choice:text-primary-foreground dark:bg-input/30 dark:group-data-checked/questionnaire-choice:bg-primary";
+export declare const questionnaireChoiceIndicatorDotClass = "hidden size-2 rounded-full bg-primary-foreground group-data-[type=checkbox]/questionnaire-choice:hidden group-data-checked/questionnaire-choice:block";
+export declare const questionnaireChoiceLabelClass = "flex min-w-0 flex-1 flex-col gap-0.5 leading-snug";
+export declare const questionnaireChoiceShortcutClass = "pointer-events-none ms-auto hidden size-5 shrink-0 translate-y-[--spacing(0.45)] items-center justify-center rounded-md border border-input bg-background font-mono text-[0.625rem] leading-none font-medium text-muted-foreground group-has-data-[slot=questionnaire-choice-description]/questionnaire-choice:translate-y-0.5 group-data-[shortcut]/questionnaire-choice:inline-flex";
+export declare const questionnaireInputWrapperClass = "group/questionnaire-input relative w-full min-w-0";
+export declare const questionnaireInputClass = "h-8 min-h-11 w-full min-w-0 rounded-lg border border-input bg-transparent px-2.5 py-1 text-base transition-[color,box-shadow,background-color] outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 sm:min-h-0 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground";
+export declare const questionnaireErrorClass = "mt-2 text-sm text-destructive";
+export declare const questionnaireActionsClass = "grid min-h-11 w-full grid-cols-[minmax(0,1fr)_auto_auto] items-center gap-2 sm:min-h-8";
+export declare const UI_QUESTIONNAIRE_GENERATED: readonly [];
+/**
+ * Step-by-step form. Observed root: <form novalidate data-current data-total data-first data-last data-shortcuts>;
+ * one <fieldset> per question (hidden + inert unless active) with data-status/required/multiple.
+ *
+ * <form uiQuestionnaire #q="uiQuestionnaire" (submitted)="save($event)">
+ *   <div uiQuestionnaireProgress></div>
+ *   <fieldset uiQuestionnaireItem name="plan" required>
+ *     <legend uiQuestionnaireTitle>Pick a plan</legend>
+ *     <div uiQuestionnaireChoices>
+ *       <label uiQuestionnaireChoice value="free">Free</label>
+ *     </div>
+ *   </fieldset>
+ *   <div uiQuestionnaireActions>…buttons call q.previous() / q.next() / q.submit()…</div>
+ * </form>
+ *
+ * Keys (observed in the docs; wiring is own reconstruction): letter/number shortcuts pick a choice, Enter = next,
+ * Ctrl/Cmd+Enter = submit. UNKNOWN: ArrowUp/Down inside choices relies on native radio-group behavior only.
+ */
+export declare class UiQuestionnaire {
+  readonly items: import("@angular/core").Signal<readonly any[]>;
+  readonly current: import("@angular/core").ModelSignal<number>;
+  readonly shortcuts: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  readonly userClass: import("@angular/core").InputSignal<string>;
+  /** Emits { [itemName]: string | string[] } after every required question validated. */
+  readonly submitted: import("@angular/core").OutputEmitterRef<Record<string, string | string[]>>;
+  readonly total: import("@angular/core").Signal<number>;
+  readonly isFirst: import("@angular/core").Signal<boolean>;
+  readonly isLast: import("@angular/core").Signal<boolean>;
+  protected readonly classes: import("@angular/core").Signal<string>;
+  readonly activeItem: import("@angular/core").Signal<any>;
+  previous(): void;
+  /** Validates the active question first (when required); `skip` bypasses it for optional questions. */
+  next(): void;
+  skip(): void;
+  submit(): void;
+  private readonly el;
+  protected onKey(e: KeyboardEvent): void;
+  static ɵfac: i0.ɵɵFactoryDeclaration<UiQuestionnaire, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<UiQuestionnaire, "form[uiQuestionnaire], ui-questionnaire", ["uiQuestionnaire"], {
+    "current": {
+      "alias": "current";
+      "required": false;
+      "isSignal": true;
+    };
+    "shortcuts": {
+      "alias": "shortcuts";
+      "required": false;
+      "isSignal": true;
+    };
+    "userClass": {
+      "alias": "class";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "current": "currentChange";
+    "submitted": "submitted";
+  }, ["items"], ["*"], true, [{
+    directive: typeof i1.UiElementHost;
+    inputs: {};
+    outputs: {};
+  }]>;
+}
+export declare class UiQuestionnaireProgress {
+  protected readonly root: UiQuestionnaire;
+  readonly userClass: import("@angular/core").InputSignal<string>;
+  protected readonly classes: import("@angular/core").Signal<string>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<UiQuestionnaireProgress, never>;
+  static ɵdir: i0.ɵɵDirectiveDeclaration<UiQuestionnaireProgress, "div[uiQuestionnaireProgress], ui-questionnaire-progress", never, {
+    "userClass": {
+      "alias": "class";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, [{
+    directive: typeof i1.UiElementHost;
+    inputs: {};
+    outputs: {};
+  }]>;
+}
+export declare class UiQuestionnaireItem {
+  private readonly root;
+  readonly id: string;
+  readonly name: import("@angular/core").InputSignal<string>;
+  readonly required: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  readonly multiple: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  readonly userClass: import("@angular/core").InputSignal<string>;
+  readonly values: import("@angular/core").WritableSignal<string[]>;
+  readonly text: import("@angular/core").WritableSignal<string>;
+  readonly error: import("@angular/core").WritableSignal<string>;
+  protected readonly errorClass = "mt-2 text-sm text-destructive";
+  readonly index: import("@angular/core").Signal<number>;
+  readonly active: import("@angular/core").Signal<boolean>;
+  readonly answered: import("@angular/core").Signal<boolean>;
+  readonly status: import("@angular/core").Signal<"invalid" | "answered" | "pending">;
+  protected readonly classes: import("@angular/core").Signal<string>;
+  toggle(value: string): void;
+  validate(): boolean;
+  static ɵfac: i0.ɵɵFactoryDeclaration<UiQuestionnaireItem, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<UiQuestionnaireItem, "fieldset[uiQuestionnaireItem], ui-questionnaire-item", ["uiQuestionnaireItem"], {
+    "name": {
+      "alias": "name";
+      "required": false;
+      "isSignal": true;
+    };
+    "required": {
+      "alias": "required";
+      "required": false;
+      "isSignal": true;
+    };
+    "multiple": {
+      "alias": "multiple";
+      "required": false;
+      "isSignal": true;
+    };
+    "userClass": {
+      "alias": "class";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, ["*"], true, [{
+    directive: typeof i1.UiElementHost;
+    inputs: {};
+    outputs: {};
+  }]>;
+}
+export declare class UiQuestionnaireTitle {
+  readonly userClass: import("@angular/core").InputSignal<string>;
+  protected readonly classes: import("@angular/core").Signal<string>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<UiQuestionnaireTitle, never>;
+  static ɵdir: i0.ɵɵDirectiveDeclaration<UiQuestionnaireTitle, "legend[uiQuestionnaireTitle], ui-questionnaire-title", never, {
+    "userClass": {
+      "alias": "class";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, [{
+    directive: typeof i1.UiElementHost;
+    inputs: {};
+    outputs: {};
+  }]>;
+}
+export declare class UiQuestionnaireDescription {
+  readonly userClass: import("@angular/core").InputSignal<string>;
+  protected readonly classes: import("@angular/core").Signal<string>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<UiQuestionnaireDescription, never>;
+  static ɵdir: i0.ɵɵDirectiveDeclaration<UiQuestionnaireDescription, "p[uiQuestionnaireDescription], ui-questionnaire-description", never, {
+    "userClass": {
+      "alias": "class";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, [{
+    directive: typeof i1.UiElementHost;
+    inputs: {};
+    outputs: {};
+  }]>;
+}
+export declare class UiQuestionnaireChoices {
+  readonly userClass: import("@angular/core").InputSignal<string>;
+  protected readonly classes: import("@angular/core").Signal<string>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<UiQuestionnaireChoices, never>;
+  static ɵdir: i0.ɵɵDirectiveDeclaration<UiQuestionnaireChoices, "div[uiQuestionnaireChoices], ui-questionnaire-choices", never, {
+    "userClass": {
+      "alias": "class";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, [{
+    directive: typeof i1.UiElementHost;
+    inputs: {};
+    outputs: {};
+  }]>;
+}
+/** One option; projected content becomes the label. `shortcut` defaults to the 1-based position within its question. */
+export declare class UiQuestionnaireChoice {
+  protected readonly item: UiQuestionnaireItem;
+  protected readonly root: UiQuestionnaire;
+  private readonly el;
+  readonly value: import("@angular/core").InputSignal<string>;
+  readonly shortcut: import("@angular/core").InputSignal<string>;
+  readonly userClass: import("@angular/core").InputSignal<string>;
+  protected readonly checked: import("@angular/core").Signal<boolean>;
+  protected readonly shortcutKey: import("@angular/core").Signal<string>;
+  protected readonly classes: import("@angular/core").Signal<string>;
+  protected readonly inputClass = "absolute inset-0 z-10 size-full cursor-pointer opacity-0";
+  protected readonly indicatorClass = "pointer-events-none relative flex size-4 shrink-0 translate-y-[--spacing(0.45)] items-center justify-center rounded-[4px] border border-input group-has-data-[slot=questionnaire-choice-description]/questionnaire-choice:translate-y-0.5 group-data-[type=radio]/questionnaire-choice:rounded-full group-data-checked/questionnaire-choice:border-primary group-data-checked/questionnaire-choice:bg-primary group-data-checked/questionnaire-choice:text-primary-foreground dark:bg-input/30 dark:group-data-checked/questionnaire-choice:bg-primary";
+  protected readonly dotClass = "hidden size-2 rounded-full bg-primary-foreground group-data-[type=checkbox]/questionnaire-choice:hidden group-data-checked/questionnaire-choice:block";
+  protected readonly labelClass = "flex min-w-0 flex-1 flex-col gap-0.5 leading-snug";
+  protected readonly shortcutClass: string;
+  static ɵfac: i0.ɵɵFactoryDeclaration<UiQuestionnaireChoice, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<UiQuestionnaireChoice, "label[uiQuestionnaireChoice], ui-questionnaire-choice", never, {
+    "value": {
+      "alias": "value";
+      "required": true;
+      "isSignal": true;
+    };
+    "shortcut": {
+      "alias": "shortcut";
+      "required": false;
+      "isSignal": true;
+    };
+    "userClass": {
+      "alias": "class";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, ["*"], true, [{
+    directive: typeof i1.UiElementHost;
+    inputs: {};
+    outputs: {};
+  }]>;
+}
+/** Free-text answer. */
+export declare class UiQuestionnaireInput {
+  protected readonly item: UiQuestionnaireItem;
+  readonly placeholder: import("@angular/core").InputSignal<string>;
+  readonly userClass: import("@angular/core").InputSignal<string>;
+  protected readonly classes: import("@angular/core").Signal<string>;
+  protected readonly inputClass = "h-8 min-h-11 w-full min-w-0 rounded-lg border border-input bg-transparent px-2.5 py-1 text-base transition-[color,box-shadow,background-color] outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 sm:min-h-0 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground";
+  static ɵfac: i0.ɵɵFactoryDeclaration<UiQuestionnaireInput, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<UiQuestionnaireInput, "div[uiQuestionnaireInput], ui-questionnaire-input", never, {
+    "placeholder": {
+      "alias": "placeholder";
+      "required": false;
+      "isSignal": true;
+    };
+    "userClass": {
+      "alias": "class";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, [{
+    directive: typeof i1.UiElementHost;
+    inputs: {};
+    outputs: {};
+  }]>;
+}
+export declare class UiQuestionnaireActions {
+  readonly userClass: import("@angular/core").InputSignal<string>;
+  protected readonly classes: import("@angular/core").Signal<string>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<UiQuestionnaireActions, never>;
+  static ɵdir: i0.ɵɵDirectiveDeclaration<UiQuestionnaireActions, "div[uiQuestionnaireActions], ui-questionnaire-actions", never, {
+    "userClass": {
+      "alias": "class";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, [{
+    directive: typeof i1.UiElementHost;
+    inputs: {};
+    outputs: {};
+  }]>;
+}
+export declare const UI_QUESTIONNAIRE: readonly [typeof UiQuestionnaire, typeof UiQuestionnaireProgress, typeof UiQuestionnaireItem, typeof UiQuestionnaireTitle, typeof UiQuestionnaireDescription, typeof UiQuestionnaireChoices, typeof UiQuestionnaireChoice, typeof UiQuestionnaireInput, typeof UiQuestionnaireActions];

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

@@ -0,0 +1,109 @@
+import { Directionality } from "@angular/cdk/bidi";
+import { ControlValueAccessor } from "@angular/forms";
+import * as i0 from "@angular/core";
+import * as i1 from "@loomui-ng/ui/utils";
+export declare const radioGroupClass = "grid gap-2 w-full";
+export declare const radioGroupItemClass = "group/radio-group-item peer relative flex aspect-square size-4 shrink-0 rounded-full border border-input outline-none group-has-[:focus-visible]/field-label:ring-0 group-has-[:focus-visible]/field-label:not-data-checked:border-input after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground group-has-[:focus-visible]/field-label:data-checked:border-primary dark:data-checked:bg-primary";
+export declare const radioGroupIndicatorClass = "flex size-4 items-center justify-center";
+export declare const UI_RADIO_GROUP_GENERATED: readonly [];
+/**
+ * <div uiRadioGroup [(value)]="plan">
+ *   <button uiRadioGroupItem value="a" id="a"></button><label uiLabel for="a">A</label>
+ * </div>
+ * Arrow keys move focus AND select (Radix). Roving tabindex: the selected item (else the first) is the tab stop.
+ */
+export declare class UiRadioGroup implements ControlValueAccessor {
+  readonly value: import("@angular/core").ModelSignal<string>;
+  readonly required: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  readonly disabled: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  readonly orientation: import("@angular/core").InputSignal<"vertical" | "horizontal" | undefined>;
+  readonly userClass: import("@angular/core").InputSignal<string>;
+  protected readonly dir: Directionality;
+  private readonly cvaDisabled;
+  readonly isDisabled: import("@angular/core").Signal<boolean>;
+  readonly items: import("@angular/core").Signal<readonly any[]>;
+  protected readonly classes: import("@angular/core").Signal<string>;
+  private onChange;
+  onTouched: () => void;
+  readonly tabStop: import("@angular/core").Signal<any>;
+  select(v: string): void;
+  protected onKeydown(e: KeyboardEvent): void;
+  writeValue(v: string | null): void;
+  registerOnChange(fn: (v: string) => void): void;
+  registerOnTouched(fn: () => void): void;
+  setDisabledState(d: boolean): void;
+  static ɵfac: i0.ɵɵFactoryDeclaration<UiRadioGroup, never>;
+  static ɵdir: i0.ɵɵDirectiveDeclaration<UiRadioGroup, "[uiRadioGroup], ui-radio-group", ["uiRadioGroup"], {
+    "value": {
+      "alias": "value";
+      "required": false;
+      "isSignal": true;
+    };
+    "required": {
+      "alias": "required";
+      "required": false;
+      "isSignal": true;
+    };
+    "disabled": {
+      "alias": "disabled";
+      "required": false;
+      "isSignal": true;
+    };
+    "orientation": {
+      "alias": "orientation";
+      "required": false;
+      "isSignal": true;
+    };
+    "userClass": {
+      "alias": "class";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "value": "valueChange";
+  }, ["items"], never, true, [{
+    directive: typeof i1.UiElementHost;
+    inputs: {};
+    outputs: {};
+  }]>;
+}
+export declare class UiRadioGroupItem {
+  protected readonly group: UiRadioGroup;
+  readonly el: HTMLElement;
+  readonly value: import("@angular/core").InputSignal<string>;
+  readonly disabledInput: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  readonly invalid: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  readonly userClass: import("@angular/core").InputSignal<string>;
+  protected readonly checked: import("@angular/core").Signal<boolean>;
+  isDisabled: () => boolean;
+  protected readonly classes: import("@angular/core").Signal<string>;
+  protected onFocus(): void;
+  static ɵfac: i0.ɵɵFactoryDeclaration<UiRadioGroupItem, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<UiRadioGroupItem, "button[uiRadioGroupItem], ui-radio-group-item", never, {
+    "value": {
+      "alias": "value";
+      "required": false;
+      "isSignal": true;
+    };
+    "disabledInput": {
+      "alias": "disabled";
+      "required": false;
+      "isSignal": true;
+    };
+    "invalid": {
+      "alias": "invalid";
+      "required": false;
+      "isSignal": true;
+    };
+    "userClass": {
+      "alias": "class";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, [{
+    directive: typeof i1.UiElementHost;
+    inputs: {};
+    outputs: {};
+  }]>;
+}
+export declare const UI_RADIO_GROUP: readonly [typeof UiRadioGroup, typeof UiRadioGroupItem];

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

@@ -0,0 +1,121 @@
+import { Directionality } from "@angular/cdk/bidi";
+import * as i0 from "@angular/core";
+import * as i1 from "@loomui-ng/ui/utils";
+export declare const resizablePanelGroupClass = "flex h-full w-full aria-[orientation=vertical]:flex-col";
+export declare const resizableHandleClass = "relative flex w-px items-center justify-center bg-border ring-offset-background after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-hidden aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:after:start-0 aria-[orientation=horizontal]:after:h-1 aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:translate-x-0 aria-[orientation=horizontal]:after:-translate-y-1/2 [&[aria-orientation=horizontal]>div]:rotate-90 after:start-1/2 rtl:after:translate-x-1/2 rtl:aria-[orientation=horizontal]:after:-translate-x-0";
+export declare const UI_RESIZABLE_GENERATED: readonly [];
+/**
+ * <div uiResizablePanelGroup direction="horizontal" class="max-w-sm rounded-lg border">
+ *   <div uiResizablePanel [defaultSize]="50">One</div>
+ *   <div uiResizableHandle withHandle></div>
+ *   <div uiResizablePanel [defaultSize]="50">Two</div>
+ * </div>
+ * Observed (react-resizable-panels): group `data-group`, panel `data-panel`, handle role="separator" tabindex=0
+ * aria-valuemin/max/now, aria-orientation (perpendicular to the group), data-separator inactive|hover|active.
+ * Own implementation (the original wraps a React library): pointer drag + keyboard (arrows ±step, Home/End).
+ */
+export declare class UiResizablePanelGroup {
+  readonly direction: import("@angular/core").InputSignal<"horizontal" | "vertical">;
+  readonly userClass: import("@angular/core").InputSignal<string>;
+  readonly dir: Directionality;
+  readonly el: HTMLElement;
+  readonly panels: import("@angular/core").Signal<readonly any[]>;
+  readonly sizes: import("@angular/core").WritableSignal<number[]>;
+  protected readonly classes: import("@angular/core").Signal<string>;
+  constructor();
+  /** Move the boundary after panel `i` by `delta` percent (positive grows panel i). */
+  resize(i: number, delta: number): void;
+  isRtl(): boolean;
+  static ɵfac: i0.ɵɵFactoryDeclaration<UiResizablePanelGroup, never>;
+  static ɵdir: i0.ɵɵDirectiveDeclaration<UiResizablePanelGroup, "[uiResizablePanelGroup], ui-resizable-panel-group", ["uiResizablePanelGroup"], {
+    "direction": {
+      "alias": "direction";
+      "required": false;
+      "isSignal": true;
+    };
+    "userClass": {
+      "alias": "class";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, ["panels"], never, true, [{
+    directive: typeof i1.UiElementHost;
+    inputs: {};
+    outputs: {};
+  }]>;
+}
+export declare class UiResizablePanel {
+  private readonly group;
+  readonly defaultSize: import("@angular/core").InputSignalWithTransform<number | undefined, unknown>;
+  readonly minSize: import("@angular/core").InputSignalWithTransform<number, unknown>;
+  readonly maxSize: import("@angular/core").InputSignalWithTransform<number, unknown>;
+  readonly userClass: import("@angular/core").InputSignal<string>;
+  readonly index: import("@angular/core").Signal<number>;
+  readonly size: import("@angular/core").Signal<number>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<UiResizablePanel, never>;
+  static ɵdir: i0.ɵɵDirectiveDeclaration<UiResizablePanel, "[uiResizablePanel], ui-resizable-panel", never, {
+    "defaultSize": {
+      "alias": "defaultSize";
+      "required": false;
+      "isSignal": true;
+    };
+    "minSize": {
+      "alias": "minSize";
+      "required": false;
+      "isSignal": true;
+    };
+    "maxSize": {
+      "alias": "maxSize";
+      "required": false;
+      "isSignal": true;
+    };
+    "userClass": {
+      "alias": "class";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, [{
+    directive: typeof i1.UiElementHost;
+    inputs: {};
+    outputs: {};
+  }]>;
+}
+export declare class UiResizableHandle {
+  protected readonly group: UiResizablePanelGroup;
+  private readonly el;
+  readonly withHandle: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  readonly keyboardStep: import("@angular/core").InputSignalWithTransform<number, unknown>;
+  readonly userClass: import("@angular/core").InputSignal<string>;
+  protected readonly hover: import("@angular/core").WritableSignal<boolean>;
+  private readonly dragging;
+  protected readonly state: import("@angular/core").Signal<"drag" | "hover" | "inactive">;
+  protected readonly classes: import("@angular/core").Signal<string>;
+  /** Handle i sits between panel i and i+1: index = number of handles before it. */
+  private index;
+  protected valueNow(): number;
+  protected onPointerDown(e: PointerEvent): void;
+  protected onKeydown(e: KeyboardEvent): void;
+  static ɵfac: i0.ɵɵFactoryDeclaration<UiResizableHandle, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<UiResizableHandle, "[uiResizableHandle], ui-resizable-handle", never, {
+    "withHandle": {
+      "alias": "withHandle";
+      "required": false;
+      "isSignal": true;
+    };
+    "keyboardStep": {
+      "alias": "keyboardStep";
+      "required": false;
+      "isSignal": true;
+    };
+    "userClass": {
+      "alias": "class";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, [{
+    directive: typeof i1.UiElementHost;
+    inputs: {};
+    outputs: {};
+  }]>;
+}
+export declare const UI_RESIZABLE: readonly [typeof UiResizablePanelGroup, typeof UiResizablePanel, typeof UiResizableHandle];

package/types/loomui-ng-ui-scroll-area.d.ts

@@ -0,0 +1,44 @@
+import * as i0 from "@angular/core";
+import * as i1 from "@loomui-ng/ui/utils";
+export declare const scrollAreaClass = "relative w-96 whitespace-nowrap";
+export declare const scrollAreaViewportClass = "size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1";
+export declare const UI_SCROLL_AREA_GENERATED: readonly [];
+/**
+ * <div uiScrollArea class="h-72 w-48 rounded-md border"><div uiScrollAreaViewport>…long content…</div></div>
+ *
+ * Deviation: Radix draws custom overlay scrollbars (`scroll-area-scrollbar` / `scroll-area-thumb`, mounted on demand and not
+ * present in the captured idle DOM). This version scrolls natively and styles the native thin scrollbar instead.
+ */
+export declare class UiScrollArea {
+  readonly userClass: import("@angular/core").InputSignal<string>;
+  protected readonly classes: import("@angular/core").Signal<string>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<UiScrollArea, never>;
+  static ɵdir: i0.ɵɵDirectiveDeclaration<UiScrollArea, "[uiScrollArea], ui-scroll-area", never, {
+    "userClass": {
+      "alias": "class";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, [{
+    directive: typeof i1.UiElementHost;
+    inputs: {};
+    outputs: {};
+  }]>;
+}
+export declare class UiScrollAreaViewport {
+  readonly userClass: import("@angular/core").InputSignal<string>;
+  protected readonly classes: import("@angular/core").Signal<string>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<UiScrollAreaViewport, never>;
+  static ɵdir: i0.ɵɵDirectiveDeclaration<UiScrollAreaViewport, "[uiScrollAreaViewport], ui-scroll-area-viewport", never, {
+    "userClass": {
+      "alias": "class";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, [{
+    directive: typeof i1.UiElementHost;
+    inputs: {};
+    outputs: {};
+  }]>;
+}
+export declare const UI_SCROLL_AREA: readonly [typeof UiScrollArea, typeof UiScrollAreaViewport];