@pallasoft/ps-core-components 2.26.0 → 2.28.0

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

@@ -0,0 +1,7 @@
+import type { PsDividerOrientation } from '../models/ps-divider-orientation';
+export interface PsDividerProps {
+    className?: string;
+    label?: string;
+    orientation?: PsDividerOrientation;
+}
+export declare const PsDivider: ({ className, label, orientation, }: PsDividerProps) => import("react").JSX.Element;

package/dist/components/ps-divider.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsDivider = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const PsDivider = ({ className = '', label, orientation = 'horizontal', }) => {
+    if (orientation === 'vertical')
+        return ((0, jsx_runtime_1.jsx)("div", { "aria-orientation": 'vertical', className: `w-px shrink-0 self-stretch bg-line ${className}`, role: 'separator' }));
+    if (!label)
+        return ((0, jsx_runtime_1.jsx)("div", { "aria-orientation": 'horizontal', className: `h-px w-full shrink-0 bg-line ${className}`, role: 'separator' }));
+    return ((0, jsx_runtime_1.jsxs)("div", { "aria-label": label, "aria-orientation": 'horizontal', className: `flex w-full items-center gap-3 ${className}`, role: 'separator', children: [(0, jsx_runtime_1.jsx)("span", { "aria-hidden": 'true', className: 'h-px flex-1 bg-line' }), (0, jsx_runtime_1.jsx)("span", { "aria-hidden": 'true', className: 'text-xs text-ink/55', children: label }), (0, jsx_runtime_1.jsx)("span", { "aria-hidden": 'true', className: 'h-px flex-1 bg-line' })] }));
+};
+exports.PsDivider = PsDivider;

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

@@ -0,0 +1,12 @@
+import type { ReactNode } from 'react';
+export interface PsOverviewCardProps {
+    action?: ReactNode;
+    badge?: ReactNode;
+    children?: ReactNode;
+    className?: string;
+    footer?: ReactNode;
+    icon?: ReactNode;
+    summary?: string;
+    title: string;
+}
+export declare const PsOverviewCard: ({ action, badge, children, className, footer, icon, summary, title, }: PsOverviewCardProps) => import("react").JSX.Element;

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

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsOverviewCard = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ps_design_system_1 = require("@pallasoft/ps-design-system");
+const PsOverviewCard = ({ action, badge, children, className, footer, icon, summary, title, }) => ((0, jsx_runtime_1.jsxs)("section", { className: ps_design_system_1.PallasoftClassNameService.merge('flex min-w-0 flex-col gap-4 rounded-ps-panel border border-line bg-surface p-5', className), children: [(0, jsx_runtime_1.jsxs)("header", { className: 'flex min-w-0 items-start gap-3', children: [icon ? (0, jsx_runtime_1.jsx)("span", { className: 'ps-icon-surface h-10 w-10 shrink-0', children: icon }) : null, (0, jsx_runtime_1.jsxs)("div", { className: 'flex min-w-0 flex-1 flex-col gap-1', children: [(0, jsx_runtime_1.jsxs)("div", { className: 'flex flex-wrap items-center gap-2', children: [(0, jsx_runtime_1.jsx)("h2", { className: 'text-base font-semibold text-ink', children: title }), badge] }), summary ? (0, jsx_runtime_1.jsx)("p", { className: 'break-words text-sm leading-6 text-ink/60', children: summary }) : null] }), action ? (0, jsx_runtime_1.jsx)("div", { className: 'flex shrink-0 items-center gap-2', children: action }) : null] }), children ? (0, jsx_runtime_1.jsx)("div", { className: 'flex min-w-0 flex-col gap-1', children: children }) : null, footer ? (0, jsx_runtime_1.jsx)("div", { className: 'flex flex-wrap items-center gap-2', children: footer }) : null] }));
+exports.PsOverviewCard = PsOverviewCard;

package/dist/components/ps-store-badge.js

@@ -9,15 +9,10 @@ const PsStoreBadge = ({ className, href, labels, onPress, platform, size = 'defa
     const shownLabels = labels === undefined ? platformData.labels : labels;
     const sizeClasses = ps_store_badge_config_1.PsStoreBadgeClasses.sizes[size];
     const badgeClassName = ps_design_system_1.PallasoftClassNameService.merge(ps_store_badge_config_1.PsStoreBadgeClasses.base, sizeClasses.badge, className);
-    const badgeStyle = {
-        backgroundColor: ps_store_badge_config_1.PsStoreBadgeConfig.colors.background,
-        borderColor: ps_store_badge_config_1.PsStoreBadgeConfig.colors.border,
-        color: ps_store_badge_config_1.PsStoreBadgeConfig.colors.text,
-    };
     const ariaLabel = `${shownLabels.caption} ${shownLabels.name}`;
-    const content = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("svg", { "aria-hidden": 'true', className: ps_design_system_1.PallasoftClassNameService.merge('shrink-0', sizeClasses.logo), viewBox: ps_store_badge_config_1.PsStoreBadgeConfig.logoViewBox, xmlns: 'http://www.w3.org/2000/svg', children: platformData.logoPaths.map((path) => ((0, jsx_runtime_1.jsx)("path", { d: path.d, fill: path.fill }, path.d))) }), (0, jsx_runtime_1.jsxs)("span", { "aria-hidden": 'true', className: 'flex min-w-0 flex-col items-start gap-0.5', children: [(0, jsx_runtime_1.jsx)("span", { className: ps_design_system_1.PallasoftClassNameService.merge('whitespace-nowrap', sizeClasses.caption), children: shownLabels.caption }), (0, jsx_runtime_1.jsx)("span", { className: ps_design_system_1.PallasoftClassNameService.merge('whitespace-nowrap', sizeClasses.name), children: shownLabels.name })] })] }));
+    const content = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { "aria-hidden": 'true', className: ps_design_system_1.PallasoftClassNameService.merge(ps_store_badge_config_1.PsStoreBadgeClasses.tile, sizeClasses.tile), children: (0, jsx_runtime_1.jsx)("svg", { className: sizeClasses.logo, fill: 'currentColor', viewBox: ps_store_badge_config_1.PsStoreBadgeConfig.logoViewBox, xmlns: 'http://www.w3.org/2000/svg', children: platformData.logoPaths.map((path) => ((0, jsx_runtime_1.jsx)("path", { d: path.d }, path.d))) }) }), (0, jsx_runtime_1.jsxs)("span", { "aria-hidden": 'true', className: 'flex min-w-0 flex-col items-start', children: [(0, jsx_runtime_1.jsx)("span", { className: ps_design_system_1.PallasoftClassNameService.merge('truncate max-w-full', sizeClasses.caption), children: shownLabels.caption }), (0, jsx_runtime_1.jsx)("span", { className: ps_design_system_1.PallasoftClassNameService.merge('truncate max-w-full', sizeClasses.name), children: shownLabels.name })] })] }));
     if (href === undefined)
-        return ((0, jsx_runtime_1.jsx)("button", { "aria-label": ariaLabel, className: badgeClassName, "data-platform": platform, onClick: onPress, style: badgeStyle, type: 'button', children: content }));
-    return ((0, jsx_runtime_1.jsx)("a", { "aria-label": ariaLabel, className: badgeClassName, "data-platform": platform, href: href, rel: 'noopener noreferrer', style: badgeStyle, target: '_blank', children: content }));
+        return ((0, jsx_runtime_1.jsx)("button", { "aria-label": ariaLabel, className: badgeClassName, "data-platform": platform, onClick: onPress, type: 'button', children: content }));
+    return ((0, jsx_runtime_1.jsx)("a", { "aria-label": ariaLabel, className: badgeClassName, "data-platform": platform, href: href, rel: 'noopener noreferrer', target: '_blank', children: content }));
 };
 exports.PsStoreBadge = PsStoreBadge;

package/dist/constants/ps-store-badge-config.d.ts

@@ -1,9 +1,4 @@
 export declare const PsStoreBadgeConfig: {
-    readonly colors: {
-        readonly background: "#000000";
-        readonly border: "#A6A6A6";
-        readonly text: "#FFFFFF";
-    };
     readonly logoViewBox: "0 0 24 24";
     readonly platforms: {
         "app-store": {
@@ -13,7 +8,6 @@ export declare const PsStoreBadgeConfig: {
             };
             logoPaths: {
                 d: string;
-                fill: string;
             }[];
         };
         "google-play": {
@@ -23,28 +17,30 @@ export declare const PsStoreBadgeConfig: {
             };
             logoPaths: {
                 d: string;
-                fill: string;
             }[];
         };
     };
 };
 export declare const PsStoreBadgeClasses: {
-    readonly base: "ps-focus-ring inline-flex shrink-0 items-center rounded-lg border font-sans leading-none transition-opacity hover:opacity-85 motion-reduce:transition-none";
-    readonly group: "flex flex-wrap items-center";
+    readonly base: "ps-focus-ring ps-liquid ps-liquid-control ps-pressable group/store inline-flex w-full min-w-0 items-center bg-white/72 font-sans text-left text-ink hover:border-primary/30 dark:border-white/16 dark:bg-white/12 motion-reduce:transition-none motion-reduce:hover:transform-none";
+    readonly group: "grid w-full grid-cols-1 sm:grid-cols-2";
     readonly sizes: {
         readonly default: {
-            readonly badge: "h-11 min-w-[8.25rem] gap-2 px-3";
-            readonly caption: "text-[0.625rem]";
+            readonly badge: "min-h-12 gap-3 px-2.5 py-1.5";
+            readonly caption: "text-xs leading-4";
             readonly gap: "gap-3";
-            readonly logo: "size-6";
-            readonly name: "text-lg font-semibold tracking-tight";
+            readonly logo: "size-5";
+            readonly name: "text-sm font-semibold leading-5";
+            readonly tile: "size-9";
         };
         readonly large: {
-            readonly badge: "h-14 min-w-[10.5rem] gap-2.5 px-4";
-            readonly caption: "text-xs";
+            readonly badge: "min-h-14 gap-3.5 px-3 py-2";
+            readonly caption: "text-xs leading-4";
             readonly gap: "gap-4";
-            readonly logo: "size-8";
-            readonly name: "text-2xl font-semibold tracking-tight";
+            readonly logo: "size-6";
+            readonly name: "text-base font-semibold leading-6";
+            readonly tile: "size-10";
         };
     };
+    readonly tile: "ps-icon-surface transition-colors group-hover/store:bg-primary/15 motion-reduce:transition-none";
 };

package/dist/constants/ps-store-badge-config.js

@@ -3,11 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.PsStoreBadgeClasses = exports.PsStoreBadgeConfig = void 0;
 const ps_store_platform_1 = require("./ps-store-platform");
 exports.PsStoreBadgeConfig = {
-    colors: {
-        background: '#000000',
-        border: '#A6A6A6',
-        text: '#FFFFFF',
-    },
     logoViewBox: '0 0 24 24',
     platforms: {
         [ps_store_platform_1.PsStorePlatform.appStore]: {
@@ -15,50 +10,39 @@ exports.PsStoreBadgeConfig = {
             logoPaths: [
                 {
                     d: 'M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701',
-                    fill: '#FFFFFF',
                 },
             ],
         },
         [ps_store_platform_1.PsStorePlatform.googlePlay]: {
-            labels: { caption: 'GET IT ON', name: 'Google Play' },
+            labels: { caption: 'Get it on', name: 'Google Play' },
             logoPaths: [
                 {
-                    d: 'M1.337.924a1.486 1.486 0 0 0-.112.568v21.017c0 .217.045.419.124.6l11.155-11.087L1.337.924z',
-                    fill: '#4285F4',
-                },
-                {
-                    d: 'M13.544 10.989l3.258-3.238L3.45.195a1.466 1.466 0 0 0-.946-.179l11.04 10.973z',
-                    fill: '#34A853',
-                },
-                {
-                    d: 'M22.018 13.298l-3.919 2.218-3.515-3.493 3.543-3.521 3.891 2.202a1.49 1.49 0 0 1 0 2.594z',
-                    fill: '#FBBC04',
-                },
-                {
-                    d: 'M13.544 13.056l-11 10.933c.298.036.612-.016.906-.183l13.324-7.54-3.23-3.21z',
-                    fill: '#EA4335',
+                    d: 'M6.2 2.9c-.5-.3-1.2.1-1.2.7v16.8c0 .6.7 1 1.2.7l14-8.4c.5-.3.5-1.1 0-1.4L6.2 2.9z',
                 },
             ],
         },
     },
 };
 exports.PsStoreBadgeClasses = {
-    base: 'ps-focus-ring inline-flex shrink-0 items-center rounded-lg border font-sans leading-none transition-opacity hover:opacity-85 motion-reduce:transition-none',
-    group: 'flex flex-wrap items-center',
+    base: 'ps-focus-ring ps-liquid ps-liquid-control ps-pressable group/store inline-flex w-full min-w-0 items-center bg-white/72 font-sans text-left text-ink hover:border-primary/30 dark:border-white/16 dark:bg-white/12 motion-reduce:transition-none motion-reduce:hover:transform-none',
+    group: 'grid w-full grid-cols-1 sm:grid-cols-2',
     sizes: {
         default: {
-            badge: 'h-11 min-w-[8.25rem] gap-2 px-3',
-            caption: 'text-[0.625rem]',
+            badge: 'min-h-12 gap-3 px-2.5 py-1.5',
+            caption: 'text-xs leading-4',
             gap: 'gap-3',
-            logo: 'size-6',
-            name: 'text-lg font-semibold tracking-tight',
+            logo: 'size-5',
+            name: 'text-sm font-semibold leading-5',
+            tile: 'size-9',
         },
         large: {
-            badge: 'h-14 min-w-[10.5rem] gap-2.5 px-4',
-            caption: 'text-xs',
+            badge: 'min-h-14 gap-3.5 px-3 py-2',
+            caption: 'text-xs leading-4',
             gap: 'gap-4',
-            logo: 'size-8',
-            name: 'text-2xl font-semibold tracking-tight',
+            logo: 'size-6',
+            name: 'text-base font-semibold leading-6',
+            tile: 'size-10',
         },
     },
+    tile: 'ps-icon-surface transition-colors group-hover/store:bg-primary/15 motion-reduce:transition-none',
 };

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

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const PsDivider = ({ className = '', label, orientation = 'horizontal', }) => {
+    if (orientation === 'vertical')
+        return (_jsx("div", { "aria-orientation": 'vertical', className: `w-px shrink-0 self-stretch bg-line ${className}`, role: 'separator' }));
+    if (!label)
+        return (_jsx("div", { "aria-orientation": 'horizontal', className: `h-px w-full shrink-0 bg-line ${className}`, role: 'separator' }));
+    return (_jsxs("div", { "aria-label": label, "aria-orientation": 'horizontal', className: `flex w-full items-center gap-3 ${className}`, role: 'separator', children: [_jsx("span", { "aria-hidden": 'true', className: 'h-px flex-1 bg-line' }), _jsx("span", { "aria-hidden": 'true', className: 'text-xs text-ink/55', children: label }), _jsx("span", { "aria-hidden": 'true', className: 'h-px flex-1 bg-line' })] }));
+};

package/dist/esm/components/ps-overview-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 PsOverviewCard = ({ action, badge, children, className, footer, icon, summary, title, }) => (_jsxs("section", { className: PallasoftClassNameService.merge('flex min-w-0 flex-col gap-4 rounded-ps-panel border border-line bg-surface p-5', className), children: [_jsxs("header", { className: 'flex min-w-0 items-start gap-3', children: [icon ? _jsx("span", { className: 'ps-icon-surface h-10 w-10 shrink-0', children: icon }) : null, _jsxs("div", { className: 'flex min-w-0 flex-1 flex-col gap-1', children: [_jsxs("div", { className: 'flex flex-wrap items-center gap-2', children: [_jsx("h2", { className: 'text-base font-semibold text-ink', children: title }), badge] }), summary ? _jsx("p", { className: 'break-words text-sm leading-6 text-ink/60', children: summary }) : null] }), action ? _jsx("div", { className: 'flex shrink-0 items-center gap-2', children: action }) : null] }), children ? _jsx("div", { className: 'flex min-w-0 flex-col gap-1', children: children }) : null, footer ? _jsx("div", { className: 'flex flex-wrap items-center gap-2', children: footer }) : null] }));

package/dist/esm/components/ps-store-badge.js

@@ -6,14 +6,9 @@ export const PsStoreBadge = ({ className, href, labels, onPress, platform, size
     const shownLabels = labels === undefined ? platformData.labels : labels;
     const sizeClasses = PsStoreBadgeClasses.sizes[size];
     const badgeClassName = PallasoftClassNameService.merge(PsStoreBadgeClasses.base, sizeClasses.badge, className);
-    const badgeStyle = {
-        backgroundColor: PsStoreBadgeConfig.colors.background,
-        borderColor: PsStoreBadgeConfig.colors.border,
-        color: PsStoreBadgeConfig.colors.text,
-    };
     const ariaLabel = `${shownLabels.caption} ${shownLabels.name}`;
-    const content = (_jsxs(_Fragment, { children: [_jsx("svg", { "aria-hidden": 'true', className: PallasoftClassNameService.merge('shrink-0', sizeClasses.logo), viewBox: PsStoreBadgeConfig.logoViewBox, xmlns: 'http://www.w3.org/2000/svg', children: platformData.logoPaths.map((path) => (_jsx("path", { d: path.d, fill: path.fill }, path.d))) }), _jsxs("span", { "aria-hidden": 'true', className: 'flex min-w-0 flex-col items-start gap-0.5', children: [_jsx("span", { className: PallasoftClassNameService.merge('whitespace-nowrap', sizeClasses.caption), children: shownLabels.caption }), _jsx("span", { className: PallasoftClassNameService.merge('whitespace-nowrap', sizeClasses.name), children: shownLabels.name })] })] }));
+    const content = (_jsxs(_Fragment, { children: [_jsx("span", { "aria-hidden": 'true', className: PallasoftClassNameService.merge(PsStoreBadgeClasses.tile, sizeClasses.tile), children: _jsx("svg", { className: sizeClasses.logo, fill: 'currentColor', viewBox: PsStoreBadgeConfig.logoViewBox, xmlns: 'http://www.w3.org/2000/svg', children: platformData.logoPaths.map((path) => (_jsx("path", { d: path.d }, path.d))) }) }), _jsxs("span", { "aria-hidden": 'true', className: 'flex min-w-0 flex-col items-start', children: [_jsx("span", { className: PallasoftClassNameService.merge('truncate max-w-full', sizeClasses.caption), children: shownLabels.caption }), _jsx("span", { className: PallasoftClassNameService.merge('truncate max-w-full', sizeClasses.name), children: shownLabels.name })] })] }));
     if (href === undefined)
-        return (_jsx("button", { "aria-label": ariaLabel, className: badgeClassName, "data-platform": platform, onClick: onPress, style: badgeStyle, type: 'button', children: content }));
-    return (_jsx("a", { "aria-label": ariaLabel, className: badgeClassName, "data-platform": platform, href: href, rel: 'noopener noreferrer', style: badgeStyle, target: '_blank', children: content }));
+        return (_jsx("button", { "aria-label": ariaLabel, className: badgeClassName, "data-platform": platform, onClick: onPress, type: 'button', children: content }));
+    return (_jsx("a", { "aria-label": ariaLabel, className: badgeClassName, "data-platform": platform, href: href, rel: 'noopener noreferrer', target: '_blank', children: content }));
 };

package/dist/esm/constants/ps-store-badge-config.js

@@ -1,10 +1,5 @@
 import { PsStorePlatform } from './ps-store-platform';
 export const PsStoreBadgeConfig = {
-    colors: {
-        background: '#000000',
-        border: '#A6A6A6',
-        text: '#FFFFFF',
-    },
     logoViewBox: '0 0 24 24',
     platforms: {
         [PsStorePlatform.appStore]: {
@@ -12,50 +7,39 @@ export const PsStoreBadgeConfig = {
             logoPaths: [
                 {
                     d: 'M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701',
-                    fill: '#FFFFFF',
                 },
             ],
         },
         [PsStorePlatform.googlePlay]: {
-            labels: { caption: 'GET IT ON', name: 'Google Play' },
+            labels: { caption: 'Get it on', name: 'Google Play' },
             logoPaths: [
                 {
-                    d: 'M1.337.924a1.486 1.486 0 0 0-.112.568v21.017c0 .217.045.419.124.6l11.155-11.087L1.337.924z',
-                    fill: '#4285F4',
-                },
-                {
-                    d: 'M13.544 10.989l3.258-3.238L3.45.195a1.466 1.466 0 0 0-.946-.179l11.04 10.973z',
-                    fill: '#34A853',
-                },
-                {
-                    d: 'M22.018 13.298l-3.919 2.218-3.515-3.493 3.543-3.521 3.891 2.202a1.49 1.49 0 0 1 0 2.594z',
-                    fill: '#FBBC04',
-                },
-                {
-                    d: 'M13.544 13.056l-11 10.933c.298.036.612-.016.906-.183l13.324-7.54-3.23-3.21z',
-                    fill: '#EA4335',
+                    d: 'M6.2 2.9c-.5-.3-1.2.1-1.2.7v16.8c0 .6.7 1 1.2.7l14-8.4c.5-.3.5-1.1 0-1.4L6.2 2.9z',
                 },
             ],
         },
     },
 };
 export const PsStoreBadgeClasses = {
-    base: 'ps-focus-ring inline-flex shrink-0 items-center rounded-lg border font-sans leading-none transition-opacity hover:opacity-85 motion-reduce:transition-none',
-    group: 'flex flex-wrap items-center',
+    base: 'ps-focus-ring ps-liquid ps-liquid-control ps-pressable group/store inline-flex w-full min-w-0 items-center bg-white/72 font-sans text-left text-ink hover:border-primary/30 dark:border-white/16 dark:bg-white/12 motion-reduce:transition-none motion-reduce:hover:transform-none',
+    group: 'grid w-full grid-cols-1 sm:grid-cols-2',
     sizes: {
         default: {
-            badge: 'h-11 min-w-[8.25rem] gap-2 px-3',
-            caption: 'text-[0.625rem]',
+            badge: 'min-h-12 gap-3 px-2.5 py-1.5',
+            caption: 'text-xs leading-4',
             gap: 'gap-3',
-            logo: 'size-6',
-            name: 'text-lg font-semibold tracking-tight',
+            logo: 'size-5',
+            name: 'text-sm font-semibold leading-5',
+            tile: 'size-9',
         },
         large: {
-            badge: 'h-14 min-w-[10.5rem] gap-2.5 px-4',
-            caption: 'text-xs',
+            badge: 'min-h-14 gap-3.5 px-3 py-2',
+            caption: 'text-xs leading-4',
             gap: 'gap-4',
-            logo: 'size-8',
-            name: 'text-2xl font-semibold tracking-tight',
+            logo: 'size-6',
+            name: 'text-base font-semibold leading-6',
+            tile: 'size-10',
         },
     },
+    tile: 'ps-icon-surface transition-colors group-hover/store:bg-primary/15 motion-reduce:transition-none',
 };

package/dist/esm/hooks/use-ps-optimistic-fetcher.js

@@ -0,0 +1,68 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { usePsChangeQueue } from './use-ps-change-queue';
+import { usePsOptimisticRows } from './use-ps-optimistic-rows';
+export const usePsOptimisticFetcher = ({ apply, fetcher, isHolding = false, isSuccess, merge, revalidator, rows, }) => {
+    const [isUnsettled, setIsUnsettled] = useState(false);
+    const submitted = useRef(0);
+    const settle = useRef(null);
+    const sawBusy = useRef(false);
+    const dataBefore = useRef(fetcher.data);
+    const dataSeen = useRef(fetcher.data);
+    const { forgetLast, remember, rows: shown, } = usePsOptimisticRows({
+        apply,
+        isHolding,
+        isSaving: isUnsettled || fetcher.state !== 'idle' || revalidator.state !== 'idle',
+        rows,
+    });
+    useEffect(() => {
+        dataSeen.current = fetcher.data;
+        if (settle.current === null)
+            return;
+        if (fetcher.state !== 'idle') {
+            sawBusy.current = true;
+            return;
+        }
+        if (!sawBusy.current && fetcher.data === dataBefore.current)
+            return;
+        const done = settle.current;
+        settle.current = null;
+        sawBusy.current = false;
+        done(fetcher.data);
+    }, [fetcher.data, fetcher.state]);
+    const submitOne = useCallback((values) => new Promise((resolve) => {
+        settle.current = resolve;
+        sawBusy.current = false;
+        dataBefore.current = dataSeen.current;
+        void fetcher.submit(values, { method: 'post' });
+    }), [fetcher]);
+    const send = useCallback(async (queued) => {
+        for (const submission of merge === undefined ? queued : merge(queued)) {
+            const result = await submitOne(submission);
+            if (!isSuccess(result))
+                throw result;
+        }
+    }, [isSuccess, merge, submitOne]);
+    const revalidate = useCallback(() => {
+        const through = submitted.current;
+        void Promise.resolve(revalidator.revalidate()).finally(() => {
+            if (submitted.current === through)
+                setIsUnsettled(false);
+        });
+    }, [revalidator]);
+    const forgetFailed = useCallback((failed, dropped) => {
+        for (let index = 0; index < failed.length + dropped.length; index += 1)
+            forgetLast();
+    }, [forgetLast]);
+    const queue = usePsChangeQueue({
+        onDrained: revalidate,
+        onFailed: forgetFailed,
+        send,
+    });
+    const submit = useCallback((values) => {
+        submitted.current += 1;
+        setIsUnsettled(true);
+        remember(values);
+        queue.enqueue(values);
+    }, [queue, remember]);
+    return { rows: shown, submit };
+};

package/dist/esm/index.js

@@ -75,6 +75,12 @@ export * from './hooks/use-ps-change-queue';
 export * from './interfaces/ps-change-queue-input';
 export * from './interfaces/ps-change-queue-result';
 export * from './hooks/use-ps-optimistic-rows';
+export * from './hooks/use-ps-optimistic-fetcher';
+export * from './interfaces/ps-fetcher-like';
+export * from './interfaces/ps-fetcher-submit-options';
+export * from './interfaces/ps-optimistic-fetcher-input';
+export * from './interfaces/ps-optimistic-fetcher-result';
+export * from './interfaces/ps-revalidator-like';
 export * from './interfaces/ps-optimistic-rows-input';
 export * from './interfaces/ps-optimistic-rows-result';
 export * from './hooks/use-ps-navigation-progress';
@@ -129,6 +135,7 @@ export * from './models/ps-theme-mode-state';
 export * from './models/ps-tool-card-data';
 export * from './components/ps-capped-list';
 export * from './components/ps-detail-list';
+export * from './components/ps-overview-card';
 export * from './components/ps-form-footer';
 export * from './components/ps-start-highlight';
 export * from './components/ps-start-panel';
@@ -145,3 +152,5 @@ export * from './components/ps-drag-grip';
 export * from './components/ps-drag-overlay';
 export * from './hooks/use-ps-drag-sensors';
 export * from './hooks/use-ps-reduced-motion';
+export * from './components/ps-divider';
+export * from './models/ps-divider-orientation';

package/dist/esm/interfaces/ps-fetcher-like.js

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

package/dist/esm/interfaces/ps-fetcher-submit-options.js

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

package/dist/esm/interfaces/ps-optimistic-fetcher-input.js

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

package/dist/esm/interfaces/ps-optimistic-fetcher-result.js

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

package/dist/esm/interfaces/ps-revalidator-like.js

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

package/dist/esm/models/ps-divider-orientation.js

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

package/dist/hooks/use-ps-optimistic-fetcher.d.ts

@@ -0,0 +1,3 @@
+import type { PsOptimisticFetcherInput } from '../interfaces/ps-optimistic-fetcher-input';
+import type { PsOptimisticFetcherResult } from '../interfaces/ps-optimistic-fetcher-result';
+export declare const usePsOptimisticFetcher: <Row, Data>({ apply, fetcher, isHolding, isSuccess, merge, revalidator, rows, }: PsOptimisticFetcherInput<Row, Data>) => PsOptimisticFetcherResult<Row>;

package/dist/hooks/use-ps-optimistic-fetcher.js

@@ -0,0 +1,72 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePsOptimisticFetcher = void 0;
+const react_1 = require("react");
+const use_ps_change_queue_1 = require("./use-ps-change-queue");
+const use_ps_optimistic_rows_1 = require("./use-ps-optimistic-rows");
+const usePsOptimisticFetcher = ({ apply, fetcher, isHolding = false, isSuccess, merge, revalidator, rows, }) => {
+    const [isUnsettled, setIsUnsettled] = (0, react_1.useState)(false);
+    const submitted = (0, react_1.useRef)(0);
+    const settle = (0, react_1.useRef)(null);
+    const sawBusy = (0, react_1.useRef)(false);
+    const dataBefore = (0, react_1.useRef)(fetcher.data);
+    const dataSeen = (0, react_1.useRef)(fetcher.data);
+    const { forgetLast, remember, rows: shown, } = (0, use_ps_optimistic_rows_1.usePsOptimisticRows)({
+        apply,
+        isHolding,
+        isSaving: isUnsettled || fetcher.state !== 'idle' || revalidator.state !== 'idle',
+        rows,
+    });
+    (0, react_1.useEffect)(() => {
+        dataSeen.current = fetcher.data;
+        if (settle.current === null)
+            return;
+        if (fetcher.state !== 'idle') {
+            sawBusy.current = true;
+            return;
+        }
+        if (!sawBusy.current && fetcher.data === dataBefore.current)
+            return;
+        const done = settle.current;
+        settle.current = null;
+        sawBusy.current = false;
+        done(fetcher.data);
+    }, [fetcher.data, fetcher.state]);
+    const submitOne = (0, react_1.useCallback)((values) => new Promise((resolve) => {
+        settle.current = resolve;
+        sawBusy.current = false;
+        dataBefore.current = dataSeen.current;
+        void fetcher.submit(values, { method: 'post' });
+    }), [fetcher]);
+    const send = (0, react_1.useCallback)(async (queued) => {
+        for (const submission of merge === undefined ? queued : merge(queued)) {
+            const result = await submitOne(submission);
+            if (!isSuccess(result))
+                throw result;
+        }
+    }, [isSuccess, merge, submitOne]);
+    const revalidate = (0, react_1.useCallback)(() => {
+        const through = submitted.current;
+        void Promise.resolve(revalidator.revalidate()).finally(() => {
+            if (submitted.current === through)
+                setIsUnsettled(false);
+        });
+    }, [revalidator]);
+    const forgetFailed = (0, react_1.useCallback)((failed, dropped) => {
+        for (let index = 0; index < failed.length + dropped.length; index += 1)
+            forgetLast();
+    }, [forgetLast]);
+    const queue = (0, use_ps_change_queue_1.usePsChangeQueue)({
+        onDrained: revalidate,
+        onFailed: forgetFailed,
+        send,
+    });
+    const submit = (0, react_1.useCallback)((values) => {
+        submitted.current += 1;
+        setIsUnsettled(true);
+        remember(values);
+        queue.enqueue(values);
+    }, [queue, remember]);
+    return { rows: shown, submit };
+};
+exports.usePsOptimisticFetcher = usePsOptimisticFetcher;

package/dist/index.d.ts

@@ -75,6 +75,12 @@ export * from './hooks/use-ps-change-queue';
 export * from './interfaces/ps-change-queue-input';
 export * from './interfaces/ps-change-queue-result';
 export * from './hooks/use-ps-optimistic-rows';
+export * from './hooks/use-ps-optimistic-fetcher';
+export * from './interfaces/ps-fetcher-like';
+export * from './interfaces/ps-fetcher-submit-options';
+export * from './interfaces/ps-optimistic-fetcher-input';
+export * from './interfaces/ps-optimistic-fetcher-result';
+export * from './interfaces/ps-revalidator-like';
 export * from './interfaces/ps-optimistic-rows-input';
 export * from './interfaces/ps-optimistic-rows-result';
 export * from './hooks/use-ps-navigation-progress';
@@ -129,6 +135,7 @@ export * from './models/ps-theme-mode-state';
 export * from './models/ps-tool-card-data';
 export * from './components/ps-capped-list';
 export * from './components/ps-detail-list';
+export * from './components/ps-overview-card';
 export * from './components/ps-form-footer';
 export * from './components/ps-start-highlight';
 export * from './components/ps-start-panel';
@@ -145,3 +152,5 @@ export * from './components/ps-drag-grip';
 export * from './components/ps-drag-overlay';
 export * from './hooks/use-ps-drag-sensors';
 export * from './hooks/use-ps-reduced-motion';
+export * from './components/ps-divider';
+export * from './models/ps-divider-orientation';

package/dist/index.js

@@ -91,6 +91,12 @@ __exportStar(require("./hooks/use-ps-change-queue"), exports);
 __exportStar(require("./interfaces/ps-change-queue-input"), exports);
 __exportStar(require("./interfaces/ps-change-queue-result"), exports);
 __exportStar(require("./hooks/use-ps-optimistic-rows"), exports);
+__exportStar(require("./hooks/use-ps-optimistic-fetcher"), exports);
+__exportStar(require("./interfaces/ps-fetcher-like"), exports);
+__exportStar(require("./interfaces/ps-fetcher-submit-options"), exports);
+__exportStar(require("./interfaces/ps-optimistic-fetcher-input"), exports);
+__exportStar(require("./interfaces/ps-optimistic-fetcher-result"), exports);
+__exportStar(require("./interfaces/ps-revalidator-like"), exports);
 __exportStar(require("./interfaces/ps-optimistic-rows-input"), exports);
 __exportStar(require("./interfaces/ps-optimistic-rows-result"), exports);
 __exportStar(require("./hooks/use-ps-navigation-progress"), exports);
@@ -145,6 +151,7 @@ __exportStar(require("./models/ps-theme-mode-state"), exports);
 __exportStar(require("./models/ps-tool-card-data"), exports);
 __exportStar(require("./components/ps-capped-list"), exports);
 __exportStar(require("./components/ps-detail-list"), exports);
+__exportStar(require("./components/ps-overview-card"), exports);
 __exportStar(require("./components/ps-form-footer"), exports);
 __exportStar(require("./components/ps-start-highlight"), exports);
 __exportStar(require("./components/ps-start-panel"), exports);
@@ -161,3 +168,5 @@ __exportStar(require("./components/ps-drag-grip"), exports);
 __exportStar(require("./components/ps-drag-overlay"), exports);
 __exportStar(require("./hooks/use-ps-drag-sensors"), exports);
 __exportStar(require("./hooks/use-ps-reduced-motion"), exports);
+__exportStar(require("./components/ps-divider"), exports);
+__exportStar(require("./models/ps-divider-orientation"), exports);

package/dist/interfaces/ps-fetcher-like.d.ts

@@ -0,0 +1,6 @@
+import type { PsFetcherSubmitOptions } from './ps-fetcher-submit-options';
+export interface PsFetcherLike<Data> {
+    data: Data | undefined;
+    state: string;
+    submit: (values: Record<string, string>, options: PsFetcherSubmitOptions) => unknown;
+}

package/dist/interfaces/ps-fetcher-like.js

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

package/dist/interfaces/ps-fetcher-submit-options.d.ts

@@ -0,0 +1,3 @@
+export interface PsFetcherSubmitOptions {
+    method: 'post';
+}

package/dist/interfaces/ps-fetcher-submit-options.js

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

package/dist/interfaces/ps-optimistic-fetcher-input.d.ts

@@ -0,0 +1,11 @@
+import type { PsFetcherLike } from './ps-fetcher-like';
+import type { PsRevalidatorLike } from './ps-revalidator-like';
+export interface PsOptimisticFetcherInput<Row, Data> {
+    apply: (rows: Row[], changes: Record<string, string>[]) => Row[];
+    fetcher: PsFetcherLike<Data>;
+    isHolding?: boolean;
+    isSuccess: (data: Data | undefined) => boolean;
+    merge?: (changes: Record<string, string>[]) => Record<string, string>[];
+    revalidator: PsRevalidatorLike;
+    rows: Row[];
+}

package/dist/interfaces/ps-optimistic-fetcher-input.js

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

package/dist/interfaces/ps-optimistic-fetcher-result.d.ts

@@ -0,0 +1,4 @@
+export interface PsOptimisticFetcherResult<Row> {
+    rows: Row[];
+    submit: (values: Record<string, string>) => void;
+}

package/dist/interfaces/ps-optimistic-fetcher-result.js

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

package/dist/interfaces/ps-revalidator-like.d.ts

@@ -0,0 +1,4 @@
+export interface PsRevalidatorLike {
+    revalidate: () => Promise<void> | void;
+    state: string;
+}

package/dist/interfaces/ps-revalidator-like.js

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

package/dist/models/ps-divider-orientation.d.ts

@@ -0,0 +1 @@
+export type PsDividerOrientation = 'horizontal' | 'vertical';

package/dist/models/ps-divider-orientation.js

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

package/dist/models/ps-store-badge-logo-path.d.ts

@@ -1,4 +1,3 @@
 export interface PsStoreBadgeLogoPath {
     d: string;
-    fill: string;
 }

package/package.json

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