@pallasoft/ps-core-components 2.52.0 → 2.52.1

package/dist/components/ps-badge.js

@@ -12,5 +12,5 @@ const toneClassNames = {
     success: 'bg-success-soft text-emerald-700 dark:bg-emerald-400/18 dark:text-emerald-50',
     warning: 'bg-warning-soft text-amber-800 dark:bg-amber-400/18 dark:text-amber-50',
 };
-const PsBadge = ({ children, className, isLoading = false, tone = 'neutral', }) => isLoading ? ((0, jsx_runtime_1.jsx)(ps_skeleton_1.PsSkeleton, { className: className, shape: ps_skeleton_shape_1.PsSkeletonShape.Badge })) : ((0, jsx_runtime_1.jsx)("span", { className: ps_design_system_1.PallasoftClassNameService.merge('inline-flex min-h-7 w-fit items-center justify-center whitespace-nowrap rounded-ps-control px-3 py-0.5 text-center text-xs font-semibold capitalize', toneClassNames[tone], className), children: children }));
+const PsBadge = ({ children, className, isLoading = false, tone = 'neutral', }) => isLoading ? ((0, jsx_runtime_1.jsx)(ps_skeleton_1.PsSkeleton, { className: className, shape: ps_skeleton_shape_1.PsSkeletonShape.Badge })) : ((0, jsx_runtime_1.jsx)("span", { className: ps_design_system_1.PallasoftClassNameService.merge('inline-flex min-h-7 w-fit items-center justify-center whitespace-nowrap rounded-ps-control px-3 py-0.5 text-center text-xs font-semibold', toneClassNames[tone], className), children: children }));
 exports.PsBadge = PsBadge;

package/dist/components/ps-link-tile-grid.js

@@ -8,6 +8,6 @@ const ps_website_section_config_1 = require("../constants/ps-website-section-con
 const tileClassName = 'ps-pressable ps-focus-ring group flex h-full items-center justify-between gap-3 rounded-ps-card border border-line bg-surface px-4 py-3 transition-colors hover:border-primary/50';
 const PsLinkTileGrid = ({ LinkComponent, tiles }) => {
     const renderTile = (tile, content) => LinkComponent ? ((0, jsx_runtime_1.jsx)(LinkComponent, { "aria-label": tile.ariaLabel, className: tileClassName, prefetch: 'intent', to: tile.href, children: content })) : ((0, jsx_runtime_1.jsx)("a", { "aria-label": tile.ariaLabel, className: tileClassName, href: tile.href, children: content }));
-    return ((0, jsx_runtime_1.jsx)(ps_motion_components_1.PsStaggerContainer, { className: 'grid w-full grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3', staggerDelay: ps_website_section_config_1.PsWebsiteSectionConfig.tileStaggerDelay, children: tiles.map((tile) => ((0, jsx_runtime_1.jsx)(ps_motion_components_1.PsStaggerItem, { children: renderTile(tile, (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("span", { className: 'flex min-w-0 flex-col', children: [(0, jsx_runtime_1.jsx)("span", { className: 'text-body-2 font-semibold text-ink', children: tile.title }), (0, jsx_runtime_1.jsx)("span", { className: 'truncate text-body-3 text-ink/60', children: tile.description })] }), (0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { className: 'h-4 w-4 shrink-0 text-ink/40 transition-colors group-hover:text-primary', iconKey: ps_icons_1.PsIconKey.ChevronRight })] })) }, tile.href))) }));
+    return ((0, jsx_runtime_1.jsx)(ps_motion_components_1.PsStaggerContainer, { className: 'grid w-full grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3', staggerDelay: ps_website_section_config_1.PsWebsiteSectionConfig.tileStaggerDelay, children: tiles.map((tile) => ((0, jsx_runtime_1.jsx)(ps_motion_components_1.PsStaggerItem, { children: renderTile(tile, (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("span", { className: 'flex min-w-0 flex-col', children: [(0, jsx_runtime_1.jsx)("span", { className: 'text-body-2 font-semibold text-ink', children: tile.title }), (0, jsx_runtime_1.jsx)("span", { className: 'line-clamp-2 text-body-3 text-ink/60', children: tile.description })] }), (0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { className: 'h-4 w-4 shrink-0 text-ink/40 transition-colors group-hover:text-primary', iconKey: ps_icons_1.PsIconKey.ChevronRight })] })) }, tile.href))) }));
 };
 exports.PsLinkTileGrid = PsLinkTileGrid;

package/dist/components/ps-section-header.d.ts

@@ -1,10 +1,12 @@
 import type { ReactNode } from 'react';
+import { PsHeadingLevel } from '../constants/ps-heading-level';
 export interface PsSectionHeaderProps {
     description?: string;
     eyebrow?: string;
+    headingLevel?: PsHeadingLevel;
     isLoading?: boolean;
     leading?: ReactNode;
     title: string;
     trailing?: ReactNode;
 }
-export declare const PsSectionHeader: ({ description, eyebrow, isLoading, leading, title, trailing, }: PsSectionHeaderProps) => import("react").JSX.Element;
+export declare const PsSectionHeader: ({ description, eyebrow, headingLevel, isLoading, leading, title, trailing, }: PsSectionHeaderProps) => import("react").JSX.Element;

package/dist/components/ps-section-header.js

@@ -2,8 +2,12 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PsSectionHeader = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const ps_heading_level_1 = require("../constants/ps-heading-level");
 const ps_skeleton_shape_1 = require("../constants/ps-skeleton-shape");
 const ps_skeleton_1 = require("./ps-skeleton");
 const ps_skeleton_group_1 = require("./ps-skeleton-group");
-const PsSectionHeader = ({ description, eyebrow, isLoading = false, leading, title, trailing, }) => isLoading ? ((0, jsx_runtime_1.jsxs)(ps_skeleton_group_1.PsSkeletonGroup, { className: 'flex flex-wrap items-end justify-between gap-x-4 gap-y-3', label: title, children: [(0, jsx_runtime_1.jsxs)("div", { className: 'flex min-w-0 flex-1 basis-auto flex-col gap-2', children: [leading, eyebrow ? (0, jsx_runtime_1.jsx)(ps_skeleton_1.PsSkeleton, { className: 'h-2.5 w-24' }) : null, (0, jsx_runtime_1.jsx)(ps_skeleton_1.PsSkeleton, { className: 'h-6 w-52' }), description ? (0, jsx_runtime_1.jsx)(ps_skeleton_1.PsSkeleton, { className: 'h-3 w-72' }) : null] }), trailing ? (0, jsx_runtime_1.jsx)(ps_skeleton_1.PsSkeleton, { shape: ps_skeleton_shape_1.PsSkeletonShape.Button }) : null] })) : ((0, jsx_runtime_1.jsxs)("div", { className: 'flex flex-wrap items-end justify-between gap-x-4 gap-y-3', children: [(0, jsx_runtime_1.jsxs)("div", { className: 'flex min-w-0 flex-1 basis-auto flex-col gap-2', children: [leading, eyebrow ? ((0, jsx_runtime_1.jsx)("p", { className: 'text-[0.68rem] font-semibold uppercase tracking-[0.22em] text-muted', children: eyebrow })) : null, (0, jsx_runtime_1.jsx)("h1", { className: 'break-words text-xl font-extrabold text-ink sm:text-2xl', children: title }), description ? ((0, jsx_runtime_1.jsx)("p", { className: 'max-w-3xl text-sm leading-6 text-ink/60', children: description })) : null] }), trailing ? ((0, jsx_runtime_1.jsx)("div", { className: 'flex w-full shrink-0 items-center justify-end sm:ml-auto sm:w-auto', children: trailing })) : null] }));
+const PsSectionHeader = ({ description, eyebrow, headingLevel = ps_heading_level_1.PsHeadingLevel.h1, isLoading = false, leading, title, trailing, }) => {
+    const Heading = headingLevel;
+    return isLoading ? ((0, jsx_runtime_1.jsxs)(ps_skeleton_group_1.PsSkeletonGroup, { className: 'flex flex-wrap items-end justify-between gap-x-4 gap-y-3', label: title, children: [(0, jsx_runtime_1.jsxs)("div", { className: 'flex min-w-0 flex-1 basis-auto flex-col gap-2', children: [leading, eyebrow ? (0, jsx_runtime_1.jsx)(ps_skeleton_1.PsSkeleton, { className: 'h-2.5 w-24' }) : null, (0, jsx_runtime_1.jsx)(ps_skeleton_1.PsSkeleton, { className: 'h-6 w-52' }), description ? (0, jsx_runtime_1.jsx)(ps_skeleton_1.PsSkeleton, { className: 'h-3 w-72' }) : null] }), trailing ? (0, jsx_runtime_1.jsx)(ps_skeleton_1.PsSkeleton, { shape: ps_skeleton_shape_1.PsSkeletonShape.Button }) : null] })) : ((0, jsx_runtime_1.jsxs)("div", { className: 'flex flex-wrap items-end justify-between gap-x-4 gap-y-3', children: [(0, jsx_runtime_1.jsxs)("div", { className: 'flex min-w-0 flex-1 basis-auto flex-col gap-2', children: [leading, eyebrow ? ((0, jsx_runtime_1.jsx)("p", { className: 'text-[0.68rem] font-semibold uppercase tracking-[0.22em] text-muted', children: eyebrow })) : null, (0, jsx_runtime_1.jsx)(Heading, { className: 'break-words text-xl font-extrabold text-ink sm:text-2xl', children: title }), description ? ((0, jsx_runtime_1.jsx)("p", { className: 'max-w-3xl text-sm leading-6 text-ink/60', children: description })) : null] }), trailing ? ((0, jsx_runtime_1.jsx)("div", { className: 'flex w-full shrink-0 items-center justify-end sm:ml-auto sm:w-auto', children: trailing })) : null] }));
+};
 exports.PsSectionHeader = PsSectionHeader;

package/dist/constants/ps-heading-level.d.ts

@@ -0,0 +1,6 @@
+export declare const PsHeadingLevel: {
+    readonly h1: "h1";
+    readonly h2: "h2";
+    readonly h3: "h3";
+};
+export type PsHeadingLevel = (typeof PsHeadingLevel)[keyof typeof PsHeadingLevel];

package/dist/constants/ps-heading-level.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsHeadingLevel = void 0;
+exports.PsHeadingLevel = {
+    h1: 'h1',
+    h2: 'h2',
+    h3: 'h3',
+};

package/dist/esm/components/ps-badge.js

@@ -9,4 +9,4 @@ const toneClassNames = {
     success: 'bg-success-soft text-emerald-700 dark:bg-emerald-400/18 dark:text-emerald-50',
     warning: 'bg-warning-soft text-amber-800 dark:bg-amber-400/18 dark:text-amber-50',
 };
-export const PsBadge = ({ children, className, isLoading = false, tone = 'neutral', }) => isLoading ? (_jsx(PsSkeleton, { className: className, shape: PsSkeletonShape.Badge })) : (_jsx("span", { className: PallasoftClassNameService.merge('inline-flex min-h-7 w-fit items-center justify-center whitespace-nowrap rounded-ps-control px-3 py-0.5 text-center text-xs font-semibold capitalize', toneClassNames[tone], className), children: children }));
+export const PsBadge = ({ children, className, isLoading = false, tone = 'neutral', }) => isLoading ? (_jsx(PsSkeleton, { className: className, shape: PsSkeletonShape.Badge })) : (_jsx("span", { className: PallasoftClassNameService.merge('inline-flex min-h-7 w-fit items-center justify-center whitespace-nowrap rounded-ps-control px-3 py-0.5 text-center text-xs font-semibold', toneClassNames[tone], className), children: children }));

package/dist/esm/components/ps-link-tile-grid.js

@@ -5,5 +5,5 @@ import { PsWebsiteSectionConfig } from '../constants/ps-website-section-config.j
 const tileClassName = 'ps-pressable ps-focus-ring group flex h-full items-center justify-between gap-3 rounded-ps-card border border-line bg-surface px-4 py-3 transition-colors hover:border-primary/50';
 export const PsLinkTileGrid = ({ LinkComponent, tiles }) => {
     const renderTile = (tile, content) => LinkComponent ? (_jsx(LinkComponent, { "aria-label": tile.ariaLabel, className: tileClassName, prefetch: 'intent', to: tile.href, children: content })) : (_jsx("a", { "aria-label": tile.ariaLabel, className: tileClassName, href: tile.href, children: content }));
-    return (_jsx(PsStaggerContainer, { className: 'grid w-full grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3', staggerDelay: PsWebsiteSectionConfig.tileStaggerDelay, children: tiles.map((tile) => (_jsx(PsStaggerItem, { children: renderTile(tile, _jsxs(_Fragment, { children: [_jsxs("span", { className: 'flex min-w-0 flex-col', children: [_jsx("span", { className: 'text-body-2 font-semibold text-ink', children: tile.title }), _jsx("span", { className: 'truncate text-body-3 text-ink/60', children: tile.description })] }), _jsx(PsIcon, { className: 'h-4 w-4 shrink-0 text-ink/40 transition-colors group-hover:text-primary', iconKey: PsIconKey.ChevronRight })] })) }, tile.href))) }));
+    return (_jsx(PsStaggerContainer, { className: 'grid w-full grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3', staggerDelay: PsWebsiteSectionConfig.tileStaggerDelay, children: tiles.map((tile) => (_jsx(PsStaggerItem, { children: renderTile(tile, _jsxs(_Fragment, { children: [_jsxs("span", { className: 'flex min-w-0 flex-col', children: [_jsx("span", { className: 'text-body-2 font-semibold text-ink', children: tile.title }), _jsx("span", { className: 'line-clamp-2 text-body-3 text-ink/60', children: tile.description })] }), _jsx(PsIcon, { className: 'h-4 w-4 shrink-0 text-ink/40 transition-colors group-hover:text-primary', iconKey: PsIconKey.ChevronRight })] })) }, tile.href))) }));
 };

package/dist/esm/components/ps-section-header.js

@@ -1,5 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PsHeadingLevel } from '../constants/ps-heading-level.js';
 import { PsSkeletonShape } from '../constants/ps-skeleton-shape.js';
 import { PsSkeleton } from './ps-skeleton.js';
 import { PsSkeletonGroup } from './ps-skeleton-group.js';
-export const PsSectionHeader = ({ description, eyebrow, isLoading = false, leading, title, trailing, }) => isLoading ? (_jsxs(PsSkeletonGroup, { className: 'flex flex-wrap items-end justify-between gap-x-4 gap-y-3', label: title, children: [_jsxs("div", { className: 'flex min-w-0 flex-1 basis-auto flex-col gap-2', children: [leading, eyebrow ? _jsx(PsSkeleton, { className: 'h-2.5 w-24' }) : null, _jsx(PsSkeleton, { className: 'h-6 w-52' }), description ? _jsx(PsSkeleton, { className: 'h-3 w-72' }) : null] }), trailing ? _jsx(PsSkeleton, { shape: PsSkeletonShape.Button }) : null] })) : (_jsxs("div", { className: 'flex flex-wrap items-end justify-between gap-x-4 gap-y-3', children: [_jsxs("div", { className: 'flex min-w-0 flex-1 basis-auto flex-col gap-2', children: [leading, eyebrow ? (_jsx("p", { className: 'text-[0.68rem] font-semibold uppercase tracking-[0.22em] text-muted', children: eyebrow })) : null, _jsx("h1", { className: 'break-words text-xl font-extrabold text-ink sm:text-2xl', children: title }), description ? (_jsx("p", { className: 'max-w-3xl text-sm leading-6 text-ink/60', children: description })) : null] }), trailing ? (_jsx("div", { className: 'flex w-full shrink-0 items-center justify-end sm:ml-auto sm:w-auto', children: trailing })) : null] }));
+export const PsSectionHeader = ({ description, eyebrow, headingLevel = PsHeadingLevel.h1, isLoading = false, leading, title, trailing, }) => {
+    const Heading = headingLevel;
+    return isLoading ? (_jsxs(PsSkeletonGroup, { className: 'flex flex-wrap items-end justify-between gap-x-4 gap-y-3', label: title, children: [_jsxs("div", { className: 'flex min-w-0 flex-1 basis-auto flex-col gap-2', children: [leading, eyebrow ? _jsx(PsSkeleton, { className: 'h-2.5 w-24' }) : null, _jsx(PsSkeleton, { className: 'h-6 w-52' }), description ? _jsx(PsSkeleton, { className: 'h-3 w-72' }) : null] }), trailing ? _jsx(PsSkeleton, { shape: PsSkeletonShape.Button }) : null] })) : (_jsxs("div", { className: 'flex flex-wrap items-end justify-between gap-x-4 gap-y-3', children: [_jsxs("div", { className: 'flex min-w-0 flex-1 basis-auto flex-col gap-2', children: [leading, eyebrow ? (_jsx("p", { className: 'text-[0.68rem] font-semibold uppercase tracking-[0.22em] text-muted', children: eyebrow })) : null, _jsx(Heading, { className: 'break-words text-xl font-extrabold text-ink sm:text-2xl', children: title }), description ? (_jsx("p", { className: 'max-w-3xl text-sm leading-6 text-ink/60', children: description })) : null] }), trailing ? (_jsx("div", { className: 'flex w-full shrink-0 items-center justify-end sm:ml-auto sm:w-auto', children: trailing })) : null] }));
+};

package/dist/esm/constants/ps-heading-level.js

@@ -0,0 +1,5 @@
+export const PsHeadingLevel = {
+    h1: 'h1',
+    h2: 'h2',
+    h3: 'h3',
+};

package/dist/esm/index.js

@@ -138,6 +138,7 @@ export * from './components/ps-metric-row.js';
 export * from './components/ps-page-header.js';
 export * from './components/ps-page-intro.js';
 export * from './components/ps-page-layout.js';
+export * from './constants/ps-heading-level.js';
 export * from './constants/ps-page-width.js';
 export * from './constants/ps-page-width-class-names.js';
 export * from './services/ps-page-width-service.js';

package/dist/index.d.ts

@@ -138,6 +138,7 @@ export * from './components/ps-metric-row';
 export * from './components/ps-page-header';
 export * from './components/ps-page-intro';
 export * from './components/ps-page-layout';
+export * from './constants/ps-heading-level';
 export * from './constants/ps-page-width';
 export * from './constants/ps-page-width-class-names';
 export * from './services/ps-page-width-service';

package/dist/index.js

@@ -155,6 +155,7 @@ __exportStar(require("./components/ps-metric-row"), exports);
 __exportStar(require("./components/ps-page-header"), exports);
 __exportStar(require("./components/ps-page-intro"), exports);
 __exportStar(require("./components/ps-page-layout"), exports);
+__exportStar(require("./constants/ps-heading-level"), exports);
 __exportStar(require("./constants/ps-page-width"), exports);
 __exportStar(require("./constants/ps-page-width-class-names"), exports);
 __exportStar(require("./services/ps-page-width-service"), exports);

package/package.json

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