huibo-ui 0.3.0

package/dist/collection/components/Steps/Steps.js

@@ -0,0 +1,137 @@
+import { h } from "@stencil/core";
+export class Steps {
+    el;
+    active = 0;
+    processStatus = 'process';
+    alignCenter = false;
+    direction = 'horizontal';
+    steps = [];
+    componentDidLoad() {
+        const items = this.el.querySelectorAll('hb-step');
+        this.steps = Array.from(items).map((item) => ({
+            title: item.getAttribute('title') || '',
+            description: item.getAttribute('description') || undefined,
+        }));
+    }
+    getStatus(index) {
+        if (index < this.active)
+            return 'finish';
+        if (index === this.active)
+            return this.processStatus;
+        return 'wait';
+    }
+    getIcon(index) {
+        const status = this.getStatus(index);
+        if (status === 'finish')
+            return '✓';
+        if (status === 'error')
+            return '✕';
+        return String(index + 1);
+    }
+    render() {
+        return (h("div", { key: '3bb957ec22b3943e8dccdd609838adcac9aa0766', class: { 'hb-steps': true, [`hb-steps--${this.direction}`]: true, 'hb-steps--align-center': this.alignCenter } }, this.steps.map((step, i) => (h("div", { class: { 'hb-steps__item': true, [`hb-steps__item--${this.getStatus(i)}`]: true } }, h("div", { class: "hb-steps__head" }, h("span", { class: "hb-steps__icon" }, this.getIcon(i)), i < this.steps.length - 1 && h("div", { class: "hb-steps__line" })), h("div", { class: "hb-steps__main" }, h("div", { class: "hb-steps__title" }, step.title), step.description && h("div", { class: "hb-steps__description" }, step.description)))))));
+    }
+    static get is() { return "hb-steps"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["steps.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["steps.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "active": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "active",
+                "reflect": false,
+                "defaultValue": "0"
+            },
+            "processStatus": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'wait' | 'process' | 'finish' | 'error'",
+                    "resolved": "\"error\" | \"finish\" | \"process\" | \"wait\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "process-status",
+                "reflect": false,
+                "defaultValue": "'process'"
+            },
+            "alignCenter": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "align-center",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "direction": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'horizontal' | 'vertical'",
+                    "resolved": "\"horizontal\" | \"vertical\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "direction",
+                "reflect": false,
+                "defaultValue": "'horizontal'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "steps": {}
+        };
+    }
+    static get elementRef() { return "el"; }
+}
+//# sourceMappingURL=Steps.js.map

package/dist/collection/components/Steps/Steps.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Steps.js","sourceRoot":"","sources":["../../../src/components/Steps/Steps.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAGnE,MAAM,OAAO,KAAK;IACL,EAAE,CAAc;IACnB,MAAM,GAAW,CAAC,CAAC;IACnB,aAAa,GAA4C,SAAS,CAAC;IACnE,WAAW,GAAY,KAAK,CAAC;IAC7B,SAAS,GAA8B,YAAY,CAAC;IAEnD,KAAK,GAA8C,EAAE,CAAC;IAE/D,gBAAgB;QACd,MAAM,KAAK,GAAG,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,SAAS,CAAC,CAAC;QAClD,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;YAC5C,KAAK,EAAE,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,IAAI,EAAE;YACvC,WAAW,EAAE,IAAI,CAAC,YAAY,CAAC,aAAa,CAAC,IAAI,SAAS;SAC3D,CAAC,CAAC,CAAC;IACN,CAAC;IAEO,SAAS,CAAC,KAAa;QAC7B,IAAI,KAAK,GAAG,IAAI,CAAC,MAAM;YAAE,OAAO,QAAQ,CAAC;QACzC,IAAI,KAAK,KAAK,IAAI,CAAC,MAAM;YAAE,OAAO,IAAI,CAAC,aAAa,CAAC;QACrD,OAAO,MAAM,CAAC;IAChB,CAAC;IAEO,OAAO,CAAC,KAAa;QAC3B,MAAM,MAAM,GAAG,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;QACrC,IAAI,MAAM,KAAK,QAAQ;YAAE,OAAO,GAAG,CAAC;QACpC,IAAI,MAAM,KAAK,OAAO;YAAE,OAAO,GAAG,CAAC;QACnC,OAAO,MAAM,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC;IAC3B,CAAC;IAED,MAAM;QACJ,OAAO,CACL,4DAAK,KAAK,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,CAAC,aAAa,IAAI,CAAC,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,wBAAwB,EAAE,IAAI,CAAC,WAAW,EAAE,IAChH,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE,CAAC,CAC3B,WAAK,KAAK,EAAE,EAAE,gBAAgB,EAAE,IAAI,EAAE,CAAC,mBAAmB,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE;YACpF,WAAK,KAAK,EAAC,gBAAgB;gBACzB,YAAM,KAAK,EAAC,gBAAgB,IAAE,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CAAQ;gBACpD,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,IAAI,WAAK,KAAK,EAAC,gBAAgB,GAAO,CAC5D;YACN,WAAK,KAAK,EAAC,gBAAgB;gBACzB,WAAK,KAAK,EAAC,iBAAiB,IAAE,IAAI,CAAC,KAAK,CAAO;gBAC9C,IAAI,CAAC,WAAW,IAAI,WAAK,KAAK,EAAC,uBAAuB,IAAE,IAAI,CAAC,WAAW,CAAO,CAC5E,CACF,CACP,CAAC,CACE,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, State, Element } from '@stencil/core';\n\n@Component({ tag: 'hb-steps', styleUrl: 'steps.css', shadow: true })\nexport class Steps {\n  @Element() el: HTMLElement;\n  @Prop() active: number = 0;\n  @Prop() processStatus: 'wait' | 'process' | 'finish' | 'error' = 'process';\n  @Prop() alignCenter: boolean = false;\n  @Prop() direction: 'horizontal' | 'vertical' = 'horizontal';\n\n  @State() steps: { title: string; description?: string }[] = [];\n\n  componentDidLoad() {\n    const items = this.el.querySelectorAll('hb-step');\n    this.steps = Array.from(items).map((item) => ({\n      title: item.getAttribute('title') || '',\n      description: item.getAttribute('description') || undefined,\n    }));\n  }\n\n  private getStatus(index: number): string {\n    if (index < this.active) return 'finish';\n    if (index === this.active) return this.processStatus;\n    return 'wait';\n  }\n\n  private getIcon(index: number): string {\n    const status = this.getStatus(index);\n    if (status === 'finish') return '✓';\n    if (status === 'error') return '✕';\n    return String(index + 1);\n  }\n\n  render() {\n    return (\n      <div class={{ 'hb-steps': true, [`hb-steps--${this.direction}`]: true, 'hb-steps--align-center': this.alignCenter }}>\n        {this.steps.map((step, i) => (\n          <div class={{ 'hb-steps__item': true, [`hb-steps__item--${this.getStatus(i)}`]: true }}>\n            <div class=\"hb-steps__head\">\n              <span class=\"hb-steps__icon\">{this.getIcon(i)}</span>\n              {i < this.steps.length - 1 && <div class=\"hb-steps__line\"></div>}\n            </div>\n            <div class=\"hb-steps__main\">\n              <div class=\"hb-steps__title\">{step.title}</div>\n              {step.description && <div class=\"hb-steps__description\">{step.description}</div>}\n            </div>\n          </div>\n        ))}\n      </div>\n    );\n  }\n}\n"]}

package/dist/collection/components/Steps/steps.css

@@ -0,0 +1,25 @@
+:host { display: block; }
+.hb-steps { display: flex; }
+.hb-steps--vertical { flex-direction: column; }
+.hb-steps__item { flex: 1; display: flex; flex-direction: column; align-items: center; position: relative; }
+.hb-steps--vertical .hb-steps__item { flex-direction: row; align-items: flex-start; gap: var(--hb-spacing-sm); padding-bottom: var(--hb-spacing-md); }
+.hb-steps__head { display: flex; align-items: center; width: 100%; }
+.hb-steps__icon {
+  width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
+  font-size: var(--hb-font-size-sm); font-weight: 600; flex-shrink: 0;
+  background: var(--hb-color-fill); color: var(--hb-color-text-secondary); transition: all 0.3s;
+}
+.hb-steps__item--process .hb-steps__icon { background: var(--hb-color-primary); color: #fff; }
+.hb-steps__item--finish .hb-steps__icon { background: var(--hb-color-primary); color: #fff; }
+.hb-steps__item--error .hb-steps__icon { background: var(--hb-color-danger); color: #fff; }
+.hb-steps__line { flex: 1; height: 2px; background: var(--hb-color-border-secondary); margin: 0 var(--hb-spacing-xs); }
+.hb-steps__item--finish .hb-steps__line { background: var(--hb-color-primary); }
+.hb-steps__main { text-align: center; margin-top: var(--hb-spacing-xs); }
+.hb-steps--vertical .hb-steps__main { text-align: left; }
+
+/* 对齐方式（alignCenter prop）：默认 false 时图标与文字左对齐，true 时居中 */
+.hb-steps:not(.hb-steps--align-center) .hb-steps__item { align-items: flex-start; }
+.hb-steps:not(.hb-steps--align-center) .hb-steps__main { text-align: left; }
+.hb-steps__title { font-size: var(--hb-font-size-sm); font-weight: 600; }
+.hb-steps__item--process .hb-steps__title { color: var(--hb-color-primary); }
+.hb-steps__description { font-size: var(--hb-font-size-xs); color: var(--hb-color-text-secondary); margin-top: 2px; }

package/dist/collection/components/Switch/Switch.js

@@ -0,0 +1,324 @@
+import { h } from "@stencil/core";
+/**
+ * Switch 开关组件
+ * 表示两种相互对立的状态间的切换，多用于触发「开/关」
+ */
+export class Switch {
+    /**
+     * 绑定值
+     */
+    modelValue = false;
+    /**
+     * 是否禁用
+     * @default false
+     */
+    disabled = false;
+    /**
+     * 是否显示文字描述
+     * @default false
+     */
+    activeText;
+    /**
+     * 关闭时的文字描述
+     */
+    inactiveText;
+    /**
+     * 打开时的背景色
+     */
+    activeColor;
+    /**
+     * 关闭时的背景色
+     */
+    inactiveColor;
+    /**
+     * 打开时的值
+     * @default true
+     */
+    activeValue = true;
+    /**
+     * 关闭时的值
+     * @default false
+     */
+    inactiveValue = false;
+    /**
+     * 宽度
+     */
+    width;
+    /**
+     * 是否内联提示
+     * @default false
+     */
+    inlinePrompt = false;
+    /**
+     * 值改变事件
+     */
+    hbChange;
+    handleChange = (e) => {
+        if (this.disabled) {
+            e.preventDefault();
+            return;
+        }
+        const checked = e.target.checked;
+        const value = checked ? this.activeValue : this.inactiveValue;
+        this.modelValue = checked;
+        this.hbChange.emit(value);
+    };
+    render() {
+        const isChecked = this.modelValue === this.activeValue;
+        const width = this.width || (this.activeText || this.inactiveText ? 60 : 40);
+        return (h("label", { key: '1604fb9d4cee4a550e4d17cfde2804795c975b49', class: {
+                'hb-switch': true,
+                'hb-switch--checked': isChecked,
+                'hb-switch--disabled': this.disabled,
+            }, style: {
+                '--hb-switch-width': `${width}px`,
+                '--hb-switch-active-color': this.activeColor || 'var(--hb-color-primary)',
+                '--hb-switch-inactive-color': this.inactiveColor || 'var(--hb-color-text-placeholder, #c0c4cc)',
+            } }, h("input", { key: 'bcf5f240a911b79fe93a06c03d4defc9da535007', type: "checkbox", class: "hb-switch__original", role: "switch", "aria-checked": isChecked ? 'true' : 'false', checked: isChecked, disabled: this.disabled, onChange: this.handleChange, "aria-label": this.activeText || this.inactiveText || undefined }), h("span", { key: 'c021d1bda42d0a888b5620182e9839bdcda2acfd', class: "hb-switch__core" }, this.activeText || this.inactiveText ? (h("span", { class: "hb-switch__inner" }, isChecked ? this.activeText : this.inactiveText)) : null)));
+    }
+    static get is() { return "hb-switch"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["switch.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["switch.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "modelValue": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\u7ED1\u5B9A\u503C"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "model-value",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "\u662F\u5426\u7981\u7528"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "disabled",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "activeText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "\u662F\u5426\u663E\u793A\u6587\u5B57\u63CF\u8FF0"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "active-text",
+                "reflect": false
+            },
+            "inactiveText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "\u5173\u95ED\u65F6\u7684\u6587\u5B57\u63CF\u8FF0"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "inactive-text",
+                "reflect": false
+            },
+            "activeColor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "\u6253\u5F00\u65F6\u7684\u80CC\u666F\u8272"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "active-color",
+                "reflect": false
+            },
+            "inactiveColor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "\u5173\u95ED\u65F6\u7684\u80CC\u666F\u8272"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "inactive-color",
+                "reflect": false
+            },
+            "activeValue": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean | string | number",
+                    "resolved": "boolean | number | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "true"
+                        }],
+                    "text": "\u6253\u5F00\u65F6\u7684\u503C"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "active-value",
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "inactiveValue": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean | string | number",
+                    "resolved": "boolean | number | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "\u5173\u95ED\u65F6\u7684\u503C"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "inactive-value",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "width": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "\u5BBD\u5EA6"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "width",
+                "reflect": false
+            },
+            "inlinePrompt": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "\u662F\u5426\u5185\u8054\u63D0\u793A"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "inline-prompt",
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "hbChange",
+                "name": "hbChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "\u503C\u6539\u53D8\u4E8B\u4EF6"
+                },
+                "complexType": {
+                    "original": "boolean | string | number",
+                    "resolved": "boolean | number | string",
+                    "references": {}
+                }
+            }];
+    }
+}
+//# sourceMappingURL=Switch.js.map

package/dist/collection/components/Switch/Switch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Switch.js","sourceRoot":"","sources":["../../../src/components/Switch/Switch.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, Event, EventEmitter } from '@stencil/core';\n\n/**\n * Switch 开关组件\n * 表示两种相互对立的状态间的切换，多用于触发「开/关」\n */\n@Component({\n  tag: 'hb-switch',\n  styleUrl: 'switch.css',\n  shadow: true,\n})\nexport class Switch {\n  /**\n   * 绑定值\n   */\n  @Prop({ mutable: true }) modelValue: boolean = false;\n\n  /**\n   * 是否禁用\n   * @default false\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * 是否显示文字描述\n   * @default false\n   */\n  @Prop() activeText?: string;\n\n  /**\n   * 关闭时的文字描述\n   */\n  @Prop() inactiveText?: string;\n\n  /**\n   * 打开时的背景色\n   */\n  @Prop() activeColor?: string;\n\n  /**\n   * 关闭时的背景色\n   */\n  @Prop() inactiveColor?: string;\n\n  /**\n   * 打开时的值\n   * @default true\n   */\n  @Prop() activeValue: boolean | string | number = true;\n\n  /**\n   * 关闭时的值\n   * @default false\n   */\n  @Prop() inactiveValue: boolean | string | number = false;\n\n  /**\n   * 宽度\n   */\n  @Prop() width?: number;\n\n  /**\n   * 是否内联提示\n   * @default false\n   */\n  @Prop() inlinePrompt: boolean = false;\n\n  /**\n   * 值改变事件\n   */\n  @Event() hbChange: EventEmitter<boolean | string | number>;\n\n  private handleChange = (e: Event) => {\n    if (this.disabled) {\n      e.preventDefault();\n      return;\n    }\n\n    const checked = (e.target as HTMLInputElement).checked;\n    const value = checked ? this.activeValue : this.inactiveValue;\n    \n    this.modelValue = checked;\n    this.hbChange.emit(value);\n  };\n\n  render() {\n    const isChecked = this.modelValue === this.activeValue;\n    const width = this.width || (this.activeText || this.inactiveText ? 60 : 40);\n\n    return (\n      <label\n        class={{\n          'hb-switch': true,\n          'hb-switch--checked': isChecked,\n          'hb-switch--disabled': this.disabled,\n        }}\n        style={{\n          '--hb-switch-width': `${width}px`,\n          '--hb-switch-active-color': this.activeColor || 'var(--hb-color-primary)',\n          '--hb-switch-inactive-color': this.inactiveColor || 'var(--hb-color-text-placeholder, #c0c4cc)',\n        }}\n      >\n        <input\n          type=\"checkbox\"\n          class=\"hb-switch__original\"\n          role=\"switch\"\n          aria-checked={isChecked ? 'true' : 'false'}\n          checked={isChecked}\n          disabled={this.disabled}\n          onChange={this.handleChange}\n          aria-label={this.activeText || this.inactiveText || undefined}\n        />\n        <span class=\"hb-switch__core\">\n          {this.activeText || this.inactiveText ? (\n            <span class=\"hb-switch__inner\">\n              {isChecked ? this.activeText : this.inactiveText}\n            </span>\n          ) : null}\n        </span>\n      </label>\n    );\n  }\n}\n\n"]}

package/dist/collection/components/Switch/switch.css

@@ -0,0 +1,85 @@
+:host {
+  display: inline-block;
+  --hb-switch-width: 40px;
+  --hb-switch-active-color: var(--hb-color-primary);
+  --hb-switch-inactive-color: var(--hb-color-text-placeholder, #c0c4cc);
+}
+
+.hb-switch {
+  display: inline-flex;
+  align-items: center;
+  position: relative;
+  font-size: 14px;
+  line-height: 20px;
+  height: 20px;
+  vertical-align: middle;
+  cursor: pointer;
+}
+
+.hb-switch__original {
+  opacity: 0;
+  width: 0;
+  height: 0;
+  margin: 0;
+  position: absolute;
+}
+
+.hb-switch__core {
+  margin: 0;
+  display: inline-block;
+  position: relative;
+  width: var(--hb-switch-width);
+  height: 20px;
+  border: 1px solid var(--hb-switch-inactive-color);
+  outline: none;
+  border-radius: 10px;
+  box-sizing: border-box;
+  background: var(--hb-switch-inactive-color);
+  cursor: pointer;
+  transition: border-color 0.3s, background-color 0.3s;
+  vertical-align: middle;
+}
+
+.hb-switch__core::after {
+  content: '';
+  position: absolute;
+  top: 1px;
+  left: 1px;
+  border-radius: 100%;
+  transition: all 0.3s;
+  width: 16px;
+  height: 16px;
+  background-color: var(--hb-color-white, #ffffff);
+}
+
+.hb-switch--checked .hb-switch__core {
+  border-color: var(--hb-switch-active-color);
+  background-color: var(--hb-switch-active-color);
+}
+
+.hb-switch--checked .hb-switch__core::after {
+  left: 100%;
+  margin-left: -17px;
+}
+
+.hb-switch__inner {
+  position: absolute;
+  left: 23px;
+  font-size: 12px;
+  color: var(--hb-color-white, #ffffff);
+  transition: all 0.3s;
+}
+
+.hb-switch--checked .hb-switch__inner {
+  left: 5px;
+}
+
+.hb-switch--disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.hb-switch--disabled .hb-switch__core {
+  cursor: not-allowed;
+}
+