huibo-ui 0.3.0

package/dist/esm/hb-date-time-picker.entry.js

@@ -0,0 +1,136 @@
+import { r as registerInstance, c as createEvent, g as getElement, h } from './index-fdf7135e.js';
+import { c as createClickOutsideHandler } from './click-outside-291294f9.js';
+import { p as parseDate, f as formatDate, a as addMonths, g as getCalendarDays, M as MONTH_NAMES, W as WEEK_DAY_NAMES } from './date-helpers-e4d85a67.js';
+
+const dateTimePickerCss = "/*! 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{--hb-date-time-picker-font-size:14px;--hb-date-time-picker-height:32px;--hb-date-time-picker-border-color:var(--hb-border-color,#dcdfe6);--hb-date-time-picker-border-color-hover:var(--hb-color-primary);--hb-date-time-picker-bg-color:var(--hb-color-white,#fff);display:inline-block;position:relative}.hb-date-time-picker{display:inline-block;position:relative;width:280px}.hb-date-time-picker__input-wrapper{cursor:pointer;display:inline-block;position:relative;width:100%}.hb-date-time-picker__input{background-color:var(--hb-date-time-picker-bg-color);border:1px solid var(--hb-date-time-picker-border-color);border-radius:4px;box-sizing:border-box;color:var(--hb-color-text-regular,#606266);cursor:pointer;display:inline-block;font-size:var(--hb-date-time-picker-font-size);height:var(--hb-date-time-picker-height);line-height:var(--hb-date-time-picker-height);outline:none;padding:0 30px 0 15px;transition:border-color .2s cubic-bezier(.645,.045,.355,1);width:100%}.hb-date-time-picker__suffix{align-items:center;display:flex;position:absolute;right:8px;top:50%;transform:translateY(-50%)}.hb-date-time-picker__clear{color:var(--hb-color-text-placeholder,#c0c4cc);cursor:pointer;font-size:16px;margin-right:8px}.hb-date-time-picker__dropdown{background-color:var(--hb-date-time-picker-bg-color);border:1px solid var(--hb-date-time-picker-border-color);border-radius:4px;box-shadow:0 2px 12px #0000001a;left:0;margin-top:4px;min-width:320px;padding:12px;position:absolute;top:100%;z-index:1000}.hb-date-time-picker__header{align-items:center;display:flex;justify-content:space-between;margin-bottom:12px}.hb-date-time-picker__header-label{font-size:14px;font-weight:600}.hb-date-time-picker__next-btn,.hb-date-time-picker__prev-btn{background:0 0;border:none;cursor:pointer;font-size:18px;padding:4px 8px}.hb-date-time-picker__weekdays{display:grid;gap:4px;grid-template-columns:repeat(7,1fr);margin-bottom:8px}.hb-date-time-picker__weekday{color:var(--hb-color-text-placeholder,#c0c4cc);font-size:12px;text-align:center}.hb-date-time-picker__days{display:grid;gap:4px;grid-template-columns:repeat(7,1fr)}.hb-date-time-picker__day{align-items:center;aspect-ratio:1;border-radius:4px;cursor:pointer;display:flex;font-size:13px;justify-content:center}.hb-date-time-picker__day:hover:not(.hb-date-time-picker__day--other-month){background-color:var(--hb-fill-color-light,#f5f7fa)}.hb-date-time-picker__day--selected{background-color:var(--hb-color-primary);color:var(--hb-color-white,#fff)}.hb-date-time-picker__time-body{display:flex;padding:8px}.hb-date-time-picker__time-list{flex:1;max-height:280px;overflow-y:auto}.hb-date-time-picker__time-title{border-bottom:1px solid var(--hb-border-color-lighter,#e4e7ed);font-size:12px;padding:8px 0;text-align:center}.hb-date-time-picker__time-content{padding:4px 0}.hb-date-time-picker__time-item{cursor:pointer;font-size:13px;padding:8px 16px;text-align:center}.hb-date-time-picker__time-item:hover{background-color:var(--hb-fill-color-light,#f5f7fa)}.hb-date-time-picker__time-item--selected{background-color:var(--hb-color-primary-light-9,#ecf5ff);color:var(--hb-color-primary);font-weight:600}@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 HbDateTimePickerStyle0 = dateTimePickerCss;
+
+const DateTimePicker = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.hbChange = createEvent(this, "hbChange", 7);
+    }
+    get el() { return getElement(this); }
+    /** 绑定值 */
+    modelValue;
+    /** 输入框占位文本 */
+    placeholder = '请选择日期时间';
+    /** 是否禁用 */
+    disabled = false;
+    /** 输入框尺寸 */
+    size = 'default';
+    /** 是否可清空 */
+    clearable = false;
+    /** 日期时间格式 */
+    format = 'YYYY-MM-DD HH:mm:ss';
+    /** 原生 name 属性 */
+    name;
+    /** 原生 id 属性 */
+    inputId;
+    isOpen = false;
+    inputValue = '';
+    selectedDate;
+    currentView = 'date';
+    /** 值改变事件 */
+    hbChange;
+    clickOutside = createClickOutsideHandler({
+        host: null,
+        isOpen: () => this.isOpen,
+        onClose: () => { this.isOpen = false; },
+    });
+    componentDidLoad() {
+        this.clickOutside = createClickOutsideHandler({
+            host: this.el,
+            isOpen: () => this.isOpen,
+            onClose: () => { this.isOpen = false; },
+        });
+        this.clickOutside.connect();
+        this.updateInputValue();
+    }
+    disconnectedCallback() {
+        this.clickOutside.disconnect();
+    }
+    handleValueChange() {
+        this.updateInputValue();
+    }
+    updateInputValue() {
+        const date = parseDate(this.modelValue);
+        if (!date) {
+            this.inputValue = '';
+            this.selectedDate = undefined;
+            return;
+        }
+        this.selectedDate = date;
+        this.inputValue = formatDate(date, this.format);
+    }
+    handleInputClick = () => {
+        if (this.disabled)
+            return;
+        this.isOpen = !this.isOpen;
+        this.currentView = 'date';
+    };
+    handleClear = (e) => {
+        e.stopPropagation();
+        this.modelValue = undefined;
+        this.inputValue = '';
+        this.selectedDate = undefined;
+        this.isOpen = false;
+        this.hbChange.emit(undefined);
+    };
+    handleDateSelect = (date) => {
+        this.selectedDate = date;
+        this.currentView = 'time';
+    };
+    handleTimeSelect = (hour, minute, second) => {
+        const date = new Date(this.selectedDate || new Date());
+        date.setHours(hour);
+        date.setMinutes(minute);
+        date.setSeconds(second);
+        this.selectedDate = date;
+        this.modelValue = date;
+        this.inputValue = formatDate(date, this.format);
+        this.isOpen = false;
+        this.hbChange.emit(date);
+    };
+    changeMonth(delta) {
+        this.selectedDate = addMonths(this.selectedDate || new Date(), delta);
+    }
+    render() {
+        const days = getCalendarDays(this.selectedDate || new Date(), this.selectedDate);
+        const current = this.selectedDate || new Date();
+        const hours = Array.from({ length: 24 }, (_, i) => i);
+        const minutes = Array.from({ length: 60 }, (_, i) => i);
+        const seconds = Array.from({ length: 60 }, (_, i) => i);
+        return (h("div", { key: '9163e484f86c08e64bde83efde16cee218c91d7d', class: {
+                'hb-date-time-picker': true,
+                'hb-date-time-picker--open': this.isOpen,
+                'hb-date-time-picker--disabled': this.disabled,
+                [`hb-date-time-picker--${this.size}`]: true,
+            } }, h("div", { key: '27f1ce225146eadc2cea57a7190a8ec692f29694', class: "hb-date-time-picker__input-wrapper", onClick: this.handleInputClick }, h("input", { key: 'c42a6797f717a3fe27544307b2c94958f18df9a7', type: "text", id: this.inputId, name: this.name, class: "hb-date-time-picker__input", placeholder: this.placeholder, value: this.inputValue, disabled: this.disabled, readonly: true }), h("span", { key: '30210b48b776ae5417cdaec2e956d9d071be3e60', class: "hb-date-time-picker__suffix" }, this.clearable && this.modelValue && (h("span", { key: '5b32d6ccbba09273cfecc84f1b400b5d282b1e87', class: "hb-date-time-picker__clear", onClick: this.handleClear }, "\u00D7")), h("span", { key: 'ec7c2a97de3147de92a7e0229c5830db801e7eb7', class: "hb-date-time-picker__icon" }, "\uD83D\uDCC5"))), this.isOpen && (h("div", { key: '6d54ed7b5001d0ab43342062d68152f6cd55d2d2', class: "hb-date-time-picker__dropdown" }, this.currentView === 'date' ? ([
+            h("div", { class: "hb-date-time-picker__header" }, h("button", { type: "button", class: "hb-date-time-picker__prev-btn", onClick: () => this.changeMonth(-1) }, "\u2039"), h("span", { class: "hb-date-time-picker__header-label" }, current.getFullYear(), "\u5E74 ", MONTH_NAMES[current.getMonth()]), h("button", { type: "button", class: "hb-date-time-picker__next-btn", onClick: () => this.changeMonth(1) }, "\u203A")),
+            h("div", { class: "hb-date-time-picker__body" }, h("div", { class: "hb-date-time-picker__weekdays" }, WEEK_DAY_NAMES.map(day => h("div", { class: "hb-date-time-picker__weekday" }, day))), h("div", { class: "hb-date-time-picker__days" }, days.map((day, index) => (h("div", { key: index, class: {
+                    'hb-date-time-picker__day': true,
+                    'hb-date-time-picker__day--other-month': !day.isCurrentMonth,
+                    'hb-date-time-picker__day--today': day.isToday,
+                    'hb-date-time-picker__day--selected': day.isSelected,
+                }, onClick: () => day.isCurrentMonth && this.handleDateSelect(day.date) }, day.date.getDate()))))),
+        ]) : (h("div", { class: "hb-date-time-picker__time-body" }, h("div", { class: "hb-date-time-picker__time-list" }, h("div", { class: "hb-date-time-picker__time-title" }, "\u65F6"), h("div", { class: "hb-date-time-picker__time-content" }, hours.map((hour) => (h("div", { class: {
+                'hb-date-time-picker__time-item': true,
+                'hb-date-time-picker__time-item--selected': hour === (this.selectedDate?.getHours() || 0),
+            }, onClick: () => this.handleTimeSelect(hour, this.selectedDate?.getMinutes() || 0, this.selectedDate?.getSeconds() || 0) }, String(hour).padStart(2, '0')))))), h("div", { class: "hb-date-time-picker__time-list" }, h("div", { class: "hb-date-time-picker__time-title" }, "\u5206"), h("div", { class: "hb-date-time-picker__time-content" }, minutes.map((minute) => (h("div", { class: {
+                'hb-date-time-picker__time-item': true,
+                'hb-date-time-picker__time-item--selected': minute === (this.selectedDate?.getMinutes() || 0),
+            }, onClick: () => this.handleTimeSelect(this.selectedDate?.getHours() || 0, minute, this.selectedDate?.getSeconds() || 0) }, String(minute).padStart(2, '0')))))), h("div", { class: "hb-date-time-picker__time-list" }, h("div", { class: "hb-date-time-picker__time-title" }, "\u79D2"), h("div", { class: "hb-date-time-picker__time-content" }, seconds.map((second) => (h("div", { class: {
+                'hb-date-time-picker__time-item': true,
+                'hb-date-time-picker__time-item--selected': second === (this.selectedDate?.getSeconds() || 0),
+            }, onClick: () => this.handleTimeSelect(this.selectedDate?.getHours() || 0, this.selectedDate?.getMinutes() || 0, second) }, String(second).padStart(2, '0'))))))))))));
+    }
+    static get watchers() { return {
+        "modelValue": ["handleValueChange"]
+    }; }
+};
+DateTimePicker.style = HbDateTimePickerStyle0;
+
+export { DateTimePicker as hb_date_time_picker };
+
+//# sourceMappingURL=hb-date-time-picker.entry.js.map

package/dist/esm/hb-date-time-picker.entry.js.map

@@ -0,0 +1 @@
+{"file":"hb-date-time-picker.entry.js","mappings":"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","names":[],"sources":["src/components/DateTimePicker/date-time-picker.css?tag=hb-date-time-picker&encapsulation=shadow","src/components/DateTimePicker/DateTimePicker.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n  position: relative;\n  --hb-date-time-picker-font-size: 14px;\n  --hb-date-time-picker-height: 32px;\n  --hb-date-time-picker-border-color: var(--hb-border-color, #dcdfe6);\n  --hb-date-time-picker-border-color-hover: var(--hb-color-primary);\n  --hb-date-time-picker-bg-color: var(--hb-color-white, #ffffff);\n}\n\n.hb-date-time-picker {\n  display: inline-block;\n  position: relative;\n  width: 280px;\n}\n\n.hb-date-time-picker__input-wrapper {\n  position: relative;\n  display: inline-block;\n  width: 100%;\n  cursor: pointer;\n}\n\n.hb-date-time-picker__input {\n  display: inline-block;\n  width: 100%;\n  height: var(--hb-date-time-picker-height);\n  line-height: var(--hb-date-time-picker-height);\n  padding: 0 30px 0 15px;\n  font-size: var(--hb-date-time-picker-font-size);\n  color: var(--hb-color-text-regular, #606266);\n  background-color: var(--hb-date-time-picker-bg-color);\n  border: 1px solid var(--hb-date-time-picker-border-color);\n  border-radius: 4px;\n  box-sizing: border-box;\n  cursor: pointer;\n  outline: none;\n  transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);\n}\n\n.hb-date-time-picker__suffix {\n  position: absolute;\n  right: 8px;\n  top: 50%;\n  transform: translateY(-50%);\n  display: flex;\n  align-items: center;\n}\n\n.hb-date-time-picker__clear {\n  margin-right: 8px;\n  cursor: pointer;\n  font-size: 16px;\n  color: var(--hb-color-text-placeholder, #c0c4cc);\n}\n\n.hb-date-time-picker__dropdown {\n  position: absolute;\n  top: 100%;\n  left: 0;\n  margin-top: 4px;\n  background-color: var(--hb-date-time-picker-bg-color);\n  border: 1px solid var(--hb-date-time-picker-border-color);\n  border-radius: 4px;\n  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);\n  z-index: 1000;\n  min-width: 320px;\n  padding: 12px;\n}\n\n.hb-date-time-picker__header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin-bottom: 12px;\n}\n\n.hb-date-time-picker__header-label {\n  font-weight: 600;\n  font-size: 14px;\n}\n\n.hb-date-time-picker__prev-btn,\n.hb-date-time-picker__next-btn {\n  background: none;\n  border: none;\n  font-size: 18px;\n  cursor: pointer;\n  padding: 4px 8px;\n}\n\n.hb-date-time-picker__weekdays {\n  display: grid;\n  grid-template-columns: repeat(7, 1fr);\n  gap: 4px;\n  margin-bottom: 8px;\n}\n\n.hb-date-time-picker__weekday {\n  text-align: center;\n  font-size: 12px;\n  color: var(--hb-color-text-placeholder, #c0c4cc);\n}\n\n.hb-date-time-picker__days {\n  display: grid;\n  grid-template-columns: repeat(7, 1fr);\n  gap: 4px;\n}\n\n.hb-date-time-picker__day {\n  aspect-ratio: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 13px;\n  cursor: pointer;\n  border-radius: 4px;\n}\n\n.hb-date-time-picker__day:hover:not(.hb-date-time-picker__day--other-month) {\n  background-color: var(--hb-fill-color-light, #f5f7fa);\n}\n\n.hb-date-time-picker__day--selected {\n  background-color: var(--hb-color-primary);\n  color: var(--hb-color-white, #ffffff);\n}\n\n.hb-date-time-picker__time-body {\n  display: flex;\n  padding: 8px;\n}\n\n.hb-date-time-picker__time-list {\n  flex: 1;\n  max-height: 280px;\n  overflow-y: auto;\n}\n\n.hb-date-time-picker__time-title {\n  text-align: center;\n  font-size: 12px;\n  padding: 8px 0;\n  border-bottom: 1px solid var(--hb-border-color-lighter, #e4e7ed);\n}\n\n.hb-date-time-picker__time-content {\n  padding: 4px 0;\n}\n\n.hb-date-time-picker__time-item {\n  padding: 8px 16px;\n  text-align: center;\n  font-size: 13px;\n  cursor: pointer;\n}\n\n.hb-date-time-picker__time-item:hover {\n  background-color: var(--hb-fill-color-light, #f5f7fa);\n}\n\n.hb-date-time-picker__time-item--selected {\n  background-color: var(--hb-color-primary-light-9, #ecf5ff);\n  color: var(--hb-color-primary);\n  font-weight: 600;\n}\n\n","import { Component, h, Prop, Event, EventEmitter, State, Element, Watch } from '@stencil/core';\nimport { createClickOutsideHandler } from '../../utils/click-outside';\nimport { getCalendarDays, formatDate, parseDate, addMonths, MONTH_NAMES, WEEK_DAY_NAMES } from '../../utils/date-helpers';\n\n/**\n * DateTimePicker 日期时间选择器组件\n * 在同一个选择器里选择日期和时间\n */\n@Component({\n  tag: 'hb-date-time-picker',\n  styleUrl: 'date-time-picker.css',\n  shadow: true,\n})\nexport class DateTimePicker {\n  @Element() el: HTMLElement;\n\n  /** 绑定值 */\n  @Prop({ mutable: true }) modelValue?: string | Date;\n\n  /** 输入框占位文本 */\n  @Prop() placeholder: string = '请选择日期时间';\n\n  /** 是否禁用 */\n  @Prop() disabled: boolean = false;\n\n  /** 输入框尺寸 */\n  @Prop() size: 'large' | 'default' | 'small' = 'default';\n\n  /** 是否可清空 */\n  @Prop() clearable: boolean = false;\n\n  /** 日期时间格式 */\n  @Prop() format: string = 'YYYY-MM-DD HH:mm:ss';\n\n  /** 原生 name 属性 */\n  @Prop() name?: string;\n\n  /** 原生 id 属性 */\n  @Prop() inputId?: string;\n\n  @State() isOpen: boolean = false;\n  @State() inputValue: string = '';\n  @State() selectedDate?: Date;\n  @State() currentView: 'date' | 'time' = 'date';\n\n  /** 值改变事件 */\n  @Event() hbChange: EventEmitter<string | Date>;\n\n  private clickOutside = createClickOutsideHandler({\n    host: null as any,\n    isOpen: () => this.isOpen,\n    onClose: () => { this.isOpen = false; },\n  });\n\n  componentDidLoad() {\n    this.clickOutside = createClickOutsideHandler({\n      host: this.el,\n      isOpen: () => this.isOpen,\n      onClose: () => { this.isOpen = false; },\n    });\n    this.clickOutside.connect();\n    this.updateInputValue();\n  }\n\n  disconnectedCallback() {\n    this.clickOutside.disconnect();\n  }\n\n  @Watch('modelValue')\n  handleValueChange() {\n    this.updateInputValue();\n  }\n\n  private updateInputValue() {\n    const date = parseDate(this.modelValue);\n    if (!date) {\n      this.inputValue = '';\n      this.selectedDate = undefined;\n      return;\n    }\n    this.selectedDate = date;\n    this.inputValue = formatDate(date, this.format);\n  }\n\n  private handleInputClick = () => {\n    if (this.disabled) return;\n    this.isOpen = !this.isOpen;\n    this.currentView = 'date';\n  };\n\n  private handleClear = (e: Event) => {\n    e.stopPropagation();\n    this.modelValue = undefined;\n    this.inputValue = '';\n    this.selectedDate = undefined;\n    this.isOpen = false;\n    this.hbChange.emit(undefined);\n  };\n\n  private handleDateSelect = (date: Date) => {\n    this.selectedDate = date;\n    this.currentView = 'time';\n  };\n\n  private handleTimeSelect = (hour: number, minute: number, second: number) => {\n    const date = new Date(this.selectedDate || new Date());\n    date.setHours(hour);\n    date.setMinutes(minute);\n    date.setSeconds(second);\n\n    this.selectedDate = date;\n    this.modelValue = date;\n    this.inputValue = formatDate(date, this.format);\n    this.isOpen = false;\n    this.hbChange.emit(date);\n  };\n\n  private changeMonth(delta: number) {\n    this.selectedDate = addMonths(this.selectedDate || new Date(), delta);\n  }\n\n  render() {\n    const days = getCalendarDays(this.selectedDate || new Date(), this.selectedDate);\n    const current = this.selectedDate || new Date();\n    const hours = Array.from({ length: 24 }, (_, i) => i);\n    const minutes = Array.from({ length: 60 }, (_, i) => i);\n    const seconds = Array.from({ length: 60 }, (_, i) => i);\n\n    return (\n      <div\n        class={{\n          'hb-date-time-picker': true,\n          'hb-date-time-picker--open': this.isOpen,\n          'hb-date-time-picker--disabled': this.disabled,\n          [`hb-date-time-picker--${this.size}`]: true,\n        }}\n      >\n        <div class=\"hb-date-time-picker__input-wrapper\" onClick={this.handleInputClick}>\n          <input\n            type=\"text\"\n            id={this.inputId}\n            name={this.name}\n            class=\"hb-date-time-picker__input\"\n            placeholder={this.placeholder}\n            value={this.inputValue}\n            disabled={this.disabled}\n            readonly\n          />\n          <span class=\"hb-date-time-picker__suffix\">\n            {this.clearable && this.modelValue && (\n              <span class=\"hb-date-time-picker__clear\" onClick={this.handleClear}>\n                ×\n              </span>\n            )}\n            <span class=\"hb-date-time-picker__icon\">📅</span>\n          </span>\n        </div>\n        {this.isOpen && (\n          <div class=\"hb-date-time-picker__dropdown\">\n            {this.currentView === 'date' ? (\n              [\n                <div class=\"hb-date-time-picker__header\">\n                  <button type=\"button\" class=\"hb-date-time-picker__prev-btn\" onClick={() => this.changeMonth(-1)}>‹</button>\n                  <span class=\"hb-date-time-picker__header-label\">\n                    {current.getFullYear()}年 {MONTH_NAMES[current.getMonth()]}\n                  </span>\n                  <button type=\"button\" class=\"hb-date-time-picker__next-btn\" onClick={() => this.changeMonth(1)}>›</button>\n                </div>,\n                <div class=\"hb-date-time-picker__body\">\n                  <div class=\"hb-date-time-picker__weekdays\">\n                    {WEEK_DAY_NAMES.map(day => <div class=\"hb-date-time-picker__weekday\">{day}</div>)}\n                  </div>\n                  <div class=\"hb-date-time-picker__days\">\n                    {days.map((day, index) => (\n                      <div\n                        key={index}\n                        class={{\n                          'hb-date-time-picker__day': true,\n                          'hb-date-time-picker__day--other-month': !day.isCurrentMonth,\n                          'hb-date-time-picker__day--today': day.isToday,\n                          'hb-date-time-picker__day--selected': day.isSelected,\n                        }}\n                        onClick={() => day.isCurrentMonth && this.handleDateSelect(day.date)}\n                      >\n                        {day.date.getDate()}\n                      </div>\n                    ))}\n                  </div>\n                </div>,\n              ]\n            ) : (\n              <div class=\"hb-date-time-picker__time-body\">\n                <div class=\"hb-date-time-picker__time-list\">\n                  <div class=\"hb-date-time-picker__time-title\">时</div>\n                  <div class=\"hb-date-time-picker__time-content\">\n                    {hours.map((hour) => (\n                      <div\n                        class={{\n                          'hb-date-time-picker__time-item': true,\n                          'hb-date-time-picker__time-item--selected': hour === (this.selectedDate?.getHours() || 0),\n                        }}\n                        onClick={() => this.handleTimeSelect(hour, this.selectedDate?.getMinutes() || 0, this.selectedDate?.getSeconds() || 0)}\n                      >\n                        {String(hour).padStart(2, '0')}\n                      </div>\n                    ))}\n                  </div>\n                </div>\n                <div class=\"hb-date-time-picker__time-list\">\n                  <div class=\"hb-date-time-picker__time-title\">分</div>\n                  <div class=\"hb-date-time-picker__time-content\">\n                    {minutes.map((minute) => (\n                      <div\n                        class={{\n                          'hb-date-time-picker__time-item': true,\n                          'hb-date-time-picker__time-item--selected': minute === (this.selectedDate?.getMinutes() || 0),\n                        }}\n                        onClick={() => this.handleTimeSelect(this.selectedDate?.getHours() || 0, minute, this.selectedDate?.getSeconds() || 0)}\n                      >\n                        {String(minute).padStart(2, '0')}\n                      </div>\n                    ))}\n                  </div>\n                </div>\n                <div class=\"hb-date-time-picker__time-list\">\n                  <div class=\"hb-date-time-picker__time-title\">秒</div>\n                  <div class=\"hb-date-time-picker__time-content\">\n                    {seconds.map((second) => (\n                      <div\n                        class={{\n                          'hb-date-time-picker__time-item': true,\n                          'hb-date-time-picker__time-item--selected': second === (this.selectedDate?.getSeconds() || 0),\n                        }}\n                        onClick={() => this.handleTimeSelect(this.selectedDate?.getHours() || 0, this.selectedDate?.getMinutes() || 0, second)}\n                      >\n                        {String(second).padStart(2, '0')}\n                      </div>\n                    ))}\n                  </div>\n                </div>\n              </div>\n            )}\n          </div>\n        )}\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/hb-descriptions.entry.js

@@ -0,0 +1,28 @@
+import { r as registerInstance, h } from './index-fdf7135e.js';
+
+const descriptionsCss = "/*! 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{.grid{display:grid}.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:block}.hb-descriptions{background:var(--hb-color-bg-container);border-radius:var(--hb-border-radius-sm);color:var(--hb-color-text);font-size:var(--hb-font-size-sm)}.hb-descriptions__title{color:var(--hb-color-text-primary);font-size:var(--hb-font-size-lg);font-weight:600;margin-bottom:var(--hb-spacing-sm)}.hb-descriptions__view{width:100%}.hb-descriptions__row{display:grid;gap:0;width:100%}.hb-descriptions__item{border-bottom:1px solid var(--hb-color-border-secondary);display:flex;padding:var(--hb-spacing-sm)var(--hb-spacing-md)}.hb-descriptions__row .hb-descriptions__item:last-child{border-bottom:none}.hb-descriptions__label{color:var(--hb-color-text-secondary);flex-shrink:0;margin-right:var(--hb-spacing-sm);white-space:nowrap}.hb-descriptions__colon{margin-left:0}.hb-descriptions__value{color:var(--hb-color-text);word-break:break-all}.hb-descriptions--bordered{border:1px solid var(--hb-color-border-secondary);overflow:hidden}.hb-descriptions--bordered .hb-descriptions__title{border-bottom:1px solid var(--hb-color-border-secondary);margin-bottom:0;padding:var(--hb-spacing-sm)var(--hb-spacing-md)}.hb-descriptions--bordered .hb-descriptions__item{border-right:1px solid var(--hb-color-border-secondary);padding:var(--hb-spacing-sm)var(--hb-spacing-md)}.hb-descriptions--bordered .hb-descriptions__item:nth-child(3n){border-right:none}.hb-descriptions--bordered .hb-descriptions__item:last-child{border-bottom:none}@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 HbDescriptionsStyle0 = descriptionsCss;
+
+const Descriptions = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    /** 标题 */
+    title = '';
+    /** 是否带边框 */
+    border = false;
+    /** 每行列数 */
+    column = 3;
+    /** 是否显示冒号 */
+    colon = true;
+    /** 描述项数组 */
+    items = [];
+    render() {
+        return (h("div", { key: 'bc13fcaa734ea3830c26a296e219dc90c4c453eb', class: { 'hb-descriptions': true, 'hb-descriptions--bordered': this.border } }, this.title && h("div", { key: 'e64aba674b0f6d7e460f00c0f786b670dc92da0f', class: "hb-descriptions__title" }, this.title), h("div", { key: '4cca9b0c834a60baf81d8668f79302934817f395', class: "hb-descriptions__view" }, h("div", { key: '9c321483b77f58ecb2b8bbdfba9049b7cdd11c73', class: "hb-descriptions__row", style: { gridTemplateColumns: `repeat(${this.column}, minmax(0, 1fr))` } }, this.items.map((item) => (h("div", { class: "hb-descriptions__item", style: item.span ? { gridColumn: `span ${item.span}` } : undefined }, h("span", { class: "hb-descriptions__label" }, item.label, this.colon && h("span", { class: "hb-descriptions__colon" }, "\uFF1A")), h("span", { class: "hb-descriptions__value" }, item.value))))))));
+    }
+};
+Descriptions.style = HbDescriptionsStyle0;
+
+export { Descriptions as hb_descriptions };
+
+//# sourceMappingURL=hb-descriptions.entry.js.map

package/dist/esm/hb-descriptions.entry.js.map

@@ -0,0 +1 @@
+{"file":"hb-descriptions.entry.js","mappings":";;AAAA,MAAM,eAAe,GAAG,ssOAAssO,CAAC;AAC/tO,6BAAe,eAAe;;MCMjB,YAAY;;;;;IAEf,KAAK,GAAW,EAAE,CAAC;;IAGnB,MAAM,GAAY,KAAK,CAAC;;IAGxB,MAAM,GAAW,CAAC,CAAC;;IAGnB,KAAK,GAAY,IAAI,CAAC;;IAGtB,KAAK,GAAsB,EAAE,CAAC;IAEtC,MAAM;QACJ,QACE,4DAAK,KAAK,EAAE,EAAE,iBAAiB,EAAE,IAAI,EAAE,2BAA2B,EAAE,IAAI,CAAC,MAAM,EAAE,IAC9E,IAAI,CAAC,KAAK,IAAI,4DAAK,KAAK,EAAC,wBAAwB,IAAE,IAAI,CAAC,KAAK,CAAO,EACrE,4DAAK,KAAK,EAAC,uBAAuB,IAChC,4DAAK,KAAK,EAAC,sBAAsB,EAAC,KAAK,EAAE,EAAE,mBAAmB,EAAE,UAAU,IAAI,CAAC,MAAM,mBAAmB,EAAE,IACvG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,MACnB,WACE,KAAK,EAAC,uBAAuB,EAC7B,KAAK,EAAE,IAAI,CAAC,IAAI,GAAG,EAAE,UAAU,EAAE,QAAQ,IAAI,CAAC,IAAI,EAAE,EAAE,GAAG,SAAS,IAElE,YAAM,KAAK,EAAC,wBAAwB,IACjC,IAAI,CAAC,KAAK,EACV,IAAI,CAAC,KAAK,IAAI,YAAM,KAAK,EAAC,wBAAwB,aAAS,CACvD,EACP,YAAM,KAAK,EAAC,wBAAwB,IAAE,IAAI,CAAC,KAAK,CAAQ,CACpD,CACP,CAAC,CACE,CACF,CACF,EACN;KACH;;;;;;","names":[],"sources":["src/components/Descriptions/descriptions.css?tag=hb-descriptions&encapsulation=shadow","src/components/Descriptions/Descriptions.tsx"],"sourcesContent":[":host { display: block; }\n.hb-descriptions {\n  font-size: var(--hb-font-size-sm);\n  color: var(--hb-color-text);\n  background: var(--hb-color-bg-container);\n  border-radius: var(--hb-border-radius-sm);\n}\n.hb-descriptions__title {\n  font-size: var(--hb-font-size-lg);\n  font-weight: 600;\n  color: var(--hb-color-text-primary);\n  margin-bottom: var(--hb-spacing-sm);\n}\n.hb-descriptions__view { width: 100%; }\n.hb-descriptions__row {\n  display: grid;\n  gap: 0;\n  width: 100%;\n}\n.hb-descriptions__item {\n  display: flex;\n  padding: var(--hb-spacing-sm) var(--hb-spacing-md);\n  border-bottom: 1px solid var(--hb-color-border-secondary);\n}\n.hb-descriptions__row .hb-descriptions__item:nth-last-child(-n+3):not(:nth-last-child(1)) {\n  /* 保留默认下边框，最后一项由下方规则移除 */\n}\n/* 简化：最后一个 item 无下边框 */\n.hb-descriptions__row .hb-descriptions__item:last-child { border-bottom: none; }\n\n.hb-descriptions__label {\n  color: var(--hb-color-text-secondary);\n  white-space: nowrap;\n  margin-right: var(--hb-spacing-sm);\n  flex-shrink: 0;\n}\n.hb-descriptions__colon { margin-left: 0; }\n.hb-descriptions__value {\n  color: var(--hb-color-text);\n  word-break: break-all;\n}\n\n/* 带边框样式 */\n.hb-descriptions--bordered {\n  border: 1px solid var(--hb-color-border-secondary);\n  overflow: hidden;\n}\n.hb-descriptions--bordered .hb-descriptions__title { padding: var(--hb-spacing-sm) var(--hb-spacing-md); margin-bottom: 0; border-bottom: 1px solid var(--hb-color-border-secondary); }\n.hb-descriptions--bordered .hb-descriptions__item { border-right: 1px solid var(--hb-color-border-secondary); }\n.hb-descriptions--bordered .hb-descriptions__item:nth-child(3n) { border-right: none; }\n.hb-descriptions--bordered .hb-descriptions__item { padding: var(--hb-spacing-sm) var(--hb-spacing-md); }\n.hb-descriptions--bordered .hb-descriptions__item:last-child { border-bottom: none; }\n","import { Component, h, Prop } from '@stencil/core';\n\n/**\n * Descriptions 描述列表组件\n * 成组展示多个描述字段，支持列数、边框、冒号、跨列 span\n */\n@Component({ tag: 'hb-descriptions', styleUrl: 'descriptions.css', shadow: true })\nexport class Descriptions {\n  /** 标题 */\n  @Prop() title: string = '';\n\n  /** 是否带边框 */\n  @Prop() border: boolean = false;\n\n  /** 每行列数 */\n  @Prop() column: number = 3;\n\n  /** 是否显示冒号 */\n  @Prop() colon: boolean = true;\n\n  /** 描述项数组 */\n  @Prop() items: DescriptionItem[] = [];\n\n  render() {\n    return (\n      <div class={{ 'hb-descriptions': true, 'hb-descriptions--bordered': this.border }}>\n        {this.title && <div class=\"hb-descriptions__title\">{this.title}</div>}\n        <div class=\"hb-descriptions__view\">\n          <div class=\"hb-descriptions__row\" style={{ gridTemplateColumns: `repeat(${this.column}, minmax(0, 1fr))` }}>\n            {this.items.map((item) => (\n              <div\n                class=\"hb-descriptions__item\"\n                style={item.span ? { gridColumn: `span ${item.span}` } : undefined}\n              >\n                <span class=\"hb-descriptions__label\">\n                  {item.label}\n                  {this.colon && <span class=\"hb-descriptions__colon\">：</span>}\n                </span>\n                <span class=\"hb-descriptions__value\">{item.value}</span>\n              </div>\n            ))}\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n\nexport interface DescriptionItem {\n  label: string;\n  value: string;\n  span?: number;\n}\n"],"version":3}

package/dist/esm/hb-dialog.entry.js

@@ -0,0 +1,110 @@
+import { r as registerInstance, c as createEvent, g as getElement, h } from './index-fdf7135e.js';
+import { g as getNextZIndex, l as lockScroll, u as unlockScroll } from './popup-manager-128cc685.js';
+import { c as createFocusTrap } from './a11y-f9ab2964.js';
+
+const dialogCss = "/*! 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{.visible{visibility:visible}.container{width:100%}.hidden{display:none}.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:contents}.hb-dialog-wrapper{inset:0;pointer-events:none;position:fixed}.hb-dialog-wrapper--hidden{display:none}.hb-dialog__overlay{background-color:var(--hb-color-bg-mask);inset:0;transition:opacity .3s}.hb-dialog,.hb-dialog__overlay{pointer-events:auto;position:fixed}.hb-dialog{background-color:var(--hb-dialog-bg);border-radius:var(--hb-dialog-radius);box-shadow:var(--hb-dialog-shadow);display:flex;flex-direction:column;left:50%;max-height:90vh;opacity:0;overflow:hidden;top:50%;transform:translate(-50%,-50%)scale(.9);transition:opacity .3s,transform .3s}.hb-dialog--visible{opacity:1;transform:translate(-50%,-50%)scale(1)}.hb-dialog--fullscreen{border-radius:0;height:100vh;left:0;max-height:100vh;top:0;transform:none;width:100%!important}.hb-dialog--fullscreen.hb-dialog--visible{transform:none}.hb-dialog__header{align-items:center;border-bottom:1px solid var(--hb-color-border-secondary);display:flex;justify-content:space-between;padding:var(--hb-spacing-md)var(--hb-spacing-lg)}.hb-dialog__title{color:var(--hb-color-text-primary);font-size:var(--hb-font-size-lg);font-weight:600}.hb-dialog__close{align-items:center;background:0 0;border:none;border-radius:var(--hb-border-radius-sm);color:var(--hb-color-text-secondary);cursor:pointer;display:inline-flex;font-size:18px;height:28px;justify-content:center;transition:all var(--hb-transition-duration);width:28px}.hb-dialog__close:hover{background-color:var(--hb-color-fill-tertiary);color:var(--hb-color-text-primary)}.hb-dialog__body{color:var(--hb-color-text);flex:1;font-size:var(--hb-font-size-base);overflow-y:auto;padding:var(--hb-spacing-lg)}.hb-dialog__footer{align-items:center;border-top:1px solid var(--hb-color-border-secondary);display:flex;gap:var(--hb-spacing-xs);justify-content:flex-end;padding:var(--hb-spacing-sm)var(--hb-spacing-lg)}@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}@media (min-width:40rem){.container{max-width:40rem}}@media (min-width:48rem){.container{max-width:48rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:96rem){.container{max-width:96rem}}";
+const HbDialogStyle0 = dialogCss;
+
+const Dialog = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.hbOpen = createEvent(this, "hbOpen", 7);
+        this.hbClose = createEvent(this, "hbClose", 7);
+        this.hbClosed = createEvent(this, "hbClosed", 7);
+    }
+    get el() { return getElement(this); }
+    /** 是否显示 */
+    modelValue = false;
+    /** 标题 */
+    title = '';
+    /** 宽度 */
+    width = '50%';
+    /** 是否全屏 */
+    fullscreen = false;
+    /** 是否显示遮罩 */
+    modal = true;
+    /** 是否点击遮罩关闭 */
+    closeOnClickModal = true;
+    /** 是否按 ESC 关闭 */
+    closeOnPressEscape = true;
+    /** 是否显示关闭按钮 */
+    showClose = true;
+    /** 关闭时销毁 */
+    destroyOnClose = false;
+    /** 打开事件 */
+    hbOpen;
+    /** 关闭事件 */
+    hbClose;
+    /** 已关闭动画结束事件 */
+    hbClosed;
+    zIndex = 0;
+    panelRef;
+    trap;
+    handleVisibleChange(newVal) {
+        if (newVal) {
+            this.zIndex = getNextZIndex();
+            if (this.modal)
+                lockScroll();
+            this.hbOpen.emit();
+            document.addEventListener('keydown', this.handleKeyDown);
+        }
+        else {
+            if (this.modal)
+                unlockScroll();
+            document.removeEventListener('keydown', this.handleKeyDown);
+        }
+    }
+    disconnectedCallback() {
+        if (this.modelValue && this.modal)
+            unlockScroll();
+        document.removeEventListener('keydown', this.handleKeyDown);
+        this.trap?.disconnect();
+    }
+    componentDidRender() {
+        if (!this.panelRef)
+            return;
+        if (this.modelValue) {
+            if (!this.trap) {
+                this.trap = createFocusTrap({ container: this.panelRef });
+            }
+            this.trap.connect();
+        }
+        else {
+            this.trap?.disconnect();
+        }
+    }
+    handleKeyDown = (e) => {
+        if (this.closeOnPressEscape && e.key === 'Escape') {
+            this.close();
+        }
+    };
+    close = () => {
+        this.modelValue = false;
+        this.hbClose.emit();
+        setTimeout(() => this.hbClosed.emit(), 300);
+    };
+    handleOverlayClick = () => {
+        if (this.closeOnClickModal)
+            this.close();
+    };
+    render() {
+        if (this.destroyOnClose && !this.modelValue)
+            return null;
+        return (h("div", { class: { 'hb-dialog-wrapper': true, 'hb-dialog-wrapper--hidden': !this.modelValue } }, this.modal && (h("div", { class: "hb-dialog__overlay", style: { zIndex: String(this.zIndex) }, onClick: this.handleOverlayClick })), h("div", { ref: (el) => (this.panelRef = el), class: {
+                'hb-dialog': true,
+                'hb-dialog--fullscreen': this.fullscreen,
+                'hb-dialog--visible': this.modelValue,
+            }, style: {
+                zIndex: String(this.zIndex + 1),
+                width: this.fullscreen ? '100%' : this.width,
+            }, role: "dialog", "aria-modal": "true" }, h("div", { class: "hb-dialog__header" }, h("span", { class: "hb-dialog__title" }, this.title), this.showClose && (h("button", { type: "button", class: "hb-dialog__close", "aria-label": "\u5173\u95ED", onClick: this.close }, "\u00D7"))), h("div", { class: "hb-dialog__body" }, h("slot", null)), h("div", { class: "hb-dialog__footer" }, h("slot", { name: "footer" })))));
+    }
+    static get watchers() { return {
+        "modelValue": ["handleVisibleChange"]
+    }; }
+};
+Dialog.style = HbDialogStyle0;
+
+export { Dialog as hb_dialog };
+
+//# sourceMappingURL=hb-dialog.entry.js.map

package/dist/esm/hb-dialog.entry.js.map

@@ -0,0 +1 @@
+{"file":"hb-dialog.entry.js","mappings":"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","names":[],"sources":["src/components/Dialog/dialog.css?tag=hb-dialog&encapsulation=shadow","src/components/Dialog/Dialog.tsx"],"sourcesContent":[":host {\n  display: contents;\n}\n\n.hb-dialog-wrapper {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  pointer-events: none;\n}\n\n.hb-dialog-wrapper--hidden {\n  display: none;\n}\n\n.hb-dialog__overlay {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background-color: var(--hb-color-bg-mask);\n  transition: opacity 0.3s;\n  pointer-events: auto;\n}\n\n.hb-dialog {\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%) scale(0.9);\n  background-color: var(--hb-dialog-bg);\n  border-radius: var(--hb-dialog-radius);\n  box-shadow: var(--hb-dialog-shadow);\n  pointer-events: auto;\n  opacity: 0;\n  transition: opacity 0.3s, transform 0.3s;\n  display: flex;\n  flex-direction: column;\n  max-height: 90vh;\n  overflow: hidden;\n}\n\n.hb-dialog--visible {\n  opacity: 1;\n  transform: translate(-50%, -50%) scale(1);\n}\n\n.hb-dialog--fullscreen {\n  width: 100% !important;\n  height: 100vh;\n  top: 0;\n  left: 0;\n  transform: none;\n  border-radius: 0;\n  max-height: 100vh;\n}\n.hb-dialog--fullscreen.hb-dialog--visible {\n  transform: none;\n}\n\n.hb-dialog__header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: var(--hb-spacing-md) var(--hb-spacing-lg);\n  border-bottom: 1px solid var(--hb-color-border-secondary);\n}\n\n.hb-dialog__title {\n  font-size: var(--hb-font-size-lg);\n  font-weight: 600;\n  color: var(--hb-color-text-primary);\n}\n\n.hb-dialog__close {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 28px;\n  height: 28px;\n  border: none;\n  background: none;\n  font-size: 18px;\n  color: var(--hb-color-text-secondary);\n  cursor: pointer;\n  border-radius: var(--hb-border-radius-sm);\n  transition: all var(--hb-transition-duration);\n}\n\n.hb-dialog__close:hover {\n  background-color: var(--hb-color-fill-tertiary);\n  color: var(--hb-color-text-primary);\n}\n\n.hb-dialog__body {\n  flex: 1;\n  padding: var(--hb-spacing-lg);\n  overflow-y: auto;\n  color: var(--hb-color-text);\n  font-size: var(--hb-font-size-base);\n}\n\n.hb-dialog__footer {\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  gap: var(--hb-spacing-xs);\n  padding: var(--hb-spacing-sm) var(--hb-spacing-lg);\n  border-top: 1px solid var(--hb-color-border-secondary);\n}\n","import { Component, h, Prop, Event, EventEmitter, Watch, Element } from '@stencil/core';\nimport { lockScroll, unlockScroll, getNextZIndex } from '../../utils/popup-manager';\nimport { createFocusTrap, FocusTrap } from '../../utils/a11y';\n\n/**\n * Dialog 对话框组件\n * 在保留当前页面状态的情况下，告知用户并承载相关操作\n */\n@Component({\n  tag: 'hb-dialog',\n  styleUrl: 'dialog.css',\n  shadow: true,\n})\nexport class Dialog {\n  @Element() el: HTMLElement;\n\n  /** 是否显示 */\n  @Prop({ mutable: true }) modelValue: boolean = false;\n\n  /** 标题 */\n  @Prop() title: string = '';\n\n  /** 宽度 */\n  @Prop() width: string = '50%';\n\n  /** 是否全屏 */\n  @Prop() fullscreen: boolean = false;\n\n  /** 是否显示遮罩 */\n  @Prop() modal: boolean = true;\n\n  /** 是否点击遮罩关闭 */\n  @Prop() closeOnClickModal: boolean = true;\n\n  /** 是否按 ESC 关闭 */\n  @Prop() closeOnPressEscape: boolean = true;\n\n  /** 是否显示关闭按钮 */\n  @Prop() showClose: boolean = true;\n\n  /** 关闭时销毁 */\n  @Prop() destroyOnClose: boolean = false;\n\n  /** 打开事件 */\n  @Event() hbOpen: EventEmitter<void>;\n\n  /** 关闭事件 */\n  @Event() hbClose: EventEmitter<void>;\n\n  /** 已关闭动画结束事件 */\n  @Event() hbClosed: EventEmitter<void>;\n\n  private zIndex: number = 0;\n  private panelRef?: HTMLElement;\n  private trap?: FocusTrap;\n\n  @Watch('modelValue')\n  handleVisibleChange(newVal: boolean) {\n    if (newVal) {\n      this.zIndex = getNextZIndex();\n      if (this.modal) lockScroll();\n      this.hbOpen.emit();\n      document.addEventListener('keydown', this.handleKeyDown);\n    } else {\n      if (this.modal) unlockScroll();\n      document.removeEventListener('keydown', this.handleKeyDown);\n    }\n  }\n\n  disconnectedCallback() {\n    if (this.modelValue && this.modal) unlockScroll();\n    document.removeEventListener('keydown', this.handleKeyDown);\n    this.trap?.disconnect();\n  }\n\n  componentDidRender() {\n    if (!this.panelRef) return;\n    if (this.modelValue) {\n      if (!this.trap) {\n        this.trap = createFocusTrap({ container: this.panelRef });\n      }\n      this.trap.connect();\n    } else {\n      this.trap?.disconnect();\n    }\n  }\n\n  private handleKeyDown = (e: KeyboardEvent) => {\n    if (this.closeOnPressEscape && e.key === 'Escape') {\n      this.close();\n    }\n  };\n\n  private close = () => {\n    this.modelValue = false;\n    this.hbClose.emit();\n    setTimeout(() => this.hbClosed.emit(), 300);\n  };\n\n  private handleOverlayClick = () => {\n    if (this.closeOnClickModal) this.close();\n  };\n\n  render() {\n    if (this.destroyOnClose && !this.modelValue) return null;\n\n    return (\n      <div class={{ 'hb-dialog-wrapper': true, 'hb-dialog-wrapper--hidden': !this.modelValue }}>\n        {this.modal && (\n          <div\n            class=\"hb-dialog__overlay\"\n            style={{ zIndex: String(this.zIndex) }}\n            onClick={this.handleOverlayClick}\n          />\n        )}\n        <div\n          ref={(el) => (this.panelRef = el as HTMLElement)}\n          class={{\n            'hb-dialog': true,\n            'hb-dialog--fullscreen': this.fullscreen,\n            'hb-dialog--visible': this.modelValue,\n          }}\n          style={{\n            zIndex: String(this.zIndex + 1),\n            width: this.fullscreen ? '100%' : this.width,\n          }}\n          role=\"dialog\"\n          aria-modal=\"true\"\n        >\n          <div class=\"hb-dialog__header\">\n            <span class=\"hb-dialog__title\">{this.title}</span>\n            {this.showClose && (\n              <button type=\"button\" class=\"hb-dialog__close\" aria-label=\"关闭\" onClick={this.close}>×</button>\n            )}\n          </div>\n          <div class=\"hb-dialog__body\">\n            <slot />\n          </div>\n          <div class=\"hb-dialog__footer\">\n            <slot name=\"footer\" />\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/hb-divider.entry.js

@@ -0,0 +1,32 @@
+import { r as registerInstance, g as getElement, h } from './index-fdf7135e.js';
+
+const dividerCss = "/*! 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-divider{align-items:center;border:0;color:var(--hb-color-text-secondary);display:flex;font-size:var(--hb-font-size-sm);margin:var(--hb-spacing-md)0}.hb-divider__line{border-top:1px solid var(--hb-color-border-secondary);flex:1}.hb-divider--dashed .hb-divider__line{border-top-style:dashed}.hb-divider--vertical{display:inline-flex;flex-direction:column;height:.9em;margin:0 var(--hb-spacing-xs)}.hb-divider--vertical .hb-divider__line{border-left:1px solid var(--hb-color-border-secondary);border-top:none;flex:none;height:100%}.hb-divider__text{padding:0 var(--hb-spacing-sm);white-space:nowrap}@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 HbDividerStyle0 = dividerCss;
+
+const Divider = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    get el() { return getElement(this); }
+    /** 分割线方向 */
+    direction = 'horizontal';
+    /** 文字位置 */
+    contentPosition = 'center';
+    /** 是否虚线 */
+    dashed = false;
+    render() {
+        const hasContent = this.el.childNodes.length > 0;
+        return (h("div", { key: '9c92e52f27cf63f9eb08f76204c0380df1f70762', class: {
+                'hb-divider': true,
+                [`hb-divider--${this.direction}`]: true,
+                'hb-divider--dashed': this.dashed,
+                'hb-divider--with-text': hasContent,
+                [`hb-divider--with-text-${this.contentPosition}`]: hasContent,
+            } }, h("div", { key: 'be7ed538cb7c11ecd5228456c70064b7a1134c22', class: "hb-divider__line hb-divider__line--before" }), h("div", { key: '381b60a6d74c9d595d23ba931f4de73a1479d45c', class: "hb-divider__text" }, h("slot", { key: '0bd08b0d41a9d2d4dad651e0c37a7e7fc10eab4c' })), h("div", { key: 'dd0774049f2b68b47f21c7171532f830d766c276', class: "hb-divider__line hb-divider__line--after" })));
+    }
+};
+Divider.style = HbDividerStyle0;
+
+export { Divider as hb_divider };
+
+//# sourceMappingURL=hb-divider.entry.js.map

package/dist/esm/hb-divider.entry.js.map

@@ -0,0 +1 @@
+{"file":"hb-divider.entry.js","mappings":";;AAAA,MAAM,UAAU,GAAG,ytMAAytM,CAAC;AAC7uM,wBAAe,UAAU;;MCUZ,OAAO;;;;;;IAIV,SAAS,GAA8B,YAAY,CAAC;;IAGpD,eAAe,GAAgC,QAAQ,CAAC;;IAGxD,MAAM,GAAY,KAAK,CAAC;IAEhC,MAAM;QACJ,MAAM,UAAU,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,MAAM,GAAG,CAAC,CAAC;QACjD,QACE,4DACE,KAAK,EAAE;gBACL,YAAY,EAAE,IAAI;gBAClB,CAAC,eAAe,IAAI,CAAC,SAAS,EAAE,GAAG,IAAI;gBACvC,oBAAoB,EAAE,IAAI,CAAC,MAAM;gBACjC,uBAAuB,EAAE,UAAU;gBACnC,CAAC,yBAAyB,IAAI,CAAC,eAAe,EAAE,GAAG,UAAU;aAC9D,IAED,4DAAK,KAAK,EAAC,2CAA2C,GAAO,EAC7D,4DAAK,KAAK,EAAC,kBAAkB,IAAC,8DAAQ,CAAM,EAC5C,4DAAK,KAAK,EAAC,0CAA0C,GAAO,CACxD,EACN;KACH;;;;;;","names":[],"sources":["src/components/Divider/divider.css?tag=hb-divider&encapsulation=shadow","src/components/Divider/Divider.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.hb-divider {\n  display: flex;\n  align-items: center;\n  margin: var(--hb-spacing-md) 0;\n  border: 0;\n  color: var(--hb-color-text-secondary);\n  font-size: var(--hb-font-size-sm);\n}\n\n.hb-divider__line {\n  flex: 1;\n  border-top: 1px solid var(--hb-color-border-secondary);\n}\n\n.hb-divider--dashed .hb-divider__line {\n  border-top-style: dashed;\n}\n\n.hb-divider--vertical {\n  display: inline-flex;\n  flex-direction: column;\n  margin: 0 var(--hb-spacing-xs);\n  height: 0.9em;\n}\n\n.hb-divider--vertical .hb-divider__line {\n  border-top: none;\n  border-left: 1px solid var(--hb-color-border-secondary);\n  flex: none;\n  height: 100%;\n}\n\n.hb-divider__text {\n  padding: 0 var(--hb-spacing-sm);\n  white-space: nowrap;\n}\n","import { Component, h, Prop, Element } from '@stencil/core';\n\n/**\n * Divider 分割线组件\n * 区隔内容的分割线\n */\n@Component({\n  tag: 'hb-divider',\n  styleUrl: 'divider.css',\n  shadow: true,\n})\nexport class Divider {\n  @Element() el: HTMLElement;\n\n  /** 分割线方向 */\n  @Prop() direction: 'horizontal' | 'vertical' = 'horizontal';\n\n  /** 文字位置 */\n  @Prop() contentPosition: 'left' | 'center' | 'right' = 'center';\n\n  /** 是否虚线 */\n  @Prop() dashed: boolean = false;\n\n  render() {\n    const hasContent = this.el.childNodes.length > 0;\n    return (\n      <div\n        class={{\n          'hb-divider': true,\n          [`hb-divider--${this.direction}`]: true,\n          'hb-divider--dashed': this.dashed,\n          'hb-divider--with-text': hasContent,\n          [`hb-divider--with-text-${this.contentPosition}`]: hasContent,\n        }}\n      >\n        <div class=\"hb-divider__line hb-divider__line--before\"></div>\n        <div class=\"hb-divider__text\"><slot /></div>\n        <div class=\"hb-divider__line hb-divider__line--after\"></div>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/hb-drawer.entry.js

@@ -0,0 +1,85 @@
+import { r as registerInstance, c as createEvent, h } from './index-fdf7135e.js';
+import { g as getNextZIndex, l as lockScroll, u as unlockScroll } from './popup-manager-128cc685.js';
+import { c as createFocusTrap } from './a11y-f9ab2964.js';
+
+const drawerCss = "/*! 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{.visible{visibility:visible}.container{width:100%}.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:contents}.hb-drawer-wrapper{inset:0;pointer-events:none;position:fixed;z-index:1000}.hb-drawer__overlay{background:var(--hb-color-bg-mask);inset:0;transition:opacity .3s}.hb-drawer,.hb-drawer__overlay{pointer-events:auto;position:fixed}.hb-drawer{background:var(--hb-color-bg-elevated);box-shadow:var(--hb-box-shadow-lg);display:flex;flex-direction:column;transition:transform .3s}.hb-drawer--rtl{bottom:0;right:0;top:0;transform:translate(100%)}.hb-drawer--ltr{bottom:0;left:0;top:0;transform:translate(-100%)}.hb-drawer--ttb{left:0;right:0;top:0;transform:translateY(-100%)}.hb-drawer--btt{bottom:0;left:0;right:0;transform:translateY(100%)}.hb-drawer--visible.hb-drawer--ltr,.hb-drawer--visible.hb-drawer--rtl{transform:translate(0)}.hb-drawer--visible.hb-drawer--btt,.hb-drawer--visible.hb-drawer--ttb{transform:translateY(0)}.hb-drawer__header{align-items:center;border-bottom:1px solid var(--hb-color-border-secondary);display:flex;justify-content:space-between;padding:var(--hb-spacing-md)var(--hb-spacing-lg)}.hb-drawer__title{font-size:var(--hb-font-size-lg);font-weight:600}.hb-drawer__close{align-items:center;background:0 0;border:none;border-radius:var(--hb-border-radius-sm);color:var(--hb-color-text-secondary);cursor:pointer;display:flex;font-size:18px;height:28px;justify-content:center;width:28px}.hb-drawer__close:hover{background:var(--hb-color-fill-tertiary)}.hb-drawer__body{flex:1;overflow-y:auto;padding:var(--hb-spacing-lg)}@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}@media (min-width:40rem){.container{max-width:40rem}}@media (min-width:48rem){.container{max-width:48rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:96rem){.container{max-width:96rem}}";
+const HbDrawerStyle0 = drawerCss;
+
+const Drawer = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.hbOpen = createEvent(this, "hbOpen", 7);
+        this.hbClose = createEvent(this, "hbClose", 7);
+    }
+    modelValue = false;
+    title = '';
+    size = '30%';
+    direction = 'rtl';
+    closeOnClickModal = true;
+    showClose = true;
+    modal = true;
+    /** 是否按 ESC 关闭 */
+    closeOnPressEscape = true;
+    zIndexState = 0;
+    zIndex = 0;
+    panelRef;
+    trap;
+    hbOpen;
+    hbClose;
+    handleVisible(val) {
+        if (val) {
+            this.zIndex = getNextZIndex();
+            this.zIndexState = this.zIndex;
+            if (this.modal)
+                lockScroll();
+            this.hbOpen.emit();
+            document.addEventListener('keydown', this.handleKeyDown);
+        }
+        else {
+            if (this.modal)
+                unlockScroll();
+            this.hbClose.emit();
+            document.removeEventListener('keydown', this.handleKeyDown);
+        }
+    }
+    componentDidRender() {
+        if (!this.panelRef)
+            return;
+        if (this.modelValue) {
+            if (!this.trap) {
+                this.trap = createFocusTrap({ container: this.panelRef });
+            }
+            this.trap.connect();
+        }
+        else {
+            this.trap?.disconnect();
+        }
+    }
+    disconnectedCallback() {
+        if (this.modelValue && this.modal)
+            unlockScroll();
+        document.removeEventListener('keydown', this.handleKeyDown);
+        this.trap?.disconnect();
+    }
+    handleKeyDown = (e) => {
+        if (this.closeOnPressEscape && e.key === 'Escape') {
+            this.close();
+        }
+    };
+    close = () => { this.modelValue = false; };
+    render() {
+        const dir = this.direction;
+        const isVertical = dir === 'ttb' || dir === 'btt';
+        const sizeStyle = isVertical ? { height: this.size } : { width: this.size };
+        const translateClass = `hb-drawer--${dir}`;
+        return (h("div", { key: 'fdcae509a34a2de7ba9405106b217fda8ce765fa', class: { 'hb-drawer-wrapper': true, 'hb-drawer-wrapper--visible': this.modelValue } }, this.modal && h("div", { key: '439a2a35c0936bc0e347e7826f801dbf87d1047b', class: "hb-drawer__overlay", style: { zIndex: String(this.zIndexState) }, onClick: () => this.closeOnClickModal && this.close() }), h("div", { key: '924fc27dc43f9d7b466b81a7b70cbfb1a6ba199e', ref: (el) => (this.panelRef = el), class: { 'hb-drawer': true, [translateClass]: true, 'hb-drawer--visible': this.modelValue }, style: { ...sizeStyle, zIndex: String(this.zIndexState + 1) }, role: "dialog", "aria-modal": "true", "aria-label": this.title || undefined }, h("div", { key: '6c0c1e6e4938ad96c51add0e4be93de8ef72a056', class: "hb-drawer__header" }, h("span", { key: 'bc061a418b7358364b19190cc6b042fb5a049c95', class: "hb-drawer__title" }, this.title), this.showClose && h("button", { key: '52ceeac26c55f0e89c8c4410959c25b13ab2e28b', type: "button", class: "hb-drawer__close", "aria-label": "\u5173\u95ED", onClick: this.close }, "\u00D7")), h("div", { key: 'ca916f681e9c7e4fb33d1d0b7cee03a20f42f7eb', class: "hb-drawer__body" }, h("slot", { key: 'f8a3fb1d251d5c16c98257bb8896c081623f321e' })))));
+    }
+    static get watchers() { return {
+        "modelValue": ["handleVisible"]
+    }; }
+};
+Drawer.style = HbDrawerStyle0;
+
+export { Drawer as hb_drawer };
+
+//# sourceMappingURL=hb-drawer.entry.js.map

package/dist/esm/hb-drawer.entry.js.map

@@ -0,0 +1 @@
+{"file":"hb-drawer.entry.js","mappings":"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","names":[],"sources":["src/components/Drawer/drawer.css?tag=hb-drawer&encapsulation=shadow","src/components/Drawer/Drawer.tsx"],"sourcesContent":[":host { display: contents; }\n.hb-drawer-wrapper { position: fixed; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; z-index: 1000; }\n.hb-drawer__overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: var(--hb-color-bg-mask); pointer-events: auto; transition: opacity 0.3s; }\n.hb-drawer {\n  position: fixed; background: var(--hb-color-bg-elevated); box-shadow: var(--hb-box-shadow-lg);\n  display: flex; flex-direction: column; pointer-events: auto; transition: transform 0.3s ease;\n}\n.hb-drawer--rtl { top: 0; right: 0; bottom: 0; transform: translateX(100%); }\n.hb-drawer--ltr { top: 0; left: 0; bottom: 0; transform: translateX(-100%); }\n.hb-drawer--ttb { left: 0; right: 0; top: 0; transform: translateY(-100%); }\n.hb-drawer--btt { left: 0; right: 0; bottom: 0; transform: translateY(100%); }\n.hb-drawer--visible.hb-drawer--rtl, .hb-drawer--visible.hb-drawer--ltr { transform: translateX(0); }\n.hb-drawer--visible.hb-drawer--ttb, .hb-drawer--visible.hb-drawer--btt { transform: translateY(0); }\n.hb-drawer__header { display: flex; align-items: center; justify-content: space-between; padding: var(--hb-spacing-md) var(--hb-spacing-lg); border-bottom: 1px solid var(--hb-color-border-secondary); }\n.hb-drawer__title { font-size: var(--hb-font-size-lg); font-weight: 600; }\n.hb-drawer__close { border: none; background: none; font-size: 18px; cursor: pointer; color: var(--hb-color-text-secondary); width: 28px; height: 28px; border-radius: var(--hb-border-radius-sm); display: flex; align-items: center; justify-content: center; }\n.hb-drawer__close:hover { background: var(--hb-color-fill-tertiary); }\n.hb-drawer__body { flex: 1; padding: var(--hb-spacing-lg); overflow-y: auto; }\n","import { Component, h, Prop, Event, EventEmitter, Watch, State } from '@stencil/core';\nimport { lockScroll, unlockScroll, getNextZIndex } from '../../utils/popup-manager';\nimport { createFocusTrap, FocusTrap } from '../../utils/a11y';\n\n@Component({ tag: 'hb-drawer', styleUrl: 'drawer.css', shadow: true })\nexport class Drawer {\n  @Prop({ mutable: true }) modelValue: boolean = false;\n  @Prop() title: string = '';\n  @Prop() size: string = '30%';\n  @Prop() direction: 'ltr' | 'rtl' | 'ttb' | 'btt' = 'rtl';\n  @Prop() closeOnClickModal: boolean = true;\n  @Prop() showClose: boolean = true;\n  @Prop() modal: boolean = true;\n  /** 是否按 ESC 关闭 */\n  @Prop() closeOnPressEscape: boolean = true;\n  @State() private zIndexState: number = 0;\n  private zIndex: number = 0;\n  private panelRef?: HTMLElement;\n  private trap?: FocusTrap;\n\n  @Event() hbOpen: EventEmitter<void>;\n  @Event() hbClose: EventEmitter<void>;\n\n  @Watch('modelValue')\n  handleVisible(val: boolean) {\n    if (val) {\n      this.zIndex = getNextZIndex();\n      this.zIndexState = this.zIndex;\n      if (this.modal) lockScroll();\n      this.hbOpen.emit();\n      document.addEventListener('keydown', this.handleKeyDown);\n    } else {\n      if (this.modal) unlockScroll();\n      this.hbClose.emit();\n      document.removeEventListener('keydown', this.handleKeyDown);\n    }\n  }\n\n  componentDidRender() {\n    if (!this.panelRef) return;\n    if (this.modelValue) {\n      if (!this.trap) {\n        this.trap = createFocusTrap({ container: this.panelRef });\n      }\n      this.trap.connect();\n    } else {\n      this.trap?.disconnect();\n    }\n  }\n\n  disconnectedCallback() {\n    if (this.modelValue && this.modal) unlockScroll();\n    document.removeEventListener('keydown', this.handleKeyDown);\n    this.trap?.disconnect();\n  }\n\n  private handleKeyDown = (e: KeyboardEvent) => {\n    if (this.closeOnPressEscape && e.key === 'Escape') {\n      this.close();\n    }\n  };\n\n  private close = () => { this.modelValue = false; };\n\n  render() {\n    const dir = this.direction;\n    const isVertical = dir === 'ttb' || dir === 'btt';\n    const sizeStyle = isVertical ? { height: this.size } : { width: this.size };\n    const translateClass = `hb-drawer--${dir}`;\n\n    return (\n      <div class={{ 'hb-drawer-wrapper': true, 'hb-drawer-wrapper--visible': this.modelValue }}>\n        {this.modal && <div class=\"hb-drawer__overlay\" style={{ zIndex: String(this.zIndexState) }} onClick={() => this.closeOnClickModal && this.close()} />}\n        <div\n          ref={(el) => (this.panelRef = el as HTMLElement)}\n          class={{ 'hb-drawer': true, [translateClass]: true, 'hb-drawer--visible': this.modelValue }}\n          style={{ ...sizeStyle, zIndex: String(this.zIndexState + 1) }}\n          role=\"dialog\"\n          aria-modal=\"true\"\n          aria-label={this.title || undefined}\n        >\n          <div class=\"hb-drawer__header\">\n            <span class=\"hb-drawer__title\">{this.title}</span>\n            {this.showClose && <button type=\"button\" class=\"hb-drawer__close\" aria-label=\"关闭\" onClick={this.close}>×</button>}\n          </div>\n          <div class=\"hb-drawer__body\"><slot /></div>\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}