@actabldesign/bellhop-core 0.0.3 → 0.0.6

package/cjs/bh-input-password.cjs.entry.js

@@ -1,182 +0,0 @@
-'use strict';
-
-var index = require('./index-tZqSQc8E.js');
-var form = require('./form-9mbajZ3y.js');
-
-const bhInputPasswordCss = ":host{display:block;font-family:var(--font-inter, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif)}.input-wrapper{display:flex;flex-direction:column;gap:var(--spacing-sm, 8px);width:100%}.input-container{display:flex;align-items:center;gap:var(--spacing-md, 12px);padding:var(--spacing-md, 12px);height:36px;width:100%;background:var(--color-white, #FFFFFF);border:1px solid var(--color-neutral-300, #D0D5DD);border-radius:var(--spacing-md, 8px);transition:all 0.2s ease-in-out;cursor:text;box-sizing:border-box}.input-container.input-container-with-leading{padding:var(--spacing-md, 12px) var(--spacing-lg, 16px)}.input-container.input-container-hover{border-color:var(--color-brand-500, #7F56D9)}.input-container.input-container-focused{border-color:var(--color-brand-500, #7F56D9);box-shadow:0 0 0 1px var(--color-brand-500, #7F56D9)}.input-container.input-container-disabled{opacity:0.5;cursor:not-allowed;background:var(--color-neutral-50, #F9FAFB)}.input-container.input-container-error{border-color:var(--color-error-300, #FDA29B)}.input-container.input-container-error.input-container-hover{border-color:var(--color-error-500, #F05250)}.input-container.input-container-error.input-container-focused{border-color:var(--color-brand-600, #6941C6)}.input-content{display:flex;align-items:center;gap:var(--spacing-md, 12px);flex:1;height:100%;min-width:0}.input-element{flex:1;height:100%;border:none;outline:none;background:transparent;font-family:inherit;font-weight:400;font-size:var(--text-sm-size, 14px);line-height:1.43;color:var(--color-neutral-800, #1D2939);min-width:60px;padding:0}.input-element:focus{outline:none;border:none;box-shadow:none}.input-element::placeholder{color:var(--color-neutral-500, #667085)}.input-element:disabled{cursor:not-allowed}.leading-icon{font-size:var(--text-xl-size, 20px);color:var(--color-neutral-500, #667085);user-select:none;flex-shrink:0;cursor:default;transition:color 0.2s ease-in-out}.input-container-focused .leading-icon{color:var(--color-brand-600, #6941C6)}.visibility-toggle{font-size:var(--text-xl-size, 20px);color:var(--color-neutral-400, #98A2B3);cursor:pointer;user-select:none;flex-shrink:0;transition:color 0.2s ease-in-out}.visibility-toggle:hover{color:var(--color-neutral-600, #475467)}.input-container-disabled .visibility-toggle{cursor:not-allowed;pointer-events:none}.hint-text{font-family:inherit;font-weight:400;font-size:var(--text-sm-size, 14px);line-height:1.43;color:var(--color-neutral-600, #475467)}.hint-text.hint-error{color:var(--color-error-600, #DC2626)}.material-symbols-outlined{font-family:'Material Symbols Outlined';font-weight:normal;font-style:normal;font-size:20px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;font-feature-settings:'liga';-webkit-font-smoothing:antialiased;font-variation-settings:'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24}";
-
-const BhInputPassword = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.bhInput = index.createEvent(this, "bhInput");
-        this.bhFocus = index.createEvent(this, "bhFocus");
-        this.bhBlur = index.createEvent(this, "bhBlur");
-        this.bhHelpClick = index.createEvent(this, "bhHelpClick");
-        this.bhVisibilityToggle = index.createEvent(this, "bhVisibilityToggle");
-        if (hostRef.$hostElement$["s-ei"]) {
-            this.internals = hostRef.$hostElement$["s-ei"];
-        }
-        else {
-            this.internals = hostRef.$hostElement$.attachInternals();
-            hostRef.$hostElement$["s-ei"] = this.internals;
-        }
-    }
-    internals;
-    inputEl;
-    /**
-     * The label for the input
-     */
-    label = 'Password';
-    /**
-     * Placeholder text
-     */
-    placeholder = 'Enter your password';
-    /**
-     * Hint text shown below the input
-     */
-    hintText = '';
-    /**
-     * Whether to show the label
-     */
-    showLabel = true;
-    /**
-     * Whether to show hint text
-     */
-    showHintText = true;
-    /**
-     * Whether to show the help icon
-     */
-    showHelpIcon = false;
-    /**
-     * Whether to show a leading icon
-     */
-    showLeadingIcon = true;
-    /**
-     * Whether the field has an error
-     */
-    error = false;
-    /**
-     * Whether the input is disabled
-     */
-    disabled = false;
-    /**
-     * Whether the field is required
-     */
-    required = false;
-    /**
-     * Tooltip text for the help icon
-     */
-    helpIconTooltip = 'Password requirements';
-    /**
-     * Leading icon name (Material Symbols)
-     */
-    leadingIcon = 'lock';
-    /**
-     * The input value
-     */
-    value = '';
-    /**
-     * Name attribute for form submission
-     */
-    name = '';
-    /**
-     * Default value for form reset
-     */
-    defaultValue = '';
-    /**
-     * Custom validation message
-     */
-    validationMessage = '';
-    /**
-     * Track focus state
-     */
-    isFocused = false;
-    /**
-     * Track hover state
-     */
-    isHovered = false;
-    /**
-     * Track password visibility
-     */
-    showPassword = false;
-    /**
-     * Emitted when the value changes
-     */
-    bhInput;
-    /**
-     * Emitted when the input gains focus
-     */
-    bhFocus;
-    /**
-     * Emitted when the input loses focus
-     */
-    bhBlur;
-    /**
-     * Emitted when the help icon is clicked
-     */
-    bhHelpClick;
-    /**
-     * Emitted when visibility is toggled
-     */
-    bhVisibilityToggle;
-    componentDidLoad() {
-        form.syncFormValue(this);
-        form.updateValidity(this.internals, this.inputEl, this.validationMessage);
-    }
-    formResetCallback() {
-        this.value = this.defaultValue;
-        if (this.inputEl) {
-            this.inputEl.value = this.defaultValue;
-        }
-        form.syncFormValue(this);
-        form.updateValidity(this.internals, this.inputEl);
-    }
-    handleInput = (event) => {
-        const target = event.target;
-        this.value = target.value;
-        this.bhInput.emit(this.value);
-        form.syncFormValue(this);
-        form.updateValidity(this.internals, this.inputEl, this.validationMessage);
-    };
-    handleFocus = () => {
-        this.isFocused = true;
-        this.bhFocus.emit();
-    };
-    handleBlur = () => {
-        this.isFocused = false;
-        this.bhBlur.emit();
-    };
-    handleMouseEnter = () => {
-        if (!this.isFocused) {
-            this.isHovered = true;
-        }
-    };
-    handleMouseLeave = () => {
-        this.isHovered = false;
-    };
-    togglePasswordVisibility = () => {
-        if (!this.disabled) {
-            this.showPassword = !this.showPassword;
-            this.bhVisibilityToggle.emit(this.showPassword);
-        }
-    };
-    handleHelpClick = () => {
-        this.bhHelpClick.emit();
-    };
-    render() {
-        const containerClasses = {
-            'input-container': true,
-            'input-container-focused': this.isFocused,
-            'input-container-hover': this.isHovered && !this.isFocused,
-            'input-container-error': this.error,
-            'input-container-disabled': this.disabled,
-            'input-container-with-leading': this.showLeadingIcon,
-        };
-        return (index.h("div", { key: '65214ad4e72bfdf75610edcac9c3f5723ea87446', class: "input-wrapper", part: "wrapper" }, index.h("bh-label", { key: 'a7bfffd4d1221aba3ea7642b3589869724d50286', label: this.showLabel ? this.label : '', required: this.required, showHelpIcon: this.showHelpIcon, helpIconTooltip: this.helpIconTooltip, disabled: this.disabled, onBhHelpClick: this.handleHelpClick }, index.h("div", { key: '2879a7616747302fbd432321db764a6e63548dae', class: containerClasses, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, index.h("div", { key: '11ef311fc118a7595cb210fac70fda53599756a2', class: "input-content" }, this.showLeadingIcon && (index.h("span", { key: '805a132b4411f3b4016ea522701ac419915e0e88', class: "material-symbols-outlined leading-icon" }, this.leadingIcon)), index.h("input", { key: '0c4f69d29acb824ccf7fd23dc11b4b4d6385a38b', ref: (el) => (this.inputEl = el), type: this.showPassword ? 'text' : 'password', class: "input-element", name: this.name, value: this.value, placeholder: this.placeholder, disabled: this.disabled, required: this.required, "aria-label": this.label, "aria-describedby": this.showHintText && this.hintText ? 'hint-text' : undefined, "aria-invalid": String(this.error), onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, part: "input" })), index.h("span", { key: 'ce8f1bd6a95110b76a573e0f65ec43a7cfe6846b', class: "material-symbols-outlined visibility-toggle", onClick: this.togglePasswordVisibility, title: this.showPassword ? 'Hide password' : 'Show password' }, this.showPassword ? 'visibility_off' : 'visibility'))), this.showHintText && this.hintText && (index.h("div", { key: 'cd3f626bd84d01bcda347e2844c7150a474d91eb', class: { 'hint-text': true, 'hint-error': this.error }, id: "hint-text" }, this.hintText))));
-    }
-    static get formAssociated() { return true; }
-};
-BhInputPassword.style = bhInputPasswordCss;
-
-exports.bh_input_password = BhInputPassword;
-//# sourceMappingURL=bh-input-password.entry.cjs.js.map

package/cjs/bh-input-text.cjs.entry.js

@@ -1,192 +0,0 @@
-'use strict';
-
-var index = require('./index-tZqSQc8E.js');
-var form = require('./form-9mbajZ3y.js');
-
-const bhInputTextCss = ":host{display:block;font-family:var(\n    --font-inter,\n    'Inter',\n    -apple-system,\n    BlinkMacSystemFont,\n    sans-serif\n  )}.input-wrapper{display:flex;flex-direction:column;gap:var(--spacing-sm, 8px);width:100%}.input-container{display:flex;align-items:center;gap:var(--spacing-md, 12px);padding:var(--spacing-md, 12px);height:36px;width:100%;background:var(--color-white, #ffffff);border:1px solid var(--color-neutral-300, #d0d5dd);border-radius:var(--spacing-md, 8px);transition:all 0.2s ease-in-out;cursor:text;box-sizing:border-box}.input-container.input-container-with-leading{padding:var(--spacing-md, 12px) var(--spacing-lg, 16px)}.input-container.input-container-hover{border-color:var(--color-brand-500, #7f56d9)}.input-container.input-container-focused{border-color:var(--color-brand-500, #7f56d9);box-shadow:0 0 0 1px var(--color-brand-500, #7f56d9)}.input-container.input-container-disabled{opacity:0.5;cursor:not-allowed;background:var(--color-neutral-50, #f9fafb)}.input-container.input-container-error{border-color:var(--color-error-300, #fda29b)}.input-container.input-container-error.input-container-hover{border-color:var(--color-error-500, #f05250)}.input-container.input-container-error.input-container-focused{border-color:var(--color-brand-600, #6941c6)}.input-content{display:flex;align-items:center;gap:var(--spacing-md, 12px);flex:1;height:100%;min-width:0}.input-element{flex:1;height:100%;border:none;outline:none;background:transparent;font-family:inherit;font-weight:400;font-size:var(--text-sm-size, 14px);line-height:1.43;color:var(--color-neutral-800, #1d2939);min-width:60px;padding:0}.input-element:focus{outline:none;border:none;box-shadow:none}.input-element::placeholder{color:var(--color-neutral-500, #667085)}.input-element:disabled{cursor:not-allowed}.leading-icon,.trailing-icon{font-size:var(--text-xl-size, 20px);color:var(--color-neutral-500, #667085);user-select:none;flex-shrink:0;cursor:default;transition:color 0.2s ease-in-out}.input-container-focused .leading-icon,.input-container-focused .trailing-icon{color:var(--color-brand-600, #6941c6)}.hint-text{font-family:inherit;font-weight:400;font-size:var(--text-sm-size, 14px);line-height:1.43;color:var(--color-neutral-600, #475467)}.hint-text.hint-error{color:var(--color-error-600, #dc2626)}.material-symbols-outlined{font-family:'Material Symbols Outlined';font-weight:normal;font-style:normal;font-size:20px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;font-feature-settings:'liga';-webkit-font-smoothing:antialiased;font-variation-settings:'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24}";
-
-const BhInputText = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.bhInput = index.createEvent(this, "bhInput");
-        this.bhFocus = index.createEvent(this, "bhFocus");
-        this.bhBlur = index.createEvent(this, "bhBlur");
-        this.bhHelpClick = index.createEvent(this, "bhHelpClick");
-        if (hostRef.$hostElement$["s-ei"]) {
-            this.internals = hostRef.$hostElement$["s-ei"];
-        }
-        else {
-            this.internals = hostRef.$hostElement$.attachInternals();
-            hostRef.$hostElement$["s-ei"] = this.internals;
-        }
-    }
-    internals;
-    inputEl;
-    /**
-     * The label for the input
-     */
-    label = 'Email';
-    /**
-     * Placeholder text
-     */
-    placeholder = 'fujiwara@act-hq.com';
-    /**
-     * Hint text shown below the input
-     */
-    hintText = '';
-    /**
-     * Whether to show the label
-     */
-    showLabel = true;
-    /**
-     * Whether to show hint text
-     */
-    showHintText = true;
-    /**
-     * Whether to show the help icon
-     */
-    showHelpIcon = false;
-    /**
-     * Whether to show a leading icon
-     */
-    showLeadingIcon = false;
-    /**
-     * Whether to show a trailing icon
-     */
-    showTrailingIcon = false;
-    /**
-     * Whether the field has an error
-     */
-    error = false;
-    /**
-     * Whether the input is disabled
-     */
-    disabled = false;
-    /**
-     * Whether the field is required
-     */
-    required = false;
-    /**
-     * Tooltip text for the help icon
-     */
-    helpIconTooltip = 'Help';
-    /**
-     * Leading icon name (Material Symbols)
-     */
-    leadingIcon = 'mail';
-    /**
-     * Trailing icon name (Material Symbols)
-     */
-    trailingIcon = 'search';
-    /**
-     * The input value
-     */
-    value = '';
-    /**
-     * Name attribute for form submission
-     */
-    name = '';
-    /**
-     * Default value for form reset
-     */
-    defaultValue = '';
-    /**
-     * Custom validation message
-     */
-    validationMessage = '';
-    /**
-     * Input type (text, email, tel, url, etc.)
-     */
-    type = 'text';
-    /**
-     * Width of the input (e.g., '100%', '200px')
-     */
-    width = '';
-    /**
-     * Whether the input is read-only
-     */
-    readOnly = false;
-    /**
-     * Visual state of the input (for programmatic control)
-     */
-    state = 'default';
-    /**
-     * Track focus state
-     */
-    isFocused = false;
-    /**
-     * Track hover state
-     */
-    isHovered = false;
-    /**
-     * Emitted when the value changes
-     */
-    bhInput;
-    /**
-     * Emitted when the input gains focus
-     */
-    bhFocus;
-    /**
-     * Emitted when the input loses focus
-     */
-    bhBlur;
-    /**
-     * Emitted when the help icon is clicked
-     */
-    bhHelpClick;
-    handleInput = (event) => {
-        const target = event.target;
-        this.value = target.value;
-        this.bhInput.emit(this.value);
-        form.syncFormValue(this);
-        form.updateValidity(this.internals, this.inputEl, this.validationMessage);
-    };
-    componentDidLoad() {
-        form.syncFormValue(this);
-        form.updateValidity(this.internals, this.inputEl, this.validationMessage);
-    }
-    formResetCallback() {
-        this.value = this.defaultValue;
-        if (this.inputEl) {
-            this.inputEl.value = this.defaultValue;
-        }
-        form.syncFormValue(this);
-        form.updateValidity(this.internals, this.inputEl);
-    }
-    handleFocus = () => {
-        this.isFocused = true;
-        this.bhFocus.emit();
-    };
-    handleBlur = () => {
-        this.isFocused = false;
-        this.bhBlur.emit();
-    };
-    handleMouseEnter = () => {
-        if (!this.isFocused) {
-            this.isHovered = true;
-        }
-    };
-    handleMouseLeave = () => {
-        this.isHovered = false;
-    };
-    handleHelpClick = () => {
-        this.bhHelpClick.emit();
-    };
-    render() {
-        const containerClasses = {
-            'input-container': true,
-            'input-container-focused': this.isFocused,
-            'input-container-hover': this.isHovered && !this.isFocused,
-            'input-container-error': this.error,
-            'input-container-disabled': this.disabled,
-            'input-container-with-leading': this.showLeadingIcon,
-        };
-        const wrapperStyle = this.width ? { width: this.width } : {};
-        return (index.h("div", { key: '8be476e7f8d85ed21706e81315a7fe40588ace3a', class: "input-wrapper", part: "wrapper", style: wrapperStyle }, index.h("bh-label", { key: '55bb3367d150c5db61d74ed25226d69438f66270', label: this.showLabel ? this.label : '', required: this.required, showHelpIcon: this.showHelpIcon, helpIconTooltip: this.helpIconTooltip, disabled: this.disabled, onBhHelpClick: this.handleHelpClick }, index.h("div", { key: '2169c7fc04983918bebcf5d5a70a29fe815bd505', class: containerClasses, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, index.h("div", { key: '3d6d5214a7ed55b056ffdd6a122f7fbdcf07bc6a', class: "input-content" }, this.showLeadingIcon && (index.h("span", { key: 'd965c766b8a9a5161eeee18bbce611743690d083', class: "material-symbols-outlined leading-icon" }, this.leadingIcon)), index.h("input", { key: '8e2f44e90820c1610668cb8b3a358db7ae9064e3', ref: (el) => (this.inputEl = el), type: this.type, class: "input-element", name: this.name, value: this.value, placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readOnly, required: this.required, "aria-label": this.label, "aria-describedby": this.showHintText && this.hintText ? 'hint-text' : undefined, "aria-invalid": String(this.error), onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, part: "input" }), this.showTrailingIcon && (index.h("span", { key: 'b46caa1cbec2f649ee5cb2a098e4f4241ab4eabb', class: "material-symbols-outlined trailing-icon" }, this.trailingIcon))))), this.showHintText && this.hintText && (index.h("div", { key: 'd33e25eda39c460df62e77a07dae8ebf69938f57', class: { 'hint-text': true, 'hint-error': this.error }, id: "hint-text" }, this.hintText))));
-    }
-    static get formAssociated() { return true; }
-};
-BhInputText.style = bhInputTextCss;
-
-exports.bh_input_text = BhInputText;
-//# sourceMappingURL=bh-input-text.entry.cjs.js.map

package/cjs/bh-input-text.entry.cjs.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"bh-input-text.entry.cjs.js","sources":["src/components/bh-input-text/bh-input-text.css?tag=bh-input-text&encapsulation=shadow","src/components/bh-input-text/bh-input-text.tsx"],"sourcesContent":[":host {\n  display: block;\n  font-family: var(\n    --font-inter,\n    'Inter',\n    -apple-system,\n    BlinkMacSystemFont,\n    sans-serif\n  );\n}\n\n/* Input Wrapper */\n.input-wrapper {\n  display: flex;\n  flex-direction: column;\n  gap: var(--spacing-sm, 8px);\n  width: 100%;\n}\n\n/* Input Container */\n.input-container {\n  display: flex;\n  align-items: center;\n  gap: var(--spacing-md, 12px);\n  padding: var(--spacing-md, 12px);\n  height: 36px;\n  width: 100%;\n  background: var(--color-white, #ffffff);\n  border: 1px solid var(--color-neutral-300, #d0d5dd);\n  border-radius: var(--spacing-md, 8px);\n  transition: all 0.2s ease-in-out;\n  cursor: text;\n  box-sizing: border-box;\n}\n\n.input-container.input-container-with-leading {\n  padding: var(--spacing-md, 12px) var(--spacing-lg, 16px);\n}\n\n/* Input States */\n.input-container.input-container-hover {\n  border-color: var(--color-brand-500, #7f56d9);\n}\n\n.input-container.input-container-focused {\n  border-color: var(--color-brand-500, #7f56d9);\n  box-shadow: 0 0 0 1px var(--color-brand-500, #7f56d9);\n}\n\n.input-container.input-container-disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n  background: var(--color-neutral-50, #f9fafb);\n}\n\n.input-container.input-container-error {\n  border-color: var(--color-error-300, #fda29b);\n}\n\n.input-container.input-container-error.input-container-hover {\n  border-color: var(--color-error-500, #f05250);\n}\n\n.input-container.input-container-error.input-container-focused {\n  border-color: var(--color-brand-600, #6941c6);\n}\n\n/* Input Content */\n.input-content {\n  display: flex;\n  align-items: center;\n  gap: var(--spacing-md, 12px);\n  flex: 1;\n  height: 100%;\n  min-width: 0;\n}\n\n/* Input Element */\n.input-element {\n  flex: 1;\n  height: 100%;\n  border: none;\n  outline: none;\n  background: transparent;\n  font-family: inherit;\n  font-weight: 400;\n  font-size: var(--text-sm-size, 14px);\n  line-height: 1.43;\n  color: var(--color-neutral-800, #1d2939);\n  min-width: 60px;\n  padding: 0;\n}\n\n.input-element:focus {\n  outline: none;\n  border: none;\n  box-shadow: none;\n}\n\n.input-element::placeholder {\n  color: var(--color-neutral-500, #667085);\n}\n\n.input-element:disabled {\n  cursor: not-allowed;\n}\n\n/* Icons */\n.leading-icon,\n.trailing-icon {\n  font-size: var(--text-xl-size, 20px);\n  color: var(--color-neutral-500, #667085);\n  user-select: none;\n  flex-shrink: 0;\n  cursor: default;\n  transition: color 0.2s ease-in-out;\n}\n\n.input-container-focused .leading-icon,\n.input-container-focused .trailing-icon {\n  color: var(--color-brand-600, #6941c6);\n}\n\n/* Hint Text */\n.hint-text {\n  font-family: inherit;\n  font-weight: 400;\n  font-size: var(--text-sm-size, 14px);\n  line-height: 1.43;\n  color: var(--color-neutral-600, #475467);\n}\n\n.hint-text.hint-error {\n  color: var(--color-error-600, #dc2626);\n}\n\n/* Material Symbols */\n.material-symbols-outlined {\n  font-family: 'Material Symbols Outlined';\n  font-weight: normal;\n  font-style: normal;\n  font-size: 20px;\n  line-height: 1;\n  letter-spacing: normal;\n  text-transform: none;\n  display: inline-block;\n  white-space: nowrap;\n  word-wrap: normal;\n  direction: ltr;\n  font-feature-settings: 'liga';\n  -webkit-font-smoothing: antialiased;\n  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;\n}\n","import { Component, Prop, State, Event, EventEmitter, h, AttachInternals } from '@stencil/core';\nimport { syncFormValue, updateValidity } from '../../utils/form';\n\n@Component({\n  tag: 'bh-input-text',\n  styleUrl: 'bh-input-text.css',\n  shadow: true,\n  formAssociated: true,\n})\nexport class BhInputText {\n  @AttachInternals() internals!: ElementInternals;\n\n  private inputEl?: HTMLInputElement;\n  /**\n   * The label for the input\n   */\n  @Prop() label: string = 'Email';\n\n  /**\n   * Placeholder text\n   */\n  @Prop() placeholder: string = 'fujiwara@act-hq.com';\n\n  /**\n   * Hint text shown below the input\n   */\n  @Prop() hintText: string = '';\n\n  /**\n   * Whether to show the label\n   */\n  @Prop() showLabel: boolean = true;\n\n  /**\n   * Whether to show hint text\n   */\n  @Prop() showHintText: boolean = true;\n\n  /**\n   * Whether to show the help icon\n   */\n  @Prop() showHelpIcon: boolean = false;\n\n  /**\n   * Whether to show a leading icon\n   */\n  @Prop() showLeadingIcon: boolean = false;\n\n  /**\n   * Whether to show a trailing icon\n   */\n  @Prop() showTrailingIcon: boolean = false;\n\n  /**\n   * Whether the field has an error\n   */\n  @Prop() error: boolean = false;\n\n  /**\n   * Whether the input is disabled\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Whether the field is required\n   */\n  @Prop() required: boolean = false;\n\n  /**\n   * Tooltip text for the help icon\n   */\n  @Prop() helpIconTooltip: string = 'Help';\n\n  /**\n   * Leading icon name (Material Symbols)\n   */\n  @Prop() leadingIcon: string = 'mail';\n\n  /**\n   * Trailing icon name (Material Symbols)\n   */\n  @Prop() trailingIcon: string = 'search';\n\n  /**\n   * The input value\n   */\n  @Prop({ mutable: true }) value: string = '';\n\n  /**\n   * Name attribute for form submission\n   */\n  @Prop() name: string = '';\n\n  /**\n   * Default value for form reset\n   */\n  @Prop() defaultValue: string = '';\n\n  /**\n   * Custom validation message\n   */\n  @Prop() validationMessage: string = '';\n\n  /**\n   * Input type (text, email, tel, url, etc.)\n   */\n  @Prop() type: string = 'text';\n\n  /**\n   * Width of the input (e.g., '100%', '200px')\n   */\n  @Prop() width: string = '';\n\n  /**\n   * Whether the input is read-only\n   */\n  @Prop() readOnly: boolean = false;\n\n  /**\n   * Visual state of the input (for programmatic control)\n   */\n  @Prop() state: 'default' | 'error' | 'disabled' | 'focus' | 'filled' | 'hover' = 'default';\n\n  /**\n   * Track focus state\n   */\n  @State() isFocused: boolean = false;\n\n  /**\n   * Track hover state\n   */\n  @State() isHovered: boolean = false;\n\n  /**\n   * Emitted when the value changes\n   */\n  @Event() bhInput!: EventEmitter<string>;\n\n  /**\n   * Emitted when the input gains focus\n   */\n  @Event() bhFocus!: EventEmitter<void>;\n\n  /**\n   * Emitted when the input loses focus\n   */\n  @Event() bhBlur!: EventEmitter<void>;\n\n  /**\n   * Emitted when the help icon is clicked\n   */\n  @Event() bhHelpClick!: EventEmitter<void>;\n\n  private handleInput = (event: Event): void => {\n    const target = event.target as HTMLInputElement;\n    this.value = target.value;\n    this.bhInput.emit(this.value);\n    syncFormValue(this);\n    updateValidity(this.internals, this.inputEl, this.validationMessage);\n  };\n\n  componentDidLoad() {\n    syncFormValue(this);\n    updateValidity(this.internals, this.inputEl, this.validationMessage);\n  }\n\n  formResetCallback() {\n    this.value = this.defaultValue;\n    if (this.inputEl) {\n      this.inputEl.value = this.defaultValue;\n    }\n    syncFormValue(this);\n    updateValidity(this.internals, this.inputEl);\n  }\n\n  private handleFocus = (): void => {\n    this.isFocused = true;\n    this.bhFocus.emit();\n  };\n\n  private handleBlur = (): void => {\n    this.isFocused = false;\n    this.bhBlur.emit();\n  };\n\n  private handleMouseEnter = (): void => {\n    if (!this.isFocused) {\n      this.isHovered = true;\n    }\n  };\n\n  private handleMouseLeave = (): void => {\n    this.isHovered = false;\n  };\n\n  private handleHelpClick = (): void => {\n    this.bhHelpClick.emit();\n  };\n\n  render() {\n    const containerClasses = {\n      'input-container': true,\n      'input-container-focused': this.isFocused,\n      'input-container-hover': this.isHovered && !this.isFocused,\n      'input-container-error': this.error,\n      'input-container-disabled': this.disabled,\n      'input-container-with-leading': this.showLeadingIcon,\n    };\n\n    const wrapperStyle = this.width ? { width: this.width } : {};\n\n    return (\n      <div class=\"input-wrapper\" part=\"wrapper\" style={wrapperStyle}>\n        <bh-label\n          label={this.showLabel ? this.label : ''}\n          required={this.required}\n          showHelpIcon={this.showHelpIcon}\n          helpIconTooltip={this.helpIconTooltip}\n          disabled={this.disabled}\n          onBhHelpClick={this.handleHelpClick}\n        >\n          <div\n            class={containerClasses}\n            onMouseEnter={this.handleMouseEnter}\n            onMouseLeave={this.handleMouseLeave}\n          >\n            <div class=\"input-content\">\n              {this.showLeadingIcon && (\n                <span class=\"material-symbols-outlined leading-icon\">\n                  {this.leadingIcon}\n                </span>\n              )}\n              <input\n                ref={(el) => (this.inputEl = el)}\n                type={this.type}\n                class=\"input-element\"\n                name={this.name}\n                value={this.value}\n                placeholder={this.placeholder}\n                disabled={this.disabled}\n                readOnly={this.readOnly}\n                required={this.required}\n                aria-label={this.label}\n                aria-describedby={\n                  this.showHintText && this.hintText ? 'hint-text' : undefined\n                }\n                aria-invalid={String(this.error)}\n                onInput={this.handleInput}\n                onFocus={this.handleFocus}\n                onBlur={this.handleBlur}\n                part=\"input\"\n              />\n              {this.showTrailingIcon && (\n                <span class=\"material-symbols-outlined trailing-icon\">\n                  {this.trailingIcon}\n                </span>\n              )}\n            </div>\n          </div>\n        </bh-label>\n\n        {this.showHintText && this.hintText && (\n          <div\n            class={{ 'hint-text': true, 'hint-error': this.error }}\n            id=\"hint-text\"\n          >\n            {this.hintText}\n          </div>\n        )}\n      </div>\n    );\n  }\n}\n"],"names":["syncFormValue","updateValidity","h"],"mappings":"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"}

package/cjs/bh-input-verification.cjs.entry.js

@@ -1,203 +0,0 @@
-'use strict';
-
-var index = require('./index-tZqSQc8E.js');
-
-const bhInputVerificationCss = ":host{display:block}.input-verification-wrapper{display:flex;flex-direction:column;gap:var(--spacing-sm);width:fit-content}.input-verification-container{display:flex;align-items:center;gap:var(--spacing-sm)}.verification-input{width:64px;height:64px;padding:0;border:1px solid var(--color-neutral-300);border-radius:var(--radius-lg);background-color:var(--color-white);font-family:var(--font-inter);font-size:3rem;font-weight:var(--weight-medium);line-height:1;color:var(--color-neutral-900);transition:all 150ms ease;outline:none;box-sizing:border-box}.verification-input.size-sm{width:64px;height:64px;font-size:3rem;border-radius:var(--radius-lg);padding:var(--spacing-xl) var(--spacing-md)}.verification-input.size-md{width:80px;height:80px;font-size:3rem;border-radius:var(--radius-lg);padding:var(--spacing-2xl) var(--spacing-3xl)}.verification-input.size-lg{width:96px;height:96px;font-size:3.75rem;border-radius:var(--radius-lg);padding:var(--spacing-3xl) var(--spacing-4xl)}.verification-input:hover:not(:disabled){border-color:var(--color-neutral-400)}.verification-input:focus{border-color:var(--color-brand-300);box-shadow:0 0 0 4px var(--color-brand-100)}.verification-input.error{border-color:var(--color-error-300)}.verification-input.error:focus{border-color:var(--color-error-300);box-shadow:0 0 0 4px var(--color-error-100)}.verification-input:disabled{background-color:var(--color-neutral-50);border-color:var(--color-neutral-300);color:var(--color-neutral-400);cursor:not-allowed}.separator{font-family:var(--font-inter);font-size:1.5rem;font-weight:var(--weight-medium);color:var(--color-neutral-400);margin:0 var(--spacing-xs);line-height:1}.separator.size-sm{font-size:1.5rem}.separator.size-md{font-size:1.5rem}.separator.size-lg{font-size:1.875rem}.hint-text{font-family:var(--font-inter);font-size:var(--text-sm-size);font-weight:var(--weight-regular);line-height:var(--text-sm-line);color:var(--color-neutral-600);margin-top:var(--spacing-xs)}.hint-text.error{color:var(--color-error-600)}.verification-input::placeholder{color:var(--color-neutral-400);opacity:1;font-size:inherit;font-weight:var(--weight-regular)}";
-
-const BhInputVerification = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.bhChange = index.createEvent(this, "bhChange");
-        this.bhComplete = index.createEvent(this, "bhComplete");
-    }
-    get el() { return index.getElement(this); }
-    /**
-     * Size variant of the input fields
-     */
-    size = 'md';
-    /**
-     * Number of digits (4 or 6)
-     */
-    digits = 4;
-    /**
-     * Label text for the input
-     */
-    label = 'Secure code';
-    /**
-     * Whether to show the label
-     */
-    showLabel = true;
-    /**
-     * Hint text displayed below the inputs
-     */
-    hintText = 'This is a hint text to help user.';
-    /**
-     * Whether to show the hint text
-     */
-    showHintText = true;
-    /**
-     * Whether the input is in an error state
-     */
-    error = false;
-    /**
-     * Whether the input is disabled
-     */
-    disabled = false;
-    /**
-     * Whether the field is required
-     */
-    required = false;
-    /**
-     * Whether to show the separator for 6-digit codes
-     */
-    showSeparator = true;
-    /**
-     * Placeholder character for empty inputs
-     */
-    placeholder = '';
-    /**
-     * Width of the component
-     */
-    width = '';
-    /**
-     * Current value of the verification code
-     */
-    value = '';
-    values = [];
-    inputRefs = [];
-    /**
-     * Event emitted when the value changes
-     */
-    bhChange;
-    /**
-     * Event emitted when all digits are filled
-     */
-    bhComplete;
-    watchValue(newValue) {
-        const newValues = newValue.split('').concat(Array(this.digits).fill('')).slice(0, this.digits);
-        this.values = newValues;
-    }
-    watchDigits() {
-        this.values = Array(this.digits).fill('');
-    }
-    componentWillLoad() {
-        this.values = this.value
-            ? this.value.split('').concat(Array(this.digits).fill('')).slice(0, this.digits)
-            : Array(this.digits).fill('');
-    }
-    componentDidLoad() {
-        // Focus first input on mount if not disabled
-        if (!this.disabled) {
-            const firstInput = this.el.shadowRoot?.querySelector('input');
-            firstInput?.focus();
-        }
-    }
-    updateValues(newValues) {
-        this.values = newValues;
-        const newValue = newValues.join('');
-        this.value = newValue;
-        this.bhChange.emit(newValue);
-        // Check if all fields are filled
-        if (newValues.every(val => val !== '')) {
-            this.bhComplete.emit(newValue);
-        }
-    }
-    handleInputChange(index, event) {
-        const input = event.target;
-        const inputValue = input.value;
-        // Only allow single digits
-        const digit = inputValue.replace(/\D/g, '').slice(-1);
-        const newValues = [...this.values];
-        newValues[index] = digit;
-        this.updateValues(newValues);
-        // Auto-advance to next input if digit entered
-        if (digit && index < this.digits - 1) {
-            const nextInput = this.el.shadowRoot?.querySelectorAll('input')[index + 1];
-            nextInput?.focus();
-        }
-    }
-    handleKeyDown(index, event) {
-        if (event.key === 'Backspace') {
-            event.preventDefault();
-            const newValues = [...this.values];
-            if (this.values[index]) {
-                // Clear current field
-                newValues[index] = '';
-                this.updateValues(newValues);
-            }
-            else if (index > 0) {
-                // Move to previous field and clear it
-                newValues[index - 1] = '';
-                this.updateValues(newValues);
-                const prevInput = this.el.shadowRoot?.querySelectorAll('input')[index - 1];
-                prevInput?.focus();
-            }
-        }
-        else if (event.key === 'ArrowLeft' && index > 0) {
-            event.preventDefault();
-            const prevInput = this.el.shadowRoot?.querySelectorAll('input')[index - 1];
-            prevInput?.focus();
-        }
-        else if (event.key === 'ArrowRight' && index < this.digits - 1) {
-            event.preventDefault();
-            const nextInput = this.el.shadowRoot?.querySelectorAll('input')[index + 1];
-            nextInput?.focus();
-        }
-        else if (event.key >= '0' && event.key <= '9') {
-            event.preventDefault();
-            const newValues = [...this.values];
-            newValues[index] = event.key;
-            this.updateValues(newValues);
-            // Auto-advance to next input
-            if (index < this.digits - 1) {
-                const nextInput = this.el.shadowRoot?.querySelectorAll('input')[index + 1];
-                nextInput?.focus();
-            }
-        }
-    }
-    handlePaste(event) {
-        event.preventDefault();
-        const pastedText = event.clipboardData?.getData('text') || '';
-        const pastedDigits = pastedText.replace(/\D/g, '').slice(0, this.digits);
-        if (pastedDigits) {
-            const newValues = pastedDigits.split('').concat(Array(this.digits).fill('')).slice(0, this.digits);
-            this.updateValues(newValues);
-            // Focus on the next empty input or last input
-            const nextEmptyIndex = newValues.findIndex(val => val === '');
-            const focusIndex = nextEmptyIndex === -1 ? this.digits - 1 : Math.min(nextEmptyIndex, this.digits - 1);
-            const inputToFocus = this.el.shadowRoot?.querySelectorAll('input')[focusIndex];
-            inputToFocus?.focus();
-        }
-    }
-    handleFocus(event) {
-        const input = event.target;
-        input.select();
-    }
-    renderInputs() {
-        const inputs = [];
-        for (let i = 0; i < this.digits; i++) {
-            // Add separator for 6-digit codes
-            if (this.digits === 6 && i === 3 && this.showSeparator) {
-                inputs.push(index.h("span", { key: "separator", class: { 'separator': true, [`size-${this.size}`]: true } }, "-"));
-            }
-            inputs.push(index.h("input", { key: i, type: "text", inputmode: "numeric", pattern: "[0-9]", maxLength: 1, value: this.values[i] || '', placeholder: this.placeholder && i < this.placeholder.length ? this.placeholder[i] : '', disabled: this.disabled, class: {
-                    'verification-input': true,
-                    [`size-${this.size}`]: true,
-                    'error': this.error,
-                }, onInput: (e) => this.handleInputChange(i, e), onKeyDown: (e) => this.handleKeyDown(i, e), onPaste: (e) => this.handlePaste(e), onFocus: (e) => this.handleFocus(e), "aria-label": `Digit ${i + 1} of ${this.digits}` }));
-        }
-        return inputs;
-    }
-    render() {
-        const wrapperStyle = this.width ? { width: this.width } : {};
-        return (index.h("div", { key: 'a7068d5407c0d09021313fc6103b5073ca74f628', class: "input-verification-wrapper", style: wrapperStyle }, index.h("bh-label", { key: '7b62a57a432f3d8f4df7befb87f27a09afeb51fd', label: this.showLabel ? this.label : '', required: this.required, disabled: this.disabled }, index.h("div", { key: '99cb7311f66b69731dc1d286bd96662c4035affb', class: "input-verification-container" }, this.renderInputs())), this.showHintText && this.hintText && (index.h("div", { key: '5fbfc4b1f8c3a251a0d879b2554c390126a391c1', class: { 'hint-text': true, 'error': this.error } }, this.hintText))));
-    }
-    static get watchers() { return {
-        "value": ["watchValue"],
-        "digits": ["watchDigits"]
-    }; }
-};
-BhInputVerification.style = bhInputVerificationCss;
-
-exports.bh_input_verification = BhInputVerification;
-//# sourceMappingURL=bh-input-verification.entry.cjs.js.map