@idbrnd/design-system 2.1.2 → 2.2.0

package/README.md

@@ -1,6 +1,6 @@
 # @idbrnd/design-system
 
-![Version](https://img.shields.io/badge/version-2.1.2-4B5FE1?style=flat-square)
+![Version](https://img.shields.io/badge/version-2.2.0-4B5FE1?style=flat-square)
 ![React](https://img.shields.io/badge/React-18.3.1-61DAFB?style=flat-square&logo=react&logoColor=white)
 ![Vite](https://img.shields.io/badge/Vite-7.3.0-646CFF?style=flat-square&logo=vite&logoColor=white)
 ![TypeScript](https://img.shields.io/badge/TypeScript-5.9.3-3178C6?style=flat-square&logo=typescript&logoColor=white)
@@ -557,7 +557,7 @@ import { PushBadge } from "@idbrnd/design-system";
 
 ### Tooltip
 
-트리거 엘리먼트에 마우스를 올리거나 클릭하면 말풍선 형태의 안내 텍스트를 표시하는 컴포넌트입니다.
+트리거 엘리먼트에 마우스를 올리거나 클릭하면 말풍선 형태의 안내 텍스트를 표시하는 컴포넌트입니다. `trigger="always"`로 항상 표시되는 고정 안내 형태로도 사용할 수 있습니다.
 
 ```tsx
 import { Tooltip } from "@idbrnd/design-system";
@@ -584,6 +584,14 @@ import { Tooltip } from "@idbrnd/design-system";
 </Tooltip>
 ```
 
+**항상 표시 (고정 안내)**
+
+```tsx
+<Tooltip content="필수 입력 항목입니다" trigger="always" position="right">
+  <InfoIcon />
+</Tooltip>
+```
+
 **말줄임 시에만 표시**
 
 ```tsx
@@ -603,7 +611,7 @@ import { Tooltip } from "@idbrnd/design-system";
 | Prop                | 타입                                                                                                                                                                                           | 기본값      | 설명                                                                          |
 | ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | ----------------------------------------------------------------------------- |
 | `content`           | `ReactNode \| ((close: () => void) => ReactNode)`                                                                                                                                              | —           | **(필수)** 툴팁에 표시할 내용. render function 전달 시 `close` 콜백 사용 가능 |
-| `trigger`           | `"hover"` \| `"click"`                                                                                                                                                                         | `"hover"`   | 트리거 방식                                                                   |
+| `trigger`           | `"hover"` \| `"click"` \| `"always"`                                                                                                                                                           | `"hover"`   | 트리거 방식. `"always"`는 항상 표시되는 고정 안내                             |
 | `variant`           | `"default"` \| `"compact"`                                                                                                                                                                     | `"default"` | 크기 변형. default: 8px 12px, compact: 4px 12px                               |
 | `position`          | `"top"` \| `"top-left"` \| `"top-right"` \| `"bottom"` \| `"bottom-left"` \| `"bottom-right"` \| `"left"` \| `"left-top"` \| `"left-bottom"` \| `"right"` \| `"right-top"` \| `"right-bottom"` | `"top"`     | 툴팁 표시 위치 (12방향)                                                       |
 | `arrow`             | `boolean`                                                                                                                                                                                      | `true`      | 화살표(꼬리표) 표시 여부                                                      |
@@ -617,6 +625,7 @@ import { Tooltip } from "@idbrnd/design-system";
 유의사항:
 
 - `trigger="click"` 시 외부 클릭, 스크롤, 리사이즈 시 자동으로 닫힙니다.
+- `trigger="always"` 시 마운트 시점부터 항상 표시되며, 스크롤·리사이즈 시 트리거를 따라 위치를 재계산합니다. `visibleOnEllipsis`와 함께 쓰면 말줄임이 있을 때만 표시됩니다.
 - `position`의 첫 번째 단어는 툴팁이 놓이는 방향, 두 번째 단어는 화살표가 치우치는 방향입니다.
 - `content`에 render function을 전달하면 닫기 버튼 등 인터랙션을 구현할 수 있습니다.
 - 툴팁은 `document.body`에 포탈로 렌더링됩니다.
@@ -1224,17 +1233,42 @@ function Example() {
 />
 ```
 
-| Prop          | 타입                                 | 기본값     | 설명                                              |
-| ------------- | ------------------------------------ | ---------- | ------------------------------------------------- |
-| `items`       | `SegmentedControlItem[]`             | —          | **(필수)** 세그먼트 목록                          |
-| `value`       | `string`                             | —          | **(필수)** 현재 선택된 세그먼트 값                |
-| `onChange`    | `(value: string) => void`            | —          | 세그먼트 변경 콜백                                |
-| `variant`     | `"basic"` \| `"icon"`                | `"basic"`  | `"icon"`: 아이콘 전용 정사각형 세그먼트           |
-| `type`        | `"fill"` \| `"outlined"`             | `"fill"`   | 컴포넌트 외형                                     |
-| `size`        | `"small"` \| `"medium"` \| `"large"` | `"medium"` | 크기. small: 32px, medium: 40px, large: 48px      |
-| `icon`        | `boolean`                            | `false`    | `variant="basic"`에서 아이콘을 텍스트와 함께 표시 |
-| `label`       | `string`                             | —          | 스크린 리더용 그룹 레이블 (`aria-label`)          |
-| `customStyle` | `CSSProperties`                      | —          | 추가 인라인 스타일                                |
+**레이아웃 (`layout="hug" | "fill"`)**
+
+```tsx
+{
+  /* hug: 내부 세그먼트 크기에 맞춰 컨테이너가 축소됩니다 */
+}
+<SegmentedControl
+  items={items}
+  value={period}
+  onChange={setPeriod}
+  layout="hug"
+/>;
+
+{
+  /* fill: 부모 너비를 최대한 채우고 세그먼트가 균등하게 늘어납니다 (basic 기본값) */
+}
+<SegmentedControl
+  items={items}
+  value={period}
+  onChange={setPeriod}
+  layout="fill"
+/>;
+```
+
+| Prop          | 타입                                 | 기본값                                                 | 설명                                                                       |
+| ------------- | ------------------------------------ | ------------------------------------------------------ | -------------------------------------------------------------------------- |
+| `items`       | `SegmentedControlItem[]`             | —                                                      | **(필수)** 세그먼트 목록                                                   |
+| `value`       | `string`                             | —                                                      | **(필수)** 현재 선택된 세그먼트 값                                         |
+| `onChange`    | `(value: string) => void`            | —                                                      | 세그먼트 변경 콜백                                                         |
+| `variant`     | `"basic"` \| `"icon"`                | `"basic"`                                              | `"icon"`: 아이콘 전용 정사각형 세그먼트                                    |
+| `type`        | `"fill"` \| `"outlined"`             | `"fill"`                                               | 컴포넌트 외형                                                              |
+| `size`        | `"small"` \| `"medium"` \| `"large"` | `"medium"`                                             | 크기. small: 32px, medium: 40px, large: 48px                               |
+| `layout`      | `"hug"` \| `"fill"`                  | `variant="basic"`: `"fill"`, `variant="icon"`: `"hug"` | `"hug"`: 내부 세그먼트 크기에 맞춰 축소, `"fill"`: 부모 너비를 최대한 채움 |
+| `icon`        | `boolean`                            | `false`                                                | `variant="basic"`에서 아이콘을 텍스트와 함께 표시                          |
+| `label`       | `string`                             | —                                                      | 스크린 리더용 그룹 레이블 (`aria-label`)                                   |
+| `customStyle` | `CSSProperties`                      | —                                                      | 추가 인라인 스타일                                                         |
 
 **`SegmentedControlItem`**
 
@@ -1248,6 +1282,7 @@ function Example() {
 
 유의사항:
 
+- `layout`을 지정하지 않으면 `variant`별 기본값(`basic`="fill", `icon`="hug")이 적용됩니다.
 - `variant="icon"` 사용 시 각 item에 `ariaLabel`을 반드시 지정해야 합니다. 미지정 시 개발 모드에서 경고가 출력됩니다.
 - `variant="basic"`에서 `icon=true`이면 세그먼트 왼쪽에 아이콘, 나머지 공간에 텍스트가 배치됩니다.
 - `value`에 해당하는 item이 없으면 슬라이딩 인디케이터가 숨겨지고, 첫 번째 활성 항목에 키보드 포커스가 유지됩니다.
@@ -1893,6 +1928,7 @@ import type {
   SegmentedControlVariant,
   SegmentedControlType,
   SegmentedControlSize,
+  SegmentedControlLayout,
   SegmentedControlItem,
 
   // Tab

package/dist/components/SegmentedControl/SegmentedControl.d.ts

@@ -2,6 +2,7 @@ import { type CSSProperties, type ReactNode } from "react";
 export type SegmentedControlVariant = "basic" | "icon";
 export type SegmentedControlType = "fill" | "outlined";
 export type SegmentedControlSize = "small" | "medium" | "large";
+export type SegmentedControlLayout = "hug" | "fill";
 export interface SegmentedControlItem {
     value: string;
     label?: ReactNode;
@@ -14,6 +15,14 @@ export interface SegmentedControlProps {
     variant?: SegmentedControlVariant;
     type?: SegmentedControlType;
     size?: SegmentedControlSize;
+    /**
+     * 컨테이너 크기 결정 방식.
+     * - "hug": 내부 요소(세그먼트) 크기에 맞춰 컨테이너가 축소됩니다.
+     * - "fill": 부모 요소의 너비를 최대한 채우고, 세그먼트가 균등하게 늘어납니다.
+     *
+     * 기본값은 variant별로 다릅니다: basic="fill", icon="hug"
+     */
+    layout?: SegmentedControlLayout;
     /** basic variant에서 icon을 함께 표시할지 여부 */
     icon?: boolean;
     /** 스크린 리더용 그룹 레이블 */
@@ -23,5 +32,5 @@ export interface SegmentedControlProps {
     onChange?: (value: string) => void;
     customStyle?: CSSProperties;
 }
-declare function SegmentedControl({ variant, type, size, icon, label, items, value, onChange, customStyle, }: SegmentedControlProps): import("react/jsx-runtime").JSX.Element;
+declare function SegmentedControl({ variant, type, size, layout, icon, label, items, value, onChange, customStyle, }: SegmentedControlProps): import("react/jsx-runtime").JSX.Element;
 export default SegmentedControl;

package/dist/components/Tooltip/Tooltip.types.d.ts

@@ -1,4 +1,4 @@
-import type { CSSProperties, ReactNode } from 'react';
+import type { CSSProperties, ReactNode } from "react";
 /**
  * 툴팁이 표시될 위치 (12방향).
  *
@@ -10,19 +10,21 @@ import type { CSSProperties, ReactNode } from 'react';
  * 'top-left'     → 트리거 위, 왼쪽 정렬
  * 'right-bottom' → 트리거 오른쪽, 아래 정렬
  */
-export type TooltipPosition = 'top-left' | 'top' | 'top-right' | 'right-top' | 'right' | 'right-bottom' | 'bottom-left' | 'bottom' | 'bottom-right' | 'left-top' | 'left' | 'left-bottom';
+export type TooltipPosition = "top-left" | "top" | "top-right" | "right-top" | "right" | "right-bottom" | "bottom-left" | "bottom" | "bottom-right" | "left-top" | "left" | "left-bottom";
 /**
  * 툴팁 크기 변형.
  * - `'default'` : 넉넉한 패딩 (8px 12px)
  * - `'compact'` : 작은 패딩   (4px 12px)
  */
-export type TooltipVariant = 'default' | 'compact';
+export type TooltipVariant = "default" | "compact";
 /**
  * 툴팁 트리거 방식.
- * - `'hover'` : 마우스를 올리면 표시, 벗어나면 숨김
- * - `'click'` : 클릭하면 토글, 외부 클릭 시 숨김
+ * - `'hover'`  : 마우스를 올리면 표시, 벗어나면 숨김
+ * - `'click'`  : 클릭하면 토글, 외부 클릭 시 숨김
+ * - `'always'` : 마운트 시점부터 항상 표시 (특정 화면·요소에 고정된 안내 정보를 노출할 때).
+ *                스크롤·리사이즈 시 트리거를 따라 위치를 재계산.
  */
-export type TooltipTrigger = 'hover' | 'click';
+export type TooltipTrigger = "hover" | "click" | "always";
 /**
  * 툴팁 콘텐츠 타입.
  *

package/dist/dev/pages/SegmentedControlPage.d.ts

@@ -0,0 +1 @@
+export default function SegmentedControlPage(): import("react/jsx-runtime").JSX.Element;

package/dist/index.d.ts

@@ -57,7 +57,7 @@ export type { TooltipProps, TooltipPosition, TooltipVariant, TooltipTrigger, Too
 export { default as Tab } from "./components/Tab/Tab";
 export type { TabProps, TabItem, TabSize, TabResize, } from "./components/Tab/Tab";
 export { default as SegmentedControl } from "./components/SegmentedControl/SegmentedControl";
-export type { SegmentedControlProps, SegmentedControlVariant, SegmentedControlType, SegmentedControlSize, SegmentedControlItem, } from "./components/SegmentedControl/SegmentedControl";
+export type { SegmentedControlProps, SegmentedControlVariant, SegmentedControlType, SegmentedControlSize, SegmentedControlLayout, SegmentedControlItem, } from "./components/SegmentedControl/SegmentedControl";
 export { default as Table } from "./components/Table/Table";
 export type { TableProps, TableVariant, } from "./components/Table/Table.types";
 export { default as TableContainer } from "./components/Table/TableContainer";