@actabldesign/bellhop-core 0.0.3

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

@@ -0,0 +1,179 @@
+/* ==========================================================================
+   CHECKBOX COMPONENT STYLES - StencilJS
+   ========================================================================== */
+
+:host {
+  display: inline-block;
+  font-family: var(--font-inter, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif);
+}
+
+/* ==========================================================================
+   VISUALLY HIDDEN NATIVE INPUT
+   ========================================================================== */
+
+.checkbox-input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* ==========================================================================
+   WRAPPER STYLES
+   ========================================================================== */
+
+.checkbox-wrapper {
+  display: inline-flex;
+  align-items: flex-start;
+  gap: 8px;
+  cursor: pointer;
+  user-select: none;
+  position: relative;
+}
+
+.checkbox-wrapper-disabled {
+  cursor: not-allowed;
+}
+
+/* ==========================================================================
+   CHECKBOX BOX STYLES
+   ========================================================================== */
+
+.checkbox {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  outline: none;
+  user-select: none;
+  transition: all 0.2s ease;
+  box-sizing: border-box;
+  background: var(--color-white);
+  border: 2px solid var(--color-neutral-300);
+  position: relative;
+  flex-shrink: 0;
+  pointer-events: none;
+}
+
+/* Size Variants */
+.checkbox-sm {
+  width: 16px;
+  height: 16px;
+  border-radius: var(--radius-xs);
+  margin-top: 3px;
+}
+
+.checkbox-md {
+  width: 20px;
+  height: 20px;
+  border-radius: var(--radius-sm);
+  margin-top: 2px;
+}
+
+/* Remove margin when no label */
+.checkbox-wrapper:not(.checkbox-wrapper-with-label) .checkbox-sm,
+.checkbox-wrapper:not(.checkbox-wrapper-with-label) .checkbox-md {
+  margin-top: 0;
+}
+
+/* State: Checked */
+.checkbox.checkbox-checked {
+  background: var(--color-brand-600);
+  border-color: var(--color-brand-600);
+  color: var(--color-white);
+}
+
+/* State: Hover */
+.checkbox.checkbox-hover:not(.checkbox-disabled) {
+  background: var(--color-neutral-100);
+  border-color: var(--color-neutral-300);
+}
+
+.checkbox.checkbox-checked.checkbox-hover:not(.checkbox-disabled) {
+  background: var(--color-brand-700);
+  border-color: var(--color-brand-700);
+}
+
+/* State: Focused */
+.checkbox.checkbox-focused:not(.checkbox-disabled) {
+  border-color: var(--color-neutral-300);
+  box-shadow: 0px 0px 0px 4px var(--color-brand-100),
+    0px 0px 0px 2px var(--color-white);
+}
+
+.checkbox.checkbox-checked.checkbox-focused:not(.checkbox-disabled) {
+  background: var(--color-brand-600);
+  border-color: var(--color-brand-600);
+  box-shadow: 0px 0px 0px 4px var(--color-brand-100),
+    0px 0px 0px 2px var(--color-white);
+}
+
+/* State: Disabled */
+.checkbox.checkbox-disabled {
+  background: var(--color-neutral-50);
+  border-color: var(--color-neutral-300);
+  cursor: not-allowed;
+  opacity: 1;
+}
+
+.checkbox.checkbox-checked.checkbox-disabled {
+  background: var(--color-neutral-50);
+  border: 2px solid var(--color-neutral-300);
+  color: var(--color-neutral-300);
+}
+
+/* ==========================================================================
+   ICONS
+   ========================================================================== */
+
+.checkbox-icon {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  line-height: 1;
+  font-variation-settings: 'FILL' 0, 'wght' 600, 'GRAD' 0, 'opsz' 20;
+}
+
+.checkbox .check-icon {
+  color: var(--color-white);
+}
+
+.checkbox-disabled .check-icon {
+  color: var(--color-neutral-300);
+}
+
+.checkbox .minus-icon {
+  color: var(--color-white);
+}
+
+.checkbox-disabled .minus-icon {
+  color: var(--color-neutral-300);
+}
+
+/* Adjust icon sizes for different checkbox sizes */
+.checkbox-sm .checkbox-icon {
+  font-size: 14px;
+}
+
+.checkbox-md .checkbox-icon {
+  font-size: 18px;
+}
+
+/* ==========================================================================
+   CHECKBOX CONTROL WRAPPER
+   ========================================================================== */
+
+.checkbox-control {
+  display: inline-flex;
+  align-items: flex-start;
+  cursor: pointer;
+}
+
+.checkbox-wrapper-disabled .checkbox-control {
+  cursor: not-allowed;
+}

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

@@ -0,0 +1,378 @@
+import { h } from "@stencil/core";
+import { syncCheckableFormValue, validateRequired } from "../../utils/form";
+export class BhCheckbox {
+    el;
+    internals;
+    inputRef;
+    uniqueId = `bh-checkbox-${Math.random().toString(36).substring(2, 9)}`;
+    /** Checkbox size */
+    size = 'md';
+    /** Checked state */
+    checked = false;
+    /** Indeterminate state */
+    indeterminate = false;
+    /** Disabled state */
+    disabled = false;
+    /** Name attribute for form submission */
+    name = '';
+    /** Value attribute for form submission */
+    value = 'on';
+    /** Optional label text - when provided, renders checkbox with label */
+    label = '';
+    /** Optional supporting text below the label */
+    supportingText = '';
+    /** Whether the checkbox is required */
+    required = false;
+    /** Default checked state for form reset */
+    defaultChecked = false;
+    /** Internal hover state */
+    isHovered = false;
+    /** Internal focus state */
+    isFocused = false;
+    /** Emitted when checkbox state changes via user interaction */
+    bhChange;
+    handleCheckedChange(newValue) {
+        if (this.inputRef) {
+            this.inputRef.checked = newValue;
+        }
+    }
+    handleIndeterminateChange(newValue) {
+        if (this.inputRef) {
+            this.inputRef.indeterminate = newValue;
+        }
+    }
+    componentDidLoad() {
+        if (this.inputRef) {
+            this.inputRef.indeterminate = this.indeterminate;
+        }
+        syncCheckableFormValue(this.internals, this.name, this.checked, this.value);
+        validateRequired(this.internals, this.required, this.checked);
+    }
+    formResetCallback() {
+        this.checked = this.defaultChecked;
+        this.indeterminate = false;
+        if (this.inputRef) {
+            this.inputRef.checked = this.defaultChecked;
+            this.inputRef.indeterminate = false;
+        }
+        syncCheckableFormValue(this.internals, this.name, this.checked, this.value);
+        validateRequired(this.internals, this.required, this.checked);
+    }
+    handleChange = (event) => {
+        event.stopPropagation();
+        if (this.disabled)
+            return;
+        const input = event.target;
+        if (this.indeterminate) {
+            this.indeterminate = false;
+            this.checked = false;
+            if (this.inputRef) {
+                this.inputRef.indeterminate = false;
+                this.inputRef.checked = false;
+            }
+        }
+        else {
+            this.checked = input.checked;
+        }
+        syncCheckableFormValue(this.internals, this.name, this.checked, this.value);
+        validateRequired(this.internals, this.required, this.checked);
+        this.bhChange.emit(this.checked);
+    };
+    handleMouseEnter = () => {
+        this.isHovered = true;
+    };
+    handleMouseLeave = () => {
+        this.isHovered = false;
+    };
+    handleFocus = () => {
+        this.isFocused = true;
+    };
+    handleBlur = () => {
+        this.isFocused = false;
+    };
+    renderCheckboxControl() {
+        const isCheckedState = this.checked || this.indeterminate;
+        const checkboxClasses = {
+            'checkbox': true,
+            [`checkbox-${this.size}`]: true,
+            'checkbox-checked': isCheckedState,
+            'checkbox-disabled': this.disabled,
+            'checkbox-focused': this.isFocused && !this.disabled,
+            'checkbox-hover': this.isHovered && !this.disabled,
+        };
+        return (h("div", { class: "checkbox-control", onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, h("input", { ref: (el) => (this.inputRef = el), type: "checkbox", id: this.uniqueId, name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, class: "checkbox-input", onChange: this.handleChange, onFocus: this.handleFocus, onBlur: this.handleBlur, "aria-describedby": this.supportingText ? `${this.uniqueId}-description` : undefined }), h("div", { class: checkboxClasses, part: "checkbox", "aria-hidden": "true" }, this.checked && !this.indeterminate && (h("span", { class: "material-symbols-outlined checkbox-icon check-icon" }, "check")), this.indeterminate && (h("span", { class: "material-symbols-outlined checkbox-icon minus-icon" }, "remove")))));
+    }
+    render() {
+        const hasLabel = this.label || this.supportingText;
+        const wrapperClasses = {
+            'checkbox-wrapper': true,
+            'checkbox-wrapper-with-label': !!hasLabel,
+            'checkbox-wrapper-disabled': this.disabled,
+        };
+        // Render with bh-label when label/supportingText is provided
+        if (hasLabel) {
+            return (h("div", { class: wrapperClasses, part: "wrapper" }, h("bh-label", { layout: "inline-start", label: this.label, supportingText: this.supportingText, disabled: this.disabled, for: this.uniqueId }, this.renderCheckboxControl())));
+        }
+        // Standalone checkbox without label
+        return (h("div", { class: wrapperClasses, part: "wrapper" }, this.renderCheckboxControl()));
+    }
+    static get is() { return "bh-checkbox"; }
+    static get encapsulation() { return "shadow"; }
+    static get formAssociated() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bh-checkbox.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bh-checkbox.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "CheckboxSize",
+                    "resolved": "\"md\" | \"sm\"",
+                    "references": {
+                        "CheckboxSize": {
+                            "location": "local",
+                            "path": "/home/runner/work/bellhopos/bellhopos/packages/bellhop-core/src/components/bh-checkbox/bh-checkbox.tsx",
+                            "id": "src/components/bh-checkbox/bh-checkbox.tsx::CheckboxSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Checkbox size"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "'md'"
+            },
+            "checked": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Checked state"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "checked",
+                "defaultValue": "false"
+            },
+            "indeterminate": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indeterminate state"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "indeterminate",
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Disabled state"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "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 attribute for form submission"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value",
+                "defaultValue": "'on'"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional label text - when provided, renders checkbox with label"
+                },
+                "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": "Optional supporting text below the label"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "supporting-text",
+                "defaultValue": "''"
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the checkbox 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 {
+            "isHovered": {},
+            "isFocused": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "bhChange",
+                "name": "bhChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when checkbox state changes via user interaction"
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "checked",
+                "methodName": "handleCheckedChange"
+            }, {
+                "propName": "indeterminate",
+                "methodName": "handleIndeterminateChange"
+            }];
+    }
+    static get attachInternalsMemberName() { return "internals"; }
+}
+//# sourceMappingURL=bh-checkbox.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"bh-checkbox.js","sourceRoot":"","sources":["../../../src/components/bh-checkbox/bh-checkbox.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, State, Event, EventEmitter, h, Element, Watch, AttachInternals } from '@stencil/core';\nimport { syncCheckableFormValue, validateRequired } from '../../utils/form';\n\nexport type CheckboxSize = 'sm' | 'md';\n\n@Component({\n  tag: 'bh-checkbox',\n  styleUrl: 'bh-checkbox.css',\n  shadow: true,\n  formAssociated: true,\n})\nexport class BhCheckbox {\n  @Element() el!: HTMLElement;\n  @AttachInternals() internals!: ElementInternals;\n\n  private inputRef?: HTMLInputElement;\n  private uniqueId = `bh-checkbox-${Math.random().toString(36).substring(2, 9)}`;\n\n  /** Checkbox size */\n  @Prop() size: CheckboxSize = 'md';\n\n  /** Checked state */\n  @Prop({ mutable: true, reflect: true }) checked: boolean = false;\n\n  /** Indeterminate state */\n  @Prop({ mutable: true }) indeterminate: boolean = false;\n\n  /** Disabled state */\n  @Prop() disabled: boolean = false;\n\n  /** Name attribute for form submission */\n  @Prop() name: string = '';\n\n  /** Value attribute for form submission */\n  @Prop() value: string = 'on';\n\n  /** Optional label text - when provided, renders checkbox with label */\n  @Prop() label: string = '';\n\n  /** Optional supporting text below the label */\n  @Prop() supportingText: string = '';\n\n  /** Whether the checkbox is required */\n  @Prop() required: boolean = false;\n\n  /** Default checked state for form reset */\n  @Prop() defaultChecked: boolean = false;\n\n  /** Internal hover state */\n  @State() isHovered: boolean = false;\n\n  /** Internal focus state */\n  @State() isFocused: boolean = false;\n\n  /** Emitted when checkbox state changes via user interaction */\n  @Event() bhChange!: EventEmitter<boolean>;\n\n  @Watch('checked')\n  handleCheckedChange(newValue: boolean) {\n    if (this.inputRef) {\n      this.inputRef.checked = newValue;\n    }\n  }\n\n  @Watch('indeterminate')\n  handleIndeterminateChange(newValue: boolean) {\n    if (this.inputRef) {\n      this.inputRef.indeterminate = newValue;\n    }\n  }\n\n  componentDidLoad() {\n    if (this.inputRef) {\n      this.inputRef.indeterminate = this.indeterminate;\n    }\n    syncCheckableFormValue(this.internals, this.name, this.checked, this.value);\n    validateRequired(this.internals, this.required, this.checked);\n  }\n\n  formResetCallback() {\n    this.checked = this.defaultChecked;\n    this.indeterminate = false;\n    if (this.inputRef) {\n      this.inputRef.checked = this.defaultChecked;\n      this.inputRef.indeterminate = false;\n    }\n    syncCheckableFormValue(this.internals, this.name, this.checked, this.value);\n    validateRequired(this.internals, this.required, this.checked);\n  }\n\n  private handleChange = (event: Event) => {\n    event.stopPropagation();\n    if (this.disabled) return;\n\n    const input = event.target as HTMLInputElement;\n\n    if (this.indeterminate) {\n      this.indeterminate = false;\n      this.checked = false;\n      if (this.inputRef) {\n        this.inputRef.indeterminate = false;\n        this.inputRef.checked = false;\n      }\n    } else {\n      this.checked = input.checked;\n    }\n\n    syncCheckableFormValue(this.internals, this.name, this.checked, this.value);\n    validateRequired(this.internals, this.required, this.checked);\n    this.bhChange.emit(this.checked);\n  };\n\n  private handleMouseEnter = () => {\n    this.isHovered = true;\n  };\n\n  private handleMouseLeave = () => {\n    this.isHovered = false;\n  };\n\n  private handleFocus = () => {\n    this.isFocused = true;\n  };\n\n  private handleBlur = () => {\n    this.isFocused = false;\n  };\n\n  private renderCheckboxControl() {\n    const isCheckedState = this.checked || this.indeterminate;\n\n    const checkboxClasses = {\n      'checkbox': true,\n      [`checkbox-${this.size}`]: true,\n      'checkbox-checked': isCheckedState,\n      'checkbox-disabled': this.disabled,\n      'checkbox-focused': this.isFocused && !this.disabled,\n      'checkbox-hover': this.isHovered && !this.disabled,\n    };\n\n    return (\n      <div\n        class=\"checkbox-control\"\n        onMouseEnter={this.handleMouseEnter}\n        onMouseLeave={this.handleMouseLeave}\n      >\n        <input\n          ref={(el) => (this.inputRef = el)}\n          type=\"checkbox\"\n          id={this.uniqueId}\n          name={this.name}\n          value={this.value}\n          checked={this.checked}\n          disabled={this.disabled}\n          class=\"checkbox-input\"\n          onChange={this.handleChange}\n          onFocus={this.handleFocus}\n          onBlur={this.handleBlur}\n          aria-describedby={this.supportingText ? `${this.uniqueId}-description` : undefined}\n        />\n        <div class={checkboxClasses} part=\"checkbox\" aria-hidden=\"true\">\n          {this.checked && !this.indeterminate && (\n            <span class=\"material-symbols-outlined checkbox-icon check-icon\">\n              check\n            </span>\n          )}\n          {this.indeterminate && (\n            <span class=\"material-symbols-outlined checkbox-icon minus-icon\">\n              remove\n            </span>\n          )}\n        </div>\n      </div>\n    );\n  }\n\n  render() {\n    const hasLabel = this.label || this.supportingText;\n\n    const wrapperClasses = {\n      'checkbox-wrapper': true,\n      'checkbox-wrapper-with-label': !!hasLabel,\n      'checkbox-wrapper-disabled': this.disabled,\n    };\n\n    // Render with bh-label when label/supportingText is provided\n    if (hasLabel) {\n      return (\n        <div class={wrapperClasses} part=\"wrapper\">\n          <bh-label\n            layout=\"inline-start\"\n            label={this.label}\n            supportingText={this.supportingText}\n            disabled={this.disabled}\n            for={this.uniqueId}\n          >\n            {this.renderCheckboxControl()}\n          </bh-label>\n        </div>\n      );\n    }\n\n    // Standalone checkbox without label\n    return (\n      <div class={wrapperClasses} part=\"wrapper\">\n        {this.renderCheckboxControl()}\n      </div>\n    );\n  }\n}\n"]}

package/collection/components/bh-checkbox-group/bh-checkbox-group.css

@@ -0,0 +1,10 @@
+:host {
+  display: block;
+}
+
+.checkbox-group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-lg);
+  width: 100%;
+}