@loword/loword-design-system 0.0.1

package/dist/components/Slider/Slider.js

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

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

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

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

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

package/dist/components/Spinner/Spinner.js

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

package/dist/components/Table/Table.d.ts

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

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

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

package/dist/components/Table/Table.js

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

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

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

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

package/dist/components/Table/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/Table/TanstackTable.d.ts

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

package/dist/components/Table/TanstackTable.d.ts.map

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

package/dist/components/Table/TanstackTable.js

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"FormTimePicker.d.ts","sourceRoot":"","sources":["../../../src/components/TimePicker/FormTimePicker.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,iBAAiB,CAAC;AACvD,OAAmB,EAAE,KAAK,eAAe,EAAE,MAAM,cAAc,CAAC;AAKhE,UAAU,mBAAoB,SAAQ,IAAI,CACxC,eAAe,EACf,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"}