@pallasoft/ps-core-components 2.3.1 → 2.5.0

package/dist/components/ps-draggable-grid.d.ts

@@ -1,19 +1,16 @@
-import type { JSX } from 'react';
-export interface PsDraggableGridItem {
-    id: string;
+import { type JSX } from 'react';
+import { useSortable } from '@dnd-kit/sortable';
+import { PsDraggableGridItem, PsDraggableGridProps, PsDraggableGridRenderOptions } from '../models/ps-draggable-grid';
+export interface PsDraggableGridHandleProps {
     label: string;
+    listeners?: ReturnType<typeof useSortable>['listeners'];
+    attributes?: ReturnType<typeof useSortable>['attributes'];
+    setActivatorNodeRef?: (element: HTMLElement | null) => void;
 }
-export interface PsDraggableGridRenderOptions<TItem extends PsDraggableGridItem> {
-    handle: JSX.Element;
+export interface PsSortableGridItemProps<TItem extends PsDraggableGridItem> {
+    className: string;
     index: number;
-    isDragging: boolean;
     item: TItem;
-}
-export interface PsDraggableGridProps<TItem extends PsDraggableGridItem> {
-    getItemClassName?: (item: TItem) => string;
-    items: TItem[];
-    onReorder: (items: TItem[]) => void;
-    onReorderEnd?: (items: TItem[]) => void;
     renderItem: (options: PsDraggableGridRenderOptions<TItem>) => JSX.Element | null;
 }
 export declare const PsDraggableGrid: <TItem extends PsDraggableGridItem>({ getItemClassName, items, onReorder, onReorderEnd, renderItem, }: PsDraggableGridProps<TItem>) => JSX.Element;

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

@@ -2,56 +2,83 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PsDraggableGrid = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const moveItem = (items, fromIndex, toIndex) => {
-    const nextItems = [...items];
-    const [movingItem] = nextItems.splice(fromIndex, 1);
-    nextItems.splice(toIndex, 0, movingItem);
-    return nextItems;
+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_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 PsSortableGridItem = ({ className, index, item, renderItem, }) => {
+    const { attributes, isDragging, listeners, setActivatorNodeRef, setNodeRef, transform, transition, } = (0, sortable_1.useSortable)({ id: item.id });
+    const rendered = renderItem({
+        handle: ((0, jsx_runtime_1.jsx)(PsDraggableGridHandle, { attributes: attributes, label: item.label, listeners: listeners, setActivatorNodeRef: setActivatorNodeRef })),
+        index,
+        isDragging,
+        isOverlay: false,
+        item,
+    });
+    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,
+            transform: utilities_1.CSS.Translate.toString(transform),
+            transition,
+        }, children: rendered }));
 };
-let draggedItemId;
-let latestItems = [];
-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-0.5 w-0.5 rounded-full bg-current' }, index))) }));
 const PsDraggableGrid = ({ getItemClassName, items, onReorder, onReorderEnd, renderItem, }) => {
-    latestItems = items;
-    const finishDrag = () => {
-        if (!draggedItemId)
-            return;
-        draggedItemId = undefined;
-        onReorderEnd?.(latestItems);
-    };
-    const moveDraggedItemTo = (targetItemId) => {
-        if (!draggedItemId || draggedItemId === targetItemId)
+    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 className = (item) => getItemClassName !== undefined ? getItemClassName(item) : '';
+    const activeIndex = items.findIndex((item) => item.id === activeId);
+    const activeItem = activeIndex >= 0 ? items[activeIndex] : null;
+    const handleDragEnd = (event) => {
+        setActiveId(null);
+        if (event.over === null || event.active.id === event.over.id)
             return;
-        const currentItems = latestItems;
-        const fromIndex = currentItems.findIndex((item) => item.id === draggedItemId);
-        const toIndex = currentItems.findIndex((item) => item.id === targetItemId);
-        if (fromIndex < 0 || toIndex < 0 || fromIndex === toIndex)
+        const fromIndex = items.findIndex((item) => item.id === event.active.id);
+        const toIndex = items.findIndex((item) => item.id === event.over?.id);
+        if (fromIndex < 0 || toIndex < 0)
             return;
-        const nextItems = moveItem(currentItems, fromIndex, toIndex);
-        latestItems = nextItems;
+        const nextItems = (0, sortable_1.arrayMove)(items, fromIndex, toIndex);
         onReorder(nextItems);
+        if (onReorderEnd !== undefined)
+            onReorderEnd(nextItems);
     };
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: items.map((item, index) => {
-            const isDragging = false;
-            const handle = ((0, jsx_runtime_1.jsx)("button", { "aria-label": `Move ${item.label}`, className: 'ps-focus-ring inline-flex h-6 w-6 shrink-0 cursor-grab items-center justify-center rounded-full text-slate-400/55 opacity-45 transition hover:bg-white/36 hover:text-slate-600 hover:opacity-90 active:cursor-grabbing dark:text-slate-300/45 dark:hover:bg-white/8 dark:hover:text-slate-100', draggable: true, onDragEnd: finishDrag, onDragStart: (event) => {
-                    event.dataTransfer.effectAllowed = 'move';
-                    event.dataTransfer.setData('text/plain', item.id);
-                    draggedItemId = item.id;
-                }, title: `Move ${item.label}`, type: 'button', children: (0, jsx_runtime_1.jsx)(DragHandleIcon, {}) }));
-            const renderedItem = renderItem({ handle, index, isDragging, item });
-            const itemClassName = getItemClassName?.(item);
-            if (!renderedItem)
-                return null;
-            return ((0, jsx_runtime_1.jsx)("div", { className: `ps-page-enter min-w-0 rounded-[1.7rem] transition ${itemClassName !== null && itemClassName !== undefined ? itemClassName : ''} ${isDragging ? 'scale-[0.985] opacity-70' : ''}`, onDragOver: (event) => {
-                    if (!draggedItemId)
-                        return;
-                    event.preventDefault();
-                    event.dataTransfer.dropEffect = 'move';
-                    moveDraggedItemTo(item.id);
-                }, onDrop: (event) => {
-                    event.preventDefault();
-                    finishDrag();
-                }, children: renderedItem }, item.id));
-        }) }));
+    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] }));
 };
 exports.PsDraggableGrid = PsDraggableGrid;

package/dist/components/ps-navigation-progress.d.ts

@@ -2,8 +2,9 @@ export interface PsNavigationProgressProps {
     className?: string;
     color?: string;
     height?: number;
+    isLoading?: boolean;
     label?: string;
-    progress: number;
+    progress?: number;
     shadow?: boolean;
 }
-export declare const PsNavigationProgress: ({ className, color, height, label, progress, shadow, }: PsNavigationProgressProps) => import("react").JSX.Element;
+export declare const PsNavigationProgress: ({ className, color, height, isLoading, label, progress, shadow, }: PsNavigationProgressProps) => import("react").JSX.Element;

package/dist/components/ps-navigation-progress.js

@@ -2,33 +2,24 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PsNavigationProgress = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
 const ps_design_system_1 = require("@pallasoft/ps-design-system");
 const ps_navigation_progress_config_1 = require("../constants/ps-navigation-progress-config");
-const PsNavigationProgress = ({ className, color = ps_navigation_progress_config_1.PsNavigationProgressConfig.defaultColor, height = ps_navigation_progress_config_1.PsNavigationProgressConfig.defaultHeight, label = ps_navigation_progress_config_1.PsNavigationProgressConfig.defaultLabel, progress, shadow = true, }) => {
-    const [isVisible, setIsVisible] = (0, react_1.useState)(false);
-    const hideTimer = (0, react_1.useRef)(null);
-    (0, react_1.useEffect)(() => {
-        if (typeof window === 'undefined')
-            return;
-        if (hideTimer.current !== null)
-            window.clearTimeout(hideTimer.current);
-        if (progress > 0 && progress < 100) {
-            setIsVisible(true);
-            return;
-        }
-        hideTimer.current = window.setTimeout(() => setIsVisible(false), ps_navigation_progress_config_1.PsNavigationProgressConfig.fadeMs);
-        return () => {
-            if (hideTimer.current !== null)
-                window.clearTimeout(hideTimer.current);
-        };
-    }, [progress]);
-    return ((0, jsx_runtime_1.jsx)("div", { "aria-hidden": isVisible ? undefined : 'true', "aria-label": label, "aria-valuemax": 100, "aria-valuemin": 0, "aria-valuenow": Math.round(progress), className: ps_design_system_1.PallasoftClassNameService.merge('pointer-events-none fixed inset-x-0 top-0', className), role: 'progressbar', style: { height, zIndex: ps_design_system_1.PallasoftZIndex.Toast }, children: (0, jsx_runtime_1.jsx)("div", { className: 'h-full origin-left transition-[width,opacity] ease-out', style: {
+const use_ps_navigation_progress_1 = require("../hooks/use-ps-navigation-progress");
+const PsNavigationProgress = ({ className, color = ps_navigation_progress_config_1.PsNavigationProgressConfig.defaultColor, height = ps_navigation_progress_config_1.PsNavigationProgressConfig.defaultHeight, isLoading, label = ps_navigation_progress_config_1.PsNavigationProgressConfig.defaultLabel, progress, shadow = true, }) => {
+    const { isAnimated, isVisible, width } = (0, use_ps_navigation_progress_1.usePsNavigationProgress)(isLoading !== undefined
+        ? isLoading
+        : progress !== undefined &&
+            progress > 0 &&
+            progress < ps_navigation_progress_config_1.PsNavigationProgressConfig.completeWidth);
+    return ((0, jsx_runtime_1.jsx)("div", { "aria-hidden": isVisible ? undefined : 'true', "aria-label": label, "aria-valuemax": 100, "aria-valuemin": 0, "aria-valuenow": Math.round(width), className: ps_design_system_1.PallasoftClassNameService.merge('pointer-events-none fixed inset-x-0 top-0', className), role: 'progressbar', style: { height, zIndex: ps_design_system_1.PallasoftZIndex.Toast }, children: (0, jsx_runtime_1.jsx)("div", { className: 'h-full origin-left ease-out', style: {
                 backgroundColor: color,
                 boxShadow: shadow ? `0 0 10px ${color}, 0 0 5px ${color}` : undefined,
                 opacity: isVisible ? 1 : 0,
-                transitionDuration: `${ps_navigation_progress_config_1.PsNavigationProgressConfig.transitionMs}ms`,
-                width: `${Math.min(Math.max(progress, 0), 100)}%`,
+                transitionDuration: isAnimated
+                    ? `${ps_navigation_progress_config_1.PsNavigationProgressConfig.transitionMs}ms, ${ps_navigation_progress_config_1.PsNavigationProgressConfig.fadeMs}ms`
+                    : '0ms',
+                transitionProperty: 'width, opacity',
+                width: `${Math.min(Math.max(width, 0), 100)}%`,
             } }) }));
 };
 exports.PsNavigationProgress = PsNavigationProgress;

package/dist/components/ps-section-header.js

@@ -2,5 +2,5 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PsSectionHeader = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const PsSectionHeader = ({ description, eyebrow, leading, title, trailing, }) => ((0, jsx_runtime_1.jsxs)("div", { className: 'flex flex-col justify-between gap-3 lg:flex-row lg:items-end', children: [(0, jsx_runtime_1.jsxs)("div", { className: 'flex min-w-0 flex-col gap-2', children: [leading, eyebrow ? ((0, jsx_runtime_1.jsx)("p", { className: 'text-[0.68rem] font-semibold uppercase tracking-[0.22em] text-ink/50', children: eyebrow })) : null, (0, jsx_runtime_1.jsx)("h1", { className: 'text-2xl font-extrabold text-ink', children: title }), description ? ((0, jsx_runtime_1.jsx)("p", { className: 'max-w-3xl text-sm leading-6 text-ink/60', children: description })) : null] }), trailing] }));
+const PsSectionHeader = ({ description, eyebrow, leading, title, trailing, }) => ((0, jsx_runtime_1.jsxs)("div", { className: 'flex flex-wrap items-end justify-between gap-x-4 gap-y-3', children: [(0, jsx_runtime_1.jsxs)("div", { className: 'flex min-w-0 flex-1 basis-auto flex-col gap-2', children: [leading, eyebrow ? ((0, jsx_runtime_1.jsx)("p", { className: 'text-[0.68rem] font-semibold uppercase tracking-[0.22em] text-ink/50', children: eyebrow })) : null, (0, jsx_runtime_1.jsx)("h1", { className: 'break-words text-xl font-extrabold text-ink sm:text-2xl', children: title }), description ? ((0, jsx_runtime_1.jsx)("p", { className: 'max-w-3xl text-sm leading-6 text-ink/60', children: description })) : null] }), trailing ? (0, jsx_runtime_1.jsx)("div", { className: 'ml-auto flex shrink-0 items-center', children: trailing }) : null] }));
 exports.PsSectionHeader = PsSectionHeader;

package/dist/components/ps-skeleton-card.d.ts

@@ -0,0 +1,4 @@
+export interface PsSkeletonCardProps {
+    className?: string;
+}
+export declare const PsSkeletonCard: ({ className }: PsSkeletonCardProps) => import("react").JSX.Element;

package/dist/components/ps-skeleton-card.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsSkeletonCard = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ps_design_system_1 = require("@pallasoft/ps-design-system");
+const ps_skeleton_1 = require("./ps-skeleton");
+const ps_skeleton_group_1 = require("./ps-skeleton-group");
+const PsSkeletonCard = ({ className }) => ((0, jsx_runtime_1.jsxs)(ps_skeleton_group_1.PsSkeletonGroup, { className: ps_design_system_1.PallasoftClassNameService.merge('flex flex-col gap-3 rounded-[1.25rem] border border-line bg-surface p-5', className), children: [(0, jsx_runtime_1.jsx)(ps_skeleton_1.PsSkeleton, { className: 'h-2.5 w-24' }), (0, jsx_runtime_1.jsx)(ps_skeleton_1.PsSkeleton, { className: 'h-6 w-32' })] }));
+exports.PsSkeletonCard = PsSkeletonCard;

package/dist/components/ps-skeleton-group.d.ts

@@ -0,0 +1,7 @@
+import type { ReactNode } from 'react';
+export interface PsSkeletonGroupProps {
+    children: ReactNode;
+    className?: string;
+    label?: string;
+}
+export declare const PsSkeletonGroup: ({ children, className, label, }: PsSkeletonGroupProps) => import("react").JSX.Element;

package/dist/components/ps-skeleton-group.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsSkeletonGroup = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const PsSkeletonGroup = ({ children, className, label = 'Loading', }) => ((0, jsx_runtime_1.jsxs)("div", { "aria-busy": 'true', className: className, role: 'status', children: [(0, jsx_runtime_1.jsx)("span", { className: 'sr-only', children: label }), children] }));
+exports.PsSkeletonGroup = PsSkeletonGroup;

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

@@ -0,0 +1,8 @@
+export interface PsSkeletonListProps {
+    className?: string;
+    hasLeading?: boolean;
+    hasTrailing?: boolean;
+    rows?: number;
+    title?: boolean;
+}
+export declare const PsSkeletonList: ({ className, hasLeading, hasTrailing, rows, title, }: PsSkeletonListProps) => import("react").JSX.Element;

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

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsSkeletonList = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ps_design_system_1 = require("@pallasoft/ps-design-system");
+const ps_skeleton_config_1 = require("../constants/ps-skeleton-config");
+const ps_skeleton_1 = require("./ps-skeleton");
+const ps_skeleton_group_1 = require("./ps-skeleton-group");
+const PsSkeletonList = ({ className, hasLeading = false, hasTrailing = true, rows = 4, title = false, }) => ((0, jsx_runtime_1.jsxs)(ps_skeleton_group_1.PsSkeletonGroup, { className: ps_design_system_1.PallasoftClassNameService.merge('flex flex-col', className), children: [title ? (0, jsx_runtime_1.jsx)(ps_skeleton_1.PsSkeleton, { className: 'mx-3 mb-3 h-2.5 w-24' }) : null, Array.from({ length: rows }, (_, index) => ((0, jsx_runtime_1.jsxs)("div", { className: 'flex min-h-11 items-center gap-3 px-3 py-2.5', children: [hasLeading ? (0, jsx_runtime_1.jsx)(ps_skeleton_1.PsSkeleton, { shape: 'circle' }) : null, (0, jsx_runtime_1.jsx)(ps_skeleton_1.PsSkeleton, { className: ps_skeleton_config_1.PsSkeletonConfig.lineWidths[index % ps_skeleton_config_1.PsSkeletonConfig.lineWidths.length] }), hasTrailing ? (0, jsx_runtime_1.jsx)(ps_skeleton_1.PsSkeleton, { className: 'ml-auto h-2.5 w-20 shrink-0' }) : null] }, index)))] }));
+exports.PsSkeletonList = PsSkeletonList;

package/dist/components/ps-skeleton-table.d.ts

@@ -0,0 +1,7 @@
+export interface PsSkeletonTableProps {
+    className?: string;
+    columns?: number;
+    hasToolbar?: boolean;
+    rows?: number;
+}
+export declare const PsSkeletonTable: ({ className, columns, hasToolbar, rows, }: PsSkeletonTableProps) => import("react").JSX.Element;

package/dist/components/ps-skeleton-table.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsSkeletonTable = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ps_design_system_1 = require("@pallasoft/ps-design-system");
+const ps_skeleton_config_1 = require("../constants/ps-skeleton-config");
+const ps_skeleton_1 = require("./ps-skeleton");
+const ps_skeleton_group_1 = require("./ps-skeleton-group");
+const PsSkeletonTable = ({ className, columns = 4, hasToolbar = false, rows = 6, }) => {
+    const gridTemplateColumns = `minmax(0, 2fr) repeat(${Math.max(columns - 1, 0)}, minmax(0, 1fr))`;
+    return ((0, jsx_runtime_1.jsxs)(ps_skeleton_group_1.PsSkeletonGroup, { className: ps_design_system_1.PallasoftClassNameService.merge('flex flex-col gap-3', className), children: [hasToolbar ? ((0, jsx_runtime_1.jsxs)("div", { className: 'flex items-center gap-3', children: [(0, jsx_runtime_1.jsx)(ps_skeleton_1.PsSkeleton, { className: 'max-w-sm', shape: 'block' }), (0, jsx_runtime_1.jsx)(ps_skeleton_1.PsSkeleton, { className: 'ml-auto w-24', shape: 'block' })] })) : null, (0, jsx_runtime_1.jsxs)("div", { className: 'overflow-hidden rounded-[1.25rem] border border-line bg-surface', children: [(0, jsx_runtime_1.jsx)("div", { className: 'grid gap-4 bg-mist/70 px-5 py-4', style: { gridTemplateColumns }, children: Array.from({ length: columns }, (_, index) => ((0, jsx_runtime_1.jsx)(ps_skeleton_1.PsSkeleton, { className: 'h-2.5 w-16' }, index))) }), Array.from({ length: rows }, (_, rowIndex) => ((0, jsx_runtime_1.jsx)("div", { className: 'grid items-center gap-4 border-t border-line px-5 py-4', style: { gridTemplateColumns }, children: Array.from({ length: columns }, (__, columnIndex) => ((0, jsx_runtime_1.jsx)(ps_skeleton_1.PsSkeleton, { className: columnIndex === columns - 1 && columns > 1
+                                ? 'ml-auto w-16'
+                                : ps_skeleton_config_1.PsSkeletonConfig.lineWidths[(rowIndex + columnIndex) % ps_skeleton_config_1.PsSkeletonConfig.lineWidths.length] }, columnIndex))) }, rowIndex)))] })] }));
+};
+exports.PsSkeletonTable = PsSkeletonTable;

package/dist/components/ps-skeleton-text.d.ts

@@ -0,0 +1,5 @@
+export interface PsSkeletonTextProps {
+    className?: string;
+    lines?: number;
+}
+export declare const PsSkeletonText: ({ className, lines }: PsSkeletonTextProps) => import("react").JSX.Element;

package/dist/components/ps-skeleton-text.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsSkeletonText = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ps_design_system_1 = require("@pallasoft/ps-design-system");
+const ps_skeleton_config_1 = require("../constants/ps-skeleton-config");
+const ps_skeleton_1 = require("./ps-skeleton");
+const ps_skeleton_group_1 = require("./ps-skeleton-group");
+const PsSkeletonText = ({ className, lines = 3 }) => ((0, jsx_runtime_1.jsx)(ps_skeleton_group_1.PsSkeletonGroup, { className: ps_design_system_1.PallasoftClassNameService.merge('flex flex-col gap-2.5', className), children: Array.from({ length: lines }, (_, index) => ((0, jsx_runtime_1.jsx)(ps_skeleton_1.PsSkeleton, { className: index === lines - 1 && lines > 1
+            ? 'w-2/3'
+            : ps_skeleton_config_1.PsSkeletonConfig.lineWidths[index % ps_skeleton_config_1.PsSkeletonConfig.lineWidths.length] }, index))) }));
+exports.PsSkeletonText = PsSkeletonText;

package/dist/components/ps-skeleton.d.ts

@@ -1,4 +1,6 @@
+export type PsSkeletonShape = 'block' | 'circle' | 'line';
 export interface PsSkeletonProps {
     className?: string;
+    shape?: PsSkeletonShape;
 }
-export declare const PsSkeleton: ({ className }: PsSkeletonProps) => import("react").JSX.Element;
+export declare const PsSkeleton: ({ className, shape }: PsSkeletonProps) => import("react").JSX.Element;

package/dist/components/ps-skeleton.js

@@ -3,5 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.PsSkeleton = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const ps_design_system_1 = require("@pallasoft/ps-design-system");
-const PsSkeleton = ({ className }) => ((0, jsx_runtime_1.jsx)("div", { className: ps_design_system_1.PallasoftClassNameService.merge('animate-pulse rounded-full bg-mist', className) }));
+const shapeClassNames = {
+    block: 'h-11 w-full rounded-ps-control',
+    circle: 'h-9 w-9 shrink-0 rounded-full',
+    line: 'h-3 w-full rounded-full',
+};
+const PsSkeleton = ({ className, shape = 'line' }) => ((0, jsx_runtime_1.jsx)("span", { "aria-hidden": 'true', className: ps_design_system_1.PallasoftClassNameService.merge('ps-skeleton', shapeClassNames[shape], className) }));
 exports.PsSkeleton = PsSkeleton;

package/dist/constants/ps-draggable-grid.d.ts

@@ -0,0 +1,17 @@
+export declare const PsDraggableGridConfig: {
+    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 PsDraggableGridClasses: {
+    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 item: "min-w-0 rounded-[1.7rem]";
+    readonly lifted: "cursor-grabbing rounded-[1.7rem] ring-1 ring-primary/30";
+    readonly placeholder: "rounded-[1.7rem] outline-dashed outline-2 outline-offset-[-2px] outline-primary/35";
+};
+export declare const PsDraggableGridLiftFrames: Keyframe[];

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

@@ -0,0 +1,26 @@
+"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,
+};
+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',
+    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)',
+    },
+];

package/dist/constants/ps-navigation-progress-config.d.ts

@@ -1,7 +1,12 @@
 export declare const PsNavigationProgressConfig: {
+    readonly completeWidth: 100;
     readonly defaultColor: "rgb(var(--ps-color-primary-rgb))";
     readonly defaultHeight: 3;
     readonly defaultLabel: "Page loading";
     readonly fadeMs: 320;
+    readonly startWidth: 12;
     readonly transitionMs: 240;
+    readonly trickleFactor: 0.14;
+    readonly trickleMax: 90;
+    readonly trickleMs: 260;
 };

package/dist/constants/ps-navigation-progress-config.js

@@ -2,9 +2,14 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PsNavigationProgressConfig = void 0;
 exports.PsNavigationProgressConfig = {
+    completeWidth: 100,
     defaultColor: 'rgb(var(--ps-color-primary-rgb))',
     defaultHeight: 3,
     defaultLabel: 'Page loading',
     fadeMs: 320,
+    startWidth: 12,
     transitionMs: 240,
+    trickleFactor: 0.14,
+    trickleMax: 90,
+    trickleMs: 260,
 };

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

@@ -0,0 +1,3 @@
+export declare const PsSkeletonConfig: {
+    readonly lineWidths: readonly ["w-3/4", "w-1/2", "w-5/6", "w-2/3"];
+};

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

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsSkeletonConfig = void 0;
+exports.PsSkeletonConfig = {
+    lineWidths: ['w-3/4', 'w-1/2', 'w-5/6', 'w-2/3'],
+};

package/dist/esm/components/ps-accordion.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PallasoftClassNameService } from '@pallasoft/ps-design-system';
+import { PsIcon, PsIconKey } from '@pallasoft/ps-icons';
+import * as AccordionPrimitive from '@radix-ui/react-accordion';
+export const PsAccordion = ({ children, className, isOpen, label, onToggle, trailing, }) => (_jsx(AccordionPrimitive.Root, { type: 'single', collapsible: true, value: isOpen ? 'open' : '', onValueChange: onToggle, className: PallasoftClassNameService.merge('overflow-hidden rounded-ps-card border border-line/70 bg-surface/60 transition-colors duration-200', isOpen ? 'border-primary/25 bg-surface' : 'hover:border-line hover:bg-surface/90', className), children: _jsxs(AccordionPrimitive.Item, { value: 'open', children: [_jsx(AccordionPrimitive.Header, { children: _jsxs(AccordionPrimitive.Trigger, { className: 'ps-focus-ring flex w-full items-center justify-between gap-3 px-4 py-3.5 text-left', children: [_jsx("span", { className: 'text-body-2 font-semibold text-ink', children: label }), _jsxs("span", { className: 'flex shrink-0 items-center gap-2', children: [trailing, _jsx(PsIcon, { iconKey: PsIconKey.ChevronRight, className: PallasoftClassNameService.merge('h-4 w-4 text-ink/40 transition-transform duration-200', isOpen ? 'rotate-90 text-primary' : '') })] })] }) }), _jsx(AccordionPrimitive.Content, { className: 'ps-accordion-content', children: _jsx("div", { className: 'border-t border-line/70 p-4', children: children }) })] }) }));

package/dist/esm/components/ps-action-tile.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PallasoftClassNameService } from '@pallasoft/ps-design-system';
+const variantClassNames = {
+    default: 'ps-action-tile',
+    primary: 'ps-action-tile ps-action-tile-primary',
+};
+export const PsActionTile = ({ className, description, icon, label, type = 'button', variant = 'default', ...props }) => (_jsxs("button", { className: PallasoftClassNameService.merge('ps-focus-ring w-full', variantClassNames[variant], className), type: type, ...props, children: [_jsxs("span", { className: 'min-w-0', children: [_jsx("span", { className: 'block break-words', children: label }), description ? (_jsx("span", { className: PallasoftClassNameService.merge('mt-0.5 block text-xs font-medium leading-5', variant === 'primary' ? 'text-white/75' : 'text-ink/50'), children: description })) : null] }), icon ? (_jsx("span", { className: PallasoftClassNameService.merge('flex h-9 w-9 shrink-0 items-center justify-center rounded-lg', variant === 'primary' ? 'bg-white/15 text-white' : 'ps-icon-surface'), children: icon })) : null] }));

package/dist/esm/components/ps-audio-spectrum.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PallasoftClassNameService } from '@pallasoft/ps-design-system';
+const MinBarHeightPercent = 10;
+export const PsAudioSpectrum = (props) => {
+    return (_jsx("div", { className: PallasoftClassNameService.merge('flex h-full w-full items-end gap-2', props.className), children: props.levels.map((level, index) => {
+            const heightPercent = MinBarHeightPercent + Math.max(0, Math.min(1, level)) * (100 - MinBarHeightPercent);
+            return (_jsx("span", { className: 'min-w-0 flex-1 rounded-full bg-[linear-gradient(180deg,_rgb(var(--ps-color-primary-rgb)/0.25)_0%,_rgb(var(--ps-color-primary-rgb))_100%)] transition-[height] duration-100 ease-out', style: { height: `${heightPercent}%` } }, index));
+        }) }));
+};

package/dist/esm/components/ps-badge.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PallasoftClassNameService } from '@pallasoft/ps-design-system';
+const toneClassNames = {
+    danger: 'bg-danger-soft text-danger dark:bg-rose-500/18 dark:text-rose-100',
+    neutral: 'bg-slate-100 text-slate-700 dark:bg-white/10 dark:text-slate-100',
+    primary: 'bg-primary-soft text-ink dark:bg-primary/22 dark:text-white',
+    success: 'bg-success-soft text-emerald-700 dark:bg-emerald-400/18 dark:text-emerald-50',
+    warning: 'bg-warning-soft text-amber-800 dark:bg-amber-400/18 dark:text-amber-50',
+};
+export const PsBadge = ({ children, className, tone = 'neutral' }) => (_jsx("span", { className: PallasoftClassNameService.merge('inline-flex min-h-7 w-fit items-center justify-center whitespace-nowrap rounded-full px-3 py-0.5 text-center text-xs font-semibold capitalize', toneClassNames[tone], className), children: children }));

package/dist/esm/components/ps-button.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PallasoftClassNameService } from '@pallasoft/ps-design-system';
+import { PsSpinner } from './ps-spinner';
+const sizeClassNames = {
+    compact: 'min-h-9 px-3 py-2 text-sm',
+    default: 'min-h-10 px-4 py-2.5 text-sm',
+    large: 'min-h-11 px-5 py-3 text-sm',
+};
+const variantClassNames = {
+    danger: 'border-danger bg-danger text-white enabled:hover:opacity-90',
+    ghost: 'border-transparent bg-transparent text-ink/60 enabled:hover:text-ink',
+    primary: 'border-primary bg-primary text-[color:var(--ps-color-primary-contrast)] enabled:hover:border-primary-dark enabled:hover:bg-primary-dark',
+    secondary: 'ps-liquid ps-liquid-control bg-white/72 text-ink enabled:hover:border-primary/30 enabled:hover:text-primary dark:border-white/16 dark:bg-white/12 dark:enabled:hover:text-white',
+    surface: 'ps-liquid ps-liquid-control bg-white/72 text-ink enabled:hover:border-primary/30 dark:border-white/16 dark:bg-white/12',
+};
+export const PsButton = ({ children, className, disabled, isLoading = false, leadingIcon, loadingLabel, size = 'default', trailingIcon, type = 'button', variant = 'secondary', ...props }) => (_jsxs("button", { className: PallasoftClassNameService.merge('ps-focus-ring relative inline-flex max-w-full items-center justify-center gap-2 rounded-full border text-center font-semibold disabled:cursor-not-allowed disabled:opacity-50', sizeClassNames[size], variantClassNames[variant], className), "aria-busy": isLoading || undefined, disabled: disabled || isLoading, type: type, ...props, children: [isLoading ? (_jsx(PsSpinner, { className: 'absolute inset-0 m-auto', color: 'current', label: loadingLabel !== null && loadingLabel !== undefined ? loadingLabel : 'Loading', size: 'small' })) : null, _jsxs("span", { "aria-hidden": isLoading || undefined, className: PallasoftClassNameService.merge('inline-flex min-w-0 items-center gap-2', isLoading ? 'invisible' : ''), children: [leadingIcon ? _jsx("span", { className: 'shrink-0', children: leadingIcon }) : null, _jsx("span", { className: 'truncate', children: children }), trailingIcon ? _jsx("span", { className: 'shrink-0', children: trailingIcon }) : null] })] }));

package/dist/esm/components/ps-card.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PallasoftClassNameService } from '@pallasoft/ps-design-system';
+const densityClassNames = {
+    compact: 'p-3',
+    normal: 'p-4',
+    spacious: 'p-5',
+};
+const variantClassNames = {
+    default: 'ps-card',
+    elevated: 'ps-card',
+    glass: 'ps-glass',
+    muted: 'ps-card-muted',
+};
+export const PsCard = ({ children, className, density = 'normal', eyebrow, title, trailing, variant = 'default', }) => (_jsxs("section", { className: PallasoftClassNameService.merge('min-w-0 overflow-hidden rounded-ps-card', variantClassNames[variant], densityClassNames[density], className), children: [title ? (_jsxs("div", { className: 'mb-3 flex min-w-0 items-start justify-between gap-3', children: [_jsxs("div", { className: 'min-w-0', children: [eyebrow ? _jsx("p", { className: 'ps-eyebrow break-words', children: eyebrow }) : null, _jsx("h2", { className: 'mt-1 break-words text-base font-bold text-ink', children: title })] }), trailing ? _jsx("div", { className: 'shrink-0', children: trailing }) : null] })) : null, children] }));

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

@@ -0,0 +1,80 @@
+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 { 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, {}) }));
+const PsSortableGridItem = ({ className, index, item, renderItem, }) => {
+    const { attributes, isDragging, listeners, setActivatorNodeRef, setNodeRef, transform, transition, } = useSortable({ id: item.id });
+    const rendered = renderItem({
+        handle: (_jsx(PsDraggableGridHandle, { attributes: attributes, label: item.label, listeners: listeners, setActivatorNodeRef: setActivatorNodeRef })),
+        index,
+        isDragging,
+        isOverlay: false,
+        item,
+    });
+    if (!rendered)
+        return null;
+    return (_jsx("div", { className: `${PsDraggableGridClasses.item} ${className} ${isDragging ? PsDraggableGridClasses.placeholder : ''}`, ref: setNodeRef, style: {
+            opacity: isDragging ? PsDraggableGridConfig.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 className = (item) => getItemClassName !== undefined ? getItemClassName(item) : '';
+    const activeIndex = items.findIndex((item) => item.id === activeId);
+    const activeItem = activeIndex >= 0 ? items[activeIndex] : null;
+    const handleDragEnd = (event) => {
+        setActiveId(null);
+        if (event.over === null || event.active.id === event.over.id)
+            return;
+        const fromIndex = items.findIndex((item) => item.id === event.active.id);
+        const toIndex = items.findIndex((item) => item.id === event.over?.id);
+        if (fromIndex < 0 || toIndex < 0)
+            return;
+        const nextItems = arrayMove(items, fromIndex, toIndex);
+        onReorder(nextItems);
+        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] }));
+};