@croquiscom/pds 16.57.0 → 16.57.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@croquiscom/pds",
-  "version": "16.57.0",
+  "version": "16.57.1",
   "description": "Design system for Zigzag's Partner Center",
   "main": "./dist/index.js",
   "module": "./dist/index.es.js",

package/pds-skills/SKILL.md

@@ -184,6 +184,8 @@ import { semantic_colors, spacing, shapes } from '@croquiscom/pds';
 
 ### 가이드 문서 (`resources/guides/`)
 - `guide-common-mistakes.md`: 흔한 실수 (Common Mistakes)
+- `guide-component-decision-tree.md`: Component Decision Tree
+- `guide-composition-patterns.md`: PDS 합성 패턴 가이드
 - `guide-foundation-usage.md`: Foundation 토큰 사용법
 - `guide-getting-started.md`: 시작하기
 - `guide-icon-mapping.md`: 아이콘 매핑 및 사용 가이드
@@ -192,7 +194,7 @@ import { semantic_colors, spacing, shapes } from '@croquiscom/pds';
 
 ### 컴포넌트 레퍼런스 (`resources/components/`)
 
-**인덱스**: `resources/index.txt` - 전체 컴포넌트 목록 (105개)
+**인덱스**: `resources/index.txt` - 전체 컴포넌트 목록 (107개)
 
 **파일 패턴** (Quick Reference의 "리소스" 컬럼 참조):
 - `{리소스}.props.txt` — Tier 1: Props 상세 (타입, 기본값, 설명)
@@ -213,5 +215,5 @@ import { semantic_colors, spacing, shapes } from '@croquiscom/pds';
 
 ---
 
-**문서 버전**: v16.57.0
-**마지막 업데이트**: 2026-05-22
+**문서 버전**: v16.57.1
+**마지막 업데이트**: 2026-05-26

package/pds-skills/resources/components/component-banner.props.txt

@@ -7,7 +7,7 @@
 |------|------|----------|---------|-------------|
 | `className` | `string | undefined` | No |  |  |
 | `kind` | `undefined "neutral" "info" "error" "warning" "success"` | No | info |  |
-| `size` | `undefined "small" "medium" "xsmall"` | No | medium |  |
+| `size` | `undefined "xsmall" "small" "medium"` | No | medium |  |
 | `direction` | `undefined "horizontal" "vertical"` | No | horizontal |  |
 | `iconComponent` | `ComponentType<IconProps> | undefined` | No |  | title 좌측에 렌더링 될 아이콘 요소  - title이 없을 경우 렌더되지 않습니다.  - Icon 컴포넌트 color props가 있더라도 kind 따라 currentColor가 지정됩니다.  - Icon 컴포넌트 size props가 있더라도 Icon 사이즈는 banner size 'medium'일경우 16, 'small'일경우 12로 고정됩니다. |
 | `showIcon` | `boolean | undefined` | No | true |  |

package/pds-skills/resources/components/component-button-accordionbutton.props.txt

@@ -5,9 +5,9 @@
 
 | Name | Type | Required | Default | Description |
 |------|------|----------|---------|-------------|
-| `size` | `undefined "medium" "xsmall"` | No | medium |  |
+| `size` | `undefined "xsmall" "medium"` | No | medium |  |
 | `leftAddon` | `ReactNode` | No |  | Label 좌측 렌더링될 Addon 요소 |
 | `opened` | `boolean | undefined` | No |  | Label 우측 화살표 오픈 상태 여부 |
 | `fill` | `boolean | undefined` | No | false | 너비 100% 사용 여부 |
-| `type` | `undefined "submit" "reset" "button"` | No | button |  |
+| `type` | `undefined "button" "submit" "reset"` | No | button |  |
 | `asChild` | `boolean | undefined` | No | false | true로 설정 시, 기본 DOM 요소를 렌더링하지 않고 자식 컴포넌트에 props와 동작을 전달합니다.  reference: https://www.radix-ui.com/primitives/docs/guides/composition |

package/pds-skills/resources/components/component-button-button.props.txt

@@ -7,9 +7,9 @@
 |------|------|----------|---------|-------------|
 | `fill` | `boolean | undefined` | No |  |  |
 | `kind` | `undefined "primary" "secondary" "black" "negative" "outlined_primary" "outlined_secondary" "outlined_black" "outlined_negative"` | No | secondary |  |
-| `size` | `undefined "small" "medium" "large" "xsmall" "xlarge" "xxlarge"` | No | medium |  |
+| `size` | `undefined "xsmall" "small" "medium" "large" "xlarge" "xxlarge"` | No | medium |  |
 | `loading` | `boolean | undefined` | No | false |  |
 | `startIcon` | `ReactElement<IconProps, string | JSXElementConstructor<any>> | undefined` | No |  | 버튼 좌측 영역에 렌더링 될 아이콘 요소  - Icon 컴포넌트 color props가 있더라도 kind 따라 currentColor가 지정됩니다.  - Icon 컴포넌트 size props가 있더라도 Icon 사이즈는 ButtonSize에 따라 고정됩니다. |
 | `endIcon` | `ReactElement<IconProps, string | JSXElementConstructor<any>> | undefined` | No |  | 버튼 우측 영역에 렌더링 될 아이콘 요소  - Icon 컴포넌트 color props가 있더라도 kind 따라 currentColor가 지정됩니다.  - Icon 컴포넌트 size props가 있더라도 Icon 사이즈는 ButtonSize에 따라 고정됩니다. |
 | `asChild` | `boolean | undefined` | No | false | true로 설정 시, 기본 DOM 요소를 렌더링하지 않고 자식 컴포넌트에 props와 동작을 전달합니다.  reference: https://www.radix-ui.com/primitives/docs/guides/composition |
-| `type` | `undefined "submit" "reset" "button"` | No | button |  |
+| `type` | `undefined "button" "submit" "reset"` | No | button |  |

package/pds-skills/resources/components/component-button-iconbutton.props.txt

@@ -7,8 +7,8 @@
 |------|------|----------|---------|-------------|
 | `kind` | `undefined "outlined_primary" "outlined_secondary" "outlined_negative"` | No | outlined_secondary | shape 속성이 'circle'의 경우 적용되지 않습니다. |
 | `icon` | `ReactElement<IconProps, string | JSXElementConstructor<any>> | undefined` | No |  | 렌더링 될 아이콘 요소  - Icon 컴포넌트 color props가 없다면 currentColor가 지정됩니다. |
-| `size` | `undefined "small" "medium" "large" "xsmall" "xlarge" "xxlarge" "xxsmall"` | No | medium |  |
+| `size` | `undefined "xsmall" "small" "medium" "large" "xxsmall" "xlarge" "xxlarge"` | No | medium |  |
 | `shape` | `undefined "rectangle" "circle"` | No | rectangle |  |
 | `fill` | `boolean | undefined` | No |  |  |
-| `type` | `undefined "submit" "reset" "button"` | No | button |  |
+| `type` | `undefined "button" "submit" "reset"` | No | button |  |
 | `asChild` | `boolean | undefined` | No | false | true로 설정 시, 기본 DOM 요소를 렌더링하지 않고 자식 컴포넌트에 props와 동작을 전달합니다.  reference: https://www.radix-ui.com/primitives/docs/guides/composition |

package/pds-skills/resources/components/component-button-popoverbutton.props.txt

@@ -6,7 +6,7 @@
 | Name | Type | Required | Default | Description |
 |------|------|----------|---------|-------------|
 | `useIconButton` | `boolean | undefined` | No | false |  |
-| `size` | `undefined "small" "medium" "large" "xsmall"` | No | 'medium' |  |
+| `size` | `undefined "xsmall" "small" "medium" "large"` | No | 'medium' |  |
 | `autoPlacement` | `boolean | undefined` | No | true | floating 요소가 reference 영역을 넘어갈 경우 자동 위치 처리 사용 유무  - 자동 위치 상/하만 적용됩니다. |
 | `zIndex` | `number | undefined` | No | getZIndex('dropdown') |  |
 | `optionsMatchRefWidth` | `boolean | undefined` | No | false |  |
@@ -21,7 +21,7 @@
 | `fill` | `boolean | undefined` | No |  |  |
 | `startIcon` | `ReactElement<IconProps, string | JSXElementConstructor<any>> | undefined` | No |  | 버튼 좌측 영역에 렌더링 될 아이콘 요소  - Icon 컴포넌트 color props가 있더라도 kind 따라 currentColor가 지정됩니다.  - Icon 컴포넌트 size props가 있더라도 Icon 사이즈는 ButtonSize에 따라 고정됩니다. |
 | `endIcon` | `ReactElement<IconProps, string | JSXElementConstructor<any>> | undefined` | No |  | 버튼 우측 영역에 렌더링 될 아이콘 요소  - Icon 컴포넌트 color props가 있더라도 kind 따라 currentColor가 지정됩니다.  - Icon 컴포넌트 size props가 있더라도 Icon 사이즈는 ButtonSize에 따라 고정됩니다. |
+| `type` | `undefined "button" "submit" "reset"` | No | 'button' |  |
 | `loading` | `boolean | undefined` | No | false |  |
-| `type` | `undefined "submit" "reset" "button"` | No | 'button' |  |
 | `asChild` | `boolean | undefined` | No | false | true로 설정 시, 기본 DOM 요소를 렌더링하지 않고 자식 컴포넌트에 props와 동작을 전달합니다.  reference: https://www.radix-ui.com/primitives/docs/guides/composition |
 | `unstableFocusVisible` | `boolean | undefined` | No |  | react-aria useFocusRing isFocusVisible 반환값을 제어할 수 있습니다. |

package/pds-skills/resources/components/component-button-textbutton.props.txt

@@ -16,5 +16,5 @@ semantic_colors.accent.primary |  |
 | `fill` | `boolean | undefined` | No |  |  |
 | `startIcon` | `ReactElement<IconProps, string | JSXElementConstructor<any>> | undefined` | No |  | 버튼 좌측 영역에 렌더링 될 아이콘 요소  - Icon 컴포넌트 color props가 있더라도 kind 따라 currentColor가 지정됩니다.  - Icon 컴포넌트 size props가 있더라도 Icon 사이즈는 ButtonSize에 따라 고정됩니다. |
 | `endIcon` | `ReactElement<IconProps, string | JSXElementConstructor<any>> | undefined` | No |  | 버튼 우측 영역에 렌더링 될 아이콘 요소  - Icon 컴포넌트 color props가 있더라도 kind 따라 currentColor가 지정됩니다.  - Icon 컴포넌트 size props가 있더라도 Icon 사이즈는 ButtonSize에 따라 고정됩니다. |
-| `type` | `undefined "submit" "reset" "button"` | No | button |  |
+| `type` | `undefined "button" "submit" "reset"` | No | button |  |
 | `asChild` | `boolean | undefined` | No | false | true로 설정 시, 기본 DOM 요소를 렌더링하지 않고 자식 컴포넌트에 props와 동작을 전달합니다.  reference: https://www.radix-ui.com/primitives/docs/guides/composition |

package/pds-skills/resources/components/component-chip-inputchip.props.txt

@@ -5,6 +5,6 @@
 
 | Name | Type | Required | Default | Description |
 |------|------|----------|---------|-------------|
-| `size` | `undefined "small" "medium" "large" "xsmall"` | No | medium |  |
+| `size` | `undefined "xsmall" "small" "medium" "large"` | No | medium |  |
 | `canDelete` | `boolean | undefined` | No | true |  |
 | `onDelete` | `(() => void) | undefined` | No |  |  |

package/pds-skills/resources/components/component-chipinput.props.txt

@@ -8,7 +8,7 @@
 | `value` | `ChipInputValue[] | undefined` | No |  |  |
 | `disabled` | `boolean | undefined` | No |  |  |
 | `placeholder` | `string | undefined` | No |  |  |
-| `size` | `undefined "small" "medium" "large" "xsmall"` | No | medium |  |
+| `size` | `undefined "xsmall" "small" "medium" "large"` | No | medium |  |
 | `status` | `undefined "info" "error" "success"` | No | info | `error` 이외에 상태는 별도로 UI상 표시되지 않습니다. |
 | `wrap` | `undefined "wrap" "nowrap"` | No | nowrap | 칩 목록은 한 줄로 제한하거나 개행되도록 할 수 있습니다.  - `nowrap`: 칩이 인풋의 너비를 초과하면 수평으로 스크롤됩니다. - `wrap`: 칩이 인풋의 너비를 초과하면 수직으로 스크롤됩니다. |
 | `width` | `number | undefined` | No |  |  |

package/pds-skills/resources/components/component-colorpicker.props.txt

@@ -9,7 +9,7 @@
 | `value` | `string | undefined` | No | defaultValue || '' | hex color code (ex: #FFFFFF) |
 | `onChange` | `(code: string) => void` | Yes |  | @param code hex color code (ex: FFFFFF, #FFFFFF6D) |
 | `disabled` | `boolean | undefined` | No |  |  |
-| `size` | `undefined "medium" "xsmall" "xxsmall"` | No | 'medium' |  |
+| `size` | `undefined "xsmall" "medium" "xxsmall"` | No | 'medium' |  |
 | `layout` | `undefined "preset" "custom"` | No | custom | preset props이 없으면 layout=preset이 적용되지 않습니다. |
 | `alpha` | `boolean | undefined` | No |  |  |
 | `hueOnly` | `boolean | undefined` | No | false |  |

package/pds-skills/resources/components/component-control-radio.props.txt

@@ -10,4 +10,4 @@
 | `className` | `string | undefined` | No |  |  |
 | `unstableFocusVisible` | `boolean | undefined` | No |  | react-aria useFocusRing isFocusVisible 반환값을 제어할 수 있습니다. |
 | `radioItemType` | `undefined "default" "box"` | No | default |  |
-| `size` | `undefined "small" "medium" "large" "xsmall"` | No | medium | radioItemType - default일 경우 'small', 'medium', 'large'만 적용되며 default값은 'medium'입니다.  radioItemType - box일 경우 'xsmall', 'medium', 'large'만 적용되며 default값은 'medium'입니다. |
+| `size` | `undefined "xsmall" "small" "medium" "large"` | No | medium | radioItemType - default일 경우 'small', 'medium', 'large'만 적용되며 default값은 'medium'입니다.  radioItemType - box일 경우 'xsmall', 'medium', 'large'만 적용되며 default값은 'medium'입니다. |

package/pds-skills/resources/components/component-control-radiogroup-boxradio.props.txt

@@ -18,5 +18,5 @@
 | `keyExtractor` | `((item: RadioItem<RadioValue>, index: number) => string | number) | undefined` | No |  |  |
 | `onChange` | `((value: RadioValue) => void) | undefined` | No |  |  |
 | `unstableFocusVisible` | `boolean | undefined` | No |  | react-aria useFocusRing isFocusVisible 반환값을 제어할 수 있습니다. |
-| `size` | `undefined "small" "medium" "large" "xsmall"` | No |  | radioItemType - default일 경우 'small', 'medium', 'large'만 적용되며 default값은 'medium'입니다.  radioItemType - box일 경우 'xsmall', 'medium', 'large'만 적용되며 default값은 'medium'입니다. |
+| `size` | `undefined "xsmall" "small" "medium" "large"` | No |  | radioItemType - default일 경우 'small', 'medium', 'large'만 적용되며 default값은 'medium'입니다.  radioItemType - box일 경우 'xsmall', 'medium', 'large'만 적용되며 default값은 'medium'입니다. |
 | `ref` | `Ref<RadioGroupInstance<RadioValue>> | undefined` | No |  |  |

package/pds-skills/resources/components/component-control-radiogroup-radio.props.txt

@@ -18,5 +18,5 @@
 | `keyExtractor` | `((item: RadioItem<RadioValue>, index: number) => string | number) | undefined` | No |  |  |
 | `onChange` | `((value: RadioValue) => void) | undefined` | No |  |  |
 | `unstableFocusVisible` | `boolean | undefined` | No |  | react-aria useFocusRing isFocusVisible 반환값을 제어할 수 있습니다. |
-| `size` | `undefined "small" "medium" "large" "xsmall"` | No |  | radioItemType - default일 경우 'small', 'medium', 'large'만 적용되며 default값은 'medium'입니다.  radioItemType - box일 경우 'xsmall', 'medium', 'large'만 적용되며 default값은 'medium'입니다. |
+| `size` | `undefined "xsmall" "small" "medium" "large"` | No |  | radioItemType - default일 경우 'small', 'medium', 'large'만 적용되며 default값은 'medium'입니다.  radioItemType - box일 경우 'xsmall', 'medium', 'large'만 적용되며 default값은 'medium'입니다. |
 | `ref` | `Ref<RadioGroupInstance<RadioValue>> | undefined` | No |  |  |

package/pds-skills/resources/components/component-control-segmentedcontrol.props.txt

@@ -8,7 +8,7 @@
 | `className` | `string | undefined` | No |  |  |
 | `defaultValue` | `string | undefined` | No |  |  |
 | `value` | `string | undefined` | No |  |  |
-| `size` | `undefined "medium" "large" "xsmall"` | No | medium |  |
+| `size` | `undefined "xsmall" "medium" "large"` | No | medium |  |
 | `items` | `SegmentedControlOptionType[]` | Yes |  |  |
 | `width` | `undefined "fill" "auto"` | No | auto |  |
 | `disabled` | `boolean | undefined` | No | false |  |

package/pds-skills/resources/components/component-datepickerv2-datepickerv2.props.txt

@@ -11,7 +11,7 @@
 | `unit` | `undefined "month" "week" "day" "decade" "year" "minute" "second"` | No | day | 달력의 최소 시간 단위를 설정합니다. 시간을 선택하려면 "minute" 또는 "second"를 지정합니다. |
 | `target` | `undefined "all" "from" "to"` | No |  | 달력이 편집할 수 있는 항목을 지정합니다. - 지정하지 않으면 range 입력으로 구성되어 시작일, 종료일을 차례대로 선택할 수 있습니다. - "from"으로 지정하면 range 입력에서 시작일만 선택할 수 있고, 종료일은 비활성화됩니다. - "to"로 지정하면 range 입력에서 종료일만 선택할 수 있고, 시작일은 비활성화됩니다. - "all"로 지정하면 단일 날짜 선택으로 인식해서, 시작일/종료일을 모두 한 번에 선택합니다. |
 | `width` | `CSSValueWithLength | undefined` | No | 100% | Input 너비를 지정할 수 있습니다. |
-| `size` | `undefined "small" "medium" "large" "xsmall"` | No | medium | Input size를 지정할 수 있습니다. |
+| `size` | `undefined "xsmall" "small" "medium" "large"` | No | medium | Input size를 지정할 수 있습니다. |
 | `error` | `boolean | undefined` | No |  | Input의 에러 표시 여부를 지정합니다. |
 | `disabled` | `boolean | undefined` | No |  |  |
 | `className` | `string | undefined` | No |  |  |

package/pds-skills/resources/components/component-dropdown.props.txt

@@ -9,7 +9,7 @@
 | `width` | `CSSValueWithLength | undefined` | No |  |  |
 | `maxHeight` | `number | undefined` | No | 400 |  |
 | `zIndex` | `number | undefined` | No | getZIndex('dropdown') |  |
-| `size` | `undefined "small" "medium" "large" "xsmall"` | No | 'medium' |  |
+| `size` | `undefined "xsmall" "small" "medium" "large"` | No | 'medium' |  |
 | `labelHeight` | `CSSValueWithLength | undefined` | No |  |  |
 | `optionItemHeight` | `number | undefined` | No |  |  |
 | `disabled` | `boolean | undefined` | No |  |  |

package/pds-skills/resources/components/component-dropdownfilter.props.txt

@@ -7,7 +7,7 @@
 |------|------|----------|---------|-------------|
 | `value` | `OptionValue[] | undefined` | No |  |  |
 | `label` | `string` | Yes |  |  |
-| `size` | `undefined "small" "medium" "large" "xsmall"` | No | 'medium' |  |
+| `size` | `undefined "xsmall" "small" "medium" "large"` | No | 'medium' |  |
 | `defaultValues` | `OptionValue[] | undefined` | No | [] | DropDownFilter 초기값 초기화시, DefaultValues가 있을 경우 DefaultValues를 사용하고, 없을 경우 빈 배열을 사용합니다. |
 | `selectionGroup` | `DropdownFilterGroupOption<OptionValue>[] | undefined` | No | [] | 옵션을 selection 그룹으로 묶을때 사용합니다. selectionGroup이 있을 경우 options는 무시됩니다. |
 | `options` | `DropdownFilterOption<OptionValue>[] | undefined` | No | [] | 각 옵션 값들은 라벨 앞 자동으로 체크박스가 생성되며, 선택된 옵션값은 체크박스로 표시됩니다. |
@@ -23,10 +23,10 @@
 | `className` | `string | undefined` | No |  |  |
 | `disabled` | `boolean | undefined` | No |  |  |
 | `status` | `undefined "error"` | No |  |  |
-| `width` | `CSSValueWithLength | undefined` | No |  |  |
 | `zIndex` | `number | undefined` | No | getZIndex('dropdown') |  |
 | `autoPlacement` | `boolean | undefined` | No | true | floating 요소가 reference 영역을 넘어갈 경우 자동 위치 처리 사용 유무  - 자동 위치 상/하만 적용됩니다. |
 | `maxHeight` | `number | undefined` | No | DEFAULT_DROPDOWN_MAX_HEIGHT |  |
+| `width` | `CSSValueWithLength | undefined` | No |  |  |
 | `keyExtractor` | `((item: DropdownOption<OptionValue>, index: number) => string | number) | undefined` | No |  |  |
 | `labelHeight` | `CSSValueWithLength | undefined` | No |  |  |
 | `optionItemHeight` | `number | undefined` | No |  |  |

package/pds-skills/resources/components/component-dropdowninput.props.txt

@@ -14,14 +14,14 @@
 | `options` | `DropdownInputOption<OptionValue>[]` | Yes |  |  |
 | `keyExtractor` | `((item: DropdownInputOption<OptionValue>, index: number) => string | number) | undefined` | No |  |  |
 | `optionFilter` | `((inputValue: string, item: DropdownInputOption<OptionValue>, index: number) => boolean) | undefined` | No |  |  |
-| `size` | `undefined "small" "medium" "large" "xsmall"` | No | 'medium' |  |
+| `size` | `undefined "xsmall" "small" "medium" "large"` | No | 'medium' |  |
 | `disabled` | `boolean | undefined` | No |  |  |
 | `value` | `string | number | undefined` | No |  |  |
 | `status` | `undefined "error"` | No |  |  |
-| `width` | `CSSValueWithLength | undefined` | No |  |  |
 | `zIndex` | `number | undefined` | No | getZIndex('dropdown') |  |
-| `placeholder` | `string | undefined` | No |  |  |
 | `autoPlacement` | `boolean | undefined` | No | true | floating 요소가 reference 영역을 넘어갈 경우 자동 위치 처리 사용 유무  - 자동 위치 상/하만 적용됩니다. |
+| `width` | `CSSValueWithLength | undefined` | No |  |  |
+| `placeholder` | `string | undefined` | No |  |  |
 | `optionItemHeight` | `number | undefined` | No |  |  |
 | `enableVirtualScroll` | `boolean | undefined` | No | false |  |
 | `unstableFocusVisible` | `boolean | undefined` | No |  | react-aria useFocusRing isFocusVisible 반환값을 제어할 수 있습니다. |

package/pds-skills/resources/components/component-dropdownmultiselect.props.txt

@@ -11,14 +11,14 @@
 | `allCheck` | `boolean | undefined` | No | false | DropdownFilter Option들의 전체 선택 여부 |
 | `onChange` | `((value: OptionValue[]) => void) | undefined` | No |  |  |
 | `className` | `string | undefined` | No |  |  |
-| `size` | `undefined "small" "medium" "large" "xsmall"` | No | 'medium' |  |
+| `size` | `undefined "xsmall" "small" "medium" "large"` | No | 'medium' |  |
 | `disabled` | `boolean | undefined` | No |  |  |
 | `status` | `undefined "error"` | No |  |  |
-| `width` | `CSSValueWithLength | undefined` | No |  |  |
 | `zIndex` | `number | undefined` | No | getZIndex('dropdown') |  |
-| `placeholder` | `string | undefined` | No |  |  |
 | `autoPlacement` | `boolean | undefined` | No | true | floating 요소가 reference 영역을 넘어갈 경우 자동 위치 처리 사용 유무  - 자동 위치 상/하만 적용됩니다. |
 | `optionsMatchRefWidth` | `boolean | undefined` | No | true |  |
+| `width` | `CSSValueWithLength | undefined` | No |  |  |
+| `placeholder` | `string | undefined` | No |  |  |
 | `keyExtractor` | `((item: DropdownOption<OptionValue>, index: number) => string | number) | undefined` | No |  |  |
 | `labelHeight` | `CSSValueWithLength | undefined` | No |  |  |
 | `optionItemHeight` | `number | undefined` | No |  |  |

package/pds-skills/resources/components/component-input.props.txt

@@ -5,7 +5,7 @@
 
 | Name | Type | Required | Default | Description |
 |------|------|----------|---------|-------------|
-| `size` | `undefined "small" "medium" "large" "xsmall"` | No | 'medium'
+| `size` | `undefined "xsmall" "small" "medium" "large"` | No | 'medium'
 'medium' |  |
 | `alignment` | `undefined "center" "left" "right"` | No | 'left' |  |
 | `status` | `undefined "info" "error" "success"` | No | info |  |

package/pds-skills/resources/components/component-inputstepper.props.txt

@@ -6,6 +6,6 @@
 | Name | Type | Required | Default | Description |
 |------|------|----------|---------|-------------|
 | `width` | `CSSValueWithLength | undefined` | No |  |  |
-| `size` | `undefined "small" "medium" "large" "xsmall"` | No | medium |  |
+| `size` | `undefined "xsmall" "small" "medium" "large"` | No | medium |  |
 | `status` | `undefined "info" "error"` | No |  | min, max validation보다 우선합니다 |
 | `onChange` | `((value: number | null, validValue?: number | undefined) => void) | undefined` | No |  |  |

package/pds-skills/resources/components/component-modal-alertmodal.props.txt

@@ -19,8 +19,8 @@
 | `className` | `string | undefined` | No |  |  |
 | `fill` | `boolean | undefined` | No | false |  |
 | `opened` | `boolean | undefined` | No |  |  |
-| `width` | `CSSValueWithLength | undefined` | No | 480 | Modal 너비를 지정할 수 있습니다. |
 | `zIndex` | `number | undefined` | No | getZIndex('modal') |  |
+| `width` | `CSSValueWithLength | undefined` | No | 480 | Modal 너비를 지정할 수 있습니다. |
 | `canClickOutside` | `boolean | undefined` | No | true | outside 영역 클릭시 닫힘 사용 여부 |
 | `canCloseEscapeKey` | `boolean | undefined` | No | true | escapeKey 키이벤트 닫힘 사용 여부 |
 | `returnFocus` | `boolean | undefined` | No | true | reference 요소로 포커스 반환 여부 |

package/pds-skills/resources/components/component-modal-basicmodal.props.txt

@@ -48,9 +48,9 @@
 |------|------|----------|---------|-------------|
 | `fill` | `boolean | undefined` | No |  |  |
 | `kind` | `undefined "primary" "secondary" "black" "negative" "outlined_primary" "outlined_secondary" "outlined_black" "outlined_negative"` | No | secondary |  |
-| `size` | `undefined "small" "medium" "large" "xsmall" "xlarge" "xxlarge"` | No | medium |  |
+| `size` | `undefined "xsmall" "small" "medium" "large" "xlarge" "xxlarge"` | No | medium |  |
 | `loading` | `boolean | undefined` | No | false |  |
 | `startIcon` | `ReactElement<IconProps, string | JSXElementConstructor<any>> | undefined` | No |  | 버튼 좌측 영역에 렌더링 될 아이콘 요소  - Icon 컴포넌트 color props가 있더라도 kind 따라 currentColor가 지정됩니다.  - Icon 컴포넌트 size props가 있더라도 Icon 사이즈는 ButtonSize에 따라 고정됩니다. |
 | `endIcon` | `ReactElement<IconProps, string | JSXElementConstructor<any>> | undefined` | No |  | 버튼 우측 영역에 렌더링 될 아이콘 요소  - Icon 컴포넌트 color props가 있더라도 kind 따라 currentColor가 지정됩니다.  - Icon 컴포넌트 size props가 있더라도 Icon 사이즈는 ButtonSize에 따라 고정됩니다. |
 | `asChild` | `boolean | undefined` | No | false | true로 설정 시, 기본 DOM 요소를 렌더링하지 않고 자식 컴포넌트에 props와 동작을 전달합니다.  reference: https://www.radix-ui.com/primitives/docs/guides/composition |
-| `type` | `undefined "submit" "reset" "button"` | No | button |  |
+| `type` | `undefined "button" "submit" "reset"` | No | button |  |

package/pds-skills/resources/components/component-modal-confirmmodal.props.txt

@@ -11,20 +11,20 @@
 | `autoFocusButton` | `ModalActionButtonType | null | undefined` | No | 'confirm' | autofocus 지정할 기본 버튼 요소 |
 | `className` | `string | undefined` | No |  |  |
 | `kind` | `undefined "info" "error" "warning" "success"` | No | 'info' |  |
-| `fill` | `boolean | undefined` | No | false |  |
 | `title` | `ReactNode` | Yes |  |  |
 | `onClose` | `(() => void | Promise<void>) | undefined` | No |  | onConfirm/onCancel이 호출된 직후 onClose가 호출됩니다. |
+| `fill` | `boolean | undefined` | No | false |  |
 | `opened` | `boolean | undefined` | No |  |  |
 | `text` | `ReactNode` | No |  |  |
-| `width` | `CSSValueWithLength | undefined` | No | 480 | Modal 너비를 지정할 수 있습니다. |
 | `zIndex` | `number | undefined` | No | getZIndex('modal') |  |
+| `width` | `CSSValueWithLength | undefined` | No | 480 | Modal 너비를 지정할 수 있습니다. |
 | `canClickOutside` | `boolean | undefined` | No | true | outside 영역 클릭시 닫힘 사용 여부 |
 | `canCloseEscapeKey` | `boolean | undefined` | No | true | escapeKey 키이벤트 닫힘 사용 여부 |
 | `returnFocus` | `boolean | undefined` | No | true | reference 요소로 포커스 반환 여부 |
 | `onExited` | `(() => void) | undefined` | No |  | Modal destroy시 전달합니다. |
-| `confirmText` | `string | undefined` | No |  |  |
+| `subtext` | `ReactNode` | No |  |  |
 | `dense` | `boolean | undefined` | No |  |  |
+| `confirmText` | `string | undefined` | No |  |  |
 | `confirmButtonProps` | `ModalButtonProps | undefined` | No |  |  |
 | `onConfirm` | `(() => void | Promise<void>) | undefined` | No |  | confirmButton 클릭 이벤트 |
-| `subtext` | `ReactNode` | No |  |  |
 | `__floatingPortalId` | `string | undefined` | No |  | @internal 내부 사용을 위한 floatingPortalId |

package/pds-skills/resources/components/component-modal-floatingmodal.props.txt

@@ -45,9 +45,9 @@
 |------|------|----------|---------|-------------|
 | `fill` | `boolean | undefined` | No |  |  |
 | `kind` | `undefined "primary" "secondary" "black" "negative" "outlined_primary" "outlined_secondary" "outlined_black" "outlined_negative"` | No | secondary |  |
-| `size` | `undefined "small" "medium" "large" "xsmall" "xlarge" "xxlarge"` | No | medium |  |
+| `size` | `undefined "xsmall" "small" "medium" "large" "xlarge" "xxlarge"` | No | medium |  |
 | `loading` | `boolean | undefined` | No | false |  |
 | `startIcon` | `ReactElement<IconProps, string | JSXElementConstructor<any>> | undefined` | No |  | 버튼 좌측 영역에 렌더링 될 아이콘 요소  - Icon 컴포넌트 color props가 있더라도 kind 따라 currentColor가 지정됩니다.  - Icon 컴포넌트 size props가 있더라도 Icon 사이즈는 ButtonSize에 따라 고정됩니다. |
 | `endIcon` | `ReactElement<IconProps, string | JSXElementConstructor<any>> | undefined` | No |  | 버튼 우측 영역에 렌더링 될 아이콘 요소  - Icon 컴포넌트 color props가 있더라도 kind 따라 currentColor가 지정됩니다.  - Icon 컴포넌트 size props가 있더라도 Icon 사이즈는 ButtonSize에 따라 고정됩니다. |
 | `asChild` | `boolean | undefined` | No | false | true로 설정 시, 기본 DOM 요소를 렌더링하지 않고 자식 컴포넌트에 props와 동작을 전달합니다.  reference: https://www.radix-ui.com/primitives/docs/guides/composition |
-| `type` | `undefined "submit" "reset" "button"` | No | button |  |
+| `type` | `undefined "button" "submit" "reset"` | No | button |  |

package/pds-skills/resources/components/component-numericinput.props.txt

@@ -5,10 +5,10 @@
 
 | Name | Type | Required | Default | Description |
 |------|------|----------|---------|-------------|
-| `size` | `undefined "small" "medium" "large" "xsmall"` | No | 'medium'
+| `size` | `undefined "xsmall" "small" "medium" "large"` | No | 'medium'
 'medium' |  |
-| `leftAddon` | `string | undefined` | No |  | Input prefix 요소 |
 | `status` | `undefined "info" "error" "success"` | No | 'info' |  |
+| `leftAddon` | `string | undefined` | No |  | Input prefix 요소 |
 | `width` | `CSSValueWithLength | undefined` | No |  |  |
 | `startElement` | `ReactNode | ReactElement<IconProps, string | JSXElementConstructor<any>>` | No |  | 좌측 영역에 렌더링 될 요소 |
 | `endElement` | `ReactNode | ReactElement<IconProps, string | JSXElementConstructor<any>>` | No |  | 우측 영역에 렌더링 될 요소 |

package/pds-skills/resources/components/component-textarea.props.txt

@@ -5,7 +5,7 @@
 
 | Name | Type | Required | Default | Description |
 |------|------|----------|---------|-------------|
-| `size` | `undefined "small" "medium" "large" "xsmall"` | No | 'large' |  |
+| `size` | `undefined "xsmall" "small" "medium" "large"` | No | 'large' |  |
 | `error` | `boolean | undefined` | No |  |  |
 | `showCounter` | `boolean | undefined` | No | false | 입력된 value count 노출 여부 |
 | `autoSize` | `boolean | AutoSizeType | undefined` | No | false | 입혁하는 텍스트에 따라 자동으로 크기를 조절하며 최소/최대 라인수를 설정할 수 있습니다.  - height 또는 textarea 기본 rows 속성이 있을 경우 적용되지 않습니다.  - autoSize를 사용할 경우 기본 resize는 none처리됩니다.  - minRows(최소 행 수)의 기본값은 2입니다.  - maxRows(최대 행 수)를 넘어갈 경우 자동 내부 스크롤 처리됩니다. |

package/pds-skills/resources/components/component-timepicker.props.txt

@@ -13,7 +13,7 @@
 | `readOnly` | `boolean | undefined` | No | false |  |
 | `disabledTime` | `((value: Date | null) => DisabledTimes) | undefined` | No |  |  |
 | `fill` | `boolean | undefined` | No | false | TimePicker 팝오버 너비 100% 사용여부  - Input 요소 만큼의 100% 너비를 가집니다.  - true 일 경우 footer(확인/취소) 버튼 속성은 자동 fill 처리됩니다. |
-| `size` | `undefined "small" "medium" "large" "xsmall"` | No | medium |  |
+| `size` | `undefined "xsmall" "small" "medium" "large"` | No | medium |  |
 | `value` | `Date | undefined` | No |  |  |
 | `onClose` | `(() => void) | undefined` | No |  |  |
 | `onOpen` | `(() => void) | undefined` | No |  |  |

package/pds-skills/resources/components/component-timerangepicker.props.txt

@@ -9,16 +9,16 @@
 | `onChange` | `((start: Date | null, end: Date | null) => void) | undefined` | No |  |  |
 | `disabledTime` | `((value: Date | null, range?: "from" | "to" | undefined) => DisabledTimes) | undefined` | No |  |  |
 | `className` | `string | undefined` | No |  |  |
-| `fill` | `boolean | undefined` | No | false | TimePicker 팝오버 너비 100% 사용여부  - Input 요소 만큼의 100% 너비를 가집니다.  - true 일 경우 footer(확인/취소) 버튼 속성은 자동 fill 처리됩니다. |
-| `size` | `undefined "small" "medium" "large" "xsmall"` | No | medium |  |
 | `error` | `boolean | undefined` | No |  |  |
+| `size` | `undefined "xsmall" "small" "medium" "large"` | No | medium |  |
 | `onClose` | `(() => void) | undefined` | No |  |  |
+| `fill` | `boolean | undefined` | No | false | TimePicker 팝오버 너비 100% 사용여부  - Input 요소 만큼의 100% 너비를 가집니다.  - true 일 경우 footer(확인/취소) 버튼 속성은 자동 fill 처리됩니다. |
 | `disabled` | `boolean | undefined` | No |  |  |
-| `width` | `CSSValueWithLength | undefined` | No | 100% | Input 너비를 지정할 수 있습니다. |
 | `zIndex` | `number | undefined` | No | getZIndex('picker') |  |
+| `width` | `CSSValueWithLength | undefined` | No | 100% | Input 너비를 지정할 수 있습니다. |
 | `readOnly` | `boolean | undefined` | No | false |  |
-| `showRemoveButton` | `boolean | undefined` | No | false | Input 우측에 값 지우기 버튼 표시 여부  true: 값이 있을 때 마우스 호버 시 지우기(X) 버튼 표시 false: 항상 시계 아이콘만 표시 값이 없을 때는 설정과 관계없이 시계 아이콘이 표시됩니다. |
 | `onOpen` | `(() => void) | undefined` | No |  |  |
+| `showRemoveButton` | `boolean | undefined` | No | false | Input 우측에 값 지우기 버튼 표시 여부  true: 값이 있을 때 마우스 호버 시 지우기(X) 버튼 표시 false: 항상 시계 아이콘만 표시 값이 없을 때는 설정과 관계없이 시계 아이콘이 표시됩니다. |
 | `incrementMinute` | `number | undefined` | No | 1 | 지정된 배수 단위로 분 설정이 가능합니다. |
 | `hideDisabledMinutes` | `boolean | undefined` | No | false | 비활성화된 분 항목을 목록에서 숨길지 여부  true: disabledMinutes로 비활성화된 분 항목이 목록에서 완전히 제거됩니다. false: 비활성화된 분 항목이 목록에 표시되지만 선택 불가능합니다. |
 | `usePortal` | `boolean | undefined` | No | true |  |

package/pds-skills/resources/components/component-upload-fileuploadbutton.props.txt

@@ -8,5 +8,5 @@
 | `label` | `ReactNode` | Yes | '파일 업로드' |  |
 | `multiple` | `boolean | undefined` | No | false |  |
 | `loading` | `boolean | undefined` | No |  |  |
-| `buttonProps` | `Omit<ButtonProps, "loading" | "disabled" | "onClick"> | undefined` | No |  |  |
+| `buttonProps` | `Omit<ButtonProps, "disabled" | "onClick" | "loading"> | undefined` | No |  |  |
 | `onFileUpload` | `((file: File | File[]) => void) | undefined` | No |  |  |

package/pds-skills/resources/components/guide-component-decision-tree.txt

@@ -0,0 +1,84 @@
+# Component Decision Tree
+
+유사한 역할의 PDS 컴포넌트 중 어느 것을 써야 하는지의 판단 기준을 모은 가이드. prop/API 비교가 아니라 **사용 상황과 의도** 기준으로 정리한다.
+
+> 컴포넌트의 prop 정의·타입·기본값은 **Guide / Composition Patterns** 페이지와 각 컴포넌트의 `.props.txt`(Tier 1)를 참조하라. 본 가이드는 _어느 컴포넌트를 쓸지_만 다룬다.
+
+---
+
+## 1. 단일 선택 — `Radio` / `RadioGroup` / `BoxRadioGroup` / `SegmentedControl`
+
+모두 단일 선택이지만 레이아웃 방향과 선택이 즉시 반영되느냐가 다르다. `Switch`는 on/off 이진 상태 전환이라 이 그룹과 목적이 달라 별도 취급한다.
+
+| 판단 기준 | `Radio` / `RadioGroup` | `BoxRadioGroup` | `SegmentedControl` | | ----------------------- | ---------------------- | --------------- | ------------------- | | 레이아웃 방향 | 가로 / 세로 | 가로 / 그리드 | 가로 고정 | | 옵션 수 | 제한 없음 | 2~6개 권장 | 2~5개 | | 선택 결과 반영 시점 | 폼 제출 후 | 폼 제출 후 | 즉각 반영 (뷰 전환) | | 아이콘/이미지가 포함된 옵션 | 불가 | 불가 | 가능 | | 옵션 helper text | 가능 | 가능 | 불가 | | 주요 사용 위치 | 폼, 설정 | 필터, 옵션 선택 | 뷰 전환, 탭 대체 |
+
+**선택 가이드**
+
+-   폼 안에서 가로/세로 배치로 단일 선택 → `Radio` / `RadioGroup`
+-   선택지를 카드형으로 시각 강조하거나 가로 배치 → `BoxRadioGroup`
+-   선택 즉시 콘텐츠가 전환되어야 할 때 → `SegmentedControl`
+
+---
+
+## 2. 탭 — `LineTabs` / `PanelTabs` / `BoxTabs`
+
+탭 컴포넌트는 사용 위계와 시각적 강조 수준으로 구분한다.
+
+| 판단 기준 | `LineTabs` | `PanelTabs` | `BoxTabs` | | ----------------- | ----------- | ----------- | ---------------------------- | | 사용 위계 | 페이지 레벨 | 섹션 레벨 | 섹션 레벨 | | 스타일 | 밑줄 | 패널 배경 | 박스형 배경 | | 상단 고정(sticky) | 가능 | 불가 | 불가 | | 탭 수 | 2~7개 | 2~8개 | 제한 없음 (사용자 추가 가능) |
+
+**선택 가이드**
+
+-   페이지 전체의 주요 네비게이션 → `LineTabs`
+-   카드/패널 내부 콘텐츠 전환 → `PanelTabs`
+-   탭 자체를 버튼처럼 강조해야 할 때, 또는 사용자가 직접 탭을 추가하는 경우 → `BoxTabs`
+
+---
+
+## 3. 보조 정보 표시 — `Tooltip` / `Popover`
+
+두 컴포넌트 모두 hover와 click 트리거를 지원한다. 구분 기준은 트리거 방식이 아니라 **콘텐츠 복잡도**다.
+
+| 판단 기준 | `Tooltip` | `Popover` | | ---------------------------- | -------------------------- | ------------------------- | | 트리거 | hover / click 모두 지원 | hover / click 모두 지원 | | 콘텐츠 타입 | 텍스트만 | 텍스트 + 복합 콘텐츠 가능 | | 내부 인터랙션 (버튼·링크 등) | 불가 | 가능 | | 레이아웃 옵션 | 단일 | short form / long form | | `kind` (의미적 변형) | neutral / accent / negative | — | | 모바일 사용 | 가능 | 가능 |
+
+**선택 가이드**
+
+-   짧은 텍스트 정보만 표시하고 내부 인터랙션이 필요 없을 때 → `Tooltip`
+-   버튼·링크·복합 콘텐츠가 포함될 때 → `Popover`
+-   모바일 환경에서 추가 정보가 필요하면 `Tooltip`보다 `Popover` 사용 (모바일은 hover가 안정적이지 않다)
+
+---
+
+## 4. Modal 계열 — 유형 선택
+
+PDS의 모달은 5개 유형으로 구성된다. 각 유형은 **사용 조건**으로 구분한다.
+
+| 유형 | 컴포넌트 / 호출 | 주요 목적 | 버튼 구성 | | -------- | ------------------------------------------------------------ | ----------------------------------- | ----------- | | Alert | `await Alert(\{...\})` (`AlertModal` 함수형 호출) | 오류·경고 등 즉각 인지 필요 | 단일 확인 | | Confirm | `await Confirm(\{...\})` (`ConfirmModal` 함수형 호출) | 사용자 의사 결정 요청 | 취소 + 확인 | | Basic | `\<Modal opened=\{...\} onCancel=\{...\}\>` (JSX 직접) | 범용 콘텐츠 표시 | 상황에 따라 | | Notice | `\<NoticeModal opened=\{...\} onCancel=\{...\}\>` (JSX 직접) | 공지·프로모션 등 이미지가 포함된 콘텐츠 | 상황에 따라 | | Floating | `\<FloatingModal trigger=\{...\}\>` (JSX 직접, 트리거 기반) | 화면 일부 위에 떠있는 형태 | 상황에 따라 |
+
+**유형 선택 가이드**
+
+| 유형 | 사용 조건 | Do | Don't | | ------- | ---------------------------- | --------------------------------------------------------- | ---------------------------------------------------------------------------- | | Alert | 특정 행동의 결과를 알릴 때 | 필요한 최소한의 기능만 담는다. 오류는 `kind="error"` 사용 | "확인 / 닫기 / X" 같은 동일 기능 버튼 중복. title과 heading에 동일 정보 중복 | | Confirm | 행동에 대한 의사를 물어볼 때 | 필요한 최소한의 기능만 담는다 | "취소 / X" 동일 기능 버튼 중복. 불필요한 title 사용 | | Basic | 항목의 상세 내역을 보여줄 때 | contents area에 정보를 자유롭게 담되 정해진 스펙 안에서 | 정해진 스펙 외 임의 커스텀(X 버튼 제거 등) |
+
+**`Modal` (Basic) 사이즈 가이드**
+
+| 사이즈 | 너비 | 사용 시점 | | -------- | ------ | --------------------------------------------------- | | `xlarge` | 1280px | 좌우에 테이블이 2개 있는 등 확장된 형태가 필요할 때 | | `large` | 900px | 조회용 테이블이 있는 경우 | | `medium` | 720px | 달력·작은 테이블·이미지 등이 들어갈 때 | | `small` | 480px | 간단한 정보를 입력해야 할 때 | | `xsmall` | 375px | 모바일 미리보기를 보여줄 때 |
+
+---
+
+## 5. Modal 계열 — 오버레이 유형 선택
+
+같은 오버레이라도 `Modal` / `BottomSheet` / `Drawer`는 진입 방향과 플랫폼 맥락이 다르다.
+
+| 판단 기준 | `Modal` | `BottomSheet` | `Drawer` | | ----------- | ------------------------------------------- | --------------------- | ---------------------- | | 주 플랫폼 | 웹 / 데스크톱 | 모바일 | 웹 / 데스크톱 | | 진입 방향 | 중앙 팝업 | 하단에서 위로 | 좌/우 측면 | | 주요 목적 | 확인 / 경고 / 정보 표시 | 추가 옵션 / 상세 정보 | 네비게이션 / 상세 패널 | | 콘텐츠 길이 | 짧음 권장 | 스크롤 가능 | 스크롤 가능 | | 변형 유형 | Alert / Confirm / Basic / Notice / Floating | regular / full | — | | Backdrop | 항상 | 항상 | 항상 |
+
+**선택 가이드**
+
+-   사용자의 즉각적인 확인/결정이 필요한 경우 → `Modal` (또는 함수형 `Alert()` / `Confirm()`)
+-   모바일에서 하단으로 추가 정보나 옵션을 제공할 때 → `BottomSheet`
+-   측면에서 슬라이드로 펼쳐 네비게이션이나 상세를 보여줄 때 → `Drawer`
+
+---
+
+## 참고 가이드
+
+-   합성 패턴 (portal·slots·subcomponent 등): **Guide / Composition Patterns** 페이지
+-   prop 정의·타입·기본값: 각 컴포넌트의 `resources/components/component-\{slug\}.props.txt`