huibo-ui 0.3.0

package/dist/components/hb-container.js

@@ -0,0 +1,47 @@
+import { p as proxyCustomElement, H, h } from './p-1407a5e8.js';
+
+const containerCss = "/*! 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-container-padding:20px;display:block}.hb-container{box-sizing:border-box;display:flex;flex-flow:wrap;width:100%}.hb-container--vertical{flex-flow:column}::slotted(hb-aside),::slotted(hb-header){padding:var(--hb-container-padding)}::slotted(hb-main){box-sizing:border-box;flex:1;overflow:auto;padding:var(--hb-container-padding)}::slotted(hb-footer){padding:var(--hb-container-padding)}@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 HbContainerStyle0 = containerCss;
+
+const Container = /*@__PURE__*/ proxyCustomElement(class Container extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+    }
+    /**
+     * 布局方向，vertical 时子元素为纵向排列
+     * @default false
+     */
+    direction = 'horizontal';
+    render() {
+        return (h("section", { key: '8d2029a2363134efb2feb8df16510a5ababe2764', class: {
+                'hb-container': true,
+                'hb-container--vertical': this.direction === 'vertical',
+            } }, h("slot", { key: 'fb2dea608d501e5db4a03657796571fdb30c9128' })));
+    }
+    static get style() { return HbContainerStyle0; }
+}, [1, "hb-container", {
+        "direction": [1]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["hb-container"];
+    components.forEach(tagName => { switch (tagName) {
+        case "hb-container":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, Container);
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const HbContainer = Container;
+const defineCustomElement = defineCustomElement$1;
+
+export { HbContainer, defineCustomElement };
+
+//# sourceMappingURL=hb-container.js.map

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

@@ -0,0 +1 @@
+{"file":"hb-container.js","mappings":";;AAAA,MAAM,YAAY,GAAG,y/LAAy/L,CAAC;AAC/gM,0BAAe,YAAY;;MCUd,SAAS;;;;;;;;;;IAKZ,SAAS,GAA8B,YAAY,CAAC;IAE5D,MAAM;QACJ,QACE,gEACE,KAAK,EAAE;gBACL,cAAc,EAAE,IAAI;gBACpB,wBAAwB,EAAE,IAAI,CAAC,SAAS,KAAK,UAAU;aACxD,IAED,8DAAa,CACL,EACV;KACH;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/Container/container.css?tag=hb-container&encapsulation=shadow","src/components/Container/Container.tsx"],"sourcesContent":[":host {\n  display: block;\n  --hb-container-padding: 20px;\n}\n\n.hb-container {\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  box-sizing: border-box;\n  width: 100%;\n}\n\n.hb-container--vertical {\n  flex-direction: column;\n  flex-wrap: nowrap;\n}\n\n/* Header */\n::slotted(hb-header) {\n  padding: var(--hb-container-padding);\n}\n\n/* Aside */\n::slotted(hb-aside) {\n  padding: var(--hb-container-padding);\n}\n\n/* Main */\n::slotted(hb-main) {\n  padding: var(--hb-container-padding);\n  flex: 1;\n  overflow: auto;\n  box-sizing: border-box;\n}\n\n/* Footer */\n::slotted(hb-footer) {\n  padding: var(--hb-container-padding);\n}\n\n","import { Component, h, Prop } from '@stencil/core';\n\n/**\n * Container 布局容器组件\n * 用于布局的容器组件，方便快速搭建页面的基本结构\n */\n@Component({\n  tag: 'hb-container',\n  styleUrl: 'container.css',\n  shadow: true,\n})\nexport class Container {\n  /**\n   * 布局方向，vertical 时子元素为纵向排列\n   * @default false\n   */\n  @Prop() direction: 'horizontal' | 'vertical' = 'horizontal';\n\n  render() {\n    return (\n      <section\n        class={{\n          'hb-container': true,\n          'hb-container--vertical': this.direction === 'vertical',\n        }}\n      >\n        <slot></slot>\n      </section>\n    );\n  }\n}\n\n"],"version":3}

package/dist/components/hb-date-picker-pane.d.ts

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

package/dist/components/hb-date-picker-pane.js

@@ -0,0 +1,172 @@
+import { p as proxyCustomElement, H, c as createEvent, h } from './p-1407a5e8.js';
+import { p as parseDate, a as addMonths, b as addYears, M as MONTH_NAMES, c as getYearRangeStart, g as getCalendarDays, W as WEEK_DAY_NAMES, d as getCalendarYears } from './p-cf94cbf6.js';
+
+const datePickerPaneCss = "/*! 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-date-picker-pane{background-color:var(--hb-color-white,#fff);border-radius:4px;padding:12px}.hb-date-picker-pane__header{align-items:center;display:flex;justify-content:space-between;margin-bottom:12px}.hb-date-picker-pane__header-label{background:0 0;border:none;border-radius:4px;color:var(--hb-color-text-regular,#606266);cursor:pointer;font-size:14px;font-weight:600;padding:4px 8px;transition:color .2s,background-color .2s}.hb-date-picker-pane__header-label:hover{background-color:var(--hb-fill-color-light,#f5f7fa);color:var(--hb-color-primary)}.hb-date-picker-pane__next-btn,.hb-date-picker-pane__prev-btn{background:0 0;border:none;color:var(--hb-color-text-regular,#606266);cursor:pointer;font-size:18px;padding:4px 8px;transition:color .2s}.hb-date-picker-pane__next-btn:hover,.hb-date-picker-pane__prev-btn:hover{color:var(--hb-color-primary)}.hb-date-picker-pane__weekdays{display:grid;gap:4px;grid-template-columns:repeat(7,1fr);margin-bottom:8px}.hb-date-picker-pane__weekday{color:var(--hb-color-text-placeholder,#c0c4cc);font-size:12px;font-weight:500;text-align:center}.hb-date-picker-pane__days{display:grid;gap:4px;grid-template-columns:repeat(7,1fr)}.hb-date-picker-pane__day{align-items:center;aspect-ratio:1;border-radius:4px;color:var(--hb-color-text-regular,#606266);cursor:pointer;display:flex;font-size:13px;justify-content:center;transition:all .2s}.hb-date-picker-pane__day:hover:not(.hb-date-picker-pane__day--other-month){background-color:var(--hb-fill-color-light,#f5f7fa)}.hb-date-picker-pane__day--other-month{color:var(--hb-color-text-placeholder,#c0c4cc);cursor:default}.hb-date-picker-pane__day--today{color:var(--hb-color-primary);font-weight:600}.hb-date-picker-pane__day--selected{background-color:var(--hb-color-primary);color:var(--hb-color-white,#fff)}.hb-date-picker-pane__months,.hb-date-picker-pane__years{display:grid;gap:8px;grid-template-columns:repeat(3,1fr);padding:4px 0}.hb-date-picker-pane__month,.hb-date-picker-pane__year{align-items:center;border-radius:4px;color:var(--hb-color-text-regular,#606266);cursor:pointer;display:flex;font-size:13px;justify-content:center;min-height:48px;transition:background-color .2s,color .2s}.hb-date-picker-pane__month:hover,.hb-date-picker-pane__year:hover{background-color:var(--hb-fill-color-light,#f5f7fa)}.hb-date-picker-pane__month--current,.hb-date-picker-pane__year--current{color:var(--hb-color-primary);font-weight:600}.hb-date-picker-pane__month--selected,.hb-date-picker-pane__year--selected{background-color:var(--hb-color-primary);color:var(--hb-color-white,#fff)}@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 HbDatePickerPaneStyle0 = datePickerPaneCss;
+
+const DatePickerPane = /*@__PURE__*/ proxyCustomElement(class DatePickerPane extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.hbChange = createEvent(this, "hbChange", 7);
+        this.hbViewChange = createEvent(this, "hbViewChange", 7);
+    }
+    /** 绑定值 */
+    modelValue;
+    /** 日期格式 */
+    format = 'YYYY-MM-DD';
+    /** 当前视图类型，默认 days */
+    view = 'days';
+    selectedDate;
+    /** 值改变事件 */
+    hbChange;
+    /** 视图切换事件 */
+    hbViewChange;
+    componentDidLoad() {
+        this.updateSelectedDate();
+    }
+    handleValueChange() {
+        this.updateSelectedDate();
+    }
+    updateSelectedDate() {
+        this.selectedDate = parseDate(this.modelValue);
+    }
+    handleDateSelect = (date) => {
+        this.selectedDate = date;
+        this.modelValue = date;
+        this.hbChange.emit(date);
+    };
+    /** 头部导航箭头：days 视图 ±1 月，months 视图 ±1 年，years 视图 ±12 年 */
+    handlePrev = () => {
+        const base = this.selectedDate || new Date();
+        if (this.view === 'days') {
+            this.selectedDate = addMonths(base, -1);
+        }
+        else if (this.view === 'months') {
+            this.selectedDate = addYears(base, -1);
+        }
+        else {
+            this.selectedDate = addYears(base, -12);
+        }
+    };
+    handleNext = () => {
+        const base = this.selectedDate || new Date();
+        if (this.view === 'days') {
+            this.selectedDate = addMonths(base, 1);
+        }
+        else if (this.view === 'months') {
+            this.selectedDate = addYears(base, 1);
+        }
+        else {
+            this.selectedDate = addYears(base, 12);
+        }
+    };
+    /** 点击 header 标题：days→months→years */
+    handleHeaderTitleClick = () => {
+        if (this.view === 'days') {
+            this.view = 'months';
+        }
+        else if (this.view === 'months') {
+            this.view = 'years';
+        }
+        this.hbViewChange.emit(this.view);
+    };
+    /** months 视图：选某月 → 切回 days 并跳到该月 */
+    handleMonthSelect = (monthIndex) => {
+        const base = this.selectedDate || new Date();
+        const next = new Date(base);
+        next.setMonth(monthIndex);
+        this.selectedDate = next;
+        this.view = 'days';
+        this.hbViewChange.emit(this.view);
+    };
+    /** years 视图：选某年 → 切到 months 并跳到该年 */
+    handleYearSelect = (year) => {
+        const base = this.selectedDate || new Date();
+        const next = new Date(base);
+        next.setFullYear(year);
+        this.selectedDate = next;
+        this.view = 'months';
+        this.hbViewChange.emit(this.view);
+    };
+    /** 头部标题文本，根据视图类型生成 */
+    getHeaderTitle() {
+        const current = this.selectedDate || new Date();
+        if (this.view === 'days') {
+            return `${current.getFullYear()}年 ${MONTH_NAMES[current.getMonth()]}`;
+        }
+        if (this.view === 'months') {
+            return `${current.getFullYear()}年`;
+        }
+        // years 视图显示年份档区间，如 2020 - 2031
+        const start = getYearRangeStart(current);
+        return `${start} - ${start + 11}`;
+    }
+    render() {
+        const current = this.selectedDate || new Date();
+        return (h("div", { key: '2259a27d8de2d7944a83a85c2fb2281d22d7f62e', class: "hb-date-picker-pane" }, h("div", { key: '8c27820ac2eeb5a39be44f828879c98a33f89e91', class: "hb-date-picker-pane__header" }, h("button", { key: 'ea7060e14f917bc003303d2dd2d680c3de24d62a', type: "button", class: "hb-date-picker-pane__prev-btn", "aria-label": "\u4E0A\u4E00\u4E2A", onClick: this.handlePrev }, "\u2039"), h("button", { key: '020b053fcfed2384ab62b3c8b408c47864f54a57', type: "button", class: "hb-date-picker-pane__header-label", "aria-live": "polite", onClick: this.handleHeaderTitleClick }, this.getHeaderTitle()), h("button", { key: '055a6e6d191c2c2e29f3d459c27a8007086de7ee', type: "button", class: "hb-date-picker-pane__next-btn", "aria-label": "\u4E0B\u4E00\u4E2A", onClick: this.handleNext }, "\u203A")), this.view === 'days' && this.renderDaysView(), this.view === 'months' && this.renderMonthsView(current), this.view === 'years' && this.renderYearsView(current)));
+    }
+    renderDaysView() {
+        const days = getCalendarDays(this.selectedDate || new Date(), this.selectedDate);
+        return (h("div", { class: "hb-date-picker-pane__body" }, h("div", { class: "hb-date-picker-pane__weekdays" }, WEEK_DAY_NAMES.map(day => (h("div", { class: "hb-date-picker-pane__weekday" }, day)))), h("div", { class: "hb-date-picker-pane__days" }, days.map((day, index) => (h("div", { key: index, class: {
+                'hb-date-picker-pane__day': true,
+                'hb-date-picker-pane__day--other-month': !day.isCurrentMonth,
+                'hb-date-picker-pane__day--today': day.isToday,
+                'hb-date-picker-pane__day--selected': day.isSelected,
+            }, onClick: () => day.isCurrentMonth && this.handleDateSelect(day.date) }, day.date.getDate()))))));
+    }
+    renderMonthsView(current) {
+        // modelValue（选中值）所在的年/月
+        const modelDate = parseDate(this.modelValue);
+        const selectedMonth = modelDate ? modelDate.getMonth() : -1;
+        const selectedYear = modelDate ? modelDate.getFullYear() : -1;
+        // current 是当前面板的浏览焦点日期（selectedDate 或今天）
+        return (h("div", { class: "hb-date-picker-pane__body" }, h("div", { class: "hb-date-picker-pane__months" }, MONTH_NAMES.map((name, monthIndex) => (h("div", { key: monthIndex, class: {
+                'hb-date-picker-pane__month': true,
+                'hb-date-picker-pane__month--current': monthIndex === current.getMonth(),
+                'hb-date-picker-pane__month--selected': monthIndex === selectedMonth && current.getFullYear() === selectedYear,
+            }, onClick: () => this.handleMonthSelect(monthIndex) }, name))))));
+    }
+    renderYearsView(current) {
+        const modelDate = parseDate(this.modelValue);
+        const years = getCalendarYears(this.selectedDate || new Date(), modelDate);
+        return (h("div", { class: "hb-date-picker-pane__body" }, h("div", { class: "hb-date-picker-pane__years" }, years.map(item => (h("div", { key: item.year, class: {
+                'hb-date-picker-pane__year': true,
+                'hb-date-picker-pane__year--current': item.year === current.getFullYear(),
+                'hb-date-picker-pane__year--selected': item.isSelected,
+            }, onClick: () => this.handleYearSelect(item.year) }, item.year))))));
+    }
+    static get watchers() { return {
+        "modelValue": ["handleValueChange"]
+    }; }
+    static get style() { return HbDatePickerPaneStyle0; }
+}, [1, "hb-date-picker-pane", {
+        "modelValue": [1025, "model-value"],
+        "format": [1],
+        "view": [1025],
+        "selectedDate": [32]
+    }, undefined, {
+        "modelValue": ["handleValueChange"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["hb-date-picker-pane"];
+    components.forEach(tagName => { switch (tagName) {
+        case "hb-date-picker-pane":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, DatePickerPane);
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const HbDatePickerPane = DatePickerPane;
+const defineCustomElement = defineCustomElement$1;
+
+export { HbDatePickerPane, defineCustomElement };
+
+//# sourceMappingURL=hb-date-picker-pane.js.map

package/dist/components/hb-date-picker-pane.js.map

@@ -0,0 +1 @@
+{"file":"hb-date-picker-pane.js","mappings":"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","names":[],"sources":["src/components/DatePickerPane/date-picker-pane.css?tag=hb-date-picker-pane&encapsulation=shadow","src/components/DatePickerPane/DatePickerPane.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.hb-date-picker-pane {\n  padding: 12px;\n  background-color: var(--hb-color-white, #ffffff);\n  border-radius: 4px;\n}\n\n.hb-date-picker-pane__header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin-bottom: 12px;\n}\n\n.hb-date-picker-pane__header-label {\n  font-weight: 600;\n  font-size: 14px;\n  color: var(--hb-color-text-regular, #606266);\n  background: none;\n  border: none;\n  cursor: pointer;\n  padding: 4px 8px;\n  border-radius: 4px;\n  transition: color 0.2s, background-color 0.2s;\n}\n\n.hb-date-picker-pane__header-label:hover {\n  color: var(--hb-color-primary);\n  background-color: var(--hb-fill-color-light, #f5f7fa);\n}\n\n.hb-date-picker-pane__prev-btn,\n.hb-date-picker-pane__next-btn {\n  background: none;\n  border: none;\n  font-size: 18px;\n  cursor: pointer;\n  color: var(--hb-color-text-regular, #606266);\n  padding: 4px 8px;\n  transition: color 0.2s;\n}\n\n.hb-date-picker-pane__prev-btn:hover,\n.hb-date-picker-pane__next-btn:hover {\n  color: var(--hb-color-primary);\n}\n\n.hb-date-picker-pane__weekdays {\n  display: grid;\n  grid-template-columns: repeat(7, 1fr);\n  gap: 4px;\n  margin-bottom: 8px;\n}\n\n.hb-date-picker-pane__weekday {\n  text-align: center;\n  font-size: 12px;\n  color: var(--hb-color-text-placeholder, #c0c4cc);\n  font-weight: 500;\n}\n\n.hb-date-picker-pane__days {\n  display: grid;\n  grid-template-columns: repeat(7, 1fr);\n  gap: 4px;\n}\n\n.hb-date-picker-pane__day {\n  aspect-ratio: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 13px;\n  color: var(--hb-color-text-regular, #606266);\n  cursor: pointer;\n  border-radius: 4px;\n  transition: all 0.2s;\n}\n\n.hb-date-picker-pane__day:hover:not(.hb-date-picker-pane__day--other-month) {\n  background-color: var(--hb-fill-color-light, #f5f7fa);\n}\n\n.hb-date-picker-pane__day--other-month {\n  color: var(--hb-color-text-placeholder, #c0c4cc);\n  cursor: default;\n}\n\n.hb-date-picker-pane__day--today {\n  color: var(--hb-color-primary);\n  font-weight: 600;\n}\n\n.hb-date-picker-pane__day--selected {\n  background-color: var(--hb-color-primary);\n  color: var(--hb-color-white, #ffffff);\n}\n\n/* months / years 视图共享格子样式 */\n.hb-date-picker-pane__months,\n.hb-date-picker-pane__years {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: 8px;\n  padding: 4px 0;\n}\n\n.hb-date-picker-pane__month,\n.hb-date-picker-pane__year {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-height: 48px;\n  font-size: 13px;\n  color: var(--hb-color-text-regular, #606266);\n  cursor: pointer;\n  border-radius: 4px;\n  transition: background-color 0.2s, color 0.2s;\n}\n\n.hb-date-picker-pane__month:hover,\n.hb-date-picker-pane__year:hover {\n  background-color: var(--hb-fill-color-light, #f5f7fa);\n}\n\n.hb-date-picker-pane__month--current,\n.hb-date-picker-pane__year--current {\n  color: var(--hb-color-primary);\n  font-weight: 600;\n}\n\n.hb-date-picker-pane__month--selected,\n.hb-date-picker-pane__year--selected {\n  background-color: var(--hb-color-primary);\n  color: var(--hb-color-white, #ffffff);\n}\n\n","import { Component, h, Prop, Event, EventEmitter, State, Watch } from '@stencil/core';\nimport {\n  getCalendarDays,\n  getCalendarYears,\n  getYearRangeStart,\n  parseDate,\n  addMonths,\n  addYears,\n  MONTH_NAMES,\n  WEEK_DAY_NAMES,\n} from '../../utils/date-helpers';\n\n/** DatePickerPane 视图类型 */\nexport type DatePickerPaneView = 'days' | 'months' | 'years';\n\n/**\n * DatePickerPane 日期选择器面板组件\n * 日期选择器面板，用于嵌入到其他组件中\n * 支持 days / months / years 三种视图切换\n */\n@Component({\n  tag: 'hb-date-picker-pane',\n  styleUrl: 'date-picker-pane.css',\n  shadow: true,\n})\nexport class DatePickerPane {\n  /** 绑定值 */\n  @Prop({ mutable: true }) modelValue?: string | Date;\n\n  /** 日期格式 */\n  @Prop() format: string = 'YYYY-MM-DD';\n\n  /** 当前视图类型，默认 days */\n  @Prop({ mutable: true }) view: DatePickerPaneView = 'days';\n\n  @State() selectedDate?: Date;\n\n  /** 值改变事件 */\n  @Event() hbChange: EventEmitter<string | Date>;\n\n  /** 视图切换事件 */\n  @Event() hbViewChange: EventEmitter<DatePickerPaneView>;\n\n  componentDidLoad() {\n    this.updateSelectedDate();\n  }\n\n  @Watch('modelValue')\n  handleValueChange() {\n    this.updateSelectedDate();\n  }\n\n  private updateSelectedDate() {\n    this.selectedDate = parseDate(this.modelValue);\n  }\n\n  private handleDateSelect = (date: Date) => {\n    this.selectedDate = date;\n    this.modelValue = date;\n    this.hbChange.emit(date);\n  };\n\n  /** 头部导航箭头：days 视图 ±1 月，months 视图 ±1 年，years 视图 ±12 年 */\n  private handlePrev = () => {\n    const base = this.selectedDate || new Date();\n    if (this.view === 'days') {\n      this.selectedDate = addMonths(base, -1);\n    } else if (this.view === 'months') {\n      this.selectedDate = addYears(base, -1);\n    } else {\n      this.selectedDate = addYears(base, -12);\n    }\n  };\n\n  private handleNext = () => {\n    const base = this.selectedDate || new Date();\n    if (this.view === 'days') {\n      this.selectedDate = addMonths(base, 1);\n    } else if (this.view === 'months') {\n      this.selectedDate = addYears(base, 1);\n    } else {\n      this.selectedDate = addYears(base, 12);\n    }\n  };\n\n  /** 点击 header 标题：days→months→years */\n  private handleHeaderTitleClick = () => {\n    if (this.view === 'days') {\n      this.view = 'months';\n    } else if (this.view === 'months') {\n      this.view = 'years';\n    }\n    this.hbViewChange.emit(this.view);\n  };\n\n  /** months 视图：选某月 → 切回 days 并跳到该月 */\n  private handleMonthSelect = (monthIndex: number) => {\n    const base = this.selectedDate || new Date();\n    const next = new Date(base);\n    next.setMonth(monthIndex);\n    this.selectedDate = next;\n    this.view = 'days';\n    this.hbViewChange.emit(this.view);\n  };\n\n  /** years 视图：选某年 → 切到 months 并跳到该年 */\n  private handleYearSelect = (year: number) => {\n    const base = this.selectedDate || new Date();\n    const next = new Date(base);\n    next.setFullYear(year);\n    this.selectedDate = next;\n    this.view = 'months';\n    this.hbViewChange.emit(this.view);\n  };\n\n  /** 头部标题文本，根据视图类型生成 */\n  private getHeaderTitle(): string {\n    const current = this.selectedDate || new Date();\n    if (this.view === 'days') {\n      return `${current.getFullYear()}年 ${MONTH_NAMES[current.getMonth()]}`;\n    }\n    if (this.view === 'months') {\n      return `${current.getFullYear()}年`;\n    }\n    // years 视图显示年份档区间，如 2020 - 2031\n    const start = getYearRangeStart(current);\n    return `${start} - ${start + 11}`;\n  }\n\n  render() {\n    const current = this.selectedDate || new Date();\n\n    return (\n      <div class=\"hb-date-picker-pane\">\n        <div class=\"hb-date-picker-pane__header\">\n          <button type=\"button\" class=\"hb-date-picker-pane__prev-btn\" aria-label=\"上一个\" onClick={this.handlePrev}>\n            ‹\n          </button>\n          <button\n            type=\"button\"\n            class=\"hb-date-picker-pane__header-label\"\n            aria-live=\"polite\"\n            onClick={this.handleHeaderTitleClick}\n          >\n            {this.getHeaderTitle()}\n          </button>\n          <button type=\"button\" class=\"hb-date-picker-pane__next-btn\" aria-label=\"下一个\" onClick={this.handleNext}>\n            ›\n          </button>\n        </div>\n\n        {this.view === 'days' && this.renderDaysView()}\n        {this.view === 'months' && this.renderMonthsView(current)}\n        {this.view === 'years' && this.renderYearsView(current)}\n      </div>\n    );\n  }\n\n  private renderDaysView() {\n    const days = getCalendarDays(this.selectedDate || new Date(), this.selectedDate);\n    return (\n      <div class=\"hb-date-picker-pane__body\">\n        <div class=\"hb-date-picker-pane__weekdays\">\n          {WEEK_DAY_NAMES.map(day => (\n            <div class=\"hb-date-picker-pane__weekday\">{day}</div>\n          ))}\n        </div>\n        <div class=\"hb-date-picker-pane__days\">\n          {days.map((day, index) => (\n            <div\n              key={index}\n              class={{\n                'hb-date-picker-pane__day': true,\n                'hb-date-picker-pane__day--other-month': !day.isCurrentMonth,\n                'hb-date-picker-pane__day--today': day.isToday,\n                'hb-date-picker-pane__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\n  private renderMonthsView(current: Date) {\n    // modelValue（选中值）所在的年/月\n    const modelDate = parseDate(this.modelValue);\n    const selectedMonth = modelDate ? modelDate.getMonth() : -1;\n    const selectedYear = modelDate ? modelDate.getFullYear() : -1;\n    // current 是当前面板的浏览焦点日期（selectedDate 或今天）\n    return (\n      <div class=\"hb-date-picker-pane__body\">\n        <div class=\"hb-date-picker-pane__months\">\n          {MONTH_NAMES.map((name, monthIndex) => (\n            <div\n              key={monthIndex}\n              class={{\n                'hb-date-picker-pane__month': true,\n                'hb-date-picker-pane__month--current': monthIndex === current.getMonth(),\n                'hb-date-picker-pane__month--selected':\n                  monthIndex === selectedMonth && current.getFullYear() === selectedYear,\n              }}\n              onClick={() => this.handleMonthSelect(monthIndex)}\n            >\n              {name}\n            </div>\n          ))}\n        </div>\n      </div>\n    );\n  }\n\n  private renderYearsView(current: Date) {\n    const modelDate = parseDate(this.modelValue);\n    const years = getCalendarYears(this.selectedDate || new Date(), modelDate);\n    return (\n      <div class=\"hb-date-picker-pane__body\">\n        <div class=\"hb-date-picker-pane__years\">\n          {years.map(item => (\n            <div\n              key={item.year}\n              class={{\n                'hb-date-picker-pane__year': true,\n                'hb-date-picker-pane__year--current': item.year === current.getFullYear(),\n                'hb-date-picker-pane__year--selected': item.isSelected,\n              }}\n              onClick={() => this.handleYearSelect(item.year)}\n            >\n              {item.year}\n            </div>\n          ))}\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/hb-date-picker.d.ts

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

package/dist/components/hb-date-picker.js

@@ -0,0 +1,170 @@
+import { p as proxyCustomElement, H, c as createEvent, h } from './p-1407a5e8.js';
+import { c as createClickOutsideHandler } from './p-4ef5a884.js';
+import { p as parseDate, f as formatDate, a as addMonths, g as getCalendarDays, M as MONTH_NAMES, W as WEEK_DAY_NAMES } from './p-cf94cbf6.js';
+
+const datePickerCss = "/*! 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{.grid{display:grid}.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-picker-font-size:14px;--hb-date-picker-height:32px;--hb-date-picker-border-color:var(--hb-border-color,#dcdfe6);--hb-date-picker-border-color-hover:var(--hb-color-primary);--hb-date-picker-bg-color:var(--hb-color-white,#fff);display:inline-block;position:relative}.hb-date-picker{display:inline-block;position:relative;width:240px}.hb-date-picker__input-wrapper{cursor:pointer;display:inline-block;position:relative;width:100%}.hb-date-picker__input{background-color:var(--hb-date-picker-bg-color);border:1px solid var(--hb-date-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-picker-font-size);height:var(--hb-date-picker-height);line-height:var(--hb-date-picker-height);outline:none;padding:0 30px 0 15px;transition:border-color .2s cubic-bezier(.645,.045,.355,1);width:100%}.hb-date-picker__input:focus,.hb-date-picker__input:hover:not(:disabled){border-color:var(--hb-date-picker-border-color-hover)}.hb-date-picker__suffix{align-items:center;display:flex;position:absolute;right:8px;top:50%;transform:translateY(-50%)}.hb-date-picker__clear{color:var(--hb-color-text-placeholder,#c0c4cc);cursor:pointer;font-size:16px;margin-right:8px;transition:color .2s}.hb-date-picker__clear:hover{color:var(--hb-color-text-regular,#606266)}.hb-date-picker__icon{font-size:14px}.hb-date-picker__dropdown{background-color:var(--hb-date-picker-bg-color);border:1px solid var(--hb-date-picker-border-color);border-radius:4px;box-shadow:0 2px 12px #0000001a;left:0;margin-top:4px;min-width:280px;padding:12px;position:absolute;top:100%;z-index:1000}.hb-date-picker__header{align-items:center;display:flex;justify-content:space-between;margin-bottom:12px}.hb-date-picker__header-label{color:var(--hb-color-text-regular,#606266);font-size:14px;font-weight:600}.hb-date-picker__next-btn,.hb-date-picker__prev-btn{background:0 0;border:none;color:var(--hb-color-text-regular,#606266);cursor:pointer;font-size:18px;padding:4px 8px;transition:color .2s}.hb-date-picker__next-btn:hover,.hb-date-picker__prev-btn:hover{color:var(--hb-color-primary)}.hb-date-picker__weekdays{display:grid;gap:4px;grid-template-columns:repeat(7,1fr);margin-bottom:8px}.hb-date-picker__weekday{color:var(--hb-color-text-placeholder,#c0c4cc);font-size:12px;font-weight:500;text-align:center}.hb-date-picker__days{display:grid;gap:4px;grid-template-columns:repeat(7,1fr)}.hb-date-picker__day{align-items:center;aspect-ratio:1;border-radius:4px;color:var(--hb-color-text-regular,#606266);cursor:pointer;display:flex;font-size:13px;justify-content:center;transition:all .2s}.hb-date-picker__day:hover:not(.hb-date-picker__day--other-month){background-color:var(--hb-fill-color-light,#f5f7fa)}.hb-date-picker__day--other-month{color:var(--hb-color-text-placeholder,#c0c4cc);cursor:default}.hb-date-picker__day--today{color:var(--hb-color-primary);font-weight:600}.hb-date-picker__day--selected{background-color:var(--hb-color-primary);color:var(--hb-color-white,#fff)}.hb-date-picker__day--disabled{color:var(--hb-color-text-placeholder,#c0c4cc);cursor:not-allowed}.hb-date-picker__day--disabled:hover{background-color:#0000}.hb-date-picker--small{width:200px}.hb-date-picker--small .hb-date-picker__input{font-size:12px;height:24px;line-height:24px;padding:0 25px 0 12px}.hb-date-picker--large{width:280px}.hb-date-picker--large .hb-date-picker__input{font-size:16px;height:40px;line-height:40px;padding:0 35px 0 18px}.hb-date-picker--disabled{cursor:not-allowed}.hb-date-picker--disabled .hb-date-picker__input{background-color:var(--hb-fill-color-light,#f5f7fa);border-color:var(--hb-date-picker-border-color);color:var(--hb-color-text-disabled,#c0c4cc);cursor:not-allowed}@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 HbDatePickerStyle0 = datePickerCss;
+
+const DatePicker = /*@__PURE__*/ proxyCustomElement(class DatePicker extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.hbChange = createEvent(this, "hbChange", 7);
+    }
+    get el() { return this; }
+    /** 绑定值 */
+    modelValue;
+    /** 输入框占位文本 */
+    placeholder = '请选择日期';
+    /** 是否禁用 */
+    disabled = false;
+    /** 输入框尺寸 */
+    size = 'default';
+    /** 是否可清空 */
+    clearable = false;
+    /** 日期格式 */
+    format = 'YYYY-MM-DD';
+    /** 显示在输入框中的格式 */
+    valueFormat;
+    /**
+     * 日期选择器类型
+     * 当前仅支持 'date'，更多类型将在后续版本实现
+     */
+    type = 'date';
+    /**
+     * 禁用日期判定函数。返回 true 的日期在日历中不可选（加 disabled 态、不可点击、aria-disabled）。
+     * @param date 当前日期格子的 Date 对象
+     */
+    disabledDate;
+    /** 原生 name 属性 */
+    name;
+    /** 原生 id 属性 */
+    inputId;
+    isOpen = false;
+    inputValue = '';
+    selectedDate;
+    /** 值改变事件 */
+    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;
+    };
+    handleClear = (e) => {
+        e.stopPropagation();
+        this.modelValue = undefined;
+        this.inputValue = '';
+        this.selectedDate = undefined;
+        this.isOpen = false;
+        this.hbChange.emit(undefined);
+    };
+    handleDateSelect = (date) => {
+        // disabledDate 返回 true 的日期不可选
+        if (this.disabledDate && this.disabledDate(date))
+            return;
+        this.selectedDate = date;
+        this.modelValue = this.valueFormat ? formatDate(date, this.format) : date;
+        this.updateInputValue();
+        this.isOpen = false;
+        this.hbChange.emit(this.modelValue);
+    };
+    changeMonth(delta) {
+        this.selectedDate = addMonths(this.selectedDate || new Date(), delta);
+    }
+    /** 判断某日期是否被 disabledDate 禁用 */
+    isDateDisabled = (date) => {
+        return !!this.disabledDate && this.disabledDate(date);
+    };
+    render() {
+        const days = getCalendarDays(this.selectedDate || new Date(), this.selectedDate);
+        const current = this.selectedDate || new Date();
+        return (h("div", { key: '79e20fe927318faa30086dbe5cd3e17b24077f8f', class: {
+                'hb-date-picker': true,
+                'hb-date-picker--open': this.isOpen,
+                'hb-date-picker--disabled': this.disabled,
+                [`hb-date-picker--${this.size}`]: true,
+            } }, h("div", { key: 'eb216f889017004192cdc04496334c21e714e971', class: "hb-date-picker__input-wrapper", onClick: this.handleInputClick }, h("input", { key: 'ac23cc7e2d3ba77141ec342477bf984ce581b30a', type: "text", id: this.inputId, name: this.name, class: "hb-date-picker__input", placeholder: this.placeholder, value: this.inputValue, disabled: this.disabled, readonly: true, role: "combobox", "aria-haspopup": "dialog", "aria-expanded": this.isOpen ? 'true' : 'false', "aria-label": this.placeholder }), h("span", { key: 'd9371788b72feacd581e908d65770af8b9eb535a', class: "hb-date-picker__suffix" }, this.clearable && this.modelValue && (h("span", { key: '86601557f8419ba22111ca214c3130ee444b383e', class: "hb-date-picker__clear", role: "button", "aria-label": "\u6E05\u7A7A", onClick: this.handleClear }, "\u00D7")), h("span", { key: '55662b6a4b49cf42c54e2906fb062c8c45a9259e', class: "hb-date-picker__icon", "aria-hidden": "true" }, "\uD83D\uDCC5"))), this.isOpen && (h("div", { key: '3b1d2bbb8fd12b5b8c2748028f7b13daa08df5a0', class: "hb-date-picker__dropdown", role: "dialog", "aria-label": "\u9009\u62E9\u65E5\u671F" }, h("div", { key: '310b54cb7c477fc52657b220201e82f69059b3a0', class: "hb-date-picker__header" }, h("button", { key: '63cf02ce80ea6522592863a31696b91b79ebd0ef', type: "button", class: "hb-date-picker__prev-btn", "aria-label": "\u4E0A\u4E00\u6708", onClick: () => this.changeMonth(-1) }, "\u2039"), h("span", { key: 'f74837430f189198929125413a7b61568e37c1a7', class: "hb-date-picker__header-label", "aria-live": "polite" }, current.getFullYear(), "\u5E74 ", MONTH_NAMES[current.getMonth()]), h("button", { key: 'db36b5b8823fa3dc5f8355d77225b19ea262d2fd', type: "button", class: "hb-date-picker__next-btn", "aria-label": "\u4E0B\u4E00\u6708", onClick: () => this.changeMonth(1) }, "\u203A")), h("div", { key: '2adbe9940556d5f01049bcdb4777c67b2519c5ef', class: "hb-date-picker__body", role: "grid" }, h("div", { key: 'd4b2deab072b795b852abdb4e54f9c3493feaecd', class: "hb-date-picker__weekdays", role: "row" }, WEEK_DAY_NAMES.map(day => (h("div", { class: "hb-date-picker__weekday", role: "columnheader", "aria-disabled": "true" }, day)))), h("div", { key: '208e6260719c97616be80386b3fc9da3521eed83', class: "hb-date-picker__days", role: "row" }, days.map((day, index) => {
+            const dayDisabled = day.isCurrentMonth && this.isDateDisabled(day.date);
+            return (h("div", { key: index, class: {
+                    'hb-date-picker__day': true,
+                    'hb-date-picker__day--other-month': !day.isCurrentMonth,
+                    'hb-date-picker__day--today': day.isToday,
+                    'hb-date-picker__day--selected': day.isSelected,
+                    'hb-date-picker__day--disabled': dayDisabled,
+                }, role: "gridcell", "aria-selected": day.isSelected ? 'true' : 'false', "aria-disabled": !day.isCurrentMonth || dayDisabled ? 'true' : undefined, "aria-label": formatDate(day.date, this.format), onClick: () => day.isCurrentMonth && !dayDisabled && this.handleDateSelect(day.date) }, day.date.getDate()));
+        })))))));
+    }
+    static get watchers() { return {
+        "modelValue": ["handleValueChange"]
+    }; }
+    static get style() { return HbDatePickerStyle0; }
+}, [1, "hb-date-picker", {
+        "modelValue": [1025, "model-value"],
+        "placeholder": [1],
+        "disabled": [4],
+        "size": [1],
+        "clearable": [4],
+        "format": [1],
+        "valueFormat": [1, "value-format"],
+        "type": [1],
+        "disabledDate": [16],
+        "name": [1],
+        "inputId": [1, "input-id"],
+        "isOpen": [32],
+        "inputValue": [32],
+        "selectedDate": [32]
+    }, undefined, {
+        "modelValue": ["handleValueChange"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["hb-date-picker"];
+    components.forEach(tagName => { switch (tagName) {
+        case "hb-date-picker":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, DatePicker);
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const HbDatePicker = DatePicker;
+const defineCustomElement = defineCustomElement$1;
+
+export { HbDatePicker, defineCustomElement };
+
+//# sourceMappingURL=hb-date-picker.js.map

package/dist/components/hb-date-picker.js.map

@@ -0,0 +1 @@
+{"file":"hb-date-picker.js","mappings":";;;;AAAA,MAAM,aAAa,GAAG,ozSAAozS,CAAC;AAC30S,2BAAe,aAAa;;MCYf,UAAU;;;;;;;;;IAII,UAAU,CAAiB;;IAG5C,WAAW,GAAW,OAAO,CAAC;;IAG9B,QAAQ,GAAY,KAAK,CAAC;;IAG1B,IAAI,GAAkC,SAAS,CAAC;;IAGhD,SAAS,GAAY,KAAK,CAAC;;IAG3B,MAAM,GAAW,YAAY,CAAC;;IAG9B,WAAW,CAAU;;;;;IAMrB,IAAI,GAAG,MAAe,CAAC;;;;;IAMvB,YAAY,CAA2B;;IAGvC,IAAI,CAAU;;IAGd,OAAO,CAAU;IAEhB,MAAM,GAAY,KAAK,CAAC;IACxB,UAAU,GAAW,EAAE,CAAC;IACxB,YAAY,CAAQ;;IAGpB,QAAQ,CAA8B;IAEvC,YAAY,GAAG,yBAAyB,CAAC;QAC/C,IAAI,EAAE,IAAW;QACjB,MAAM,EAAE,MAAM,IAAI,CAAC,MAAM;QACzB,OAAO,EAAE,QAAQ,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC,EAAE;KACxC,CAAC,CAAC;IAEH,gBAAgB;QACd,IAAI,CAAC,YAAY,GAAG,yBAAyB,CAAC;YAC5C,IAAI,EAAE,IAAI,CAAC,EAAE;YACb,MAAM,EAAE,MAAM,IAAI,CAAC,MAAM;YACzB,OAAO,EAAE,QAAQ,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC,EAAE;SACxC,CAAC,CAAC;QACH,IAAI,CAAC,YAAY,CAAC,OAAO,EAAE,CAAC;QAC5B,IAAI,CAAC,gBAAgB,EAAE,CAAC;KACzB;IAED,oBAAoB;QAClB,IAAI,CAAC,YAAY,CAAC,UAAU,EAAE,CAAC;KAChC;IAGD,iBAAiB;QACf,IAAI,CAAC,gBAAgB,EAAE,CAAC;KACzB;IAEO,gBAAgB;QACtB,MAAM,IAAI,GAAG,SAAS,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;QACxC,IAAI,CAAC,IAAI,EAAE;YACT,IAAI,CAAC,UAAU,GAAG,EAAE,CAAC;YACrB,IAAI,CAAC,YAAY,GAAG,SAAS,CAAC;YAC9B,OAAO;SACR;QACD,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;QACzB,IAAI,CAAC,UAAU,GAAG,UAAU,CAAC,IAAI,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;KACjD;IAEO,gBAAgB,GAAG;QACzB,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAO;QAC1B,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC;KAC5B,CAAC;IAEM,WAAW,GAAG,CAAC,CAAQ;QAC7B,CAAC,CAAC,eAAe,EAAE,CAAC;QACpB,IAAI,CAAC,UAAU,GAAG,SAAS,CAAC;QAC5B,IAAI,CAAC,UAAU,GAAG,EAAE,CAAC;QACrB,IAAI,CAAC,YAAY,GAAG,SAAS,CAAC;QAC9B,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;QACpB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;KAC/B,CAAC;IAEM,gBAAgB,GAAG,CAAC,IAAU;;QAEpC,IAAI,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC;YAAE,OAAO;QACzD,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;QACzB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,WAAW,GAAG,UAAU,CAAC,IAAI,EAAE,IAAI,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC;QAC1E,IAAI,CAAC,gBAAgB,EAAE,CAAC;QACxB,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;QACpB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;KACrC,CAAC;IAEM,WAAW,CAAC,KAAa;QAC/B,IAAI,CAAC,YAAY,GAAG,SAAS,CAAC,IAAI,CAAC,YAAY,IAAI,IAAI,IAAI,EAAE,EAAE,KAAK,CAAC,CAAC;KACvE;;IAGO,cAAc,GAAG,CAAC,IAAU;QAClC,OAAO,CAAC,CAAC,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC;KACvD,CAAC;IAEF,MAAM;QACJ,MAAM,IAAI,GAAG,eAAe,CAAC,IAAI,CAAC,YAAY,IAAI,IAAI,IAAI,EAAE,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;QACjF,MAAM,OAAO,GAAG,IAAI,CAAC,YAAY,IAAI,IAAI,IAAI,EAAE,CAAC;QAEhD,QACE,4DACE,KAAK,EAAE;gBACL,gBAAgB,EAAE,IAAI;gBACtB,sBAAsB,EAAE,IAAI,CAAC,MAAM;gBACnC,0BAA0B,EAAE,IAAI,CAAC,QAAQ;gBACzC,CAAC,mBAAmB,IAAI,CAAC,IAAI,EAAE,GAAG,IAAI;aACvC,IAED,4DAAK,KAAK,EAAC,+BAA+B,EAAC,OAAO,EAAE,IAAI,CAAC,gBAAgB,IACvE,8DACE,IAAI,EAAC,MAAM,EACX,EAAE,EAAE,IAAI,CAAC,OAAO,EAChB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAC,uBAAuB,EAC7B,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,KAAK,EAAE,IAAI,CAAC,UAAU,EACtB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,QACR,IAAI,EAAC,UAAU,mBACD,QAAQ,mBACP,IAAI,CAAC,MAAM,GAAG,MAAM,GAAG,OAAO,gBACjC,IAAI,CAAC,WAAW,GAC5B,EACF,6DAAM,KAAK,EAAC,wBAAwB,IACjC,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,UAAU,KAChC,6DAAM,KAAK,EAAC,uBAAuB,EAAC,IAAI,EAAC,QAAQ,gBAAY,cAAI,EAAC,OAAO,EAAE,IAAI,CAAC,WAAW,aAEpF,CACR,EACD,6DAAM,KAAK,EAAC,sBAAsB,iBAAa,MAAM,mBAAU,CAC1D,CACH,EACL,IAAI,CAAC,MAAM,KACV,4DAAK,KAAK,EAAC,0BAA0B,EAAC,IAAI,EAAC,QAAQ,gBAAY,0BAAM,IACnE,4DAAK,KAAK,EAAC,wBAAwB,IACjC,+DACE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,0BAA0B,gBACrB,oBAAK,EAChB,OAAO,EAAE,MAAM,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,aAG5B,EACT,6DAAM,KAAK,EAAC,8BAA8B,eAAW,QAAQ,IAC1D,OAAO,CAAC,WAAW,EAAE,aAAI,WAAW,CAAC,OAAO,CAAC,QAAQ,EAAE,CAAC,CACpD,EACP,+DACE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,0BAA0B,gBACrB,oBAAK,EAChB,OAAO,EAAE,MAAM,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,aAG3B,CACL,EACN,4DAAK,KAAK,EAAC,sBAAsB,EAAC,IAAI,EAAC,MAAM,IAC3C,4DAAK,KAAK,EAAC,0BAA0B,EAAC,IAAI,EAAC,KAAK,IAC7C,cAAc,CAAC,GAAG,CAAC,GAAG,KACrB,WAAK,KAAK,EAAC,yBAAyB,EAAC,IAAI,EAAC,cAAc,mBAAe,MAAM,IAAE,GAAG,CAAO,CAC1F,CAAC,CACE,EACN,4DAAK,KAAK,EAAC,sBAAsB,EAAC,IAAI,EAAC,KAAK,IACzC,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,KAAK;YACnB,MAAM,WAAW,GAAG,GAAG,CAAC,cAAc,IAAI,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;YACxE,QACE,WACE,GAAG,EAAE,KAAK,EACV,KAAK,EAAE;oBACL,qBAAqB,EAAE,IAAI;oBAC3B,kCAAkC,EAAE,CAAC,GAAG,CAAC,cAAc;oBACvD,4BAA4B,EAAE,GAAG,CAAC,OAAO;oBACzC,+BAA+B,EAAE,GAAG,CAAC,UAAU;oBAC/C,+BAA+B,EAAE,WAAW;iBAC7C,EACD,IAAI,EAAC,UAAU,mBACA,GAAG,CAAC,UAAU,GAAG,MAAM,GAAG,OAAO,mBACjC,CAAC,GAAG,CAAC,cAAc,IAAI,WAAW,GAAG,MAAM,GAAG,SAAS,gBAC1D,UAAU,CAAC,GAAG,CAAC,IAAI,EAAE,IAAI,CAAC,MAAM,CAAC,EAC7C,OAAO,EAAE,MAAM,GAAG,CAAC,cAAc,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,gBAAgB,CAAC,GAAG,CAAC,IAAI,CAAC,IAEnF,GAAG,CAAC,IAAI,CAAC,OAAO,EAAE,CACf,EACN;SACH,CAAC,CACE,CACF,CACF,CACP,CACG,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/DatePicker/date-picker.css?tag=hb-date-picker&encapsulation=shadow","src/components/DatePicker/DatePicker.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n  position: relative;\n  --hb-date-picker-font-size: 14px;\n  --hb-date-picker-height: 32px;\n  --hb-date-picker-border-color: var(--hb-border-color, #dcdfe6);\n  --hb-date-picker-border-color-hover: var(--hb-color-primary);\n  --hb-date-picker-bg-color: var(--hb-color-white, #ffffff);\n}\n\n.hb-date-picker {\n  display: inline-block;\n  position: relative;\n  width: 240px;\n}\n\n.hb-date-picker__input-wrapper {\n  position: relative;\n  display: inline-block;\n  width: 100%;\n  cursor: pointer;\n}\n\n.hb-date-picker__input {\n  display: inline-block;\n  width: 100%;\n  height: var(--hb-date-picker-height);\n  line-height: var(--hb-date-picker-height);\n  padding: 0 30px 0 15px;\n  font-size: var(--hb-date-picker-font-size);\n  color: var(--hb-color-text-regular, #606266);\n  background-color: var(--hb-date-picker-bg-color);\n  border: 1px solid var(--hb-date-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-picker__input:hover:not(:disabled) {\n  border-color: var(--hb-date-picker-border-color-hover);\n}\n\n.hb-date-picker__input:focus {\n  border-color: var(--hb-date-picker-border-color-hover);\n}\n\n.hb-date-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-picker__clear {\n  margin-right: 8px;\n  cursor: pointer;\n  font-size: 16px;\n  color: var(--hb-color-text-placeholder, #c0c4cc);\n  transition: color 0.2s;\n}\n\n.hb-date-picker__clear:hover {\n  color: var(--hb-color-text-regular, #606266);\n}\n\n.hb-date-picker__icon {\n  font-size: 14px;\n}\n\n.hb-date-picker__dropdown {\n  position: absolute;\n  top: 100%;\n  left: 0;\n  margin-top: 4px;\n  background-color: var(--hb-date-picker-bg-color);\n  border: 1px solid var(--hb-date-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: 280px;\n  padding: 12px;\n}\n\n.hb-date-picker__header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin-bottom: 12px;\n}\n\n.hb-date-picker__header-label {\n  font-weight: 600;\n  font-size: 14px;\n  color: var(--hb-color-text-regular, #606266);\n}\n\n.hb-date-picker__prev-btn,\n.hb-date-picker__next-btn {\n  background: none;\n  border: none;\n  font-size: 18px;\n  cursor: pointer;\n  color: var(--hb-color-text-regular, #606266);\n  padding: 4px 8px;\n  transition: color 0.2s;\n}\n\n.hb-date-picker__prev-btn:hover,\n.hb-date-picker__next-btn:hover {\n  color: var(--hb-color-primary);\n}\n\n.hb-date-picker__weekdays {\n  display: grid;\n  grid-template-columns: repeat(7, 1fr);\n  gap: 4px;\n  margin-bottom: 8px;\n}\n\n.hb-date-picker__weekday {\n  text-align: center;\n  font-size: 12px;\n  color: var(--hb-color-text-placeholder, #c0c4cc);\n  font-weight: 500;\n}\n\n.hb-date-picker__days {\n  display: grid;\n  grid-template-columns: repeat(7, 1fr);\n  gap: 4px;\n}\n\n.hb-date-picker__day {\n  aspect-ratio: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 13px;\n  color: var(--hb-color-text-regular, #606266);\n  cursor: pointer;\n  border-radius: 4px;\n  transition: all 0.2s;\n}\n\n.hb-date-picker__day:hover:not(.hb-date-picker__day--other-month) {\n  background-color: var(--hb-fill-color-light, #f5f7fa);\n}\n\n.hb-date-picker__day--other-month {\n  color: var(--hb-color-text-placeholder, #c0c4cc);\n  cursor: default;\n}\n\n.hb-date-picker__day--today {\n  color: var(--hb-color-primary);\n  font-weight: 600;\n}\n\n.hb-date-picker__day--selected {\n  background-color: var(--hb-color-primary);\n  color: var(--hb-color-white, #ffffff);\n}\n\n.hb-date-picker__day--disabled {\n  color: var(--hb-color-text-placeholder, #c0c4cc);\n  cursor: not-allowed;\n}\n\n.hb-date-picker__day--disabled:hover {\n  background-color: transparent;\n}\n\n.hb-date-picker--small {\n  width: 200px;\n}\n\n.hb-date-picker--small .hb-date-picker__input {\n  height: 24px;\n  line-height: 24px;\n  font-size: 12px;\n  padding: 0 25px 0 12px;\n}\n\n.hb-date-picker--large {\n  width: 280px;\n}\n\n.hb-date-picker--large .hb-date-picker__input {\n  height: 40px;\n  line-height: 40px;\n  font-size: 16px;\n  padding: 0 35px 0 18px;\n}\n\n.hb-date-picker--disabled {\n  cursor: not-allowed;\n}\n\n.hb-date-picker--disabled .hb-date-picker__input {\n  background-color: var(--hb-fill-color-light, #f5f7fa);\n  border-color: var(--hb-date-picker-border-color);\n  color: var(--hb-color-text-disabled, #c0c4cc);\n  cursor: not-allowed;\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 * DatePicker 日期选择器组件\n * 用于选择或输入日期\n */\n@Component({\n  tag: 'hb-date-picker',\n  styleUrl: 'date-picker.css',\n  shadow: true,\n})\nexport class DatePicker {\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';\n\n  /** 显示在输入框中的格式 */\n  @Prop() valueFormat?: string;\n\n  /**\n   * 日期选择器类型\n   * 当前仅支持 'date'，更多类型将在后续版本实现\n   */\n  @Prop() type = 'date' as const;\n\n  /**\n   * 禁用日期判定函数。返回 true 的日期在日历中不可选（加 disabled 态、不可点击、aria-disabled）。\n   * @param date 当前日期格子的 Date 对象\n   */\n  @Prop() disabledDate?: (date: Date) => boolean;\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\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  };\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    // disabledDate 返回 true 的日期不可选\n    if (this.disabledDate && this.disabledDate(date)) return;\n    this.selectedDate = date;\n    this.modelValue = this.valueFormat ? formatDate(date, this.format) : date;\n    this.updateInputValue();\n    this.isOpen = false;\n    this.hbChange.emit(this.modelValue);\n  };\n\n  private changeMonth(delta: number) {\n    this.selectedDate = addMonths(this.selectedDate || new Date(), delta);\n  }\n\n  /** 判断某日期是否被 disabledDate 禁用 */\n  private isDateDisabled = (date: Date): boolean => {\n    return !!this.disabledDate && this.disabledDate(date);\n  };\n\n  render() {\n    const days = getCalendarDays(this.selectedDate || new Date(), this.selectedDate);\n    const current = this.selectedDate || new Date();\n\n    return (\n      <div\n        class={{\n          'hb-date-picker': true,\n          'hb-date-picker--open': this.isOpen,\n          'hb-date-picker--disabled': this.disabled,\n          [`hb-date-picker--${this.size}`]: true,\n        }}\n      >\n        <div class=\"hb-date-picker__input-wrapper\" onClick={this.handleInputClick}>\n          <input\n            type=\"text\"\n            id={this.inputId}\n            name={this.name}\n            class=\"hb-date-picker__input\"\n            placeholder={this.placeholder}\n            value={this.inputValue}\n            disabled={this.disabled}\n            readonly\n            role=\"combobox\"\n            aria-haspopup=\"dialog\"\n            aria-expanded={this.isOpen ? 'true' : 'false'}\n            aria-label={this.placeholder}\n          />\n          <span class=\"hb-date-picker__suffix\">\n            {this.clearable && this.modelValue && (\n              <span class=\"hb-date-picker__clear\" role=\"button\" aria-label=\"清空\" onClick={this.handleClear}>\n                ×\n              </span>\n            )}\n            <span class=\"hb-date-picker__icon\" aria-hidden=\"true\">📅</span>\n          </span>\n        </div>\n        {this.isOpen && (\n          <div class=\"hb-date-picker__dropdown\" role=\"dialog\" aria-label=\"选择日期\">\n            <div class=\"hb-date-picker__header\">\n              <button\n                type=\"button\"\n                class=\"hb-date-picker__prev-btn\"\n                aria-label=\"上一月\"\n                onClick={() => this.changeMonth(-1)}\n              >\n                ‹\n              </button>\n              <span class=\"hb-date-picker__header-label\" aria-live=\"polite\">\n                {current.getFullYear()}年 {MONTH_NAMES[current.getMonth()]}\n              </span>\n              <button\n                type=\"button\"\n                class=\"hb-date-picker__next-btn\"\n                aria-label=\"下一月\"\n                onClick={() => this.changeMonth(1)}\n              >\n                ›\n              </button>\n            </div>\n            <div class=\"hb-date-picker__body\" role=\"grid\">\n              <div class=\"hb-date-picker__weekdays\" role=\"row\">\n                {WEEK_DAY_NAMES.map(day => (\n                  <div class=\"hb-date-picker__weekday\" role=\"columnheader\" aria-disabled=\"true\">{day}</div>\n                ))}\n              </div>\n              <div class=\"hb-date-picker__days\" role=\"row\">\n                {days.map((day, index) => {\n                  const dayDisabled = day.isCurrentMonth && this.isDateDisabled(day.date);\n                  return (\n                    <div\n                      key={index}\n                      class={{\n                        'hb-date-picker__day': true,\n                        'hb-date-picker__day--other-month': !day.isCurrentMonth,\n                        'hb-date-picker__day--today': day.isToday,\n                        'hb-date-picker__day--selected': day.isSelected,\n                        'hb-date-picker__day--disabled': dayDisabled,\n                      }}\n                      role=\"gridcell\"\n                      aria-selected={day.isSelected ? 'true' : 'false'}\n                      aria-disabled={!day.isCurrentMonth || dayDisabled ? 'true' : undefined}\n                      aria-label={formatDate(day.date, this.format)}\n                      onClick={() => day.isCurrentMonth && !dayDisabled && this.handleDateSelect(day.date)}\n                    >\n                      {day.date.getDate()}\n                    </div>\n                  );\n                })}\n              </div>\n            </div>\n          </div>\n        )}\n      </div>\n    );\n  }\n}\n\n"],"version":3}

package/dist/components/hb-date-range-picker.d.ts

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