fone-design-system_v2 1.0.314 → 1.0.315
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/Checkbox/Checkbox.d.ts +1 -8
- package/dist/components/DatePicker/DatePicker.d.ts +1 -16
- package/dist/components/TimePicker/TimePicker.d.ts +1 -29
- package/dist/fone-design-system.es.js +10186 -10257
- package/dist/fone-design-system.umd.js +183 -236
- package/dist/theme/types/mui/theme.d.ts +8 -0
- package/package.json +1 -1
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import { SxProps, Theme } from '@mui/material/styles';
|
|
2
1
|
import { LabelProps } from '../Label';
|
|
3
2
|
import * as React from "react";
|
|
4
3
|
type SizeType = "small" | "medium" | "large" | string;
|
|
@@ -10,17 +9,11 @@ export interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputE
|
|
|
10
9
|
size?: SizeType;
|
|
11
10
|
labelSize?: LabelProps["size"];
|
|
12
11
|
labelPlacement?: "start" | "end" | "top" | "bottom";
|
|
13
|
-
/** 라벨 텍스트 색상 (예: "black", "#333", "rgb(...)") */
|
|
14
|
-
labelColor?: string;
|
|
15
|
-
/** 라벨 글자 두께 (예: 400, 600, "bold") */
|
|
16
|
-
labelWeight?: React.CSSProperties["fontWeight"];
|
|
17
|
-
/** 라벨에 직접 적용할 추가 스타일 (fontSize 등 임의 CSS) */
|
|
18
|
-
labelSx?: SxProps<Theme>;
|
|
19
12
|
/**
|
|
20
13
|
* "primary" 같은 키면 theme.palette에서 자동으로 가져옴
|
|
21
14
|
* string(예: "#123", "var(--...)" )이면 그대로 사용
|
|
22
15
|
*/
|
|
23
|
-
color?: "primary" | "secondary" | "success" | "error" | "warning" | "info" | "default" |
|
|
16
|
+
color?: "primary" | "secondary" | "success" | "error" | "warning" | "info" | "default" | string;
|
|
24
17
|
checked?: boolean;
|
|
25
18
|
defaultChecked?: boolean;
|
|
26
19
|
onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
|
|
@@ -1,24 +1,9 @@
|
|
|
1
1
|
import { default as React } from 'react';
|
|
2
2
|
import { DatePickerProps as AntdDatePickerProps } from 'antd/es/date-picker';
|
|
3
3
|
import { Dayjs } from 'dayjs';
|
|
4
|
-
|
|
5
|
-
* 상태별 스타일 처리 방식 (TimePicker와 동일)
|
|
6
|
-
* - 인라인 `style`은 specificity가 가장 높아 hover/active(클래스)로 덮을 수 없다.
|
|
7
|
-
* 그래서 default(`style`)도 인라인으로 넘기지 않고 클래스 CSS로 주입해
|
|
8
|
-
* "base → hover → active" 순서로 덮어쓰기가 되도록 한다.
|
|
9
|
-
* - border/background 같은 box 속성은 컨테이너(.ant-picker)에 적용하고,
|
|
10
|
-
* fontSize/fontWeight/color 같은 텍스트 속성은 입력(input)이 컨테이너 값을
|
|
11
|
-
* 상속(inherit)하게 만들어 한 번의 스타일 객체로 같이 처리한다.
|
|
12
|
-
*/
|
|
13
|
-
export interface DatePickerProps extends Omit<AntdDatePickerProps, "onChange" | "value" | "style"> {
|
|
4
|
+
export interface DatePickerProps extends Omit<AntdDatePickerProps, "onChange" | "value"> {
|
|
14
5
|
value?: Dayjs | null;
|
|
15
6
|
onChange?: ((date: Dayjs, dateString: string | string[]) => void) | undefined;
|
|
16
|
-
/** 기본(base) 스타일. border/background/fontSize/color 등 자유롭게 지정 */
|
|
17
|
-
style?: React.CSSProperties;
|
|
18
|
-
/** hover 상태에서 base 위에 덮어쓸 스타일 */
|
|
19
|
-
hoverStyle?: React.CSSProperties;
|
|
20
|
-
/** active(focus) 상태에서 base/hover 위에 덮어쓸 스타일 */
|
|
21
|
-
activeStyle?: React.CSSProperties;
|
|
22
7
|
}
|
|
23
8
|
declare const DatePicker: React.ForwardRefExoticComponent<Omit<DatePickerProps, "ref"> & React.RefAttributes<any>>;
|
|
24
9
|
export default DatePicker;
|
|
@@ -1,32 +1,4 @@
|
|
|
1
1
|
import { default as React } from 'react';
|
|
2
2
|
import { TimePickerProps } from 'antd';
|
|
3
|
-
|
|
4
|
-
* 상태별 스타일 처리 방식
|
|
5
|
-
* - 인라인 `style`은 specificity가 가장 높아 hover/active(클래스)로 덮을 수 없다.
|
|
6
|
-
* 그래서 default(`style`)도 인라인으로 넘기지 않고 클래스 CSS로 주입해
|
|
7
|
-
* "base → hover → active" 순서로 덮어쓰기가 되도록 한다.
|
|
8
|
-
* - border/background 같은 box 속성은 컨테이너(.ant-picker)에 적용하고,
|
|
9
|
-
* fontSize/fontWeight/color 같은 텍스트 속성은 입력(input)이 컨테이너 값을
|
|
10
|
-
* 상속(inherit)하게 만들어 한 번의 스타일 객체로 같이 처리한다.
|
|
11
|
-
*
|
|
12
|
-
* (대안) antd 네이티브 방식인 ConfigProvider 테마 토큰:
|
|
13
|
-
* <ConfigProvider
|
|
14
|
-
* theme={{ components: { DatePicker: {
|
|
15
|
-
* hoverBorderColor: "#9ca3af",
|
|
16
|
-
* activeBorderColor: "#2563eb",
|
|
17
|
-
* activeShadow: "0 0 0 2px rgba(37,99,235,0.2)",
|
|
18
|
-
* } } }}
|
|
19
|
-
* >
|
|
20
|
-
* <TimePicker />
|
|
21
|
-
* </ConfigProvider>
|
|
22
|
-
*/
|
|
23
|
-
export interface DsTimePickerProps extends TimePickerProps {
|
|
24
|
-
/** 기본(base) 스타일. border/background/fontSize/color 등 자유롭게 지정 */
|
|
25
|
-
style?: React.CSSProperties;
|
|
26
|
-
/** hover 상태에서 base 위에 덮어쓸 스타일 */
|
|
27
|
-
hoverStyle?: React.CSSProperties;
|
|
28
|
-
/** active(focus) 상태에서 base/hover 위에 덮어쓸 스타일 */
|
|
29
|
-
activeStyle?: React.CSSProperties;
|
|
30
|
-
}
|
|
31
|
-
declare const TimePicker: React.FC<DsTimePickerProps>;
|
|
3
|
+
declare const TimePicker: React.FC<TimePickerProps>;
|
|
32
4
|
export default TimePicker;
|