@pallasoft/ps-core-components 2.22.1 → 2.23.0

package/dist/components/ps-drag-grip.d.ts

@@ -0,0 +1 @@
+export declare const PsDragGrip: () => import("react").JSX.Element;

package/dist/components/ps-drag-grip.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsDragGrip = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const PsDragGrip = () => ((0, jsx_runtime_1.jsx)("span", { "aria-hidden": 'true', className: 'grid grid-cols-2 gap-[0.1875rem]', children: Array.from({ length: 6 }).map((_, index) => ((0, jsx_runtime_1.jsx)("span", { className: 'h-[3px] w-[3px] rounded-full bg-current' }, index))) }));
+exports.PsDragGrip = PsDragGrip;

package/dist/components/ps-drag-overlay.d.ts

@@ -0,0 +1,7 @@
+import { type ReactNode } from 'react';
+export interface PsDragOverlayProps {
+    children: ReactNode;
+    className: string;
+    frames: Keyframe[];
+}
+export declare const PsDragOverlay: ({ children, className, frames }: PsDragOverlayProps) => import("react").ReactPortal | null;

package/dist/components/ps-drag-overlay.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsDragOverlay = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const core_1 = require("@dnd-kit/core");
+const react_dom_1 = require("react-dom");
+const ps_drag_config_1 = require("../constants/ps-drag-config");
+const use_ps_reduced_motion_1 = require("../hooks/use-ps-reduced-motion");
+const dropAnimation = {
+    duration: ps_drag_config_1.PsDragConfig.dropDuration,
+    easing: ps_drag_config_1.PsDragConfig.dropEasing,
+    sideEffects: (0, core_1.defaultDropAnimationSideEffects)({
+        styles: { active: { opacity: ps_drag_config_1.PsDragConfig.placeholderOpacity } },
+    }),
+};
+const PsDragOverlay = ({ children, className, frames }) => {
+    const [isMounted, setIsMounted] = (0, react_1.useState)(false);
+    const isReduced = (0, use_ps_reduced_motion_1.usePsReducedMotion)();
+    (0, react_1.useEffect)(() => setIsMounted(true), []);
+    if (!isMounted)
+        return null;
+    const lift = (element) => {
+        if (element === null || isReduced || typeof element.animate !== 'function')
+            return;
+        element.animate(frames, {
+            duration: ps_drag_config_1.PsDragConfig.liftDuration,
+            easing: ps_drag_config_1.PsDragConfig.liftEasing,
+            fill: 'forwards',
+        });
+    };
+    return (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(core_1.DragOverlay, { dropAnimation: isReduced ? null : dropAnimation, children: children === null ? null : ((0, jsx_runtime_1.jsx)("div", { className: className, ref: lift, children: children })) }), document.body);
+};
+exports.PsDragOverlay = PsDragOverlay;

package/dist/components/ps-draggable-grid.js

@@ -6,26 +6,12 @@ const react_1 = require("react");
 const core_1 = require("@dnd-kit/core");
 const sortable_1 = require("@dnd-kit/sortable");
 const utilities_1 = require("@dnd-kit/utilities");
-const react_dom_1 = require("react-dom");
+const ps_drag_config_1 = require("../constants/ps-drag-config");
 const ps_draggable_grid_1 = require("../constants/ps-draggable-grid");
-const liftCard = (element) => {
-    if (element === null)
-        return;
-    element.animate(ps_draggable_grid_1.PsDraggableGridLiftFrames, {
-        duration: ps_draggable_grid_1.PsDraggableGridConfig.liftDuration,
-        easing: ps_draggable_grid_1.PsDraggableGridConfig.liftEasing,
-        fill: 'forwards',
-    });
-};
-const dropAnimation = {
-    duration: ps_draggable_grid_1.PsDraggableGridConfig.dropDuration,
-    easing: ps_draggable_grid_1.PsDraggableGridConfig.dropEasing,
-    sideEffects: (0, core_1.defaultDropAnimationSideEffects)({
-        styles: { active: { opacity: ps_draggable_grid_1.PsDraggableGridConfig.placeholderOpacity } },
-    }),
-};
-const DragHandleIcon = () => ((0, jsx_runtime_1.jsx)("span", { "aria-hidden": 'true', className: 'grid grid-cols-2 gap-[0.1875rem]', children: Array.from({ length: 6 }).map((_, index) => ((0, jsx_runtime_1.jsx)("span", { className: 'h-[3px] w-[3px] rounded-full bg-current' }, index))) }));
-const PsDraggableGridHandle = ({ attributes, label, listeners, setActivatorNodeRef, }) => ((0, jsx_runtime_1.jsx)("button", { ...attributes, ...listeners, "aria-label": `Move ${label}`, className: ps_draggable_grid_1.PsDraggableGridClasses.handle, ref: setActivatorNodeRef, title: `Move ${label}`, type: 'button', children: (0, jsx_runtime_1.jsx)(DragHandleIcon, {}) }));
+const use_ps_drag_sensors_1 = require("../hooks/use-ps-drag-sensors");
+const ps_drag_grip_1 = require("./ps-drag-grip");
+const ps_drag_overlay_1 = require("./ps-drag-overlay");
+const PsDraggableGridHandle = ({ attributes, label, listeners, setActivatorNodeRef, }) => ((0, jsx_runtime_1.jsx)("button", { ...attributes, ...listeners, "aria-label": `Move ${label}`, className: ps_draggable_grid_1.PsDraggableGridClasses.handle, ref: setActivatorNodeRef, title: `Move ${label}`, type: 'button', children: (0, jsx_runtime_1.jsx)(ps_drag_grip_1.PsDragGrip, {}) }));
 const PsSortableGridItem = ({ className, index, item, renderItem, }) => {
     const { attributes, isDragging, listeners, setActivatorNodeRef, setNodeRef, transform, transition, } = (0, sortable_1.useSortable)({ id: item.id });
     const rendered = renderItem({
@@ -38,23 +24,14 @@ const PsSortableGridItem = ({ className, index, item, renderItem, }) => {
     if (!rendered)
         return null;
     return ((0, jsx_runtime_1.jsx)("div", { className: `${ps_draggable_grid_1.PsDraggableGridClasses.item} ${className} ${isDragging ? ps_draggable_grid_1.PsDraggableGridClasses.placeholder : ''}`, ref: setNodeRef, style: {
-            opacity: isDragging ? ps_draggable_grid_1.PsDraggableGridConfig.placeholderOpacity : undefined,
+            opacity: isDragging ? ps_drag_config_1.PsDragConfig.placeholderOpacity : undefined,
             transform: utilities_1.CSS.Translate.toString(transform),
             transition,
         }, children: rendered }));
 };
 const PsDraggableGrid = ({ getItemClassName, items, onReorder, onReorderEnd, renderItem, }) => {
     const [activeId, setActiveId] = (0, react_1.useState)(null);
-    const [isMounted, setIsMounted] = (0, react_1.useState)(false);
-    (0, react_1.useEffect)(() => setIsMounted(true), []);
-    const sensors = (0, core_1.useSensors)((0, core_1.useSensor)(core_1.MouseSensor, {
-        activationConstraint: { distance: ps_draggable_grid_1.PsDraggableGridConfig.activationDistance },
-    }), (0, core_1.useSensor)(core_1.TouchSensor, {
-        activationConstraint: {
-            delay: ps_draggable_grid_1.PsDraggableGridConfig.touchDelay,
-            tolerance: ps_draggable_grid_1.PsDraggableGridConfig.touchTolerance,
-        },
-    }), (0, core_1.useSensor)(core_1.KeyboardSensor, { coordinateGetter: sortable_1.sortableKeyboardCoordinates }));
+    const sensors = (0, use_ps_drag_sensors_1.usePsDragSensors)();
     const className = (item) => getItemClassName !== undefined ? getItemClassName(item) : '';
     const activeIndex = items.findIndex((item) => item.id === activeId);
     const activeItem = activeIndex >= 0 ? items[activeIndex] : null;
@@ -71,14 +48,14 @@ const PsDraggableGrid = ({ getItemClassName, items, onReorder, onReorderEnd, ren
         if (onReorderEnd !== undefined)
             onReorderEnd(nextItems);
     };
-    return ((0, jsx_runtime_1.jsxs)(core_1.DndContext, { collisionDetection: core_1.closestCenter, onDragCancel: () => setActiveId(null), onDragEnd: handleDragEnd, onDragStart: (event) => setActiveId(String(event.active.id)), sensors: sensors, children: [(0, jsx_runtime_1.jsx)(sortable_1.SortableContext, { items: items.map((item) => item.id), strategy: sortable_1.rectSortingStrategy, children: items.map((item, index) => ((0, jsx_runtime_1.jsx)(PsSortableGridItem, { className: className(item), index: index, item: item, renderItem: renderItem }, item.id))) }), isMounted
-                ? (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(core_1.DragOverlay, { dropAnimation: dropAnimation, children: activeItem !== null ? ((0, jsx_runtime_1.jsx)("div", { className: ps_draggable_grid_1.PsDraggableGridClasses.lifted, ref: liftCard, children: renderItem({
-                            handle: (0, jsx_runtime_1.jsx)(PsDraggableGridHandle, { label: activeItem.label }),
-                            index: activeIndex,
-                            isDragging: true,
-                            isOverlay: true,
-                            item: activeItem,
-                        }) })) : null }), document.body)
-                : null] }));
+    return ((0, jsx_runtime_1.jsxs)(core_1.DndContext, { collisionDetection: core_1.closestCenter, onDragCancel: () => setActiveId(null), onDragEnd: handleDragEnd, onDragStart: (event) => setActiveId(String(event.active.id)), sensors: sensors, children: [(0, jsx_runtime_1.jsx)(sortable_1.SortableContext, { items: items.map((item) => item.id), strategy: sortable_1.rectSortingStrategy, children: items.map((item, index) => ((0, jsx_runtime_1.jsx)(PsSortableGridItem, { className: className(item), index: index, item: item, renderItem: renderItem }, item.id))) }), (0, jsx_runtime_1.jsx)(ps_drag_overlay_1.PsDragOverlay, { className: ps_draggable_grid_1.PsDraggableGridClasses.lifted, frames: ps_draggable_grid_1.PsDraggableGridLiftFrames, children: activeItem !== null
+                    ? renderItem({
+                        handle: (0, jsx_runtime_1.jsx)(PsDraggableGridHandle, { label: activeItem.label }),
+                        index: activeIndex,
+                        isDragging: true,
+                        isOverlay: true,
+                        item: activeItem,
+                    })
+                    : null })] }));
 };
 exports.PsDraggableGrid = PsDraggableGrid;

package/dist/components/ps-sortable-list.d.ts

@@ -0,0 +1,22 @@
+import { type JSX } from 'react';
+import { useSortable } from '@dnd-kit/sortable';
+import type { PsSortableListItem, PsSortableListProps, PsSortableListRenderOptions } from '../models/ps-sortable-list';
+export interface PsSortableListHandleProps {
+    className?: string;
+    icon?: JSX.Element;
+    attributes?: ReturnType<typeof useSortable>['attributes'];
+    label: string;
+    listeners?: ReturnType<typeof useSortable>['listeners'];
+    setActivatorNodeRef?: (element: HTMLElement | null) => void;
+}
+export interface PsSortableListRowProps<TItem extends PsSortableListItem> {
+    className: string;
+    handleClassName?: string;
+    handleIcon?: JSX.Element;
+    getHandleLabel: (label: string) => string;
+    index: number;
+    isDisabled: boolean;
+    item: TItem;
+    renderItem: (options: PsSortableListRenderOptions<TItem>) => JSX.Element | null;
+}
+export declare const PsSortableList: <TItem extends PsSortableListItem>({ announcements: texts, className, getHandleLabel, getItemClassName, handleClassName, handleIcon, instructions, role, items, onMove, renderItem, }: PsSortableListProps<TItem>) => JSX.Element;

package/dist/components/ps-sortable-list.js

@@ -0,0 +1,79 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsSortableList = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const core_1 = require("@dnd-kit/core");
+const sortable_1 = require("@dnd-kit/sortable");
+const utilities_1 = require("@dnd-kit/utilities");
+const ps_drag_config_1 = require("../constants/ps-drag-config");
+const use_ps_drag_sensors_1 = require("../hooks/use-ps-drag-sensors");
+const use_ps_reduced_motion_1 = require("../hooks/use-ps-reduced-motion");
+const ps_drag_grip_1 = require("./ps-drag-grip");
+const ps_drag_overlay_1 = require("./ps-drag-overlay");
+const PsSortableListHandle = ({ attributes, className, icon, label, listeners, setActivatorNodeRef, }) => ((0, jsx_runtime_1.jsx)("button", { ...attributes, ...listeners, "aria-label": label, className: className === undefined ? ps_drag_config_1.PsDragClasses.handle : className, ref: setActivatorNodeRef, title: label, type: 'button', children: icon === undefined ? (0, jsx_runtime_1.jsx)(ps_drag_grip_1.PsDragGrip, {}) : icon }));
+const PsSortableListRow = ({ className, handleClassName, handleIcon, getHandleLabel, index, isDisabled, item, renderItem, }) => {
+    const isReduced = (0, use_ps_reduced_motion_1.usePsReducedMotion)();
+    const { attributes, isDragging, listeners, setActivatorNodeRef, setNodeRef, transform, transition, } = (0, sortable_1.useSortable)({ disabled: isDisabled, id: item.id });
+    const rendered = renderItem({
+        handle: ((0, jsx_runtime_1.jsx)(PsSortableListHandle, { attributes: attributes, className: handleClassName, icon: handleIcon, label: getHandleLabel(item.label), listeners: listeners, setActivatorNodeRef: setActivatorNodeRef })),
+        index,
+        isDragging,
+        isOverlay: false,
+        item,
+    });
+    if (!rendered)
+        return null;
+    return ((0, jsx_runtime_1.jsx)("div", { className: `${ps_drag_config_1.PsDragClasses.listItem} ${className} ${isDragging ? ps_drag_config_1.PsDragClasses.placeholder : ''}`, ref: setNodeRef, style: {
+            opacity: isDragging ? ps_drag_config_1.PsDragConfig.placeholderOpacity : undefined,
+            transform: utilities_1.CSS.Translate.toString(transform),
+            transition: isReduced ? undefined : transition,
+        }, children: rendered }));
+};
+const PsSortableList = ({ announcements: texts, className, getHandleLabel, getItemClassName, handleClassName, handleIcon, instructions, role, items, onMove, renderItem, }) => {
+    const [activeId, setActiveId] = (0, react_1.useState)(null);
+    const sensors = (0, use_ps_drag_sensors_1.usePsDragSensors)();
+    const activeIndex = items.findIndex((item) => item.id === activeId);
+    const activeItem = activeIndex >= 0 ? items[activeIndex] : null;
+    const itemClassName = (item) => getItemClassName === undefined ? '' : getItemClassName(item);
+    const groupOf = (id) => {
+        const found = items.find((item) => item.id === id);
+        return found === undefined ? undefined : found.groupKey;
+    };
+    const labelOf = (id) => {
+        const found = items.find((item) => item.id === id);
+        return found === undefined ? id : found.label;
+    };
+    const positionOf = (id) => items.findIndex((item) => item.id === id) + 1;
+    const announcements = {
+        onDragCancel: ({ active }) => texts.cancelled(labelOf(String(active.id))),
+        onDragEnd: ({ active, over }) => over === null
+            ? texts.cancelled(labelOf(String(active.id)))
+            : texts.dropped(labelOf(String(active.id)), positionOf(String(over.id)), items.length),
+        onDragOver: ({ active, over }) => over === null
+            ? undefined
+            : texts.moved(labelOf(String(active.id)), positionOf(String(over.id)), items.length),
+        onDragStart: ({ active }) => texts.lifted(labelOf(String(active.id)), positionOf(String(active.id)), items.length),
+    };
+    const handleDragEnd = ({ active, over }) => {
+        setActiveId(null);
+        if (over === null || active.id === over.id)
+            return;
+        const from = items.findIndex((item) => item.id === active.id);
+        const to = items.findIndex((item) => item.id === over.id);
+        if (from < 0 || to < 0 || groupOf(String(active.id)) !== groupOf(String(over.id)))
+            return;
+        onMove(String(active.id), from, to);
+    };
+    const activeGroup = activeItem === null ? undefined : activeItem.groupKey;
+    return ((0, jsx_runtime_1.jsxs)(core_1.DndContext, { accessibility: { announcements, screenReaderInstructions: { draggable: instructions } }, collisionDetection: core_1.closestCenter, onDragCancel: () => setActiveId(null), onDragEnd: handleDragEnd, onDragStart: ({ active }) => setActiveId(String(active.id)), sensors: sensors, children: [(0, jsx_runtime_1.jsx)(sortable_1.SortableContext, { items: items.map((item) => item.id), strategy: sortable_1.verticalListSortingStrategy, children: (0, jsx_runtime_1.jsx)("div", { className: className, role: role, children: items.map((item, index) => ((0, jsx_runtime_1.jsx)(PsSortableListRow, { className: itemClassName(item), getHandleLabel: getHandleLabel, handleClassName: handleClassName, handleIcon: handleIcon, index: index, isDisabled: activeItem !== null && item.groupKey !== activeGroup, item: item, renderItem: renderItem }, item.id))) }) }), (0, jsx_runtime_1.jsx)(ps_drag_overlay_1.PsDragOverlay, { className: ps_drag_config_1.PsDragClasses.lifted, frames: ps_drag_config_1.PsDragListLiftFrames, children: activeItem !== null
+                    ? renderItem({
+                        handle: ((0, jsx_runtime_1.jsx)(PsSortableListHandle, { className: handleClassName, icon: handleIcon, label: getHandleLabel(activeItem.label) })),
+                        index: activeIndex,
+                        isDragging: true,
+                        isOverlay: true,
+                        item: activeItem,
+                    })
+                    : null })] }));
+};
+exports.PsSortableList = PsSortableList;

package/dist/constants/ps-drag-config.d.ts

@@ -0,0 +1,18 @@
+export declare const PsDragConfig: {
+    readonly activationDistance: 6;
+    readonly dropDuration: 220;
+    readonly dropEasing: "cubic-bezier(0.2, 0.8, 0.2, 1)";
+    readonly liftDuration: 200;
+    readonly liftEasing: "cubic-bezier(0.2, 0.9, 0.3, 1.2)";
+    readonly placeholderOpacity: "0.4";
+    readonly touchDelay: 180;
+    readonly touchTolerance: 6;
+};
+export declare const PsDragClasses: {
+    readonly handle: "ps-focus-ring inline-flex h-7 w-7 shrink-0 cursor-grab touch-none items-center justify-center rounded-full text-slate-400/70 transition hover:bg-white/36 hover:text-slate-600 active:cursor-grabbing dark:text-slate-300/55 dark:hover:bg-white/8 dark:hover:text-slate-100";
+    readonly listItem: "min-w-0";
+    readonly lifted: "cursor-grabbing rounded-xl bg-surface ring-1 ring-primary/30";
+    readonly placeholder: "outline-dashed outline-2 outline-offset-[-2px] outline-primary/35";
+};
+export declare const PsDragLiftFrames: Keyframe[];
+export declare const PsDragListLiftFrames: Keyframe[];

package/dist/constants/ps-drag-config.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsDragListLiftFrames = exports.PsDragLiftFrames = exports.PsDragClasses = exports.PsDragConfig = void 0;
+exports.PsDragConfig = {
+    activationDistance: 6,
+    dropDuration: 220,
+    dropEasing: 'cubic-bezier(0.2, 0.8, 0.2, 1)',
+    liftDuration: 200,
+    liftEasing: 'cubic-bezier(0.2, 0.9, 0.3, 1.2)',
+    placeholderOpacity: '0.4',
+    touchDelay: 180,
+    touchTolerance: 6,
+};
+exports.PsDragClasses = {
+    handle: 'ps-focus-ring inline-flex h-7 w-7 shrink-0 cursor-grab touch-none items-center justify-center rounded-full text-slate-400/70 transition hover:bg-white/36 hover:text-slate-600 active:cursor-grabbing dark:text-slate-300/55 dark:hover:bg-white/8 dark:hover:text-slate-100',
+    listItem: 'min-w-0',
+    lifted: 'cursor-grabbing rounded-xl bg-surface ring-1 ring-primary/30',
+    placeholder: 'outline-dashed outline-2 outline-offset-[-2px] outline-primary/35',
+};
+exports.PsDragLiftFrames = [
+    { boxShadow: '0 0 0 0 rgb(15 23 42 / 0)', transform: 'scale(1) rotate(0deg)' },
+    {
+        boxShadow: '0 28px 64px -18px rgb(15 23 42 / 0.5)',
+        transform: 'scale(1.035) rotate(-1.2deg)',
+    },
+];
+exports.PsDragListLiftFrames = [
+    { boxShadow: '0 0 0 0 rgb(15 23 42 / 0)', transform: 'scale(1)' },
+    { boxShadow: '0 18px 40px -16px rgb(15 23 42 / 0.45)', transform: 'scale(1.015)' },
+];

package/dist/constants/ps-draggable-grid.js

@@ -1,26 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PsDraggableGridLiftFrames = exports.PsDraggableGridClasses = exports.PsDraggableGridConfig = void 0;
-exports.PsDraggableGridConfig = {
-    activationDistance: 6,
-    dropDuration: 220,
-    dropEasing: 'cubic-bezier(0.2, 0.8, 0.2, 1)',
-    liftDuration: 200,
-    liftEasing: 'cubic-bezier(0.2, 0.9, 0.3, 1.2)',
-    placeholderOpacity: '0.4',
-    touchDelay: 180,
-    touchTolerance: 6,
-};
+const ps_drag_config_1 = require("./ps-drag-config");
+exports.PsDraggableGridConfig = ps_drag_config_1.PsDragConfig;
 exports.PsDraggableGridClasses = {
-    handle: 'ps-focus-ring inline-flex h-7 w-7 shrink-0 cursor-grab touch-none items-center justify-center rounded-full text-slate-400/70 transition hover:bg-white/36 hover:text-slate-600 active:cursor-grabbing dark:text-slate-300/55 dark:hover:bg-white/8 dark:hover:text-slate-100',
+    handle: ps_drag_config_1.PsDragClasses.handle,
     item: 'min-w-0 rounded-[1.7rem]',
     lifted: 'cursor-grabbing rounded-[1.7rem] ring-1 ring-primary/30',
     placeholder: 'rounded-[1.7rem] outline-dashed outline-2 outline-offset-[-2px] outline-primary/35',
 };
-exports.PsDraggableGridLiftFrames = [
-    { boxShadow: '0 0 0 0 rgb(15 23 42 / 0)', transform: 'scale(1) rotate(0deg)' },
-    {
-        boxShadow: '0 28px 64px -18px rgb(15 23 42 / 0.5)',
-        transform: 'scale(1.035) rotate(-1.2deg)',
-    },
-];
+exports.PsDraggableGridLiftFrames = ps_drag_config_1.PsDragLiftFrames;

package/dist/esm/components/ps-drag-grip.js

@@ -0,0 +1,2 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const PsDragGrip = () => (_jsx("span", { "aria-hidden": 'true', className: 'grid grid-cols-2 gap-[0.1875rem]', children: Array.from({ length: 6 }).map((_, index) => (_jsx("span", { className: 'h-[3px] w-[3px] rounded-full bg-current' }, index))) }));

package/dist/esm/components/ps-drag-overlay.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { DragOverlay, defaultDropAnimationSideEffects } from '@dnd-kit/core';
+import { createPortal } from 'react-dom';
+import { PsDragConfig } from '../constants/ps-drag-config';
+import { usePsReducedMotion } from '../hooks/use-ps-reduced-motion';
+const dropAnimation = {
+    duration: PsDragConfig.dropDuration,
+    easing: PsDragConfig.dropEasing,
+    sideEffects: defaultDropAnimationSideEffects({
+        styles: { active: { opacity: PsDragConfig.placeholderOpacity } },
+    }),
+};
+export const PsDragOverlay = ({ children, className, frames }) => {
+    const [isMounted, setIsMounted] = useState(false);
+    const isReduced = usePsReducedMotion();
+    useEffect(() => setIsMounted(true), []);
+    if (!isMounted)
+        return null;
+    const lift = (element) => {
+        if (element === null || isReduced || typeof element.animate !== 'function')
+            return;
+        element.animate(frames, {
+            duration: PsDragConfig.liftDuration,
+            easing: PsDragConfig.liftEasing,
+            fill: 'forwards',
+        });
+    };
+    return createPortal(_jsx(DragOverlay, { dropAnimation: isReduced ? null : dropAnimation, children: children === null ? null : (_jsx("div", { className: className, ref: lift, children: children })) }), document.body);
+};

package/dist/esm/components/ps-draggable-grid.js

@@ -1,28 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useState } from 'react';
-import { DndContext, DragOverlay, KeyboardSensor, MouseSensor, TouchSensor, closestCenter, defaultDropAnimationSideEffects, useSensor, useSensors, } from '@dnd-kit/core';
-import { SortableContext, arrayMove, rectSortingStrategy, sortableKeyboardCoordinates, useSortable, } from '@dnd-kit/sortable';
+import { useState } from 'react';
+import { DndContext, closestCenter } from '@dnd-kit/core';
+import { SortableContext, arrayMove, rectSortingStrategy, useSortable } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
-import { createPortal } from 'react-dom';
-import { PsDraggableGridClasses, PsDraggableGridConfig, PsDraggableGridLiftFrames, } from '../constants/ps-draggable-grid';
-const liftCard = (element) => {
-    if (element === null)
-        return;
-    element.animate(PsDraggableGridLiftFrames, {
-        duration: PsDraggableGridConfig.liftDuration,
-        easing: PsDraggableGridConfig.liftEasing,
-        fill: 'forwards',
-    });
-};
-const dropAnimation = {
-    duration: PsDraggableGridConfig.dropDuration,
-    easing: PsDraggableGridConfig.dropEasing,
-    sideEffects: defaultDropAnimationSideEffects({
-        styles: { active: { opacity: PsDraggableGridConfig.placeholderOpacity } },
-    }),
-};
-const DragHandleIcon = () => (_jsx("span", { "aria-hidden": 'true', className: 'grid grid-cols-2 gap-[0.1875rem]', children: Array.from({ length: 6 }).map((_, index) => (_jsx("span", { className: 'h-[3px] w-[3px] rounded-full bg-current' }, index))) }));
-const PsDraggableGridHandle = ({ attributes, label, listeners, setActivatorNodeRef, }) => (_jsx("button", { ...attributes, ...listeners, "aria-label": `Move ${label}`, className: PsDraggableGridClasses.handle, ref: setActivatorNodeRef, title: `Move ${label}`, type: 'button', children: _jsx(DragHandleIcon, {}) }));
+import { PsDragConfig } from '../constants/ps-drag-config';
+import { PsDraggableGridClasses, PsDraggableGridLiftFrames } from '../constants/ps-draggable-grid';
+import { usePsDragSensors } from '../hooks/use-ps-drag-sensors';
+import { PsDragGrip } from './ps-drag-grip';
+import { PsDragOverlay } from './ps-drag-overlay';
+const PsDraggableGridHandle = ({ attributes, label, listeners, setActivatorNodeRef, }) => (_jsx("button", { ...attributes, ...listeners, "aria-label": `Move ${label}`, className: PsDraggableGridClasses.handle, ref: setActivatorNodeRef, title: `Move ${label}`, type: 'button', children: _jsx(PsDragGrip, {}) }));
 const PsSortableGridItem = ({ className, index, item, renderItem, }) => {
     const { attributes, isDragging, listeners, setActivatorNodeRef, setNodeRef, transform, transition, } = useSortable({ id: item.id });
     const rendered = renderItem({
@@ -35,23 +21,14 @@ const PsSortableGridItem = ({ className, index, item, renderItem, }) => {
     if (!rendered)
         return null;
     return (_jsx("div", { className: `${PsDraggableGridClasses.item} ${className} ${isDragging ? PsDraggableGridClasses.placeholder : ''}`, ref: setNodeRef, style: {
-            opacity: isDragging ? PsDraggableGridConfig.placeholderOpacity : undefined,
+            opacity: isDragging ? PsDragConfig.placeholderOpacity : undefined,
             transform: CSS.Translate.toString(transform),
             transition,
         }, children: rendered }));
 };
 export const PsDraggableGrid = ({ getItemClassName, items, onReorder, onReorderEnd, renderItem, }) => {
     const [activeId, setActiveId] = useState(null);
-    const [isMounted, setIsMounted] = useState(false);
-    useEffect(() => setIsMounted(true), []);
-    const sensors = useSensors(useSensor(MouseSensor, {
-        activationConstraint: { distance: PsDraggableGridConfig.activationDistance },
-    }), useSensor(TouchSensor, {
-        activationConstraint: {
-            delay: PsDraggableGridConfig.touchDelay,
-            tolerance: PsDraggableGridConfig.touchTolerance,
-        },
-    }), useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }));
+    const sensors = usePsDragSensors();
     const className = (item) => getItemClassName !== undefined ? getItemClassName(item) : '';
     const activeIndex = items.findIndex((item) => item.id === activeId);
     const activeItem = activeIndex >= 0 ? items[activeIndex] : null;
@@ -68,13 +45,13 @@ export const PsDraggableGrid = ({ getItemClassName, items, onReorder, onReorderE
         if (onReorderEnd !== undefined)
             onReorderEnd(nextItems);
     };
-    return (_jsxs(DndContext, { collisionDetection: closestCenter, onDragCancel: () => setActiveId(null), onDragEnd: handleDragEnd, onDragStart: (event) => setActiveId(String(event.active.id)), sensors: sensors, children: [_jsx(SortableContext, { items: items.map((item) => item.id), strategy: rectSortingStrategy, children: items.map((item, index) => (_jsx(PsSortableGridItem, { className: className(item), index: index, item: item, renderItem: renderItem }, item.id))) }), isMounted
-                ? createPortal(_jsx(DragOverlay, { dropAnimation: dropAnimation, children: activeItem !== null ? (_jsx("div", { className: PsDraggableGridClasses.lifted, ref: liftCard, children: renderItem({
-                            handle: _jsx(PsDraggableGridHandle, { label: activeItem.label }),
-                            index: activeIndex,
-                            isDragging: true,
-                            isOverlay: true,
-                            item: activeItem,
-                        }) })) : null }), document.body)
-                : null] }));
+    return (_jsxs(DndContext, { collisionDetection: closestCenter, onDragCancel: () => setActiveId(null), onDragEnd: handleDragEnd, onDragStart: (event) => setActiveId(String(event.active.id)), sensors: sensors, children: [_jsx(SortableContext, { items: items.map((item) => item.id), strategy: rectSortingStrategy, children: items.map((item, index) => (_jsx(PsSortableGridItem, { className: className(item), index: index, item: item, renderItem: renderItem }, item.id))) }), _jsx(PsDragOverlay, { className: PsDraggableGridClasses.lifted, frames: PsDraggableGridLiftFrames, children: activeItem !== null
+                    ? renderItem({
+                        handle: _jsx(PsDraggableGridHandle, { label: activeItem.label }),
+                        index: activeIndex,
+                        isDragging: true,
+                        isOverlay: true,
+                        item: activeItem,
+                    })
+                    : null })] }));
 };

package/dist/esm/components/ps-sortable-list.js

@@ -0,0 +1,75 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { DndContext, closestCenter, } from '@dnd-kit/core';
+import { SortableContext, useSortable, verticalListSortingStrategy } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { PsDragClasses, PsDragConfig, PsDragListLiftFrames } from '../constants/ps-drag-config';
+import { usePsDragSensors } from '../hooks/use-ps-drag-sensors';
+import { usePsReducedMotion } from '../hooks/use-ps-reduced-motion';
+import { PsDragGrip } from './ps-drag-grip';
+import { PsDragOverlay } from './ps-drag-overlay';
+const PsSortableListHandle = ({ attributes, className, icon, label, listeners, setActivatorNodeRef, }) => (_jsx("button", { ...attributes, ...listeners, "aria-label": label, className: className === undefined ? PsDragClasses.handle : className, ref: setActivatorNodeRef, title: label, type: 'button', children: icon === undefined ? _jsx(PsDragGrip, {}) : icon }));
+const PsSortableListRow = ({ className, handleClassName, handleIcon, getHandleLabel, index, isDisabled, item, renderItem, }) => {
+    const isReduced = usePsReducedMotion();
+    const { attributes, isDragging, listeners, setActivatorNodeRef, setNodeRef, transform, transition, } = useSortable({ disabled: isDisabled, id: item.id });
+    const rendered = renderItem({
+        handle: (_jsx(PsSortableListHandle, { attributes: attributes, className: handleClassName, icon: handleIcon, label: getHandleLabel(item.label), listeners: listeners, setActivatorNodeRef: setActivatorNodeRef })),
+        index,
+        isDragging,
+        isOverlay: false,
+        item,
+    });
+    if (!rendered)
+        return null;
+    return (_jsx("div", { className: `${PsDragClasses.listItem} ${className} ${isDragging ? PsDragClasses.placeholder : ''}`, ref: setNodeRef, style: {
+            opacity: isDragging ? PsDragConfig.placeholderOpacity : undefined,
+            transform: CSS.Translate.toString(transform),
+            transition: isReduced ? undefined : transition,
+        }, children: rendered }));
+};
+export const PsSortableList = ({ announcements: texts, className, getHandleLabel, getItemClassName, handleClassName, handleIcon, instructions, role, items, onMove, renderItem, }) => {
+    const [activeId, setActiveId] = useState(null);
+    const sensors = usePsDragSensors();
+    const activeIndex = items.findIndex((item) => item.id === activeId);
+    const activeItem = activeIndex >= 0 ? items[activeIndex] : null;
+    const itemClassName = (item) => getItemClassName === undefined ? '' : getItemClassName(item);
+    const groupOf = (id) => {
+        const found = items.find((item) => item.id === id);
+        return found === undefined ? undefined : found.groupKey;
+    };
+    const labelOf = (id) => {
+        const found = items.find((item) => item.id === id);
+        return found === undefined ? id : found.label;
+    };
+    const positionOf = (id) => items.findIndex((item) => item.id === id) + 1;
+    const announcements = {
+        onDragCancel: ({ active }) => texts.cancelled(labelOf(String(active.id))),
+        onDragEnd: ({ active, over }) => over === null
+            ? texts.cancelled(labelOf(String(active.id)))
+            : texts.dropped(labelOf(String(active.id)), positionOf(String(over.id)), items.length),
+        onDragOver: ({ active, over }) => over === null
+            ? undefined
+            : texts.moved(labelOf(String(active.id)), positionOf(String(over.id)), items.length),
+        onDragStart: ({ active }) => texts.lifted(labelOf(String(active.id)), positionOf(String(active.id)), items.length),
+    };
+    const handleDragEnd = ({ active, over }) => {
+        setActiveId(null);
+        if (over === null || active.id === over.id)
+            return;
+        const from = items.findIndex((item) => item.id === active.id);
+        const to = items.findIndex((item) => item.id === over.id);
+        if (from < 0 || to < 0 || groupOf(String(active.id)) !== groupOf(String(over.id)))
+            return;
+        onMove(String(active.id), from, to);
+    };
+    const activeGroup = activeItem === null ? undefined : activeItem.groupKey;
+    return (_jsxs(DndContext, { accessibility: { announcements, screenReaderInstructions: { draggable: instructions } }, collisionDetection: closestCenter, onDragCancel: () => setActiveId(null), onDragEnd: handleDragEnd, onDragStart: ({ active }) => setActiveId(String(active.id)), sensors: sensors, children: [_jsx(SortableContext, { items: items.map((item) => item.id), strategy: verticalListSortingStrategy, children: _jsx("div", { className: className, role: role, children: items.map((item, index) => (_jsx(PsSortableListRow, { className: itemClassName(item), getHandleLabel: getHandleLabel, handleClassName: handleClassName, handleIcon: handleIcon, index: index, isDisabled: activeItem !== null && item.groupKey !== activeGroup, item: item, renderItem: renderItem }, item.id))) }) }), _jsx(PsDragOverlay, { className: PsDragClasses.lifted, frames: PsDragListLiftFrames, children: activeItem !== null
+                    ? renderItem({
+                        handle: (_jsx(PsSortableListHandle, { className: handleClassName, icon: handleIcon, label: getHandleLabel(activeItem.label) })),
+                        index: activeIndex,
+                        isDragging: true,
+                        isOverlay: true,
+                        item: activeItem,
+                    })
+                    : null })] }));
+};

package/dist/esm/constants/ps-drag-config.js

@@ -0,0 +1,27 @@
+export const PsDragConfig = {
+    activationDistance: 6,
+    dropDuration: 220,
+    dropEasing: 'cubic-bezier(0.2, 0.8, 0.2, 1)',
+    liftDuration: 200,
+    liftEasing: 'cubic-bezier(0.2, 0.9, 0.3, 1.2)',
+    placeholderOpacity: '0.4',
+    touchDelay: 180,
+    touchTolerance: 6,
+};
+export const PsDragClasses = {
+    handle: 'ps-focus-ring inline-flex h-7 w-7 shrink-0 cursor-grab touch-none items-center justify-center rounded-full text-slate-400/70 transition hover:bg-white/36 hover:text-slate-600 active:cursor-grabbing dark:text-slate-300/55 dark:hover:bg-white/8 dark:hover:text-slate-100',
+    listItem: 'min-w-0',
+    lifted: 'cursor-grabbing rounded-xl bg-surface ring-1 ring-primary/30',
+    placeholder: 'outline-dashed outline-2 outline-offset-[-2px] outline-primary/35',
+};
+export const PsDragLiftFrames = [
+    { boxShadow: '0 0 0 0 rgb(15 23 42 / 0)', transform: 'scale(1) rotate(0deg)' },
+    {
+        boxShadow: '0 28px 64px -18px rgb(15 23 42 / 0.5)',
+        transform: 'scale(1.035) rotate(-1.2deg)',
+    },
+];
+export const PsDragListLiftFrames = [
+    { boxShadow: '0 0 0 0 rgb(15 23 42 / 0)', transform: 'scale(1)' },
+    { boxShadow: '0 18px 40px -16px rgb(15 23 42 / 0.45)', transform: 'scale(1.015)' },
+];

package/dist/esm/constants/ps-draggable-grid.js

@@ -1,23 +1,9 @@
-export const PsDraggableGridConfig = {
-    activationDistance: 6,
-    dropDuration: 220,
-    dropEasing: 'cubic-bezier(0.2, 0.8, 0.2, 1)',
-    liftDuration: 200,
-    liftEasing: 'cubic-bezier(0.2, 0.9, 0.3, 1.2)',
-    placeholderOpacity: '0.4',
-    touchDelay: 180,
-    touchTolerance: 6,
-};
+import { PsDragClasses, PsDragConfig, PsDragLiftFrames } from './ps-drag-config';
+export const PsDraggableGridConfig = PsDragConfig;
 export const PsDraggableGridClasses = {
-    handle: 'ps-focus-ring inline-flex h-7 w-7 shrink-0 cursor-grab touch-none items-center justify-center rounded-full text-slate-400/70 transition hover:bg-white/36 hover:text-slate-600 active:cursor-grabbing dark:text-slate-300/55 dark:hover:bg-white/8 dark:hover:text-slate-100',
+    handle: PsDragClasses.handle,
     item: 'min-w-0 rounded-[1.7rem]',
     lifted: 'cursor-grabbing rounded-[1.7rem] ring-1 ring-primary/30',
     placeholder: 'rounded-[1.7rem] outline-dashed outline-2 outline-offset-[-2px] outline-primary/35',
 };
-export const PsDraggableGridLiftFrames = [
-    { boxShadow: '0 0 0 0 rgb(15 23 42 / 0)', transform: 'scale(1) rotate(0deg)' },
-    {
-        boxShadow: '0 28px 64px -18px rgb(15 23 42 / 0.5)',
-        transform: 'scale(1.035) rotate(-1.2deg)',
-    },
-];
+export const PsDraggableGridLiftFrames = PsDragLiftFrames;

package/dist/esm/hooks/use-ps-drag-sensors.js

@@ -0,0 +1,11 @@
+import { KeyboardSensor, MouseSensor, TouchSensor, useSensor, useSensors, } from '@dnd-kit/core';
+import { sortableKeyboardCoordinates } from '@dnd-kit/sortable';
+import { PsDragConfig } from '../constants/ps-drag-config';
+export const usePsDragSensors = () => useSensors(useSensor(MouseSensor, {
+    activationConstraint: { distance: PsDragConfig.activationDistance },
+}), useSensor(TouchSensor, {
+    activationConstraint: {
+        delay: PsDragConfig.touchDelay,
+        tolerance: PsDragConfig.touchTolerance,
+    },
+}), useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }));

package/dist/esm/hooks/use-ps-reduced-motion.js

@@ -0,0 +1,14 @@
+import { useEffect, useState } from 'react';
+export const usePsReducedMotion = () => {
+    const [isReduced, setIsReduced] = useState(false);
+    useEffect(() => {
+        if (typeof window.matchMedia !== 'function')
+            return;
+        const query = window.matchMedia('(prefers-reduced-motion: reduce)');
+        const update = () => setIsReduced(query.matches);
+        update();
+        query.addEventListener('change', update);
+        return () => query.removeEventListener('change', update);
+    }, []);
+    return isReduced;
+};

package/dist/esm/index.js

@@ -12,6 +12,9 @@ export * from './constants/ps-pallasoft-mark-config';
 export * from './components/ps-card';
 export * from './components/ps-client-only';
 export * from './components/ps-draggable-grid';
+export * from './components/ps-sortable-list';
+export * from './constants/ps-drag-config';
+export * from './models/ps-sortable-list';
 export * from './components/ps-empty-state';
 export * from './components/ps-fab';
 export * from './components/ps-infinite-scroll';
@@ -126,3 +129,7 @@ export * from './models/ps-detail-list-item';
 export * from './models/ps-start-panel-step';
 export * from './models/ps-step-list-item';
 export * from './models/ps-summary-item';
+export * from './components/ps-drag-grip';
+export * from './components/ps-drag-overlay';
+export * from './hooks/use-ps-drag-sensors';
+export * from './hooks/use-ps-reduced-motion';

package/dist/esm/models/ps-sortable-list.js

@@ -0,0 +1 @@
+export {};

package/dist/hooks/use-ps-drag-sensors.d.ts

@@ -0,0 +1,2 @@
+import { type SensorDescriptor, type SensorOptions } from '@dnd-kit/core';
+export declare const usePsDragSensors: () => SensorDescriptor<SensorOptions>[];

package/dist/hooks/use-ps-drag-sensors.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePsDragSensors = void 0;
+const core_1 = require("@dnd-kit/core");
+const sortable_1 = require("@dnd-kit/sortable");
+const ps_drag_config_1 = require("../constants/ps-drag-config");
+const usePsDragSensors = () => (0, core_1.useSensors)((0, core_1.useSensor)(core_1.MouseSensor, {
+    activationConstraint: { distance: ps_drag_config_1.PsDragConfig.activationDistance },
+}), (0, core_1.useSensor)(core_1.TouchSensor, {
+    activationConstraint: {
+        delay: ps_drag_config_1.PsDragConfig.touchDelay,
+        tolerance: ps_drag_config_1.PsDragConfig.touchTolerance,
+    },
+}), (0, core_1.useSensor)(core_1.KeyboardSensor, { coordinateGetter: sortable_1.sortableKeyboardCoordinates }));
+exports.usePsDragSensors = usePsDragSensors;

package/dist/hooks/use-ps-reduced-motion.d.ts

@@ -0,0 +1 @@
+export declare const usePsReducedMotion: () => boolean;

package/dist/hooks/use-ps-reduced-motion.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePsReducedMotion = void 0;
+const react_1 = require("react");
+const usePsReducedMotion = () => {
+    const [isReduced, setIsReduced] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => {
+        if (typeof window.matchMedia !== 'function')
+            return;
+        const query = window.matchMedia('(prefers-reduced-motion: reduce)');
+        const update = () => setIsReduced(query.matches);
+        update();
+        query.addEventListener('change', update);
+        return () => query.removeEventListener('change', update);
+    }, []);
+    return isReduced;
+};
+exports.usePsReducedMotion = usePsReducedMotion;

package/dist/index.d.ts

@@ -12,6 +12,9 @@ export * from './constants/ps-pallasoft-mark-config';
 export * from './components/ps-card';
 export * from './components/ps-client-only';
 export * from './components/ps-draggable-grid';
+export * from './components/ps-sortable-list';
+export * from './constants/ps-drag-config';
+export * from './models/ps-sortable-list';
 export * from './components/ps-empty-state';
 export * from './components/ps-fab';
 export * from './components/ps-infinite-scroll';
@@ -126,3 +129,7 @@ export * from './models/ps-detail-list-item';
 export * from './models/ps-start-panel-step';
 export * from './models/ps-step-list-item';
 export * from './models/ps-summary-item';
+export * from './components/ps-drag-grip';
+export * from './components/ps-drag-overlay';
+export * from './hooks/use-ps-drag-sensors';
+export * from './hooks/use-ps-reduced-motion';

package/dist/index.js

@@ -28,6 +28,9 @@ __exportStar(require("./constants/ps-pallasoft-mark-config"), exports);
 __exportStar(require("./components/ps-card"), exports);
 __exportStar(require("./components/ps-client-only"), exports);
 __exportStar(require("./components/ps-draggable-grid"), exports);
+__exportStar(require("./components/ps-sortable-list"), exports);
+__exportStar(require("./constants/ps-drag-config"), exports);
+__exportStar(require("./models/ps-sortable-list"), exports);
 __exportStar(require("./components/ps-empty-state"), exports);
 __exportStar(require("./components/ps-fab"), exports);
 __exportStar(require("./components/ps-infinite-scroll"), exports);
@@ -142,3 +145,7 @@ __exportStar(require("./models/ps-detail-list-item"), exports);
 __exportStar(require("./models/ps-start-panel-step"), exports);
 __exportStar(require("./models/ps-step-list-item"), exports);
 __exportStar(require("./models/ps-summary-item"), exports);
+__exportStar(require("./components/ps-drag-grip"), exports);
+__exportStar(require("./components/ps-drag-overlay"), exports);
+__exportStar(require("./hooks/use-ps-drag-sensors"), exports);
+__exportStar(require("./hooks/use-ps-reduced-motion"), exports);

package/dist/models/ps-sortable-list.d.ts

@@ -0,0 +1,32 @@
+import type { JSX } from 'react';
+export interface PsSortableListItem {
+    groupKey?: string;
+    id: string;
+    label: string;
+}
+export interface PsSortableListAnnouncements {
+    cancelled: (label: string) => string;
+    dropped: (label: string, position: number, count: number) => string;
+    lifted: (label: string, position: number, count: number) => string;
+    moved: (label: string, position: number, count: number) => string;
+}
+export interface PsSortableListRenderOptions<TItem extends PsSortableListItem> {
+    handle: JSX.Element;
+    index: number;
+    isDragging: boolean;
+    isOverlay: boolean;
+    item: TItem;
+}
+export interface PsSortableListProps<TItem extends PsSortableListItem> {
+    announcements: PsSortableListAnnouncements;
+    className?: string;
+    role?: string;
+    getHandleLabel: (label: string) => string;
+    getItemClassName?: (item: TItem) => string;
+    handleClassName?: string;
+    handleIcon?: JSX.Element;
+    instructions: string;
+    items: TItem[];
+    onMove: (itemId: string, fromIndex: number, toIndex: number) => void;
+    renderItem: (options: PsSortableListRenderOptions<TItem>) => JSX.Element | null;
+}

package/dist/models/ps-sortable-list.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@pallasoft/ps-core-components",
-	"version": "2.22.1",
+	"version": "2.23.0",
 	"private": false,
 	"main": "./dist/index.js",
 	"module": "./dist/esm/index.js",