@actabldesign/bellhop-core 0.0.3

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

@@ -0,0 +1 @@
+{"version":3,"file":"bh-textarea.js","sourceRoot":"","sources":["../../../src/components/bh-textarea/bh-textarea.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, State, Event, EventEmitter, h, AttachInternals } from '@stencil/core';\nimport { syncFormValue, updateValidity } from '../../utils/form';\n\nexport type TextareaResize = 'none' | 'both' | 'horizontal' | 'vertical';\n\n@Component({\n  tag: 'bh-textarea',\n  styleUrl: 'bh-textarea.css',\n  shadow: true,\n  formAssociated: true,\n})\nexport class BhTextarea {\n  @AttachInternals() internals!: ElementInternals;\n\n  private textareaEl?: HTMLTextAreaElement;\n  /**\n   * The label for the textarea\n   */\n  @Prop() label: string = 'Comment';\n\n  /**\n   * Placeholder text\n   */\n  @Prop() placeholder: string = 'Write a message...';\n\n  /**\n   * Hint text shown below the textarea\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 the field has an error\n   */\n  @Prop() error: boolean = false;\n\n  /**\n   * Whether the textarea 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   * The textarea 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   * Number of visible rows\n   */\n  @Prop() rows: number = 4;\n\n  /**\n   * Resize behavior\n   */\n  @Prop() resize: TextareaResize = 'none';\n\n  /**\n   * Maximum character length\n   */\n  @Prop() maxLength?: number;\n\n  /**\n   * Track focus state\n   */\n  @State() isFocused: boolean = false;\n\n  /**\n   * Emitted when the value changes\n   */\n  @Event() bhInput!: EventEmitter<string>;\n\n  /**\n   * Emitted when the textarea gains focus\n   */\n  @Event() bhFocus!: EventEmitter<void>;\n\n  /**\n   * Emitted when the textarea 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  componentDidLoad() {\n    syncFormValue(this);\n    updateValidity(this.internals, this.textareaEl, this.validationMessage);\n  }\n\n  formResetCallback() {\n    this.value = this.defaultValue;\n    if (this.textareaEl) {\n      this.textareaEl.value = this.defaultValue;\n    }\n    syncFormValue(this);\n    updateValidity(this.internals, this.textareaEl);\n  }\n\n  private handleInput = (event: Event): void => {\n    const target = event.target as HTMLTextAreaElement;\n    this.value = target.value;\n    this.bhInput.emit(this.value);\n    syncFormValue(this);\n    updateValidity(this.internals, this.textareaEl, this.validationMessage);\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 handleHelpClick = (): void => {\n    this.bhHelpClick.emit();\n  };\n\n  render() {\n    const containerClasses = {\n      'textarea-container': true,\n      'textarea-container-focused': this.isFocused,\n      'textarea-container-error': this.error,\n      'textarea-container-disabled': this.disabled,\n    };\n\n    const textareaClasses = {\n      'textarea': true,\n      'textarea-error': this.error,\n    };\n\n    return (\n      <div class=\"textarea-wrapper\" part=\"wrapper\">\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 class={containerClasses}>\n            <div class=\"textarea-content\">\n              <textarea\n                ref={(el) => (this.textareaEl = el)}\n                class={textareaClasses}\n                name={this.name}\n                value={this.value}\n                placeholder={this.placeholder}\n                disabled={this.disabled}\n                required={this.required}\n                rows={this.rows}\n                maxLength={this.maxLength}\n                style={{ resize: this.resize }}\n                aria-label={this.label}\n                aria-describedby={this.showHintText && this.hintText ? 'hint-text' : undefined}\n                aria-invalid={String(this.error)}\n                onInput={this.handleInput}\n                onFocus={this.handleFocus}\n                onBlur={this.handleBlur}\n                part=\"textarea\"\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"]}

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

@@ -0,0 +1,290 @@
+/* ==========================================================================
+   BH-TOGGLE COMPONENT STYLES - Material You Design
+   ========================================================================== */
+
+:host {
+  display: inline-block;
+}
+
+/* Toggle Wrapper */
+.toggle-wrapper {
+  display: flex;
+  align-items: center;
+  gap: 0;
+}
+
+.toggle-with-text.toggle-size-sm {
+  gap: var(--spacing-md);
+}
+
+.toggle-with-text.toggle-size-md {
+  gap: var(--spacing-lg);
+}
+
+/* Toggle Switch Base */
+.toggle-switch {
+  position: relative;
+  display: inline-block;
+  border-radius: var(--radius-full);
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+  outline: none;
+  border: 1px solid transparent;
+  background: transparent;
+  overflow: visible;
+  padding: 0;
+}
+
+.toggle-switch:focus {
+  outline: none;
+}
+
+.toggle-switch.toggle-disabled {
+  cursor: not-allowed;
+  opacity: 0.38;
+}
+
+/* Toggle Switch Sizes */
+.toggle-switch.toggle-sm {
+  width: 36px;
+  height: 20px;
+}
+
+.toggle-switch.toggle-md {
+  width: 40px;
+  height: 24px;
+}
+
+/* Toggle Switch States - Unpressed (False) */
+.toggle-switch.toggle-unpressed {
+  background-color: var(--color-neutral-300);
+  border-color: transparent;
+}
+
+.toggle-switch.toggle-unpressed.toggle-hover {
+  background-color: var(--color-neutral-400);
+  border-color: transparent;
+}
+
+.toggle-switch.toggle-unpressed.toggle-focus {
+  background-color: var(--color-neutral-200);
+  border-color: transparent;
+}
+
+/* Focus ring for unpressed state */
+.toggle-switch.toggle-unpressed.toggle-focus .toggle-button::after {
+  content: '';
+  position: absolute;
+  top: -6px;
+  left: -6px;
+  right: -6px;
+  bottom: -6px;
+  border-radius: var(--radius-full);
+  background: var(--color-neutral-600);
+  opacity: 0.12;
+  pointer-events: none;
+}
+
+.toggle-switch.toggle-unpressed.toggle-disabled {
+  background-color: var(--color-neutral-100);
+  border-color: transparent;
+}
+
+/* Toggle Switch States - Pressed (True) */
+.toggle-switch.toggle-pressed {
+  background-color: var(--color-brand-600);
+  border-color: var(--color-brand-600);
+}
+
+.toggle-switch.toggle-pressed.toggle-hover {
+  background-color: var(--color-brand-700);
+  border-color: var(--color-brand-700);
+}
+
+.toggle-switch.toggle-pressed.toggle-focus {
+  background-color: var(--color-brand-600);
+  border-color: var(--color-brand-600);
+}
+
+/* Focus ring for pressed state */
+.toggle-switch.toggle-pressed.toggle-focus .toggle-button::after {
+  content: '';
+  position: absolute;
+  top: -6px;
+  left: -6px;
+  right: -6px;
+  bottom: -6px;
+  border-radius: var(--radius-full);
+  background: var(--color-brand-100);
+  opacity: 0.24;
+  pointer-events: none;
+}
+
+.toggle-switch.toggle-pressed.toggle-disabled {
+  background-color: var(--color-neutral-200);
+  border-color: var(--color-neutral-200);
+}
+
+.toggle-switch.toggle-pressed.toggle-disabled .toggle-button {
+  background-color: var(--color-neutral-100);
+}
+
+/* Toggle Button (Handle) */
+.toggle-button {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  border-radius: var(--radius-full);
+  background-color: var(--color-neutral-600);
+  transition: all 0.2s ease;
+}
+
+/* Toggle Button States - Unpressed */
+.toggle-switch.toggle-unpressed .toggle-button {
+  background-color: var(--color-white);
+}
+
+.toggle-switch.toggle-sm.toggle-unpressed .toggle-button {
+  width: 16px;
+  height: 16px;
+  left: 1px;
+}
+
+.toggle-switch.toggle-md.toggle-unpressed .toggle-button {
+  width: 20px;
+  height: 20px;
+  left: 1px;
+}
+
+.toggle-switch.toggle-unpressed.toggle-hover .toggle-button {
+  background-color: var(--color-white);
+  box-shadow: var(--shadow-sm);
+}
+
+/* Toggle Button States - Pressed */
+.toggle-switch.toggle-pressed .toggle-button {
+  background-color: var(--color-white);
+}
+
+.toggle-switch.toggle-sm.toggle-pressed .toggle-button {
+  width: 16px;
+  height: 16px;
+  left: calc(100% - 17px);
+}
+
+.toggle-switch.toggle-md.toggle-pressed .toggle-button {
+  width: 20px;
+  height: 20px; 
+  left: calc(100% - 21px);
+}
+
+.toggle-switch.toggle-pressed.toggle-hover .toggle-button {
+  background-color: var(--color-white);
+}
+
+/* Toggle Button Disabled State */
+.toggle-switch.toggle-disabled .toggle-button {
+  background-color: var(--color-neutral-400);
+  box-shadow: none;
+}
+
+.toggle-switch.toggle-sm.toggle-unpressed.toggle-disabled .toggle-button {
+  width: 16px;
+  height: 16px;
+  left: 2px;
+  background-color: var(--color-neutral-400);
+}
+
+.toggle-switch.toggle-md.toggle-unpressed.toggle-disabled .toggle-button {
+  width: 16px;
+  height: 16px;
+  left: 4px;
+  background-color: var(--color-neutral-400);
+}
+
+.toggle-switch.toggle-sm.toggle-pressed.toggle-disabled .toggle-button {
+  width: 16px;
+  height: 16px;
+  left: calc(100% - 17px);
+  background-color: var(--color-neutral-400);
+}
+
+.toggle-switch.toggle-md.toggle-pressed.toggle-disabled .toggle-button {
+  width: 20px;
+  height: 20px;
+  left: calc(100% - 21px);
+  background-color: var(--color-white);
+}
+
+/* Toggle Text Container */
+.toggle-text {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+}
+
+/* Toggle Label */
+.toggle-label {
+  color: var(--color-neutral-700);
+  font-family: var(--font-inter);
+  font-weight: var(--weight-medium);
+  text-align: left;
+  margin: 0;
+  line-height: 1.5;
+}
+
+.toggle-label.toggle-label-sm {
+  font-size: var(--text-sm-size);
+  line-height: var(--text-sm-line);
+}
+
+.toggle-label.toggle-label-md {
+  font-size: var(--text-md-size);
+  line-height: var(--text-md-line);
+}
+
+/* Toggle Supporting Text */
+.toggle-supporting-text {
+  color: var(--color-neutral-600);
+  font-family: var(--font-inter);
+  font-weight: var(--weight-regular);
+  font-size: var(--text-sm-size);
+  line-height: var(--text-sm-line);
+  text-align: left;
+  margin: 0;
+  margin-top: var(--spacing-xxs);
+}
+
+/* ==========================================================================
+   ACCESSIBILITY
+   ========================================================================== */
+
+@media (prefers-reduced-motion: reduce) {
+  .toggle-switch,
+  .toggle-button {
+    transition: none;
+  }
+}
+
+@media (prefers-contrast: high) {
+  .toggle-switch.toggle-unpressed {
+    border: 2px solid currentColor;
+  }
+
+  .toggle-switch.toggle-pressed {
+    border: 2px solid currentColor;
+  }
+}
+
+.toggle-switch:focus-visible .toggle-button::after {
+  content: '';
+  position: absolute;
+  top: -6px;
+  left: -6px;
+  right: -6px;
+  bottom: -6px;
+  border-radius: var(--radius-full);
+  background: currentColor;
+  opacity: 0.24;
+  pointer-events: none;
+}

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

@@ -0,0 +1,369 @@
+import { h } from "@stencil/core";
+import { syncCheckableFormValue, validateRequired } from "../../utils/form";
+export class BhToggle {
+    internals;
+    /**
+     * The size of the toggle
+     */
+    size = 'md';
+    /**
+     * Whether to show the label and supporting text
+     */
+    showText = false;
+    /**
+     * The label text
+     */
+    label = '';
+    /**
+     * Supporting text below the label
+     */
+    supportingText = '';
+    /**
+     * Whether the toggle is disabled
+     */
+    disabled = false;
+    /**
+     * Whether the toggle is checked (controlled mode)
+     */
+    checked = false;
+    /**
+     * Name attribute for form submission
+     */
+    name = '';
+    /**
+     * Value when checked (default: 'on')
+     */
+    value = 'on';
+    /**
+     * Whether the toggle is required
+     */
+    required = false;
+    /**
+     * Default checked state for form reset
+     */
+    defaultChecked = false;
+    /**
+     * Internal focus state
+     */
+    isFocused = false;
+    /**
+     * Internal hover state
+     */
+    isHovered = false;
+    /**
+     * Emitted when the toggle state changes
+     */
+    bhChange;
+    componentDidLoad() {
+        syncCheckableFormValue(this.internals, this.name, this.checked, this.value);
+        validateRequired(this.internals, this.required, this.checked);
+    }
+    formResetCallback() {
+        this.checked = this.defaultChecked;
+        syncCheckableFormValue(this.internals, this.name, this.checked, this.value);
+        validateRequired(this.internals, this.required, this.checked);
+    }
+    handleToggle = () => {
+        if (this.disabled)
+            return;
+        this.checked = !this.checked;
+        syncCheckableFormValue(this.internals, this.name, this.checked, this.value);
+        validateRequired(this.internals, this.required, this.checked);
+        this.bhChange.emit(this.checked);
+    };
+    handleKeyDown = (event) => {
+        if (event.key === ' ' || event.key === 'Enter') {
+            event.preventDefault();
+            this.handleToggle();
+        }
+    };
+    handleMouseEnter = () => {
+        this.isHovered = true;
+    };
+    handleMouseLeave = () => {
+        this.isHovered = false;
+    };
+    handleFocus = () => {
+        this.isFocused = true;
+    };
+    handleBlur = () => {
+        this.isFocused = false;
+    };
+    render() {
+        const wrapperClasses = {
+            'toggle-wrapper': true,
+            'toggle-with-text': this.showText,
+            [`toggle-size-${this.size}`]: true,
+        };
+        const switchClasses = {
+            'toggle-switch': true,
+            'toggle-pressed': this.checked,
+            'toggle-unpressed': !this.checked,
+            [`toggle-${this.size}`]: true,
+            'toggle-disabled': this.disabled,
+            'toggle-focus': this.isFocused && !this.disabled,
+            'toggle-hover': this.isHovered && !this.disabled,
+        };
+        const buttonClasses = {
+            'toggle-button': true,
+            'toggle-button-pressed': this.checked,
+            'toggle-button-unpressed': !this.checked,
+            [`toggle-button-${this.size}`]: true,
+            'toggle-button-disabled': this.disabled,
+        };
+        const labelClasses = {
+            'toggle-label': true,
+            [`toggle-label-${this.size}`]: true,
+        };
+        return (h("div", { key: '59ea31ccba3b8a5d19d991728abfa832af696c22', class: wrapperClasses, part: "wrapper" }, h("div", { key: '6a379c430ad0132a7bea6d72e8eaf48eb3444a7e', class: switchClasses, onClick: this.handleToggle, onKeyDown: this.handleKeyDown, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onFocus: this.handleFocus, onBlur: this.handleBlur, tabIndex: this.disabled ? -1 : 0, role: "switch", "aria-checked": this.checked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.label || undefined, part: "switch" }, h("div", { key: '3e9914d0096f303fd19aa44881f8463b5846b1ed', class: buttonClasses, part: "button" })), this.showText && (this.label || this.supportingText) && (h("div", { key: '9e46745a9ed60dc29c4da37e503576b40ece91c6', class: "toggle-text" }, this.label && (h("span", { key: 'f53a5c4d6fe6a3c2904fd05bc54603128995099c', class: labelClasses }, this.label)), this.supportingText && (h("div", { key: '1e4d3e0d5ccdb230306e74692309ae837b0d5ec4', class: "toggle-supporting-text" }, this.supportingText))))));
+    }
+    static get is() { return "bh-toggle"; }
+    static get encapsulation() { return "shadow"; }
+    static get formAssociated() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bh-toggle.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bh-toggle.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ToggleSize",
+                    "resolved": "\"md\" | \"sm\"",
+                    "references": {
+                        "ToggleSize": {
+                            "location": "local",
+                            "path": "/home/runner/work/bellhopos/bellhopos/packages/bellhop-core/src/components/bh-toggle/bh-toggle.tsx",
+                            "id": "src/components/bh-toggle/bh-toggle.tsx::ToggleSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The size of the toggle"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "'md'"
+            },
+            "showText": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to show the label and supporting text"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-text",
+                "defaultValue": "false"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The label text"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label",
+                "defaultValue": "''"
+            },
+            "supportingText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Supporting text below the label"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "supporting-text",
+                "defaultValue": "''"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the toggle is disabled"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "checked": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the toggle is checked (controlled mode)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "checked",
+                "defaultValue": "false"
+            },
+            "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": "''"
+            },
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Value when checked (default: 'on')"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value",
+                "defaultValue": "'on'"
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the toggle is required"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "required",
+                "defaultValue": "false"
+            },
+            "defaultChecked": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Default checked state for form reset"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "default-checked",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isFocused": {},
+            "isHovered": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "bhChange",
+                "name": "bhChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the toggle state changes"
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }];
+    }
+    static get attachInternalsMemberName() { return "internals"; }
+}
+//# sourceMappingURL=bh-toggle.js.map