@loword/loword-design-system 0.0.10 → 0.0.13

package/dist/components/LDPopover/LDPopover.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { isValidElement } from 'react';
 import PopoverBase from './PopoverBase.js';
-import LucideIcon from '../Icon/LucideIcon.js';
 import cn from '../../utils/cn.js';
+import { Ellipsis, EllipsisVertical } from 'lucide-react';
 // ── 스타일 매핑 ──
 const itemColorClasses = {
     blue: 'hover:bg-tintBlue text-lb500',
@@ -10,17 +10,18 @@ const itemColorClasses = {
     gray: 'hover:bg-mono100 text-neutral500',
 };
 const iconSizes = {
-    sm: 12,
-    md: 20,
-    lg: 24,
+    small: 12,
+    medium: 20,
+    large: 24,
+    xlarge: 32,
 };
-const LDPopover = ({ items, content, children, open, onOpenChange, iconSize = 'sm', isHorizontal = false, align = 'end', offset, contentWidth, triggerClassName, popoverClassName, style, }) => {
+const LDPopover = ({ items, content, children, open, onOpenChange, iconSize = 'small', isHorizontal = false, align = 'end', offset, contentWidth, triggerClassName, popoverClassName, style, }) => {
     const isAsChild = isValidElement(children);
-    return (_jsxs(PopoverBase.Root, { open: open, onOpenChange: onOpenChange, children: [_jsx(PopoverBase.Trigger, { asChild: isAsChild, style: style, className: cn('flex items-center justify-center cursor-pointer ld-transition rounded-[5px] outline-none', !isAsChild && 'px-2 py-1 min-h-6 hover:bg-mono100', triggerClassName), children: isAsChild ? (children) : (_jsx(LucideIcon, { name: isHorizontal ? 'ellipsis' : 'ellipsisVertical', size: iconSizes[iconSize], className: "text-neutral500" })) }), _jsx(PopoverBase.Content, { align: align, sideOffset: offset, style: {
+    return (_jsxs(PopoverBase.Root, { open: open, onOpenChange: onOpenChange, children: [_jsx(PopoverBase.Trigger, { asChild: isAsChild, style: style, className: cn('flex items-center justify-center cursor-pointer ld-transition rounded-[5px] outline-none', !isAsChild && 'p-1 min-h-6 hover:bg-mono100', triggerClassName), children: isAsChild ? (children) : isHorizontal ? (_jsx(Ellipsis, { size: iconSizes[iconSize], className: "text-neutral500" })) : (_jsx(EllipsisVertical, { size: iconSizes[iconSize], className: "text-neutral500" })) }), _jsx(PopoverBase.Content, { align: align, sideOffset: offset, style: {
                     width: contentWidth === 'trigger'
                         ? 'var(--radix-popover-trigger-width)'
                         : contentWidth,
-                }, className: cn('min-w-[160px] rounded-[5px] bg-white border border-mono100 p-xs flex flex-col gap-xs z-50 shadow-lg', popoverClassName), children: content
+                }, className: cn('min-w-40 rounded-[5px] bg-white border border-mono100 p-xs flex flex-col gap-xs z-50 shadow-lg', popoverClassName), children: content
                     ? content
                     : items?.map((item, index) => (_jsx("button", { type: "button", className: cn('w-full flex items-center cursor-pointer justify-start px-2 py-1.5 rounded-[5px] ld-transition display12 text-left', itemColorClasses[item.color ?? 'gray']), onClick: (e) => {
                             e.stopPropagation();

package/dist/components/LDProgressBar/LDProgressBar.d.ts

@@ -0,0 +1,16 @@
+import { type CSSProperties } from 'react';
+export interface LDProgressBarProps {
+    /** 진행률 (0~100). 범위를 벗어나면 0~100으로 clamp됩니다. */
+    percent: number;
+    /** 트랙(바탕)에 적용할 추가 CSS 클래스 */
+    className?: string;
+    /** 채움 영역 색상 Tailwind 클래스 (`bg-*`, 기본 색상: `bg-lb500`) */
+    fillClassName?: string;
+    /** percent에 따라 채움 색상(`bg-*` 클래스)을 동적으로 계산하는 함수. 지정 시 `fillColor`보다 우선하며 percent 변경마다 재계산됩니다. */
+    getFillClassNameByPercent?: (percent: number) => string;
+    /** 트랙(바탕)에 적용할 인라인 스타일 */
+    style?: CSSProperties;
+}
+declare const LDProgressBar: ({ percent, className, fillClassName, getFillClassNameByPercent, style, }: LDProgressBarProps) => import("react/jsx-runtime").JSX.Element;
+export default LDProgressBar;
+//# sourceMappingURL=LDProgressBar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LDProgressBar.d.ts","sourceRoot":"","sources":["../../../src/components/LDProgressBar/LDProgressBar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,OAAO,CAAC;AAI3C,MAAM,WAAW,kBAAkB;IACjC,8CAA8C;IAC9C,OAAO,EAAE,MAAM,CAAC;IAChB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wDAAwD;IACxD,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,gGAAgG;IAChG,yBAAyB,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,MAAM,CAAC;IACxD,0BAA0B;IAC1B,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AAED,QAAA,MAAM,aAAa,GAAI,0EAMpB,kBAAkB,4CAuBpB,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/dist/components/LDProgressBar/LDProgressBar.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import cn from '../../utils/cn.js';
+import ProgressBase from './ProgressBarBase.js';
+const LDProgressBar = ({ percent, className, fillClassName, getFillClassNameByPercent, style, }) => {
+    const clampedPercent = Math.min(Math.max(percent, 0), 100);
+    const dynamicFillClassName = getFillClassNameByPercent?.(clampedPercent);
+    return (_jsx(ProgressBase.Root, { percent: clampedPercent, className: cn('relative w-full h-2 rounded-full bg-mono100 overflow-hidden', className), style: style, children: _jsx(ProgressBase.Fill, { className: cn('h-full rounded-full ld-transition bg-lb500', fillClassName, dynamicFillClassName), style: { width: `${clampedPercent}%` } }) }));
+};
+export default LDProgressBar;

package/dist/components/LDProgressBar/ProgressBarBase.d.ts

@@ -0,0 +1,11 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+interface RootProps extends HTMLAttributes<HTMLDivElement> {
+    percent: number;
+    children?: ReactNode;
+}
+export declare const ProgressBase: {
+    Root: ({ percent, children, ...props }: RootProps) => import("react/jsx-runtime").JSX.Element;
+    Fill: (props: HTMLAttributes<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;
+};
+export default ProgressBase;
+//# sourceMappingURL=ProgressBarBase.d.ts.map

package/dist/components/LDProgressBar/ProgressBarBase.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressBarBase.d.ts","sourceRoot":"","sources":["../../../src/components/LDProgressBar/ProgressBarBase.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAE5D,UAAU,SAAU,SAAQ,cAAc,CAAC,cAAc,CAAC;IACxD,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAkBD,eAAO,MAAM,YAAY;4CAhBsB,SAAS;kBAcnC,cAAc,CAAC,cAAc,CAAC;CAKlD,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/components/LDProgressBar/ProgressBarBase.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const Root = ({ percent, children, ...props }) => {
+    return (_jsx("div", { role: "progressbar", "aria-valuenow": percent, "aria-valuemin": 0, "aria-valuemax": 100, ...props, children: children }));
+};
+const Fill = (props) => _jsx("div", { ...props });
+export const ProgressBase = {
+    Root,
+    Fill,
+};
+export default ProgressBase;

package/dist/components/LDRadio/LDFormRadioGroup.d.ts

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

package/dist/components/LDRadio/LDFormRadioGroup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LDFormRadioGroup.d.ts","sourceRoot":"","sources":["../../../src/components/LDRadio/LDFormRadioGroup.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,iBAAiB,CAAC;AACvD,OAAqB,EAAE,KAAK,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAGtE,UAAU,qBAAsB,SAAQ,IAAI,CAC1C,iBAAiB,EACjB,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,gBAAgB,GAAI,2DAMvB,qBAAqB,4CAoBvB,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/dist/components/LDRadio/LDFormRadioGroup.js

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

package/dist/components/LDRadio/LDRadio.d.ts

@@ -1,6 +1,6 @@
 import { type InputHTMLAttributes, type Ref } from 'react';
-type RadioSize = 'sm' | 'md';
-type RadioType = 'default' | 'pill';
+export type RadioSize = '2xsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
+type RadioType = 'default' | 'circle' | 'pill';
 export interface LDRadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'size' | 'checked' | 'disabled'> {
     /** controlled 체크 상태 */
     checked?: boolean;

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

@@ -1 +1 @@
-{"version":3,"file":"LDRadio.d.ts","sourceRoot":"","sources":["../../../src/components/LDRadio/LDRadio.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,mBAAmB,EAAE,KAAK,GAAG,EAAE,MAAM,OAAO,CAAC;AAK3D,KAAK,SAAS,GAAG,IAAI,GAAG,IAAI,CAAC;AAC7B,KAAK,SAAS,GAAG,SAAS,GAAG,MAAM,CAAC;AAkBpC,MAAM,WAAW,YAAa,SAAQ,IAAI,CACxC,mBAAmB,CAAC,gBAAgB,CAAC,EACrC,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,UAAU,CACzC;IACC,uBAAuB;IACvB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,8BAA8B;IAC9B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,kBAAkB;IAClB,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7C,cAAc;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oBAAoB;IACpB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,yCAAyC;IACzC,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,aAAa;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mBAAmB;IACnB,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;CAC7B;AAmFD,QAAA,MAAM,OAAO,GAAI,4GAYd,YAAY,4CA0Cd,CAAC;AAEF,eAAe,OAAO,CAAC"}
+{"version":3,"file":"LDRadio.d.ts","sourceRoot":"","sources":["../../../src/components/LDRadio/LDRadio.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,mBAAmB,EAAE,KAAK,GAAG,EAAE,MAAM,OAAO,CAAC;AAK3D,MAAM,MAAM,SAAS,GACjB,SAAS,GACT,QAAQ,GACR,OAAO,GACP,QAAQ,GACR,OAAO,GACP,QAAQ,CAAC;AACb,KAAK,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,MAAM,CAAC;AAmE/C,MAAM,WAAW,YAAa,SAAQ,IAAI,CACxC,mBAAmB,CAAC,gBAAgB,CAAC,EACrC,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,UAAU,CACzC;IACC,uBAAuB;IACvB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,8BAA8B;IAC9B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,kBAAkB;IAClB,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7C,cAAc;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oBAAoB;IACpB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,yCAAyC;IACzC,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,aAAa;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mBAAmB;IACnB,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;CAC7B;AAiGD,QAAA,MAAM,OAAO,GAAI,4GAYd,YAAY,4CAkDd,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/dist/components/LDRadio/LDRadio.js

@@ -2,36 +2,91 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import RadioBase, { useRadioContext } from './RadioBase.js';
 import cn from '../../utils/cn.js';
 const radioSizeClasses = {
-    sm: 'size-4',
-    md: 'size-5',
+    '2xsmall': 'size-2.5',
+    xsmall: 'size-3',
+    small: 'size-4',
+    medium: 'size-5',
+    large: 'size-6',
+    xlarge: 'size-7',
 };
 const checkIconSizes = {
-    sm: 10,
-    md: 12,
+    '2xsmall': 6,
+    xsmall: 8,
+    small: 10,
+    medium: 12,
+    large: 14,
+    xlarge: 16,
 };
 const labelSizeClasses = {
-    sm: 'display12',
-    md: 'display14 bold',
+    '2xsmall': 'display10 bold',
+    xsmall: 'display10 bold',
+    small: 'display12 bold',
+    medium: 'display14 bold',
+    large: 'display16 bold',
+    xlarge: 'display18 bold',
+};
+// default/circle 타입 라벨↔인디케이터 간격 (LDCheckbox의 gapClasses와 동일 스케일)
+const gapClasses = {
+    '2xsmall': 'gap-2xs',
+    xsmall: 'gap-2xs',
+    small: 'gap-xs',
+    medium: 'gap-sm',
+    large: 'gap-sm',
+    xlarge: 'gap-sm',
+};
+const pillClasses = {
+    '2xsmall': 'h-[24px] px-1.5 display10 bold',
+    xsmall: 'h-[28px] px-2 display10 bold',
+    small: 'h-[34px] px-3 display12 bold',
+    medium: 'h-[40px] px-4 display14 bold',
+    large: 'h-[46px] px-5 display18 bold',
+    xlarge: 'h-[52px] px-6 display20 bold',
+};
+const pillIconSizes = {
+    '2xsmall': 12,
+    xsmall: 16,
+    small: 16,
+    medium: 20,
+    large: 24,
+    xlarge: 24,
+};
+const pillCheckedPad = {
+    '2xsmall': 'pl-[14px]',
+    xsmall: 'pl-[18px]',
+    small: 'pl-[20px]',
+    medium: 'pl-[24px]',
+    large: 'pl-[28px]',
+    xlarge: 'pl-[28px]',
 };
 // ── Inner: pill 타입 ──
-const PillInner = ({ label, ref, ...props }) => {
+const PillInner = ({ size, label, ref, ...props }) => {
     const { checked } = useRadioContext();
-    return (_jsxs(_Fragment, { children: [_jsx(RadioBase.HiddenInput, { ref: ref, ...props }), _jsxs("div", { className: "relative flex items-center", children: [_jsx(RadioBase.Indicator, { icon: "check", iconSize: 16, className: "absolute left-0", iconClassName: cn('shrink-0 ld-transition', checked ? 'opacity-100' : 'opacity-0') }), label && (_jsx(RadioBase.Label, { className: cn('ld-transition text-nowrap', checked ? 'pl-5' : 'pl-sm pr-sm'), children: label }))] })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(RadioBase.HiddenInput, { ref: ref, ...props }), _jsxs("div", { className: "relative flex items-center", children: [_jsx(RadioBase.Indicator, { iconSize: pillIconSizes[size], className: "absolute left-0", iconClassName: cn('shrink-0 ld-transition', checked ? 'opacity-100' : 'opacity-0') }), label && (_jsx(RadioBase.Label, { className: cn('ld-transition text-nowrap', checked ? pillCheckedPad[size] : 'pl-sm pr-sm'), children: label }))] })] }));
 };
-// ── Inner: default 타입 ──
-const DefaultInner = ({ size, label, ref, ...props }) => {
+// ── Inner: default, circle 타입 ──
+const DefaultInner = ({ type, size, label, ref, ...props }) => {
     const { checked, disabled } = useRadioContext();
-    return (_jsxs(_Fragment, { children: [_jsx(RadioBase.HiddenInput, { ref: ref, ...props }), _jsx(RadioBase.Indicator, { icon: "check", iconSize: checkIconSizes[size], className: cn('flex items-center justify-center rounded-full ld-transition border-2 border-transparent shrink-0', !disabled &&
-                    (checked ? 'border-lb500 bg-lb500' : 'bg-white border-neutral100'), disabled && 'border-neutral200 bg-mono100', radioSizeClasses[size]), iconClassName: cn('shrink-0 ld-transition', checked ? (disabled ? 'text-neutral500' : 'text-white') : 'opacity-0') }), label && (_jsx(RadioBase.Label, { className: "text-neutral500", children: label }))] }));
+    return (_jsxs(_Fragment, { children: [_jsx(RadioBase.HiddenInput, { ref: ref, ...props }), _jsx(RadioBase.Indicator, { type: type, iconSize: checkIconSizes[size], className: cn('flex items-center justify-center rounded-full ld-transition outline-transparent [outline-style:solid] -outline-offset-1 shrink-0', type === 'circle' ? 'outline-1' : 'outline-2', {
+                    'outline-lb500 bg-lb500': !disabled && checked && type === 'default',
+                    'bg-white outline-neutral100': !disabled && !checked && type === 'default',
+                    'bg-white outline-lb500': !disabled && checked && type === 'circle',
+                    'bg-white outline-neutral500': !disabled && !checked && type === 'circle',
+                }, disabled && 'outline-neutral200 bg-mono100', radioSizeClasses[size]), iconClassName: cn('shrink-0 ld-transition', {
+                    'text-neutral300': checked && disabled && type === 'default',
+                    'text-white': checked && !disabled && type === 'default',
+                    'bg-neutral300': checked && disabled && type === 'circle',
+                    'text-lb500 bg-lb500': checked && !disabled && type === 'circle',
+                    'opacity-0': !checked,
+                }) }), label && (_jsx(RadioBase.Label, { className: "text-neutral500", children: label }))] }));
 };
-const LDRadio = ({ checked, defaultChecked, onCheckedChange, size = 'sm', type = 'default', label, disabled = false, className, style, ref, ...props }) => {
+const LDRadio = ({ checked, defaultChecked, onCheckedChange, size = 'small', type = 'default', label, disabled = false, className, style, ref, ...props }) => {
     if (type === 'pill') {
         return (_jsx(RadioBase.Root, { checked: checked, defaultChecked: defaultChecked, onCheckedChange: onCheckedChange, disabled: disabled, style: style, 
             // pill은 checked 여부에 따라 Root(<label>) 배경/텍스트가 바뀌어야 함.
             // Inner에서는 Root 밖 스타일을 줄 수 없으므로,
             // className을 함수로 받아 Root 내부의 resolved 값을 주입함.
-            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, ...props }) }));
+            className: (c) => cn('items-center gap-2 rounded-full ld-transition', pillClasses[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, ...props }) }));
     }
-    return (_jsx(RadioBase.Root, { checked: checked, defaultChecked: defaultChecked, onCheckedChange: onCheckedChange, disabled: disabled, style: style, className: cn('items-center gap-[5px]', labelSizeClasses[size], className), children: _jsx(DefaultInner, { size: size, label: label, ref: ref, ...props }) }));
+    return (_jsx(RadioBase.Root, { checked: checked, defaultChecked: defaultChecked, onCheckedChange: onCheckedChange, disabled: disabled, style: style, className: cn('items-center', gapClasses[size], labelSizeClasses[size], className), children: _jsx(DefaultInner, { type: type, size: size, label: label, ref: ref, ...props }) }));
 };
 export default LDRadio;

package/dist/components/LDRadio/LDRadioGroup.d.ts

@@ -1,4 +1,5 @@
 import type React from 'react';
+import { type RadioSize } from './LDRadio.js';
 export interface RadioGroupOption {
     label: string;
     value: string;
@@ -9,14 +10,15 @@ export interface LDRadioGroupProps {
     value?: string;
     onChange?: (value: string) => void;
     disabled?: boolean;
-    type?: 'default' | 'pill';
-    size?: 'sm' | 'md';
+    type?: 'default' | 'pill' | 'circle';
+    size?: RadioSize;
     name?: string;
     'aria-invalid'?: boolean | 'true' | 'false';
     'aria-describedby'?: string;
+    orientation?: 'horizontal' | 'vertical';
     className?: string;
     style?: React.CSSProperties;
 }
-declare const LDRadioGroup: ({ items, value, onChange, disabled, type, size, name, "aria-invalid": ariaInvalid, "aria-describedby": ariaDescribedby, className, style, }: LDRadioGroupProps) => import("react/jsx-runtime").JSX.Element;
+declare const LDRadioGroup: ({ items, value, onChange, disabled, type, size, name, "aria-invalid": ariaInvalid, "aria-describedby": ariaDescribedby, orientation, className, style, }: LDRadioGroupProps) => import("react/jsx-runtime").JSX.Element;
 export default LDRadioGroup;
 //# sourceMappingURL=LDRadioGroup.d.ts.map

package/dist/components/LDRadio/LDRadioGroup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LDRadioGroup.d.ts","sourceRoot":"","sources":["../../../src/components/LDRadio/LDRadioGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAGD,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,gBAAgB,EAAE,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC;IAC1B,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,cAAc,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC;IAC5C,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAED,QAAA,MAAM,YAAY,GAAI,6IAYnB,iBAAiB,4CAuBnB,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"LDRadioGroup.d.ts","sourceRoot":"","sources":["../../../src/components/LDRadio/LDRadioGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAgB,EAAE,KAAK,SAAS,EAAE,MAAM,WAAW,CAAC;AAIpD,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAaD,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,gBAAgB,EAAE,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,SAAS,GAAG,MAAM,GAAG,QAAQ,CAAC;IACrC,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,cAAc,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC;IAC5C,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,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,YAAY,GAAI,0JAanB,iBAAiB,4CA4BnB,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/components/LDRadio/LDRadioGroup.js

@@ -1,7 +1,16 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import LDRadio from './LDRadio.js';
 import cn from '../../utils/cn.js';
-const LDRadioGroup = ({ items, value, onChange, disabled = false, type = 'pill', size = 'sm', name, 'aria-invalid': ariaInvalid, 'aria-describedby': ariaDescribedby, className, style, }) => {
-    return (_jsx("div", { role: "radiogroup", "aria-invalid": ariaInvalid, "aria-describedby": ariaDescribedby, className: cn('flex flex-row gap-2.5', className), style: style, children: items.map((option) => (_jsx(LDRadio, { name: name, type: type, size: size, checked: value === option.value, onCheckedChange: () => onChange?.(option.value), label: option.label, disabled: disabled || option.disabled }, option.value))) }));
+// 아이템 간 간격을 사이즈별로 확장 (수평/수직 공통)
+const groupGapClasses = {
+    '2xsmall': 'gap-xs',
+    xsmall: 'gap-xs',
+    small: 'gap-sm',
+    medium: 'gap-md',
+    large: 'gap-md',
+    xlarge: 'gap-lg',
+};
+const LDRadioGroup = ({ items, value, onChange, disabled = false, type = 'pill', size = 'small', name, 'aria-invalid': ariaInvalid, 'aria-describedby': ariaDescribedby, orientation = 'horizontal', className, style, }) => {
+    return (_jsx("div", { role: "radiogroup", "aria-invalid": ariaInvalid, "aria-describedby": ariaDescribedby, className: cn('flex', groupGapClasses[size], orientation === 'vertical' ? 'flex-col' : 'flex-row'), style: style, children: items.map((option) => (_jsx(LDRadio, { name: name, type: type, size: size, checked: value === option.value, className: className, onCheckedChange: () => onChange?.(option.value), label: option.label, disabled: disabled || option.disabled }, option.value))) }));
 };
 export default LDRadioGroup;

package/dist/components/LDRadio/RadioBase.d.ts

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

package/dist/components/LDRadio/RadioBase.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RadioBase.d.ts","sourceRoot":"","sources":["../../../src/components/LDRadio/RadioBase.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,mBAAmB,EACxB,KAAK,SAAS,EACd,KAAK,GAAG,EAIT,MAAM,OAAO,CAAC;AACf,OAAmB,EAAE,KAAK,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAI/D,UAAU,gBAAgB;IACxB,OAAO,EAAE,OAAO,CAAC;IACjB,eAAe,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC5C,QAAQ,EAAE,OAAO,CAAC;CACnB;AAID,eAAO,MAAM,eAAe,wBAK3B,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;AA0CD,UAAU,gBAAiB,SAAQ,IAAI,CACrC,mBAAmB,CAAC,gBAAgB,CAAC,EACrC,MAAM,GAAG,SAAS,GAAG,UAAU,CAChC;IACC,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;CAC7B;AAsBD,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,SAAS;gGAzFnB,SAAS;+CAuCsC,gBAAgB;+DAgC/D,cAAc;qCAcuB,UAAU;CASjD,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"RadioBase.d.ts","sourceRoot":"","sources":["../../../src/components/LDRadio/RadioBase.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,mBAAmB,EACxB,KAAK,SAAS,EACd,KAAK,GAAG,EAIT,MAAM,OAAO,CAAC;AAKf,UAAU,gBAAgB;IACxB,OAAO,EAAE,OAAO,CAAC;IACjB,eAAe,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC5C,QAAQ,EAAE,OAAO,CAAC;CACnB;AAID,eAAO,MAAM,eAAe,wBAK3B,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;AA0CD,UAAU,gBAAiB,SAAQ,IAAI,CACrC,mBAAmB,CAAC,gBAAgB,CAAC,EACrC,MAAM,GAAG,SAAS,GAAG,UAAU,CAChC;IACC,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;CAC7B;AAsBD,UAAU,cAAc;IACtB,IAAI,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAC5B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AA2BD,UAAU,UAAU;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAMD,eAAO,MAAM,SAAS;gGApGnB,SAAS;+CAuCsC,gBAAgB;+DAgC/D,cAAc;qCAyBuB,UAAU;CASjD,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/dist/components/LDRadio/RadioBase.js

@@ -1,7 +1,7 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } 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 RadioContext = createContext(null);
 export const useRadioContext = () => {
     const ctx = useContext(RadioContext);
@@ -29,8 +29,11 @@ const HiddenInput = ({ ref, onChange, ...props }) => {
             onChange?.(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 = ({ type = 'default', iconSize = 24, className, iconClassName, }) => {
+    return (_jsxs("div", { className: className, children: [type === 'default' && (_jsx(Check, { size: iconSize, className: iconClassName })), type === 'circle' && (_jsx("div", { className: cn('rounded-full', iconClassName), style: {
+                    width: iconSize - 2,
+                    height: iconSize - 2,
+                } }))] }));
 };
 const Label = ({ className, children }) => {
     return _jsx("span", { className: className, children: children });

package/dist/components/LDSectionNav/LDSectionNav.d.ts

@@ -0,0 +1,11 @@
+import { type SectionNavItem } from './SectionNavBase.js';
+export type LDSectionNavItem = SectionNavItem;
+export interface LDSectionNavProps {
+    /** 목차 항목 목록. 각 항목의 id는 대상 섹션의 DOM id와 일치해야 한다 */
+    items?: LDSectionNavItem[];
+    /** 루트 nav className */
+    className?: string;
+}
+declare const LDSectionNav: ({ items, className }: LDSectionNavProps) => import("react/jsx-runtime").JSX.Element;
+export default LDSectionNav;
+//# sourceMappingURL=LDSectionNav.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LDSectionNav.d.ts","sourceRoot":"","sources":["../../../src/components/LDSectionNav/LDSectionNav.tsx"],"names":[],"mappings":"AAGA,OAAuB,EAAE,KAAK,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAEvE,MAAM,MAAM,gBAAgB,GAAG,cAAc,CAAC;AAE9C,MAAM,WAAW,iBAAiB;IAChC,iDAAiD;IACjD,KAAK,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAC3B,uBAAuB;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,QAAA,MAAM,YAAY,GAAI,sBAAsB,iBAAiB,4CAc5D,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/components/LDSectionNav/LDSectionNav.js

@@ -0,0 +1,11 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import cn from '../../utils/cn.js';
+import SectionNavBase from './SectionNavBase.js';
+const LDSectionNav = ({ items, className }) => {
+    return (_jsx(SectionNavBase.Root, { items: items, classNames: {
+            root: cn('flex flex-col gap-2.5', className),
+            item: cn('w-full text-left p-2 rounded-md display14 text-neutral500 cursor-pointer ld-transition', 'hover:text-lb500', 'data-[active=true]:text-lb500'),
+        } }));
+};
+export default LDSectionNav;

package/dist/components/LDSectionNav/SectionNavBase.d.ts

@@ -0,0 +1,20 @@
+import { type ReactNode } from 'react';
+export interface SectionNavItem {
+    /** 대상 섹션의 DOM id (포커스가 이 섹션 안이면 활성) */
+    id: string;
+    /** 링크에 표시할 라벨 */
+    label: ReactNode;
+}
+export interface SectionNavClassNames {
+    root?: string;
+    item?: string;
+}
+interface RootProps {
+    items?: SectionNavItem[];
+    classNames?: SectionNavClassNames;
+}
+export declare const SectionNavBase: {
+    Root: ({ items, classNames }: RootProps) => import("react/jsx-runtime").JSX.Element;
+};
+export default SectionNavBase;
+//# sourceMappingURL=SectionNavBase.d.ts.map

package/dist/components/LDSectionNav/SectionNavBase.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SectionNavBase.d.ts","sourceRoot":"","sources":["../../../src/components/LDSectionNav/SectionNavBase.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,SAAS,EAAuB,MAAM,OAAO,CAAC;AAG5D,MAAM,WAAW,cAAc;IAC7B,uCAAuC;IACvC,EAAE,EAAE,MAAM,CAAC;IACX,iBAAiB;IACjB,KAAK,EAAE,SAAS,CAAC;CAClB;AAED,MAAM,WAAW,oBAAoB;IACnC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAKD,UAAU,SAAS;IACjB,KAAK,CAAC,EAAE,cAAc,EAAE,CAAC;IACzB,UAAU,CAAC,EAAE,oBAAoB,CAAC;CACnC;AAmED,eAAO,MAAM,cAAc;kCA9DU,SAAS;CAgE7C,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/components/LDSectionNav/SectionNavBase.js

@@ -0,0 +1,53 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import cn from '../../utils/cn.js';
+const FOCUSABLE = 'input, select, textarea, button, [href], [tabindex]:not([tabindex="-1"])';
+// 포커스(편집)가 어느 섹션 안에 있는지로 활성을 판별한다. 포커스는 페이지에 하나뿐이라
+// 여러 nav가 있어도 항상 한 곳만 강조된다(별도 조율 불필요). 링크 클릭 시엔 해당 섹션의
+// 첫 입력 요소로 포커스를 옮겨 → 활성이 따라오고 브라우저가 자동으로 스크롤한다.
+const Root = ({ items, classNames }) => {
+    const [activeId, setActiveId] = useState('');
+    const ids = items?.map((item) => item.id) ?? [];
+    const idsKey = ids.join('|');
+    useEffect(() => {
+        const idSet = new Set(ids);
+        const onFocusIn = (e) => {
+            let el = e.target;
+            while (el) {
+                if (el.id && idSet.has(el.id)) {
+                    setActiveId(el.id);
+                    return;
+                }
+                el = el.parentElement;
+            }
+            // 포커스가 내 섹션 밖이면 활성 해제 → 지금 편집 중인 섹션의 nav 하나만 강조된다.
+            setActiveId('');
+        };
+        document.addEventListener('focusin', onFocusIn);
+        //cleanup함수로 정리
+        return () => document.removeEventListener('focusin', onFocusIn);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [idsKey]);
+    const moveToSection = (id) => {
+        const section = document.getElementById(id);
+        if (!section)
+            return;
+        const focusable = section.querySelector(FOCUSABLE);
+        if (focusable) {
+            focusable.focus();
+        }
+        else {
+            section.scrollIntoView({ behavior: 'smooth', block: 'start' });
+            setActiveId(id);
+        }
+    };
+    return (_jsx("nav", { className: classNames?.root, children: items?.map((item) => {
+            const isActive = item.id === activeId;
+            return (_jsx("button", { type: "button", "aria-current": isActive ? 'true' : undefined, "data-active": isActive, onClick: () => moveToSection(item.id), className: cn(classNames?.item), children: item.label }, item.id));
+        }) }));
+};
+export const SectionNavBase = {
+    Root,
+};
+export default SectionNavBase;

package/dist/components/LDSelect/LDFormMultiSelect.d.ts

@@ -0,0 +1,13 @@
+import { type RegisterOptions } from 'react-hook-form';
+import { type LDMultiSelectProps } from './LDMultiSelect.js';
+interface LDFormMultiSelectProps extends Omit<LDMultiSelectProps, 'value' | 'onChange' | 'color' | 'name'> {
+    block?: boolean;
+    name: string;
+    options?: RegisterOptions;
+    customErrorMessage?: string;
+    isHiddenErrorMessage?: boolean;
+    errorClassName?: string;
+}
+declare const LDFormMultiSelect: ({ name, options, variant, size, block, disabled, customErrorMessage, isHiddenErrorMessage, errorClassName, ...props }: LDFormMultiSelectProps) => import("react/jsx-runtime").JSX.Element;
+export default LDFormMultiSelect;
+//# sourceMappingURL=LDFormMultiSelect.d.ts.map

package/dist/components/LDSelect/LDFormMultiSelect.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LDFormMultiSelect.d.ts","sourceRoot":"","sources":["../../../src/components/LDSelect/LDFormMultiSelect.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,iBAAiB,CAAC;AACvD,OAAsB,EAAE,KAAK,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAKzE,UAAU,sBAAuB,SAAQ,IAAI,CAC3C,kBAAkB,EAClB,OAAO,GAAG,UAAU,GAAG,OAAO,GAAG,MAAM,CACxC;IACC,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,QAAA,MAAM,iBAAiB,GAAI,uHAWxB,sBAAsB,4CAuCxB,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/dist/components/LDSelect/{FormMultiSelect.js → LDFormMultiSelect.js}

@@ -4,11 +4,11 @@ import LDMultiSelect from './LDMultiSelect.js';
 import FormField from '../LDForm/LDFormField.js';
 import FormErrorMessage from '../LDForm/LDFormErrorMessage.js';
 import cn from '../../utils/cn.js';
-const FormMultiSelect = ({ name, options, variant = 'filled', size = 'sm', block = false, disabled = false, customErrorMessage = '', isHiddenErrorMessage = false, errorClassName, ...props }) => {
+const LDFormMultiSelect = ({ name, options, variant = 'filled', size = 'small', block = false, disabled = false, customErrorMessage = '', isHiddenErrorMessage = false, errorClassName, ...props }) => {
     return (_jsx(FormField, { name: name, options: options, customErrorMessage: customErrorMessage, disabled: disabled, children: ({ field, fieldState }) => (_jsxs("div", { className: cn('relative', block && 'flex flex-1'), children: [_jsx(LDMultiSelect, { ...props, name: name, value: Array.isArray(field.value)
                         ? field.value
                         : field.value
                             ? [field.value]
                             : [], onChange: field.onChange, "aria-invalid": field['aria-invalid'], "aria-describedby": field['aria-describedby'], variant: variant, color: fieldState.hasError ? 'danger' : 'neutral', size: size, disabled: disabled }), !isHiddenErrorMessage && (_jsx(FormErrorMessage, { error: fieldState.error, disabled: disabled, className: errorClassName }))] })) }));
 };
-export default FormMultiSelect;
+export default LDFormMultiSelect;

package/dist/components/LDSelect/LDFormSelect.d.ts

@@ -0,0 +1,13 @@
+import { type RegisterOptions } from 'react-hook-form';
+import { type LDSelectProps } from './LDSelect.js';
+interface LDFormSelectProps extends Omit<LDSelectProps, 'value' | 'onChange' | 'color' | 'name'> {
+    block?: boolean;
+    name: string;
+    options?: RegisterOptions;
+    customErrorMessage?: string;
+    isHiddenErrorMessage?: boolean;
+    errorClassName?: string;
+}
+declare const LDFormSelect: ({ name, options, variant, size, disabled, customErrorMessage, isHiddenErrorMessage, errorClassName, ...props }: LDFormSelectProps) => import("react/jsx-runtime").JSX.Element;
+export default LDFormSelect;
+//# sourceMappingURL=LDFormSelect.d.ts.map

package/dist/components/LDSelect/LDFormSelect.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LDFormSelect.d.ts","sourceRoot":"","sources":["../../../src/components/LDSelect/LDFormSelect.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,iBAAiB,CAAC;AACvD,OAAiB,EAAE,KAAK,aAAa,EAAE,MAAM,YAAY,CAAC;AAK1D,UAAU,iBAAkB,SAAQ,IAAI,CACtC,aAAa,EACb,OAAO,GAAG,UAAU,GAAG,OAAO,GAAG,MAAM,CACxC;IACC,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,QAAA,MAAM,YAAY,GAAI,gHAUnB,iBAAiB,4CAiCnB,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/components/LDSelect/LDFormSelect.js

@@ -0,0 +1,10 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import LDSelect from './LDSelect.js';
+import FormField from '../LDForm/LDFormField.js';
+import FormErrorMessage from '../LDForm/LDFormErrorMessage.js';
+import cn from '../../utils/cn.js';
+const LDFormSelect = ({ name, options, variant = 'filled', size = 'small', disabled = false, customErrorMessage = '', isHiddenErrorMessage = false, errorClassName, ...props }) => {
+    return (_jsx(FormField, { name: name, options: options, customErrorMessage: customErrorMessage, disabled: disabled, children: ({ field, fieldState }) => (_jsxs("div", { className: cn('relative flex flex-1'), children: [_jsx(LDSelect, { ...props, name: name, value: field.value ?? '', onChange: field.onChange, "aria-invalid": field['aria-invalid'], "aria-describedby": field['aria-describedby'], variant: variant, color: fieldState.hasError ? 'danger' : 'neutral', size: size, disabled: disabled }), !isHiddenErrorMessage && (_jsx(FormErrorMessage, { error: fieldState.error, disabled: disabled, className: errorClassName }))] })) }));
+};
+export default LDFormSelect;

package/dist/components/LDSelect/LDMultiSelect.d.ts

@@ -1,8 +1,9 @@
 import type React from 'react';
 import { type SelectOption } from './SelectBase.js';
-type MultiSelectVariant = 'filled' | 'outline' | 'ghost';
+type MultiSelectVariant = 'filled' | 'outline';
 type MultiSelectColor = 'neutral' | 'point' | 'danger';
-type MultiSelectSize = 'xs' | 'sm' | 'md' | 'lg';
+type MultiSelectSize = '2xsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
+type MultiSelectAlign = 'left' | 'center' | 'right';
 export interface LDMultiSelectProps {
     items: SelectOption[];
     placeholder?: string;
@@ -13,6 +14,8 @@ export interface LDMultiSelectProps {
     variant?: MultiSelectVariant;
     color?: MultiSelectColor;
     size?: MultiSelectSize;
+    /** 트리거 값/placeholder 정렬 (기본 left) */
+    align?: MultiSelectAlign;
     maxDisplay?: number;
     /**
      * true(기본): "A, B 외 N개" 요약 텍스트로 표시 (X 삭제 없음).
@@ -26,6 +29,6 @@ export interface LDMultiSelectProps {
     'aria-describedby'?: string;
 }
 export type { SelectOption as MultiSelectOption };
-declare const LDMultiSelect: ({ items, placeholder, value, onChange, disabled, name, variant, color, size, maxDisplay, truncate, className, style, contentClassName, "aria-invalid": ariaInvalid, "aria-describedby": ariaDescribedby, }: LDMultiSelectProps) => import("react/jsx-runtime").JSX.Element;
+declare const LDMultiSelect: ({ items, placeholder, value, onChange, disabled, name, variant, color, size, align, maxDisplay, truncate, className, style, contentClassName, "aria-invalid": ariaInvalid, "aria-describedby": ariaDescribedby, }: LDMultiSelectProps) => import("react/jsx-runtime").JSX.Element;
 export default LDMultiSelect;
 //# sourceMappingURL=LDMultiSelect.d.ts.map

package/dist/components/LDSelect/LDMultiSelect.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LDMultiSelect.d.ts","sourceRoot":"","sources":["../../../src/components/LDSelect/LDMultiSelect.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAmB,EAAE,KAAK,YAAY,EAAE,MAAM,cAAc,CAAC;AAK7D,KAAK,kBAAkB,GAAG,QAAQ,GAAG,SAAS,GAAG,OAAO,CAAC;AACzD,KAAK,gBAAgB,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,CAAC;AACvD,KAAK,eAAe,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAsDjD,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,YAAY,EAAE,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,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,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,kBAAkB,CAAC;IAC7B,KAAK,CAAC,EAAE,gBAAgB,CAAC;IACzB,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,cAAc,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC;IAC5C,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED,YAAY,EAAE,YAAY,IAAI,iBAAiB,EAAE,CAAC;AAElD,QAAA,MAAM,aAAa,GAAI,4MAiBpB,kBAAkB,4CA0HpB,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"LDMultiSelect.d.ts","sourceRoot":"","sources":["../../../src/components/LDSelect/LDMultiSelect.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAmB,EAAE,KAAK,YAAY,EAAE,MAAM,cAAc,CAAC;AAK7D,KAAK,kBAAkB,GAAG,QAAQ,GAAG,SAAS,CAAC;AAC/C,KAAK,gBAAgB,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,CAAC;AACvD,KAAK,eAAe,GAChB,SAAS,GACT,QAAQ,GACR,OAAO,GACP,QAAQ,GACR,OAAO,GACP,QAAQ,CAAC;AACb,KAAK,gBAAgB,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;AAwDpD,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,YAAY,EAAE,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,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,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,kBAAkB,CAAC;IAC7B,KAAK,CAAC,EAAE,gBAAgB,CAAC;IACzB,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,qCAAqC;IACrC,KAAK,CAAC,EAAE,gBAAgB,CAAC;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,cAAc,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC;IAC5C,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED,YAAY,EAAE,YAAY,IAAI,iBAAiB,EAAE,CAAC;AAElD,QAAA,MAAM,aAAa,GAAI,mNAkBpB,kBAAkB,4CA+HpB,CAAC;AAEF,eAAe,aAAa,CAAC"}