@croquiscom/pds 16.52.0 → 16.52.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.
- package/dist/index.es.js +1 -1
- package/dist/index.es.js.map +1 -1
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
- package/pds-skills/SKILL.md +2 -2
- package/pds-skills/resources/components/component-button-accordionbutton.txt +1 -1
- package/pds-skills/resources/components/component-button-button.txt +1 -1
- package/pds-skills/resources/components/component-button-floatingbutton.txt +1 -1
- package/pds-skills/resources/components/component-button-iconbutton.txt +1 -1
- package/pds-skills/resources/components/component-button-textbutton.txt +1 -1
- package/pds-skills/resources/components/component-chip-inputchip.txt +1 -1
- package/pds-skills/resources/components/component-chipinput.txt +1 -1
- package/pds-skills/resources/components/component-control-checkbox.txt +1 -1
- package/pds-skills/resources/components/component-control-checkboxgroup.txt +1 -1
- package/pds-skills/resources/components/component-control-radio.txt +1 -1
- package/pds-skills/resources/components/component-control-radiogroup-boxradio.txt +1 -1
- package/pds-skills/resources/components/component-control-radiogroup-radio.txt +1 -1
- package/pds-skills/resources/components/component-control-segmentedcontrol.txt +1 -1
- package/pds-skills/resources/components/component-control-switch.txt +1 -1
- package/pds-skills/resources/components/component-divider.txt +1 -1
- package/pds-skills/resources/components/component-image-imagepreview.txt +1 -1
- package/pds-skills/resources/components/component-input.txt +1 -1
- package/pds-skills/resources/components/component-inputstepper.txt +1 -1
- package/pds-skills/resources/components/component-modal-basicmodal.txt +1 -1
- package/pds-skills/resources/components/component-modal-floatingmodal.txt +1 -1
- package/pds-skills/resources/components/component-numericinput.txt +1 -1
- package/pds-skills/resources/components/component-table-tablecell.txt +1 -1
- package/pds-skills/resources/components/component-textarea.txt +1 -1
- package/pds-skills/resources/components/intro.txt +1 -1
package/package.json
CHANGED
package/pds-skills/SKILL.md
CHANGED
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
|
|
6
6
|
| Name | Type | Required | Default | Description |
|
|
7
7
|
|------|------|----------|---------|-------------|
|
|
8
|
-
| `size` | `undefined "
|
|
8
|
+
| `size` | `undefined "medium" "xsmall"` | 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 "
|
|
10
|
+
| `size` | `undefined "medium" "large" "xsmall" "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에 따라 고정됩니다. |
|
|
@@ -6,9 +6,9 @@
|
|
|
6
6
|
| Name | Type | Required | Default | Description |
|
|
7
7
|
|------|------|----------|---------|-------------|
|
|
8
8
|
| `opened` | `boolean | undefined` | No | | |
|
|
9
|
-
| `loading` | `boolean | undefined` | No | false | |
|
|
10
9
|
| `startIcon` | `ReactElement<IconProps, string | JSXElementConstructor<any>> | undefined` | No | | 버튼 좌측 영역에 렌더링 될 아이콘 요소 - Icon 컴포넌트 color props가 있더라도 kind 따라 currentColor가 지정됩니다. - Icon 컴포넌트 size props가 있더라도 Icon 사이즈는 ButtonSize에 따라 고정됩니다. |
|
|
11
10
|
| `endIcon` | `ReactElement<IconProps, string | JSXElementConstructor<any>> | undefined` | No | | 버튼 우측 영역에 렌더링 될 아이콘 요소 - Icon 컴포넌트 color props가 있더라도 kind 따라 currentColor가 지정됩니다. - Icon 컴포넌트 size props가 있더라도 Icon 사이즈는 ButtonSize에 따라 고정됩니다. |
|
|
11
|
+
| `loading` | `boolean | undefined` | No | false | |
|
|
12
12
|
| `asChild` | `boolean | undefined` | No | false | true로 설정 시, 기본 DOM 요소를 렌더링하지 않고 자식 컴포넌트에 props와 동작을 전달합니다. reference: https://www.radix-ui.com/primitives/docs/guides/composition |
|
|
13
13
|
|
|
14
14
|
|
|
@@ -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 "
|
|
10
|
+
| `size` | `undefined "medium" "large" "xsmall" "xxsmall" "xlarge" "xxlarge"` | 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 | |
|
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
| `kind` | `undefined "link" "text"` | No | 'text' as TextButtonKind | |
|
|
9
9
|
| `loading` | `boolean | undefined` | No | false | |
|
|
10
10
|
| `underline` | `boolean | undefined` | No | false | |
|
|
11
|
-
| `size` | `undefined "
|
|
11
|
+
| `size` | `undefined "small" "medium" "large"` | No | medium | |
|
|
12
12
|
| `color` | `string | undefined` | No | kind='text'
|
|
13
13
|
semantic_colors.content.primary
|
|
14
14
|
kind='link'
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
|
|
6
6
|
| Name | Type | Required | Default | Description |
|
|
7
7
|
|------|------|----------|---------|-------------|
|
|
8
|
-
| `size` | `undefined "
|
|
8
|
+
| `size` | `undefined "medium" "large" "xsmall"` | No | medium | |
|
|
9
9
|
| `canDelete` | `boolean | undefined` | No | true | |
|
|
10
10
|
| `onDelete` | `(() => void) | undefined` | No | | |
|
|
11
11
|
|
|
@@ -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 "
|
|
11
|
+
| `size` | `undefined "medium" "large" "xsmall"` | 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 | | |
|
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
| `checked` | `boolean | undefined` | No | | |
|
|
9
9
|
| `disabled` | `boolean | undefined` | No | | |
|
|
10
10
|
| `indeterminate` | `boolean | undefined` | No | | |
|
|
11
|
-
| `size` | `undefined "
|
|
11
|
+
| `size` | `undefined "small" "medium" "large"` | No | medium | |
|
|
12
12
|
| `onChange` | `((e: ChangeEvent<HTMLInputElement>) => void) | undefined` | No | | |
|
|
13
13
|
| `unstableFocusVisible` | `boolean | undefined` | No | | react-aria useFocusRing isFocusVisible 반환값을 제어할 수 있습니다. |
|
|
14
14
|
|
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
| `spacing` | `number | undefined` | No | 24 | |
|
|
14
14
|
| `items` | `CheckboxItem<string | number | boolean>[]` | Yes | | |
|
|
15
15
|
| `align` | `undefined "horizontal" "vertical"` | No | horizontal | |
|
|
16
|
-
| `size` | `undefined "
|
|
16
|
+
| `size` | `undefined "small" "medium" "large"` | No | medium | |
|
|
17
17
|
| `keyExtractor` | `((item: CheckboxItem<string | number | boolean>, index: number) => string | number) | undefined` | No | | 각 체크박스 아이템에서 고유 key를 추출하는 함수 |
|
|
18
18
|
| `onChange` | `((value: (string | number | boolean)[]) => void) | undefined` | No | | |
|
|
19
19
|
| `allCheck` | `boolean | undefined` | No | false | |
|
|
@@ -10,7 +10,7 @@
|
|
|
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 "
|
|
13
|
+
| `size` | `undefined "small" "medium" "large" "xsmall"` | No | medium | radioItemType - default일 경우 'small', 'medium', 'large'만 적용되며 default값은 'medium'입니다. radioItemType - box일 경우 'xsmall', 'medium', 'large'만 적용되며 default값은 'medium'입니다. |
|
|
14
14
|
|
|
15
15
|
|
|
16
16
|
## Examples
|
|
@@ -18,7 +18,7 @@
|
|
|
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 "
|
|
21
|
+
| `size` | `undefined "small" "medium" "large" "xsmall"` | No | | radioItemType - default일 경우 'small', 'medium', 'large'만 적용되며 default값은 'medium'입니다. radioItemType - box일 경우 'xsmall', 'medium', 'large'만 적용되며 default값은 'medium'입니다. |
|
|
22
22
|
| `ref` | `Ref<RadioGroupInstance<RadioValue>> | undefined` | No | | |
|
|
23
23
|
|
|
24
24
|
|
|
@@ -18,7 +18,7 @@
|
|
|
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 "
|
|
21
|
+
| `size` | `undefined "small" "medium" "large" "xsmall"` | No | | radioItemType - default일 경우 'small', 'medium', 'large'만 적용되며 default값은 'medium'입니다. radioItemType - box일 경우 'xsmall', 'medium', 'large'만 적용되며 default값은 'medium'입니다. |
|
|
22
22
|
| `ref` | `Ref<RadioGroupInstance<RadioValue>> | undefined` | No | | |
|
|
23
23
|
|
|
24
24
|
|
|
@@ -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 "
|
|
11
|
+
| `size` | `undefined "medium" "large" "xsmall"` | No | medium | |
|
|
12
12
|
| `items` | `SegmentedControlOptionType[]` | Yes | | |
|
|
13
13
|
| `width` | `undefined "fill" "auto"` | No | auto | |
|
|
14
14
|
| `disabled` | `boolean | undefined` | No | false | |
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
| Name | Type | Required | Default | Description |
|
|
7
7
|
|------|------|----------|---------|-------------|
|
|
8
8
|
| `isOn` | `boolean | undefined` | No | true | |
|
|
9
|
-
| `size` | `undefined "
|
|
9
|
+
| `size` | `undefined "small" "medium" "large"` | No | small | |
|
|
10
10
|
| `width` | `number | undefined` | No | | |
|
|
11
11
|
| `onText` | `string | undefined` | No | ON | |
|
|
12
12
|
| `offText` | `string | undefined` | No | OFF | |
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
| `as` | `ElementType<any, keyof IntrinsicElements> | undefined` | No | | |
|
|
10
10
|
| `direction` | `undefined "horizontal" "vertical"` | No | horizontal | |
|
|
11
11
|
| `spacing` | `CSSValueWithLength | undefined` | No | | 간격을 설정할 수 있습니다. - direction horizontal 일경우 상하 간격에 적용됩니다. - direction vertical 일경우 좌우 간격에 적용됩니다. |
|
|
12
|
-
| `size` | `undefined "
|
|
12
|
+
| `size` | `undefined "small" "medium"` | No | small | |
|
|
13
13
|
| `color` | `string | undefined` | No | semantic_colors.border.primary | border color를 지정할 수 있습니다. - 지정하지 않을 경우 size medium 일경우 semantic_colors.background.base로 적용됩니다. - 지정하지 않을 경우 size small 일경우 semantic_colors.border.primary로 적용됩니다. |
|
|
14
14
|
| `length` | `CSSValueWithLength | undefined` | No | '100%' | 지정된 길이를 설정할 수 있습니다. - 지정하지 않을 경우 direction horizontal 이라면 width 값이 100%로 고정됩니다. - 지정하지 않을 경우 direction vertical 이라면 height값이 100%로 고정됩니다. |
|
|
15
15
|
|
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
| `alt` | `string | undefined` | No | | |
|
|
13
13
|
| `label` | `string | undefined` | No | | |
|
|
14
14
|
| `objectFit` | `"fill" "contain" "cover"` | Yes | | |
|
|
15
|
-
| `size` | `undefined "
|
|
15
|
+
| `size` | `undefined "small" "medium"` | No | medium | |
|
|
16
16
|
| `backgroundDark` | `boolean | undefined` | No | | |
|
|
17
17
|
| `error` | `boolean | undefined` | No | | |
|
|
18
18
|
| `onClick` | `((image_url: string) => void) | undefined` | No | | |
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
|
|
6
6
|
| Name | Type | Required | Default | Description |
|
|
7
7
|
|------|------|----------|---------|-------------|
|
|
8
|
-
| `size` | `undefined "
|
|
8
|
+
| `size` | `undefined "medium" "large" "xsmall"` | No | 'medium'
|
|
9
9
|
'medium' | |
|
|
10
10
|
| `alignment` | `undefined "center" "left" "right"` | No | 'left' | |
|
|
11
11
|
| `status` | `undefined "info" "error" "success"` | No | info | |
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
| Name | Type | Required | Default | Description |
|
|
7
7
|
|------|------|----------|---------|-------------|
|
|
8
8
|
| `width` | `CSSValueWithLength | undefined` | No | | |
|
|
9
|
-
| `size` | `undefined "
|
|
9
|
+
| `size` | `undefined "small" "medium" "large" "xsmall"` | No | medium | |
|
|
10
10
|
| `status` | `undefined "info" "error"` | No | | min, max validation보다 우선합니다 |
|
|
11
11
|
| `onChange` | `((value: number | null, validValue?: number | undefined) => void) | undefined` | No | | |
|
|
12
12
|
|
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
|------|------|----------|---------|-------------|
|
|
15
15
|
| `fill` | `boolean | undefined` | No | | |
|
|
16
16
|
| `kind` | `undefined "primary" "secondary" "black" "negative" "outlined_primary" "outlined_secondary" "outlined_black" "outlined_negative"` | No | secondary | |
|
|
17
|
-
| `size` | `undefined "
|
|
17
|
+
| `size` | `undefined "medium" "large" "xsmall" "xlarge" "xxlarge"` | No | medium | |
|
|
18
18
|
| `loading` | `boolean | undefined` | No | false | |
|
|
19
19
|
| `startIcon` | `ReactElement<IconProps, string | JSXElementConstructor<any>> | undefined` | No | | 버튼 좌측 영역에 렌더링 될 아이콘 요소 - Icon 컴포넌트 color props가 있더라도 kind 따라 currentColor가 지정됩니다. - Icon 컴포넌트 size props가 있더라도 Icon 사이즈는 ButtonSize에 따라 고정됩니다. |
|
|
20
20
|
| `endIcon` | `ReactElement<IconProps, string | JSXElementConstructor<any>> | undefined` | No | | 버튼 우측 영역에 렌더링 될 아이콘 요소 - Icon 컴포넌트 color props가 있더라도 kind 따라 currentColor가 지정됩니다. - Icon 컴포넌트 size props가 있더라도 Icon 사이즈는 ButtonSize에 따라 고정됩니다. |
|
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
|------|------|----------|---------|-------------|
|
|
15
15
|
| `fill` | `boolean | undefined` | No | | |
|
|
16
16
|
| `kind` | `undefined "primary" "secondary" "black" "negative" "outlined_primary" "outlined_secondary" "outlined_black" "outlined_negative"` | No | secondary | |
|
|
17
|
-
| `size` | `undefined "
|
|
17
|
+
| `size` | `undefined "medium" "large" "xsmall" "xlarge" "xxlarge"` | No | medium | |
|
|
18
18
|
| `loading` | `boolean | undefined` | No | false | |
|
|
19
19
|
| `startIcon` | `ReactElement<IconProps, string | JSXElementConstructor<any>> | undefined` | No | | 버튼 좌측 영역에 렌더링 될 아이콘 요소 - Icon 컴포넌트 color props가 있더라도 kind 따라 currentColor가 지정됩니다. - Icon 컴포넌트 size props가 있더라도 Icon 사이즈는 ButtonSize에 따라 고정됩니다. |
|
|
20
20
|
| `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 "
|
|
8
|
+
| `size` | `undefined "medium" "large" "xsmall"` | No | 'medium'
|
|
9
9
|
'medium' | |
|
|
10
10
|
| `leftAddon` | `string | undefined` | No | | Input prefix 요소 |
|
|
11
11
|
| `status` | `undefined "info" "error" "success"` | No | 'info' | |
|
|
@@ -18,7 +18,7 @@
|
|
|
18
18
|
| `clickable` | `boolean | undefined` | No | | |
|
|
19
19
|
| `selectable` | `boolean | undefined` | No | | |
|
|
20
20
|
| `isColumnLast` | `boolean | undefined` | No | | |
|
|
21
|
-
| `size` | `undefined "
|
|
21
|
+
| `size` | `undefined "small" "medium" "large"` | No | medium | |
|
|
22
22
|
| `isTruncate` | `boolean | undefined` | No | true | |
|
|
23
23
|
| `isHugeContents` | `boolean | undefined` | No | true | |
|
|
24
24
|
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
|
|
6
6
|
| Name | Type | Required | Default | Description |
|
|
7
7
|
|------|------|----------|---------|-------------|
|
|
8
|
-
| `size` | `undefined "
|
|
8
|
+
| `size` | `undefined "small" "medium" "large"` | No | 'large' | |
|
|
9
9
|
| `error` | `boolean | undefined` | No | | |
|
|
10
10
|
| `showCounter` | `boolean | undefined` | No | false | 입력된 value count 노출 여부 |
|
|
11
11
|
| `autoSize` | `boolean | AutoSizeType | undefined` | No | false | 입혁하는 텍스트에 따라 자동으로 크기를 조절하며 최소/최대 라인수를 설정할 수 있습니다. - height 또는 textarea 기본 rows 속성이 있을 경우 적용되지 않습니다. - autoSize를 사용할 경우 기본 resize는 none처리됩니다. - minRows(최소 행 수)의 기본값은 2입니다. - maxRows(최대 행 수)를 넘어갈 경우 자동 내부 스크롤 처리됩니다. |
|