@loword/loword-design-system 0.0.2 → 0.0.3

package/dist/components/LDTimePicker/FormTimePicker.js

@@ -0,0 +1,12 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import LDTimePicker from './LDTimePicker.js';
+import FormField from '../Form/FormField.js';
+import FormErrorMessage from '../Form/FormErrorMessage.js';
+import cn from '../../utils/cn.js';
+const FormTimePicker = ({ name, options, customErrorMessage = '', isHiddenErrorMessage = false, errorClassName, disabled = false, block = false, ...props }) => {
+    return (_jsx(FormField, { name: name, options: options, customErrorMessage: customErrorMessage, disabled: disabled, children: ({ field, fieldState }) => (_jsxs("div", { className: cn('relative border-2 border-transparent', block ? 'w-full' : 'w-auto'), children: [_jsx(LDTimePicker, { ...props, block: block, value: field.value ?? '', onChange: (time) => {
+                        field.onChange(time);
+                    }, disabled: disabled, color: fieldState.hasError ? 'danger' : 'neutral' }), !isHiddenErrorMessage && (_jsx(FormErrorMessage, { error: fieldState.error, disabled: disabled, className: errorClassName }))] })) }));
+};
+export default FormTimePicker;

package/dist/components/LDTimePicker/LDTimePicker.d.ts

@@ -0,0 +1,27 @@
+export interface LDTimePickerProps {
+    /** 선택된 시간 (HH:MM 형식) */
+    value?: string;
+    /** 초기 선택 시간 (uncontrolled) */
+    defaultValue?: string;
+    /** 시간 변경 시 호출되는 콜백 */
+    onChange?: (value: string) => void;
+    /** 미선택 시 표시할 텍스트 */
+    placeholder?: string;
+    /** 비활성화 여부 */
+    disabled?: boolean;
+    /** true 시 너비 100% */
+    block?: boolean;
+    /** 색상 테마 (danger 시 에러 스타일) */
+    color?: 'neutral' | 'danger';
+    /** 최소 선택 가능 시간 (HH:MM 형식, 이전 시간 비활성화) */
+    minTime?: string;
+    /** 추가 CSS 클래스 */
+    className?: string;
+    /** 인라인 스타일 (트리거 버튼에 적용) */
+    style?: React.CSSProperties;
+    /** 트리거 버튼 className */
+    triggerClassName?: string;
+}
+declare const LDTimePicker: ({ value, defaultValue, onChange, placeholder, disabled, block, color, minTime, className, style, triggerClassName, }: LDTimePickerProps) => import("react/jsx-runtime").JSX.Element;
+export default LDTimePicker;
+//# sourceMappingURL=LDTimePicker.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LDTimePicker.d.ts","sourceRoot":"","sources":["../../../src/components/LDTimePicker/LDTimePicker.tsx"],"names":[],"mappings":"AAsCA,MAAM,WAAW,iBAAiB;IAChC,wBAAwB;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8BAA8B;IAC9B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,sBAAsB;IACtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,oBAAoB;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qBAAqB;IACrB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,8BAA8B;IAC9B,KAAK,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAC7B,yCAAyC;IACzC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,iBAAiB;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2BAA2B;IAC3B,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,uBAAuB;IACvB,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED,QAAA,MAAM,YAAY,GAAI,sHAYnB,iBAAiB,4CA4KnB,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/components/LDTimePicker/LDTimePicker.js

@@ -0,0 +1,120 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useState, useRef } from 'react';
+import PopoverBase from '../LDPopover/PopoverBase.js';
+import LucideIcon from '../Icon/LucideIcon.js';
+import cn from '../../utils/cn.js';
+/** 시간 입력 자동 포맷팅 (1212 -> 12:12) */
+const formatTimeInput = (value) => {
+    const numbers = value.replace(/\D/g, '');
+    if (!numbers)
+        return '';
+    const limitedNumbers = numbers.slice(0, 4);
+    if (limitedNumbers.length <= 2)
+        return limitedNumbers;
+    const hours = limitedNumbers.slice(0, 2);
+    const minutes = limitedNumbers.slice(2);
+    const hoursNum = parseInt(hours, 10);
+    if (hoursNum > 23)
+        return hours.slice(0, 1);
+    if (minutes) {
+        const minutesNum = parseInt(minutes, 10);
+        if (minutesNum > 59)
+            return `${hours}:${minutes.slice(0, 1)}`;
+    }
+    return `${hours}:${minutes}`;
+};
+// ── 시간 옵션 생성 (00:00 ~ 23:30, 30분 간격) ──
+const generateTimeOptions = (minTime) => {
+    const options = [];
+    for (let hour = 0; hour < 24; hour++) {
+        for (let minute = 0; minute < 60; minute += 30) {
+            const timeString = `${String(hour).padStart(2, '0')}:${String(minute).padStart(2, '0')}`;
+            if (minTime && timeString < minTime)
+                continue;
+            options.push(timeString);
+        }
+    }
+    return options;
+};
+const LDTimePicker = ({ value, defaultValue, onChange, placeholder = 'HH:MM', disabled = false, block = false, color = 'neutral', minTime, className, style, triggerClassName, }) => {
+    const [open, setOpen] = useState(false);
+    const [internal, setInternal] = useState(defaultValue);
+    const [isEditable, setIsEditable] = useState(false);
+    const inputRef = useRef(null);
+    const isControlled = value !== undefined;
+    const resolved = isControlled ? value : internal;
+    const timeOptions = useMemo(() => generateTimeOptions(minTime), [minTime]);
+    const handleTimeSelect = (time) => {
+        if (!isControlled)
+            setInternal(time);
+        onChange?.(time);
+        setOpen(false);
+    };
+    const handleInputChange = (e) => {
+        const formatted = formatTimeInput(e.target.value);
+        if (!isControlled)
+            setInternal(formatted);
+        onChange?.(formatted);
+    };
+    const handlePencilClick = (e) => {
+        e.stopPropagation();
+        e.preventDefault();
+        if (isEditable) {
+            setIsEditable(false);
+            inputRef.current?.blur();
+        }
+        else {
+            setIsEditable(true);
+            setTimeout(() => {
+                inputRef.current?.focus();
+            }, 0);
+        }
+    };
+    const handleInputBlur = (e) => {
+        const relatedTarget = e.relatedTarget;
+        if (relatedTarget?.closest('[data-pencil-button]'))
+            return;
+        setIsEditable(false);
+    };
+    return (_jsx("div", { className: cn(block ? 'w-full' : 'w-auto', className), children: _jsxs(PopoverBase.Root, { open: open, onOpenChange: setOpen, children: [_jsxs(PopoverBase.Trigger, { disabled: disabled, style: style, onClick: (e) => {
+                        if (isEditable)
+                            e.preventDefault();
+                    }, className: cn('border border-neutral10 h-[38px] w-full display14 px-4 rounded-[5px]', 'flex flex-row items-center justify-between gap-4', 'outline-2 outline-transparent ld-transition', disabled && 'cursor-not-allowed opacity-50', color === 'danger'
+                        ? 'bg-tintRed outline-red500'
+                        : 'focus:bg-tintBlue focus:outline-lb500', triggerClassName), children: [_jsx("input", { ref: inputRef, type: "text", value: resolved ?? '', onChange: handleInputChange, onBlur: handleInputBlur, onKeyDown: (e) => {
+                                if (e.key === 'ArrowDown') {
+                                    e.preventDefault();
+                                    setOpen(true);
+                                }
+                            }, placeholder: placeholder, "aria-label": "\uC2DC\uAC04 \uC785\uB825", disabled: disabled, readOnly: !isEditable, className: cn('flex-1 bg-transparent outline-none min-w-0', !resolved && 'text-neutral40', !isEditable && 'cursor-pointer') }), _jsxs("div", { className: "flex items-center gap-2 shrink-0", children: [_jsx("span", { "data-pencil-button": true, role: "button", tabIndex: 0, "aria-label": "\uC9C1\uC811 \uC785\uB825 \uBAA8\uB4DC \uC804\uD658", onClick: handlePencilClick, onKeyDown: (e) => {
+                                        if (e.key === 'Enter' || e.key === ' ') {
+                                            e.preventDefault();
+                                            handlePencilClick(e);
+                                        }
+                                    }, className: cn('p-0 transition-colors cursor-pointer', isEditable ? 'text-lb500' : 'text-neutral40'), children: _jsx(LucideIcon, { name: "pencil", size: 15 }) }), _jsx(LucideIcon, { name: "clock", size: 15, className: "text-neutral40" })] })] }), _jsx(PopoverBase.Content, { className: "rounded-md border border-neutral-200 bg-white shadow-md p-0", style: { width: 'var(--radix-popover-trigger-width)' }, onOpenAutoFocus: (e) => {
+                        e.preventDefault();
+                        const targetTime = timeOptions.find((t) => t >= (resolved || '00:00')) ||
+                            timeOptions[0];
+                        setTimeout(() => {
+                            const targetButton = document.querySelector(`[data-time-picker-list] button[data-time="${targetTime}"]`);
+                            if (targetButton) {
+                                targetButton.focus();
+                                targetButton.scrollIntoView({ block: 'nearest' });
+                            }
+                        }, 0);
+                    }, children: _jsx("div", { "data-time-picker-list": true, role: "listbox", "aria-label": "\uC2DC\uAC04 \uC120\uD0DD \uBAA9\uB85D", className: "max-h-[240px] overflow-y-auto scrollbar-hide p-2", children: timeOptions.map((time) => (_jsx("button", { "data-time": time, type: "button", role: "option", "aria-selected": resolved === time, "aria-label": `${time.split(':')[0]}시 ${time.split(':')[1]}분`, onClick: () => handleTimeSelect(time), onKeyDown: (e) => {
+                                const target = e.currentTarget;
+                                if (e.key === 'ArrowDown') {
+                                    e.preventDefault();
+                                    target.nextElementSibling?.focus();
+                                }
+                                else if (e.key === 'ArrowUp') {
+                                    e.preventDefault();
+                                    target.previousElementSibling?.focus();
+                                }
+                            }, className: cn('w-full text-left px-3 py-2 rounded-[5px] display14 transition-all cursor-pointer outline-none', 'hover:bg-lb50 hover:text-lb500', 'focus:bg-lb50 focus:text-lb500 focus:ring-1 focus:ring-inset focus:ring-lb500', resolved === time
+                                ? 'bg-neutral10 font-bold'
+                                : 'text-neutral800'), children: time }, time))) }) })] }) }));
+};
+export default LDTimePicker;

package/dist/components/LDToggleButton/FormToggleButton.d.ts

@@ -0,0 +1,12 @@
+import { type RegisterOptions } from 'react-hook-form';
+import { type LDToggleButtonProps } from './LDToggleButton.js';
+interface FormToggleButtonProps extends Omit<LDToggleButtonProps, 'checked' | 'name' | 'onCheckedChange'> {
+    name: string;
+    options?: RegisterOptions;
+    customErrorMessage?: string;
+    isHiddenErrorMessage?: boolean;
+    errorClassName?: string;
+}
+declare const FormToggleButton: ({ name, options, customErrorMessage, isHiddenErrorMessage, errorClassName, disabled, ...props }: FormToggleButtonProps) => import("react/jsx-runtime").JSX.Element;
+export default FormToggleButton;
+//# sourceMappingURL=FormToggleButton.d.ts.map

package/dist/components/LDToggleButton/FormToggleButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormToggleButton.d.ts","sourceRoot":"","sources":["../../../src/components/LDToggleButton/FormToggleButton.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,iBAAiB,CAAC;AACvD,OAAuB,EAAE,KAAK,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAI5E,UAAU,qBAAsB,SAAQ,IAAI,CAC1C,mBAAmB,EACnB,SAAS,GAAG,MAAM,GAAG,iBAAiB,CACvC;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;CACzB;AAED,QAAA,MAAM,gBAAgB,GAAI,iGAQvB,qBAAqB,4CAgCvB,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/dist/components/LDToggleButton/FormToggleButton.js

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

package/dist/components/LDToggleButton/LDToggleButton.d.ts

@@ -0,0 +1,31 @@
+import { type Ref } from 'react';
+type ButtonSize = 'small' | 'medium' | 'large' | 'xlarge';
+export interface LDToggleButtonProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
+    /** controlled 체크 상태 */
+    checked?: boolean;
+    /** 초기 체크 상태 (uncontrolled) */
+    defaultChecked?: boolean;
+    /** 체크 상태 변경 콜백 */
+    onCheckedChange?: (checked: boolean) => void;
+    /** 비활성화 여부 */
+    disabled?: boolean;
+    /** 크기 */
+    size?: ButtonSize;
+    /** input name */
+    name?: string;
+    /** input value */
+    value?: string;
+    /** input id */
+    id?: string;
+    /** 토글 옆에 표시할 라벨 텍스트 */
+    label?: string;
+    /** 추가 CSS 클래스 */
+    className?: string;
+    /** 인라인 스타일 */
+    style?: React.CSSProperties;
+    /** input 요소 ref */
+    ref?: Ref<HTMLInputElement>;
+}
+declare const LDToggleButton: ({ checked, defaultChecked, onCheckedChange, disabled, size, label, className, style, ref, name, id, value, ...props }: LDToggleButtonProps) => import("react/jsx-runtime").JSX.Element;
+export default LDToggleButton;
+//# sourceMappingURL=LDToggleButton.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LDToggleButton.d.ts","sourceRoot":"","sources":["../../../src/components/LDToggleButton/LDToggleButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,GAAG,EAAE,MAAM,OAAO,CAAC;AAKjC,KAAK,UAAU,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,CAAC;AAsC1D,MAAM,WAAW,mBAAoB,SAAQ,IAAI,CAC/C,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAC3C,MAAM,CACP;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,SAAS;IACT,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,iBAAiB;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,kBAAkB;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe;IACf,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,uBAAuB;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iBAAiB;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc;IACd,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,mBAAmB;IACnB,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;CAC7B;AAmDD,QAAA,MAAM,cAAc,GAAI,uHAcrB,mBAAmB,4CAqBrB,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/components/LDToggleButton/LDToggleButton.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import ToggleButtonBase, { useToggleButtonContext } from './ToggleButtonBase.js';
+import cn from '../../utils/cn.js';
+const trackClass = {
+    small: 'toggle-track-sm',
+    medium: 'toggle-track-md',
+    large: 'toggle-track-lg',
+    xlarge: 'toggle-track-xl',
+};
+const thumbClass = {
+    small: 'toggle-thumb-sm',
+    medium: 'toggle-thumb-md',
+    large: 'toggle-thumb-lg',
+    xlarge: 'toggle-thumb-xl',
+};
+const thumbOffClass = {
+    small: 'toggle-thumb-off-sm',
+    medium: 'toggle-thumb-off-md',
+    large: 'toggle-thumb-off-lg',
+    xlarge: 'toggle-thumb-off-xl',
+};
+const thumbOnClass = {
+    small: 'toggle-thumb-on-sm',
+    medium: 'toggle-thumb-on-md',
+    large: 'toggle-thumb-on-lg',
+    xlarge: 'toggle-thumb-on-xl',
+};
+const rootClass = {
+    small: 'toggle-sm',
+    medium: 'toggle-md',
+    large: 'toggle-lg',
+    xlarge: 'toggle-xl',
+};
+// ── Inner: Context에서 checked/disabled 읽어 스타일 적용 ──
+const ToggleInner = ({ label, ref, name, id, value, size, ...props }) => {
+    const { checked, disabled } = useToggleButtonContext();
+    return (_jsxs(_Fragment, { children: [_jsx(ToggleButtonBase.HiddenInput, { ref: ref, name: name, id: id, value: value, ...props }), _jsx(ToggleButtonBase.Track, { className: cn(trackClass[size], checked ? 'bg-lb500' : 'bg-mono300', disabled ? 'opacity-50' : 'cursor-pointer', 'peer-focus-visible:ring-2 peer-focus-visible:ring-lb500 peer-focus-visible:ring-offset-2'), children: _jsx(ToggleButtonBase.Thumb, { className: cn(thumbClass[size], 'bg-white ld-transition', checked ? thumbOnClass[size] : thumbOffClass[size]) }) }), label && (_jsx(ToggleButtonBase.Label, { className: "select-none", children: label }))] }));
+};
+const LDToggleButton = ({ checked, defaultChecked, onCheckedChange, disabled = false, size = 'medium', label, className, style, ref, name, id, value, ...props }) => {
+    return (_jsx(ToggleButtonBase.Root, { checked: checked, defaultChecked: defaultChecked, onCheckedChange: onCheckedChange, disabled: disabled, style: style, className: cn(rootClass[size], className), children: _jsx(ToggleInner, { label: label, ref: ref, name: name, value: value, id: id, size: size, ...props }) }));
+};
+export default LDToggleButton;

package/dist/components/LDToggleButton/ToggleButtonBase.d.ts

@@ -0,0 +1,41 @@
+import { type ReactNode, type Ref } from 'react';
+interface ToggleButtonContextType {
+    checked: boolean;
+    onCheckedChange: (checked: boolean) => void;
+    disabled: boolean;
+    isFocused: boolean;
+    setIsFocused: (focused: boolean) => void;
+}
+export declare const useToggleButtonContext: () => ToggleButtonContextType;
+interface RootProps {
+    checked?: boolean;
+    defaultChecked?: boolean;
+    onCheckedChange?: (checked: boolean) => void;
+    disabled?: boolean;
+    className?: string;
+    style?: React.CSSProperties;
+    children?: ReactNode;
+}
+interface HiddenInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    ref?: Ref<HTMLInputElement>;
+}
+interface TrackProps {
+    className?: string;
+    children?: ReactNode;
+}
+interface ThumbProps {
+    className?: string;
+}
+interface LabelProps {
+    className?: string;
+    children?: ReactNode;
+}
+export declare const ToggleButtonBase: {
+    Root: ({ checked, defaultChecked, onCheckedChange, disabled, className, style, children, }: RootProps) => import("react/jsx-runtime").JSX.Element;
+    HiddenInput: ({ ref, onFocus, onBlur, onChange, ...props }: HiddenInputProps) => import("react/jsx-runtime").JSX.Element;
+    Track: ({ className, children }: TrackProps) => import("react/jsx-runtime").JSX.Element;
+    Thumb: ({ className }: ThumbProps) => import("react/jsx-runtime").JSX.Element;
+    Label: ({ className, children }: LabelProps) => import("react/jsx-runtime").JSX.Element;
+};
+export default ToggleButtonBase;
+//# sourceMappingURL=ToggleButtonBase.d.ts.map

package/dist/components/LDToggleButton/ToggleButtonBase.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleButtonBase.d.ts","sourceRoot":"","sources":["../../../src/components/LDToggleButton/ToggleButtonBase.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,SAAS,EACd,KAAK,GAAG,EAIT,MAAM,OAAO,CAAC;AAIf,UAAU,uBAAuB;IAC/B,OAAO,EAAE,OAAO,CAAC;IACjB,eAAe,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC5C,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,EAAE,OAAO,CAAC;IACnB,YAAY,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;CAC1C;AAID,eAAO,MAAM,sBAAsB,+BAOlC,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,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AA+CD,UAAU,gBAAiB,SAAQ,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC;IAC5E,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;CAC7B;AAuCD,UAAU,UAAU;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAgBD,UAAU,UAAU;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAcD,UAAU,UAAU;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAMD,eAAO,MAAM,gBAAgB;gGA1H1B,SAAS;gEA+CT,gBAAgB;qCAoCqB,UAAU;2BAkBpB,UAAU;qCAiBA,UAAU;CAUjD,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/dist/components/LDToggleButton/ToggleButtonBase.js

@@ -0,0 +1,59 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useState, } from 'react';
+import cn from '../../utils/cn.js';
+const ToggleButtonContext = createContext(null);
+export const useToggleButtonContext = () => {
+    const ctx = useContext(ToggleButtonContext);
+    if (!ctx)
+        throw new Error('ToggleButtonBase 하위 컴포넌트는 Root 내부에서 사용해야 합니다.');
+    return ctx;
+};
+const Root = ({ checked, defaultChecked = false, onCheckedChange, disabled = false, className, style, children, }) => {
+    const [internal, setInternal] = useState(defaultChecked);
+    const [isFocused, setIsFocused] = useState(false);
+    const isControlled = checked !== undefined;
+    const resolved = isControlled ? checked : internal;
+    const handleChange = (val) => {
+        if (!isControlled)
+            setInternal(val);
+        onCheckedChange?.(val);
+    };
+    return (_jsx(ToggleButtonContext, { value: {
+            checked: resolved,
+            onCheckedChange: handleChange,
+            disabled,
+            isFocused,
+            setIsFocused,
+        }, children: _jsx("label", { style: style, onClick: (e) => e.stopPropagation(), className: cn('flex items-center gap-sm', disabled ? 'cursor-not-allowed' : 'cursor-pointer', className), children: children }) }));
+};
+const HiddenInput = ({ ref, onFocus, onBlur, onChange, ...props }) => {
+    const { checked, onCheckedChange, disabled, setIsFocused } = useToggleButtonContext();
+    return (_jsx("input", { type: "checkbox", role: "switch", "aria-checked": checked, ref: ref, className: "sr-only peer", checked: checked, disabled: disabled, onChange: (e) => {
+            e.stopPropagation();
+            onCheckedChange(e.target.checked);
+            onChange?.(e);
+        }, onFocus: (e) => {
+            setIsFocused(true);
+            onFocus?.(e);
+        }, onBlur: (e) => {
+            setIsFocused(false);
+            onBlur?.(e);
+        }, ...props }));
+};
+const Track = ({ className, children }) => {
+    return (_jsx("span", { className: cn('relative flex items-center rounded-full shrink-0', className), children: children }));
+};
+const Thumb = ({ className }) => {
+    return (_jsx("span", { className: cn('absolute rounded-full top-1/2 -translate-y-1/2', className) }));
+};
+const Label = ({ className, children }) => {
+    return _jsx("span", { className: className, children: children });
+};
+export const ToggleButtonBase = {
+    Root,
+    HiddenInput,
+    Track,
+    Thumb,
+    Label,
+};
+export default ToggleButtonBase;

package/dist/components/LDTooltip/LDTooltip.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+export interface LDTooltipProps {
+    /** 툴팁이 표시될 트리거 요소 */
+    children: React.ReactElement;
+    /** 툴팁 내용 (생략 시 children 텍스트가 잘릴 때만 자동 표시) */
+    content?: React.ReactNode;
+    /** 툴팁 표시 위치 */
+    side?: 'top' | 'right' | 'bottom' | 'left';
+    /** 툴팁 정렬 */
+    align?: 'start' | 'center' | 'end';
+    /** 추가 CSS 클래스 */
+    className?: string;
+    /** 인라인 스타일 */
+    style?: React.CSSProperties;
+}
+declare const LDTooltip: ({ children, content, side, align, className, style, }: LDTooltipProps) => import("react/jsx-runtime").JSX.Element;
+export default LDTooltip;
+//# sourceMappingURL=LDTooltip.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LDTooltip.d.ts","sourceRoot":"","sources":["../../../src/components/LDTooltip/LDTooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,MAAM,WAAW,cAAc;IAC7B,qBAAqB;IACrB,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC;IAC7B,6CAA6C;IAC7C,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,eAAe;IACf,IAAI,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;IAC3C,YAAY;IACZ,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;IACnC,iBAAiB;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc;IACd,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAED,QAAA,MAAM,SAAS,GAAI,uDAOhB,cAAc,4CA8BhB,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/dist/components/LDTooltip/LDTooltip.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import TooltipBase from './TooltipBase.js';
+import cn from '../../utils/cn.js';
+const LDTooltip = ({ children, content, side = 'top', align = 'center', className, style, }) => {
+    const { ref: textRef, isTruncated } = TooltipBase.useTruncation([children]);
+    const tooltipContent = content ?? textRef.current?.textContent ?? '';
+    const shouldShow = content ? true : isTruncated;
+    return (_jsx(TooltipBase.Provider, { children: _jsxs(TooltipBase.Root, { children: [_jsx(TooltipBase.Trigger, { asChild: true, children: _jsx("div", { className: cn('relative w-full', className), style: style, children: React.cloneElement(children, {
+                            ref: textRef,
+                        }) }) }), shouldShow && (_jsxs(TooltipBase.Content, { side: side, align: align, className: "px-2 py-1 text-xs text-white whitespace-nowrap bg-gray-900 rounded", children: [tooltipContent, _jsx(TooltipBase.Arrow, { className: "fill-gray-900" })] }))] }) }));
+};
+export default LDTooltip;

package/dist/components/LDTooltip/TooltipBase.d.ts

@@ -0,0 +1,39 @@
+import { type ReactNode } from 'react';
+interface ProviderProps {
+    delayDuration?: number;
+    children?: ReactNode;
+}
+interface RootProps {
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    children?: ReactNode;
+}
+interface TriggerProps {
+    asChild?: boolean;
+    className?: string;
+    children?: ReactNode;
+}
+interface ContentProps {
+    side?: 'top' | 'right' | 'bottom' | 'left';
+    sideOffset?: number;
+    align?: 'start' | 'center' | 'end';
+    className?: string;
+    children?: ReactNode;
+}
+interface ArrowProps {
+    className?: string;
+}
+export declare const TooltipBase: {
+    Provider: ({ delayDuration, children }: ProviderProps) => import("react/jsx-runtime").JSX.Element;
+    Root: ({ open, defaultOpen, onOpenChange, children }: RootProps) => import("react/jsx-runtime").JSX.Element;
+    Trigger: ({ asChild, className, children }: TriggerProps) => import("react/jsx-runtime").JSX.Element;
+    Content: ({ side, sideOffset, align, className, children, }: ContentProps) => import("react/jsx-runtime").JSX.Element;
+    Arrow: ({ className }: ArrowProps) => import("react/jsx-runtime").JSX.Element;
+    useTruncation: (deps?: React.DependencyList) => {
+        ref: import("react").RefObject<HTMLElement | null>;
+        isTruncated: boolean;
+    };
+};
+export default TooltipBase;
+//# sourceMappingURL=TooltipBase.d.ts.map

package/dist/components/LDTooltip/TooltipBase.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TooltipBase.d.ts","sourceRoot":"","sources":["../../../src/components/LDTooltip/TooltipBase.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAA+B,MAAM,OAAO,CAAC;AA2BpE,UAAU,aAAa;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAWD,UAAU,SAAS;IACjB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAeD,UAAU,YAAY;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAWD,UAAU,YAAY;IACpB,IAAI,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;IAC3C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AA4BD,UAAU,UAAU;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAMD,eAAO,MAAM,WAAW;4CAtF6B,aAAa;0DAgBL,SAAS;gDAmBnB,YAAY;iEAuB5D,YAAY;2BAwBe,UAAU;2BA7GX,KAAK,CAAC,cAAc;;;;CAwHhD,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/components/LDTooltip/TooltipBase.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useRef, useEffect, useState } from 'react';
+import * as RadixTooltip from '@radix-ui/react-tooltip';
+import cn from '../../utils/cn.js';
+// ── 말줄임 감지 Hook ──
+const useTruncation = (deps = []) => {
+    const ref = useRef(null);
+    const [isTruncated, setIsTruncated] = useState(false);
+    useEffect(() => {
+        const element = ref.current;
+        if (!element)
+            return;
+        const checkTruncation = () => {
+            setIsTruncated(element.scrollWidth > element.clientWidth);
+        };
+        checkTruncation();
+        window.addEventListener('resize', checkTruncation);
+        return () => window.removeEventListener('resize', checkTruncation);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, deps);
+    return { ref, isTruncated };
+};
+const Provider = ({ delayDuration = 200, children }) => {
+    return (_jsx(RadixTooltip.Provider, { delayDuration: delayDuration, children: children }));
+};
+const Root = ({ open, defaultOpen, onOpenChange, children }) => {
+    return (_jsx(RadixTooltip.Root, { open: open, defaultOpen: defaultOpen, onOpenChange: onOpenChange, children: children }));
+};
+const Trigger = ({ asChild, className, children }) => {
+    return (_jsx(RadixTooltip.Trigger, { asChild: asChild, className: className, children: children }));
+};
+const Content = ({ side = 'top', sideOffset = 8, align = 'center', className, children, }) => {
+    return (_jsx(RadixTooltip.Portal, { children: _jsx(RadixTooltip.Content, { side: side, sideOffset: sideOffset, align: align, className: cn('z-50 outline-hidden', 'animate-in fade-in-0 data-[state=closed]:animate-out data-[state=closed]:fade-out-0', className), children: children }) }));
+};
+const Arrow = ({ className }) => {
+    return _jsx(RadixTooltip.Arrow, { className: className });
+};
+export const TooltipBase = {
+    Provider,
+    Root,
+    Trigger,
+    Content,
+    Arrow,
+    useTruncation,
+};
+export default TooltipBase;

package/dist/components/LNB/LNBBase.js

@@ -4,7 +4,7 @@ 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';
+import LDAvatar from '../LDAvatar/LDAvatar.js';
 const LNBContext = createContext(null);
 const useLNBContext = () => {
     const ctx = useContext(LNBContext);
@@ -58,7 +58,7 @@ 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 }))] }))] }));
+            : 'p-md mobile:p-sm border border-neutral100'), children: [_jsx(LDAvatar, { 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 }) => {

package/dist/components/Spinner/Spinner.d.ts

@@ -11,7 +11,7 @@ export interface SpinnerProps {
     /**
      * 사용할 아이콘 타입을 지정합니다. (기본값: 'default')
      */
-    variant?: 'default' | 'circle';
+    variant?: 'default' | 'split';
     /**
      * 접근성을 위한 라벨입니다. (기본값: 'loading')
      */

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

@@ -1 +1 @@
-{"version":3,"file":"Spinner.d.ts","sourceRoot":"","sources":["../../../src/components/Spinner/Spinner.tsx"],"names":[],"mappings":"AAGA,MAAM,MAAM,WAAW,GACnB,QAAQ,GACR,OAAO,GACP,QAAQ,GACR,OAAO,GACP,KAAK,GACL,QAAQ,CAAC;AAWb,MAAM,WAAW,YAAY;IAC3B;;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,QAAQ,CAAC;IAC/B;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;GAEG;AACH,QAAA,MAAM,OAAO,GAAI,sCAKd,YAAY,4CAYd,CAAC;AAEF,eAAe,OAAO,CAAC"}
+{"version":3,"file":"Spinner.d.ts","sourceRoot":"","sources":["../../../src/components/Spinner/Spinner.tsx"],"names":[],"mappings":"AAGA,MAAM,MAAM,WAAW,GACnB,QAAQ,GACR,OAAO,GACP,QAAQ,GACR,OAAO,GACP,KAAK,GACL,QAAQ,CAAC;AAWb,MAAM,WAAW,YAAY;IAC3B;;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,OAAO,GAAI,sCAKd,YAAY,4CAYd,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/dist/components/Spinner/Spinner.js

@@ -13,7 +13,7 @@ const sizeMap = {
  * 디자인 시스템 표준을 따르는 Spinner 컴포넌트입니다.
  */
 const Spinner = ({ size = 'large', className, variant = 'default', label = 'loading', }) => {
-    const Icon = variant === 'circle' ? LoaderCircleIcon : LoaderIcon;
+    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 }));
 };