@ncds/ui-admin 1.8.1 → 1.8.3

package/dist/esm/src/components/modal/Modal.js

@@ -1,164 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import classnames from 'classnames';
-import { useEffect, useRef } from 'react';
-import ReactDOM from 'react-dom';
-import { ButtonCloseX } from '../button/ButtonCloseX';
-import { FeaturedIcon } from '../featured-icon';
-const Modal = _ref => {
-  let {
-    isOpen,
-    onClose,
-    children,
-    size = 'md',
-    closeOnBackdropClick = false,
-    closeOnEsc = true,
-    className,
-    zIndex,
-    ...restProps
-  } = _ref;
-  const modalRef = useRef(null);
-  const handleBackdropClick = e => {
-    if (closeOnBackdropClick && e.target === e.currentTarget) {
-      onClose();
-    }
-  };
-  useEffect(() => {
-    const handleKeyDown = e => {
-      if (isOpen && closeOnEsc && e.key === 'Escape') {
-        onClose();
-      }
-    };
-    if (isOpen) {
-      document.addEventListener('keydown', handleKeyDown);
-      document.body.style.overflow = 'hidden';
-    }
-    return () => {
-      document.removeEventListener('keydown', handleKeyDown);
-      document.body.style.overflow = '';
-    };
-  }, [isOpen, closeOnEsc, onClose]);
-  if (!isOpen) return null;
-  const modalContent = _jsx("div", {
-    className: classnames('ncua-modal-backdrop', className),
-    onClick: handleBackdropClick,
-    ref: modalRef,
-    style: zIndex ? {
-      zIndex
-    } : undefined,
-    ...restProps,
-    children: _jsx("div", {
-      className: classnames('ncua-modal', `ncua-modal--${size}`),
-      children: children
-    })
-  });
-  return /*#__PURE__*/ReactDOM.createPortal(modalContent, document.body);
-};
-Modal.Header = _ref2 => {
-  let {
-    children,
-    onClose,
-    featuredIcon,
-    title,
-    subtitle,
-    align = 'left',
-    showDivider = false,
-    hideCloseButton = false
-  } = _ref2;
-  return _jsxs(_Fragment, {
-    children: [_jsxs("header", {
-      className: classnames('ncua-modal__header', `ncua-modal__header--${align}`, {
-        'ncua-modal__header--close-button': !hideCloseButton
-      }),
-      children: [featuredIcon && _jsx(FeaturedIcon, {
-        icon: featuredIcon.icon,
-        color: featuredIcon.color,
-        theme: featuredIcon.theme,
-        size: "sm"
-      }), _jsxs("div", {
-        className: "ncua-modal__title",
-        children: [_jsx("div", {
-          className: "ncua-modal__title-text",
-          children: title
-        }), subtitle && _jsx("div", {
-          className: "ncua-modal__title-subtitle",
-          children: subtitle
-        })]
-      }), children, !hideCloseButton && _jsx(ButtonCloseX, {
-        className: "ncua-modal__close-button",
-        size: "sm",
-        theme: "light",
-        onClick: onClose
-      })]
-    }), showDivider && _jsx("div", {
-      className: "ncua-modal__header-divider"
-    })]
-  });
-};
-Modal.Content = _ref3 => {
-  let {
-    children,
-    className
-  } = _ref3;
-  return _jsx("div", {
-    className: classnames('ncua-modal__content', className),
-    children: children
-  });
-};
-/**
- * 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>
- */
-Modal.Actions = _ref4 => {
-  let {
-    children,
-    layout = 'vertical',
-    showDivider = false,
-    align = 'stretch',
-    checkboxContent,
-    className
-  } = _ref4;
-  return _jsxs(_Fragment, {
-    children: [showDivider && _jsx("div", {
-      className: "ncua-modal__actions-divider"
-    }), _jsxs("div", {
-      className: classnames('ncua-modal__actions-wrapper', className, {
-        'ncua-modal__actions-wrapper--checkbox': layout === 'checkbox'
-      }),
-      children: [layout === 'checkbox' && _jsx("div", {
-        className: "ncua-modal__actions-checkbox",
-        children: _jsx("div", {
-          className: "ncua-modal__actions-checkbox-content",
-          children: checkboxContent
-        })
-      }), _jsx("div", {
-        className: classnames('ncua-modal__actions', `ncua-modal__actions--${layout}`, `ncua-modal__actions--${align}`),
-        children: children
-      })]
-    })]
-  });
-};
-export { Modal };

package/dist/esm/src/components/notification/FloatingNotification.js

@@ -1,106 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { AlertCircle, AlertTriangle, CheckCircle, Pin02 } from '@ncds/ui-admin-icon';
-import classNames from 'classnames';
-import { forwardRef, useEffect, useRef, useState } from 'react';
-import { MEDIA_QUERY } from '../../constant/breakpoint';
-import { useMediaQuery } from '../../hooks/useMediaQuery';
-import { Button } from '../button';
-import { ButtonCloseX } from '../button/ButtonCloseX';
-import { FeaturedIcon } from '../featured-icon/FeaturedIcon';
-const iconMap = {
-  neutral: Pin02,
-  error: AlertTriangle,
-  warning: AlertCircle,
-  success: CheckCircle
-  // info는 floating에서는 지원하지 않음
-};
-const FloatingNotification = /*#__PURE__*/forwardRef((_ref, ref) => {
-  let {
-    title,
-    supportingText,
-    color = 'neutral',
-    onClose,
-    className,
-    actions,
-    autoClose = 0,
-    ...rest
-  } = _ref;
-  const [shouldRemove, setShouldRemove] = useState(false);
-  const iconColor = color;
-  const featuredIconProps = {
-    icon: iconMap[color] || Pin02,
-    size: 'sm',
-    color: iconColor,
-    theme: 'dark-circle'
-  };
-  const isMobile = useMediaQuery(MEDIA_QUERY.mobile, {
-    onMatched: onClose
-  });
-  // autoClose 타이머 관리
-  const timerRef = useRef(null);
-  useEffect(() => {
-    // autoClose가 0보다 크면 무조건 타이머 설정
-    if (autoClose > 0) {
-      timerRef.current = setTimeout(() => {
-        if (onClose) {
-          onClose();
-        }
-        // DOM에서 바로 제거
-        setShouldRemove(true);
-      }, autoClose);
-    }
-    // cleanup 함수: 컴포넌트 언마운트 시 타이머 정리
-    return () => {
-      if (timerRef.current) {
-        clearTimeout(timerRef.current);
-        timerRef.current = null;
-      }
-    };
-  }, [autoClose, onClose]);
-  // DOM에서 완전히 제거
-  if (shouldRemove) {
-    return null;
-  }
-  return _jsxs("div", {
-    ref: ref,
-    className: classNames('ncua-floating-notification', `ncua-floating-notification--${color}`, className),
-    role: "alert",
-    ...rest,
-    children: [_jsx("div", {
-      className: "ncua-floating-notification__content",
-      children: _jsxs("div", {
-        className: "ncua-floating-notification__container",
-        children: [iconMap[color] && _jsx(FeaturedIcon, {
-          ...featuredIconProps,
-          size: isMobile ? 'md' : 'sm'
-        }), _jsxs("div", {
-          className: "ncua-floating-notification__text-container",
-          children: [_jsx("div", {
-            className: "ncua-floating-notification__title-wrapper",
-            children: _jsx("span", {
-              className: "ncua-floating-notification__title",
-              children: title
-            })
-          }), supportingText && _jsx("span", {
-            className: "ncua-floating-notification__supporting-text",
-            children: supportingText
-          }), actions && _jsx("div", {
-            className: "ncua-floating-notification__actions",
-            children: actions.map(action => _jsx(Button, {
-              size: "xs",
-              hierarchy: action.hierarchy || 'text',
-              label: action.label,
-              onClick: action?.onClick
-            }, `${action.label}-${action.hierarchy}`))
-          })]
-        })]
-      })
-    }), onClose && _jsx(ButtonCloseX, {
-      theme: "light",
-      className: "ncua-floating-notification__close-button",
-      size: isMobile ? 'sm' : 'xs',
-      onClick: onClose
-    })]
-  });
-});
-export { FloatingNotification };

package/dist/esm/src/components/notification/FullWidthNotification.js

@@ -1,128 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { AlertTriangle, CheckCircle, InfoCircle, MessageChatSquare, XClose } from '@ncds/ui-admin-icon';
-import classNames from 'classnames';
-import { forwardRef, useEffect, useRef, useState } from 'react';
-import { COLOR } from '../../../constant/color';
-const iconMap = {
-  neutral: MessageChatSquare,
-  error: AlertTriangle,
-  warning: AlertTriangle,
-  success: CheckCircle,
-  info: InfoCircle
-};
-const iconColorMap = {
-  neutral: 'gray700',
-  error: 'red500',
-  warning: 'orange500',
-  success: 'green600',
-  info: 'violet600'
-};
-const FullWidthNotification = /*#__PURE__*/forwardRef((_ref, ref) => {
-  let {
-    title,
-    supportingText,
-    color = 'neutral',
-    onClose,
-    className,
-    actions,
-    autoClose = 0,
-    supportTextLink,
-    onHidePermanently,
-    ...rest
-  } = _ref;
-  const [shouldRemove, setShouldRemove] = useState(false);
-  const closeIconSize = {
-    width: 20,
-    height: 20
-  };
-  // autoClose 타이머 관리
-  const timerRef = useRef(null);
-  useEffect(() => {
-    // autoClose가 0보다 크면 무조건 타이머 설정
-    if (autoClose > 0) {
-      timerRef.current = setTimeout(() => {
-        if (onClose) {
-          onClose();
-        }
-        // DOM에서 바로 제거
-        setShouldRemove(true);
-      }, autoClose);
-    }
-    // cleanup 함수: 컴포넌트 언마운트 시 타이머 정리
-    return () => {
-      if (timerRef.current) {
-        clearTimeout(timerRef.current);
-        timerRef.current = null;
-      }
-    };
-  }, [autoClose, onClose]);
-  // DOM에서 완전히 제거
-  if (shouldRemove) {
-    return null;
-  }
-  return _jsx("div", {
-    ref: ref,
-    className: classNames('ncua-full-width-notification', `ncua-full-width-notification--${color}`, className),
-    role: "alert",
-    ...rest,
-    children: _jsx("div", {
-      className: "ncua-full-width-notification__container",
-      children: _jsxs("div", {
-        className: "ncua-full-width-notification__content",
-        children: [_jsxs("div", {
-          className: "ncua-full-width-notification__content-wrapper",
-          children: [(() => {
-            const IconComponent = iconMap[color];
-            return _jsx(IconComponent, {
-              width: 16,
-              height: 16,
-              color: COLOR[iconColorMap[color]],
-              className: "ncua-full-width-notification__icon"
-            });
-          })(), _jsxs("div", {
-            className: "ncua-full-width-notification__text-container",
-            children: [_jsx("span", {
-              className: "ncua-full-width-notification__title",
-              children: title
-            }), !supportTextLink && supportingText && _jsx("span", {
-              className: "ncua-full-width-notification__supporting-text",
-              children: supportingText
-            }), supportTextLink && supportingText && _jsx("a", {
-              href: supportTextLink,
-              className: "ncua-full-width-notification__link",
-              children: _jsx("span", {
-                className: "ncua-full-width-notification__supporting-text",
-                children: supportingText
-              })
-            })]
-          })]
-        }), _jsxs("div", {
-          className: "ncua-full-width-notification__actions-container",
-          children: [actions && _jsx("div", {
-            className: "ncua-full-width-notification__actions",
-            children: actions.map(action => _jsx("button", {
-              onClick: action.onClick,
-              className: classNames('ncua-notification__action-button', `ncua-notification__action-button--${action.hierarchy || 'text'}`),
-              children: action.label
-            }, `${action.label}-${action.hierarchy}`))
-          }), onHidePermanently && _jsx("button", {
-            type: "button",
-            className: classNames('ncua-notification__action-button', 'ncua-notification__action-button--text', 'ncua-full-width-notification__link'),
-            onClick: onHidePermanently,
-            children: "\uB2E4\uC2DC\uBCF4\uC9C0 \uC54A\uAE30"
-          }), onClose && _jsx("button", {
-            type: "button",
-            className: "ncua-full-width-notification__close-button",
-            onClick: onClose,
-            "aria-label": "\uC54C\uB9BC \uB2EB\uAE30",
-            children: _jsx(XClose, {
-              ...closeIconSize,
-              color: COLOR[iconColorMap[color]]
-            })
-          })]
-        })]
-      })
-    })
-  });
-});
-export { FullWidthNotification };

package/dist/esm/src/components/notification/MessageNotification.js

@@ -1,101 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { AlertCircle, AlertTriangle, CheckCircle, Pin02, XClose } from '@ncds/ui-admin-icon';
-import classNames from 'classnames';
-import { forwardRef } from 'react';
-import { COLOR } from '../../../constant/color';
-import { Button } from '../button';
-import { FeaturedIcon } from '../featured-icon/FeaturedIcon';
-const iconMap = {
-  neutral: Pin02,
-  error: AlertTriangle,
-  warning: AlertCircle,
-  success: CheckCircle
-};
-const iconColorMap = {
-  neutral: 'gray700',
-  error: 'red500',
-  warning: 'orange500',
-  success: 'green600'
-};
-const MessageNotification = /*#__PURE__*/forwardRef((_ref, ref) => {
-  let {
-    title,
-    supportingText,
-    icon: Icon,
-    color = 'neutral',
-    onClose,
-    className,
-    actions,
-    onHidePermanently,
-    ...rest
-  } = _ref;
-  // message 타입은 neutral, error, warning, success 4가지 색상만 지원
-  const validColor = color === 'info' ? 'neutral' : color;
-  const iconColor = validColor;
-  const featuredIconProps = {
-    icon: Icon || iconMap[validColor] || Pin02,
-    size: 'lg',
-    color: iconColor,
-    theme: 'light-circle'
-  };
-  const closeIconColor = COLOR[iconColorMap[validColor] || 'gray700'];
-  return _jsx("div", {
-    ref: ref,
-    className: classNames('ncua-message-notification', `ncua-message-notification--${validColor}`, className),
-    role: "alert",
-    ...rest,
-    children: _jsx("div", {
-      className: "ncua-message-notification__container",
-      children: _jsxs("div", {
-        className: "ncua-message-notification__content",
-        children: [_jsxs("div", {
-          className: "ncua-message-notification__content-wrapper",
-          children: [iconMap[validColor] && _jsx(FeaturedIcon, {
-            ...featuredIconProps,
-            className: "ncua-message-notification__icon"
-          }), _jsxs("div", {
-            className: "ncua-message-notification__text-container",
-            children: [_jsx("span", {
-              className: "ncua-message-notification__title",
-              children: title
-            }), supportingText && _jsx("span", {
-              className: "ncua-message-notification__supporting-text",
-              children: supportingText
-            })]
-          })]
-        }), _jsx("div", {
-          className: "ncua-message-notification__actions-container",
-          children: actions && _jsx("div", {
-            className: "ncua-message-notification__actions",
-            children: actions.map(action => _jsx(Button, {
-              size: "xs",
-              hierarchy: action.hierarchy || 'text',
-              label: action.label,
-              onClick: action?.onClick
-            }, `${action.label}-${action.hierarchy}`))
-          })
-        }), _jsxs("div", {
-          className: "ncua-message-notification__footer-container",
-          children: [onHidePermanently && _jsx("button", {
-            type: "button",
-            className: classNames('ncua-notification__action-button', 'ncua-notification__action-button--link', 'ncua-message-notification__hide-link'),
-            onClick: onHidePermanently,
-            children: "\uB2E4\uC2DC \uBCF4\uC9C0 \uC54A\uAE30"
-          }), onClose && _jsx("button", {
-            type: "button",
-            className: "ncua-message-notification__close-button",
-            onClick: onClose,
-            "aria-label": "\uC54C\uB9BC \uB2EB\uAE30",
-            children: _jsx(XClose, {
-              width: 20,
-              height: 20,
-              color: closeIconColor
-            })
-          })]
-        })]
-      })
-    })
-  });
-});
-MessageNotification.displayName = 'MessageNotification';
-export { MessageNotification };

package/dist/esm/src/components/number-input/NumberInput.js

@@ -1,106 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useCallback, useRef } from 'react';
-import { useMergeRefs } from '../../hooks';
-import { ButtonStepper } from '../button';
-import { InputBase } from '../input-base/InputBase';
-export const NumberInput = /*#__PURE__*/forwardRef((_ref, ref) => {
-  let {
-    size = 'xs',
-    minValue,
-    maxValue,
-    step = 1,
-    stepperPosition,
-    disabled,
-    ...props
-  } = _ref;
-  const inputRef = useRef(null);
-  const mergedRef = useMergeRefs([ref, inputRef]);
-  const getCurrentValue = useCallback(() => {
-    const value = inputRef.current?.value;
-    return value ? Number.parseFloat(value) : 0;
-  }, []);
-  const updateValue = useCallback(newValue => {
-    if (!inputRef.current) return;
-    // min/max 범위 체크
-    let clampedValue = newValue;
-    if (minValue !== undefined && clampedValue < minValue) {
-      clampedValue = minValue;
-    }
-    if (maxValue !== undefined && clampedValue > maxValue) {
-      clampedValue = maxValue;
-    }
-    inputRef.current.value = clampedValue.toString();
-    // onChange 이벤트 트리거
-    const event = new Event('input', {
-      bubbles: true
-    });
-    inputRef.current.dispatchEvent(event);
-  }, [minValue, maxValue]);
-  const handleIncrement = useCallback(() => {
-    const currentValue = getCurrentValue();
-    const newValue = currentValue + step;
-    if (maxValue === undefined || newValue <= maxValue) {
-      updateValue(newValue);
-    }
-  }, [getCurrentValue, step, maxValue, updateValue]);
-  const handleDecrement = useCallback(() => {
-    const currentValue = getCurrentValue();
-    const newValue = currentValue - step;
-    if (minValue === undefined || newValue >= minValue) {
-      updateValue(newValue);
-    }
-  }, [getCurrentValue, step, minValue, updateValue]);
-  const handleKeyDown = useCallback(event => {
-    if (disabled) return;
-    if (event.key === 'ArrowUp') {
-      event.preventDefault();
-      handleIncrement();
-    } else if (event.key === 'ArrowDown') {
-      event.preventDefault();
-      handleDecrement();
-    }
-    // 기존 onKeyDown prop이 있으면 호출
-    props.onKeyDown?.(event);
-  }, [disabled, handleIncrement, handleDecrement, props]);
-  const renderStepperButtonGroup = position => {
-    if (position !== stepperPosition) {
-      return null;
-    }
-    return _jsxs("div", {
-      className: "ncua-input__stepper-button-group",
-      children: [_jsx(ButtonStepper, {
-        size: size,
-        direction: "up",
-        onClick: handleIncrement,
-        disabled: disabled
-      }), _jsx(ButtonStepper, {
-        size: size,
-        direction: "down",
-        onClick: handleDecrement,
-        disabled: disabled
-      })]
-    });
-  };
-  return _jsx(InputBase, {
-    type: "number",
-    leadingElement: renderStepperButtonGroup('leading') ? {
-      type: 'custom',
-      children: renderStepperButtonGroup('leading'),
-      placement: 'inside'
-    } : props.leadingElement,
-    trailingElement: renderStepperButtonGroup('trailing') ? {
-      type: 'custom',
-      children: renderStepperButtonGroup('trailing'),
-      placement: 'inside'
-    } : props.trailingElement,
-    ref: mergedRef,
-    size: size,
-    disabled: disabled,
-    min: minValue,
-    max: maxValue,
-    step: step,
-    onKeyDown: handleKeyDown,
-    className: "ncua-input__number",
-    ...props
-  });
-});

package/dist/esm/src/components/pagination/NavButton.js

@@ -1,63 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { ArrowLeft, ArrowRight, ChevronLeft, ChevronLeftDouble, ChevronRight, ChevronRightDouble } from '@ncds/ui-admin-icon';
-import { Button } from '../button';
-const ICON_SIZE_PC = 16;
-const ICON_SIZE_MOBILE = 20;
-const NAV_BUTTON_CONFIG = {
-  first: {
-    label: '처음',
-    className: 'ncua-pagination__first',
-    getIcon: _isPC => ChevronLeftDouble
-  },
-  prev: {
-    label: '이전',
-    className: 'ncua-pagination__before',
-    getIcon: isPC => isPC ? ChevronLeft : ArrowLeft
-  },
-  next: {
-    label: '다음',
-    className: 'ncua-pagination__next',
-    getIcon: isPC => isPC ? ChevronRight : ArrowRight
-  },
-  last: {
-    label: '마지막',
-    className: 'ncua-pagination__last',
-    getIcon: _isPC => ChevronRightDouble
-  }
-};
-export const NavButton = _ref => {
-  let {
-    type,
-    breakPoint,
-    noPrev,
-    noNext,
-    onClick
-  } = _ref;
-  const config = NAV_BUTTON_CONFIG[type];
-  const isNavigationButton = type === 'first' || type === 'prev' || type === 'next' || type === 'last';
-  const isFirstOrPrev = type === 'first' || type === 'prev';
-  const isNextOrLast = type === 'next' || type === 'last';
-  const disabled = (isFirstOrPrev ? noPrev : false) || (isNextOrLast ? noNext : false);
-  const isPC = breakPoint === 'pc';
-  // key를 제외한 공통 props
-  const buttonProps = {
-    label: config.label,
-    className: config.className,
-    onlyIcon: true,
-    leadingIcon: {
-      type: 'icon',
-      icon: config.getIcon(isPC),
-      size: isPC ? ICON_SIZE_PC : ICON_SIZE_MOBILE,
-      color: disabled ? 'gray200' : 'gray700'
-    },
-    hierarchy: 'secondary-gray',
-    size: isPC ? 'xs' : 'sm',
-    disabled,
-    onClick
-  };
-  // key 값 별도 계산
-  const buttonKey = isNavigationButton ? `${breakPoint}-${type}` : undefined;
-  return _jsx(Button, {
-    ...buttonProps
-  }, buttonKey);
-};

package/dist/esm/src/components/progress-bar/index.js

@@ -1,2 +0,0 @@
-export * from './ProgressBar';
-export * from './types';

package/dist/esm/src/components/progress-bar/types.js

@@ -1 +0,0 @@
-export {};