@loword/loword-design-system 0.0.1

package/dist/components/Form/FormErrorMessage.d.ts

@@ -0,0 +1,9 @@
+interface FormErrorMessageProps {
+    id?: string;
+    error: string;
+    disabled?: boolean;
+    className?: string;
+}
+declare const FormErrorMessage: ({ id, error, disabled, className, }: FormErrorMessageProps) => import("react/jsx-runtime").JSX.Element;
+export default FormErrorMessage;
+//# sourceMappingURL=FormErrorMessage.d.ts.map

package/dist/components/Form/FormErrorMessage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormErrorMessage.d.ts","sourceRoot":"","sources":["../../../src/components/Form/FormErrorMessage.tsx"],"names":[],"mappings":"AAEA,UAAU,qBAAqB;IAC7B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,QAAA,MAAM,gBAAgB,GAAI,qCAKvB,qBAAqB,4CAcvB,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/dist/components/Form/FormErrorMessage.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import cn from '../../utils/cn.js';
+const FormErrorMessage = ({ id, error, disabled = false, className, }) => {
+    return (_jsx("div", { id: id, role: "alert", className: cn('text-red500 display12 bold absolute bottom-1 right-2', error && !disabled ? 'error-show' : 'error-hide', className), children: error && `*${error}` }));
+};
+export default FormErrorMessage;

package/dist/components/Form/FormField.d.ts

@@ -0,0 +1,55 @@
+import { type ReactNode, type Ref } from 'react';
+import { type RegisterOptions } from 'react-hook-form';
+interface FieldState {
+    error: string;
+    hasError: boolean;
+    errorId?: string;
+}
+/**
+ * FormField의 render prop에 전달되는 인자 타입.
+ *
+ * @template TValue - 폼 필드의 값 타입. string, string[], boolean 등 다양한 타입을
+ * 지원하기 위해 기본값이 any인 제네릭으로 선언됨.
+ * 사용처에서 `<FormField<string>>` 와 같이 구체화할 수 있음.
+ */
+interface FormFieldRenderProps<TValue = any> {
+    field: {
+        name: string;
+        value: TValue;
+        /**
+         * react-hook-form의 controllerField.ref와 외부 ref를 합친 콜백 ref.
+         * Input, Select 등 다양한 DOM 요소에 연결되므로 element 타입을 any로 받음.
+         */
+        ref: (element: any) => void;
+        /**
+         * react-hook-form 내부에서 `(...event: any[]) => void` 로 정의된 시그니처를 그대로 따름.
+         * 임의로 좁히면 라이브러리 타입과 충돌이 발생함.
+         */
+        onChange: (...event: any[]) => void;
+        onBlur: () => void;
+        disabled?: boolean;
+        /** 에러 발생 시 true, 정상 시 false */
+        'aria-invalid'?: boolean | 'true' | 'false';
+        /** 에러 메시지 요소의 id와 연결되어 스크린 리더에서 에러를 읽을 수 있게 함 */
+        'aria-describedby'?: string;
+    };
+    fieldState: FieldState;
+    resetField: (options?: {
+        defaultValue?: TValue;
+    }) => void;
+}
+interface FormFieldProps<TValue = any> {
+    name: string;
+    options?: RegisterOptions;
+    customErrorMessage?: string;
+    disabled?: boolean;
+    /**
+     * Input, Select 등 다양한 컴포넌트의 ref를 받아야 하므로 Ref<any>로 선언.
+     * (HTMLInputElement, HTMLButtonElement 등 요소 타입이 사용처마다 다름)
+     */
+    ref?: Ref<any>;
+    children: (props: FormFieldRenderProps<TValue>) => ReactNode;
+}
+declare const FormField: <TValue = any>({ name, options, customErrorMessage, disabled, ref, children, }: FormFieldProps<TValue>) => ReactNode;
+export default FormField;
+//# sourceMappingURL=FormField.d.ts.map

package/dist/components/Form/FormField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormField.d.ts","sourceRoot":"","sources":["../../../src/components/Form/FormField.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,KAAK,SAAS,EAAE,KAAK,GAAG,EAAE,MAAM,OAAO,CAAC;AACjD,OAAO,EACL,KAAK,eAAe,EAGrB,MAAM,iBAAiB,CAAC;AAEzB,UAAU,UAAU;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED;;;;;;GAMG;AACH,UAAU,oBAAoB,CAAC,MAAM,GAAG,GAAG;IACzC,KAAK,EAAE;QACL,IAAI,EAAE,MAAM,CAAC;QACb,KAAK,EAAE,MAAM,CAAC;QACd;;;WAGG;QACH,GAAG,EAAE,CAAC,OAAO,EAAE,GAAG,KAAK,IAAI,CAAC;QAC5B;;;WAGG;QACH,QAAQ,EAAE,CAAC,GAAG,KAAK,EAAE,GAAG,EAAE,KAAK,IAAI,CAAC;QACpC,MAAM,EAAE,MAAM,IAAI,CAAC;QACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;QACnB,+BAA+B;QAC/B,cAAc,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC;QAC5C,iDAAiD;QACjD,kBAAkB,CAAC,EAAE,MAAM,CAAC;KAC7B,CAAC;IACF,UAAU,EAAE,UAAU,CAAC;IACvB,UAAU,EAAE,CAAC,OAAO,CAAC,EAAE;QAAE,YAAY,CAAC,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;CAC3D;AAED,UAAU,cAAc,CAAC,MAAM,GAAG,GAAG;IACnC,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,GAAG,CAAC,EAAE,GAAG,CAAC,GAAG,CAAC,CAAC;IACf,QAAQ,EAAE,CAAC,KAAK,EAAE,oBAAoB,CAAC,MAAM,CAAC,KAAK,SAAS,CAAC;CAC9D;AAED,QAAA,MAAM,SAAS,GAAI,MAAM,GAAG,GAAG,EAAG,iEAO/B,cAAc,CAAC,MAAM,CAAC,cAyCxB,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/dist/components/Form/FormField.js

@@ -0,0 +1,43 @@
+'use client';
+import { useController, useFormContext, } from 'react-hook-form';
+const FormField = ({ name, options, customErrorMessage = '', disabled, ref, children, }) => {
+    const { resetField } = useFormContext();
+    const { field: controllerField, fieldState } = useController({
+        name,
+        rules: options,
+    });
+    const errorMessage = customErrorMessage || fieldState.error?.message || '';
+    // 에러 메시지 요소의 id. aria-describedby와 FormErrorMessage의 id로 함께 사용됨.
+    const errorId = `${name}-error`;
+    /**
+     * react-hook-form의 ref와 외부에서 전달된 ref를 하나의 콜백 ref로 합성.
+     * ref 타입이 함수형과 객체형(RefObject) 두 가지를 모두 지원함.
+     */
+    const combinedRef = (element) => {
+        controllerField.ref(element);
+        if (ref) {
+            if (typeof ref === 'function') {
+                ref(element);
+            }
+            else if (ref && typeof ref === 'object' && 'current' in ref) {
+                ref.current = element;
+            }
+        }
+    };
+    return children({
+        field: {
+            ...controllerField,
+            ref: combinedRef,
+            disabled,
+            'aria-invalid': !!errorMessage,
+            'aria-describedby': errorMessage ? errorId : undefined,
+        },
+        fieldState: {
+            error: errorMessage,
+            hasError: !!errorMessage,
+            errorId,
+        },
+        resetField: (opts) => resetField(name, opts),
+    });
+};
+export default FormField;

package/dist/components/Icon/LucideIcon.d.ts

@@ -0,0 +1,11 @@
+import { type LucideIcon as LucideIconType } from 'lucide-react';
+declare const LUCIDE_ICONS: Record<string, LucideIconType>;
+export type IconName = keyof typeof LUCIDE_ICONS;
+interface ILucideIconProps {
+    name: IconName;
+    className?: string;
+    size?: number;
+}
+declare const LucideIcon: ({ name, className, size }: ILucideIconProps) => import("react/jsx-runtime").JSX.Element | null;
+export default LucideIcon;
+//# sourceMappingURL=LucideIcon.d.ts.map

package/dist/components/Icon/LucideIcon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LucideIcon.d.ts","sourceRoot":"","sources":["../../../src/components/Icon/LucideIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,EA0BL,KAAK,UAAU,IAAI,cAAc,EAKlC,MAAM,cAAc,CAAC;AAEtB,QAAA,MAAM,YAAY,EAAE,MAAM,CAAC,MAAM,EAAE,cAAc,CA8BhD,CAAC;AAEF,MAAM,MAAM,QAAQ,GAAG,MAAM,OAAO,YAAY,CAAC;AAEjD,UAAU,gBAAgB;IACxB,IAAI,EAAE,QAAQ,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,QAAA,MAAM,UAAU,GAAI,2BAA2B,gBAAgB,mDAQ9D,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/components/Icon/LucideIcon.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ArrowLeft, ArrowRight, Check, ChevronLeft, ChevronRight, ChevronDown, ChevronUp, Copy, Ellipsis, Pencil, Plus, Search, Trash, Trash2, X, ArrowUpRight, Wand, CloudDownload, Calendar, RefreshCw, Settings, RotateCw, Clock, EyeClosed, Minus, Eye, EyeOff, CircleAlert, EllipsisVertical, } from 'lucide-react';
+const LUCIDE_ICONS = {
+    arrowLeft: ArrowLeft,
+    arrowRight: ArrowRight,
+    check: Check,
+    chevronLeft: ChevronLeft,
+    chevronRight: ChevronRight,
+    chevronDown: ChevronDown,
+    chevronUp: ChevronUp,
+    copy: Copy,
+    ellipsis: Ellipsis,
+    pencil: Pencil,
+    plus: Plus,
+    search: Search,
+    trash: Trash,
+    trash2: Trash2,
+    x: X,
+    arrowUpRight: ArrowUpRight,
+    wand: Wand,
+    cloudDownload: CloudDownload,
+    calendar: Calendar,
+    refreshCw: RefreshCw,
+    settings: Settings,
+    rotateCw: RotateCw,
+    clock: Clock,
+    minus: Minus,
+    eyeClosed: EyeClosed,
+    eye: Eye,
+    eyeOff: EyeOff,
+    circleAlert: CircleAlert,
+    ellipsisVertical: EllipsisVertical,
+};
+const LucideIcon = ({ name, className, size }) => {
+    const IconComponent = LUCIDE_ICONS[name];
+    if (!IconComponent) {
+        return null;
+    }
+    return _jsx(IconComponent, { className: className, size: size });
+};
+export default LucideIcon;

package/dist/components/Input/FormInput.d.ts

@@ -0,0 +1,15 @@
+import { type Ref } from 'react';
+import { type RegisterOptions } from 'react-hook-form';
+import { type InputProps } from './Input.js';
+interface FormInputProps extends Omit<InputProps, 'name' | 'color' | 'onChange' | 'value' | 'onBlur'> {
+    name: string;
+    options?: RegisterOptions;
+    ref?: Ref<HTMLInputElement>;
+    customErrorMessage?: string;
+    isHiddenErrorMessage?: boolean;
+    errorClassName?: string;
+    showEditIcon?: boolean;
+}
+declare const FormInput: ({ name, options, variant, size, block, disabled, ref, customErrorMessage, isHiddenErrorMessage, errorClassName, showEditIcon, rightAddon, ...props }: FormInputProps) => import("react/jsx-runtime").JSX.Element;
+export default FormInput;
+//# sourceMappingURL=FormInput.d.ts.map

package/dist/components/Input/FormInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormInput.d.ts","sourceRoot":"","sources":["../../../src/components/Input/FormInput.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,GAAG,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,iBAAiB,CAAC;AACvD,OAAc,EAAE,KAAK,UAAU,EAAa,MAAM,SAAS,CAAC;AAM5D,UAAU,cAAe,SAAQ,IAAI,CACnC,UAAU,EACV,MAAM,GAAG,OAAO,GAAG,UAAU,GAAG,OAAO,GAAG,QAAQ,CACnD;IACC,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAC5B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,QAAA,MAAM,SAAS,GAAI,sJAchB,cAAc,4CA6EhB,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/dist/components/Input/FormInput.js

@@ -0,0 +1,19 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import Input, { iconSizes } from './Input.js';
+import LucideIcon from '../Icon/LucideIcon.js';
+import FormField from '../Form/FormField.js';
+import FormErrorMessage from '../Form/FormErrorMessage.js';
+import cn from '../../utils/cn.js';
+const FormInput = ({ name, options, variant = 'filled', size = 'small', block = false, disabled = false, ref, customErrorMessage = '', isHiddenErrorMessage = false, errorClassName, showEditIcon = false, rightAddon, ...props }) => {
+    const iconSize = iconSizes[size ?? 'sm'];
+    return (_jsx(FormField, { name: name, options: options, customErrorMessage: customErrorMessage, disabled: disabled, ref: ref, children: ({ field, fieldState, resetField }) => {
+            const editIconAddon = showEditIcon && !disabled ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "group-focus-within:hidden", children: _jsx(LucideIcon, { name: "pencil", size: iconSize }) }), _jsx("button", { type: "button", "aria-label": "\uC785\uB825 \uB0B4\uC6A9 \uCD08\uAE30\uD654", onMouseDown: (e) => {
+                            e.preventDefault();
+                            resetField({ defaultValue: '' });
+                        }, className: "hidden group-focus-within:block text-neutral40 cursor-pointer hover:text-lb500 ld-transition", children: _jsx(LucideIcon, { name: "x", size: iconSize }) })] })) : null;
+            const combinedAddon = editIconAddon || rightAddon ? (_jsxs(_Fragment, { children: [editIconAddon, rightAddon] })) : undefined;
+            return (_jsxs("div", { className: cn('relative border-2 border-transparent', block ? 'w-full' : 'w-auto'), children: [_jsx(Input, { ...props, ...field, value: field.value ?? '', variant: variant, color: fieldState.hasError ? 'danger' : 'neutral', size: size, block: block, rightAddon: combinedAddon, "aria-invalid": fieldState.hasError, "aria-describedby": fieldState.hasError ? fieldState.errorId : undefined }), !isHiddenErrorMessage && (_jsx(FormErrorMessage, { id: fieldState.errorId, error: fieldState.error, disabled: disabled, className: cn((showEditIcon || rightAddon) && 'right-8', errorClassName) }))] }));
+        } }));
+};
+export default FormInput;

package/dist/components/Input/Input.d.ts

@@ -0,0 +1,24 @@
+import { type InputHTMLAttributes, type ReactNode, type Ref } from 'react';
+type InputVariant = 'filled' | 'outline' | 'ghost';
+type InputColor = 'neutral' | 'point' | 'danger';
+type InputSize = 'xSmall' | 'small' | 'medium' | 'large' | 'big' | 'xLarge';
+export declare const iconSizes: Record<InputSize, number>;
+export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'color' | 'size'> {
+    /** 입력 필드 스타일 유형 */
+    variant?: InputVariant;
+    /** 색상 테마 */
+    color?: InputColor;
+    /** 입력 필드 높이 및 폰트 크기 프리셋 */
+    size?: InputSize;
+    /** 비밀번호 표시/숨김 토글 버튼 */
+    showPasswordToggle?: boolean;
+    /** true 시 너비 100% */
+    block?: boolean;
+    /** 우측 부가 요소 (아이콘 등) */
+    rightAddon?: ReactNode;
+    /** input 요소 ref */
+    ref?: Ref<HTMLInputElement>;
+}
+declare const Input: ({ variant, color, size, showPasswordToggle, block, type, disabled, className, style, rightAddon, ref, ...props }: InputProps) => import("react/jsx-runtime").JSX.Element;
+export default Input;
+//# sourceMappingURL=Input.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../src/components/Input/Input.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,mBAAmB,EACxB,KAAK,SAAS,EACd,KAAK,GAAG,EACT,MAAM,OAAO,CAAC;AAMf,KAAK,YAAY,GAAG,QAAQ,GAAG,SAAS,GAAG,OAAO,CAAC;AACnD,KAAK,UAAU,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,CAAC;AACjD,KAAK,SAAS,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,CAAC;AAqD5E,eAAO,MAAM,SAAS,EAAE,MAAM,CAAC,SAAS,EAAE,MAAM,CAO/C,CAAC;AAGF,MAAM,WAAW,UAAW,SAAQ,IAAI,CACtC,mBAAmB,CAAC,gBAAgB,CAAC,EACrC,OAAO,GAAG,MAAM,CACjB;IACC,mBAAmB;IACnB,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,YAAY;IACZ,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,2BAA2B;IAC3B,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,uBAAuB;IACvB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,qBAAqB;IACrB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,uBAAuB;IACvB,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,mBAAmB;IACnB,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;CAC7B;AAED,QAAA,MAAM,KAAK,GAAI,kHAaZ,UAAU,4CAuEZ,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/dist/components/Input/Input.js

@@ -0,0 +1,71 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, } from 'react';
+import InputBase from './InputBase.js';
+import LucideIcon from '../Icon/LucideIcon.js';
+import cn from '../../utils/cn.js';
+// ── 스타일 매핑 ──
+const variantColorClasses = {
+    filled: {
+        neutral: 'bg-mono100 text-neutral900 outline-2 outline-transparent focus:bg-tintBlue focus:outline-lb500',
+        point: 'bg-mono100 text-neutral900 outline-2 outline-transparent focus:bg-tintBlue focus:outline-lb500',
+        danger: 'bg-tintRed text-neutral900 outline-2 outline-red500',
+    },
+    outline: {
+        neutral: 'bg-transparent text-neutral900 border border-mono200 focus:border-lb500',
+        point: 'bg-transparent text-neutral900 border border-mono200 focus:border-lb500',
+        danger: 'bg-transparent text-neutral900 border border-danger100 focus:border-red500',
+    },
+    ghost: {
+        neutral: 'bg-transparent text-neutral900 outline-2 outline-transparent hover:bg-mono50 focus:bg-mono100 focus:outline-lb500',
+        point: 'bg-transparent text-neutral900 outline-2 outline-transparent hover:bg-mono50 focus:bg-mono100 focus:outline-lb500',
+        danger: 'bg-transparent text-danger500 outline-2 outline-transparent hover:bg-tintRed focus:bg-tintRed focus:outline-red500',
+    },
+};
+const disabledVariantClasses = {
+    filled: 'bg-mono100 text-mono400',
+    outline: 'bg-transparent text-mono400 border border-mono200',
+    ghost: 'bg-transparent text-mono400',
+};
+const sizeClasses = {
+    xSmall: 'input-2xs',
+    small: 'input-xs',
+    medium: 'input-sm',
+    large: 'input-md',
+    big: 'input-lg',
+    xLarge: 'input-xl',
+};
+const addonRightPaddingClasses = {
+    xSmall: 'pr-8',
+    small: 'pr-8',
+    medium: 'pr-8',
+    large: 'pr-10',
+    big: 'pr-11',
+    xLarge: 'pr-12',
+};
+export const iconSizes = {
+    xSmall: 10,
+    small: 12,
+    medium: 14,
+    large: 16,
+    big: 18,
+    xLarge: 20,
+};
+const Input = ({ variant, color = 'neutral', size, showPasswordToggle = false, block = false, type = 'text', disabled = false, className, style, rightAddon, ref, ...props }) => {
+    const [passwordVisible, setPasswordVisible] = useState(false);
+    const resolvedType = showPasswordToggle
+        ? passwordVisible
+            ? 'text'
+            : 'password'
+        : type;
+    const iconSize = iconSizes[size ?? 'medium'];
+    const passwordToggleAddon = showPasswordToggle ? (_jsx("button", { type: "button", "aria-label": passwordVisible ? '비밀번호 숨기기' : '비밀번호 표시', "aria-pressed": passwordVisible, onClick: () => setPasswordVisible(!passwordVisible), disabled: disabled, className: cn('text-neutral40 ld-transition', disabled ? 'cursor-not-allowed' : 'cursor-pointer hover:text-lb500'), children: _jsx(LucideIcon, { name: passwordVisible ? 'eye' : 'eyeOff', size: iconSize }) })) : null;
+    const resolvedRightAddon = rightAddon ?? passwordToggleAddon;
+    const { width, height, minWidth, maxWidth, minHeight, maxHeight, ...fieldStyle } = style ?? {};
+    const rootStyle = { width, height, minWidth, maxWidth, minHeight, maxHeight };
+    const fieldClassName = cn('w-full bold placeholder-mono400 ld-transition outline-none', variant &&
+        (disabled
+            ? disabledVariantClasses[variant]
+            : variantColorClasses[variant][color]), size && !height && sizeClasses[size], height && 'h-full', disabled && 'cursor-not-allowed', 'read-only:cursor-not-allowed', resolvedRightAddon && size && addonRightPaddingClasses[size], className);
+    return (_jsxs(InputBase.Root, { block: block, style: rootStyle, children: [_jsx(InputBase.Field, { ref: ref, type: resolvedType, disabled: disabled, className: fieldClassName, style: fieldStyle, ...props }), resolvedRightAddon && (_jsx(InputBase.Addon, { position: "right", className: "right-2.5 text-neutral40", children: resolvedRightAddon }))] }));
+};
+export default Input;

package/dist/components/Input/InputBase.d.ts

@@ -0,0 +1,22 @@
+import { type InputHTMLAttributes, type ReactNode, type Ref } from 'react';
+interface RootProps {
+    block?: boolean;
+    className?: string;
+    style?: React.CSSProperties;
+    children?: ReactNode;
+}
+interface FieldProps extends InputHTMLAttributes<HTMLInputElement> {
+    ref?: Ref<HTMLInputElement>;
+}
+interface AddonProps {
+    position?: 'left' | 'right';
+    className?: string;
+    children?: ReactNode;
+}
+export declare const InputBase: {
+    Root: ({ block, className, style, children }: RootProps) => import("react/jsx-runtime").JSX.Element;
+    Field: ({ ref, ...props }: FieldProps) => import("react/jsx-runtime").JSX.Element;
+    Addon: ({ position, className, children }: AddonProps) => import("react/jsx-runtime").JSX.Element;
+};
+export default InputBase;
+//# sourceMappingURL=InputBase.d.ts.map

package/dist/components/Input/InputBase.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputBase.d.ts","sourceRoot":"","sources":["../../../src/components/Input/InputBase.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,mBAAmB,EAAE,KAAK,SAAS,EAAE,KAAK,GAAG,EAAE,MAAM,OAAO,CAAC;AAI3E,UAAU,SAAS;IACjB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAcD,UAAU,UAAW,SAAQ,mBAAmB,CAAC,gBAAgB,CAAC;IAChE,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;CAC7B;AAOD,UAAU,UAAU;IAClB,QAAQ,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAgBD,eAAO,MAAM,SAAS;kDAzCuC,SAAS;+BAgBpC,UAAU;+CAWgB,UAAU;CAkBrE,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/dist/components/Input/InputBase.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import cn from '../../utils/cn.js';
+const Root = ({ block = false, className, style, children }) => {
+    return (_jsx("div", { style: style, className: cn('relative flex group', block && 'w-full', className), children: children }));
+};
+const Field = ({ ref, ...props }) => {
+    return _jsx("input", { ref: ref, ...props });
+};
+const Addon = ({ position = 'right', className, children }) => {
+    return (_jsx("span", { className: cn('absolute top-1/2 -translate-y-1/2 flex items-center', position === 'left' ? 'left-0' : 'right-0', className), children: children }));
+};
+export const InputBase = {
+    Root,
+    Field,
+    Addon,
+};
+export default InputBase;

package/dist/components/LNB/LNBBase.d.ts

@@ -0,0 +1,82 @@
+import type { ElementType, ReactNode } from 'react';
+export interface INavTab {
+    label: string;
+    path: string;
+    icon?: ReactNode;
+    isNotScroll?: boolean;
+}
+export interface INavItem {
+    label: string;
+    tabs?: INavTab[];
+    noSlider?: boolean;
+}
+interface ProviderProps {
+    children: ReactNode;
+    isMobile: boolean;
+    items?: INavItem[];
+    pathname?: string;
+    defaultCollapsed?: boolean;
+}
+interface RootProps {
+    children: ReactNode;
+    className?: string;
+}
+interface TriggerProps {
+    className?: string;
+}
+interface HeaderProps {
+    name?: string;
+    email?: string;
+    profileImage?: string | null;
+    handleLogout?: () => void;
+}
+interface ContentProps {
+    children: ReactNode;
+    className?: string;
+}
+interface GroupProps {
+    children: ReactNode;
+    label?: string;
+    noSlider?: boolean;
+}
+interface MenuProps {
+    children: ReactNode;
+    label?: string;
+    noSlider?: boolean;
+    tabCount?: number;
+}
+interface MenuItemProps {
+    as?: ElementType;
+    href: string;
+    isActive?: boolean;
+    children: ReactNode;
+    icon?: ReactNode;
+    className?: string;
+    [key: string]: unknown;
+}
+interface MenuSubProps {
+    children: ReactNode;
+    className?: string;
+}
+interface MenuSubItemProps {
+    as?: ElementType;
+    href: string;
+    isActive?: boolean;
+    children: ReactNode;
+    className?: string;
+    [key: string]: unknown;
+}
+declare const LNBBase: {
+    Provider: ({ children, isMobile, items, pathname, defaultCollapsed, }: ProviderProps) => import("react/jsx-runtime").JSX.Element;
+    Root: ({ children, className }: RootProps) => import("react/jsx-runtime").JSX.Element;
+    Trigger: ({ className }: TriggerProps) => import("react/jsx-runtime").JSX.Element | null;
+    Header: ({ name, email, profileImage, handleLogout }: HeaderProps) => import("react/jsx-runtime").JSX.Element;
+    Content: ({ children, className }: ContentProps) => import("react/jsx-runtime").JSX.Element;
+    Group: ({ children, label, noSlider }: GroupProps) => import("react/jsx-runtime").JSX.Element;
+    Menu: ({ children, label, noSlider, tabCount }: MenuProps) => import("react/jsx-runtime").JSX.Element;
+    MenuItem: ({ as: Comp, href, isActive, children, icon, className, ...rest }: MenuItemProps) => import("react/jsx-runtime").JSX.Element;
+    MenuSub: ({ children, className }: MenuSubProps) => import("react/jsx-runtime").JSX.Element | null;
+    MenuSubItem: ({ as: Comp, href, isActive, children, className, ...rest }: MenuSubItemProps) => import("react/jsx-runtime").JSX.Element;
+};
+export default LNBBase;
+//# sourceMappingURL=LNBBase.d.ts.map

package/dist/components/LNB/LNBBase.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LNBBase.d.ts","sourceRoot":"","sources":["../../../src/components/LNB/LNBBase.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAapD,MAAM,WAAW,OAAO;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,MAAM,WAAW,QAAQ;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,OAAO,EAAE,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AA0BD,UAAU,aAAa;IACrB,QAAQ,EAAE,SAAS,CAAC;IACpB,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,QAAQ,EAAE,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAyDD,UAAU,SAAS;IACjB,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AA2BD,UAAU,YAAY;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AA0BD,UAAU,WAAW;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;CAC3B;AAqCD,UAAU,YAAY;IACpB,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAkBD,UAAU,UAAU;IAClB,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAqCD,UAAU,SAAS;IACjB,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AA6BD,UAAU,aAAa;IACrB,EAAE,CAAC,EAAE,WAAW,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;IACpB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAiCD,UAAU,YAAY;IACpB,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAYD,UAAU,gBAAgB;IACxB,EAAE,CAAC,EAAE,WAAW,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AA2BD,QAAA,MAAM,OAAO;2EA/UV,aAAa;oCAsDuB,SAAS;6BA6BhB,YAAY;0DA+BiB,WAAW;uCAwC9B,YAAY;2CAsBR,UAAU;oDA0CG,SAAS;iFA6CjE,aAAa;uCA4B0B,YAAY;8EA0BnD,gBAAgB;CA6BlB,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/dist/components/LNB/LNBBase.js

@@ -0,0 +1,108 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { createContext, useContext, useEffect, useState } from 'react';
+import { ChevronDown, PanelLeftClose, PanelLeftOpen, LogOut, } from 'lucide-react';
+import cn from '../../utils/cn.js';
+import { isActivePath } from '../../utils/utils.js';
+import Avatar from '../Avatar/Avatar.js';
+const LNBContext = createContext(null);
+const useLNBContext = () => {
+    const ctx = useContext(LNBContext);
+    if (!ctx)
+        throw new Error('LNBBase 서브컴포넌트는 LNBBase.Provider 내부에서 사용해야 합니다.');
+    return ctx;
+};
+const Provider = ({ children, isMobile, items = [], pathname = '', defaultCollapsed = false, }) => {
+    const [collapsed, setCollapsed] = useState(defaultCollapsed);
+    const [openGroups, setOpenGroups] = useState([]);
+    const toggleCollapsed = () => setCollapsed((prev) => !prev);
+    const toggleGroup = (label) => {
+        setOpenGroups((prev) => prev.includes(label) ? prev.filter((g) => g !== label) : [...prev, label]);
+    };
+    const isGroupOpen = (label) => openGroups.includes(label);
+    useEffect(() => {
+        if (!isMobile)
+            return;
+        if (pathname === '/') {
+            setOpenGroups([]);
+            return;
+        }
+        const matchedLabel = items.find((item) => item.tabs?.some((tab) => isActivePath(pathname, tab.path)))?.label;
+        if (matchedLabel && !openGroups.includes(matchedLabel)) {
+            setOpenGroups((prev) => [...prev, matchedLabel]);
+        }
+        // 라우트(pathname) 변경 시에만 그룹 펼침을 동기화하려는 의도이므로 다른 의존성은 제외함.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [pathname]);
+    return (_jsx(LNBContext, { value: {
+            isMobile,
+            collapsed,
+            toggleCollapsed,
+            openGroups,
+            toggleGroup,
+            isGroupOpen,
+        }, children: children }));
+};
+const Root = ({ children, className }) => {
+    const { collapsed } = useLNBContext();
+    return (_jsx("div", { className: cn('relative mobile:w-full ld-transition', collapsed ? 'w-[60px]' : 'w-[300px]', className), children: _jsx("div", { className: cn('w-full h-full bg-mono50 mobile:bg-white', 'h-[calc(100vh-64px)] mobile:h-auto mobile:overflow-hidden', 'overflow-y-auto p-sm flex flex-col gap-md mobile:py-0 scrollbar-hide scrollbar-hover'), children: children }) }));
+};
+const Trigger = ({ className }) => {
+    const { isMobile, collapsed, toggleCollapsed } = useLNBContext();
+    const Icon = collapsed ? PanelLeftOpen : PanelLeftClose;
+    if (isMobile)
+        return null;
+    return (_jsx("button", { type: "button", onClick: toggleCollapsed, className: cn('absolute -right-10 top-0 z-10', 'flex items-center justify-center w-10 h-10', 'text-neutral500', 'hover:text-mono900 ld-transition cursor-pointer', className), "aria-label": collapsed ? '사이드바 펼치기' : '사이드바 접기', children: _jsx(Icon, { size: 16 }) }));
+};
+const Header = ({ name, email, profileImage, handleLogout }) => {
+    const { collapsed } = useLNBContext();
+    return (_jsxs("div", { className: cn('w-full flex gap-sm items-center rounded-[10px] ld-transition overflow-hidden', collapsed
+            ? 'p-xs justify-center border-transparent'
+            : 'p-md mobile:p-sm border border-neutral100'), children: [_jsx(Avatar, { size: "md", src: profileImage }), !collapsed && (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex flex-col gap-xs flex-1 min-w-0", children: [_jsx("span", { className: "display16 bold truncate", children: name ?? '' }), _jsx("span", { className: "display14 text-neutral500 truncate", children: email ?? '' })] }), handleLogout && (_jsx(LogOut, { size: 12, className: "cursor-pointer flex-shrink-0", onClick: handleLogout }))] }))] }));
+};
+const Content = ({ children, className }) => (_jsxs(_Fragment, { children: [_jsx("div", { className: "w-full border-b border-neutral100" }), _jsx("div", { className: cn('flex flex-col gap-md mobile:overflow-y-auto mobile:h-[calc(62dvh-111px)]', className), children: children })] }));
+const Group = ({ children, label, noSlider }) => {
+    const { isMobile, collapsed, toggleGroup, isGroupOpen } = useLNBContext();
+    const open = label ? isGroupOpen(label) : true;
+    return (_jsxs("div", { className: "flex flex-col gap-sm w-full items-start", children: [label && !collapsed && (_jsxs("div", { className: cn('w-full flex', isMobile && 'cursor-pointer justify-between'), onClick: () => !noSlider && isMobile && toggleGroup(label), children: [_jsx("span", { className: "display14 text-neutral500", children: label }), _jsx("div", { className: cn(isMobile &&
+                            'transition-transform duration-300 ease-out flex items-center justify-center w-5 h-5 flex-shrink-0', isMobile && open ? 'rotate-180' : 'rotate-0', !isMobile && 'hidden', noSlider && 'hidden'), children: _jsx(ChevronDown, { size: 14, className: "text-neutral500" }) })] })), children] }));
+};
+const Menu = ({ children, label, noSlider, tabCount = 0 }) => {
+    const { isMobile, isGroupOpen } = useLNBContext();
+    const open = label ? isGroupOpen(label) : true;
+    const visible = (label && open) || !label || noSlider;
+    return (_jsx("div", { className: cn('flex flex-col w-full gap-sm opacity-100', isMobile && 'overflow-hidden ld-transition', visible ? 'opacity-100' : isMobile && 'opacity-0'), style: {
+            height: isMobile
+                ? visible
+                    ? `calc(40px * ${tabCount} + 10px * ${tabCount > 0 ? tabCount - 1 : 0})`
+                    : '0'
+                : 'auto',
+        }, children: children }));
+};
+const MenuItem = ({ as: Comp = 'a', href, isActive, children, icon, className, ...rest }) => {
+    const { collapsed } = useLNBContext();
+    return (_jsxs(Comp, { href: href, className: cn('flex gap-sm w-full items-center p-sm display16 mobile:display14 bold mobile:medium', 'text-neutral500 cursor-pointer hover:bg-mono300 rounded-[5px] hover:text-mono900 ld-transition', collapsed && 'justify-center', isActive &&
+            'bg-tintBlue text-blue400 hover:bg-tintBlue hover:text-blue400', className), ...rest, children: [icon && _jsx("span", { className: "flex-shrink-0", children: icon }), !collapsed && children] }));
+};
+const MenuSub = ({ children, className }) => {
+    const { collapsed } = useLNBContext();
+    if (collapsed)
+        return null;
+    return (_jsx("div", { className: cn('flex flex-col w-full gap-sm pl-sm', className), children: children }));
+};
+const MenuSubItem = ({ as: Comp = 'a', href, isActive, children, className, ...rest }) => (_jsx(Comp, { href: href, className: cn('flex gap-sm w-full items-center p-sm display14 medium', 'text-neutral500 cursor-pointer hover:bg-mono300 rounded-[5px] hover:text-mono900 ld-transition', isActive &&
+        'bg-tintBlue text-blue400 hover:bg-tintBlue hover:text-blue400', className), ...rest, children: children }));
+// ── Export ──
+const LNBBase = {
+    Provider,
+    Root,
+    Trigger,
+    Header,
+    Content,
+    Group,
+    Menu,
+    MenuItem,
+    MenuSub,
+    MenuSubItem,
+};
+export default LNBBase;

package/dist/components/LoadingDots/LoadingDots.d.ts

@@ -0,0 +1,8 @@
+interface LoadingDotsProps {
+    size?: LoadingDotsSize;
+    className?: string;
+}
+type LoadingDotsSize = '2xsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
+declare const LoadingDots: ({ size, className }: LoadingDotsProps) => import("react/jsx-runtime").JSX.Element;
+export default LoadingDots;
+//# sourceMappingURL=LoadingDots.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LoadingDots.d.ts","sourceRoot":"","sources":["../../../src/components/LoadingDots/LoadingDots.tsx"],"names":[],"mappings":"AAEA,UAAU,gBAAgB;IACxB,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,KAAK,eAAe,GAChB,SAAS,GACT,QAAQ,GACR,OAAO,GACP,QAAQ,GACR,OAAO,GACP,QAAQ,CAAC;AAEb,QAAA,MAAM,WAAW,GAAI,qBAA+B,gBAAgB,4CA4CnE,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/components/LoadingDots/LoadingDots.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import cn from '../../utils/cn.js';
+const LoadingDots = ({ size = 'small', className }) => {
+    const sizeMap = {
+        '2xsmall': 2,
+        xsmall: 2,
+        small: 2,
+        medium: 2,
+        large: 3,
+        xlarge: 4,
+    };
+    return (_jsxs("div", { className: cn('flex items-center justify-center gap-1', className), style: { height: sizeMap[size] }, children: [_jsx("div", { className: "bg-current rounded-full animate-pulse", style: {
+                    width: sizeMap[size],
+                    height: sizeMap[size],
+                    animationDelay: '0ms',
+                    animationDuration: '1000ms',
+                } }), _jsx("div", { className: "bg-current rounded-full animate-pulse", style: {
+                    width: sizeMap[size],
+                    height: sizeMap[size],
+                    animationDelay: '200ms',
+                    animationDuration: '1000ms',
+                } }), _jsx("div", { className: "bg-current rounded-full animate-pulse", style: {
+                    width: sizeMap[size],
+                    height: sizeMap[size],
+                    animationDelay: '400ms',
+                    animationDuration: '1000ms',
+                } })] }));
+};
+export default LoadingDots;

package/dist/components/MenuBar/MenuBar.d.ts

@@ -0,0 +1,21 @@
+import type { ComponentProps } from 'react';
+import MenuBarBase from './MenuBarBase.js';
+declare const MenuBar: {
+    Root: ({ className, ...props }: ComponentProps<typeof MenuBarBase.Root>) => import("react/jsx-runtime").JSX.Element;
+    Logo: ({ className, ...props }: ComponentProps<typeof MenuBarBase.Logo>) => import("react/jsx-runtime").JSX.Element;
+    Nav: ({ className, ...props }: ComponentProps<typeof MenuBarBase.Nav>) => import("react/jsx-runtime").JSX.Element;
+    Item: ({ className, ...props }: ComponentProps<typeof MenuBarBase.Item>) => import("react/jsx-runtime").JSX.Element;
+    Trigger: ({ className, ...props }: ComponentProps<typeof MenuBarBase.Trigger>) => import("react/jsx-runtime").JSX.Element;
+    Content: {
+        ({ className, ...props }: ComponentProps<typeof MenuBarBase.Content>): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    MegaContent: {
+        ({ className, ...props }: ComponentProps<typeof MenuBarBase.Content>): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Actions: ({ className, ...props }: ComponentProps<typeof MenuBarBase.Actions>) => import("react/jsx-runtime").JSX.Element;
+    Separator: ({ className, }: ComponentProps<typeof MenuBarBase.Separator>) => import("react/jsx-runtime").JSX.Element;
+};
+export default MenuBar;
+//# sourceMappingURL=MenuBar.d.ts.map