@ncds/ui-admin 1.6.4 → 1.8.0

package/dist/temp/src/components/notification/Notification.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { FloatingNotification } from './FloatingNotification';
+import { FullWidthNotification } from './FullWidthNotification';
+import { MessageNotification } from './MessageNotification';
+const Notification = forwardRef(({ type = 'floating', color = 'neutral', ...rest }, ref) => {
+    if (type === 'floating') {
+        return _jsx(FloatingNotification, { color: color, ...rest, ref: ref });
+    }
+    if (type === 'full-width') {
+        return _jsx(FullWidthNotification, { color: color, ...rest, ref: ref });
+    }
+    if (type === 'message') {
+        return _jsx(MessageNotification, { color: color, ...rest, ref: ref });
+    }
+    return null;
+});
+Notification.displayName = 'Notification';
+export { Notification };

package/dist/temp/src/components/notification/index.d.ts

@@ -0,0 +1,4 @@
+export * from './FloatingNotification';
+export * from './FullWidthNotification';
+export * from './MessageNotification';
+export * from './Notification';

package/dist/temp/src/components/notification/index.js

@@ -0,0 +1,4 @@
+export * from './FloatingNotification';
+export * from './FullWidthNotification';
+export * from './MessageNotification';
+export * from './Notification';

package/dist/{types/src/components/input → temp/src/components/number-input}/NumberInput.d.ts

@@ -1,4 +1,4 @@
-import { InputBaseProps } from './InputBase';
+import { type InputBaseProps } from '../input-base/InputBase';
 type NumberInputProps = InputBaseProps & {
     minValue?: number;
     maxValue?: number;
@@ -7,4 +7,3 @@ type NumberInputProps = InputBaseProps & {
 };
 export declare const NumberInput: import("react").ForwardRefExoticComponent<NumberInputProps & import("react").RefAttributes<HTMLInputElement>>;
 export {};
-//# sourceMappingURL=NumberInput.d.ts.map

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

@@ -0,0 +1,68 @@
+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 = forwardRef(({ 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/temp/src/components/number-input/index.d.ts

@@ -0,0 +1 @@
+export * from './NumberInput';

package/dist/temp/src/components/number-input/index.js

@@ -0,0 +1 @@
+export * from './NumberInput';

package/dist/temp/src/components/pagination/NavButton.d.ts

@@ -0,0 +1,31 @@
+import type { SlotIconComponent } from '../../types/side-slot';
+declare const NAV_BUTTON_CONFIG: {
+    readonly first: {
+        readonly label: "처음";
+        readonly className: "ncua-pagination__first";
+        readonly getIcon: (_isPC: boolean) => SlotIconComponent;
+    };
+    readonly prev: {
+        readonly label: "이전";
+        readonly className: "ncua-pagination__before";
+        readonly getIcon: (isPC: boolean) => SlotIconComponent;
+    };
+    readonly next: {
+        readonly label: "다음";
+        readonly className: "ncua-pagination__next";
+        readonly getIcon: (isPC: boolean) => SlotIconComponent;
+    };
+    readonly last: {
+        readonly label: "마지막";
+        readonly className: "ncua-pagination__last";
+        readonly getIcon: (_isPC: boolean) => SlotIconComponent;
+    };
+};
+export declare const NavButton: ({ type, breakPoint, noPrev, noNext, onClick, }: {
+    type: keyof typeof NAV_BUTTON_CONFIG;
+    breakPoint: 'pc' | 'mo';
+    noPrev: boolean;
+    noNext: boolean;
+    onClick: () => void;
+}) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,54 @@
+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 = ({ type, breakPoint, noPrev, noNext, onClick, }) => {
+    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/temp/src/components/pagination/Pagination.d.ts

@@ -0,0 +1,11 @@
+type PaginationProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onClick'> & {
+    className?: string;
+    totalCount: number;
+    itemCountPerPage?: number;
+    pageCount?: number;
+    currentPage: number;
+    breakPoint?: 'pc' | 'mo';
+    onPageChange?: (page: number) => void;
+};
+export declare const Pagination: ({ className, totalCount, itemCountPerPage, pageCount, currentPage, breakPoint, onPageChange, ...restProps }: PaginationProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/temp/src/components/pagination/Pagination.js

@@ -0,0 +1,66 @@
+import { Fragment as _Fragment, jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import classNames from 'classnames';
+import { isFunction, range, uniqueId } from 'lodash-es';
+import { useEffect, useState } from 'react';
+import { NavButton } from './NavButton';
+// 네비게이션 버튼 설정
+export const Pagination = ({ className = '', totalCount, itemCountPerPage = 10, pageCount = 10, currentPage, breakPoint = 'pc', onPageChange, ...restProps }) => {
+    const totalPage = Math.ceil(totalCount / itemCountPerPage);
+    const [start, setStart] = useState(1);
+    const noPrev = breakPoint === 'mo' ? currentPage === 1 : start === 1;
+    const noNext = breakPoint === 'mo' ? currentPage >= totalPage : start + pageCount - 1 >= totalPage;
+    const showJumpPageButton = totalPage > pageCount;
+    const handleClickButton = (pageNum) => {
+        if (isFunction(onPageChange)) {
+            onPageChange(pageNum);
+        }
+    };
+    useEffect(() => {
+        if (currentPage === start + pageCount) {
+            setStart(start + pageCount);
+        }
+        if (currentPage > start + pageCount) {
+            const newStart = Math.floor((currentPage - 1) / pageCount) * pageCount + 1;
+            setStart(newStart);
+        }
+        if (currentPage < start) {
+            setStart(Math.max(1, start - pageCount));
+        }
+        if (currentPage === 1) {
+            setStart(1);
+        }
+        if (currentPage === totalPage) {
+            const lastGroupStart = Math.floor((totalPage - 1) / pageCount) * pageCount + 1;
+            setStart(lastGroupStart);
+        }
+    }, [currentPage]);
+    return (_jsxs("div", { className: classNames('ncua-pagination', `ncua-pagination--${breakPoint}`, className), children: [showJumpPageButton && (_jsxs(_Fragment, { children: [NavButton({
+                        type: 'first',
+                        breakPoint,
+                        noPrev,
+                        noNext,
+                        onClick: () => handleClickButton(1),
+                    }), NavButton({
+                        type: 'prev',
+                        breakPoint,
+                        noPrev,
+                        noNext,
+                        onClick: () => breakPoint === 'mo'
+                            ? handleClickButton(Math.max(currentPage - 1, 1))
+                            : handleClickButton(Math.max(start - pageCount, 1)),
+                    })] })), _jsx("ul", { className: "ncua-pagination__list", children: range(start, Math.min(totalPage + 1, start + pageCount)).map((pageNumber, i) => (_jsx("li", { className: "ncua-pagination__item", children: _jsx("button", { className: classNames('ncua-pagination__page-num', { 'is-current': pageNumber === currentPage }), onClick: () => handleClickButton(start + i), ...restProps, children: start + i }) }, uniqueId('ncua-pagination__page-num')))) }), _jsxs("p", { className: "ncua-pagination__page-info", children: [_jsx("em", { className: "ncua-pagination__current-num", children: currentPage }), " / ", totalPage] }), showJumpPageButton && (_jsxs(_Fragment, { children: [NavButton({
+                        type: 'next',
+                        breakPoint,
+                        noPrev,
+                        noNext,
+                        onClick: () => breakPoint === 'mo'
+                            ? handleClickButton(Math.min(currentPage + 1, totalPage))
+                            : handleClickButton(Math.min(start + pageCount, totalPage)),
+                    }), NavButton({
+                        type: 'last',
+                        breakPoint,
+                        noPrev,
+                        noNext,
+                        onClick: () => handleClickButton(totalPage),
+                    })] }))] }));
+};

package/dist/temp/src/components/pagination/index.d.ts

@@ -0,0 +1,2 @@
+export * from './NavButton';
+export * from './Pagination';

package/dist/temp/src/components/pagination/index.js

@@ -0,0 +1,2 @@
+export * from './NavButton';
+export * from './Pagination';

package/dist/{types/src/components/input → temp/src/components/password-input}/PasswordInput.d.ts

@@ -1,3 +1,2 @@
-import { InputBaseProps } from './InputBase';
+import { type InputBaseProps } from '../input-base/InputBase';
 export declare const PasswordInput: import("react").ForwardRefExoticComponent<InputBaseProps & import("react").RefAttributes<HTMLInputElement>>;
-//# sourceMappingURL=PasswordInput.d.ts.map

package/dist/temp/src/components/password-input/PasswordInput.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Eye, EyeOff, Lock01 } from '@ncds/ui-admin-icon';
+import classNames from 'classnames';
+import { forwardRef, useState } from 'react';
+import { InputBase } from '../input-base/InputBase';
+const svgSize = {
+    xs: 14,
+    sm: 20,
+};
+export const PasswordInput = forwardRef(({ size = 'xs', ...props }, ref) => {
+    const [isVisible, setIsVisible] = useState(false);
+    const svgProps = {
+        width: svgSize[size],
+        height: svgSize[size],
+    };
+    const handleVisibilityChange = () => {
+        setIsVisible((prev) => !prev);
+    };
+    return (_jsx(InputBase, { ref: ref, size: size, type: isVisible ? 'text' : 'password', leadingElement: {
+            type: 'icon',
+            icon: Lock01,
+            color: props.value ? 'gray600' : 'gray300',
+        }, trailingElement: {
+            type: 'custom',
+            placement: 'inside',
+            children: (_jsx("button", { className: classNames('ncua-input__icon-wrap', 'ncua-input__right-icon', 'ncua-input__password-icon'), type: "button", onClick: handleVisibilityChange, children: isVisible ? _jsx(Eye, { ...svgProps }) : _jsx(EyeOff, { ...svgProps }) })),
+        }, ...props }));
+});

package/dist/temp/src/components/password-input/index.d.ts

@@ -0,0 +1 @@
+export * from './PasswordInput';

package/dist/temp/src/components/password-input/index.js

@@ -0,0 +1 @@
+export * from './PasswordInput';

package/dist/temp/src/components/progress-bar/ProgressBar.d.ts

@@ -0,0 +1,2 @@
+import type { ProgressBarProps } from './types';
+export declare const ProgressBar: ({ label, value, segments, showZeroLabel, valueToPercent, }: ProgressBarProps) => import("react/jsx-runtime").JSX.Element;

package/dist/temp/src/components/progress-bar/ProgressBar.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { SegmentBar } from './components/SegmentBar';
+import { SegmentLabels, SingleLabel } from './components/SegmentLabels';
+import { useProgressBar } from './hooks/useProgressBar';
+import { getFillColorClass } from './utils';
+export const ProgressBar = ({ label, value, segments, showZeroLabel = false, valueToPercent = true, }) => {
+    const { totalValue, displayValue, processedSegments, effectiveLabel, progressValueStyle, hasSegments, segmentCount, shouldSpaceOut, } = useProgressBar(label, value, segments, valueToPercent);
+    const isFloatingLabel = effectiveLabel === 'top-float' || effectiveLabel === 'bottom-float';
+    const containerClassName = `ncua-progress-bar ncua-progress-bar-${effectiveLabel || ''}`;
+    const isRightLabel = effectiveLabel === 'right';
+    const isBottomLabel = effectiveLabel === 'bottom';
+    const isMultiSegment = hasSegments && segmentCount >= 2;
+    // segments가 1개일 때는 기존 value 방식과 동일하게 처리
+    if (hasSegments && segmentCount === 1) {
+        const singleSegment = processedSegments[0];
+        return (_jsxs("div", { className: containerClassName, style: progressValueStyle, children: [isFloatingLabel && (_jsx(SingleLabel, { labelType: effectiveLabel, displayValue: displayValue, totalValue: totalValue, showZeroLabel: showZeroLabel })), _jsxs("div", { className: "ncua-progress-bar__content", children: [_jsx("div", { className: "ncua-progress-bar__bar", children: _jsx("div", { className: `ncua-progress-bar__fill ${getFillColorClass(singleSegment.color)}`, style: { width: `${totalValue}%` }, "aria-valuenow": totalValue, "aria-valuemin": 0, "aria-valuemax": 100 }) }), isRightLabel && (_jsx(SingleLabel, { labelType: "right", displayValue: displayValue, totalValue: totalValue, showZeroLabel: showZeroLabel }))] }), isBottomLabel && (_jsx(SingleLabel, { labelType: "bottom", displayValue: displayValue, totalValue: totalValue, showZeroLabel: showZeroLabel }))] }));
+    }
+    return (_jsxs("div", { className: containerClassName, style: progressValueStyle, children: [isFloatingLabel && (_jsx(SingleLabel, { labelType: effectiveLabel, displayValue: displayValue, totalValue: totalValue, showZeroLabel: showZeroLabel })), _jsxs("div", { className: "ncua-progress-bar__content", children: [_jsx("div", { className: `ncua-progress-bar__bar ${hasSegments ? 'ncua-progress-bar__bar--segments' : ''}`, children: hasSegments ? (_jsx(SegmentBar, { segments: processedSegments, shouldSpaceOut: shouldSpaceOut })) : (_jsx("div", { className: "ncua-progress-bar__fill", style: { width: `${totalValue}%` }, "aria-valuenow": totalValue, "aria-valuemin": 0, "aria-valuemax": 100 })) }), isRightLabel && (_jsx(SingleLabel, { labelType: "right", displayValue: displayValue, totalValue: totalValue, showZeroLabel: showZeroLabel }))] }), isMultiSegment && (_jsx(SegmentLabels, { segments: processedSegments, segmentCount: segmentCount, showZeroLabel: showZeroLabel })), !isMultiSegment && isBottomLabel && (_jsx(SingleLabel, { labelType: "bottom", displayValue: displayValue, totalValue: totalValue, showZeroLabel: showZeroLabel }))] }));
+};

package/dist/temp/src/components/progress-bar/components/SegmentBar.d.ts

@@ -0,0 +1,7 @@
+import type { ProcessedSegment } from '../types';
+interface SegmentBarProps {
+    segments: ProcessedSegment[];
+    shouldSpaceOut: boolean;
+}
+export declare const SegmentBar: ({ segments, shouldSpaceOut }: SegmentBarProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/temp/src/components/progress-bar/components/SegmentBar.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { getFillColorClass } from '../utils';
+export const SegmentBar = ({ segments, shouldSpaceOut }) => {
+    return (_jsx(_Fragment, { children: segments.map((segment, index) => {
+            const isFirst = index === 0;
+            const isLast = index === segments.length - 1;
+            return (_jsx("div", { className: `ncua-progress-bar__fill ${isFirst ? 'ncua-progress-bar__fill--first' : ''} ${isLast ? 'ncua-progress-bar__fill--last' : ''} ${shouldSpaceOut && isLast ? 'ncua-progress-bar__fill--spaced' : ''} ${getFillColorClass(segment.color)}`, style: { width: `${segment.width}%` } }, `${segment.color}-${index}`));
+        }) }));
+};

package/dist/temp/src/components/progress-bar/components/SegmentLabels.d.ts

@@ -0,0 +1,15 @@
+import type { ProcessedSegment, ProgressLabel } from '../types';
+interface SegmentLabelsProps {
+    segments: ProcessedSegment[];
+    segmentCount: number;
+    showZeroLabel?: boolean;
+}
+declare const SegmentLabels: ({ segments, segmentCount, showZeroLabel }: SegmentLabelsProps) => import("react/jsx-runtime").JSX.Element | null;
+interface SingleLabelProps {
+    labelType: ProgressLabel;
+    displayValue: string;
+    totalValue?: number;
+    showZeroLabel?: boolean;
+}
+declare const SingleLabel: ({ labelType, displayValue, totalValue, showZeroLabel }: SingleLabelProps) => import("react/jsx-runtime").JSX.Element | null;
+export { SegmentLabels, SingleLabel };

package/dist/temp/src/components/progress-bar/components/SegmentLabels.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { getLabelColorClass } from '../utils';
+const SegmentLabels = ({ segments, segmentCount, showZeroLabel = false }) => {
+    if (segmentCount >= 2) {
+        return (_jsx("div", { className: "ncua-progress-bar__labels--multiple", children: segments.map((segment, index) => {
+                // 0%이고 showZeroLabel이 false면 라벨 표시하지 않음
+                if (segment.value === 0 && !showZeroLabel) {
+                    return null;
+                }
+                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%)';
+                return (_jsx("span", { className: `ncua-progress-bar__label ncua-progress-bar__label--segment ${getLabelColorClass(segment.color)}`, style: { left: `${labelPosition}%`, transform }, children: `${segment.value.toFixed(0)}%` }, `${segment.color}-${index}`));
+            }) }));
+    }
+    return null;
+};
+const SingleLabel = ({ labelType, displayValue, totalValue, showZeroLabel = false }) => {
+    // 0%이고 showZeroLabel이 false면 라벨 표시하지 않음
+    if (totalValue === 0 && !showZeroLabel) {
+        return null;
+    }
+    return _jsx("span", { className: `ncua-progress-bar__label ncua-progress-bar__label-${labelType}`, children: displayValue });
+};
+export { SegmentLabels, SingleLabel };

package/dist/temp/src/components/progress-bar/hooks/useProgressBar.d.ts

@@ -0,0 +1,13 @@
+import type { ProcessedSegment, ProgressLabel, ProgressSegment } from '../types';
+interface UseProgressBarResult {
+    totalValue: number;
+    displayValue: string;
+    processedSegments: ProcessedSegment[];
+    effectiveLabel?: ProgressLabel;
+    progressValueStyle?: React.CSSProperties;
+    hasSegments: boolean;
+    segmentCount: number;
+    shouldSpaceOut: boolean;
+}
+export declare const useProgressBar: (label?: ProgressLabel, value?: number, segments?: ProgressSegment[], valueToPercent?: boolean) => UseProgressBarResult;
+export {};

package/dist/temp/src/components/progress-bar/hooks/useProgressBar.js

@@ -0,0 +1,87 @@
+import { useMemo } from 'react';
+import { clampValue } from '../utils';
+const MAX_PERCENTAGE = 100;
+/**
+ * segments를 처리하여 프로그레스 바에 표시할 데이터를 계산합니다.
+ */
+const processSegments = (segments, segmentCount, valueToPercent) => {
+    // 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 + Number(seg.value), 0);
+        if (originalTotal > 0) {
+            // 각 segment를 합계 대비 비율로 변환 (합계를 100%로 규정)
+            segmentsToProcess = segmentsToProcess.map((segment) => ({
+                value: (segment.value / originalTotal) * MAX_PERCENTAGE,
+                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, MAX_PERCENTAGE);
+    // 모든 segments를 좌측에서부터 연속적으로 배치 (비율로 계산)
+    const processed = limitedSegments.map((segment) => ({
+        ...segment,
+        width: actualTotal > 0 ? (segment.value / actualTotal) * total : 0,
+    }));
+    return {
+        totalValue: total,
+        displayValue: `${total.toFixed(0)}%`,
+        processedSegments: processed,
+        shouldSpaceOut: false, // 항상 왼쪽에 붙도록 통일
+    };
+};
+export const useProgressBar = (label, value, segments, valueToPercent) => {
+    const hasSegments = Boolean(segments && segments.length > 0);
+    const segmentCount = segments?.length ?? 0;
+    const { totalValue, displayValue, processedSegments, shouldSpaceOut } = useMemo(() => {
+        // segments가 있을 때는 각 값을 제한하고 전체 합계를 계산
+        // value는 무시되며, 각 segment의 값을 value로 처리
+        if (hasSegments) {
+            return processSegments(segments, segmentCount, valueToPercent);
+        }
+        // value만 있을 때는 valueToPercent 무시 (이미 퍼센트로 간주)
+        if (value !== undefined) {
+            const clamped = clampValue(value);
+            return {
+                totalValue: clamped,
+                displayValue: `${clamped.toFixed(0)}%`,
+                processedSegments: [],
+                shouldSpaceOut: false,
+            };
+        }
+        return {
+            totalValue: 0,
+            displayValue: '0%',
+            processedSegments: [],
+            shouldSpaceOut: false,
+        };
+    }, [hasSegments, segments, segmentCount, value, valueToPercent]);
+    // segment의 개수가 2이상일때는 bottom 라벨로 고정
+    const effectiveLabel = segmentCount >= 2 ? 'bottom' : label;
+    const progressValueStyle = useMemo(() => {
+        if (effectiveLabel === 'top-float' || effectiveLabel === 'bottom-float') {
+            return { '--progress-value': `${totalValue}%` };
+        }
+        return undefined;
+    }, [effectiveLabel, totalValue]);
+    return {
+        totalValue,
+        displayValue,
+        processedSegments,
+        effectiveLabel,
+        progressValueStyle,
+        hasSegments,
+        segmentCount,
+        shouldSpaceOut,
+    };
+};

package/dist/temp/src/components/progress-bar/index.d.ts

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

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

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

package/dist/temp/src/components/progress-bar/types.d.ts

@@ -0,0 +1,15 @@
+export type ProgressLabel = 'right' | 'bottom' | 'top-float' | 'bottom-float';
+export interface ProgressSegment {
+    value: number;
+    color?: 'red' | 'green' | 'blue' | 'pink' | 'orange' | 'violet' | 'gray';
+}
+export interface ProcessedSegment extends ProgressSegment {
+    width: number;
+}
+export interface ProgressBarProps {
+    label?: ProgressLabel;
+    value?: number;
+    segments?: ProgressSegment[];
+    showZeroLabel?: boolean;
+    valueToPercent?: boolean;
+}

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

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

package/dist/temp/src/components/progress-bar/utils.d.ts

@@ -0,0 +1,13 @@
+/**
+ * 색상 이름을 fill 색상 클래스명으로 변환
+ */
+declare const getFillColorClass: (color?: string) => string;
+/**
+ * 색상 이름을 label 색상 클래스명으로 변환
+ */
+declare const getLabelColorClass: (color?: string) => string;
+/**
+ * 값을 0-100 범위로 제한
+ */
+declare const clampValue: (value: number) => number;
+export { getFillColorClass, getLabelColorClass, clampValue };

package/dist/temp/src/components/progress-bar/utils.js

@@ -0,0 +1,26 @@
+/**
+ * 색상 이름을 fill 색상 클래스명으로 변환
+ */
+const getFillColorClass = (color) => {
+    if (!color)
+        return '';
+    const normalizedColor = color.toLowerCase().trim();
+    return `ncua-progress-bar__fill--color-${normalizedColor}`;
+};
+/**
+ * 색상 이름을 label 색상 클래스명으로 변환
+ */
+const getLabelColorClass = (color) => {
+    if (!color)
+        return '';
+    const normalizedColor = color.toLowerCase().trim();
+    return `ncua-progress-bar__label--color-${normalizedColor}`;
+};
+const MAX_PERCENTAGE = 100;
+/**
+ * 값을 0-100 범위로 제한
+ */
+const clampValue = (value) => {
+    return Math.min(Math.max(0, value), MAX_PERCENTAGE);
+};
+export { getFillColorClass, getLabelColorClass, clampValue };

package/dist/temp/src/components/progress-circle/ProgressCircle.d.ts

@@ -0,0 +1,7 @@
+export interface ProgressCircleProps {
+    size: 'xxs' | 'xs' | 'sm' | 'md' | 'lg';
+    label?: string;
+    value: number;
+    theme?: 'circle' | 'half-circle';
+}
+export declare const ProgressCircle: ({ size, label, value, theme }: ProgressCircleProps) => import("react/jsx-runtime").JSX.Element;

package/dist/temp/src/components/progress-circle/ProgressCircle.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const MAX_PERCENTAGE = 100;
+export const ProgressCircle = ({ size, label, value, theme = 'circle' }) => {
+    const limitedValue = Math.min(Math.max(0, value), MAX_PERCENTAGE);
+    if (theme === 'circle') {
+        return (_jsxs("div", { className: `ncua-progress-circle ncua-progress-circle-${size} ncua-progress-circle-${theme}`, children: [_jsxs("div", { className: "ncua-progress-circle__content", children: [_jsxs("svg", { className: "ncua-progress-circle__svg", viewBox: "0 0 100 100", children: [_jsx("circle", { className: "ncua-progress-circle__background", cx: "50", cy: "50", r: "45", strokeWidth: "10", fill: "none" }), _jsx("circle", { className: "ncua-progress-circle__progress", cx: "50", cy: "50", r: "45", strokeWidth: "10", fill: "none", strokeDasharray: "var(--circle-circumference)", strokeDashoffset: `calc(var(--circle-circumference) * (1 - ${limitedValue} / 100))`, transform: "rotate(-90 50 50)", strokeLinecap: "round" })] }), _jsxs("div", { className: "ncua-progress-circle__label-container", children: [size !== 'xxs' && label && _jsx("div", { className: "ncua-progress-circle__label-text", children: label }), _jsx("div", { className: "ncua-progress-circle__label", children: `${limitedValue}%` })] })] }), size === 'xxs' && label && _jsx("div", { className: "ncua-progress-circle__outside-label", children: label })] }));
+    }
+    return (_jsxs("div", { className: `ncua-progress-circle ncua-progress-circle-${size} ncua-progress-circle-${theme}`, children: [_jsxs("div", { className: "ncua-progress-circle__content", children: [_jsxs("svg", { className: "ncua-progress-circle__svg", viewBox: "0 0 100 50", children: [_jsx("path", { className: "ncua-progress-circle__background", d: "M 5 50 A 45 45 0 0 1 95 50", strokeWidth: "10", fill: "none", strokeLinecap: "round" }), _jsx("path", { className: "ncua-progress-circle__progress", d: "M 5 50 A 45 45 0 0 1 95 50", strokeWidth: "10", fill: "none", strokeDasharray: "var(--half-circle-circumference)", strokeDashoffset: `calc(var(--half-circle-circumference) * (1 - ${limitedValue} / 100))`, strokeLinecap: "round" })] }), _jsxs("div", { className: "ncua-progress-circle__label-container", children: [size !== 'xxs' && label && _jsx("div", { className: "ncua-progress-circle__label-text", children: label }), _jsx("div", { className: "ncua-progress-circle__label", children: `${limitedValue}%` })] })] }), size === 'xxs' && label && _jsx("div", { className: "ncua-progress-circle__outside-label", children: label })] }));
+};

package/dist/temp/src/components/progress-circle/index.d.ts

@@ -0,0 +1 @@
+export * from './ProgressCircle';

package/dist/temp/src/components/progress-circle/index.js

@@ -0,0 +1 @@
+export * from './ProgressCircle';