@loword/loword-design-system 0.0.1

package/dist/components/Pagination/PaginationBase.d.ts

@@ -0,0 +1,36 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+interface ProviderProps {
+    children: ReactNode;
+    currentPage: number;
+    totalPages: number;
+    onPageChange: (page: number) => void;
+}
+interface RootProps extends HTMLAttributes<HTMLElement> {
+    children?: ReactNode;
+}
+interface PrevProps {
+    className?: string;
+}
+interface NextProps {
+    className?: string;
+}
+interface ListProps {
+    numbersToShow?: number;
+    className?: string;
+}
+interface ItemProps {
+    page: number;
+    isActive?: boolean;
+    onClick?: () => void;
+    className?: string;
+}
+declare const PaginationBase: {
+    Provider: ({ children, currentPage, totalPages, onPageChange, }: ProviderProps) => import("react/jsx-runtime").JSX.Element;
+    Root: ({ className, children, ...props }: RootProps) => import("react/jsx-runtime").JSX.Element;
+    Prev: ({ className }: PrevProps) => import("react/jsx-runtime").JSX.Element;
+    Next: ({ className }: NextProps) => import("react/jsx-runtime").JSX.Element;
+    List: ({ numbersToShow, className }: ListProps) => import("react/jsx-runtime").JSX.Element;
+    Item: ({ page, isActive, onClick, className }: ItemProps) => import("react/jsx-runtime").JSX.Element;
+};
+export default PaginationBase;
+//# sourceMappingURL=PaginationBase.d.ts.map

package/dist/components/Pagination/PaginationBase.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PaginationBase.d.ts","sourceRoot":"","sources":["../../../src/components/Pagination/PaginationBase.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AA0BvD,UAAU,aAAa;IACrB,QAAQ,EAAE,SAAS,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CACtC;AAeD,UAAU,SAAU,SAAQ,cAAc,CAAC,WAAW,CAAC;IACrD,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAcD,UAAU,SAAS;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AA6BD,UAAU,SAAS;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AA6BD,UAAU,SAAS;IACjB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AA0BD,UAAU,SAAS;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAkBD,QAAA,MAAM,cAAc;qEA1IjB,aAAa;8CAYiC,SAAS;0BAgB7B,SAAS;0BA+BT,SAAS;yCAgCU,SAAS;mDA+BH,SAAS;CAuB9D,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/components/Pagination/PaginationBase.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { createContext, useContext } from 'react';
+import cn from '../../utils/cn.js';
+import Button from '../Button/Button.js';
+import { calculatePaginationOptions } from './paginationUtils.js';
+const PaginationContext = createContext(null);
+const usePaginationContext = () => {
+    const ctx = useContext(PaginationContext);
+    if (!ctx)
+        throw new Error('PaginationBase 서브컴포넌트는 PaginationBase.Provider 내부에서 사용해야 합니다.');
+    return ctx;
+};
+const Provider = ({ children, currentPage, totalPages, onPageChange, }) => (_jsx(PaginationContext, { value: { currentPage, totalPages, onPageChange }, children: children }));
+const Root = ({ className, children, ...props }) => (_jsx("nav", { role: "navigation", "aria-label": "pagination", className: cn('flex flex-row gap-2.5 items-center', className), ...props, children: children }));
+const Prev = ({ className }) => {
+    const { currentPage, onPageChange } = usePaginationContext();
+    const canPrevious = currentPage > 1;
+    return (_jsx(Button, { variant: "outline", color: "neutral", size: "medium", shape: "capsule", leftIcon: "chevronLeft", disabled: !canPrevious, onClick: () => onPageChange(currentPage - 1), "aria-label": "\uC774\uC804 \uD398\uC774\uC9C0", className: cn('size-lg! regular! p-0!', canPrevious
+            ? 'bg-neutral100! text-neutral400!'
+            : 'bg-neutral50! text-neutral200!', canPrevious && 'hover:bg-neutral200!', className) }));
+};
+const Next = ({ className }) => {
+    const { currentPage, totalPages, onPageChange } = usePaginationContext();
+    const canNext = currentPage < totalPages;
+    return (_jsx(Button, { variant: "outline", color: "neutral", size: "medium", shape: "capsule", leftIcon: "chevronRight", disabled: !canNext, onClick: () => onPageChange(currentPage + 1), "aria-label": "\uB2E4\uC74C \uD398\uC774\uC9C0", className: cn('size-lg! regular! p-0!', canNext
+            ? 'bg-neutral100! text-neutral400!'
+            : 'bg-neutral50! text-neutral200!', canNext && 'hover:bg-neutral200!', className) }));
+};
+const List = ({ numbersToShow = 5, className }) => {
+    const { currentPage, totalPages, onPageChange } = usePaginationContext();
+    const pages = calculatePaginationOptions(currentPage, totalPages, numbersToShow);
+    return (_jsx(_Fragment, { children: pages.map((page, idx) => (_jsx(Item, { page: page, isActive: currentPage === page, onClick: () => onPageChange(page), className: className }, `page_${page}_${idx}`))) }));
+};
+const Item = ({ page, isActive, onClick, className }) => (_jsx(Button, { variant: "ghost", color: isActive ? 'point' : 'neutral', size: "medium", onClick: onClick, "aria-label": `${page} 페이지`, "aria-current": isActive ? 'page' : undefined, className: cn('size-lg! regular! rounded-full', className), children: page }));
+// ── Export ──
+const PaginationBase = {
+    Provider,
+    Root,
+    Prev,
+    Next,
+    List,
+    Item,
+};
+export default PaginationBase;

package/dist/components/Pagination/paginationUtils.d.ts

@@ -0,0 +1,2 @@
+export declare const calculatePaginationOptions: (currentPage?: number, totalPages?: number, numbersToShow?: number) => number[];
+//# sourceMappingURL=paginationUtils.d.ts.map

package/dist/components/Pagination/paginationUtils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"paginationUtils.d.ts","sourceRoot":"","sources":["../../../src/components/Pagination/paginationUtils.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,0BAA0B,GACrC,cAAa,MAAU,EACvB,aAAY,MAAU,EACtB,gBAAe,MAAU,aAuB1B,CAAC"}

package/dist/components/Pagination/paginationUtils.js

@@ -0,0 +1,18 @@
+export const calculatePaginationOptions = (currentPage = 1, totalPages = 1, numbersToShow = 5) => {
+    const half = Math.floor(numbersToShow / 2);
+    let startPage = currentPage - half;
+    let endPage = currentPage + half;
+    if (startPage < 1) {
+        startPage = 1;
+        endPage = Math.min(numbersToShow, totalPages);
+    }
+    if (endPage > totalPages) {
+        endPage = totalPages;
+        startPage = Math.max(1, totalPages - numbersToShow + 1);
+    }
+    const paginationOptions = [];
+    for (let i = startPage; i <= endPage; ++i) {
+        paginationOptions.push(i);
+    }
+    return paginationOptions;
+};

package/dist/components/Popover/Popover.d.ts

@@ -0,0 +1,42 @@
+import { type ReactNode } from 'react';
+type ItemColor = 'blue' | 'red' | 'gray';
+type IconSize = 'sm' | 'md' | 'lg';
+export interface PopoverItem {
+    /** 메뉴 항목 텍스트 또는 ReactNode */
+    label: ReactNode;
+    /** 항목 색상 */
+    color?: ItemColor;
+    /** 항목 클릭 시 실행할 함수 */
+    onClick: () => void;
+}
+export interface PopoverProps {
+    /** 메뉴 항목 목록 (제공 시 메뉴형으로 동작) */
+    items?: PopoverItem[];
+    /** 팝오버 내부 커스텀 콘텐츠 (items보다 우선순위가 높음) */
+    content?: ReactNode;
+    /** 커스텀 트리거 요소 (미제공 시 iconSize/isHorizontal 기반 기본 말줄임표 트리거 렌더) */
+    children?: ReactNode;
+    /** 팝오버 열림 상태 (Controlled) */
+    open?: boolean;
+    /** 열림 상태 변경 핸들러 (Controlled) */
+    onOpenChange?: (open: boolean) => void;
+    /** 트리거 아이콘 크기 프리셋 (기본 트리거 사용 시) */
+    iconSize?: IconSize;
+    /** true 시 가로 말줄임표 아이콘 사용 (기본 트리거 사용 시) */
+    isHorizontal?: boolean;
+    /** 팝오버 정렬 위치 */
+    align?: 'start' | 'center' | 'end';
+    /** 트리거와 팝오버 사이 간격 (px) */
+    offset?: number;
+    /** 콘텐츠 너비 (숫자, 문자열, 혹은 'trigger'로 트리거와 일치) */
+    contentWidth?: number | string | 'trigger';
+    /** 트리거 버튼 className */
+    triggerClassName?: string;
+    /** 팝오버 콘텐츠 className */
+    popoverClassName?: string;
+    /** 인라인 스타일 (트리거 버튼에 적용) */
+    style?: React.CSSProperties;
+}
+declare const Popover: ({ items, content, children, open, onOpenChange, iconSize, isHorizontal, align, offset, contentWidth, triggerClassName, popoverClassName, style, }: PopoverProps) => import("react/jsx-runtime").JSX.Element;
+export default Popover;
+//# sourceMappingURL=Popover.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Popover.d.ts","sourceRoot":"","sources":["../../../src/components/Popover/Popover.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAkB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAKvD,KAAK,SAAS,GAAG,MAAM,GAAG,KAAK,GAAG,MAAM,CAAC;AAEzC,KAAK,QAAQ,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEnC,MAAM,WAAW,WAAW;IAC1B,6BAA6B;IAC7B,KAAK,EAAE,SAAS,CAAC;IACjB,YAAY;IACZ,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,qBAAqB;IACrB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,MAAM,WAAW,YAAY;IAC3B,+BAA+B;IAC/B,KAAK,CAAC,EAAE,WAAW,EAAE,CAAC;IACtB,wCAAwC;IACxC,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,iEAAiE;IACjE,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,6BAA6B;IAC7B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,gCAAgC;IAChC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,mCAAmC;IACnC,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,0CAA0C;IAC1C,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,gBAAgB;IAChB,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;IACnC,0BAA0B;IAC1B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,8CAA8C;IAC9C,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;IAC3C,uBAAuB;IACvB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,wBAAwB;IACxB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,2BAA2B;IAC3B,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAeD,QAAA,MAAM,OAAO,GAAI,mJAcd,YAAY,4CA8Dd,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/dist/components/Popover/Popover.js

@@ -0,0 +1,31 @@
+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';
+// ── 스타일 매핑 ──
+const itemColorClasses = {
+    blue: 'hover:bg-tintBlue text-lb500',
+    red: 'hover:bg-tintRed text-danger600',
+    gray: 'hover:bg-mono10 text-neutral40',
+};
+const iconSizes = {
+    sm: 12,
+    md: 20,
+    lg: 24,
+};
+const Popover = ({ items, content, children, open, onOpenChange, iconSize = 'sm', 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-mono10', triggerClassName), children: isAsChild ? (children) : (_jsx(LucideIcon, { name: isHorizontal ? 'ellipsis' : 'ellipsisVertical', size: iconSizes[iconSize], className: "text-neutral40" })) }), _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-mono10 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();
+                            e.preventDefault();
+                            item.onClick();
+                        }, children: item.label }, index))) })] }));
+};
+export default Popover;

package/dist/components/Popover/PopoverBase.d.ts

@@ -0,0 +1,31 @@
+import { type ReactNode } from 'react';
+interface RootProps {
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    children?: ReactNode;
+}
+interface TriggerProps {
+    disabled?: boolean;
+    className?: string;
+    style?: React.CSSProperties;
+    children?: ReactNode;
+    onClick?: (e: React.MouseEvent) => void;
+    /** Radix의 asChild 속성 (자식 요소를 트리거로 사용) */
+    asChild?: boolean;
+}
+interface ContentProps {
+    align?: 'start' | 'center' | 'end';
+    sideOffset?: number;
+    className?: string;
+    children?: ReactNode;
+    style?: React.CSSProperties;
+    /** 팝오버가 열릴 때 자동으로 포커스되는 동작을 커스텀 */
+    onOpenAutoFocus?: (event: Event) => void;
+}
+export declare const PopoverBase: {
+    Root: ({ open, onOpenChange, children }: RootProps) => import("react/jsx-runtime").JSX.Element;
+    Trigger: ({ disabled, className, style, children, onClick, asChild, }: TriggerProps) => import("react/jsx-runtime").JSX.Element;
+    Content: ({ align, sideOffset, className, children, style, onOpenAutoFocus, }: ContentProps) => import("react/jsx-runtime").JSX.Element;
+};
+export default PopoverBase;
+//# sourceMappingURL=PopoverBase.d.ts.map

package/dist/components/Popover/PopoverBase.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PopoverBase.d.ts","sourceRoot":"","sources":["../../../src/components/Popover/PopoverBase.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAKvC,UAAU,SAAS;IACjB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAWD,UAAU,YAAY;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACxC,yCAAyC;IACzC,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAwBD,UAAU,YAAY;IACpB,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;IACnC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,mCAAmC;IACnC,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;CAC1C;AA6BD,eAAO,MAAM,WAAW;6CA9EwB,SAAS;2EA0BtD,YAAY;mFAgCZ,YAAY;CAwBd,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/components/Popover/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/Radio/FormRadioGroup.d.ts

@@ -0,0 +1,13 @@
+import { type RegisterOptions } from 'react-hook-form';
+import { type RadioGroupProps } from './RadioGroup.js';
+interface FormRadioGroupProps extends Omit<RadioGroupProps, '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/Radio/FormRadioGroup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormRadioGroup.d.ts","sourceRoot":"","sources":["../../../src/components/Radio/FormRadioGroup.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,iBAAiB,CAAC;AACvD,OAAmB,EAAE,KAAK,eAAe,EAAE,MAAM,cAAc,CAAC;AAIhE,UAAU,mBAAoB,SAAQ,IAAI,CACxC,eAAe,EACf,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/Radio/FormRadioGroup.js

@@ -0,0 +1,9 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import RadioGroup from './RadioGroup.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(RadioGroup, { ...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/Radio/Radio.d.ts

@@ -0,0 +1,24 @@
+import { type InputHTMLAttributes, type Ref } from 'react';
+type RadioSize = 'sm' | 'md';
+type RadioType = 'default' | 'pill';
+export interface RadioProps 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 Radio: ({ checked, defaultChecked, onCheckedChange, size, type, label, disabled, className, style, ref, ...props }: RadioProps) => import("react/jsx-runtime").JSX.Element;
+export default Radio;
+//# sourceMappingURL=Radio.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Radio.d.ts","sourceRoot":"","sources":["../../../src/components/Radio/Radio.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,UAAW,SAAQ,IAAI,CACtC,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,KAAK,GAAI,4GAYZ,UAAU,4CA0CZ,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/dist/components/Radio/Radio.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 Radio = ({ 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 Radio;

package/dist/components/Radio/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/Radio/RadioBase.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioBase.d.ts","sourceRoot":"","sources":["../../../src/components/Radio/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/Radio/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/Radio/RadioGroup.d.ts

@@ -0,0 +1,22 @@
+import type React from 'react';
+export interface RadioGroupOption {
+    label: string;
+    value: string;
+    disabled?: boolean;
+}
+export interface RadioGroupProps {
+    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 RadioGroup: ({ items, value, onChange, disabled, type, size, name, "aria-invalid": ariaInvalid, "aria-describedby": ariaDescribedby, className, style, }: RadioGroupProps) => import("react/jsx-runtime").JSX.Element;
+export default RadioGroup;
+//# sourceMappingURL=RadioGroup.d.ts.map

package/dist/components/Radio/RadioGroup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioGroup.d.ts","sourceRoot":"","sources":["../../../src/components/Radio/RadioGroup.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,eAAe;IAC9B,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,UAAU,GAAI,6IAYjB,eAAe,4CAuBjB,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/components/Radio/RadioGroup.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Radio from './Radio.js';
+import cn from '../../utils/cn.js';
+const RadioGroup = ({ 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(Radio, { 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 RadioGroup;

package/dist/components/ScrollArea/ScrollArea.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollArea.d.ts","sourceRoot":"","sources":["../../../src/components/ScrollArea/ScrollArea.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,eAAe;IAC9B,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,UAAU,GAAI,sEAOjB,eAAe,4CAmBjB,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/components/ScrollArea/ScrollArea.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 ScrollArea = ({ 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 ScrollArea;

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

@@ -0,0 +1,13 @@
+import { type RegisterOptions } from 'react-hook-form';
+import { type MultiSelectProps } from './MultiSelect.js';
+interface FormMultiSelectProps extends Omit<MultiSelectProps, '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/Select/FormMultiSelect.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormMultiSelect.d.ts","sourceRoot":"","sources":["../../../src/components/Select/FormMultiSelect.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,iBAAiB,CAAC;AACvD,OAAoB,EAAE,KAAK,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAKnE,UAAU,oBAAqB,SAAQ,IAAI,CACzC,gBAAgB,EAChB,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/Select/FormMultiSelect.js

@@ -0,0 +1,14 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import MultiSelect from './MultiSelect.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(MultiSelect, { ...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/Select/FormSelect.d.ts

@@ -0,0 +1,13 @@
+import { type RegisterOptions } from 'react-hook-form';
+import { type SelectProps } from './Select.js';
+interface FormSelectProps extends Omit<SelectProps, '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/Select/FormSelect.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormSelect.d.ts","sourceRoot":"","sources":["../../../src/components/Select/FormSelect.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,iBAAiB,CAAC;AACvD,OAAe,EAAE,KAAK,WAAW,EAAE,MAAM,UAAU,CAAC;AAKpD,UAAU,eAAgB,SAAQ,IAAI,CACpC,WAAW,EACX,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/Select/FormSelect.js

@@ -0,0 +1,10 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Select from './Select.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(Select, { ...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/Select/MultiSelect.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 MultiSelectProps {
+    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 MultiSelect: ({ items, placeholder, value, onChange, disabled, name, variant, color, size, maxDisplay, truncate, className, style, contentClassName, "aria-invalid": ariaInvalid, "aria-describedby": ariaDescribedby, }: MultiSelectProps) => import("react/jsx-runtime").JSX.Element;
+export default MultiSelect;
+//# sourceMappingURL=MultiSelect.d.ts.map

package/dist/components/Select/MultiSelect.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultiSelect.d.ts","sourceRoot":"","sources":["../../../src/components/Select/MultiSelect.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,gBAAgB;IAC/B,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,WAAW,GAAI,4MAiBlB,gBAAgB,4CA0HlB,CAAC;AAEF,eAAe,WAAW,CAAC"}