@pallasoft/ps-core-components 2.26.0 → 2.27.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-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-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/index.js

@@ -145,3 +145,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/models/ps-divider-orientation.js

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

package/dist/index.d.ts

@@ -145,3 +145,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

@@ -161,3 +161,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/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.27.0",
 	"private": false,
 	"main": "./dist/index.js",
 	"module": "./dist/esm/index.js",