@pallasoft/ps-core-components 2.1.1 → 2.3.0

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

@@ -0,0 +1,6 @@
+import type { ReactNode } from 'react';
+export interface PsLayerProps {
+    children: ReactNode;
+    zIndex: number;
+}
+export declare const PsLayer: ({ children, zIndex }: PsLayerProps) => import("react").JSX.Element;

package/dist/components/ps-layer.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsLayer = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ps_layer_context_1 = require("../contexts/ps-layer-context");
+const PsLayer = ({ children, zIndex }) => ((0, jsx_runtime_1.jsx)(ps_layer_context_1.PsLayerContext.Provider, { value: zIndex, children: children }));
+exports.PsLayer = PsLayer;

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/components/ps-spinner.d.ts

@@ -1,6 +1,5 @@
 import type { HTMLAttributes } from 'react';
 export interface PsSpinnerProps extends HTMLAttributes<HTMLDivElement> {
-    /** `current` follows the surrounding text colour, for spinners inside buttons. */
     color?: 'current' | 'primary';
     label?: string;
     size?: 'default' | 'large' | 'small';

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/contexts/ps-layer-context.d.ts

@@ -0,0 +1 @@
+export declare const PsLayerContext: import("react").Context<number | null>;

package/dist/contexts/ps-layer-context.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsLayerContext = void 0;
+const react_1 = require("react");
+exports.PsLayerContext = (0, react_1.createContext)(null);

package/dist/hooks/use-ps-layer-z-index.d.ts

@@ -0,0 +1,2 @@
+import { type PallasoftZIndex } from '@pallasoft/ps-design-system';
+export declare const usePsLayerZIndex: (layer: PallasoftZIndex) => number;

package/dist/hooks/use-ps-layer-z-index.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePsLayerZIndex = void 0;
+const react_1 = require("react");
+const ps_design_system_1 = require("@pallasoft/ps-design-system");
+const ps_layer_context_1 = require("../contexts/ps-layer-context");
+const usePsLayerZIndex = (layer) => ps_design_system_1.PallasoftZIndexService.above((0, react_1.useContext)(ps_layer_context_1.PsLayerContext), layer);
+exports.usePsLayerZIndex = usePsLayerZIndex;

package/dist/index.d.ts

@@ -1,3 +1,4 @@
+export * from './components/ps-layer';
 export * from './components/ps-accordion';
 export * from './components/ps-action-tile';
 export * from './components/ps-audio-spectrum';
@@ -24,7 +25,10 @@ export * from './hooks/use-ps-audio-spectrum';
 export * from './hooks/use-ps-exit-transition';
 export * from './hooks/use-ps-hide-on-scroll';
 export * from './hooks/use-ps-invisible-recaptcha';
+export * from './contexts/ps-layer-context';
+export * from './hooks/use-ps-layer-z-index';
 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

@@ -14,6 +14,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./components/ps-layer"), exports);
 __exportStar(require("./components/ps-accordion"), exports);
 __exportStar(require("./components/ps-action-tile"), exports);
 __exportStar(require("./components/ps-audio-spectrum"), exports);
@@ -40,7 +41,10 @@ __exportStar(require("./hooks/use-ps-audio-spectrum"), exports);
 __exportStar(require("./hooks/use-ps-exit-transition"), exports);
 __exportStar(require("./hooks/use-ps-hide-on-scroll"), exports);
 __exportStar(require("./hooks/use-ps-invisible-recaptcha"), exports);
+__exportStar(require("./contexts/ps-layer-context"), exports);
+__exportStar(require("./hooks/use-ps-layer-z-index"), exports);
 __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.1.1",
+	"version": "2.3.0",
 	"private": false,
 	"main": "./dist/index.js",
 	"types": "./dist/index.d.ts",
@@ -28,13 +28,12 @@
 		"release": "semantic-release"
 	},
 	"dependencies": {
-		"@pallasoft/ps-design-system": "^1.1.0",
+		"@pallasoft/ps-design-system": "^1.3.0",
 		"@pallasoft/ps-icons": "^1.1.0",
 		"@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"