@loword/loword-design-system 0.0.1

package/dist/components/TimePicker/FormTimePicker.js

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

@@ -0,0 +1,27 @@
+export interface TimePickerProps {
+    /** 선택된 시간 (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 TimePicker: ({ value, defaultValue, onChange, placeholder, disabled, block, color, minTime, className, style, triggerClassName, }: TimePickerProps) => import("react/jsx-runtime").JSX.Element;
+export default TimePicker;
+//# sourceMappingURL=TimePicker.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TimePicker.d.ts","sourceRoot":"","sources":["../../../src/components/TimePicker/TimePicker.tsx"],"names":[],"mappings":"AAsCA,MAAM,WAAW,eAAe;IAC9B,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,UAAU,GAAI,sHAYjB,eAAe,4CA4KjB,CAAC;AAEF,eAAe,UAAU,CAAC"}

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

package/dist/components/Toast/Toast.d.ts

@@ -0,0 +1,18 @@
+export declare const Toast: {
+    /** 성공 메시지를 표시합니다 */
+    success: (content: string) => string;
+    /** 에러 메시지를 표시합니다 */
+    error: (content: string) => string;
+    /** 일반 알림 메시지를 표시합니다 */
+    info: (content: string) => string;
+    /** 경고 메시지를 표시합니다 */
+    warning: (content: string) => string;
+    /** 로딩 상태 메시지를 표시합니다 */
+    loading: (content: string) => string;
+    /** 현재 표시 중인 토스트를 모두 닫습니다 */
+    dismiss: () => void;
+    /** 인사 메시지를 표시합니다 */
+    hello: (content: string) => string;
+};
+export default Toast;
+//# sourceMappingURL=Toast.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Toast.d.ts","sourceRoot":"","sources":["../../../src/components/Toast/Toast.tsx"],"names":[],"mappings":"AAIA,eAAO,MAAM,KAAK;IAChB,oBAAoB;uBACD,MAAM;IAIzB,oBAAoB;qBACH,MAAM;IAIvB,uBAAuB;oBACP,MAAM;IAItB,oBAAoB;uBACD,MAAM;IAUzB,uBAAuB;uBACJ,MAAM;IAIzB,4BAA4B;;IAE5B,oBAAoB;qBACH,MAAM;CAMxB,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/dist/components/Toast/Toast.js

@@ -0,0 +1,42 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import toast from 'react-hot-toast';
+export const Toast = {
+    /** 성공 메시지를 표시합니다 */
+    success: (content) => {
+        toast.dismiss();
+        return toast.success(content);
+    },
+    /** 에러 메시지를 표시합니다 */
+    error: (content) => {
+        toast.dismiss();
+        return toast.error(content);
+    },
+    /** 일반 알림 메시지를 표시합니다 */
+    info: (content) => {
+        toast.dismiss();
+        return toast(content);
+    },
+    /** 경고 메시지를 표시합니다 */
+    warning: (content) => {
+        toast.dismiss();
+        return toast(content, {
+            icon: (_jsx("div", { className: "flex justify-center items-center w-5 h-5 bg-yellow-400 rounded-full text-mono5", children: "!" })),
+        });
+    },
+    /** 로딩 상태 메시지를 표시합니다 */
+    loading: (content) => {
+        toast.dismiss();
+        return toast.loading(content);
+    },
+    /** 현재 표시 중인 토스트를 모두 닫습니다 */
+    dismiss: () => toast.dismiss(),
+    /** 인사 메시지를 표시합니다 */
+    hello: (content) => {
+        toast.dismiss();
+        return toast(content, {
+            icon: _jsx("div", { className: "flex justify-center items-center w-5 h-5", children: "\uD83D\uDC4B" }),
+        });
+    },
+};
+export default Toast;

package/dist/components/Toast/Toaster.d.ts

@@ -0,0 +1,7 @@
+interface ToasterProps {
+    position?: 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
+    duration?: number;
+}
+declare const Toaster: ({ position, duration, }: ToasterProps) => import("react/jsx-runtime").JSX.Element;
+export default Toaster;
+//# sourceMappingURL=Toaster.d.ts.map

package/dist/components/Toast/Toaster.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toaster.d.ts","sourceRoot":"","sources":["../../../src/components/Toast/Toaster.tsx"],"names":[],"mappings":"AAIA,UAAU,YAAY;IACpB,QAAQ,CAAC,EACL,UAAU,GACV,YAAY,GACZ,WAAW,GACX,aAAa,GACb,eAAe,GACf,cAAc,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,QAAA,MAAM,OAAO,GAAI,yBAGd,YAAY,4CAEd,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/dist/components/Toast/Toaster.js

@@ -0,0 +1,7 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Toaster as HotToaster } from 'react-hot-toast';
+const Toaster = ({ position = 'top-center', duration = 2500, }) => {
+    return _jsx(HotToaster, { position: position, toastOptions: { duration } });
+};
+export default Toaster;

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

@@ -0,0 +1,12 @@
+import { type RegisterOptions } from 'react-hook-form';
+import { type ToggleButtonProps } from './ToggleButton.js';
+interface FormToggleButtonProps extends Omit<ToggleButtonProps, '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/ToggleButton/FormToggleButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormToggleButton.d.ts","sourceRoot":"","sources":["../../../src/components/ToggleButton/FormToggleButton.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,iBAAiB,CAAC;AACvD,OAAqB,EAAE,KAAK,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAItE,UAAU,qBAAsB,SAAQ,IAAI,CAC1C,iBAAiB,EACjB,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/ToggleButton/FormToggleButton.js

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

@@ -0,0 +1,31 @@
+import { type Ref } from 'react';
+type ButtonSize = 'small' | 'medium' | 'large' | 'xlarge';
+export interface ToggleButtonProps 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 ToggleButton: ({ checked, defaultChecked, onCheckedChange, disabled, size, label, className, style, ref, name, id, value, ...props }: ToggleButtonProps) => import("react/jsx-runtime").JSX.Element;
+export default ToggleButton;
+//# sourceMappingURL=ToggleButton.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleButton.d.ts","sourceRoot":"","sources":["../../../src/components/ToggleButton/ToggleButton.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,iBAAkB,SAAQ,IAAI,CAC7C,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,YAAY,GAAI,uHAcnB,iBAAiB,4CAqBnB,CAAC;AAEF,eAAe,YAAY,CAAC"}

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

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,MAAM,WAAW,YAAY;IAC3B,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,OAAO,GAAI,uDAOd,YAAY,4CA8Bd,CAAC;AAEF,eAAe,OAAO,CAAC"}

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

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

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