@pallasoft/ps-core-components 2.19.0 → 2.20.0

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

@@ -0,0 +1,9 @@
+import { type ReactNode } from 'react';
+export interface PsCappedListProps<Item> {
+    getKey: (item: Item) => string;
+    items: Item[];
+    renderItem: (item: Item) => ReactNode;
+    showAllLabel: string;
+    visibleRows?: number;
+}
+export declare const PsCappedList: <Item>({ getKey, items, renderItem, showAllLabel, visibleRows, }: PsCappedListProps<Item>) => import("react").JSX.Element;

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

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsCappedList = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const ps_capped_list_config_1 = require("../constants/ps-capped-list-config");
+const ps_button_1 = require("./ps-button");
+const PsCappedList = ({ getKey, items, renderItem, showAllLabel, visibleRows = ps_capped_list_config_1.PsCappedListConfig.defaultVisibleRows, }) => {
+    const [isExpanded, setIsExpanded] = (0, react_1.useState)(false);
+    const isCapped = !isExpanded && items.length > visibleRows;
+    const shown = isCapped ? items.slice(0, visibleRows) : items;
+    return ((0, jsx_runtime_1.jsxs)("div", { className: 'flex flex-col gap-2', children: [(0, jsx_runtime_1.jsx)("ul", { className: '-my-2 flex flex-col divide-y divide-line', children: shown.map((item) => ((0, jsx_runtime_1.jsx)("li", { children: renderItem(item) }, getKey(item)))) }), isCapped ? ((0, jsx_runtime_1.jsx)(ps_button_1.PsButton, { className: 'self-start', onClick: () => setIsExpanded(true), size: 'compact', variant: 'ghost', children: showAllLabel })) : null] }));
+};
+exports.PsCappedList = PsCappedList;

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

@@ -0,0 +1,6 @@
+import type { PsDetailListItem } from '../models/ps-detail-list-item';
+export interface PsDetailListProps {
+    emptyLabel: string;
+    items: PsDetailListItem[];
+}
+export declare const PsDetailList: ({ emptyLabel, items }: PsDetailListProps) => import("react").JSX.Element;

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

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsDetailList = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const PsDetailList = ({ emptyLabel, items }) => {
+    const filled = items.filter((item) => item.value !== null && item.value !== '');
+    if (filled.length === 0)
+        return (0, jsx_runtime_1.jsx)("p", { className: 'text-sm text-ink/50', children: emptyLabel });
+    return ((0, jsx_runtime_1.jsx)("dl", { className: 'grid grid-cols-[repeat(auto-fill,minmax(11rem,1fr))] gap-x-6 gap-y-3', children: filled.map((item) => ((0, jsx_runtime_1.jsxs)("div", { className: 'min-w-0', children: [(0, jsx_runtime_1.jsx)("dt", { className: 'text-xs font-medium text-ink/50', children: item.label }), (0, jsx_runtime_1.jsx)("dd", { className: 'mt-0.5 text-sm break-words whitespace-pre-line text-ink', children: item.value })] }, item.label))) }));
+};
+exports.PsDetailList = PsDetailList;

package/dist/components/ps-form-footer.d.ts

@@ -0,0 +1,10 @@
+export interface PsFormFooterProps {
+    isSaving: boolean;
+    isSecondaryVisible?: boolean;
+    isSubmitDisabled: boolean;
+    onSecondary: () => void;
+    savingLabel: string;
+    secondaryLabel: string;
+    submitLabel: string;
+}
+export declare const PsFormFooter: ({ isSaving, isSecondaryVisible, isSubmitDisabled, onSecondary, savingLabel, secondaryLabel, submitLabel, }: PsFormFooterProps) => import("react").JSX.Element;

package/dist/components/ps-form-footer.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsFormFooter = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ps_button_1 = require("./ps-button");
+const PsFormFooter = ({ isSaving, isSecondaryVisible = true, isSubmitDisabled, onSecondary, savingLabel, secondaryLabel, submitLabel, }) => ((0, jsx_runtime_1.jsxs)("div", { className: 'sticky bottom-0 z-docked -mx-4 flex justify-end gap-2 border-t border-line bg-surface/90 px-4 py-3 backdrop-blur sm:bottom-4 sm:mx-0 sm:border-0 sm:bg-transparent sm:px-0 sm:py-0 sm:backdrop-blur-none', children: [isSecondaryVisible ? ((0, jsx_runtime_1.jsx)(ps_button_1.PsButton, { disabled: isSaving, onClick: onSecondary, type: 'button', variant: 'surface', children: secondaryLabel })) : null, (0, jsx_runtime_1.jsx)(ps_button_1.PsButton, { disabled: isSubmitDisabled || isSaving, isLoading: isSaving, loadingLabel: savingLabel, type: 'submit', variant: 'primary', children: submitLabel })] }));
+exports.PsFormFooter = PsFormFooter;

package/dist/components/ps-section-panel.d.ts

@@ -3,6 +3,8 @@ export interface PsSectionPanelProps {
     actions?: ReactNode;
     children: ReactNode;
     className?: string;
+    description?: string;
     title?: string;
+    variant?: 'bordered' | 'card' | 'plain';
 }
-export declare const PsSectionPanel: ({ actions, children, className, title }: PsSectionPanelProps) => import("react").JSX.Element;
+export declare const PsSectionPanel: ({ actions, children, className, description, title, variant, }: PsSectionPanelProps) => import("react").JSX.Element;

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

@@ -3,5 +3,5 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.PsSectionPanel = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const ps_design_system_1 = require("@pallasoft/ps-design-system");
-const PsSectionPanel = ({ actions, children, className, title }) => ((0, jsx_runtime_1.jsxs)("section", { className: ps_design_system_1.PallasoftClassNameService.merge('ps-section', className), children: [title || actions ? ((0, jsx_runtime_1.jsxs)("div", { className: 'flex min-h-10 flex-wrap items-center justify-between gap-3', children: [title ? (0, jsx_runtime_1.jsx)("h2", { className: 'text-base font-semibold text-ink', children: title }) : (0, jsx_runtime_1.jsx)("span", {}), actions ? (0, jsx_runtime_1.jsx)("div", { className: 'flex flex-wrap items-center gap-2', children: actions }) : null] })) : null, (0, jsx_runtime_1.jsx)("div", { className: 'flex min-w-0 flex-col gap-4', children: children })] }));
+const PsSectionPanel = ({ actions, children, className, description, title, variant = 'plain', }) => variant === 'card' ? ((0, jsx_runtime_1.jsxs)("section", { className: ps_design_system_1.PallasoftClassNameService.merge('rounded-ps-panel border border-line bg-surface p-5', className), children: [title ? (0, jsx_runtime_1.jsx)("h2", { className: 'mb-3 text-sm font-semibold text-ink', children: title }) : null, children] })) : variant === 'bordered' ? ((0, jsx_runtime_1.jsxs)("section", { className: ps_design_system_1.PallasoftClassNameService.merge('rounded-ps-panel border border-line bg-surface', className), children: [title || actions ? ((0, jsx_runtime_1.jsxs)("header", { className: 'flex min-h-14 items-center justify-between gap-3 border-b border-line px-5 py-3', children: [(0, jsx_runtime_1.jsxs)("div", { className: 'flex min-w-0 flex-col', children: [title ? (0, jsx_runtime_1.jsx)("h2", { className: 'text-base font-semibold text-ink', children: title }) : null, description ? (0, jsx_runtime_1.jsx)("p", { className: 'text-sm text-ink/60', children: description }) : null] }), actions ? (0, jsx_runtime_1.jsx)("div", { className: 'flex items-center gap-2', children: actions }) : null] })) : null, (0, jsx_runtime_1.jsx)("div", { className: 'flex flex-col gap-4 p-5', children: children })] })) : ((0, jsx_runtime_1.jsxs)("section", { className: ps_design_system_1.PallasoftClassNameService.merge('ps-section', className), children: [title || actions ? ((0, jsx_runtime_1.jsxs)("div", { className: 'flex min-h-10 flex-wrap items-center justify-between gap-3', children: [title ? (0, jsx_runtime_1.jsx)("h2", { className: 'text-base font-semibold text-ink', children: title }) : (0, jsx_runtime_1.jsx)("span", {}), actions ? (0, jsx_runtime_1.jsx)("div", { className: 'flex flex-wrap items-center gap-2', children: actions }) : null] })) : null, (0, jsx_runtime_1.jsx)("div", { className: 'flex min-w-0 flex-col gap-4', children: children })] }));
 exports.PsSectionPanel = PsSectionPanel;

package/dist/components/ps-start-highlight.d.ts

@@ -0,0 +1,9 @@
+import type { ReactNode } from 'react';
+export interface PsStartHighlightProps {
+    description: string;
+    icon: ReactNode;
+    label: string;
+    onClick: () => void;
+    title?: string;
+}
+export declare const PsStartHighlight: ({ description, icon, label, onClick, title, }: PsStartHighlightProps) => import("react").JSX.Element;

package/dist/components/ps-start-highlight.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsStartHighlight = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const PsStartHighlight = ({ description, icon, label, onClick, title, }) => ((0, jsx_runtime_1.jsxs)("div", { className: 'flex flex-col gap-2', children: [title === undefined ? null : ((0, jsx_runtime_1.jsx)("span", { className: 'text-xs font-semibold uppercase tracking-wide text-ink/40', children: title })), (0, jsx_runtime_1.jsxs)("button", { className: 'ps-focus-ring group flex items-center gap-4 rounded-2xl border border-primary/40 bg-gradient-to-br from-primary/20 via-primary/10 to-transparent p-4 text-left transition-colors hover:border-primary/70', onClick: onClick, type: 'button', children: [(0, jsx_runtime_1.jsx)("span", { className: 'flex h-11 w-11 shrink-0 items-center justify-center rounded-xl bg-primary text-white', children: icon }), (0, jsx_runtime_1.jsxs)("span", { className: 'flex min-w-0 flex-col gap-0.5', children: [(0, jsx_runtime_1.jsx)("span", { className: 'truncate text-base font-bold text-ink', title: label, children: label }), (0, jsx_runtime_1.jsx)("span", { className: 'text-sm leading-5 text-ink/60', children: description })] })] })] }));
+exports.PsStartHighlight = PsStartHighlight;

package/dist/components/ps-start-panel.d.ts

@@ -0,0 +1,11 @@
+import type { ReactNode } from 'react';
+import type { PsStartPanelStep } from '../models/ps-start-panel-step';
+export interface PsStartPanelProps {
+    actions?: ReactNode;
+    description: string;
+    highlight?: ReactNode;
+    preview?: ReactNode;
+    steps?: readonly PsStartPanelStep[];
+    title: string;
+}
+export declare const PsStartPanel: ({ actions, description, highlight, preview, steps, title, }: PsStartPanelProps) => import("react").JSX.Element;

package/dist/components/ps-start-panel.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsStartPanel = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ps_card_1 = require("./ps-card");
+const PsStartPanel = ({ actions, description, highlight, preview, steps, title, }) => ((0, jsx_runtime_1.jsx)(ps_card_1.PsCard, { density: 'spacious', children: (0, jsx_runtime_1.jsxs)("div", { className: preview
+            ? 'grid items-center gap-10 xl:grid-cols-[minmax(0,5fr)_minmax(0,7fr)]'
+            : 'grid items-center gap-10', children: [(0, jsx_runtime_1.jsxs)("div", { className: 'flex flex-col gap-7', children: [(0, jsx_runtime_1.jsxs)("div", { className: 'flex flex-col gap-3', children: [(0, jsx_runtime_1.jsx)("h2", { className: 'text-3xl font-extrabold leading-tight text-ink', children: title }), (0, jsx_runtime_1.jsx)("p", { className: 'max-w-md text-sm leading-6 text-ink/60', children: description })] }), highlight, steps === undefined ? null : ((0, jsx_runtime_1.jsx)("ol", { className: 'flex flex-col gap-4', children: steps.map((step, index) => ((0, jsx_runtime_1.jsxs)("li", { className: 'flex items-start gap-4', children: [(0, jsx_runtime_1.jsx)("span", { className: 'flex h-8 w-8 shrink-0 items-center justify-center rounded-full border border-line/60 text-sm font-bold text-ink/70', children: index + 1 }), (0, jsx_runtime_1.jsxs)("span", { className: 'flex min-w-0 flex-col gap-0.5', children: [(0, jsx_runtime_1.jsx)("span", { className: 'text-sm font-bold text-ink', children: step.title }), (0, jsx_runtime_1.jsx)("span", { className: 'text-sm leading-5 text-ink/55', children: step.description })] })] }, step.id))) })), actions] }), preview === undefined ? null : (0, jsx_runtime_1.jsx)("div", { className: 'relative hidden xl:block', children: preview })] }) }));
+exports.PsStartPanel = PsStartPanel;

package/dist/components/ps-start-preview.d.ts

@@ -0,0 +1,8 @@
+import type { ReactNode } from 'react';
+export interface PsStartPreviewProps {
+    badge?: string;
+    children: ReactNode;
+    note?: string;
+    title: string;
+}
+export declare const PsStartPreview: ({ badge, children, note, title }: PsStartPreviewProps) => import("react").JSX.Element;

package/dist/components/ps-start-preview.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsStartPreview = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const PsStartPreview = ({ badge, children, note, title }) => ((0, jsx_runtime_1.jsxs)("div", { className: 'rounded-2xl border border-line/60 bg-surface/60 p-5', children: [(0, jsx_runtime_1.jsxs)("div", { className: 'mb-4 flex items-center justify-between', children: [(0, jsx_runtime_1.jsx)("span", { className: 'text-sm font-bold text-ink', children: title }), badge === undefined ? null : ((0, jsx_runtime_1.jsx)("span", { className: 'rounded-full border border-warning/40 px-2.5 py-1 text-xs font-semibold text-warning', children: badge }))] }), (0, jsx_runtime_1.jsx)("ul", { className: 'flex flex-col', children: children }), note === undefined ? null : ((0, jsx_runtime_1.jsx)("p", { className: 'mt-4 border-t border-line/40 pt-4 text-xs leading-5 text-ink/45', children: note }))] }));
+exports.PsStartPreview = PsStartPreview;

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

@@ -0,0 +1,5 @@
+import type { PsStepListItem } from '../models/ps-step-list-item';
+export interface PsStepListProps {
+    steps: PsStepListItem[];
+}
+export declare const PsStepList: ({ steps }: PsStepListProps) => import("react").JSX.Element;

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

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsStepList = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ps_step_marker_class_names_1 = require("../constants/ps-step-marker-class-names");
+const ps_step_state_1 = require("../constants/ps-step-state");
+const PsStepList = ({ steps }) => ((0, jsx_runtime_1.jsx)("ol", { className: 'flex flex-col rounded-ps-panel border border-line bg-surface', children: steps.map((step, index) => ((0, jsx_runtime_1.jsxs)("li", { "aria-current": step.state === ps_step_state_1.PsStepState.current ? 'step' : undefined, className: 'relative flex gap-4 border-b border-line/70 px-5 py-4 last:border-0', children: [(0, jsx_runtime_1.jsx)("span", { className: `flex h-8 w-8 shrink-0 items-center justify-center rounded-full border text-sm font-semibold ${ps_step_marker_class_names_1.PsStepMarkerClassNames[step.state]}`, children: step.state === ps_step_state_1.PsStepState.done ? (0, jsx_runtime_1.jsx)("span", { "aria-hidden": 'true', children: "\u2713" }) : index + 1 }), (0, jsx_runtime_1.jsxs)("div", { className: 'flex min-w-0 flex-1 flex-col gap-3', children: [(0, jsx_runtime_1.jsxs)("div", { className: 'flex flex-col gap-2 sm:flex-row sm:items-start sm:justify-between', children: [(0, jsx_runtime_1.jsxs)("div", { className: 'min-w-0', children: [(0, jsx_runtime_1.jsx)("h3", { className: step.state === ps_step_state_1.PsStepState.upcoming
+                                            ? 'text-sm font-semibold text-ink/50'
+                                            : 'text-sm font-semibold text-ink', children: step.title }), (0, jsx_runtime_1.jsx)("p", { className: 'mt-0.5 text-sm text-ink/60', children: step.description })] }), step.actions ? ((0, jsx_runtime_1.jsx)("div", { className: 'flex shrink-0 flex-wrap items-center gap-2', children: step.actions })) : null] }), step.content ? (0, jsx_runtime_1.jsx)("div", { className: 'min-w-0', children: step.content }) : null] })] }, step.id))) }));
+exports.PsStepList = PsStepList;

package/dist/components/ps-summary-bar.d.ts

@@ -0,0 +1,5 @@
+import type { PsSummaryItem } from '../models/ps-summary-item';
+export interface PsSummaryBarProps {
+    items: PsSummaryItem[];
+}
+export declare const PsSummaryBar: ({ items }: PsSummaryBarProps) => import("react").JSX.Element;

package/dist/components/ps-summary-bar.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsSummaryBar = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const PsSummaryBar = ({ items }) => ((0, jsx_runtime_1.jsx)("dl", { className: 'grid grid-cols-2 gap-x-6 gap-y-4 rounded-ps-panel border border-line bg-surface px-5 py-4 sm:flex sm:flex-wrap sm:items-center sm:gap-x-10', children: items.map((item) => ((0, jsx_runtime_1.jsxs)("div", { className: 'flex min-w-0 flex-col gap-1', children: [(0, jsx_runtime_1.jsx)("dt", { className: 'text-xs font-medium uppercase tracking-wide text-ink/50', children: item.label }), (0, jsx_runtime_1.jsx)("dd", { className: item.emphasis
+                    ? 'truncate text-xl font-semibold tabular-nums text-ink'
+                    : 'truncate text-sm font-medium text-ink', children: item.value })] }, item.label))) }));
+exports.PsSummaryBar = PsSummaryBar;

package/dist/constants/ps-capped-list-config.d.ts

@@ -0,0 +1,3 @@
+export declare const PsCappedListConfig: {
+    readonly defaultVisibleRows: 5;
+};

package/dist/constants/ps-capped-list-config.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsCappedListConfig = void 0;
+exports.PsCappedListConfig = {
+    defaultVisibleRows: 5,
+};

package/dist/constants/ps-step-marker-class-names.d.ts

@@ -0,0 +1,2 @@
+import { PsStepState } from './ps-step-state';
+export declare const PsStepMarkerClassNames: Record<PsStepState, string>;

package/dist/constants/ps-step-marker-class-names.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsStepMarkerClassNames = void 0;
+const ps_step_state_1 = require("./ps-step-state");
+exports.PsStepMarkerClassNames = {
+    [ps_step_state_1.PsStepState.done]: 'border-success bg-success text-white',
+    [ps_step_state_1.PsStepState.current]: 'border-primary bg-primary/10 text-primary',
+    [ps_step_state_1.PsStepState.upcoming]: 'border-line bg-surface text-ink/40',
+};

package/dist/constants/ps-step-state.d.ts

@@ -0,0 +1,6 @@
+export declare const PsStepState: {
+    readonly current: "current";
+    readonly done: "done";
+    readonly upcoming: "upcoming";
+};
+export type PsStepState = (typeof PsStepState)[keyof typeof PsStepState];

package/dist/constants/ps-step-state.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsStepState = void 0;
+exports.PsStepState = {
+    current: 'current',
+    done: 'done',
+    upcoming: 'upcoming',
+};

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

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { PsCappedListConfig } from '../constants/ps-capped-list-config';
+import { PsButton } from './ps-button';
+export const PsCappedList = ({ getKey, items, renderItem, showAllLabel, visibleRows = PsCappedListConfig.defaultVisibleRows, }) => {
+    const [isExpanded, setIsExpanded] = useState(false);
+    const isCapped = !isExpanded && items.length > visibleRows;
+    const shown = isCapped ? items.slice(0, visibleRows) : items;
+    return (_jsxs("div", { className: 'flex flex-col gap-2', children: [_jsx("ul", { className: '-my-2 flex flex-col divide-y divide-line', children: shown.map((item) => (_jsx("li", { children: renderItem(item) }, getKey(item)))) }), isCapped ? (_jsx(PsButton, { className: 'self-start', onClick: () => setIsExpanded(true), size: 'compact', variant: 'ghost', children: showAllLabel })) : null] }));
+};

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

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const PsDetailList = ({ emptyLabel, items }) => {
+    const filled = items.filter((item) => item.value !== null && item.value !== '');
+    if (filled.length === 0)
+        return _jsx("p", { className: 'text-sm text-ink/50', children: emptyLabel });
+    return (_jsx("dl", { className: 'grid grid-cols-[repeat(auto-fill,minmax(11rem,1fr))] gap-x-6 gap-y-3', children: filled.map((item) => (_jsxs("div", { className: 'min-w-0', children: [_jsx("dt", { className: 'text-xs font-medium text-ink/50', children: item.label }), _jsx("dd", { className: 'mt-0.5 text-sm break-words whitespace-pre-line text-ink', children: item.value })] }, item.label))) }));
+};

package/dist/esm/components/ps-form-footer.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PsButton } from './ps-button';
+export const PsFormFooter = ({ isSaving, isSecondaryVisible = true, isSubmitDisabled, onSecondary, savingLabel, secondaryLabel, submitLabel, }) => (_jsxs("div", { className: 'sticky bottom-0 z-docked -mx-4 flex justify-end gap-2 border-t border-line bg-surface/90 px-4 py-3 backdrop-blur sm:bottom-4 sm:mx-0 sm:border-0 sm:bg-transparent sm:px-0 sm:py-0 sm:backdrop-blur-none', children: [isSecondaryVisible ? (_jsx(PsButton, { disabled: isSaving, onClick: onSecondary, type: 'button', variant: 'surface', children: secondaryLabel })) : null, _jsx(PsButton, { disabled: isSubmitDisabled || isSaving, isLoading: isSaving, loadingLabel: savingLabel, type: 'submit', variant: 'primary', children: submitLabel })] }));

package/dist/esm/components/ps-section-panel.js

@@ -1,3 +1,3 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { PallasoftClassNameService } from '@pallasoft/ps-design-system';
-export const PsSectionPanel = ({ actions, children, className, title }) => (_jsxs("section", { className: PallasoftClassNameService.merge('ps-section', className), children: [title || actions ? (_jsxs("div", { className: 'flex min-h-10 flex-wrap items-center justify-between gap-3', children: [title ? _jsx("h2", { className: 'text-base font-semibold text-ink', children: title }) : _jsx("span", {}), actions ? _jsx("div", { className: 'flex flex-wrap items-center gap-2', children: actions }) : null] })) : null, _jsx("div", { className: 'flex min-w-0 flex-col gap-4', children: children })] }));
+export const PsSectionPanel = ({ actions, children, className, description, title, variant = 'plain', }) => variant === 'card' ? (_jsxs("section", { className: PallasoftClassNameService.merge('rounded-ps-panel border border-line bg-surface p-5', className), children: [title ? _jsx("h2", { className: 'mb-3 text-sm font-semibold text-ink', children: title }) : null, children] })) : variant === 'bordered' ? (_jsxs("section", { className: PallasoftClassNameService.merge('rounded-ps-panel border border-line bg-surface', className), children: [title || actions ? (_jsxs("header", { className: 'flex min-h-14 items-center justify-between gap-3 border-b border-line px-5 py-3', children: [_jsxs("div", { className: 'flex min-w-0 flex-col', children: [title ? _jsx("h2", { className: 'text-base font-semibold text-ink', children: title }) : null, description ? _jsx("p", { className: 'text-sm text-ink/60', children: description }) : null] }), actions ? _jsx("div", { className: 'flex items-center gap-2', children: actions }) : null] })) : null, _jsx("div", { className: 'flex flex-col gap-4 p-5', children: children })] })) : (_jsxs("section", { className: PallasoftClassNameService.merge('ps-section', className), children: [title || actions ? (_jsxs("div", { className: 'flex min-h-10 flex-wrap items-center justify-between gap-3', children: [title ? _jsx("h2", { className: 'text-base font-semibold text-ink', children: title }) : _jsx("span", {}), actions ? _jsx("div", { className: 'flex flex-wrap items-center gap-2', children: actions }) : null] })) : null, _jsx("div", { className: 'flex min-w-0 flex-col gap-4', children: children })] }));

package/dist/esm/components/ps-start-highlight.js

@@ -0,0 +1,2 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const PsStartHighlight = ({ description, icon, label, onClick, title, }) => (_jsxs("div", { className: 'flex flex-col gap-2', children: [title === undefined ? null : (_jsx("span", { className: 'text-xs font-semibold uppercase tracking-wide text-ink/40', children: title })), _jsxs("button", { className: 'ps-focus-ring group flex items-center gap-4 rounded-2xl border border-primary/40 bg-gradient-to-br from-primary/20 via-primary/10 to-transparent p-4 text-left transition-colors hover:border-primary/70', onClick: onClick, type: 'button', children: [_jsx("span", { className: 'flex h-11 w-11 shrink-0 items-center justify-center rounded-xl bg-primary text-white', children: icon }), _jsxs("span", { className: 'flex min-w-0 flex-col gap-0.5', children: [_jsx("span", { className: 'truncate text-base font-bold text-ink', title: label, children: label }), _jsx("span", { className: 'text-sm leading-5 text-ink/60', children: description })] })] })] }));

package/dist/esm/components/ps-start-panel.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PsCard } from './ps-card';
+export const PsStartPanel = ({ actions, description, highlight, preview, steps, title, }) => (_jsx(PsCard, { density: 'spacious', children: _jsxs("div", { className: preview
+            ? 'grid items-center gap-10 xl:grid-cols-[minmax(0,5fr)_minmax(0,7fr)]'
+            : 'grid items-center gap-10', children: [_jsxs("div", { className: 'flex flex-col gap-7', children: [_jsxs("div", { className: 'flex flex-col gap-3', children: [_jsx("h2", { className: 'text-3xl font-extrabold leading-tight text-ink', children: title }), _jsx("p", { className: 'max-w-md text-sm leading-6 text-ink/60', children: description })] }), highlight, steps === undefined ? null : (_jsx("ol", { className: 'flex flex-col gap-4', children: steps.map((step, index) => (_jsxs("li", { className: 'flex items-start gap-4', children: [_jsx("span", { className: 'flex h-8 w-8 shrink-0 items-center justify-center rounded-full border border-line/60 text-sm font-bold text-ink/70', children: index + 1 }), _jsxs("span", { className: 'flex min-w-0 flex-col gap-0.5', children: [_jsx("span", { className: 'text-sm font-bold text-ink', children: step.title }), _jsx("span", { className: 'text-sm leading-5 text-ink/55', children: step.description })] })] }, step.id))) })), actions] }), preview === undefined ? null : _jsx("div", { className: 'relative hidden xl:block', children: preview })] }) }));

package/dist/esm/components/ps-start-preview.js

@@ -0,0 +1,2 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const PsStartPreview = ({ badge, children, note, title }) => (_jsxs("div", { className: 'rounded-2xl border border-line/60 bg-surface/60 p-5', children: [_jsxs("div", { className: 'mb-4 flex items-center justify-between', children: [_jsx("span", { className: 'text-sm font-bold text-ink', children: title }), badge === undefined ? null : (_jsx("span", { className: 'rounded-full border border-warning/40 px-2.5 py-1 text-xs font-semibold text-warning', children: badge }))] }), _jsx("ul", { className: 'flex flex-col', children: children }), note === undefined ? null : (_jsx("p", { className: 'mt-4 border-t border-line/40 pt-4 text-xs leading-5 text-ink/45', children: note }))] }));

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

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PsStepMarkerClassNames } from '../constants/ps-step-marker-class-names';
+import { PsStepState } from '../constants/ps-step-state';
+export const PsStepList = ({ steps }) => (_jsx("ol", { className: 'flex flex-col rounded-ps-panel border border-line bg-surface', children: steps.map((step, index) => (_jsxs("li", { "aria-current": step.state === PsStepState.current ? 'step' : undefined, className: 'relative flex gap-4 border-b border-line/70 px-5 py-4 last:border-0', children: [_jsx("span", { className: `flex h-8 w-8 shrink-0 items-center justify-center rounded-full border text-sm font-semibold ${PsStepMarkerClassNames[step.state]}`, children: step.state === PsStepState.done ? _jsx("span", { "aria-hidden": 'true', children: "\u2713" }) : index + 1 }), _jsxs("div", { className: 'flex min-w-0 flex-1 flex-col gap-3', children: [_jsxs("div", { className: 'flex flex-col gap-2 sm:flex-row sm:items-start sm:justify-between', children: [_jsxs("div", { className: 'min-w-0', children: [_jsx("h3", { className: step.state === PsStepState.upcoming
+                                            ? 'text-sm font-semibold text-ink/50'
+                                            : 'text-sm font-semibold text-ink', children: step.title }), _jsx("p", { className: 'mt-0.5 text-sm text-ink/60', children: step.description })] }), step.actions ? (_jsx("div", { className: 'flex shrink-0 flex-wrap items-center gap-2', children: step.actions })) : null] }), step.content ? _jsx("div", { className: 'min-w-0', children: step.content }) : null] })] }, step.id))) }));

package/dist/esm/components/ps-summary-bar.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const PsSummaryBar = ({ items }) => (_jsx("dl", { className: 'grid grid-cols-2 gap-x-6 gap-y-4 rounded-ps-panel border border-line bg-surface px-5 py-4 sm:flex sm:flex-wrap sm:items-center sm:gap-x-10', children: items.map((item) => (_jsxs("div", { className: 'flex min-w-0 flex-col gap-1', children: [_jsx("dt", { className: 'text-xs font-medium uppercase tracking-wide text-ink/50', children: item.label }), _jsx("dd", { className: item.emphasis
+                    ? 'truncate text-xl font-semibold tabular-nums text-ink'
+                    : 'truncate text-sm font-medium text-ink', children: item.value })] }, item.label))) }));

package/dist/esm/constants/ps-capped-list-config.js

@@ -0,0 +1,3 @@
+export const PsCappedListConfig = {
+    defaultVisibleRows: 5,
+};

package/dist/esm/constants/ps-step-marker-class-names.js

@@ -0,0 +1,6 @@
+import { PsStepState } from './ps-step-state';
+export const PsStepMarkerClassNames = {
+    [PsStepState.done]: 'border-success bg-success text-white',
+    [PsStepState.current]: 'border-primary bg-primary/10 text-primary',
+    [PsStepState.upcoming]: 'border-line bg-surface text-ink/40',
+};

package/dist/esm/constants/ps-step-state.js

@@ -0,0 +1,5 @@
+export const PsStepState = {
+    current: 'current',
+    done: 'done',
+    upcoming: 'upcoming',
+};

package/dist/esm/hooks/use-ps-dismissable.js

@@ -0,0 +1,25 @@
+import { useEffect, useRef } from 'react';
+export const usePsDismissable = (isOpen, onDismiss) => {
+    const containerRef = useRef(null);
+    useEffect(() => {
+        if (!isOpen)
+            return;
+        const handlePointer = (event) => {
+            if (event.target instanceof Node &&
+                containerRef.current &&
+                !containerRef.current.contains(event.target))
+                onDismiss();
+        };
+        const handleKey = (event) => {
+            if (event.key === 'Escape')
+                onDismiss();
+        };
+        document.addEventListener('pointerdown', handlePointer);
+        document.addEventListener('keydown', handleKey);
+        return () => {
+            document.removeEventListener('pointerdown', handlePointer);
+            document.removeEventListener('keydown', handleKey);
+        };
+    }, [isOpen, onDismiss]);
+    return containerRef;
+};

package/dist/esm/index.js

@@ -107,3 +107,17 @@ export * from './models/ps-link-tile-data';
 export * from './models/ps-metric-item-data';
 export * from './models/ps-theme-mode-state';
 export * from './models/ps-tool-card-data';
+export * from './components/ps-capped-list';
+export * from './components/ps-detail-list';
+export * from './components/ps-form-footer';
+export * from './components/ps-start-highlight';
+export * from './components/ps-start-panel';
+export * from './components/ps-start-preview';
+export * from './components/ps-step-list';
+export * from './components/ps-summary-bar';
+export * from './constants/ps-step-state';
+export * from './hooks/use-ps-dismissable';
+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';

package/dist/esm/models/ps-detail-list-item.js

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

package/dist/esm/models/ps-start-panel-step.js

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

package/dist/esm/models/ps-step-list-item.js

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

package/dist/esm/models/ps-summary-item.js

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

package/dist/hooks/use-ps-dismissable.d.ts

@@ -0,0 +1,2 @@
+import { type RefObject } from 'react';
+export declare const usePsDismissable: <Element extends HTMLElement>(isOpen: boolean, onDismiss: () => void) => RefObject<Element | null>;

package/dist/hooks/use-ps-dismissable.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePsDismissable = void 0;
+const react_1 = require("react");
+const usePsDismissable = (isOpen, onDismiss) => {
+    const containerRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        if (!isOpen)
+            return;
+        const handlePointer = (event) => {
+            if (event.target instanceof Node &&
+                containerRef.current &&
+                !containerRef.current.contains(event.target))
+                onDismiss();
+        };
+        const handleKey = (event) => {
+            if (event.key === 'Escape')
+                onDismiss();
+        };
+        document.addEventListener('pointerdown', handlePointer);
+        document.addEventListener('keydown', handleKey);
+        return () => {
+            document.removeEventListener('pointerdown', handlePointer);
+            document.removeEventListener('keydown', handleKey);
+        };
+    }, [isOpen, onDismiss]);
+    return containerRef;
+};
+exports.usePsDismissable = usePsDismissable;

package/dist/index.d.ts

@@ -107,3 +107,17 @@ export * from './models/ps-link-tile-data';
 export * from './models/ps-metric-item-data';
 export * from './models/ps-theme-mode-state';
 export * from './models/ps-tool-card-data';
+export * from './components/ps-capped-list';
+export * from './components/ps-detail-list';
+export * from './components/ps-form-footer';
+export * from './components/ps-start-highlight';
+export * from './components/ps-start-panel';
+export * from './components/ps-start-preview';
+export * from './components/ps-step-list';
+export * from './components/ps-summary-bar';
+export * from './constants/ps-step-state';
+export * from './hooks/use-ps-dismissable';
+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';

package/dist/index.js

@@ -123,3 +123,17 @@ __exportStar(require("./models/ps-link-tile-data"), exports);
 __exportStar(require("./models/ps-metric-item-data"), exports);
 __exportStar(require("./models/ps-theme-mode-state"), exports);
 __exportStar(require("./models/ps-tool-card-data"), exports);
+__exportStar(require("./components/ps-capped-list"), exports);
+__exportStar(require("./components/ps-detail-list"), exports);
+__exportStar(require("./components/ps-form-footer"), exports);
+__exportStar(require("./components/ps-start-highlight"), exports);
+__exportStar(require("./components/ps-start-panel"), exports);
+__exportStar(require("./components/ps-start-preview"), exports);
+__exportStar(require("./components/ps-step-list"), exports);
+__exportStar(require("./components/ps-summary-bar"), exports);
+__exportStar(require("./constants/ps-step-state"), exports);
+__exportStar(require("./hooks/use-ps-dismissable"), exports);
+__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);

package/dist/models/ps-detail-list-item.d.ts

@@ -0,0 +1,5 @@
+import type { ReactNode } from 'react';
+export interface PsDetailListItem {
+    label: string;
+    value: ReactNode;
+}

package/dist/models/ps-detail-list-item.js

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

package/dist/models/ps-start-panel-step.d.ts

@@ -0,0 +1,5 @@
+export interface PsStartPanelStep {
+    description: string;
+    id: string;
+    title: string;
+}

package/dist/models/ps-start-panel-step.js

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

package/dist/models/ps-step-list-item.d.ts

@@ -0,0 +1,10 @@
+import type { ReactNode } from 'react';
+import type { PsStepState } from '../constants/ps-step-state';
+export interface PsStepListItem {
+    actions?: ReactNode;
+    content?: ReactNode;
+    description: string;
+    id: string;
+    state: PsStepState;
+    title: string;
+}

package/dist/models/ps-step-list-item.js

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

package/dist/models/ps-summary-item.d.ts

@@ -0,0 +1,6 @@
+import type { ReactNode } from 'react';
+export interface PsSummaryItem {
+    emphasis?: boolean;
+    label: string;
+    value: ReactNode;
+}

package/dist/models/ps-summary-item.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.19.0",
+	"version": "2.20.0",
 	"private": false,
 	"main": "./dist/index.js",
 	"module": "./dist/esm/index.js",
@@ -28,7 +28,8 @@
 		"format:prettier": "npx prettier --write \"src/**/*.{ts,tsx,json,md}\"",
 		"lint:eslint": "npx eslint \"src/**/*.{ts,tsx}\"",
 		"lint:eslint:fix": "npx eslint --fix \"src/**/*.{ts,tsx}\"",
-		"release": "semantic-release"
+		"release": "semantic-release",
+		"test": "vitest run"
 	},
 	"dependencies": {
 		"@dnd-kit/core": "^6.3.1",
@@ -69,13 +70,15 @@
 		"eslint-plugin-import": "^2.32.0",
 		"eslint-plugin-prettier": "^5.5.4",
 		"husky": "^9.1.7",
+		"jsdom": "^30.1.1",
 		"lint-staged": "^16.2.7",
 		"prettier": "^3.6.2",
 		"react": "^19.3.0",
 		"react-dom": "^19.3.0",
 		"semantic-release": "^24.2.0",
 		"ts-node": "^10.9.2",
-		"typescript": "^5.9.3"
+		"typescript": "^5.9.3",
+		"vitest": "^3.2.7"
 	},
 	"publishConfig": {
 		"access": "public",