@loword/loword-design-system 0.0.10 → 0.0.13

package/dist/components/LDAccordion/AccordionBase.d.ts

@@ -0,0 +1,41 @@
+import { type ReactNode } from 'react';
+type RootProps = {
+    type: 'single';
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    collapsible?: boolean;
+    disabled?: boolean;
+    className?: string;
+    children?: ReactNode;
+} | {
+    type: 'multiple';
+    value?: string[];
+    defaultValue?: string[];
+    onValueChange?: (value: string[]) => void;
+    disabled?: boolean;
+    className?: string;
+    children?: ReactNode;
+};
+interface ItemProps {
+    value: string;
+    disabled?: boolean;
+    className?: string;
+    children?: ReactNode;
+}
+interface TriggerProps {
+    className?: string;
+    children?: ReactNode;
+}
+interface ContentProps {
+    className?: string;
+    children?: ReactNode;
+}
+export declare const AccordionBase: {
+    Root: ({ className, children, ...props }: RootProps) => import("react/jsx-runtime").JSX.Element;
+    Item: ({ value, disabled, className, children }: ItemProps) => import("react/jsx-runtime").JSX.Element;
+    Trigger: ({ className, children }: TriggerProps) => import("react/jsx-runtime").JSX.Element;
+    Content: ({ className, children }: ContentProps) => import("react/jsx-runtime").JSX.Element;
+};
+export default AccordionBase;
+//# sourceMappingURL=AccordionBase.d.ts.map

package/dist/components/LDAccordion/AccordionBase.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccordionBase.d.ts","sourceRoot":"","sources":["../../../src/components/LDAccordion/AccordionBase.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAKvC,KAAK,SAAS,GACV;IACE,IAAI,EAAE,QAAQ,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,GACD;IACE,IAAI,EAAE,UAAU,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAC1C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC;AAeN,UAAU,SAAS;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAeD,UAAU,YAAY;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAkBD,UAAU,YAAY;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAgBD,eAAO,MAAM,aAAa;8CAzEuB,SAAS;qDAoBF,SAAS;uCAkBvB,YAAY;uCAqBZ,YAAY;CAmBrD,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/dist/components/LDAccordion/AccordionBase.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as RadixAccordion from '@radix-ui/react-accordion';
+import cn from '../../utils/cn.js';
+const Root = ({ className, children, ...props }) => {
+    return (
+    // Radix의 single/multiple 판별 유니온을 그대로 위임한다.
+    _jsx(RadixAccordion.Root, { ...props, className: cn('w-full', className), children: children }));
+};
+const Item = ({ value, disabled, className, children }) => {
+    return (_jsx(RadixAccordion.Item, { value: value, disabled: disabled, className: className, children: children }));
+};
+const Trigger = ({ className, children }) => {
+    return (_jsx(RadixAccordion.Header, { className: "flex", children: _jsx(RadixAccordion.Trigger, { className: cn('flex w-full items-center justify-between cursor-pointer disabled:cursor-not-allowed', className), children: children }) }));
+};
+const Content = ({ className, children }) => {
+    return (_jsx(RadixAccordion.Content, { className: cn('overflow-hidden', 'data-[state=open]:accordion-down data-[state=closed]:accordion-up', className), children: children }));
+};
+export const AccordionBase = {
+    Root,
+    Item,
+    Trigger,
+    Content,
+};
+export default AccordionBase;

package/dist/components/LDAccordion/LDAccordion.d.ts

@@ -0,0 +1,31 @@
+import { type ReactNode } from 'react';
+/** 아코디언 개별 항목 */
+export interface LDAccordionItem {
+    /** 항목을 구분하는 고유 값 */
+    value: string;
+    /** 헤더에 표시할 제목 */
+    title: ReactNode;
+    /** 펼쳤을 때 표시할 내용 */
+    content: ReactNode;
+    /** 이 항목만 비활성화 */
+    disabled?: boolean;
+}
+export interface LDAccordionProps {
+    /** 아코디언에 표시할 항목 목록 */
+    items: LDAccordionItem[];
+    /** 'single'(한 번에 하나) | 'multiple'(여러 개 동시 열림). 기본 'single' */
+    type?: 'single' | 'multiple';
+    /** 초기 열림 값 (uncontrolled) */
+    defaultValue?: string | string[];
+    /** 열림 값 (controlled) */
+    value?: string | string[];
+    /** 열림 값 변경 콜백 */
+    onValueChange?: (value: string | string[]) => void;
+    /** single일 때 열린 항목을 다시 닫아 전체 닫힘 허용. 기본 true */
+    collapsible?: boolean;
+    /** 루트 컨테이너 className */
+    className?: string;
+}
+declare const LDAccordion: ({ items, type, defaultValue, value, onValueChange, collapsible, className, }: LDAccordionProps) => import("react/jsx-runtime").JSX.Element;
+export default LDAccordion;
+//# sourceMappingURL=LDAccordion.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LDAccordion.d.ts","sourceRoot":"","sources":["../../../src/components/LDAccordion/LDAccordion.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAKvC,iBAAiB;AACjB,MAAM,WAAW,eAAe;IAC9B,oBAAoB;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,iBAAiB;IACjB,KAAK,EAAE,SAAS,CAAC;IACjB,mBAAmB;IACnB,OAAO,EAAE,SAAS,CAAC;IACnB,iBAAiB;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,gBAAgB;IAC/B,sBAAsB;IACtB,KAAK,EAAE,eAAe,EAAE,CAAC;IACzB,8DAA8D;IAC9D,IAAI,CAAC,EAAE,QAAQ,GAAG,UAAU,CAAC;IAC7B,6BAA6B;IAC7B,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IACjC,wBAAwB;IACxB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC1B,iBAAiB;IACjB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,KAAK,IAAI,CAAC;IACnD,+CAA+C;IAC/C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,wBAAwB;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,QAAA,MAAM,WAAW,GAAI,8EAQlB,gBAAgB,4CA2DlB,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/components/LDAccordion/LDAccordion.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronDown, ChevronUp } from 'lucide-react';
+import AccordionBase from './AccordionBase.js';
+import cn from '../../utils/cn.js';
+const LDAccordion = ({ items, type = 'single', defaultValue, value, onValueChange, collapsible = true, className, }) => {
+    // single/multiple 유니온을 Base로 넘기기 위해 공통 props를 한 번에 캐스팅한다.
+    const rootProps = {
+        type,
+        defaultValue,
+        value,
+        onValueChange,
+        ...(type === 'single' ? { collapsible } : {}),
+    };
+    return (_jsx(AccordionBase.Root, { ...rootProps, className: cn('flex flex-col gap-2.5', className), children: items.map((item) => {
+            // content가 없으면(nullish/false) 펼칠 게 없으므로 chevron·Content를 렌더하지 않는다.
+            // (헤더 트리거 자체는 그대로 유지)
+            const hasContent = item.content != null && item.content !== false;
+            return (_jsxs(AccordionBase.Item, { value: item.value, disabled: item.disabled, className: cn(item.disabled && 'opacity-40'), children: [_jsxs(AccordionBase.Trigger, { className: "group text-neutral900 display16 bold text-left", children: [item.title, hasContent && (_jsxs("div", { className: "relative size-5 text-neutral500", children: [_jsx(ChevronDown, { className: cn('absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2', 'group-data-[state=open]:animate-fade-in', 'group-data-[state=closed]:animate-fade-out'), "aria-hidden": true }), _jsx(ChevronUp, { className: cn('absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2', 'group-data-[state=open]:animate-fade-out', 'group-data-[state=closed]:animate-fade-in'), "aria-hidden": true })] }))] }), hasContent && (_jsx(AccordionBase.Content, { className: "text-neutral700 display14", children: _jsx("div", { className: "pl-5 pt-2.5", children: item.content }) }))] }, item.value));
+        }) }));
+};
+export default LDAccordion;

package/dist/components/LDAutoComplete/AutoCompleteBase.js

@@ -13,12 +13,12 @@ const useAutoCompleteContext = () => {
     return autoCompeleteContext;
 };
 const autoCompleteSizeClasses = {
-    xSmall: 'autocomplete-2xs',
-    small: 'autocomplete-xs',
-    medium: 'autocomplete-sm',
-    large: 'autocomplete-md',
-    big: 'autocomplete-lg',
-    xLarge: 'autocomplete-xl',
+    '2xsmall': 'autocomplete-2xs',
+    xsmall: 'autocomplete-xs',
+    small: 'autocomplete-sm',
+    medium: 'autocomplete-md',
+    large: 'autocomplete-lg',
+    xlarge: 'autocomplete-xl',
 };
 const Root = ({ displayField, subFields, onSelectedItem, onChange, className, children, ref, }) => {
     const [query, setQuery] = useState('');

package/dist/components/LDAvatar/LDAvatar.d.ts

@@ -1,4 +1,4 @@
-type AvatarSize = 'sm' | 'md' | 'lg';
+type AvatarSize = '2xsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
 export interface LDAvatarProps {
     src?: string | null;
     alt?: string;

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

@@ -1 +1 @@
-{"version":3,"file":"LDAvatar.d.ts","sourceRoot":"","sources":["../../../src/components/LDAvatar/LDAvatar.tsx"],"names":[],"mappings":"AAKA,KAAK,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAqBrC,MAAM,WAAW,aAAa;IAC5B,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACpB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAED,QAAA,MAAM,QAAQ,GAAI,uCAMf,aAAa,4CAef,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"LDAvatar.d.ts","sourceRoot":"","sources":["../../../src/components/LDAvatar/LDAvatar.tsx"],"names":[],"mappings":"AAKA,KAAK,UAAU,GACX,SAAS,GACT,QAAQ,GACR,OAAO,GACP,QAAQ,GACR,OAAO,GACP,QAAQ,CAAC;AA8Bb,MAAM,WAAW,aAAa;IAC5B,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACpB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAED,QAAA,MAAM,QAAQ,GAAI,uCAMf,aAAa,4CAef,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/dist/components/LDAvatar/LDAvatar.js

@@ -3,21 +3,30 @@ import { UserRound } from 'lucide-react';
 import AvatarBase from './AvatarBase.js';
 import cn from '../../utils/cn.js';
 const SIZE_MAP = {
-    sm: 'w-8 h-8',
-    md: 'w-12 h-12',
-    lg: 'w-16 h-16',
+    '2xsmall': 'w-2 h-2',
+    xsmall: 'w-4 h-4',
+    small: 'w-6 h-6',
+    medium: 'w-8 h-8',
+    large: 'w-12 h-12',
+    xlarge: 'w-16 h-16',
 };
 const IMAGE_SIZE_MAP = {
-    sm: 32,
-    md: 48,
-    lg: 64,
+    '2xsmall': 8,
+    xsmall: 16,
+    small: 24,
+    medium: 32,
+    large: 48,
+    xlarge: 64,
 };
 const ICON_SIZE_MAP = {
-    sm: 24,
-    md: 32,
-    lg: 40,
+    '2xsmall': 5,
+    xsmall: 10,
+    small: 15,
+    medium: 20,
+    large: 30,
+    xlarge: 40,
 };
-const LDAvatar = ({ src, alt = 'avatar', size = 'sm', className, style, }) => {
+const LDAvatar = ({ src, alt = 'avatar', size = 'small', className, style, }) => {
     const px = IMAGE_SIZE_MAP[size];
     return (_jsxs(AvatarBase.Root, { src: src, style: style, className: cn(SIZE_MAP[size], className), children: [_jsx(AvatarBase.Image, { alt: alt, width: px, height: px }), _jsx(AvatarBase.Fallback, { className: "bg-mono100", children: _jsx(UserRound, { size: ICON_SIZE_MAP[size], className: "text-mono400" }) })] }));
 };

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

@@ -1,5 +1,4 @@
 import { type ReactNode } from 'react';
-import { type IconName } from '../Icon/LucideIcon.js';
 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> {
@@ -9,17 +8,17 @@ export interface LDBadgeProps<T extends string> {
     size?: BadgeSize;
     /** type별 색상 매핑 객체 (프리셋 BadgeColor 또는 커스텀 Tailwind 클래스) */
     colorsMap: Record<T, BadgeColor | string>;
+    /** 왼쪽 아이콘 (ReactNode) */
+    leftIcon?: ReactNode;
+    /** 오른쪽 아이콘 (ReactNode) */
+    rightIcon?: ReactNode;
     /** 뱃지 내용 */
     children?: ReactNode;
-    /** 왼쪽 아이콘 (IconName 또는 ReactNode) */
-    leftIcon?: IconName | ReactNode;
-    /** 오른쪽 아이콘 (IconName 또는 ReactNode) */
-    rightIcon?: IconName | ReactNode;
     /** 추가 CSS 클래스 */
     className?: string;
     /** 인라인 스타일 */
     style?: React.CSSProperties;
 }
-declare const LDBadge: <T extends string>({ type, size, colorsMap, children, leftIcon, rightIcon, className, style, }: LDBadgeProps<T>) => import("react/jsx-runtime").JSX.Element;
+declare const LDBadge: <T extends string>({ type, size, colorsMap, leftIcon, rightIcon, children, className, style, }: LDBadgeProps<T>) => 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;AAEvC,OAAO,EAAE,KAAK,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAInD,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,YAAY;IACZ,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,qCAAqC;IACrC,QAAQ,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IAChC,sCAAsC;IACtC,SAAS,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IACjC,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,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"}

package/dist/components/LDBadge/LDBadge.js

@@ -1,7 +1,7 @@
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import BadgeBase from './BadgeBase.js';
-import { renderIcon } from '../../utils/renderIcon.js';
 import cn from '../../utils/cn.js';
+import { renderIcon } from '../../utils/renderIcon.js';
 const colorClasses = {
     orange: 'bg-tintOrange text-orange500',
     fillOrange: 'bg-orange400 text-white',
@@ -28,7 +28,7 @@ const iconSizes = {
     medium: 'icon-md',
     large: 'icon-lg',
 };
-const LDBadge = ({ type, size = 'small', colorsMap, children, leftIcon, rightIcon, className, style, }) => {
+const LDBadge = ({ type, size = 'small', colorsMap, leftIcon, rightIcon, children, className, style, }) => {
     const color = colorsMap[type];
     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/LDBreadCrumb/LDBreadCrumb.d.ts

@@ -1,10 +1,9 @@
 import { type ReactNode } from 'react';
 import { type ButtonSize } from '../LDButton/LDButton.js';
-import { type IconName } from '../Icon/LucideIcon.js';
 export interface LDBreadCrumbItem {
     label: string;
     href?: string;
-    icon?: IconName | ReactNode;
+    icon?: ReactNode;
 }
 export interface LDBreadCrumbProps {
     items: LDBreadCrumbItem[];

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

@@ -1 +1 @@
-{"version":3,"file":"LDBreadCrumb.d.ts","sourceRoot":"","sources":["../../../src/components/LDBreadCrumb/LDBreadCrumb.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAiB,EAAE,KAAK,UAAU,EAAE,MAAM,sBAAsB,CAAC;AACjE,OAAO,EAAE,KAAK,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAInD,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;CAC7B;AAED,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,gBAAgB,EAAE,CAAC;IAC1B,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AA6BD,QAAA,MAAM,YAAY,GAAI,wCAKnB,iBAAiB,4CAiDnB,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"LDBreadCrumb.d.ts","sourceRoot":"","sources":["../../../src/components/LDBreadCrumb/LDBreadCrumb.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAiB,EAAE,KAAK,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAIjE,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB;AAED,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,gBAAgB,EAAE,CAAC;IAC1B,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AA6BD,QAAA,MAAM,YAAY,GAAI,wCAKnB,iBAAiB,4CAiDnB,CAAC;AAEF,eAAe,YAAY,CAAC"}

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

@@ -1,12 +1,12 @@
 import * as React from 'react';
 import { type ElementType } from 'react';
 import { PolymorphicComponentProps } from '../../types/polymorphic.js';
-import { type IconName } from '../Icon/LucideIcon.js';
 type ButtonVariant = 'solid' | 'outline' | 'ghost' | 'link';
 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;
@@ -15,8 +15,8 @@ type _ButtonProps = {
     align?: ButtonAlign;
     loading?: boolean;
     block?: boolean;
-    leftIcon?: IconName | React.ReactNode;
-    rightIcon?: IconName | React.ReactNode;
+    leftIcon?: React.ReactNode;
+    rightIcon?: React.ReactNode;
     compact?: boolean;
     disabled?: boolean;
 };

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;AACpE,OAAO,EAAE,KAAK,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAQnD,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;AAkG/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,QAAQ,GAAG,KAAK,CAAC,SAAS,CAAC;IACtC,SAAS,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAC,SAAS,CAAC;IACvC,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;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;AA6E/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"}

package/dist/components/LDButton/LDButton.js

@@ -11,17 +11,17 @@ const variantBaseClasses = {
         danger: 'bg-danger500 text-white',
     },
     outline: {
-        neutral: 'bg-white outline outline-neutral100 text-neutral500',
+        neutral: 'bg-white outline outline-neutral100 text-neutral900',
         point: 'bg-white outline outline-lb500 text-lb500',
         danger: 'bg-white outline outline-danger500 text-danger500',
     },
     ghost: {
-        neutral: 'bg-transparent text-neutral500',
+        neutral: 'bg-transparent text-neutral900',
         point: 'bg-transparent text-lb500',
         danger: 'bg-transparent text-danger500',
     },
     link: {
-        neutral: 'bg-transparent underline underline-offset-[4px] text-neutral500',
+        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]',
     },
@@ -43,7 +43,7 @@ const variantHoverClasses = {
         danger: 'hover:bg-danger50',
     },
     link: {
-        neutral: 'hover:text-neutral700 active:text-neutral700',
+        neutral: 'hover:text-neutral900 active:text-neutral900',
         point: 'hover:text-lb700 active:text-lb700',
         danger: 'hover:text-danger600 active:text-danger600',
     },
@@ -67,7 +67,7 @@ const sizeClasses = {
     large: 'btn-lg',
     xlarge: 'btn-xl',
 };
-const iconSizeClasses = {
+export const iconSizeClasses = {
     '2xsmall': 'icon-2xs',
     xsmall: 'icon-xs',
     small: 'icon-sm',

package/dist/components/LDCalendar/CalendarBase.d.ts

@@ -0,0 +1,17 @@
+import { type DayPickerProps, type Matcher } from 'react-day-picker';
+import { type CSSProperties } from 'react';
+/** react-day-picker의 DayPickerProps를 확장한 캘린더 Base props */
+export type CalendarBaseProps = DayPickerProps & {
+    className?: string;
+    style?: CSSProperties;
+    booked?: Matcher | Matcher[];
+    book?: Matcher | Matcher[];
+};
+/**
+ * CalendarBase — react-day-picker 래핑 레이어. 구조·동작·접근성만 담당한다.
+ * (component 오버라이드, booked/book 모디파이어 배선, formatters, 날짜 범위, 포커스 관리)
+ * 시각 스타일은 Custom 레이어(LDCalendar)가 `className`/`classNames`로 주입한다.
+ */
+declare const CalendarBase: ({ className, style, classNames, captionLayout, formatters, components, book, booked, modifiers, showOutsideDays, ...props }: CalendarBaseProps) => import("react/jsx-runtime").JSX.Element;
+export default CalendarBase;
+//# sourceMappingURL=CalendarBase.d.ts.map

package/dist/components/LDCalendar/CalendarBase.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CalendarBase.d.ts","sourceRoot":"","sources":["../../../src/components/LDCalendar/CalendarBase.tsx"],"names":[],"mappings":"AAEA,OAAO,EAIL,KAAK,cAAc,EACnB,KAAK,OAAO,EACb,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EACL,KAAK,aAAa,EAInB,MAAM,OAAO,CAAC;AAIf,2DAA2D;AAC3D,MAAM,MAAM,iBAAiB,GAAG,cAAc,GAAG;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,MAAM,CAAC,EAAE,OAAO,GAAG,OAAO,EAAE,CAAC;IAC7B,IAAI,CAAC,EAAE,OAAO,GAAG,OAAO,EAAE,CAAC;CAC5B,CAAC;AAEF;;;;GAIG;AACH,QAAA,MAAM,YAAY,GAAI,6HAYnB,iBAAiB,4CAmDnB,CAAC;AA0EF,eAAe,YAAY,CAAC"}

package/dist/components/LDCalendar/CalendarBase.js

@@ -0,0 +1,49 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { DayPicker, getDefaultClassNames, } from 'react-day-picker';
+import { useRef, useEffect, } from 'react';
+import cn from '../../utils/cn.js';
+import { ChevronDown, ChevronLeft, ChevronRight } from 'lucide-react';
+/**
+ * CalendarBase — react-day-picker 래핑 레이어. 구조·동작·접근성만 담당한다.
+ * (component 오버라이드, booked/book 모디파이어 배선, formatters, 날짜 범위, 포커스 관리)
+ * 시각 스타일은 Custom 레이어(LDCalendar)가 `className`/`classNames`로 주입한다.
+ */
+const CalendarBase = ({ className, style, classNames, captionLayout = 'label', formatters, components, book, booked, modifiers, showOutsideDays = true, ...props }) => {
+    return (_jsx(DayPicker, { showOutsideDays: showOutsideDays, startMonth: new Date(1900, 0), endMonth: new Date(new Date().getFullYear() + 10, 11), style: style, className: className, captionLayout: captionLayout, formatters: {
+            formatMonthDropdown: (date) => date.toLocaleString('default', { month: 'short' }),
+            ...formatters,
+        }, classNames: classNames, modifiers: {
+            booked,
+            book,
+            ...modifiers,
+        }, components: {
+            Root: ({ className: rootClassName, rootRef, ...rootProps }) => (_jsx("div", { "data-slot": "calendar", ref: rootRef, className: cn(rootClassName), ...rootProps })),
+            Chevron: ({ className: chevronClassName, orientation }) => {
+                return orientation === 'left' ? (_jsx(ChevronLeft, { className: cn('size-4', chevronClassName) })) : orientation === 'right' ? (_jsx(ChevronRight, { className: cn('size-4', chevronClassName) })) : (_jsx(ChevronDown, { className: cn('size-4', chevronClassName) }));
+            },
+            DayButton: CalendarDayButton,
+            WeekNumber: ({ children, ...weekNumberProps }) => (_jsx("td", { ...weekNumberProps, children: _jsx("div", { className: "flex size-(--cell-size) items-center justify-center text-center", children: children }) })),
+            ...components,
+        }, ...props }));
+};
+/** 날짜 셀 버튼 — 구조 + 접근성(data-속성, 포커스 관리) + book/booked 표시 요소 */
+const CalendarDayButton = ({ className: btnClassName, day, modifiers, ...btnProps }) => {
+    const defaultClassNames = getDefaultClassNames();
+    const ref = useRef(null);
+    useEffect(() => {
+        if (modifiers.focused)
+            ref.current?.focus();
+    }, [modifiers.focused]);
+    return (_jsxs("button", { ref: ref, type: "button", "data-day": day.date.toLocaleDateString(), "data-selected-single": modifiers.selected &&
+            !modifiers.range_start &&
+            !modifiers.range_end &&
+            !modifiers.range_middle, "data-range-start": modifiers.range_start, "data-range-end": modifiers.range_end, "data-range-middle": modifiers.range_middle, className: cn('relative inline-flex items-center justify-center rounded-lg text-sm font-medium ld-transition outline-none cursor-pointer', 'hover:bg-tintBlue hover:text-lb500', 'flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1', 'leading-none font-normal', 'data-[selected-single=true]:bg-tintBlue data-[selected-single=true]:text-lb500', 'data-[selected-single=true]:animate-day-picker-color-in', 'data-[range-start=true]:bg-tintBlue data-[range-start=true]:text-lb500', 'data-[range-start=true]:animate-day-picker-color-in', 'data-[range-middle=true]:bg-mono50 data-[range-middle=true]:text-neutral500 data-[range-middle=true]:animate-day-range-picker-color-in', 'data-[range-end=true]:bg-tintBlue data-[range-end=true]:text-lb500', 'data-[range-end=true]:animate-day-picker-color-in', 'group-data-[focused=true]/day:relative', 'group-data-[focused=true]/day:z-10', '', modifiers.range_start &&
+            !modifiers.range_end &&
+            'rounded-l-lg rounded-r-none', modifiers.range_end &&
+            !modifiers.range_start &&
+            'rounded-l-none rounded-r-lg', modifiers.range_middle && 'rounded-none', modifiers.range_start && modifiers.range_end && 'rounded-lg', 
+        // '[&>span]:text-xs [&>span]:opacity-70',
+        defaultClassNames.day, btnClassName), ...btnProps, children: [_jsx("span", { className: cn('relative z-10', modifiers.booked && 'line-through opacity-40 decoration-current'), children: btnProps.children }), modifiers.book && (_jsx("span", { className: "absolute bottom-1 size-1 rounded-full bg-lb500" }))] }));
+};
+export default CalendarBase;

package/dist/components/LDCalendar/LDCalendar.d.ts

@@ -1,16 +1,10 @@
-import { type DayPickerProps, type Matcher } from 'react-day-picker';
-import { type CSSProperties } from 'react';
-/** react-day-picker의 DayPickerProps를 확장한 캘린더 props */
-type LDCalendarProps = DayPickerProps & {
-    /** 추가 CSS 클래스 */
+import { type CalendarBaseProps } from './CalendarBase.js';
+type LDCalendarProps = CalendarBaseProps;
+export declare const TimePicker: ({ value, onChange, className, }: {
+    value?: string;
+    onChange?: (time: string) => void;
     className?: string;
-    /** 인라인 스타일 */
-    style?: CSSProperties;
-    /** 예약 완료된 날짜 (취소선 표시) */
-    booked?: Matcher | Matcher[];
-    /** 예약 가능한 날짜 (아래에 점 표시) */
-    book?: Matcher | Matcher[];
-};
-declare const LDCalendar: ({ className, style, classNames, showOutsideDays, captionLayout, formatters, components, booked, book, modifiers, ...props }: LDCalendarProps) => import("react/jsx-runtime").JSX.Element;
-export default LDCalendar;
+}) => import("react/jsx-runtime").JSX.Element;
+declare const LDCalendarMemo: import("react").MemoExoticComponent<({ className, classNames, captionLayout, ...props }: LDCalendarProps) => import("react/jsx-runtime").JSX.Element>;
+export default LDCalendarMemo;
 //# sourceMappingURL=LDCalendar.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"LDCalendar.d.ts","sourceRoot":"","sources":["../../../src/components/LDCalendar/LDCalendar.tsx"],"names":[],"mappings":"AAEA,OAAO,EAIL,KAAK,cAAc,EACnB,KAAK,OAAO,EACb,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EACL,KAAK,aAAa,EAInB,MAAM,OAAO,CAAC;AAIf,sDAAsD;AACtD,KAAK,eAAe,GAAG,cAAc,GAAG;IACtC,iBAAiB;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc;IACd,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,yBAAyB;IACzB,MAAM,CAAC,EAAE,OAAO,GAAG,OAAO,EAAE,CAAC;IAC7B,2BAA2B;IAC3B,IAAI,CAAC,EAAE,OAAO,GAAG,OAAO,EAAE,CAAC;CAC5B,CAAC;AAEF,QAAA,MAAM,UAAU,GAAI,6HAYjB,eAAe,4CAsJjB,CAAC;AAoEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"LDCalendar.d.ts","sourceRoot":"","sources":["../../../src/components/LDCalendar/LDCalendar.tsx"],"names":[],"mappings":"AAKA,OAAqB,EAAE,KAAK,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAEtE,KAAK,eAAe,GAAG,iBAAiB,CAAC;AA8LzC,eAAO,MAAM,UAAU,GAAI,iCAIxB;IACD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,4CAgEA,CAAC;AAEF,QAAA,MAAM,cAAc,2FAjQjB,eAAe,6CAiQqB,CAAC;AAGxC,eAAe,cAAc,CAAC"}

package/dist/components/LDCalendar/LDCalendar.js

@@ -1,18 +1,14 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { DayPicker, getDefaultClassNames, } from 'react-day-picker';
-import { useRef, useEffect, } from 'react';
-import LucideIcon from '../Icon/LucideIcon.js';
+import { getDefaultClassNames } from 'react-day-picker';
+import { memo, useRef, useEffect, useMemo } from 'react';
 import cn from '../../utils/cn.js';
-const LDCalendar = ({ className, style, classNames, showOutsideDays = true, captionLayout = 'label', formatters, components, booked, book, modifiers, ...props }) => {
-    // 라이브러리가 기본적으로 사용하는 모든 css 클래스 이름을 담고있는 객체
+import CalendarBase from './CalendarBase.js';
+const LDCalendar = ({ className, classNames, captionLayout = 'label', ...props }) => {
     const defaultClassNames = getDefaultClassNames();
-    return (_jsx(DayPicker, { showOutsideDays: showOutsideDays, startMonth: new Date(1900, 0), endMonth: new Date(new Date().getFullYear() + 10, 11), style: style, className: cn('bg-white group/calendar p-3 [--cell-size:--spacing(8)] w-fit', 
+    return (_jsx(CalendarBase, { captionLayout: captionLayout, className: cn('bg-white group/calendar p-sm [--cell-size:--spacing(8)] w-fit', 
         //rtl일때 버튼 아이콘 방향 전환
-        String.raw `rtl:**:[.rdp-button\_next>svg]:rotate-180`, String.raw `rtl:**:[.rdp-button\_previous>svg]:rotate-180`, className), captionLayout: captionLayout, formatters: {
-            formatMonthDropdown: (date) => date.toLocaleString('default', { month: 'short' }),
-            ...formatters,
-        }, classNames: {
+        String.raw `rtl:**:[.rdp-button\_next>svg]:rotate-180`, String.raw `rtl:**:[.rdp-button\_previous>svg]:rotate-180`, className), classNames: {
             root: cn(defaultClassNames.root),
             months: cn('flex gap-4 flex-col md:flex-row relative', defaultClassNames.months),
             month: cn('flex flex-col w-full gap-4', defaultClassNames.month),
@@ -36,40 +32,56 @@ const LDCalendar = ({ className, style, classNames, showOutsideDays = true, capt
             range_start: cn('rounded-l-md bg-neutral-100', defaultClassNames.range_start),
             range_middle: cn('rounded-none', defaultClassNames.range_middle),
             range_end: cn('rounded-r-md bg-neutral-100', defaultClassNames.range_end),
-            today: cn('bg-lb50 text-lb900 rounded-md data-[selected=true]:rounded-none font-semibold', defaultClassNames.today),
+            today: cn('rounded-lg ring-1 ring-inset ring-lb500 hover:ring-0 data-[selected=true]:ring-0', 'data-[range-start=true]:rounded-l-lg data-[range-start=true]:rounded-r-none', 'data-[range-end=true]:rounded-r-lg data-[range-end=true]:rounded-l-none', 'font-semibold', defaultClassNames.today),
             outside: cn('text-neutral-500 aria-selected:text-neutral-500', defaultClassNames.outside),
             disabled: cn('text-neutral-500 opacity-50', defaultClassNames.disabled),
             hidden: cn('invisible', defaultClassNames.hidden),
             ...classNames,
-        }, modifiers: {
-            booked,
-            book,
-            ...modifiers,
-        }, components: {
-            Root: ({ className: rootClassName, rootRef, ...rootProps }) => (_jsx("div", { "data-slot": "calendar", ref: rootRef, className: cn(rootClassName), ...rootProps })),
-            Chevron: ({ className: chevronClassName, orientation }) => {
-                const iconName = orientation === 'left'
-                    ? 'chevronLeft'
-                    : orientation === 'right'
-                        ? 'chevronRight'
-                        : 'chevronDown';
-                return (_jsx(LucideIcon, { name: iconName, className: cn('size-4', chevronClassName) }));
-            },
-            DayButton: CalendarDayButton,
-            WeekNumber: ({ children, ...weekNumberProps }) => (_jsx("td", { ...weekNumberProps, children: _jsx("div", { className: "flex size-(--cell-size) items-center justify-center text-center", children: children }) })),
-            ...components,
         }, ...props }));
 };
-function CalendarDayButton({ className: btnClassName, day, modifiers, ...btnProps }) {
-    const defaultClassNames = getDefaultClassNames();
+const TIME_ITEM_HEIGHT = 32; // NOTE: px, h-8과 동일
+const pad2 = (n) => String(n).padStart(2, '0');
+const HOURS = Array.from({ length: 12 }, (_, i) => (i === 0 ? 12 : i));
+const MINUTES = Array.from({ length: 60 }, (_, i) => i);
+const SECONDS = Array.from({ length: 60 }, (_, i) => i);
+const AMPM = ['am', 'pm'];
+const to24Hour = (hour12, period) => {
+    const base = hour12 % 12; // 12 → 0
+    return period === 'pm' ? base + 12 : base;
+};
+const TimeScrollColumn = ({ values, selected, onSelect, ariaLabel, format = (v) => String(v), className, }) => {
     const ref = useRef(null);
+    const mountRef = useRef(false);
     useEffect(() => {
-        if (modifiers.focused)
-            ref.current?.focus();
-    }, [modifiers.focused]);
-    return (_jsxs("button", { ref: ref, type: "button", "data-day": day.date.toLocaleDateString(), "data-selected-single": modifiers.selected &&
-            !modifiers.range_start &&
-            !modifiers.range_end &&
-            !modifiers.range_middle, "data-range-start": modifiers.range_start, "data-range-end": modifiers.range_end, "data-range-middle": modifiers.range_middle, className: cn('relative inline-flex items-center justify-center rounded-md text-sm font-medium transition-all outline-none cursor-pointer', 'hover:bg-lb50 hover:text-lb900', 'focus-visible:border-lb600 focus-visible:ring-lb600/50 focus-visible:ring-[3px]', 'data-[selected-single=true]:bg-lb600 data-[selected-single=true]:text-white', 'data-[range-middle=true]:bg-lb50 data-[range-middle=true]:text-lb900', 'data-[range-start=true]:bg-lb600 data-[range-start=true]:text-white', 'data-[range-end=true]:bg-lb600 data-[range-end=true]:text-white', 'flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal', 'group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-lb600/50 group-data-[focused=true]/day:ring-[3px]', 'data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md', 'data-[range-middle=true]:rounded-none', 'data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md', '[&>span]:text-xs [&>span]:opacity-70', defaultClassNames.day, btnClassName), ...btnProps, children: [_jsx("span", { className: cn('relative z-10', modifiers.booked && 'line-through opacity-40 decoration-current'), children: btnProps.children }), modifiers.book && (_jsx("span", { className: cn('absolute bottom-1.5 size-1 rounded-full bg-lb600', modifiers.selected && 'bg-white') }))] }));
-}
-export default LDCalendar;
+        const el = ref.current;
+        if (!el)
+            return;
+        const idx = values.indexOf(selected);
+        if (idx < 0)
+            return;
+        const behavior = mountRef.current ? 'smooth' : 'auto';
+        mountRef.current = true;
+        el.scrollTo({
+            top: idx * TIME_ITEM_HEIGHT - (el.clientHeight - TIME_ITEM_HEIGHT) / 2,
+            behavior,
+        });
+    }, [selected, values]);
+    return (_jsx("div", { ref: ref, role: "listbox", "aria-label": ariaLabel, className: cn('h-full min-h-0 overflow-y-auto scrollbar-hover ld-transition w-auto border-neutral100 pt-1 pb-0', className), children: values.map((v) => (_jsx("button", { type: "button", role: "option", "aria-selected": v === selected, onClick: () => onSelect(v), className: cn('display14 flex h-8 w-10 items-center justify-center rounded-md text-sm ld-transition hover:cursor-pointer', v === selected ? 'bg-tintBlue text-lb500' : 'hover:bg-neutral50'), children: format(v) }, String(v)))) }));
+};
+export const TimePicker = ({ value, onChange, className, }) => {
+    const [hours, minutes, seconds, ampm] = useMemo(() => {
+        const [h = 0, m = 0, s = 0] = (value ?? '00:00:00')
+            .split(':')
+            .map((s) => parseInt(s, 10));
+        const ampm = h >= 12 ? 'pm' : 'am';
+        const hour = h % 12 === 0 ? 12 : h % 12;
+        return [hour, m, s, ampm];
+    }, [value]);
+    const commit = (hours, minutes, seconds, ampm) => {
+        onChange?.(`${pad2(to24Hour(hours, ampm))}:${pad2(minutes)}:${pad2(seconds)}`);
+    };
+    return (_jsxs("div", { className: cn('flex h-auto items-stretch border-l border-neutral100 pr-1.5', className), children: [_jsx(TimeScrollColumn, { values: HOURS, selected: hours, ariaLabel: "\uC2DC", format: pad2, onSelect: (v) => commit(v, minutes, seconds, ampm), className: "border-r border-neutral100 pl-1" }), _jsx(TimeScrollColumn, { values: MINUTES, selected: minutes, ariaLabel: "\uBD84", format: pad2, onSelect: (v) => commit(hours, v, seconds, ampm), className: "border-r border-neutral100 pl-1" }), _jsx(TimeScrollColumn, { values: SECONDS, selected: seconds, ariaLabel: "\uCD08", format: pad2, onSelect: (v) => commit(hours, minutes, v, ampm), className: "border-r border-neutral100 pl-1" }), _jsx(TimeScrollColumn, { values: AMPM, selected: ampm, ariaLabel: "\uC624\uC804/\uC624\uD6C4", format: (v) => (v === 'am' ? '오전' : '오후'), onSelect: (v) => commit(hours, minutes, seconds, v), className: "pl-1" })] }));
+};
+const LDCalendarMemo = memo(LDCalendar);
+LDCalendarMemo.displayName = 'LDCalendar';
+export default LDCalendarMemo;

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

@@ -65,8 +65,8 @@ export interface ContainerProps {
     children?: ReactNode;
 }
 export interface SlideProps {
-    /** 슬라이드 크기(basis). 기본 '100%' (한 번에 하나) */
-    size?: string;
+    /** 한 화면에 보일 슬라이드 수. 기본 1(=100%). `'auto'`면 슬라이드가 내용 폭대로(basis auto) */
+    slidesPerView?: number | 'auto';
     index?: number;
     total?: number;
     className?: string;
@@ -91,7 +91,7 @@ export declare const CarouselBase: {
     Root: ({ orientation, loop, autoplay, autoScroll, align, containScroll, options, gap, className, style, children, }: RootProps) => import("react/jsx-runtime").JSX.Element;
     Viewport: ({ className, children }: ViewportProps) => import("react/jsx-runtime").JSX.Element;
     Container: ({ className, style, children }: ContainerProps) => import("react/jsx-runtime").JSX.Element;
-    Slide: ({ size, index, total, className, style, children, }: SlideProps) => import("react/jsx-runtime").JSX.Element;
+    Slide: ({ slidesPerView, index, total, className, style, children, }: SlideProps) => import("react/jsx-runtime").JSX.Element;
     Prev: ({ className, children, ...props }: NavButtonProps) => import("react/jsx-runtime").JSX.Element;
     Next: ({ className, children, ...props }: NavButtonProps) => import("react/jsx-runtime").JSX.Element;
     Dots: ({ className, dotClassName }: DotsProps) => import("react/jsx-runtime").JSX.Element;