@idbrnd/design-system 1.3.4 → 1.5.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 +155 -22
- package/dist/components/Content/Avatar/Avatar.d.ts +43 -0
- package/dist/components/Content/AvatarStack/AvatarStack.d.ts +34 -0
- package/dist/components/Select/Select.d.ts +1 -1
- package/dist/components/Select/Select.types.d.ts +1 -1
- package/dist/components/Tooltip/Tooltip.d.ts +10 -0
- package/dist/components/Tooltip/Tooltip.types.d.ts +97 -0
- package/dist/components/Tooltip/useTooltip.d.ts +11 -0
- package/dist/index.d.ts +6 -0
- package/dist/index.js +1464 -1182
- package/dist/style.css +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# @idbrnd/design-system
|
|
2
2
|
|
|
3
|
-
|
|
4
4
|
|
|
5
5
|
|
|
6
6
|
|
|
@@ -55,9 +55,12 @@ export default function App() {
|
|
|
55
55
|
- [Toast](#toast)
|
|
56
56
|
- [Snackbar](#snackbar)
|
|
57
57
|
- [PushBadge](#pushbadge)
|
|
58
|
+
- [Tooltip](#tooltip)
|
|
58
59
|
- [Select](#select)
|
|
59
60
|
- [Dropdown](#dropdown)
|
|
60
61
|
- [Content](#content)
|
|
62
|
+
- [Avatar](#avatar)
|
|
63
|
+
- [AvatarStack](#avatarstack)
|
|
61
64
|
- [ContentBadge](#contentbadge)
|
|
62
65
|
- [StateBadge](#statebadge)
|
|
63
66
|
- [기타](#기타)
|
|
@@ -480,6 +483,72 @@ import { PushBadge } from "@idbrnd/design-system";
|
|
|
480
483
|
| `count` | `number` | — | `variant="number"` 시 표시할 숫자 |
|
|
481
484
|
| `customStyle` | `CSSProperties` | — | 추가 인라인 스타일 |
|
|
482
485
|
|
|
486
|
+
### Tooltip
|
|
487
|
+
|
|
488
|
+
트리거 엘리먼트에 마우스를 올리거나 클릭하면 말풍선 형태의 안내 텍스트를 표시하는 컴포넌트입니다.
|
|
489
|
+
|
|
490
|
+
```tsx
|
|
491
|
+
import { Tooltip } from "@idbrnd/design-system";
|
|
492
|
+
|
|
493
|
+
<Tooltip content="안녕하세요!" position="top">
|
|
494
|
+
<button>Hover me</button>
|
|
495
|
+
</Tooltip>;
|
|
496
|
+
```
|
|
497
|
+
|
|
498
|
+
**클릭 트리거 + render function**
|
|
499
|
+
|
|
500
|
+
```tsx
|
|
501
|
+
<Tooltip
|
|
502
|
+
trigger="click"
|
|
503
|
+
position="bottom"
|
|
504
|
+
content={(close) => (
|
|
505
|
+
<div>
|
|
506
|
+
<span>메시지를 작성해요.</span>
|
|
507
|
+
<button onClick={close}>닫기</button>
|
|
508
|
+
</div>
|
|
509
|
+
)}
|
|
510
|
+
>
|
|
511
|
+
<button>Click me</button>
|
|
512
|
+
</Tooltip>
|
|
513
|
+
```
|
|
514
|
+
|
|
515
|
+
**말줄임 시에만 표시**
|
|
516
|
+
|
|
517
|
+
```tsx
|
|
518
|
+
<Tooltip content="긴 텍스트 전체 내용" visibleOnEllipsis>
|
|
519
|
+
<span
|
|
520
|
+
style={{
|
|
521
|
+
overflow: "hidden",
|
|
522
|
+
textOverflow: "ellipsis",
|
|
523
|
+
whiteSpace: "nowrap",
|
|
524
|
+
}}
|
|
525
|
+
>
|
|
526
|
+
긴 텍스트 전체 내용
|
|
527
|
+
</span>
|
|
528
|
+
</Tooltip>
|
|
529
|
+
```
|
|
530
|
+
|
|
531
|
+
| Prop | 타입 | 기본값 | 설명 |
|
|
532
|
+
| ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | ----------------------------------------------------------------------------- |
|
|
533
|
+
| `content` | `ReactNode \| ((close: () => void) => ReactNode)` | — | **(필수)** 툴팁에 표시할 내용. render function 전달 시 `close` 콜백 사용 가능 |
|
|
534
|
+
| `trigger` | `"hover"` \| `"click"` | `"hover"` | 트리거 방식 |
|
|
535
|
+
| `variant` | `"default"` \| `"compact"` | `"default"` | 크기 변형. default: 8px 12px, compact: 4px 12px |
|
|
536
|
+
| `position` | `"top"` \| `"top-left"` \| `"top-right"` \| `"bottom"` \| `"bottom-left"` \| `"bottom-right"` \| `"left"` \| `"left-top"` \| `"left-bottom"` \| `"right"` \| `"right-top"` \| `"right-bottom"` | `"top"` | 툴팁 표시 위치 (12방향) |
|
|
537
|
+
| `arrow` | `boolean` | `true` | 화살표(꼬리표) 표시 여부 |
|
|
538
|
+
| `as` | `keyof JSX.IntrinsicElements` | `"span"` | 트리거 래퍼 HTML 태그 |
|
|
539
|
+
| `visibleOnEllipsis` | `boolean` | `false` | `true` 시 자식에 말줄임이 발생했을 때만 툴팁 표시 |
|
|
540
|
+
| `backgroundColor` | `string` | — | 툴팁 배경색 커스터마이징 |
|
|
541
|
+
| `contentColor` | `string` | — | 툴팁 텍스트 색상 커스터마이징 |
|
|
542
|
+
| `customStyle` | `CSSProperties` | — | 툴팁 박스에 적용할 추가 인라인 스타일 |
|
|
543
|
+
| `children` | `ReactNode` | — | **(필수)** 툴팁을 트리거할 자식 엘리먼트 |
|
|
544
|
+
|
|
545
|
+
유의사항:
|
|
546
|
+
|
|
547
|
+
- `trigger="click"` 시 외부 클릭, 스크롤, 리사이즈 시 자동으로 닫힙니다.
|
|
548
|
+
- `position`의 첫 번째 단어는 툴팁이 놓이는 방향, 두 번째 단어는 화살표가 치우치는 방향입니다.
|
|
549
|
+
- `content`에 render function을 전달하면 닫기 버튼 등 인터랙션을 구현할 수 있습니다.
|
|
550
|
+
- 툴팁은 `document.body`에 포탈로 렌더링됩니다.
|
|
551
|
+
|
|
483
552
|
---
|
|
484
553
|
|
|
485
554
|
## Select
|
|
@@ -506,7 +575,7 @@ function SelectExample() {
|
|
|
506
575
|
heading="과일 선택"
|
|
507
576
|
placeholder="선택해주세요."
|
|
508
577
|
options={options}
|
|
509
|
-
|
|
578
|
+
selectedValue={selected}
|
|
510
579
|
onSelect={setSelected}
|
|
511
580
|
/>
|
|
512
581
|
);
|
|
@@ -541,26 +610,26 @@ function SelectExample() {
|
|
|
541
610
|
/>
|
|
542
611
|
```
|
|
543
612
|
|
|
544
|
-
| Prop
|
|
545
|
-
|
|
|
546
|
-
| `options`
|
|
547
|
-
| `
|
|
548
|
-
| `onSelect`
|
|
549
|
-
| `variant`
|
|
550
|
-
| `size`
|
|
551
|
-
| `heading`
|
|
552
|
-
| `required`
|
|
553
|
-
| `leadingContent`
|
|
554
|
-
| `description`
|
|
555
|
-
| `placeholder`
|
|
556
|
-
| `disabled`
|
|
557
|
-
| `type`
|
|
558
|
-
| `align`
|
|
559
|
-
| `content`
|
|
560
|
-
| `buttonWidth`
|
|
561
|
-
| `descriptionWidth` | `number`
|
|
562
|
-
| `textColor`
|
|
563
|
-
| `customStyle`
|
|
613
|
+
| Prop | 타입 | 기본값 | 설명 |
|
|
614
|
+
| ------------------ | -------------------------------------------------------- | ----------------- | ------------------------------------------------------------- |
|
|
615
|
+
| `options` | `DropdownOption[]` | `[]` | 드롭다운에 표시할 옵션 배열. `{ label, value, icon? }` 형태 |
|
|
616
|
+
| `selectedValue` | `DropdownOption \| null` | — | 현재 선택된 옵션 |
|
|
617
|
+
| `onSelect` | `(option: DropdownOption) => void` | — | 옵션 선택 시 호출되는 콜백 |
|
|
618
|
+
| `variant` | `"default"` \| `"choosing"` \| `"error"` \| `"selected"` | `"default"` | 트리거 상태. `choosing`/`selected`는 자동 적용 |
|
|
619
|
+
| `size` | `"large"` \| `"medium"` \| `"small"` | `"medium"` | 트리거 높이. large: 44px, medium: 40px, small: 36px |
|
|
620
|
+
| `heading` | `string` | — | 상단 라벨 텍스트. 미지정 시 라벨 미표시 |
|
|
621
|
+
| `required` | `boolean` | `false` | 라벨 우측 `*` 표시 여부 |
|
|
622
|
+
| `leadingContent` | `ReactNode` | — | 트리거 텍스트 좌측에 표시할 아이콘 등 |
|
|
623
|
+
| `description` | `ReactNode` | — | 하단 안내 문구 |
|
|
624
|
+
| `placeholder` | `ReactNode` | `"선택해주세요."` | 미선택 시 표시할 콘텐츠. 문자열 또는 JSX 전달 가능 |
|
|
625
|
+
| `disabled` | `boolean` | `false` | 비활성화 |
|
|
626
|
+
| `type` | `"basic"` \| `"search"` | `"basic"` | `"search"` 시 드롭다운 상단에 검색 입력란 표시, 실시간 필터링 |
|
|
627
|
+
| `align` | `"left"` \| `"center"` | `"left"` | 옵션 텍스트 정렬 |
|
|
628
|
+
| `content` | `boolean` | `false` | `true` 시 옵션의 `icon`이 라벨 좌측에 표시 |
|
|
629
|
+
| `buttonWidth` | `number` | — | 트리거 버튼 너비(px). 미지정 시 부모 너비를 따름 |
|
|
630
|
+
| `descriptionWidth` | `number` | — | 하단 안내 문구 너비(px). 미지정 시 부모 너비를 따름 |
|
|
631
|
+
| `textColor` | `string` | — | 옵션 라벨 텍스트 색상 커스터마이징 (예: `"#6366f1"`) |
|
|
632
|
+
| `customStyle` | `CSSProperties` | — | 루트 엘리먼트 인라인 스타일 |
|
|
564
633
|
|
|
565
634
|
유의사항:
|
|
566
635
|
|
|
@@ -673,6 +742,65 @@ function SearchDropdown() {
|
|
|
673
742
|
|
|
674
743
|
## Content
|
|
675
744
|
|
|
745
|
+
### Avatar
|
|
746
|
+
|
|
747
|
+
사용자 아바타 이미지를 표시하는 컴포넌트입니다.
|
|
748
|
+
이미지 경로를 전달하지 않으면 기본 아바타 이미지를 사용합니다.
|
|
749
|
+
|
|
750
|
+
```tsx
|
|
751
|
+
import { Avatar } from "@idbrnd/design-system";
|
|
752
|
+
|
|
753
|
+
<Avatar />
|
|
754
|
+
<Avatar src={user.thumbnail} />
|
|
755
|
+
<Avatar size="xlarge" circular />
|
|
756
|
+
<Avatar size="xlarge" interactionActive onClick={() => console.log("click")} />
|
|
757
|
+
```
|
|
758
|
+
|
|
759
|
+
| Prop | 타입 | 기본값 | 설명 |
|
|
760
|
+
| ------------------- | -------------------------------------------------- | --------- | ---------------------------------------------------------------- |
|
|
761
|
+
| `src` | `string` | — | 표시할 아바타 이미지 경로. 미지정 시 기본 아바타 사용 |
|
|
762
|
+
| `size` | `"small"` \| `"medium"` \| `"large"` \| `"xlarge"` | `"small"` | 크기. small: 24x24, medium: 32x32, large: 40x40, xlarge: 48x48 |
|
|
763
|
+
| `circular` | `boolean` | `false` | `true`면 원형(`border-radius: 50%`)으로 표시 |
|
|
764
|
+
| `interactionActive` | `boolean` | `false` | `true`면 바깥 2px 인터랙션 영역과 hover/focus/active 상태를 적용 |
|
|
765
|
+
| `onClick` | `MouseEventHandler<HTMLElement>` | — | 클릭 시 호출되는 콜백 |
|
|
766
|
+
| `customStyle` | `CSSProperties` | — | 이미지에 적용할 추가 인라인 스타일 |
|
|
767
|
+
|
|
768
|
+
유의사항:
|
|
769
|
+
|
|
770
|
+
- `alt`는 public prop으로 받지 않습니다. 내부적으로 고정된 `"User avatar"`를 사용합니다.
|
|
771
|
+
- `interactionActive={true}`일 때만 포인터 커서가 적용됩니다.
|
|
772
|
+
|
|
773
|
+
### AvatarStack
|
|
774
|
+
|
|
775
|
+
작은 아바타를 최대 5개까지 겹쳐서 보여주는 컴포넌트입니다.
|
|
776
|
+
내부적으로 `Avatar`의 기본 `small` 형태를 사용하며, 각 아바타는 내부 1px 흰색 여백을 가진 상태로 렌더링됩니다.
|
|
777
|
+
|
|
778
|
+
```tsx
|
|
779
|
+
import { AvatarStack } from "@idbrnd/design-system";
|
|
780
|
+
|
|
781
|
+
<AvatarStack srcList={[memberA.thumbnail, memberB.thumbnail, memberC.thumbnail]} />
|
|
782
|
+
|
|
783
|
+
<AvatarStack
|
|
784
|
+
srcList={[
|
|
785
|
+
memberA.thumbnail,
|
|
786
|
+
undefined,
|
|
787
|
+
memberC.thumbnail,
|
|
788
|
+
]}
|
|
789
|
+
/>
|
|
790
|
+
|
|
791
|
+
<AvatarStack srcList={visibleMembers.map((user) => user.thumbnail)} />
|
|
792
|
+
```
|
|
793
|
+
|
|
794
|
+
| Prop | 타입 | 기본값 | 설명 |
|
|
795
|
+
| --------- | --------------------------------- | --------- | ----------------------------------------------------------------------------------------------------- |
|
|
796
|
+
| `srcList` | `(string \| null \| undefined)[]` | `[]` | 아바타 슬롯 목록. 각 항목이 한 명의 사용자 슬롯을 의미하며, `undefined`/`null`이면 기본 아바타를 표시 |
|
|
797
|
+
| `size` | `"small"` | `"small"` | 크기. 현재는 `small`만 지원 |
|
|
798
|
+
|
|
799
|
+
유의사항:
|
|
800
|
+
|
|
801
|
+
- `srcList`를 3개 주면 3개만 표시하고, 6개 이상 주면 앞 5개만 표시합니다.
|
|
802
|
+
- 이미지가 없는 사용자도 `srcList`에 `undefined`를 넣으면 기본 아바타로 포함할 수 있습니다.
|
|
803
|
+
|
|
676
804
|
### ContentBadge
|
|
677
805
|
|
|
678
806
|
텍스트에 variant와 size를 적용하는 인라인 배지 컴포넌트입니다.
|
|
@@ -778,6 +906,11 @@ import type {
|
|
|
778
906
|
ToggleSwitchSize,
|
|
779
907
|
ToastShowOptions,
|
|
780
908
|
SnackbarShowOptions,
|
|
909
|
+
TooltipProps,
|
|
910
|
+
TooltipPosition,
|
|
911
|
+
TooltipVariant,
|
|
912
|
+
TooltipTrigger,
|
|
913
|
+
TooltipContent,
|
|
781
914
|
ContentBadgeProps,
|
|
782
915
|
ContentBadgeVariant,
|
|
783
916
|
ContentBadgeSize,
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
import type { CSSProperties, ImgHTMLAttributes, MouseEventHandler } from "react";
|
|
2
|
+
/**
|
|
3
|
+
* Avatar 크기 옵션.
|
|
4
|
+
* @defaultValue `'small'`
|
|
5
|
+
*/
|
|
6
|
+
export type AvatarSize = "small" | "medium" | "large" | "xlarge";
|
|
7
|
+
/** `Avatar` 컴포넌트 public props. */
|
|
8
|
+
export interface AvatarProps extends Omit<ImgHTMLAttributes<HTMLImageElement>, "style" | "width" | "height" | "draggable" | "onClick" | "tabIndex" | "className" | "alt"> {
|
|
9
|
+
/**
|
|
10
|
+
* 표시할 이미지 경로.
|
|
11
|
+
* `svg`, `png`, `jpg`, `webp` 등 브라우저가 렌더링할 수 있는 이미지 URL 문자열을 전달할 수 있다.
|
|
12
|
+
* 미지정 시 기본 아바타 이미지를 사용한다.
|
|
13
|
+
*/
|
|
14
|
+
src?: string;
|
|
15
|
+
/**
|
|
16
|
+
* 아바타 크기.
|
|
17
|
+
* - `small`: 24x24
|
|
18
|
+
* - `medium`: 32x32
|
|
19
|
+
* - `large`: 40x40
|
|
20
|
+
* - `xlarge`: 48x48
|
|
21
|
+
* @defaultValue `'small'`
|
|
22
|
+
*/
|
|
23
|
+
size?: AvatarSize;
|
|
24
|
+
/**
|
|
25
|
+
* 아바타를 원형으로 표시할지 여부.
|
|
26
|
+
* `true`면 `border-radius: 50%`가 적용된다.
|
|
27
|
+
* @defaultValue `false`
|
|
28
|
+
*/
|
|
29
|
+
circular?: boolean;
|
|
30
|
+
/** 아바타 이미지에 적용할 추가 인라인 스타일. */
|
|
31
|
+
customStyle?: CSSProperties;
|
|
32
|
+
/**
|
|
33
|
+
* 인터랙션 상태를 활성화할지 여부.
|
|
34
|
+
* `true`면 아바타 바깥에 2px 인터랙션 영역이 생기고, hover/focus/active 시각 상태가 적용된다.
|
|
35
|
+
* @defaultValue `false`
|
|
36
|
+
*/
|
|
37
|
+
interactionActive?: boolean;
|
|
38
|
+
/** 아바타 클릭 시 호출되는 콜백. */
|
|
39
|
+
onClick?: MouseEventHandler<HTMLElement>;
|
|
40
|
+
}
|
|
41
|
+
/** 기본 아바타 또는 전달받은 이미지 경로를 렌더링하는 Avatar 컴포넌트. */
|
|
42
|
+
declare function Avatar({ src, size, circular, interactionActive, onClick, customStyle, ...rest }: AvatarProps): import("react/jsx-runtime").JSX.Element;
|
|
43
|
+
export default Avatar;
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* AvatarStack 크기 옵션.
|
|
3
|
+
* 현재는 `small`만 지원한다.
|
|
4
|
+
* @defaultValue `'small'`
|
|
5
|
+
*/
|
|
6
|
+
export type AvatarStackSize = "small";
|
|
7
|
+
/**
|
|
8
|
+
* AvatarStack 슬롯에 들어갈 아바타 이미지 경로.
|
|
9
|
+
* `null`, `undefined`, 빈 문자열(`""`)이면 기본 아바타를 렌더링한다.
|
|
10
|
+
*/
|
|
11
|
+
export type AvatarStackSrc = string | null | undefined;
|
|
12
|
+
/** `AvatarStack` 컴포넌트 public props. */
|
|
13
|
+
export interface AvatarStackProps {
|
|
14
|
+
/**
|
|
15
|
+
* 스택에 표시할 아바타 슬롯 목록.
|
|
16
|
+
* - 배열의 각 항목이 한 명의 사용자 슬롯을 의미한다.
|
|
17
|
+
* - 항목 값이 `null`, `undefined`, 빈 문자열(`""`)이면 해당 사용자 자리에 기본 아바타를 표시한다.
|
|
18
|
+
* - 전달한 개수만큼만 표시한다.
|
|
19
|
+
* - 5개보다 많이 전달하면 앞의 5개만 표시한다.
|
|
20
|
+
* - 이미지가 있는 사용자는 `src` 문자열을, 없는 사용자는 `undefined` 또는 빈 문자열을 전달하면 된다.
|
|
21
|
+
* @defaultValue `[]`
|
|
22
|
+
*/
|
|
23
|
+
srcList?: AvatarStackSrc[];
|
|
24
|
+
/**
|
|
25
|
+
* 아바타 스택 크기.
|
|
26
|
+
* 현재는 `small`만 지원한다.
|
|
27
|
+
* - `small`: 24x24
|
|
28
|
+
* @defaultValue `'small'`
|
|
29
|
+
*/
|
|
30
|
+
size?: AvatarStackSize;
|
|
31
|
+
}
|
|
32
|
+
/** 여러 개의 아바타를 겹쳐서 보여주는 AvatarStack 컴포넌트. */
|
|
33
|
+
declare function AvatarStack({ srcList, size, }: AvatarStackProps): import("react/jsx-runtime").JSX.Element | null;
|
|
34
|
+
export default AvatarStack;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import type { SelectProps } from './Select.types';
|
|
2
2
|
export type { SelectAlign, SelectProps, SelectSize, SelectType, SelectVariant, } from './Select.types';
|
|
3
|
-
declare function Select({ variant, size, heading, required, leadingContent, description, disabled, placeholder,
|
|
3
|
+
declare function Select({ variant, size, heading, required, leadingContent, description, disabled, placeholder, selectedValue, onSelect, options, type, align, content, buttonWidth, descriptionWidth, customStyle, textColor, }: SelectProps): import("react/jsx-runtime").JSX.Element;
|
|
4
4
|
export default Select;
|
|
@@ -44,7 +44,7 @@ export interface SelectProps {
|
|
|
44
44
|
*/
|
|
45
45
|
placeholder?: ReactNode;
|
|
46
46
|
/** 현재 선택된 옵션. */
|
|
47
|
-
|
|
47
|
+
selectedValue?: DropdownOption | null;
|
|
48
48
|
/** 옵션 선택 시 콜백. */
|
|
49
49
|
onSelect?: (option: DropdownOption) => void;
|
|
50
50
|
/** 드롭다운 옵션 목록. (기본값: 빈 배열) */
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import type { TooltipProps, TooltipState } from './Tooltip.types';
|
|
2
|
+
export interface TooltipPortalProps {
|
|
3
|
+
tooltip: TooltipState | null;
|
|
4
|
+
backgroundColor?: string;
|
|
5
|
+
contentColor?: string;
|
|
6
|
+
}
|
|
7
|
+
export declare function TooltipPortal({ tooltip, backgroundColor, contentColor }: TooltipPortalProps): import("react").ReactPortal | null;
|
|
8
|
+
declare function Tooltip({ content, trigger, variant, position, arrow, as, visibleOnEllipsis, // 자식 엘리먼트에 말줄임(ellipsis)이 발생했을 때만 툴팁을 표시.
|
|
9
|
+
backgroundColor, contentColor, customStyle, children, }: TooltipProps): import("react/jsx-runtime").JSX.Element;
|
|
10
|
+
export default Tooltip;
|
|
@@ -0,0 +1,97 @@
|
|
|
1
|
+
import type { CSSProperties, ReactNode } from 'react';
|
|
2
|
+
/**
|
|
3
|
+
* 툴팁이 표시될 위치 (12방향).
|
|
4
|
+
*
|
|
5
|
+
* 첫 번째 단어 = 툴팁이 놓이는 방향
|
|
6
|
+
* 두 번째 단어 = 화살표가 치우치는 방향
|
|
7
|
+
*
|
|
8
|
+
* @example
|
|
9
|
+
* 'top' → 트리거 위 중앙
|
|
10
|
+
* 'top-left' → 트리거 위, 왼쪽 정렬
|
|
11
|
+
* 'right-bottom' → 트리거 오른쪽, 아래 정렬
|
|
12
|
+
*/
|
|
13
|
+
export type TooltipPosition = 'top-left' | 'top' | 'top-right' | 'right-top' | 'right' | 'right-bottom' | 'bottom-left' | 'bottom' | 'bottom-right' | 'left-top' | 'left' | 'left-bottom';
|
|
14
|
+
/**
|
|
15
|
+
* 툴팁 크기 변형.
|
|
16
|
+
* - `'default'` : 넉넉한 패딩 (8px 12px)
|
|
17
|
+
* - `'compact'` : 작은 패딩 (4px 12px)
|
|
18
|
+
*/
|
|
19
|
+
export type TooltipVariant = 'default' | 'compact';
|
|
20
|
+
/**
|
|
21
|
+
* 툴팁 트리거 방식.
|
|
22
|
+
* - `'hover'` : 마우스를 올리면 표시, 벗어나면 숨김
|
|
23
|
+
* - `'click'` : 클릭하면 토글, 외부 클릭 시 숨김
|
|
24
|
+
*/
|
|
25
|
+
export type TooltipTrigger = 'hover' | 'click';
|
|
26
|
+
/**
|
|
27
|
+
* 툴팁 콘텐츠 타입.
|
|
28
|
+
*
|
|
29
|
+
* - `ReactNode` — 단순 텍스트나 JSX를 바로 전달
|
|
30
|
+
* - `(close) => ReactNode` — 툴팁을 닫는 `close` 콜백을 받는 render function.
|
|
31
|
+
* 닫기 버튼이나 액션 버튼 등 인터랙션이 필요할 때 사용.
|
|
32
|
+
*
|
|
33
|
+
* @example
|
|
34
|
+
* // 단순 텍스트
|
|
35
|
+
* content="안녕하세요"
|
|
36
|
+
*
|
|
37
|
+
* // render function — 닫기 버튼 + 액션
|
|
38
|
+
* content={(close) => (
|
|
39
|
+
* <div>
|
|
40
|
+
* <span>메시지</span>
|
|
41
|
+
* <button onClick={close}>닫기</button>
|
|
42
|
+
* </div>
|
|
43
|
+
* )}
|
|
44
|
+
*/
|
|
45
|
+
export type TooltipContent = ReactNode | ((close: () => void) => ReactNode);
|
|
46
|
+
export interface TooltipProps {
|
|
47
|
+
/**
|
|
48
|
+
* 툴팁에 표시할 내용.
|
|
49
|
+
* 문자열·JSX를 직접 전달하거나, `(close) => ReactNode` 형태의 render function을 전달.
|
|
50
|
+
*/
|
|
51
|
+
content: TooltipContent;
|
|
52
|
+
/**
|
|
53
|
+
* 트리거 방식.
|
|
54
|
+
* @default 'hover'
|
|
55
|
+
*/
|
|
56
|
+
trigger?: TooltipTrigger;
|
|
57
|
+
/**
|
|
58
|
+
* 크기 변형.
|
|
59
|
+
* @default 'default'
|
|
60
|
+
*/
|
|
61
|
+
variant?: TooltipVariant;
|
|
62
|
+
/**
|
|
63
|
+
* 툴팁이 표시될 위치 (12방향).
|
|
64
|
+
* @default 'top'
|
|
65
|
+
*/
|
|
66
|
+
position?: TooltipPosition;
|
|
67
|
+
/**
|
|
68
|
+
* 화살표(꼬리표) 표시 여부.
|
|
69
|
+
* @default true
|
|
70
|
+
*/
|
|
71
|
+
arrow?: boolean;
|
|
72
|
+
/**
|
|
73
|
+
* 트리거를 감싸는 래퍼 HTML 태그.
|
|
74
|
+
* 기본값은 `'span'`. 테이블 셀 등에서는 `'td'`, `'div'` 등으로 변경.
|
|
75
|
+
* @default 'span'
|
|
76
|
+
*/
|
|
77
|
+
as?: keyof JSX.IntrinsicElements;
|
|
78
|
+
/**
|
|
79
|
+
* `true`이면 자식 엘리먼트에 말줄임(ellipsis)이 발생했을 때만 툴팁을 표시.
|
|
80
|
+
* @default false
|
|
81
|
+
*/
|
|
82
|
+
visibleOnEllipsis?: boolean;
|
|
83
|
+
/** 툴팁 배경색 커스터마이징. 미지정 시 디자인 토큰 기본색 사용. */
|
|
84
|
+
backgroundColor?: string;
|
|
85
|
+
/** 툴팁 텍스트·아이콘 색상 커스터마이징. 미지정 시 디자인 토큰 기본색 사용. */
|
|
86
|
+
contentColor?: string;
|
|
87
|
+
/** 툴팁 박스에 적용할 추가 인라인 스타일. */
|
|
88
|
+
customStyle?: CSSProperties;
|
|
89
|
+
/** 툴팁을 트리거할 자식 엘리먼트. */
|
|
90
|
+
children: ReactNode;
|
|
91
|
+
}
|
|
92
|
+
/** 내부용 — useTooltip hook이 관리하는 툴팁 상태. */
|
|
93
|
+
export interface TooltipState {
|
|
94
|
+
content: ReactNode;
|
|
95
|
+
rect: DOMRect;
|
|
96
|
+
position: TooltipPosition;
|
|
97
|
+
}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import type { ReactNode } from 'react';
|
|
2
|
+
import type { TooltipPosition, TooltipState } from './Tooltip.types';
|
|
3
|
+
export declare function calcTooltipPosition(rect: DOMRect, tooltipEl: HTMLDivElement, position: TooltipPosition): {
|
|
4
|
+
top: number;
|
|
5
|
+
left: number;
|
|
6
|
+
};
|
|
7
|
+
export declare function useTooltip(): {
|
|
8
|
+
readonly tooltip: TooltipState | null;
|
|
9
|
+
readonly showTooltip: (el: HTMLElement, content: ReactNode, position: TooltipPosition) => void;
|
|
10
|
+
readonly hideTooltip: () => void;
|
|
11
|
+
};
|
package/dist/index.d.ts
CHANGED
|
@@ -32,6 +32,10 @@ export type { PushBadgeProps, PushBadgeVariant, } from "./components/Feedback/Pu
|
|
|
32
32
|
export type { ToastShowOptions, ToastVariant, } from "./components/Feedback/Toast/Toast";
|
|
33
33
|
export type { SnackbarShowOptions, SnackbarVariant, } from "./components/Feedback/Snackbar/Snackbar";
|
|
34
34
|
export type { ClipProps, CustomSpinnerProps, FadeSpinnerProps, } from "./components/Spinner/Spinner";
|
|
35
|
+
export { default as Avatar } from "./components/Content/Avatar/Avatar";
|
|
36
|
+
export type { AvatarProps, AvatarSize } from "./components/Content/Avatar/Avatar";
|
|
37
|
+
export { default as AvatarStack } from "./components/Content/AvatarStack/AvatarStack";
|
|
38
|
+
export type { AvatarStackProps, AvatarStackSrc, AvatarStackSize, } from "./components/Content/AvatarStack/AvatarStack";
|
|
35
39
|
export { default as ContentBadge } from "./components/Content/ContentBadge/ContentBadge";
|
|
36
40
|
export type { ContentBadgeProps, ContentBadgeVariant, ContentBadgeSize, } from "./components/Content/ContentBadge/ContentBadge";
|
|
37
41
|
export { default as StateBadge } from "./components/Content/StateBadge/StateBadge";
|
|
@@ -40,3 +44,5 @@ export { default as Select } from "./components/Select/Select";
|
|
|
40
44
|
export type { SelectProps, SelectVariant, SelectSize, SelectType, SelectAlign, } from "./components/Select/Select";
|
|
41
45
|
export { default as Dropdown } from "./components/Dropdown/Dropdown";
|
|
42
46
|
export type { DropdownProps, DropdownType, DropdownAlign, DropdownOption, } from "./components/Dropdown/Dropdown.types";
|
|
47
|
+
export { default as Tooltip } from "./components/Tooltip/Tooltip";
|
|
48
|
+
export type { TooltipProps, TooltipPosition, TooltipVariant, TooltipTrigger, TooltipContent, } from "./components/Tooltip/Tooltip.types";
|