@actabldesign/bellhop-core 0.0.3

package/collection/components/bh-badge-dot/bh-badge-dot.js

@@ -0,0 +1,113 @@
+import { h } from "@stencil/core";
+export class BhBadgeDot {
+    /**
+     * The size of the badge dot
+     */
+    size = 'md';
+    /**
+     * The color of the badge dot
+     */
+    color = 'error';
+    /**
+     * Whether to show an outline ring around the dot
+     */
+    outline = false;
+    render() {
+        const dotClasses = {
+            'badge-dot': true,
+            [`badge-dot-${this.size}`]: true,
+            [`badge-dot-${this.color}`]: true,
+            'badge-dot-outline': this.outline,
+        };
+        return h("div", { key: 'c5ce0849442e1b1551185936a328987877a888f5', class: dotClasses, part: "dot" });
+    }
+    static get is() { return "bh-badge-dot"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bh-badge-dot.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bh-badge-dot.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BadgeDotSize",
+                    "resolved": "\"lg\" | \"md\" | \"sm\"",
+                    "references": {
+                        "BadgeDotSize": {
+                            "location": "local",
+                            "path": "/home/runner/work/bellhopos/bellhopos/packages/bellhop-core/src/components/bh-badge-dot/bh-badge-dot.tsx",
+                            "id": "src/components/bh-badge-dot/bh-badge-dot.tsx::BadgeDotSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The size of the badge dot"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "'md'"
+            },
+            "color": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BadgeDotColor",
+                    "resolved": "\"blue\" | \"error\" | \"success\" | \"warning\"",
+                    "references": {
+                        "BadgeDotColor": {
+                            "location": "local",
+                            "path": "/home/runner/work/bellhopos/bellhopos/packages/bellhop-core/src/components/bh-badge-dot/bh-badge-dot.tsx",
+                            "id": "src/components/bh-badge-dot/bh-badge-dot.tsx::BadgeDotColor"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The color of the badge dot"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "color",
+                "defaultValue": "'error'"
+            },
+            "outline": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to show an outline ring around the dot"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "outline",
+                "defaultValue": "false"
+            }
+        };
+    }
+}
+//# sourceMappingURL=bh-badge-dot.js.map

package/collection/components/bh-badge-dot/bh-badge-dot.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bh-badge-dot.js","sourceRoot":"","sources":["../../../src/components/bh-badge-dot/bh-badge-dot.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAUnD,MAAM,OAAO,UAAU;IACrB;;OAEG;IACK,IAAI,GAAiB,IAAI,CAAC;IAElC;;OAEG;IACK,KAAK,GAAkB,OAAO,CAAC;IAEvC;;OAEG;IACK,OAAO,GAAY,KAAK,CAAC;IAEjC,MAAM;QACJ,MAAM,UAAU,GAAG;YACjB,WAAW,EAAE,IAAI;YACjB,CAAC,aAAa,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,IAAI;YAChC,CAAC,aAAa,IAAI,CAAC,KAAK,EAAE,CAAC,EAAE,IAAI;YACjC,mBAAmB,EAAE,IAAI,CAAC,OAAO;SAClC,CAAC;QAEF,OAAO,4DAAK,KAAK,EAAE,UAAU,EAAE,IAAI,EAAC,KAAK,GAAO,CAAC;IACnD,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h } from '@stencil/core';\n\nexport type BadgeDotSize = 'sm' | 'md' | 'lg';\nexport type BadgeDotColor = 'success' | 'blue' | 'error' | 'warning';\n\n@Component({\n  tag: 'bh-badge-dot',\n  styleUrl: 'bh-badge-dot.css',\n  shadow: true,\n})\nexport class BhBadgeDot {\n  /**\n   * The size of the badge dot\n   */\n  @Prop() size: BadgeDotSize = 'md';\n\n  /**\n   * The color of the badge dot\n   */\n  @Prop() color: BadgeDotColor = 'error';\n\n  /**\n   * Whether to show an outline ring around the dot\n   */\n  @Prop() outline: boolean = false;\n\n  render() {\n    const dotClasses = {\n      'badge-dot': true,\n      [`badge-dot-${this.size}`]: true,\n      [`badge-dot-${this.color}`]: true,\n      'badge-dot-outline': this.outline,\n    };\n\n    return <div class={dotClasses} part=\"dot\"></div>;\n  }\n}\n"]}

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

@@ -0,0 +1,363 @@
+/**
+ * BellhopOS 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: block;
+}
+
+/* Vertical Layout */
+.vertical-container {
+  display: flex;
+  align-items: flex-end;
+  height: 180px;
+  width: 100%;
+}
+
+.vertical-container.simple {
+  height: 180px;
+  width: 100%;
+}
+
+.bar-column.vertical {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-end;
+  height: 100%;
+  flex: 1;
+  gap: var(--spacing-xxs, 2px);
+  margin: 0 2px;
+  border-radius: 4px;
+  transition: background-color 0.2s ease;
+}
+
+.vertical-container.simple .bar-column.vertical {
+  flex: 1;
+  margin: 0 2px;
+}
+
+.bar-segment.vertical {
+  width: 6px;
+  border-radius: 2px;
+  min-height: 2px;
+  transition: all 0.3s ease;
+  transform-origin: bottom;
+}
+
+/* Horizontal Layout */
+.horizontal-container {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  height: auto;
+  min-height: 140px;
+  gap: var(--spacing-lg, 12px);
+}
+
+.horizontal-container.simple {
+  height: auto;
+  min-height: 140px;
+  gap: var(--spacing-lg, 12px);
+}
+
+.bar-row.horizontal {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 6px;
+  min-height: 6px;
+  max-height: 6px;
+  gap: var(--spacing-xxs, 2px);
+  margin: 2px 0;
+  border-radius: 4px;
+  transition: background-color 0.2s ease;
+  padding: 2px;
+}
+
+.horizontal-container.simple .bar-row.horizontal {
+  height: 6px;
+  min-height: 6px;
+  max-height: 6px;
+  margin: 2px 0;
+  padding: 2px;
+}
+
+.bar-segment.horizontal {
+  height: 100%;
+  min-height: 6px;
+  max-height: 6px;
+  border-radius: 2px;
+  min-width: 2px;
+  transition: all 0.3s ease;
+  transform-origin: left;
+}
+
+.horizontal-container.simple .bar-segment.horizontal {
+  min-width: 2px;
+  height: 6px;
+  min-height: 6px;
+  max-height: 6px;
+}
+
+/* Hover effects */
+.bar-column,
+.bar-row {
+  cursor: pointer;
+}
+
+.bar-column:hover {
+  background-color: color-mix(in srgb, var(--color-neutral-100) 50%, transparent);
+}
+
+.bar-row:hover {
+  background-color: color-mix(in srgb, var(--color-neutral-100) 50%, transparent);
+}
+
+.bar-column:hover .bar-segment,
+.bar-row:hover .bar-segment {
+  opacity: 0.9;
+  filter: brightness(1.05);
+}
+
+/* Animations */
+.bar-chart-animated .bar-segment.vertical {
+  animation: barGrowVertical 0.8s cubic-bezier(0.4, 0, 0.2, 1) both;
+}
+
+.bar-chart-animated .bar-segment.horizontal {
+  animation: barGrowHorizontal 0.8s cubic-bezier(0.4, 0, 0.2, 1) both;
+}
+
+@keyframes barGrowVertical {
+  from {
+    transform: scaleY(0);
+    opacity: 0;
+  }
+  to {
+    transform: scaleY(1);
+    opacity: 1;
+  }
+}
+
+@keyframes barGrowHorizontal {
+  from {
+    transform: scaleX(0);
+    opacity: 0;
+  }
+  to {
+    transform: scaleX(1);
+    opacity: 1;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .bar-chart-animated .bar-segment.vertical,
+  .bar-chart-animated .bar-segment.horizontal {
+    animation: none;
+    opacity: 1;
+    transform: none;
+  }
+}