@croquiscom/pds 16.56.0 → 16.56.1

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.
Files changed (29) hide show
  1. package/package.json +1 -1
  2. package/pds-skills/SKILL.md +3 -3
  3. package/pds-skills/resources/components/component-banner.props.txt +1 -1
  4. package/pds-skills/resources/components/component-button-accordionbutton.props.txt +1 -1
  5. package/pds-skills/resources/components/component-button-button.props.txt +1 -1
  6. package/pds-skills/resources/components/component-button-iconbutton.props.txt +1 -1
  7. package/pds-skills/resources/components/component-button-popoverbutton.props.txt +1 -1
  8. package/pds-skills/resources/components/component-chip-inputchip.props.txt +1 -1
  9. package/pds-skills/resources/components/component-chipinput.props.txt +1 -1
  10. package/pds-skills/resources/components/component-colorpicker.props.txt +1 -1
  11. package/pds-skills/resources/components/component-control-radio.props.txt +1 -1
  12. package/pds-skills/resources/components/component-control-radiogroup-boxradio.props.txt +1 -1
  13. package/pds-skills/resources/components/component-control-radiogroup-radio.props.txt +1 -1
  14. package/pds-skills/resources/components/component-control-segmentedcontrol.props.txt +1 -1
  15. package/pds-skills/resources/components/component-datepickerv2-datepickerv2.props.txt +1 -1
  16. package/pds-skills/resources/components/component-dropdown.props.txt +1 -1
  17. package/pds-skills/resources/components/component-dropdownfilter.props.txt +2 -2
  18. package/pds-skills/resources/components/component-dropdowninput.props.txt +3 -3
  19. package/pds-skills/resources/components/component-dropdownmultiselect.props.txt +3 -3
  20. package/pds-skills/resources/components/component-input.props.txt +1 -1
  21. package/pds-skills/resources/components/component-inputstepper.props.txt +1 -1
  22. package/pds-skills/resources/components/component-modal-alertmodal.props.txt +1 -1
  23. package/pds-skills/resources/components/component-modal-basicmodal.props.txt +1 -1
  24. package/pds-skills/resources/components/component-modal-confirmmodal.props.txt +2 -2
  25. package/pds-skills/resources/components/component-modal-floatingmodal.props.txt +1 -1
  26. package/pds-skills/resources/components/component-numericinput.props.txt +1 -1
  27. package/pds-skills/resources/components/component-timepicker.props.txt +1 -1
  28. package/pds-skills/resources/components/component-timerangepicker.props.txt +4 -4
  29. package/pds-skills/resources/components/intro.txt +1 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@croquiscom/pds",
3
- "version": "16.56.0",
3
+ "version": "16.56.1",
4
4
  "description": "Design system for Zigzag's Partner Center",
5
5
  "main": "./dist/index.js",
6
6
  "module": "./dist/index.es.js",
@@ -1,6 +1,6 @@
1
1
  ---
2
2
  name: pds
3
- description: Partner Design System (PDS) React 컴포넌트 라이브러리 사용 가이드. 다음 상황에서 이 스킬을 활성화하라: (1) @croquiscom/pds import가 있는 코드 작성/수정 시, (2) React UI 컴포넌트 구현 시 PDS 사용 여부 확인, (3) Modal, DataTable, Button, Stack 등 PDS 컴포넌트 props 검증 필요 시, (4) semantic_colors, spacing 등 Foundation 토큰 사용 시. PDS는 다른 라이브러리(MUI, Ant Design, Chakra)와 props 네이밍이 다르므로 이 문서의 Naming Differences 테이블을 반드시 따르라.
3
+ description: "Partner Design System (PDS) React 컴포넌트 라이브러리 사용 가이드. 다음 상황에서 이 스킬을 활성화하라 - (1) @croquiscom/pds import가 있는 코드 작성/수정 시, (2) React UI 컴포넌트 구현 시 PDS 사용 여부 확인, (3) Modal, DataTable, Button, Stack 등 PDS 컴포넌트 props 검증 필요 시, (4) semantic_colors, spacing 등 Foundation 토큰 사용 시. PDS는 다른 라이브러리(MUI, Ant Design, Chakra)와 props 네이밍이 다르므로 이 문서의 Naming Differences 테이블을 반드시 따르라."
4
4
  ---
5
5
 
6
6
  # PDS Design System Skills
@@ -197,5 +197,5 @@ import { semantic_colors, spacing, shapes } from '@croquiscom/pds';
197
197
 
198
198
  ---
199
199
 
200
- **문서 버전**: v16.56.0
201
- **마지막 업데이트**: 2026-04-08
200
+ **문서 버전**: v16.56.1
201
+ **마지막 업데이트**: 2026-04-23
@@ -7,7 +7,7 @@
7
7
  |------|------|----------|---------|-------------|
8
8
  | `className` | `string | undefined` | No | | |
9
9
  | `kind` | `undefined "neutral" "info" "error" "warning" "success"` | No | info | |
10
- | `size` | `undefined "small" "medium" "xsmall"` | No | medium | |
10
+ | `size` | `undefined "xsmall" "small" "medium"` | No | medium | |
11
11
  | `direction` | `undefined "horizontal" "vertical"` | No | horizontal | |
12
12
  | `iconComponent` | `ComponentType<IconProps> | undefined` | No | | title 좌측에 렌더링 될 아이콘 요소 - title이 없을 경우 렌더되지 않습니다. - Icon 컴포넌트 color props가 있더라도 kind 따라 currentColor가 지정됩니다. - Icon 컴포넌트 size props가 있더라도 Icon 사이즈는 banner size 'medium'일경우 16, 'small'일경우 12로 고정됩니다. |
13
13
  | `showIcon` | `boolean | undefined` | No | true | |
@@ -5,7 +5,7 @@
5
5
 
6
6
  | Name | Type | Required | Default | Description |
7
7
  |------|------|----------|---------|-------------|
8
- | `size` | `undefined "medium" "xsmall"` | No | medium | |
8
+ | `size` | `undefined "xsmall" "medium"` | No | medium | |
9
9
  | `leftAddon` | `ReactNode` | No | | Label 좌측 렌더링될 Addon 요소 |
10
10
  | `opened` | `boolean | undefined` | No | | Label 우측 화살표 오픈 상태 여부 |
11
11
  | `fill` | `boolean | undefined` | No | false | 너비 100% 사용 여부 |
@@ -7,7 +7,7 @@
7
7
  |------|------|----------|---------|-------------|
8
8
  | `fill` | `boolean | undefined` | No | | |
9
9
  | `kind` | `undefined "primary" "secondary" "black" "negative" "outlined_primary" "outlined_secondary" "outlined_black" "outlined_negative"` | No | secondary | |
10
- | `size` | `undefined "medium" "large" "xsmall" "xlarge" "xxlarge"` | No | medium | |
10
+ | `size` | `undefined "xsmall" "medium" "large" "xlarge" "xxlarge"` | No | medium | |
11
11
  | `loading` | `boolean | undefined` | No | false | |
12
12
  | `startIcon` | `ReactElement<IconProps, string | JSXElementConstructor<any>> | undefined` | No | | 버튼 좌측 영역에 렌더링 될 아이콘 요소 - Icon 컴포넌트 color props가 있더라도 kind 따라 currentColor가 지정됩니다. - Icon 컴포넌트 size props가 있더라도 Icon 사이즈는 ButtonSize에 따라 고정됩니다. |
13
13
  | `endIcon` | `ReactElement<IconProps, string | JSXElementConstructor<any>> | undefined` | No | | 버튼 우측 영역에 렌더링 될 아이콘 요소 - Icon 컴포넌트 color props가 있더라도 kind 따라 currentColor가 지정됩니다. - Icon 컴포넌트 size props가 있더라도 Icon 사이즈는 ButtonSize에 따라 고정됩니다. |
@@ -7,7 +7,7 @@
7
7
  |------|------|----------|---------|-------------|
8
8
  | `kind` | `undefined "outlined_primary" "outlined_secondary" "outlined_negative"` | No | outlined_secondary | shape 속성이 'circle'의 경우 적용되지 않습니다. |
9
9
  | `icon` | `ReactElement<IconProps, string | JSXElementConstructor<any>> | undefined` | No | | 렌더링 될 아이콘 요소 - Icon 컴포넌트 color props가 없다면 currentColor가 지정됩니다. |
10
- | `size` | `undefined "medium" "large" "xsmall" "xlarge" "xxlarge" "xxsmall"` | No | medium | |
10
+ | `size` | `undefined "xsmall" "medium" "large" "xlarge" "xxlarge" "xxsmall"` | No | medium | |
11
11
  | `shape` | `undefined "rectangle" "circle"` | No | rectangle | |
12
12
  | `fill` | `boolean | undefined` | No | | |
13
13
  | `type` | `undefined "submit" "reset" "button"` | No | button | |
@@ -6,7 +6,7 @@
6
6
  | Name | Type | Required | Default | Description |
7
7
  |------|------|----------|---------|-------------|
8
8
  | `useIconButton` | `boolean | undefined` | No | false | |
9
- | `size` | `undefined "medium" "large" "xsmall"` | No | 'medium' | |
9
+ | `size` | `undefined "xsmall" "medium" "large"` | No | 'medium' | |
10
10
  | `autoPlacement` | `boolean | undefined` | No | true | floating 요소가 reference 영역을 넘어갈 경우 자동 위치 처리 사용 유무 - 자동 위치 상/하만 적용됩니다. |
11
11
  | `zIndex` | `number | undefined` | No | getZIndex('dropdown') | |
12
12
  | `optionsMatchRefWidth` | `boolean | undefined` | No | false | |
@@ -5,6 +5,6 @@
5
5
 
6
6
  | Name | Type | Required | Default | Description |
7
7
  |------|------|----------|---------|-------------|
8
- | `size` | `undefined "medium" "large" "xsmall"` | No | medium | |
8
+ | `size` | `undefined "xsmall" "medium" "large"` | No | medium | |
9
9
  | `canDelete` | `boolean | undefined` | No | true | |
10
10
  | `onDelete` | `(() => void) | undefined` | No | | |
@@ -8,7 +8,7 @@
8
8
  | `value` | `ChipInputValue[] | undefined` | No | | |
9
9
  | `disabled` | `boolean | undefined` | No | | |
10
10
  | `placeholder` | `string | undefined` | No | | |
11
- | `size` | `undefined "medium" "large" "xsmall"` | No | medium | |
11
+ | `size` | `undefined "xsmall" "medium" "large"` | No | medium | |
12
12
  | `status` | `undefined "info" "error" "success"` | No | info | `error` 이외에 상태는 별도로 UI상 표시되지 않습니다. |
13
13
  | `wrap` | `undefined "wrap" "nowrap"` | No | nowrap | 칩 목록은 한 줄로 제한하거나 개행되도록 할 수 있습니다. - `nowrap`: 칩이 인풋의 너비를 초과하면 수평으로 스크롤됩니다. - `wrap`: 칩이 인풋의 너비를 초과하면 수직으로 스크롤됩니다. |
14
14
  | `width` | `number | undefined` | No | | |
@@ -9,7 +9,7 @@
9
9
  | `value` | `string | undefined` | No | defaultValue || '' | hex color code (ex: #FFFFFF) |
10
10
  | `onChange` | `(code: string) => void` | Yes | | @param code hex color code (ex: FFFFFF, #FFFFFF6D) |
11
11
  | `disabled` | `boolean | undefined` | No | | |
12
- | `size` | `undefined "medium" "xsmall" "xxsmall"` | No | 'medium' | |
12
+ | `size` | `undefined "xsmall" "medium" "xxsmall"` | No | 'medium' | |
13
13
  | `layout` | `undefined "preset" "custom"` | No | custom | preset props이 없으면 layout=preset이 적용되지 않습니다. |
14
14
  | `alpha` | `boolean | undefined` | No | | |
15
15
  | `hueOnly` | `boolean | undefined` | No | false | |
@@ -10,4 +10,4 @@
10
10
  | `className` | `string | undefined` | No | | |
11
11
  | `unstableFocusVisible` | `boolean | undefined` | No | | react-aria useFocusRing isFocusVisible 반환값을 제어할 수 있습니다. |
12
12
  | `radioItemType` | `undefined "default" "box"` | No | default | |
13
- | `size` | `undefined "small" "medium" "large" "xsmall"` | No | medium | radioItemType - default일 경우 'small', 'medium', 'large'만 적용되며 default값은 'medium'입니다. radioItemType - box일 경우 'xsmall', 'medium', 'large'만 적용되며 default값은 'medium'입니다. |
13
+ | `size` | `undefined "xsmall" "small" "medium" "large"` | No | medium | radioItemType - default일 경우 'small', 'medium', 'large'만 적용되며 default값은 'medium'입니다. radioItemType - box일 경우 'xsmall', 'medium', 'large'만 적용되며 default값은 'medium'입니다. |
@@ -18,5 +18,5 @@
18
18
  | `keyExtractor` | `((item: RadioItem<RadioValue>, index: number) => string | number) | undefined` | No | | |
19
19
  | `onChange` | `((value: RadioValue) => void) | undefined` | No | | |
20
20
  | `unstableFocusVisible` | `boolean | undefined` | No | | react-aria useFocusRing isFocusVisible 반환값을 제어할 수 있습니다. |
21
- | `size` | `undefined "small" "medium" "large" "xsmall"` | No | | radioItemType - default일 경우 'small', 'medium', 'large'만 적용되며 default값은 'medium'입니다. radioItemType - box일 경우 'xsmall', 'medium', 'large'만 적용되며 default값은 'medium'입니다. |
21
+ | `size` | `undefined "xsmall" "small" "medium" "large"` | No | | radioItemType - default일 경우 'small', 'medium', 'large'만 적용되며 default값은 'medium'입니다. radioItemType - box일 경우 'xsmall', 'medium', 'large'만 적용되며 default값은 'medium'입니다. |
22
22
  | `ref` | `Ref<RadioGroupInstance<RadioValue>> | undefined` | No | | |
@@ -18,5 +18,5 @@
18
18
  | `keyExtractor` | `((item: RadioItem<RadioValue>, index: number) => string | number) | undefined` | No | | |
19
19
  | `onChange` | `((value: RadioValue) => void) | undefined` | No | | |
20
20
  | `unstableFocusVisible` | `boolean | undefined` | No | | react-aria useFocusRing isFocusVisible 반환값을 제어할 수 있습니다. |
21
- | `size` | `undefined "small" "medium" "large" "xsmall"` | No | | radioItemType - default일 경우 'small', 'medium', 'large'만 적용되며 default값은 'medium'입니다. radioItemType - box일 경우 'xsmall', 'medium', 'large'만 적용되며 default값은 'medium'입니다. |
21
+ | `size` | `undefined "xsmall" "small" "medium" "large"` | No | | radioItemType - default일 경우 'small', 'medium', 'large'만 적용되며 default값은 'medium'입니다. radioItemType - box일 경우 'xsmall', 'medium', 'large'만 적용되며 default값은 'medium'입니다. |
22
22
  | `ref` | `Ref<RadioGroupInstance<RadioValue>> | undefined` | No | | |
@@ -8,7 +8,7 @@
8
8
  | `className` | `string | undefined` | No | | |
9
9
  | `defaultValue` | `string | undefined` | No | | |
10
10
  | `value` | `string | undefined` | No | | |
11
- | `size` | `undefined "medium" "large" "xsmall"` | No | medium | |
11
+ | `size` | `undefined "xsmall" "medium" "large"` | No | medium | |
12
12
  | `items` | `SegmentedControlOptionType[]` | Yes | | |
13
13
  | `width` | `undefined "fill" "auto"` | No | auto | |
14
14
  | `disabled` | `boolean | undefined` | No | false | |
@@ -11,7 +11,7 @@
11
11
  | `unit` | `undefined "month" "week" "day" "decade" "year" "minute" "second"` | No | day | 달력의 최소 시간 단위를 설정합니다. 시간을 선택하려면 "minute" 또는 "second"를 지정합니다. |
12
12
  | `target` | `undefined "all" "from" "to"` | No | | 달력이 편집할 수 있는 항목을 지정합니다. - 지정하지 않으면 range 입력으로 구성되어 시작일, 종료일을 차례대로 선택할 수 있습니다. - "from"으로 지정하면 range 입력에서 시작일만 선택할 수 있고, 종료일은 비활성화됩니다. - "to"로 지정하면 range 입력에서 종료일만 선택할 수 있고, 시작일은 비활성화됩니다. - "all"로 지정하면 단일 날짜 선택으로 인식해서, 시작일/종료일을 모두 한 번에 선택합니다. |
13
13
  | `width` | `CSSValueWithLength | undefined` | No | 100% | Input 너비를 지정할 수 있습니다. |
14
- | `size` | `undefined "medium" "large" "xsmall"` | No | medium | Input size를 지정할 수 있습니다. |
14
+ | `size` | `undefined "xsmall" "medium" "large"` | No | medium | Input size를 지정할 수 있습니다. |
15
15
  | `error` | `boolean | undefined` | No | | Input의 에러 표시 여부를 지정합니다. |
16
16
  | `disabled` | `boolean | undefined` | No | | |
17
17
  | `className` | `string | undefined` | No | | |
@@ -9,7 +9,7 @@
9
9
  | `width` | `CSSValueWithLength | undefined` | No | | |
10
10
  | `maxHeight` | `number | undefined` | No | 400 | |
11
11
  | `zIndex` | `number | undefined` | No | getZIndex('dropdown') | |
12
- | `size` | `undefined "medium" "large" "xsmall"` | No | 'medium' | |
12
+ | `size` | `undefined "xsmall" "medium" "large"` | No | 'medium' | |
13
13
  | `labelHeight` | `CSSValueWithLength | undefined` | No | | |
14
14
  | `optionItemHeight` | `number | undefined` | No | | |
15
15
  | `disabled` | `boolean | undefined` | No | | |
@@ -7,7 +7,7 @@
7
7
  |------|------|----------|---------|-------------|
8
8
  | `value` | `OptionValue[] | undefined` | No | | |
9
9
  | `label` | `string` | Yes | | |
10
- | `size` | `undefined "medium" "large" "xsmall"` | No | 'medium' | |
10
+ | `size` | `undefined "xsmall" "medium" "large"` | No | 'medium' | |
11
11
  | `defaultValues` | `OptionValue[] | undefined` | No | [] | DropDownFilter 초기값 초기화시, DefaultValues가 있을 경우 DefaultValues를 사용하고, 없을 경우 빈 배열을 사용합니다. |
12
12
  | `selectionGroup` | `DropdownFilterGroupOption<OptionValue>[] | undefined` | No | [] | 옵션을 selection 그룹으로 묶을때 사용합니다. selectionGroup이 있을 경우 options는 무시됩니다. |
13
13
  | `options` | `DropdownFilterOption<OptionValue>[] | undefined` | No | [] | 각 옵션 값들은 라벨 앞 자동으로 체크박스가 생성되며, 선택된 옵션값은 체크박스로 표시됩니다. |
@@ -23,10 +23,10 @@
23
23
  | `className` | `string | undefined` | No | | |
24
24
  | `disabled` | `boolean | undefined` | No | | |
25
25
  | `status` | `undefined "error"` | No | | |
26
+ | `width` | `CSSValueWithLength | undefined` | No | | |
26
27
  | `zIndex` | `number | undefined` | No | getZIndex('dropdown') | |
27
28
  | `autoPlacement` | `boolean | undefined` | No | true | floating 요소가 reference 영역을 넘어갈 경우 자동 위치 처리 사용 유무 - 자동 위치 상/하만 적용됩니다. |
28
29
  | `maxHeight` | `number | undefined` | No | DEFAULT_DROPDOWN_MAX_HEIGHT | |
29
- | `width` | `CSSValueWithLength | undefined` | No | | |
30
30
  | `keyExtractor` | `((item: DropdownOption<OptionValue>, index: number) => string | number) | undefined` | No | | |
31
31
  | `labelHeight` | `CSSValueWithLength | undefined` | No | | |
32
32
  | `optionItemHeight` | `number | undefined` | No | | |
@@ -14,14 +14,14 @@
14
14
  | `options` | `DropdownInputOption<OptionValue>[]` | Yes | | |
15
15
  | `keyExtractor` | `((item: DropdownInputOption<OptionValue>, index: number) => string | number) | undefined` | No | | |
16
16
  | `optionFilter` | `((inputValue: string, item: DropdownInputOption<OptionValue>, index: number) => boolean) | undefined` | No | | |
17
- | `size` | `undefined "medium" "large" "xsmall"` | No | 'medium' | |
17
+ | `size` | `undefined "xsmall" "medium" "large"` | No | 'medium' | |
18
18
  | `disabled` | `boolean | undefined` | No | | |
19
19
  | `value` | `string | number | undefined` | No | | |
20
20
  | `status` | `undefined "error"` | No | | |
21
- | `zIndex` | `number | undefined` | No | getZIndex('dropdown') | |
22
- | `autoPlacement` | `boolean | undefined` | No | true | floating 요소가 reference 영역을 넘어갈 경우 자동 위치 처리 사용 유무 - 자동 위치 상/하만 적용됩니다. |
23
21
  | `placeholder` | `string | undefined` | No | | |
24
22
  | `width` | `CSSValueWithLength | undefined` | No | | |
23
+ | `zIndex` | `number | undefined` | No | getZIndex('dropdown') | |
24
+ | `autoPlacement` | `boolean | undefined` | No | true | floating 요소가 reference 영역을 넘어갈 경우 자동 위치 처리 사용 유무 - 자동 위치 상/하만 적용됩니다. |
25
25
  | `optionItemHeight` | `number | undefined` | No | | |
26
26
  | `enableVirtualScroll` | `boolean | undefined` | No | false | |
27
27
  | `unstableFocusVisible` | `boolean | undefined` | No | | react-aria useFocusRing isFocusVisible 반환값을 제어할 수 있습니다. |
@@ -11,14 +11,14 @@
11
11
  | `allCheck` | `boolean | undefined` | No | false | DropdownFilter Option들의 전체 선택 여부 |
12
12
  | `onChange` | `((value: OptionValue[]) => void) | undefined` | No | | |
13
13
  | `className` | `string | undefined` | No | | |
14
- | `size` | `undefined "medium" "large" "xsmall"` | No | 'medium' | |
14
+ | `size` | `undefined "xsmall" "medium" "large"` | No | 'medium' | |
15
15
  | `disabled` | `boolean | undefined` | No | | |
16
16
  | `status` | `undefined "error"` | No | | |
17
+ | `placeholder` | `string | undefined` | No | | |
18
+ | `width` | `CSSValueWithLength | undefined` | No | | |
17
19
  | `zIndex` | `number | undefined` | No | getZIndex('dropdown') | |
18
20
  | `autoPlacement` | `boolean | undefined` | No | true | floating 요소가 reference 영역을 넘어갈 경우 자동 위치 처리 사용 유무 - 자동 위치 상/하만 적용됩니다. |
19
21
  | `optionsMatchRefWidth` | `boolean | undefined` | No | true | |
20
- | `placeholder` | `string | undefined` | No | | |
21
- | `width` | `CSSValueWithLength | undefined` | No | | |
22
22
  | `keyExtractor` | `((item: DropdownOption<OptionValue>, index: number) => string | number) | undefined` | No | | |
23
23
  | `labelHeight` | `CSSValueWithLength | undefined` | No | | |
24
24
  | `optionItemHeight` | `number | undefined` | No | | |
@@ -5,7 +5,7 @@
5
5
 
6
6
  | Name | Type | Required | Default | Description |
7
7
  |------|------|----------|---------|-------------|
8
- | `size` | `undefined "medium" "large" "xsmall"` | No | 'medium'
8
+ | `size` | `undefined "xsmall" "medium" "large"` | No | 'medium'
9
9
  'medium' | |
10
10
  | `alignment` | `undefined "center" "left" "right"` | No | 'left' | |
11
11
  | `status` | `undefined "info" "error" "success"` | No | info | |
@@ -6,6 +6,6 @@
6
6
  | Name | Type | Required | Default | Description |
7
7
  |------|------|----------|---------|-------------|
8
8
  | `width` | `CSSValueWithLength | undefined` | No | | |
9
- | `size` | `undefined "small" "medium" "large" "xsmall"` | No | medium | |
9
+ | `size` | `undefined "xsmall" "small" "medium" "large"` | No | medium | |
10
10
  | `status` | `undefined "info" "error"` | No | | min, max validation보다 우선합니다 |
11
11
  | `onChange` | `((value: number | null, validValue?: number | undefined) => void) | undefined` | No | | |
@@ -19,8 +19,8 @@
19
19
  | `className` | `string | undefined` | No | | |
20
20
  | `fill` | `boolean | undefined` | No | false | |
21
21
  | `opened` | `boolean | undefined` | No | | |
22
- | `zIndex` | `number | undefined` | No | getZIndex('modal') | |
23
22
  | `width` | `CSSValueWithLength | undefined` | No | 480 | Modal 너비를 지정할 수 있습니다. |
23
+ | `zIndex` | `number | undefined` | No | getZIndex('modal') | |
24
24
  | `canClickOutside` | `boolean | undefined` | No | true | outside 영역 클릭시 닫힘 사용 여부 |
25
25
  | `canCloseEscapeKey` | `boolean | undefined` | No | true | escapeKey 키이벤트 닫힘 사용 여부 |
26
26
  | `returnFocus` | `boolean | undefined` | No | true | reference 요소로 포커스 반환 여부 |
@@ -48,7 +48,7 @@
48
48
  |------|------|----------|---------|-------------|
49
49
  | `fill` | `boolean | undefined` | No | | |
50
50
  | `kind` | `undefined "primary" "secondary" "black" "negative" "outlined_primary" "outlined_secondary" "outlined_black" "outlined_negative"` | No | secondary | |
51
- | `size` | `undefined "medium" "large" "xsmall" "xlarge" "xxlarge"` | No | medium | |
51
+ | `size` | `undefined "xsmall" "medium" "large" "xlarge" "xxlarge"` | No | medium | |
52
52
  | `loading` | `boolean | undefined` | No | false | |
53
53
  | `startIcon` | `ReactElement<IconProps, string | JSXElementConstructor<any>> | undefined` | No | | 버튼 좌측 영역에 렌더링 될 아이콘 요소 - Icon 컴포넌트 color props가 있더라도 kind 따라 currentColor가 지정됩니다. - Icon 컴포넌트 size props가 있더라도 Icon 사이즈는 ButtonSize에 따라 고정됩니다. |
54
54
  | `endIcon` | `ReactElement<IconProps, string | JSXElementConstructor<any>> | undefined` | No | | 버튼 우측 영역에 렌더링 될 아이콘 요소 - Icon 컴포넌트 color props가 있더라도 kind 따라 currentColor가 지정됩니다. - Icon 컴포넌트 size props가 있더라도 Icon 사이즈는 ButtonSize에 따라 고정됩니다. |
@@ -11,13 +11,13 @@
11
11
  | `autoFocusButton` | `ModalActionButtonType | null | undefined` | No | 'confirm' | autofocus 지정할 기본 버튼 요소 |
12
12
  | `className` | `string | undefined` | No | | |
13
13
  | `kind` | `undefined "info" "error" "warning" "success"` | No | 'info' | |
14
- | `fill` | `boolean | undefined` | No | false | |
15
14
  | `title` | `ReactNode` | Yes | | |
16
15
  | `onClose` | `(() => void | Promise<void>) | undefined` | No | | onConfirm/onCancel이 호출된 직후 onClose가 호출됩니다. |
16
+ | `fill` | `boolean | undefined` | No | false | |
17
17
  | `opened` | `boolean | undefined` | No | | |
18
18
  | `text` | `ReactNode` | No | | |
19
- | `zIndex` | `number | undefined` | No | getZIndex('modal') | |
20
19
  | `width` | `CSSValueWithLength | undefined` | No | 480 | Modal 너비를 지정할 수 있습니다. |
20
+ | `zIndex` | `number | undefined` | No | getZIndex('modal') | |
21
21
  | `canClickOutside` | `boolean | undefined` | No | true | outside 영역 클릭시 닫힘 사용 여부 |
22
22
  | `canCloseEscapeKey` | `boolean | undefined` | No | true | escapeKey 키이벤트 닫힘 사용 여부 |
23
23
  | `returnFocus` | `boolean | undefined` | No | true | reference 요소로 포커스 반환 여부 |
@@ -45,7 +45,7 @@
45
45
  |------|------|----------|---------|-------------|
46
46
  | `fill` | `boolean | undefined` | No | | |
47
47
  | `kind` | `undefined "primary" "secondary" "black" "negative" "outlined_primary" "outlined_secondary" "outlined_black" "outlined_negative"` | No | secondary | |
48
- | `size` | `undefined "medium" "large" "xsmall" "xlarge" "xxlarge"` | No | medium | |
48
+ | `size` | `undefined "xsmall" "medium" "large" "xlarge" "xxlarge"` | No | medium | |
49
49
  | `loading` | `boolean | undefined` | No | false | |
50
50
  | `startIcon` | `ReactElement<IconProps, string | JSXElementConstructor<any>> | undefined` | No | | 버튼 좌측 영역에 렌더링 될 아이콘 요소 - Icon 컴포넌트 color props가 있더라도 kind 따라 currentColor가 지정됩니다. - Icon 컴포넌트 size props가 있더라도 Icon 사이즈는 ButtonSize에 따라 고정됩니다. |
51
51
  | `endIcon` | `ReactElement<IconProps, string | JSXElementConstructor<any>> | undefined` | No | | 버튼 우측 영역에 렌더링 될 아이콘 요소 - Icon 컴포넌트 color props가 있더라도 kind 따라 currentColor가 지정됩니다. - Icon 컴포넌트 size props가 있더라도 Icon 사이즈는 ButtonSize에 따라 고정됩니다. |
@@ -5,7 +5,7 @@
5
5
 
6
6
  | Name | Type | Required | Default | Description |
7
7
  |------|------|----------|---------|-------------|
8
- | `size` | `undefined "medium" "large" "xsmall"` | No | 'medium'
8
+ | `size` | `undefined "xsmall" "medium" "large"` | No | 'medium'
9
9
  'medium' | |
10
10
  | `leftAddon` | `string | undefined` | No | | Input prefix 요소 |
11
11
  | `status` | `undefined "info" "error" "success"` | No | 'info' | |
@@ -13,7 +13,7 @@
13
13
  | `readOnly` | `boolean | undefined` | No | false | |
14
14
  | `disabledTime` | `((value: Date | null) => DisabledTimes) | undefined` | No | | |
15
15
  | `fill` | `boolean | undefined` | No | false | TimePicker 팝오버 너비 100% 사용여부 - Input 요소 만큼의 100% 너비를 가집니다. - true 일 경우 footer(확인/취소) 버튼 속성은 자동 fill 처리됩니다. |
16
- | `size` | `undefined "medium" "large" "xsmall"` | No | medium | |
16
+ | `size` | `undefined "xsmall" "medium" "large"` | No | medium | |
17
17
  | `value` | `Date | undefined` | No | | |
18
18
  | `onClose` | `(() => void) | undefined` | No | | |
19
19
  | `onOpen` | `(() => void) | undefined` | No | | |
@@ -9,16 +9,16 @@
9
9
  | `onChange` | `((start: Date | null, end: Date | null) => void) | undefined` | No | | |
10
10
  | `disabledTime` | `((value: Date | null, range?: "from" | "to" | undefined) => DisabledTimes) | undefined` | No | | |
11
11
  | `className` | `string | undefined` | No | | |
12
- | `fill` | `boolean | undefined` | No | false | TimePicker 팝오버 너비 100% 사용여부 - Input 요소 만큼의 100% 너비를 가집니다. - true 일 경우 footer(확인/취소) 버튼 속성은 자동 fill 처리됩니다. |
13
- | `size` | `undefined "medium" "large" "xsmall"` | No | medium | |
14
12
  | `error` | `boolean | undefined` | No | | |
13
+ | `size` | `undefined "xsmall" "medium" "large"` | No | medium | |
15
14
  | `onClose` | `(() => void) | undefined` | No | | |
15
+ | `fill` | `boolean | undefined` | No | false | TimePicker 팝오버 너비 100% 사용여부 - Input 요소 만큼의 100% 너비를 가집니다. - true 일 경우 footer(확인/취소) 버튼 속성은 자동 fill 처리됩니다. |
16
16
  | `disabled` | `boolean | undefined` | No | | |
17
- | `zIndex` | `number | undefined` | No | getZIndex('picker') | |
18
17
  | `readOnly` | `boolean | undefined` | No | false | |
19
18
  | `width` | `CSSValueWithLength | undefined` | No | 100% | Input 너비를 지정할 수 있습니다. |
20
- | `onOpen` | `(() => void) | undefined` | No | | |
19
+ | `zIndex` | `number | undefined` | No | getZIndex('picker') | |
21
20
  | `showRemoveButton` | `boolean | undefined` | No | false | Input 우측에 값 지우기 버튼 표시 여부 true: 값이 있을 때 마우스 호버 시 지우기(X) 버튼 표시 false: 항상 시계 아이콘만 표시 값이 없을 때는 설정과 관계없이 시계 아이콘이 표시됩니다. |
21
+ | `onOpen` | `(() => void) | undefined` | No | | |
22
22
  | `incrementMinute` | `number | undefined` | No | 1 | 지정된 배수 단위로 분 설정이 가능합니다. |
23
23
  | `hideDisabledMinutes` | `boolean | undefined` | No | false | 비활성화된 분 항목을 목록에서 숨길지 여부 true: disabledMinutes로 비활성화된 분 항목이 목록에서 완전히 제거됩니다. false: 비활성화된 분 항목이 목록에 표시되지만 선택 불가능합니다. |
24
24
  | `usePortal` | `boolean | undefined` | No | true | |
@@ -1,3 +1,3 @@
1
- # PDS v16.56.0
1
+ # PDS v16.56.1
2
2
 
3
3
  **Partner Design System** - 카카오스타일 어드민 서비스를 위한 React 컴포넌트 라이브러리