@actabldesign/bellhop-core 0.0.3

package/collection/components/bh-textarea/bh-textarea.css

@@ -0,0 +1,115 @@
+/* ==========================================================================
+   BH-TEXTAREA COMPONENT STYLES
+   ========================================================================== */
+
+:host {
+  display: block;
+}
+
+.textarea-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-sm);
+  width: 100%;
+}
+
+/* Container */
+.textarea-container {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  background: var(--color-white);
+  border: 1px solid var(--color-neutral-300);
+  border-radius: 8px;
+  box-shadow: 0px 1px 2px rgba(64, 73, 104, 0.06);
+  transition: all 0.2s ease-in-out;
+  min-height: 128px;
+}
+
+.textarea-container:hover:not(.textarea-container-disabled):not(.textarea-container-focused) {
+  border-color: var(--color-brand-500);
+}
+
+.textarea-container-focused {
+  border-color: var(--color-brand-500);
+  box-shadow: 0 0 0 1px var(--color-brand-500);
+}
+
+.textarea-container-error {
+  border-color: var(--color-error-300);
+}
+
+.textarea-container-error:hover:not(.textarea-container-focused) {
+  border-color: var(--color-error-500);
+}
+
+.textarea-container-error.textarea-container-focused {
+  border-color: var(--color-brand-500);
+  box-shadow: 0 0 0 1px var(--color-brand-500);
+}
+
+.textarea-container-disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  background: var(--color-neutral-50);
+}
+
+/* Textarea Content */
+.textarea-content {
+  width: 100%;
+}
+
+/* Textarea */
+.textarea {
+  box-sizing: border-box;
+  padding: 12px 14px;
+  background: transparent;
+  border: none;
+  outline: none;
+  font-family: var(--font-inter);
+  font-weight: 400;
+  font-size: var(--text-sm-size);
+  line-height: 1.5;
+  color: var(--color-neutral-900);
+  width: 100%;
+  min-height: 96px;
+  resize: none;
+  caret-color: var(--color-brand-500);
+  flex: 1;
+  box-shadow: none;
+}
+
+.textarea:focus {
+  outline: none;
+  border: none;
+  box-shadow: none;
+}
+
+.textarea::placeholder {
+  color: var(--color-neutral-400);
+}
+
+.textarea:disabled {
+  cursor: not-allowed;
+  color: var(--color-neutral-400);
+}
+
+/* Hint Text */
+.hint-text {
+  font-family: var(--font-inter);
+  font-weight: 400;
+  font-size: var(--text-sm-size);
+  line-height: 1.43;
+  color: var(--color-neutral-600);
+}
+
+.hint-text.hint-error {
+  color: var(--color-error-600);
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+  .textarea {
+    font-size: 16px; /* Prevent zoom on iOS */
+  }
+}

package/collection/components/bh-textarea/bh-textarea.js

@@ -0,0 +1,569 @@
+import { h } from "@stencil/core";
+import { syncFormValue, updateValidity } from "../../utils/form";
+export class BhTextarea {
+    internals;
+    textareaEl;
+    /**
+     * The label for the textarea
+     */
+    label = 'Comment';
+    /**
+     * Placeholder text
+     */
+    placeholder = 'Write a message...';
+    /**
+     * Hint text shown below the textarea
+     */
+    hintText = '';
+    /**
+     * Whether to show the label
+     */
+    showLabel = true;
+    /**
+     * Whether to show hint text
+     */
+    showHintText = true;
+    /**
+     * Whether to show the help icon
+     */
+    showHelpIcon = false;
+    /**
+     * Whether the field has an error
+     */
+    error = false;
+    /**
+     * Whether the textarea is disabled
+     */
+    disabled = false;
+    /**
+     * Whether the field is required
+     */
+    required = false;
+    /**
+     * Tooltip text for the help icon
+     */
+    helpIconTooltip = 'Help';
+    /**
+     * The textarea value
+     */
+    value = '';
+    /**
+     * Name attribute for form submission
+     */
+    name = '';
+    /**
+     * Default value for form reset
+     */
+    defaultValue = '';
+    /**
+     * Custom validation message
+     */
+    validationMessage = '';
+    /**
+     * Number of visible rows
+     */
+    rows = 4;
+    /**
+     * Resize behavior
+     */
+    resize = 'none';
+    /**
+     * Maximum character length
+     */
+    maxLength;
+    /**
+     * Track focus state
+     */
+    isFocused = false;
+    /**
+     * Emitted when the value changes
+     */
+    bhInput;
+    /**
+     * Emitted when the textarea gains focus
+     */
+    bhFocus;
+    /**
+     * Emitted when the textarea loses focus
+     */
+    bhBlur;
+    /**
+     * Emitted when the help icon is clicked
+     */
+    bhHelpClick;
+    componentDidLoad() {
+        syncFormValue(this);
+        updateValidity(this.internals, this.textareaEl, this.validationMessage);
+    }
+    formResetCallback() {
+        this.value = this.defaultValue;
+        if (this.textareaEl) {
+            this.textareaEl.value = this.defaultValue;
+        }
+        syncFormValue(this);
+        updateValidity(this.internals, this.textareaEl);
+    }
+    handleInput = (event) => {
+        const target = event.target;
+        this.value = target.value;
+        this.bhInput.emit(this.value);
+        syncFormValue(this);
+        updateValidity(this.internals, this.textareaEl, this.validationMessage);
+    };
+    handleFocus = () => {
+        this.isFocused = true;
+        this.bhFocus.emit();
+    };
+    handleBlur = () => {
+        this.isFocused = false;
+        this.bhBlur.emit();
+    };
+    handleHelpClick = () => {
+        this.bhHelpClick.emit();
+    };
+    render() {
+        const containerClasses = {
+            'textarea-container': true,
+            'textarea-container-focused': this.isFocused,
+            'textarea-container-error': this.error,
+            'textarea-container-disabled': this.disabled,
+        };
+        const textareaClasses = {
+            'textarea': true,
+            'textarea-error': this.error,
+        };
+        return (h("div", { key: '26fc849122d7d1749963cf522cf29eb2551efef3', class: "textarea-wrapper", part: "wrapper" }, h("bh-label", { key: '32c9deddf4c40bf8ce2ff683289d4fff9c396f09', label: this.showLabel ? this.label : '', required: this.required, showHelpIcon: this.showHelpIcon, helpIconTooltip: this.helpIconTooltip, disabled: this.disabled, onBhHelpClick: this.handleHelpClick }, h("div", { key: 'eb8c890cd5ead8b49ac4932479e3aedd03d78701', class: containerClasses }, h("div", { key: 'c639ada3e32f70f807326c13120e294ca7e14c42', class: "textarea-content" }, h("textarea", { key: '9f9f6aa306d726bf1b13baf75dac1e5e9ef199d8', ref: (el) => (this.textareaEl = el), class: textareaClasses, name: this.name, value: this.value, placeholder: this.placeholder, disabled: this.disabled, required: this.required, rows: this.rows, maxLength: this.maxLength, style: { resize: this.resize }, "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: "textarea" })))), this.showHintText && this.hintText && (h("div", { key: '2b0288f4b0c3888ad4f9ca2870f6da14e6e39cdf', class: { 'hint-text': true, 'hint-error': this.error }, id: "hint-text" }, this.hintText))));
+    }
+    static get is() { return "bh-textarea"; }
+    static get encapsulation() { return "shadow"; }
+    static get formAssociated() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bh-textarea.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bh-textarea.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The label for the textarea"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label",
+                "defaultValue": "'Comment'"
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Placeholder text"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placeholder",
+                "defaultValue": "'Write a message...'"
+            },
+            "hintText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Hint text shown below the textarea"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "hint-text",
+                "defaultValue": "''"
+            },
+            "showLabel": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to show the label"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-label",
+                "defaultValue": "true"
+            },
+            "showHintText": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to show hint text"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-hint-text",
+                "defaultValue": "true"
+            },
+            "showHelpIcon": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to show the help icon"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-help-icon",
+                "defaultValue": "false"
+            },
+            "error": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the field has an error"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "error",
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the textarea is disabled"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the field is required"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "required",
+                "defaultValue": "false"
+            },
+            "helpIconTooltip": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Tooltip text for the help icon"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "help-icon-tooltip",
+                "defaultValue": "'Help'"
+            },
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The textarea value"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value",
+                "defaultValue": "''"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Name attribute for form submission"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name",
+                "defaultValue": "''"
+            },
+            "defaultValue": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Default value for form reset"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "default-value",
+                "defaultValue": "''"
+            },
+            "validationMessage": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Custom validation message"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "validation-message",
+                "defaultValue": "''"
+            },
+            "rows": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Number of visible rows"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "rows",
+                "defaultValue": "4"
+            },
+            "resize": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TextareaResize",
+                    "resolved": "\"both\" | \"horizontal\" | \"none\" | \"vertical\"",
+                    "references": {
+                        "TextareaResize": {
+                            "location": "local",
+                            "path": "/home/runner/work/bellhopos/bellhopos/packages/bellhop-core/src/components/bh-textarea/bh-textarea.tsx",
+                            "id": "src/components/bh-textarea/bh-textarea.tsx::TextareaResize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Resize behavior"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "resize",
+                "defaultValue": "'none'"
+            },
+            "maxLength": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Maximum character length"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max-length"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isFocused": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "bhInput",
+                "name": "bhInput",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the value changes"
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "bhFocus",
+                "name": "bhFocus",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the textarea gains focus"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "bhBlur",
+                "name": "bhBlur",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the textarea loses focus"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "bhHelpClick",
+                "name": "bhHelpClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the help icon is clicked"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get attachInternalsMemberName() { return "internals"; }
+}
+//# sourceMappingURL=bh-textarea.js.map