@pallasoft/ps-core-components 2.8.0 → 2.8.1

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

@@ -3,10 +3,11 @@ 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_shape_1 = require("../constants/ps-skeleton-shape");
 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, 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] }));
+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: ps_skeleton_shape_1.PsSkeletonShape.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-audio-spectrum.d.ts

@@ -1,5 +1,7 @@
+import type { UsePsAudioSpectrum } from '../hooks/use-ps-audio-spectrum';
 export interface PsAudioSpectrumProps {
+    barCount?: number;
     className?: string;
-    levels: number[];
+    spectrum: UsePsAudioSpectrum;
 }
-export declare const PsAudioSpectrum: (props: PsAudioSpectrumProps) => import("react").JSX.Element;
+export declare const PsAudioSpectrum: ({ barCount, className, spectrum, }: PsAudioSpectrumProps) => import("react").JSX.Element;

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

@@ -2,12 +2,28 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PsAudioSpectrum = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const ps_design_system_1 = require("@pallasoft/ps-design-system");
-const MinBarHeightPercent = 10;
-const PsAudioSpectrum = (props) => {
-    return ((0, jsx_runtime_1.jsx)("div", { className: ps_design_system_1.PallasoftClassNameService.merge('flex h-full w-full items-end gap-2', props.className), children: props.levels.map((level, index) => {
-            const heightPercent = MinBarHeightPercent + Math.max(0, Math.min(1, level)) * (100 - MinBarHeightPercent);
-            return ((0, jsx_runtime_1.jsx)("span", { className: 'min-w-0 flex-1 rounded-full bg-[linear-gradient(180deg,_rgb(var(--ps-color-primary-rgb)/0.25)_0%,_rgb(var(--ps-color-primary-rgb))_100%)] transition-[height] duration-100 ease-out', style: { height: `${heightPercent}%` } }, index));
-        }) }));
+const ps_audio_spectrum_config_1 = require("../constants/ps-audio-spectrum-config");
+const scaleFor = (level) => {
+    const bounded = Math.max(0, Math.min(1, level));
+    return ps_audio_spectrum_config_1.PsAudioSpectrumConfig.minimumScale + bounded * (1 - ps_audio_spectrum_config_1.PsAudioSpectrumConfig.minimumScale);
+};
+const PsAudioSpectrum = ({ barCount = ps_audio_spectrum_config_1.PsAudioSpectrumConfig.defaultBarCount, className, spectrum, }) => {
+    const barsRef = (0, react_1.useRef)([]);
+    (0, react_1.useEffect)(() => {
+        const paint = (levels) => {
+            barsRef.current.forEach((bar, index) => {
+                if (bar === null)
+                    return;
+                bar.style.transform = `scaleY(${scaleFor(levels[index] !== undefined ? levels[index] : 0)})`;
+            });
+        };
+        paint(spectrum.levelsRef.current);
+        return spectrum.subscribe(paint);
+    }, [spectrum]);
+    return ((0, jsx_runtime_1.jsx)("div", { "aria-hidden": 'true', className: ps_design_system_1.PallasoftClassNameService.merge('flex h-full w-full items-end gap-2', className), children: Array.from({ length: barCount }, (item, index) => ((0, jsx_runtime_1.jsx)("span", { className: 'h-full min-w-0 flex-1 origin-bottom rounded-full bg-[linear-gradient(180deg,_rgb(var(--ps-color-primary-rgb)/0.25)_0%,_rgb(var(--ps-color-primary-rgb))_100%)] will-change-transform', ref: (element) => {
+                barsRef.current[index] = element;
+            }, style: { transform: `scaleY(${ps_audio_spectrum_config_1.PsAudioSpectrumConfig.minimumScale})` } }, index))) }));
 };
 exports.PsAudioSpectrum = PsAudioSpectrum;

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_shape_1 = require("../constants/ps-skeleton-shape");
 const ps_skeleton_1 = require("./ps-skeleton");
 const toneClassNames = {
     danger: 'bg-danger-soft text-danger dark:bg-rose-500/18 dark:text-rose-100',
@@ -11,5 +12,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, 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 }));
+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: ps_skeleton_shape_1.PsSkeletonShape.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.js

@@ -3,6 +3,7 @@ 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_shape_1 = require("../constants/ps-skeleton-shape");
 const ps_skeleton_1 = require("./ps-skeleton");
 const ps_skeleton_group_1 = require("./ps-skeleton-group");
 const densityClassNames = {
@@ -16,5 +17,5 @@ const variantClassNames = {
     glass: 'ps-glass',
     muted: 'ps-card-muted',
 };
-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] }));
+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: ps_skeleton_shape_1.PsSkeletonShape.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-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_shape_1 = require("../constants/ps-skeleton-shape");
 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',
@@ -11,5 +12,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, 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 }) }));
+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: ps_skeleton_shape_1.PsSkeletonShape.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-section-header.js

@@ -2,7 +2,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PsSectionHeader = void 0;
 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, { className: 'h-10 w-32', shape: 'block' }) : 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: [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, { className: 'h-10 w-32', shape: ps_skeleton_shape_1.PsSkeletonShape.Block }) : 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-skeleton-group.d.ts

@@ -2,6 +2,8 @@ import type { ReactNode } from 'react';
 export interface PsSkeletonGroupProps {
     children: ReactNode;
     className?: string;
+    direction?: 'column' | 'row';
+    gap?: string;
     label?: string;
 }
-export declare const PsSkeletonGroup: ({ children, className, label, }: PsSkeletonGroupProps) => import("react").JSX.Element;
+export declare const PsSkeletonGroup: ({ children, className, direction, gap, label, }: PsSkeletonGroupProps) => import("react").JSX.Element;

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

@@ -2,5 +2,6 @@
 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] }));
+const ps_design_system_1 = require("@pallasoft/ps-design-system");
+const PsSkeletonGroup = ({ children, className, direction = 'column', gap, label = 'Loading', }) => ((0, jsx_runtime_1.jsxs)("div", { "aria-busy": 'true', className: ps_design_system_1.PallasoftClassNameService.merge('flex', direction === 'row' ? 'flex-row items-center' : 'flex-col', gap === undefined ? 'gap-3' : gap, 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.js

@@ -4,7 +4,8 @@ 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_shape_1 = require("../constants/ps-skeleton-shape");
 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)))] }));
+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: ps_skeleton_shape_1.PsSkeletonShape.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-media.d.ts

@@ -0,0 +1,7 @@
+export interface PsSkeletonMediaProps {
+    aspect?: string;
+    className?: string;
+    hasCaption?: boolean;
+    label?: string;
+}
+export declare const PsSkeletonMedia: ({ aspect, className, hasCaption, label, }: PsSkeletonMediaProps) => import("react").JSX.Element;

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

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsSkeletonMedia = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ps_design_system_1 = require("@pallasoft/ps-design-system");
+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 PsSkeletonMedia = ({ aspect = '16 / 9', className, hasCaption = true, label, }) => ((0, jsx_runtime_1.jsxs)(ps_skeleton_group_1.PsSkeletonGroup, { className: ps_design_system_1.PallasoftClassNameService.merge('w-full', className), label: label, children: [(0, jsx_runtime_1.jsx)(ps_skeleton_1.PsSkeleton, { aspect: aspect, radius: 'var(--ps-radius-card, 1rem)', shape: ps_skeleton_shape_1.PsSkeletonShape.Block }), hasCaption ? (0, jsx_runtime_1.jsx)(ps_skeleton_1.PsSkeleton, { lines: 2, shape: ps_skeleton_shape_1.PsSkeletonShape.Text }) : null] }));
+exports.PsSkeletonMedia = PsSkeletonMedia;

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

@@ -4,11 +4,12 @@ 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_shape_1 = require("../constants/ps-skeleton-shape");
 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
+    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: ps_skeleton_shape_1.PsSkeletonShape.Block }), (0, jsx_runtime_1.jsx)(ps_skeleton_1.PsSkeleton, { className: 'ml-auto w-24', shape: ps_skeleton_shape_1.PsSkeletonShape.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)))] })] }));
 };

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

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

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

@@ -4,9 +4,7 @@ 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_shape_1 = require("../constants/ps-skeleton-shape");
 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))) }));
+const PsSkeletonText = ({ className, lines = ps_skeleton_config_1.PsSkeletonConfig.defaultTextLines, }) => ((0, jsx_runtime_1.jsx)(ps_skeleton_1.PsSkeleton, { className: ps_design_system_1.PallasoftClassNameService.merge('w-full', className), lines: lines, shape: ps_skeleton_shape_1.PsSkeletonShape.Text }));
 exports.PsSkeletonText = PsSkeletonText;

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

@@ -1,6 +1,11 @@
-export type PsSkeletonShape = 'block' | 'circle' | 'line';
+import { PsSkeletonShape } from '../constants/ps-skeleton-shape';
 export interface PsSkeletonProps {
+    aspect?: string;
     className?: string;
+    height?: string;
+    lines?: number;
+    radius?: string;
     shape?: PsSkeletonShape;
+    width?: string;
 }
-export declare const PsSkeleton: ({ className, shape }: PsSkeletonProps) => import("react").JSX.Element;
+export declare const PsSkeleton: ({ shape, ...props }: PsSkeletonProps) => import("react").JSX.Element;

package/dist/components/ps-skeleton.js

@@ -3,10 +3,37 @@ 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 ps_skeleton_config_1 = require("../constants/ps-skeleton-config");
+const ps_skeleton_shape_1 = require("../constants/ps-skeleton-shape");
 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',
+    [ps_skeleton_shape_1.PsSkeletonShape.Block]: 'h-11 w-full rounded-ps-control',
+    [ps_skeleton_shape_1.PsSkeletonShape.Circle]: 'h-9 w-9 shrink-0 rounded-full',
+    [ps_skeleton_shape_1.PsSkeletonShape.Line]: 'h-3 w-full rounded-full',
+    [ps_skeleton_shape_1.PsSkeletonShape.Text]: 'h-3 w-full rounded-full',
+};
+const sizeStyle = (props) => {
+    const style = {};
+    if (props.width !== undefined)
+        style.width = props.width;
+    if (props.height !== undefined)
+        style.height = props.height;
+    if (props.radius !== undefined)
+        style.borderRadius = props.radius;
+    if (props.aspect !== undefined) {
+        style.aspectRatio = props.aspect;
+        if (props.height === undefined)
+            style.height = 'auto';
+    }
+    return Object.keys(style).length > 0 ? style : undefined;
+};
+const PsSkeleton = ({ shape = ps_skeleton_shape_1.PsSkeletonShape.Line, ...props }) => {
+    const style = sizeStyle(props);
+    if (shape === ps_skeleton_shape_1.PsSkeletonShape.Text) {
+        const lines = props.lines !== undefined ? props.lines : ps_skeleton_config_1.PsSkeletonConfig.defaultTextLines;
+        return ((0, jsx_runtime_1.jsx)("span", { className: ps_design_system_1.PallasoftClassNameService.merge('flex flex-col gap-2.5', props.className), children: Array.from({ length: lines }, (item, index) => ((0, jsx_runtime_1.jsx)("span", { "aria-hidden": 'true', className: ps_design_system_1.PallasoftClassNameService.merge('ps-skeleton', shapeClassNames[ps_skeleton_shape_1.PsSkeletonShape.Line], index === lines - 1 && lines > 1
+                    ? ps_skeleton_config_1.PsSkeletonConfig.lastLineWidth
+                    : ps_skeleton_config_1.PsSkeletonConfig.lineWidths[index % ps_skeleton_config_1.PsSkeletonConfig.lineWidths.length]), style: style }, index))) }));
+    }
+    return ((0, jsx_runtime_1.jsx)("span", { "aria-hidden": 'true', className: ps_design_system_1.PallasoftClassNameService.merge('ps-skeleton', shapeClassNames[shape], props.className), style: style }));
 };
-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-audio-spectrum-config.d.ts

@@ -0,0 +1,4 @@
+export declare const PsAudioSpectrumConfig: {
+    readonly defaultBarCount: 12;
+    readonly minimumScale: 0.1;
+};

package/dist/constants/ps-audio-spectrum-config.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsAudioSpectrumConfig = void 0;
+exports.PsAudioSpectrumConfig = {
+    defaultBarCount: 12,
+    minimumScale: 0.1,
+};

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

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

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

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

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

@@ -0,0 +1,6 @@
+export declare enum PsSkeletonShape {
+    Block = "block",
+    Circle = "circle",
+    Line = "line",
+    Text = "text"
+}

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

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsSkeletonShape = void 0;
+var PsSkeletonShape;
+(function (PsSkeletonShape) {
+    PsSkeletonShape["Block"] = "block";
+    PsSkeletonShape["Circle"] = "circle";
+    PsSkeletonShape["Line"] = "line";
+    PsSkeletonShape["Text"] = "text";
+})(PsSkeletonShape || (exports.PsSkeletonShape = PsSkeletonShape = {}));

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

@@ -1,8 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { PallasoftClassNameService } from '@pallasoft/ps-design-system';
+import { PsSkeletonShape } from '../constants/ps-skeleton-shape';
 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, 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] }));
+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: PsSkeletonShape.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-audio-spectrum.js

@@ -1,9 +1,25 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
 import { PallasoftClassNameService } from '@pallasoft/ps-design-system';
-const MinBarHeightPercent = 10;
-export const PsAudioSpectrum = (props) => {
-    return (_jsx("div", { className: PallasoftClassNameService.merge('flex h-full w-full items-end gap-2', props.className), children: props.levels.map((level, index) => {
-            const heightPercent = MinBarHeightPercent + Math.max(0, Math.min(1, level)) * (100 - MinBarHeightPercent);
-            return (_jsx("span", { className: 'min-w-0 flex-1 rounded-full bg-[linear-gradient(180deg,_rgb(var(--ps-color-primary-rgb)/0.25)_0%,_rgb(var(--ps-color-primary-rgb))_100%)] transition-[height] duration-100 ease-out', style: { height: `${heightPercent}%` } }, index));
-        }) }));
+import { PsAudioSpectrumConfig } from '../constants/ps-audio-spectrum-config';
+const scaleFor = (level) => {
+    const bounded = Math.max(0, Math.min(1, level));
+    return PsAudioSpectrumConfig.minimumScale + bounded * (1 - PsAudioSpectrumConfig.minimumScale);
+};
+export const PsAudioSpectrum = ({ barCount = PsAudioSpectrumConfig.defaultBarCount, className, spectrum, }) => {
+    const barsRef = useRef([]);
+    useEffect(() => {
+        const paint = (levels) => {
+            barsRef.current.forEach((bar, index) => {
+                if (bar === null)
+                    return;
+                bar.style.transform = `scaleY(${scaleFor(levels[index] !== undefined ? levels[index] : 0)})`;
+            });
+        };
+        paint(spectrum.levelsRef.current);
+        return spectrum.subscribe(paint);
+    }, [spectrum]);
+    return (_jsx("div", { "aria-hidden": 'true', className: PallasoftClassNameService.merge('flex h-full w-full items-end gap-2', className), children: Array.from({ length: barCount }, (item, index) => (_jsx("span", { className: 'h-full min-w-0 flex-1 origin-bottom rounded-full bg-[linear-gradient(180deg,_rgb(var(--ps-color-primary-rgb)/0.25)_0%,_rgb(var(--ps-color-primary-rgb))_100%)] will-change-transform', ref: (element) => {
+                barsRef.current[index] = element;
+            }, style: { transform: `scaleY(${PsAudioSpectrumConfig.minimumScale})` } }, index))) }));
 };

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 { PsSkeletonShape } from '../constants/ps-skeleton-shape';
 import { PsSkeleton } from './ps-skeleton';
 const toneClassNames = {
     danger: 'bg-danger-soft text-danger dark:bg-rose-500/18 dark:text-rose-100',
@@ -8,4 +9,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, 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 }));
+export const PsBadge = ({ children, className, isLoading = false, tone = 'neutral', }) => isLoading ? (_jsx(PsSkeleton, { className: PallasoftClassNameService.merge('h-7 w-20', className), shape: PsSkeletonShape.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,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { PallasoftClassNameService } from '@pallasoft/ps-design-system';
+import { PsSkeletonShape } from '../constants/ps-skeleton-shape';
 import { PsSkeleton } from './ps-skeleton';
 import { PsSkeletonGroup } from './ps-skeleton-group';
 const densityClassNames = {
@@ -13,4 +14,4 @@ const variantClassNames = {
     glass: 'ps-glass',
     muted: 'ps-card-muted',
 };
-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] }));
+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: PsSkeletonShape.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-pill.js

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

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PsSkeletonShape } from '../constants/ps-skeleton-shape';
 import { PsSkeleton } from './ps-skeleton';
 import { PsSkeletonGroup } from './ps-skeleton-group';
-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, { className: 'h-10 w-32', shape: 'block' }) : 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: [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, { className: 'h-10 w-32', shape: PsSkeletonShape.Block }) : 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-skeleton-group.js

@@ -1,2 +1,3 @@
 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] }));
+import { PallasoftClassNameService } from '@pallasoft/ps-design-system';
+export const PsSkeletonGroup = ({ children, className, direction = 'column', gap, label = 'Loading', }) => (_jsxs("div", { "aria-busy": 'true', className: PallasoftClassNameService.merge('flex', direction === 'row' ? 'flex-row items-center' : 'flex-col', gap === undefined ? 'gap-3' : gap, className), role: 'status', children: [_jsx("span", { className: 'sr-only', children: label }), children] }));

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

@@ -1,6 +1,7 @@
 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 { PsSkeletonShape } from '../constants/ps-skeleton-shape';
 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)))] }));
+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: PsSkeletonShape.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-media.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PallasoftClassNameService } from '@pallasoft/ps-design-system';
+import { PsSkeletonShape } from '../constants/ps-skeleton-shape';
+import { PsSkeleton } from './ps-skeleton';
+import { PsSkeletonGroup } from './ps-skeleton-group';
+export const PsSkeletonMedia = ({ aspect = '16 / 9', className, hasCaption = true, label, }) => (_jsxs(PsSkeletonGroup, { className: PallasoftClassNameService.merge('w-full', className), label: label, children: [_jsx(PsSkeleton, { aspect: aspect, radius: 'var(--ps-radius-card, 1rem)', shape: PsSkeletonShape.Block }), hasCaption ? _jsx(PsSkeleton, { lines: 2, shape: PsSkeletonShape.Text }) : null] }));

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

@@ -1,11 +1,12 @@
 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 { PsSkeletonShape } from '../constants/ps-skeleton-shape';
 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
+    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: PsSkeletonShape.Block }), _jsx(PsSkeleton, { className: 'ml-auto w-24', shape: PsSkeletonShape.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

@@ -1,8 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { PallasoftClassNameService } from '@pallasoft/ps-design-system';
 import { PsSkeletonConfig } from '../constants/ps-skeleton-config';
+import { PsSkeletonShape } from '../constants/ps-skeleton-shape';
 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))) }));
+export const PsSkeletonText = ({ className, lines = PsSkeletonConfig.defaultTextLines, }) => (_jsx(PsSkeleton, { className: PallasoftClassNameService.merge('w-full', className), lines: lines, shape: PsSkeletonShape.Text }));

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

@@ -1,8 +1,35 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { PallasoftClassNameService } from '@pallasoft/ps-design-system';
+import { PsSkeletonConfig } from '../constants/ps-skeleton-config';
+import { PsSkeletonShape } from '../constants/ps-skeleton-shape';
 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',
+    [PsSkeletonShape.Block]: 'h-11 w-full rounded-ps-control',
+    [PsSkeletonShape.Circle]: 'h-9 w-9 shrink-0 rounded-full',
+    [PsSkeletonShape.Line]: 'h-3 w-full rounded-full',
+    [PsSkeletonShape.Text]: 'h-3 w-full rounded-full',
+};
+const sizeStyle = (props) => {
+    const style = {};
+    if (props.width !== undefined)
+        style.width = props.width;
+    if (props.height !== undefined)
+        style.height = props.height;
+    if (props.radius !== undefined)
+        style.borderRadius = props.radius;
+    if (props.aspect !== undefined) {
+        style.aspectRatio = props.aspect;
+        if (props.height === undefined)
+            style.height = 'auto';
+    }
+    return Object.keys(style).length > 0 ? style : undefined;
+};
+export const PsSkeleton = ({ shape = PsSkeletonShape.Line, ...props }) => {
+    const style = sizeStyle(props);
+    if (shape === PsSkeletonShape.Text) {
+        const lines = props.lines !== undefined ? props.lines : PsSkeletonConfig.defaultTextLines;
+        return (_jsx("span", { className: PallasoftClassNameService.merge('flex flex-col gap-2.5', props.className), children: Array.from({ length: lines }, (item, index) => (_jsx("span", { "aria-hidden": 'true', className: PallasoftClassNameService.merge('ps-skeleton', shapeClassNames[PsSkeletonShape.Line], index === lines - 1 && lines > 1
+                    ? PsSkeletonConfig.lastLineWidth
+                    : PsSkeletonConfig.lineWidths[index % PsSkeletonConfig.lineWidths.length]), style: style }, index))) }));
+    }
+    return (_jsx("span", { "aria-hidden": 'true', className: PallasoftClassNameService.merge('ps-skeleton', shapeClassNames[shape], props.className), style: style }));
 };
-export const PsSkeleton = ({ className, shape = 'line' }) => (_jsx("span", { "aria-hidden": 'true', className: PallasoftClassNameService.merge('ps-skeleton', shapeClassNames[shape], className) }));

package/dist/esm/constants/ps-audio-spectrum-config.js

@@ -0,0 +1,4 @@
+export const PsAudioSpectrumConfig = {
+    defaultBarCount: 12,
+    minimumScale: 0.1,
+};

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

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

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

@@ -0,0 +1,7 @@
+export var PsSkeletonShape;
+(function (PsSkeletonShape) {
+    PsSkeletonShape["Block"] = "block";
+    PsSkeletonShape["Circle"] = "circle";
+    PsSkeletonShape["Line"] = "line";
+    PsSkeletonShape["Text"] = "text";
+})(PsSkeletonShape || (PsSkeletonShape = {}));

package/dist/esm/hooks/use-ps-audio-spectrum.js

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useRef } from 'react';
 export const usePsAudioSpectrum = (audioElement, options = {}) => {
     const DefaultBarCount = 12;
     const DefaultFftSize = 128;
@@ -6,9 +6,16 @@ export const usePsAudioSpectrum = (audioElement, options = {}) => {
     const barCount = typeof options.barCount === 'number' ? options.barCount : DefaultBarCount;
     const fftSize = typeof options.fftSize === 'number' ? options.fftSize : DefaultFftSize;
     const smoothing = typeof options.smoothing === 'number' ? options.smoothing : DefaultSmoothing;
-    const [levels, setLevels] = useState(() => Array(barCount).fill(0));
+    const levelsRef = useRef(Array(barCount).fill(0));
+    const listenersRef = useRef(new Set());
     const configRef = useRef({ barCount, fftSize, smoothing });
     configRef.current = { barCount, fftSize, smoothing };
+    const subscribe = useCallback((listener) => {
+        listenersRef.current.add(listener);
+        return () => {
+            listenersRef.current.delete(listener);
+        };
+    }, []);
     useEffect(() => {
         if (!audioElement)
             return;
@@ -40,7 +47,8 @@ export const usePsAudioSpectrum = (audioElement, options = {}) => {
                 }
                 nextLevels.push(Math.min(1, sum / binsPerBar / 255));
             }
-            setLevels(nextLevels);
+            levelsRef.current = nextLevels;
+            listenersRef.current.forEach((listener) => listener(nextLevels));
             animationFrame = requestAnimationFrame(tick);
         };
         const resumeAudioContext = () => {
@@ -61,5 +69,5 @@ export const usePsAudioSpectrum = (audioElement, options = {}) => {
             audioContext.close().catch(() => undefined);
         };
     }, [audioElement]);
-    return { levels };
+    return { levelsRef, subscribe };
 };

package/dist/esm/index.js

@@ -2,6 +2,7 @@ export * from './components/ps-layer';
 export * from './components/ps-accordion';
 export * from './components/ps-action-tile';
 export * from './components/ps-audio-spectrum';
+export * from './constants/ps-audio-spectrum-config';
 export * from './components/ps-badge';
 export * from './components/ps-button';
 export * from './components/ps-card';
@@ -19,9 +20,11 @@ export * from './components/ps-step-progress';
 export * from './components/ps-section-header';
 export * from './components/ps-site-header';
 export * from './components/ps-skeleton';
+export * from './constants/ps-skeleton-shape';
 export * from './components/ps-skeleton-card';
 export * from './components/ps-skeleton-group';
 export * from './components/ps-skeleton-list';
+export * from './components/ps-skeleton-media';
 export * from './components/ps-skeleton-table';
 export * from './components/ps-skeleton-text';
 export * from './components/ps-spinner';

package/dist/hooks/use-ps-audio-spectrum.d.ts

@@ -4,6 +4,10 @@ export interface UsePsAudioSpectrumOptions {
     smoothing?: number;
 }
 export interface UsePsAudioSpectrum {
-    levels: number[];
+    levelsRef: {
+        current: number[];
+    };
+    subscribe: (listener: PsAudioSpectrumListener) => () => void;
 }
+export type PsAudioSpectrumListener = (levels: number[]) => void;
 export declare const usePsAudioSpectrum: (audioElement: HTMLAudioElement | null, options?: UsePsAudioSpectrumOptions) => UsePsAudioSpectrum;

package/dist/hooks/use-ps-audio-spectrum.js

@@ -9,9 +9,16 @@ const usePsAudioSpectrum = (audioElement, options = {}) => {
     const barCount = typeof options.barCount === 'number' ? options.barCount : DefaultBarCount;
     const fftSize = typeof options.fftSize === 'number' ? options.fftSize : DefaultFftSize;
     const smoothing = typeof options.smoothing === 'number' ? options.smoothing : DefaultSmoothing;
-    const [levels, setLevels] = (0, react_1.useState)(() => Array(barCount).fill(0));
+    const levelsRef = (0, react_1.useRef)(Array(barCount).fill(0));
+    const listenersRef = (0, react_1.useRef)(new Set());
     const configRef = (0, react_1.useRef)({ barCount, fftSize, smoothing });
     configRef.current = { barCount, fftSize, smoothing };
+    const subscribe = (0, react_1.useCallback)((listener) => {
+        listenersRef.current.add(listener);
+        return () => {
+            listenersRef.current.delete(listener);
+        };
+    }, []);
     (0, react_1.useEffect)(() => {
         if (!audioElement)
             return;
@@ -43,7 +50,8 @@ const usePsAudioSpectrum = (audioElement, options = {}) => {
                 }
                 nextLevels.push(Math.min(1, sum / binsPerBar / 255));
             }
-            setLevels(nextLevels);
+            levelsRef.current = nextLevels;
+            listenersRef.current.forEach((listener) => listener(nextLevels));
             animationFrame = requestAnimationFrame(tick);
         };
         const resumeAudioContext = () => {
@@ -64,6 +72,6 @@ const usePsAudioSpectrum = (audioElement, options = {}) => {
             audioContext.close().catch(() => undefined);
         };
     }, [audioElement]);
-    return { levels };
+    return { levelsRef, subscribe };
 };
 exports.usePsAudioSpectrum = usePsAudioSpectrum;

package/dist/index.d.ts

@@ -2,6 +2,7 @@ export * from './components/ps-layer';
 export * from './components/ps-accordion';
 export * from './components/ps-action-tile';
 export * from './components/ps-audio-spectrum';
+export * from './constants/ps-audio-spectrum-config';
 export * from './components/ps-badge';
 export * from './components/ps-button';
 export * from './components/ps-card';
@@ -19,9 +20,11 @@ export * from './components/ps-step-progress';
 export * from './components/ps-section-header';
 export * from './components/ps-site-header';
 export * from './components/ps-skeleton';
+export * from './constants/ps-skeleton-shape';
 export * from './components/ps-skeleton-card';
 export * from './components/ps-skeleton-group';
 export * from './components/ps-skeleton-list';
+export * from './components/ps-skeleton-media';
 export * from './components/ps-skeleton-table';
 export * from './components/ps-skeleton-text';
 export * from './components/ps-spinner';

package/dist/index.js

@@ -18,6 +18,7 @@ __exportStar(require("./components/ps-layer"), exports);
 __exportStar(require("./components/ps-accordion"), exports);
 __exportStar(require("./components/ps-action-tile"), exports);
 __exportStar(require("./components/ps-audio-spectrum"), exports);
+__exportStar(require("./constants/ps-audio-spectrum-config"), exports);
 __exportStar(require("./components/ps-badge"), exports);
 __exportStar(require("./components/ps-button"), exports);
 __exportStar(require("./components/ps-card"), exports);
@@ -35,9 +36,11 @@ __exportStar(require("./components/ps-step-progress"), exports);
 __exportStar(require("./components/ps-section-header"), exports);
 __exportStar(require("./components/ps-site-header"), exports);
 __exportStar(require("./components/ps-skeleton"), exports);
+__exportStar(require("./constants/ps-skeleton-shape"), 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-media"), exports);
 __exportStar(require("./components/ps-skeleton-table"), exports);
 __exportStar(require("./components/ps-skeleton-text"), exports);
 __exportStar(require("./components/ps-spinner"), exports);

package/package.json

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