@pallamart/pm-core-components 2.0.0 → 2.1.0

package/dist/components/internal/index.d.ts

@@ -17,6 +17,7 @@ export * from './file-picker/index.js';
 export * from './input/index.js';
 export * from './kbd/index.js';
 export * from './label/index.js';
+export * from './navigation-progress/index.js';
 export * from './not-found/index.js';
 export * from './popover/index.js';
 export * from './progress/index.js';

package/dist/components/internal/index.js

@@ -17,6 +17,7 @@ export * from './file-picker/index.js';
 export * from './input/index.js';
 export * from './kbd/index.js';
 export * from './label/index.js';
+export * from './navigation-progress/index.js';
 export * from './not-found/index.js';
 export * from './popover/index.js';
 export * from './progress/index.js';

package/dist/components/internal/navigation-progress/index.d.ts

@@ -0,0 +1 @@
+export * from './pm-navigation-progress.js';

package/dist/components/internal/navigation-progress/index.js

@@ -0,0 +1 @@
+export * from './pm-navigation-progress.js';

package/dist/components/internal/navigation-progress/pm-navigation-progress.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import type { PmNavigationProgressProps } from '../../../models/internal/navigation-progress/pm-navigation-progress-props.js';
+export declare const PmNavigationProgress: ({ className, state }: PmNavigationProgressProps) => React.JSX.Element;

package/dist/components/internal/navigation-progress/pm-navigation-progress.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { PallamartClassNameService } from '@pallamart/pm-design-system';
+import { PmNavigationProgressConfig } from '../../../constants/internal/pm-navigation-progress-config.js';
+import { PmNavigationState } from '../../../constants/internal/pm-navigation-state.js';
+import { PmProgress } from '../progress/pm-progress.js';
+export const PmNavigationProgress = ({ className, state }) => {
+    const [value, setValue] = React.useState(PmNavigationProgressConfig.startValue);
+    const [isVisible, setIsVisible] = React.useState(false);
+    React.useEffect(() => {
+        if (state === PmNavigationState.Idle) {
+            if (!isVisible)
+                return;
+            setValue(PmNavigationProgressConfig.completeValue);
+            const hideTimer = window.setTimeout(() => setIsVisible(false), PmNavigationProgressConfig.hideDelayMs);
+            const resetTimer = window.setTimeout(() => setValue(PmNavigationProgressConfig.startValue), PmNavigationProgressConfig.resetDelayMs);
+            return () => {
+                window.clearTimeout(hideTimer);
+                window.clearTimeout(resetTimer);
+            };
+        }
+        setIsVisible(true);
+        setValue(state === PmNavigationState.Submitting
+            ? PmNavigationProgressConfig.submittingValue
+            : PmNavigationProgressConfig.loadingValue);
+    }, [isVisible, state]);
+    return (_jsx(PmProgress, { "aria-hidden": !isVisible, className: PallamartClassNameService.merge('pointer-events-none fixed inset-x-0 top-0 z-[999] h-0.5 rounded-none bg-transparent transition-opacity', isVisible ? 'opacity-100' : 'opacity-0', className), value: value }));
+};

package/dist/constants/internal/index.d.ts

@@ -4,6 +4,8 @@ export * from './pm-badge-variants.js';
 export * from './pm-button-variants.js';
 export * from './pm-field-orientation.js';
 export * from './pm-label-variants.js';
+export * from './pm-navigation-progress-config.js';
+export * from './pm-navigation-state.js';
 export * from './pm-root-status-messages.js';
 export * from './pm-sheet-variants.js';
 export * from './pm-toggle-variants.js';

package/dist/constants/internal/index.js

@@ -4,6 +4,8 @@ export * from './pm-badge-variants.js';
 export * from './pm-button-variants.js';
 export * from './pm-field-orientation.js';
 export * from './pm-label-variants.js';
+export * from './pm-navigation-progress-config.js';
+export * from './pm-navigation-state.js';
 export * from './pm-root-status-messages.js';
 export * from './pm-sheet-variants.js';
 export * from './pm-toggle-variants.js';

package/dist/constants/internal/pm-navigation-progress-config.d.ts

@@ -0,0 +1,8 @@
+export declare const PmNavigationProgressConfig: {
+    readonly completeValue: 100;
+    readonly hideDelayMs: 200;
+    readonly loadingValue: 75;
+    readonly resetDelayMs: 450;
+    readonly startValue: 0;
+    readonly submittingValue: 40;
+};

package/dist/constants/internal/pm-navigation-progress-config.js

@@ -0,0 +1,8 @@
+export const PmNavigationProgressConfig = {
+    completeValue: 100,
+    hideDelayMs: 200,
+    loadingValue: 75,
+    resetDelayMs: 450,
+    startValue: 0,
+    submittingValue: 40,
+};

package/dist/constants/internal/pm-navigation-state.d.ts

@@ -0,0 +1,5 @@
+export declare enum PmNavigationState {
+    Idle = "idle",
+    Loading = "loading",
+    Submitting = "submitting"
+}

package/dist/constants/internal/pm-navigation-state.js

@@ -0,0 +1,6 @@
+export var PmNavigationState;
+(function (PmNavigationState) {
+    PmNavigationState["Idle"] = "idle";
+    PmNavigationState["Loading"] = "loading";
+    PmNavigationState["Submitting"] = "submitting";
+})(PmNavigationState || (PmNavigationState = {}));

package/dist/models/internal/index.d.ts

@@ -17,6 +17,7 @@ export * from './file-picker/index.js';
 export * from './input/index.js';
 export * from './kbd/index.js';
 export * from './label/index.js';
+export * from './navigation-progress/index.js';
 export * from './not-found/index.js';
 export * from './popover/index.js';
 export * from './progress/index.js';

package/dist/models/internal/index.js

@@ -17,6 +17,7 @@ export * from './file-picker/index.js';
 export * from './input/index.js';
 export * from './kbd/index.js';
 export * from './label/index.js';
+export * from './navigation-progress/index.js';
 export * from './not-found/index.js';
 export * from './popover/index.js';
 export * from './progress/index.js';

package/dist/models/internal/navigation-progress/index.d.ts

@@ -0,0 +1 @@
+export * from './pm-navigation-progress-props.js';

package/dist/models/internal/navigation-progress/index.js

@@ -0,0 +1 @@
+export * from './pm-navigation-progress-props.js';

package/dist/models/internal/navigation-progress/pm-navigation-progress-props.d.ts

@@ -0,0 +1,5 @@
+import type { PmNavigationState } from '../../../constants/internal/pm-navigation-state.js';
+export interface PmNavigationProgressProps {
+    className?: string;
+    state: PmNavigationState;
+}

package/dist/models/internal/navigation-progress/pm-navigation-progress-props.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@pallamart/pm-core-components",
-	"version": "2.0.0",
+	"version": "2.1.0",
 	"private": false,
 	"type": "module",
 	"main": "./dist/index.js",