ingred-ui 27.2.0 → 27.3.1

package/dist/components/Calendar/CalendarRange/CalendarRange.d.ts

@@ -51,9 +51,23 @@ export type CalendarRangeProps = React.HTMLAttributes<HTMLDivElement> & {
      */
     dateFieldFormat?: string;
     /**
-     * 親コンポーネントで calendar を任意のタイミングで閉じたい場合に使用する
+     * モバイル幅でのみ表示する「適用」押下時（DateRangePicker のポップオーバーを閉じる等）
      */
-    onClose?: (clickState: any) => void;
+    onApply?: () => void;
+    /**
+     * モバイル幅でのみ表示する「キャンセル」押下時（`onCancel` があるときだけボタンを表示）
+     */
+    onCancel?: () => void;
+    /**
+     * 適用ボタンのラベル
+     * @default 適用
+     */
+    applyButtonText?: string;
+    /**
+     * キャンセルボタンのラベル
+     * @default キャンセル
+     */
+    cancelButtonText?: string;
     /**
      * 選択可能なカレンダーの領域を制限する
      * true が返る場合は、選択不可となる
@@ -127,9 +141,23 @@ export declare const CalendarRange: React.ForwardRefExoticComponent<React.HTMLAt
      */
     dateFieldFormat?: string | undefined;
     /**
-     * 親コンポーネントで calendar を任意のタイミングで閉じたい場合に使用する
+     * モバイル幅でのみ表示する「適用」押下時（DateRangePicker のポップオーバーを閉じる等）
+     */
+    onApply?: (() => void) | undefined;
+    /**
+     * モバイル幅でのみ表示する「キャンセル」押下時（`onCancel` があるときだけボタンを表示）
+     */
+    onCancel?: (() => void) | undefined;
+    /**
+     * 適用ボタンのラベル
+     * @default 適用
+     */
+    applyButtonText?: string | undefined;
+    /**
+     * キャンセルボタンのラベル
+     * @default キャンセル
      */
-    onClose?: ((clickState: any) => void) | undefined;
+    cancelButtonText?: string | undefined;
     /**
      * 選択可能なカレンダーの領域を制限する
      * true が返る場合は、選択不可となる
@@ -199,9 +227,23 @@ declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponen
      */
     dateFieldFormat?: string | undefined;
     /**
-     * 親コンポーネントで calendar を任意のタイミングで閉じたい場合に使用する
+     * モバイル幅でのみ表示する「適用」押下時（DateRangePicker のポップオーバーを閉じる等）
+     */
+    onApply?: (() => void) | undefined;
+    /**
+     * モバイル幅でのみ表示する「キャンセル」押下時（`onCancel` があるときだけボタンを表示）
+     */
+    onCancel?: (() => void) | undefined;
+    /**
+     * 適用ボタンのラベル
+     * @default 適用
+     */
+    applyButtonText?: string | undefined;
+    /**
+     * キャンセルボタンのラベル
+     * @default キャンセル
      */
-    onClose?: ((clickState: any) => void) | undefined;
+    cancelButtonText?: string | undefined;
     /**
      * 選択可能なカレンダーの領域を制限する
      * true が返る場合は、選択不可となる

package/dist/components/Calendar/CalendarRange/CalendarRange.stories.d.ts

@@ -15,7 +15,10 @@ declare const _default: {
         onPresetButtonClick?: ((action: import("../internal/Actions").PresetButton) => void) | undefined;
         showDateFields?: boolean | undefined;
         dateFieldFormat?: string | undefined;
-        onClose?: ((clickState: any) => void) | undefined;
+        onApply?: (() => void) | undefined;
+        onCancel?: (() => void) | undefined;
+        applyButtonText?: string | undefined;
+        cancelButtonText?: string | undefined;
         isOutsideRange?: ((date: dayjs.Dayjs) => boolean) | undefined;
         onDatesChange?: ((dates: import("./CalendarRange").DateRange) => void) | undefined;
         showTimeFields?: boolean | undefined;
@@ -29,3 +32,5 @@ export declare const WithPresetButtons: StoryObj<CalendarRangeProps>;
 export declare const WithDateField: StoryObj<CalendarRangeProps>;
 export declare const WithDateFieldAndPresetButtons: StoryObj<CalendarRangeProps>;
 export declare const WithDateFieldsAndTimeFields: StoryObj<CalendarRangeProps>;
+/** DateField + TimeField に加え、プリセットボタンを並べた組み合わせ例 */
+export declare const WithDateFieldsTimeFieldsAndPresetButtons: StoryObj<CalendarRangeProps>;

package/dist/components/Calendar/constants.d.ts

@@ -1 +1,2 @@
-export declare const HEIGHT = "400px";
+/** カレンダーカード（グリッド＋Actions）の最大幅。1fr グリッドや広い親・100vw 上限だけでは横に伸び切るのを防ぐ */
+export declare const CALENDAR_CARD_MAX_WIDTH_PX = 640;

package/dist/components/Calendar/internal/Actions/styled.d.ts

@@ -4,5 +4,6 @@ export declare const PresetButton: import("styled-components").StyledComponent<"
 export declare const ActionsContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const PresetButtonsWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const DateFieldWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+/** 開始/終了など複数ブロックを、幅に応じて横並び〜折り返し（常に左詰め・伸長なし） */
 export declare const DateFieldsGroup: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const DateFieldLabel: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;

package/dist/components/Calendar/internal/InnerCalendar/InnerCalendar.d.ts

@@ -6,8 +6,6 @@ type Props = {
     weekList?: string[];
     weekStart?: number;
     current: Dayjs;
-    yearIsOpen: boolean;
-    onYearIsOpen: (yearIsOpen: boolean) => void;
     isOutsideRange: (date: Dayjs) => boolean;
     onDateChange: (value: Dayjs) => void;
     onPreviousMonth: () => void;

package/dist/components/Calendar/internal/InnerCalendarRange/InnerCalendarRange.d.ts

@@ -7,7 +7,6 @@ type Props = {
     weekList?: string[];
     weekStart?: number;
     current: Dayjs;
-    yearIsOpen: boolean;
     isOutsideRange: (date: Dayjs) => boolean;
     onDatesChange: (dates: {
         startDate: Dayjs;

package/dist/components/Calendar/styled.d.ts

@@ -5,20 +5,18 @@ export declare const ScrollContainer: import("styled-components").StyledComponen
 export declare const DatePickerContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("../Flex/Flex").FlexProps, never>;
 export declare const CalendarContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("../Flex/Flex").FlexProps, never>;
 export declare const DayStyle: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
-export declare const TitleContainer: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../Typography/Typography").TypographyProps & import("react").RefAttributes<HTMLElement>>, import("styled-components").DefaultTheme, {
-    expanded: boolean;
-}, never>;
-export declare const CalendarMonth: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
-    expanded: boolean;
-}, never>;
-export declare const IconContainer: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {
-    expanded: boolean;
-}, never>;
-export declare const IconButton: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
-    expanded: boolean;
-}, never>;
+export declare const TitleContainer: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../Typography/Typography").TypographyProps & import("react").RefAttributes<HTMLElement>>, import("styled-components").DefaultTheme, {}, never>;
+export declare const CalendarMonth: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const NavigationContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const CalendarHeader: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const CalendarLayout: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+/**
+ * デスクトップでは子を親レイアウトに直接参加させる（display: contents）。
+ * モバイルではカレンダー本体 + Actions + 適用フッターを一括スクロールするラッパー。
+ */
+export declare const CalendarMobileApplyHost: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+/** Select2 等と同様、モバイルのみ右下に適用ボタンを置く */
+export declare const CalendarApplyFooter: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 type TodayIndicatorProps = {
     isToday?: boolean;
 };

package/dist/components/DateRangePicker/DateRangePicker.d.ts

@@ -100,6 +100,16 @@ export type DateRangePickerProps = {
      * @default "YYYY-MM-DD"
      */
     format?: string;
+    /**
+     * モバイルでカレンダー下部に表示する「適用」ボタンのラベル
+     * @default ロケールの defaultProps（ja: 適用 / en: Apply）
+     */
+    applyButtonText?: string;
+    /**
+     * モバイルでカレンダー下部に表示する「キャンセル」ボタンのラベル
+     * @default ロケールの defaultProps（ja: キャンセル / en: Cancel）
+     */
+    cancelButtonText?: string;
 };
 export declare const DateRangePicker: React.ForwardRefExoticComponent<DateRangePickerProps & React.RefAttributes<HTMLDivElement>>;
 declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<DateRangePickerProps & React.RefAttributes<HTMLDivElement>>>;

package/dist/components/DateRangePicker/DateRangePicker.stories.d.ts

@@ -22,3 +22,7 @@ export declare const DarkVariant: StoryObj<DateRangePickerProps>;
 export declare const WithDateFields: StoryObj<DateRangePickerProps>;
 export declare const WithDateFieldsAndPresetButtons: StoryObj<DateRangePickerProps>;
 export declare const WithTimeFields: StoryObj<DateRangePickerProps>;
+/**
+ * CalendarRange の unified 例（日付・時刻フィールド＋多数プリセット）をポップオーバーで再現
+ */
+export declare const UnifiedCalendarWithDateTimeAndPresets: StoryObj<DateRangePickerProps>;

package/dist/constants/locale.d.ts

@@ -43,6 +43,8 @@ export interface Localization {
             defaultProps: Pick<DatePickerProps, "monthFormat"> & {
                 weekList: string[];
                 weekStart: number;
+                applyButtonText: string;
+                cancelButtonText: string;
             };
         };
         WeekTime?: {