ingred-ui 29.0.0 → 29.1.1

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

@@ -1,7 +1,7 @@
 import { Dayjs } from "dayjs";
 import React from "react";
 import { PresetButton } from "../internal/Actions";
-import { TimeFieldProps } from "../../TimeField/TimeField";
+import type { TimeField2Props } from "../../TimeField/TimeField2";
 import type { CalendarWeekConfig } from "../types";
 export type CalendarProps = React.HTMLAttributes<HTMLDivElement> & {
     /**
@@ -56,9 +56,9 @@ export type CalendarProps = React.HTMLAttributes<HTMLDivElement> & {
      */
     showTimeFields?: boolean;
     /**
-     * TimeFieldのprops
+     * TimeField2のprops
      */
-    timeFieldProps?: Partial<TimeFieldProps>;
+    timeFieldProps?: Partial<TimeField2Props>;
 };
 declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
     /**
@@ -113,8 +113,8 @@ declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponen
      */
     showTimeFields?: boolean | undefined;
     /**
-     * TimeFieldのprops
+     * TimeField2のprops
      */
-    timeFieldProps?: Partial<TimeFieldProps> | undefined;
+    timeFieldProps?: Partial<TimeField2Props> | undefined;
 } & React.RefAttributes<HTMLDivElement>>>;
 export default _default;

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

@@ -16,7 +16,7 @@ declare const _default: {
         isOutsideRange?: ((date: dayjs.Dayjs) => boolean) | undefined;
         onDateChange: (value: dayjs.Dayjs) => void;
         showTimeFields?: boolean | undefined;
-        timeFieldProps?: Partial<import("../..").TimeFieldProps> | undefined;
+        timeFieldProps?: Partial<import("../..").TimeField2Props> | undefined;
     } & React.RefAttributes<HTMLDivElement>>>;
 };
 export default _default;

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

@@ -2,7 +2,7 @@ import dayjs, { Dayjs } from "dayjs";
 import { DateRange } from "../..";
 import React from "react";
 import { PresetButton } from "../internal/Actions";
-import { TimeFieldProps } from "../../TimeField/TimeField";
+import type { TimeField2Props } from "../../TimeField/TimeField2";
 import type { CalendarWeekConfig } from "../types";
 export type CalendarRangeProps = React.HTMLAttributes<HTMLDivElement> & {
     /**
@@ -80,9 +80,9 @@ export type CalendarRangeProps = React.HTMLAttributes<HTMLDivElement> & {
      */
     showTimeFields?: boolean;
     /**
-     * TimeFieldのprops
+     * TimeField2のprops
      */
-    timeFieldProps?: Partial<TimeFieldProps>;
+    timeFieldProps?: Partial<TimeField2Props>;
 };
 /**
  * CalendarRange
@@ -165,9 +165,9 @@ export declare const CalendarRange: React.ForwardRefExoticComponent<React.HTMLAt
      */
     showTimeFields?: boolean | undefined;
     /**
-     * TimeFieldのprops
+     * TimeField2のprops
      */
-    timeFieldProps?: Partial<TimeFieldProps> | undefined;
+    timeFieldProps?: Partial<TimeField2Props> | undefined;
 } & React.RefAttributes<HTMLDivElement>>;
 export type { DateRange };
 declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
@@ -246,8 +246,8 @@ declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponen
      */
     showTimeFields?: boolean | undefined;
     /**
-     * TimeFieldのprops
+     * TimeField2のprops
      */
-    timeFieldProps?: Partial<TimeFieldProps> | undefined;
+    timeFieldProps?: Partial<TimeField2Props> | undefined;
 } & React.RefAttributes<HTMLDivElement>>>;
 export default _default;

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

@@ -21,7 +21,7 @@ declare const _default: {
         isOutsideRange?: ((date: dayjs.Dayjs) => boolean) | undefined;
         onDatesChange?: ((dates: import("./CalendarRange").DateRange) => void) | undefined;
         showTimeFields?: boolean | undefined;
-        timeFieldProps?: Partial<import("../..").TimeFieldProps> | undefined;
+        timeFieldProps?: Partial<import("../..").TimeField2Props> | undefined;
     } & React.RefAttributes<HTMLDivElement>>>;
 };
 export default _default;
@@ -31,5 +31,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 に加え、プリセットボタンを並べた組み合わせ例 */
+/** DateField2 + TimeField2 に加え、プリセットボタンを並べた組み合わせ例 */
 export declare const WithDateFieldsTimeFieldsAndPresetButtons: StoryObj<CalendarRangeProps>;

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

@@ -2,7 +2,7 @@ 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";
+import type { TimeField2Props } from "../TimeField/TimeField2";
 import { InputSize, InputVariant } from "../Input/types";
 export type DatePickerProps = {
     /**
@@ -99,9 +99,9 @@ export type DatePickerProps = {
      */
     showTimeFields?: boolean;
     /**
-     * TimeFieldのprops
+     * TimeField2のprops
      */
-    timeFieldProps?: Partial<TimeFieldProps>;
+    timeFieldProps?: Partial<TimeField2Props>;
     /**
      * CalendarRangeを使用するかどうか
      * @default false

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

@@ -2,7 +2,7 @@ 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 type { TimeField2Props } from "../TimeField/TimeField2";
 import { InputSize, InputVariant } from "../Input/types";
 export type DateRange = {
     startDate: Dayjs;
@@ -88,9 +88,9 @@ export type DateRangePickerProps = {
      */
     showTimeFields?: boolean;
     /**
-     * TimeFieldのprops
+     * TimeField2のprops
      */
-    timeFieldProps?: Partial<TimeFieldProps>;
+    timeFieldProps?: Partial<TimeField2Props>;
     /**
      * 日付の表示フォーマット
      * @default "YYYY-MM-DD"

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";