@pallasoft/ps-core-components 2.7.0 → 2.8.0

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

@@ -0,0 +1,7 @@
+export interface PsStepProgressProps {
+    className?: string;
+    label?: string;
+    total: number;
+    value: number;
+}
+export declare const PsStepProgress: ({ className, label, total, value, }: PsStepProgressProps) => import("react").JSX.Element;

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

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsStepProgress = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ps_design_system_1 = require("@pallasoft/ps-design-system");
+const ps_step_progress_config_1 = require("../constants/ps-step-progress-config");
+const PsStepProgress = ({ className, label = ps_step_progress_config_1.PsStepProgressConfig.defaultLabel, total, value, }) => {
+    const steps = Math.max(total, ps_step_progress_config_1.PsStepProgressConfig.minimumTotal);
+    const done = Math.min(Math.max(value, 0), steps);
+    const percent = (done / steps) * ps_step_progress_config_1.PsStepProgressConfig.fullPercent;
+    return ((0, jsx_runtime_1.jsx)("div", { "aria-label": label, "aria-valuemax": steps, "aria-valuemin": 0, "aria-valuenow": done, className: ps_design_system_1.PallasoftClassNameService.merge('h-1 w-full overflow-hidden rounded-full bg-mist', className), role: 'progressbar', children: (0, jsx_runtime_1.jsx)("span", { className: 'block h-full rounded-full bg-primary transition-[width] duration-500 ease-out', style: { width: `${percent}%` } }) }));
+};
+exports.PsStepProgress = PsStepProgress;

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

@@ -0,0 +1,5 @@
+export declare const PsStepProgressConfig: {
+    readonly defaultLabel: "Progress";
+    readonly fullPercent: 100;
+    readonly minimumTotal: 1;
+};

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

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsStepProgressConfig = void 0;
+exports.PsStepProgressConfig = {
+    defaultLabel: 'Progress',
+    fullPercent: 100,
+    minimumTotal: 1,
+};

package/dist/esm/components/ps-step-progress.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PallasoftClassNameService } from '@pallasoft/ps-design-system';
+import { PsStepProgressConfig } from '../constants/ps-step-progress-config';
+export const PsStepProgress = ({ className, label = PsStepProgressConfig.defaultLabel, total, value, }) => {
+    const steps = Math.max(total, PsStepProgressConfig.minimumTotal);
+    const done = Math.min(Math.max(value, 0), steps);
+    const percent = (done / steps) * PsStepProgressConfig.fullPercent;
+    return (_jsx("div", { "aria-label": label, "aria-valuemax": steps, "aria-valuemin": 0, "aria-valuenow": done, className: PallasoftClassNameService.merge('h-1 w-full overflow-hidden rounded-full bg-mist', className), role: 'progressbar', children: _jsx("span", { className: 'block h-full rounded-full bg-primary transition-[width] duration-500 ease-out', style: { width: `${percent}%` } }) }));
+};

package/dist/esm/constants/ps-step-progress-config.js

@@ -0,0 +1,5 @@
+export const PsStepProgressConfig = {
+    defaultLabel: 'Progress',
+    fullPercent: 100,
+    minimumTotal: 1,
+};

package/dist/esm/index.js

@@ -15,6 +15,7 @@ export * from './components/ps-pill';
 export * from './components/ps-portable-text';
 export * from './components/ps-reflective-app-shell';
 export * from './components/ps-navigation-progress';
+export * from './components/ps-step-progress';
 export * from './components/ps-section-header';
 export * from './components/ps-site-header';
 export * from './components/ps-skeleton';
@@ -41,3 +42,4 @@ export * from './hooks/use-ps-navigation-progress';
 export * from './models/ps-draggable-grid';
 export * from './constants/ps-draggable-grid';
 export * from './constants/ps-navigation-progress-config';
+export * from './constants/ps-step-progress-config';

package/dist/index.d.ts

@@ -15,6 +15,7 @@ export * from './components/ps-pill';
 export * from './components/ps-portable-text';
 export * from './components/ps-reflective-app-shell';
 export * from './components/ps-navigation-progress';
+export * from './components/ps-step-progress';
 export * from './components/ps-section-header';
 export * from './components/ps-site-header';
 export * from './components/ps-skeleton';
@@ -41,3 +42,4 @@ export * from './hooks/use-ps-navigation-progress';
 export * from './models/ps-draggable-grid';
 export * from './constants/ps-draggable-grid';
 export * from './constants/ps-navigation-progress-config';
+export * from './constants/ps-step-progress-config';

package/dist/index.js

@@ -31,6 +31,7 @@ __exportStar(require("./components/ps-pill"), exports);
 __exportStar(require("./components/ps-portable-text"), exports);
 __exportStar(require("./components/ps-reflective-app-shell"), exports);
 __exportStar(require("./components/ps-navigation-progress"), exports);
+__exportStar(require("./components/ps-step-progress"), exports);
 __exportStar(require("./components/ps-section-header"), exports);
 __exportStar(require("./components/ps-site-header"), exports);
 __exportStar(require("./components/ps-skeleton"), exports);
@@ -57,3 +58,4 @@ __exportStar(require("./hooks/use-ps-navigation-progress"), exports);
 __exportStar(require("./models/ps-draggable-grid"), exports);
 __exportStar(require("./constants/ps-draggable-grid"), exports);
 __exportStar(require("./constants/ps-navigation-progress-config"), exports);
+__exportStar(require("./constants/ps-step-progress-config"), exports);

package/package.json

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