@pallasoft/ps-core-components 2.25.0 → 2.26.0

package/dist/components/ps-app-store-buttons.d.ts

@@ -0,0 +1,10 @@
+import type { PsStoreBadgeLabels } from '../models/ps-store-badge-labels';
+export interface PsAppStoreButtonsProps {
+    appStoreLabels?: PsStoreBadgeLabels;
+    appStoreUrl?: string;
+    className?: string;
+    playStoreLabels?: PsStoreBadgeLabels;
+    playStoreUrl?: string;
+    size?: 'default' | 'large';
+}
+export declare const PsAppStoreButtons: ({ appStoreLabels, appStoreUrl, className, playStoreLabels, playStoreUrl, size, }: PsAppStoreButtonsProps) => import("react").JSX.Element;

package/dist/components/ps-app-store-buttons.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsAppStoreButtons = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ps_design_system_1 = require("@pallasoft/ps-design-system");
+const ps_store_badge_config_1 = require("../constants/ps-store-badge-config");
+const ps_store_platform_1 = require("../constants/ps-store-platform");
+const ps_store_badge_1 = require("./ps-store-badge");
+const isLinked = (url) => url !== undefined && url.trim() !== '';
+const PsAppStoreButtons = ({ appStoreLabels, appStoreUrl, className, playStoreLabels, playStoreUrl, size = 'default', }) => {
+    const appStoreHref = isLinked(appStoreUrl) ? appStoreUrl : undefined;
+    const playStoreHref = isLinked(playStoreUrl) ? playStoreUrl : undefined;
+    return ((0, jsx_runtime_1.jsxs)("div", { className: ps_design_system_1.PallasoftClassNameService.merge(ps_store_badge_config_1.PsStoreBadgeClasses.group, ps_store_badge_config_1.PsStoreBadgeClasses.sizes[size].gap, className), children: [(0, jsx_runtime_1.jsx)(ps_store_badge_1.PsStoreBadge, { href: appStoreHref, labels: appStoreLabels, platform: ps_store_platform_1.PsStorePlatform.appStore, size: size }), (0, jsx_runtime_1.jsx)(ps_store_badge_1.PsStoreBadge, { href: playStoreHref, labels: playStoreLabels, platform: ps_store_platform_1.PsStorePlatform.googlePlay, size: size })] }));
+};
+exports.PsAppStoreButtons = PsAppStoreButtons;

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

@@ -13,6 +13,6 @@ const PsSiteHeader = ({ centerContent, className, homeHref, label, LinkComponent
     const renderLogo = (src, darkSrc, baseClassName) => darkSrc ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("img", { alt: logoAlt !== null && logoAlt !== undefined ? logoAlt : label, className: ps_design_system_1.PallasoftClassNameService.merge(baseClassName, 'dark:hidden', logoClassName), decoding: 'async', src: src }), (0, jsx_runtime_1.jsx)("img", { alt: logoAlt !== null && logoAlt !== undefined ? logoAlt : label, className: ps_design_system_1.PallasoftClassNameService.merge(baseClassName, 'hidden dark:block', logoClassName), decoding: 'async', src: darkSrc })] })) : ((0, jsx_runtime_1.jsx)("img", { alt: logoAlt !== null && logoAlt !== undefined ? logoAlt : label, className: ps_design_system_1.PallasoftClassNameService.merge(baseClassName, logoClassName), decoding: 'async', src: src }));
     const logoContent = logoSrcMobile ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: 'hidden sm:contents', children: renderLogo(logoSrc, logoSrcDark, 'h-8 w-auto') }), (0, jsx_runtime_1.jsx)("span", { className: 'contents sm:hidden', children: renderLogo(logoSrcMobile, logoSrcMobileDark, 'h-8 w-auto') }), showLabel ? (0, jsx_runtime_1.jsx)("span", { className: 'text-base font-bold text-ink', children: label }) : null] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [renderLogo(logoSrc, logoSrcDark, 'h-8 w-auto'), showLabel ? (0, jsx_runtime_1.jsx)("span", { className: 'text-base font-bold text-ink', children: label }) : null] }));
     const logoLink = LinkComponent ? ((0, jsx_runtime_1.jsx)(LinkComponent, { "aria-label": logoLabel, className: logoLinkClassName, prefetch: 'intent', to: homeHref, children: logoContent })) : ((0, jsx_runtime_1.jsx)("a", { "aria-label": logoLabel, className: logoLinkClassName, href: homeHref, children: logoContent }));
-    return ((0, jsx_runtime_1.jsx)("header", { ref: headerRef, className: ps_design_system_1.PallasoftClassNameService.merge('fixed inset-x-0 top-0 z-header px-6 pt-4', className), children: (0, jsx_runtime_1.jsxs)("nav", { className: ps_design_system_1.PallasoftClassNameService.merge('ps-glass mx-auto flex max-w-6xl items-center gap-3 rounded-ps-card px-5 py-3', navClassName), children: [onBack ? ((0, jsx_runtime_1.jsx)("button", { "aria-label": 'Back', className: 'ps-focus-ring ps-control-square ps-control-compact flex shrink-0 items-center justify-center rounded-ps-control text-ink md:hidden', onClick: onBack, type: 'button', children: (0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { iconKey: ps_icons_1.PsIconKey.ChevronRight, width: 20, height: 20, className: 'rotate-180' }) })) : null, (0, jsx_runtime_1.jsx)("div", { className: onBack ? 'hidden md:flex' : 'contents', children: logoLink }), (0, jsx_runtime_1.jsx)("div", { className: 'flex min-w-0 flex-1 items-center justify-center gap-3', children: centerContent }), trailing ? (0, jsx_runtime_1.jsx)("div", { className: 'flex shrink-0 items-center gap-2.5', children: trailing }) : null] }) }));
+    return ((0, jsx_runtime_1.jsx)("header", { ref: headerRef, className: ps_design_system_1.PallasoftClassNameService.merge('fixed inset-x-0 top-0 z-header px-4 pt-[max(1rem,env(safe-area-inset-top))] sm:px-6', className), children: (0, jsx_runtime_1.jsxs)("nav", { className: ps_design_system_1.PallasoftClassNameService.merge('ps-glass mx-auto flex max-w-6xl items-center gap-3 rounded-ps-card px-5 py-3', navClassName), children: [onBack ? ((0, jsx_runtime_1.jsx)("button", { "aria-label": 'Back', className: 'ps-focus-ring ps-control-square ps-control-compact flex shrink-0 items-center justify-center rounded-ps-control text-ink md:hidden', onClick: onBack, type: 'button', children: (0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { iconKey: ps_icons_1.PsIconKey.ChevronRight, width: 20, height: 20, className: 'rotate-180' }) })) : null, (0, jsx_runtime_1.jsx)("div", { className: onBack ? 'hidden md:flex' : 'contents', children: logoLink }), (0, jsx_runtime_1.jsx)("div", { className: 'flex min-w-0 flex-1 items-center justify-center gap-3', children: centerContent }), trailing ? (0, jsx_runtime_1.jsx)("div", { className: 'flex shrink-0 items-center gap-2.5', children: trailing }) : null] }) }));
 };
 exports.PsSiteHeader = PsSiteHeader;

package/dist/components/ps-store-badge.d.ts

@@ -0,0 +1,11 @@
+import type { PsStorePlatform } from '../constants/ps-store-platform';
+import type { PsStoreBadgeLabels } from '../models/ps-store-badge-labels';
+export interface PsStoreBadgeProps {
+    className?: string;
+    href?: string;
+    onPress?: () => void;
+    labels?: PsStoreBadgeLabels;
+    platform: PsStorePlatform;
+    size?: 'default' | 'large';
+}
+export declare const PsStoreBadge: ({ className, href, labels, onPress, platform, size, }: PsStoreBadgeProps) => import("react").JSX.Element;

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

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsStoreBadge = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ps_design_system_1 = require("@pallasoft/ps-design-system");
+const ps_store_badge_config_1 = require("../constants/ps-store-badge-config");
+const PsStoreBadge = ({ className, href, labels, onPress, platform, size = 'default', }) => {
+    const platformData = ps_store_badge_config_1.PsStoreBadgeConfig.platforms[platform];
+    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 })] })] }));
+    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 }));
+};
+exports.PsStoreBadge = PsStoreBadge;

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

@@ -9,7 +9,7 @@ export declare const PsDragConfig: {
     readonly touchTolerance: 6;
 };
 export declare const PsDragClasses: {
-    readonly handle: "ps-focus-ring inline-flex h-7 w-7 shrink-0 cursor-grab touch-none items-center justify-center rounded-ps-control 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";
+    readonly handle: "ps-focus-ring ps-touch-target relative inline-flex h-7 w-7 shrink-0 cursor-grab touch-none items-center justify-center rounded-ps-control 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";
     readonly listItem: "min-w-0";
     readonly lifted: "cursor-grabbing rounded-xl bg-surface ring-1 ring-primary/30";
     readonly placeholder: "outline-dashed outline-2 outline-offset-[-2px] outline-primary/35";

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

@@ -12,7 +12,7 @@ exports.PsDragConfig = {
     touchTolerance: 6,
 };
 exports.PsDragClasses = {
-    handle: 'ps-focus-ring inline-flex h-7 w-7 shrink-0 cursor-grab touch-none items-center justify-center rounded-ps-control 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',
+    handle: 'ps-focus-ring ps-touch-target relative inline-flex h-7 w-7 shrink-0 cursor-grab touch-none items-center justify-center rounded-ps-control 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',
     listItem: 'min-w-0',
     lifted: 'cursor-grabbing rounded-xl bg-surface ring-1 ring-primary/30',
     placeholder: 'outline-dashed outline-2 outline-offset-[-2px] outline-primary/35',

package/dist/constants/ps-draggable-grid.d.ts

@@ -9,7 +9,7 @@ export declare const PsDraggableGridConfig: {
     readonly touchTolerance: 6;
 };
 export declare const PsDraggableGridClasses: {
-    readonly handle: "ps-focus-ring inline-flex h-7 w-7 shrink-0 cursor-grab touch-none items-center justify-center rounded-ps-control 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";
+    readonly handle: "ps-focus-ring ps-touch-target relative inline-flex h-7 w-7 shrink-0 cursor-grab touch-none items-center justify-center rounded-ps-control 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";
     readonly item: "min-w-0 rounded-[1.7rem]";
     readonly lifted: "cursor-grabbing rounded-[1.7rem] ring-1 ring-primary/30";
     readonly placeholder: "rounded-[1.7rem] outline-dashed outline-2 outline-offset-[-2px] outline-primary/35";

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

@@ -0,0 +1,50 @@
+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": {
+            labels: {
+                caption: string;
+                name: string;
+            };
+            logoPaths: {
+                d: string;
+                fill: string;
+            }[];
+        };
+        "google-play": {
+            labels: {
+                caption: string;
+                name: string;
+            };
+            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 sizes: {
+        readonly default: {
+            readonly badge: "h-11 min-w-[8.25rem] gap-2 px-3";
+            readonly caption: "text-[0.625rem]";
+            readonly gap: "gap-3";
+            readonly logo: "size-6";
+            readonly name: "text-lg font-semibold tracking-tight";
+        };
+        readonly large: {
+            readonly badge: "h-14 min-w-[10.5rem] gap-2.5 px-4";
+            readonly caption: "text-xs";
+            readonly gap: "gap-4";
+            readonly logo: "size-8";
+            readonly name: "text-2xl font-semibold tracking-tight";
+        };
+    };
+};

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

@@ -0,0 +1,64 @@
+"use strict";
+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]: {
+            labels: { caption: 'Download on the', name: 'App Store' },
+            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' },
+            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',
+                },
+            ],
+        },
+    },
+};
+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',
+    sizes: {
+        default: {
+            badge: 'h-11 min-w-[8.25rem] gap-2 px-3',
+            caption: 'text-[0.625rem]',
+            gap: 'gap-3',
+            logo: 'size-6',
+            name: 'text-lg font-semibold tracking-tight',
+        },
+        large: {
+            badge: 'h-14 min-w-[10.5rem] gap-2.5 px-4',
+            caption: 'text-xs',
+            gap: 'gap-4',
+            logo: 'size-8',
+            name: 'text-2xl font-semibold tracking-tight',
+        },
+    },
+};

package/dist/constants/ps-store-platform.d.ts

@@ -0,0 +1,5 @@
+export declare const PsStorePlatform: {
+    readonly appStore: "app-store";
+    readonly googlePlay: "google-play";
+};
+export type PsStorePlatform = (typeof PsStorePlatform)[keyof typeof PsStorePlatform];

package/dist/constants/ps-store-platform.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsStorePlatform = void 0;
+exports.PsStorePlatform = {
+    appStore: 'app-store',
+    googlePlay: 'google-play',
+};

package/dist/esm/components/ps-app-store-buttons.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PallasoftClassNameService } from '@pallasoft/ps-design-system';
+import { PsStoreBadgeClasses } from '../constants/ps-store-badge-config';
+import { PsStorePlatform } from '../constants/ps-store-platform';
+import { PsStoreBadge } from './ps-store-badge';
+const isLinked = (url) => url !== undefined && url.trim() !== '';
+export const PsAppStoreButtons = ({ appStoreLabels, appStoreUrl, className, playStoreLabels, playStoreUrl, size = 'default', }) => {
+    const appStoreHref = isLinked(appStoreUrl) ? appStoreUrl : undefined;
+    const playStoreHref = isLinked(playStoreUrl) ? playStoreUrl : undefined;
+    return (_jsxs("div", { className: PallasoftClassNameService.merge(PsStoreBadgeClasses.group, PsStoreBadgeClasses.sizes[size].gap, className), children: [_jsx(PsStoreBadge, { href: appStoreHref, labels: appStoreLabels, platform: PsStorePlatform.appStore, size: size }), _jsx(PsStoreBadge, { href: playStoreHref, labels: playStoreLabels, platform: PsStorePlatform.googlePlay, size: size })] }));
+};

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

@@ -10,5 +10,5 @@ export const PsSiteHeader = ({ centerContent, className, homeHref, label, LinkCo
     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), decoding: 'async', src: src }), _jsx("img", { alt: logoAlt !== null && logoAlt !== undefined ? logoAlt : label, className: PallasoftClassNameService.merge(baseClassName, 'hidden dark:block', logoClassName), decoding: 'async', src: darkSrc })] })) : (_jsx("img", { alt: logoAlt !== null && logoAlt !== undefined ? logoAlt : label, className: PallasoftClassNameService.merge(baseClassName, logoClassName), decoding: 'async', 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, prefetch: 'intent', to: homeHref, children: logoContent })) : (_jsx("a", { "aria-label": logoLabel, className: logoLinkClassName, href: homeHref, children: logoContent }));
-    return (_jsx("header", { ref: headerRef, className: PallasoftClassNameService.merge('fixed inset-x-0 top-0 z-header px-6 pt-4', className), children: _jsxs("nav", { className: PallasoftClassNameService.merge('ps-glass mx-auto flex max-w-6xl items-center gap-3 rounded-ps-card px-5 py-3', navClassName), children: [onBack ? (_jsx("button", { "aria-label": 'Back', className: 'ps-focus-ring ps-control-square ps-control-compact flex shrink-0 items-center justify-center rounded-ps-control text-ink md:hidden', onClick: onBack, type: 'button', children: _jsx(PsIcon, { iconKey: PsIconKey.ChevronRight, width: 20, height: 20, className: 'rotate-180' }) })) : null, _jsx("div", { className: onBack ? 'hidden md:flex' : 'contents', children: logoLink }), _jsx("div", { className: 'flex min-w-0 flex-1 items-center justify-center gap-3', children: centerContent }), trailing ? _jsx("div", { className: 'flex shrink-0 items-center gap-2.5', children: trailing }) : null] }) }));
+    return (_jsx("header", { ref: headerRef, className: PallasoftClassNameService.merge('fixed inset-x-0 top-0 z-header px-4 pt-[max(1rem,env(safe-area-inset-top))] sm:px-6', 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 ps-control-square ps-control-compact flex shrink-0 items-center justify-center rounded-ps-control 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-store-badge.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { PallasoftClassNameService } from '@pallasoft/ps-design-system';
+import { PsStoreBadgeClasses, PsStoreBadgeConfig } from '../constants/ps-store-badge-config';
+export const PsStoreBadge = ({ className, href, labels, onPress, platform, size = 'default', }) => {
+    const platformData = PsStoreBadgeConfig.platforms[platform];
+    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 })] })] }));
+    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 }));
+};

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

@@ -9,7 +9,7 @@ export const PsDragConfig = {
     touchTolerance: 6,
 };
 export const PsDragClasses = {
-    handle: 'ps-focus-ring inline-flex h-7 w-7 shrink-0 cursor-grab touch-none items-center justify-center rounded-ps-control 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',
+    handle: 'ps-focus-ring ps-touch-target relative inline-flex h-7 w-7 shrink-0 cursor-grab touch-none items-center justify-center rounded-ps-control 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',
     listItem: 'min-w-0',
     lifted: 'cursor-grabbing rounded-xl bg-surface ring-1 ring-primary/30',
     placeholder: 'outline-dashed outline-2 outline-offset-[-2px] outline-primary/35',

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

@@ -0,0 +1,61 @@
+import { PsStorePlatform } from './ps-store-platform';
+export const PsStoreBadgeConfig = {
+    colors: {
+        background: '#000000',
+        border: '#A6A6A6',
+        text: '#FFFFFF',
+    },
+    logoViewBox: '0 0 24 24',
+    platforms: {
+        [PsStorePlatform.appStore]: {
+            labels: { caption: 'Download on the', name: 'App Store' },
+            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' },
+            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',
+                },
+            ],
+        },
+    },
+};
+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',
+    sizes: {
+        default: {
+            badge: 'h-11 min-w-[8.25rem] gap-2 px-3',
+            caption: 'text-[0.625rem]',
+            gap: 'gap-3',
+            logo: 'size-6',
+            name: 'text-lg font-semibold tracking-tight',
+        },
+        large: {
+            badge: 'h-14 min-w-[10.5rem] gap-2.5 px-4',
+            caption: 'text-xs',
+            gap: 'gap-4',
+            logo: 'size-8',
+            name: 'text-2xl font-semibold tracking-tight',
+        },
+    },
+};

package/dist/esm/constants/ps-store-platform.js

@@ -0,0 +1,4 @@
+export const PsStorePlatform = {
+    appStore: 'app-store',
+    googlePlay: 'google-play',
+};

package/dist/esm/hooks/use-ps-media-query.js

@@ -0,0 +1,12 @@
+import { useCallback, useSyncExternalStore } from 'react';
+export const usePsMediaQuery = (query) => {
+    const subscribe = useCallback((onChange) => {
+        if (typeof window.matchMedia !== 'function')
+            return () => undefined;
+        const list = window.matchMedia(query);
+        list.addEventListener('change', onChange);
+        return () => list.removeEventListener('change', onChange);
+    }, [query]);
+    const clientSnapshot = useCallback(() => (typeof window.matchMedia === 'function' ? window.matchMedia(query).matches : null), [query]);
+    return useSyncExternalStore(subscribe, clientSnapshot, () => null);
+};

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

@@ -4,12 +4,13 @@ export const usePsOptimisticRows = ({ apply, isHolding = false, isSaving, rows,
         base: rows,
         changes: [],
     });
-    const changes = remembered.base === rows || isSaving || isHolding ? remembered.changes : [];
+    const isActive = isSaving || isHolding;
+    const isStale = remembered.base !== rows && !isActive;
+    if (isStale)
+        setRemembered({ base: rows, changes: [] });
+    const changes = isStale ? [] : remembered.changes;
     const shown = useMemo(() => (changes.length === 0 ? rows : apply(rows, changes)), [apply, changes, rows]);
-    const remember = useCallback((change) => setRemembered((current) => ({
-        base: rows,
-        changes: [...(current.base === rows ? current.changes : []), change],
-    })), [rows]);
+    const remember = useCallback((change) => setRemembered((current) => ({ base: rows, changes: [...current.changes, change] })), [rows]);
     const forgetLast = useCallback(() => setRemembered((current) => ({ base: current.base, changes: current.changes.slice(0, -1) })), []);
     const rollback = useCallback(() => setRemembered({ base: rows, changes: [] }), [rows]);
     return { forgetLast, remember, rollback, rows: shown };

package/dist/esm/index.js

@@ -8,6 +8,13 @@ export * from './components/ps-button';
 export * from './components/ps-link-button';
 export * from './components/ps-pallasoft-mark';
 export * from './components/ps-pallasoft-sign-in-button';
+export * from './components/ps-store-badge';
+export * from './components/ps-app-store-buttons';
+export * from './constants/ps-store-platform';
+export * from './constants/ps-store-badge-config';
+export * from './models/ps-store-badge-labels';
+export * from './models/ps-store-badge-logo-path';
+export * from './models/ps-store-badge-platform-data';
 export * from './constants/ps-pallasoft-mark-config';
 export * from './components/ps-card';
 export * from './components/ps-client-only';
@@ -58,6 +65,7 @@ export * from './hooks/use-ps-route-loader-data';
 export * from './hooks/use-ps-element-size';
 export * from './hooks/use-ps-hydrated';
 export * from './hooks/use-ps-viewport';
+export * from './hooks/use-ps-media-query';
 export * from './interfaces/ps-component-props';
 export * from './models/ps-element-size';
 export * from './models/ps-voice-orb';

package/dist/esm/models/ps-store-badge-labels.js

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

package/dist/esm/models/ps-store-badge-logo-path.js

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

package/dist/esm/models/ps-store-badge-platform-data.js

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

package/dist/hooks/use-ps-media-query.d.ts

@@ -0,0 +1 @@
+export declare const usePsMediaQuery: (query: string) => boolean | null;

package/dist/hooks/use-ps-media-query.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePsMediaQuery = void 0;
+const react_1 = require("react");
+const usePsMediaQuery = (query) => {
+    const subscribe = (0, react_1.useCallback)((onChange) => {
+        if (typeof window.matchMedia !== 'function')
+            return () => undefined;
+        const list = window.matchMedia(query);
+        list.addEventListener('change', onChange);
+        return () => list.removeEventListener('change', onChange);
+    }, [query]);
+    const clientSnapshot = (0, react_1.useCallback)(() => (typeof window.matchMedia === 'function' ? window.matchMedia(query).matches : null), [query]);
+    return (0, react_1.useSyncExternalStore)(subscribe, clientSnapshot, () => null);
+};
+exports.usePsMediaQuery = usePsMediaQuery;

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

@@ -7,12 +7,13 @@ const usePsOptimisticRows = ({ apply, isHolding = false, isSaving, rows, }) => {
         base: rows,
         changes: [],
     });
-    const changes = remembered.base === rows || isSaving || isHolding ? remembered.changes : [];
+    const isActive = isSaving || isHolding;
+    const isStale = remembered.base !== rows && !isActive;
+    if (isStale)
+        setRemembered({ base: rows, changes: [] });
+    const changes = isStale ? [] : remembered.changes;
     const shown = (0, react_1.useMemo)(() => (changes.length === 0 ? rows : apply(rows, changes)), [apply, changes, rows]);
-    const remember = (0, react_1.useCallback)((change) => setRemembered((current) => ({
-        base: rows,
-        changes: [...(current.base === rows ? current.changes : []), change],
-    })), [rows]);
+    const remember = (0, react_1.useCallback)((change) => setRemembered((current) => ({ base: rows, changes: [...current.changes, change] })), [rows]);
     const forgetLast = (0, react_1.useCallback)(() => setRemembered((current) => ({ base: current.base, changes: current.changes.slice(0, -1) })), []);
     const rollback = (0, react_1.useCallback)(() => setRemembered({ base: rows, changes: [] }), [rows]);
     return { forgetLast, remember, rollback, rows: shown };

package/dist/index.d.ts

@@ -8,6 +8,13 @@ export * from './components/ps-button';
 export * from './components/ps-link-button';
 export * from './components/ps-pallasoft-mark';
 export * from './components/ps-pallasoft-sign-in-button';
+export * from './components/ps-store-badge';
+export * from './components/ps-app-store-buttons';
+export * from './constants/ps-store-platform';
+export * from './constants/ps-store-badge-config';
+export * from './models/ps-store-badge-labels';
+export * from './models/ps-store-badge-logo-path';
+export * from './models/ps-store-badge-platform-data';
 export * from './constants/ps-pallasoft-mark-config';
 export * from './components/ps-card';
 export * from './components/ps-client-only';
@@ -58,6 +65,7 @@ export * from './hooks/use-ps-route-loader-data';
 export * from './hooks/use-ps-element-size';
 export * from './hooks/use-ps-hydrated';
 export * from './hooks/use-ps-viewport';
+export * from './hooks/use-ps-media-query';
 export * from './interfaces/ps-component-props';
 export * from './models/ps-element-size';
 export * from './models/ps-voice-orb';

package/dist/index.js

@@ -24,6 +24,13 @@ __exportStar(require("./components/ps-button"), exports);
 __exportStar(require("./components/ps-link-button"), exports);
 __exportStar(require("./components/ps-pallasoft-mark"), exports);
 __exportStar(require("./components/ps-pallasoft-sign-in-button"), exports);
+__exportStar(require("./components/ps-store-badge"), exports);
+__exportStar(require("./components/ps-app-store-buttons"), exports);
+__exportStar(require("./constants/ps-store-platform"), exports);
+__exportStar(require("./constants/ps-store-badge-config"), exports);
+__exportStar(require("./models/ps-store-badge-labels"), exports);
+__exportStar(require("./models/ps-store-badge-logo-path"), exports);
+__exportStar(require("./models/ps-store-badge-platform-data"), exports);
 __exportStar(require("./constants/ps-pallasoft-mark-config"), exports);
 __exportStar(require("./components/ps-card"), exports);
 __exportStar(require("./components/ps-client-only"), exports);
@@ -74,6 +81,7 @@ __exportStar(require("./hooks/use-ps-route-loader-data"), exports);
 __exportStar(require("./hooks/use-ps-element-size"), exports);
 __exportStar(require("./hooks/use-ps-hydrated"), exports);
 __exportStar(require("./hooks/use-ps-viewport"), exports);
+__exportStar(require("./hooks/use-ps-media-query"), exports);
 __exportStar(require("./interfaces/ps-component-props"), exports);
 __exportStar(require("./models/ps-element-size"), exports);
 __exportStar(require("./models/ps-voice-orb"), exports);

package/dist/models/ps-store-badge-labels.d.ts

@@ -0,0 +1,4 @@
+export interface PsStoreBadgeLabels {
+    caption: string;
+    name: string;
+}

package/dist/models/ps-store-badge-labels.js

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

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

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

package/dist/models/ps-store-badge-logo-path.js

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

package/dist/models/ps-store-badge-platform-data.d.ts

@@ -0,0 +1,6 @@
+import type { PsStoreBadgeLabels } from './ps-store-badge-labels';
+import type { PsStoreBadgeLogoPath } from './ps-store-badge-logo-path';
+export interface PsStoreBadgePlatformData {
+    labels: PsStoreBadgeLabels;
+    logoPaths: PsStoreBadgeLogoPath[];
+}

package/dist/models/ps-store-badge-platform-data.js

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

package/package.json

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