ingred-ui 28.3.2 → 29.1.0

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

@@ -2,6 +2,7 @@ import { Dayjs } from "dayjs";
 import React from "react";
 import { PresetButton } from "../internal/Actions";
 import { TimeFieldProps } from "../../TimeField/TimeField";
+import type { CalendarWeekConfig } from "../types";
 export type CalendarProps = React.HTMLAttributes<HTMLDivElement> & {
     /**
      * 日付
@@ -13,15 +14,10 @@ export type CalendarProps = React.HTMLAttributes<HTMLDivElement> & {
      */
     monthFormat?: string;
     /**
-     * カレンダーに表示する曜日のリスト
-     * @memo dayjs().format("ddd") で対応したいが、階層が深くなったりするので一旦静的な値で対処
+     * 週の開始曜日と曜日見出し。未指定時はコンポーネント既定（日曜始まり・日本語短縮曜日）。
+     * `LocaleProvider` の defaultProps で上書き可能。
      */
-    weekList?: string[];
-    /**
-     * 週の開始日 (0=日曜日, 1=月曜日, 2=火曜日, ...)
-     * @default 0
-     */
-    weekStart?: number;
+    weekConfig?: CalendarWeekConfig;
     /**
      * デフォルトで選択されているプリセットボタン
      */
@@ -75,15 +71,10 @@ declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponen
      */
     monthFormat?: string | undefined;
     /**
-     * カレンダーに表示する曜日のリスト
-     * @memo dayjs().format("ddd") で対応したいが、階層が深くなったりするので一旦静的な値で対処
-     */
-    weekList?: string[] | undefined;
-    /**
-     * 週の開始日 (0=日曜日, 1=月曜日, 2=火曜日, ...)
-     * @default 0
+     * 週の開始曜日と曜日見出し。未指定時はコンポーネント既定（日曜始まり・日本語短縮曜日）。
+     * `LocaleProvider` の defaultProps で上書き可能。
      */
-    weekStart?: number | undefined;
+    weekConfig?: CalendarWeekConfig | undefined;
     /**
      * デフォルトで選択されているプリセットボタン
      */

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

@@ -7,8 +7,7 @@ declare const _default: {
     components: React.MemoExoticComponent<React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
         date: dayjs.Dayjs;
         monthFormat?: string | undefined;
-        weekList?: string[] | undefined;
-        weekStart?: number | undefined;
+        weekConfig?: import("..").CalendarWeekConfig | undefined;
         defaultPresetButton?: string | undefined;
         presetButtons?: import("../internal/Actions").PresetButton[] | undefined;
         onPresetButtonClick?: ((action: import("../internal/Actions").PresetButton) => void) | undefined;

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

@@ -3,6 +3,7 @@ import { DateRange } from "../..";
 import React from "react";
 import { PresetButton } from "../internal/Actions";
 import { TimeFieldProps } from "../../TimeField/TimeField";
+import type { CalendarWeekConfig } from "../types";
 export type CalendarRangeProps = React.HTMLAttributes<HTMLDivElement> & {
     /**
      * 開始日
@@ -19,15 +20,10 @@ export type CalendarRangeProps = React.HTMLAttributes<HTMLDivElement> & {
      */
     monthFormat?: string;
     /**
-     * カレンダーに表示する曜日のリスト
-     * @memo dayjs().format("ddd") で対応したいが、階層が深くなったりするので一旦静的な値で対処
+     * 週の開始曜日と曜日見出し。未指定時はコンポーネント既定（日曜始まり・日本語短縮曜日）。
+     * `LocaleProvider` の defaultProps で上書き可能。
      */
-    weekList?: string[];
-    /**
-     * 週の開始日 (0=日曜日, 1=月曜日, 2=火曜日, ...)
-     * @default 0
-     */
-    weekStart?: number;
+    weekConfig?: CalendarWeekConfig;
     /**
      * デフォルトで選択されているプリセットボタン
      */
@@ -109,15 +105,10 @@ export declare const CalendarRange: React.ForwardRefExoticComponent<React.HTMLAt
      */
     monthFormat?: string | undefined;
     /**
-     * カレンダーに表示する曜日のリスト
-     * @memo dayjs().format("ddd") で対応したいが、階層が深くなったりするので一旦静的な値で対処
-     */
-    weekList?: string[] | undefined;
-    /**
-     * 週の開始日 (0=日曜日, 1=月曜日, 2=火曜日, ...)
-     * @default 0
+     * 週の開始曜日と曜日見出し。未指定時はコンポーネント既定（日曜始まり・日本語短縮曜日）。
+     * `LocaleProvider` の defaultProps で上書き可能。
      */
-    weekStart?: number | undefined;
+    weekConfig?: CalendarWeekConfig | undefined;
     /**
      * デフォルトで選択されているプリセットボタン
      */
@@ -195,15 +186,10 @@ declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponen
      */
     monthFormat?: string | undefined;
     /**
-     * カレンダーに表示する曜日のリスト
-     * @memo dayjs().format("ddd") で対応したいが、階層が深くなったりするので一旦静的な値で対処
-     */
-    weekList?: string[] | undefined;
-    /**
-     * 週の開始日 (0=日曜日, 1=月曜日, 2=火曜日, ...)
-     * @default 0
+     * 週の開始曜日と曜日見出し。未指定時はコンポーネント既定（日曜始まり・日本語短縮曜日）。
+     * `LocaleProvider` の defaultProps で上書き可能。
      */
-    weekStart?: number | undefined;
+    weekConfig?: CalendarWeekConfig | undefined;
     /**
      * デフォルトで選択されているプリセットボタン
      */

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

@@ -8,8 +8,7 @@ declare const _default: {
         startDate: dayjs.Dayjs;
         endDate: dayjs.Dayjs;
         monthFormat?: string | undefined;
-        weekList?: string[] | undefined;
-        weekStart?: number | undefined;
+        weekConfig?: import("..").CalendarWeekConfig | undefined;
         defaultPresetButton?: string | undefined;
         presetButtons?: import("../internal/Actions").PresetButton[] | undefined;
         onPresetButtonClick?: ((action: import("../internal/Actions").PresetButton) => void) | undefined;

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

@@ -1,2 +1,8 @@
 /** カレンダーカード（グリッド＋Actions）の最大幅。1fr グリッドや広い親・100vw 上限だけでは横に伸び切るのを防ぐ */
 export declare const CALENDAR_CARD_MAX_WIDTH_PX = 640;
+/**
+ * `weekConfig` 未指定かつ `LocaleProvider` でも埋まらないときの曜日見出し（日曜始まり・日本語1文字）。
+ * ja のロケール既定と揃える。
+ */
+export declare const DEFAULT_CALENDAR_WEEK_FALLBACK_LABELS: readonly string[];
+export declare const DEFAULT_CALENDAR_WEEK_FALLBACK_START = 0;

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

@@ -1,3 +1,4 @@
 import Calendar from "./Calendar";
 import CalendarRange from "./CalendarRange";
 export { Calendar, CalendarRange };
+export type { CalendarWeekConfig } from "./types";

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

@@ -0,0 +1,15 @@
+/**
+ * カレンダー見出し行とグリッドの左端をひとまとめにした設定。
+ * `labels` の先頭は `start` で指定した曜日に対応する必要がある。
+ */
+export type CalendarWeekConfig = {
+    /**
+     * 週の開始曜日 (0=日曜日, 1=月曜日, … 6=土曜日)。
+     * 列の左端がこの曜日になる。
+     */
+    start: number;
+    /**
+     * 左から右へ並ぶ 7 つの曜日見出し文言。
+     */
+    labels: string[];
+};

package/dist/components/Calendar/utils/__tests__/resolveCalendarWeekDisplay.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/Calendar/utils/resolveCalendarWeekDisplay.d.ts

@@ -0,0 +1,12 @@
+import type { CalendarWeekConfig } from "../types";
+export type ResolveCalendarWeekDisplayArgs = {
+    weekConfig?: CalendarWeekConfig;
+    fallbackLabels: string[];
+    fallbackStart: number;
+};
+/** dayjs().day() と同じ 0–6（日–土）に収める */
+export declare function normalizeCalendarWeekStart(start: number): number;
+/**
+ * `weekConfig` があれば検証して返し、なければフォールバックで埋める。
+ */
+export declare function resolveCalendarWeekDisplay(args: ResolveCalendarWeekDisplayArgs): CalendarWeekConfig;

package/dist/components/ContextMenu2/ContextMenu2TextInputItem.d.ts

@@ -1,4 +1,8 @@
 import React from "react";
+/** styled の transient。フォーカスリング用 padding を付けるか（検索ヘッダー内など親レイアウトがある場合は false） */
+export type ContextMenu2TextInputItemStyledProps = {
+    $insetFocusRingPadding?: boolean;
+};
 export declare const ContextMenu2TextInputItem: import("styled-components").StyledComponent<React.ForwardRefExoticComponent<{
     onEnter?: (() => void) | undefined;
-} & React.InputHTMLAttributes<HTMLInputElement> & React.RefAttributes<HTMLInputElement>>, import("styled-components").DefaultTheme, {}, never>;
+} & React.InputHTMLAttributes<HTMLInputElement> & React.RefAttributes<HTMLInputElement>>, import("styled-components").DefaultTheme, ContextMenu2TextInputItemStyledProps, never>;

package/dist/components/ContextMenu2/menuRowStyles.d.ts

@@ -0,0 +1,7 @@
+/**
+ * ButtonItem / CheckItem / TriggerItem / SwitchItem 共通のレイアウトとベース見た目。
+ * タイポや gap・ホバーは各コンポーネント側で足す。
+ */
+export declare const contextMenu2InteractiveRowLayout: import("styled-components").FlattenSimpleInterpolation;
+/** メインラベルがテキストの行向け（UI/Text 14） */
+export declare const contextMenu2RowTextUi: import("styled-components").FlattenSimpleInterpolation;

package/dist/components/DateField/DateField2/DateField2.d.ts

@@ -0,0 +1,19 @@
+import React from "react";
+import { Dayjs } from "dayjs";
+import { InputSize, InputVariant } from "../types";
+export type DateField2Props = {
+    date: Dayjs;
+    format?: string;
+    name?: string;
+    error?: boolean;
+    errorText?: string;
+    disabled?: boolean;
+    size?: InputSize;
+    variant?: InputVariant;
+    width?: string | number;
+    append?: React.ReactNode;
+    onAppendClick?: () => void;
+    onDateChange?: (date: Dayjs) => void;
+};
+declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<DateField2Props & React.RefAttributes<HTMLDivElement>>>;
+export default _default;

package/dist/components/DateField/DateField2/DateField2.stories.d.ts

@@ -0,0 +1,23 @@
+import { StoryObj } from "@storybook/react-vite";
+import { DateField2Props } from "./DateField2";
+import React from "react";
+declare const _default: {
+    title: string;
+    component: React.MemoExoticComponent<React.ForwardRefExoticComponent<DateField2Props & React.RefAttributes<HTMLDivElement>>>;
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+};
+export default _default;
+export declare const Example: StoryObj<DateField2Props>;
+export declare const Custom: StoryObj<DateField2Props>;
+export declare const Japanese: StoryObj<DateField2Props>;
+export declare const Error: StoryObj<DateField2Props>;
+export declare const Disabled: StoryObj<DateField2Props>;
+export declare const Small: StoryObj<DateField2Props>;
+export declare const Large: StoryObj<DateField2Props>;
+export declare const Dark: StoryObj<DateField2Props>;

package/dist/components/DateField/DateField2/index.d.ts

@@ -0,0 +1,2 @@
+export { default as DateField2 } from "./DateField2";
+export type { DateField2Props } from "./DateField2";

package/dist/components/DateField/DateField2/styled.d.ts

@@ -0,0 +1,17 @@
+import { InputSize, InputVariant } from "../../Input/types";
+export declare const Container: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+    $size: InputSize;
+    $variant: InputVariant;
+    $error: boolean;
+    $disabled: boolean;
+    $focused: boolean;
+    $isIOS?: boolean | undefined;
+    $width?: string | number | undefined;
+}, never>;
+export declare const SegmentsRow: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const Segment: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {
+    $focused: boolean;
+    $editable: boolean;
+}, never>;
+export declare const Separator: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
+export declare const AppendContainer: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;

package/dist/components/DateField/DateField2/useDateField2.d.ts

@@ -0,0 +1,69 @@
+import React from "react";
+import { Dayjs } from "dayjs";
+type Props = {
+    date: Dayjs | null;
+    format?: string;
+    disabled?: boolean;
+    onDateChange?: (date: Dayjs) => void;
+};
+/**
+ * React Aria 方式の DateField2 向けフック。
+ * 各セグメント span が contentEditable + tabIndex={0} で直接フォーカス・入力を受ける。
+ * setSelectionRange を使わないためモバイル (iOS) でも安定動作する。
+ */
+export declare const useDateField2: ({ date, format, disabled, onDateChange, }: Props) => {
+    value: string;
+    sections: {
+        start: number;
+        end: number;
+        value: string;
+        editable: boolean;
+    }[];
+    focusedIndex: number | null;
+    isFocused: boolean;
+    getSegmentProps: (index: number) => {
+        ref: (el: HTMLSpanElement | null) => void;
+        "aria-hidden": true;
+        role?: undefined;
+        contentEditable?: undefined;
+        suppressContentEditableWarning?: undefined;
+        inputMode?: undefined;
+        tabIndex?: undefined;
+        enterKeyHint?: undefined;
+        spellCheck?: undefined;
+        autoCorrect?: undefined;
+        style?: undefined;
+        onFocus?: undefined;
+        onBlur?: undefined;
+        onKeyDown?: undefined;
+        onBeforeInput?: undefined;
+        onPointerDown?: undefined;
+        onMouseDown?: undefined;
+    } | {
+        ref: (el: HTMLSpanElement | null) => void;
+        role: "spinbutton";
+        contentEditable: true;
+        suppressContentEditableWarning: true;
+        inputMode: "numeric";
+        tabIndex: number;
+        enterKeyHint: "next";
+        spellCheck: false;
+        autoCorrect: "off";
+        style: {
+            caretColor: "transparent";
+        };
+        onFocus: () => void;
+        onBlur: (e: React.FocusEvent) => void;
+        onKeyDown: (event: React.KeyboardEvent<HTMLSpanElement>) => void;
+        onBeforeInput: (e: React.FormEvent<HTMLSpanElement>) => void;
+        onPointerDown(e: React.PointerEvent): void;
+        onMouseDown(e: React.MouseEvent): void;
+        "aria-hidden"?: undefined;
+    };
+    groupProps: {
+        ref: React.MutableRefObject<HTMLDivElement | null>;
+        onKeyDown: (event: React.KeyboardEvent<HTMLDivElement>) => void;
+        onPaste: (event: React.ClipboardEvent<HTMLDivElement>) => void;
+    };
+};
+export {};

package/dist/components/DateField/DateRangeField2/DateRangeField2.d.ts

@@ -0,0 +1,21 @@
+import React from "react";
+import { DateRange } from "../..";
+import { InputSize, InputVariant } from "../types";
+export type DateRangeField2Props = {
+    date: DateRange;
+    format?: string;
+    error?: boolean;
+    errorText?: string;
+    disabled?: boolean;
+    size?: InputSize;
+    variant?: InputVariant;
+    startWidth?: string | number;
+    endWidth?: string | number;
+    startName?: string;
+    endName?: string;
+    append?: React.ReactNode;
+    onAppendClick?: () => void;
+    onDatesChange?: (date: DateRange) => void;
+};
+declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<DateRangeField2Props & React.RefAttributes<HTMLDivElement>>>;
+export default _default;

package/dist/components/DateField/DateRangeField2/DateRangeField2.stories.d.ts

@@ -0,0 +1,23 @@
+import { StoryObj } from "@storybook/react-vite";
+import { DateRangeField2Props } from "./DateRangeField2";
+import React from "react";
+declare const _default: {
+    title: string;
+    component: React.MemoExoticComponent<React.ForwardRefExoticComponent<DateRangeField2Props & React.RefAttributes<HTMLDivElement>>>;
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+};
+export default _default;
+export declare const Example: StoryObj<DateRangeField2Props>;
+export declare const Custom: StoryObj<DateRangeField2Props>;
+export declare const Japanese: StoryObj<DateRangeField2Props>;
+export declare const Error: StoryObj<DateRangeField2Props>;
+export declare const Disabled: StoryObj<DateRangeField2Props>;
+export declare const Small: StoryObj<DateRangeField2Props>;
+export declare const Large: StoryObj<DateRangeField2Props>;
+export declare const Dark: StoryObj<DateRangeField2Props>;

package/dist/components/DateField/DateRangeField2/index.d.ts

@@ -0,0 +1,2 @@
+export { default as DateRangeField2 } from "./DateRangeField2";
+export type { DateRangeField2Props } from "./DateRangeField2";

package/dist/components/DateField/DateRangeField2/styled.d.ts

@@ -0,0 +1,10 @@
+import { InputSize, InputVariant } from "../../Input/types";
+export declare const RangeContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+    $size: InputSize;
+    $variant: InputVariant;
+    $error: boolean;
+    $disabled: boolean;
+    $focused: boolean;
+    $isIOS?: boolean | undefined;
+}, never>;
+export declare const RangeSeparator: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;

package/dist/components/DateField/__tests__/useDateField2.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/DateField/index.d.ts

@@ -1,3 +1,7 @@
 import DateField from "./DateField";
 import DateRangeField from "./DateRangeField";
 export { DateField, DateRangeField };
+export { DateField2 } from "./DateField2";
+export type { DateField2Props } from "./DateField2";
+export { DateRangeField2 } from "./DateRangeField2";
+export type { DateRangeField2Props } from "./DateRangeField2";

package/dist/components/DatePicker/DatePicker.d.ts

@@ -1,4 +1,5 @@
 import React from "react";
+import type { CalendarWeekConfig } from "../Calendar/types";
 import { PresetButton } from "../Calendar/internal/Actions";
 import { Dayjs } from "dayjs";
 import { TimeFieldProps } from "../TimeField/TimeField";
@@ -63,14 +64,9 @@ export type DatePickerProps = {
      */
     monthFormat?: string;
     /**
-     * カレンダーに表示する曜日のリスト
+     * 週の開始曜日と曜日見出し。未指定時は `LocaleProvider` の defaultProps、なければ Calendar と同様のフォールバック。
      */
-    weekList?: string[];
-    /**
-     * 週の開始日 (0=日曜日, 1=月曜日, 2=火曜日, ...)
-     * @default 0
-     */
-    weekStart?: number;
+    weekConfig?: CalendarWeekConfig;
     /**
      * カレンダーのActionsエリアにDateFieldを表示する
      * @default false

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

@@ -1,5 +1,6 @@
 import * as React from "react";
 import { Dayjs } from "dayjs";
+import type { CalendarWeekConfig } from "../Calendar/types";
 import { PresetButton } from "../Calendar/internal/Actions";
 import { TimeFieldProps } from "../TimeField/TimeField";
 import { InputSize, InputVariant } from "../Input/types";
@@ -63,14 +64,9 @@ export type DateRangePickerProps = {
      */
     monthFormat?: string;
     /**
-     * カレンダーに表示する曜日のリスト
+     * 週の開始曜日と曜日見出し。未指定時は `LocaleProvider` の defaultProps、なければ Calendar と同様のフォールバック。
      */
-    weekList?: string[];
-    /**
-     * 週の開始日 (0=日曜日, 1=月曜日, 2=火曜日, ...)
-     * @default 0
-     */
-    weekStart?: number;
+    weekConfig?: CalendarWeekConfig;
     /**
      * カレンダーのActionsエリアにDateFieldを表示する
      * @default false

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

@@ -18,7 +18,9 @@ export declare const Select: import("styled-components").StyledComponent<"button
 export declare const SelectIcon: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledContextMenu2TextInputItem: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<{
     onEnter?: (() => void) | undefined;
-} & import("react").InputHTMLAttributes<HTMLInputElement> & import("react").RefAttributes<HTMLInputElement>>, import("styled-components").DefaultTheme, {}, never>;
+} & import("react").InputHTMLAttributes<HTMLInputElement> & import("react").RefAttributes<HTMLInputElement>>, import("styled-components").DefaultTheme, import("../ContextMenu2/ContextMenu2TextInputItem").ContextMenu2TextInputItemStyledProps & {
+    $insetFocusRingPadding: boolean;
+}, "$insetFocusRingPadding">;
 export declare const SearchHeaderContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const SearchInputWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const SearchResetButton: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {}, never>;

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

@@ -16,7 +16,9 @@ type StyledContextMenu2TextInputItemProps = {
 };
 export declare const StyledContextMenu2TextInputItem: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<{
     onEnter?: (() => void) | undefined;
-} & import("react").InputHTMLAttributes<HTMLInputElement> & import("react").RefAttributes<HTMLInputElement>>, import("styled-components").DefaultTheme, StyledContextMenu2TextInputItemProps, never>;
+} & import("react").InputHTMLAttributes<HTMLInputElement> & import("react").RefAttributes<HTMLInputElement>>, import("styled-components").DefaultTheme, import("../ContextMenu2/ContextMenu2TextInputItem").ContextMenu2TextInputItemStyledProps & {
+    $insetFocusRingPadding: boolean;
+} & StyledContextMenu2TextInputItemProps, "$insetFocusRingPadding">;
 export declare const StyledTrigger: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {
     $isOpen?: boolean | undefined;
     $placeholder?: boolean | undefined;

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

@@ -42,7 +42,9 @@ export declare const IconArea: import("styled-components").StyledComponent<"div"
 }, never>;
 export declare const StyledContextMenu2TextInputItem: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<{
     onEnter?: (() => void) | undefined;
-} & import("react").InputHTMLAttributes<HTMLInputElement> & import("react").RefAttributes<HTMLInputElement>>, import("styled-components").DefaultTheme, {}, never>;
+} & import("react").InputHTMLAttributes<HTMLInputElement> & import("react").RefAttributes<HTMLInputElement>>, import("styled-components").DefaultTheme, import("../ContextMenu2/ContextMenu2TextInputItem").ContextMenu2TextInputItemStyledProps & {
+    $insetFocusRingPadding: boolean;
+}, "$insetFocusRingPadding">;
 export declare const OptionsContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const SearchHeaderContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const SearchInputWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;

package/dist/components/TimeField/TimeField2.d.ts

@@ -0,0 +1,20 @@
+import React from "react";
+import { Dayjs } from "dayjs";
+export type TimeField2Props = {
+    time?: Dayjs | null;
+    name?: string;
+    error?: boolean;
+    errorText?: string;
+    disabled?: boolean;
+    onTimeChange?: (time: Dayjs) => void;
+    dropdownInterval?: number;
+    filterTimeOptions?: Array<(time: string) => boolean>;
+    size?: "small" | "medium" | "large";
+    variant?: "light" | "dark";
+    width?: string;
+    maxHeight?: number | string;
+    onFocus?: () => void;
+    onBlur?: () => void;
+};
+declare const _default: React.NamedExoticComponent<TimeField2Props>;
+export default _default;

package/dist/components/TimeField/TimeField2.stories.d.ts

@@ -0,0 +1,12 @@
+import { Meta, StoryObj } from "@storybook/react-vite";
+import TimeField2, { TimeField2Props } from "./TimeField2";
+declare const meta: Meta<typeof TimeField2>;
+export default meta;
+type Story = StoryObj<TimeField2Props>;
+export declare const Example: Story;
+export declare const SmallSize: Story;
+export declare const LargeSize: Story;
+export declare const DarkVariant: Story;
+export declare const Disabled: Story;
+export declare const Error: Story;
+export declare const FilteredTimeOptions: Story;

package/dist/components/TimeField/__tests__/useTimeField2.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/TimeField/index.d.ts

@@ -1,2 +1,4 @@
 export { default, default as TimeField } from "./TimeField";
 export type { TimeFieldProps } from "./TimeField";
+export { default as TimeField2 } from "./TimeField2";
+export type { TimeField2Props } from "./TimeField2";

package/dist/components/TimeField/useTimeField2.d.ts

@@ -0,0 +1,68 @@
+import React from "react";
+import { Dayjs } from "dayjs";
+type Props = {
+    time: Dayjs | null;
+    disabled?: boolean;
+    onTimeChange?: (time: Dayjs) => void;
+};
+/**
+ * React Aria 方式の TimeField2 向けフック。
+ * 各セグメント span が contentEditable + tabIndex={0} で直接フォーカス・入力を受ける。
+ * setSelectionRange を使わないためモバイル (iOS) でも安定動作する。
+ */
+export declare const useTimeField2: ({ time, disabled, onTimeChange, }: Props) => {
+    value: string;
+    sections: {
+        start: number;
+        end: number;
+        value: string;
+        editable: boolean;
+    }[];
+    focusedIndex: number | null;
+    isFocused: boolean;
+    getSegmentProps: (index: number) => {
+        ref: (el: HTMLSpanElement | null) => void;
+        "aria-hidden": true;
+        role?: undefined;
+        contentEditable?: undefined;
+        suppressContentEditableWarning?: undefined;
+        inputMode?: undefined;
+        tabIndex?: undefined;
+        enterKeyHint?: undefined;
+        spellCheck?: undefined;
+        autoCorrect?: undefined;
+        style?: undefined;
+        onFocus?: undefined;
+        onBlur?: undefined;
+        onKeyDown?: undefined;
+        onBeforeInput?: undefined;
+        onPointerDown?: undefined;
+        onMouseDown?: undefined;
+    } | {
+        ref: (el: HTMLSpanElement | null) => void;
+        role: "spinbutton";
+        contentEditable: true;
+        suppressContentEditableWarning: true;
+        inputMode: "numeric";
+        tabIndex: number;
+        enterKeyHint: "next";
+        spellCheck: false;
+        autoCorrect: "off";
+        style: {
+            caretColor: "transparent";
+        };
+        onFocus: () => void;
+        onBlur: (e: React.FocusEvent) => void;
+        onKeyDown: (event: React.KeyboardEvent<HTMLSpanElement>) => void;
+        onBeforeInput: (e: React.FormEvent<HTMLSpanElement>) => void;
+        onPointerDown(e: React.PointerEvent): void;
+        onMouseDown(e: React.MouseEvent): void;
+        "aria-hidden"?: undefined;
+    };
+    groupProps: {
+        ref: React.MutableRefObject<HTMLDivElement | null>;
+        onKeyDown: (event: React.KeyboardEvent<HTMLDivElement>) => void;
+        onPaste: (event: React.ClipboardEvent<HTMLDivElement>) => void;
+    };
+};
+export {};

package/dist/components/index.d.ts

@@ -33,7 +33,7 @@ export * from "./CreatableSelect";
 export { default as DataTable } from "./DataTable";
 export * from "./DataTable";
 export * from "./DataTable2";
-export { DateField, DateRangeField } from "./DateField";
+export { DateField, DateRangeField, DateField2, DateRangeField2, } from "./DateField";
 export * from "./DateField";
 export { default as DatePicker } from "./DatePicker";
 export * from "./DatePicker";
@@ -130,7 +130,7 @@ export * from "./Tabs";
 export * from "./Tag";
 export { default as TextField } from "./TextField";
 export * from "./TextField";
-export { TimeField } from "./TimeField";
+export { TimeField, TimeField2 } from "./TimeField";
 export * from "./TimeField";
 export { default as Toast } from "./Toast";
 export * from "./Toast";