@pallasoft/ps-core-components 2.3.1 → 2.5.0

package/dist/esm/components/ps-empty-state.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PallasoftClassNameService } from '@pallasoft/ps-design-system';
+const getActionClassName = (variant = 'secondary') => {
+    if (variant === 'primary') {
+        return 'border-primary bg-primary text-white hover:bg-primary-dark';
+    }
+    return 'border-line bg-surface text-ink hover:border-primary/40 hover:text-primary';
+};
+export const PsEmptyState = ({ actions = [], badge, children, className, detail, description, eyebrow, icon, title, variant = 'page', }) => {
+    const isInline = variant === 'inline';
+    const Wrapper = isInline ? 'div' : 'main';
+    const Heading = isInline ? 'h3' : 'h1';
+    return (_jsx(Wrapper, { className: PallasoftClassNameService.merge(isInline
+            ? 'flex items-center justify-center rounded-ps-panel border border-dashed border-line bg-mist/40 px-6 py-10 text-ink'
+            : 'relative flex min-h-screen items-center justify-center bg-mist px-4 py-10 text-ink', className), children: _jsx("section", { className: isInline
+                ? 'relative w-full max-w-2xl text-center'
+                : 'ps-card relative w-full max-w-2xl p-6 sm:p-8', children: _jsxs("div", { className: isInline
+                    ? 'flex flex-col items-center gap-3'
+                    : 'flex flex-col gap-5 sm:flex-row sm:items-start', children: [icon ? _jsx("div", { className: 'ps-icon-surface h-14 w-14', children: icon }) : null, _jsxs("div", { className: isInline ? 'min-w-0' : 'min-w-0 flex-1', children: [_jsxs("div", { className: isInline
+                                    ? 'flex flex-wrap items-center justify-center gap-2'
+                                    : 'flex flex-wrap items-center gap-2', children: [eyebrow ? (_jsx("p", { className: 'text-xs font-semibold uppercase tracking-[0.22em] text-primary', children: eyebrow })) : null, eyebrow && badge ? _jsx("span", { className: 'h-1 w-1 rounded-full bg-line' }) : null, badge ? (_jsx("p", { className: 'text-xs font-semibold uppercase tracking-[0.22em] text-ink/40', children: badge })) : null] }), _jsx(Heading, { className: isInline
+                                    ? 'text-base font-semibold text-ink'
+                                    : 'mt-3 text-3xl font-semibold tracking-tight sm:text-4xl', children: title }), description ? (_jsx("p", { className: isInline
+                                    ? 'mt-1.5 text-sm leading-6 text-ink/60'
+                                    : 'mt-3 text-sm leading-6 text-ink/60', children: description })) : null, detail ? (_jsx("p", { className: 'mt-4 rounded-2xl border border-line bg-mist px-4 py-3 text-left text-xs leading-5 text-ink/60', children: detail })) : null, children ? _jsx("div", { className: 'mt-5 flex justify-center', children: children }) : null, actions.length > 0 ? (_jsx("div", { className: isInline
+                                    ? 'mt-5 flex flex-col justify-center gap-2 sm:flex-row'
+                                    : 'mt-6 flex flex-col gap-2 sm:flex-row', children: actions.map((action) => (_jsx("a", { className: PallasoftClassNameService.merge('ps-focus-ring ps-pressable inline-flex items-center justify-center rounded-ps-control border px-4 py-3 text-sm font-semibold', getActionClassName(action.variant)), href: action.href, rel: action.rel, target: action.target, children: action.label }, `${action.href}-${action.label}`))) })) : null] })] }) }) }));
+};

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

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PallasoftClassNameService } from '@pallasoft/ps-design-system';
+import { PsButton } from './ps-button';
+const positionClassNames = {
+    'bottom-right': 'bottom-6 right-6',
+    'bottom-left': 'bottom-6 left-6',
+    'bottom-center': 'bottom-6 left-1/2 -translate-x-1/2',
+};
+export const PsFab = ({ className, position = 'bottom-right', ...props }) => (_jsx(PsButton, { size: 'large', variant: 'primary', className: PallasoftClassNameService.merge('fixed z-docked h-14 w-14 shrink-0 !px-0 shadow-lg', positionClassNames[position], className), ...props }));

package/dist/esm/components/ps-infinite-scroll.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import InfiniteScroll from 'react-infinite-scroll-component';
+import { PsSpinner } from './ps-spinner';
+const defaultLoader = (_jsx("div", { className: 'flex w-full justify-center py-8', children: _jsx(PsSpinner, {}) }));
+export const PsInfiniteScroll = ({ children, className, dataLength, hasMore, loader, next, }) => (_jsx(InfiniteScroll, { className: className, dataLength: dataLength, hasMore: hasMore, loader: loader !== null && loader !== undefined ? loader : defaultLoader, next: next, children: children }));

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

@@ -0,0 +1,3 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PsLayerContext } from '../contexts/ps-layer-context';
+export const PsLayer = ({ children, zIndex }) => (_jsx(PsLayerContext.Provider, { value: zIndex, children: children }));

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

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PallasoftClassNameService } from '@pallasoft/ps-design-system';
+const densityClassNames = {
+    compact: 'py-2',
+    normal: 'py-2.5',
+};
+const variantClassNames = {
+    card: 'ps-surface px-3',
+    row: 'border-b border-line/70 px-0 last:border-b-0',
+};
+export const PsListTile = ({ children, className, density = 'normal', eyebrow, isPrivateTitle = false, subtitle, title, variant = 'row', }) => (_jsxs("div", { className: PallasoftClassNameService.merge('min-w-0 overflow-hidden', variantClassNames[variant], densityClassNames[density], className), children: [eyebrow ? _jsx("p", { className: 'ps-eyebrow break-words', children: eyebrow }) : null, _jsx("p", { className: PallasoftClassNameService.merge('break-words text-sm font-semibold text-ink', eyebrow && 'mt-1', isPrivateTitle && 'private-number'), children: title }), subtitle ? (_jsx("p", { className: 'mt-1 break-words text-sm leading-5 text-slate-500', children: subtitle })) : null, children] }));

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

@@ -0,0 +1,3 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PallasoftClassNameService } from '@pallasoft/ps-design-system';
+export const PsMetricCard = ({ changeLabel, className, icon, label, value }) => (_jsx("section", { className: PallasoftClassNameService.merge('ps-metric-card min-w-0 p-3.5 sm:p-4', className), children: _jsxs("div", { className: 'flex items-start justify-between gap-3', children: [_jsxs("div", { className: 'min-w-0', children: [_jsx("p", { className: 'ps-eyebrow truncate', children: label }), _jsx("p", { className: 'mt-2 truncate text-2xl font-semibold text-ink', children: value }), changeLabel ? _jsx("p", { className: 'mt-1 text-sm text-slate-500', children: changeLabel }) : null] }), icon ? (_jsx("div", { className: 'flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-primary-soft text-primary', children: icon })) : null] }) }));

package/dist/esm/components/ps-navigation-progress.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PallasoftClassNameService, PallasoftZIndex } from '@pallasoft/ps-design-system';
+import { PsNavigationProgressConfig } from '../constants/ps-navigation-progress-config';
+import { usePsNavigationProgress } from '../hooks/use-ps-navigation-progress';
+export const PsNavigationProgress = ({ className, color = PsNavigationProgressConfig.defaultColor, height = PsNavigationProgressConfig.defaultHeight, isLoading, label = PsNavigationProgressConfig.defaultLabel, progress, shadow = true, }) => {
+    const { isAnimated, isVisible, width } = usePsNavigationProgress(isLoading !== undefined
+        ? isLoading
+        : progress !== undefined &&
+            progress > 0 &&
+            progress < PsNavigationProgressConfig.completeWidth);
+    return (_jsx("div", { "aria-hidden": isVisible ? undefined : 'true', "aria-label": label, "aria-valuemax": 100, "aria-valuemin": 0, "aria-valuenow": Math.round(width), className: PallasoftClassNameService.merge('pointer-events-none fixed inset-x-0 top-0', className), role: 'progressbar', style: { height, zIndex: PallasoftZIndex.Toast }, children: _jsx("div", { className: 'h-full origin-left ease-out', style: {
+                backgroundColor: color,
+                boxShadow: shadow ? `0 0 10px ${color}, 0 0 5px ${color}` : undefined,
+                opacity: isVisible ? 1 : 0,
+                transitionDuration: isAnimated
+                    ? `${PsNavigationProgressConfig.transitionMs}ms, ${PsNavigationProgressConfig.fadeMs}ms`
+                    : '0ms',
+                transitionProperty: 'width, opacity',
+                width: `${Math.min(Math.max(width, 0), 100)}%`,
+            } }) }));
+};

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

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PallasoftClassNameService } from '@pallasoft/ps-design-system';
+const toneClassNames = {
+    danger: 'bg-rose-50 text-rose-700 ring-rose-100 dark:bg-rose-500/18 dark:text-rose-100 dark:ring-rose-300/22',
+    neutral: 'bg-slate-100 text-slate-700 ring-slate-200 dark:bg-white/10 dark:text-slate-100 dark:ring-white/12',
+    primary: 'bg-primary-soft text-ink ring-primary/12 dark:bg-primary/22 dark:text-white dark:ring-primary/32',
+    success: 'bg-emerald-50 text-emerald-700 ring-emerald-100 dark:bg-emerald-400/18 dark:text-emerald-50 dark:ring-emerald-200/22',
+    warning: 'bg-amber-50 text-amber-800 ring-amber-100 dark:bg-amber-400/18 dark:text-amber-50 dark:ring-amber-200/24',
+};
+export const PsPill = ({ children, className, tone = 'neutral' }) => (_jsx("span", { className: PallasoftClassNameService.merge('inline-flex min-h-8 min-w-[5.5rem] max-w-full items-center justify-center rounded-full px-5 py-1 text-center text-[0.72rem] font-black capitalize tracking-[0.01em] ring-1 ring-inset', toneClassNames[tone], className), children: _jsx("span", { className: 'min-w-0 break-words', children: children }) }));

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

@@ -0,0 +1,34 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PallasoftClassNameService } from '@pallasoft/ps-design-system';
+import { PortableText as Text } from '@portabletext/react';
+export const PsPortableText = ({ bodyClasses = 'text-ink', containerClasses = '', containerStyles = {}, headerClasses = 'text-ink', isLargeBodyFont = false, linkClassName = 'text-primary underline', LinkComponent = 'a', listClasses = 'text-ink', text, }) => {
+    const hasContainerStyles = Object.keys(containerStyles).length > 0;
+    const getBodyClass = hasContainerStyles ? '' : bodyClasses;
+    const getHeaderClass = hasContainerStyles ? '' : headerClasses;
+    const getListClass = hasContainerStyles ? '' : listClasses;
+    const components = {
+        marks: {
+            link: ({ children, value }) => {
+                const rel = !value.href.startsWith('/') ? 'noreferrer noopener' : undefined;
+                return (_jsx(LinkComponent, { href: value.href, rel: rel, className: linkClassName, "aria-label": value.children, children: children }));
+            },
+        },
+        list: {
+            bullet: ({ children }) => _jsx("ul", { className: 'mb-3 mt-1 list-disc ml-4', children: children }),
+            number: ({ children }) => _jsx("ol", { className: 'mb-3 mt-1 list-decimal ml-4', children: children }),
+        },
+        listItem: {
+            bullet: ({ children }) => (_jsx("li", { className: PallasoftClassNameService.merge('md:text-body-2 max-md:text-body-3', getListClass), children: children })),
+            number: ({ children }) => (_jsx("li", { className: PallasoftClassNameService.merge('md:text-body-2 max-md:text-body-3', getListClass), children: children })),
+        },
+        block: {
+            normal: ({ children }) => (_jsx("p", { className: PallasoftClassNameService.merge(isLargeBodyFont ? 'text-body-1' : 'text-body-2', 'whitespace-pre-line', getBodyClass), children: children })),
+            h2: ({ children }) => (_jsx("h2", { className: PallasoftClassNameService.merge('text-header-1 py-2', getHeaderClass), children: children })),
+            h3: ({ children }) => (_jsx("h3", { className: PallasoftClassNameService.merge('text-header-2 py-2', getHeaderClass), children: children })),
+            h4: ({ children }) => (_jsx("h4", { className: PallasoftClassNameService.merge('text-header-3 py-2', getHeaderClass), children: children })),
+            h5: ({ children }) => (_jsx("h5", { className: PallasoftClassNameService.merge('text-header-3 py-1', getHeaderClass), children: children })),
+            h6: ({ children }) => (_jsx("h6", { className: PallasoftClassNameService.merge('text-header-4 py-1', getHeaderClass), children: children })),
+        },
+    };
+    return (_jsx("div", { className: containerClasses, style: containerStyles, children: _jsx(Text, { value: text, components: components }) }));
+};

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

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

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

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

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

@@ -0,0 +1,11 @@
+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';
+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 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] }) }));
+};

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PallasoftClassNameService } from '@pallasoft/ps-design-system';
+const colorClassNames = {
+    current: 'text-current',
+    primary: 'text-primary',
+};
+const sizeClassNames = {
+    small: 'h-4 w-4 border-2',
+    default: 'h-6 w-6 border-2',
+    large: 'h-8 w-8 border-[3px]',
+};
+export const PsSpinner = ({ className, color = 'primary', label = 'Loading', size = 'default', ...props }) => (_jsxs("div", { className: PallasoftClassNameService.merge('inline-flex items-center justify-center', colorClassNames[color], className), ...props, children: [_jsx("span", { "aria-hidden": 'true', className: PallasoftClassNameService.merge('shrink-0 animate-spin rounded-full border-current border-t-transparent', sizeClassNames[size]) }), _jsx("span", { className: 'sr-only', children: label })] }));

package/dist/esm/components/ps-theme-toggle.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PallasoftClassNameService, PallasoftThemeMode, PallasoftThemeModeService, } from '@pallasoft/ps-design-system';
+import { PsIcon } from '@pallasoft/ps-icons';
+export const PsThemeToggle = ({ className, mode, type = 'button', ...props }) => {
+    const isDarkMode = mode === PallasoftThemeMode.Dark;
+    return (_jsxs("button", { "aria-label": isDarkMode ? 'Switch to light mode' : 'Switch to dark mode', className: PallasoftClassNameService.merge('ps-focus-ring ps-glass flex h-11 items-center gap-2 rounded-2xl px-3 text-sm font-bold text-ink transition hover:border-primary/30 hover:text-primary', className), type: type, ...props, children: [_jsx(PsIcon, { className: 'h-5 w-5', iconKey: isDarkMode ? 'sun' : 'moon' }), _jsx("span", { className: 'hidden sm:inline', children: PallasoftThemeModeService.getNextMode(mode) === PallasoftThemeMode.Dark ? 'Dark' : 'Light' })] }));
+};

package/dist/esm/components/ps-voice-orb.js

@@ -0,0 +1,100 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
+import { PallasoftClassNameService } from '@pallasoft/ps-design-system';
+import { PsVoiceOrbCadenceByState, PsVoiceOrbConfig, PsVoiceOrbThemes, } from '../constants/ps-voice-orb';
+const clamp = (value, min, max) => Math.max(min, Math.min(max, value));
+const approach = (current, target, factor) => current + (target - current) * factor;
+const buildRimMask = (innerStopPercent) => `radial-gradient(circle, transparent ${innerStopPercent}%, black ${innerStopPercent + 6}%, black 92%, transparent 97%)`;
+const initialRimMask = buildRimMask(PsVoiceOrbConfig.rimInnerStopPercent);
+const buildBlobRadius = (phase, depth) => {
+    const harmonic = PsVoiceOrbConfig.blobSecondHarmonic;
+    const corner = (offset) => (50 +
+        Math.sin(phase + offset) * depth * 0.65 +
+        Math.sin(phase * harmonic + offset * 2) * depth * 0.35).toFixed(2);
+    return `${corner(0)}% ${corner(1.7)}% ${corner(3.4)}% ${corner(5.1)}% / ${corner(2.6)}% ${corner(4.3)}% ${corner(0.9)}% ${corner(6)}%`;
+};
+export const PsVoiceOrb = (props) => {
+    const size = typeof props.size === 'number' ? props.size : PsVoiceOrbConfig.defaultSize;
+    const level = typeof props.level === 'number' ? clamp(props.level, 0, 1) : 0;
+    const state = props.state ? props.state : props.variant === 'error' ? 'error' : 'idle';
+    const isError = state === 'error' || props.variant === 'error';
+    const cadence = PsVoiceOrbCadenceByState[state];
+    const theme = PsVoiceOrbThemes[isError ? 'error' : 'default'];
+    const containerRef = useRef(null);
+    const glowRef = useRef(null);
+    const glassRef = useRef(null);
+    const rimRef = useRef(null);
+    const coreRef = useRef(null);
+    const targetLevelRef = useRef(level);
+    const cadenceRef = useRef(cadence);
+    targetLevelRef.current = level;
+    cadenceRef.current = cadence;
+    useEffect(() => {
+        let frameId;
+        let lastFrameMs = performance.now();
+        let smoothedLevel = 0;
+        let spinDegrees = 0;
+        let wobblePhase = 0;
+        let pulsePhase = 0;
+        let orbitPhase = 0;
+        let smoothedPulse = 0;
+        let smoothedBlob = 0;
+        let smoothedOrbit = 0;
+        const tick = (now) => {
+            const deltaMs = Math.min(now - lastFrameMs, PsVoiceOrbConfig.maxFrameMs);
+            const deltaS = deltaMs / 1000;
+            lastFrameMs = now;
+            const activeCadence = cadenceRef.current;
+            spinDegrees = (spinDegrees + (deltaS / activeCadence.spinS) * 360) % 360;
+            wobblePhase += deltaS * activeCadence.wobbleHz * Math.PI * 2;
+            pulsePhase += deltaS * activeCadence.pulseHz * Math.PI * 2;
+            orbitPhase += deltaS * PsVoiceOrbConfig.coreOrbitHz * Math.PI * 2;
+            smoothedLevel = approach(smoothedLevel, targetLevelRef.current, PsVoiceOrbConfig.levelSmoothing);
+            smoothedPulse = approach(smoothedPulse, activeCadence.pulseDepth, PsVoiceOrbConfig.cadenceSmoothing);
+            smoothedBlob = approach(smoothedBlob, activeCadence.blobDepth, PsVoiceOrbConfig.blobSmoothing);
+            smoothedOrbit = approach(smoothedOrbit, activeCadence.orbitDepth, PsVoiceOrbConfig.blobSmoothing);
+            const voice = Math.pow(smoothedLevel, PsVoiceOrbConfig.levelCurve);
+            const pulse = ((Math.sin(pulsePhase) + 1) / 2) * smoothedPulse;
+            const amplitude = clamp(Math.max(voice, pulse), 0, 1);
+            const blobRadius = buildBlobRadius(wobblePhase, smoothedBlob);
+            if (containerRef.current) {
+                containerRef.current.style.transform = `scale(${1 + amplitude * 0.3})`;
+            }
+            if (glowRef.current) {
+                glowRef.current.style.opacity = `${0.4 + amplitude * 0.55}`;
+                glowRef.current.style.transform = `scale(${1.05 + amplitude * 0.7})`;
+                glowRef.current.style.borderRadius = blobRadius;
+            }
+            if (glassRef.current) {
+                glassRef.current.style.borderRadius = blobRadius;
+            }
+            if (rimRef.current) {
+                const mask = buildRimMask(PsVoiceOrbConfig.rimInnerStopPercent - amplitude * PsVoiceOrbConfig.rimAmplitudeSpread);
+                rimRef.current.style.transform = `rotate(${spinDegrees}deg)`;
+                rimRef.current.style.maskImage = mask;
+                rimRef.current.style.webkitMaskImage = mask;
+            }
+            if (coreRef.current) {
+                const radius = PsVoiceOrbConfig.coreOrbitRadiusPercent * smoothedOrbit;
+                const x = Math.cos(orbitPhase) * radius;
+                const y = Math.sin(orbitPhase * 1.3) * radius;
+                coreRef.current.style.opacity = `${smoothedOrbit * (0.55 + pulse * 0.45)}`;
+                coreRef.current.style.transform = `translate(calc(-50% + ${x.toFixed(2)}%), calc(-50% + ${y.toFixed(2)}%)) scale(${0.8 + pulse * 0.5})`;
+            }
+            frameId = requestAnimationFrame(tick);
+        };
+        frameId = requestAnimationFrame(tick);
+        return () => cancelAnimationFrame(frameId);
+    }, []);
+    return (_jsxs("span", { ref: containerRef, className: PallasoftClassNameService.merge('ps-voice-orb relative inline-flex shrink-0 items-center justify-center', props.className), style: { width: size, height: size }, children: [_jsx("span", { ref: glowRef, "aria-hidden": 'true', className: 'absolute inset-0 rounded-full opacity-40 blur-xl', style: { background: theme.rim } }), _jsxs("span", { ref: glassRef, "aria-hidden": 'true', className: 'absolute inset-0 overflow-hidden rounded-full', children: [_jsx("span", { className: 'absolute inset-0', style: { background: theme.glass } }), _jsx("span", { ref: rimRef, className: 'absolute inset-0', style: {
+                            background: theme.rim,
+                            maskImage: initialRimMask,
+                            WebkitMaskImage: initialRimMask,
+                        } }), _jsx("span", { ref: coreRef, className: 'absolute left-1/2 top-1/2 rounded-full opacity-0 blur-sm', style: {
+                            background: theme.core,
+                            width: `${PsVoiceOrbConfig.coreSizePercent}%`,
+                            height: `${PsVoiceOrbConfig.coreSizePercent}%`,
+                        } })] }), cadence.isRippling
+                ? PsVoiceOrbConfig.rippleDelaysMs.map((delayMs) => (_jsx("span", { "aria-hidden": 'true', className: 'animate-ps-orb-ripple absolute inset-0 rounded-full border opacity-40', style: { borderColor: theme.ripple, animationDelay: `${delayMs}ms` } }, delayMs)))
+                : null] }));
+};

package/dist/esm/constants/ps-draggable-grid.js

@@ -0,0 +1,23 @@
+export const PsDraggableGridConfig = {
+    activationDistance: 6,
+    dropDuration: 220,
+    dropEasing: 'cubic-bezier(0.2, 0.8, 0.2, 1)',
+    liftDuration: 200,
+    liftEasing: 'cubic-bezier(0.2, 0.9, 0.3, 1.2)',
+    placeholderOpacity: '0.4',
+    touchDelay: 180,
+    touchTolerance: 6,
+};
+export const PsDraggableGridClasses = {
+    handle: 'ps-focus-ring inline-flex h-7 w-7 shrink-0 cursor-grab touch-none items-center justify-center rounded-full text-slate-400/70 transition hover:bg-white/36 hover:text-slate-600 active:cursor-grabbing dark:text-slate-300/55 dark:hover:bg-white/8 dark:hover:text-slate-100',
+    item: 'min-w-0 rounded-[1.7rem]',
+    lifted: 'cursor-grabbing rounded-[1.7rem] ring-1 ring-primary/30',
+    placeholder: 'rounded-[1.7rem] outline-dashed outline-2 outline-offset-[-2px] outline-primary/35',
+};
+export const PsDraggableGridLiftFrames = [
+    { boxShadow: '0 0 0 0 rgb(15 23 42 / 0)', transform: 'scale(1) rotate(0deg)' },
+    {
+        boxShadow: '0 28px 64px -18px rgb(15 23 42 / 0.5)',
+        transform: 'scale(1.035) rotate(-1.2deg)',
+    },
+];

package/dist/esm/constants/ps-navigation-progress-config.js

@@ -0,0 +1,12 @@
+export const PsNavigationProgressConfig = {
+    completeWidth: 100,
+    defaultColor: 'rgb(var(--ps-color-primary-rgb))',
+    defaultHeight: 3,
+    defaultLabel: 'Page loading',
+    fadeMs: 320,
+    startWidth: 12,
+    transitionMs: 240,
+    trickleFactor: 0.14,
+    trickleMax: 90,
+    trickleMs: 260,
+};

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

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

package/dist/esm/constants/ps-voice-orb.js

@@ -0,0 +1,85 @@
+export const PsVoiceOrbConfig = {
+    defaultSize: 64,
+    levelSmoothing: 0.18,
+    levelCurve: 0.55,
+    cadenceSmoothing: 0.06,
+    rimInnerStopPercent: 66,
+    rimAmplitudeSpread: 18,
+    maxFrameMs: 64,
+    rippleDelaysMs: [0, 500],
+    blobSmoothing: 0.05,
+    blobSecondHarmonic: 1.7,
+    coreSizePercent: 46,
+    coreOrbitRadiusPercent: 22,
+    coreOrbitHz: 0.8,
+};
+export const PsVoiceOrbCadenceByState = {
+    idle: {
+        spinS: 16,
+        wobbleHz: 0.12,
+        pulseHz: 0.25,
+        pulseDepth: 0.08,
+        blobDepth: 3,
+        orbitDepth: 0,
+        isRippling: false,
+    },
+    connecting: {
+        spinS: 2.5,
+        wobbleHz: 0.5,
+        pulseHz: 1.4,
+        pulseDepth: 0.3,
+        blobDepth: 12,
+        orbitDepth: 1,
+        isRippling: false,
+    },
+    listening: {
+        spinS: 5,
+        wobbleHz: 0.4,
+        pulseHz: 0.7,
+        pulseDepth: 0.16,
+        blobDepth: 6,
+        orbitDepth: 0,
+        isRippling: true,
+    },
+    thinking: {
+        spinS: 1.6,
+        wobbleHz: 0.55,
+        pulseHz: 0.9,
+        pulseDepth: 0.4,
+        blobDepth: 16,
+        orbitDepth: 1,
+        isRippling: false,
+    },
+    speaking: {
+        spinS: 3,
+        wobbleHz: 0.7,
+        pulseHz: 1.3,
+        pulseDepth: 0.22,
+        blobDepth: 8,
+        orbitDepth: 0,
+        isRippling: true,
+    },
+    error: {
+        spinS: 14,
+        wobbleHz: 0.15,
+        pulseHz: 0.6,
+        pulseDepth: 0.14,
+        blobDepth: 3,
+        orbitDepth: 0,
+        isRippling: false,
+    },
+};
+export const PsVoiceOrbThemes = {
+    default: {
+        glass: 'radial-gradient(circle at 32% 28%, rgb(255 255 255 / 0.16), transparent 42%), radial-gradient(circle, rgb(var(--ps-color-primary-rgb) / 0.2), rgb(var(--ps-color-ink-rgb) / 0.94) 75%)',
+        rim: 'conic-gradient(rgb(var(--ps-color-primary-rgb)), rgb(var(--ps-color-accent-rgb)), rgb(var(--ps-color-secondary-rgb)), rgb(var(--ps-color-primary-dark-rgb)), rgb(var(--ps-color-primary-rgb)))',
+        ripple: 'rgb(var(--ps-color-primary-rgb) / 0.5)',
+        core: 'radial-gradient(circle, rgb(255 255 255 / 0.9), rgb(var(--ps-color-accent-rgb) / 0.7) 35%, transparent 70%)',
+    },
+    error: {
+        glass: 'radial-gradient(circle at 32% 28%, rgb(255 255 255 / 0.16), transparent 42%), radial-gradient(circle, rgb(var(--ps-color-danger-rgb) / 0.22), rgb(var(--ps-color-ink-rgb) / 0.94) 75%)',
+        rim: 'conic-gradient(rgb(var(--ps-color-danger-rgb)), rgb(255 255 255 / 0.85), rgb(var(--ps-color-danger-rgb) / 0.7), rgb(var(--ps-color-danger-rgb)))',
+        ripple: 'rgb(var(--ps-color-danger-rgb) / 0.5)',
+        core: 'radial-gradient(circle, rgb(255 255 255 / 0.9), rgb(var(--ps-color-danger-rgb) / 0.7) 35%, transparent 70%)',
+    },
+};

package/dist/esm/contexts/ps-layer-context.js

@@ -0,0 +1,2 @@
+import { createContext } from 'react';
+export const PsLayerContext = createContext(null);

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

@@ -0,0 +1,65 @@
+import { useEffect, useRef, useState } from 'react';
+export const usePsAudioSpectrum = (audioElement, options = {}) => {
+    const DefaultBarCount = 12;
+    const DefaultFftSize = 128;
+    const DefaultSmoothing = 0.75;
+    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 configRef = useRef({ barCount, fftSize, smoothing });
+    configRef.current = { barCount, fftSize, smoothing };
+    useEffect(() => {
+        if (!audioElement)
+            return;
+        const AudioContextClass = typeof window === 'undefined'
+            ? undefined
+            : window.AudioContext || window.webkitAudioContext;
+        if (!AudioContextClass)
+            return;
+        const audioContext = new AudioContextClass();
+        const analyser = audioContext.createAnalyser();
+        analyser.fftSize = configRef.current.fftSize;
+        analyser.smoothingTimeConstant = configRef.current.smoothing;
+        const source = audioContext.createMediaElementSource(audioElement);
+        source.connect(analyser);
+        analyser.connect(audioContext.destination);
+        const buffer = new Uint8Array(analyser.frequencyBinCount);
+        let animationFrame;
+        const tick = () => {
+            analyser.getByteFrequencyData(buffer);
+            const activeBarCount = configRef.current.barCount;
+            const binsPerBar = Math.max(1, Math.floor(buffer.length / activeBarCount));
+            const nextLevels = [];
+            for (let bar = 0; bar < activeBarCount; bar++) {
+                let sum = 0;
+                const start = bar * binsPerBar;
+                const end = start + binsPerBar;
+                for (let bin = start; bin < end; bin++) {
+                    sum += bin < buffer.length ? buffer[bin] : 0;
+                }
+                nextLevels.push(Math.min(1, sum / binsPerBar / 255));
+            }
+            setLevels(nextLevels);
+            animationFrame = requestAnimationFrame(tick);
+        };
+        const resumeAudioContext = () => {
+            if (audioContext.state === 'suspended')
+                audioContext.resume().catch(() => undefined);
+        };
+        const gestureEvents = ['touchend', 'mousedown', 'keydown'];
+        resumeAudioContext();
+        audioElement.addEventListener('play', resumeAudioContext);
+        gestureEvents.forEach((eventName) => document.addEventListener(eventName, resumeAudioContext, { once: true }));
+        animationFrame = requestAnimationFrame(tick);
+        return () => {
+            cancelAnimationFrame(animationFrame);
+            audioElement.removeEventListener('play', resumeAudioContext);
+            gestureEvents.forEach((eventName) => document.removeEventListener(eventName, resumeAudioContext));
+            source.disconnect();
+            analyser.disconnect();
+            audioContext.close().catch(() => undefined);
+        };
+    }, [audioElement]);
+    return { levels };
+};

package/dist/esm/hooks/use-ps-exit-transition.js

@@ -0,0 +1,29 @@
+import { useEffect, useRef, useState } from 'react';
+export const usePsExitTransition = (isOpen, durationMs = 180) => {
+    const [shouldRender, setShouldRender] = useState(isOpen);
+    const [isClosing, setIsClosing] = useState(false);
+    const timeoutRef = useRef();
+    const hasRenderedRef = useRef(isOpen);
+    useEffect(() => {
+        if (timeoutRef.current)
+            clearTimeout(timeoutRef.current);
+        if (isOpen) {
+            setShouldRender(true);
+            setIsClosing(false);
+            return;
+        }
+        if (!hasRenderedRef.current)
+            return;
+        setIsClosing(true);
+        timeoutRef.current = setTimeout(() => {
+            setShouldRender(false);
+            setIsClosing(false);
+        }, durationMs);
+        return () => {
+            if (timeoutRef.current)
+                clearTimeout(timeoutRef.current);
+        };
+    }, [isOpen, durationMs]);
+    hasRenderedRef.current = shouldRender;
+    return { isClosing, shouldRender };
+};

package/dist/esm/hooks/use-ps-hide-on-scroll.js

@@ -0,0 +1,25 @@
+import { useEffect, useRef, useState } from 'react';
+export const usePsHideOnScroll = (options = {}) => {
+    const { threshold = 8 } = options;
+    const [hidden, setHidden] = useState(false);
+    const lastScrollY = useRef(0);
+    useEffect(() => {
+        lastScrollY.current = window.scrollY;
+        const onScroll = () => {
+            const currentScrollY = window.scrollY;
+            const delta = currentScrollY - lastScrollY.current;
+            if (currentScrollY <= 0) {
+                setHidden(false);
+                lastScrollY.current = currentScrollY;
+                return;
+            }
+            if (Math.abs(delta) < threshold)
+                return;
+            setHidden(delta > 0);
+            lastScrollY.current = currentScrollY;
+        };
+        window.addEventListener('scroll', onScroll, { passive: true });
+        return () => window.removeEventListener('scroll', onScroll);
+    }, [threshold]);
+    return hidden;
+};