@loword/loword-design-system 0.0.7 → 0.0.9

package/dist/components/LDTeamHistory/TeamHistoryBase.js

@@ -0,0 +1,108 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import cn from '../../utils/cn.js';
+import { createContext, useContext, useEffect, useRef, useState, } from 'react';
+const TeamHistoryContext = createContext(null);
+const useTeamHistoryContext = () => {
+    const teamHistoryContext = useContext(TeamHistoryContext);
+    if (!teamHistoryContext)
+        throw new Error('LDTeamHistory 하위 컴포넌트는 Root 내부에서 사용해야 합니다.');
+    return teamHistoryContext;
+};
+const getScrollParent = (element) => {
+    let parent = element?.parentElement ?? null;
+    while (parent && parent !== document.body) {
+        const style = window.getComputedStyle(parent);
+        const overflowY = style.overflowY;
+        const canScroll = parent.scrollHeight > parent.clientHeight;
+        if (canScroll && ['auto', 'scroll', 'overlay'].includes(overflowY)) {
+            return parent;
+        }
+        parent = parent.parentElement;
+    }
+    return null;
+};
+const getRootBottom = (root) => {
+    if (root)
+        return root.getBoundingClientRect().bottom;
+    return window.innerHeight ?? document.documentElement.clientHeight;
+};
+const Root = (props) => {
+    const [index, setIndex] = useState(0);
+    const sectionRefs = useRef(Array(props.items.length).fill(null));
+    const moveToSection = (targetIndex) => {
+        setIndex(targetIndex);
+        sectionRefs.current?.[targetIndex]?.scrollIntoView({
+            behavior: 'smooth',
+            block: 'end',
+        });
+    };
+    useEffect(() => {
+        const root = props.isRootWindow
+            ? null
+            : getScrollParent(sectionRefs.current[0] ?? null);
+        const currentSectionRefs = [...sectionRefs.current];
+        const observer = new IntersectionObserver(() => {
+            const rootBottom = getRootBottom(root);
+            let activeIndex = 0;
+            sectionRefs.current.forEach((ref, idx) => {
+                if (!ref)
+                    return;
+                const rect = ref.getBoundingClientRect();
+                if (rect.top <= rootBottom) {
+                    activeIndex = idx;
+                }
+            });
+            setIndex(activeIndex);
+        }, { root });
+        currentSectionRefs.forEach((ref) => {
+            if (ref) {
+                observer.observe(ref);
+            }
+        });
+        return () => {
+            observer.disconnect();
+        };
+    }, [props.isRootWindow, props.items.length]);
+    return (_jsx(TeamHistoryContext.Provider, { value: {
+            items: props.items,
+            index,
+            sectionRefs,
+            moveToSection,
+        }, children: _jsx("div", { className: cn('relative', props.className), children: props.children }) }));
+};
+const Navigation = ({ classNames }) => {
+    const { items, index, moveToSection } = useTeamHistoryContext();
+    const navRef = useRef(null);
+    useEffect(() => {
+        const nav = navRef.current;
+        if (!nav)
+            return;
+        const syncNavigationOffset = () => {
+            nav.style.setProperty('--ld-team-history-navigation-offset', `${nav.offsetHeight / 2}px`);
+        };
+        syncNavigationOffset();
+        if (typeof ResizeObserver === 'undefined')
+            return;
+        const resizeObserver = new ResizeObserver(syncNavigationOffset);
+        resizeObserver.observe(nav);
+        return () => {
+            resizeObserver.disconnect();
+        };
+    }, [items.length]);
+    return (_jsx("nav", { ref: navRef, className: classNames?.root, children: items.map((item, idx) => {
+            const isActive = idx === index;
+            return (_jsxs("div", { className: "relative flex flex-col items-end", children: [_jsxs("button", { className: classNames?.item, "aria-current": isActive ? 'true' : undefined, onClick: () => moveToSection(idx), children: [_jsx("span", { "data-active": isActive, className: classNames?.label, children: item.target }), _jsx("span", { "data-active": isActive, className: classNames?.dot })] }), idx < items.length - 1 && (_jsx("span", { "data-active": idx + 1 === index, className: classNames?.line }))] }, `${item.target}_${idx}`));
+        }) }));
+};
+const Sections = ({ rootClassName, sectionClassName, }) => {
+    const { items, sectionRefs } = useTeamHistoryContext();
+    return (_jsx("div", { className: rootClassName, children: items.map((item, idx) => (_jsx("section", { ref: (el) => {
+                sectionRefs.current[idx] = el;
+            }, className: sectionClassName, children: item.section }, `section_content_${item.target}_${idx}`))) }));
+};
+export const TeamHistoryBase = {
+    Root,
+    Navigation,
+    Sections,
+};
+export default TeamHistoryBase;

package/dist/components/LDTextarea/FormTextarea.d.ts

@@ -0,0 +1,14 @@
+import { type Ref } from 'react';
+import { type RegisterOptions } from 'react-hook-form';
+import { type LDTextareaProps } from './LDTextarea.js';
+interface FormTextareaProps extends Omit<LDTextareaProps, 'name' | 'color' | 'onChange' | 'value' | 'onBlur'> {
+    name: string;
+    options?: RegisterOptions;
+    ref?: Ref<HTMLTextAreaElement>;
+    customErrorMessage?: string;
+    isHiddenErrorMessage?: boolean;
+    errorClassName?: string;
+}
+declare const FormTextarea: ({ name, options, variant, disabled, ref, customErrorMessage, isHiddenErrorMessage, errorClassName, ...props }: FormTextareaProps) => import("react/jsx-runtime").JSX.Element;
+export default FormTextarea;
+//# sourceMappingURL=FormTextarea.d.ts.map

package/dist/components/LDTextarea/FormTextarea.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormTextarea.d.ts","sourceRoot":"","sources":["../../../src/components/LDTextarea/FormTextarea.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,GAAG,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,iBAAiB,CAAC;AACvD,OAAmB,EAAE,KAAK,eAAe,EAAE,MAAM,cAAc,CAAC;AAKhE,UAAU,iBAAkB,SAAQ,IAAI,CACtC,eAAe,EACf,MAAM,GAAG,OAAO,GAAG,UAAU,GAAG,OAAO,GAAG,QAAQ,CACnD;IACC,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,GAAG,CAAC,EAAE,GAAG,CAAC,mBAAmB,CAAC,CAAC;IAC/B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,QAAA,MAAM,YAAY,GAAI,+GAUnB,iBAAiB,4CAmCnB,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/components/LDTextarea/FormTextarea.js

@@ -0,0 +1,10 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import LDTextarea from './LDTextarea.js';
+import FormField from '../LDForm/LDFormField.js';
+import FormErrorMessage from '../LDForm/LDFormErrorMessage.js';
+import cn from '../../utils/cn.js';
+const FormTextarea = ({ name, options, variant = 'filled', disabled = false, ref, customErrorMessage = '', isHiddenErrorMessage = false, errorClassName, ...props }) => {
+    return (_jsx(FormField, { name: name, options: options, customErrorMessage: customErrorMessage, disabled: disabled, ref: ref, children: ({ field, fieldState }) => (_jsxs("div", { className: "relative", children: [_jsx(LDTextarea, { ...props, ...field, value: field.value ?? '', variant: variant, color: fieldState.hasError ? 'danger' : 'neutral', disabled: disabled, "aria-invalid": fieldState.hasError, "aria-describedby": fieldState.hasError ? fieldState.errorId : undefined }), !isHiddenErrorMessage && (_jsx(FormErrorMessage, { id: fieldState.errorId, error: fieldState.error, disabled: disabled, className: cn('static mt-1 text-right', errorClassName) }))] })) }));
+};
+export default FormTextarea;

package/dist/components/LDTextarea/LDTextarea.d.ts

@@ -0,0 +1,26 @@
+import { type HTMLAttributes, type ReactNode, type Ref, type TextareaHTMLAttributes } from 'react';
+type TextareaVariant = 'filled' | 'outline' | 'ghost';
+type TextareaColor = 'neutral' | 'point' | 'danger';
+export type TextareaSize = 'xSmall' | 'small' | 'medium' | 'large' | 'big' | 'xLarge';
+type TextareaResize = 'normal' | 'limit' | 'fixed' | 'manual';
+type TextareaContentVariant = 'characterCounter' | 'badge' | 'chip' | 'icon' | 'iconButton' | 'primaryIconButton' | 'textButton';
+export interface TextareaContentProps extends HTMLAttributes<HTMLSpanElement> {
+    variant?: TextareaContentVariant;
+}
+export declare const TextareaContent: ({ variant, className, children, ...props }: TextareaContentProps) => import("react/jsx-runtime").JSX.Element;
+export interface LDTextareaProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'color' | 'rows'> {
+    bottom?: boolean;
+    variant?: TextareaVariant;
+    color?: TextareaColor;
+    size?: TextareaSize;
+    resize?: TextareaResize;
+    minRows?: number;
+    maxRows?: number;
+    rows?: number;
+    counterMaxLength?: number;
+    leadingContent?: ReactNode;
+    ref?: Ref<HTMLTextAreaElement>;
+}
+declare const LDTextarea: import("react").ForwardRefExoticComponent<Omit<LDTextareaProps, "ref"> & import("react").RefAttributes<HTMLTextAreaElement>>;
+export default LDTextarea;
+//# sourceMappingURL=LDTextarea.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LDTextarea.d.ts","sourceRoot":"","sources":["../../../src/components/LDTextarea/LDTextarea.tsx"],"names":[],"mappings":"AAAA,OAAO,EASL,KAAK,cAAc,EACnB,KAAK,SAAS,EACd,KAAK,GAAG,EACR,KAAK,sBAAsB,EAC5B,MAAM,OAAO,CAAC;AAGf,KAAK,eAAe,GAAG,QAAQ,GAAG,SAAS,GAAG,OAAO,CAAC;AACtD,KAAK,aAAa,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,CAAC;AACpD,MAAM,MAAM,YAAY,GACpB,QAAQ,GACR,OAAO,GACP,QAAQ,GACR,OAAO,GACP,KAAK,GACL,QAAQ,CAAC;AAEb,KAAK,cAAc,GAAG,QAAQ,GAAG,OAAO,GAAG,OAAO,GAAG,QAAQ,CAAC;AAC9D,KAAK,sBAAsB,GACvB,kBAAkB,GAClB,OAAO,GACP,MAAM,GACN,MAAM,GACN,YAAY,GACZ,mBAAmB,GACnB,YAAY,CAAC;AAEjB,MAAM,WAAW,oBAAqB,SAAQ,cAAc,CAAC,eAAe,CAAC;IAC3E,OAAO,CAAC,EAAE,sBAAsB,CAAC;CAClC;AAYD,eAAO,MAAM,eAAe,GAAI,4CAK7B,oBAAoB,4CAMtB,CAAC;AA6EF,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAC3C,sBAAsB,CAAC,mBAAmB,CAAC,EAC3C,OAAO,GAAG,MAAM,CACjB;IACC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,MAAM,CAAC,EAAE,cAAc,CAAC;IACxB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,GAAG,CAAC,EAAE,GAAG,CAAC,mBAAmB,CAAC,CAAC;CAChC;AAED,QAAA,MAAM,UAAU,8HAqMf,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/components/LDTextarea/LDTextarea.js

@@ -0,0 +1,163 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useCallback, useEffect, useRef, useState, } from 'react';
+import cn from '../../utils/cn.js';
+const contentVariantClasses = {
+    characterCounter: 'display12 text-neutral500 [letter-spacing:0.02em]',
+    badge: 'inline-flex items-center',
+    chip: 'inline-flex items-center',
+    icon: 'inline-flex size-6 items-center justify-center text-[24px]',
+    iconButton: 'inline-flex items-center justify-center',
+    primaryIconButton: 'inline-flex items-center justify-center text-lb500',
+    textButton: 'display14 bold cursor-pointer text-lb500',
+};
+export const TextareaContent = ({ variant = 'characterCounter', className, children, ...props }) => {
+    return (_jsx("span", { className: cn(contentVariantClasses[variant], className), ...props, children: children }));
+};
+const fieldVariantColorClasses = {
+    filled: {
+        neutral: 'bg-neutral50 text-neutral900',
+        point: 'bg-tintBlue text-neutral900',
+        danger: 'bg-tintRed text-neutral900',
+    },
+    outline: {
+        neutral: 'bg-transparent text-neutral900',
+        point: 'bg-transparent text-neutral900',
+        danger: 'bg-transparent text-neutral900',
+    },
+    ghost: {
+        neutral: 'bg-transparent text-neutral900 focus-within:bg-neutral50',
+        point: 'bg-transparent text-neutral900 focus-within:bg-tintBlue',
+        danger: 'bg-transparent text-neutral900 focus-within:bg-tintRed',
+    },
+};
+const interactionVariantColorClasses = {
+    filled: {
+        neutral: 'border-transparent',
+        point: 'border-transparent',
+        danger: 'border-transparent',
+    },
+    outline: {
+        neutral: 'border-2 border-mono200',
+        point: 'border-2 border-lb500',
+        danger: 'border-2 border-danger500',
+    },
+    ghost: {
+        neutral: 'border-transparent group-hover:border-2',
+        point: 'border-transparent group-hover:border-2',
+        danger: 'border-transparent',
+    },
+};
+const focusedColorClasses = {
+    neutral: 'border-2 border-lb500',
+    point: 'border-2 border-lb500',
+    danger: 'border-2 border-danger500',
+};
+const fieldSizeClasses = {
+    xSmall: 'gap-1 rounded-[6px] px-1 py-1',
+    small: 'gap-1.5 rounded-[6px] px-1.5 py-1.5',
+    medium: 'gap-2 rounded-[6px] px-2.5 py-2',
+    large: 'gap-2.5 rounded-[8px] px-3 py-2.5',
+    big: 'gap-3 rounded-[10px] px-4 py-3',
+    xLarge: 'gap-3 rounded-[16px] px-5 py-4',
+};
+const textareaSizeClasses = {
+    xSmall: 'display10',
+    small: 'display12',
+    medium: 'display14',
+    large: 'display16',
+    big: 'display18',
+    xLarge: 'display20',
+};
+const interactionRadiusClasses = {
+    xSmall: 'rounded-[6px]',
+    small: 'rounded-[6px]',
+    medium: 'rounded-[6px]',
+    large: 'rounded-[8px]',
+    big: 'rounded-[10px]',
+    xLarge: 'rounded-[16px]',
+};
+const LDTextarea = forwardRef(function LDTextarea({ bottom = true, variant = 'filled', color = 'neutral', size = 'medium', resize = 'normal', minRows = 3, maxRows = 8, rows = 3, maxLength, counterMaxLength, leadingContent, disabled, readOnly, value, defaultValue, onChange, onCompositionEnd, onFocus, onBlur, className, style, ...props }, ref) {
+    const isControlled = value !== undefined;
+    const [internalValue, setInternalValue] = useState(defaultValue ?? '');
+    const [focused, setFocused] = useState(false);
+    const textareaRef = useRef(null);
+    const currentValue = isControlled ? value : internalValue;
+    const resolvedMaxLength = maxLength ?? counterMaxLength;
+    const limitValue = useCallback((nextValue) => {
+        if (resolvedMaxLength == null ||
+            nextValue.length <= resolvedMaxLength) {
+            return nextValue;
+        }
+        return nextValue.slice(0, resolvedMaxLength);
+    }, [resolvedMaxLength]);
+    const combinedRef = useCallback((node) => {
+        textareaRef.current = node;
+        if (typeof ref === 'function')
+            ref(node);
+        else if (ref)
+            ref.current = node;
+    }, [ref]);
+    const adjustHeight = useCallback(() => {
+        const el = textareaRef.current;
+        if (!el || resize === 'fixed' || resize === 'manual')
+            return;
+        el.style.height = 'auto';
+        const rowHeight = parseFloat(getComputedStyle(el).lineHeight) || 20;
+        const minHeight = rowHeight * minRows;
+        const maxHeight = resize === 'limit' ? rowHeight * maxRows : Infinity;
+        const height = Math.min(Math.max(el.scrollHeight, minHeight), maxHeight);
+        el.style.height = `${height}px`;
+        el.style.overflowY = el.scrollHeight > height ? 'auto' : 'hidden';
+    }, [resize, minRows, maxRows]);
+    useEffect(() => {
+        adjustHeight();
+    }, [adjustHeight, currentValue]);
+    const handleChange = (event) => {
+        if (event.nativeEvent.isComposing) {
+            if (!isControlled)
+                setInternalValue(event.target.value);
+            onChange?.(event);
+            return;
+        }
+        const nextValue = limitValue(event.target.value);
+        if (nextValue !== event.target.value) {
+            event.target.value = nextValue;
+            event.currentTarget.value = nextValue;
+        }
+        if (!isControlled)
+            setInternalValue(nextValue);
+        onChange?.(event);
+    };
+    const handleCompositionEnd = (event) => {
+        onCompositionEnd?.(event);
+        const nextValue = limitValue(event.currentTarget.value);
+        if (nextValue === event.currentTarget.value)
+            return;
+        event.currentTarget.value = nextValue;
+        if (event.target instanceof HTMLTextAreaElement) {
+            event.target.value = nextValue;
+        }
+        if (!isControlled)
+            setInternalValue(nextValue);
+        onChange?.(event);
+    };
+    const handleFocus = (event) => {
+        setFocused(true);
+        onFocus?.(event);
+    };
+    const handleBlur = (event) => {
+        setFocused(false);
+        onBlur?.(event);
+    };
+    const charCount = counterMaxLength != null && typeof currentValue === 'string'
+        ? currentValue.length
+        : null;
+    const resolvedLeadingContent = leadingContent !== undefined ? (leadingContent) : charCount != null && counterMaxLength != null ? (_jsxs(TextareaContent, { children: [charCount, "/", counterMaxLength] })) : null;
+    const showBottom = bottom && resolvedLeadingContent != null;
+    return (_jsx("div", { className: cn('flex flex-col gap-2', className), children: _jsxs("div", { className: "group relative w-full", children: [_jsxs("div", { className: cn('relative flex flex-col overflow-clip ld-transition', fieldSizeClasses[size], fieldVariantColorClasses[variant][color], disabled && 'opacity-40'), children: [_jsx("textarea", { ...props, ref: combinedRef, value: isControlled ? value : internalValue, onChange: handleChange, onCompositionEnd: handleCompositionEnd, onFocus: handleFocus, onBlur: handleBlur, disabled: disabled, readOnly: readOnly, rows: resize === 'fixed' || resize === 'manual' ? rows : undefined, maxLength: resolvedMaxLength, "aria-invalid": color === 'danger' || undefined, style: {
+                                resize: resize === 'manual' ? 'vertical' : 'none',
+                                overflowY: resize === 'fixed' || resize === 'manual' ? 'auto' : 'hidden',
+                                ...style,
+                            }, className: cn('w-full bg-transparent px-1 py-0 outline-none', textareaSizeClasses[size], 'placeholder:text-mono400', 'disabled:cursor-not-allowed disabled:text-mono400', 'read-only:cursor-default') }), showBottom && (_jsx("div", { className: "flex items-center gap-4", children: _jsx("div", { className: "flex flex-1 items-center gap-1 pl-1", children: resolvedLeadingContent }) }))] }), _jsx("div", { className: cn('pointer-events-none absolute inset-0 border transition-[border-color] duration-300 ease-out', interactionRadiusClasses[size], interactionVariantColorClasses[variant][color], focused && focusedColorClasses[color], disabled && 'opacity-0') })] }) }));
+});
+export default LDTextarea;

package/dist/components/LDTimePicker/FormTimePicker.js

@@ -1,8 +1,8 @@
 '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 FormField from '../LDForm/LDFormField.js';
+import FormErrorMessage from '../LDForm/LDFormErrorMessage.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) => {

package/dist/components/LDTimePicker/LDTimePicker.js

@@ -80,19 +80,19 @@ const LDTimePicker = ({ value, defaultValue, onChange, placeholder = 'HH:MM', di
     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'
+                    }, className: cn('border border-neutral100 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) => {
+                            }, 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-neutral500', !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) => {
+                                    }, className: cn('p-0 transition-colors cursor-pointer', isEditable ? 'text-lb500' : 'text-neutral500'), children: _jsx(LucideIcon, { name: "pencil", size: 15 }) }), _jsx(LucideIcon, { name: "clock", size: 15, className: "text-neutral500" })] })] }), _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];
@@ -114,7 +114,7 @@ const LDTimePicker = ({ value, defaultValue, onChange, placeholder = 'HH:MM', di
                                     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'
+                                ? 'bg-neutral100 font-bold'
                                 : 'text-neutral800'), children: time }, time))) }) })] }) }));
 };
 export default LDTimePicker;

package/dist/components/LDToggleButton/FormToggleButton.js

@@ -1,8 +1,8 @@
 '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';
+import FormField from '../LDForm/LDFormField.js';
+import FormErrorMessage from '../LDForm/LDFormErrorMessage.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 }))] })) }));
 };

package/dist/components/LDTooltip/TooltipBase.js

@@ -30,7 +30,7 @@ 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 }) }));
+    return (_jsx(RadixTooltip.Portal, { children: _jsx(RadixTooltip.Content, { side: side, sideOffset: sideOffset, align: align, className: cn('z-50 outline-hidden', 'animate-fade-in data-[state=closed]:animate-fade-out', className), children: children }) }));
 };
 const Arrow = ({ className }) => {
     return _jsx(RadixTooltip.Arrow, { className: className });