ingred-ui 25.1.1 → 25.2.0

package/dist/components/Fade/Fade.d.ts

@@ -1,4 +1,7 @@
 import * as React from "react";
 import { CSSTransitionProps } from "../../utils/reactTransitionGroup";
-declare const Fade: React.FunctionComponent<CSSTransitionProps>;
+type FadeProps = CSSTransitionProps & {
+    wrapperStyle?: React.CSSProperties;
+};
+declare const Fade: React.FunctionComponent<FadeProps>;
 export default Fade;

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

@@ -3,7 +3,9 @@ import React from "react";
 import Fade from "./Fade";
 declare const _default: {
     title: string;
-    component: React.FunctionComponent<import("../../utils/reactTransitionGroup").CSSTransitionProps>;
+    component: React.FunctionComponent<import("../../utils/reactTransitionGroup").CSSTransitionProps & {
+        wrapperStyle?: React.CSSProperties | undefined;
+    }>;
     args: {
         in: boolean;
         timeout: number;

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

@@ -20,4 +20,7 @@ export declare const StyledContextMenu2TextInputItem: import("styled-components"
     onEnter?: (() => void) | undefined;
 } & import("react").InputHTMLAttributes<HTMLInputElement> & import("react").RefAttributes<HTMLInputElement>>, 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>;
+export declare const SearchResetButton: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {}, never>;
+export declare const ButtonGroupWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export {};

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

@@ -25,4 +25,6 @@ export declare const StyledTrigger: import("styled-components").StyledComponent<
 }, never>;
 export declare const SelectPanelInner: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const SelectPanelContainer: 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 SearchResetButton: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {}, never>;
 export {};

package/dist/components/NavigationRail/NavigationRail.d.ts

@@ -20,6 +20,10 @@ type ExportedComponentType = {
 };
 type Props = {
     children?: React.ReactNode;
+    /**
+     * モバイルメニューが開いた時に、閉じるボタンとメニューの間に表示するコンテンツ
+     */
+    mobileHeaderContent?: React.ReactNode;
 };
 declare const _default: ExportedComponentType;
 export default _default;

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

@@ -5,6 +5,7 @@ declare const _default: {
     component: {
         (props: {
             children?: React.ReactNode;
+            mobileHeaderContent?: React.ReactNode;
         } & React.RefAttributes<HTMLDivElement>): JSX.Element;
         Container: React.ForwardRefExoticComponent<import("./NavigationRailContainer").NavigationRailContainerProps & React.RefAttributes<HTMLDivElement>>;
         Header: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
@@ -86,3 +87,4 @@ declare const _default: {
 };
 export default _default;
 export declare const Example: StoryObj;
+export declare const WithMobileHeaderContent: StoryObj;

package/dist/components/NavigationRail/NavigationRailContainer/styled.d.ts

@@ -1 +1,2 @@
 export declare const Container: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const MobileMenuButton: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;

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

@@ -1,6 +1,13 @@
 type ContainerProps = {
     isOpen: boolean;
     isFixed: boolean;
+    isMobile: boolean;
+    isMobileMenuOpen: boolean;
 };
 export declare const Container: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, ContainerProps, never>;
+export declare const MobileOverlay: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+    isVisible: boolean;
+}, never>;
+export declare const MobileCloseButton: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const MobileHeaderContent: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export {};

package/dist/components/NavigationRail/utils.d.ts

@@ -6,5 +6,8 @@ export type NavigationRailContextValues = {
     handleClose?: () => void;
     handleFixed?: () => void;
     handleUnFixed?: () => void;
+    isMobile: boolean;
+    isMobileMenuOpen: boolean;
+    handleMobileMenuToggle?: () => void;
 };
 export declare const NavigationRailContext: React.Context<NavigationRailContextValues>;

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

@@ -39,3 +39,5 @@ export declare const StyledContextMenu2TextInputItem: import("styled-components"
     onEnter?: (() => void) | undefined;
 } & import("react").InputHTMLAttributes<HTMLInputElement> & import("react").RefAttributes<HTMLInputElement>>, import("styled-components").DefaultTheme, {}, never>;
 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 SearchResetButton: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {}, never>;

package/dist/components/Slider/Slider.d.ts

@@ -0,0 +1,4 @@
+import * as React from "react";
+import { SliderProps } from "./types";
+declare const Slider: React.ForwardRefExoticComponent<SliderProps & React.RefAttributes<HTMLDivElement>>;
+export default Slider;

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

@@ -0,0 +1,12 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import Slider from "./Slider";
+declare const meta: Meta<typeof Slider>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Disabled: Story;
+export declare const CustomStep: Story;
+export declare const RangeSlider: Story;
+export declare const Scale: Story;
+export declare const RangeSliderWithScale: Story;
+export declare const MultipleSliders: Story;

package/dist/components/Slider/SliderField.d.ts

@@ -0,0 +1,22 @@
+import React, { type ReactNode } from "react";
+import { SliderProps } from "./types";
+type SliderFieldProps = {
+    children: ReactNode;
+};
+export declare const SliderField: React.FC<SliderFieldProps> & {
+    Slider: typeof SliderFieldSlider;
+    Output: typeof SliderFieldOutput;
+};
+type SliderFieldSliderProps = Omit<SliderProps, "id" | "aria-describedby"> & {
+    id?: string;
+    "aria-describedby"?: string;
+};
+declare const SliderFieldSlider: React.FC<SliderFieldSliderProps>;
+type SliderFieldOutputProps = {
+    children: ReactNode;
+    id?: string;
+    style?: React.CSSProperties;
+    className?: string;
+};
+declare const SliderFieldOutput: React.FC<SliderFieldOutputProps>;
+export default SliderField;

package/dist/components/Slider/__tests__/Slider.test.d.ts

@@ -0,0 +1 @@
+import "@testing-library/jest-dom";

package/dist/components/Slider/hooks/index.d.ts

@@ -0,0 +1,2 @@
+export { useSlider } from "./useSlider";
+export { useSliderScale } from "./useSliderScale";

package/dist/components/Slider/hooks/useSlider.d.ts

@@ -0,0 +1,2 @@
+import { UseSliderProps, UseSliderReturn } from "../types";
+export declare function useSlider({ value, defaultValue, onChange, min, max, step, disabled, }: UseSliderProps): UseSliderReturn;

package/dist/components/Slider/hooks/useSliderScale.d.ts

@@ -0,0 +1,2 @@
+import { UseSliderScaleProps, UseSliderScaleReturn } from "../types";
+export declare function useSliderScale({ showScale, min, max, step, currentValue, }: UseSliderScaleProps): UseSliderScaleReturn;

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

@@ -0,0 +1,5 @@
+export { default as Slider } from "./Slider";
+export { default as SliderField } from "./SliderField";
+export type { SliderProps, SliderTrackProps, SliderFillProps, SliderThumbProps, SliderScaleProps, UseSliderProps, UseSliderReturn, UseSliderScaleProps, UseSliderScaleReturn, } from "./types";
+export { clamp, getClampedValue, getPercentage, getValueFromPosition, getNearestThumbIndex, getKeyboardValue, preventTextSelection, restoreTextSelection, preventScroll, } from "./utils";
+export { useSlider, useSliderScale } from "./hooks";

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

@@ -0,0 +1,18 @@
+import { SliderFillProps, SliderThumbProps } from "./types";
+export declare const SliderContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+    disabled?: boolean | undefined;
+}, never>;
+export declare const SliderTrack: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const SliderFill: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, SliderFillProps & {
+    disabled?: boolean | undefined;
+}, never>;
+export declare const SliderThumb: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, SliderThumbProps & {
+    disabled?: boolean | undefined;
+}, never>;
+export declare const SliderScaleContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const SliderScaleMark: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+    percentage: number;
+}, never>;
+export declare const SliderScale: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+    isOnFill: boolean;
+}, never>;

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

@@ -0,0 +1,107 @@
+import React from "react";
+import { Theme } from "../../themes";
+export type SliderProps = {
+    /**
+     * The current value (controlled).
+     */
+    value?: number | number[];
+    /**
+     * The default value (uncontrolled).
+     */
+    defaultValue?: number | number[];
+    /**
+     * Handler that is called when the value changes.
+     */
+    onChange?: (value: number | number[]) => void;
+    /**
+     * The minimum value of the slider.
+     */
+    min?: number;
+    /**
+     * The maximum value of the slider.
+     */
+    max?: number;
+    /**
+     * The step value of the slider.
+     */
+    step?: number;
+    /**
+     * Whether the slider is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Whether to show scale marks on the slider.
+     */
+    showScale?: boolean;
+    /**
+     * Custom ID for the slider. If not provided, a unique ID will be generated.
+     */
+    id?: string;
+    /**
+     * Additional CSS class name.
+     */
+    className?: string;
+    /**
+     * Additional inline styles.
+     */
+    style?: React.CSSProperties;
+    /**
+     * ID of the element that labels the slider.
+     */
+    "aria-labelledby"?: string;
+    /**
+     * ID of the element that describes the slider.
+     */
+    "aria-describedby"?: string;
+};
+type BaseSliderComponentProps = {
+    theme: Theme;
+};
+export type SliderTrackProps = {};
+export type SliderFillProps = {
+    percentage: number;
+    isDragging?: boolean;
+    startPercentage?: number;
+};
+export type SliderThumbProps = {
+    percentage: number;
+    isDragging: boolean;
+};
+export type SliderScaleProps = BaseSliderComponentProps & {
+    isOnFill: boolean;
+};
+export type UseSliderProps = {
+    value?: number | number[];
+    defaultValue?: number | number[];
+    onChange?: (value: number | number[]) => void;
+    min: number;
+    max: number;
+    step: number;
+    disabled?: boolean;
+};
+export type UseSliderReturn = {
+    currentValue: number | number[];
+    isDragging: boolean;
+    trackRef: React.RefObject<HTMLDivElement>;
+    thumbRef: React.RefObject<HTMLDivElement>;
+    handleChange: (newValue: number | number[]) => void;
+    handleMouseDown: (e: React.MouseEvent) => void;
+    handleMouseMove: (e: MouseEvent) => void;
+    handleMouseUp: (e: MouseEvent) => void;
+    handleTouchStart: (e: React.TouchEvent) => void;
+    handleTouchMove: (e: TouchEvent) => void;
+    handleTouchEnd: (e: TouchEvent) => void;
+};
+export type UseSliderScaleProps = {
+    showScale: boolean;
+    min: number;
+    max: number;
+    step: number;
+    currentValue: number | number[];
+};
+export type UseSliderScaleReturn = {
+    getScaleValues: () => number[];
+    isScaleOnFill: (scaleValue: number) => boolean;
+    renderScale: () => React.ReactNode;
+};
+export {};

package/dist/components/Slider/utils.d.ts

@@ -0,0 +1,41 @@
+/**
+ * 値を指定された範囲内にクランプする
+ */
+export declare const clamp: (value: number, min: number, max: number) => number;
+/**
+ * 初期値を適切にクランプする
+ */
+export declare const getClampedValue: (val: number | number[] | undefined, min: number, max: number, isRange: boolean) => number | number[];
+/**
+ * パーセンテージを計算する
+ */
+export declare const getPercentage: (val: number, min: number, max: number) => number;
+/**
+ * 座標から値を計算する
+ */
+export declare const getValueFromPosition: (clientX: number, trackRect: DOMRect, min: number, max: number, step: number) => number;
+/**
+ * 最寄りのつまみのインデックスを取得する
+ * 同じ距離の場合は、クリック位置が右側ならmaxのつまみ、左側ならminのつまみを選択
+ */
+export declare const getNearestThumbIndex: (clickValue: number, values: number[]) => number;
+/**
+ * つまみの交差を防止する
+ */
+export declare const preventThumbCrossing: (values: number[], thumbIndex: number, newValue: number) => number[];
+/**
+ * キーボード操作で値を更新する
+ */
+export declare const getKeyboardValue: (currentValue: number | number[], key: string, min: number, max: number, step: number, isRange: boolean, draggedThumbIndex: number | null) => number | number[];
+/**
+ * テキスト選択を防止する
+ */
+export declare const preventTextSelection: () => void;
+/**
+ * テキスト選択を復元する
+ */
+export declare const restoreTextSelection: () => void;
+/**
+ * スクロールを防止する
+ */
+export declare const preventScroll: (event: Event) => void;

package/dist/components/index.d.ts

@@ -99,6 +99,8 @@ export * from "./ScrollArea";
 export { default as Select } from "./Select";
 export * from "./Select";
 export * from "./Select2";
+export { Slider } from "./Slider";
+export * from "./Slider";
 export { default as Slide } from "./Slide";
 export * from "./Slide";
 export { default as Snackbar } from "./Snackbar";

package/dist/hooks/__tests__/useMediaQuery.test.d.ts

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

package/dist/hooks/useMediaQuery.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Hook to track media query matches
+ * @param query - Media query string (e.g., "(max-width: 816px)")
+ * @returns boolean indicating if the media query matches
+ */
+export default function useMediaQuery(query: string): boolean;