@xlabs-store/core 0.0.1

package/dist/collection/components/x-badge/x-badge.js

@@ -0,0 +1,618 @@
+import { Host, h } from "@stencil/core";
+const PRESET_COLORS = [
+    'pink', 'red', 'yellow', 'orange', 'cyan', 'green', 'blue', 'purple',
+    'geekblue', 'magenta', 'volcano', 'gold', 'lime'
+];
+/**
+ * Badge component for counts, dots, and status indicators.
+ */
+export class XBadge {
+    /**
+     * Host element reference for slot inspection.
+     */
+    el;
+    /**
+     * Number to show in badge.
+     * @example
+     * <x-badge count={3}></x-badge>
+     */
+    count;
+    /**
+     * Whether to display a red dot instead of count.
+     * @example
+     * <x-badge dot></x-badge>
+     */
+    dot = false;
+    /**
+     * Max count to show.
+     * @example
+     * <x-badge count={120} overflowCount={99}></x-badge>
+     */
+    overflowCount = 99;
+    /**
+     * Whether to show badge when count is 0.
+     * @example
+     * <x-badge count={0} showZero></x-badge>
+     */
+    showZero = false;
+    /**
+     * Set Badge as a status dot.
+     * @example
+     * <x-badge status="success" text="Done"></x-badge>
+     */
+    status;
+    /**
+     * If status is set, text sets the display text of the status dot.
+     * @example
+     * <x-badge status="warning" text="Pending"></x-badge>
+     */
+    text;
+    /**
+     * Customize Badge dot color (supports preset colors or custom hex/rgb).
+     * @example
+     * <x-badge color="#ff4d4f" count={1}></x-badge>
+     */
+    color;
+    /**
+     * Set offset of the badge dot [left, top].
+     * @example
+     * <x-badge offset={[10, -2]} count={5}></x-badge>
+     */
+    offset;
+    /**
+     * Size of the badge.
+     * @example
+     * <x-badge size="small" count={2}></x-badge>
+     */
+    size = 'default';
+    /**
+     * Text to show when hovering over the badge.
+     * @example
+     * <x-badge badgeTitle="Notifications" count={9}></x-badge>
+     */
+    badgeTitle;
+    /**
+     * Used to display the classNames of the badge.
+     * @example
+     * <x-badge classNames={{ root: 'my-badge' }} count={1}></x-badge>
+     */
+    classNames;
+    /**
+     * Used to display the styles of the badge.
+     * @example
+     * <x-badge styles={{ indicator: 'background: red;' }} count={1}></x-badge>
+     */
+    styles;
+    /**
+     * Track whether component has child content.
+     */
+    hasChildren = false;
+    /**
+     * Initialize child detection before render.
+     * @returns void
+     * @example
+     * <x-badge count={1}><button>Inbox</button></x-badge>
+     */
+    componentWillLoad() {
+        this.checkChildren();
+    }
+    countChanged() {
+        // Trigger re-render when count changes
+    }
+    /**
+     * Detect whether default slot has child nodes.
+     *
+     * Flow:
+     * 1. Queries the default `<slot>`.
+     * 2. If slot exists:
+     *    - Gets `assignedNodes`.
+     *    - Checks if any node is an Element or non-empty Text.
+     * 3. If slot doesn't exist (yet):
+     *    - Checks `el.childNodes` length.
+     * 4. Updates `hasChildren` state, which toggles wrapper mode.
+     *
+     * @returns void
+     * @example
+     * <x-badge count={1}><span>Inbox</span></x-badge>
+     */
+    checkChildren() {
+        const slot = this.el.shadowRoot?.querySelector('slot');
+        if (slot) {
+            const assignedNodes = slot.assignedNodes({ flatten: true });
+            // Consider both element nodes and non-empty text nodes.
+            this.hasChildren = assignedNodes.some(node => node.nodeType === Node.ELEMENT_NODE ||
+                (node.nodeType === Node.TEXT_NODE && node.textContent?.trim()));
+        }
+        else {
+            // Fallback when slot is not yet available.
+            this.hasChildren = this.el.childNodes.length > 0;
+        }
+    }
+    /**
+     * Check if color matches preset palette.
+     * @param color - Color to test.
+     * @returns boolean
+     * @example
+     * this.isPresetColor('red')
+     */
+    isPresetColor(color) {
+        return PRESET_COLORS.includes(color);
+    }
+    /**
+     * Compute display count text based on dot/overflow rules.
+     *
+     * Flow:
+     * 1. If `dot` is true, returns null (no text).
+     * 2. If `count` is string, returns as-is.
+     * 3. If `count` is number:
+     *    - Checks against `overflowCount`.
+     *    - Returns `${overflowCount}+` if exceeded.
+     *    - Otherwise returns count.
+     *
+     * @returns string | number | null
+     * @example
+     * <x-badge count={120} overflowCount={99}></x-badge>
+     */
+    getDisplayCount() {
+        // Dot mode does not show any number.
+        if (this.dot) {
+            return null;
+        }
+        // String counts are displayed as-is.
+        if (typeof this.count === 'string') {
+            return this.count;
+        }
+        // Numeric counts respect overflowCount.
+        if (typeof this.count === 'number') {
+            if (this.count > this.overflowCount) {
+                return `${this.overflowCount}+`;
+            }
+            return this.count;
+        }
+        return null;
+    }
+    /**
+     * Compute inline offset styles for indicator.
+     * @returns Record<string, string>
+     * @example
+     * <x-badge offset={[8, -4]} count={1}></x-badge>
+     */
+    getOffsetStyle() {
+        if (!this.offset) {
+            return {};
+        }
+        const [left, top] = this.offset;
+        const leftValue = typeof left === 'number' ? `${left}px` : left;
+        const topValue = typeof top === 'number' ? `${top}px` : top;
+        return {
+            marginTop: topValue,
+            right: `calc(-100% + ${leftValue})`,
+        };
+    }
+    /**
+     * Compute custom color styles for indicator.
+     * @returns Record<string, string>
+     * @example
+     * <x-badge color="#52c41a" count={1}></x-badge>
+     */
+    getColorStyle() {
+        if (!this.color) {
+            return {};
+        }
+        // Preset colors use CSS classes instead of inline styles.
+        if (this.isPresetColor(this.color)) {
+            return {};
+        }
+        return {
+            background: this.color,
+            '--x-badge-color': this.color,
+        };
+    }
+    /**
+     * Decide if the badge indicator should be hidden.
+     * @returns boolean
+     * @example
+     * <x-badge count={0} showZero={false}></x-badge>
+     */
+    isHidden() {
+        const count = typeof this.count === 'number' ? this.count : null;
+        const isZero = count === 0 || count === null;
+        // Show if dot mode
+        if (this.dot) {
+            return false;
+        }
+        // Show if count is string (like "new")
+        if (typeof this.count === 'string') {
+            return false;
+        }
+        // Hide if zero and showZero is false
+        if (isZero && !this.showZero) {
+            return true;
+        }
+        return false;
+    }
+    /**
+     * Render status-style badge with dot and optional text.
+     * @returns JSX.Element
+     * @example
+     * <x-badge status="success" text="Done"></x-badge>
+     */
+    renderStatusBadge() {
+        const dotStyle = this.getColorStyle();
+        return (h(Host, { class: {
+                'x-badge': true,
+                'x-badge-status': true,
+                [this.classNames?.root || '']: !!this.classNames?.root,
+            }, style: this.styles?.root ? { cssText: this.styles.root } : undefined }, h("span", { class: {
+                'x-badge-status-dot': true,
+                [`x-badge-status-${this.status}`]: !!this.status,
+                [`x-badge-color-${this.color}`]: !!this.color && this.isPresetColor(this.color),
+                [this.classNames?.indicator || '']: !!this.classNames?.indicator,
+            }, style: {
+                ...dotStyle,
+                ...(this.styles?.indicator ? { cssText: this.styles.indicator } : {}),
+            } }), this.text && h("span", { class: "x-badge-status-text" }, this.text)));
+    }
+    /**
+     * Render badge in count/dot mode or status mode.
+     *
+     * Flow:
+     * 1. If `status` prop is present, calls `renderStatusBadge` (standalone dot with text).
+     * 2. Otherwise (Count/Dot mode):
+     *    - Calculates `displayCount` and `isHidden` status.
+     *    - Renders host element with classes indicating wrapper mode (`hasChildren`).
+     *    - Projects slot content.
+     *    - If not hidden, renders `<sup>` element for the badge:
+     *      - Applies classes for dot, count, size, color.
+     *      - Applies offset styles.
+     *
+     * @returns JSX.Element
+     * @example
+     * <x-badge count={5}><button>Inbox</button></x-badge>
+     */
+    render() {
+        // Status Badge mode
+        if (this.status) {
+            return this.renderStatusBadge();
+        }
+        const displayCount = this.getDisplayCount();
+        const isHidden = this.isHidden();
+        const offsetStyle = this.getOffsetStyle();
+        const colorStyle = this.getColorStyle();
+        const titleText = this.badgeTitle ?? (typeof this.count === 'number' ? String(this.count) : undefined);
+        return (h(Host, { class: {
+                'x-badge': true,
+                'x-badge-not-a-wrapper': !this.hasChildren,
+                [this.classNames?.root || '']: !!this.classNames?.root,
+            }, style: this.styles?.root ? { cssText: this.styles.root } : undefined }, h("slot", null), !isHidden && (h("sup", { class: {
+                'x-badge-count': !this.dot,
+                'x-badge-dot': this.dot,
+                'x-badge-multiple-words': !this.dot && String(displayCount || '').length > 1,
+                'x-badge-count-sm': this.size === 'small',
+                [`x-badge-color-${this.color}`]: !!this.color && this.isPresetColor(this.color),
+                [this.classNames?.indicator || '']: !!this.classNames?.indicator,
+            }, style: {
+                ...offsetStyle,
+                ...colorStyle,
+                ...(this.styles?.indicator ? { cssText: this.styles.indicator } : {}),
+            }, title: titleText }, displayCount))));
+    }
+    static get is() { return "x-badge"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["x-badge.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["x-badge.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "count": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "number | string",
+                    "resolved": "number | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-badge count={3}></x-badge>"
+                        }],
+                    "text": "Number to show in badge."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "count"
+            },
+            "dot": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-badge dot></x-badge>"
+                        }],
+                    "text": "Whether to display a red dot instead of count."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "dot",
+                "defaultValue": "false"
+            },
+            "overflowCount": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-badge count={120} overflowCount={99}></x-badge>"
+                        }],
+                    "text": "Max count to show."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "overflow-count",
+                "defaultValue": "99"
+            },
+            "showZero": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-badge count={0} showZero></x-badge>"
+                        }],
+                    "text": "Whether to show badge when count is 0."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-zero",
+                "defaultValue": "false"
+            },
+            "status": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BadgeStatus",
+                    "resolved": "\"default\" | \"error\" | \"processing\" | \"success\" | \"warning\"",
+                    "references": {
+                        "BadgeStatus": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-badge/types.ts::BadgeStatus",
+                            "referenceLocation": "BadgeStatus"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-badge status=\"success\" text=\"Done\"></x-badge>"
+                        }],
+                    "text": "Set Badge as a status dot."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "status"
+            },
+            "text": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-badge status=\"warning\" text=\"Pending\"></x-badge>"
+                        }],
+                    "text": "If status is set, text sets the display text of the status dot."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "text"
+            },
+            "color": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | BadgePresetColor",
+                    "resolved": "string",
+                    "references": {
+                        "BadgePresetColor": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-badge/types.ts::BadgePresetColor",
+                            "referenceLocation": "BadgePresetColor"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-badge color=\"#ff4d4f\" count={1}></x-badge>"
+                        }],
+                    "text": "Customize Badge dot color (supports preset colors or custom hex/rgb)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "color"
+            },
+            "offset": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "BadgeOffset",
+                    "resolved": "[string | number, string | number]",
+                    "references": {
+                        "BadgeOffset": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-badge/types.ts::BadgeOffset",
+                            "referenceLocation": "BadgeOffset"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-badge offset={[10, -2]} count={5}></x-badge>"
+                        }],
+                    "text": "Set offset of the badge dot [left, top]."
+                },
+                "getter": false,
+                "setter": false
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BadgeSize",
+                    "resolved": "\"default\" | \"small\"",
+                    "references": {
+                        "BadgeSize": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-badge/types.ts::BadgeSize",
+                            "referenceLocation": "BadgeSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-badge size=\"small\" count={2}></x-badge>"
+                        }],
+                    "text": "Size of the badge."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "'default'"
+            },
+            "badgeTitle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-badge badgeTitle=\"Notifications\" count={9}></x-badge>"
+                        }],
+                    "text": "Text to show when hovering over the badge."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "badge-title"
+            },
+            "classNames": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "{ root?: string; indicator?: string }",
+                    "resolved": "{ root?: string; indicator?: string; }",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-badge classNames={{ root: 'my-badge' }} count={1}></x-badge>"
+                        }],
+                    "text": "Used to display the classNames of the badge."
+                },
+                "getter": false,
+                "setter": false
+            },
+            "styles": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "{ root?: string; indicator?: string }",
+                    "resolved": "{ root?: string; indicator?: string; }",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-badge styles={{ indicator: 'background: red;' }} count={1}></x-badge>"
+                        }],
+                    "text": "Used to display the styles of the badge."
+                },
+                "getter": false,
+                "setter": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "hasChildren": {}
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "count",
+                "methodName": "countChanged"
+            }];
+    }
+}

package/dist/collection/components/x-breadcrumb/x-breadcrumb.css

@@ -0,0 +1,44 @@
+@charset "UTF-8";
+/**
+* X-Breadcrumb Component Variables
+* 
+* Sass variables for x-breadcrumb component
+* Resolution priority: x-breadcrumb → ref (x-*)
+* 
+* Usage: Import this file in x-breadcrumb.scss
+* @use './variables' as *;
+*/
+/**
+ * X-Breadcrumb Component Styles
+ * 
+ * Uses Sass variables from _variables.scss
+ * Resolution priority: x-breadcrumb → ref (x-*)
+ */
+:host {
+  /* ========================================
+   * BASE STYLES
+   * ======================================== */
+  display: block;
+  color: var(--x-breadcrumb-color, var(--x-color-text-secondary, rgba(0, 0, 0, 0.45)));
+  font-size: var(--x-breadcrumb-font-size, var(--x-font-size-base, 14px));
+}
+
+.x-breadcrumb {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  color: var(--x-breadcrumb-color, var(--x-color-text-secondary, rgba(0, 0, 0, 0.45)));
+  font-variant: tabular-nums;
+  line-height: var(--x-breadcrumb-line-height, var(--x-line-height-base, 1.5715));
+  list-style: none;
+  font-feature-settings: "tnum";
+  font-size: var(--x-breadcrumb-font-size, var(--x-font-size-base, 14px));
+}
+
+ol {
+  display: flex;
+  flex-wrap: wrap;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}