@ncds/ui-admin 1.8.1 → 1.8.3

package/dist/types/src/components/overlays/modal/Modal.d.ts

@@ -0,0 +1,79 @@
+import { type ReactNode } from 'react';
+import type { SlotIconComponent } from '../../../types/side-slot';
+import { type FeaturedIconColor, type FeaturedIconTheme } from '../../image-and-icons/featured-icon';
+type ModalSize = 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+type ModalHeaderAlign = 'left' | 'center' | 'horizontal';
+type ModalActionsAlign = 'left' | 'center' | 'right' | 'stretch';
+type ModalActionsLayout = 'vertical' | 'horizontal' | 'checkbox';
+type ModalProps = {
+    isOpen: boolean;
+    onClose: () => void;
+    size?: ModalSize;
+    children: ReactNode;
+    closeOnBackdropClick?: boolean;
+    closeOnEsc?: boolean;
+    className?: string;
+    zIndex?: number;
+};
+declare const Modal: {
+    ({ isOpen, onClose, children, size, closeOnBackdropClick, closeOnEsc, className, zIndex, ...restProps }: ModalProps): import("react").ReactPortal | null;
+    Header({ children, onClose, featuredIcon, title, subtitle, align, showDivider, hideCloseButton, }: ModalHeaderProps): import("react/jsx-runtime").JSX.Element;
+    Content({ children, className }: ModalContentProps): import("react/jsx-runtime").JSX.Element;
+    /**
+     * Modal.Actions - The actions area of the modal
+     *
+     * Examples:
+     *
+     * 1. Vertical layout (buttons stacked):
+     * <Modal.Actions layout="vertical" align="stretch">
+     *   <Button size="sm" label="Confirm" onClick={handleConfirm} hierarchy="primary" />
+     *   <Button size="sm" label="Cancel" onClick={handleCancel} hierarchy="secondary-gray" />
+     * </Modal.Actions>
+     *
+     * 2. Horizontal layout (buttons side by side):
+     * <Modal.Actions layout="horizontal" align="stretch">
+     *   <Button size="sm" label="Confirm" onClick={handleConfirm} hierarchy="primary" />
+     *   <Button size="sm" label="Cancel" onClick={handleCancel} hierarchy="secondary-gray" />
+     * </Modal.Actions>
+     *
+     * 3. Checkbox layout (checkbox on left, buttons on right):
+     * <Modal.Actions layout="checkbox" align="stretch" checkboxContent={
+     *   <>
+     *     <Checkbox text="Never show again" />
+     *     <a href="#">Settings</a>
+     *   </>
+     * }>
+     *   <Button size="sm" label="Cancel" onClick={handleCancel} hierarchy="secondary-gray" />
+     *   <Button size="sm" label="Confirm" onClick={handleConfirm} hierarchy="primary" />
+     * </Modal.Actions>
+     */
+    Actions({ children, layout, showDivider, align, checkboxContent, className, }: ModalActionsProps): import("react/jsx-runtime").JSX.Element;
+};
+type ModalHeaderProps = {
+    children?: ReactNode;
+    onClose: () => void;
+    featuredIcon?: {
+        icon: SlotIconComponent;
+        color: FeaturedIconColor;
+        theme: FeaturedIconTheme;
+    };
+    align?: ModalHeaderAlign;
+    title?: string | ReactNode;
+    subtitle?: string | ReactNode;
+    showDivider?: boolean;
+    hideCloseButton?: boolean;
+};
+type ModalContentProps = {
+    children: ReactNode;
+    className?: string;
+};
+type ModalActionsProps = {
+    className?: string;
+    children: ReactNode;
+    layout?: ModalActionsLayout;
+    showDivider?: boolean;
+    align?: ModalActionsAlign;
+    checkboxContent?: ReactNode;
+};
+export type { ModalSize, ModalHeaderAlign, ModalActionsAlign, ModalActionsLayout, ModalProps, ModalHeaderProps, ModalContentProps, ModalActionsProps, };
+export { Modal };

package/dist/types/src/components/overlays/notification/MessageNotification.d.ts

@@ -0,0 +1,41 @@
+import { type ComponentPropsWithoutRef, type ReactNode } from 'react';
+import type { SlotIconComponent } from '../../../types/side-slot';
+import type { NotificationAction, NotificationColor } from './Notification';
+interface MessageNotificationProps extends Omit<ComponentPropsWithoutRef<'div'>, 'title'> {
+    /**
+     * 알림 제목 텍스트
+     */
+    title: ReactNode;
+    /**
+     * 알림 본문 텍스트 (선택사항)
+     */
+    supportingText?: ReactNode;
+    /**
+     * 알림 아이콘 컴포넌트 (지정하지 않으면 color에 따라 기본 아이콘 사용)
+     */
+    icon?: SlotIconComponent;
+    /**
+     * 알림 색상 스타일
+     * @default 'neutral'
+     */
+    color?: NotificationColor;
+    /**
+     * 닫기 버튼 클릭 이벤트 핸들러
+     */
+    onClose?: () => void;
+    /**
+     * 추가 CSS 클래스
+     */
+    className?: string;
+    /**
+     * 액션 버튼 영역 (선택사항)
+     */
+    actions?: NotificationAction[];
+    /**
+     * 다시보지 않기 이벤트 핸들러 (선택사항)
+     */
+    onHidePermanently?: () => void;
+}
+declare const MessageNotification: import("react").ForwardRefExoticComponent<MessageNotificationProps & import("react").RefAttributes<HTMLDivElement>>;
+export type { MessageNotificationProps };
+export { MessageNotification };

package/dist/types/src/components/overlays/notification/Notification.d.ts

@@ -0,0 +1,72 @@
+import { type ComponentPropsWithoutRef, type ReactNode } from 'react';
+import type { ColorTone } from '../../../../constant/color';
+import type { SlotIconComponent } from '../../../types/side-slot';
+import type { ButtonTheme } from '../../action/button';
+type NotificationType = 'floating' | 'full-width' | 'message';
+type NotificationColor = Extract<ColorTone, 'neutral' | 'error' | 'warning' | 'success' | 'info'>;
+type NotificationSize = 'desktop' | 'mobile';
+interface NotificationAction {
+    /**
+     * 액션 버튼 텍스트
+     */
+    label: string;
+    /**
+     * 액션 버튼 클릭 이벤트 핸들러
+     */
+    onClick?: () => void;
+    /**
+     * 액션 버튼 색상 (3가지만 지원)
+     */
+    hierarchy?: Extract<ButtonTheme, 'text' | 'text-gray'>;
+}
+interface NotificationProps extends Omit<ComponentPropsWithoutRef<'div'>, 'title'> {
+    /**
+     * 알림 유형 (floating: 측면에 표시되는 알림, full-width: 전체 너비 알림)
+     * @default 'floating'
+     */
+    type?: NotificationType;
+    /**
+     * 알림 제목 텍스트
+     */
+    title: ReactNode;
+    /**
+     * 알림 본문 텍스트 (선택사항)
+     */
+    supportingText?: ReactNode;
+    /**
+     * 알림 아이콘 컴포넌트 (지정하지 않으면 variant에 따라 기본 아이콘 사용)
+     */
+    icon?: SlotIconComponent;
+    /**
+     * 알림 색상 스타일
+     * @default 'neutral'
+     */
+    color?: NotificationColor;
+    /**
+     * 닫기 버튼 클릭 이벤트 핸들러
+     */
+    onClose?: () => void;
+    /**
+     * 추가 CSS 클래스
+     */
+    className?: string;
+    /**
+     * 액션 버튼 영역 (선택사항)
+     * NotificationAction[]
+     */
+    actions?: NotificationAction[];
+    /**
+     * 자동 닫기 시간 (밀리초 단위, 0이면 자동으로 닫히지 않음)
+     * floating 타입에서만 동작
+     * @default 0
+     */
+    autoClose?: number;
+    /**
+     * 다시보지 않기 이벤트 핸들러 (선택사항)
+     * message, full-width 타입에서 사용 가능
+     */
+    onHidePermanently?: () => void;
+}
+declare const Notification: import("react").ForwardRefExoticComponent<NotificationProps & import("react").RefAttributes<HTMLDivElement>>;
+export type { NotificationType, NotificationColor, NotificationSize, NotificationAction, NotificationProps };
+export { Notification };

package/dist/types/src/components/overlays/tooltip/Tooltip.d.ts

@@ -0,0 +1,17 @@
+type CalculatedPosition = 'top' | 'bottom' | 'left' | 'right' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+interface TooltipProps {
+    tooltipType?: 'white' | 'black';
+    iconType?: 'stroke' | 'fill';
+    position?: CalculatedPosition | 'auto';
+    size?: 'sm' | 'md';
+    hideArrow?: boolean;
+    title?: string;
+    content?: React.ReactNode;
+    type?: 'long' | 'short';
+    className?: string;
+    iconColor?: string;
+    iconStyle?: 'help-circle' | 'alert-circle';
+    zIndex?: number;
+}
+export declare const Tooltip: ({ tooltipType, iconType, position, size, title, content, hideArrow, type, iconColor, iconStyle, className, zIndex, }: TooltipProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/src/components/select-dropdown/index.d.ts

@@ -1 +1 @@
-export { type DropdownDirection, SelectDropdown, type SelectDropdownProps } from './SelectDropdown';
+export * from './SelectDropdown';

package/dist/types/src/components/tab/TabButton.d.ts

@@ -1,5 +1,5 @@
 import type { AnchorHTMLAttributes, ButtonHTMLAttributes, ReactNode } from 'react';
-import { type BadgeProps } from '../badge/Badge';
+import { type BadgeProps } from '../feedback-and-status/badge/Badge';
 type TabSize = 'sm' | 'md' | 'lg';
 type TabType = 'button-primary' | 'button-white' | 'underline' | 'underline-fill' | 'line-vertical';
 type BaseTabButtonProps = {

package/dist/types/src/hooks/dropdown/index.d.ts

@@ -1,6 +1,6 @@
-export { useDropdown } from './useDropdown';
-export { useDropdownKeyboard } from './useDropdownKeyboard';
-export { useDropdownPosition } from './useDropdownPosition';
-export { useOutsideClick } from './useOutsideClick';
-export { useScrollLock } from './useScrollLock';
-export { useWindowResize } from './useWindowResize';
+export * from './useDropdown';
+export * from './useDropdownKeyboard';
+export * from './useDropdownPosition';
+export * from './useOutsideClick';
+export * from './useScrollLock';
+export * from './useWindowResize';

package/dist/types/src/hooks/index.d.ts

@@ -1,4 +1,4 @@
 export * from './dropdown';
-export { useCallbackRef } from './useCallbackRef';
-export { useMediaQuery } from './useMediaQuery';
-export { useMergeRefs } from './useMergeRefs';
+export * from './useCallbackRef';
+export * from './useMediaQuery';
+export * from './useMergeRefs';

package/dist/types/src/types/component-meta.d.ts

@@ -0,0 +1,26 @@
+/** AI 에이전트용 컴포넌트 메타데이터 타입 */
+/** 컴포넌트 카테고리 — `src/components/` 하위 디렉토리명과 동일 */
+export type ComponentCategory = 'action' | 'data-display' | 'feedback-and-status' | 'forms-and-input' | 'image-and-icons' | 'layout' | 'navigation' | 'overlays';
+export interface ComponentMeta {
+    category: ComponentCategory;
+    aliases: string[];
+    hasChildren: boolean;
+    description: string;
+    whenToUse: string[];
+    forbiddenRules: string[];
+    seeAlso: string[];
+    jsRequired: boolean;
+    /** Props가 확장하는 HTML 요소 — 에이전트가 표준 HTML 속성 사용 가능 여부를 판단 */
+    htmlElement?: string;
+    /**
+     * render_to_html에 전달할 실제 사용 예시 props.
+     *
+     * 작성 규칙 (props-type-guide.md § usageExamples 참조):
+     * - key: 시나리오 이름 (예: "default", "withIcon", "rangePicker")
+     * - value: render_to_html의 props 파라미터에 그대로 전달 가능한 객체
+     * - 모든 required prop 포함 필수. optional은 시나리오에 필요한 것만.
+     * - 에이전트가 복사해서 바로 사용할 수 있는 수준의 실제 데이터.
+     * - 빈 문자열(""), 빈 객체({}) 금지. 의미 있는 값을 넣을 것.
+     */
+    usageExamples?: Record<string, Record<string, unknown>>;
+}

package/dist/types/src/types/dropdown/option.d.ts

@@ -1,13 +1,11 @@
+import type { SlotIconComponent } from '../side-slot';
 /**
  * 기본 옵션 타입
  */
 export type OptionType = {
     id: string | number;
     label: string;
-    icon?: React.ComponentType<{
-        width?: number;
-        height?: number;
-    }>;
+    icon?: SlotIconComponent;
 };
 /**
  * 옵션 값 타입 (단일 또는 다중 선택)

package/dist/types/src/types/side-slot.d.ts

@@ -1,12 +1,20 @@
 import type { ComponentType, ReactNode } from 'react';
 import type { COLOR } from '../../constant/color';
 import type { DotProps } from '../components';
+/**
+ * 아이콘 컴포넌트 자리에 쓰이는 타입. MCP가 props 추출 시 이 타입의 정체성을 감지하여
+ * 문자열 이름을 실제 아이콘 컴포넌트로 치환할 수 있도록 nominal brand를 부착한다.
+ *
+ * 런타임 영향 없음 (브랜드 필드는 optional never, 실제로 할당할 수 없음).
+ */
 export type SlotIconComponent = ComponentType<{
     height?: number;
     width?: number;
     color?: string;
     className?: string;
-}>;
+}> & {
+    readonly __ncuaSlotIconBrand?: never;
+};
 export type IconSlotType = {
     type: 'icon';
     icon: SlotIconComponent;

package/dist/types/vitest.config.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vite").UserConfig;
+export default _default;