maru_design2 2.31.1 → 3.0.2

package/dist/components/molecules/multiSelectDropdown/menu/MenuItem.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import { TColor } from '../../../../enums/color';
 interface Props<T extends Record<string, any>> {
     item: T;
@@ -8,5 +9,5 @@ interface Props<T extends Record<string, any>> {
     color?: TColor;
     width?: number;
 }
-declare function MenuItem<T extends Record<string, any>>({ item, selectedIds, onSelect, idKey, displayKey, color, width, }: Props<T>): import("react/jsx-runtime").JSX.Element;
+declare function MenuItem<T extends Record<string, any>>({ item, selectedIds, onSelect, idKey, displayKey, color, width, }: Props<T>): React.JSX.Element;
 export default MenuItem;

package/dist/components/molecules/multiSelectDropdown/menu/index.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import { TColor } from '../../../../enums/color';
 interface Props<T extends Record<string, any>> {
     data: T[];
@@ -17,5 +18,5 @@ interface Props<T extends Record<string, any>> {
     open: boolean;
     onClose: () => void;
 }
-declare function DropdownMenu<T extends Record<string, any>>({ data, selectedIds, onSelect, idKey, displayKey, searchPlaceholder, allCheckLabel, color, noDataMessage, noResultMessage, width, height, isSearch, parent, open, onClose, }: Props<T>): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenu<T extends Record<string, any>>({ data, selectedIds, onSelect, idKey, displayKey, searchPlaceholder, allCheckLabel, color, noDataMessage, noResultMessage, width, height, isSearch, parent, open, onClose, }: Props<T>): React.JSX.Element;
 export default DropdownMenu;

package/dist/components/molecules/multiSelectDropdown/toggleButton/Arrow.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import { TColor } from '../../../../enums/color';
 interface Props {
     open: boolean;
@@ -5,5 +6,5 @@ interface Props {
     color: TColor;
     disabled?: boolean;
 }
-declare function Arrow({ open, focus, color, disabled }: Props): import("react/jsx-runtime").JSX.Element;
+declare function Arrow({ open, focus, color, disabled }: Props): React.JSX.Element;
 export default Arrow;

package/dist/components/molecules/multiSelectDropdown/toggleButton/Clear.d.ts

@@ -1,6 +1,7 @@
+import React from 'react';
 interface Props {
     focus: boolean;
     onClear: () => void;
 }
-declare function Clear({ focus, onClear }: Props): import("react/jsx-runtime").JSX.Element;
+declare function Clear({ focus, onClear }: Props): React.JSX.Element;
 export default Clear;

package/dist/components/molecules/multiSelectDropdown/toggleButton/index.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import { TColor } from '../../../../enums/color';
 interface Props {
     content: string;
@@ -13,5 +14,5 @@ interface Props {
     onClear: () => void;
     onClick: () => void;
 }
-declare function DropdownToggleButton({ content, placeholder, disabled, color, stopPropagation, width, open, selected, errored, hasClearBtn, onClear, onClick, }: Props): import("react/jsx-runtime").JSX.Element;
+declare function DropdownToggleButton({ content, placeholder, disabled, color, stopPropagation, width, open, selected, errored, hasClearBtn, onClear, onClick, }: Props): React.JSX.Element;
 export default DropdownToggleButton;

package/dist/components/molecules/numberInput/NumberInput.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import { InputProps } from '../../atoms/input';
+import './number-input.scss';
+export interface NumberInputProps extends Omit<InputProps, 'type' | 'value' | 'defaultValue' | 'onChange' | 'startNode' | 'endNode'> {
+    /** 제어할 숫자 문자열 */
+    value?: string;
+    /** 비제어 방식의 초기 숫자 문자열 */
+    defaultValue?: string;
+    /** 값이 변경될 때 호출되는 함수 */
+    onValueChange?: (value: string) => void;
+    /** 허용할 최솟값 */
+    min?: number;
+    /** 허용할 최댓값 */
+    max?: number;
+    /** 증감 단위 */
+    step?: number;
+}
+export declare const NumberInput: React.ForwardRefExoticComponent<NumberInputProps & React.RefAttributes<HTMLInputElement>>;

package/dist/components/molecules/numberInput/index.d.ts

@@ -0,0 +1 @@
+export * from './NumberInput';

package/dist/components/molecules/pagination/Pagination.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import './pagination.scss';
 export interface PaginationProps {
     /**
@@ -19,4 +20,4 @@ export interface PaginationProps {
     buttonVisibility?: 'visible' | 'hidden';
     label: string;
 }
-export declare function Pagination({ page, onPageChange, totalPage, className, buttonVisibility, label, }: PaginationProps): import("react/jsx-runtime").JSX.Element;
+export declare function Pagination({ page, onPageChange, totalPage, className, buttonVisibility, label, }: PaginationProps): React.JSX.Element;

package/dist/components/molecules/searchInput/SearchInput.d.ts

@@ -31,4 +31,4 @@ export interface SearchInputProps extends Omit<React.InputHTMLAttributes<HTMLInp
         searchButtonContent?: string;
     };
 }
-export declare function SearchInput({ hiddenClearButton, className, filter, ...props }: SearchInputProps): import("react/jsx-runtime").JSX.Element;
+export declare function SearchInput({ hiddenClearButton, className, filter, ...props }: SearchInputProps): React.JSX.Element;

package/dist/components/molecules/searchInput/filter/FilterPopover.d.ts

@@ -12,5 +12,5 @@ interface Props {
     searchButtonContent?: string;
     onSearch: () => void;
 }
-declare function FilterPopover({ parent, onClose, formats, resetButtonContent, onReset, searchButtonContent, onSearch, }: Props): import("react/jsx-runtime").JSX.Element;
+declare function FilterPopover({ parent, onClose, formats, resetButtonContent, onReset, searchButtonContent, onSearch, }: Props): React.JSX.Element;
 export default FilterPopover;

package/dist/components/molecules/searchInput/filter/index.d.ts

@@ -13,5 +13,5 @@ interface Props {
     onSearch: () => void;
     inputWrapperRef: React.RefObject<HTMLDivElement>;
 }
-declare function Filter({ on, formats, hoverContent, resetButtonContent, onReset, searchButtonContent, onSearch, inputWrapperRef, }: Props): import("react/jsx-runtime").JSX.Element;
+declare function Filter({ on, formats, hoverContent, resetButtonContent, onReset, searchButtonContent, onSearch, inputWrapperRef, }: Props): React.JSX.Element;
 export default Filter;

package/dist/components/molecules/table/Colgroup.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import { IColumnFormats } from './types';
 interface Props {
     hasCheckbox?: boolean;
@@ -5,5 +6,5 @@ interface Props {
     formats: IColumnFormats[];
     hasActionCol: boolean;
 }
-declare function Colgroup({ hasCheckbox, hasRadio, formats, hasActionCol }: Props): import("react/jsx-runtime").JSX.Element;
+declare function Colgroup({ hasCheckbox, hasRadio, formats, hasActionCol }: Props): React.JSX.Element;
 export default Colgroup;

package/dist/components/molecules/table/Table.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import { TableProps } from './types';
 import './table.scss';
-export declare function Table({ rowIdKey, data, formats, maxHeight, sort, onSort, checkedIds, onCheck, radioCheckedId, onRadioCheck, filter, kebabMenu, binButton, chartButton, onRowClick, selectedRow, highlightRows, className, id, noData, loading, }: TableProps): import("react/jsx-runtime").JSX.Element;
+export declare function Table({ rowIdKey, data, formats, maxHeight, sort, onSort, checkedIds, onCheck, radioCheckedId, onRadioCheck, filter, kebabMenu, binButton, chartButton, onRowClick, selectedRow, highlightRows, disabledRows, className, id, noData, loading, }: TableProps): React.JSX.Element;

package/dist/components/molecules/table/body/BinButtonTd.d.ts

@@ -1,7 +1,8 @@
+import React from 'react';
 interface Props {
     rowId: string;
     hovered: boolean;
     onClick: (rowId: string) => void;
 }
-declare function BinButtonTd({ rowId, hovered, onClick }: Props): import("react/jsx-runtime").JSX.Element;
+declare function BinButtonTd({ rowId, hovered, onClick }: Props): React.JSX.Element;
 export default BinButtonTd;

package/dist/components/molecules/table/body/ChartButtonTd.d.ts

@@ -1,8 +1,9 @@
+import React from 'react';
 interface Props {
     rowId: string;
     hovered: boolean;
     selected?: boolean;
     onClick: (rowId: string) => void;
 }
-declare function ChartButtonTd({ rowId, hovered, selected, onClick }: Props): import("react/jsx-runtime").JSX.Element;
+declare function ChartButtonTd({ rowId, hovered, selected, onClick }: Props): React.JSX.Element;
 export default ChartButtonTd;

package/dist/components/molecules/table/body/CheckboxTd.d.ts

@@ -1,6 +1,8 @@
+import React from 'react';
 interface Props {
     checked: boolean;
+    disabled?: boolean;
     onCheck: (checked: boolean) => void;
 }
-declare function CheckboxTd({ checked, onCheck }: Props): import("react/jsx-runtime").JSX.Element;
+declare function CheckboxTd({ checked, disabled, onCheck }: Props): React.JSX.Element;
 export default CheckboxTd;

package/dist/components/molecules/table/body/EmptyTr.d.ts

@@ -4,5 +4,5 @@ interface Props {
     loadingContent?: React.ReactNode;
     emptyBodyHeight: number;
 }
-declare function EmptyTr({ noDataMessage, loadingContent, emptyBodyHeight }: Props): import("react/jsx-runtime").JSX.Element;
+declare function EmptyTr({ noDataMessage, loadingContent, emptyBodyHeight }: Props): React.JSX.Element;
 export default EmptyTr;

package/dist/components/molecules/table/body/KebabMenuTd.d.ts

@@ -3,5 +3,5 @@ interface Props {
     rowId: string;
     kebabContent?: (rowId: string, onClose: () => void) => React.ReactNode;
 }
-declare function KebabMenuTd({ rowId, kebabContent }: Props): import("react/jsx-runtime").JSX.Element | null;
+declare function KebabMenuTd({ rowId, kebabContent }: Props): React.JSX.Element | null;
 export default KebabMenuTd;

package/dist/components/molecules/table/body/RadioTd.d.ts

@@ -1,6 +1,8 @@
+import React from 'react';
 interface Props {
     checked: boolean;
+    disabled?: boolean;
     onCheck: (checked: boolean) => void;
 }
-declare function RadioTd({ checked, onCheck }: Props): import("react/jsx-runtime").JSX.Element;
+declare function RadioTd({ checked, disabled, onCheck }: Props): React.JSX.Element;
 export default RadioTd;

package/dist/components/molecules/table/body/Tr.d.ts

@@ -1,7 +1,8 @@
+import React from 'react';
 import { TableProps } from '../types';
 interface Props extends TableProps {
     row: Record<string, any>;
     hasActionCol: boolean;
 }
-declare function Tr({ row, rowIdKey, formats, checkedIds, onCheck, radioCheckedId, onRadioCheck, hasActionCol, kebabMenu, binButton, chartButton, onRowClick, selectedRow, highlightRows, }: Props): import("react/jsx-runtime").JSX.Element;
+declare function Tr({ row, rowIdKey, formats, checkedIds, onCheck, radioCheckedId, onRadioCheck, hasActionCol, kebabMenu, binButton, chartButton, onRowClick, selectedRow, highlightRows, disabledRows, }: Props): React.JSX.Element;
 export default Tr;

package/dist/components/molecules/table/body/index.d.ts

@@ -1,7 +1,8 @@
+import React from 'react';
 import { TableProps } from '../types';
 interface Props extends TableProps {
     hasActionCol: boolean;
     emptyBodyHeight: number;
 }
-declare function TBody({ rowIdKey, formats, data, checkedIds, onCheck, radioCheckedId, onRadioCheck, hasActionCol, kebabMenu, binButton, chartButton, onRowClick, selectedRow, highlightRows, noData, loading, emptyBodyHeight, }: Props): import("react/jsx-runtime").JSX.Element;
+declare function TBody({ rowIdKey, formats, data, checkedIds, onCheck, radioCheckedId, onRadioCheck, hasActionCol, kebabMenu, binButton, chartButton, onRowClick, selectedRow, highlightRows, disabledRows, noData, loading, emptyBodyHeight, }: Props): React.JSX.Element;
 export default TBody;

package/dist/components/molecules/table/header/FilterButtonsTh.d.ts

@@ -1,7 +1,8 @@
+import React from 'react';
 interface Props {
     toggle: boolean;
     onToggle: () => void;
     onReset?: () => void;
 }
-declare function FilterButtonsTh({ toggle, onToggle, onReset }: Props): import("react/jsx-runtime").JSX.Element;
+declare function FilterButtonsTh({ toggle, onToggle, onReset }: Props): React.JSX.Element;
 export default FilterButtonsTh;

package/dist/components/molecules/table/header/FilterTh.d.ts

@@ -4,5 +4,5 @@ interface Props {
     toggle: boolean;
     filter?: React.ReactNode;
 }
-declare function FilterTh({ children, toggle, filter }: Props): import("react/jsx-runtime").JSX.Element;
+declare function FilterTh({ children, toggle, filter }: Props): React.JSX.Element;
 export default FilterTh;

package/dist/components/molecules/table/header/SortableColumn.d.ts

@@ -1,15 +1,9 @@
+import React from 'react';
 import { IColumnFormats, ISort } from '../types';
 interface Props {
     format: IColumnFormats;
     sort?: ISort;
     onSortClick: (columnName: string) => () => void;
 }
-/**
- * 정렬 아닌거 마우스오버하면 쌍방 화살표
- * 내림차순 정렬이면 아래 화살표
- * 오름차순 정렬이면 위 화살표
- * 색깔은 언제나 b500 #5c5c5c
- * @returns
- */
-declare function SortableColumn({ format, sort, onSortClick }: Props): import("react/jsx-runtime").JSX.Element;
+declare function SortableColumn({ format, sort, onSortClick }: Props): React.JSX.Element;
 export default SortableColumn;

package/dist/components/molecules/table/header/index.d.ts

@@ -13,5 +13,5 @@ interface Props {
     setFilterToggle: React.Dispatch<React.SetStateAction<boolean>>;
     hasActionCol: boolean;
 }
-declare function THead({ formats, sort, onSortClick, hasCheckbox, allCheckbox, onAllCheck, hasRadio, filter, filterToggle, setFilterToggle, hasActionCol, }: Props): import("react/jsx-runtime").JSX.Element;
+declare function THead({ formats, sort, onSortClick, hasCheckbox, allCheckbox, onAllCheck, hasRadio, filter, filterToggle, setFilterToggle, hasActionCol, }: Props): React.JSX.Element;
 export default THead;

package/dist/components/molecules/table/types.d.ts

@@ -106,6 +106,13 @@ export interface TableProps {
         rowIds: string[];
         className?: string;
     };
+    /**
+     * 비활성화할 행과 추가 스타일 지정. 비활성 행은 행 클릭, 선택 및 내장 액션을 실행하지 않음.
+     */
+    disabledRows?: {
+        rowIds: string[];
+        className?: string;
+    };
     className?: string;
     id?: string;
     /**

package/dist/components/molecules/tabs/Tab.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+export interface TabProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'role' | 'type' | 'value'> {
+    /**
+     * 탭을 식별하는 고유한 값
+     */
+    value: string;
+    /**
+     * 탭에 표시할 내용
+     */
+    children: React.ReactNode;
+}
+export declare const Tab: React.ForwardRefExoticComponent<TabProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/molecules/tabs/Tabs.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import './tabs.scss';
+export interface TabsProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    /**
+     * 현재 선택된 탭의 값
+     */
+    value: string;
+    /**
+     * 선택된 탭이 변경될 때 호출되는 함수
+     */
+    onChange: (value: string) => void;
+    /**
+     * 탭이 컨테이너 너비를 동일한 비율로 채울지 여부
+     */
+    fullWidth?: boolean;
+    /**
+     * Tab 컴포넌트 목록
+     */
+    children: React.ReactNode;
+}
+export declare const Tabs: React.ForwardRefExoticComponent<TabsProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/molecules/tabs/TabsContext.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import type { TabsContextValue } from '../../../types/tabs';
+declare const TabsContext: import("react").Context<TabsContextValue | null>;
+export default TabsContext;

package/dist/components/molecules/tabs/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Tab';
+export * from './Tabs';

package/dist/components/molecules/tagInput/TagInput.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import { TInputTag } from '../../../types/input';
+import './tag-input.scss';
+export interface TagInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'className' | 'value' | 'defaultValue' | 'onChange'> {
+    /** 표시할 태그 목록 */
+    tags: TInputTag[];
+    /** Enter 입력으로 태그 추가를 요청할 때 호출되는 함수 */
+    onTagAdd?: (value: string) => void;
+    /** 태그 삭제를 요청할 때 호출되는 함수 */
+    onTagRemove: (value: string) => void;
+    /** 상단 라벨 */
+    label?: string;
+    /** 하단 도움말 */
+    helperText?: React.ReactNode;
+    /** 오류 상태와 오류 문구 */
+    invalid?: {
+        on: boolean;
+        message?: string;
+    };
+    className?: string;
+}
+export declare const TagInput: React.ForwardRefExoticComponent<TagInputProps & React.RefAttributes<HTMLInputElement>>;

package/dist/components/molecules/tagInput/index.d.ts

@@ -0,0 +1,2 @@
+export * from './TagInput';
+export type { TInputTag } from '../../../types/input';

package/dist/components/molecules/toast/Details.d.ts

@@ -1,6 +1,7 @@
-import { IToastDetailItem } from './types';
+import React from 'react';
+import { IToastDetailItem } from '../../../types/toast';
 interface DetailsProps {
     details: IToastDetailItem[] | undefined;
 }
-export default function Details({ details }: DetailsProps): import("react/jsx-runtime").JSX.Element | null;
+export default function Details({ details }: DetailsProps): React.JSX.Element | null;
 export {};

package/dist/components/molecules/toast/DetailsItem.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+interface DetailsItemProps {
+    name: string;
+}
+export default function DetailsItem({ name }: DetailsItemProps): React.JSX.Element;
+export {};

package/dist/components/molecules/toast/Toast.d.ts

@@ -1,28 +1,12 @@
-import { IToastDetailItem } from './types';
-import { TToastVariant } from '../../../enums/variant';
-export interface IToast {
-    variant: TToastVariant;
-    content: string;
-    title?: {
-        main: string;
-        sub?: string;
-    };
-    closeButton?: {
-        content: string;
-        onClick: () => void;
-    };
-    revert?: {
-        label: string;
-        onRevert: () => void;
-    };
-    details?: IToastDetailItem[];
-    disableAutoOff?: boolean;
-}
+import React from 'react';
+import { IToast } from '../../../types/toast';
+export type { IToast } from '../../../types/toast';
 export interface ToastProps {
     id: string;
     /**
      * @param variant 'success', 'warning', 'danger'
      * @param content 컴포넌트에 들어갈 한 줄짜리 내용(string)
+     * @param layout 'inline', 'stacked' (기본값: 'inline')
      * @param title {main: string, sub?: string}
      * @param closeButton 닫기 버튼 커스텀 (default는 x 아이콘 버튼) {content: string, onClick: () => void}
      * @param details details, summary 태그를 활용하여 노출할 내용 (legacy)
@@ -32,4 +16,4 @@ export interface ToastProps {
     drop: (id: string) => void;
     className?: string;
 }
-export declare function Toast({ id, toast, drop, className }: ToastProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function Toast({ id, toast, drop, className }: ToastProps): React.JSX.Element | null;

package/dist/components/molecules/toast/ToastContext.d.ts

@@ -1,5 +1,5 @@
 import React, { ReactNode } from 'react';
-import { IToast } from './Toast';
+import { IToast } from '../../../types/toast';
 interface ToastContextProps {
     toasts: {
         [id: string]: IToast;
@@ -10,6 +10,6 @@ interface ToastContextProps {
 declare const ToastContext: React.Context<ToastContextProps | undefined>;
 declare function ToastProvider({ children }: {
     children: ReactNode;
-}): import("react/jsx-runtime").JSX.Element;
+}): React.JSX.Element;
 export declare const useToast: () => ToastContextProps;
 export { ToastContext, ToastProvider };

package/dist/components/molecules/toast/ToastStyle.d.ts

@@ -1,9 +1,11 @@
-import { IToastDetailItem } from './types';
+import React from 'react';
+import { IToastDetailItem, TToastLayout } from '../../../types/toast';
 import { TToastVariant } from '../../../enums/variant';
 import './toast.scss';
 export interface ToastStyleProps {
     variant: TToastVariant;
     content: string;
+    layout?: TToastLayout;
     title?: {
         main: string;
         sub?: string;
@@ -19,4 +21,4 @@ export interface ToastStyleProps {
     details?: IToastDetailItem[];
     onClose: () => void;
 }
-export declare function ToastStyle({ variant, content, title, closeButton, revert, details, onClose, }: ToastStyleProps): import("react/jsx-runtime").JSX.Element;
+export declare function ToastStyle({ variant, content, layout, title, closeButton, revert, details, onClose, }: ToastStyleProps): React.JSX.Element;

package/dist/components/molecules/toast/index.d.ts

@@ -1 +1,3 @@
 export * from './Toast';
+export { TToastLayout } from '../../../types/toast';
+export type { IToastDetailItem } from '../../../types/toast';

package/dist/components/molecules/toast/types.d.ts

@@ -1,4 +1 @@
-export interface IToastDetailItem {
-    summary: string;
-    subDetails: string[];
-}
+export type { IToastDetailItem } from '../../../types/toast';

package/dist/components/styleProvider/StyleProvider.d.ts

@@ -2,9 +2,13 @@ import React from 'react';
 import { TTheme } from '../../enums/color';
 import './reset.scss';
 import './style-provider.scss';
-interface Props {
+export interface StyleProviderProps {
     children: React.ReactNode;
+    /**
+     * 앱 테마입니다. `data-theme`에 반영되어 brand semantic(`--p`, `--maru-*-brand-*`)을 결정합니다.
+     * - `navy`: Figma Brand 팔레트
+     * - `blue` / `green`: Figma brand semantic 확정 전 provisional 값
+     */
     theme: TTheme;
 }
-export declare function StyleProvider({ children, theme }: Props): import("react/jsx-runtime").JSX.Element;
-export {};
+export declare function StyleProvider({ children, theme }: StyleProviderProps): React.JSX.Element;