huibo-ui 0.3.0

package/dist/components/hb-checkbox-group.js

@@ -0,0 +1,145 @@
+import { p as proxyCustomElement, H, c as createEvent, h } from './p-1407a5e8.js';
+
+const checkboxGroupCss = "/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--tw-border-style:solid;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000}}}@layer theme{:host,:root{--font-sans:ui-sans-serif,system-ui,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\",\"Noto Color Emoji\";--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,\"Liberation Mono\",\"Courier New\",monospace;--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,::backdrop,:after,:before{border:0 solid;box-sizing:border-box;margin:0;padding:0}::file-selector-button{appearance:button;background-color:#0000;border:0 solid;border-radius:0;box-sizing:border-box;color:inherit;font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;margin:0;margin-inline-end:4px;opacity:1;padding:0}:host,html{-webkit-text-size-adjust:100%;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\",\"Noto Color Emoji\");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);line-height:1.5;tab-size:4;-webkit-tap-highlight-color:transparent}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,\"Liberation Mono\",\"Courier New\",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-size:1em;font-variation-settings:var(--default-mono-font-variation-settings,normal)}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}menu,ol,ul{list-style:none}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}button,input,optgroup,select,textarea{background-color:#0000;border-radius:0;color:inherit;font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;opacity:1}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab,red,red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex;padding-block:0}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-meridiem-field,::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.border{border-style:var(--tw-border-style);border-width:1px}.shadow{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}} /*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer components;:host{display:inline-block}.hb-checkbox-group{display:inline-block;font-size:0}::slotted(hb-checkbox){margin-right:30px}::slotted(hb-checkbox:last-child){margin-right:0}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}@property --tw-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:\"*\";inherits:false}@property --tw-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:\"*\";inherits:false}@property --tw-inset-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:\"*\";inherits:false}@property --tw-ring-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:\"*\";inherits:false}@property --tw-inset-ring-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:\"*\";inherits:false}@property --tw-ring-offset-width{syntax:\"<length>\";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:\"*\";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}";
+const HbCheckboxGroupStyle0 = checkboxGroupCss;
+
+const CheckboxGroup = /*@__PURE__*/ proxyCustomElement(class CheckboxGroup extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.hbChange = createEvent(this, "hbChange", 7);
+    }
+    get el() { return this; }
+    /**
+     * 绑定值
+     */
+    modelValue = [];
+    /**
+     * 是否禁用
+     * @default false
+     */
+    disabled = false;
+    /**
+     * 尺寸
+     */
+    size = 'default';
+    /**
+     * 是否显示边框
+     * @default false
+     */
+    border = false;
+    /**
+     * 最小选中数量
+     */
+    min;
+    /**
+     * 最大选中数量
+     */
+    max;
+    /**
+     * 值改变事件
+     */
+    hbChange;
+    checkboxes = [];
+    componentDidLoad() {
+        this.updateCheckboxes();
+    }
+    handleValueChange() {
+        this.updateCheckboxesState();
+    }
+    handlePropsChange() {
+        this.updateCheckboxes();
+    }
+    updateCheckboxes() {
+        const checkboxes = Array.from(this.el.querySelectorAll('hb-checkbox'));
+        this.checkboxes = checkboxes;
+        checkboxes.forEach((checkbox) => {
+            checkbox.disabled = this.disabled || checkbox.disabled;
+            checkbox.size = this.size;
+            checkbox.border = this.border;
+            // 监听checkbox变化
+            checkbox.addEventListener('hbChange', this.handleCheckboxChange);
+        });
+        this.updateCheckboxesState();
+    }
+    updateCheckboxesState() {
+        this.checkboxes.forEach((checkbox) => {
+            if (checkbox.value !== undefined) {
+                const isChecked = this.modelValue.includes(checkbox.value);
+                checkbox.modelValue = isChecked
+                    ? [...this.modelValue]
+                    : this.modelValue.filter((v) => v !== checkbox.value);
+            }
+        });
+    }
+    handleCheckboxChange = (e) => {
+        const checkbox = e.target;
+        const value = checkbox.value;
+        if (value === undefined)
+            return;
+        let newValue;
+        if (this.modelValue.includes(value)) {
+            newValue = this.modelValue.filter((v) => v !== value);
+            // 取消选中后不能低于最小数量
+            if (this.min !== undefined && newValue.length < this.min) {
+                return;
+            }
+        }
+        else {
+            // 选中后不能超过最大数量
+            if (this.max !== undefined && this.modelValue.length >= this.max) {
+                return;
+            }
+            newValue = [...this.modelValue, value];
+        }
+        this.modelValue = newValue;
+        this.hbChange.emit(newValue);
+    };
+    render() {
+        return (h("div", { key: 'bec6679f9d71e61ef19f8c57216be635bed70c7b', class: {
+                'hb-checkbox-group': true,
+            } }, h("slot", { key: '5e137ca5381a35e9a63b99dbed7f1897117daf47' })));
+    }
+    static get watchers() { return {
+        "modelValue": ["handleValueChange"],
+        "disabled": ["handlePropsChange"],
+        "size": ["handlePropsChange"],
+        "border": ["handlePropsChange"]
+    }; }
+    static get style() { return HbCheckboxGroupStyle0; }
+}, [1, "hb-checkbox-group", {
+        "modelValue": [1040],
+        "disabled": [4],
+        "size": [1],
+        "border": [4],
+        "min": [2],
+        "max": [2],
+        "checkboxes": [32]
+    }, undefined, {
+        "modelValue": ["handleValueChange"],
+        "disabled": ["handlePropsChange"],
+        "size": ["handlePropsChange"],
+        "border": ["handlePropsChange"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["hb-checkbox-group"];
+    components.forEach(tagName => { switch (tagName) {
+        case "hb-checkbox-group":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, CheckboxGroup);
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const HbCheckboxGroup = CheckboxGroup;
+const defineCustomElement = defineCustomElement$1;
+
+export { HbCheckboxGroup, defineCustomElement };
+
+//# sourceMappingURL=hb-checkbox-group.js.map

package/dist/components/hb-checkbox-group.js.map

@@ -0,0 +1 @@
+{"file":"hb-checkbox-group.js","mappings":"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","names":[],"sources":["src/components/Checkbox/checkbox-group.css?tag=hb-checkbox-group&encapsulation=shadow","src/components/Checkbox/CheckboxGroup.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n}\n\n.hb-checkbox-group {\n  display: inline-block;\n  font-size: 0;\n}\n\n::slotted(hb-checkbox) {\n  margin-right: 30px;\n}\n\n::slotted(hb-checkbox:last-child) {\n  margin-right: 0;\n}\n\n","import { Component, h, Prop, Event, EventEmitter, State, Watch, Element } from '@stencil/core';\n\n/**\n * CheckboxGroup 多选框组组件\n * 用于管理多个 checkbox\n */\n@Component({\n  tag: 'hb-checkbox-group',\n  styleUrl: 'checkbox-group.css',\n  shadow: true,\n})\nexport class CheckboxGroup {\n  @Element() el: HTMLElement;\n\n  /**\n   * 绑定值\n   */\n  @Prop({ mutable: true }) modelValue: (string | number)[] = [];\n\n  /**\n   * 是否禁用\n   * @default false\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * 尺寸\n   */\n  @Prop() size: 'large' | 'default' | 'small' = 'default';\n\n  /**\n   * 是否显示边框\n   * @default false\n   */\n  @Prop() border: boolean = false;\n\n  /**\n   * 最小选中数量\n   */\n  @Prop() min?: number;\n\n  /**\n   * 最大选中数量\n   */\n  @Prop() max?: number;\n\n  /**\n   * 值改变事件\n   */\n  @Event() hbChange: EventEmitter<(string | number)[]>;\n\n  @State() checkboxes: HTMLHbCheckboxElement[] = [];\n\n  componentDidLoad() {\n    this.updateCheckboxes();\n  }\n\n  @Watch('modelValue')\n  handleValueChange() {\n    this.updateCheckboxesState();\n  }\n\n  @Watch('disabled')\n  @Watch('size')\n  @Watch('border')\n  handlePropsChange() {\n    this.updateCheckboxes();\n  }\n\n  private updateCheckboxes() {\n    const checkboxes = Array.from(\n      this.el.querySelectorAll('hb-checkbox')\n    ) as HTMLHbCheckboxElement[];\n\n    this.checkboxes = checkboxes;\n\n    checkboxes.forEach((checkbox) => {\n      checkbox.disabled = this.disabled || checkbox.disabled;\n      checkbox.size = this.size;\n      checkbox.border = this.border;\n      \n      // 监听checkbox变化\n      checkbox.addEventListener('hbChange', this.handleCheckboxChange);\n    });\n\n    this.updateCheckboxesState();\n  }\n\n  private updateCheckboxesState() {\n    this.checkboxes.forEach((checkbox) => {\n      if (checkbox.value !== undefined) {\n        const isChecked = this.modelValue.includes(checkbox.value);\n        checkbox.modelValue = isChecked\n          ? [...this.modelValue]\n          : this.modelValue.filter((v) => v !== checkbox.value);\n      }\n    });\n  }\n\n  private handleCheckboxChange = (e: CustomEvent) => {\n    const checkbox = e.target as HTMLHbCheckboxElement;\n    const value = checkbox.value;\n\n    if (value === undefined) return;\n\n    let newValue: (string | number)[];\n\n    if (this.modelValue.includes(value)) {\n      newValue = this.modelValue.filter((v) => v !== value);\n      // 取消选中后不能低于最小数量\n      if (this.min !== undefined && newValue.length < this.min) {\n        return;\n      }\n    } else {\n      // 选中后不能超过最大数量\n      if (this.max !== undefined && this.modelValue.length >= this.max) {\n        return;\n      }\n      newValue = [...this.modelValue, value];\n    }\n\n    this.modelValue = newValue;\n    this.hbChange.emit(newValue);\n  };\n\n  render() {\n    return (\n      <div\n        class={{\n          'hb-checkbox-group': true,\n        }}\n      >\n        <slot></slot>\n      </div>\n    );\n  }\n}\n\n"],"version":3}

package/dist/components/hb-checkbox.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface HbCheckbox extends Components.HbCheckbox, HTMLElement {}
+export const HbCheckbox: {
+    prototype: HbCheckbox;
+    new (): HbCheckbox;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/hb-checkbox.js

@@ -0,0 +1,161 @@
+import { p as proxyCustomElement, H, c as createEvent, h } from './p-1407a5e8.js';
+
+const checkboxCss = "/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--tw-border-style:solid;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000}}}@layer theme{:host,:root{--font-sans:ui-sans-serif,system-ui,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\",\"Noto Color Emoji\";--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,\"Liberation Mono\",\"Courier New\",monospace;--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,::backdrop,:after,:before{border:0 solid;box-sizing:border-box;margin:0;padding:0}::file-selector-button{appearance:button;background-color:#0000;border:0 solid;border-radius:0;box-sizing:border-box;color:inherit;font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;margin:0;margin-inline-end:4px;opacity:1;padding:0}:host,html{-webkit-text-size-adjust:100%;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\",\"Noto Color Emoji\");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);line-height:1.5;tab-size:4;-webkit-tap-highlight-color:transparent}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,\"Liberation Mono\",\"Courier New\",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-size:1em;font-variation-settings:var(--default-mono-font-variation-settings,normal)}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}menu,ol,ul{list-style:none}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}button,input,optgroup,select,textarea{background-color:#0000;border-radius:0;color:inherit;font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;opacity:1}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab,red,red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex;padding-block:0}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-meridiem-field,::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.border{border-style:var(--tw-border-style);border-width:1px}.shadow{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}} /*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer components;:host{--hb-checkbox-font-size:14px;--hb-checkbox-font-size-large:16px;--hb-checkbox-font-size-small:12px;--hb-checkbox-color:var(--hb-color-primary);--hb-checkbox-border-color:var(--hb-border-color,#dcdfe6);--hb-checkbox-border-color-checked:var(--hb-color-primary);--hb-checkbox-bg-color:var(--hb-color-white,#fff);--hb-checkbox-text-color:var(--hb-color-text-regular,#606266);--hb-checkbox-disabled-color:var(--hb-color-text-placeholder,#c0c4cc);--hb-checkbox-disabled-bg-color:var(--hb-fill-color-light,#f5f7fa);display:inline-block}.hb-checkbox{align-items:center;color:var(--hb-checkbox-text-color);cursor:pointer;display:inline-flex;font-size:var(--hb-checkbox-font-size);font-weight:500;margin-right:30px;position:relative;-webkit-user-select:none;user-select:none;white-space:nowrap}.hb-checkbox:last-child{margin-right:0}.hb-checkbox__input{cursor:pointer;display:inline-flex;outline:none;position:relative;vertical-align:middle;white-space:nowrap}.hb-checkbox__original{height:0;margin:0;opacity:0;outline:none;position:absolute;width:0;z-index:-1}.hb-checkbox__inner{background-color:var(--hb-checkbox-bg-color);border:var(--hb-border,1px solid var(--hb-checkbox-border-color));border-radius:2px;box-sizing:border-box;display:inline-block;height:14px;position:relative;transition:border-color .25s cubic-bezier(.71,-.46,.29,1.46),background-color .25s cubic-bezier(.71,-.46,.29,1.46);width:14px;z-index:1}.hb-checkbox__inner:after{border:2px solid var(--hb-color-white,#fff);border-left:0;border-top:0;box-sizing:content-box;content:\"\";height:7px;left:4px;position:absolute;top:1px;transform:rotate(45deg)scaleY(0);transform-origin:50%;transition:transform .15s ease-in 50ms;width:3px}.hb-checkbox--checked .hb-checkbox__inner{background-color:var(--hb-checkbox-color);border-color:var(--hb-checkbox-border-color-checked)}.hb-checkbox--checked .hb-checkbox__inner:after{transform:rotate(45deg)scaleY(1)}.hb-checkbox__inner--indeterminate{background-color:var(--hb-checkbox-color);border-color:var(--hb-checkbox-border-color-checked)}.hb-checkbox__inner--indeterminate:after{background-color:var(--hb-color-white,#fff);content:\"\";display:block;height:2px;left:0;position:absolute;right:0;top:5px;transform:scaleX(.5)}.hb-checkbox__label{font-size:var(--hb-checkbox-font-size);line-height:1;padding-left:8px}.hb-checkbox--disabled{cursor:not-allowed}.hb-checkbox--disabled .hb-checkbox__inner{background-color:var(--hb-checkbox-disabled-bg-color);border-color:var(--hb-checkbox-border-color);cursor:not-allowed}.hb-checkbox--disabled .hb-checkbox__inner:after{border-color:var(--hb-checkbox-disabled-color);cursor:not-allowed}.hb-checkbox--disabled .hb-checkbox__label{color:var(--hb-checkbox-disabled-color);cursor:not-allowed}.hb-checkbox--border{border:1px solid var(--hb-checkbox-border-color);border-radius:4px;box-sizing:border-box;padding:9px 15px 9px 9px;white-space:nowrap}.hb-checkbox--border.hb-checkbox--checked{border-color:var(--hb-checkbox-border-color-checked)}.hb-checkbox--border.hb-checkbox--disabled{border-color:var(--hb-checkbox-border-color);cursor:not-allowed}.hb-checkbox--small{font-size:var(--hb-checkbox-font-size-small)}.hb-checkbox--small .hb-checkbox__inner{height:12px;width:12px}.hb-checkbox--small .hb-checkbox__label{padding-left:6px}.hb-checkbox--large{font-size:var(--hb-checkbox-font-size-large)}.hb-checkbox--large .hb-checkbox__inner{height:16px;width:16px}.hb-checkbox--large .hb-checkbox__label{padding-left:10px}.hb-checkbox:hover:not(.hb-checkbox--disabled) .hb-checkbox__inner{border-color:var(--hb-checkbox-border-color-checked)}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}@property --tw-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:\"*\";inherits:false}@property --tw-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:\"*\";inherits:false}@property --tw-inset-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:\"*\";inherits:false}@property --tw-ring-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:\"*\";inherits:false}@property --tw-inset-ring-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:\"*\";inherits:false}@property --tw-ring-offset-width{syntax:\"<length>\";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:\"*\";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}";
+const HbCheckboxStyle0 = checkboxCss;
+
+const Checkbox = /*@__PURE__*/ proxyCustomElement(class Checkbox extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.hbChange = createEvent(this, "hbChange", 7);
+    }
+    /**
+     * 绑定值
+     */
+    modelValue = false;
+    /**
+     * 当前值（用于单个 checkbox）
+     */
+    value;
+    /**
+     * 是否禁用
+     * @default false
+     */
+    disabled = false;
+    /**
+     * 是否选中
+     * @default false
+     */
+    checked = false;
+    /**
+     * 是否不确定状态
+     * @default false
+     */
+    indeterminate = false;
+    /**
+     * 原生 name 属性
+     */
+    name;
+    /**
+     * 原生 id 属性
+     */
+    checkboxId;
+    /**
+     * 文本标签
+     */
+    label;
+    /**
+     * 是否显示边框
+     * @default false
+     */
+    border = false;
+    /**
+     * 尺寸
+     */
+    size = 'default';
+    /**
+     * 值改变事件
+     */
+    hbChange;
+    isChecked = false;
+    handleValueChange() {
+        this.updateChecked();
+    }
+    componentDidLoad() {
+        this.updateChecked();
+    }
+    updateChecked() {
+        if (this.value !== undefined) {
+            // 在 checkbox group 中
+            const modelValue = this.modelValue;
+            this.isChecked = Array.isArray(modelValue) && modelValue.includes(this.value);
+        }
+        else {
+            // 单个 checkbox
+            this.isChecked = this.checked || this.modelValue;
+        }
+    }
+    handleChange = (e) => {
+        const target = e.target;
+        if (this.disabled) {
+            e.preventDefault();
+            return;
+        }
+        if (this.value !== undefined) {
+            // 在 checkbox group 中
+            const modelValue = this.modelValue || [];
+            let newValue;
+            if (target.checked) {
+                newValue = [...modelValue, this.value];
+            }
+            else {
+                newValue = modelValue.filter(v => v !== this.value);
+            }
+            this.modelValue = newValue;
+            this.hbChange.emit(newValue);
+        }
+        else {
+            // 单个 checkbox
+            this.modelValue = target.checked;
+            this.isChecked = target.checked;
+            this.hbChange.emit(target.checked);
+        }
+    };
+    render() {
+        const inputId = this.checkboxId || `hb-checkbox-${Math.random().toString(36).substr(2, 9)}`;
+        return (h("label", { key: '4a8a921d4acee922e78022b7a2d9acbbe4c81ca9', class: {
+                'hb-checkbox': true,
+                'hb-checkbox--checked': this.isChecked,
+                'hb-checkbox--disabled': this.disabled,
+                'hb-checkbox--border': this.border,
+                [`hb-checkbox--${this.size}`]: true,
+            } }, h("span", { key: '53b12cc28cdb425aae8313b82e42c3d6495ba29b', class: "hb-checkbox__input" }, h("input", { key: '91bf4e03b846281ba487dbe66a7e89ecd90cec47', type: "checkbox", id: inputId, name: this.name, checked: this.isChecked, disabled: this.disabled, indeterminate: this.indeterminate, onChange: this.handleChange, class: "hb-checkbox__original" }), h("span", { key: 'f8c2cf109ccd867a11d90202b2ccc9e65a24f209', class: {
+                'hb-checkbox__inner': true,
+                'hb-checkbox__inner--indeterminate': this.indeterminate,
+            } })), (this.label || this.value !== undefined) && (h("span", { key: '388050b4cc69b3d760ba7d3ae9f115adeb3e47f0', class: "hb-checkbox__label" }, h("slot", { key: '3368be81921aa59e5114bb975e8821aab60ec396' }, this.label || this.value)))));
+    }
+    static get watchers() { return {
+        "modelValue": ["handleValueChange"],
+        "checked": ["handleValueChange"],
+        "value": ["handleValueChange"]
+    }; }
+    static get style() { return HbCheckboxStyle0; }
+}, [1, "hb-checkbox", {
+        "modelValue": [1028, "model-value"],
+        "value": [8],
+        "disabled": [4],
+        "checked": [4],
+        "indeterminate": [4],
+        "name": [1],
+        "checkboxId": [1, "checkbox-id"],
+        "label": [1],
+        "border": [4],
+        "size": [1],
+        "isChecked": [32]
+    }, undefined, {
+        "modelValue": ["handleValueChange"],
+        "checked": ["handleValueChange"],
+        "value": ["handleValueChange"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["hb-checkbox"];
+    components.forEach(tagName => { switch (tagName) {
+        case "hb-checkbox":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, Checkbox);
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const HbCheckbox = Checkbox;
+const defineCustomElement = defineCustomElement$1;
+
+export { HbCheckbox, defineCustomElement };
+
+//# sourceMappingURL=hb-checkbox.js.map

package/dist/components/hb-checkbox.js.map

@@ -0,0 +1 @@
+{"file":"hb-checkbox.js","mappings":"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","names":[],"sources":["src/components/Checkbox/checkbox.css?tag=hb-checkbox&encapsulation=shadow","src/components/Checkbox/Checkbox.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n  --hb-checkbox-font-size: 14px;\n  --hb-checkbox-font-size-large: 16px;\n  --hb-checkbox-font-size-small: 12px;\n  --hb-checkbox-color: var(--hb-color-primary);\n  --hb-checkbox-border-color: var(--hb-border-color, #dcdfe6);\n  --hb-checkbox-border-color-checked: var(--hb-color-primary);\n  --hb-checkbox-bg-color: var(--hb-color-white, #ffffff);\n  --hb-checkbox-text-color: var(--hb-color-text-regular, #606266);\n  --hb-checkbox-disabled-color: var(--hb-color-text-placeholder, #c0c4cc);\n  --hb-checkbox-disabled-bg-color: var(--hb-fill-color-light, #f5f7fa);\n}\n\n.hb-checkbox {\n  color: var(--hb-checkbox-text-color);\n  font-weight: 500;\n  font-size: var(--hb-checkbox-font-size);\n  position: relative;\n  cursor: pointer;\n  display: inline-flex;\n  align-items: center;\n  white-space: nowrap;\n  user-select: none;\n  margin-right: 30px;\n}\n\n.hb-checkbox:last-child {\n  margin-right: 0;\n}\n\n.hb-checkbox__input {\n  white-space: nowrap;\n  cursor: pointer;\n  outline: none;\n  display: inline-flex;\n  position: relative;\n  vertical-align: middle;\n}\n\n.hb-checkbox__original {\n  opacity: 0;\n  outline: none;\n  position: absolute;\n  margin: 0;\n  width: 0;\n  height: 0;\n  z-index: -1;\n}\n\n.hb-checkbox__inner {\n  display: inline-block;\n  position: relative;\n  border: var(--hb-border, 1px solid var(--hb-checkbox-border-color));\n  border-radius: 2px;\n  box-sizing: border-box;\n  width: 14px;\n  height: 14px;\n  background-color: var(--hb-checkbox-bg-color);\n  z-index: 1;\n  transition: border-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46),\n    background-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46);\n}\n\n.hb-checkbox__inner::after {\n  box-sizing: content-box;\n  content: '';\n  border: 2px solid var(--hb-color-white, #ffffff);\n  border-left: 0;\n  border-top: 0;\n  height: 7px;\n  left: 4px;\n  position: absolute;\n  top: 1px;\n  transform: rotate(45deg) scaleY(0);\n  width: 3px;\n  transition: transform 0.15s ease-in 0.05s;\n  transform-origin: center;\n}\n\n.hb-checkbox--checked .hb-checkbox__inner {\n  background-color: var(--hb-checkbox-color);\n  border-color: var(--hb-checkbox-border-color-checked);\n}\n\n.hb-checkbox--checked .hb-checkbox__inner::after {\n  transform: rotate(45deg) scaleY(1);\n}\n\n.hb-checkbox__inner--indeterminate {\n  background-color: var(--hb-checkbox-color);\n  border-color: var(--hb-checkbox-border-color-checked);\n}\n\n.hb-checkbox__inner--indeterminate::after {\n  content: '';\n  position: absolute;\n  display: block;\n  background-color: var(--hb-color-white, #ffffff);\n  height: 2px;\n  transform: scaleX(0.5);\n  left: 0;\n  right: 0;\n  top: 5px;\n}\n\n.hb-checkbox__label {\n  padding-left: 8px;\n  line-height: 1;\n  font-size: var(--hb-checkbox-font-size);\n}\n\n.hb-checkbox--disabled {\n  cursor: not-allowed;\n}\n\n.hb-checkbox--disabled .hb-checkbox__inner {\n  background-color: var(--hb-checkbox-disabled-bg-color);\n  border-color: var(--hb-checkbox-border-color);\n  cursor: not-allowed;\n}\n\n.hb-checkbox--disabled .hb-checkbox__inner::after {\n  cursor: not-allowed;\n  border-color: var(--hb-checkbox-disabled-color);\n}\n\n.hb-checkbox--disabled .hb-checkbox__label {\n  color: var(--hb-checkbox-disabled-color);\n  cursor: not-allowed;\n}\n\n.hb-checkbox--border {\n  padding: 9px 15px 9px 9px;\n  border-radius: 4px;\n  border: 1px solid var(--hb-checkbox-border-color);\n  box-sizing: border-box;\n  white-space: nowrap;\n}\n\n.hb-checkbox--border.hb-checkbox--checked {\n  border-color: var(--hb-checkbox-border-color-checked);\n}\n\n.hb-checkbox--border.hb-checkbox--disabled {\n  border-color: var(--hb-checkbox-border-color);\n  cursor: not-allowed;\n}\n\n.hb-checkbox--small {\n  font-size: var(--hb-checkbox-font-size-small);\n}\n\n.hb-checkbox--small .hb-checkbox__inner {\n  width: 12px;\n  height: 12px;\n}\n\n.hb-checkbox--small .hb-checkbox__label {\n  padding-left: 6px;\n}\n\n.hb-checkbox--large {\n  font-size: var(--hb-checkbox-font-size-large);\n}\n\n.hb-checkbox--large .hb-checkbox__inner {\n  width: 16px;\n  height: 16px;\n}\n\n.hb-checkbox--large .hb-checkbox__label {\n  padding-left: 10px;\n}\n\n.hb-checkbox:hover:not(.hb-checkbox--disabled) .hb-checkbox__inner {\n  border-color: var(--hb-checkbox-border-color-checked);\n}\n\n","import { Component, h, Prop, Event, EventEmitter, State, Watch } from '@stencil/core';\n\nexport interface CheckboxOption {\n  label: string;\n  value: string | number;\n  disabled?: boolean;\n}\n\n/**\n * Checkbox 多选框组件\n * 一组备选项中进行多选\n */\n@Component({\n  tag: 'hb-checkbox',\n  styleUrl: 'checkbox.css',\n  shadow: true,\n})\nexport class Checkbox {\n  /**\n   * 绑定值\n   */\n  @Prop({ mutable: true }) modelValue: boolean | (string | number)[] = false;\n\n  /**\n   * 当前值（用于单个 checkbox）\n   */\n  @Prop() value?: string | number;\n\n  /**\n   * 是否禁用\n   * @default false\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * 是否选中\n   * @default false\n   */\n  @Prop() checked: boolean = false;\n\n  /**\n   * 是否不确定状态\n   * @default false\n   */\n  @Prop() indeterminate: boolean = false;\n\n  /**\n   * 原生 name 属性\n   */\n  @Prop() name?: string;\n\n  /**\n   * 原生 id 属性\n   */\n  @Prop() checkboxId?: string;\n\n  /**\n   * 文本标签\n   */\n  @Prop() label?: string;\n\n  /**\n   * 是否显示边框\n   * @default false\n   */\n  @Prop() border: boolean = false;\n\n  /**\n   * 尺寸\n   */\n  @Prop() size: 'large' | 'default' | 'small' = 'default';\n\n  /**\n   * 值改变事件\n   */\n  @Event() hbChange: EventEmitter<boolean | (string | number)[]>;\n\n  @State() isChecked: boolean = false;\n\n  @Watch('modelValue')\n  @Watch('checked')\n  @Watch('value')\n  handleValueChange() {\n    this.updateChecked();\n  }\n\n  componentDidLoad() {\n    this.updateChecked();\n  }\n\n  private updateChecked() {\n    if (this.value !== undefined) {\n      // 在 checkbox group 中\n      const modelValue = this.modelValue as (string | number)[];\n      this.isChecked = Array.isArray(modelValue) && modelValue.includes(this.value);\n    } else {\n      // 单个 checkbox\n      this.isChecked = this.checked || (this.modelValue as boolean);\n    }\n  }\n\n  private handleChange = (e: Event) => {\n    const target = e.target as HTMLInputElement;\n    \n    if (this.disabled) {\n      e.preventDefault();\n      return;\n    }\n\n    if (this.value !== undefined) {\n      // 在 checkbox group 中\n      const modelValue = (this.modelValue as (string | number)[]) || [];\n      let newValue: (string | number)[];\n      \n      if (target.checked) {\n        newValue = [...modelValue, this.value];\n      } else {\n        newValue = modelValue.filter(v => v !== this.value);\n      }\n      \n      this.modelValue = newValue;\n      this.hbChange.emit(newValue);\n    } else {\n      // 单个 checkbox\n      this.modelValue = target.checked;\n      this.isChecked = target.checked;\n      this.hbChange.emit(target.checked);\n    }\n  };\n\n  render() {\n    const inputId = this.checkboxId || `hb-checkbox-${Math.random().toString(36).substr(2, 9)}`;\n    \n    return (\n      <label\n        class={{\n          'hb-checkbox': true,\n          'hb-checkbox--checked': this.isChecked,\n          'hb-checkbox--disabled': this.disabled,\n          'hb-checkbox--border': this.border,\n          [`hb-checkbox--${this.size}`]: true,\n        }}\n      >\n        <span class=\"hb-checkbox__input\">\n          <input\n            type=\"checkbox\"\n            id={inputId}\n            name={this.name}\n            checked={this.isChecked}\n            disabled={this.disabled}\n            indeterminate={this.indeterminate}\n            onChange={this.handleChange}\n            class=\"hb-checkbox__original\"\n          />\n          <span\n            class={{\n              'hb-checkbox__inner': true,\n              'hb-checkbox__inner--indeterminate': this.indeterminate,\n            }}\n          ></span>\n        </span>\n        {(this.label || this.value !== undefined) && (\n          <span class=\"hb-checkbox__label\">\n            <slot>{this.label || this.value}</slot>\n          </span>\n        )}\n      </label>\n    );\n  }\n}\n\n"],"version":3}

package/dist/components/hb-collapse-item.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface HbCollapseItem extends Components.HbCollapseItem, HTMLElement {}
+export const HbCollapseItem: {
+    prototype: HbCollapseItem;
+    new (): HbCollapseItem;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/hb-collapse-item.js

@@ -0,0 +1,81 @@
+import { p as proxyCustomElement, H, h } from './p-1407a5e8.js';
+import { i as isActivationKey } from './p-cc0aeb50.js';
+
+const CollapseItem = /*@__PURE__*/ proxyCustomElement(class CollapseItem extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+    }
+    get el() { return this; }
+    /** 唯一标识（手风琴模式协调用） */
+    key = '';
+    /** 标题 */
+    title = '';
+    /** 是否禁用 */
+    disabled = false;
+    /** 是否展开（受控；由父级 hb-collapse 在手风琴模式下联动） */
+    active = false;
+    isOpen = false;
+    componentDidLoad() {
+        this.isOpen = this.active;
+    }
+    handleActiveChange(val) {
+        this.isOpen = val;
+    }
+    toggle = () => {
+        if (this.disabled)
+            return;
+        this.isOpen = !this.isOpen;
+        this.active = this.isOpen;
+        // 通知父级 hb-collapse（composed 穿越 shadow 边界，用于手风琴协调）
+        this.el.dispatchEvent(new CustomEvent('hbCollapseItemToggle', {
+            detail: { key: this.key, active: this.isOpen },
+            bubbles: true,
+            composed: true,
+        }));
+    };
+    handleHeaderKeydown = (e) => {
+        if (this.disabled)
+            return;
+        if (isActivationKey(e.key)) {
+            e.preventDefault();
+            this.toggle();
+        }
+    };
+    render() {
+        return (h("div", { key: '37cf0afe29b3a3b6bb538a8dc962804a71c9dce9', class: { 'hb-collapse-item': true, 'hb-collapse-item--active': this.isOpen, 'hb-collapse-item--disabled': this.disabled } }, h("div", { key: 'be864927a75dc717aab21745f728adbd149fd3b8', class: "hb-collapse-item__header", role: "button", tabindex: this.disabled ? -1 : 0, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : undefined, onClick: this.toggle, onKeyDown: this.handleHeaderKeydown }, h("span", { key: 'afea7c20f59efc964aeebfb995d0b713ebb28542', class: "hb-collapse-item__title" }, this.title), h("span", { key: '1aa30ec50c6105f8a07a2ac30ea8108d19923eb8', class: { 'hb-collapse-item__arrow': true, 'hb-collapse-item__arrow--open': this.isOpen } }, "\u25B6")), h("div", { key: '6e6d66dd8477019c7dc8dbc66fd81646e8c3899a', class: { 'hb-collapse-item__wrapper': true, 'hb-collapse-item__wrapper--open': this.isOpen } }, h("div", { key: '776a67a054ea8fd5b664f2e475843ff2344b41c4', class: "hb-collapse-item__content" }, h("slot", { key: '1fc2c8492891d16fef88b83c2f46207a2508a81e' })))));
+    }
+    static get watchers() { return {
+        "active": ["handleActiveChange"]
+    }; }
+}, [1, "hb-collapse-item", {
+        "key": [1],
+        "title": [1],
+        "disabled": [4],
+        "active": [1028],
+        "isOpen": [32]
+    }, undefined, {
+        "active": ["handleActiveChange"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["hb-collapse-item"];
+    components.forEach(tagName => { switch (tagName) {
+        case "hb-collapse-item":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, CollapseItem);
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const HbCollapseItem = CollapseItem;
+const defineCustomElement = defineCustomElement$1;
+
+export { HbCollapseItem, defineCustomElement };
+
+//# sourceMappingURL=hb-collapse-item.js.map

package/dist/components/hb-collapse-item.js.map

@@ -0,0 +1 @@
+{"file":"hb-collapse-item.js","mappings":";;;MAIa,YAAY;;;;;;;;IAIf,GAAG,GAAW,EAAE,CAAC;;IAGjB,KAAK,GAAW,EAAE,CAAC;;IAGnB,QAAQ,GAAY,KAAK,CAAC;;IAGT,MAAM,GAAY,KAAK,CAAC;IAExC,MAAM,GAAY,KAAK,CAAC;IAEjC,gBAAgB;QACd,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC;KAC3B;IAGD,kBAAkB,CAAC,GAAY;QAC7B,IAAI,CAAC,MAAM,GAAG,GAAG,CAAC;KACnB;IAEO,MAAM,GAAG;QACf,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAO;QAC1B,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC;QAC3B,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC;;QAE1B,IAAI,CAAC,EAAE,CAAC,aAAa,CACnB,IAAI,WAAW,CAAC,sBAAsB,EAAE;YACtC,MAAM,EAAE,EAAE,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE;YAC9C,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACf,CAAC,CACH,CAAC;KACH,CAAC;IAEM,mBAAmB,GAAG,CAAC,CAAgB;QAC7C,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAO;QAC1B,IAAI,eAAe,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE;YAC1B,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,IAAI,CAAC,MAAM,EAAE,CAAC;SACf;KACF,CAAC;IAEF,MAAM;QACJ,QACE,4DACE,KAAK,EAAE,EAAE,kBAAkB,EAAE,IAAI,EAAE,0BAA0B,EAAE,IAAI,CAAC,MAAM,EAAE,4BAA4B,EAAE,IAAI,CAAC,QAAQ,EAAE,IAEzH,4DACE,KAAK,EAAC,0BAA0B,EAChC,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,GAAG,CAAC,mBACjB,IAAI,CAAC,MAAM,GAAG,MAAM,GAAG,OAAO,mBAC9B,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,SAAS,EACjD,OAAO,EAAE,IAAI,CAAC,MAAM,EACpB,SAAS,EAAE,IAAI,CAAC,mBAAmB,IAEnC,6DAAM,KAAK,EAAC,yBAAyB,IAAE,IAAI,CAAC,KAAK,CAAQ,EACzD,6DAAM,KAAK,EAAE,EAAE,yBAAyB,EAAE,IAAI,EAAE,+BAA+B,EAAE,IAAI,CAAC,MAAM,EAAE,aAAU,CACpG,EACN,4DAAK,KAAK,EAAE,EAAE,2BAA2B,EAAE,IAAI,EAAE,iCAAiC,EAAE,IAAI,CAAC,MAAM,EAAE,IAC/F,4DAAK,KAAK,EAAC,2BAA2B,IACpC,8DAAQ,CACJ,CACF,CACF,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/Collapse/CollapseItem.tsx"],"sourcesContent":["import { Component, h, Prop, State, Element, Watch } from '@stencil/core';\nimport { isActivationKey } from '../../utils/a11y';\n\n@Component({ tag: 'hb-collapse-item', shadow: true })\nexport class CollapseItem {\n  @Element() el: HTMLElement;\n\n  /** 唯一标识（手风琴模式协调用） */\n  @Prop() key: string = '';\n\n  /** 标题 */\n  @Prop() title: string = '';\n\n  /** 是否禁用 */\n  @Prop() disabled: boolean = false;\n\n  /** 是否展开（受控；由父级 hb-collapse 在手风琴模式下联动） */\n  @Prop({ mutable: true }) active: boolean = false;\n\n  @State() isOpen: boolean = false;\n\n  componentDidLoad() {\n    this.isOpen = this.active;\n  }\n\n  @Watch('active')\n  handleActiveChange(val: boolean) {\n    this.isOpen = val;\n  }\n\n  private toggle = () => {\n    if (this.disabled) return;\n    this.isOpen = !this.isOpen;\n    this.active = this.isOpen;\n    // 通知父级 hb-collapse（composed 穿越 shadow 边界，用于手风琴协调）\n    this.el.dispatchEvent(\n      new CustomEvent('hbCollapseItemToggle', {\n        detail: { key: this.key, active: this.isOpen },\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  };\n\n  private handleHeaderKeydown = (e: KeyboardEvent) => {\n    if (this.disabled) return;\n    if (isActivationKey(e.key)) {\n      e.preventDefault();\n      this.toggle();\n    }\n  };\n\n  render() {\n    return (\n      <div\n        class={{ 'hb-collapse-item': true, 'hb-collapse-item--active': this.isOpen, 'hb-collapse-item--disabled': this.disabled }}\n      >\n        <div\n          class=\"hb-collapse-item__header\"\n          role=\"button\"\n          tabindex={this.disabled ? -1 : 0}\n          aria-expanded={this.isOpen ? 'true' : 'false'}\n          aria-disabled={this.disabled ? 'true' : undefined}\n          onClick={this.toggle}\n          onKeyDown={this.handleHeaderKeydown}\n        >\n          <span class=\"hb-collapse-item__title\">{this.title}</span>\n          <span class={{ 'hb-collapse-item__arrow': true, 'hb-collapse-item__arrow--open': this.isOpen }}>▶</span>\n        </div>\n        <div class={{ 'hb-collapse-item__wrapper': true, 'hb-collapse-item__wrapper--open': this.isOpen }}>\n          <div class=\"hb-collapse-item__content\">\n            <slot />\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/hb-collapse.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface HbCollapse extends Components.HbCollapse, HTMLElement {}
+export const HbCollapse: {
+    prototype: HbCollapse;
+    new (): HbCollapse;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/hb-collapse.js

@@ -0,0 +1,58 @@
+import { p as proxyCustomElement, H, h } from './p-1407a5e8.js';
+
+const collapseCss = "/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000}}}@layer theme{:host,:root{--font-sans:ui-sans-serif,system-ui,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\",\"Noto Color Emoji\";--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,\"Liberation Mono\",\"Courier New\",monospace;--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,::backdrop,:after,:before{border:0 solid;box-sizing:border-box;margin:0;padding:0}::file-selector-button{appearance:button;background-color:#0000;border:0 solid;border-radius:0;box-sizing:border-box;color:inherit;font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;margin:0;margin-inline-end:4px;opacity:1;padding:0}:host,html{-webkit-text-size-adjust:100%;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\",\"Noto Color Emoji\");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);line-height:1.5;tab-size:4;-webkit-tap-highlight-color:transparent}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,\"Liberation Mono\",\"Courier New\",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-size:1em;font-variation-settings:var(--default-mono-font-variation-settings,normal)}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}menu,ol,ul{list-style:none}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}button,input,optgroup,select,textarea{background-color:#0000;border-radius:0;color:inherit;font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;opacity:1}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab,red,red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex;padding-block:0}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-meridiem-field,::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.shadow{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}} /*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer components;:host{display:block}.hb-collapse{border-bottom:1px solid var(--hb-color-border-secondary);border-top:1px solid var(--hb-color-border-secondary)}@property --tw-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:\"*\";inherits:false}@property --tw-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:\"*\";inherits:false}@property --tw-inset-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:\"*\";inherits:false}@property --tw-ring-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:\"*\";inherits:false}@property --tw-inset-ring-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:\"*\";inherits:false}@property --tw-ring-offset-width{syntax:\"<length>\";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:\"*\";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}";
+const HbCollapseStyle0 = collapseCss;
+
+const Collapse = /*@__PURE__*/ proxyCustomElement(class Collapse extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+    }
+    get el() { return this; }
+    /** 是否开启手风琴模式（同时仅展开一项） */
+    accordion = false;
+    componentDidLoad() {
+        this.el.addEventListener('hbCollapseItemToggle', ((e) => {
+            if (!this.accordion)
+                return;
+            const { active } = e.detail;
+            // 手风琴模式：某项展开时，关闭其余项
+            if (!active)
+                return;
+            const current = e.target;
+            this.el.querySelectorAll('hb-collapse-item').forEach((item) => {
+                if (item !== current) {
+                    item.active = false;
+                }
+            });
+        }));
+    }
+    render() {
+        return (h("div", { key: '24dd4feed226f43872d718544b72ca82415645fa', class: { 'hb-collapse': true, 'hb-collapse--accordion': this.accordion } }, h("slot", { key: 'f0f66d8ffb59b9bdebe72a093eea33551a1cd5c9' })));
+    }
+    static get style() { return HbCollapseStyle0; }
+}, [1, "hb-collapse", {
+        "accordion": [1028]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["hb-collapse"];
+    components.forEach(tagName => { switch (tagName) {
+        case "hb-collapse":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, Collapse);
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const HbCollapse = Collapse;
+const defineCustomElement = defineCustomElement$1;
+
+export { HbCollapse, defineCustomElement };
+
+//# sourceMappingURL=hb-collapse.js.map

package/dist/components/hb-collapse.js.map

@@ -0,0 +1 @@
+{"file":"hb-collapse.js","mappings":";;AAAA,MAAM,WAAW,GAAG,6vLAA6vL,CAAC;AAClxL,yBAAe,WAAW;;MCEb,QAAQ;;;;;;;;IAIM,SAAS,GAAY,KAAK,CAAC;IAEpD,gBAAgB;QACd,IAAI,CAAC,EAAE,CAAC,gBAAgB,CACtB,sBAAsB,GACrB,CAAC,CAAc;YACd,IAAI,CAAC,IAAI,CAAC,SAAS;gBAAE,OAAO;YAC5B,MAAM,EAAE,MAAM,EAAE,GAAG,CAAC,CAAC,MAAM,CAAC;;YAE5B,IAAI,CAAC,MAAM;gBAAE,OAAO;YACpB,MAAM,OAAO,GAAG,CAAC,CAAC,MAAqB,CAAC;YACxC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,kBAAkB,CAAC,CAAC,OAAO,CAAC,CAAC,IAAI;gBACxD,IAAI,IAAI,KAAK,OAAO,EAAE;oBACnB,IAAY,CAAC,MAAM,GAAG,KAAK,CAAC;iBAC9B;aACF,CAAC,CAAC;SACJ,EACF,CAAC;KACH;IAED,MAAM;QACJ,QACE,4DAAK,KAAK,EAAE,EAAE,aAAa,EAAE,IAAI,EAAE,wBAAwB,EAAE,IAAI,CAAC,SAAS,EAAE,IAC3E,8DAAQ,CACJ,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/Collapse/collapse.css?tag=hb-collapse&encapsulation=shadow","src/components/Collapse/Collapse.tsx"],"sourcesContent":[":host { display: block; }\n.hb-collapse { border-top: 1px solid var(--hb-color-border-secondary); border-bottom: 1px solid var(--hb-color-border-secondary); }\n","import { Component, h, Prop, Element } from '@stencil/core';\n\n@Component({ tag: 'hb-collapse', styleUrl: 'collapse.css', shadow: true })\nexport class Collapse {\n  @Element() el: HTMLElement;\n\n  /** 是否开启手风琴模式（同时仅展开一项） */\n  @Prop({ mutable: true }) accordion: boolean = false;\n\n  componentDidLoad() {\n    this.el.addEventListener(\n      'hbCollapseItemToggle',\n      ((e: CustomEvent) => {\n        if (!this.accordion) return;\n        const { active } = e.detail;\n        // 手风琴模式：某项展开时，关闭其余项\n        if (!active) return;\n        const current = e.target as HTMLElement;\n        this.el.querySelectorAll('hb-collapse-item').forEach((item) => {\n          if (item !== current) {\n            (item as any).active = false;\n          }\n        });\n      }) as EventListener,\n    );\n  }\n\n  render() {\n    return (\n      <div class={{ 'hb-collapse': true, 'hb-collapse--accordion': this.accordion }}>\n        <slot />\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/hb-color-picker-panel.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface HbColorPickerPanel extends Components.HbColorPickerPanel, HTMLElement {}
+export const HbColorPickerPanel: {
+    prototype: HbColorPickerPanel;
+    new (): HbColorPickerPanel;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;