@pallasoft/ps-core-components 2.8.0 → 2.9.0

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-site-header.js

@@ -4,12 +4,15 @@ exports.PsSiteHeader = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const ps_design_system_1 = require("@pallasoft/ps-design-system");
 const ps_icons_1 = require("@pallasoft/ps-icons");
+const ps_site_header_config_1 = require("../constants/ps-site-header-config");
+const use_ps_published_height_1 = require("../hooks/use-ps-published-height");
 const logoLinkClassName = 'flex shrink-0 items-center gap-2.5';
 const PsSiteHeader = ({ centerContent, className, homeHref, label, LinkComponent, logoAlt, logoClassName, logoSrc, logoSrcDark, logoSrcMobile, logoSrcMobileDark, navClassName, onBack, showLabel = false, trailing, }) => {
+    const headerRef = (0, use_ps_published_height_1.usePsPublishedHeight)(ps_site_header_config_1.PsSiteHeaderConfig.heightVariable);
     const logoLabel = `${label} home`;
     const renderLogo = (src, darkSrc, baseClassName) => darkSrc ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("img", { alt: logoAlt !== null && logoAlt !== undefined ? logoAlt : label, className: ps_design_system_1.PallasoftClassNameService.merge(baseClassName, 'dark:hidden', logoClassName), src: src }), (0, jsx_runtime_1.jsx)("img", { alt: logoAlt !== null && logoAlt !== undefined ? logoAlt : label, className: ps_design_system_1.PallasoftClassNameService.merge(baseClassName, 'hidden dark:block', logoClassName), src: darkSrc })] })) : ((0, jsx_runtime_1.jsx)("img", { alt: logoAlt !== null && logoAlt !== undefined ? logoAlt : label, className: ps_design_system_1.PallasoftClassNameService.merge(baseClassName, logoClassName), src: src }));
     const logoContent = logoSrcMobile ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: 'hidden sm:contents', children: renderLogo(logoSrc, logoSrcDark, 'h-8 w-auto') }), (0, jsx_runtime_1.jsx)("span", { className: 'contents sm:hidden', children: renderLogo(logoSrcMobile, logoSrcMobileDark, 'h-8 w-auto') }), showLabel ? (0, jsx_runtime_1.jsx)("span", { className: 'text-base font-bold text-ink', children: label }) : null] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [renderLogo(logoSrc, logoSrcDark, 'h-8 w-auto'), showLabel ? (0, jsx_runtime_1.jsx)("span", { className: 'text-base font-bold text-ink', children: label }) : null] }));
     const logoLink = LinkComponent ? ((0, jsx_runtime_1.jsx)(LinkComponent, { "aria-label": logoLabel, className: logoLinkClassName, to: homeHref, children: logoContent })) : ((0, jsx_runtime_1.jsx)("a", { "aria-label": logoLabel, className: logoLinkClassName, href: homeHref, children: logoContent }));
-    return ((0, jsx_runtime_1.jsx)("header", { className: ps_design_system_1.PallasoftClassNameService.merge('fixed inset-x-0 top-0 z-header px-6 pt-4', className), children: (0, jsx_runtime_1.jsxs)("nav", { className: ps_design_system_1.PallasoftClassNameService.merge('ps-glass mx-auto flex max-w-6xl items-center gap-3 rounded-ps-card px-5 py-3', navClassName), children: [onBack ? ((0, jsx_runtime_1.jsx)("button", { "aria-label": 'Back', className: 'ps-focus-ring flex h-9 w-9 shrink-0 items-center justify-center rounded-full text-ink md:hidden', onClick: onBack, type: 'button', children: (0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { iconKey: ps_icons_1.PsIconKey.ChevronRight, width: 20, height: 20, className: 'rotate-180' }) })) : null, (0, jsx_runtime_1.jsx)("div", { className: onBack ? 'hidden md:flex' : 'contents', children: logoLink }), (0, jsx_runtime_1.jsx)("div", { className: 'flex min-w-0 flex-1 items-center justify-center gap-3', children: centerContent }), trailing ? (0, jsx_runtime_1.jsx)("div", { className: 'flex shrink-0 items-center gap-2.5', children: trailing }) : null] }) }));
+    return ((0, jsx_runtime_1.jsx)("header", { ref: headerRef, className: ps_design_system_1.PallasoftClassNameService.merge('fixed inset-x-0 top-0 z-header px-6 pt-4', className), children: (0, jsx_runtime_1.jsxs)("nav", { className: ps_design_system_1.PallasoftClassNameService.merge('ps-glass mx-auto flex max-w-6xl items-center gap-3 rounded-ps-card px-5 py-3', navClassName), children: [onBack ? ((0, jsx_runtime_1.jsx)("button", { "aria-label": 'Back', className: 'ps-focus-ring flex h-9 w-9 shrink-0 items-center justify-center rounded-full text-ink md:hidden', onClick: onBack, type: 'button', children: (0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { iconKey: ps_icons_1.PsIconKey.ChevronRight, width: 20, height: 20, className: 'rotate-180' }) })) : null, (0, jsx_runtime_1.jsx)("div", { className: onBack ? 'hidden md:flex' : 'contents', children: logoLink }), (0, jsx_runtime_1.jsx)("div", { className: 'flex min-w-0 flex-1 items-center justify-center gap-3', children: centerContent }), trailing ? (0, jsx_runtime_1.jsx)("div", { className: 'flex shrink-0 items-center gap-2.5', children: trailing }) : null] }) }));
 };
 exports.PsSiteHeader = PsSiteHeader;

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-site-header-config.d.ts

@@ -0,0 +1,3 @@
+export declare const PsSiteHeaderConfig: {
+    readonly heightVariable: "--ps-site-header-height";
+};

package/dist/constants/ps-site-header-config.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsSiteHeaderConfig = void 0;
+exports.PsSiteHeaderConfig = {
+    heightVariable: '--ps-site-header-height',
+};

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-site-header.js

@@ -1,11 +1,14 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { PallasoftClassNameService } from '@pallasoft/ps-design-system';
 import { PsIcon, PsIconKey } from '@pallasoft/ps-icons';
+import { PsSiteHeaderConfig } from '../constants/ps-site-header-config';
+import { usePsPublishedHeight } from '../hooks/use-ps-published-height';
 const logoLinkClassName = 'flex shrink-0 items-center gap-2.5';
 export const PsSiteHeader = ({ centerContent, className, homeHref, label, LinkComponent, logoAlt, logoClassName, logoSrc, logoSrcDark, logoSrcMobile, logoSrcMobileDark, navClassName, onBack, showLabel = false, trailing, }) => {
+    const headerRef = usePsPublishedHeight(PsSiteHeaderConfig.heightVariable);
     const logoLabel = `${label} home`;
     const renderLogo = (src, darkSrc, baseClassName) => darkSrc ? (_jsxs(_Fragment, { children: [_jsx("img", { alt: logoAlt !== null && logoAlt !== undefined ? logoAlt : label, className: PallasoftClassNameService.merge(baseClassName, 'dark:hidden', logoClassName), src: src }), _jsx("img", { alt: logoAlt !== null && logoAlt !== undefined ? logoAlt : label, className: PallasoftClassNameService.merge(baseClassName, 'hidden dark:block', logoClassName), src: darkSrc })] })) : (_jsx("img", { alt: logoAlt !== null && logoAlt !== undefined ? logoAlt : label, className: PallasoftClassNameService.merge(baseClassName, logoClassName), src: src }));
     const logoContent = logoSrcMobile ? (_jsxs(_Fragment, { children: [_jsx("span", { className: 'hidden sm:contents', children: renderLogo(logoSrc, logoSrcDark, 'h-8 w-auto') }), _jsx("span", { className: 'contents sm:hidden', children: renderLogo(logoSrcMobile, logoSrcMobileDark, 'h-8 w-auto') }), showLabel ? _jsx("span", { className: 'text-base font-bold text-ink', children: label }) : null] })) : (_jsxs(_Fragment, { children: [renderLogo(logoSrc, logoSrcDark, 'h-8 w-auto'), showLabel ? _jsx("span", { className: 'text-base font-bold text-ink', children: label }) : null] }));
     const logoLink = LinkComponent ? (_jsx(LinkComponent, { "aria-label": logoLabel, className: logoLinkClassName, to: homeHref, children: logoContent })) : (_jsx("a", { "aria-label": logoLabel, className: logoLinkClassName, href: homeHref, children: logoContent }));
-    return (_jsx("header", { className: PallasoftClassNameService.merge('fixed inset-x-0 top-0 z-header px-6 pt-4', className), children: _jsxs("nav", { className: PallasoftClassNameService.merge('ps-glass mx-auto flex max-w-6xl items-center gap-3 rounded-ps-card px-5 py-3', navClassName), children: [onBack ? (_jsx("button", { "aria-label": 'Back', className: 'ps-focus-ring flex h-9 w-9 shrink-0 items-center justify-center rounded-full text-ink md:hidden', onClick: onBack, type: 'button', children: _jsx(PsIcon, { iconKey: PsIconKey.ChevronRight, width: 20, height: 20, className: 'rotate-180' }) })) : null, _jsx("div", { className: onBack ? 'hidden md:flex' : 'contents', children: logoLink }), _jsx("div", { className: 'flex min-w-0 flex-1 items-center justify-center gap-3', children: centerContent }), trailing ? _jsx("div", { className: 'flex shrink-0 items-center gap-2.5', children: trailing }) : null] }) }));
+    return (_jsx("header", { ref: headerRef, className: PallasoftClassNameService.merge('fixed inset-x-0 top-0 z-header px-6 pt-4', className), children: _jsxs("nav", { className: PallasoftClassNameService.merge('ps-glass mx-auto flex max-w-6xl items-center gap-3 rounded-ps-card px-5 py-3', navClassName), children: [onBack ? (_jsx("button", { "aria-label": 'Back', className: 'ps-focus-ring flex h-9 w-9 shrink-0 items-center justify-center rounded-full text-ink md:hidden', onClick: onBack, type: 'button', children: _jsx(PsIcon, { iconKey: PsIconKey.ChevronRight, width: 20, height: 20, className: 'rotate-180' }) })) : null, _jsx("div", { className: onBack ? 'hidden md:flex' : 'contents', children: logoLink }), _jsx("div", { className: 'flex min-w-0 flex-1 items-center justify-center gap-3', children: centerContent }), trailing ? _jsx("div", { className: 'flex shrink-0 items-center gap-2.5', 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-site-header-config.js

@@ -0,0 +1,3 @@
+export const PsSiteHeaderConfig = {
+    heightVariable: '--ps-site-header-height',
+};

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/hooks/use-ps-published-height.js

@@ -0,0 +1,15 @@
+import { useEffect, useRef } from 'react';
+export const usePsPublishedHeight = (variableName) => {
+    const elementRef = useRef(null);
+    useEffect(() => {
+        const element = elementRef.current;
+        if (element === null || typeof ResizeObserver === 'undefined')
+            return;
+        const publish = () => document.documentElement.style.setProperty(variableName, `${element.offsetHeight}px`);
+        publish();
+        const observer = new ResizeObserver(publish);
+        observer.observe(element);
+        return () => observer.disconnect();
+    }, [variableName]);
+    return elementRef;
+};

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';
@@ -18,10 +19,14 @@ export * from './components/ps-navigation-progress';
 export * from './components/ps-step-progress';
 export * from './components/ps-section-header';
 export * from './components/ps-site-header';
+export * from './hooks/use-ps-published-height';
+export * from './constants/ps-site-header-config';
 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/hooks/use-ps-published-height.d.ts

@@ -0,0 +1 @@
+export declare const usePsPublishedHeight: <T extends HTMLElement>(variableName: string) => import("react").MutableRefObject<T | null>;

package/dist/hooks/use-ps-published-height.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePsPublishedHeight = void 0;
+const react_1 = require("react");
+const usePsPublishedHeight = (variableName) => {
+    const elementRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        const element = elementRef.current;
+        if (element === null || typeof ResizeObserver === 'undefined')
+            return;
+        const publish = () => document.documentElement.style.setProperty(variableName, `${element.offsetHeight}px`);
+        publish();
+        const observer = new ResizeObserver(publish);
+        observer.observe(element);
+        return () => observer.disconnect();
+    }, [variableName]);
+    return elementRef;
+};
+exports.usePsPublishedHeight = usePsPublishedHeight;

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';
@@ -18,10 +19,14 @@ export * from './components/ps-navigation-progress';
 export * from './components/ps-step-progress';
 export * from './components/ps-section-header';
 export * from './components/ps-site-header';
+export * from './hooks/use-ps-published-height';
+export * from './constants/ps-site-header-config';
 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);
@@ -34,10 +35,14 @@ __exportStar(require("./components/ps-navigation-progress"), exports);
 __exportStar(require("./components/ps-step-progress"), exports);
 __exportStar(require("./components/ps-section-header"), exports);
 __exportStar(require("./components/ps-site-header"), exports);
+__exportStar(require("./hooks/use-ps-published-height"), exports);
+__exportStar(require("./constants/ps-site-header-config"), 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.9.0",
 	"private": false,
 	"main": "./dist/index.js",
 	"module": "./dist/esm/index.js",