@actabldesign/bellhop-core 0.0.3 → 0.0.4

package/dist/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: '93ed57fa603fa36d0eb2ddcfa83895f3b5969083', class: containerClasses, part: "container" }, h("span", { key: '5dd3699dba085ab2e9b8a2d76318edae8e1b8cba', 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": "/Users/brunabites/localsites/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": "/Users/brunabites/localsites/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": "/Users/brunabites/localsites/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/dist/collection/components/bh-illustrations/bh-illustrations.css

@@ -0,0 +1,328 @@
+/**
+ * Bellhop Stencil Global Styles
+ *
+ * This file imports all design tokens and provides global CSS custom properties
+ * that are available to all Stencil components.
+ */
+
+/* ==========================================================================
+   FONT IMPORTS
+   ========================================================================== */
+
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=swap');
+
+/* ==========================================================================
+   DESIGN TOKENS
+   ========================================================================== */
+
+:root {
+  /* -------------------------------------------------------------------------
+     COLORS - Primary
+     ------------------------------------------------------------------------- */
+  --color-white: hsl(0, 0%, 100%);
+  --color-black: hsl(0, 0%, 0%);
+  --color-transparent: hsla(0, 0%, 100%, 0);
+
+  /* Neutral */
+  --color-neutral-25: hsl(240, 20%, 99%);
+  --color-neutral-50: hsl(240, 20%, 98%);
+  --color-neutral-100: hsl(240, 17%, 95%);
+  --color-neutral-200: hsl(227, 25%, 89%);
+  --color-neutral-300: hsl(224, 24%, 78%);
+  --color-neutral-400: hsl(226, 24%, 59%);
+  --color-neutral-500: hsl(226, 24%, 48%);
+  --color-neutral-600: hsl(226, 24%, 38%);
+  --color-neutral-700: hsl(226, 24%, 25%);
+  --color-neutral-800: hsl(233, 33%, 10%);
+  --color-neutral-900: hsl(231, 32%, 8%);
+  --color-neutral-950: hsl(231, 32%, 8%);
+
+  /* Brand */
+  --color-brand-25: hsl(220, 82%, 98%);
+  --color-brand-50: hsl(222, 87%, 97%);
+  --color-brand-100: hsl(221, 94%, 94%);
+  --color-brand-200: hsl(221, 92%, 86%);
+  --color-brand-300: hsl(224, 95%, 77%);
+  --color-brand-400: hsl(224, 94%, 72%);
+  --color-brand-500: hsl(230, 67%, 58%);
+  --color-brand-600: hsl(230, 69%, 48%);
+  --color-brand-700: hsl(230, 75%, 34%);
+  --color-brand-800: hsl(243, 86%, 44%);
+  --color-brand-900: hsl(237, 69%, 24%);
+  --color-brand-950: hsl(237, 61%, 20%);
+
+  /* Error */
+  --color-error-25: hsl(12, 100%, 99%);
+  --color-error-50: hsl(5, 86%, 97%);
+  --color-error-100: hsl(4, 93%, 94%);
+  --color-error-200: hsl(3, 96%, 89%);
+  --color-error-300: hsl(4, 96%, 80%);
+  --color-error-400: hsl(4, 92%, 69%);
+  --color-error-500: hsl(4, 86%, 58%);
+  --color-error-600: hsl(4, 74%, 49%);
+  --color-error-700: hsl(4, 76%, 40%);
+  --color-error-800: hsl(4, 72%, 33%);
+  --color-error-900: hsl(8, 65%, 29%);
+  --color-error-950: hsl(8, 75%, 19%);
+
+  /* Warning */
+  --color-warning-25: hsl(42, 100%, 98%);
+  --color-warning-50: hsl(45, 100%, 96%);
+  --color-warning-100: hsl(45, 96%, 89%);
+  --color-warning-200: hsl(44, 98%, 77%);
+  --color-warning-300: hsl(42, 99%, 65%);
+  --color-warning-400: hsl(39, 98%, 56%);
+  --color-warning-500: hsl(34, 94%, 50%);
+  --color-warning-600: hsl(28, 97%, 44%);
+  --color-warning-700: hsl(22, 92%, 37%);
+  --color-warning-800: hsl(19, 84%, 31%);
+  --color-warning-900: hsl(18, 79%, 27%);
+  --color-warning-950: hsl(17, 79%, 17%);
+
+  /* Success */
+  --color-success-25: hsl(142, 80%, 98%);
+  --color-success-50: hsl(145, 81%, 96%);
+  --color-success-100: hsl(140, 80%, 90%);
+  --color-success-200: hsl(144, 78%, 80%);
+  --color-success-300: hsl(148, 63%, 67%);
+  --color-success-400: hsl(150, 57%, 54%);
+  --color-success-500: hsl(152, 77%, 39%);
+  --color-success-600: hsl(153, 91%, 30%);
+  --color-success-700: hsl(155, 90%, 24%);
+  --color-success-800: hsl(155, 84%, 20%);
+  --color-success-900: hsl(156, 83%, 16%);
+  --color-success-950: hsl(157, 82%, 11%);
+
+  /* -------------------------------------------------------------------------
+     TYPOGRAPHY
+     ------------------------------------------------------------------------- */
+  --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI',
+    Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
+  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+    'Liberation Mono', 'Courier New', monospace;
+
+  /* Weights */
+  --weight-regular: 400;
+  --weight-medium: 500;
+  --weight-semibold: 600;
+  --weight-bold: 700;
+
+  /* Text Sizes */
+  --text-xl-size: 1.25rem;
+  --text-lg-size: 1.125rem;
+  --text-md-size: 1rem;
+  --text-sm-size: 0.875rem;
+  --text-xs-size: 0.75rem;
+
+  /* Line Heights */
+  --text-xl-line: 1.875rem;
+  --text-lg-line: 1.75rem;
+  --text-md-line: 1.5rem;
+  --text-sm-line: 1.25rem;
+  --text-xs-line: 1.125rem;
+
+  /* -------------------------------------------------------------------------
+     SPACING
+     ------------------------------------------------------------------------- */
+  --spacing-none: 0rem;
+  --spacing-xxs: 0.125rem;
+  --spacing-xs: 0.25rem;
+  --spacing-sm: 0.375rem;
+  --spacing-md: 0.5rem;
+  --spacing-lg: 0.75rem;
+  --spacing-xl: 1rem;
+  --spacing-2xl: 1.25rem;
+  --spacing-3xl: 1.5rem;
+  --spacing-4xl: 2rem;
+  --spacing-5xl: 2.5rem;
+  --spacing-6xl: 3rem;
+
+  /* -------------------------------------------------------------------------
+     RADIUS
+     ------------------------------------------------------------------------- */
+  --radius-none: 0rem;
+  --radius-xxs: 0.125rem;
+  --radius-xs: 0.25rem;
+  --radius-sm: 0.375rem;
+  --radius-md: 0.5rem;
+  --radius-lg: 0.625rem;
+  --radius-xl: 0.75rem;
+  --radius-2xl: 1rem;
+  --radius-3xl: 1.25rem;
+  --radius-4xl: 1.5rem;
+  --radius-full: 9999px;
+
+  /* -------------------------------------------------------------------------
+     SHADOWS
+     ------------------------------------------------------------------------- */
+  --shadow-xs: 0px 1px 2px rgba(16, 24, 40, 0.05);
+  --shadow-sm: 0px 1px 3px rgba(16, 24, 40, 0.1),
+    0px 1px 2px rgba(16, 24, 40, 0.06);
+  --shadow-md: 0px 4px 8px -2px rgba(16, 24, 40, 0.1),
+    0px 2px 4px -2px rgba(16, 24, 40, 0.06);
+  --shadow-lg: 0px 12px 16px -4px rgba(16, 24, 40, 0.08),
+    0px 4px 6px -2px rgba(16, 24, 40, 0.03);
+  --shadow-xl: 0px 20px 24px -4px rgba(16, 24, 40, 0.08),
+    0px 8px 8px -4px rgba(16, 24, 40, 0.03);
+
+  /* -------------------------------------------------------------------------
+     ICON COMPENSATION (for buttons with icons)
+     ------------------------------------------------------------------------- */
+  --icon-compensation-xs-btn: calc(var(--spacing-lg) - var(--spacing-xs));
+  --icon-compensation-sm-btn: calc(var(--spacing-xl) - var(--spacing-xs));
+  --icon-compensation-md-btn: calc(var(--spacing-xl) - var(--spacing-xs));
+  --icon-compensation-lg-btn: calc(var(--spacing-xl) - var(--spacing-xs));
+}
+
+/* ==========================================================================
+   BASE STYLES
+   ========================================================================== */
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+/* Material Symbols base styling */
+.material-symbols-outlined {
+  font-family: 'Material Symbols Outlined';
+  font-weight: normal;
+  font-style: normal;
+  font-size: 24px;
+  line-height: 1;
+  letter-spacing: normal;
+  text-transform: none;
+  display: inline-block;
+  white-space: nowrap;
+  word-wrap: normal;
+  direction: ltr;
+  font-feature-settings: 'liga';
+  -webkit-font-feature-settings: 'liga';
+  -webkit-font-smoothing: antialiased;
+}
+
+
+:host {
+  display: inline-flex;
+}
+
+/* Base Illustration Styles */
+.illustration {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+}
+
+.illustration-wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--spacing-3xl);
+}
+
+/* SVG Container */
+.illustration-svg-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+}
+
+.illustration-image {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
+/* Content Styles */
+.illustration-content {
+  text-align: center;
+  max-width: 480px;
+}
+
+.illustration-title {
+  font-family: var(--font-inter);
+  font-size: var(--text-lg-size);
+  font-weight: var(--weight-semibold);
+  line-height: var(--text-lg-line);
+  color: var(--color-neutral-900);
+  margin: 0 0 var(--spacing-md) 0;
+}
+
+.illustration-description {
+  font-family: var(--font-inter);
+  font-size: var(--text-md-size);
+  font-weight: var(--weight-regular);
+  line-height: var(--text-md-line);
+  color: var(--color-neutral-600);
+  margin: 0;
+}
+
+/* Size Variations */
+.illustration-sm .illustration-svg-container {
+  width: 80px;
+  height: 80px;
+}
+
+.illustration-md .illustration-svg-container {
+  width: 120px;
+  height: 120px;
+}
+
+.illustration-lg .illustration-svg-container {
+  width: 160px;
+  height: 160px;
+}
+
+.illustration-xl .illustration-svg-container {
+  width: 200px;
+  height: 200px;
+}
+
+.illustration-2xl .illustration-svg-container {
+  width: 240px;
+  height: 240px;
+}
+
+.illustration-3xl .illustration-svg-container {
+  width: 280px;
+  height: 280px;
+}
+
+.illustration-4xl .illustration-svg-container {
+  width: 320px;
+  height: 320px;
+}
+
+/* Responsive Styles */
+@media (max-width: 768px) {
+  .illustration-4xl .illustration-svg-container {
+    width: 400px;
+    height: 400px;
+  }
+
+  .illustration-3xl .illustration-svg-container {
+    width: 320px;
+    height: 320px;
+  }
+
+  .illustration-content {
+    max-width: 320px;
+  }
+}
+
+@media (max-width: 480px) {
+  .illustration-4xl .illustration-svg-container,
+  .illustration-3xl .illustration-svg-container {
+    width: 280px;
+    height: 280px;
+  }
+
+  .illustration-2xl .illustration-svg-container {
+    width: 240px;
+    height: 240px;
+  }
+}

package/dist/collection/components/bh-illustrations/bh-illustrations.js

@@ -0,0 +1,174 @@
+import { h, Host } from "@stencil/core";
+export class BhIllustrations {
+    /**
+     * Size of the illustration
+     */
+    size = 'lg';
+    /**
+     * Title text to display below the illustration
+     */
+    illustrationTitle;
+    /**
+     * Description text to display below the title
+     */
+    description;
+    /**
+     * Path to the SVG illustration
+     */
+    svgPath = '/illustrations/Search-not-found.svg';
+    /**
+     * Alt text for the illustration image
+     */
+    alt = 'Illustration';
+    getSvgDimensions() {
+        switch (this.size) {
+            case 'sm':
+                return { width: 120, height: 120 };
+            case 'md':
+                return { width: 160, height: 160 };
+            case 'lg':
+                return { width: 200, height: 200 };
+            case 'xl':
+                return { width: 280, height: 280 };
+            case '2xl':
+                return { width: 360, height: 360 };
+            case '3xl':
+                return { width: 480, height: 480 };
+            case '4xl':
+                return { width: 600, height: 600 };
+            default:
+                return { width: 200, height: 200 };
+        }
+    }
+    render() {
+        const dimensions = this.getSvgDimensions();
+        return (h(Host, { key: '3de29d491a6ca150687d9ee0aaaac249d60cc966' }, h("div", { key: '03fe38b304e4f6f33018e29e3049ba32adc0dc5d', class: `illustration illustration-${this.size}` }, h("div", { key: '49ccf2fd59aee6ed12ae6a341732b98dbc39f60e', class: "illustration-wrapper" }, h("div", { key: '0f16a287aa62f2c0f44b08b92434c4495d140c56', class: "illustration-svg-container", style: {
+                width: `${dimensions.width}px`,
+                height: `${dimensions.height}px`,
+            } }, h("img", { key: '1452a2a5215e1392bea453a1e06590e66c070370', src: this.svgPath, alt: this.alt, style: {
+                width: `${dimensions.width}px`,
+                height: `${dimensions.height}px`,
+            }, class: "illustration-image" })), (this.illustrationTitle || this.description) && (h("div", { key: '5d57a72b5fa2537061212a20182a4b8802435ca9', class: "illustration-content" }, this.illustrationTitle && (h("h3", { key: '32e360bc3e5f033004a02e72f588066324a50781', class: "illustration-title" }, this.illustrationTitle)), this.description && (h("p", { key: '32b2d8ea6272362145e5de4ea6077f5ca6fb2373', class: "illustration-description" }, this.description))))))));
+    }
+    static get is() { return "bh-illustrations"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bh-illustrations.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bh-illustrations.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IllustrationSize",
+                    "resolved": "\"2xl\" | \"3xl\" | \"4xl\" | \"lg\" | \"md\" | \"sm\" | \"xl\"",
+                    "references": {
+                        "IllustrationSize": {
+                            "location": "local",
+                            "path": "/Users/brunabites/localsites/bellhopOS/packages/bellhop-core/src/components/bh-illustrations/bh-illustrations.tsx",
+                            "id": "src/components/bh-illustrations/bh-illustrations.tsx::IllustrationSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Size of the illustration"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "'lg'"
+            },
+            "illustrationTitle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Title text to display below the illustration"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "illustration-title"
+            },
+            "description": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Description text to display below the title"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "description"
+            },
+            "svgPath": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Path to the SVG illustration"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "svg-path",
+                "defaultValue": "'/illustrations/Search-not-found.svg'"
+            },
+            "alt": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Alt text for the illustration image"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "alt",
+                "defaultValue": "'Illustration'"
+            }
+        };
+    }
+}
+//# sourceMappingURL=bh-illustrations.js.map