@loword/loword-design-system 0.0.2 → 0.0.4

package/dist/components/LDPopover/PopoverBase.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as RadixPopover from '@radix-ui/react-popover';
+import cn from '../../utils/cn.js';
+const Root = ({ open, onOpenChange, children }) => {
+    return (_jsx(RadixPopover.Root, { open: open, onOpenChange: onOpenChange, children: children }));
+};
+const Trigger = ({ disabled, className, style, children, onClick, asChild, }) => {
+    return (_jsx(RadixPopover.Trigger, { asChild: asChild, disabled: disabled, className: cn('inline-flex items-center', className), style: style, onClick: onClick, children: children }));
+};
+const Content = ({ align = 'start', sideOffset = 4, className, children, style, onOpenAutoFocus, }) => {
+    return (_jsx(RadixPopover.Portal, { children: _jsx(RadixPopover.Content, { align: align, sideOffset: sideOffset, onOpenAutoFocus: onOpenAutoFocus, className: cn('z-50 outline-hidden', 'animate-in fade-in-0 data-[state=closed]:animate-out data-[state=closed]:fade-out-0', className), style: style, children: children }) }));
+};
+export const PopoverBase = {
+    Root,
+    Trigger,
+    Content,
+};
+export default PopoverBase;

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"FormRadioGroup.d.ts","sourceRoot":"","sources":["../../../src/components/LDRadio/FormRadioGroup.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,iBAAiB,CAAC;AACvD,OAAqB,EAAE,KAAK,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAItE,UAAU,mBAAoB,SAAQ,IAAI,CACxC,iBAAiB,EACjB,OAAO,GAAG,UAAU,CACrB;IACC,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;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,QAAA,MAAM,cAAc,GAAI,iGAQrB,mBAAmB,4CA8BrB,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/components/LDRadio/FormRadioGroup.js

@@ -0,0 +1,9 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import LDRadioGroup from './LDRadioGroup.js';
+import FormField from '../Form/FormField.js';
+import FormErrorMessage from '../Form/FormErrorMessage.js';
+const FormRadioGroup = ({ name, options, customErrorMessage = '', isHiddenErrorMessage = true, errorClassName, disabled = false, ...props }) => {
+    return (_jsx(FormField, { name: name, options: options, customErrorMessage: customErrorMessage, disabled: disabled, children: ({ field, fieldState }) => (_jsxs("div", { className: "relative", children: [_jsx(LDRadioGroup, { ...props, name: name, value: field.value ?? '', onChange: field.onChange, disabled: disabled, "aria-invalid": field['aria-invalid'], "aria-describedby": field['aria-describedby'] }), !isHiddenErrorMessage && (_jsx(FormErrorMessage, { error: fieldState.error, disabled: disabled, className: errorClassName }))] })) }));
+};
+export default FormRadioGroup;

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

@@ -0,0 +1,24 @@
+import { type InputHTMLAttributes, type Ref } from 'react';
+type RadioSize = 'sm' | 'md';
+type RadioType = 'default' | 'pill';
+export interface LDRadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'size' | 'checked' | 'disabled'> {
+    /** controlled 체크 상태 */
+    checked?: boolean;
+    /** 초기 체크 상태 (uncontrolled) */
+    defaultChecked?: boolean;
+    /** 체크 상태 변경 콜백 */
+    onCheckedChange?: (checked: boolean) => void;
+    /** 비활성화 여부 */
+    disabled?: boolean;
+    /** 라디오 버튼 크기 프리셋 */
+    size?: RadioSize;
+    /** 라디오 유형 (default: 원형, pill: 알약형 토글) */
+    type?: RadioType;
+    /** 라벨 텍스트 */
+    label?: string;
+    /** input 요소 ref */
+    ref?: Ref<HTMLInputElement>;
+}
+declare const LDRadio: ({ checked, defaultChecked, onCheckedChange, size, type, label, disabled, className, style, ref, ...props }: LDRadioProps) => import("react/jsx-runtime").JSX.Element;
+export default LDRadio;
+//# sourceMappingURL=LDRadio.d.ts.map

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

@@ -0,0 +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;AAqFD,QAAA,MAAM,OAAO,GAAI,4GAYd,YAAY,4CA0Cd,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/dist/components/LDRadio/LDRadio.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import RadioBase, { useRadioContext } from './RadioBase.js';
+import cn from '../../utils/cn.js';
+const radioSizeClasses = {
+    sm: 'size-4',
+    md: 'size-5',
+};
+const checkIconSizes = {
+    sm: 10,
+    md: 12,
+};
+const labelSizeClasses = {
+    sm: 'display12',
+    md: 'display14 bold',
+};
+// ── Inner: pill 타입 ──
+const PillInner = ({ 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 transition-all duration-200 ease-out', checked ? 'opacity-100' : 'opacity-0') }), label && (_jsx(RadioBase.Label, { className: cn('transition-all ld-transition text-nowrap', checked ? 'pl-5' : 'pl-sm pr-sm'), children: label }))] })] }));
+};
+// ── Inner: default 타입 ──
+const DefaultInner = ({ 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 outline outline-transparent shrink-0', !disabled &&
+                    (checked
+                        ? 'outline-lb500 bg-lb500'
+                        : 'bg-white outline-neutral300 hover:outline-lb500'), disabled && 'outline-neutral300 bg-neutral300', 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 }))] }));
+};
+const LDRadio = ({ checked, defaultChecked, onCheckedChange, size = 'sm', 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 }) }));
+    }
+    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 }) }));
+};
+export default LDRadio;

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

@@ -0,0 +1,22 @@
+import type React from 'react';
+export interface RadioGroupOption {
+    label: string;
+    value: string;
+    disabled?: boolean;
+}
+export interface LDRadioGroupProps {
+    items: RadioGroupOption[];
+    value?: string;
+    onChange?: (value: string) => void;
+    disabled?: boolean;
+    type?: 'default' | 'pill';
+    size?: 'sm' | 'md';
+    name?: string;
+    'aria-invalid'?: boolean | 'true' | 'false';
+    'aria-describedby'?: string;
+    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;
+export default LDRadioGroup;
+//# sourceMappingURL=LDRadioGroup.d.ts.map

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

@@ -0,0 +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"}

package/dist/components/LDRadio/LDRadioGroup.js

@@ -0,0 +1,7 @@
+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))) }));
+};
+export default LDRadioGroup;

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

@@ -0,0 +1,38 @@
+import { type InputHTMLAttributes, type ReactNode, type Ref } from 'react';
+import { type IconName } from '../Icon/LucideIcon.js';
+interface RadioContextType {
+    checked: boolean;
+    onCheckedChange: (checked: boolean) => void;
+    disabled: boolean;
+}
+export declare const useRadioContext: () => RadioContextType;
+interface RootProps {
+    checked?: boolean;
+    defaultChecked?: boolean;
+    onCheckedChange?: (checked: boolean) => void;
+    disabled?: boolean;
+    className?: string | ((checked: boolean) => string);
+    style?: React.CSSProperties;
+    children?: ReactNode;
+}
+interface HiddenInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'checked' | 'disabled'> {
+    ref?: Ref<HTMLInputElement>;
+}
+interface IndicatorProps {
+    icon?: IconName;
+    iconSize?: number;
+    className?: string;
+    iconClassName?: string;
+}
+interface LabelProps {
+    className?: string;
+    children?: ReactNode;
+}
+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;
+    Label: ({ className, children }: LabelProps) => import("react/jsx-runtime").JSX.Element;
+};
+export default RadioBase;
+//# sourceMappingURL=RadioBase.d.ts.map

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

@@ -0,0 +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;AA4CD,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;gGA3FnB,SAAS;+CAyCsC,gBAAgB;+DAgC/D,cAAc;qCAcuB,UAAU;CASjD,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/dist/components/LDRadio/RadioBase.js

@@ -0,0 +1,46 @@
+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';
+const RadioContext = createContext(null);
+export const useRadioContext = () => {
+    const ctx = useContext(RadioContext);
+    if (!ctx)
+        throw new Error('RadioBase 하위 컴포넌트는 Root 내부에서 사용해야 합니다.');
+    return ctx;
+};
+const Root = ({ checked, defaultChecked = false, onCheckedChange, disabled = false, className, style, children, }) => {
+    const [internal, setInternal] = useState(defaultChecked);
+    const isControlled = checked !== undefined;
+    const resolved = isControlled ? checked : internal;
+    const handleChange = (val) => {
+        if (!isControlled)
+            setInternal(val);
+        onCheckedChange?.(val);
+    };
+    const resolvedClassName = typeof className === 'function' ? className(resolved) : className;
+    return (_jsx(RadioContext, { value: { checked: resolved, onCheckedChange: handleChange, disabled }, children: _jsx("label", { style: style, className: cn('flex flex-row w-fit gap-2.5 shrink-0', disabled
+                ? 'cursor-not-allowed pointer-events-none'
+                : 'cursor-pointer', resolvedClassName), children: children }) }));
+};
+const HiddenInput = ({ ref, onChange, ...props }) => {
+    const { checked, onCheckedChange, disabled } = useRadioContext();
+    return (_jsx("input", { type: "radio", ref: ref, className: "sr-only", checked: checked, disabled: disabled, onChange: (e) => {
+            e.stopPropagation();
+            onCheckedChange(e.target.checked);
+            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 Label = ({ className, children }) => {
+    return _jsx("span", { className: className, children: children });
+};
+export const RadioBase = {
+    Root,
+    HiddenInput,
+    Indicator,
+    Label,
+};
+export default RadioBase;

package/dist/components/LDScrollArea/LDScrollArea.d.ts

@@ -0,0 +1,15 @@
+import type { ReactNode } from 'react';
+type ScrollDirection = 'x' | 'y' | 'both';
+export interface LDScrollAreaProps {
+    direction?: ScrollDirection;
+    /** true이면 스크롤바를 숨깁니다 */
+    hideScrollbar?: boolean;
+    className?: string;
+    style?: React.CSSProperties;
+    children?: ReactNode;
+    /** 스크린리더에 전달할 영역 설명 */
+    ariaLabel?: string;
+}
+declare const LDScrollArea: ({ direction, hideScrollbar, className, style, children, ariaLabel, }: LDScrollAreaProps) => import("react/jsx-runtime").JSX.Element;
+export default LDScrollArea;
+//# sourceMappingURL=LDScrollArea.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LDScrollArea.d.ts","sourceRoot":"","sources":["../../../src/components/LDScrollArea/LDScrollArea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,KAAK,eAAe,GAAG,GAAG,GAAG,GAAG,GAAG,MAAM,CAAC;AAE1C,MAAM,WAAW,iBAAiB;IAChC,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B,wBAAwB;IACxB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,uBAAuB;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAQD,QAAA,MAAM,YAAY,GAAI,sEAOnB,iBAAiB,4CAmBnB,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/components/LDScrollArea/LDScrollArea.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import cn from '../../utils/cn.js';
+const DIRECTION_MAP = {
+    x: 'overflow-x-auto overflow-y-hidden',
+    y: 'overflow-y-auto overflow-x-hidden',
+    both: 'overflow-auto',
+};
+const LDScrollArea = ({ direction = 'y', hideScrollbar = false, className, style, children, ariaLabel = '스크롤 가능한 영역', }) => (_jsx("div", { role: "region", "aria-label": ariaLabel, tabIndex: 0, className: cn('overflow-hidden outline-none', className), style: style, children: _jsx("div", { className: cn('h-full w-full', DIRECTION_MAP[direction], hideScrollbar &&
+            '[&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]'), children: children }) }));
+export default LDScrollArea;

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"FormMultiSelect.d.ts","sourceRoot":"","sources":["../../../src/components/LDSelect/FormMultiSelect.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,iBAAiB,CAAC;AACvD,OAAsB,EAAE,KAAK,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAKzE,UAAU,oBAAqB,SAAQ,IAAI,CACzC,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,eAAe,GAAI,uHAWtB,oBAAoB,4CAuCtB,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/dist/components/LDSelect/FormMultiSelect.js

@@ -0,0 +1,14 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import LDMultiSelect from './LDMultiSelect.js';
+import FormField from '../Form/FormField.js';
+import FormErrorMessage from '../Form/FormErrorMessage.js';
+import cn from '../../utils/cn.js';
+const FormMultiSelect = ({ name, options, variant = 'filled', size = 'sm', 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;

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"FormSelect.d.ts","sourceRoot":"","sources":["../../../src/components/LDSelect/FormSelect.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,iBAAiB,CAAC;AACvD,OAAiB,EAAE,KAAK,aAAa,EAAE,MAAM,YAAY,CAAC;AAK1D,UAAU,eAAgB,SAAQ,IAAI,CACpC,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,UAAU,GAAI,uHAWjB,eAAe,4CAiCjB,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/components/LDSelect/FormSelect.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 '../Form/FormField.js';
+import FormErrorMessage from '../Form/FormErrorMessage.js';
+import cn from '../../utils/cn.js';
+const FormSelect = ({ name, options, variant = 'filled', size = 'sm', 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(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 FormSelect;

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

@@ -0,0 +1,31 @@
+import type React from 'react';
+import { type SelectOption } from './SelectBase.js';
+type MultiSelectVariant = 'filled' | 'outline' | 'ghost';
+type MultiSelectColor = 'neutral' | 'point' | 'danger';
+type MultiSelectSize = 'xs' | 'sm' | 'md' | 'lg';
+export interface LDMultiSelectProps {
+    items: SelectOption[];
+    placeholder?: string;
+    value?: string[];
+    onChange?: (value: string[]) => void;
+    disabled?: boolean;
+    name?: string;
+    variant?: MultiSelectVariant;
+    color?: MultiSelectColor;
+    size?: MultiSelectSize;
+    maxDisplay?: number;
+    /**
+     * true(기본): "A, B 외 N개" 요약 텍스트로 표시 (X 삭제 없음).
+     * false: X 삭제 버튼이 달린 칩을 전체 나열.
+     */
+    truncate?: boolean;
+    className?: string;
+    style?: React.CSSProperties;
+    contentClassName?: string;
+    'aria-invalid'?: boolean | 'true' | 'false';
+    '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;
+export default LDMultiSelect;
+//# sourceMappingURL=LDMultiSelect.d.ts.map

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

@@ -0,0 +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"}

package/dist/components/LDSelect/LDMultiSelect.js

@@ -0,0 +1,59 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import SelectBase from './SelectBase.js';
+import LucideIcon from '../Icon/LucideIcon.js';
+import cn from '../../utils/cn.js';
+// ── variant × color 조합 ──
+const variantColorClasses = {
+    filled: {
+        neutral: 'bg-neutral5 text-neutral100 border-[0.5px] border-mono200 data-[state=open]:border-lb500',
+        point: 'bg-neutral5 text-neutral100 border-[0.5px] border-mono200 data-[state=open]:border-lb500',
+        danger: 'bg-tintRed text-neutral100 border-[0.5px] border-transparent data-[state=open]:border-red500',
+    },
+    outline: {
+        neutral: 'bg-transparent text-neutral100 border border-neutral10 data-[state=open]:border-lb500',
+        point: 'bg-transparent text-neutral100 border border-neutral10 data-[state=open]:border-lb500',
+        danger: 'bg-transparent text-neutral100 border border-danger100 data-[state=open]:border-red500',
+    },
+    ghost: {
+        neutral: 'bg-transparent text-neutral100 border-[0.5px] border-transparent data-[state=open]:border-lb500 hover:bg-neutral5',
+        point: 'bg-transparent text-neutral100 border-[0.5px] border-transparent data-[state=open]:border-lb500 hover:bg-neutral5',
+        danger: 'bg-transparent text-danger500 border-[0.5px] border-transparent data-[state=open]:border-red500 hover:bg-tintRed',
+    },
+};
+const disabledVariantClasses = {
+    filled: 'bg-mono20 text-neutral20',
+    outline: 'bg-transparent text-neutral20 border border-mono20',
+    ghost: 'bg-transparent text-neutral20',
+};
+const sizeClasses = {
+    xs: 'min-h-[38px] display14',
+    sm: 'min-h-10 display14',
+    md: 'min-h-[56px] display16',
+    lg: 'min-h-[62px] display18',
+};
+const iconSizes = {
+    xs: 15,
+    sm: 15,
+    md: 16,
+    lg: 16,
+};
+const LDMultiSelect = ({ items, placeholder = '선택하세요', value = [], onChange, disabled = false, name, variant, color = 'neutral', size, maxDisplay = 2, truncate = true, className, style, contentClassName, 'aria-invalid': ariaInvalid, 'aria-describedby': ariaDescribedby, }) => {
+    const iconSize = iconSizes[size ?? 'sm'];
+    return (_jsxs(SelectBase.Root, { multiple: true, values: value, onMultiChange: onChange, disabled: disabled, name: name, items: items, maxDisplay: maxDisplay, children: [_jsx(SelectBase.Trigger, { style: style, "aria-invalid": ariaInvalid, "aria-describedby": ariaDescribedby, className: cn('group rounded-[5px] ld-transition outline-none cursor-pointer', variant &&
+                    (disabled
+                        ? disabledVariantClasses[variant]
+                        : variantColorClasses[variant][color]), size && sizeClasses[size], disabled && 'cursor-not-allowed disabled:cursor-not-allowed', className), children: truncate ? (_jsxs("div", { className: "flex gap-sm items-center w-full justify-center px-3 py-1.5", children: [_jsx(SelectBase.Value, { placeholder: placeholder, className: "flex flex-1 bold display14 justify-center text-neutral900", placeholderClassName: "text-neutral200" }), _jsx(LucideIcon, { name: "chevronDown", size: iconSize, className: "text-neutral500 shrink-0" })] })) : (_jsxs("div", { className: "flex gap-sm items-center w-full justify-between px-3 py-1.5", children: [_jsx("div", { className: "flex flex-1 flex-wrap gap-1.5 items-center justify-start text-left", children: value.length === 0 ? (_jsx("span", { className: "text-neutral900", children: placeholder })) : (value.map((v) => {
+                                const label = items.find((i) => i.value === v)?.label || v;
+                                return (_jsxs("span", { className: "flex items-center justify-between px-2 py-1 bg-white rounded-[4px] display12 text-neutral900 shadow-sm", children: [label, _jsx("div", { role: "button", "aria-label": `${label} 삭제`, onClick: (e) => {
+                                                e.stopPropagation();
+                                                e.preventDefault();
+                                                if (!disabled) {
+                                                    onChange?.(value.filter((val) => val !== v));
+                                                }
+                                            }, className: "ml-1 text-neutral900 hover:text-neutral800 cursor-pointer flex items-center justify-center", children: _jsx(LucideIcon, { name: "x", size: 14 }) })] }, v));
+                            })) }), _jsx(LucideIcon, { name: "chevronDown", size: iconSize, className: "text-neutral40 shrink-0" })] })) }), _jsx(SelectBase.Content, { className: cn('rounded-[5px] bg-mono5 border border-mono200 p-2 flex flex-col gap-[2px]', 'origin-top overflow-hidden ld-transition', contentClassName), openClassName: "max-h-[230px] opacity-100 translate-y-0 overflow-y-auto scrollbar-none", closedClassName: "max-h-0 opacity-0 -translate-y-1 pointer-events-none", children: items.map((opt) => {
+                    const isSelected = value.includes(opt.value);
+                    return (_jsxs(SelectBase.Item, { value: opt.value, className: cn('cursor-pointer hover:bg-neutral5 py-xs px-sm rounded-[5px] display14 regular transition-all duration-200 outline-none', 'focus:bg-neutral5 focus:ring-1 focus:ring-inset focus:ring-lb500', 'flex items-center gap-2', isSelected && 'bg-neutral5'), children: [_jsx("div", { className: cn('w-4 h-4 rounded border flex items-center justify-center transition-all', isSelected ? 'bg-lb500 border-lb500' : 'border-neutral20'), children: isSelected && (_jsx(LucideIcon, { name: "check", size: 12, className: "text-white" })) }), _jsx(SelectBase.ItemText, { children: opt.label })] }, opt.value));
+                }) })] }));
+};
+export default LDMultiSelect;

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

@@ -0,0 +1,41 @@
+import type { CSSProperties } from 'react';
+import { type SelectOption } from './SelectBase.js';
+type SelectVariant = 'filled' | 'outline' | 'ghost';
+type SelectColor = 'neutral' | 'point' | 'danger';
+type SelectSize = 'xs' | 'sm' | 'md' | 'lg';
+export interface LDSelectProps {
+    /** 선택 옵션 목록 ({ value, label }) */
+    items: SelectOption[];
+    /** 미선택 시 표시할 텍스트 */
+    placeholder?: string;
+    /** 현재 선택된 값 (controlled) */
+    value?: string;
+    /** 초기 선택 값 (uncontrolled) */
+    defaultValue?: string;
+    /** 값 변경 시 호출되는 콜백 */
+    onChange?: (value: string) => void;
+    /** 비활성화 여부 */
+    disabled?: boolean;
+    /** 폼 필드 이름 */
+    name?: string;
+    /** 드롭다운 스타일 유형 */
+    variant?: SelectVariant;
+    /** 색상 테마 */
+    color?: SelectColor;
+    /** 드롭다운 높이 및 폰트 크기 프리셋 */
+    size?: SelectSize;
+    /** 추가 CSS 클래스 */
+    className?: string;
+    /** 인라인 스타일 */
+    style?: CSSProperties;
+    /** 드롭다운 콘텐츠 영역 className */
+    contentClassName?: string;
+    /** 에러 상태 속성 */
+    'aria-invalid'?: boolean | 'true' | 'false';
+    /** 설명 요소 ID 연결 */
+    'aria-describedby'?: string;
+}
+export type { SelectOption };
+declare const LDSelect: ({ items, placeholder, value, defaultValue, onChange, disabled, name, variant, color, size, className, style, contentClassName, "aria-invalid": ariaInvalid, "aria-describedby": ariaDescribedby, }: LDSelectProps) => import("react/jsx-runtime").JSX.Element;
+export default LDSelect;
+//# sourceMappingURL=LDSelect.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LDSelect.d.ts","sourceRoot":"","sources":["../../../src/components/LDSelect/LDSelect.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAmB,EAAE,KAAK,YAAY,EAAE,MAAM,cAAc,CAAC;AAK7D,KAAK,aAAa,GAAG,QAAQ,GAAG,SAAS,GAAG,OAAO,CAAC;AACpD,KAAK,WAAW,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,CAAC;AAClD,KAAK,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAwD5C,MAAM,WAAW,aAAa;IAC5B,kCAAkC;IAClC,KAAK,EAAE,YAAY,EAAE,CAAC;IACtB,oBAAoB;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,4BAA4B;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,6BAA6B;IAC7B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,cAAc;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,cAAc;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,kBAAkB;IAClB,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,YAAY;IACZ,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,0BAA0B;IAC1B,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,iBAAiB;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc;IACd,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,4BAA4B;IAC5B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,eAAe;IACf,cAAc,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC;IAC5C,kBAAkB;IAClB,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED,YAAY,EAAE,YAAY,EAAE,CAAC;AAE7B,QAAA,MAAM,QAAQ,GAAI,oMAgBf,aAAa,4CAyEf,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/dist/components/LDSelect/LDSelect.js

@@ -0,0 +1,55 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import SelectBase from './SelectBase.js';
+import LucideIcon from '../Icon/LucideIcon.js';
+import cn from '../../utils/cn.js';
+// ── variant × color 조합 (LDDropdown 기준) ──
+const variantColorClasses = {
+    filled: {
+        neutral: 'bg-neutral50 text-neutral900 border-[0.5px] border-transparent data-[state=open]:border-lb500',
+        point: 'bg-neutral50 text-neutral900 border-[0.5px] border-transparent data-[state=open]:border-lb500',
+        danger: 'bg-tintRed text-neutral900 border-[0.5px] border-transparent data-[state=open]:border-red500',
+    },
+    outline: {
+        neutral: 'bg-transparent text-neutral900 border border-neutral100 data-[state=open]:border-lb500',
+        point: 'bg-transparent text-neutral900 border border-neutral100 data-[state=open]:border-lb500',
+        danger: 'bg-transparent text-neutral900 border border-danger100 data-[state=open]:border-red500',
+    },
+    ghost: {
+        neutral: 'bg-transparent text-neutral900 border-[0.5px] border-transparent data-[state=open]:border-lb500 hover:bg-neutral50',
+        point: 'bg-transparent text-neutral900 border-[0.5px] border-transparent data-[state=open]:border-lb500 hover:bg-neutral50',
+        danger: 'bg-transparent text-danger500 border-[0.5px] border-transparent data-[state=open]:border-red500 hover:bg-tintRed',
+    },
+};
+// ── disabled 시 variant별 스타일 ──
+const disabledVariantClasses = {
+    filled: 'bg-mono300 text-neutral300',
+    outline: 'bg-transparent text-neutral300 border border-mono300',
+    ghost: 'bg-transparent text-neutral300',
+};
+// ── size (LDDropdown: display14, h-[38px] 기준) ──
+const sizeClasses = {
+    xs: 'h-[38px] display14',
+    sm: 'h-10 display14',
+    md: 'h-[56px] display16',
+    lg: 'h-[62px] display18',
+};
+const iconSizes = {
+    xs: 15,
+    sm: 15,
+    md: 16,
+    lg: 16,
+};
+const LDSelect = ({ items, placeholder = '선택하세요', value, defaultValue, onChange, disabled = false, name, variant, color = 'neutral', size, className, style, contentClassName, 'aria-invalid': ariaInvalid, 'aria-describedby': ariaDescribedby, }) => {
+    const iconSize = iconSizes[size ?? 'sm'];
+    // value가 items에 매칭되지 않으면 undefined (Value가 placeholder 표시)
+    const resolvedValue = items.some((item) => item.value === value)
+        ? value
+        : undefined;
+    return (_jsxs(SelectBase.Root, { value: resolvedValue, defaultValue: defaultValue, onChange: onChange, disabled: disabled, name: name, items: items, children: [_jsx(SelectBase.Trigger, { style: style, "aria-invalid": ariaInvalid, "aria-describedby": ariaDescribedby, className: cn('group rounded-[5px] ld-transition outline-none cursor-pointer', variant &&
+                    (disabled
+                        ? disabledVariantClasses[variant]
+                        : variantColorClasses[variant][color]), size && sizeClasses[size], disabled && 'cursor-not-allowed disabled:cursor-not-allowed', className), children: _jsxs("div", { className: "flex gap-sm items-center w-full justify-center px-3", children: [_jsx(SelectBase.Value, { placeholder: placeholder, className: "flex flex-1 bold justify-center" }), _jsx(LucideIcon, { name: "chevronDown", size: iconSize, className: "text-neutral500" })] }) }), _jsx(SelectBase.Content, { className: cn('rounded-[5px] bg-white border border-mono100 p-2 flex flex-col gap-3xs', 'origin-top overflow-hidden ld-transition', contentClassName), openClassName: "max-h-[230px] opacity-100 translate-y-0 overflow-y-auto scrollbar-none", closedClassName: "max-h-0 opacity-0 -translate-y-1 pointer-events-none", children: items.map((opt) => (_jsx(SelectBase.Item, { value: opt.value, className: cn('w-full text-left px-3 py-2 rounded-[5px] display14 transition-all cursor-pointer outline-none', 'hover:bg-lb50 hover:text-lb500', 'focus:bg-lb50 focus:text-lb500 focus:ring-1 focus:ring-inset focus:ring-lb500', resolvedValue === opt.value
+                        ? 'bg-neutral10 font-bold text-neutral900'
+                        : 'text-neutral800'), children: _jsx(SelectBase.ItemText, { children: opt.label }) }, opt.value))) })] }));
+};
+export default LDSelect;

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

@@ -0,0 +1,59 @@
+import { type CSSProperties, type ReactNode } from 'react';
+interface RootProps {
+    multiple?: boolean;
+    value?: string;
+    defaultValue?: string;
+    values?: string[];
+    defaultValues?: string[];
+    onChange?: (value: string) => void;
+    onMultiChange?: (value: string[]) => void;
+    disabled?: boolean;
+    name?: string;
+    items?: SelectOption[];
+    maxDisplay?: number;
+    children?: ReactNode;
+}
+interface TriggerProps {
+    className?: string;
+    style?: CSSProperties;
+    children?: ReactNode;
+    'aria-invalid'?: boolean | 'true' | 'false';
+    'aria-describedby'?: string;
+}
+interface ValueProps {
+    placeholder?: string;
+    className?: string;
+    placeholderClassName?: string;
+}
+interface ContentProps {
+    className?: string;
+    openClassName?: string;
+    closedClassName?: string;
+    children?: ReactNode;
+}
+interface ItemProps {
+    value: string;
+    className?: string;
+    children?: ReactNode;
+}
+interface ItemIndicatorProps {
+    className?: string;
+    children?: ReactNode;
+}
+export interface SelectOption {
+    label: string;
+    value: string;
+}
+export declare const SelectBase: {
+    Root: ({ multiple, value, defaultValue, values, defaultValues, onChange, onMultiChange, disabled, name, items, maxDisplay, children, }: RootProps) => import("react/jsx-runtime").JSX.Element;
+    Trigger: ({ className, style, children, "aria-invalid": ariaInvalid, "aria-describedby": ariaDescribedby, }: TriggerProps) => import("react/jsx-runtime").JSX.Element;
+    Value: ({ placeholder, className, placeholderClassName, }: ValueProps) => import("react/jsx-runtime").JSX.Element;
+    Content: ({ className, openClassName, closedClassName, children, }: ContentProps) => import("react/jsx-runtime").JSX.Element;
+    Item: ({ value: itemValue, className, children }: ItemProps) => import("react/jsx-runtime").JSX.Element;
+    ItemText: ({ children }: {
+        children?: ReactNode;
+    }) => import("react/jsx-runtime").JSX.Element;
+    ItemIndicator: ({ className, children }: ItemIndicatorProps) => import("react/jsx-runtime").JSX.Element | null;
+};
+export default SelectBase;
+//# sourceMappingURL=SelectBase.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SelectBase.d.ts","sourceRoot":"","sources":["../../../src/components/LDSelect/SelectBase.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,aAAa,EAClB,KAAK,SAAS,EAQf,MAAM,OAAO,CAAC;AAsCf,UAAU,SAAS;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,aAAa,CAAC,EAAE,MAAM,EAAE,CAAC;IACzB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAC1C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,YAAY,EAAE,CAAC;IACvB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAsGD,UAAU,YAAY;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,cAAc,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC;IAC5C,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAyDD,UAAU,UAAU;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oBAAoB,CAAC,EAAE,MAAM,CAAC;CAC/B;AA8CD,UAAU,YAAY;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AA4DD,UAAU,SAAS;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AA4FD,UAAU,kBAAkB;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAeD,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAED,eAAO,MAAM,UAAU;4IAhYpB,SAAS;iHAqGT,YAAY;+DA2DZ,UAAU;wEAoDV,YAAY;sDA2D0C,SAAS;6BAqFlC;QAAE,QAAQ,CAAC,EAAE,SAAS,CAAA;KAAE;6CAUR,kBAAkB;CA0BjE,CAAC;AAEF,eAAe,UAAU,CAAC"}