@loword/loword-design-system 0.0.2 → 0.0.3

package/dist/components/LDOTPInput/LDOTPInput.js

@@ -0,0 +1,87 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useState, useContext, createContext, useEffect, } from 'react';
+import cn from '../../utils/cn.js';
+const OTPInputContext = createContext(null);
+function useOTPInputContext() {
+    const context = useContext(OTPInputContext);
+    if (!context) {
+        throw new Error('LDOTPInput 하위 컴포넌트는 LDOTPInput 안에서 사용되어야 합니다.');
+    }
+    return context;
+}
+const sizeClasses = {
+    xSmall: 'w-[16px] h-[16px] display10',
+    small: 'w-[24px] h-[24px] display12',
+    medium: 'w-[32px] h-[32px] display14',
+    large: 'w-[40px] h-[40px] display16',
+    xLarge: 'w-[64px] h-[64px] display20',
+};
+const variantClasses = {
+    filled: 'bg-lb50 border-2 border-transparent text-lb900',
+    outline: 'bg-transparent border border-mono200',
+    ghost: 'bg-transparent border-b-2 border-mono200 rounded-none',
+};
+// ── Components ──
+/**
+ * LDOTPInput (Root)
+ * 실제 입력을 처리하는 Hidden LDInput과 상태를 관리합니다.
+ */
+const LDOTPInput = ({ maxLength, value, onChange, onComplete, disabled = false, isInvalid = false, variant = 'outline', size = 'medium', className, children, }) => {
+    const inputRef = useRef(null);
+    const [isFocused, setIsFocused] = useState(false);
+    const [focusedIndex, setFocusedIndex] = useState(-1);
+    useEffect(() => {
+        if (isFocused) {
+            setFocusedIndex(value.length);
+        }
+        else {
+            setFocusedIndex(-1);
+        }
+    }, [value, isFocused]);
+    const handleInputChange = (e) => {
+        const newValue = e.target.value
+            .replace(/[^0-9a-zA-Z]/g, '')
+            .slice(0, maxLength);
+        onChange(newValue);
+        if (newValue.length === maxLength && onComplete) {
+            onComplete(newValue);
+        }
+    };
+    return (_jsx(OTPInputContext.Provider, { value: {
+            value,
+            maxLength,
+            focusedIndex,
+            isInvalid,
+            disabled,
+            size,
+            variant,
+        }, children: _jsxs("div", { className: cn('relative flex items-center gap-2 cursor-text select-none', disabled && 'opacity-50 cursor-not-allowed', className), onClick: () => !disabled && inputRef.current?.focus(), children: [_jsx("input", { ref: inputRef, type: "text", inputMode: "numeric", autoComplete: "one-time-code", value: value, onChange: handleInputChange, onFocus: () => setIsFocused(true), onBlur: () => setIsFocused(false), disabled: disabled, className: "absolute inset-0 opacity-0 cursor-default pointer-events-none" }), children] }) }));
+};
+/**
+ * OTPInputGroup
+ * 슬롯들을 묶어주는 컨테이너입니다.
+ */
+const OTPInputGroup = ({ className, children, }) => {
+    return (_jsx("div", { className: cn('flex items-center gap-2', className), children: children }));
+};
+/**
+ * OTPInputSlot
+ * 개별 글자를 보여주는 칸입니다.
+ */
+const OTPInputSlot = ({ index, className, }) => {
+    const { value, focusedIndex, isInvalid, variant, size, disabled } = useOTPInputContext();
+    const char = value[index];
+    const isActive = focusedIndex === index;
+    return (_jsxs("div", { className: cn('relative flex items-center justify-center font-bold transition-all rounded-[5px]', sizeClasses[size], variantClasses[variant], isActive && 'border-lb500 ring-2 ring-lb500/20', isActive && variant === 'filled' && 'bg-white', isActive && variant === 'ghost' && 'border-lb500', isInvalid && 'border-danger500 text-danger500 bg-tintRed', className), children: [char, isActive && !disabled && (_jsx("div", { className: "absolute inset-y-1/4 w-[2px] bg-lb500 animate-pulse" }))] }));
+};
+/**
+ * OTPInputSeparator
+ * 그룹 사이의 구분선입니다.
+ */
+const OTPInputSeparator = ({ className }) => {
+    return _jsx("div", { className: cn('w-2 h-[2px] bg-mono300 mx-1', className) });
+};
+// ── Export ──
+export { LDOTPInput, OTPInputGroup, OTPInputSlot, OTPInputSeparator };
+export default LDOTPInput;

package/dist/components/LDPagination/LDPagination.d.ts

@@ -0,0 +1,12 @@
+import type React from 'react';
+export interface LDPaginationProps {
+    currentPage: number;
+    totalPages: number;
+    onPageChange: (page: number) => void;
+    numbersToShow?: number;
+    className?: string;
+    style?: React.CSSProperties;
+}
+declare const LDPagination: ({ currentPage, totalPages, onPageChange, numbersToShow, className, style, }: LDPaginationProps) => import("react/jsx-runtime").JSX.Element;
+export default LDPagination;
+//# sourceMappingURL=LDPagination.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LDPagination.d.ts","sourceRoot":"","sources":["../../../src/components/LDPagination/LDPagination.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,MAAM,WAAW,iBAAiB;IAChC,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAED,QAAA,MAAM,YAAY,GAAI,6EAOnB,iBAAiB,4CAYnB,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/components/LDPagination/LDPagination.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import PaginationBase from './PaginationBase.js';
+import cn from '../../utils/cn.js';
+const LDPagination = ({ currentPage, totalPages, onPageChange, numbersToShow = 5, className, style, }) => (_jsx(PaginationBase.Provider, { currentPage: currentPage, totalPages: totalPages, onPageChange: onPageChange, children: _jsxs(PaginationBase.Root, { className: cn('py-5', className), style: style, children: [_jsx(PaginationBase.Prev, {}), _jsx(PaginationBase.List, { numbersToShow: numbersToShow }), _jsx(PaginationBase.Next, {})] }) }));
+export default LDPagination;

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

@@ -0,0 +1 @@
+{"version":3,"file":"PaginationBase.d.ts","sourceRoot":"","sources":["../../../src/components/LDPagination/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/LDPagination/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 LDButton from '../LDButton/LDButton.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(LDButton, { 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(LDButton, { 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(LDButton, { 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/LDPagination/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/LDPagination/paginationUtils.d.ts.map

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

package/dist/components/LDPagination/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/LDPopover/LDPopover.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 LDPopoverProps {
+    /** 메뉴 항목 목록 (제공 시 메뉴형으로 동작) */
+    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 LDPopover: ({ items, content, children, open, onOpenChange, iconSize, isHorizontal, align, offset, contentWidth, triggerClassName, popoverClassName, style, }: LDPopoverProps) => import("react/jsx-runtime").JSX.Element;
+export default LDPopover;
+//# sourceMappingURL=LDPopover.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LDPopover.d.ts","sourceRoot":"","sources":["../../../src/components/LDPopover/LDPopover.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,cAAc;IAC7B,+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,SAAS,GAAI,mJAchB,cAAc,4CA8DhB,CAAC;AAEF,eAAe,SAAS,CAAC"}

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

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

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