@cssui/react 1.0.0 → 1.0.1

package/dist/adapter-react/components/checkbox/CheckboxGroup.d.ts

@@ -0,0 +1,22 @@
+import { type ChangeEvent, type ReactNode } from 'react';
+import { type CheckboxGroupOption as BaseCheckboxGroupOption, type CheckboxGroupProps as BaseCheckboxGroupProps, type CheckboxValue } from '../../../components/checkbox/index';
+export interface CheckboxGroupOption extends BaseCheckboxGroupOption {
+    children?: ReactNode;
+}
+export interface CheckboxGroupProps extends Omit<BaseCheckboxGroupProps, 'onChange' | 'options'> {
+    options?: CheckboxGroupOption[];
+    children?: ReactNode;
+    onChange?: (value: CheckboxValue[], event?: ChangeEvent<HTMLInputElement>) => void;
+}
+export interface CheckboxGroupContextValue {
+    name?: string;
+    value: CheckboxValue[];
+    disabled?: boolean;
+    error?: boolean;
+    onToggle?: (value: CheckboxValue, checked: boolean, event: ChangeEvent<HTMLInputElement>) => void;
+}
+export declare const CheckboxGroupContext: import("react").Context<CheckboxGroupContextValue | null>;
+export declare function useCheckboxGroupContext(): CheckboxGroupContextValue | null;
+export declare const CheckboxGroup: import("../..").ComponentWithInstall<import("react").ForwardRefExoticComponent<CheckboxGroupProps & import("react").RefAttributes<HTMLDivElement>>>;
+export default CheckboxGroup;
+//# sourceMappingURL=CheckboxGroup.d.ts.map

package/dist/adapter-react/components/checkbox/CheckboxGroup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxGroup.d.ts","sourceRoot":"","sources":["../../../components/checkbox/CheckboxGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA6C,KAAK,WAAW,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AACnG,OAAO,EAEL,KAAK,mBAAmB,IAAI,uBAAuB,EACnD,KAAK,kBAAkB,IAAI,sBAAsB,EACjD,KAAK,aAAa,EACnB,MAAM,4BAA4B,CAAA;AAMnC,MAAM,WAAW,mBAAoB,SAAQ,uBAAuB;IAClE,QAAQ,CAAC,EAAE,SAAS,CAAA;CACrB;AAED,MAAM,WAAW,kBAAmB,SAAQ,IAAI,CAAC,sBAAsB,EAAE,UAAU,GAAG,SAAS,CAAC;IAC9F,OAAO,CAAC,EAAE,mBAAmB,EAAE,CAAA;IAC/B,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,EAAE,EAAE,KAAK,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAA;CACnF;AAED,MAAM,WAAW,yBAAyB;IACxC,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,aAAa,EAAE,CAAA;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAA;CAClG;AAED,eAAO,MAAM,oBAAoB,2DAAwD,CAAA;AAEzF,wBAAgB,uBAAuB,qCAEtC;AAuFD,eAAO,MAAM,aAAa,qJAAsC,CAAA;AAEhE,eAAe,aAAa,CAAA"}

package/dist/adapter-react/components/checkbox/CheckboxGroup.js

@@ -0,0 +1,86 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { createContext, useId, useMemo, useContext } from 'react';
+import { getCheckboxGroupClassNames } from '../../../components/checkbox/index.js';
+import { cn } from '../../../utils/src/index.js';
+import { createComponent } from '../../runtime/createComponent.js';
+import { withInstall } from '../../runtime/withInstall.js';
+import { forwardRef } from '../../runtime/forwardRef.js';
+import { useMergedState } from '../../hooks/useMergedState.js';
+import { Checkbox } from './Checkbox.js';
+
+const CheckboxGroupContext = createContext(null);
+function useCheckboxGroupContext() {
+  return useContext(CheckboxGroupContext);
+}
+function toggleCheckboxValue(values, value, checked) {
+  if (checked) {
+    return values.includes(value) ? values : [...values, value];
+  }
+  return values.filter((item) => item !== value);
+}
+const CheckboxGroupComponent = createComponent(
+  forwardRef((props, ref) => {
+    const {
+      label,
+      value,
+      defaultValue = [],
+      disabled = false,
+      error = false,
+      className,
+      name,
+      direction = "horizontal",
+      options = [],
+      children,
+      onChange,
+      ...restProps
+    } = props;
+    const generatedName = useId();
+    const [currentValue, setCurrentValue] = useMergedState(defaultValue, {
+      value
+    });
+    const contextValue = useMemo(
+      () => ({
+        name: name ?? generatedName,
+        value: currentValue,
+        disabled,
+        error,
+        onToggle: (nextValue, checked, event) => {
+          const nextValues = toggleCheckboxValue(currentValue, nextValue, checked);
+          setCurrentValue(nextValues);
+          onChange?.(nextValues, event);
+        }
+      }),
+      [currentValue, disabled, error, generatedName, name, onChange, setCurrentValue]
+    );
+    const checkboxItems = options.length ? options.map((option) => /* @__PURE__ */ jsx(
+      Checkbox,
+      {
+        value: option.value,
+        label: option.label,
+        disabled: option.disabled,
+        className: option.className,
+        children: option.children
+      },
+      String(option.value)
+    )) : children;
+    const content = /* @__PURE__ */ jsx(CheckboxGroupContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        role: "group",
+        className: cn(getCheckboxGroupClassNames({ disabled, error, direction }), className),
+        ...restProps,
+        children: checkboxItems
+      }
+    ) });
+    return label ? /* @__PURE__ */ jsxs("div", { className: "css-checkbox-group-field", children: [
+      /* @__PURE__ */ jsx("span", { className: "css-checkbox-group-field__label", children: label }),
+      content
+    ] }) : content;
+  })
+);
+CheckboxGroupComponent.displayName = "CssCheckboxGroup";
+const CheckboxGroup = withInstall(CheckboxGroupComponent);
+
+export { CheckboxGroup, CheckboxGroupContext, CheckboxGroup as default, useCheckboxGroupContext };
+//# sourceMappingURL=CheckboxGroup.js.map

package/dist/adapter-react/components/checkbox/CheckboxGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxGroup.js","sources":["../../../../../adapter-react/components/checkbox/CheckboxGroup.tsx"],"sourcesContent":["import { createContext, useContext, useId, useMemo, type ChangeEvent, type ReactNode } from 'react'\r\nimport {\r\n  getCheckboxGroupClassNames,\r\n  type CheckboxGroupOption as BaseCheckboxGroupOption,\r\n  type CheckboxGroupProps as BaseCheckboxGroupProps,\r\n  type CheckboxValue,\r\n} from '@cssui/components/checkbox'\r\nimport { cn } from '@cssui/utils'\r\nimport { createComponent, forwardRef, withInstall } from '../../runtime'\r\nimport { useMergedState } from '../../hooks'\r\nimport Checkbox from './Checkbox'\r\n\r\nexport interface CheckboxGroupOption extends BaseCheckboxGroupOption {\r\n  children?: ReactNode\r\n}\r\n\r\nexport interface CheckboxGroupProps extends Omit<BaseCheckboxGroupProps, 'onChange' | 'options'> {\r\n  options?: CheckboxGroupOption[]\r\n  children?: ReactNode\r\n  onChange?: (value: CheckboxValue[], event?: ChangeEvent<HTMLInputElement>) => void\r\n}\r\n\r\nexport interface CheckboxGroupContextValue {\r\n  name?: string\r\n  value: CheckboxValue[]\r\n  disabled?: boolean\r\n  error?: boolean\r\n  onToggle?: (value: CheckboxValue, checked: boolean, event: ChangeEvent<HTMLInputElement>) => void\r\n}\r\n\r\nexport const CheckboxGroupContext = createContext<CheckboxGroupContextValue | null>(null)\r\n\r\nexport function useCheckboxGroupContext() {\r\n  return useContext(CheckboxGroupContext)\r\n}\r\n\r\nfunction toggleCheckboxValue(values: CheckboxValue[], value: CheckboxValue, checked: boolean) {\r\n  if (checked) {\r\n    return values.includes(value) ? values : [...values, value]\r\n  }\r\n\r\n  return values.filter(item => item !== value)\r\n}\r\n\r\nconst CheckboxGroupComponent = createComponent(\r\n  forwardRef<HTMLDivElement, CheckboxGroupProps>((props, ref) => {\r\n    const {\r\n      label,\r\n      value,\r\n      defaultValue = [],\r\n      disabled = false,\r\n      error = false,\r\n      className,\r\n      name,\r\n      direction = 'horizontal',\r\n      options = [],\r\n      children,\r\n      onChange,\r\n      ...restProps\r\n    } = props\r\n\r\n    const generatedName = useId()\r\n    const [currentValue, setCurrentValue] = useMergedState<CheckboxValue[]>(defaultValue, {\r\n      value,\r\n    })\r\n\r\n    const contextValue = useMemo<CheckboxGroupContextValue>(\r\n      () => ({\r\n        name: name ?? generatedName,\r\n        value: currentValue,\r\n        disabled,\r\n        error,\r\n        onToggle: (nextValue, checked, event) => {\r\n          const nextValues = toggleCheckboxValue(currentValue, nextValue, checked)\r\n          setCurrentValue(nextValues)\r\n          onChange?.(nextValues, event)\r\n        },\r\n      }),\r\n      [currentValue, disabled, error, generatedName, name, onChange, setCurrentValue]\r\n    )\r\n\r\n    const checkboxItems = options.length\r\n      ? options.map(option => (\r\n          <Checkbox\r\n            key={String(option.value)}\r\n            value={option.value}\r\n            label={option.label}\r\n            disabled={option.disabled}\r\n            className={option.className}\r\n          >\r\n            {option.children}\r\n          </Checkbox>\r\n        ))\r\n      : children\r\n\r\n    const content = (\r\n      <CheckboxGroupContext.Provider value={contextValue}>\r\n        <div\r\n          ref={ref}\r\n          role=\"group\"\r\n          className={cn(getCheckboxGroupClassNames({ disabled, error, direction }), className)}\r\n          {...restProps}\r\n        >\r\n          {checkboxItems}\r\n        </div>\r\n      </CheckboxGroupContext.Provider>\r\n    )\r\n\r\n    return label ? (\r\n      <div className=\"css-checkbox-group-field\">\r\n        <span className=\"css-checkbox-group-field__label\">{label}</span>\r\n        {content}\r\n      </div>\r\n    ) : (\r\n      content\r\n    )\r\n  })\r\n)\r\n\r\nCheckboxGroupComponent.displayName = 'CssCheckboxGroup'\r\n\r\nexport const CheckboxGroup = withInstall(CheckboxGroupComponent)\r\n\r\nexport default CheckboxGroup\r\n"],"names":[],"mappings":"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"}

package/dist/adapter-react/components/checkbox/index.d.ts

@@ -0,0 +1,5 @@
+export { Checkbox } from './Checkbox';
+export { CheckboxGroup } from './CheckboxGroup';
+export type { CheckboxProps } from './Checkbox';
+export type { CheckboxGroupOption, CheckboxGroupProps } from './CheckboxGroup';
+//# sourceMappingURL=index.d.ts.map

package/dist/adapter-react/components/checkbox/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../components/checkbox/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AACrC,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAC/C,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAA;AAC/C,YAAY,EAAE,mBAAmB,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAA"}

package/dist/adapter-react/components/date-picker/DatePicker.d.ts

@@ -0,0 +1,8 @@
+import { type DatePickerValue, type DatePickerProps as BaseDatePickerProps } from '../../../components/date-picker/index';
+import '../../../components/date-picker/style.css';
+export interface DatePickerProps extends Omit<BaseDatePickerProps, 'onChange'> {
+    onChange?: (value: DatePickerValue, event?: React.MouseEvent<HTMLButtonElement>) => void;
+}
+export declare const DatePicker: import("../..").ComponentWithInstall<import("react").ForwardRefExoticComponent<DatePickerProps & import("react").RefAttributes<HTMLInputElement>>>;
+export default DatePicker;
+//# sourceMappingURL=DatePicker.d.ts.map

package/dist/adapter-react/components/date-picker/DatePicker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DatePicker.d.ts","sourceRoot":"","sources":["../../../components/date-picker/DatePicker.tsx"],"names":[],"mappings":"AACA,OAAO,EAeL,KAAK,eAAe,EACpB,KAAK,eAAe,IAAI,mBAAmB,EAC5C,MAAM,+BAA+B,CAAA;AAMtC,OAAO,yCAAyC,CAAA;AAEhD,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,mBAAmB,EAAE,UAAU,CAAC;IAC5E,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,eAAe,EAAE,KAAK,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAA;CACzF;AA0hBD,eAAO,MAAM,UAAU,oJAAmC,CAAA;AAC1D,eAAe,UAAU,CAAA"}

package/dist/adapter-react/components/date-picker/DatePicker.js

@@ -0,0 +1,438 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { useState, useMemo, useRef, useEffect } from 'react';
+import { normalizeRangeValue, parseDate, isDateRangeValue, startOfMonth, addMonths, getMonthKey, getCalendarDays, getDatePickerClassNames, getMonthLabel, isSameDay, isDateInRange, isDateDisabled, formatDate, compareDates } from '../../../components/date-picker/index.js';
+import { createComponent } from '../../runtime/createComponent.js';
+import { withInstall } from '../../runtime/withInstall.js';
+import { forwardRef } from '../../runtime/forwardRef.js';
+import { cn } from '../../../utils/src/index.js';
+import { useClickOutside, useEscClose, mergeRefs } from '../../hooks/index.js';
+import IconComponent from '../icon/Icon.js';
+import { useMergedState } from '../../hooks/useMergedState.js';
+
+const WEEK_DAYS = ["SUN", "MON", "TUE", "WED", "THU", "FRI", "SAT"];
+const MOBILE_INITIAL_MONTH_COUNT = 3;
+const MOBILE_INITIAL_MONTH_OFFSET = 1;
+const MOBILE_MONTH_BATCH = 1;
+const MOBILE_MONTH_LIMIT = 9;
+const MOBILE_SCROLL_PRELOAD = 240;
+const MOBILE_PANEL_WIDTH = 326;
+const MOBILE_PANEL_HEIGHT = 438;
+const MOBILE_PANEL_GAP = 8;
+const MOBILE_VIEWPORT_PADDING = 8;
+const DatePickerComponent = createComponent(
+  forwardRef((props, ref) => {
+    const {
+      label,
+      value,
+      defaultValue,
+      range = false,
+      disabledDates,
+      disabledDate,
+      status = "default",
+      disabled = false,
+      placeholder = "\u8BF7\u9009\u62E9\u65E5\u671F",
+      className,
+      onChange
+    } = props;
+    const [open, setOpen] = useState(false);
+    const initialValue = useMemo(
+      () => value ?? defaultValue ?? (range ? ["", ""] : ""),
+      [defaultValue, range, value]
+    );
+    const [currentValue, setCurrentValue] = useMergedState(initialValue, {
+      value
+    });
+    const rangeValue = useMemo(() => normalizeRangeValue(currentValue), [currentValue]);
+    const selectedStartDate = useMemo(
+      () => range ? parseDate(rangeValue[0]) : null,
+      [range, rangeValue]
+    );
+    const selectedEndDate = useMemo(
+      () => range ? parseDate(rangeValue[1]) : null,
+      [range, rangeValue]
+    );
+    const selectedDate = useMemo(
+      () => !range && !isDateRangeValue(currentValue) ? parseDate(currentValue) : null,
+      [currentValue, range]
+    );
+    const selectedViewMonth = useMemo(
+      () => startOfMonth(selectedStartDate ?? selectedDate ?? /* @__PURE__ */ new Date()),
+      [selectedDate, selectedStartDate]
+    );
+    const [viewDate, setViewDate] = useState(selectedViewMonth);
+    const rootRef = useRef(null);
+    const inputRef = useRef(null);
+    const contentRef = useRef(null);
+    const panelRef = useRef(null);
+    const lastMobileScrollTopRef = useRef(0);
+    const mobilePrependingRef = useRef(false);
+    const mobileAppendingRef = useRef(false);
+    const [mobilePanelStyle, setMobilePanelStyle] = useState(void 0);
+    const [isMobile, setIsMobile] = useState(
+      () => typeof window !== "undefined" ? window.innerWidth <= 768 : false
+    );
+    const [mobileMonths, setMobileMonths] = useState(
+      () => Array.from(
+        { length: MOBILE_INITIAL_MONTH_COUNT },
+        (_, index) => addMonths(selectedViewMonth, index - MOBILE_INITIAL_MONTH_OFFSET)
+      )
+    );
+    useClickOutside(rootRef, () => setOpen(false));
+    useEscClose(open, () => setOpen(false));
+    useEffect(() => {
+      const updateMobile = () => {
+        setIsMobile(window.innerWidth <= 768);
+      };
+      updateMobile();
+      window.addEventListener("resize", updateMobile);
+      return () => window.removeEventListener("resize", updateMobile);
+    }, []);
+    useEffect(() => {
+      if (!open || !rootRef.current) {
+        setMobilePanelStyle(void 0);
+        return;
+      }
+      const updateMobilePanelPosition = () => {
+        if (!rootRef.current) {
+          return;
+        }
+        const triggerRect = rootRef.current.getBoundingClientRect();
+        const viewportWidth = window.innerWidth;
+        const viewportHeight = window.innerHeight;
+        const panelWidth = panelRef.current?.offsetWidth ?? MOBILE_PANEL_WIDTH;
+        const panelHeight = panelRef.current?.offsetHeight ?? MOBILE_PANEL_HEIGHT;
+        const maxLeft = Math.max(
+          viewportWidth - panelWidth - MOBILE_VIEWPORT_PADDING,
+          MOBILE_VIEWPORT_PADDING
+        );
+        const left = Math.min(Math.max(triggerRect.left, MOBILE_VIEWPORT_PADDING), maxLeft);
+        const preferredBottomTop = triggerRect.bottom + MOBILE_PANEL_GAP;
+        const preferredTopTop = triggerRect.top - panelHeight - MOBILE_PANEL_GAP;
+        const fitsBottom = preferredBottomTop + panelHeight <= viewportHeight - MOBILE_VIEWPORT_PADDING;
+        const fitsTop = preferredTopTop >= MOBILE_VIEWPORT_PADDING;
+        let top = preferredBottomTop;
+        if (!fitsBottom && fitsTop) {
+          top = preferredTopTop;
+        } else if (!fitsBottom) {
+          top = Math.max(
+            MOBILE_VIEWPORT_PADDING,
+            Math.min(preferredBottomTop, viewportHeight - panelHeight - MOBILE_VIEWPORT_PADDING)
+          );
+        }
+        setMobilePanelStyle({
+          position: "fixed",
+          top: `${top}px`,
+          left: `${left}px`,
+          width: `${panelWidth}px`
+        });
+      };
+      const rafId = requestAnimationFrame(updateMobilePanelPosition);
+      window.addEventListener("resize", updateMobilePanelPosition);
+      window.addEventListener("scroll", updateMobilePanelPosition, true);
+      return () => {
+        cancelAnimationFrame(rafId);
+        window.removeEventListener("resize", updateMobilePanelPosition);
+        window.removeEventListener("scroll", updateMobilePanelPosition, true);
+      };
+    }, [isMobile, open]);
+    useEffect(() => {
+      if (!open) {
+        return;
+      }
+      setViewDate(selectedViewMonth);
+      setMobileMonths(
+        Array.from(
+          { length: MOBILE_INITIAL_MONTH_COUNT },
+          (_, index) => addMonths(selectedViewMonth, index - MOBILE_INITIAL_MONTH_OFFSET)
+        )
+      );
+      lastMobileScrollTopRef.current = 0;
+      mobilePrependingRef.current = false;
+      mobileAppendingRef.current = false;
+    }, [open, selectedViewMonth]);
+    useEffect(() => {
+      if (!open || !isMobile || !contentRef.current) {
+        return;
+      }
+      const container = contentRef.current;
+      requestAnimationFrame(() => {
+        const target = container.querySelector(
+          `[data-month-key="${getMonthKey(startOfMonth(viewDate))}"]`
+        );
+        if (target) {
+          const centeredScrollTop = target.offsetTop - (container.clientHeight - target.offsetHeight) / 2;
+          const maxScrollTop = Math.max(container.scrollHeight - container.clientHeight, 0);
+          container.scrollTop = Math.min(Math.max(centeredScrollTop, 0), maxScrollTop);
+          lastMobileScrollTopRef.current = container.scrollTop;
+        }
+      });
+    }, [isMobile, open, viewDate]);
+    const days = useMemo(() => getCalendarDays(viewDate), [viewDate]);
+    const nextMonthDate = useMemo(
+      () => new Date(viewDate.getFullYear(), viewDate.getMonth() + 1, 1),
+      [viewDate]
+    );
+    const nextMonthDays = useMemo(() => getCalendarDays(nextMonthDate), [nextMonthDate]);
+    const today = useMemo(() => /* @__PURE__ */ new Date(), []);
+    const handleMobileScroll = () => {
+      const container = contentRef.current;
+      if (!container || !isMobile) return;
+      const currentScrollTop = container.scrollTop;
+      const isScrollingUp = currentScrollTop < lastMobileScrollTopRef.current;
+      lastMobileScrollTopRef.current = currentScrollTop;
+      if (isScrollingUp && currentScrollTop < MOBILE_SCROLL_PRELOAD && !mobilePrependingRef.current) {
+        mobilePrependingRef.current = true;
+        const firstMonth = mobileMonths[0];
+        const prependMonths = Array.from(
+          { length: MOBILE_MONTH_BATCH },
+          (_, index) => addMonths(firstMonth, index - MOBILE_MONTH_BATCH)
+        );
+        const nextLength = mobileMonths.length + prependMonths.length;
+        const trimCount = Math.max(nextLength - MOBILE_MONTH_LIMIT, 0);
+        const previousHeight = container.scrollHeight;
+        setMobileMonths((prev) => {
+          const nextMonths = [...prependMonths, ...prev];
+          return trimCount > 0 ? nextMonths.slice(0, nextMonths.length - trimCount) : nextMonths;
+        });
+        requestAnimationFrame(() => {
+          const nextHeight = container.scrollHeight;
+          container.scrollTop += nextHeight - previousHeight;
+        });
+        return;
+      }
+      if (container.scrollHeight - container.scrollTop - container.clientHeight < 80) {
+        const lastMonth = mobileMonths[mobileMonths.length - 1];
+        const appendMonths = Array.from(
+          { length: MOBILE_MONTH_BATCH },
+          (_, index) => addMonths(lastMonth, index + 1)
+        );
+        const nextLength = mobileMonths.length + appendMonths.length;
+        const trimCount = Math.max(nextLength - MOBILE_MONTH_LIMIT, 0);
+        const removedKeys = trimCount > 0 ? mobileMonths.slice(0, trimCount).map(getMonthKey) : [];
+        const removedElements = removedKeys.map((key) => container.querySelector(`[data-month-key="${key}"]`)).filter((element) => Boolean(element));
+        const removedHeight = removedElements.length ? removedElements[removedElements.length - 1].offsetTop + removedElements[removedElements.length - 1].offsetHeight : 0;
+        setMobileMonths((prev) => {
+          const nextMonths = [...prev, ...appendMonths];
+          return trimCount > 0 ? nextMonths.slice(trimCount) : nextMonths;
+        });
+        if (removedHeight > 0) {
+          requestAnimationFrame(() => {
+            container.scrollTop = Math.max(container.scrollTop - removedHeight, 0);
+          });
+        }
+      }
+    };
+    const handleSelectDate = (date, event) => {
+      if (disabled || isDateDisabled(date, disabledDates, disabledDate)) {
+        return;
+      }
+      if (range) {
+        if (!selectedStartDate || selectedEndDate) {
+          const nextValue3 = [formatDate(date), ""];
+          setCurrentValue(nextValue3);
+          onChange?.(nextValue3, event);
+          return;
+        }
+        const startDate = selectedStartDate;
+        const startAfterEnd = compareDates(startDate, date) > 0;
+        const nextValue2 = startAfterEnd ? [formatDate(date), formatDate(startDate)] : [formatDate(startDate), formatDate(date)];
+        setCurrentValue(nextValue2);
+        onChange?.(nextValue2, event);
+        setOpen(false);
+        inputRef.current?.focus();
+        return;
+      }
+      const nextValue = formatDate(date);
+      setCurrentValue(nextValue);
+      onChange?.(nextValue, event);
+      setOpen(false);
+      inputRef.current?.focus();
+    };
+    const handlePrevMonth = () => {
+      setViewDate((prev) => new Date(prev.getFullYear(), prev.getMonth() - 1, 1));
+    };
+    const handleNextMonth = () => {
+      setViewDate((prev) => new Date(prev.getFullYear(), prev.getMonth() + 1, 1));
+    };
+    const handlePrevYear = () => {
+      setViewDate((prev) => new Date(prev.getFullYear() - 1, prev.getMonth(), 1));
+    };
+    const handleNextYear = () => {
+      setViewDate((prev) => new Date(prev.getFullYear() + 1, prev.getMonth(), 1));
+    };
+    const displayValue = isDateRangeValue(currentValue) ? "" : currentValue;
+    const rangeValueParts = range ? normalizeRangeValue(currentValue) : ["", ""];
+    const [rangePlaceholderStart, rangePlaceholderEnd] = Array.isArray(placeholder) ? placeholder : [placeholder, placeholder];
+    const displayPlaceholder = Array.isArray(placeholder) ? placeholder.join(" \u2192 ") : placeholder;
+    const renderSingleHeader = (monthDate) => /* @__PURE__ */ jsxs("div", { className: "css-date-picker__header css-date-picker__header--single", children: [
+      /* @__PURE__ */ jsxs("div", { className: "css-date-picker__header-group css-date-picker__header-group--month", children: [
+        /* @__PURE__ */ jsx("button", { type: "button", className: "css-date-picker__nav", onClick: handlePrevMonth, children: /* @__PURE__ */ jsx(IconComponent, { name: "ChevronRight", size: 16, rotate: 180 }) }),
+        /* @__PURE__ */ jsxs("span", { className: "css-date-picker__month-label css-date-picker__month-label--single", children: [
+          monthDate.getMonth() + 1,
+          "\u6708"
+        ] }),
+        /* @__PURE__ */ jsx("button", { type: "button", className: "css-date-picker__nav", onClick: handleNextMonth, children: /* @__PURE__ */ jsx(IconComponent, { name: "ChevronRight", size: 16 }) })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "css-date-picker__header-group css-date-picker__header-group--year", children: [
+        /* @__PURE__ */ jsx("button", { type: "button", className: "css-date-picker__nav", onClick: handlePrevYear, children: /* @__PURE__ */ jsx(IconComponent, { name: "ChevronRight", size: 16, rotate: 180 }) }),
+        /* @__PURE__ */ jsx("span", { className: "css-date-picker__year-label", children: monthDate.getFullYear() }),
+        /* @__PURE__ */ jsx("button", { type: "button", className: "css-date-picker__nav", onClick: handleNextYear, children: /* @__PURE__ */ jsx(IconComponent, { name: "ChevronRight", size: 16 }) })
+      ] })
+    ] });
+    const renderCalendar = (calendarDays, monthDate, showWeekdays = true) => /* @__PURE__ */ jsxs("div", { className: "css-date-picker__calendar", "data-month-key": getMonthKey(monthDate), children: [
+      !range && !isMobile && showWeekdays ? renderSingleHeader(monthDate) : /* @__PURE__ */ jsx("div", { className: "css-date-picker__header", children: /* @__PURE__ */ jsx("span", { className: "css-date-picker__month-label", children: getMonthLabel(monthDate) }) }),
+      showWeekdays ? /* @__PURE__ */ jsx("div", { className: "css-date-picker__weekdays", children: WEEK_DAYS.map((day) => /* @__PURE__ */ jsx("span", { className: "css-date-picker__weekday", children: day }, `${monthDate.getMonth()}-${day}`)) }) : null,
+      /* @__PURE__ */ jsx("div", { className: "css-date-picker__grid", children: calendarDays.map((day) => {
+        const isCurrentMonthDay = day.inCurrentMonth;
+        const isToday = isCurrentMonthDay && isSameDay(day.date, today);
+        const isSingleSelected = isCurrentMonthDay && !range && isSameDay(day.date, selectedDate);
+        const isRangeStart = isCurrentMonthDay && range && isSameDay(day.date, selectedStartDate);
+        const isRangeEnd = isCurrentMonthDay && range && isSameDay(day.date, selectedEndDate);
+        const inRange = isCurrentMonthDay && range && isDateInRange(day.date, selectedStartDate, selectedEndDate);
+        const isDisabledDay = isDateDisabled(day.date, disabledDates, disabledDate);
+        return /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            disabled: isDisabledDay,
+            className: cn(
+              "css-date-picker__day",
+              !day.inCurrentMonth && "css-date-picker__day--muted",
+              isDisabledDay && "css-date-picker__day--disabled",
+              isToday && "css-date-picker__day--today",
+              isSingleSelected && "css-date-picker__day--selected",
+              isRangeStart && "css-date-picker__day--range-start",
+              isRangeEnd && "css-date-picker__day--range-end",
+              inRange && "css-date-picker__day--in-range",
+              (isRangeStart || isRangeEnd) && "css-date-picker__day--selected"
+            ),
+            onClick: (event) => handleSelectDate(day.date, event),
+            children: day.date.getDate()
+          },
+          day.key
+        );
+      }) })
+    ] });
+    const panelClass = cn(
+      getDatePickerClassNames({ status, disabled, className }),
+      open && "css-date-picker--open"
+    );
+    const content = /* @__PURE__ */ jsxs("div", { ref: rootRef, className: panelClass, children: [
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn("css-date-picker__control", range && "css-date-picker__control--range"),
+          role: "button",
+          tabIndex: disabled ? -1 : 0,
+          "aria-expanded": open,
+          onClick: () => {
+            if (disabled) return;
+            setOpen(true);
+          },
+          children: [
+            range ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsxs("div", { className: "css-date-picker__range-fields", children: [
+                /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    className: cn(
+                      "css-date-picker__range-field",
+                      !rangeValueParts[0] && "css-date-picker__range-field--placeholder"
+                    ),
+                    children: [
+                      /* @__PURE__ */ jsx("span", { className: "css-date-picker__range-field-text", children: rangeValueParts[0] || rangePlaceholderStart }),
+                      /* @__PURE__ */ jsx("span", { className: "css-date-picker__range-field-icon", children: /* @__PURE__ */ jsx(IconComponent, { name: "CalendarMonth", size: 18 }) })
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    className: cn(
+                      "css-date-picker__range-field",
+                      !rangeValueParts[1] && "css-date-picker__range-field--placeholder"
+                    ),
+                    children: [
+                      /* @__PURE__ */ jsx("span", { className: "css-date-picker__range-field-text", children: rangeValueParts[1] || rangePlaceholderEnd }),
+                      /* @__PURE__ */ jsx("span", { className: "css-date-picker__range-field-icon", children: /* @__PURE__ */ jsx(IconComponent, { name: "CalendarMonth", size: 18 }) })
+                    ]
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "css-date-picker__range-display", children: [
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: cn(
+                      "css-date-picker__range-text",
+                      !rangeValueParts[0] && "css-date-picker__range-text--placeholder"
+                    ),
+                    children: rangeValueParts[0] || rangePlaceholderStart
+                  }
+                ),
+                /* @__PURE__ */ jsx("span", { className: "css-date-picker__range-arrow", children: /* @__PURE__ */ jsx(IconComponent, { name: "ArrowForward", size: 16 }) }),
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: cn(
+                      "css-date-picker__range-text",
+                      !rangeValueParts[1] && "css-date-picker__range-text--placeholder"
+                    ),
+                    children: rangeValueParts[1] || rangePlaceholderEnd
+                  }
+                )
+              ] })
+            ] }) : /* @__PURE__ */ jsx(
+              "input",
+              {
+                ref: mergeRefs(ref, inputRef),
+                className: "css-date-picker__input",
+                value: displayValue,
+                placeholder: displayPlaceholder,
+                readOnly: true,
+                disabled
+              }
+            ),
+            !range ? /* @__PURE__ */ jsx("span", { className: "css-date-picker__suffix", children: /* @__PURE__ */ jsx(IconComponent, { name: "CalendarMonth", size: 18 }) }) : null
+          ]
+        }
+      ),
+      open ? /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref: panelRef,
+          className: cn("css-date-picker__panel", range && "css-date-picker__panel--range"),
+          style: mobilePanelStyle,
+          children: [
+            !isMobile && range ? /* @__PURE__ */ jsxs("div", { className: "css-date-picker__panel-nav", children: [
+              /* @__PURE__ */ jsx("button", { type: "button", className: "css-date-picker__nav", onClick: handlePrevMonth, children: /* @__PURE__ */ jsx(IconComponent, { name: "ChevronRight", size: 16, rotate: 180 }) }),
+              /* @__PURE__ */ jsx("button", { type: "button", className: "css-date-picker__nav", onClick: handleNextMonth, children: /* @__PURE__ */ jsx(IconComponent, { name: "ChevronRight", size: 16 }) })
+            ] }) : null,
+            isMobile ? /* @__PURE__ */ jsx("div", { className: "css-date-picker__weekdays css-date-picker__weekdays--fixed", children: WEEK_DAYS.map((day) => /* @__PURE__ */ jsx("span", { className: "css-date-picker__weekday", children: day }, `fixed-${day}`)) }) : null,
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                ref: contentRef,
+                className: cn("css-date-picker__content", range && "css-date-picker__content--range"),
+                onScroll: isMobile ? handleMobileScroll : void 0,
+                children: isMobile ? mobileMonths.map((month) => renderCalendar(getCalendarDays(month), month, false)) : [
+                  renderCalendar(days, viewDate),
+                  range ? renderCalendar(nextMonthDays, nextMonthDate) : null
+                ]
+              }
+            )
+          ]
+        }
+      ) : null
+    ] });
+    return label ? /* @__PURE__ */ jsxs("div", { className: "css-date-picker-field", children: [
+      /* @__PURE__ */ jsx("span", { className: "css-date-picker-field__label", children: label }),
+      content
+    ] }) : content;
+  })
+);
+DatePickerComponent.displayName = "CssDatePicker";
+const DatePicker = withInstall(DatePickerComponent);
+
+export { DatePicker, DatePicker as default };
+//# sourceMappingURL=DatePicker.js.map