@authhero/widget 0.2.2 → 0.4.1

package/dist/collection/components/authhero-node/authhero-node.js

@@ -0,0 +1,360 @@
+import { h } from "@stencil/core";
+export class AuthheroNode {
+    /**
+     * The component configuration to render.
+     * Follows Auth0 Forms component schema.
+     */
+    component;
+    /**
+     * Current value for field components.
+     */
+    value;
+    /**
+     * Whether the component is disabled.
+     */
+    disabled = false;
+    /**
+     * Emitted when a field value changes.
+     */
+    fieldChange;
+    /**
+     * Emitted when a button is clicked.
+     */
+    buttonClick;
+    handleInput = (e) => {
+        const target = e.target;
+        this.fieldChange.emit({ id: this.component.id, value: target.value });
+    };
+    handleCheckbox = (e) => {
+        const target = e.target;
+        this.fieldChange.emit({
+            id: this.component.id,
+            value: target.checked ? "true" : "false",
+        });
+    };
+    handleButtonClick = (e, type, value) => {
+        if (type !== "submit") {
+            e.preventDefault();
+        }
+        this.buttonClick.emit({ id: this.component.id, type, value });
+    };
+    /**
+     * Get error messages from the component.
+     */
+    getErrors() {
+        const runtimeComp = this.component;
+        return (runtimeComp.messages?.filter((m) => m.type === "error") || []);
+    }
+    /**
+     * Render a label for a field.
+     */
+    renderLabel(text, inputId, required) {
+        if (!text)
+            return null;
+        return (h("label", { class: "input-label", part: "label", htmlFor: inputId }, text, required && h("span", { class: "required" }, "*")));
+    }
+    /**
+     * Render error messages.
+     */
+    renderErrors() {
+        const errors = this.getErrors();
+        return errors.map((err) => (h("span", { class: "error-text", part: "error-text", key: err.id ?? err.text }, err.text)));
+    }
+    /**
+     * Render hint text.
+     */
+    renderHint(hint) {
+        if (!hint)
+            return null;
+        return (h("span", { class: "helper-text", part: "helper-text" }, hint));
+    }
+    // ===========================================================================
+    // BLOCK Component Renderers
+    // ===========================================================================
+    renderDivider() {
+        return h("hr", { class: "divider", part: "divider" });
+    }
+    renderHtml(component) {
+        return (h("div", { class: "html-content", part: "html-content", innerHTML: component.config?.content ?? "" }));
+    }
+    renderImage(component) {
+        const { src, alt, width, height } = component.config ?? {};
+        if (!src)
+            return null;
+        return (h("img", { class: "image", part: "image", src: src, alt: alt ?? "", width: width, height: height, loading: "lazy" }));
+    }
+    renderRichText(component) {
+        return (h("div", { class: "rich-text", part: "rich-text", innerHTML: component.config?.content ?? "" }));
+    }
+    renderNextButton(component) {
+        return (h("button", { type: "submit", class: "btn btn-primary", part: "button button-primary", disabled: this.disabled, onClick: (e) => this.handleButtonClick(e, "submit", "next") }, component.config.text ?? "Continue"));
+    }
+    renderPreviousButton(component) {
+        return (h("button", { type: "button", class: "btn btn-secondary", part: "button button-secondary", disabled: this.disabled, onClick: (e) => this.handleButtonClick(e, "previous", "back") }, component.config.text ?? "Back"));
+    }
+    renderJumpButton(component) {
+        return (h("button", { type: "button", class: "btn btn-link", part: "button button-link", disabled: this.disabled, onClick: (e) => this.handleButtonClick(e, "jump", component.config.target_step) }, component.config.text ?? "Go"));
+    }
+    renderResendButton(component) {
+        return (h("button", { type: "button", class: "btn btn-link", part: "button button-link", disabled: this.disabled, onClick: (e) => this.handleButtonClick(e, "resend", component.config.resend_action) }, component.config.text ?? "Resend"));
+    }
+    // ===========================================================================
+    // FIELD Component Renderers
+    // ===========================================================================
+    renderTextField(component) {
+        const inputId = `input-${component.id}`;
+        const errors = this.getErrors();
+        const { placeholder, multiline, max_length } = component.config ?? {};
+        if (multiline) {
+            return (h("div", { class: "input-wrapper", part: "input-wrapper" }, this.renderLabel(component.label, inputId, component.required), h("textarea", { id: inputId, class: { "input-field": true, "has-error": errors.length > 0 }, part: "input textarea", name: component.id, placeholder: placeholder, required: component.required, disabled: this.disabled, maxLength: max_length, onInput: this.handleInput }, this.value ?? ""), this.renderErrors(), errors.length === 0 && this.renderHint(component.hint)));
+        }
+        return (h("div", { class: "input-wrapper", part: "input-wrapper" }, this.renderLabel(component.label, inputId, component.required), h("input", { id: inputId, class: { "input-field": true, "has-error": errors.length > 0 }, part: "input", type: component.sensitive ? "password" : "text", name: component.id, value: this.value ?? "", placeholder: placeholder, required: component.required, disabled: this.disabled, maxLength: max_length, onInput: this.handleInput }), this.renderErrors(), errors.length === 0 && this.renderHint(component.hint)));
+    }
+    renderEmailField(component) {
+        const inputId = `input-${component.id}`;
+        const errors = this.getErrors();
+        return (h("div", { class: "input-wrapper", part: "input-wrapper" }, this.renderLabel(component.label, inputId, component.required), h("input", { id: inputId, class: { "input-field": true, "has-error": errors.length > 0 }, part: "input", type: "email", name: component.id, value: this.value ?? "", placeholder: component.config?.placeholder, required: component.required, disabled: this.disabled, autocomplete: "email", onInput: this.handleInput }), this.renderErrors(), errors.length === 0 && this.renderHint(component.hint)));
+    }
+    renderPasswordField(component) {
+        const inputId = `input-${component.id}`;
+        const errors = this.getErrors();
+        return (h("div", { class: "input-wrapper", part: "input-wrapper" }, this.renderLabel(component.label, inputId, component.required), h("input", { id: inputId, class: { "input-field": true, "has-error": errors.length > 0 }, part: "input", type: "password", name: component.id, value: this.value ?? "", placeholder: component.config?.placeholder, required: component.required, disabled: this.disabled, minLength: component.config?.min_length, autocomplete: "current-password", onInput: this.handleInput }), this.renderErrors(), errors.length === 0 && this.renderHint(component.hint)));
+    }
+    renderNumberField(component) {
+        const inputId = `input-${component.id}`;
+        const errors = this.getErrors();
+        const { placeholder, min, max, step } = component.config ?? {};
+        return (h("div", { class: "input-wrapper", part: "input-wrapper" }, this.renderLabel(component.label, inputId, component.required), h("input", { id: inputId, class: { "input-field": true, "has-error": errors.length > 0 }, part: "input", type: "number", name: component.id, value: this.value ?? "", placeholder: placeholder, required: component.required, disabled: this.disabled, min: min, max: max, step: step, onInput: this.handleInput }), this.renderErrors(), errors.length === 0 && this.renderHint(component.hint)));
+    }
+    renderTelField(component) {
+        const inputId = `input-${component.id}`;
+        const errors = this.getErrors();
+        return (h("div", { class: "input-wrapper", part: "input-wrapper" }, this.renderLabel(component.label, inputId, component.required), h("input", { id: inputId, class: { "input-field": true, "has-error": errors.length > 0 }, part: "input", type: "tel", name: component.id, value: this.value ?? "", placeholder: component.config?.placeholder, required: component.required, disabled: this.disabled, autocomplete: "tel", onInput: this.handleInput }), this.renderErrors(), errors.length === 0 && this.renderHint(component.hint)));
+    }
+    renderUrlField(component) {
+        const inputId = `input-${component.id}`;
+        const errors = this.getErrors();
+        return (h("div", { class: "input-wrapper", part: "input-wrapper" }, this.renderLabel(component.label, inputId, component.required), h("input", { id: inputId, class: { "input-field": true, "has-error": errors.length > 0 }, part: "input", type: "url", name: component.id, value: this.value ?? "", placeholder: component.config?.placeholder, required: component.required, disabled: this.disabled, onInput: this.handleInput }), this.renderErrors(), errors.length === 0 && this.renderHint(component.hint)));
+    }
+    renderDateField(component) {
+        const inputId = `input-${component.id}`;
+        const errors = this.getErrors();
+        const { min, max } = component.config ?? {};
+        return (h("div", { class: "input-wrapper", part: "input-wrapper" }, this.renderLabel(component.label, inputId, component.required), h("input", { id: inputId, class: { "input-field": true, "has-error": errors.length > 0 }, part: "input", type: "date", name: component.id, value: this.value ?? "", required: component.required, disabled: this.disabled, min: min, max: max, onInput: this.handleInput }), this.renderErrors(), errors.length === 0 && this.renderHint(component.hint)));
+    }
+    renderBooleanField(component) {
+        return (h("label", { class: "checkbox-wrapper", part: "checkbox-wrapper" }, h("input", { type: "checkbox", part: "checkbox", name: component.id, checked: this.value === "true" || component.config?.default_value === true, required: component.required, disabled: this.disabled, onChange: this.handleCheckbox }), h("span", { class: "checkbox-label", part: "checkbox-label" }, component.label)));
+    }
+    renderLegalField(component) {
+        const text = component.config?.text ?? component.label ?? "";
+        const isHtml = component.config?.html === true;
+        return (h("label", { class: "checkbox-wrapper", part: "checkbox-wrapper" }, h("input", { type: "checkbox", part: "checkbox", name: component.id, checked: this.value === "true", required: component.required, disabled: this.disabled, onChange: this.handleCheckbox }), isHtml ? (h("span", { class: "checkbox-label", part: "checkbox-label", innerHTML: text })) : (h("span", { class: "checkbox-label", part: "checkbox-label" }, text))));
+    }
+    renderDropdownField(component) {
+        const inputId = `input-${component.id}`;
+        const errors = this.getErrors();
+        const { options, placeholder } = component.config ?? {};
+        return (h("div", { class: "input-wrapper", part: "input-wrapper" }, this.renderLabel(component.label, inputId, component.required), h("select", { id: inputId, class: { "input-field": true, "has-error": errors.length > 0 }, part: "input select", name: component.id, required: component.required, disabled: this.disabled, onChange: this.handleInput }, placeholder && (h("option", { value: "", disabled: true, selected: !this.value }, placeholder)), options?.map((opt) => (h("option", { value: opt.value, selected: this.value === opt.value, key: opt.value }, opt.label)))), this.renderErrors(), errors.length === 0 && this.renderHint(component.hint)));
+    }
+    renderChoiceField(component) {
+        const errors = this.getErrors();
+        const { options, display } = component.config ?? {};
+        const isCheckbox = display === "checkbox";
+        const inputType = isCheckbox ? "checkbox" : "radio";
+        return (h("div", { class: "choice-wrapper", part: "choice-wrapper" }, component.label && (h("span", { class: "choice-label", part: "choice-label" }, component.label, component.required && h("span", { class: "required" }, "*"))), h("div", { class: "choice-options", part: "choice-options" }, options?.map((opt) => (h("label", { class: "choice-option", part: "choice-option", key: opt.value }, h("input", { type: inputType, part: inputType, name: component.id, value: opt.value, checked: this.value === opt.value, required: component.required && !isCheckbox, disabled: this.disabled, onChange: this.handleInput }), h("span", null, opt.label))))), this.renderErrors(), errors.length === 0 && this.renderHint(component.hint)));
+    }
+    renderSocialField(component) {
+        const providers = component.config?.providers ?? [];
+        return (h("div", { class: "social-buttons", part: "social-buttons" }, providers.map((provider) => (h("button", { type: "button", class: "btn btn-secondary btn-social", part: "button button-secondary button-social", "data-provider": provider, disabled: this.disabled, onClick: (e) => this.handleButtonClick(e, "social", provider), key: provider }, "Continue with ", provider.charAt(0).toUpperCase() + provider.slice(1))))));
+    }
+    // ===========================================================================
+    // Main Render
+    // ===========================================================================
+    render() {
+        if (!this.component) {
+            return null;
+        }
+        // Hidden components
+        if (this.component.visible === false) {
+            return null;
+        }
+        switch (this.component.type) {
+            // BLOCK components
+            case "DIVIDER":
+                return this.renderDivider();
+            case "HTML":
+                return this.renderHtml(this.component);
+            case "IMAGE":
+                return this.renderImage(this.component);
+            case "RICH_TEXT":
+                return this.renderRichText(this.component);
+            case "NEXT_BUTTON":
+                return this.renderNextButton(this.component);
+            case "PREVIOUS_BUTTON":
+                return this.renderPreviousButton(this.component);
+            case "JUMP_BUTTON":
+                return this.renderJumpButton(this.component);
+            case "RESEND_BUTTON":
+                return this.renderResendButton(this.component);
+            // FIELD components
+            case "TEXT":
+                return this.renderTextField(this.component);
+            case "EMAIL":
+                return this.renderEmailField(this.component);
+            case "PASSWORD":
+                return this.renderPasswordField(this.component);
+            case "NUMBER":
+                return this.renderNumberField(this.component);
+            case "TEL":
+                return this.renderTelField(this.component);
+            case "URL":
+                return this.renderUrlField(this.component);
+            case "DATE":
+                return this.renderDateField(this.component);
+            case "BOOLEAN":
+                return this.renderBooleanField(this.component);
+            case "LEGAL":
+                return this.renderLegalField(this.component);
+            case "DROPDOWN":
+                return this.renderDropdownField(this.component);
+            case "CHOICE":
+                return this.renderChoiceField(this.component);
+            case "SOCIAL":
+                return this.renderSocialField(this.component);
+            // WIDGET components (not yet implemented)
+            case "AUTH0_VERIFIABLE_CREDENTIALS":
+            case "GMAPS_ADDRESS":
+            case "RECAPTCHA":
+                console.warn(`Widget component "${this.component.type}" not yet implemented`);
+                return null;
+            // Other FIELD components (not yet implemented)
+            case "CARDS":
+            case "CUSTOM":
+            case "FILE":
+            case "PAYMENT":
+                console.warn(`Component "${this.component.type}" not yet implemented`);
+                return null;
+            default:
+                console.warn(`Unknown component type: ${this.component.type}`);
+                return null;
+        }
+    }
+    static get is() { return "authhero-node"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["authhero-node.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["authhero-node.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "component": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "FormComponent | RuntimeComponent",
+                    "resolved": "{ type: \"AUTH0_VERIFIABLE_CREDENTIALS\"; id: string; config: { credential_type?: string | undefined; }; visible: boolean; required?: boolean | undefined; category?: \"WIDGET\" | undefined; sensitive?: boolean | undefined; label?: string | undefined; order?: number | undefined; hint?: string | undefined; } | { type: \"AUTH0_VERIFIABLE_CREDENTIALS\"; id: string; config: { credential_type?: string | undefined; }; visible: boolean; required?: boolean | undefined; category?: \"WIDGET\" | undefined; sensitive?: boolean | undefined; label?: string | undefined; order?: number | undefined; hint?: string | undefined; } & { messages?: { type: \"info\" | \"error\" | \"success\" | \"warning\"; text: string; id?: number | undefined; }[] | undefined; } | { type: \"BOOLEAN\"; id: string; visible: boolean; required?: boolean | undefined; category?: \"FIELD\" | undefined; config?: { default_value?: boolean | undefined; } | undefined; sensitive?: boolean | undefined; label?: string | undefined; order?: number | undefined; hint?: string | undefined; } | { type: \"BOOLEAN\"; id: string; visible: boolean; required?: boolean | undefined; category?: \"FIELD\" | undefined; config?: { default_value?: boolean | undefined; } | undefined; sensitive?: boolean | undefined; label?: string | undefined; order?: number | undefined; hint?: string | undefined; } & { messages?: { type: \"info\" | \"error\" | \"success\" | \"warning\"; text: string; id?: number | undefined; }[] | undefined; } | { type: \"CARDS\"; id: string; visible: boolean; required?: boolean | undefined; category?: \"FIELD\" | undefined; config?: { options?: { value: string; label: string; description?: string | undefined; image?: string | undefined; }[] | undefined; multi_select?: boolean | undefined; } | undefined; sensitive?: boolean | undefined; label?: string | undefined; order?: number | undefined; hint?: string | undefined; } | { type: \"CARDS\"; id: string; visible: boolean; required?: boolean | undefined; category?: \"FIELD\" | undefined; config?: { options?: { value: string; label: string; description?: string | undefined; image?: string | undefined; }[] | undefined; multi_select?: boolean | undefined; } | undefined; sensitive?: boolean | undefined; label?: string | undefined; order?: number | undefined; hint?: string | undefined; } & { messages?: { type: \"info\" | \"error\" | \"success\" | \"warning\"; text: string; id?: number | undefined; }[] | undefined; } | { type: \"CHOICE\"; id: string; visible: boolean; required?: boolean | undefined; category?: \"FIELD\" | undefined; config?: { options?: { value: string; label: string; }[] | undefined; display?: \"radio\" | \"checkbox\" | undefined; } | undefined; sensitive?: boolean | undefined; label?: string | undefined; order?: number | undefined; hint?: string | undefined; } | { type: \"CHOICE\"; id: string; visible: boolean; required?: boolean | undefined; category?: \"FIELD\" | undefined; config?: { options?: { value: string; label: string; }[] | undefined; display?: \"radio\" | \"checkbox\" | undefined; } | undefined; sensitive?: boolean | undefined; label?: string | undefined; order?: number | undefined; hint?: string | undefined; } & { messages?: { type: \"info\" | \"error\" | \"success\" | \"warning\"; text: string; id?: number | undefined; }[] | undefined; } | { type: \"CUSTOM\"; id: string; config: { component?: string | undefined; props?: Record<string, any> | undefined; }; visible: boolean; required?: boolean | undefined; category?: \"FIELD\" | undefined; sensitive?: boolean | undefined; label?: string | undefined; order?: number | undefined; hint?: string | undefined; } | { type: \"CUSTOM\"; id: string; config: { component?: string | undefined; props?: Record<string, any> | undefined; }; visible: boolean; required?: boolean | undefined; category?: \"FIELD\" | undefined; sensitive?: boolean | undefined; label?: string | undefined; order?: number | undefined; hint?: string | undefined; } & { messages?: { type: \"info\" | \"error\" | \"success\" | \"warning\"; text: string; id?: number | undefined; }[] | undefined; } | { type: \"DATE\"; id: string; visible: boolean; required?: boolean | undefined; category?: \"FIELD\" | undefined; config?: { format?: string | undefined; min?: string | undefined; max?: string | undefined; } | undefined; sensitive?: boolean | undefined; label?: string | undefined; order?: number | undefined; hint?: string | undefined; } | { type: \"DATE\"; id: string; visible: boolean; required?: boolean | undefined; category?: \"FIELD\" | undefined; config?: { format?: string | undefined; min?: string | undefined; max?: string | undefined; } | undefined; sensitive?: boolean | undefined; label?: string | undefined; order?: number | undefined; hint?: string | undefined; } & { messages?: { type: \"info\" | \"error\" | \"success\" | \"warning\"; text: string; id?: number | undefined; }[] | undefined; } | { type: \"DIVIDER\"; id: string; visible: boolean; category?: \"BLOCK\" | undefined; config?: {} | undefined; order?: number | undefined; } | { type: \"DIVIDER\"; id: string; visible: boolean; category?: \"BLOCK\" | undefined; config?: {} | undefined; order?: number | undefined; } & { messages?: { type: \"info\" | \"error\" | \"success\" | \"warning\"; text: string; id?: number | undefined; }[] | undefined; } | { type: \"DROPDOWN\"; id: string; visible: boolean; required?: boolean | undefined; category?: \"FIELD\" | undefined; config?: { options?: { value: string; label: string; }[] | undefined; placeholder?: string | undefined; searchable?: boolean | undefined; } | undefined; sensitive?: boolean | undefined; label?: string | undefined; order?: number | undefined; hint?: string | undefined; } | { type: \"DROPDOWN\"; id: string; visible: boolean; required?: boolean | undefined; category?: \"FIELD\" | undefined; config?: { options?: { value: string; label: string; }[] | undefined; placeholder?: string | undefined; searchable?: boolean | undefined; } | undefined; sensitive?: boolean | undefined; label?: string | undefined; order?: number | undefined; hint?: string | undefined; } & { messages?: { type: \"info\" | \"error\" | \"success\" | \"warning\"; text: string; id?: number | undefined; }[] | undefined; } | { type: \"EMAIL\"; id: string; visible: boolean; required?: boolean | undefined; category?: \"FIELD\" | undefined; config?: { placeholder?: string | undefined; } | undefined; sensitive?: boolean | undefined; label?: string | undefined; order?: number | undefined; hint?: string | undefined; } | { type: \"EMAIL\"; id: string; visible: boolean; required?: boolean | undefined; category?: \"FIELD\" | undefined; config?: { placeholder?: string | undefined; } | undefined; sensitive?: boolean | undefined; label?: string | undefined; order?: number | undefined; hint?: string | undefined; } & { messages?: { type: \"info\" | \"error\" | \"success\" | \"warning\"; text: string; id?: number | undefined; }[] | undefined; } | { type: \"FILE\"; id: string; visible: boolean; required?: boolean | undefined; category?: \"FIELD\" | undefined; config?: { accept?: string | undefined; max_size?: number | undefined; multiple?: boolean | undefined; } | undefined; sensitive?: boolean | undefined; label?: string | undefined; order?: number | undefined; hint?: string | undefined; } | { type: \"FILE\"; id: string; visible: boolean; required?: boolean | undefined; category?: \"FIELD\" | undefined; config?: { accept?: string | undefined; max_size?: number | undefined; multiple?: boolean | undefined; } | undefined; sensitive?: boolean | undefined; label?: string | undefined; order?: number | undefined; hint?: string | undefined; } & { messages?: { type: \"info\" | \"error\" | \"success\" | \"warning\"; text: string; id?: number | undefined; }[] | undefined; } | { type: \"GMAPS_ADDRESS\"; id: string; config: { api_key?: string | undefined; }; visible: boolean; required?: boolean | undefined; category?: \"WIDGET\" | undefined; sensitive?: boolean | undefined; label?: string | undefined; order?: number | undefined; hint?: string | undefined; } | { type: \"GMAPS_ADDRESS\"; id: string; config: { api_key?: string | undefined; }; visible: boolean; required?: boolean | undefined; category?: \"WIDGET\" | undefined; sensitive?: boolean | undefined; label?: string | undefined; order?: number | undefined; hint?: string | undefined; } & { messages?: { type: \"info\" | \"error\" | \"success\" | \"warning\"; text: string; id?: number | undefined; }[] | undefined; } | { type: \"HTML\"; id: string; visible: boolean; category?: \"BLOCK\" | undefined; config?: { content?: string | undefined; } | undefined; order?: number | undefined; } | { type: \"HTML\"; id: string; visible: boolean; category?: \"BLOCK\" | undefined; config?: { content?: string | undefined; } | undefined; order?: number | undefined; } & { messages?: { type: \"info\" | \"error\" | \"success\" | \"warning\"; text: string; id?: number | undefined; }[] | undefined; } | { type: \"IMAGE\"; id: string; visible: boolean; category?: \"BLOCK\" | undefined; config?: { src?: string | undefined; alt?: string | undefined; width?: number | undefined; height?: number | undefined; } | undefined; order?: number | undefined; } | { type: \"IMAGE\"; id: string; visible: boolean; category?: \"BLOCK\" | undefined; config?: { src?: string | undefined; alt?: string | undefined; width?: number | undefined; height?: number | undefined; } | undefined; order?: number | undefined; } & { messages?: { type: \"info\" | \"error\" | \"success\" | \"warning\"; text: string; id?: number | undefined; }[] | undefined; } | { type: \"JUMP_BUTTON\"; id: string; config: { text?: string | undefined; target_step?: string | undefined; }; visible: boolean; category?: \"BLOCK\" | undefined; order?: number | undefined; } | { type: \"JUMP_BUTTON\"; id: string; config: { text?: string | undefined; target_step?: string | undefined; }; visible: boolean; category?: \"BLOCK\" | undefined; order?: number | undefined; } & { messages?: { type: \"info\" | \"error\" | \"success\" | \"warning\"; text: string; id?: number | undefined; }[] | undefined; } | { type: \"LEGAL\"; id: string; visible: boolean; required?: boolean | undefined; category?: \"FIELD\" | undefined; config?: { text: string; html?: boolean | undefined; } | undefined; sensitive?: boolean | undefined; label?: string | undefined; order?: number | undefined; hint?: string | undefined; } | { type: \"LEGAL\"; id: string; visible: boolean; required?: boolean | undefined; category?: \"FIELD\" | undefined; config?: { text: string; html?: boolean | undefined; } | undefined; sensitive?: boolean | undefined; label?: string | undefined; order?: number | undefined; hint?: string | undefined; } & { messages?: { type: \"info\" | \"error\" | \"success\" | \"warning\"; text: string; id?: number | undefined; }[] | undefined; } | { type: \"NEXT_BUTTON\"; id: string; config: { text?: string | undefined; }; visible: boolean; category?: \"BLOCK\" | undefined; order?: number | undefined; } | { type: \"NEXT_BUTTON\"; id: string; config: { text?: string | undefined; }; visible: boolean; category?: \"BLOCK\" | undefined; order?: number | undefined; } & { messages?: { type: \"info\" | \"error\" | \"success\" | \"warning\"; text: string; id?: number | undefined; }[] | undefined; } | { type: \"NUMBER\"; id: string; visible: boolean; required?: boolean | undefined; category?: \"FIELD\" | undefined; config?: { placeholder?: string | undefined; min?: number | undefined; max?: number | undefined; step?: number | undefined; } | undefined; sensitive?: boolean | undefined; label?: string | undefined; order?: number | undefined; hint?: string | undefined; } | { type: \"NUMBER\"; id: string; visible: boolean; required?: boolean | undefined; category?: \"FIELD\" | undefined; config?: { placeholder?: string | undefined; min?: number | undefined; max?: number | undefined; step?: number | undefined; } | undefined; sensitive?: boolean | undefined; label?: string | undefined; order?: number | undefined; hint?: string | undefined; } & { messages?: { type: \"info\" | \"error\" | \"success\" | \"warning\"; text: string; id?: number | undefined; }[] | undefined; } | { type: \"PASSWORD\"; id: string; visible: boolean; required?: boolean | undefined; category?: \"FIELD\" | undefined; config?: { placeholder?: string | undefined; min_length?: number | undefined; show_toggle?: boolean | undefined; } | undefined; sensitive?: boolean | undefined; label?: string | undefined; order?: number | undefined; hint?: string | undefined; } | { type: \"PASSWORD\"; id: string; visible: boolean; required?: boolean | undefined; category?: \"FIELD\" | undefined; config?: { placeholder?: string | undefined; min_length?: number | undefined; show_toggle?: boolean | undefined; } | undefined; sensitive?: boolean | undefined; label?: string | undefined; order?: number | undefined; hint?: string | undefined; } & { messages?: { type: \"info\" | \"error\" | \"success\" | \"warning\"; text: string; id?: number | undefined; }[] | undefined; } | { type: \"PAYMENT\"; id: string; visible: boolean; required?: boolean | undefined; category?: \"FIELD\" | undefined; config?: { provider?: string | undefined; currency?: string | undefined; } | undefined; sensitive?: boolean | undefined; label?: string | undefined; order?: number | undefined; hint?: string | undefined; } | { type: \"PAYMENT\"; id: string; visible: boolean; required?: boolean | undefined; category?: \"FIELD\" | undefined; config?: { provider?: string | undefined; currency?: string | undefined; } | undefined; sensitive?: boolean | undefined; label?: string | undefined; order?: number | undefined; hint?: string | undefined; } & { messages?: { type: \"info\" | \"error\" | \"success\" | \"warning\"; text: string; id?: number | undefined; }[] | undefined; } | { type: \"PREVIOUS_BUTTON\"; id: string; config: { text?: string | undefined; }; visible: boolean; category?: \"BLOCK\" | undefined; order?: number | undefined; } | { type: \"PREVIOUS_BUTTON\"; id: string; config: { text?: string | undefined; }; visible: boolean; category?: \"BLOCK\" | undefined; order?: number | undefined; } & { messages?: { type: \"info\" | \"error\" | \"success\" | \"warning\"; text: string; id?: number | undefined; }[] | undefined; } | { type: \"RECAPTCHA\"; id: string; config: { site_key?: string | undefined; }; visible: boolean; required?: boolean | undefined; category?: \"WIDGET\" | undefined; sensitive?: boolean | undefined; label?: string | undefined; order?: number | undefined; hint?: string | undefined; } | { type: \"RECAPTCHA\"; id: string; config: { site_key?: string | undefined; }; visible: boolean; required?: boolean | undefined; category?: \"WIDGET\" | undefined; sensitive?: boolean | undefined; label?: string | undefined; order?: number | undefined; hint?: string | undefined; } & { messages?: { type: \"info\" | \"error\" | \"success\" | \"warning\"; text: string; id?: number | undefined; }[] | undefined; } | { type: \"RESEND_BUTTON\"; id: string; config: { text?: string | undefined; resend_action?: string | undefined; }; visible: boolean; category?: \"BLOCK\" | undefined; order?: number | undefined; } | { type: \"RESEND_BUTTON\"; id: string; config: { text?: string | undefined; resend_action?: string | undefined; }; visible: boolean; category?: \"BLOCK\" | undefined; order?: number | undefined; } & { messages?: { type: \"info\" | \"error\" | \"success\" | \"warning\"; text: string; id?: number | undefined; }[] | undefined; } | { type: \"RICH_TEXT\"; id: string; visible: boolean; category?: \"BLOCK\" | undefined; config?: { content?: string | undefined; } | undefined; order?: number | undefined; } | { type: \"RICH_TEXT\"; id: string; visible: boolean; category?: \"BLOCK\" | undefined; config?: { content?: string | undefined; } | undefined; order?: number | undefined; } & { messages?: { type: \"info\" | \"error\" | \"success\" | \"warning\"; text: string; id?: number | undefined; }[] | undefined; } | { type: \"SOCIAL\"; id: string; visible: boolean; required?: boolean | undefined; category?: \"FIELD\" | undefined; config?: { providers?: string[] | undefined; } | undefined; sensitive?: boolean | undefined; label?: string | undefined; order?: number | undefined; hint?: string | undefined; } | { type: \"SOCIAL\"; id: string; visible: boolean; required?: boolean | undefined; category?: \"FIELD\" | undefined; config?: { providers?: string[] | undefined; } | undefined; sensitive?: boolean | undefined; label?: string | undefined; order?: number | undefined; hint?: string | undefined; } & { messages?: { type: \"info\" | \"error\" | \"success\" | \"warning\"; text: string; id?: number | undefined; }[] | undefined; } | { type: \"TEL\"; id: string; visible: boolean; required?: boolean | undefined; category?: \"FIELD\" | undefined; config?: { placeholder?: string | undefined; default_country?: string | undefined; } | undefined; sensitive?: boolean | undefined; label?: string | undefined; order?: number | undefined; hint?: string | undefined; } | { type: \"TEL\"; id: string; visible: boolean; required?: boolean | undefined; category?: \"FIELD\" | undefined; config?: { placeholder?: string | undefined; default_country?: string | undefined; } | undefined; sensitive?: boolean | undefined; label?: string | undefined; order?: number | undefined; hint?: string | undefined; } & { messages?: { type: \"info\" | \"error\" | \"success\" | \"warning\"; text: string; id?: number | undefined; }[] | undefined; } | { type: \"TEXT\"; id: string; visible: boolean; required?: boolean | undefined; category?: \"FIELD\" | undefined; config?: { placeholder?: string | undefined; multiline?: boolean | undefined; max_length?: number | undefined; } | undefined; sensitive?: boolean | undefined; label?: string | undefined; order?: number | undefined; hint?: string | undefined; } | { type: \"TEXT\"; id: string; visible: boolean; required?: boolean | undefined; category?: \"FIELD\" | undefined; config?: { placeholder?: string | undefined; multiline?: boolean | undefined; max_length?: number | undefined; } | undefined; sensitive?: boolean | undefined; label?: string | undefined; order?: number | undefined; hint?: string | undefined; } & { messages?: { type: \"info\" | \"error\" | \"success\" | \"warning\"; text: string; id?: number | undefined; }[] | undefined; } | { type: \"URL\"; id: string; visible: boolean; required?: boolean | undefined; category?: \"FIELD\" | undefined; config?: { placeholder?: string | undefined; } | undefined; sensitive?: boolean | undefined; label?: string | undefined; order?: number | undefined; hint?: string | undefined; } | { type: \"URL\"; id: string; visible: boolean; required?: boolean | undefined; category?: \"FIELD\" | undefined; config?: { placeholder?: string | undefined; } | undefined; sensitive?: boolean | undefined; label?: string | undefined; order?: number | undefined; hint?: string | undefined; } & { messages?: { type: \"info\" | \"error\" | \"success\" | \"warning\"; text: string; id?: number | undefined; }[] | undefined; }",
+                    "references": {
+                        "FormComponent": {
+                            "location": "import",
+                            "path": "../../types/components",
+                            "id": "src/types/components.ts::FormNodeComponent",
+                            "referenceLocation": "FormComponent"
+                        },
+                        "RuntimeComponent": {
+                            "location": "import",
+                            "path": "../../types/components",
+                            "id": "src/types/components.ts::RuntimeComponent",
+                            "referenceLocation": "RuntimeComponent"
+                        }
+                    }
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The component configuration to render.\nFollows Auth0 Forms component schema."
+                },
+                "getter": false,
+                "setter": false
+            },
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Current value for field components."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the component is disabled."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "fieldChange",
+                "name": "fieldChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when a field value changes."
+                },
+                "complexType": {
+                    "original": "{ id: string; value: string }",
+                    "resolved": "{ id: string; value: string; }",
+                    "references": {}
+                }
+            }, {
+                "method": "buttonClick",
+                "name": "buttonClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when a button is clicked."
+                },
+                "complexType": {
+                    "original": "{\n    id: string;\n    type: string;\n    value?: string;\n  }",
+                    "resolved": "{ id: string; type: string; value?: string | undefined; }",
+                    "references": {}
+                }
+            }];
+    }
+}

package/dist/collection/components/authhero-widget/authhero-widget.css

@@ -0,0 +1,186 @@
+/**
+ * AuthHero Widget Component Styles
+ * 
+ * Uses CSS custom properties from themes/variables.css
+ * Exposes CSS parts for external styling via ::part()
+ */
+
+:host {
+  display: block;
+  font-family: var(--ah-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif);
+}
+
+/* ==========================================================================
+   Widget Container
+   Part: container
+   ========================================================================== */
+
+.widget-container {
+  max-width: var(--ah-widget-max-width, 400px);
+  margin: 0 auto;
+  padding: var(--ah-widget-padding, 2rem);
+  background-color: var(--ah-color-bg, #ffffff);
+  border-radius: var(--ah-widget-radius, 8px);
+  box-shadow: var(--ah-widget-shadow, 0 2px 10px rgba(0, 0, 0, 0.1));
+}
+
+/* ==========================================================================
+   Logo
+   Part: logo
+   ========================================================================== */
+
+.logo {
+  display: block;
+  width: var(--ah-logo-size, 48px);
+  height: var(--ah-logo-size, 48px);
+  margin: 0 auto var(--ah-space-6, 1.5rem);
+  object-fit: contain;
+  border-radius: var(--ah-logo-radius, 8px);
+}
+
+/* ==========================================================================
+   Title
+   Part: title
+   ========================================================================== */
+
+.title {
+  font-size: var(--ah-font-size-2xl, 1.5rem);
+  font-weight: var(--ah-font-weight-semibold, 600);
+  text-align: center;
+  margin: 0 0 var(--ah-space-8, 2rem);
+  color: var(--ah-color-text, #111827);
+  line-height: var(--ah-line-height-tight, 1.25);
+}
+
+/* ==========================================================================
+   Messages
+   Part: message, message-error, message-success
+   ========================================================================== */
+
+.message {
+  padding: var(--ah-space-3, 0.75rem) var(--ah-space-4, 1rem);
+  border-radius: var(--ah-radius-md, 4px);
+  margin-bottom: var(--ah-space-4, 1rem);
+  font-size: var(--ah-font-size-sm, 0.875rem);
+  line-height: var(--ah-line-height-normal, 1.5);
+}
+
+.message-error {
+  background-color: var(--ah-color-error-bg, #fee2e2);
+  color: var(--ah-color-error, #dc2626);
+  border: 1px solid var(--ah-color-error-border, #fecaca);
+}
+
+.message-success {
+  background-color: var(--ah-color-success-bg, #dcfce7);
+  color: var(--ah-color-success, #16a34a);
+  border: 1px solid var(--ah-color-success-border, #bbf7d0);
+}
+
+/* ==========================================================================
+   Form
+   Part: form
+   ========================================================================== */
+
+form {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ah-space-4, 1rem);
+}
+
+/* ==========================================================================
+   Links Footer
+   Part: links
+   ========================================================================== */
+
+.links {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--ah-space-2, 0.5rem);
+  margin-top: var(--ah-space-6, 1.5rem);
+  padding-top: var(--ah-space-4, 1rem);
+}
+
+.link-wrapper {
+  font-size: var(--ah-font-size-sm, 0.875rem);
+  color: var(--ah-color-text-muted, #6b7280);
+}
+
+.link {
+  color: var(--ah-color-primary, #0066cc);
+  text-decoration: none;
+  font-size: var(--ah-font-size-sm, 0.875rem);
+  transition: color var(--ah-transition-fast, 150ms ease);
+}
+
+.link:hover {
+  text-decoration: underline;
+}
+
+.link:focus-visible {
+  outline: 2px solid var(--ah-color-primary, #0066cc);
+  outline-offset: 2px;
+}
+
+/* ==========================================================================
+   Divider
+   Part: divider
+   ========================================================================== */
+
+.divider {
+  display: flex;
+  align-items: center;
+  text-align: center;
+  margin: var(--ah-space-2, 0.5rem) 0;
+}
+
+.divider::before,
+.divider::after {
+  content: '';
+  flex: 1;
+  border-bottom: 1px solid var(--ah-color-border-muted, #e5e7eb);
+}
+
+.divider-text {
+  padding: 0 var(--ah-space-4, 1rem);
+  font-size: var(--ah-font-size-sm, 0.875rem);
+  color: var(--ah-color-text-muted, #9ca3af);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+/* ==========================================================================
+   Loading Spinner
+   Part: spinner
+   ========================================================================== */
+
+.loading-spinner {
+  width: 40px;
+  height: 40px;
+  margin: var(--ah-space-8, 2rem) auto;
+  border: 3px solid var(--ah-color-border-muted, #f3f3f3);
+  border-top: 3px solid var(--ah-color-primary, #0066cc);
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+/* ==========================================================================
+   Error State
+   Part: error-message
+   ========================================================================== */
+
+.error-message {
+  text-align: center;
+  color: var(--ah-color-error, #dc2626);
+  padding: var(--ah-space-4, 1rem);
+}