@pallasoft/ps-core-components 2.15.3 → 2.16.0

package/dist/constants/ps-icon-action-config.d.ts

@@ -0,0 +1,5 @@
+export declare const PsIconActionConfig: {
+    className: string;
+    disabledClassName: string;
+    iconClassName: string;
+};

package/dist/constants/ps-icon-action-config.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsIconActionConfig = void 0;
+exports.PsIconActionConfig = {
+    className: 'ps-focus-ring relative inline-flex h-11 w-11 shrink-0 items-center justify-center rounded-2xl text-ink/65 transition-colors hover:bg-ink/5 hover:text-ink',
+    disabledClassName: 'disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:bg-transparent',
+    iconClassName: 'block h-5 w-5 shrink-0',
+};

package/dist/constants/ps-metric-grid-config.d.ts

@@ -0,0 +1,5 @@
+export declare const PsMetricGridColumns: Record<number, string>;
+export declare const PsMetricGridConfig: {
+    defaultColumns: number;
+    maxColumns: number;
+};

package/dist/constants/ps-metric-grid-config.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsMetricGridConfig = exports.PsMetricGridColumns = void 0;
+exports.PsMetricGridColumns = {
+    1: 'grid-cols-1',
+    2: 'sm:grid-cols-2',
+    3: 'sm:grid-cols-2 lg:grid-cols-3',
+    4: 'sm:grid-cols-2 lg:grid-cols-4',
+    5: 'sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5',
+};
+exports.PsMetricGridConfig = {
+    defaultColumns: 4,
+    maxColumns: 5,
+};

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

@@ -0,0 +1,8 @@
+export declare const PsPageSkeletonConfig: {
+    readonly formColumnsClassName: "sm:grid-cols-2";
+    readonly formFields: readonly [1, 2, 3, 4];
+    readonly formLabelClassName: "h-3 w-24";
+    readonly formSections: readonly [1, 2];
+    readonly tableColumns: 5;
+    readonly tableRows: 8;
+};

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

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsPageSkeletonConfig = void 0;
+exports.PsPageSkeletonConfig = {
+    formColumnsClassName: 'sm:grid-cols-2',
+    formFields: [1, 2, 3, 4],
+    formLabelClassName: 'h-3 w-24',
+    formSections: [1, 2],
+    tableColumns: 5,
+    tableRows: 8,
+};

package/dist/constants/ps-website-section-config.d.ts

@@ -0,0 +1,4 @@
+export declare const PsWebsiteSectionConfig: {
+    staggerDelay: number;
+    tileStaggerDelay: number;
+};

package/dist/constants/ps-website-section-config.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsWebsiteSectionConfig = void 0;
+exports.PsWebsiteSectionConfig = {
+    staggerDelay: 0.08,
+    tileStaggerDelay: 0.06,
+};

package/dist/esm/components/ps-active-filter-chip.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PsIcon, PsIconKey } from '@pallasoft/ps-icons';
+import { PsPill } from './ps-pill';
+export const PsActiveFilterChip = ({ id, label, onRemove, removeLabel, }) => (_jsx("button", { "aria-label": removeLabel, className: 'ps-focus-ring shrink-0 rounded-full', id: id, onClick: onRemove, type: 'button', children: _jsx(PsPill, { className: 'pr-2', tone: 'primary', children: _jsxs("span", { className: 'flex items-center gap-1.5', children: [label, _jsx(PsIcon, { className: 'h-3 w-3', iconKey: PsIconKey.Close })] }) }) }));

package/dist/esm/components/ps-back-link.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { PsIcon, PsIconKey } from '@pallasoft/ps-icons';
+const backLinkClassName = 'ps-focus-ring inline-flex w-fit items-center gap-1.5 rounded-ps-control text-sm font-medium text-ink/60 transition hover:text-primary';
+export const PsBackLink = ({ href, label, LinkComponent }) => {
+    const content = (_jsxs(_Fragment, { children: [_jsx(PsIcon, { iconKey: PsIconKey.ChevronRight, className: 'h-4 w-4 rotate-180' }), label] }));
+    return LinkComponent ? (_jsx(LinkComponent, { className: backLinkClassName, prefetch: 'intent', to: href, children: content })) : (_jsx("a", { className: backLinkClassName, href: href, children: content }));
+};

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

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PsSkeletonShape } from '../constants/ps-skeleton-shape';
+import { PsSkeleton } from './ps-skeleton';
+export const PsCardBlockSkeleton = ({ height }) => (_jsx(PsSkeleton, { height: height, radius: '1.25rem', shape: PsSkeletonShape.Block, width: '100%' }));

package/dist/esm/components/ps-data-boundary.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Suspense } from 'react';
+export const PsDataBoundary = ({ AwaitComponent, children, errorElement, fallback, resolve, }) => (_jsx(Suspense, { fallback: fallback, children: _jsx(AwaitComponent, { errorElement: errorElement, resolve: resolve, children: children }) }));

package/dist/esm/components/ps-faq-answer.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PsFaqBlockKind } from '../constants/ps-faq-block-kind';
+export const PsFaqAnswer = ({ blocks }) => (_jsx("div", { className: 'flex flex-col gap-3', children: blocks.map((block, index) => block.kind === PsFaqBlockKind.List ? (_jsx("ul", { className: 'list-disc pl-5', children: block.items.map((item) => (_jsx("li", { children: item }, item))) }, index)) : (_jsx("div", { className: 'flex flex-col gap-3', children: block.items.map((item) => (_jsx("p", { children: item }, item))) }, index))) }));

package/dist/esm/components/ps-feature-grid.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PsIcon } from '@pallasoft/ps-icons';
+import { PsScrollReveal, PsStaggerContainer, PsStaggerItem } from '@pallasoft/ps-motion-components';
+import { PsWebsiteSectionConfig } from '../constants/ps-website-section-config';
+import { PsCard } from './ps-card';
+export const PsFeatureGrid = ({ eyebrow, features, title }) => (_jsxs("div", { className: 'flex w-full flex-col items-center gap-8', children: [_jsxs(PsScrollReveal, { className: 'text-center', children: [_jsx("span", { className: 'ps-eyebrow mb-3 block', children: eyebrow }), _jsx("h2", { className: 'text-header-2 text-ink', children: title })] }), _jsx(PsStaggerContainer, { className: 'grid w-full grid-cols-1 gap-5 md:grid-cols-3', staggerDelay: PsWebsiteSectionConfig.staggerDelay, children: features.map((feature) => (_jsx(PsStaggerItem, { children: _jsxs(PsCard, { className: 'h-full text-center', density: 'spacious', children: [_jsx("span", { className: 'ps-icon-surface mx-auto h-12 w-12', children: _jsx(PsIcon, { className: 'h-6 w-6', iconKey: feature.iconKey }) }), _jsx("h3", { className: 'text-header-4 mb-2 mt-4 text-ink', children: feature.title }), _jsx("p", { className: 'text-body-2 text-ink/60', children: feature.description })] }) }, feature.title))) })] }));

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

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PallasoftClassNameService } from '@pallasoft/ps-design-system';
+import { PsPageSkeletonConfig } from '../constants/ps-page-skeleton-config';
+import { PsSkeletonShape } from '../constants/ps-skeleton-shape';
+import { PsSkeleton } from './ps-skeleton';
+export const PsFormFieldsSkeleton = ({ columnsClassName = PsPageSkeletonConfig.formColumnsClassName, fields = PsPageSkeletonConfig.formFields, }) => (_jsx("div", { className: PallasoftClassNameService.merge('grid gap-4', columnsClassName), children: fields.map((field) => (_jsxs("div", { className: 'flex flex-col gap-2', children: [_jsx(PsSkeleton, { className: PsPageSkeletonConfig.formLabelClassName }), _jsx(PsSkeleton, { className: 'h-10 w-full', shape: PsSkeletonShape.Block })] }, field))) }));

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

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PsPageSkeletonConfig } from '../constants/ps-page-skeleton-config';
+import { PsFormFieldsSkeleton } from './ps-form-fields-skeleton';
+import { PsPageSkeleton } from './ps-page-skeleton';
+import { PsSectionPanelSkeleton } from './ps-section-panel-skeleton';
+export const PsFormPageSkeleton = ({ loadingLabel, title }) => (_jsx(PsPageSkeleton, { hasActions: true, loadingLabel: loadingLabel, title: title, children: PsPageSkeletonConfig.formSections.map((section) => (_jsx(PsSectionPanelSkeleton, { children: _jsx(PsFormFieldsSkeleton, {}) }, section))) }));

package/dist/esm/components/ps-icon-button.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PallasoftClassNameService } from '@pallasoft/ps-design-system';
+import { PsIcon } from '@pallasoft/ps-icons';
+import { PsIconActionConfig } from '../constants/ps-icon-action-config';
+export const PsIconButton = ({ className, iconKey, label, type, ...props }) => (_jsx("button", { ...props, "aria-label": label, className: PallasoftClassNameService.merge(PsIconActionConfig.className, PsIconActionConfig.disabledClassName, className), title: label, type: type === 'submit' || type === 'reset' ? type : 'button', children: _jsx(PsIcon, { "aria-hidden": 'true', className: PsIconActionConfig.iconClassName, iconKey: iconKey }) }));

package/dist/esm/components/ps-icon-link.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PallasoftClassNameService } from '@pallasoft/ps-design-system';
+import { PsIcon } from '@pallasoft/ps-icons';
+import { PsIconActionConfig } from '../constants/ps-icon-action-config';
+export const PsIconLink = ({ className, href, iconKey, label, LinkComponent }) => {
+    const linkClassName = PallasoftClassNameService.merge(PsIconActionConfig.className, className);
+    const icon = (_jsx(PsIcon, { "aria-hidden": 'true', className: PsIconActionConfig.iconClassName, iconKey: iconKey }));
+    return LinkComponent ? (_jsx(LinkComponent, { "aria-label": label, className: linkClassName, prefetch: 'intent', title: label, to: href, children: icon })) : (_jsx("a", { "aria-label": label, className: linkClassName, href: href, title: label, children: icon }));
+};

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

@@ -0,0 +1,3 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PsSkeleton } from './ps-skeleton';
+export const PsIntroSkeleton = () => (_jsxs("div", { className: 'mx-auto flex w-full max-w-3xl flex-col items-center gap-4', children: [_jsx(PsSkeleton, { height: '0.875rem', radius: '999px', width: '6rem' }), _jsx(PsSkeleton, { height: '2.5rem', radius: '0.75rem', width: '70%' }), _jsx(PsSkeleton, { height: '1.125rem', radius: '0.5rem', width: '85%' })] }));

package/dist/esm/components/ps-link-tile-grid.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { PsIcon, PsIconKey } from '@pallasoft/ps-icons';
+import { PsStaggerContainer, PsStaggerItem } from '@pallasoft/ps-motion-components';
+import { PsWebsiteSectionConfig } from '../constants/ps-website-section-config';
+const tileClassName = 'ps-pressable ps-focus-ring group flex h-full items-center justify-between gap-3 rounded-ps-card border border-line bg-surface px-4 py-3 transition-colors hover:border-primary/50';
+export const PsLinkTileGrid = ({ LinkComponent, tiles }) => {
+    const renderTile = (tile, content) => LinkComponent ? (_jsx(LinkComponent, { "aria-label": tile.ariaLabel, className: tileClassName, prefetch: 'intent', to: tile.href, children: content })) : (_jsx("a", { "aria-label": tile.ariaLabel, className: tileClassName, href: tile.href, children: content }));
+    return (_jsx(PsStaggerContainer, { className: 'grid w-full grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3', staggerDelay: PsWebsiteSectionConfig.tileStaggerDelay, children: tiles.map((tile) => (_jsx(PsStaggerItem, { children: renderTile(tile, _jsxs(_Fragment, { children: [_jsxs("span", { className: 'flex min-w-0 flex-col', children: [_jsx("span", { className: 'text-body-2 font-semibold text-ink', children: tile.title }), _jsx("span", { className: 'truncate text-body-3 text-ink/60', children: tile.description })] }), _jsx(PsIcon, { className: 'h-4 w-4 shrink-0 text-ink/40 transition-colors group-hover:text-primary', iconKey: PsIconKey.ChevronRight })] })) }, tile.href))) }));
+};

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

@@ -0,0 +1,3 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PsMetricCard } from './ps-metric-card';
+export const PsMetricGridSkeleton = ({ count }) => (_jsx("div", { className: 'grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-4', children: Array.from({ length: count }, (_, index) => (_jsx(PsMetricCard, { isLoading: true, label: '', value: '' }, index))) }));

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

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PallasoftClassNameService } from '@pallasoft/ps-design-system';
+import { PsMetricGridColumns, PsMetricGridConfig } from '../constants/ps-metric-grid-config';
+import { PsMetricCard } from './ps-metric-card';
+export const PsMetricGrid = ({ items }) => {
+    const columns = PsMetricGridColumns[Math.min(items.length, PsMetricGridConfig.maxColumns)];
+    return (_jsx("div", { className: PallasoftClassNameService.merge('grid grid-cols-1 gap-3', columns === undefined ? PsMetricGridColumns[PsMetricGridConfig.defaultColumns] : columns), children: items.map((item) => (_jsx(PsMetricCard, { label: item.label, value: item.value }, item.label))) }));
+};

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

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PsStaggerContainer, PsStaggerItem } from '@pallasoft/ps-motion-components';
+import { PsWebsiteSectionConfig } from '../constants/ps-website-section-config';
+import { PsMetricCard } from './ps-metric-card';
+export const PsMetricRow = ({ metrics }) => (_jsx(PsStaggerContainer, { className: 'grid w-full grid-cols-1 gap-5 md:grid-cols-3', staggerDelay: PsWebsiteSectionConfig.staggerDelay, children: metrics.map((metric) => (_jsx(PsStaggerItem, { children: _jsx(PsMetricCard, { label: metric.label, value: metric.value }) }, metric.label))) }));

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

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

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

@@ -0,0 +1,3 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PsScrollReveal } from '@pallasoft/ps-motion-components';
+export const PsPageIntro = ({ description, eyebrow, title }) => (_jsxs(PsScrollReveal, { className: 'mx-auto flex w-full max-w-3xl flex-col items-center gap-4 text-center', children: [_jsx("span", { className: 'ps-eyebrow', children: eyebrow }), _jsx("h1", { className: 'text-header-1 text-ink', children: title }), description ? _jsx("p", { className: 'text-body-1 text-ink/60', children: description }) : null] }));

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

@@ -0,0 +1,3 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PallasoftClassNameService } from '@pallasoft/ps-design-system';
+export const PsPageLayout = ({ children, className, isNarrow = false }) => (_jsx("div", { className: PallasoftClassNameService.merge('w-full px-4 py-5 md:px-6 md:py-6', className), children: _jsx("div", { className: isNarrow ? 'mx-auto flex w-full min-w-0 max-w-7xl flex-col' : 'flex min-w-0 flex-col', children: children }) }));

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

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PsSkeletonShape } from '../constants/ps-skeleton-shape';
+import { PsPageHeader } from './ps-page-header';
+import { PsPageLayout } from './ps-page-layout';
+import { PsPageStack } from './ps-page-stack';
+import { PsSectionHeader } from './ps-section-header';
+import { PsSkeleton } from './ps-skeleton';
+export const PsPageSkeleton = ({ children, hasActions = false, isNarrow = false, loadingLabel, title, }) => (_jsx(PsPageLayout, { isNarrow: isNarrow, children: _jsxs(PsPageStack, { children: [title === undefined ? (_jsx(PsSectionHeader, { isLoading: true, title: loadingLabel, trailing: hasActions })) : (_jsx(PsPageHeader, { actions: hasActions ? (_jsx(PsSkeleton, { height: '2.5rem', radius: '9999px', shape: PsSkeletonShape.Block, width: '9rem' })) : undefined, title: title })), children] }) }));

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

@@ -0,0 +1,3 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PallasoftClassNameService } from '@pallasoft/ps-design-system';
+export const PsPageStack = ({ children, className }) => (_jsx("div", { className: PallasoftClassNameService.merge('ps-stack', className), children: children }));

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

@@ -0,0 +1,3 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PsSkeleton } from './ps-skeleton';
+export const PsSectionPanelSkeleton = ({ children, title }) => (_jsxs("section", { className: 'ps-section', children: [_jsx("div", { className: 'flex min-h-10 items-center', children: title === undefined ? (_jsx(PsSkeleton, { className: 'h-4 w-44' })) : (_jsx("h2", { className: 'text-base font-semibold text-ink', children: title })) }), _jsx("div", { className: 'flex min-w-0 flex-col gap-4', children: children })] }));

package/dist/esm/components/ps-section-panel.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 PsSectionPanel = ({ actions, children, className, title }) => (_jsxs("section", { className: PallasoftClassNameService.merge('ps-section', className), children: [title || actions ? (_jsxs("div", { className: 'flex min-h-10 flex-wrap items-center justify-between gap-3', children: [title ? _jsx("h2", { className: 'text-base font-semibold text-ink', children: title }) : _jsx("span", {}), actions ? _jsx("div", { className: 'flex flex-wrap items-center gap-2', children: actions }) : null] })) : null, _jsx("div", { className: 'flex min-w-0 flex-col gap-4', children: children })] }));

package/dist/esm/components/ps-signed-amount.js

@@ -0,0 +1,8 @@
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { PallasoftClassNameService } from '@pallasoft/ps-design-system';
+import { AmountDirection, Common } from '@pallasoft/ps-utilities';
+import { PsAmountDirectionClasses } from '../constants/ps-amount-direction-classes';
+export const PsSignedAmount = ({ amount, className, formatted }) => {
+    const direction = Common.AmountService.direction(amount);
+    return (_jsxs("span", { className: PallasoftClassNameService.merge('tabular-nums', PsAmountDirectionClasses[direction], className), children: [direction === AmountDirection.In ? '+' : '', formatted] }));
+};

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

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PsSkeletonShape } from '../constants/ps-skeleton-shape';
+import { PsSkeleton } from './ps-skeleton';
+export const PsTabRowSkeleton = () => (_jsx(PsSkeleton, { height: '2.75rem', radius: '9999px', shape: PsSkeletonShape.Block, width: '100%' }));

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

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PsPageSkeletonConfig } from '../constants/ps-page-skeleton-config';
+import { PsSkeletonTable } from './ps-skeleton-table';
+export const PsTableListSkeleton = () => (_jsx(PsSkeletonTable, { columns: PsPageSkeletonConfig.tableColumns, hasToolbar: true, rows: PsPageSkeletonConfig.tableRows }));

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

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PsPageSkeleton } from './ps-page-skeleton';
+import { PsTableListSkeleton } from './ps-table-list-skeleton';
+export const PsTablePageSkeleton = ({ isNarrow = false, loadingLabel, title, }) => (_jsx(PsPageSkeleton, { hasActions: true, isNarrow: isNarrow, loadingLabel: loadingLabel, title: title, children: _jsx(PsTableListSkeleton, {}) }));

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

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { usePsThemeMode } from '../hooks/use-ps-theme-mode';
+import { PsThemeToggle } from './ps-theme-toggle';
+export const PsThemeController = () => {
+    const { resolvedMode, toggle } = usePsThemeMode();
+    if (resolvedMode === null)
+        return _jsx("div", { className: 'h-11 w-11' });
+    return _jsx(PsThemeToggle, { mode: resolvedMode, onClick: toggle });
+};

package/dist/esm/components/ps-theme-system-listener.js

@@ -0,0 +1,9 @@
+import { useEffect } from 'react';
+import { PallasoftThemeBrowserService } from '@pallasoft/ps-design-system';
+export const PsThemeSystemListener = () => {
+    useEffect(() => {
+        PallasoftThemeBrowserService.applyStoredMode();
+        return PallasoftThemeBrowserService.listenToSystemChanges(() => undefined);
+    }, []);
+    return null;
+};

package/dist/esm/components/ps-tool-card-grid.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PsIcon, PsIconKey } from '@pallasoft/ps-icons';
+import { PsStaggerContainer, PsStaggerItem } from '@pallasoft/ps-motion-components';
+import { PsWebsiteSectionConfig } from '../constants/ps-website-section-config';
+import { PsCard } from './ps-card';
+const cardLinkClassName = 'ps-pressable ps-focus-ring block h-full rounded-ps-card';
+export const PsToolCardGrid = ({ cards, LinkComponent }) => {
+    const renderCard = (card, content) => LinkComponent ? (_jsx(LinkComponent, { "aria-label": card.ariaLabel, className: cardLinkClassName, prefetch: 'intent', to: card.href, children: content })) : (_jsx("a", { "aria-label": card.ariaLabel, className: cardLinkClassName, href: card.href, children: content }));
+    return (_jsx(PsStaggerContainer, { className: 'grid w-full grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3', staggerDelay: PsWebsiteSectionConfig.staggerDelay, children: cards.map((card) => (_jsx(PsStaggerItem, { children: renderCard(card, _jsxs(PsCard, { className: 'group flex h-full flex-col gap-5 transition-colors hover:border-primary/50', density: 'spacious', variant: 'elevated', children: [_jsxs("div", { className: 'flex items-center justify-between gap-3', children: [_jsx("span", { className: 'ps-icon-surface h-12 w-12', children: _jsx(PsIcon, { className: 'h-6 w-6', iconKey: card.iconKey }) }), _jsx(PsIcon, { className: 'h-5 w-5 text-ink/30 transition-colors group-hover:text-primary', iconKey: PsIconKey.ChevronRight })] }), _jsxs("div", { className: 'flex flex-col gap-2', children: [_jsx("h2", { className: 'text-header-3 text-ink', children: card.title }), _jsx("p", { className: 'text-body-2 text-ink/60', children: card.description })] })] })) }, card.href))) }));
+};

package/dist/esm/constants/ps-amount-direction-classes.js

@@ -0,0 +1,6 @@
+import { AmountDirection } from '@pallasoft/ps-utilities';
+export const PsAmountDirectionClasses = {
+    [AmountDirection.In]: 'font-medium text-success',
+    [AmountDirection.Neutral]: 'text-ink',
+    [AmountDirection.Out]: 'font-medium text-danger',
+};

package/dist/esm/constants/ps-faq-block-kind.js

@@ -0,0 +1,5 @@
+export var PsFaqBlockKind;
+(function (PsFaqBlockKind) {
+    PsFaqBlockKind["List"] = "list";
+    PsFaqBlockKind["Paragraph"] = "paragraph";
+})(PsFaqBlockKind || (PsFaqBlockKind = {}));

package/dist/esm/constants/ps-icon-action-config.js

@@ -0,0 +1,5 @@
+export const PsIconActionConfig = {
+    className: 'ps-focus-ring relative inline-flex h-11 w-11 shrink-0 items-center justify-center rounded-2xl text-ink/65 transition-colors hover:bg-ink/5 hover:text-ink',
+    disabledClassName: 'disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:bg-transparent',
+    iconClassName: 'block h-5 w-5 shrink-0',
+};

package/dist/esm/constants/ps-metric-grid-config.js

@@ -0,0 +1,11 @@
+export const PsMetricGridColumns = {
+    1: 'grid-cols-1',
+    2: 'sm:grid-cols-2',
+    3: 'sm:grid-cols-2 lg:grid-cols-3',
+    4: 'sm:grid-cols-2 lg:grid-cols-4',
+    5: 'sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5',
+};
+export const PsMetricGridConfig = {
+    defaultColumns: 4,
+    maxColumns: 5,
+};

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

@@ -0,0 +1,8 @@
+export const PsPageSkeletonConfig = {
+    formColumnsClassName: 'sm:grid-cols-2',
+    formFields: [1, 2, 3, 4],
+    formLabelClassName: 'h-3 w-24',
+    formSections: [1, 2],
+    tableColumns: 5,
+    tableRows: 8,
+};

package/dist/esm/constants/ps-website-section-config.js

@@ -0,0 +1,4 @@
+export const PsWebsiteSectionConfig = {
+    staggerDelay: 0.08,
+    tileStaggerDelay: 0.06,
+};

package/dist/esm/hooks/use-ps-theme-mode.js

@@ -0,0 +1,17 @@
+import { useEffect, useState } from 'react';
+import { PallasoftThemeBrowserService, PallasoftThemeMode, PallasoftThemeModeService, } from '@pallasoft/ps-design-system';
+export const usePsThemeMode = () => {
+    const [mode, setMode] = useState(null);
+    const [resolvedMode, setResolvedMode] = useState(null);
+    useEffect(() => {
+        setMode(PallasoftThemeBrowserService.getStoredMode());
+        setResolvedMode(PallasoftThemeBrowserService.applyStoredMode());
+        return PallasoftThemeBrowserService.listenToSystemChanges(setResolvedMode);
+    }, []);
+    const select = (next) => {
+        setMode(next);
+        setResolvedMode(PallasoftThemeBrowserService.storeAndApplyMode(next));
+    };
+    const toggle = () => select(PallasoftThemeModeService.getNextMode(resolvedMode === null ? PallasoftThemeMode.Light : resolvedMode));
+    return { mode, resolvedMode, select, toggle };
+};

package/dist/esm/index.js

@@ -55,3 +55,45 @@ export * from './models/ps-draggable-grid';
 export * from './constants/ps-draggable-grid';
 export * from './constants/ps-navigation-progress-config';
 export * from './constants/ps-step-progress-config';
+export * from './components/ps-active-filter-chip';
+export * from './components/ps-back-link';
+export * from './components/ps-card-block-skeleton';
+export * from './components/ps-data-boundary';
+export * from './components/ps-faq-answer';
+export * from './components/ps-feature-grid';
+export * from './components/ps-form-fields-skeleton';
+export * from './components/ps-form-page-skeleton';
+export * from './components/ps-icon-button';
+export * from './components/ps-icon-link';
+export * from './components/ps-intro-skeleton';
+export * from './components/ps-link-tile-grid';
+export * from './components/ps-metric-grid';
+export * from './components/ps-metric-grid-skeleton';
+export * from './components/ps-metric-row';
+export * from './components/ps-page-header';
+export * from './components/ps-page-intro';
+export * from './components/ps-page-layout';
+export * from './components/ps-page-skeleton';
+export * from './components/ps-page-stack';
+export * from './components/ps-section-panel';
+export * from './components/ps-section-panel-skeleton';
+export * from './components/ps-signed-amount';
+export * from './components/ps-tab-row-skeleton';
+export * from './components/ps-table-list-skeleton';
+export * from './components/ps-table-page-skeleton';
+export * from './components/ps-theme-controller';
+export * from './components/ps-theme-system-listener';
+export * from './components/ps-tool-card-grid';
+export * from './constants/ps-amount-direction-classes';
+export * from './constants/ps-faq-block-kind';
+export * from './constants/ps-icon-action-config';
+export * from './constants/ps-metric-grid-config';
+export * from './constants/ps-page-skeleton-config';
+export * from './constants/ps-website-section-config';
+export * from './hooks/use-ps-theme-mode';
+export * from './models/ps-faq-block-data';
+export * from './models/ps-feature-card-data';
+export * from './models/ps-link-tile-data';
+export * from './models/ps-metric-item-data';
+export * from './models/ps-theme-mode-state';
+export * from './models/ps-tool-card-data';

package/dist/esm/models/ps-faq-block-data.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/models/ps-feature-card-data.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/models/ps-link-tile-data.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/models/ps-metric-item-data.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/models/ps-theme-mode-state.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/models/ps-tool-card-data.js

@@ -0,0 +1 @@
+export {};

package/dist/hooks/use-ps-theme-mode.d.ts

@@ -0,0 +1,2 @@
+import type { PsThemeModeState } from '../models/ps-theme-mode-state';
+export declare const usePsThemeMode: () => PsThemeModeState;

package/dist/hooks/use-ps-theme-mode.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePsThemeMode = void 0;
+const react_1 = require("react");
+const ps_design_system_1 = require("@pallasoft/ps-design-system");
+const usePsThemeMode = () => {
+    const [mode, setMode] = (0, react_1.useState)(null);
+    const [resolvedMode, setResolvedMode] = (0, react_1.useState)(null);
+    (0, react_1.useEffect)(() => {
+        setMode(ps_design_system_1.PallasoftThemeBrowserService.getStoredMode());
+        setResolvedMode(ps_design_system_1.PallasoftThemeBrowserService.applyStoredMode());
+        return ps_design_system_1.PallasoftThemeBrowserService.listenToSystemChanges(setResolvedMode);
+    }, []);
+    const select = (next) => {
+        setMode(next);
+        setResolvedMode(ps_design_system_1.PallasoftThemeBrowserService.storeAndApplyMode(next));
+    };
+    const toggle = () => select(ps_design_system_1.PallasoftThemeModeService.getNextMode(resolvedMode === null ? ps_design_system_1.PallasoftThemeMode.Light : resolvedMode));
+    return { mode, resolvedMode, select, toggle };
+};
+exports.usePsThemeMode = usePsThemeMode;

package/dist/index.d.ts

@@ -55,3 +55,45 @@ export * from './models/ps-draggable-grid';
 export * from './constants/ps-draggable-grid';
 export * from './constants/ps-navigation-progress-config';
 export * from './constants/ps-step-progress-config';
+export * from './components/ps-active-filter-chip';
+export * from './components/ps-back-link';
+export * from './components/ps-card-block-skeleton';
+export * from './components/ps-data-boundary';
+export * from './components/ps-faq-answer';
+export * from './components/ps-feature-grid';
+export * from './components/ps-form-fields-skeleton';
+export * from './components/ps-form-page-skeleton';
+export * from './components/ps-icon-button';
+export * from './components/ps-icon-link';
+export * from './components/ps-intro-skeleton';
+export * from './components/ps-link-tile-grid';
+export * from './components/ps-metric-grid';
+export * from './components/ps-metric-grid-skeleton';
+export * from './components/ps-metric-row';
+export * from './components/ps-page-header';
+export * from './components/ps-page-intro';
+export * from './components/ps-page-layout';
+export * from './components/ps-page-skeleton';
+export * from './components/ps-page-stack';
+export * from './components/ps-section-panel';
+export * from './components/ps-section-panel-skeleton';
+export * from './components/ps-signed-amount';
+export * from './components/ps-tab-row-skeleton';
+export * from './components/ps-table-list-skeleton';
+export * from './components/ps-table-page-skeleton';
+export * from './components/ps-theme-controller';
+export * from './components/ps-theme-system-listener';
+export * from './components/ps-tool-card-grid';
+export * from './constants/ps-amount-direction-classes';
+export * from './constants/ps-faq-block-kind';
+export * from './constants/ps-icon-action-config';
+export * from './constants/ps-metric-grid-config';
+export * from './constants/ps-page-skeleton-config';
+export * from './constants/ps-website-section-config';
+export * from './hooks/use-ps-theme-mode';
+export * from './models/ps-faq-block-data';
+export * from './models/ps-feature-card-data';
+export * from './models/ps-link-tile-data';
+export * from './models/ps-metric-item-data';
+export * from './models/ps-theme-mode-state';
+export * from './models/ps-tool-card-data';

package/dist/index.js

@@ -71,3 +71,45 @@ __exportStar(require("./models/ps-draggable-grid"), exports);
 __exportStar(require("./constants/ps-draggable-grid"), exports);
 __exportStar(require("./constants/ps-navigation-progress-config"), exports);
 __exportStar(require("./constants/ps-step-progress-config"), exports);
+__exportStar(require("./components/ps-active-filter-chip"), exports);
+__exportStar(require("./components/ps-back-link"), exports);
+__exportStar(require("./components/ps-card-block-skeleton"), exports);
+__exportStar(require("./components/ps-data-boundary"), exports);
+__exportStar(require("./components/ps-faq-answer"), exports);
+__exportStar(require("./components/ps-feature-grid"), exports);
+__exportStar(require("./components/ps-form-fields-skeleton"), exports);
+__exportStar(require("./components/ps-form-page-skeleton"), exports);
+__exportStar(require("./components/ps-icon-button"), exports);
+__exportStar(require("./components/ps-icon-link"), exports);
+__exportStar(require("./components/ps-intro-skeleton"), exports);
+__exportStar(require("./components/ps-link-tile-grid"), exports);
+__exportStar(require("./components/ps-metric-grid"), exports);
+__exportStar(require("./components/ps-metric-grid-skeleton"), exports);
+__exportStar(require("./components/ps-metric-row"), exports);
+__exportStar(require("./components/ps-page-header"), exports);
+__exportStar(require("./components/ps-page-intro"), exports);
+__exportStar(require("./components/ps-page-layout"), exports);
+__exportStar(require("./components/ps-page-skeleton"), exports);
+__exportStar(require("./components/ps-page-stack"), exports);
+__exportStar(require("./components/ps-section-panel"), exports);
+__exportStar(require("./components/ps-section-panel-skeleton"), exports);
+__exportStar(require("./components/ps-signed-amount"), exports);
+__exportStar(require("./components/ps-tab-row-skeleton"), exports);
+__exportStar(require("./components/ps-table-list-skeleton"), exports);
+__exportStar(require("./components/ps-table-page-skeleton"), exports);
+__exportStar(require("./components/ps-theme-controller"), exports);
+__exportStar(require("./components/ps-theme-system-listener"), exports);
+__exportStar(require("./components/ps-tool-card-grid"), exports);
+__exportStar(require("./constants/ps-amount-direction-classes"), exports);
+__exportStar(require("./constants/ps-faq-block-kind"), exports);
+__exportStar(require("./constants/ps-icon-action-config"), exports);
+__exportStar(require("./constants/ps-metric-grid-config"), exports);
+__exportStar(require("./constants/ps-page-skeleton-config"), exports);
+__exportStar(require("./constants/ps-website-section-config"), exports);
+__exportStar(require("./hooks/use-ps-theme-mode"), exports);
+__exportStar(require("./models/ps-faq-block-data"), exports);
+__exportStar(require("./models/ps-feature-card-data"), exports);
+__exportStar(require("./models/ps-link-tile-data"), exports);
+__exportStar(require("./models/ps-metric-item-data"), exports);
+__exportStar(require("./models/ps-theme-mode-state"), exports);
+__exportStar(require("./models/ps-tool-card-data"), exports);

package/dist/models/ps-faq-block-data.d.ts

@@ -0,0 +1,5 @@
+import type { PsFaqBlockKind } from '../constants/ps-faq-block-kind';
+export interface PsFaqBlockData {
+    items: string[];
+    kind: PsFaqBlockKind;
+}

package/dist/models/ps-faq-block-data.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/models/ps-feature-card-data.d.ts

@@ -0,0 +1,6 @@
+import type { PsIconKey } from '@pallasoft/ps-icons';
+export interface PsFeatureCardData {
+    description: string;
+    iconKey: PsIconKey;
+    title: string;
+}

package/dist/models/ps-feature-card-data.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/models/ps-link-tile-data.d.ts

@@ -0,0 +1,6 @@
+export interface PsLinkTileData {
+    ariaLabel: string;
+    description: string;
+    href: string;
+    title: string;
+}

package/dist/models/ps-link-tile-data.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });