@actabldesign/bellhop-core 0.0.3 → 0.0.4

package/dist/cjs/bh-input-text_2.cjs.entry.js

@@ -0,0 +1,347 @@
+'use strict';
+
+var index = require('./index-BVJ_Kket.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: 'f518e4c3140c3407e3f0ec864ddbe5e923ec6fdb', class: "input-wrapper", part: "wrapper", style: wrapperStyle }, index.h("bh-label", { key: 'b5d5afff678974697a617fe4753e445a37957a53', label: this.showLabel ? this.label : '', required: this.required, showHelpIcon: this.showHelpIcon, helpIconTooltip: this.helpIconTooltip, disabled: this.disabled, onBhHelpClick: this.handleHelpClick }, index.h("div", { key: '4254972b8386826b614928c210399d6e113b3d43', class: containerClasses, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, index.h("div", { key: '7ed52780a55645b81eef2334914903045c3680cc', class: "input-content" }, this.showLeadingIcon && (index.h("span", { key: '6e870c8c4677d9d9f900298e8205f072f9024348', class: "material-symbols-outlined leading-icon" }, this.leadingIcon)), index.h("input", { key: '23579144195274ac413d24a5811d44e3ce072047', 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: '840dad44c2f5bc9060e5a09ff86e9aebfdb8d950', class: "material-symbols-outlined trailing-icon" }, this.trailingIcon))))), this.showHintText && this.hintText && (index.h("div", { key: '69dfc89a179b2672c0776e0bb75ceb957b9cb1e0', class: { 'hint-text': true, 'hint-error': this.error }, id: "hint-text" }, this.hintText))));
+    }
+    static get formAssociated() { return true; }
+};
+BhInputText.style = bhInputTextCss;
+
+const bhPickerMenuCss = "@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=swap'); :root{--color-white:hsl(0, 0%, 100%);--color-black:hsl(0, 0%, 0%);--color-transparent:hsla(0, 0%, 100%, 0);--color-neutral-25:hsl(240, 20%, 99%);--color-neutral-50:hsl(240, 20%, 98%);--color-neutral-100:hsl(240, 17%, 95%);--color-neutral-200:hsl(227, 25%, 89%);--color-neutral-300:hsl(224, 24%, 78%);--color-neutral-400:hsl(226, 24%, 59%);--color-neutral-500:hsl(226, 24%, 48%);--color-neutral-600:hsl(226, 24%, 38%);--color-neutral-700:hsl(226, 24%, 25%);--color-neutral-800:hsl(233, 33%, 10%);--color-neutral-900:hsl(231, 32%, 8%);--color-neutral-950:hsl(231, 32%, 8%);--color-brand-25:hsl(220, 82%, 98%);--color-brand-50:hsl(222, 87%, 97%);--color-brand-100:hsl(221, 94%, 94%);--color-brand-200:hsl(221, 92%, 86%);--color-brand-300:hsl(224, 95%, 77%);--color-brand-400:hsl(224, 94%, 72%);--color-brand-500:hsl(230, 67%, 58%);--color-brand-600:hsl(230, 69%, 48%);--color-brand-700:hsl(230, 75%, 34%);--color-brand-800:hsl(243, 86%, 44%);--color-brand-900:hsl(237, 69%, 24%);--color-brand-950:hsl(237, 61%, 20%);--color-error-25:hsl(12, 100%, 99%);--color-error-50:hsl(5, 86%, 97%);--color-error-100:hsl(4, 93%, 94%);--color-error-200:hsl(3, 96%, 89%);--color-error-300:hsl(4, 96%, 80%);--color-error-400:hsl(4, 92%, 69%);--color-error-500:hsl(4, 86%, 58%);--color-error-600:hsl(4, 74%, 49%);--color-error-700:hsl(4, 76%, 40%);--color-error-800:hsl(4, 72%, 33%);--color-error-900:hsl(8, 65%, 29%);--color-error-950:hsl(8, 75%, 19%);--color-warning-25:hsl(42, 100%, 98%);--color-warning-50:hsl(45, 100%, 96%);--color-warning-100:hsl(45, 96%, 89%);--color-warning-200:hsl(44, 98%, 77%);--color-warning-300:hsl(42, 99%, 65%);--color-warning-400:hsl(39, 98%, 56%);--color-warning-500:hsl(34, 94%, 50%);--color-warning-600:hsl(28, 97%, 44%);--color-warning-700:hsl(22, 92%, 37%);--color-warning-800:hsl(19, 84%, 31%);--color-warning-900:hsl(18, 79%, 27%);--color-warning-950:hsl(17, 79%, 17%);--color-success-25:hsl(142, 80%, 98%);--color-success-50:hsl(145, 81%, 96%);--color-success-100:hsl(140, 80%, 90%);--color-success-200:hsl(144, 78%, 80%);--color-success-300:hsl(148, 63%, 67%);--color-success-400:hsl(150, 57%, 54%);--color-success-500:hsl(152, 77%, 39%);--color-success-600:hsl(153, 91%, 30%);--color-success-700:hsl(155, 90%, 24%);--color-success-800:hsl(155, 84%, 20%);--color-success-900:hsl(156, 83%, 16%);--color-success-950:hsl(157, 82%, 11%);--font-inter:'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI',\n    Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,\n    'Liberation Mono', 'Courier New', monospace;--weight-regular:400;--weight-medium:500;--weight-semibold:600;--weight-bold:700;--text-xl-size:1.25rem;--text-lg-size:1.125rem;--text-md-size:1rem;--text-sm-size:0.875rem;--text-xs-size:0.75rem;--text-xl-line:1.875rem;--text-lg-line:1.75rem;--text-md-line:1.5rem;--text-sm-line:1.25rem;--text-xs-line:1.125rem;--spacing-none:0rem;--spacing-xxs:0.125rem;--spacing-xs:0.25rem;--spacing-sm:0.375rem;--spacing-md:0.5rem;--spacing-lg:0.75rem;--spacing-xl:1rem;--spacing-2xl:1.25rem;--spacing-3xl:1.5rem;--spacing-4xl:2rem;--spacing-5xl:2.5rem;--spacing-6xl:3rem;--radius-none:0rem;--radius-xxs:0.125rem;--radius-xs:0.25rem;--radius-sm:0.375rem;--radius-md:0.5rem;--radius-lg:0.625rem;--radius-xl:0.75rem;--radius-2xl:1rem;--radius-3xl:1.25rem;--radius-4xl:1.5rem;--radius-full:9999px;--shadow-xs:0px 1px 2px rgba(16, 24, 40, 0.05);--shadow-sm:0px 1px 3px rgba(16, 24, 40, 0.1),\n    0px 1px 2px rgba(16, 24, 40, 0.06);--shadow-md:0px 4px 8px -2px rgba(16, 24, 40, 0.1),\n    0px 2px 4px -2px rgba(16, 24, 40, 0.06);--shadow-lg:0px 12px 16px -4px rgba(16, 24, 40, 0.08),\n    0px 4px 6px -2px rgba(16, 24, 40, 0.03);--shadow-xl:0px 20px 24px -4px rgba(16, 24, 40, 0.08),\n    0px 8px 8px -4px rgba(16, 24, 40, 0.03);--icon-compensation-xs-btn:calc(var(--spacing-lg) - var(--spacing-xs));--icon-compensation-sm-btn:calc(var(--spacing-xl) - var(--spacing-xs));--icon-compensation-md-btn:calc(var(--spacing-xl) - var(--spacing-xs));--icon-compensation-lg-btn:calc(var(--spacing-xl) - var(--spacing-xs))}*,*::before,*::after{box-sizing:border-box}.material-symbols-outlined{font-family:'Material Symbols Outlined';font-weight:normal;font-style:normal;font-size:24px;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-feature-settings:'liga';-webkit-font-smoothing:antialiased}:host{display:block}.picker-menu{width:fit-content;min-width:320px;background:var(--color-white);border-radius:var(--radius-md);box-shadow:0px 32px 64px -12px rgba(64, 73, 104, 0.14),\n    0px 0px 1px 1px rgba(64, 73, 104, 0.1);border:1px solid var(--color-neutral-200);overflow:hidden;flex-shrink:0;position:relative;box-sizing:border-box}.picker-menu.animate-dropdown-enter{animation:dropdownEnter 0.15s ease-out forwards}.picker-menu.animate-dropdown-exit{animation:dropdownExit 0.15s ease-out forwards}@keyframes dropdownEnter{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}@keyframes dropdownExit{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-8px)}}.picker-menu.no-footer{padding-bottom:var(--spacing-md)}.picker-menu-footer{border-top:1px solid var(--color-neutral-200);padding:var(--spacing-xl) var(--spacing-xl);background:var(--color-white)}.picker-menu-actions{display:flex;justify-content:flex-end;align-items:center;gap:var(--spacing-lg)}.picker-menu-actions.has-today-button{justify-content:space-between}.picker-menu-main-actions{display:flex;gap:var(--spacing-lg)}";
+
+const BhPickerMenu = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.bhChange = index.createEvent(this, "bhChange");
+        this.bhMonthYearSelect = index.createEvent(this, "bhMonthYearSelect");
+        this.bhCancel = index.createEvent(this, "bhCancel");
+        this.bhApply = index.createEvent(this, "bhApply");
+        this.bhToday = index.createEvent(this, "bhToday");
+    }
+    /**
+     * Minimum year in the picker
+     */
+    minYear = 1998;
+    /**
+     * Maximum year in the picker
+     */
+    maxYear = 2060;
+    /**
+     * Whether the picker is disabled
+     */
+    disabled = false;
+    /**
+     * Array of disabled months
+     */
+    disabledMonths = [];
+    /**
+     * Animation class for the menu
+     */
+    animationClass = 'animate-dropdown-enter';
+    /**
+     * Whether the menu is visible
+     */
+    visible = true;
+    /**
+     * Whether to show the footer with action buttons
+     */
+    showFooter = true;
+    /**
+     * Whether to show the today button
+     */
+    showTodayButton = false;
+    /**
+     * Whether the apply button is disabled
+     */
+    disableApply = false;
+    /**
+     * Current value
+     */
+    value;
+    isClosing = false;
+    shouldRender = true;
+    selectedMonth = null;
+    selectedYear = null;
+    /**
+     * Event emitted when value changes
+     */
+    bhChange;
+    /**
+     * Event emitted when a month/year is selected
+     */
+    bhMonthYearSelect;
+    /**
+     * Event emitted when cancel is clicked
+     */
+    bhCancel;
+    /**
+     * Event emitted when apply is clicked
+     */
+    bhApply;
+    /**
+     * Event emitted when today button is clicked
+     */
+    bhToday;
+    handleVisibleChange(newValue) {
+        if (newValue) {
+            this.shouldRender = true;
+            this.isClosing = false;
+        }
+        else {
+            this.isClosing = true;
+            setTimeout(() => {
+                this.shouldRender = false;
+                this.isClosing = false;
+            }, 150);
+        }
+    }
+    handleValueChange(newValue) {
+        if (newValue) {
+            this.selectedMonth = newValue.month;
+            this.selectedYear = newValue.year;
+        }
+    }
+    componentWillLoad() {
+        this.shouldRender = this.visible;
+        if (this.value) {
+            this.selectedMonth = this.value.month;
+            this.selectedYear = this.value.year;
+        }
+        else {
+            // Initialize with current date
+            const now = new Date();
+            const currentMonth = now.getMonth();
+            const currentYear = now.getFullYear();
+            if (currentYear >= this.minYear && currentYear <= this.maxYear) {
+                this.selectedMonth = currentMonth;
+                this.selectedYear = currentYear;
+            }
+            else if (currentYear < this.minYear) {
+                this.selectedYear = this.minYear;
+                this.selectedMonth = currentMonth;
+            }
+            else {
+                this.selectedYear = this.maxYear;
+                this.selectedMonth = currentMonth;
+            }
+        }
+    }
+    handleMonthYearSelect = (event) => {
+        const selection = event.detail;
+        this.selectedMonth = selection.month;
+        this.selectedYear = selection.year;
+        this.bhChange.emit(selection);
+        this.bhMonthYearSelect.emit(selection);
+    };
+    handleCancel = () => {
+        this.bhCancel.emit();
+    };
+    handleApply = () => {
+        this.bhApply.emit();
+    };
+    handleToday = () => {
+        this.bhToday.emit();
+    };
+    render() {
+        if (!this.shouldRender) {
+            return null;
+        }
+        const menuClasses = {
+            'picker-menu': true,
+            'animate-dropdown-exit': this.isClosing,
+            [this.animationClass]: !this.isClosing,
+            'no-footer': !this.showFooter,
+        };
+        return (index.h(index.Host, null, index.h("div", { class: menuClasses }, index.h("slot", null, index.h("bh-month-picker-content", { minYear: this.minYear, maxYear: this.maxYear, disabled: this.disabled, disabledMonths: this.disabledMonths, scrollable: true, selectedMonth: this.selectedMonth ?? undefined, selectedYear: this.selectedYear ?? undefined, onBhChange: this.handleMonthYearSelect })), this.showFooter && (index.h("div", { class: "picker-menu-footer" }, index.h("div", { class: `picker-menu-actions ${this.showTodayButton ? 'has-today-button' : ''}` }, this.showTodayButton && (index.h("bh-button", { hierarchy: "secondary", size: "sm", icon: "only", iconName: "today", onBhClick: this.handleToday })), index.h("div", { class: "picker-menu-main-actions" }, index.h("bh-button", { hierarchy: "secondary", size: "sm", label: "Cancel", onBhClick: this.handleCancel }), index.h("bh-button", { hierarchy: "primary", size: "sm", label: "Apply", disabled: this.disableApply, onBhClick: this.handleApply }))))))));
+    }
+    static get watchers() { return {
+        "visible": ["handleVisibleChange"],
+        "value": ["handleValueChange"]
+    }; }
+};
+BhPickerMenu.style = bhPickerMenuCss;
+
+exports.bh_input_text = BhInputText;
+exports.bh_picker_menu = BhPickerMenu;
+//# sourceMappingURL=bh-input-text.bh-picker-menu.entry.cjs.js.map

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

@@ -0,0 +1,203 @@
+'use strict';
+
+var index = require('./index-BVJ_Kket.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: '7690b5bc54608825372174583aee015632f1f30f', class: "input-verification-wrapper", style: wrapperStyle }, index.h("bh-label", { key: '8cde1454d3162ae8750abfbb222b51301a40bbcc', label: this.showLabel ? this.label : '', required: this.required, disabled: this.disabled }, index.h("div", { key: 'f6692a5af965eb6bf96a58b1144405e78a63b618', class: "input-verification-container" }, this.renderInputs())), this.showHintText && this.hintText && (index.h("div", { key: '37a9dfb6a9f441e40fdd336a677cbce8ee1ce877', 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

package/dist/cjs/bh-label-DRC8k-B9.js

@@ -0,0 +1,110 @@
+'use strict';
+
+var index = require('./index-BVJ_Kket.js');
+
+const bhLabelCss = ":host{display:block;font-family:var(--font-inter, 'Inter', sans-serif)}.label-container{display:flex;flex-direction:column;gap:var(--spacing-xs, 6px)}.label-container.layout-block{flex-direction:column}.label-container.layout-inline{flex-direction:row;align-items:flex-start;gap:var(--spacing-sm, 8px)}.label-container.layout-inline .label-wrapper{flex-shrink:0}.label-container.layout-inline-start{flex-direction:row;align-items:flex-start;gap:var(--spacing-sm, 8px)}.label-container.layout-inline-start .label-content{flex-shrink:0;width:auto}.label-container.layout-inline-start .label-text-group{display:flex;flex-direction:column;gap:2px}.label-container.layout-inline-start .label-wrapper{gap:var(--spacing-xxs, 4px)}.label-container.layout-inline-start .label-text{font-size:var(--text-md-size, 16px);color:var(--color-neutral-900, #101828);cursor:pointer}.label-container.layout-inline-start .supporting-text{font-size:var(--text-sm-size, 14px);color:var(--color-neutral-500, #667085)}.label-container.layout-inline-space-between{flex-direction:row;align-items:flex-start;justify-content:space-between;gap:var(--spacing-sm, 8px)}.label-container.layout-inline-space-between .label-wrapper{flex-shrink:0}.label-container.layout-inline-space-between .label-content{flex-grow:1;display:flex;justify-content:flex-end}.label-wrapper{display:flex;align-items:center;gap:var(--spacing-xxs, 4px)}.label-text{font-family:inherit;font-weight:500;font-size:var(--text-sm-size, 14px);line-height:1.43;color:var(--color-neutral-700, #344054);margin:0;cursor:default}.label-text.disabled{color:var(--color-neutral-400, #98a2b3)}.asterisk{font-family:inherit;font-weight:400;font-size:var(--text-sm-size, 14px);line-height:1.43;color:var(--color-error-600, #dc2626)}.supporting-text{font-family:inherit;font-weight:400;font-size:var(--text-sm-size, 14px);line-height:1.43;color:var(--color-neutral-500, #667085);margin:0}.supporting-text.disabled{color:var(--color-neutral-400, #98a2b3)}.label-content{width:100%}.icon-with-tooltip{position:relative;display:flex;align-items:center;flex-shrink:0;margin-left:auto}.help-icon{font-size:var(--text-xl-size, 20px);color:var(--color-neutral-400, #98a2b3);cursor:pointer;user-select:none;transition:color 0.2s ease-in-out}.help-icon:hover{color:var(--color-neutral-500, #667085)}.disabled .help-icon{color:var(--color-neutral-300, #d0d5dd);cursor:not-allowed}";
+
+const BhLabel = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.bhHelpClick = index.createEvent(this, "bhHelpClick");
+    }
+    get el() { return index.getElement(this); }
+    tooltipTimerRef;
+    /**
+     * The label text to display
+     */
+    label = '';
+    /**
+     * Layout style for the label container
+     * - block: Label above content (default for form fields)
+     * - inline: Label next to content (label first)
+     * - inline-start: Content next to label (content first, for checkboxes/radios)
+     * - inline-space-between: Label and content on opposite ends
+     */
+    layout = 'block';
+    /**
+     * The id of the form element the label is bound to.
+     * Use when the labeled element is not a child of this component.
+     */
+    for = '';
+    /**
+     * Supporting text displayed below the label (second line)
+     * for instructions or additional description
+     */
+    supportingText = '';
+    /**
+     * Whether to show the required asterisk
+     */
+    required = false;
+    /**
+     * Whether to show the help icon
+     */
+    showHelpIcon = false;
+    /**
+     * Tooltip text for the help icon
+     */
+    helpIconTooltip = 'Help';
+    /**
+     * Whether the label is disabled
+     */
+    disabled = false;
+    showHelpTooltip = false;
+    /**
+     * Emitted when the help icon is clicked
+     */
+    bhHelpClick;
+    disconnectedCallback() {
+        if (this.tooltipTimerRef) {
+            clearTimeout(this.tooltipTimerRef);
+        }
+    }
+    handleHelpIconMouseEnter = () => {
+        if (this.tooltipTimerRef) {
+            clearTimeout(this.tooltipTimerRef);
+        }
+        this.tooltipTimerRef = setTimeout(() => {
+            this.showHelpTooltip = true;
+        }, 300);
+    };
+    handleHelpIconMouseLeave = () => {
+        if (this.tooltipTimerRef) {
+            clearTimeout(this.tooltipTimerRef);
+            this.tooltipTimerRef = undefined;
+        }
+        this.showHelpTooltip = false;
+    };
+    handleHelpIconClick = () => {
+        this.bhHelpClick.emit();
+    };
+    render() {
+        const wrapperClasses = {
+            'label-container': true,
+            [`layout-${this.layout}`]: true,
+            'disabled': this.disabled,
+        };
+        const labelClasses = {
+            'label-text': true,
+            'disabled': this.disabled,
+        };
+        const supportingClasses = {
+            'supporting-text': true,
+            'disabled': this.disabled,
+        };
+        const labelWrapper = (index.h("div", { class: "label-wrapper" }, this.label && (index.h("label", { class: labelClasses, htmlFor: this.for || undefined }, this.label)), this.required && index.h("span", { class: "asterisk" }, "*"), this.showHelpIcon && (index.h("div", { class: "icon-with-tooltip" }, index.h("span", { class: "help-icon material-symbols-outlined", onClick: this.handleHelpIconClick, onMouseEnter: this.handleHelpIconMouseEnter, onMouseLeave: this.handleHelpIconMouseLeave }, "help"), index.h("bh-tooltip", { text: this.helpIconTooltip, position: "top", visible: this.showHelpTooltip })))));
+        const supportingTextEl = this.supportingText && (index.h("p", { class: supportingClasses }, this.supportingText));
+        const contentSlot = (index.h("div", { class: "label-content" }, index.h("slot", null)));
+        // For inline-start layout, content comes first (used for checkbox/radio)
+        if (this.layout === 'inline-start') {
+            return (index.h("div", { class: wrapperClasses }, contentSlot, index.h("div", { class: "label-text-group" }, labelWrapper, supportingTextEl)));
+        }
+        // Default layout: label wrapper first, then content
+        return (index.h("div", { class: wrapperClasses }, labelWrapper, supportingTextEl, contentSlot));
+    }
+};
+BhLabel.style = bhLabelCss;
+
+exports.BhLabel = BhLabel;
+//# sourceMappingURL=bh-label-DRC8k-B9.js.map
+
+//# sourceMappingURL=bh-label-DRC8k-B9.js.map