enerdot-front-system 0.0.29-beta.9 → 0.1.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/README.md +85 -3
- package/dist/index-Bp7Gu_Dn.cjs +32 -0
- package/dist/index-aVal9heD.js +842 -0
- package/dist/index.cjs.js +55 -69
- package/dist/index.es.js +2994 -3575
- package/dist/lib/components/Button/common.d.ts +4 -7
- package/dist/lib/components/Button/index.d.ts +1 -0
- package/dist/lib/components/ButtonFilter/Button/index.d.ts +1 -0
- package/dist/lib/components/ButtonFilter/CustomFilter.d.ts +2 -1
- package/dist/lib/components/ButtonFilter/index.d.ts +3 -1
- package/dist/lib/components/CheckBox/index.d.ts +3 -2
- package/dist/lib/components/Chip/index.d.ts +6 -2
- package/dist/lib/components/Chip/theme.d.ts +2 -7
- package/dist/lib/components/DateSelector/DatePicker/Buttons/ArrowButton.d.ts +4 -3
- package/dist/lib/components/DateSelector/DatePicker/Buttons/InputButton.d.ts +7 -3
- package/dist/lib/components/DateSelector/DatePicker/index.d.ts +8 -4
- package/dist/lib/components/DateSelector/DateRangePicker/InputButton.d.ts +13 -0
- package/dist/lib/components/DateSelector/DateRangePicker/index.d.ts +5 -2
- package/dist/lib/components/Divider/index.d.ts +2 -1
- package/dist/lib/components/Dropdown/Button/index.d.ts +6 -2
- package/dist/lib/components/Dropdown/OptionList/CheckboxOption.d.ts +3 -2
- package/dist/lib/components/Dropdown/OptionList/OptionSubLabelWrapper.d.ts +11 -0
- package/dist/lib/components/Dropdown/OptionList/RadioOption.d.ts +3 -2
- package/dist/lib/components/Dropdown/OptionList/SeletOption.d.ts +3 -2
- package/dist/lib/components/Dropdown/OptionList/index.d.ts +2 -1
- package/dist/lib/components/Dropdown/index.d.ts +6 -2
- package/dist/lib/components/IconButton/common.d.ts +3 -11
- package/dist/lib/components/IconButton/index.d.ts +1 -0
- package/dist/lib/components/Inputs/Input/index.d.ts +8 -2
- package/dist/lib/components/Inputs/SearchInput/index.d.ts +3 -2
- package/dist/lib/components/Pagination/index.d.ts +2 -1
- package/dist/lib/components/Radio/RadioButton/index.d.ts +2 -1
- package/dist/lib/components/Radio/RadioButtons.d.ts +4 -3
- package/dist/lib/components/Svg/Symbol/Cancel.d.ts +2 -0
- package/dist/lib/components/Textarea/index.d.ts +3 -2
- package/dist/lib/hooks/useTooltipWithPortal.d.ts +44 -0
- package/dist/lib/index.d.ts +0 -1
- package/dist/lib/server.d.ts +3 -0
- package/dist/lib/theme/color.style.d.ts +53 -0
- package/dist/lib/types/option.d.ts +5 -4
- package/dist/lib/types/theme.d.ts +4 -0
- package/dist/lib/utils/dark.d.ts +1 -0
- package/dist/server.cjs.js +1 -0
- package/dist/server.es.js +6 -0
- package/package.json +19 -7
- package/src/lib/styles/_variables.scss +108 -0
- package/src/theme.scss +104 -0
- package/dist/lib/components/DateSelector/DateRangePicker/Button.d.ts +0 -10
- package/dist/lib/hooks/useTooltip.d.ts +0 -2
- package/dist/lib/hooks/useTooltipPosition.d.ts +0 -7
|
@@ -1,11 +1,8 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
fontSize: number;
|
|
5
|
-
};
|
|
6
|
-
};
|
|
7
|
-
export declare const borderRadii: {
|
|
1
|
+
type levelType = "small" | "medium" | "large";
|
|
2
|
+
export declare const levelButtonStyles: Record<levelType, React.CSSProperties>;
|
|
3
|
+
export declare const variantToborderRadius: {
|
|
8
4
|
full: number;
|
|
9
5
|
round: number;
|
|
10
6
|
no: number;
|
|
11
7
|
};
|
|
8
|
+
export {};
|
|
@@ -10,6 +10,7 @@ export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
|
|
|
10
10
|
/**theme - secondary, text만 지원 */
|
|
11
11
|
isSelected?: boolean;
|
|
12
12
|
buttonRef?: React.RefObject<HTMLButtonElement>;
|
|
13
|
+
sx?: React.CSSProperties;
|
|
13
14
|
}
|
|
14
15
|
export declare const Button: (props: ButtonProps) => import("react/jsx-runtime").JSX.Element;
|
|
15
16
|
export default Button;
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { ButtonProps } from '../../Button';
|
|
2
2
|
interface TertiaryButtonProps extends Omit<ButtonProps, "theme"> {
|
|
3
3
|
isOpen?: boolean;
|
|
4
|
+
isError?: boolean;
|
|
4
5
|
}
|
|
5
6
|
declare const TertiaryButton: (props: TertiaryButtonProps) => import("react/jsx-runtime").JSX.Element;
|
|
6
7
|
export default TertiaryButton;
|
|
@@ -8,6 +8,7 @@ export interface CustomButtonFilterProps {
|
|
|
8
8
|
isOpen: boolean;
|
|
9
9
|
onOpenFilter: () => void;
|
|
10
10
|
onCloseFilter: () => void;
|
|
11
|
+
isError?: boolean;
|
|
11
12
|
}
|
|
12
|
-
export declare const CustomButtonFilter: ({ title, isSelected, level, tooltipWidth, children, isOpen, onOpenFilter, onCloseFilter, }: CustomButtonFilterProps) => import("react/jsx-runtime").JSX.Element;
|
|
13
|
+
export declare const CustomButtonFilter: ({ title, isSelected, level, tooltipWidth, children, isOpen, onOpenFilter, onCloseFilter, isError, }: CustomButtonFilterProps) => import("react/jsx-runtime").JSX.Element;
|
|
13
14
|
export default CustomButtonFilter;
|
|
@@ -9,6 +9,8 @@ export interface ButtonFilterProps {
|
|
|
9
9
|
onChange: (value: Options) => void;
|
|
10
10
|
isAllChecked?: boolean;
|
|
11
11
|
allCheckText?: string;
|
|
12
|
+
menuHeight?: number;
|
|
13
|
+
isError?: boolean;
|
|
12
14
|
}
|
|
13
|
-
export declare const ButtonFilter: ({ title, level, type, options, values, onChange, isAllChecked, allCheckText, }: ButtonFilterProps) => import("react/jsx-runtime").JSX.Element;
|
|
15
|
+
export declare const ButtonFilter: ({ title, level, type, options, values, onChange, isAllChecked, allCheckText, menuHeight, isError, }: ButtonFilterProps) => import("react/jsx-runtime").JSX.Element;
|
|
14
16
|
export default ButtonFilter;
|
|
@@ -1,9 +1,10 @@
|
|
|
1
|
-
|
|
1
|
+
import { Theme } from '../../types/theme';
|
|
2
|
+
export interface CheckboxProps extends Theme, React.InputHTMLAttributes<HTMLInputElement> {
|
|
2
3
|
children?: React.ReactNode;
|
|
3
4
|
onClickBox?: (info: {
|
|
4
5
|
checked?: boolean;
|
|
5
6
|
name?: string;
|
|
6
7
|
}, event?: React.MouseEvent<HTMLElement>) => void;
|
|
7
8
|
}
|
|
8
|
-
export declare const Checkbox: ({ id, checked, name, required, children, disabled, onClickBox, ...rest }: CheckboxProps) => import("react/jsx-runtime").JSX.Element;
|
|
9
|
+
export declare const Checkbox: ({ id, checked, name, required, lightTheme, children, disabled, onClickBox, ...rest }: CheckboxProps) => import("react/jsx-runtime").JSX.Element;
|
|
9
10
|
export default Checkbox;
|
|
@@ -1,11 +1,15 @@
|
|
|
1
1
|
import { default as React } from 'react';
|
|
2
2
|
import { ChipColorTheme } from './theme';
|
|
3
|
-
|
|
3
|
+
import { Theme } from '../../types/theme';
|
|
4
|
+
export interface ChipProps extends Theme, React.HTMLAttributes<HTMLDivElement> {
|
|
4
5
|
colorTheme?: keyof ChipColorTheme;
|
|
5
|
-
level?: "small" | "regular" | "large";
|
|
6
|
+
level?: "small" | "regular" | "large" | "x-large";
|
|
6
7
|
borderRadius?: "round" | "full";
|
|
7
8
|
isDot?: boolean;
|
|
8
9
|
isWhiteBg?: boolean;
|
|
10
|
+
/** * @deprecated 'gap' 속성은 더 이상 사용되지 않습니다.
|
|
11
|
+
* v0.1.0부터 내부 여백은 level로 관리됩니다.
|
|
12
|
+
*/
|
|
9
13
|
gap?: number;
|
|
10
14
|
}
|
|
11
15
|
export declare const Chip: ({ children, level, borderRadius, colorTheme, isWhiteBg, gap, isDot, }: ChipProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -2,13 +2,8 @@ type ColorObject = {
|
|
|
2
2
|
bgColor: string;
|
|
3
3
|
textColor: string;
|
|
4
4
|
};
|
|
5
|
+
type ChipBaseColor = "yellow" | "orange" | "red" | "green" | "primary" | "gray" | "cyan";
|
|
5
6
|
export type ChipColorTheme = {
|
|
6
|
-
|
|
7
|
-
orange: ColorObject;
|
|
8
|
-
red: ColorObject;
|
|
9
|
-
green: ColorObject;
|
|
10
|
-
primary: ColorObject;
|
|
11
|
-
gray: ColorObject;
|
|
7
|
+
[key in ChipBaseColor]: ColorObject;
|
|
12
8
|
};
|
|
13
|
-
export declare const colorThemes: ChipColorTheme;
|
|
14
9
|
export {};
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import { default as moment } from 'moment';
|
|
2
2
|
interface ArrowButtonProps {
|
|
3
|
-
level: "small" | "large";
|
|
3
|
+
level: "small" | "medium" | "large";
|
|
4
4
|
dateType: "day" | "week" | "month" | "quarter" | "year";
|
|
5
5
|
format: "hyphenFormat" | "dotFormat";
|
|
6
6
|
onClick: () => void;
|
|
7
7
|
disabled?: boolean;
|
|
8
|
-
date
|
|
8
|
+
date?: moment.Moment;
|
|
9
9
|
minDate?: moment.Moment;
|
|
10
10
|
maxDate?: moment.Moment;
|
|
11
11
|
onChange: (e: {
|
|
@@ -13,6 +13,7 @@ interface ArrowButtonProps {
|
|
|
13
13
|
name?: string;
|
|
14
14
|
}) => void;
|
|
15
15
|
name?: string;
|
|
16
|
+
isIcon?: boolean;
|
|
16
17
|
}
|
|
17
|
-
declare const ArrowButton: ({ level, dateType, onClick, format, disabled, date, maxDate, minDate, onChange, name, }: ArrowButtonProps) => import("react/jsx-runtime").JSX.Element;
|
|
18
|
+
declare const ArrowButton: ({ level, dateType, onClick, format, disabled, date, maxDate, minDate, onChange, name, isIcon, }: ArrowButtonProps) => import("react/jsx-runtime").JSX.Element;
|
|
18
19
|
export default ArrowButton;
|
|
@@ -1,10 +1,14 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
import { Theme } from '../../../../../../../../../../src/lib/types/theme';
|
|
2
|
+
interface InputButtonProps extends Theme {
|
|
3
|
+
level: "small" | "medium" | "large";
|
|
3
4
|
dateType: "day" | "week" | "month" | "quarter" | "year";
|
|
4
5
|
format: "hyphenFormat" | "dotFormat";
|
|
5
6
|
onClick: () => void;
|
|
6
7
|
disabled?: boolean;
|
|
7
8
|
date: moment.Moment;
|
|
9
|
+
onCancel?: () => void;
|
|
10
|
+
isError?: boolean;
|
|
11
|
+
isIcon?: boolean;
|
|
8
12
|
}
|
|
9
|
-
declare const InputButton: ({ level, dateType, onClick, format, disabled, date, }: InputButtonProps) => import("react/jsx-runtime").JSX.Element;
|
|
13
|
+
declare const InputButton: ({ level, dateType, onClick, format, disabled, date, onCancel, isError, isIcon, }: InputButtonProps) => import("react/jsx-runtime").JSX.Element;
|
|
10
14
|
export default InputButton;
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { default as moment } from 'moment';
|
|
2
|
-
|
|
3
|
-
|
|
2
|
+
import { Theme } from '../../../../../../../../../src/lib/types/theme';
|
|
3
|
+
export interface DatePickerProps extends Theme {
|
|
4
|
+
date?: moment.Moment;
|
|
4
5
|
onChange: (e: {
|
|
5
6
|
date: moment.Moment;
|
|
6
7
|
name?: string;
|
|
@@ -11,9 +12,12 @@ export interface DatePickerProps {
|
|
|
11
12
|
disabled?: boolean;
|
|
12
13
|
name?: string;
|
|
13
14
|
width?: "auto" | `${number}px` | "100%";
|
|
14
|
-
level?: "small" | "large";
|
|
15
|
+
level?: "small" | "medium" | "large";
|
|
15
16
|
format?: "hyphenFormat" | "dotFormat";
|
|
16
17
|
buttonType?: "arrow" | "input";
|
|
18
|
+
isCancelable?: boolean;
|
|
19
|
+
isError?: boolean;
|
|
20
|
+
isIcon?: boolean;
|
|
17
21
|
}
|
|
18
|
-
export declare const DatePicker: ({ date, dateType, maxDate, minDate, onChange, disabled, name, format, level, buttonType, width, }: DatePickerProps) => import("react/jsx-runtime").JSX.Element;
|
|
22
|
+
export declare const DatePicker: ({ date, dateType, maxDate, minDate, onChange, disabled, name, format, level, buttonType, width, isCancelable, isError, isIcon, }: DatePickerProps) => import("react/jsx-runtime").JSX.Element;
|
|
19
23
|
export default DatePicker;
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
interface InputButtonProps {
|
|
2
|
+
level: "small" | "medium" | "large";
|
|
3
|
+
dateType: "day" | "month" | "year";
|
|
4
|
+
format: "hyphenFormat" | "dotFormat";
|
|
5
|
+
onClick: () => void;
|
|
6
|
+
disabled?: boolean;
|
|
7
|
+
dates: [moment.Moment, moment.Moment];
|
|
8
|
+
onCancel?: () => void;
|
|
9
|
+
isError?: boolean;
|
|
10
|
+
isIcon?: boolean;
|
|
11
|
+
}
|
|
12
|
+
declare const InputButton: ({ level, dateType, onClick, format, disabled, dates, onCancel, isError, isIcon, }: InputButtonProps) => import("react/jsx-runtime").JSX.Element;
|
|
13
|
+
export default InputButton;
|
|
@@ -11,10 +11,13 @@ export interface DateRangePickerProps {
|
|
|
11
11
|
disabled?: boolean;
|
|
12
12
|
name?: string;
|
|
13
13
|
width?: "auto" | `${number}px` | "100%";
|
|
14
|
-
level?: "small" | "large";
|
|
14
|
+
level?: "small" | "medium" | "large";
|
|
15
15
|
format?: "hyphenFormat" | "dotFormat";
|
|
16
16
|
buttonType?: "arrow" | "input";
|
|
17
17
|
maxRange?: number;
|
|
18
|
+
isCancelable?: boolean;
|
|
19
|
+
isError?: boolean;
|
|
20
|
+
isIcon?: boolean;
|
|
18
21
|
}
|
|
19
|
-
export declare const DateRangePicker: ({ dates, dateType, maxDate, minDate, onChange, disabled, name, format, level, width, maxRange, }: DateRangePickerProps) => import("react/jsx-runtime").JSX.Element;
|
|
22
|
+
export declare const DateRangePicker: ({ dates, dateType, maxDate, minDate, onChange, disabled, name, format, level, width, maxRange, isCancelable, isError, isIcon, }: DateRangePickerProps) => import("react/jsx-runtime").JSX.Element;
|
|
20
23
|
export default DateRangePicker;
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
interface DividerProps {
|
|
2
2
|
size?: number;
|
|
3
3
|
direction?: "row" | "column";
|
|
4
|
+
color?: string;
|
|
4
5
|
}
|
|
5
|
-
export declare const Divider: ({ size, direction }: DividerProps) => import("react/jsx-runtime").JSX.Element;
|
|
6
|
+
export declare const Divider: ({ size, direction, color, }: DividerProps) => import("react/jsx-runtime").JSX.Element;
|
|
6
7
|
export default Divider;
|
|
@@ -1,10 +1,14 @@
|
|
|
1
|
-
|
|
1
|
+
import { Theme } from '../../../types/theme';
|
|
2
|
+
import { ButtonProps as ButtonProps } from '../../Button/index';
|
|
3
|
+
interface _ButtonProps extends Theme {
|
|
2
4
|
children?: React.ReactNode;
|
|
3
5
|
onClick?: () => void;
|
|
4
6
|
level?: "small" | "medium" | "large";
|
|
5
7
|
isOpen?: boolean;
|
|
6
8
|
width?: string;
|
|
7
9
|
disabled?: boolean;
|
|
10
|
+
isError?: boolean;
|
|
11
|
+
borderRadius?: ButtonProps["borderRadius"];
|
|
8
12
|
}
|
|
9
|
-
declare const Button: (props:
|
|
13
|
+
declare const Button: (props: _ButtonProps) => import("react/jsx-runtime").JSX.Element;
|
|
10
14
|
export default Button;
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { Option } from '../../../types/option';
|
|
2
2
|
import { DropdownOption } from '..';
|
|
3
|
-
|
|
3
|
+
import { Theme } from '../../../types/theme';
|
|
4
|
+
interface CheckboxOptionProps extends Theme {
|
|
4
5
|
option: DropdownOption;
|
|
5
6
|
values: Option[];
|
|
6
7
|
onChange: (value: Option[]) => void;
|
|
@@ -8,5 +9,5 @@ interface CheckboxOptionProps {
|
|
|
8
9
|
isSelected: boolean;
|
|
9
10
|
children: React.ReactNode;
|
|
10
11
|
}
|
|
11
|
-
declare const CheckboxOption: ({ option, values, onChange, level, isSelected, children, }: CheckboxOptionProps) => import("react/jsx-runtime").JSX.Element;
|
|
12
|
+
declare const CheckboxOption: ({ option, values, onChange, level, isSelected, children, lightTheme, }: CheckboxOptionProps) => import("react/jsx-runtime").JSX.Element;
|
|
12
13
|
export default CheckboxOption;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { SelectOptionProps } from './SeletOption';
|
|
2
|
+
/**
|
|
3
|
+
* 기존 [Radio,Select,Checkbox] Option 컴포넌트에 하단에 Sublabel추가 하기 위한 래퍼 컴포넌트.
|
|
4
|
+
*/
|
|
5
|
+
declare const OptionSubLabelWrapper: ({ option, isLarge, isSelected, children, }: {
|
|
6
|
+
option: SelectOptionProps["option"];
|
|
7
|
+
isSelected?: SelectOptionProps["isSelected"];
|
|
8
|
+
isLarge?: boolean;
|
|
9
|
+
children: React.ReactNode;
|
|
10
|
+
}) => import("react/jsx-runtime").JSX.Element;
|
|
11
|
+
export default OptionSubLabelWrapper;
|
|
@@ -1,11 +1,12 @@
|
|
|
1
1
|
import { Option } from '../../../types/option';
|
|
2
2
|
import { DropdownOption } from '..';
|
|
3
|
-
|
|
3
|
+
import { Theme } from '../../../types/theme';
|
|
4
|
+
interface RadioOptionProps extends Theme {
|
|
4
5
|
option: DropdownOption;
|
|
5
6
|
onChange: (value: Option[]) => void;
|
|
6
7
|
level: "small" | "medium" | "large";
|
|
7
8
|
isSelected: boolean;
|
|
8
9
|
children: React.ReactNode;
|
|
9
10
|
}
|
|
10
|
-
declare const RadioOption: ({ option, onChange, level, isSelected, children, }: RadioOptionProps) => import("react/jsx-runtime").JSX.Element;
|
|
11
|
+
declare const RadioOption: ({ lightTheme, option, onChange, level, isSelected, children, }: RadioOptionProps) => import("react/jsx-runtime").JSX.Element;
|
|
11
12
|
export default RadioOption;
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { Option } from '../../../types/option';
|
|
2
2
|
import { DropdownOption } from '..';
|
|
3
|
-
|
|
3
|
+
import { Theme } from '../../../types/theme';
|
|
4
|
+
export interface SelectOptionProps extends Theme {
|
|
4
5
|
option: DropdownOption;
|
|
5
6
|
onChange: (value: Option[]) => void;
|
|
6
7
|
level: "small" | "medium" | "large";
|
|
@@ -8,5 +9,5 @@ interface SelectOptionProps {
|
|
|
8
9
|
onHideTooltip: () => void;
|
|
9
10
|
children: React.ReactNode;
|
|
10
11
|
}
|
|
11
|
-
declare const SelectOption: ({ option, onChange, level, isSelected, onHideTooltip, children, }: SelectOptionProps) => import("react/jsx-runtime").JSX.Element;
|
|
12
|
+
declare const SelectOption: ({ lightTheme, option, onChange, level, isSelected, onHideTooltip, children, }: SelectOptionProps) => import("react/jsx-runtime").JSX.Element;
|
|
12
13
|
export default SelectOption;
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { Option } from '../../../types/option';
|
|
2
2
|
import { DropdownOption } from '..';
|
|
3
|
-
|
|
3
|
+
import { Theme } from '../../../types/theme';
|
|
4
|
+
interface OptionListProps extends Theme {
|
|
4
5
|
options: DropdownOption[];
|
|
5
6
|
values: Option[];
|
|
6
7
|
onChange: (value: Option[]) => void;
|
|
@@ -1,12 +1,14 @@
|
|
|
1
1
|
import { Option, Options } from '../../types/option';
|
|
2
|
+
import { Theme } from '../../types/theme';
|
|
2
3
|
import { ButtonProps } from '../Button';
|
|
3
4
|
export interface DropdownOption extends Option {
|
|
4
5
|
element?: React.ReactNode;
|
|
5
6
|
}
|
|
6
|
-
export interface DropdownProps {
|
|
7
|
+
export interface DropdownProps extends Theme {
|
|
7
8
|
initialPlaceholder: string;
|
|
8
9
|
level?: ButtonProps["level"];
|
|
9
10
|
type?: "checkbox" | "radio" | "select";
|
|
11
|
+
borderRadius?: ButtonProps["borderRadius"];
|
|
10
12
|
options: DropdownOption[];
|
|
11
13
|
values: Options;
|
|
12
14
|
onChange: (value: Options) => void;
|
|
@@ -15,6 +17,8 @@ export interface DropdownProps {
|
|
|
15
17
|
unit?: string;
|
|
16
18
|
width?: "auto" | `${number}px` | "100%";
|
|
17
19
|
disabled?: boolean;
|
|
20
|
+
menuHeight?: number;
|
|
21
|
+
isError?: boolean;
|
|
18
22
|
}
|
|
19
|
-
export declare const Dropdown: ({ initialPlaceholder, level, type, options, values, onChange, isAllChecked, allCheckText, unit, width, disabled, }: DropdownProps) => import("react/jsx-runtime").JSX.Element;
|
|
23
|
+
export declare const Dropdown: ({ initialPlaceholder, level, type, lightTheme, options, values, onChange, isAllChecked, allCheckText, unit, width, disabled, menuHeight, isError, borderRadius, }: DropdownProps) => import("react/jsx-runtime").JSX.Element;
|
|
20
24
|
export default Dropdown;
|
|
@@ -1,11 +1,3 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
};
|
|
5
|
-
medium: {
|
|
6
|
-
padding: number;
|
|
7
|
-
};
|
|
8
|
-
large: {
|
|
9
|
-
padding: number;
|
|
10
|
-
};
|
|
11
|
-
};
|
|
1
|
+
type variants = "small" | "medium" | "large";
|
|
2
|
+
export declare const levelButtonStyles: Record<variants, React.CSSProperties>;
|
|
3
|
+
export {};
|
|
@@ -5,6 +5,7 @@ export interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonEl
|
|
|
5
5
|
baseColor?: "primary" | "green" | "red" | "orange" | "yellow" | "gray";
|
|
6
6
|
isRound?: boolean;
|
|
7
7
|
buttonRef?: React.RefObject<HTMLButtonElement>;
|
|
8
|
+
sx?: React.CSSProperties;
|
|
8
9
|
}
|
|
9
10
|
export declare const IconButton: (props: IconButtonProps) => import("react/jsx-runtime").JSX.Element;
|
|
10
11
|
export default IconButton;
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { ReactNode } from 'react';
|
|
2
|
-
|
|
2
|
+
import { Theme } from '../../../types/theme';
|
|
3
|
+
export interface InputProps extends Theme, React.InputHTMLAttributes<HTMLInputElement> {
|
|
3
4
|
level?: "large" | "medium" | "small";
|
|
4
5
|
width?: string;
|
|
5
6
|
unit?: string | ReactNode;
|
|
@@ -9,6 +10,11 @@ export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement>
|
|
|
9
10
|
guideMessage?: string;
|
|
10
11
|
onCancel?: (name?: string) => void;
|
|
11
12
|
textAlign?: "left" | "right";
|
|
13
|
+
isShowCount?: boolean;
|
|
14
|
+
isError?: boolean;
|
|
15
|
+
isSuccess?: boolean;
|
|
16
|
+
decimalLimits?: number;
|
|
17
|
+
sx?: React.CSSProperties;
|
|
12
18
|
}
|
|
13
|
-
export declare const Input: (
|
|
19
|
+
export declare const Input: import('react').ForwardRefExoticComponent<InputProps & import('react').RefAttributes<HTMLInputElement>>;
|
|
14
20
|
export default Input;
|
|
@@ -1,8 +1,9 @@
|
|
|
1
|
-
|
|
1
|
+
import { Theme } from '../../../types/theme';
|
|
2
|
+
export interface SearchInputProps extends Theme, React.InputHTMLAttributes<HTMLInputElement> {
|
|
2
3
|
width?: string;
|
|
3
4
|
level?: "small" | "medium" | "large";
|
|
4
5
|
onCancel?: (name?: string) => void;
|
|
5
6
|
textAlign?: "left" | "right";
|
|
6
7
|
}
|
|
7
|
-
export declare const SearchInput: ({ width, level, value, disabled, onCancel, textAlign, ...props }: SearchInputProps) => JSX.Element;
|
|
8
|
+
export declare const SearchInput: ({ width, level, value, disabled, onCancel, lightTheme, textAlign, ...props }: SearchInputProps) => JSX.Element;
|
|
8
9
|
export default SearchInput;
|
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
import { Option, Options } from '../../types/option';
|
|
2
|
-
|
|
2
|
+
import { Theme } from '../../types/theme';
|
|
3
|
+
export interface RadioButtonsProps extends Theme {
|
|
3
4
|
options: Options;
|
|
4
|
-
value: Option;
|
|
5
|
+
value: Option | null;
|
|
5
6
|
onClick: (value: Option) => void;
|
|
6
7
|
disabled?: boolean;
|
|
7
8
|
}
|
|
8
|
-
export declare const RadioButtons: ({ options, value, onClick, disabled, }: RadioButtonsProps) => import("react/jsx-runtime").JSX.Element;
|
|
9
|
+
export declare const RadioButtons: ({ options, value, onClick, disabled, lightTheme, }: RadioButtonsProps) => import("react/jsx-runtime").JSX.Element;
|
|
9
10
|
export default RadioButtons;
|
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
|
|
2
2
|
width?: string;
|
|
3
3
|
label?: string;
|
|
4
|
-
|
|
4
|
+
errorMessage?: string;
|
|
5
5
|
isShutdown?: boolean;
|
|
6
6
|
isRequired?: boolean;
|
|
7
|
+
isError?: boolean;
|
|
7
8
|
}
|
|
8
|
-
export declare const Textarea: ({
|
|
9
|
+
export declare const Textarea: ({ errorMessage, width, label, isShutdown, value, disabled, isRequired, isError, ...props }: TextareaProps) => JSX.Element;
|
|
9
10
|
export default Textarea;
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
export interface UseMenuWithPortalOptions {
|
|
2
|
+
containerRef: React.MutableRefObject<HTMLElement | null>;
|
|
3
|
+
menuRef: React.MutableRefObject<HTMLElement | null>;
|
|
4
|
+
minWidth?: number;
|
|
5
|
+
estimatedMenuHeight?: number;
|
|
6
|
+
gap?: number;
|
|
7
|
+
}
|
|
8
|
+
export interface UseMenuWithPortalReturn {
|
|
9
|
+
isOpen: boolean;
|
|
10
|
+
setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
|
|
11
|
+
menuStyle: React.CSSProperties;
|
|
12
|
+
}
|
|
13
|
+
/**
|
|
14
|
+
* createPortal을 사용하는 툴팁을 위한 통합 훅
|
|
15
|
+
* 외부 클릭 감지와 위치 계산 기능을 모두 제공합니다.
|
|
16
|
+
*
|
|
17
|
+
* @param options - 툴팁 옵션
|
|
18
|
+
* @returns isOpen, setOpen, menuStyle을 반환
|
|
19
|
+
*
|
|
20
|
+
* @example
|
|
21
|
+
* ```tsx
|
|
22
|
+
* const containerRef = useRef<HTMLDivElement>(null);
|
|
23
|
+
* const menuRef = useRef<HTMLDivElement>(null);
|
|
24
|
+
*
|
|
25
|
+
* const { isOpen, setOpen, menuStyle } = useMenuWithPortal({
|
|
26
|
+
* containerRef,
|
|
27
|
+
* menuRef,
|
|
28
|
+
* minWidth: 300,
|
|
29
|
+
* estimatedMenuHeight: 510,
|
|
30
|
+
* gap: 8,
|
|
31
|
+
* });
|
|
32
|
+
*
|
|
33
|
+
* return (
|
|
34
|
+
* <>
|
|
35
|
+
* <div ref={containerRef} onClick={() => setOpen(true)}>...</div>
|
|
36
|
+
* {isOpen && createPortal(
|
|
37
|
+
* <div ref={menuRef} style={menuStyle}>...</div>,
|
|
38
|
+
* document.body
|
|
39
|
+
* )}
|
|
40
|
+
* </>
|
|
41
|
+
* );
|
|
42
|
+
* ```
|
|
43
|
+
*/
|
|
44
|
+
export declare const useMenuWithPortal: ({ containerRef, menuRef, minWidth, estimatedMenuHeight, gap, }: UseMenuWithPortalOptions) => UseMenuWithPortalReturn;
|
package/dist/lib/index.d.ts
CHANGED
|
@@ -19,6 +19,5 @@ export * from './components/Radio/RadioButtons';
|
|
|
19
19
|
export * from './components/Segment';
|
|
20
20
|
export * from './components/Tab';
|
|
21
21
|
export * from './components/Textarea';
|
|
22
|
-
export { useTooltipPosition } from './hooks/useTooltipPosition';
|
|
23
22
|
export { useVirtualScroll } from './hooks/useVirtualScroll';
|
|
24
23
|
export * from './theme/color.style';
|
|
@@ -2,6 +2,7 @@ export declare const themeColors: ThemeColors;
|
|
|
2
2
|
export interface ThemeColors {
|
|
3
3
|
white: string;
|
|
4
4
|
black: string;
|
|
5
|
+
dark_black: string;
|
|
5
6
|
gray50: string;
|
|
6
7
|
gray100: string;
|
|
7
8
|
gray200: string;
|
|
@@ -46,4 +47,56 @@ export interface ThemeColors {
|
|
|
46
47
|
yellow300: string;
|
|
47
48
|
yellow400: string;
|
|
48
49
|
yellow500: string;
|
|
50
|
+
dark_gray50: string;
|
|
51
|
+
dark_gray100: string;
|
|
52
|
+
dark_gray200: string;
|
|
53
|
+
dark_gray250: string;
|
|
54
|
+
dark_gray300: string;
|
|
55
|
+
dark_gray400: string;
|
|
56
|
+
dark_gray500: string;
|
|
57
|
+
dark_gray600: string;
|
|
58
|
+
dark_gray700: string;
|
|
59
|
+
dark_gray750: string;
|
|
60
|
+
dark_gray800: string;
|
|
61
|
+
dark_gray850: string;
|
|
62
|
+
dark_gray900: string;
|
|
63
|
+
dark_blue100: string;
|
|
64
|
+
dark_blue200: string;
|
|
65
|
+
dark_blue300: string;
|
|
66
|
+
dark_blue400: string;
|
|
67
|
+
dark_blue500: string;
|
|
68
|
+
dark_blue600: string;
|
|
69
|
+
dark_blue700: string;
|
|
70
|
+
dark_blue800: string;
|
|
71
|
+
dark_blue900: string;
|
|
72
|
+
dark_cyan50: string;
|
|
73
|
+
dark_cyan100: string;
|
|
74
|
+
dark_cyan200: string;
|
|
75
|
+
dark_cyan300: string;
|
|
76
|
+
dark_cyan400: string;
|
|
77
|
+
dark_cyan500: string;
|
|
78
|
+
dark_red50: string;
|
|
79
|
+
dark_red100: string;
|
|
80
|
+
dark_red200: string;
|
|
81
|
+
dark_red300: string;
|
|
82
|
+
dark_red400: string;
|
|
83
|
+
dark_red500: string;
|
|
84
|
+
dark_green50: string;
|
|
85
|
+
dark_green100: string;
|
|
86
|
+
dark_green200: string;
|
|
87
|
+
dark_green300: string;
|
|
88
|
+
dark_green400: string;
|
|
89
|
+
dark_green500: string;
|
|
90
|
+
dark_yellow50: string;
|
|
91
|
+
dark_yellow100: string;
|
|
92
|
+
dark_yellow200: string;
|
|
93
|
+
dark_yellow300: string;
|
|
94
|
+
dark_yellow400: string;
|
|
95
|
+
dark_yellow500: string;
|
|
96
|
+
dark_orange50: string;
|
|
97
|
+
dark_orange100: string;
|
|
98
|
+
dark_orange200: string;
|
|
99
|
+
dark_orange300: string;
|
|
100
|
+
dark_orange400: string;
|
|
101
|
+
dark_orange500: string;
|
|
49
102
|
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const setDarkMode: (isDark: boolean) => void;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-Bp7Gu_Dn.cjs");exports.Chip=e.Chip;exports.Divider=e.Divider;exports.themeColors=e.themeColors;
|