@actabldesign/bellhop-core 0.0.3

package/collection/components/bh-bar-chart/bh-bar-chart.js

@@ -0,0 +1,316 @@
+import { h, Host } from "@stencil/core";
+const DEFAULT_COLORS = [
+    'var(--color-brand-600)',
+    'var(--color-orange-500)',
+    'var(--color-success-500)',
+    'var(--color-purple-600)',
+    'var(--color-accent-500)',
+    'var(--color-teal-500)',
+    'var(--color-lime-500)',
+    'var(--color-amber-500)',
+];
+export class BhBarChart {
+    /**
+     * Chart data
+     */
+    data = {
+        series: [
+            { name: 'Series 1', values: [30, 45, 20, 35, 50, 40, 60, 35, 25, 55, 40], color: '#94a3b8' },
+            { name: 'Series 2', values: [20, 25, 40, 30, 35, 45, 25, 30, 40, 20, 50], color: '#2563eb' },
+            { name: 'Series 3', values: [25, 15, 35, 20, 15, 20, 30, 25, 30, 35, 25], color: '#7c3aed' },
+        ],
+    };
+    /**
+     * Chart type: simple or stacked
+     */
+    type = 'stacked';
+    /**
+     * Chart orientation: vertical or horizontal
+     */
+    orientation = 'vertical';
+    /**
+     * Whether to animate the chart
+     */
+    animated = true;
+    /**
+     * Maximum height for vertical bars
+     */
+    maxHeight = 150;
+    /**
+     * Maximum width for horizontal bars
+     */
+    maxWidth = 200;
+    tooltipVisible = false;
+    tooltipX = 0;
+    tooltipY = 0;
+    tooltipHeader = '';
+    tooltipItems = [];
+    tooltipTotal = '';
+    showTooltipTotal = false;
+    processData() {
+        if (!this.data.series?.length || !this.data.series[0].values.length) {
+            return [];
+        }
+        const bars = [];
+        if (this.type === 'simple') {
+            const values = this.data.series[0].values;
+            const maxValue = Math.max(...values);
+            for (let i = 0; i < values.length; i++) {
+                const value = values[i] || 0;
+                const segments = [];
+                if (value > 0) {
+                    const height = (value / maxValue) * this.maxHeight;
+                    const width = (value / maxValue) * this.maxWidth;
+                    segments.push({
+                        value,
+                        height,
+                        width,
+                        color: DEFAULT_COLORS[i % DEFAULT_COLORS.length],
+                        seriesName: this.data.categories?.[i] || `Bar ${i + 1}`,
+                    });
+                }
+                bars.push({
+                    segments,
+                    totalValue: value,
+                    category: this.data.categories?.[i],
+                });
+            }
+        }
+        else {
+            const numBars = this.data.series[0].values.length;
+            const maxTotal = Math.max(...Array.from({ length: numBars }, (_, i) => this.data.series.reduce((sum, series) => sum + (series.values[i] || 0), 0)));
+            for (let barIndex = 0; barIndex < numBars; barIndex++) {
+                const segments = [];
+                let totalValue = 0;
+                for (const series of this.data.series) {
+                    const value = series.values[barIndex] || 0;
+                    totalValue += value;
+                    if (value > 0) {
+                        const height = (value / maxTotal) * this.maxHeight;
+                        const width = (value / maxTotal) * this.maxWidth;
+                        segments.push({
+                            value,
+                            height,
+                            width,
+                            color: series.color || '#64748b',
+                            seriesName: series.name,
+                        });
+                    }
+                }
+                bars.push({
+                    segments,
+                    totalValue,
+                    category: this.data.categories?.[barIndex],
+                });
+            }
+        }
+        return bars;
+    }
+    handleColumnHover = (event, bar, columnIndex) => {
+        this.tooltipVisible = true;
+        this.tooltipX = event.clientX;
+        this.tooltipY = event.clientY;
+        this.tooltipHeader = bar.category || `Column ${columnIndex + 1}`;
+        const items = [];
+        bar.segments.forEach((segment) => {
+            if (segment.seriesName && segment.value > 0) {
+                items.push({
+                    color: segment.color,
+                    label: segment.seriesName,
+                    value: segment.value.toString(),
+                });
+            }
+        });
+        this.tooltipItems = items;
+        this.tooltipTotal = bar.totalValue.toString();
+        this.showTooltipTotal = items.length > 1;
+    };
+    handleColumnMove = (event) => {
+        if (this.tooltipVisible) {
+            this.tooltipX = event.clientX;
+            this.tooltipY = event.clientY;
+        }
+    };
+    handleColumnLeave = () => {
+        this.tooltipVisible = false;
+    };
+    render() {
+        const processedData = this.processData();
+        return (h(Host, { key: 'f851ed646c231a9c1c8e6757d0a46e2d9363f942' }, h("div", { key: 'c306d4f127c52ec87b0b470286491d928b6b6337', class: {
+                'bar-chart': true,
+                [this.type]: true,
+                [this.orientation]: true,
+                'bar-chart-animated': this.animated,
+            } }, this.orientation === 'vertical' ? (h("div", { class: "vertical-container" }, processedData.map((bar, i) => (h("div", { key: i, class: "bar-column vertical", onMouseEnter: (e) => this.handleColumnHover(e, bar, i), onMouseMove: this.handleColumnMove, onMouseLeave: this.handleColumnLeave }, bar.segments.map((segment, segIndex) => (h("div", { key: segIndex, class: "bar-segment vertical", style: {
+                height: `${segment.height}px`,
+                backgroundColor: segment.color,
+            } })))))))) : (h("div", { class: "horizontal-container" }, processedData.map((bar, i) => (h("div", { key: i, class: "bar-row horizontal", onMouseEnter: (e) => this.handleColumnHover(e, bar, i), onMouseMove: this.handleColumnMove, onMouseLeave: this.handleColumnLeave }, bar.segments.map((segment, segIndex) => (h("div", { key: segIndex, class: "bar-segment horizontal", style: {
+                width: `${(segment.value / bar.totalValue) * 100}%`,
+                backgroundColor: segment.color,
+            } }))))))))), h("bh-chart-tooltip", { key: '765ff842c48a11ec414615846f6404b642b29933', visible: this.tooltipVisible, x: this.tooltipX, y: this.tooltipY, header: this.tooltipHeader, items: this.tooltipItems, total: this.tooltipTotal, showTotal: this.showTooltipTotal })));
+    }
+    static get is() { return "bh-bar-chart"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bh-bar-chart.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bh-bar-chart.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "data": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "BarChartData",
+                    "resolved": "BarChartData",
+                    "references": {
+                        "BarChartData": {
+                            "location": "local",
+                            "path": "/home/runner/work/bellhopos/bellhopos/packages/bellhop-core/src/components/bh-bar-chart/bh-bar-chart.tsx",
+                            "id": "src/components/bh-bar-chart/bh-bar-chart.tsx::BarChartData"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Chart data"
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "{\n    series: [\n      { name: 'Series 1', values: [30, 45, 20, 35, 50, 40, 60, 35, 25, 55, 40], color: '#94a3b8' },\n      { name: 'Series 2', values: [20, 25, 40, 30, 35, 45, 25, 30, 40, 20, 50], color: '#2563eb' },\n      { name: 'Series 3', values: [25, 15, 35, 20, 15, 20, 30, 25, 30, 35, 25], color: '#7c3aed' },\n    ],\n  }"
+            },
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BarChartType",
+                    "resolved": "\"simple\" | \"stacked\"",
+                    "references": {
+                        "BarChartType": {
+                            "location": "local",
+                            "path": "/home/runner/work/bellhopos/bellhopos/packages/bellhop-core/src/components/bh-bar-chart/bh-bar-chart.tsx",
+                            "id": "src/components/bh-bar-chart/bh-bar-chart.tsx::BarChartType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Chart type: simple or stacked"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "type",
+                "defaultValue": "'stacked'"
+            },
+            "orientation": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BarChartOrientation",
+                    "resolved": "\"horizontal\" | \"vertical\"",
+                    "references": {
+                        "BarChartOrientation": {
+                            "location": "local",
+                            "path": "/home/runner/work/bellhopos/bellhopos/packages/bellhop-core/src/components/bh-bar-chart/bh-bar-chart.tsx",
+                            "id": "src/components/bh-bar-chart/bh-bar-chart.tsx::BarChartOrientation"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Chart orientation: vertical or horizontal"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "orientation",
+                "defaultValue": "'vertical'"
+            },
+            "animated": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to animate the chart"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "animated",
+                "defaultValue": "true"
+            },
+            "maxHeight": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Maximum height for vertical bars"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max-height",
+                "defaultValue": "150"
+            },
+            "maxWidth": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Maximum width for horizontal bars"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max-width",
+                "defaultValue": "200"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "tooltipVisible": {},
+            "tooltipX": {},
+            "tooltipY": {},
+            "tooltipHeader": {},
+            "tooltipItems": {},
+            "tooltipTotal": {},
+            "showTooltipTotal": {}
+        };
+    }
+}
+//# sourceMappingURL=bh-bar-chart.js.map

package/collection/components/bh-bar-chart/bh-bar-chart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bh-bar-chart.js","sourceRoot":"","sources":["../../../src/components/bh-bar-chart/bh-bar-chart.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, State, h, Host } from '@stencil/core';\nimport type { TooltipItem } from '../bh-chart-tooltip/bh-chart-tooltip';\n\nexport type BarChartType = 'simple' | 'stacked';\nexport type BarChartOrientation = 'vertical' | 'horizontal';\n\nexport interface BarChartSeries {\n  name: string;\n  values: number[];\n  color?: string;\n}\n\nexport interface BarChartData {\n  series: BarChartSeries[];\n  categories?: string[];\n}\n\ninterface BarSegment {\n  value: number;\n  height: number;\n  width: number;\n  color: string;\n  seriesName?: string;\n}\n\ninterface ProcessedBar {\n  segments: BarSegment[];\n  totalValue: number;\n  category?: string;\n}\n\nconst DEFAULT_COLORS = [\n  'var(--color-brand-600)',\n  'var(--color-orange-500)',\n  'var(--color-success-500)',\n  'var(--color-purple-600)',\n  'var(--color-accent-500)',\n  'var(--color-teal-500)',\n  'var(--color-lime-500)',\n  'var(--color-amber-500)',\n];\n\n@Component({\n  tag: 'bh-bar-chart',\n  styleUrl: 'bh-bar-chart.css',\n  shadow: true,\n})\nexport class BhBarChart {\n  /**\n   * Chart data\n   */\n  @Prop() data: BarChartData = {\n    series: [\n      { name: 'Series 1', values: [30, 45, 20, 35, 50, 40, 60, 35, 25, 55, 40], color: '#94a3b8' },\n      { name: 'Series 2', values: [20, 25, 40, 30, 35, 45, 25, 30, 40, 20, 50], color: '#2563eb' },\n      { name: 'Series 3', values: [25, 15, 35, 20, 15, 20, 30, 25, 30, 35, 25], color: '#7c3aed' },\n    ],\n  };\n\n  /**\n   * Chart type: simple or stacked\n   */\n  @Prop() type: BarChartType = 'stacked';\n\n  /**\n   * Chart orientation: vertical or horizontal\n   */\n  @Prop() orientation: BarChartOrientation = 'vertical';\n\n  /**\n   * Whether to animate the chart\n   */\n  @Prop() animated: boolean = true;\n\n  /**\n   * Maximum height for vertical bars\n   */\n  @Prop() maxHeight: number = 150;\n\n  /**\n   * Maximum width for horizontal bars\n   */\n  @Prop() maxWidth: number = 200;\n\n  @State() tooltipVisible: boolean = false;\n  @State() tooltipX: number = 0;\n  @State() tooltipY: number = 0;\n  @State() tooltipHeader: string = '';\n  @State() tooltipItems: TooltipItem[] = [];\n  @State() tooltipTotal: string = '';\n  @State() showTooltipTotal: boolean = false;\n\n  private processData(): ProcessedBar[] {\n    if (!this.data.series?.length || !this.data.series[0].values.length) {\n      return [];\n    }\n\n    const bars: ProcessedBar[] = [];\n\n    if (this.type === 'simple') {\n      const values = this.data.series[0].values;\n      const maxValue = Math.max(...values);\n\n      for (let i = 0; i < values.length; i++) {\n        const value = values[i] || 0;\n        const segments: BarSegment[] = [];\n\n        if (value > 0) {\n          const height = (value / maxValue) * this.maxHeight;\n          const width = (value / maxValue) * this.maxWidth;\n          segments.push({\n            value,\n            height,\n            width,\n            color: DEFAULT_COLORS[i % DEFAULT_COLORS.length],\n            seriesName: this.data.categories?.[i] || `Bar ${i + 1}`,\n          });\n        }\n\n        bars.push({\n          segments,\n          totalValue: value,\n          category: this.data.categories?.[i],\n        });\n      }\n    } else {\n      const numBars = this.data.series[0].values.length;\n      const maxTotal = Math.max(\n        ...Array.from({ length: numBars }, (_, i) =>\n          this.data.series.reduce((sum, series) => sum + (series.values[i] || 0), 0)\n        )\n      );\n\n      for (let barIndex = 0; barIndex < numBars; barIndex++) {\n        const segments: BarSegment[] = [];\n        let totalValue = 0;\n\n        for (const series of this.data.series) {\n          const value = series.values[barIndex] || 0;\n          totalValue += value;\n\n          if (value > 0) {\n            const height = (value / maxTotal) * this.maxHeight;\n            const width = (value / maxTotal) * this.maxWidth;\n            segments.push({\n              value,\n              height,\n              width,\n              color: series.color || '#64748b',\n              seriesName: series.name,\n            });\n          }\n        }\n\n        bars.push({\n          segments,\n          totalValue,\n          category: this.data.categories?.[barIndex],\n        });\n      }\n    }\n\n    return bars;\n  }\n\n  private handleColumnHover = (event: MouseEvent, bar: ProcessedBar, columnIndex: number) => {\n    this.tooltipVisible = true;\n    this.tooltipX = event.clientX;\n    this.tooltipY = event.clientY;\n    this.tooltipHeader = bar.category || `Column ${columnIndex + 1}`;\n\n    const items: TooltipItem[] = [];\n    bar.segments.forEach((segment) => {\n      if (segment.seriesName && segment.value > 0) {\n        items.push({\n          color: segment.color,\n          label: segment.seriesName,\n          value: segment.value.toString(),\n        });\n      }\n    });\n\n    this.tooltipItems = items;\n    this.tooltipTotal = bar.totalValue.toString();\n    this.showTooltipTotal = items.length > 1;\n  };\n\n  private handleColumnMove = (event: MouseEvent) => {\n    if (this.tooltipVisible) {\n      this.tooltipX = event.clientX;\n      this.tooltipY = event.clientY;\n    }\n  };\n\n  private handleColumnLeave = () => {\n    this.tooltipVisible = false;\n  };\n\n  render() {\n    const processedData = this.processData();\n\n    return (\n      <Host>\n        <div\n          class={{\n            'bar-chart': true,\n            [this.type]: true,\n            [this.orientation]: true,\n            'bar-chart-animated': this.animated,\n          }}\n        >\n          {this.orientation === 'vertical' ? (\n            <div class=\"vertical-container\">\n              {processedData.map((bar, i) => (\n                <div\n                  key={i}\n                  class=\"bar-column vertical\"\n                  onMouseEnter={(e) => this.handleColumnHover(e, bar, i)}\n                  onMouseMove={this.handleColumnMove}\n                  onMouseLeave={this.handleColumnLeave}\n                >\n                  {bar.segments.map((segment, segIndex) => (\n                    <div\n                      key={segIndex}\n                      class=\"bar-segment vertical\"\n                      style={{\n                        height: `${segment.height}px`,\n                        backgroundColor: segment.color,\n                      }}\n                    />\n                  ))}\n                </div>\n              ))}\n            </div>\n          ) : (\n            <div class=\"horizontal-container\">\n              {processedData.map((bar, i) => (\n                <div\n                  key={i}\n                  class=\"bar-row horizontal\"\n                  onMouseEnter={(e) => this.handleColumnHover(e, bar, i)}\n                  onMouseMove={this.handleColumnMove}\n                  onMouseLeave={this.handleColumnLeave}\n                >\n                  {bar.segments.map((segment, segIndex) => (\n                    <div\n                      key={segIndex}\n                      class=\"bar-segment horizontal\"\n                      style={{\n                        width: `${(segment.value / bar.totalValue) * 100}%`,\n                        backgroundColor: segment.color,\n                      }}\n                    />\n                  ))}\n                </div>\n              ))}\n            </div>\n          )}\n        </div>\n\n        <bh-chart-tooltip\n          visible={this.tooltipVisible}\n          x={this.tooltipX}\n          y={this.tooltipY}\n          header={this.tooltipHeader}\n          items={this.tooltipItems}\n          total={this.tooltipTotal}\n          showTotal={this.showTooltipTotal}\n        />\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,158 @@
+:host {
+  display: block;
+}
+
+/* Breadcrumbs Navigation - Matching Figma Design */
+.breadcrumbs {
+  font-family: var(--font-inter);
+  user-select: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+}
+
+.breadcrumbs-container {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  flex-wrap: wrap;
+}
+
+.breadcrumb-item {
+  display: flex;
+  align-items: center;
+}
+
+/* Breadcrumb Buttons - Matching Figma Design */
+.breadcrumb-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--spacing-xs) var(--spacing-sm);
+  border: none;
+  background: transparent;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all 0.15s ease;
+  color: var(--color-neutral-600);
+  text-decoration: none;
+  font-family: var(--font-inter);
+  font-size: var(--text-sm-size);
+  font-weight: 500;
+  line-height: 1.4285714285714286em;
+  min-height: 24px;
+  box-sizing: border-box;
+}
+
+.breadcrumb-button:hover {
+  background-color: var(--color-neutral-50);
+  color: var(--color-neutral-900);
+}
+
+.breadcrumb-button:focus-visible {
+  outline: 2px solid var(--color-brand-500);
+  outline-offset: 2px;
+}
+
+/* Home button styling */
+.breadcrumb-home {
+  padding: var(--spacing-xs);
+  min-width: 24px;
+  min-height: 24px;
+}
+
+/* Current/Active breadcrumb item - Matching Figma highlighted state */
+.breadcrumb-current {
+  background-color: var(--color-neutral-50);
+  color: var(--color-neutral-800);
+  font-weight: 500;
+  cursor: default;
+}
+
+.breadcrumb-current:hover {
+  background-color: var(--color-neutral-50);
+  color: var(--color-neutral-800);
+}
+
+/* Ellipsis button */
+.breadcrumb-ellipsis {
+  color: var(--color-neutral-600);
+  font-weight: 500;
+}
+
+.breadcrumb-ellipsis:hover {
+  background-color: var(--color-neutral-50);
+  color: var(--color-neutral-900);
+}
+
+/* Breadcrumb text */
+.breadcrumb-text {
+  white-space: nowrap;
+  max-width: 200px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* Breadcrumb icons */
+.breadcrumb-icon {
+  flex-shrink: 0;
+  font-size: 20px;
+  width: 20px;
+  height: 20px;
+  color: var(--color-neutral-600);
+}
+
+.breadcrumb-home .breadcrumb-icon {
+  font-size: 20px;
+  width: 20px;
+  height: 20px;
+}
+
+/* Separators - Matching Figma chevron color */
+.breadcrumb-separator {
+  display: flex;
+  align-items: center;
+  color: var(--color-neutral-300);
+  font-size: 20px;
+  flex-shrink: 0;
+}
+
+.breadcrumb-separator .material-symbols-outlined {
+  font-size: 20px;
+  width: 20px;
+  height: 20px;
+}
+
+/* Material Symbols Support */
+.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;
+  -webkit-font-feature-settings: 'liga';
+  -webkit-font-smoothing: antialiased;
+  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
+}
+
+/* Responsive behavior */
+@media (max-width: 640px) {
+  .breadcrumb-text {
+    max-width: 120px;
+  }
+
+  .breadcrumbs-container {
+    gap: var(--spacing-xxs);
+  }
+
+  .breadcrumb-button {
+    padding: var(--spacing-xxs) var(--spacing-xs);
+    font-size: 12px;
+  }
+}