@formbox/htmx 0.4.4 → 0.5.0

package/dist/index.d.ts

@@ -1,56 +1,8 @@
-import { AnswerListProperties } from '@formbox/theme';
-import { AnswerScaffoldProperties } from '@formbox/theme';
-import { Attachment } from '@formbox/theme';
-import { CheckboxListProperties } from '@formbox/theme';
-import { CheckboxProperties } from '@formbox/theme';
-import { CustomExtensionDefinitions } from '@formbox/theme';
-import { CustomOptionFormProperties } from '@formbox/theme';
-import { DateInputProperties } from '@formbox/theme';
-import { DateTimeInputProperties } from '@formbox/theme';
-import { DisplayRendererProperties } from '@formbox/theme';
-import { ErrorsProperties } from '@formbox/theme';
 import { FhirVersion } from '@formbox/fhir';
-import { FileInputProperties } from '@formbox/theme';
-import { FlyoverProperties } from '@formbox/theme';
-import { FooterProperties } from '@formbox/theme';
-import { FormPagination } from '@formbox/theme';
-import { FormProperties } from '@formbox/theme';
-import { GroupListProperties } from '@formbox/theme';
-import { GroupScaffoldProperties } from '@formbox/theme';
-import { HeaderProperties } from '@formbox/theme';
-import { HelpProperties } from '@formbox/theme';
-import { InputGroupProperties } from '@formbox/theme';
-import { LabelProperties } from '@formbox/theme';
-import { LanguageSelectorProperties } from '@formbox/theme';
-import { LegalProperties } from '@formbox/theme';
-import { LinkProperties } from '@formbox/theme';
-import { MultiSelectInputProperties } from '@formbox/theme';
-import { NodePath } from '@formbox/theme';
-import { NumberInputProperties } from '@formbox/theme';
-import { OptionDisplayProperties } from '@formbox/theme';
-import { OptionItem } from '@formbox/theme';
-import { OptionsLoadingProperties } from '@formbox/theme';
+import { HTMLAttributes } from 'react';
 import { QuestionnaireOf } from '@formbox/fhir';
 import { QuestionnaireResponseOf } from '@formbox/fhir';
-import { QuestionScaffoldProperties } from '@formbox/theme';
-import { RadioButtonListProperties } from '@formbox/theme';
-import { RadioButtonProperties } from '@formbox/theme';
 import { ReactNode } from 'react';
-import { SelectedOptionItem } from '@formbox/theme';
-import { SelectInputProperties } from '@formbox/theme';
-import { SignatureInputProperties } from '@formbox/theme';
-import { SliderInputProperties } from '@formbox/theme';
-import { SpinnerInputProperties } from '@formbox/theme';
-import { StackProperties } from '@formbox/theme';
-import { Strings } from '@formbox/theme';
-import { TabContainerProperties } from '@formbox/theme';
-import { TableCell } from '@formbox/theme';
-import { TableColumn } from '@formbox/theme';
-import { TableProperties } from '@formbox/theme';
-import { TableRow } from '@formbox/theme';
-import { TextAreaProperties } from '@formbox/theme';
-import { TextInputProperties } from '@formbox/theme';
-import { TimeInputProperties } from '@formbox/theme';
 
 export declare const ACTION_FIELD = "fb[action]";
 
@@ -70,23 +22,67 @@ export declare type AddActionProperties = {
 
 export declare type AnswerField = "value" | "system" | "code" | "display" | "unit" | "baseline" | "signature";
 
+declare type AnswerListProperties = {
+    children: ReactNode;
+    onAdd?: (() => void) | undefined;
+    canAdd?: boolean | undefined;
+    path?: NodePath | undefined;
+};
+
 export declare type AnswerListTemplateProperties = Omit<TemplateBase<AnswerListProperties>, "children"> & {
     readonly children: string;
     readonly hasCount: boolean;
 } & AddActionProperties;
 
+declare type AnswerScaffoldProperties = {
+    control: ReactNode;
+    onRemove?: (() => void) | undefined;
+    canRemove?: boolean | undefined;
+    errors?: ReactNode;
+    children?: ReactNode;
+    path?: NodePath | undefined;
+};
+
 export declare type AnswerScaffoldTemplateProperties = Omit<TemplateBase<AnswerScaffoldProperties>, "children" | "control" | "errors"> & {
     readonly control: string;
     readonly errors?: string | undefined;
     readonly children?: string | undefined;
 } & RemoveActionProperties;
 
+declare type Attachment = {
+    title?: string | undefined;
+    url?: string | undefined;
+    size?: number | undefined;
+    contentType?: string | undefined;
+    data?: string | undefined;
+};
+
 export declare function attribute(name: string, value: unknown): string;
 
+declare type BivariantExtract<TContext, TValue> = {
+    bivarianceHack(context: TContext): TValue;
+}["bivarianceHack"];
+
 export declare function calculatedName(path: NodePath): string;
 
 export declare function checkboxHiddenValue(properties: CheckboxProperties, checkedValue: string): string | undefined;
 
+declare type CheckboxListProperties = {
+    options: readonly OptionItem[];
+    selectedOptions: readonly SelectedOptionItem[];
+    orientation?: ChoiceOrientation | undefined;
+    onSelect: (token: string) => void;
+    onDeselect: (token: string) => void;
+    specifyOtherOption?: OptionItem | undefined;
+    customOptionForm?: ReactNode;
+    id: string;
+    path?: NodePath | undefined;
+    ariaLabelledBy: string;
+    ariaDescribedBy?: string | undefined;
+    disabled?: boolean | undefined;
+    isLoading?: boolean | undefined;
+};
+
 export declare type CheckboxListTemplateProperties = Omit<FieldTemplateProperties<CheckboxListProperties>, "customOptionForm" | "options" | "selectedOptions" | "specifyOtherOption"> & {
     readonly baselineName?: string | undefined;
     readonly hiddenInputs: readonly HiddenTemplateInput[];
@@ -105,11 +101,26 @@ export declare type CheckboxOptionTemplateItem = TemplateOptionItem & {
     readonly hiddenInput?: HiddenTemplateInput | undefined;
 };
 
+declare type CheckboxProperties = {
+    id: string;
+    path?: NodePath | undefined;
+    checkedValue?: string | undefined;
+    uncheckedValue?: string | undefined;
+    checked: boolean;
+    onChange: () => void;
+    ariaLabelledBy: string;
+    ariaDescribedBy?: string | undefined;
+    disabled?: boolean;
+    label?: ReactNode;
+};
+
 export declare type CheckboxTemplateProperties = Omit<FieldTemplateProperties<CheckboxProperties>, "label"> & {
     readonly hiddenValue?: string | undefined;
     readonly label?: string | undefined;
 };
 
+declare type ChoiceOrientation = "horizontal" | "vertical";
+
 export declare type CollapsibleActionProperties = {
     readonly actionName?: string | undefined;
     readonly collapseLabel?: string | undefined;
@@ -125,6 +136,28 @@ export declare function compileTemplates(sources: TemplateSources): Templates;
 
 export declare function countName(path: NodePath): string;
 
+declare type CustomExtensionDefinition<TContext = unknown, TValue = unknown, TRepeats extends boolean = boolean> = {
+    readonly target: CustomExtensionTarget;
+    readonly url: string;
+    readonly repeats: TRepeats;
+    readonly extract: BivariantExtract<TContext, TValue>;
+};
+
+declare type CustomExtensionDefinitions<TContext = unknown> = Readonly<Record<string, CustomExtensionDefinition<TContext, unknown, boolean>>>;
+
+declare type CustomExtensionTarget = "questionnaire" | "item";
+
+declare type CustomExtensionValues = Readonly<Record<string, unknown>>;
+
+declare type CustomOptionFormProperties = {
+    id?: string | undefined;
+    content: ReactNode;
+    errors?: ReactNode | undefined;
+    onCancel: () => void;
+    onSubmit: () => void;
+    canSubmit?: boolean | undefined;
+};
+
 export declare type CustomOptionFormTemplateProperties = Omit<TemplateBase<CustomOptionFormProperties>, "content" | "errors"> & {
     readonly actionName: string;
     readonly cancelLabel: string;
@@ -137,6 +170,19 @@ export declare type CustomOptionFormTemplateProperties = Omit<TemplateBase<Custo
 
 export declare function customUnitFormName(path: NodePath): string;
 
+declare type DateInputProperties = {
+    id: string;
+    path?: NodePath | undefined;
+    value: string;
+    onChange: (v: string) => void;
+    disabled?: boolean | undefined;
+    placeholder?: string | undefined;
+    ariaLabelledBy: string;
+    ariaDescribedBy?: string | undefined;
+    min?: string | undefined;
+    max?: string | undefined;
+};
+
 export declare type DateInputTemplateProperties = FieldTemplateProperties<DateInputProperties> & {
     readonly inputType: "date" | "text";
     readonly step: undefined;
@@ -144,6 +190,19 @@ export declare type DateInputTemplateProperties = FieldTemplateProperties<DateIn
 
 export declare function dateTimeConstraint(value: string | undefined): string | undefined;
 
+declare type DateTimeInputProperties = {
+    id: string;
+    path?: NodePath | undefined;
+    value: string;
+    onChange: (v: string) => void;
+    disabled?: boolean | undefined;
+    placeholder?: string | undefined;
+    ariaLabelledBy: string;
+    ariaDescribedBy?: string | undefined;
+    min?: string | undefined;
+    max?: string | undefined;
+};
+
 export declare type DateTimeInputTemplateProperties = FieldTemplateProperties<DateTimeInputProperties> & {
     readonly baselineName?: string | undefined;
     readonly baselineValue?: string | undefined;
@@ -156,10 +215,21 @@ export declare type DateTimeInputTemplateProperties = FieldTemplateProperties<Da
 
 export declare function defaultAttributes(action: string | undefined): HtmlAttributes;
 
+declare type DisplayRendererProperties = {
+    linkId: string;
+    children: ReactNode;
+    customExtensions?: CustomExtensionValues | undefined;
+};
+
 export declare type DisplayRendererTemplateProperties = Omit<TemplateBase<DisplayRendererProperties>, "children"> & {
     readonly children: string;
 };
 
+declare type ErrorsProperties = {
+    id: string;
+    messages: string[];
+};
+
 export declare type ErrorsTemplateProperties = Omit<TemplateBase<ErrorsProperties>, "messages"> & {
     readonly hasMessages: boolean;
     readonly messages: readonly {
@@ -175,6 +245,17 @@ export declare function fieldAttributes(path: NodePath | undefined, field: Answe
 
 declare type FieldTemplateProperties<TProperties> = TemplateBase<TProperties> & TemplateFieldAttributes;
 
+declare type FileInputProperties = {
+    value: Attachment | undefined;
+    id: string;
+    path?: NodePath | undefined;
+    ariaLabelledBy: string;
+    ariaDescribedBy?: string | undefined;
+    disabled?: boolean | undefined;
+    accept?: string | undefined;
+    onChange?: ((file?: File) => void) | undefined;
+};
+
 export declare type FileInputTemplateProperties = FieldTemplateProperties<FileInputProperties> & {
     readonly clearId?: string | undefined;
     readonly clearLabel: string;
@@ -184,12 +265,22 @@ export declare type FileInputTemplateProperties = FieldTemplateProperties<FileIn
     readonly hxInclude: "closest form";
 };
 
+declare type FlyoverProperties = {
+    id: string;
+    children: ReactNode;
+};
+
 export declare type FlyoverTemplateProperties = Omit<TemplateBase<FlyoverProperties>, "children"> & {
     readonly ariaLabel: string;
     readonly buttonId?: string | undefined;
     readonly children: string;
 };
 
+declare type FooterProperties = {
+    linkId: string;
+    children: ReactNode;
+};
+
 export declare type FooterTemplateProperties = Omit<TemplateBase<FooterProperties>, "children"> & {
     readonly children: string;
 };
@@ -198,6 +289,31 @@ declare type FormFieldsProperties = Omit<FormTemplateProperties, "attributes" |
 
 export declare function formFieldsTemplate(properties: FormFieldsProperties): string;
 
+declare type FormPagination = {
+    current: number;
+    total: number;
+    onPrev: () => void;
+    onNext: () => void;
+    disabledPrev: boolean;
+    disabledNext: boolean;
+};
+
+declare type FormProperties = {
+    id?: string | undefined;
+    onSubmit?: (() => void) | undefined;
+    onCancel?: (() => void) | undefined;
+    children: ReactNode;
+    pagination?: FormPagination | undefined;
+    title?: string | undefined;
+    description?: string | undefined;
+    languageSelector?: ReactNode;
+    errors?: ReactNode;
+    before?: ReactNode;
+    after?: ReactNode;
+    signature?: ReactNode;
+    customExtensions?: CustomExtensionValues | undefined;
+};
+
 export declare type FormTemplateProperties = Omit<TemplateBase<FormProperties>, "after" | "before" | "children" | "errors" | "languageSelector" | "pagination" | "signature"> & {
     readonly after?: string | undefined;
     readonly before?: string | undefined;
@@ -211,6 +327,18 @@ export declare type FormTemplateProperties = Omit<TemplateBase<FormProperties>,
     readonly submitLabel: string;
 };
 
+declare type GroupListProperties = {
+    linkId: string;
+    header?: ReactNode;
+    errors?: ReactNode;
+    children: ReactNode;
+    onAdd?: (() => void) | undefined;
+    canAdd?: boolean | undefined;
+    path?: NodePath | undefined;
+    count?: number | undefined;
+    customExtensions?: CustomExtensionValues | undefined;
+};
+
 export declare type GroupListTemplateProperties = Omit<TemplateBase<GroupListProperties>, "children" | "errors" | "header"> & {
     readonly header?: string | undefined;
     readonly errors?: string | undefined;
@@ -218,6 +346,20 @@ export declare type GroupListTemplateProperties = Omit<TemplateBase<GroupListPro
     readonly hasCount: boolean;
 } & AddActionProperties;
 
+declare type GroupScaffoldProperties = {
+    linkId?: string | undefined;
+    path?: NodePath | undefined;
+    header?: ReactNode;
+    children?: ReactNode;
+    errors?: ReactNode;
+    signature?: ReactNode;
+    isExpandable?: boolean | undefined;
+    isExpanded: boolean;
+    onRemove?: (() => void) | undefined;
+    canRemove?: boolean | undefined;
+    customExtensions?: CustomExtensionValues | undefined;
+};
+
 export declare type GroupScaffoldTemplateProperties = Omit<TemplateBase<GroupScaffoldProperties>, "children" | "errors" | "header" | "signature"> & {
     readonly header?: string | undefined;
     readonly children?: string | undefined;
@@ -228,10 +370,20 @@ export declare type GroupScaffoldTemplateProperties = Omit<TemplateBase<GroupSca
     readonly signature?: string | undefined;
 } & RemoveActionProperties & CollapsibleActionProperties;
 
+declare type HeaderProperties = {
+    linkId: string;
+    children: ReactNode;
+};
+
 export declare type HeaderTemplateProperties = Omit<TemplateBase<HeaderProperties>, "children"> & {
     readonly children: string;
 };
 
+declare type HelpProperties = {
+    id: string;
+    children: ReactNode;
+};
+
 export declare type HelpTemplateProperties = Omit<TemplateBase<HelpProperties>, "children"> & {
     readonly ariaLabel: string;
     readonly buttonId?: string | undefined;
@@ -251,8 +403,18 @@ export declare function htmlAttributes(values: HtmlAttributes): string;
 
 export declare type HtmlAttributeValue = string | number | boolean | null | undefined;
 
+declare type Hyperlink = {
+    href: string;
+    label: string | undefined;
+};
+
 export declare function inferTextField(id: string, group: InputGroupState | undefined): AnswerField;
 
+declare type InputGroupProperties = {
+    children: ReactNode;
+    spans: number[];
+};
+
 export declare type InputGroupState = {
     readonly size: number;
     readonly index: number;
@@ -268,6 +430,25 @@ export declare function isDefined<T>(value: T | undefined): value is T;
 
 export declare function isPreservedOptionToken(token: string): boolean;
 
+declare type LabelAs = "legend" | "label" | "text";
+
+declare type LabelProperties = {
+    prefix?: ReactNode;
+    shortText?: string | undefined;
+    supportHyperlinks?: ReadonlyArray<Hyperlink> | undefined;
+    media?: Attachment | undefined;
+    isExpanded: boolean;
+    onToggleExpanded?: (() => void) | undefined;
+    children: ReactNode;
+    id: string;
+    htmlFor?: string | undefined;
+    required?: boolean | undefined;
+    help?: ReactNode;
+    legal?: ReactNode;
+    flyover?: ReactNode;
+    as?: LabelAs | undefined;
+};
+
 export declare type LabelTemplateProperties = Omit<TemplateBase<LabelProperties>, "children" | "flyover" | "help" | "legal" | "prefix"> & {
     readonly attachmentLabel: string;
     readonly prefix?: string | undefined;
@@ -287,6 +468,18 @@ export declare type LabelTemplateProperties = Omit<TemplateBase<LabelProperties>
 
 export declare const LANGUAGE_FIELD = "fb[language]";
 
+declare type LanguageOption = {
+    value: string;
+    label: string;
+};
+
+declare type LanguageSelectorProperties = {
+    id?: string | undefined;
+    options: readonly LanguageOption[];
+    value: string;
+    onChange: (value: string) => void;
+};
+
 export declare type LanguageSelectorTemplateProperties = Omit<TemplateBase<LanguageSelectorProperties>, "options"> & {
     readonly id?: string | undefined;
     readonly name: string;
@@ -299,12 +492,25 @@ export declare function lastLinkId(path: NodePath): string;
 
 export declare type LaunchContext = Record<string, unknown>;
 
+declare type LegalProperties = {
+    id: string;
+    children: ReactNode;
+};
+
 export declare type LegalTemplateProperties = Omit<TemplateBase<LegalProperties>, "children"> & {
     readonly ariaLabel: string;
     readonly buttonId?: string | undefined;
     readonly children: string;
 };
 
+declare type LinkProperties = {
+    id?: string | undefined;
+    href: string;
+    children: ReactNode;
+    target?: string | undefined;
+    rel?: string | undefined;
+};
+
 export declare type LinkTemplateProperties = Omit<TemplateBase<LinkProperties>, "children"> & {
     readonly children: string;
 };
@@ -315,6 +521,24 @@ export declare function loadTemplates(directory: string | URL): Promise<Template
 
 export declare function mediaHtml(attachment: Attachment | undefined, fallbackLabel: string, id?: string | undefined): string;
 
+declare type MultiSelectInputProperties = {
+    options: readonly OptionItem[];
+    selectedOptions: readonly SelectedOptionItem[];
+    searchQuery: string;
+    onSelect: (token: string) => void;
+    onDeselect: (token: string) => void;
+    onSearch?: (query: string) => void;
+    specifyOtherOption?: OptionItem | undefined;
+    customOptionForm?: ReactNode;
+    id: string;
+    path?: NodePath | undefined;
+    ariaLabelledBy: string;
+    ariaDescribedBy?: string | undefined;
+    disabled?: boolean | undefined;
+    isLoading?: boolean | undefined;
+    placeholder?: string | undefined;
+};
+
 export declare type MultiSelectInputTemplateProperties = Omit<FieldTemplateProperties<MultiSelectInputProperties>, "customOptionForm" | "options" | "selectedOptions" | "specifyOtherOption"> & {
     readonly baselineName?: string | undefined;
     readonly searchLabel: string;
@@ -328,6 +552,28 @@ export declare type MultiSelectInputTemplateProperties = Omit<FieldTemplatePrope
     readonly customOptionForm?: string | undefined;
 };
 
+declare type NodePath = readonly NodePathSegment[];
+
+declare interface NodePathSegment {
+    readonly linkId: string;
+    readonly index?: number | undefined;
+}
+
+declare type NumberInputProperties = {
+    id: string;
+    path?: NodePath | undefined;
+    value: number | undefined;
+    onChange: (v?: number) => void;
+    disabled?: boolean | undefined;
+    placeholder?: string | undefined;
+    step?: number | "any";
+    min?: number | undefined;
+    max?: number | undefined;
+    ariaLabelledBy: string;
+    ariaDescribedBy?: string | undefined;
+    unitLabel?: string | undefined;
+};
+
 export declare type NumberInputTemplateProperties = FieldTemplateProperties<NumberInputProperties> & NumberInputViewProperties;
 
 declare type NumberInputViewProperties = {
@@ -342,12 +588,29 @@ export declare function numberTemplateProperties(properties: SliderInputProperti
 
 export declare function numberTemplateProperties(properties: SpinnerInputProperties): SpinnerInputTemplateProperties;
 
+declare type OptionDisplayProperties = {
+    children: ReactNode;
+    prefix?: string | undefined;
+    media?: Attachment | undefined;
+};
+
 export declare type OptionDisplayTemplateProperties = Omit<TemplateBase<OptionDisplayProperties>, "children" | "media"> & {
     readonly attachmentLabel: string;
     readonly children: string;
     readonly media: string;
 };
 
+declare type OptionItem = {
+    token: string;
+    label: ReactNode;
+    disabled: boolean;
+    exclusive: boolean;
+};
+
+declare type OptionsLoadingProperties = {
+    isLoading: boolean;
+};
+
 export declare type OptionsLoadingTemplateProperties = TemplateBase<OptionsLoadingProperties> & {
     readonly loadingLabel: string;
 };
@@ -358,6 +621,8 @@ export declare const PAGE_FIELD = "fb[page]";
 
 export declare function pathControlId(token: string, path: NodePath | undefined, ...parts: Array<string | number | undefined>): string | undefined;
 
+declare type PlaceholderString<Key extends string> = `${string}{${Key}}${string}`;
+
 export declare type ProcessResult = {
     readonly submitted: false;
 } | {
@@ -392,6 +657,18 @@ export declare interface QuestionnaireRendererOptions<V extends FhirVersion = Fh
     action?: string | undefined;
 }
 
+declare type QuestionScaffoldProperties = {
+    linkId: string;
+    path?: NodePath | undefined;
+    header?: ReactNode;
+    children: ReactNode;
+    errors?: ReactNode;
+    signature?: ReactNode;
+    isExpandable?: boolean | undefined;
+    isExpanded: boolean;
+    customExtensions?: CustomExtensionValues | undefined;
+};
+
 export declare type QuestionScaffoldTemplateProperties = Omit<TemplateBase<QuestionScaffoldProperties>, "children" | "errors" | "header" | "signature"> & {
     readonly header?: string | undefined;
     readonly children: string;
@@ -402,6 +679,21 @@ export declare type QuestionScaffoldTemplateProperties = Omit<TemplateBase<Quest
     readonly signature?: string | undefined;
 } & CollapsibleActionProperties;
 
+declare type RadioButtonListProperties = {
+    options: readonly OptionItem[];
+    selectedOption: SelectedOptionItem | undefined;
+    orientation?: ChoiceOrientation | undefined;
+    onChange: (token?: string) => void;
+    specifyOtherOption?: OptionItem | undefined;
+    customOptionForm?: ReactNode;
+    id: string;
+    path?: NodePath | undefined;
+    ariaLabelledBy: string;
+    ariaDescribedBy?: string | undefined;
+    disabled?: boolean | undefined;
+    isLoading?: boolean | undefined;
+};
+
 export declare type RadioButtonListTemplateProperties = Omit<FieldTemplateProperties<RadioButtonListProperties>, "customOptionForm" | "options" | "selectedOption" | "specifyOtherOption"> & {
     readonly baselineName?: string | undefined;
     readonly baselineValue?: string | undefined;
@@ -412,6 +704,19 @@ export declare type RadioButtonListTemplateProperties = Omit<FieldTemplateProper
     readonly customOptionForm?: string | undefined;
 };
 
+declare type RadioButtonProperties = {
+    id: string;
+    path?: NodePath | undefined;
+    groupName: string;
+    value: string;
+    checked: boolean;
+    onChange: () => void;
+    ariaLabelledBy: string;
+    ariaDescribedBy?: string | undefined;
+    disabled?: boolean;
+    label?: ReactNode;
+};
+
 export declare type RadioButtonTemplateProperties = Omit<FieldTemplateProperties<RadioButtonProperties>, "label"> & {
     readonly hiddenValue?: string | undefined;
     readonly label?: string | undefined;
@@ -455,6 +760,28 @@ export declare function searchName(path: NodePath): string;
 
 export declare function selectedName(path: NodePath): string;
 
+declare type SelectedOptionItem = OptionItem & {
+    ariaDescribedBy?: string | undefined;
+    errors?: ReactNode;
+};
+
+declare type SelectInputProperties = {
+    options: readonly OptionItem[];
+    selectedOption: SelectedOptionItem | undefined;
+    searchQuery: string;
+    onChange: (token?: string) => void;
+    onSearch?: (query: string) => void;
+    specifyOtherOption?: OptionItem | undefined;
+    customOptionForm?: ReactNode;
+    id: string;
+    path?: NodePath | undefined;
+    ariaLabelledBy: string;
+    ariaDescribedBy?: string | undefined;
+    disabled?: boolean | undefined;
+    isLoading?: boolean | undefined;
+    placeholder?: string | undefined;
+};
+
 export declare type SelectInputTemplateProperties = Omit<FieldTemplateProperties<SelectInputProperties>, "customOptionForm" | "options" | "selectedOption" | "specifyOtherOption"> & {
     readonly baselineName?: string | undefined;
     readonly baselineValue?: string | undefined;
@@ -473,24 +800,217 @@ export declare type SelectOptionTemplateItem = TemplateOptionItem & {
     readonly selected: boolean;
 };
 
+declare type SignatureInputProperties = {
+    value: string | undefined;
+    id: string;
+    path?: NodePath | undefined;
+    ariaLabelledBy?: string | undefined;
+    ariaDescribedBy?: string | undefined;
+    disabled?: boolean | undefined;
+    onChange?: ((value?: string) => void) | undefined;
+};
+
 export declare type SignatureInputTemplateProperties = FieldTemplateProperties<SignatureInputProperties> & {
     readonly inputValue: string;
 };
 
 export declare function signatureName(path: NodePath): string;
 
+declare type SliderInputProperties = {
+    id: string;
+    path?: NodePath | undefined;
+    value: number | undefined;
+    onChange: (v?: number) => void;
+    disabled?: boolean | undefined;
+    min?: number | undefined;
+    max?: number | undefined;
+    step?: number | undefined;
+    ariaLabelledBy: string;
+    ariaDescribedBy?: string | undefined;
+    lowerLabel?: string | undefined;
+    upperLabel?: string | undefined;
+    unitLabel?: string | undefined;
+};
+
 export declare type SliderInputTemplateProperties = FieldTemplateProperties<SliderInputProperties> & NumberInputViewProperties;
 
+declare type SpinnerInputProperties = {
+    id: string;
+    path?: NodePath | undefined;
+    value: number | undefined;
+    onChange: (v?: number) => void;
+    disabled?: boolean | undefined;
+    min?: number | undefined;
+    max?: number | undefined;
+    step?: number | undefined;
+    ariaLabelledBy: string;
+    ariaDescribedBy?: string | undefined;
+    placeholder?: string | undefined;
+    unitLabel?: string | undefined;
+};
+
 export declare type SpinnerInputTemplateProperties = FieldTemplateProperties<SpinnerInputProperties> & NumberInputViewProperties;
 
 export declare function stableId(base: string | undefined, ...parts: Array<string | number | undefined>): string | undefined;
 
+declare type StackProperties = {
+    children: ReactNode;
+};
+
 export declare type StackTemplateProperties = Omit<TemplateBase<StackProperties>, "children"> & {
     readonly children: string;
 };
 
+declare type Strings = {
+    readonly aria: {
+        readonly help: string;
+        readonly legal: string;
+        readonly flyover: string;
+    };
+    readonly value: {
+        readonly yes: string;
+        readonly no: string;
+        readonly unanswered: string;
+    };
+    readonly dialog: {
+        readonly cancel: string;
+        readonly submit: string;
+    };
+    readonly form: {
+        readonly submit: string;
+        readonly cancel: string;
+    };
+    readonly errors: {
+        readonly unknownMessage: string;
+        readonly issuesTitle: string;
+        readonly issueMessage: PlaceholderString<"message">;
+    };
+    readonly file: {
+        readonly sizeLabel: PlaceholderString<"sizeKb">;
+        readonly chooseAction: string;
+        readonly changeAction: string;
+        readonly replaceAction: string;
+        readonly clearAction: string;
+        readonly noFileChosen: string;
+    };
+    readonly group: {
+        readonly addSection: string;
+        readonly removeSection: string;
+        readonly noNodesYet: string;
+    };
+    readonly gridTable: {
+        readonly headerActions: string;
+    };
+    readonly inputs: {
+        readonly referencePlaceholder: string;
+        readonly referenceDisplayPlaceholder: string;
+        readonly codingSystemPlaceholder: string;
+        readonly codingCodePlaceholder: string;
+        readonly codingDisplayPlaceholder: string;
+        readonly quantityValuePlaceholder: string;
+        readonly quantityUnitPlaceholder: string;
+        readonly attachmentSelected: string;
+        readonly attachmentLabel: string;
+    };
+    readonly selection: {
+        readonly specifyOther: string;
+        readonly addAnother: string;
+        readonly selectPlaceholder: string;
+        readonly removeSelection: string;
+        readonly removeCustomValue: string;
+        readonly searchPlaceholder: string;
+        readonly noOptions: string;
+        readonly loadingOptions: string;
+        readonly dividerOr: string;
+    };
+    readonly pagination: {
+        readonly navigation: string;
+        readonly previous: string;
+        readonly next: string;
+        readonly pageLabel: PlaceholderString<"page">;
+        readonly previousTargetPage: PlaceholderString<"page">;
+        readonly nextTargetPage: PlaceholderString<"page">;
+    };
+    readonly language: {
+        readonly label: string;
+        readonly placeholder: string;
+    };
+    readonly table: {
+        readonly empty: string;
+        readonly noChoiceQuestionsHorizontal: string;
+        readonly noChoiceQuestions: string;
+        readonly noAnswerOptionsHorizontal: string;
+        readonly noAnswerOptions: string;
+    };
+    readonly collapsible: {
+        readonly expand: string;
+        readonly collapse: string;
+    };
+    readonly tab: {
+        readonly empty: string;
+        readonly scrollLeft: string;
+        readonly scrollRight: string;
+    };
+    readonly signature: {
+        readonly sign: string;
+        readonly signed: string;
+        readonly clearAction: string;
+    };
+    readonly spinner: {
+        readonly decrease: string;
+        readonly increase: string;
+    };
+    readonly unsupported: {
+        readonly itemType: PlaceholderString<"type">;
+    };
+    readonly validation: {
+        readonly group: {
+            readonly atLeastOneAnswer: string;
+        };
+        readonly groupList: {
+            readonly minOccurs: PlaceholderString<"minOccurs">;
+            readonly maxOccurs: PlaceholderString<"maxOccurs">;
+        };
+        readonly question: {
+            readonly minOccursSingle: string;
+            readonly minOccursMultiple: PlaceholderString<"minOccurs">;
+            readonly maxOccurs: PlaceholderString<"maxOccurs">;
+        };
+        readonly signature: {
+            readonly required: string;
+        };
+        readonly answer: {
+            readonly minLength: PlaceholderString<"minLength">;
+            readonly maxLength: PlaceholderString<"maxLength">;
+            readonly minPrecision: PlaceholderString<"minLength">;
+            readonly maxPrecision: PlaceholderString<"maxLength">;
+            readonly blank: string;
+            readonly valueNotEarlier: PlaceholderString<"formatted">;
+            readonly valueNotLater: PlaceholderString<"formatted">;
+            readonly valueMin: PlaceholderString<"formatted">;
+            readonly valueMax: PlaceholderString<"formatted">;
+            readonly valueDecimalPlaces: PlaceholderString<"maxPlaces">;
+            readonly quantityMin: PlaceholderString<"formatted">;
+            readonly quantityMax: PlaceholderString<"formatted">;
+            readonly attachmentTypeMissing: PlaceholderString<"allowed">;
+            readonly attachmentTypeNotAllowed: PlaceholderString<"allowed">;
+            readonly attachmentSizeMax: PlaceholderString<"maxSize">;
+        };
+    };
+};
+
 export declare const SUBMIT_ATTEMPTED_FIELD = "fb[submitAttempted]";
 
+declare type TabContainerProperties = {
+    path?: NodePath | undefined;
+    header?: ReactNode;
+    items: TabItem[];
+    value: number;
+    onChange: (index: number) => void;
+    errors?: ReactNode;
+    linkId: string;
+};
+
 export declare type TabContainerTemplateProperties = Omit<TemplateBase<TabContainerProperties>, "errors" | "header" | "items"> & {
     readonly header?: string | undefined;
     readonly errors?: string | undefined;
@@ -500,8 +1020,45 @@ export declare type TabContainerTemplateProperties = Omit<TemplateBase<TabContai
     readonly tabName?: string | undefined;
 };
 
+declare type TabItem = {
+    token: string;
+    label: ReactNode;
+    buttonId: string;
+    panelId: string;
+    content: ReactNode;
+};
+
+declare type TableCell = {
+    token: string;
+    content?: ReactNode;
+};
+
+declare type TableColumn = {
+    token: string;
+    content: ReactNode;
+    width?: string | undefined;
+    errors?: ReactNode | undefined;
+    isLoading?: boolean | undefined;
+};
+
 export declare function tableColumn(column: TableColumn, renderHtml: RenderHtml): TemplateTableColumn;
 
+declare type TableProperties = {
+    columns: TableColumn[];
+    rows: TableRow[];
+};
+
+declare type TableRow = {
+    token: string;
+    path?: NodePath | undefined;
+    content?: ReactNode | undefined;
+    errors?: ReactNode | undefined;
+    isLoading?: boolean | undefined;
+    cells: TableCell[];
+    onRemove?: (() => void) | undefined;
+    canRemove?: boolean | undefined;
+};
+
 export declare function tableRow(row: TableRow, renderHtml: RenderHtml, strings: Strings, token: string): TemplateTableRow;
 
 export declare type TableTemplateProperties = Omit<TemplateBase<TableProperties>, "columns" | "rows"> & {
@@ -619,12 +1176,54 @@ export declare type TemplateTableRow = Omit<TableRow, "cells" | "content" | "err
     readonly removeLabelHtml: string;
 } & RemoveActionProperties;
 
+declare type TextAreaProperties = {
+    id: string;
+    path?: NodePath | undefined;
+    value: string;
+    onChange: (v: string) => void;
+    disabled?: boolean | undefined;
+    placeholder?: string | undefined;
+    ariaLabelledBy: string;
+    ariaDescribedBy?: string | undefined;
+    inputMode?: HTMLAttributes<Element>["inputMode"] | undefined;
+    minLength?: number | undefined;
+    maxLength?: number | undefined;
+};
+
 export declare type TextAreaTemplateProperties = FieldTemplateProperties<TextAreaProperties>;
 
+declare type TextInputProperties = {
+    id: string;
+    path?: NodePath | undefined;
+    type?: string | undefined;
+    value: string;
+    onChange: (v: string) => void;
+    disabled?: boolean | undefined;
+    placeholder?: string | undefined;
+    ariaLabelledBy: string;
+    ariaDescribedBy?: string | undefined;
+    inputMode?: HTMLAttributes<Element>["inputMode"] | undefined;
+    minLength?: number | undefined;
+    maxLength?: number | undefined;
+};
+
 export declare type TextInputTemplateProperties = FieldTemplateProperties<TextInputProperties> & {
     readonly inputType: string;
 };
 
+declare type TimeInputProperties = {
+    id: string;
+    path?: NodePath | undefined;
+    value: string;
+    onChange: (v: string) => void;
+    disabled?: boolean | undefined;
+    placeholder?: string | undefined;
+    ariaLabelledBy: string;
+    ariaDescribedBy?: string | undefined;
+    min?: string | undefined;
+    max?: string | undefined;
+};
+
 export declare type TimeInputTemplateProperties = FieldTemplateProperties<TimeInputProperties>;
 
 export declare function unitValueName(path: NodePath, token: string): string;

package/dist/index.js

@@ -1,18 +1,43 @@
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { createContext, useContext, useMemo, useCallback, useState, createElement, Children } from "react";
+import { jsx, jsxs, Fragment } from "preact/jsx-runtime";
+import { createContext, useContext, useMemo, useCallback, useState, createElement, Children } from "preact/compat";
 import bundledStrings from "@formbox/strings";
 import { computed, action, makeObservable, observable, runInAction, override, reaction, comparer, when } from "mobx";
-import { CustomItemExtensionsProvider, useStrings, CustomQuestionnaireExtensionsProvider, StringsContext } from "@formbox/theme";
-import { observer } from "mobx-react-lite";
 import { fromPromise } from "mobx-utils";
 import { R4AttachmentAdapter, R4QuestionnaireItemAdapter, R4QuestionnaireResponseAdapter, R5AttachmentAdapter, R5QuestionnaireItemAdapter, R5QuestionnaireResponseAdapter } from "@formbox/fhir";
 import { readdir, readFile } from "node:fs/promises";
 import path from "node:path";
 import Handlebars from "handlebars";
-import { renderToStaticMarkup } from "react-dom/server.node";
+import { renderToStaticMarkup } from "preact-render-to-string";
+const StringsContext = createContext(
+  void 0
+);
+function useStrings() {
+  const strings2 = useContext(StringsContext);
+  if (strings2 == void 0) {
+    throw new Error("StringsContext.Provider is required");
+  }
+  return strings2;
+}
+const CustomQuestionnaireExtensionsContext = createContext(void 0);
+const CustomItemExtensionsContext = createContext(void 0);
+function CustomQuestionnaireExtensionsProvider({
+  value,
+  children
+}) {
+  return /* @__PURE__ */ jsx(CustomQuestionnaireExtensionsContext.Provider, { value, children });
+}
+function CustomItemExtensionsProvider({
+  value,
+  children
+}) {
+  return /* @__PURE__ */ jsx(CustomItemExtensionsContext.Provider, { value, children });
+}
+function observer(component) {
+  return component;
+}
 const ITEM_CONTROLS = [
   // display
   "inline",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@formbox/htmx",
-  "version": "0.4.4",
+  "version": "0.5.0",
   "description": "Server-rendered HTMX HTML renderer for Formbox FHIR Questionnaires",
   "private": false,
   "type": "module",
@@ -26,24 +26,22 @@
     "fhirpath": "^4.6.0",
     "handlebars": "^4.7.9",
     "mobx": "^6.15.0",
-    "mobx-react-lite": "^4.1.1",
     "mobx-utils": "^6.1.1",
-    "react": "^19.2.3",
-    "react-dom": "^19.2.3",
-    "@formbox/renderer": "0.4.1",
-    "@formbox/strings": "0.4.1",
-    "@formbox/theme": "0.4.1",
-    "@formbox/fhir": "0.4.1"
+    "preact": "^10.29.2",
+    "preact-render-to-string": "^6.7.0",
+    "@formbox/fhir": "0.4.1",
+    "@formbox/strings": "0.4.1"
   },
   "devDependencies": {
     "@playwright/test": "^1.60.0",
     "@types/react": "^19.2.8",
-    "@types/react-dom": "^19.2.3",
     "htmx.org": "^2.0.10",
     "typescript": "~5.9.3",
     "vite": "^7.3.1",
     "vite-plugin-dts": "^4.5.4",
-    "vitest": "^4.0.17"
+    "vitest": "^4.0.17",
+    "@formbox/renderer": "0.4.1",
+    "@formbox/theme": "0.4.1"
   },
   "scripts": {
     "build": "tsc -b ./tsconfig.lib.json && vite build",