@actabldesign/bellhop-core 0.0.3 → 0.0.6

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

@@ -1,301 +0,0 @@
-/**
- * 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;
-}
-
-.chart-tooltip {
-  position: fixed;
-  z-index: 10000;
-  pointer-events: none;
-  opacity: 0;
-  transition: opacity 0.15s ease;
-  transform: translate(-50%, -100%);
-  margin-top: var(--spacing-sm);
-  width: max-content;
-  min-width: 120px;
-  max-width: 240px;
-}
-
-.chart-tooltip.storybook-mode {
-  position: absolute;
-  transform: translate(-50%, -100%);
-  margin-top: -10px;
-}
-
-.chart-tooltip.visible {
-  opacity: 1;
-}
-
-.tooltip-content {
-  background: var(--color-white);
-  color: var(--color-neutral-900);
-  padding: var(--spacing-sm) var(--spacing-md);
-  border-radius: var(--radius-md);
-  font-family: var(--font-inter);
-  font-size: var(--text-xs-size);
-  line-height: var(--text-xs-line);
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12), 0 0 1px rgba(0, 0, 0, 0.08);
-  border: 1px solid rgba(0, 0, 0, 0.05);
-}
-
-.tooltip-header {
-  font-weight: var(--weight-semibold);
-  margin-bottom: var(--spacing-xs);
-  padding-bottom: var(--spacing-xs);
-  border-bottom: 1px solid var(--color-neutral-100);
-}
-
-.tooltip-items {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-xs);
-}
-
-.tooltip-item {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-sm);
-  white-space: nowrap;
-}
-
-.tooltip-dot {
-  width: var(--spacing-sm);
-  height: var(--spacing-sm);
-  border-radius: 50%;
-  flex-shrink: 0;
-}
-
-.tooltip-label {
-  color: var(--color-neutral-600);
-  font-weight: var(--weight-regular);
-  flex-shrink: 0;
-}
-
-.tooltip-value {
-  color: var(--color-neutral-900);
-  font-weight: var(--weight-medium);
-}
-
-.tooltip-total {
-  margin-top: var(--spacing-xs);
-  padding-top: var(--spacing-xs);
-  border-top: 1px solid var(--color-neutral-100);
-  display: flex;
-  justify-content: space-between;
-  gap: var(--spacing-md);
-}
-
-.total-label {
-  color: var(--color-neutral-600);
-  font-weight: var(--weight-medium);
-}
-
-.total-value {
-  color: var(--color-neutral-900);
-  font-weight: var(--weight-semibold);
-}

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

@@ -1,226 +0,0 @@
-import { h, Host } from "@stencil/core";
-export class BhChartTooltip {
-    /**
-     * Whether the tooltip is visible
-     */
-    visible = false;
-    /**
-     * X position of the tooltip (in pixels)
-     */
-    x = 0;
-    /**
-     * Y position of the tooltip (in pixels)
-     */
-    y = 0;
-    /**
-     * Header text for the tooltip
-     */
-    header = '';
-    /**
-     * Items to display in the tooltip
-     */
-    items = [];
-    /**
-     * Total value to display
-     */
-    total = '';
-    /**
-     * Whether to show the total
-     */
-    showTotal = false;
-    /**
-     * Whether in storybook mode (for static positioning)
-     */
-    storybookMode = false;
-    render() {
-        return (h(Host, { key: '57397b8dd557ccf795a68896c7f1913fb0bc9b9e' }, h("div", { key: 'ff10c37825a1b62a08b168248b7d05b49fca5a79', class: {
-                'chart-tooltip': true,
-                visible: this.visible,
-                'storybook-mode': this.storybookMode,
-            }, style: {
-                left: `${this.x}px`,
-                top: `${this.y}px`,
-            } }, h("div", { key: '1eec265888955e2d073b85c4e2a5cde44b816233', class: "tooltip-content" }, this.header && h("div", { key: 'b287d571062079c274941e20863562898e1de7de', class: "tooltip-header" }, this.header), h("div", { key: 'f4db62e0a0bc52422546fff47e0fb11abffdf744', class: "tooltip-items" }, this.items.map((item, index) => (h("div", { key: index, class: "tooltip-item" }, item.color && (h("span", { class: "tooltip-dot", style: { backgroundColor: item.color } })), item.label && (h("span", { class: "tooltip-label" }, item.label, ":")), h("span", { class: "tooltip-value" }, item.value))))), this.showTotal && this.total && (h("div", { key: '46ade21e6d662ae224d6e2d019609b270b8e1989', class: "tooltip-total" }, h("span", { key: '8ad8d17c70c5b9a4a6fd98b54db5da98e9025875', class: "total-label" }, "Total:"), h("span", { key: '57e0ee054526971a7e4b8b8e43b2e0c1b685b9e4', class: "total-value" }, this.total)))))));
-    }
-    static get is() { return "bh-chart-tooltip"; }
-    static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["bh-chart-tooltip.css"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["bh-chart-tooltip.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "visible": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Whether the tooltip is visible"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "visible",
-                "defaultValue": "false"
-            },
-            "x": {
-                "type": "number",
-                "mutable": false,
-                "complexType": {
-                    "original": "number",
-                    "resolved": "number",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "X position of the tooltip (in pixels)"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "x",
-                "defaultValue": "0"
-            },
-            "y": {
-                "type": "number",
-                "mutable": false,
-                "complexType": {
-                    "original": "number",
-                    "resolved": "number",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Y position of the tooltip (in pixels)"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "y",
-                "defaultValue": "0"
-            },
-            "header": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Header text for the tooltip"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "header",
-                "defaultValue": "''"
-            },
-            "items": {
-                "type": "unknown",
-                "mutable": false,
-                "complexType": {
-                    "original": "TooltipItem[]",
-                    "resolved": "TooltipItem[]",
-                    "references": {
-                        "TooltipItem": {
-                            "location": "local",
-                            "path": "/home/runner/work/bellhopos/bellhopos/packages/bellhop-core/src/components/bh-chart-tooltip/bh-chart-tooltip.tsx",
-                            "id": "src/components/bh-chart-tooltip/bh-chart-tooltip.tsx::TooltipItem"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Items to display in the tooltip"
-                },
-                "getter": false,
-                "setter": false,
-                "defaultValue": "[]"
-            },
-            "total": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Total value to display"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "total",
-                "defaultValue": "''"
-            },
-            "showTotal": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Whether to show the total"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "show-total",
-                "defaultValue": "false"
-            },
-            "storybookMode": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Whether in storybook mode (for static positioning)"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "storybook-mode",
-                "defaultValue": "false"
-            }
-        };
-    }
-}
-//# sourceMappingURL=bh-chart-tooltip.js.map