@actabldesign/bellhop-core 0.0.3

package/collection/components/bh-empty-state/bh-empty-state.js

@@ -0,0 +1,306 @@
+import { h } from "@stencil/core";
+export class BhEmptyState {
+    /**
+     * Title text
+     */
+    emptyTitle = 'No items found';
+    /**
+     * Description text
+     */
+    description = 'There are no items to display at the moment.';
+    /**
+     * Size of the illustration
+     */
+    illustrationSize = 'md';
+    /**
+     * Path to the illustration SVG
+     */
+    illustrationPath = '';
+    /**
+     * Primary action button text
+     */
+    primaryActionText = '';
+    /**
+     * Primary action icon name
+     */
+    primaryActionIcon = '';
+    /**
+     * Secondary action button text
+     */
+    secondaryActionText = '';
+    /**
+     * Secondary action icon name
+     */
+    secondaryActionIcon = '';
+    /**
+     * Max width of the component
+     */
+    maxWidth = '512px';
+    /**
+     * Emitted when primary action is clicked
+     */
+    bhPrimaryAction;
+    /**
+     * Emitted when secondary action is clicked
+     */
+    bhSecondaryAction;
+    handlePrimaryAction = () => {
+        this.bhPrimaryAction.emit();
+    };
+    handleSecondaryAction = () => {
+        this.bhSecondaryAction.emit();
+    };
+    getIllustrationDimensions() {
+        switch (this.illustrationSize) {
+            case 'sm':
+                return { width: '120px', height: '120px' };
+            case 'md':
+                return { width: '200px', height: '200px' };
+            case 'lg':
+                return { width: '280px', height: '280px' };
+            default:
+                return { width: '200px', height: '200px' };
+        }
+    }
+    render() {
+        const dimensions = this.getIllustrationDimensions();
+        const hasActions = this.primaryActionText || this.secondaryActionText;
+        return (h("div", { key: 'd25e80c0d5a44b64857738218974a5ed2de4c666', class: "empty-state", style: { maxWidth: this.maxWidth }, part: "container" }, h("div", { key: 'ca13b3b4b7f3945a73bd32b0d17c6356642a2be6', class: "empty-state-content" }, this.illustrationPath && (h("div", { key: 'f193ab78011e2623904510e39bbd56a61cf89af3', class: "empty-state-illustration" }, h("img", { key: 'f8ed7362c0dc30d2e0c0f893915ffa35cee14f53', src: this.illustrationPath, alt: "Empty state illustration", style: { width: dimensions.width, height: dimensions.height } }))), h("div", { key: '771789a873d3ae8453cc53747c935995ffb02b88', class: "empty-state-text" }, h("h3", { key: 'c55280f9bbb70da172ccfe6f701359416cc56c16', class: "empty-state-title" }, this.emptyTitle), h("p", { key: '795a71c84acd99ab74c77ef08ed960ba675f224a', class: "empty-state-description" }, this.description))), hasActions && (h("div", { key: '8526717a12dbab631d874f2155411ebaf7908a29', class: "empty-state-actions" }, this.secondaryActionText && (h("bh-button", { key: 'b3aca034c568c021735bf1dd10543972352c316f', hierarchy: "secondary", size: "md", label: this.secondaryActionText, icon: this.secondaryActionIcon ? 'leading' : 'none', iconName: this.secondaryActionIcon, onBhClick: this.handleSecondaryAction })), this.primaryActionText && (h("bh-button", { key: '95bb81b7bf7669668d12427eedf1564f07266d72', hierarchy: "primary", size: "md", label: this.primaryActionText, icon: this.primaryActionIcon ? 'leading' : 'none', iconName: this.primaryActionIcon, onBhClick: this.handlePrimaryAction }))))));
+    }
+    static get is() { return "bh-empty-state"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bh-empty-state.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bh-empty-state.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "emptyTitle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Title text"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "empty-title",
+                "defaultValue": "'No items found'"
+            },
+            "description": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Description text"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "description",
+                "defaultValue": "'There are no items to display at the moment.'"
+            },
+            "illustrationSize": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "EmptyStateIllustrationSize",
+                    "resolved": "\"lg\" | \"md\" | \"sm\"",
+                    "references": {
+                        "EmptyStateIllustrationSize": {
+                            "location": "local",
+                            "path": "/home/runner/work/bellhopos/bellhopos/packages/bellhop-core/src/components/bh-empty-state/bh-empty-state.tsx",
+                            "id": "src/components/bh-empty-state/bh-empty-state.tsx::EmptyStateIllustrationSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Size of the illustration"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "illustration-size",
+                "defaultValue": "'md'"
+            },
+            "illustrationPath": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Path to the illustration SVG"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "illustration-path",
+                "defaultValue": "''"
+            },
+            "primaryActionText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Primary action button text"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "primary-action-text",
+                "defaultValue": "''"
+            },
+            "primaryActionIcon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Primary action icon name"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "primary-action-icon",
+                "defaultValue": "''"
+            },
+            "secondaryActionText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Secondary action button text"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "secondary-action-text",
+                "defaultValue": "''"
+            },
+            "secondaryActionIcon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Secondary action icon name"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "secondary-action-icon",
+                "defaultValue": "''"
+            },
+            "maxWidth": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Max width of the component"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max-width",
+                "defaultValue": "'512px'"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "bhPrimaryAction",
+                "name": "bhPrimaryAction",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when primary action is clicked"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "bhSecondaryAction",
+                "name": "bhSecondaryAction",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when secondary action is clicked"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+}
+//# sourceMappingURL=bh-empty-state.js.map

package/collection/components/bh-empty-state/bh-empty-state.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bh-empty-state.js","sourceRoot":"","sources":["../../../src/components/bh-empty-state/bh-empty-state.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,EAAgB,CAAC,EAAE,MAAM,eAAe,CAAC;AASxE,MAAM,OAAO,YAAY;IACvB;;OAEG;IACK,UAAU,GAAW,gBAAgB,CAAC;IAE9C;;OAEG;IACK,WAAW,GAAW,8CAA8C,CAAC;IAE7E;;OAEG;IACK,gBAAgB,GAA+B,IAAI,CAAC;IAE5D;;OAEG;IACK,gBAAgB,GAAW,EAAE,CAAC;IAEtC;;OAEG;IACK,iBAAiB,GAAW,EAAE,CAAC;IAEvC;;OAEG;IACK,iBAAiB,GAAW,EAAE,CAAC;IAEvC;;OAEG;IACK,mBAAmB,GAAW,EAAE,CAAC;IAEzC;;OAEG;IACK,mBAAmB,GAAW,EAAE,CAAC;IAEzC;;OAEG;IACK,QAAQ,GAAW,OAAO,CAAC;IAEnC;;OAEG;IACM,eAAe,CAAsB;IAE9C;;OAEG;IACM,iBAAiB,CAAsB;IAExC,mBAAmB,GAAG,GAAS,EAAE;QACvC,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE,CAAC;IAC9B,CAAC,CAAC;IAEM,qBAAqB,GAAG,GAAS,EAAE;QACzC,IAAI,CAAC,iBAAiB,CAAC,IAAI,EAAE,CAAC;IAChC,CAAC,CAAC;IAEM,yBAAyB;QAC/B,QAAQ,IAAI,CAAC,gBAAgB,EAAE,CAAC;YAC9B,KAAK,IAAI;gBACP,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,CAAC;YAC7C,KAAK,IAAI;gBACP,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,CAAC;YAC7C,KAAK,IAAI;gBACP,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,CAAC;YAC7C;gBACE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,CAAC;QAC/C,CAAC;IACH,CAAC;IAED,MAAM;QACJ,MAAM,UAAU,GAAG,IAAI,CAAC,yBAAyB,EAAE,CAAC;QACpD,MAAM,UAAU,GAAG,IAAI,CAAC,iBAAiB,IAAI,IAAI,CAAC,mBAAmB,CAAC;QAEtE,OAAO,CACL,4DACE,KAAK,EAAC,aAAa,EACnB,KAAK,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,EAClC,IAAI,EAAC,WAAW;YAEhB,4DAAK,KAAK,EAAC,qBAAqB;gBAE7B,IAAI,CAAC,gBAAgB,IAAI,CACxB,4DAAK,KAAK,EAAC,0BAA0B;oBACnC,4DACE,GAAG,EAAE,IAAI,CAAC,gBAAgB,EAC1B,GAAG,EAAC,0BAA0B,EAC9B,KAAK,EAAE,EAAE,KAAK,EAAE,UAAU,CAAC,KAAK,EAAE,MAAM,EAAE,UAAU,CAAC,MAAM,EAAE,GAC7D,CACE,CACP;gBAGD,4DAAK,KAAK,EAAC,kBAAkB;oBAC3B,2DAAI,KAAK,EAAC,mBAAmB,IAAE,IAAI,CAAC,UAAU,CAAM;oBACpD,0DAAG,KAAK,EAAC,yBAAyB,IAAE,IAAI,CAAC,WAAW,CAAK,CACrD,CACF;YAGL,UAAU,IAAI,CACb,4DAAK,KAAK,EAAC,qBAAqB;gBAC7B,IAAI,CAAC,mBAAmB,IAAI,CAC3B,kEACE,SAAS,EAAC,WAAW,EACrB,IAAI,EAAC,IAAI,EACT,KAAK,EAAE,IAAI,CAAC,mBAAmB,EAC/B,IAAI,EAAE,IAAI,CAAC,mBAAmB,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,EACnD,QAAQ,EAAE,IAAI,CAAC,mBAAmB,EAClC,SAAS,EAAE,IAAI,CAAC,qBAAqB,GACrC,CACH;gBACA,IAAI,CAAC,iBAAiB,IAAI,CACzB,kEACE,SAAS,EAAC,SAAS,EACnB,IAAI,EAAC,IAAI,EACT,KAAK,EAAE,IAAI,CAAC,iBAAiB,EAC7B,IAAI,EAAE,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,EACjD,QAAQ,EAAE,IAAI,CAAC,iBAAiB,EAChC,SAAS,EAAE,IAAI,CAAC,mBAAmB,GACnC,CACH,CACG,CACP,CACG,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, Event, EventEmitter, h } from '@stencil/core';\n\nexport type EmptyStateIllustrationSize = 'sm' | 'md' | 'lg';\n\n@Component({\n  tag: 'bh-empty-state',\n  styleUrl: 'bh-empty-state.css',\n  shadow: true,\n})\nexport class BhEmptyState {\n  /**\n   * Title text\n   */\n  @Prop() emptyTitle: string = 'No items found';\n\n  /**\n   * Description text\n   */\n  @Prop() description: string = 'There are no items to display at the moment.';\n\n  /**\n   * Size of the illustration\n   */\n  @Prop() illustrationSize: EmptyStateIllustrationSize = 'md';\n\n  /**\n   * Path to the illustration SVG\n   */\n  @Prop() illustrationPath: string = '';\n\n  /**\n   * Primary action button text\n   */\n  @Prop() primaryActionText: string = '';\n\n  /**\n   * Primary action icon name\n   */\n  @Prop() primaryActionIcon: string = '';\n\n  /**\n   * Secondary action button text\n   */\n  @Prop() secondaryActionText: string = '';\n\n  /**\n   * Secondary action icon name\n   */\n  @Prop() secondaryActionIcon: string = '';\n\n  /**\n   * Max width of the component\n   */\n  @Prop() maxWidth: string = '512px';\n\n  /**\n   * Emitted when primary action is clicked\n   */\n  @Event() bhPrimaryAction!: EventEmitter<void>;\n\n  /**\n   * Emitted when secondary action is clicked\n   */\n  @Event() bhSecondaryAction!: EventEmitter<void>;\n\n  private handlePrimaryAction = (): void => {\n    this.bhPrimaryAction.emit();\n  };\n\n  private handleSecondaryAction = (): void => {\n    this.bhSecondaryAction.emit();\n  };\n\n  private getIllustrationDimensions(): { width: string; height: string } {\n    switch (this.illustrationSize) {\n      case 'sm':\n        return { width: '120px', height: '120px' };\n      case 'md':\n        return { width: '200px', height: '200px' };\n      case 'lg':\n        return { width: '280px', height: '280px' };\n      default:\n        return { width: '200px', height: '200px' };\n    }\n  }\n\n  render() {\n    const dimensions = this.getIllustrationDimensions();\n    const hasActions = this.primaryActionText || this.secondaryActionText;\n\n    return (\n      <div\n        class=\"empty-state\"\n        style={{ maxWidth: this.maxWidth }}\n        part=\"container\"\n      >\n        <div class=\"empty-state-content\">\n          {/* Illustration */}\n          {this.illustrationPath && (\n            <div class=\"empty-state-illustration\">\n              <img\n                src={this.illustrationPath}\n                alt=\"Empty state illustration\"\n                style={{ width: dimensions.width, height: dimensions.height }}\n              />\n            </div>\n          )}\n\n          {/* Text Content */}\n          <div class=\"empty-state-text\">\n            <h3 class=\"empty-state-title\">{this.emptyTitle}</h3>\n            <p class=\"empty-state-description\">{this.description}</p>\n          </div>\n        </div>\n\n        {/* Actions */}\n        {hasActions && (\n          <div class=\"empty-state-actions\">\n            {this.secondaryActionText && (\n              <bh-button\n                hierarchy=\"secondary\"\n                size=\"md\"\n                label={this.secondaryActionText}\n                icon={this.secondaryActionIcon ? 'leading' : 'none'}\n                iconName={this.secondaryActionIcon}\n                onBhClick={this.handleSecondaryAction}\n              />\n            )}\n            {this.primaryActionText && (\n              <bh-button\n                hierarchy=\"primary\"\n                size=\"md\"\n                label={this.primaryActionText}\n                icon={this.primaryActionIcon ? 'leading' : 'none'}\n                iconName={this.primaryActionIcon}\n                onBhClick={this.handlePrimaryAction}\n              />\n            )}\n          </div>\n        )}\n      </div>\n    );\n  }\n}\n"]}

package/collection/components/bh-featured-icon/bh-featured-icon.css

@@ -0,0 +1,198 @@
+/* ==========================================================================
+   BH-FEATURED-ICON COMPONENT STYLES
+   ========================================================================== */
+
+:host {
+  display: inline-block;
+}
+
+.featured-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s ease;
+}
+
+/* Size variations */
+.featured-icon-sm {
+  width: 32px;
+  height: 32px;
+  border-radius: 6px;
+}
+
+.featured-icon-md {
+  width: 40px;
+  height: 40px;
+  border-radius: 8px;
+}
+
+.featured-icon-lg {
+  width: 48px;
+  height: 48px;
+  border-radius: 10px;
+}
+
+.featured-icon-xl {
+  width: 56px;
+  height: 56px;
+  border-radius: 12px;
+}
+
+/* Icon sizes - matching Figma specs */
+.icon-sm {
+  font-size: var(--icon-size-xs);
+  width: var(--icon-size-xs);
+  height: var(--icon-size-xs);
+  line-height: 1;
+}
+
+.icon-md {
+  font-size: var(--icon-size-md);
+  width: var(--icon-size-md);
+  height: var(--icon-size-md);
+  line-height: 1;
+}
+
+.icon-lg {
+  font-size: var(--icon-size-lg);
+  width: var(--icon-size-lg);
+  height: var(--icon-size-lg);
+  line-height: 1;
+}
+
+.icon-xl {
+  font-size: var(--icon-size-2xl);
+  width: var(--icon-size-2xl);
+  height: var(--icon-size-2xl);
+  line-height: 1;
+}
+
+/* ============================================
+   OUTLINED STYLES
+   ============================================ */
+
+/* Brand color - Outlined */
+.featured-icon-brand.featured-icon-outlined {
+  background-color: transparent;
+  border: 1px solid var(--color-neutral-200);
+}
+
+.featured-icon-brand.featured-icon-outlined .material-symbols-outlined {
+  color: var(--color-brand-600);
+}
+
+/* Gray color - Outlined */
+.featured-icon-gray.featured-icon-outlined {
+  border: 1px solid var(--color-neutral-200);
+}
+
+.featured-icon-gray.featured-icon-outlined .material-symbols-outlined {
+  color: var(--color-neutral-600);
+}
+
+/* Error color - Outlined */
+.featured-icon-error.featured-icon-outlined {
+  border: 1px solid var(--color-neutral-200);
+}
+
+.featured-icon-error.featured-icon-outlined .material-symbols-outlined {
+  color: var(--color-error-600);
+}
+
+/* Warning color - Outlined */
+.featured-icon-warning.featured-icon-outlined {
+  border: 1px solid var(--color-neutral-200);
+}
+
+.featured-icon-warning.featured-icon-outlined .material-symbols-outlined {
+  color: var(--color-warning-600);
+}
+
+/* Success color - Outlined */
+.featured-icon-success.featured-icon-outlined {
+  border: 1px solid var(--color-neutral-200);
+}
+
+.featured-icon-success.featured-icon-outlined .material-symbols-outlined {
+  color: var(--color-success-600);
+}
+
+/* Highlight color - Outlined */
+.featured-icon-highlight.featured-icon-outlined {
+  border: 1px solid var(--color-neutral-200);
+}
+
+.featured-icon-highlight.featured-icon-outlined .material-symbols-outlined {
+  color: var(--color-purple-600);
+}
+
+/* ============================================
+   FILLED STYLES
+   ============================================ */
+
+/* Brand color - Filled */
+.featured-icon-brand.featured-icon-filled {
+  background-color: var(--color-brand-100);
+  border: none;
+}
+
+.featured-icon-brand.featured-icon-filled .material-symbols-outlined {
+  color: var(--color-brand-600);
+}
+
+/* Gray color - Filled */
+.featured-icon-gray.featured-icon-filled {
+  background-color: var(--color-neutral-100);
+  border: none;
+}
+
+.featured-icon-gray.featured-icon-filled .material-symbols-outlined {
+  color: var(--color-neutral-600);
+}
+
+/* Error color - Filled */
+.featured-icon-error.featured-icon-filled {
+  background-color: var(--color-error-100);
+  border: none;
+}
+
+.featured-icon-error.featured-icon-filled .material-symbols-outlined {
+  color: var(--color-error-600);
+}
+
+/* Warning color - Filled */
+.featured-icon-warning.featured-icon-filled {
+  background-color: var(--color-warning-200);
+  border: none;
+}
+
+.featured-icon-warning.featured-icon-filled .material-symbols-outlined {
+  color: var(--color-warning-600);
+}
+
+/* Success color - Filled */
+.featured-icon-success.featured-icon-filled {
+  background-color: var(--color-success-100);
+  border: none;
+}
+
+.featured-icon-success.featured-icon-filled .material-symbols-outlined {
+  color: var(--color-success-600);
+}
+
+/* Highlight color - Filled */
+.featured-icon-highlight.featured-icon-filled {
+  background-color: var(--color-purple-200);
+  border: none;
+}
+
+.featured-icon-highlight.featured-icon-filled .material-symbols-outlined {
+  color: var(--color-purple-600);
+}
+
+/* Material Symbols base styles */
+.material-symbols-outlined {
+  font-family: 'Material Symbols Outlined';
+  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
+  user-select: none;
+}

package/collection/components/bh-featured-icon/bh-featured-icon.js

@@ -0,0 +1,144 @@
+import { h } from "@stencil/core";
+export class BhFeaturedIcon {
+    /**
+     * The size of the featured icon
+     */
+    size = 'md';
+    /**
+     * The color theme of the featured icon
+     */
+    color = 'gray';
+    /**
+     * The style variant (outlined or filled)
+     */
+    iconStyle = 'outlined';
+    /**
+     * The Material Symbol icon name
+     */
+    icon = 'star';
+    render() {
+        const containerClasses = {
+            'featured-icon': true,
+            [`featured-icon-${this.size}`]: true,
+            [`featured-icon-${this.color}`]: true,
+            [`featured-icon-${this.iconStyle}`]: true,
+        };
+        const iconClasses = `material-symbols-outlined icon-${this.size}`;
+        return (h("div", { key: 'f28b347b9594d65de9d253da980bd43da0d02055', class: containerClasses, part: "container" }, h("span", { key: '9986022247eb8e6f3cde419b22d5f277796386f3', class: iconClasses }, this.icon)));
+    }
+    static get is() { return "bh-featured-icon"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bh-featured-icon.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bh-featured-icon.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "FeaturedIconSize",
+                    "resolved": "\"lg\" | \"md\" | \"sm\" | \"xl\"",
+                    "references": {
+                        "FeaturedIconSize": {
+                            "location": "local",
+                            "path": "/home/runner/work/bellhopos/bellhopos/packages/bellhop-core/src/components/bh-featured-icon/bh-featured-icon.tsx",
+                            "id": "src/components/bh-featured-icon/bh-featured-icon.tsx::FeaturedIconSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The size of the featured icon"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "'md'"
+            },
+            "color": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "FeaturedIconColor",
+                    "resolved": "\"brand\" | \"error\" | \"gray\" | \"highlight\" | \"success\" | \"warning\"",
+                    "references": {
+                        "FeaturedIconColor": {
+                            "location": "local",
+                            "path": "/home/runner/work/bellhopos/bellhopos/packages/bellhop-core/src/components/bh-featured-icon/bh-featured-icon.tsx",
+                            "id": "src/components/bh-featured-icon/bh-featured-icon.tsx::FeaturedIconColor"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The color theme of the featured icon"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "color",
+                "defaultValue": "'gray'"
+            },
+            "iconStyle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "FeaturedIconStyle",
+                    "resolved": "\"filled\" | \"outlined\"",
+                    "references": {
+                        "FeaturedIconStyle": {
+                            "location": "local",
+                            "path": "/home/runner/work/bellhopos/bellhopos/packages/bellhop-core/src/components/bh-featured-icon/bh-featured-icon.tsx",
+                            "id": "src/components/bh-featured-icon/bh-featured-icon.tsx::FeaturedIconStyle"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The style variant (outlined or filled)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon-style",
+                "defaultValue": "'outlined'"
+            },
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The Material Symbol icon name"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon",
+                "defaultValue": "'star'"
+            }
+        };
+    }
+}
+//# sourceMappingURL=bh-featured-icon.js.map

package/collection/components/bh-featured-icon/bh-featured-icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bh-featured-icon.js","sourceRoot":"","sources":["../../../src/components/bh-featured-icon/bh-featured-icon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAWnD,MAAM,OAAO,cAAc;IACzB;;OAEG;IACK,IAAI,GAAqB,IAAI,CAAC;IAEtC;;OAEG;IACK,KAAK,GAAsB,MAAM,CAAC;IAE1C;;OAEG;IACK,SAAS,GAAsB,UAAU,CAAC;IAElD;;OAEG;IACK,IAAI,GAAW,MAAM,CAAC;IAE9B,MAAM;QACJ,MAAM,gBAAgB,GAAG;YACvB,eAAe,EAAE,IAAI;YACrB,CAAC,iBAAiB,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,IAAI;YACpC,CAAC,iBAAiB,IAAI,CAAC,KAAK,EAAE,CAAC,EAAE,IAAI;YACrC,CAAC,iBAAiB,IAAI,CAAC,SAAS,EAAE,CAAC,EAAE,IAAI;SAC1C,CAAC;QAEF,MAAM,WAAW,GAAG,kCAAkC,IAAI,CAAC,IAAI,EAAE,CAAC;QAElE,OAAO,CACL,4DAAK,KAAK,EAAE,gBAAgB,EAAE,IAAI,EAAC,WAAW;YAC5C,6DAAM,KAAK,EAAE,WAAW,IAAG,IAAI,CAAC,IAAI,CAAQ,CACxC,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h } from '@stencil/core';\n\nexport type FeaturedIconSize = 'sm' | 'md' | 'lg' | 'xl';\nexport type FeaturedIconColor = 'brand' | 'gray' | 'error' | 'warning' | 'success' | 'highlight';\nexport type FeaturedIconStyle = 'outlined' | 'filled';\n\n@Component({\n  tag: 'bh-featured-icon',\n  styleUrl: 'bh-featured-icon.css',\n  shadow: true,\n})\nexport class BhFeaturedIcon {\n  /**\n   * The size of the featured icon\n   */\n  @Prop() size: FeaturedIconSize = 'md';\n\n  /**\n   * The color theme of the featured icon\n   */\n  @Prop() color: FeaturedIconColor = 'gray';\n\n  /**\n   * The style variant (outlined or filled)\n   */\n  @Prop() iconStyle: FeaturedIconStyle = 'outlined';\n\n  /**\n   * The Material Symbol icon name\n   */\n  @Prop() icon: string = 'star';\n\n  render() {\n    const containerClasses = {\n      'featured-icon': true,\n      [`featured-icon-${this.size}`]: true,\n      [`featured-icon-${this.color}`]: true,\n      [`featured-icon-${this.iconStyle}`]: true,\n    };\n\n    const iconClasses = `material-symbols-outlined icon-${this.size}`;\n\n    return (\n      <div class={containerClasses} part=\"container\">\n        <span class={iconClasses}>{this.icon}</span>\n      </div>\n    );\n  }\n}\n"]}