@loword/loword-design-system 0.0.2 → 0.0.4

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

@@ -0,0 +1,37 @@
+import { type HTMLAttributes, type TdHTMLAttributes, type ThHTMLAttributes, type ReactNode, type Ref } from 'react';
+interface RootProps extends HTMLAttributes<HTMLTableElement> {
+    children?: ReactNode;
+    ref?: Ref<HTMLTableElement>;
+}
+interface HeaderProps extends HTMLAttributes<HTMLTableSectionElement> {
+    children?: ReactNode;
+}
+interface BodyProps extends HTMLAttributes<HTMLTableSectionElement> {
+    children?: ReactNode;
+}
+interface HeaderRowProps extends HTMLAttributes<HTMLTableRowElement> {
+    children?: ReactNode;
+}
+interface RowProps extends HTMLAttributes<HTMLTableRowElement> {
+    children?: ReactNode;
+    selected?: boolean;
+}
+interface HeaderCellProps extends ThHTMLAttributes<HTMLTableCellElement> {
+    children?: ReactNode;
+    sortable?: boolean;
+    sortDirection?: 'asc' | 'desc' | false;
+}
+interface CellProps extends TdHTMLAttributes<HTMLTableCellElement> {
+    children?: ReactNode;
+}
+export declare const TableBase: {
+    Root: ({ className, children, ref, ...props }: RootProps) => import("react/jsx-runtime").JSX.Element;
+    Header: ({ className, children, ...props }: HeaderProps) => import("react/jsx-runtime").JSX.Element;
+    Body: ({ className, children, ...props }: BodyProps) => import("react/jsx-runtime").JSX.Element;
+    HeaderRow: ({ className, children, ...props }: HeaderRowProps) => import("react/jsx-runtime").JSX.Element;
+    Row: ({ className, children, selected, ...props }: RowProps) => import("react/jsx-runtime").JSX.Element;
+    HeaderCell: ({ className, children, sortable, sortDirection, ...props }: HeaderCellProps) => import("react/jsx-runtime").JSX.Element;
+    Cell: ({ className, children, ...props }: CellProps) => import("react/jsx-runtime").JSX.Element;
+};
+export default TableBase;
+//# sourceMappingURL=TableBase.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TableBase.d.ts","sourceRoot":"","sources":["../../../src/components/LDTable/TableBase.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,cAAc,EACnB,KAAK,gBAAgB,EACrB,KAAK,gBAAgB,EACrB,KAAK,SAAS,EACd,KAAK,GAAG,EACT,MAAM,OAAO,CAAC;AAIf,UAAU,SAAU,SAAQ,cAAc,CAAC,gBAAgB,CAAC;IAC1D,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;CAC7B;AAgBD,UAAU,WAAY,SAAQ,cAAc,CAAC,uBAAuB,CAAC;IACnE,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAWD,UAAU,SAAU,SAAQ,cAAc,CAAC,uBAAuB,CAAC;IACjE,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAWD,UAAU,cAAe,SAAQ,cAAc,CAAC,mBAAmB,CAAC;IAClE,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAWD,UAAU,QAAS,SAAQ,cAAc,CAAC,mBAAmB,CAAC;IAC5D,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAiBD,UAAU,eAAgB,SAAQ,gBAAgB,CAAC,oBAAoB,CAAC;IACtE,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,KAAK,GAAG,MAAM,GAAG,KAAK,CAAC;CACxC;AA8BD,UAAU,SAAU,SAAQ,gBAAgB,CAAC,oBAAoB,CAAC;IAChE,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAUD,eAAO,MAAM,SAAS;mDAvHgC,SAAS;gDAkBZ,WAAW;8CAab,SAAS;mDAaJ,cAAc;uDAcV,QAAQ;6EA2B/D,eAAe;8CA0B+B,SAAS;CAgBzD,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/dist/components/LDTable/TableBase.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import cn from '../../utils/cn.js';
+const Root = ({ className, children, ref, ...props }) => {
+    return (_jsx("table", { ref: ref, role: "table", className: cn('w-full', className), ...props, children: children }));
+};
+const Header = ({ className, children, ...props }) => {
+    return (_jsx("thead", { role: "rowgroup", className: className, ...props, children: children }));
+};
+const Body = ({ className, children, ...props }) => {
+    return (_jsx("tbody", { role: "rowgroup", className: className, ...props, children: children }));
+};
+const HeaderRow = ({ className, children, ...props }) => {
+    return (_jsx("tr", { role: "row", className: className, ...props, children: children }));
+};
+const Row = ({ className, children, selected, ...props }) => {
+    return (_jsx("tr", { role: "row", "aria-selected": selected, "data-state": selected ? 'selected' : undefined, className: className, ...props, children: children }));
+};
+const HeaderCell = ({ className, children, sortable, sortDirection, ...props }) => {
+    return (_jsx("th", { role: "columnheader", "aria-sort": sortDirection === 'asc'
+            ? 'ascending'
+            : sortDirection === 'desc'
+                ? 'descending'
+                : sortable
+                    ? 'none'
+                    : undefined, className: className, ...props, children: children }));
+};
+const Cell = ({ className, children, ...props }) => {
+    return (_jsx("td", { role: "cell", className: className, ...props, children: children }));
+};
+export const TableBase = {
+    Root,
+    Header,
+    Body,
+    HeaderRow,
+    Row,
+    HeaderCell,
+    Cell,
+};
+export default TableBase;

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

@@ -0,0 +1,64 @@
+import { type ReactNode, type Dispatch, type SetStateAction } from 'react';
+import { flexRender, type ColumnDef, type RowSelectionState, type PaginationState, type SortingState, type Row, type HeaderGroup, type Header, type Cell } from '@tanstack/react-table';
+export interface Pageable<T> {
+    data: T[];
+    page?: number;
+    limit?: number;
+    totalCount: number;
+    totalPages?: number;
+    hasNext?: boolean;
+    hasPrev?: boolean;
+}
+export interface TableFieldProps<TData, TColumn> {
+    /** 컬럼 정의 */
+    columns: ColumnDef<TData, TColumn>[];
+    /** 테이블 데이터 */
+    data: TData[];
+    /** 페이지네이션 */
+    pageable?: Pageable<TData>;
+    paginationState?: [
+        PaginationState,
+        Dispatch<SetStateAction<PaginationState>>
+    ];
+    onPageChange?: (page: number) => void;
+    /** 정렬 */
+    sortingState?: [SortingState, Dispatch<SetStateAction<SortingState>>];
+    /** 행 선택 */
+    enableRowSelection?: boolean | ((row: Row<TData>) => boolean);
+    enableMultiRowSelection?: boolean;
+    rowSelectionState?: [
+        RowSelectionState,
+        Dispatch<SetStateAction<RowSelectionState>>
+    ];
+    enableToggleAllRowsSelection?: boolean;
+    getRowId?: (row: TData, index: number) => string;
+    /** render props */
+    children: (props: TableFieldRenderProps<TData>) => ReactNode;
+}
+export interface TableFieldRenderProps<TData> {
+    headerGroups: HeaderGroup<TData>[];
+    rows: Row<TData>[];
+    isEmpty: boolean;
+    currentPage: number;
+    totalPages: number;
+    toggleAllRowsSelected: () => void;
+    setPageIndex: (index: number) => void;
+    onPageChange: (page: number) => void;
+    flexRender: typeof flexRender;
+    getHeader: (header: Header<TData, unknown>) => {
+        id: string;
+        canSort: boolean;
+        isSorted: false | 'asc' | 'desc';
+        size: number;
+        toggleSortingHandler: ((event: unknown) => void) | undefined;
+        renderHeader: () => ReactNode;
+        meta: Record<string, unknown> | undefined;
+    };
+    getCell: (cell: Cell<TData, unknown>) => {
+        id: string;
+        renderCell: () => ReactNode;
+    };
+}
+declare const TableField: <TData, TColumn>({ columns, data, pageable, paginationState, onPageChange, sortingState, enableRowSelection, enableMultiRowSelection, rowSelectionState, enableToggleAllRowsSelection, getRowId, children, }: TableFieldProps<TData, TColumn>) => ReactNode;
+export default TableField;
+//# sourceMappingURL=TableField.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TableField.d.ts","sourceRoot":"","sources":["../../../src/components/LDTable/TableField.tsx"],"names":[],"mappings":"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"}

package/dist/components/LDTable/TableField.js

@@ -0,0 +1,87 @@
+'use client';
+import { useReactTable, getCoreRowModel, getSortedRowModel, flexRender, } from '@tanstack/react-table';
+import { useRouter, useSearchParams, usePathname } from 'next/navigation';
+const TableField = ({ columns, data, pageable, paginationState, onPageChange, sortingState, enableRowSelection = false, enableMultiRowSelection = false, rowSelectionState, enableToggleAllRowsSelection = false, getRowId, children, }) => {
+    const router = useRouter();
+    const searchParams = useSearchParams();
+    const pathname = usePathname();
+    const [pagination, setPagination] = paginationState ?? [
+        { pageIndex: 0, pageSize: 10 },
+        () => { },
+    ];
+    const [rowSelection, setRowSelection] = rowSelectionState ?? [
+        undefined,
+        undefined,
+    ];
+    const [sorting, setSorting] = sortingState ?? [[], () => { }];
+    const processedColumns = columns.map((col) => ({
+        ...col,
+        enableSorting: col.enableSorting ?? false,
+        sortDescFirst: col.sortDescFirst ?? false,
+    }));
+    const table = useReactTable({
+        columns: processedColumns,
+        data,
+        getCoreRowModel: getCoreRowModel(),
+        state: {
+            pagination,
+            rowSelection: rowSelection ?? {},
+            sorting,
+        },
+        enableMultiRowSelection,
+        enableRowSelection,
+        onRowSelectionChange: setRowSelection,
+        getRowId,
+        onPaginationChange: setPagination,
+        manualPagination: true,
+        rowCount: pageable?.totalCount,
+        onSortingChange: setSorting,
+        getSortedRowModel: getSortedRowModel(),
+    });
+    const headerGroups = table.getHeaderGroups();
+    const rows = table.getRowModel().rows;
+    const isEmpty = rows.length === 0;
+    const currentPage = (pagination?.pageIndex ?? 0) + 1;
+    const totalPages = table.getPageCount();
+    const handlePageChange = (page) => {
+        table.setPageIndex(page - 1);
+        if (onPageChange) {
+            onPageChange(page);
+        }
+        else {
+            const params = new URLSearchParams(searchParams.toString());
+            params.set('page', page.toString());
+            router.push(`${pathname}?${params.toString()}`, { scroll: false });
+        }
+    };
+    const getHeader = (header) => ({
+        id: header.id,
+        canSort: header.column.getCanSort(),
+        isSorted: header.column.getIsSorted(),
+        size: header.getSize(),
+        toggleSortingHandler: header.column.getToggleSortingHandler(),
+        renderHeader: () => flexRender(header.column.columnDef.header, header.getContext()),
+        meta: header.column.columnDef.meta,
+    });
+    const getCell = (cell) => ({
+        id: cell.id,
+        renderCell: () => flexRender(cell.column.columnDef.cell, cell.getContext()),
+    });
+    return children({
+        headerGroups,
+        rows,
+        isEmpty,
+        currentPage,
+        totalPages,
+        toggleAllRowsSelected: () => {
+            if (enableToggleAllRowsSelection)
+                table.toggleAllRowsSelected();
+        },
+        setPageIndex: (index) => table.setPageIndex(index),
+        onPageChange: handlePageChange,
+        flexRender,
+        getHeader,
+        getCell,
+    });
+};
+export default TableField;

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"FormTimePicker.d.ts","sourceRoot":"","sources":["../../../src/components/LDTimePicker/FormTimePicker.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,iBAAiB,CAAC;AACvD,OAAqB,EAAE,KAAK,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAKtE,UAAU,mBAAoB,SAAQ,IAAI,CACxC,iBAAiB,EACjB,OAAO,GAAG,UAAU,CACrB;IACC,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,QAAA,MAAM,cAAc,GAAI,wGASrB,mBAAmB,4CAoCrB,CAAC;AAEF,eAAe,cAAc,CAAC"}

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/LDToast/LDToast.d.ts

@@ -0,0 +1,18 @@
+export declare const LDToast: {
+    /** 성공 메시지를 표시합니다 */
+    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 LDToast;
+//# sourceMappingURL=LDToast.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LDToast.d.ts","sourceRoot":"","sources":["../../../src/components/LDToast/LDToast.tsx"],"names":[],"mappings":"AAIA,eAAO,MAAM,OAAO;IAClB,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,OAAO,CAAC"}

package/dist/components/LDToast/LDToast.js

@@ -0,0 +1,42 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import toast from 'react-hot-toast';
+export const LDToast = {
+    /** 성공 메시지를 표시합니다 */
+    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 LDToast;

package/dist/components/LDToast/LDToaster.d.ts

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

package/dist/components/LDToast/LDToaster.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LDToaster.d.ts","sourceRoot":"","sources":["../../../src/components/LDToast/LDToaster.tsx"],"names":[],"mappings":"AAIA,UAAU,cAAc;IACtB,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,SAAS,GAAI,yBAGhB,cAAc,4CAEhB,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/dist/components/LDToast/LDToaster.js

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

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;