@loword/loword-design-system 0.0.10 → 0.0.13

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

@@ -4,8 +4,8 @@ import { createContext, useCallback, useContext, useEffect, useState, } from 're
 import useEmblaCarousel from 'embla-carousel-react';
 import Autoplay from 'embla-carousel-autoplay';
 import AutoScroll from 'embla-carousel-auto-scroll';
-import LucideIcon from '../Icon/LucideIcon.js';
 import cn from '../../utils/cn.js';
+import { ChevronDown, ChevronLeft, ChevronRight, ChevronUp, } from 'lucide-react';
 const CarouselContext = createContext(null);
 const useCarouselContext = () => {
     const ctx = useContext(CarouselContext);
@@ -35,11 +35,12 @@ const Root = ({ orientation = 'horizontal', loop = false, autoplay = false, auto
         }));
     }
     const [emblaRef, emblaApi] = useEmblaCarousel({
-        ...options,
         align,
         loop,
         containScroll,
         axis: orientation === 'vertical' ? 'y' : 'x',
+        skipSnaps: true,
+        ...options,
     }, plugins);
     const [selectedIndex, setSelectedIndex] = useState(0);
     const [scrollSnaps, setScrollSnaps] = useState([]);
@@ -93,12 +94,15 @@ const Container = ({ className, style, children }) => {
     return (_jsx("div", { className: cn('flex', isVertical ? 'flex-col h-full' : 'flex-row', className), 
         // embla 공식 방식: 간격을 Slide 패딩으로 주고, 첫 칸 패딩만 음수 마진으로 상쇄.
         // flex gap과 달리 loop 이음새(마지막↔처음)에도 간격이 유지됨.
+        // 세로 고정 높이에선 음수 마진(-gap)만큼 트랙 높이를 늘려야 마지막 슬라이드가 바닥까지 참.
         style: {
             [isVertical ? 'marginTop' : 'marginLeft']: -gap,
+            ...(isVertical && { height: `calc(100% + ${gap}px)` }),
             ...style,
         }, children: children }));
 };
-const Slide = ({ size = '100%', index, total, className, style, children, }) => {
+const Slide = ({ slidesPerView = 'auto', index, total, className, style, children, }) => {
+    const size = slidesPerView === 'auto' ? 'auto' : `${100 / slidesPerView}%`;
     const { orientation, gap } = useCarouselContext();
     const isVertical = orientation === 'vertical';
     return (_jsx("div", { role: "group", "aria-roledescription": "slide", "aria-label": index != null && total != null ? `${index + 1} / ${total}` : undefined, className: cn('min-w-0 shrink-0 grow-0', className), 
@@ -113,15 +117,17 @@ const Slide = ({ size = '100%', index, total, className, style, children, }) =>
 };
 const Prev = ({ className, children, ...props }) => {
     const { scrollPrev, canScrollPrev, orientation } = useCarouselContext();
-    return (_jsx("button", { type: "button", onClick: scrollPrev, disabled: !canScrollPrev, "aria-label": props['aria-label'] ?? '이전', className: cn('ld-carousel__nav', orientation === 'vertical' && 'ld-carousel__nav--vertical', className), children: children ?? (_jsx(LucideIcon, { name: orientation === 'vertical' ? 'chevronUp' : 'chevronLeft', size: 72, strokeWidth: 1.2 })) }));
+    return (_jsx("button", { type: "button", onClick: scrollPrev, disabled: !canScrollPrev, "aria-label": props['aria-label'] ?? '이전', className: cn('ld-carousel__nav', orientation === 'vertical' && 'ld-carousel__nav--vertical', className), children: children ??
+            (orientation === 'vertical' ? (_jsx(ChevronUp, { size: 32, strokeWidth: 1.4 })) : (_jsx(ChevronLeft, { size: 32, strokeWidth: 1.4 }))) }));
 };
 const Next = ({ className, children, ...props }) => {
     const { scrollNext, canScrollNext, orientation } = useCarouselContext();
-    return (_jsx("button", { type: "button", onClick: scrollNext, disabled: !canScrollNext, "aria-label": props['aria-label'] ?? '다음', className: cn('ld-carousel__nav', orientation === 'vertical' && 'ld-carousel__nav--vertical', className), children: children ?? (_jsx(LucideIcon, { name: orientation === 'vertical' ? 'chevronDown' : 'chevronRight', size: 72, strokeWidth: 1.2 })) }));
+    return (_jsx("button", { type: "button", onClick: scrollNext, disabled: !canScrollNext, "aria-label": props['aria-label'] ?? '다음', className: cn('ld-carousel__nav', orientation === 'vertical' && 'ld-carousel__nav--vertical', className), children: children ??
+            (orientation === 'vertical' ? (_jsx(ChevronDown, { size: 32, strokeWidth: 1.4 })) : (_jsx(ChevronRight, { size: 32, strokeWidth: 1.4 }))) }));
 };
 const TopArrows = ({ className, children, ...props }) => {
     const { scrollNext, scrollPrev, canScrollNext, canScrollPrev, orientation } = useCarouselContext();
-    return (_jsxs("div", { className: "flex flex-row gap-xs ml-auto", children: [_jsx("button", { type: "button", onClick: scrollPrev, disabled: !canScrollPrev, "aria-label": props['aria-label'] ?? '이전', className: cn('hover:bg-neutral50 disabled:opacity-40 disabled:cursor-not-allowed cursor-pointer border border-neutral200 rounded-full size-8 flex justify-center items-center ld-transition', className), children: children ?? (_jsx(LucideIcon, { name: orientation === 'vertical' ? 'chevronDown' : 'chevronLeft', strokeWidth: 1.2, size: 22 })) }), _jsx("button", { type: "button", onClick: scrollNext, disabled: !canScrollNext, "aria-label": props['aria-label'] ?? '다음', className: cn('hover:bg-neutral50 disabled:opacity-40 disabled:cursor-not-allowed cursor-pointer border border-neutral200 rounded-full size-8 flex justify-center items-center ld-transition', className), children: children ?? (_jsx(LucideIcon, { name: orientation === 'vertical' ? 'chevronDown' : 'chevronRight', strokeWidth: 1.2, size: 22 })) })] }));
+    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 Dots = ({ className, dotClassName }) => {
     const { scrollSnaps, selectedIndex, scrollTo } = useCarouselContext();

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

@@ -21,32 +21,31 @@ export interface LDCarouselProps {
     /** embla 세부 옵션. 스크롤이 너무 빠르면 `duration`을 키우세요(기본 25, 클수록 느리고 부드러움).
      *  드래그 민감도는 `dragThreshold`(드래그 인식 거리)·`dragFree`(스냅 없이 자유 스크롤)로 조절합니다. */
     options?: RootProps['options'];
-    /** 이전/다음 화살표 표시. 기본 true */
-    showArrows?: boolean;
-    /** 하단 도트 페이지네이션 표시. 기본 true */
-    showTopArrows?: boolean;
+    /** 이전/다음 화살표 위치. 'top'(상단)·'side'(좌우)·'none'(숨김). 기본 'top' */
+    arrowPosition?: 'top' | 'side' | 'none';
     showDots?: boolean;
     /** "현재 / 전체" 숫자 표시. 기본 false */
     showCounter?: boolean;
-    /** 슬라이드 한 개의 크기(basis). 기본 '100%' */
-    slideSize?: string;
+    /** 한 화면에 보일 슬라이드 수. 기본 1. `'auto'`면 각 슬라이드가 내용 폭대로 배치 */
+    slidesPerView?: number | 'auto';
     /** 슬라이드 사이 간격(Tailwind gap 단위 px). 기본 16 */
     gap?: number;
     className?: string;
     style?: CSSProperties;
     /** Viewport에 적용할 클래스 (세로 모드 높이 지정 등) */
     viewportClassName?: string;
+    slideClassName?: string;
 }
 /**
  * embla-carousel 기반 기본 캐러셀.
  * 고급 커스터마이징이 필요하면 `LDCarousel.Root` 등 compound API를 직접 조합하세요.
  */
 declare const LDCarousel: {
-    ({ slides, orientation, loop, autoplay, autoScroll, align, containScroll, options, showArrows, showTopArrows, showDots, showCounter, slideSize, gap, className, style, viewportClassName, }: LDCarouselProps): import("react/jsx-runtime").JSX.Element;
+    ({ slides, orientation, loop, autoplay, autoScroll, align, containScroll, options, arrowPosition, showDots, showCounter, slidesPerView, gap, className, style, viewportClassName, slideClassName, }: LDCarouselProps): import("react/jsx-runtime").JSX.Element;
     Root: ({ orientation, loop, autoplay, autoScroll, align, containScroll, options, gap, className, style, children, }: RootProps) => import("react/jsx-runtime").JSX.Element;
     Viewport: ({ className, children }: import("./CarouselBase.js").ViewportProps) => import("react/jsx-runtime").JSX.Element;
     Container: ({ className, style, children }: import("./CarouselBase.js").ContainerProps) => import("react/jsx-runtime").JSX.Element;
-    Slide: ({ size, index, total, className, style, children, }: import("./CarouselBase.js").SlideProps) => import("react/jsx-runtime").JSX.Element;
+    Slide: ({ slidesPerView, index, total, className, style, children, }: import("./CarouselBase.js").SlideProps) => import("react/jsx-runtime").JSX.Element;
     Prev: ({ className, children, ...props }: import("./CarouselBase.js").NavButtonProps) => import("react/jsx-runtime").JSX.Element;
     Next: ({ className, children, ...props }: import("./CarouselBase.js").NavButtonProps) => import("react/jsx-runtime").JSX.Element;
     Dots: ({ className, dotClassName }: import("./CarouselBase.js").DotsProps) => import("react/jsx-runtime").JSX.Element;

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,EAAE,KAAK,aAAa,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAC3D,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,4BAA4B;IAC5B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,+BAA+B;IAC/B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gCAAgC;IAChC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,qCAAqC;IACrC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,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;CAC5B;AAED;;;GAGG;AACH,QAAA,MAAM,UAAU;iMAkBb,eAAe;;;;;;;;;;CAwDjB,CAAC;AAYF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"LDCarousel.d.ts","sourceRoot":"","sources":["../../../src/components/LDCarousel/LDCarousel.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,aAAa,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAC3D,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,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;yMAkBb,eAAe;;;;;;;;;;CAyDjB,CAAC;AAYF,eAAe,UAAU,CAAC"}

package/dist/components/LDCarousel/LDCarousel.js

@@ -6,10 +6,10 @@ import cn from '../../utils/cn.js';
  * embla-carousel 기반 기본 캐러셀.
  * 고급 커스터마이징이 필요하면 `LDCarousel.Root` 등 compound API를 직접 조합하세요.
  */
-const LDCarousel = ({ slides, orientation = 'horizontal', loop = false, autoplay = false, autoScroll = false, align = 'start', containScroll = 'trimSnaps', options, showArrows = false, showTopArrows = false, showDots = false, showCounter = false, slideSize = '100%', gap = 16, className, style, viewportClassName, }) => {
+const LDCarousel = ({ slides, orientation = 'horizontal', loop = false, autoplay = false, autoScroll = false, align = 'start', containScroll = 'trimSnaps', options, arrowPosition = 'top', showDots = false, showCounter = false, slidesPerView = 'auto', gap = 16, className, style, viewportClassName, slideClassName, }) => {
     const isVertical = orientation === 'vertical';
     const total = 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: [showTopArrows && _jsx(CarouselBase.TopArrows, {}), _jsxs("div", { className: cn('flex items-center gap-3 w-full relative', isVertical && 'flex-col'), children: [showArrows && _jsx(CarouselBase.Prev, {}), _jsx(CarouselBase.Viewport, { className: cn('w-full', viewportClassName), children: _jsx(CarouselBase.Container, { children: slides.map((slide, i) => (_jsx(CarouselBase.Slide, { size: slideSize, index: i, total: total, children: slide }, i))) }) }), showArrows && _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, {})] }))] }) }));
+    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: slides.map((slide, i) => (_jsx(CarouselBase.Slide, { slidesPerView: slidesPerView, index: i, total: total, className: slideClassName, children: slide }, 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, {})] }))] }) }));
 };
 LDCarousel.Root = CarouselBase.Root;
 LDCarousel.Viewport = CarouselBase.Viewport;

package/dist/components/LDCheckbox/CheckboxBase.d.ts

@@ -1,5 +1,4 @@
 import { type ReactNode, type Ref } from 'react';
-import { type IconName } from '../Icon/LucideIcon.js';
 interface CheckboxContextType {
     checked: boolean;
     onCheckedChange: (checked: boolean) => void;
@@ -21,7 +20,6 @@ interface HiddenInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
     ref?: Ref<HTMLInputElement>;
 }
 interface IndicatorProps {
-    icon?: IconName;
     iconSize?: number;
     className?: string;
     iconClassName?: string;
@@ -33,7 +31,7 @@ interface LabelProps {
 export declare const CheckboxBase: {
     Root: ({ checked, defaultChecked, onCheckedChange, disabled, className, style, children, }: RootProps) => import("react/jsx-runtime").JSX.Element;
     HiddenInput: ({ ref, onFocus, onBlur, onChange, ...props }: HiddenInputProps) => import("react/jsx-runtime").JSX.Element;
-    Indicator: ({ icon, iconSize, className, iconClassName, }: IndicatorProps) => import("react/jsx-runtime").JSX.Element;
+    Indicator: ({ iconSize, className, iconClassName, }: IndicatorProps) => import("react/jsx-runtime").JSX.Element;
     Label: ({ className, children }: LabelProps) => import("react/jsx-runtime").JSX.Element;
 };
 export default CheckboxBase;

package/dist/components/LDCheckbox/CheckboxBase.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxBase.d.ts","sourceRoot":"","sources":["../../../src/components/LDCheckbox/CheckboxBase.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,SAAS,EACd,KAAK,GAAG,EAIT,MAAM,OAAO,CAAC;AACf,OAAmB,EAAE,KAAK,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAI/D,UAAU,mBAAmB;IAC3B,OAAO,EAAE,OAAO,CAAC;IACjB,eAAe,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC5C,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,EAAE,OAAO,CAAC;IACnB,YAAY,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;CAC1C;AAID,eAAO,MAAM,kBAAkB,2BAO9B,CAAC;AAGF,UAAU,SAAS;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC,OAAO,EAAE,OAAO,KAAK,MAAM,CAAC,CAAC;IACpD,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAiDD,UAAU,gBAAiB,SAAQ,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC;IAC5E,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;CAC7B;AAqCD,UAAU,cAAc;IACtB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAgBD,UAAU,UAAU;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAMD,eAAO,MAAM,YAAY;gGA5GtB,SAAS;gEAiDT,gBAAgB;+DAyChB,cAAc;qCAcuB,UAAU;CASjD,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"CheckboxBase.d.ts","sourceRoot":"","sources":["../../../src/components/LDCheckbox/CheckboxBase.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,SAAS,EACd,KAAK,GAAG,EAIT,MAAM,OAAO,CAAC;AAKf,UAAU,mBAAmB;IAC3B,OAAO,EAAE,OAAO,CAAC;IACjB,eAAe,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC5C,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,EAAE,OAAO,CAAC;IACnB,YAAY,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;CAC1C;AAID,eAAO,MAAM,kBAAkB,2BAO9B,CAAC;AAGF,UAAU,SAAS;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC,OAAO,EAAE,OAAO,KAAK,MAAM,CAAC,CAAC;IACpD,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAiDD,UAAU,gBAAiB,SAAQ,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC;IAC5E,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;CAC7B;AAqCD,UAAU,cAAc;IACtB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAeD,UAAU,UAAU;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAMD,eAAO,MAAM,YAAY;gGA1GtB,SAAS;gEAiDT,gBAAgB;yDAuChB,cAAc;qCAcuB,UAAU;CASjD,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/components/LDCheckbox/CheckboxBase.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { createContext, useContext, useState, } from 'react';
-import LucideIcon from '../Icon/LucideIcon.js';
 import cn from '../../utils/cn.js';
+import { Check } from 'lucide-react';
 const CheckboxContext = createContext(null);
 export const useCheckboxContext = () => {
     const ctx = useContext(CheckboxContext);
@@ -26,7 +26,7 @@ const Root = ({ checked, defaultChecked = false, onCheckedChange, disabled = fal
             disabled,
             isFocused,
             setIsFocused,
-        }, children: _jsx("label", { style: style, onClick: (e) => e.stopPropagation(), className: cn('flex flex-row w-fit gap-2.5 shrink-0', disabled ? 'cursor-not-allowed' : 'cursor-pointer', resolvedClassName), children: children }) }));
+        }, children: _jsx("label", { style: style, onClick: (e) => e.stopPropagation(), className: cn('flex flex-row w-fit shrink-0', disabled ? 'cursor-not-allowed' : 'cursor-pointer', resolvedClassName), children: children }) }));
 };
 const HiddenInput = ({ ref, onFocus, onBlur, onChange, ...props }) => {
     const { checked, onCheckedChange, disabled, setIsFocused } = useCheckboxContext();
@@ -42,8 +42,8 @@ const HiddenInput = ({ ref, onFocus, onBlur, onChange, ...props }) => {
             onBlur?.(e);
         }, ...props }));
 };
-const Indicator = ({ icon = 'check', iconSize = 24, className, iconClassName, }) => {
-    return (_jsx("div", { className: className, children: _jsx(LucideIcon, { name: icon, size: iconSize, className: iconClassName }) }));
+const Indicator = ({ iconSize = 24, className, iconClassName, }) => {
+    return (_jsx("div", { className: className, children: _jsx(Check, { size: iconSize, className: iconClassName }) }));
 };
 const Label = ({ className, children }) => {
     return _jsx("span", { className: className, children: children });

package/dist/components/LDCheckbox/LDCheckbox.d.ts

@@ -1,6 +1,5 @@
 import { type InputHTMLAttributes, type Ref } from 'react';
-type CheckboxSize = 'small';
-type CheckboxFontSize = 'small' | 'regular';
+export type CheckboxSize = '2xsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
 type CheckboxType = 'default' | 'checkbox' | 'pill';
 export interface LDCheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'size' | 'value'> {
     /** 체크 상태 변경 콜백 (boolean) */
@@ -9,8 +8,6 @@ export interface LDCheckboxProps extends Omit<InputHTMLAttributes<HTMLInputEleme
     value?: string;
     /** 체크 아이콘 크기 프리셋 */
     size?: CheckboxSize;
-    /** 라벨 텍스트 크기 프리셋 */
-    fontSize?: CheckboxFontSize;
     /** 라벨 텍스트 */
     label?: string;
     /** '필수' 라벨 표시 여부 */
@@ -22,6 +19,6 @@ export interface LDCheckboxProps extends Omit<InputHTMLAttributes<HTMLInputEleme
     /** input 요소 ref */
     ref?: Ref<HTMLInputElement>;
 }
-declare const LDCheckbox: ({ checked, defaultChecked, onCheckedChange, onChange, size, fontSize, label, isRequired, type, itemCenter, disabled, className, style, ref, ...props }: LDCheckboxProps) => import("react/jsx-runtime").JSX.Element;
+declare const LDCheckbox: ({ checked, defaultChecked, onCheckedChange, onChange, size, label, isRequired, type, itemCenter, disabled, className, style, ref, ...props }: LDCheckboxProps) => import("react/jsx-runtime").JSX.Element;
 export default LDCheckbox;
 //# sourceMappingURL=LDCheckbox.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"LDCheckbox.d.ts","sourceRoot":"","sources":["../../../src/components/LDCheckbox/LDCheckbox.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,mBAAmB,EAAE,KAAK,GAAG,EAAE,MAAM,OAAO,CAAC;AAK3D,KAAK,YAAY,GAAG,OAAO,CAAC;AAC5B,KAAK,gBAAgB,GAAG,OAAO,GAAG,SAAS,CAAC;AAC5C,KAAK,YAAY,GAAG,SAAS,GAAG,UAAU,GAAG,MAAM,CAAC;AAiBpD,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAC3C,mBAAmB,CAAC,gBAAgB,CAAC,EACrC,MAAM,GAAG,MAAM,GAAG,OAAO,CAC1B;IACC,4BAA4B;IAC5B,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7C,kBAAkB;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oBAAoB;IACpB,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,oBAAoB;IACpB,QAAQ,CAAC,EAAE,gBAAgB,CAAC;IAC5B,aAAa;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oBAAoB;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,6DAA6D;IAC7D,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,yBAAyB;IACzB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,mBAAmB;IACnB,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;CAC7B;AAmGD,QAAA,MAAM,UAAU,GAAI,wJAgBjB,eAAe,4CAgDjB,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"LDCheckbox.d.ts","sourceRoot":"","sources":["../../../src/components/LDCheckbox/LDCheckbox.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,mBAAmB,EAAE,KAAK,GAAG,EAAE,MAAM,OAAO,CAAC;AAK3D,MAAM,MAAM,YAAY,GACpB,SAAS,GACT,QAAQ,GACR,OAAO,GACP,QAAQ,GACR,OAAO,GACP,QAAQ,CAAC;AACb,KAAK,YAAY,GAAG,SAAS,GAAG,UAAU,GAAG,MAAM,CAAC;AAgFpD,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAC3C,mBAAmB,CAAC,gBAAgB,CAAC,EACrC,MAAM,GAAG,MAAM,GAAG,OAAO,CAC1B;IACC,4BAA4B;IAC5B,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7C,kBAAkB;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oBAAoB;IACpB,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,aAAa;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oBAAoB;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,6DAA6D;IAC7D,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,yBAAyB;IACzB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,mBAAmB;IACnB,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;CAC7B;AAwGD,QAAA,MAAM,UAAU,GAAI,8IAejB,eAAe,4CAwDjB,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/components/LDCheckbox/LDCheckbox.js

@@ -1,25 +1,83 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import CheckboxBase, { useCheckboxContext } from './CheckboxBase.js';
 import cn from '../../utils/cn.js';
+// medium이 기존 단일 사이즈(24) 기준. 위아래로 프리셋을 확장.
 const checkIconSizes = {
+    '2xsmall': 16,
+    xsmall: 20,
     small: 24,
+    medium: 28,
+    large: 32,
+    xlarge: 36,
 };
 const labelHeight = {
+    '2xsmall': 'min-h-4 leading-4',
+    xsmall: 'min-h-5 leading-5',
     small: 'min-h-6 leading-6',
+    medium: 'min-h-7 leading-7',
+    large: 'min-h-8 leading-8',
+    xlarge: 'min-h-9 leading-9',
 };
 const labelSizeClasses = {
+    '2xsmall': 'display10',
+    xsmall: 'display12',
     small: 'display14',
-    regular: 'display16',
+    medium: 'display16',
+    large: 'display18',
+    xlarge: 'display20',
+};
+const gapClasses = {
+    '2xsmall': 'gap-2xs',
+    xsmall: 'gap-2xs',
+    small: 'gap-xs',
+    medium: 'gap-xs',
+    large: 'gap-sm',
+    xlarge: 'gap-sm',
+};
+// ── pill 전용 사이즈 프리셋 (small = 기존 단일 모양 기준) ──
+const pillSizeClasses = {
+    '2xsmall': 'py-1.5 px-2.5 display10',
+    xsmall: 'py-2 px-3 display12',
+    small: 'py-sm px-[15px] display14',
+    medium: 'py-3.5 px-4 display16',
+    large: 'py-4 px-5 display18',
+    xlarge: 'py-[18px] px-6 display20',
+};
+const pillIconSizes = {
+    '2xsmall': 12,
+    xsmall: 14,
+    small: 16,
+    medium: 18,
+    large: 20,
+    xlarge: 24,
+};
+// checkbox 타입 박스 안 체크 아이콘 크기 (small = 기존 10 기준)
+const checkboxIconSizes = {
+    '2xsmall': 8,
+    xsmall: 9,
+    small: 10,
+    medium: 12,
+    large: 14,
+    xlarge: 16,
+};
+// 체크 시 아이콘 자리만큼 라벨을 오른쪽으로 미는 좌측 패딩 (아이콘 크기 + 여백)
+const pillCheckedPad = {
+    '2xsmall': 'pl-4',
+    xsmall: 'pl-[18px]',
+    small: 'pl-5',
+    medium: 'pl-[22px]',
+    large: 'pl-6',
+    xlarge: 'pl-7',
 };
 // ── Inner: Context에서 checked를 읽어 스타일 적용 ──
-const PillInner = ({ label, ref, ...props }) => {
+const PillInner = ({ size, label, ref, ...props }) => {
     const { checked } = useCheckboxContext();
-    return (_jsxs(_Fragment, { children: [_jsx(CheckboxBase.HiddenInput, { ref: ref, ...props }), _jsxs("div", { className: "relative flex items-center", children: [_jsx(CheckboxBase.Indicator, { icon: "check", iconSize: 16, className: cn('absolute left-0'), iconClassName: cn('shrink-0 transition-all duration-200 ease-out', checked ? 'opacity-100' : 'opacity-0') }), label && (_jsx(CheckboxBase.Label, { className: cn('transition-all ld-transition text-nowrap', checked ? 'pl-5' : 'pl-sm pr-sm'), children: label }))] })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(CheckboxBase.HiddenInput, { ref: ref, ...props }), _jsxs("div", { className: "relative flex items-center", children: [_jsx(CheckboxBase.Indicator, { iconSize: pillIconSizes[size], className: cn('absolute left-0'), iconClassName: cn('shrink-0 ld-transition', checked ? 'opacity-100' : 'opacity-0') }), label && (_jsx(CheckboxBase.Label, { className: cn('text-nowrap ld-transition', checked ? pillCheckedPad[size] : 'pl-sm pr-sm'), children: label }))] })] }));
 };
 const DefaultInner = ({ type, size, label, isRequired, ref, ...props }) => {
     const { checked, disabled } = useCheckboxContext();
-    return (_jsxs(_Fragment, { children: [_jsx(CheckboxBase.HiddenInput, { ref: ref, ...props }), _jsx(CheckboxBase.Indicator, { icon: "check", iconSize: type === 'checkbox' ? 10 : checkIconSizes[size], className: cn('ld-transition', type === 'checkbox' &&
-                    'border-2 rounded-[5px] border-mono300 p-[3px]', type === 'checkbox' && checked && 'bg-lb500 border-lb500', type === 'checkbox' && disabled && 'bg-mono100 border-mono100', 'peer-focus-visible:ring-2 peer-focus-visible:ring-lb500 peer-focus-visible:ring-offset-2'), iconClassName: cn('shrink-0 ld-transition', type === 'checkbox'
+    return (_jsxs(_Fragment, { children: [_jsx(CheckboxBase.HiddenInput, { ref: ref, ...props }), _jsx(CheckboxBase.Indicator, { iconSize: type === 'checkbox' ? checkboxIconSizes[size] : checkIconSizes[size], className: cn('ld-transition', type === 'checkbox' &&
+                    'border-none outline-2 rounded-[5px] -outline-offset-2 outline-mono300 p-1', type === 'checkbox' && checked && 'bg-lb500 outline-lb500', type === 'checkbox' && disabled && 'bg-mono100 outline-mono100', 'peer-focus-visible:ring-2 peer-focus-visible:ring-lb500 peer-focus-visible:ring-offset-2'), iconClassName: cn('shrink-0 ld-transition', type === 'checkbox'
                     ? checked
                         ? 'text-white'
                         : 'text-transparent'
@@ -27,10 +85,10 @@ const DefaultInner = ({ type, size, label, isRequired, ref, ...props }) => {
                         ? 'text-blue400'
                         : 'text-neutral500') }), isRequired && (_jsx(CheckboxBase.Label, { className: cn('text-blue400 shrink-0 block', labelHeight[size]), children: "\uD544\uC218" })), label && (_jsx(CheckboxBase.Label, { className: cn('text-neutral900 block', labelHeight[size]), children: label }))] }));
 };
-const LDCheckbox = ({ checked, defaultChecked, onCheckedChange, onChange, size = 'small', fontSize = 'small', label, isRequired = false, type = 'default', itemCenter = false, disabled = false, className, style, ref, ...props }) => {
+const LDCheckbox = ({ checked, defaultChecked, onCheckedChange, onChange, size = 'small', label, isRequired = false, type = 'default', itemCenter = false, disabled = false, className, style, ref, ...props }) => {
     if (type === 'pill') {
-        return (_jsx(CheckboxBase.Root, { checked: checked, defaultChecked: defaultChecked, onCheckedChange: onCheckedChange, disabled: disabled, style: style, className: (c) => cn('items-center gap-2 rounded-full py-sm px-[15px] ld-transition display14 bold', c ? 'bg-tintBlue text-lb500' : 'bg-mono100 text-mono500', disabled && 'opacity-50 cursor-not-allowed', className), children: _jsx(PillInner, { label: label, ref: ref, onChange: onChange, ...props }) }));
+        return (_jsx(CheckboxBase.Root, { checked: checked, defaultChecked: defaultChecked, onCheckedChange: onCheckedChange, disabled: disabled, style: style, className: (c) => cn('items-center gap-2 rounded-full ld-transition bold', pillSizeClasses[size], c ? 'bg-tintBlue text-lb500' : 'bg-mono100 text-mono500', disabled && 'opacity-50 cursor-not-allowed', className), children: _jsx(PillInner, { size: size, label: label, ref: ref, onChange: onChange, ...props }) }));
     }
-    return (_jsx(CheckboxBase.Root, { checked: checked, defaultChecked: defaultChecked, onCheckedChange: onCheckedChange, disabled: disabled, style: style, className: cn('bold items-start ld-transition', itemCenter && 'items-center', labelSizeClasses[fontSize], className), children: _jsx(DefaultInner, { type: type, size: size, label: label, isRequired: isRequired, ref: ref, onChange: onChange, ...props }) }));
+    return (_jsx(CheckboxBase.Root, { checked: checked, defaultChecked: defaultChecked, onCheckedChange: onCheckedChange, disabled: disabled, style: style, className: cn('bold items-center ld-transition', itemCenter && 'items-center', labelSizeClasses[size], gapClasses[size], className), children: _jsx(DefaultInner, { type: type, size: size, label: label, isRequired: isRequired, ref: ref, onChange: onChange, ...props }) }));
 };
 export default LDCheckbox;

package/dist/components/LDCheckbox/LDCheckboxGroup.d.ts

@@ -1,4 +1,5 @@
 import type React from 'react';
+import { type CheckboxSize } from './LDCheckbox.js';
 export interface CheckboxGroupOption {
     label: string;
     value: string;
@@ -11,12 +12,11 @@ export interface LDCheckboxGroupProps {
     onChange?: (value: string[]) => void;
     disabled?: boolean;
     type?: 'default' | 'checkbox' | 'pill';
-    size?: 'small';
-    fontSize?: 'small' | 'regular';
+    size?: CheckboxSize;
     orientation?: 'horizontal' | 'vertical';
     className?: string;
     style?: React.CSSProperties;
 }
-declare const LDCheckboxGroup: ({ items, value, onChange, disabled, type, size, fontSize, orientation, className, style, }: LDCheckboxGroupProps) => import("react/jsx-runtime").JSX.Element;
+declare const LDCheckboxGroup: ({ items, value, onChange, disabled, type, size, orientation, className, style, }: LDCheckboxGroupProps) => import("react/jsx-runtime").JSX.Element;
 export default LDCheckboxGroup;
 //# sourceMappingURL=LDCheckboxGroup.d.ts.map

package/dist/components/LDCheckbox/LDCheckboxGroup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LDCheckboxGroup.d.ts","sourceRoot":"","sources":["../../../src/components/LDCheckbox/LDCheckboxGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAGD,MAAM,WAAW,oBAAoB;IACnC,KAAK,EAAE,mBAAmB,EAAE,CAAC;IAC7B,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,MAAM,CAAC;IACvC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC/B,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAED,QAAA,MAAM,eAAe,GAAI,4FAWtB,oBAAoB,4CA+BtB,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"LDCheckboxGroup.d.ts","sourceRoot":"","sources":["../../../src/components/LDCheckbox/LDCheckboxGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAmB,EAAE,KAAK,YAAY,EAAE,MAAM,cAAc,CAAC;AAI7D,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAaD,MAAM,WAAW,oBAAoB;IACnC,KAAK,EAAE,mBAAmB,EAAE,CAAC;IAC7B,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,MAAM,CAAC;IACvC,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAED,QAAA,MAAM,eAAe,GAAI,kFAUtB,oBAAoB,4CA+BtB,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/dist/components/LDCheckbox/LDCheckboxGroup.js

@@ -1,13 +1,22 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import LDCheckbox from './LDCheckbox.js';
 import cn from '../../utils/cn.js';
-const LDCheckboxGroup = ({ items, value = [], onChange, disabled = false, type = 'pill', size = 'small', fontSize = 'small', orientation = 'horizontal', className, style, }) => {
+// 아이템 간 간격을 사이즈별로 확장 (수평/수직 공통, LDRadioGroup과 동일 스케일)
+const groupGapClasses = {
+    '2xsmall': 'gap-xs',
+    xsmall: 'gap-xs',
+    small: 'gap-sm',
+    medium: 'gap-md',
+    large: 'gap-md',
+    xlarge: 'gap-lg',
+};
+const LDCheckboxGroup = ({ items, value = [], onChange, disabled = false, type = 'pill', size = 'small', orientation = 'horizontal', className, style, }) => {
     const handleChange = (target) => {
         const arr = value.includes(target)
             ? value.filter((v) => v !== target)
             : [...value, target];
         onChange?.(arr);
     };
-    return (_jsx("div", { className: cn('flex gap-2.5', orientation === 'vertical' ? 'flex-col' : 'flex-row', className), style: style, children: items.map((option) => (_jsx(LDCheckbox, { type: type, size: size, fontSize: fontSize, checked: value.includes(option.value), onCheckedChange: () => handleChange(option.value), label: option.label, disabled: disabled || option.disabled }, option.value))) }));
+    return (_jsx("div", { className: cn('flex', groupGapClasses[size], orientation === 'vertical' ? 'flex-col' : 'flex-row', className), style: style, children: items.map((option) => (_jsx(LDCheckbox, { type: type, size: size, checked: value.includes(option.value), onCheckedChange: () => handleChange(option.value), label: option.label, disabled: disabled || option.disabled }, option.value))) }));
 };
 export default LDCheckboxGroup;

package/dist/components/LDCheckbox/LDFormCheckbox.d.ts

@@ -0,0 +1,12 @@
+import { type Ref } from 'react';
+import { type RegisterOptions } from 'react-hook-form';
+import { type LDCheckboxProps } from './LDCheckbox.js';
+interface LDFormCheckboxProps extends Omit<LDCheckboxProps, 'checked' | 'name' | 'onCheckedChange'> {
+    name: string;
+    options?: RegisterOptions;
+    ref?: Ref<HTMLInputElement>;
+    customErrorMessage?: string;
+}
+declare const LDFormCheckbox: ({ name, options, ref, customErrorMessage, disabled, ...props }: LDFormCheckboxProps) => import("react/jsx-runtime").JSX.Element;
+export default LDFormCheckbox;
+//# sourceMappingURL=LDFormCheckbox.d.ts.map

package/dist/components/LDCheckbox/LDFormCheckbox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LDFormCheckbox.d.ts","sourceRoot":"","sources":["../../../src/components/LDCheckbox/LDFormCheckbox.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,GAAG,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,iBAAiB,CAAC;AACvD,OAAmB,EAAE,KAAK,eAAe,EAAE,MAAM,cAAc,CAAC;AAGhE,UAAU,mBAAoB,SAAQ,IAAI,CACxC,eAAe,EACf,SAAS,GAAG,MAAM,GAAG,iBAAiB,CACvC;IACC,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAC5B,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED,QAAA,MAAM,cAAc,GAAI,gEAOrB,mBAAmB,4CAqBrB,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/components/LDCheckbox/LDFormCheckbox.js

@@ -0,0 +1,8 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import LDCheckbox from './LDCheckbox.js';
+import FormField from '../LDForm/LDFormField.js';
+const LDFormCheckbox = ({ name, options, ref, customErrorMessage = '', disabled = false, ...props }) => {
+    return (_jsx(FormField, { name: name, options: options, customErrorMessage: customErrorMessage, disabled: disabled, ref: ref, children: ({ field }) => (_jsx(LDCheckbox, { ...props, checked: !!field.value, onCheckedChange: field.onChange, onBlur: field.onBlur, disabled: disabled, ref: field.ref })) }));
+};
+export default LDFormCheckbox;

package/dist/components/LDCheckbox/LDFormCheckboxGroup.d.ts

@@ -0,0 +1,11 @@
+import { type RegisterOptions } from 'react-hook-form';
+import { type LDCheckboxGroupProps } from './LDCheckboxGroup.js';
+interface LDFormCheckboxGroupProps extends Omit<LDCheckboxGroupProps, 'value' | 'onChange'> {
+    name: string;
+    options?: RegisterOptions;
+    customErrorMessage?: string;
+    disabled?: boolean;
+}
+declare const LDFormCheckboxGroup: ({ name, options, customErrorMessage, disabled, ...props }: LDFormCheckboxGroupProps) => import("react/jsx-runtime").JSX.Element;
+export default LDFormCheckboxGroup;
+//# sourceMappingURL=LDFormCheckboxGroup.d.ts.map

package/dist/components/LDCheckbox/LDFormCheckboxGroup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LDFormCheckboxGroup.d.ts","sourceRoot":"","sources":["../../../src/components/LDCheckbox/LDFormCheckboxGroup.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,iBAAiB,CAAC;AACvD,OAAwB,EAAE,KAAK,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAG/E,UAAU,wBAAyB,SAAQ,IAAI,CAC7C,oBAAoB,EACpB,OAAO,GAAG,UAAU,CACrB;IACC,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,QAAA,MAAM,mBAAmB,GAAI,2DAM1B,wBAAwB,4CAkB1B,CAAC;AAEF,eAAe,mBAAmB,CAAC"}

package/dist/components/LDCheckbox/LDFormCheckboxGroup.js

@@ -0,0 +1,8 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import LDCheckboxGroup from './LDCheckboxGroup.js';
+import FormField from '../LDForm/LDFormField.js';
+const LDFormCheckboxGroup = ({ name, options, customErrorMessage = '', disabled = false, ...props }) => {
+    return (_jsx(FormField, { name: name, options: options, customErrorMessage: customErrorMessage, disabled: disabled, children: ({ field }) => (_jsx(LDCheckboxGroup, { ...props, value: field.value ?? [], onChange: field.onChange, disabled: disabled })) }));
+};
+export default LDFormCheckboxGroup;

package/dist/components/LDDataCalendar/DataCalendarBase.d.ts

@@ -3,6 +3,10 @@ import type { ReactNode } from 'react';
 interface DataCalendarContextType {
     month: Dayjs;
     changeMonth: (delta: number) => void;
+    /** 선택된 날짜(Dayjs). 셀 선택 비교·Detail 슬롯 전달용. 선택 없음이면 undefined */
+    selectedDate?: Dayjs;
+    /** 셀 클릭 시 호출. selectable=false면 undefined(표시 전용) */
+    selectDate?: (date: Dayjs) => void;
 }
 export declare const useDataCalendarContext: () => DataCalendarContextType;
 interface RootProps {
@@ -10,6 +14,12 @@ interface RootProps {
     className?: string;
     defaultMonth?: Dayjs;
     onMonthChange?: (month: Dayjs) => void;
+    /** true면 셀 클릭으로 날짜 선택 가능(기본 false, 표시 전용) */
+    selectable?: boolean;
+    /** 초기 선택 날짜 */
+    defaultSelectedDate?: Dayjs;
+    /** 선택 변경 시 호출 */
+    onSelectDate?: (date: Dayjs) => void;
 }
 interface TitleProps {
     className?: string;
@@ -33,13 +43,19 @@ interface CellProps {
     className?: string;
     dateClassName?: string;
 }
+interface DetailProps {
+    /** 선택된 날짜(선택 없으면 null)를 받아 상세 내용을 렌더 */
+    children: (selectedDate: Dayjs | null) => ReactNode;
+    className?: string;
+}
 declare const DataCalendarBase: {
-    Root: ({ children, className, defaultMonth, onMonthChange, }: RootProps) => import("react/jsx-runtime").JSX.Element;
+    Root: ({ children, className, defaultMonth, onMonthChange, selectable, defaultSelectedDate, onSelectDate, }: RootProps) => import("react/jsx-runtime").JSX.Element;
     Title: ({ className, format }: TitleProps) => import("react/jsx-runtime").JSX.Element;
     Prev: ({ children, className }: NavButtonProps) => import("react/jsx-runtime").JSX.Element;
     Next: ({ children, className }: NavButtonProps) => import("react/jsx-runtime").JSX.Element;
     Grid: ({ renderCell, weekdays, className, weekdayClassName, }: GridProps) => import("react/jsx-runtime").JSX.Element;
     Cell: ({ date, isOutside, children, className, dateClassName, }: CellProps) => import("react/jsx-runtime").JSX.Element;
+    Detail: ({ children, className }: DetailProps) => import("react/jsx-runtime").JSX.Element;
 };
 export default DataCalendarBase;
 //# sourceMappingURL=DataCalendarBase.d.ts.map

package/dist/components/LDDataCalendar/DataCalendarBase.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DataCalendarBase.d.ts","sourceRoot":"","sources":["../../../src/components/LDDataCalendar/DataCalendarBase.tsx"],"names":[],"mappings":"AAEA,OAAc,EAAE,KAAK,KAAK,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC,UAAU,uBAAuB;IAC/B,KAAK,EAAE,KAAK,CAAC;IACb,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACtC;AAID,eAAO,MAAM,sBAAsB,+BAOlC,CAAC;AAIF,UAAU,SAAS;IACjB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,KAAK,CAAC;IACrB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;CACxC;AA2BD,UAAU,UAAU;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AASD,UAAU,cAAc;IACtB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAwBD,UAAU,SAAS;IACjB,UAAU,EAAE,CAAC,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,KAAK,SAAS,CAAC;IAC1E,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAgDD,UAAU,SAAS;IACjB,IAAI,EAAE,KAAK,CAAC;IACZ,uCAAuC;IACvC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AA6BD,QAAA,MAAM,gBAAgB;kEApJnB,SAAS;mCAyBuC,UAAU;oCAYtB,cAAc;oCASd,cAAc;mEAyBlD,SAAS;qEAwDT,SAAS;CAqBoD,CAAC;AAEjE,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"DataCalendarBase.d.ts","sourceRoot":"","sources":["../../../src/components/LDDataCalendar/DataCalendarBase.tsx"],"names":[],"mappings":"AAEA,OAAc,EAAE,KAAK,KAAK,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,KAAK,EAAiB,SAAS,EAAE,MAAM,OAAO,CAAC;AAItD,UAAU,uBAAuB;IAC/B,KAAK,EAAE,KAAK,CAAC;IACb,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,8DAA8D;IAC9D,YAAY,CAAC,EAAE,KAAK,CAAC;IACrB,oDAAoD;IACpD,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,KAAK,KAAK,IAAI,CAAC;CACpC;AAID,eAAO,MAAM,sBAAsB,+BAOlC,CAAC;AAIF,UAAU,SAAS;IACjB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,KAAK,CAAC;IACrB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IACvC,6CAA6C;IAC7C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,eAAe;IACf,mBAAmB,CAAC,EAAE,KAAK,CAAC;IAC5B,iBAAiB;IACjB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,KAAK,KAAK,IAAI,CAAC;CACtC;AA6CD,UAAU,UAAU;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AASD,UAAU,cAAc;IACtB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAwBD,UAAU,SAAS;IACjB,UAAU,EAAE,CAAC,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,KAAK,SAAS,CAAC;IAC1E,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAgDD,UAAU,SAAS;IACjB,IAAI,EAAE,KAAK,CAAC;IACZ,uCAAuC;IACvC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAoDD,UAAU,WAAW;IACnB,wCAAwC;IACxC,QAAQ,EAAE,CAAC,YAAY,EAAE,KAAK,GAAG,IAAI,KAAK,SAAS,CAAC;IACpD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AASD,QAAA,MAAM,gBAAgB;iHAvMnB,SAAS;mCAwCuC,UAAU;oCAYtB,cAAc;oCASd,cAAc;mEAyBlD,SAAS;qEAwDT,SAAS;sCAkD6B,WAAW;CAOoB,CAAC;AAEzE,eAAe,gBAAgB,CAAC"}

package/dist/components/LDDataCalendar/DataCalendarBase.js

@@ -9,14 +9,24 @@ export const useDataCalendarContext = () => {
         throw new Error('DataCalendarBase 서브컴포넌트는 DataCalendarBase.Root 내부에서 사용해야 합니다.');
     return ctx;
 };
-const Root = ({ children, className, defaultMonth, onMonthChange, }) => {
+const Root = ({ children, className, defaultMonth, onMonthChange, selectable = false, defaultSelectedDate, onSelectDate, }) => {
     const [month, setMonth] = useState((defaultMonth ?? dayjs()).startOf('month'));
+    const [selected, setSelected] = useState(defaultSelectedDate ?? null);
     const changeMonth = (delta) => {
         const next = month.add(delta, 'month');
         setMonth(next);
         onMonthChange?.(next);
     };
-    return (_jsx(DataCalendarContext, { value: { month, changeMonth }, children: _jsx("div", { className: className, children: children }) }));
+    const selectDate = (date) => {
+        setSelected(date);
+        onSelectDate?.(date);
+    };
+    return (_jsx(DataCalendarContext, { value: {
+            month,
+            changeMonth,
+            selectedDate: selected ?? undefined,
+            selectDate: selectable ? selectDate : undefined,
+        }, children: _jsx("div", { className: className, children: children }) }));
 };
 const Title = ({ className, format = 'YYYY년 M월' }) => {
     const { month } = useDataCalendarContext();
@@ -48,10 +58,30 @@ const Grid = ({ renderCell, weekdays = DEFAULT_WEEKDAYS, className, weekdayClass
     return (_jsxs("div", { className: className, children: [_jsx("div", { className: "grid grid-cols-7", children: weekdays.map((d) => (_jsx("span", { className: weekdayClassName, children: d }, d))) }), _jsx("div", { className: "grid grid-cols-7", children: cells.map((date, i) => renderCell(date, i, !date.isSame(month, 'month'))) })] }));
 };
 const Cell = ({ date, isOutside, children, className, dateClassName, }) => {
+    const { selectedDate, selectDate } = useDataCalendarContext();
     const isToday = date.isSame(dayjs(), 'day');
     const isWeekend = date.day() === 0 || date.day() === 6;
-    return (_jsxs("div", { className: className, "data-outside": isOutside || undefined, children: [_jsx("span", { "data-today": isToday || undefined, "data-outside": isOutside || undefined, "data-weekend": isWeekend || undefined, className: dateClassName, children: date.date() }), children] }));
+    const clickable = !!selectDate && !isOutside;
+    const isSelected = !!selectedDate && selectedDate.isSame(date, 'day');
+    const handleSelect = () => selectDate?.(date);
+    return (_jsxs("div", { className: className, "data-outside": isOutside || undefined, "data-selectable": clickable || undefined, "data-selected": (clickable && isSelected) || undefined, ...(clickable
+            ? {
+                role: 'button',
+                tabIndex: 0,
+                onClick: handleSelect,
+                onKeyDown: (e) => {
+                    if (e.key === 'Enter' || e.key === ' ') {
+                        e.preventDefault();
+                        handleSelect();
+                    }
+                },
+            }
+            : {}), children: [_jsx("span", { "data-today": isToday || undefined, "data-outside": isOutside || undefined, "data-weekend": isWeekend || undefined, className: dateClassName, children: date.date() }), children] }));
+};
+const Detail = ({ children, className }) => {
+    const { selectedDate } = useDataCalendarContext();
+    return _jsx("div", { className: className, children: children(selectedDate ?? null) });
 };
 // ── Export ──
-const DataCalendarBase = { Root, Title, Prev, Next, Grid, Cell };
+const DataCalendarBase = { Root, Title, Prev, Next, Grid, Cell, Detail };
 export default DataCalendarBase;