@pallasoft/ps-core-components 2.3.1 → 2.4.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/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/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] }));
+};

package/dist/esm/components/ps-empty-state.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PallasoftClassNameService } from '@pallasoft/ps-design-system';
+const getActionClassName = (variant = 'secondary') => {
+    if (variant === 'primary') {
+        return 'border-primary bg-primary text-white hover:bg-primary-dark';
+    }
+    return 'border-line bg-surface text-ink hover:border-primary/40 hover:text-primary';
+};
+export const PsEmptyState = ({ actions = [], badge, children, className, detail, description, eyebrow, icon, title, variant = 'page', }) => {
+    const isInline = variant === 'inline';
+    const Wrapper = isInline ? 'div' : 'main';
+    const Heading = isInline ? 'h3' : 'h1';
+    return (_jsx(Wrapper, { className: PallasoftClassNameService.merge(isInline
+            ? 'flex items-center justify-center rounded-ps-panel border border-dashed border-line bg-mist/40 px-6 py-10 text-ink'
+            : 'relative flex min-h-screen items-center justify-center bg-mist px-4 py-10 text-ink', className), children: _jsx("section", { className: isInline
+                ? 'relative w-full max-w-2xl text-center'
+                : 'ps-card relative w-full max-w-2xl p-6 sm:p-8', children: _jsxs("div", { className: isInline
+                    ? 'flex flex-col items-center gap-3'
+                    : 'flex flex-col gap-5 sm:flex-row sm:items-start', children: [icon ? _jsx("div", { className: 'ps-icon-surface h-14 w-14', children: icon }) : null, _jsxs("div", { className: isInline ? 'min-w-0' : 'min-w-0 flex-1', children: [_jsxs("div", { className: isInline
+                                    ? 'flex flex-wrap items-center justify-center gap-2'
+                                    : 'flex flex-wrap items-center gap-2', children: [eyebrow ? (_jsx("p", { className: 'text-xs font-semibold uppercase tracking-[0.22em] text-primary', children: eyebrow })) : null, eyebrow && badge ? _jsx("span", { className: 'h-1 w-1 rounded-full bg-line' }) : null, badge ? (_jsx("p", { className: 'text-xs font-semibold uppercase tracking-[0.22em] text-ink/40', children: badge })) : null] }), _jsx(Heading, { className: isInline
+                                    ? 'text-base font-semibold text-ink'
+                                    : 'mt-3 text-3xl font-semibold tracking-tight sm:text-4xl', children: title }), description ? (_jsx("p", { className: isInline
+                                    ? 'mt-1.5 text-sm leading-6 text-ink/60'
+                                    : 'mt-3 text-sm leading-6 text-ink/60', children: description })) : null, detail ? (_jsx("p", { className: 'mt-4 rounded-2xl border border-line bg-mist px-4 py-3 text-left text-xs leading-5 text-ink/60', children: detail })) : null, children ? _jsx("div", { className: 'mt-5 flex justify-center', children: children }) : null, actions.length > 0 ? (_jsx("div", { className: isInline
+                                    ? 'mt-5 flex flex-col justify-center gap-2 sm:flex-row'
+                                    : 'mt-6 flex flex-col gap-2 sm:flex-row', children: actions.map((action) => (_jsx("a", { className: PallasoftClassNameService.merge('ps-focus-ring ps-pressable inline-flex items-center justify-center rounded-ps-control border px-4 py-3 text-sm font-semibold', getActionClassName(action.variant)), href: action.href, rel: action.rel, target: action.target, children: action.label }, `${action.href}-${action.label}`))) })) : null] })] }) }) }));
+};

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

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PallasoftClassNameService } from '@pallasoft/ps-design-system';
+import { PsButton } from './ps-button';
+const positionClassNames = {
+    'bottom-right': 'bottom-6 right-6',
+    'bottom-left': 'bottom-6 left-6',
+    'bottom-center': 'bottom-6 left-1/2 -translate-x-1/2',
+};
+export const PsFab = ({ className, position = 'bottom-right', ...props }) => (_jsx(PsButton, { size: 'large', variant: 'primary', className: PallasoftClassNameService.merge('fixed z-docked h-14 w-14 shrink-0 !px-0 shadow-lg', positionClassNames[position], className), ...props }));

package/dist/esm/components/ps-infinite-scroll.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import InfiniteScroll from 'react-infinite-scroll-component';
+import { PsSpinner } from './ps-spinner';
+const defaultLoader = (_jsx("div", { className: 'flex w-full justify-center py-8', children: _jsx(PsSpinner, {}) }));
+export const PsInfiniteScroll = ({ children, className, dataLength, hasMore, loader, next, }) => (_jsx(InfiniteScroll, { className: className, dataLength: dataLength, hasMore: hasMore, loader: loader !== null && loader !== undefined ? loader : defaultLoader, next: next, children: children }));

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

@@ -0,0 +1,3 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PsLayerContext } from '../contexts/ps-layer-context';
+export const PsLayer = ({ children, zIndex }) => (_jsx(PsLayerContext.Provider, { value: zIndex, children: children }));

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

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PallasoftClassNameService } from '@pallasoft/ps-design-system';
+const densityClassNames = {
+    compact: 'py-2',
+    normal: 'py-2.5',
+};
+const variantClassNames = {
+    card: 'ps-surface px-3',
+    row: 'border-b border-line/70 px-0 last:border-b-0',
+};
+export const PsListTile = ({ children, className, density = 'normal', eyebrow, isPrivateTitle = false, subtitle, title, variant = 'row', }) => (_jsxs("div", { className: PallasoftClassNameService.merge('min-w-0 overflow-hidden', variantClassNames[variant], densityClassNames[density], className), children: [eyebrow ? _jsx("p", { className: 'ps-eyebrow break-words', children: eyebrow }) : null, _jsx("p", { className: PallasoftClassNameService.merge('break-words text-sm font-semibold text-ink', eyebrow && 'mt-1', isPrivateTitle && 'private-number'), children: title }), subtitle ? (_jsx("p", { className: 'mt-1 break-words text-sm leading-5 text-slate-500', children: subtitle })) : null, children] }));

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

@@ -0,0 +1,3 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PallasoftClassNameService } from '@pallasoft/ps-design-system';
+export const PsMetricCard = ({ changeLabel, className, icon, label, value }) => (_jsx("section", { className: PallasoftClassNameService.merge('ps-metric-card min-w-0 p-3.5 sm:p-4', className), children: _jsxs("div", { className: 'flex items-start justify-between gap-3', children: [_jsxs("div", { className: 'min-w-0', children: [_jsx("p", { className: 'ps-eyebrow truncate', children: label }), _jsx("p", { className: 'mt-2 truncate text-2xl font-semibold text-ink', children: value }), changeLabel ? _jsx("p", { className: 'mt-1 text-sm text-slate-500', children: changeLabel }) : null] }), icon ? (_jsx("div", { className: 'flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-primary-soft text-primary', children: icon })) : null] }) }));

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

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PallasoftClassNameService, PallasoftZIndex } from '@pallasoft/ps-design-system';
+import { PsNavigationProgressConfig } from '../constants/ps-navigation-progress-config';
+import { usePsNavigationProgress } from '../hooks/use-ps-navigation-progress';
+export const PsNavigationProgress = ({ className, color = PsNavigationProgressConfig.defaultColor, height = PsNavigationProgressConfig.defaultHeight, isLoading, label = PsNavigationProgressConfig.defaultLabel, progress, shadow = true, }) => {
+    const { isAnimated, isVisible, width } = usePsNavigationProgress(isLoading !== undefined
+        ? isLoading
+        : progress !== undefined &&
+            progress > 0 &&
+            progress < PsNavigationProgressConfig.completeWidth);
+    return (_jsx("div", { "aria-hidden": isVisible ? undefined : 'true', "aria-label": label, "aria-valuemax": 100, "aria-valuemin": 0, "aria-valuenow": Math.round(width), className: PallasoftClassNameService.merge('pointer-events-none fixed inset-x-0 top-0', className), role: 'progressbar', style: { height, zIndex: PallasoftZIndex.Toast }, children: _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: isAnimated
+                    ? `${PsNavigationProgressConfig.transitionMs}ms, ${PsNavigationProgressConfig.fadeMs}ms`
+                    : '0ms',
+                transitionProperty: 'width, opacity',
+                width: `${Math.min(Math.max(width, 0), 100)}%`,
+            } }) }));
+};

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

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PallasoftClassNameService } from '@pallasoft/ps-design-system';
+const toneClassNames = {
+    danger: 'bg-rose-50 text-rose-700 ring-rose-100 dark:bg-rose-500/18 dark:text-rose-100 dark:ring-rose-300/22',
+    neutral: 'bg-slate-100 text-slate-700 ring-slate-200 dark:bg-white/10 dark:text-slate-100 dark:ring-white/12',
+    primary: 'bg-primary-soft text-ink ring-primary/12 dark:bg-primary/22 dark:text-white dark:ring-primary/32',
+    success: 'bg-emerald-50 text-emerald-700 ring-emerald-100 dark:bg-emerald-400/18 dark:text-emerald-50 dark:ring-emerald-200/22',
+    warning: 'bg-amber-50 text-amber-800 ring-amber-100 dark:bg-amber-400/18 dark:text-amber-50 dark:ring-amber-200/24',
+};
+export const PsPill = ({ children, className, tone = 'neutral' }) => (_jsx("span", { className: PallasoftClassNameService.merge('inline-flex min-h-8 min-w-[5.5rem] max-w-full items-center justify-center rounded-full px-5 py-1 text-center text-[0.72rem] font-black capitalize tracking-[0.01em] ring-1 ring-inset', toneClassNames[tone], className), children: _jsx("span", { className: 'min-w-0 break-words', children: children }) }));