@etus/ui 0.4.0-beta.2 → 0.4.0-beta.21

package/dist/chunk-F3WDMYZ4.js

@@ -0,0 +1,349 @@
+import { cn } from './chunk-RVAYDRMA.js';
+import { useSensors, useSensor, PointerSensor, KeyboardSensor, DndContext, closestCenter, DragOverlay } from '@dnd-kit/core';
+import { sortableKeyboardCoordinates, arrayMove, SortableContext, horizontalListSortingStrategy, verticalListSortingStrategy, useSortable } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import * as React from 'react';
+import { cva } from 'class-variance-authority';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var sortableListVariants = cva(
+  // Base styles
+  "relative",
+  {
+    variants: {
+      direction: {
+        vertical: "flex flex-col",
+        horizontal: "flex flex-row flex-wrap"
+      },
+      gap: {
+        "0": "gap-0",
+        "1": "gap-1",
+        "2": "gap-2",
+        "3": "gap-3",
+        "4": "gap-4",
+        "6": "gap-6",
+        "8": "gap-8"
+      },
+      disabled: {
+        true: "opacity-60 pointer-events-none",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      direction: "vertical",
+      gap: "2",
+      disabled: false
+    }
+  }
+);
+var sortableListItemVariants = cva(
+  // Base styles
+  [
+    "relative",
+    "touch-none",
+    "select-none",
+    "transition-all duration-200 ease-out"
+  ],
+  {
+    variants: {
+      isDragging: {
+        true: [
+          "z-50",
+          "opacity-50",
+          "scale-[1.02]"
+        ],
+        false: ""
+      },
+      isSorting: {
+        true: "transition-transform",
+        false: ""
+      },
+      isOver: {
+        true: "",
+        false: ""
+      },
+      disabled: {
+        true: "opacity-50 cursor-not-allowed",
+        false: "cursor-grab"
+      }
+    },
+    compoundVariants: [
+      {
+        isDragging: true,
+        disabled: false,
+        className: "cursor-grabbing"
+      }
+    ],
+    defaultVariants: {
+      isDragging: false,
+      isSorting: false,
+      isOver: false,
+      disabled: false
+    }
+  }
+);
+var sortableListHandleVariants = cva(
+  // Base styles
+  [
+    "inline-flex items-center justify-center",
+    "rounded-sm",
+    "p-1",
+    "text-muted-foreground",
+    "hover:text-foreground",
+    "hover:bg-accent",
+    "focus-visible:outline-none",
+    "focus-visible:ring-2",
+    "focus-visible:ring-ring",
+    "focus-visible:ring-offset-2",
+    "transition-colors duration-150",
+    "touch-none"
+  ],
+  {
+    variants: {
+      isDragging: {
+        true: "cursor-grabbing text-foreground bg-accent",
+        false: "cursor-grab"
+      },
+      disabled: {
+        true: "cursor-not-allowed opacity-50 pointer-events-none",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      isDragging: false,
+      disabled: false
+    }
+  }
+);
+var sortableListOverlayVariants = cva(
+  // Base styles
+  [
+    "bg-background",
+    "shadow-lg",
+    "ring-2",
+    "ring-primary/20",
+    "rounded-md"
+  ],
+  {
+    variants: {},
+    defaultVariants: {}
+  }
+);
+var SortableItemHandleContext = React.createContext(null);
+function useSortableItemHandle() {
+  const context = React.use(SortableItemHandleContext);
+  if (!context) {
+    throw new Error("SortableListDragHandle must be used within a SortableListItem");
+  }
+  return context;
+}
+var SortableListHandleContext = React.createContext({
+  handleRequired: false
+});
+function SortableList({
+  className,
+  direction = "vertical",
+  disabled = false,
+  gap = "2",
+  handle = false,
+  items,
+  keyExtractor,
+  onReorder,
+  renderItem,
+  strategy
+}) {
+  const [activeId, setActiveId] = React.useState(null);
+  const itemIds = React.useMemo(
+    () => items.map((item) => keyExtractor(item)),
+    [items, keyExtractor]
+  );
+  const sensors = useSensors(
+    useSensor(PointerSensor, {
+      activationConstraint: {
+        distance: 8
+      }
+    }),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates
+    })
+  );
+  const sortingStrategy = strategy ?? (direction === "horizontal" ? horizontalListSortingStrategy : verticalListSortingStrategy);
+  const handleDragStart = React.useCallback((event) => {
+    setActiveId(event.active.id);
+  }, []);
+  const handleDragEnd = React.useCallback((event) => {
+    const { active, over } = event;
+    if (over && active.id !== over.id) {
+      const oldIndex = itemIds.indexOf(String(active.id));
+      const newIndex = itemIds.indexOf(String(over.id));
+      if (oldIndex !== -1 && newIndex !== -1) {
+        const newItems = arrayMove(items, oldIndex, newIndex);
+        onReorder(newItems);
+      }
+    }
+    setActiveId(null);
+  }, [items, itemIds, onReorder]);
+  const handleDragCancel = React.useCallback(() => {
+    setActiveId(null);
+  }, []);
+  const activeItem = React.useMemo(() => {
+    if (activeId === null) return null;
+    return items.find((item) => keyExtractor(item) === String(activeId));
+  }, [activeId, items, keyExtractor]);
+  const activeIndex = React.useMemo(() => {
+    if (activeId === null) return -1;
+    return itemIds.indexOf(String(activeId));
+  }, [activeId, itemIds]);
+  const announcements = React.useMemo(() => ({
+    onDragCancel({ active }) {
+      return `Sorting was cancelled. Sortable item ${String(active.id)} was dropped.`;
+    },
+    onDragEnd({ active, over }) {
+      if (over) {
+        return `Sortable item ${String(active.id)} was dropped at position ${String(itemIds.indexOf(String(over.id)) + 1)} of ${String(itemIds.length)}`;
+      }
+      return `Sortable item ${String(active.id)} was dropped`;
+    },
+    onDragOver({ active, over }) {
+      if (over) {
+        return `Sortable item ${String(active.id)} was moved into position ${String(itemIds.indexOf(String(over.id)) + 1)} of ${String(itemIds.length)}`;
+      }
+      return;
+    },
+    onDragStart({ active }) {
+      return `Picked up sortable item ${String(active.id)}. Sortable item ${String(active.id)} is in position ${String(itemIds.indexOf(String(active.id)) + 1)} of ${String(itemIds.length)}`;
+    }
+  }), [itemIds]);
+  return /* @__PURE__ */ jsx(SortableListHandleContext, { value: { handleRequired: handle }, children: /* @__PURE__ */ jsxs(
+    DndContext,
+    {
+      accessibility: { announcements },
+      collisionDetection: closestCenter,
+      sensors,
+      onDragCancel: handleDragCancel,
+      onDragEnd: handleDragEnd,
+      onDragStart: handleDragStart,
+      children: [
+        /* @__PURE__ */ jsx(
+          SortableContext,
+          {
+            disabled,
+            items: itemIds,
+            strategy: sortingStrategy,
+            children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: cn(
+                  sortableListVariants({ direction, disabled, gap }),
+                  className
+                ),
+                "aria-label": "Sortable list",
+                "data-slot": "sortable-list",
+                role: "listbox",
+                children: items.map((item, index) => /* @__PURE__ */ jsx(React.Fragment, { children: renderItem(item, index) }, keyExtractor(item)))
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          DragOverlay,
+          {
+            dropAnimation: {
+              duration: 200,
+              easing: "ease-out"
+            },
+            children: activeItem && activeIndex !== -1 ? /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: cn(sortableListOverlayVariants()),
+                "data-slot": "sortable-list-overlay",
+                children: renderItem(activeItem, activeIndex)
+              }
+            ) : null
+          }
+        )
+      ]
+    }
+  ) });
+}
+function SortableListItem({
+  children,
+  className,
+  disabled = false,
+  id
+}) {
+  const { handleRequired } = React.use(SortableListHandleContext);
+  const {
+    attributes,
+    isDragging,
+    isSorting,
+    listeners,
+    setNodeRef,
+    transform,
+    transition
+  } = useSortable({
+    disabled,
+    id
+  });
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition
+  };
+  const handleContextValue = {
+    attributes,
+    isDragging,
+    listeners
+  };
+  const itemProps = handleRequired ? {} : { ...attributes, ...listeners };
+  return /* @__PURE__ */ jsx(SortableItemHandleContext, { value: handleContextValue, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: setNodeRef,
+      className: cn(
+        sortableListItemVariants({
+          disabled,
+          isDragging,
+          isSorting
+        }),
+        className
+      ),
+      "aria-describedby": "sortable-instructions",
+      "aria-roledescription": "sortable",
+      "data-dragging": isDragging,
+      "data-slot": "sortable-list-item",
+      "data-sorting": isSorting,
+      role: "option",
+      style,
+      ...itemProps,
+      children
+    }
+  ) });
+}
+function SortableListDragHandle({
+  children,
+  className,
+  disabled = false,
+  ...props
+}) {
+  const { attributes, isDragging, listeners } = useSortableItemHandle();
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      className: cn(
+        sortableListHandleVariants({ disabled, isDragging }),
+        className
+      ),
+      "data-slot": "sortable-list-handle",
+      disabled,
+      type: "button",
+      ...attributes,
+      ...listeners,
+      ...props,
+      children
+    }
+  );
+}
+
+export { SortableList, SortableListDragHandle, SortableListItem, sortableListHandleVariants, sortableListItemVariants, sortableListOverlayVariants, sortableListVariants };
+//# sourceMappingURL=chunk-F3WDMYZ4.js.map
+//# sourceMappingURL=chunk-F3WDMYZ4.js.map

package/dist/chunk-F3WDMYZ4.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/advanced/SortableList/SortableList.variants.ts","../src/components/advanced/SortableList/SortableList.tsx"],"names":[],"mappings":"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","file":"chunk-F3WDMYZ4.js","sourcesContent":["// SortableList/SortableList.variants.ts\nimport { cva } from \"class-variance-authority\"\n\n/**\n * Variants for the SortableList container\n */\nexport const sortableListVariants = cva(\n  // Base styles\n  \"relative\",\n  {\n    variants: {\n      direction: {\n        vertical: \"flex flex-col\",\n        horizontal: \"flex flex-row flex-wrap\",\n      },\n      gap: {\n        \"0\": \"gap-0\",\n        \"1\": \"gap-1\",\n        \"2\": \"gap-2\",\n        \"3\": \"gap-3\",\n        \"4\": \"gap-4\",\n        \"6\": \"gap-6\",\n        \"8\": \"gap-8\",\n      },\n      disabled: {\n        true: \"opacity-60 pointer-events-none\",\n        false: \"\",\n      },\n    },\n    defaultVariants: {\n      direction: \"vertical\",\n      gap: \"2\",\n      disabled: false,\n    },\n  }\n)\n\n/**\n * Variants for the SortableListItem\n */\nexport const sortableListItemVariants = cva(\n  // Base styles\n  [\n    \"relative\",\n    \"touch-none\",\n    \"select-none\",\n    \"transition-all duration-200 ease-out\",\n  ],\n  {\n    variants: {\n      isDragging: {\n        true: [\n          \"z-50\",\n          \"opacity-50\",\n          \"scale-[1.02]\",\n        ],\n        false: \"\",\n      },\n      isSorting: {\n        true: \"transition-transform\",\n        false: \"\",\n      },\n      isOver: {\n        true: \"\",\n        false: \"\",\n      },\n      disabled: {\n        true: \"opacity-50 cursor-not-allowed\",\n        false: \"cursor-grab\",\n      },\n    },\n    compoundVariants: [\n      {\n        isDragging: true,\n        disabled: false,\n        className: \"cursor-grabbing\",\n      },\n    ],\n    defaultVariants: {\n      isDragging: false,\n      isSorting: false,\n      isOver: false,\n      disabled: false,\n    },\n  }\n)\n\n/**\n * Variants for the SortableListDragHandle\n */\nexport const sortableListHandleVariants = cva(\n  // Base styles\n  [\n    \"inline-flex items-center justify-center\",\n    \"rounded-sm\",\n    \"p-1\",\n    \"text-muted-foreground\",\n    \"hover:text-foreground\",\n    \"hover:bg-accent\",\n    \"focus-visible:outline-none\",\n    \"focus-visible:ring-2\",\n    \"focus-visible:ring-ring\",\n    \"focus-visible:ring-offset-2\",\n    \"transition-colors duration-150\",\n    \"touch-none\",\n  ],\n  {\n    variants: {\n      isDragging: {\n        true: \"cursor-grabbing text-foreground bg-accent\",\n        false: \"cursor-grab\",\n      },\n      disabled: {\n        true: \"cursor-not-allowed opacity-50 pointer-events-none\",\n        false: \"\",\n      },\n    },\n    defaultVariants: {\n      isDragging: false,\n      disabled: false,\n    },\n  }\n)\n\n/**\n * Variants for the drag overlay\n */\nexport const sortableListOverlayVariants = cva(\n  // Base styles\n  [\n    \"bg-background\",\n    \"shadow-lg\",\n    \"ring-2\",\n    \"ring-primary/20\",\n    \"rounded-md\",\n  ],\n  {\n    variants: {},\n    defaultVariants: {},\n  }\n)\n","// SortableList/SortableList.tsx\nimport type {\n  SortableListDragHandleProps,\n  SortableListHandleContextValue,\n  SortableListItemProps,\n  SortableListProps,\n} from \"./SortableList.types\"\nimport type { DraggableAttributes, DraggableSyntheticListeners } from \"@dnd-kit/core\"\nimport type { DragEndEvent, DragStartEvent, UniqueIdentifier } from \"@dnd-kit/core\"\n\nimport {\n  closestCenter,\n  DndContext,\n  DragOverlay,\n  KeyboardSensor,\n  PointerSensor,\n  useSensor,\n  useSensors,\n} from \"@dnd-kit/core\"\nimport {\n  arrayMove,\n  horizontalListSortingStrategy,\n  SortableContext,\n  sortableKeyboardCoordinates,\n  useSortable,\n  verticalListSortingStrategy,\n} from \"@dnd-kit/sortable\"\nimport { CSS } from \"@dnd-kit/utilities\"\nimport * as React from \"react\"\n\nimport { cn } from \"../../../lib/utils\"\nimport {\n  sortableListHandleVariants,\n  sortableListItemVariants,\n  sortableListOverlayVariants,\n  sortableListVariants,\n} from \"./SortableList.variants\"\n\n// ============================================\n// CONTEXT FOR SORTABLE HANDLE\n// ============================================\n\ninterface SortableItemHandleContextValue {\n  attributes: DraggableAttributes\n  isDragging: boolean\n  listeners: DraggableSyntheticListeners\n}\n\nconst SortableItemHandleContext = React.createContext<null | SortableItemHandleContextValue>(null)\n\n/**\n * Hook to access sortable handle context\n * @throws Error if used outside of SortableListItem\n */\nfunction useSortableItemHandle(): SortableItemHandleContextValue {\n  const context = React.use(SortableItemHandleContext)\n  if (!context) {\n    throw new Error(\"SortableListDragHandle must be used within a SortableListItem\")\n  }\n  return context\n}\n\n// Context for handle requirement\nconst SortableListHandleContext = React.createContext<SortableListHandleContextValue>({\n  handleRequired: false,\n})\n\n// ============================================\n// SORTABLE LIST\n// ============================================\n\n/**\n * SortableList - A reorderable list with drag and drop support\n *\n * @example\n * ```tsx\n * const [items, setItems] = useState([\n *   { id: \"1\", title: \"Item 1\" },\n *   { id: \"2\", title: \"Item 2\" },\n * ])\n *\n * <SortableList\n *   items={items}\n *   onReorder={setItems}\n *   keyExtractor={(item) => item.id}\n *   renderItem={(item) => (\n *     <SortableListItem id={item.id}>\n *       <div className=\"p-4 border rounded\">{item.title}</div>\n *     </SortableListItem>\n *   )}\n * />\n * ```\n */\nfunction SortableList<T>({\n  className,\n  direction = \"vertical\",\n  disabled = false,\n  gap = \"2\",\n  handle = false,\n  items,\n  keyExtractor,\n  onReorder,\n  renderItem,\n  strategy,\n}: SortableListProps<T>): React.ReactElement {\n  const [activeId, setActiveId] = React.useState<null | UniqueIdentifier>(null)\n\n  // Get the IDs for SortableContext\n  const itemIds = React.useMemo(\n    () => items.map((item) => keyExtractor(item)),\n    [items, keyExtractor]\n  )\n\n  // Configure sensors for drag detection\n  const sensors = useSensors(\n    useSensor(PointerSensor, {\n      activationConstraint: {\n        distance: 8,\n      },\n    }),\n    useSensor(KeyboardSensor, {\n      coordinateGetter: sortableKeyboardCoordinates,\n    })\n  )\n\n  // Determine sorting strategy based on direction\n  const sortingStrategy = strategy ?? (\n    direction === \"horizontal\"\n      ? horizontalListSortingStrategy\n      : verticalListSortingStrategy\n  )\n\n  // Handle drag start\n  const handleDragStart = React.useCallback((event: DragStartEvent) => {\n    setActiveId(event.active.id)\n  }, [])\n\n  // Handle drag end - reorder items\n  const handleDragEnd = React.useCallback((event: DragEndEvent) => {\n    const { active, over } = event\n\n    if (over && active.id !== over.id) {\n      const oldIndex = itemIds.indexOf(String(active.id))\n      const newIndex = itemIds.indexOf(String(over.id))\n\n      if (oldIndex !== -1 && newIndex !== -1) {\n        const newItems = arrayMove(items, oldIndex, newIndex)\n        onReorder(newItems)\n      }\n    }\n\n    setActiveId(null)\n  }, [items, itemIds, onReorder])\n\n  // Handle drag cancel\n  const handleDragCancel = React.useCallback(() => {\n    setActiveId(null)\n  }, [])\n\n  // Find active item for overlay\n  const activeItem = React.useMemo(() => {\n    if (activeId === null) return null\n    return items.find((item) => keyExtractor(item) === String(activeId))\n  }, [activeId, items, keyExtractor])\n\n  // Find active index for overlay render\n  const activeIndex = React.useMemo(() => {\n    if (activeId === null) return -1\n    return itemIds.indexOf(String(activeId))\n  }, [activeId, itemIds])\n\n  // Accessibility announcements\n  const announcements = React.useMemo(() => ({\n    onDragCancel({ active }: { active: { id: UniqueIdentifier } }) {\n      return `Sorting was cancelled. Sortable item ${String(active.id)} was dropped.`\n    },\n    onDragEnd({ active, over }: { active: { id: UniqueIdentifier }; over: null | { id: UniqueIdentifier } }) {\n      if (over) {\n        return `Sortable item ${String(active.id)} was dropped at position ${String(itemIds.indexOf(String(over.id)) + 1)} of ${String(itemIds.length)}`\n      }\n      return `Sortable item ${String(active.id)} was dropped`\n    },\n    onDragOver({ active, over }: { active: { id: UniqueIdentifier }; over: null | { id: UniqueIdentifier } }) {\n      if (over) {\n        return `Sortable item ${String(active.id)} was moved into position ${String(itemIds.indexOf(String(over.id)) + 1)} of ${String(itemIds.length)}`\n      }\n      return\n    },\n    onDragStart({ active }: { active: { id: UniqueIdentifier } }) {\n      return `Picked up sortable item ${String(active.id)}. Sortable item ${String(active.id)} is in position ${String(itemIds.indexOf(String(active.id)) + 1)} of ${String(itemIds.length)}`\n    },\n  }), [itemIds])\n\n  return (\n    <SortableListHandleContext value={{ handleRequired: handle }}>\n      <DndContext\n        accessibility={{ announcements }}\n        collisionDetection={closestCenter}\n        sensors={sensors}\n        onDragCancel={handleDragCancel}\n        onDragEnd={handleDragEnd}\n        onDragStart={handleDragStart}\n      >\n        <SortableContext\n          disabled={disabled}\n          items={itemIds}\n          strategy={sortingStrategy}\n        >\n          <div\n            className={cn(\n              sortableListVariants({ direction, disabled, gap }),\n              className\n            )}\n            aria-label=\"Sortable list\"\n            data-slot=\"sortable-list\"\n            role=\"listbox\"\n          >\n            {items.map((item, index) => (\n              <React.Fragment key={keyExtractor(item)}>\n                {renderItem(item, index)}\n              </React.Fragment>\n            ))}\n          </div>\n        </SortableContext>\n\n        <DragOverlay\n          dropAnimation={{\n            duration: 200,\n            easing: \"ease-out\",\n          }}\n        >\n          {activeItem && activeIndex !== -1 ? (\n            <div\n              className={cn(sortableListOverlayVariants())}\n              data-slot=\"sortable-list-overlay\"\n            >\n              {renderItem(activeItem, activeIndex)}\n            </div>\n          ) : null}\n        </DragOverlay>\n      </DndContext>\n    </SortableListHandleContext>\n  )\n}\n\n// ============================================\n// SORTABLE LIST ITEM\n// ============================================\n\n/**\n * SortableListItem - An individual sortable item\n *\n * @example\n * ```tsx\n * <SortableListItem id=\"item-1\">\n *   <div className=\"p-4 border rounded\">Item content</div>\n * </SortableListItem>\n * ```\n */\nfunction SortableListItem({\n  children,\n  className,\n  disabled = false,\n  id,\n}: SortableListItemProps): React.ReactElement {\n  const { handleRequired } = React.use(SortableListHandleContext)\n\n  const {\n    attributes,\n    isDragging,\n    isSorting,\n    listeners,\n    setNodeRef,\n    transform,\n    transition,\n  } = useSortable({\n    disabled,\n    id,\n  })\n\n  const style: React.CSSProperties = {\n    transform: CSS.Transform.toString(transform),\n    transition,\n  }\n\n  // Context value for drag handle\n  const handleContextValue: SortableItemHandleContextValue = {\n    attributes,\n    isDragging,\n    listeners,\n  }\n\n  // If handle is not required, apply listeners to the item itself\n  const itemProps = handleRequired\n    ? {}\n    : { ...attributes, ...listeners }\n\n  return (\n    <SortableItemHandleContext value={handleContextValue}>\n      <div\n        ref={setNodeRef}\n        className={cn(\n          sortableListItemVariants({\n            disabled,\n            isDragging,\n            isSorting,\n          }),\n          className\n        )}\n        aria-describedby=\"sortable-instructions\"\n        aria-roledescription=\"sortable\"\n        data-dragging={isDragging}\n        data-slot=\"sortable-list-item\"\n        data-sorting={isSorting}\n        role=\"option\"\n        style={style}\n        {...itemProps}\n      >\n        {children}\n      </div>\n    </SortableItemHandleContext>\n  )\n}\n\n// ============================================\n// SORTABLE LIST DRAG HANDLE\n// ============================================\n\n/**\n * SortableListDragHandle - A drag handle for sortable items\n *\n * @example\n * ```tsx\n * <SortableListItem id=\"item-1\">\n *   <div className=\"flex items-center gap-2\">\n *     <SortableListDragHandle>\n *       <GripVerticalIcon className=\"h-4 w-4\" />\n *     </SortableListDragHandle>\n *     <span>Item content</span>\n *   </div>\n * </SortableListItem>\n * ```\n */\nfunction SortableListDragHandle({\n  children,\n  className,\n  disabled = false,\n  ...props\n}: SortableListDragHandleProps): React.ReactElement {\n  const { attributes, isDragging, listeners } = useSortableItemHandle()\n\n  return (\n    <button\n      className={cn(\n        sortableListHandleVariants({ disabled, isDragging }),\n        className\n      )}\n      data-slot=\"sortable-list-handle\"\n      disabled={disabled}\n      type=\"button\"\n      {...attributes}\n      {...listeners}\n      {...props}\n    >\n      {children}\n    </button>\n  )\n}\n\n// ============================================\n// EXPORTS\n// ============================================\n\nexport {\n  SortableList,\n  SortableListDragHandle,\n  SortableListItem,\n}\n\nexport type {\n  SortableListDragHandleProps,\n  SortableListItemProps,\n  SortableListProps,\n} from \"./SortableList.types\"\n\n// Sorting strategies are already re-exported from DragAndDrop\n"]}

package/dist/chunk-FES2I2OT.js

@@ -0,0 +1,3 @@
+
+//# sourceMappingURL=chunk-FES2I2OT.js.map
+//# sourceMappingURL=chunk-FES2I2OT.js.map

package/dist/chunk-FES2I2OT.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"chunk-FES2I2OT.js"}