@ceed/ads 1.29.0 → 1.30.0-next.1

package/dist/components/CurrencyInput/CurrencyInput.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import { InputProps } from '@mui/joy';
 import { MotionProps } from 'framer-motion';
 export interface CurrencyInputProps {
-    currency?: 'USD' | 'KRW' | 'CAD';
+    currency?: 'USD' | 'KRW';
     max?: number;
     value?: number;
     defaultValue?: number;

package/dist/components/CurrencyInput/hooks/use-currency-setting.d.ts

@@ -1,10 +1,10 @@
 export declare const useCurrencySetting: (props: {
-    currency?: "USD" | "KRW" | "BHD" | "CAD" | undefined;
+    currency?: "USD" | "KRW" | "BHD" | undefined;
     placeholder?: string | undefined;
 }) => {
     symbol: string;
     thousandSeparator: string;
-    decimalSeparator: string | undefined;
+    decimalSeparator: string;
     placeholder: string;
     fixedDecimalScale: boolean;
     decimalScale: number;

package/dist/components/DataTable/hooks.d.ts

@@ -5,7 +5,7 @@ export declare function useColumnWidths<T>(columnsByField: {
         headerRef: React.RefObject<HTMLTableCellElement>;
     };
 }): Record<string, number>;
-export declare function useDataTableRenderer<T extends Record<PropertyKey, unknown>, GetId extends ((row: T) => any) | undefined = undefined>({ rows: _rows, columns: columnsProp, pinnedColumns, rowCount: totalRowsProp, initialState, pagination, paginationMode, paginationModel, onPaginationModelChange, sortModel: controlledSortModel, sortOrder: _sortOrder, selectionModel, onSortModelChange, onSelectionModelChange, editMode, getId: _getId, isTotalSelected: _isTotalSelected, isRowSelectable, columnGroupingModel, columnVisibilityModel, onColumnVisibilityModelChange, }: DataTableProps<T, GetId>): {
+export declare function useDataTableRenderer<T extends Record<PropertyKey, unknown>, GetId extends ((row: T) => any) | undefined = undefined>({ rows: _rows, columns: columnsProp, pinnedColumns, rowCount: totalRowsProp, initialState, pagination, paginationMode, paginationModel, onPaginationModelChange, sortModel: controlledSortModel, sortOrder: _sortOrder, selectionModel, onSortModelChange, onSelectionModelChange, editMode, getId: _getId, isTotalSelected: _isTotalSelected, isRowSelectable, columnGroupingModel, columnVisibilityModel, onColumnVisibilityModelChange, checkboxSelection, }: DataTableProps<T, GetId>): {
     rowCount: number;
     selectableRowCount: number;
     page: number;
@@ -49,6 +49,7 @@ export declare function useDataTableRenderer<T extends Record<PropertyKey, unkno
     onAllCheckboxChange: () => void;
     onCheckboxChange: (event: React.MouseEvent | React.ChangeEvent | React.KeyboardEvent, selectedModel: InferredIdType<T, GetId>) => void;
     columns: ColumnDef<T, InferredIdType<T, GetId>>[];
+    tableMinWidth: number;
     processedColumnGroups: {
         groups: import("./types").ProcessedColumnGroup[][];
         maxLevel: number;

package/dist/components/DataTable/utils.d.ts

@@ -9,6 +9,7 @@ export declare function calculateColumnGroups<T extends Record<PropertyKey, any>
     maxLevel: number;
     fieldsInGroupingModel: Set<keyof T>;
 };
+export declare function parsePxValue(value: string | undefined): number | null;
 export declare function getTextAlign(props: {
     editMode?: boolean;
     type?: string;

package/dist/components/ProfileMenu/ProfileMenu.d.ts

@@ -26,7 +26,7 @@ interface BaseProfileMenuProps {
             src: string;
             alt: string;
         };
-        caption?: string;
+        caption?: React.ReactNode;
         chip?: string;
     };
     menuItems: ({

package/dist/components/SearchBar/SearchBar.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+export interface SearchBarOption {
+    label: string;
+    value: string;
+    placeholder?: string;
+}
+export interface SearchBarProps {
+    hideSelect?: boolean;
+    options?: SearchBarOption[];
+    value: string;
+    onChange: (value: string) => void;
+    onSearch?: (params: {
+        selectValue?: string;
+        inputValue: string;
+    }) => void;
+}
+declare function SearchBar(props: SearchBarProps): React.JSX.Element;
+declare namespace SearchBar {
+    var displayName: string;
+}
+export { SearchBar };

package/dist/components/SearchBar/index.d.ts

@@ -0,0 +1,3 @@
+import { SearchBar } from './SearchBar';
+export * from './SearchBar';
+export default SearchBar;

package/dist/components/data-display/Badge.md

@@ -2,9 +2,7 @@
 
 ## Introduction
 
-Badge is a small visual indicator that overlays another UI element to display a count, status, or label. It is commonly used to show unread notification counts, online/offline status indicators, and "NEW" labels on menu items or navigation elements. The Badge wraps a child component (such as an icon button or avatar) and positions itself in the top-right corner by default.
-
-Badge supports multiple colors, variants, and sizes for flexible visual customization. It also provides utility features like a `max` prop for truncating large numbers (e.g., "99+"), a `showZero` prop for controlling zero-count visibility, and a dot-only mode when no `badgeContent` is provided.
+Badge 컴포넌트는 다른 UI 요소 위에 작은 카운트, 상태, 또는 레이블을 표시하는 데 사용됩니다. 주로 알림 수, 상태 표시기, 또는 새로운 콘텐츠를 나타내는 데 활용됩니다.
 
 ```tsx
 <Badge {...args}>
@@ -28,7 +26,7 @@ Badge supports multiple colors, variants, and sizes for flexible visual customiz
 
 ```tsx
 import { Badge, IconButton } from '@ceed/ads';
-import NotificationsIcon from '@mui/icons-material/Notifications';
+import { NotificationsIcon } from '@mui/icons-material';
 
 function MyComponent() {
   return (
@@ -41,9 +39,11 @@ function MyComponent() {
 }
 ```
 
-## Basic
+## Examples
+
+### Basic Usage
 
-Basic Badge usage showing numeric counts, max overflow, and text content.
+기본적인 Badge 사용법입니다.
 
 ```tsx
 <div style={{
@@ -70,9 +70,9 @@ Basic Badge usage showing numeric counts, max overflow, and text content.
 </div>
 ```
 
-## Colors
+### Colors
 
-Apply semantic colors to convey the badge's meaning: `primary` for general counts, `danger` for urgent notifications, `success` for online status, and `warning` for attention items.
+다양한 색상을 적용할 수 있습니다.
 
 ```tsx
 <div style={{
@@ -111,9 +111,9 @@ Apply semantic colors to convey the badge's meaning: `primary` for general count
 </div>
 ```
 
-## Variants
+### Variants
 
-Four style variants are available: `solid` (filled), `soft` (subtle background), `outlined` (border only), and `plain` (minimal).
+다양한 스타일 변형을 제공합니다.
 
 ```tsx
 <div style={{
@@ -146,9 +146,9 @@ Four style variants are available: `solid` (filled), `soft` (subtle background),
 </div>
 ```
 
-## Sizes
+### Sizes
 
-Three sizes -- `sm`, `md`, and `lg` -- allow the badge to scale proportionally with its wrapped element.
+크기를 조절할 수 있습니다.
 
 ```tsx
 <div style={{
@@ -176,9 +176,9 @@ Three sizes -- `sm`, `md`, and `lg` -- allow the badge to scale proportionally w
 </div>
 ```
 
-## With Avatar
+### With Avatar
 
-Badge pairs naturally with Avatar to indicate user status (e.g., notification count or online indicator).
+아바타와 함께 사용할 수 있습니다.
 
 ```tsx
 <div style={{
@@ -195,9 +195,9 @@ Badge pairs naturally with Avatar to indicate user status (e.g., notification co
 </div>
 ```
 
-## Dot Badge
+### Dot Badge
 
-When no `badgeContent` is provided, Badge renders as a small dot. This is useful for simple presence or status indicators without a specific count.
+내용 없이 점으로만 표시할 수 있습니다.
 
 ```tsx
 <div style={{
@@ -216,9 +216,9 @@ When no `badgeContent` is provided, Badge renders as a small dot. This is useful
 </div>
 ```
 
-## Max Count
+### Max Count
 
-Use the `max` prop to cap the displayed number. When `badgeContent` exceeds `max`, it renders as "max+" (e.g., "99+").
+최대 카운트를 설정하여 숫자가 넘을 때 '+' 표시를 할 수 있습니다.
 
 ```tsx
 <div style={{
@@ -245,9 +245,9 @@ Use the `max` prop to cap the displayed number. When `badgeContent` exceeds `max
 </div>
 ```
 
-## Show Zero
+### Show Zero
 
-By default, Badge hides when `badgeContent` is `0`. Use the `showZero` prop to force it to remain visible.
+기본적으로 0일 때는 숨겨지지만, showZero 옵션으로 표시할 수 있습니다.
 
 ```tsx
 <div style={{
@@ -276,72 +276,40 @@ By default, Badge hides when `badgeContent` is `0`. Use the `showZero` prop to f
 
 ## Common Use Cases
 
-### Notification Bell
+### Notification Count
 
 ```tsx
-import { Badge, IconButton } from '@ceed/ads';
-import NotificationsIcon from '@mui/icons-material/Notifications';
-
-function NotificationBell({ unreadCount }) {
-  return (
-    <Badge badgeContent={unreadCount} max={99} color="danger">
-      <IconButton aria-label={`${unreadCount} unread notifications`}>
-        <NotificationsIcon />
-      </IconButton>
-    </Badge>
-  );
-}
+<Badge badgeContent={unreadCount} color="danger">
+  <IconButton>
+    <NotificationsIcon />
+  </IconButton>
+</Badge>
 ```
 
-### Online Status on Avatar
+### Status Indicator
 
 ```tsx
-import { Badge, Avatar } from '@ceed/ads';
-
-function UserAvatar({ name, avatarUrl, isOnline }) {
-  return (
-    <Badge
-      color={isOnline ? 'success' : 'neutral'}
-      variant="solid"
-      anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
-    >
-      <Avatar src={avatarUrl} alt={name} />
-    </Badge>
-  );
-}
+<Badge color="success" variant="solid">
+  <Avatar src="/user-avatar.jpg" />
+</Badge>
 ```
 
-### New Feature Label
+### New Items
 
 ```tsx
-import { Badge, Button } from '@ceed/ads';
-
-function FeatureButton() {
-  return (
-    <Badge badgeContent="NEW" color="warning" size="sm">
-      <Button variant="outlined">Analytics</Button>
-    </Badge>
-  );
-}
+<Badge badgeContent="NEW" color="warning">
+  <Button>메뉴</Button>
+</Badge>
 ```
 
 ## Best Practices
 
-- **Use semantic colors consistently.** Reserve `danger` for urgent notifications, `success` for positive status (e.g., online), `warning` for attention-needed items, and `primary` for neutral counts.
-  - ✔ `color="danger"` for unread message count
-  - ✘ `color="primary"` for critical alert count
-
-- **Set a `max` value for numeric badges.** Avoid displaying very large numbers like "1,247" in a tiny badge. Use `max={99}` or `max={999}` to keep the badge compact and readable.
-
-- **Keep badge content short.** Badges work best with numbers (1-3 digits) or very short text ("NEW", "HOT"). Long text will overflow and look broken.
+1. **의미 있는 색상**: 색상은 의미를 가지도록 사용하세요 (빨간색은 중요한 알림, 초록색은 성공 상태 등).
 
-- **Use dot badges for binary states.** When the specific count does not matter (e.g., "has unread items" vs. "12 unread items"), use a dot badge by omitting `badgeContent`.
+2. **적절한 콘텐츠**: 너무 긴 텍스트는 피하고, 숫자나 짧은 텍스트를 사용하세요.
 
-- **Do not badge everything.** Only add badges to elements where the count or status information is genuinely useful. Overuse diminishes their attention-grabbing effect.
+3. **대비**: Badge의 색상이 배경과 충분한 대비를 가지도록 하세요.
 
-## Accessibility
+4. **접근성**: 시각적 정보만으로 의존하지 않고, 스크린 리더를 위한 적절한 레이블을 제공하세요.
 
-- Badge automatically applies `aria-label` or equivalent attributes so screen readers can announce the badge content alongside the wrapped element.
-- When using Badge on an IconButton, always provide an `aria-label` on the IconButton that includes the badge context (e.g., `aria-label="5 unread notifications"`).
-- Avoid relying solely on color to convey badge meaning. Pair colored badges with icons, text, or positional context so color-blind users can also interpret the status.
-- Dot badges (without `badgeContent`) should have an accessible label on the parent element that describes the status (e.g., "User is online").
+5. **일관성**: 애플리케이션 전체에서 Badge 사용 패턴을 일관되게 유지하세요.

package/dist/components/data-display/DataTable.md

@@ -1367,7 +1367,7 @@ You can use `onCellEditStart` and `onCellEditStop` to detect when editing starts
 </Typography>
 {editLog.length === 0 ? <Typography level="body-xs" textColor="text.secondary">
 No edits yet. Click on a cell to edit.
-</Typography> : editLog.map(log => <Typography key={log} level="body-xs">
+</Typography> : editLog.map((log, i) => <Typography key={i} level="body-xs">
 {log}
 </Typography>)}
 </Box>

package/dist/components/data-display/InfoSign.md

@@ -2,9 +2,7 @@
 
 ## Introduction
 
-InfoSign is a compact tooltip-trigger component that displays a small question-mark icon. When users hover over or focus on the icon, a tooltip appears with supplementary information. It is designed to provide contextual help without cluttering the interface -- ideal for explaining form fields, settings options, table column headers, and complex metrics.
-
-The component accepts a `message` prop for the tooltip content and a `placement` prop to control where the tooltip appears relative to the icon. InfoSign keeps the main UI clean while ensuring that detailed guidance is always one interaction away.
+InfoSign 컴포넌트는 사용자에게 추가 정보를 제공하기 위한 툴팁 아이콘입니다. 물음표 아이콘을 클릭하거나 호버할 때 상세한 설명이나 도움말을 표시할 수 있습니다. 폼 필드, 설정 항목, 복잡한 기능에 대한 설명을 제공할 때 유용합니다.
 
 ```tsx
 <InfoSign
@@ -24,19 +22,23 @@ import { InfoSign } from '@ceed/ads';
 
 function MyComponent() {
   return (
-    <label>
-      Complex Setting
-      <InfoSign
-        message="This setting affects overall system performance. Consult an administrator before making changes."
-      />
-    </label>
+    <div>
+      <label>
+        복잡한 설정 항목
+        <InfoSign
+          message="이 설정은 시스템 전체 성능에 영향을 줄 수 있습니다. 변경하기 전에 관리자와 상의하세요."
+        />
+      </label>
+    </div>
   );
 }
 ```
 
-## Basic
+## Examples
+
+### Basic Usage
 
-The default InfoSign displays a question-mark icon that reveals a tooltip on hover or focus.
+가장 기본적인 InfoSign 사용법입니다.
 
 ```tsx
 <InfoSign
@@ -50,87 +52,109 @@ The default InfoSign displays a question-mark icon that reveals a tooltip on hov
 ### Form Field Help
 
 ```tsx
-import { InfoSign } from '@ceed/ads';
-import { FormControl, FormLabel, Input } from '@ceed/ads';
+<FormControl>
+  <FormLabel>
+    비밀번호 복잡도
+    <InfoSign
+      message="비밀번호는 최소 8자 이상이며, 대문자, 소문자, 숫자, 특수문자를 포함해야 합니다."
+      placement="top"
+    />
+  </FormLabel>
+  <Input type="password" />
+</FormControl>
+```
 
-function PasswordField() {
-  return (
-    <FormControl>
-      <FormLabel>
-        Password
-        <InfoSign
-          message="Must be at least 8 characters and include uppercase, lowercase, number, and special character."
-          placement="top"
-        />
-      </FormLabel>
-      <Input type="password" />
-    </FormControl>
-  );
-}
+### Settings Explanation
+
+```tsx
+<Stack spacing={2}>
+  <Box>
+    <Typography level="title-sm">
+      자동 저장
+      <InfoSign
+        message="이 기능을 활성화하면 5분마다 자동으로 작업 내용이 저장됩니다."
+        placement="right"
+      />
+    </Typography>
+    <Switch />
+  </Box>
+</Stack>
 ```
 
-### Table Column Header
+### Complex Data Explanation
 
 ```tsx
-import { InfoSign } from '@ceed/ads';
+<Card>
+  <CardContent>
+    <Typography level="title-md">
+      처리량 지표
+      <InfoSign
+        message="처리량은 최근 24시간 동안의 평균 요청 수를 나타냅니다. 이 값이 높을수록 시스템이 더 많은 작업을 처리하고 있다는 의미입니다."
+        placement="bottom"
+      />
+    </Typography>
+    <Typography level="h2">1,234 req/min</Typography>
+  </CardContent>
+</Card>
+```
 
-function TableHeader() {
-  return (
-    <thead>
-      <tr>
-        <th>
-          User ID
-          <InfoSign message="Auto-generated unique identifier assigned by the system." />
-        </th>
-        <th>
-          Last Activity
-          <InfoSign message="The most recent login or action timestamp for this user." />
-        </th>
-        <th>Status</th>
-      </tr>
-    </thead>
-  );
-}
+### Table Header Help
+
+```tsx
+<Table>
+  <thead>
+    <tr>
+      <th>
+        사용자 ID
+        <InfoSign message="시스템에서 자동 생성된 고유 식별자입니다." />
+      </th>
+      <th>
+        마지막 활동
+        <InfoSign message="사용자가 마지막으로 로그인하거나 활동한 시간입니다." />
+      </th>
+      <th>상태</th>
+    </tr>
+  </thead>
+</Table>
 ```
 
-### Dashboard Metric Explanation
+## Props
+
+### placement
+
+툴팁이 나타나는 위치를 설정할 수 있습니다.
 
 ```tsx
-import { InfoSign, Typography, Stack } from '@ceed/ads';
+<InfoSign placement="top" message="위쪽에 표시" />
+<InfoSign placement="bottom" message="아래쪽에 표시" />
+<InfoSign placement="left" message="왼쪽에 표시" />
+<InfoSign placement="right" message="오른쪽에 표시" />
+```
 
-function MetricCard() {
-  return (
-    <Stack spacing={1}>
-      <Typography level="title-md">
-        Throughput
-        <InfoSign
-          message="Average requests per minute over the last 24 hours. Higher values indicate greater system load."
-          placement="right"
-        />
-      </Typography>
-      <Typography level="h2">1,234 req/min</Typography>
-    </Stack>
-  );
-}
+### message
+
+표시할 메시지 내용입니다. 긴 텍스트도 지원합니다.
+
+```tsx
+<InfoSign
+  message="여러 줄로 된 긴 설명문도 표시할 수 있습니다.\n줄바꿈도 지원되므로 상세한 설명을 제공할 수 있습니다."
+/>
 ```
 
 ## Best Practices
 
-- **Keep messages concise.** Tooltip messages should be 1-2 sentences that quickly answer "what does this mean?" Avoid paragraphs of text.
-  - ✔ "Maximum file size per upload. Files exceeding this limit will be rejected."
-  - ✘ A multi-paragraph explanation with examples and edge cases
+1. **간결한 메시지**: 핵심 정보만 포함하여 사용자가 빠르게 이해할 수 있도록 합니다.
 
-- **Place InfoSign directly adjacent to the element it explains.** Position it immediately after a label or header text so users can easily associate the help icon with the relevant field.
+2. **적절한 배치**: 설명하려는 요소 바로 옆에 배치하여 연관성을 명확히 합니다.
 
-- **Do not overuse InfoSign.** Adding a help icon to every single field creates visual noise and suggests the interface itself is too confusing. Reserve it for genuinely complex or ambiguous items.
+3. **일관된 사용**: 비슷한 성격의 정보에는 일관되게 InfoSign을 사용합니다.
 
-- **Choose placement that avoids overlap.** Use `placement="top"` or `placement="right"` for fields near the bottom of a viewport, and `placement="bottom"` for elements near the top.
-
-- **Use InfoSign for supplementary information only.** Critical instructions or warnings should be displayed inline (e.g., with FormHelperText or Alert), not hidden behind a tooltip.
+4. **과도한 사용 금지**: 모든 요소에 InfoSign을 붙이면 인터페이스가 복잡해집니다.
 
 ## Accessibility
 
-- InfoSign is keyboard-focusable, allowing users to trigger the tooltip using **Tab** navigation without requiring a mouse.
-- The tooltip content is announced by screen readers when the InfoSign receives focus, thanks to built-in ARIA attributes.
-- The question-mark icon serves as a universally recognized visual cue for "more information," making it intuitive for all users.
-- Ensure that the `message` text provides the same information available through other channels -- do not make the tooltip the only way to learn critical information.
+- InfoSign은 키보드 탐색이 가능합니다
+- 스크린 리더가 메시지 내용을 읽을 수 있습니다
+- ARIA 라벨이 자동으로 적용됩니다
+
+InfoSign은 사용자에게 필요한 추가 정보를 제공하면서도 인터페이스를 깔끔하게 유지하는 데 도움이 되는 유용한 컴포넌트입니다.