@loword/loword-design-system 0.0.2 → 0.0.4

package/dist/components/LDSelect/SelectBase.js

@@ -0,0 +1,211 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, useContext, useState, useEffect, useRef, useId, useCallback, } from 'react';
+import cn from '../../utils/cn.js';
+const SelectContext = createContext(null);
+const useSelectContext = () => {
+    const ctx = useContext(SelectContext);
+    if (!ctx)
+        throw new Error('SelectBase 하위 컴포넌트는 Root 내부에서 사용해야 합니다.');
+    return ctx;
+};
+// ── Item Context (Item → ItemIndicator 간 value 공유) ──
+const ItemContext = createContext(null);
+const useItemContext = () => {
+    return useContext(ItemContext);
+};
+const Root = ({ multiple = false, value, defaultValue, values, defaultValues = [], onChange, onMultiChange, disabled = false, name, items, maxDisplay = 2, children, }) => {
+    const [open, setOpen] = useState(false);
+    const [internalValue, setInternalValue] = useState(defaultValue);
+    const [internalValues, setInternalValues] = useState(defaultValues);
+    const rootRef = useRef(null);
+    const listboxId = useId();
+    const isControlled = value !== undefined;
+    const isMultiControlled = values !== undefined;
+    const resolvedValue = isControlled ? value : internalValue;
+    const resolvedValues = isMultiControlled ? values : internalValues;
+    const handleChange = useCallback((val) => {
+        if (!isControlled)
+            setInternalValue(val);
+        onChange?.(val);
+    }, [isControlled, onChange]);
+    const handleMultiChange = useCallback((vals) => {
+        if (!isMultiControlled)
+            setInternalValues(vals);
+        onMultiChange?.(vals);
+    }, [isMultiControlled, onMultiChange]);
+    const toggleValue = useCallback((val) => {
+        if (disabled)
+            return;
+        const newValues = resolvedValues.includes(val)
+            ? resolvedValues.filter((v) => v !== val)
+            : [...resolvedValues, val];
+        handleMultiChange(newValues);
+    }, [disabled, resolvedValues, handleMultiChange]);
+    // click-outside (LDDropdown 방식: capture phase)
+    useEffect(() => {
+        const handler = (e) => {
+            if (!rootRef.current?.contains(e.target)) {
+                setOpen(false);
+            }
+        };
+        document.addEventListener('mousedown', handler, { capture: true });
+        return () => document.removeEventListener('mousedown', handler, { capture: true });
+    }, []);
+    return (_jsx(SelectContext.Provider, { value: {
+            open,
+            setOpen,
+            multiple,
+            value: resolvedValue,
+            values: resolvedValues,
+            onChange: handleChange,
+            onMultiChange: handleMultiChange,
+            toggleValue,
+            disabled,
+            listboxId,
+            items,
+            maxDisplay,
+        }, children: _jsxs("div", { ref: rootRef, className: "relative w-full", children: [name && (_jsx("input", { type: "hidden", name: name, value: multiple ? JSON.stringify(resolvedValues) : (resolvedValue ?? '') })), children] }) }));
+};
+const Trigger = ({ className, style, children, 'aria-invalid': ariaInvalid, 'aria-describedby': ariaDescribedby, }) => {
+    const { open, setOpen, disabled, listboxId } = useSelectContext();
+    return (_jsx("button", { type: "button", "aria-haspopup": "listbox", "aria-expanded": open, "aria-controls": listboxId, "aria-invalid": ariaInvalid, "aria-describedby": ariaDescribedby, disabled: disabled, "data-state": open ? 'open' : 'closed', onClick: () => {
+            if (!disabled)
+                setOpen(!open);
+        }, onKeyDown: (e) => {
+            if (disabled)
+                return;
+            if (e.key === 'Enter' ||
+                e.key === ' ' ||
+                e.key === 'ArrowDown' ||
+                e.key === 'ArrowUp') {
+                e.preventDefault();
+                if (!open) {
+                    setOpen(true);
+                }
+                else if (e.key === 'ArrowDown') {
+                    const listbox = document.getElementById(listboxId);
+                    const firstOption = listbox?.querySelector('[role="option"]');
+                    firstOption?.focus();
+                }
+            }
+            else if (e.key === 'Escape') {
+                setOpen(false);
+                // 닫힐 때 트리거로 포커스 이동을 위해 버튼을 찾음
+                e.currentTarget.focus();
+            }
+        }, style: style, className: cn('w-full flex justify-center items-center', className), children: children }));
+};
+const Value = ({ placeholder, className, placeholderClassName, }) => {
+    const { multiple, value, values, items, maxDisplay } = useSelectContext();
+    // 단일 선택
+    if (!multiple) {
+        const selectedLabel = items?.find((item) => item.value === value)?.label;
+        return (_jsx("span", { className: cn(className, selectedLabel == null && placeholderClassName), children: selectedLabel ?? placeholder }));
+    }
+    // 다중 선택
+    if (values.length === 0) {
+        return (_jsx("span", { className: cn(className, placeholderClassName), children: placeholder }));
+    }
+    const selectedLabels = items
+        ?.filter((item) => values.includes(item.value))
+        .map((item) => item.label) ?? [];
+    if (selectedLabels.length <= maxDisplay) {
+        return _jsx("span", { className: className, children: selectedLabels.join(', ') });
+    }
+    return (_jsxs("span", { className: className, children: [selectedLabels.slice(0, maxDisplay).join(', '), " \uC678", ' ', selectedLabels.length - maxDisplay, "\uAC1C"] }));
+};
+const Content = ({ className, openClassName, closedClassName, children, }) => {
+    const { open, multiple, listboxId } = useSelectContext();
+    useEffect(() => {
+        if (open) {
+            const focusAndScroll = () => {
+                const listbox = document.getElementById(listboxId);
+                if (!listbox)
+                    return;
+                let targetOption = listbox.querySelector('[role="option"][aria-selected="true"]');
+                if (!targetOption) {
+                    targetOption = listbox.querySelector('[role="option"]');
+                }
+                if (targetOption) {
+                    targetOption.focus();
+                    targetOption.scrollIntoView({ block: 'nearest' });
+                }
+            };
+            // 즉시 포커스 (키보드 대응)
+            setTimeout(focusAndScroll, 0);
+            // 트랜지션(약 200ms) 후 스크롤 재조정 (max-height가 0일 때 scrollIntoView가 씹히는 문제 방지)
+            setTimeout(focusAndScroll, 200);
+        }
+    }, [open, listboxId]);
+    return (_jsx("ul", { id: listboxId, role: "listbox", tabIndex: -1, "aria-hidden": !open, "aria-multiselectable": multiple || undefined, "data-state": open ? 'open' : 'closed', className: cn('absolute z-50 w-full mt-1', className, open ? openClassName : closedClassName), children: children }));
+};
+const Item = ({ value: itemValue, className, children }) => {
+    const { multiple, value, values, onChange, toggleValue, setOpen, disabled, listboxId, } = useSelectContext();
+    const [highlighted, setHighlighted] = useState(false);
+    const isSelected = multiple
+        ? values.includes(itemValue)
+        : value === itemValue;
+    const handleClick = useCallback(() => {
+        if (disabled)
+            return;
+        if (multiple) {
+            toggleValue(itemValue);
+        }
+        else {
+            onChange?.(itemValue);
+            setOpen(false);
+        }
+    }, [disabled, multiple, onChange, toggleValue, itemValue, setOpen]);
+    return (_jsx(ItemContext.Provider, { value: itemValue, children: _jsx("li", { role: "option", tabIndex: 0, "aria-selected": isSelected, "data-state": isSelected ? 'checked' : 'unchecked', "data-highlighted": highlighted || undefined, onMouseDown: (e) => e.preventDefault(), onClick: handleClick, onMouseEnter: () => setHighlighted(true), onMouseLeave: () => setHighlighted(false), onFocus: () => setHighlighted(true), onBlur: () => setHighlighted(false), onKeyDown: (e) => {
+                switch (e.key) {
+                    case 'Enter':
+                    case ' ':
+                        e.preventDefault();
+                        handleClick();
+                        // 단일 선택 시 닫히고 트리거로 포커스 복귀
+                        if (!multiple) {
+                            const trigger = document.querySelector(`[aria-controls="${listboxId}"]`);
+                            trigger?.focus();
+                        }
+                        break;
+                    case 'Escape':
+                        e.preventDefault();
+                        setOpen(false);
+                        document.querySelector(`[aria-controls="${listboxId}"]`)?.focus();
+                        break;
+                    case 'ArrowDown':
+                        e.preventDefault();
+                        e.currentTarget.nextElementSibling?.focus();
+                        break;
+                    case 'ArrowUp':
+                        e.preventDefault();
+                        e.currentTarget.previousElementSibling?.focus();
+                        break;
+                }
+            }, className: cn('relative flex items-center outline-none cursor-pointer', className), children: children }) }));
+};
+// ── ItemText ──
+const ItemText = ({ children }) => {
+    return _jsx("span", { children: children });
+};
+const ItemIndicator = ({ className, children }) => {
+    const { multiple, value, values } = useSelectContext();
+    const itemValue = useItemContext();
+    const isSelected = multiple
+        ? itemValue != null && values.includes(itemValue)
+        : value === itemValue;
+    if (!isSelected)
+        return null;
+    return _jsx("span", { className: cn('ml-auto', className), children: children });
+};
+export const SelectBase = {
+    Root,
+    Trigger,
+    Value,
+    Content,
+    Item,
+    ItemText,
+    ItemIndicator,
+};
+export default SelectBase;

package/dist/components/LDSkeleton/LDSkeleton.d.ts

@@ -0,0 +1,10 @@
+import type { ReactNode } from 'react';
+export interface LDSkeletonProps {
+    /** false이면 children을 그대로 렌더링합니다 */
+    loading?: boolean;
+    className?: string;
+    children?: ReactNode;
+}
+declare const LDSkeleton: ({ loading, className, children, }: LDSkeletonProps) => import("react/jsx-runtime").JSX.Element;
+export default LDSkeleton;
+//# sourceMappingURL=LDSkeleton.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LDSkeleton.d.ts","sourceRoot":"","sources":["../../../src/components/LDSkeleton/LDSkeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,MAAM,WAAW,eAAe;IAC9B,mCAAmC;IACnC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,QAAA,MAAM,UAAU,GAAI,mCAIjB,eAAe,4CAgBjB,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/components/LDSkeleton/LDSkeleton.js

@@ -0,0 +1,8 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import cn from '../../utils/cn.js';
+const LDSkeleton = ({ loading = true, className, children, }) => {
+    if (!loading)
+        return _jsx(_Fragment, { children: children });
+    return (_jsxs("span", { "aria-busy": "true", "aria-label": "\uB85C\uB529 \uC911", className: cn('relative inline-block overflow-hidden rounded-md', className), children: [_jsx("span", { className: "invisible", children: children }), _jsx("span", { className: "absolute inset-0 rounded-[inherit] bg-mono200 animate-pulse" })] }));
+};
+export default LDSkeleton;

package/dist/components/LDSlider/LDSlider.d.ts

@@ -0,0 +1,23 @@
+type SliderSingleProps = {
+    value?: number;
+    defaultValue?: number;
+    onChange?: (value: number) => void;
+};
+type SliderRangeProps = {
+    value?: [number, number];
+    defaultValue?: [number, number];
+    onChange?: (value: [number, number]) => void;
+};
+export type LDSliderProps = (SliderSingleProps | SliderRangeProps) & {
+    min?: number;
+    max?: number;
+    step?: number;
+    disabled?: boolean;
+    orientation?: 'horizontal' | 'vertical';
+    showLabel?: boolean;
+    className?: string;
+    style?: React.CSSProperties;
+};
+declare const LDSlider: (props: LDSliderProps) => import("react/jsx-runtime").JSX.Element;
+export default LDSlider;
+//# sourceMappingURL=LDSlider.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LDSlider.d.ts","sourceRoot":"","sources":["../../../src/components/LDSlider/LDSlider.tsx"],"names":[],"mappings":"AAKA,KAAK,iBAAiB,GAAG;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC,CAAC;AAEF,KAAK,gBAAgB,GAAG;IACtB,KAAK,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACzB,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAChC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,KAAK,IAAI,CAAC;CAC9C,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG,CAAC,iBAAiB,GAAG,gBAAgB,CAAC,GAAG;IACnE,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B,CAAC;AAiCF,QAAA,MAAM,QAAQ,GAAI,OAAO,aAAa,4CAgUrC,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/dist/components/LDSlider/LDSlider.js

@@ -0,0 +1,195 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useState, useCallback, useMemo } from 'react';
+import cn from '../../utils/cn.js';
+// ── 헬퍼 함수 ────────────────────────────────────────────────────────────────
+//퍼센테이지 계산
+const toPercent = (value, min, max) => {
+    return ((value - min) / (max - min)) * 100;
+};
+//값 제한
+const clamp = (value, min, max) => {
+    return Math.min(Math.max(value, min), max);
+};
+//값 범위
+const getValueFromPointer = (clientPos, rect, isVertical, min, max, step) => {
+    const ratio = isVertical
+        ? 1 - (clientPos - rect.top) / rect.height
+        : (clientPos - rect.left) / rect.width;
+    const raw = min + clamp(ratio, 0, 1) * (max - min);
+    const stepped = Math.round((raw - min) / step) * step + min;
+    return clamp(stepped, min, max);
+};
+// ── 컴포넌트 ──────────────────────────────────────────────────────────────
+const LDSlider = (props) => {
+    const { min = 0, max = 100, step = 1, disabled = false, orientation = 'horizontal', showLabel = false, className, style, } = props;
+    const isVertical = orientation === 'vertical';
+    const isRange = Array.isArray(props.value ??
+        props.defaultValue);
+    // ── 단일 상태일 경우 제어, 비제어 상태 확인 ──
+    const singleControlled = !isRange && props.value !== undefined;
+    const [singleInternal, setSingleInternal] = useState(!isRange ? (props.defaultValue ?? min) : min);
+    const singleValue = singleControlled
+        ? props.value
+        : singleInternal;
+    // ── 범위 상태일 경우 제어, 비제어 상태 확인 ──
+    const rangeControlled = isRange && props.value !== undefined;
+    const [rangeInternal, setRangeInternal] = useState(isRange
+        ? (props.defaultValue ?? [min, max])
+        : [min, max]);
+    const rangeValue = rangeControlled
+        ? props.value
+        : rangeInternal;
+    // stale closure 방지: 핸들러에서 항상 최신 rangeValue 참조
+    const rangeValueRef = useRef(rangeValue);
+    rangeValueRef.current = rangeValue;
+    // ── 범위 모드 시 활성화된 손잡이(Thumb) 관리 ──
+    const trackRef = useRef(null);
+    const activeThumbRef = useRef('a');
+    const resolveActiveThumb = useCallback((clientPos) => {
+        if (!trackRef.current)
+            return 'a';
+        const rect = trackRef.current.getBoundingClientRect();
+        const ratio = isVertical
+            ? 1 - (clientPos - rect.top) / rect.height
+            : (clientPos - rect.left) / rect.width;
+        const pointValue = min + ratio * (max - min);
+        const current = rangeValueRef.current;
+        const distA = Math.abs(pointValue - current[0]);
+        const distB = Math.abs(pointValue - current[1]);
+        return distA <= distB ? 'a' : 'b';
+    }, [isVertical, min, max]);
+    // ── 변경 핸들러 ──
+    const handleSingleChange = useCallback((raw) => {
+        if (!singleControlled)
+            setSingleInternal(raw);
+        props.onChange?.(raw);
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [singleControlled]);
+    const handleRangeChangeA = useCallback((raw) => {
+        const next = [
+            Math.min(raw, rangeValueRef.current[1]),
+            rangeValueRef.current[1],
+        ];
+        if (!rangeControlled)
+            setRangeInternal(next);
+        props.onChange?.(next);
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [rangeControlled]);
+    const handleRangeChangeB = useCallback((raw) => {
+        const next = [
+            rangeValueRef.current[0],
+            Math.max(raw, rangeValueRef.current[0]),
+        ];
+        if (!rangeControlled)
+            setRangeInternal(next);
+        props.onChange?.(next);
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [rangeControlled]);
+    // ── 트랙 포인터 핸들러 (클릭 이동 + 드래그) ──
+    const handleTrackPointerDown = useCallback((e) => {
+        if (disabled || !trackRef.current)
+            return;
+        e.currentTarget.setPointerCapture(e.pointerId);
+        const rect = trackRef.current.getBoundingClientRect();
+        const v = getValueFromPointer(isVertical ? e.clientY : e.clientX, rect, isVertical, min, max, step);
+        if (isRange) {
+            const which = resolveActiveThumb(isVertical ? e.clientY : e.clientX);
+            activeThumbRef.current = which;
+            if (which === 'a')
+                handleRangeChangeA(v);
+            else
+                handleRangeChangeB(v);
+        }
+        else {
+            handleSingleChange(v);
+        }
+    }, [
+        disabled,
+        isVertical,
+        min,
+        max,
+        step,
+        isRange,
+        resolveActiveThumb,
+        handleRangeChangeA,
+        handleRangeChangeB,
+        handleSingleChange,
+    ]);
+    const handleTrackPointerMove = useCallback((e) => {
+        if (disabled ||
+            !e.currentTarget.hasPointerCapture(e.pointerId) ||
+            !trackRef.current)
+            return;
+        const rect = trackRef.current.getBoundingClientRect();
+        const v = getValueFromPointer(isVertical ? e.clientY : e.clientX, rect, isVertical, min, max, step);
+        if (isRange) {
+            if (activeThumbRef.current === 'a')
+                handleRangeChangeA(v);
+            else
+                handleRangeChangeB(v);
+        }
+        else {
+            handleSingleChange(v);
+        }
+    }, [
+        disabled,
+        isVertical,
+        min,
+        max,
+        step,
+        isRange,
+        handleRangeChangeA,
+        handleRangeChangeB,
+        handleSingleChange,
+    ]);
+    // ── 채워지는 영역 퍼센트 계산 ──
+    const fillStyle = useMemo(() => {
+        if (isRange) {
+            const lo = toPercent(rangeValue[0], min, max);
+            const hi = toPercent(rangeValue[1], min, max);
+            return isVertical
+                ? { bottom: `${lo}%`, height: `${hi - lo}%` }
+                : { left: `${lo}%`, width: `${hi - lo}%` };
+        }
+        const pct = toPercent(clamp(singleValue, min, max), min, max);
+        return isVertical
+            ? { bottom: 0, height: `${pct}%` }
+            : { left: 0, width: `${pct}%` };
+    }, [isRange, isVertical, min, max, singleValue, rangeValue]);
+    // ── 라벨 위치 계산 ──
+    const labelAPercent = isRange
+        ? toPercent(rangeValue[0], min, max)
+        : toPercent(clamp(singleValue, min, max), min, max);
+    const labelBPercent = isRange ? toPercent(rangeValue[1], min, max) : 0;
+    const shouldOffsetLabel = isRange && Math.abs(labelBPercent - labelAPercent) < 8;
+    const getLabelStyle = (percent, which) => {
+        const offset = shouldOffsetLabel ? (which === 'a' ? -16 : 16) : 0;
+        if (isVertical) {
+            return {
+                position: 'absolute',
+                left: 'calc(100% + 8px)',
+                bottom: `${percent}%`,
+                transform: `translateY(calc(50% + ${offset}px))`,
+            };
+        }
+        return {
+            position: 'absolute',
+            bottom: 'calc(100% + 8px)',
+            left: `${percent}%`,
+            transform: `translateX(calc(-50% + ${offset}px))`,
+        };
+    };
+    // ── 수직 모드용 입력창 공통 스타일 ──
+    const inputStyle = isVertical
+        ? { writingMode: 'vertical-lr', direction: 'rtl' }
+        : {};
+    // ── 렌더링 ──────────────────────────────────────────────────────────────
+    return (_jsxs("div", { className: cn('relative flex items-center', isVertical ? 'flex-col h-48 w-fit' : 'flex-row w-full', className), style: style, children: [_jsxs("div", { ref: trackRef, onPointerDown: handleTrackPointerDown, onPointerMove: handleTrackPointerMove, className: cn('relative rounded-full bg-mono200', isVertical ? 'w-1.5 h-full' : 'h-1.5 w-full', disabled ? 'opacity-40 cursor-not-allowed' : 'cursor-pointer'), children: [_jsx("div", { className: "absolute rounded-full bg-lb500 pointer-events-none", style: {
+                            ...(isVertical ? { left: 0, right: 0 } : { top: 0, bottom: 0 }),
+                            ...fillStyle,
+                        } }), !isRange && (_jsx("input", { type: "range", min: min, max: max, step: step, value: singleValue, disabled: disabled, onChange: (e) => handleSingleChange(e.target.valueAsNumber), className: "ld-slider-thumb absolute inset-0 w-full h-full", style: inputStyle })), isRange && (_jsxs(_Fragment, { children: [_jsx("input", { type: "range", min: min, max: max, step: step, value: rangeValue[0], disabled: disabled, onChange: (e) => handleRangeChangeA(e.target.valueAsNumber), className: "ld-slider-thumb absolute inset-0 w-full h-full z-0", style: inputStyle }), _jsx("input", { type: "range", min: min, max: max, step: step, value: rangeValue[1], disabled: disabled, onChange: (e) => handleRangeChangeB(e.target.valueAsNumber), className: "ld-slider-thumb absolute inset-0 w-full h-full z-0", style: inputStyle })] }))] }), showLabel && (_jsxs(_Fragment, { children: [_jsx("span", { className: "text-xs font-medium text-lb500 whitespace-nowrap pointer-events-none select-none", style: getLabelStyle(labelAPercent, 'a'), children: isRange ? rangeValue[0] : singleValue }), isRange && (_jsx("span", { className: "text-xs font-medium text-lb500 whitespace-nowrap pointer-events-none select-none", style: getLabelStyle(labelBPercent, 'b'), children: rangeValue[1] }))] }))] }));
+};
+export default LDSlider;

package/dist/components/LDSpinner/LDSpinner.d.ts

@@ -0,0 +1,25 @@
+export type SpinnerSize = 'xSmall' | 'small' | 'medium' | 'large' | 'big' | 'xLarge';
+export interface LDSpinnerProps {
+    /**
+     * LDSpinner의 크기를 지정합니다. 프리셋 이름이나 숫자(px)를 사용할 수 있습니다. (기본값: 'large' / 24px)
+     */
+    size?: SpinnerSize | number;
+    /**
+     * 추가적인 스타일 클래스를 지정합니다. (색상 등을 변경할 때 사용)
+     */
+    className?: string;
+    /**
+     * 사용할 아이콘 타입을 지정합니다. (기본값: 'default')
+     */
+    variant?: 'default' | 'split';
+    /**
+     * 접근성을 위한 라벨입니다. (기본값: 'loading')
+     */
+    label?: string;
+}
+/**
+ * 디자인 시스템 표준을 따르는 LDSpinner 컴포넌트입니다.
+ */
+declare const LDSpinner: ({ size, className, variant, label, }: LDSpinnerProps) => import("react/jsx-runtime").JSX.Element;
+export default LDSpinner;
+//# sourceMappingURL=LDSpinner.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LDSpinner.d.ts","sourceRoot":"","sources":["../../../src/components/LDSpinner/LDSpinner.tsx"],"names":[],"mappings":"AAGA,MAAM,MAAM,WAAW,GACnB,QAAQ,GACR,OAAO,GACP,QAAQ,GACR,OAAO,GACP,KAAK,GACL,QAAQ,CAAC;AAWb,MAAM,WAAW,cAAc;IAC7B;;OAEG;IACH,IAAI,CAAC,EAAE,WAAW,GAAG,MAAM,CAAC;IAC5B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;IAC9B;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;GAEG;AACH,QAAA,MAAM,SAAS,GAAI,sCAKhB,cAAc,4CAYhB,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/dist/components/LDSpinner/LDSpinner.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { LoaderIcon, LoaderCircleIcon } from 'lucide-react';
+import cn from '../../utils/cn.js';
+const sizeMap = {
+    xSmall: 12,
+    small: 16,
+    medium: 20,
+    large: 24,
+    big: 32,
+    xLarge: 48,
+};
+/**
+ * 디자인 시스템 표준을 따르는 LDSpinner 컴포넌트입니다.
+ */
+const LDSpinner = ({ size = 'large', className, variant = 'default', label = 'loading', }) => {
+    const Icon = variant === 'default' ? LoaderCircleIcon : LoaderIcon;
+    const pixelSize = typeof size === 'number' ? size : sizeMap[size];
+    return (_jsx(Icon, { size: pixelSize, className: cn('animate-spin text-muted-foreground', className), role: "status", "aria-label": label }));
+};
+export default LDSpinner;

package/dist/components/LDTable/LDTable.d.ts

@@ -0,0 +1,34 @@
+import { type ReactNode, type CSSProperties } from 'react';
+export interface LDTableProps {
+    /** 테이블 콘텐츠 (LDTable.Header, LDTable.Body 등) */
+    children: ReactNode;
+    /** 상단 타이틀 텍스트 */
+    title?: string;
+    /** 전체 데이터 건수 (타이틀 옆에 표시) */
+    totalCount?: number;
+    /** 타이틀 우측에 배치할 요소 (버튼, 필터 등) */
+    /** 테이블 상단에 배치할 요소 */
+    /** 테이블 하단에 배치할 요소 (LDPagination 등) */
+    footer?: ReactNode;
+    /** 데이터 없음 상태 여부 */
+    isEmpty?: boolean;
+    /** 데이터 없을 때 표시할 메시지 */
+    emptyMessage?: string | ReactNode;
+    /** 빈 상태 행의 colSpan 값 */
+    columnCount?: number;
+    className?: string;
+    style?: CSSProperties;
+}
+declare const LDTable: {
+    ({ children, title, totalCount, footer, isEmpty, emptyMessage, columnCount, className, style, }: LDTableProps): import("react/jsx-runtime").JSX.Element;
+    Header: ({ className, children, ...props }: React.HTMLAttributes<HTMLTableSectionElement>) => import("react/jsx-runtime").JSX.Element;
+    HeaderRow: ({ className, children, ...props }: React.HTMLAttributes<HTMLTableRowElement>) => import("react/jsx-runtime").JSX.Element;
+    HeaderCell: ({ className, children, ...props }: React.ThHTMLAttributes<HTMLTableCellElement>) => import("react/jsx-runtime").JSX.Element;
+    Body: ({ className, children, ...props }: React.HTMLAttributes<HTMLTableSectionElement>) => import("react/jsx-runtime").JSX.Element;
+    Row: ({ className, children, ...props }: React.HTMLAttributes<HTMLTableRowElement> & {
+        selected?: boolean;
+    }) => import("react/jsx-runtime").JSX.Element;
+    Cell: ({ className, children, ...props }: React.TdHTMLAttributes<HTMLTableCellElement>) => import("react/jsx-runtime").JSX.Element;
+};
+export default LDTable;
+//# sourceMappingURL=LDTable.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LDTable.d.ts","sourceRoot":"","sources":["../../../src/components/LDTable/LDTable.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAE,KAAK,aAAa,EAAE,MAAM,OAAO,CAAC;AAI3D,MAAM,WAAW,YAAY;IAC3B,+CAA+C;IAC/C,QAAQ,EAAE,SAAS,CAAC;IACpB,iBAAiB;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4BAA4B;IAC5B,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB,gCAAgC;IAGhC,qBAAqB;IAGrB,sCAAsC;IACtC,MAAM,CAAC,EAAE,SAAS,CAAC;IAQnB,mBAAmB;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,uBAAuB;IACvB,YAAY,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAElC,wBAAwB;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;CAOvB;AAED,QAAA,MAAM,OAAO;qGAgBV,YAAY;gDAmCZ,KAAK,CAAC,cAAc,CAAC,uBAAuB,CAAC;mDAgB7C,KAAK,CAAC,cAAc,CAAC,mBAAmB,CAAC;oDAUzC,KAAK,CAAC,gBAAgB,CAAC,oBAAoB,CAAC;8CAa5C,KAAK,CAAC,cAAc,CAAC,uBAAuB,CAAC;6CAU7C,KAAK,CAAC,cAAc,CAAC,mBAAmB,CAAC,GAAG;QAAE,QAAQ,CAAC,EAAE,OAAO,CAAA;KAAE;8CAgBlE,KAAK,CAAC,gBAAgB,CAAC,oBAAoB,CAAC;CAxE9C,CAAC;AAqFF,eAAe,OAAO,CAAC"}

package/dist/components/LDTable/LDTable.js

@@ -0,0 +1,29 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import TableBase from './TableBase.js';
+import cn from '../../utils/cn.js';
+const LDTable = ({ children, title, totalCount, 
+// rightSideContents,
+// tableTop,
+footer, 
+// scrollable = false,
+// scrollMinWidth = '1440px',
+isEmpty = false, emptyMessage = '조회하신 데이터가 없습니다.', columnCount, className, style,
+// wrapperClassName,
+// wrapperStyle,
+ }) => {
+    return (_jsxs("div", { className: cn('flex flex-col justify-between h-full gap-sm'), children: [title && (_jsxs("h3", { className: "whitespace-nowrap display16 bold", children: [title, totalCount !== undefined && ` (${totalCount.toLocaleString()})`] })), _jsxs(TableBase.Root, { className: cn('w-full', className), style: style, children: [children, isEmpty && columnCount && (_jsx(TableBase.Body, { children: _jsx(TableBase.Row, { children: _jsx(TableBase.Cell, { colSpan: columnCount, className: "text-center h-24 py-24", children: emptyMessage }) }) }))] }), footer] }));
+};
+// ── Styled Sub-components ──
+const Header = ({ className, children, ...props }) => (_jsx(TableBase.Header, { className: cn('border-b border-neutral700 bg-mono100 hover:bg-mono200 ld-transition', className), ...props, children: children }));
+const HeaderRow = ({ className, children, ...props }) => (_jsx(TableBase.HeaderRow, { className: cn('bg-neutral5', className), ...props, children: children }));
+const HeaderCell = ({ className, children, ...props }) => (_jsx(TableBase.HeaderCell, { className: cn('px-4 py-3 text-left display12 regular', className), ...props, children: children }));
+const Body = ({ className, children, ...props }) => (_jsx(TableBase.Body, { className: className, ...props, children: children }));
+const Row = ({ className, children, ...props }) => (_jsx(TableBase.Row, { className: cn('border-b border-neutral100 hover:bg-black/3 ld-transition', className), ...props, children: children }));
+const Cell = ({ className, children, ...props }) => (_jsx(TableBase.Cell, { className: cn('px-4 py-3 display14', className), ...props, children: children }));
+LDTable.Header = Header;
+LDTable.HeaderRow = HeaderRow;
+LDTable.HeaderCell = HeaderCell;
+LDTable.Body = Body;
+LDTable.Row = Row;
+LDTable.Cell = Cell;
+export default LDTable;

package/dist/components/LDTable/LDTanstackTable.d.ts

@@ -0,0 +1,23 @@
+import { type ReactNode, type CSSProperties } from 'react';
+import { type TableFieldProps, type Pageable } from './TableField.js';
+export type { Pageable };
+export interface LDTanstackTableProps<TData, TColumn> extends Omit<TableFieldProps<TData, TColumn>, 'children'> {
+    title?: string;
+    rightSideContents?: ReactNode;
+    tableTop?: ReactNode;
+    showPagination?: boolean;
+    emptyMessage?: string | ReactNode;
+    scrollable?: boolean;
+    stickyHeader?: boolean;
+    className?: string;
+    wrapperClassName?: string;
+    wrapperStyle?: CSSProperties;
+    headerClassName?: string;
+    theadClassName?: string;
+    rowClassName?: string;
+    cellClassName?: string;
+    paginationClassName?: string;
+}
+declare const LDTanstackTable: <TData, TColumn>({ columns, data, pageable, paginationState, onPageChange, sortingState, enableRowSelection, enableMultiRowSelection, rowSelectionState, enableToggleAllRowsSelection, getRowId, title, showPagination, emptyMessage, stickyHeader, className, headerClassName, theadClassName, rowClassName, cellClassName, paginationClassName, }: LDTanstackTableProps<TData, TColumn>) => import("react/jsx-runtime").JSX.Element;
+export default LDTanstackTable;
+//# sourceMappingURL=LDTanstackTable.d.ts.map

package/dist/components/LDTable/LDTanstackTable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LDTanstackTable.d.ts","sourceRoot":"","sources":["../../../src/components/LDTable/LDTanstackTable.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,SAAS,EAAE,KAAK,aAAa,EAAE,MAAM,OAAO,CAAC;AAE3D,OAAmB,EAAE,KAAK,eAAe,EAAE,KAAK,QAAQ,EAAE,MAAM,cAAc,CAAC;AAM/E,YAAY,EAAE,QAAQ,EAAE,CAAC;AAEzB,MAAM,WAAW,oBAAoB,CAAC,KAAK,EAAE,OAAO,CAAE,SAAQ,IAAI,CAChE,eAAe,CAAC,KAAK,EAAE,OAAO,CAAC,EAC/B,UAAU,CACX;IAEC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iBAAiB,CAAC,EAAE,SAAS,CAAC;IAC9B,QAAQ,CAAC,EAAE,SAAS,CAAC;IAGrB,cAAc,CAAC,EAAE,OAAO,CAAC;IAGzB,YAAY,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAClC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,YAAY,CAAC,EAAE,OAAO,CAAC;IAGvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,mBAAmB,CAAC,EAAE,MAAM,CAAC;CAC9B;AAED,QAAA,MAAM,eAAe,GAAI,KAAK,EAAE,OAAO,EAAE,oUAwBtC,oBAAoB,CAAC,KAAK,EAAE,OAAO,CAAC,4CA+HtC,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/dist/components/LDTable/LDTanstackTable.js

@@ -0,0 +1,35 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ArrowUp, ArrowDown } from 'lucide-react';
+import TableField from './TableField.js';
+import LDTable from './LDTable.js';
+import LDPagination from '../LDPagination/LDPagination.js';
+import cn from '../../utils/cn.js';
+const LDTanstackTable = ({ 
+// TableField props
+columns, data, pageable, paginationState, onPageChange, sortingState, enableRowSelection, enableMultiRowSelection, rowSelectionState, enableToggleAllRowsSelection, getRowId, 
+// 프레젠테이션 props
+title, showPagination = true, emptyMessage, stickyHeader = false, className, headerClassName, theadClassName, rowClassName, cellClassName, paginationClassName, }) => {
+    return (_jsx(TableField, { columns: columns, data: data, pageable: pageable, paginationState: paginationState, onPageChange: onPageChange, sortingState: sortingState, enableRowSelection: enableRowSelection, enableMultiRowSelection: enableMultiRowSelection, rowSelectionState: rowSelectionState, enableToggleAllRowsSelection: enableToggleAllRowsSelection, getRowId: getRowId, children: ({ headerGroups, rows, isEmpty, currentPage, totalPages, toggleAllRowsSelected, onPageChange: handlePageChange, getHeader, getCell, }) => {
+            const paginationFooter = showPagination && !isEmpty && pageable && totalPages > 0 ? (_jsx(LDPagination, { currentPage: currentPage, totalPages: totalPages, onPageChange: handlePageChange, className: paginationClassName })) : null;
+            return (_jsxs(LDTable, { title: title, totalCount: pageable?.totalCount, 
+                // rightSideContents={rightSideContents}
+                // tableTop={tableTop}
+                // scrollable={scrollable}
+                isEmpty: isEmpty, emptyMessage: emptyMessage, columnCount: columns.length, footer: paginationFooter, className: className, children: [_jsx(LDTable.Header, { className: cn('hover:bg-mono11 ld-transition', theadClassName), children: headerGroups.map((hg) => (_jsx(LDTable.HeaderRow, { className: "w-full", onClick: toggleAllRowsSelected, children: hg.headers.map((header) => {
+                                const h = getHeader(header);
+                                return (_jsxs(LDTable.HeaderCell, { className: cn('relative h-9', headerClassName, stickyHeader &&
+                                        'sticky top-0 bg-mono10 z-10 border-b border-neutral10', h.canSort && 'cursor-pointer', h.meta
+                                        ?.headerAlign === 'left'
+                                        ? 'text-left'
+                                        : h.meta
+                                            ?.headerAlign === 'right'
+                                            ? 'text-right'
+                                            : 'text-center'), style: { width: h.size }, onClick: h.toggleSortingHandler, children: [h.renderHeader(), h.isSorted === 'asc' && (_jsx(ArrowUp, { className: "inline-block w-3 h-3 ml-1 align-middle" })), h.isSorted === 'desc' && (_jsx(ArrowDown, { className: "inline-block w-3 h-3 ml-1 align-middle" }))] }, h.id));
+                            }) }, hg.id))) }), !isEmpty && (_jsx(LDTable.Body, { children: rows.map((row) => (_jsx(LDTable.Row, { selected: row.getIsSelected(), className: cn('hover:bg-black/3 ld-transition h-13', rowClassName), onClick: () => row.toggleSelected(), children: row.getVisibleCells().map((cell) => {
+                                const c = getCell(cell);
+                                return (_jsx(LDTable.Cell, { className: cellClassName, children: c.renderCell() }, c.id));
+                            }) }, row.id))) }))] }));
+        } }));
+};
+export default LDTanstackTable;