@pallasoft/ps-core-components 2.47.1 → 2.48.0

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

@@ -1,5 +1,9 @@
 export interface PsFormPageSkeletonProps {
+    hasActions?: boolean;
+    hasBackLink?: boolean;
+    isNarrow?: boolean;
     loadingLabel: string;
     title?: string;
+    variant?: 'bordered' | 'card' | 'plain';
 }
-export declare const PsFormPageSkeleton: ({ loadingLabel, title }: PsFormPageSkeletonProps) => import("react").JSX.Element;
+export declare const PsFormPageSkeleton: ({ hasActions, hasBackLink, isNarrow, loadingLabel, title, variant, }: PsFormPageSkeletonProps) => import("react").JSX.Element;

package/dist/components/ps-form-page-skeleton.js

@@ -6,5 +6,5 @@ const ps_page_skeleton_config_1 = require("../constants/ps-page-skeleton-config"
 const ps_form_fields_skeleton_1 = require("./ps-form-fields-skeleton");
 const ps_page_skeleton_1 = require("./ps-page-skeleton");
 const ps_section_panel_skeleton_1 = require("./ps-section-panel-skeleton");
-const PsFormPageSkeleton = ({ loadingLabel, title }) => ((0, jsx_runtime_1.jsx)(ps_page_skeleton_1.PsPageSkeleton, { hasActions: true, loadingLabel: loadingLabel, title: title, children: ps_page_skeleton_config_1.PsPageSkeletonConfig.formSections.map((section) => ((0, jsx_runtime_1.jsx)(ps_section_panel_skeleton_1.PsSectionPanelSkeleton, { children: (0, jsx_runtime_1.jsx)(ps_form_fields_skeleton_1.PsFormFieldsSkeleton, {}) }, section))) }));
+const PsFormPageSkeleton = ({ hasActions = true, hasBackLink = false, isNarrow = false, loadingLabel, title, variant = 'plain', }) => ((0, jsx_runtime_1.jsx)(ps_page_skeleton_1.PsPageSkeleton, { hasActions: hasActions, hasBackLink: hasBackLink, isNarrow: isNarrow, loadingLabel: loadingLabel, title: title, children: ps_page_skeleton_config_1.PsPageSkeletonConfig.formSections.map((section) => ((0, jsx_runtime_1.jsx)(ps_section_panel_skeleton_1.PsSectionPanelSkeleton, { variant: variant, children: (0, jsx_runtime_1.jsx)(ps_form_fields_skeleton_1.PsFormFieldsSkeleton, {}) }, section))) }));
 exports.PsFormPageSkeleton = PsFormPageSkeleton;

package/dist/components/ps-metric-grid-skeleton.js

@@ -2,6 +2,10 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PsMetricGridSkeleton = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const ps_metric_grid_config_1 = require("../constants/ps-metric-grid-config");
 const ps_metric_card_1 = require("./ps-metric-card");
-const PsMetricGridSkeleton = ({ count }) => ((0, jsx_runtime_1.jsx)("div", { className: 'grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-4', children: Array.from({ length: count }, (_, index) => ((0, jsx_runtime_1.jsx)(ps_metric_card_1.PsMetricCard, { isLoading: true, label: '', value: '' }, index))) }));
+const PsMetricGridSkeleton = ({ count }) => {
+    const columns = ps_metric_grid_config_1.PsMetricGridColumns[Math.min(count, ps_metric_grid_config_1.PsMetricGridConfig.maxColumns)];
+    return ((0, jsx_runtime_1.jsx)("div", { className: `grid grid-cols-1 gap-3 ${columns === undefined ? ps_metric_grid_config_1.PsMetricGridColumns[ps_metric_grid_config_1.PsMetricGridConfig.defaultColumns] : columns}`, children: Array.from({ length: count }, (_, index) => ((0, jsx_runtime_1.jsx)(ps_metric_card_1.PsMetricCard, { isLoading: true, label: '', value: '' }, index))) }));
+};
 exports.PsMetricGridSkeleton = PsMetricGridSkeleton;

package/dist/components/ps-page-header.d.ts

@@ -3,6 +3,7 @@ import { type PsBackLinkProps } from './ps-back-link';
 export interface PsPageHeaderProps {
     actions?: ReactNode;
     backLink?: PsBackLinkProps;
+    leading?: ReactNode;
     title: string;
 }
-export declare const PsPageHeader: ({ actions, backLink, title }: PsPageHeaderProps) => import("react").JSX.Element;
+export declare const PsPageHeader: ({ actions, backLink, leading, title }: PsPageHeaderProps) => import("react").JSX.Element;

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

@@ -4,5 +4,5 @@ exports.PsPageHeader = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const ps_back_link_1 = require("./ps-back-link");
 const ps_section_header_1 = require("./ps-section-header");
-const PsPageHeader = ({ actions, backLink, title }) => ((0, jsx_runtime_1.jsx)(ps_section_header_1.PsSectionHeader, { leading: backLink ? (0, jsx_runtime_1.jsx)(ps_back_link_1.PsBackLink, { ...backLink }) : undefined, title: title, trailing: actions ? ((0, jsx_runtime_1.jsx)("div", { className: 'flex flex-wrap items-center justify-end gap-2', children: actions })) : undefined }));
+const PsPageHeader = ({ actions, backLink, leading, title }) => ((0, jsx_runtime_1.jsx)(ps_section_header_1.PsSectionHeader, { leading: backLink ? (0, jsx_runtime_1.jsx)(ps_back_link_1.PsBackLink, { ...backLink }) : leading, title: title, trailing: actions ? ((0, jsx_runtime_1.jsx)("div", { className: 'flex flex-wrap items-center justify-end gap-2', children: actions })) : undefined }));
 exports.PsPageHeader = PsPageHeader;

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

@@ -3,8 +3,9 @@ export interface PsPageSkeletonProps {
     actions?: ReactNode;
     children: ReactNode;
     hasActions?: boolean;
+    hasBackLink?: boolean;
     isNarrow?: boolean;
     loadingLabel: string;
     title?: string;
 }
-export declare const PsPageSkeleton: ({ actions, children, hasActions, isNarrow, loadingLabel, title, }: PsPageSkeletonProps) => import("react").JSX.Element;
+export declare const PsPageSkeleton: ({ actions, children, hasActions, hasBackLink, isNarrow, loadingLabel, title, }: PsPageSkeletonProps) => import("react").JSX.Element;

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

@@ -8,5 +8,8 @@ const ps_page_layout_1 = require("./ps-page-layout");
 const ps_page_stack_1 = require("./ps-page-stack");
 const ps_section_header_1 = require("./ps-section-header");
 const ps_skeleton_1 = require("./ps-skeleton");
-const PsPageSkeleton = ({ actions, children, hasActions = false, isNarrow = false, loadingLabel, title, }) => ((0, jsx_runtime_1.jsx)(ps_page_layout_1.PsPageLayout, { isNarrow: isNarrow, children: (0, jsx_runtime_1.jsxs)(ps_page_stack_1.PsPageStack, { children: [title === undefined ? ((0, jsx_runtime_1.jsx)(ps_section_header_1.PsSectionHeader, { isLoading: true, title: loadingLabel, trailing: hasActions })) : ((0, jsx_runtime_1.jsx)(ps_page_header_1.PsPageHeader, { actions: actions !== undefined ? (actions) : hasActions ? ((0, jsx_runtime_1.jsx)(ps_skeleton_1.PsSkeleton, { shape: ps_skeleton_shape_1.PsSkeletonShape.Button })) : undefined, title: title })), children] }) }));
+const PsPageSkeleton = ({ actions, children, hasActions = false, hasBackLink = false, isNarrow = false, loadingLabel, title, }) => {
+    const backLink = hasBackLink ? (0, jsx_runtime_1.jsx)(ps_skeleton_1.PsSkeleton, { className: 'h-5 w-32' }) : undefined;
+    return ((0, jsx_runtime_1.jsx)(ps_page_layout_1.PsPageLayout, { isNarrow: isNarrow, children: (0, jsx_runtime_1.jsxs)(ps_page_stack_1.PsPageStack, { children: [title === undefined ? ((0, jsx_runtime_1.jsx)(ps_section_header_1.PsSectionHeader, { isLoading: true, leading: backLink, title: loadingLabel, trailing: hasActions })) : ((0, jsx_runtime_1.jsx)(ps_page_header_1.PsPageHeader, { actions: actions !== undefined ? (actions) : hasActions ? ((0, jsx_runtime_1.jsx)(ps_skeleton_1.PsSkeleton, { shape: ps_skeleton_shape_1.PsSkeletonShape.Button })) : undefined, leading: backLink, title: title })), children] }) }));
+};
 exports.PsPageSkeleton = PsPageSkeleton;

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

@@ -5,5 +5,5 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const ps_skeleton_shape_1 = require("../constants/ps-skeleton-shape");
 const ps_skeleton_1 = require("./ps-skeleton");
 const ps_skeleton_group_1 = require("./ps-skeleton-group");
-const PsSectionHeader = ({ description, eyebrow, isLoading = false, leading, title, trailing, }) => isLoading ? ((0, jsx_runtime_1.jsxs)(ps_skeleton_group_1.PsSkeletonGroup, { className: 'flex flex-wrap items-end justify-between gap-x-4 gap-y-3', label: title, children: [(0, jsx_runtime_1.jsxs)("div", { className: 'flex min-w-0 flex-1 basis-auto flex-col gap-2', children: [eyebrow ? (0, jsx_runtime_1.jsx)(ps_skeleton_1.PsSkeleton, { className: 'h-2.5 w-24' }) : null, (0, jsx_runtime_1.jsx)(ps_skeleton_1.PsSkeleton, { className: 'h-6 w-52' }), description ? (0, jsx_runtime_1.jsx)(ps_skeleton_1.PsSkeleton, { className: 'h-3 w-72' }) : null] }), trailing ? (0, jsx_runtime_1.jsx)(ps_skeleton_1.PsSkeleton, { shape: ps_skeleton_shape_1.PsSkeletonShape.Button }) : null] })) : ((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: 'flex w-full shrink-0 items-center justify-end sm:ml-auto sm:w-auto', children: trailing })) : null] }));
+const PsSectionHeader = ({ description, eyebrow, isLoading = false, leading, title, trailing, }) => isLoading ? ((0, jsx_runtime_1.jsxs)(ps_skeleton_group_1.PsSkeletonGroup, { className: 'flex flex-wrap items-end justify-between gap-x-4 gap-y-3', label: title, 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)(ps_skeleton_1.PsSkeleton, { className: 'h-2.5 w-24' }) : null, (0, jsx_runtime_1.jsx)(ps_skeleton_1.PsSkeleton, { className: 'h-6 w-52' }), description ? (0, jsx_runtime_1.jsx)(ps_skeleton_1.PsSkeleton, { className: 'h-3 w-72' }) : null] }), trailing ? (0, jsx_runtime_1.jsx)(ps_skeleton_1.PsSkeleton, { shape: ps_skeleton_shape_1.PsSkeletonShape.Button }) : null] })) : ((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: 'flex w-full shrink-0 items-center justify-end sm:ml-auto sm:w-auto', children: trailing })) : null] }));
 exports.PsSectionHeader = PsSectionHeader;

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

@@ -2,5 +2,6 @@ import type { ReactNode } from 'react';
 export interface PsSectionPanelSkeletonProps {
     children: ReactNode;
     title?: string;
+    variant?: 'bordered' | 'card' | 'plain';
 }
-export declare const PsSectionPanelSkeleton: ({ children, title }: PsSectionPanelSkeletonProps) => import("react").JSX.Element;
+export declare const PsSectionPanelSkeleton: ({ children, title, variant, }: PsSectionPanelSkeletonProps) => import("react").JSX.Element;

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

@@ -3,5 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.PsSectionPanelSkeleton = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const ps_skeleton_1 = require("./ps-skeleton");
-const PsSectionPanelSkeleton = ({ children, title }) => ((0, jsx_runtime_1.jsxs)("section", { className: 'ps-section', children: [(0, jsx_runtime_1.jsx)("div", { className: 'flex min-h-10 items-center', children: title === undefined ? ((0, jsx_runtime_1.jsx)(ps_skeleton_1.PsSkeleton, { className: 'h-4 w-44' })) : ((0, jsx_runtime_1.jsx)("h2", { className: 'text-base font-semibold text-ink', children: title })) }), (0, jsx_runtime_1.jsx)("div", { className: 'flex min-w-0 flex-col gap-4', children: children })] }));
+const PsSectionPanelSkeleton = ({ children, title, variant = 'plain', }) => {
+    const heading = title === undefined ? ((0, jsx_runtime_1.jsx)(ps_skeleton_1.PsSkeleton, { className: 'h-4 w-44' })) : ((0, jsx_runtime_1.jsx)("h2", { className: 'text-base font-semibold text-ink', children: title }));
+    return variant === 'bordered' ? ((0, jsx_runtime_1.jsxs)("section", { className: 'rounded-ps-panel border border-line bg-surface', children: [(0, jsx_runtime_1.jsx)("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.jsx)("div", { className: 'flex min-w-0 flex-col', children: heading }) }), (0, jsx_runtime_1.jsx)("div", { className: 'flex flex-col gap-4 p-5', children: children })] })) : variant === 'card' ? ((0, jsx_runtime_1.jsxs)("section", { className: 'rounded-ps-panel border border-line bg-surface p-5', children: [(0, jsx_runtime_1.jsx)("div", { className: 'mb-3', children: heading }), children] })) : ((0, jsx_runtime_1.jsxs)("section", { className: 'ps-section', children: [(0, jsx_runtime_1.jsx)("div", { className: 'flex min-h-10 items-center', children: heading }), (0, jsx_runtime_1.jsx)("div", { className: 'flex min-w-0 flex-col gap-4', children: children })] }));
+};
 exports.PsSectionPanelSkeleton = PsSectionPanelSkeleton;

package/dist/esm/components/ps-form-page-skeleton.js

@@ -3,4 +3,4 @@ import { PsPageSkeletonConfig } from '../constants/ps-page-skeleton-config.js';
 import { PsFormFieldsSkeleton } from './ps-form-fields-skeleton.js';
 import { PsPageSkeleton } from './ps-page-skeleton.js';
 import { PsSectionPanelSkeleton } from './ps-section-panel-skeleton.js';
-export const PsFormPageSkeleton = ({ loadingLabel, title }) => (_jsx(PsPageSkeleton, { hasActions: true, loadingLabel: loadingLabel, title: title, children: PsPageSkeletonConfig.formSections.map((section) => (_jsx(PsSectionPanelSkeleton, { children: _jsx(PsFormFieldsSkeleton, {}) }, section))) }));
+export const PsFormPageSkeleton = ({ hasActions = true, hasBackLink = false, isNarrow = false, loadingLabel, title, variant = 'plain', }) => (_jsx(PsPageSkeleton, { hasActions: hasActions, hasBackLink: hasBackLink, isNarrow: isNarrow, loadingLabel: loadingLabel, title: title, children: PsPageSkeletonConfig.formSections.map((section) => (_jsx(PsSectionPanelSkeleton, { variant: variant, children: _jsx(PsFormFieldsSkeleton, {}) }, section))) }));

package/dist/esm/components/ps-metric-grid-skeleton.js

@@ -1,3 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { PsMetricGridColumns, PsMetricGridConfig } from '../constants/ps-metric-grid-config.js';
 import { PsMetricCard } from './ps-metric-card.js';
-export const PsMetricGridSkeleton = ({ count }) => (_jsx("div", { className: 'grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-4', children: Array.from({ length: count }, (_, index) => (_jsx(PsMetricCard, { isLoading: true, label: '', value: '' }, index))) }));
+export const PsMetricGridSkeleton = ({ count }) => {
+    const columns = PsMetricGridColumns[Math.min(count, PsMetricGridConfig.maxColumns)];
+    return (_jsx("div", { className: `grid grid-cols-1 gap-3 ${columns === undefined ? PsMetricGridColumns[PsMetricGridConfig.defaultColumns] : columns}`, children: Array.from({ length: count }, (_, index) => (_jsx(PsMetricCard, { isLoading: true, label: '', value: '' }, index))) }));
+};

package/dist/esm/components/ps-page-header.js

@@ -1,4 +1,4 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { PsBackLink } from './ps-back-link.js';
 import { PsSectionHeader } from './ps-section-header.js';
-export const PsPageHeader = ({ actions, backLink, title }) => (_jsx(PsSectionHeader, { leading: backLink ? _jsx(PsBackLink, { ...backLink }) : undefined, title: title, trailing: actions ? (_jsx("div", { className: 'flex flex-wrap items-center justify-end gap-2', children: actions })) : undefined }));
+export const PsPageHeader = ({ actions, backLink, leading, title }) => (_jsx(PsSectionHeader, { leading: backLink ? _jsx(PsBackLink, { ...backLink }) : leading, title: title, trailing: actions ? (_jsx("div", { className: 'flex flex-wrap items-center justify-end gap-2', children: actions })) : undefined }));

package/dist/esm/components/ps-page-skeleton.js

@@ -5,4 +5,7 @@ import { PsPageLayout } from './ps-page-layout.js';
 import { PsPageStack } from './ps-page-stack.js';
 import { PsSectionHeader } from './ps-section-header.js';
 import { PsSkeleton } from './ps-skeleton.js';
-export const PsPageSkeleton = ({ actions, children, hasActions = false, isNarrow = false, loadingLabel, title, }) => (_jsx(PsPageLayout, { isNarrow: isNarrow, children: _jsxs(PsPageStack, { children: [title === undefined ? (_jsx(PsSectionHeader, { isLoading: true, title: loadingLabel, trailing: hasActions })) : (_jsx(PsPageHeader, { actions: actions !== undefined ? (actions) : hasActions ? (_jsx(PsSkeleton, { shape: PsSkeletonShape.Button })) : undefined, title: title })), children] }) }));
+export const PsPageSkeleton = ({ actions, children, hasActions = false, hasBackLink = false, isNarrow = false, loadingLabel, title, }) => {
+    const backLink = hasBackLink ? _jsx(PsSkeleton, { className: 'h-5 w-32' }) : undefined;
+    return (_jsx(PsPageLayout, { isNarrow: isNarrow, children: _jsxs(PsPageStack, { children: [title === undefined ? (_jsx(PsSectionHeader, { isLoading: true, leading: backLink, title: loadingLabel, trailing: hasActions })) : (_jsx(PsPageHeader, { actions: actions !== undefined ? (actions) : hasActions ? (_jsx(PsSkeleton, { shape: PsSkeletonShape.Button })) : undefined, leading: backLink, title: title })), children] }) }));
+};

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

@@ -2,4 +2,4 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { PsSkeletonShape } from '../constants/ps-skeleton-shape.js';
 import { PsSkeleton } from './ps-skeleton.js';
 import { PsSkeletonGroup } from './ps-skeleton-group.js';
-export const PsSectionHeader = ({ description, eyebrow, isLoading = false, leading, title, trailing, }) => isLoading ? (_jsxs(PsSkeletonGroup, { className: 'flex flex-wrap items-end justify-between gap-x-4 gap-y-3', label: title, children: [_jsxs("div", { className: 'flex min-w-0 flex-1 basis-auto flex-col gap-2', children: [eyebrow ? _jsx(PsSkeleton, { className: 'h-2.5 w-24' }) : null, _jsx(PsSkeleton, { className: 'h-6 w-52' }), description ? _jsx(PsSkeleton, { className: 'h-3 w-72' }) : null] }), trailing ? _jsx(PsSkeleton, { shape: PsSkeletonShape.Button }) : null] })) : (_jsxs("div", { className: 'flex flex-wrap items-end justify-between gap-x-4 gap-y-3', children: [_jsxs("div", { className: 'flex min-w-0 flex-1 basis-auto flex-col gap-2', children: [leading, eyebrow ? (_jsx("p", { className: 'text-[0.68rem] font-semibold uppercase tracking-[0.22em] text-ink/50', children: eyebrow })) : null, _jsx("h1", { className: 'break-words text-xl font-extrabold text-ink sm:text-2xl', children: title }), description ? (_jsx("p", { className: 'max-w-3xl text-sm leading-6 text-ink/60', children: description })) : null] }), trailing ? (_jsx("div", { className: 'flex w-full shrink-0 items-center justify-end sm:ml-auto sm:w-auto', children: trailing })) : null] }));
+export const PsSectionHeader = ({ description, eyebrow, isLoading = false, leading, title, trailing, }) => isLoading ? (_jsxs(PsSkeletonGroup, { className: 'flex flex-wrap items-end justify-between gap-x-4 gap-y-3', label: title, children: [_jsxs("div", { className: 'flex min-w-0 flex-1 basis-auto flex-col gap-2', children: [leading, eyebrow ? _jsx(PsSkeleton, { className: 'h-2.5 w-24' }) : null, _jsx(PsSkeleton, { className: 'h-6 w-52' }), description ? _jsx(PsSkeleton, { className: 'h-3 w-72' }) : null] }), trailing ? _jsx(PsSkeleton, { shape: PsSkeletonShape.Button }) : null] })) : (_jsxs("div", { className: 'flex flex-wrap items-end justify-between gap-x-4 gap-y-3', children: [_jsxs("div", { className: 'flex min-w-0 flex-1 basis-auto flex-col gap-2', children: [leading, eyebrow ? (_jsx("p", { className: 'text-[0.68rem] font-semibold uppercase tracking-[0.22em] text-ink/50', children: eyebrow })) : null, _jsx("h1", { className: 'break-words text-xl font-extrabold text-ink sm:text-2xl', children: title }), description ? (_jsx("p", { className: 'max-w-3xl text-sm leading-6 text-ink/60', children: description })) : null] }), trailing ? (_jsx("div", { className: 'flex w-full shrink-0 items-center justify-end sm:ml-auto sm:w-auto', children: trailing })) : null] }));

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

@@ -1,3 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { PsSkeleton } from './ps-skeleton.js';
-export const PsSectionPanelSkeleton = ({ children, title }) => (_jsxs("section", { className: 'ps-section', children: [_jsx("div", { className: 'flex min-h-10 items-center', children: title === undefined ? (_jsx(PsSkeleton, { className: 'h-4 w-44' })) : (_jsx("h2", { className: 'text-base font-semibold text-ink', children: title })) }), _jsx("div", { className: 'flex min-w-0 flex-col gap-4', children: children })] }));
+export const PsSectionPanelSkeleton = ({ children, title, variant = 'plain', }) => {
+    const heading = title === undefined ? (_jsx(PsSkeleton, { className: 'h-4 w-44' })) : (_jsx("h2", { className: 'text-base font-semibold text-ink', children: title }));
+    return variant === 'bordered' ? (_jsxs("section", { className: 'rounded-ps-panel border border-line bg-surface', children: [_jsx("header", { className: 'flex min-h-14 items-center justify-between gap-3 border-b border-line px-5 py-3', children: _jsx("div", { className: 'flex min-w-0 flex-col', children: heading }) }), _jsx("div", { className: 'flex flex-col gap-4 p-5', children: children })] })) : variant === 'card' ? (_jsxs("section", { className: 'rounded-ps-panel border border-line bg-surface p-5', children: [_jsx("div", { className: 'mb-3', children: heading }), children] })) : (_jsxs("section", { className: 'ps-section', children: [_jsx("div", { className: 'flex min-h-10 items-center', children: heading }), _jsx("div", { className: 'flex min-w-0 flex-col gap-4', children: children })] }));
+};

package/package.json

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