@loword/loword-design-system 0.0.16 → 0.0.18

package/dist/components/LDAutoComplete/AutoCompleteBase.d.ts

@@ -1,5 +1,4 @@
 import { type ReactNode, type Ref } from 'react';
-import { type InputSize } from '../../components/LDInput/LDInput.js';
 export interface IAutoCompleteItem {
     id: string | number;
 }
@@ -12,6 +11,7 @@ interface RootProps<T extends IAutoCompleteItem> {
     children?: ReactNode;
     ref?: Ref<HTMLDivElement>;
 }
+type InputSize = '2xsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
 interface InputProps {
     placeholder?: string;
     size?: InputSize;

package/dist/components/LDAutoComplete/AutoCompleteBase.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AutoCompleteBase.d.ts","sourceRoot":"","sources":["../../../src/components/LDAutoComplete/AutoCompleteBase.tsx"],"names":[],"mappings":"AAEA,OAAO,EAGL,KAAK,SAAS,EACd,KAAK,GAAG,EAST,MAAM,OAAO,CAAC;AAEf,OAAO,EAEL,KAAK,SAAS,EACf,MAAM,kCAAkC,CAAC;AAG1C,MAAM,WAAW,iBAAiB;IAChC,EAAE,EAAE,MAAM,GAAG,MAAM,CAAC;CACrB;AA4CD,UAAU,SAAS,CAAC,CAAC,SAAS,iBAAiB;IAC7C,YAAY,EAAE,OAAO,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC,CAAC;IACvC,SAAS,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC,EAAE,CAAC;IACvC,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,GAAG,IAAI,KAAK,IAAI,CAAC;IAC1C,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC,CAAC,EAAE,GAAG,SAAS,CAAC,CAAC;IACtD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAwJD,UAAU,UAAU;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAsCD,UAAU,SAAS;IACjB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,SAAS,CAAC;CAC1B;AAgDD,UAAU,SAAS;IACjB,IAAI,EAAE,iBAAiB,CAAC;IACxB,KAAK,EAAE,MAAM,CAAC;CACf;AAuCD,eAAO,MAAM,kBAAkB;WA9RjB,CAAC,SAAS,iBAAiB,oFAQtC,SAAS,CAAC,CAAC,CAAC;+CAwJZ,UAAU;+CA0CV,SAAS;4BA+CmB,SAAS;CA0CvC,CAAC;AAEF,eAAe,kBAAkB,CAAC"}
+{"version":3,"file":"AutoCompleteBase.d.ts","sourceRoot":"","sources":["../../../src/components/LDAutoComplete/AutoCompleteBase.tsx"],"names":[],"mappings":"AAEA,OAAO,EAGL,KAAK,SAAS,EACd,KAAK,GAAG,EAST,MAAM,OAAO,CAAC;AAIf,MAAM,WAAW,iBAAiB;IAChC,EAAE,EAAE,MAAM,GAAG,MAAM,CAAC;CACrB;AA4CD,UAAU,SAAS,CAAC,CAAC,SAAS,iBAAiB;IAC7C,YAAY,EAAE,OAAO,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC,CAAC;IACvC,SAAS,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC,EAAE,CAAC;IACvC,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,GAAG,IAAI,KAAK,IAAI,CAAC;IAC1C,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC,CAAC,EAAE,GAAG,SAAS,CAAC,CAAC;IACtD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAyJD,KAAK,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,CAAC;AAYhF,UAAU,UAAU;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAsCD,UAAU,SAAS;IACjB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,SAAS,CAAC;CAC1B;AAgDD,UAAU,SAAS;IACjB,IAAI,EAAE,iBAAiB,CAAC;IACxB,KAAK,EAAE,MAAM,CAAC;CACf;AAuCD,eAAO,MAAM,kBAAkB;WA3SjB,CAAC,SAAS,iBAAiB,oFAQtC,SAAS,CAAC,CAAC,CAAC;+CAqKZ,UAAU;+CA0CV,SAAS;4BA+CmB,SAAS;CA0CvC,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/dist/components/LDAutoComplete/AutoCompleteBase.js

@@ -2,15 +2,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createContext, useCallback, useContext, useEffect, useRef, useState, } from 'react';
 import LDSpinner from '../../components/LDSpinner/LDSpinner.js';
-import { inputSizeClasses, } from '../../components/LDInput/LDInput.js';
 import cn from '../../utils/cn.js';
 const getItemValue = (item, field) => item[field];
 const AutoCompleteContext = createContext(null);
 const useAutoCompleteContext = () => {
-    const autoCompeleteContext = useContext(AutoCompleteContext);
-    if (!autoCompeleteContext)
+    const autoCompleteContext = useContext(AutoCompleteContext);
+    if (!autoCompleteContext)
         throw new Error('LDAutoComplete 하위 컴포넌트는 Root 내부에서 사용해야 합니다.');
-    return autoCompeleteContext;
+    return autoCompleteContext;
 };
 const autoCompleteSizeClasses = {
     '2xsmall': 'autocomplete-2xs',
@@ -105,6 +104,7 @@ const Root = ({ displayField, subFields, onSelectedItem, onChange, className, ch
             setIsOpen(true);
         }
         setFocusedIdx(-1);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [query]);
     useEffect(() => {
         const handleClickOverlay = (e) => {
@@ -142,6 +142,15 @@ const Root = ({ displayField, subFields, onSelectedItem, onChange, className, ch
             itemRefs,
         }, children: _jsx("div", { ref: combinedRef, className: cn('relative z-40 w-full', className), children: children }) }));
 };
+// ── 스타일 매핑 ──
+const inputSizeClasses = {
+    '2xsmall': 'input-2xs',
+    xsmall: 'input-xs',
+    small: 'input-sm',
+    medium: 'input-md',
+    large: 'input-lg',
+    xlarge: 'input-xl',
+};
 const Input = ({ placeholder = '검색어를 입력하세요', size = 'medium', className, }) => {
     const { query, isOpen, handleChange, handleKeyDown, setIsComposing, setIsOpen, } = useAutoCompleteContext();
     return (_jsx("input", { type: "text", placeholder: placeholder, value: query, onChange: (e) => handleChange(e.target.value), onKeyDown: handleKeyDown, onCompositionStart: () => setIsComposing(true), onCompositionEnd: () => setIsComposing(false), onFocus: () => {

package/dist/components/LDBadge/LDBadge.d.ts

@@ -1,13 +1,11 @@
 import { type ReactNode } from 'react';
 type BadgeSize = 'xsmall' | 'small' | 'medium' | 'large';
 type BadgeColor = 'orange' | 'fillOrange' | 'red' | 'fillRed' | 'green' | 'fillGreen' | 'blue' | 'fillBlue' | 'yellow' | 'fillYellow' | 'gray' | 'fillGray';
-export interface LDBadgeProps<T extends string> {
-    /** 뱃지 유형 키 (colorsMap의 키와 매칭) */
-    type: T;
+export interface LDBadgeProps {
     /** 뱃지 사이즈 */
     size?: BadgeSize;
-    /** type별 색상 매핑 객체 (프리셋 BadgeColor 또는 커스텀 Tailwind 클래스) */
-    colorsMap: Record<T, BadgeColor | string>;
+    /** 뱃지 사이즈 */
+    color: BadgeColor;
     /** 왼쪽 아이콘 (ReactNode) */
     leftIcon?: ReactNode;
     /** 오른쪽 아이콘 (ReactNode) */
@@ -19,6 +17,6 @@ export interface LDBadgeProps<T extends string> {
     /** 인라인 스타일 */
     style?: React.CSSProperties;
 }
-declare const LDBadge: <T extends string>({ type, size, colorsMap, leftIcon, rightIcon, children, className, style, }: LDBadgeProps<T>) => import("react/jsx-runtime").JSX.Element;
+declare const LDBadge: ({ size, color, leftIcon, rightIcon, children, className, style, }: LDBadgeProps) => import("react/jsx-runtime").JSX.Element;
 export default LDBadge;
 //# sourceMappingURL=LDBadge.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"LDBadge.d.ts","sourceRoot":"","sources":["../../../src/components/LDBadge/LDBadge.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAKvC,KAAK,SAAS,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AACzD,KAAK,UAAU,GACX,QAAQ,GACR,YAAY,GACZ,KAAK,GACL,SAAS,GACT,OAAO,GACP,WAAW,GACX,MAAM,GACN,UAAU,GACV,QAAQ,GACR,YAAY,GACZ,MAAM,GACN,UAAU,CAAC;AAEf,MAAM,WAAW,YAAY,CAAC,CAAC,SAAS,MAAM;IAC5C,iCAAiC;IACjC,IAAI,EAAE,CAAC,CAAC;IACR,aAAa;IACb,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,0DAA0D;IAC1D,SAAS,EAAE,MAAM,CAAC,CAAC,EAAE,UAAU,GAAG,MAAM,CAAC,CAAC;IAC1C,yBAAyB;IACzB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,0BAA0B;IAC1B,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,YAAY;IACZ,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,iBAAiB;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc;IACd,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AA+BD,QAAA,MAAM,OAAO,GAAI,CAAC,SAAS,MAAM,EAAE,6EAShC,YAAY,CAAC,CAAC,CAAC,4CAmBjB,CAAC;AAEF,eAAe,OAAO,CAAC"}
+{"version":3,"file":"LDBadge.d.ts","sourceRoot":"","sources":["../../../src/components/LDBadge/LDBadge.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAKvC,KAAK,SAAS,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AACzD,KAAK,UAAU,GACX,QAAQ,GACR,YAAY,GACZ,KAAK,GACL,SAAS,GACT,OAAO,GACP,WAAW,GACX,MAAM,GACN,UAAU,GACV,QAAQ,GACR,YAAY,GACZ,MAAM,GACN,UAAU,CAAC;AAEf,MAAM,WAAW,YAAY;IAC3B,aAAa;IACb,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,aAAa;IACb,KAAK,EAAE,UAAU,CAAC;IAClB,yBAAyB;IACzB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,0BAA0B;IAC1B,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,YAAY;IACZ,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,iBAAiB;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc;IACd,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AA+BD,QAAA,MAAM,OAAO,GAAI,mEAQd,YAAY,4CAkBd,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/dist/components/LDBadge/LDBadge.js

@@ -28,8 +28,7 @@ const iconSizes = {
     medium: 'icon-md',
     large: 'icon-lg',
 };
-const LDBadge = ({ type, size = 'small', colorsMap, leftIcon, rightIcon, children, className, style, }) => {
-    const color = colorsMap[type];
+const LDBadge = ({ size = 'small', color = 'blue', leftIcon, rightIcon, children, className, style, }) => {
     const iconSize = iconSizes[size];
     return (_jsxs(BadgeBase.Root, { className: cn('w-auto text-center whitespace-nowrap border border-transparent', colorClasses[color] ?? color, sizeClasses[size], className), style: style, children: [renderIcon(leftIcon, iconSize), children, renderIcon(rightIcon, iconSize)] }));
 };

package/dist/components/LDButton/LDButton.d.ts

@@ -6,7 +6,6 @@ type ButtonColor = 'neutral' | 'point' | 'danger';
 export type ButtonSize = '2xsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
 type ButtonShape = 'default' | 'capsule';
 type ButtonAlign = 'left' | 'center' | 'right';
-export declare const iconSizeClasses: Record<ButtonSize, string>;
 type _ButtonProps = {
     variant?: ButtonVariant;
     color?: ButtonColor;

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

@@ -1 +1 @@
-{"version":3,"file":"LDButton.d.ts","sourceRoot":"","sources":["../../../src/components/LDButton/LDButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,yBAAyB,EAAE,MAAM,yBAAyB,CAAC;AAQpE,KAAK,aAAa,GAAG,OAAO,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;AAC5D,KAAK,WAAW,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,CAAC;AAClD,MAAM,MAAM,UAAU,GAClB,SAAS,GACT,QAAQ,GACR,OAAO,GACP,QAAQ,GACR,OAAO,GACP,QAAQ,CAAC;AACb,KAAK,WAAW,GAAG,SAAS,GAAG,SAAS,CAAC;AACzC,KAAK,WAAW,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;AA+E/C,eAAO,MAAM,eAAe,EAAE,MAAM,CAAC,UAAU,EAAE,MAAM,CAOtD,CAAC;AAcF,KAAK,YAAY,GAAG;IAClB,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,aAAa,CAAC,CAAC,SAAS,WAAW,IAAI,yBAAyB,CAC1E,CAAC,EACD,YAAY,CACb,CAAC;AAEF,KAAK,eAAe,GAAG,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,QAAQ,EAC5D,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC,KACpB,KAAK,CAAC,YAAY,GAAG,IAAI,CAAC;AAE/B,QAAA,MAAM,QAAQ,EAAE,eAoEf,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"LDButton.d.ts","sourceRoot":"","sources":["../../../src/components/LDButton/LDButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,yBAAyB,EAAE,MAAM,yBAAyB,CAAC;AASpE,KAAK,aAAa,GAAG,OAAO,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;AAC5D,KAAK,WAAW,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,CAAC;AAClD,MAAM,MAAM,UAAU,GAClB,SAAS,GACT,QAAQ,GACR,OAAO,GACP,QAAQ,GACR,OAAO,GACP,QAAQ,CAAC;AACb,KAAK,WAAW,GAAG,SAAS,GAAG,SAAS,CAAC;AACzC,KAAK,WAAW,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;AAoO/C,KAAK,YAAY,GAAG;IAClB,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,aAAa,CAAC,CAAC,SAAS,WAAW,IAAI,yBAAyB,CAC1E,CAAC,EACD,YAAY,CACb,CAAC;AAEF,KAAK,eAAe,GAAG,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,QAAQ,EAC5D,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC,KACpB,KAAK,CAAC,YAAY,GAAG,IAAI,CAAC;AAE/B,QAAA,MAAM,QAAQ,EAAE,eAwDf,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/dist/components/LDButton/LDButton.js

@@ -1,102 +1,241 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import cn from '../../utils/cn.js';
 import { renderIcon } from '../../utils/renderIcon.js';
+import tv from '../../utils/tv.js';
 import ButtonBase from './ButtonBase.js';
 import ButtonSpinner from './ButtonSpinner.js';
 // ── 스타일 매핑 (static) ──
-const variantBaseClasses = {
-    solid: {
-        neutral: 'bg-neutral800 text-white',
-        point: 'bg-lb500 text-white',
-        danger: 'bg-danger500 text-white',
+// 배경·테두리·텍스트 색은 variant × color 조합에서 갈리고, 거기에 disabled/loading 상태까지
+// 얹혀야 하므로 compoundVariants가 담당한다. 축 하나로 결정되는 값만 variants에 둔다.
+const buttonVariants = tv({
+    base: 'relative ld-transition',
+    variants: {
+        // 색과 무관하게 variant만 보면 정해지는 조각 — outline의 선 굵기/오프셋, link의 밑줄,
+        // focus 링을 안쪽에 그릴지 바깥쪽에 그릴지. 선·글자 색은 compoundVariants에 있다.
+        variant: {
+            solid: 'focus-visible:ring-offset-2',
+            outline: 'outline -outline-offset-1 focus-visible:ring-inset',
+            ghost: 'focus-visible:ring-inset',
+            link: 'underline underline-offset-4 focus-visible:ring-inset',
+        },
+        // focus 링 색은 variant와 무관하게 color만 본다 (disabled일 때도 유지).
+        color: {
+            neutral: 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-neutral800',
+            point: 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-lb500',
+            danger: 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-danger500',
+        },
+        size: {
+            '2xsmall': 'btn-2xs',
+            xsmall: 'btn-xs',
+            small: 'btn-sm',
+            medium: 'btn-md',
+            large: 'btn-lg',
+            xlarge: 'btn-xl',
+        },
+        shape: {
+            default: 'rounded-[5px]',
+            capsule: 'rounded-full',
+        },
+        align: {
+            left: 'justify-start',
+            center: 'justify-center',
+            right: 'justify-end',
+        },
+        block: { true: 'w-full' },
+        // compact는 size 프리셋(btn-*)의 좌우 여백을 지우므로 size 뒤에 선언한다.
+        compact: { true: 'px-0 min-w-0 aspect-square' },
+        loading: { true: 'cursor-wait', false: 'cursor-pointer' },
+        // disabled 커서가 loading 커서를 이겨야 하므로 loading 뒤에 선언한다.
+        disabled: { true: 'cursor-not-allowed' },
     },
-    outline: {
-        neutral: 'bg-white outline -outline-offset-1 outline-neutral100 text-neutral900',
-        point: 'bg-white outline -outline-offset-1 outline-lb500 text-lb500',
-        danger: 'bg-white outline -outline-offset-1 outline-danger500 text-danger500',
+    compoundVariants: [
+        // ── 기본 색 (disabled 아닐 때만. loading 중에도 유지된다)
+        {
+            variant: 'solid',
+            color: 'neutral',
+            disabled: false,
+            className: 'bg-neutral800 text-white',
+        },
+        {
+            variant: 'solid',
+            color: 'point',
+            disabled: false,
+            className: 'bg-lb500 text-white',
+        },
+        {
+            variant: 'solid',
+            color: 'danger',
+            disabled: false,
+            className: 'bg-danger500 text-white',
+        },
+        {
+            variant: 'outline',
+            color: 'neutral',
+            disabled: false,
+            className: 'bg-white outline-neutral100 text-neutral900',
+        },
+        {
+            variant: 'outline',
+            color: 'point',
+            disabled: false,
+            className: 'bg-white outline-lb500 text-lb500',
+        },
+        {
+            variant: 'outline',
+            color: 'danger',
+            disabled: false,
+            className: 'bg-white outline-danger500 text-danger500',
+        },
+        // ghost와 link는 배경이 없어 기본 색이 동일하다 (link의 밑줄은 variant 축이 담당)
+        {
+            variant: ['ghost', 'link'],
+            color: 'neutral',
+            disabled: false,
+            className: 'bg-transparent text-neutral900',
+        },
+        {
+            variant: ['ghost', 'link'],
+            color: 'point',
+            disabled: false,
+            className: 'bg-transparent text-lb500',
+        },
+        {
+            variant: ['ghost', 'link'],
+            color: 'danger',
+            disabled: false,
+            className: 'bg-transparent text-danger500',
+        },
+        // ── hover/active (상호작용 가능할 때만 — loading 중엔 붙지 않는다)
+        // ghost는 outline과 같은 hover 배경을 쓰지만 active 유지 색이 없다.
+        {
+            variant: 'solid',
+            color: 'neutral',
+            disabled: false,
+            loading: false,
+            className: 'hover:bg-neutral900 active:bg-neutral900',
+        },
+        {
+            variant: 'solid',
+            color: 'point',
+            disabled: false,
+            loading: false,
+            className: 'hover:bg-lb700 active:bg-lb700',
+        },
+        {
+            variant: 'solid',
+            color: 'danger',
+            disabled: false,
+            loading: false,
+            className: 'hover:bg-danger700 active:bg-danger700',
+        },
+        {
+            variant: 'outline',
+            color: 'neutral',
+            disabled: false,
+            loading: false,
+            className: 'hover:bg-mono100 active:bg-mono100',
+        },
+        {
+            variant: 'outline',
+            color: 'point',
+            disabled: false,
+            loading: false,
+            className: 'hover:bg-accept50 active:bg-accept50',
+        },
+        {
+            variant: 'outline',
+            color: 'danger',
+            disabled: false,
+            loading: false,
+            className: 'hover:bg-danger50 active:bg-danger50',
+        },
+        {
+            variant: 'ghost',
+            color: 'neutral',
+            disabled: false,
+            loading: false,
+            className: 'hover:bg-mono100',
+        },
+        {
+            variant: 'ghost',
+            color: 'point',
+            disabled: false,
+            loading: false,
+            className: 'hover:bg-accept50',
+        },
+        {
+            variant: 'ghost',
+            color: 'danger',
+            disabled: false,
+            loading: false,
+            className: 'hover:bg-danger50',
+        },
+        {
+            variant: 'link',
+            color: 'neutral',
+            disabled: false,
+            loading: false,
+            className: 'hover:text-neutral900 active:text-neutral900',
+        },
+        {
+            variant: 'link',
+            color: 'point',
+            disabled: false,
+            loading: false,
+            className: 'hover:text-lb700 active:text-lb700',
+        },
+        {
+            variant: 'link',
+            color: 'danger',
+            disabled: false,
+            loading: false,
+            className: 'hover:text-danger600 active:text-danger600',
+        },
+        // ── disabled 색 (color와 무관하게 회색 고정)
+        {
+            variant: 'solid',
+            disabled: true,
+            className: 'bg-mono300 text-white',
+        },
+        {
+            variant: 'outline',
+            disabled: true,
+            className: 'text-mono300 outline-neutral100',
+        },
+        {
+            variant: ['ghost', 'link'],
+            disabled: true,
+            className: 'text-mono300',
+        },
+    ],
+});
+// leftIcon/rightIcon(svg) 크기. 버튼 자체가 아니라 아이콘 엘리먼트에 붙으므로 별도 tv()다.
+const iconVariants = tv({
+    variants: {
+        size: {
+            '2xsmall': 'icon-2xs',
+            xsmall: 'icon-xs',
+            small: 'icon-sm',
+            medium: 'icon-md',
+            large: 'icon-lg',
+            xlarge: 'icon-xl',
+        },
     },
-    ghost: {
-        neutral: 'bg-transparent text-neutral900',
-        point: 'bg-transparent text-lb500',
-        danger: 'bg-transparent text-danger500',
-    },
-    link: {
-        neutral: 'bg-transparent underline underline-offset-[4px] text-neutral900',
-        point: 'bg-transparent text-lb500 underline underline-offset-[4px]',
-        danger: 'bg-transparent text-danger500 underline underline-offset-[4px]',
-    },
-};
-const variantHoverClasses = {
-    solid: {
-        neutral: 'hover:bg-neutral900 active:bg-neutral900',
-        point: 'hover:bg-lb700 active:bg-lb700',
-        danger: 'hover:bg-danger700 active:bg-danger700',
-    },
-    outline: {
-        neutral: 'hover:bg-mono100 active:bg-mono100',
-        point: 'hover:bg-accept50 active:bg-accept50',
-        danger: 'hover:bg-danger50 active:bg-danger50',
-    },
-    ghost: {
-        neutral: 'hover:bg-mono100',
-        point: 'hover:bg-accept50',
-        danger: 'hover:bg-danger50',
-    },
-    link: {
-        neutral: 'hover:text-neutral900 active:text-neutral900',
-        point: 'hover:text-lb700 active:text-lb700',
-        danger: 'hover:text-danger600 active:text-danger600',
-    },
-};
-const variantDisabledClasses = {
-    solid: 'bg-mono300 text-white',
-    outline: 'text-mono300 outline -outline-offset-1 outline-neutral100',
-    ghost: 'text-mono300',
-    link: 'text-mono300 underline underline-offset-[4px]',
-};
-const colorFocusClasses = {
-    neutral: 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-neutral800',
-    point: 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-lb500',
-    danger: 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-danger500',
-};
-const sizeClasses = {
-    '2xsmall': 'btn-2xs',
-    xsmall: 'btn-xs',
-    small: 'btn-sm',
-    medium: 'btn-md',
-    large: 'btn-lg',
-    xlarge: 'btn-xl',
-};
-export const iconSizeClasses = {
-    '2xsmall': 'icon-2xs',
-    xsmall: 'icon-xs',
-    small: 'icon-sm',
-    medium: 'icon-md',
-    large: 'icon-lg',
-    xlarge: 'icon-xl',
-};
-const alignClasses = {
-    left: 'justify-start',
-    center: 'justify-center',
-    right: 'justify-end',
-};
-const shapeClasses = {
-    default: 'rounded-[5px]',
-    capsule: 'rounded-full',
-};
+});
 const LDButton = ({ as, variant = 'solid', color = 'point', size = 'small', shape = 'default', align = 'center', loading = false, block = false, children, className, leftIcon, rightIcon, compact = false, ref, ...props }) => {
-    const iconSize = iconSizeClasses[size];
-    return (_jsxs(ButtonBase.Root, { as: as, ref: ref, className: cn('relative ld-transition', {
-            [variantBaseClasses[variant][color]]: !props.disabled,
-            [variantHoverClasses[variant][color]]: !props.disabled && !loading,
-            [variantDisabledClasses[variant]]: props.disabled,
-        }, {
-            [`${colorFocusClasses[color]} focus-visible:ring-offset-2`]: variant === 'solid',
-            [`${colorFocusClasses[color]} focus-visible:ring-inset`]: variant !== 'solid',
-        }, {
-            ['cursor-pointer']: !props.disabled && !loading,
-            ['cursor-wait']: !props.disabled && loading,
-            ['cursor-not-allowed']: props.disabled,
-        }, block && 'w-full', sizeClasses[size], shapeClasses[shape], alignClasses[align], compact && 'px-0 min-w-0 aspect-square', className), ...props, disabled: props.disabled || loading, children: [loading ? (_jsx(ButtonSpinner, { size: size, className: "mobile:absolute mobile:left-1/2 mobile:top-1/2 mobile:-translate-x-1/2 mobile:-translate-y-1/2" })) : (renderIcon(leftIcon, iconSize)), children && (_jsx("span", { className: cn('shrink-0', loading && 'mobile:invisible'), children: children })), renderIcon(rightIcon, iconSize, loading && 'mobile:invisible')] }));
+    const iconSize = iconVariants({ size });
+    return (_jsxs(ButtonBase.Root, { as: as, ref: ref, className: buttonVariants({
+            variant,
+            color,
+            size,
+            shape,
+            align,
+            block,
+            compact,
+            loading,
+            // 미지정도 false 분기(기본 색·hover)를 타야 하므로 boolean으로 좁혀 넘긴다.
+            disabled: !!props.disabled,
+            className,
+        }), ...props, disabled: props.disabled || loading, children: [loading ? (_jsx(ButtonSpinner, { size: size, className: "mobile:absolute mobile:left-1/2 mobile:top-1/2 mobile:-translate-x-1/2 mobile:-translate-y-1/2" })) : (renderIcon(leftIcon, iconSize)), children && (_jsx("span", { className: cn('shrink-0', loading && 'mobile:invisible'), children: children })), renderIcon(rightIcon, iconSize, loading && 'mobile:invisible')] }));
 };
 export default LDButton;

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

@@ -1,6 +1,6 @@
-import { type CSSProperties, type ReactNode } from 'react';
-import useEmblaCarousel from 'embla-carousel-react';
 import type { EmblaCarouselType, EmblaOptionsType } from 'embla-carousel';
+import useEmblaCarousel from 'embla-carousel-react';
+import { type CSSProperties, type ReactNode } from 'react';
 export type CarouselOrientation = 'horizontal' | 'vertical';
 interface AutoplayConfig {
     /** 자동 전환 간격(ms). 기본 4000 */

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

@@ -1,11 +1,11 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { createContext, useCallback, useContext, useEffect, useState, } from 'react';
-import useEmblaCarousel from 'embla-carousel-react';
-import Autoplay from 'embla-carousel-autoplay';
 import AutoScroll from 'embla-carousel-auto-scroll';
-import cn from '../../utils/cn.js';
+import Autoplay from 'embla-carousel-autoplay';
+import useEmblaCarousel from 'embla-carousel-react';
 import { ChevronDown, ChevronLeft, ChevronRight, ChevronUp, } from 'lucide-react';
+import { createContext, useCallback, useContext, useEffect, useState, } from 'react';
+import cn from '../../utils/cn.js';
 const CarouselContext = createContext(null);
 const useCarouselContext = () => {
     const ctx = useContext(CarouselContext);
@@ -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]);
@@ -126,8 +128,12 @@ const Next = ({ className, children, ...props }) => {
             (orientation === 'vertical' ? (_jsx(ChevronDown, { size: 28, strokeWidth: 1.4 })) : (_jsx(ChevronRight, { size: 28, strokeWidth: 1.4 }))) }));
 };
 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 }) })] }));
+    const { scrollNext, scrollPrev, canScrollNext, canScrollPrev } = useCarouselContext();
+    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/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"}