@loword/loword-design-system 0.2.0 → 0.2.1

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

@@ -19,8 +19,8 @@ export interface TableRowProps {
 export declare const PlainRow: ({ selected, className, onClick, children, }: TableRowProps) => import("react/jsx-runtime").JSX.Element;
 /** 드래그가 켜져 있을 때의 행 */
 export declare const SortableRow: ({ rowId, selected, className, onClick, children, }: TableRowProps) => import("react/jsx-runtime").JSX.Element;
-export declare const LDRowDragHandle: ({ rowId, className, }: {
-    rowId: string;
+export declare const LDRowDragHandle: ({ className, }: {
     className?: string;
-}) => import("react/jsx-runtime").JSX.Element;
+    rowId?: string;
+}) => import("react/jsx-runtime").JSX.Element | null;
 //# sourceMappingURL=TableRowDnd.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"TableRowDnd.d.ts","sourceRoot":"","sources":["../../../src/components/LDTable/TableRowDnd.tsx"],"names":[],"mappings":"AAEA,OAAO,EAOL,KAAK,gBAAgB,EAGtB,MAAM,eAAe,CAAC;AAUvB,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAMvC,eAAO,MAAM,cAAc,GAAI,6BAG5B;IACD,YAAY,EAAE,CAAC,QAAQ,EAAE,gBAAgB,EAAE,MAAM,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAC7E,QAAQ,EAAE,SAAS,CAAC;CACrB,4CAwBA,CAAC;AAIF,eAAO,MAAM,mBAAmB,GAAI,uBAGjC;IACD,MAAM,EAAE,gBAAgB,EAAE,CAAC;IAC3B,QAAQ,EAAE,SAAS,CAAC;CACrB,4CAIA,CAAC;AAIF,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,6DAA6D;AAC7D,eAAO,MAAM,QAAQ,GAAI,6CAKtB,aAAa,4CAIf,CAAC;AAEF,sBAAsB;AACtB,eAAO,MAAM,WAAW,GAAI,oDAMzB,aAAa,4CAmBf,CAAC;AAIF,eAAO,MAAM,eAAe,GAAI,uBAG7B;IACD,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,4CAoBA,CAAC"}
+{"version":3,"file":"TableRowDnd.d.ts","sourceRoot":"","sources":["../../../src/components/LDTable/TableRowDnd.tsx"],"names":[],"mappings":"AAGA,OAAO,EAOL,KAAK,gBAAgB,EAGtB,MAAM,eAAe,CAAC;AAWvB,OAAO,EAAiB,KAAK,SAAS,EAAuB,MAAM,OAAO,CAAC;AAM3E,eAAO,MAAM,cAAc,GAAI,6BAG5B;IACD,YAAY,EAAE,CAAC,QAAQ,EAAE,gBAAgB,EAAE,MAAM,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAC7E,QAAQ,EAAE,SAAS,CAAC;CACrB,4CAwBA,CAAC;AAIF,eAAO,MAAM,mBAAmB,GAAI,uBAGjC;IACD,MAAM,EAAE,gBAAgB,EAAE,CAAC;IAC3B,QAAQ,EAAE,SAAS,CAAC;CACrB,4CAIA,CAAC;AAIF,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,6DAA6D;AAC7D,eAAO,MAAM,QAAQ,GAAI,6CAKtB,aAAa,4CAIf,CAAC;AAaF,sBAAsB;AACtB,eAAO,MAAM,WAAW,GAAI,oDAMzB,aAAa,4CAgCf,CAAC;AAIF,eAAO,MAAM,eAAe,GAAI,gBAE7B;IACD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,mDAyBA,CAAC"}

package/dist/components/LDTable/TableRowDnd.js

@@ -5,6 +5,7 @@ import { restrictToVerticalAxis } from '@dnd-kit/modifiers';
 import { SortableContext, sortableKeyboardCoordinates, useSortable, verticalListSortingStrategy, } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
 import { GripVertical } from 'lucide-react';
+import { createContext, useContext, useMemo } from 'react';
 import LDTable from '../../components/LDTable/LDTable.js';
 import cn from '../../utils/cn.js';
 // ── DndContext ──
@@ -23,18 +24,21 @@ export const RowDndProvider = ({ onRowDragEnd, children, }) => {
 export const RowSortableProvider = ({ rowIds, children, }) => (_jsx(SortableContext, { items: rowIds, strategy: verticalListSortingStrategy, children: children }));
 /** 드래그가 꺼져 있을 때의 행. `SortableRow`와 prop 모양을 맞춰 교체 가능하게 둔다 */
 export const PlainRow = ({ selected, className, onClick, children, }) => (_jsx(LDTable.Row, { selected: selected, className: className, onClick: onClick, children: children }));
+const RowDragHandleContext = createContext(null);
 /** 드래그가 켜져 있을 때의 행 */
 export const SortableRow = ({ rowId, selected, className, onClick, children, }) => {
-    const { setNodeRef, transform, transition, isDragging } = useSortable({
-        id: rowId,
-    });
-    return (_jsx(LDTable.Row, { ref: setNodeRef, selected: selected, className: cn(isDragging && 'relative z-10 opacity-80', className), onClick: onClick, style: {
-            transform: CSS.Transform.toString(transform),
-            transition: isDragging ? 'none' : transition,
-        }, children: children }));
+    const { setNodeRef, setActivatorNodeRef, attributes, listeners, transform, transition, isDragging, } = useSortable({ id: rowId });
+    const handleContext = useMemo(() => ({ setActivatorNodeRef, attributes, listeners, isDragging }), [setActivatorNodeRef, attributes, listeners, isDragging]);
+    return (_jsx(RowDragHandleContext, { value: handleContext, children: _jsx(LDTable.Row, { ref: setNodeRef, selected: selected, className: cn(isDragging && 'relative z-10 opacity-80', className), onClick: onClick, style: {
+                transform: CSS.Transform.toString(transform),
+                transition: isDragging ? 'none' : transition,
+            }, children: children }) }));
 };
 // ── Handle ──
-export const LDRowDragHandle = ({ rowId, className, }) => {
-    const { attributes, listeners, isDragging } = useSortable({ id: rowId });
-    return (_jsx("button", { type: "button", "aria-label": "\uC21C\uC11C \uBCC0\uACBD", onClick: (e) => e.stopPropagation(), className: cn('flex size-6 touch-none items-center justify-center', 'text-neutral400 ld-transition hover:text-neutral700', isDragging ? 'cursor-grabbing' : 'cursor-grab', className), ...attributes, ...listeners, children: _jsx(GripVertical, { size: 16 }) }));
+export const LDRowDragHandle = ({ className, }) => {
+    const context = useContext(RowDragHandleContext);
+    if (!context)
+        return null;
+    const { setActivatorNodeRef, attributes, listeners, isDragging } = context;
+    return (_jsx("button", { ref: setActivatorNodeRef, type: "button", "aria-label": "\uC21C\uC11C \uBCC0\uACBD", onClick: (e) => e.stopPropagation(), className: cn('flex size-6 touch-none items-center justify-center', 'text-neutral400 ld-transition hover:text-neutral700', isDragging ? 'cursor-grabbing' : 'cursor-grab', className), ...attributes, ...listeners, children: _jsx(GripVertical, { size: 16 }) }));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@loword/loword-design-system",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "로워드 디자인 시스템 컴포넌트 패키지(Tailwind v4)",
   "keywords": [
     "react",
@@ -48,10 +48,6 @@
   },
   "license": "MIT",
   "peerDependencies": {
-    "@dnd-kit/core": "^6.3.1",
-    "@dnd-kit/modifiers": "^9.0.0",
-    "@dnd-kit/sortable": "^10.0.0",
-    "@dnd-kit/utilities": "^3.2.2",
     "@radix-ui/react-accordion": "^1.2.16",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-popover": "^1.1.15",
@@ -92,18 +88,6 @@
     "next": {
       "optional": true
     },
-    "@dnd-kit/core": {
-      "optional": true
-    },
-    "@dnd-kit/modifiers": {
-      "optional": true
-    },
-    "@dnd-kit/sortable": {
-      "optional": true
-    },
-    "@dnd-kit/utilities": {
-      "optional": true
-    },
     "@radix-ui/react-accordion": {
       "optional": true
     },
@@ -202,10 +186,6 @@
     }
   },
   "devDependencies": {
-    "@dnd-kit/core": "^6.3.1",
-    "@dnd-kit/modifiers": "^9.0.0",
-    "@dnd-kit/sortable": "^10.0.0",
-    "@dnd-kit/utilities": "^3.2.2",
     "@eslint/js": "^9.31.0",
     "@hookform/resolvers": "^5.4.0",
     "@radix-ui/react-accordion": "^1.2.16",
@@ -277,6 +257,10 @@
     "zod": "^4.4.3"
   },
   "dependencies": {
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/modifiers": "^9.0.0",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
     "clsx": "^2.1.1",
     "lucide-react": "^0.536.0",
     "react-hook-form": "^7.62.0",