@loword/loword-design-system 0.0.15 → 0.0.17

package/dist/components/LDCarousel/CarouselBase.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CarouselBase.d.ts","sourceRoot":"","sources":["../../../src/components/LDCarousel/CarouselBase.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"CarouselBase.d.ts","sourceRoot":"","sources":["../../../src/components/LDCarousel/CarouselBase.tsx"],"names":[],"mappings":"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"}

package/dist/components/LDCarousel/CarouselBase.js

@@ -58,13 +58,15 @@ const Root = ({ orientation = 'horizontal', loop = false, autoplay = false, auto
         setScrollSnaps(emblaApi.scrollSnapList());
         //슬라이드 초기 상태 설정
         onSelect(emblaApi);
+        const onReInitSnaps = () => setScrollSnaps(emblaApi.scrollSnapList());
         emblaApi.on('select', onSelect);
         emblaApi.on('reInit', onSelect);
-        emblaApi.on('reInit', () => setScrollSnaps(emblaApi.scrollSnapList()));
+        emblaApi.on('reInit', onReInitSnaps);
         return () => {
             //클린업 함수
             emblaApi.off('select', onSelect);
             emblaApi.off('reInit', onSelect);
+            emblaApi.off('reInit', onReInitSnaps);
         };
     }, [emblaApi, onSelect]);
     const scrollPrev = useCallback(() => emblaApi?.scrollPrev(), [emblaApi]);
@@ -127,7 +129,11 @@ const Next = ({ className, children, ...props }) => {
 };
 const TopArrows = ({ className, children, ...props }) => {
     const { scrollNext, scrollPrev, canScrollNext, canScrollPrev, orientation } = useCarouselContext();
-    return (_jsxs("div", { className: "flex flex-row ml-auto", children: [_jsx("button", { type: "button", onClick: scrollPrev, disabled: !canScrollPrev, "aria-label": props['aria-label'] ?? '이전', className: cn('disabled:opacity-40 disabled:cursor-not-allowed cursor-pointer rounded-full size-8 flex justify-center items-center ld-transition', className), children: children ?? _jsx(ChevronLeft, { size: 22, strokeWidth: 1.2 }) }), _jsx("button", { type: "button", onClick: scrollNext, disabled: !canScrollNext, "aria-label": props['aria-label'] ?? '다음', className: cn('disabled:opacity-40 disabled:cursor-not-allowed cursor-pointer rounded-full size-8 flex justify-center items-center ld-transition', className), children: children ?? _jsx(ChevronRight, { size: 22, strokeWidth: 1.2 }) })] }));
+    return (
+    // ld-carousel__nav-top: 상단 화살표 영역의 고정 훅.
+    // side 화살표의 .ld-carousel__nav 와 같은 역할 — 소비측에서 반응형 제어(예: 모바일에서만 숨김)를
+    // 할 때 마크업 구조(자식 순서 등)에 기대지 않도록 클래스를 제공한다.
+    _jsxs("div", { className: "ld-carousel__nav-top flex flex-row ml-auto", children: [_jsx("button", { type: "button", onClick: scrollPrev, disabled: !canScrollPrev, "aria-label": props['aria-label'] ?? '이전', className: cn('disabled:opacity-40 disabled:cursor-not-allowed cursor-pointer rounded-full size-8 flex justify-center items-center ld-transition', className), children: children ?? _jsx(ChevronLeft, { size: 22, strokeWidth: 1.2 }) }), _jsx("button", { type: "button", onClick: scrollNext, disabled: !canScrollNext, "aria-label": props['aria-label'] ?? '다음', className: cn('disabled:opacity-40 disabled:cursor-not-allowed cursor-pointer rounded-full size-8 flex justify-center items-center ld-transition', className), children: children ?? _jsx(ChevronRight, { size: 22, strokeWidth: 1.2 }) })] }));
 };
 const Dots = ({ className, dotClassName }) => {
     const { scrollSnaps, selectedIndex, scrollTo } = useCarouselContext();

package/dist/components/LDCarousel/LDCarousel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LDCarousel.d.ts","sourceRoot":"","sources":["../../../src/components/LDCarousel/LDCarousel.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAY,KAAK,aAAa,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACrE,OAAqB,EACnB,KAAK,mBAAmB,EACxB,KAAK,SAAS,EACf,MAAM,gBAAgB,CAAC;AAGxB,MAAM,WAAW,eAAe;IAC9B,uBAAuB;IACvB,MAAM,EAAE,SAAS,EAAE,CAAC;IACpB,gCAAgC;IAChC,WAAW,CAAC,EAAE,mBAAmB,CAAC;IAClC,sBAAsB;IACtB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,sDAAsD;IACtD,QAAQ,CAAC,EAAE,OAAO,GAAG;QAAE,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,iBAAiB,CAAC,EAAE,OAAO,CAAA;KAAE,CAAC;IACrE,0DAA0D;IAC1D,UAAU,CAAC,EAAE,SAAS,CAAC,YAAY,CAAC,CAAC;IACrC,sCAAsC;IACtC,KAAK,CAAC,EAAE,SAAS,CAAC,OAAO,CAAC,CAAC;IAC3B,8FAA8F;IAC9F,aAAa,CAAC,EAAE,SAAS,CAAC,eAAe,CAAC,CAAC;IAC3C;+EAC2E;IAC3E,OAAO,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC/B,8DAA8D;IAC9D,aAAa,CAAC,EAAE,KAAK,GAAG,MAAM,GAAG,MAAM,CAAC;IACxC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gCAAgC;IAChC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,yDAAyD;IACzD,aAAa,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAChC,mCAAmC;IACnC,IAAI,CAAC,EAAE;QACL;8DACsD;QACtD,IAAI,EAAE,MAAM,CAAC;QACb,8EAA8E;QAC9E,IAAI,CAAC,EAAE,KAAK,GAAG,KAAK,CAAC;KACtB,CAAC;IACF,4CAA4C;IAC5C,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,wCAAwC;IACxC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED;;;GAGG;AACH,QAAA,MAAM,UAAU;+MAmBb,eAAe;;;;;;;;;;CAsFjB,CAAC;AAYF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"LDCarousel.d.ts","sourceRoot":"","sources":["../../../src/components/LDCarousel/LDCarousel.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAY,KAAK,aAAa,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACrE,OAAqB,EACnB,KAAK,mBAAmB,EACxB,KAAK,SAAS,EACf,MAAM,gBAAgB,CAAC;AAGxB,MAAM,WAAW,eAAe;IAC9B,uBAAuB;IACvB,MAAM,EAAE,SAAS,EAAE,CAAC;IACpB,gCAAgC;IAChC,WAAW,CAAC,EAAE,mBAAmB,CAAC;IAClC,sBAAsB;IACtB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,sDAAsD;IACtD,QAAQ,CAAC,EAAE,OAAO,GAAG;QAAE,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,iBAAiB,CAAC,EAAE,OAAO,CAAA;KAAE,CAAC;IACrE,0DAA0D;IAC1D,UAAU,CAAC,EAAE,SAAS,CAAC,YAAY,CAAC,CAAC;IACrC,sCAAsC;IACtC,KAAK,CAAC,EAAE,SAAS,CAAC,OAAO,CAAC,CAAC;IAC3B,8FAA8F;IAC9F,aAAa,CAAC,EAAE,SAAS,CAAC,eAAe,CAAC,CAAC;IAC3C;+EAC2E;IAC3E,OAAO,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC/B,8DAA8D;IAC9D,aAAa,CAAC,EAAE,KAAK,GAAG,MAAM,GAAG,MAAM,CAAC;IACxC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gCAAgC;IAChC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,yDAAyD;IACzD,aAAa,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAChC,mCAAmC;IACnC,IAAI,CAAC,EAAE;QACL;8DACsD;QACtD,IAAI,EAAE,MAAM,CAAC;QACb,8EAA8E;QAC9E,IAAI,CAAC,EAAE,KAAK,GAAG,KAAK,CAAC;KACtB,CAAC;IACF,4CAA4C;IAC5C,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,wCAAwC;IACxC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED;;;GAGG;AACH,QAAA,MAAM,UAAU;+MAmBb,eAAe;;;;;;;;;;CAyFjB,CAAC;AAYF,eAAe,UAAU,CAAC"}

package/dist/components/LDCarousel/LDCarousel.js

@@ -14,11 +14,9 @@ const LDCarousel = ({ slides, orientation = 'horizontal', loop = false, autoplay
     const columns = rows <= 1
         ? slides.map((_, i) => [i])
         : Array.from({ length: columnCount }, (_, col) => Array.from({ length: rows }, (_, row) => grid?.fill === 'col' ? col * rows + row : row * columnCount + col).filter((i) => i < slides.length));
-    return (_jsx(CarouselBase.Root, { orientation: orientation, loop: loop, autoplay: autoplay, autoScroll: autoScroll, align: align, containScroll: containScroll, options: options, gap: gap, className: className, style: style, children: _jsxs("div", { className: "flex flex-col gap-3", children: [arrowPosition === 'top' && _jsx(CarouselBase.TopArrows, {}), _jsxs("div", { className: cn('flex items-center gap-3 w-full relative', isVertical && 'flex-col'), children: [arrowPosition === 'side' && _jsx(CarouselBase.Prev, {}), _jsx(CarouselBase.Viewport, { className: cn('w-full', viewportClassName), children: _jsx(CarouselBase.Container, { children: columns.map((column, i) => (_jsx(CarouselBase.Slide, { slidesPerView: slidesPerView, index: i, total: columns.length, className: slideClassName, children: rows <= 1 ? (slides[i]) : (
-                                    // 행 트랙을 균등 분할해야 열이 달라도 같은 행이 같은 선상에서 시작한다.
-                                    // (슬라이드끼리는 flex stretch로 이미 높이가 같음)
-                                    // items-start: 위치만 맞추고 카드 높이는 콘텐츠대로 둔다.
-                                    _jsx("div", { className: "grid h-full items-start", style: {
+    return (_jsx(CarouselBase.Root, { orientation: orientation, loop: loop, autoplay: autoplay, autoScroll: autoScroll, align: align, containScroll: containScroll, options: options, gap: gap, className: cn(arrowPosition === 'side' && !isVertical && 'ld-carousel--nav-gutter-x', className), style: style, children: _jsxs("div", { className: "flex flex-col gap-3", children: [arrowPosition === 'top' && _jsx(CarouselBase.TopArrows, {}), _jsxs("div", { className: cn('flex items-center gap-3 w-full relative', isVertical && 'flex-col', isVertical &&
+                        arrowPosition === 'side' &&
+                        'ld-carousel__nav-clearance-y'), children: [arrowPosition === 'side' && _jsx(CarouselBase.Prev, {}), _jsx(CarouselBase.Viewport, { className: cn('w-full', viewportClassName), children: _jsx(CarouselBase.Container, { children: columns.map((column, i) => (_jsx(CarouselBase.Slide, { slidesPerView: slidesPerView, index: i, total: columns.length, className: slideClassName, children: rows <= 1 ? (slides[i]) : (_jsx("div", { className: "grid h-full items-start", style: {
                                             gridTemplateRows: `repeat(${rows}, minmax(0, 1fr))`,
                                             rowGap: gap,
                                         }, children: column.map((slideIndex) => (_jsx(Fragment, { children: slides[slideIndex] }, slideIndex))) })) }, i))) }) }), arrowPosition === 'side' && _jsx(CarouselBase.Next, {})] }), (showDots || showCounter) && (_jsxs("div", { className: "flex items-center justify-center gap-3", children: [showDots && (_jsx(CarouselBase.Dots, { className: isVertical ? 'flex-col' : undefined })), showCounter && _jsx(CarouselBase.Counter, {})] }))] }) }));

package/dist/components/LDChart/ChartBase.d.ts

@@ -0,0 +1,14 @@
+import { type ReactNode, type Ref } from 'react';
+interface ChartSlotProps {
+    className?: string;
+    style?: React.CSSProperties;
+    children?: ReactNode;
+    ref?: Ref<HTMLDivElement>;
+}
+export declare const ChartBase: {
+    Root: ({ className, style, children, ref }: ChartSlotProps) => import("react/jsx-runtime").JSX.Element;
+    Viewport: ({ className, style, children, ref }: ChartSlotProps) => import("react/jsx-runtime").JSX.Element;
+    Overlay: ({ className, style, children, ref }: ChartSlotProps) => import("react/jsx-runtime").JSX.Element;
+};
+export default ChartBase;
+//# sourceMappingURL=ChartBase.d.ts.map

package/dist/components/LDChart/ChartBase.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartBase.d.ts","sourceRoot":"","sources":["../../../src/components/LDChart/ChartBase.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAE,KAAK,GAAG,EAAE,MAAM,OAAO,CAAC;AAKjD,UAAU,cAAc;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AA6BD,eAAO,MAAM,SAAS;gDA1B6B,cAAc;oDASV,cAAc;mDASf,cAAc;CAYnE,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/dist/components/LDChart/ChartBase.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// ── Root: 최외곽 래퍼 ──
+const Root = ({ className, style, children, ref }) => {
+    return (_jsx("div", { ref: ref, style: style, className: className, children: children }));
+};
+// ── Viewport: canvas와 오버레이를 담는 차트 영역 ──
+const Viewport = ({ className, style, children, ref }) => {
+    return (_jsx("div", { ref: ref, style: style, className: className, children: children }));
+};
+// ── Overlay: Viewport 위에 겹쳐 그리는 레이어 (로딩 표시 등) ──
+const Overlay = ({ className, style, children, ref }) => {
+    return (_jsx("div", { ref: ref, style: style, className: className, children: children }));
+};
+export const ChartBase = {
+    Root,
+    Viewport,
+    Overlay,
+};
+export default ChartBase;

package/dist/components/LDChart/LDChart.d.ts

@@ -0,0 +1,47 @@
+/** label 자동 생성 단위. dayjs의 ManipulateType 중 아래 포맷이 정의된 3개만 허용한다. */
+export type LDChartUnit = 'day' | 'month' | 'year';
+export type LDChartPosition = 'left' | 'right';
+/** 시리즈 색상 프리셋. DS 색 팔레트의 500 단계에 대응한다. */
+export type LDChartColor = 'lowordBlue' | 'blue' | 'red' | 'orange' | 'yellow' | 'green' | 'pink' | 'purple';
+/**
+ * LDChart의 props입니다.
+ * 원본(mono repo LDChart) 대비 `loader?: string`은 `loading?: boolean`으로,
+ * 임의 hex를 받던 `bgColor?: string`은 프리셋 `color?: LDChartColor`로 대체되고,
+ * 미사용이던 `onChange` prop은 제거되었습니다.
+ * 색상 기본값이 프리셋 `'lowordBlue'`로 통일되어, 원본의 기본 렌더와는 다릅니다
+ * (라인 `#5F92FF` → `#6891f8`, 3색 그라디언트 → 단일 색 알파 램프, hover 배경 `#EF4545` → 시리즈 색).
+ */
+export interface LDChartProps {
+    /** 차트에 그릴 단일 데이터셋(시리즈 이름, 값, 라벨) */
+    dataList: {
+        /** 범례/툴팁에 표시할 시리즈 이름 (기본값: 빈 문자열) */
+        keyword?: string;
+        /** y축 값 배열 */
+        value: number[];
+        /** x축 라벨 배열. 비어 있으면 unit 기준 오늘까지 7개 라벨을 자동 생성 */
+        label: string[];
+    };
+    /** 라인·포인트·그라디언트에 쓸 시리즈 색상 프리셋 (기본값: 'lowordBlue') */
+    color?: LDChartColor;
+    /** y축 위치 (기본값: 'right') */
+    position?: LDChartPosition;
+    /** true면 y축을 반전하고 채움 방향을 위쪽(start)으로 바꾼다 */
+    reverseYAxis?: boolean;
+    /** y축 눈금 뒤에 붙일 단위 문자열 */
+    yUnit?: string;
+    /** 툴팁 값 뒤에 붙일 단위 문자열 */
+    tooltipUnit?: string;
+    /** label이 비어 있을 때 자동 생성할 라벨의 단위 (기본값: 'day') */
+    unit?: LDChartUnit;
+    /** 로딩 오버레이 표시 여부 */
+    loading?: boolean;
+    /** 최외곽 래퍼(Root)에 적용할 className. 배경색은 기본 투명이므로 여기서 지정한다 */
+    rootClassName?: string;
+    /** 차트 영역(Viewport)에 적용할 className */
+    className?: string;
+    /** sizing(width/height/min·max)은 차트 영역(Viewport)에, 나머지 스타일은 Root에 적용된다 */
+    style?: React.CSSProperties;
+}
+declare const LDChart: ({ dataList, color, position, reverseYAxis, yUnit, tooltipUnit, unit, loading, rootClassName, className, style, }: LDChartProps) => import("react/jsx-runtime").JSX.Element;
+export default LDChart;
+//# sourceMappingURL=LDChart.d.ts.map

package/dist/components/LDChart/LDChart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LDChart.d.ts","sourceRoot":"","sources":["../../../src/components/LDChart/LDChart.tsx"],"names":[],"mappings":"AAwCA,mEAAmE;AACnE,MAAM,MAAM,WAAW,GAAG,KAAK,GAAG,OAAO,GAAG,MAAM,CAAC;AAQnD,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,OAAO,CAAC;AAE/C,0CAA0C;AAC1C,MAAM,MAAM,YAAY,GACpB,YAAY,GACZ,MAAM,GACN,KAAK,GACL,QAAQ,GACR,QAAQ,GACR,OAAO,GACP,MAAM,GACN,QAAQ,CAAC;AAyCb;;;;;;;GAOG;AACH,MAAM,WAAW,YAAY;IAC3B,oCAAoC;IACpC,QAAQ,EAAE;QACR,qCAAqC;QACrC,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,cAAc;QACd,KAAK,EAAE,MAAM,EAAE,CAAC;QAChB,iDAAiD;QACjD,KAAK,EAAE,MAAM,EAAE,CAAC;KACjB,CAAC;IACF,qDAAqD;IACrD,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,2BAA2B;IAC3B,QAAQ,CAAC,EAAE,eAAe,CAAC;IAC3B,4CAA4C;IAC5C,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,yBAAyB;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wBAAwB;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gDAAgD;IAChD,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,oBAAoB;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,0DAA0D;IAC1D,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,qCAAqC;IACrC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,0EAA0E;IAC1E,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAED,QAAA,MAAM,OAAO,GAAI,kHAYd,YAAY,4CAwLd,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/dist/components/LDChart/LDChart.js

@@ -0,0 +1,183 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CategoryScale, Chart as ChartJS, Filler, Legend, LinearScale, LineElement, PointElement, Tooltip, } from 'chart.js';
+import dayjs from 'dayjs';
+import { useMemo } from 'react';
+import { Line } from 'react-chartjs-2';
+import cn from '../../utils/cn.js';
+import { formatAbbreviatedNumber, formatNumberWithComma, } from '../../utils/utils.js';
+import LDSpinner from '../LDSpinner/LDSpinner.js';
+import ChartBase from './ChartBase.js';
+// 이 컴포넌트에서만 그리는 선(라인) 차트라 BarElement는 등록하지 않는다.
+ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, Filler, Tooltip, Legend);
+const EMPTY_LABEL_FORMATS = {
+    day: 'YYYY-MM-DD',
+    month: 'YYYY-MM',
+    year: 'YYYY',
+};
+// canvas의 strokeStyle/fillStyle은 CSS 변수를 받지 못하므로 토큰 값을 hex로 옮긴다.
+const CHART_COLORS = {
+    lowordBlue: '#6891f8', // --color-lb500
+    blue: '#2158fd', // --color-blue400
+    red: '#ff4747', // --color-red500
+    orange: '#ff6a00', // --color-orange500
+    yellow: '#ffcc24', // --color-yellow600
+    green: '#00de47', // --color-green600
+    pink: '#ff33d3', // --color-pink500
+    purple: '#7b40c7', // --color-purple500
+};
+const TOOLTIP_TITLE_COLOR = '#e3e6ea'; // --color-neutral100
+// 수직선에 얹는 알파. CHART_COLORS의 hex(#rrggbb)에 이어붙여 #rrggbbaa로 쓴다.
+const VERTICAL_LINE_ALPHA = '80'; // 50%
+// 활성(호버) 데이터 포인트 위치에 수직선을 그리는 플러그인. 앱 전역이 아닌 이 인스턴스에만 적용한다.
+const intersectDataVerticalLine = {
+    id: 'intersectDataVerticalLine',
+    beforeDraw: (chart) => {
+        const [activePoint] = chart.getActiveElements();
+        if (!activePoint) {
+            return;
+        }
+        const chartArea = chart.chartArea;
+        const ctx = chart.ctx;
+        if (chart.data.datasets.length === 1) {
+            ctx.beginPath();
+            ctx.moveTo(activePoint.element.x, activePoint.element.y);
+            ctx.lineTo(activePoint.element.x, chartArea.bottom);
+            ctx.lineWidth = 3;
+            ctx.strokeStyle = `${chart.data.datasets[0]?.borderColor}${VERTICAL_LINE_ALPHA}`;
+            ctx.stroke();
+            ctx.restore();
+        }
+    },
+};
+const LDChart = ({ dataList, color = 'lowordBlue', position = 'right', reverseYAxis, yUnit, tooltipUnit, unit = 'day', loading, rootClassName, className, style, }) => {
+    const emptyLabels = useMemo(() => Array.from({ length: 7 }, (_, i) => dayjs()
+        .subtract(6 - i, unit)
+        .format(EMPTY_LABEL_FORMATS[unit])), [unit]);
+    const maxData = useMemo(() => {
+        const values = dataList.value;
+        const max = values.length > 0 ? Math.max(...values) : 0;
+        // 데이터가 없거나 전부 0이면 max가 0이 되어 축이 무너지므로 기본 축(0~100)을 쓴다.
+        if (max <= 0) {
+            return 100;
+        }
+        return Number((max + Math.ceil(max * 0.1)).toFixed(2));
+    }, [dataList.value]);
+    const dataSets = useMemo(() => {
+        const lineColor = CHART_COLORS[color];
+        return [
+            {
+                label: dataList.keyword ?? '',
+                data: dataList.value,
+                fill: reverseYAxis ? 'start' : 'origin',
+                // 위 → 아래로 시리즈 색이 투명해지는 알파 램프(80 → 33 → 00).
+                backgroundColor: (context) => {
+                    const stops = [
+                        lineColor + '80',
+                        lineColor + '33',
+                        lineColor + '00',
+                    ];
+                    const { chartArea, ctx } = context.chart;
+                    if (!chartArea) {
+                        return undefined;
+                    }
+                    const gradient = ctx.createLinearGradient(0, chartArea.top, 0, chartArea.bottom);
+                    gradient.addColorStop(0, stops[0]);
+                    gradient.addColorStop(0.58, stops[1]);
+                    gradient.addColorStop(1, stops[2]);
+                    return gradient;
+                },
+                hoverBackgroundColor: lineColor,
+                borderColor: lineColor,
+                pointRadius: 1,
+                cubicInterpolationMode: 'monotone',
+                pointBackgroundColor: lineColor,
+                pointBorderColor: lineColor,
+                pointHoverBackgroundColor: lineColor,
+                pointHoverBorderColor: lineColor,
+                pointHoverBorderWidth: 4,
+                pointHoverRadius: 4,
+            },
+        ];
+    }, [dataList.keyword, dataList.value, reverseYAxis, color]);
+    const options = {
+        maintainAspectRatio: false,
+        responsive: true,
+        scales: {
+            y: {
+                min: 0,
+                max: maxData,
+                position,
+                ticks: {
+                    stepSize: Math.ceil(maxData / 10),
+                    precision: 0,
+                    callback: (value) => `${formatAbbreviatedNumber(Number(value))}${yUnit ?? ''}`,
+                },
+                reverse: reverseYAxis || false,
+            },
+            x: {
+                grid: {
+                    drawOnChartArea: false,
+                    drawTicks: true,
+                },
+                ticks: {
+                    maxRotation: 0,
+                    minRotation: 0,
+                    autoSkip: true,
+                    maxTicksLimit: 12,
+                },
+            },
+        },
+        plugins: {
+            tooltip: {
+                mode: 'index',
+                intersect: false,
+                enabled: true,
+                titleColor: TOOLTIP_TITLE_COLOR,
+                displayColors: true,
+                usePointStyle: true,
+                borderWidth: 0.2,
+                bodySpacing: 8,
+                caretPadding: 10,
+                callbacks: {
+                    label: (context) => {
+                        let label = ' ' + (context.dataset.label || '');
+                        if (label) {
+                            label += ': ';
+                        }
+                        if (context.parsed.y !== null) {
+                            label +=
+                                formatNumberWithComma(context.parsed.y) + (tooltipUnit ?? '');
+                        }
+                        return label;
+                    },
+                },
+            },
+            legend: {
+                display: false,
+            },
+        },
+        interaction: {
+            mode: 'nearest',
+            intersect: false,
+            axis: 'x',
+        },
+    };
+    // sizing은 차트 영역(Viewport)으로, 그 외 스타일은 Root로 분리해 전달한다.
+    const { width, height, minWidth, maxWidth, minHeight, maxHeight, ...rootStyle } = style ?? {};
+    const viewportStyle = {
+        height: height ?? 300,
+        width: width ?? '100%',
+        minWidth,
+        maxWidth,
+        minHeight,
+        maxHeight,
+    };
+    // 배경은 기본 투명. 필요한 소비처가 rootClassName으로 지정한다.
+    // (원본의 bg-mono5는 정의되지 않은 토큰이라 실제로도 투명하게 렌더됐다.)
+    return (_jsx(ChartBase.Root, { className: cn('w-full flex flex-col items-start justify-start rounded-xs', rootClassName), style: rootStyle, children: _jsxs(ChartBase.Viewport, { style: viewportStyle, className: cn('relative', className), children: [_jsx(Line, { height: Number(viewportStyle.height), data: {
+                        labels: dataList.label.length > 0 ? dataList.label : emptyLabels,
+                        datasets: dataSets,
+                    }, options: options, plugins: [intersectDataVerticalLine] }), _jsx(ChartBase.Overlay, { className: cn('absolute inset-0 z-10 flex items-center justify-center', 'bg-white/70 ld-transition', loading ? 'opacity-100' : 'opacity-0 pointer-events-none'), children: _jsx(LDSpinner, { size: 32, className: "text-lb500" }) })] }) }));
+};
+export default LDChart;

package/dist/components/LDDaumPostButton/LDDaumPostButton.d.ts

@@ -0,0 +1,18 @@
+import { LDButtonProps } from '../LDButton/LDButton.js';
+/** 우편번호 검색 결과 중 소비처로 넘기는 값만 추린 주소 */
+export interface LDDaumPostAddress {
+    /** 5자리 우편번호 */
+    zonecode: string;
+    /** 도로명 주소(국문) */
+    address: string;
+    /** 도로명 주소(영문) */
+    addressEnglish: string;
+    /** 시군구 영문명 — 없으면 시도 영문명으로 대체 */
+    sigunguEnglish: string;
+}
+export interface LDDaumPostButtonProps extends LDButtonProps<'button'> {
+    onComplete: (address: LDDaumPostAddress) => void;
+}
+declare const LDDaumPostButton: ({ onComplete, size, children, variant, color, disabled, className, ...props }: LDDaumPostButtonProps) => import("react/jsx-runtime").JSX.Element;
+export default LDDaumPostButton;
+//# sourceMappingURL=LDDaumPostButton.d.ts.map

package/dist/components/LDDaumPostButton/LDDaumPostButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LDDaumPostButton.d.ts","sourceRoot":"","sources":["../../../src/components/LDDaumPostButton/LDDaumPostButton.tsx"],"names":[],"mappings":"AAGA,OAAiB,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAO/D,qCAAqC;AACrC,MAAM,WAAW,iBAAiB;IAChC,eAAe;IACf,QAAQ,EAAE,MAAM,CAAC;IACjB,iBAAiB;IACjB,OAAO,EAAE,MAAM,CAAC;IAChB,iBAAiB;IACjB,cAAc,EAAE,MAAM,CAAC;IACvB,gCAAgC;IAChC,cAAc,EAAE,MAAM,CAAC;CACxB;AAED,MAAM,WAAW,qBAAsB,SAAQ,aAAa,CAAC,QAAQ,CAAC;IACpE,UAAU,EAAE,CAAC,OAAO,EAAE,iBAAiB,KAAK,IAAI,CAAC;CAClD;AAED,QAAA,MAAM,gBAAgB,GAAI,+EASvB,qBAAqB,4CA2CvB,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/dist/components/LDDaumPostButton/LDDaumPostButton.js

@@ -0,0 +1,32 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useKakaoPostcodePopup } from 'react-daum-postcode';
+import LDButton from '../LDButton/LDButton.js';
+import LDToast from '../LDToast/LDToast.js';
+// 우편번호 팝업 창 크기 — 카카오(다음) 우편번호 서비스 기본값. 중앙 정렬 계산에 같이 쓴다.
+const POPUP_WIDTH = 500;
+const POPUP_HEIGHT = 600;
+const LDDaumPostButton = ({ onComplete, size = 'small', children = '우편번호 검색', variant = 'outline', color = 'neutral', disabled, className, ...props }) => {
+    const open = useKakaoPostcodePopup();
+    const handleComplete = (data) => {
+        if (!data.roadAddress) {
+            LDToast.warning('도로명 주소가 없는 주소입니다.');
+            return;
+        }
+        onComplete({
+            zonecode: data.zonecode,
+            address: data.roadAddress,
+            addressEnglish: data.roadAddressEnglish,
+            sigunguEnglish: data.sigunguEnglish || data.sidoEnglish,
+        });
+    };
+    return (_jsx(LDButton, { type: "button", size: size, variant: variant, color: color, disabled: disabled, className: className, onClick: () => open({
+            width: POPUP_WIDTH,
+            height: POPUP_HEIGHT,
+            left: Math.ceil((window.screen.width - POPUP_WIDTH) / 2),
+            top: Math.ceil((window.screen.height - POPUP_HEIGHT) / 2),
+            onComplete: handleComplete,
+            onError: () => LDToast.error('우편번호 서비스를 불러올 수 없습니다. 잠시 후 다시 시도해 주세요.'),
+        }), ...props, children: children }));
+};
+export default LDDaumPostButton;

package/dist/components/LDSegmented/LDSegmented.d.ts

@@ -0,0 +1,29 @@
+import { type ComponentProps, type ReactNode } from 'react';
+import SegmentedBase from './SegmentedBase.js';
+/** 세그먼트 크기 */
+export type LDSegmentedSize = 'small' | 'medium' | 'large';
+/** 활성 세그먼트 강조 색 */
+export type LDSegmentedColor = 'point' | 'danger' | 'success' | 'warning';
+/** LDSegmented.Root props */
+export interface LDSegmentedRootProps extends ComponentProps<typeof SegmentedBase.Root> {
+    /** 언컨트롤드일 때 초기 선택값 */
+    defaultValue?: string;
+    /** 세그먼트 크기. 기본 'medium' */
+    size?: LDSegmentedSize;
+    /** true면 트랙·세그먼트 모두 pill 형태(rounded-full). 기본 false */
+    rounded?: boolean;
+}
+interface LDSegmentedItemOwnProps {
+    /** children 왼쪽에 렌더되는 아이콘. 크기는 size에 따라 자동 결정됩니다. */
+    icon?: ReactNode;
+    /** 활성 세그먼트 강조 색. 기본 'point' */
+    color?: LDSegmentedColor;
+}
+/** LDSegmented.Item props */
+export type LDSegmentedItemProps = Omit<ComponentProps<typeof SegmentedBase.Item>, 'ref'> & LDSegmentedItemOwnProps;
+declare const LDSegmented: {
+    Root: ({ size, rounded, value, defaultValue, onValueChange, disabled, className, style, children, ...props }: LDSegmentedRootProps) => import("react/jsx-runtime").JSX.Element;
+    Item: ({ value, className, disabled, icon, color, children, ...props }: LDSegmentedItemProps) => import("react/jsx-runtime").JSX.Element;
+};
+export default LDSegmented;
+//# sourceMappingURL=LDSegmented.d.ts.map

package/dist/components/LDSegmented/LDSegmented.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LDSegmented.d.ts","sourceRoot":"","sources":["../../../src/components/LDSegmented/LDSegmented.tsx"],"names":[],"mappings":"AAEA,OAAO,EAOL,KAAK,cAAc,EACnB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAGf,OAAO,aAAa,MAAM,iBAAiB,CAAC;AAK5C,cAAc;AACd,MAAM,MAAM,eAAe,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAC3D,mBAAmB;AACnB,MAAM,MAAM,gBAAgB,GAAG,OAAO,GAAG,QAAQ,GAAG,SAAS,GAAG,SAAS,CAAC;AA8B1E,6BAA6B;AAC7B,MAAM,WAAW,oBAAqB,SAAQ,cAAc,CAC1D,OAAO,aAAa,CAAC,IAAI,CAC1B;IACC,sBAAsB;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,2BAA2B;IAC3B,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,uDAAuD;IACvD,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AA4JD,UAAU,uBAAuB;IAC/B,oDAAoD;IACpD,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,+BAA+B;IAC/B,KAAK,CAAC,EAAE,gBAAgB,CAAC;CAC1B;AAED,6BAA6B;AAC7B,MAAM,MAAM,oBAAoB,GAAG,IAAI,CACrC,cAAc,CAAC,OAAO,aAAa,CAAC,IAAI,CAAC,EACzC,KAAK,CACN,GACC,uBAAuB,CAAC;AA0D1B,QAAA,MAAM,WAAW;kHA5Md,oBAAoB;4EA6JpB,oBAAoB;CAkDtB,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/components/LDSegmented/LDSegmented.js

@@ -0,0 +1,121 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useEffect, useRef, useState, } from 'react';
+import cn from '../../utils/cn.js';
+import { renderIcon } from '../../utils/renderIcon.js';
+import SegmentedBase from './SegmentedBase.js';
+import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect.js';
+const LDSegmentedContext = createContext({
+    size: 'medium',
+    rounded: false,
+    measured: false,
+});
+const useLDSegmentedContext = () => useContext(LDSegmentedContext);
+// ── Root ──
+const trackRadiusClass = {
+    small: 'rounded-[8px]',
+    medium: 'rounded-[10px]',
+    large: 'rounded-[12px]',
+};
+// indicator 위치 계산도 같은 값을 써야 트랙 padding과 어긋나지 않으므로 한 곳에서만 정의한다.
+const trackPadding = {
+    small: '2px',
+    medium: '3px',
+    large: '4px',
+};
+// 활성 표시는 Root의 마지막 자식인 indicator 상자가 좌우로 슬라이드하며 담당한다.
+// Item 너비가 가변이라 calc()로 계산할 수 없어 실제 DOM 위치·크기를 측정해 인라인 style로 넣는다.
+const Root = ({ size = 'medium', rounded = false, value, defaultValue, onValueChange, disabled, className, style, children, ...props }) => {
+    const [internalValue, setInternalValue] = useState(defaultValue);
+    const isControlled = value !== undefined;
+    const currentValue = isControlled ? value : internalValue;
+    const pad = trackPadding[size];
+    const rootRef = useRef(null);
+    const [rect, setRect] = useState(null);
+    // Base가 등록/해제 시점마다 DOM 순서로 정렬해 알려주는 Item 목록
+    const [items, setItems] = useState([]);
+    // 활성 Item은 items에서 currentValue로 조회
+    const measure = useCallback(() => {
+        if (!currentValue) {
+            setRect(null);
+            return;
+        }
+        const activeEl = items.find((item) => item.value === currentValue)?.el;
+        if (!activeEl) {
+            setRect(null);
+            return;
+        }
+        const next = {
+            left: activeEl.offsetLeft,
+            top: activeEl.offsetTop,
+            width: activeEl.offsetWidth,
+            height: activeEl.offsetHeight,
+        };
+        setRect((prev) => prev &&
+            Object.keys(next).every((key) => prev[key] === next[key])
+            ? prev
+            : next);
+    }, [currentValue, items]);
+    useIsomorphicLayoutEffect(() => {
+        measure();
+    }, [currentValue, items, size, rounded, measure]);
+    // 비활성 Item의 폭 변화도 활성 Item의 offsetLeft를 밀 수 있으므로 items의 모든 Item을 관찰한다.
+    useEffect(() => {
+        const root = rootRef.current;
+        if (!root)
+            return;
+        const observer = new ResizeObserver(measure);
+        observer.observe(root);
+        items.forEach(({ el }) => observer.observe(el));
+        return () => observer.disconnect();
+    }, [currentValue, items, size, rounded, measure]);
+    return (_jsx(LDSegmentedContext, { value: { size, rounded, measured: rect !== null }, children: _jsxs(SegmentedBase.Root, { ref: rootRef, value: currentValue, onValueChange: (newValue) => {
+                if (!isControlled)
+                    setInternalValue(newValue);
+                onValueChange?.(newValue);
+            }, onItemsChange: setItems, disabled: disabled, className: cn('inline-flex items-stretch relative isolate bg-mono100', rounded ? 'rounded-full' : trackRadiusClass[size], disabled && 'opacity-60', className), style: { padding: pad, ...style }, ...props, children: [children, rect && (_jsx(SegmentedBase.Indicator, { className: cn('absolute -z-10 pointer-events-none ld-transition bg-white shadow-sm', rounded ? 'rounded-full' : itemRadiusClass[size]), style: {
+                        left: 0,
+                        top: 0,
+                        width: `${rect.width}px`,
+                        height: `${rect.height}px`,
+                        transform: `translate(${rect.left}px, ${rect.top}px)`,
+                    } }))] }) }));
+};
+// ── Item ──
+const itemRadiusClass = {
+    small: 'rounded-[6px]',
+    medium: 'rounded-[7px]',
+    large: 'rounded-[8px]',
+};
+const itemPaddingClass = {
+    small: 'px-2 py-1',
+    medium: 'px-3 py-1.5',
+    large: 'px-4 py-2',
+};
+const itemFontClass = {
+    small: 'display12',
+    medium: 'display14',
+    large: 'display16',
+};
+const itemIconClass = {
+    small: 'icon-sm',
+    medium: 'icon-md',
+    large: 'icon-lg',
+};
+/** 활성 세그먼트 텍스트 색 */
+const colorTextClass = {
+    point: 'data-[state=on]:text-lb600',
+    danger: 'data-[state=on]:text-danger600',
+    success: 'data-[state=on]:text-success800',
+    warning: 'data-[state=on]:text-warning800',
+};
+// 활성 배경은 Root의 indicator가 전담하므로 Item 자체는 투명하다.
+const Item = ({ value, className, disabled, icon, color = 'point', children, ...props }) => {
+    const { size, rounded, measured } = useLDSegmentedContext();
+    return (_jsxs(SegmentedBase.Item, { value: value, disabled: disabled, className: cn('group relative flex items-center justify-center gap-xs ld-transition cursor-pointer text-nowrap', rounded ? 'rounded-full' : itemRadiusClass[size], itemPaddingClass[size], itemFontClass[size], 'data-[state=off]:text-neutral500 data-[state=off]:not-data-disabled:hover:text-neutral700', colorTextClass[color], 'data-disabled:opacity-40 data-disabled:cursor-not-allowed', className), ...props, children: [!measured && (_jsx("span", { "aria-hidden": true, className: cn('absolute inset-0 -z-10 pointer-events-none bg-white shadow-sm opacity-0 group-data-[state=on]:opacity-100', rounded ? 'rounded-full' : itemRadiusClass[size]) })), renderIcon(icon, itemIconClass[size]), _jsxs("span", { className: "relative text-nowrap", children: [_jsx("span", { "aria-hidden": true, className: "absolute inset-0 text-nowrap group-data-[state=on]:opacity-0", children: children }), _jsx("span", { className: "bold text-nowrap opacity-0 group-data-[state=on]:opacity-100", children: children })] })] }));
+};
+const LDSegmented = {
+    Root,
+    Item,
+};
+export default LDSegmented;

package/dist/components/LDSegmented/SegmentedBase.d.ts

@@ -0,0 +1,33 @@
+import { type CSSProperties, type ReactNode, type Ref } from 'react';
+interface RootProps {
+    ref?: Ref<HTMLDivElement>;
+    value?: string;
+    onValueChange?: (value: string) => void;
+    disabled?: boolean;
+    className?: string;
+    style?: CSSProperties;
+    children?: ReactNode;
+    /** 등록된 Item 목록이 바뀔 때 DOM 순서로 정렬해 알려준다. Custom 레이어의 indicator 실측용. */
+    onItemsChange?: (items: {
+        value: string;
+        el: HTMLElement;
+    }[]) => void;
+}
+interface ItemProps {
+    value: string;
+    disabled?: boolean;
+    className?: string;
+    style?: CSSProperties;
+    children?: ReactNode;
+}
+interface IndicatorProps {
+    className?: string;
+    style?: CSSProperties;
+}
+export declare const SegmentedBase: {
+    Root: ({ ref, value, onValueChange, disabled, className, style, children, onItemsChange, ...props }: RootProps) => import("react/jsx-runtime").JSX.Element;
+    Item: ({ value, disabled, className, style, children }: ItemProps) => import("react/jsx-runtime").JSX.Element;
+    Indicator: ({ className, style }: IndicatorProps) => import("react/jsx-runtime").JSX.Element;
+};
+export default SegmentedBase;
+//# sourceMappingURL=SegmentedBase.d.ts.map

package/dist/components/LDSegmented/SegmentedBase.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SegmentedBase.d.ts","sourceRoot":"","sources":["../../../src/components/LDSegmented/SegmentedBase.tsx"],"names":[],"mappings":"AAEA,OAAO,EAOL,KAAK,aAAa,EAElB,KAAK,SAAS,EACd,KAAK,GAAG,EACT,MAAM,OAAO,CAAC;AAWf,UAAU,SAAS;IACjB,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,qEAAqE;IACrE,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,WAAW,CAAA;KAAE,EAAE,KAAK,IAAI,CAAC;CACvE;AA+ID,UAAU,SAAS;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAyED,UAAU,cAAc;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AAMD,eAAO,MAAM,aAAa;yGAxMvB,SAAS;4DAwHmD,SAAS;sCA4E/B,cAAc;CAQtD,CAAC;AAEF,eAAe,aAAa,CAAC"}