@ncds/ui-admin 1.8.1 → 1.8.3

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

@@ -1,25 +0,0 @@
-import type { NotificationColor } from './types';
-export declare const SVG_ICONS: {
-    readonly 'pin-02': (size: string) => string;
-    readonly 'alert-triangle': (size: string) => string;
-    readonly 'alert-circle': (size: string) => string;
-    readonly 'check-circle': (size: string) => string;
-    readonly 'info-circle': (size: string) => string;
-    readonly 'message-chat-square': (size: string) => string;
-    readonly 'x-close': (size: string) => string;
-};
-export declare const FLOATING_ICON_MAP: Partial<Record<NotificationColor, (size: string) => string>>;
-export declare const FULL_WIDTH_ICON_MAP: {
-    readonly neutral: (size: string) => string;
-    readonly error: (size: string) => string;
-    readonly warning: (size: string) => string;
-    readonly success: (size: string) => string;
-    readonly info: (size: string) => string;
-};
-export declare const ICON_MAP: {
-    readonly neutral: (size: string) => string;
-    readonly error: (size: string) => string;
-    readonly warning: (size: string) => string;
-    readonly success: (size: string) => string;
-    readonly info: (size: string) => string;
-};

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

@@ -1,25 +0,0 @@
-// SVG 아이콘들 (크기는 동적으로 설정)
-export const SVG_ICONS = {
-    'pin-02': (size) => `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${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': (size) => `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${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': (size) => `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${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': (size) => `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${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': (size) => `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${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': (size) => `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${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': (size) => `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${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 const 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 const 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 const ICON_MAP = FULL_WIDTH_ICON_MAP;

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

@@ -1,5 +0,0 @@
-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

@@ -1,4 +0,0 @@
-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

@@ -1,32 +0,0 @@
-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

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

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

@@ -1,19 +0,0 @@
-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

@@ -1,8 +0,0 @@
-// Message Notification 닫기 버튼 아이콘 색상 맵
-export const 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

@@ -1,7 +0,0 @@
-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

@@ -1,11 +0,0 @@
-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

@@ -1,8 +0,0 @@
-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

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

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

@@ -1,67 +0,0 @@
-/**
- * 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

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

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

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

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

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