@pallasoft/ps-core-components 2.16.0 → 2.17.0

package/dist/components/ps-button.js

@@ -3,18 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.PsButton = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const ps_design_system_1 = require("@pallasoft/ps-design-system");
+const ps_button_classes_1 = require("../constants/ps-button-classes");
 const ps_spinner_1 = require("./ps-spinner");
-const sizeClassNames = {
-    compact: 'ps-control-compact px-3 py-2 text-sm',
-    default: 'ps-control ps-control-padding text-sm',
-    large: 'ps-control-large px-5 py-3 text-sm',
-};
-const variantClassNames = {
-    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, isLabelHiddenOnMobile = false, 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], isLabelHiddenOnMobile && leadingIcon ? 'min-w-11 max-sm:px-0' : '', 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: isLabelHiddenOnMobile && leadingIcon ? 'sr-only sm:not-sr-only sm:truncate' : 'truncate', children: children }), trailingIcon ? (0, jsx_runtime_1.jsx)("span", { className: 'shrink-0', children: trailingIcon }) : null] })] }));
+const PsButton = ({ children, className, disabled, isLabelHiddenOnMobile = false, 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_button_classes_1.PsButtonBaseClassName, 'disabled:cursor-not-allowed disabled:opacity-50', ps_button_classes_1.PsButtonSizeClassNames[size], isLabelHiddenOnMobile && leadingIcon ? 'min-w-11 max-sm:px-0' : '', ps_button_classes_1.PsButtonVariantClassNames[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: isLabelHiddenOnMobile && leadingIcon ? 'sr-only sm:not-sr-only sm:truncate' : 'truncate', children: children }), trailingIcon ? (0, jsx_runtime_1.jsx)("span", { className: 'shrink-0', children: trailingIcon }) : null] })] }));
 exports.PsButton = PsButton;

package/dist/components/ps-fab.js

@@ -9,5 +9,5 @@ const positionClassNames = {
     'bottom-left': 'bottom-6 left-6',
     'bottom-center': 'bottom-6 left-1/2 -translate-x-1/2',
 };
-const PsFab = ({ className, position = 'bottom-right', ...props }) => ((0, jsx_runtime_1.jsx)(ps_button_1.PsButton, { size: 'large', variant: 'primary', className: ps_design_system_1.PallasoftClassNameService.merge('fixed z-docked h-14 w-14 shrink-0 !px-0 shadow-lg', positionClassNames[position], className), ...props }));
+const PsFab = ({ className, position = 'bottom-right', ...props }) => ((0, jsx_runtime_1.jsx)(ps_button_1.PsButton, { size: 'large', variant: 'primary', className: ps_design_system_1.PallasoftClassNameService.merge('!fixed z-docked h-14 w-14 shrink-0 !px-0 shadow-lg', positionClassNames[position], className), ...props }));
 exports.PsFab = PsFab;

package/dist/components/ps-feature-card.d.ts

@@ -0,0 +1,7 @@
+import { type PsIconKey } from '@pallasoft/ps-icons';
+export interface PsFeatureCardProps {
+    description: string;
+    iconKey: PsIconKey;
+    title: string;
+}
+export declare const PsFeatureCard: ({ description, iconKey, title }: PsFeatureCardProps) => import("react").JSX.Element;

package/dist/components/ps-feature-card.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsFeatureCard = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ps_icons_1 = require("@pallasoft/ps-icons");
+const ps_card_1 = require("./ps-card");
+const PsFeatureCard = ({ description, iconKey, title }) => ((0, jsx_runtime_1.jsxs)(ps_card_1.PsCard, { className: 'h-full text-center', density: 'spacious', children: [(0, jsx_runtime_1.jsx)("span", { className: 'ps-icon-surface mx-auto h-12 w-12', children: (0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { className: 'h-6 w-6', iconKey: iconKey }) }), (0, jsx_runtime_1.jsx)("h3", { className: 'text-header-4 mb-2 mt-4 text-ink', children: title }), (0, jsx_runtime_1.jsx)("p", { className: 'text-body-2 text-ink/60', children: description })] }));
+exports.PsFeatureCard = PsFeatureCard;

package/dist/components/ps-feature-grid.d.ts

@@ -1,7 +1,8 @@
 import type { PsFeatureCardData } from '../models/ps-feature-card-data';
 export interface PsFeatureGridProps {
+    description?: string;
     eyebrow: string;
     features: PsFeatureCardData[];
     title: string;
 }
-export declare const PsFeatureGrid: ({ eyebrow, features, title }: PsFeatureGridProps) => import("react").JSX.Element;
+export declare const PsFeatureGrid: ({ description, eyebrow, features, title }: PsFeatureGridProps) => import("react").JSX.Element;

package/dist/components/ps-feature-grid.js

@@ -2,9 +2,9 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PsFeatureGrid = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const ps_icons_1 = require("@pallasoft/ps-icons");
 const ps_motion_components_1 = require("@pallasoft/ps-motion-components");
 const ps_website_section_config_1 = require("../constants/ps-website-section-config");
-const ps_card_1 = require("./ps-card");
-const PsFeatureGrid = ({ eyebrow, features, title }) => ((0, jsx_runtime_1.jsxs)("div", { className: 'flex w-full flex-col items-center gap-8', children: [(0, jsx_runtime_1.jsxs)(ps_motion_components_1.PsScrollReveal, { className: 'text-center', children: [(0, jsx_runtime_1.jsx)("span", { className: 'ps-eyebrow mb-3 block', children: eyebrow }), (0, jsx_runtime_1.jsx)("h2", { className: 'text-header-2 text-ink', children: title })] }), (0, jsx_runtime_1.jsx)(ps_motion_components_1.PsStaggerContainer, { className: 'grid w-full grid-cols-1 gap-5 md:grid-cols-3', staggerDelay: ps_website_section_config_1.PsWebsiteSectionConfig.staggerDelay, children: features.map((feature) => ((0, jsx_runtime_1.jsx)(ps_motion_components_1.PsStaggerItem, { children: (0, jsx_runtime_1.jsxs)(ps_card_1.PsCard, { className: 'h-full text-center', density: 'spacious', children: [(0, jsx_runtime_1.jsx)("span", { className: 'ps-icon-surface mx-auto h-12 w-12', children: (0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { className: 'h-6 w-6', iconKey: feature.iconKey }) }), (0, jsx_runtime_1.jsx)("h3", { className: 'text-header-4 mb-2 mt-4 text-ink', children: feature.title }), (0, jsx_runtime_1.jsx)("p", { className: 'text-body-2 text-ink/60', children: feature.description })] }) }, feature.title))) })] }));
+const ps_feature_card_1 = require("./ps-feature-card");
+const ps_section_intro_1 = require("./ps-section-intro");
+const PsFeatureGrid = ({ description, eyebrow, features, title }) => ((0, jsx_runtime_1.jsxs)("div", { className: 'flex w-full flex-col items-center gap-8', children: [(0, jsx_runtime_1.jsx)(ps_section_intro_1.PsSectionIntro, { description: description, eyebrow: eyebrow, title: title }), (0, jsx_runtime_1.jsx)(ps_motion_components_1.PsStaggerContainer, { className: 'grid w-full grid-cols-1 gap-5 md:grid-cols-3', staggerDelay: ps_website_section_config_1.PsWebsiteSectionConfig.staggerDelay, children: features.map((feature) => ((0, jsx_runtime_1.jsx)(ps_motion_components_1.PsStaggerItem, { children: (0, jsx_runtime_1.jsx)(ps_feature_card_1.PsFeatureCard, { description: feature.description, iconKey: feature.iconKey, title: feature.title }) }, feature.title))) })] }));
 exports.PsFeatureGrid = PsFeatureGrid;

package/dist/components/ps-link-button.d.ts

@@ -0,0 +1,11 @@
+import type { AnchorHTMLAttributes, ElementType, ReactNode } from 'react';
+export interface PsLinkButtonProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+    children: ReactNode;
+    href: string;
+    leadingIcon?: ReactNode;
+    LinkComponent?: ElementType;
+    size?: 'compact' | 'default' | 'large';
+    trailingIcon?: ReactNode;
+    variant?: 'danger' | 'ghost' | 'primary' | 'secondary' | 'surface';
+}
+export declare const PsLinkButton: ({ children, className, href, leadingIcon, LinkComponent, size, trailingIcon, variant, ...props }: PsLinkButtonProps) => import("react").JSX.Element;

package/dist/components/ps-link-button.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsLinkButton = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ps_design_system_1 = require("@pallasoft/ps-design-system");
+const ps_button_classes_1 = require("../constants/ps-button-classes");
+const PsLinkButton = ({ children, className, href, leadingIcon, LinkComponent, size = 'default', trailingIcon, variant = 'secondary', ...props }) => {
+    const linkClassName = ps_design_system_1.PallasoftClassNameService.merge(ps_button_classes_1.PsButtonBaseClassName, ps_button_classes_1.PsButtonSizeClassNames[size], ps_button_classes_1.PsLinkButtonVariantClassNames[variant], className);
+    const content = ((0, jsx_runtime_1.jsxs)("span", { className: 'inline-flex min-w-0 items-center gap-2', 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] }));
+    return LinkComponent ? ((0, jsx_runtime_1.jsx)(LinkComponent, { className: linkClassName, prefetch: 'intent', to: href, ...props, children: content })) : ((0, jsx_runtime_1.jsx)("a", { className: linkClassName, href: href, ...props, children: content }));
+};
+exports.PsLinkButton = PsLinkButton;

package/dist/components/ps-page-backdrop.d.ts

@@ -0,0 +1 @@
+export declare const PsPageBackdrop: () => import("react").JSX.Element;

package/dist/components/ps-page-backdrop.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsPageBackdrop = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const PsPageBackdrop = () => ((0, jsx_runtime_1.jsx)("div", { "aria-hidden": 'true', className: "pointer-events-none fixed inset-0 -z-10 bg-[linear-gradient(180deg,rgb(var(--ps-color-surface-rgb)/0.82),transparent_42%),linear-gradient(135deg,rgb(var(--ps-color-primary-rgb)/0.1),transparent_36%),linear-gradient(315deg,rgb(var(--ps-color-accent-rgb)/0.08),transparent_40%)] before:absolute before:inset-0 before:bg-[linear-gradient(rgb(var(--ps-color-line-rgb)/0.44)_1px,transparent_1px),linear-gradient(90deg,rgb(var(--ps-color-line-rgb)/0.44)_1px,transparent_1px)] before:bg-[length:4rem_4rem] before:content-[''] before:[mask-image:linear-gradient(180deg,rgb(0_0_0/0.54),transparent_72%)]" }));
+exports.PsPageBackdrop = PsPageBackdrop;

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

@@ -0,0 +1,6 @@
+export interface PsSectionIntroProps {
+    description?: string;
+    eyebrow: string;
+    title: string;
+}
+export declare const PsSectionIntro: ({ description, eyebrow, title }: PsSectionIntroProps) => import("react").JSX.Element;

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

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsSectionIntro = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ps_motion_components_1 = require("@pallasoft/ps-motion-components");
+const PsSectionIntro = ({ description, eyebrow, title }) => ((0, jsx_runtime_1.jsxs)(ps_motion_components_1.PsScrollReveal, { className: 'mx-auto flex max-w-2xl flex-col items-center gap-3 text-center', children: [(0, jsx_runtime_1.jsx)("span", { className: 'ps-eyebrow block', children: eyebrow }), (0, jsx_runtime_1.jsx)("h2", { className: 'text-header-2 text-ink', children: title }), description ? (0, jsx_runtime_1.jsx)("p", { className: 'text-body-1 text-ink/60', children: description }) : null] }));
+exports.PsSectionIntro = PsSectionIntro;

package/dist/constants/ps-button-classes.d.ts

@@ -0,0 +1,20 @@
+export declare const PsButtonBaseClassName = "ps-focus-ring relative inline-flex max-w-full items-center justify-center gap-2 rounded-full border text-center font-semibold";
+export declare const PsButtonSizeClassNames: {
+    compact: string;
+    default: string;
+    large: string;
+};
+export declare const PsButtonVariantClassNames: {
+    danger: string;
+    ghost: string;
+    primary: string;
+    secondary: string;
+    surface: string;
+};
+export declare const PsLinkButtonVariantClassNames: {
+    danger: string;
+    ghost: string;
+    primary: string;
+    secondary: string;
+    surface: string;
+};

package/dist/constants/ps-button-classes.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsLinkButtonVariantClassNames = exports.PsButtonVariantClassNames = exports.PsButtonSizeClassNames = exports.PsButtonBaseClassName = void 0;
+exports.PsButtonBaseClassName = 'ps-focus-ring relative inline-flex max-w-full items-center justify-center gap-2 rounded-full border text-center font-semibold';
+exports.PsButtonSizeClassNames = {
+    compact: 'ps-control-compact px-3 py-2 text-sm',
+    default: 'ps-control ps-control-padding text-sm',
+    large: 'ps-control-large px-5 py-3 text-sm',
+};
+exports.PsButtonVariantClassNames = {
+    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',
+};
+exports.PsLinkButtonVariantClassNames = {
+    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',
+};

package/dist/constants/ps-voice-orb.js

@@ -74,10 +74,10 @@ exports.PsVoiceOrbCadenceByState = {
 };
 exports.PsVoiceOrbThemes = {
     default: {
-        glass: 'radial-gradient(circle at 32% 28%, rgb(255 255 255 / 0.95), transparent 46%), radial-gradient(circle, rgb(255 255 255 / 0.92), rgb(var(--ps-color-accent-rgb) / 0.5) 58%, rgb(var(--ps-color-primary-rgb) / 0.75) 100%)',
-        rim: 'conic-gradient(rgb(var(--ps-color-primary-rgb)), rgb(var(--ps-color-accent-rgb)), rgb(255 255 255), rgb(var(--ps-color-secondary-rgb)), rgb(var(--ps-color-primary-rgb)))',
+        glass: 'radial-gradient(circle at 32% 28%, rgb(255 255 255 / 0.95), transparent 46%), radial-gradient(circle, rgb(255 255 255 / 0.92), rgb(var(--ps-color-secondary-rgb) / 0.55) 58%, rgb(var(--ps-color-primary-rgb) / 0.75) 100%)',
+        rim: 'conic-gradient(rgb(var(--ps-color-primary-rgb)), rgb(var(--ps-color-secondary-rgb)), rgb(255 255 255), rgb(var(--ps-color-secondary-rgb)), rgb(var(--ps-color-primary-rgb)))',
         ripple: 'rgb(var(--ps-color-primary-rgb) / 0.6)',
-        core: 'radial-gradient(circle, rgb(255 255 255), rgb(var(--ps-color-accent-rgb) / 0.75) 35%, transparent 70%)',
+        core: 'radial-gradient(circle, rgb(255 255 255), rgb(var(--ps-color-secondary-rgb) / 0.75) 35%, transparent 70%)',
     },
     error: {
         glass: 'radial-gradient(circle at 32% 28%, rgb(255 255 255 / 0.95), transparent 46%), radial-gradient(circle, rgb(255 255 255 / 0.92), rgb(var(--ps-color-danger-rgb) / 0.45) 58%, rgb(var(--ps-color-danger-rgb) / 0.7) 100%)',

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

@@ -1,16 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { PallasoftClassNameService } from '@pallasoft/ps-design-system';
+import { PsButtonBaseClassName, PsButtonSizeClassNames, PsButtonVariantClassNames, } from '../constants/ps-button-classes';
 import { PsSpinner } from './ps-spinner';
-const sizeClassNames = {
-    compact: 'ps-control-compact px-3 py-2 text-sm',
-    default: 'ps-control ps-control-padding text-sm',
-    large: 'ps-control-large px-5 py-3 text-sm',
-};
-const variantClassNames = {
-    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',
-};
-export const PsButton = ({ children, className, disabled, isLabelHiddenOnMobile = false, isLoading = false, leadingIcon, loadingLabel, size = 'default', trailingIcon, type = 'button', variant = 'secondary', ...props }) => (_jsxs("button", { className: 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], isLabelHiddenOnMobile && leadingIcon ? 'min-w-11 max-sm:px-0' : '', variantClassNames[variant], className), "aria-busy": isLoading || undefined, disabled: disabled || isLoading, type: type, ...props, children: [isLoading ? (_jsx(PsSpinner, { className: 'absolute inset-0 m-auto', color: 'current', label: loadingLabel !== null && loadingLabel !== undefined ? loadingLabel : 'Loading', size: 'small' })) : null, _jsxs("span", { "aria-hidden": isLoading || undefined, className: PallasoftClassNameService.merge('inline-flex min-w-0 items-center gap-2', isLoading ? 'invisible' : ''), children: [leadingIcon ? _jsx("span", { className: 'shrink-0', children: leadingIcon }) : null, _jsx("span", { className: isLabelHiddenOnMobile && leadingIcon ? 'sr-only sm:not-sr-only sm:truncate' : 'truncate', children: children }), trailingIcon ? _jsx("span", { className: 'shrink-0', children: trailingIcon }) : null] })] }));
+export const PsButton = ({ children, className, disabled, isLabelHiddenOnMobile = false, isLoading = false, leadingIcon, loadingLabel, size = 'default', trailingIcon, type = 'button', variant = 'secondary', ...props }) => (_jsxs("button", { className: PallasoftClassNameService.merge(PsButtonBaseClassName, 'disabled:cursor-not-allowed disabled:opacity-50', PsButtonSizeClassNames[size], isLabelHiddenOnMobile && leadingIcon ? 'min-w-11 max-sm:px-0' : '', PsButtonVariantClassNames[variant], className), "aria-busy": isLoading || undefined, disabled: disabled || isLoading, type: type, ...props, children: [isLoading ? (_jsx(PsSpinner, { className: 'absolute inset-0 m-auto', color: 'current', label: loadingLabel !== null && loadingLabel !== undefined ? loadingLabel : 'Loading', size: 'small' })) : null, _jsxs("span", { "aria-hidden": isLoading || undefined, className: PallasoftClassNameService.merge('inline-flex min-w-0 items-center gap-2', isLoading ? 'invisible' : ''), children: [leadingIcon ? _jsx("span", { className: 'shrink-0', children: leadingIcon }) : null, _jsx("span", { className: isLabelHiddenOnMobile && leadingIcon ? 'sr-only sm:not-sr-only sm:truncate' : 'truncate', children: children }), trailingIcon ? _jsx("span", { className: 'shrink-0', children: trailingIcon }) : null] })] }));

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

@@ -6,4 +6,4 @@ const positionClassNames = {
     'bottom-left': 'bottom-6 left-6',
     'bottom-center': 'bottom-6 left-1/2 -translate-x-1/2',
 };
-export const PsFab = ({ className, position = 'bottom-right', ...props }) => (_jsx(PsButton, { size: 'large', variant: 'primary', className: PallasoftClassNameService.merge('fixed z-docked h-14 w-14 shrink-0 !px-0 shadow-lg', positionClassNames[position], className), ...props }));
+export const PsFab = ({ className, position = 'bottom-right', ...props }) => (_jsx(PsButton, { size: 'large', variant: 'primary', className: PallasoftClassNameService.merge('!fixed z-docked h-14 w-14 shrink-0 !px-0 shadow-lg', positionClassNames[position], className), ...props }));

package/dist/esm/components/ps-feature-card.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PsIcon } from '@pallasoft/ps-icons';
+import { PsCard } from './ps-card';
+export const PsFeatureCard = ({ description, iconKey, title }) => (_jsxs(PsCard, { className: 'h-full text-center', density: 'spacious', children: [_jsx("span", { className: 'ps-icon-surface mx-auto h-12 w-12', children: _jsx(PsIcon, { className: 'h-6 w-6', iconKey: iconKey }) }), _jsx("h3", { className: 'text-header-4 mb-2 mt-4 text-ink', children: title }), _jsx("p", { className: 'text-body-2 text-ink/60', children: description })] }));

package/dist/esm/components/ps-feature-grid.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { PsIcon } from '@pallasoft/ps-icons';
-import { PsScrollReveal, PsStaggerContainer, PsStaggerItem } from '@pallasoft/ps-motion-components';
+import { PsStaggerContainer, PsStaggerItem } from '@pallasoft/ps-motion-components';
 import { PsWebsiteSectionConfig } from '../constants/ps-website-section-config';
-import { PsCard } from './ps-card';
-export const PsFeatureGrid = ({ eyebrow, features, title }) => (_jsxs("div", { className: 'flex w-full flex-col items-center gap-8', children: [_jsxs(PsScrollReveal, { className: 'text-center', children: [_jsx("span", { className: 'ps-eyebrow mb-3 block', children: eyebrow }), _jsx("h2", { className: 'text-header-2 text-ink', children: title })] }), _jsx(PsStaggerContainer, { className: 'grid w-full grid-cols-1 gap-5 md:grid-cols-3', staggerDelay: PsWebsiteSectionConfig.staggerDelay, children: features.map((feature) => (_jsx(PsStaggerItem, { children: _jsxs(PsCard, { className: 'h-full text-center', density: 'spacious', children: [_jsx("span", { className: 'ps-icon-surface mx-auto h-12 w-12', children: _jsx(PsIcon, { className: 'h-6 w-6', iconKey: feature.iconKey }) }), _jsx("h3", { className: 'text-header-4 mb-2 mt-4 text-ink', children: feature.title }), _jsx("p", { className: 'text-body-2 text-ink/60', children: feature.description })] }) }, feature.title))) })] }));
+import { PsFeatureCard } from './ps-feature-card';
+import { PsSectionIntro } from './ps-section-intro';
+export const PsFeatureGrid = ({ description, eyebrow, features, title }) => (_jsxs("div", { className: 'flex w-full flex-col items-center gap-8', children: [_jsx(PsSectionIntro, { description: description, eyebrow: eyebrow, title: title }), _jsx(PsStaggerContainer, { className: 'grid w-full grid-cols-1 gap-5 md:grid-cols-3', staggerDelay: PsWebsiteSectionConfig.staggerDelay, children: features.map((feature) => (_jsx(PsStaggerItem, { children: _jsx(PsFeatureCard, { description: feature.description, iconKey: feature.iconKey, title: feature.title }) }, feature.title))) })] }));

package/dist/esm/components/ps-link-button.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PallasoftClassNameService } from '@pallasoft/ps-design-system';
+import { PsButtonBaseClassName, PsButtonSizeClassNames, PsLinkButtonVariantClassNames, } from '../constants/ps-button-classes';
+export const PsLinkButton = ({ children, className, href, leadingIcon, LinkComponent, size = 'default', trailingIcon, variant = 'secondary', ...props }) => {
+    const linkClassName = PallasoftClassNameService.merge(PsButtonBaseClassName, PsButtonSizeClassNames[size], PsLinkButtonVariantClassNames[variant], className);
+    const content = (_jsxs("span", { className: 'inline-flex min-w-0 items-center gap-2', children: [leadingIcon ? _jsx("span", { className: 'shrink-0', children: leadingIcon }) : null, _jsx("span", { className: 'truncate', children: children }), trailingIcon ? _jsx("span", { className: 'shrink-0', children: trailingIcon }) : null] }));
+    return LinkComponent ? (_jsx(LinkComponent, { className: linkClassName, prefetch: 'intent', to: href, ...props, children: content })) : (_jsx("a", { className: linkClassName, href: href, ...props, children: content }));
+};

package/dist/esm/components/ps-page-backdrop.js

@@ -0,0 +1,2 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const PsPageBackdrop = () => (_jsx("div", { "aria-hidden": 'true', className: "pointer-events-none fixed inset-0 -z-10 bg-[linear-gradient(180deg,rgb(var(--ps-color-surface-rgb)/0.82),transparent_42%),linear-gradient(135deg,rgb(var(--ps-color-primary-rgb)/0.1),transparent_36%),linear-gradient(315deg,rgb(var(--ps-color-accent-rgb)/0.08),transparent_40%)] before:absolute before:inset-0 before:bg-[linear-gradient(rgb(var(--ps-color-line-rgb)/0.44)_1px,transparent_1px),linear-gradient(90deg,rgb(var(--ps-color-line-rgb)/0.44)_1px,transparent_1px)] before:bg-[length:4rem_4rem] before:content-[''] before:[mask-image:linear-gradient(180deg,rgb(0_0_0/0.54),transparent_72%)]" }));

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

@@ -0,0 +1,3 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PsScrollReveal } from '@pallasoft/ps-motion-components';
+export const PsSectionIntro = ({ description, eyebrow, title }) => (_jsxs(PsScrollReveal, { className: 'mx-auto flex max-w-2xl flex-col items-center gap-3 text-center', children: [_jsx("span", { className: 'ps-eyebrow block', children: eyebrow }), _jsx("h2", { className: 'text-header-2 text-ink', children: title }), description ? _jsx("p", { className: 'text-body-1 text-ink/60', children: description }) : null] }));

package/dist/esm/constants/ps-button-classes.js

@@ -0,0 +1,20 @@
+export const PsButtonBaseClassName = 'ps-focus-ring relative inline-flex max-w-full items-center justify-center gap-2 rounded-full border text-center font-semibold';
+export const PsButtonSizeClassNames = {
+    compact: 'ps-control-compact px-3 py-2 text-sm',
+    default: 'ps-control ps-control-padding text-sm',
+    large: 'ps-control-large px-5 py-3 text-sm',
+};
+export const PsButtonVariantClassNames = {
+    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',
+};
+export const PsLinkButtonVariantClassNames = {
+    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',
+};

package/dist/esm/constants/ps-voice-orb.js

@@ -71,10 +71,10 @@ export const PsVoiceOrbCadenceByState = {
 };
 export const PsVoiceOrbThemes = {
     default: {
-        glass: 'radial-gradient(circle at 32% 28%, rgb(255 255 255 / 0.95), transparent 46%), radial-gradient(circle, rgb(255 255 255 / 0.92), rgb(var(--ps-color-accent-rgb) / 0.5) 58%, rgb(var(--ps-color-primary-rgb) / 0.75) 100%)',
-        rim: 'conic-gradient(rgb(var(--ps-color-primary-rgb)), rgb(var(--ps-color-accent-rgb)), rgb(255 255 255), rgb(var(--ps-color-secondary-rgb)), rgb(var(--ps-color-primary-rgb)))',
+        glass: 'radial-gradient(circle at 32% 28%, rgb(255 255 255 / 0.95), transparent 46%), radial-gradient(circle, rgb(255 255 255 / 0.92), rgb(var(--ps-color-secondary-rgb) / 0.55) 58%, rgb(var(--ps-color-primary-rgb) / 0.75) 100%)',
+        rim: 'conic-gradient(rgb(var(--ps-color-primary-rgb)), rgb(var(--ps-color-secondary-rgb)), rgb(255 255 255), rgb(var(--ps-color-secondary-rgb)), rgb(var(--ps-color-primary-rgb)))',
         ripple: 'rgb(var(--ps-color-primary-rgb) / 0.6)',
-        core: 'radial-gradient(circle, rgb(255 255 255), rgb(var(--ps-color-accent-rgb) / 0.75) 35%, transparent 70%)',
+        core: 'radial-gradient(circle, rgb(255 255 255), rgb(var(--ps-color-secondary-rgb) / 0.75) 35%, transparent 70%)',
     },
     error: {
         glass: 'radial-gradient(circle at 32% 28%, rgb(255 255 255 / 0.95), transparent 46%), radial-gradient(circle, rgb(255 255 255 / 0.92), rgb(var(--ps-color-danger-rgb) / 0.45) 58%, rgb(var(--ps-color-danger-rgb) / 0.7) 100%)',

package/dist/esm/index.js

@@ -5,6 +5,7 @@ export * from './components/ps-audio-spectrum';
 export * from './constants/ps-audio-spectrum-config';
 export * from './components/ps-badge';
 export * from './components/ps-button';
+export * from './components/ps-link-button';
 export * from './components/ps-card';
 export * from './components/ps-draggable-grid';
 export * from './components/ps-empty-state';
@@ -61,6 +62,9 @@ export * from './components/ps-card-block-skeleton';
 export * from './components/ps-data-boundary';
 export * from './components/ps-faq-answer';
 export * from './components/ps-feature-grid';
+export * from './components/ps-feature-card';
+export * from './components/ps-page-backdrop';
+export * from './components/ps-section-intro';
 export * from './components/ps-form-fields-skeleton';
 export * from './components/ps-form-page-skeleton';
 export * from './components/ps-icon-button';

package/dist/index.d.ts

@@ -5,6 +5,7 @@ export * from './components/ps-audio-spectrum';
 export * from './constants/ps-audio-spectrum-config';
 export * from './components/ps-badge';
 export * from './components/ps-button';
+export * from './components/ps-link-button';
 export * from './components/ps-card';
 export * from './components/ps-draggable-grid';
 export * from './components/ps-empty-state';
@@ -61,6 +62,9 @@ export * from './components/ps-card-block-skeleton';
 export * from './components/ps-data-boundary';
 export * from './components/ps-faq-answer';
 export * from './components/ps-feature-grid';
+export * from './components/ps-feature-card';
+export * from './components/ps-page-backdrop';
+export * from './components/ps-section-intro';
 export * from './components/ps-form-fields-skeleton';
 export * from './components/ps-form-page-skeleton';
 export * from './components/ps-icon-button';

package/dist/index.js

@@ -21,6 +21,7 @@ __exportStar(require("./components/ps-audio-spectrum"), exports);
 __exportStar(require("./constants/ps-audio-spectrum-config"), exports);
 __exportStar(require("./components/ps-badge"), exports);
 __exportStar(require("./components/ps-button"), exports);
+__exportStar(require("./components/ps-link-button"), exports);
 __exportStar(require("./components/ps-card"), exports);
 __exportStar(require("./components/ps-draggable-grid"), exports);
 __exportStar(require("./components/ps-empty-state"), exports);
@@ -77,6 +78,9 @@ __exportStar(require("./components/ps-card-block-skeleton"), exports);
 __exportStar(require("./components/ps-data-boundary"), exports);
 __exportStar(require("./components/ps-faq-answer"), exports);
 __exportStar(require("./components/ps-feature-grid"), exports);
+__exportStar(require("./components/ps-feature-card"), exports);
+__exportStar(require("./components/ps-page-backdrop"), exports);
+__exportStar(require("./components/ps-section-intro"), exports);
 __exportStar(require("./components/ps-form-fields-skeleton"), exports);
 __exportStar(require("./components/ps-form-page-skeleton"), exports);
 __exportStar(require("./components/ps-icon-button"), exports);

package/package.json

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