ingred-ui 29.1.3 → 30.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/Calendar/Calendar/Calendar.d.ts +11 -1
- package/dist/components/Calendar/CalendarRange/CalendarRange.d.ts +31 -1
- package/dist/components/Calendar/internal/Actions/styled.d.ts +2 -0
- package/dist/components/Checkbox/Checkbox.d.ts +1 -4
- package/dist/components/Checkbox/index.d.ts +1 -1
- package/dist/components/RadioButton/RadioButton.d.ts +1 -14
- package/dist/components/RadioButton/index.d.ts +2 -2
- package/dist/components/RadioButton/styled.d.ts +5 -4
- package/dist/components/Typography/Typography.d.ts +11 -2
- package/dist/components/Typography/__tests__/getResponsiveFontSizeCss.test.d.ts +1 -0
- package/dist/components/Typography/getResponsiveFontSizeCss.d.ts +4 -0
- package/dist/components/Typography/index.d.ts +3 -2
- package/dist/components/Typography/styled.d.ts +5 -3
- package/dist/index.es.js +767 -737
- package/dist/index.es.js.map +1 -1
- package/dist/index.js +769 -739
- package/dist/index.js.map +1 -1
- package/dist/types/ResponsiveValue.d.ts +8 -0
- package/dist/types/index.d.ts +2 -0
- package/package.json +1 -1
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { Dayjs } from "dayjs";
|
|
2
|
-
import React from "react";
|
|
2
|
+
import React, { ReactNode } from "react";
|
|
3
3
|
import { PresetButton } from "../internal/Actions";
|
|
4
4
|
import type { TimeField2Props } from "../../TimeField/TimeField2";
|
|
5
5
|
import type { CalendarWeekConfig } from "../types";
|
|
@@ -59,6 +59,11 @@ export type CalendarProps = React.HTMLAttributes<HTMLDivElement> & {
|
|
|
59
59
|
* TimeField2のprops
|
|
60
60
|
*/
|
|
61
61
|
timeFieldProps?: Partial<TimeField2Props>;
|
|
62
|
+
/**
|
|
63
|
+
* 「日付」ラベルの右側に表示する任意ノード(チェックボックス等)。
|
|
64
|
+
* `showDateFields` が true のときのみ表示される。
|
|
65
|
+
*/
|
|
66
|
+
labelSuffix?: ReactNode;
|
|
62
67
|
};
|
|
63
68
|
declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
|
|
64
69
|
/**
|
|
@@ -116,5 +121,10 @@ declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponen
|
|
|
116
121
|
* TimeField2のprops
|
|
117
122
|
*/
|
|
118
123
|
timeFieldProps?: Partial<TimeField2Props> | undefined;
|
|
124
|
+
/**
|
|
125
|
+
* 「日付」ラベルの右側に表示する任意ノード(チェックボックス等)。
|
|
126
|
+
* `showDateFields` が true のときのみ表示される。
|
|
127
|
+
*/
|
|
128
|
+
labelSuffix?: React.ReactNode;
|
|
119
129
|
} & React.RefAttributes<HTMLDivElement>>>;
|
|
120
130
|
export default _default;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import dayjs, { Dayjs } from "dayjs";
|
|
2
2
|
import { DateRange } from "../..";
|
|
3
|
-
import React from "react";
|
|
3
|
+
import React, { ReactNode } from "react";
|
|
4
4
|
import { PresetButton } from "../internal/Actions";
|
|
5
5
|
import type { TimeField2Props } from "../../TimeField/TimeField2";
|
|
6
6
|
import type { CalendarWeekConfig } from "../types";
|
|
@@ -83,6 +83,16 @@ export type CalendarRangeProps = React.HTMLAttributes<HTMLDivElement> & {
|
|
|
83
83
|
* TimeField2のprops
|
|
84
84
|
*/
|
|
85
85
|
timeFieldProps?: Partial<TimeField2Props>;
|
|
86
|
+
/**
|
|
87
|
+
* 「開始日時」ラベルの右側に表示する任意ノード(チェックボックス等)。
|
|
88
|
+
* `showDateFields` が true のときのみ表示される。
|
|
89
|
+
*/
|
|
90
|
+
startLabelSuffix?: ReactNode;
|
|
91
|
+
/**
|
|
92
|
+
* 「終了日時」ラベルの右側に表示する任意ノード(「無期限にする」チェックボックス等)。
|
|
93
|
+
* `showDateFields` が true のときのみ表示される。
|
|
94
|
+
*/
|
|
95
|
+
endLabelSuffix?: ReactNode;
|
|
86
96
|
};
|
|
87
97
|
/**
|
|
88
98
|
* CalendarRange
|
|
@@ -168,6 +178,16 @@ export declare const CalendarRange: React.ForwardRefExoticComponent<React.HTMLAt
|
|
|
168
178
|
* TimeField2のprops
|
|
169
179
|
*/
|
|
170
180
|
timeFieldProps?: Partial<TimeField2Props> | undefined;
|
|
181
|
+
/**
|
|
182
|
+
* 「開始日時」ラベルの右側に表示する任意ノード(チェックボックス等)。
|
|
183
|
+
* `showDateFields` が true のときのみ表示される。
|
|
184
|
+
*/
|
|
185
|
+
startLabelSuffix?: ReactNode;
|
|
186
|
+
/**
|
|
187
|
+
* 「終了日時」ラベルの右側に表示する任意ノード(「無期限にする」チェックボックス等)。
|
|
188
|
+
* `showDateFields` が true のときのみ表示される。
|
|
189
|
+
*/
|
|
190
|
+
endLabelSuffix?: ReactNode;
|
|
171
191
|
} & React.RefAttributes<HTMLDivElement>>;
|
|
172
192
|
export type { DateRange };
|
|
173
193
|
declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
|
|
@@ -249,5 +269,15 @@ declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponen
|
|
|
249
269
|
* TimeField2のprops
|
|
250
270
|
*/
|
|
251
271
|
timeFieldProps?: Partial<TimeField2Props> | undefined;
|
|
272
|
+
/**
|
|
273
|
+
* 「開始日時」ラベルの右側に表示する任意ノード(チェックボックス等)。
|
|
274
|
+
* `showDateFields` が true のときのみ表示される。
|
|
275
|
+
*/
|
|
276
|
+
startLabelSuffix?: React.ReactNode;
|
|
277
|
+
/**
|
|
278
|
+
* 「終了日時」ラベルの右側に表示する任意ノード(「無期限にする」チェックボックス等)。
|
|
279
|
+
* `showDateFields` が true のときのみ表示される。
|
|
280
|
+
*/
|
|
281
|
+
endLabelSuffix?: React.ReactNode;
|
|
252
282
|
} & React.RefAttributes<HTMLDivElement>>>;
|
|
253
283
|
export default _default;
|
|
@@ -9,3 +9,5 @@ export declare const DateFieldRow: import("styled-components").StyledComponent<"
|
|
|
9
9
|
/** 開始/終了など複数ブロックを、幅に応じて横並び〜折り返し(常に左詰め・伸長なし) */
|
|
10
10
|
export declare const DateFieldsGroup: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
11
11
|
export declare const DateFieldLabel: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
|
|
12
|
+
/** ラベルテキストと、その右側に差し込む任意ノード(チェックボックス等)を横並びにする行 */
|
|
13
|
+
export declare const DateFieldLabelRow: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
@@ -1,8 +1,5 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
export
|
|
3
|
-
SMALL = "small",
|
|
4
|
-
MEDIUM = "medium"
|
|
5
|
-
}
|
|
2
|
+
export type CheckboxSize = "small" | "medium";
|
|
6
3
|
type CheckBoxPropsBase = Omit<React.ComponentPropsWithoutRef<"input">, "size">;
|
|
7
4
|
export type CheckBoxProps = CheckBoxPropsBase & {
|
|
8
5
|
indeterminate?: boolean;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
export { default } from "./Checkbox";
|
|
2
|
-
export type { CheckBoxProps } from "./Checkbox";
|
|
2
|
+
export type { CheckBoxProps, CheckboxSize } from "./Checkbox";
|
|
@@ -1,18 +1,5 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
export
|
|
3
|
-
SMALL = "16px",
|
|
4
|
-
MEDIUM = "18px"
|
|
5
|
-
}
|
|
6
|
-
export declare const indicatorSizes: {
|
|
7
|
-
"16px": {
|
|
8
|
-
inside: string;
|
|
9
|
-
border: string;
|
|
10
|
-
};
|
|
11
|
-
"18px": {
|
|
12
|
-
inside: string;
|
|
13
|
-
border: string;
|
|
14
|
-
};
|
|
15
|
-
};
|
|
2
|
+
export type RadioButtonSize = "small" | "medium";
|
|
16
3
|
export type RadioButtonChangeHandler = (e: React.ChangeEvent<HTMLInputElement>, checked: boolean) => void;
|
|
17
4
|
export type RadioButtonProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "onChange"> & {
|
|
18
5
|
size?: RadioButtonSize;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export { default
|
|
2
|
-
export type { RadioButtonProps } from "./RadioButton";
|
|
1
|
+
export { default } from "./RadioButton";
|
|
2
|
+
export type { RadioButtonProps, RadioButtonSize } from "./RadioButton";
|
|
@@ -1,12 +1,13 @@
|
|
|
1
1
|
import { RadioButtonSize } from "./RadioButton";
|
|
2
2
|
export declare const Wrapper: import("styled-components").StyledComponent<"label", import("styled-components").DefaultTheme, {
|
|
3
|
-
size: RadioButtonSize;
|
|
3
|
+
$size: RadioButtonSize;
|
|
4
|
+
$width: string;
|
|
4
5
|
disabled?: boolean | undefined;
|
|
5
6
|
}, never>;
|
|
6
7
|
type IndicatorProps = {
|
|
7
|
-
|
|
8
|
-
inside: string;
|
|
9
|
-
border: string;
|
|
8
|
+
$width: string;
|
|
9
|
+
$inside: string;
|
|
10
|
+
$border: string;
|
|
10
11
|
error: boolean;
|
|
11
12
|
};
|
|
12
13
|
export declare const Indicator: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, IndicatorProps, never>;
|
|
@@ -1,19 +1,28 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
+
import type { ResponsiveValue } from "../../types/ResponsiveValue";
|
|
2
3
|
export type ColorType = "initial" | "primary" | "secondary" | "disabled" | "hint" | "white";
|
|
3
4
|
export type FontSize = "xs" | "sm" | "md" | "lg" | "xl" | "xxl" | "xxxl" | "xxxxl" | "xxxxxl" | "xxxxxxl" | "xxxxxxxl";
|
|
4
5
|
export declare const fontSize: {
|
|
5
6
|
[key in FontSize]: number;
|
|
6
7
|
};
|
|
7
8
|
export type TextAlign = "left" | "center" | "right";
|
|
8
|
-
export type FontWeight = "normal" | "bold";
|
|
9
|
+
export type FontWeight = "normal" | "bold" | "black";
|
|
10
|
+
export declare function resolveFontWeight(weight: FontWeight): number;
|
|
9
11
|
export type TypographyProps = {
|
|
10
12
|
component?: keyof JSX.IntrinsicElements | React.ComponentType<any>;
|
|
11
13
|
color?: ColorType | string;
|
|
12
14
|
align?: "left" | "center" | "right";
|
|
13
|
-
size?: FontSize
|
|
15
|
+
size?: ResponsiveValue<FontSize>;
|
|
14
16
|
weight?: FontWeight;
|
|
15
17
|
lineHeight?: string;
|
|
16
18
|
trimVertical?: boolean;
|
|
19
|
+
/**
|
|
20
|
+
* 未指定・`false` のときは `font-feature-settings` を付けない。
|
|
21
|
+
* `true` のときは `"palt" 1`。文字列のときはその値を `font-feature-settings` に渡す。
|
|
22
|
+
*
|
|
23
|
+
* palt はタイトル・見出しなど、短文でサイズが大きいブロック向き。長文のボディでは字間・リズムが変わるため、可読性の観点では付けないことが多い。
|
|
24
|
+
*/
|
|
25
|
+
fontFeatureSettings?: boolean | string;
|
|
17
26
|
className?: string;
|
|
18
27
|
children: React.ReactNode;
|
|
19
28
|
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import { FlattenSimpleInterpolation } from "styled-components";
|
|
2
|
+
import { type ResponsiveValue } from "../../types/ResponsiveValue";
|
|
3
|
+
import { FontSize } from "./Typography";
|
|
4
|
+
export declare function getResponsiveFontSizeCss(size: ResponsiveValue<FontSize>): FlattenSimpleInterpolation;
|
|
@@ -1,2 +1,3 @@
|
|
|
1
|
-
export { default } from "./Typography";
|
|
2
|
-
export type { TypographyProps } from "./Typography";
|
|
1
|
+
export { default, fontSize, resolveFontWeight } from "./Typography";
|
|
2
|
+
export type { FontSize, FontWeight, TypographyProps } from "./Typography";
|
|
3
|
+
export { getResponsiveFontSizeCss } from "./getResponsiveFontSizeCss";
|
|
@@ -1,11 +1,13 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { FlattenSimpleInterpolation } from "styled-components";
|
|
2
|
+
import { TextAlign } from "./Typography";
|
|
2
3
|
type ContainerProps = {
|
|
3
4
|
color: string;
|
|
4
5
|
align: TextAlign;
|
|
5
|
-
|
|
6
|
-
|
|
6
|
+
$fontSizeCss: FlattenSimpleInterpolation;
|
|
7
|
+
$fontWeight: number;
|
|
7
8
|
lineHeight: string;
|
|
8
9
|
$trimVertical?: boolean;
|
|
10
|
+
$fontFeatureSettings?: string;
|
|
9
11
|
};
|
|
10
12
|
export declare const Container: import("styled-components").StyledComponent<"p", import("styled-components").DefaultTheme, ContainerProps, never>;
|
|
11
13
|
export {};
|