huibo-ui 0.3.0

package/dist/cjs/hb-checkbox-group.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"hb-checkbox-group.entry.cjs.js","mappings":"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","names":["h"],"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/cjs/hb-checkbox.cjs.entry.js

@@ -0,0 +1,130 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-5aa5c817.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 = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.hbChange = index.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 (index.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,
+            } }, index.h("span", { key: '53b12cc28cdb425aae8313b82e42c3d6495ba29b', class: "hb-checkbox__input" }, index.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" }), index.h("span", { key: 'f8c2cf109ccd867a11d90202b2ccc9e65a24f209', class: {
+                'hb-checkbox__inner': true,
+                'hb-checkbox__inner--indeterminate': this.indeterminate,
+            } })), (this.label || this.value !== undefined) && (index.h("span", { key: '388050b4cc69b3d760ba7d3ae9f115adeb3e47f0', class: "hb-checkbox__label" }, index.h("slot", { key: '3368be81921aa59e5114bb975e8821aab60ec396' }, this.label || this.value)))));
+    }
+    static get watchers() { return {
+        "modelValue": ["handleValueChange"],
+        "checked": ["handleValueChange"],
+        "value": ["handleValueChange"]
+    }; }
+};
+Checkbox.style = HbCheckboxStyle0;
+
+exports.hb_checkbox = Checkbox;
+
+//# sourceMappingURL=hb-checkbox.cjs.entry.js.map

package/dist/cjs/hb-checkbox.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"hb-checkbox.entry.cjs.js","mappings":"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","names":["h"],"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/cjs/hb-collapse-item.cjs.entry.js

@@ -0,0 +1,58 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-5aa5c817.js');
+const a11y = require('./a11y-802de67a.js');
+
+const CollapseItem = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    get el() { return index.getElement(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 (a11y.isActivationKey(e.key)) {
+            e.preventDefault();
+            this.toggle();
+        }
+    };
+    render() {
+        return (index.h("div", { key: '37cf0afe29b3a3b6bb538a8dc962804a71c9dce9', class: { 'hb-collapse-item': true, 'hb-collapse-item--active': this.isOpen, 'hb-collapse-item--disabled': this.disabled } }, index.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 }, index.h("span", { key: 'afea7c20f59efc964aeebfb995d0b713ebb28542', class: "hb-collapse-item__title" }, this.title), index.h("span", { key: '1aa30ec50c6105f8a07a2ac30ea8108d19923eb8', class: { 'hb-collapse-item__arrow': true, 'hb-collapse-item__arrow--open': this.isOpen } }, "\u25B6")), index.h("div", { key: '6e6d66dd8477019c7dc8dbc66fd81646e8c3899a', class: { 'hb-collapse-item__wrapper': true, 'hb-collapse-item__wrapper--open': this.isOpen } }, index.h("div", { key: '776a67a054ea8fd5b664f2e475843ff2344b41c4', class: "hb-collapse-item__content" }, index.h("slot", { key: '1fc2c8492891d16fef88b83c2f46207a2508a81e' })))));
+    }
+    static get watchers() { return {
+        "active": ["handleActiveChange"]
+    }; }
+};
+
+exports.hb_collapse_item = CollapseItem;
+
+//# sourceMappingURL=hb-collapse-item.cjs.entry.js.map

package/dist/cjs/hb-collapse-item.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"hb-collapse-item.entry.cjs.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,IAAIA,oBAAe,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE;YAC1B,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,IAAI,CAAC,MAAM,EAAE,CAAC;SACf;KACF,CAAC;IAEF,MAAM;QACJ,QACEC,kEACE,KAAK,EAAE,EAAE,kBAAkB,EAAE,IAAI,EAAE,0BAA0B,EAAE,IAAI,CAAC,MAAM,EAAE,4BAA4B,EAAE,IAAI,CAAC,QAAQ,EAAE,IAEzHA,kEACE,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,IAEnCA,mEAAM,KAAK,EAAC,yBAAyB,IAAE,IAAI,CAAC,KAAK,CAAQ,EACzDA,mEAAM,KAAK,EAAE,EAAE,yBAAyB,EAAE,IAAI,EAAE,+BAA+B,EAAE,IAAI,CAAC,MAAM,EAAE,aAAU,CACpG,EACNA,kEAAK,KAAK,EAAE,EAAE,2BAA2B,EAAE,IAAI,EAAE,iCAAiC,EAAE,IAAI,CAAC,MAAM,EAAE,IAC/FA,kEAAK,KAAK,EAAC,2BAA2B,IACpCA,oEAAQ,CACJ,CACF,CACF,EACN;KACH;;;;;;;;","names":["isActivationKey","h"],"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/cjs/hb-collapse.cjs.entry.js

@@ -0,0 +1,41 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-5aa5c817.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 = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    get el() { return index.getElement(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 (index.h("div", { key: '24dd4feed226f43872d718544b72ca82415645fa', class: { 'hb-collapse': true, 'hb-collapse--accordion': this.accordion } }, index.h("slot", { key: 'f0f66d8ffb59b9bdebe72a093eea33551a1cd5c9' })));
+    }
+};
+Collapse.style = HbCollapseStyle0;
+
+exports.hb_collapse = Collapse;
+
+//# sourceMappingURL=hb-collapse.cjs.entry.js.map

package/dist/cjs/hb-collapse.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"hb-collapse.entry.cjs.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,QACEA,kEAAK,KAAK,EAAE,EAAE,aAAa,EAAE,IAAI,EAAE,wBAAwB,EAAE,IAAI,CAAC,SAAS,EAAE,IAC3EA,oEAAQ,CACJ,EACN;KACH;;;;;;","names":["h"],"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/cjs/hb-color-picker-panel.cjs.entry.js

@@ -0,0 +1,86 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-5aa5c817.js');
+
+const colorPickerPanelCss = "/*! 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-color-picker-panel{background-color:var(--hb-color-white,#fff);border-radius:4px;padding:12px}.hb-color-picker-panel__saturation{border-radius:4px;cursor:crosshair;height:180px;overflow:hidden;position:relative;width:100%}.hb-color-picker-panel__saturation-white{background:linear-gradient(90deg,#fff,#fff0);inset:0;position:absolute}.hb-color-picker-panel__saturation-black{background:linear-gradient(#0000,#000);inset:0;position:absolute}.hb-color-picker-panel__saturation-pointer{border:2px solid var(--hb-color-white,#fff);border-radius:50%;box-shadow:0 0 2px #0000004d;height:12px;position:absolute;transform:translate(-50%,-50%);width:12px}.hb-color-picker-panel__controls{margin-top:12px}.hb-color-picker-panel__alpha,.hb-color-picker-panel__hue{border-radius:2px;cursor:pointer;height:12px;margin-bottom:8px;position:relative}.hb-color-picker-panel__hue-bar{background:linear-gradient(90deg,red,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red);border-radius:2px;height:100%}.hb-color-picker-panel__alpha-bar{background-image:linear-gradient(45deg,#ccc 25%,#0000 0),linear-gradient(-45deg,#ccc 25%,#0000 0),linear-gradient(45deg,#0000 75%,#ccc 0),linear-gradient(-45deg,#0000 75%,#ccc 0);background-position:0 0,0 4px,4px -4px,-4px 0;background-size:8px 8px;border-radius:2px;height:100%}.hb-color-picker-panel__input{margin-top:12px}.hb-color-picker-panel__input-hex{border:1px solid var(--hb-border-color,#dcdfe6);border-radius:4px;font-size:13px;margin-bottom:8px;padding:6px 8px;width:100%}.hb-color-picker-panel__input-rgb{display:flex;gap:8px}.hb-color-picker-panel__input-rgb input{border:1px solid var(--hb-border-color,#dcdfe6);border-radius:4px;flex:1;font-size:13px;padding:6px 8px}.hb-color-picker-panel__predefine{border-top:1px solid var(--hb-border-color-lighter,#e4e7ed);display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;padding-top:12px}.hb-color-picker-panel__predefine-color{border:2px solid #0000;border-radius:4px;cursor:pointer;height:24px;transition:transform .2s;width:24px}.hb-color-picker-panel__predefine-color:hover{transform:scale(1.1)}.hb-color-picker-panel__predefine-color--selected{border-color:var(--hb-color-primary);transform:scale(1.1)}@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 HbColorPickerPanelStyle0 = colorPickerPanelCss;
+
+const ColorPickerPanel = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.hbChange = index.createEvent(this, "hbChange", 7);
+    }
+    /**
+     * 绑定值
+     */
+    modelValue;
+    /**
+     * 颜色格式
+     */
+    colorFormat = 'hex';
+    /**
+     * 是否显示透明度
+     * @default false
+     */
+    showAlpha = false;
+    /**
+     * 预定义颜色
+     */
+    predefine;
+    currentColor = '#409EFF';
+    /**
+     * 值改变事件
+     */
+    hbChange;
+    componentDidLoad() {
+        if (this.modelValue) {
+            this.currentColor = this.modelValue;
+        }
+    }
+    handleValueChange() {
+        if (this.modelValue) {
+            this.currentColor = this.modelValue;
+        }
+    }
+    handleColorSelect = (color) => {
+        this.currentColor = color;
+        this.modelValue = color;
+        this.hbChange.emit(color);
+    };
+    handleInputChange = (e) => {
+        const target = e.target;
+        this.handleColorSelect(target.value);
+    };
+    hexToRgb(hex) {
+        const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+        return result ? {
+            r: parseInt(result[1], 16),
+            g: parseInt(result[2], 16),
+            b: parseInt(result[3], 16)
+        } : null;
+    }
+    render() {
+        const rgb = this.hexToRgb(this.currentColor);
+        const predefinedColors = this.predefine || [
+            '#ff4500', '#ff8c00', '#ffd700', '#90ee90', '#00ced1',
+            '#1e90ff', '#c71585', '#000000', '#ffffff', '#808080',
+        ];
+        return (index.h("div", { key: '7f5215f6908b85c016b9fc68423d63736adc64ac', class: "hb-color-picker-panel" }, index.h("div", { key: '6e918eb9cfd1932f6b01bd1b4e34eab37f12d486', class: "hb-color-picker-panel__saturation" }, index.h("div", { key: '72b61931cb7d87060868328de1675998ebd59ec1', class: "hb-color-picker-panel__saturation-white" }), index.h("div", { key: 'a4e3f1c4ab9217793e710cf940ec15539eaa2f9d', class: "hb-color-picker-panel__saturation-black" }), index.h("div", { key: '68f53e538a84d86c6093a56a1cbc566e08a2e43e', class: "hb-color-picker-panel__saturation-pointer", style: {
+                left: rgb ? `${(rgb.r / 255) * 100}%` : '50%',
+                top: rgb ? `${(1 - rgb.g / 255) * 100}%` : '50%',
+            } })), index.h("div", { key: '990b800e049ea8c5fd421a011486df34754584df', class: "hb-color-picker-panel__controls" }, index.h("div", { key: 'f2ae82fe0034874c623c259efdaeb4f4101c9b4b', class: "hb-color-picker-panel__hue" }, index.h("div", { key: '85a4d5b390e52856addafe49f9a467ab9554d895', class: "hb-color-picker-panel__hue-bar" })), this.showAlpha && (index.h("div", { key: 'c4d984971839bed5d5af92d9a15942f30f44073e', class: "hb-color-picker-panel__alpha" }, index.h("div", { key: 'b61fd80f873c2c62561f4d814a397e5a8eed2cb6', class: "hb-color-picker-panel__alpha-bar", style: { backgroundColor: this.currentColor } })))), index.h("div", { key: '64b5d37078471a314c26ef3e3e64c54887310cc1', class: "hb-color-picker-panel__input" }, index.h("input", { key: '2769607efa327d7b3c9c5e3fda4842a553c30cd2', type: "text", class: "hb-color-picker-panel__input-hex", value: this.currentColor, onInput: this.handleInputChange }), rgb && (index.h("div", { key: '4d3bf72b243b12f5f39d9c3f9800877a6d1eae9c', class: "hb-color-picker-panel__input-rgb" }, index.h("input", { key: 'd71850226823825cdc9eacc3cf8ff8a9b4d2c001', type: "number", min: "0", max: "255", value: rgb.r }), index.h("input", { key: 'ac86df2ab2e50574ddfb4938a85154e58969170e', type: "number", min: "0", max: "255", value: rgb.g }), index.h("input", { key: '457450f4ccdfe741dc28077a7160c504608cc23c', type: "number", min: "0", max: "255", value: rgb.b })))), this.predefine && this.predefine.length > 0 && (index.h("div", { key: 'b6ed00f9d32b953c4985a2336ee7901b61c64931', class: "hb-color-picker-panel__predefine" }, predefinedColors.map((color) => (index.h("div", { class: {
+                'hb-color-picker-panel__predefine-color': true,
+                'hb-color-picker-panel__predefine-color--selected': color === this.currentColor,
+            }, style: { backgroundColor: color }, onClick: () => this.handleColorSelect(color) })))))));
+    }
+    static get watchers() { return {
+        "modelValue": ["handleValueChange"]
+    }; }
+};
+ColorPickerPanel.style = HbColorPickerPanelStyle0;
+
+exports.hb_color_picker_panel = ColorPickerPanel;
+
+//# sourceMappingURL=hb-color-picker-panel.cjs.entry.js.map

package/dist/cjs/hb-color-picker-panel.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"hb-color-picker-panel.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,mBAAmB,GAAG,4wPAA4wP,CAAC;AACzyP,iCAAe,mBAAmB;;MCUrB,gBAAgB;;;;;;;;IAIF,UAAU,CAAU;;;;IAKrC,WAAW,GAAkC,KAAK,CAAC;;;;;IAMnD,SAAS,GAAY,KAAK,CAAC;;;;IAK3B,SAAS,CAAY;IAEpB,YAAY,GAAW,SAAS,CAAC;;;;IAKjC,QAAQ,CAAuB;IAExC,gBAAgB;QACd,IAAI,IAAI,CAAC,UAAU,EAAE;YACnB,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,UAAU,CAAC;SACrC;KACF;IAGD,iBAAiB;QACf,IAAI,IAAI,CAAC,UAAU,EAAE;YACnB,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,UAAU,CAAC;SACrC;KACF;IAEO,iBAAiB,GAAG,CAAC,KAAa;QACxC,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC;QAC1B,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC;QACxB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KAC3B,CAAC;IAEM,iBAAiB,GAAG,CAAC,CAAQ;QACnC,MAAM,MAAM,GAAG,CAAC,CAAC,MAA0B,CAAC;QAC5C,IAAI,CAAC,iBAAiB,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;KACtC,CAAC;IAEM,QAAQ,CAAC,GAAW;QAC1B,MAAM,MAAM,GAAG,2CAA2C,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QACrE,OAAO,MAAM,GAAG;YACd,CAAC,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC;YAC1B,CAAC,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC;YAC1B,CAAC,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC;SAC3B,GAAG,IAAI,CAAC;KACV;IAED,MAAM;QACJ,MAAM,GAAG,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;QAC7C,MAAM,gBAAgB,GAAG,IAAI,CAAC,SAAS,IAAI;YACzC,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS;YACrD,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS;SACtD,CAAC;QAEF,QACEA,kEAAK,KAAK,EAAC,uBAAuB,IAChCA,kEAAK,KAAK,EAAC,mCAAmC,IAC5CA,kEAAK,KAAK,EAAC,yCAAyC,GAAO,EAC3DA,kEAAK,KAAK,EAAC,yCAAyC,GAAO,EAC3DA,kEACE,KAAK,EAAC,2CAA2C,EACjD,KAAK,EAAE;gBACL,IAAI,EAAE,GAAG,GAAG,GAAG,CAAC,GAAG,CAAC,CAAC,GAAG,GAAG,IAAI,GAAG,GAAG,GAAG,KAAK;gBAC7C,GAAG,EAAE,GAAG,GAAG,GAAG,CAAC,CAAC,GAAG,GAAG,CAAC,CAAC,GAAG,GAAG,IAAI,GAAG,GAAG,GAAG,KAAK;aACjD,GACI,CACH,EACNA,kEAAK,KAAK,EAAC,iCAAiC,IAC1CA,kEAAK,KAAK,EAAC,4BAA4B,IACrCA,kEAAK,KAAK,EAAC,gCAAgC,GAAO,CAC9C,EACL,IAAI,CAAC,SAAS,KACbA,kEAAK,KAAK,EAAC,8BAA8B,IACvCA,kEAAK,KAAK,EAAC,kCAAkC,EAAC,KAAK,EAAE,EAAE,eAAe,EAAE,IAAI,CAAC,YAAY,EAAE,GAAQ,CAC/F,CACP,CACG,EACNA,kEAAK,KAAK,EAAC,8BAA8B,IACvCA,oEACE,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,kCAAkC,EACxC,KAAK,EAAE,IAAI,CAAC,YAAY,EACxB,OAAO,EAAE,IAAI,CAAC,iBAAiB,GAC/B,EACD,GAAG,KACFA,kEAAK,KAAK,EAAC,kCAAkC,IAC3CA,oEAAO,IAAI,EAAC,QAAQ,EAAC,GAAG,EAAC,GAAG,EAAC,GAAG,EAAC,KAAK,EAAC,KAAK,EAAE,GAAG,CAAC,CAAC,GAAI,EACvDA,oEAAO,IAAI,EAAC,QAAQ,EAAC,GAAG,EAAC,GAAG,EAAC,GAAG,EAAC,KAAK,EAAC,KAAK,EAAE,GAAG,CAAC,CAAC,GAAI,EACvDA,oEAAO,IAAI,EAAC,QAAQ,EAAC,GAAG,EAAC,GAAG,EAAC,GAAG,EAAC,KAAK,EAAC,KAAK,EAAE,GAAG,CAAC,CAAC,GAAI,CACnD,CACP,CACG,EACL,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,SAAS,CAAC,MAAM,GAAG,CAAC,KAC1CA,kEAAK,KAAK,EAAC,kCAAkC,IAC1C,gBAAgB,CAAC,GAAG,CAAC,CAAC,KAAK,MAC1BA,iBACE,KAAK,EAAE;gBACL,wCAAwC,EAAE,IAAI;gBAC9C,kDAAkD,EAAE,KAAK,KAAK,IAAI,CAAC,YAAY;aAChF,EACD,KAAK,EAAE,EAAE,eAAe,EAAE,KAAK,EAAE,EACjC,OAAO,EAAE,MAAM,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,GACvC,CACR,CAAC,CACE,CACP,CACG,EACN;KACH;;;;;;;;;","names":["h"],"sources":["src/components/ColorPickerPanel/color-picker-panel.css?tag=hb-color-picker-panel&encapsulation=shadow","src/components/ColorPickerPanel/ColorPickerPanel.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.hb-color-picker-panel {\n  padding: 12px;\n  background-color: var(--hb-color-white, #ffffff);\n  border-radius: 4px;\n}\n\n.hb-color-picker-panel__saturation {\n  position: relative;\n  width: 100%;\n  height: 180px;\n  border-radius: 4px;\n  overflow: hidden;\n  cursor: crosshair;\n}\n\n.hb-color-picker-panel__saturation-white {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));\n}\n\n.hb-color-picker-panel__saturation-black {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: linear-gradient(to top, #000, rgba(0, 0, 0, 0));\n}\n\n.hb-color-picker-panel__saturation-pointer {\n  position: absolute;\n  width: 12px;\n  height: 12px;\n  border: 2px solid var(--hb-color-white, #ffffff);\n  border-radius: 50%;\n  transform: translate(-50%, -50%);\n  box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);\n}\n\n.hb-color-picker-panel__controls {\n  margin-top: 12px;\n}\n\n.hb-color-picker-panel__hue,\n.hb-color-picker-panel__alpha {\n  position: relative;\n  height: 12px;\n  border-radius: 2px;\n  margin-bottom: 8px;\n  cursor: pointer;\n}\n\n.hb-color-picker-panel__hue-bar {\n  height: 100%;\n  background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);\n  border-radius: 2px;\n}\n\n.hb-color-picker-panel__alpha-bar {\n  height: 100%;\n  background-image: linear-gradient(45deg, #ccc 25%, transparent 25%), linear-gradient(-45deg, #ccc 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ccc 75%), linear-gradient(-45deg, transparent 75%, #ccc 75%);\n  background-size: 8px 8px;\n  background-position: 0 0, 0 4px, 4px -4px, -4px 0px;\n  border-radius: 2px;\n}\n\n.hb-color-picker-panel__input {\n  margin-top: 12px;\n}\n\n.hb-color-picker-panel__input-hex {\n  width: 100%;\n  padding: 6px 8px;\n  border: 1px solid var(--hb-border-color, #dcdfe6);\n  border-radius: 4px;\n  font-size: 13px;\n  margin-bottom: 8px;\n}\n\n.hb-color-picker-panel__input-rgb {\n  display: flex;\n  gap: 8px;\n}\n\n.hb-color-picker-panel__input-rgb input {\n  flex: 1;\n  padding: 6px 8px;\n  border: 1px solid var(--hb-border-color, #dcdfe6);\n  border-radius: 4px;\n  font-size: 13px;\n}\n\n.hb-color-picker-panel__predefine {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 8px;\n  margin-top: 12px;\n  padding-top: 12px;\n  border-top: 1px solid var(--hb-border-color-lighter, #e4e7ed);\n}\n\n.hb-color-picker-panel__predefine-color {\n  width: 24px;\n  height: 24px;\n  border-radius: 4px;\n  cursor: pointer;\n  border: 2px solid transparent;\n  transition: transform 0.2s;\n}\n\n.hb-color-picker-panel__predefine-color:hover {\n  transform: scale(1.1);\n}\n\n.hb-color-picker-panel__predefine-color--selected {\n  border-color: var(--hb-color-primary);\n  transform: scale(1.1);\n}\n\n","import { Component, h, Prop, Event, EventEmitter, State, Watch } from '@stencil/core';\n\n/**\n * ColorPickerPanel 颜色选择器面板组件\n * 颜色选择器面板，用于嵌入到其他组件中\n */\n@Component({\n  tag: 'hb-color-picker-panel',\n  styleUrl: 'color-picker-panel.css',\n  shadow: true,\n})\nexport class ColorPickerPanel {\n  /**\n   * 绑定值\n   */\n  @Prop({ mutable: true }) modelValue?: string;\n\n  /**\n   * 颜色格式\n   */\n  @Prop() colorFormat: 'hsl' | 'hsv' | 'hex' | 'rgb' = 'hex';\n\n  /**\n   * 是否显示透明度\n   * @default false\n   */\n  @Prop() showAlpha: boolean = false;\n\n  /**\n   * 预定义颜色\n   */\n  @Prop() predefine?: string[];\n\n  @State() currentColor: string = '#409EFF';\n\n  /**\n   * 值改变事件\n   */\n  @Event() hbChange: EventEmitter<string>;\n\n  componentDidLoad() {\n    if (this.modelValue) {\n      this.currentColor = this.modelValue;\n    }\n  }\n\n  @Watch('modelValue')\n  handleValueChange() {\n    if (this.modelValue) {\n      this.currentColor = this.modelValue;\n    }\n  }\n\n  private handleColorSelect = (color: string) => {\n    this.currentColor = color;\n    this.modelValue = color;\n    this.hbChange.emit(color);\n  };\n\n  private handleInputChange = (e: Event) => {\n    const target = e.target as HTMLInputElement;\n    this.handleColorSelect(target.value);\n  };\n\n  private hexToRgb(hex: string): { r: number; g: number; b: number } | null {\n    const result = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(hex);\n    return result ? {\n      r: parseInt(result[1], 16),\n      g: parseInt(result[2], 16),\n      b: parseInt(result[3], 16)\n    } : null;\n  }\n\n  render() {\n    const rgb = this.hexToRgb(this.currentColor);\n    const predefinedColors = this.predefine || [\n      '#ff4500', '#ff8c00', '#ffd700', '#90ee90', '#00ced1',\n      '#1e90ff', '#c71585', '#000000', '#ffffff', '#808080',\n    ];\n\n    return (\n      <div class=\"hb-color-picker-panel\">\n        <div class=\"hb-color-picker-panel__saturation\">\n          <div class=\"hb-color-picker-panel__saturation-white\"></div>\n          <div class=\"hb-color-picker-panel__saturation-black\"></div>\n          <div\n            class=\"hb-color-picker-panel__saturation-pointer\"\n            style={{\n              left: rgb ? `${(rgb.r / 255) * 100}%` : '50%',\n              top: rgb ? `${(1 - rgb.g / 255) * 100}%` : '50%',\n            }}\n          ></div>\n        </div>\n        <div class=\"hb-color-picker-panel__controls\">\n          <div class=\"hb-color-picker-panel__hue\">\n            <div class=\"hb-color-picker-panel__hue-bar\"></div>\n          </div>\n          {this.showAlpha && (\n            <div class=\"hb-color-picker-panel__alpha\">\n              <div class=\"hb-color-picker-panel__alpha-bar\" style={{ backgroundColor: this.currentColor }}></div>\n            </div>\n          )}\n        </div>\n        <div class=\"hb-color-picker-panel__input\">\n          <input\n            type=\"text\"\n            class=\"hb-color-picker-panel__input-hex\"\n            value={this.currentColor}\n            onInput={this.handleInputChange}\n          />\n          {rgb && (\n            <div class=\"hb-color-picker-panel__input-rgb\">\n              <input type=\"number\" min=\"0\" max=\"255\" value={rgb.r} />\n              <input type=\"number\" min=\"0\" max=\"255\" value={rgb.g} />\n              <input type=\"number\" min=\"0\" max=\"255\" value={rgb.b} />\n            </div>\n          )}\n        </div>\n        {this.predefine && this.predefine.length > 0 && (\n          <div class=\"hb-color-picker-panel__predefine\">\n            {predefinedColors.map((color) => (\n              <div\n                class={{\n                  'hb-color-picker-panel__predefine-color': true,\n                  'hb-color-picker-panel__predefine-color--selected': color === this.currentColor,\n                }}\n                style={{ backgroundColor: color }}\n                onClick={() => this.handleColorSelect(color)}\n              ></div>\n            ))}\n          </div>\n        )}\n      </div>\n    );\n  }\n}\n\n"],"version":3}