@ncds/ui-admin 1.6.4 → 1.7.0

package/dist/temp/assets/scripts/notification/const/icons.js

@@ -0,0 +1,39 @@
+// SVG 아이콘들 (크기는 동적으로 설정)
+export var SVG_ICONS = {
+    'pin-02': function (size) {
+        return "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"".concat(size, "\" height=\"").concat(size, "\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"none\"><path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8.377 15.616 2.72 21.273m8.974-14.631-1.56 1.56a2 2 0 0 1-.264.242 1 1 0 0 1-.207.111c-.082.032-.17.05-.347.085l-3.665.733c-.952.19-1.428.286-1.65.537a1 1 0 0 0-.243.8c.046.333.39.677 1.076 1.363l7.086 7.086c.686.687 1.03 1.03 1.362 1.076a1 1 0 0 0 .801-.242c.251-.223.346-.7.537-1.651l.733-3.665c.035-.176.053-.265.085-.347a1 1 0 0 1 .11-.207c.051-.072.115-.136.242-.263l1.561-1.561c.082-.082.122-.122.167-.158q.06-.047.126-.085c.05-.029.103-.051.208-.097l2.495-1.069c.727-.312 1.091-.467 1.256-.72a1 1 0 0 0 .144-.747c-.06-.295-.34-.575-.9-1.135l-5.142-5.143c-.56-.56-.84-.84-1.135-.9a1 1 0 0 0-.748.145c-.252.165-.407.529-.72 1.256l-1.068 2.495a2 2 0 0 1-.097.208 1 1 0 0 1-.085.126 2 2 0 0 1-.158.167\"></path></svg>");
+    },
+    'alert-triangle': function (size) {
+        return "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"".concat(size, "\" height=\"").concat(size, "\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"none\"><path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 9v4m0 4h.01M10.615 3.892 2.39 18.098c-.456.788-.684 1.182-.65 1.506a1 1 0 0 0 .406.705c.263.191.718.191 1.629.191h16.45c.91 0 1.365 0 1.628-.191a1 1 0 0 0 .407-.705c.034-.324-.195-.718-.65-1.506L13.383 3.892c-.454-.785-.681-1.178-.978-1.31a1 1 0 0 0-.812 0c-.297.132-.524.525-.979 1.31\"></path></svg>");
+    },
+    'alert-circle': function (size) {
+        return "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"".concat(size, "\" height=\"").concat(size, "\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"none\"><path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 8v4m0 4h.01M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10\"></path></svg>");
+    },
+    'check-circle': function (size) {
+        return "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"".concat(size, "\" height=\"").concat(size, "\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"none\"><path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"m7.5 12 3 3 6-6m5.5 3c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10\"></path></svg>");
+    },
+    'info-circle': function (size) {
+        return "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"".concat(size, "\" height=\"").concat(size, "\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"none\" color=\"#5720B7\" class=\"ncua-full-width-notification__icon\"><path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 16v-4m0-4h.01M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10\"></path></svg>");
+    },
+    'message-chat-square': function (size) {
+        return "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"".concat(size, "\" height=\"").concat(size, "\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"none\" color=\"#0C111D\" class=\"ncua-full-width-notification__icon\"><path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"m10 15-3.075 3.114c-.43.434-.644.651-.828.666a.5.5 0 0 1-.421-.172c-.12-.14-.12-.446-.12-1.056v-1.56c0-.548-.449-.944-.99-1.024v0a3 3 0 0 1-2.534-2.533C2 12.219 2 11.96 2 11.445V6.8c0-1.68 0-2.52.327-3.162a3 3 0 0 1 1.311-1.311C4.28 2 5.12 2 6.8 2h7.4c1.68 0 2.52 0 3.162.327a3 3 0 0 1 1.311 1.311C19 4.28 19 5.12 19 6.8V11m0 11-2.176-1.513c-.306-.213-.46-.32-.626-.395a2 2 0 0 0-.462-.145c-.18-.033-.367-.033-.74-.033H13.2c-1.12 0-1.68 0-2.108-.218a2 2 0 0 1-.874-.874C10 18.394 10 17.834 10 16.714V14.2c0-1.12 0-1.68.218-2.108a2 2 0 0 1 .874-.874C11.52 11 12.08 11 13.2 11h5.6c1.12 0 1.68 0 2.108.218a2 2 0 0 1 .874.874C22 12.52 22 13.08 22 14.2v2.714c0 .932 0 1.398-.152 1.766a2 2 0 0 1-1.083 1.082c-.367.152-.833.152-1.765.152z\"></path></svg>");
+    },
+    'x-close': function (size) {
+        return "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"".concat(size, "\" height=\"").concat(size, "\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"none\"><path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M18 6 6 18M6 6l12 12\"></path></svg>");
+    },
+};
+export var FLOATING_ICON_MAP = {
+    neutral: SVG_ICONS['pin-02'],
+    error: SVG_ICONS['alert-triangle'],
+    warning: SVG_ICONS['alert-circle'],
+    success: SVG_ICONS['check-circle'],
+    // info는 floating에서는 지원하지 않음
+};
+export var FULL_WIDTH_ICON_MAP = {
+    neutral: SVG_ICONS['message-chat-square'],
+    error: SVG_ICONS['alert-triangle'],
+    warning: SVG_ICONS['alert-triangle'],
+    success: SVG_ICONS['check-circle'],
+    info: SVG_ICONS['info-circle'],
+};
+export var ICON_MAP = FULL_WIDTH_ICON_MAP;

package/dist/temp/assets/scripts/notification/const/index.d.ts

@@ -0,0 +1,5 @@
+export type { NotificationColor, NotificationHierarchy, NotificationAction, BaseNotificationOptions } from './types';
+export { SVG_ICONS, FLOATING_ICON_MAP, FULL_WIDTH_ICON_MAP, ICON_MAP } from './icons';
+export { CLASS_NAMES } from './classNames';
+export { FEATURED_ICON_SIZES, ICON_PIXEL_SIZES, CLOSE_BUTTON_SIZES, CLOSE_BUTTON_SVG_SIZES, FULL_WIDTH_SIZES, MESSAGE_SIZES, getSizes, } from './sizes';
+export { MESSAGE_CLOSE_ICON_COLORS } from './types';

package/dist/temp/assets/scripts/notification/const/index.js

@@ -0,0 +1,4 @@
+export { SVG_ICONS, FLOATING_ICON_MAP, FULL_WIDTH_ICON_MAP, ICON_MAP } from './icons';
+export { CLASS_NAMES } from './classNames';
+export { FEATURED_ICON_SIZES, ICON_PIXEL_SIZES, CLOSE_BUTTON_SIZES, CLOSE_BUTTON_SVG_SIZES, FULL_WIDTH_SIZES, MESSAGE_SIZES, getSizes, } from './sizes';
+export { MESSAGE_CLOSE_ICON_COLORS } from './types';

package/dist/temp/assets/scripts/notification/const/sizes.d.ts

@@ -0,0 +1,32 @@
+export declare const FEATURED_ICON_SIZES: {
+    readonly MOBILE: "md";
+    readonly DESKTOP: "sm";
+};
+export declare const ICON_PIXEL_SIZES: {
+    readonly MOBILE: "20";
+    readonly DESKTOP: "16";
+    readonly FULL_WIDTH: "16";
+};
+export declare const CLOSE_BUTTON_SIZES: {
+    readonly MOBILE: "sm";
+    readonly DESKTOP: "xs";
+};
+export declare const CLOSE_BUTTON_SVG_SIZES: {
+    readonly xs: 16;
+    readonly sm: 20;
+};
+export declare const FULL_WIDTH_SIZES: {
+    readonly ICON: "16";
+    readonly CLOSE_BUTTON: "20";
+};
+export declare const MESSAGE_SIZES: {
+    readonly FEATURED_ICON: "lg";
+    readonly ICON_PIXEL: "24";
+    readonly CLOSE_BUTTON: "20";
+};
+export declare const getSizes: {
+    readonly featuredIcon: (isMobile: boolean) => "sm" | "md";
+    readonly iconPixel: (isMobile: boolean) => "16" | "20";
+    readonly closeButton: (isMobile: boolean) => "xs" | "sm";
+    readonly closeButtonSvg: (size: keyof typeof CLOSE_BUTTON_SVG_SIZES) => 16 | 20;
+};

package/dist/temp/assets/scripts/notification/const/sizes.js

@@ -0,0 +1,40 @@
+// 알림 컴포넌트 사이즈 관련 상수들
+// FeaturedIcon 사이즈
+export var FEATURED_ICON_SIZES = {
+    MOBILE: 'md',
+    DESKTOP: 'sm',
+};
+// SVG 아이콘 픽셀 사이즈
+export var ICON_PIXEL_SIZES = {
+    MOBILE: '20',
+    DESKTOP: '16',
+    FULL_WIDTH: '16', // Full-width는 항상 고정
+};
+// 닫기 버튼 사이즈
+export var CLOSE_BUTTON_SIZES = {
+    MOBILE: 'sm',
+    DESKTOP: 'xs',
+};
+// 닫기 버튼 SVG 픽셀 사이즈
+export var CLOSE_BUTTON_SVG_SIZES = {
+    xs: 16,
+    sm: 20,
+};
+// Full-width 알림 고정 사이즈
+export var FULL_WIDTH_SIZES = {
+    ICON: '16',
+    CLOSE_BUTTON: '20',
+};
+// Message 알림 고정 사이즈
+export var MESSAGE_SIZES = {
+    FEATURED_ICON: 'lg',
+    ICON_PIXEL: '24',
+    CLOSE_BUTTON: '20',
+};
+// 사이즈 유틸리티 함수들
+export var getSizes = {
+    featuredIcon: function (isMobile) { return (isMobile ? FEATURED_ICON_SIZES.MOBILE : FEATURED_ICON_SIZES.DESKTOP); },
+    iconPixel: function (isMobile) { return (isMobile ? ICON_PIXEL_SIZES.MOBILE : ICON_PIXEL_SIZES.DESKTOP); },
+    closeButton: function (isMobile) { return (isMobile ? CLOSE_BUTTON_SIZES.MOBILE : CLOSE_BUTTON_SIZES.DESKTOP); },
+    closeButtonSvg: function (size) { return CLOSE_BUTTON_SVG_SIZES[size]; },
+};

package/dist/temp/assets/scripts/notification/const/types.d.ts

@@ -0,0 +1,19 @@
+export type NotificationColor = 'neutral' | 'error' | 'warning' | 'success' | 'info';
+export type NotificationHierarchy = 'link' | 'link-gray';
+export interface NotificationAction {
+    label: string;
+    onClick: () => void;
+    hierarchy?: NotificationHierarchy;
+}
+export interface BaseNotificationOptions {
+    title: string;
+    supportingText?: string;
+    color?: NotificationColor;
+    onClose?: () => void;
+    className?: string;
+    actions?: NotificationAction[];
+    autoClose?: number;
+    supportTextLink?: string;
+    onHidePermanently?: () => void;
+}
+export declare const MESSAGE_CLOSE_ICON_COLORS: Record<NotificationColor, string>;

package/dist/temp/assets/scripts/notification/const/types.js

@@ -0,0 +1,8 @@
+// Message Notification 닫기 버튼 아이콘 색상 맵
+export var MESSAGE_CLOSE_ICON_COLORS = {
+    neutral: '#6B7280',
+    error: '#EF4444',
+    warning: '#F97316',
+    success: '#16A34A',
+    info: '#6B7280', // info는 message 타입에서 지원하지 않지만 fallback용
+};

package/dist/temp/assets/scripts/notification/index.d.ts

@@ -0,0 +1,7 @@
+export { Notification, type NotificationOptions } from './Notification';
+export { FullWidthNotification, type FullWidthNotificationOptions } from './FullWidthNotification';
+export { FloatingNotification, type FloatingNotificationOptions } from './FloatingNotification';
+export { MessageNotification, type MessageNotificationOptions } from './MessageNotification';
+export * from './utils';
+export type { NotificationColor, NotificationHierarchy, NotificationAction, BaseNotificationOptions } from './const';
+export { SVG_ICONS, CLASS_NAMES, ICON_MAP, FLOATING_ICON_MAP, FULL_WIDTH_ICON_MAP } from './const';

package/dist/temp/assets/scripts/notification/index.js

@@ -0,0 +1,11 @@
+export { Notification } from './Notification';
+export { FullWidthNotification } from './FullWidthNotification';
+export { FloatingNotification } from './FloatingNotification';
+export { MessageNotification } from './MessageNotification';
+export * from './utils';
+export { SVG_ICONS, CLASS_NAMES, ICON_MAP, FLOATING_ICON_MAP, FULL_WIDTH_ICON_MAP } from './const';
+// 전역 등록 ( 추후 index.ts와 개별동작 할 수 있게끔 대비 )
+if (typeof window !== 'undefined') {
+    window.ncua = window.ncua || {};
+    window.ncua.Notification = Notification;
+}

package/dist/temp/assets/scripts/notification/utils.d.ts

@@ -0,0 +1,8 @@
+import type { NotificationColor, NotificationAction } from './const';
+export declare function createWrapperElement(baseClass: string, color: NotificationColor, className?: string): HTMLElement;
+export declare function buildClassName(baseClass: string, color: NotificationColor, className?: string): string;
+export declare function renderSupportingText(supportingText?: string, className?: string, supportTextLink?: string): string;
+export declare function renderActions(actions: NotificationAction[], wrapperClass: string): string;
+export declare function bindNotificationEvents(element: HTMLElement, actions: NotificationAction[], onClose?: () => void, onRemove?: () => void): void;
+export declare function setupAutoClose(autoClose: number, onClose?: () => void, onRemove?: () => void): number | undefined;
+export declare const isMobile: () => boolean;

package/dist/temp/assets/scripts/notification/utils.js

@@ -0,0 +1,84 @@
+import { CLASS_NAMES } from './const';
+import { BREAKPOINT } from '../../../src/constant/breakpoint';
+// 공통 유틸리티 함수들
+export function createWrapperElement(baseClass, color, className) {
+    var wrapper = document.createElement('div');
+    wrapper.className = buildClassName(baseClass, color, className);
+    wrapper.setAttribute('role', 'alert');
+    return wrapper;
+}
+export function buildClassName(baseClass, color, className) {
+    var classes = [baseClass, "".concat(baseClass, "--").concat(color)];
+    if (className) {
+        classes.push(className);
+    }
+    return classes.join(' ');
+}
+export function renderSupportingText(supportingText, className, supportTextLink) {
+    if (!supportingText)
+        return '';
+    if (supportTextLink) {
+        return "<a href=\"".concat(supportTextLink, "\" class=\"ncua-full-width-notification__link\"><span class=\"").concat(className, "\">").concat(supportingText, "</span></a>");
+    }
+    return "<span class=\"".concat(className, "\">").concat(supportingText, "</span>");
+}
+export function renderActions(actions, wrapperClass) {
+    // 액션이 없으면 빈 문자열 반환
+    if (!actions || actions.length === 0) {
+        return '';
+    }
+    var buttonsHtml = actions
+        .map(function (action) {
+        var buttonHtml = "\n      <button \n        class=\"ncua-btn ncua-btn--sm ncua-btn--".concat(action.hierarchy || 'text', "\"\n        data-action=\"").concat(action.label, "-").concat(action.hierarchy, "\"\n      >\n        ").concat(action.label, "\n      </button>");
+        return buttonHtml;
+    })
+        .join('');
+    return "<div class=\"".concat(wrapperClass, "\">").concat(buttonsHtml, "</div>");
+}
+// 공통 이벤트 처리
+export function bindNotificationEvents(element, actions, onClose, onRemove) {
+    element.addEventListener('click', function (event) {
+        var target = event.target;
+        // 닫기 버튼 클릭 처리
+        if (target.matches(".".concat(CLASS_NAMES.FULL_WIDTH.CLOSE_BUTTON, ", .").concat(CLASS_NAMES.FLOATING.CLOSE_BUTTON)) ||
+            target.closest(".".concat(CLASS_NAMES.FULL_WIDTH.CLOSE_BUTTON, ", .").concat(CLASS_NAMES.FLOATING.CLOSE_BUTTON)) ||
+            target.closest(".".concat(CLASS_NAMES.MESSAGE.CLOSE_BUTTON))) {
+            onClose === null || onClose === void 0 ? void 0 : onClose();
+            onRemove === null || onRemove === void 0 ? void 0 : onRemove();
+            return;
+        }
+        // 액션 버튼 클릭 처리
+        var actionButton = target.closest('.ncua-btn[data-action]');
+        if (actionButton && actions) {
+            var actionData = actionButton.getAttribute('data-action');
+            if (actionData) {
+                var matchedAction = null;
+                for (var _i = 0, actions_1 = actions; _i < actions_1.length; _i++) {
+                    var action = actions_1[_i];
+                    var expectedDataAction = "".concat(action.label, "-").concat(action.hierarchy || 'link');
+                    if (actionData === expectedDataAction) {
+                        matchedAction = action;
+                        break;
+                    }
+                }
+                if (matchedAction === null || matchedAction === void 0 ? void 0 : matchedAction.onClick) {
+                    matchedAction.onClick();
+                }
+            }
+        }
+    });
+}
+// 자동 닫기 설정
+export function setupAutoClose(autoClose, onClose, onRemove) {
+    if (autoClose > 0) {
+        return window.setTimeout(function () {
+            onClose === null || onClose === void 0 ? void 0 : onClose();
+            onRemove === null || onRemove === void 0 ? void 0 : onRemove();
+        }, autoClose);
+    }
+    return undefined;
+}
+// Mobile detection utility
+export var isMobile = function () {
+    return window.innerWidth <= parseInt(BREAKPOINT.mobile);
+};

package/dist/temp/assets/scripts/progress-bar/ProgressBar.d.ts

@@ -0,0 +1,67 @@
+/**
+ * ProgressBar 클래스
+ * 프로그레스 바를 생성하고 관리하는 역할을 합니다.
+ */
+export type ProgressLabel = 'right' | 'bottom' | 'top-float' | 'bottom-float';
+export interface ProgressSegment {
+    value: number;
+    color?: string;
+}
+export interface ProcessedSegment extends ProgressSegment {
+    width: number;
+}
+export interface ProgressBarOptions {
+    label?: ProgressLabel;
+    value?: number;
+    segments?: ProgressSegment[];
+    showZeroLabel?: boolean;
+    valueToPercent?: boolean;
+}
+/**
+ * ProgressBar 클래스
+ */
+export declare class ProgressBar {
+    private options;
+    private element;
+    constructor(options?: ProgressBarOptions);
+    /**
+     * segments 처리 로직
+     */
+    private processSegments;
+    /**
+     * 단일 라벨 HTML 생성
+     */
+    private renderSingleLabel;
+    /**
+     * segments 라벨 HTML 생성
+     */
+    private renderSegmentLabels;
+    /**
+     * segment bar HTML 생성
+     */
+    private renderSegmentBar;
+    /**
+     * HTML 문자열 생성
+     */
+    toHTML(): string;
+    /**
+     * DOM 요소 생성
+     */
+    toElement(): HTMLElement;
+    /**
+     * 요소 반환
+     */
+    getElement(): HTMLElement | null;
+    /**
+     * 옵션 업데이트
+     */
+    updateOptions(newOptions: Partial<ProgressBarOptions>): void;
+    /**
+     * Static factory method
+     */
+    static create(options?: ProgressBarOptions): ProgressBar;
+    /**
+     * Static method: HTML 문자열 생성
+     */
+    static toHTML(options: ProgressBarOptions): string;
+}

package/dist/temp/assets/scripts/progress-bar/ProgressBar.js

@@ -0,0 +1,258 @@
+/**
+ * ProgressBar 클래스
+ * 프로그레스 바를 생성하고 관리하는 역할을 합니다.
+ */
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+/**
+ * 값을 0-100 범위로 제한
+ */
+function clampValue(value) {
+    return Math.min(Math.max(0, value), 100);
+}
+/**
+ * 색상 이름을 fill 색상 클래스명으로 변환
+ */
+function getFillColorClass(color) {
+    if (!color)
+        return '';
+    var normalizedColor = color.toLowerCase().trim();
+    return "ncua-progress-bar__fill--color-".concat(normalizedColor);
+}
+/**
+ * 색상 이름을 label 색상 클래스명으로 변환
+ */
+function getLabelColorClass(color) {
+    if (!color)
+        return '';
+    var normalizedColor = color.toLowerCase().trim();
+    return "ncua-progress-bar__label--color-".concat(normalizedColor);
+}
+/**
+ * ProgressBar 클래스
+ */
+var ProgressBar = /** @class */ (function () {
+    function ProgressBar(options) {
+        if (options === void 0) { options = {}; }
+        this.element = null;
+        this.options = __assign({ showZeroLabel: false, valueToPercent: true }, options);
+    }
+    /**
+     * segments 처리 로직
+     */
+    ProgressBar.prototype.processSegments = function () {
+        var _a;
+        var _b = this.options, segments = _b.segments, label = _b.label, valueToPercent = _b.valueToPercent;
+        var hasSegments = Boolean(segments && segments.length > 0);
+        var segmentCount = (_a = segments === null || segments === void 0 ? void 0 : segments.length) !== null && _a !== void 0 ? _a : 0;
+        if (hasSegments) {
+            // segment가 2개 이상일 때만 valueToPercent 적용 (기본값: true)
+            var shouldApplyValueToPercent = segmentCount >= 2 && valueToPercent !== false;
+            var segmentsToProcess = segments;
+            // valueToPercent 적용: segments의 합계를 100%로 규정하고 비율로 계산
+            if (shouldApplyValueToPercent) {
+                // 원본 값들의 합계 계산
+                var originalTotal_1 = segmentsToProcess.reduce(function (sum, seg) { return sum + seg.value; }, 0);
+                if (originalTotal_1 > 0) {
+                    // 각 segment를 합계 대비 비율로 변환 (합계를 100%로 규정)
+                    segmentsToProcess = segmentsToProcess.map(function (segment) { return ({
+                        value: (segment.value / originalTotal_1) * 100,
+                        color: segment.color,
+                    }); });
+                }
+            }
+            // 각 값 제한 (0-100 범위)
+            var limitedSegments = segmentsToProcess.map(function (segment) { return ({
+                value: clampValue(segment.value),
+                color: segment.color,
+            }); });
+            // 전체 합계 계산
+            var actualTotal_1 = limitedSegments.reduce(function (sum, seg) { return sum + seg.value; }, 0);
+            var total_1 = Math.min(actualTotal_1, 100);
+            // 모든 segments를 좌측에서부터 연속적으로 배치 (비율로 계산)
+            var processed = limitedSegments.map(function (segment) { return (__assign(__assign({}, segment), { width: actualTotal_1 > 0 ? (segment.value / actualTotal_1) * total_1 : 0 })); });
+            // segment의 개수가 2이상일때는 bottom 라벨로 고정
+            var effectiveLabel = segmentCount >= 2 ? 'bottom' : label;
+            // floating label 스타일
+            var progressValueStyle = effectiveLabel === 'top-float' || effectiveLabel === 'bottom-float'
+                ? { '--progress-value': "".concat(total_1, "%") }
+                : undefined;
+            return {
+                totalValue: total_1,
+                displayValue: "".concat(total_1.toFixed(0), "%"),
+                processedSegments: processed,
+                effectiveLabel: effectiveLabel,
+                progressValueStyle: progressValueStyle,
+            };
+        }
+        // value만 있을 때는 valueToPercent 무시 (이미 퍼센트로 간주)
+        if (this.options.value !== undefined) {
+            var clamped = clampValue(this.options.value);
+            var effectiveLabel = label;
+            var progressValueStyle = effectiveLabel === 'top-float' || effectiveLabel === 'bottom-float'
+                ? { '--progress-value': "".concat(clamped, "%") }
+                : undefined;
+            return {
+                totalValue: clamped,
+                displayValue: "".concat(clamped.toFixed(0), "%"),
+                processedSegments: [],
+                effectiveLabel: effectiveLabel,
+                progressValueStyle: progressValueStyle,
+            };
+        }
+        return {
+            totalValue: 0,
+            displayValue: '0%',
+            processedSegments: [],
+            effectiveLabel: label,
+            progressValueStyle: undefined,
+        };
+    };
+    /**
+     * 단일 라벨 HTML 생성
+     */
+    ProgressBar.prototype.renderSingleLabel = function (labelType, displayValue, totalValue) {
+        // 0%이고 showZeroLabel이 false면 라벨 표시하지 않음
+        if (totalValue === 0 && !this.options.showZeroLabel) {
+            return '';
+        }
+        return "<span class=\"ncua-progress-bar__label ncua-progress-bar__label-".concat(labelType, "\">").concat(displayValue, "</span>");
+    };
+    /**
+     * segments 라벨 HTML 생성
+     */
+    ProgressBar.prototype.renderSegmentLabels = function (segments, segmentCount) {
+        var _this = this;
+        if (segmentCount < 2)
+            return '';
+        var labels = [];
+        segments.forEach(function (segment, index) {
+            // 0%이고 showZeroLabel이 false면 라벨 표시하지 않음
+            if (segment.value === 0 && !_this.options.showZeroLabel) {
+                return;
+            }
+            var leftPosition = 0;
+            for (var i = 0; i < index; i++) {
+                leftPosition += segments[i].width;
+            }
+            // 0%일 때는 segment 시작 위치에 맞추되, 라벨이 게이지 바를 넘어가지 않도록 조정
+            // 그 외에는 중앙에 정렬
+            var isZero = segment.value === 0;
+            // 0%일 때는 약간의 오프셋을 주어 자연스럽게 보이도록 함 (라벨 너비의 절반 정도)
+            var labelPosition = isZero ? Math.max(0, leftPosition - 1) : leftPosition + segment.width / 2;
+            var transform = isZero ? 'translateX(0)' : 'translateX(-50%)';
+            var colorClass = getLabelColorClass(segment.color);
+            labels.push("<span class=\"ncua-progress-bar__label ncua-progress-bar__label--segment ".concat(colorClass, "\" style=\"left: ").concat(labelPosition, "%; transform: ").concat(transform, ";\">").concat(segment.value.toFixed(0), "%</span>"));
+        });
+        return labels.length > 0 ? "<div class=\"ncua-progress-bar__labels--multiple\">".concat(labels.join(''), "</div>") : '';
+    };
+    /**
+     * segment bar HTML 생성
+     */
+    ProgressBar.prototype.renderSegmentBar = function (segments) {
+        var fills = [];
+        segments.forEach(function (segment, index) {
+            var classes = [
+                'ncua-progress-bar__fill',
+                index === 0 ? 'ncua-progress-bar__fill--first' : '',
+                index === segments.length - 1 ? 'ncua-progress-bar__fill--last' : '',
+                getFillColorClass(segment.color),
+            ]
+                .filter(Boolean)
+                .join(' ');
+            fills.push("<div class=\"".concat(classes, "\" style=\"width: ").concat(segment.width, "%;\"></div>"));
+        });
+        return fills.join('');
+    };
+    /**
+     * HTML 문자열 생성
+     */
+    ProgressBar.prototype.toHTML = function () {
+        var _a, _b;
+        var _c = this.processSegments(), totalValue = _c.totalValue, displayValue = _c.displayValue, processedSegments = _c.processedSegments, effectiveLabel = _c.effectiveLabel, progressValueStyle = _c.progressValueStyle;
+        var hasSegments = Boolean(this.options.segments && this.options.segments.length > 0);
+        var segmentCount = (_b = (_a = this.options.segments) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0;
+        var isFloatingLabel = effectiveLabel === 'top-float' || effectiveLabel === 'bottom-float';
+        // 스타일 문자열 생성
+        var styleString = progressValueStyle
+            ? "style=\"".concat(Object.entries(progressValueStyle)
+                .map(function (_a) {
+                var key = _a[0], value = _a[1];
+                return "".concat(key.replace(/([A-Z])/g, '-$1').toLowerCase(), ": ").concat(value);
+            })
+                .join('; '), "\"")
+            : '';
+        // segment가 1개이거나 value만 있을 때는 동일하게 처리 (단일 progress bar)
+        var isSingleBar = segmentCount < 2; // segment가 0개 또는 1개일 때
+        if (isSingleBar) {
+            var fillColorClass = hasSegments && segmentCount === 1 ? getFillColorClass(processedSegments[0].color) : '';
+            var floatingLabel_1 = isFloatingLabel ? this.renderSingleLabel(effectiveLabel, displayValue, totalValue) : '';
+            var rightLabel_1 = effectiveLabel === 'right' ? this.renderSingleLabel('right', displayValue, totalValue) : '';
+            var bottomLabel_1 = effectiveLabel === 'bottom' ? this.renderSingleLabel('bottom', displayValue, totalValue) : '';
+            // 단일 progress bar일 때는 text-align: left를 위한 클래스 추가
+            var singleSegmentClass = 'ncua-progress-bar--single-segment';
+            return "<div class=\"ncua-progress-bar ncua-progress-bar-".concat(effectiveLabel || '', " ").concat(singleSegmentClass, "\" ").concat(styleString, ">\n  ").concat(floatingLabel_1, "\n  <div class=\"ncua-progress-bar__content\">\n    <div class=\"ncua-progress-bar__bar\">\n      <div class=\"ncua-progress-bar__fill ").concat(fillColorClass, "\" style=\"width: ").concat(totalValue, "%;\" aria-valuenow=\"").concat(totalValue, "\" aria-valuemin=\"0\" aria-valuemax=\"100\"></div>\n    </div>\n    ").concat(rightLabel_1, "\n  </div>\n  ").concat(bottomLabel_1, "\n</div>");
+        }
+        // 일반 케이스
+        var floatingLabel = isFloatingLabel ? this.renderSingleLabel(effectiveLabel, displayValue, totalValue) : '';
+        var rightLabel = effectiveLabel === 'right' ? this.renderSingleLabel('right', displayValue, totalValue) : '';
+        var bottomLabel = effectiveLabel === 'bottom' ? this.renderSingleLabel('bottom', displayValue, totalValue) : '';
+        var segmentLabels = hasSegments && segmentCount >= 2 ? this.renderSegmentLabels(processedSegments, segmentCount) : '';
+        var segmentBar = hasSegments
+            ? this.renderSegmentBar(processedSegments)
+            : "<div class=\"ncua-progress-bar__fill\" style=\"width: ".concat(totalValue, "%;\" aria-valuenow=\"").concat(totalValue, "\" aria-valuemin=\"0\" aria-valuemax=\"100\"></div>");
+        var segmentsClass = hasSegments ? 'ncua-progress-bar__bar--segments' : '';
+        return "<div class=\"ncua-progress-bar ncua-progress-bar-".concat(effectiveLabel || '', "\" ").concat(styleString, ">\n  ").concat(floatingLabel, "\n  <div class=\"ncua-progress-bar__content\">\n    <div class=\"ncua-progress-bar__bar ").concat(segmentsClass, "\">\n      ").concat(segmentBar, "\n    </div>\n    ").concat(rightLabel, "\n  </div>\n  ").concat(hasSegments && segmentCount >= 2 ? segmentLabels : bottomLabel, "\n</div>");
+    };
+    /**
+     * DOM 요소 생성
+     */
+    ProgressBar.prototype.toElement = function () {
+        var div = document.createElement('div');
+        div.innerHTML = this.toHTML();
+        this.element = div.firstElementChild;
+        return this.element;
+    };
+    /**
+     * 요소 반환
+     */
+    ProgressBar.prototype.getElement = function () {
+        return this.toElement();
+    };
+    /**
+     * 옵션 업데이트
+     */
+    ProgressBar.prototype.updateOptions = function (newOptions) {
+        this.options = __assign(__assign({}, this.options), newOptions);
+        if (this.element) {
+            var newElement = this.toElement();
+            if (this.element.parentNode) {
+                this.element.parentNode.replaceChild(newElement, this.element);
+            }
+            this.element = newElement;
+        }
+    };
+    /**
+     * Static factory method
+     */
+    ProgressBar.create = function (options) {
+        return new ProgressBar(options);
+    };
+    /**
+     * Static method: HTML 문자열 생성
+     */
+    ProgressBar.toHTML = function (options) {
+        return new ProgressBar(options).toHTML();
+    };
+    return ProgressBar;
+}());
+export { ProgressBar };

package/dist/temp/assets/scripts/progress-bar/index.d.ts

@@ -0,0 +1 @@
+export { ProgressBar, type ProgressBarOptions, type ProgressLabel, type ProgressSegment } from './ProgressBar';

package/dist/temp/assets/scripts/progress-bar/index.js

@@ -0,0 +1 @@
+export { ProgressBar } from './ProgressBar';