@idbrnd/design-system 2.1.2 → 2.1.3

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 (4) hide show
  1. package/README.md +11 -2
  2. package/dist/components/Tooltip/Tooltip.types.d.ts +8 -6
  3. package/dist/index.js +615 -607
  4. package/package.json +1 -1
package/README.md CHANGED
@@ -557,7 +557,7 @@ import { PushBadge } from "@idbrnd/design-system";
557
557
 
558
558
  ### Tooltip
559
559
 
560
- 트리거 엘리먼트에 마우스를 올리거나 클릭하면 말풍선 형태의 안내 텍스트를 표시하는 컴포넌트입니다.
560
+ 트리거 엘리먼트에 마우스를 올리거나 클릭하면 말풍선 형태의 안내 텍스트를 표시하는 컴포넌트입니다. `trigger="always"`로 항상 표시되는 고정 안내 형태로도 사용할 수 있습니다.
561
561
 
562
562
  ```tsx
563
563
  import { Tooltip } from "@idbrnd/design-system";
@@ -584,6 +584,14 @@ import { Tooltip } from "@idbrnd/design-system";
584
584
  </Tooltip>
585
585
  ```
586
586
 
587
+ **항상 표시 (고정 안내)**
588
+
589
+ ```tsx
590
+ <Tooltip content="필수 입력 항목입니다" trigger="always" position="right">
591
+ <InfoIcon />
592
+ </Tooltip>
593
+ ```
594
+
587
595
  **말줄임 시에만 표시**
588
596
 
589
597
  ```tsx
@@ -603,7 +611,7 @@ import { Tooltip } from "@idbrnd/design-system";
603
611
  | Prop | 타입 | 기본값 | 설명 |
604
612
  | ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | ----------------------------------------------------------------------------- |
605
613
  | `content` | `ReactNode \| ((close: () => void) => ReactNode)` | — | **(필수)** 툴팁에 표시할 내용. render function 전달 시 `close` 콜백 사용 가능 |
606
- | `trigger` | `"hover"` \| `"click"` | `"hover"` | 트리거 방식 |
614
+ | `trigger` | `"hover"` \| `"click"` \| `"always"` | `"hover"` | 트리거 방식. `"always"`는 항상 표시되는 고정 안내 |
607
615
  | `variant` | `"default"` \| `"compact"` | `"default"` | 크기 변형. default: 8px 12px, compact: 4px 12px |
608
616
  | `position` | `"top"` \| `"top-left"` \| `"top-right"` \| `"bottom"` \| `"bottom-left"` \| `"bottom-right"` \| `"left"` \| `"left-top"` \| `"left-bottom"` \| `"right"` \| `"right-top"` \| `"right-bottom"` | `"top"` | 툴팁 표시 위치 (12방향) |
609
617
  | `arrow` | `boolean` | `true` | 화살표(꼬리표) 표시 여부 |
@@ -617,6 +625,7 @@ import { Tooltip } from "@idbrnd/design-system";
617
625
  유의사항:
618
626
 
619
627
  - `trigger="click"` 시 외부 클릭, 스크롤, 리사이즈 시 자동으로 닫힙니다.
628
+ - `trigger="always"` 시 마운트 시점부터 항상 표시되며, 스크롤·리사이즈 시 트리거를 따라 위치를 재계산합니다. `visibleOnEllipsis`와 함께 쓰면 말줄임이 있을 때만 표시됩니다.
620
629
  - `position`의 첫 번째 단어는 툴팁이 놓이는 방향, 두 번째 단어는 화살표가 치우치는 방향입니다.
621
630
  - `content`에 render function을 전달하면 닫기 버튼 등 인터랙션을 구현할 수 있습니다.
622
631
  - 툴팁은 `document.body`에 포탈로 렌더링됩니다.
package/dist/components/Tooltip/Tooltip.types.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import type { CSSProperties, ReactNode } from 'react';
1
+ import type { CSSProperties, ReactNode } from "react";
2
2
  /**
3
3
  * 툴팁이 표시될 위치 (12방향).
4
4
  *
@@ -10,19 +10,21 @@ import type { CSSProperties, ReactNode } from 'react';
10
10
  * 'top-left' → 트리거 위, 왼쪽 정렬
11
11
  * 'right-bottom' → 트리거 오른쪽, 아래 정렬
12
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';
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
14
  /**
15
15
  * 툴팁 크기 변형.
16
16
  * - `'default'` : 넉넉한 패딩 (8px 12px)
17
17
  * - `'compact'` : 작은 패딩 (4px 12px)
18
18
  */
19
- export type TooltipVariant = 'default' | 'compact';
19
+ export type TooltipVariant = "default" | "compact";
20
20
  /**
21
21
  * 툴팁 트리거 방식.
22
- * - `'hover'` : 마우스를 올리면 표시, 벗어나면 숨김
23
- * - `'click'` : 클릭하면 토글, 외부 클릭 시 숨김
22
+ * - `'hover'` : 마우스를 올리면 표시, 벗어나면 숨김
23
+ * - `'click'` : 클릭하면 토글, 외부 클릭 시 숨김
24
+ * - `'always'` : 마운트 시점부터 항상 표시 (특정 화면·요소에 고정된 안내 정보를 노출할 때).
25
+ * 스크롤·리사이즈 시 트리거를 따라 위치를 재계산.
24
26
  */
25
- export type TooltipTrigger = 'hover' | 'click';
27
+ export type TooltipTrigger = "hover" | "click" | "always";
26
28
  /**
27
29
  * 툴팁 콘텐츠 타입.
28
30
  *