@pallasoft/ps-core-components 2.2.0 → 2.3.1

package/dist/components/ps-button.js

@@ -10,11 +10,11 @@ const sizeClassNames = {
     large: 'min-h-11 px-5 py-3 text-sm',
 };
 const variantClassNames = {
-    danger: 'border-danger bg-danger text-white hover:opacity-90',
-    ghost: 'border-transparent bg-transparent text-ink/60 hover:text-ink',
-    primary: 'border-primary bg-primary text-[color:var(--ps-color-primary-contrast)] hover:border-primary-dark hover:bg-primary-dark',
-    secondary: 'ps-liquid ps-liquid-control bg-white/72 text-ink hover:border-primary/30 hover:text-primary dark:border-white/16 dark:bg-white/12 dark:hover:text-white',
-    surface: 'ps-liquid ps-liquid-control bg-white/72 text-ink hover:border-primary/30 dark:border-white/16 dark:bg-white/12',
+    danger: 'border-danger bg-danger text-white enabled:hover:opacity-90',
+    ghost: 'border-transparent bg-transparent text-ink/60 enabled:hover:text-ink',
+    primary: 'border-primary bg-primary text-[color:var(--ps-color-primary-contrast)] enabled:hover:border-primary-dark enabled:hover:bg-primary-dark',
+    secondary: 'ps-liquid ps-liquid-control bg-white/72 text-ink enabled:hover:border-primary/30 enabled:hover:text-primary dark:border-white/16 dark:bg-white/12 dark:enabled:hover:text-white',
+    surface: 'ps-liquid ps-liquid-control bg-white/72 text-ink enabled:hover:border-primary/30 dark:border-white/16 dark:bg-white/12',
 };
 const PsButton = ({ children, className, disabled, isLoading = false, leadingIcon, loadingLabel, size = 'default', trailingIcon, type = 'button', variant = 'secondary', ...props }) => ((0, jsx_runtime_1.jsxs)("button", { className: ps_design_system_1.PallasoftClassNameService.merge('ps-focus-ring relative inline-flex max-w-full items-center justify-center gap-2 rounded-full border text-center font-semibold disabled:cursor-not-allowed disabled:opacity-50', sizeClassNames[size], variantClassNames[variant], className), "aria-busy": isLoading || undefined, disabled: disabled || isLoading, type: type, ...props, children: [isLoading ? ((0, jsx_runtime_1.jsx)(ps_spinner_1.PsSpinner, { className: 'absolute inset-0 m-auto', color: 'current', label: loadingLabel !== null && loadingLabel !== undefined ? loadingLabel : 'Loading', size: 'small' })) : null, (0, jsx_runtime_1.jsxs)("span", { "aria-hidden": isLoading || undefined, className: ps_design_system_1.PallasoftClassNameService.merge('inline-flex min-w-0 items-center gap-2', isLoading ? 'invisible' : ''), children: [leadingIcon ? (0, jsx_runtime_1.jsx)("span", { className: 'shrink-0', children: leadingIcon }) : null, (0, jsx_runtime_1.jsx)("span", { className: 'truncate', children: children }), trailingIcon ? (0, jsx_runtime_1.jsx)("span", { className: 'shrink-0', children: trailingIcon }) : null] })] }));
 exports.PsButton = PsButton;

package/dist/components/ps-navigation-progress.d.ts

@@ -1,8 +1,9 @@
 export interface PsNavigationProgressProps {
-    color: string;
+    className?: string;
+    color?: string;
     height?: number;
-    loaderSpeed?: number;
+    label?: string;
     progress: number;
     shadow?: boolean;
 }
-export declare const PsNavigationProgress: ({ color, height, loaderSpeed, progress, shadow, }: PsNavigationProgressProps) => import("react").JSX.Element;
+export declare const PsNavigationProgress: ({ className, color, height, label, progress, shadow, }: PsNavigationProgressProps) => import("react").JSX.Element;

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

@@ -1,10 +1,34 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PsNavigationProgress = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_top_loading_bar_1 = __importDefault(require("react-top-loading-bar"));
-const PsNavigationProgress = ({ color, height = 3, loaderSpeed = 1000, progress, shadow = true, }) => ((0, jsx_runtime_1.jsx)(react_top_loading_bar_1.default, { color: color, height: height, loaderSpeed: loaderSpeed, progress: progress, shadow: shadow }));
+const react_1 = require("react");
+const ps_design_system_1 = require("@pallasoft/ps-design-system");
+const ps_navigation_progress_config_1 = require("../constants/ps-navigation-progress-config");
+const PsNavigationProgress = ({ className, color = ps_navigation_progress_config_1.PsNavigationProgressConfig.defaultColor, height = ps_navigation_progress_config_1.PsNavigationProgressConfig.defaultHeight, label = ps_navigation_progress_config_1.PsNavigationProgressConfig.defaultLabel, progress, shadow = true, }) => {
+    const [isVisible, setIsVisible] = (0, react_1.useState)(false);
+    const hideTimer = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        if (typeof window === 'undefined')
+            return;
+        if (hideTimer.current !== null)
+            window.clearTimeout(hideTimer.current);
+        if (progress > 0 && progress < 100) {
+            setIsVisible(true);
+            return;
+        }
+        hideTimer.current = window.setTimeout(() => setIsVisible(false), ps_navigation_progress_config_1.PsNavigationProgressConfig.fadeMs);
+        return () => {
+            if (hideTimer.current !== null)
+                window.clearTimeout(hideTimer.current);
+        };
+    }, [progress]);
+    return ((0, jsx_runtime_1.jsx)("div", { "aria-hidden": isVisible ? undefined : 'true', "aria-label": label, "aria-valuemax": 100, "aria-valuemin": 0, "aria-valuenow": Math.round(progress), className: ps_design_system_1.PallasoftClassNameService.merge('pointer-events-none fixed inset-x-0 top-0', className), role: 'progressbar', style: { height, zIndex: ps_design_system_1.PallasoftZIndex.Toast }, children: (0, jsx_runtime_1.jsx)("div", { className: 'h-full origin-left transition-[width,opacity] ease-out', style: {
+                backgroundColor: color,
+                boxShadow: shadow ? `0 0 10px ${color}, 0 0 5px ${color}` : undefined,
+                opacity: isVisible ? 1 : 0,
+                transitionDuration: `${ps_navigation_progress_config_1.PsNavigationProgressConfig.transitionMs}ms`,
+                width: `${Math.min(Math.max(progress, 0), 100)}%`,
+            } }) }));
+};
 exports.PsNavigationProgress = PsNavigationProgress;

package/dist/constants/ps-navigation-progress-config.d.ts

@@ -0,0 +1,7 @@
+export declare const PsNavigationProgressConfig: {
+    readonly defaultColor: "rgb(var(--ps-color-primary-rgb))";
+    readonly defaultHeight: 3;
+    readonly defaultLabel: "Page loading";
+    readonly fadeMs: 320;
+    readonly transitionMs: 240;
+};

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

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsNavigationProgressConfig = void 0;
+exports.PsNavigationProgressConfig = {
+    defaultColor: 'rgb(var(--ps-color-primary-rgb))',
+    defaultHeight: 3,
+    defaultLabel: 'Page loading',
+    fadeMs: 320,
+    transitionMs: 240,
+};

package/dist/index.d.ts

@@ -31,3 +31,4 @@ export * from './hooks/use-ps-route-loader-data';
 export * from './hooks/use-ps-viewport';
 export * from './interfaces/ps-component-props';
 export * from './models/ps-voice-orb';
+export * from './constants/ps-navigation-progress-config';

package/dist/index.js

@@ -47,3 +47,4 @@ __exportStar(require("./hooks/use-ps-route-loader-data"), exports);
 __exportStar(require("./hooks/use-ps-viewport"), exports);
 __exportStar(require("./interfaces/ps-component-props"), exports);
 __exportStar(require("./models/ps-voice-orb"), exports);
+__exportStar(require("./constants/ps-navigation-progress-config"), exports);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@pallasoft/ps-core-components",
-	"version": "2.2.0",
+	"version": "2.3.1",
 	"private": false,
 	"main": "./dist/index.js",
 	"types": "./dist/index.d.ts",
@@ -33,8 +33,7 @@
 		"@portabletext/react": "^3.2.4",
 		"@portabletext/types": "^2.0.13",
 		"@radix-ui/react-accordion": "^1.2.12",
-		"react-infinite-scroll-component": "^6.1.1",
-		"react-top-loading-bar": "^3.0.2"
+		"react-infinite-scroll-component": "^6.1.1"
 	},
 	"peerDependencies": {
 		"react": "^18 || ^19"