@pallasoft/ps-core-components 2.4.0 → 2.6.0

package/dist/components/ps-action-tile.d.ts

@@ -2,7 +2,8 @@ import type { ButtonHTMLAttributes, ReactNode } from 'react';
 export interface PsActionTileProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     description?: string;
     icon?: ReactNode;
+    isLoading?: boolean;
     label: string;
     variant?: 'default' | 'primary';
 }
-export declare const PsActionTile: ({ className, description, icon, label, type, variant, ...props }: PsActionTileProps) => import("react").JSX.Element;
+export declare const PsActionTile: ({ className, description, icon, isLoading, label, type, variant, ...props }: PsActionTileProps) => import("react").JSX.Element;

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

@@ -3,9 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.PsActionTile = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const ps_design_system_1 = require("@pallasoft/ps-design-system");
+const ps_skeleton_1 = require("./ps-skeleton");
 const variantClassNames = {
     default: 'ps-action-tile',
     primary: 'ps-action-tile ps-action-tile-primary',
 };
-const PsActionTile = ({ className, description, icon, label, type = 'button', variant = 'default', ...props }) => ((0, jsx_runtime_1.jsxs)("button", { className: ps_design_system_1.PallasoftClassNameService.merge('ps-focus-ring w-full', variantClassNames[variant], className), type: type, ...props, children: [(0, jsx_runtime_1.jsxs)("span", { className: 'min-w-0', children: [(0, jsx_runtime_1.jsx)("span", { className: 'block break-words', children: label }), description ? ((0, jsx_runtime_1.jsx)("span", { className: ps_design_system_1.PallasoftClassNameService.merge('mt-0.5 block text-xs font-medium leading-5', variant === 'primary' ? 'text-white/75' : 'text-ink/50'), children: description })) : null] }), icon ? ((0, jsx_runtime_1.jsx)("span", { className: ps_design_system_1.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] }));
+const PsActionTile = ({ className, description, icon, isLoading = false, label, type = 'button', variant = 'default', ...props }) => isLoading ? ((0, jsx_runtime_1.jsx)(ps_skeleton_1.PsSkeleton, { className: ps_design_system_1.PallasoftClassNameService.merge('h-16 w-full rounded-ps-card', className), shape: 'block' })) : ((0, jsx_runtime_1.jsxs)("button", { className: ps_design_system_1.PallasoftClassNameService.merge('ps-focus-ring w-full', variantClassNames[variant], className), type: type, ...props, children: [(0, jsx_runtime_1.jsxs)("span", { className: 'min-w-0', children: [(0, jsx_runtime_1.jsx)("span", { className: 'block break-words', children: label }), description ? ((0, jsx_runtime_1.jsx)("span", { className: ps_design_system_1.PallasoftClassNameService.merge('mt-0.5 block text-xs font-medium leading-5', variant === 'primary' ? 'text-white/75' : 'text-ink/50'), children: description })) : null] }), icon ? ((0, jsx_runtime_1.jsx)("span", { className: ps_design_system_1.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] }));
 exports.PsActionTile = PsActionTile;

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

@@ -2,6 +2,7 @@ import type { ReactNode } from 'react';
 export interface PsBadgeProps {
     children: ReactNode;
     className?: string;
+    isLoading?: boolean;
     tone?: 'danger' | 'neutral' | 'primary' | 'success' | 'warning';
 }
-export declare const PsBadge: ({ children, className, tone }: PsBadgeProps) => import("react").JSX.Element;
+export declare const PsBadge: ({ children, className, isLoading, tone, }: PsBadgeProps) => import("react").JSX.Element;

package/dist/components/ps-badge.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.PsBadge = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const ps_design_system_1 = require("@pallasoft/ps-design-system");
+const ps_skeleton_1 = require("./ps-skeleton");
 const 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',
@@ -10,5 +11,5 @@ const toneClassNames = {
     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',
 };
-const PsBadge = ({ children, className, tone = 'neutral' }) => ((0, jsx_runtime_1.jsx)("span", { className: ps_design_system_1.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 }));
+const PsBadge = ({ children, className, isLoading = false, tone = 'neutral', }) => isLoading ? ((0, jsx_runtime_1.jsx)(ps_skeleton_1.PsSkeleton, { className: ps_design_system_1.PallasoftClassNameService.merge('h-7 w-20', className), shape: 'block' })) : ((0, jsx_runtime_1.jsx)("span", { className: ps_design_system_1.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 }));
 exports.PsBadge = PsBadge;

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

@@ -4,8 +4,9 @@ export interface PsCardProps {
     className?: string;
     density?: 'compact' | 'normal' | 'spacious';
     eyebrow?: string;
+    isLoading?: boolean;
     title?: string;
     trailing?: ReactNode;
     variant?: 'default' | 'elevated' | 'glass' | 'muted';
 }
-export declare const PsCard: ({ children, className, density, eyebrow, title, trailing, variant, }: PsCardProps) => import("react").JSX.Element;
+export declare const PsCard: ({ children, className, density, eyebrow, isLoading, title, trailing, variant, }: PsCardProps) => import("react").JSX.Element;

package/dist/components/ps-card.js

@@ -3,6 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.PsCard = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const ps_design_system_1 = require("@pallasoft/ps-design-system");
+const ps_skeleton_1 = require("./ps-skeleton");
+const ps_skeleton_group_1 = require("./ps-skeleton-group");
 const densityClassNames = {
     compact: 'p-3',
     normal: 'p-4',
@@ -14,5 +16,5 @@ const variantClassNames = {
     glass: 'ps-glass',
     muted: 'ps-card-muted',
 };
-const PsCard = ({ children, className, density = 'normal', eyebrow, title, trailing, variant = 'default', }) => ((0, jsx_runtime_1.jsxs)("section", { className: ps_design_system_1.PallasoftClassNameService.merge('min-w-0 overflow-hidden rounded-ps-card', variantClassNames[variant], densityClassNames[density], className), children: [title ? ((0, jsx_runtime_1.jsxs)("div", { className: 'mb-3 flex min-w-0 items-start justify-between gap-3', children: [(0, jsx_runtime_1.jsxs)("div", { className: 'min-w-0', children: [eyebrow ? (0, jsx_runtime_1.jsx)("p", { className: 'ps-eyebrow break-words', children: eyebrow }) : null, (0, jsx_runtime_1.jsx)("h2", { className: 'mt-1 break-words text-base font-bold text-ink', children: title })] }), trailing ? (0, jsx_runtime_1.jsx)("div", { className: 'shrink-0', children: trailing }) : null] })) : null, children] }));
+const PsCard = ({ children, className, density = 'normal', eyebrow, isLoading = false, title, trailing, variant = 'default', }) => isLoading ? ((0, jsx_runtime_1.jsxs)(ps_skeleton_group_1.PsSkeletonGroup, { className: ps_design_system_1.PallasoftClassNameService.merge('flex min-w-0 flex-col gap-3 rounded-ps-card', variantClassNames[variant], densityClassNames[density], className), label: title === undefined ? 'Loading' : title, children: [(0, jsx_runtime_1.jsx)(ps_skeleton_1.PsSkeleton, { className: 'h-3 w-32' }), (0, jsx_runtime_1.jsx)(ps_skeleton_1.PsSkeleton, { className: 'h-20 w-full', shape: 'block' })] })) : ((0, jsx_runtime_1.jsxs)("section", { className: ps_design_system_1.PallasoftClassNameService.merge('min-w-0 overflow-hidden rounded-ps-card', variantClassNames[variant], densityClassNames[density], className), children: [title ? ((0, jsx_runtime_1.jsxs)("div", { className: 'mb-3 flex min-w-0 items-start justify-between gap-3', children: [(0, jsx_runtime_1.jsxs)("div", { className: 'min-w-0', children: [eyebrow ? (0, jsx_runtime_1.jsx)("p", { className: 'ps-eyebrow break-words', children: eyebrow }) : null, (0, jsx_runtime_1.jsx)("h2", { className: 'mt-1 break-words text-base font-bold text-ink', children: title })] }), trailing ? (0, jsx_runtime_1.jsx)("div", { className: 'shrink-0', children: trailing }) : null] })) : null, children] }));
 exports.PsCard = PsCard;

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

@@ -4,9 +4,10 @@ export interface PsListTileProps {
     className?: string;
     density?: 'compact' | 'normal';
     eyebrow?: string;
+    isLoading?: boolean;
     isPrivateTitle?: boolean;
     subtitle?: string;
     title: ReactNode;
     variant?: 'card' | 'row';
 }
-export declare const PsListTile: ({ children, className, density, eyebrow, isPrivateTitle, subtitle, title, variant, }: PsListTileProps) => import("react").JSX.Element;
+export declare const PsListTile: ({ children, className, density, eyebrow, isLoading, isPrivateTitle, subtitle, title, variant, }: PsListTileProps) => import("react").JSX.Element;

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

@@ -3,6 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.PsListTile = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const ps_design_system_1 = require("@pallasoft/ps-design-system");
+const ps_skeleton_1 = require("./ps-skeleton");
+const ps_skeleton_group_1 = require("./ps-skeleton-group");
 const densityClassNames = {
     compact: 'py-2',
     normal: 'py-2.5',
@@ -11,5 +13,5 @@ const variantClassNames = {
     card: 'ps-surface px-3',
     row: 'border-b border-line/70 px-0 last:border-b-0',
 };
-const PsListTile = ({ children, className, density = 'normal', eyebrow, isPrivateTitle = false, subtitle, title, variant = 'row', }) => ((0, jsx_runtime_1.jsxs)("div", { className: ps_design_system_1.PallasoftClassNameService.merge('min-w-0 overflow-hidden', variantClassNames[variant], densityClassNames[density], className), children: [eyebrow ? (0, jsx_runtime_1.jsx)("p", { className: 'ps-eyebrow break-words', children: eyebrow }) : null, (0, jsx_runtime_1.jsx)("p", { className: ps_design_system_1.PallasoftClassNameService.merge('break-words text-sm font-semibold text-ink', eyebrow && 'mt-1', isPrivateTitle && 'private-number'), children: title }), subtitle ? ((0, jsx_runtime_1.jsx)("p", { className: 'mt-1 break-words text-sm leading-5 text-slate-500', children: subtitle })) : null, children] }));
+const PsListTile = ({ children, className, density = 'normal', eyebrow, isLoading = false, isPrivateTitle = false, subtitle, title, variant = 'row', }) => isLoading ? ((0, jsx_runtime_1.jsxs)(ps_skeleton_group_1.PsSkeletonGroup, { className: ps_design_system_1.PallasoftClassNameService.merge('flex min-w-0 flex-col gap-2', variantClassNames[variant], densityClassNames[density], className), children: [(0, jsx_runtime_1.jsx)(ps_skeleton_1.PsSkeleton, { className: 'w-2/3' }), (0, jsx_runtime_1.jsx)(ps_skeleton_1.PsSkeleton, { className: 'h-2.5 w-1/3' })] })) : ((0, jsx_runtime_1.jsxs)("div", { className: ps_design_system_1.PallasoftClassNameService.merge('min-w-0 overflow-hidden', variantClassNames[variant], densityClassNames[density], className), children: [eyebrow ? (0, jsx_runtime_1.jsx)("p", { className: 'ps-eyebrow break-words', children: eyebrow }) : null, (0, jsx_runtime_1.jsx)("p", { className: ps_design_system_1.PallasoftClassNameService.merge('break-words text-sm font-semibold text-ink', eyebrow && 'mt-1', isPrivateTitle && 'private-number'), children: title }), subtitle ? ((0, jsx_runtime_1.jsx)("p", { className: 'mt-1 break-words text-sm leading-5 text-slate-500', children: subtitle })) : null, children] }));
 exports.PsListTile = PsListTile;

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

@@ -3,7 +3,8 @@ export interface PsMetricCardProps {
     changeLabel?: string;
     className?: string;
     icon?: ReactNode;
+    isLoading?: boolean;
     label: string;
     value: ReactNode;
 }
-export declare const PsMetricCard: ({ changeLabel, className, icon, label, value }: PsMetricCardProps) => import("react").JSX.Element;
+export declare const PsMetricCard: ({ changeLabel, className, icon, isLoading, label, value, }: PsMetricCardProps) => import("react").JSX.Element;

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

@@ -3,5 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.PsMetricCard = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const ps_design_system_1 = require("@pallasoft/ps-design-system");
-const PsMetricCard = ({ changeLabel, className, icon, label, value }) => ((0, jsx_runtime_1.jsx)("section", { className: ps_design_system_1.PallasoftClassNameService.merge('ps-metric-card min-w-0 p-3.5 sm:p-4', className), children: (0, jsx_runtime_1.jsxs)("div", { className: 'flex items-start justify-between gap-3', children: [(0, jsx_runtime_1.jsxs)("div", { className: 'min-w-0', children: [(0, jsx_runtime_1.jsx)("p", { className: 'ps-eyebrow truncate', children: label }), (0, jsx_runtime_1.jsx)("p", { className: 'mt-2 truncate text-2xl font-semibold text-ink', children: value }), changeLabel ? (0, jsx_runtime_1.jsx)("p", { className: 'mt-1 text-sm text-slate-500', children: changeLabel }) : null] }), icon ? ((0, jsx_runtime_1.jsx)("div", { className: 'flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-primary-soft text-primary', children: icon })) : null] }) }));
+const ps_skeleton_1 = require("./ps-skeleton");
+const ps_skeleton_group_1 = require("./ps-skeleton-group");
+const PsMetricCard = ({ changeLabel, className, icon, isLoading = false, label, value, }) => isLoading ? ((0, jsx_runtime_1.jsxs)(ps_skeleton_group_1.PsSkeletonGroup, { className: ps_design_system_1.PallasoftClassNameService.merge('ps-metric-card flex min-w-0 flex-col gap-3 p-3.5 sm:p-4', className), label: label, children: [(0, jsx_runtime_1.jsx)(ps_skeleton_1.PsSkeleton, { className: 'h-2.5 w-24' }), (0, jsx_runtime_1.jsx)(ps_skeleton_1.PsSkeleton, { className: 'h-6 w-32' })] })) : ((0, jsx_runtime_1.jsx)("section", { className: ps_design_system_1.PallasoftClassNameService.merge('ps-metric-card min-w-0 p-3.5 sm:p-4', className), children: (0, jsx_runtime_1.jsxs)("div", { className: 'flex items-start justify-between gap-3', children: [(0, jsx_runtime_1.jsxs)("div", { className: 'min-w-0', children: [(0, jsx_runtime_1.jsx)("p", { className: 'ps-eyebrow truncate', children: label }), (0, jsx_runtime_1.jsx)("p", { className: 'mt-2 truncate text-2xl font-semibold text-ink', children: value }), changeLabel ? (0, jsx_runtime_1.jsx)("p", { className: 'mt-1 text-sm text-slate-500', children: changeLabel }) : null] }), icon ? ((0, jsx_runtime_1.jsx)("div", { className: 'flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-primary-soft text-primary', children: icon })) : null] }) }));
 exports.PsMetricCard = PsMetricCard;

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

@@ -2,6 +2,7 @@ import type { ReactNode } from 'react';
 export interface PsPillProps {
     children: ReactNode;
     className?: string;
+    isLoading?: boolean;
     tone?: 'danger' | 'neutral' | 'primary' | 'success' | 'warning';
 }
-export declare const PsPill: ({ children, className, tone }: PsPillProps) => import("react").JSX.Element;
+export declare const PsPill: ({ children, className, isLoading, tone, }: PsPillProps) => import("react").JSX.Element;

package/dist/components/ps-pill.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.PsPill = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const ps_design_system_1 = require("@pallasoft/ps-design-system");
+const ps_skeleton_1 = require("./ps-skeleton");
 const 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',
@@ -10,5 +11,5 @@ const toneClassNames = {
     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',
 };
-const PsPill = ({ children, className, tone = 'neutral' }) => ((0, jsx_runtime_1.jsx)("span", { className: ps_design_system_1.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: (0, jsx_runtime_1.jsx)("span", { className: 'min-w-0 break-words', children: children }) }));
+const PsPill = ({ children, className, isLoading = false, tone = 'neutral', }) => isLoading ? ((0, jsx_runtime_1.jsx)(ps_skeleton_1.PsSkeleton, { className: ps_design_system_1.PallasoftClassNameService.merge('h-8 w-24', className), shape: 'block' })) : ((0, jsx_runtime_1.jsx)("span", { className: ps_design_system_1.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: (0, jsx_runtime_1.jsx)("span", { className: 'min-w-0 break-words', children: children }) }));
 exports.PsPill = PsPill;

package/dist/components/ps-reflective-app-shell.js

@@ -12,6 +12,6 @@ const PsReflectiveAppShell = ({ children, className, contentClassName, frameClas
         contentRef.current?.scrollTo({ top: 0, left: 0 });
         window.scrollTo({ top: 0, left: 0 });
     }, [scrollResetKey]);
-    return ((0, jsx_runtime_1.jsx)("section", { className: ps_design_system_1.PallasoftClassNameService.merge('ps-reflective-frame min-h-screen text-ink lg:px-3 lg:py-3', className), children: (0, jsx_runtime_1.jsxs)("div", { className: ps_design_system_1.PallasoftClassNameService.merge('ps-liquid-strong mx-auto grid h-screen min-h-0 overflow-hidden border-line/70 bg-white/70 backdrop-blur-2xl transition-[grid-template-columns] duration-200 dark:border-white/10 dark:bg-surface/70 md:grid-cols-[var(--ps-sidebar-width)_minmax(0,1fr)] lg:h-[calc(100vh-1.5rem)] lg:max-w-[1720px] lg:rounded-[1.5rem] lg:border', frameClassName), style: { ['--ps-sidebar-width']: sidebarWidth }, children: [sidebar, (0, jsx_runtime_1.jsxs)("div", { className: 'flex min-h-0 min-w-0 flex-col bg-white/32 dark:bg-white/[0.02]', children: [topbar, (0, jsx_runtime_1.jsx)("main", { ref: contentRef, className: ps_design_system_1.PallasoftClassNameService.merge('ps-scrollbar min-h-0 flex-1 overflow-y-auto px-4 py-5 ps-page-enter sm:px-5 lg:px-6 xl:px-7', contentClassName), children: children })] })] }) }));
+    return ((0, jsx_runtime_1.jsx)("section", { className: ps_design_system_1.PallasoftClassNameService.merge('ps-reflective-frame h-[100dvh] overflow-hidden text-ink lg:px-3 lg:py-3', className), children: (0, jsx_runtime_1.jsxs)("div", { className: ps_design_system_1.PallasoftClassNameService.merge('ps-liquid-strong mx-auto grid h-full min-h-0 overflow-hidden border-line/70 bg-white/70 backdrop-blur-2xl transition-[grid-template-columns] duration-200 dark:border-white/10 dark:bg-surface/70 md:grid-cols-[var(--ps-sidebar-width)_minmax(0,1fr)] lg:max-w-[1720px] lg:rounded-[1.5rem] lg:border', frameClassName), style: { ['--ps-sidebar-width']: sidebarWidth }, children: [sidebar, (0, jsx_runtime_1.jsxs)("div", { className: 'flex min-h-0 min-w-0 flex-col bg-white/32 dark:bg-white/[0.02]', children: [topbar, (0, jsx_runtime_1.jsx)("main", { ref: contentRef, className: ps_design_system_1.PallasoftClassNameService.merge('ps-scrollbar min-h-0 flex-1 overflow-y-auto px-4 py-5 ps-page-enter sm:px-5 lg:px-6 xl:px-7', contentClassName), children: children })] })] }) }));
 };
 exports.PsReflectiveAppShell = PsReflectiveAppShell;

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-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] }));
+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: '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-skeleton-card.d.ts

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

package/dist/components/ps-skeleton.js

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

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

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

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

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

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

@@ -1,7 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { PallasoftClassNameService } from '@pallasoft/ps-design-system';
+import { PsSkeleton } from './ps-skeleton';
 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] }));
+export const PsActionTile = ({ className, description, icon, isLoading = false, label, type = 'button', variant = 'default', ...props }) => isLoading ? (_jsx(PsSkeleton, { className: PallasoftClassNameService.merge('h-16 w-full rounded-ps-card', className), shape: 'block' })) : (_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-badge.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { PallasoftClassNameService } from '@pallasoft/ps-design-system';
+import { PsSkeleton } from './ps-skeleton';
 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',
@@ -7,4 +8,4 @@ const toneClassNames = {
     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 }));
+export const PsBadge = ({ children, className, isLoading = false, tone = 'neutral', }) => isLoading ? (_jsx(PsSkeleton, { className: PallasoftClassNameService.merge('h-7 w-20', className), shape: 'block' })) : (_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-card.js

@@ -1,5 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { PallasoftClassNameService } from '@pallasoft/ps-design-system';
+import { PsSkeleton } from './ps-skeleton';
+import { PsSkeletonGroup } from './ps-skeleton-group';
 const densityClassNames = {
     compact: 'p-3',
     normal: 'p-4',
@@ -11,4 +13,4 @@ const variantClassNames = {
     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] }));
+export const PsCard = ({ children, className, density = 'normal', eyebrow, isLoading = false, title, trailing, variant = 'default', }) => isLoading ? (_jsxs(PsSkeletonGroup, { className: PallasoftClassNameService.merge('flex min-w-0 flex-col gap-3 rounded-ps-card', variantClassNames[variant], densityClassNames[density], className), label: title === undefined ? 'Loading' : title, children: [_jsx(PsSkeleton, { className: 'h-3 w-32' }), _jsx(PsSkeleton, { className: 'h-20 w-full', shape: 'block' })] })) : (_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-list-tile.js

@@ -1,5 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { PallasoftClassNameService } from '@pallasoft/ps-design-system';
+import { PsSkeleton } from './ps-skeleton';
+import { PsSkeletonGroup } from './ps-skeleton-group';
 const densityClassNames = {
     compact: 'py-2',
     normal: 'py-2.5',
@@ -8,4 +10,4 @@ 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] }));
+export const PsListTile = ({ children, className, density = 'normal', eyebrow, isLoading = false, isPrivateTitle = false, subtitle, title, variant = 'row', }) => isLoading ? (_jsxs(PsSkeletonGroup, { className: PallasoftClassNameService.merge('flex min-w-0 flex-col gap-2', variantClassNames[variant], densityClassNames[density], className), children: [_jsx(PsSkeleton, { className: 'w-2/3' }), _jsx(PsSkeleton, { className: 'h-2.5 w-1/3' })] })) : (_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

@@ -1,3 +1,5 @@
 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] }) }));
+import { PsSkeleton } from './ps-skeleton';
+import { PsSkeletonGroup } from './ps-skeleton-group';
+export const PsMetricCard = ({ changeLabel, className, icon, isLoading = false, label, value, }) => isLoading ? (_jsxs(PsSkeletonGroup, { className: PallasoftClassNameService.merge('ps-metric-card flex min-w-0 flex-col gap-3 p-3.5 sm:p-4', className), label: label, children: [_jsx(PsSkeleton, { className: 'h-2.5 w-24' }), _jsx(PsSkeleton, { className: 'h-6 w-32' })] })) : (_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-pill.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { PallasoftClassNameService } from '@pallasoft/ps-design-system';
+import { PsSkeleton } from './ps-skeleton';
 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',
@@ -7,4 +8,4 @@ const toneClassNames = {
     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 }) }));
+export const PsPill = ({ children, className, isLoading = false, tone = 'neutral', }) => isLoading ? (_jsx(PsSkeleton, { className: PallasoftClassNameService.merge('h-8 w-24', className), shape: 'block' })) : (_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 }) }));

package/dist/esm/components/ps-reflective-app-shell.js

@@ -9,5 +9,5 @@ export const PsReflectiveAppShell = ({ children, className, contentClassName, fr
         contentRef.current?.scrollTo({ top: 0, left: 0 });
         window.scrollTo({ top: 0, left: 0 });
     }, [scrollResetKey]);
-    return (_jsx("section", { className: PallasoftClassNameService.merge('ps-reflective-frame min-h-screen text-ink lg:px-3 lg:py-3', className), children: _jsxs("div", { className: PallasoftClassNameService.merge('ps-liquid-strong mx-auto grid h-screen min-h-0 overflow-hidden border-line/70 bg-white/70 backdrop-blur-2xl transition-[grid-template-columns] duration-200 dark:border-white/10 dark:bg-surface/70 md:grid-cols-[var(--ps-sidebar-width)_minmax(0,1fr)] lg:h-[calc(100vh-1.5rem)] lg:max-w-[1720px] lg:rounded-[1.5rem] lg:border', frameClassName), style: { ['--ps-sidebar-width']: sidebarWidth }, children: [sidebar, _jsxs("div", { className: 'flex min-h-0 min-w-0 flex-col bg-white/32 dark:bg-white/[0.02]', children: [topbar, _jsx("main", { ref: contentRef, className: PallasoftClassNameService.merge('ps-scrollbar min-h-0 flex-1 overflow-y-auto px-4 py-5 ps-page-enter sm:px-5 lg:px-6 xl:px-7', contentClassName), children: children })] })] }) }));
+    return (_jsx("section", { className: PallasoftClassNameService.merge('ps-reflective-frame h-[100dvh] overflow-hidden text-ink lg:px-3 lg:py-3', className), children: _jsxs("div", { className: PallasoftClassNameService.merge('ps-liquid-strong mx-auto grid h-full min-h-0 overflow-hidden border-line/70 bg-white/70 backdrop-blur-2xl transition-[grid-template-columns] duration-200 dark:border-white/10 dark:bg-surface/70 md:grid-cols-[var(--ps-sidebar-width)_minmax(0,1fr)] lg:max-w-[1720px] lg:rounded-[1.5rem] lg:border', frameClassName), style: { ['--ps-sidebar-width']: sidebarWidth }, children: [sidebar, _jsxs("div", { className: 'flex min-h-0 min-w-0 flex-col bg-white/32 dark:bg-white/[0.02]', children: [topbar, _jsx("main", { ref: contentRef, className: PallasoftClassNameService.merge('ps-scrollbar min-h-0 flex-1 overflow-y-auto px-4 py-5 ps-page-enter sm:px-5 lg:px-6 xl:px-7', contentClassName), children: children })] })] }) }));
 };

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

@@ -1,2 +1,2 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const PsSectionHeader = ({ description, eyebrow, leading, title, trailing, }) => (_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: 'ml-auto flex shrink-0 items-center', children: trailing }) : null] }));
+export const PsSectionHeader = ({ description, eyebrow, leading, title, trailing, }) => (_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-skeleton-card.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PallasoftClassNameService } from '@pallasoft/ps-design-system';
+import { PsSkeleton } from './ps-skeleton';
+import { PsSkeletonGroup } from './ps-skeleton-group';
+export const PsSkeletonCard = ({ className }) => (_jsxs(PsSkeletonGroup, { className: PallasoftClassNameService.merge('flex flex-col gap-3 rounded-[1.25rem] border border-line bg-surface p-5', className), children: [_jsx(PsSkeleton, { className: 'h-2.5 w-24' }), _jsx(PsSkeleton, { className: 'h-6 w-32' })] }));

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

@@ -0,0 +1,2 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const PsSkeletonGroup = ({ children, className, label = 'Loading', }) => (_jsxs("div", { "aria-busy": 'true', className: className, role: 'status', children: [_jsx("span", { className: 'sr-only', children: label }), children] }));

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

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PallasoftClassNameService } from '@pallasoft/ps-design-system';
+import { PsSkeletonConfig } from '../constants/ps-skeleton-config';
+import { PsSkeleton } from './ps-skeleton';
+import { PsSkeletonGroup } from './ps-skeleton-group';
+export const PsSkeletonList = ({ className, hasLeading = false, hasTrailing = true, rows = 4, title = false, }) => (_jsxs(PsSkeletonGroup, { className: PallasoftClassNameService.merge('flex flex-col', className), children: [title ? _jsx(PsSkeleton, { className: 'mx-3 mb-3 h-2.5 w-24' }) : null, Array.from({ length: rows }, (_, index) => (_jsxs("div", { className: 'flex min-h-11 items-center gap-3 px-3 py-2.5', children: [hasLeading ? _jsx(PsSkeleton, { shape: 'circle' }) : null, _jsx(PsSkeleton, { className: PsSkeletonConfig.lineWidths[index % PsSkeletonConfig.lineWidths.length] }), hasTrailing ? _jsx(PsSkeleton, { className: 'ml-auto h-2.5 w-20 shrink-0' }) : null] }, index)))] }));

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

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

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

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PallasoftClassNameService } from '@pallasoft/ps-design-system';
+import { PsSkeletonConfig } from '../constants/ps-skeleton-config';
+import { PsSkeleton } from './ps-skeleton';
+import { PsSkeletonGroup } from './ps-skeleton-group';
+export const PsSkeletonText = ({ className, lines = 3 }) => (_jsx(PsSkeletonGroup, { className: PallasoftClassNameService.merge('flex flex-col gap-2.5', className), children: Array.from({ length: lines }, (_, index) => (_jsx(PsSkeleton, { className: index === lines - 1 && lines > 1
+            ? 'w-2/3'
+            : PsSkeletonConfig.lineWidths[index % PsSkeletonConfig.lineWidths.length] }, index))) }));

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

@@ -1,3 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { PallasoftClassNameService } from '@pallasoft/ps-design-system';
-export const PsSkeleton = ({ className }) => (_jsx("div", { className: PallasoftClassNameService.merge('animate-pulse rounded-full bg-mist', className) }));
+const shapeClassNames = {
+    block: 'h-11 w-full rounded-ps-control',
+    circle: 'h-9 w-9 shrink-0 rounded-full',
+    line: 'h-3 w-full rounded-full',
+};
+export const PsSkeleton = ({ className, shape = 'line' }) => (_jsx("span", { "aria-hidden": 'true', className: PallasoftClassNameService.merge('ps-skeleton', shapeClassNames[shape], className) }));

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

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

package/dist/esm/index.js

@@ -18,6 +18,11 @@ export * from './components/ps-navigation-progress';
 export * from './components/ps-section-header';
 export * from './components/ps-site-header';
 export * from './components/ps-skeleton';
+export * from './components/ps-skeleton-card';
+export * from './components/ps-skeleton-group';
+export * from './components/ps-skeleton-list';
+export * from './components/ps-skeleton-table';
+export * from './components/ps-skeleton-text';
 export * from './components/ps-spinner';
 export * from './components/ps-theme-toggle';
 export * from './components/ps-voice-orb';

package/dist/index.d.ts

@@ -18,6 +18,11 @@ export * from './components/ps-navigation-progress';
 export * from './components/ps-section-header';
 export * from './components/ps-site-header';
 export * from './components/ps-skeleton';
+export * from './components/ps-skeleton-card';
+export * from './components/ps-skeleton-group';
+export * from './components/ps-skeleton-list';
+export * from './components/ps-skeleton-table';
+export * from './components/ps-skeleton-text';
 export * from './components/ps-spinner';
 export * from './components/ps-theme-toggle';
 export * from './components/ps-voice-orb';

package/dist/index.js

@@ -34,6 +34,11 @@ __exportStar(require("./components/ps-navigation-progress"), exports);
 __exportStar(require("./components/ps-section-header"), exports);
 __exportStar(require("./components/ps-site-header"), exports);
 __exportStar(require("./components/ps-skeleton"), exports);
+__exportStar(require("./components/ps-skeleton-card"), exports);
+__exportStar(require("./components/ps-skeleton-group"), exports);
+__exportStar(require("./components/ps-skeleton-list"), exports);
+__exportStar(require("./components/ps-skeleton-table"), exports);
+__exportStar(require("./components/ps-skeleton-text"), exports);
 __exportStar(require("./components/ps-spinner"), exports);
 __exportStar(require("./components/ps-theme-toggle"), exports);
 __exportStar(require("./components/ps-voice-orb"), exports);

package/package.json

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