@ncds/ui-admin 1.8.1 → 1.8.3

package/dist/cjs/src/components/input-base/InputBase.js

@@ -1,195 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.InputBase = void 0;
-var _jsxRuntime = require("react/jsx-runtime");
-var _uiAdminIcon = require("@ncds/ui-admin-icon");
-var _classnames = _interopRequireDefault(require("classnames"));
-var _react = require("react");
-var _color = require("../../../constant/color");
-var _HintText = require("../shared/hintText/HintText");
-var _Label = require("../shared/label/Label");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const validationSvgSize = {
-  xs: 14,
-  sm: 16
-};
-const generalSvgSize = {
-  xs: 14,
-  sm: 20
-};
-const InputBase = exports.InputBase = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
-  let {
-    size = 'xs',
-    required,
-    label,
-    hintText,
-    disabled,
-    fullWidth = false,
-    validation,
-    destructive,
-    leadingElement,
-    trailingElement,
-    showHelpIcon,
-    maxLength,
-    showTextCount,
-    className,
-    ...props
-  } = _ref;
-  const inputRef = (0, _react.useRef)(null);
-  const [textCount, setTextCount] = (0, _react.useState)(0);
-  (0, _react.useEffect)(() => {
-    if (inputRef.current && showTextCount) {
-      setTextCount(inputRef.current.value.length);
-      const handleInput = () => {
-        setTextCount(inputRef.current?.value.length ?? 0);
-      };
-      inputRef.current.addEventListener('input', handleInput);
-      return () => {
-        inputRef.current?.removeEventListener('input', handleInput);
-      };
-    }
-  }, [showTextCount]);
-  const renderOutsideSlot = slot => {
-    if (slot.type === 'custom' && slot.placement !== 'outside') {
-      return null;
-    }
-    switch (slot.type) {
-      case 'button':
-        return (0, _jsxRuntime.jsx)("button", {
-          type: slot.isSubmit ? 'submit' : 'button',
-          className: (0, _classnames.default)('ncua-input__button', `ncua-input__button--${size}`),
-          onClick: slot.onClick,
-          children: slot.label
-        });
-      case 'text':
-        return (0, _jsxRuntime.jsx)("span", {
-          className: (0, _classnames.default)('ncua-input__leading-text', `ncua-input__leading-text--${size}`),
-          children: slot.text
-        });
-      case 'custom':
-        return slot.children;
-      default:
-        return null;
-    }
-  };
-  const renderInsideSlot = (slot, position) => {
-    switch (slot.type) {
-      case 'icon':
-        {
-          const SlotIcon = slot.icon;
-          return (0, _jsxRuntime.jsx)("div", {
-            className: "ncua-input__icon-wrap",
-            children: (0, _jsxRuntime.jsx)(SlotIcon, {
-              className: (0, _classnames.default)(`ncua-input__${position}-icon`, slot.className),
-              color: slot.color ? _color.COLOR[slot.color] : undefined,
-              width: slot.size ?? generalSvgSize[size],
-              height: slot.size ?? generalSvgSize[size]
-            })
-          });
-        }
-      case 'custom':
-        if (slot.placement !== 'inside') {
-          return null;
-        }
-        return slot.children;
-      default:
-        return null;
-    }
-  };
-  const renderClearButton = () => {
-    if (!props.clearText) return null;
-    return (0, _jsxRuntime.jsx)("button", {
-      type: "button",
-      className: (0, _classnames.default)('ncua-input__icon-wrap', 'ncua-input__right-icon', 'ncua-input__clear'),
-      onClick: props.onClearText,
-      children: (0, _jsxRuntime.jsx)(_uiAdminIcon.X, {
-        className: "ncua-input__clear-icon",
-        width: validationSvgSize[size],
-        height: validationSvgSize[size]
-      })
-    });
-  };
-  const renderStatusIcon = () => {
-    if (destructive) {
-      return (0, _jsxRuntime.jsx)("div", {
-        className: "ncua-input__icon-wrap ncua-input__right-icon",
-        children: (0, _jsxRuntime.jsx)(_uiAdminIcon.InfoCircle, {
-          className: "ncua-input__destructive-icon",
-          width: validationSvgSize[size],
-          height: validationSvgSize[size]
-        })
-      });
-    }
-    if (validation) {
-      return (0, _jsxRuntime.jsx)("div", {
-        className: "ncua-input__icon-wrap ncua-input__right-icon",
-        children: (0, _jsxRuntime.jsx)(_uiAdminIcon.CheckCircle, {
-          className: "ncua-input__validation-icon",
-          width: validationSvgSize[size],
-          height: validationSvgSize[size]
-        })
-      });
-    }
-    return null;
-  };
-  const renderLabel = () => {
-    if (!label) return null;
-    return (0, _jsxRuntime.jsxs)("div", {
-      className: (0, _classnames.default)('ncua-input__label', `ncua-input__label--${size}`),
-      children: [(0, _jsxRuntime.jsx)(_Label.Label, {
-        isRequired: required,
-        htmlFor: props.id,
-        children: label
-      }), showHelpIcon && (0, _jsxRuntime.jsx)(_uiAdminIcon.HelpCircle, {
-        className: "ncua-input__help-icon"
-      })]
-    });
-  };
-  return (0, _jsxRuntime.jsxs)("div", {
-    className: (0, _classnames.default)('ncua-input', `ncua-input--${size}`, {
-      destructive: destructive,
-      'is-disabled': disabled,
-      'full-width': fullWidth,
-      'ncua-input__trailing-button': trailingElement?.type === 'button',
-      'ncua-input__leading-text-wrap': leadingElement?.type === 'text'
-    }, className),
-    children: [renderLabel(), (0, _jsxRuntime.jsxs)("div", {
-      className: "ncua-input__content-wrap",
-      children: [(0, _jsxRuntime.jsxs)("div", {
-        className: "ncua-input__content",
-        children: [leadingElement && renderOutsideSlot(leadingElement), (0, _jsxRuntime.jsxs)("div", {
-          className: (0, _classnames.default)('ncua-input__field', `ncua-input__field--${size}`),
-          children: [leadingElement && renderInsideSlot(leadingElement, 'left'), (0, _jsxRuntime.jsx)("input", {
-            ref: node => {
-              if (typeof ref === 'function') {
-                ref(node);
-              } else if (ref) {
-                ref.current = node;
-              }
-              inputRef.current = node;
-            },
-            type: "text",
-            disabled: disabled,
-            maxLength: maxLength,
-            ...props
-          }), renderClearButton(), renderStatusIcon(), trailingElement && renderInsideSlot(trailingElement, 'right')]
-        }), trailingElement && renderOutsideSlot(trailingElement)]
-      }), showTextCount && maxLength && (0, _jsxRuntime.jsxs)("div", {
-        className: "ncua-input__field-text-count",
-        children: [(0, _jsxRuntime.jsx)("output", {
-          className: "ncua-input__field-text-count-current",
-          children: textCount
-        }), (0, _jsxRuntime.jsxs)("span", {
-          children: ["/", maxLength]
-        })]
-      })]
-    }), hintText && (0, _jsxRuntime.jsx)(_HintText.HintText, {
-      className: "ncua-input__hint-text",
-      destructive: destructive,
-      children: hintText
-    })]
-  });
-});

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

@@ -1,171 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Modal = void 0;
-var _jsxRuntime = require("react/jsx-runtime");
-var _classnames = _interopRequireDefault(require("classnames"));
-var _react = require("react");
-var _reactDom = _interopRequireDefault(require("react-dom"));
-var _ButtonCloseX = require("../button/ButtonCloseX");
-var _featuredIcon = require("../featured-icon");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const Modal = _ref => {
-  let {
-    isOpen,
-    onClose,
-    children,
-    size = 'md',
-    closeOnBackdropClick = false,
-    closeOnEsc = true,
-    className,
-    zIndex,
-    ...restProps
-  } = _ref;
-  const modalRef = (0, _react.useRef)(null);
-  const handleBackdropClick = e => {
-    if (closeOnBackdropClick && e.target === e.currentTarget) {
-      onClose();
-    }
-  };
-  (0, _react.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 = (0, _jsxRuntime.jsx)("div", {
-    className: (0, _classnames.default)('ncua-modal-backdrop', className),
-    onClick: handleBackdropClick,
-    ref: modalRef,
-    style: zIndex ? {
-      zIndex
-    } : undefined,
-    ...restProps,
-    children: (0, _jsxRuntime.jsx)("div", {
-      className: (0, _classnames.default)('ncua-modal', `ncua-modal--${size}`),
-      children: children
-    })
-  });
-  return /*#__PURE__*/_reactDom.default.createPortal(modalContent, document.body);
-};
-exports.Modal = Modal;
-Modal.Header = _ref2 => {
-  let {
-    children,
-    onClose,
-    featuredIcon,
-    title,
-    subtitle,
-    align = 'left',
-    showDivider = false,
-    hideCloseButton = false
-  } = _ref2;
-  return (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [(0, _jsxRuntime.jsxs)("header", {
-      className: (0, _classnames.default)('ncua-modal__header', `ncua-modal__header--${align}`, {
-        'ncua-modal__header--close-button': !hideCloseButton
-      }),
-      children: [featuredIcon && (0, _jsxRuntime.jsx)(_featuredIcon.FeaturedIcon, {
-        icon: featuredIcon.icon,
-        color: featuredIcon.color,
-        theme: featuredIcon.theme,
-        size: "sm"
-      }), (0, _jsxRuntime.jsxs)("div", {
-        className: "ncua-modal__title",
-        children: [(0, _jsxRuntime.jsx)("div", {
-          className: "ncua-modal__title-text",
-          children: title
-        }), subtitle && (0, _jsxRuntime.jsx)("div", {
-          className: "ncua-modal__title-subtitle",
-          children: subtitle
-        })]
-      }), children, !hideCloseButton && (0, _jsxRuntime.jsx)(_ButtonCloseX.ButtonCloseX, {
-        className: "ncua-modal__close-button",
-        size: "sm",
-        theme: "light",
-        onClick: onClose
-      })]
-    }), showDivider && (0, _jsxRuntime.jsx)("div", {
-      className: "ncua-modal__header-divider"
-    })]
-  });
-};
-Modal.Content = _ref3 => {
-  let {
-    children,
-    className
-  } = _ref3;
-  return (0, _jsxRuntime.jsx)("div", {
-    className: (0, _classnames.default)('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 (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [showDivider && (0, _jsxRuntime.jsx)("div", {
-      className: "ncua-modal__actions-divider"
-    }), (0, _jsxRuntime.jsxs)("div", {
-      className: (0, _classnames.default)('ncua-modal__actions-wrapper', className, {
-        'ncua-modal__actions-wrapper--checkbox': layout === 'checkbox'
-      }),
-      children: [layout === 'checkbox' && (0, _jsxRuntime.jsx)("div", {
-        className: "ncua-modal__actions-checkbox",
-        children: (0, _jsxRuntime.jsx)("div", {
-          className: "ncua-modal__actions-checkbox-content",
-          children: checkboxContent
-        })
-      }), (0, _jsxRuntime.jsx)("div", {
-        className: (0, _classnames.default)('ncua-modal__actions', `ncua-modal__actions--${layout}`, `ncua-modal__actions--${align}`),
-        children: children
-      })]
-    })]
-  });
-};

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

@@ -1,112 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.FloatingNotification = void 0;
-var _jsxRuntime = require("react/jsx-runtime");
-var _uiAdminIcon = require("@ncds/ui-admin-icon");
-var _classnames = _interopRequireDefault(require("classnames"));
-var _react = require("react");
-var _breakpoint = require("../../constant/breakpoint");
-var _useMediaQuery = require("../../hooks/useMediaQuery");
-var _button = require("../button");
-var _ButtonCloseX = require("../button/ButtonCloseX");
-var _FeaturedIcon = require("../featured-icon/FeaturedIcon");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const iconMap = {
-  neutral: _uiAdminIcon.Pin02,
-  error: _uiAdminIcon.AlertTriangle,
-  warning: _uiAdminIcon.AlertCircle,
-  success: _uiAdminIcon.CheckCircle
-  // info는 floating에서는 지원하지 않음
-};
-const FloatingNotification = exports.FloatingNotification = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
-  let {
-    title,
-    supportingText,
-    color = 'neutral',
-    onClose,
-    className,
-    actions,
-    autoClose = 0,
-    ...rest
-  } = _ref;
-  const [shouldRemove, setShouldRemove] = (0, _react.useState)(false);
-  const iconColor = color;
-  const featuredIconProps = {
-    icon: iconMap[color] || _uiAdminIcon.Pin02,
-    size: 'sm',
-    color: iconColor,
-    theme: 'dark-circle'
-  };
-  const isMobile = (0, _useMediaQuery.useMediaQuery)(_breakpoint.MEDIA_QUERY.mobile, {
-    onMatched: onClose
-  });
-  // autoClose 타이머 관리
-  const timerRef = (0, _react.useRef)(null);
-  (0, _react.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 (0, _jsxRuntime.jsxs)("div", {
-    ref: ref,
-    className: (0, _classnames.default)('ncua-floating-notification', `ncua-floating-notification--${color}`, className),
-    role: "alert",
-    ...rest,
-    children: [(0, _jsxRuntime.jsx)("div", {
-      className: "ncua-floating-notification__content",
-      children: (0, _jsxRuntime.jsxs)("div", {
-        className: "ncua-floating-notification__container",
-        children: [iconMap[color] && (0, _jsxRuntime.jsx)(_FeaturedIcon.FeaturedIcon, {
-          ...featuredIconProps,
-          size: isMobile ? 'md' : 'sm'
-        }), (0, _jsxRuntime.jsxs)("div", {
-          className: "ncua-floating-notification__text-container",
-          children: [(0, _jsxRuntime.jsx)("div", {
-            className: "ncua-floating-notification__title-wrapper",
-            children: (0, _jsxRuntime.jsx)("span", {
-              className: "ncua-floating-notification__title",
-              children: title
-            })
-          }), supportingText && (0, _jsxRuntime.jsx)("span", {
-            className: "ncua-floating-notification__supporting-text",
-            children: supportingText
-          }), actions && (0, _jsxRuntime.jsx)("div", {
-            className: "ncua-floating-notification__actions",
-            children: actions.map(action => (0, _jsxRuntime.jsx)(_button.Button, {
-              size: "xs",
-              hierarchy: action.hierarchy || 'text',
-              label: action.label,
-              onClick: action?.onClick
-            }, `${action.label}-${action.hierarchy}`))
-          })]
-        })]
-      })
-    }), onClose && (0, _jsxRuntime.jsx)(_ButtonCloseX.ButtonCloseX, {
-      theme: "light",
-      className: "ncua-floating-notification__close-button",
-      size: isMobile ? 'sm' : 'xs',
-      onClick: onClose
-    })]
-  });
-});

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

@@ -1,134 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.FullWidthNotification = void 0;
-var _jsxRuntime = require("react/jsx-runtime");
-var _uiAdminIcon = require("@ncds/ui-admin-icon");
-var _classnames = _interopRequireDefault(require("classnames"));
-var _react = require("react");
-var _color = require("../../../constant/color");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const iconMap = {
-  neutral: _uiAdminIcon.MessageChatSquare,
-  error: _uiAdminIcon.AlertTriangle,
-  warning: _uiAdminIcon.AlertTriangle,
-  success: _uiAdminIcon.CheckCircle,
-  info: _uiAdminIcon.InfoCircle
-};
-const iconColorMap = {
-  neutral: 'gray700',
-  error: 'red500',
-  warning: 'orange500',
-  success: 'green600',
-  info: 'violet600'
-};
-const FullWidthNotification = exports.FullWidthNotification = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
-  let {
-    title,
-    supportingText,
-    color = 'neutral',
-    onClose,
-    className,
-    actions,
-    autoClose = 0,
-    supportTextLink,
-    onHidePermanently,
-    ...rest
-  } = _ref;
-  const [shouldRemove, setShouldRemove] = (0, _react.useState)(false);
-  const closeIconSize = {
-    width: 20,
-    height: 20
-  };
-  // autoClose 타이머 관리
-  const timerRef = (0, _react.useRef)(null);
-  (0, _react.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 (0, _jsxRuntime.jsx)("div", {
-    ref: ref,
-    className: (0, _classnames.default)('ncua-full-width-notification', `ncua-full-width-notification--${color}`, className),
-    role: "alert",
-    ...rest,
-    children: (0, _jsxRuntime.jsx)("div", {
-      className: "ncua-full-width-notification__container",
-      children: (0, _jsxRuntime.jsxs)("div", {
-        className: "ncua-full-width-notification__content",
-        children: [(0, _jsxRuntime.jsxs)("div", {
-          className: "ncua-full-width-notification__content-wrapper",
-          children: [(() => {
-            const IconComponent = iconMap[color];
-            return (0, _jsxRuntime.jsx)(IconComponent, {
-              width: 16,
-              height: 16,
-              color: _color.COLOR[iconColorMap[color]],
-              className: "ncua-full-width-notification__icon"
-            });
-          })(), (0, _jsxRuntime.jsxs)("div", {
-            className: "ncua-full-width-notification__text-container",
-            children: [(0, _jsxRuntime.jsx)("span", {
-              className: "ncua-full-width-notification__title",
-              children: title
-            }), !supportTextLink && supportingText && (0, _jsxRuntime.jsx)("span", {
-              className: "ncua-full-width-notification__supporting-text",
-              children: supportingText
-            }), supportTextLink && supportingText && (0, _jsxRuntime.jsx)("a", {
-              href: supportTextLink,
-              className: "ncua-full-width-notification__link",
-              children: (0, _jsxRuntime.jsx)("span", {
-                className: "ncua-full-width-notification__supporting-text",
-                children: supportingText
-              })
-            })]
-          })]
-        }), (0, _jsxRuntime.jsxs)("div", {
-          className: "ncua-full-width-notification__actions-container",
-          children: [actions && (0, _jsxRuntime.jsx)("div", {
-            className: "ncua-full-width-notification__actions",
-            children: actions.map(action => (0, _jsxRuntime.jsx)("button", {
-              onClick: action.onClick,
-              className: (0, _classnames.default)('ncua-notification__action-button', `ncua-notification__action-button--${action.hierarchy || 'text'}`),
-              children: action.label
-            }, `${action.label}-${action.hierarchy}`))
-          }), onHidePermanently && (0, _jsxRuntime.jsx)("button", {
-            type: "button",
-            className: (0, _classnames.default)('ncua-notification__action-button', 'ncua-notification__action-button--text', 'ncua-full-width-notification__link'),
-            onClick: onHidePermanently,
-            children: "\uB2E4\uC2DC\uBCF4\uC9C0 \uC54A\uAE30"
-          }), onClose && (0, _jsxRuntime.jsx)("button", {
-            type: "button",
-            className: "ncua-full-width-notification__close-button",
-            onClick: onClose,
-            "aria-label": "\uC54C\uB9BC \uB2EB\uAE30",
-            children: (0, _jsxRuntime.jsx)(_uiAdminIcon.XClose, {
-              ...closeIconSize,
-              color: _color.COLOR[iconColorMap[color]]
-            })
-          })]
-        })]
-      })
-    })
-  });
-});